/* =====================================================
   style.css — Original Permis
   Couleur principale : #2D6A4F (vert forêt)
   Polices : Outfit (UI) + Fraunces (italiques titres)
   =====================================================
   TABLE DES MATIÈRES
   1.  Tokens & Variables
   2.  Reset & Base
   3.  Boutons
   4.  Navigation
   5.  Section Hero
   6.  Modal (formulaire + permis)
   7.  Section Simulateur / Cockpit
   8.  Section Permis (licenses)
   9.  Section Avis (carousel)
   10. Section Contact
   11. Footer
   12. Animations & Révélation au scroll
   13. Responsive
   14. prefers-reduced-motion         ← [B9] AJOUTÉ
   ===================================================== */


/* ─────────────────────────────────────────────────────
   1. TOKENS & VARIABLES
───────────────────────────────────────────────────── */
/*
 * NOTE : Les variables de tokens sont désormais définies dans theme.css
 * (chargé avant ce fichier). Ce bloc ne redéfinit QUE les propriétés
 * non-thémables (typographie, espacement, effets fixes).
 * Les couleurs et surfaces sont gérées par le système dark/light.
 */
 :root {
  /* ── Palette marque (invariante) ── */
  --green:          #2D6A4F;
  --green-dark:     #1B4332;
  --green-darker:   #0F2E1F;
  --green-light:    #52B788;
  --green-lighter:  #95D5B2;
  --green-pale:     #D8F3DC;
  --green-ghost:    rgba(45, 106, 79, 0.12);
  --green-glow:     rgba(45, 106, 79, 0.30);

  /* ── Surfaces sombres (thème dark — variables manquantes de theme.css) ── */
  --surface-dark:    #0D1A14;
  --surface-dark2:   #111F18;
  --surface-dark3:   #162A1F;
  --surface-darkest: #080F0B;

  /* ── Surfaces claires ── */
  --surface-light:  #F4F1EA;
  --surface-light2: #EBE8E0;
  --surface-white:  #FFFFFF;

  /* ── Texte sur fonds sombres ── */
  --text-primary:   #1C2016;
  --text-secondary: #4A5240;
  --text-muted:     #6b7a6a;
  --text-white:     #FFFFFF;
  --text-white-dim: rgba(255, 255, 255, 0.65);
  --subtitle-color: #BFEBF7;

  /* ── Dégradé diagonal (sections sombres) ── */
  --grad-diag: linear-gradient(135deg, rgba(45,106,79,.06) 0%, transparent 55%);

  /* ── Typographie ── */
  --font-ui:     'Outfit', system-ui, sans-serif;
  --font-accent: 'Fraunces', Georgia, serif;
  --font-display:'Bebas Neue', sans-serif;

  /* ── Espacements ── */
  --section-padding: clamp(3rem, 8vw, 6rem) clamp(1.2rem, 5vw, 5rem);
  --container-max:   1160px;
  --gap-sm: .5rem;
  --gap-md: 1rem;
  --gap-lg: 2rem;

  /* ── Effets ── */
  --radius-sm:  8px;
  --radius-md:  14px;
  --radius-lg:  22px;
  --radius-xl:  32px;
  --shadow-sm:  0 2px 12px rgba(0,0,0,.08);
  --shadow-md:  0 8px 32px rgba(0,0,0,.12);
  --shadow-lg:  0 20px 60px rgba(0,0,0,.18);
  --shadow-xl:  0 40px 100px rgba(0,0,0,.26);

  /* ── Transitions ── */
  --ease:        cubic-bezier(.4, 0, .2, 1);
  --ease-spring: cubic-bezier(.34, 1.56, .64, 1);
  --duration-fast:   150ms;
  --duration-normal: 280ms;
  --duration-slow:   500ms;
}


/* ─────────────────────────────────────────────────────
   2. RESET & BASE
───────────────────────────────────────────────────── */
*, *::before, *::after {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: 80px; /* hauteur nav */
}


/* ── Calligraphie commune : var(--font-display) appliquée à tout le site ── */
* {
  font-family: var(--font-display);
}

body {
  font-family: var(--font-display);
  background: var(--surface-dark);
  color: var(--text-primary);
  line-height: 1.6;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
    border: 1.5px solid rgba(255, 255, 255, .12);
    border-radius: 10px;
    padding: 4px;
    color: white;
    background: rgba(255, 255, 255, .07);
    font-family: var(--font-ui);
    cursor: pointer;

}

img, canvas {
  display: block;
  max-width: 100%;
}

:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Scrollbar personnalisée */
::-webkit-scrollbar         { width: 5px; }
::-webkit-scrollbar-track   { background: var(--surface-dark); }
::-webkit-scrollbar-thumb   { background: var(--green); border-radius: 3px; }

/* États disabled cohérents (évite les styles inline JS) */
button:disabled,
.btn-primary:disabled,
.btn-cta:disabled {
  opacity: .55;
  cursor: not-allowed;
  transform: none !important;
  box-shadow: none !important;
}


/* ─────────────────────────────────────────────────────
   3. BOUTONS
───────────────────────────────────────────────────── */
.btn-primary {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: #0f3b2c;
  color: var(--text-white);
  border: none;
  border-radius: 999px;
  padding: .75em 1.75em;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 700;
  letter-spacing: .02em;
  cursor: pointer;
  transition:
    background var(--duration-normal) var(--ease),
    transform   var(--duration-normal) var(--ease-spring),
    box-shadow  var(--duration-normal) var(--ease);
  white-space: nowrap;
}
.btn-primary:hover {
  background: var(--green-dark);
  transform: translateY(-2px);
  box-shadow: 0 8px 24px var(--green-glow);
}
.btn-primary:active {
  transform: translateY(0);
}
.btn-primary svg {
  transition: transform var(--duration-normal) var(--ease-spring);
}
.btn-primary:hover svg {
  transform: translateX(4px);
}

.btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  background: transparent;
  color: rgba(255,255,255,.85);
  border: 1.5px solid rgba(255,255,255,.3);
  border-radius: 999px;
  padding: .73em 1.7em;
  font-family: var(--font-ui);
  font-size: .95rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background   var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    transform    var(--duration-normal) var(--ease-spring);
  white-space: nowrap;
}
.btn-ghost:hover {
  background: rgba(255,255,255,.1);
  border-color: var(--green-light);
  transform: translateY(-2px);
}

.btn-large {
  font-size: 1rem;
  padding: .85em 2em;
}

.btn-full {
  width: 100%;
  justify-content: center;
}

.btn-step-next {
  align-self: center;
  margin-top: .5rem;
}

/* CTA Nav */
.btn-cta {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: #0F3B2C;
  color: white;
  border: none;
  border-radius: 999px;
  padding: .6em 1.5em;
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background var(--duration-normal) var(--ease),
    transform  var(--duration-normal) var(--ease-spring);
}
.btn-cta:hover {
  background: var(--green-dark);
  transform: scale(1.04);
}


/* ─────────────────────────────────────────────────────
   4. NAVIGATION
───────────────────────────────────────────────────── */
#site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 900;
}

#main-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: nowrap;
  gap: 1.5rem;
  width: 100%;
  box-sizing: border-box;
  padding: 1.2rem 5vw;
  background: transparent;
  border-bottom: 1px solid transparent;
  transition:
    background    var(--duration-slow) var(--ease),
    border-color  var(--duration-slow) var(--ease),
    padding       var(--duration-normal) var(--ease),
    box-shadow    var(--duration-slow) var(--ease);
}

/* Navigation après scroll — fond sombre semi-transparent */
#main-nav.nav-scrolled {
  background: rgba(13, 26, 20, .92);
  border-color: rgba(45, 106, 79, .22);
  padding: .6rem 5vw;
  backdrop-filter: blur(18px) saturate(1.2);
  -webkit-backdrop-filter: blur(18px) saturate(1.2);
  box-shadow: 0 1px 0 rgba(15,59,44,.10), 0 4px 24px rgba(15,59,44,.08);
}

/* Logo / marque */
.nav-brand {
  display: flex;
  align-items: center;
  gap: .6rem;
  text-decoration: none;
  flex-shrink: 0;          /* le logo ne rétrécit jamais */
  white-space: nowrap;
  z-index: 1;
}
.brand-mark {
  flex-shrink: 0;
  width: 42px;
  height: 42px;
  border-radius: 10px;
  padding: 4px;
  box-sizing: border-box;
}
.brand-mark img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 10px;
}
.nav-brand:hover .brand-mark img {
  filter: drop-shadow(0 4px 14px rgba(15,59,44,.45));
  transform: rotate(-5deg) scale(1.08);
}
.brand-name {
  font-size: 1.1rem;
  font-weight: 700;
  color: rgba(255, 255, 255, .92);
  letter-spacing: -.01em;
}


/* Lien nav simulateur */
.nav-link-sim {
  background: none;
  border: none;
  padding: 0;
  font-family: var(--font-ui);
  color: var(--green-light);
  font-size: .84rem;
  font-weight: 700;
  letter-spacing: .04em;
  cursor: pointer;
  transition: color var(--duration-normal) var(--ease);
}
.nav-link-sim:hover { color: #fff; }

/* Liens nav */
.nav-links {
  display: flex;
  list-style: none;
  flex-wrap: nowrap;
  gap: 1.5rem;
  flex-shrink: 1;          /* peut rétrécir si besoin */
  min-width: 0;
}
.nav-link {
  /* Reset natif Safari/Firefox sur les <button> */
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: none;
  padding: 0;
  margin: 0;
  /* Alignement flex — corrige le désalignement icône/texte Safari */
  display: inline-flex;
  align-items: center;
  gap: .4em;
  /* Typographie */
  color: rgba(255, 255, 255, .78);
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  line-height: 1;          /* évite line-height variable selon le moteur */
  /* Positionnement pour le ::after underline */
  position: relative;
  cursor: pointer;
  transition: color var(--duration-normal) var(--ease);
  /* Empêche la sélection de texte sur double-clic */
  user-select: none;
  -webkit-user-select: none;
}
.nav-link::after {
  content: '';
  position: absolute;
  bottom: -3px;
  left: 0;
  width: 0;
  height: 1.5px;
  background: var(--green);
  transition: width var(--duration-normal) var(--ease);
}
.nav-link:hover {
  color: #fff;
}
.nav-link:hover::after {
  width: 100%;
}

/* ── Icône SVG dans les nav-link et boutons ── */
.nav-eval-icon,
.btn-eval-icon {
  /* Aligne parfaitement sur Safari : évite le décalage baseline emoji */
  display: block;
  flex-shrink: 0;
  /* La couleur suit currentColor — hérite du parent */
  color: inherit;
  /* Stable cross-browser : pas de height auto qui diverge */
  overflow: visible;
}

/* Ensure btn-ghost garde bien son flex alignment */
.btn-ghost {
  line-height: 1;   /* idem nav-link — stabilise Safari */
}

/* Actions nav droite */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 1rem;
  flex-shrink: 0;
}
.nav-phone {
  display: none;
  align-items: center;
  gap: .4rem;
  color: white;
  font-size: .84rem;
  font-weight: 600;
  transition: color var(--duration-normal) var(--ease);
}
/*.nav-phone:hover {
  color: #fff;
}*/

#main-nav.nav-scrolled .nav-phone {
  display: flex;
}

/* Hamburger mobile */
.nav-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  background: none;
  border: none;
  padding: 8px;
  cursor: pointer;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-sm);
  flex-shrink: 0;
  position: relative;
  z-index: 1000;           /* toujours au-dessus du menu tiroir */
  transition: background var(--duration-normal) var(--ease);
}
.nav-hamburger:hover {
  background: rgba(255, 255, 255, .12);
}
.nav-hamburger span {
  display: block;
  width: 22px;
  height: 2px;
  background: rgba(255, 255, 255, .9);
  border-radius: 2px;
  transform-origin: center;
  transition:
    transform var(--duration-normal) var(--ease),
    opacity   var(--duration-fast),
    width     var(--duration-normal) var(--ease);
}
/* État ouvert — animation en croix */
.nav-hamburger[aria-expanded="true"] span:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav-hamburger[aria-expanded="true"] span:nth-child(2) {
  opacity: 0;
  width: 0;
}
.nav-hamburger[aria-expanded="true"] span:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}


/* ─────────────────────────────────────────────────────
   5. SECTION HERO
───────────────────────────────────────────────────── */
#hero {
  position: relative;
  min-height: 100vh;
  display: flex;
  align-items: center;
  background-image: url("D390CEE9-E9BA-4932-8A2E-6AB07B388238.png");
  background-size: cover;
  background-position: 65% center;
  background-attachment: scroll; /* Prevents iOS fixed bg bug */
  overflow: hidden;
}

/* Canvas hero — texture d'ambiance (particules + halos), fond transparent */
#hero-canvas {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 0;
  opacity: 0.55;
  mix-blend-mode: screen;
}

/* Assombrissement léger — lisibilité du texte sans masquer la voiture */
.hero-overlay {
  position: absolute;
  inset: 0;
  background:
    linear-gradient(to right, rgba(5,15,8,.82) 0%, rgba(5,15,8,.55) 45%, transparent 75%),
    linear-gradient(to top,   rgba(5,15,8,.55) 0%, transparent 35%);
  pointer-events: none;
  z-index: 1;
}

.hero-content {
  position: relative;
  z-index: 2;
  padding: clamp(5rem, 12vw, 7rem) clamp(1.2rem, 8vw, 8vw) clamp(3rem, 6vw, 5rem);
  max-width: min(620px, 100%);    /* réduit pour libérer de l'espace à la voiture */
}

/* Badge d'accroche */
.hero-eyebrow {
  margin-bottom: 1.5rem;
}
.eyebrow-badge {
  display: inline-block;
  font-size: .75rem;
  font-weight: 700;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green);
  opacity: 0;
  animation: fadeSlideUp .6s var(--ease) .3s forwards;
}

