/* ============================================================================
   POLICES AUTO-HÉBERGÉES
   Instrument Sans, sous-ensemble latin, format variable.
   Aucune requête vers un service tiers : rien ne part chez Google au
   chargement, et la page ne dépend d'aucun serveur extérieur.
   ========================================================================= */
@font-face{ font-family:"Instrument Sans"; font-style:normal; font-weight:400 700;
  font-display:swap; src:url("/assets/fonts/instrument-sans.woff2") format("woff2"); }
@font-face{ font-family:"Instrument Sans"; font-style:italic; font-weight:400 700;
  font-display:swap; src:url("/assets/fonts/instrument-sans-italic.woff2") format("woff2"); }

/* ============================================================================
   REFENCE — feuille de style unique, partagée par toutes les pages.
   Papier craie, encre profonde, cobalt de signalisation. La rampe thermique
   (indigo → cyan → jaune → rouge) est réservée aux données : c'est le langage
   visuel commun de la climatisation et de la recherche de fuite.
   ========================================================================= */
:root{
  --craie:#F1F7FF; --craie-2:#E2EAF7; --blanc:#FFF;
  --encre:#0D0F10; --encre-2:#3E4446; --encre-3:#5D656B;
  --trait:rgba(16,32,64,.12); --trait-2:rgba(16,32,64,.22);
  --cobalt:#1B2AE8; --cobalt-f:#F0F1FE;
  --t1:#2B2FE0; --t2:#12B5C9; --t3:#FFC93D; --t4:#FF4D2E;
  --ok:#0B7A47; --ok-f:#E8F7EF;
  --alerte:#B23A0E; --alerte-f:#FDF1EC;
  --marge:clamp(18px,4vw,80px); --max:1320px; --texte-max:70ch;
  --ui:"Instrument Sans",system-ui,-apple-system,sans-serif;
  --dat:"Instrument Sans",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; /* données chiffrées */
}
*,*::before,*::after{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; scroll-behavior:smooth; background:var(--craie); }
body{ margin:0; background:var(--craie); color:var(--encre); font-family:var(--ui);
  font-size:16px; line-height:1.62; overflow-x:hidden; -webkit-font-smoothing:antialiased; }
