/* =====================================================================
 * Epav'Action — feuille de style unique du site
 * Générée depuis les pages historiques lors de la migration.
 * Toute modification de design se fait ICI, jamais dans les pages générées.
 * ===================================================================== */
/* ============ TOKENS ============ */
:root{
  --navy:#030392;
  --navy-dark:#020166;
  --navy-rgb:3,3,146;
  --slate:#48586A;
  --bg:#F6F8FA;
  --ink:#16222C;
  /* Encre de titre, plus foncée et franchement bleutée que --ink : elle porte
     la première ligne du titre de la carte de rappel, où un gris neutre
     paraissait délavé à côté du bleu de marque de la seconde ligne. */
  --ink-deep:#0A1130;
  --bg-soft:#ECECFB;
  --blue-light:#ECECFB;
  --cta:#030392;
  --cta-hover:#020166;
  --accent-light:#A6A8FF;
  --warn:#B45309;
  --white:#FFFFFF;

  /* Accent téléphone : rouge d'appel, décliné en deux valeurs.
     --phone-red        : sur fond clair (navbar, carte blanche du hero)
     --phone-red-on-dark: plus lumineux, pour rester lisible sur le bleu #030392 */
  --phone-red:#D62828;
  --phone-red-on-dark:#FF6B6B;

  /* Vert de validation, réservé aux marques de confirmation — jamais décoratif.
     Les trois valeurs sont regroupées ici parce que plusieurs pages s'en
     servent, et que deux verts de validation légèrement différents finiraient
     sinon par apparaître.
     --ok-ink est le vert du texte courant : plus sombre que --ok, il tient le
     contraste AA sur --ok-bg, ce que --ok ne fait pas en petite taille. */
  --ok:#0B7A3B;
  --ok-bg:#EDF7F0;
  --ok-line:#BEE2CB;
  --ok-ink:#2F5B42;

  /* Vert d'action, distinct du vert de validation ci-dessus : il ne signale
     pas un état acquis mais une action à faire — « Continuer » dans le
     configurateur d'estimation. Il est plus clair que --ok pour se détacher
     nettement du bleu de marque, qui est la couleur du bouton d'appel : sur
     mobile les deux boutons sont empilés, et deux bleus identiques feraient
     appeler qui voulait avancer. Le texte blanc y reste lisible en plein
     soleil, ce qui compte pour un formulaire rempli près du véhicule. */
  --go:#17A356;
  --go-hover:#128046;

  --font-display:'Manrope', 'Inter', system-ui, sans-serif;
  --font-body:'Inter', system-ui, sans-serif;

  --sp-1:4px; --sp-2:8px; --sp-3:16px; --sp-4:24px; --sp-5:32px;
  --sp-6:48px; --sp-7:64px; --sp-8:96px; --sp-9:128px;

  --radius-sm:8px; --radius-md:10px; --radius-lg:14px; --radius-xl:20px;
  --shadow-sm:0 1px 2px rgba(11,31,51,0.05);
  --shadow-md:0 4px 16px rgba(11,31,51,0.06);

  --container:1180px;
  --border:1px solid var(--bg-soft);
}

*{box-sizing:border-box;}
html{scroll-behavior:smooth;}
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto;}
  *{animation-duration:0.01ms !important; transition-duration:0.01ms !important;}
}

body{
  margin:0;
  font-family:var(--font-body);
  color:var(--ink);
  background:var(--bg);
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}

h1,h2,h3{
  font-family:var(--font-display);
  color:var(--navy);
  line-height:1.2;
  margin:0;
}
h1{font-size:clamp(2rem, 1.6rem + 2vw, 3rem); font-weight:800; letter-spacing:-0.01em;}
h2{font-size:clamp(1.5rem, 1.3rem + 1vw, 2.1rem); font-weight:700; letter-spacing:-0.01em;}
h3{font-size:1.15rem; font-weight:600;}
p{margin:0;}
a{color:inherit;}
img{max-width:100%; display:block;}
button{font-family:inherit;}

.eyebrow{
  font-family:var(--font-display);
  font-size:0.8rem;
  font-weight:700;
  letter-spacing:0.08em;
  text-transform:uppercase;
  color:var(--cta);
}

.container{max-width:var(--container); margin:0 auto; padding:0 var(--sp-4);}
.section{padding:var(--sp-8) 0;}
/* Navigation par ancre : décale la cible sous le header fixe, sinon le titre
   de section se retrouve masqué à l'arrivée. Les 16px supplémentaires évitent
   que la cible arrive collée au bord inférieur du header. */
[id]{scroll-margin-top:calc(var(--header-h, 90px) + 16px);}
@media (max-width:640px){.section{padding:var(--sp-6) 0;}}
.section-head{max-width:640px; margin:0 0 var(--sp-6);}
/* Le titre de section tient sur UNE seule ligne. Les 640px du bloc sont une
   mesure de confort de lecture pour le paragraphe ; appliqués au h2, ils
   cassaient « Où intervenons-nous en Seine-et-Marne ? » en deux lignes. Le titre
   déborde donc jusqu'à la largeur du conteneur, et `white-space:nowrap` interdit
   le retour à la ligne. Sous 900px la place manque réellement : la règle est
   levée et le titre redevient un titre normal, sur plusieurs lignes. */
@media (min-width:901px){
  .section-head h2{max-width:none; white-space:nowrap;}
}
.section-head p{margin-top:var(--sp-3); color:var(--slate); font-size:1.05rem;}

/* Focus visibility */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible, select:focus-visible{
  outline:2px solid var(--cta);
  outline-offset:2px;
  border-radius:4px;
}

/* ============ BUTTONS ============ */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--sp-2);
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  padding:14px 26px;
  border-radius:var(--radius-md);
  border:1px solid transparent;
  cursor:pointer;
  text-decoration:none;
  transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease, transform 0.1s ease;
  white-space:nowrap;
}
.btn:active{transform:translateY(1px);}
.btn-primary{background:var(--cta); color:var(--white);}
.btn-primary:hover{background:var(--cta-hover);}
.btn-secondary{background:transparent; color:var(--navy); border-color:var(--slate);}
.btn-secondary:hover{background:var(--bg-soft);}
.btn-on-dark{background:var(--white); color:var(--navy);}
.btn-on-dark:hover{background:var(--bg-soft);}
.btn-ghost-on-dark{background:transparent; color:var(--white); border-color:rgba(247,249,251,0.35);}
.btn-ghost-on-dark:hover{border-color:var(--white);}
.btn-block{width:100%;}
.btn-lg{padding:17px 28px; font-size:1rem;}
.btn[disabled]{opacity:0.6; cursor:not-allowed;}

/* ============ HEADER ============ */
.site-header{
  position:sticky; top:0; z-index:50;
  background:rgba(246,248,250,0.94);
  backdrop-filter:blur(8px);
  /* Pas de bordure ici : chaque niveau porte la sienne (.header-top / .header-bottom). */
}
/* --- Niveau 1 : identité + contact --- */
.header-top{border-bottom:var(--border);}
.header-top-inner{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--sp-4);
  padding:16px var(--sp-4);
  max-width:var(--container); margin:0 auto;
}
.brand-block{display:flex; align-items:center; gap:var(--sp-4); flex-shrink:0;}
.brand{display:flex; align-items:center; text-decoration:none;}
/* Logo de marque : la hauteur pilote la taille, la largeur suit le ratio.
   Assez grand pour que la baseline « Enlèvement gratuit écoresponsable »
   intégrée à l'image reste lisible. */
.brand-mark{height:74px; width:auto; display:block;}
.brand-name{font-family:var(--font-display); font-weight:800; font-size:1.45rem; color:var(--navy);}
.brand-tagline{font-size:0.72rem; color:var(--slate); letter-spacing:0.01em;}
/* Filet vertical entre la marque et le logo institutionnel. */
.brand-divider{
  width:1px; align-self:stretch; min-height:44px;
  background:var(--bg-soft); flex-shrink:0;
}
.brand-logo{width:auto; flex-shrink:0;}

/* --- Niveau 2 : navigation --- */
.header-bottom{border-bottom:var(--border);}
.header-bottom .main-nav{
  max-width:var(--container); margin:0 auto;
  padding:0 var(--sp-4);
}
/* L'écart se resserre quand la largeur diminue : avec sept entrées en
   `white-space:nowrap`, un gap fixe de 48px faisait déborder la rangée entre
   900px (bascule vers le menu mobile) et ~1050px, poussant la dernière entrée
   hors de l'écran au lieu de la faire passer à la ligne. */
.header-bottom .main-nav ul{
  gap:clamp(var(--sp-3), 2.2vw, var(--sp-6));
  padding:12px 0;
  justify-content:space-between;
}

@media (max-width:900px){
  .header-top-inner{padding:12px var(--sp-4);}
  .brand-mark{height:52px;}
  .brand-name{font-size:1.25rem;}
  /* Le logo institutionnel reste affiché en mobile : il était auparavant masqué
     pour dégager la place du hamburger, mais il fait partie des repères de
     confiance et doit rester visible sur téléphone. La hauteur inline de
     l'image est écrasée pour qu'il tienne à côté de la marque. */
  .brand-block{gap:var(--sp-3); min-width:0;}
  .brand-logo{height:34px !important; min-width:0;}
  .brand-divider{min-height:32px;}
  .header-bottom{display:none;}
}
@media (max-width:560px){
  .brand-mark{height:46px;}
  .brand-block{gap:10px;}
  .brand-logo{height:28px !important;}
  .brand-divider{min-height:26px;}
}
@media (max-width:400px){
  .brand-mark{height:40px;}
  /* Sous 400px, la rangée n'a plus la largeur d'accueillir marque, filet, logo
     institutionnel, téléphone et hamburger : seul le filet est retiré. */
  .brand-divider{display:none;}
  .brand-block{gap:8px;}
  .brand-logo{height:24px !important;}
}

.main-nav{display:flex; align-items:center; gap:var(--sp-5);}
.main-nav ul{list-style:none; display:flex; gap:var(--sp-4); margin:0; padding:0;}
.main-nav a{
  text-decoration:none; color:var(--slate); font-weight:500; font-size:0.95rem;
  padding:6px 2px; border-bottom:2px solid transparent; transition:color 0.15s ease, border-color 0.15s ease;
  white-space:nowrap;
}
.main-nav a:hover{color:var(--navy); border-color:var(--cta);}

/* ---- Sous-menu déroulant des départements ----
   L'entrée parente reste dans le flux de la rangée ; le panneau est en
   `position:absolute` sous elle, de sorte que son ouverture ne déplace jamais
   les entrées voisines. Le `li` porte la position de référence.

   Le panneau est masqué par `visibility` + `opacity` plutôt que par
   `display:none` : cela autorise la transition d'ouverture, et surtout le
   navigateur peut alors donner le focus clavier aux liens qu'il contient dès
   que `:focus-within` le révèle. */
.main-nav .has-submenu{position:relative;}
/* `align-items` vaut `stretch` par défaut sur la rangée : le lien à chevron,
   passé en flex pour porter son icône, s'étirait alors sur toute la hauteur du
   `li` et sa ligne de texte ne tombait plus sur celle des entrées voisines.
   L'alignement de la rangée est donc explicité, et le lien reste `inline-flex`
   pour que son soulignement au survol s'arrête à la largeur du libellé. */
.main-nav > ul{align-items:center;}
.main-nav .has-submenu > a{display:inline-flex; align-items:center; gap:6px;}
.nav-chevron{transition:transform 0.15s ease; flex-shrink:0;}
.main-nav .has-submenu:hover > a .nav-chevron,
.main-nav .has-submenu:focus-within > a .nav-chevron{transform:rotate(180deg);}

/* L'entrée parente reste surlignée tant que son panneau est ouvert : sans cela
   le survol d'un lien du panneau éteignait le repère de l'entrée d'origine. */
.main-nav .has-submenu:hover > a,
.main-nav .has-submenu:focus-within > a{color:var(--navy); border-color:var(--cta);}

.main-nav .nav-submenu{
  position:absolute; top:100%; left:0; z-index:60;
  display:block; min-width:250px; padding:8px 0; margin:0; gap:0;
  background:var(--white); border:var(--border); border-top:2px solid var(--cta);
  border-radius:0 0 var(--radius-md) var(--radius-md);
  box-shadow:var(--shadow-md);
  opacity:0; visibility:hidden; transform:translateY(-4px);
  transition:opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
}
.main-nav .has-submenu:hover > .nav-submenu,
.main-nav .has-submenu:focus-within > .nav-submenu{
  opacity:1; visibility:visible; transform:translateY(0);
}
.main-nav .nav-submenu li{width:100%;}
.main-nav .nav-submenu a{
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  padding:11px 18px; border-bottom:none; border-left:2px solid transparent;
  color:var(--slate); font-size:0.95rem;
}
.main-nav .nav-submenu a:hover{
  background:var(--blue-light); color:var(--navy); border-color:var(--cta);
}
/* Le numéro de département sert de repère secondaire : il ne doit pas peser
   autant que le nom, qui reste l'élément qu'on lit en balayant la liste. */
.nav-dept-code{font-size:0.82rem; color:var(--slate); opacity:0.75; font-weight:600;}
.main-nav .nav-submenu a:hover .nav-dept-code{color:var(--navy); opacity:1;}

.header-actions{display:flex; align-items:center; gap:var(--sp-3); margin-left:var(--sp-4);}

/* Bloc téléphone navbar */
/* Même finition que le bloc du hero, en plus discret : le fond passe du bleu
   pâle — trop proche du fond du header pour s'en détacher — à un blanc
   légèrement dégradé posé sur une ombre à deux couches. */
.navbar-phone{
  position:relative;
  display:flex; align-items:center; gap:10px;
  text-decoration:none; padding:8px 16px 8px 10px;
  border-radius:var(--radius-md);
  background:linear-gradient(178deg, #FFFFFF 0%, #F7F8FC 100%);
  box-shadow:0 1px 1px rgba(2,2,50,0.06), 0 3px 8px rgba(2,2,50,0.10);
  flex-shrink:0;
  transition:box-shadow 0.22s ease;
}
.navbar-phone::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(2,2,50,0.07);
}
.navbar-phone:hover{
  box-shadow:0 2px 4px rgba(2,2,50,0.08), 0 6px 14px rgba(2,2,50,0.14);
}
.navbar-phone-icon{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, #E23A3A, #C41F1F);
  box-shadow:0 2px 6px rgba(196,31,31,0.30), inset 0 1px 0 rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
}
.navbar-phone-icon, .navbar-phone-text{position:relative; z-index:1;}
.navbar-phone-text{display:flex; flex-direction:column; line-height:1.25;}
.navbar-phone-label{font-size:0.72rem; color:var(--slate); font-weight:600;}
.navbar-phone-number{font-family:var(--font-display); font-size:1rem; font-weight:800; color:var(--phone-red); letter-spacing:0.01em; white-space:nowrap;}

.hamburger{
  display:none; background:none; border:1px solid var(--bg-soft); border-radius:var(--radius-sm);
  width:44px; height:44px; align-items:center; justify-content:center; cursor:pointer;
}
.hamburger span, .hamburger span::before, .hamburger span::after{
  content:''; display:block; width:20px; height:2px; background:var(--navy); position:relative; transition:0.2s ease;
}
.hamburger span::before{position:absolute; top:-6px;}
.hamburger span::after{position:absolute; top:6px;}
.hamburger[aria-expanded="true"] span{background:transparent;}
.hamburger[aria-expanded="true"] span::before{transform:rotate(45deg); top:0;}
.hamburger[aria-expanded="true"] span::after{transform:rotate(-45deg); top:0;}

.mobile-nav{
  display:none;
  /* Positionné sous le header, sur toute la hauteur restante.
     Les décalages sont déclarés un par un : un `inset:0` suivi d'un `top`
     laissait un conteneur de hauteur incohérente et le contenu débordait. */
  position:fixed;
  /* --header-h est mesurée au chargement par assets/site.js : la hauteur du
     header varie selon la taille du logo et la largeur d'écran.
     `height` explicite plutôt que `bottom:0` : le padding-bottom du body
     (réservé au CTA fixe) faussait la hauteur calculée et tronquait le menu. */
  top:var(--header-h, 69px); left:0; right:0;
  height:calc(100vh - var(--header-h, 69px));
  height:calc(100dvh - var(--header-h, 69px));
  z-index:40;
  background:var(--bg);
  /* Marge basse généreuse : le CTA fixe en bas d'écran recouvrirait
     autrement le dernier élément du menu. */
  padding:var(--sp-5) var(--sp-4) 96px;
  /* Défilement interne si le menu dépasse la hauteur d'écran. */
  overflow-y:auto;
  -webkit-overflow-scrolling:touch;
  overscroll-behavior:contain;
}
.mobile-nav.open{display:block;}
.mobile-nav-phone{
  display:flex; align-items:center; gap:12px;
  background:var(--navy); border-radius:var(--radius-md);
  padding:16px 18px; margin-bottom:var(--sp-3); text-decoration:none;
}
.mobile-nav-phone-icon{
  width:42px; height:42px; border-radius:50%; background:var(--phone-red); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.mobile-nav-phone-text{display:flex; flex-direction:column; line-height:1.3;}
.mobile-nav-phone-label{font-size:0.78rem; color:rgba(255,255,255,0.75); font-weight:600;}
.mobile-nav-phone-number{font-family:var(--font-display); font-size:1.2rem; font-weight:800; color:var(--phone-red-on-dark);}
.mobile-nav ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column;}
/* `display:flex` ci-dessus l'emporte sur le `display:none` de l'attribut
   `hidden` : sans cette règle, l'accordéon des départements reste ouvert en
   permanence puisque le JS ne fait que basculer `hidden`. */
.mobile-nav ul[hidden]{display:none;}
/* `.btn` est exclu : sans cela le bouton d'action héritait de `color:var(--navy)`
   et son texte devenait invisible sur son propre fond bleu. */
.mobile-nav a:not(.mobile-nav-phone):not(.btn){
  display:block; padding:var(--sp-4) 0; text-decoration:none; color:var(--navy);
  font-family:var(--font-display); font-weight:600; font-size:1.15rem; border-bottom:var(--border);
}
.mobile-nav .btn{margin-top:var(--sp-5);}

/* ---- Accordéon des départements en mobile ----
   Le lien parent et le bouton de dépliage sont séparés : au doigt, viser un
   chevron logé à l'intérieur d'un lien revient à ouvrir la page une fois sur
   deux. La rangée porte donc le trait de séparation, et le lien le perd. */
.mobile-nav .has-submenu > .mobile-nav-row{
  display:flex; align-items:center; justify-content:space-between;
  border-bottom:var(--border);
}
.mobile-nav .has-submenu > .mobile-nav-row > a{flex:1; border-bottom:none;}
.mobile-submenu-toggle{
  display:flex; align-items:center; justify-content:center;
  width:44px; height:44px; padding:0; flex-shrink:0;
  background:none; border:none; color:var(--navy); cursor:pointer;
}
.mobile-submenu-toggle .nav-chevron{width:16px; height:16px;}
.mobile-submenu-toggle[aria-expanded="true"] .nav-chevron{transform:rotate(180deg);}
.mobile-nav-submenu{padding-left:var(--sp-4) !important; background:var(--blue-light);}
/* Sélecteur aligné sur celui des liens de premier niveau, qu'il doit pouvoir
   emporter : ces entrées-ci sont secondaires et se lisent en retrait. */
.mobile-nav .mobile-nav-submenu a:not(.mobile-nav-phone):not(.btn){
  display:flex; align-items:baseline; justify-content:space-between; gap:var(--sp-3);
  padding:14px var(--sp-4) 14px 0; font-size:1rem; font-weight:500;
  border-bottom:1px solid rgba(var(--navy-rgb),0.08);
}
.mobile-nav-submenu li:last-child a{border-bottom:none !important;}

/* Le header à deux niveaux laisse la place au bloc téléphone jusqu'en mobile,
   où la navigation bascule dans le menu hamburger. */
@media (max-width:900px){
  .header-actions .navbar-phone{display:none;}
  .hamburger{display:flex;}
}

/* ============ HERO (image pleine largeur + overlay bleu) ============ */
.hero{
  position:relative;
  overflow:hidden;
  isolation:isolate;
  display:flex;
  align-items:center;
  min-height:640px;
}
@media (min-width:901px){
  .hero{min-height:min(86vh, 740px);}
}
.hero-media{position:absolute; inset:0; z-index:0;}
.hero-media img{width:100%; height:100%; object-fit:cover; object-position:center 55%;}
.hero-overlay{
  position:absolute; inset:0;
  background:linear-gradient(105deg,
    rgba(var(--navy-rgb),0.93) 0%,
    rgba(var(--navy-rgb),0.80) 38%,
    rgba(var(--navy-rgb),0.48) 75%,
    rgba(var(--navy-rgb),0.30) 100%);
}
.hero-content{position:relative; z-index:1; width:100%; min-width:0; padding:var(--sp-8) 0;}
.hero-copy{
  display:flex; flex-direction:column; justify-content:center;
  color:var(--white);
  max-width:600px;
}
/* La ligne de mentions déborde volontairement la largeur du discours pour
   tenir sur un seul rang ; elle reste dans la colonne gauche du Hero. */
@media (min-width:1025px){
  .hero-content--split .hero-reassurance{width:max-content; max-width:none;}
}
.hero-copy .eyebrow{margin-bottom:var(--sp-3); display:block; color:var(--accent-light);}

/* Badge de gratuité : l'argument décisif, en blanc plein sur le bleu du Hero. */
.hero-free-badge{
  display:inline-flex; align-items:center; align-self:flex-start;
  background:var(--white); color:var(--navy);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(0.95rem, 0.85rem + 0.4vw, 1.15rem);
  letter-spacing:0.01em; line-height:1.2;
  padding:11px 22px; border-radius:999px;
  margin-bottom:var(--sp-4);
  box-shadow:0 6px 20px rgba(2,1,60,0.28);
}
@media (max-width:480px){
  .hero-free-badge{padding:9px 18px;}
}
.hero h1{margin-bottom:var(--sp-4); color:var(--white);}
.hero-sub{font-size:1.08rem; color:rgba(255,255,255,0.86); margin-bottom:var(--sp-5); max-width:540px;}
/* Le passage en gras doit ressortir du texte semi-transparent qui l'entoure. */
.hero-sub strong{color:var(--white); font-weight:700;}

/* Ligne de repères locaux du Hero départemental.
   Nettement secondaire par rapport à l'accroche : plus petite et moins
   contrastée. La marge négative la remonte contre le paragraphe qui la précède,
   pour qu'elle se lise comme son prolongement et non comme un second
   paragraphe — l'écart avant le bloc téléphone est reporté sur elle. */
.hero-local-line{
  margin-top:calc(var(--sp-5) * -1 + 6px);
  margin-bottom:var(--sp-5);
  max-width:540px;
  font-size:0.92rem; line-height:1.55;
  color:rgba(255,255,255,0.68);
}
@media (max-width:480px){
  .hero-local-line{font-size:0.88rem;}
}

/* H1 départemental : le nom du département sur sa propre ligne.
   En blanc comme le reste du titre — le bleu clair de l'eyebrow (#A6A8FF)
   manquait de contraste sur l'overlay du Hero et faisait paraître la seconde
   ligne plus sombre que la première. La mise en avant vient du retour à la
   ligne, pas de la couleur. */
.h1-dept{color:var(--white);}

/* Filigrane départemental du Hero.
   Décoratif et volontairement presque invisible : il donne une profondeur
   locale au fond sans concurrencer le texte. `z-index:0` le place au-dessus de
   l'overlay mais sous le contenu (`.hero-content` est en z-index:1).
   Masqué sous 1024px, où le Hero passe en colonne unique et où le texte
   viendrait le recouvrir. */
.hero-dept-mark{
  position:absolute; right:-40px; bottom:-30px; z-index:0;
  width:340px; height:auto; opacity:0.09; pointer-events:none;
}
.hero-dept-mark path{fill:none; stroke:var(--white); stroke-width:3;}
@media (max-width:1024px){
  .hero-dept-mark{display:none;}
}
@media (max-width:640px){
  /* En largeur réduite, la coupure forcée du <br> tomberait au mauvais endroit :
     on la neutralise et la phrase se réorganise seule. L'espace insécable
     remplace le retour à la ligne pour que les deux membres restent séparés. */
  .hero h1 br{display:none;}
  .h1-dept::before{content:"\00a0";}
}

/* Ombre étagée en quatre couches : contact net près du bord, diffusion loin.
   C'est ce qui distingue un objet posé sur la photo d'un aplat qui en fait
   partie — une ombre unique et large donnait l'impression d'une incrustation. */
