/* ==========================================================================
   AUTO-MOTO ÉCOLE MOULIN JOLI — système visuel « Route ouverte »
   Blanc dominant, encre quasi noire, ambre en accent.
   Surfaces plates, ombres larges et douces. Aucun relief, aucun biseau,
   aucun dégradé métallique : c'est exactement ce qu'on quitte.
   ========================================================================== */

/* ---------- Fontes (auto-hébergées, RGPD-safe) ---------- */

@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-400.woff2') format('woff2');
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-500.woff2') format('woff2');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-700.woff2') format('woff2');
  font-weight: 700;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'Satoshi';
  src: url('../fonts/satoshi-900.woff2') format('woff2');
  font-weight: 900;
  font-style: normal;
  font-display: swap;
}

/* ---------- Jetons ---------- */

:root {
  --blanc: #ffffff;
  --creme: #f7f6f3;
  --creme-2: #efeee9;
  --ligne: #e6e4df;
  --ligne-forte: #d6d3cc;

  --encre: #0e0f12;
  --encre-2: #52545c;
  --encre-3: #6b6e77;

  --nuit: #0e0f12;
  --nuit-2: #17181d;
  --nuit-3: #23252c;
  --sur-nuit: #ffffff;
  --sur-nuit-2: #b9bbc2;
  --sur-nuit-3: #8b8e97;
  --ligne-nuit: rgba(255, 255, 255, 0.12);

  --ambre: #ffb800;
  --ambre-vif: #ffc933;
  --ambre-doux: #fff6dd;
  --ambre-bord: #f2d68a;
  --ambre-texte: #8a5a00;

  --alerte: #c0261f;
  /* Lumière de phare : seule couleur froide du système, imposée par le
     sujet — une lampe à LED ne peut être ni ambre ni blanc pur. */
  /* Noir de la séquence photo jour/nuit : plus profond que --nuit, il est
     dicté par le rendu et sert uniquement à ce que la section se raccorde
     sans couture à l'image. */
  --nuit-photo: #000103; /* fond de la dernière image de la séquence jour/nuit */
  --lampe: #bfe1ff;
  --lampe-coeur: #f2f9ff;
  --valide: #1c6b3f;

  --e1: 0.25rem;
  --e2: 0.5rem;
  --e3: 0.75rem;
  --e4: 1rem;
  --e5: 1.5rem;
  --e6: 2rem;
  --e7: 3rem;
  --e8: 4rem;
  --e9: 6rem;

  /* 84rem et non 75 : six cartes d'offre sur une ligne tombaient a 177px,
     et les intitules passaient sur deux lignes. Elargir la seule rangee
     l'aurait decalee de 72px par rapport a l'en-tete collante, visible en
     permanence : c'est donc le site entier qui s'elargit, et tout reste
     aligne. Les blocs de texte gardent leur propre plafond (`.legal` a
     46rem, `.entete` a 42rem), la mesure de lecture ne bouge pas. */
  --wrap: 84rem;
  --wrap-etroit: 46rem;
  --gouttiere: clamp(1.25rem, 5vw, 2.5rem);

  --r-xs: 0.3rem;
  --r-sm: 0.625rem;
  --r-md: 1rem;
  --r-lg: 1.5rem;
  --r-xl: 2rem;
  --r-pill: 999px;

  --ombre-carte: 0 1px 2px rgba(14, 15, 18, 0.04), 0 10px 24px -14px rgba(14, 15, 18, 0.14);
  --ombre-haute: 0 2px 4px rgba(14, 15, 18, 0.05), 0 28px 56px -28px rgba(14, 15, 18, 0.28);
  --ombre-nav: 0 1px 0 var(--ligne), 0 12px 32px -20px rgba(14, 15, 18, 0.3);

  --duree: 200ms;
  --sortie: cubic-bezier(0.22, 1, 0.36, 1);

  --z-dock: 40;
  --z-nav: 50;
}

/* ---------- Socle ---------- */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  scroll-padding-top: 6rem;
}

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: 'Satoshi', system-ui, -apple-system, 'Segoe UI', sans-serif;
  font-size: 1.0625rem;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

img { max-width: 100%; height: auto; display: block; }
svg { display: block; }

h1, h2, h3, h4 { margin: 0; line-height: 1.06; letter-spacing: -0.03em; text-wrap: balance; }
p { margin: 0; text-wrap: pretty; }
ul, ol { margin: 0; padding: 0; list-style: none; }
a { color: inherit; }

:focus-visible {
  outline: 2px solid var(--encre);
  outline-offset: 3px;
  border-radius: 4px;
}
.sur-nuit :focus-visible,
.section--nuit :focus-visible,
.heros :focus-visible,
.pied :focus-visible { outline-color: var(--ambre); }

::selection { background: var(--ambre); color: var(--encre); }

.saut-contenu {
  position: absolute;
  left: 50%;
  top: 0;
  transform: translate(-50%, -130%);
  z-index: 100;
  background: var(--encre);
  color: var(--blanc);
  padding: 0.75rem 1.25rem;
  font-weight: 700;
  border-radius: 0 0 var(--r-sm) var(--r-sm);
  transition: transform var(--duree) var(--sortie);
}
.saut-contenu:focus { transform: translate(-50%, 0); }

.masque {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0);
  white-space: nowrap; border: 0;
}

/* ---------- Typographie ---------- */

.t-display {
  font-size: clamp(2.5rem, 6.2vw, 4.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.02;
}
.t-h2 {
  font-size: clamp(2rem, 4.2vw, 3.25rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.05;
}
.t-h3 {
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  line-height: 1.2;
}
.t-h4 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
.t-lead {
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  line-height: 1.6;
  color: var(--encre-2);
}
.t-note { font-size: 0.9375rem; line-height: 1.55; color: var(--encre-3); }
.t-mini { font-size: 0.8125rem; line-height: 1.5; color: var(--encre-3); }

.accent { color: var(--ambre-texte); }
.section--nuit .accent,
.page-entete .accent,
.heros .accent { color: var(--ambre); }

/* ---------- Grille ---------- */

.wrap {
  width: 100%;
  max-width: var(--wrap);
  margin-inline: auto;
  padding-inline: var(--gouttiere);
}
.wrap--etroit { max-width: var(--wrap-etroit); }

/* Le remplissage se cumule entre deux sections voisines : 7rem de chaque
   cote faisaient 14rem de vide, sans rien pour le justifier quand le fond
   ne change pas. Ramene a une respiration franche mais pas beante. */
.section { padding-block: clamp(3rem, 5vw, 4.5rem); }
.section--creme { background: var(--creme); }
.section--nuit { background: var(--nuit); color: var(--sur-nuit); }
.section--nuit .t-lead { color: var(--sur-nuit-2); }
.section--nuit .t-note { color: var(--sur-nuit-3); }

.entete {
  display: grid;
  justify-items: center;
  text-align: center;
  gap: var(--e4);
  max-width: 42rem;
  margin-inline: auto;
  margin-bottom: clamp(2.5rem, 5vw, 4rem);
}
.entete--gauche { justify-items: start; text-align: left; margin-inline: 0; }

/* Pastille de section : un composant, pas un surtitre nu. */
.pastille {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--ambre-doux);
  border: 1px solid var(--ambre-bord);
  color: var(--ambre-texte);
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
/* `flex-shrink: 0` indispensable : la pastille est un conteneur flex, et
   sans lui une icone se fait comprimer par le texte voisin des que la
   place manque — le trace se deforme au lieu de passer a la ligne. */
.pastille svg { width: 0.9rem; height: 0.9rem; flex-shrink: 0; }
.section--nuit .pastille,
.achat .pastille,
.agence-tarif--nuit .pastille,
.heros .pastille {
  background: rgba(255, 184, 0, 0.14);
  border-color: rgba(255, 184, 0, 0.4);
  color: var(--ambre);
}

/* ---------- Boutons ---------- */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.55rem;
  min-height: 3rem;
  padding: 0.8rem 1.5rem;
  border: 1px solid transparent;
  border-radius: var(--r-pill);
  font: inherit;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  cursor: pointer;
  white-space: nowrap;
  transition: background-color var(--duree) var(--sortie),
    border-color var(--duree) var(--sortie),
    color var(--duree) var(--sortie),
    box-shadow var(--duree) var(--sortie);
}
.btn svg { width: 1.1em; height: 1.1em; flex: none; }
.btn--lg { min-height: 3.375rem; padding-inline: 1.85rem; font-size: 1.0625rem; }
.btn--bloc { width: 100%; }

.btn--encre { background: var(--encre); color: var(--blanc); }
.btn--encre:hover { background: #26282f; }

.btn--ambre { background: var(--ambre); color: var(--encre); }
.btn--ambre:hover { background: var(--ambre-vif); }

.btn--clair { background: var(--blanc); color: var(--encre); border-color: var(--ligne-forte); }
.btn--clair:hover { background: var(--creme); border-color: var(--encre-3); }

.btn--fantome { background: transparent; color: var(--sur-nuit); border-color: rgba(255, 255, 255, 0.38); }
.btn--fantome:hover { background: rgba(255, 255, 255, 0.1); border-color: var(--sur-nuit); }

.lien-fleche {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-weight: 700;
  font-size: 0.9375rem;
  text-decoration: none;
  color: var(--encre);
  transition: gap var(--duree) var(--sortie), color var(--duree) var(--sortie);
}
.lien-fleche svg { width: 1rem; height: 1rem; }
.lien-fleche:hover { gap: 0.7rem; color: var(--ambre-texte); }
.section--nuit .lien-fleche:hover { color: var(--ambre); }

/* ---------- Navigation ----------
   Une seule identité : barre sombre. Au repos elle est transparente au-dessus
   du héros ; au défilement elle se détache en pilule flottante.
   `est-collee` veut dire « détachée », plus « passée en clair ».
   ------------------------------------------------------------------------ */

.nav {
  position: fixed;
  top: 0; left: 0; right: 0;
  z-index: var(--z-nav);
  padding-top: 0.75rem;
}

.nav__in {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e5);
  min-height: 4.25rem;
  padding-inline: clamp(0.75rem, 1.6vw, 1.15rem);
  border: 1px solid transparent;
  border-radius: var(--r-xl);
  transition:
    background-color 280ms var(--sortie),
    border-color 280ms var(--sortie),
    box-shadow 280ms var(--sortie);
}

.nav.est-collee .nav__in {
  background: rgba(14, 15, 18, 0.86);
  backdrop-filter: blur(18px) saturate(160%);
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 20px 44px -28px rgba(14, 15, 18, 0.85);
  animation: nav-pose 340ms var(--sortie);
}

/* La pilule se pose : elle descend de quelques pixels en apparaissant. */
@keyframes nav-pose {
  from { transform: translateY(-0.45rem); opacity: 0.5; }
  to   { transform: translateY(0); opacity: 1; }
}

.nav__marque { display: inline-flex; align-items: center; gap: 0.65rem; text-decoration: none; flex: none; }
.nav__logo { width: 2.25rem; height: 2.25rem; object-fit: contain; }
.nav__nom { line-height: 1.05; color: var(--sur-nuit); }
.nav__nom strong { display: block; font-size: 1.0625rem; font-weight: 900; letter-spacing: -0.03em; }
.nav__nom span { display: block; font-size: 0.625rem; font-weight: 500; letter-spacing: 0.14em; text-transform: uppercase; color: var(--sur-nuit-3); }

.nav__liens { display: none; }
.nav__liens ul { display: flex; align-items: center; gap: 0.25rem; }
.nav__liens a {
  display: block;
  padding: 0.5rem 0.85rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.78);
  transition: color var(--duree) var(--sortie), background-color var(--duree) var(--sortie);
}
.nav__liens a:hover { color: var(--sur-nuit); background: rgba(255, 255, 255, 0.1); }
.nav__liens a[aria-current='page'] { color: var(--sur-nuit); font-weight: 700; }

.nav__actions { display: flex; align-items: center; gap: 0.6rem; }
.nav__tel {
  display: none;
  align-items: center;
  gap: 0.45rem;
  padding: 0.55rem 0.9rem;
  border-radius: var(--r-pill);
  text-decoration: none;
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--sur-nuit);
  transition: background-color var(--duree) var(--sortie);
}
.nav__tel:hover { background: rgba(255, 255, 255, 0.1); }
.nav__tel svg { width: 1rem; height: 1rem; }

/* Sous 62rem, la barre d'action fixe en bas porte déjà la pré-inscription. */
.nav .btn--nav {
  display: none;
  background: var(--blanc);
  color: var(--encre);
  min-height: 2.375rem;
  padding: 0.45rem 1.05rem;
  font-size: 0.875rem;
}
.nav .btn--nav:hover { background: var(--ambre); }

.bascule {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 1px solid rgba(255, 255, 255, 0.28);
  border-radius: var(--r-pill);
  background: transparent;
  color: var(--sur-nuit);
  cursor: pointer;
  transition: border-color var(--duree) var(--sortie), background-color var(--duree) var(--sortie);
}
.bascule svg { width: 1.3rem; height: 1.3rem; }
.bascule .i-fermer { display: none; }
.bascule[aria-expanded='true'] .i-ouvrir { display: none; }
.bascule[aria-expanded='true'] .i-fermer { display: block; }

/* Panneau mobile : il prolonge la pilule, même matière. */
.feuille {
  display: none;
  margin-top: 0.5rem;
  padding: var(--e5) var(--e5) var(--e6);
  background: rgba(14, 15, 18, 0.96);
  backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255, 255, 255, 0.14);
  border-radius: var(--r-lg);
  max-height: calc(100dvh - 7rem);
  overflow-y: auto;
}
.feuille.est-ouverte { display: block; }
.feuille ul { display: grid; gap: 0.15rem; }
.feuille ul a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 3.25rem;
  padding: 0.75rem 0;
  border-bottom: 1px solid rgba(255, 255, 255, 0.12);
  text-decoration: none;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--sur-nuit);
}
.feuille ul a[aria-current='page'] { color: var(--ambre); }
.feuille ul a svg { width: 1rem; height: 1rem; color: var(--sur-nuit-3); }
.feuille__pied { margin-top: var(--e5); display: grid; gap: 0.6rem; }

@media (min-width: 62rem) {
  .nav__liens { display: block; }
  .nav__tel { display: inline-flex; }
  .nav .btn--nav { display: inline-flex; }
  .bascule { display: none; }
}

/* ---------- Barre d'action mobile ---------- */

.dock {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  z-index: var(--z-dock);
  /* Elle n'apparaît qu'une fois le héros passé : au-dessus, le bouton
     « Je me pré-inscris » fait déjà le travail et la barre ferait doublon. */
  transform: translateY(115%);
  transition: transform 300ms var(--sortie);
  will-change: transform;
  display: grid;
  grid-template-columns: 1fr 1.25fr;
  gap: 0.5rem;
  padding: 0.6rem 0.75rem calc(0.6rem + env(safe-area-inset-bottom));
  background: rgba(255, 255, 255, 0.94);
  backdrop-filter: blur(16px);
  border-top: 1px solid var(--ligne);
}
/* Les boutons héritent d'un rembourrage de 1,5 rem et sont en `nowrap` :
   leur largeur minimale dépasse alors leur colonne sous 360 px et le second
   sort de l'écran. On les resserre ici, et `min-width: 0` autorise la
   colonne à descendre sous la largeur du contenu. */
