/* ==========================================================================
   Oui Oui Car's — lot VÉHICULES, v5 « nuit seule » (4 octobre 2026, SPEC-V5 §1 bis)
   Catalogue automobile premium (/vehicules/), fiche véhicule, concessions partenaires.
   Un seul thème, sombre : surfaces étagées (sol --noir, bandes intercalaires, cartes --noir-2, reliefs --noir-3),
   filets crème très fins, texte crème, vert signal réservé aux états actifs. Vraies photos (la voiture-école dans
   Marseille) en en-tête, la voiture dans le tiers droit et le texte sur le noir de gauche ; la photo de la
   concession dès qu'elle existe, sinon un repli de studio compact (catégorie, nuancier de la teinte), sans redire
   marque ni modèle. L'agence, sur le plan, est le symbole de la marque (logo B « le rond-point »). Bleu réservé
   aux liens d'assurance partenaires, en version sobre (texte et filets, jamais d'aplat).
   Couleurs : jetons de tokens.css uniquement (teintes dérivées par color-mix). Mouvement : fondus courts, coupés
   en mode calme et en mouvement réduit.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. Variables locales et défilement (le focus ne passe jamais sous la barre collante)
   -------------------------------------------------------------------------- */
:root {
  --h-barre-catalogue: 68px;
  /* Surfaces étagées du lot = celles du socle (tokens.css v5), avec un repli dérivé de la palette.
     Cartes : --surface de la zone (--surface-2). Contrastes vérifiés : crème ≥ 13,6:1, texte secondaire ≥ 4,6:1. */
  --vh-sol: var(--surface-0, var(--noir));                                              /* page, en-têtes, sections */
  --vh-bande: var(--surface-1, color-mix(in srgb, var(--noir) 55%, var(--noir-2)));     /* sections intercalaires, panneau des filtres */
  --vh-releve: var(--surface-3, var(--noir-3));                                         /* pistes, reliefs */
  --vh-filet: var(--filet, var(--creme-a06));                                           /* filet de séparation très fin */
  --vh-arete: inset 0 1px 0 var(--creme-a06);                                           /* arête lumineuse en haut des cartes */
  --vh-portee: 0 28px 56px -30px var(--noir-a60), 0 2px 6px -2px var(--noir-a40);
  /* Lien d'assurance partenaire en texte sur sombre : le bleu réservé, éclairci (≥ 6,3:1 sur toutes les surfaces) */
  --bleu-texte: var(--bleu-sortie-texte, color-mix(in srgb, var(--bleu-sortie) 50%, var(--blanc)));
}
@media screen { html:is([data-page="vehicules"], [data-page="concessions"]) { color-scheme: dark; background-color: var(--vh-sol); } }
/* Bande intercalaire (fiche : caractéristiques, « Chez le même partenaire ») : une marche au-dessus du sol */
.vh-bande { --fond: var(--vh-bande); background-color: var(--fond); border-block: 1px solid var(--vh-filet); }
html[data-page="vehicules"]:has(.catalogue__barre) { scroll-padding-top: calc(var(--h-entete) + var(--h-barre-catalogue) + var(--s-4)); }

.squelette {
  display: inline-block;
  min-width: 4ch;
  border-radius: var(--r-petit);
  background: var(--trait);
  color: transparent !important;
  user-select: none;
}
.squelette--bouton { display: block; width: 100%; max-width: 240px; height: 52px; border-radius: var(--r-bouton); }
.squelette--sortie { display: block; width: 100%; height: 64px; border-radius: var(--r-bouton); }
.squelette--titre { display: block; width: 70%; height: 26px; }
.squelette--court { width: 40%; }
html[data-js="0"] :is(.vehicules-grille, .catalogue__barre, .catalogue__cote, .fiche-haut__grille, .vehicules-tete__chiffres, .plan, .concessions) { display: none; }
.catalogue__sans-js { display: none; }
html[data-js="0"] .catalogue__sans-js { display: block; max-width: 60ch; padding: var(--s-5) 0; color: var(--texte-2); }

/* --------------------------------------------------------------------------
   1. En-têtes photographiques « vitrine » (/vehicules/, /concessions/, bandeau vers les concessions)
   Ordinateur : la photo occupe la droite, la voiture reste dans le tiers droit ; le texte (34 rem au plus) est posé
   sur le noir de gauche, jamais sur la carrosserie. Mobile et tablette : la photo en bandeau, le texte dessous.
   -------------------------------------------------------------------------- */
.tete-vitrine .tete-photo__media, .bandeau-photo__media { --focal: 50% 60%; }
/* Points focaux mesurés pour que la voiture tienne dans la partie claire de la photo, de 1024 à 1920 px */
.vehicules-tete .tete-photo__media { --focal: 50% 62%; }
.concessions-tete .tete-photo__media, .bandeau-photo__media { --focal: 14% 60%; }
/* Le voile est porté par le cadre de la photo : fondu vers le noir à gauche (texte) et en haut (navigation) */
:is(.tete-vitrine .tete-photo__media, .bandeau-photo__media)::after { content: ""; position: absolute; inset: 0; pointer-events: none; }
/* Le léger rapprochement d'ouverture (échelle 1,06 → 1) reste dans le cadre : jamais d'arête de photo hors du voile */
:is(.tete-vitrine .tete-photo__media, .bandeau-photo__media) { overflow: hidden; }

/* Légende de la photo : capsule fumée (lisible sur les reflets de la chaussée, quelle que soit l'image) */
:is(.tete-vitrine .tete-photo__legende, .bandeau-photo__legende) {
  max-width: none;
  padding: 3px 10px;
  border-radius: var(--r-capsule);
  background: var(--asphalte-a70);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  color: var(--blanc-chaud);
  white-space: nowrap;
}
/* Contour sur photo : fond fumé (même traitement que le héros de l'accueil) */
:is(.tete-vitrine, .bandeau-photo) .btn--secondaire {
  --btn-fond: var(--asphalte-a45); --btn-bord: var(--creme-a70); --btn-texte: var(--blanc-chaud);
  -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
}
:is(.tete-vitrine, .bandeau-photo) .btn--secondaire:hover { --btn-fond: var(--asphalte-a70); --btn-bord: var(--blanc-chaud); }

