/* ==========================================================================
   Oui Oui Car's — accueil v5 (lot ACCUEIL)
   Direction : docs/BRIEF-V4-PRO.md §3 et §4, docs/SPEC-V5-PANNEAU-LOGO.md (§1 bis : le site n'a plus qu'un thème,
   la nuit ; §2 : le panneau à messages variables). Vraies vidéos (assets/cinema/manifest.json) en plein cadre,
   alternant avec des sections sur surfaces sombres étagées (§0 bis), une séquence pilotée au défilement (le
   créneau en bataille), final au belvédère. Couleurs : uniquement les jetons de tokens.css (et leurs mélanges).
   Mouvement : opacité, transform, clip-path ; courbe --e-cinema, 500 à 900 ms, jamais de rebond. Mode calme et
   prefers-reduced-motion : base.css coupe transitions et animations, les vidéos restent à l'état d'affiche.
   Vidéos : lecture unique, la dernière image tient (medias.js) ; aucune coupe franche de boucle.
   ========================================================================== */

/* --------------------------------------------------------------------------
   0 bis. La nuit, seule (SPEC-V5 §1 bis) : trois étages de surfaces, des filets fins, aucune zone claire.
   Étage 0 = l'asphalte (plans cinéma, sections de base) ; étage 1 = sections « en relief », un ton au-dessus,
   bordées d'un filet de lumière ; étage 2 = cartes ; étage 3 = carte de référence, état choisi.
   Contrastes (WCAG 2.2 AA, calculés) : blanc chaud ≥ 15,7:1, gris ≥ 5,3:1, --creme-a70 ≥ 8,6:1 et vert signal
   ≥ 9:1 sur les étages 0 à 2 ; étage 3 : blanc 14,5:1, gris 4,9:1. La carte de référence, teintée de vert en tête
   (gris 4,3:1 seulement), passe son texte secondaire en --creme-a70 (≥ 7,3:1).
   -------------------------------------------------------------------------- */
main {
  --etage-0: var(--noir);
  --etage-1: color-mix(in srgb, var(--noir) 55%, var(--noir-2));
  --etage-2: var(--noir-2);
  --etage-3: color-mix(in srgb, var(--noir-2) 40%, var(--noir-3));
  --lueur: color-mix(in srgb, var(--blanc-chaud) 3.5%, transparent);
}
main .zone-bitume { --surface: var(--etage-2); --survol: var(--creme-a06); }
main .section--relief {
  --fond: var(--etage-1);
  background-color: var(--fond);
  /* une lumière à peine perceptible tombe du haut à gauche : la section ne paraît jamais « tout noir » */
  background-image: radial-gradient(64rem 30rem at 8% 0%, var(--lueur), transparent 72%);
  box-shadow: inset 0 1px 0 var(--creme-a06);
}
/* Cartes de l'accueil : surface étage 2, filet clair, arête haute éclairée */
main :is(.formule__carte, .auto, .moniteur, .financement, .lyceens, .code__ville, .avis__carte, .budget, .quiz.carte, .encart) {
  border-color: var(--creme-a12);
  box-shadow: inset 0 1px 0 var(--creme-a06), 0 24px 48px -32px var(--noir-a60);
}
main .encart--vert { border-left-color: var(--vert-signal); }

/* --------------------------------------------------------------------------
   0. Outils communs de la page
   -------------------------------------------------------------------------- */
.ancre { position: absolute; top: 0; left: 0; width: 1px; height: 1px; }
.tarifs { position: relative; }

.tete-section { display: grid; gap: var(--s-4); max-width: 46rem; margin-bottom: clamp(32px, 4vw, 56px); }
.tete-section .chapeau { color: var(--texte-2); }
.tete-section--ligne { max-width: none; grid-template-columns: minmax(0, 1fr); align-items: end; }
@media (min-width: 900px) {
  .tete-section--ligne { grid-template-columns: minmax(0, 46rem) auto; justify-content: space-between; column-gap: var(--s-7); }
}
.tete-section--ligne > div { display: grid; gap: var(--s-4); }
/* Titre à gauche, chapô (et ses appels) dans la colonne de droite, comme « Nos engagements » : la moitié droite
   n'est plus vide et la tête de section gagne une demi-hauteur. */
.tete-section--duo { max-width: none; }
.tete-section__droite { display: grid; gap: var(--s-4); justify-items: start; align-content: end; }
.tete-section__droite > * { margin: 0; }
.tete-section__droite .chapeau { max-width: 46ch; }
@media (min-width: 1000px) {
  .tete-section--duo { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: end; }
  .tete-section--duo > .surtitre { grid-column: 1 / -1; }
  .tete-section--duo > h2 { grid-column: 1; max-width: 20ch; }
  .tete-section--duo > .tete-section__droite { grid-column: 2; grid-row: 2; }
  /* Le code : le titre et son appel à gauche, le chapô et l'offre à droite (colonnes d'égale hauteur) */
  .tete-section--duo > .code__actions { grid-column: 1; grid-row: 3; align-self: end; }
  .code .tete-section--duo { align-items: start; }
  .code .tete-section--duo > .tete-section__droite { grid-row: 2 / span 2; }
}

.badge-confirmer {
  display: inline-flex;
  align-items: center;
  padding: 1px 8px;
  border: 1px dashed currentColor;
  border-radius: var(--r-capsule);
  color: var(--texte-2);
  font-family: var(--police-texte);
  font-size: var(--fs-mention);
  font-weight: 600;
  line-height: 1.45;
  letter-spacing: .01em;
  white-space: nowrap;
  vertical-align: middle;
}

/* Listes à filets fins (faits, compétences) */
.liste-filet { display: grid; padding: 0; list-style: none; }
.liste-filet > li { padding: 12px 0; border-top: 1px solid var(--trait); line-height: 1.5; }
.liste-filet > li:last-child { border-bottom: 1px solid var(--trait); }

.lien-externe { display: inline-flex; align-items: center; gap: 6px; color: var(--lien); }
.lien-externe .i { width: 15px; height: 15px; }

/* Blocs repliables (<details class="pliable">, outils.js) : repliés sous 600 px, ouverts au-delà, où leur
   résumé disparaît (le détail se lit comme un paragraphe). */
.pliable > .pliable__titre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-3);
  min-height: 44px;
  padding: 8px 0;
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: var(--fs-s);
  line-height: 1.3;
  color: var(--texte);
  list-style: none;
  cursor: pointer;
}
.pliable > .pliable__titre::-webkit-details-marker { display: none; }
.pliable > .pliable__titre::after {
  content: "";
  flex: none;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform var(--d-moyen) var(--e-cinema);
}
.pliable[open] > .pliable__titre::after { transform: translateY(2px) rotate(-135deg); }
@media (min-width: 600px) { .pliable > .pliable__titre { display: none; } }
.pliable > :not(summary) + :not(summary) { margin-top: var(--s-2); }

/* Accueil : des marges de section resserrées (page plus dense : environ 16 écrans à 1440 px au lieu de 23) */
main .section { padding-block: clamp(72px, 8vw, 128px); }
main .section--serree { padding-block: clamp(40px, 5vw, 72px); }
/* Mobile : des marges de section un peu plus courtes (la page reste lisible d'une traite) */
@media (max-width: 599.98px) {
  main .section { padding-block: 44px; }
  main .section--serree { padding-block: 32px; }
}

/* --------------------------------------------------------------------------
   1. Révélations au défilement : fondu, léger translateY, masque.
   Posées seulement si le mouvement est autorisé (html[data-revelation], par accueil.js).
   -------------------------------------------------------------------------- */
html[data-revelation] [data-revele] {
  transition: opacity var(--d-lent) var(--e-cinema), transform var(--d-lent) var(--e-cinema), clip-path var(--d-lent) var(--e-cinema);
}
html[data-revelation] [data-revele]:not([data-revele="masque"]):not([data-vu]) { opacity: 0; transform: translateY(28px); }
html[data-revelation] [data-revele]:nth-child(2) { transition-delay: 90ms; }
html[data-revelation] [data-revele]:nth-child(3) { transition-delay: 180ms; }
html[data-revelation] [data-revele]:nth-child(4) { transition-delay: 270ms; }
html[data-revelation] [data-revele]:nth-child(n+5) { transition-delay: 320ms; }
html[data-revelation] [data-revele="masque"]:not([data-vu]) { clip-path: inset(9% 5% 9% 5% round var(--r-carte)); }
html[data-revelation] [data-revele="masque"] { clip-path: inset(0 0 0 0 round 0); transition-duration: 1100ms; }
html[data-revelation] [data-revele="masque"] .media__poster,
html[data-revelation] [data-revele="masque"] .media__video { transition: transform 1600ms var(--e-cinema); }
html[data-revelation] [data-revele="masque"]:not([data-vu]) :is(.media__poster, .media__video) { transform: scale(1.08); }
html[data-revelation] [data-revele="masque"]:not([data-vu]) :is(.bande__texte, .media-pied) { opacity: 0; transform: translateY(24px); }
html[data-revelation] [data-revele="masque"] :is(.bande__texte, .media-pied) {
  transition: opacity var(--d-lent) var(--e-cinema) 300ms, transform var(--d-lent) var(--e-cinema) 300ms;
}

/* --------------------------------------------------------------------------
   2. Médias de la page
   La vidéo apparaît en fondu quand elle joue vraiment ; à la fin (data-fin, medias.js), sa dernière image tient
   et s'approche très lentement (1 → 1,03 en 8 s), puis tout s'arrête. Rien de tout cela en mode calme.
   -------------------------------------------------------------------------- */
.media .media__video { opacity: 0; transition: opacity 700ms var(--e-cinema); }
.media[data-lecture="1"] .media__video { opacity: 1; }
.media picture { position: absolute; inset: 0; }
.media picture > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: var(--focal, 50% 50%); }
html[data-reseau="lent"] .media__video { display: none; }

@keyframes media-tenue { from { scale: 1; } to { scale: 1.03; } }
.media[data-fin] > .media__video { transform-origin: var(--focal, 50% 50%); animation: media-tenue 8s cubic-bezier(.3, 0, .4, 1) forwards; }
.media[data-fin][data-figee] > .media__video { animation-play-state: paused; }
html[data-calme="on"] .media[data-fin] > .media__video { animation: none; }
@media (prefers-reduced-motion: reduce) { .media[data-fin] > .media__video { animation: none; } }