.dock .btn { padding-inline: 0.9rem; min-width: 0; }
@media (max-width: 22.5rem) {
  .dock .btn { padding-inline: 0.7rem; font-size: 0.9375rem; }
}

.dock.est-visible { transform: translateY(0); }

/* ---------- Choix de la ligne à appeler ---------- */

/* Le bouton « Appeler » de la barre composait la ligne mobile sans rien dire
   de qui décroche, alors que l'école a deux agences et trois numéros. Le
   panneau nomme les trois lignes plutôt que d'en choisir une à la place du
   visiteur. */
.choix-appel {
  display: grid;
  gap: 0.5rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.choix-appel a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.15rem 1rem;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--encre);
  transition: border-color var(--duree) var(--sortie), background-color var(--duree) var(--sortie);
}
.choix-appel a:hover { border-color: var(--encre); background-color: var(--creme); }
.choix-appel b { grid-column: 1; font-weight: 700; }
.choix-appel span { grid-column: 1; font-size: 0.8125rem; color: var(--encre-3); }
/* Le numéro tient la hauteur des deux lignes de gauche : il reste centré
   quel que soit le libellé, et `nowrap` interdit de le couper en deux. */
.choix-appel strong {
  grid-column: 2;
  grid-row: 1 / span 2;
  font-weight: 800;
  white-space: nowrap;
  color: var(--ambre-texte);
}
body { padding-bottom: 4.75rem; }
/* Deux familles de pages n'ont pas de barre : la pré-inscription, dont le
   bouton « Pré-inscription » pointerait vers elle-même, et les six pages de
   formation, qui portent déjà six à sept appels à la pré-inscription dans
   leur contenu. Sans barre, pas de place à lui réserver — d'où cette classe,
   sans quoi il resterait 4,75rem de vide en bas de page sur mobile. */
body.sans-dock { padding-bottom: 0; }
@media (min-width: 62rem) {
  .dock { display: none; }
  body { padding-bottom: 0; }
}

/* ==========================================================================
   HÉROS
   ========================================================================== */

.heros {
  position: relative;
  background: var(--nuit);
  color: var(--sur-nuit);
  padding-top: calc(5rem + clamp(2.5rem, 6vw, 5rem));
  padding-bottom: clamp(2.5rem, 6vw, 5rem);
  overflow: hidden;
}
.heros__voile {
  position: absolute;
  inset: 0;
  z-index: 1;
  background:
    linear-gradient(96deg, rgba(14, 15, 18, 0.96) 0%, rgba(14, 15, 18, 0.86) 34%, rgba(14, 15, 18, 0.34) 62%, rgba(14, 15, 18, 0.12) 100%),
    linear-gradient(180deg, rgba(14, 15, 18, 0.72) 0%, transparent 28%);
}
.heros__in { position: relative; z-index: 2; }
.heros__texte { max-width: 38rem; display: grid; gap: var(--e5); justify-items: start; }
.heros h1 { color: var(--sur-nuit); }
.heros .t-lead { color: rgba(255, 255, 255, 0.86); max-width: 34rem; }
.heros__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; }
/* Label École conduite qualité juste au-dessus du bouton de pré-inscription
   (demande de Nasri du 24 octobre 2026) : visible dès l'arrivée, au moment où
   le visiteur décide. Le texte reprend mot pour mot celui du logo officiel. */
.heros__label { display: flex; align-items: center; gap: 0.75rem; margin: 0; text-align: left; }
.heros__label img { width: 3.25rem; height: auto; flex: none; }
.heros__label > span { display: grid; font-size: 0.875rem; line-height: 1.35; color: var(--sur-nuit-2); }
.heros__label strong { color: var(--sur-nuit); font-weight: 700; }
.heros__label br { display: none; }

/* ---------- Média du héros : un seul bloc, deux mises en page ---------- */

.heros__media { position: absolute; inset: 0; z-index: 0; }

.slider { position: relative; width: 100%; height: 100%; overflow: hidden; }
.slider__vue { position: absolute; inset: 0; }
.slider__slide {
  position: absolute;
  inset: 0;
  opacity: 0;
  transition: opacity 900ms var(--sortie);
}
.slider__slide.est-active { opacity: 1; }
.slider__slide picture { display: block; width: 100%; height: 100%; }
.slider__slide img { width: 100%; height: 100%; object-fit: cover; object-position: 68% 50%; }

/* Sur mobile, composition d'affiche : la photo occupe le haut de l'écran,
   se fond dans le noir, puis le texte arrive centré avec une action pleine
   largeur. C'est une composition distincte, pas une adaptation du bureau. */
@media (max-width: 61.99rem) {
  .heros {
    display: flex;
    flex-direction: column;
    padding-top: 0;
    /* +2rem : la place que vient occuper la carte de chiffres, qui remonte
       par-dessus. Sans cette réserve elle recouvre les boutons d'action. */
    padding-bottom: calc(clamp(2.5rem, 8vw, 3.5rem) + 2rem);
  }
  .heros__voile { display: none; }

  .heros__media {
    order: 1;
    position: relative;
    height: 60svh;
    min-height: 24rem;
    max-height: 34rem;
    margin-top: 0;
    border-radius: 0;
    overflow: hidden;
  }
  /* Le fondu qui raccorde la photo au fond noir de la page. */
  .heros__media::after {
    content: '';
    position: absolute;
    left: 0; right: 0; bottom: -1px;
    height: 42%;
    background: linear-gradient(180deg, rgba(14, 15, 18, 0) 0%, rgba(14, 15, 18, 0.72) 52%, var(--nuit) 97%);
    pointer-events: none;
  }
  .slider__slide img { object-position: 50% 50%; }
  /* Les deux photos d'attente sont horizontales : on recadre sur leur sujet. */
  .slider__slide:nth-child(2) img { object-position: 26% 46%; }
  .slider__slide:nth-child(3) img { object-position: 50% 40%; }

  .heros__in { order: 2; margin-top: clamp(-2.5rem, -5vw, -1rem); }
  .heros__texte { max-width: none; justify-items: center; text-align: center; }
  /* Label centré sur mobile : pastille à gauche du texte, le bloc dans l'axe
     du titre. Le texte passe sur deux lignes fixes pour que le bloc ait la
     largeur du texte, sans vide à droite qui le décentrerait à l'œil. */
  .heros__label { width: fit-content; margin-inline: auto; }
  .heros__label br { display: inline; }
  .heros .t-lead { max-width: 34ch; margin-inline: auto; }
  .heros__actions { flex-direction: column; align-items: stretch; width: 100%; }
  .heros__actions .btn { width: 100%; }
}

/* Sur grand écran, le héros est une bande pleine hauteur, texte centré
   verticalement au-dessus de la photo. */
@media (min-width: 62rem) {
  .heros {
    min-height: min(44rem, 88vh);
    display: flex;
    align-items: flex-end;
    padding-bottom: clamp(4rem, 9vw, 7rem);
  }
}

/* ==========================================================================
   CARTES D'OFFRE
   ========================================================================== */

.offres {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
}
/* Cinq offres depuis la fusion des deux vignettes boîte manuelle : une
   colonne par offre, aucune ne se retrouve seule sur une deuxième ligne. */
@media (min-width: 68rem) { .offres { grid-template-columns: repeat(5, 1fr); gap: 0.85rem; } }

/* Palier tablette. La règle de base (`auto-fit` à 15rem de plancher) n'y tient
   que deux colonnes, ce qui laissait la cinquième vignette seule sur une
   troisième rangée. Trois colonnes donnent 3 + 2, une répartition qui se lit
   comme voulue. Le permis moto n'est masqué qu'en dessous de ce palier. */
@media (min-width: 46.01rem) and (max-width: 67.99rem) {
  .offres { grid-template-columns: repeat(3, 1fr); }
}

.offre {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  padding: 1.4rem 1.25rem;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  text-decoration: none;
  box-shadow: var(--ombre-carte);
  transition: border-color var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie);
}
.offre:hover { border-color: var(--encre); box-shadow: var(--ombre-haute); }
.section--creme .offre { background: var(--blanc); }

.chip-icone {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.6rem;
  height: 2.6rem;
  border-radius: var(--r-sm);
  background: var(--ambre-doux);
  color: var(--ambre-texte);
  flex: none;
}
.chip-icone svg { width: 1.35rem; height: 1.35rem; }

.offre h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.02em; }
.offre__prix { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.035em; white-space: nowrap; }
.offre__prix small { display: block; font-size: 0.75rem; font-weight: 500; letter-spacing: 0; color: var(--encre-3); }
.offre__note { font-size: 0.875rem; color: var(--encre-2); }
.offre__lien { margin-top: auto; padding-top: var(--e2); }

.etiquette {
  position: absolute;
  top: -0.6rem;
  right: 1rem;
  padding: 0.25rem 0.6rem;
  border-radius: var(--r-pill);
  background: var(--ambre);
  color: var(--encre);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: -0.005em;
}
.etiquette--sourdine { background: var(--creme-2); color: var(--encre-2); border: 1px solid var(--ligne-forte); }

/* ==========================================================================
   BANDEAU DE FAITS
   ========================================================================== */

/* Pas de cadre : ces quatre faits prolongent les cartes d'offre au lieu de
   former un bloc de plus. Le fond n'apparaît qu'au survol, sur l'élément
   pointé, ce qui suffit à signaler qu'il est cliquable. */
.faits {
  display: grid;
  gap: var(--e2);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
.fait { display: flex; align-items: flex-start; gap: 0.75rem; }
.fait svg { width: 1.35rem; height: 1.35rem; color: var(--ambre-texte); flex: none; margin-top: 0.15rem; }
.fait strong { display: block; font-size: 1rem; font-weight: 700; letter-spacing: -0.015em; }
.fait span { display: block; font-size: 0.875rem; color: var(--encre-3); line-height: 1.45; }

/* ==========================================================================
   À PROPOS
   ========================================================================== */

.apropos { display: grid; gap: clamp(2rem, 4vw, 3.5rem); }
@media (min-width: 60rem) {
  .apropos { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); align-items: center; }
}

.apropos__texte { display: grid; gap: var(--e5); align-content: start; }
.atout { display: grid; grid-template-columns: 2.6rem minmax(0, 1fr); gap: 0.85rem; align-items: start; }
.atout p { font-size: 0.9375rem; color: var(--encre-2); margin-top: 0.25rem; }

.vitrine {
  display: grid;
  place-items: center;
  margin: 0;
  padding: 0;
}
.vitrine picture { display: block; width: 100%; }
.vitrine img { width: 100%; height: auto; object-fit: contain; }

/* ==========================================================================
   TARIFS
   ========================================================================== */

.forfaits { display: grid; gap: var(--e5); align-items: stretch; }
@media (min-width: 60rem) {
  .forfaits { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
}

.forfait {
  position: relative;
  /* Conteneur de requete pour le bandeau tarif etudiant : sur trois colonnes,
     la carte retrecit pendant que la fenetre s'agrandit. Les tailles en `vw`
     du bandeau suivaient la fenetre et gonflaient dans un bloc de plus en plus
     etroit. Elles suivent maintenant la carte, en `cqi`. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: clamp(1.5rem, 3vw, 2.15rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.forfait--phare {
  background: var(--nuit);
  color: var(--sur-nuit);
  border-color: var(--nuit);
  box-shadow: var(--ombre-haute);
}
@media (min-width: 60rem) {
  .forfait--phare { margin-block: -1.25rem; padding-block: calc(clamp(1.5rem, 3vw, 2.15rem) + 1.25rem); }
}
.forfait__badge {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  padding: 0.3rem 0.7rem;
  border-radius: var(--r-pill);
  background: var(--ambre);
  color: var(--encre);
  font-size: 0.6875rem;
  font-weight: 700;
}
.forfait h3 { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.025em; }
.forfait__sous { font-size: 0.875rem; color: var(--encre-3); }
.forfait--phare .forfait__sous { color: var(--sur-nuit-3); }
.forfait__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.forfait__prix strong {
  font-size: clamp(2.5rem, 5vw, 3.15rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.forfait__prix span { font-size: 0.875rem; color: var(--encre-3); }
.forfait--phare .forfait__prix span { color: var(--sur-nuit-3); }

/* ---------- Bandeau du tarif étudiant ---------- */

/* Le tarif étudiant était noyé en dernière puce d'une liste de cinq, alors que
   c'est l'argument le plus fort de ce forfait. Sorti de la liste, il devient un
   bloc à part entière : le prix, l'économie réelle, et la condition.

   La disposition reste horizontale à toutes les largeurs — icône, filet, corps,
   filet, condition. Une version repliée sur téléphone ajoutait une ligne et un
   filet, ce qui doublait presque la hauteur du bloc et l'emportait sur le prix
   du forfait lui-même. C'est l'échelle qui s'adapte, pas la structure. */
.tarif-etudiant {
  display: grid;
  grid-template-columns: auto 1px minmax(0, 1fr) 1px auto;
  align-items: center;
  gap: clamp(0.4rem, 2.9cqi, 1rem);
  padding: clamp(0.5rem, 2cqi, 0.85rem) clamp(0.6rem, 2.7cqi, 1.1rem);
  border-radius: var(--r-md);
  background: var(--ambre);
  color: var(--encre);
}
.tarif-etudiant__ico {
  width: clamp(1.5rem, 8.8cqi, 2.25rem);
  height: clamp(1.5rem, 8.8cqi, 2.25rem);
  flex: none;
}
/* Les tailles sont en `cqi`, pas en `vw` : sur trois colonnes, la carte se
   rétrécit pendant que la fenêtre s'agrandit. Les clamps en `vw` atteignaient
   donc leur maximum au moment où le bloc était le plus étroit, et « soit 145 €
   d'économie » passait sur deux lignes — 114px de haut à 1280px de large,
   contre 82 sur téléphone. En `cqi`, l'échelle suit la carte qui la contient.

   Les filets ne sont pas des bordures du bloc central : ils doivent rester
   pleine hauteur même quand la colonne du milieu se rétrécit. */
.tarif-etudiant__filet { align-self: stretch; background: rgba(14, 15, 18, 0.22); }

.tarif-etudiant__corps { display: grid; justify-items: center; gap: 0.05rem; text-align: center; }
.tarif-etudiant__label {
  font-size: clamp(0.5rem, 3.1cqi, 0.6875rem);
  font-weight: 800;
  /* L'interlettrage coute cher sur 14 caracteres : reduit sur les petites
     largeurs, ou il faisait passer le libelle sur deux lignes. */
  letter-spacing: clamp(0.06em, 0.5cqi, 0.12em);
  text-transform: uppercase;
  white-space: nowrap;
}
.tarif-etudiant__prix {
  font-size: clamp(1.35rem, 7.6cqi, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  white-space: nowrap;
}
.tarif-etudiant__eco { font-size: clamp(0.6875rem, 3.7cqi, 0.8125rem); line-height: 1.3; }
.tarif-etudiant__eco b { font-weight: 800; }
.tarif-etudiant__cond {
  font-size: clamp(0.625rem, 3.5cqi, 0.8125rem);
  line-height: 1.2;
  font-weight: 600;
  max-width: 3.6rem;
}

.liste-check { display: grid; gap: 0.6rem; }
.liste-check li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--encre-2);
}
.liste-check svg { width: 1.1rem; height: 1.1rem; color: var(--ambre-texte); margin-top: 0.15rem; }
.forfait--phare .liste-check li,
.section--nuit .liste-check li { color: var(--sur-nuit-2); }
.forfait--phare .liste-check svg,
.section--nuit .liste-check svg { color: var(--ambre); }

.autres-tarifs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.5rem 0.75rem;
  margin-top: var(--e6);
}
.tag-tarif {
  display: inline-flex;
  align-items: baseline;
  gap: 0.4rem;
  padding: 0.5rem 0.9rem;
  border-radius: var(--r-pill);
  border: 1px solid var(--ligne-forte);
  background: var(--blanc);
  font-size: 0.875rem;
  color: var(--encre-2);
}
.tag-tarif b { font-weight: 700; color: var(--encre); white-space: nowrap; }

