@charset "UTF-8";
/* ===========================================================================
   RB TECH AUTO — système visuel v2
   Graphite nuit + jaune électrique. Surfaces claires pour la lecture,
   surfaces sombres pour les moments forts. Mouvement utile uniquement,
   désactivé sous prefers-reduced-motion. Aucune dépendance externe.
   ========================================================================= */

:root{
  --ink:#0E1115;
  --ink-2:#171B22;
  --ink-3:#20252E;
  --line-dark:#2C323C;

  --volt:#FFD21E;            /* accent : éclair du logo */
  --volt-d:#F0BE00;
  --volt-soft:rgba(255,210,30,.14);

  --paper:#F5F6F8;
  --surface:#FFFFFF;
  --line:#E2E5EA;
  --line-2:#CBD1DA;
  --muted:#5C6673;
  --muted-dark:#9AA4B2;
  --snow:#E9ECF1;

  --wrap:1200px;
  --gut:clamp(18px,4vw,40px);
  --r:12px;
  --r-s:10px;

  --mono:ui-monospace,SFMono-Regular,"SF Mono",Menlo,Consolas,"Liberation Mono",monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;

  --ease:cubic-bezier(.22,.61,.36,1);
  --shadow:0 1px 2px rgba(14,17,21,.04),0 10px 30px -18px rgba(14,17,21,.35);
  --shadow-lg:0 2px 4px rgba(14,17,21,.05),0 28px 60px -30px rgba(14,17,21,.45);
}

*,*::before,*::after{box-sizing:border-box}
[hidden]{display:none!important}
html{-webkit-text-size-adjust:100%;scroll-behavior:smooth}
body{
  margin:0;font-family:var(--sans);color:var(--ink);background:var(--paper);
  font-size:clamp(16px,.9vw + 14px,17.5px);line-height:1.62;overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
picture{display:contents}
img,video{max-width:100%;height:auto}
a{color:var(--ink)}
h1,h2,h3,h4{line-height:1.08;letter-spacing:-.025em;margin:0;font-weight:800}
h2,h3{text-wrap:balance}
p{margin:0 0 1em}
.wrap{max-width:var(--wrap);margin-inline:auto;padding-inline:var(--gut)}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--volt);
  color:var(--ink);padding:.8rem 1.1rem;font-weight:700;border-radius:0 0 var(--r-s) 0}
.skip:focus{left:0;top:0}
:focus-visible{outline:3px solid var(--volt);outline-offset:3px;border-radius:4px}
.dark :focus-visible{outline-color:var(--volt)}

/* --- surtitre technique -------------------------------------------------- */
.tag{
  font-family:var(--mono);font-size:.72rem;letter-spacing:.18em;text-transform:uppercase;
  color:var(--muted);display:inline-flex;align-items:center;gap:.6rem;font-weight:600;margin:0;
}
.tag::before{content:"";width:26px;height:2px;background:var(--volt);flex:none;border-radius:2px}
.tag--light{color:var(--muted-dark)}

/* --- boutons ------------------------------------------------------------- */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  font-weight:700;text-decoration:none;border:2px solid transparent;
  padding:.85rem 1.3rem;border-radius:var(--r-s);cursor:pointer;font-size:1rem;
  font-family:inherit;line-height:1.15;min-height:50px;
  transition:transform .18s var(--ease),box-shadow .22s var(--ease),
             background-color .18s var(--ease),border-color .18s var(--ease);
}
.btn svg{width:19px;height:19px;flex:none}
.btn--call{background:var(--volt);color:var(--ink);box-shadow:0 6px 20px -8px rgba(255,210,30,.65)}
.btn--call:hover{background:var(--volt-d);transform:translateY(-2px);
  box-shadow:0 12px 28px -10px rgba(255,210,30,.8)}
