@charset "utf-8";
/* ==========================================================================
   CITADINE AUTO — Systeme de design
   Depot-vente automobile a Troyes. PHP vanilla, aucun build, aucune police
   distante, aucun appel reseau. Icones = SVG inline (classe .ico).
   Ordre du fichier :
     01 Tokens · 02 Reset · 03 Typographie · 04 Mise en page · 05 Animations
     06 Composants · 07 Pages de contenu · 08 Mode sombre · 09 Impression
   ========================================================================== */

/* ==========================================================================
   01 · TOKENS
   ========================================================================== */

:root {
  /* Le site n'a qu'une identite : blanche, ambre, marine. Le theme sombre
     existe toujours (section 08) mais ne s'active plus sur simple reglage
     systeme — il attend un data-theme="dark" explicite. Voir DESIGN.md §2. */
  color-scheme: light;

  /* --- Palette brute (charte) ------------------------------------------- */
  --p-ink: #0D1B2A;
  --p-bleu: #1B4F9C;
  --p-ambre: #F2A007;
  --p-gris: #5A6B80;
  --p-blanc: #FFFFFF;
  --p-fond2: #F4F7FB;
  --p-bord: #E2E8F0;

  /* --- Declinaisons ----------------------------------------------------- */
  --p-ink-90: #16283B;
  --p-ink-70: #24405F;
  --p-bleu-900: #0F2E5C;
  --p-bleu-700: #16407F;
  --p-bleu-500: #2B63B5;
  --p-bleu-300: #8FB3E2;
  --p-bleu-100: #E3ECF9;
  --p-bleu-050: #F0F5FC;
  --p-ambre-900: #6B4600;
  --p-ambre-700: #8A5B00;   /* seule teinte ambre lisible en texte sur blanc  */
  --p-ambre-500: #D48A05;
  --p-ambre-100: #FDF0D6;
  --p-ambre-050: #FFF7E8;
  --p-vert-700: #14663F;
  --p-vert-500: #1B8A54;
  --p-vert-100: #E2F4EB;
  --p-rouge-700: #96201A;
  --p-rouge-500: #C0322B;
  --p-rouge-100: #FBE7E5;

  /* --- Surfaces --------------------------------------------------------- */
  --surface: var(--p-blanc);
  --surface-2: var(--p-fond2);
  --surface-3: var(--p-ambre-050);
  --surface-inverse: var(--p-ink);
  --surface-carte: var(--p-blanc);
  --surface-survol: var(--p-bleu-050);
  --surface-selection: var(--p-bleu-100);
  --surface-voile: rgb(13 27 42 / 0.52);

  /* --- Texte ------------------------------------------------------------ */
  --texte: var(--p-ink);
  --texte-2: #3B4F66;
  --texte-doux: var(--p-gris);
  --texte-inverse: var(--p-blanc);
  --texte-inverse-2: #C3D2E4;
  --texte-lien: var(--p-bleu);
  --texte-lien-survol: var(--p-bleu-900);

  /* --- Bordures --------------------------------------------------------- */
  --bord: var(--p-bord);
  --bord-fort: #C2CEDD;
  --bord-inverse: #24405F;
  --bord-actif: var(--p-bleu);

  /* --- Accent / action -------------------------------------------------- */
  --accent: var(--p-ambre);
  --accent-fort: var(--p-ambre-500);
  --accent-doux: var(--p-ambre-050);
  --accent-texte: var(--p-ambre-700);
  --sur-accent: var(--p-ink);         /* contraste 8,2:1 sur l'ambre */
  --marque: var(--p-bleu);
  --marque-doux: var(--p-bleu-100);
  --sur-marque: var(--p-blanc);       /* contraste 8,0:1 sur le bleu */

  /* --- Etats ------------------------------------------------------------ */
  --succes: var(--p-vert-700);
  --succes-fond: var(--p-vert-100);
  --succes-bord: #A9DCC3;
  --alerte: var(--p-rouge-700);
  --alerte-fond: var(--p-rouge-100);
  --alerte-bord: #EDB6B2;
  --info: var(--p-bleu-700);
  --info-fond: var(--p-bleu-100);
  --info-bord: #BCD3F0;
  --attention: var(--p-ambre-900);
  --attention-fond: var(--p-ambre-100);
  --attention-bord: #EFD59A;

  /* --- Focus ------------------------------------------------------------ */
  --anneau: var(--p-bleu);
  --anneau-contraste: var(--p-blanc);

  /* --- Typographie : pile systeme uniquement ---------------------------- */
  --police: "Segoe UI", -apple-system, BlinkMacSystemFont, "Helvetica Neue",
            Roboto, Arial, "Noto Sans", sans-serif;
  /* Pile d'affichage : la variante « Display » de Segoe UI (Windows 11) est
     nettement plus serree et plus grasse que la variante texte — c'est ce qui
     s'approche le plus d'une geometrique type Poppins SANS aucune requete
     reseau. Elle degrade sur la meme pile que le corps de texte. */
  --police-titre: "Segoe UI Variable Display", "Segoe UI Semibold", "Segoe UI",
                  -apple-system, BlinkMacSystemFont, "Helvetica Neue",
                  Roboto, Arial, "Noto Sans", sans-serif;
  --police-mono: ui-monospace, "Cascadia Mono", "Segoe UI Mono", Consolas,
                 "Liberation Mono", monospace;

  /* Echelle fluide — aucune valeur en px */
  --pas-xs:   clamp(0.75rem,  0.735rem + 0.08vw, 0.8125rem);
  --pas-sm:   clamp(0.875rem, 0.855rem + 0.10vw, 0.9375rem);
  --pas-base: clamp(1rem,     0.965rem + 0.18vw, 1.125rem);
  --pas-md:   clamp(1.0625rem,1.01rem  + 0.28vw, 1.25rem);
  --pas-lg:   clamp(1.25rem,  1.17rem  + 0.40vw, 1.5rem);
  --pas-xl:   clamp(1.5rem,   1.33rem  + 0.85vw, 2rem);
  --pas-2xl:  clamp(1.75rem,  1.42rem  + 1.60vw, 2.6rem);
  --pas-3xl:  clamp(2rem,     1.50rem  + 2.50vw, 3.25rem);
  --pas-geant:clamp(1.75rem,  1.10rem  + 3.40vw, 3.5rem);

  --inter-titre: 1.18;
  --inter-heros: 1.06;
  --inter-corps: 1.68;
  --chasse-titre: -0.022em;
  --chasse-sur: 0.09em;
  --mesure: 68ch;
  --mesure-courte: 54ch;

  /* --- Espacement (echelle 4 / 8) --------------------------------------- */
  --e-1: 0.25rem;  --e-2: 0.5rem;   --e-3: 0.75rem;  --e-4: 1rem;
  --e-5: 1.5rem;   --e-6: 2rem;     --e-7: 3rem;     --e-8: 4rem;
  --e-9: 6rem;     --e-10: 8rem;
  --rythme: clamp(3.25rem, 7vw, 6rem);      /* padding vertical des sections */
  --gouttiere: clamp(1rem, 4vw, 2rem);      /* marge laterale du conteneur   */
  --largeur: 76rem;                          /* 1216px */
  --largeur-etroite: 46rem;

  /* --- Rayons ----------------------------------------------------------- */
  /* Rayons nettement plus marques qu'en v1 : c'est le code visuel du marche
     (cartes tres arrondies, boutons en pilule), et ce que le client attend. */
  --r-xs: 0.25rem; --r-sm: 0.5rem;   --r-md: 0.75rem;
  --r-lg: 1.25rem; --r-xl: 1.75rem;  --r-pleine: 62.5rem;

  /* --- Ombres (multi-couches, jamais de noir pur) ----------------------- */
  --ombre-xs: 0 1px 1px rgb(13 27 42 / 0.04);
  --ombre-sm: 0 1px 2px rgb(13 27 42 / 0.05), 0 1px 3px rgb(13 27 42 / 0.04);
  --ombre-md: 0 2px 4px rgb(13 27 42 / 0.04), 0 6px 16px rgb(13 27 42 / 0.07);
  --ombre-lg: 0 4px 8px rgb(13 27 42 / 0.05), 0 16px 40px rgb(13 27 42 / 0.10);
  --ombre-xl: 0 8px 16px rgb(13 27 42 / 0.06), 0 28px 64px rgb(13 27 42 / 0.14);
  --ombre-focus: 0 0 0 3px rgb(27 79 156 / 0.28);
  --ombre-ambre: 0 6px 18px rgb(191 126 6 / 0.32);

  /* --- Mouvement -------------------------------------------------------- */
  --d-instant: 90ms;
  --d-court: 160ms;
  --d-moyen: 260ms;
  --d-long: 420ms;
  --d-reveal: 620ms;
  --sortie: cubic-bezier(0.16, 1, 0.3, 1);      /* expo out — entrees        */
  --doux: cubic-bezier(0.65, 0, 0.35, 1);        /* transitions symetriques   */
  --net: cubic-bezier(0.2, 0.9, 0.25, 1);        /* micro-interactions        */

  /* --- Divers ----------------------------------------------------------- */
  --cible: 2.75rem;          /* 44px : taille minimale d'une cible tactile   */
  --z-entete: 100;
  --z-voile: 190;
  --z-tiroir: 200;
}

/* ==========================================================================
   02 · RESET MODERNE
   Seul endroit du fichier ou !important est autorise.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }

* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  tab-size: 2;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;   /* compense l'entete collant sur les ancres */
}

body {
  min-height: 100svh;
  font-family: var(--police);
  font-size: var(--pas-base);
  line-height: var(--inter-corps);
  color: var(--texte);
  background-color: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, picture, video, canvas, svg, iframe {
  display: block;
  max-width: 100%;
}
img, video { height: auto; }

input, button, textarea, select { font: inherit; color: inherit; }

button { background: none; border: 0; padding: 0; cursor: pointer; }

p, li, figcaption { overflow-wrap: break-word; }

h1, h2, h3, h4, h5, h6 { font-weight: 700; }

ul[class], ol[class] { list-style: none; padding: 0; }

table { border-collapse: collapse; border-spacing: 0; }

hr {
  border: 0;
  border-top: 1px solid var(--bord);
  margin-block: var(--e-6);
}

:target { scroll-margin-top: 6rem; }

::selection { background: var(--surface-selection); color: var(--texte); }

/* Focus : jamais d'anneau au clic souris, toujours au clavier. */
:focus { outline: none; }
:focus-visible {
  outline: 3px solid var(--anneau);
  outline-offset: 2px;
  border-radius: var(--r-xs);
}

/* Respect absolu du confort de l'utilisateur. Unique usage de !important. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto !important; }
  *, *::before, *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    animation-delay: 0ms !important;
    transition-duration: 1ms !important;
    transition-delay: 0ms !important;
    scroll-behavior: auto !important;
    view-transition-name: none !important;
  }
}

/* ==========================================================================
   03 · TYPOGRAPHIE DE BASE
   ========================================================================== */

h1, h2, h3, h4 {
  font-family: var(--police-titre);
  line-height: var(--inter-titre);
  letter-spacing: var(--chasse-titre);
  text-wrap: balance;
  color: var(--texte);
}

h1 { font-size: var(--pas-2xl); line-height: var(--inter-heros); }
h2 { font-size: var(--pas-xl); }
h3 { font-size: var(--pas-lg); }
h4 { font-size: var(--pas-md); }
h5, h6 {
  font-size: var(--pas-sm);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
}

p { text-wrap: pretty; }

a {
  color: var(--texte-lien);
  text-decoration: underline;
  text-decoration-thickness: 0.08em;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in srgb, currentColor 38%, transparent);
  transition: color var(--d-court) var(--net),
              text-decoration-color var(--d-court) var(--net);
}
a:hover {
  color: var(--texte-lien-survol);
  text-decoration-color: currentColor;
}

strong, b { font-weight: 650; color: var(--texte); }
small { font-size: var(--pas-sm); }

abbr[title] {
  text-decoration: underline dotted;
  cursor: help;
  text-underline-offset: 0.2em;
}

code, kbd, samp {
  font-family: var(--police-mono);
  font-size: 0.92em;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-xs);
  padding: 0.1em 0.35em;
}

/* --- Utilitaires typographiques --------------------------------------- */
.sur-titre {
  display: inline-block;
  font-size: var(--pas-sm);
  font-weight: 650;
  letter-spacing: var(--chasse-sur);
  text-transform: uppercase;
  color: var(--marque);
  margin-bottom: var(--e-3);
}
.chapo {
  font-size: var(--pas-md);
  line-height: 1.6;
  color: var(--texte-2);
  max-width: var(--mesure);
}
.doux { color: var(--texte-doux); }
.tabulaire { font-variant-numeric: tabular-nums; }
.prix {
  font-variant-numeric: tabular-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
}

/* Accessibilite : contenu reserve aux lecteurs d'ecran. */
.lecteur-seul {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* Lien d'evitement */
.evitement {
  position: absolute;
  top: 0; left: var(--e-4);
  z-index: 300;
  transform: translateY(-120%);
  padding: var(--e-3) var(--e-5);
  background: var(--marque);
  color: var(--sur-marque);
  border-radius: 0 0 var(--r-md) var(--r-md);
  text-decoration: none;
  font-weight: 650;
  transition: transform var(--d-moyen) var(--sortie);
}
.evitement:focus-visible { transform: translateY(0); }

/* Icones SVG inline — aucune police d'icones, aucun emoji. */
.ico {
  width: 1.25em; height: 1.25em;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.75;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.22em;
}
.ico--sm { width: 1em; height: 1em; }
.ico--lg { width: 1.75em; height: 1.75em; }

/* ==========================================================================
   04 · MISE EN PAGE
   ========================================================================== */

.conteneur {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.conteneur--etroit { max-width: var(--largeur-etroite); }
.conteneur--large { max-width: 85rem; }

.section { padding-block: var(--rythme); }
.section--serree { padding-block: clamp(2rem, 4.5vw, 3.5rem); }
.section--fond { background: var(--surface-2); }
.section--marque { background: var(--surface-3); }
.section--sombre {
  background: var(--surface-inverse);
  color: var(--texte-inverse);
}
.section--sombre h1, .section--sombre h2, .section--sombre h3 { color: var(--texte-inverse); }
.section--sombre p { color: var(--texte-inverse-2); }

/* Separateur de sections : filet 1px, jamais de trait noir. */
.section + .section:not(.section--fond):not(.section--sombre):not(.section--marque) {
  border-top: 1px solid var(--bord);
}

.entete-section {
  max-width: var(--mesure);
  margin-bottom: clamp(2rem, 4vw, 3rem);
}
.entete-section--centre {
  margin-inline: auto;
  text-align: center;
}

/* --- Grilles ----------------------------------------------------------- */
.grille {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
}
.grille--2 { grid-template-columns: repeat(auto-fit, minmax(min(100%, 20rem), 1fr)); }
.grille--3 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr)); }
.grille--4 { grid-template-columns: repeat(auto-fill, minmax(min(100%, 12.5rem), 1fr)); }

.pile { display: flex; flex-direction: column; gap: var(--e-4); }
.rangee {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
}
.rangee--espacee { justify-content: space-between; }

/* ==========================================================================
   05 · ANIMATIONS — CSS pur, pas de bibliotheque
   Trois niveaux : transitions d'etat, keyframes d'entree pilotees par le
   scroll (animation-timeline), transitions de vue entre pages.
   Chaque niveau degrade proprement et se coupe sous prefers-reduced-motion.
   ========================================================================== */

@keyframes apparait {
  from { opacity: 0; transform: translate3d(0, 1.5rem, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes apparait-simple {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes glisse-droite {
  from { opacity: 0; transform: translate3d(-1.25rem, 0, 0); }
  to   { opacity: 1; transform: none; }
}
@keyframes barre-progression {
  from { transform: scaleX(0); }
  to   { transform: scaleX(1); }
}
@keyframes trace-verticale {
  from { transform: scaleY(0); }
  to   { transform: scaleY(1); }
}
@keyframes rotation {
  to { transform: rotate(1turn); }
}
@keyframes battement {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.45; }
}

/* --- Reveal au scroll --------------------------------------------------
   Chemin moderne : scroll-driven animations, zero JavaScript.
   Repli : app.js pose la classe .vu via IntersectionObserver.
   Repli du repli (sans JS) : le contenu est visible d'office. */
[data-reveal] { opacity: 1; }

@media (prefers-reduced-motion: no-preference) {
  /* Repli JS — n'agit que si le navigateur ne sait pas faire view() */
  .js-reveal [data-reveal] {
    opacity: 0;
    transform: translate3d(0, 1.5rem, 0);
    transition: opacity var(--d-reveal) var(--sortie),
                transform var(--d-reveal) var(--sortie);
  }
  .js-reveal [data-reveal].vu { opacity: 1; transform: none; }

  @supports (animation-timeline: view()) {
    /* Le natif reprend la main : on neutralise le repli JS. */
    .js-reveal [data-reveal] { opacity: 1; transform: none; transition: none; }
    [data-reveal] {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 5% cover 22%;
    }
    /* Cascade legere sur les grilles : chaque enfant s'anime a son entree. */
    [data-reveal-cascade] > * {
      animation: apparait linear both;
      animation-timeline: view();
      animation-range: entry 2% cover 20%;
    }
    /* FILET DE SECURITE — indispensable.
       Une timeline de defilement inactive (page trop courte pour defiler,
       bloc deja visible au chargement, grand ecran) laisserait le contenu
       bloque sur la premiere image cle, donc invisible. app.js marque .vu
       au chargement sur tout ce qui est deja dans la fenetre : on coupe
       alors l'animation. Aucun contenu ne peut rester masque. */
    [data-reveal].vu,
    [data-reveal-cascade].vu > * { animation: none; opacity: 1; transform: none; }
  }
}

/* Repli JS pour la cascade quand view() n'existe pas */
@media (prefers-reduced-motion: no-preference) {
  .js-reveal [data-reveal-cascade] > * {
    opacity: 0;
    transform: translate3d(0, 1.25rem, 0);
    transition: opacity var(--d-long) var(--sortie) var(--retard, 0ms),
                transform var(--d-long) var(--sortie) var(--retard, 0ms);
  }
  /* Cascade : le retard est porte par le CSS, pas par le JavaScript. */
  .js-reveal [data-reveal-cascade] > *:nth-child(2) { --retard: 70ms; }
  .js-reveal [data-reveal-cascade] > *:nth-child(3) { --retard: 140ms; }
  .js-reveal [data-reveal-cascade] > *:nth-child(4) { --retard: 210ms; }
  .js-reveal [data-reveal-cascade] > *:nth-child(5) { --retard: 280ms; }
  .js-reveal [data-reveal-cascade] > *:nth-child(6) { --retard: 350ms; }
  .js-reveal [data-reveal-cascade] > *:nth-child(n+7) { --retard: 420ms; }
  .js-reveal [data-reveal-cascade].vu > * { opacity: 1; transform: none; }
  @supports (animation-timeline: view()) {
    .js-reveal [data-reveal-cascade] > * { opacity: 1; transform: none; transition: none; }
  }
}

/* --- Transitions de vue entre pages (navigation multi-pages) ----------- */
@view-transition { navigation: auto; }

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(root) {
    animation: apparait-simple var(--d-court) var(--doux) reverse both;
  }
  ::view-transition-new(root) {
    animation: apparait var(--d-moyen) var(--sortie) both;
  }
  /* L'entete ne doit pas clignoter d'une page a l'autre. */
  .site-entete { view-transition-name: entete; }
  .pied { view-transition-name: pied; }
  ::view-transition-group(entete),
  ::view-transition-group(pied) { animation-duration: var(--d-court); }
}

/* --- Barre de progression de lecture (scroll-driven, sans JS) ---------- */
.progression {
  position: fixed;
  inset-block-start: 0;
  inset-inline: 0;
  height: 3px;
  background: var(--accent);
  transform-origin: 0 50%;
  transform: scaleX(0);
  z-index: calc(var(--z-entete) + 1);
  pointer-events: none;
}
@supports (animation-timeline: scroll()) {
  .progression {
    animation: barre-progression linear both;
    animation-timeline: scroll(root block);
  }
}
@media (prefers-reduced-motion: reduce) { .progression { display: none; } }

/* ==========================================================================
   06 · COMPOSANTS
   ========================================================================== */

/* --- 6.1 Boutons -------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: var(--cible);
  padding: var(--e-3) var(--e-5);
  font-size: var(--pas-base);
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--r-md);
  cursor: pointer;
  transition: background-color var(--d-court) var(--net),
              border-color var(--d-court) var(--net),
              color var(--d-court) var(--net),
              box-shadow var(--d-moyen) var(--net),
              transform var(--d-court) var(--net);
}
.btn:hover { transform: translateY(-1px); }
.btn:active { transform: translateY(0); transition-duration: var(--d-instant); }

/* Action principale : ambre. Une seule par ecran — c'est ce qui lui donne
   son poids. Texte encre sur ambre = 8,2:1. */
.btn--principal {
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: var(--ombre-sm);
}
.btn--principal:hover {
  background: var(--accent-fort);
  color: var(--sur-accent);
  box-shadow: var(--ombre-md);
}

.btn--secondaire {
  background: var(--marque);
  color: var(--sur-marque);
  box-shadow: var(--ombre-sm);
}
.btn--secondaire:hover {
  background: var(--p-bleu-900);
  color: var(--sur-marque);
  box-shadow: var(--ombre-md);
}

.btn--contour {
  background: var(--surface);
  color: var(--texte-lien);
  border-color: var(--bord-fort);
}
.btn--contour:hover {
  background: var(--surface-survol);
  border-color: var(--bord-actif);
  color: var(--texte-lien-survol);
}

.btn--fantome {
  background: transparent;
  color: var(--texte-lien);
  padding-inline: var(--e-3);
}
.btn--fantome:hover { background: var(--surface-survol); }

.btn--sombre {
  background: var(--surface-inverse);
  color: var(--texte-inverse);
}
.btn--sombre:hover { background: #16283B; color: var(--texte-inverse); }

.btn--sm { min-height: 2.25rem; padding: var(--e-2) var(--e-4); font-size: var(--pas-sm); }
.btn--lg { min-height: 3.25rem; padding: var(--e-4) var(--e-6); font-size: var(--pas-md); }
.btn--bloc { width: 100%; }

.btn[aria-disabled="true"], .btn:disabled {
  opacity: 0.5;
  pointer-events: none;
  box-shadow: none;
}

/* Lien flechu : la fleche avance au survol. */
.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  font-weight: 650;
  text-decoration: none;
}
.lien-fleche .ico {
  transition: transform var(--d-moyen) var(--sortie);
}
.lien-fleche:hover .ico { transform: translateX(0.25rem); }

/* Bouton d'appel telephonique — cible tactile confortable */
.btn-tel { font-variant-numeric: tabular-nums; letter-spacing: 0.01em; }

/* --- 6.2 En-tete et navigation ----------------------------------------- */
.site-entete {
  position: sticky;
  top: 0;
  z-index: var(--z-entete);
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: saturate(1.4) blur(10px);
  -webkit-backdrop-filter: saturate(1.4) blur(10px);
  border-bottom: 1px solid transparent;
  transition: border-color var(--d-moyen) var(--doux),
              box-shadow var(--d-moyen) var(--doux),
              background-color var(--d-moyen) var(--doux);
}
@supports not (backdrop-filter: blur(4px)) {
  .site-entete { background: var(--surface); }
}
/* Etat pose par app.js apres 24px de scroll. */
.site-entete.est-collee {
  border-bottom-color: var(--bord);
  box-shadow: var(--ombre-sm);
  background: color-mix(in srgb, var(--surface) 95%, transparent);
}

.barre-info {
  background: var(--surface-inverse);
  color: var(--texte-inverse-2);
  font-size: var(--pas-sm);
}
.barre-info .conteneur {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: 2.5rem;
  padding-block: var(--e-2);
}
.barre-info a { color: var(--texte-inverse); text-decoration-color: transparent; }
.barre-info a:hover { color: var(--p-ambre); }

.entete-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: 4.25rem;
}

.marque {
  display: inline-flex;
  align-items: center;
  gap: var(--e-3);
  text-decoration: none;
  color: var(--texte);
  font-weight: 700;
  letter-spacing: var(--chasse-titre);
  font-size: var(--pas-md);
}
.marque img, .marque svg { height: 2.25rem; width: auto; }
.marque__suffixe {
  display: block;
  font-size: var(--pas-xs);
  font-weight: 500;
  letter-spacing: var(--chasse-sur);
  text-transform: uppercase;
  color: var(--texte-doux);
}

.nav-bureau { display: none; }
@media (min-width: 64em) {
  .nav-bureau { display: block; }
}
.nav-bureau ul {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  list-style: none;
  margin: 0; padding: 0;
}
.nav-bureau a {
  position: relative;
  display: inline-flex;
  align-items: center;
  min-height: var(--cible);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-sm);
  font-size: var(--pas-sm);
  font-weight: 600;
  color: var(--texte-2);
  text-decoration: none;
  transition: color var(--d-court) var(--net), background-color var(--d-court) var(--net);
}
.nav-bureau a::after {
  content: "";
  position: absolute;
  left: var(--e-3); right: var(--e-3);
  bottom: 0.35rem;
  height: 2px;
  border-radius: 2px;
  background: var(--accent);
  transform: scaleX(0);
  transform-origin: 0 50%;
  transition: transform var(--d-moyen) var(--sortie);
}
.nav-bureau a:hover { color: var(--texte); background: var(--surface-survol); }
.nav-bureau a:hover::after,
.nav-bureau a[aria-current]::after { transform: scaleX(1); }
.nav-bureau a[aria-current] { color: var(--texte); }