/* Points focaux des plans (manifest.json), et recadrages en portrait */
.media[data-cinema="castellane"] { --focal: 62% 70%; }
.media[data-cinema="volant"] { --focal: 50% 50%; }
.media[data-cinema="canebiere-nuit"] { --focal: 62% 60%; }
.media[data-cinema="voie-rapide"] { --focal: 45% 65%; }
.media[data-cinema="pedalier"] { --focal: 70% 75%; }
.media[data-cinema="corniche"] { --focal: 40% 65%; }
.media[data-cinema="belvedere"] { --focal: 55% 70%; }
@media (orientation: portrait) {
  .media[data-cinema="corniche"] { --focal: 72% 35%; }
  .media[data-cinema="belvedere"] { --focal: 64% 68%; }
  .media[data-cinema="volant"] { --focal: 40% 82%; }
  .media[data-cinema="canebiere-nuit"] { --focal: 58% 60%; }
  .media[data-cinema="voie-rapide"] { --focal: 52% 65%; }
}

/* Bouton de la vidéo : pause, reprise, puis « Relire » (medias.js, data-etat) */
.media-pause__relire { display: none; }
.media-pause[data-etat="pause"] .media-pause__pause,
.media-pause[data-etat="fin"] .media-pause__pause { display: none; }
.media-pause[data-etat="pause"] .media-pause__lecture { display: block; }
.media-pause[data-etat="fin"] .media-pause__relire { display: block; }

/* Rangée commune « légende + bouton », en bas à droite de chaque plan (au-dessus du texte, jamais dessous) */
.media-pied {
  position: absolute;
  right: max(var(--gouttiere), env(safe-area-inset-right));
  bottom: var(--s-4);
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: var(--s-3);
  min-height: 44px;
  max-width: calc(100% - 2 * var(--gouttiere));
  pointer-events: none;
}
.media-pied > * { pointer-events: auto; }
html[data-js="1"] .media-pied { padding-right: 56px; }   /* place réservée au bouton : la légende ne bouge pas */
html[data-sequence="active"] .sequence__pied { padding-right: 0; }   /* séquence pilotée : pas de vidéo, pas de bouton */
.media-pied__legende {
  max-width: 62ch;
  font-size: 12px;
  line-height: 1.4;
  color: var(--creme-a70);
  text-align: right;
  text-shadow: 0 1px 12px var(--noir-a60);
}
.media-pied .media-pause { position: absolute; inset: auto 0 auto auto; top: 50%; transform: translateY(-50%); margin: 0; }
@media (max-width: 699.98px) {
  .media-pied { left: max(var(--gouttiere), env(safe-area-inset-left)); bottom: var(--s-3); justify-content: flex-start; }
  .media-pied__legende { text-align: left; }
}

/* --------------------------------------------------------------------------
   3. Héros plein écran : la voiture-école sur le quai du Vieux-Port
   -------------------------------------------------------------------------- */
.hero {
  --texte: var(--blanc-chaud); --texte-2: var(--creme-a70); --lien: var(--blanc-chaud);
  --trait: var(--creme-a20); --survol: var(--creme-a12); --anneau: var(--vert-signal);
  position: relative;
  isolation: isolate;
  display: grid;
  grid-template-rows: 1fr auto;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  background: var(--noir);
  color: var(--blanc-chaud);
}
/* L'approche initiale s'applique au CONTENEUR : affiche et vidéo partagent la même transformation (pas de
   double image pendant le fondu de la vidéo). */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  --focal: 25% 60%;
  transform-origin: var(--focal);
  animation: hero-approche 2600ms var(--e-cinema) both;
}
/* Voile : le ciel s'assombrit sous le texte, le bas sous le bandeau partenaires ; la voiture reste lumineuse */
.hero::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background:
    linear-gradient(to bottom, var(--asphalte-a85) 0%, var(--noir-a60) 24%, var(--noir-a20) 46%, transparent 60%),
    linear-gradient(to top, var(--asphalte-a85) 0%, var(--noir-a40) 18%, transparent 34%);
}
@media (min-width: 900px) and (orientation: landscape) {
  .hero::after {
    background:
      linear-gradient(100deg, var(--asphalte-a70) 0%, var(--noir-a40) 30%, var(--noir-a20) 44%, transparent 62%),
      linear-gradient(to bottom, var(--asphalte-a70) 0%, var(--noir-a40) 26%, transparent 52%),
      linear-gradient(to top, var(--asphalte-a85) 0%, var(--noir-a20) 22%, transparent 36%);
  }
}
.hero__contenu {
  align-self: start;
  display: grid;
  justify-items: start;
  gap: var(--s-4);
  padding-top: calc(var(--h-entete) + env(safe-area-inset-top, 0px) + clamp(20px, 6vh, 72px));
}
.hero__contenu > * { animation: hero-texte var(--d-lent) var(--e-cinema) both; }
.hero__contenu > :nth-child(2) { animation-delay: 120ms; }
.hero__contenu > :nth-child(3) { animation-delay: 240ms; }
.hero__contenu > :nth-child(4) { animation-delay: 360ms; }
.hero__surtitre { color: var(--creme-a70); }
.hero__surtitre sup { font-size: .78em; text-transform: none; letter-spacing: 0; }
.hero__titre {
  max-width: 9.6em;
  font-size: clamp(44px, 1rem + 6.2vw, 112px);
  font-weight: 700;
  line-height: .94;
  letter-spacing: -.035em;
  text-wrap: balance;
}
.hero__chapeau { max-width: 40ch; font-size: var(--fs-l); line-height: 1.5; color: var(--blanc-chaud); }
@media (min-width: 900px) and (orientation: landscape) { .hero__chapeau { max-width: 33ch; } }
.hero__actions { margin-top: var(--s-3); }
/* Contour sur image : un fond fumé opaque garde le texte lisible, même sur la carrosserie blanche */
:is(.hero, .agence) .btn--secondaire { --btn-fond: var(--asphalte-a70); --btn-bord: var(--creme-a70); --btn-texte: var(--blanc-chaud); }
:is(.hero, .agence) .btn--secondaire:hover { --btn-fond: var(--asphalte-a85); --btn-bord: var(--blanc-chaud); }
.hero__titre, .hero__chapeau, .hero__surtitre { text-shadow: 0 1px 22px var(--noir-a40); }
@media (max-width: 599.98px) {
  .hero__chapeau { font-size: var(--fs-base); }
  .hero__actions { width: 100%; }
  .hero__actions .btn { flex: 1 1 100%; min-height: 52px; }
  .hero__quartier { display: none; }
}
@keyframes hero-approche { from { transform: scale(1.05); } to { transform: none; } }
@keyframes hero-texte { from { opacity: 0; transform: translateY(22px); } to { opacity: 1; transform: none; } }

/* Grand écran paysage : le texte tient dans les 40 % de gauche, le voile s'y renforce ; la voiture garde le reste.
   Les deux boutons restent sur UNE rangée (jamais empilés sur le pare-chocs). */
@media (min-width: 1200px) and (orientation: landscape) {
  .hero__contenu > * { max-width: calc(40vw - var(--gouttiere)); }
  .hero__contenu > .hero__actions { max-width: none; flex-wrap: nowrap; }
  .hero__actions .btn { flex: none; white-space: nowrap; }
  .hero__titre { font-size: clamp(64px, 1rem + 5vw, 112px); }
  .hero__chapeau { max-width: 30ch; }
  .hero::after {
    background:
      linear-gradient(100deg, var(--asphalte-a70) 0%, var(--noir-a40) 38%, transparent 58%),
      linear-gradient(to bottom, var(--asphalte-a70) 0%, var(--noir-a40) 24%, transparent 46%),
      linear-gradient(to top, var(--asphalte-a85) 0%, var(--noir-a20) 20%, transparent 34%);
  }
}
/* Portables 1200 à 1439 px (1280 × 800, 1366 × 768) : l'écran est moins haut, le texte descend sur la voiture. Le
   plan glisse vers la droite à taille quasi égale (la voiture passe au tiers droit ; le héros est en overflow: clip),
   son bord gauche se fond dans l'asphalte, et le voile gauche s'étend jusqu'à 46 %. */
@media (min-width: 1200px) and (max-width: 1439.98px) and (orientation: landscape) {
  /* Le plan garde sa taille naturelle (16:9 à la hauteur de l'écran) et se décale : le centre de la voiture (47,8 %
     de la largeur du plan) tombe à 64 % de l'écran ; son bord gauche se fond dans l'asphalte (masque). */
  .hero__media {
    right: auto;
    width: calc(100vh * 16 / 9);
    width: calc(100svh * 16 / 9);
    left: calc(64% - 85vh);
    left: calc(64% - 85svh);
    --focal: 50% 58%;
    -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 22%);
    mask-image: linear-gradient(90deg, transparent 0, #000 22%);
  }
  .hero__titre { font-size: clamp(64px, 1rem + 4.4vw, 80px); }
  .hero::after {
    background:
      linear-gradient(100deg, var(--asphalte-a85) 0%, var(--asphalte-a70) 26%, var(--noir-a40) 46%, transparent 62%),
      linear-gradient(to bottom, var(--asphalte-a70) 0%, var(--noir-a40) 22%, transparent 42%),
      linear-gradient(to top, var(--asphalte-a85) 0%, var(--noir-a20) 20%, transparent 34%);
  }
}

.hero__bas { display: grid; gap: var(--s-3); align-self: end; }
.hero__repere { display: flex; align-items: center; justify-content: space-between; gap: var(--s-4); min-height: 44px; }
.hero__repere .media-pause { position: relative; right: auto; bottom: auto; flex: none; margin-left: auto; }
@media (min-width: 900px) { .hero__legende + .media-pause { margin-left: 0; } }
.hero__defiler {
  display: inline-flex;
  align-items: center;
  gap: 14px;
  min-height: 44px;
  color: var(--creme-a70);
  font-family: var(--police-affichage);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .16em;
  text-transform: uppercase;
  text-decoration: none;
}
.hero__defiler:hover { color: var(--blanc-chaud); }
.hero__defiler-trait { position: relative; display: block; width: 48px; height: 1px; overflow: hidden; background: var(--creme-a20); }
.hero__defiler-trait::after {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--blanc-chaud);
  transform: translateX(-100%);
  animation: hero-trait 2400ms var(--e-cinema) 1400ms 2;   /* deux passages, moins de 5 s : rien ne bouge ensuite */
}
@keyframes hero-trait { 0% { transform: translateX(-100%); } 55%, 100% { transform: translateX(100%); } }
.hero__legende { margin-left: auto; font-size: 12px; line-height: 1.4; color: var(--creme-a70); text-align: right; }
@media (max-width: 899.98px) {
  .hero__defiler, .hero__legende { display: none; }
}

/* Portrait (téléphone, tablette debout) : la vidéo verticale s'arrête AU-DESSUS du bandeau partenaires, posé sur
   l'asphalte : la voiture (65 à 88 % de la hauteur du plan) n'est jamais couverte. Bouton pause en haut à droite. */