h1,h2,h3,h4,p,figure,blockquote{ margin:0; }
ul,ol{ margin:0; padding:0; list-style:none; }
a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
input{ font:inherit; color:inherit; }
img{ display:block; max-width:100%; height:auto; }
.sr{ position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
:focus-visible{ outline:2.5px solid var(--cobalt); outline-offset:3px; border-radius:4px; }
.env{ max-width:var(--max); margin-inline:auto; padding-inline:var(--marge); }
[id]{ scroll-margin-top:100px; }
.saut{ position:absolute; left:-9999px; top:0; z-index:200; padding:12px 18px; background:var(--cobalt); color:#fff; }
.saut:focus{ left:0; }

/* --- typographie --------------------------------------------------------- */
.d1{ font-size:clamp(31px,4.8vw,58px); line-height:1.05; letter-spacing:-.042em; font-weight:600; text-wrap:balance; }
.d2{ font-size:clamp(24px,3.4vw,40px); line-height:1.1; letter-spacing:-.036em; font-weight:600; text-wrap:balance; }
.d3{ font-size:clamp(18px,1.9vw,23px); line-height:1.25; letter-spacing:-.025em; font-weight:600; }
.d4{ font-size:17px; font-weight:600; letter-spacing:-.02em; line-height:1.3; }
.lead{ font-size:clamp(16px,1.2vw,18.5px); line-height:1.58; color:var(--encre-2); text-wrap:pretty; }
.eti{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:-.01em; color:var(--encre-3); }
.dat{ font-family:var(--dat); font-variant-numeric:tabular-nums; }
.sur{ color:var(--cobalt); }
.reponse{ margin-top:14px; font-size:clamp(16.5px,1.3vw,19px); line-height:1.5; font-weight:500; text-wrap:pretty; }

/* --- boutons ------------------------------------------------------------- */
.btn{ display:inline-flex; align-items:center; justify-content:center; gap:9px; padding:15px 24px; border-radius:100px;
  font-weight:600; font-size:15px; background:var(--cobalt); color:#fff; border:1.5px solid var(--cobalt);
  box-shadow:0 10px 24px -14px rgba(27,42,232,.9); transition:background 200ms,transform 180ms; }
.btn:hover{ background:#1522C4; transform:translateY(-1px); }
.btn--fant{ background:transparent; color:var(--encre); border-color:var(--trait-2); box-shadow:none; }
.btn--fant:hover{ background:var(--blanc); border-color:var(--encre); transform:none; }
.btn[disabled]{ opacity:.35; pointer-events:none; }
.actes{ display:flex; flex-wrap:wrap; gap:11px; margin-top:24px; }

/* --- en-tête ------------------------------------------------------------- */
/* En-tête : pleine largeur en haut de page, puis pilule flottante au défilement.
   La transition porte sur .tete__in, pas sur .tete : la barre garde sa hauteur,
   seule la surface blanche se détache — rien ne saute sous le curseur. */
.tete{ position:sticky; top:0; z-index:70; background:transparent;
  transition:padding 320ms cubic-bezier(.2,.8,.2,1); }
.tete::before{ content:""; position:absolute; inset:0; background:var(--blanc);
  border-bottom:1px solid var(--trait);
  opacity:1; transition:opacity 320ms ease; }
.tete__in{ position:relative; display:flex; align-items:center; gap:clamp(8px,1.6vw,24px);
  height:76px; border-radius:0; background:transparent;
  padding-inline:0; box-shadow:0 0 0 0 rgba(16,32,64,0);
  transition:background 320ms ease, border-radius 320ms cubic-bezier(.2,.8,.2,1),
             box-shadow 320ms ease, padding 320ms cubic-bezier(.2,.8,.2,1); }

/* état flottant, posé par le script dès que la page défile */
.tete[data-flotte]{ padding-block:10px; }
.tete[data-flotte]::before{ opacity:0; }
.tete[data-flotte] .tete__in{ height:66px; border-radius:100px; background:var(--blanc);
  padding-inline:16px;
  box-shadow:0 1px 2px rgba(16,32,64,.06), 0 16px 34px -20px rgba(16,32,64,.42); }

@media (prefers-reduced-motion:reduce){
  .tete,.tete::before,.tete__in{ transition:none; } }
/* logo : le clou-repère, picto serré contre le mot */
.logo{ display:flex; align-items:center; gap:0; }
.logo__p{ flex:none; color:var(--cobalt); }
.logo__p .tige{ fill:var(--encre); }
.logo b{ font-weight:700; font-size:26px; letter-spacing:0; line-height:1; }
.logo b i{ font-style:normal; color:var(--cobalt); }
@media (max-width:900px){ .logo b{ font-size:23px; } .logo__p{ width:22px; height:33px; } }
.tete nav{ display:flex; gap:2px; margin-left:auto; }
.tete nav a{ font-size:14px; color:var(--encre-2); padding:9px 14px; border-radius:100px;
  transition:background 180ms ease, color 180ms ease; }
.tete nav a:hover{ color:var(--encre); background:var(--craie-2); }
.tete nav a[aria-current]{ color:var(--encre); background:var(--craie-2); font-weight:600; }
/* la graisse du lien actif est réservée d'avance : sans cela, la barre
   se décalerait d'un ou deux pixels d'une page à l'autre. */
.tete nav a::after{ content:attr(data-t); display:block; height:0; overflow:hidden;
  font-weight:600; visibility:hidden; pointer-events:none; }
.tete .btn{ padding:11px 18px; font-size:14px; }
.menu-b{ display:none; margin-left:auto; padding:9px 13px; border:1px solid var(--trait-2); border-radius:100px; font-size:14px; }
@media (max-width:1000px){
  .tete nav{ display:none; position:absolute; top:calc(100% + 6px); left:0; right:0; flex-direction:column; gap:0;
    background:var(--blanc); border:1px solid var(--trait); border-radius:18px; padding:8px 20px 14px;
    left:var(--marge); right:var(--marge);
    box-shadow:0 14px 26px -18px rgba(16,32,64,.4); }
  .tete nav[data-ouvert]{ display:flex; }
  .tete nav a{ padding:13px 14px; border-radius:12px; border-bottom:1px solid var(--trait); }
  .tete nav a:last-child{ border-bottom:none; }
  .menu-b{ display:block; }
  .tete .btn{ margin-left:8px; }
}
/* Sur téléphone, les trois éléments de la barre dépassent la largeur
   disponible. Le bouton Menu devient une icône, ce qui libère une
   cinquantaine de pixels, et la marge latérale est renforcée pour que
   ni le logo ni le bouton ne frôlent le bord de l'écran. */
@media (max-width:560px){
  .tete__in,
  .tete[data-flotte] .tete__in{ gap:8px; padding-inline:24px; }
  .tete .btn{ padding:11px 15px; font-size:13px; }

  /* Burger : trois barres en dégradés. Le libellé « Menu » reste dans le
     HTML pour l'accessibilité ; réduit à zéro il formerait une seconde
     ligne de grille et décalerait l'icône vers le haut. L'icône est donc
     positionnée en absolu et centrée par margin:auto, indépendamment de
     ce que contient le bouton. */
  .menu-b{ position:relative; font-size:0; line-height:0; padding:0;
    width:40px; height:40px; border-radius:50%; flex:none; }
  .menu-b::before{ content:""; position:absolute; inset:0; margin:auto;
    width:17px; height:12px;
    background:
      linear-gradient(currentColor,currentColor) top    /100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) center /100% 2px no-repeat,
      linear-gradient(currentColor,currentColor) bottom /100% 2px no-repeat; }
  .menu-b[aria-expanded="true"]{ border-color:var(--cobalt); color:var(--cobalt); }
}
@media (max-width:400px){
  .tete__in,
  .tete[data-flotte] .tete__in{ padding-inline:20px; gap:6px; }
  .tete .btn{ padding:10px 13px; font-size:12.5px; }
  .logo b{ font-size:20px; }
  .logo__p{ width:19px; height:29px; }
  .menu-b{ width:38px; height:38px; }
}

/* --- fil d'ariane -------------------------------------------------------- */
.ariane{ border-bottom:1px solid var(--trait); background:var(--craie); }
.ariane ol{ display:flex; flex-wrap:wrap; gap:8px; padding-block:11px; font-size:13px; color:var(--encre-3); }
.ariane li::after{ content:"›"; margin-left:8px; opacity:.5; }
.ariane li:last-child::after{ content:""; }
.ariane a:hover{ color:var(--cobalt); }

/* --- sections ------------------------------------------------------------ */
.sec{ padding-block:clamp(46px,7.5vh,98px); }
.sec--blanc{ background:var(--blanc); border-block:1px solid var(--trait); }
.sec--craie2{ background:var(--craie); border-block:1px solid var(--trait); }
.sec__tete{ max-width:64ch; margin-bottom:clamp(24px,4vh,44px); }
.sec__tete .lead{ margin-top:14px; }
p + p{ margin-top:13px; }

/* --- hero ---------------------------------------------------------------- */
.hero{ position:relative; padding-block:clamp(28px,5vh,58px) clamp(40px,6.5vh,78px); overflow:clip; }
.hero > *{ position:relative; z-index:1; }

/* halos colorés en mouvement lent : deux nappes qui respirent en décalé */
.hero::before{ content:""; position:absolute; inset:-45% -25% auto 12%; height:170%; pointer-events:none; z-index:0;
  background:radial-gradient(38% 42% at 58% 28%,rgba(27,42,232,.14),transparent 70%),
             radial-gradient(30% 34% at 86% 60%,rgba(18,181,201,.13),transparent 72%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 97%);
  mask-image:linear-gradient(180deg,#000 0%,#000 66%,transparent 97%);
  animation:respire 26s ease-in-out infinite alternate; }
.hero::after{ content:""; position:absolute; inset:auto -20% -10% 24%; height:110%; pointer-events:none; z-index:0;
  background:radial-gradient(34% 40% at 44% 66%,rgba(90,120,255,.11),transparent 72%),
             radial-gradient(26% 30% at 76% 38%,rgba(18,181,201,.09),transparent 74%);
  -webkit-mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%);
  mask-image:linear-gradient(180deg,#000 0%,#000 62%,transparent 96%);
  animation:respire-2 34s ease-in-out infinite alternate; }

@keyframes respire{
  from{ transform:translate3d(0,0,0) scale(1); }
  to{ transform:translate3d(-4%,3%,0) scale(1.1); } }
@keyframes respire-2{
  from{ transform:translate3d(0,0,0) scale(1.06); }
  to{ transform:translate3d(5%,-4%,0) scale(.96); } }

@media (prefers-reduced-motion:reduce){
  .hero::before,.hero::after{ animation:none; } }

.hero__g{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1.02fr); gap:clamp(26px,3.4vw,60px); align-items:start; }
.hero--simple .hero__g{ grid-template-columns:minmax(0,1fr) minmax(0,.62fr); align-items:end; }
@media (max-width:1060px){
  .hero__g,.hero--simple .hero__g{ grid-template-columns:1fr; gap:20px; }
  /* En une colonne : titre, accroche, repères, formulaire, prise de rendez-vous.
     La colonne de gauche se dissout (display:contents) pour que ses enfants
     deviennent des éléments de la grille et puissent être réordonnés
     indépendamment du formulaire, qui vit dans l'autre colonne. */
  .hero__g > div:first-child{ display:contents; }
  .hero__g > div:first-child > h1{ order:1; }
  .hero__g > div:first-child > .lead{ order:2; }
  .hero__g > div:first-child > .bref{ order:3; }
  .hero__g > div:last-child{ order:4; }
  .hero__g > div:first-child > .visio{ order:5; margin-top:0; }
}
.maj{ margin-top:16px; font-size:12.5px; color:var(--encre-3); }

/* --- prise de rendez-vous en visio ---------------------------------------- */
/* Le module tient sur une ligne dès qu'il y a la place : la colonne de texte
   se comprime avant que le bouton ne passe à la ligne. En dessous, le bouton
   prend toute la largeur plutôt que de flotter à moitié. */
.visio{ margin-top:26px; display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  padding:16px 18px; border:1px solid var(--trait); border-radius:16px; background:var(--blanc); }
.visio__qui{ display:flex; align-items:center; gap:13px; flex:1 1 180px; min-width:0; }
.visio__i{ width:44px; height:44px; flex:none; border-radius:50%; object-fit:cover; display:block;
  background:var(--craie-2); }
.visio__qui b{ display:block; font-size:14.5px; font-weight:600; letter-spacing:-.015em; }
.visio__qui span{ display:block; font-size:13px; color:var(--encre-3); margin-top:2px; }
.visio__b{ display:inline-flex; flex:0 0 auto; justify-content:center; align-items:center; gap:8px;
  white-space:nowrap; padding:11px 18px; border-radius:100px;
  border:1px solid var(--trait-2); font-size:14px; font-weight:600;
  transition:border-color 180ms ease, color 180ms ease, background 180ms ease; }
@media (max-width:430px){ .visio__b{ flex:1 1 100%; } }
.visio__b svg{ width:18px; height:18px; }
.visio__b:hover{ border-color:var(--cobalt); color:var(--cobalt); background:var(--cobalt-f); }
@media (max-width:520px){ .visio__b{ width:100%; justify-content:center; } }

/* --- bloc « en bref » ---------------------------------------------------- */
.bref{ margin-top:24px; border:1px solid var(--trait); border-radius:14px;
  background:var(--blanc); padding:20px 22px; }
.bref h2,.bref .titre{ font-size:15px; font-weight:600; letter-spacing:-.02em; margin-bottom:8px; }
.bref p{ font-size:15px; color:var(--encre-2); }
.bref ul{ margin-top:12px; display:grid; gap:7px; font-size:14.5px; }
.bref li{ position:relative; padding-left:20px; color:var(--encre-2); }
.bref li::before{ content:""; position:absolute; left:0; top:.62em; width:9px; height:2px; border-radius:2px; background:var(--cobalt); }

.chiffres{ display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:1px; margin-top:22px;
  background:var(--trait); border:1px solid var(--trait); border-radius:14px; overflow:hidden; }
.chiffres div{ background:var(--craie); padding:15px 14px; }
.chiffres b{ display:block; font-family:var(--dat); font-size:clamp(21px,2.4vw,28px); font-weight:600; letter-spacing:-.035em; line-height:1; }
.chiffres span{ display:block; margin-top:6px; font-size:12.5px; color:var(--encre-3); line-height:1.35; }


/* --- engagements ---------------------------------------------------------- */
.confiance{ padding-block:clamp(6px,1.5vh,18px) clamp(20px,3.5vh,44px); }
.confiance__g{ display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:clamp(10px,1.3vw,16px); }
.confiance__c{ background:var(--blanc); border:1px solid var(--trait); border-radius:16px;
  padding:clamp(18px,2vw,24px); display:grid; gap:9px; align-content:start;
  transition:border-color 220ms ease, transform 220ms ease; }
.confiance__c:hover{ border-color:color-mix(in srgb, var(--cobalt) 40%, transparent); transform:translateY(-2px); }
.confiance__c svg{ width:24px; height:24px; color:var(--cobalt); }
.confiance__c b{ display:block; font-size:15.5px; font-weight:600; letter-spacing:-.022em; }
.confiance__c span{ display:block; font-size:13.5px; color:var(--encre-3); line-height:1.45; }
@media (max-width:1000px){ .confiance__g{ grid-template-columns:repeat(2,minmax(0,1fr)); } }
@media (max-width:520px){ .confiance__g{ grid-template-columns:1fr; } }

/* --- cartes -------------------------------------------------------------- */
.grille2{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); }
.grille3{ display:grid; grid-template-columns:repeat(auto-fit,minmax(258px,1fr)); gap:clamp(12px,1.6vw,18px); }
@media (max-width:820px){ .grille2{ grid-template-columns:1fr; } }
.carte{ border:1px solid var(--trait); border-radius:16px; padding:clamp(18px,2.1vw,26px); background:var(--blanc);
  display:flex; flex-direction:column; gap:9px; }
.carte__n{ font-family:var(--dat); font-size:10.5px; letter-spacing:.18em; color:var(--cobalt); }
.carte p{ font-size:13.5px; color:var(--encre-2); }
.carte__ou{ font-family:var(--dat); font-size:11.5px; color:var(--encre-3); padding-top:9px; border-top:1px solid var(--trait); }
.carte--lien{ transition:border-color 200ms,transform 200ms; }
.carte--lien:hover{ border-color:var(--cobalt); transform:translateY(-2px); }

.spec{ position:relative; border:1px solid var(--trait); border-radius:20px; padding:clamp(22px,2.6vw,32px);
  background:var(--craie); overflow:hidden; }
.spec::before{ content:""; position:absolute; inset:0 0 auto; height:4px; }
.spec--froid::before{ background:linear-gradient(90deg,var(--t1),var(--t2)); }
.spec--fuite::before{ background:linear-gradient(90deg,var(--t3),var(--t4)); }
.spec__n{ font-family:var(--dat); font-size:11px; letter-spacing:.16em; text-transform:uppercase; color:var(--encre-3); }
.spec h2,.spec h3{ margin-top:10px; }
.spec p{ margin-top:12px; font-size:14.5px; color:var(--encre-2); }
.spec ul{ margin-top:16px; display:grid; gap:8px; font-size:14px; }
.spec li{ position:relative; padding-left:22px; color:var(--encre-2); }
.spec li::before{ content:""; position:absolute; left:0; top:.58em; width:10px; height:2px; background:var(--cobalt); border-radius:2px; }
.spec__pied{ margin-top:18px; padding-top:16px; border-top:1px solid var(--trait); display:flex; align-items:baseline; gap:12px; }
.spec__pied b{ font-family:var(--dat); font-size:clamp(22px,2.8vw,32px); font-weight:600; letter-spacing:-.04em; }
.spec__pied span{ font-size:12.5px; color:var(--encre-3); }

/* --- fil conducteur --------------------------------------------------------
   Repère vertical fixé à droite de l'écran, qui suit le défilement de la page.
   Il ne prend aucune place dans le flux : c'est un point de repère, pas un
   élément de mise en page. Masqué sous 1200 px, où la largeur manque.
   -------------------------------------------------------------------------- */
/* Le repère se cale à gauche de la colonne de contenu, jamais par-dessus :
   sa position part du centre, moins la demi-largeur du conteneur, moins sa
   propre largeur. Il n'apparaît qu'au-delà de 1700 px, seuil en dessous
   duquel il n'y a pas de marge libre. */
.fil{ position:fixed; top:50%; left:calc(50% - (var(--max) / 2) - 170px);
  width:150px; transform:translateY(-50%);
  z-index:60; display:grid; gap:34px; padding-left:26px; margin:0;
  opacity:0; pointer-events:none; transition:opacity 340ms ease; }
.fil[data-on]{ opacity:1; pointer-events:auto; }

.fil__rail{ position:absolute; left:6px; top:6px; bottom:6px; width:2px; border-radius:2px;
  background:var(--trait); overflow:hidden; }
.fil__jauge{ display:block; width:100%; height:0; border-radius:2px;
  background:linear-gradient(180deg,var(--t1),var(--t2) 42%,var(--t3) 76%,var(--t4));
  transition:height 320ms cubic-bezier(.2,.8,.2,1); }

.fil__e{ position:relative; }
.fil__e a{ display:block; font-size:13px; color:var(--encre-3); line-height:1.35;
  transition:color 260ms ease; }
.fil__e a:hover{ color:var(--encre); }
.fil__p{ position:absolute; top:3px; left:-26px; width:14px; height:14px; border-radius:50%;
  background:var(--craie); border:2px solid var(--trait-2);
  transition:background 320ms ease, border-color 320ms ease, box-shadow 320ms ease; }
.fil__e[data-on] a{ color:var(--encre); font-weight:600; }
.fil__e[data-on] .fil__p{ background:var(--cobalt); border-color:var(--cobalt); }
.fil__e[data-ici] .fil__p{ box-shadow:0 0 0 5px color-mix(in srgb,var(--cobalt) 16%, transparent); }

@media (max-width:1700px){ .fil{ display:none; } }
@media (prefers-reduced-motion:reduce){ .fil__jauge,.fil__p{ transition:none; } }

/* --- ruban des métiers ----------------------------------------------------
   Défilement continu, lent, qui s'arrête au survol et au focus clavier.
   Figé sur mobile et en mouvement réduit : la liste devient alors verticale.
   -------------------------------------------------------------------------- */
.carr__tete{ display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; margin-bottom:18px; }
.carr__tete .eti{ margin-right:auto; }
.carr__lien{ font-size:13.5px; font-weight:600; color:var(--cobalt); }
.carr__lien:hover{ text-decoration:underline; text-underline-offset:3px; }

.carr__ruban{ position:relative; width:100vw; margin-left:calc(50% - 50vw); overflow:hidden;
  -webkit-mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%);
  mask-image:linear-gradient(90deg,transparent 0,#000 5%,#000 95%,transparent 100%); }
.carr__piste{ display:flex; gap:18px; width:max-content; padding:4px 0 14px;
  animation:defile 96s linear infinite; will-change:transform; }
.carr__ruban:hover .carr__piste,
.carr__ruban:focus-within .carr__piste{ animation-play-state:paused; }
@keyframes defile{ to{ transform:translate3d(calc(-50% - 9px),0,0); } }

.carte-m{ flex:0 0 clamp(255px,25vw,300px); position:relative; overflow:hidden;
  border:1px solid var(--trait); border-radius:18px; background:var(--blanc); padding:clamp(20px,2.2vw,26px);
  display:flex; flex-direction:column; gap:10px; transition:border-color 200ms,transform 200ms,box-shadow 200ms; }
.carte-m:hover{ border-color:var(--cobalt); transform:translateY(-3px); box-shadow:0 16px 34px -22px rgba(16,32,64,.5); }
.carte-m::before{ content:""; position:absolute; inset:0 0 auto; height:3px;
  background:linear-gradient(90deg,var(--t1),var(--t2)); }
.carte-m--froid::before{ background:linear-gradient(90deg,var(--t1),var(--t2)); }
.carte-m--chaud::before{ background:linear-gradient(90deg,var(--t3),var(--t4)); }
.carte-m h3{ margin-top:2px; font-size:18px; font-weight:600; letter-spacing:-.03em; line-height:1.25; }
.carte-m p{ font-size:13.5px; color:var(--encre-2); }
/* pied de carte : deux lignes, libellé à gauche, montant à droite */
.carte__chiffres{ margin-top:auto; padding-top:12px; border-top:1px solid var(--trait); display:grid; gap:5px; }
.carte__chiffres div{ display:flex; align-items:baseline; justify-content:space-between; gap:10px; }
.carte__chiffres span{ font-size:13px; color:var(--encre-3); }
.carte__chiffres b{ font-family:var(--dat); font-size:16px; font-weight:600; font-variant-numeric:tabular-nums; }

@media (max-width:760px){
  .carr__ruban{ width:auto; margin-left:0; overflow:visible;
    -webkit-mask-image:none; mask-image:none; }
  .carr__piste{ display:grid; grid-template-columns:1fr; gap:12px; width:auto; padding:0;
    animation:none; transform:none; }
  .carte-m--copie{ display:none; }
  .carte-m{ flex:none; }
}
@media (prefers-reduced-motion:reduce){
  .carr__ruban{ overflow-x:auto; scroll-snap-type:x mandatory; }
  .carr__piste{ animation:none; transform:none; }
  .carte-m{ scroll-snap-align:start; }
}

/* --- récit d'origine ------------------------------------------------------ */
.origine{ display:grid; grid-template-columns:200px minmax(0,1fr); gap:clamp(24px,3.4vw,52px); align-items:start; }
.origine img{ width:150px; height:150px; border-radius:50%; object-fit:cover; display:block; background:var(--craie-2); }
.origine__n{ margin-top:16px; font-size:15.5px; font-weight:600; letter-spacing:-.02em; }
.origine__r{ margin-top:4px; font-size:13px; color:var(--encre-3); line-height:1.45; }
.origine p + p{ margin-top:14px; }
.origine > div:last-child p{ font-size:16px; color:var(--encre-2); line-height:1.72; }
.origine em{ font-style:italic; color:var(--encre); }
@media (max-width:760px){
  .origine{ grid-template-columns:1fr; gap:20px; }
  .origine img{ width:112px; height:112px; }
  .origine__n{ margin-top:12px; } }

.clients{ display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:clamp(10px,1.3vw,16px); }
.client{ border:1px solid var(--trait); border-radius:16px; background:var(--blanc); padding:20px 22px;
  display:grid; gap:5px; align-content:start; transition:border-color 200ms, transform 200ms; }
.client:hover{ border-color:var(--cobalt); transform:translateY(-2px); }
.client b{ font-size:15.5px; font-weight:600; letter-spacing:-.02em; }
.client span{ font-size:13.5px; color:var(--encre-3); }
.client__n{ display:flex; align-items:center; gap:8px; margin:2px 0 2px; }
.client__n svg{ fill:#F5A524; flex:none; }
.client__n b{ font-family:var(--dat); font-size:12.5px; font-weight:600; color:var(--encre-2); }

.client i{ margin-top:8px; font-style:normal; font-size:13px; font-weight:500; color:var(--cobalt); }

.avis{ margin:0; border:1px solid var(--trait); border-radius:16px; background:var(--blanc);
  padding:clamp(20px,2.2vw,26px); display:flex; flex-direction:column; gap:16px; }
.avis blockquote{ margin:0; padding:0; border:none; font-size:15.5px; line-height:1.6; color:var(--encre); }
.avis blockquote::before{ content:"«\00a0"; color:var(--cobalt); }
.avis blockquote::after{ content:"\00a0»"; color:var(--cobalt); }
.avis figcaption{ margin-top:auto; padding-top:14px; border-top:1px solid var(--trait); }
.avis figcaption b{ display:block; font-size:14.5px; font-weight:600; }
.avis figcaption span{ display:block; margin-top:2px; font-size:13px; color:var(--encre-3); }

/* --- tableaux ------------------------------------------------------------ */
.tab-enveloppe{ min-width:0; border:1px solid var(--trait); border-radius:18px; overflow:hidden; background:var(--blanc); }
.tab-defile{ overflow-x:auto; }
table{ width:100%; border-collapse:collapse; min-width:600px; }
caption{ text-align:left; padding:16px clamp(14px,2vw,24px); font-size:13.5px; color:var(--encre-3); border-bottom:1px solid var(--trait); }
caption b{ color:var(--encre); font-weight:600; }
th,td{ padding:13px clamp(11px,1.5vw,20px); text-align:left; border-bottom:1px solid var(--trait); font-size:14.5px; }
thead th{ background:var(--cobalt); color:#fff; font-family:var(--ui); font-size:13px; font-weight:600;
  letter-spacing:-.01em; white-space:nowrap; border-bottom:none; }
tbody th{ font-weight:600; }
td.num{ font-family:var(--dat); font-variant-numeric:tabular-nums; white-space:nowrap; }
tbody tr:last-child th,tbody tr:last-child td{ border-bottom:none; }
.tab-note{ padding:14px clamp(14px,2vw,24px); font-size:12.5px; color:var(--encre-3); border-top:1px solid var(--trait); background:var(--craie); }

/* --- méthode ------------------------------------------------------------- */
.methode{ display:grid; grid-template-columns:repeat(4,1fr); gap:1px; background:var(--trait);
  border:1px solid var(--trait); border-radius:20px; overflow:hidden; }
.pas{ background:var(--blanc); padding:clamp(20px,2.2vw,28px); display:grid; gap:11px; align-content:start; }
.pas .pas__n{ font-family:var(--ui); font-size:11.5px; font-weight:600; letter-spacing:.14em;
  text-transform:uppercase; color:var(--cobalt); }
.pas p{ font-size:13.5px; color:var(--encre-2); }
.pas ul{ display:grid; gap:5px; font-size:12.5px; color:var(--encre-3); }
.pas li::before{ content:"— "; color:var(--cobalt); }
@media (max-width:960px){ .methode{ grid-template-columns:1fr 1fr; } }
@media (max-width:560px){ .methode{ grid-template-columns:1fr; } }

/* --- tarifs -------------------------------------------------------------- */
.tarifs{ display:grid; grid-template-columns:1fr 1fr; gap:clamp(14px,2vw,22px); }
.tarif{ border:1px solid var(--trait); border-radius:20px; padding:clamp(22px,2.6vw,32px); background:var(--blanc);
  display:grid; gap:14px; align-content:start; }
.tarif--vous{ background:var(--blanc); border:2px solid var(--cobalt); padding:calc(clamp(22px,2.6vw,32px) - 1px); }
.tarif .eti{ color:var(--cobalt); }
.tarif:not(.tarif--vous) .tarif__m{ color:var(--encre); font-family:var(--ui); letter-spacing:-.03em; }
h2.tarif__m,.tarif__m{ margin:0; font-family:var(--dat); font-size:clamp(26px,3.2vw,36px); font-weight:600;
  letter-spacing:-.045em; line-height:1; color:var(--cobalt); }
.tarif__m span{ font-size:.45em; font-weight:500; letter-spacing:0; opacity:.75; margin-left:2px; }
.tarif__prix{ display:grid; gap:22px; }
.tarif__prix li{ padding-left:0; }
.tarif__prix li::before{ content:none; }
.tarif__prix .tarif__m{ color:var(--cobalt); }
.tarif__prix li + li{ padding-top:20px; border-top:1px solid var(--trait); }
.tarif__l{ margin-top:6px; font-size:14px; color:var(--encre-3); }
.tarif__l a{ color:var(--cobalt); text-decoration:none; font-weight:600; }
.tarif__note{ font-size:12.5px; color:var(--encre-3); }
.tarif__d{ display:grid; gap:12px; margin-top:14px; padding-top:14px; border-top:1px solid var(--trait); }
.tarif__prix .tarif__d li{ padding-left:0; }
.tarif__d b{ display:block; font-size:14px; font-weight:600; letter-spacing:-.015em; }
.tarif__d span{ display:block; margin-top:3px; font-size:13px; color:var(--encre-3); line-height:1.5; }
.tarif p{ font-size:14.5px; color:var(--encre-2); }
.tarif ul{ display:grid; gap:8px; font-size:14px; }
.tarif li{ position:relative; font-weight:600; color:var(--encre); }
.tarif__d li{ font-weight:400; color:inherit; }
.tarif li::before{ content:none; }
@media (max-width:820px){ .tarifs{ grid-template-columns:1fr; } }

/* --- glossaire ----------------------------------------------------------- */
.glossaire{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:1px; background:var(--trait);
  border:1px solid var(--trait); border-radius:18px; overflow:hidden; }
.glossaire div{ background:var(--blanc); padding:20px clamp(16px,2vw,24px); }
.glossaire dt{ font-size:16px; font-weight:600; letter-spacing:-.02em; }
.glossaire dd{ margin:7px 0 0; font-size:14px; color:var(--encre-2); }

/* --- faq ----------------------------------------------------------------- */
.faq{ display:grid; gap:1px; background:var(--trait); border:1px solid var(--trait); border-radius:18px; overflow:hidden; }
.faq details{ background:var(--blanc); }
.faq summary{ list-style:none; cursor:pointer; padding:19px clamp(16px,2vw,26px); display:flex; align-items:center; gap:14px;
  font-size:16.5px; font-weight:600; letter-spacing:-.02em; }
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; margin-left:auto; font-family:var(--dat); font-size:20px; color:var(--cobalt); transition:transform 260ms; }
.faq details[open] summary::after{ transform:rotate(45deg); }
.faq .rep{ padding:0 clamp(16px,2vw,26px) 20px; font-size:14.5px; color:var(--encre-2); max-width:76ch; }
.faq .rep p + p{ margin-top:11px; }

/* ============================================================================
   ARTICLES DE BLOG
   ========================================================================= */
/* fond blanc pour le blog et les articles : confort de lecture longue.
   Les surfaces qui étaient blanches passent en craie pour rester distinctes. */
body.lecture{ background:var(--blanc); }
body.lecture .ariane{ background:var(--blanc); }
body.lecture .sec--blanc{ background:var(--craie); }
body.lecture .som{ background:var(--craie); }
body.lecture .pied{ background:var(--craie); }
body.lecture .tete{ border-bottom-color:var(--trait-2); }
body.lecture .carte,body.lecture .billet,body.lecture .tab-enveloppe,
body.lecture .faq,body.lecture .auteur{ background:var(--craie); }

.art-tete{ padding-block:clamp(28px,5vh,54px) clamp(20px,3vh,34px); }
.art-cat{ display:inline-flex; gap:9px; align-items:center; font-family:var(--dat); font-size:11px;
  letter-spacing:.16em; text-transform:uppercase; color:var(--cobalt); }
.art-tete h1{ margin-top:14px; max-width:22ch; }
.art-chapo{ margin-top:18px; max-width:64ch; font-size:clamp(16.5px,1.3vw,19.5px); line-height:1.55; color:var(--encre-2); text-wrap:pretty; }
.art-meta{ display:flex; flex-wrap:wrap; gap:8px 20px; align-items:center; margin-top:22px; padding-top:18px;
  border-top:1px solid var(--trait); font-size:13.5px; color:var(--encre-3); }
.art-meta b{ color:var(--encre); font-weight:600; }

/* min-width:0 est indispensable : sans lui, un élément de grille refuse de
   descendre sous la largeur de son contenu. Le tableau des articles impose
   520 px, ce qui faisait déborder toute la colonne hors de l'écran. */
.art-g{ display:grid; grid-template-columns:minmax(0,1fr) 264px; gap:clamp(24px,4vw,64px); align-items:start;
  padding-bottom:clamp(40px,7vh,90px); }
.art-g > *{ min-width:0; }
@media (max-width:1000px){ .art-g{ grid-template-columns:1fr; } }

.som{ position:sticky; top:100px; border:1px solid var(--trait); border-radius:16px; background:var(--blanc); padding:18px 20px; }
.som p{ font-family:var(--dat); font-size:10.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--encre-3); margin-bottom:12px; }
.som ol{ counter-reset:s; display:grid; gap:9px; }
.som li{ counter-increment:s; font-size:13.5px; line-height:1.35; }
.som li a{ color:var(--encre-2); display:flex; gap:9px; }
.som li a::before{ content:counter(s,decimal-leading-zero); font-family:var(--dat); font-size:11px; color:var(--cobalt); flex:none; padding-top:2px; }
.som li a:hover{ color:var(--cobalt); }
@media (max-width:1000px){ .som{ position:static; margin-bottom:26px; } }

.art{ max-width:var(--texte-max); min-width:0; font-size:17px; line-height:1.68; }
.art > * + *{ margin-top:20px; }
.art h2{ font-size:clamp(23px,2.6vw,31px); line-height:1.15; letter-spacing:-.032em; font-weight:600; margin-top:44px; }
.art h3{ font-size:clamp(18px,1.8vw,21px); line-height:1.25; letter-spacing:-.025em; font-weight:600; margin-top:32px; }
.art p{ color:var(--encre-2); }
.art strong{ color:var(--encre); font-weight:600; }
.art a{ color:var(--cobalt); text-decoration:underline; text-underline-offset:3px; }
.art ul,.art ol{ display:grid; gap:10px; padding-left:2px; }
.art ul li{ position:relative; padding-left:24px; color:var(--encre-2); }
.art ul li::before{ content:""; position:absolute; left:2px; top:.66em; width:10px; height:2px; border-radius:2px; background:var(--cobalt); }
.art ol{ counter-reset:o; }
.art ol li{ counter-increment:o; position:relative; padding-left:34px; color:var(--encre-2); }
.art ol li::before{ content:counter(o); position:absolute; left:0; top:.05em; font-family:var(--dat); font-size:13px;
  font-weight:600; color:var(--cobalt); width:22px; text-align:right; }
.art .tab-enveloppe{ margin-block:28px; }
.art table{ min-width:520px; }

.encart{ border-radius:16px; padding:20px 22px; border:1px solid var(--trait); background:var(--blanc); }
.encart p:first-child{ font-weight:600; color:var(--encre); }
.encart--cle{ border-left:4px solid var(--cobalt); background:var(--cobalt-f); border-color:transparent; border-radius:0 16px 16px 0; }
.encart--alerte{ border-left:4px solid var(--alerte); background:var(--alerte-f); border-color:transparent; border-radius:0 16px 16px 0; }
.encart--ok{ border-left:4px solid var(--ok); background:var(--ok-f); border-color:transparent; border-radius:0 16px 16px 0; }
.encart p + p,.encart ul{ margin-top:10px; }
.encart li{ font-size:15px; }

.art blockquote{ border-left:3px solid var(--cobalt); padding:4px 0 4px 22px; font-size:19px; line-height:1.45;
  letter-spacing:-.015em; color:var(--encre); }

/* --- articles sur téléphone ---------------------------------------------
   Les marges verticales et les garnitures se resserrent, le tableau se fait
   défiler horizontalement à l'intérieur de son cadre plutôt que de pousser
   la page, et les mots longs peuvent se couper.
   ----------------------------------------------------------------------- */
@media (max-width:700px){
  .art{ font-size:16.5px; }
  .art h2{ margin-top:34px; }
  .art h3{ margin-top:26px; }
  .art > * + *{ margin-top:17px; }
  .art .tab-enveloppe{ margin-block:22px; }
  .art table{ min-width:440px; font-size:14px; }
  /* indice visuel : un dégradé sur le bord droit signale qu'il reste du
     contenu à faire défiler dans le cadre */
  .art .tab-defile{ position:relative; -webkit-overflow-scrolling:touch; }
  .art .tab-enveloppe{ position:relative; }
  .art .tab-enveloppe::after{ content:""; position:absolute; top:1px; right:1px; bottom:auto; height:100%;
    width:26px; pointer-events:none; border-radius:0 17px 17px 0;
    background:linear-gradient(90deg,transparent,rgba(255,255,255,.92)); }
  .art thead th,.art tbody th,.art td{ padding:11px 13px; }
  .art blockquote{ padding-left:16px; font-size:17.5px; }
  .encart{ padding:17px 18px; }
  .art-meta{ gap:6px 14px; }
  .art-tete h1{ max-width:none; }
  .art p,.art li,.art h2,.art h3{ overflow-wrap:anywhere; }
}
@media (max-width:420px){
  .art table{ min-width:380px; font-size:13.5px; }
  .art thead th,.art tbody th,.art td{ padding:10px 11px; }
}

.cas{ border:1px solid var(--trait); border-radius:18px; overflow:hidden; background:var(--blanc); }
.cas__t{ padding:16px 20px; border-bottom:1px solid var(--trait); background:var(--craie-2); }
.cas__t b{ font-size:15.5px; letter-spacing:-.02em; }
.cas__t span{ display:block; margin-top:3px; font-size:12.5px; color:var(--encre-3); }
.cas__l{ display:flex; justify-content:space-between; gap:16px; padding:11px 20px; border-bottom:1px solid var(--trait); font-size:14.5px; }
.cas__l:last-child{ border-bottom:none; }
.cas__l b{ font-family:var(--dat); }
.cas__l--fort{ background:var(--cobalt-f); }
.cas__l--fort b{ color:var(--cobalt); font-size:17px; font-weight:600; }

.auteur{ display:grid; grid-template-columns:auto 1fr; gap:clamp(16px,2.4vw,28px); align-items:start; margin-top:48px;
  border:1px solid var(--trait); border-radius:20px; padding:clamp(20px,2.6vw,30px); background:var(--blanc); }
.auteur__i{ width:64px; height:64px; border-radius:50%; object-fit:cover; display:block; background:var(--craie-2); }
.auteur p{ font-size:14.5px; color:var(--encre-2); }
.auteur p + p{ margin-top:10px; }
@media (max-width:600px){ .auteur{ grid-template-columns:1fr; } }

/* --- liste d'articles ------------------------------------------------------
   Une carte par article, détachée des autres. Sur mobile, une colonne ;
   au-delà, deux. La date et la durée passent en pied de carte : à droite
   d'un titre, elles créaient une colonne vide et cassaient la lecture.
   -------------------------------------------------------------------------- */
.liste{ display:grid; grid-template-columns:repeat(auto-fit,minmax(320px,1fr));
  gap:clamp(14px,1.8vw,22px); }
.billet{ background:var(--blanc); border:1px solid var(--trait); border-radius:18px;
  padding:clamp(22px,2.4vw,30px); display:flex; flex-direction:column; gap:10px;
  transition:border-color 220ms ease, transform 220ms ease, box-shadow 220ms ease; }
.billet:hover{ border-color:var(--cobalt); transform:translateY(-3px);
  box-shadow:0 18px 38px -26px rgba(16,32,64,.55); }
.billet__c{ font-family:var(--ui); font-size:12px; font-weight:600; letter-spacing:-.01em; color:var(--cobalt); }
.billet h2,.billet h3{ font-size:clamp(19px,1.7vw,22px); letter-spacing:-.03em; line-height:1.25; font-weight:600; }
.billet p{ font-size:14.5px; color:var(--encre-2); line-height:1.6; }
.billet__m{ margin-top:auto; padding-top:14px; border-top:1px solid var(--trait);
  display:flex; gap:8px; align-items:center; font-size:12.5px; color:var(--encre-3); }
.billet__m span:not(.billet__l){ color:var(--encre-3); }
.billet__m time::after{ content:" ·"; color:var(--trait-2); }
.billet__l{ margin-left:auto; color:var(--cobalt); font-weight:600; }
@media (max-width:600px){ .liste{ grid-template-columns:1fr; } }

/* --- appel final --------------------------------------------------------- */
.final{ background:var(--encre); color:var(--craie); }
.final__in{ padding-block:clamp(44px,7.5vh,96px); display:grid; grid-template-columns:minmax(0,1.1fr) minmax(0,.9fr);
  gap:clamp(24px,4vw,60px); align-items:center; }
.final .lead{ color:#B7BDBF; }
.final__l{ display:grid; gap:10px; }
.final__l div{ display:flex; gap:13px; font-size:14.5px; color:#C3C9CB; padding-bottom:11px; border-bottom:1px solid rgba(245,245,241,.14); }
.final__l b{ font-family:var(--dat); font-size:11.5px; color:#8FA6FF; flex:0 0 22px; }
.final .btn--fant{ color:var(--craie); border-color:rgba(245,245,241,.3); }
.final .btn--fant:hover{ background:rgba(245,245,241,.08); border-color:var(--craie); }
@media (max-width:860px){ .final__in{ grid-template-columns:1fr; } }

/* --- pied ---------------------------------------------------------------- */
.pied{ background:var(--blanc); color:var(--encre-3); padding-block:clamp(30px,5vh,52px);
  border-top:1px solid var(--trait); font-size:13.5px; }
.pied__g{ display:grid; grid-template-columns:repeat(auto-fit,minmax(180px,1fr)); gap:24px; }
.pied__metiers{ grid-column:span 2; }
.pied__metiers ul{ display:grid; grid-template-columns:1fr 1fr; gap:7px 20px; }
.pied__metiers li{ font-size:13px; line-height:1.35; }
.pied__metiers [aria-current]{ color:var(--encre); font-weight:600; }
@media (max-width:760px){ .pied__metiers{ grid-column:auto; } }
@media (max-width:420px){ .pied__metiers ul{ grid-template-columns:1fr; } }
.pied h2{ font-family:var(--ui); font-size:13px; letter-spacing:-.015em; color:var(--encre);
  margin-bottom:11px; font-weight:600; }
.pied p + p{ margin-top:9px; }
.pied a:hover{ color:var(--cobalt); }
.pied__bas{ margin-top:26px; padding-top:18px; border-top:1px solid var(--trait);
  display:flex; flex-wrap:wrap; gap:9px 24px; font-size:12.5px; }

.consent{ position:fixed; left:14px; right:14px; bottom:14px; z-index:200; max-width:520px;
  background:var(--blanc); border:1px solid var(--trait-2); border-radius:16px; padding:18px 20px;
  box-shadow:0 18px 44px -22px rgba(16,32,64,.5); display:grid; gap:14px;
  opacity:0; transform:translateY(12px); transition:opacity 300ms ease, transform 300ms ease; }
.consent[data-on]{ opacity:1; transform:none; }
.consent p{ font-size:13.5px; color:var(--encre-2); line-height:1.55; }
.consent__b{ display:flex; gap:10px; }
.consent__b .btn{ flex:1; justify-content:center; padding:11px 16px; font-size:14px; }
@media (max-width:760px){ .consent{ bottom:calc(14px + env(safe-area-inset-bottom)); } }


/* ============================================================================
   FORMULAIRE DE DEVIS — quatre étapes
   Une question à la fois. La barre de progression et le récapitulatif
   maintiennent le contexte ; l'estimation apparaît à l'étape du budget et
   ne disparaît plus.
   ========================================================================= */
.conf{ background:var(--blanc); border:1px solid var(--trait); border-radius:22px; overflow:hidden;
  box-shadow:0 2px 4px rgba(13,15,16,.03),0 22px 60px -34px rgba(13,15,16,.35); }
.conf__tete{ padding:20px 22px 0; }
.conf__ligne{ display:flex; align-items:baseline; gap:12px; }
.conf__pas{ margin-left:auto; font-family:var(--ui); font-size:12.5px; font-weight:500; color:var(--encre-3); white-space:nowrap; }
.conf__jauge{ height:3px; border-radius:100px; background:var(--craie-2); margin-top:14px; overflow:hidden; }
.conf__jauge i{ display:block; height:100%; width:25%; border-radius:100px;
  background:linear-gradient(90deg,var(--t1),var(--t2) 45%,var(--t3) 78%,var(--t4));
  transition:width 460ms cubic-bezier(.2,.8,.2,1); }

.conf__corps{ padding:22px; min-height:300px; }
.etape{ border:none; padding:0; margin:0 0 24px; }
.etape:last-of-type{ margin-bottom:0; }
html.js .etape{ display:none; margin-bottom:0; }
html.js .etape[data-on]{ display:block; animation:entre 380ms cubic-bezier(.2,.8,.2,1) both; }
@keyframes entre{ from{ opacity:0; transform:translateX(14px); } }
.etape__q{ font-size:clamp(19px,2vw,24px); font-weight:600; letter-spacing:-.03em; line-height:1.22; padding:0; }
.etape__a{ margin-top:7px; font-size:14px; color:var(--encre-3); }

.choix{ display:grid; grid-template-columns:repeat(auto-fill,minmax(136px,1fr)); gap:7px; margin-top:18px; }
.opt{ display:flex; align-items:center; gap:9px; padding:12px 13px; border-radius:12px; text-align:left;
  border:1.5px solid var(--trait); background:var(--blanc); font-size:14px; font-weight:500; line-height:1.25;
  transition:border-color 180ms,background 180ms,transform 160ms; }
.opt:hover{ border-color:var(--trait-2); transform:translateY(-1px); }
.opt[aria-pressed="true"]{ border-color:var(--cobalt); background:var(--cobalt-f); color:var(--cobalt); font-weight:600; }
.opt i{ width:9px; height:9px; border-radius:3px; flex:none; background:var(--trait-2); }
.opt[aria-pressed="true"] i{ background:var(--cobalt); }
.opt small{ display:block; font-weight:400; font-size:12px; color:var(--encre-3); margin-top:2px; }

.champ{ margin-top:16px; }
.champ label{ display:block; font-size:13.5px; font-weight:600; margin-bottom:7px; }
.champ input{ width:100%; padding:14px 15px; border-radius:12px; border:1.5px solid var(--trait);
  background:var(--blanc); font-size:15.5px; transition:border-color 180ms,box-shadow 180ms; }
.champ input:focus{ outline:none; border-color:var(--cobalt); box-shadow:0 0 0 4px var(--cobalt-f); }
.champ input[aria-invalid="true"]{ border-color:#B23A0E; }
.champ__aide{ margin-top:6px; font-size:12.5px; color:var(--encre-3); }
.duo{ display:grid; grid-template-columns:1fr 1fr; gap:12px; margin-top:14px; }
.duo .champ{ margin-top:0; }
@media (max-width:560px){ .duo{ grid-template-columns:1fr; } }

.cibles{ margin-top:20px; }
.cibles__t{ font-size:13.5px; font-weight:600; margin-bottom:8px; }
.cibles__g{ display:flex; gap:8px; flex-wrap:wrap; }
.cible{ flex:1 1 140px; padding:12px 16px; border-radius:12px; border:1.5px solid var(--trait);
  background:var(--blanc); font-size:14.5px; font-weight:500; text-align:center;
  transition:border-color 180ms, background 180ms, color 180ms; }
.cible:hover{ border-color:var(--trait-2); }
.cible[aria-pressed="true"]{ border-color:var(--cobalt); background:var(--cobalt-f);
  color:var(--cobalt); font-weight:600; }

.reglette{ margin-top:20px; }
.reglette__t{ display:flex; justify-content:space-between; align-items:baseline; margin-bottom:6px; }
.reglette__t label{ font-size:13.5px; font-weight:600; }
.reglette__t b{ font-family:var(--dat); font-size:17px; font-weight:600; color:var(--cobalt); }
input[type=range]{ -webkit-appearance:none; appearance:none; width:100%; height:28px; background:transparent; cursor:ew-resize; }
input[type=range]::-webkit-slider-runnable-track{ height:5px; border-radius:100px; background:var(--craie-2); }
input[type=range]::-moz-range-track{ height:5px; border-radius:100px; background:var(--craie-2); }
input[type=range]::-webkit-slider-thumb{ -webkit-appearance:none; width:24px; height:24px; margin-top:-9.5px; border-radius:50%;
  background:var(--cobalt); border:4px solid var(--blanc); box-shadow:0 2px 10px rgba(27,42,232,.5); }
input[type=range]::-moz-range-thumb{ width:24px; height:24px; border-radius:50%; background:var(--cobalt); border:4px solid var(--blanc); }
.reglette__b{ display:flex; justify-content:space-between; font-family:var(--dat); font-size:11px; color:var(--encre-3); }

/* estimation : apparaît à l'étape du budget et reste ensuite */
.estim{ margin:0 22px; border:1px solid var(--trait); border-radius:14px; overflow:hidden; background:var(--craie); }
.estim[hidden]{ display:none; }
.estim__t{ display:flex; align-items:center; gap:8px; padding:11px 15px; border-bottom:1px solid var(--trait); }
.estim__etat{ margin-left:auto; font-family:var(--dat); font-size:10.5px; color:var(--cobalt); }
.estim__g{ display:grid; grid-template-columns:repeat(3,1fr); }
.estim__c{ padding:13px 15px; border-right:1px solid var(--trait); }
.estim__c:last-child{ border-right:none; }
.estim__c b{ display:block; font-family:var(--dat); font-size:clamp(17px,2vw,21px); font-weight:600; letter-spacing:-.03em;
  color:var(--cobalt); }
.estim__c span{ display:block; margin-top:4px; font-size:11px; color:var(--encre-3); line-height:1.3; }
.estim__n{ padding:10px 15px; border-top:1px solid var(--trait); font-size:11.5px; color:var(--encre-3); }

/* récapitulatif des réponses déjà données */
.conf__resume{ display:flex; flex-wrap:wrap; gap:6px; padding:14px 22px 0; }
.conf__resume:empty{ display:none; }
.tag{ padding:5px 11px; border-radius:100px; background:var(--craie-2); font-size:12px; color:var(--encre-2); }
.tag b{ font-weight:600; color:var(--encre); }

.conf__pied{ display:flex; align-items:center; gap:12px; padding:18px 22px 22px; }
.retour{ font-size:14px; color:var(--encre-3); padding:8px 2px; }
.retour:hover{ color:var(--encre); }
.retour[hidden]{ display:none; }
.conf__pied .btn{ margin-left:auto; min-width:170px; }
.conf__pied .btn[hidden]{ display:none; }
.conf__note{ padding:0 22px 20px; font-size:12.5px; color:var(--encre-3); }
.conf__note a{ color:var(--cobalt); text-decoration:underline; }
.conf__err{ padding:0 22px 14px; font-size:13px; color:#B23A0E; font-weight:600; }
.conf__err a{ color:inherit; text-decoration:underline; }
.conf__err[hidden]{ display:none; }

.merci{ display:none; padding:34px 24px 30px; text-align:center; }
.merci[data-on]{ display:block; }
.merci__rond{ width:56px; height:56px; margin:0 auto 16px; border-radius:50%; background:var(--ok-f); color:var(--ok);
  display:grid; place-items:center; font-size:26px; }
.merci p{ margin-top:10px; color:var(--encre-2); max-width:38ch; margin-inline:auto; }
.merci__rappel{ margin-top:20px; padding:14px; border-radius:12px; background:var(--craie); text-align:left; font-size:13px; }
.merci__rappel div{ display:flex; justify-content:space-between; gap:12px; padding:5px 0; }
.merci__rappel b{ font-family:var(--dat); }

/* --- révélations --------------------------------------------------------- */
.rev{ opacity:0; transform:translateY(16px); transition:opacity 700ms cubic-bezier(.16,.84,.28,1),transform 700ms cubic-bezier(.16,.84,.28,1); }
.rev.vu{ opacity:1; transform:none; }
html:not(.js) .rev{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  html{ scroll-behavior:auto; }
  .rev{ opacity:1; transform:none; transition:none; }
}
@media print{
  .tete,.final,.som,.saut{ display:none; }
  body{ background:#fff; }
}