.entete-actions { display: flex; align-items: center; gap: var(--e-2); }
.entete-actions .btn--principal { display: none; }
@media (min-width: 48em) { .entete-actions .btn--principal { display: inline-flex; } }

/* Hamburger — icone SVG inline, jamais d'emoji. */
.nav-bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  border-radius: var(--r-sm);
  border: 1px solid var(--bord);
  color: var(--texte);
  background: var(--surface);
  transition: background-color var(--d-court) var(--net), border-color var(--d-court) var(--net);
}
.nav-bascule:hover { background: var(--surface-survol); border-color: var(--bord-fort); }
@media (min-width: 64em) { .nav-bascule { display: none; } }
.nav-bascule .ico--fermer { display: none; }
.nav-bascule[aria-expanded="true"] .ico--fermer { display: block; }
.nav-bascule[aria-expanded="true"] .ico--menu { display: none; }

/* Tiroir mobile */
.nav-voile {
  position: fixed;
  inset: 0;
  z-index: var(--z-voile);
  background: var(--surface-voile);
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-moyen) var(--doux), visibility var(--d-moyen);
}
.nav-voile.est-ouvert { opacity: 1; visibility: visible; }

.nav-mobile {
  position: fixed;
  inset-block: 0;
  inset-inline-end: 0;
  z-index: var(--z-tiroir);
  width: min(86vw, 22rem);
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5) var(--e-5) var(--e-8);
  background: var(--surface);
  border-inline-start: 1px solid var(--bord);
  box-shadow: var(--ombre-xl);
  overflow-y: auto;
  overscroll-behavior: contain;
  transform: translateX(101%);
  visibility: hidden;
  transition: transform var(--d-long) var(--sortie), visibility var(--d-long);
}
.nav-mobile.est-ouvert { transform: none; visibility: visible; }
@media (min-width: 64em) { .nav-mobile, .nav-voile, .nav-mobile.est-ouvert { display: none; } }

.nav-mobile__entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-bottom: var(--e-4);
  margin-bottom: var(--e-2);
  border-bottom: 1px solid var(--bord);
}
.nav-mobile ul { list-style: none; margin: 0; padding: 0; }
.nav-mobile li + li { border-top: 1px solid var(--bord); }
.nav-mobile a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: var(--e-3) var(--e-1);
  font-weight: 600;
  color: var(--texte);
  text-decoration: none;
}
.nav-mobile a[aria-current] { color: var(--marque); }
.nav-mobile a:hover { color: var(--texte-lien-survol); }
.nav-mobile__pied { margin-top: var(--e-5); display: grid; gap: var(--e-3); }

/* Verrouillage du defilement du corps quand le tiroir est ouvert */
body.nav-ouverte { overflow: hidden; }

/* --- 6.3 Fil d'Ariane --------------------------------------------------- */
.fil {
  padding-block: var(--e-4);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.fil ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  margin: 0; padding: 0;
}
.fil li { display: inline-flex; align-items: center; gap: var(--e-2); }
.fil li + li::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-top: 1.5px solid var(--bord-fort);
  border-right: 1.5px solid var(--bord-fort);
  transform: rotate(45deg);
  flex: none;
}
.fil a { color: var(--texte-doux); text-decoration-color: transparent; }
.fil a:hover { color: var(--texte-lien); text-decoration-color: currentColor; }
.fil [aria-current] { color: var(--texte); font-weight: 600; }

/* --- 6.4 Heros ---------------------------------------------------------- */
.heros {
  position: relative;
  isolation: isolate;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  background: var(--surface);
  overflow: hidden;
}
.heros--marque {
  background:
    radial-gradient(60rem 32rem at 82% -10%, rgb(27 79 156 / 0.10), transparent 62%),
    radial-gradient(42rem 26rem at 4% 108%, rgb(242 160 7 / 0.10), transparent 60%),
    var(--surface-2);
  border-bottom: 1px solid var(--bord);
}
.heros--sombre {
  background:
    radial-gradient(58rem 30rem at 78% -8%, rgb(27 79 156 / 0.55), transparent 62%),
    radial-gradient(38rem 24rem at 6% 110%, rgb(242 160 7 / 0.16), transparent 58%),
    var(--surface-inverse);
  color: var(--texte-inverse);
}
.heros--sombre h1 { color: var(--texte-inverse); }
.heros--sombre .chapo { color: var(--texte-inverse-2); }
.heros--sombre .sur-titre { color: var(--p-ambre); }

/* Grain tres discret : donne de la matiere sans image ni requete reseau. */
.heros::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}

.heros__grille {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 64em) {
  .heros__grille { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.heros h1 { font-size: var(--pas-3xl); max-width: 16ch; }
.heros .chapo { margin-top: var(--e-4); }
.heros__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-6);
}
.heros__preuves {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-5);
  margin-top: var(--e-6);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bord);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.heros__preuves li { display: inline-flex; align-items: center; gap: var(--e-2); }
.heros__preuves .ico { color: var(--succes); }
.heros--sombre .heros__preuves { border-top-color: var(--bord-inverse); color: var(--texte-inverse-2); }

.heros__visuel {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-lg);
  background: var(--surface-2);
  aspect-ratio: 4 / 3;
}
.heros__visuel img { width: 100%; height: 100%; object-fit: cover; }

/* Entree du heros au chargement — courte, discrete, une seule fois. */
@media (prefers-reduced-motion: no-preference) {
  .heros__grille > * {
    animation: apparait var(--d-reveal) var(--sortie) both;
  }
  .heros__grille > *:nth-child(2) { animation-delay: 110ms; }
}

/* --- 6.5 Bloc CTA -------------------------------------------------------- */
.cta {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  border-radius: var(--r-xl);
  padding: clamp(1.75rem, 4vw, 3.25rem);
  background:
    radial-gradient(38rem 22rem at 88% -20%, rgb(242 160 7 / 0.18), transparent 60%),
    var(--surface-inverse);
  color: var(--texte-inverse);
  display: grid;
  gap: var(--e-5);
  align-items: center;
}
@media (min-width: 56em) {
  .cta { grid-template-columns: minmax(0, 1fr) auto; gap: var(--e-7); }
}
.cta h2 { color: var(--texte-inverse); font-size: var(--pas-xl); }
.cta p { color: var(--texte-inverse-2); max-width: var(--mesure-courte); margin-top: var(--e-3); }
.cta__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.cta__mention {
  margin-top: var(--e-4);
  font-size: var(--pas-sm);
  color: var(--texte-inverse-2);
}
.cta--clair {
  background: var(--surface-3);
  color: var(--texte);
  border: 1px solid var(--bord);
}
.cta--clair h2 { color: var(--texte); }
.cta--clair p, .cta--clair .cta__mention { color: var(--texte-2); }

/* Bandeau CTA fin, en fin de page de contenu */
.cta-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-left: 4px solid var(--accent);
  border-radius: var(--r-md);
  background: var(--surface-2);
}

/* --- 6.6 Cartes ---------------------------------------------------------- */
.carte {
  position: relative;
  display: flex;
  flex-direction: column;
  background: var(--surface-carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-xs);
  transition: transform var(--d-moyen) var(--sortie),
              box-shadow var(--d-moyen) var(--sortie),
              border-color var(--d-moyen) var(--sortie);
}
.carte__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e-2);
  padding: var(--e-5);
  flex: 1;
}
.carte__pied {
  padding: var(--e-4) var(--e-5);
  border-top: 1px solid var(--bord);
  background: var(--surface-2);
}
.carte h3 { font-size: var(--pas-md); }
.carte p { color: var(--texte-2); font-size: var(--pas-sm); }

/* Carte cliquable : le lien couvre la carte, le survol souleve. */
.carte--lien:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-lg);
  border-color: var(--bord-fort);
}
.carte--lien:has(a:focus-visible) {
  outline: 3px solid var(--anneau);
  outline-offset: 2px;
}
.lien-couvrant::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
}
.lien-couvrant { text-decoration: none; }
.lien-couvrant:focus-visible { outline: none; }

/* Carte vehicule */
.carte-vehicule__media {
  position: relative;
  aspect-ratio: 4 / 3;
  background: var(--surface-2);
  overflow: hidden;
}
.carte-vehicule__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-long) var(--sortie);
}
.carte--lien:hover .carte-vehicule__media img { transform: scale(1.04); }
.carte-vehicule__etiquettes {
  position: absolute;
  inset-block-start: var(--e-3);
  inset-inline-start: var(--e-3);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  z-index: 2;
}
.carte-vehicule__titre { font-size: var(--pas-md); margin-bottom: var(--e-1); }
.carte-vehicule__titre a { color: inherit; text-decoration: none; }
.carte-vehicule__specs {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin-top: var(--e-1);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
  list-style: none;
  padding: 0;
}
.carte-vehicule__specs li { display: inline-flex; align-items: center; gap: var(--e-1); }
.carte-vehicule__prix {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e-3);
  margin-top: auto;
  padding-top: var(--e-4);
}
.carte-vehicule__prix .prix { font-size: var(--pas-lg); color: var(--texte); }
.carte-vehicule__prix small { color: var(--texte-doux); }

/* Carte commune (22 communes) */
.carte-commune {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: var(--e-4);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface-carte);
  text-decoration: none;
  color: var(--texte);
  transition: border-color var(--d-court) var(--net),
              background-color var(--d-court) var(--net),
              transform var(--d-court) var(--net);
}
.carte-commune:hover {
  border-color: var(--bord-actif);
  background: var(--surface-survol);
  color: var(--texte);
  transform: translateY(-2px);
}
.carte-commune__nom { font-weight: 650; }
.carte-commune__meta { display: block; font-size: var(--pas-xs); color: var(--texte-doux); }
.carte-commune .ico { color: var(--marque); }

/* Carte service */
.carte-service { padding: var(--e-5); gap: var(--e-3); }
.carte-service__ico {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem; height: 3rem;
  border-radius: var(--r-md);
  background: var(--marque-doux);
  color: var(--p-bleu-700);
  margin-bottom: var(--e-2);
}
.carte-service__ico .ico { width: 1.5rem; height: 1.5rem; }

/* Carte chiffre / preuve */
.carte-chiffre {
  padding: var(--e-5);
  text-align: left;
  border-left: 3px solid var(--accent);
}
.carte-chiffre__valeur {
  display: block;
  font-size: var(--pas-2xl);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: var(--chasse-titre);
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}
.carte-chiffre__libelle { font-size: var(--pas-sm); color: var(--texte-doux); }

/* --- 6.7 Badges ---------------------------------------------------------- */
.badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.2rem 0.6rem;
  font-size: var(--pas-xs);
  font-weight: 650;
  line-height: 1.5;
  letter-spacing: 0.01em;
  border-radius: var(--r-pleine);
  border: 1px solid var(--bord);
  background: var(--surface-2);
  color: var(--texte-2);
  white-space: nowrap;
}
.badge--marque { background: var(--info-fond); border-color: var(--info-bord); color: var(--info); }
.badge--succes { background: var(--succes-fond); border-color: var(--succes-bord); color: var(--succes); }
.badge--alerte { background: var(--alerte-fond); border-color: var(--alerte-bord); color: var(--alerte); }
.badge--attention { background: var(--attention-fond); border-color: var(--attention-bord); color: var(--attention); }
.badge--accent { background: var(--accent); border-color: var(--accent); color: var(--sur-accent); }
.badge--carre { border-radius: var(--r-xs); }

/* Point d'etat (disponible / reserve / vendu) */
.point {
  width: 0.5rem; height: 0.5rem;
  border-radius: 50%;
  background: currentColor;
  flex: none;
}
.badge--succes .point { animation: battement 2.4s var(--doux) infinite; }

/* --- 6.8 Tableaux ------------------------------------------------------- */
/* Les 37 pages sont bourrees de tableaux comparatifs. Deux strategies :
   .tableau-cartes  → chaque ligne devient une carte etiquetee sous 48em
                      (defaut : aucun contenu n'est masque ni tronque)
   .tableau-defile  → conteneur defilable au clavier, pour les grilles
                      chiffrees larges ou l'alignement est porteur de sens. */

.tableau-titre {
  font-size: var(--pas-sm);
  font-weight: 650;
  color: var(--texte-doux);
  margin-bottom: var(--e-2);
}

.tableau {
  width: 100%;
  font-size: var(--pas-sm);
  text-align: left;
  background: var(--surface-carte);
}
.tableau caption {
  caption-side: top;
  text-align: left;
  font-size: var(--pas-sm);
  color: var(--texte-doux);
  padding-bottom: var(--e-3);
}
.tableau th, .tableau td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.tableau thead th {
  font-size: var(--pas-xs);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
  background: var(--surface-2);
  border-bottom: 1px solid var(--bord-fort);
  white-space: nowrap;
}
.tableau tbody th { font-weight: 650; color: var(--texte); }
.tableau tbody tr:last-child > * { border-bottom: 0; }
.tableau tbody tr { transition: background-color var(--d-court) var(--net); }
.tableau tbody tr:hover { background: var(--surface-2); }
.tableau td.num, .tableau th.num { text-align: right; font-variant-numeric: tabular-nums; }
.tableau .oui { color: var(--succes); font-weight: 650; }
.tableau .non { color: var(--alerte); font-weight: 650; }

/* Ligne mise en avant (l'option depot-vente dans les comparatifs) */
.tableau .ligne-phare { background: var(--surface-3); }
.tableau .ligne-phare:hover { background: var(--marque-doux); }
.tableau .ligne-phare th:first-child,
.tableau .ligne-phare td:first-child { box-shadow: inset 3px 0 0 var(--accent); }

/* Conteneur : cadre + coins arrondis sans casser les bordures internes */
.tableau-cadre {
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  box-shadow: var(--ombre-xs);
  margin-block: var(--e-5);
}

/* Variante defilable, focusable au clavier (role="region" + tabindex="0") */
.tableau-defile {
  position: relative;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: thin;
  /* Ombres de bord : indiquent qu'il reste du contenu a droite/gauche */
  background:
    linear-gradient(to right, var(--surface-carte) 30%, rgb(255 255 255 / 0)) left / 2.5rem 100% no-repeat,
    linear-gradient(to left,  var(--surface-carte) 30%, rgb(255 255 255 / 0)) right / 2.5rem 100% no-repeat,
    radial-gradient(farthest-side at 0 50%, rgb(13 27 42 / 0.14), rgb(13 27 42 / 0)) left / 0.75rem 100% no-repeat,
    radial-gradient(farthest-side at 100% 50%, rgb(13 27 42 / 0.14), rgb(13 27 42 / 0)) right / 0.75rem 100% no-repeat;
  background-attachment: local, local, scroll, scroll;
}
.tableau-defile .tableau { min-width: 40rem; }
.tableau-defile:focus-visible { outline: 3px solid var(--anneau); outline-offset: 2px; }
.tableau-aide {
  font-size: var(--pas-xs);
  color: var(--texte-doux);
  margin-top: var(--e-2);
}
@media (min-width: 48em) { .tableau-aide { display: none; } }

/* --- Empilement en cartes sous 48em (strategie par defaut) -------------- */
@media (max-width: 47.999em) {
  .tableau-cadre:has(.tableau-cartes) {
    border: 0;
    border-radius: 0;
    box-shadow: none;
    overflow: visible;
  }
  .tableau-cartes { display: block; font-size: var(--pas-base); }
  .tableau-cartes caption { display: block; }
  .tableau-cartes thead {
    position: absolute;
    width: 1px; height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
  }
  .tableau-cartes tbody, .tableau-cartes tr, .tableau-cartes th, .tableau-cartes td {
    display: block;
    width: auto;
  }
  .tableau-cartes tbody tr {
    border: 1px solid var(--bord);
    border-radius: var(--r-md);
    background: var(--surface-carte);
    box-shadow: var(--ombre-xs);
    padding: var(--e-2) var(--e-4) var(--e-3);
    margin-bottom: var(--e-4);
  }
  .tableau-cartes tbody tr:hover { background: var(--surface-carte); }
  .tableau-cartes tbody tr:last-child { margin-bottom: 0; }

  /* Premiere cellule = titre de la carte */
  .tableau-cartes tbody th:first-child,
  .tableau-cartes tbody td:first-child {
    font-size: var(--pas-md);
    font-weight: 700;
    letter-spacing: var(--chasse-titre);
    color: var(--texte);
    padding: var(--e-3) 0;
    border-bottom: 1px solid var(--bord);
    margin-bottom: var(--e-2);
  }
  .tableau-cartes tbody th:first-child::before,
  .tableau-cartes tbody td:first-child::before { content: none; }

  /* Cellules suivantes : libelle issu de data-col + valeur */
  .tableau-cartes tbody td {
    display: grid;
    grid-template-columns: minmax(6.5rem, 40%) 1fr;
    gap: var(--e-2) var(--e-4);
    align-items: baseline;
    padding: var(--e-2) 0;
    border-bottom: 1px dashed var(--bord);
    font-size: var(--pas-sm);
  }
  .tableau-cartes tbody td:last-child { border-bottom: 0; padding-bottom: 0; }
  .tableau-cartes tbody td::before {
    content: attr(data-col);
    font-size: var(--pas-xs);
    font-weight: 650;
    text-transform: uppercase;
    letter-spacing: var(--chasse-sur);
    color: var(--texte-doux);
  }
  .tableau-cartes tbody td.num { text-align: left; }
  .tableau-cartes .ligne-phare {
    border-color: var(--accent);
    box-shadow: var(--ombre-sm), inset 0 0 0 1px var(--accent);
  }
  .tableau-cartes .ligne-phare th:first-child,
  .tableau-cartes .ligne-phare td:first-child { box-shadow: none; }
}