.hero-phone-cta{
  position:relative;
  display:flex; align-items:center; gap:14px;
  background:linear-gradient(178deg, #FFFFFF 0%, #F7F8FC 100%);
  border-radius:var(--radius-md);
  padding:14px 20px; margin-bottom:var(--sp-4); width:fit-content;
  box-shadow:
    0 1px 1px rgba(2,2,50,0.10),
    0 4px 8px rgba(2,2,50,0.12),
    0 12px 22px rgba(2,2,50,0.20),
    0 28px 50px rgba(2,2,50,0.28);
  transition:transform 0.22s cubic-bezier(0.2,0.7,0.3,1), box-shadow 0.22s ease;
}
/* Rehaut blanc sur l'arête haute + liseré très pâle : la tranche éclairée qui
   vend le relief. En pseudo-élément pour ne pas manger le padding du bloc. */
.hero-phone-cta::before{
  content:''; position:absolute; inset:0; border-radius:inherit; pointer-events:none;
  box-shadow:inset 0 1px 0 rgba(255,255,255,0.9), inset 0 0 0 1px rgba(2,2,50,0.05);
}
.hero-phone-cta:hover{
  transform:translateY(-3px);
  box-shadow:
    0 1px 1px rgba(2,2,50,0.10),
    0 6px 12px rgba(2,2,50,0.14),
    0 18px 32px rgba(2,2,50,0.24),
    0 38px 64px rgba(2,2,50,0.32);
}
.hero-phone-icon{
  width:44px; height:44px; border-radius:50%; flex-shrink:0;
  background:linear-gradient(155deg, #E23A3A, #C41F1F);
  box-shadow:0 3px 8px rgba(196,31,31,0.34), inset 0 1px 0 rgba(255,255,255,0.28);
  display:flex; align-items:center; justify-content:center;
}
.hero-phone-icon, .hero-phone-text{position:relative; z-index:1;}
.hero-phone-text{display:flex; flex-direction:column; line-height:1.3;}
.hero-phone-label{font-size:0.82rem; color:var(--slate); font-weight:600;}
.hero-phone-number{font-family:var(--font-display); font-size:1.35rem; font-weight:800; color:var(--phone-red); letter-spacing:0.01em;}

.hero-ctas{display:flex; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-5);}
/* Quatre mentions : espacement resserré pour qu'elles tiennent sur une ligne
   en desktop, tout en restant lisibles. */
.hero-reassurance{display:flex; flex-wrap:wrap; gap:10px var(--sp-3);}
.reassurance-item{
  display:flex; align-items:center; gap:7px;
  font-size:0.85rem; color:rgba(255,255,255,0.85); font-weight:500;
  white-space:nowrap;
}
.reassurance-item svg{flex-shrink:0;}

/* --- Formulaire de rappel dans le Hero --- */
/* Le Hero passe en deux colonnes quand la carte de rappel est présente :
   le discours à gauche, l'action à droite. Une seule colonne en dessous de 1024px. */
.hero-content--split .hero-copy{max-width:none;}
/* Césure en 8/4 sur une grille de 12 : la frontière entre le discours et la
   carte tombe toujours au tiers droit du conteneur, quelle que soit la largeur
   d'écran. Une largeur fixe en pixels la déplaçait à chaque redimensionnement,
   si bien qu'aucune bande inférieure ne pouvait s'aligner dessus. */
.hero-split{
  display:grid; grid-template-columns:minmax(0,8fr) minmax(320px,4fr);
  gap:var(--sp-6); align-items:center;
}
/* Le portrait du téléconseiller déborde de 26px à droite de la carte : sans
   cette permission, la colonne de grille le rognerait. */
.hero-content--split{overflow:visible;}

/* Carte de rappel du Hero.

   LARGEUR DE RÉFÉRENCE : 392 px. Le portrait rond du téléconseiller déborde
   sur la droite ; c'est la carte qui est mesurée, pas le débordement. La grille
   du Hero réserve donc la colonne, et `overflow:visible` laisse passer le rond.

   Le bloc englobe la carte blanche ET le parcours en trois temps, ce dernier
   posé sous elle sur le fond sombre — comme dans la maquette de référence. */
.callback-block{
  display:flex; flex-direction:column; gap:22px;
  width:100%; max-width:392px; margin-left:auto;
}
/* La carte n'est plus rendue que par `callbackCard()`, donc toujours dans un
   `.callback-block`. Le doublet qui existait ici — une règle de base pour la
   carte d'estimation du rachat, une surcharge pour le Hero — n'a plus lieu
   d'être : la page rachat porte la même carte que les autres. */
.callback-card{
  position:relative; overflow:visible;
  background:var(--white); border-radius:24px;
  padding:20px 22px 22px; box-shadow:0 24px 60px rgba(2,1,60,0.34);
}

/* --- Ligne du haut : marque à gauche, disponibilité à droite --- */
/* Les deux pastilles se lisent avant tout le reste : à qui l'on parle, et si
   quelqu'un répond. Elles restent sur une seule ligne — `flex-wrap` les
   empilerait proprement si un libellé venait à s'allonger. */
.callback-top{
  display:flex; align-items:center; justify-content:space-between;
  gap:10px; flex-wrap:wrap; margin-bottom:18px;
}
/* Le logo est posé nu sur le blanc de la carte, sans pastille : le bandeau
   bleu qui l'entourait doublait le bleu du bouton et écrasait le logo, dont
   les deux couleurs de marque doivent rester lisibles. */
.callback-brand{
  display:inline-flex; align-items:center; line-height:0;
}
.callback-brand img{
  display:block; height:30px; width:auto; flex:0 0 auto;
}
/* Le vert n'apparaît que sur cette pastille et sur les messages de validation :
   c'est ce qui lui garde sa valeur de signal. */
/* Deux états, portés par `data-state` : ouvert de 7h à 21h, fermé sinon. La
   couleur passe par une variable pour que la pastille, son halo et le texte
   changent ensemble — trois valeurs écrites séparément finiraient par diverger.

   CONVENTION DE COULEUR DU SITE, arrêtée par le client :
     vert   (--ok, #0B7A3B)  service disponible
     orange (#C2410C)        service momentanément indisponible, délai plus long
     rouge                   PROSCRIT ici — il signalerait une erreur ou une panne

   Deux raisons à l'orange plutôt qu'au rouge. La première est ce qu'il dit :
   le service n'est pas en panne, il est fermé pour la nuit. La seconde est que
   le rouge `--phone-red` est déjà, partout sur le site, la couleur du
   TÉLÉPHONE — pastille d'appel de la navbar, du menu mobile et du Hero. Le
   reprendre ici ferait porter au même rouge deux sens opposés, « appelez » et
   « personne ne répond », à quelques centimètres l'un de l'autre.

   #C2410C est assez soutenu pour tenir le contraste AA sur le blanc. */
.callback-avail-tag{
  --cb-state:var(--ok); --cb-state-rgb:11,122,59;
  display:inline-flex; align-items:center; gap:6px;
  font-size:0.64rem; font-weight:800; letter-spacing:0.04em;
  color:var(--cb-state); line-height:1; white-space:nowrap;
}
.callback-avail-tag[data-state="closed"]{
  --cb-state:#C2410C; --cb-state-rgb:194,65,12;
}
/* Clignotement lent : 3,2 s par cycle, en fondu et non en tout-ou-rien. Il
   signale une présence humaine ; plus rapide, il deviendrait une alarme et
   tirerait l'œil au détriment du bouton. */
.callback-avail-dot{
  width:8px; height:8px; border-radius:50%; background:var(--cb-state);
  flex:0 0 auto;
  box-shadow:0 0 0 3px rgba(var(--cb-state-rgb),0.16);
  animation:cbPulse 3.2s ease-in-out infinite;
}
@keyframes cbPulse{
  0%,100%{opacity:1; box-shadow:0 0 0 3px rgba(var(--cb-state-rgb),0.16);}
  50%{opacity:0.35; box-shadow:0 0 0 7px rgba(var(--cb-state-rgb),0.03);}
}
@media (prefers-reduced-motion:reduce){
  .callback-avail-dot{animation:none;}
}

/* --- Portrait du téléconseiller --- */
/* Rond parfait, posé en absolu à cheval sur le bord droit de la carte. Il est
   décoratif (aria-hidden côté rendu) : le texte de la carte se suffit à
   lui-même, et un lecteur d'écran n'a rien à faire d'un portrait d'ambiance.

   `--cb-portrait-pos` pilote le cadrage : la photo source montre le
   téléconseiller de trois quarts, le sujet n'est pas au centre géométrique du
   fichier. Ajuster cette seule variable suffit à recentrer le visage. */
/* DÉBORDEMENT LIMITÉ À 14px, ET C'EST UNE CONTRAINTE, PAS UN GOÛT.
   `.hero` porte `overflow:hidden` (il masque sa photo de fond) et le
   `.container` ne laisse que 24px de marge latérale. Ce qui dépasse à droite,
   ce n'est pas le rond seul mais l'anneau qui l'entoure : 14px de décalage,
   plus les 7px d'`inset` de `::before` et ses 2,5px de bordure, soit 23,5px —
   juste dans la marge. Augmenter l'un des trois fait rogner l'anneau par le
   bord du Hero dès que la grille atteint la largeur maximale du conteneur. */
.callback-face{
  /* Le fichier est déjà cadré carré par scripts/build-teleconseiller-photo.ps1,
     et centré : `object-fit:cover` n'a donc plus rien à rogner et cette valeur
     reste neutre. Elle est conservée comme réglage fin — la modifier décale le
     sujet dans le disque sans avoir à relancer le script. */
  --cb-portrait-pos:50% 50%;
  position:absolute; top:52px; right:-14px;
  width:152px; height:152px; border-radius:50%;
  padding:4px; background:var(--white);
  box-shadow:0 14px 32px rgba(2,1,60,0.22);
  z-index:2;
}
/* L'anneau bleu n'entoure qu'une partie du rond : un cercle complet aurait
   l'air d'un cadre, l'arc donne la profondeur voulue par la référence. */
.callback-face::before{
  content:""; position:absolute; inset:-7px; border-radius:50%;
  border:2.5px solid var(--navy); border-right-color:transparent;
  border-bottom-color:rgba(var(--navy-rgb),0.25);
  transform:rotate(-24deg);
}
.callback-face img{
  display:block; width:100%; height:100%; border-radius:50%;
  object-fit:cover; object-position:var(--cb-portrait-pos);
}

/* --- Titre --- */
/* Le titre s'arrête avant le portrait : sans ce retrait, sa deuxième ligne
   passerait dessous. La carte sans photo (`--noface`) le reprend en pleine
   largeur. */
.callback-head{margin-bottom:20px; padding-right:112px;}
.callback-card--noface .callback-head{padding-right:0;}
.callback-title{
  font-family:var(--font-display); font-weight:800; font-size:1.42rem;
  color:var(--navy); line-height:1.16; letter-spacing:-0.02em;
  margin-bottom:10px;
}
.callback-intro{
  font-size:0.815rem; color:var(--slate); margin:0; line-height:1.45;
}

/* --- Champs --- */
/* Le libellé est DANS le champ, au-dessus du placeholder. Il reste lisible
   pendant la saisie — ce que le placeholder seul ne permet pas — sans coûter la
   ligne d'un label séparé, ce qui tient la carte dans sa hauteur de référence.
   La bordure entoure donc l'ensemble libellé + saisie, et non l'`input`. */
.callback-field{display:flex; flex-direction:column; gap:5px; margin-bottom:11px;}
.callback-field label{
  display:block; font-size:0.735rem; font-weight:700; color:var(--ink-deep);
  letter-spacing:-0.005em; line-height:1.2; margin-bottom:3px; cursor:pointer;
}

.callback-input{
  display:flex; align-items:center; gap:12px;
  padding:11px 14px;
  border:1.5px solid #E7EAF2; border-radius:14px; background:var(--white);
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.callback-input:hover{border-color:#D2D7E5;}
.callback-input:focus-within{
  border-color:var(--navy);
  box-shadow:0 0 0 4px rgba(var(--navy-rgb),0.12);
}
/* L'icône est une pastille grise calée sur la hauteur des deux lignes. */
.callback-input-icon{
  flex:0 0 auto; display:grid; place-items:center;
  width:38px; height:38px; border-radius:10px;
  background:#F1F4FA; color:#8C99AC; line-height:0;
  transition:color 0.15s ease, background 0.15s ease;
}
/* L'icône hérite de la couleur du conteneur pour virer au bleu au focus : le
   `stroke` écrit dans le SVG par templates/icons.js est donc neutralisé. */
.callback-input-icon svg path,
.callback-input-icon svg circle,
.callback-input-icon svg rect{stroke:currentColor;}
.callback-input:focus-within .callback-input-icon{
  color:var(--navy); background:rgba(var(--navy-rgb),0.09);
}
.callback-input-body{flex:1 1 auto; min-width:0;}
.callback-field input{
  display:block; font-family:var(--font-body); font-size:0.86rem; font-weight:500;
  padding:0; min-height:0; border:0; background:transparent; color:var(--ink);
  min-width:0; width:100%; line-height:1.3;
}
.callback-field input::placeholder{color:#A3ADBF; font-weight:400;}
.callback-field input:focus{outline:none;}
/* La zone d'erreur ne réserve sa ligne que lorsqu'elle porte un message :
   deux lignes vides sous les champs coûteraient 24px pour rien. */
.callback-field .field-error{font-size:0.75rem; color:var(--warn); line-height:1.3;}
.callback-field .field-error:empty{display:none;}
/* La bordure étant portée par le conteneur et non par l'`input`, c'est lui que
   l'erreur colore — sans quoi le signal ne serait visible nulle part. */
.callback-field.has-error .callback-input{border-color:var(--warn);}

/* --- Bouton --- */
/* Le dégradé et le liseré interne clair donnent au bouton une épaisseur que
   l'aplat n'avait pas : c'est l'élément de conversion, il doit être le plus
   présent de la carte après le titre. */
.callback-card .callback-submit{
  display:flex; align-items:center; justify-content:center; gap:10px;
  width:100%; margin-top:9px; min-height:52px;
  font-family:var(--font-display); font-weight:800; font-size:0.97rem;
  letter-spacing:-0.008em; padding:14px 18px; border:0; border-radius:14px;
  background:linear-gradient(180deg,#0505A2 0%, var(--navy) 52%, var(--navy-dark) 100%);
  color:var(--white);
  box-shadow:0 6px 18px rgba(var(--navy-rgb),0.3), inset 0 1px 0 rgba(255,255,255,0.17);
  transition:transform 0.16s ease, box-shadow 0.16s ease, filter 0.16s ease;
}
.callback-card .callback-submit:hover{
  filter:brightness(1.08); transform:translateY(-1px);
  box-shadow:0 11px 26px rgba(var(--navy-rgb),0.36), inset 0 1px 0 rgba(255,255,255,0.22);
}
.callback-card .callback-submit:active{transform:translateY(0);}
/* L'icône du bouton ne doit pas se décoller du texte lors du retour à la ligne
   sur les écrans très étroits. */
.callback-submit svg{flex:0 0 auto;}
@media (prefers-reduced-motion:reduce){
  .callback-card .callback-submit{transition:none;}
  .callback-card .callback-submit:hover{transform:none;}
}

/* --- Parcours en trois temps --- */
/* Posé SOUS la carte blanche, sur le fond sombre du Hero : il répond à « que
   se passe-t-il après le clic ? » sans alourdir le formulaire lui-même.

   POURQUOI PAS TROIS COLONNES ÉGALES. `repeat(3,1fr)` donnait à chaque étape
   la même largeur, alors que les trois libellés sont de longueurs très
   inégales : « Nous vous rappelons » est nettement plus court que ses voisins.
   Le surplus de sa colonne s'accumulait donc à sa droite, creusant un vide
   entre le 02 et le 03 pendant que le 01 et le 03 remplissaient la leur.

   Chaque étape prend maintenant la largeur de son propre contenu, et c'est
   `space-between` qui distribue le reste — le blanc se répartit entre les
   groupes au lieu de se loger tout entier dans le plus court. */
.callback-steps{
  display:flex; justify-content:space-between; align-items:flex-start;
  gap:14px; list-style:none; margin:0; padding:0;
}
/* L'icône est à gauche, le numéro et le libellé empilés à sa droite : c'est la
   disposition de la référence, et elle tient sur trois colonnes de ~120 px là
   où une pile verticale aurait doublé la hauteur de la bande. */
.callback-steps .cb-step{
  display:grid; grid-template-columns:auto auto;
  align-items:center; column-gap:9px; row-gap:2px;
  flex:0 0 auto;
}
.cb-step-icon{
  grid-row:1 / span 2; line-height:0; display:block; color:#7FA8FF;
}
.cb-step-icon svg{display:block; width:22px; height:22px;}
.cb-step-num{
  font-family:var(--font-display); font-weight:800; font-size:0.88rem;
  color:var(--white); line-height:1; letter-spacing:-0.01em;
}
/* Le libellé se coupe UNIQUEMENT sur le <br> écrit dans data/site.js : sans
   `nowrap`, une largeur juste un peu trop étroite provoquerait une césure
   supplémentaire qui rallongerait l'étape d'une ligne et désalignerait la
   bande. Les deux lignes voulues restent, la troisième est interdite. */
.cb-step-label{
  font-size:0.675rem; font-weight:500; line-height:1.3;
  color:rgba(255,255,255,0.78); white-space:nowrap;
}
.cb-step-label br{display:block;}
.callback-status{
  display:none; align-items:center; gap:10px; padding:12px var(--sp-3);
  border-radius:var(--radius-sm); font-size:0.86rem; margin-bottom:var(--sp-3);
}
.callback-status.show{display:flex;}
.callback-status.success{background:#E3F2E8; color:#1E5631;}
.callback-status.error{background:#FCEFD9; color:#7A4A05;}
.callback-status.loading{background:var(--bg-soft); color:var(--slate);}

/* Une seule colonne : le bloc n'est plus poussé à droite, il se centre. Le
   portrait cesse de déborder — hors de la grille en deux colonnes, un rond qui
   dépasse à droite se ferait rogner par le bord de l'écran. */
@media (max-width:1024px){
  .hero-split{grid-template-columns:1fr; gap:var(--sp-6);}
  .callback-block{max-width:420px; margin-left:0;}
  .callback-face{right:-8px;}
}

/* Sous 480px, le portrait rentre entièrement dans la carte et rétrécit : à
   cette largeur, un rond de 152 px à cheval sur le bord mangerait la moitié du
   titre. Le retrait réservé au titre suit la même réduction. */
@media (max-width:480px){
  .callback-card{padding:18px 16px 18px;}
  .callback-face{width:112px; height:112px; right:8px; top:46px;}
  /* 112px de portrait + 8px de décalage droit, moins les 16px de padding de la
     carte : 104px, plus 8px de respiration pour que l'anneau ne touche pas le
     titre. Un retrait plus court laissait la fin de la première ligne passer
     sous le rond. */
  .callback-head{padding-right:112px;}
  .callback-title{font-size:1.24rem;}
  .cb-step-label{font-size:0.635rem;}
  .cb-step{column-gap:7px;}
}

/* Sous 380px, les trois étapes ne tiennent plus côte à côte avec leur icône :
   celle-ci passe au-dessus et chaque étape se centre sur sa propre colonne.
   La bande redevient une grille en trois parts égales — à cette largeur les
   libellés sont centrés et empilés, le déséquilibre qui motivait le flex ne
   se produit plus. */
@media (max-width:380px){
  .callback-steps{
    display:grid; grid-template-columns:repeat(3,1fr); gap:8px;
  }
  .callback-steps .cb-step{
    grid-template-columns:1fr; justify-items:center; text-align:center;
    row-gap:3px;
  }
  .cb-step-icon{grid-row:auto;}
  /* Le libellé peut de nouveau se replier : sur trois colonnes étroites, la
     césure automatique vaut mieux qu'un débordement. */
  .cb-step-label{white-space:normal;}
}

.hero-badge{
  position:absolute; z-index:2; right:var(--sp-4); bottom:var(--sp-4);
  display:flex; align-items:center; gap:8px;
  background:rgba(var(--navy-rgb),0.55); backdrop-filter:blur(6px);
  border:1px solid rgba(255,255,255,0.25); border-radius:999px;
  padding:9px 16px; color:var(--white);
  font-family:var(--font-display); font-weight:600; font-size:0.85rem;
}
.hero-badge .dot{width:7px; height:7px; border-radius:50%; background:#4ADE80; flex-shrink:0;}

/* --- Badge animé : zone et délai suivent l'heure du visiteur --- */
/* Même pilule que le badge statique : seule la disposition interne change,
   pour loger la ligne de délai sous la ligne principale. */
.hero-badge--live{flex-direction:column; align-items:flex-start; gap:2px; padding:10px 18px;}
.hero-badge-line{display:flex; align-items:center; gap:8px;}
.hero-badge-time{
  /* Aligné sur le titre : largeur du point plus l'écart qui le sépare du texte. */
  padding-left:15px;
  font-weight:500; font-size:0.8rem; color:rgba(255,255,255,0.82);
}
.hero-badge-time strong{font-weight:700; color:var(--white);}

/* Tonalités du point. Les clés viennent de data/intervention-periods.js ;
   les teintes restent dans la gamme du site — soutenues mais non fluorescentes,
   lisibles sur le voile sombre du Hero. */
.hero-badge .dot[data-tone="green"]{background:#4ADE80;}
.hero-badge .dot[data-tone="green-light"]{background:#A3E635;}
.hero-badge .dot[data-tone="amber"]{background:#FBBF24;}
.hero-badge .dot[data-tone="night"]{background:#F0663F;}

/* Présence discrète : une respiration lente et de faible amplitude, sans
   changement d'échelle ni halo. Volontairement pas un clignotement ni une
   pulsation — le point doit rester lisible comme un simple témoin allumé. */
@keyframes badge-dot-breathe{
  0%, 100%{opacity:1;}
  50%{opacity:0.72;}
}
.hero-badge--live .dot{animation:badge-dot-breathe 4.5s ease-in-out infinite;}

@media (prefers-reduced-motion: reduce){
  .hero-badge--live .dot{animation:none;}
}

@media (max-width:900px){
  .hero{min-height:0;}
  .hero-content{padding:var(--sp-7) 0;}
  .hero-copy{max-width:none;}
  .hero-phone-cta{width:100%;}
  .hero-badge{display:none;}
}
@media (max-width:480px){
  .hero-content{padding:var(--sp-6) 0;}
}

/* ============ CHIFFRES CLÉS ============ */
/* Fond gris clair entre la bande de logos (blanche) et le bandeau de
   réassurance (bleu pâle) : les trois bandes successives se distinguent sans
   qu'aucune bordure ne soit nécessaire. */
.key-figures{background:var(--bg);}
.kf-grid{
  display:grid; grid-template-columns:repeat(4,1fr);
  padding:var(--sp-5) 0;
}
.kf-item{position:relative; text-align:center; padding:4px var(--sp-3);}

/* Séparateur vertical entre deux blocs, porté par le bloc de droite pour
   qu'aucun trait ne dépasse aux extrémités de la bande. */
.kf-item + .kf-item::before{
  content:""; position:absolute; left:0; top:6px; bottom:6px;
  width:1px; background:var(--bg-soft); transform-origin:top center;
}

.kf-value{
  display:block;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.6rem,3.2vw,2.1rem); line-height:1.1;
  letter-spacing:-0.02em; color:var(--navy);
  font-variant-numeric:tabular-nums;
}
/* Repère textuel (« Paiement instantané », « Centre agréé VHU ») : même
   famille, même graisse et même couleur qu'un chiffre, mais plus petit et
   interligne resserré — à la taille d'un nombre de deux caractères, un intitulé
   de deux mots occuperait deux lignes pleines et déséquilibrerait la bande.
   `text-wrap:balance` répartit les mots quand le repli a lieu. */
.kf-value--text{
  font-size:clamp(1.05rem,1.9vw,1.3rem); line-height:1.25;
  letter-spacing:-0.01em; text-wrap:balance;
}
.kf-label{
  display:block; margin-top:6px;
  font-size:0.86rem; color:var(--slate); text-wrap:balance;
}

/* « 7j/7 » accolé au délai : pastille discrète, jamais plus haute que le chiffre. */
.kf-chip{
  display:inline-block; margin-left:7px; vertical-align:middle;
  font-family:var(--font-display); font-weight:800; font-size:0.62em;
  letter-spacing:0.02em; color:var(--navy);
  background:var(--blue-light); border-radius:999px; padding:0.22em 0.6em;
}

/* --- Animation d'entrée ---
   L'état masqué n'est appliqué que si le script a pu poser .kf-armed : sans
   JavaScript la bande reste visible. .kf-in déclenche la montée en cascade. */
.kf-grid.kf-armed .kf-item{opacity:0;}
.kf-grid.kf-armed .kf-item + .kf-item::before{transform:scaleY(0);}
.kf-grid.kf-in .kf-item{
  animation:kfRise 0.62s cubic-bezier(0.2,0.7,0.3,1) forwards;
  animation-delay:calc(var(--kf-i) * 110ms);
}
.kf-grid.kf-in .kf-item + .kf-item::before{
  animation:kfLine 0.5s ease forwards;
  animation-delay:calc(var(--kf-i) * 110ms + 120ms);
}
@keyframes kfRise{
  from{opacity:0; transform:translateY(14px);}
  to{opacity:1; transform:translateY(0);}
}
@keyframes kfLine{from{transform:scaleY(0);} to{transform:scaleY(1);}}

@media (max-width:820px){
  .kf-grid{grid-template-columns:repeat(2,1fr); row-gap:var(--sp-4);}
  .kf-item:nth-child(3)::before{display:none;}
}
@media (max-width:430px){
  .kf-grid{grid-template-columns:1fr; row-gap:var(--sp-4);}
  .kf-item::before{display:none;}
}
@media (prefers-reduced-motion:reduce){
  .kf-grid.kf-armed .kf-item{opacity:1;}
  .kf-grid.kf-armed .kf-item + .kf-item::before{transform:scaleY(1);}
  .kf-grid .kf-item, .kf-grid .kf-item::before{animation:none;}
}


/* ── Bande de repères, variante /rachat-epave ───────────────────────────── */

/* La bande générique (`.key-figures`, fond --bg, padding --sp-5) reste celle de
   la homepage : rien ci-dessous ne s'y applique. Sur /rachat-epave elle tombait
   entre la carte de valeur et le configurateur — deux blocs pleins — en ne
   faisant que 137 px sur un fond identique à celui de ses voisines. Elle y
   creusait un vide au lieu de rythmer.

   Le traitement repris est celui de `.geo-figures` des pages départementales :
   fond lavande, chiffres plus grands, respiration verticale. Les DONNÉES sont
   inchangées — ce sont les quatre repères de la page, pas ceux du 77. */
.key-figures--bb{
  background:var(--blue-light);
  border-top:var(--border); border-bottom:var(--border);
}
.key-figures--bb .kf-grid{padding:var(--sp-6) 0;}
/* Séparateurs plus lisibles : --bg-soft se confondait avec le fond lavande. */
.key-figures--bb .kf-item + .kf-item::before{background:rgba(3,3,146,0.14);}
/* Échelle de `.geo-figure b`, la référence visuelle demandée. */
.key-figures--bb .kf-value{font-size:clamp(1.75rem,3.4vw,2.35rem);}
.key-figures--bb .kf-value--text{font-size:clamp(1.15rem,2vw,1.45rem);}
.key-figures--bb .kf-label{margin-top:8px; font-size:0.88rem;}
/* La pastille --blue-light disparaîtrait sur un fond --blue-light. */
.key-figures--bb .kf-chip{background:var(--white);}

@media (max-width:820px){
  .key-figures--bb .kf-grid{padding:var(--sp-5) 0;}
}
/* Sous 430 px, la bande générique passe à UNE colonne : avec les chiffres
   agrandis, les quatre repères empilés donnaient 400 px de haut, à rebours
   d'une bande qui doit rester compacte. Deux colonnes sont tenables — les
   deux libellés longs se répartissent déjà sur deux lignes en 2 colonnes. */
@media (max-width:430px){
  .key-figures--bb .kf-grid{grid-template-columns:repeat(2,1fr); row-gap:var(--sp-4);}
  .key-figures--bb .kf-item:nth-child(odd)::before{display:none;}
  .key-figures--bb .kf-item:nth-child(n+3)::before{display:none;}
  .key-figures--bb .kf-value{font-size:1.5rem;}
  .key-figures--bb .kf-value--text{font-size:1.02rem;}
  .key-figures--bb .kf-label{font-size:0.8rem;}
}

/* ============ TRUST STRIP ============ */
.trust-strip{background:var(--blue-light);}
.trust-grid{
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-5);
  padding:var(--sp-6) 0;
}
.trust-item{display:flex; gap:var(--sp-3); align-items:flex-start;}
.trust-icon{
  width:48px; height:48px; border-radius:50%; background:var(--white); box-shadow:var(--shadow-sm);
  display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
/* Intitulés de réassurance.
   Élément non-heading : ce sont des étiquettes, pas des sections du document —
   rien ne leur est subordonné. En <h3> ils créaient quatre titres de niveau 3
   identiques sur les neuf pages, collés aux quatre titres des étapes du
   processus, soit huit <h3> consécutifs sans <h2> parent.
   `font-family` et `font-weight` sont explicites : le navigateur et les styles
   globaux les donnaient à <h3>, pas à <p>. Sans eux, le rendu changerait. */
.trust-item .trust-title{
  font-family:var(--font-display); font-weight:600; color:var(--navy);
  line-height:1.2; font-size:1rem; margin-bottom:4px;
}
.trust-item p{font-size:0.9rem; color:var(--slate);}
@media (max-width:900px){.trust-grid{grid-template-columns:repeat(2,1fr);}}
@media (max-width:560px){.trust-grid{grid-template-columns:1fr;}}

/* ============ SERVICE PRINCIPAL ============ */
/* `stretch` plutôt que `start` : les deux colonnes prennent la même hauteur,
   ce qui permet au rappel légal de descendre jusqu'au bas du bloc documents
   et d'aligner les deux pieds de colonne. */
.service-layout{display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-8); align-items:stretch;}
/* La colonne gauche devient une pile verticale : c'est ce qui donne au
   dernier enfant un `margin-top:auto` exploitable. */
.service-layout > div:first-child{display:flex; flex-direction:column;}
.situations-list{list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3);}
.situations-list li{
  display:flex; gap:var(--sp-3); align-items:flex-start; font-size:0.98rem; color:var(--ink);
}
.situations-list svg{flex-shrink:0; margin-top:3px;}
.service-note{
  margin-top:var(--sp-5); padding:var(--sp-4); background:var(--bg-soft); border-radius:var(--radius-md);
  font-size:0.9rem; color:var(--slate);
}

/* Rappel réglementaire : donnée légale publique, traitée en note sobre
   plutôt qu'en alerte agressive. Placé sous la liste des situations, il
   répond au visiteur qui hésite encore à faire enlever son véhicule.
   `flex:1` lui fait absorber la hauteur restante de la colonne, de sorte que
   son bas s'aligne sur celui du bloc « documents à prévoir » d'en face. */
.legal-card{
  margin-top:var(--sp-4);
  flex:1; display:flex; flex-direction:column;
  background:#FCF6E8; border:1px solid #E8D9B4;
  border-radius:var(--radius-lg); padding:var(--sp-5);
}
.legal-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:32px; height:32px; margin-bottom:var(--sp-3);
  background:var(--warn); color:var(--white); border-radius:var(--radius-sm);
}
.legal-mark svg{display:block;}
.legal-title{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:#6B4A12; line-height:1.3; margin-bottom:10px;
}
.legal-text{font-size:0.9rem; color:#6B4A12; line-height:1.6;}
/* La carte étant étirée, la source se cale en bas plutôt que de rester
   collée au texte avec un vide sous elle. */
.legal-source{
  margin-top:auto; padding-top:var(--sp-4);
  font-size:0.78rem; color:#8A6A32; font-style:italic;
}

/* Les cartes occupent la moitié droite de .service-layout : 4 colonnes y
   laissaient ~130px par carte et cassaient les titres mot à mot. 2 colonnes
   donnent une largeur lisible sans changer la composition de la section. */
.card-grid{display:grid; grid-template-columns:repeat(2,1fr); gap:var(--sp-4);}
.service-card{
  background:var(--white); border:var(--border); border-radius:var(--radius-md);
  padding:var(--sp-4); box-shadow:var(--shadow-sm);
}
.service-card .card-icon{
  width:40px; height:40px; border-radius:var(--radius-sm); background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-3);
}
.service-card h3{margin-bottom:8px; font-size:1.02rem; overflow-wrap:break-word;}
.service-card p{font-size:0.9rem; color:var(--slate);}

@media (max-width:900px){
  .service-layout{grid-template-columns:1fr;}
  /* En colonne unique il n'y a plus de voisin sur lequel s'aligner : la carte
     reprend une hauteur dictée par son contenu. */
  .legal-card{flex:none;}
  .legal-source{margin-top:0;}
}
@media (max-width:560px){.card-grid{grid-template-columns:1fr;}}

/* --- Bandeau gratuité --- */
/* La gratuité est l'information la plus décisive pour le visiteur : elle est
   traitée en bandeau bleu pleine largeur pour ne pas passer inaperçue. */
.free-banner{
  display:flex; gap:var(--sp-4); align-items:flex-start;
  background:var(--navy); color:var(--white);
  border-radius:var(--radius-lg); padding:var(--sp-4) var(--sp-5);
  margin-top:var(--sp-4);
}
.free-banner-badge{
  flex-shrink:0; align-self:center;
  font-family:var(--font-display); font-weight:800; font-size:0.78rem;
  letter-spacing:0.06em; text-transform:uppercase;
  background:var(--white); color:var(--navy);
  border-radius:999px; padding:7px 15px;
}
.free-banner-title{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem;
  color:var(--white); margin-bottom:5px;
}
.free-banner-text{font-size:0.88rem; color:rgba(255,255,255,0.82); line-height:1.55;}

/* --- Documents à prévoir --- */
.docs-block{
  margin-top:var(--sp-4); padding:var(--sp-4) var(--sp-5);
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
}
.docs-title{
  font-family:var(--font-display); font-weight:700; font-size:0.98rem;
  color:var(--navy); margin-bottom:var(--sp-3);
}
.docs-list{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.docs-list li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:0.88rem; color:var(--ink); line-height:1.5;
}
.docs-list svg{flex-shrink:0; margin-top:3px;}
.docs-link{display:block; margin-top:2px; color:var(--navy); text-decoration:underline; text-underline-offset:2px;}
.docs-link:hover{text-decoration:none;}
.docs-note{
  margin-top:var(--sp-3); padding-top:var(--sp-3); border-top:var(--border);
  font-size:0.82rem; color:var(--slate); line-height:1.5;
}

@media (max-width:560px){
  .free-banner{flex-direction:column; gap:var(--sp-3); padding:var(--sp-4);}
  .free-banner-badge{align-self:flex-start;}
}

/* ============ TYPES DE VÉHICULES ============ */
/* Un seul composant pour trois paliers : la liste des neuf types ne change
   jamais de balisage, seule sa disposition change.
     - >= 900px : colonne verticale à droite de la scène
     - 560-900px : grille de 5 colonnes sous la scène
     - < 560px  : grille de 3 colonnes
   Aucun second composant tactile n'est nécessaire, donc rien à maintenir en
   double entre desktop et mobile. */
.vt-layout{
  display:grid; grid-template-columns:minmax(0,1.32fr) minmax(0,0.68fr);
  gap:var(--sp-5); align-items:stretch;
}

/* --- Scène : le véhicule sélectionné --- */
.vt-stage{
  position:relative; overflow:hidden;
  background:var(--white); border:var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
  display:flex; flex-direction:column;
}
/* Les neuf panneaux sont tous dans le HTML ; `hidden` en masque huit. Le
   panneau visible occupe toute la scène. */
.vt-panel{display:flex; flex-direction:column; flex:1; min-height:0;}
.vt-panel[hidden]{display:none;}

.vt-visual{
  position:relative; flex:1; min-height:0; aspect-ratio:16/9;
  background:radial-gradient(120% 90% at 30% 12%, #FFFFFF 0%, var(--bg-soft) 55%, #DEDEF7 100%);
  display:flex; align-items:center; justify-content:center; overflow:hidden;
}
.vt-art{
  width:68%; max-width:430px; height:auto;
  transition:opacity 0.2s ease, transform 0.34s cubic-bezier(0.2,0.7,0.3,1);
}
/* Sortie brève vers la gauche, puis entrée depuis la droite. Le texte est
   remplacé pendant le creux, donc jamais superposé à l'ancien. Une opacité et
   une transform sur un seul élément : le navigateur compose sans repeindre. */
.vt-visual.is-out .vt-art,
.vt-visual.is-out .vt-photo{opacity:0; transform:translateX(-14px);}
/* Ligne de sol : sans elle le véhicule flotte au milieu de l'aplat. */
.vt-visual::after{
  content:""; position:absolute; left:14%; right:14%; bottom:24%; height:1px;
  background:linear-gradient(90deg,transparent,rgba(3,3,146,0.15),transparent);
}

/* Photo du panneau. Elle remplit tout le cadre, là où l'illustration flottait
   au centre d'un aplat : le dégradé de fond et la ligne de sol sont donc
   neutralisés ci-dessous. `object-fit:cover` fait le cadrage 16/9 à
   l'affichage — les sources vont du portrait au panoramique, et
   `object-position`, posé en style inline depuis `photo.focus`, recentre
   chacune sur son véhicule plutôt que sur le milieu géométrique du cadre. */
.vt-photo{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; object-position:50% 50%;
  transition:opacity 0.2s ease, transform 0.34s cubic-bezier(0.2,0.7,0.3,1);
}
/* Un panneau photographique n'a ni aplat ni ligne de sol à dessiner : la photo
   porte déjà les deux. Le fond passe au navy pour que les pastilles claires ne
   clignotent pas sur du blanc pendant le chargement de l'image. */
.vt-visual--photo{background:var(--navy);}
.vt-visual--photo::after{display:none;}
/* Voile bas : les photos sont majoritairement claires (ciel, carrosseries
   blanches) et le compteur y perdait son contraste. Le dégradé ne couvre que
   le bas du cadre, là où la pastille se pose, et laisse le véhicule intact. */
.vt-visual--photo::before{
  content:""; position:absolute; left:0; right:0; bottom:0; height:38%; z-index:1;
  background:linear-gradient(to top,rgba(2,2,60,0.42),transparent);
  pointer-events:none;
}
.vt-tag{
  position:absolute; left:var(--sp-4); top:var(--sp-4); z-index:1;
  background:var(--white); border-radius:999px; padding:6px 14px;
  font-family:var(--font-display); font-weight:700; font-size:0.74rem;
  color:var(--navy); box-shadow:var(--shadow-sm);
}
/* Compteur : dit le nombre de types sans ajouter une ligne de texte. */
.vt-counter{
  position:absolute; right:var(--sp-4); bottom:var(--sp-4); z-index:1;
  font-family:var(--font-display); font-weight:700; font-size:0.76rem;
  color:var(--slate); font-variant-numeric:tabular-nums;
  background:rgba(255,255,255,0.86); border-radius:999px; padding:5px 12px;
}

.vt-caption{padding:var(--sp-5); border-top:var(--border);}
/* Le titre est encadré par `.vt-ident` pour que la carte mobile puisse lui
   adjoindre la pastille du pictogramme. Au-dessus de 640px, la pastille est
   masquée et l'enveloppe se comporte comme si elle n'existait pas. */
.vt-ident{display:contents;}
.vt-badge{display:none;}
.vt-title{font-size:1.5rem; font-weight:800; letter-spacing:-0.015em; line-height:1.2;}
.vt-text{margin-top:10px; color:var(--slate); font-size:0.98rem; line-height:1.6; max-width:52ch;}
.vt-facts{list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:9px;}
.vt-facts li{display:flex; gap:10px; align-items:flex-start; font-size:0.89rem; color:var(--ink); line-height:1.5;}
.vt-facts svg{flex-shrink:0; margin-top:3px;}
.vt-foot{margin-top:var(--sp-5); display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap;}
.vt-free{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--ok-bg); border:1px solid var(--ok-line); border-radius:999px;
  padding:7px 14px; font-size:0.8rem; font-weight:600; color:var(--ok); white-space:nowrap;
}
.vt-free svg{flex-shrink:0;}

/* --- Navigation : les neuf types --- */
.vt-navwrap{
  background:var(--white); border:var(--border); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm); padding:var(--sp-3);
}
.vt-nav-title{
  font-family:var(--font-display); font-weight:700; font-size:0.74rem;
  letter-spacing:0.1em; text-transform:uppercase; color:var(--slate);
  padding:6px 14px 10px;
}
.vt-nav{display:grid; gap:2px; align-content:start;}
.vt-item{
  display:grid; grid-template-columns:auto auto 1fr auto; align-items:center; gap:12px;
  width:100%; min-height:48px; padding:11px 14px;
  background:transparent; border:1px solid transparent; border-radius:var(--radius-md);
  cursor:pointer; text-align:left;
  font-family:var(--font-display); font-weight:600; font-size:0.94rem; color:var(--navy);
  transition:background 0.15s ease, color 0.15s ease, border-color 0.15s ease, transform 0.1s ease;
}
.vt-num{
  font-family:var(--font-display); font-weight:700; font-size:0.74rem;
  color:#9AA6B4; font-variant-numeric:tabular-nums; transition:color 0.15s ease;
}
.vt-ic{display:flex; flex-shrink:0;}
.vt-ic svg{display:block;}
.vt-name{min-width:0;}
.vt-arrow{display:flex; opacity:0; transition:opacity 0.15s ease;}
.vt-item:hover{background:var(--bg);}
/* L'état actif n'est jamais porté par la seule couleur : le chevron apparaît,
   et aria-selected l'annonce aux technologies d'assistance. */
.vt-item[aria-selected="true"]{background:var(--navy); color:var(--white); border-color:var(--navy);}
.vt-item[aria-selected="true"] .vt-num{color:var(--accent-light);}
/* Les pictogrammes de véhicules portent leur trait sur le `<svg>` racine, et
   non sur chaque forme : c'est lui qu'il faut repeindre quand l'onglet passe
   en navy. Les tracés à opacité réduite suivent, leur `stroke-opacity` étant
   relatif à la couleur héritée. Le second sélecteur reste pour la puce pleine
   du pictogramme « Autre », seule forme du jeu à porter un `fill`. */
.vt-item[aria-selected="true"] .vt-ic svg{stroke:var(--white);}
.vt-item[aria-selected="true"] .vt-ic svg [fill]:not([fill="none"]){fill:var(--white);}
.vt-item[aria-selected="true"] .vt-arrow{opacity:1;}

/* Pied du rail mobile : n'existe qu'en dessous de 640px, où les panneaux
   deviennent un rail horizontal. Au-dessus, la navigation par onglets dit déjà
   où l'on se trouve, et cette barre ferait double emploi. */
.vt-rail-foot{display:none;}

/* --- Tablette : la colonne devient une grille sous la scène --- */
@media (max-width:900px){
  .vt-layout{grid-template-columns:minmax(0,1fr); gap:var(--sp-4);}
  .vt-visual{aspect-ratio:16/8;}
  /* La carte blanche disparaît : les cases la portent désormais chacune. */
  .vt-navwrap{background:none; border:none; box-shadow:none; padding:0;}
  .vt-nav-title{padding:0 0 10px; color:var(--navy); font-size:0.8rem; letter-spacing:0.04em; text-transform:none;}
  .vt-nav{grid-template-columns:repeat(5,1fr); gap:10px;}
  .vt-item{
    grid-template-columns:1fr; justify-items:center; text-align:center; gap:7px;
    min-height:82px; padding:12px 8px; font-size:0.84rem; line-height:1.2;
    background:var(--white); border-color:var(--bg-soft); box-shadow:var(--shadow-sm);
  }
  /* En grille, l'ordre se lit tout seul et le chevron n'a plus de place. */
  .vt-num, .vt-arrow{display:none;}
}

/* --- Mobile : le rail de cartes bleues -----------------------------------
   Sous 640px, la scène et sa colonne d'onglets ne tiennent plus : la photo
   16/9 réduite ne montre plus le véhicule, et la grille des neuf onglets
   repousse le contenu sous le CTA collant. Les mêmes neuf panneaux deviennent
   donc un rail horizontal de cartes, une par type, parcouru au doigt.

   LA PHOTO EST UN DÉCOR, PAS UNE IDENTIFICATION. Les huit photos vont du
   portrait 0,75 au panoramique 2,03 : quel que soit le cadre imposé, les unes
   paraîtraient entières et les autres rognées. La carte tranche en réduisant
   la photo à un bandeau 16/9 qui plante la scène, et confie l'identification
   du type au pictogramme, dessiné à taille constante. Toutes les photos sont
   alors recadrées de la même façon, sans que rien d'essentiel s'y joue.

   Rien n'est dupliqué : `.vt-stage` passe en flex à défilement magnétique et
   `.vt-panel[hidden]` redevient visible. Les onglets, devenus redondants avec
   le geste, disparaissent. */
@media (max-width:640px){
  .vt-layout{gap:0;}

  /* La scène perd son cadre : chaque carte porte désormais le sien. Les marges
     négatives font sortir le rail du conteneur pour que les cartes puissent
     défiler d'un bord à l'autre de l'écran, `scroll-padding-left` réalignant
     l'arrêt sur la gouttière du conteneur. */
  .vt-stage{
    display:flex; flex-direction:row; gap:12px;
    background:none; border:0; border-radius:0; box-shadow:none;
    margin:0 calc(var(--sp-4) * -1); padding:2px var(--sp-4) 16px;
    overflow-x:auto; overflow-y:hidden;
    scroll-snap-type:x mandatory; scroll-padding-left:var(--sp-4);
    -webkit-overflow-scrolling:touch;
    scrollbar-width:none;
  }
  .vt-stage::-webkit-scrollbar{display:none;}

  /* Les huit panneaux masqués reviennent : le rail les montre tous. L'attribut
     `hidden` reste dans le DOM — le script continue de le poser pour le
     desktop — mais il ne masque plus rien ici. Le dégradé bleu est franc et
     lumineux : assez soutenu pour porter du texte blanc, assez clair pour ne
     pas plomber un écran de téléphone. */
  .vt-panel,
  .vt-panel[hidden]{
    display:flex; flex-direction:column; position:relative; flex:0 0 auto;
    width:min(78vw, 278px); scroll-snap-align:start;
    border-radius:var(--radius-xl); overflow:hidden;
    background:linear-gradient(168deg, #2E2FC4 0%, #12139B 100%);
  }

  /* Le bandeau : un 16/9 fixe, identique pour les neuf. */
  .vt-visual{position:relative; aspect-ratio:16/9; flex:none; min-height:0;}
  .vt-visual::after{display:none;}
  .vt-art{width:64%; opacity:0.5;}
  .vt-photo{object-fit:cover;}

  /* Raccord bas du bandeau : le dégradé part de la couleur haute de la carte,
     si bien que la photo s'y fond au lieu d'y être posée. Sans lui, une arête
     nette séparerait l'image du bloc de texte. */
  .vt-visual--photo::before,
  .vt-visual::before{
    content:""; position:absolute; left:0; right:0; bottom:0; top:auto;
    height:46%; z-index:1;
    background:linear-gradient(to top, #2E2FC4, rgba(46,47,196,0));
    pointer-events:none;
  }

  /* La pastille de catégorie reste sur la photo ; le compteur disparaît, le
     pied du rail le porte désormais pour les neuf cartes à la fois. */
  .vt-tag{
    left:11px; top:11px; z-index:3; padding:5px 10px; font-size:0.66rem;
    background:rgba(255,255,255,0.94); box-shadow:none;
  }
  .vt-counter{display:none;}

  /* La légende chevauche le bas du bandeau : c'est ce léger recouvrement qui
     lie la photo au texte plutôt que de les empiler. */
  .vt-caption{
    position:relative; z-index:2; margin-top:-22px;
    padding:0 14px 16px; border-top:0; color:var(--white);
  }
  /* Le pictogramme dans sa pastille de verre. Il porte l'identification du
     type, d'où sa taille : c'est lui que l'œil lit, pas la photo. */
  .vt-ident{display:flex; align-items:flex-end; gap:11px;}
  .vt-badge{
    display:grid; place-items:center; flex:none;
    width:44px; height:44px; border-radius:12px;
    background:rgba(255,255,255,0.16);
    border:1px solid rgba(255,255,255,0.28);
    -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
    color:var(--white);
  }
  .vt-badge svg{display:block;}
  .vt-title{font-size:1.04rem; color:var(--white); line-height:1.15;}
  .vt-text{
    margin-top:11px; font-size:0.78rem; line-height:1.5; max-width:none;
    color:rgba(255,255,255,0.88);
  }
  .vt-facts{margin-top:11px; gap:6px;}
  .vt-facts li{font-size:0.74rem; line-height:1.4; color:var(--white); gap:7px;}
  /* Les coches sont dessinées en navy : invisibles sur le fond bleu. Le vert
     clair les rattache à la pastille « Enlèvement gratuit » du pied. */
  .vt-facts svg [stroke]{stroke:#A8F0C6;}
  .vt-facts svg{margin-top:2px;}

  /* Le pied de carte disparaît : la pastille de gratuité est remontée une
     seule fois sous le rail, plutôt que répétée neuf fois. */
  .vt-foot{display:none;}

  /* Les onglets ne servent plus : le geste les remplace, et les neuf libellés
     sont désormais portés par les cartes elles-mêmes. */
  .vt-navwrap{display:none;}

  /* Pied du rail : progression en neuf segments et compteur nommé. */
  .vt-rail-foot{display:block; margin-top:0;}
  .vt-rail-bar{display:flex; gap:3px;}
  .vt-rail-bar i{
    flex:1; height:2px; border-radius:1px; background:var(--bg-soft);
    transition:background 0.25s ease;
  }
  .vt-rail-bar i.is-on{background:var(--navy);}
  .vt-rail-legend{
    display:flex; justify-content:space-between; align-items:baseline; gap:12px;
    margin:12px 0 0; font-size:0.78rem; color:var(--slate);
    font-variant-numeric:tabular-nums;
  }
  .vt-rail-name{font-family:var(--font-display); font-weight:700; color:var(--ink);}
  .vt-rail-count b{font-family:var(--font-display); font-weight:700; color:var(--ink);}

  /* Pastille de gratuité, une fois pour le rail entier plutôt que répétée sur
     chacune des neuf cartes. `flex` et non `inline-flex` : elle occupe sa
     propre ligne sous la légende. */
  .vt-rail-foot .vt-free{display:flex; width:max-content; margin-top:16px;}
}

/* Sous 640px, .mobile-sticky-cta porte déjà la demande et l'appel en
   permanence : le bouton de la section ferait doublon et disperserait
   l'attention. La pastille de gratuité reste, elle informe sans concurrencer. */
@media (max-width:640px){
  .vt-foot{margin-top:var(--sp-4);}
  .vt-foot .btn{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .vt-art, .vt-photo{transition:none;}
  .vt-visual.is-out .vt-art,
  .vt-visual.is-out .vt-photo{opacity:1; transform:none;}
  .vt-stage{scroll-behavior:auto;}
}

/* ============ COMMENT ÇA MARCHE — étapes reliées ============ */
.process{background:var(--white); border-top:var(--border); border-bottom:var(--border);}
.steps-grid{display:flex; align-items:stretch; gap:0; margin-top:var(--sp-6);}
.step-card{
  flex:1; position:relative;
  background:var(--white); border:1px solid var(--bg-soft); border-radius:var(--radius-lg);
  padding:var(--sp-5) var(--sp-4);
}
.step-card--alt{background:var(--bg-soft);}
.step-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white);
  font-family:var(--font-display); font-weight:800; font-size:0.95rem; margin-bottom:var(--sp-3);
}
.step-card h3{margin-bottom:6px; font-size:1.02rem;}
.step-card p{font-size:0.9rem; color:var(--slate);}
.step-connector{
  width:36px; flex-shrink:0; display:flex; align-items:center; justify-content:center;
  color:var(--navy); opacity:0.32;
}

@media (max-width:960px){
  .steps-grid{flex-direction:column; gap:var(--sp-3);}
  .step-connector{width:100%; height:26px;}
  .step-connector svg{transform:rotate(90deg);}
}

/* ============ BANDE DE LOGOS (sous le Hero) ============ */
/* Bande sobre, sans encadré : les logos sont alignés et volontairement discrets
   pour rester une signature de contexte, jamais le point focal de la page. */
.logo-strip{background:var(--bg); border-bottom:var(--border); padding:var(--sp-7) 0;}
/* Les logos restent centrés en flex plutôt que répartis sur une grille : leur
   nombre et leurs largeurs varient d'un département à l'autre, et des colonnes
   égales laisseraient les logos étroits flotter au milieu de leur case.
   L'écart horizontal est volontairement resserré pour qu'ils se lisent comme un
   groupe posé au centre, et non comme quatre éléments dispersés. */
.logo-strip-items{
  display:flex; align-items:center; justify-content:center;
  flex-wrap:wrap; gap:var(--sp-4) var(--sp-5);
}
/* Logos affichés en pleine couleur et à taille généreuse : ils doivent
   accrocher l'œil dès l'arrivée sur la page. */
.logo-strip-items img{
  width:auto; opacity:1;
  transition:transform 0.15s ease;
}
.logo-strip-items img:hover{transform:scale(1.04);}
/* Logo départemental : la hauteur inline est généreuse pour que les logos
   presque carrés (77) ne paraissent pas minuscules, mais une largeur maximale
   empêche les logos très larges (92, ratio 4,85) d'écraser la bande.
   `object-fit:contain` conserve les proportions quand la largeur borne. */
.logo-strip-items img.logo-strip-dept{
  max-width:230px; object-fit:contain;
}
/* Logo dont la marque est blanche et qui est fourni sur fond sombre (93) : il
   conserve son fond, arrondi pour ne pas trancher comme un rectangle collé. */
.logo-strip-items img.logo-strip-framed{border-radius:var(--radius-sm);}

@media (max-width:900px){
  .logo-strip{padding:var(--sp-6) 0;}
  .logo-strip-items{gap:var(--sp-4) var(--sp-4);}
  .logo-strip-items img{height:auto !important; max-height:70px;}
}
@media (max-width:640px){
  .logo-strip{padding:var(--sp-5) 0;}
  .logo-strip-items{gap:var(--sp-3) var(--sp-4);}
  /* Hauteurs réduites proportionnellement (surcharge des styles inline). */
  .logo-strip-items img{height:auto !important; max-height:52px;}
}

/* ============ LIEUX D'INTERVENTION ============ */
/* Cartes illustrées par une photo d'intervention réelle. `align-items:stretch`
   (défaut de la grille) et le flex vertical de la carte donnent aux quatre
   cartes la même hauteur quelle que soit la longueur du texte. */
.place-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);}
.place-card{
  display:flex; flex-direction:column; overflow:hidden;
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm);
  transition:box-shadow 0.25s ease, transform 0.25s ease;
}
.place-card:hover{box-shadow:var(--shadow-md); transform:translateY(-2px);}

/* La photo est rognée par son propre conteneur, mais la pastille d'icône doit
   pouvoir déborder sous ce cadre : c'est `.place-frame` qui porte
   `overflow:hidden`, pas `.place-photo`, sinon la pastille serait coupée. */
.place-photo{position:relative; background:var(--bg-soft);}
.place-frame{aspect-ratio:4/3; overflow:hidden; border-radius:0;}
.place-photo img{
  width:100%; height:100%; object-fit:cover; display:block;
  transition:transform 0.5s cubic-bezier(0.2,0.7,0.3,1);
}
.place-card:hover .place-photo img{transform:scale(1.05);}

/* Pastille d'icône posée à cheval sur le bas de la photo : conserve le repère
   visuel des autres sections, où les blocs sont introduits par une icône. */
.place-icon{
  position:absolute; left:var(--sp-3); bottom:-20px; z-index:1;
  display:flex; align-items:center; justify-content:center;
  width:40px; height:40px;
  background:var(--white); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}

.place-body{padding:var(--sp-5) var(--sp-4) var(--sp-4);}
.place-card h3{font-size:1.02rem; margin-bottom:8px;}
.place-card p{font-size:0.9rem; color:var(--slate); line-height:1.55;}

@media (max-width:900px){.place-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.place-grid{grid-template-columns:1fr;}}
@media (prefers-reduced-motion:reduce){
  .place-card, .place-photo img{transition:none;}
  .place-card:hover{transform:none;}
  .place-card:hover .place-photo img{transform:none;}
}

/* ============ PROFESSIONNELS ============ */
/* Le rappel légal ayant rejoint la section service, la bande n'a plus qu'un
   bloc : il occupe toute la largeur. */
.pro-layout{display:grid; grid-template-columns:minmax(0,1fr); gap:var(--sp-5);}

.pro-card{
  background:var(--navy); color:var(--white);
  border-radius:var(--radius-xl); padding:var(--sp-6);
}
.pro-card h2{color:var(--white);}
.pro-card .eyebrow{color:var(--accent-light); display:block;}
.pro-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:46px; height:46px; margin-bottom:var(--sp-4);
  background:rgba(255,255,255,0.12); border-radius:var(--radius-md);
}
.pro-text{margin-top:var(--sp-3); color:rgba(255,255,255,0.82); font-size:1rem; max-width:520px;}
.pro-points{list-style:none; margin:var(--sp-5) 0 var(--sp-5); padding:0; display:grid; gap:11px;}
.pro-points li{
  display:flex; gap:11px; align-items:flex-start;
  font-size:0.94rem; color:rgba(255,255,255,0.9);
}
.pro-points svg{flex-shrink:0; margin-top:3px;}

@media (max-width:900px){
  .pro-card{padding:var(--sp-5);}
}

/* ============ RACHAT D'ÉPAVE ============ */
.buyback-layout{
  display:grid; grid-template-columns:minmax(0,1.05fr) minmax(0,0.95fr);
  gap:var(--sp-7); align-items:start;
}
.buyback-copy p{max-width:560px;}

/* Encadré d'éligibilité : lève l'ambiguïté avec la gratuité annoncée ailleurs.
   Teinte ambre — la seule note non bleue de la page, réservée aux réserves. */
.buyback-notice{
  display:flex; gap:12px; align-items:flex-start;
  margin-top:var(--sp-5); padding:14px 18px;
  background:#FCF6E8; border-left:3px solid var(--warn);
  border-radius:var(--radius-sm);
  font-size:0.9rem; color:#6B4A12; line-height:1.55;
}
.buyback-notice-mark{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:20px; height:20px; margin-top:1px; border-radius:50%;
  background:var(--warn); color:var(--white);
  font-family:var(--font-display); font-weight:800; font-size:0.75rem;
}

.buyback-points{list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:12px;}
.buyback-points li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.96rem; color:var(--ink); line-height:1.5;
}
.buyback-points svg{flex-shrink:0; margin-top:3px;}

.buyback-cta{margin-top:var(--sp-5);}

/* Colonne des étapes : carte claire, en écho aux cartes de service. */
.buyback-steps{
  background:var(--white); border:var(--border); border-radius:var(--radius-xl);
  padding:var(--sp-5); box-shadow:var(--shadow-sm);
}
.buyback-steps-title{
  font-family:var(--font-display); font-weight:700; font-size:0.76rem;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--navy);
  margin-bottom:var(--sp-4);
}
.buyback-step-list{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-4);}
.buyback-step{display:flex; gap:14px; align-items:flex-start;}
.buyback-step-num{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%;
  background:var(--navy); color:var(--white);
  font-family:var(--font-display); font-weight:800; font-size:0.82rem;
}
.buyback-step-title{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:var(--navy); margin-bottom:4px;
}
.buyback-step-text{font-size:0.9rem; color:var(--slate); line-height:1.55;}

@media (max-width:900px){
  .buyback-layout{grid-template-columns:1fr; gap:var(--sp-6);}
}

/* ============ À PROPOS ============ */
.about-layout{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center;}
.about-points{list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3);}
.about-points li{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:0.98rem;}
.about-points svg{flex-shrink:0; margin-top:3px;}
.about-visual{
  border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-md);
}
.about-visual img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){.about-layout{grid-template-columns:1fr;} .about-visual{order:-1;}}