/* Titre principal */
.hero-title {
  display: flex;
  flex-direction: column;
  font-size: clamp(3rem, 7.5vw, 5.8rem);
  font-weight: 900;
  line-height: .96;
  letter-spacing: -.035em;
  color: white;
  margin-bottom: 1.6rem;
}
.hero-title-line {
  overflow: hidden;
  display: block;
}
#title-line-1 {
  animation: titleSlideUp .7s cubic-bezier(.34, 1.4, .64, 1) .45s both;
  opacity: 0;
}
#title-line-2 {
  animation: titleSlideUp .7s cubic-bezier(.34, 1.4, .64, 1) .6s both;
  opacity: 0;
}
.hero-title-italic {
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 400;       /* Bebas Neue n'a qu'une seule graisse */
  letter-spacing: .04em;  /* Bebas Neue est naturellement condensé */
  color: var(--green);
}

/* Sous-titre */
.hero-subtitle {
  font-size: clamp(.95rem, 2.5vw, 1.1rem);
  font-weight: 400;
  color: var(--subtitle-color);
  line-height: 1.65;
  margin-bottom: 2.5rem;
  opacity: 0;
  animation: fadeSlideUp .6s var(--ease) .85s forwards;
}
.hero-subtitle strong {
  color: var(--green-lighter);
  font-weight: 700;
}

/* Boutons CTA */
.hero-buttons {
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  margin-bottom: 3.5rem;
  opacity: 0;
  animation: fadeSlideUp .6s var(--ease) 1s forwards;
}

/* Métriques */
.hero-stats {
  display: flex;
  align-items: center;
  gap: clamp(1rem, 3vw, 2rem);
  flex-wrap: wrap;
  opacity: 0;
  animation: fadeSlideUp .6s var(--ease) 1.2s forwards;
}
.stat-item {
  display: flex;
  flex-direction: column;
  gap: .2rem;
}
.stat-number {
  font-size: 1.7rem;
  font-weight: 900;
  color: white;
  letter-spacing: -.04em;
  line-height: 1;
}
.stat-label {
  font-size: .72rem;
  font-weight: 600;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: rgba(255,255,255,.6); /* était .38 — trop peu contrasté */
}
.stat-divider {
  width: 1px;
  height: 38px;
  background: rgba(255,255,255,.14);
}

/* Indicateur de scroll */
.hero-scroll-hint {
  position: absolute;
  bottom: 2.5rem;
  left: 50%;
  transform: translateX(-50%);
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  animation: fadeIn .6s var(--ease) 1.6s forwards;
}
.scroll-line {
  display: block;
  width: 1px;
  height: 50px;
  background: linear-gradient(to bottom, var(--green) 0%, transparent 100%);
  animation: scrollPulse 2s ease-in-out infinite;
  transform-origin: top center;
}
@keyframes scrollPulse {
  0%   { transform: scaleY(1) translateY(0); opacity: 1; }
  100% { transform: scaleY(0.3) translateY(60px); opacity: 0; }
}


/* ─────────────────────────────────────────────────────
   6. MODAL (Formulaire + Permis)
───────────────────────────────────────────────────── */
.modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
}
.modal[hidden] {
  display: none;
}

/* Backdrop assombrissant */
.modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 7, 3, .88);
  backdrop-filter: blur(20px);
  animation: fadeIn .3s var(--ease);
}

/* Wrapper relatif autour du panel — permet à la croix d'être absolute sans être clippée par overflow */
.modal-panel-wrapper {
  position: relative;
  z-index: 2;
  width: 100%;
  max-width: 500px;
  animation: modalEnter .4s cubic-bezier(.34, 1.4, .64, 1);
}

/* Panneau de la modal */
.modal-panel {
  background: var(--surface-dark2);
  border: 1px solid rgba(45, 106, 79, .2);
  border-radius: var(--radius-xl);
  padding: clamp(1.5rem, 5vw, 3rem) clamp(1.2rem, 5vw, 2.8rem) clamp(1.5rem, 5vw, 2.8rem);
  padding-top: clamp(3.5rem, 7vw, 5rem);
  width: 100%;
  max-height: 90vh;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
}

/* Bouton fermer — absolute par rapport au wrapper (pas clippé par overflow du panel) */
.modal-close {
  position: absolute;
  top: .75rem;
  right: .75rem;
  z-index: 10;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.12);
  color: rgba(255,255,255,.6);
  display: flex;
  align-items: center;
  justify-content: center;
  transition:
    background var(--duration-normal) var(--ease),
    color      var(--duration-normal) var(--ease);
}
.modal-close:hover {
  background: rgba(255,255,255,.18);
  color: white;
}

/* Barre de progression */
.form-progress-bar {
  height: 3px;
  background: rgba(255,255,255,.08);
  border-radius: 2px;
  margin-bottom: .7rem;
  overflow: hidden;
}
.form-progress-fill {
  height: 100%;
  background: var(--green);
  border-radius: 2px;
  width: 25%;
  transition: width .5s var(--ease);
}

/* Dots de progression */
.form-step-dots {
  display: flex;
  justify-content: center;
  gap: .4rem;
  margin-bottom: 2.2rem;
}
.step-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: rgba(255,255,255,.15);
  transition: background .3s, transform .3s;
}
.step-dot.active {
  background: var(--green);
  transform: scale(1.3);
}

/* Étapes du formulaire */
.form-step {
  display: none;
  flex-direction: column;
  align-items: center;
  text-align: center;
  animation: stepSlide .35s var(--ease);
}
.form-step.active {
  display: flex;
}
@keyframes stepSlide {
  from { opacity: 0; transform: translateX(18px); }
  to   { opacity: 1; transform: translateX(0); }
}

.step-icon {
  font-size: 2.8rem;
  margin-bottom: .5rem;
}
.step-count {
  font-size: .72rem;
  font-weight: 700;
  letter-spacing: .18em;
  text-transform: uppercase;
  color: var(--green);
  margin-bottom: .5rem;
}
.step-title {
  font-size: clamp(1.4rem, 3.5vw, 1.85rem);
  font-weight: 800;
  color: white;
  line-height: 1.2;
  margin-bottom: .45rem;
}
.step-desc {
  font-size: .88rem;
  color: rgba(255,255,255,.45);
  line-height: 1.55;
  max-width: 40ch;
  margin-bottom: 1.5rem;
}

/* Rangée de champs */
.form-row {
  display: flex;
  gap: .9rem;
  width: 100%;
  margin-bottom: 1.8rem;
  flex-wrap: wrap;
}
.form-field {
  display: flex;
  flex-direction: column;
  gap: .4rem;
  flex: 1;
  min-width: 140px;
}
.field-label {
  font-size: .8rem;
  font-weight: 700;
  color: rgba(255,255,255,.55);
  letter-spacing: .04em;
}
.field-label span {
  color: var(--green);
}
.field-input {
  background: rgba(255,255,255,.07);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-sm);
  padding: .8em 1em;
  color: white;
  font-family: var(--font-ui);
  font-size: .95rem;
  outline: none;
  transition:
    border-color var(--duration-normal) var(--ease),
    background   var(--duration-normal) var(--ease);
  appearance: none;
}
.field-input:focus {
  border-color: var(--green);
  background: rgba(45, 106, 79, .1);
}
.field-input::placeholder {
  color: rgba(255,255,255,.3);
}
.field-select {
  cursor: pointer;
}
.field-select option {
  background: var(--surface-dark2);
  color: white;
}
.field-textarea {
  resize: vertical;
  min-height: 100px;
}

/* Grille de choix */
.choice-grid {
  display: flex;
  flex-wrap: wrap;
  gap: .65rem;
  justify-content: center;
  margin-bottom: 1.6rem;
  width: 100%;
}
.choice-grid-2col {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(140px, 100%), 1fr));
  gap: .9rem;
}
.choice-btn {
  background: rgba(255,255,255,.06);
  border: 1.5px solid rgba(255,255,255,.12);
  border-radius: var(--radius-md);
  padding: .7em 1.2em;
  color: rgba(255,255,255,.72);
  font-family: var(--font-ui);
  font-size: .88rem;
  font-weight: 600;
  cursor: pointer;
  transition:
    background   var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    color        var(--duration-normal) var(--ease),
    transform    var(--duration-normal) var(--ease-spring);
}
.choice-btn:hover,
.choice-btn.selected {
  background: rgba(45, 106, 79, .2);
  border-color: var(--green);
  color: white;
  transform: translateY(-2px);
}

/* Grands boutons de choix (2 colonnes) */
.choice-btn-large {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .3rem;
  padding: 1.4em 1em;
  text-align: center;
}
.choice-icon  { font-size: 1.9rem; }
.choice-title { font-size: .95rem; font-weight: 700; color: white; }
.choice-detail {
  font-size: .76rem;
  color: rgba(255,255,255,.38);
  line-height: 1.35;
}

/* Récapitulatif étape 5 */
.recap-message {
  font-size: .92rem;
  color: rgba(255,255,255,.62);
  line-height: 1.72;
  margin: .8rem 0 1.4rem;
  max-width: 44ch;
  text-align: center;
}

/* ─── Bloc "Découvrir la formation" (étape 6, après récap) ─── */
.form-step#step-6 { gap: .8rem; }
.discover-card {
  width: 100%;
  background: rgba(45,106,79,.10);
  border: 1px solid rgba(45,106,79,.28);
  border-radius: var(--radius-lg);
  padding: 1.4rem 1.6rem;
  margin: .4rem 0 .6rem;
  text-align: left;
  cursor: pointer;
  transition:
    background   var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    transform    var(--duration-normal) var(--ease-spring);
  display: flex;
  align-items: center;
  gap: 1.1rem;
}
.discover-card:hover {
  background: rgba(45,106,79,.20);
  border-color: rgba(45,106,79,.50);
  transform: translateY(-3px);
}
.discover-card-icon {
  font-size: 2rem;
  flex-shrink: 0;
  width: 50px;
  height: 50px;
  background: rgba(45,106,79,.2);
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.discover-card-text strong {
  display: block;
  font-size: .95rem;
  font-weight: 800;
  color: white;
  margin-bottom: .2rem;
}
.discover-card-text span {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  line-height: 1.4;
}
.discover-arrow {
  margin-left: auto;
  color: var(--green-light);
  font-size: 1.1rem;
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease-spring);
}
.discover-card:hover .discover-arrow {
  transform: translateX(4px);
}
.recap-tags {
  display: flex;
  flex-wrap: wrap;
  gap: .5rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.recap-tag {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  background: rgba(45, 106, 79, .14);
  border: 1px solid rgba(45, 106, 79, .3);
  border-radius: 999px;
  padding: .3em .9em;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-light);
}

/* Modal spéciale permis */
.modal-panel-license {
  max-width: 460px;
  text-align: center;
}
.license-modal-icon {
  font-size: 3.5rem;
  display: block;
  margin-bottom: .7rem;
}
.license-modal-title {
  font-size: 1.6rem;
  font-weight: 800;
  color: white;
  margin-bottom: .6rem;
}
.license-modal-desc {
  font-size: .92rem;
  color: rgba(255,255,255,.6);
  line-height: 1.65;
  margin-bottom: 1.3rem;
}
.license-modal-details {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .45rem;
  justify-content: center;
  margin-bottom: 2rem;
}
.license-modal-details li {
  background: rgba(45, 106, 79, .12);
  border: 1px solid rgba(45, 106, 79, .26);
  border-radius: 999px;
  padding: .3em .9em;
  font-size: .8rem;
  font-weight: 700;
  color: var(--green-light);
}


/* ─────────────────────────────────────────────────────
   7. SECTION LSF (remplace l'emplacement simulateur)
───────────────────────────────────────────────────── */
#lsf-section {
  padding: var(--section-padding);
  background: var(--surface-dark);
  position: relative;
  overflow: hidden;
}
#lsf-section .section-title    { color: white; }
#lsf-section .section-subtitle { color: var(--subtitle-color); }

.lsf-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: clamp(2rem, 5vw, 4rem);
  align-items: center;
  position: relative;
  z-index: 1;
}
/* Mise en page a un seul bloc (video + texte de bienvenue) centre */
.lsf-layout--single {
  grid-template-columns: 1fr;
  max-width: 760px;
}
.lsf-layout--single .lsf-car-img {
  height: clamp(220px, 40vw, 420px);
}
/* LSF section intro — overrides for left-aligned layout */
.lsf-section-intro {
  text-align: left;
  margin-bottom: 2rem;
}
.lsf-section-title {
  color: white;
}
.lsf-em {
  font-family: var(--font-accent);
  font-style: italic;
  color: var(--green-light);
}
.lsf-section-subtitle {
  margin: 0;
  text-align: left;
}
.lsf-cta-row {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  align-items: center;
  margin-top: .4rem;
}

/* ── [Ajout] Vidéo de bienvenue en LSF ── */
.lsf-welcome-video {
  position: relative;
  margin: 1.6rem 0 .4rem;
  border-radius: var(--radius-lg, 18px);
  overflow: hidden;
  border: 1px solid rgba(82, 183, 136, .22);
  background: #0a1510;
  box-shadow: 0 18px 46px rgba(0,0,0,.35);
}
.lsf-welcome-video-el {
  display: block;
  width: 100%;
  max-height: 360px;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  background: #0a1510;
}
.lsf-welcome-video-tag {
  position: absolute;
  top: .9rem;
  left: .9rem;
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: 'Outfit', sans-serif;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #fff;
  background: rgba(13, 26, 20, .72);
  backdrop-filter: blur(6px);
  border: 1px solid rgba(82, 183, 136, .3);
  border-radius: 999px;
  padding: .4em .9em;
  pointer-events: none;
}
@media (max-width: 680px) {
  .lsf-welcome-video-el { max-height: 240px; }
}