/* Comparatif « une colonne = une offre » : bascule en colonnes empilees */
.comparatif { display: grid; gap: var(--e-4); }
@media (min-width: 56em) {
  .comparatif { grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr)); }
}
.comparatif__colonne {
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-carte);
  padding: var(--e-5);
}
.comparatif__colonne--phare {
  border-color: var(--accent);
  box-shadow: var(--ombre-md);
}
.comparatif__colonne dl { display: grid; gap: var(--e-3); margin: var(--e-4) 0 0; }
.comparatif__colonne dt {
  font-size: var(--pas-xs);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
}
.comparatif__colonne dd { margin: 0; font-size: var(--pas-sm); }

/* --- 6.9 FAQ (details/summary) ------------------------------------------ */
.faq {
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-carte);
  margin-block: var(--e-5);
}
.faq details + details { border-top: 1px solid var(--bord); }

.faq summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--e-4);
  min-height: var(--cible);
  padding: var(--e-4) var(--e-5);
  font-weight: 650;
  font-size: var(--pas-md);
  line-height: 1.4;
  color: var(--texte);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--d-court) var(--net), color var(--d-court) var(--net);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { background: var(--surface-2); color: var(--texte-lien-survol); }
.faq summary:focus-visible { outline-offset: -3px; }

/* Chevron dessine en CSS : aucune image, aucun emoji. */
.faq summary::after {
  content: "";
  flex: none;
  width: 0.7rem; height: 0.7rem;
  margin-top: 0.4rem;
  border-right: 2px solid var(--marque);
  border-bottom: 2px solid var(--marque);
  transform: rotate(45deg);
  transform-origin: 60% 60%;
  transition: transform var(--d-moyen) var(--sortie);
}
.faq details[open] > summary::after { transform: rotate(-135deg); }
.faq details[open] > summary { background: var(--surface-3); }

.faq__reponse { padding: 0 var(--e-5) var(--e-5); }
.faq__reponse > :first-child { margin-top: 0; }
.faq__reponse p, .faq__reponse li { color: var(--texte-2); font-size: var(--pas-sm); line-height: 1.7; }
.faq__reponse p + p { margin-top: var(--e-3); }

/* Ouverture animee : height:auto interpole si le navigateur le sait faire,
   sinon simple fondu. Aucun JavaScript impliqué. */
@media (prefers-reduced-motion: no-preference) {
  .faq details[open] .faq__reponse {
    animation: apparait var(--d-moyen) var(--sortie) both;
  }
}
@supports (interpolate-size: allow-keywords) {
  :root { interpolate-size: allow-keywords; }
  .faq details::details-content {
    block-size: 0;
    overflow: hidden;
    transition: block-size var(--d-moyen) var(--sortie),
                content-visibility var(--d-moyen) allow-discrete;
  }
  .faq details[open]::details-content { block-size: auto; }
  @media (prefers-reduced-motion: no-preference) {
    .faq details[open] .faq__reponse { animation: none; }
  }
}

/* --- 6.10 Citation / encadres ------------------------------------------- */
.citation {
  margin: var(--e-6) 0;
  padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
  font-size: var(--pas-md);
  line-height: 1.6;
  color: var(--texte);
}
.citation p { text-wrap: pretty; }
.citation p + p { margin-top: var(--e-3); }
.citation cite {
  display: block;
  margin-top: var(--e-3);
  font-size: var(--pas-sm);
  font-style: normal;
  font-weight: 650;
  color: var(--texte-doux);
}
.citation cite::before { content: "— "; }

/* Encadre d'information — sert aux rappels juridiques (L217-7, Cerfa, ANTS) */
.encadre {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-4);
  margin: var(--e-6) 0;
  padding: var(--e-5);
  border: 1px solid var(--info-bord);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--info-fond);
  color: var(--texte);
}
.encadre > .ico { color: var(--info); margin-top: 0.15rem; }
.encadre__titre {
  grid-column: 2;
  font-size: var(--pas-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--info);
}
.encadre__corps { grid-column: 2; font-size: var(--pas-sm); line-height: 1.7; }
.encadre__corps > :first-child { margin-top: 0; }
.encadre--attention {
  border-color: var(--attention-bord);
  background: var(--attention-fond);
}
.encadre--attention > .ico, .encadre--attention .encadre__titre { color: var(--attention); }
.encadre--succes { border-color: var(--succes-bord); background: var(--succes-fond); }
.encadre--succes > .ico, .encadre--succes .encadre__titre { color: var(--succes); }
.encadre--alerte { border-color: var(--alerte-bord); background: var(--alerte-fond); }
.encadre--alerte > .ico, .encadre--alerte .encadre__titre { color: var(--alerte); }
.encadre--neutre { border-color: var(--bord); background: var(--surface-2); }
.encadre--neutre > .ico, .encadre--neutre .encadre__titre { color: var(--texte-doux); }

/* --- 6.11 Etapes numerotees (timeline) ---------------------------------- */
.etapes {
  --puce: 2.75rem;
  position: relative;
  list-style: none;
  margin: var(--e-6) 0;
  padding: 0;
  display: grid;
  gap: var(--e-6);
  counter-reset: etape;
}
.etapes > li {
  position: relative;
  padding-left: calc(var(--puce) + var(--e-5));
  counter-increment: etape;
}
.etapes > li::before {
  content: counter(etape);
  position: absolute;
  inset-block-start: 0;
  inset-inline-start: 0;
  display: grid;
  place-items: center;
  width: var(--puce); height: var(--puce);
  border-radius: 50%;
  background: var(--surface-carte);
  border: 2px solid var(--marque);
  color: var(--marque);
  font-weight: 700;
  font-size: var(--pas-base);
  font-variant-numeric: tabular-nums;
  z-index: 1;
}
/* Trace verticale reliant les etapes. */
.etapes > li:not(:last-child)::after {
  content: "";
  position: absolute;
  inset-block-start: var(--puce);
  inset-inline-start: calc(var(--puce) / 2 - 1px);
  width: 2px;
  height: calc(100% + var(--e-6) - var(--puce));
  background: linear-gradient(var(--marque), var(--bord));
  transform-origin: 50% 0;
}
.etapes h3 { font-size: var(--pas-md); margin-bottom: var(--e-2); }
.etapes p { color: var(--texte-2); max-width: var(--mesure); }
.etapes__meta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-2);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}

/* La trace reste statique : une timeline de defilement inactive la ferait
   disparaitre sur les pages courtes. Le mouvement vient du reveal du bloc. */

.etapes--accent > li::before { border-color: var(--accent); color: var(--accent-texte); }
.etapes--compacte { --puce: 2rem; gap: var(--e-5); }
.etapes--compacte > li::before { font-size: var(--pas-sm); }

/* --- 6.12 Formulaires ---------------------------------------------------- */
.formulaire { display: grid; gap: var(--e-5); }
.formulaire__section {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-carte);
}
.formulaire__legende {
  font-size: var(--pas-md);
  font-weight: 700;
  letter-spacing: var(--chasse-titre);
  padding: 0;
}
.formulaire__paire { display: grid; gap: var(--e-4); }
@media (min-width: 40em) {
  .formulaire__paire { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.champ { display: grid; gap: var(--e-2); }
.champ__etiquette {
  font-size: var(--pas-sm);
  font-weight: 650;
  color: var(--texte);
}
.champ__requis { color: var(--alerte); margin-left: 0.15rem; }
.champ__aide {
  font-size: var(--pas-xs);
  color: var(--texte-doux);
  line-height: 1.5;
}

.saisie, .selection, .zone-texte {
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-3) var(--e-4);
  font-size: var(--pas-base);
  line-height: 1.4;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-xs) inset;
  transition: border-color var(--d-court) var(--net),
              box-shadow var(--d-court) var(--net),
              background-color var(--d-court) var(--net);
  appearance: none;
}
.zone-texte { min-height: 8rem; resize: vertical; line-height: 1.6; }
.saisie::placeholder, .zone-texte::placeholder { color: var(--texte-doux); opacity: 1; }

.saisie:hover, .selection:hover, .zone-texte:hover { border-color: var(--p-gris); }
.saisie:focus-visible, .selection:focus-visible, .zone-texte:focus-visible {
  outline: none;
  border-color: var(--bord-actif);
  box-shadow: var(--ombre-focus);
}

/* Chevron du select dessine en gradients : aucune image externe. */
.selection {
  padding-right: var(--e-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%),
    linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 0.1rem),
    calc(100% - 1rem) calc(50% + 0.1rem);
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}

/* Etat d'erreur — porte par aria-invalid, pas par une classe seule. */
.saisie[aria-invalid="true"],
.selection[aria-invalid="true"],
.zone-texte[aria-invalid="true"] {
  border-color: var(--alerte);
  background: var(--alerte-fond);
}
.saisie[aria-invalid="true"]:focus-visible,
.selection[aria-invalid="true"]:focus-visible,
.zone-texte[aria-invalid="true"]:focus-visible {
  box-shadow: 0 0 0 3px rgb(192 50 43 / 0.24);
}
.champ__erreur {
  display: none;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--pas-sm);
  font-weight: 600;
  color: var(--alerte);
}
.champ__erreur:not(:empty) { display: flex; }
.champ__erreur .ico { margin-top: 0.15rem; }
@media (prefers-reduced-motion: no-preference) {
  .champ__erreur:not(:empty) { animation: glisse-droite var(--d-court) var(--sortie) both; }
}

/* Cases a cocher et boutons radio — cible tactile complete */
.case, .radio {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  min-height: var(--cible);
  padding: var(--e-2) 0;
  cursor: pointer;
  font-size: var(--pas-sm);
  line-height: 1.55;
}
.case input, .radio input {
  width: 1.35rem; height: 1.35rem;
  margin: 0.1rem 0 0;
  accent-color: var(--marque);
  flex: none;
  cursor: pointer;
}
.case a, .radio a { text-underline-offset: 0.15em; }

/* Groupe de choix presente en carte selectionnable */
.choix {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  padding: var(--e-4);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  background: var(--surface);
  cursor: pointer;
  transition: border-color var(--d-court) var(--net), background-color var(--d-court) var(--net);
}
.choix:hover { border-color: var(--bord-actif); background: var(--surface-survol); }
.choix:has(input:checked) {
  border-color: var(--marque);
  background: var(--marque-doux);
  box-shadow: inset 0 0 0 1px var(--marque);
}
.choix:has(input:focus-visible) { outline: 3px solid var(--anneau); outline-offset: 2px; }
.choix__titre { font-weight: 650; }
.choix__desc { font-size: var(--pas-xs); color: var(--texte-doux); }

/* Depot de fichier */
.depot {
  display: grid;
  place-items: center;
  gap: var(--e-2);
  padding: var(--e-6);
  border: 2px dashed var(--bord-fort);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  text-align: center;
  cursor: pointer;
  transition: border-color var(--d-court) var(--net), background-color var(--d-court) var(--net);
}
.depot:hover, .depot.est-survole { border-color: var(--marque); background: var(--surface-3); }
.depot .ico { width: 2rem; height: 2rem; color: var(--texte-doux); }

/* Piege a robots — invisible mais pas display:none (certains bots filtrent) */
.pot-de-miel {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}

/* Messages globaux de formulaire */
.message {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--bord);
  border-left-width: 3px;
  border-radius: var(--r-md);
  font-size: var(--pas-sm);
  background: var(--surface-2);
}
.message > .ico { margin-top: 0.15rem; }
.message p { margin: 0; }
.message ul { margin: var(--e-2) 0 0; padding-left: var(--e-5); }
.message--succes { background: var(--succes-fond); border-color: var(--succes-bord); color: var(--succes); }
.message--alerte { background: var(--alerte-fond); border-color: var(--alerte-bord); color: var(--alerte); }
.message--info { background: var(--info-fond); border-color: var(--info-bord); color: var(--info); }

.formulaire__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-4);
  justify-content: space-between;
}
.formulaire__mention {
  font-size: var(--pas-xs);
  color: var(--texte-doux);
  max-width: var(--mesure-courte);
}

/* --- 6.13 Filtres du listing vehicules ---------------------------------- */
.filtres {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  margin-bottom: var(--e-6);
}
@media (min-width: 56em) {
  .filtres__grille {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
    gap: var(--e-4);
    align-items: end;
  }
}
.filtres__grille { display: grid; gap: var(--e-4); }
.filtres__pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
}
.filtres__compte { font-size: var(--pas-sm); color: var(--texte-doux); }
.filtres__compte b { color: var(--texte); font-variant-numeric: tabular-nums; }

.jetons { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; padding: 0; margin: 0; }
.jeton {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.25rem;
  padding: var(--e-1) var(--e-3);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-pleine);
  background: var(--surface);
  font-size: var(--pas-sm);
  color: var(--texte-2);
}
.jeton button {
  display: grid; place-items: center;
  width: 1.5rem; height: 1.5rem;
  border-radius: 50%;
  color: var(--texte-doux);
  transition: background-color var(--d-court) var(--net), color var(--d-court) var(--net);
}
.jeton button:hover { background: var(--alerte-fond); color: var(--alerte); }

/* Masquage d'une carte filtree cote client (le serveur reste maitre) */
.est-filtre { display: none; }

/* --- 6.14 Galerie de fiche vehicule ------------------------------------- */
.galerie { display: grid; gap: var(--e-3); }
.galerie__scene {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--surface-2);
  border: 1px solid var(--bord);
}
.galerie__scene img {
  width: 100%; height: 100%;
  object-fit: cover;
}
.galerie__scene img[hidden] { display: none; }
@media (prefers-reduced-motion: no-preference) {
  .galerie__scene img { animation: apparait-simple var(--d-moyen) var(--doux) both; }
}
.galerie__nav {
  position: absolute;
  inset-block-start: 50%;
  inset-inline: var(--e-3);
  display: flex;
  justify-content: space-between;
  transform: translateY(-50%);
  pointer-events: none;
}
.galerie__nav button {
  pointer-events: auto;
  display: grid; place-items: center;
  width: var(--cible); height: var(--cible);
  border-radius: 50%;
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  color: var(--texte);
  border: 1px solid var(--bord);
  box-shadow: var(--ombre-md);
  transition: background-color var(--d-court) var(--net), transform var(--d-court) var(--net);
}
.galerie__nav button:hover { background: var(--surface); transform: scale(1.06); }
.galerie__compteur {
  position: absolute;
  inset-block-end: var(--e-3);
  inset-inline-end: var(--e-3);
  padding: 0.2rem 0.6rem;
  border-radius: var(--r-pleine);
  background: rgb(13 27 42 / 0.72);
  color: var(--p-blanc);
  font-size: var(--pas-xs);
  font-variant-numeric: tabular-nums;
}
.galerie__vignettes {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: var(--e-2);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.galerie__vignettes button {
  flex: none;
  width: 5.5rem;
  aspect-ratio: 4 / 3;
  border-radius: var(--r-sm);
  overflow: hidden;
  border: 2px solid transparent;
  opacity: 0.62;
  scroll-snap-align: start;
  transition: opacity var(--d-court) var(--net), border-color var(--d-court) var(--net);
}
.galerie__vignettes button img { width: 100%; height: 100%; object-fit: cover; }
.galerie__vignettes button:hover { opacity: 1; }
.galerie__vignettes button[aria-current="true"] {
  opacity: 1;
  border-color: var(--accent);
}

/* Sans JavaScript la galerie reste une liste d'images consultable. */
.galerie.sans-js .galerie__scene img[hidden] { display: block; }
.galerie.sans-js .galerie__scene { aspect-ratio: auto; }
.galerie.sans-js .galerie__nav, .galerie.sans-js .galerie__compteur { display: none; }

/* Fiche vehicule : caracteristiques en liste de definitions */
.specs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  gap: 1px;
  margin: var(--e-5) 0;
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--bord);
}
.specs > div {
  display: grid;
  gap: var(--e-1);
  padding: var(--e-4);
  background: var(--surface-carte);
}
.specs dt {
  font-size: var(--pas-xs);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
}
.specs dd { margin: 0; font-weight: 650; font-variant-numeric: tabular-nums; }

/* --- 6.15 Carte / iframe differee --------------------------------------- */
.carte-geo {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: var(--r-lg);
  overflow: hidden;
  border: 1px solid var(--bord);
  background: var(--surface-2);
  display: grid;
  place-items: center;
}
.carte-geo iframe { width: 100%; height: 100%; border: 0; }
.carte-geo__attente {
  display: grid;
  gap: var(--e-3);
  place-items: center;
  padding: var(--e-6);
  text-align: center;
  color: var(--texte-doux);
  font-size: var(--pas-sm);
}

/* --- 6.16 Pagination ----------------------------------------------------- */
.pagination { margin-block: var(--e-7); }
.pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  padding: 0; margin: 0;
}
.pagination a, .pagination span {
  display: inline-grid;
  place-items: center;
  min-width: var(--cible);
  min-height: var(--cible);
  padding-inline: var(--e-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--texte-2);
  font-size: var(--pas-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--d-court) var(--net),
              border-color var(--d-court) var(--net),
              color var(--d-court) var(--net);
}
.pagination a:hover {
  background: var(--surface-survol);
  border-color: var(--bord-actif);
  color: var(--texte-lien-survol);
}
.pagination [aria-current="page"] {
  background: var(--marque);
  border-color: var(--marque);
  color: var(--sur-marque);
}
.pagination .ellipse { border-color: transparent; background: none; color: var(--texte-doux); }

/* --- 6.17 Etats vides ---------------------------------------------------- */
.vide {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--e-5);
  text-align: center;
  border: 1px dashed var(--bord-fort);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.vide__ico {
  display: grid; place-items: center;
  width: 3.5rem; height: 3.5rem;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--bord);
  color: var(--texte-doux);
}
.vide__ico .ico { width: 1.75rem; height: 1.75rem; }
.vide h3 { font-size: var(--pas-md); }
.vide p { color: var(--texte-doux); max-width: var(--mesure-courte); }

/* Squelette de chargement (listing filtre) */
.squelette {
  border-radius: var(--r-sm);
  background: linear-gradient(90deg, var(--surface-2), var(--bord), var(--surface-2));
  background-size: 200% 100%;
  color: transparent;
  user-select: none;
}
@media (prefers-reduced-motion: no-preference) {
  .squelette { animation: battement 1.4s var(--doux) infinite; }
}

/* --- 6.18 Pied de page --------------------------------------------------- */
.pied {
  margin-top: var(--rythme);
  background: var(--surface-inverse);
  color: var(--texte-inverse-2);
  font-size: var(--pas-sm);
  border-top: 4px solid var(--accent);
}
.pied__haut {
  display: grid;
  gap: var(--e-6);
  padding-block: clamp(2.5rem, 5vw, 4rem);
}
@media (min-width: 48em) {
  .pied__haut { grid-template-columns: repeat(auto-fit, minmax(min(100%, 13rem), 1fr)); }
}
@media (min-width: 64em) {
  .pied__haut { grid-template-columns: 1.4fr repeat(3, minmax(0, 1fr)); }
}
.pied h2, .pied h3 {
  font-size: var(--pas-sm);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-inverse);
  margin-bottom: var(--e-4);
}
.pied ul { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--e-1); }
.pied a {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.25rem;
  color: var(--texte-inverse-2);
  text-decoration: none;
}
.pied a:hover { color: var(--p-ambre); text-decoration: underline; }
.pied address { font-style: normal; display: grid; gap: var(--e-2); }
.pied__marque { display: grid; gap: var(--e-3); }
.pied__marque img, .pied__marque svg { height: 2.5rem; width: auto; }
.pied__bas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  padding-block: var(--e-4);
  border-top: 1px solid var(--bord-inverse);
  font-size: var(--pas-xs);
}
.pied__bas nav ul { display: flex; flex-wrap: wrap; gap: var(--e-2) var(--e-4); }
.pied__signature { color: var(--texte-inverse-2); }
.pied__signature b { color: var(--texte-inverse); font-weight: 650; }