/* --- Pourquoi nous choisir --- */
/* Blocs légers : pas de carte, pas d'ombre. Un simple filet supérieur sépare
   les entrées, comme un sommaire — c'est ce qui distingue ce bloc des cartes
   de service sans introduire un nouveau langage graphique. */
.why-block{margin-top:var(--sp-8); padding-top:var(--sp-6); border-top:var(--border);}
.why-heading{
  font-size:clamp(1.35rem, 1.2rem + 0.7vw, 1.75rem);
  font-weight:700; letter-spacing:-0.01em; margin-top:12px;
}
.why-intro{margin-top:var(--sp-3); color:var(--slate); font-size:1.02rem; max-width:620px;}

.why-grid{
  list-style:none; margin:var(--sp-6) 0 0; padding:0;
  display:grid; grid-template-columns:repeat(3,1fr);
  gap:var(--sp-5) var(--sp-6);
}
.why-item{
  padding-top:var(--sp-3);
  /* Le filet reprend la couleur de bordure du site ; il se teinte au survol
     sans que rien ne bouge, ce qui reste discret sur une liste de six. */
  border-top:2px solid var(--bg-soft);
  transition:border-color 0.2s ease;
}
.why-item:hover{border-top-color:var(--navy);}
/* Numéro et icône sur la même ligne : l'icône seule sur sa ligne creusait un
   vide entre le numéro et le titre. */
.why-head{display:flex; align-items:center; gap:var(--sp-2); margin-bottom:var(--sp-3);}
.why-num{
  font-family:var(--font-display); font-weight:800; font-size:0.78rem;
  letter-spacing:0.08em; color:var(--navy); opacity:0.45;
}
.why-icon{display:flex; opacity:0.9;}
.why-title{font-size:1.02rem; font-weight:700; margin-bottom:6px;}
.why-text{font-size:0.9rem; color:var(--slate); line-height:1.55;}

@media (max-width:900px){
  .why-block{margin-top:var(--sp-7); padding-top:var(--sp-5);}
  .why-grid{grid-template-columns:1fr 1fr; gap:var(--sp-4) var(--sp-5);}
}
@media (max-width:560px){.why-grid{grid-template-columns:1fr;}}

/* ============ ZONE D'INTERVENTION ============ */
.zone{background:var(--navy); color:var(--white);}
.zone .section-head h2{color:var(--white);}
.zone .section-head p{color:rgba(247,249,251,0.75);}
.zone .eyebrow{color:var(--accent-light);}
/* --- Hex map Île-de-France --- */
/* La silhouette régionale naît de l'accumulation des cellules : il n'y a
   aucun polygone départemental, aucun contour tracé autour des groupes.
   Les départements se distinguent uniquement par leur nuance. */
.idf-layout{
  display:grid; grid-template-columns:minmax(0,1.15fr) minmax(0,0.85fr);
  gap:var(--sp-7); align-items:center; margin-top:var(--sp-6);
}
.idf-map{
  margin:0; padding:0;
  background:none; border:0; border-radius:0; box-shadow:none;
}
/* `overflow:visible` laisserait l'écartement au survol déborder hors du
   viewBox et créer un défilement horizontal sur mobile. La marge du viewBox
   (calculée dans le template) couvre déjà le déplacement des cellules :
   le contenu n'a donc pas besoin de sortir du cadre. */
.idf-map svg{width:100%; height:auto; display:block; overflow:hidden;}

/* --- Cellules --- */
/* Positionnement par `translate` : les coordonnées viennent du build.
   La position ne change jamais — le survol est purement chromatique — mais
   `--d` décale l'instant où chaque cellule change de couleur, ce qui produit
   le balayage en diagonale. Le délai est calculé au build depuis la position
   de la cellule sur la diagonale de son département. */
.hx{
  fill:#3639B2;
  transform:translate(var(--tx), var(--ty));
  transition:fill 260ms ease;
  transition-delay:var(--d, 0ms);
}
/* Nuance par département : c'est elle qui délimite les groupes, à la place
   d'un contour. Les huit valeurs restent volontairement proches — l'écart
   suffit à lire la frontière sans découper la carte en zones contrastées.
   `--t` est l'opacité de base du groupe, `--l` la variation interne. */
/* Chaque département reçoit une teinte pleine plutôt qu'un blanc transparent.
   Sur le bleu très saturé du fond (#030392), un voile blanc de faible opacité
   produit des valeurs trop voisines pour que l'œil sépare deux groupes ; une
   couleur explicite permet de faire varier à la fois la clarté et la
   saturation, ce qui rend la frontière lisible sans tracer de contour.
   Les huit teintes restent dans le même bleu — c'est l'échelle de clarté qui
   travaille, jamais la teinte.
   Voisinages à séparer : 95 jouxte 78/93/77 ; 75 jouxte 92/93/94 ;
   91 jouxte 78/94/77 ; 77 jouxte 95/93/94/91. */
/* `--t` = teinte de base du groupe, `--t2` = son palier clair. Les deux sont
   déclarées en dur plutôt que dérivées par un filtre : `filter` sur ~300
   éléments SVG coûte cher au compositing, pour un gain invisible ici.

   L'échelle est construite en gradins nets, pas en dégradé continu : deux
   départements qui se touchent doivent être séparés par au moins deux crans,
   sinon la frontière disparaît à distance de lecture — c'est le seul indice
   qui délimite les groupes, en l'absence de contour. La progression va du
   plus sombre en périphérie au plus clair au centre, ce qui fait
   naturellement ressortir la petite couronne et Paris. */