@media (min-width: 1200px) {
  .tete-vitrine, .bandeau-photo {
    --col-texte: min(34rem, 42vw);
    /* Bord gauche du .conteneur, en % de la section (left) et en vw (hauteur du cadre) */
    --debut-texte: max(var(--gouttiere), (100% - var(--largeur-max)) / 2);
    --debut-texte-vw: max(var(--gouttiere), (100vw - var(--largeur-max)) / 2);
  }
  .tete-vitrine { min-height: clamp(560px, 74svh, 760px); }
  /* Le cadre de la photo commence sous la fin de la colonne de texte (34 rem) et garde un rapport d'au plus
     1,3 : la voiture n'est jamais assez grande pour revenir sous le texte. Il s'appuie en bas de la section. */
  :is(.tete-vitrine .tete-photo__media, .bandeau-photo__media) {
    inset: auto 0 0 calc(var(--debut-texte) + var(--col-texte) - 4rem);
    height: min(100%, (100vw - var(--debut-texte-vw) - var(--col-texte) + 4rem) / 1.3);
  }
  :is(.tete-vitrine .tete-photo__media, .bandeau-photo__media)::after {
    background:
      linear-gradient(90deg, var(--noir) 0, var(--noir) 1.5rem, color-mix(in srgb, var(--noir) 86%, transparent) 4rem, color-mix(in srgb, var(--noir) 62%, transparent) 6.5rem, color-mix(in srgb, var(--noir) 34%, transparent) 9.5rem, color-mix(in srgb, var(--noir) 12%, transparent) 12.5rem, transparent 15rem),
      linear-gradient(to bottom, var(--noir) 0, color-mix(in srgb, var(--noir) 55%, transparent) 9%, transparent 30%),
      /* Nuit seule : la photo se fond aussi dans la section suivante, sans arête nette */
      linear-gradient(to top, var(--noir) 0, color-mix(in srgb, var(--noir) 45%, transparent) 9%, transparent 24%);
  }
  .tete-vitrine::after { background: linear-gradient(to top, var(--noir-a40) 0%, transparent 20%); }
  .tete-vitrine .tete-photo__contenu > * { max-width: var(--col-texte); }
  .tete-vitrine .tete-photo__titre { font-size: clamp(44px, 1rem + 3.3vw, 72px); line-height: 1; text-wrap: balance; }
  .tete-vitrine .vehicules-tete__chiffres { gap: var(--s-3) var(--s-6); }
}

@media (max-width: 1199.98px) {
  .tete-vitrine, .bandeau-photo { --bande: clamp(260px, 72vw, 520px); }
  .tete-vitrine {
    align-items: start;
    min-height: 0;
    padding-top: calc(var(--bande) - var(--s-5));
  }
  :is(.tete-vitrine .tete-photo__media, .bandeau-photo__media) { inset: 0 0 auto; height: var(--bande); }
  :is(.tete-vitrine .tete-photo__media, .bandeau-photo__media)::after {
    background: linear-gradient(to bottom, var(--noir-a60) 0, transparent calc(var(--h-entete) + 24px), transparent 58%, color-mix(in srgb, var(--noir) 70%, transparent) 84%, var(--noir) 100%);
  }
  .tete-vitrine::after { background: none; }
  .tete-vitrine .tete-photo__legende { top: calc(var(--bande) - 30px); bottom: auto; }
  .vehicules-tete .tete-photo__media { --focal: 56% 60%; }
  .concessions-tete .tete-photo__media, .bandeau-photo__media { --focal: 46% 60%; }
}

.vehicules-tete__chiffres {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-3) var(--s-7);
  margin: var(--s-4) 0 0;
  padding-top: var(--s-5);
  border-top: 1px solid var(--creme-a20);
  width: 100%;
  max-width: 640px;
}
.vehicules-tete__chiffres > div { display: grid; gap: 2px; }
.vehicules-tete__chiffres dt { order: 2; font-size: var(--fs-s); color: var(--creme-a70); }
.vehicules-tete__chiffres dd {
  order: 1;
  margin: 0;
  font-size: clamp(28px, 1.2rem + 1.4vw, 40px);
  line-height: 1.05;
  font-stretch: var(--largeur-titre);
  color: var(--blanc-chaud);
}
@media (max-width: 599.98px) {
  .vehicules-tete__chiffres { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: var(--s-3) var(--s-4); }
  .vehicules-tete__chiffres dt { font-size: 12.5px; line-height: 1.35; }
  .vehicules-tete .tete-photo__actions .btn--secondaire { display: none; }
}

/* --------------------------------------------------------------------------
   2. Le catalogue : barre collante, colonne des filtres, grille
   -------------------------------------------------------------------------- */
/* Ancre #catalogue : le scroll-padding de <html> compte déjà l'en-tête ET la barre collante ; la section, elle,
   doit s'arrêter juste sous l'en-tête (sa barre en tête). */
.catalogue { position: relative; padding-bottom: clamp(64px, 8vw, 120px); scroll-margin-top: calc(-1 * (var(--h-barre-catalogue) + var(--s-4))); }
.catalogue__barre {
  position: sticky;
  top: calc(var(--h-entete) + env(safe-area-inset-top, 0px));
  z-index: 5;
  background: color-mix(in srgb, var(--fond) 90%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
  backdrop-filter: blur(14px) saturate(1.1);
  border-block: 1px solid var(--vh-filet);
}
.catalogue__rail {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s-2) var(--s-4);
  min-height: 68px;
  padding-block: 10px;
}
.catalogue__ouvrir { flex: none; }
.catalogue__ouvrir[data-actifs]:not([data-actifs="0"]) { border-color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte); }
.catalogue__compte {
  display: flex;
  align-items: baseline;
  gap: 6px;
  margin: 0 auto 0 0;
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: 1.2;
}
.catalogue__compte-chiffre { font-size: 1.25em; font-stretch: var(--largeur-titre); }
.catalogue__tri { display: flex; align-items: center; gap: 10px; }
.catalogue__tri-label { font-size: var(--fs-s); color: var(--texte-2); white-space: nowrap; }
.catalogue__tri-choix.controle { width: auto; min-width: 230px; min-height: 44px; padding-block: 8px; font-size: 15px; }
.catalogue__partager-court { display: none; }
@media (max-width: 1023.98px) {
  .catalogue__partager-long { display: none; }
  .catalogue__partager-court { display: inline; }
}
@media (max-width: 419.98px) {
  .catalogue__partager span { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .catalogue__partager { width: 44px; padding: 0; }
}
/* 320 px : filtres, compte et partage tiennent sur une ligne */
@media (max-width: 359.98px) {
  .catalogue__rail { gap: var(--s-2); }
  .catalogue__compte { font-size: 17px; }
}
@media (min-width: 1024px) { .catalogue__ouvrir { display: none; } }

.catalogue__corps { display: grid; gap: var(--s-6); padding-top: var(--s-6); }
.catalogue__cote { display: none; }
.catalogue__zone { min-width: 0; display: grid; align-content: start; gap: var(--s-5); }
@media (min-width: 1024px) {
  .catalogue__corps { grid-template-columns: 288px minmax(0, 1fr); gap: var(--s-6); padding-top: var(--s-7); }
  .catalogue__cote { display: block; }
  /* Les filtres sur un panneau (une marche au-dessus du sol), comme une console */
  .catalogue__cote .filtres {
    padding: var(--s-5) var(--s-5) var(--s-2);
    border: 1px solid var(--vh-filet);
    border-radius: var(--r-carte);
    background: var(--vh-bande);
    box-shadow: var(--vh-arete);
  }
}
@media (min-width: 1280px) { .catalogue__corps { grid-template-columns: 312px minmax(0, 1fr); gap: var(--s-7); } }

/* --------------------------------------------------------------------------
   3. Filtres
   -------------------------------------------------------------------------- */
.filtres { display: grid; gap: 0; }
.filtres__tete {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-3);
  padding-bottom: var(--s-4);
}
.filtres__titre { font-size: var(--fs-l); line-height: 1.2; font-weight: 650; letter-spacing: -.005em; }
.filtres__effacer {
  min-height: 44px;
  padding: 0 4px;
  color: var(--texte-2);
  font-size: var(--fs-s);
  font-weight: 600;
  text-decoration: underline;
  text-underline-offset: .22em;
}
.filtres__effacer:hover { color: var(--texte); }
.feuille .filtres__tete { display: none; }