.lsf-feature-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  margin: 1.8rem 0 2.2rem;
}
.lsf-feature-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: 1rem 1.2rem;
  background: rgba(45,106,79,.1);
  border: 1px solid rgba(45,106,79,.22);
  border-radius: var(--radius-md);
  transition: background var(--duration-normal) var(--ease), border-color var(--duration-normal) var(--ease);
}
.lsf-feature-item:hover {
  background: rgba(45,106,79,.18);
  border-color: rgba(45,106,79,.4);
}
.lsf-feature-icon {
  font-size: 1.6rem;
  flex-shrink: 0;
  line-height: 1;
}
.lsf-feature-text strong {
  display: block;
  font-size: .9rem;
  font-weight: 700;
  color: white;
  margin-bottom: .2rem;
}
.lsf-feature-text span {
  font-size: .82rem;
  color: rgba(255,255,255,.65); /* était .5 — trop peu visible */
  line-height: 1.45;
}

/* ── [Ajout] Mise en page côte à côte : vidéo LSF + partenaires ── */
.lsf-layout--split {
  grid-template-columns: 1.1fr .9fr;
  max-width: 1080px;
  align-items: start;
}
.lsf-layout--split .lsf-visual,
.lsf-layout--split .lsf-partners {
  display: flex;
  flex-direction: column;
  align-self: stretch;
}
.lsf-layout--split .lsf-car-card,
.lsf-layout--split .lsf-partners-card {
  display: flex;
  flex-direction: column;
  width: 100%;
}
/* [Fix] Mini-jeux : toujours empilés sous la vidéo, jamais à côté.
   .lsf-visual passe en colonne (au lieu du row par défaut du flex),
   donc .lsf-car-card puis .lsf-games se placent l'un sous l'autre,
   sur toute la largeur de la colonne vidéo, sans jamais déborder
   sur la colonne "Nos partenaires". */
.lsf-layout--split .lsf-visual {
  gap: clamp(30px, 3vw, 40px);
}
.lsf-layout--split .lsf-visual > .lsf-games {
  width: 100%;
  max-width: 100%;
  margin-top: 0; /* l'espacement est géré par le gap ci-dessus */
  flex-shrink: 0;
  align-self: stretch;
}
/* La carte partenaires (contenu plus long) peut occuper toute la hauteur
   disponible, mais la carte vidéo garde sa hauteur naturelle pour éviter
   le grand vide sous la légende. */
.lsf-layout--split .lsf-partners-card {
  height: 100%;
}
.lsf-layout--split .lsf-car-card {
  align-self: start;
}
@media (max-width: 860px) {
  .lsf-layout--split {
    grid-template-columns: 1fr;
    max-width: 620px;
  }
}

/* ── [Ajout] Bloc "Nos partenaires" (MDPH / France Travail / Agefiph) ── */
.lsf-partners-card {
  border-radius: var(--radius-lg);
  background: var(--surface-dark2);
  border: 1px solid rgba(45,106,79,.25);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(45,106,79,.08);
  padding: 1.8rem 1.9rem;
}
.lsf-partners-badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  font-family: 'Outfit', sans-serif;
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green-lighter, #95D5B2);
  background: rgba(45,106,79,.16);
  border: 1px solid rgba(82,183,136,.3);
  border-radius: 999px;
  padding: .38em 1em;
  margin-bottom: 1rem;
}
.lsf-partners-title {
  font-family: 'Outfit', sans-serif;
  font-size: 1.15rem;
  font-weight: 800;
  color: #fff;
  margin: 0 0 .5rem;
}
.lsf-partners-intro {
  font-size: .92rem;
  color: rgba(255,255,255,.78);
  line-height: 1.65;
  margin: 0 0 1.4rem;
}
.lsf-partners-list {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .9rem;
  margin: 0;
  padding: 0;
}
.lsf-partner-item {
  display: flex;
  align-items: flex-start;
  gap: .85rem;
  padding: .9rem 1.05rem;
  background: rgba(45,106,79,.1);
  border: 1px solid rgba(45,106,79,.22);
  border-radius: var(--radius-md);
  transition: background var(--duration-normal) var(--ease), border-color var(--duration-normal) var(--ease);
}
.lsf-partner-item:hover {
  background: rgba(45,106,79,.18);
  border-color: rgba(45,106,79,.4);
}
.lsf-partner-icon {
  font-size: 1.35rem;
  flex-shrink: 0;
  line-height: 1.2;
}
.lsf-partner-text strong {
  display: block;
  font-size: .92rem;
  font-weight: 800;
  color: #fff;
  margin-bottom: .3rem;
}
.lsf-partner-text span {
  font-size: .85rem;
  color: rgba(255,255,255,.75);
  line-height: 1.6;
}

/* Carte visuelle côté droit */
.lsf-visual {
  position: relative;
}
.lsf-car-card {
  position: relative;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: var(--surface-dark2);
  border: 1px solid rgba(45,106,79,.25);
  box-shadow: var(--shadow-xl), 0 0 0 1px rgba(45,106,79,.08);
}
.lsf-car-img {
  width: 100%;
  height: clamp(180px, 30vw, 280px);
  object-fit: cover;
  object-position: center;
  display: block;
}
/* [Fix] La vidéo de bienvenue LSF ne doit jamais être rognée/étirée :
   on abandonne la hauteur fixe + object-fit:cover (pensés pour une image)
   au profit d'un ratio d'aspect + object-fit:contain, pour qu'elle
   rentre toujours entièrement dans sa cellule, quelle que soit sa taille. */
video.lsf-car-img {
  height: auto;
  aspect-ratio: 16 / 9;
  max-height: min(60vh, 480px);
  object-fit: contain;
  background: #000;
}
.lsf-car-caption {
  padding: 1.4rem 1.6rem;
}
.lsf-car-caption h3 {
  font-size: 1.05rem;
  font-weight: 800;
  color: white;
  margin-bottom: .3rem;
}
.lsf-car-caption p {
  font-size: .85rem;
  color: rgba(255,255,255,.65); /* était .5 */
  line-height: 1.55;
}
/* Bouton "Voir le forfait LSF" — ajouté sous le texte de bienvenue */
.lsf-cta-btn {
  margin-top: 1.1rem;
}
@media (max-width: 400px) {
  .lsf-cta-btn {
    width: 100%;
    justify-content: center;
    white-space: normal;
    text-align: center;
  }
}
/* Bouton ouvrir simulateur */
.btn-simulator-open {
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  background: rgba(45,106,79,.15);
  border: 1.5px solid rgba(45,106,79,.45);
  color: var(--green-light);
  border-radius: 999px;
  padding: .7em 1.6em;
  font-family: var(--font-ui);
  font-size: .9rem;
  font-weight: 700;
  cursor: pointer;
  transition:
    background   var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease),
    transform    var(--duration-normal) var(--ease-spring);
  margin-top: .6rem;
}
.btn-simulator-open:hover {
  background: rgba(45,106,79,.28);
  border-color: var(--green);
  transform: translateY(-2px);
}

/* ─────────────────────────────────────────────────────
   7b. MODAL SIMULATEUR (popup)
───────────────────────────────────────────────────── */
#simulator-modal {
  position: fixed;
  inset: 0;
  z-index: 1000;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
}
#simulator-modal[hidden] { display: none; }

.simulator-modal-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 15, 8, .92);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  animation: fadeIn .3s var(--ease);
}
.simulator-modal-panel {
  position: relative;
  z-index: 2;
  background: var(--surface-dark2);
  border: 1px solid rgba(45,106,79,.25);
  border-radius: var(--radius-xl);
  width: 100%;
  max-width: 1020px;
  max-height: 92vh;
  overflow: hidden;
  animation: modalEnter .4s cubic-bezier(.34, 1.4, .64, 1);
  display: flex;
  flex-direction: column;
}
.simulator-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.6rem;
  border-bottom: 1px solid rgba(45,106,79,.15);
  flex-shrink: 0;
  background: rgba(0,0,0,.2);
}
.simulator-modal-title {
  font-size: .95rem;
  font-weight: 700;
  color: white;
  display: flex;
  align-items: center;
  gap: .7rem;
}
.simulator-modal-title span {
  font-size: .78rem;
  color: var(--green-light);
  font-weight: 500;
  opacity: .8;
}
.simulator-modal-body {
  overflow-y: auto;
  overflow-x: hidden;
  flex: 1;
  scrollbar-width: thin;
  scrollbar-color: var(--green) transparent;
  /* Touch scroll fluide sur iOS */
  -webkit-overflow-scrolling: touch;
}

/* ─────────────────────────────────────────────────────
   7c. SECTION SIMULATEUR (cockpit — dans la modal)
───────────────────────────────────────────────────── */
#simulator {
  padding: 1rem 1.2rem 1.5rem;
  background: var(--surface-dark);
}
#simulator .section-title    { color: white; }
#simulator .section-subtitle { color: var(--subtitle-color); }
#simulator .section-intro    { margin-bottom: 1.4rem; }

/* Conteneur principal du cockpit */
.cockpit-container {
  position: relative;
  max-width: 980px;
  margin: 0 auto;
  border-radius: var(--radius-lg);
  overflow: hidden;
  background: #030503;
  box-shadow:
    var(--shadow-xl),
    0 0 0 1px rgba(45, 106, 79, .1);
}

/* Canvas route — hauteur gérée par vehicleScene.js (responsive) */
#road-canvas {
  display: block;
  width: 100%;
  /* height définie par JS via canvas.height — pas de hauteur fixe en CSS */
  min-height: 300px;
  max-height: 540px;
}

/* HUD superposé sur le canvas */
.cockpit-hud {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 5;
}

/* ── Tableau de bord (bas) ── */
.dashboard {
  position: absolute;
  bottom: 0;
  left: 0;
  right: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: .8rem 2.5rem 1.1rem;
  background: linear-gradient(to top, rgba(2,3,1,.97) 60%, transparent);
  gap: 1.5rem;
}

/* Tachymètre */
.dash-gauge {
  position: relative;
  width: 96px;
  height: 96px;
  flex-shrink: 0;
}
.speedo-readout {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.speedo-value {
  font-size: 1.7rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.speedo-unit {
  font-size: .58rem;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,.28);
}

/* Centre dashboard */
.dash-center {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .6rem;
  flex: 1;
}
.gear-indicator {
  width: 40px;
  height: 40px;
  border: 2px solid rgba(45, 106, 79, .42);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  transition: border-color .3s;
}
.rpm-track {
  width: 130px;
  height: 5px;
  background: rgba(255,255,255,.08);
  border-radius: 3px;
  overflow: hidden;
}
.rpm-fill {
  height: 100%;
  width: 0%;
  background: linear-gradient(to right, var(--green), #E07040 88%);
  border-radius: 3px;
  transition: width .1s linear;
}

/* Score */
.dash-score {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
}
.score-label {
  font-size: .62rem;
  text-transform: uppercase;
  letter-spacing: .12em;
  color: rgba(255,255,255,.3);
}
.score-value {
  font-size: 1.4rem;
  font-weight: 900;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* Volant */
.steering-wheel-wrap {
  position: absolute;
  bottom: 64px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 6;
  pointer-events: none;
  transition: transform .4s var(--ease);
}
.steering-wheel-wrap.turn-left  { transform: translateX(-50%) rotate(-15deg); }
.steering-wheel-wrap.turn-right { transform: translateX(-50%) rotate(15deg); }

/* ── Dialogue moniteur (haut-gauche) ── */
.monitor-dialogue {
  position: absolute;
  top: 1.4rem;
  left: 1.4rem;
  z-index: 10;
  max-width: 400px;
  display: flex;
  flex-direction: column;
  gap: .7rem;
  pointer-events: none;
}
.monitor-avatar-group {
  display: flex;
  align-items: center;
  gap: .7rem;
}
.monitor-avatar {
  position: relative;
  width: 46px;
  height: 46px;
  flex-shrink: 0;
}
.avatar-pulse {
  position: absolute;
  inset: -5px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(45,106,79,.3) 0%, transparent 70%);
  animation: avatarPulse 3s ease-in-out infinite;
}
@keyframes avatarPulse {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .35; transform: scale(1.12); }
}
.avatar-emoji {
  width: 46px;
  height: 46px;
  background: rgba(14, 18, 10, .92);
  border: 2px solid rgba(45, 106, 79, .5);
  border-radius: 50%;
  font-size: 1.5rem;
  display: flex;
  align-items: center;
  justify-content: center;
  position: relative;
}
.monitor-info {
  display: flex;
  flex-direction: column;
}
.monitor-name {
  font-size: .88rem;
  font-weight: 700;
  color: white;
}
.monitor-role {
  font-size: .72rem;
  color: var(--green);
  font-weight: 600;
  letter-spacing: .06em;
}
.dialogue-bubble {
  background: rgba(8, 11, 5, .9);
  border: 1px solid rgba(45, 106, 79, .25);
  border-radius: 4px 16px 16px 16px;
  padding: .9em 1.1em;
  backdrop-filter: blur(12px);
  box-shadow: 0 6px 22px rgba(0,0,0,.3);
  min-height: 48px;
}
.dialogue-bubble p {
  font-size: .86rem;
  color: rgba(255,255,255,.85);
  line-height: 1.56;
}
.typing-indicator {
  display: none;
  gap: 4px;
  align-items: center;
  margin-top: 5px;
}
.typing-indicator.visible {
  display: flex;
}
.typing-indicator span {
  width: 5px;
  height: 5px;
  background: var(--green);
  border-radius: 50%;
  animation: typingDot 1.1s ease-in-out infinite;
}
.typing-indicator span:nth-child(2) { animation-delay: .2s; }
.typing-indicator span:nth-child(3) { animation-delay: .4s; }
@keyframes typingDot {
  0%, 80%, 100% { transform: translateY(0); opacity: .4; }
  40%           { transform: translateY(-6px); opacity: 1; }
}

/* ── Réponses élève (bas-droit) ── */
.student-replies {
  position: absolute;
  bottom: 80px;
  right: 1.4rem;
  z-index: 10;
  max-width: 308px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: .55rem;
  pointer-events: all;
}
.reply-option {
  background: rgba(45, 106, 79, .14);
  border: 1.5px solid rgba(45, 106, 79, .34);
  color: white;
  border-radius: 14px 3px 14px 14px;
  padding: .62em 1.1em;
  font-family: var(--font-ui);
  font-size: .84rem;
  font-weight: 600;
  text-align: right;
  cursor: pointer;
  opacity: 0;
  transform: translateX(12px);
  animation: replyAppear .3s var(--ease) forwards;
  transition:
    background  var(--duration-fast) var(--ease),
    transform   var(--duration-normal) var(--ease-spring);
}
.reply-option:hover {
  background: rgba(45, 106, 79, .3);
  transform: translateX(-5px) !important;
}
@keyframes replyAppear {
  to { opacity: 1; transform: translateX(0); }
}


/* ─────────────────────────────────────────────────────
   8. SECTION PERMIS (licenses)
───────────────────────────────────────────────────── */
#licenses {
  padding: var(--section-padding);
  background: var(--surface-light);
}