/* ==========================================================================
   07 · PAGES DE CONTENU (37 pages de texte long)
   ========================================================================== */

/* Gabarit : corps + sommaire lateral collant a partir de 64em. */
.page-contenu {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64em) {
  .page-contenu { grid-template-columns: minmax(0, 1fr) 17rem; }
  .page-contenu--gauche { grid-template-columns: 17rem minmax(0, 1fr); }
  .page-contenu--gauche .sommaire { order: -1; }
}

/* --- Prose : le rythme vertical est la colonne vertebrale des 37 pages -- */
:is(.prose,.page__body,.legal__body) { max-width: var(--mesure); font-size: var(--pas-base); line-height: var(--inter-corps); }
:is(.prose,.page__body,.legal__body) > * + * { margin-top: var(--e-4); }

:is(.prose,.page__body,.legal__body) h2 {
  margin-top: clamp(2.5rem, 5vw, 3.5rem);
  padding-top: var(--e-5);
  border-top: 1px solid var(--bord);
  font-size: var(--pas-xl);
  scroll-margin-top: 6rem;
}
:is(.prose,.page__body,.legal__body) h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }
:is(.prose,.page__body,.legal__body) h3 {
  margin-top: var(--e-7);
  font-size: var(--pas-lg);
  scroll-margin-top: 6rem;
}
/* La couleur de titre ne vise que les H3 redactionnels, pas ceux des
   composants imbriques (cartes, etapes, encadres). */
:is(.prose,.page__body,.legal__body) > h3 { color: var(--p-bleu-900); }
:is(.prose,.page__body,.legal__body) h4 { margin-top: var(--e-5); font-size: var(--pas-md); }
:is(.prose,.page__body,.legal__body) h2 + p, :is(.prose,.page__body,.legal__body) h3 + p, :is(.prose,.page__body,.legal__body) h4 + p { margin-top: var(--e-3); }
:is(.prose,.page__body,.legal__body) p { color: var(--texte-2); }
:is(.prose,.page__body,.legal__body) > p:first-of-type { font-size: var(--pas-md); color: var(--texte); }

/* Convention : une liste REDACTIONNELLE n'a pas de classe, une liste de
   COMPOSANT en a toujours une. Le `:not([class])` empeche les puces et le
   rythme de la prose de fuir dans la pagination, les cartes, les etapes. */
:is(.prose,.page__body,.legal__body) ul:not([class]), :is(.prose,.page__body,.legal__body) ol:not([class]) {
  display: grid;
  gap: var(--e-2);
  list-style: none;
  padding-left: 0;
}
:is(.prose,.page__body,.legal__body) ul:not([class]) > li, :is(.prose,.page__body,.legal__body) ol:not([class]) > li {
  position: relative;
  color: var(--texte-2);
}
:is(.prose,.page__body,.legal__body) ul:not([class]) > li { padding-left: var(--e-5); }
:is(.prose,.page__body,.legal__body) ul:not([class]) > li::before {
  content: "";
  position: absolute;
  inset-block-start: 0.65em;
  inset-inline-start: 0.35rem;
  width: 0.4rem; height: 0.4rem;
  border-radius: 50%;
  background: var(--accent);
}
:is(.prose,.page__body,.legal__body) ul:not([class]) ul { margin-top: var(--e-2); }
:is(.prose,.page__body,.legal__body) ul:not([class]) ul > li::before { background: var(--bord-fort); }
:is(.prose,.page__body,.legal__body) ol:not([class]) { counter-reset: item; }
:is(.prose,.page__body,.legal__body) ol:not([class]) > li {
  counter-increment: item;
  padding-left: var(--e-6);
}
:is(.prose,.page__body,.legal__body) ol:not([class]) > li::before {
  content: counter(item) ".";
  position: absolute;
  inset-inline-start: 0;
  font-weight: 700;
  color: var(--marque);
  font-variant-numeric: tabular-nums;
}

:is(.prose,.page__body,.legal__body) blockquote {
  margin: var(--e-6) 0;
  padding: var(--e-5) var(--e-5) var(--e-5) var(--e-6);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-2);
  font-size: var(--pas-md);
  line-height: 1.6;
  color: var(--texte);
}
:is(.prose,.page__body,.legal__body) blockquote p { color: inherit; }
:is(.prose,.page__body,.legal__body) blockquote > * + * { margin-top: var(--e-3); }
:is(.prose,.page__body,.legal__body) blockquote cite {
  display: block;
  font-style: normal;
  font-size: var(--pas-sm);
  font-weight: 650;
  color: var(--texte-doux);
}

:is(.prose,.page__body,.legal__body) figure { margin: var(--e-6) 0; }
:is(.prose,.page__body,.legal__body) figure img {
  width: 100%;
  border-radius: var(--r-lg);
  border: 1px solid var(--bord);
  background: var(--surface-2);
}
:is(.prose,.page__body,.legal__body) figcaption {
  margin-top: var(--e-3);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
  text-wrap: pretty;
}

:is(.prose,.page__body,.legal__body) dl { display: grid; gap: var(--e-3); }
:is(.prose,.page__body,.legal__body) dt { font-weight: 650; color: var(--texte); }
:is(.prose,.page__body,.legal__body) dd { margin: 0; color: var(--texte-2); }

/* Les tableaux inseres dans body_html heritent du style sans classe. */
:is(.prose,.page__body,.legal__body) table {
  width: 100%;
  margin-block: var(--e-5);
  font-size: var(--pas-sm);
  text-align: left;
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
}
:is(.prose,.page__body,.legal__body) th, :is(.prose,.page__body,.legal__body) td {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
:is(.prose,.page__body,.legal__body) thead th {
  font-size: var(--pas-xs);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
  background: var(--surface-2);
}
:is(.prose,.page__body,.legal__body) tbody tr:last-child > * { border-bottom: 0; }
/* app.js enveloppe ces tableaux dans .tableau-defile et ajoute data-col. */

:is(.prose,.page__body,.legal__body) a { font-weight: 550; }
:is(.prose,.page__body,.legal__body) hr { margin-block: var(--e-7); }

/* --- Isolation : un composant pose dans la prose garde ses propres regles.
   Les listes sont deja protegees par `:not([class])` plus haut ; restent
   les titres, dont la prose impose la marge, le filet et la couleur. ---- */
:is(.prose,.page__body,.legal__body) .carte h3, :is(.prose,.page__body,.legal__body) .etapes h3, :is(.prose,.page__body,.legal__body) .vide h3,
:is(.prose,.page__body,.legal__body) .comparatif h3, :is(.prose,.page__body,.legal__body) .cta h2, :is(.prose,.page__body,.legal__body) .liens-connexes h2 {
  margin-top: 0;
  padding-top: 0;
  border-top: 0;
}
:is(.prose,.page__body,.legal__body) .carte p, :is(.prose,.page__body,.legal__body) .vide p, :is(.prose,.page__body,.legal__body) .cta p { margin-top: var(--e-2); }
:is(.prose,.page__body,.legal__body) .cta h2 { color: var(--texte-inverse); }
:is(.prose,.page__body,.legal__body) .vide h3, :is(.prose,.page__body,.legal__body) .carte h3 { color: var(--texte); }
:is(.prose,.page__body,.legal__body) .tableau-cadre table { margin: 0; border: 0; }
:is(.prose,.page__body,.legal__body) .faq p, :is(.prose,.page__body,.legal__body) .encadre p { margin-top: 0; }

/* Liens internes mis en avant en fin de section */
.liens-connexes {
  margin-top: var(--e-7);
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.liens-connexes h2 {
  margin: 0 0 var(--e-3);
  padding: 0;
  border: 0;
  font-size: var(--pas-sm);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
}
.liens-connexes ul, :is(.prose,.page__body,.legal__body) .liens-connexes ul {
  display: grid;
  gap: var(--e-2);
  list-style: none;
  padding: 0;
}
.liens-connexes li, :is(.prose,.page__body,.legal__body) .liens-connexes li { padding-left: 0; }
.liens-connexes li::before, :is(.prose,.page__body,.legal__body) .liens-connexes li::before { content: none; }
.liens-connexes a { display: inline-flex; align-items: center; gap: var(--e-2); min-height: 2.25rem; }

/* Sources / references en bas de page (E-E-A-T) */
.sources {
  margin-top: var(--e-6);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.sources ol { padding-left: var(--e-5); display: grid; gap: var(--e-1); }
.sources a { color: var(--texte-doux); }

/* --- Sommaire lateral collant ------------------------------------------- */
.sommaire {
  font-size: var(--pas-sm);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: var(--e-4);
}
@media (min-width: 64em) {
  .sommaire {
    position: sticky;
    top: 6rem;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.sommaire__titre {
  font-size: var(--pas-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
  margin-bottom: var(--e-3);
}
.sommaire ol, .sommaire ul { list-style: none; margin: 0; padding: 0; }
.sommaire li { position: relative; }
.sommaire a {
  display: block;
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--bord);
  color: var(--texte-2);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--d-court) var(--net),
              border-color var(--d-court) var(--net),
              background-color var(--d-court) var(--net);
}
.sommaire a:hover { color: var(--texte-lien); border-left-color: var(--bord-fort); background: var(--surface); }
.sommaire a.est-actif {
  color: var(--marque);
  font-weight: 650;
  border-left-color: var(--accent);
  background: var(--surface);
}
.sommaire .niveau-3 a { padding-left: var(--e-5); font-size: var(--pas-xs); }

/* Sur petit ecran le sommaire devient un <details> repliable. */
.sommaire--repliable summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible);
  font-weight: 650;
  cursor: pointer;
  list-style: none;
}
.sommaire--repliable summary::-webkit-details-marker { display: none; }
.sommaire--repliable summary::after {
  content: "";
  width: 0.6rem; height: 0.6rem;
  border-right: 2px solid var(--marque);
  border-bottom: 2px solid var(--marque);
  transform: rotate(45deg);
  transition: transform var(--d-moyen) var(--sortie);
}
.sommaire--repliable[open] summary::after { transform: rotate(-135deg); }
@media (min-width: 64em) {
  .sommaire--repliable summary { display: none; }
  .sommaire--repliable > .sommaire__titre { display: block; }
}

/* En-tete de page de contenu */
.entete-page {
  padding-block: clamp(1.5rem, 4vw, 2.5rem) 0;
  border-bottom: 1px solid var(--bord);
}
.entete-page h1 { max-width: 22ch; }
.entete-page .chapo { margin-top: var(--e-4); }
.entete-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  margin: var(--e-5) 0;
  font-size: var(--pas-sm);
  color: var(--texte-doux);
  list-style: none;
  padding: 0;
}
.entete-page__meta li { display: inline-flex; align-items: center; gap: var(--e-2); }

/* ==========================================================================
   08 · MODE SOMBRE
   Seuls les tokens semantiques changent. Contrastes revalides :
   texte #E7EEF7 sur #0B1725 = 15,3:1 · lien #85B4F0 sur #0B1725 = 8,1:1
   doux #A3B4C8 sur #0B1725 = 8,0:1 · ambre #F2A007 sur #0B1725 = 9,3:1
   ========================================================================== */

@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] {
    --surface: #0B1725;
    --surface-2: #101F31;
    --surface-3: #14263B;
    --surface-inverse: #060E18;
    --surface-carte: #101F31;
    --surface-survol: #16293F;
    --surface-selection: #1D3A5C;
    --surface-voile: rgb(3 8 14 / 0.72);

    --texte: #E7EEF7;
    --texte-2: #C4D2E2;
    --texte-doux: #A3B4C8;
    --texte-inverse: #E7EEF7;
    --texte-inverse-2: #A3B4C8;
    --texte-lien: #85B4F0;
    --texte-lien-survol: #B3D0F7;

    --bord: #22364E;
    --bord-fort: #33496380;
    --bord-inverse: #22364E;
    --bord-actif: #85B4F0;

    --accent: #F2A007;
    --accent-fort: #FFB524;
    --accent-doux: #33270B;
    --accent-texte: #F5B849;
    --sur-accent: #0D1B2A;
    --marque: #85B4F0;
    --marque-doux: #16294215;
    --sur-marque: #06111F;

    --succes: #6EDBA4;
    --succes-fond: #0E2B1E;
    --succes-bord: #1F5A3C;
    --alerte: #FF9B93;
    --alerte-fond: #34150F;
    --alerte-bord: #6B2C25;
    --info: #9CC4F5;
    --info-fond: #10243C;
    --info-bord: #234771;
    --attention: #F5C15E;
    --attention-fond: #33270B;
    --attention-bord: #6A5218;

    --anneau: #85B4F0;

    --ombre-xs: 0 1px 1px rgb(0 0 0 / 0.30);
    --ombre-sm: 0 1px 2px rgb(0 0 0 / 0.40), 0 1px 3px rgb(0 0 0 / 0.30);
    --ombre-md: 0 2px 4px rgb(0 0 0 / 0.35), 0 6px 16px rgb(0 0 0 / 0.45);
    --ombre-lg: 0 4px 8px rgb(0 0 0 / 0.35), 0 16px 40px rgb(0 0 0 / 0.55);
    --ombre-xl: 0 8px 16px rgb(0 0 0 / 0.40), 0 28px 64px rgb(0 0 0 / 0.62);
    --ombre-focus: 0 0 0 3px rgb(133 180 240 / 0.35);
  }

  /* Retouches locales : le bleu de marque brut devient illisible sur sombre. */
  :root[data-theme="dark"] .btn--secondaire {
    background: var(--p-bleu-500);
    color: #FFFFFF;
  }
  :root[data-theme="dark"] .btn--secondaire:hover { background: #3C74C4; }
  :root[data-theme="dark"] :is(.prose,.page__body,.legal__body) > h3 { color: var(--texte-lien); }
  :root[data-theme="dark"] .heros--marque {
    background:
      radial-gradient(60rem 32rem at 82% -10%, rgb(43 99 181 / 0.22), transparent 62%),
      radial-gradient(42rem 26rem at 4% 108%, rgb(242 160 7 / 0.10), transparent 60%),
      var(--surface-2);
  }
  :root[data-theme="dark"] .carte-service__ico {
    background: var(--surface-3);
    color: var(--texte-lien);
  }
  :root[data-theme="dark"] .etapes > li::before {
    background: var(--surface-carte);
    border-color: var(--texte-lien);
    color: var(--texte-lien);
  }
  :root[data-theme="dark"] .tableau-defile {
    background:
      linear-gradient(to right, var(--surface-carte) 30%, transparent) left / 2.5rem 100% no-repeat,
      linear-gradient(to left,  var(--surface-carte) 30%, transparent) right / 2.5rem 100% no-repeat;
    background-attachment: local, local;
  }
  :root[data-theme="dark"] .heros::after { opacity: 0.05; }
  :root[data-theme="dark"] .galerie__compteur { background: rgb(0 0 0 / 0.78); }
}

/* Bascule manuelle depuis /ayden : data-theme="dark" force le theme sombre. */
:root[data-theme="dark"] {
  --surface: #0B1725;        --surface-2: #101F31;      --surface-3: #14263B;
  --surface-inverse: #060E18; --surface-carte: #101F31;  --surface-survol: #16293F;
  --surface-selection: #1D3A5C; --surface-voile: rgb(3 8 14 / 0.72);
  --texte: #E7EEF7;          --texte-2: #C4D2E2;        --texte-doux: #A3B4C8;
  --texte-inverse: #E7EEF7;  --texte-inverse-2: #A3B4C8;
  --texte-lien: #85B4F0;     --texte-lien-survol: #B3D0F7;
  --bord: #22364E;           --bord-fort: #334963;      --bord-inverse: #22364E;
  --bord-actif: #85B4F0;
  --accent: #F2A007;         --accent-fort: #FFB524;    --accent-doux: #33270B;
  --accent-texte: #F5B849;   --sur-accent: #0D1B2A;
  --marque: #85B4F0;         --sur-marque: #06111F;
  --succes: #6EDBA4;         --succes-fond: #0E2B1E;    --succes-bord: #1F5A3C;
  --alerte: #FF9B93;         --alerte-fond: #34150F;    --alerte-bord: #6B2C25;
  --info: #9CC4F5;           --info-fond: #10243C;      --info-bord: #234771;
  --attention: #F5C15E;      --attention-fond: #33270B; --attention-bord: #6A5218;
  --anneau: #85B4F0;
  color-scheme: dark;
}

/* Contraste renforce : on epaissit les filets plutot que de saturer. */
@media (prefers-contrast: more) {
  :root { --bord: var(--p-gris); --bord-fort: var(--texte); --texte-2: var(--texte); }
  .carte, .tableau-cadre, .encadre, .formulaire__section { border-width: 2px; }
  a { text-decoration-color: currentColor; }
}

/* ==========================================================================
   10 · PONT D'INTEGRATION — noms de classes des gabarits PHP
   page.php, home.php, commune.php, contact.php, legal.php, vehicules.php et
   vehicule.php ont ete ecrits en parallele avec un nommage BEM anglais.
   Cette section les branche sur les composants definis plus haut : aucune
   valeur nouvelle, uniquement du raccordement sur les memes tokens.
   (`.page__body` et `.legal__body` sont deja des alias de `.prose`,
    `.page__toc` et `.legal__toc` sont reconnus par app.js.)
   ========================================================================== */

/* --- 10.1 Boutons ------------------------------------------------------- */
.btn--primary {
  background: var(--accent);
  color: var(--sur-accent);
  box-shadow: var(--ombre-sm);
}
.btn--primary:hover {
  background: var(--accent-fort);
  color: var(--sur-accent);
  box-shadow: var(--ombre-md);
}
.btn--secondary {
  background: var(--surface);
  color: var(--texte-lien);
  border-color: var(--bord-fort);
}
.btn--secondary:hover {
  background: var(--surface-survol);
  border-color: var(--bord-actif);
  color: var(--texte-lien-survol);
}
/* Sur le bloc CTA (fond encre) un bouton clair deviendrait illisible. */
.cta:not(.cta--clair) :is(.btn--secondary, .btn--contour, .btn--secondaire) {
  background: transparent;
  color: var(--texte-inverse);
  border-color: rgb(255 255 255 / 0.4);
}
.cta:not(.cta--clair) :is(.btn--secondary, .btn--contour, .btn--secondaire):hover {
  background: rgb(255 255 255 / 0.1);
  border-color: var(--texte-inverse);
  color: var(--texte-inverse);
}
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* --- 10.2 Fil d'Ariane -------------------------------------------------- */
.breadcrumb {
  padding-block: var(--e-4);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  margin: 0; padding: 0;
}
.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--e-2); }
.breadcrumb__item + .breadcrumb__item::before {
  content: "";
  width: 0.4rem; height: 0.4rem;
  border-top: 1.5px solid var(--bord-fort);
  border-right: 1.5px solid var(--bord-fort);
  transform: rotate(45deg);
  flex: none;
}
.breadcrumb__link { color: var(--texte-doux); text-decoration-color: transparent; }
.breadcrumb__link:hover { color: var(--texte-lien); text-decoration-color: currentColor; }
.breadcrumb__current { color: var(--texte); font-weight: 600; }

/* --- 10.3 Gabarit de page ---------------------------------------------- */
.page__header, .legal__header, .vehicules__header {
  padding-bottom: clamp(1.25rem, 3vw, 2rem);
  border-bottom: 1px solid var(--bord);
}
.page__title, .legal__title, .vehicules__title, .vehicule-fiche__title {
  font-size: var(--pas-2xl);
  max-width: 24ch;
}
.page-404 { padding-block: var(--rythme); text-align: center; }
.page-404 h1 { font-size: var(--pas-2xl); }
.page__lead, .contact-page__intro, .vehicules__lead, .vehicules__intro {
  font-size: var(--pas-md);
  line-height: 1.6;
  color: var(--texte-2);
  max-width: var(--mesure);
  margin-top: var(--e-4);
}
.legal__updated {
  margin-top: var(--e-3);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.page__media { margin: var(--e-6) 0 0; }
.page__media img {
  width: 100%;
  /* Une illustration 1200x800 pleine largeur ferait 750 px de haut et
     repousserait tout le texte sous la ligne de flottaison. */
  aspect-ratio: 16 / 9;
  max-height: min(55svh, 26rem);
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--bord);
  background: var(--surface-2);
}
.page--empty, .legal--empty, .vehicule-fiche--absent {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--e-5);
  margin-block: var(--rythme);
  text-align: center;
  border: 1px dashed var(--bord-fort);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}