@media (orientation: portrait) and (max-aspect-ratio: 4/5) {
  .hero__media { --focal: 50% 62%; position: relative; inset: auto; grid-row: 1; grid-column: 1; }
  .hero__contenu { grid-row: 1; grid-column: 1; }
  .hero__bas { grid-row: 2; gap: 0; }
  .hero__repere { min-height: 0; }
  .hero__repere .media-pause {
    position: absolute;
    top: calc(var(--h-entete) + env(safe-area-inset-top, 0px) + var(--s-3));
    right: max(var(--gouttiere), env(safe-area-inset-right));
    bottom: auto;
    margin: 0;
  }
  .hero::after {
    background: linear-gradient(to bottom, var(--asphalte-a85) 0%, var(--asphalte-a70) 22%, var(--noir-a60) 46%, var(--noir-a20) 58%, transparent 66%);
  }
  .partenaires { background: var(--asphalte); -webkit-backdrop-filter: none; backdrop-filter: none; }
}
/* Le surtitre ne passe jamais sous le bouton pause (en haut à droite) ; le texte monte pour dégager la voiture */
@media (orientation: portrait) and (max-aspect-ratio: 4/5) and (max-width: 599.98px) {
  .hero__contenu { padding-top: calc(var(--h-entete) + env(safe-area-inset-top, 0px) + clamp(12px, 3vh, 40px)); }
  .hero__surtitre { padding-right: 52px; }
}
@media (orientation: portrait) and (max-width: 360px) {
  .hero__surtitre { font-size: 12px; letter-spacing: .1em; }
}
/* Écrans courts : une phrase de chapeau, et « Réserver une leçon » devient un lien (la voiture reste dégagée) */
@media (orientation: portrait) and (max-aspect-ratio: 4/5) and (max-height: 740px) {
  .hero__media { --focal: 50% 45%; }
  .hero__chapeau-suite { display: none; }
  .hero__contenu { gap: var(--s-3); padding-top: calc(var(--h-entete) + env(safe-area-inset-top, 0px) + 12px); }
  .hero__titre { font-size: 40px; }
  .hero__chapeau { font-size: 15px; line-height: 1.45; }
  .hero__actions { margin-top: var(--s-1); --grappe-espace: 0; }
  .hero__actions .btn--primaire { min-height: 48px; }
  .hero__actions .btn--secondaire {
    --btn-fond: transparent; --btn-bord: transparent;
    flex: 0 1 auto;
    min-height: 40px;
    padding-inline: 0;
    text-decoration: underline;
    text-decoration-thickness: 1px;
    text-underline-offset: .25em;
  }
}

/* Bandeau des assurances partenaires, visible dès le premier écran (avec sa mention) — sobre : le bleu n'est
   qu'un accent (filet, flèche, pictogramme) ; le seul aplat coloré du premier écran reste le bouton vert. */
.partenaires {
  --texte: var(--blanc-chaud); --anneau: var(--vert-signal);
  padding: 12px 0 calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--asphalte-a85);
  -webkit-backdrop-filter: blur(16px) saturate(130%);
  backdrop-filter: blur(16px) saturate(130%);
  box-shadow: 0 -1px 0 var(--creme-a12);
}
.partenaires__rail { display: grid; gap: 10px; }
.partenaires__tete { font-size: 12.5px; line-height: 1.45; color: var(--creme-a70); }
.partenaires__titre {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
  font-family: var(--police-affichage);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .14em;
  line-height: 1.3;
  text-transform: uppercase;
  color: var(--blanc-chaud);
  white-space: nowrap;
}
/* Le bleu partenaires en avant-plan sur sombre : sa version texte (#8EADFF, 8,7:1) ; le bleu foncé #1F4FBF ne sert
   qu'aux aplats qui portent du texte blanc. */
.partenaires__titre .i { width: 15px; height: 15px; color: var(--bleu-sortie-texte); stroke-width: 2; }
.partenaires__mention strong { color: var(--blanc-chaud); }
.partenaires__mention a { color: var(--blanc-chaud); font-weight: 600; }
.partenaires__liste { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; padding: 0; list-style: none; }
.partenaires__lien {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  height: 100%;
  min-height: 44px;
  padding: 6px 14px;
  border: 1px solid color-mix(in srgb, var(--bleu-sortie-texte) 62%, transparent);
  border-radius: var(--r-bouton);
  background: var(--noir-2);
  color: var(--blanc-chaud);
  font-family: var(--police-affichage);
  font-size: 13px;
  font-weight: 600;
  line-height: 1.2;
  text-decoration: none;
  transition: background-color var(--d-court) var(--e-douce), border-color var(--d-court) var(--e-douce);
}
.partenaires__lien:is(a):hover { background: var(--bleu-sortie-a10); border-color: var(--bleu-sortie-texte); }
.partenaires__lien .i { width: 16px; height: 16px; flex: none; color: var(--bleu-sortie-texte); stroke-width: 2; }
/* Catégorie sans lien saisi par l'agence : puce non cliquable, filet pointillé, aucune flèche (hero-suite.js) */
.partenaires__lien--attente {
  display: grid;
  align-content: center;
  justify-content: start;
  gap: 1px;
  border: 1px dashed var(--creme-a20);
  background: transparent;
  color: var(--creme-a70);
  cursor: default;
}
.partenaires__attente { font-family: var(--police-texte); font-size: 11.5px; font-weight: 400; line-height: 1.2; color: var(--creme-a70); }
@media (min-width: 900px) {
  .partenaires__rail { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); align-items: center; column-gap: var(--s-6); }
}
/* Mobile : au plus ~96 px — titre et mention en un paragraphe, trois liens en puces contour */
@media (max-width: 599.98px) {
  .partenaires { padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px)); }
  .partenaires__rail { gap: 6px; }
  .partenaires__tete { font-size: 11.5px; line-height: 1.4; }
  .partenaires__titre { font-size: 10.5px; letter-spacing: .12em; }
  .partenaires__titre .i { width: 13px; height: 13px; }
  .partenaires__liste { gap: 6px; }
  .partenaires__lien {
    justify-content: center;
    gap: 4px;
    min-height: 34px;
    padding: 3px 6px;
    line-height: 1.15;
    border-color: var(--creme-a40);
    background: transparent;
    font-size: 12px;
    text-align: center;
  }
  .partenaires__lien .i { width: 12px; height: 12px; }
  .partenaires__lien--attente { justify-content: center; border-color: var(--creme-a20); }
  /* Téléphone : « En cours de sélection » est dit par la mention au-dessus ; il reste lu par les lecteurs d'écran */
  .partenaires__attente { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

/* --------------------------------------------------------------------------
   3 bis. En direct de l'agence : le panneau à messages variables du portique (SPEC-V5 §2.1, direct.js)
   Le cadre garde EXACTEMENT le ratio de la vidéo (16:9 dès 768 px, 9:16 en dessous) et la vidéo le remplit sans
   recadrage (object-fit: fill, jamais cover) : le <canvas> posé en pourcentages de l'écran noir
   (manifest.plans.portique.ecran_panneau, que direct.js relit) tombe pile dessus, à toutes les tailles. Aucune
   transformation sur ce plan (ni approche, ni révélation par masque) : le calage ne bouge jamais.
   -------------------------------------------------------------------------- */
.direct {
  --texte: var(--blanc-chaud); --texte-2: var(--creme-a70); --lien: var(--blanc-chaud); --trait: var(--creme-a20); --anneau: var(--vert-signal);
  position: relative;
  background: var(--noir);
  color: var(--blanc-chaud);
  color-scheme: dark;
}
.direct__plan {
  /* manifest.plans.portique.ecran_panneau (en % de la vidéo) */
  --ecran-hg: 27.19; --ecran-hd: 71.77; --ecran-hh: 24.44; --ecran-hb: 37.78;
  --ecran-vg: 8.7;   --ecran-vd: 91.2;  --ecran-vh: 19.95; --ecran-vb: 28.18;
  --g: var(--ecran-hg); --d: var(--ecran-hd); --h: var(--ecran-hh); --b: var(--ecran-hb);
  position: relative;
  isolation: isolate;
  width: 100%;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--noir);
}
@media (max-width: 767.98px) {
  .direct__plan { aspect-ratio: 9 / 16; --g: var(--ecran-vg); --d: var(--ecran-vd); --h: var(--ecran-vh); --b: var(--ecran-vb); }
}
.direct__plan picture,
.direct__affiche,
.direct__video { position: absolute; inset: 0; display: block; width: 100%; height: 100%; object-fit: fill; }
.direct__video { opacity: 0; transition: opacity 700ms var(--e-cinema); }
.direct__plan[data-lecture="1"] .direct__video { opacity: 1; }
/* Fin du plan : fondu lent vers l'affiche (= première image), puis la lecture repart dessous et réapparaît */
.direct__plan[data-lecture="1"][data-fondu] .direct__video { opacity: 0; transition: opacity 1300ms cubic-bezier(.4, 0, .6, 1); }
html[data-reseau="lent"] .direct__video,
html[data-calme="on"] .direct__video { display: none; }
@media (prefers-reduced-motion: reduce) { .direct__video { display: none; } }

/* L'écran LED : la lumière « tombe » sur le panneau noir (mélange screen), jamais sur le cadre gris */
.direct__panneau {
  position: absolute;
  z-index: 1;
  left: calc(var(--g) * 1%);
  top: calc(var(--h) * 1%);
  width: calc((var(--d) - var(--g)) * 1%);
  height: calc((var(--b) - var(--h)) * 1%);
  mix-blend-mode: screen;
  pointer-events: none;
}
.direct__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background: linear-gradient(to top, var(--asphalte-a85) 0%, var(--noir-a40) 20%, transparent 42%);
}
/* Bas du plan : le titre à gauche ; à droite, aligné sur lui, la grappe des commandes (n/total, précédent, pause,
   suivant), au style des boutons pause des autres plans : le panneau et ses boutons se voient toujours ensemble. */
.direct__titre {
  position: absolute;
  z-index: 2;
  inset: auto 0 0 0;
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s-4) var(--s-5);
  padding-bottom: clamp(20px, 4.5%, 64px);
}
.direct__entete { display: grid; justify-items: start; gap: var(--s-2); min-width: 0; text-shadow: 0 1px 18px var(--noir-a60); }
.direct__titre h2 { font-size: clamp(30px, 1rem + 2.6vw, 60px); line-height: 1; letter-spacing: -.03em; }
.direct__surtitre { display: inline-flex; align-items: center; gap: 10px; color: var(--blanc-chaud); }
.direct__point { width: 8px; height: 8px; border-radius: 50%; background: var(--vert-signal); box-shadow: var(--halo-vert); flex: none; }