.licenses-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(240px, 100%), 1fr));
  gap: 1.1rem;
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Carte standard */
.license-card {
  background: var(--surface-white);
  border: 1.5px solid var(--green-pale);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.55rem 1.6rem;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  transition:
    transform    var(--duration-normal) var(--ease-spring),
    box-shadow   var(--duration-normal) var(--ease),
    border-color var(--duration-normal) var(--ease);
}
.license-card.animated {
  will-change: transform, box-shadow, border-color;
}
.license-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 2.5px;
  background: var(--green);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--duration-normal) var(--ease);
}
.license-card:hover::before,
.license-card:focus::before {
  transform: scaleX(1);
}
.license-card:hover,
.license-card:focus {
  transform: translateY(-7px);
  box-shadow: var(--shadow-md);
  border-color: var(--green-lighter);
  outline: none;
}
.card-icon {
  font-size: 2.1rem;
  display: block;
  margin-bottom: .75rem;
}
.card-title {
  font-size: 1.06rem;
  font-weight: 800;
  color: var(--text-primary);
  margin-bottom: .45rem;
  letter-spacing: -.01em;
}
.card-description {
  font-size: .85rem;
  color: var(--text-muted);
  line-height: 1.56;
  margin-bottom: .9rem;
}
.card-tags {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: .38rem;
  margin-bottom: 1.2rem;
}
.card-tags li {
  background: var(--green-pale);
  color: var(--green-darker);
  border-radius: 999px;
  padding: .18em .75em;
  font-size: .7rem;
  font-weight: 700;
  letter-spacing: .02em;
}
.card-cta {
  font-size: .82rem;
  font-weight: 700;
  color: var(--green);
  border-bottom: 1px solid transparent;
  transition: border-color var(--duration-normal) var(--ease);
}
.license-card:hover .card-cta,
.license-card:focus .card-cta {
  border-color: var(--green);
}

/* Carte-lien — le <a> remplace le role="button" */
.license-card-link {
  display: block;
  text-decoration: none;
  color: inherit;
}
.license-card-link:focus-visible {
  outline: 2px solid var(--green);
  outline-offset: 3px;
}

/* Carte LSF mise en avant */
.license-card-featured {
  background: linear-gradient(138deg, var(--surface-dark) 0%, var(--surface-dark3) 100%);
  border-color: rgba(45, 106, 79, .38);
  grid-column: span 2;
}
.license-card-featured::before {
  background: linear-gradient(to right, var(--green), var(--green-light));
}
.license-card-featured:hover,
.license-card-featured:focus {
  box-shadow: 0 24px 64px rgba(0,0,0,.38);
  border-color: rgba(45, 106, 79, .6);
}
.license-card-featured .card-title       { color: white; font-size: 1.25rem; }
.license-card-featured .card-description { color: rgba(255,255,255,.6); font-size: .9rem; }
.license-card-featured .card-tags li     { background: rgba(45, 106, 79, .18); color: var(--green-light); }
.license-card-featured .card-cta         { color: var(--green-light); }

/* Halo lumineux derrière la carte LSF */
.featured-glow {
  position: absolute;
  top: -70%;
  right: -15%;
  width: 340px;
  height: 340px;
  background: radial-gradient(circle, rgba(45,106,79,.12) 0%, transparent 65%);
  pointer-events: none;
  animation: featuredGlow 5s ease-in-out infinite;
}
@keyframes featuredGlow {
  0%, 100% { opacity: 1; transform: scale(1); }
  50%       { opacity: .4; transform: scale(1.1); }
}

/* Badge "Notre spécialité" */
.card-header-row {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: .2rem;
}
.featured-badge {
  font-size: .7rem;
  font-weight: 800;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--green);
  background: rgba(45, 106, 79, .16);
  border: 1px solid rgba(45, 106, 79, .3);
  border-radius: 999px;
  padding: .25em .85em;
  white-space: nowrap;
}


/* ─────────────────────────────────────────────────────
   9. SECTION AVIS (carousel)
───────────────────────────────────────────────────── */
#reviews {
  padding: var(--section-padding);
  background: var(--surface-dark2);
  overflow: hidden;
  position: relative;
}
#reviews .section-title    { color: white; }
#reviews .section-subtitle { color: var(--subtitle-color); }

.reviews-carousel-wrapper {
  max-width: var(--container-max);
  margin: 0 auto;
}

/* Piste du carousel */
.reviews-track {
  display: flex;
  gap: 1.3rem;
  transition: transform .55s var(--ease);
  will-change: transform;
}

/* Carte d'avis */
.review-card {
  flex: 0 0 calc(33.33% - .88rem);
  min-width: min(262px, 80vw);
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(45, 106, 79, .15);
  border-radius: var(--radius-md);
  padding: 1.8rem 1.5rem;
  transition:
    transform    var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal) var(--ease);
}
.review-card.animated {
  will-change: transform, border-color;
}
.review-card:hover {
  transform: translateY(-5px);
  border-color: rgba(45, 106, 79, .4);
}
.review-stars {
  color: var(--green);
  font-size: .95rem;
  letter-spacing: .05em;
  margin-bottom: .85rem;
}
.review-text {
  font-family: var(--font-accent);
  font-style: italic;
  font-size: .92rem;
  color: rgba(255,255,255,.82); /* était .66 — insuffisant sur fond sombre */
  line-height: 1.68;
  margin-bottom: 1.3rem;
}
.review-author {
  display: flex;
  align-items: center;
  gap: .65rem;
}
.author-avatar { font-size: 1.4rem; }
.review-author strong {
  display: block;
  font-size: .88rem;
  color: white;
}
.review-author span {
  font-size: .73rem;
  color: rgba(255,255,255,.5); /* était .32 — trop peu lisible */
}

/* Contrôles */
.carousel-controls {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: .9rem;
  margin-top: 2rem;
}
.carousel-btn {
  width: 42px;
  height: 42px;
  border-radius: 50%;
  background: rgba(45, 106, 79, .12);
  border: 1.5px solid rgba(45, 106, 79, .3);
  color: var(--green);
  font-size: 1.1rem;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background   var(--duration-normal) var(--ease),
    transform    var(--duration-normal) var(--ease-spring),
    border-color var(--duration-normal) var(--ease);
}
.carousel-btn:hover {
  background: var(--green);
  color: white;
  border-color: var(--green);
  transform: scale(1.1);
}
.carousel-dots {
  display: flex;
  gap: .45rem;
}
.carousel-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(255,255,255,.18);
  cursor: pointer;
  transition: background .25s, transform .25s;
  border: none;
}
.carousel-dot.active {
  background: var(--green);
  transform: scale(1.35);
}


/* ─────────────────────────────────────────────────────
   10. SECTION CONTACT
───────────────────────────────────────────────────── */
#contact {
  padding: var(--section-padding);
  background: var(--surface-light2);
  position: relative;
  overflow: hidden;
}
/* Image de voiture en décoration très légère */
.contact-car-bg {
  position: absolute;
  bottom: -40px;
  right: -60px;
  width: 520px;
  height: 320px;
  background-image: url("D390CEE9-E9BA-4932-8A2E-6AB07B388238.png");
  background-size: cover;
  background-position: center;
  opacity: .055;
  filter: grayscale(40%);
  pointer-events: none;
  border-radius: var(--radius-lg);
  transform: rotate(-4deg);
}

.contact-layout {
  max-width: var(--container-max);
  margin: 0 auto;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
  gap: 5rem;
  align-items: start;
}
.contact-info,
.contact-form-wrapper {
  min-width: 0;
}

.contact-info .section-badge { margin-bottom: .9rem; }

.contact-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  line-height: 1.08;
  letter-spacing: -.025em;
  color: var(--text-primary);
  margin-top: .4rem;
  margin-bottom: .6rem;
}
.contact-title em {
  font-size: 35px;
  font-weight: 400;
  color: var(--green);
}

.contact-intro {
  font-size: .98rem;
  color: var(--text-muted);
  line-height: 1.7;
  margin-bottom: 1.8rem;
}

.contact-details {
  font-style: normal;
  display: flex;
  flex-direction: column;
  gap: 1.1rem;
  margin-bottom: 2.2rem;
}
.contact-item {
  display: flex;
  align-items: center;
  gap: .9rem;
  font-size: .94rem;
}
.contact-icon     { flex-shrink: 0; }
.contact-item span { color: var(--text-secondary); }
.contact-item a {
  color: var(--green);
  transition: color var(--duration-normal) var(--ease);
}
.contact-item a:hover { color: var(--green-dark); }

/* Formulaire contact */
.contact-form-wrapper {
  background: var(--surface-white);
  border: 1.5px solid var(--green-pale);
  border-radius: var(--radius-lg);
  padding: 2.4rem;
  box-shadow: var(--shadow-md);
}
.contact-form {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
/* Overrides pour fond clair */
.contact-form-wrapper .field-input {
  background: var(--surface-light);
  border-color: rgba(0,0,0,.12);
  color: var(--text-primary);
}
.contact-form-wrapper .field-input:focus {
  border-color: var(--green);
  background: rgba(45, 106, 79, .05);
}
.contact-form-wrapper .field-input::placeholder { color: var(--text-muted); }
.contact-form-wrapper .field-label             { color: var(--text-secondary); }
.contact-form-wrapper .field-select option     { background: white; color: var(--text-primary); }

.form-feedback {
  font-size: .86rem;
  font-weight: 600;
  min-height: 1.2em;
}
.form-feedback.success { color: var(--green); }
.form-feedback.error   { color: #D44545; }


/* ─────────────────────────────────────────────────────
   11. FOOTER
───────────────────────────────────────────────────── */
#site-footer {
  background: var(--surface-darkest);
  border-top: 1px solid rgba(45, 106, 79, .22);
  padding: 3.5rem 5vw 2.5rem;
}
.footer-inner {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.6rem;
}
.footer-brand {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: .75rem;
}
.footer-logo-link {
  display: inline-block;
  line-height: 0;
  transition: transform var(--duration-normal) var(--ease), filter var(--duration-normal) var(--ease);
}
.footer-logo-link:hover {
  transform: scale(1.06);
  filter: drop-shadow(0 0 18px rgba(82,183,136,.45));
}
.footer-logo-img {
  width: 90px;
  height: 90px;
  display: block;
}
.footer-brand-name {
  font-family: var(--font-ui);
  font-size: 1.2rem;
  font-weight: 700;
  color: rgba(255,255,255,.88);
  letter-spacing: -.01em;
}
.footer-brand-name strong {
  color: inherit;
}
.footer-tagline {
  font-size: .86rem;
  color: rgba(255,255,255,.5);
  margin: 0;
}
.footer-nav {
  display: flex;
  gap: 1.6rem;
  justify-content: center;
  flex-wrap: wrap;
}
.footer-nav a {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  text-decoration: none;
  transition: color var(--duration-normal) var(--ease);
}
.footer-nav a:hover { color: var(--green-lighter); }
.footer-copy {
  font-size: .74rem;
  color: rgba(255,255,255,.32);
  margin: 0;
}

/* ── Nav dropdown Permis ── */
.nav-item-dropdown {
  position: relative;
  list-style: none;
}
.nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: .35em;
}
.nav-chevron {
  flex-shrink: 0;
  transition: transform var(--duration-normal) var(--ease);
  color: inherit;
}
.nav-item-dropdown[data-open] .nav-chevron {
  transform: rotate(180deg);
}
.nav-dropdown-menu {
  position: absolute;
  top: calc(100% + .85rem);
  left: 50%;
  transform: translateX(-50%);
  min-width: 260px;
  /* [Fix] empêche le débordement horizontal du menu sur les largeurs
     intermédiaires où "Permis" est proche du bord droit de la nav */
  max-width: min(320px, calc(100vw - 2.5rem));
  background: #0D1A14;
  border: 1px solid rgba(82,183,136,.18);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(0,0,0,.55);
  list-style: none;
  padding: .5rem;
  z-index: 9999;
  opacity: 0;
  transform: translateX(-50%) translateY(-8px);
  transition: opacity .22s var(--ease), transform .22s var(--ease);
  pointer-events: none;
}
.nav-item-dropdown[data-open] .nav-dropdown-menu {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
  pointer-events: all;
}
/* [Fix] un élément avec l'attribut natif "hidden" doit rester display:none
   (l'ancienne règle "display:block" forçait son affichage/sa présence
   dans le flux avant même l'ouverture, provoquant un flash et des
   problèmes de focus sur certains navigateurs) */
.nav-dropdown-menu[hidden] {
  display: none;
}
.nav-dropdown-item {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .65rem .9rem;
  border-radius: var(--radius-md);
  text-decoration: none;
  color: rgba(255,255,255,.78);
  transition: background var(--duration-fast) var(--ease), color var(--duration-fast) var(--ease);
  font-size: .85rem;
}
.nav-dropdown-item:hover {
  background: rgba(45,106,79,.18);
  color: #fff;
}
.ndi-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.ndi-text {
  display: flex;
  flex-direction: column;
  gap: .1rem;
  line-height: 1.3;
}
.ndi-text strong {
  font-weight: 700;
  font-size: .87rem;
  color: #fff;
}
.ndi-text span {
  font-size: .74rem;
  color: rgba(255,255,255,.45);
}
.ndi-sep {
  border-top: 1px solid rgba(82,183,136,.15);
  margin: .35rem 0;
  padding-top: .35rem;
}
/* Couleur par défaut : blanc pour tous les items (y compris LSF).
   Le vert n'apparaît que sur l'item actif (.is-active) ou au survol. */