.page__layout, .contact-page__layout, .vehicule-fiche__layout {
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  padding-block: clamp(2rem, 4vw, 3.5rem);
  align-items: start;
}
@media (min-width: 64em) {
  /* page.php place le sommaire AVANT le corps : placement explicite, la
     mise en page ne depend donc pas de l'ordre du HTML. */
  .page__layout { grid-template-columns: 17rem minmax(0, 1fr); }
  .page__toc { grid-column: 1; }
  .page__body { grid-column: 2; }
  .contact-page__layout { grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); }
  .vehicule-fiche__layout { grid-template-columns: minmax(0, 1fr) 21rem; }
  .vehicule-fiche__main { grid-column: 1; }
  .vehicule-prix { grid-column: 2; }

  /* L'encart prix a rejoint la vitrine, en haut de fiche : le corps occupe
     donc seul .vehicule-fiche__layout, et sa deuxieme colonne de 21rem
     resterait vide. `:has` cible exactement le cas ou l'encart est ailleurs,
     sans casser une fiche qui le garderait au meme endroit qu'avant. */
  .vehicule-fiche__layout:not(:has(.vehicule-prix)) {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Vitrine : la photo et l'encart prix. Une seule colonne par defaut — sur un
   telephone on veut voir la voiture, puis le prix, dans cet ordre. */
.vehicule-fiche__vitrine {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  align-items: start;
}
@media (min-width: 64em) {
  .vehicule-fiche__vitrine { grid-template-columns: minmax(0, 1fr) 21rem; }
}
.page__body, .vehicule-fiche__main, .contact-form { min-width: 0; }

/* Sommaire lateral */
.page__toc, .legal__toc {
  font-size: var(--pas-sm);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  padding: var(--e-4);
}
@media (min-width: 64em) {
  .page__toc, .legal__toc {
    position: sticky;
    top: 6rem;
    max-height: calc(100svh - 8rem);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
  }
}
.page__toc-title, .legal__toc-title {
  font-size: var(--pas-xs);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
  margin-bottom: var(--e-3);
}
.page__toc-list, .legal__toc-list { list-style: none; margin: 0; padding: 0; }
.page__toc-link, .legal__toc-link {
  display: block;
  padding: var(--e-2) var(--e-3);
  border-left: 2px solid var(--bord);
  color: var(--texte-2);
  text-decoration: none;
  line-height: 1.4;
  transition: color var(--d-court) var(--net),
              border-color var(--d-court) var(--net),
              background-color var(--d-court) var(--net);
}
.page__toc-link:hover, .legal__toc-link:hover {
  color: var(--texte-lien);
  border-left-color: var(--bord-fort);
  background: var(--surface);
}
.page__toc-link.est-actif, .legal__toc-link.est-actif {
  color: var(--marque);
  font-weight: 650;
  border-left-color: var(--accent);
  background: var(--surface);
}

/* Galerie d'illustrations d'une page de contenu */
.page__gallery { margin-top: var(--rythme); }
.page__gallery-list {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.page__gallery-item figure { margin: 0; }
.page__gallery-item img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  border-radius: var(--r-lg);
  border: 1px solid var(--bord);
  background: var(--surface-2);
}
.page__gallery-item figcaption {
  margin-top: var(--e-2);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}

/* Liens connexes */
.page__related { margin-top: var(--e-7); }
.related-links__title {
  margin: 0 0 var(--e-3);
  font-size: var(--pas-sm);
  text-transform: uppercase;
  letter-spacing: var(--chasse-sur);
  color: var(--texte-doux);
}
.related-links__list {
  display: grid;
  gap: var(--e-2);
  list-style: none;
  margin: 0; padding: var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.related-links__link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.25rem;
}

/* --- 10.4 Bloc CTA ------------------------------------------------------ */
.cta__title { color: var(--texte-inverse); font-size: var(--pas-xl); }
.cta__text {
  color: var(--texte-inverse-2);
  max-width: var(--mesure-courte);
  margin-top: var(--e-3);
}
.cta--clair .cta__title { color: var(--texte); }
.cta--clair .cta__text { color: var(--texte-2); }
.cta--final { margin-top: var(--rythme); }

/* --- 10.5 Accueil ------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: clamp(2.5rem, 6vw, 5rem);
  border-bottom: 1px solid var(--bord);
  background:
    radial-gradient(60rem 32rem at 82% -10%, rgb(27 79 156 / 0.10), transparent 62%),
    radial-gradient(42rem 26rem at 4% 108%, rgb(242 160 7 / 0.10), transparent 60%),
    var(--surface-2);
  display: grid;
  gap: clamp(2rem, 5vw, 3.5rem);
  align-items: center;
}
@media (min-width: 64em) {
  .hero { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
}
.hero__title { font-size: var(--pas-3xl); max-width: 17ch; }
.hero__lead {
  font-size: var(--pas-md);
  line-height: 1.6;
  color: var(--texte-2);
  max-width: var(--mesure);
  margin-top: var(--e-4);
}
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-6); }
.hero__media {
  border-radius: var(--r-xl);
  overflow: hidden;
  box-shadow: var(--ombre-lg);
  background: var(--surface-2);
}
.hero__media img { width: 100%; height: 100%; object-fit: cover; }
@media (prefers-reduced-motion: no-preference) {
  .hero > * { animation: apparait var(--d-reveal) var(--sortie) both; }
  .hero > *:nth-child(2) { animation-delay: 110ms; }
}

.formules, .stock-teasers, .reassurance { padding-block: var(--rythme); }
.formules__title, .stock-teasers__title {
  font-size: var(--pas-xl);
  max-width: var(--mesure);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.stock-teasers__intro { color: var(--texte-2); max-width: var(--mesure); margin-bottom: var(--e-6); }
.formules__list, .stock-teasers__list, .vehicule-similaires__list {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.formule-card {
  display: flex;
  flex-direction: column;
  gap: var(--e-3);
  height: 100%;
  padding: var(--e-5);
  background: var(--surface-carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-xs);
  transition: transform var(--d-moyen) var(--sortie),
              box-shadow var(--d-moyen) var(--sortie),
              border-color var(--d-moyen) var(--sortie);
}
.formule-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-lg);
  border-color: var(--bord-fort);
}
.formule-card__title { font-size: var(--pas-md); }
.formule-card__text { color: var(--texte-2); font-size: var(--pas-sm); }
.formule-card__link, .stock-teasers__more {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: auto;
  min-height: 2.25rem;
  font-weight: 650;
  text-decoration: none;
}
.formule-card__link:hover, .stock-teasers__more:hover { text-decoration: underline; }

.reassurance__list {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.reassurance__item {
  padding: var(--e-4) var(--e-5);
  border-left: 3px solid var(--accent);
  background: var(--surface-2);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  color: var(--texte-2);
  font-size: var(--pas-sm);
}

/* --- 10.6 Cartes vehicule ---------------------------------------------- */
.vehicle-teaser, .vehicule-card {
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: hidden;
  background: var(--surface-carte);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-xs);
  transition: transform var(--d-moyen) var(--sortie),
              box-shadow var(--d-moyen) var(--sortie),
              border-color var(--d-moyen) var(--sortie);
}
.vehicle-teaser:hover, .vehicule-card:hover {
  transform: translateY(-3px);
  box-shadow: var(--ombre-lg);
  border-color: var(--bord-fort);
}
.vehicle-teaser__media, .vehicule-card__media {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  background: var(--surface-2);
}
.vehicle-teaser__media img, .vehicule-card__media img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform var(--d-long) var(--sortie);
}
.vehicle-teaser:hover .vehicle-teaser__media img,
.vehicule-card:hover .vehicule-card__media img { transform: scale(1.04); }
.vehicle-teaser__title, .vehicule-card__title {
  font-size: var(--pas-md);
  padding: var(--e-4) var(--e-5) 0;
}
.vehicle-teaser__meta, .vehicule-card__meta {
  padding: var(--e-2) var(--e-5) 0;
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.vehicle-teaser__price, .vehicule-card__price {
  margin-top: auto;
  padding: var(--e-4) var(--e-5);
  font-size: var(--pas-lg);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.01em;
  color: var(--texte);
}
.vehicule-card__price-barre, .vehicule-prix__barre {
  margin-right: var(--e-2);
  font-size: var(--pas-sm);
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: line-through;
}
/* Le lien couvre toute la carte : la carte entiere devient cliquable. */
.vehicle-teaser__link, .vehicule-card__link {
  position: absolute;
  inset: 0;
  z-index: 1;
  font-size: 0;
  color: transparent;
  text-decoration: none;
}
.vehicle-teaser:has(.vehicle-teaser__link:focus-visible),
.vehicule-card:has(.vehicule-card__link:focus-visible) {
  outline: 3px solid var(--anneau);
  outline-offset: 2px;
}
.vehicule-card__badges, .vehicule-fiche__badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin: 0;
}
.vehicule-card__badges {
  position: absolute;
  inset-block-start: var(--e-3);
  inset-inline-start: var(--e-3);
  z-index: 2;
}
.vehicule-fiche__badges { margin-top: var(--e-3); }
.vehicule-card__badge, .vehicule-fiche__badge {
  display: inline-flex;
  align-items: center;
  gap: var(--e-1);
  padding: 0.2rem 0.6rem;
  font-size: var(--pas-xs);
  font-weight: 650;
  line-height: 1.5;
  border-radius: var(--r-pleine);
  border: 1px solid var(--succes-bord);
  background: var(--succes-fond);
  color: var(--succes);
  white-space: nowrap;
}
.vehicule-card__badge--reserve, .vehicule-fiche__badge--reserve {
  border-color: var(--attention-bord);
  background: var(--attention-fond);
  color: var(--attention);
}
.vehicule-card__badge--vendu, .vehicule-fiche__badge--vendu {
  border-color: var(--bord-fort);
  background: var(--surface-2);
  color: var(--texte-doux);
}
.vehicule-card__badge--depot, .vehicule-fiche__badge--depot {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--sur-accent);
}

/* --- 10.7 Listing vehicules -------------------------------------------- */
.vehicules { padding-block: clamp(2rem, 4vw, 3.5rem); }
.vehicules-filtres {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  margin-block: var(--e-6);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.vehicules-filtres__row {
  display: grid;
  gap: var(--e-4);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr));
  align-items: end;
}
.vehicules-filtres__field { display: grid; gap: var(--e-2); }
.vehicules-filtres__label { font-size: var(--pas-sm); font-weight: 650; }
.vehicules-filtres__field :is(input, select) {
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-3) var(--e-4);
  font-size: var(--pas-base);
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  appearance: none;
  transition: border-color var(--d-court) var(--net), box-shadow var(--d-court) var(--net);
}
.vehicules-filtres__field :is(input, select):focus-visible {
  outline: none;
  border-color: var(--bord-actif);
  box-shadow: var(--ombre-focus);
}
.vehicules-filtres__actions { display: flex; flex-wrap: wrap; gap: var(--e-3); }
.vehicules__count { font-size: var(--pas-sm); color: var(--texte-doux); }
.vehicules__count b { color: var(--texte); font-variant-numeric: tabular-nums; }
.vehicules-grid {
  display: grid;
  gap: clamp(1rem, 2.4vw, 1.75rem);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 17rem), 1fr));
  list-style: none;
  margin: var(--e-5) 0 0; padding: 0;
}
.vehicules__empty {
  display: grid;
  place-items: center;
  gap: var(--e-4);
  padding: clamp(2.5rem, 7vw, 4.5rem) var(--e-5);
  text-align: center;
  border: 1px dashed var(--bord-fort);
  border-radius: var(--r-lg);
  background: var(--surface-2);
  color: var(--texte-doux);
}
.vehicules-pagination { margin-block: var(--e-7); }
.vehicules-pagination ul {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--e-2);
  list-style: none;
  margin: 0; padding: 0;
}
.vehicules-pagination__link, .vehicules-pagination__current {
  display: inline-grid;
  place-items: center;
  min-width: var(--cible);
  min-height: var(--cible);
  padding-inline: var(--e-3);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface);
  color: var(--texte-2);
  font-size: var(--pas-sm);
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  text-decoration: none;
  transition: background-color var(--d-court) var(--net),
              border-color var(--d-court) var(--net),
              color var(--d-court) var(--net);
}
.vehicules-pagination__link:hover {
  background: var(--surface-survol);
  border-color: var(--bord-actif);
  color: var(--texte-lien-survol);
}
.vehicules-pagination__current {
  background: var(--marque);
  border-color: var(--marque);
  color: var(--sur-marque);
}

/* --- 10.8 Fiche vehicule ------------------------------------------------ */
.vehicule-fiche { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.vehicule-fiche__header { padding-bottom: var(--e-5); }

/* Galerie 100 % CSS : les radios pilotent l'affichage, aucun JavaScript.
   Elle fonctionne donc aussi quand app.js n'est pas charge. */
.vehicule-galerie { position: relative; display: grid; gap: var(--e-3); }
.vehicule-galerie > input[type="radio"] {
  position: absolute;
  width: 1px; height: 1px;
  opacity: 0;
  pointer-events: none;
}
.vehicule-galerie__viewport {
  position: relative;
  aspect-ratio: 4 / 3;
  /* Pleine largeur de fiche, un 4/3 ferait 850 px de haut : on plafonne. */
  max-height: min(60svh, 30rem);
  overflow: hidden;
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.vehicule-galerie__slide {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--d-moyen) var(--doux), visibility var(--d-moyen);
}
/* contain, PAS cover : sur une annonce de voiture, la photo doit être vue en
   entier. Un recadrage automatique coupe systématiquement quelque chose que
   l'acheteur cherche — un bas de caisse, une jante, l'arrière du véhicule.
   Le fond du viewport comble ce qui reste : mieux vaut une bande unie qu'une
   voiture amputée. Les vignettes, elles, gardent leur cover (voir plus bas) :
   à 6 rem de large, l'alignement prime sur l'exhaustivité. */
.vehicule-galerie__slide img { width: 100%; height: 100%; object-fit: contain; }
.vehicule-galerie__slide figcaption {
  position: absolute;
  inset-inline: 0;
  inset-block-end: 0;
  padding: var(--e-3) var(--e-4);
  background: linear-gradient(transparent, rgb(13 27 42 / 0.78));
  color: #FFFFFF;
  font-size: var(--pas-sm);
}
.vehicule-galerie__thumbs {
  display: flex;
  gap: var(--e-2);
  overflow-x: auto;
  padding-bottom: var(--e-2);
  scrollbar-width: thin;
  scroll-snap-type: x proximity;
}
.vehicule-galerie__thumb {
  flex: none;
  width: 5.5rem;
  aspect-ratio: 4 / 3;
  overflow: hidden;
  border: 2px solid transparent;
  border-radius: var(--r-sm);
  opacity: 0.62;
  cursor: pointer;
  scroll-snap-align: start;
  transition: opacity var(--d-court) var(--net), border-color var(--d-court) var(--net);
}
.vehicule-galerie__thumb img { width: 100%; height: 100%; object-fit: cover; }
.vehicule-galerie__thumb:hover { opacity: 1; }

/* A partir de la tablette, les vignettes passent A COTE de la grande photo
   plutot qu'en dessous : le visiteur voit la serie complete sans quitter des
   yeux la vue principale, et la fiche gagne la hauteur d'une bande de vignettes.
   En dessous de ce palier on garde la bande horizontale scrollable : une
   colonne de vignettes sur un telephone volerait la moitie de la largeur.
   Les <input> sont position:absolute, donc ils ne comptent pas comme items de
   grille — la grille ne contient bien que __viewport et __thumbs. */
@media (min-width: 48rem) {
  /* :has() et non une regle seche : la bande de vignettes n'existe qu'a partir
     de DEUX photos. Sans cette condition, une annonce a photo unique reserverait
     quand meme la colonne laterale et sa photo serait rognee pour rien.
     Navigateur sans :has() → colonne unique, l'affichage d'avant. */
  .vehicule-galerie:has(.vehicule-galerie__thumbs) {
    grid-template-columns: minmax(0, 1fr) 6.5rem;
  }
  /* Largeur plafonnée à ce que la photo peut réellement remplir.
     Le cadre est en 4/3 (format des photos d'annonce) et sa hauteur est bornée
     par l'écran ; sa largeur utile vaut donc hauteur x 4/3. Sans ce plafond, le
     bloc occupait toute la colonne et object-fit:contain laissait 240 px de
     bande grise de chaque côté de la voiture. On ajoute la colonne de vignettes
     (6.5rem) et l'espace qui l'en sépare (--e-3, le gap de .vehicule-galerie).
     Passer --e-3 en dur ici casserait dès que le gap change : les deux valeurs
     doivent rester la même variable. */
  .vehicule-galerie:has(.vehicule-galerie__thumbs) {
    /* width:100% INDISPENSABLE ici, et pas seulement pour la forme : depuis que
       la galerie est un item de la grille .vehicule-fiche__vitrine, le
       `margin-inline: auto` ci-dessous annule l'étirement automatique. La boîte
       retombe alors sur sa largeur intrinsèque — or ses diapositives sont en
       position absolue, donc cette largeur vaut ZÉRO : la photo disparaissait
       complètement, il ne restait que la bande de vignettes. */
    width: 100%;
    max-width: calc(min(72svh, 36rem) * 4 / 3 + 6.5rem + var(--e-3));
    /* Centré : le plafond ci-dessus laisse parfois de la place libre. Répartie
       des deux côtés, elle se lit comme une marge voulue ; toute à droite, elle
       donnait une page qui penche. */
    margin-inline: auto;
  }
  /* width:100% explicite — SANS lui, la photo laisse un vide de 500 px.
     Explication : aspect-ratio combine a max-height sur une boite en width:auto
     fait ceder la LARGEUR pour tenir le ratio. La photo se recroquevillait donc
     a 505 px au milieu d'une colonne de 1036, avec les vignettes plaquees loin a
     droite. En figeant la largeur, c'est la hauteur qui cede, et le contain pose
     sur .vehicule-galerie__slide img loge la photo entiere dans le cadre. */
  .vehicule-galerie__viewport {
    width: 100%;
    /* 4/3 : le format des photos d'annonce (1600x1200 chez ce client, et le
       format par défaut de la plupart des téléphones). Le cadre épouse donc la
       photo au lieu de la loger dans un panoramique qui la laisserait flotter. */
    aspect-ratio: 4 / 3;
    max-height: min(72svh, 36rem);
  }
  .vehicule-galerie__thumbs {
    flex-direction: column;
    overflow-x: hidden;
    overflow-y: auto;
    /* height:0 + min-height:100% — la colonne se cale sur la hauteur REELLE de
       la grande photo, quelle qu'elle soit. height:0 annule la contribution des
       vignettes au calcul de la ligne (sinon vingt vignettes l'etireraient bien
       au-dela de la photo), min-height:100% la fait ensuite remplir cette ligne.
       Une max-height chiffree ne marcherait pas : la photo n'a pas toujours la
       meme hauteur selon son format. */
    height: 0;
    min-height: 100%;
    padding-bottom: 0;
    padding-inline-end: var(--e-1);
    scroll-snap-type: y proximity;
  }
  .vehicule-galerie__thumb { width: 100%; }
}
/* Une paire de regles par photo : la vue affichee et sa vignette active. */
.vehicule-galerie > input:nth-of-type(1):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(1),
.vehicule-galerie > input:nth-of-type(2):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(2),
.vehicule-galerie > input:nth-of-type(3):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(3),
.vehicule-galerie > input:nth-of-type(4):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(4),
.vehicule-galerie > input:nth-of-type(5):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(5),
.vehicule-galerie > input:nth-of-type(6):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(6),
.vehicule-galerie > input:nth-of-type(7):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(7),
.vehicule-galerie > input:nth-of-type(8):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(8),
.vehicule-galerie > input:nth-of-type(9):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(9),
.vehicule-galerie > input:nth-of-type(10):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(10),
.vehicule-galerie > input:nth-of-type(11):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(11),
.vehicule-galerie > input:nth-of-type(12):checked ~ .vehicule-galerie__viewport .vehicule-galerie__slide:nth-of-type(12) {
  opacity: 1;
  visibility: visible;
}
.vehicule-galerie > input:nth-of-type(1):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(1),
.vehicule-galerie > input:nth-of-type(2):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(2),
.vehicule-galerie > input:nth-of-type(3):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(3),
.vehicule-galerie > input:nth-of-type(4):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(4),
.vehicule-galerie > input:nth-of-type(5):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(5),
.vehicule-galerie > input:nth-of-type(6):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(6),
.vehicule-galerie > input:nth-of-type(7):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(7),
.vehicule-galerie > input:nth-of-type(8):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(8),
.vehicule-galerie > input:nth-of-type(9):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(9),
.vehicule-galerie > input:nth-of-type(10):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(10),
.vehicule-galerie > input:nth-of-type(11):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(11),
.vehicule-galerie > input:nth-of-type(12):checked ~ .vehicule-galerie__thumbs .vehicule-galerie__thumb:nth-of-type(12) {
  opacity: 1;
  border-color: var(--accent);
}
/* Repli : si aucune radio n'est cochee, la premiere photo reste visible. */
.vehicule-galerie:not(:has(> input:checked)) .vehicule-galerie__slide:first-of-type {
  opacity: 1;
  visibility: visible;
}
/* Le focus clavier doit se voir sur la vignette, pas sur la radio masquee. */
.vehicule-galerie > input:focus-visible ~ .vehicule-galerie__thumbs { outline: 3px solid var(--anneau); outline-offset: 3px; }

.vehicule-fiche__table {
  width: 100%;
  margin-block: var(--e-6);
  font-size: var(--pas-sm);
  text-align: left;
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.vehicule-fiche__table :is(th, td) {
  padding: var(--e-3) var(--e-4);
  border-bottom: 1px solid var(--bord);
  vertical-align: top;
}
.vehicule-fiche__table th {
  width: 40%;
  font-weight: 600;
  color: var(--texte-doux);
  background: var(--surface-2);
}
.vehicule-fiche__table td { font-weight: 650; font-variant-numeric: tabular-nums; }
.vehicule-fiche__table tr:last-child :is(th, td) { border-bottom: 0; }

/* ---------------------------------------------------------------------------
   CARACTERISTIQUES — grille de cartes a icone
   Remplace le tableau label/valeur : une caracteristique se lit d'un coup d'oeil
   par son icone, alors qu'un tableau de quinze lignes se parcourt ligne a ligne.
   Le <dl> reste semantique (dt = intitule, dd = valeur) : chaque paire est
   enveloppee dans un .carac, seul enfant autorise d'un <dl> avec dt/dd.
--------------------------------------------------------------------------- */
.vehicule-caracs { margin-block: var(--e-6); }
.vehicule-caracs__titre { font-size: var(--pas-lg); margin-bottom: var(--e-4); }
.vehicule-caracs__grille {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 11rem), 1fr));
  margin: 0;
}
.carac {
  display: flex;
  align-items: flex-start;
  gap: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.carac__icone {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  margin-block-start: 0.1rem;
  color: var(--accent, var(--texte-doux));
}
.carac__texte { min-width: 0; }
.carac__label {
  font-size: var(--pas-xs, 0.8125rem);
  font-weight: 600;
  color: var(--texte-doux);
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.carac__valeur {
  margin: 0.15rem 0 0;
  font-weight: 650;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
}

/* Equipements ranges par famille (Securite / Confort / Multimedia / Autres). */
.vehicule-equipements {
  display: grid;
  gap: var(--e-5);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 16rem), 1fr));
}
.vehicule-equipements__titre {
  font-size: var(--pas-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--texte-doux);
  margin: 0 0 var(--e-3);
  padding-bottom: var(--e-2);
  border-bottom: 1px solid var(--bord);
}
/* Dans une colonne de famille, une seule colonne d'items : la grille auto-fill
   du bloc parent gere deja la repartition horizontale. */