.direct__commandes { display: flex; align-items: center; gap: 8px; margin-left: auto; }
.direct__rang {
  display: inline-flex;
  align-items: center;
  height: 44px;
  margin-right: 4px;
  padding: 0 14px;
  border-radius: var(--r-capsule);
  background: var(--asphalte-a45);
  box-shadow: inset 0 0 0 1px var(--creme-a20);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  font-family: var(--police-affichage);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: .08em;
  white-space: nowrap;
  color: var(--blanc-chaud);
  font-variant-numeric: tabular-nums;
}
.direct__bouton {
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--asphalte-a45);
  color: var(--blanc-chaud);
  box-shadow: inset 0 0 0 1px var(--creme-a40);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  transition: background-color var(--d-court) var(--e-douce), box-shadow var(--d-court) var(--e-douce);
}
.direct__bouton:hover { background: var(--asphalte-a70); box-shadow: inset 0 0 0 1px var(--blanc-chaud); }
.direct__bouton .i { width: 18px; height: 18px; }
.direct__bouton[hidden] { display: none; }
.direct__icone-lecture { display: none; }
.direct[data-etat="pause"] .direct__icone-pause { display: none; }
.direct[data-etat="pause"] .direct__icone-lecture { display: block; }
.direct[data-unique] .direct__commandes { display: none; }
html:not([data-js="1"]) .direct__commandes { display: none; }

/* La régie, sous le plan : le message affiché en texte réel (filet de progression au-dessus), puis la liste */
.direct__regie { padding-block: var(--s-5) clamp(48px, 5vw, 80px); }
.direct__barre {
  position: relative;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: var(--s-2) var(--s-5);
  padding-top: var(--s-4);
  border-top: 1px solid var(--creme-a20);
}
.direct__progres {
  position: absolute;
  top: -1px;
  left: 0;
  width: 100%;
  height: 1px;
  background: var(--vert-signal);
  transform-origin: 0 50%;
  transform: scaleX(0);
}
.direct[data-tourne][data-etat="auto"] .direct__progres { animation: direct-progres var(--duree, 4000ms) linear forwards; }
@keyframes direct-progres { to { transform: scaleX(1); } }
.direct__etiquette {
  font-family: var(--police-affichage);
  font-size: 12px;
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  white-space: nowrap;
  color: var(--creme-a70);
}
/* Le message courant et, dessous, invisibles, tous les autres : la hauteur est celle du plus long, la page ne
   bouge pas à chaque changement de message */
.direct__courant { display: grid; align-items: center; min-width: 0; min-height: 44px; }
.direct__courant > * { grid-area: 1 / 1; }
.direct__gabarit { visibility: hidden; }
.direct__message,
.direct__gabarit {
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 600;
  font-size: clamp(19px, 1rem + .9vw, 30px);
  line-height: 1.2;
  letter-spacing: -.01em;
  text-wrap: balance;
}

/* Liste : tous les messages, en casse normale ; un choix l'affiche sur le panneau. 2 colonnes, puis 3 dès 1024 px
   (6 messages = 2 rangées pleines, aucun orphelin). */