/* ==========================================================================
   FAQ
   ========================================================================== */

/* `align-items: start` est ce qui empêche la colonne de gauche de s'étirer
   quand une réponse s'ouvre à droite : sans ça, ses rangées se répartissent
   la hauteur de la ligne et son contenu se met à bouger. */
.faq-grille { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }
@media (min-width: 60rem) { .faq-grille { grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr); } }

.faq { border-top: 1px solid var(--ligne); }
.faq details { border-bottom: 1px solid var(--ligne); }
.faq summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e4);
  padding-block: 1.25rem;
  min-height: 3.5rem;
  cursor: pointer;
  list-style: none;
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  transition: color var(--duree) var(--sortie);
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary:hover { color: var(--ambre-texte); }
.faq summary svg {
  width: 1.25rem;
  height: 1.25rem;
  flex: none;
  color: var(--encre-3);
  transition: transform var(--duree) var(--sortie);
}
.faq details[open] summary svg { transform: rotate(45deg); }
.faq details > div { padding-bottom: 1.35rem; }
.faq details p { font-size: 0.9375rem; color: var(--encre-2); max-width: 58ch; }
.faq details p + p { margin-top: 0.65rem; }

/* ==========================================================================
   APPEL FINAL
   ========================================================================== */

.appel {
  position: relative;
  overflow: hidden;
  border-radius: var(--r-xl);
  background: var(--nuit);
  color: var(--sur-nuit);
  padding: clamp(2.5rem, 6vw, 4.5rem) clamp(1.5rem, 5vw, 4rem);
  text-align: center;
}
.appel::after {
  content: '';
  position: absolute;
  left: 50%;
  bottom: -60%;
  width: min(48rem, 120%);
  aspect-ratio: 2 / 1;
  transform: translateX(-50%);
  background: radial-gradient(closest-side, rgba(255, 184, 0, 0.18), transparent 70%);
  pointer-events: none;
}
.appel__in { position: relative; display: grid; gap: var(--e5); justify-items: center; max-width: 44rem; margin-inline: auto; }
.appel h2 { color: var(--sur-nuit); }
.appel .t-lead { color: var(--sur-nuit-2); }
.appel__actions { display: flex; flex-wrap: wrap; gap: 0.75rem; justify-content: center; }

/* ==========================================================================
   PIED
   ========================================================================== */

.pied { background: var(--nuit); color: var(--sur-nuit); padding-block: clamp(3rem, 6vw, 4.5rem) var(--e6); }
.pied__grille { display: grid; gap: var(--e7); }
@media (min-width: 52rem) { .pied__grille { grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr)); } }
/* Sur téléphone, les colonnes vont deux par deux au lieu de s'empiler sur
   toute la hauteur de l'écran. Le bloc de marque se dissout dans la grille
   (`display: contents`) : logo et présentation sur toute la largeur, puis
   Formations | Le site, puis Nous joindre | Suivez-nous. `order` place les
   réseaux en dernier, là où le lecteur les attend. */
@media (max-width: 51.99rem) {
  .pied__grille { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e6) var(--e5); }
  /* Spécificité relevée : la règle `.pied__marque { display: grid }` vient
     après celle-ci dans le fichier et l'emporterait à égalité. */
  .pied__grille > .pied__marque { display: contents; }
  .pied__logos, .pied__marque > p { grid-column: 1 / -1; }
  .pied__marque > p { margin-top: calc(var(--e6) * -1 + var(--e4)); }
  .pied__suivre { order: 10; }
}
.pied__marque { display: grid; gap: var(--e4); align-content: start; }
.pied__logo { width: 4.5rem; }
/* Le label « École conduite qualité » se pose à côté du logo, à la même
   largeur. Fond transparent : seule la pastille jaune se détache sur le fond
   sombre du pied de page. */
.pied__logos { display: flex; align-items: center; gap: var(--e4); }
.pied__label { width: 4.5rem; height: auto; }
/* Logo et label cliquables : le logo remonte en haut de la page (#top, géré
   par le navigateur sans script), le label mène à sa section de l'accueil. */
.pied__logos-lien { display: block; line-height: 0; border-radius: var(--r-sm); transition: opacity var(--duree) var(--sortie); }
.pied__logos-lien:hover { opacity: 0.8; }
.pied__logos-lien:focus-visible { outline: 2px solid var(--ambre); outline-offset: 4px; }
.pied__marque p { color: var(--sur-nuit-2); font-size: 0.9375rem; max-width: 34ch; }
.pied h2 {
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--sur-nuit-3);
  margin-bottom: var(--e4);
}
/* Colonne explicitement contrainte : en `auto`, la grille se dimensionne
   sur son élément le plus large et le plus long numéro d'agence déborde du
   pied de page. Invisible jusqu'ici parce que `overflow-x: hidden` le
   masquait, mais le texte était bel et bien coupé autour de 960 px. */
/* Chaque agence forme un bloc : son nom, son téléphone, son e-mail. Les liens
   passent en bloc pour qu'une adresse longue ne pousse pas la colonne. */
.pied__agence { display: grid; gap: 0.15rem; }
.pied__agence b { color: var(--sur-nuit); font-weight: 700; }
.pied__agence a { display: block; }

.pied ul { display: grid; gap: 0.1rem; grid-template-columns: minmax(0, 1fr); }
.pied ul a {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  min-height: 2.4rem;
  /* L'adresse e-mail est un mot de 29 caractères sans espace : il faut un
     point de coupure, sinon elle sort du pied de page. Le <wbr> posé avant
     l'arobase dans le HTML donne la seule coupure acceptable. */
  overflow-wrap: break-word;
  text-decoration: none;
  font-size: 0.9375rem;
  color: var(--sur-nuit-2);
  transition: color var(--duree) var(--sortie);
}
.pied ul a:hover { color: var(--ambre); }
.pied__bas {
  margin-top: var(--e7);
  padding-top: var(--e5);
  border-top: 1px solid var(--ligne-nuit);
  display: flex;
  flex-wrap: wrap;
  gap: var(--e3) var(--e5);
  justify-content: space-between;
  align-items: center;
}
.pied__bas p, .pied__bas a, .pied__bas .pied__cookies { font-size: 0.8125rem; color: var(--sur-nuit-3); text-decoration: none; }
.pied__bas a:hover, .pied__bas .pied__cookies:hover { color: var(--ambre); }

/* ==========================================================================
   UTILITAIRES
   ========================================================================== */

.pile > * + * { margin-top: var(--e4); }
.pile-lg > * + * { margin-top: var(--e6); }
.rangee { display: flex; flex-wrap: wrap; gap: 0.75rem; }
.rangee--centre { justify-content: center; }
.centre { text-align: center; }

.mention-photo {
  font-size: 0.75rem;
  color: var(--encre-3);
  margin-top: 0.65rem;
}
.section--nuit .mention-photo, .heros .mention-photo { color: var(--sur-nuit-3); }

/* ---------- Pièces à fournir ---------- */

.pieces {
  display: grid;
  gap: 0.25rem 2rem;
  grid-template-columns: repeat(auto-fit, minmax(18rem, 1fr));
}
.pieces li {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.65rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.5;
  color: var(--encre-2);
  padding-block: 0.25rem;
}
.pieces svg { width: 1.35rem; height: 1.35rem; color: var(--ambre-texte); margin-top: 0.05rem; }

/* ---------- Flux réseaux sociaux ---------- */

.flux { display: grid; gap: var(--e4); grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr)); }
.flux__vignette {
  position: relative;
  aspect-ratio: 9 / 16;
  border-radius: var(--r-md);
  overflow: hidden;
  background: var(--nuit-2);
  border: 1px solid var(--ligne);
  display: grid;
  place-items: center;
  color: var(--sur-nuit-3);
}
.flux__vignette img { width: 100%; height: 100%; object-fit: cover; }
.flux__vignette svg { width: 2rem; height: 2rem; }

/* Trois vidéos TikTok fournies par le client (septembre 2026), hébergées
   sur le site. Même gabarit que les forfaits : trois colonnes sur bureau,
   carrousel à 84 % avec puces sur téléphone (le JS des forfaits fait le
   travail via data-carrousel). Lecture automatique sans son quand la tuile
   est à l'écran ; un clic sur la vidéo ou le bouton active le son, sur une
   seule vidéo à la fois. Sans JavaScript, la vidéo garde ses contrôles. */
/* Sur bureau, trois colonnes à pleine largeur donnaient des tuiles de 50 rem
   de haut, jugées trop grandes : la grille est plafonnée, tuiles d'environ
   18 rem de large. */
@media (min-width: 60rem) {
  .flux--videos { grid-template-columns: repeat(3, 1fr); gap: var(--e4); max-width: 56rem; margin-inline: auto; }
}
@media (max-width: 59.99rem) {
  /* Sans « none », l'auto-fit du bureau crée encore deux colonnes explicites
     et la troisième tuile sort plus étroite que les deux premières. Double
     classe : la règle mobile générique de .flux vient plus bas et gagnerait. */
  .flux.flux--videos { grid-template-columns: none; grid-auto-columns: 84%; gap: var(--e4); }
}
.flux--videos .flux__vignette { margin: 0; display: block; cursor: pointer; }
.flux--videos video { display: block; width: 100%; height: 100%; object-fit: cover; }
.flux--videos figcaption {
  position: absolute;
  inset: auto 0 0 0;
  padding: 3rem var(--e4) var(--e4);
  background: linear-gradient(to top, rgba(14, 15, 18, 0.75), rgba(14, 15, 18, 0));
  color: var(--blanc);
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.35;
  text-align: left;
  pointer-events: none;
}
.flux__son {
  position: absolute;
  top: var(--e3);
  right: var(--e3);
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: 0;
  padding: 0;
  border-radius: var(--r-pill);
  background: rgba(14, 15, 18, 0.55);
  color: var(--blanc);
  cursor: pointer;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
}
.flux__son svg { width: 1.35rem; height: 1.35rem; }
.flux__son--actif { display: none; }
.flux__vignette.avec-son .flux__son--actif { display: block; }
.flux__vignette.avec-son .flux__son--coupe { display: none; }
.flux__vignette.avec-son .flux__son { background: var(--ambre); color: var(--encre); }
.flux__son:focus-visible { outline: 3px solid var(--ambre); outline-offset: 2px; }

/* ---------- Réseaux sociaux (pied de page) ---------- */

.reseaux { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.reseaux a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  border-radius: var(--r-pill);
  border: 1px solid rgba(255, 255, 255, 0.18);
  color: #fff;
  transition: background-color var(--duree) var(--sortie), border-color var(--duree) var(--sortie), color var(--duree) var(--sortie);
}
.reseaux a:hover { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }
.reseaux svg { width: 1.25rem; height: 1.25rem; }

/* ---------- Emplacement réservé, visible et assumé ---------- */