.vehicule-equipements__groupe .vehicule-fiche__equipements { grid-template-columns: 1fr; }

/* Formulaire « ce vehicule vous interesse ? » pose sur la fiche. */
.vehicule-contact {
  margin-block: var(--e-6);
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
.vehicule-contact__titre { font-size: var(--pas-lg); margin: 0 0 var(--e-4); }
.vehicule-contact__grille {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr));
  margin-bottom: var(--e-3);
}
.vehicule-contact .field { margin: 0; }
.vehicule-contact .field__label {
  display: block;
  font-size: var(--pas-sm);
  font-weight: 600;
  margin-bottom: var(--e-1);
}
.vehicule-contact .field__control {
  width: 100%;
  padding: var(--e-3);
  font: inherit;
  color: inherit;
  background: var(--surface);
  border: 1px solid var(--bord);
  border-radius: var(--r-sm);
}
.vehicule-contact textarea.field__control { resize: vertical; }
.vehicule-contact__accord { margin: var(--e-4) 0 0; }
.vehicule-contact__accord-label {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--pas-sm);
  color: var(--texte-2);
  cursor: pointer;
}
.vehicule-contact__accord-label input { margin-block-start: 0.2em; flex: none; }
.vehicule-contact__envoi {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-3);
  margin-block-start: var(--e-4);
}
.vehicule-contact__mention { font-size: var(--pas-sm); color: var(--texte-doux); }
.vehicule-contact__succes,
.vehicule-contact__erreurs {
  padding: var(--e-3) var(--e-4);
  margin-bottom: var(--e-4);
  border-radius: var(--r-sm);
  border-inline-start: 3px solid currentColor;
}
.vehicule-contact__succes { color: var(--succes, #15803D); background: rgb(21 128 61 / 0.08); }
.vehicule-contact__erreurs { color: var(--erreur, #B91C1C); background: rgb(185 28 28 / 0.08); }
.vehicule-contact__erreurs p { margin: 0; }

.vehicule-fiche__description { margin-block: var(--e-6); }
.vehicule-fiche__description h2, .vehicule-fiche__equipements-bloc h2 {
  font-size: var(--pas-lg);
  margin-bottom: var(--e-3);
}
.vehicule-fiche__description p { color: var(--texte-2); max-width: var(--mesure); }
.vehicule-fiche__equipements {
  display: grid;
  gap: var(--e-2);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.vehicule-fiche__equipements-item {
  position: relative;
  padding-left: var(--e-5);
  font-size: var(--pas-sm);
  color: var(--texte-2);
}
/* Coche dessinee en CSS : ni image, ni emoji. */
.vehicule-fiche__equipements-item::before {
  content: "";
  position: absolute;
  inset-block-start: 0.45em;
  inset-inline-start: 0.1rem;
  width: 0.35rem; height: 0.65rem;
  border-right: 2px solid var(--succes);
  border-bottom: 2px solid var(--succes);
  transform: rotate(45deg);
}

.vehicule-prix {
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-top: 3px solid var(--accent);
  border-radius: var(--r-lg);
  background: var(--surface-carte);
  box-shadow: var(--ombre-md);
}
@media (min-width: 64em) {
  .vehicule-prix { position: sticky; top: 6rem; }
}
.vehicule-prix__montant { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e-2); }
.vehicule-prix__montant-valeur {
  font-size: var(--pas-2xl);
  font-weight: 700;
  letter-spacing: var(--chasse-titre);
  font-variant-numeric: tabular-nums;
  color: var(--texte);
}
.vehicule-prix__actions { display: grid; gap: var(--e-3); margin-top: var(--e-5); }
.vehicule-prix__actions .btn { width: 100%; }
.vehicule-prix__garantie {
  margin-top: var(--e-4);
  padding-top: var(--e-4);
  border-top: 1px solid var(--bord);
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}
.vehicule-similaires { padding-block: var(--rythme); border-top: 1px solid var(--bord); }
.vehicule-similaires__title { font-size: var(--pas-xl); margin-bottom: clamp(1.5rem, 3vw, 2.25rem); }

/* --- 10.9 Communes ------------------------------------------------------ */
.commune-page__banner {
  display: grid;
  gap: var(--e-3);
  padding: var(--e-5);
  margin-block: var(--e-5);
  border: 1px solid var(--bord);
  border-left: 3px solid var(--marque);
  border-radius: 0 var(--r-md) var(--r-md) 0;
  background: var(--surface-3);
}
.commune-page__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: 0; padding: 0;
}
.commune-page__cp, .commune-page__population, .commune-page__distance {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  font-size: var(--pas-xs);
  font-weight: 650;
  border-radius: var(--r-pleine);
  border: 1px solid var(--info-bord);
  background: var(--info-fond);
  color: var(--info);
  white-space: nowrap;
}
.commune-page__neighbours, .commune-page__list, .commune-page__contact { margin-top: var(--e-7); }
.commune-page__neighbours-title, .commune-page__list-title,
.commune-page__contact-title, .commune-page__sector-title {
  font-size: var(--pas-lg);
  margin-bottom: var(--e-4);
}
.commune-page__sector-title { font-size: var(--pas-md); color: var(--texte-doux); }
.commune-page__neighbours-list, .commune-page__sector-list, .commune-page__contact-list {
  display: grid;
  gap: var(--e-3);
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 14rem), 1fr));
  list-style: none;
  margin: 0; padding: 0;
}
.commune-page__contact-list { grid-template-columns: 1fr; gap: var(--e-2); }
.commune-page__sector + .commune-page__sector { margin-top: var(--e-6); }
.commune-card {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  min-height: var(--cible);
  padding: var(--e-4);
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface-carte);
  transition: border-color var(--d-court) var(--net),
              background-color var(--d-court) var(--net),
              transform var(--d-court) var(--net);
}
.commune-card:hover {
  border-color: var(--bord-actif);
  background: var(--surface-survol);
  transform: translateY(-2px);
}
.commune-card__title { font-size: var(--pas-base); font-weight: 650; }
.commune-card__meta { display: block; font-size: var(--pas-xs); color: var(--texte-doux); }
.commune-card__link { text-decoration: none; }
.commune-card__link::after { content: ""; position: absolute; inset: 0; }
.commune-card { position: relative; }
.commune-page__itinerary-link {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: var(--cible);
  font-weight: 650;
}