.hx-group--t1{--t:#2B2F9E; --t2:#3337A6;} /* 95 — périphérie nord, la plus sombre */
.hx-group--t2{--t:#4C50C6; --t2:#5458CE;} /* 77 — périphérie est */
.hx-group--t3{--t:#3A3EB4; --t2:#4246BC;} /* 78 — périphérie ouest */
.hx-group--t4{--t:#6266DA; --t2:#6A6EE2;} /* 91 — périphérie sud, la plus claire */
.hx-group--t5{--t:#9C9FF2; --t2:#A5A8FA;} /* 92 — petite couronne ouest */
.hx-group--t6{--t:#7E82E6; --t2:#868AEE;} /* 93 — petite couronne nord-est */
.hx-group--t7{--t:#8D90EC; --t2:#9598F4;} /* 94 — petite couronne sud-est */
.hx-group--t8{--t:#C6C8FF; --t2:#D0D2FF;} /* 75 — le cœur, le plus clair */

/* Un seul aplat par département.
   Une variation interne existait tant que la grille comptait ~130 grandes
   cellules : elle y passait pour une respiration. À plus de 300 petites
   cellules, la même amplitude se lit comme du bruit et brouille la frontière
   entre deux départements voisins — exactement ce que la teinte est censée
   rendre lisible.
   Les deux paliers `--l1` et `--l2` reçoivent donc le même aplat, au repos
   comme au survol ; ils sont conservés dans le balisage pour pouvoir
   réintroduire une variation sans toucher au template. */
.hx--l1,
.hx--l2{fill:var(--t, #3639B2);}

/* Contour du territoire : il ne longe que les frontières et le pourtour de la
   carte, jamais les limites internes d'un département — le tracé est calculé
   au build à partir des seules arêtes qui donnent sur un autre groupe.
   Il reste volontairement ténu : son rôle est de poser la limite, pas de
   découper la carte en cases. Un trait plus appuyé écraserait les nuances de
   bleu, qui restent le premier indice de séparation. */
.hx-edge{
  stroke:rgba(255,255,255,0.42);
  stroke-width:1.3;
  stroke-linecap:round;
  pointer-events:none;
  transition:stroke 220ms ease;
}

/* Hitbox : hexagones pleine taille et transparents, superposés aux cellules.
   Ils comblent les interstices, ce qui évite tout scintillement du survol. */
.hx-hit{fill:transparent; transform:translate(var(--tx), var(--ty));}

.hx-group{transition:opacity 260ms ease;}
.hx-group--link{cursor:pointer;}

/* Libellé : posé au-dessus de la mosaïque, avec un liseré de la couleur du
   fond qui le détache sans recourir à un filtre. */
/* Le liseré doit rester plus sombre que la plus claire des cellules (le 75),
   sinon le chiffre s'y dissout : une valeur fixe et franche, plutôt que la
   teinte du fond de section. */
.hx-code{
  font-family:var(--font-display); font-weight:800; font-size:15px;
  fill:var(--white); pointer-events:none;
  paint-order:stroke fill;
  /* Liseré fin : au-delà d'environ 1/5 du corps, il empiète sur les pleins du
     chiffre et le blanc vire au bleu à l'écran. */
  stroke:#151885; stroke-width:2.6; stroke-linejoin:round;
  transition:opacity 200ms ease;
}

/* --- Marque : le logo du département et la pastille qui le porte --- */
/* Les logos officiels sont affichés dans leurs couleurs d'origine. Ils sont
   dessinés pour fond clair — le Val-d'Oise est noir, les Hauts-de-Seine et la
   Seine-et-Marne bleu marine — et disparaîtraient sur le bleu de la carte :
   la pastille blanche leur rend leur lisibilité.
   Les deux sont animés ensemble, sur le groupe, pour entrer d'un seul
   mouvement. `transform-box:fill-box` fait porter l'échelle sur la marque
   elle-même et non sur le repère SVG, sans quoi elle serait projetée ailleurs
   sur la carte en grandissant. */
.hx-mark{
  opacity:0; pointer-events:none;
  transform-box:fill-box; transform-origin:center;
  transform:scale(0.86);
  transition:opacity 220ms ease, transform 300ms cubic-bezier(0.34,1.28,0.64,1);
}
/* L'ombre détache la pastille du bleu : elle se lit comme posée au-dessus de
   la carte, et non découpée dedans. Portée par le rectangle seul, jamais par
   le groupe — sur le groupe, elle napperait aussi le dessin du logo. */
.hx-plate{
  fill:#FFFFFF;
  filter:drop-shadow(0 1.2px 2.4px rgba(2,2,60,0.45));
}
.hx-logo{pointer-events:none;}

/* --- État actif : survol, focus clavier, ou synchronisation depuis la liste --- */
/* La géométrie ne bouge pas : seule la couleur change, et le décalage de
   `--d` fait progresser l'éclaircissement en diagonale à travers le groupe.
   Une version antérieure écartait les cellules pour dégager la place du logo ;
   les grands départements paraissaient s'y désagréger, et le contour devait
   être masqué. Ici la mosaïque reste entière et les frontières lisibles. */
.hx-group--link:hover .hx--l1,
.hx-group--link:focus-visible .hx--l1,
.hx-group.is-active .hx--l1,
.hx-group--link:hover .hx--l2,
.hx-group--link:focus-visible .hx--l2,
.hx-group.is-active .hx--l2{fill:#D6D8FF;}

.hx-group--link:hover .hx-code,
.hx-group--link:focus-visible .hx-code,
.hx-group.is-active .hx-code{opacity:0;}

/* La marque entre une fois le balayage passé : la vague de lumière se lit
   d'abord, le logo se pose ensuite. */
.hx-group--link:hover .hx-mark,
.hx-group--link:focus-visible .hx-mark,
.hx-group.is-active .hx-mark{
  opacity:1; transform:scale(1);
  transition-delay:210ms;
}

/* Rien ne se déplace : le contour reste exact sur les cellules, il peut donc
   s'appuyer au lieu de s'effacer. Il encadre le département illuminé. */
.hx-group--link:hover .hx-edge,
.hx-group--link:focus-visible .hx-edge,
.hx-group.is-active .hx-edge{stroke:rgba(255,255,255,0.9);}

/* Les autres départements reculent à peine : la carte reste lisible. */
.idf-map.has-active .hx-group:not(.is-active){opacity:0.75;}

.hx-group--link:focus-visible{outline:none;}

/* Repli : si le logo est absent, le numéro reste affiché au survol. */
.hx-group--no-logo.is-active .hx-code,
.hx-group--no-logo:hover .hx-code,
.hx-group--no-logo:focus-visible .hx-code{opacity:1;}

/* Mouvement réduit : le balayage est purement chromatique, il est conservé
   tel quel. Seule l'entrée en échelle de la marque est neutralisée — elle
   apparaît alors en fondu simple, sans changement de taille. */
@media (prefers-reduced-motion: reduce){
  .hx-mark{transform:scale(1);}
  .hx-group--link:hover .hx-mark,
  .hx-group--link:focus-visible .hx-mark,
  .hx-group.is-active .hx-mark{transform:scale(1);}
}

/* --- Légende --- */
.idf-legend{display:grid; grid-template-columns:1fr 1fr; gap:10px;}
.idf-legend-item{
  display:flex; align-items:center; gap:10px;
  background:rgba(247,249,251,0.06); border:1px solid rgba(247,249,251,0.15);
  border-radius:var(--radius-md); padding:12px 14px;
  text-decoration:none; transition:background 0.15s ease, border-color 0.15s ease;
}
.idf-legend-code{
  flex-shrink:0; display:inline-flex; align-items:center; justify-content:center;
  min-width:34px; height:30px; padding:0 8px;
  background:rgba(255,255,255,0.12); border-radius:6px;
  font-family:var(--font-display); font-weight:800; font-size:0.9rem; color:var(--white);
}
.idf-legend-name{font-size:0.9rem; color:rgba(247,249,251,0.85); line-height:1.25;}
.idf-legend-arrow{margin-left:auto; color:var(--accent-light); font-size:0.9rem;}

.idf-legend-item--link:hover,
.idf-legend-item--link:focus-visible,
.idf-legend-item.is-active{
  background:rgba(247,249,251,0.14); border-color:rgba(247,249,251,0.45);
}
.idf-legend-item--link .idf-legend-name{color:var(--white); font-weight:600;}

@media (max-width:900px){
  .idf-layout{grid-template-columns:1fr; gap:var(--sp-6);}
  .idf-map{width:100%;}
}
@media (max-width:520px){
  .idf-legend{grid-template-columns:1fr;}
  /* Le numéro est agrandi pour rester lisible une fois la carte réduite à la
     largeur de l'écran ; le liseré suit, sans dépasser 1/5 du corps. */
  .hx-code{font-size:17px; stroke-width:3;}
}


.zone-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3); margin-top:var(--sp-6);}
.zone-badge{
  background:rgba(247,249,251,0.06); border:1px solid rgba(247,249,251,0.15);
  border-radius:var(--radius-md); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:4px;
}
.zone-badge .zone-code{font-family:var(--font-display); font-weight:800; font-size:1.3rem; color:var(--white);}
.zone-badge .zone-name{font-size:0.85rem; color:rgba(247,249,251,0.7);}
.zone-badge-link{text-decoration:none; transition:border-color 0.15s ease, background 0.15s ease;}
.zone-badge-link:hover{border-color:rgba(247,249,251,0.4); background:rgba(247,249,251,0.1);}
.zone-badge-link .zone-cta{font-size:0.75rem; color:var(--accent-light); margin-top:6px; font-weight:600;}
@media (max-width:900px){.zone-grid{grid-template-columns:repeat(2,1fr);}}

/* ============ FORM ============ */
.contact-intro{max-width:640px; margin-bottom:var(--sp-6);}
.contact-intro h2{margin-bottom:10px;}
/* Même règle que `.section-head h2` : le titre de la section « Votre demande »
   tient sur une seule ligne, les 640px ne contraignant que le texte courant. */
@media (min-width:901px){
  .contact-intro h2{max-width:none; white-space:nowrap;}
}
.contact-intro .lede{font-family:var(--font-display); font-weight:700; font-size:1.15rem; color:var(--cta); margin-bottom:var(--sp-3);}
.contact-intro p{color:var(--slate); font-size:1.02rem;}

.contact-layout{display:grid; grid-template-columns:0.9fr 1.1fr; gap:var(--sp-8);}
.contact-info-card{
  background:var(--navy); color:var(--white); border-radius:var(--radius-lg); padding:var(--sp-5);
  height:fit-content;
}
.contact-info-card h3{margin-bottom:var(--sp-3); color:var(--white);}

.contact-phone-block{
  display:flex; align-items:center; gap:14px;
  background:rgba(255,255,255,0.08); border-radius:var(--radius-md);
  padding:16px 18px; margin-bottom:var(--sp-4);
}
.contact-phone-icon{
  width:44px; height:44px; border-radius:50%; background:var(--phone-red); flex-shrink:0;
  display:flex; align-items:center; justify-content:center;
}
.contact-phone-text{display:flex; flex-direction:column; line-height:1.3;}
.contact-phone-label{font-size:0.82rem; color:rgba(255,255,255,0.7); font-weight:600;}
.contact-phone-number{font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--phone-red-on-dark);}

/* Titre du bloc d'accompagnement. Il ouvre la partie basse de la carte.
   Pas de filet séparateur : il ne reste plus qu'un pavé téléphone au-dessus,
   et un trait juste sous ce pavé traçait deux séparations pour une seule
   coupure. La marge suffit à détacher le titre. */
.contact-aside-heading{
  margin:var(--sp-4) 0 0; padding:0;
  font-family:var(--font-display); font-weight:800; font-size:1.02rem;
  color:var(--white); line-height:1.35;
}

/* Le filet est désormais porté par le titre au-dessus : le conserver ici
   tracerait deux traits successifs. */
.contact-points{list-style:none; margin:var(--sp-4) 0 0; padding:0; display:grid; gap:var(--sp-4);}
.contact-points li{display:flex; gap:12px; align-items:flex-start; font-size:0.9rem; color:rgba(255,255,255,0.85);}
/* Pastille autour de l'icône : les trois entrées sont maintenant des étapes
   d'accompagnement et non des cases cochées, la pastille leur donne le poids
   qui les distingue des lignes de coordonnées au-dessus. */
.contact-point-icon{
  flex-shrink:0; display:grid; place-items:center; width:34px; height:34px;
  border-radius:50%; background:rgba(255,255,255,0.10);
}
.contact-points svg{flex-shrink:0; display:block;}
/* Le titre porte l'argument, la ligne suivante le précise : le visiteur qui
   survole ne lit que les titres, celui qui hésite lit le détail. */
.contact-points strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:0.94rem; color:var(--white); margin-bottom:3px; line-height:1.35;
}
.contact-points li span{color:rgba(255,255,255,0.72); line-height:1.5;}
/* `min-width:0` : sans lui, un mot long empêche le bloc de texte de se réduire
   et pousse la pastille hors de la carte sur les écrans étroits. */
.contact-points li > span:last-child{min-width:0;}

/* ─── Panneau d'état du service ───────────────────────────────────────────
   Encadré distinct plutôt qu'une suite de la liste au-dessus : les trois
   points disent ce qu'on fait pour le visiteur, ce panneau dit l'état du
   service au moment où il lit. Confondus, le second se lirait comme deux
   arguments commerciaux de plus. */
.svc-panel{
  margin:var(--sp-4) 0 0; padding:18px;
  background:rgba(255,255,255,0.07);
  border:1px solid rgba(255,255,255,0.14);
  border-radius:var(--radius-md);
}
.svc-rows{display:grid; gap:12px; margin-bottom:16px;}
.svc-row{display:flex; gap:11px; align-items:flex-start;}
.svc-row-icon{
  flex-shrink:0; display:grid; place-items:center; width:28px; height:28px;
  border-radius:50%; background:rgba(255,255,255,0.10);
}
.svc-row strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:0.9rem; color:var(--white); margin-bottom:2px; line-height:1.35;
}
.svc-row p{margin:0; font-size:0.84rem; color:rgba(255,255,255,0.7); line-height:1.5;}
/* Sans lui, un mot long empêche le texte de se réduire et pousse la pastille
   hors du panneau sur les écrans étroits. */
.svc-row > div{min-width:0;}

/* Pastille de disponibilité. STATIQUE : aucune animation, aucun clignotement.
   Le halo est un box-shadow figé — une pulsation suggérerait un signal reçu
   en direct, alors que rien n'est mesuré. */
.svc-dot{
  width:9px; height:9px; border-radius:50%; flex-shrink:0;
  background:#34D399; box-shadow:0 0 0 3px rgba(52,211,153,0.22);
}
/* La nuit : gris. La pastille et le mot « disponibles » changent ensemble,
   voir assets/site.js — garder l'un sans l'autre laisserait entendre qu'un
   enlèvement est en cours à 3 h du matin. */
.svc-dot[data-state="closed"]{
  background:#94A3B8; box-shadow:0 0 0 3px rgba(148,163,184,0.20);
}

.svc-meter{
  border-top:1px solid rgba(255,255,255,0.12); padding-top:14px; text-align:center;
}
.svc-meter-label{
  display:flex; align-items:center; justify-content:center; gap:7px;
  font-size:0.78rem; color:rgba(255,255,255,0.66);
  text-transform:uppercase; letter-spacing:0.05em; margin:0 0 8px;
}
.svc-meter-label svg{flex-shrink:0;}
/* `tabular-nums` : sans lui la largeur saute quand 01h 42min devient 01h 08min,
   et le compteur tremble à chaque changement de palier. */
.svc-value{
  font-family:var(--font-display); font-weight:800; font-size:2.6rem;
  font-variant-numeric:tabular-nums; letter-spacing:-0.01em;
  color:var(--white); line-height:1;
  transition:opacity 0.45s ease;
}
/* Transition douce déclenchée par le JS au changement de valeur, jamais en
   boucle : la classe est posée puis retirée une fois. */
.svc-value.is-updating{opacity:0.25;}
@media (prefers-reduced-motion:reduce){
  .svc-value{transition:none;}
  .svc-value.is-updating{opacity:1;}
}
.svc-unit{font-size:0.55em; font-weight:700; opacity:0.72; margin-left:1px;}
.svc-note{margin:6px 0 0; font-size:0.72rem; color:rgba(255,255,255,0.5);}

/* ─── Rappel final, juste avant que le visiteur passe au formulaire ───────
   Fond légèrement éclairci plutôt qu'une bordure : la carte est déjà cernée. */
.contact-reassurance{
  margin:var(--sp-4) 0 0; padding:12px 14px;
  background:rgba(255,255,255,0.08); border-radius:var(--radius-md);
  font-size:0.86rem; color:rgba(255,255,255,0.88);
  display:flex; flex-direction:column; align-items:center;
}
/* Les arguments sont des blocs insécables séparés par une puce dessinée en
   CSS. La puce est portée par l'argument qui la PRÉCÈDE, et non par le
   suivant : accrochée au suivant, elle descendait avec lui au retour à la
   ligne et ouvrait la seconde ligne, ce qui faisait lire l'ensemble comme une
   liste à puces. La classe `.arg` est explicite parce que la ligne
   d'intervention est elle aussi un <span> : un sélecteur positionnel lui
   aurait donné une puce. */
.contact-reassurance .args{
  display:flex; flex-wrap:wrap; justify-content:center; gap:2px 0;
}
.contact-reassurance .arg{white-space:nowrap;}
.contact-reassurance .arg:not(:last-of-type)::after{
  content:'•'; padding:0 8px; color:rgba(255,255,255,0.45);
}

/* La zone d'intervention a sa propre ligne, séparée par un filet. Deux à trois
   fois plus longue que les autres arguments (« Intervention en Seine-et-Marne
   et dans toute l'Île-de-France » fait 56 signes contre 13), elle forçait un
   retour à la ligne et laissait des puces isolées en fin de ligne.
   Le repère est inline et non en flex : sur deux lignes, un flex le centrait
   verticalement à gauche du pavé, loin de la première ligne. */
/* `contact-area` et non `zone` : `.zone` existe déjà comme classe de section
   (fond navy pleine largeur, voir plus haut). Réutiliser ce nom donnait à la
   ligne un fond éclairci qui la faisait passer pour un bouton. */
.contact-area{
  display:block; width:100%; margin-top:10px; padding-top:10px;
  border-top:1px solid rgba(255,255,255,0.14);
  font-size:0.82rem; color:rgba(255,255,255,0.78);
  text-align:center; line-height:1.5;
}
.contact-area svg{
  display:inline-block; vertical-align:-2px; margin-right:6px; flex-shrink:0;
}

/* Sous 480px le bloc descend à ~342px : les deux arguments ne tiennent plus
   côte à côte et la puce se retrouve seule en fin de première ligne. Empilés,
   ils se lisent proprement — un séparateur horizontal n'a pas de sens entre
   deux lignes.
   La pseudo-classe `:not(:last-of-type)` est répétée pour que ce sélecteur ait
   la même spécificité que la règle qu'il annule : sans elle, la règle de base
   l'emportait et la puce restait affichée. */
@media (max-width:480px){
  .contact-reassurance .args{flex-direction:column; gap:2px;}
  .contact-reassurance .arg:not(:last-of-type)::after{content:none;}
}

/* Notes des astérisques. Volontairement discrètes — elles nuancent sans
   contredire — mais pas au point d'être illisibles : la première empêche
   « vérifie votre éligibilité » de passer pour une promesse de rachat, la
   seconde empêche « souvent sous 24h » et le compteur de passer pour des
   engagements fermes. */
.contact-footnote{
  margin:10px 0 0; font-size:0.72rem; line-height:1.45;
  color:rgba(255,255,255,0.55);
}
.contact-footnote + .contact-footnote{margin-top:6px;}

.form-card{
  position:relative; overflow:hidden;
  background:var(--white); border:var(--border); border-radius:var(--radius-xl);
  /* Padding haut réduit : 48px au-dessus du premier libellé creusaient un vide
     visible sous la barre dégradée, alors que ce libellé ouvre directement le
     formulaire. Les trois autres côtés gardent la respiration de la carte. */
  padding:var(--sp-4) var(--sp-6) var(--sp-6);
  box-shadow:var(--shadow-md);
}
.form-card::before{
  content:''; position:absolute; top:0; left:0; right:0; height:4px;
  background:linear-gradient(90deg, var(--navy), var(--accent-light));
}
.form-group{margin-bottom:var(--sp-5);}
.form-group-label{
  display:block; font-family:var(--font-display); font-weight:700; font-size:0.76rem;
  letter-spacing:0.07em; text-transform:uppercase; color:var(--navy); margin-bottom:var(--sp-3);
}
.optional-tag{font-weight:500; color:var(--slate); font-size:0.82em; text-transform:none; letter-spacing:0;}

/* Grille de trois colonnes plutôt qu'un `flex-wrap` : les six situations
   remplissent exactement deux rangées de largeur égale. En flux libre, la
   dernière pilule restait seule sur sa ligne et les largeurs variaient avec la
   longueur du libellé, ce qui donnait une grille irrégulière. */
.vehicle-picker{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:10px;}
.vehicle-picker input{position:absolute; opacity:0; width:1px; height:1px;}
.vehicle-picker label{
  display:flex; align-items:center; gap:10px; min-width:0;
  padding:13px 14px; border-radius:var(--radius-lg);
  border:1.5px solid var(--bg-soft); background:var(--bg);
  font-family:var(--font-display); font-weight:600; font-size:0.88rem; color:var(--ink);
  cursor:pointer; transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.vehicle-picker label svg{flex:none;}
.vehicle-picker label span{min-width:0; overflow-wrap:break-word;}
.vehicle-picker label:hover{border-color:var(--navy);}
/* L'état sélectionné se marque par un fond clair bordé de navy, et non par un
   aplat navy : les pictogrammes d'état portent leur sens dans leur couleur
   (vert « roulant », orange « réparable », rouge « choc ») et ne peuvent donc
   pas être repassés en blanc sur fond plein. C'est déjà le parti retenu par la
   version mobile de ce même sélecteur. */
.vehicle-picker input:checked + label{
  background:var(--bg-soft); border-color:var(--navy); color:var(--ink);
  box-shadow:inset 0 0 0 1px var(--navy);
}
.vehicle-picker input:focus-visible + label{outline:2px solid var(--navy); outline-offset:2px;}

@media (max-width:700px){
  .vehicle-picker{grid-template-columns:repeat(2,minmax(0,1fr));}
}

/* minmax(0,1fr) : sans cela les colonnes prennent la largeur intrinsèque des
   inputs (taille par défaut ~20 caractères) et débordent de la carte. */
.form-grid{display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:var(--sp-4);}
.form-field input, .form-field select, .form-field textarea{min-width:0; width:100%;}
.form-field{display:flex; flex-direction:column; gap:6px; margin-bottom:var(--sp-4);}
/* Dans la grille, l'écartement est déjà assuré par `gap` : conserver en plus la
   marge basse de chaque champ doublait l'espace entre les rangées. */
.form-grid .form-field{margin-bottom:0;}
/* La ligne d'erreur n'est réservée que lorsqu'un message existe : la garder
   toujours présente creusait un vide sous chaque champ valide. */
.field-error:empty{display:none;}
.form-field.full{grid-column:1/-1;}
.form-field label{font-size:0.85rem; font-weight:700; color:var(--ink);}
.form-field input, .form-field select, .form-field textarea{
  font-family:var(--font-body); font-size:1rem; padding:14px 16px; min-height:52px;
  border:1.5px solid var(--bg-soft); border-radius:12px; background:var(--bg);
  color:var(--ink); transition:border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.form-field input:focus, .form-field select:focus, .form-field textarea:focus{
  outline:none; border-color:var(--navy); background:var(--white);
  box-shadow:0 0 0 4px rgba(var(--navy-rgb),0.12);
}
.form-field textarea{resize:vertical; min-height:120px;}
.field-error{font-size:0.82rem; color:var(--warn); min-height:1em;}
.form-field.has-error input, .form-field.has-error select, .form-field.has-error textarea{border-color:var(--warn);}

.form-status{
  display:none; align-items:center; gap:10px; padding:var(--sp-3) var(--sp-4);
  border-radius:var(--radius-sm); font-size:0.9rem; margin-bottom:var(--sp-4);
}
.form-status.show{display:flex;}
.form-status.success{background:#E3F2E8; color:#1E5631;}
.form-status.error{background:#FCEFD9; color:#7A4A05;}
.form-status.loading{background:var(--bg-soft); color:var(--slate);}

.spinner{
  width:16px; height:16px; border:2px solid rgba(41,68,92,0.3); border-top-color:var(--slate);
  border-radius:50%; animation:spin 0.7s linear infinite; flex-shrink:0;
}
@keyframes spin{to{transform:rotate(360deg);}}

.form-disclaimer{font-size:0.78rem; color:var(--slate); margin-top:var(--sp-3);}
/* La mention RGPD passe à la ligne, un cran plus petite : c'est une information
   légale obligatoire, pas un argument, elle ne doit pas peser autant que la
   phrase de consentement au rappel qui la précède. */
.form-disclaimer .fd-rgpd{display:block; margin-top:4px; font-size:0.72rem; opacity:0.85;}

/* ============ PARCOURS EN TROIS ÉTAPES (MOBILE) ============ */
/* Sur téléphone, le formulaire complet dépassait trois hauteurs d'écran : le
   bouton d'envoi n'était jamais visible et rien n'indiquait ce qu'il restait à
   remplir. Il est donc découpé en trois étapes — situation, coordonnées,
   détails — chacune tenant dans un écran.

   Le découpage est PUREMENT mobile. Au-delà de 720px, tout ce bloc est neutre :
   les trois groupes s'affichent à la suite comme avant, les jalons et les
   boutons de navigation restent masqués. Le HTML est le même dans les deux cas,
   ce sont les mêmes champs, la même validation et le même envoi.

   Sans JavaScript, `stepBack` et `stepNext` gardent leur attribut `hidden` et
   aucun groupe n'est masqué : le formulaire reste utilisable d'un seul tenant. */
.form-steps{display:none;}
.form-actions{display:flex; gap:var(--sp-3); align-items:stretch;}
.form-actions .btn-block{flex:1;}
/* Un enfant de conteneur flex reçoit un display qui prime sur l'attribut
   `hidden` : sans cette règle, les trois boutons s'affichaient ensemble et
   débordaient de la carte. */
.form-actions [hidden]{display:none;}

@media (max-width:720px){
  /* `is-stepped` n'est posée par le script qu'une fois la navigation en place :
     tant qu'elle est absente, rien n'est masqué. */
  .form-card.is-stepped .form-steps{display:block; margin-bottom:var(--sp-5);}

  .form-steps-track{
    display:flex; align-items:center; gap:0; list-style:none; margin:0; padding:0;
  }
  .form-step-dot{
    flex:none; width:28px; height:28px; border-radius:50%;
    display:grid; place-items:center;
    font-family:var(--font-display); font-weight:800; font-size:0.78rem;
    background:var(--bg-soft); color:var(--slate);
    transition:background 0.25s ease, color 0.25s ease, box-shadow 0.25s ease;
  }
  .form-step-dot.is-current{
    background:var(--navy); color:var(--white);
    box-shadow:0 0 0 4px rgba(var(--navy-rgb),0.13);
  }
  /* Une étape franchie passe au vert : c'est la même sémantique que la pastille
     de disponibilité et que le statut de succès du formulaire. */
  .form-step-dot.is-done{background:var(--ok); color:var(--white);}
  /* Le chiffre est retiré de la grille, non simplement réduit : laissé en
     `font-size:0`, il occupait encore une cellule et poussait la coche vers le
     bas de la pastille. */
  .form-step-dot.is-done span{display:none;}
  .form-step-dot.is-done::after{
    content:'✓'; font-size:0.82rem; line-height:1;
  }
  .form-step-link{
    flex:1; height:2px; background:var(--bg-soft); transition:background 0.25s ease;
  }
  .form-step-link.is-done{background:var(--ok);}

  .form-step-name{
    margin:var(--sp-3) 0 0;
    font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--ink);
  }
  .form-step-sub{margin:2px 0 0; font-size:0.82rem; color:var(--slate);}

  /* Le groupe hors étape courante est retiré du flux ET du parcours clavier :
     `display:none` suffit pour les deux, contrairement à une simple opacité. */
  .form-card.is-stepped [data-step]{display:none;}
  .form-card.is-stepped [data-step].is-active{display:block; animation:step-in 0.28s ease;}
  @keyframes step-in{
    from{opacity:0; transform:translateY(8px);}
    to{opacity:1; transform:none;}
  }
  @media (prefers-reduced-motion: reduce){
    .form-card.is-stepped [data-step].is-active{animation:none;}
    .form-step-dot, .form-step-link{transition:none;}
  }

  /* Situations en lignes pleine largeur plutôt qu'en pilules : sur un écran
     étroit, cinq pilules se réordonnent de façon désordonnée et offrent des
     cibles inégales. Une ligne par situation donne cinq cibles identiques,
     larges, atteignables au pouce. */
  /* En mode pas-à-pas, les six situations reprennent une seule colonne : la
     cible tactile occupe toute la largeur et les libellés s'alignent. */
  .form-card.is-stepped .vehicle-picker{grid-template-columns:minmax(0,1fr); gap:9px;}
  .form-card.is-stepped .vehicle-picker label{
    width:100%; justify-content:flex-start; gap:11px;
    padding:13px 14px; border-radius:var(--radius-lg);
    background:var(--white); font-size:0.92rem;
  }
  /* La coche est dessinée en CSS : elle n'a pas à exister dans le HTML de la
     version large écran, où elle n'est pas affichée. Elle est posée en fin de
     ligne (`::after` + `margin-left:auto`) et non en tête : le pictogramme
     d'état occupe désormais le bord gauche, et intercaler la coche devant lui
     aurait décalé les six icônes hors de leur alignement. */
  .form-card.is-stepped .vehicle-picker label::after{
    content:'✓'; flex:none; margin-left:auto;
    width:19px; height:19px; border-radius:50%;
    display:grid; place-items:center;
    border:1.5px solid var(--bg-soft); background:transparent;
    font-size:0.62rem; color:transparent;
    transition:background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
  }
  .form-card.is-stepped .vehicle-picker input:checked + label{
    background:var(--bg-soft); border-color:var(--navy); color:var(--ink);
  }
  .form-card.is-stepped .vehicle-picker input:checked + label::after{
    background:var(--navy); border-color:var(--navy); color:var(--white);
  }

  .form-back{
    flex:none; width:52px;
    display:grid; place-items:center;
    border:1.5px solid var(--bg-soft); border-radius:var(--radius-lg);
    background:var(--white); color:var(--slate); cursor:pointer;
    transition:border-color 0.15s ease, color 0.15s ease;
  }
  .form-back:hover{border-color:var(--navy); color:var(--navy);}
  .form-back:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
}

/* ============ PRÉCISIONS / PLAQUE ============ */
/* Deux onglets au-dessus d'un champ unique : le visiteur décrit son véhicule
   avec ses mots, ou donne sa plaque. Les deux valeurs coexistent en mémoire —
   changer d'onglet n'efface pas l'autre champ, et les deux partent à l'envoi
   si elles sont remplies. Personne ne perd sa saisie en cliquant par curiosité.

   Le rail reprend la pilule du sélecteur de situation, en plus petit et
   regroupé dans un contenant : deux rangées de pilules identiques dans le même
   formulaire brouilleraient la lecture. */
/* Barre pleine largeur, deux onglets à parts égales : en `inline-flex`, les
   onglets se dimensionnaient sur leur texte et laissaient un vide à droite,
   « Plaque » étant plus court que « Précisions ». */
.mode-tabs{
  display:flex; gap:6px; padding:4px; margin-bottom:10px;
  background:var(--bg); border:1.5px solid var(--bg-soft); border-radius:999px;
}
.mode-tab{
  flex:1 1 50%; justify-content:center;
  display:inline-flex; align-items:center; gap:7px; padding:8px 15px;
  border:0; border-radius:999px; cursor:pointer; background:transparent; color:var(--slate);
  font-family:var(--font-display); font-weight:600; font-size:0.84rem;
  transition:background 0.15s ease, color 0.15s ease;
}
.mode-tab svg{flex:0 0 auto;}
.mode-tab[aria-selected="true"]{background:var(--navy); color:var(--white);}
.mode-tab:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}

.mode-panel[hidden]{display:none;}
.mode-panel{display:flex; flex-direction:column; gap:6px; animation:modeIn 0.18s ease-out;}
/* Transition volontairement minimale : une opacité et 4 px. Au-delà, la bascule
   entre deux champs attire plus l'œil que le champ lui-même. */
@keyframes modeIn{from{opacity:0; transform:translateY(4px);} to{opacity:1; transform:none;}}
@media (prefers-reduced-motion:reduce){.mode-panel{animation:none;}}

/* ============ FAC-SIMILÉ DE PLAQUE ============ */
/* Bandeau européen, saisie, bandeau territorial. Hauteur fixée à 62 px plutôt
   que le ratio d'une vraie plaque, qui la rendrait trop basse pour le doigt ;
   largeur fluide plutôt qu'un format fixe, pour rester lisible sur mobile. */
.plate{
  display:flex; align-items:stretch; width:100%; min-height:62px;
  border:2px solid #111111; border-radius:9px; background:#FFFFFF; overflow:hidden;
  transition:border-color 0.15s ease, box-shadow 0.15s ease;
}
.plate:focus-within{border-color:var(--navy); box-shadow:0 0 0 4px rgba(var(--navy-rgb),0.14);}
.plate.has-error{border-color:var(--warn);}

.plate-band, .plate-region{
  flex:0 0 40px; display:flex; flex-direction:column;
  align-items:center; justify-content:center; gap:4px;
  background:#003399; padding:6px 0;
}
.plate-band svg, .plate-region svg{display:block;}
.plate-cc, .plate-num{
  font-family:var(--font-display); font-weight:800; font-size:0.95rem;
  line-height:1; color:#FFFFFF;
}
/* Le numéro est l'élément le plus lu du bandeau : il porte le département de la
   page. Il prend donc plus de corps que le « F » du bandeau européen. */
.plate-num{font-size:1.12rem; font-variant-numeric:tabular-nums;}
/* L'emblème régional est un carré blanc : sans coins arrondis il jure avec le
   rayon de la plaque, et sans marge il touche le bord du bandeau. */
.plate-idf{border-radius:2px;}

/* La saisie n'a ni bordure ni fond : c'est la plaque qui porte le cadre.
   Les règles génériques de .form-field input sont donc neutralisées ici. */
.form-field .plate-input{
  flex:1 1 auto; min-width:0; width:100%;
  border:0; outline:none; background:transparent;
  min-height:auto; padding:8px 4px; border-radius:0;
  text-align:center; text-transform:uppercase;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.15rem,4.4vw,1.55rem); letter-spacing:0.1em;
  color:#111111; font-variant-numeric:tabular-nums;
}
.form-field .plate-input:focus{box-shadow:none; background:transparent;}
.plate-input::placeholder{color:#B9BEC9; letter-spacing:0.1em;}
.plate-hint{font-size:0.78rem; color:var(--slate);}

/* Sous 420px, les bandeaux se resserrent pour laisser la place à la saisie. */
@media (max-width:420px){
  .plate{min-height:56px;}
  .plate-band, .plate-region{flex-basis:33px;}
  .plate-cc, .plate-num{font-size:0.82rem;}
}

/* ============ PHOTOS DU VÉHICULE ============ */
/* Bande compacte plutôt qu'une grande zone : le formulaire est déjà long, et
   une zone haute occuperait un tiers de l'écran sur mobile. Le glisser-déposer
   reste actif sur toute la bande. */
.photo-drop{
  display:flex; align-items:center; gap:13px; padding:14px 16px;
  border:1.5px dashed #C9CFE4; border-radius:12px; background:var(--bg);
  transition:border-color 0.15s ease, background 0.15s ease;
}
.photo-drop.is-over{border-color:var(--navy); background:var(--bg-soft);}
.photo-icon{
  flex:0 0 auto; display:grid; place-items:center; width:44px; height:44px;
  border-radius:50%; background:var(--bg-soft);
}
.photo-text{flex:1 1 auto; min-width:0;}
.photo-main{display:block; font-family:var(--font-display); font-weight:700; font-size:0.86rem; color:var(--ink);}
.photo-sub{display:block; font-size:0.78rem; color:var(--slate);}
.photo-btn{
  flex:0 0 auto; padding:9px 15px; border-radius:999px; cursor:pointer;
  border:1.5px solid var(--navy); background:var(--white); color:var(--navy);
  font-family:var(--font-display); font-weight:700; font-size:0.8rem;
  transition:background 0.15s ease, color 0.15s ease;
}
.photo-btn:hover{background:var(--navy); color:var(--white);}
.photo-btn:disabled{opacity:0.5; cursor:not-allowed;}
.photo-btn:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}

/* auto-fill : la grille passe de 5 à 2 colonnes sans media query. */
.photo-grid{display:grid; gap:10px; margin-top:12px; grid-template-columns:repeat(auto-fill,minmax(78px,1fr));}
.photo-grid:empty{display:none;}
.photo-thumb{
  position:relative; aspect-ratio:1; border-radius:var(--radius-md);
  overflow:hidden; background:var(--bg-soft); border:1px solid var(--bg-soft);
}
.photo-thumb img{width:100%; height:100%; object-fit:cover; display:block;}
/* Le « × » reste visible en permanence : au doigt, il n'y a pas de survol. */
.photo-del{
  position:absolute; top:4px; right:4px; width:24px; height:24px; padding:0;
  display:grid; place-items:center; cursor:pointer; border:0; border-radius:50%;
  background:rgba(22,34,44,0.72); color:#FFFFFF; font-size:15px; line-height:1;
  transition:background 0.15s ease;
}
.photo-del:hover{background:rgba(22,34,44,0.92);}
.photo-del:focus-visible{outline:2px solid var(--white); outline-offset:-2px;}
.photo-count{margin:8px 0 0; font-size:0.76rem; color:var(--slate); font-variant-numeric:tabular-nums;}
/* Erreurs d'ajout : même ton que les erreurs de champ, jamais une alerte rouge. */
.photo-errors{margin-top:8px; display:flex; flex-direction:column; gap:4px;}
.photo-errors p{margin:0; display:flex; gap:7px; align-items:flex-start; font-size:0.79rem; color:var(--warn);}
.photo-errors svg{flex:0 0 auto; margin-top:3px;}

@media (max-width:900px){.contact-layout{grid-template-columns:1fr;} .form-card{padding:var(--sp-5);}}
@media (max-width:560px){
  .form-grid{grid-template-columns:1fr;}
  /* Le rail prend toute la largeur : deux onglets serrés à gauche laissaient un
     vide déséquilibré à droite. */
  .mode-tabs{display:flex; width:100%;}
  .mode-tab{flex:1; justify-content:center;}
}

/* Sous 480px, les trois éléments de la bande photos ne tiennent plus côte à
   côte : le bouton passait à la ligne en emportant l'icône, et la bande
   grimpait à 176 px. Le texte et le bouton s'empilent alors sous l'icône,
   dans une hauteur maîtrisée. */
@media (max-width:480px){
  .photo-drop{flex-wrap:wrap; row-gap:10px;}
  .photo-text{flex:1 1 140px;}
  .photo-btn{width:100%; order:3;}
}

/* ============ AVIS ============ */
.reviews-grid{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:var(--sp-4);}

/* Colonne : le pied de carte est poussé en bas par `margin-top:auto`, ce qui
   aligne ville et véhicule d'une carte à l'autre malgré des témoignages de
   longueurs différentes. */
.review-card{
  display:flex; flex-direction:column; margin:0;
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  padding:var(--sp-5); box-shadow:var(--shadow-sm);
}

.review-head{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--sp-3); flex-wrap:wrap; margin-bottom:var(--sp-3);
}
.review-name{
  font-family:var(--font-display); font-weight:700; font-size:1.02rem; color:var(--navy);
}
/* `line-height:0` supprime l'espace que la ligne de texte réserverait sous les
   étoiles, qui sont des SVG alignés entre eux. */
.review-stars{display:inline-flex; gap:2px; line-height:0; flex-shrink:0;}

.review-text{
  margin:0; font-size:0.94rem; line-height:1.65; color:var(--slate);
}
/* Guillemets français, ajoutés en CSS : ils appartiennent à la présentation,
   pas au texte de l'avis stocké dans les données. */
.review-text::before{content:"« ";}
.review-text::after{content:" »";}

/* Grille et non `flex-wrap` : les lignes sont ainsi identiques d'une carte à
   l'autre, alors qu'un retour à la ligne automatique dépendait de la longueur
   du nom de ville et cassait l'alignement entre cartes voisines. */
.review-meta{
  display:grid; gap:8px;
  margin-top:auto; padding-top:var(--sp-4); border-top:var(--border);
  font-size:0.85rem; color:var(--slate);
}
.review-meta > span{display:inline-flex; align-items:center; gap:7px;}
.review-meta svg{flex-shrink:0;}

/* Tablette : deux colonnes, la troisième carte passe dessous et occupe toute
   la largeur plutôt que de laisser un vide. */
@media (max-width:1000px){
  .reviews-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .reviews-grid .review-card:last-child{grid-column:1/-1;}
}
@media (max-width:700px){
  .reviews-grid{grid-template-columns:1fr;}
  .reviews-grid .review-card:last-child{grid-column:auto;}
  .review-card{padding:var(--sp-4);}
}

/* ============ FAQ ============ */
.faq-list{max-width:760px;}
.faq-item{border-bottom:var(--border);}
.faq-question{
  width:100%; text-align:left; background:none; border:none; cursor:pointer;
  padding:var(--sp-4) 0; display:flex; justify-content:space-between; align-items:center; gap:var(--sp-3);
  font-family:var(--font-display); font-weight:600; font-size:1.02rem; color:var(--navy);
}
.faq-icon{flex-shrink:0; transition:transform 0.2s ease; color:var(--cta);}
.faq-question[aria-expanded="true"] .faq-icon{transform:rotate(45deg);}
.faq-answer{
  max-height:0; overflow:hidden; transition:max-height 0.25s ease;
}
.faq-answer-inner{padding-bottom:var(--sp-4); font-size:0.95rem; color:var(--slate); max-width:640px;}
/* Liens de maillage interne dans les réponses. Style repris de `.idf-links a` :
   le soulignement discret suffit à signaler le lien sans trouer le paragraphe
   de bleu vif, et la reprise du même traitement évite d'introduire une seconde
   esthétique de lien contextuel sur le site. */
.faq-answer-inner a{color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(3,3,146,0.25);}
.faq-answer-inner a:hover{border-bottom-color:var(--navy);}

/* ============ CTA FINAL ============ */
.cta-final{background:var(--navy); color:var(--white); text-align:center;}
.cta-final h2{color:var(--white); margin-bottom:var(--sp-3);}
.cta-final p{color:rgba(247,249,251,0.75); max-width:520px; margin:0 auto var(--sp-5);}
.cta-final .hero-ctas{justify-content:center;}

/* ============ FOOTER ============ */
/* Le rembourrage bas était retombé à sp-6 du temps où le bandeau des centres
   partenaires fermait le pied de page : il fallait éviter un vide avant lui. Ce
   bandeau ayant été retiré au profit de la section « Centre VHU » de la
   homepage, le pied de page se termine de nouveau sur `.footer-bottom` et
   retrouve un rembourrage symétrique. */
.site-footer{background:var(--navy); color:rgba(247,249,251,0.75); padding:var(--sp-7) 0;}
.footer-grid{display:grid; grid-template-columns:1.3fr 1fr 1.1fr 1fr; gap:var(--sp-6);}
.footer-brand .brand-name{color:var(--white);}
/* Déclinaison blanche du logo, lisible sur le bleu du pied de page. */
.footer-mark{height:64px; width:auto; display:block;}
.footer-brand p{margin-top:var(--sp-3); font-size:0.9rem; max-width:280px;}
@media (max-width:560px){.footer-mark{height:54px;}}
/* Titres de colonnes du pied de page.
   Élément non-heading : ce sont des étiquettes de colonnes, pas des sections du
   document. En <h4> ils créaient un saut H2 → H4 sur toutes les pages, le
   niveau 3 étant absent du footer — un lecteur d'écran y annonçait une
   sous-section qui n'existe pas.
   `font-weight` est explicite : le navigateur le donnait gratuitement à <h4>,
   pas à <p>. Sans lui le rendu changerait. */
.footer-col .footer-col-title{font-family:var(--font-display); font-weight:700; color:var(--white); font-size:0.9rem; margin-bottom:var(--sp-3);}
.footer-col ul{list-style:none; margin:0; padding:0; display:grid; gap:10px;}
.footer-col a{text-decoration:none; font-size:0.9rem; color:rgba(247,249,251,0.75);}
.footer-col a:hover{color:var(--white);}
/* Colonne des départements : huit entrées là où les autres colonnes en portent
   deux à sept. Interligne resserré pour qu'elle ne déborde pas les autres, et
   numéro atténué — c'est le nom du département que l'on lit, le numéro ne fait
   que le confirmer. */
.footer-depts{gap:7px !important;}
.footer-depts a{font-size:0.86rem;}
.footer-depts span{color:rgba(247,249,251,0.4); margin:0 2px;}
.footer-bottom{
  margin-top:var(--sp-7); padding-top:var(--sp-4); border-top:1px solid rgba(247,249,251,0.15);
  font-size:0.8rem; display:flex; justify-content:space-between; flex-wrap:wrap; gap:var(--sp-3);
}
/* Mentions légales et politique de confidentialité : elles ferment la barre du
   bas à droite plutôt que d'occuper une colonne « Informations » entière. */
.footer-legal-links{display:flex; flex-wrap:wrap; gap:var(--sp-4);}
.footer-legal-links a{color:inherit; text-decoration:none;}
.footer-legal-links a:hover{color:var(--white); text-decoration:underline;}
@media (max-width:900px){.footer-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.footer-grid{grid-template-columns:1fr;}}

/* ============ SECTION CENTRE VHU (homepage) ============ */
/* Remplace le bandeau de centres partenaires qui fermait le pied de page.
   Classes préfixées `vhuc-` : les classes `vhu-*` appartiennent à la section
   « recyclage » des pages départementales et ne doivent pas être touchées.

   Fond `--ink-deep`, plus profond que le `--navy` des sections sombres
   voisines : la section précède le pied de page bleu et doit s'en détacher,
   sans quoi les deux zones se confondraient en un seul aplat. */
.vhuc{background:var(--ink-deep); color:var(--white);}

.vhuc-head{max-width:660px; margin:0 0 var(--sp-7);}
.vhuc .eyebrow{color:var(--accent-light); display:block;}
.vhuc-h2{color:var(--white); margin-top:var(--sp-3);}
/* La phrase de positionnement porte la section : elle est dimensionnée entre le
   h2 et le corps de texte, et c'est le seul endroit où l'accent clair sert de
   couleur de texte longue. */
.vhuc-claim{
  margin:var(--sp-4) 0 0; max-width:34ch;
  font-family:var(--font-display); font-weight:700;
  font-size:clamp(1.15rem, 2.4vw, 1.5rem); line-height:1.3;
  color:var(--accent-light);
}
.vhuc-lede{
  margin:var(--sp-4) 0 0; max-width:64ch;
  font-size:1.02rem; line-height:1.65; color:rgba(247,249,251,0.76);
}

/* --- Bloc de l'agrément propre --- */
/* Pièce maîtresse de la section. Le halo radial et la bordure claire l'isolent
   du fond sans recourir à une carte pleine, qui l'aurait banalisé au rang des
   quatre cartes de réassurance plus bas. */
.vhuc-approval{margin-bottom:var(--sp-8);}
.vhuc-approval-inner{
  position:relative; overflow:hidden;
  padding:var(--sp-6) var(--sp-5); text-align:center;
  border:1px solid rgba(166,168,255,0.34); border-radius:var(--radius-xl);
  background:
    radial-gradient(120% 140% at 50% 0%, rgba(166,168,255,0.20) 0%, rgba(166,168,255,0) 62%),
    rgba(3,3,146,0.42);
}
.vhuc-approval-label{
  display:inline-flex; align-items:center; gap:8px;
  font-family:var(--font-display); font-weight:700;
  font-size:0.82rem; letter-spacing:0.08em; text-transform:uppercase;
  color:var(--accent-light);
}
/* Le numéro est le point d'arrivée du regard. `letter-spacing` l'espace sans
   altérer la chaîne : un visiteur qui le copie obtient bien « PR9100012D ».
   `word-break` évite tout débordement sur les très petits écrans, où la taille
   fluide reste large. */
.vhuc-approval-num{
  margin:var(--sp-4) 0 0;
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem, 7vw, 3.4rem); line-height:1.05;
  letter-spacing:0.10em; color:var(--white);
  font-variant-numeric:tabular-nums; word-break:break-word;
}
.vhuc-approval-holder{
  margin:var(--sp-3) 0 0;
  font-family:var(--font-display); font-weight:700; font-size:1.05rem;
  color:var(--white);
}
.vhuc-approval-mention{
  margin:4px 0 0; font-size:0.85rem; color:rgba(247,249,251,0.62);
}
.vhuc-approval-note{
  margin:var(--sp-4) auto 0; max-width:60ch; text-align:center;
  font-size:0.88rem; line-height:1.6; color:rgba(247,249,251,0.62);
}

/* --- Sous-titres de bloc --- */
.vhuc-sub{
  margin:0 0 var(--sp-5);
  font-family:var(--font-display); font-weight:800;
  font-size:1.25rem; line-height:1.25; color:var(--white);
}

/* --- Les cinq étapes --- */
/* Cinq colonnes reliées par un filet horizontal. Le filet est un
   pseudo-élément du <ol>, tracé derrière les pastilles : le dessiner sur
   chaque <li> aurait laissé un trait dépassant aux deux extrémités. */
.vhuc-steps-block{margin-bottom:var(--sp-8);}
.vhuc-steps{
  position:relative; list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(5,1fr); gap:var(--sp-5) var(--sp-4);
}
.vhuc-steps::before{
  content:""; position:absolute; top:17px; left:10%; right:10%;
  height:1px; background:rgba(166,168,255,0.28);
}
.vhuc-step{position:relative; display:flex; flex-direction:column; gap:6px;}
.vhuc-step-n{
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; margin-bottom:var(--sp-2);
  font-family:var(--font-display); font-weight:800; font-size:0.8rem;
  color:var(--accent-light);
  background:var(--ink-deep);
  border:1px solid rgba(166,168,255,0.42); border-radius:99px;
}
.vhuc-step-title{
  font-family:var(--font-display); font-weight:700; font-size:0.98rem;
  line-height:1.3; color:var(--white);
}
.vhuc-step-text{
  font-size:0.87rem; line-height:1.55; color:rgba(247,249,251,0.68);
}

/* --- Réseau partenaire --- */
.vhuc-network{
  margin-bottom:var(--sp-8); padding-top:var(--sp-6);
  border-top:1px solid rgba(247,249,251,0.14);
}
.vhuc-network-text{
  margin:0; max-width:64ch;
  font-size:0.98rem; line-height:1.65; color:rgba(247,249,251,0.76);
}
/* Pastilles de département : reprennent le traitement de l'ancien `.vhu-dept`
   du pied de page, agrandi pour tenir seul le rôle que huit fiches occupaient. */
.vhuc-depts{
  list-style:none; margin:var(--sp-5) 0 0; padding:0;
  display:flex; flex-wrap:wrap; gap:var(--sp-3);
}
.vhuc-dept{
  min-width:58px; padding:10px 16px; text-align:center;
  font-family:var(--font-display); font-weight:800; font-size:1rem;
  color:var(--accent-light);
  background:rgba(166,168,255,0.12);
  border:1px solid rgba(166,168,255,0.26); border-radius:99px;
  font-variant-numeric:tabular-nums;
}
.vhuc-network-note{
  margin:var(--sp-4) 0 0; max-width:60ch;
  font-size:0.85rem; line-height:1.6; color:rgba(247,249,251,0.55);
}

/* --- Quatre cartes de réassurance --- */
.vhuc-cards{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);
}
.vhuc-card{
  display:flex; flex-direction:column; gap:10px;
  padding:var(--sp-5) var(--sp-4);
  background:rgba(247,249,251,0.045);
  border:1px solid rgba(247,249,251,0.12); border-radius:var(--radius-lg);
}
.vhuc-card-icon{display:flex; opacity:0.95;}
.vhuc-card-title{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  color:var(--white);
}
.vhuc-card-text{
  font-size:0.88rem; line-height:1.55; color:rgba(247,249,251,0.68);
}

/* --- CTA de clôture --- */
.vhuc-cta{margin-top:var(--sp-7); text-align:center;}
.vhuc-cta-note{
  margin:var(--sp-3) 0 0; font-size:0.87rem; color:rgba(247,249,251,0.62);
}

/* --- Adaptations --- */
/* Le filet horizontal des étapes disparaît dès que la grille se replie : il ne
   relierait plus une séquence mais traverserait des lignes sans rapport. */
@media (max-width:1000px){
  .vhuc-steps{grid-template-columns:repeat(3,1fr); gap:var(--sp-5);}
  .vhuc-steps::before{display:none;}
  .vhuc-cards{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:700px){
  .vhuc-approval-inner{padding:var(--sp-5) var(--sp-4);}
  .vhuc-steps{grid-template-columns:repeat(2,1fr);}
}
@media (max-width:520px){
  .vhuc-head{margin-bottom:var(--sp-6);}
  .vhuc-approval,
  .vhuc-steps-block,
  .vhuc-network{margin-bottom:var(--sp-7);}
  .vhuc-steps{grid-template-columns:1fr; gap:var(--sp-4);}
  /* En colonne unique, le numéro passe en regard du titre : empilé, il ajoutait
     cinq lignes de hauteur pour cinq chiffres. */
  .vhuc-step{
    display:grid; grid-template-columns:34px 1fr;
    column-gap:var(--sp-3); row-gap:4px; align-items:start;
  }
  .vhuc-step-n{margin-bottom:0; grid-row:span 2;}
  .vhuc-cards{grid-template-columns:1fr;}
  .vhuc-dept{min-width:52px; padding:9px 14px; font-size:0.94rem;}
  .vhuc-depts{gap:10px;}
}

/* ============ SECTION VHU ============ */
.vhu-intro { max-width:720px; margin-bottom:var(--sp-8); }
.vhu-intro h2 { margin-bottom:var(--sp-4); }
.vhu-intro-text { font-size:1.05rem; line-height:1.7; color:var(--slate); margin:0; }

.vhu-services { display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4); margin-bottom:var(--sp-8); }
.vhu-service { background:var(--white); border:1px solid var(--bg-soft); border-radius:var(--radius-md); padding:var(--sp-5) var(--sp-4); }
.vhu-service-num { display:inline-block; font-family:var(--font-display); font-size:1.3rem; font-weight:800; color:var(--navy); margin-bottom:var(--sp-4); letter-spacing:0.08em; }
.vhu-service h3 { font-size:1rem; margin-bottom:var(--sp-3); }
.vhu-service p { font-size:0.9rem; line-height:1.6; color:var(--slate); margin:0; }

.vhu-explain { background:var(--white); border:1px solid var(--bg-soft); border-radius:var(--radius-md); padding:var(--sp-6) var(--sp-5); margin-bottom:var(--sp-8); display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-6); align-items:start; }
.vhu-explain h3 { font-size:1.15rem; margin-bottom:var(--sp-5); }
.vhu-explain-text { font-size:0.95rem; line-height:1.7; color:var(--slate); margin-bottom:var(--sp-4); }
.vhu-explain-text:last-child { margin-bottom:0; }
.vhu-explain-list { list-style:none; margin:0; padding:0; }
.vhu-explain-list li { font-size:0.9rem; line-height:1.6; color:var(--slate); margin-bottom:var(--sp-3); padding-left:var(--sp-4); position:relative; }
.vhu-explain-list li::before { content:'▸'; position:absolute; left:0; color:var(--accent-light); font-weight:bold; font-size:1.2rem; }

.vhu-approval { background:var(--white); border:2px solid var(--accent-light); border-radius:var(--radius-md); padding:var(--sp-6) var(--sp-5); text-align:center; margin-bottom:var(--sp-8); }
.vhu-approval-label { font-size:0.75rem; font-weight:700; letter-spacing:0.1em; text-transform:uppercase; color:var(--navy); margin-bottom:var(--sp-4); display:block; }
.vhu-approval-num { font-family:var(--font-display); font-size:2.4rem; font-weight:800; letter-spacing:0.08em; color:var(--navy); margin-bottom:var(--sp-3); font-variant-numeric:tabular-nums; }
.vhu-approval-name { font-family:var(--font-display); font-size:1.1rem; font-weight:700; color:var(--navy); margin-bottom:var(--sp-3); }
.vhu-approval-text { font-size:0.9rem; line-height:1.6; color:var(--slate); max-width:600px; margin:0 auto; }

.vhu-coverage { background:var(--white); border:1px solid var(--bg-soft); border-radius:var(--radius-md); padding:var(--sp-6) var(--sp-5); margin-bottom:var(--sp-8); }
.vhu-coverage h3 { margin-bottom:var(--sp-4); }
.vhu-coverage-text { font-size:0.95rem; line-height:1.7; color:var(--slate); max-width:700px; margin-bottom:var(--sp-5); }
.vhu-depts { list-style:none; margin:0; padding:0; display:flex; flex-wrap:wrap; gap:var(--sp-3); }
.vhu-dept { background:var(--bg); border:1px solid var(--bg-soft); border-radius:99px; min-width:50px; padding:10px 14px; text-align:center; font-family:var(--font-display); font-weight:700; font-size:0.9rem; color:var(--navy); font-variant-numeric:tabular-nums; }

.vhu-cta { text-align:center; }
.vhu-cta-note { font-size:0.9rem; color:var(--slate); margin-top:var(--sp-3); }

@media (max-width:1024px){
  .vhu-services { grid-template-columns:repeat(2,1fr); }
  .vhu-explain { grid-template-columns:1fr; gap:var(--sp-5); }
}
@media (max-width:768px){
  .vhu-services { grid-template-columns:1fr; gap:var(--sp-3); }
  .vhu-explain { padding:var(--sp-5) var(--sp-4); }
  .vhu-approval { padding:var(--sp-5) var(--sp-4); }
  .vhu-approval-num { font-size:1.8rem; }
  .vhu-coverage { padding:var(--sp-5) var(--sp-4); }
}

/* ============ MOBILE STICKY CTA ============ */
.mobile-sticky-cta{
  display:none;
  position:fixed; left:0; right:0; bottom:0; z-index:45;
  background:var(--white); border-top:var(--border);
  padding:10px var(--sp-4); box-shadow:0 -4px 14px rgba(11,31,51,0.08);
  gap:10px;
}
.mobile-sticky-cta .btn-primary{flex:1; white-space:normal; font-size:0.85rem; line-height:1.2; text-align:center; padding:12px 10px;}
.mobile-sticky-cta .btn-icon{
  width:48px; height:48px; flex-shrink:0; padding:0; border-radius:var(--radius-md);
  background:var(--bg-soft); color:var(--navy); border:1px solid var(--bg-soft);
}
@media (max-width:640px){
  .mobile-sticky-cta{display:flex;}
  body{padding-bottom:76px;}
}

.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 link */
.skip-link{
  position:absolute; left:-9999px; top:0; background:var(--navy); color:var(--white);
  padding:10px 16px; z-index:100; border-radius:0 0 8px 0;
}
.skip-link:focus{left:0;}

/* ============ BREADCRUMB ============ */
.breadcrumb{padding:var(--sp-3) 0; background:var(--bg);}
.breadcrumb ol{list-style:none; display:flex; gap:8px; margin:0; padding:0; font-size:0.85rem; color:var(--slate);}
.breadcrumb a{text-decoration:none; color:var(--slate);}
.breadcrumb a:hover{color:var(--cta);}
.breadcrumb li[aria-current]{color:var(--navy); font-weight:600;}

/* ============ INTRO LOCALE ============ */
.intro p + p{margin-top:var(--sp-3);}
.intro{max-width:760px; font-size:1.02rem; color:var(--slate);}

/* ============ CARTES SITUATIONS — variante page départementale ============ */
.card-grid--dept{grid-template-columns:repeat(3,1fr);}
@media (max-width:900px){.card-grid--dept{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){.card-grid--dept{grid-template-columns:1fr;}}

/* Bloc d'aide sous les cartes « situations ».
   Il doit se distinguer des cartes sans leur faire concurrence : le lilas
   --bg-soft est celui des pastilles d'icônes des cartes elles-mêmes, donc
   aucune couleur nouvelle n'entre dans la section. La bordure est le bleu de
   marque très dilué, plus discrète que celle des cartes. Ne pas lui donner
   d'ombre : elle le ferait lire comme une septième carte. */
.situations-help{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-4); padding:var(--sp-4);
  background:var(--bg-soft);
  border:1px solid rgba(3,3,146,0.10);
  border-radius:var(--radius-md);
}
.situations-help .help-icon{
  flex:none; width:38px; height:38px; border-radius:50%;
  background:var(--white); display:flex; align-items:center; justify-content:center;
}
/* min-width:0 : sans lui, le texte long empêcherait l'élément flexible de
   rétrécir et pousserait le bouton hors du bloc en largeur intermédiaire. */
.situations-help .help-copy{flex:1; min-width:0;}
.situations-help strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; color:var(--ink); margin-bottom:4px;
}
.situations-help p{font-size:0.9rem; color:var(--slate);}
.situations-help .btn{flex:none;}
@media (max-width:720px){
  .situations-help{flex-direction:column; align-items:flex-start; gap:var(--sp-3);}
  .situations-help .btn{width:100%;}
}

/* ============ POURQUOI EPAV'ACTION (local) ============ */
.why-layout{display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-8); align-items:center;}
/* Le titre tient en DEUX lignes exactement, coupées au <br> posé après le nom de
   la marque. La colonne étant plus étroite que le titre, chaque moitié se
   couperait à son tour et le titre passerait à trois lignes : `nowrap` l'en
   empêche, le titre débordant alors légèrement sur la gouttière plutôt que de se
   fragmenter. Sous 900px la grille repasse à une colonne, la largeur redevient
   suffisante et la règle est levée. */
@media (min-width:901px){
  .why-layout h2{white-space:nowrap;}
}
/* Phrase d'introduction sous le titre. Volontairement secondaire : c'est une
   mise en contexte, les arguments sont dans la liste qui suit. La largeur est
   bornée en caractères plutôt qu'en pixels, la colonne étant déjà étroite. */
.why-lede{margin-top:var(--sp-3); max-width:52ch; font-size:1.02rem; color:var(--slate);}
.why-points{list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:var(--sp-3);}
.why-points li{display:flex; gap:var(--sp-3); align-items:flex-start; font-size:0.98rem;}
.why-points svg{flex-shrink:0; margin-top:3px;}
/* Points en deux niveaux (titre + description), utilisés par les pages dont le
   contenu local est rédigé. Les points restés en phrase simple ne portent pas
   ces éléments et gardent donc exactement leur rendu d'origine. */
.why-points b{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; color:var(--ink); margin-bottom:2px;
}
.why-points b + span{display:block; font-size:0.9rem; color:var(--slate);}
/* Note de clôture : une respiration après la liste, pas un argument de plus.
   D'où la taille réduite et l'opacité — elle ne doit pas concurrencer les
   points qui la précèdent. */
.why-note{margin-top:var(--sp-4); font-size:0.88rem; color:var(--slate); opacity:0.85;}
.why-visual{border-radius:var(--radius-lg); overflow:hidden; aspect-ratio:4/3; box-shadow:var(--shadow-md);}
.why-visual img{width:100%; height:100%; object-fit:cover;}
@media (max-width:900px){.why-layout{grid-template-columns:1fr;} .why-visual{order:-1;}}

/* ============ ZONE LOCALE (placeholder) ============ */
.zone-note{
  background:var(--white); border:1px dashed var(--slate); border-radius:var(--radius-md);
  padding:var(--sp-5); font-size:0.98rem; color:var(--slate); max-width:760px;
}
.zone-note strong{color:var(--navy);}

/* ============ ZONE LOCALE — carte et communes ============ */
/* Rendu des pages dont la couverture est confirmée. Les pages sans couverture
   confirmée gardent `.zone-note` ci-dessus : les deux ne coexistent jamais. */
.zone-layout{
  display:grid; grid-template-columns:minmax(0,1fr) minmax(0,0.85fr);
  gap:var(--sp-6); align-items:start; margin-top:var(--sp-5);
}
.dept-map{
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-md); padding:var(--sp-4);
}
.dept-map svg{width:100%; height:auto; display:block;}
/* Le contour est en pointillé, et c'est délibéré : un trait plein dessinerait
   une frontière entre communes desservies et non desservies, alors que la
   couverture est départementale. Le pointillé se lit « limite indicative ». */