.emplacement {
  display: grid;
  grid-template-columns: 1.35rem minmax(0, 1fr);
  gap: 0.75rem;
  align-items: start;
  padding: var(--e4) var(--e5);
  border: 1px dashed var(--ambre-bord);
  border-radius: var(--r-md);
  background: var(--ambre-doux);
  color: var(--ambre-texte);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.emplacement svg { width: 1.35rem; height: 1.35rem; margin-top: 0.1rem; }
.emplacement + .emplacement { margin-top: var(--e3); }

/* ---------- Avis vérifiés (source VroomVroom) ---------- */

.note-avis {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: var(--e3) var(--e5);
  margin: 0 auto clamp(2rem, 4vw, 3rem);
  padding: var(--e4) var(--e6);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  width: fit-content;
  max-width: 100%;
  text-align: center;
}
.note-avis__chiffre {
  font-size: 2rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
}
.note-avis__chiffre span { font-size: 1rem; font-weight: 700; color: var(--encre-3); }
.note-avis__detail { text-align: left; }

/* La cinquième étoile n'est remplie qu'à 96 % : la note est 4,8, pas 5. */
.etoiles { position: relative; display: inline-block; line-height: 0; }
.etoiles__fond,
.etoiles__plein { display: flex; gap: 0.1rem; }
.etoiles svg { width: 1.15rem; height: 1.15rem; flex: none; }
.etoiles__fond { color: var(--ligne-forte); }
.etoiles__plein {
  position: absolute;
  inset: 0;
  overflow: hidden;
  color: var(--ambre);
}

.avis {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
  align-items: stretch;
}
.avis-carte {
  display: flex;
  flex-direction: column;
  gap: var(--e3);
  margin: 0;
  padding: clamp(1.35rem, 2.5vw, 1.75rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.avis-carte blockquote {
  margin: 0;
  font-size: 0.9375rem;
  line-height: 1.6;
  color: var(--encre-2);
}
.avis-carte blockquote::before { content: '« '; }
.avis-carte blockquote::after { content: ' »'; }
.avis-carte blockquote { flex: 1; }
.avis-carte__note {
  font-size: 1.0625rem;
  font-weight: 900;
  letter-spacing: -0.03em;
  color: var(--encre);
}
.avis-carte__note span { font-size: 0.8125rem; font-weight: 700; color: var(--encre-3); }
.avis-carte figcaption { margin-top: auto; padding-top: var(--e3); border-top: 1px solid var(--ligne); }
.avis-carte figcaption strong { display: block; font-size: 0.9375rem; font-weight: 700; }
.avis-carte figcaption span { display: block; font-size: 0.8125rem; color: var(--encre-3); }

/* ==========================================================================
   MOUVEMENT RÉDUIT
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ==========================================================================
   IMPRESSION
   ========================================================================== */

@media print {
  .nav, .dock, .feuille { display: none !important; }
  body { padding-bottom: 0; background: #fff; }
  .section--nuit, .heros, .pied, .appel, .forfait--phare {
    background: #fff !important;
    color: var(--encre) !important;
  }
}

/* ==========================================================================
   COMPOSITIONS MOBILES — d'après les captures fournies par le client
   Offres et faits sur deux colonnes centrées, forfaits en carrousel.
   ========================================================================== */

@media (max-width: 46rem) {
  /* Offres : deux colonnes, contenu centré. */
  .offres { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }

  /* Le permis moto quitte la grille sur téléphone : cinq vignettes y
     donnaient une rangée de deux et une orpheline, et c'est la seule offre
     qui n'est pas encore ouverte. Quatre vignettes, deux rangées pleines.
     ATTENTION avant de supprimer cette règle : elle ne vaut que tant que la
     grille compte cinq offres dont la moto. Une version antérieure masquait
     la boîte automatique pour la même raison, et l'ajout d'une offre l'avait
     rendue fausse sans que personne ne s'en aperçoive. */
  .offre--hors-mobile { display: none; }
  .offre {
    align-items: center;
    text-align: center;
    gap: 0.5rem;
    padding: 1.5rem 0.85rem 1.15rem;
  }
  .offre h3 { font-size: 1rem; }
  .offre__prix { font-size: 1.35rem; }
  .offre__note { font-size: 0.8125rem; }
  .offre .chip-icone { order: -1; }
  .etiquette { right: 50%; transform: translateX(50%); white-space: nowrap; }

  /* Faits : deux colonnes. Avec un nombre impair de faits (trois depuis le
     retrait du paiement en plusieurs fois, le 21 octobre 2026), le dernier
     prend toute la largeur au lieu de rester seul dans sa colonne. */
  .faits {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--e3);
  }
  .faits > :last-child:nth-child(odd) { grid-column: 1 / -1; }
  .fait { flex-direction: column; align-items: center; text-align: center; gap: 0.45rem; }
  .fait svg { width: 1.6rem; height: 1.6rem; margin-top: 0; }
  .fait strong { font-size: 0.9375rem; }
  .fait span { font-size: 0.8125rem; }
}

/* Forfaits : carrousel horizontal avec aperçu de la carte suivante. */
@media (max-width: 59.99rem) {
  .forfaits {
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: var(--e4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    padding-inline: var(--gouttiere);
    padding-bottom: var(--e2);
    margin-inline: calc(var(--gouttiere) * -1);
    scrollbar-width: none;
  }
  .forfaits::-webkit-scrollbar { display: none; }
  .forfait { scroll-snap-align: start; }
}

/* Avis : même carrousel que les forfaits. Trois témoignages empilés font
   une colonne interminable sur téléphone ; en défilement, on en voit un à
   la fois et l'aperçu du suivant invite à faire glisser.
   `grid-template-columns` doit être remis à zéro : la règle de base pose un
   `auto-fit` qui l'emporterait sur `grid-auto-columns`. */
@media (max-width: 59.99rem) {
  .avis {
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: 84%;
    gap: var(--e4);
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    padding-inline: var(--gouttiere);
    padding-bottom: var(--e2);
    margin-inline: calc(var(--gouttiere) * -1);
    scrollbar-width: none;
  }
  .avis::-webkit-scrollbar { display: none; }
  .avis-carte { scroll-snap-align: start; }
}

/* Puces de position du carrousel : elles n'existent que quand il défile. */
.carrousel-puces { display: none; }
@media (max-width: 59.99rem) {
  .carrousel-puces {
    display: flex;
    justify-content: center;
    gap: 0; /* les boutons de 24 px portent déjà l'espacement */
    margin-top: var(--e5);
  }
}
/* Le point fait 8 px, mais la zone tactile fait 24 px (minimum recommandé) :
   le bouton est transparent et le point est dessiné dedans. */
.carrousel-puce {
  display: grid;
  place-items: center;
  width: 1.5rem;
  height: 1.5rem;
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.carrousel-puce::before {
  content: "";
  width: 0.5rem;
  height: 0.5rem;
  border-radius: var(--r-pill);
  background: var(--ligne-forte);
  transition: background-color var(--duree) var(--sortie);
}
.carrousel-puce[aria-current='true']::before { background: var(--encre); }

/* Étiquettes de tarif : libellé long sur grand écran, abrégé sur mobile,
   pour tenir sur deux lignes sans perdre le sens ni le prix. */
.tag-tarif__court { display: none; }
@media (max-width: 46rem) {
  .autres-tarifs { gap: 0.35rem; margin-top: var(--e5); }
  .tag-tarif { padding: 0.35rem 0.55rem; font-size: 0.6875rem; gap: 0.25rem; }
  .tag-tarif__long { display: none; }
  .tag-tarif__court { display: inline; }
}

/* ==========================================================================
   AJUSTEMENTS DEMANDÉS — pied de la section « notre école », flux mobile
   ========================================================================== */

/* Le bouton et sa mention forment un bloc centré sous la grille à trois
   colonnes, au lieu de flotter à gauche sous une seule d'entre elles. */
.apropos__pied {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  margin-top: clamp(2rem, 4vw, 3rem);
  text-align: center;
}
.apropos__pied .btn { width: auto; }

@media (max-width: 59.99rem) {
  .apropos__pied .btn {
    width: 100%;
    /* Ce libellé est long : sur mobile on le laisse se replier plutôt que
       de laisser le bouton déborder de sa colonne. */
    white-space: normal;
    text-align: center;
    padding-block: 0.7rem;
  }
}

/* Flux réseaux sociaux : même défilement horizontal que les forfaits. */
@media (max-width: 59.99rem) {
  .flux {
    grid-auto-flow: column;
    grid-auto-columns: 42%;
    gap: 0.6rem;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--gouttiere);
    padding-inline: var(--gouttiere);
    padding-bottom: var(--e2);
    margin-inline: calc(var(--gouttiere) * -1);
    scrollbar-width: none;
  }
  .flux::-webkit-scrollbar { display: none; }
  .flux__vignette { scroll-snap-align: start; }
}

/* ==========================================================================
   ALLÉGEMENTS MOBILES
   ========================================================================== */

@media (max-width: 59.99rem) {
  /* Bouton d'agences : au format de son texte, plus en pleine largeur. */
  .apropos__pied .btn {
    width: auto;
    white-space: nowrap;
    padding-block: 0.65rem;
    padding-inline: 1.25rem;
    font-size: 0.9375rem;
  }
}

/* Bloc de note sur mobile : le texte de certification est une mention, il ne
   doit pas peser autant qu'un paragraphe de contenu. */
@media (max-width: 46rem) {
  .note-avis { padding: var(--e4) var(--e5); gap: var(--e2) var(--e4); }
  .note-avis__chiffre { font-size: 1.5rem; }
  .note-avis__chiffre span { font-size: 0.875rem; }
  .note-avis .t-note { font-size: 0.8125rem; line-height: 1.5; }
  .note-avis .etoiles svg { width: 1rem; height: 1rem; }
}

/* Le numéro de la FAQ fait doublon sur mobile : la barre d'action fixe en bas
   porte déjà le bouton « Appeler ». */
@media (max-width: 59.99rem) {
  .faq-appel { display: none; }
}

/* ==========================================================================
   PAGES INTÉRIEURES — en-tête, fil d'ariane, blocs de détail
   ========================================================================== */

/* Bandeau sombre d'ouverture : il donne à la barre son fond noir naturel et
   ouvre la page comme le héros ouvre l'accueil, en plus compact. */
.page-entete {
  background: var(--nuit);
  color: var(--sur-nuit);
  padding-top: calc(5rem + clamp(2rem, 5vw, 3.5rem));
  padding-bottom: clamp(2.5rem, 6vw, 4rem);
}
/* Le bloc porte AUSSI la classe `wrap` : lui donner un `max-width` réduit
   la largeur du wrap lui-même, que `margin-inline: auto` recentre alors dans
   la fenêtre. Le titre se retrouvait décalé de 232 px vers la droite par
   rapport au reste du contenu. On laisse donc le wrap à sa largeur et on
   limite la mesure de lecture sur les enfants. */
.page-entete__in { display: grid; gap: var(--e4); justify-items: start; }
.page-entete__in > * { max-width: 46rem; }
/* En contexte grille, la pastille est un enfant : sans cela elle s'étire. */
.page-entete__in .pastille { justify-self: start; }
.page-entete h1 { color: var(--sur-nuit); }
.page-entete .t-lead { color: rgba(255, 255, 255, 0.82); }
.page-entete .pastille {
  background: rgba(255, 184, 0, 0.14);
  border-color: rgba(255, 184, 0, 0.4);
  color: var(--ambre);
}

.fil {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.8125rem;
  color: var(--sur-nuit-3);
}
.fil a { text-decoration: none; transition: color var(--duree) var(--sortie); }
.fil a:hover { color: var(--ambre); }
.fil svg { width: 0.85rem; height: 0.85rem; opacity: 0.6; }
.fil [aria-current] { color: var(--sur-nuit-2); }

/* Chiffres clés d'une formation, juste sous l'en-tête. */
.reperes {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
  margin-top: clamp(-3rem, -4vw, -2rem);
  position: relative;
  z-index: 2;
}
.repere strong {
  display: block;
  font-size: clamp(1.35rem, 3vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1.1;
  white-space: nowrap;
}
.repere span {
  display: block;
  font-size: 0.8125rem;
  color: var(--encre-3);
  margin-top: 0.15rem;
}
/* Empilés, les trois chiffres mangeraient la moitié de l'écran du téléphone.
   On les met en ligne : le chiffre reste lisible, seul le libellé se replie. */
@media (max-width: 47.9375rem) {
  .reperes { grid-template-columns: repeat(3, 1fr); gap: var(--e3); }
  .repere strong { font-size: 1.0625rem; }
  .repere span { font-size: 0.6875rem; line-height: 1.3; }
}

/* Deux colonnes texte, pour « ce qui est compris » et son pendant. */
.duo-listes { display: grid; gap: clamp(1.5rem, 4vw, 3rem); }
@media (min-width: 52rem) { .duo-listes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.liste-croix { display: grid; gap: 0.6rem; }
.liste-croix li {
  display: grid;
  grid-template-columns: 1.1rem minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  font-size: 0.9375rem;
  line-height: 1.45;
  color: var(--encre-2);
}
.liste-croix svg { width: 1.1rem; height: 1.1rem; color: var(--encre-3); margin-top: 0.15rem; }

/* Déroulé d'une formation, en étapes numérotées. */
.etapes { display: grid; gap: var(--e5); counter-reset: etape; }
.etape {
  display: grid;
  grid-template-columns: 2.5rem minmax(0, 1fr);
  gap: var(--e4);
  align-items: start;
}
.etape__num {
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--r-pill);
  background: var(--encre);
  color: var(--ambre);
  font-size: 0.9375rem;
  font-weight: 900;
}
.etape h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; }
.etape p { font-size: 0.9375rem; color: var(--encre-2); margin-top: 0.25rem; max-width: 58ch; }

/* Bloc d'achat collant sur les pages de formation. */
.achat {
  display: grid;
  gap: var(--e4);
  padding: clamp(1.5rem, 3vw, 2rem);
  background: var(--nuit);
  color: var(--sur-nuit);
  border-radius: var(--r-lg);
}
.achat__prix { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0.15rem 0.6rem; }
.achat__prix strong {
  font-size: clamp(2.5rem, 5vw, 3.15rem);
  font-weight: 900;
  letter-spacing: -0.045em;
  line-height: 1;
  white-space: nowrap;
}
.achat__prix span { font-size: 0.875rem; color: var(--sur-nuit-3); }

/* La mention « Payable en 4 fois » se pose à droite du prix, sur la même
   ligne : `margin-left: auto` la pousse au bord de la carte. S'il manque la
   place elle passe dessous, toujours alignée à droite. Les deux déclarations
   qui suivent annulent la règle `.achat__prix span` juste au-dessus, de même
   poids mais écrite avant. */
.achat__prix .pastille {
  margin-left: auto;
  align-self: center;
  font-size: 0.8125rem;
  color: var(--ambre);
}
/* Ce qui suit la pastille (« forfait complet », « en boîte automatique »)
   repasse sous le prix : la pastille garde le coin haut droit. */
.achat__prix .pastille ~ span { flex-basis: 100%; }
.achat .t-note { color: var(--sur-nuit-3); }

/* Bloc de paiement de la carte d'achat : tarif, acceptation des CGV et
   bouton. Construit par systeme.js ; sans JavaScript la carte garde son
   lien vers la pré-inscription. Fond sombre, donc tout est en clair. */
.achat__payer { display: grid; gap: var(--e3); }
.achat__tarifs {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0.75rem 0.9rem;
  border: 1px solid rgba(255, 255, 255, 0.16);
  border-radius: var(--r-md);
}
.achat__tarifs label { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: center; font-size: 0.9375rem; cursor: pointer; }
.achat__tarifs input { width: 1.1rem; height: 1.1rem; accent-color: var(--ambre); }
.achat__tarifs b { font-weight: 800; }
.achat__cgv { font-size: 0.8125rem; line-height: 1.5; color: var(--sur-nuit-2); }
.achat__cgv::before { border-color: rgba(255, 255, 255, 0.45); }
.achat__cgv:has(input:checked)::before { background: var(--ambre); border-color: var(--ambre); }
.achat__cgv::after { border-color: var(--encre); }
.achat__cgv a { color: var(--ambre); text-decoration: underline; text-underline-offset: 0.2em; }
.achat__cgv.est-invalide span { color: #ffb4ad; }
@media (min-width: 60rem) {
  .colonne-achat { position: sticky; top: 6.5rem; }
}

.duo-detail { display: grid; gap: clamp(2rem, 4vw, 3.5rem); align-items: start; }

/* Les boutons sont en `nowrap`. « Être prévenu de l'ouverture » impose alors
   287px a son bloc, et sous 360px la page deborde horizontalement. Le libelle
   est autorise a passer sur deux lignes a ce seul palier : `normal` permet le
   retour a la ligne, il ne le force pas, donc rien ne bouge au-dessus. */
@media (max-width: 23rem) {
  .achat .btn--bloc { white-space: normal; }
}
@media (min-width: 60rem) {
  .duo-detail { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); }
}

/* La grille des formations n'a que six cartes : trois par rangée respire
   mieux que les cinq colonnes serrées de l'accueil. */
@media (min-width: 68rem) {
  .offres--formations { grid-template-columns: repeat(3, 1fr); gap: var(--e4); }
}

/* Quand une formation a deux tarifs de même rang (boîte manuelle ou
   automatique en conduite accompagnée), le second se pose sous le premier
   avec un filet : afficher un seul des deux tromperait la moitié des lecteurs. */
.achat__second {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 0.15rem 0.6rem;
  margin-top: 0.85rem;
  padding-top: 0.85rem;
  border-top: 1px solid rgba(255, 255, 255, 0.14);
}
.achat__second strong {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
.achat__second span { font-size: 0.875rem; color: var(--sur-nuit-3); }
/* `display: flex` ci-dessus l'emporterait sur le `display: none` de
   l'attribut `hidden` : il faut le dire explicitement. */
.achat__second[hidden] { display: none; }

/* ==========================================================================
   Grille tarifaire — page Tarifs
   Chaque ligne est un lien vers la page de la formation : la grille compare,
   les pages détaillent. Aucun contenu n'est dupliqué entre les deux.
   ========================================================================== */

.grille-tarifs {
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}

.ligne-tarif {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  align-items: center;
  gap: var(--e3) var(--e5);
  padding: clamp(1.1rem, 2.4vw, 1.5rem) clamp(1.25rem, 3vw, 1.75rem);
  text-decoration: none;
  transition: background-color var(--duree) var(--sortie);
}
.ligne-tarif + .ligne-tarif { border-top: 1px solid var(--ligne); }
.ligne-tarif:hover { background: var(--creme); }
.ligne-tarif:hover .ligne-tarif__fleche { color: var(--ambre-texte); transform: translateX(0.2rem); }

.ligne-tarif h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.3;
}
/* Classe nommée, pas `.ligne-tarif p` : la description et le prix sont tous
   deux des <p>, et cibler la balise écrasait le prix par spécificité. */
.ligne-tarif__spec {
  font-size: 0.875rem;
  color: var(--encre-3);
  margin-top: 0.15rem;
}
.ligne-tarif__prix {
  font-size: clamp(1.35rem, 3vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.035em;
  line-height: 1;
  white-space: nowrap;
}
/* Le prix « à venir » n'a pas le poids d'un vrai prix : il ne doit pas
   se lire comme un montant. */
.ligne-tarif__prix--attente {
  font-size: 0.9375rem;
  font-weight: 700;
  color: var(--encre-3);
  letter-spacing: -0.01em;
}
.ligne-tarif__fleche {
  width: 1.1rem;
  height: 1.1rem;
  color: var(--encre-3);
  transition: color var(--duree) var(--sortie), transform var(--duree) var(--sortie);
}
/* Sous 34rem, la flèche vole la place du prix : on la retire, la ligne
   reste cliquable en entier. */
@media (max-width: 33.9375rem) {
  .ligne-tarif { gap: var(--e2) var(--e4); }
  .ligne-tarif__fleche { display: none; }
}

/* Variante étudiant : rattachée à la ligne du dessus, pas un forfait de plus. */
.ligne-tarif--variante { background: var(--creme); padding-left: clamp(2.25rem, 5vw, 3.25rem); }
.ligne-tarif--variante:hover { background: var(--creme-2); }
.ligne-tarif--variante h3 { font-weight: 500; color: var(--encre-2); }
.ligne-tarif--variante .ligne-tarif__prix { font-size: 1.25rem; }

/* ==========================================================================
   Heure supplémentaire par agence
   C'est la seule donnée qui diffère entre La Possession et Le Port.
   Chaque chiffre est enfermé dans la carte de son agence : une confusion
   sur ce point est un échec produit.
   ========================================================================== */

.agences-tarif { display: grid; gap: var(--e5); }
@media (min-width: 52rem) {
  .agences-tarif { grid-template-columns: repeat(2, 1fr); }
}

.agence-tarif {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: clamp(1.5rem, 3.5vw, 2.25rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.agence-tarif--nuit {
  background: var(--nuit);
  border-color: transparent;
  color: var(--sur-nuit);
}
.agence-tarif--nuit .agence-tarif__lieu { color: var(--sur-nuit-3); }
.agence-tarif--nuit .agence-tarif__duree {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.16);
  color: var(--sur-nuit-2);
}
.agence-tarif--nuit .agence-tarif__taux { border-top-color: rgba(255, 255, 255, 0.12); }
.agence-tarif--nuit .agence-tarif__taux span { color: var(--sur-nuit-3); }

/* h3 sur la page formations, ou le bloc a sa propre section ; h4 sur
   l'accueil, ou il est imbrique sous le titre des tarifs. Meme composant,
   deux profondeurs de plan. */
.agence-tarif h3,
.agence-tarif h4 { font-size: clamp(1.25rem, 2vw, 1.5rem); font-weight: 900; letter-spacing: -0.03em; }
.agence-tarif__lieu { font-size: 0.9375rem; color: var(--encre-3); margin-top: 0.25rem; }
.agence-tarif__duree {
  align-self: flex-start;
  padding: 0.35rem 0.75rem;
  border-radius: var(--r-pill);
  background: var(--creme);
  border: 1px solid var(--ligne);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--encre-2);
}
.agence-tarif__taux {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding-top: 0.85rem;
  border-top: 1px solid var(--ligne);
}
.agence-tarif__taux span { font-size: 0.9375rem; color: var(--encre-2); }
.agence-tarif__taux strong {
  font-size: 1.5rem;
  font-weight: 900;
  letter-spacing: -0.035em;
  white-space: nowrap;
}

/* ==========================================================================
   Équipe — page Moniteurs
   Photos réelles fournies par le client (septembre 2026), détourées sur
   fond blanc et recadrées au même format 4:5, tête à la même hauteur.
   Le fond blanc de la photo se fond dans la carte blanche : le portrait
   est posé en haut de la carte, sans cadre visible.
   Les avatars du benchmark sont générés par IA et ne doivent jamais être
   publiés comme photos de personnes réelles.
   ========================================================================== */

.equipe {
  display: grid;
  gap: var(--e4);
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}
/* Quatre moniteurs depuis le 24 octobre 2026 (Noman retiré à la demande de
   l'auto-école). En colonnes automatiques, la grille en faisait cinq et
   laissait une case vide à droite : on fixe quatre colonnes dès la tablette.
   À revoir si l'équipe change de taille. */
@media (min-width: 48rem) {
  .equipe { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
/* Six cartes empilées une par ligne feraient un couloir sans fin sur
   téléphone : on passe à deux colonnes et le monogramme se resserre. */
@media (max-width: 47.9375rem) {
  .equipe { grid-template-columns: repeat(2, 1fr); gap: var(--e3); }
  .moniteur { padding-bottom: var(--e4); }
  .moniteur > div { padding: 0 var(--e3); }
  .moniteur--ouverte { grid-column: 1 / -1; padding: var(--e5) var(--e3); }
}

.moniteur {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--e3);
  text-align: center;
  padding: 0 0 clamp(1.5rem, 3vw, 2rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
  overflow: hidden;
}
.moniteur > div { padding: 0 var(--e4); }
/* Le portrait prend toute la largeur de la carte. Fond blanc dans fond
   blanc : seule la fine ligne du bas le sépare du nom. */
.moniteur__photo {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 5;
  object-fit: cover;
  object-position: center bottom;
  background: var(--blanc);
  border-bottom: 1px solid var(--ligne);
}
.moniteur h3 { font-size: 1.0625rem; font-weight: 700; letter-spacing: -0.015em; line-height: 1.3; }
.moniteur p { font-size: 0.875rem; color: var(--encre-3); margin-top: 0.15rem; }

/* Carte « et vous ? » : recrutement, volontairement sans photo. Elle
   occupe toute la largeur sous les portraits plutôt que de rester seule,
   petite, au début d'une deuxième rangée. */
.moniteur--ouverte {
  grid-column: 1 / -1;
  padding: clamp(1.5rem, 3vw, 2rem) var(--e4);
  background: var(--creme);
  border-style: dashed;
  border-color: var(--ligne-forte);
  box-shadow: none;
  justify-content: center;
}

/* ==========================================================================
   Carte d'agence — page Agences
   La mini-carte est une image auto-hébergée, jamais une iframe tierce :
   aucune requête ne part vers Google ou OSM au chargement de la page.
   Elle est cliquable et ouvre l'itinéraire dans l'application du visiteur.
   ========================================================================== */

.agences { display: grid; gap: clamp(2rem, 5vw, 3rem); }

.agence {
  display: grid;
  overflow: hidden;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
@media (min-width: 58rem) {
  .agence { grid-template-columns: minmax(0, 1fr) minmax(0, 1.05fr); }
  .agence--inversee .agence__carte { order: -1; }
}

.agence__corps {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  padding: clamp(1.5rem, 3.5vw, 2.5rem);
  min-width: 0;
}
/* Les boutons sont en `nowrap` par défaut. Ici l'un d'eux porte une adresse
   e-mail de 29 caractères : sans autorisation de repli, sa largeur minimale
   s'impose à toute la grille et fait déborder la carte sur un petit écran. */
.agence__corps .btn {
  white-space: normal;
  overflow-wrap: break-word;
  text-align: center;
}
/* Une adresse coupée en « gmail.c / om » se lit mal et fait douter de sa
   validité. On la resserre pour qu'elle tienne d'un bloc ; le repli
   ci-dessus ne sert plus que de filet sous 20 rem. */
.agence__corps a[href^="mailto:"] {
  font-size: 0.9375rem;
  padding-inline: 1rem;
  letter-spacing: -0.015em;
}
.agence__corps h2 { font-size: clamp(1.5rem, 3vw, 2rem); font-weight: 900; letter-spacing: -0.035em; }
.agence__adresse { font-size: 1.0625rem; color: var(--encre-2); line-height: 1.5; }

/* Le crédit OSM porte son propre lien : il ne peut donc PAS vivre dans le
   lien de la carte. Deux <a> imbriqués sont invalides et le navigateur
   éjecte l'intérieur hors du bloc. D'où ce conteneur non cliquable qui
   porte les deux enfants côte à côte. */
.agence__carte {
  position: relative;
  display: block;
  min-height: 14rem;
  background: var(--creme-2);
}
.agence__lien { position: absolute; inset: 0; display: block; text-decoration: none; }
.agence__lien img { width: 100%; height: 100%; object-fit: cover; }
.agence__lien::after {
  content: "";
  position: absolute;
  inset: 0;
  box-shadow: inset 0 0 0 1px var(--ligne);
  transition: background-color var(--duree) var(--sortie);
}
.agence__lien:hover::after { background: rgba(255, 184, 0, 0.12); }

.agence__itineraire {
  position: absolute;
  left: var(--e4);
  bottom: var(--e4);
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.6rem 1rem;
  border-radius: var(--r-pill);
  background: var(--blanc);
  border: 1px solid var(--ligne-forte);
  box-shadow: var(--ombre-carte);
  font-size: 0.875rem;
  font-weight: 700;
  transition: background-color var(--duree) var(--sortie);
}
.agence__lien:hover .agence__itineraire { background: var(--ambre); border-color: var(--ambre); }
.agence__itineraire svg { width: 1rem; height: 1rem; }

/* Attribution ODbL : obligatoire dès qu'une tuile OSM est réutilisée. */
.agence__credit {
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 2;
  padding: 0.2rem 0.5rem;
  background: rgba(255, 255, 255, 0.82);
  border-top-left-radius: var(--r-sm);
  font-size: 0.625rem;
  color: var(--encre-3);
}
.agence__credit a { color: inherit; }

/* ---------- Horaires ---------- */

.agence__corps h3 svg,
.agence__corps h2 svg {
  display: inline-block;
  width: 1.05em;
  height: 1.05em;
  vertical-align: -0.16em;
  color: var(--ambre-texte);
}

.horaires { border-top: 1px solid var(--ligne); }
.horaires div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--e4);
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ligne);
  font-size: 0.9375rem;
}
.horaires dt { color: var(--encre-2); }
.horaires dd { margin: 0; font-weight: 700; text-align: right; }
.horaires .est-ferme { color: var(--encre-3); font-weight: 500; }

/* ---------- Bandeau du label Sécurité routière ---------- */

.label {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  align-items: center;
  padding: clamp(1.75rem, 4vw, 2.75rem);
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
@media (min-width: 48rem) {
  .label { grid-template-columns: auto minmax(0, 1fr); }
}
.label__ecusson { width: clamp(7rem, 16vw, 9.5rem); justify-self: center; }
/* Accueil : la section du label suit « Notre école », sur le même fond crème.
   Leurs deux marges s'additionnaient en un vide de 144 px. En mode jour on
   retire la marge du haut ; en mode nuit la section du dessus devient noire,
   on garde alors la marge pour que la carte ne colle pas au bord sombre. */
.zone-jn:not(.est-nuit) + .section--creme { padding-top: 0; }
.label__ecusson img { width: 100%; height: auto; }

/* ==========================================================================
   Bandeau de chiffres — carte flottante sous le héros
   Même géométrie que les repères des pages intérieures : la carte chevauche
   la bascule sombre → clair, ce qui remplace la coupure nette par un objet
   qui la traverse. Ici en encre à chiffres ambre : la moitié basse se
   détache sur le blanc, la moitié haute se fond dans le héros.
   ========================================================================== */

.stats { position: relative; z-index: 2; }
.stats__carte {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--e4);
  /* La carte ne prend pas toute la largeur du contenu : à 75 rem les quatre
     chiffres se perdraient dans le vide. Barre longue et fine : elle
     traverse la bascule sombre → clair sans l'alourdir. */
  max-width: 54rem;
  margin-inline: auto;
  padding: clamp(0.7rem, 1.5vw, 0.85rem) clamp(1rem, 2.5vw, 2rem);
  /* Le chevauchement ne peut pas dépendre de la largeur de l'écran : sur
     mobile le héros est plus court et la carte recouvrait les boutons.
     Valeur fixe, et le héros réserve la place correspondante ci-dessous. */
  margin-top: -2.25rem;
  background: var(--nuit);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-haute);
}
@media (min-width: 48rem) {
  .stats__carte { margin-top: -3rem; }
}

.stat { position: relative; min-width: 0; }
.stat + .stat::before {
  content: "";
  position: absolute;
  left: calc(var(--e4) / -2);
  top: 0.1rem;
  bottom: 0.1rem;
  width: 1px;
  background: rgba(255, 255, 255, 0.12);
}

.stat__val {
  display: flex;
  align-items: baseline;
  gap: 0.05rem;
  font-size: clamp(1.35rem, 3.4vw, 2rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1;
  color: var(--ambre);
  white-space: nowrap;
  /* Chiffres à chasse fixe : sinon la largeur saute à chaque incrément
     et toute la rangée tremble pendant le décompte. */
  font-variant-numeric: tabular-nums;
}
.stat__unite { font-size: 0.5em; font-weight: 700; letter-spacing: -0.02em; }

.stat__lib {
  display: block;
  margin-top: 0.25rem;
  font-size: 0.8125rem;
  line-height: 1.35;
  color: var(--sur-nuit-3);
  /* Un libellé trop long doit se voir tout de suite plutôt que se replier
     en silence sur deux lignes et déséquilibrer la rangée. */
  white-space: nowrap;
}
/* Une seule ligne sur mobile impose des libellés courts : on garde les
   deux versions dans le HTML et on montre celle qui tient. */
.stat__court { display: none; }
@media (max-width: 47.9375rem) {
  .stats__carte { gap: var(--e3); }
  .stat + .stat::before { left: calc(var(--e3) / -2); }
  .stat__lib { font-size: 0.625rem; margin-top: 0.3rem; letter-spacing: -0.005em; }
  .stat__long { display: none; }
  .stat__court { display: inline; }
}

/* Arrivée : décalage vers le haut, joué une fois, uniquement sur
   `transform` et `opacity` pour ne déclencher aucun recalcul de mise en page. */
.stats.a-le-script .stat {
  opacity: 0;
  transform: translateY(0.6rem);
  transition: opacity 520ms var(--sortie), transform 520ms var(--sortie);
}
.stats.a-le-script.est-vue .stat { opacity: 1; transform: none; }
.stats.est-vue .stat:nth-child(2) { transition-delay: 80ms; }
.stats.est-vue .stat:nth-child(3) { transition-delay: 160ms; }
.stats.est-vue .stat:nth-child(4) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .stats.a-le-script .stat { opacity: 1; transform: none; transition: none; }
}

/* ==========================================================================
   Faits cliquables et panneau de détail
   Une ligne courte suffit à énoncer le fait ; le détail arrive à la demande,
   dans un panneau latéral, sans quitter la page. La ligne visible porte
   déjà l'information : le panneau n'ajoute que du contexte.
   ========================================================================== */

/* Version cliquable. Les `div.fait` statiques d'autres pages ne changent pas. */
button.fait {
  flex-direction: column;
  align-items: center;
  gap: 0.6rem;
  width: 100%;
  /* Sans cela, l'élément de grille ne peut pas descendre sous la largeur
     minimale de son contenu et déborde de quelques pixels sur les petits
     écrans, débordement masqué par `overflow-x: hidden`. */
  min-width: 0;
  padding: var(--e3);
  border: 0;
  border-radius: var(--r-md);
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: center;
  cursor: pointer;
  transition: background-color var(--duree) var(--sortie);
}
button.fait svg { margin-top: 0; }

/* Sous 46 rem, une colonne et l'icône à gauche : le libellé tient sur une
   ligne et chaque fait ne coûte plus que ~42 px de haut au lieu de 78.
   Cette règle doit vivre APRÈS la définition ci-dessus : à spécificité
   égale, c'est la dernière déclarée qui gagne. */

/* `.fait span` met tous les span d'un fait en `display: block` : sans ces
   deux règles plus spécifiques, le span d'accent passe à la ligne et le
   titre se coupe en deux, quel que soit le `white-space`. */
.fait .fait__titre span { display: inline; font-size: inherit; color: var(--ambre-texte); }
.fait__titre {
  position: relative;
  white-space: nowrap;
  /* `inline-block` et non `inline` : sur deux lignes, le trait d'un inline
     se cale sur le premier fragment et se retrouve au milieu du texte. */
  display: inline-block;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  line-height: 1.35;
}
/* Trait qui se déplie sous le titre. Il part de la gauche, n'anime que
   `transform` et ne déplace donc aucun voisin. */
.fait__titre::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.2rem;
  height: 2px;
  background: var(--ambre);
  border-radius: var(--r-pill);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform 320ms var(--sortie);
}
button.fait:hover .fait__titre::after,
button.fait:focus-visible .fait__titre::after { transform: scaleX(1); }

@media (max-width: 46rem) {
  button.fait {
    flex-direction: column;
    justify-content: flex-start;
    gap: 0.5rem;
    padding: 0.65rem 0.4rem;
  }
  button.fait svg { width: 1.6rem; height: 1.6rem; }
  /* Deux colonnes ne laissent pas la place à une ligne unique : sous
     160 px de colonne, tenir le `nowrap` imposerait un corps illisible.
     Le titre se replie donc ici, centré sous son icône. */
  .fait__titre { white-space: normal; font-size: 0.9375rem; }
}

/* ---------- Panneau latéral ---------- */

.panneau {
  width: min(30rem, 100%);
  max-width: 100%;
  height: 100%;
  max-height: 100%;
  margin: 0 0 0 auto;               /* collé à droite */
  padding: 0;
  border: 0;
  background: var(--blanc);
  color: var(--encre);
  overflow: hidden;
}
.panneau::backdrop { background: rgba(14, 15, 18, 0.55); }

.panneau__in {
  display: flex;
  flex-direction: column;
  gap: var(--e4);
  height: 100%;
  overflow-y: auto;
  padding: clamp(1.5rem, 4vw, 2.5rem);
  padding-bottom: calc(clamp(1.5rem, 4vw, 2.5rem) + env(safe-area-inset-bottom));
}
.panneau__fermer {
  align-self: flex-end;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-pill);
  background: var(--blanc);
  color: var(--encre);
  cursor: pointer;
  transition: background-color var(--duree) var(--sortie);
}
.panneau__fermer:hover { background: var(--creme); }
.panneau__fermer svg { width: 1.1rem; height: 1.1rem; }

.panneau h2 { font-size: clamp(1.35rem, 3vw, 1.5rem); font-weight: 900; letter-spacing: -0.035em; }
.panneau .chip-icone { margin-bottom: var(--e2); }
.panneau p { font-size: 0.9375rem; line-height: 1.6; color: var(--encre-2); }
.panneau .liste-check { margin-top: var(--e2); }
.panneau__pied { margin-top: auto; padding-top: var(--e5); }

/* Ouverture : glissement depuis la droite, ou depuis le bas sur téléphone
   où un tiroir latéral n'a pas de sens. */
@keyframes panneau-entre-droite {
  from { transform: translateX(100%); }
  to   { transform: translateX(0); }
}
@keyframes panneau-entre-bas {
  from { transform: translateY(100%); }
  to   { transform: translateY(0); }
}
.panneau[open] { animation: panneau-entre-droite 320ms var(--sortie); }
.panneau[open]::backdrop { animation: voile-entre 320ms var(--sortie); }
@keyframes voile-entre { from { opacity: 0 } to { opacity: 1 } }

@media (max-width: 40rem) {
  .panneau {
    width: 100%;
    height: auto;
    max-height: 88%;
    margin: auto 0 0;               /* feuille par le bas */
    border-radius: var(--r-lg) var(--r-lg) 0 0;
  }
  .panneau[open] { animation-name: panneau-entre-bas; }
}

@media (prefers-reduced-motion: reduce) {
  .panneau[open], .panneau[open]::backdrop { animation: none; }
  .fait__titre::after { transition: none; }
}

/* ==========================================================================
   Bascule jour / nuit — section « Notre école »
   Une seule section change d'ambiance, pas le site entier. La nuit sert à
   montrer la voiture phares allumés : c'est une démonstration, pas un thème.
   ========================================================================== */

.zone-jn {
  position: relative;
  /* La couleur est portée par des variables locales : la bascule ne
     redéclare qu'elles, et tout le contenu suit sans règle par élément. */
  --jn-fond: var(--creme);
  --jn-titre: var(--encre);
  --jn-texte: var(--encre-2);
  --jn-attenue: var(--encre-3);
  --jn-ligne: var(--ligne);
  background: var(--jn-fond);
}
.zone-jn.est-nuit {
  --jn-fond: var(--nuit-photo);
  --jn-titre: var(--sur-nuit);
  --jn-texte: var(--sur-nuit-2);
  --jn-attenue: var(--sur-nuit-3);
  --jn-ligne: rgba(255, 255, 255, 0.14);
}

.zone-jn h2,
.zone-jn h3 { color: var(--jn-titre); transition: color 260ms var(--sortie); }
.zone-jn p,
.zone-jn .t-lead { color: var(--jn-texte); transition: color 260ms var(--sortie); }
.zone-jn .t-note,
.zone-jn .t-mini { color: var(--jn-attenue); }

.zone-jn.est-nuit .pastille {
  background: rgba(255, 184, 0, 0.14);
  border-color: rgba(255, 184, 0, 0.4);
  color: var(--ambre);
}
.zone-jn.est-nuit .chip-icone {
  background: rgba(255, 184, 0, 0.14);
  color: var(--ambre);
}
.zone-jn.est-nuit .btn--encre {
  background: var(--ambre);
  color: var(--encre);
}
.zone-jn.est-nuit .btn--encre:hover { background: var(--ambre-vif); }

/* ---------- La voiture ---------- */

/* Une séquence photo d'une même prise de vue passant du jour à la nuit :
   même voiture, même pose, même cadrage. Rien ne peut bouger au basculement,
   contrairement à deux clichés distincts dont l'angle diffère.

   Le fond de chaque image a été ramené, à la fabrication, sur la couleur
   qu'aura la section au même instant. Le JavaScript pose cette couleur sur
   la section à chaque image : la synchronisation est structurelle, elle ne
   dépend d'aucun réglage de durée. La section n'a donc PAS de transition
   sur son fond, sinon elle retarderait sur l'image. */
.vitrine__cadre { position: relative; }
.vitrine__image { display: block; width: 100%; height: auto; }

/* ---------- Le bouton ---------- */

.jn-bascule {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.9rem 0.5rem 0.6rem;
  border: 1px solid var(--jn-ligne);
  border-radius: var(--r-pill);
  background: var(--blanc);
  color: var(--encre-2);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  cursor: pointer;
  transition: background-color var(--duree) var(--sortie),
    border-color var(--duree) var(--sortie), color var(--duree) var(--sortie);
}
.zone-jn.est-nuit .jn-bascule { background: var(--nuit-3); color: var(--sur-nuit-2); }
.jn-bascule:hover { border-color: var(--ambre); color: var(--ambre-texte); }
.zone-jn.est-nuit .jn-bascule:hover { color: var(--ambre); }

/* Pastille qui glisse d'un bord à l'autre, seul élément animé du bouton. */
.jn-bascule__piste {
  position: relative;
  width: 2.1rem;
  height: 1.2rem;
  border-radius: var(--r-pill);
  background: var(--creme-2);
  flex: none;
}
.zone-jn.est-nuit .jn-bascule__piste { background: rgba(255, 255, 255, 0.16); }
.jn-bascule__pion {
  position: absolute;
  top: 0.15rem;
  left: 0.15rem;
  width: 0.9rem;
  height: 0.9rem;
  border-radius: 50%;
  background: var(--ambre);
  transition: transform 320ms var(--sortie);
}
.zone-jn.est-nuit .jn-bascule__pion { transform: translateX(0.9rem); }
.jn-bascule svg { width: 0.95rem; height: 0.95rem; }

/* En bas à droite de la section, dans le flux : en position absolue il
   chevaucherait le texte dès que la colonne s'allonge. */
.jn-rangee {
  display: flex;
  justify-content: flex-end;
  margin-top: var(--e5);
}
@media (max-width: 59.99rem) {
  .jn-rangee { justify-content: center; }
}

@media (prefers-reduced-motion: reduce) {
  .zone-jn, .zone-jn h2, .zone-jn h3, .zone-jn p, .zone-jn .t-lead,
  .zone-jn h2, .zone-jn h3, .zone-jn p, .jn-bascule__pion {
    transition: none;
  }
}

/* ==========================================================================
   FORMULAIRE
   Un formulaire de pré-inscription se remplit souvent debout, sur un
   téléphone, en plein soleil. D'où des cibles hautes, des libellés toujours
   visibles — jamais de placeholder en guise d'étiquette — et des messages
   d'erreur écrits en français, sous le champ concerné.
   ========================================================================== */

.formulaire { display: grid; gap: clamp(2rem, 4vw, 2.75rem); }

.bloc-champs {
  display: grid;
  gap: var(--e5);
  margin: 0;
  padding: clamp(1.25rem, 3vw, 1.75rem);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  background: var(--blanc);
  box-shadow: var(--ombre-carte);
}
.bloc-champs > legend {
  padding: 0 0.5rem;
  margin-left: -0.5rem;
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-3);
}

.duo-champs { display: grid; gap: var(--e5); }
@media (min-width: 40rem) { .duo-champs { grid-template-columns: 1fr 1fr; } }

/* `align-content: start` est indispensable : sans lui, les rangées de la
   grille s'étirent pour remplir la hauteur imposée par le champ voisin, et
   un champ sans texte d'aide voit sa commande grandir et descendre. Deux
   champs côte à côte cessent alors d'être alignés. */
.champ { display: grid; gap: 0.4rem; align-content: start; min-width: 0; }
.champ > label,
.bloc-champs .intitule {
  font-size: 0.9375rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}
.champ .t-mini { margin-top: 0.1rem; }

.champ input,
.champ select,
.champ textarea {
  width: 100%;
  min-height: 3rem;
  padding: 0.7rem 0.9rem;
  font: inherit;
  font-size: 1rem;                 /* sous 16 px, iOS zoome à la mise au point */
  color: var(--encre);
  background: var(--blanc);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-sm);
  transition: border-color var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie);
}
.champ textarea { min-height: 6.5rem; resize: vertical; }