.filtre { margin: 0; padding: var(--s-5) 0; border: 0; border-top: 1px solid var(--trait); min-width: 0; }
.filtre__titre {
  float: left;
  width: 100%;
  margin-bottom: var(--s-3);
  padding: 0;
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: 15px;
  line-height: 1.3;
  color: var(--texte);
}
.filtre__titre + * { clear: both; }
.filtre__aide { margin-top: var(--s-2); font-size: var(--fs-mention); line-height: 1.5; color: var(--texte-2); }

/* Bascule « Premier volant » (interrupteur, role="switch") */
.bascule { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--s-4); cursor: pointer; }
.bascule__texte { display: grid; gap: 4px; }
.bascule__titre { font-family: var(--police-affichage); font-weight: 600; font-size: 15px; line-height: 1.3; }
.bascule__aide { font-size: var(--fs-mention); line-height: 1.5; color: var(--texte-2); }
.bascule__case {
  appearance: none;
  flex: none;
  position: relative;
  width: 46px;
  height: 28px;
  margin: 0;
  border-radius: var(--r-capsule);
  background: var(--trait);
  box-shadow: inset 0 0 0 1.5px var(--texte-2);
  cursor: pointer;
  transition: background-color var(--d-court) var(--e-douce), box-shadow var(--d-court) var(--e-douce);
}
.bascule__case::after {
  content: "";
  position: absolute;
  top: 4px;
  left: 4px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--texte-2);
  transition: transform var(--d-moyen) var(--e-cinema), background-color var(--d-court) var(--e-douce);
}
.bascule__case:checked { background: var(--vert-signal); box-shadow: inset 0 0 0 1.5px var(--vert-signal); }
.bascule__case:checked::after { transform: translateX(18px); background: var(--noir); }
.bascule__case:focus-visible { outline: 2px solid var(--anneau); outline-offset: 3px; }
/* La cible tactile fait 44 px de haut grâce au libellé ; le contrôle reste lisible. */
.bascule { min-height: 44px; }

/* Contrôle segmenté */
.segments {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(min-content, 1fr);
  gap: 2px;
  padding: 3px;
  border-radius: var(--r-bouton);
  background: var(--survol);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.segment { position: relative; display: block; min-width: 0; }
.segment input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.segment span {
  display: grid;
  place-items: center;
  min-height: 40px;
  padding: 4px 8px;
  border-radius: calc(var(--r-bouton) - 2px);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  color: var(--texte-2);
  transition: background-color var(--d-court) var(--e-douce), color var(--d-court) var(--e-douce), box-shadow var(--d-court) var(--e-douce);
  pointer-events: none;
}
.segment:hover span { color: var(--texte); }
.segment input:checked + span { background: var(--texte); color: var(--noir); box-shadow: 0 1px 2px var(--noir-a40); }
.segment input:focus-visible + span { outline: 2px solid var(--anneau); outline-offset: 1px; }
.segments--4 span { font-size: 13.5px; }

/* Budget : deux curseurs sur une même piste */
.budget { display: grid; gap: var(--s-3); }
.budget__valeurs { display: grid; grid-template-columns: max-content minmax(12px, 1fr) max-content; align-items: end; gap: var(--s-3); margin: 0; }
.budget__valeur { display: grid; gap: 2px; margin: 0; }
.budget__valeur--max { text-align: right; }
.budget__valeur label { font-size: var(--fs-mention); color: var(--texte-2); }
.budget__valeur output { font-size: 17px; line-height: 1.25; color: var(--texte); }
.budget__tiret { justify-self: center; width: 12px; height: 1px; margin-bottom: 11px; background: var(--texte-2); }
.budget__piste { position: relative; height: 44px; isolation: isolate; }
.budget__rail {
  position: absolute;
  left: 11px;
  right: 11px;
  top: 50%;
  height: 4px;
  margin-top: -2px;
  border-radius: 2px;
  background: var(--vh-releve);
  box-shadow: inset 0 0 0 1px var(--trait);
}
.budget__plage {
  position: absolute;
  top: 0;
  bottom: 0;
  left: calc(var(--de, 0) * 100%);
  right: calc((1 - var(--a, 1)) * 100%);
  border-radius: 2px;
  background: var(--texte);
}
.budget__piste input[type="range"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  background: none;
  pointer-events: none;
  appearance: none;
  -webkit-appearance: none;
}
.budget__piste input[type="range"]::-webkit-slider-runnable-track { height: 44px; background: none; }
.budget__piste input[type="range"]::-moz-range-track { height: 44px; background: none; }
.budget__piste input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  width: 24px;
  height: 24px;
  margin-top: 10px;
  border: 2px solid var(--texte);
  border-radius: 50%;
  background: var(--noir);
  box-shadow: 0 2px 6px var(--noir-a60);
  cursor: grab;
}
.budget__piste input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  width: 20px;
  height: 20px;
  border: 2px solid var(--texte);
  border-radius: 50%;
  background: var(--noir);
  box-shadow: 0 2px 6px var(--noir-a60);
  cursor: grab;
}
.budget__piste input[type="range"]:focus-visible { outline: none; }
.budget__piste input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--noir), 0 0 0 5px var(--anneau); }
.budget__piste input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--noir), 0 0 0 5px var(--anneau); }

/* Cases à cocher (classe .case de base.css) en grille */
.cases { display: grid; gap: 0 var(--s-4); }
.cases--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.cases .case { padding-block: 8px; font-size: 15px; }
.cases .case input { width: 20px; height: 20px; }
.cases .case input { background: transparent; }
.cases .case input:checked { border-color: var(--texte); background: var(--texte); }
.cases .case input[type="checkbox"]:checked::after { border-color: var(--noir); }
.cases .case:hover input:not(:checked) { border-color: var(--texte); }
.cases .case input:disabled + span { color: var(--texte-2); }

/* Vignettes Crit'Air : pastilles carrées */
.pastilles-critair { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 6px; }
.critair { position: relative; display: block; }
.critair input { position: absolute; inset: 0; width: 100%; height: 100%; margin: 0; opacity: 0; cursor: pointer; }
.critair > span {
  display: grid;
  place-items: center;
  min-height: 44px;
  border-radius: var(--r-bouton);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: 16px;
  font-variant-numeric: tabular-nums;
  color: var(--texte-2);
  transition: background-color var(--d-court) var(--e-douce), color var(--d-court) var(--e-douce);
  pointer-events: none;
}
.critair:hover > span { color: var(--texte); box-shadow: inset 0 0 0 1px var(--texte-2); }
.critair input:checked + span { background: var(--texte); color: var(--noir); box-shadow: none; }
.critair input:focus-visible + span { outline: 2px solid var(--anneau); outline-offset: 2px; }