.dm-outline{fill:none; stroke:var(--accent-light); stroke-width:1.5; stroke-dasharray:5 4;}
.dm-fill{fill:var(--cta); opacity:0.045;}
.dm-halo{fill:var(--cta); opacity:0.14;}
.dm-dot{fill:var(--cta);}
.dm-label{
  font-family:var(--font-display); font-size:8.5px; font-weight:600; fill:var(--slate);
}
.dept-map-cap{
  margin-top:var(--sp-3); font-size:0.8rem; color:var(--slate);
  opacity:0.85; text-align:center;
}
.zone-cities{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-2);
}
.zone-city{
  background:var(--white); border:var(--border); border-radius:var(--radius-md);
  padding:10px var(--sp-3); box-shadow:var(--shadow-sm);
}
.zone-city b{
  display:block; font-family:var(--font-display); font-size:0.95rem; color:var(--ink);
  overflow-wrap:break-word;
}
.zone-city span{font-size:0.78rem; color:var(--slate);}
.zone-cities-note{margin-top:var(--sp-3); font-size:0.86rem; color:var(--slate); opacity:0.9;}

/* Indicateur de disponibilité. La pastille reprend les teintes du badge du
   Hero (`data-tone`), pour que les deux affichages ne se contredisent pas. */
.zone-avail{
  display:flex; align-items:center; gap:var(--sp-3);
  background:var(--bg-soft); border:1px solid rgba(3,3,146,0.10);
  border-radius:var(--radius-md); padding:var(--sp-3) var(--sp-4);
}
.zone-avail-dot{
  width:10px; height:10px; border-radius:50%; flex:none;
  background:#18A957; box-shadow:0 0 0 4px rgba(24,169,87,0.16);
}
.zone-avail[data-tone="green-light"] .zone-avail-dot{background:#4FBF7B; box-shadow:0 0 0 4px rgba(79,191,123,0.16);}
.zone-avail[data-tone="amber"] .zone-avail-dot{background:#E0A100; box-shadow:0 0 0 4px rgba(224,161,0,0.16);}
.zone-avail[data-tone="night"] .zone-avail-dot{background:var(--slate); box-shadow:0 0 0 4px rgba(72,88,106,0.16);}
.zone-avail-body{flex:1; min-width:0;}
.zone-avail-body b{
  display:block; font-family:var(--font-display); font-size:0.95rem; color:var(--ink);
}
.zone-avail-body span{font-size:0.82rem; color:var(--slate);}
.zone-avail-delay{text-align:right; flex:none;}
.zone-avail-delay b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:1.05rem; color:var(--navy);
}
.zone-avail-delay span{font-size:0.74rem; color:var(--slate);}

/* Même motif que le bloc d'aide des cartes « situations » : le visiteur
   reconnaît un bloc qui répond à une question qu'il se pose. */
.zone-help{
  display:flex; align-items:center; gap:var(--sp-4);
  margin-top:var(--sp-5); padding:var(--sp-4);
  background:var(--bg-soft); border:1px solid rgba(3,3,146,0.10);
  border-radius:var(--radius-md);
}
.zone-help-copy{flex:1; min-width:0;}
.zone-help-copy strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1rem; color:var(--ink); margin-bottom:4px;
}
.zone-help-copy p{font-size:0.9rem; color:var(--slate);}
.zone-help .btn{flex:none;}

@media (max-width:900px){
  /* Ordre mobile : texte, carte, villes, CTA — la carte passe donc au-dessus
     de la liste, qu'elle sert à situer. */
  .zone-layout{grid-template-columns:1fr;}
}
@media (max-width:600px){
  /* Le délai passe sous la zone : à trois colonnes, la ligne se comprimait et
     « délai moyen estimé après contact » se coupait en trois lignes. */
  .zone-avail{flex-wrap:wrap;}
  .zone-avail-delay{text-align:left; width:100%; padding-left:22px;}
}
@media (max-width:720px){
  .zone-help{flex-direction:column; align-items:flex-start; gap:var(--sp-3);}
  .zone-help .btn{width:100%;}
}

/* ============ SPÉCIFICITÉS LOCALES (contexte d'accès) ============ */
/* Quatre blocs plus sobres que les cartes « situations » : pas d'ombre au
   survol, pas de photo. La section informe, elle ne propose pas de choix —
   elle ne doit donc pas se lire comme une grille de services cliquables. */
.ctx-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-4);}
.ctx-card{
  display:flex; flex-direction:column; gap:var(--sp-2);
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--sp-4);
}
.ctx-icon{
  width:42px; height:42px; border-radius:var(--radius-md); background:var(--bg-soft);
  display:flex; align-items:center; justify-content:center; margin-bottom:var(--sp-1);
}
.ctx-card h3{font-size:1rem; overflow-wrap:break-word;}
.ctx-card p{font-size:0.9rem; color:var(--slate); line-height:1.55;}

/* Conclusion centrée : c'est le seul bloc centré de la page, ce qui le détache
   des quatre cartes sans avoir besoin d'une couleur supplémentaire. */
.ctx-reassure{
  margin-top:var(--sp-5); padding:var(--sp-5); text-align:center;
  background:var(--bg-soft); border:1px solid rgba(3,3,146,0.10);
  border-radius:var(--radius-lg);
}
.ctx-reassure strong{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.15rem; color:var(--ink); margin-bottom:var(--sp-2);
}
.ctx-reassure p{font-size:0.95rem; color:var(--slate); max-width:62ch; margin:0 auto;}
.ctx-reassure .btn{margin-top:var(--sp-4);}

/* Mêmes seuils que les cartes « situations » : les deux grilles se
   réorganisent ensemble, la page ne change pas de rythme entre les deux. */
@media (max-width:900px){.ctx-grid{grid-template-columns:1fr 1fr;}}
@media (max-width:560px){
  .ctx-grid{grid-template-columns:1fr;}
  .ctx-reassure{padding:var(--sp-4);}
  .ctx-reassure .btn{width:100%;}
}

/* ============ AXES ROUTIERS — pages départementales ============ */
/* Section #axes-routiers, rendue par `axes()` dans templates/pages/department.js.
   Disposition : la vedette occupe la moitié gauche sur deux rangées, deux axes
   s'empilent à sa droite, les suivants passent en bande pleine largeur. */
.axes-grid{display:grid; grid-template-columns:repeat(4,1fr); gap:var(--sp-3);}

/* --- Tuile vedette : l'axe principal du département --- */
.axes-hero{
  grid-column:span 2; grid-row:span 2; color:var(--white);
  /* Deux couches : le voile bleu par-dessus, la photo dessous. Le voile est
     indispensable — la moitié gauche de la photo est très claire, et le texte
     blanc y serait illisible sans lui. Il s'allège vers la droite pour laisser
     voir la dépanneuse. Ne pas le supprimer : ce n'est pas un effet, c'est ce
     qui rend le texte lisible. */
  background:
    linear-gradient(100deg, rgba(3,3,146,0.86) 0%, rgba(3,3,146,0.62) 50%, rgba(3,3,146,0.60) 100%),
    url('/assets/img/autoroute-panne.jpg') center/cover no-repeat,
    var(--navy);
  border-radius:var(--radius-lg); padding:var(--sp-5);
  display:flex; flex-direction:column; gap:var(--sp-3);
  position:relative; overflow:hidden;
}
.axes-hero-tag{
  display:inline-flex; align-self:flex-start; align-items:center; gap:6px;
  background:rgba(255,255,255,0.14); color:var(--white);
  border-radius:100px; padding:5px 12px;
  font-family:var(--font-display); font-size:0.72rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; position:relative; z-index:1;
}
.axes-hero-shields{display:flex; align-items:center; gap:12px; flex-wrap:wrap; position:relative; z-index:1;}
/* Le panneau en grand. Sur le bleu de marque, un bleu autoroutier seul
   disparaîtrait : le liseré blanc et l'ombre portée le détachent, comme un
   panneau réel éclairé de nuit. */