/* Safari impose aux champs une largeur intrinsèque qu'ils ne cèdent pas, et
   c'est flagrant sur `date` : le champ sort de sa colonne alors que les
   voisins la respectent. `appearance: none` retire ce gabarit natif,
   `min-width: 0` autorise le rétrécissement, `max-width` sert de garde-fou.
   Invisible sous Chromium, d'où l'importance de ne pas s'y fier seul. */
.champ input, .champ select, .champ textarea { min-width: 0; max-width: 100%; }
.champ input[type="date"] {
  -webkit-appearance: none;
  appearance: none;
  text-align: left;
}
.champ select { appearance: none; padding-right: 2.5rem; background-image: none; }
.champ input:focus, .champ select:focus, .champ textarea:focus {
  outline: none;
  border-color: var(--encre);
  box-shadow: 0 0 0 3px rgba(14, 15, 18, 0.12);
}
.champ input::placeholder, .champ textarea::placeholder { color: var(--encre-3); }

/* Flèche du menu déroulant, dessinée en CSS pour ne pas dépendre d'une image. */
.champ--select { position: relative; }
.champ--select::after {
  content: "";
  position: absolute;
  right: 1.1rem;
  bottom: 1.15rem;
  width: 0.5rem;
  height: 0.5rem;
  border-right: 2px solid var(--encre-2);
  border-bottom: 2px solid var(--encre-2);
  transform: rotate(45deg);
  pointer-events: none;
}