/* --------------------------------------------------------------------------
   4. Mention 78, puces actives, statut, vide, panne, pagination, mention
   -------------------------------------------------------------------------- */
.mention78 { display: grid; gap: var(--s-2); justify-items: start; }
.mention78 p { max-width: 70ch; line-height: 1.5; }
.mention78__bouton[aria-expanded="true"] .i { transform: rotate(180deg); }
.mention78__detail { display: grid; gap: var(--s-2); }

.puces-actives { display: flex; flex-wrap: wrap; gap: var(--s-2); margin: 0; padding: 0; list-style: none; }
.puce-active {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 36px;
  padding: 0 10px 0 14px;
  border-radius: var(--r-capsule);
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--trait);
  font-size: 14px;
  font-weight: 600;
  color: var(--texte);
}
.puce-active .i { width: 16px; height: 16px; color: var(--texte-2); }
.puce-active:hover { box-shadow: inset 0 0 0 1px var(--texte); }
.puce-active--tout { padding: 0 14px; background: transparent !important; box-shadow: none; color: var(--texte-2); text-decoration: underline; text-underline-offset: .2em; }
@media (pointer: coarse) { .puce-active { min-height: 44px; } }

.catalogue__vide, .concessions-vide {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding: var(--s-7) var(--s-6);
  border: 1px dashed var(--trait);
  border-radius: var(--r-carte);
  color: var(--texte-2);
}
.catalogue__vide-titre, .concessions-vide__titre { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-h3); line-height: 1.2; color: var(--texte); }
.catalogue__vide .btn { margin-top: var(--s-2); }
.catalogue__panne > div { display: grid; gap: var(--s-3); justify-items: start; }

.pagination { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: var(--s-2); padding-top: var(--s-4); }
.pagination__pages { display: flex; gap: 4px; margin: 0; padding: 0; list-style: none; }
.pagination__pages li { display: grid; place-items: center; min-width: 32px; color: var(--texte-2); }
.pagination__page, .pagination__fleche {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-width: 44px;
  min-height: 44px;
  padding: 0 12px;
  border-radius: var(--r-bouton);
  color: var(--texte);
  font-weight: 600;
  text-decoration: none;
}
.pagination__page:hover, a.pagination__fleche:hover { background: var(--survol); }
.pagination__page[aria-current] { background: var(--texte); color: var(--noir); }
.pagination__fleche[aria-disabled="true"] { color: var(--texte-2); opacity: .55; }
.pagination .i { width: 18px; height: 18px; }

.catalogue__mention { max-width: 96ch; padding-top: var(--s-5); border-top: 1px solid var(--trait); }
.catalogue__mention a { color: inherit; font-weight: 600; }

/* Mention partenaire, une seule fois en tête de liste (rappelée par aria-describedby sur chaque lien) */
.catalogue__partenaires { display: flex; align-items: flex-start; gap: 10px; max-width: 100ch; margin: 0; color: var(--texte-2); }
.catalogue__partenaires .i { flex: none; width: 18px; height: 18px; margin-top: 1px; color: var(--bleu-texte); }
.catalogue__partenaires strong { color: var(--texte); }

/* --------------------------------------------------------------------------
   5. Grille et carte véhicule
   La carte entière mène à l'annonce (lien du titre étiré sur la carte) ; « Demander un essai » et « Estimer
   l'assurance » restent cliquables au-dessus. Le conteneur de requêtes est le <li>, jamais un parent du lien
   (le confinement ferait de lui le bloc conteneur du lien étiré).
   -------------------------------------------------------------------------- */