.nav-dropdown-item:hover .ndi-text strong {
  color: var(--green-lighter);
}
.nav-dropdown-item.is-active .ndi-text strong {
  color: var(--green-lighter);
}
.nav-dropdown-item.is-active {
  background: rgba(45,106,79,.14);
}
.nav-dropdown-item--all {
  justify-content: center;
  font-size: .78rem;
  font-weight: 700;
  color: var(--green-lighter) !important;
  border-top: 1px solid rgba(82,183,136,.15);
  margin-top: .35rem;
  padding-top: .65rem;
}
.nav-dropdown-item--all:hover {
  background: rgba(45,106,79,.22) !important;
  color: #fff !important;
}
/* [Fix] Mobile : dropdown inline — voir le bloc "Hamburger déclenché dès 860px"
   ci-dessous où ces règles ont été fusionnées pour rester sur un seul
   breakpoint cohérent avec le menu hamburger. */


/* ─────────────────────────────────────────────────────
   12. SECTIONS — TITRES ET BADGES GÉNÉRIQUES
───────────────────────────────────────────────────── */
.section-intro {
  text-align: center;
  margin-bottom: 3.5rem;
}
.section-badge {
  display: inline-block;
  font-size: .72rem;
  font-weight: 800;
  letter-spacing: .22em;
  text-transform: uppercase;
  color: var(--green-dark);       /* plus foncé = meilleur contraste sur fond clair */
  background: var(--green-ghost);
  border: 1px solid rgba(45, 106, 79, .35);
  border-radius: 999px;
  padding: .32em 1.1em;
  margin-bottom: .9rem;
}
/* Sur fonds sombres (LSF, reviews, etc.) le badge reste vert clair */
#lsf-section .section-badge,
#reviews .section-badge,
#instructors .section-badge,
#simulator .section-badge {
  color: var(--green-lighter);
  background: rgba(45, 106, 79, .2);
  border-color: rgba(45, 106, 79, .4);
}
.section-title {
  font-size: clamp(2rem, 4.5vw, 3.2rem);
  font-weight: 900;
  letter-spacing: -.025em;
  line-height: 1.08;
  color: var(--text-primary);
  margin-bottom: .6rem;
}
.section-subtitle {
  font-size: 1rem;
  color: var(--text-muted); /* fond clair = gris lisible */
  line-height: 1.7;
  max-width: 54ch;
  margin: 0 auto;
}
/* Sur fonds sombres, on force la couleur claire */
#reviews .section-subtitle,
#lsf-section .section-subtitle,
#simulator .section-subtitle,
#instructors .section-subtitle {
  color: var(--subtitle-color);
}