/* Choix d'agence : des cartes cliquables plutôt que des ronds minuscules. */
.choix { display: grid; gap: var(--e3); }
@media (min-width: 34rem) { .choix { grid-template-columns: 1fr 1fr; } }

.choix label {
  position: relative;
  display: grid;
  gap: 0.15rem;
  padding: 0.9rem 1rem 0.9rem 2.9rem;
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-md);
  cursor: pointer;
  transition: border-color var(--duree) var(--sortie), background-color var(--duree) var(--sortie);
}
.choix label:hover { border-color: var(--encre-3); }
.choix input { position: absolute; opacity: 0; width: 0; height: 0; }
.choix label::before {
  content: "";
  position: absolute;
  left: 1rem;
  top: 1.05rem;
  width: 1.15rem;
  height: 1.15rem;
  border: 2px solid var(--ligne-forte);
  border-radius: 50%;
  transition: border-color var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie);
}
.choix input:checked + span::before,
.choix label:has(input:checked)::before {
  border-color: var(--encre);
  box-shadow: inset 0 0 0 4px var(--blanc), inset 0 0 0 10px var(--encre);
}
.choix label:has(input:checked) { border-color: var(--encre); background: var(--creme); }
.choix label:has(input:focus-visible) { outline: 2px solid var(--encre); outline-offset: 2px; }
.choix strong { font-size: 0.9375rem; font-weight: 700; }
.choix span { font-size: 0.8125rem; color: var(--encre-3); }