.vehicules-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 272px), 1fr));
  gap: var(--s-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
@media (min-width: 1280px) { .vehicules-grille { gap: var(--s-6) var(--s-5); } }
.vehicules-grille--trois { grid-template-columns: minmax(0, 1fr); }
@media (min-width: 640px) { .vehicules-grille--trois { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .vehicules-grille--trois { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.vehicules-grille__item { display: flex; min-width: 0; container-type: inline-size; }

.vehicule {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  min-width: 0;
  overflow: hidden;
  border: 1px solid var(--vh-filet);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: var(--vh-arete);
  transition: box-shadow var(--d-moyen) var(--e-cinema), transform var(--d-moyen) var(--e-cinema), border-color var(--d-moyen) var(--e-cinema);
}
.vehicule:hover { transform: translateY(-3px); box-shadow: var(--vh-arete), var(--vh-portee); border-color: var(--creme-a20); }
.vehicule:has(.vehicule__lien:focus-visible) { outline: 2px solid var(--anneau); outline-offset: 3px; }
/* Réduire les animations : la carte ne bouge plus au survol (le contour suffit) */
html[data-calme="on"] .vehicule:hover, html[data-calme="on"] .vehicule:hover .visuel--photo img { transform: none; }
@media (prefers-reduced-motion: reduce) { .vehicule:hover, .vehicule:hover .visuel--photo img { transform: none; } }

.vehicule__media { position: relative; aspect-ratio: 16 / 9; overflow: hidden; background: var(--noir); border-bottom: 1px solid var(--vh-filet); }
.vehicule__etiquettes { position: absolute; top: 12px; left: 12px; right: 12px; z-index: 1; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 0; }
.vehicule__media .pastille--vert { box-shadow: 0 0 0 1px var(--creme-a20); }
/* « Photo d'illustration », « Exemple » : posées sur la photo, toujours sur un fond fumé (lisibles sur toute image) */
.vehicule__etiquettes .vehicule__etiquette {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  padding: 2px 10px;
  border-radius: var(--r-capsule);
  background: var(--asphalte-a85);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-shadow: inset 0 0 0 1px var(--creme-a12);
  color: var(--blanc-chaud);
  font-size: var(--fs-mention);
  font-weight: 600;
  line-height: 1.3;
  white-space: nowrap;
}

.vehicule__corps { display: flex; flex-direction: column; flex: 1; padding: 18px 22px 4px; }
.vehicule__infos { flex: 1; padding-bottom: var(--s-4); }
.vehicule__titre { font-size: clamp(21px, 1rem + .4vw, 23px); line-height: 1.15; font-weight: 650; letter-spacing: -.012em; }
.vehicule__lien { color: var(--texte); text-decoration: none; }
.vehicule__lien::after { content: ""; position: absolute; inset: 0; z-index: 1; border-radius: inherit; }
.vehicule__lien:focus-visible { outline: none; }
.vehicule:hover .vehicule__lien, .vehicule__lien:focus-visible { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .18em; }
.vehicule__meta { margin-top: 4px; font-size: 14.5px; line-height: 1.4; color: var(--texte-2); }

.vehicule__fiche { display: grid; gap: 12px; margin-top: var(--s-4); padding-top: var(--s-4); border-top: 1px solid var(--trait); }
.vehicule__prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 2px 10px; margin: 0; }
.vehicule__montant { font-size: clamp(25px, 1rem + .6vw, 28px); line-height: 1.05; font-stretch: var(--largeur-titre); letter-spacing: -.02em; }
.vehicule__prix-note { font-size: var(--fs-mention); color: var(--texte-2); }
.vehicule__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 14px; margin: 0; }
.vehicule__specs > div { display: flex; align-items: center; gap: 8px; min-width: 0; }
.vehicule__specs .i { flex: none; width: 18px; height: 18px; color: var(--texte-2); }
.vehicule__specs dd { margin: 0; min-width: 0; font-size: 14.5px; font-weight: 600; line-height: 1.3; font-variant-numeric: tabular-nums; }
/* Carte large : prix à gauche, caractéristiques à droite (deux lignes) */
@container (min-width: 380px) {
  .vehicule__fiche { grid-template-columns: auto minmax(0, 1fr); align-items: start; gap: 4px 22px; }
  .vehicule__prix { flex-direction: column; align-items: flex-start; }
}

.vehicule__concession { display: flex; align-items: flex-start; gap: 8px; margin-top: var(--s-4); font-size: 14px; line-height: 1.45; color: var(--texte-2); }
.vehicule__concession .i { flex: none; width: 17px; height: 17px; margin-top: 1px; }
.vehicule__concession-nom { font-weight: 600; color: var(--texte); }

.vehicule__pied {
  position: relative;
  z-index: 2;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0 var(--s-4);
  border-top: 1px solid var(--trait);
}
.vehicule__essai, .vehicule__assurance {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  font-family: var(--police-affichage);
  font-weight: 600;
  text-decoration: none;
}
.vehicule__essai { font-size: 15px; color: var(--texte); }
.vehicule__essai .i { width: 17px; height: 17px; color: var(--vert-signal); transition: transform var(--d-moyen) var(--e-cinema); }
.vehicule__essai:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.vehicule__essai:hover .i { transform: translateX(3px); }
/* Lien d'assurance partenaire : bleu réservé, sans aplat */
.vehicule__assurance { gap: 6px; font-size: 14px; color: var(--bleu-texte); }
.vehicule__assurance-icone { width: 17px; height: 17px; }
.vehicule__assurance-fleche { width: 14px; height: 14px; }
.vehicule__assurance:hover > span { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }

/* Fiche : « Estimer l'assurance » en version sobre du bleu partenaire (brief v4) — surface sombre, filet
   --bleu-sortie, pictogramme et texte en --bleu-sortie-texte (7,9:1 sur --surface-2, 7,4:1 au survol), jamais d’aplat bleu.
   La mention « Lien partenaire » reste juste dessous. */
.assurance-bloc { display: grid; gap: var(--s-2); }
.assurance-bloc__mention { font-size: 12.5px; line-height: 1.45; color: var(--texte-2); }
.assurance-bloc .sortie-lien {
  background: var(--surface-2, var(--noir-2));
  box-shadow: inset 0 0 0 1px var(--bleu-sortie), var(--vh-arete);
  color: var(--bleu-texte);
  transition: background-color var(--d-court) var(--e-douce), box-shadow var(--d-court) var(--e-douce);
}
.assurance-bloc .sortie-lien:hover {
  background: color-mix(in srgb, var(--bleu-sortie) 10%, var(--surface-2, var(--noir-2)));
  box-shadow: inset 0 0 0 1px var(--bleu-texte), var(--vh-arete);
}
.assurance-bloc .sortie-lien:hover .sortie-lien__texte > span:first-child { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: .2em; }
.assurance-bloc .sortie-lien__numero {
  min-width: 34px;
  height: 34px;
  padding: 0;
  background: color-mix(in srgb, var(--bleu-sortie) 18%, transparent);
  box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--bleu-sortie) 60%, transparent);
  color: var(--bleu-texte);
}
.assurance-bloc .sortie-lien__numero .i { width: 18px; height: 18px; }
.assurance-bloc .sortie-lien__sous { color: var(--texte-2); opacity: 1; font-size: var(--fs-mention); }
.assurance-bloc .sortie-lien > .i { color: var(--bleu-texte); }

/* Attente : cartes fantômes de même gabarit */
.vehicule--attente { pointer-events: none; }
.vehicule--attente .vehicule__corps { gap: var(--s-3); min-height: 240px; padding-bottom: var(--s-5); }
.vehicule--attente .squelette { height: 14px; }
.vehicule--attente .squelette--titre { height: 26px; }

/* --------------------------------------------------------------------------
   6. Le visuel d'un véhicule (js/vehicules/commun.js, htmlVisuel / htmlRepli)
   Photo de la concession, sinon repli « plateau de studio » compact : la catégorie et le nuancier de la teinte
   déclarée, jamais la marque ni le modèle (déjà dans le titre). Carte : bandeau de 120 à 140 px ; fiche : panneau
   réduit. La teinte (--teinte, couleur hexadécimale fournie par la concession) n'est qu'un reflet et une pastille
   décorative : aucun texte n'est posé sur elle.
   -------------------------------------------------------------------------- */
.visuel { position: relative; width: 100%; height: 100%; }
.visuel--photo { background: var(--noir-2); }
/* Voile haut : les étiquettes (« Premier volant », « Exemple ») restent lisibles sur n'importe quelle photo */
.vehicule__media .visuel--photo::after { content: ""; position: absolute; inset: 0 0 auto; height: 46%; background: var(--voile-haut); pointer-events: none; }
.visuel--photo img { display: block; width: 100%; height: 100%; object-fit: cover; object-position: 50% 55%; transition: transform var(--d-lent) var(--e-cinema); }
.vehicule:hover .visuel--photo img { transform: scale(1.03); }

/* Le plateau : un dégradé de studio (lumière zénithale à droite, sol plus sombre), le reflet de la teinte au ras du
   sol, une arête lumineuse en haut. Sert aussi d'attente sur la fiche (.visuel--attente). */
:is(.visuel--repli, .visuel--attente) {
  overflow: hidden;
  color: var(--blanc-chaud);
  background:
    radial-gradient(60% 150% at 100% 100%, color-mix(in srgb, var(--teinte, transparent) 15%, transparent) 0%, transparent 72%),
    radial-gradient(80% 130% at 78% -30%, color-mix(in srgb, var(--blanc-chaud) 9%, transparent) 0%, transparent 64%),
    linear-gradient(172deg, var(--noir-3) 0%, var(--noir-2) 52%, var(--noir) 100%);
}
:is(.visuel--repli, .visuel--attente)::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--creme-a20) 40%, var(--creme-a40) 72%, transparent);
}

/* Nuancier : une pastille laquée, comme dans un configurateur (reflet en haut à gauche, ombre propre en bas) */
.visuel__nuancier {
  flex: none;
  display: block;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 26%, var(--blanc-a60) 0, color-mix(in srgb, var(--blanc) 12%, transparent) 26%, transparent 44%),
    radial-gradient(circle at 64% 82%, var(--noir-a40) 0, transparent 58%),
    var(--teinte, var(--noir-3));
  box-shadow: inset 0 0 0 1px var(--creme-a20), 0 0 0 1px var(--noir-a60), 0 0 0 4px var(--creme-a06), 0 8px 14px -6px var(--noir);
}