.direct__tous { margin-top: var(--s-5); }
.direct__liste { display: grid; padding: 0; list-style: none; }
@media (min-width: 600px) { .direct__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-5); } }
@media (min-width: 1024px) { .direct__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); column-gap: var(--s-6); } }
.direct__liste > li { display: grid; }
.direct__choix,
.direct__liste > li:not(:has(> .direct__choix)) {
  display: grid;
  grid-template-columns: 2.4em minmax(0, 1fr);
  align-items: baseline;
  width: 100%;
  min-height: 48px;
  padding: 12px 0;
  border-top: 1px solid var(--creme-a12);
  color: var(--creme-a70);
  font-size: var(--fs-s);
  line-height: 1.4;
  text-align: left;
  transition: color var(--d-court) var(--e-douce), box-shadow var(--d-court) var(--e-douce);
}
.direct__choix:hover { color: var(--blanc-chaud); }
.direct__num { font-family: var(--police-affichage); font-weight: 600; font-size: 12px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.direct__choix[aria-current="true"],
.direct__liste > li[aria-current="true"] { color: var(--blanc-chaud); box-shadow: inset 0 2px 0 var(--vert-signal); }
.direct__choix[aria-current="true"] .direct__num,
.direct__liste > li[aria-current="true"] .direct__num { color: var(--vert-signal); }
.direct__note { margin-top: var(--s-4); color: var(--creme-a70); }
/* « Exemple · Annonces de l'agence… » : un séparateur, pas d'astérisque collé à la phrase */
.direct__note .badge-exemple { color: var(--blanc-chaud); font-weight: 600; }
.direct__note .badge-exemple::before { content: none; }
.direct__sep { color: var(--creme-a70); }
@media (max-width: 599.98px) {
  .direct__titre { gap: var(--s-3); }
  .direct__commandes { margin-left: 0; }
  .direct__regie { padding-block: var(--s-4) var(--s-6); }
  .direct__barre { grid-template-columns: minmax(0, 1fr); }
  .direct__courant { min-height: 0; align-items: start; }
  .direct__tous { margin-top: var(--s-3); border-bottom: 1px solid var(--creme-a12); }
  .direct__note { margin-top: var(--s-3); }
}

/* --------------------------------------------------------------------------
   4. Engagements et chiffres clés
   -------------------------------------------------------------------------- */
.engagements__tete { display: grid; gap: var(--s-4); margin-bottom: clamp(40px, 4.5vw, 64px); }
.engagements__tete .chapeau { color: var(--texte-2); }
@media (min-width: 1000px) {
  .engagements__tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); column-gap: var(--s-8); align-items: end; }
  .engagements__tete .surtitre { grid-column: 1 / -1; }
}
.chiffres { display: grid; gap: var(--s-6) var(--s-5); padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 360px) { .chiffres { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .chiffres { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.chiffres .chiffre-cle { position: relative; align-content: start; padding-top: var(--s-5); border-top: 1px solid var(--creme-a20); }
/* repère vert signal en tête de chaque chiffre : la seule touche de couleur de la section */
.chiffres .chiffre-cle::before { content: ""; position: absolute; top: -1px; left: 0; width: 40px; height: 2px; background: var(--vert-signal); }
.chiffres .chiffre-cle__libelle { max-width: 30ch; }
@media (max-width: 599.98px) {
  .chiffres { gap: var(--s-5) var(--s-4); }
  .chiffres .chiffre-cle { padding-top: var(--s-4); }
  .chiffres .chiffre-cle > :first-child { font-size: 34px; }
  .chiffres .chiffre-cle__libelle { font-size: var(--fs-s); }
}
.engagements__preuves { margin-top: var(--s-6); }

/* --------------------------------------------------------------------------
   5. Bandeaux cinéma plein cadre
   -------------------------------------------------------------------------- */
.bande {
  --texte: var(--blanc-chaud); --texte-2: var(--creme-a70); --lien: var(--blanc-chaud); --anneau: var(--vert-signal);
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: clamp(380px, 58svh, 640px);
  overflow: clip;
  background: var(--noir);
  color: var(--blanc-chaud);
  color-scheme: dark;
}
.bande__media { position: absolute; inset: 0; z-index: -1; }
.bande__media .media__voile {
  background:
    linear-gradient(to top, var(--asphalte-a85) 0%, var(--noir-a40) 36%, transparent 66%),
    linear-gradient(90deg, var(--noir-a40) 0%, transparent 55%);
}
.bande__texte {
  position: relative;
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding-bottom: clamp(64px, 9vh, 104px);
}
.bande__texte .chapeau { color: var(--blanc-chaud); max-width: 44ch; }
.bande__texte h2 { max-width: 16ch; font-size: clamp(34px, 1rem + 3.8vw, 72px); line-height: 1; letter-spacing: -.03em; }
.bande__texte .surtitre { color: var(--blanc-chaud); }
.bande__texte, .sequence__texte h2, .agence__tete { text-shadow: 0 1px 20px var(--noir-a40); }
@media (orientation: portrait) {
  .bande { min-height: clamp(400px, 66svh, 720px); }
}
@media (max-width: 699.98px) {
  .bande__texte { padding-bottom: 76px; }
}
/* Téléphone : le plan garde sa force sans occuper deux écrans (page ≤ 18 000 px à 375 px) */
@media (max-width: 599.98px) {
  .bande { min-height: clamp(320px, 44svh, 440px); }
  .bande__texte { padding-bottom: 68px; }
}
/* Corniche (assurances), mobile : le titre passe SOUS l'image, la voiture n'est plus cachée par le texte */
@media (max-width: 599.98px) {
  .bande--texte-dessous { min-height: 0; grid-template-rows: auto auto; align-items: stretch; }
  .bande--texte-dessous .bande__media { position: relative; inset: auto; grid-row: 1; grid-column: 1; height: 36svh; min-height: 240px; }
  .bande--texte-dessous .media__voile { background: linear-gradient(to top, var(--noir-a60) 0%, transparent 35%); }
  .bande--texte-dessous .bande__texte { grid-row: 2; grid-column: 1; padding-top: var(--s-5); padding-bottom: var(--s-6); }
  .bande--texte-dessous .media-pied { grid-row: 1; grid-column: 1; position: relative; inset: auto; align-self: end; margin: 0 var(--gouttiere) var(--s-3); }
}
/* Corniche, au-dessus de 600 px : le titre se pose sur la mer, en haut à gauche ; la voiture reste dégagée */
@media (min-width: 600px) {
  .bande--texte-haut { align-items: start; }
  .bande--texte-haut .bande__texte { padding-top: clamp(56px, 10vh, 112px); padding-bottom: 0; }
  /* Voile gauche renforcé (noir à 75 % jusqu'à 45 %) : le grand titre ne passe jamais sur la balustrade claire */
  .bande--texte-haut .media__voile {
    background:
      linear-gradient(100deg, color-mix(in srgb, var(--noir) 75%, transparent) 0%, color-mix(in srgb, var(--noir) 75%, transparent) 30%, var(--noir-a40) 45%, transparent 62%),
      linear-gradient(to bottom, var(--asphalte-a70) 0%, var(--noir-a40) 30%, transparent 58%),
      linear-gradient(to top, var(--noir-a40) 0%, transparent 22%);
  }
}
/* Diptyque C3 | C4 */
.diptyque { display: grid; gap: 2px; background: var(--noir); }
@media (min-width: 900px) { .diptyque { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.bande--demi { min-height: clamp(340px, 50svh, 520px); }
/* Mobile et tablette debout : la phrase C3 / C4 passe en haut (ciel, façades), la voiture reste dégagée */
@media (orientation: portrait) {
  .bande--demi { align-items: start; }
  .bande--demi .bande__texte { padding-top: var(--s-6); padding-bottom: 0; }
  .bande--demi .media__voile {
    background:
      linear-gradient(to bottom, var(--asphalte-a70) 0%, var(--noir-a40) 28%, transparent 52%),
      linear-gradient(to top, var(--noir-a40) 0%, transparent 24%);
  }
}
.bande--demi .bande__texte {
  max-width: 34ch;
  padding-inline: var(--gouttiere);
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 600;
  font-size: clamp(22px, 1rem + 1.1vw, 32px);
  line-height: 1.15;
  letter-spacing: -.012em;
}
.bande__code {
  display: inline-grid;
  place-items: center;
  min-width: 44px;
  height: 28px;
  margin-bottom: var(--s-2);
  padding: 0 10px;
  border-radius: var(--r-capsule);
  box-shadow: inset 0 0 0 1px var(--creme-a40);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}
/* Téléphone : C3 puis C4, empilés (une colonne) : l'image en 16:9 pleine largeur, la légende sur une ligne à côté
   du bouton pause, posée sur l'image ; la phrase dessous. */
@media (max-width: 599.98px) {
  .diptyque { grid-template-columns: minmax(0, 1fr); gap: 0; }
  .bande--demi { min-height: 0; grid-template-rows: auto auto; align-items: start; }
  .bande--demi .bande__media { position: relative; inset: auto; grid-row: 1; grid-column: 1; aspect-ratio: 16 / 9; }
  .bande--demi .media__voile { background: linear-gradient(to top, var(--noir-a60) 0%, transparent 42%); }
  .bande--demi .bande__texte { grid-row: 2; grid-column: 1; max-width: none; padding: var(--s-4) var(--gouttiere) var(--s-5); font-size: 18px; line-height: 1.3; letter-spacing: -.005em; }
  .bande--demi .bande__code { min-width: 40px; height: 24px; margin-bottom: 6px; font-size: 12px; }
  .bande--demi .media-pied {
    grid-row: 1; grid-column: 1; position: relative; inset: auto; align-self: end;
    max-width: none; margin: 0 var(--gouttiere) var(--s-2); min-height: 44px;
    justify-content: space-between; gap: var(--s-3);
  }
  html[data-js="1"] .bande--demi .media-pied { padding-right: 0; }
  .bande--demi .media-pied__legende { overflow: hidden; font-size: 11.5px; white-space: nowrap; text-overflow: ellipsis; }
  .bande--demi .media-pied .media-pause { position: relative; inset: auto; top: auto; transform: none; flex: none; }
}

/* --------------------------------------------------------------------------
   6. Formations : cartes éditoriales à filet, un seul bouton plein (la formule de référence)
   -------------------------------------------------------------------------- */
.formules__liste { display: grid; gap: var(--s-5); padding: 0; list-style: none; grid-template-columns: minmax(0, 1fr); }
@media (min-width: 600px) { .formules__liste { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .formules__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.formule { display: grid; }
.formule__carte {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
  padding: clamp(24px, 2.4vw, 36px);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: var(--ombre-fine);
  transition: border-color var(--d-moyen) var(--e-cinema);
}
main .formule__carte:hover { border-color: var(--creme-a40); }
/* La formule de référence : un étage au-dessus, filet vert signal en tête, bord plus lumineux */
main .formule--phare .formule__carte {
  border-color: var(--creme-a40);
  background: linear-gradient(to bottom, color-mix(in srgb, var(--vert-signal) 7%, var(--etage-3)), var(--etage-3) 46%);
  box-shadow: inset 0 2px 0 var(--vert-signal), 0 28px 56px -32px var(--noir-a60);
}
main .formule--phare { --texte-2: var(--creme-a70); }
.formule__pour {
  order: 1;
  font-family: var(--police-affichage);
  font-size: var(--fs-mention);
  font-weight: 600;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--texte-2);
}
.formule__nom { order: 2; font-size: clamp(24px, 1rem + .9vw, 30px); line-height: 1.1; letter-spacing: -.015em; font-weight: 650; }
.formule__duree { order: 3; display: flex; align-items: center; gap: 8px; font-weight: 700; font-size: var(--fs-s); color: var(--texte); }
.formule__duree::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--vert-signal); flex: none; }
.formule__detail { order: 4; }
.formule__desc { color: var(--texte-2); line-height: 1.55; }
.formule__prix {
  order: 5;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 10px;
  margin-top: auto;
  padding-top: var(--s-4);
  border-top: 1px solid var(--trait);
}
.formule__libelle { width: 100%; font-size: var(--fs-s); color: var(--texte-2); }
.formule__montant {
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 650;
  font-size: clamp(32px, 1.2rem + 1.2vw, 42px);
  line-height: 1;
  letter-spacing: -.02em;
  font-variant-numeric: tabular-nums;
}
.formule__montant--texte { font-size: var(--fs-l); letter-spacing: 0; }
.formule__ttc { font-size: var(--fs-s); font-weight: 700; color: var(--texte-2); }
.formule__note { width: 100%; font-size: var(--fs-s); color: var(--texte-2); }
.formule__actions { order: 6; display: flex; flex-wrap: wrap; align-items: center; gap: var(--s-3); min-height: 48px; }
.formule__actions .btn { flex: 1 1 auto; }
.formule__choisir { color: var(--texte); }
.formules__mentions { margin-top: var(--s-6); max-width: 90ch; }
/* Mobile : carrousel interne (défilement DANS la liste, jamais de la page), prix et choix visibles d'emblée,
   le détail repliable sous le choix */
@media (max-width: 599.98px) {
  .formules__liste[role="list"] {
    grid-auto-flow: column;
    grid-auto-columns: 85vw;
    grid-template-columns: none;
    gap: var(--s-3);
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 2px var(--gouttiere) var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: thin;
  }
  .formule { scroll-snap-align: start; min-width: 0; }
  .formule__carte { padding: var(--s-5); gap: var(--s-2); }
  .formule__prix { margin-top: var(--s-2); padding-top: var(--s-3); }
  .formule__detail { order: 7; border-top: 1px solid var(--trait); }
  .formule__detail .formule__desc { padding-bottom: var(--s-2); font-size: var(--fs-s); }
}

/* --------------------------------------------------------------------------
   7. Réservation : séquence pilotée au défilement (le créneau en bataille)
   -------------------------------------------------------------------------- */
.reservation { --anneau: var(--vert-signal); }
.sequence { position: relative; }
.sequence__scene {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: end;
  min-height: 100vh;
  min-height: 100svh;
  overflow: clip;
  background: var(--noir);
}
/* La hauteur de la séquence est connue dès la première peinture (aucun décalage des ancres plus bas) :
   mouvement autorisé, connexion normale, JavaScript actif. sequence.js pose data-sequence="absente" s'il n'y a
   pas d'images (repli vidéo), "active" quand le canvas est piloté. */
@media (prefers-reduced-motion: no-preference) {
  html[data-js="1"][data-calme="off"][data-reseau="normal"]:not([data-sequence="absente"]) .sequence { height: 165vh; height: 165svh; }
  html[data-js="1"][data-calme="off"][data-reseau="normal"]:not([data-sequence="absente"]) .sequence__scene { position: sticky; top: 0; height: 100vh; height: 100svh; min-height: 0; }
}
@media (prefers-reduced-motion: no-preference) and (max-width: 899.98px) {
  html[data-js="1"][data-calme="off"][data-reseau="normal"]:not([data-sequence="absente"]) .sequence { height: 160vh; height: 160svh; }
}
/* Téléphone : un quart d'écran de course suffit aux 48 images (une poussée du pouce) ; la page reste courte */
@media (prefers-reduced-motion: no-preference) and (max-width: 599.98px) {
  html[data-js="1"][data-calme="off"][data-reseau="normal"]:not([data-sequence="absente"]) .sequence { height: 125vh; height: 125svh; }
}
.sequence__media { position: absolute; inset: 0; z-index: -1; --focal: 45% 55%; }
.sequence__canvas { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; transition: opacity 500ms var(--e-cinema); }
.sequence__media[data-pret] .sequence__canvas { opacity: 1; }
.sequence__media .media__voile {
  background:
    linear-gradient(100deg, var(--asphalte-a85) 0%, var(--noir-a60) 34%, var(--noir-a20) 52%, transparent 68%),
    linear-gradient(to top, var(--noir-a60) 0%, transparent 40%);
}
@media (min-width: 900px) { .sequence__media { --focal: 25% 55%; } }
.sequence__texte { display: grid; justify-items: start; gap: var(--s-5); padding-bottom: clamp(56px, 11vh, 128px); }
.sequence__texte h2 { max-width: 13ch; font-size: clamp(32px, 1rem + 3.4vw, 66px); line-height: 1.02; letter-spacing: -.03em; }
.sequence__texte .surtitre { color: var(--creme-a70); }
/* Étapes : le filet de progression passe À GAUCHE des numéros (jamais à travers le « 0 ») */
.sequence__texte .etapes {
  --p-etapes: 1;
  position: relative;
  display: grid;
  gap: 0;
  width: min(100%, 34rem);
  padding: 0 0 0 24px;
  list-style: none;
}
.etapes::before, .etapes::after { content: ""; position: absolute; left: 0; top: 6px; bottom: 6px; width: 1px; }
.etapes::before { background: var(--creme-a20); }
.etapes::after { background: var(--vert-signal); transform-origin: 50% 0; transform: scaleY(var(--p-etapes)); }
.etape { display: grid; grid-template-columns: 40px 1fr; align-items: baseline; gap: 4px; padding: 12px 0; font-size: var(--fs-l); line-height: 1.4; }
.etape + .etape { border-top: 1px solid var(--creme-a12); }
.etape__num { font-family: var(--police-affichage); font-weight: 600; font-size: 13px; letter-spacing: .08em; color: var(--creme-a70); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) { .sequence__texte .etapes { width: min(100%, 28rem); } }
html[data-sequence="active"] .etapes { --p-etapes: var(--p, 0); }
html[data-sequence="active"] .etape { opacity: 0; transform: translateY(18px); transition: opacity 600ms var(--e-cinema), transform 600ms var(--e-cinema); }
html[data-sequence="active"] .etape[data-active] { opacity: 1; transform: none; }
/* Mobile et tablette debout : l'image occupe toute la place que laisse le texte (aucune marge morte) */
@media (max-width: 899.98px) {
  .sequence__scene { align-items: stretch; grid-template-rows: minmax(0, 1fr) auto; }
  .sequence__media { position: relative; inset: auto; grid-row: 1; grid-column: 1; min-height: 34svh; }
  .sequence__media .media__voile { background: linear-gradient(to top, var(--noir) 0%, var(--noir-a20) 22%, transparent 45%); }
  .sequence__texte { grid-row: 2; grid-column: 1; padding-top: var(--s-4); padding-bottom: clamp(28px, 5vh, 56px); gap: var(--s-4); }
  .sequence__texte h2 { max-width: 16ch; font-size: clamp(28px, 1rem + 3.4vw, 44px); }
  .etape { font-size: var(--fs-base); padding: 10px 0; }
  .sequence__pied { grid-row: 1; grid-column: 1; position: relative; inset: auto; align-self: end; margin: 0 var(--gouttiere) var(--s-2); }
  .sequence__pied .media-pied__legende { max-width: none; }
  html[data-barre-bas="1"] .sequence__texte { padding-bottom: calc(var(--h-barre-bas) + var(--zone-sure-bas) + var(--s-4)); }
}
@media (max-width: 899.98px) and (max-height: 700px) {
  .etape { padding: 7px 0; }
  .sequence__texte { gap: var(--s-3); }
}

/* Après la séquence : à gauche le texte, à droite un vrai aperçu de l'espace élève (les créneaux passent sur le
   panneau « En direct de l'agence », §3 bis) */
.reservation__suite { display: grid; gap: var(--s-7); align-items: center; }
@media (min-width: 960px) { .reservation__suite { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); } }
.reservation__gauche { display: grid; gap: var(--s-6); align-content: start; }
.reservation__texte { display: grid; gap: var(--s-4); align-content: start; justify-items: start; }
.reservation__texte .surtitre { color: var(--gris); }
.reservation__texte h3 { font-size: var(--fs-h3); max-width: 20ch; }
.reservation__texte p { color: var(--texte-2); max-width: 46ch; }
.reservation__actions { margin-top: var(--s-2); }
.apercu { display: grid; gap: var(--s-3); margin: 0; perspective: 1800px; }
.apercu__cadre {
  overflow: hidden;
  padding: 8px;
  border-radius: calc(var(--r-carte) + 6px);
  background: var(--noir-3);
  box-shadow: var(--ombre-sombre), inset 0 0 0 1px var(--creme-a12);
}
.apercu__cadre picture, .apercu__image { display: block; width: 100%; height: auto; border-radius: var(--r-carte); }
.apercu__legende { font-size: 12px; line-height: 1.4; color: var(--gris); }
@media (min-width: 960px) {
  .apercu__cadre { transform: rotateY(-7deg) rotateX(2deg); transform-origin: 0 50%; }
}

/* --------------------------------------------------------------------------
   8. Le code
   -------------------------------------------------------------------------- */
.code__offre { display: grid; gap: var(--s-2); margin-top: var(--s-3); }
.code__offre p:first-child { font-weight: 700; }
.code__actions { margin-top: var(--s-2); }
.code__grille { display: grid; gap: var(--s-7); align-items: start; }
@media (min-width: 960px) { .code__grille { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: var(--s-8); } }
.code__infos, .code__droite { display: grid; gap: var(--s-4); align-content: start; }
.code__droite { gap: var(--s-5); }
.code__infos h3 { font-size: var(--fs-h3); }
.code__infos h4 { margin-top: var(--s-5); font-size: var(--fs-l); }
.centres { display: grid; padding: 0; list-style: none; }
.centres__detail .mention { margin-top: var(--s-3); }
.centre { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 4px 16px; align-items: baseline; padding: 12px 0; border-top: 1px solid var(--trait); }
.centre:last-child { border-bottom: 1px solid var(--trait); }
.centre__nom { font-weight: 700; }
.centre__adresse { grid-column: 1; color: var(--texte-2); font-size: var(--fs-s); }
.centre .lien-externe { grid-row: 1 / span 2; grid-column: 2; align-self: center; min-height: 44px; font-size: var(--fs-s); font-weight: 600; }
.code__ville { display: grid; gap: var(--s-2); padding: var(--s-5); border-radius: var(--r-carte); background: var(--surface); border: 1px solid var(--trait); }
.code__ville h4 { margin: 0; font-size: var(--fs-l); }

/* Testez-vous : trois questions */
.quiz { display: grid; gap: var(--s-4); align-content: start; }
.quiz__titre { font-size: var(--fs-h3); }
.quiz__sansjs { color: var(--texte-2); }
.quiz__progression { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-mention); letter-spacing: .12em; text-transform: uppercase; color: var(--texte-2); }
.quiz__question { display: grid; gap: var(--s-3); border: 0; padding: 0; margin: 0; min-width: 0; }
.quiz__enonce { padding: 0; margin-bottom: var(--s-3); font-weight: 700; font-size: var(--fs-l); line-height: 1.35; }
.quiz__enonce:focus { outline: none; }
.quiz__reponses { display: grid; gap: 8px; }
.reponse {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  min-height: 52px;
  padding: 12px 16px;
  border: 1px solid var(--trait);
  border-radius: var(--r-bouton);
  background: var(--fond);
  color: var(--texte);
  line-height: 1.35;
  text-align: left;
  transition: border-color var(--d-court) var(--e-douce), background-color var(--d-court) var(--e-douce);
}
.reponse:hover:not(:disabled) { border-color: var(--texte); }
.reponse:disabled { cursor: default; color: var(--texte); }
.reponse__marque { flex: none; font-size: var(--fs-mention); font-weight: 700; letter-spacing: .04em; }
.reponse[data-etat="juste"] { border-color: var(--vert-signal); box-shadow: inset 3px 0 0 var(--vert-signal); }
.reponse[data-etat="faux"] { border-color: var(--orange-alerte); box-shadow: inset 3px 0 0 var(--orange-alerte); }
.quiz__explication { padding: var(--s-4); border-radius: var(--r-bouton); background: var(--fond); line-height: 1.55; }
.quiz__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); }
.quiz__score { font-family: var(--police-affichage); font-weight: 600; font-size: var(--fs-h3); }