.btn--call:active{transform:translateY(0)}
.btn--ghost{background:transparent;color:var(--snow);border-color:#3A414C}
.btn--ghost:hover{border-color:var(--snow);background:rgba(255,255,255,.04);transform:translateY(-2px)}
.btn--dark{background:var(--ink);color:#fff}
.btn--dark:hover{background:var(--ink-3);transform:translateY(-2px)}
.btn--light{background:transparent;color:var(--ink);border-color:var(--line-2)}
.btn--light:hover{border-color:var(--ink);background:#fff}
.btn--wide{width:100%}

/* ===========================  EN-TÊTE  ================================== */
.hdr{
  position:sticky;top:0;z-index:100;background:rgba(14,17,21,.92);color:#fff;
  backdrop-filter:saturate(140%) blur(10px);border-bottom:1px solid transparent;
  transition:border-color .25s var(--ease),background-color .25s var(--ease);
}
.hdr[data-stuck="1"]{border-bottom-color:var(--line-dark);background:rgba(14,17,21,.98)}
.hdr__in{display:flex;align-items:center;gap:1.1rem;min-height:78px;
  transition:min-height .25s var(--ease)}
.hdr[data-stuck="1"] .hdr__in{min-height:66px}
.hdr__logo{display:flex;align-items:center;text-decoration:none;color:#fff;flex:none;
  margin-right:auto;padding:.3rem 0}
.hdr__logo img{width:128px;height:auto;display:block;transition:width .25s var(--ease)}
.hdr[data-stuck="1"] .hdr__logo img{width:110px}
.hdr__logo b{display:none}
.hdr__nav{display:flex;align-items:center;gap:.1rem}
.hdr__nav a{
  color:#C7CDD6;text-decoration:none;font-size:.86rem;font-weight:600;white-space:nowrap;
  padding:.55rem .5rem;border-radius:var(--r-s);position:relative;
  transition:color .18s var(--ease),background-color .18s var(--ease);
}
.hdr__nav a::after{
  content:"";position:absolute;left:.5rem;right:.5rem;bottom:.3rem;height:2px;
  background:var(--volt);border-radius:2px;transform:scaleX(0);transform-origin:left;
  transition:transform .25s var(--ease);
}
.hdr__nav a:hover{color:#fff}
.hdr__nav a:hover::after,.hdr__nav a[aria-current="page"]::after{transform:scaleX(1)}
.hdr__nav a[aria-current="page"]{color:#fff}
.hdr__call{display:flex;align-items:center;gap:.9rem;margin-left:.5rem;flex:none}
.hdr__hours{font-family:var(--mono);font-size:.7rem;color:var(--muted-dark);white-space:nowrap;margin:0}
/* Avec sept entrées de navigation, la barre complète demande ~1371 px alors que
   le conteneur est plafonné à 1200 px : la ligne d'horaires ne tient plus à
   aucune largeur. Elle est donc masquée dans l'en-tête — l'information reste
   visible sur la plaque d'appel, en pied de page et sur la page contact. */
.hdr__hours{display:none}
.hdr__call .btn{padding:.7rem 1rem;min-height:46px;flex:none}
.hdr__burger{display:none}

/* ===========================  HERO  ===================================== */
.hero{
  position:relative;background:var(--ink);color:#fff;overflow:hidden;isolation:isolate;
}
.hero__grid{ /* trame de pistes : liée au métier, très basse intensité */
  position:absolute;inset:0;z-index:-2;opacity:.55;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:64px 64px;
  mask-image:radial-gradient(120% 90% at 70% 25%,#000 25%,transparent 78%);
}
.hero__halo{
  position:absolute;z-index:-1;right:-10%;top:-20%;width:70vw;height:70vw;max-width:900px;
  max-height:900px;border-radius:50%;pointer-events:none;
  background:radial-gradient(circle,rgba(255,210,30,.13) 0%,rgba(255,210,30,0) 62%);
}
.hero__in{
  display:grid;grid-template-columns:1.05fr .95fr;gap:clamp(24px,4vw,60px);align-items:center;
  padding-block:clamp(44px,6vw,92px) clamp(70px,8vw,112px);
}
.hero h1{font-size:clamp(2rem,3.5vw,3.15rem);margin:1rem 0 1.1rem;letter-spacing:-.032em;
  text-wrap:balance;max-width:16ch}
.hero h1 em{font-style:normal;color:var(--volt)}
.hero__lede{color:#AEB6C2;font-size:clamp(1.02rem,.5vw + .9rem,1.16rem);max-width:52ch;margin-bottom:1.8rem}
.hero__cta{display:flex;flex-wrap:wrap;gap:.8rem}
.hero__meta{
  display:flex;flex-wrap:wrap;gap:.5rem 1.1rem;margin:2rem 0 0;padding-top:1.3rem;
  border-top:1px solid var(--line-dark);font-family:var(--mono);font-size:.76rem;
  color:var(--muted-dark);letter-spacing:.05em;
}
.hero__meta span{display:inline-flex;align-items:center;gap:.5rem}
.hero__meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--volt)}

/* Motif « calculateur sur circuit » : SVG inline, pas d'image bitmap.
   Pas d'animation en boucle — les quatre pistes jaunes se tracent une seule
   fois à l'arrivée, puis au clic. */
.hero__vis{position:relative;display:grid;place-items:center;min-height:min(46vw,420px)}
.pcb-btn{
  appearance:none;background:none;border:0;padding:0;margin:0;cursor:pointer;display:block;
  width:min(100%,520px);border-radius:18px;
  transition:transform .25s var(--ease);
}
.pcb-btn:hover{transform:translateY(-2px)}
.pcb-btn:active{transform:translateY(0) scale(.99)}
.pcb-btn[data-pressed]{animation:btnPulse .45s var(--ease)}
@keyframes btnPulse{0%{filter:none}40%{filter:brightness(1.22)}100%{filter:none}}
.pcb-btn:focus-visible{outline:3px solid var(--volt);outline-offset:6px}
.pcb{width:100%;height:auto;display:block;margin-inline:auto;overflow:visible;
  mask-image:radial-gradient(78% 78% at 50% 48%,#000 58%,transparent 100%)}
.pcb .t1{fill:none;stroke:#2B323C;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}
.pcb .t2{fill:none;stroke:#3B4451;stroke-width:2.8;stroke-linecap:round;stroke-linejoin:round}
.pcb .pad{fill:var(--ink);stroke:#3B4451;stroke-width:2.2}
.pcb .comp{fill:#191E26;stroke:#2E3640;stroke-width:1.6}
.pcb .chip{fill:#151A21;stroke:#4A5464;stroke-width:2.4}
.pcb .chip-in{fill:none;stroke:#2A313B;stroke-width:1.6}
.pcb .chip-dot{fill:none;stroke:#4A5464;stroke-width:2}
.pcb .pin{fill:#5C697D}
.pcb path.hot{fill:none;stroke:var(--volt);stroke-width:3;
  stroke-linecap:round;stroke-linejoin:round}
.pcb circle.hot{stroke:var(--volt);stroke-width:2.4}
.pcb path,.pcb circle{transition:stroke .35s var(--ease),stroke-width .35s var(--ease)}
/* marquage gravé du boîtier : creux sombre + arête claire, très faible contraste */
.pcb .blade{fill:#151A21;stroke:#4A5464;stroke-width:2.4;stroke-linejoin:round}
.pcb .ring-out{fill:none;stroke:#4A5464;stroke-width:2.6}
.pcb .ring-in{fill:none;stroke:#2A313B;stroke-width:2.2}
.pcb .pad2{fill:none;stroke:#4A5464;stroke-width:2.6}
.pcb .mark-dark{opacity:.5;filter:brightness(0)}
.pcb .mark-lite{opacity:.09}
/* le tracé des éléments jaunes, relancé à chaque clic.
   pathLength=1 dans le SVG : l'animation vaut pour n'importe quelle longueur. */
html:not(.no-js) .pcb .hot{
  stroke-dasharray:1;stroke-dashoffset:1;
  animation:pcbDraw .8s var(--ease) forwards;
}
html:not(.no-js) .pcb .hot2{animation-delay:.16s}
html:not(.no-js) .pcb .hot3{animation-delay:.32s}
html:not(.no-js) .pcb .hot4{animation-delay:.48s}
/* la pastille d'arrivée s'allume une fois le signal parvenu */
html:not(.no-js) .pcb circle.hot{
  stroke-dasharray:none;stroke-dashoffset:0;
  animation:padWake 1.4s var(--ease) forwards;
}
@keyframes pcbDraw{
  0%{stroke-dashoffset:1;opacity:0}
  14%{opacity:1}
  70%{stroke-dashoffset:0;opacity:1}
  100%{stroke-dashoffset:0;opacity:.92}
}
@keyframes padWake{
  0%,42%{opacity:.2;stroke-width:2.4}
  56%{opacity:1;stroke-width:4.5}
  100%{opacity:1;stroke-width:2.4}
}


/* ===========================  SECTIONS  ================================= */
.sec{padding:clamp(56px,7vw,104px) 0}
.sec--tint{background:var(--surface)}
.sec--dark{background:var(--ink);color:#fff}
.sec__head{max-width:64ch;margin-bottom:clamp(26px,3.5vw,44px)}
.sec__head h2{font-size:clamp(1.7rem,3vw,2.6rem);margin:.7rem 0 .7rem}
.sec__head p{color:var(--muted);margin:0}
.sec--dark .sec__head p{color:var(--muted-dark)}

/* apparition au défilement : réservée à quelques zones, pas à chaque bloc */
.reveal{opacity:0;transform:translateY(22px);
  transition:opacity .7s var(--ease),transform .7s var(--ease)}
.reveal.is-in{opacity:1;transform:none}
.reveal[data-d="1"]{transition-delay:.08s}
.reveal[data-d="2"]{transition-delay:.16s}
.reveal[data-d="3"]{transition-delay:.24s}
.reveal[data-d="4"]{transition-delay:.32s}
.no-js .reveal{opacity:1;transform:none}

/* --- assistant guidé ---------------------------------------------------- */
.assist{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  margin-top:clamp(-72px,-6vw,-48px);position:relative;z-index:5;box-shadow:var(--shadow-lg);
  overflow:hidden;
}
/* La remontée ci-dessus est faite pour l'accueil, où la carte du formulaire
   vient volontairement chevaucher le hero. Sur les autres pages, le formulaire
   est précédé d'un chapeau de section : la remontée passait alors PAR-DESSUS le
   paragraphe d'introduction, que le fond opaque de la carte masquait entièrement.
   La carte reprend donc sa place normale dès qu'un chapeau la précède.
   Spécificité (0,2,0) : l'emporte aussi sur la règle mobile plus bas. */
.sec__head + .assist{margin-top:0}
.assist__bar{padding:1.05rem clamp(18px,2.5vw,30px) .9rem;border-bottom:1px solid var(--line);
  background:linear-gradient(180deg,#FCFCFD,#F6F7F9)}
.assist__row{display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.assist__title{font-weight:800;font-size:1.08rem;margin:0}
.assist__count{font-family:var(--mono);font-size:.74rem;color:var(--muted);letter-spacing:.08em}
.progress{height:4px;background:var(--line);border-radius:999px;margin-top:.85rem;overflow:hidden}
.progress i{display:block;height:100%;width:25%;background:var(--volt);border-radius:999px;
  transition:width .45s var(--ease)}
.steps{display:flex;gap:.5rem;list-style:none;margin:.85rem 0 0;padding:0;font-family:var(--mono);
  font-size:.72rem;letter-spacing:.06em;flex-wrap:wrap}
.steps li{display:flex;align-items:center;gap:.45rem;color:var(--muted-dark)}
.steps li b{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;
  border:1px solid var(--line-2);font-size:.68rem;color:var(--muted);background:#fff}
.steps li[aria-current="step"]{color:var(--ink);font-weight:700}
.steps li[aria-current="step"] b{background:var(--volt);border-color:var(--volt);color:var(--ink)}
.steps li[data-done="1"] b{background:var(--ink);border-color:var(--ink);color:var(--volt)}

.assist__body{padding:clamp(20px,3vw,34px)}

/* zone d'erreur unique du formulaire — vit HORS des étapes, donc jamais
   masquée par un ancêtre [hidden] */
.assist__err{
  margin:0;padding:.85rem clamp(18px,2.5vw,30px);background:#FDECEC;
  border-bottom:1px solid #F3C9C9;color:#8A1F1F;font-size:.92rem;font-weight:600;
}

/* consentement explicite : le serveur exige la valeur exacte « 1 » */
.consent{margin:1.2rem 0 0}
.consent label{display:flex;align-items:flex-start;gap:.7rem;cursor:pointer;
  font-size:.9rem;color:var(--muted);line-height:1.5}
.consent input{width:20px;height:20px;flex:none;margin:.15rem 0 0;accent-color:var(--ink);
  cursor:pointer}
.consent a{color:var(--ink);font-weight:700;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--volt)}
/* Lien sorti du <label> : il ne doit plus intercepter le clic qui coche la
   case. Il se place sous la ligne de consentement, aligné sur le texte. */
.consent__lnk{display:inline-block;margin:.5rem 0 0 calc(20px + .7rem);font-size:.88rem}
.consent input[aria-invalid="true"]{outline:2px solid #B42318;outline-offset:2px}
.field input[aria-invalid="true"],.field textarea[aria-invalid="true"],
.field select[aria-invalid="true"]{border-color:#B42318;background:#FFF7F7}
.fset{border:0;padding:0;margin:0;animation:stepIn .38s var(--ease) both}
@keyframes stepIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.no-js .fset{animation:none;margin-bottom:1.8rem}
.fset > legend{padding:0;font-weight:800;font-size:clamp(1.15rem,1.6vw,1.4rem);margin-bottom:.2rem}
.fset__hint{color:var(--muted);font-size:.94rem;margin:.25rem 0 1.25rem}

.choices{display:grid;grid-template-columns:repeat(auto-fit,minmax(218px,1fr));gap:.75rem;
  list-style:none;margin:0;padding:0}
.choice{position:relative}
.choice input{position:absolute;top:14px;left:14px;width:1px;height:1px;opacity:0;margin:0;
  pointer-events:none}   /* le label porte le clic : pas de calque au-dessus */
.choice label{
  display:flex;align-items:center;gap:.85rem;min-height:84px;height:100%;
  border:1px solid var(--line);border-radius:var(--r-s);background:#fff;
  padding:.85rem 1rem;font-weight:700;font-size:.98rem;cursor:pointer;line-height:1.28;
  transition:border-color .18s var(--ease),box-shadow .22s var(--ease),transform .18s var(--ease);
}
.choice img{width:46px;height:46px;object-fit:contain;flex:none;
  transition:transform .25s var(--ease)}
.choice .choice__num{width:46px;height:46px;flex:none;display:grid;place-items:center;
  font-family:var(--mono);font-size:.92rem;font-weight:700;color:var(--muted);
  border:1px solid var(--line);border-radius:8px;background:var(--paper)}
.choice .choice__dot{width:18px;height:18px;border:2px solid var(--line-2);border-radius:50%;
  flex:none;margin-left:auto;transition:border-color .18s var(--ease)}
.choice label:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.choice label:hover img{transform:scale(1.06)}
/* le radio est visuellement masqué : le focus doit rester visible. :focus-within
   couvre aussi le focus posé par script, que :focus-visible peut ignorer. */
.choice input:focus-visible + label,
.choice:focus-within label{outline:3px solid var(--volt);outline-offset:3px}
.choice input:checked + label{border-color:var(--ink);box-shadow:0 0 0 1px var(--ink),var(--shadow)}
.choice input:checked + label .choice__dot{border-color:var(--ink);
  background:radial-gradient(circle,var(--volt) 0 48%,transparent 49%)}

.grid2{display:grid;grid-template-columns:1fr 1fr;gap:.95rem}
.field{display:block;margin-bottom:1rem}
.field > span{display:block;font-weight:700;font-size:.92rem;margin-bottom:.35rem}
.field small{display:block;font-weight:400;color:var(--muted);font-size:.84rem}
.field input,.field select,.field textarea{
  width:100%;font:inherit;font-size:1rem;padding:.8rem .9rem;border:1px solid var(--line-2);
  border-radius:var(--r-s);background:#fff;color:var(--ink);min-height:50px;
  transition:border-color .18s var(--ease),box-shadow .18s var(--ease);
}
.field input:focus,.field select:focus,.field textarea:focus{
  border-color:var(--ink);box-shadow:0 0 0 4px var(--volt-soft);outline:none}
.field textarea{min-height:120px;resize:vertical}
.field input::placeholder,.field textarea::placeholder{color:#98A2AE}
.assist__foot{display:flex;align-items:center;gap:1.2rem;flex-wrap:wrap;
  border-top:1px solid var(--line);padding-top:1.3rem;margin-top:1.5rem}
.assist__foot p{margin:0;color:var(--muted);font-size:.87rem;max-width:44ch}
.assist__nav{display:flex;gap:.6rem;margin-left:auto}
.assist__nav .btn{min-width:140px}

/* --- assistant de rachat : variantes et dépôt de photos -----------------
   Les classes ci-dessous ne servent qu'au formulaire /rachat-vehicule/.
   Elles étendent .choices / .field, elles ne les remplacent pas. */

/* tranches de kilométrage : six lignes courtes, sans illustration */
.choices--plain{grid-template-columns:repeat(auto-fit,minmax(196px,1fr))}
.choices--plain .choice label{min-height:64px}
.choices--plain .choice .choice__num{width:34px;height:34px;font-size:.8rem}

/* carte grise : deux cartes larges avec une vignette plus lisible */
.choices--wide{grid-template-columns:repeat(auto-fit,minmax(248px,1fr))}
.choices--wide .choice img{width:66px;height:46px}

/* champ de saisie court (kilométrage approximatif) */
.field--short input{max-width:260px}

/* consigne réservée au parcours SANS JavaScript : l'étape conditionnelle est
   alors toujours affichée et doit expliquer quand la laisser vide. boot.js
   retire la classe no-js, ce qui referme la consigne. */
html:not(.no-js) .fset__hint--nojs{display:none}

/* repère d'étape conditionnelle dans le fil de progression */
.steps li[data-optional] b{border-style:dashed;font-size:.9rem;line-height:1}
.steps li[data-optional]{color:var(--muted-dark)}

/* renvoi vers un autre formulaire, affiché après un choix précis.
   [hidden] doit reprendre la main sur display:flex. */
.fset__route{display:flex;align-items:center;gap:1rem 1.2rem;flex-wrap:wrap;
  margin:1.1rem 0 0;padding:1rem 1.15rem;background:var(--paper);
  border:1px solid var(--line);border-left:4px solid var(--volt);
  border-radius:0 var(--r-s) var(--r-s) 0;color:var(--muted);font-size:.94rem}
.fset__route[hidden]{display:none}
.fset__route > span{flex:1 1 300px;min-width:0}
.fset__route strong{color:var(--ink)}
.fset__route .btn{flex:none}

/* dépôt de photos ------------------------------------------------------- */
.drop{border:1px dashed var(--line-2);border-radius:var(--r-s);background:var(--paper);
  padding:.7rem;margin-bottom:1rem}
/* l'input reste dans le flux pour l'assistance technique, mais c'est le label
   qui porte le clic ; sans JavaScript il fonctionne exactement pareil. */
.drop input[type="file"]{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.drop:focus-within .drop__lbl{outline:3px solid var(--volt);outline-offset:2px}
.drop__lbl{display:flex;align-items:center;gap:.9rem;cursor:pointer;padding:.7rem;
  border-radius:8px;transition:background .18s var(--ease)}
.drop__lbl:hover{background:var(--surface)}
.drop__ico{width:44px;height:44px;flex:none;display:grid;place-items:center;border-radius:10px;
  background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.drop__ico svg{width:22px;height:22px}
.drop__txt strong{display:block;font-size:1rem}
.drop__txt small{display:block;color:var(--muted);font-size:.85rem;margin-top:.15rem}
.drop__list{list-style:none;margin:.8rem 0 0;padding:0;display:grid;gap:.45rem}
.drop__list:empty{display:none}
.drop__list li{display:flex;align-items:center;gap:.7rem;background:var(--surface);
  border:1px solid var(--line);border-radius:8px;padding:.5rem .55rem .5rem .75rem;font-size:.9rem}
.drop__name{flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.drop__size{flex:none;font-family:var(--mono);font-size:.76rem;color:var(--muted)}
.drop__rm{flex:none;display:inline-grid;place-items:center;min-height:34px;padding:.3rem .65rem;
  cursor:pointer;font:inherit;font-size:.84rem;font-weight:700;line-height:1;color:var(--muted);
  background:var(--surface);border:1px solid var(--line-2);border-radius:7px}
.drop__rm:hover{color:#B42318;border-color:#B42318}
/* la note sert aux deux cas : récapitulatif neutre, ou refus — d'où le
   modificateur. Une simple couleur rouge sur « 3 photos jointes » alarmerait
   sans raison. */
.drop__note{margin:.7rem .2rem 0;font-size:.88rem;color:var(--muted);font-weight:600}
.drop__note--bad{color:#B42318;font-weight:700}
.drop__note[hidden]{display:none}

/* --- hub de rachat : communes groupées par département ------------------- */
.deplist{margin-top:1.7rem}
.deplist__h{font-family:var(--mono);font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .75rem;padding-bottom:.5rem;border-bottom:1px solid var(--line)}
.deplist__ul{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(auto-fit,minmax(236px,1fr));gap:.7rem}
.deplist__ul a{display:block;background:var(--surface);border:1px solid var(--line);
  border-radius:var(--r-s);padding:.85rem 1rem;text-decoration:none;color:var(--ink);
  transition:border-color .18s var(--ease),box-shadow .25s var(--ease),transform .2s var(--ease)}
.deplist__ul a:hover{border-color:var(--line-2);box-shadow:var(--shadow);transform:translateY(-2px)}
.deplist__ul b{display:block;font-size:1.02rem}
.deplist__ul span{display:block;color:var(--muted);font-size:.87rem;margin-top:.12rem}

/* --- prestations : rythme volontairement inégal -------------------------- */
.cover{display:grid;grid-template-columns:repeat(4,1fr);gap:.9rem}
.cover__item{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.3vw,28px);display:flex;flex-direction:column;gap:.7rem;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease),border-color .25s var(--ease)}
.cover__item:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg);border-color:var(--line-2)}
.cover__item img{width:58px;height:58px;object-fit:contain}
.cover__item h3{font-size:1.1rem}
.cover__item p{color:var(--muted);font-size:.94rem;margin:0}
.cover__item a{font-weight:700;font-size:.92rem;color:var(--ink);margin-top:auto;padding-top:.7rem;
  text-decoration:none;display:inline-flex;align-items:center;gap:.45rem;align-self:flex-start}
.cover__item a::after{content:"→";transition:transform .2s var(--ease)}
.cover__item a:hover::after{transform:translateX(4px)}
.cover__item a span{box-shadow:inset 0 -2px 0 var(--volt)}
.cover__wide{grid-column:1/-1;background:var(--ink);color:#fff;border-color:var(--ink);
  display:flex;flex-direction:row;align-items:stretch;padding:0;overflow:hidden;min-height:270px}
.cover__wide:hover{transform:none;box-shadow:var(--shadow)}
.cover__wide .cover__txt{flex:1 1 54%;min-width:0;padding:clamp(22px,2.8vw,36px);
  display:flex;flex-direction:column;justify-content:center;gap:.7rem}
.cover__wide h3{font-size:1.3rem}
.cover__wide p{color:var(--muted-dark);font-size:.97rem;margin:0}
.cover__media{flex:1 1 46%;min-width:0;position:relative;overflow:hidden;align-self:stretch}
.cover__media img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;
  object-position:center 62%;display:block}   /* cadrage sur le poste de travail */

/* --- méthode ------------------------------------------------------------- */
.method{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4.5vw,64px);align-items:start}
.method__txt h2{font-size:clamp(1.7rem,3vw,2.6rem);margin:.7rem 0 1rem}
.method__txt p{max-width:60ch;color:#2C333D}
.method__txt strong{font-weight:700;box-shadow:inset 0 -.55em 0 var(--volt-soft)}
.note{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,30px);box-shadow:var(--shadow)}
.note h3{font-size:1.02rem;margin-bottom:1rem}
.note ol{margin:0;padding:0;list-style:none;counter-reset:n}
.note li{counter-increment:n;position:relative;padding-left:2.4rem;margin-bottom:.95rem;
  color:var(--muted);font-size:.95rem}
.note li:last-child{margin-bottom:0}
.note li::before{content:counter(n,decimal-leading-zero);position:absolute;left:0;top:.05rem;
  font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--ink);
  background:var(--volt);border-radius:6px;width:26px;height:22px;display:grid;place-items:center}
.note li strong{color:var(--ink)}

/* --- zone ---------------------------------------------------------------- */
.zone{display:grid;grid-template-columns:1fr auto;gap:clamp(26px,5vw,72px);align-items:center}
.zone h2{font-size:clamp(1.7rem,3vw,2.6rem);margin:.7rem 0 1rem}
.zone p{color:var(--muted-dark);max-width:58ch}
/* --- cadran de zone : centre + ondes lentes, noms tout autour ------------- */
.dialwrap{flex:none;display:flex;flex-direction:column;align-items:center;gap:1.1rem}
.dial{
  --d:clamp(232px,26vw,320px);width:var(--d);height:var(--d);position:relative;
  display:grid;place-items:center;
}
/* une onde de temps en temps : lente, discrète, jamais un balayage */
.dial__wave{
  position:absolute;inset:0;border-radius:50%;border:1px solid rgba(14,17,21,.3);
  opacity:0;pointer-events:none;will-change:transform,opacity;
}
.dial__wave:nth-of-type(2){border-color:rgba(240,190,0,.65)}
.no-js .dial__wave{opacity:.18;transform:scale(.55)}
.no-js .dial__wave:nth-of-type(2){transform:scale(1)}

.dial__in{position:relative;z-index:2;margin:0;text-align:center;font-family:var(--mono);
  font-size:.74rem;color:var(--muted);letter-spacing:.08em;line-height:1.5;
  background:radial-gradient(circle,var(--surface) 58%,rgba(255,255,255,0) 100%);
  padding:1.1rem 1.2rem}
.dial__in b{display:block;color:var(--ink);font-size:clamp(1.75rem,2.9vw,2.35rem);
  letter-spacing:-.02em;font-family:var(--sans)}
.dial__in b::after{content:"";display:block;width:38px;height:3px;background:var(--volt);
  border-radius:2px;margin:.4rem auto .5rem}

.dial__names{position:absolute;inset:0;z-index:3;pointer-events:none}
.blip{
  /* le point est posé sur la position réelle ; l'étiquette se développe vers
     l'intérieur du cadran, jamais vers la colonne de texte */
  --tx:-4px;
  position:absolute;transform:translate(var(--tx),-50%);display:flex;align-items:center;
  gap:.4rem;font-size:.8rem;font-weight:700;color:var(--ink);white-space:nowrap;
  animation:blipFade 3.4s var(--ease) forwards;
}
.blip--left{--tx:calc(-100% + 4px);flex-direction:row-reverse}
.blip i{width:8px;height:8px;border-radius:50%;background:var(--volt);flex:none;
  box-shadow:0 0 0 3px rgba(255,210,30,.3)}
.blip span{background:rgba(255,255,255,.92);padding:.1rem .38rem;border-radius:6px;
  display:inline-flex;align-items:baseline;gap:.35rem}
.blip span b{font-family:var(--mono);font-size:.66rem;font-weight:600;color:var(--muted);
  letter-spacing:.04em}
@keyframes blipFade{0%{opacity:0}12%{opacity:1}74%{opacity:1}100%{opacity:0}}

.dial__cap{margin:0;font-family:var(--mono);font-size:.67rem;letter-spacing:.05em;
  color:var(--muted);text-align:center;line-height:1.6;max-width:32ch}

/* même cadran sur fond sombre */
.sec--dark .dial__wave{border-color:rgba(255,255,255,.18)}
.sec--dark .dial__in{color:var(--muted-dark);
  background:radial-gradient(circle,var(--ink) 58%,rgba(14,17,21,0) 100%)}
.sec--dark .dial__in b,.sec--dark .blip{color:#fff}
.sec--dark .blip span{background:rgba(23,27,34,.92)}
.sec--dark .dial__cap{color:var(--muted-dark)}

/* --- slider de médias réels ---------------------------------------------- */
.slider{position:relative;margin-top:clamp(22px,3vw,34px)}
.slider__stage{
  position:relative;background:var(--ink);border-radius:var(--r);overflow:hidden;
  aspect-ratio:16/9;border:1px solid var(--line-dark);
}
.slider__stage::before{ /* trame discrète derrière les photos verticales */
  content:"";position:absolute;inset:0;
  background-image:linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:40px 40px;
}
.slide{
  position:absolute;inset:0;display:grid;place-items:center;opacity:0;visibility:hidden;
  transform:scale(1.02);transition:opacity .6s var(--ease),transform .8s var(--ease),
    visibility 0s linear .6s;
}
.slide[data-active="1"]{opacity:1;visibility:visible;transform:none;transition-delay:0s}
.slide img{max-width:100%;max-height:100%;width:auto;height:auto;object-fit:contain;
  display:block;position:relative}
.no-js .slide{position:relative;opacity:1;visibility:visible;transform:none;
  aspect-ratio:16/9;border-bottom:1px solid var(--line-dark)}
.no-js .slider__stage{aspect-ratio:auto}

.slider__cap{
  position:absolute;left:0;right:0;bottom:0;padding:2.6rem 1.2rem .95rem;color:#fff;
  background:linear-gradient(transparent,rgba(14,17,21,.9) 55%);font-size:.92rem;
}
.slider__cap b{display:block;font-family:var(--mono);font-size:.68rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--volt);margin-bottom:.25rem}
.slider__nav{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:space-between;padding:0 .7rem;pointer-events:none}
.slider__nav button{
  pointer-events:auto;width:46px;height:46px;border-radius:50%;border:1px solid rgba(255,255,255,.22);
  background:rgba(14,17,21,.55);color:#fff;cursor:pointer;display:grid;place-items:center;
  backdrop-filter:blur(6px);transition:background-color .2s var(--ease),transform .2s var(--ease);
}
.slider__nav button:hover{background:var(--volt);color:var(--ink);border-color:var(--volt);
  transform:scale(1.06)}
.slider__nav svg{width:18px;height:18px}
.slider__dots{display:flex;gap:.45rem;justify-content:center;margin-top:1.1rem;flex-wrap:wrap}
.slider__dots button{
  width:30px;height:5px;border-radius:999px;border:0;background:var(--line-2);cursor:pointer;
  padding:0;transition:background-color .2s var(--ease),width .25s var(--ease);
}
.slider__dots button[aria-current="true"]{background:var(--ink);width:54px}
.sec--dark .slider__dots button{background:#39404B}
.sec--dark .slider__dots button[aria-current="true"]{background:var(--volt)}
.slider__count{font-family:var(--mono);font-size:.74rem;color:var(--muted);
  text-align:center;margin:.7rem 0 0}
.sec--dark .slider__count{color:var(--muted-dark)}

/* --- questions ----------------------------------------------------------- */
.qa{display:grid;gap:.6rem}
.qa details{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:border-color .2s var(--ease),box-shadow .25s var(--ease)}
.qa details[open]{border-color:var(--line-2);box-shadow:var(--shadow)}
.qa summary{cursor:pointer;padding:1.15rem 1.3rem;font-weight:700;font-size:1.04rem;
  display:flex;gap:1rem;align-items:center;list-style:none}
.qa summary::-webkit-details-marker{display:none}
.qa summary::after{
  content:"";margin-left:auto;flex:none;width:11px;height:11px;border-right:2.5px solid var(--ink);
  border-bottom:2.5px solid var(--ink);transform:rotate(45deg) translate(-3px,-3px);
  transition:transform .25s var(--ease);
}
.qa details[open] summary::after{transform:rotate(225deg) translate(-2px,-2px)}
.qa summary:hover{color:#000}
.qa .qa__a{padding:0 1.3rem 1.25rem;color:var(--muted);margin:0;max-width:76ch;
  animation:stepIn .3s var(--ease) both}

/* --- guides -------------------------------------------------------------- */
.guides{display:grid;grid-template-columns:repeat(3,1fr);gap:.9rem;margin-top:1.8rem}
.guides a{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.3vw,28px);text-decoration:none;color:var(--ink);display:flex;
  flex-direction:column;gap:.6rem;position:relative;overflow:hidden;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.guides a::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--volt);
  transform:scaleY(0);transform-origin:top;transition:transform .3s var(--ease)}
.guides a:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.guides a:hover::before{transform:scaleY(1)}
.guides h3{font-size:1.08rem;line-height:1.28}
.guides p{color:var(--muted);font-size:.93rem;margin:0}
.guides span{font-family:var(--mono);font-size:.71rem;letter-spacing:.13em;text-transform:uppercase;
  color:var(--ink);margin-top:auto;padding-top:.8rem;display:inline-flex;align-items:center;gap:.45rem}
.guides span::after{content:"→";transition:transform .2s var(--ease)}
.guides a:hover span::after{transform:translateX(4px)}

/* --- conversion finale : un bloc posé sur la page, pas une bande ---------- */
.final{background:var(--paper);padding:clamp(40px,5vw,72px) 0 clamp(52px,6vw,88px)}
.final__card{
  position:relative;background:var(--ink);color:#fff;border-radius:18px;overflow:hidden;
  display:grid;grid-template-columns:1fr auto;gap:clamp(26px,4vw,56px);align-items:center;
  padding:clamp(28px,3.6vw,52px);box-shadow:0 30px 60px -38px rgba(14,17,21,.75);
}
.final__card::before{ /* rappel discret de la trame du hero */
  content:"";position:absolute;inset:0;pointer-events:none;opacity:.7;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.05) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.05) 1px,transparent 1px);
  background-size:52px 52px;
  mask-image:radial-gradient(90% 120% at 88% 30%,#000 10%,transparent 72%);
}
.final__txt{position:relative}
.final h2{font-size:clamp(1.7rem,2.8vw,2.45rem);margin:.7rem 0 .7rem}
.final p{color:var(--muted-dark);margin:0;max-width:48ch}
.final__act{position:relative;display:flex;flex-direction:column;gap:.6rem;min-width:264px}

/* le numéro reste l'élément principal, mais compact : une plaque, pas un pavé */
.telplate{
  display:flex;align-items:center;gap:.85rem;text-decoration:none;background:var(--volt);
  color:var(--ink);border-radius:12px;padding:.7rem 1.05rem;
  box-shadow:0 8px 22px -14px rgba(255,210,30,.7);
  transition:transform .2s var(--ease),box-shadow .25s var(--ease);
}
.telplate:hover{transform:translateY(-2px);box-shadow:0 14px 30px -16px rgba(255,210,30,.85)}
.telplate:active{transform:translateY(0)}
.telplate svg{width:20px;height:20px;flex:none;stroke:var(--ink)}
.telplate__txt{display:flex;flex-direction:column;line-height:1.15;min-width:0}
.telplate__lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.12em;
  text-transform:uppercase;font-weight:600;color:#4A3D08}
.telplate__num{font-size:1.22rem;font-weight:800;letter-spacing:-.01em;margin-top:.15rem}
.telplate__hours{font-style:normal;font-family:var(--mono);font-size:.64rem;
  letter-spacing:.05em;color:#4A3D08;margin-top:.2rem}
/* même plaque posée sur un fond clair : elle ne s'étire pas sur toute la colonne */
.telplate--light{display:inline-flex;box-shadow:0 10px 26px -18px rgba(20,22,26,.7)}
.telplate--light:hover{box-shadow:0 16px 32px -18px rgba(20,22,26,.75)}

/* ===========================  PAGES INTÉRIEURES  ======================== */
/* fil d'Ariane */
.crumb{background:var(--ink);border-top:1px solid var(--line-dark)}
.crumb ol{list-style:none;display:flex;flex-wrap:wrap;gap:.5rem;margin:0;padding:.85rem 0;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.08em;color:var(--muted-dark)}
.crumb li + li::before{content:"/";margin-right:.5rem;color:#3A414C}
.crumb a{color:#C7CDD6;text-decoration:none}
.crumb a:hover{color:var(--volt)}
.crumb [aria-current="page"]{color:#fff}

/* hero de page intérieure : plus sobre que celui de l'accueil */
.phero{background:var(--ink);color:#fff;position:relative;overflow:hidden;isolation:isolate}
.phero::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;
  background-image:
    linear-gradient(to right,rgba(255,255,255,.04) 1px,transparent 1px),
    linear-gradient(to bottom,rgba(255,255,255,.04) 1px,transparent 1px);
  background-size:60px 60px;
  mask-image:radial-gradient(110% 90% at 75% 20%,#000 20%,transparent 75%)}
.phero__in{display:grid;grid-template-columns:1.15fr .85fr;gap:clamp(26px,4vw,60px);
  align-items:center;padding-block:clamp(34px,5vw,70px) clamp(40px,5.5vw,78px)}
.phero h1{font-size:clamp(1.8rem,3.2vw,2.85rem);margin:.9rem 0 1rem;letter-spacing:-.03em;
  max-width:18ch}
.phero__lede{color:#AEB6C2;font-size:clamp(1rem,.45vw + .9rem,1.12rem);max-width:52ch;
  margin-bottom:1.4rem}
.phero .tag{color:var(--muted-dark)}
/* accroche sous le H1 : reprend l'ancien titre de la page Conseils, devenu
   sous-titre pour que le H1 dise explicitement de quoi parle la page */
.phero__kicker{color:var(--volt);font-weight:700;letter-spacing:-.01em;
  font-size:clamp(1.02rem,.5vw + .92rem,1.2rem);margin:-.4rem 0 1rem}
.hero__vis--page{min-height:min(40vw,330px)}
.hero__vis--page .pcb-btn{width:min(100%,460px)}
.hero__vis--page .pcb{mask-image:radial-gradient(82% 82% at 50% 50%,#000 62%,transparent 100%)}
.phero__fig{margin:0}
.phero__fig img{width:100%;max-height:340px;object-fit:cover;object-position:center 40%;
  border-radius:14px;display:block;border:1px solid var(--line-dark)}
.phero__fig figcaption{font-family:var(--mono);font-size:.66rem;color:var(--muted-dark);
  margin-top:.6rem;letter-spacing:.05em}

/* étiquettes de couverture posées sous un titre de page */
.pills{list-style:none;display:flex;flex-wrap:wrap;gap:.45rem;margin:0 0 1.6rem;padding:0}
.pills li{display:inline-flex;align-items:center;gap:.45rem;border:1px solid #3A414C;
  border-radius:999px;padding:.34rem .8rem;font-size:.82rem;font-weight:700;color:var(--snow)}
.pills li::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--volt)}

/* trois prestations numérotées */
.kcards{list-style:none;margin:0;padding:0;display:grid;
  grid-template-columns:repeat(3,1fr);gap:.9rem}
.kcards--2{grid-template-columns:repeat(2,1fr)}
.kcards--2 .kcard p{max-width:56ch}
.kcards--4{grid-template-columns:repeat(auto-fit,minmax(224px,1fr))}
.kcards--4 .kcard{padding:clamp(18px,2vw,24px)}
.kcards--4 .kcard h3{font-size:1.02rem}
.kcards--4 .kcard p{font-size:.9rem}
.kcards--5{grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.kcards--5 .kcard{padding:clamp(16px,1.8vw,22px)}
.kcards--5 .kcard h3{font-size:1rem}
.kcards--5 .kcard p{font-size:.88rem}
.kcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(20px,2.3vw,28px);display:flex;flex-direction:column;gap:.6rem;
  transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.kcard:hover{transform:translateY(-4px);box-shadow:var(--shadow-lg)}
.kcard__n{font-family:var(--mono);font-size:.74rem;font-weight:700;color:var(--ink);
  background:var(--volt);border-radius:6px;width:30px;height:24px;display:grid;place-items:center}
.kcard h3{font-size:1.08rem}
.kcard p{color:var(--muted);font-size:.94rem;margin:0}

.note-inline{margin:1.4rem 0 0;padding:1rem 1.2rem;background:var(--paper);
  border-left:3px solid var(--volt);border-radius:0 var(--r-s) var(--r-s) 0;
  color:var(--muted);font-size:.94rem;max-width:82ch}

/* bloc texte + média */
.split{display:grid;grid-template-columns:1.2fr .8fr;gap:clamp(26px,4.5vw,64px);align-items:start}
.split__txt h2{font-size:clamp(1.6rem,2.8vw,2.35rem);margin:.7rem 0 1rem}
.split__txt p{max-width:60ch;color:#2C333D}
.split__txt strong{font-weight:700;box-shadow:inset 0 -.55em 0 var(--volt-soft)}
.split--dark .split__txt p{color:var(--muted-dark)}
.split--dark .split__txt strong{color:#fff;box-shadow:inset 0 -.55em 0 rgba(255,210,30,.22)}
.split__fig{margin:0}
.split__fig img{width:100%;max-height:420px;object-fit:cover;border-radius:14px;display:block;
  border:1px solid var(--line-dark)}
.split__fig figcaption{font-family:var(--mono);font-size:.66rem;color:var(--muted-dark);
  margin-top:.6rem;letter-spacing:.05em}
.lnk{color:inherit;font-weight:700;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--volt)}
.lnk:hover{box-shadow:inset 0 -4px 0 var(--volt)}

/* Liste de liens vers les communes : pas de nouveau composant, seulement le
   style de lien existant, aligné et espacé pour rester lisible en une phrase. */
.zonelinks{display:flex;flex-wrap:wrap;gap:.4rem .9rem;margin:1.1rem 0 1.4rem;
  font-size:.94rem;line-height:1.5}
.zonelinks a{white-space:nowrap}

@media (max-width:1020px){
  .phero__in{grid-template-columns:1fr}
  .phero__fig{order:-1}
  .phero__fig img{max-height:240px}
  .kcards{grid-template-columns:1fr}
  .split{grid-template-columns:1fr}
}

/* --- hub éditorial ------------------------------------------------------- */
.postlist{list-style:none;margin:0;padding:0;display:grid;gap:.9rem}
.postcard{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  transition:transform .25s var(--ease),box-shadow .3s var(--ease)}
.postcard:hover{transform:translateY(-3px);box-shadow:var(--shadow-lg)}
.postcard a{display:block;padding:clamp(20px,2.4vw,30px);text-decoration:none;color:var(--ink)}
.postcard h3{font-size:clamp(1.1rem,1.6vw,1.35rem);margin:.55rem 0 .5rem;max-width:54ch}
.postcard__desc{color:var(--muted);margin:0;max-width:64ch}
.postcard__go{display:inline-flex;align-items:center;gap:.45rem;margin-top:.9rem;
  font-family:var(--mono);font-size:.7rem;letter-spacing:.12em;text-transform:uppercase}
.postcard__go::after{content:"→";transition:transform .2s var(--ease)}
.postcard a:hover .postcard__go::after{transform:translateX(4px)}
.guides--more{background:var(--paper)!important;border-style:dashed!important}

/* ===========================  ARTICLE  ================================== */
.phero--art .phero__in{grid-template-columns:1.2fr .8fr}
.art__meta{display:flex;flex-wrap:wrap;gap:.4rem 1.2rem;margin:1.2rem 0 0;font-family:var(--mono);
  font-size:.74rem;letter-spacing:.06em;color:var(--muted-dark)}
.art__meta span{display:inline-flex;align-items:center;gap:.5rem}
.art__meta span::before{content:"";width:6px;height:6px;border-radius:50%;background:var(--volt)}

.art{background:var(--surface);padding:clamp(38px,5vw,70px) 0 clamp(30px,4vw,54px)}
.art__in{display:block}
.art__body{max-width:72ch;margin-inline:auto}
.art__body > h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin:2.4rem 0 .9rem}
.art__body p{color:#2C333D;margin:0 0 1.1em}
.art__lede{font-size:clamp(1.08rem,.6vw + .95rem,1.24rem);color:var(--ink)!important;
  line-height:1.55;margin-bottom:1.6rem!important}
.art__body strong{font-weight:700;box-shadow:inset 0 -.55em 0 var(--volt-soft)}
.art__body a{color:inherit}

/* réponse courte, pour la lecture rapide et les moteurs de réponse */
.answer{border:1px solid var(--line);border-left:4px solid var(--ink);border-radius:0 var(--r) var(--r) 0;
  padding:1.1rem 1.3rem;margin:0 0 1.8rem;background:var(--paper)}
.answer__lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);margin:0 0 .4rem!important}
.answer p:last-child{margin:0}

.tldr{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
  margin:0 0 2.2rem}
.tldr h2{font-size:1.1rem;margin:0 0 .7rem}
.tldr p{color:var(--muted-dark)!important;margin:0}
.tldr strong{color:#fff;box-shadow:inset 0 -.55em 0 rgba(255,210,30,.24)}

.art__fig{margin:2rem 0}
.art__fig img{width:100%;border-radius:var(--r);display:block;border:1px solid var(--line)}
.art__fig figcaption{font-size:.85rem;color:var(--muted);margin-top:.6rem}

/* tableau éditorial : le conteneur défile, la page jamais */
.art__tbl{margin:1.8rem 0 2.2rem}
/* le titre du tableau est un titre de section : même taille que les autres h2,
   que `.art__body > h2` ne peut pas atteindre puisqu'il est dans un <figure> */
.art__tbl h2{font-size:clamp(1.4rem,2.2vw,1.85rem);margin:2.4rem 0 .9rem}
.art__tbl__scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;
  border:1px solid var(--line);border-radius:var(--r);background:var(--surface)}
.art__tbl table{border-collapse:collapse;width:100%;min-width:460px;font-size:.93rem}
.art__tbl th,.art__tbl td{text-align:left;padding:.8rem 1rem;vertical-align:top;
  border-bottom:1px solid var(--line)}
.art__tbl thead th{font-family:var(--mono);font-size:.68rem;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);font-weight:600;background:var(--paper);
  border-bottom:1px solid var(--line-2)}
.art__tbl tbody tr:last-child th,.art__tbl tbody tr:last-child td{border-bottom:0}
.art__tbl tbody th{font-weight:700;color:var(--ink);width:38%}
.art__tbl td{color:#2C333D}
.art__tbl figcaption{font-size:.85rem;color:var(--muted);margin-top:.7rem}

.callout{border:1px solid var(--line);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
  margin:2.2rem 0;position:relative;background:#FFFDF5}
.callout__lbl{font-family:var(--mono);font-size:.66rem;letter-spacing:.14em;text-transform:uppercase;
  color:#7A6412;margin:0 0 .4rem!important}
.callout h2{font-size:1.2rem;margin:0 0 .8rem!important}
.callout p:last-child{margin:0}

.steps-list{counter-reset:st;list-style:none;margin:1.4rem 0 2rem;padding:0}
.steps-list li{counter-increment:st;position:relative;padding-left:3rem;margin-bottom:1rem;
  color:#2C333D}
.steps-list li::before{content:counter(st);position:absolute;left:0;top:0;width:32px;height:28px;
  display:grid;place-items:center;font-family:var(--mono);font-size:.8rem;font-weight:700;
  color:var(--ink);background:var(--volt);border-radius:7px}

.checklist{background:var(--paper);border-radius:var(--r);padding:clamp(20px,2.4vw,28px);
  margin:2.2rem 0}
.checklist h2{font-size:1.12rem;margin:0 0 .7rem!important}
.checklist ul{list-style:none;margin:0;padding:0}
.checklist li{position:relative;padding-left:1.8rem;margin-bottom:.55rem;color:var(--muted)}
.checklist li::before{content:"";position:absolute;left:.25rem;top:.6em;width:8px;height:8px;
  border-radius:2px;background:var(--volt)}

/* --- bandeau d'article : quatre repères de structure strictement identique -
   libellé court, valeur courte, une ligne chacun, jamais de troncature.
   Les séparateurs sont des écarts de grille : les quatre blocs ont donc
   exactement la même hauteur, y compris quand ils passent sur deux rangs. -- */
.byline{
  list-style:none;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;
  background:var(--line);border:1px solid var(--line);border-radius:var(--r);
  padding:0;margin:0 0 2.1rem;overflow:hidden;
}
.byline__item{
  display:flex;align-items:center;gap:.7rem;margin:0;padding:.85rem .9rem;min-width:0;
  background:var(--paper);
}
.byline__ico{flex:none;width:34px;height:34px;border-radius:9px;display:grid;place-items:center;
  background:var(--volt);color:var(--ink)}
.byline__ico svg{width:19px;height:19px}
.byline__txt{display:flex;flex-direction:column;justify-content:center;min-width:0;gap:.14rem}
.byline__lbl{font-family:var(--mono);font-size:.62rem;letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted);line-height:1;white-space:nowrap}
.byline__val{font-size:.94rem;font-weight:700;color:var(--ink);line-height:1.2;white-space:nowrap}
.byline__val a{color:inherit;text-decoration:none;box-shadow:inset 0 -2px 0 var(--volt)}

@media (max-width:820px){.byline{grid-template-columns:repeat(2,1fr)}}
@media (max-width:400px){
  .byline__val{font-size:.88rem}
  .byline__item{padding:.75rem .7rem;gap:.55rem}
  .byline__ico{width:30px;height:30px}
}

/* ------------------------------ QCM ------------------------------------ */
.quiz{margin:2.8rem 0;border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,2.6vw,32px);background:var(--surface);box-shadow:var(--shadow)}
.quiz h2{font-size:1.3rem;margin:0}
.quiz__bar{margin-bottom:.6rem}
.quiz__row{display:flex;align-items:baseline;justify-content:space-between;gap:1rem;flex-wrap:wrap}
.quiz__count{font-family:var(--mono);font-size:.72rem;letter-spacing:.08em;color:var(--muted);
  margin:0;white-space:nowrap}
.quiz__bar .progress{margin-top:.8rem}
.quiz__intro{color:var(--muted);font-size:.92rem;margin-bottom:1.6rem}
.quiz__q{animation:stepIn .32s var(--ease) both}
.no-js .quiz__q{animation:none}
.quiz__result{text-align:center;padding:1.2rem 0 .4rem;animation:stepIn .35s var(--ease) both}
.quiz__big{font-size:clamp(2.2rem,5vw,3rem);font-weight:800;letter-spacing:-.03em;margin:0;
  color:var(--ink)}
.quiz__big::after{content:"";display:block;width:44px;height:4px;background:var(--volt);
  border-radius:2px;margin:.5rem auto .7rem}
.quiz__msg{color:var(--muted);margin:0;font-size:.95rem}
.quiz__q{border:0;padding:0;margin:0 0 1.7rem}
.quiz__q > legend{display:flex;gap:.7rem;align-items:baseline;font-weight:700;font-size:1.02rem;
  margin-bottom:.7rem;padding:0}
.quiz__n{flex:none;display:grid;place-items:center;width:26px;height:22px;border-radius:6px;
  background:var(--ink);color:var(--volt);font-family:var(--mono);font-size:.74rem;font-weight:700}
.quiz__a{display:flex;align-items:flex-start;gap:.65rem;padding:.6rem .8rem;border:1px solid var(--line);
  border-radius:var(--r-s);margin-bottom:.45rem;cursor:pointer;font-size:.96rem;
  transition:border-color .18s var(--ease),background-color .18s var(--ease)}
.quiz__a:hover{border-color:var(--line-2);background:var(--paper)}
.quiz__a input{margin:.22rem 0 0;accent-color:var(--ink);width:17px;height:17px;flex:none}
.quiz__a:has(input:focus-visible){outline:3px solid var(--volt);outline-offset:2px}
.quiz__q[data-state] .quiz__a{cursor:default}
.quiz__a[data-good]{border-color:#2E7D4F;background:#F1F9F4}
.quiz__a[data-bad]{border-color:#B3402F;background:#FDF3F1}
.quiz__fb{margin:.6rem 0 0;font-size:.92rem;padding:.6rem .8rem;border-radius:var(--r-s);
  background:var(--paper);color:#2C333D}
.quiz__q[data-state="ok"] .quiz__fb{background:#F1F9F4;color:#1E5C39}
.quiz__q[data-state="ko"] .quiz__fb{background:#FDF3F1;color:#8A2F21}
.quiz__foot{display:flex;flex-wrap:wrap;align-items:center;gap:.7rem;border-top:1px solid var(--line);
  padding-top:1.3rem}
.quiz__score{margin:0;font-weight:700;font-size:.98rem}

.art__cta{background:var(--ink);color:#fff;border-radius:var(--r);padding:clamp(22px,2.6vw,32px);
  margin:2.6rem 0}
.art__cta h2{font-size:1.25rem;margin:0 0 .6rem}
.art__cta p{color:var(--muted-dark)!important}
.art__cta .btn--light{color:#fff;border-color:#3A414C}
.art__cta .btn--light:hover{border-color:#fff;background:rgba(255,255,255,.05)}

.sources,.similar{margin:2.4rem 0;border-top:1px solid var(--line);padding-top:1.4rem}
.sources h2,.similar h2{font-family:var(--mono);font-size:.72rem;letter-spacing:.14em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .9rem}
.sources ul,.similar ul{list-style:none;margin:0;padding:0}
.sources li{margin-bottom:.9rem;font-size:.92rem}
.sources a{display:block;font-weight:700;color:var(--ink);text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--volt)}
.sources span{display:block;color:var(--muted);font-size:.85rem;margin-top:.2rem}
.similar li{margin-bottom:.5rem}
.similar a{font-weight:700;color:var(--ink);text-decoration:none;box-shadow:inset 0 -2px 0 var(--volt)}

@media (max-width:1020px){.phero--art .phero__in{grid-template-columns:1fr}}

/* ===========================  PIED DE PAGE  ============================= */
.ftr{background:#090B0E;color:#98A2AE;font-size:.93rem;padding:clamp(44px,5vw,64px) 0 0;
  border-top:1px solid var(--line-dark)}
.ftr__grid{display:grid;grid-template-columns:1.35fr 1fr 1fr 1.1fr;gap:clamp(22px,3vw,44px)}
.ftr h2{font-size:.74rem;font-family:var(--mono);letter-spacing:.16em;text-transform:uppercase;
  color:#8A94A2;margin-bottom:1rem;font-weight:600}
.ftr ul{list-style:none;margin:0;padding:0}
.ftr li{margin-bottom:.6rem}
.ftr a{color:#D5DAE1;text-decoration:none;transition:color .18s var(--ease)}
.ftr a:hover{color:var(--volt)}
.ftr__logo img{width:150px;height:auto;margin-bottom:1rem}
.ftr__bot{margin-top:clamp(30px,3.5vw,48px);border-top:1px solid #1A1F26;padding:1.2rem 0 1.5rem;
  display:flex;flex-wrap:wrap;gap:.6rem 1.8rem;font-size:.85rem;color:#8A94A2}
.ftr__by{margin-left:auto}
.ftr__by a{color:#D5DAE1;text-decoration:none;box-shadow:inset 0 -1px 0 rgba(255,210,30,.7)}
.ftr__by a:hover{color:var(--volt)}
@media (max-width:620px){.ftr__by{margin-left:0}}

/* barre d'appel mobile */
.callbar{display:none}

/* ===========================  RESPONSIVE  =============================== */
@media (max-width:1020px){
  .hero__in{grid-template-columns:1fr;padding-block:clamp(34px,6vw,56px) clamp(64px,8vw,92px)}
  .hero__vis{order:-1;min-height:min(56vw,330px)}
  .pcb{width:min(86%,400px);margin-inline:auto}
  .cover{grid-template-columns:repeat(2,1fr)}
  .method{grid-template-columns:1fr}
  .final__card{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr 1fr}
}
/* 7 entrées de navigation dont « AdBlue / FAP / EGR » : mesuré, la barre
   complète ne tient plus sous 1200 px — bascule en menu à ce seuil. */
@media (max-width:1200px){
  .hdr__nav,.hdr__hours{display:none}
  .hdr__burger{
    display:inline-flex;align-items:center;gap:.5rem;background:transparent;color:#fff;
    border:1px solid #3A414C;border-radius:var(--r-s);padding:.6rem .8rem;font:inherit;
    font-size:.9rem;font-weight:700;cursor:pointer;min-height:46px;
  }
  .hdr[data-open="1"] .hdr__nav{
    display:flex;flex-direction:column;align-items:stretch;position:absolute;top:100%;left:0;
    right:0;background:rgba(14,17,21,.99);border-top:1px solid var(--line-dark);
    padding:.6rem var(--gut) 1.1rem;gap:0;animation:stepIn .25s var(--ease) both;
  }
  .hdr[data-open="1"] .hdr__nav a{padding:1rem .3rem;border-bottom:1px solid #1A1F26;border-radius:0}
  .hdr[data-open="1"] .hdr__nav a::after{display:none}

  /* --- sans JavaScript --------------------------------------------------
     Le bouton burger n'ouvre le menu que par JavaScript : sans lui, la
     navigation serait purement et simplement inaccessible sous 1200 px.
     On masque donc le bouton devenu inutile et on affiche la navigation en
     ligne repliable sous le logo, toujours visible et atteignable au clavier.
     Le bouton d'appel reste à sa place. */
  .no-js .hdr__burger{display:none}
  .no-js .hdr__in{flex-wrap:wrap;padding-bottom:.55rem}
  .no-js .hdr__logo{margin-right:auto}
  .no-js .hdr__nav{
    display:flex;flex-wrap:wrap;order:3;width:100%;gap:.1rem .2rem;
    border-top:1px solid var(--line-dark);padding-top:.5rem;margin-top:.15rem;
  }
  .no-js .hdr__nav a{padding:.5rem .55rem;white-space:normal}
}
@media (max-width:880px){
  .guides{grid-template-columns:1fr}
  .zone{grid-template-columns:1fr}
  .dialwrap{margin-inline:auto}
  .blip{font-size:.76rem}
  .slider__stage{aspect-ratio:4/3}
}
@media (max-width:620px){
  .assist{margin-top:-40px}
  .cover{grid-template-columns:1fr}
  .cover__wide{flex-direction:column}
  .cover__media{flex:none;width:100%;aspect-ratio:16/10}
  .grid2{grid-template-columns:1fr}
  .ftr__grid{grid-template-columns:1fr}
  .ftr__bot{padding-bottom:calc(1.5rem + 66px)}
  .assist__nav{width:100%;margin-left:0}
  .assist__nav .btn{flex:1;min-width:0}
  .hdr__logo img{width:104px}
  .hdr__num{display:none}
  .slider__nav button{width:40px;height:40px}
  .slider__cap{font-size:.86rem;padding:2.2rem .9rem .8rem}
  .callbar{
    display:flex;position:fixed;left:0;right:0;bottom:0;z-index:120;gap:.55rem;
    background:rgba(14,17,21,.97);border-top:1px solid var(--line-dark);padding:.55rem .65rem;
    backdrop-filter:blur(8px);
  }
  .callbar .btn{flex:1;min-height:52px;font-size:.92rem;white-space:nowrap;padding:.7rem .6rem}
}

/* ===========================  PAGES JURIDIQUES  ========================= */
/* En-tête sobre : pas de motif animé, pas de CTA. Ce sont des pages de texte. */
.dochead{background:var(--ink);color:#fff;padding:clamp(34px,4.5vw,58px) 0 clamp(30px,4vw,48px)}
.dochead h1{font-size:clamp(1.7rem,2.9vw,2.5rem);margin:.8rem 0 .8rem;letter-spacing:-.03em}
.dochead p{color:#AEB6C2;max-width:62ch;margin:0}
.dochead .tag{color:var(--muted-dark)}
.dochead__meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.06em;
  color:var(--muted-dark);margin-top:1.1rem!important}

.doc{padding:clamp(44px,5.5vw,80px) 0}
.doc__in{display:grid;grid-template-columns:220px minmax(0,1fr);gap:clamp(26px,4vw,58px);
  align-items:start}
.doc__toc{position:sticky;top:96px}
.doc__toc h2{font-family:var(--mono);font-size:.68rem;letter-spacing:.12em;
  text-transform:uppercase;color:var(--muted);margin:0 0 .7rem;font-weight:600}
.doc__toc ol{list-style:none;margin:0;padding:0;display:grid;gap:.1rem;counter-reset:toc}
.doc__toc a{display:block;padding:.42rem .6rem;border-radius:8px;text-decoration:none;
  color:var(--muted);font-size:.88rem;border-left:2px solid var(--line);
  transition:color .2s var(--ease),background .2s var(--ease),border-color .2s var(--ease)}
.doc__toc a:hover{color:var(--ink);background:var(--surface);border-left-color:var(--volt)}

.doc__body{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  padding:clamp(22px,3vw,44px)}
.doc__body section + section{margin-top:clamp(26px,3vw,40px);padding-top:clamp(24px,3vw,36px);
  border-top:1px solid var(--line)}
.doc__body h2{font-size:clamp(1.15rem,1.7vw,1.45rem);margin:0 0 .8rem;letter-spacing:-.02em}
.doc__body p{color:#2C333D;max-width:72ch;margin:0 0 .8rem}
.doc__body p:last-child{margin-bottom:0}
.doc__body ul,.doc__body ol{color:#2C333D;max-width:72ch;margin:0 0 .8rem;padding-left:1.2rem}
.doc__body li{margin-bottom:.35rem}
.doc__body dl{margin:0 0 1.1rem;display:grid;grid-template-columns:auto minmax(0,1fr);
  gap:.35rem 1rem;max-width:72ch}
.doc__body dl:last-child{margin-bottom:0}
.doc__body dt{font-family:var(--mono);font-size:.72rem;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);padding-top:.18rem}
.doc__body dd{margin:0;color:#2C333D}
.doc__body a{color:inherit;font-weight:700;text-decoration:none;
  box-shadow:inset 0 -2px 0 var(--volt)}
.doc__body a:hover{box-shadow:inset 0 -4px 0 var(--volt)}
.doc__flag{margin:0 0 1.4rem;padding:.95rem 1.15rem;background:var(--paper);
  border-left:3px solid var(--volt);border-radius:0 var(--r-s) var(--r-s) 0;
  color:var(--muted);font-size:.92rem}

@media (max-width:880px){
  /* minmax(0,1fr) et non 1fr : « 1fr » vaut minmax(auto,1fr), donc la colonne
     ne descend jamais sous la largeur min-content de son contenu. Sur un écran
     de 320 px, cela poussait tout le bloc hors de la page. */
  .doc__in{grid-template-columns:minmax(0,1fr)}
  .doc__toc,.doc__body{min-width:0}
  .doc__toc{position:static;order:-1}
  /* min(150px,100%) et non 150px : sur un très petit écran (320 px), deux
     colonnes de 150 px plus l'espacement dépassent la largeur disponible et
     poussaient le sommaire hors de la page. Le min() laisse la colonne se
     réduire au lieu de déborder. */
  .doc__toc ol{grid-template-columns:repeat(auto-fit,minmax(min(150px,100%),1fr));gap:.25rem}
  .doc__body dl{grid-template-columns:1fr;gap:.1rem .6rem}
  .doc__body dd{margin-bottom:.5rem}
}

/* --- accessibilité : mouvement réduit ----------------------------------- */
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{animation:none!important;transition-duration:.01ms!important}
  .reveal{opacity:1;transform:none}
  .slide{transition:none}
}
@media print{.hdr__call,.callbar,.assist,.slider__nav{display:none}}