/* Carte : bandeau compact (120 à 140 px selon la largeur de la carte), catégorie et nuancier en bas */
.vehicule__media:has(> .visuel--repli) { aspect-ratio: auto; height: clamp(120px, 38cqi, 140px); }
.vehicule__media > .visuel--repli { display: flex; flex-direction: column; justify-content: flex-end; padding: 0 22px 18px; }
.visuel__ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--s-3); margin: 0; }
.visuel__categorie {
  margin: 0;
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: 12.5px;
  line-height: 1.2;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--creme-a70);
}

/* Fiche : panneau réduit (la photo, quand elle arrive, reprend le 16:10) */
.fiche-media__cadre:has(> .visuel--repli) { aspect-ratio: auto; }
.visuel--repli.visuel--grand {
  display: grid;
  grid-template-rows: auto 1fr auto;
  align-items: center;
  gap: var(--s-3);
  height: clamp(168px, 46vw, 212px);
  padding: 20px 22px;
}
.visuel--grand .visuel__categorie { align-self: start; }
.visuel__teinte { display: flex; align-items: center; gap: 14px; margin: 0; font-size: var(--fs-s); line-height: 1.4; color: var(--blanc-chaud); }
.visuel--grand .visuel__nuancier { width: 40px; height: 40px; }
.visuel__mention { display: flex; align-items: center; gap: 8px; margin: 0; font-size: var(--fs-mention); line-height: 1.3; color: var(--creme-a70); }
.visuel__mention .i { flex: none; width: 16px; height: 16px; }
@media (min-width: 1024px) {
  .visuel--repli.visuel--grand { height: clamp(280px, 24vw, 340px); padding: 32px 36px 30px; }
  .visuel--grand .visuel__categorie { font-size: 13px; }
  .visuel--grand .visuel__teinte { gap: 20px; font-size: var(--fs-base); }
  .visuel--grand .visuel__nuancier { width: 64px; height: 64px; }
}

/* --------------------------------------------------------------------------
   7. Bandeau photo (vers les concessions) : même composition que les en-têtes « vitrine »
   -------------------------------------------------------------------------- */
.bandeau-photo {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: center;
  min-height: clamp(460px, 64svh, 660px);
  padding-block: clamp(64px, 9vw, 120px);
  overflow: clip;
  background: var(--noir);
  color: var(--blanc-chaud);
  color-scheme: dark;
}
.bandeau-photo__media { position: absolute; inset: 0; z-index: -2; }
.bandeau-photo__media :is(picture, img) { display: block; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
@media (min-width: 1200px) { .bandeau-photo__contenu > * { max-width: var(--col-texte); } }
@media (max-width: 1199.98px) { .bandeau-photo { align-items: start; min-height: 0; padding-top: calc(var(--bande) - var(--s-5)); } }
.bandeau-photo__contenu { display: grid; justify-items: start; gap: var(--s-4); }
.bandeau-photo__contenu .surtitre { color: var(--creme-a70); }
.bandeau-photo__titre { max-width: 15ch; font-size: clamp(32px, 1rem + 2.6vw, 56px); line-height: 1.02; letter-spacing: -.02em; text-wrap: balance; }
.bandeau-photo__texte { max-width: 46ch; font-size: var(--fs-l); line-height: 1.5; }
.bandeau-photo__contenu .btn { margin-top: var(--s-2); }
.bandeau-photo__legende {
  position: absolute;
  right: max(var(--gouttiere), env(safe-area-inset-right));
  bottom: var(--s-4);
  font-size: 12px;
  color: var(--creme-a70);
}
@media (max-width: 1199.98px) { .bandeau-photo__legende { top: calc(var(--bande) - 30px); bottom: auto; } }
@media (max-width: 699.98px) { .bandeau-photo__legende { display: none; } }

/* --------------------------------------------------------------------------
   8. Feuille des filtres (mobile et tablette)
   -------------------------------------------------------------------------- */
.feuille-filtres { width: 100%; }
@media (min-width: 720px) { .feuille-filtres { width: min(560px, calc(100vw - 48px)); } }
.feuille-filtres .filtres-tri { display: grid; gap: 8px; padding-bottom: var(--s-4); }
.feuille-filtres .catalogue__tri { display: grid; gap: 8px; }
.feuille-filtres .catalogue__tri-label { font-family: var(--police-affichage); font-weight: 600; font-size: 15px; color: var(--texte); }
.feuille-filtres .catalogue__tri-choix.controle { width: 100%; min-width: 0; }
.feuille-filtres__pied { z-index: 2; }
.feuille-filtres__pied .btn { flex: 1 1 auto; }

/* --------------------------------------------------------------------------
   9. Fiche véhicule
   -------------------------------------------------------------------------- */
.fiche-haut { padding: var(--s-5) 0 clamp(56px, 7vw, 96px); }
.ariane ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; margin: 0; padding: 0; list-style: none; font-size: var(--fs-s); color: var(--texte-2); }
.ariane li { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.ariane li + li::before {
  content: "";
  width: 6px;
  height: 6px;
  margin: 0 8px 0 4px;
  border-top: 1.5px solid currentColor;
  border-right: 1.5px solid currentColor;
  transform: rotate(45deg);
  opacity: .7;
}
.ariane a { display: inline-flex; align-items: center; min-height: 44px; color: var(--texte-2); font-weight: 600; }
.ariane a:hover { color: var(--texte); }
.ariane [aria-current] { color: var(--texte); font-weight: 600; overflow-wrap: anywhere; }

.fiche-haut__grille { display: grid; gap: var(--s-6); margin-top: var(--s-3); }
@media (min-width: 1024px) {
  .fiche-haut__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; }
  .fiche-media { position: sticky; top: calc(var(--h-entete) + var(--s-5)); }
}
.fiche-media { display: grid; gap: var(--s-3); margin: 0; }
.fiche-media__cadre { position: relative; aspect-ratio: 16 / 10; overflow: hidden; border-radius: var(--r-carte); background: var(--noir); box-shadow: 0 0 0 1px var(--vh-filet), var(--vh-portee); }
.fiche-media__legende { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; font-size: var(--fs-mention); line-height: 1.45; color: var(--texte-2); }