/* --------------------------------------------------------------------------
   9. La formation : quatre compétences
   -------------------------------------------------------------------------- */
.formation { padding-bottom: 0; }
.formation .bande__texte .chapeau { max-width: 52ch; }
.formation .bande__texte h2 { max-width: 20ch; }   /* deux lignes : le titre laisse les mains sur le volant visibles */
.competences { display: grid; gap: var(--s-7) var(--s-6); padding: 0; list-style: none; }
@media (min-width: 760px) { .competences { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1200px) { .competences { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-6); } }
.competence { display: grid; align-content: start; gap: var(--s-4); padding-top: var(--s-5); border-top: 1px solid var(--creme-a40); }
.competence__code {
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 600;
  font-size: clamp(44px, 1.5rem + 2.4vw, 72px);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--blanc-chaud);
}
.competence h3 { font-size: var(--fs-l); line-height: 1.3; }
@media (min-width: 760px) { .competence h3 { min-height: 3.9em; min-height: 3lh; } }   /* listes alignées */
.competence .liste-filet > li { padding: 9px 0; color: var(--creme-a70); font-size: var(--fs-s); border-color: var(--creme-a12); }
@media (max-width: 599.98px) {
  .competences { gap: var(--s-4); }
  .competence { grid-template-columns: auto minmax(0, 1fr); column-gap: var(--s-4); row-gap: var(--s-1); padding-top: var(--s-4); }
  .competence__code { font-size: 34px; }
  .competence h3 { align-self: center; font-size: var(--fs-base); }
  .competence__detail { grid-column: 1 / -1; }
}

/* --------------------------------------------------------------------------
   10. Parents, tarifs, financements
   -------------------------------------------------------------------------- */
.parents__points { padding: 0; list-style: none; --grille-espace: var(--s-6); }
.parents__points > li { display: grid; align-content: start; gap: var(--s-3); padding-top: var(--s-5); border-top: 1px solid var(--creme-a20); }
.parents__points h3 { font-size: var(--fs-h3); }
.parents__points p { color: var(--texte-2); }
.parents__points a { display: inline-block; margin-top: 6px; font-weight: 600; }

.budget {
  display: grid;
  gap: 0;
  overflow: clip;     /* pas « hidden » : la colonne des réglages peut rester collante */
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--surface);
  box-shadow: var(--ombre);
}
.budget__sansjs { padding: var(--s-6); color: var(--texte-2); }
html[data-js="1"] .budget__sansjs { display: none; }
.budget__demande { padding: var(--s-6); }
.budget__jeu { display: grid; }
@media (min-width: 960px) {
  .budget__jeu { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); }
  .budget__reglages { position: sticky; top: calc(var(--h-entete) + var(--s-5)); align-self: start; }
}
.budget__reglages { display: grid; align-content: start; gap: var(--s-2); padding: clamp(24px, 3vw, 44px); }
.budget__reglages .champ { margin-bottom: var(--s-4); }
.budget__note { margin: -8px 0 var(--s-4); font-size: var(--fs-s); color: var(--texte-2); }
.budget__resume {
  display: grid;
  align-content: start;
  gap: var(--s-5);
  padding: clamp(24px, 3vw, 44px);
  background: var(--fond);
  border-top: 1px solid var(--trait);
}
@media (min-width: 960px) { .budget__resume { border-top: 0; border-left: 1px solid var(--trait); } }
.budget__total { display: grid; gap: 6px; }
.budget__total-libelle { font-size: var(--fs-s); font-weight: 700; color: var(--texte-2); }
.budget__montant {
  font-family: var(--police-affichage);
  font-stretch: var(--largeur-titre);
  font-weight: 650;
  font-size: clamp(48px, 2rem + 3vw, 88px);
  line-height: .95;
  letter-spacing: -.035em;
  font-variant-numeric: tabular-nums;
}
.budget__phrase { color: var(--texte-2); font-size: var(--fs-s); line-height: 1.5; }
.budget__colonnes { display: grid; gap: var(--s-5); }
@media (min-width: 600px) { .budget__colonnes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.budget__col h3 { margin-bottom: var(--s-2); font-size: var(--fs-base); font-weight: 650; letter-spacing: 0; }
.budget__lignes { display: grid; padding: 0; list-style: none; font-size: var(--fs-s); }
.budget__lignes li { display: flex; justify-content: space-between; gap: var(--s-3); padding: 8px 0; border-top: 1px solid var(--trait); line-height: 1.4; }
.budget__somme { flex: none; white-space: nowrap; font-weight: 700; font-variant-numeric: tabular-nums; }
.budget__envoi { display: grid; gap: var(--s-3); justify-items: start; }
.budget__lien { display: grid; gap: 6px; width: 100%; }

/* Segments (boîte) */
.segments { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0; padding: 4px; border-radius: var(--r-bouton); background: var(--fond); box-shadow: inset 0 0 0 1px var(--trait); }
.segment { position: relative; display: grid; }
.segment input { position: absolute; inset: 0; opacity: 0; margin: 0; cursor: pointer; }
.segment span { display: grid; place-items: center; min-height: 44px; padding: 0 12px; border-radius: 4px; font-weight: 600; transition: background-color var(--d-court) var(--e-douce), color var(--d-court) var(--e-douce); }
.segment input:checked + span { background: var(--blanc-chaud); color: var(--noir); }
.segment input:focus-visible + span { outline: 2px solid var(--anneau); outline-offset: 2px; }

/* Curseur des heures : piste lisible (gris ≥ 3:1), progression verte, pouce plein, repères 20 · 30 · 40 h */
.budget input[type="range"] {
  --p: 0%;
  width: 100%;
  height: 44px;
  margin: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  cursor: pointer;
}
.budget input[type="range"]::-webkit-slider-runnable-track { height: 4px; border-radius: 2px; background: linear-gradient(to right, var(--vert-signal) var(--p), var(--gris) var(--p)); }
.budget input[type="range"]::-moz-range-track { height: 4px; border-radius: 2px; background: var(--gris); }
.budget input[type="range"]::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--vert-signal); }
.budget input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  margin-top: -9px;
  border-radius: 50%;
  background: var(--vert-signal);
  box-shadow: 0 0 0 3px var(--noir), 0 1px 6px var(--noir-a60);
}
.budget input[type="range"]::-moz-range-thumb { width: 18px; height: 18px; border: 3px solid var(--noir); border-radius: 50%; background: var(--vert-signal); box-shadow: 0 1px 6px var(--noir-a60); }
.budget input[type="range"]:focus-visible { outline: 2px solid var(--anneau); outline-offset: 2px; }
.budget__reperes { position: relative; height: 18px; margin: -8px 11px var(--s-2); font-size: 12px; line-height: 18px; color: var(--texte-2); font-variant-numeric: tabular-nums; }
.budget__reperes span { position: absolute; top: 0; left: calc(var(--x, 0) * 100%); transform: translateX(-50%); white-space: nowrap; }
.budget output { font-variant-numeric: tabular-nums; }