/* --- 10.10 Contact ------------------------------------------------------ */
.contact-page { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.contact-form { display: grid; gap: var(--e-5); }
.contact-form__errors {
  display: grid;
  gap: var(--e-2);
  padding: var(--e-4) var(--e-5);
  border: 1px solid var(--alerte-bord);
  border-left-width: 3px;
  border-radius: var(--r-md);
  background: var(--alerte-fond);
  color: var(--alerte);
  font-size: var(--pas-sm);
}
.contact-form__errors :is(ul, ol) { margin: 0; padding-left: var(--e-5); }
.field { display: grid; gap: var(--e-2); }
.field__label { font-size: var(--pas-sm); font-weight: 650; color: var(--texte); }
.field__hint { font-size: var(--pas-xs); color: var(--texte-doux); line-height: 1.5; }
.field__control {
  width: 100%;
  min-height: var(--cible);
  padding: var(--e-3) var(--e-4);
  font-size: var(--pas-base);
  line-height: 1.4;
  color: var(--texte);
  background: var(--surface);
  border: 1px solid var(--bord-fort);
  border-radius: var(--r-md);
  box-shadow: var(--ombre-xs) inset;
  appearance: none;
  transition: border-color var(--d-court) var(--net), box-shadow var(--d-court) var(--net);
}
textarea.field__control { min-height: 8rem; resize: vertical; line-height: 1.6; }
select.field__control {
  padding-right: var(--e-8);
  background-image:
    linear-gradient(45deg, transparent 50%, var(--texte-doux) 50%),
    linear-gradient(135deg, var(--texte-doux) 50%, transparent 50%);
  background-position:
    calc(100% - 1.35rem) calc(50% + 0.1rem),
    calc(100% - 1rem) calc(50% + 0.1rem);
  background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
  background-repeat: no-repeat;
}
.field__control:hover { border-color: var(--p-gris); }
.field__control:focus-visible {
  outline: none;
  border-color: var(--bord-actif);
  box-shadow: var(--ombre-focus);
}
.field__control[aria-invalid="true"] { border-color: var(--alerte); background: var(--alerte-fond); }
.field__error {
  display: flex;
  align-items: flex-start;
  gap: var(--e-2);
  font-size: var(--pas-sm);
  font-weight: 600;
  color: var(--alerte);
}
.field--checkbox .field__label {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: var(--e-3);
  align-items: start;
  min-height: var(--cible);
  font-weight: 400;
  line-height: 1.55;
  cursor: pointer;
}
.field--checkbox input[type="checkbox"] {
  width: 1.35rem; height: 1.35rem;
  margin: 0.1rem 0 0;
  accent-color: var(--marque);
  cursor: pointer;
}
/* Piege a robots : hors ecran, jamais display:none (certains robots filtrent). */
.field--trap {
  position: absolute;
  left: -9999px;
  width: 1px; height: 1px;
  overflow: hidden;
  opacity: 0;
  pointer-events: none;
}
.contact-info {
  display: grid;
  gap: var(--e-4);
  padding: var(--e-5);
  border: 1px solid var(--bord);
  border-radius: var(--r-lg);
  background: var(--surface-2);
}
@media (min-width: 64em) {
  .contact-info { position: sticky; top: 6rem; }
}
.contact-info__title { font-size: var(--pas-md); }
.contact-info__list { display: grid; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }
.contact-info__item { color: var(--texte-2); font-size: var(--pas-sm); }
.contact-info__item a { min-height: 2.25rem; display: inline-flex; align-items: center; }
.contact-info__map {
  position: relative;
  aspect-ratio: 16 / 9;
  display: grid;
  place-items: center;
  overflow: hidden;
  border: 1px solid var(--bord);
  border-radius: var(--r-md);
  background: var(--surface);
}
.contact-info__map iframe { width: 100%; height: 100%; border: 0; }
.contact-info__map-fallback {
  padding: var(--e-5);
  text-align: center;
  font-size: var(--pas-sm);
  color: var(--texte-doux);
}

/* --- 10.11 Pages legales ------------------------------------------------ */
.legal { padding-block: clamp(1.5rem, 4vw, 2.5rem); }
.legal__body { max-width: var(--mesure); }

/* --- 10.12 Mode sombre : retouches du pont ------------------------------ */
@media (prefers-color-scheme: dark) {
  :root[data-theme="dark"] .btn--secondary {
    background: var(--surface-2);
    color: var(--texte-lien);
    border-color: var(--bord-fort);
  }
  :root[data-theme="dark"] .hero {
    background:
      radial-gradient(60rem 32rem at 82% -10%, rgb(43 99 181 / 0.22), transparent 62%),
      radial-gradient(42rem 26rem at 4% 108%, rgb(242 160 7 / 0.10), transparent 60%),
      var(--surface-2);
  }
  :root[data-theme="dark"] .vehicule-galerie__slide figcaption {
    background: linear-gradient(transparent, rgb(0 0 0 / 0.85));
  }
}

/* --- 10.13 Gouttieres et pleine largeur --------------------------------
   Les gabarits posent leurs sections directement dans <main>, sans passer
   par `.conteneur`. On leur donne donc ici la largeur et les gouttieres,
   sinon le texte colle aux bords de l'ecran. --------------------------- */
main > * {
  width: 100%;
  max-width: var(--largeur);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
/* Le heros garde un fond pleine largeur, seul son contenu est contraint. */
main > .hero, main > .heros {
  max-width: none;
  padding-inline: max(var(--gouttiere), (100% - var(--largeur)) / 2);
}
/* Deux colonnes uniquement quand il y a reellement un visuel a droite. */
.hero { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 64em) {
  .hero:has(.hero__media) { grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr); }
  .hero:not(:has(.hero__media)) .hero__title { max-width: 20ch; }
}
/* Les H1 reels sont longs : 16ch produisait cinq lignes. */
.hero__title, .heros h1 { max-width: 22ch; }

/* Marque + 6 rubriques + CTA ne tiennent pas cote a cote sous 80 em : la
   baseline de marque part la premiere, et la barre passe a la ligne en
   dernier recours plutot que de deborder l'ecran. */
.nav-bureau a, .entete-actions .btn, .btn-tel { white-space: nowrap; }
.entete-barre { flex-wrap: wrap; row-gap: var(--e-2); }
.marque { flex: none; }
.marque__suffixe { max-width: 22ch; }
@media (max-width: 84.999em) { .marque__suffixe { display: none; } }

/* ==========================================================================
   09 · IMPRESSION — les clients impriment les fiches vehicule
   ========================================================================== */

@media print {
  @page {
    size: A4;
    margin: 16mm 14mm 18mm;
  }

  :root {
    --surface: #fff; --surface-2: #fff; --surface-3: #fff; --surface-carte: #fff;
    --texte: #000; --texte-2: #1a1a1a; --texte-doux: #444;
    --bord: #999; --bord-fort: #666;
    --ombre-xs: none; --ombre-sm: none; --ombre-md: none;
    --ombre-lg: none; --ombre-xl: none;
    --rythme: 1.5rem;
  }

  html { scroll-behavior: auto; }
  body {
    background: #fff;
    color: #000;
    font-size: 11pt;
    line-height: 1.45;
  }

  /* Ce qui n'a aucun sens sur papier disparait. */
  .site-entete, .barre-info, .nav-bureau, .nav-mobile, .nav-voile, .nav-bascule,
  .evitement, .progression, .fil, .pagination, .filtres, .jetons,
  .galerie__nav, .galerie__vignettes, .galerie__compteur,
  .cta, .cta-ligne, .liens-connexes, .sommaire, .carte-geo,
  .btn, .vide, form, .formulaire, .formulaire__section, .depot, .message--info,
  .page__toc, .legal__toc, .breadcrumb, .contact-form, .contact-info__map,
  .vehicules-filtres, .vehicules-pagination, .vehicule-prix__actions,
  .vehicule-galerie__thumbs, .related-links__list, .page__related,
  .cta__actions, .stock-teasers__more {
    display: none;
  }

  .page-contenu { display: block; padding: 0; }
  :is(.prose,.page__body,.legal__body), .conteneur, .conteneur--etroit { max-width: none; padding: 0; }
  .section { padding-block: 0; border: 0; }

  h1 { font-size: 20pt; }
  h2 { font-size: 14pt; margin-top: 10mm; border-top: 1px solid #999; padding-top: 3mm; }
  h3 { font-size: 12pt; margin-top: 6mm; color: #000; }
  h1, h2, h3, h4 { break-after: avoid-page; page-break-after: avoid; }
  p, li, blockquote, figure, tr, .encadre, .carte { break-inside: avoid; page-break-inside: avoid; }

  /* Les tableaux redeviennent des tableaux, meme la version « cartes ». */
  .tableau-cartes, .tableau-cartes tbody, .tableau-cartes tr,
  .tableau-cartes th, .tableau-cartes td { display: revert; }
  .tableau-cartes thead { position: static; width: auto; height: auto; clip-path: none; }
  .tableau-cartes tbody td::before { content: none; }
  .tableau-defile { overflow: visible; background: none; }
  .tableau, :is(.prose,.page__body,.legal__body) table { width: 100%; font-size: 9.5pt; border: 1px solid #999; }
  .tableau th, .tableau td, :is(.prose,.page__body,.legal__body) th, :is(.prose,.page__body,.legal__body) td { border: 1px solid #bbb; padding: 2mm 3mm; }
  .tableau thead, :is(.prose,.page__body,.legal__body) thead { display: table-header-group; background: #f0f0f0; }
  .tableau-cadre { border: 0; border-radius: 0; }

  /* Fiche vehicule : la premiere photo suffit, le reste gaspille l'encre. */
  .galerie__scene { aspect-ratio: auto; border: 1px solid #999; max-height: 90mm; }
  .galerie__scene img { max-height: 90mm; object-fit: contain; }
  .specs { border: 1px solid #999; background: #fff; gap: 0; }
  .specs > div { border: 1px solid #ddd; padding: 2mm 3mm; }

  /* Les details restent lisibles : tout est deplie a l'impression. */
  details { display: block; }
  details > summary { list-style: none; font-weight: 700; }
  details > summary::after { content: none; }
  .faq details::details-content { block-size: auto; overflow: visible; }
  .faq__reponse { display: block; padding: 0 0 3mm; }

  /* Le lecteur doit pouvoir retrouver l'URL depuis le papier. */
  :is(.prose,.page__body,.legal__body) a[href^="http"]::after,
  :is(.prose,.page__body,.legal__body) a[href^="/"]::after {
    content: " (" attr(href) ")";
    font-size: 8.5pt;
    color: #555;
    word-break: break-all;
  }
  a { color: #000; text-decoration: underline; }

  .pied {
    margin-top: 8mm;
    background: none;
    color: #000;
    border-top: 1px solid #999;
    font-size: 9pt;
  }
  .pied__haut, .pied nav { display: none; }
  .pied__bas { display: block; border: 0; padding-top: 2mm; }
  .pied a { color: #000; }

  img { max-width: 100%; }
  .encadre, .citation, :is(.prose,.page__body,.legal__body) blockquote {
    border: 1px solid #999;
    border-left-width: 3px;
    background: none;
  }
}


/* ==========================================================================
   11 · IDENTITE 2026 — « on voit qu'on vend des voitures »
   --------------------------------------------------------------------------
   Le premier jet etait sombre, sobre, institutionnel. Defendable sur le
   papier, rate en pratique : ce n'est pas le code visuel du marche, et le
   client l'a vu tout de suite. Cette section repose l'identite :

     · BLANC dominant. Le marine devient un accent de bloc, plus un fond.
     · AMBRE #F2A007 assume comme couleur d'action : boutons, bandes,
       soulignes, panneau « j'achete ». Une couleur qu'on voit de loin.
     · TITRES tres gras, chasse serree, capitales sur les mots-cles, avec des
       bandes de couleur pleine derriere certains mots.
     · RAYONS marques, boutons en pilule.
     · AUCUNE PHOTO : aplats, formes geometriques, typographie et SVG inline.
       Le seul « visuel » du site est la citadine 3D construite en code.

   Cette section ne supprime rien : elle repasse par-dessus les composants des
   sections 06 et 10 en reutilisant leurs tokens. Les 37 pages de contenu
   (page.php, commune.php) gardent exactement les memes classes.
   ========================================================================== */

/* --- 11.0 Pleine largeur des sections d'accueil -------------------------
   La regle `main > *` (section 10.13) contraint tout enfant direct de <main>.
   Les nouvelles sections portent leur propre `.conteneur` interne : elles
   doivent donc reprendre la pleine largeur, sinon les aplats de couleur
   s'arretent avant les bords de l'ecran. */
main > :is(.accroche-split, .formules, .annonces, .promesses, .secteur) {
  max-width: none;
  padding-inline: 0;
}

/* --- 11.1 Boutons : pilule ---------------------------------------------- */
.btn {
  padding: 0.8rem 1.6rem;
  font-weight: 700;
  border-width: 2px;
  border-radius: var(--r-pleine);
}
.btn--principal, .btn--primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--sur-accent);
  box-shadow: var(--ombre-ambre);
}
.btn--principal:hover, .btn--primary:hover {
  background: var(--accent-fort);
  border-color: var(--accent-fort);
  color: var(--sur-accent);
  box-shadow: var(--ombre-ambre);
  transform: translateY(-2px);
}
/* Le secondaire etait bleu plein : deux aplats pleins cote a cote se
   disputaient l'attention et l'ambre perdait. Il redevient un contour. */
.btn--secondaire, .btn--secondary {
  background: var(--surface);
  border-color: var(--bord-fort);
  color: var(--texte);
  box-shadow: none;
}
.btn--secondaire:hover, .btn--secondary:hover {
  background: var(--surface);
  border-color: var(--texte);
  color: var(--texte);
  box-shadow: var(--ombre-sm);
}
.btn--contour { background: transparent; border-color: var(--bord-fort); }
.btn--sm { padding: 0.45rem 1.1rem; }
.btn--lg { min-height: 3.35rem; padding: 1rem 2rem; }
.btn--fantome { border-color: transparent; }

/* --- 11.2 Rythme et titres de section ----------------------------------- */
.sur-titre {
  font-weight: 800;
  color: var(--accent-texte);   /* #8A5B00 : 6,4:1 sur blanc, contrairement a
                                   l'ambre pur qui echoue en petit texte */
}
.formules, .annonces, .promesses, .secteur { padding-block: var(--rythme); }
.formules__title, .annonces__title, .promesses__title, .secteur__title {
  font-size: var(--pas-2xl);
  max-width: 22ch;
  margin: 0;
}

/* Bande de couleur pleine, legerement inclinee, derriere un mot. C'est la
   signature typographique du site : elle remplace l'image qu'on n'a pas. */
.bande {
  display: inline-block;
  padding: 0.06em 0.42em 0.14em;
  transform: rotate(-1.6deg);
  transform-origin: left center;
}
.bande--ambre { background: var(--accent); color: var(--p-ink); }
.bande--marine { background: var(--p-ink); color: #FFF; }
.bande--blanc { background: #FFF; color: var(--p-ink); }

/* --- 11.3 Accroche en deux moitieres ------------------------------------
   « Je vends » sur marine, « j'achete » sur ambre, la citadine 3D a cheval
   sur la couture. Le <h1> reel n'est PAS dans les panneaux : il est dans la
   carte blanche qui remonte dessous — c'est lui le LCP, et il reste du texte
   noir sur blanc, lisible et selectionnable. */
.accroche-split { position: relative; background: var(--surface); }

.portes {
  position: relative;
  display: grid;
  background: var(--surface-inverse);
}

.porte {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--e-3);
  padding: clamp(1.75rem, 5vw, 3rem) var(--gouttiere) clamp(1.75rem, 4vw, 2.5rem);
  min-height: clamp(11rem, 26vw, 15rem);
  text-decoration: none;
  overflow: hidden;
  transition: background-color var(--d-moyen) var(--doux);
}
.porte--vendre { background: var(--surface-inverse); color: #FFF; }
.porte--acheter { background: var(--accent); color: var(--p-ink); }
.porte--vendre:hover { background: #12263C; color: #FFF; }
.porte--acheter:hover { background: #FFAF1F; color: var(--p-ink); }
.porte:focus-visible { outline-offset: -6px; }

.porte__sur {
  font-size: var(--pas-xs);
  font-weight: 800;
  letter-spacing: var(--chasse-sur);
  text-transform: uppercase;
  opacity: 0.72;
}
.porte__label {
  font-family: var(--police-titre);
  font-size: var(--pas-geant);
  font-weight: 800;
  line-height: 1.02;
  letter-spacing: -0.035em;
  text-transform: uppercase;
}
.porte--vendre .bande--ambre { margin-top: 0.12em; }
.porte__note {
  font-size: var(--pas-sm);
  line-height: 1.55;
  max-width: 30ch;
  opacity: 0.86;
}
.porte__cta {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  margin-top: auto;
  padding-top: var(--e-2);
  font-weight: 800;
  font-size: var(--pas-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  border-bottom: 3px solid currentColor;
  padding-bottom: 0.2rem;
}
.porte__cta .ico { transition: transform var(--d-moyen) var(--sortie); }
.porte:hover .porte__cta .ico { transform: translateX(0.3rem); }

/* Le visuel central. En colonne unique il passe en tete, sur son propre fond.
   A partir de 64em il est detache, centre sur la couture des deux panneaux, et
   laisse passer les clics vers les panneaux au-dessous.
   Ce bloc sert AUSSI BIEN a la scene WebGL (desactivee, conservee) qu'a la
   photo qui l'a remplacee : les deux portent .portes__scene, la photo ajoute
   .portes__photo. */
.portes__scene {
  position: relative;
  order: -1;
  min-height: clamp(9rem, 42vw, 13rem);
  background: linear-gradient(180deg, #163158 0%, #0D1B2A 100%);
}

/* --- La photo de l'accroche ----------------------------------------------
   Voir app/views/partials/hero-split.php pour le POURQUOI d'une photo encadree
   plutot qu'une photo en fond de hero.
   Point cle : la photo est un bloc a part, jamais un fond de texte. Les
   libelles des deux panneaux restent poses sur les aplats marine et ambre,
   dont le contraste est garanti AA quelle que soit la photo servie. Changer la
   photo ne peut donc pas casser la lisibilite du hero. */
.portes__photo {
  margin: 0;
  overflow: hidden;
  min-height: 0;
  aspect-ratio: 3 / 2;          /* = le recadrage mobile hero-*-compact */
  background: var(--surface-inverse);
}
.portes__photo picture { display: block; block-size: 100%; }
.portes__photo img {
  display: block;
  inline-size: 100%;
  block-size: 100%;
  /* La hauteur est imposee par le cadre : object-fit evite toute deformation.
     width/height sur le <img> reservent la place avant l'arrivee du CSS. */
  object-fit: cover;
  object-position: center;
}

.accroche {
  position: relative;
  z-index: 3;
  margin-top: clamp(-2rem, -3vw, -1.25rem);
  padding: clamp(1.5rem, 4vw, 2.5rem) clamp(1.25rem, 3.5vw, 2.5rem);
  background: var(--surface);
  border-radius: var(--r-xl);
  box-shadow: var(--ombre-xl);
}
.accroche__sur {
  font-size: var(--pas-xs);
  font-weight: 800;
  letter-spacing: var(--chasse-sur);
  text-transform: uppercase;
  color: var(--accent-texte);
  margin-bottom: var(--e-3);
}
.accroche__titre {
  font-size: var(--pas-3xl);
  line-height: var(--inter-heros);
  max-width: 24ch;
}
.accroche__chapo {
  margin-top: var(--e-4);
  font-size: var(--pas-md);
  line-height: 1.6;
  color: var(--texte-2);
  max-width: 62ch;
}
.accroche__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-3);
  margin-top: var(--e-5);
}
.accroche__preuves {
  display: grid;
  gap: var(--e-3);
  margin: var(--e-5) 0 0;
  padding: var(--e-4) 0 0;
  border-top: 1px solid var(--bord);
  list-style: none;
}
.accroche__preuve {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  font-size: var(--pas-sm);
  font-weight: 700;
  color: var(--texte-2);
}
.accroche__preuve .ico {
  color: var(--accent-fort);
  width: 1.4em;
  height: 1.4em;
  stroke-width: 1.9;
}

@media (min-width: 40em) {
  .accroche__preuves { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--e-4); }
}

@media (min-width: 64em) {
  .portes { grid-template-columns: 1fr 1fr; }
  .porte {
    min-height: clamp(20rem, 30vw, 26rem);
    justify-content: center;
    padding-block: clamp(2.5rem, 5vw, 4rem) clamp(4rem, 7vw, 5.5rem);
  }
  .porte--vendre {
    padding-left: max(var(--gouttiere), (100vw - var(--largeur)) / 2);
    padding-right: 4vw;
  }
  .porte--acheter {
    align-items: flex-end;
    text-align: right;
    padding-right: max(var(--gouttiere), (100vw - var(--largeur)) / 2);
    padding-left: 4vw;
  }
  .porte--acheter .porte__note { margin-left: auto; }
  .porte--acheter .bande { transform-origin: right center; }
  .portes__scene {
    position: absolute;
    order: 0;
    inset: auto 0 1.5rem;
    margin-inline: auto;
    width: min(38rem, 40%);
    height: 82%;
    min-height: 0;
    background: none;
    pointer-events: none;
    z-index: 2;
  }

  /* Entre 64em et 80em la grille est deja en deux colonnes, mais il n'y a pas
     assez de largeur pour poser le cadre sur la couture : pour lui reserver sa
     place il faudrait tellement retrecir la colonne de texte que « MA VOITURE »
     passerait sur deux lignes. La photo reste donc une banniere pleine largeur
     au-dessus des deux panneaux — plus basse qu'en mobile (21/9), pour ne pas
     repousser les deux appels a l'action hors de l'ecran.
     Ces regles viennent APRES .portes__scene a specificite egale : c'est
     l'ordre du fichier qui les fait gagner, ne pas les remonter. */
  .portes__photo {
    position: static;
    order: -1;
    grid-column: 1 / -1;
    inset: auto;
    width: auto;
    height: auto;
    aspect-ratio: 21 / 9;
    border-radius: 0;
    box-shadow: none;
    pointer-events: auto;
  }
  .accroche {
    max-width: var(--largeur);
    margin-inline: auto;
    margin-top: clamp(-4rem, -4vw, -2.5rem);
    padding: clamp(2rem, 3.4vw, 3rem) clamp(2rem, 3.4vw, 3.25rem);
  }
  .accroche__titre { font-size: var(--pas-3xl); }
}

/* --- 11.4 Les trois formules -------------------------------------------- */
.formules { background: var(--surface); }
.formules__list {
  margin-top: clamp(1.75rem, 3.5vw, 2.75rem);
  gap: clamp(1rem, 2vw, 1.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 18rem), 1fr));
}
.formule-card {
  position: relative;
  padding: clamp(1.5rem, 2.6vw, 2rem);
  border: 1px solid var(--bord);
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: none;
  overflow: hidden;
}
/* Liseré ambre en haut de carte : le fil rouge graphique du site. */
.formule-card::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--accent);
}
.formule-card:hover {
  transform: translateY(-4px);
  border-color: var(--bord-fort);
  box-shadow: var(--ombre-lg);
}
.formule-card__rang {
  font-family: var(--police-titre);
  font-size: 2.5rem;
  font-weight: 800;
  line-height: 1;
  letter-spacing: -0.04em;
  color: #EBC489;
}
.formule-card__ico {
  position: absolute;
  top: clamp(1.5rem, 2.6vw, 2rem);
  right: clamp(1.5rem, 2.6vw, 2rem);
  display: grid;
  place-items: center;
  width: 2.9rem;
  height: 2.9rem;
  border-radius: var(--r-pleine);
  background: var(--surface-3);
  color: var(--accent-fort);
}
.formule-card__ico .ico { width: 1.5rem; height: 1.5rem; stroke-width: 1.8; }
.formule-card__title { font-size: var(--pas-lg); max-width: 20ch; }
.formule-card__text {
  color: var(--texte-2);
  font-size: var(--pas-sm);
  line-height: 1.62;
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.formule-card__link {
  color: var(--texte);
  font-weight: 800;
  font-size: var(--pas-sm);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  text-decoration: none;
  border-bottom: 3px solid var(--accent);
  padding-bottom: 0.2rem;
  align-self: flex-start;
}
.formule-card__link .ico { transition: transform var(--d-moyen) var(--sortie); }
.formule-card:hover .formule-card__link .ico { transform: translateX(0.3rem); }

/* --- 11.5 Les annonces --------------------------------------------------
   « Je veux du stylé avec les annonces. » La carte reprend le code du marche :
   grande image (ou silhouette a defaut), prix en pastille ambre a cheval sur
   le bas du visuel, titre en capitales, caracteristiques separees par des
   barres. Elle sert AUSSI la page /voitures-occasion-disponibles, qui utilise
   .vehicule-card : les deux sont stylees ensemble pour rester coherentes. */
.annonces { background: var(--surface-2); }
.annonces__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: clamp(1.5rem, 3vw, 2.5rem);
}
.annonces__entete .sur-titre { margin-bottom: var(--e-2); }
.annonces__list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 19rem), 1fr)); }

.vehicle-teaser, .vehicule-card {
  border: 0;
  border-radius: var(--r-xl);
  background: var(--surface);
  box-shadow: var(--ombre-sm);
}
.vehicle-teaser:hover, .vehicule-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--ombre-lg);
  border-color: transparent;
}
/* La pastille de prix deborde du cadre : la carte de l'accueil ne peut donc
   pas ecreter. Celle de la page stock garde son ecretage (ruban « Vendu »). */
.vehicle-teaser { overflow: visible; padding-bottom: var(--e-5); }
.vehicle-teaser__media { overflow: visible; margin-bottom: var(--e-5); }
.vehicle-teaser__media, .vehicule-card__media {
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
  background: linear-gradient(150deg, #16304f 0%, var(--p-ink) 100%);
}
.vehicle-teaser__media img, .vehicule-card__media img {
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
}
/* Aucune photo : silhouette pleine sur l'aplat marine. Jamais de rectangle
   gris « image manquante ». */
.vehicle-teaser__media--vide {
  display: grid;
  place-items: center;
  padding: 8% 9% 14%;
}
.vehicle-teaser__silhouette {
  width: 94%;
  height: auto;
  color: rgb(255 255 255 / 0.16);
}
/* La pastille de prix mord sur le bas du visuel : c'est elle qu'on voit en
   premier dans une grille d'annonces.
   PORTEE : uniquement .vehicle-teaser (accueil), ou le prix est DANS le cadre
   visuel. Sur vehicules.php, .vehicule-card__price est un frere du titre et du
   resume : le sortir du flux y decrocherait la carte. Cette page a son propre
   agent et sa propre feuille (stock.css) — on ne la touche pas. */
.vehicle-teaser__price {
  position: absolute;
  left: var(--e-4);
  bottom: -1rem;
  z-index: 2;
  margin: 0;
  padding: 0.42rem 1.1rem;
  font-family: var(--police-titre);
  font-size: var(--pas-lg);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--p-ink);
  background: var(--accent);
  border-radius: var(--r-pleine);
  box-shadow: var(--ombre-ambre);
}
/* Sur la page stock, la pastille reste dans le flux : meme vocabulaire
   graphique, sans changer la structure de la carte. */
.vehicule-card__price {
  display: inline-flex;
  align-items: baseline;
  gap: var(--e-2);
  margin: auto var(--e-5) 0;
  padding: 0.35rem 1rem;
  font-family: var(--police-titre);
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--p-ink);
  background: var(--accent);
  border-radius: var(--r-pleine);
  align-self: flex-start;
}
.vehicule-card__price .vehicule-card__price-barre { color: var(--p-ambre-900); }
.vehicle-teaser__title, .vehicule-card__title {
  padding: 0 var(--e-5);
  font-size: var(--pas-md);
  text-transform: uppercase;
  letter-spacing: -0.01em;
}
.vehicle-teaser__meta, .vehicule-card__meta {
  padding: var(--e-2) var(--e-5) 0;
  font-size: var(--pas-sm);
  font-weight: 600;
  color: var(--texte-doux);
}
.vehicle-teaser__meta span, .vehicule-card__meta span { color: var(--bord-fort); padding-inline: 0.15em; }

/* Etat vide dessine : on annonce la couleur au lieu d'afficher un trou. */
.annonces__vide {
  display: grid;
  gap: var(--e-4);
  align-items: start;
  padding: clamp(1.75rem, 4vw, 3rem);
  background: var(--surface);
  border-radius: var(--r-xl);
  border: 2px dashed var(--bord-fort);
}
@media (min-width: 48em) {
  .annonces__vide { grid-template-columns: auto minmax(0, 1fr); gap: var(--e-6); }
}
.annonces__vide-ico {
  display: grid;
  place-items: center;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--r-pleine);
  background: var(--surface-3);
  color: var(--accent-fort);
}
.annonces__vide-ico .ico { width: 1.9rem; height: 1.9rem; }
.annonces__vide-titre { font-size: var(--pas-lg); }
.annonces__vide-texte { margin-top: var(--e-2); color: var(--texte-2); max-width: 56ch; }
.annonces__vide-actions { display: flex; flex-wrap: wrap; gap: var(--e-3); margin-top: var(--e-5); }

/* --- 11.6 Les promesses (bandeau marine) --------------------------------
   Un seul bloc sombre sur toute la page : il fait respirer le blanc au lieu
   de l'ecraser, et il porte les seuls engagements ecrits du site. */
.promesses {
  background:
    radial-gradient(48rem 26rem at 85% -20%, rgb(242 160 7 / 0.16), transparent 62%),
    var(--surface-inverse);
  color: var(--texte-inverse);
}
.promesses__title {
  color: var(--texte-inverse);
  margin-bottom: clamp(1.75rem, 3.5vw, 2.75rem);
}
.promesses__list {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.5rem);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr));
  list-style: none;
  margin: 0;
  padding: 0;
}
.promesse {
  padding: 0;
  border: 0;
  border-radius: 0;
  background: none;
  border-top: 4px solid var(--accent);
  padding-top: var(--e-4);
  color: var(--texte-inverse-2);
  font-size: var(--pas-sm);
}
.promesse__ico {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: var(--e-3);
  border-radius: var(--r-pleine);
  background: rgb(255 255 255 / 0.08);
  color: var(--accent);
}
.promesse__ico .ico { width: 1.6rem; height: 1.6rem; stroke-width: 1.8; }
.promesse__title { color: #FFF; font-size: var(--pas-md); margin-bottom: var(--e-2); }
.promesse__text { color: var(--texte-inverse-2); line-height: 1.62; }

/* --- 11.7 Zone d'intervention ------------------------------------------- */
.secteur { background: var(--surface); }
.secteur__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: clamp(1.5rem, 3vw, 2.25rem);
}
.secteur__entete .sur-titre { margin-bottom: var(--e-2); }
.secteur__puces {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  list-style: none;
  margin: 0;
  padding: 0;
}
.puce {
  display: inline-flex;
  align-items: center;
  min-height: 2.5rem;
  padding: 0.35rem 1rem;
  font-size: var(--pas-sm);
  font-weight: 650;
  color: var(--texte-2);
  text-decoration: none;
  background: var(--surface-2);
  border: 1px solid var(--bord);
  border-radius: var(--r-pleine);
  transition: background-color var(--d-court) var(--net),
              color var(--d-court) var(--net),
              border-color var(--d-court) var(--net);
}
.puce:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--p-ink);
}

/* --- 11.8 En-tete, navigation, pied ------------------------------------- */
.site-entete {
  background: var(--surface);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  border-bottom: 1px solid var(--bord);
}
.site-entete.est-collee { box-shadow: var(--ombre-md); }
/* La baseline de marque passait sur trois lignes a 1440 px et poussait le
   bouton d'appel sur une deuxieme rangee : l'en-tete faisait 150 px de haut.
   L'information est deja dans la barre d'info et dans le pied. */
.entete-barre .marque__suffixe { display: none; }
.nav-mobile__entete .marque__suffixe {
  display: inline-block;
  font-size: var(--pas-sm);
  font-weight: 800;
  color: var(--texte);
}
.barre-info { background: var(--surface-inverse); }
.barre-info a, .barre-info .btn-tel { color: var(--accent); font-weight: 800; text-decoration: none; }
.marque svg { height: 2.4rem; }
.nav-bureau a {
  font-weight: 700;
  border-radius: var(--r-pleine);
}
.nav-bureau a[aria-current="page"] { color: var(--texte); }
.pied { background: var(--surface-inverse); border-top: 5px solid var(--accent); }
.pied__marque { align-content: start; }
.pied__nom { font-size: var(--pas-md); color: var(--texte-inverse); }
/* Zone d'intervention : bandeau pleine largeur, communes enchainees. */
.pied__zone { padding-bottom: clamp(1.5rem, 3vw, 2.25rem); }
.pied__zone > h2 { margin-bottom: var(--e-4); }
.pied__zone > h2 a { color: var(--texte-inverse); min-height: 0; }
.pied__secteur + .pied__secteur { margin-top: var(--e-4); }
.pied__secteur-titre {
  font-size: var(--pas-xs);
  font-weight: 700;
  letter-spacing: var(--chasse-sur);
  text-transform: uppercase;
  color: var(--p-ambre);
  opacity: 0.85;
  margin-bottom: var(--e-1);
}
.pied .pied__communes {
  display: flex;
  flex-wrap: wrap;
  gap: 0 var(--e-4);
}
.pied__communes li { position: relative; }
.pied__communes li + li::before {
  content: "";
  position: absolute;
  left: calc(var(--e-2) * -1);
  top: 50%;
  width: 3px;
  height: 3px;
  border-radius: 50%;
  background: var(--bord-inverse);
  transform: translateY(-50%);
}