.fiche-resume { display: grid; align-content: start; gap: var(--s-4); min-width: 0; }
.fiche-resume__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.fiche-resume__titre { font-size: clamp(36px, 1.4rem + 2.4vw, 60px); line-height: 1.02; letter-spacing: -.025em; }
.fiche-resume__version { display: block; margin-top: 8px; font-size: clamp(19px, .9rem + .5vw, 23px); font-weight: 500; line-height: 1.25; letter-spacing: -.005em; color: var(--texte-2); }
.fiche-resume__sous { color: var(--texte-2); }
.fiche-resume__prix { display: grid; gap: 4px; padding-block: var(--s-4); border-block: 1px solid var(--trait); }
.fiche-resume__montant { font-size: clamp(34px, 1.4rem + 1.6vw, 46px); line-height: 1.05; font-stretch: var(--largeur-titre); letter-spacing: -.025em; }
.fiche-resume__prix-note { font-size: var(--fs-mention); color: var(--texte-2); }
.fiche-resume__specs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; margin: 0; }
.fiche-resume__specs > div { display: grid; gap: 2px; padding: 12px 0; border-bottom: 1px solid var(--trait); }
.fiche-resume__specs > div:nth-child(even) { padding-left: var(--s-4); border-left: 1px solid var(--trait); }
.fiche-resume__specs dt { font-size: var(--fs-mention); color: var(--texte-2); }
.fiche-resume__specs dd { margin: 0; font-size: 17px; font-weight: 700; }
.fiche-resume__actions { display: grid; gap: var(--s-3); padding-top: var(--s-2); }
@media (min-width: 600px) and (max-width: 1023.98px) { .fiche-resume__actions { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fiche-resume__actions .btn { width: 100%; }
.fiche-haut__grille[data-chargement] .fiche-media__legende { visibility: hidden; }

.fiche-absente { display: grid; justify-items: start; gap: var(--s-4); padding-block: clamp(48px, 8vw, 120px); max-width: 720px; }
.fiche-absente__titre { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: -.025em; font-family: var(--police-affichage); font-stretch: var(--largeur-titre); font-weight: var(--graisse-titre); }

.fiche-section__titre { font-size: clamp(30px, 1.1rem + 2vw, 46px); line-height: 1.05; letter-spacing: -.02em; }

.fiche-details { padding-block: clamp(64px, 8vw, 112px); }
.fiche-details__grille { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .fiche-details__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }
.fiche-carac { display: grid; gap: var(--s-3); }
.fiche-carac__liste { margin-top: var(--s-4); }
.fiche-carac__liste dd small { display: block; margin-top: 2px; font-size: var(--fs-mention); line-height: 1.45; color: var(--texte-2); }
@media (min-width: 700px) { .fiche-carac__liste > div { grid-template-columns: 220px 1fr; } }

.premier-volant {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--vh-filet);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: var(--vh-arete);
}
.premier-volant__badge { margin: 0; }
.premier-volant__titre { font-size: var(--fs-h3); line-height: var(--lh-h3); }
.premier-volant__citation { margin: 0; padding-left: var(--s-4); border-left: 3px solid var(--vert-signal); font-size: var(--fs-l); line-height: 1.5; }
.premier-volant__qui { font-weight: 700; }
.premier-volant__criteres { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; color: var(--texte-2); }
.premier-volant__criteres li { position: relative; padding-left: 26px; }
.premier-volant__criteres li::before {
  content: "";
  position: absolute;
  left: 2px;
  top: .42em;
  width: 11px;
  height: 6px;
  border-left: 2px solid var(--vert-signal);
  border-bottom: 2px solid var(--vert-signal);
  transform: rotate(-45deg);
}

.fiche-essai { padding-block: clamp(64px, 8vw, 112px); }
.fiche-essai__grille { display: grid; gap: var(--s-7); }
@media (min-width: 1024px) { .fiche-essai__grille { grid-template-columns: minmax(0, 7fr) minmax(0, 5fr); gap: var(--s-8); align-items: start; } }
.essai { display: grid; gap: var(--s-3); scroll-margin-top: var(--s-3); }
.essai__chapeau { max-width: 60ch; font-size: var(--fs-l); line-height: 1.5; color: var(--texte-2); }
.essai__formulaire, .essai__succes {
  margin-top: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--vh-filet);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: var(--vh-arete);
}
/* Champs en creux dans la carte du formulaire : le sol, une marche plus bas */
.essai__formulaire { --surface: var(--vh-sol); }
@media (max-width: 599.98px) { .essai__formulaire, .essai__succes { padding: var(--s-5); } }
.essai__formulaire .resume-erreurs { margin-bottom: var(--s-5); }
.essai__colonnes { display: grid; gap: 0 var(--s-5); }
.essai__colonnes .champ { align-content: start; }
@media (min-width: 700px) { .essai__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.essai__envoyer { width: 100%; }
@media (min-width: 700px) { .essai__envoyer { width: auto; } }
.champ--case { margin-bottom: var(--s-6); }
.essai__succes { display: grid; justify-items: start; gap: var(--s-3); }
.essai__succes:focus { outline: none; }
.essai__succes:focus-visible { outline: 2px solid var(--anneau); outline-offset: 4px; }
.essai__succes-icone { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: var(--vert-signal); color: var(--noir); }
.essai__succes-icone .i { width: 22px; height: 22px; stroke-width: 2.2; }
.essai__succes-titre { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-h3); line-height: 1.25; }

.fiche-concession { display: grid; gap: var(--s-3); align-content: start; }
@media (min-width: 1024px) { .fiche-concession { position: sticky; top: calc(var(--h-entete) + var(--s-5)); } }
.fiche-concession__lien { margin-top: var(--s-2); }

.fiche-voisins { padding-block: clamp(64px, 8vw, 112px); }
.fiche-voisins .conteneur { display: grid; gap: var(--s-6); }
.fiche-voisins__tete { display: flex; flex-wrap: wrap; align-items: end; justify-content: space-between; gap: var(--s-3); }

/* --------------------------------------------------------------------------
   10. Concessions partenaires : liste, carte, plan
   -------------------------------------------------------------------------- */
.reseau { padding-block: clamp(64px, 8vw, 112px); }
.reseau__tete { display: grid; gap: var(--s-4); margin-bottom: var(--s-7); }
@media (min-width: 1024px) { .reseau__tete { grid-template-columns: minmax(0, 1fr) minmax(0, 420px); align-items: end; gap: var(--s-8); } }
.reseau__titre { margin-top: var(--s-3); font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.reseau__mention { color: var(--texte-2); }
.reseau__grille { display: grid; gap: var(--s-6); }
.reseau__liste { display: grid; gap: var(--s-5); align-content: start; min-width: 0; }
.reseau__liste:focus { outline: none; }
.plan { margin: 0; min-width: 0; }
@media (min-width: 1024px) {
  .reseau__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 6fr); gap: var(--s-7); align-items: start; }
  .plan { position: sticky; top: calc(var(--h-entete) + var(--s-5)); }
}