.axes-hero-shield{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:104px; height:66px; padding:0 18px; border-radius:10px;
  background:#0B2E86; color:#FFFFFF;
  box-shadow:inset 0 0 0 2.5px rgba(255,255,255,0.95), 0 2px 10px rgba(0,0,0,0.25);
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.9rem,3.6vw,2.5rem); line-height:1; letter-spacing:-0.01em;
  font-variant-numeric:tabular-nums;
}
.axes-hero-shield--n{background:#C8102E;}
.axes-hero-shield--d{
  background:#FFCC00; color:#1A1A1A;
  box-shadow:inset 0 0 0 2.5px rgba(26,26,26,0.9), 0 2px 10px rgba(0,0,0,0.25);
}
/* Voie sans numéro réglementaire — périphérique, quais, Maréchaux. Neutre
   exprès : lui donner un écusson d'autoroute serait un faux panneau. */
.axes-hero-shield--v{
  background:rgba(255,255,255,0.14); color:#FFFFFF;
  box-shadow:inset 0 0 0 2px rgba(255,255,255,0.4);
  font-size:clamp(1.3rem,2.6vw,1.7rem);
}
.axes-hero-plus{font-family:var(--font-display); font-weight:700; font-size:1.5rem; color:rgba(255,255,255,0.55);}
/* Panneau du périphérique : le cartouche réglementaire réel, noir sur blanc.
   Il n'est pas recoloré aux couleurs du site — c'est un panneau officiel, et le
   repeindre en bleu le rendrait faux. L'ombre portée le pose sur le fond
   photographique comme une plaque appliquée. */
.axes-hero-plate{
  display:inline-flex; align-items:center; position:relative; z-index:1;
  filter:drop-shadow(0 2px 10px rgba(0,0,0,0.3));
}
.axes-hero-plate svg{display:block; height:auto; max-width:100%;}
/* Ombre portée sur le texte : compense l'éclaircissement du voile à droite,
   là où la photo transparaît. */
.axes-hero h3{color:var(--white); font-size:1.12rem; position:relative; z-index:1; text-shadow:0 1px 3px rgba(0,0,0,0.35);}
.axes-hero p{
  color:rgba(255,255,255,0.92); font-size:0.92rem; line-height:1.6;
  position:relative; z-index:1; text-shadow:0 1px 3px rgba(0,0,0,0.4);
}
/* `list-style:none` est indispensable : sans lui, les puces par défaut du
   navigateur réapparaissent entre les pastilles. Le site ne pose aucune règle
   globale sur les listes — chacune déclare la sienne. */
.axes-hero-towns{
  display:flex; flex-wrap:wrap; gap:6px;
  margin:auto 0 0; padding:var(--sp-3) 0 0;
  border-top:1px solid rgba(255,255,255,0.16); position:relative; z-index:1;
  list-style:none;
}
.axes-hero-towns li{
  background:rgba(255,255,255,0.12); color:var(--white);
  border-radius:100px; padding:4px 11px; font-size:0.78rem; font-weight:600;
}

/* --- Tuiles d'axes secondaires --- */
.axes-tile{
  background:var(--white); border:var(--border); border-radius:var(--radius-lg);
  box-shadow:var(--shadow-sm); padding:var(--sp-4);
  display:flex; flex-direction:column; gap:8px;
}
.axes-tile-top{display:flex; align-items:center; gap:10px; flex-wrap:wrap;}
.axes-tile h3{font-size:0.95rem;}
.axes-tile p{font-size:0.85rem; color:var(--slate); line-height:1.5;}
/* Deux colonnes : à droite de la vedette. Quatre : en bande sous le bloc. */
.axes-wide{grid-column:span 2; justify-content:center;}
.axes-band{grid-column:1 / -1; justify-content:center;}

/* --- Écussons réglementaires --- */
/* Couleurs du code de la route, et non de la charte du site :
     autoroute      bleu   #0B2E86
     nationale      rouge  #C8102E
     départementale jaune  #FFCC00
   Ce sont les seules valeurs étrangères à la palette, et elles sont normées.
   Le bleu autoroutier n'est PAS le bleu de marque #030392. */
.axes-shield{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:46px; height:30px; padding:0 9px; border-radius:6px;
  font-family:var(--font-display); font-weight:800; font-size:0.98rem;
  line-height:1; letter-spacing:0.01em; font-variant-numeric:tabular-nums;
  box-shadow:inset 0 0 0 1.5px rgba(255,255,255,0.95);
}
.axes-shield--a{background:#0B2E86; color:#FFFFFF;}
.axes-shield--n{background:#C8102E; color:#FFFFFF;}
.axes-shield--d{background:#FFCC00; color:#1A1A1A; box-shadow:inset 0 0 0 1.5px rgba(26,26,26,0.9);}
.axes-shield--v{
  background:var(--bg-soft); color:var(--navy);
  box-shadow:inset 0 0 0 1.5px rgba(var(--navy-rgb),0.18); font-size:0.82rem;
}
.axes-kind{
  font-family:var(--font-display); font-size:0.68rem; font-weight:700;
  letter-spacing:0.08em; text-transform:uppercase; color:var(--slate);
}

/* --- Légende du code couleur --- */
/* Sans elle, rien ne dit ce que signifient le bleu, le rouge et le jaune pour
   qui ne connaît pas la signalisation. Le décalage négatif la rapproche du
   chapeau de section, dont elle est le prolongement. */
.axes-legend{display:flex; flex-wrap:wrap; gap:var(--sp-4); margin:calc(var(--sp-6) * -1 + var(--sp-3)) 0 var(--sp-4);}
.axes-legend-item{display:inline-flex; align-items:center; gap:8px; font-size:0.8rem; font-weight:600; color:var(--slate);}
.axes-legend .axes-shield{min-width:34px; height:22px; font-size:0.72rem; padding:0 7px; font-style:normal;}

/* --- Bande de clôture : l'appel à l'action --- */
/* En GRILLE et non en flex : une disposition flex laissait la hauteur filer et
   rejetait le bouton tout en bas de la bande. Lilas et sans ombre, pour ne pas
   se lire comme une tuile d'axe de plus. */
.axes-cta{
  grid-column:1 / -1;
  background:var(--bg-soft); border:1px solid rgba(var(--navy-rgb),0.10);
  box-shadow:none; padding:var(--sp-4) var(--sp-5);
  display:grid; grid-template-columns:1fr auto;
  align-items:center; gap:var(--sp-3) var(--sp-5);
}
.axes-cta-copy{display:flex; flex-direction:column; gap:4px; min-width:0;}
.axes-cta strong{font-family:var(--font-display); font-weight:700; font-size:1.08rem; color:var(--ink);}
.axes-cta p{font-size:0.9rem; color:var(--slate); max-width:70ch;}
.axes-cta .btn{grid-column:2; justify-self:end; white-space:nowrap;}

/* Mêmes seuils que les grilles « situations » et « spécificités » : la page ne
   change pas de rythme d'une section à l'autre. */
@media (max-width:900px){
  .axes-grid{grid-template-columns:repeat(2,1fr);}
  .axes-hero{grid-column:span 2; grid-row:auto;}
  .axes-wide,.axes-band{grid-column:1 / -1;}
  /* Le bouton passe sous le texte : à cette largeur, le garder sur la même
     ligne comprimait la phrase à quelques mots par ligne. */
  .axes-cta{grid-template-columns:1fr;}
  .axes-cta .btn{grid-column:1; justify-self:start;}
}
@media (max-width:560px){
  .axes-grid{grid-template-columns:1fr;}
  .axes-hero,.axes-wide,.axes-band{grid-column:span 1;}
  .axes-hero{padding:var(--sp-4);}
  .axes-cta{padding:var(--sp-4);}
  .axes-cta .btn{justify-self:stretch; width:100%;}
}

/* ============ HERO — variante page départementale ============ */
/* Conserve à l'identique les hauteurs de la page locale historique. */
.hero--dept{min-height:600px;}
@media (min-width:901px){
  .hero--dept{min-height:min(80vh, 700px);}
}
.hero--dept .hero-sub{font-size:1.05rem; max-width:540px;}
@media (max-width:900px){
  .hero--dept{min-height:0;}
}

/* ==========================================================================
   CARTE DES INTERCOMMUNALITÉS
   Section « Le département 77, à votre service ».
   Carte SVG à gauche, liste à droite ; le panneau de droite bascule en détail
   des communes au clic, dans le même conteneur — ce n'est pas une surcouche.
   ========================================================================== */

.epci-layout{
  display:grid; grid-template-columns:minmax(0,1fr) 340px; gap:24px;
  align-items:start; margin-top:28px;
}
.epci-panel{
  background:#fff; border:1px solid var(--bg-soft); border-radius:var(--radius-xl);
  box-shadow:var(--shadow-sm);
}

/* ---- en-tête de la carte ---- */
.epci-maphead{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:17px 20px; border-bottom:1px solid var(--bg-soft);
}
.epci-maphead b{font-family:var(--font-display); font-size:0.95rem; color:var(--navy);}
.epci-maphead span{
  font-size:0.68rem; font-weight:600; letter-spacing:.1em; text-transform:uppercase;
  color:var(--slate);
}

/* ---- carte ---- */
.epci-mapwrap{position:relative; padding:14px 14px 0;}
.epci-svg{display:block; width:100%; height:auto;}
.epci-zone{
  stroke:#fff; stroke-width:1.8; stroke-linejoin:round; cursor:pointer;
  transition:opacity .24s ease, filter .24s ease, stroke-width .24s ease;
}
.has-active .epci-zone{opacity:.5;}
.has-active .epci-zone.is-active{
  opacity:1; stroke-width:2.6; filter:saturate(1.5) brightness(.94);
}
.epci-zone:focus-visible{outline:none; stroke:var(--navy); stroke-width:3;}
/* Le losange reprend la teinte de son territoire, assombrie pour porter un
   chiffre blanc : la couleur est donc posée en attribut, pas ici. */
.epci-badge{pointer-events:none; stroke:#fff; stroke-width:1.4;}
.epci-num{
  font-family:var(--font-display); font-size:8.6px; font-weight:700;
  fill:#fff; text-anchor:middle; pointer-events:none;
}
/* Le contour blanc détache le libellé du pastel sans masquer le tracé. */
.epci-label{
  font-family:var(--font-body); font-size:8.4px; font-weight:600;
  fill:#2A3670; text-anchor:middle; pointer-events:none;
  paint-order:stroke; stroke:rgba(255,255,255,.75); stroke-width:2.4;
  transition:opacity .24s ease;
}
.has-active .epci-label{opacity:.4;}
.has-active .epci-label.is-active{opacity:1;}

/* Posée SOUS la carte, dans le flux — voir le commentaire de son gabarit dans
   templates/sections/epci-map.js. En absolu dans un coin du dessin, elle
   recouvrait les territoires des départements dont la silhouette occupe ce
   coin : le Val-d'Oise, large et plat, y perdait le libellé de Roissy.
   `visibility` accompagne l'opacité : l'invite reste en place et garde sa
   hauteur — la carte ne se décale pas au survol — mais cesse d'être lue par les
   lecteurs d'écran une fois masquée. */
.epci-hint{
  margin:12px 14px 0; padding:11px 12px;
  background:var(--bg); border-radius:var(--radius-md);
  font-size:0.72rem; line-height:1.45; color:var(--slate);
  transition:opacity .2s ease, visibility .2s ease;
}
.has-active .epci-hint{opacity:0; visibility:hidden;}

/* ---- fenêtre flottante ----
   Ancrée sur le centre du territoire, jamais sur le curseur : elle ne tremble
   pas quand la souris se déplace dans la zone. */
.epci-tip{
  position:absolute; left:0; top:0; z-index:5; width:186px;
  pointer-events:none; opacity:0;
  background:#fff; border:1px solid var(--bg-soft); border-radius:var(--radius-lg);
  padding:14px 15px; box-shadow:var(--shadow-lg,0 14px 34px rgba(11,31,51,.14));
  transform:translate(-50%,-8px) scale(.95);
  transition:opacity .22s ease, transform .26s cubic-bezier(.22,.85,.3,1);
}
.epci-tip.is-on{opacity:1; transform:translate(-50%,-16px) scale(1);}
.epci-tip img{display:block; max-width:100%; max-height:42px; margin:0 auto 11px; object-fit:contain;}
.epci-tip b{display:block; font-size:0.8rem; font-weight:600; line-height:1.32; color:var(--ink);}
.epci-tip span{display:block; margin-top:3px; font-size:0.72rem; color:var(--slate);}

/* ---- statistiques ---- */
/* Deux groupes de deux chiffres : ce que nous couvrons, puis ce qu'est le
   département. Voir le commentaire de `stats()` dans
   templates/sections/epci-map.js pour la raison de cette séparation. */
.epci-stats{
  display:grid; grid-template-columns:1fr 1fr; gap:10px; margin:14px;
}
/* Sans chiffres de territoire, le groupe de couverture prend toute la largeur
   plutôt que de laisser une moitié vide. */
.epci-stats--solo{grid-template-columns:1fr;}

.epci-stats-group{
  background:var(--bg); border-radius:var(--radius-lg); padding:15px 17px 16px;
}
/* Le groupe teinté est celui qui répond à la question du visiteur : le fond
   bleu très pâle l'avance d'un plan sans ajouter de bordure. */
.epci-stats-group--live{background:var(--bg-soft);}

.epci-stats-label{
  display:flex; align-items:center; gap:6px; margin:0 0 11px;
  font-family:var(--font-display); font-size:0.6rem; font-weight:800;
  letter-spacing:0.11em; text-transform:uppercase; color:var(--slate);
}
.epci-stats-group--live .epci-stats-label{color:var(--navy);}
.epci-stats-dot{
  width:5px; height:5px; border-radius:50%;
  background:var(--accent-light); flex:0 0 auto;
}
.epci-stats-group--live .epci-stats-dot{background:var(--navy);}

.epci-stats-pair{display:grid; grid-template-columns:1fr 1fr; gap:14px;}
.epci-stats .stat{display:flex; flex-direction:column; gap:2px; min-width:0;}
.epci-stats .stat b{
  font-family:var(--font-display); font-size:1.42rem; font-weight:800;
  color:var(--navy); line-height:1.05; letter-spacing:-0.02em;
  /* Les chiffres de deux lignes voisines s'alignent en colonne : sans chasse
     fixe, « 507 » et « 1,4 M » ne tombent pas au même endroit. */
  font-variant-numeric:tabular-nums;
}
.epci-stats .stat span{
  font-size:0.69rem; color:var(--slate); line-height:1.25; font-weight:500;
}

/* ---- liste ---- */
.epci-list{padding:19px 18px;}
.epci-list h3{font-size:0.98rem; font-weight:600; margin:0 0 16px; color:var(--ink);}
.epci-group{
  font-size:0.77rem; font-weight:500; color:var(--navy);
  padding-bottom:7px; border-bottom:1px solid var(--bg-soft); margin:14px 0 4px;
}
.epci-group:first-of-type{margin-top:0;}
.epci-row{
  display:flex; align-items:center; gap:11px; width:100%;
  padding:9px 6px; border:0; border-bottom:1px solid var(--bg); border-radius:var(--radius-md);
  background:none; text-align:left; cursor:pointer; transition:background .18s ease;
}
.epci-row:hover,.epci-row.is-active{background:var(--bg);}
/* `display:flex` ci-dessus l'emporte sur le `display:none` que le navigateur
   applique à l'attribut `hidden` : sans cette règle, les lignes repliées
   restent visibles et le bouton « Voir plus » paraît sans effet. */
.epci-row[hidden],.epci-commune[hidden],.epci-hit[hidden]{display:none;}
.epci-row-logo{width:56px; height:34px; flex:none; display:grid; place-items:center;}
/* `min-height:0` est indispensable, et pas seulement défensif : un enfant de
   grille vaut `min-height:auto`, c'est-à-dire qu'il refuse de descendre sous sa
   taille de contenu. `max-height:100%` est alors ignoré et un logo carré
   (Roissy, Nemours) déborde sur la ligne du dessous — visible sous 520px, où la
   case se resserre à 44px de large pour 34px de haut. */
.epci-row-logo img{max-width:100%; max-height:100%; min-width:0; min-height:0; object-fit:contain;}
/* Même losange que sur la carte, pour que la ligne se rattache d'un coup d'œil
   à son territoire. Le chiffre y est foncé, le pastel étant trop clair. */
.epci-chip{
  width:26px; height:30px; flex:none;
  clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%);
  display:grid; place-items:center;
  font-family:var(--font-display); font-size:0.66rem; font-weight:700;
}
.epci-row-tx{flex:1; min-width:0;}
.epci-row-tx b{display:block; font-size:0.8rem; font-weight:500; line-height:1.32; color:var(--ink);}
.epci-row-tx span{font-size:0.71rem; color:var(--slate);}
.epci-row-ar{color:#B9C0D8; font-size:0.95rem; flex:none;}
.epci-more{
  width:100%; margin-top:14px; padding:11px;
  background:#fff; border:1px solid var(--bg-soft); border-radius:var(--radius-md);
  font-family:var(--font-body); font-size:0.82rem; font-weight:500; color:var(--navy);
  cursor:pointer; transition:background .18s ease;
}
.epci-more:hover{background:var(--bg);}

/* ---- panneau de détail ---- */
.epci-detail{padding:19px 18px;}
/* Garde explicite : les deux vues basculent par l'attribut `hidden`. */
.epci-list[hidden],.epci-detail[hidden]{display:none;}
.epci-back{
  display:inline-flex; align-items:center; gap:6px; margin-bottom:15px;
  padding:6px 11px; background:none; border:1px solid var(--bg-soft);
  border-radius:var(--radius-sm); cursor:pointer;
  font-family:var(--font-body); font-size:0.78rem; font-weight:500; color:var(--navy);
  transition:background .18s ease, border-color .18s ease;
}
.epci-back:hover{background:var(--bg); border-color:#D3DCF3;}
.epci-dhead{
  display:flex; align-items:center; gap:13px;
  padding-bottom:15px; border-bottom:1px solid var(--bg-soft);
}
/* Largeur fixe : un logo absent ne décale pas le titre. */
.epci-dhead-logo{width:64px; height:44px; flex:none; display:grid; place-items:center;}
/* Voir `.epci-row-logo` : sans `min-height:0`, un logo carré déborde du cadre. */
.epci-dhead-logo img{max-width:100%; max-height:100%; min-width:0; min-height:0; object-fit:contain;}
.epci-dhead-tx b{display:block; font-size:0.88rem; font-weight:600; line-height:1.34; color:var(--ink);}
.epci-dhead-tx span{font-size:0.73rem; color:var(--slate);}
.epci-dsub{font-size:0.77rem; font-weight:500; color:var(--navy); margin:15px 0 8px;}
/* Hauteur bornée : le panneau ne doit pas dépasser la carte, même avec les
   54 communes de Coulommiers. */
.epci-communes{
  max-height:500px; overflow-y:auto; overflow-x:hidden;
  scrollbar-width:thin; scrollbar-color:#D3D9EA transparent;
}
.epci-communes::-webkit-scrollbar{width:7px;}
.epci-communes::-webkit-scrollbar-thumb{background:#D3D9EA; border-radius:4px;}
.epci-communes::-webkit-scrollbar-track{background:transparent;}
.epci-commune{
  display:flex; align-items:center; gap:10px; width:100%;
  padding:10px; border:0; border-bottom:1px solid var(--bg); border-radius:var(--radius-sm);
  background:none; text-align:left; cursor:pointer; transition:background .18s ease;
}
.epci-commune:last-child{border-bottom:0;}
.epci-commune:hover,.epci-commune.is-open{background:var(--bg);}
.epci-commune b{
  flex:1; min-width:0; font-size:0.81rem; font-weight:500; color:var(--navy);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.epci-commune .epci-row-ar{transition:transform .18s ease;}
.epci-commune.is-open .epci-row-ar{transform:rotate(90deg);}
.epci-note{
  margin:2px 0 8px; padding:9px 11px; border-radius:var(--radius-sm);
  background:#F1F8F3; font-size:0.73rem; line-height:1.5; color:#1c5c34;
}

/* ---- vue commune (troisième niveau) ----
   Le panneau compte trois vues et non deux : la liste des intercommunalités,
   les communes de l'une d'elles, puis cette fiche. Elle répond à la question
   que le visiteur se pose vraiment — « intervenez-vous chez moi ? » — et
   propose l'action dans la foulée. `.epci-town` bascule par `hidden` comme les
   deux autres. */
.epci-town{padding:19px 18px;}
.epci-list[hidden],.epci-detail[hidden],.epci-town[hidden]{display:none;}

/* Le bandeau vert annule le padding latéral de `.epci-town` pour toucher les
   bords du panneau. La confirmation est ainsi la première chose lue, avant
   même le nom de la commune. */
.epci-town-head{
  margin:0 -18px; padding:20px 18px 18px; text-align:center;
  background:var(--ok-bg);
  border-top:1px solid var(--ok-line); border-bottom:1px solid var(--ok-line);
}
.epci-town-medal{position:relative; display:inline-block;}
.epci-town-logo{
  width:72px; height:72px; display:grid; place-items:center; padding:7px;
  background:#fff; border:1px solid var(--ok-line); border-radius:14px;
  box-shadow:0 2px 8px rgba(11,122,59,.14);
}
.epci-town-logo img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.epci-town-name{
  display:block; margin-top:12px;
  font-family:var(--font-display); font-size:1.4rem; font-weight:800;
  color:var(--navy); line-height:1.15; letter-spacing:-0.015em;
}
.epci-town-ok{
  display:inline-flex; align-items:center; gap:6px; margin-top:8px;
  padding:4px 13px; border-radius:999px;
  background:#fff; border:1px solid var(--ok-line);
  font-family:var(--font-display); font-size:0.83rem; font-weight:700; color:var(--ok);
}
.epci-town-epci{display:block; margin-top:9px; font-size:0.83rem; color:var(--ok-ink);}

/* Pastille de confirmation.
   Trois temps à l'arrivée — apparition, tracé de la coche, onde — puis une
   respiration lente et continue. Volontairement pas un clignotement franc :
   sur un élément permanent, une opacité qui tombe à zéro fatigue l'œil. */
.epci-town-tick{
  position:absolute; right:-5px; bottom:-5px; width:26px; height:26px;
  display:grid; place-items:center; border-radius:50%;
  background:var(--ok); border:2.5px solid var(--ok-bg);
  box-shadow:0 2px 6px rgba(11,122,59,.3);
  animation:epciTickPop .42s cubic-bezier(.34,1.56,.64,1) .12s backwards,
            epciTickGlow 3.2s ease-in-out 1.2s infinite;
}
@keyframes epciTickPop{
  from{transform:scale(0); opacity:0;}
  60%{transform:scale(1.14);}
  to{transform:scale(1); opacity:1;}
}
@keyframes epciTickGlow{
  0%,100%{box-shadow:0 2px 6px rgba(11,122,59,.30);}
  50%{box-shadow:0 2px 6px rgba(11,122,59,.30), 0 0 0 4px rgba(11,122,59,.13);}
}
.epci-town-tick::after{
  content:''; position:absolute; inset:-2.5px; border-radius:50%;
  border:2px solid var(--ok);
  animation:epciTickRipple .75s ease-out .42s backwards,
            epciTickBreathe 3.2s ease-in-out 1.2s infinite;
}
@keyframes epciTickRipple{
  from{transform:scale(1); opacity:.55;}
  to{transform:scale(2.1); opacity:0;}
}
@keyframes epciTickBreathe{
  0%,100%{transform:scale(1); opacity:0;}
  50%{transform:scale(1.5); opacity:.42;}
}
/* Le trait de la coche est masqué par son propre pointillé, que l'animation
   fait glisser jusqu'à le révéler. 22,6 unités de tracé, 24 les couvre. */
.epci-town-tick svg path{
  stroke-dasharray:24; stroke-dashoffset:24;
  animation:epciTickDraw .34s cubic-bezier(.65,0,.35,1) .34s forwards;
}
@keyframes epciTickDraw{to{stroke-dashoffset:0;}}

/* Trois repères de réassurance. */
.epci-town-facts{display:flex; gap:8px; margin-top:16px;}
.epci-town-facts div{
  flex:1 1 0; padding:11px 8px; text-align:center;
  background:var(--bg); border:1px solid var(--bg-soft); border-radius:var(--radius-md);
}
.epci-town-facts b{
  display:block; font-family:var(--font-display); font-size:0.88rem;
  font-weight:700; color:var(--navy); line-height:1.25;
}
.epci-town-facts span{font-size:0.76rem; color:var(--slate);}

.epci-town-acts{display:flex; flex-direction:column; gap:8px; margin-top:15px;}
/* `white-space:normal` annule le `nowrap` de `.btn` : le panneau est étroit et
   « Être rappelé gratuitement » y déborderait sur les petits écrans. */
.epci-town-acts .btn{width:100%; white-space:normal; text-align:center;}

/* Bouton d'appel. Le rouge est celui du téléphone ailleurs sur le site
   (--phone-red : navbar, hero) : ici encore, le rouge veut dire « appeler ». */
.btn-call{background:var(--phone-red); color:var(--white); border-color:var(--phone-red);}
.btn-call:hover{background:#B71F1F; border-color:#B71F1F; color:var(--white);}

/* Tant que le numéro n'est pas confirmé dans data/site.js, le bouton est rendu
   en <span> : il garde exactement l'aspect du bouton pour que la mise en page
   soit fidèle, mais ne se comporte pas comme un lien — pas de curseur main, pas
   de focus clavier, rien qui laisse croire qu'un appel partirait. */
.btn-call.is-inert{cursor:default;}

/* Communes voisines : le rebond. Celui qui s'est trompé de commune retombe
   sur ses pieds en un clic, au lieu de devoir refermer la vue. */
.epci-town-nearhead{
  display:flex; align-items:baseline; justify-content:space-between; gap:10px;
  margin:18px 0 10px;
}
.epci-town-nearhead b{
  font-family:var(--font-display); font-size:0.85rem; font-weight:700; color:var(--navy);
}
.epci-town-nearhead span{font-size:0.76rem; color:var(--slate);}
.epci-town-near{display:grid; grid-template-columns:1fr 1fr; gap:8px; align-items:stretch;}
.epci-town-near button{
  display:flex; align-items:center; gap:9px; width:100%;
  padding:10px 11px; text-align:left; cursor:pointer;
  background:var(--bg); border:1px solid var(--bg-soft); border-radius:var(--radius-md);
  transition:background .15s ease, border-color .15s ease;
}
.epci-town-near button:hover{background:#fff; border-color:var(--accent-light);}
/* Largeur fixe : les noms restent alignés d'une carte à l'autre, qu'un logo
   soit large ou étroit. */
.epci-town-near-logo{
  flex:none; width:30px; height:30px; display:grid; place-items:center; padding:2px;
  background:#fff; border:1px solid var(--bg-soft); border-radius:7px;
}
.epci-town-near-logo img{max-width:100%; max-height:100%; object-fit:contain; display:block;}
.epci-town-near-tx{min-width:0;}
/* Le nom peut passer à la ligne : les noms composés sont fréquents en
   Seine-et-Marne et une carte étroite les tronquerait. */
.epci-town-near-tx b{
  display:block; font-size:0.83rem; font-weight:600; color:var(--navy);
  line-height:1.25; hyphens:auto;
}
.epci-town-near-tx span{
  display:block; font-size:0.73rem; color:var(--slate); font-variant-numeric:tabular-nums;
}
.epci-town-near button:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}

@media (max-width:420px){
  .epci-town-near{grid-template-columns:1fr;}
}
/* Ni l'arrivée, ni le tracé, ni la respiration. */
@media (prefers-reduced-motion:reduce){
  .epci-town-tick{animation:none;}
  .epci-town-tick::after{display:none; animation:none;}
  .epci-town-tick svg path{animation:none; stroke-dashoffset:0;}
}

/* ---- recherche ----
   Encart au fond teinté : la recherche par commune est un point d'entrée à
   part entière, pas un appendice de la liste. */
.epci-search{padding:16px 18px; border-top:1px solid var(--bg-soft);}
.epci-search-card{background:var(--bg-soft); border-radius:var(--radius-lg); padding:15px;}
.epci-search-head{
  display:flex; align-items:center; gap:9px; margin:0 0 11px;
  font-size:0.8rem; font-weight:600; color:var(--ink);
}
.epci-search-ico{flex:none; display:grid; place-items:center; color:var(--navy);}
.epci-search-ico svg{display:block;}
.epci-search-head label{cursor:pointer;}
.epci-field{
  display:flex; align-items:center;
  background:#fff; border:1px solid transparent; border-radius:var(--radius-md);
  padding:10px 13px; transition:border-color .18s ease, box-shadow .18s ease;
}
.epci-field:focus-within{
  border-color:var(--navy); box-shadow:0 0 0 3px rgba(var(--navy-rgb),0.10);
}
.epci-field input{
  border:0; outline:0; flex:1; min-width:0; background:none;
  font-family:var(--font-body); font-size:0.82rem; color:var(--ink);
}
/* Safari dessine sa propre croix sur les champs `search` : elle déborde de
   l'encart et jure avec le reste du panneau. */
.epci-field input::-webkit-search-decoration,
.epci-field input::-webkit-search-cancel-button{-webkit-appearance:none;}
.epci-search-hint{margin:10px 0 0; font-size:0.72rem; color:var(--slate); line-height:1.5;}
/* Les résultats se posent maintenant SUR le fond teinté de l'encart : ils
   prennent donc le fond blanc, sans quoi ils s'y confondraient. */
.epci-hit{
  display:flex; align-items:center; gap:10px; width:100%; margin-top:8px;
  padding:10px 11px; border:0; border-radius:var(--radius-md); background:#fff;
  text-align:left; cursor:pointer; transition:background .18s ease;
  box-shadow:var(--shadow-sm);
}
.epci-hit:hover{background:#F6F8FF;}
.epci-hit-tx{flex:1; min-width:0;}
.epci-hit-tx b{display:block; font-size:0.78rem; font-weight:600; color:var(--ink);}
.epci-hit-tx span{font-size:0.71rem; color:var(--slate);}
.epci-empty{margin:11px 0 0; font-size:0.74rem; color:var(--slate); line-height:1.5;}

/* Bascule liste <-> détail : fondu et léger glissement. */
.epci-pane{animation:epciSlide .22s cubic-bezier(.22,.85,.3,1);}
@keyframes epciSlide{from{opacity:0; transform:translateX(10px);} to{opacity:1; transform:none;}}
.epci-pane--back{animation-name:epciSlideBack;}
@keyframes epciSlideBack{from{opacity:0; transform:translateX(-10px);} to{opacity:1; transform:none;}}

.epci-row:focus-visible,.epci-commune:focus-visible,
.epci-hit:focus-visible,.epci-back:focus-visible,.epci-more:focus-visible{
  outline:2px solid var(--navy); outline-offset:2px;
}

@media (max-width:960px){
  .epci-layout{grid-template-columns:1fr;}
  /* Le survol n'a pas de sens au doigt. L'encart ne masque plus la carte
     depuis qu'il est passé dans le flux, mais son texte parle de survoler :
     il reste donc masqué ici, faute d'être applicable. */
  .epci-hint{display:none;}
  /* Un conteneur qui défile dans une page qui défile est pénible au doigt :
     la liste s'étend, c'est la page qui défile. */
  .epci-communes{max-height:none;}
  /* iOS Safari zoome la page dès qu'un champ de saisie prend le focus avec une
     police inférieure à 16px — et ne dézoome jamais ensuite : le visiteur
     tape le nom de sa commune et se retrouve sur une page agrandie qu'il doit
     repincer à la main. 16px exactement, comme les champs du formulaire de
     contact, qui échappent au zoom pour la même raison. */
  .epci-field input{font-size:16px;}
}
@media (max-width:520px){
  /* Les deux groupes s'empilent : côte à côte sur un écran étroit, chaque
     groupe n'aurait plus la place d'aligner ses deux chiffres, et « 5 915 km² »
     passerait à la ligne au milieu du nombre. */
  .epci-stats{grid-template-columns:1fr;}
  .epci-row-logo{width:44px;}
}
@media (prefers-reduced-motion:reduce){
  .epci-pane{animation:none;}
}

/* ============ SECTIONS DÉPARTEMENTALES (refonte locale) ============
   Ajoutées en fin de feuille : aucune règle existante n'est modifiée, et la
   cascade des sections déjà en place reste inchangée. */

/* ---- Le département en chiffres ----
   Remplace la bande `keyFigures` sur les pages départementales. Les valeurs sont
   calculées au build depuis les données de la carte : voir la note de
   templates/pages/department.js. Bande claire et compacte, volontairement plus
   discrète que les compteurs animés de la homepage — ce sont des repères de
   territoire, pas des arguments commerciaux. */
.geo-figures{background:var(--blue-light); padding:var(--sp-5) 0;}
/* Le nombre de chiffres varie de 2 à 4 selon le département : l'étendue
   nord-sud n'est rendue qu'au-delà de 30 km et la superficie qu'une fois
   saisie (voir keyFiguresLocal dans templates/pages/department.js). Des
   colonnes figées à quatre laissaient donc une case vide à Paris, qui poussait
   le groupe vers la gauche. `auto-fit` fait suivre la grille au nombre réel de
   blocs, qui occupent toujours toute la largeur du conteneur. */
.geo-figures-grid{
  display:grid; grid-template-columns:repeat(auto-fit,minmax(0,1fr));
  gap:var(--sp-4);
}
.geo-figure{text-align:center;}
.geo-figure b{
  display:block; font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem, 1.2rem + 1.2vw, 2.1rem); color:var(--navy);
  line-height:1.1; letter-spacing:-0.01em; font-variant-numeric:tabular-nums;
}
.geo-figure span{
  display:block; margin-top:6px; font-size:0.85rem; color:var(--slate);
  line-height:1.35;
}
.geo-figures-note{
  margin-top:var(--sp-4); text-align:center; font-size:0.78rem;
  color:var(--slate); opacity:0.8;
}
@media (max-width:700px){
  .geo-figures-grid{grid-template-columns:repeat(2,1fr); gap:var(--sp-4) var(--sp-3);}
}

/* ---- Communes couvertes ----
   Communes repères en pastilles, puis la liste complète dans un <details>. Le
   contenu d'un <details> fermé est présent dans le HTML servi : il n'est masqué
   que visuellement, ce qui est exactement l'objectif — les noms sont
   crawlables sans transformer la page en annuaire. */
.commune-highlights{
  list-style:none; margin:0 0 var(--sp-4); padding:0;
  display:flex; flex-wrap:wrap; gap:var(--sp-2);
}
.commune-highlights li{
  background:var(--white); border:var(--border); border-radius:99px;
  padding:7px 16px; font-size:0.9rem; font-weight:600; color:var(--navy);
  box-shadow:var(--shadow-sm);
}
.commune-all{
  border:var(--border); border-radius:var(--radius-md); background:var(--white);
  overflow:hidden;
}
.commune-all summary{
  list-style:none; cursor:pointer; padding:var(--sp-3) var(--sp-4);
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-3);
  font-weight:600; color:var(--navy); font-size:0.95rem;
}
.commune-all summary::-webkit-details-marker{display:none;}
.commune-all summary:hover{background:var(--bg-soft);}
.commune-all summary:focus-visible{outline:2px solid var(--navy); outline-offset:-2px;}
.commune-all-chev{
  width:9px; height:9px; flex:none; border-right:2px solid currentColor;
  border-bottom:2px solid currentColor; transform:rotate(45deg); margin-bottom:3px;
  transition:transform 0.18s ease;
}
.commune-all[open] .commune-all-chev{transform:rotate(-135deg); margin-bottom:-3px;}
.commune-list{
  list-style:none; margin:0; padding:var(--sp-3) var(--sp-4) var(--sp-4);
  border-top:var(--border);
  columns:4; column-gap:var(--sp-4);
  max-height:460px; overflow-y:auto;
}
.commune-list li{
  break-inside:avoid; font-size:0.84rem; line-height:1.5; color:var(--slate);
  padding:2px 0; display:flex; gap:6px; align-items:baseline;
}
.commune-name{color:var(--ink);}
.commune-cp{
  font-size:0.75rem; color:var(--slate); opacity:0.65;
  font-variant-numeric:tabular-nums; margin-left:auto;
}
@media (max-width:1000px){.commune-list{columns:3;}}
@media (max-width:700px){.commune-list{columns:2;}}
@media (max-width:480px){.commune-list{columns:1;}}
@media (prefers-reduced-motion:reduce){.commune-all-chev{transition:none;}}

/* ---- Recyclage / filière VHU ----
   Étapes numérotées à gauche, centre partenaire à droite. La numérotation est
   ici légitime : la filière EST une séquence, et l'ordre porte une information
   — le certificat de destruction ne peut être délivré qu'après la prise en
   charge par le centre agréé. */
.vhu-layout{display:grid; grid-template-columns:1.35fr 1fr; gap:var(--sp-5); align-items:start;}
.vhu-steps{list-style:none; margin:0; padding:0; display:grid; gap:var(--sp-3);}
.vhu-step{
  display:grid; grid-template-columns:auto 1fr; gap:var(--sp-3);
  background:var(--white); border:var(--border); border-radius:var(--radius-md);
  padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-sm);
}
.vhu-step-n{
  font-family:var(--font-display); font-weight:800; font-size:0.95rem;
  color:var(--navy); opacity:0.45; font-variant-numeric:tabular-nums;
  line-height:1.5;
}
.vhu-step-body b{display:block; font-family:var(--font-display); color:var(--navy); font-size:1rem; margin-bottom:3px;}
.vhu-step-body span{display:block; font-size:0.88rem; color:var(--slate); line-height:1.55;}
/* Colonne de droite : notre centre VHU agréé en bleu, puis l'encart clair du
   centre partenaire du département, qui ne prend le relais qu'en cas de
   surcharge d'exploitation. La hiérarchie visuelle porte cette distinction :
   l'agrément d'Epav'Action domine, le repli reste lisible sans le concurrencer. */
.vhu-aside{display:grid; gap:var(--sp-3); align-content:start;}
.vhu-own{
  background:var(--navy); color:var(--white); border-radius:var(--radius-lg);
  padding:var(--sp-4); display:grid; gap:8px; align-content:start;
}
.vhu-own-badge{
  display:inline-flex; align-items:center; gap:7px; justify-self:start;
  background:rgba(255,255,255,0.12); color:var(--white); border-radius:999px;
  padding:4px 12px 4px 8px; font-size:0.7rem; font-weight:800;
  text-transform:uppercase; letter-spacing:0.08em;
}
.vhu-own-badge svg{flex:none;}
.vhu-fallback{
  background:var(--white); border:var(--border); border-left:3px solid var(--accent-light);
  border-radius:var(--radius-md); padding:var(--sp-3) var(--sp-4); box-shadow:var(--shadow-sm);
}
.vhu-fallback-tag{
  display:block; margin-bottom:5px; font-size:0.7rem; text-transform:uppercase;
  letter-spacing:0.09em; font-weight:800; color:var(--slate);
}
.vhu-fallback>b{
  display:block; margin-bottom:4px; font-family:var(--font-display);
  color:var(--navy); font-size:0.98rem;
}
.vhu-fallback p{margin:0; font-size:0.86rem; color:var(--slate); line-height:1.55;}
.vhu-fallback p b{color:var(--navy); font-variant-numeric:tabular-nums;}
.vhu-center{
  background:var(--navy); color:var(--white); border-radius:var(--radius-lg);
  padding:var(--sp-4); display:grid; gap:8px; align-content:start;
}
.vhu-center-tag{
  font-size:0.72rem; text-transform:uppercase; letter-spacing:0.09em;
  font-weight:700; color:var(--accent-light);
}
.vhu-center-name{font-family:var(--font-display); font-size:1.05rem; line-height:1.3;}
.vhu-center-addr{font-size:0.88rem; color:rgba(255,255,255,0.82); line-height:1.5;}
.vhu-center-approval{
  font-size:0.85rem; color:rgba(255,255,255,0.9);
  background:rgba(255,255,255,0.09); border-radius:var(--radius-sm);
  padding:7px 12px; display:inline-block; justify-self:start;
}
.vhu-center-approval b{font-variant-numeric:tabular-nums; letter-spacing:0.02em;}
.vhu-center-note{
  font-size:0.76rem; color:rgba(255,255,255,0.6); line-height:1.5;
  padding-top:8px; border-top:1px solid rgba(255,255,255,0.14);
}
@media (max-width:860px){.vhu-layout{grid-template-columns:1fr;}}

/* ---- Maillage Île-de-France ----
   Deux niveaux : les départements limitrophes dans une phrase (le voisinage est
   une information réelle pour le visiteur), les autres en énumération. C'est ce
   qui distingue un maillage utile d'un bloc de liens. */
.idf-links{background:var(--bg-soft);}
.idf-lead{font-size:1.02rem; color:var(--ink); line-height:1.7; max-width:70ch;}
.idf-rest{margin-top:var(--sp-3); font-size:0.95rem; color:var(--slate); line-height:1.7; max-width:70ch;}
.idf-links a{color:var(--navy); font-weight:600; text-decoration:none; border-bottom:1px solid rgba(3,3,146,0.25);}
.idf-links a:hover{border-bottom-color:var(--navy);}

/* ---- Encart local sous les étapes du déroulement ----
   Ce qu'il est utile de préciser dans CE département. Fond teinté et filet
   d'accent à gauche : il se distingue des quatre cartes d'étapes sans créer une
   section de plus, car c'en est le prolongement et non un sujet distinct. */
.process-note{
  margin-top:var(--sp-5); padding:var(--sp-4) var(--sp-5);
  background:var(--white); border:var(--border);
  border-left:3px solid var(--navy); border-radius:var(--radius-md);
  box-shadow:var(--shadow-sm);
}
.process-note-title{
  font-family:var(--font-display); font-weight:700; color:var(--navy);
  font-size:1rem; margin-bottom:var(--sp-3);
}
.process-note ul{margin:0; padding:0; list-style:none; display:grid; gap:10px;}
.process-note li{
  position:relative; padding-left:22px; font-size:0.9rem;
  color:var(--slate); line-height:1.55;
}
.process-note li::before{
  content:""; position:absolute; left:4px; top:8px;
  width:6px; height:6px; border-radius:50%; background:var(--accent-light);
}


/* ══════════════════════════════════════════════════════════════════════════
   PAGE « RACHAT D'ÉPAVE »  (/rachat-epave)
   ══════════════════════════════════════════════════════════════════════════

   Toutes les classes de ce bloc sont préfixées `bb-` : la feuille est unique et
   servie à l'ensemble du site, ce préfixe garantit qu'aucune règle d'ici ne
   peut atteindre les neuf pages existantes.

   Les classes du site NE SONT PAS redéfinies. La page réutilise telles quelles
   .container, .section, .eyebrow, .btn*, .form-field, .field-error,
   .photo-drop, .plate, .breadcrumb, .faq-*, .process-*, .sr-only.

   RYTHME — l'alternance des fonds découpe la page en actes :
     valeur / cas / rachat-enlèvement / photos / cycle / pourquoi   clair
     transparence / critères                                        navy
   Deux pics sombres, pas davantage : au-delà, le contraste s'annule.

   ANIMATIONS — transform et opacity uniquement, jamais de propriété qui
   déclenche un recalcul de mise en page. Toutes neutralisées sous
   prefers-reduced-motion, en fin de bloc.
   ══════════════════════════════════════════════════════════════════════════ */

/* Échelle typographique propre à la page : environ 15 % au-dessus des H2 du
   site. C'est ce qui donne l'impression « premium » sans changer de police ni
   de couleur — la montée en gamme vient de l'échelle et de l'espace. */
.bb-hero-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(2rem, 5.2vw, 3.4rem); line-height:1.08;
  letter-spacing:-0.02em; color:var(--white); margin:0;
}
/* Membres de phrase mis en avant dans les titres sur fond bleu de la page. Ils
   sont deux, et portent deux idées distinctes — d'où deux couleurs :

     .bb-accent        « de la valeur » (hero)      jaune  #FBBF24
     .bb-accent--eco   « devenir »      (CTA final) vert   #4ADE80

   Le hero parle de ce que le véhicule vaut, le CTA de ce qu'il devient : la
   seconde vie, la filière, le recyclage. Le vert clair porte cette idée
   écologique là où le jaune porterait encore celle de l'argent.

   Les deux teintes existent déjà dans la feuille — ce sont celles des pastilles
   du badge de hero (`.hero-badge .dot`, ambre et verte). Aucune couleur nouvelle
   n'entre dans le système, et toutes deux tiennent très largement le contraste
   AA sur le bleu #030392 comme sur le dégradé navy du CTA.

   `inline-block` empêche le groupe de se couper en son milieu : la coupure
   tombait entre « de la » et « valeur » sur les largeurs intermédiaires, ce
   qui cassait la lecture du membre mis en avant. Il passe désormais entier à
   la ligne suivante. Le span n'hérite que de la couleur : graisse, taille et
   interlettrage restent ceux du titre. */
.bb-accent{color:#FBBF24; display:inline-block;}
.bb-accent--eco{color:#4ADE80;}
/* Même accent, mais sur fond clair — le titre « Rachat d'épave » de la
   homepage. Le #FBBF24 du hero est calibré pour du texte sur navy : posé sur
   blanc il tombe très en dessous du contraste AA. --warn (#B45309) est l'ambre
   déjà employé par l'encadré d'éligibilité de cette même section : la note
   jaune est conservée, la lisibilité aussi. */
.bb-accent--on-light{color:var(--warn);}
.bb-cases h2, .bb-compare h2, .bb-photos h2,
.bb-lifecycle h2, .bb-docs h2,
.bb-wizard-intro h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.75rem, 3.6vw, 2.6rem); line-height:1.14;
  letter-spacing:-0.018em; margin:12px 0 0;
}
.bb-criteria h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.85rem, 4vw, 2.9rem); line-height:1.1;
  letter-spacing:-0.02em; color:var(--white); margin:12px 0 0;
}

/* Paragraphe d'introduction. `.lede` existe déjà mais uniquement sous
   .contact-intro : ces variantes lui sont propres et ne l'affectent pas. */
.bb-photos .lede, .bb-wizard-intro .lede{
  font-family:var(--font-display); font-weight:700;
  font-size:1.12rem; line-height:1.5; color:var(--navy);
  margin:var(--sp-4) 0 var(--sp-3);
}

/* ── Hero ───────────────────────────────────────────────────────────────── */

.bb-hero{min-height:clamp(560px, 88vh, 860px);}
.bb-hero .hero-overlay{
  background:linear-gradient(120deg,
    rgba(3,3,146,0.93) 0%, rgba(3,3,146,0.82) 42%, rgba(2,1,102,0.66) 100%);
}
.bb-hero-content{position:relative; z-index:2;}
/* La copie n'est plus bridée : c'est la grille hero-split qui lui donne sa
   largeur, comme sur les pages départementales. */
.bb-hero-split .bb-hero-copy{max-width:none;}
.bb-hero-title{margin-top:var(--sp-3);}
.bb-hero-sub{
  margin-top:var(--sp-4); max-width:60ch;
  font-size:clamp(1rem, 1.5vw, 1.12rem); line-height:1.65;
}

.bb-hero-badges{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:var(--sp-5);
}
.bb-hero-badge{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 14px; border-radius:999px;
  background:rgba(255,255,255,0.09);
  border:1px solid rgba(166,168,255,0.28);
  color:var(--white); font-size:0.86rem; font-weight:600;
}
.bb-hero-badge svg{flex-shrink:0;}

.bb-hero-ctas{margin-top:var(--sp-6); flex-wrap:wrap; gap:12px; align-items:center;}
.bb-hero-ctas .btn{display:inline-flex; align-items:center; gap:9px;}
.bb-hero-ctas .btn svg{transition:transform 180ms ease-out;}
.bb-hero-ctas .btn:hover svg{transform:translateX(3px);}

/* ── Bouton d'appel du hero ─────────────────────────────────────────────────
   Il ouvre la rangée, à gauche d'« Estimer mon véhicule ».

   POURQUOI LE JAUNE. C'est celui de « de la valeur » dans le titre
   (`.bb-accent`, #FBBF24) : la couleur est déjà à l'écran, aucune teinte
   nouvelle n'entre dans la charte. Elle porte assez de contraste sur le bleu
   pour que l'appel se voie sans disputer sa place au bouton blanc, qui reste
   le parcours principal.

   POURQUOI DEUX LIGNES. Le libellé au-dessus, le numéro en gros dessous : sur
   ordinateur on compose sur un autre appareil, et un numéro caché derrière un
   `href="tel:"` n'y sert à rien. Le numéro doit se lire sans clic.

   Ce n'est délibérément pas une déclinaison de `.btn` : la structure interne
   (pastille + deux lignes) ne correspond à aucune variante existante, et
   hériter de `.btn` obligerait à défaire son `align-items` et son `padding`
   sur une seule ligne. Les mesures reprennent en revanche celles de `.btn-lg`
   pour que les deux boutons aient la même hauteur. */
.bb-hero-tel{
  display:inline-flex; align-items:center; gap:12px;
  padding:11px 24px 12px 20px;
  border-radius:var(--radius-md);
  background:#FBBF24; color:#3B2600;
  border:1px solid transparent;
  font-family:var(--font-display);
  text-decoration:none;
  transition:background 160ms ease, transform 0.1s ease;
}
a.bb-hero-tel:active{transform:translateY(1px);}
a.bb-hero-tel:hover{background:#F5B10D;}
.bb-hero-tel-icon{
  width:38px; height:38px; border-radius:50%; flex-shrink:0;
  display:grid; place-items:center;
  background:rgba(59,38,0,0.14);
}
.bb-hero-tel-icon svg{display:block;}
.bb-hero-tel-text{display:flex; flex-direction:column; line-height:1.15; text-align:left;}
.bb-hero-tel-label{font-size:0.72rem; font-weight:600; letter-spacing:0.04em; opacity:0.72;}
.bb-hero-tel-number{font-size:1.08rem; font-weight:800; letter-spacing:0.01em;}
/* En mobile, les CTA du hero passent en pleine largeur : le bouton d'appel
   suit, et son contenu se centre comme celui des autres. */
@media (max-width:560px){
  .bb-hero-tel{justify-content:center;}
}

/* ── Hero en deux colonnes ──────────────────────────────────────────────── */

/* La colonne droite du hero était vide : 543 px, soit 38 % de sa largeur, quand
   les pages départementales y placent leur carte de rappel. Le hero reprend
   donc la grille `hero-content--split` / `hero-split` définie pour elles.

   RIEN N'EST REDÉFINI DE CETTE GRILLE : elle vaut déjà 8fr / 4fr avec un gap de
   48 px, et ne dépend d'aucun sélecteur de page — le hero du 77 n'est pas
   touché. Seules les valeurs propres à cette page sont posées ici.

   Les marges hautes et basses (96 px) et la hauteur minimale reprennent les
   mesures relevées sur le hero départemental, pour que les deux pages aient la
   même respiration. */
.bb-hero .bb-hero-content{padding-top:var(--sp-8); padding-bottom:var(--sp-8);}

/* La carte d'estimation propre au rachat (`.bb-estimate-card` et ses réglages
   de titre, de parcours, de champ et de bouton) a été retirée : le hero de
   cette page porte désormais la carte de rappel du site, comme les huit pages
   départementales. Son rendu vient donc des règles `.callback-block`, plus
   haut dans ce fichier, et n'a plus rien de propre au rachat à ajuster. */

/* Sous 980 px le hero passe en une colonne. Les règles de largeur de la carte
   sont celles de `.callback-block`, communes à toutes les pages. */
@media (max-width:980px){
  .bb-hero{min-height:0;}
  .bb-hero .bb-hero-content{padding-top:var(--sp-7); padding-bottom:var(--sp-7);}
}
@media (max-width:560px){
  .bb-hero .bb-hero-content{padding-top:var(--sp-6); padding-bottom:var(--sp-6);}
}

/* ── Configurateur ──────────────────────────────────────────────────────── */

/* La bande douce déborde en pleine largeur et porte la carte du formulaire :
   c'est ce qui détache visuellement l'étape de conversion du flux de lecture. */
.bb-wizard-section{
  background:linear-gradient(180deg, var(--bg) 0%, var(--bg-soft) 100%);
  border-top:var(--border); border-bottom:var(--border);
}
.bb-wizard-intro{max-width:640px; margin-bottom:var(--sp-6);}

.bb-wizard{
  background:var(--white); border-radius:var(--radius-xl);
  padding:var(--sp-6); box-shadow:0 14px 44px rgba(11,31,51,0.10);
  border:1px solid rgba(3,3,146,0.06);
  max-width:820px; margin:0 auto;
}

/* Progression */
.bb-progress{margin-bottom:var(--sp-6);}
.bb-progress-track{
  height:4px; border-radius:2px; background:var(--bg-soft); overflow:hidden;
}
.bb-progress-fill{
  display:block; height:100%; width:20%; border-radius:2px;
  background:var(--ok);
  transition:width 240ms cubic-bezier(0.4,0,0.2,1);
}
.bb-dots{display:flex; gap:8px; margin-top:var(--sp-4); justify-content:center;}
.bb-dot{
  width:34px; height:34px; border-radius:50%; flex-shrink:0;
  border:1.5px solid var(--bg-soft); background:var(--white);
  color:var(--slate); font-weight:700; font-size:0.85rem;
  font-family:var(--font-display); cursor:pointer; padding:0;
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 160ms ease, color 160ms ease, border-color 160ms ease,
             transform 160ms ease;
}
.bb-dot[disabled]{cursor:default; opacity:0.55;}
/* Étape franchie : le vert de validation du site (--ok), celui de la pastille
   de disponibilité téléphone. Le bleu de l'étape courante reste distinct, ce
   qui sépare d'un coup d'œil « validé » de « en cours ». */
.bb-dot.is-done{background:var(--ok); border-color:var(--ok); color:var(--white);}
.bb-dot.is-current{
  background:var(--navy); border-color:var(--navy); color:var(--white);
  transform:scale(1.08);
}
.bb-dot:not([disabled]):hover{border-color:var(--navy);}
.bb-dot:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.bb-progress-label{
  text-align:center; margin-top:12px; font-size:0.85rem;
  color:var(--slate); font-weight:600;
}

/* Étapes. Sans JavaScript, aucune n'est masquée : les cinq s'affichent à la
   suite et le formulaire reste complet. C'est le script qui pose `hidden`. */
.bb-step{border:0; padding:0; margin:0; min-width:0;}
.bb-step + .bb-step{margin-top:var(--sp-7);}
.bb-step[hidden]{display:none;}
.js-on .bb-steps .bb-step:not([hidden]){animation:bbStepIn 200ms ease-out;}
@keyframes bbStepIn{
  from{opacity:0; transform:translateY(12px);}
  to{opacity:1; transform:none;}
}

.bb-step-head{margin-bottom:var(--sp-5);}
.bb-step-count{
  font-size:0.76rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--navy); margin:0 0 8px;
}
.bb-step-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.25rem, 2.4vw, 1.6rem); line-height:1.25;
  margin:0; color:var(--ink);
}
.bb-step-title:focus{outline:none;}
.bb-step-title:focus-visible{outline:2px solid var(--navy); outline-offset:4px; border-radius:4px;}
.bb-step-help{margin:10px 0 0; font-size:0.92rem; color:var(--slate); line-height:1.55;}

/* Cartes de choix. Le radio natif est masqué mais reste focusable : il apporte
   la navigation aux flèches, la sélection unique et l'annonce correcte aux
   lecteurs d'écran, qu'une div[role=radio] aurait fallu réécrire entièrement. */
.bb-choices{display:grid; gap:12px;}
.bb-choices--3{grid-template-columns:repeat(auto-fit, minmax(210px, 1fr));}
/* Grille 2 × 2 : quatre types de véhicule sur deux rangées égales. */
.bb-choices--2{grid-template-columns:repeat(2, 1fr);}
.bb-choice{position:relative;}
.bb-choice input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.bb-choice label{
  display:flex; align-items:center; gap:13px;
  padding:16px; min-height:76px; cursor:pointer;
  border:1.5px solid var(--bg-soft); border-radius:var(--radius-lg);
  background:var(--white);
  transition:border-color 160ms ease, background 160ms ease,
             transform 160ms ease-out, box-shadow 160ms ease-out;
}
.bb-choice label:hover{border-color:var(--accent-light); transform:translateY(-2px);}
.bb-choice input:focus-visible + label{outline:2px solid var(--navy); outline-offset:2px;}
.bb-choice input:checked + label{
  border-color:var(--navy); background:var(--blue-light);
  box-shadow:0 4px 14px rgba(3,3,146,0.10);
}
.bb-choice-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:11px; flex-shrink:0;
  background:var(--blue-light); transition:background 160ms ease;
}
.bb-choice input:checked + label .bb-choice-icon{background:var(--white);}
.bb-choice-body{display:flex; flex-direction:column; gap:3px; min-width:0;}
.bb-choice-label{font-family:var(--font-display); font-weight:700; font-size:0.98rem; color:var(--ink);}
.bb-choice-hint{font-size:0.8rem; color:var(--slate); line-height:1.4;}
.bb-choice-check{
  margin-left:auto; flex-shrink:0;
  width:22px; height:22px; border-radius:50%; background:var(--navy);
  display:inline-flex; align-items:center; justify-content:center;
  opacity:0; transform:scale(0.6); transition:opacity 160ms ease, transform 160ms ease;
}
.bb-choice input:checked + label .bb-choice-check{opacity:1; transform:scale(1);}

/* ── « Je n'ai pas de photo » ────────────────────────────────────────────────
   Case facultative de l'étape 4. Elle reprend les mêmes jetons que les cartes
   de choix ci-dessus — même bordure 1.5px, même rayon, mêmes couleurs d'état
   coché (--navy / --blue-light), même transition 160ms — pour rester de la même
   famille visuelle.

   Elle est en revanche DÉLIBÉRÉMENT PLUS DISCRÈTE que le bloc d'ajout de
   photos : une seule ligne, pas de min-height de 76px, une pastille de 20px et
   un texte à 0.87rem. C'est une porte de sortie, pas l'action principale de
   l'étape — elle doit se comprendre d'un coup d'œil sans détourner du dépôt de
   photos, qui reste le chemin souhaité. */
.bb-nophoto{margin-top:14px;}
.bb-nophoto input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}
.bb-nophoto label{
  display:flex; align-items:center; gap:11px;
  padding:12px 14px; cursor:pointer;
  border:1.5px solid var(--bg-soft); border-radius:var(--radius-md);
  background:var(--white);
  transition:border-color 160ms ease, background 160ms ease;
}
.bb-nophoto label:hover{border-color:var(--accent-light);}
.bb-nophoto input:focus-visible + label{outline:2px solid var(--navy); outline-offset:2px;}
.bb-nophoto input:checked + label{border-color:var(--navy); background:var(--blue-light);}
.bb-nophoto-box{
  flex-shrink:0; width:20px; height:20px; border-radius:6px;
  border:1.5px solid var(--slate); background:var(--white);
  display:inline-flex; align-items:center; justify-content:center;
  transition:background 160ms ease, border-color 160ms ease;
}
.bb-nophoto-box svg{opacity:0; transition:opacity 160ms ease;}
.bb-nophoto input:checked + label .bb-nophoto-box{
  background:var(--navy); border-color:var(--navy);
}
.bb-nophoto input:checked + label .bb-nophoto-box svg{opacity:1;}
.bb-nophoto-text{font-size:0.87rem; line-height:1.45; color:var(--ink);}