.financements { margin-top: clamp(48px, 5vw, 72px); }
.financements__titre { margin-bottom: var(--s-5); font-size: var(--fs-h3); }
.financements__liste { padding: 0; list-style: none; }
.financement { display: grid; align-content: start; gap: var(--s-3); padding: var(--s-5); border: 1px solid var(--trait); border-radius: var(--r-carte); background: var(--surface); }
.financement h4 { font-size: var(--fs-l); }
.financement p { color: var(--texte-2); font-size: var(--fs-s); line-height: 1.55; }
.financement .financement__statut { color: var(--texte); font-weight: 600; }
@media (min-width: 600px) {
  .financement { display: flex; flex-direction: column; }
  .financement__detail { order: -1; }          /* ordinateur : les conditions, puis le statut */
  .financement h4 { order: -2; }
}
@media (max-width: 599.98px) {
  .financement { gap: var(--s-2); padding: var(--s-4) var(--s-5); }
  .financements__liste { --grille-espace: var(--s-3); }
}

.lyceens {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-4) var(--s-6);
  margin-top: clamp(40px, 4vw, 56px);
  padding: clamp(24px, 3vw, 40px);
  border-radius: var(--r-carte);
  background: var(--surface);
  border: 1px solid var(--trait);
}
.lyceens > div { display: grid; gap: var(--s-2); max-width: 60ch; }
.lyceens h3 { font-size: var(--fs-h3); }
.lyceens p { color: var(--texte-2); }

/* --------------------------------------------------------------------------
   11. Assurances partenaires : cartes sombres et sobres ; le bleu n'est qu'un accent
   -------------------------------------------------------------------------- */