/* Cases à cocher : mêmes règles, carré plutôt que rond. */
.case { position: relative; display: block; padding-left: 2.1rem; cursor: pointer; }
.case input { position: absolute; opacity: 0; width: 0; height: 0; }
.case::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.1rem;
  width: 1.25rem;
  height: 1.25rem;
  border: 2px solid var(--ligne-forte);
  border-radius: var(--r-xs);
  transition: background-color var(--duree) var(--sortie), border-color var(--duree) var(--sortie);
}
.case:has(input:checked)::before {
  background: var(--encre);
  border-color: var(--encre);
}
.case::after {
  content: "";
  position: absolute;
  left: 0.4rem;
  top: 0.35rem;
  width: 0.4rem;
  height: 0.7rem;
  border-right: 2px solid var(--blanc);
  border-bottom: 2px solid var(--blanc);
  transform: rotate(45deg) scale(0);
  transition: transform var(--duree) var(--sortie);
}
.case:has(input:checked)::after { transform: rotate(45deg) scale(1); }
.case:has(input:focus-visible)::before { outline: 2px solid var(--encre); outline-offset: 2px; }
.case span { font-size: 0.9375rem; line-height: 1.5; color: var(--encre-2); }

/* Erreurs : sous le champ, en toutes lettres, jamais par la couleur seule. */
.erreur {
  display: none;
  align-items: flex-start;
  gap: 0.4rem;
  font-size: 0.875rem;
  font-weight: 700;
  color: var(--alerte);
}
.erreur svg { width: 1rem; height: 1rem; flex: none; margin-top: 0.15rem; }
.est-invalide .erreur { display: flex; }
.est-invalide input, .est-invalide select, .est-invalide textarea { border-color: var(--alerte); }
.est-invalide > .intitule, .est-invalide > label { color: var(--alerte); }

/* Après l'envoi : le formulaire et sa colonne laissent place à ce bloc. */
.merci {
  display: grid;
  justify-items: center;
  gap: var(--e3);
  max-width: 40rem;
  margin: 0 auto;
  padding: clamp(2rem, 5vw, 3.5rem) clamp(1.25rem, 4vw, 2.5rem);
  text-align: center;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
.merci__ico {
  display: grid;
  place-items: center;
  width: 4rem;
  height: 4rem;
  border-radius: var(--r-pill);
  background: var(--ambre);
  color: var(--encre);
}
.merci__ico svg { width: 2rem; height: 2rem; }
.merci__titre { font-size: clamp(1.5rem, 3.4vw, 2rem); font-weight: 900; letter-spacing: -0.03em; line-height: 1.15; outline: none; }
.merci__texte { font-size: 1.0625rem; line-height: 1.55; color: var(--encre-2); max-width: 32rem; }
.merci__note { font-size: 0.875rem; line-height: 1.5; color: var(--encre-3); max-width: 32rem; }
.merci__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 0.75rem; margin-top: var(--e3); }
.merci__actions .btn svg { width: 1.1rem; height: 1.1rem; }
@media (max-width: 36rem) {
  .merci__actions { flex-direction: column; width: 100%; }
  .merci__actions .btn { width: 100%; justify-content: center; }
}

.legal__table { width: 100%; border-collapse: collapse; font-size: 0.9rem; margin: var(--e3) 0; }
.legal__table th, .legal__table td { text-align: left; vertical-align: top; padding: 0.55rem 0.6rem; border-bottom: 1px solid var(--ligne); }
.legal__table th { font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--encre-3); }
.legal__table code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 0.85em; }
@media (max-width: 40rem) {
  .legal__table thead { display: none; }
  .legal__table tr { display: grid; gap: 0.15rem; padding: 0.6rem 0; border-bottom: 1px solid var(--ligne); }
  .legal__table td { display: block; padding: 0; border: 0; }
  .legal__table td:first-child { font-weight: 700; }
}
.lien-bouton { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-decoration: underline; text-underline-offset: 0.2em; cursor: pointer; }

.legal__formulaire { margin: var(--e3) 0; padding: var(--e4); border: 1px dashed var(--ligne-forte); border-radius: var(--r-md); background: var(--creme); }
.legal__formulaire p { margin: 0.4rem 0; }
@media print { .nav, .pied, .dock, .consent, .legal__voisines, [data-imprimer] { display: none !important; } }

/* ---------- Consentement aux traceurs ---------- */
/* Bandeau en bas, non bloquant (la page reste lisible et navigable), mais
   rien ne se charge tant qu'il n'a pas eu de réponse. Refuser et accepter :
   même composant, même taille, refuser en premier. */
.consent {
  position: fixed;
  inset: auto 0 0 0;
  z-index: 60;
  padding: var(--gouttiere);
  padding-bottom: calc(var(--gouttiere) + env(safe-area-inset-bottom));
}
.consent__in {
  max-width: 44rem;
  margin: 0 auto;
  padding: clamp(1.1rem, 3vw, 1.6rem) clamp(1.1rem, 3vw, 1.8rem);
  background: var(--blanc);
  color: var(--encre);
  border: 1px solid var(--ligne-forte);
  border-radius: var(--r-lg);
  box-shadow: 0 18px 48px -18px rgba(14, 15, 18, 0.45);
}
.consent__t { font-weight: 800; font-size: 1.0625rem; margin-bottom: 0.35rem; }
.consent__p { font-size: 0.9rem; line-height: 1.5; color: var(--encre-2); }
.consent__p a { color: inherit; text-decoration: underline; text-underline-offset: 0.2em; }
/* `hidden` doit l'emporter sur les display: des composants. */
.consent [hidden] { display: none !important; }
.consent__detail { display: grid; gap: 0.6rem; margin-top: 0.9rem; padding-top: 0.9rem; border-top: 1px solid var(--ligne); }
.consent__ligne { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.6rem; align-items: start; font-size: 0.875rem; line-height: 1.45; color: var(--encre-2); }
.consent__ligne input { margin-top: 0.2rem; width: 1.1rem; height: 1.1rem; accent-color: var(--encre); }
.consent__actions { display: flex; flex-wrap: wrap; gap: 0.6rem; margin-top: 1rem; }
.consent__actions .btn { flex: 1 1 10rem; justify-content: center; }
.pied__cookies {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

/* Bandeau de résultat d'envoi. */
.statut {
  display: none;
  align-items: flex-start;
  gap: 0.65rem;
  padding: 0.9rem 1.1rem;
  border-radius: var(--r-md);
  font-size: 0.9375rem;
  line-height: 1.5;
}
.statut.est-visible { display: flex; }
.statut svg { width: 1.25rem; height: 1.25rem; flex: none; margin-top: 0.15rem; }
.statut--succes {
  background: rgba(28, 107, 63, 0.08);
  border: 1px solid rgba(28, 107, 63, 0.28);
  color: var(--valide);
}
.statut--erreur {
  background: rgba(192, 38, 31, 0.08);
  border: 1px solid rgba(192, 38, 31, 0.28);
  color: var(--alerte);
}

/* ==========================================================================
   PAGES LÉGALES
   Colonne unique, mesure courte, sections numérotées. Ces pages se lisent
   rarement en entier : on cherche un point précis. La numérotation sert à
   se repérer et à citer une section dans un échange.
   ========================================================================== */

.legal { max-width: 46rem; }
.legal__maj {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.4rem 0.85rem;
  border-radius: var(--r-pill);
  background: var(--creme);
  border: 1px solid var(--ligne);
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--encre-2);
}
.legal__maj svg { width: 0.9rem; height: 0.9rem; }

.legal section { margin-top: clamp(2.5rem, 5vw, 3.5rem); }
.legal h2 {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.7rem;
  align-items: baseline;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  margin-bottom: var(--e4);
}
.legal h2 b {
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--ambre-texte);
  letter-spacing: 0;
}
.legal h3 {
  font-size: 1.0625rem;
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-top: var(--e5);
  margin-bottom: var(--e2);
}
.legal p, .legal li { font-size: 0.9375rem; line-height: 1.65; color: var(--encre-2); }
.legal p + p { margin-top: var(--e3); }
.legal a { color: var(--ambre-texte); text-decoration: underline; text-underline-offset: 0.2em; }

.legal ul { display: grid; gap: 0.5rem; margin-top: var(--e3); }
.legal ul li { padding-left: 1.1rem; position: relative; }
.legal ul li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.6em;
  width: 0.35rem;
  height: 0.35rem;
  border-radius: 50%;
  background: var(--ambre);
}

/* Définitions : « Nom : valeur », alignées et sans tableau, pour rester
   lisibles sur un téléphone. */
.legal dl { display: grid; gap: 0.55rem; margin-top: var(--e3); }
.legal dl > div {
  display: grid;
  gap: 0.1rem;
  padding-bottom: 0.55rem;
  border-bottom: 1px solid var(--ligne);
}
@media (min-width: 40rem) {
  .legal dl > div { grid-template-columns: 15rem minmax(0, 1fr); gap: var(--e4); }
}
.legal dt { font-size: 0.9375rem; font-weight: 700; color: var(--encre); }
.legal dd { margin: 0; font-size: 0.9375rem; color: var(--encre-2); }

/* Champ non fourni : doit se voir immédiatement, pas se fondre dans le texte. */
/* Plus aucune page ne l'utilise depuis que les mentions legales ont ete
   renseignees (28/08/2026). Conservee volontairement : le mediateur, le
   prestataire de paiement et le service de formulaire restent a venir. */
.a-completer {
  display: inline-block;
  padding: 0.1rem 0.45rem;
  border-radius: var(--r-xs);
  background: var(--ambre-doux);
  border: 1px solid var(--ambre-bord);
  color: var(--ambre-texte);
  font-size: 0.8125rem;
  font-weight: 700;
}

/* Renvois entre les trois pages, en pied de page légale. */
.legal__voisines {
  display: grid;
  gap: var(--e3);
  margin-top: clamp(3rem, 6vw, 4rem);
  padding-top: var(--e5);
  border-top: 1px solid var(--ligne);
}
@media (min-width: 40rem) { .legal__voisines { grid-template-columns: repeat(3, 1fr); } }
.legal__voisines a {
  display: grid;
  gap: 0.15rem;
  padding: var(--e4);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  text-decoration: none;
  color: inherit;
  transition: border-color var(--duree) var(--sortie), background-color var(--duree) var(--sortie);
}
.legal__voisines a:hover { border-color: var(--encre); background: var(--creme); }
.legal__voisines strong { font-size: 0.9375rem; font-weight: 700; }
.legal__voisines span { font-size: 0.8125rem; color: var(--encre-3); }

/* Les trois pages légales groupées en pied de page. */
.pied__legal { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; }

/* ==========================================================================
   Simulateur d'estimation
   Propre à la variante « simulateur ». Il remplace les boutons de paiement en
   ligne : au lieu de faire payer avant d'avoir parlé à quelqu'un, il chiffre et
   renvoie vers la pré-inscription.
   ========================================================================== */

.simu {
  position: relative;
  overflow: hidden;
  /* 60rem : la largeur du cadre de référence fourni par le client. */
  max-width: 60rem;
  margin-inline: auto;
  display: grid;
  background: var(--blanc);
  border: 1px solid var(--ligne);
  border-radius: var(--r-lg);
  box-shadow: var(--ombre-carte);
}
/* Deux volets à partir de 60rem : le rail sombre à gauche, la scène à droite.
   En dessous, le rail se replie en un bandeau au-dessus de la scène. */
@media (min-width: 60rem) {
  .simu { grid-template-columns: 17rem minmax(0, 1fr); }
}

/* ---------- Rail : étapes, réponses, montant en temps réel ---------- */

.simu-rail {
  display: grid;
  align-content: start;
  gap: var(--e5);
  padding: clamp(1.25rem, 3vw, 1.75rem);
  background: var(--nuit);
  color: var(--sur-nuit);
}
.simu-rail__t {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sur-nuit-3);
}
.simu-rail__etapes {
  display: grid;
  gap: 0.2rem;
  list-style: none;
  padding: 0;
  margin: 0;
}
.simu-rail__etape {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: baseline;
  gap: 0.7rem;
  padding: 0.45rem 0.6rem;
  border-radius: var(--r-sm);
  color: var(--sur-nuit-3);
  font-size: 0.9375rem;
}
.simu-rail__num {
  font-size: 0.75rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.04em;
}
.simu-rail__lib { display: grid; gap: 0.05rem; }
.simu-rail__lib b { font-weight: 700; color: var(--sur-nuit); }
/* L'étape en cours est la seule surface claire du rail ; les étapes faites
   gardent leur réponse en blanc, celles à venir restent en retrait. */
.simu-rail__etape.est-actif { background: rgba(255, 255, 255, 0.08); color: var(--sur-nuit); }
.simu-rail__etape.est-actif .simu-rail__num { color: var(--ambre); }
.simu-rail__etape.est-fait { color: var(--sur-nuit-2); }
.simu-rail__etape.est-fait .simu-rail__num { color: var(--ambre); }

.simu-rail__total {
  display: grid;
  gap: 0.15rem;
  padding-top: var(--e4);
  border-top: 1px solid rgba(255, 255, 255, 0.12);
}
.simu-rail__total span {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--sur-nuit-3);
}
.simu-rail__total strong {
  font-size: clamp(1.9rem, 3vw, 2.4rem);
  font-weight: 900;
  letter-spacing: -0.04em;
  line-height: 1.05;
  color: var(--ambre);
  font-variant-numeric: tabular-nums;
}
.simu-rail__total small { font-size: 0.8125rem; color: var(--sur-nuit-3); }

/* Replié : titre et montant sur une ligne, la liste des étapes disparaît
   (la scène porte déjà « 02 / 07 · Boîte »). Sur l'écran de résultat, le
   montant serait affiché deux fois : le rail s'efface. */
@media (max-width: 59.99rem) {
  .simu-rail { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 0.5rem 1rem; padding: 0.9rem 1.25rem; }
  .simu-rail__etapes { display: none; }
  .simu-rail__total { padding-top: 0; border-top: 0; justify-items: end; text-align: right; }
  .simu-rail__total span { display: none; }
  .simu-rail__total strong { font-size: 1.5rem; }
  .simu-rail__total small { display: none; }
  .simu-rail--fini { display: none; }
}

/* ---------- Scène : la question en cours ---------- */