/* Avertissement d'éligibilité — informatif, jamais bloquant. */
.bb-eligibility{
  display:flex; gap:12px; align-items:flex-start; margin-top:var(--sp-4);
  padding:14px 16px; border-radius:var(--radius-md);
  background:#FFF8ED; border:1px solid #F2D9AE;
}
.bb-eligibility[hidden]{display:none;}
.bb-eligibility-mark{flex-shrink:0; line-height:0; margin-top:1px;}
.bb-eligibility p{margin:0; font-size:0.9rem; line-height:1.58; color:#7A4A12;}

/* ── Étape 3 : choix de la méthode d'identification ──────────────────────────
   L'étape se joue en deux écrans. ÉCRAN 1 : les deux méthodes seules, aucun
   champ. ÉCRAN 2 : la méthode retenue, précédée d'un retour au choix. Le
   passage de l'un à l'autre est un simple `hidden` posé par le script : les
   éléments masqués sortent du flux, de l'ordre de tabulation et de l'arbre
   d'accessibilité, donc n'occupent aucune place et ne sont pas annoncés.

   Le radio est masqué mais reste focusable, comme pour les cartes des étapes 1
   et 2 : il apporte la navigation aux flèches, la sélection unique et
   l'annonce aux lecteurs d'écran. La carte ÉTANT le <label> de son radio,
   cliquer n'importe où dessus choisit la méthode. */
.bb-idmode{
  display:grid; grid-template-columns:repeat(2, 1fr);
  gap:var(--sp-3); margin-bottom:var(--sp-4);
}
.bb-idmode[hidden]{display:none;}

.bb-method{position:relative; display:flex;}
.bb-method[hidden]{display:none;}
.bb-method input{
  position:absolute; opacity:0; width:1px; height:1px; pointer-events:none;
}

/* La carte : c'est le label, donc toute sa surface est cliquable — une cible
   tactile très au-delà des 44 px recommandés sur mobile. */
.bb-method-head{
  flex:1; display:flex; flex-direction:column; align-items:center;
  text-align:center; gap:6px; cursor:pointer;
  padding:var(--sp-4) var(--sp-3);
  border:1.5px solid var(--bg-soft); border-radius:var(--radius-lg);
  background:var(--white);
  transition:border-color 160ms ease, background 160ms ease,
             transform 160ms ease-out, box-shadow 160ms ease-out;
}
.bb-method-head:hover{
  border-color:var(--accent-light); transform:translateY(-2px);
  box-shadow:0 6px 18px rgba(3,3,146,0.08);
}
.bb-method input:focus-visible + .bb-method-head{
  outline:2px solid var(--navy); outline-offset:2px;
}
.bb-method-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:56px; height:56px; border-radius:15px; margin-bottom:6px;
  background:var(--blue-light);
}
.bb-method-title{
  font-family:var(--font-display); font-weight:700;
  font-size:1.02rem; color:var(--ink); line-height:1.3;
  /* Les deux libellés sont longs : ils doivent pouvoir se couper proprement
     plutôt que déborder de la carte sur un écran étroit. */
  overflow-wrap:break-word; hyphens:auto;
}
.bb-method-sub{
  font-size:0.86rem; color:var(--slate); line-height:1.45;
  max-width:28ch; overflow-wrap:break-word;
}

/* ÉCRAN 2 — la méthode retenue. */
.bb-method-panels[hidden]{display:none;}
.bb-method-form[hidden]{display:none;}

/* Retour au choix. Discret par construction : pas de fond, pas de bordure,
   seulement le bleu de marque — il ne doit pas concurrencer « Continuer ».
   La flèche est l'icône `arrowRight` retournée, comme le « Précédent » du
   configurateur, plutôt qu'un second glyphe à charger. */
.bb-method-back{
  display:inline-flex; align-items:center; gap:7px;
  margin-bottom:var(--sp-3); padding:8px 12px 8px 8px;
  border:0; border-radius:var(--radius-sm); background:none;
  font-family:var(--font-display); font-size:0.88rem; font-weight:600;
  color:var(--navy); cursor:pointer;
  transition:background 160ms ease, color 160ms ease;
}
.bb-method-back svg{transform:rotate(180deg);}
.bb-method-back:hover{background:var(--bg-soft);}
.bb-method-back:focus-visible{outline:2px solid var(--navy); outline-offset:2px;}
.bb-method-back[hidden]{display:none;}

/* Sous 720 px, les deux cartes passent l'une sous l'autre : côte à côte, leurs
   libellés — « Avec les informations du véhicule » — se couperaient en trop de
   lignes pour rester lisibles. */
@media (max-width:720px){
  .bb-idmode{grid-template-columns:1fr; gap:12px;}
  .bb-method-head{padding:var(--sp-3);}
  .bb-method-icon{width:48px; height:48px; border-radius:13px; margin-bottom:2px;}
  .bb-method-title{font-size:0.98rem;}
}

/* Champ plaque de l'étape 3 : même dispositif que sur la homepage — champ
   visible, label au-dessus, indice et erreur en dessous. Le volet `<details>`
   qui l'enfermait a été retiré (il masquait le champ par défaut) ; seul reste
   l'écart qui le sépare du bloc précédent. */
.bb-plate-field{margin-top:var(--sp-4);}

/* Liste des prises de vue suggérées, étape 4. */
.bb-shotlist{
  list-style:none; margin:0 0 var(--sp-4); padding:0;
  display:flex; flex-wrap:wrap; gap:8px;
}
.bb-shotlist li{
  display:inline-flex; align-items:center; gap:6px;
  padding:7px 12px; border-radius:999px;
  background:var(--blue-light); color:var(--navy);
  font-size:0.82rem; font-weight:600;
}

/* Récapitulatif */
.bb-recap{
  margin-top:var(--sp-5); padding:var(--sp-5);
  background:var(--bg); border-radius:var(--radius-lg); border:var(--border);
}
.bb-recap[hidden]{display:none;}
.bb-recap-title{
  font-family:var(--font-display); font-weight:700; font-size:1rem;
  margin:0 0 var(--sp-3); color:var(--ink);
}
.bb-recap-list{margin:0; display:grid; gap:2px;}
.bb-recap-row{
  display:flex; justify-content:space-between; align-items:baseline; gap:12px;
  padding:9px 0; border-bottom:1px solid var(--bg-soft);
}
.bb-recap-row:last-child{border-bottom:0;}
.bb-recap-row dt{font-size:0.85rem; color:var(--slate); margin:0;}
.bb-recap-row dd{
  margin:0; font-size:0.9rem; font-weight:600; color:var(--ink);
  text-align:right; display:flex; align-items:center; gap:10px;
}
.bb-recap-edit{
  background:none; border:0; padding:2px 4px; cursor:pointer;
  color:var(--cta); font-size:0.8rem; font-weight:600; text-decoration:underline;
  font-family:inherit; flex-shrink:0;
}
.bb-recap-edit:focus-visible{outline:2px solid var(--navy); outline-offset:2px; border-radius:3px;}

/* Barre d'actions */
.bb-actions{
  display:flex; gap:12px; align-items:center; margin-top:var(--sp-6);
  padding-top:var(--sp-5); border-top:var(--border);
}
.bb-actions .btn{display:inline-flex; align-items:center; justify-content:center; gap:8px;}
.bb-prev{
  background:transparent; color:var(--slate); border:1.5px solid var(--bg-soft);
}
.bb-prev:hover{border-color:var(--navy); color:var(--navy);}
.bb-prev svg{transform:rotate(180deg);}
.bb-next{margin-left:auto;}
.bb-next svg{transition:transform 180ms ease-out;}
.bb-next:hover svg{transform:translateX(3px);}
.bb-submit{margin-left:auto;}

/* Les deux boutons qui font avancer prennent le vert d'action plutôt que le
   bleu de marque. Sur mobile ils se retrouvent juste au-dessus du bandeau
   d'appel, lui aussi bleu et pleine largeur : deux boutons identiques
   empilés faisaient appeler qui voulait continuer. */
.bb-next.btn-primary, .bb-submit.btn-primary{background:var(--go); border-color:var(--go);}
.bb-next.btn-primary:hover, .bb-submit.btn-primary:hover{background:var(--go-hover); border-color:var(--go-hover);}
.bb-next.btn-primary:focus-visible, .bb-submit.btn-primary:focus-visible{
  outline:2px solid var(--go-hover); outline-offset:3px;
}

/* Sans JavaScript les deux boutons de navigation n'ont aucun rôle : les cinq
   étapes sont déjà toutes visibles, seul « Envoyer » est utile. Le script pose
   .js-on sur <html> et prend alors le relais. */
.bb-prev, .bb-next{display:none;}
.js-on .bb-prev, .js-on .bb-next{display:inline-flex;}
.js-on .bb-prev[hidden], .js-on .bb-next[hidden], .bb-submit[hidden]{display:none;}

.bb-wizard .form-disclaimer{margin-top:var(--sp-4);}

/* ============ ÉCRAN DE CONFIRMATION (page rachat) ============
   Affiché par le script à la place du formulaire, après un envoi réussi.
   Rendu au build mais `hidden` : sans JavaScript il n'apparaît jamais.

   Le vert est ici un signal de validation, conformément à la convention du
   site : un seul vert fort par écran, celui du cercle. La ligne de
   disponibilité reste du texte gris pour ne pas lui disputer l'attention. */
.bb-done{display:flex; justify-content:center;}
.bb-done-card{
  background:var(--white); border:1px solid var(--bg-soft);
  border-radius:var(--radius-xl); box-shadow:var(--shadow-md);
  width:100%; max-width:512px; padding:var(--sp-6) var(--sp-5) var(--sp-5);
  text-align:center;
}

/* Le cercle : l'anneau se referme, puis la coche s'écrit à l'intérieur. */
.bb-done-seal{position:relative; width:148px; height:148px; margin:0 auto var(--sp-5);}
.bb-done-gauge{
  position:absolute; inset:0; width:100%; height:100%;
  transform:rotate(-90deg);
}
.bb-done-val{
  stroke-dasharray:427; stroke-dashoffset:427;
  animation:bbClose 820ms cubic-bezier(0.65,0,0.35,1) 120ms forwards;
}
.bb-done-core{
  position:absolute; inset:17px; border-radius:50%;
  background:var(--ok-bg); display:grid; place-items:center;
  animation:bbPop 520ms cubic-bezier(0.34,1.35,0.5,1) 300ms both;
}
.bb-done-core path{
  stroke-dasharray:48; stroke-dashoffset:48;
  animation:bbDraw 560ms cubic-bezier(0.65,0,0.35,1) 620ms forwards;
}
.bb-done-halo{
  position:absolute; inset:0; border-radius:50%;
  border:1.5px solid var(--ok-line);
  animation:bbHalo 3s ease-out 1.2s infinite;
}
@keyframes bbClose{to{stroke-dashoffset:0;}}
@keyframes bbDraw{to{stroke-dashoffset:0;}}
@keyframes bbPop{
  0%{transform:scale(0.8); opacity:0;}
  60%{transform:scale(1.04);}
  100%{transform:scale(1); opacity:1;}
}
@keyframes bbHalo{
  0%{transform:scale(1); opacity:0.7;}
  70%{opacity:0;}
  100%{transform:scale(1.3); opacity:0;}
}
@keyframes bbRise{
  from{opacity:0; transform:translateY(9px);}
  to{opacity:1; transform:none;}
}
@keyframes bbBlink{50%{opacity:0.45;}}

/* L'entrée est échelonnée : le regard suit cercle → titre → texte → numéro. */
.bb-done-card > *{animation:bbRise 520ms cubic-bezier(0.22,0.8,0.3,1) both;}
.bb-done-card > *:nth-child(2){animation-delay:640ms;}
.bb-done-card > *:nth-child(3){animation-delay:730ms;}
.bb-done-card > *:nth-child(4){animation-delay:820ms;}
.bb-done-card > *:nth-child(5){animation-delay:910ms;}

.bb-done-title{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.45rem, 3.5vw, 1.85rem); line-height:1.2;
  margin:0 0 var(--sp-3); color:var(--ink-deep);
  text-wrap:balance; letter-spacing:-0.02em;
}
.bb-done-title:focus{outline:none;}
.bb-done-title:focus-visible{outline:2px solid var(--navy); outline-offset:4px; border-radius:4px;}
.bb-done-sub{
  margin:0 auto; max-width:33ch; color:var(--slate);
  line-height:1.6; font-size:1rem;
}

/* Le numéro est présenté comme celui que le visiteur a saisi : c'est ce qui
   lui permet de repérer une faute de frappe. */
.bb-done-callback{
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px solid var(--bg-soft);
  display:flex; flex-direction:column; align-items:center; gap:6px;
}
.bb-done-label{
  font-size:0.82rem; color:var(--slate);
  display:inline-flex; align-items:center; gap:7px;
}
.bb-done-dot{
  width:8px; height:8px; border-radius:50%; background:var(--ok);
  box-shadow:0 0 0 3px rgba(11,122,59,0.16); flex:0 0 auto;
  animation:bbBlink 2.4s ease-in-out infinite;
}
.bb-done-num{
  font-family:var(--font-display); font-weight:800; font-size:1.34rem;
  color:var(--ink); font-variant-numeric:tabular-nums; letter-spacing:0.02em;
}
.bb-done-when{
  font-size:0.83rem; color:var(--slate);
  line-height:1.55; max-width:32ch; margin-top:2px;
}
.bb-done-when b{color:var(--ok-ink); font-weight:600;}

/* Une sortie : le formulaire a disparu, l'écran ne doit pas être un cul-de-sac. */
.bb-done-exit{
  margin-top:var(--sp-5); padding-top:var(--sp-4);
  border-top:1px solid var(--bg-soft);
}

@media (max-width:640px){
  .bb-done-card{padding:var(--sp-5) var(--sp-4); border-radius:var(--radius-lg);}
  .bb-done-seal{width:122px; height:122px;}
  .bb-done-exit .btn{width:100%;}
}

@media (max-width:640px){
  .bb-wizard{padding:var(--sp-4); border-radius:var(--radius-lg);}
  /* Le compteur des pastilles et l'intitulé de l'étape répètent la même
     information à deux lignes d'intervalle : 48 px entre les deux creusaient
     un vide au milieu de l'écran, sur une hauteur déjà comptée. */
  .bb-progress{margin-bottom:var(--sp-4);}
  .bb-choices--3{grid-template-columns:repeat(auto-fit, minmax(148px, 1fr));}
  .bb-choices--2{grid-template-columns:repeat(2, 1fr);}
  /* Cartes compactes : l'icône revient À GAUCHE du texte plutôt qu'au-dessus.
     Empilées, six cartes de 112 px faisaient près de 700 px et repoussaient
     « Continuer » très loin sous le pli — il fallait faire défiler pour
     valider un choix qu'on venait de faire. À 64 px, les six tiennent
     pratiquement dans un écran de téléphone. Le sous-texte est conservé : il
     aide à choisir, et c'est la hauteur qui posait problème, pas le texte. */
  .bb-choice label{
    flex-direction:row; align-items:center; gap:11px;
    min-height:64px; padding:11px 12px;
  }
  .bb-choice-icon{width:36px; height:36px; border-radius:9px;}
  .bb-choice-label{font-size:0.92rem;}
  .bb-choice-hint{font-size:0.75rem;}
  /* La pastille de sélection reste en coin : au fil du texte elle
     décalerait les lignes en apparaissant. */
  .bb-choice-check{
    position:absolute; top:9px; right:9px; margin:0;
    width:19px; height:19px;
  }

  /* Sans script, la barre reste empilée : rien ne colle, et les cinq étapes
     sont de toute façon affichées à la suite. Cette règle vient AVANT la
     version collante, qui doit pouvoir l'écraser. */
  .bb-actions{flex-direction:column-reverse; gap:10px;}
  .bb-actions .btn{width:100%;}
  .bb-next, .bb-submit{margin-left:0;}

  /* Barre d'actions collante : « Continuer » suit le défilement et reste
     atteignable quelle que soit la longueur de l'étape — l'étape 5, avec ses
     champs de coordonnées, est bien plus haute que les autres.

     `bottom:76px` la cale au-dessus de .mobile-sticky-cta, la barre d'appel
     fixe qui occupe déjà le bas de l'écran (voir « MOBILE STICKY CTA ») ;
     son z-index reste sous les 45 de celle-ci, qui garde la priorité. */
  .js-on .bb-actions{
    position:sticky; bottom:76px; z-index:20;
    flex-direction:row; gap:10px;
    margin:var(--sp-5) calc(-1 * var(--sp-4)) 0;
    padding:11px var(--sp-4) 12px;
    background:rgba(255,255,255,0.95);
    backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
    border-top:1px solid var(--bg-soft);
  }
  .js-on .bb-actions .btn{width:auto;}
  .js-on .bb-next, .js-on .bb-submit{flex:1;}
  /* « Précédent » se réduit à sa flèche : le libellé prendrait la moitié de
     la barre au détriment de l'action principale. */
  .js-on .bb-prev{
    flex:0 0 auto; padding:13px 15px; font-size:0;
    gap:0; background:var(--white);
  }
  .js-on .bb-prev svg{font-size:1rem;}

  /* Aucun dégagement supplémentaire pour .mobile-sticky-cta : sous 640px, le
     <body> porte déjà padding-bottom:76px (voir « MOBILE STICKY CTA » plus
     haut), ce qui met la totalité de la page hors de portée de la barre fixe.
     En ajouter ici creuserait un vide sous le formulaire. */
}

/* ── Les situations que nous étudions ───────────────────────────────────────
   Grille compacte à sept entrées : icône, titre, une ligne. Elle remplace sept
   cartes photographiées en 16/9 qui faisaient de cette section la plus haute
   de la page pour sept lignes de texte utile.

   LE MINIMUM EST À 250px, ET CE N'EST PAS ARBITRAIRE. Sept est un nombre
   ingrat : à 210px la grille tombait sur cinq colonnes en grand écran, laissant
   une seconde rangée de deux cartes étirées sous une rangée de cinq — une
   rupture qui se lit comme un oubli. À 250px elle tombe sur 4+3, une coupure
   franche qui a l'air voulue, puis 2+2+2+1 en petit écran et une colonne sous
   480px. Le seul cas restant, 3+3+1 vers 900px, est corrigé plus bas par une
   règle explicite à quatre colonnes. */

.bb-cases{background:var(--bg);}
.bb-situation-grid{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(250px, 1fr));
  gap:var(--sp-4);
}
/* Fenêtre étroite où `auto-fit` choisirait trois colonnes, donc 3+3+1 et une
   carte seule sur sa rangée. Quatre colonnes forcées redonnent 4+3. */
@media (min-width:860px) and (max-width:1120px){
  .bb-situation-grid{grid-template-columns:repeat(4, 1fr);}
}
.bb-situation{
  background:var(--white); border-radius:var(--radius-lg);
  border:var(--border); box-shadow:var(--shadow-sm);
  padding:var(--sp-5) var(--sp-4);
  transition:transform 180ms ease-out, box-shadow 180ms ease-out;
}
.bb-situation:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.bb-situation-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:42px; height:42px; border-radius:var(--radius-md);
  background:var(--blue-light); margin-bottom:var(--sp-3);
}
.bb-situation h3{font-size:1rem; margin:0 0 6px;}
.bb-situation p{font-size:0.88rem; color:var(--slate); line-height:1.58; margin:0;}

/* Le schéma de véhicule accidenté n'est plus utilisé par la page — les sept
   situations ne portent plus de visuel — mais `crashSchema` reste exporté par
   sections/buyback-icons.js. La règle est conservée pour qu'un réemploi ne
   parte pas d'une SVG sans dimension. */
.bb-crash-svg{width:100%; height:auto; max-width:230px; margin:0 auto; display:block;}

/* ── Rachat ou enlèvement ───────────────────────────────────────────────── */

.bb-compare{background:var(--white);}
.bb-compare-grid{
  display:grid; grid-template-columns:1fr 1fr; gap:var(--sp-5);
}
.bb-compare-col{
  padding:var(--sp-6); border-radius:var(--radius-xl); border:1.5px solid var(--bg-soft);
  background:var(--white); transition:border-color 180ms ease, box-shadow 180ms ease;
}
.bb-compare-col:hover{box-shadow:var(--shadow-md);}
.bb-compare-col--buyback{background:var(--blue-light); border-color:var(--accent-light);}
.bb-compare-col--buyback:hover{border-color:var(--navy);}
.bb-compare-icon{
  display:inline-flex; align-items:center; justify-content:center;
  width:52px; height:52px; border-radius:14px; background:var(--white);
  box-shadow:var(--shadow-sm); margin-bottom:var(--sp-4);
}
.bb-compare-label{
  display:block; font-size:0.76rem; font-weight:700; letter-spacing:0.08em;
  text-transform:uppercase; color:var(--slate); margin-bottom:8px;
}
.bb-compare-col--buyback .bb-compare-label{color:var(--navy);}
.bb-compare-col h3{font-size:1.18rem; margin:0 0 10px; line-height:1.3;}
.bb-compare-col > p{font-size:0.94rem; color:var(--slate); line-height:1.65; margin:0;}
.bb-compare-points{
  list-style:none; margin:var(--sp-5) 0 0; padding:0; display:grid; gap:11px;
}
.bb-compare-points li{
  display:flex; gap:10px; align-items:flex-start;
  font-size:0.9rem; line-height:1.55; color:var(--ink);
}
.bb-compare-points svg{flex-shrink:0; margin-top:2px;}