/* ─────────────────────────────────────────────────────
   ANIMATIONS
───────────────────────────────────────────────────── */
@keyframes fadeIn {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes fadeSlideUp {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes titleSlideUp {
  from { opacity: 0; transform: translateY(40px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes cardReveal {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ── Révélation au scroll [data-animate] ──────────── */
[data-animate] {
  opacity: 0;
  transform: translateY(24px);
  transition:
    opacity   .7s var(--ease),
    transform .7s var(--ease);
}
[data-animate].animated {
  opacity: 1;
  transform: translateY(0);
}

/* ── Cartes permis & avis ─────────────────────────────
   FIX DÉFINITIF :
   - Les cartes démarrent invisibles via la classe .card-hidden
     posée par le JS (pas de inline style opacity:0 qui entre
     en conflit avec la transition hover)
   - L'apparition est une ANIMATION CSS (cardReveal) déclenchée
     par la classe .is-visible — complètement indépendante de
     la transition hover (transform / box-shadow / border-color)
   - Les transition-delay nth-child ne s'appliquent qu'à
     animation-delay, pas à la transition hover
────────────────────────────────────────────────────── */
.license-card.card-hidden,
.review-card.card-hidden {
  opacity: 0;
}
.license-card.is-visible {
  animation: cardReveal .55s var(--ease) both;
}
.review-card.is-visible {
  animation: cardReveal .55s var(--ease) both;
}

/* Délais décalés — s'appliquent uniquement à l'animation d'entrée */
.license-card:nth-child(1).is-visible { animation-delay: 0s; }
.license-card:nth-child(2).is-visible { animation-delay: .08s; }
.license-card:nth-child(3).is-visible { animation-delay: .16s; }
.license-card:nth-child(4).is-visible { animation-delay: .24s; }
.license-card:nth-child(5).is-visible { animation-delay: .32s; }
.license-card:nth-child(6).is-visible { animation-delay: .08s; }
.license-card:nth-child(7).is-visible { animation-delay: .16s; }
.license-card:nth-child(8).is-visible { animation-delay: .24s; }

.review-card:nth-child(1).is-visible  { animation-delay: 0s; }
.review-card:nth-child(2).is-visible  { animation-delay: .10s; }
.review-card:nth-child(3).is-visible  { animation-delay: .20s; }
.review-card:nth-child(4).is-visible  { animation-delay: .08s; }
.review-card:nth-child(5).is-visible  { animation-delay: .16s; }

/* Délais décalés (ancienne transition-delay — supprimés, remplacés ci-dessus) */


/* ─────────────────────────────────────────────────────
   13. RESPONSIVE
───────────────────────────────────────────────────── */

/* ── Désktop étroit 1180px — évite le chevauchement CTA / liens nav ── */
@media (max-width: 1180px) {
  .nav-actions .btn-cta { display: none; }
}

/* ── Tablette 900px ── */
@media (max-width: 900px) {
  .nav-actions .btn-cta { display: none; }

  .contact-layout {
    grid-template-columns: minmax(0, 1fr);
    gap: 3rem;
  }
  .review-card {
    flex: 0 0 calc(50% - .65rem);
  }
  .license-card-featured {
    grid-column: 1 / -1;
  }
  .lsf-layout {
    grid-template-columns: 1fr;
    gap: 2.5rem;
  }
  /* [Fix] en media screen, la vidéo passe avant le texte */
  .lsf-visual  { order: -1; }
  .lsf-content { order: 2; }
  .lsf-section-intro    { text-align: center; }
  .lsf-section-subtitle { text-align: center !important; margin: 0 auto !important; }
  .lsf-cta-row          { justify-content: center; }
}

/* ── Hamburger déclenché dès 860px ──
   Les liens nav disparaissent, le hamburger apparaît       */
@media (max-width: 860px) {

  /* Masquer les liens inline */
  .nav-links {
    display: flex;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    /* [Fix] le panneau n'avait pas de limite de hauteur : quand le menu
       déroulant "Permis" s'ouvrait (8 items en plus), le contenu total
       dépassait la hauteur de l'écran sans possibilité de scroller,
       rendant les derniers liens inaccessibles/coupés sur mobile. */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior: contain;
    background: rgba(13, 26, 20, .97);
    backdrop-filter: blur(20px) saturate(1.3);
    -webkit-backdrop-filter: blur(20px) saturate(1.3);
    padding: 5rem 6vw 2rem;
    gap: 0;
    border-bottom: 2px solid rgba(45, 106, 79, .25);
    box-shadow: 0 8px 32px rgba(0, 0, 0, .35);
    z-index: 850;
    /* Fermé par défaut */
    opacity: 0;
    transform: translateY(-12px);
    pointer-events: none;
    transition:
      opacity   var(--duration-normal) var(--ease),
      transform var(--duration-normal) var(--ease);
  }
  .nav-links.is-open {
    opacity: 1;
    transform: translateY(0);
    pointer-events: all;
  }

  /* Items */
  .nav-links li {
    border-bottom: 1px solid rgba(255, 255, 255, .07);
  }
  .nav-links li:last-child {
    border-bottom: none;
    padding-top: .5rem;
    border-top: 1px solid rgba(255, 255, 255, .08);
  }
  .nav-link {
    /* On garde inline-flex pour conserver l'alignement icône/texte sur Safari mobile */
    display: inline-flex;
    align-items: center;
    gap: .5em;
    width: 100%;
    padding: .9rem 0;
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: .04em;
    color: rgba(255, 255, 255, .88);
    text-align: left;
    background: none;
    border: none;
    -webkit-appearance: none;
    appearance: none;
    line-height: 1;
  }
  .nav-link::after { display: none; }
  .nav-link:hover  { color: var(--green-light); background: none; }

  /* Hamburger visible */
  .nav-hamburger { display: flex; }

  /* Téléphone masqué */
  .nav-actions .nav-phone { display: none !important; }

  /* [Fix] Menu déroulant "Permis" en mode mobile : passage en empilage
     statique inline (au lieu du positionnement absolu/centré desktop qui
     ne fonctionnait pas dans le panneau plein écran mobile). Auparavant
     ce comportement était déclenché à 900px alors que le hamburger
     n'apparaissait qu'à 860px : la zone 861-900px affichait donc un
     mélange des deux modes et cassait la mise en page de la nav. */
  .nav-dropdown-menu {
    position: static;
    transform: none !important;
    opacity: 1 !important;
    pointer-events: all !important;
    box-shadow: none;
    border: none;
    background: rgba(255,255,255,.04);
    border-radius: var(--radius-md);
    margin: .5rem 0;
    max-height: 0;
    max-width: none;
    overflow: hidden;
    transition: max-height .3s var(--ease), padding .3s var(--ease);
    padding: 0;
  }
  .nav-item-dropdown[data-open] .nav-dropdown-menu {
    max-height: 600px;
    padding: .4rem;
  }
  /* [Fix] en mode mobile, le menu déroulant ouvert doit redevenir visible
     même avec l'attribut "hidden" (la classe gère désormais l'affichage) */
  .nav-item-dropdown[data-open] .nav-dropdown-menu[hidden] {
    display: block;
  }
}

/* ── Mobile 680px ── */
@media (max-width: 680px) {
  #main-nav         { padding: .9rem 4.5vw; }
  #main-nav.nav-scrolled { padding: .7rem 4.5vw; }

  .hero-content { padding: 6rem 5vw 3.5rem; }
  .hero-buttons {
    flex-direction: column;
    align-items: stretch;
  }
  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    width: 100%;
    justify-content: center;
    text-align: center;
    line-height: 1.3;
  }
  .stat-divider { display: none; }
  .hero-stats   { gap: 1.2rem; }

  .review-card       { flex: 0 0 100%; }
  .form-row          { flex-direction: column; }
  .choice-grid-2col  { grid-template-columns: 1fr; }

  .dashboard           { padding: .7rem 1.2rem .9rem; gap: .8rem; }
  .dash-gauge          { width: 76px; height: 76px; }
  #speedo-canvas       { width: 76px; height: 76px; }
  .speedo-value        { font-size: 1.3rem; }
  .rpm-track           { width: 90px; }
  .steering-wheel-wrap { display: none; }
}

@media (max-width: 480px) {
  .licenses-grid { grid-template-columns: 1fr; }
  .license-card-featured { grid-column: 1; }
  .card-header-row { flex-wrap: wrap; gap: .4rem; }
}

/* ── Très petit mobile 400px ── */
@media (max-width: 400px) {
  #main-nav { padding: .8rem 4vw; }
  .brand-mark img { width: 32px; height: 32px; }
  .brand-name     { font-size: .95rem; }
  .nav-links      { padding: 5rem 5vw 2rem; }
  .nav-link       { font-size: .95rem; padding: .8rem 0; }

  /* Bouton héro "Commencer mon inscription — gratuit" : texte trop
     long pour 320px avec le padding + l'icône flèche. On resserre
     padding/font et on autorise l'icône à ne pas rétrécir le texte. */
  .hero-buttons .btn-primary,
  .hero-buttons .btn-ghost {
    padding: .8em 1.1em;
    font-size: .85rem;
    gap: .4rem;
  }
  .hero-buttons .btn-primary svg,
  .hero-buttons .btn-ghost svg {
    flex-shrink: 0;
  }
}




/* ─────────────────────────────────────────────────────
   14. ACCESSIBILITÉ — prefers-reduced-motion
   Désactive toutes les animations pour les
   utilisateurs qui en font la demande système.
───────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }

  /* Éléments hero à opacity:0 — doivent quand même apparaître */
  .eyebrow-badge,
  #title-line-1,
  #title-line-2,
  .hero-subtitle,
  .hero-buttons,
  .hero-stats,
  .hero-scroll-hint {
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* Éléments [data-animate] et cartes — visibles immédiatement */
  [data-animate],
  [data-animate].animated {
    opacity: 1;
    transform: none;
    transition: none;
    will-change: auto;
  }

  .license-card,
  .review-card {
    opacity: 1 !important;
    transform: none !important;
    will-change: auto;
  }
}
/* ─────────────────────────────────────────────────────
   Responsive simulateur modal + LSF mobile
───────────────────────────────────────────────────── */
@media (max-width: 680px) {
  .simulator-modal-panel {
    border-radius: var(--radius-lg);
    max-height: 95vh;
  }
  .simulator-modal-header {
    padding: .8rem 1rem;
  }
  .lsf-car-img {
    height: 200px;
  }
  video.lsf-car-img {
    height: auto;
    max-height: 60vh;
  }
  .lsf-feature-list {
    gap: .7rem;
  }
}

@media (max-width: 480px) {
  .simulator-modal-panel {
    border-radius: var(--radius-md);
  }
  .discover-card {
    padding: 1rem 1.1rem;
  }
  .lsf-feature-item {
    padding: .8rem 1rem;
  }
}



/* =======================================================================
   QUESTIONNAIRE D'ÉVALUATION — EXPÉRIENCE IMMERSIVE
   Design : question unique par carte, timer, feedback, résultats animés
   ======================================================================= */

/* ── 1. Panel modal ── */
.modal-panel-eval {
  background: #FFFFFF;
  border: 1px solid rgba(45,106,79,.14);
  border-radius: var(--radius-xl);
  width: 100%;
  max-height: 92vh;
  overflow-y: auto;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: #52B788 #f0f0ee;
}
.modal-panel-eval::-webkit-scrollbar       { width: 4px; }
.modal-panel-eval::-webkit-scrollbar-track { background: #f0f0ee; }
.modal-panel-eval::-webkit-scrollbar-thumb { background: #52B788; border-radius: 4px; }

/* ── 2. En-tête modal ── */
.eval-modal-header {
  position: sticky; top: 0; z-index: 10;
  background: #FFFFFF;
  border-bottom: 1px solid rgba(45,106,79,.10);
  padding: 1.4rem 2rem 1.1rem;
  text-align: center;
}
.eval-modal-header .step-icon  { font-size: 1.9rem; margin-bottom: .25rem; }
.eval-modal-header .step-title { font-size: 1.2rem; font-weight: 800; color: #1C2016; margin-bottom: .2rem; }
.eval-modal-header .step-desc  { font-size: .83rem; color: #6b7280; line-height: 1.5; max-width: 46ch; margin: 0 auto; }

/* ── 3. Corps ── */
.eval-body {
  padding: 0 1.6rem 2rem;
  display: flex; flex-direction: column; gap: 0;
}

/* ── 4. Barre de progression ── */
.eval-prog-wrap {
  display: flex; align-items: center; gap: .7rem;
  padding: .9rem 0 .2rem;
  position: sticky; top: 88px; background: #fff; z-index: 5;
}
.eval-prog-outer {
  flex: 1; height: 5px; background: #E5E9E6;
  border-radius: 99px; overflow: hidden;
}
.eval-prog-fill {
  height: 100%;
  background: linear-gradient(90deg, #2D6A4F 0%, #52B788 100%);
  border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
  width: 0%;
}
.eval-prog-label {
  font-size: .73rem; font-weight: 700; color: #2D6A4F;
  white-space: nowrap; min-width: 44px; text-align: right;
}

/* ── 5. Carte question ── */
@keyframes evalCardIn {
  from { opacity: 0; transform: translateY(18px) scale(.98); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}
.eval-q-card {
  background: #FAFCFA;
  border: 1px solid #E8EDE9;
  border-radius: 16px;
  padding: 1.4rem 1.4rem 1.2rem;
  margin-top: 1rem;
  opacity: 0;
  display: flex; flex-direction: column; gap: .8rem;
}
.eval-q-card.eval-q-card--in {
  animation: evalCardIn .35s cubic-bezier(.34,1.3,.64,1) forwards;
}

/* Badge section */
.eval-q-section-badge {
  display: flex; align-items: center; gap: .45rem;
  font-size: .72rem; font-weight: 800; color: #2D6A4F;
  text-transform: uppercase; letter-spacing: .08em;
}
.eval-q-section-icon { font-size: 1rem; }
.eval-q-section-name { flex: 1; }
.eval-q-counter {
  font-size: .7rem; color: #9ca3af; font-weight: 600;
  background: #F0F4F0; border-radius: 99px; padding: .15em .65em;
  letter-spacing: 0;
}

/* Contexte immersif */
.eval-q-context {
  font-size: .78rem; color: #2D6A4F;
  font-weight: 600; font-style: italic;
  padding: .45rem .8rem;
  background: rgba(45,106,79,.06);
  border-left: 3px solid #52B788;
  border-radius: 0 8px 8px 0;
  margin: 0;
  line-height: 1.4;
}

/* Intitulé */
.eval-q-title {
  font-size: 1rem; font-weight: 700; color: #1C2016;
  line-height: 1.45; margin: 0;
}
.eval-required { color: #E63946; font-weight: 700; }

/* Hint */
.eval-q-hint {
  font-size: .75rem; color: #9ca3af; margin: 0; line-height: 1.4;
}

/* ── 6. Timer ── */
.eval-timer-wrap {
  display: flex; align-items: center; gap: .6rem;
}
.eval-timer-bar-track {
  flex: 1; height: 5px; background: #E5E9E6;
  border-radius: 99px; overflow: hidden;
}
.eval-timer-bar {
  height: 100%; width: 100%;
  background: linear-gradient(to right, #2D6A4F, #52B788);
  border-radius: 99px;
}
.eval-timer-num {
  font-size: .72rem; font-weight: 800; color: #2D6A4F;
  min-width: 22px; text-align: right;
  font-variant-numeric: tabular-nums;
}
.eval-timer-wrap.urgent .eval-timer-bar { background: linear-gradient(to right, #F59E0B, #E63946); }
.eval-timer-wrap.urgent .eval-timer-num { color: #E63946; }

/* ── 7. Options immersives ── */
@keyframes optIn {
  from { opacity: 0; transform: translateX(-10px); }
  to   { opacity: 1; transform: translateX(0); }
}
.eval-opts-immersive {
  display: flex; flex-direction: column; gap: .5rem;
}
.eval-opts-immersive--scale {
  flex-direction: row; gap: .45rem;
}

.eval-opt-immersive {
  display: flex; align-items: center;
  padding: .75rem 1rem;
  border: 1.5px solid #D8DDD9;
  border-radius: 10px;
  background: #FFFFFF;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .875rem; font-weight: 500; color: #374151;
  cursor: pointer; text-align: left;
  transition:
    border-color 160ms ease,
    background   160ms ease,
    color        160ms ease,
    transform    180ms cubic-bezier(.34,1.56,.64,1),
    box-shadow   160ms ease;
  opacity: 0;
  animation: optIn .3s ease forwards;
  user-select: none;
  line-height: 1.4;
}
.eval-opt-immersive:hover {
  border-color: #2D6A4F;
  background: rgba(45,106,79,.05);
  color: #1B4332;
  transform: translateX(3px);
  box-shadow: 0 2px 10px rgba(45,106,79,.10);
}
.eval-opt-immersive:focus-visible {
  outline: 2.5px solid #52B788; outline-offset: 2px;
}

/* Sélectionné */
.eval-opt-immersive.eval-opt-selected {
  border-color: #2D6A4F;
  background: #2D6A4F;
  color: #FFFFFF; font-weight: 700;
  transform: translateX(3px);
  box-shadow: 0 3px 12px rgba(45,106,79,.28);
}
.eval-opt-immersive.eval-opt-selected:hover {
  background: #1B4332; border-color: #1B4332;
}

/* Feedback score positif */
.eval-opt-immersive.eval-opt-positive {
  color: #1B4332;
}
.eval-opt-immersive.eval-opt-positive.eval-opt-selected {
  background: #2D6A4F; color: #fff;
}
/* Score zéro */
.eval-opt-immersive.eval-opt-zero.eval-opt-selected {
  background: #6b7280; border-color: #6b7280; color: #fff;
}

/* Scale (F/S/B) — côte à côte */
.eval-opts-immersive--scale .eval-opt-immersive {
  flex: 1; justify-content: center; text-align: center;
  padding: .65rem .5rem; font-size: .82rem;
}
.eval-opts-immersive--scale .eval-opt-immersive:hover { transform: translateY(-2px) translateX(0); }
.eval-opts-immersive--scale .eval-opt-immersive.eval-opt-selected { transform: translateY(-2px); }

/* Couleurs sémantiques scale */
.eval-opts-immersive--scale .eval-opt-immersive:nth-child(1).eval-opt-selected {
  background: #DC2626; border-color: #DC2626;
  box-shadow: 0 3px 12px rgba(220,38,38,.25);
}
.eval-opts-immersive--scale .eval-opt-immersive:nth-child(2).eval-opt-selected {
  background: #D97706; border-color: #D97706; color: #fff;
  box-shadow: 0 3px 12px rgba(217,119,6,.25);
}
.eval-opts-immersive--scale .eval-opt-immersive:nth-child(3).eval-opt-selected {
  background: #2D6A4F; border-color: #2D6A4F;
}

/* ── 8. Navigation ── */
.eval-q-nav {
  display: flex; align-items: center; justify-content: flex-end;
  gap: .6rem; margin-top: .4rem;
}
.eval-nav-btn {
  display: inline-flex; align-items: center; gap: .4rem;
  padding: .6rem 1.4rem;
  border-radius: 999px;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .875rem; font-weight: 700;
  cursor: pointer;
  transition: background 160ms ease, transform 180ms ease, opacity 200ms ease;
}
.eval-nav-prev {
  background: transparent; border: 1.5px solid #D1D9D3; color: #6b7280;
}
.eval-nav-prev:hover { background: #F4F6F4; color: #374151; }
.eval-nav-next {
  background: #2D6A4F; border: none; color: #fff;
  box-shadow: 0 3px 12px rgba(45,106,79,.25);
}
.eval-nav-next:hover:not(:disabled) {
  background: #1B4332; transform: translateY(-1px);
  box-shadow: 0 5px 16px rgba(45,106,79,.32);
}
.eval-nav-next--disabled, .eval-nav-next:disabled {
  opacity: .38; cursor: not-allowed;
  box-shadow: none; transform: none !important;
}

/* ── 9. Écran de résultats ── */
@keyframes resultsIn {
  from { opacity: 0; transform: translateY(22px); }
  to   { opacity: 1; transform: translateY(0); }
}
.eval-results {
  margin-top: 1rem; opacity: 0;
  display: flex; flex-direction: column; gap: 1.2rem;
}
.eval-results.eval-results--in {
  animation: resultsIn .5s cubic-bezier(.4,0,.2,1) forwards;
}

.eval-results-header {
  display: flex; align-items: center; gap: 1.4rem;
  background: rgba(45,106,79,.04);
  border: 1px solid rgba(45,106,79,.12);
  border-radius: 16px;
  padding: 1.5rem 1.4rem;
}
.eval-score-ring-wrap {
  position: relative; flex-shrink: 0;
  display: inline-flex; align-items: center; justify-content: center;
}
.eval-score-center {
  position: absolute; display: flex; align-items: baseline;
  gap: .05rem;
}
.eval-score-num {
  font-size: 1.9rem; font-weight: 800; color: #1B4332; line-height: 1;
}
.eval-score-unit { font-size: .85rem; font-weight: 700; color: #6b7280; }

.eval-results-meta {
  display: flex; flex-direction: column; gap: .55rem;
}
.eval-mention {
  font-size: 1.05rem; font-weight: 800; color: #1C2016; margin: 0;
  line-height: 1.3;
}
.eval-hours-badge {
  display: inline-flex; align-items: center;
  font-size: .84rem; color: #2D6A4F; font-weight: 500;
  background: rgba(45,106,79,.08); border: 1px solid rgba(45,106,79,.15);
  border-radius: 8px; padding: .45rem .85rem;
  line-height: 1.35;
}
.eval-hours-badge strong { color: #1B4332; font-weight: 800; }
.eval-score-detail { font-size: .77rem; color: #9ca3af; margin: 0; }
.eval-score-detail strong { color: #4A5240; }

/* Barres sections */
.eval-section-bars {
  background: #fff; border: 1px solid #E8EDE9;
  border-radius: 12px; padding: 1rem 1.1rem;
}
.eval-bars-title {
  font-size: .72rem; font-weight: 800; color: #2D6A4F;
  text-transform: uppercase; letter-spacing: .08em;
  margin: 0 0 .8rem;
}
.eval-section-bar {
  display: flex; align-items: center; gap: .6rem;
  margin-bottom: .5rem; font-size: .79rem;
}
.eval-section-bar:last-child { margin-bottom: 0; }
.eval-sbar-label {
  width: 155px; flex-shrink: 0; color: #374151;
  font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.eval-sbar-track {
  flex: 1; height: 5px; background: #E5E9E6;
  border-radius: 99px; overflow: hidden;
}
.eval-sbar-fill { height: 100%; border-radius: 99px; }
.eval-sbar-pct { width: 32px; text-align: right; color: #6b7280; font-weight: 700; font-size: .75rem; }

/* Actions résultats */
.eval-results-actions {
  display: flex; flex-direction: column; gap: .6rem;
  align-items: stretch;
}
.eval-results-actions .btn-primary { justify-content: center; width: 100%; }
.eval-btn-ghost-light {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  background: transparent; border: 1.5px solid #D1D9D3; color: #6b7280;
  border-radius: 999px; padding: .75em 1.75em;
  font-family: 'Outfit', system-ui, sans-serif;
  font-size: .95rem; font-weight: 600; cursor: pointer;
  transition: background 160ms ease, border-color 160ms ease, color 160ms ease;
}
.eval-btn-ghost-light:hover {
  background: rgba(45,106,79,.06);
  border-color: #2D6A4F; color: #1B4332;
}

/* ── Wrapper éval ── */
.modal-panel-wrapper--eval {
  max-width: 620px;
  width: 95vw;
}
.modal-panel-wrapper--eval .modal-panel-eval {
  animation: none; /* L'animation est sur le wrapper */
}

/* ── Bouton fermer (override pour fond blanc) ── */
.modal-close--eval {
  background: rgba(0,0,0,.06);
  border-color: rgba(0,0,0,.09);
  color: #4A5240;
}
.modal-close--eval:hover { background: rgba(0,0,0,.12); color: #1C2016; }

/* ── Bouton fermer (override blanc) ── (legacy — gardé pour compatibilité) */
.modal-panel-eval .modal-close {
  background: rgba(0,0,0,.06); border-color: rgba(0,0,0,.09);
  color: #4A5240;
}
.modal-panel-eval .modal-close:hover { background: rgba(0,0,0,.12); color: #1C2016; }

/* ── Responsive ── */
@media (max-width: 520px) {
  .eval-body            { padding: 0 .85rem 1.5rem; }
  .eval-modal-header    { padding: 1.1rem .85rem .9rem; }
  .eval-prog-wrap       { top: 78px; }
  .eval-q-card          { padding: 1.1rem .9rem 1rem; }
  .eval-sbar-label      { width: 110px; }
  .eval-results-header  { flex-direction: column; text-align: center; }
  .eval-results-meta    { align-items: center; }
  .eval-opts-immersive--scale .eval-opt-immersive { font-size: .74rem; padding: .55rem .35rem; }
}

/* ── Correctif responsive : Mobile S (~320px) ──────────────
   Bug : sur les très petits écrans, le bouton "Commencer
   l'évaluation →" (et ses variantes "Suivant →", "Voir mes
   résultats →" — toutes réutilisent .eval-nav-btn) débordait
   du panneau car .btn-primary applique white-space:nowrap
   à un texte trop long pour la largeur restante. Le wrapper
   à 95vw grignotait en plus le padding latéral de la modal.
   On scope les correctifs à #evaluation-modal pour ne pas
   affecter les autres modals du site (form-modal, license-modal). */
@media (max-width: 400px) {
  #evaluation-modal { padding: .6rem; }
  #evaluation-modal .modal-panel-wrapper--eval { width: 100%; max-width: 100%; }

  #evaluation-modal .eval-modal-header { padding: .9rem .65rem .75rem; }
  #evaluation-modal .eval-modal-header .step-title { font-size: 1.05rem; }
  #evaluation-modal .eval-modal-header .step-desc  { font-size: .76rem; }

  #evaluation-modal .eval-body { padding: 0 .6rem 1.2rem; }
  #evaluation-modal .eval-q-card { padding: .9rem .65rem .85rem; }
  #evaluation-modal .eval-prog-wrap { top: 68px; }

  #evaluation-modal .eval-q-nav {
    flex-direction: column;
    align-items: stretch;
  }
  #evaluation-modal .eval-nav-btn {
    width: 100%;
    justify-content: center;
    text-align: center;
    white-space: normal;
    line-height: 1.3;
    font-size: .85rem;
    padding: .75em .8em;
  }

  #evaluation-modal .eval-opts-immersive--scale { gap: .3rem; }
  #evaluation-modal .eval-opts-immersive--scale .eval-opt-immersive {
    font-size: .68rem;
    padding: .5rem .2rem;
  }

  #evaluation-modal .eval-sbar-label { width: 84px; font-size: .72rem; }
  #evaluation-modal .eval-info-form  { gap: .65rem; }
}


/* =======================================================================
   SIMULATEUR IMMERSIF v2 — Styles
   ======================================================================= */

/* ── Header modal simulateur ── */
.simulator-modal-header {
  display: flex; align-items: center; gap: 1rem;
  padding: .85rem 1.4rem;
  border-bottom: 1px solid rgba(45,106,79,.18);
  flex-shrink: 0;
  background: rgba(5,10,6,.85);
  backdrop-filter: blur(10px);
}
.sim-header-left  { display: flex; align-items: center; gap: .7rem; flex-shrink: 0; }
.sim-header-badge { font-size: 1.3rem; line-height: 1; }
.sim-header-info  { display: flex; flex-direction: column; gap: .05rem; }
.simulator-modal-title { font-size: .9rem; font-weight: 700; color: #fff; display: block; }
.sim-header-sub   { font-size: .72rem; color: var(--green-light); opacity: .8; display: block; }
.sim-header-center { flex: 1; display: flex; align-items: center; justify-content: center; }

/* ── Barre progression simulateur ── */
.sim-prog-wrap  { display: flex; align-items: center; gap: .6rem; width: 100%; max-width: 240px; }
.sim-prog-track { flex: 1; height: 5px; background: rgba(255,255,255,.1); border-radius: 99px; overflow: hidden; }
.sim-prog-fill  { height: 100%; background: linear-gradient(90deg, #2D6A4F 0%, #52B788 100%); border-radius: 99px; width: 0%; transition: width .5s cubic-bezier(.4,0,.2,1); }
.sim-prog-label { font-size: .72rem; font-weight: 700; color: #52B788; white-space: nowrap; min-width: 40px; text-align: right; }

/* ── Bandeau contexte ── */
.sim-context-bar { background: rgba(5,10,7,.9); border-bottom: 1px solid rgba(45,106,79,.2); padding: .55rem 1.4rem; display: flex; align-items: center; min-height: 36px; }
.sim-context-text { font-size: .8rem; font-weight: 700; color: #52B788; letter-spacing: .04em; text-transform: uppercase; }
@keyframes ctxFlash { from { opacity: 0; transform: translateX(-6px); } to { opacity: 1; transform: translateX(0); } }
.sim-context-text.ctx-flash { animation: ctxFlash .35s var(--ease) forwards; }

/* ── Timer simulateur ── */
.sim-timer-wrap { position: absolute; top: 1rem; right: 1rem; z-index: 12; display: none; flex-direction: column; align-items: center; gap: .25rem; pointer-events: none; }
.sim-timer-wrap.visible { display: flex; }
.sim-timer-ring { width: 36px; height: 36px; }
.sim-timer-num  { position: absolute; top: 50%; left: 50%; transform: translate(-50%,-55%); font-size: .72rem; font-weight: 800; color: rgba(255,255,255,.85); font-variant-numeric: tabular-nums; }
.sim-timer-bar-wrap { width: 60px; height: 4px; background: rgba(255,255,255,.12); border-radius: 99px; overflow: hidden; margin-top: .1rem; }
.sim-timer-bar  { height: 100%; width: 100%; background: linear-gradient(to right, #52B788, #2D6A4F); border-radius: 99px; }
.sim-timer-wrap.urgent .sim-timer-bar { background: linear-gradient(to right, #F59E0B, #E63946); }
.sim-timer-wrap.urgent .sim-timer-num { color: #E63946; }

/* ── Réponses élève ── */
.student-replies { position: absolute; bottom: 88px; right: 1.2rem; z-index: 10; max-width: 320px; display: flex; flex-direction: column; align-items: flex-end; gap: .5rem; pointer-events: all; }
.reply-option {
  background: rgba(10,20,14,.88); border: 1.5px solid rgba(82,183,136,.35);
  color: rgba(255,255,255,.92); border-radius: 16px 4px 16px 16px;
  padding: .65em 1.1em;
  font-family: var(--font-ui); font-size: .84rem; font-weight: 600; text-align: right;
  cursor: pointer; opacity: 0; transform: translateX(16px);
  animation: replyAppear .32s var(--ease) forwards;
  transition: background 150ms ease, border-color 150ms ease, transform 200ms var(--ease-spring), box-shadow 150ms ease;
  backdrop-filter: blur(8px); box-shadow: 0 4px 14px rgba(0,0,0,.35);
  max-width: 100%; word-break: break-word; white-space: normal; line-height: 1.4;
}
.reply-option:hover { background: rgba(45,106,79,.45); border-color: rgba(82,183,136,.7); transform: translateX(-5px) !important; box-shadow: 0 6px 20px rgba(45,106,79,.3); }
.reply-option.reply-answered { opacity: .45 !important; pointer-events: none; transform: none !important; }
@keyframes replyAppear { to { opacity: 1; transform: translateX(0); } }
.reply-timeout { font-size: .8rem; color: rgba(245,158,11,.85); font-weight: 600; text-align: right; padding: .4rem 0; animation: replyAppear .3s ease forwards; }

/* ── Pop score animé ── */
.score-pop { position: absolute; font-size: 1.1rem; font-weight: 800; pointer-events: none; z-index: 20; animation: scorePop .9s ease forwards; text-shadow: 0 2px 8px rgba(0,0,0,.5); }
.score-pop-good { color: #52B788; }
.score-pop-bad  { color: #E63946; }
@keyframes scorePop { 0% { opacity: 1; transform: translateY(0) scale(1); } 60% { opacity: 1; transform: translateY(-28px) scale(1.15); } 100% { opacity: 0; transform: translateY(-48px) scale(.9); } }

/* ── Moniteur ── */
.monitor-role { font-size: .68rem; color: var(--green-light); font-weight: 600; letter-spacing: .05em; opacity: .85; }

/* ── Responsive simulateur ── */
@media (max-width: 680px) {
  .sim-header-center  { display: none; }
  .sim-context-bar    { padding: .45rem 1rem; }
  .student-replies    { max-width: 260px; right: .8rem; bottom: 78px; }
  .reply-option       { font-size: .78rem; padding: .55em .9em; }
  .sim-timer-wrap     { top: .7rem; right: .7rem; }
}
@media (max-width: 480px) {
  .sim-header-badge   { display: none; }
  .student-replies    { max-width: 220px; }
}

/* ══════════════════════════════════════════════════════════
   EVALUATION MODAL — CSS MANQUANT (correction bug)
   Sans ce bloc, #evaluation-modal n'avait aucune mise en
   page → la modal était invisible même quand hidden=false
   ══════════════════════════════════════════════════════════ */

#evaluation-modal {
  position: fixed;
  inset: 0;
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  /* Transition d'entrée via data-open */
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
#evaluation-modal[data-open] {
  opacity: 1;
  pointer-events: auto;
}
#evaluation-modal[hidden] { display: none !important; }

/* Backdrop éval */
#eval-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(5, 15, 8, .82);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Panel éval — override de .modal-panel-eval pour centrage correct */
#evaluation-modal .modal-panel-eval {
  position: relative;
  z-index: 2;
  transform: translateY(24px) scale(.97);
  transition: transform .3s cubic-bezier(.34,1.4,.64,1), opacity .25s ease;
  opacity: 0;
}
#evaluation-modal[data-open] .modal-panel-eval {
  transform: translateY(0) scale(1);
  opacity: 1;
}

/* Prog bar éval */
.eval-prog-wrap {
  display: flex;
  align-items: center;
  gap: .75rem;
  margin-bottom: 1.2rem;
}
.eval-prog-outer {
  flex: 1;
  height: 6px;
  background: rgba(45,106,79,.12);
  border-radius: 99px;
  overflow: hidden;
}
.eval-prog-fill {
  height: 100%;
  background: linear-gradient(to right, #2D6A4F, #52B788);
  border-radius: 99px;
  transition: width .4s cubic-bezier(.4,0,.2,1);
}
.eval-prog-label {
  font-size: .75rem;
  font-weight: 700;
  color: #2D6A4F;
  white-space: nowrap;
  min-width: 3ch;
}

/* Section badge */
.eval-q-section-badge {
  display: flex;
  align-items: center;
  gap: .5rem;
  margin-bottom: .75rem;
}
.eval-q-section-icon { font-size: 1.1rem; }
.eval-q-section-name {
  font-size: .75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .08em;
  color: #2D6A4F;
}
.eval-q-counter {
  margin-left: auto;
  font-size: .72rem;
  color: #9ca3af;
  font-weight: 600;
}

/* Context line */
.eval-q-context {
  font-size: .78rem;
  color: #6b7280;
  font-style: italic;
  margin: 0 0 .6rem;
  padding-left: .75rem;
  border-left: 2px solid rgba(45,106,79,.3);
}

/* Question title */
.eval-q-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #1C2016;
  margin: 0 0 1rem;
  line-height: 1.4;
}
.eval-required { color: #E63946; font-size: .85em; }

/* Hint multi */
.eval-q-hint {
  font-size: .75rem;
  color: #9ca3af;
  margin: .5rem 0 0;
  font-style: italic;
}

/* Nav buttons */
.eval-q-nav {
  display: flex;
  gap: .75rem;
  margin-top: 1.2rem;
  justify-content: flex-end;
}
.eval-nav-btn {
  padding: .65rem 1.4rem;
  border-radius: var(--radius-lg, 12px);
  font-size: .88rem;
  font-weight: 700;
  cursor: pointer;
  border: none;
  transition: all .2s ease;
}
.eval-nav-prev {
  background: transparent;
  color: #6b7280;
  border: 1.5px solid #e5e7eb;
}
.eval-nav-prev:hover { background: #f3f4f6; color: #1C2016; }
.eval-nav-next {
  background: #2D6A4F;
  color: #fff;
}
.eval-nav-next:hover:not(:disabled) { background: #1B4332; transform: translateX(2px); }
.eval-nav-next--disabled,
.eval-nav-next:disabled {
  opacity: .45;
  cursor: not-allowed;
  transform: none;
}

/* Score ring center */
.eval-score-ring-wrap {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.eval-score-center {
  position: absolute;
  display: flex;
  align-items: baseline;
  gap: 1px;
}
.eval-score-num {
  font-size: 2.1rem;
  font-weight: 900;
  color: #1C2016;
  line-height: 1;
}
.eval-score-unit {
  font-size: 1rem;
  font-weight: 700;
  color: #6b7280;
}

/* Hours badge */
.eval-hours-badge {
  display: inline-flex;
  align-items: center;
  gap: .4rem;
  background: rgba(45,106,79,.1);
  color: #2D6A4F;
  padding: .4rem .9rem;
  border-radius: 99px;
  font-size: .82rem;
  font-weight: 600;
  margin: .5rem 0;
}

/* Section bar fill */
.eval-sbar-track {
  flex: 1;
  height: 8px;
  background: rgba(0,0,0,.07);
  border-radius: 99px;
  overflow: hidden;
}
.eval-sbar-fill {
  height: 100%;
  border-radius: 99px;
  width: 0%;
}
.eval-sbar-label {
  font-size: .78rem;
  font-weight: 600;
  color: #374151;
  min-width: 160px;
}
.eval-sbar-pct {
  font-size: .75rem;
  font-weight: 700;
  color: #6b7280;
  min-width: 2.5ch;
  text-align: right;
}
.eval-bars-title {
  font-size: .8rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: #9ca3af;
  margin: 0 0 .75rem;
}
.eval-score-detail { font-size: .83rem; color: #6b7280; margin: .25rem 0 0; }
.eval-mention { font-size: 1.2rem; font-weight: 800; color: #1C2016; margin: 0 0 .4rem; }

/* Ghost button light variant */
.eval-btn-ghost-light {
  background: transparent;
  border: 1.5px solid #d1d5db;
  color: #374151;
  justify-content: center;
  width: 100%;
  margin-top: .5rem;
}
.eval-btn-ghost-light:hover { background: #f9fafb; border-color: #9ca3af; }

/* Eval body padding */
.eval-body { padding: 1.4rem 1.8rem 1.8rem; }
@media (max-width: 480px) {
  .eval-body { padding: 1rem 1rem 1.4rem; }
  .eval-q-title { font-size: .95rem; }
  .eval-opts-immersive--scale .eval-opt-immersive { font-size: .72rem; padding: .5rem .3rem; }
}

/* ─────────────────────────────────────────────────────
   15. MODULE PIÉTONS — pedestrianLesson.js
───────────────────────────────────────────────────── */

/* ── Bouton toggle "Piétons" dans le header du simulateur ── */
.btn-ped-toggle {
  background: rgba(45, 106, 79, .12);
  border: 1.5px solid rgba(82, 183, 136, .28);
  color: var(--green-lighter, #95D5B2);
  font: 600 12px/1 'Outfit', sans-serif;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  transition: background .2s, border-color .2s, color .2s;
  white-space: nowrap;
  letter-spacing: .02em;
}
.btn-ped-toggle:hover {
  background: rgba(45, 106, 79, .22);
  border-color: var(--green-light, #52B788);
  color: #fff;
}
.btn-ped-toggle.ped-toggle-active {
  background: var(--green, #2D6A4F);
  border-color: var(--green, #2D6A4F);
  color: #fff;
  box-shadow: 0 0 12px rgba(45, 106, 79, .35);
}

/* ── Panneau scènes piétons — injecté après .simulator-modal-body ── */
#ped-scene-panel {
  border-top: 1px solid rgba(82, 183, 136, .14);
  background: rgba(8, 13, 10, .97);
  animation: ped-panel-in .25s ease;
}
@keyframes ped-panel-in {
  from { opacity: 0; transform: translateY(6px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* Boutons de scène */
.ped-scene-btn:hover {
  filter: brightness(1.22);
}

/* ── HUD moniteur piétons (superposé au canvas) ── */
#ped-hud {
  /* display est géré par JS (flex / none) */
  animation: ped-hud-in .22s ease;
}
@keyframes ped-hud-in {
  from { opacity: 0; transform: translateX(-50%) translateY(8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

#ped-monitor-msg {
  font-family: 'Outfit', sans-serif;
}

/* ── Barre de progression scène ── */
#ped-progress-bar {
  margin-top: 2px;
}

/* ── Responsive ── */
@media (max-width: 600px) {
  .btn-ped-toggle {
    padding: 6px 10px;
    font-size: 11px;
  }
  #ped-scene-panel {
    padding: 10px 12px;
  }
  #ped-hud {
    bottom: 70px;
    width: min(98%, 400px);
  }
}

/* =======================================================================
   SIMULATEUR — ÉCRAN D'INTRO ET ÉCRAN DE FIN
   ======================================================================= */

/* ── Écran d'introduction ── */
#sim-intro-screen,
#sim-end-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 480px;
  padding: 2rem 1.5rem;
  background: var(--surface-dark);
  animation: simScreenIn .35s cubic-bezier(.34,1.3,.64,1);
}
@keyframes simScreenIn {
  from { opacity: 0; transform: scale(.95) translateY(12px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}

.sim-intro-inner,
.sim-end-inner {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  max-width: 480px;
  width: 100%;
  gap: 1rem;
}

/* ── Badge emoji central ── */
.sim-intro-badge,
.sim-end-icon {
  font-size: 3.2rem;
  line-height: 1;
  filter: drop-shadow(0 0 18px rgba(82,183,136,.35));
  animation: simBadgePop .5s cubic-bezier(.34,1.56,.64,1);
}
@keyframes simBadgePop {
  from { transform: scale(0) rotate(-15deg); }
  to   { transform: scale(1) rotate(0deg); }
}

/* ── Titres ── */
.sim-intro-title,
.sim-end-title {
  font-family: var(--font-ui);
  font-size: 1.7rem;
  font-weight: 900;
  color: #fff;
  letter-spacing: -.02em;
  line-height: 1.15;
}
.sim-intro-sub,
.sim-end-sub {
  font-size: .88rem;
  color: var(--green-light);
  font-weight: 600;
  letter-spacing: .04em;
  opacity: .9;
  margin-top: -.4rem;
}

/* ── Liste des features (intro) ── */
.sim-intro-features {
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: .55rem;
  width: 100%;
  background: rgba(45,106,79,.08);
  border: 1px solid rgba(45,106,79,.2);
  border-radius: var(--radius-md);
  padding: 1rem 1.2rem;
  margin: .2rem 0;
}
.sim-intro-features li {
  font-size: .88rem;
  color: rgba(255,255,255,.82);
  text-align: left;
  line-height: 1.4;
}

/* ── Score max preview (intro) ── */
.sim-intro-score-preview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  background: rgba(0,0,0,.3);
  border: 1px solid rgba(45,106,79,.25);
  border-radius: var(--radius-sm);
  padding: .65rem 1.1rem;
}
.sim-intro-score-label {
  font-size: .8rem;
  color: rgba(255,255,255,.5);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .06em;
}
.sim-intro-score-val {
  font-size: 1.2rem;
  font-weight: 900;
  color: var(--green-light);
  font-variant-numeric: tabular-nums;
}

/* ── Bouton démarrer ── */
.sim-intro-start-btn {
  width: 100%;
  justify-content: center;
  font-size: 1.05rem;
  padding: .9em 2em;
  background: var(--green);
  box-shadow: 0 6px 24px rgba(45,106,79,.35);
}
.sim-intro-start-btn:hover {
  background: var(--green-dark);
  box-shadow: 0 8px 32px rgba(45,106,79,.45);
}

/* ── Hint texte (intro) ── */
.sim-intro-hint {
  font-size: .78rem;
  color: rgba(255,255,255,.3);
  letter-spacing: .03em;
}

/* ── Anneau score (fin) ── */
.sim-end-score-ring {
  position: relative;
  width: 120px;
  height: 120px;
  flex-shrink: 0;
  margin: .5rem auto;
}
.sim-end-score-ring svg {
  width: 120px;
  height: 120px;
}
.sim-end-score-inner {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  line-height: 1;
}
.sim-end-score-num {
  font-size: 2rem;
  font-weight: 900;
  color: #fff;
  font-variant-numeric: tabular-nums;
}
.sim-end-score-max {
  font-size: .72rem;
  color: rgba(255,255,255,.4);
  font-weight: 600;
}
.sim-end-pct {
  font-size: 1rem;
  font-weight: 800;
  margin-top: -.3rem;
}
.sim-end-advice {
  font-size: .86rem;
  color: rgba(255,255,255,.65);
  line-height: 1.55;
  max-width: 360px;
}

/* ── Actions finales ── */
.sim-end-actions {
  display: flex;
  gap: .8rem;
  flex-wrap: wrap;
  justify-content: center;
  width: 100%;
  margin-top: .3rem;
}
.sim-end-actions .btn-primary {
  flex: 1;
  min-width: 180px;
  justify-content: center;
  background: var(--green);
  box-shadow: 0 4px 18px rgba(45,106,79,.3);
}
.sim-end-actions .btn-ghost {
  flex: 0 0 auto;
  font-size: .88rem;
  padding: .7em 1.4em;
}

/* ── Responsive ── */
@media (max-width: 480px) {
  #sim-intro-screen,
  #sim-end-screen {
    min-height: 400px;
    padding: 1.5rem 1rem;
  }
  .sim-intro-title,
  .sim-end-title { font-size: 1.35rem; }
  .sim-end-actions { flex-direction: column; }
  .sim-end-actions .btn-primary,
  .sim-end-actions .btn-ghost { width: 100%; justify-content: center; }
}

/* ─────────────────────────────────────────────────────
   SECTION NOS MONITEURS
───────────────────────────────────────────────────── */
#instructors {
  padding: var(--section-padding);
  background: var(--surface-dark2);
  position: relative;
  overflow: hidden;
}
/* [Fix] Section sur fond sombre : le titre héritait de --text-primary
   (brun foncé), quasi invisible sur ce fond. Forcé en blanc, comme les
   autres sections sombres (LSF, reviews, simulator). */
#instructors .section-title { color: white; }
#instructors::before {
  content: '';
  position: absolute;
  inset: 0;
  background: var(--grad-diag);
  pointer-events: none;
}

.instructors-grid {
  max-width: 100%;
  display: flex;
  overflow-x: auto;
  overflow-y: hidden;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: thin;
  scrollbar-color: rgba(82, 183, 136, 0.4) transparent;
  margin: 0 auto 3rem;
  gap: 1.8rem;
  padding: 2rem max(1rem, calc((100vw - var(--container-max)) / 2)) 2.5rem;
  box-sizing: border-box;
}
.instructors-grid::-webkit-scrollbar { height: 8px; }
.instructors-grid::-webkit-scrollbar-thumb {
  background: rgba(82,183,136,.4);
  border-radius: 20px;
}
.instructors-grid::-webkit-scrollbar-track { background: transparent; }

.instructor-card {
  background: rgba(255,255,255,.04);
  border: 1px solid rgba(255,255,255,.08);
  border-radius: var(--radius-lg);
  padding: 2.4rem 2.2rem 2.6rem;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
  transition: transform var(--duration-normal) var(--ease),
              border-color var(--duration-normal) var(--ease),
              box-shadow var(--duration-normal) var(--ease);
  position: relative;
  overflow: hidden;
  flex: 0 0 min(380px, 82vw);
  scroll-snap-align: start;
}
.instructor-card::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(135deg, rgba(45,106,79,.10) 0%, transparent 60%);
  opacity: 0;
  transition: opacity var(--duration-normal) var(--ease);
}
.instructor-card:hover {
  transform: translateY(-6px);
  border-color: rgba(82,183,136,.30);
  box-shadow: 0 20px 50px rgba(0,0,0,.30);
}
.instructor-card:hover::before { opacity: 1; }

.instructor-avatar-wrap {
  position: relative;
  width: 92px;
}
.instructor-avatar {
  width: 92px;
  height: 92px;
  border-radius: 50%;
  background: var(--green-ghost);
  border: 2px solid rgba(82,183,136,.25);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  transition: border-color var(--duration-normal) var(--ease);
}
.instructor-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}
.instructor-card:hover .instructor-avatar {
  border-color: var(--green-light);
}
.instructor-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background: var(--green-dark);
  border: 1.5px solid var(--green-light);
  border-radius: 20px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--green-lighter);
  padding: .2em .6em;
  letter-spacing: .02em;
  white-space: nowrap;
}

.instructor-info { display: flex; flex-direction: column; gap: .5rem; flex: 1; }

.instructor-name {
  font-family: var(--font-ui);
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--text-white);
  margin: 0;
}
.instructor-title {
  font-size: .9rem;
  font-weight: 600;
  color: var(--green-lighter);
  text-transform: uppercase;
  letter-spacing: .07em;
  margin: 0;
}
.instructor-bio {
  font-size: .98rem;
  color: var(--text-white-dim);
  line-height: 1.65;
  margin: .3rem 0 0;
}
.instructor-tags {
  list-style: none;
  padding: 0;
  margin: .5rem 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: .4rem;
}
.instructor-tags li {
  font-size: .76rem;
  font-weight: 600;
  color: var(--green-lighter);
  background: rgba(45,106,79,.18);
  border: 1px solid rgba(82,183,136,.20);
  border-radius: 20px;
  padding: .25em .75em;
}

.instructors-cta {
  max-width: var(--container-max);
  margin: 0 auto;
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1.2rem;
}
.instructors-cta p {
  font-size: 1rem;
  color: var(--text-white-dim);
}

@media (max-width: 720px) {
  .instructors-grid {
    padding-left: 5vw;
    padding-right: 5vw;
    gap: 1.2rem;
  }
  .instructor-card {
    flex: 0 0 86vw;
    padding: 2rem 1.6rem 2.2rem;
  }
}
@media (max-width: 480px) {
  .instructor-card {
    flex: 0 0 88vw;
  }
}
/* ─────────────────────────────────────────────────────
   ÉVALUATION — Formulaire de renseignements personnels
───────────────────────────────────────────────────── */
.eval-info-form {
  display: flex;
  flex-direction: column;
  gap: .85rem;
  margin: 1rem 0 .5rem;
}

.eval-info-group {
  display: flex;
  flex-direction: column;
  gap: .3rem;
}

.eval-info-label {
  font-size: .82rem;
  font-weight: 600;
  color: #4A5240;
  letter-spacing: .02em;
  text-transform: uppercase;
}

.eval-info-input {
  width: 100%;
  box-sizing: border-box;
  padding: .7rem 1rem;
  border: 1.5px solid #C8D8C6;
  border-radius: 10px;
  font-family: inherit;
  font-size: .95rem;
  color: #1B3A2D;
  background: #FAFFFE;
  transition: border-color .2s, box-shadow .2s;
  outline: none;
}

.eval-info-input:focus {
  border-color: #2D6A4F;
  box-shadow: 0 0 0 3px rgba(45, 106, 79, .15);
}

.eval-info-input--error {
  border-color: #E63946 !important;
  box-shadow: 0 0 0 3px rgba(230, 57, 70, .12) !important;
}

.eval-info-error {
  font-size: .85rem;
  color: #E63946;
  font-weight: 600;
  margin: .2rem 0 0;
  padding: .5rem .8rem;
  background: rgba(230, 57, 70, .06);
  border-radius: 8px;
  border-left: 3px solid #E63946;
}

@media (max-width: 480px) {
  .eval-info-input {
    font-size: 1rem; /* évite le zoom iOS sur focus */
  }
}

/* ─────────────────────────────────────────────────────
   ÉVALUATION — Conseil résultats
   (Extrait du style.cssText inline dans Evaluation.js)
───────────────────────────────────────────────────── */
.eval-advice {
  font-size: .9rem;
  color: #4A5240;
  line-height: 1.6;
  margin: 0;
  padding: .9rem 1.1rem;
  background: rgba(45, 106, 79, .05);
  border-left: 3px solid #52B788;
  border-radius: 0 10px 10px 0;
}


/* ─────────────────────────────────────────────────────
   ÉVALUATION — Salutation résultats
   (Extrait du style.cssText inline dans Evaluation.js)
───────────────────────────────────────────────────── */
.eval-greeting {
  font-size: 1rem;
  font-weight: 600;
  color: #2D6A4F;
  margin: 0 0 .8rem;
  text-align: center;
}