.simu-scene { padding: clamp(1.35rem, 4vw, 2.25rem); }
.simu-scene__num {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.simu-scene__num b { color: var(--ambre-texte); }

.simu__titre {
  margin-top: 0.5rem;
  font-size: clamp(1.35rem, 3vw, 1.75rem);
  font-weight: 900;
  letter-spacing: -0.03em;
  line-height: 1.15;
}
.simu__titre:focus-visible { outline: none; }
.simu__sous { margin-top: 0.4rem; color: var(--encre-2); }

/* Options : une rangée par choix. Icône, libellé et précision à gauche, un
   repère de sélection à droite. La rangée choisie passe en encre, comme la
   carte de forfait mise en avant sur l'accueil. */
.simu-opts { display: grid; gap: 0.5rem; margin-top: clamp(1.25rem, 3vw, 1.75rem); }
.simu-opt {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  padding: 0.85rem 1rem;
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  background: var(--blanc);
  color: var(--encre);
  font: inherit;
  text-align: left;
  cursor: pointer;
  transition: border-color var(--duree) var(--sortie), background-color var(--duree) var(--sortie), color var(--duree) var(--sortie);
}
.simu-opt:hover { border-color: var(--encre); }
.simu-opt:focus-visible { outline: 2px solid var(--ambre); outline-offset: 2px; }
.simu-opt__ico { display: grid; place-items: center; width: 2.4rem; height: 2.4rem; border-radius: var(--r-sm); background: var(--ambre-doux); color: var(--ambre-texte); }
.simu-opt__ico svg { width: 1.3rem; height: 1.3rem; }
.simu-opt__txt { display: grid; gap: 0.1rem; }
.simu-opt__t { font-size: 1rem; font-weight: 800; letter-spacing: -0.015em; }
.simu-opt__d { font-size: 0.8125rem; color: var(--encre-3); }
/* Sans icône (étapes niveau et objectif), deux colonnes seulement : sinon le
   texte prenait la colonne `auto` de l'icône et le repère venait se coller
   au libellé au lieu de rester à droite. */
.simu-opt:not(:has(.simu-opt__ico)) { grid-template-columns: minmax(0, 1fr) auto; }
.simu-opt__point {
  justify-self: end;
  width: 1.15rem;
  height: 1.15rem;
  border-radius: 50%;
  border: 2px solid var(--ligne-forte);
  transition: border-color var(--duree) var(--sortie), background-color var(--duree) var(--sortie), box-shadow var(--duree) var(--sortie);
}
.simu-opt.est-choisi { background: var(--encre); border-color: var(--encre); color: var(--sur-nuit); }
.simu-opt.est-choisi .simu-opt__ico { background: rgba(255, 184, 0, 0.16); color: var(--ambre); }
.simu-opt.est-choisi .simu-opt__d { color: var(--sur-nuit-2); }
.simu-opt.est-choisi .simu-opt__point { border-color: var(--ambre); background: var(--ambre); box-shadow: inset 0 0 0 3px var(--encre); }

/* Navigation d'étape : un lien de retour discret, le bouton d'action à droite.
   Pas de bandeau : la scène reste d'un seul tenant. */
.simu-scene__nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  margin-top: clamp(1.5rem, 4vw, 2.25rem);
  padding-top: var(--e4);
  border-top: 1px solid var(--ligne);
}
/* Bouton bloqué (réponse ou coordonnées manquantes) : visiblement inactif,
   le clic ne fait rien, sans que le bouton disparaisse. */
.simu-scene__nav .btn:disabled { opacity: 0.45; cursor: not-allowed; box-shadow: none; transform: none; }
.simu-scene__nav .btn { margin-left: auto; }
/* Sur téléphone, « Voir mon estimation » ne tient pas à côté de « Retour » :
   en flex, il passait seul à la ligne, collé à droite, sous un vide. Le bouton
   prend toute la largeur, comme les autres appels à l'action du site, et le
   retour se place dessous, centré. */
@media (max-width: 36rem) {
  .simu-scene__nav { flex-direction: column-reverse; align-items: stretch; }
  .simu-scene__nav .btn { margin-left: 0; width: 100%; }
  .simu-scene__nav .simu__retour { justify-content: center; }
  .simu-scene__nav--fin { flex-direction: row; align-items: center; }
}
.simu-scene__nav--fin { justify-content: center; gap: 1.25rem; margin-top: var(--e4); padding-top: var(--e3); font-size: 0.9375rem; }
.simu-scene__nav--fin .btn { margin-left: 0; }
.simu__retour, .simu__recommencer {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.5rem 0.2rem;
  border: 0;
  background: none;
  color: var(--encre-2);
  font: inherit;
  font-weight: 700;
  cursor: pointer;
}
.simu__retour svg { width: 1.05rem; height: 1.05rem; }
.simu__retour:hover, .simu__recommencer:hover { color: var(--encre); }
.simu__recommencer { text-decoration: underline; text-underline-offset: 3px; }

/* ---------- résultat ---------- */


/* Le détail est affiché systématiquement : un total sans son calcul se
   discute, un total détaillé se vérifie. */
.simu-detail { display: grid; margin-top: var(--e5); border-top: 1px solid var(--ligne); }
.simu-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.2rem 1rem;
  padding: 0.45rem 0;
  border-bottom: 1px solid var(--ligne);
}
.simu-ligne__l { display: grid; gap: 0.15rem; font-weight: 700; }
.simu-ligne__l small { font-size: 0.75rem; font-weight: 500; color: var(--encre-3); }
.simu-ligne__v { font-size: 1.0625rem; font-weight: 800; white-space: nowrap; }
.simu-ligne--remise .simu-ligne__v { color: var(--ambre-texte); }

.simu__actions { display: grid; gap: 0.6rem; margin-top: var(--e6); }
@media (min-width: 34rem) {
  .simu__actions { grid-template-columns: 1fr 1fr; }
}

.simu__noscript { padding: clamp(1.35rem, 4vw, 2.5rem); display: grid; gap: var(--e4); }

.simu__mention {
  margin-top: var(--e5);
  font-size: 0.8125rem;
  color: var(--encre-3);
  text-align: center;
  max-width: 44rem;
  margin-inline: auto;
}

/* ---------- Curseur d'âge ---------- */

.simu-curseur { margin-top: clamp(1.5rem, 4vw, 2.25rem); }

.simu-curseur__val {
  display: grid;
  justify-items: center;
  gap: 0.1rem;
  text-align: center;
}
.simu-curseur__val strong {
  font-size: clamp(3rem, 11vw, 5rem);
  font-weight: 900;
  line-height: 1;
  letter-spacing: -0.05em;
  /* En encre, comme tous les grands chiffres du site : l'ambre assombri
     réservé au texte courant vire au brun à cette taille. */
  color: var(--encre);
  font-variant-numeric: tabular-nums;
}
.simu-curseur__val span { color: var(--encre-2); }

.simu-curseur__ligne {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(0.6rem, 2.5vw, 1.1rem);
  margin-top: clamp(1rem, 3vw, 1.5rem);
}

/* Les boutons moins et plus doublent le curseur : le glissement au doigt est
   imprécis sur une plage de soixante valeurs, et impossible au clavier sans
   passer par les flèches. */
.simu-curseur__pas {
  width: 2.9rem; height: 2.9rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r-md);
  background: var(--blanc);
  color: var(--encre);
  font-size: 1.35rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}
.simu-curseur__pas:hover { border-color: var(--ligne-forte); }

.simu-curseur__ligne input[type="range"] {
  width: 100%;
  height: 6px;
  appearance: none;
  -webkit-appearance: none;
  background: var(--creme-2);
  border-radius: var(--r-pill);
  cursor: pointer;
}
.simu-curseur__ligne input[type="range"]::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--ambre);
  box-shadow: 0 2px 8px -2px rgba(14, 15, 18, 0.35);
  cursor: grab;
}
.simu-curseur__ligne input[type="range"]::-moz-range-thumb {
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  background: var(--blanc);
  border: 2px solid var(--ambre);
  box-shadow: 0 2px 8px -2px rgba(14, 15, 18, 0.35);
  cursor: grab;
}

.simu-curseur__reperes {
  display: flex;
  justify-content: space-between;
  margin: 0.5rem 3.5rem 0;
  font-size: 0.8125rem;
  color: var(--encre-3);
  font-variant-numeric: tabular-nums;
}
.simu-curseur__note {
  margin-top: clamp(1rem, 2.5vw, 1.4rem);
  text-align: center;
  font-size: 0.875rem;
  color: var(--encre-2);
}

/* ---------- Étape des coordonnées ---------- */

/* Les champs eux-mêmes viennent de `.champ` et `.case`, définis plus haut pour
   le formulaire de pré-inscription : rien à redéfinir ici, seulement la
   disposition propre au simulateur. */
.simu-contact { display: grid; gap: 0.8rem; margin-top: clamp(1.25rem, 3vw, 1.9rem); }
.simu-contact__duo { display: grid; gap: 0.8rem; }
@media (min-width: 30rem) {
  .simu-contact__duo { grid-template-columns: 1fr 1fr; }
}
.simu-contact .case a { color: var(--ambre-texte); text-decoration: underline; text-underline-offset: 0.2em; }
.simu-contact__note { font-size: 0.8125rem; color: var(--encre-3); }
.simu-contact .erreur { margin-top: 0.35rem; }


/* ---------- Résultat ---------- */

.simu-fanion { display: flex; justify-content: center; }
.simu__titre--centre { text-align: center; }

/* Le prix reprend le vocabulaire de la carte forfait mise en avant : fond nuit,
   chiffre en blanc, ambre réservé à l'accent. Une grande surface ambre en
   dégradé serait étrangère à ce système, qui n'emploie l'ambre que par touches
   et ne comporte aucun dégradé décoratif — les seuls existants sont des voiles
   sombres posés sur photo pour la lisibilité. */
.simu-prix {
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
  padding: clamp(1.5rem, 5vw, 2.5rem) clamp(1.25rem, 4vw, 2rem);
  border-radius: var(--r-lg);
  background: var(--nuit);
  color: var(--sur-nuit);
  box-shadow: var(--ombre-haute);
  text-align: center;
}
.simu-prix__v {
  display: flex;
  align-items: baseline;
  justify-content: center;
  gap: 0.3rem;
  flex-wrap: wrap;
}
.simu-prix__v strong {
  /* Deux bornes tiennent moins bien qu'un chiffre seul : la borne basse du
     clamp descend pour qu'une fourchette à quatre chiffres ne déborde pas. */
  font-size: clamp(2rem, 8.5vw, 3.75rem);
  font-weight: 900;
  letter-spacing: -0.05em;
  line-height: 0.95;
  font-variant-numeric: tabular-nums;
}
.simu-prix__v span { font-size: clamp(1.1rem, 3.5vw, 1.6rem); font-weight: 800; color: var(--ambre); }
.simu-prix__fourchette { margin-top: 0.6rem; font-size: 0.9375rem; color: var(--sur-nuit-2); }
.simu-prix__quatre { margin-top: 0.2rem; font-size: 0.9375rem; color: var(--sur-nuit-3); }

.simu-volume {
  margin-top: var(--e4);
  padding: clamp(0.9rem, 3vw, 1.5rem);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
  background: var(--creme);
}
.simu-volume__t {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.simu-volume__h {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.3rem 1rem;
  margin-top: 0.35rem;
  font-size: 1.125rem;
}
.simu-volume__h strong { font-size: clamp(1.85rem, 5vw, 2.4rem); font-weight: 900; letter-spacing: -0.04em; }
.simu-volume__duree { display: grid; justify-items: end; font-size: 0.9375rem; color: var(--encre-2); }
.simu-volume__duree small { font-size: 0.75rem; color: var(--encre-3); }
.simu-volume .simu-detail { margin-top: var(--e4); border-top-color: var(--ligne-forte); }
.simu-volume .simu-ligne { border-bottom-color: var(--ligne-forte); }
.simu-volume .simu-ligne:last-child { border-bottom: 0; padding-bottom: 0; }

.simu-inclus {
  display: grid;
  gap: 0.3rem 1.25rem;
  margin-top: var(--e4);
  font-size: 0.875rem;
  line-height: 1.35;
}
@media (min-width: 34rem) {
  .simu-inclus { grid-template-columns: 1fr 1fr; }
}
.simu-inclus li { display: grid; grid-template-columns: 1.1rem minmax(0, 1fr); gap: 0.55rem; align-items: start; }
.simu-inclus svg { width: 1.1rem; height: 1.1rem; color: var(--ambre-texte); margin-top: 0.2rem; }

/* ---------- Réglages rejouables ---------- */

.simu-ajuster {
  margin-top: var(--e5);
  padding: clamp(0.75rem, 2.5vw, 1.35rem);
  border: 1px solid var(--ligne);
  border-radius: var(--r-md);
}
.simu-ajuster__t {
  font-size: 0.75rem;
  font-weight: 800;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-3);
}
.simu-regle {
  display: grid;
  grid-template-columns: 4.5rem minmax(0, 1fr);
  align-items: center;
  gap: 0.5rem 0.75rem;
  padding: 0.55rem 0;
  border-bottom: 1px solid var(--ligne);
}
.simu-regle:last-child { border-bottom: 0; padding-bottom: 0; }
.simu-regle__l { font-weight: 700; font-size: 0.875rem; }
.simu-regle__choix { display: flex; flex-wrap: wrap; gap: 0.3rem; }

.simu-puce {
  padding: 0.3rem 0.6rem;
  border: 1.5px solid var(--ligne);
  border-radius: var(--r-pill);
  background: var(--blanc);
  font: inherit;
  font-size: 0.8125rem;
  font-weight: 700;
  color: var(--encre-2);
  cursor: pointer;
}
.simu-puce:hover { border-color: var(--ligne-forte); }
.simu-puce.est-choisi { background: var(--ambre); border-color: var(--ambre); color: var(--encre); }

.simu-regle__pas { display: inline-flex; align-items: center; gap: 0.5rem; }
.simu-regle__pas button {
  width: 1.9rem; height: 1.9rem;
  display: grid; place-items: center;
  border: 1.5px solid var(--ligne);
  border-radius: 50%;
  background: var(--blanc);
  /* Sans couleur explicite, le navigateur applique son noir pur (#000) au lieu
     de l'encre du système (#0e0f12) : l'écart se voit à côté des autres textes. */
  color: var(--encre);
  font: inherit;
  font-size: 1.05rem; font-weight: 700; line-height: 1;
  cursor: pointer;
}
.simu-regle__pas button:hover { border-color: var(--ligne-forte); }
.simu-regle__pas b { min-width: 2ch; text-align: center; font-variant-numeric: tabular-nums; }

.simu-preuve {
  margin-top: var(--e5);
  text-align: center;
  font-size: 0.875rem;
  color: var(--encre-2);
}
.simu-preuve__note { font-weight: 800; color: var(--encre); }

.simu__actions--fin { margin-top: var(--e6); }
.simu-test {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.6rem;
  align-items: start;
  margin-bottom: 0.2rem;
  padding: 0.8rem 1rem;
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--ambre-texte);
  background: var(--ambre-doux);
  border: 1px solid var(--ambre-bord);
  border-radius: var(--r-md);
}
.simu-test svg { width: 1.1rem; height: 1.1rem; margin-top: 0.15rem; }
.simu-cgv { grid-column: 1 / -1; font-size: 0.875rem; }
.simu-cgv a { color: var(--ambre-texte); text-decoration: underline; text-underline-offset: 0.2em; }
.simu-cgv.est-invalide span { color: var(--alerte); }
.btn.est-inactif { opacity: 0.45; cursor: not-allowed; }
.simu-paiement__note { margin-top: 0.8rem; font-size: 0.8125rem; line-height: 1.5; color: var(--encre-3); text-align: center; }
.simu-paiement__note a { color: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: 0.2em; }