/* Bande d'éligibilité : le seuil 2009, condition commerciale d'Epav'Action et
   non une règle légale. Voir data/buyback-page.js. */
.bb-eligibility-band{
  display:flex; gap:13px; align-items:flex-start;
  margin:var(--sp-5) 0 0; padding:var(--sp-4) var(--sp-5);
  background:var(--bg); border-radius:var(--radius-lg);
  border-left:3px solid var(--navy);
  font-size:0.94rem; line-height:1.62; color:var(--ink);
}
.bb-eligibility-band .bb-eligibility-mark{flex-shrink:0; line-height:0; margin-top:2px;}

.bb-compare-cta{
  display:flex; align-items:center; justify-content:space-between; gap:var(--sp-5);
  margin-top:var(--sp-6); padding:var(--sp-5) var(--sp-6);
  background:linear-gradient(120deg, var(--navy), var(--navy-dark));
  border-radius:var(--radius-xl); color:var(--white); flex-wrap:wrap;
}
.bb-compare-cta-title{
  font-family:var(--font-display); font-weight:700; font-size:1.1rem;
  margin:0 0 6px; color:var(--white);
}
.bb-compare-cta-text{
  margin:0; font-size:0.92rem; line-height:1.6;
  color:rgba(247,249,251,0.78); max-width:52ch;
}
.bb-compare-cta .btn{
  flex-shrink:0; background:var(--white); color:var(--navy);
  display:inline-flex; align-items:center; gap:8px;
}
.bb-compare-cta .btn:hover{background:var(--blue-light);}
.bb-compare-cta .btn svg{transition:transform 180ms ease-out;}
.bb-compare-cta .btn:hover svg{transform:translateX(3px);}

@media (max-width:860px){
  .bb-compare-grid{grid-template-columns:1fr;}
  .bb-compare-cta{flex-direction:column; align-items:flex-start;}
  .bb-compare-cta .btn{width:100%;}
}

/* Filet de sécurité sur écran étroit. `.btn` porte `white-space:nowrap` pour
   tout le site — ce qui est le bon défaut, un libellé de bouton coupé en deux
   se lit mal — mais un libellé long finit alors par dépasser de son bouton
   plutôt que par le faire grandir, `width:100%` n'y changeant rien. Sous
   400 px, les boutons pleine largeur de cette page sont donc autorisés à
   passer à la ligne, et le texte est centré pour que la coupure reste propre.
   Les libellés actuels tiennent tous sur une ligne : cette règle ne se
   déclenche que si l'un d'eux venait à s'allonger. */
@media (max-width:400px){
  .bb-compare-cta .btn, .bb-eval-cta, .bb-photos-cta, .bb-cta-final .btn{
    white-space:normal; text-align:center;
  }
}

/* ── Évaluation — pic navy unique de la page ────────────────────────────────
   Cette section a absorbé « Une épave n'est pas toujours sans valeur » et
   « Pas de montant sorti d'un chapeau ». Les trois disaient que le véhicule est
   étudié plutôt que tarifé d'avance ; tenue une seule fois, l'affirmation porte,
   et la page n'a plus qu'un seul pic sombre au lieu de deux à quatre sections
   d'écart.

   La classe reste `.bb-criteria` : elle est la seule des trois dont le fond,
   le halo radial et la grille d'étiquettes sont conservés tels quels. Les
   règles ajoutées ci-dessous, préfixées `bb-eval-`, portent l'intro héritée de
   la section « transparence ». */

.bb-criteria{
  background:linear-gradient(160deg, var(--navy-dark) 0%, var(--navy) 100%);
  color:var(--white); position:relative; overflow:hidden;
}
.bb-criteria::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 15% 85%, rgba(166,168,255,0.14), transparent 50%);
}
.bb-criteria .container{position:relative; z-index:1;}
.bb-criteria .eyebrow{color:var(--accent-light);}

/* Intro : le discours à gauche, la carte de refus à droite. Reprise de
   l'ancienne `.bb-tr-layout`, sans la marge négative qui faisait mordre la
   carte sur la limite de section — ici l'intro est DANS la section, pas à
   cheval sur son bord. */
.bb-eval-intro{
  display:grid; grid-template-columns:1.05fr 0.95fr; gap:var(--sp-7);
  align-items:start; margin-bottom:var(--sp-7);
  padding-bottom:var(--sp-7); border-bottom:1px solid rgba(166,168,255,0.18);
}
.bb-eval-lede{
  margin-top:var(--sp-4); font-size:1.05rem; line-height:1.68;
  color:rgba(247,249,251,0.82); max-width:52ch;
}
.bb-eval-statement{
  margin-top:var(--sp-5); font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.5rem, 3.2vw, 2.2rem); line-height:1.22;
  letter-spacing:-0.015em; color:var(--white);
}
.bb-eval-card{
  background:rgba(255,255,255,0.06);
  border:1px solid rgba(166,168,255,0.20);
  border-radius:var(--radius-xl); padding:var(--sp-6);
}
.bb-eval-card-text{
  margin:0 0 var(--sp-5); font-size:0.98rem; line-height:1.68;
  color:rgba(247,249,251,0.86);
}
/* Trois refus d'une ligne chacun : c'est tout ce qui subsiste de l'ancienne
   section « transparence », dont chaque point occupait un titre suivi d'un
   paragraphe pour une idée qui tient en une phrase. */
.bb-eval-promise{list-style:none; margin:0; padding:0; display:grid; gap:14px;}
.bb-eval-promise li{
  display:flex; gap:12px; align-items:flex-start;
  font-size:0.92rem; line-height:1.6; color:rgba(247,249,251,0.80);
}
.bb-eval-check{
  flex-shrink:0; width:26px; height:26px; border-radius:50%;
  background:rgba(166,168,255,0.16);
  display:inline-flex; align-items:center; justify-content:center; margin-top:-1px;
}
.bb-eval-items-label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:1.12rem; line-height:1.35; color:var(--white);
}
.bb-eval-cta{margin-top:var(--sp-5);}

.bb-criteria-layout{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--sp-7); align-items:start;
}
.bb-criteria-head > p{
  margin-top:var(--sp-4); font-size:1rem; line-height:1.68;
  color:rgba(247,249,251,0.80);
}
.bb-criteria-note{
  display:flex; gap:11px; align-items:flex-start; margin-top:var(--sp-5);
  padding:var(--sp-4); border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.05); border:1px solid rgba(166,168,255,0.18);
  font-size:0.88rem; line-height:1.6; color:rgba(247,249,251,0.78);
}
.bb-criteria-note span:first-child{flex-shrink:0; line-height:0; margin-top:2px;}

/* Constellation d'étiquettes plutôt qu'une liste numérotée : dix éléments
   alignés se liraient comme une procédure séquentielle, alors que ces critères
   s'apprécient ensemble.

   Minimum à 210px et non 190 : dix éléments sur trois colonnes donnent
   3+3+3+1, soit une étiquette seule et étirée en bas de grille. Sur deux
   colonnes ils tombent en 5×2, sans reste. */
.bb-criteria-grid{
  list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fit, minmax(210px, 1fr)); gap:12px;
}
/* Bande où la grille passe en pleine largeur (layout déjà en colonne unique)
   et où `auto-fit` choisirait trois colonnes, donc l'orphelin à nouveau. */
@media (min-width:680px) and (max-width:900px){
  .bb-criteria-grid{grid-template-columns:repeat(2, 1fr);}
}
.bb-criterion{
  padding:var(--sp-4); border-radius:var(--radius-lg);
  background:rgba(255,255,255,0.055); border:1px solid rgba(166,168,255,0.16);
  transition:background 180ms ease, border-color 180ms ease, transform 180ms ease-out;
}
.bb-criterion:hover{
  background:rgba(255,255,255,0.10); border-color:rgba(166,168,255,0.34);
  transform:translateY(-2px);
}
.bb-criterion-label{
  display:block; font-family:var(--font-display); font-weight:700;
  font-size:0.98rem; color:var(--white); margin-bottom:6px;
}
.bb-criterion-text{
  display:block; font-size:0.83rem; line-height:1.55;
  color:rgba(247,249,251,0.68);
}

@media (max-width:900px){
  .bb-criteria-layout{grid-template-columns:1fr; gap:var(--sp-6);}
  .bb-eval-intro{
    grid-template-columns:1fr; gap:var(--sp-6);
    margin-bottom:var(--sp-6); padding-bottom:var(--sp-6);
  }
  .bb-eval-cta{width:100%; justify-content:center;}
}

/* ── Montrez-nous votre véhicule ────────────────────────────────────────── */

.bb-photos{background:var(--white);}
.bb-photos-layout{
  display:grid; grid-template-columns:0.85fr 1.15fr; gap:var(--sp-7); align-items:start;
}
.bb-photos-copy > p{color:var(--slate); line-height:1.68;}
.bb-photos-note{
  display:flex; gap:11px; align-items:flex-start; margin-top:var(--sp-5);
  padding:var(--sp-4); background:var(--blue-light); border-radius:var(--radius-lg);
  font-size:0.9rem; line-height:1.6; color:var(--navy);
}
.bb-photos-note svg{flex-shrink:0; margin-top:2px;}
.bb-photos-cta{
  margin-top:var(--sp-5); display:inline-flex; align-items:center; gap:8px;
}
.bb-photos-cta svg{transition:transform 180ms ease-out;}
.bb-photos-cta:hover svg{transform:translateX(3px);}

.bb-zones{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(180px, 1fr)); gap:14px;
}
.bb-zone{
  padding:var(--sp-4); border:var(--border); border-radius:var(--radius-lg);
  background:var(--white); text-align:center;
  transition:border-color 180ms ease, transform 180ms ease-out, box-shadow 180ms ease-out;
}
.bb-zone:hover{
  border-color:var(--accent-light); transform:translateY(-3px);
  box-shadow:var(--shadow-md);
}
.bb-zone-visual{display:block; padding:10px 0 12px; line-height:0;}
.bb-zone-visual svg{width:100%; height:auto; max-width:130px;}
.bb-zone h3{font-size:0.96rem; margin:0 0 6px;}
.bb-zone p{font-size:0.83rem; color:var(--slate); line-height:1.5; margin:0;}

@media (max-width:900px){
  .bb-photos-layout{grid-template-columns:1fr; gap:var(--sp-6);}
}

/* ── « Une voiture ne disparaît pas » — cascade du cycle de vie ──────────── */

/* Composition délibérément distincte de la timeline « Comment ça marche » :
   verticale descendante, sujet = le véhicule, et chaque palier porte son
   ACTEUR. C'est cette dernière particularité qui rend visible la distinction
   entre ce qu'Epav'Action fait et ce que seul un centre VHU agréé peut faire. */
.bb-lifecycle{
  background:linear-gradient(180deg, var(--bg-soft) 0%, var(--bg) 40%, var(--white) 100%);
}
.bb-life-head{margin-left:auto; margin-right:auto; text-align:center;}
.bb-life-flow{max-width:720px; margin:0 auto;}

.bb-life-origin{
  display:flex; align-items:center; gap:16px;
  padding:var(--sp-5); border-radius:var(--radius-xl);
  background:linear-gradient(120deg, var(--navy), var(--navy-dark));
  color:var(--white); box-shadow:0 12px 32px rgba(3,3,146,0.22);
}
.bb-life-origin-mark{
  flex-shrink:0; width:56px; height:56px; border-radius:15px;
  background:rgba(255,255,255,0.12);
  display:inline-flex; align-items:center; justify-content:center;
}
.bb-life-origin-title{
  font-family:var(--font-display); font-weight:800; font-size:1.15rem;
  margin:0 0 4px; color:var(--white);
}
.bb-life-origin-text{margin:0; font-size:0.9rem; line-height:1.55; color:rgba(247,249,251,0.78);}

.bb-life-link{
  display:flex; justify-content:center; padding:10px 0; line-height:0;
  opacity:0.55;
}
.bb-life-steps{list-style:none; margin:0; padding:0;}
.bb-life-step{display:block;}
.bb-life-step:last-child .bb-life-link{display:none;}

/* Les cartes rétrécissent à mesure que l'on descend : le véhicule se décompose
   littéralement sous les yeux du lecteur. */
.bb-life-card{
  display:flex; gap:16px; align-items:flex-start;
  padding:var(--sp-5); border-radius:var(--radius-lg);
  background:var(--white); border:1.5px solid var(--bg-soft);
  box-shadow:var(--shadow-sm);
  width:calc(100% - var(--i, 0) * 3.2%);
  margin:0 auto;
  transition:transform 180ms ease-out, box-shadow 180ms ease-out;
}
.bb-life-card:hover{transform:translateY(-3px); box-shadow:var(--shadow-md);}
.bb-life-card--epav{border-left:4px solid var(--navy);}
.bb-life-card--vhu{border-left:4px solid var(--ok);}
.bb-life-card--filiere{border-left:4px solid var(--accent-light);}
.bb-life-num{
  flex-shrink:0; font-family:var(--font-display); font-weight:800;
  font-size:1.5rem; line-height:1; color:var(--bg-soft);
}
.bb-life-body{min-width:0;}

/* La pastille d'acteur : deux paliers sur cinq seulement portent la couleur
   d'Epav'Action, et cela se voit d'un coup d'œil. */
.bb-life-actor{
  display:inline-block; padding:4px 10px; border-radius:999px;
  font-size:0.72rem; font-weight:700; letter-spacing:0.04em;
  text-transform:uppercase; margin-bottom:9px;
}
.bb-life-actor--epav{background:var(--blue-light); color:var(--navy);}
.bb-life-actor--vhu{background:var(--ok-bg); color:var(--ok-ink);}
.bb-life-actor--filiere{background:var(--bg-soft); color:var(--slate);}
.bb-life-body h3{font-size:1.06rem; margin:0 0 7px;}
.bb-life-body p{font-size:0.9rem; color:var(--slate); line-height:1.62; margin:0;}

.bb-life-note{
  display:flex; gap:13px; align-items:flex-start;
  max-width:720px; margin:var(--sp-6) auto 0;
  padding:var(--sp-5); background:var(--blue-light);
  border-radius:var(--radius-lg); border-left:3px solid var(--navy);
}
.bb-life-note-mark{flex-shrink:0; line-height:0; margin-top:2px;}
.bb-life-note p{margin:0; font-size:0.9rem; line-height:1.65; color:var(--navy);}

@media (max-width:640px){
  .bb-life-card{width:100%; padding:var(--sp-4); gap:12px;}
  .bb-life-origin{flex-direction:column; align-items:flex-start;}
}

/* ── Documents ──────────────────────────────────────────────────────────── */

.bb-docs{background:var(--bg);}
.bb-docs-layout{
  display:grid; grid-template-columns:0.8fr 1.2fr; gap:var(--sp-7); align-items:start;
}
.bb-docs-head > p{margin-top:var(--sp-4); color:var(--slate); line-height:1.68;}
.bb-doc-list{list-style:none; margin:0; padding:0; display:grid; gap:12px;}
.bb-doc{
  display:flex; gap:14px; align-items:flex-start;
  padding:var(--sp-4); background:var(--white);
  border-radius:var(--radius-lg); border:var(--border);
  transition:border-color 180ms ease, transform 180ms ease-out;
}
.bb-doc:hover{border-color:var(--accent-light); transform:translateX(3px);}
.bb-doc-icon{
  flex-shrink:0; width:38px; height:38px; border-radius:10px;
  background:var(--blue-light);
  display:inline-flex; align-items:center; justify-content:center;
}
.bb-doc h3{font-size:0.98rem; margin:0 0 5px;}
.bb-doc p{font-size:0.87rem; color:var(--slate); line-height:1.58; margin:0;}
.bb-docs-note{
  display:flex; gap:11px; align-items:flex-start; margin-top:var(--sp-4);
  padding:var(--sp-4); border-radius:var(--radius-lg);
  background:var(--white); border:var(--border);
  font-size:0.87rem; line-height:1.6; color:var(--slate);
}
.bb-docs-note svg{flex-shrink:0; margin-top:2px;}

@media (max-width:900px){
  .bb-docs-layout{grid-template-columns:1fr; gap:var(--sp-6);}
}

/* ── CTA final ──────────────────────────────────────────────────────────── */

.bb-cta-final{
  background:linear-gradient(135deg, var(--navy) 0%, var(--navy-dark) 100%);
  color:var(--white); text-align:center; position:relative; overflow:hidden;
}
.bb-cta-final::before{
  content:""; position:absolute; inset:0; pointer-events:none;
  background:radial-gradient(circle at 50% 120%, rgba(166,168,255,0.18), transparent 60%);
}
.bb-cta-final .container{position:relative; z-index:1;}
.bb-cta-final h2{
  font-family:var(--font-display); font-weight:800;
  font-size:clamp(1.7rem, 4vw, 2.7rem); line-height:1.16;
  letter-spacing:-0.02em; color:var(--white); margin:0 auto var(--sp-4);
  max-width:22ch;
}
.bb-cta-final p{
  color:rgba(247,249,251,0.78); font-size:0.95rem;
  margin:0 auto var(--sp-6); max-width:46ch;
}
.bb-cta-final .hero-ctas{justify-content:center;}
.bb-cta-final .btn{display:inline-flex; align-items:center; gap:9px;}
.bb-cta-final .btn svg{transition:transform 180ms ease-out;}
.bb-cta-final .btn:hover svg{transform:translateX(3px);}

/* ── Teaser rachat de la homepage ───────────────────────────────────────── */

.buyback-more{margin-top:var(--sp-4);}
.buyback-more a{
  display:inline-flex; align-items:center; gap:7px;
  color:var(--cta); font-weight:600; font-size:0.92rem; text-decoration:none;
  border-bottom:1px solid transparent; transition:border-color 160ms ease;
}
.buyback-more a:hover{border-bottom-color:var(--cta);}
.buyback-more svg{transition:transform 180ms ease-out;}
.buyback-more a:hover svg{transform:translateX(3px);}

/* ── Apparition au scroll ───────────────────────────────────────────────── */

/* Appliquée par le script via .js-on : sans JavaScript, rien n'est masqué —
   une animation d'entrée qui ne se déclencherait jamais laisserait la page
   vide pour qui n'exécute pas le script. */
.js-on .bb-reveal{opacity:0; transform:translateY(16px);}
.js-on .bb-reveal.is-in{
  opacity:1; transform:none;
  transition:opacity 480ms ease-out, transform 480ms cubic-bezier(0.2,0.7,0.3,1);
  transition-delay:calc(var(--r, 0) * 60ms);
}

/* ── Mouvement réduit ───────────────────────────────────────────────────── */

@media (prefers-reduced-motion:reduce){
  .bb-situation, .bb-choice label, .bb-choice-check,
  .bb-criterion, .bb-zone, .bb-life-card, .bb-doc,
  .bb-progress-fill, .bb-dot, .bb-hero-ctas .btn svg, .bb-next svg,
  .bb-photos-cta svg, .bb-compare-cta .btn svg, .bb-cta-final .btn svg,
  .bb-eval-cta svg, .buyback-more svg, .buyback-more a,
  .bb-done-core, .bb-done-halo, .bb-done-dot, .bb-done-card > *{
    transition:none !important; animation:none !important;
  }
  /* Le tracé doit rester achevé, sinon l'anneau et la coche resteraient vides. */
  .bb-done-val, .bb-done-core path{stroke-dashoffset:0 !important;}
  .bb-done-halo{opacity:0;}
  .bb-done-card > *{opacity:1; transform:none;}
  .bb-situation:hover, .bb-criterion:hover, .bb-zone:hover,
  .bb-life-card:hover, .bb-doc:hover,
  .bb-choice label:hover{transform:none;}
  .js-on .bb-steps .bb-step:not([hidden]){animation:none;}
  .js-on .bb-reveal{opacity:1; transform:none;}
  .js-on .bb-reveal.is-in{transition:none; transition-delay:0ms;}
}

/* ============================================================
   PAGE MENTIONS LÉGALES — /mentions-legales
   ============================================================
   Page document : une colonne de texte sur fond blanc, sans hero, sans
   illustration et sans élément décoratif. Tous les sélecteurs sont préfixés
   `legal-` et n'existent que sur cette page : aucune règle existante n'est
   redéfinie, aucune autre page n'est affectée.

   La colonne est plafonnée à 760px — la même mesure que `.intro` des pages
   départementales. Au-delà, une ligne de texte juridique devient pénible à
   suivre ; en deçà, le document se hache. */

.legal-page{background:#FFFFFF;}
.legal-container{max-width:760px;}

/* --- Titre et date --- */
.legal-head{
  padding-bottom:var(--sp-4);
  margin-bottom:var(--sp-5);
  border-bottom:1px solid var(--line, #E3E8EF);
}
.legal-head h1{
  font-family:var(--font-display);
  font-weight:800;
  font-size:clamp(1.9rem, 4vw, 2.6rem);
  line-height:1.15;
  color:var(--navy);
  margin:0;
}
/* Sous-titre du document, entre le titre et la date. Utilisé par la politique
   de confidentialité ; les mentions légales n'en ont pas et ne l'émettent donc
   pas. Il énonce l'objet de la page, il n'accroche pas : d'où le corps de texte
   normal plutôt que la police d'affichage du <h1>. */
.legal-subtitle{
  margin-top:10px;
  font-size:1.05rem;
  line-height:1.6;
  color:var(--ink);
}
.legal-updated{
  margin-top:12px;
  font-size:0.9rem;
  color:var(--slate);
}
/* La règle générale .legal-page p impose une marge basse à tous les
   paragraphes ; dans l'en-tête, sous-titre et date sont deux lignes d'un même
   bloc et n'en veulent pas. */
.legal-head p{margin-bottom:0;}

/* --- Corps --- */
.legal-page p{
  color:var(--ink);
  font-size:1rem;
  line-height:1.75;
  margin:0 0 var(--sp-3);
}
.legal-page p:last-child{margin-bottom:0;}
.legal-page strong{color:var(--ink-deep, var(--ink)); font-weight:600;}
.legal-page a{color:var(--cta); text-decoration:underline; text-underline-offset:2px;}
.legal-page a:hover{color:var(--cta-hover);}

.legal-intro{margin-bottom:var(--sp-5);}

/* --- Sections numérotées --- */
.legal-section + .legal-section{margin-top:var(--sp-5);}
.legal-h2{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.25rem;
  line-height:1.3;
  color:var(--navy);
  margin:0 0 var(--sp-3);
}
/* Le numéro reste dans le <h2> — il fait partie du titre du document — mais se
   détache en couleur secondaire pour que le libellé domine à la lecture. */
.legal-num{
  color:var(--slate);
  font-weight:600;
  margin-right:8px;
}

/* --- Sous-rubriques ---
   Un document RGPD énumère des bases légales, des droits et des catégories de
   traceurs : autant de sous-titres à l'intérieur d'une section numérotée. Le
   niveau h3 est réellement nécessaire à la hiérarchie du document, pas
   décoratif. Le pas de taille avec .legal-h2 reste faible ; c'est la graisse et
   l'espacement qui séparent les deux niveaux, pour ne pas hacher la page. */
.legal-h3{
  font-family:var(--font-display);
  font-weight:700;
  font-size:1.02rem;
  line-height:1.4;
  color:var(--ink-deep, var(--ink));
  margin:var(--sp-4) 0 10px;
}
/* Pas d'espace avant un h3 qui ouvre immédiatement une section : le titre de
   section vient déjà de poser sa propre marge. */
.legal-h2 + .legal-h3{margin-top:0;}

/* --- Listes --- */
.legal-list{
  margin:0 0 var(--sp-3);
  padding-left:22px;
  color:var(--ink);
  font-size:1rem;
  line-height:1.75;
}
.legal-list li + li{margin-top:6px;}

/* --- Lignes mises en avant (nom du directeur, hébergeur, renvois) --- */
.legal-strong{
  font-family:var(--font-display);
  font-weight:700;
  color:var(--navy);
}

/* --- Couples libellé / valeur de l'éditeur ---
   <dl> en deux colonnes sur desktop, empilé sur mobile. Le fond très léger
   isole le bloc d'identification du reste du texte sans introduire de carte
   ni d'ombre : c'est une zone de données, pas un encart marketing. */
.legal-fields{
  margin:0 0 var(--sp-4);
  padding:var(--sp-3) var(--sp-4);
  background:var(--bg);
  border-left:3px solid var(--navy);
  border-radius:6px;
}
.legal-field{
  display:grid;
  grid-template-columns:230px 1fr;
  gap:4px 16px;
  padding:8px 0;
}
.legal-field + .legal-field{border-top:1px solid rgba(72,88,106,0.12);}
.legal-fields dt{
  font-weight:600;
  color:var(--slate);
  font-size:0.95rem;
  line-height:1.6;
}
.legal-fields dd{
  margin:0;
  color:var(--ink);
  font-size:1rem;
  line-height:1.6;
}

/* --- Mention finale --- */
.legal-foot{
  margin-top:var(--sp-5);
  padding-top:var(--sp-4);
  border-top:1px solid var(--line, #E3E8EF);
  font-size:0.9rem;
  color:var(--slate);
}

/* Renvoi vers l'autre page légale, sous la mention finale. Discret : c'est une
   note de bas de document, pas un appel à l'action. */
.legal-links{
  margin-top:10px;
  font-size:0.9rem;
}

@media (max-width:640px){
  .legal-fields{padding:var(--sp-3);}
  .legal-field{grid-template-columns:1fr; gap:2px;}
  .legal-h2{font-size:1.15rem;}
  .legal-subtitle{font-size:1rem;}
  /* Sur petit écran l'écart entre h2 et h3 se resserre avec la largeur : sans
     cela, les 36 sous-rubriques de la politique de confidentialité étirent la
     page sans gagner en lisibilité. */
  .legal-h3{font-size:1rem; margin-top:var(--sp-3);}
  /* Les URL et adresses e-mail des liens de fin ne doivent pas déborder. */
  .legal-page a{overflow-wrap:anywhere;}
  /* Les libellés longs (« Adresse de l'établissement ») et les valeurs
     (adresse e-mail) ne doivent pas déborder de la colonne sur petit écran. */
  .legal-fields dd{overflow-wrap:anywhere;}
}

/* ============ VHU SECTION ============ */
.vhu-section{
  padding:var(--sp-8) 0;
}

.vhu-header{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:var(--sp-6);
  align-items:start;
  margin-bottom:var(--sp-6);
  padding-bottom:var(--sp-6);
  border-bottom:var(--border);
}

.vhu-title{
  font-size:1.2rem;
  font-weight:700;
  color:var(--navy);
  margin-bottom:var(--sp-3);
}

.vhu-text{
  font-size:0.95rem;
  line-height:1.7;
  color:var(--slate);
  margin-bottom:var(--sp-3);
}

.vhu-highlight-box{
  background:var(--ok-bg);
  border-left:4px solid var(--ok);
  padding:var(--sp-3) var(--sp-4);
  border-radius:6px;
  font-size:0.9rem;
  line-height:1.65;
  color:var(--slate);
}

.vhu-highlight-box strong{
  color:var(--ok);
  font-weight:600;
}

.vhu-benefits{
  display:grid;
  grid-template-columns:repeat(4,1fr);
  gap:var(--sp-4);
  margin-bottom:var(--sp-6);
}

.vhu-benefit{
  text-align:center;
  padding:var(--sp-4) var(--sp-3);
  background:var(--bg);
  border-radius:8px;
  border:var(--border);
  transition:all 0.2s ease;
}

.vhu-benefit:hover{
  border-color:var(--accent-light);
  background:rgba(166,168,255,0.04);
}

.vhu-benefit-icon{
  width:48px;
  height:48px;
  margin:0 auto var(--sp-3);
  background:rgba(166,168,255,0.12);
  border-radius:8px;
  display:flex;
  align-items:center;
  justify-content:center;
  font-size:1.6rem;
}

.vhu-benefit-title{
  font-family:var(--font-display);
  font-weight:700;
  font-size:0.95rem;
  color:var(--navy);
  margin-bottom:var(--sp-2);
}

.vhu-benefit-text{
  font-size:0.85rem;
  line-height:1.65;
  color:var(--slate);
}

.vhu-footer{
  text-align:center;
  padding-top:var(--sp-5);
  border-top:var(--border);
  margin-top:var(--sp-5);
}

.vhu-footer-text{
  font-size:0.9rem;
  color:var(--slate);
  line-height:1.6;
}

.vhu-footer-text strong{
  color:var(--navy);
  font-weight:600;
}

@media (max-width:1024px){
  .vhu-header{grid-template-columns:1fr;}
  .vhu-benefits{grid-template-columns:repeat(2,1fr);}
}

@media (max-width:768px){
  .vhu-section{padding:var(--sp-5) 0;}
  .vhu-header{gap:var(--sp-4); margin-bottom:var(--sp-4); padding-bottom:var(--sp-4);}
  .vhu-benefits{grid-template-columns:1fr; gap:var(--sp-3);}
  .vhu-benefit{padding:var(--sp-4) var(--sp-3);}
}

/* ============ RACHAT — « Le déroulement » en rail défilant ============ */
/* La page rachat compte six étapes ; la grille de .steps-grid les comprime
   jusqu'à rendre les textes illisibles. Le rail garde la taille des cartes et
   réduit leur nombre visible à la fois.

   Les cartes reprennent volontairement les mesures de .step-card — pastille
   44px, titre 1.02rem, texte 0.9rem, alternance blanc/--bg-soft. Les règles
   sont dupliquées plutôt que partagées : .step-card est en flex:1, ces
   cartes-ci ont une largeur fixe, et les faire cohabiter dans un même
   sélecteur obligerait à annuler l'une par l'autre.

   Ne s'applique qu'à /rachat-epave. Les huit pages départementales et
   l'accueil continuent d'utiliser .steps-grid, intouchée. */
.bb-flowsec{background:var(--white); border-top:var(--border); border-bottom:var(--border);}

.bb-flow-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:var(--sp-5);
  margin-bottom:var(--sp-6);
}
.bb-flow-head h2{margin-top:12px; margin-bottom:10px;}
.bb-flow-intro{margin:0; color:var(--slate); max-width:54ch;}

.bb-flow-nav{display:flex; gap:10px; flex-shrink:0; padding-bottom:4px;}
.bb-flow-arrow{
  width:42px; height:42px; border-radius:50%;
  border:1px solid var(--bg-soft); background:var(--white); color:var(--navy);
  display:grid; place-items:center; cursor:pointer; box-shadow:var(--shadow-sm);
  transition:background .18s ease, color .18s ease, border-color .18s ease;
}
.bb-flow-arrow:hover:not(:disabled){background:var(--navy); color:var(--white); border-color:var(--navy);}
.bb-flow-arrow:disabled{opacity:0.32; cursor:default;}
.bb-flow-arrow:focus-visible{outline:2px solid var(--navy); outline-offset:3px;}
/* icons.chevron() pointe à droite : la flèche « précédente » est retournée. */
.bb-flow-arrow[data-dir="-1"] svg{transform:rotate(180deg);}

/* scroll-snap natif : le swipe mobile est celui du navigateur, aucune
   librairie de carrousel n'est nécessaire. Les marges négatives compensent le
   padding qui empêche l'ombre des cartes d'être rognée par l'overflow. */
.bb-flow-rail{
  display:flex; align-items:stretch; gap:var(--sp-3);
  overflow-x:auto; scroll-snap-type:x mandatory; scroll-behavior:smooth;
  padding:2px var(--sp-4); margin:-2px calc(-1 * var(--sp-4));
  scrollbar-width:none; -ms-overflow-style:none;
}
.bb-flow-rail::-webkit-scrollbar{display:none;}
.bb-flow-rail:focus-visible{outline:2px solid var(--navy); outline-offset:4px; border-radius:var(--radius-md);}

.bb-flow-card{
  position:relative; flex:0 0 auto;
  width:calc((100% - 3 * var(--sp-3)) / 3.4);
  min-width:210px;
  scroll-snap-align:start;
  background:var(--white); border:1px solid var(--bg-soft); border-radius:var(--radius-lg);
  padding:var(--sp-5) var(--sp-4);
  display:flex; flex-direction:column;
}
.bb-flow-card--alt{background:var(--bg-soft);}
.bb-flow-num{
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px; border-radius:50%; background:var(--navy); color:var(--white);
  font-family:var(--font-display); font-weight:800; font-size:0.95rem;
  margin-bottom:var(--sp-3); flex-shrink:0;
}
.bb-flow-card h3{margin-bottom:6px; font-size:1.02rem;}
.bb-flow-card p{font-size:0.9rem; color:var(--slate);}
/* margin-top:auto colle le compteur en pied de carte : les cartes d'une même
   ligne ont des textes de longueurs différentes, sans quoi le repère
   flotterait à une hauteur différente sur chacune. */
.bb-flow-step{
  margin-top:auto; padding-top:var(--sp-3); margin-bottom:0;
  font-family:var(--font-display); font-size:0.68rem; font-weight:600;
  letter-spacing:0.06em; text-transform:uppercase; color:var(--navy); opacity:0.62;
}

.bb-flow-link{
  flex:0 0 auto; width:20px; display:flex; align-items:center; justify-content:center;
  color:var(--navy); opacity:0.30;
}

/* Segments plutôt que points : la longueur dit qu'il s'agit d'une progression
   ordonnée, non d'un choix libre entre six vues. */
.bb-flow-dots{display:flex; gap:7px; margin-top:var(--sp-5); align-items:center;}
.bb-flow-dot{
  width:28px; height:4px; border-radius:999px; border:0; padding:0; cursor:pointer;
  background:var(--bg-soft);
  transition:background .2s ease, width .25s ease;
}
.bb-flow-dot[aria-current="true"]{background:var(--navy); width:44px;}
.bb-flow-dot:focus-visible{outline:2px solid var(--navy); outline-offset:4px;}

@media (max-width:900px){
  .bb-flow-head{flex-direction:column; align-items:stretch; gap:0; margin-bottom:var(--sp-5);}
  /* Le doigt remplace les flèches : les garder prendrait de la place au titre
     pour une commande redondante avec le swipe. */
  .bb-flow-nav{display:none;}
  .bb-flow-card{width:78%; min-width:0;}
  .bb-flow-link{display:none;}
}

@media (prefers-reduced-motion:reduce){
  .bb-flow-rail{scroll-behavior:auto;}
  .bb-flow-arrow, .bb-flow-dot{transition:none;}
}