.concessions { display: grid; gap: var(--s-4); margin: 0; padding: 0; list-style: none; }
.concession {
  display: grid;
  gap: var(--s-4);
  padding: var(--s-6);
  border: 1px solid var(--vh-filet);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: var(--vh-arete);
  scroll-margin-top: var(--s-3);
  transition: border-color var(--d-moyen) var(--e-cinema), box-shadow var(--d-moyen) var(--e-cinema);
}
@media (max-width: 599.98px) { .concession { padding: var(--s-5); } }
.concession[data-actif] { border-color: var(--vert-signal); box-shadow: var(--vh-arete), 0 0 0 1px var(--vert-signal), var(--vh-portee); }
.concession--attente { gap: var(--s-3); min-height: 220px; }
.concession--attente .squelette { height: 14px; }
.concession--compacte { box-shadow: var(--vh-arete); }
.concession__tete { display: flex; align-items: flex-start; gap: var(--s-4); }
.concession__num {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--texte);
  color: var(--noir);
  font-size: 15px;
}
.concession[data-actif] .concession__num { background: var(--vert-signal); color: var(--noir); }
.concession__titres { display: grid; gap: 2px; min-width: 0; }
.concession__nom { font-size: clamp(21px, 1rem + .6vw, 26px); line-height: 1.15; font-weight: 650; letter-spacing: -.012em; }
.concession__meta { font-size: var(--fs-s); color: var(--texte-2); }
.concession__badges { display: flex; flex-wrap: wrap; gap: 6px; margin: 0; }
.concession__infos { display: grid; gap: 0; margin: 0; border-top: 1px solid var(--trait); }
.concession__infos > div { display: grid; grid-template-columns: minmax(0, 11em) minmax(0, 1fr); gap: var(--s-3); padding: 10px 0; border-bottom: 1px solid var(--trait); font-size: 15px; line-height: 1.45; }
.concession__infos dt { color: var(--texte-2); }
.concession__infos dd { margin: 0; font-weight: 600; }
@media (max-width: 419.98px) { .concession__infos > div { grid-template-columns: 1fr; gap: 0; } }
.concession__manque { font-size: var(--fs-s); color: var(--texte-2); }
.concession__avantage { display: flex; gap: 10px; align-items: flex-start; padding: var(--s-3) var(--s-4); border-left: 3px solid var(--vert-signal); border-radius: 0 var(--r-bouton) var(--r-bouton) 0; background: color-mix(in srgb, var(--vert-signal) 8%, transparent); }
.concession__avantage .i { flex: none; width: 20px; height: 20px; margin-top: 2px; color: var(--vert-signal); }
.concession__actions { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.plan__tete { display: grid; gap: 4px; padding: var(--s-5) var(--s-5) var(--s-4); }
.plan__titre { font-size: var(--fs-l); line-height: 1.25; font-weight: 650; }
.plan__legende { font-size: var(--fs-mention); line-height: 1.5; color: var(--texte-2); }
.plan { overflow: hidden; border: 1px solid var(--vh-filet); border-radius: var(--r-carte); background: var(--surface); box-shadow: var(--vh-arete); }
.plan__cadre { aspect-ratio: 680 / 600; border-block: 1px solid var(--vh-filet); background: var(--vh-sol); }
@media (max-width: 519.98px) { .plan__cadre { aspect-ratio: 1 / 1; } }
.plan__cadre[data-attente] { background: var(--vh-sol); }
.plan-svg { display: block; width: 100%; height: 100%; }
.plan__cle { display: flex; flex-wrap: wrap; gap: var(--s-2) var(--s-5); padding: var(--s-4) var(--s-5); font-size: var(--fs-mention); color: var(--texte-2); }
.plan__cle-item { display: inline-flex; align-items: center; gap: 8px; }
.plan__cle-agence { flex: none; width: 22px; height: 22px; }
.plan__cle-repere { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: var(--texte); color: var(--noir); font-family: var(--police-affichage); font-weight: 600; font-size: 11px; }
/* Symbole de la marque (logo B « le rond-point », version sombre) : légende du plan et repère de l'agence */
.rondpoint__anneau { fill: none; stroke: var(--logo-marque, #2BD67B); stroke-width: 27; }
.rondpoint__marquage { fill: none; stroke: var(--logo-fond, #0E1013); stroke-width: 2.6; stroke-dasharray: 10.71 10.71; }
.rondpoint__voiture { fill: var(--logo-voiture, #F5F3EE); stroke: var(--logo-fond, #0E1013); stroke-width: 3; }

.p-fond { fill: var(--vh-sol); }
.p-quadrillage { fill: none; stroke: var(--creme-a06); stroke-width: 1; }
.p-anneau { fill: none; stroke: var(--texte-2); stroke-width: 1; stroke-dasharray: 3 5; opacity: .6; }
.p-anneau--schema { opacity: .35; }
.p-anneau-texte { font-family: var(--police-texte); font-size: 12px; fill: var(--texte-2); }
.p-lien { fill: none; stroke: var(--texte-2); stroke-width: 1; opacity: .45; }
.p-nord circle { fill: var(--surface); stroke: var(--trait); }
.p-nord path { fill: var(--texte); }
.p-nord text { font-family: var(--police-affichage); font-weight: 600; font-size: 11px; fill: var(--texte-2); text-anchor: middle; }
.p-echelle path { fill: none; stroke: var(--texte); stroke-width: 1.5; }
.p-echelle text { font-family: var(--police-texte); font-size: 12px; fill: var(--texte-2); }
.agence__nom { font-family: var(--police-affichage); font-weight: 650; font-size: 14px; fill: var(--texte); text-anchor: middle; }
.agence__quartier { font-family: var(--police-texte); font-size: 12px; fill: var(--texte-2); text-anchor: middle; }
/* Halo couleur du sol : le nom de l'agence reste lisible même si un lien de concession passe dessous */
:is(.agence__nom, .agence__quartier) { paint-order: stroke; stroke: var(--vh-sol); stroke-width: 4px; stroke-linejoin: round; }
.repere { cursor: pointer; }
.repere__halo { fill: var(--vert-signal); opacity: 0; transition: opacity var(--d-moyen) var(--e-cinema); }
.repere__disque { fill: var(--texte); stroke: var(--vh-sol); stroke-width: 2.5; transition: fill var(--d-court) var(--e-douce); }
.repere__num { font-family: var(--police-affichage); font-weight: 650; font-size: 13px; fill: var(--noir); text-anchor: middle; }
.repere__etiquette rect { fill: var(--surface); stroke: var(--trait); }
.repere__etiquette text { font-family: var(--police-affichage); font-weight: 600; font-size: 13px; fill: var(--texte); }
.repere:hover .repere__disque, .repere[data-actif] .repere__disque { fill: var(--vert-signal); }
.repere:hover .repere__num, .repere[data-actif] .repere__num { fill: var(--noir); }
.repere:hover .repere__halo, .repere[data-actif] .repere__halo { opacity: .18; }

/* --------------------------------------------------------------------------
   11. Impression
   -------------------------------------------------------------------------- */
@media print {
  .catalogue__barre, .catalogue__cote, .feuille-filtres, .pagination, .bandeau-photo, .vehicule__pied, .fiche-essai, .plan { display: none !important; }
  .vehicules-grille { grid-template-columns: repeat(2, 1fr); }
  .vehicule { break-inside: avoid; box-shadow: none; }
  /* Les jetons s'inversent à l'impression (tokens.css) : il ne reste qu'à retirer fumées et voiles */
  .vh-bande { border: 0; }
  .vehicule__media .visuel--photo::after { display: none; }
  :is(.vehicules-grille .vehicule__etiquette, .tete-vitrine .tete-photo__legende, .bandeau-photo__legende) {
    background: none; box-shadow: inset 0 0 0 1px var(--creme-a40); -webkit-backdrop-filter: none; backdrop-filter: none;
  }
  .fiche-media__cadre { box-shadow: inset 0 0 0 1px var(--creme-a20); }
}