/* --- 11.9 Pages de contenu : meme famille, sans rien casser -------------
   page.php et commune.php ne sont pas retouchees. On leur donne seulement le
   meme vocabulaire : liseré ambre sous le titre, sommaire arrondi, CTA en
   pilule. Toutes les classes attendues (CLASSES-ATTENDUES.md) restent en
   place, seules leurs valeurs changent. */
.page__header, .legal__header, .vehicules__header {
  border-bottom: 0;
  padding-bottom: clamp(1rem, 2.5vw, 1.5rem);
}
.page__header::after, .legal__header::after, .vehicules__header::after {
  content: "";
  display: block;
  width: 4.5rem;
  height: 5px;
  margin-top: clamp(1rem, 2.5vw, 1.5rem);
  background: var(--accent);
  border-radius: var(--r-pleine);
}
.page__title, .legal__title, .vehicules__title, .vehicule-fiche__title {
  font-size: var(--pas-2xl);
}
/* Fil d'Ariane : le libelle courant fait 60 caracteres et passe sur deux
   lignes en mobile — le chevron doit rester sur la premiere ligne. */
.breadcrumb__list { align-items: flex-start; }
.breadcrumb__item { align-items: flex-start; }
.breadcrumb__item + .breadcrumb__item::before { margin-top: 0.55em; }

.page__toc, .legal__toc { border-radius: var(--r-lg); background: var(--surface-2); }
.page__toc-link.est-actif, .legal__toc-link.est-actif { border-left-color: var(--accent); }
.related-links__list { border-radius: var(--r-lg); }
.commune-page__banner { border-radius: var(--r-lg); }

/* Le CTA garde son fond marine mais reprend le liseré ambre du reste. */
.cta { border-radius: var(--r-xl); }
.cta::before {
  content: "";
  position: absolute;
  inset: 0 0 auto;
  height: 6px;
  background: var(--accent);
}

/* Le corps redactionnel de l'accueil est un enfant direct de <main> : sans
   cette regle, la colonne de texte se centre dans les 76 rem et ne s'aligne
   plus sur le reste de la page. */
.page__body--accueil {
  max-width: var(--largeur);
  padding-block: clamp(2rem, 5vw, 3.5rem);
}
.page__body--accueil > :is(p, ul, ol, h2, h3, h4, blockquote, details) {
  max-width: var(--mesure);
}

/* Sans JavaScript, le tiroir mobile reste `visibility: hidden` et le
   telephone n'a plus AUCUNE navigation. On remet alors la barre de liens en
   ligne : moins joli, mais le site reste utilisable. */
@media (scripting: none) {
  .nav-bascule { display: none; }
  .nav-bureau { display: block; }
  .nav-bureau ul { flex-wrap: wrap; justify-content: flex-end; }
  .entete-barre { row-gap: var(--e-3); }
}

/* --- 11.9bis Visuels absents -------------------------------------------
   Le site n'a AUCUNE photo livree : les pages communes pointent vers des
   .webp qui n'existent pas encore. app.js (section 9) marque le cadre en
   .media-absent des que le chargement echoue. Plutot qu'un rectangle casse,
   on affiche un aplat marine avec la silhouette de la citadine et le texte
   alternatif — c'est-a-dire l'information, sans faire semblant d'avoir une
   photo. La silhouette est un SVG en data: URI (autorise par la CSP :
   img-src 'self' data:), donc aucune requete reseau. */
/* Le reset pose `img { display: block }` : une regle d'auteur bat toujours la
   feuille du navigateur, donc `hidden` restait sans effet sur les images. */
img[hidden], [hidden] { display: none; }

.media-absent {
  position: relative;
  display: grid;
  place-items: center;
  gap: var(--e-3);
  width: 100%;
  aspect-ratio: 16 / 9;
  min-height: 11rem;
  max-height: min(45svh, 22rem);
  padding: clamp(1.25rem, 4vw, 2.5rem);
  overflow: hidden;
  border: 0;
  border-radius: var(--r-lg);
  background: linear-gradient(150deg, #16304f 0%, var(--p-ink) 100%);
  text-align: center;
}
.media-absent::before {
  content: "";
  position: absolute;
  inset: 12% 14%;
  opacity: 0.14;
  background: center / contain no-repeat
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 240 100'%3E%3Cpath fill='%23ffffff' d='M14 68c-3 0-5-2-5-5v-8c0-5 3-8 8-9l36-8 21-23c5-6 11-8 18-8h56c8 0 14 2 19 8l19 22 26 6c6 2 9 5 9 11v9c0 3-2 5-5 5h-17a24 24 0 0 0-48 0H86a24 24 0 0 0-48 0H14Z'/%3E%3Ccircle cx='62' cy='70' r='20' fill='%23ffffff'/%3E%3Ccircle cx='178' cy='70' r='20' fill='%23ffffff'/%3E%3C/svg%3E");
}
.media-absent::after {
  content: attr(data-alt);
  position: relative;
  max-width: 46ch;
  font-size: var(--pas-sm);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.66);
}
/* Quand la figure porte deja une legende, elle dit la meme chose que le texte
   alternatif : on ne l'ecrit pas deux fois. */
.media-absent:has(figcaption)::after { content: none; }
.media-absent figcaption {
  position: relative;
  max-width: 46ch;
  margin: 0;
  font-size: var(--pas-sm);
  line-height: 1.55;
  color: rgb(255 255 255 / 0.72);
}
.vehicle-teaser__media.media-absent,
.vehicule-card__media.media-absent {
  aspect-ratio: 4 / 3;
  border-radius: var(--r-xl) var(--r-xl) var(--r-lg) var(--r-lg);
}
.vehicle-teaser__media.media-absent::after,
.vehicule-card__media.media-absent::after { content: none; }

/* --- 11.10 Reveal ------------------------------------------------------- */
[data-reveal] { will-change: transform; }

/* --- 11.11 Garde-fous mobile -------------------------------------------
   Le client a insiste : « full mobile et fluide ». Deux regles qui evitent
   99 % des debordements horizontaux sur un site sans build. */
.porte__label, .accroche__titre, .promesses__title, .formules__title,
.annonces__title, .secteur__title { overflow-wrap: anywhere; }

@media (max-width: 25em) {
  .porte__label { font-size: 1.6rem; }
  .btn { padding-inline: 1.15rem; }
}

/* =============================================================================
 * 11 · Bouton d'appel flottant
 * -----------------------------------------------------------------------------
 * Present sur toutes les pages (partials/appel-flottant.php, inclus depuis le
 * pied de page). Sur ce metier une grande part des contacts passe par le
 * telephone : le bouton doit etre atteignable a tout moment, surtout au mobile.
 * ============================================================================= */

.appel-flottant {
  position: fixed;
  right: clamp(0.75rem, 3vw, 1.5rem);
  bottom: clamp(0.75rem, 3vw, 1.5rem);
  z-index: 900;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.75rem 1.15rem;
  border-radius: 999px;
  background: var(--ink, #0D1B2A);
  color: #fff;
  text-decoration: none;
  font-weight: 700;
  line-height: 1.15;
  box-shadow: 0 0.5rem 1.5rem rgb(13 27 42 / 0.28);
  transition: transform .18s cubic-bezier(.16,1,.3,1), box-shadow .18s, background-color .18s;
}

.appel-flottant:hover,
.appel-flottant:focus-visible {
  background: var(--bleu, #1B4F9C);
  transform: translateY(-2px);
  box-shadow: 0 0.75rem 2rem rgb(13 27 42 / 0.34);
}

.appel-flottant:focus-visible {
  outline: 3px solid var(--ambre, #F2A007);
  outline-offset: 3px;
}

.appel-flottant__icone {
  display: grid;
  place-items: center;
  width: 2rem; height: 2rem;
  border-radius: 50%;
  background: var(--ambre, #F2A007);
  color: var(--ink, #0D1B2A);
  flex: none;
}

.appel-flottant__texte { display: flex; flex-direction: column; }
.appel-flottant__libelle {
  font-size: 0.7rem; font-weight: 600; letter-spacing: .08em;
  text-transform: uppercase; opacity: .72;
}
.appel-flottant__numero { font-size: 0.98rem; white-space: nowrap; }

/* Sous 30em le numero prend trop de place : on garde la pastille seule,
   la cible tactile reste bien au-dessus des 44px recommandes. */
@media (max-width: 30em) {
  .appel-flottant { padding: 0.6rem; gap: 0; }
  .appel-flottant__texte {
    position: absolute; width: 1px; height: 1px;
    overflow: hidden; clip-path: inset(50%); white-space: nowrap;
  }
  .appel-flottant__icone { width: 2.4rem; height: 2.4rem; }
}

/* A l'impression, un bouton flottant n'a aucun sens. */
@media print { .appel-flottant { display: none; } }

@media (prefers-reduced-motion: reduce) {
  .appel-flottant { transition: none; }
  .appel-flottant:hover, .appel-flottant:focus-visible { transform: none; }
}

/* --- Appel a la recherche personnalisee (accueil) --------------------------
 *
 * Place juste apres le bloc stock : le visiteur vient de parcourir les voitures
 * disponibles sans trouver la sienne. Contraste volontaire avec les sections
 * voisines (fond plein) pour que le bloc se detache sans crier.
 */

.recherche-appel {
    padding: clamp(2.5rem, 6vw, 4rem) 0;
    background: var(--p-encre, #16202E);
    color: #fff;
}

.recherche-appel__contenu {
    max-width: 64ch;
}

.recherche-appel__titre {
    margin: 0 0 .75rem;
    color: #fff;
    font-size: clamp(1.4rem, 3.5vw, 2rem);
}

.recherche-appel__texte {
    margin: 0 0 .75rem;
    line-height: 1.65;
    color: rgba(255, 255, 255, .88);
}

.recherche-appel__gratuit {
    display: inline-block;
    margin: 0 0 1.5rem;
    padding: .4rem .85rem;
    border-radius: 999px;
    background: rgba(255, 255, 255, .12);
    font-size: .9rem;
    font-weight: 600;
}

.recherche-appel__cta {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    padding: .85rem 1.8rem;
    border-radius: 8px;
    font-weight: 700;
    text-decoration: none;
}

@media (max-width: 640px) {
    .recherche-appel__cta {
        width: 100%;
    }
}

/* ==========================================================================
   AJOUT — Reperes de la fiche vehicule + visionneuse plein ecran
   Bloc ajoute en fin de fichier : aucune regle au-dessus n'est modifiee.
   ========================================================================== */

/* --- Rangee de reperes sous le titre de la fiche ------------------------- */
.vehicule-reperes {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-3);
  margin: var(--e-4) 0 0;
  padding: 0;
  list-style: none;
}

.vehicule-repere {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.25rem;
  padding: 0.35rem 0.9rem;
  border: 1px solid var(--bord);
  border-radius: var(--r-pleine);
  background: var(--surface-2);
  color: var(--texte);
  font-size: var(--pas-sm);
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
}

.vehicule-repere .carac__icone {
  flex: none;
  width: 1.15rem;
  height: 1.15rem;
  color: var(--marque);
}

.vehicule-repere__valeur { font-variant-numeric: tabular-nums; }

/* --- Bouton pose sur la grande photo ------------------------------------- */
/* Sans JavaScript c'est une ancre vers la bande de vignettes : jamais un
   bouton mort. Le fond fonce garantit le contraste quelle que soit la photo. */
.vehicule-galerie__voir-tout {
  position: absolute;
  inset-block-end: var(--e-3);
  inset-inline-end: var(--e-3);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 2.5rem;
  padding: 0.5rem 0.95rem;
  border: 1px solid rgb(255 255 255 / 0.3);
  border-radius: var(--r-pleine);
  background: rgb(13 27 42 / 0.78);
  color: #FFFFFF;
  font-size: var(--pas-sm);
  font-weight: 600;
  text-decoration: none;
  box-shadow: var(--ombre-md);
  transition: background var(--d-court) var(--net), border-color var(--d-court) var(--net);
}

.vehicule-galerie__voir-tout:hover,
.vehicule-galerie__voir-tout:focus-visible {
  background: rgb(13 27 42 / 0.94);
  border-color: rgb(255 255 255 / 0.55);
  color: #FFFFFF;
}

.vehicule-galerie__voir-tout:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.vehicule-galerie__ico {
  flex: none;
  width: 1.05rem;
  height: 1.05rem;
}

@media (max-width: 30em) {
  .vehicule-galerie__voir-tout {
    inset-inline: var(--e-3);
    justify-content: center;
  }
}

/* --- Visionneuse plein ecran (construite par assets/js/galerie.js) -------- */
.visionneuse[hidden] { display: none; }

.visionneuse {
  position: fixed;
  inset: 0;
  /* Au-dessus de --z-tiroir (200) : le menu mobile ne doit jamais passer devant. */
  z-index: 300;
}

/* Fond opaque et non translucide : a 0,96 le titre de la page restait lisible
   derriere la photo — dans les tons sombres, 4 % de blanc suffisent a trahir le
   texte. Une visionneuse doit isoler la photo, pas la superposer. */
.visionneuse__voile {
  position: absolute;
  inset: 0;
  background: #0B1420;
}

/* inset:0 + largeur plafonnee + marges auto, plutot qu'une grille centrante :
   une piste de grille auto qui contient un enfant en height:100% est circulaire,
   le cadre debordait alors la fenetre et la photo sortait par le bas. */
.visionneuse__cadre {
  position: absolute;
  inset: 0;
  z-index: 1;
  margin-inline: auto;
  width: min(100%, 82rem);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--e-3);
  padding: 4.25rem var(--e-4) var(--e-5);
}

.visionneuse__scene {
  position: relative;
  height: 100%;
  min-height: 0;
}

/* display:contents : le <picture> clone disparait de la mise en page et l'<img>
   devient enfant direct de la scene. Combine au positionnement absolu ci-dessous,
   plus aucun pourcentage ne se resout contre une hauteur auto — la photo est
   cadree par la scene, quelles que soient ses proportions. */
.visionneuse__scene picture { display: contents; }

.visionneuse__img {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  border-radius: var(--r-md);
}

.visionneuse__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--cible);
  height: var(--cible);
  padding: 0;
  border: 1px solid rgb(255 255 255 / 0.28);
  border-radius: var(--r-pleine);
  background: rgb(255 255 255 / 0.10);
  color: #FFFFFF;
  cursor: pointer;
  transition: background var(--d-court) var(--net), border-color var(--d-court) var(--net);
}

.visionneuse__btn:hover {
  background: rgb(255 255 255 / 0.24);
  border-color: rgb(255 255 255 / 0.55);
}

.visionneuse__btn:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
}

.visionneuse__ico {
  width: 1.4rem;
  height: 1.4rem;
}

.visionneuse__fermer {
  position: absolute;
  inset-block-start: var(--e-4);
  inset-inline-end: var(--e-4);
  z-index: 2;
}

.visionneuse__compteur {
  position: absolute;
  inset-block-start: var(--e-4);
  inset-inline-start: 50%;
  translate: -50% 0;
  margin: 0;
  padding: 0.35rem 0.95rem;
  border-radius: var(--r-pleine);
  background: rgb(255 255 255 / 0.12);
  color: #FFFFFF;
  font-size: var(--pas-sm);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
}

/* La page reste chargee derriere le voile : on bloque son defilement, sinon la
   molette fait bouger le fond au lieu de ne rien faire. */
html.visionneuse-active,
html.visionneuse-active body { overflow: hidden; }

@media (max-width: 40em) {
  .visionneuse__cadre {
    grid-template-columns: minmax(0, 1fr);
    padding: 4.25rem var(--e-3) 5.5rem;
  }

  /* Les fleches sortent du flux et passent sous la photo : sur un ecran etroit
     elles mangeraient sinon la moitie de la largeur utile. */
  .visionneuse__nav {
    position: absolute;
    inset-block-end: var(--e-5);
    z-index: 2;
  }

  .visionneuse__nav--prec { inset-inline-start: var(--e-5); }
  .visionneuse__nav--suiv { inset-inline-end: var(--e-5); }
}

@media (prefers-reduced-motion: reduce) {
  .vehicule-galerie__voir-tout,
  .visionneuse__btn { transition: none; }
}

/* ---------------------------------------------------------------------------
   REPERES DES CARTES (stock + accueil)
   Le texte « 2019 · 45 200 km · Essence · Manuelle » est devenu une liste a
   icones : sur une grille de cartes, l'oeil repere une pastille bien avant de
   lire une chaine separee par des points medians.
   Les deux blocs partagent tout sauf leur nom de classe — d'ou le selecteur
   groupe, aligne sur la convention deja en place plus haut dans ce fichier.
--------------------------------------------------------------------------- */
.vehicle-teaser__meta, .vehicule-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2) var(--e-4);
  /* Une <ul> porte puces et retrait par defaut : ici c'est une liste de
     donnees, pas une enumeration a puces. */
  list-style: none;
  margin: 0;
}
.vehicle-teaser__meta-item, .vehicule-card__meta-item {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  white-space: nowrap;
}
.vehicle-teaser__meta-icone, .vehicule-card__meta-icone {
  flex: none;
  width: 1rem;
  height: 1rem;
  color: var(--accent, var(--bord-fort));
}

/* Repli quand aucune coordonnee n'est encore saisie dans les reglages. */
.pied__contact-repli { margin-top: var(--e-4); }

/* Logo depose par le client (reglage LOGO).
   On pilote la HAUTEUR, jamais la largeur : le logo d'origine du site etait un
   bandeau horizontal, celui du client est un ecusson presque carre. A largeur
   egale, l'ecusson depasserait de la barre ; a hauteur egale, les deux tiennent.
   Trois paliers plutot qu'une valeur libre, parce que la CSP a nonce du site
   ignore les style="" en attribut : seule une classe s'applique vraiment. */
.marque .marque__logo { display: block; width: auto; height: 3.25rem; max-width: 100%; }
.marque .marque__logo--petit { height: 2.5rem; }
.marque .marque__logo--grand { height: 4.5rem; }
/* La barre suit le logo : sinon il deborde sur le contenu de la page. */
.entete-barre:has(.marque__logo--grand) { min-height: 5.25rem; }

/* ==========================================================================
   EN-TETE — tenir sur UNE ligne
   Constate en production : marque (181 px) + 8 rubriques (1019 px) + bouton
   (184 px) = 1384 px pour 1216 px disponibles a 1440 px de large. Le flex-wrap
   empilait donc les trois sur TROIS lignes, l'en-tete montait a 151 px de haut
   et le bouton orange se retrouvait seul sous le menu, comme pose la par erreur.
   On resserre la barre de navigation pour recuperer les ~200 px manquants.
   ========================================================================== */
@media (min-width: 64em) {
  /* nowrap : sans lui, la barre continuait de rejeter le bouton sur une
     deuxieme ligne des que la largeur PREFEREE de la navigation depassait la
     place restante — meme quand sa largeur REELLE, une fois comprimee, tenait
     largement. Le bouton se retrouvait seul sous le menu, comme oublie la.
     Avec nowrap, c'est la navigation qui cede quelques pixels, pas la mise en
     page qui s'effondre. */
  .entete-barre { flex-wrap: nowrap; }
  .nav-bureau { min-width: 0; }
  .entete-barre .btn--principal { flex: none; }
  /* Liens moins espaces : le padding lateral etait de 12 px de chaque cote,
     soit 24 px par rubrique — 192 px rien qu'en air sur huit rubriques. */
  .nav-bureau a { padding-inline: var(--e-2); font-size: var(--pas-xs, 0.8125rem); }
  .nav-bureau ul { gap: 0; }
  /* Le bouton d'appel a l'action n'a pas besoin de la meme corpulence que dans
     le corps de page : dans une barre, il doit rester lisible sans dominer. */
  .entete-barre .btn--principal { padding-inline: var(--e-4); font-size: var(--pas-sm); }
}
/* Au-dela de 100 em l'espace revient : on rend leur aisance aux rubriques. */
@media (min-width: 100em) {
  .nav-bureau a { padding-inline: var(--e-3); font-size: var(--pas-sm); }
  .nav-bureau ul { gap: var(--e-1); }
}

/* Bandeau « Vendu » / « Reserve » sur les cartes de l'accueil.
   Le cadre d'ecretage est un calque distinct : le media de la carte est en
   overflow:visible (la pastille de prix deborde volontairement du cadre), donc
   ecreter le media entier ferait disparaitre le prix. */
.vehicle-teaser__ruban-cadre {
  position: absolute;
  inset: 0;
  overflow: hidden;
  border-radius: inherit;
  pointer-events: none;
  z-index: 2;
}
.vehicle-teaser__media { position: relative; }
/* Reserve : meme forme, couleur d'attente plutot que couleur de fin. */
.vehicule-card__ruban--reserve { background: var(--accent, #F2A007); color: #0D1B2A; }
/* Photo grisee, comme sur la page stock : l'information doit se lire d'un
   coup d'oeil, sans avoir a chercher le bandeau. */
.vehicle-teaser--vendu .vehicle-teaser__media img { filter: saturate(.35) brightness(.92); }