.assurances__mention { margin-bottom: var(--s-6); max-width: 90ch; }
.assurances__liste { display: grid; gap: var(--s-4); padding: 0; list-style: none; }
@media (min-width: 760px) { .assurances__liste { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.assurances__liste > li { display: grid; }
.assurance {
  --anneau: var(--vert-signal);
  display: grid;
  grid-template-rows: auto auto 1fr;
  gap: 6px;
  min-height: 168px;
  padding: var(--s-5);
  border: 1px solid var(--creme-a20);
  border-radius: var(--r-carte);
  background: var(--noir-2);
  color: var(--blanc-chaud);
  text-decoration: none;
  transition: background-color var(--d-court) var(--e-douce), border-color var(--d-court) var(--e-douce);
}
a.assurance:hover { background: var(--bleu-sortie-a10); border-color: var(--bleu-sortie-texte); }
/* Catégorie sans lien saisi par l'agence : carte non cliquable, filet pointillé, statut sobre (assurances.js) */
.assurance--attente { border-style: dashed; background: var(--etage-1); }
.assurance__statut {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  justify-self: start;
  margin-top: var(--s-4);
  font-size: var(--fs-s);
  color: var(--gris-texte);
}
.assurance__statut::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 50%; box-shadow: inset 0 0 0 1.5px currentColor; }
.assurance__libelle { font-family: var(--police-affichage); font-stretch: var(--largeur-titre); font-weight: 650; font-size: clamp(22px, 1rem + .8vw, 28px); line-height: 1.1; color: var(--blanc-chaud); }
.assurance__sous, .assurance__partenaires { font-size: var(--fs-s); color: var(--gris); }
.assurance__cta {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  align-self: end;
  justify-self: start;
  margin-top: var(--s-4);
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: var(--fs-s);
  color: var(--blanc-chaud);
  text-decoration: underline;
  text-decoration-color: var(--bleu-sortie-texte);
  text-decoration-thickness: 2px;
  text-underline-offset: 5px;
}
.assurance__cta .i { width: 18px; height: 18px; color: var(--bleu-sortie-texte); stroke-width: 2; }
@media (max-width: 759.98px) {
  .assurances__liste { gap: var(--s-3); }
  .assurance { grid-template-columns: minmax(0, 1fr) auto; grid-template-rows: auto auto; column-gap: var(--s-3); row-gap: 4px; min-height: 0; padding: var(--s-4) var(--s-5); }
  .assurance__libelle { grid-column: 1 / -1; font-size: 21px; }
  .assurance__sous, .assurance__partenaires { grid-column: 1; }
  .assurance__cta { grid-column: 2; grid-row: 2; margin: 0; align-self: center; }
  .assurance__statut { grid-column: 1 / -1; margin-top: var(--s-2); }
}
.assurances__infos { margin-top: var(--s-7); --grille-espace: var(--s-4); }
.assurances__infos .encart { display: grid; gap: var(--s-3); align-content: start; }
.assurances__infos h3 { font-size: var(--fs-l); }
.assurances__infos p { color: var(--creme-a70); line-height: 1.55; }
.assurances__infos .lien-fleche { color: var(--blanc-chaud); }

/* --------------------------------------------------------------------------
   12. Véhicules
   -------------------------------------------------------------------------- */
.autos { display: grid; gap: var(--s-5); margin-bottom: var(--s-6); padding: 0; list-style: none; }
@media (min-width: 720px) { .autos { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .autos { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* Téléphone : les fiches défilent DANS la liste (comme les formules), jamais la page */
@media (max-width: 599.98px) {
  .autos[role="list"] {
    grid-auto-flow: column;
    grid-auto-columns: 85vw;
    grid-template-columns: none;
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 2px var(--gouttiere) var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: thin;
  }
  .autos > li { scroll-snap-align: start; min-width: 0; }
}
@media (min-width: 600px) and (max-width: 719.98px) { .autos > li:nth-child(n+3) { display: none; } }
.autos > li { display: grid; }
.auto {
  position: relative;
  display: grid;
  grid-template-rows: auto auto auto 1fr auto;
  gap: var(--s-2);
  padding: clamp(24px, 2.4vw, 32px);
  border: 1px solid var(--trait);
  border-radius: var(--r-carte);
  background: var(--surface);
  color: var(--texte);
  text-decoration: none;
  transition: border-color var(--d-moyen) var(--e-cinema);
}
.auto:hover { border-color: var(--texte-2); }
.auto__marque { font-family: var(--police-affichage); font-size: var(--fs-mention); font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--texte-2); }
.auto__modele { font-family: var(--police-affichage); font-stretch: var(--largeur-titre); font-weight: 650; font-size: clamp(28px, 1rem + 1.4vw, 40px); line-height: 1; letter-spacing: -.025em; }
.auto__version { color: var(--texte-2); }
.auto__specs { display: flex; flex-wrap: wrap; gap: 6px 16px; align-content: start; margin-top: var(--s-3); padding: var(--s-3) 0; border-block: 1px solid var(--trait); font-size: var(--fs-s); font-variant-numeric: tabular-nums; }
.auto__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-2) var(--s-3); margin-top: var(--s-3); }
.auto__prix { font-family: var(--police-affichage); font-weight: 650; font-size: clamp(24px, 1rem + .8vw, 30px); letter-spacing: -.015em; font-variant-numeric: tabular-nums; }
.auto__badges { display: flex; flex-wrap: wrap; gap: 6px; }
.auto__concession { width: 100%; font-size: var(--fs-s); color: var(--texte-2); }
.raccourcis { --grappe-espace: 8px; margin-bottom: var(--s-4); }
.raccourci {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 0 18px;
  border: 1px solid var(--trait);
  border-radius: var(--r-capsule);
  color: var(--texte);
  font-weight: 600;
  text-decoration: none;
  transition: border-color var(--d-court) var(--e-douce), background-color var(--d-court) var(--e-douce);
}
.raccourci:hover { border-color: var(--texte); background: var(--survol); }
.vehicules__mention [data-concessions] { margin-right: .4em; color: var(--texte); }
@media (max-width: 599.98px) { .autos { gap: var(--s-3); } .auto { padding: var(--s-5); } }

/* --------------------------------------------------------------------------
   13. Équipe : un bloc de la réservation (#reserver), fiches sur l'étage 2, boutons alignés en pied de fiche
   -------------------------------------------------------------------------- */
.equipe { padding-bottom: clamp(72px, 8vw, 128px); }
.equipe__tete { display: grid; gap: var(--s-3) var(--s-8); margin-bottom: var(--s-6); padding-top: var(--s-6); border-top: 1px solid var(--creme-a12); }
.equipe__tete > div { display: grid; gap: var(--s-3); }
.equipe__tete h3 { font-size: var(--fs-h2); font-weight: var(--graisse-titre); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
.equipe__tete .chapeau { max-width: 46ch; color: var(--texte-2); }
@media (min-width: 1000px) { .equipe__tete { grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); align-items: end; } }
.reservation__suite:has(+ .equipe:not([hidden])) { padding-bottom: clamp(48px, 5vw, 72px); }
.moniteurs { display: grid; gap: var(--s-5); padding: 0; list-style: none; }
@media (min-width: 720px) { .moniteurs { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .moniteurs { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.moniteur { display: flex; flex-direction: column; gap: var(--s-3); padding: clamp(24px, 2.4vw, 32px); border: 1px solid var(--trait); border-radius: var(--r-carte); background: var(--surface); }
.moniteur__prenom { font-stretch: var(--largeur-titre); font-weight: var(--graisse-titre); font-size: clamp(28px, 1rem + 1.4vw, 40px); line-height: 1; letter-spacing: -.025em; }
.moniteur__boites { display: flex; flex-wrap: wrap; gap: 6px; padding: 0; list-style: none; }
.moniteur__specialite { font-weight: 700; }
.moniteur__phrase { color: var(--texte-2); }
.moniteur__pied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--s-3); margin-top: auto; padding-top: var(--s-4); border-top: 1px solid var(--trait); }
.moniteur__libres { font-size: var(--fs-s); color: var(--texte-2); }
.moniteur__libres .chiffre { color: var(--texte); font-size: var(--fs-l); }
@media (max-width: 599.98px) {
  .moniteurs[role="list"] {
    grid-auto-flow: column;
    grid-auto-columns: 85vw;
    grid-template-columns: none;
    gap: var(--s-3);
    margin-inline: calc(-1 * var(--gouttiere));
    padding: 2px var(--gouttiere) var(--s-4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    scrollbar-width: thin;
  }
  .moniteur { scroll-snap-align: start; min-width: 0; padding: var(--s-5); }
}

/* --------------------------------------------------------------------------
   14. Questions fréquentes et avis
   -------------------------------------------------------------------------- */
.faq__grille { display: grid; gap: var(--s-6); }
@media (min-width: 1000px) {
  .faq__grille { grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr); column-gap: var(--s-8); align-items: start; }
  .faq__grille > .tete-section { position: sticky; top: calc(var(--h-entete) + var(--s-6)); }
  .avis { grid-column: 2; }
}
.faq__liste { border-top: 1px solid var(--creme-a40); }
.question { border-bottom: 1px solid var(--trait); }
.question summary {
  position: relative;
  display: flex;
  align-items: center;
  min-height: 64px;
  padding: 16px 48px 16px 0;
  font-family: var(--police-affichage);
  font-weight: 600;
  font-size: var(--fs-l);
  line-height: 1.3;
  list-style: none;
  cursor: pointer;
}
.question summary::-webkit-details-marker { display: none; }
.question summary::before, .question summary::after {
  content: "";
  position: absolute;
  right: 8px;
  top: 50%;
  width: 16px;
  height: 1.5px;
  background: currentColor;
  transition: transform var(--d-moyen) var(--e-cinema);
}
.question summary::after { transform: rotate(90deg); }
.question[open] summary::after { transform: rotate(0deg); }
.question summary:hover { color: var(--lien); }
.question__reponse { padding: 0 48px 24px 0; color: var(--texte-2); line-height: 1.6; }
@media (max-width: 599.98px) { .question summary { min-height: 56px; padding-block: 12px; font-size: var(--fs-base); } }
.avis { display: grid; gap: var(--s-4); margin-top: var(--s-6); }
.avis__liste { display: grid; gap: var(--s-4); padding: 0; list-style: none; }
.avis__carte { display: grid; gap: var(--s-3); margin: 0; padding: var(--s-5); border-radius: var(--r-carte); background: var(--surface); border: 1px solid var(--trait); }
.avis__texte { margin: 0; font-size: var(--fs-l); line-height: 1.5; }
.avis__meta { display: grid; gap: 2px; font-size: var(--fs-s); color: var(--texte-2); }
.avis__auteur { font-weight: 700; color: var(--texte); }

/* --------------------------------------------------------------------------
   15. L'agence : final au belvédère
   Le plan tient la scène (titre sur le ciel, la voiture et la ville libres) ; l'accès, les coordonnées et les
   appels à l'action se lisent dessous, sur l'asphalte : aucun texte ne se pose sur la carrosserie.
   -------------------------------------------------------------------------- */
.agence {
  --texte: var(--blanc-chaud); --texte-2: var(--creme-a70); --lien: var(--blanc-chaud); --anneau: var(--vert-signal); --trait: var(--creme-a20);
  position: relative;
  isolation: isolate;
  padding-bottom: clamp(56px, 7vh, 96px);
  overflow: clip;
}
.agence__scene {
  position: relative;
  isolation: isolate;
  display: grid;
  align-items: start;
  min-height: clamp(420px, 66svh, 740px);
  overflow: clip;
  background: var(--noir);
}
.agence__media { position: absolute; inset: 0; z-index: -1; }
.agence__media .media__voile {
  background:
    linear-gradient(100deg, color-mix(in srgb, var(--noir) 75%, transparent) 0%, color-mix(in srgb, var(--noir) 75%, transparent) 24%, var(--noir-a40) 45%, transparent 62%),
    linear-gradient(to bottom, var(--asphalte-a70) 0%, var(--noir-a40) 24%, transparent 48%),
    linear-gradient(to top, var(--noir) 0%, var(--noir-a20) 16%, transparent 32%);
}
.agence__titre {
  display: grid;
  justify-items: start;
  gap: var(--s-3);
  padding-top: clamp(40px, 8vh, 96px);
  text-shadow: 0 1px 20px var(--noir-a40);
}
.agence__titre h2 { font-size: clamp(36px, 1rem + 3.4vw, 68px); line-height: 1; letter-spacing: -.03em; max-width: 13ch; text-wrap: balance; }
.agence__titre .surtitre { color: var(--blanc-chaud); }
.agence__titre .surtitre sup { font-size: .78em; text-transform: none; letter-spacing: 0; }
.agence__grille { display: grid; gap: var(--s-6); padding-top: var(--s-6); align-items: start; }
@media (min-width: 1000px) {
  .agence__grille { grid-template-columns: minmax(0, 5fr) minmax(0, 7fr); gap: var(--s-8); padding-top: var(--s-7); }
}
.agence__tete { display: grid; justify-items: start; gap: var(--s-4); }
.agence__tete .chapeau { color: var(--blanc-chaud); max-width: 34ch; }
.agence__actions { margin-top: var(--s-2); }
.agence__fiche { display: grid; gap: var(--s-4); }
.agence__infos { display: grid; margin: 0; }
.agence__infos > div { display: grid; gap: 2px 20px; padding: 12px 0; border-bottom: 1px solid var(--creme-a12); }
.agence__infos > div:first-child { padding-top: 0; }
.agence__infos > div[hidden] { display: none; }
@media (min-width: 600px) { .agence__infos > div { grid-template-columns: 9.5rem minmax(0, 1fr); } }
@media (min-width: 1000px) {
  .agence__infos { grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: var(--s-6); row-gap: var(--s-4); }
  .agence__infos > div, .agence__infos > div:first-child { grid-template-columns: minmax(0, 1fr); padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--creme-a20); }
}
.agence__infos dt { font-family: var(--police-affichage); font-size: var(--fs-mention); font-weight: 600; letter-spacing: .12em; text-transform: uppercase; color: var(--creme-a70); padding-top: 3px; }
.agence__infos dd { margin: 0; line-height: 1.5; }
.agence__infos ul { display: grid; gap: 2px; padding: 0; list-style: none; }
.agence__infos a { color: var(--blanc-chaud); }
.agence__note { color: var(--creme-a70); }
.agence__gps { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
@media (max-width: 999.98px) {
  .agence__scene { min-height: clamp(380px, 62svh, 640px); }
}
/* Téléphone : le titre passe SOUS le plan (il ne se pose plus sur l'enseigne ni sur le toit de la voiture) */
@media (max-width: 599.98px) {
  .agence__scene { min-height: 0; grid-template-rows: auto auto; align-items: stretch; }
  .agence__media { position: relative; inset: auto; grid-row: 1; grid-column: 1; aspect-ratio: 16 / 11; }
  .agence__media .media__voile { background: linear-gradient(to top, var(--noir-a60) 0%, transparent 34%); }
  .agence__titre { grid-row: 2; grid-column: 1; padding-top: var(--s-5); text-shadow: none; }
  .agence__pied { grid-row: 1; grid-column: 1; position: relative; inset: auto; align-self: end; margin: 0 var(--gouttiere) var(--s-3); }
  .agence__fiche { padding: var(--s-5); border-radius: var(--r-carte); background: var(--noir-2); box-shadow: inset 0 0 0 1px var(--creme-a12); }
}

/* --------------------------------------------------------------------------
   15 bis. Téléphone : accueil resserré (SPEC-V5 : ≤ 18 000 px à 375 px, sans perdre de contenu). Les détails se
   replient (pliables), C3 et C4 passent côte à côte, les fiches défilent dans leur liste ; ici, les marges.
   -------------------------------------------------------------------------- */
@media (max-width: 599.98px) {
  main .chapeau { font-size: 17px; }
  .tete-section, .engagements__tete { margin-bottom: var(--s-6); }
  main .encart { padding: var(--s-4) var(--s-5); }
  .quiz.carte { padding: var(--s-5); }
  .financements { margin-top: var(--s-7); }
  .financements__titre { margin-bottom: var(--s-4); }
  .lyceens { margin-top: var(--s-6); padding: var(--s-5); }
  .parents__points { --grille-espace: var(--s-5); }
  .parents__points > li { gap: var(--s-2); padding-top: var(--s-4); }
  .parents__points h3 { font-size: var(--fs-l); }
  .reservation__suite { gap: var(--s-5); }
  .code__grille { gap: var(--s-6); }
  .code__droite { gap: var(--s-4); }
  .assurances__mention { margin-bottom: var(--s-5); }
  .assurances__infos { margin-top: var(--s-5); }
  .direct__regie { padding-bottom: var(--s-6); }
  .agence { padding-bottom: var(--s-7); }
  /* Encarts et cartes d'information : des filets plutôt que des boîtes (même contenu, moins de hauteur) */
  .assurances__infos .encart,
  .financement { padding: var(--s-4) 0 0; border: 0; border-top: 1px solid var(--trait); border-radius: 0; background: none; }
  .assurances__infos { --grille-espace: var(--s-3); }
  .code__ville { padding: var(--s-4); }
  /* Recherches rapides de véhicules : une seule rangée, qui défile dans son cadre */
  .raccourcis { flex-wrap: nowrap; overflow-x: auto; margin-inline: calc(-1 * var(--gouttiere)); padding-inline: var(--gouttiere); scrollbar-width: none; }
  .raccourci { flex: none; }
}

/* --------------------------------------------------------------------------
   16. Impression : pas de vidéo, pas de bandeau collant
   -------------------------------------------------------------------------- */
@media print {
  .hero, .bande, .sequence__scene, .agence { min-height: 0 !important; color: var(--noir); background: var(--blanc) !important; }
  .media, .media-pause, .media-pied, .partenaires__liste, .hero__bas .hero__repere, .diptyque, .apercu, .direct__plan, .direct__commandes { display: none !important; }
  .sequence { height: auto !important; }
  .sequence__scene { position: static !important; height: auto !important; }
  html[data-sequence="active"] .etape { opacity: 1 !important; transform: none !important; }
  details.pliable > *:not(summary) { display: block !important; }
}