/* ==========================================================================
   PERMIS GLORY — auto-école · 129 rue du Docteur Bauer · 93400 Saint-Ouen
   Feuille de style UNIQUE, partagée par toutes les pages.
   Écrite le 16/08/2026. Aucun framework, aucune dépendance.

   SOMMAIRE
   00 · Tokens (:root)
   01 · Reset & base
   02 · Accessibilité (skip-link, sr-only, focus visible)
   03 · Grain de nuit (texture SVG, 0 requête)
   04 · Primitives de mise en page (.wrap .pad .section-head .kicker .filet)
   05 · Boutons
   06 · Topbar
   07 · Nav sticky + burger + menu mobile
   08 · Bandeau d'état (ouverture prochaine)
   09 · Hero
   10 · Marquee
   11 · MOTEUR DE CARROUSEL (générique, réutilisable)
   12 · Cartes tarifs
   13 · Cartes formations
   14 · Section véhicule (la Clio)
   15 · Section local (carrousel photo)
   16 · Frise « comment ça se passe »
   17 · FAQ (accordéon)
   18 · Notes réglementaires (.note)
   19 · Bandeau CTA
   20 · Footer
   21 · Barre d'appel mobile (sticky)
   22 · Formulaires (utilisé par contact.html)
   23 · Reveal au scroll
   24 · Impression
   ========================================================================== */


/* ==========================================================================
   00 · TOKENS
   Charte : NOIR #010103 / #0A0A0C + OR DE MARQUE #D4AF37 + BLANC #FFFFFF.
   Le vert n'existe QUE pour les états de succès. Aucune autre couleur.
   ========================================================================== */
:root{
  color-scheme: dark;

  /* — Noirs — */
  --ink:      #010103;   /* le plus profond : topbar, aplats de rupture */
  --night:    #0A0A0C;   /* fond de page */
  --coal:     #101014;   /* fond de carte */
  --coal-2:   #16161B;   /* carte mise en avant / survol */

  /* — Or de marque : l'or métallique du BOUCLIER (logo retenu par le client, 30/08/2026).
     Remplace le jaune #FCBC03 de la V1, qui venait d'une piste non retenue. — */
  --gold:     #D4AF37;
  --gold-ink: #0A0A0C;   /* texte posé SUR un aplat or */
  --gold-05:  rgba(212,175,55,.05);
  --gold-10:  rgba(212,175,55,.10);
  --gold-18:  rgba(212,175,55,.18);
  --gold-35:  rgba(212,175,55,.35);

  /* — Or MÉTALLIQUE : pour les grands aplats seulement (bandeau, bande d'appel,
     boutons). Un or plat en grande surface se lit « jaune » ; c'est le dégradé
     qui le fait lire « or ». Reflets calés sur le bouclier du client.
     Le stop le plus sombre est #A9832A : il garde le texte noir à 5,2:1,
     donc au-dessus du minimum d'accessibilité sur TOUTE la largeur. — */
  --gold-metal: linear-gradient(103deg,
      #A9832A 0%, #C9A227 18%, #EBD48A 34%, #F7EBC0 46%,
      #D9BC5E 60%, #B98F2E 78%, #A9832A 100%);

  /* — Textes — */
  --white:    #FFFFFF;   /* titres, chiffres */
  --bone:     #EDECE8;   /* texte courant */
  --ash:      #9C988E;   /* texte secondaire — 6,6:1 sur --coal, AA validé */

  /* — Succès (et rien d'autre) — */
  --green:    #43C978;
  --green-12: rgba(67,201,120,.12);

  /* — Filets — */
  --line:      rgba(237,236,232,.10);
  --line-soft: rgba(237,236,232,.06);
  /* Bordure des CHAMPS DE SAISIE uniquement. Le filet décoratif à .10 ne fait que
     1,1:1 avec le fond : sur un input, c'est la seule chose qui dit « ici on écrit »,
     et le WCAG 1.4.11 exige 3:1 pour ça. À .42 on est à 3,4:1. Revue du 16/08/2026. */
  --line-field: rgba(237,236,232,.42);

  /* — Typographie — */
  --display: "Anton", "Haettenschweiler", "Arial Narrow", Impact, sans-serif;
  --meta:    "Archivo", "Helvetica Neue", Arial, sans-serif;
  --body:    "Manrope", "Segoe UI", system-ui, -apple-system, sans-serif;

  /* — Mesures — */
  --maxw: 1240px;
  --gutter: 22px;
  --pad-y: 104px;        /* rythme vertical desktop */
  --pad-y-sm: 62px;      /* rythme vertical mobile */
  --radius: 2px;         /* quasi carré : l'identité est anguleuse */

  /* — Ombres — */
  --lift: 0 18px 40px -22px rgba(0,0,0,.9);
}


/* ==========================================================================
   01 · RESET & BASE
   ========================================================================== */
*,*::before,*::after{margin:0;padding:0;box-sizing:border-box}

html{
  scroll-behavior:smooth;
  -webkit-text-size-adjust:100%;
  scroll-padding-top:96px;      /* la nav sticky ne masque plus les ancres */
}

body{
  background:var(--night);
  color:var(--bone);
  font-family:var(--body);
  font-size:17px;
  line-height:1.65;
  font-weight:400;
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
  overflow-x:clip;              /* ne casse pas position:sticky, contrairement à hidden */
}

img,svg,video{display:block;max-width:100%}
a{color:inherit;text-decoration:none}
button{font:inherit;color:inherit;background:none;border:none;cursor:pointer}
ul,ol{list-style:none}

h1,h2,h3,h4{
  font-family:var(--display);
  font-weight:400;                /* Anton n'a qu'une graisse */
  text-transform:uppercase;
  letter-spacing:.01em;
  line-height:.94;
  color:var(--white);
}
h1{font-size:clamp(2.7rem,8.4vw,6.6rem);line-height:.9}
h2{font-size:clamp(2.1rem,5.2vw,4.1rem)}
h3{font-size:clamp(1.35rem,2.4vw,1.85rem);line-height:1.05}
h4{font-size:1.05rem;line-height:1.2}

p{max-width:66ch}
strong,b{font-weight:700;color:var(--white)}
::selection{background:var(--gold);color:var(--gold-ink)}


/* ==========================================================================
   02 · ACCESSIBILITÉ
   ========================================================================== */
.skip-link{
  position:absolute;left:12px;top:-60px;z-index:999;
  background:var(--gold-metal);color:var(--gold-ink);
  font-family:var(--meta);font-size:.8rem;font-weight:700;
  letter-spacing:.1em;text-transform:uppercase;
  padding:12px 18px;transition:top .15s ease;
}
.skip-link:focus{top:12px}

.sr-only{
  position:absolute!important;width:1px;height:1px;
  padding:0;margin:-1px;overflow:hidden;
  clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;
}

/* Focus visible GLOBAL — on ne supprime jamais un outline sans le remplacer. */
:focus-visible{
  outline:2px solid var(--gold);
  outline-offset:3px;
  border-radius:1px;
}
/* <main tabindex="-1"> : cible du lien d'évitement, sans halo au clic souris. */
main:focus{outline:none}

/* Sur un aplat or, l'outline or serait invisible : on inverse.
   .nav-cta est le même cas — une pastille or dans la nav, hors de tout .on-gold :
   son anneau de focus or sur or était invisible au clavier. (Revue 16/08/2026.) */
.on-gold :focus-visible,
.nav-cta:focus-visible,
.btn--gold:focus-visible{outline-color:var(--white)}


/* ==========================================================================
   03 · GRAIN DE NUIT — texture procédurale, ~350 octets, aucune requête réseau
   ========================================================================== */
body::before{
  content:"";position:fixed;inset:0;z-index:9999;pointer-events:none;
  opacity:.05;mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='120' height='120' filter='url(%23n)'/%3E%3C/svg%3E");
}


/* ==========================================================================
   04 · PRIMITIVES DE MISE EN PAGE
   ========================================================================== */
.wrap{max-width:var(--maxw);margin-inline:auto;padding-inline:var(--gutter)}
.pad{padding-block:var(--pad-y)}
.pad-sm{padding-block:calc(var(--pad-y) * .6)}
.pad-t0{padding-top:0}
.pad-b0{padding-bottom:0}

.bg-ink{background:var(--ink)}
.bg-coal{background:var(--coal)}
.hr{height:1px;background:var(--line);border:0}

/* En-tête de section : kicker + titre + chapô */
.section-head{display:flex;flex-direction:column;gap:16px;margin-bottom:46px;max-width:70ch}
.section-head p{color:var(--ash);font-size:1.03rem;max-width:62ch}
.section-head--split{
  max-width:none;flex-direction:row;align-items:flex-end;
  justify-content:space-between;gap:32px;flex-wrap:wrap;
}
.section-head--split > div{display:flex;flex-direction:column;gap:16px;max-width:60ch}

/* Le kicker : signature d'entrée de section (tiret or + petites capitales) */
.kicker{
  display:inline-flex;align-items:center;gap:.7em;
  font-family:var(--meta);font-weight:600;font-size:.72rem;
  letter-spacing:.28em;text-transform:uppercase;color:var(--gold);
}
.kicker::before{content:"";width:26px;height:2px;background:var(--gold);flex:none}

/* Le mot fantôme géant, derrière le contenu */
.ghost{
  position:absolute;right:-2%;top:50%;transform:translateY(-50%);
  font-family:var(--display);font-size:clamp(7rem,24vw,20rem);line-height:.8;
  color:transparent;-webkit-text-stroke:1px rgba(237,236,232,.055);
  z-index:0;pointer-events:none;white-space:nowrap;user-select:none;
}
.ghost--gold{-webkit-text-stroke-color:var(--gold-10)}

/* ⭐ L'IDIOME CENTRAL : la grille à filet 1px.
   Le fond du conteneur EST la ligne, le gap la révèle, les enfants sont opaques.
   Aucun double-trait, aucun :last-child, responsive gratuit. */
.filet{
  display:grid;gap:1px;
  background:var(--line);
  border:1px solid var(--line);
}
.filet > *{background:var(--coal)}
.filet--2{grid-template-columns:repeat(2,1fr)}
.filet--3{grid-template-columns:repeat(3,1fr)}
.filet--4{grid-template-columns:repeat(4,1fr)}
.filet + .filet{margin-top:1px}      /* évite le trait double entre deux grilles */

/* Pastilles d'information */
.pill{
  display:inline-flex;align-items:center;gap:.5em;
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;
  padding:6px 12px;border:1px solid var(--line);color:var(--ash);
}
.pill--gold{border-color:var(--gold-35);color:var(--gold);background:var(--gold-05)}
.pill--ok{border-color:var(--green);color:var(--green);background:var(--green-12)}
.pill .dot{width:7px;height:7px;background:currentColor;border-radius:50%;flex:none}


/* ==========================================================================
   05 · BOUTONS
   Hover signature : le bouton se soulève et laisse une ombre DURE derrière lui.
   ========================================================================== */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.6em;
  font-family:var(--meta);font-weight:700;font-size:.79rem;
  letter-spacing:.13em;text-transform:uppercase;
  padding:16px 26px;border:1px solid var(--gold-35);
  background:transparent;color:var(--gold);
  transition:transform .16s ease, box-shadow .16s ease, background .16s ease, color .16s ease;
  text-align:center;
}
.btn:hover{
  background:var(--bone);color:var(--night);
  transform:translate(-3px,-3px);box-shadow:6px 6px 0 var(--gold);
}
.btn--gold{background:var(--gold-metal);border-color:var(--gold);color:var(--gold-ink)}
.btn--gold:hover{
  background:var(--white);border-color:var(--white);color:var(--night);
  box-shadow:6px 6px 0 var(--gold);
}
.btn--ghost{border-color:var(--line);color:var(--bone)}
.btn--ghost:hover{background:transparent;color:var(--gold);border-color:var(--gold);box-shadow:6px 6px 0 var(--gold-18)}
.btn--sm{padding:11px 18px;font-size:.72rem}
.btn--block{width:100%}
/* Variante posée sur un aplat or */
.on-gold .btn{border-color:var(--night);color:var(--night)}
.on-gold .btn:hover{background:var(--night);color:var(--gold);box-shadow:6px 6px 0 rgba(0,0,0,.28)}

/* Lien textuel à flèche */
.link-arrow{
  font-family:var(--meta);font-weight:700;font-size:.78rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--gold);
  display:inline-flex;align-items:center;gap:.5em;
}
.link-arrow span{transition:transform .16s ease}
.link-arrow:hover span{transform:translateX(4px)}


/* ==========================================================================
   06 · TOPBAR
   ========================================================================== */
.topbar{
  background:var(--ink);border-bottom:1px solid var(--line-soft);
  font-family:var(--meta);font-weight:600;font-size:.69rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.topbar .wrap{
  display:flex;align-items:center;justify-content:space-between;
  gap:14px;flex-wrap:wrap;padding-block:9px;
}
.topbar b{color:var(--gold);font-weight:700}


/* ==========================================================================
   07 · NAV STICKY + BURGER + MENU MOBILE
   ========================================================================== */
.nav{
  position:sticky;top:0;z-index:200;
  background:rgba(10,10,12,.88);
  backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-inner{display:flex;align-items:center;justify-content:space-between;gap:18px;height:74px}

.logo{display:flex;align-items:center;gap:.65rem}
/* fond transparent depuis le 07/09/2026 : plus besoin de mix-blend-mode,
   qui servait a fondre le cadre noir de l'ancien logo dans l'en-tete */
.logo img{height:42px;width:auto}
.logo .name{
  font-family:var(--display);font-size:1.28rem;letter-spacing:.03em;
  text-transform:uppercase;color:var(--white);line-height:1;
}
.logo .name em{color:var(--gold);font-style:normal}

.nav-links{display:flex;align-items:center;gap:1.6rem}
.nav-links a{
  font-family:var(--meta);font-weight:600;font-size:.76rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  position:relative;padding-block:6px;transition:color .18s ease;
}
.nav-links a:hover{color:var(--bone)}
.nav-links a[aria-current="page"]{color:var(--white)}
.nav-links a[aria-current="page"]::after{
  content:"";position:absolute;left:0;right:0;bottom:-2px;height:2px;background:var(--gold);
}
.nav-cta{
  background:var(--gold-metal);color:var(--gold-ink)!important;
  font-family:var(--meta);font-weight:700;font-size:.73rem;
  letter-spacing:.12em;text-transform:uppercase;
  padding:12px 18px;transition:background .16s ease,color .16s ease;
}
.nav-cta:hover{background:var(--white)}
.nav-cta[aria-current="page"]::after{display:none}

.burger{
  display:none;width:46px;height:46px;
  align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--bone);
}
.burger span{display:block;width:20px;height:2px;background:currentColor;position:relative}
.burger span::before,.burger span::after{
  content:"";position:absolute;left:0;width:20px;height:2px;background:currentColor;
  transition:transform .2s ease, top .2s ease;
}
.burger span::before{top:-6px}
.burger span::after{top:6px}
.burger[aria-expanded="true"] span{background:transparent}
.burger[aria-expanded="true"] span::before{top:0;transform:rotate(45deg)}
.burger[aria-expanded="true"] span::after{top:0;transform:rotate(-45deg)}


/* ==========================================================================
   08 · BANDEAU D'ÉTAT (ouverture prochaine / agrément)
   ========================================================================== */
.status{
  border-bottom:1px solid var(--gold-18);
  background:linear-gradient(180deg,var(--gold-05),transparent);
}
.status .wrap{
  display:flex;align-items:flex-start;gap:14px;flex-wrap:wrap;
  padding-block:14px;
}
.status .pill{flex:none;margin-top:2px}
.status p{
  color:var(--ash);font-size:.9rem;line-height:1.55;max-width:100ch;
}
.status p b{color:var(--bone);font-weight:600}


/* ==========================================================================
   09 · HERO
   ========================================================================== */
.hero{
  position:relative;overflow:hidden;
  background:var(--night);
  border-bottom:1px solid var(--line);
  padding-block:clamp(48px,8vw,86px) 0;
}
/* Halo + traînées de phares, 100 % CSS */
.hero-streaks{position:absolute;inset:0;z-index:0;pointer-events:none;overflow:hidden}
.hero-streaks::after{
  content:"";position:absolute;left:50%;top:58%;width:120vw;height:70vh;
  transform:translate(-50%,-50%);
  background:radial-gradient(ellipse at center, rgba(212,175,55,.16) 0%, rgba(212,175,55,.05) 38%, transparent 68%);
  filter:blur(6px);
}
.hero-streaks i{
  position:absolute;display:block;height:2px;border-radius:99px;
  background:linear-gradient(90deg,transparent,var(--gold),transparent);
  opacity:.35;filter:blur(1.2px);transform:rotate(-13deg);
}
.hero-streaks i:nth-child(1){left:-14%;top:22%;width:56%}
.hero-streaks i:nth-child(2){left:26%;top:34%;width:74%;opacity:.22;height:3px}
.hero-streaks i:nth-child(3){left:-6%;top:63%;width:48%;opacity:.28}
.hero-streaks i:nth-child(4){left:44%;top:76%;width:66%;opacity:.16;height:4px;filter:blur(3px)}

.hero-inner{position:relative;z-index:2;display:flex;flex-direction:column;gap:26px}
.hero h1{max-width:16ch}
.hero h1 .l1{display:block;color:var(--white)}
.hero h1 .l2{display:block;color:var(--gold)}
.hero .lede{
  color:var(--bone);font-size:1.08rem;max-width:56ch;
}
.hero .lede b{color:var(--white)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
.hero-facts{
  display:flex;flex-wrap:wrap;gap:10px 26px;max-width:none;
  font-family:var(--meta);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
}
.hero-facts span{display:inline-flex;align-items:center;gap:.55em}
.hero-facts span::before{content:"";width:6px;height:6px;background:var(--gold);flex:none}

/* La Clio : pièce maîtresse, calée en bas du hero */
.hero-car{position:relative;z-index:1;margin-top:clamp(24px,4vw,44px)}
.hero-car img{
  width:min(100%,880px);height:auto;margin-inline:auto;
  filter:drop-shadow(0 40px 60px rgba(0,0,0,.85));
}
.hero-car figcaption{
  text-align:center;margin-top:14px;padding-bottom:34px;
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--ash);
}


/* --------------------------------------------------------------------------
   09b · PAGE-HERO — en-tête des pages intérieures (formations, tarifs, contact,
   mentions légales, confidentialité). Un seul mot dans le <h1> quand c'est possible.
   -------------------------------------------------------------------------- */
.page-hero{
  position:relative;overflow:hidden;
  padding-block:clamp(46px,7vw,84px) clamp(38px,5vw,60px);
  border-bottom:1px solid var(--line);
}
.page-hero .wrap{position:relative;z-index:2}
.page-hero .crumb{
  font-family:var(--meta);font-weight:600;font-size:.7rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);margin-bottom:16px;
}
.page-hero .crumb ol{display:flex;gap:.6em;flex-wrap:wrap}
.page-hero .crumb li::after{content:"/";margin-left:.6em;color:var(--line)}
.page-hero .crumb li:last-child::after{content:""}
.page-hero .crumb a:hover{color:var(--gold)}
.page-hero .lede{color:var(--ash);font-size:1.03rem;margin-top:18px;max-width:62ch}


/* ==========================================================================
   10 · MARQUEE — la liste est écrite DEUX FOIS dans le HTML, la boucle est invisible
   ========================================================================== */
.marquee{
  background:var(--gold-metal);color:var(--gold-ink);
  border-block:2px solid var(--night);
  overflow:hidden;
}
.marquee-track{
  display:flex;align-items:center;gap:2.2rem;white-space:nowrap;
  padding-block:11px;width:max-content;
  animation:marquee 34s linear infinite;
}
.marquee-track span{
  font-family:var(--display);font-size:1.18rem;
  text-transform:uppercase;letter-spacing:.03em;
}
.marquee-track .sep{opacity:.45;font-family:var(--body);font-size:.9rem}
.marquee:hover .marquee-track,
.marquee:focus-within .marquee-track{animation-play-state:paused}
@keyframes marquee{to{transform:translateX(-50%)}}


/* ==========================================================================
   11 · MOTEUR DE CARROUSEL — générique, piloté par des attributs data-*
   Contrat HTML :
   <div class="carousel" data-carousel data-per-view="3" data-label="…">
     <ul class="rail" data-rail tabindex="0" role="group"
         aria-roledescription="carrousel" aria-label="…">
       <li class="slide" role="group" aria-roledescription="diapositive">…</li>
     </ul>
     <div class="carousel-progress"><span data-progress></span></div>
     <div class="carousel-nav">
       <button class="cbtn" data-prev aria-label="…">‹</button>
       <ol class="dots" data-dots></ol>
       <button class="cbtn" data-next aria-label="…">›</button>
     </div>
     <p class="sr-only" data-live aria-live="polite"></p>
   </div>
   Le scroll est NATIF : inertie iOS, clavier et molette gratuits, aucun transform.
   ========================================================================== */
.carousel{--pv:var(--pv-set,3);--cgap:1px;position:relative}

.rail{
  display:flex;gap:var(--cgap);
  overflow-x:auto;overflow-y:hidden;
  scroll-snap-type:x mandatory;
  scroll-padding-inline-start:0;
  overscroll-behavior-x:contain;
  scrollbar-width:none;-ms-overflow-style:none;
  padding-bottom:0;
}
.rail::-webkit-scrollbar{display:none}
.rail > .slide{
  flex:0 0 calc((100% - (var(--pv) - 1) * var(--cgap)) / var(--pv));
  scroll-snap-align:start;
  min-width:0;
}
/* Le rail garde une bordure façon « filet » : le fond du rail EST la ligne */
.carousel--filet .rail{background:var(--line);border:1px solid var(--line)}
.carousel--filet .rail > .slide{background:var(--coal)}
/* Variante espacée (photos) */
.carousel--gap{--cgap:14px}
.carousel--gap .rail{padding-block:2px}

/* Barre de progression : remplace la scrollbar qu'on a masquée */
.carousel-progress{height:2px;background:var(--line);margin-top:18px;overflow:hidden}
.carousel-progress span{
  display:block;height:100%;width:100%;background:var(--gold);
  transform:scaleX(0);transform-origin:left center;
  transition:transform .12s linear;
}

.carousel-nav{
  display:flex;align-items:center;gap:14px;margin-top:16px;
}
.cbtn{
  width:46px;height:46px;flex:none;
  display:inline-flex;align-items:center;justify-content:center;
  border:1px solid var(--line);color:var(--bone);
  font-family:var(--body);font-size:1.4rem;line-height:1;
  transition:border-color .16s ease,color .16s ease,background .16s ease;
}
.cbtn:hover:not(:disabled){border-color:var(--gold);color:var(--gold);background:var(--gold-05)}
.cbtn:disabled{opacity:.3;cursor:default}

/* flex-wrap : les cibles tactiles font 44px. À 360px, 7 points (356px) et 8 points
   (408px) dépassaient les 324px disponibles — et comme body porte overflow-x:clip,
   ils étaient COUPÉS, pas scrollables. Ils passent maintenant à la ligne.
   row-gap:0 : les boutons de 44px espacent déjà assez les rangées.
   Aucun effet au-dessus de 620px, où la place ne manque jamais. (Revue 16/08/2026.) */
.dots{display:flex;align-items:center;gap:8px;margin-inline:auto;flex-wrap:wrap;row-gap:0;justify-content:center}
.dots li{display:flex}
.dots button{
  width:44px;height:44px;                 /* cible tactile réelle */
  display:grid;place-items:center;
}
.dots button::before{
  content:"";display:block;width:8px;height:8px;border-radius:99px;
  /* .45 et non .30 : le point inactif indique l'état du carrousel, il tombe donc
     sous le WCAG 1.4.11 (3:1 minimum). À .30 il faisait 2,2:1, à .45 il fait 4:1. */
  background:rgba(237,236,232,.45);transition:width .25s ease,background .25s ease;
}
.dots button[aria-current="true"]::before{width:26px;background:var(--gold)}

/* Indice « faites glisser », mobile uniquement */
.carousel-hint{
  display:none;margin-top:12px;
  font-family:var(--meta);font-weight:600;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
}


/* ==========================================================================
   12 · CARTES TARIFS
   ========================================================================== */
.tarif{
  display:flex;flex-direction:column;
  padding:34px 30px 30px;position:relative;
  background:var(--coal);
}
.tarif--feat,
.carousel--filet .rail > .tarif--feat{background:var(--coal-2);box-shadow:inset 0 3px 0 var(--gold)}
.tarif .tarif-tag{
  font-family:var(--meta);font-weight:700;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--gold);
  min-height:2.4em;
}
.tarif h3{margin-top:10px;min-height:2.4em;font-size:1.32rem}
.tarif .price{
  font-family:var(--display);font-size:3.4rem;line-height:1;
  color:var(--white);margin-top:18px;display:flex;align-items:baseline;gap:.12em;
  /* La variante « à partir de 500 € » ajoute un préfixe sur la même ligne flex.
     Sans wrap, une carte étroite le pousserait hors de la carte. */
  flex-wrap:wrap;
}
.tarif .price sup{
  font-family:var(--body);font-size:.85rem;color:var(--gold);
  font-weight:700;align-self:flex-start;line-height:1;
}
.tarif .price .cur{font-family:var(--body);font-size:1.1rem;font-weight:600;color:var(--ash)}
.tarif .price-note{
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);margin-top:6px;
}
.tarif ul{display:flex;flex-direction:column;gap:9px;margin:22px 0 26px}
.tarif li{position:relative;padding-left:20px;font-size:.94rem;color:var(--bone)}
.tarif li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gold)}
.tarif li.muted{color:var(--ash)}
.tarif .tarif-cta{margin-top:auto}

.tarif-legend{
  margin-top:22px;color:var(--ash);font-size:.86rem;line-height:1.7;max-width:78ch;
}
.tarif-legend b{color:var(--bone)}


/* ==========================================================================
   13 · CARTES FORMATIONS
   ========================================================================== */
.forma{display:flex;flex-direction:column;gap:12px;padding:34px 30px;transition:background .18s ease}
.forma:hover{background:var(--coal-2)}
.forma .num{
  font-family:var(--display);font-size:2.1rem;line-height:1;color:var(--gold);
}
.forma h3{font-size:1.28rem}
.forma p{color:var(--ash);font-size:.95rem}
.forma .link-arrow{margin-top:6px}

.split{display:grid;grid-template-columns:1.05fr .95fr;gap:1px;background:var(--line);border:1px solid var(--line)}
.split > *{background:var(--coal)}
.split .split-media{background:var(--ink);display:flex}
.split .split-media img{width:100%;height:100%;object-fit:cover;filter:grayscale(.12) contrast(1.04)}
.split .split-text{padding:clamp(28px,4vw,52px)}
.split .split-text > * + *{margin-top:16px}


/* ==========================================================================
   14 · SECTION VÉHICULE (la Clio)
   ========================================================================== */
.vehicle{position:relative;overflow:hidden;background:var(--ink)}
.vehicle .wrap{position:relative;z-index:2}
.vehicle-grid{display:grid;grid-template-columns:1.1fr .9fr;gap:clamp(28px,5vw,64px);align-items:center}
.vehicle-grid--solo{grid-template-columns:minmax(0,860px);justify-content:center}
.vehicle-media{position:relative}
.vehicle-media::before{
  content:"";position:absolute;inset:-12% -6%;
  background:radial-gradient(ellipse at center, rgba(212,175,55,.14), transparent 68%);
  filter:blur(4px);
}
.vehicle-media img{position:relative;filter:drop-shadow(0 30px 50px rgba(0,0,0,.8))}
.vehicle-specs{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:24px}
.vehicle-specs li{background:var(--coal);padding:14px 18px;display:flex;justify-content:space-between;gap:16px;align-items:baseline}
.vehicle-specs .k{
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.vehicle-specs .v{color:var(--white);font-weight:600;font-size:.95rem;text-align:right}


/* ==========================================================================
   15 · SECTION LOCAL (carrousel photo)
   ========================================================================== */
.photo{position:relative;background:var(--ink);overflow:hidden}
figure{margin:0}
.photo .slide figure{display:flex;flex-direction:column;height:100%}

/* .shot / .shot + figcaption : composant photo AUTONOME, utilisable partout
   (carrousel, grille filet, page intérieure) — il n'est pas scopé à .photo. */
.shot{
  aspect-ratio:3/4;overflow:hidden;background:var(--coal);border:1px solid var(--line);
}
.shot img{
  width:100%;height:100%;object-fit:cover;
  filter:grayscale(.12) contrast(1.05);   /* 12 % : harmonise des photos prises au téléphone */
  transition:transform .6s ease;
}
figure:hover .shot img{transform:scale(1.04)}
.shot + figcaption{
  padding-top:12px;color:var(--ash);font-size:.86rem;line-height:1.5;
}
.shot + figcaption b{
  display:block;color:var(--bone);font-family:var(--meta);font-weight:700;
  font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;margin-bottom:4px;
}

/* Bloc « nous trouver » : adresse + horaires */
.local-grid{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--line);border:1px solid var(--line);margin-top:40px}
.local-grid > *{background:var(--coal);padding:30px 28px}
.local-grid h3{font-size:1.15rem;margin-bottom:16px}

.hours{display:flex;flex-direction:column;gap:1px;background:var(--line-soft)}
.hours li{
  background:var(--coal);display:flex;justify-content:space-between;gap:18px;
  padding:9px 0;font-size:.95rem;
}
.hours .d{
  font-family:var(--meta);font-weight:600;font-size:.72rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  align-self:center;
}
.hours .h{color:var(--bone);text-align:right}
.hours li.closed .h{color:var(--ash)}

.contact-lines{display:flex;flex-direction:column;gap:12px}
.contact-lines > a,.contact-lines > span{display:flex;gap:10px;align-items:baseline;font-size:.98rem}
.contact-lines .lbl{
  font-family:var(--meta);font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  min-width:86px;flex:none;
}
.contact-lines a:hover .val{color:var(--gold)}
/* min-width:0 + overflow-wrap : le libellé fait 86px fixes, il reste ~172px pour la
   valeur dans une cellule à 360px. « permisglory@gmail.com » est un seul mot d'environ
   170px : sans ça, il dépassait de la carte. Aucun effet quand la place existe. */
.contact-lines .val{color:var(--white);min-width:0;overflow-wrap:anywhere}


/* ==========================================================================
   16 · FRISE « COMMENT ÇA SE PASSE »
   ========================================================================== */
.steps{counter-reset:step;display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--line);border:1px solid var(--line)}
.steps li{background:var(--coal);padding:32px 26px;position:relative}
.steps li::before{
  counter-increment:step;content:"0" counter(step);
  display:block;font-family:var(--display);font-size:2.4rem;line-height:1;
  color:transparent;-webkit-text-stroke:1px var(--gold-35);margin-bottom:16px;
}
.steps li h3{font-size:1.1rem;margin-bottom:10px}
.steps li p{color:var(--ash);font-size:.93rem}
/* le fil qui relie les étapes */
.steps li::after{
  content:"";position:absolute;left:0;top:0;height:2px;width:0;background:var(--gold);
  transition:width .6s ease;
}
.steps.in li::after{width:100%}
.steps li:nth-child(2)::after{transition-delay:.12s}
.steps li:nth-child(3)::after{transition-delay:.24s}
.steps li:nth-child(4)::after{transition-delay:.36s}


/* ==========================================================================
   17 · FAQ (accordéon natif <details>, indexable et accessible)
   ========================================================================== */
.faq{display:flex;flex-direction:column;gap:1px;background:var(--line);border:1px solid var(--line)}
.faq details{background:var(--coal)}
.faq summary{
  list-style:none;cursor:pointer;
  display:flex;align-items:flex-start;justify-content:space-between;gap:20px;
  padding:22px 26px;
  font-family:var(--meta);font-weight:600;font-size:1rem;color:var(--white);
}
.faq summary::-webkit-details-marker{display:none}
.faq summary:hover{background:var(--coal-2)}
.faq summary .plus{
  flex:none;width:22px;height:22px;position:relative;margin-top:2px;
}
.faq summary .plus::before,.faq summary .plus::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--gold);
  transform:translate(-50%,-50%);transition:transform .22s ease,opacity .22s ease;
}
.faq summary .plus::before{width:14px;height:2px}
.faq summary .plus::after{width:2px;height:14px}
.faq details[open] summary .plus::after{transform:translate(-50%,-50%) rotate(90deg);opacity:0}
.faq .answer{padding:0 26px 24px;color:var(--ash);font-size:.97rem;max-width:80ch}
.faq .answer > * + *{margin-top:12px}
.faq details[open] .answer{animation:faqIn .26s ease both}
@keyframes faqIn{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}


/* ==========================================================================
   18 · NOTE RÉGLEMENTAIRE — filet or à gauche.
   Le texte réglementaire n'est JAMAIS délavé : --ash minimum (6,6:1).
   ========================================================================== */
.note{
  background:var(--coal);border:1px solid var(--line);border-left:3px solid var(--gold);
  padding:20px 24px;color:var(--ash);font-size:.93rem;line-height:1.7;max-width:90ch;
}
.note b{color:var(--bone)}
.note + .note{margin-top:14px}
.note--ok{border-left-color:var(--green)}


/* ==========================================================================
   19 · BANDEAU CTA (inversion totale : aplat or pleine largeur)
   ========================================================================== */
.cta{position:relative;overflow:hidden;background:var(--gold-metal);color:var(--gold-ink);padding-block:clamp(56px,7vw,88px)}
.cta .wrap{position:relative;z-index:2;display:grid;grid-template-columns:1.5fr 1fr;gap:36px;align-items:center}
.cta .kicker{color:var(--night)}
.cta .kicker::before{background:var(--night)}
.cta h2{color:var(--night);margin:14px 0 14px}
.cta p{color:#17150C;max-width:52ch;margin-bottom:26px;font-size:1.03rem}
.cta-actions{display:flex;flex-wrap:wrap;gap:12px}
.cta-ghost{
  position:absolute;left:-1%;bottom:-30%;z-index:1;pointer-events:none;user-select:none;
  font-family:var(--display);font-size:clamp(9rem,30vw,26rem);line-height:1;
  color:rgba(10,10,12,.075);white-space:nowrap;
}
.cta-side{position:relative;z-index:2;text-align:right}
.cta-side .big{font-family:var(--display);font-size:clamp(3rem,8vw,6rem);line-height:.85;color:var(--night);margin-bottom:0;max-width:none}
.cta-side small{
  display:block;margin-top:12px;
  font-family:var(--meta);font-weight:700;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:#17150C;
}


/* ==========================================================================
   20 · FOOTER
   ========================================================================== */
.footer{background:var(--ink);border-top:1px solid var(--line);padding-block:70px 30px}
.foot-grid{display:grid;grid-template-columns:1.5fr 1fr 1fr 1.1fr;gap:44px}
/* .foot-h : les trois en-têtes du pied de page étaient des <h4> alors que la dernière
   section de contenu s'arrête en <h2> — un saut de niveau (h2 → h4) sur les 6 pages,
   et sur mentions-legales.html il n'y a même aucun h3. Ce sont maintenant des <h2
   class="foot-h">, strictement au même rendu : le sélecteur (0,2,0) l'emporte sur
   `h2{font-size:clamp(…)}` (0,0,1). L'ancien `.footer h4` reste pour ne rien casser. */
.footer h4,
.footer .foot-h{
  font-family:var(--meta);font-weight:700;font-size:.7rem;
  letter-spacing:.2em;text-transform:uppercase;color:var(--gold);margin-bottom:18px;
  line-height:1.2;
}
.footer p,.footer li,.footer a{color:var(--ash);font-size:.92rem;line-height:1.85}
.footer a:hover{color:var(--gold)}
.footer .foot-logo img{height:104px;width:auto;margin-bottom:16px}
.footer .foot-hours li{display:flex;justify-content:space-between;gap:14px}
.footer .foot-hours .d{color:var(--bone)}
.foot-social{display:flex;gap:10px;margin-top:18px}
.foot-social a{
  width:42px;height:42px;display:grid;place-items:center;
  border:1px solid var(--line);color:var(--ash);
  font-family:var(--meta);font-weight:700;font-size:.72rem;letter-spacing:.06em;
  transition:background .16s ease,color .16s ease,border-color .16s ease;
}
.foot-social a:hover{background:var(--gold);border-color:var(--gold);color:var(--gold-ink)}
.foot-legal{
  margin-top:46px;padding-top:22px;border-top:1px solid var(--line);
  color:var(--ash);font-size:.84rem;line-height:1.8;
}
.foot-bottom{
  margin-top:18px;display:flex;justify-content:space-between;gap:14px;flex-wrap:wrap;
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
}
.foot-bottom nav{display:flex;gap:18px;flex-wrap:wrap}


/* ==========================================================================
   21 · BARRE D'APPEL MOBILE (sticky) — montée/descente pilotée par main.js
   ========================================================================== */
.callbar{
  position:fixed;left:0;right:0;bottom:0;z-index:300;
  display:none;gap:10px;align-items:stretch;
  padding:10px 12px calc(10px + env(safe-area-inset-bottom));
  background:rgba(1,1,3,.94);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);
  border-top:1px solid var(--line);box-shadow:0 -14px 30px rgba(0,0,0,.55);
  transform:translateY(110%);transition:transform .26s ease;
}
.callbar.is-visible{transform:translateY(0)}
.callbar a{display:inline-flex;align-items:center;justify-content:center}
.callbar .callbar-tel{
  width:56px;flex:none;border:1px solid var(--gold);color:var(--gold);
  font-family:var(--meta);font-weight:700;font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;
}
.callbar .callbar-main{flex:1}


/* ==========================================================================
   22 · FORMULAIRES (contact.html / pré-inscription)
   ========================================================================== */
.form{background:var(--coal);border:1px solid var(--line);padding:clamp(24px,4vw,38px)}
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:16px}
.field{margin-bottom:16px;display:flex;flex-direction:column;gap:7px}
.field label{
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
}
.field input,.field select,.field textarea{
  width:100%;background:#0B0B0E;border:1px solid var(--line-field);color:var(--bone);
  padding:13px 14px;font-family:inherit;font-size:.97rem;border-radius:var(--radius);
}
.field input:focus,.field select:focus,.field textarea:focus{
  outline:2px solid var(--gold);outline-offset:2px;border-color:var(--gold);
}
.field textarea{resize:vertical;min-height:120px}
.field .help{font-size:.82rem;color:var(--ash)}
.check{display:flex;gap:10px;align-items:flex-start;font-size:.9rem;color:var(--ash)}
.check input{margin-top:.25em;accent-color:var(--gold);width:18px;height:18px;flex:none}
.form-legal{margin-top:18px;color:var(--ash);font-size:.82rem;line-height:1.7}
.form-ok{
  border:1px solid var(--green);background:var(--green-12);color:var(--green);
  padding:14px 18px;font-size:.93rem;margin-bottom:18px;
}
/* Autofill Chrome : sinon il repeint le champ en clair sur un site sombre */
input:-webkit-autofill,textarea:-webkit-autofill,select:-webkit-autofill{
  -webkit-text-fill-color:var(--bone);
  -webkit-box-shadow:0 0 0 1000px #0B0B0E inset;
  caret-color:var(--bone);
}


/* ==========================================================================
   23 · REVEAL AU SCROLL
   Le contenu est VISIBLE par défaut si le JS ne tourne pas (.no-js).
   ========================================================================== */
.reveal{opacity:0;transform:translateY(24px);transition:opacity .7s ease,transform .7s ease}
.reveal.in{opacity:1;transform:none}
.no-js .reveal{opacity:1;transform:none}


/* ==========================================================================
   24 · RESPONSIVE — 3 seuils, déclarés UNE seule fois : 1100 / 860 / 620
   ========================================================================== */
@media (max-width:1100px){
  .foot-grid{grid-template-columns:1fr 1fr;gap:36px}
  .steps{grid-template-columns:repeat(2,1fr)}
  .filet--3,.filet--4{grid-template-columns:repeat(2,1fr)}
  .carousel{--pv:var(--pv-md,2.15)}
}

@media (max-width:860px){
  :root{--pad-y:var(--pad-y-sm)}
  h1{font-size:clamp(2.4rem,10vw,3.6rem)}

  /* Nav → burger + panneau plein écran */
  .burger{display:inline-flex}
  .nav-links{
    position:fixed;inset:74px 0 0 0;z-index:190;
    flex-direction:column;align-items:stretch;justify-content:flex-start;gap:0;
    background:var(--ink);padding:8px 0 40px;overflow-y:auto;
    opacity:0;visibility:hidden;transform:translateY(-10px);
    transition:opacity .22s ease,transform .22s ease,visibility .22s ease;
  }
  .nav-links.open{opacity:1;visibility:visible;transform:none}
  .nav-links a{
    padding:20px var(--gutter);font-size:1rem;color:var(--bone);
    border-bottom:1px solid var(--line);
  }
  .nav-links a[aria-current="page"]{color:var(--gold)}
  .nav-links a[aria-current="page"]::after{display:none}
  .nav-links .nav-cta{
    margin:20px var(--gutter) 0;text-align:center;border-bottom:none;
    padding:18px;font-size:.85rem;
  }

  .filet--2,.filet--3,.filet--4{grid-template-columns:1fr}
  .split,.vehicle-grid,.local-grid,.form-row{grid-template-columns:1fr}
  .split .split-media{min-height:280px}
  .cta .wrap{grid-template-columns:1fr;gap:20px}
  .cta-side{text-align:left}
  .section-head--split{flex-direction:column;align-items:flex-start}
  .callbar{display:flex}
  body{padding-bottom:76px}          /* la barre d'appel ne recouvre pas le footer */
  .carousel-hint{display:block}
  .hero-facts{font-size:.66rem;gap:8px 18px}
}

@media (max-width:620px){
  body{font-size:16px}
  :root{--gutter:18px}
  h1{font-size:clamp(1.95rem,9.2vw,3rem)}   /* testé à 360px : aucun débordement */
  .status .wrap{flex-direction:column;gap:10px}
  .status p{min-width:100%}
  .carousel{--pv:var(--pv-sm,1.12)}
  .steps{grid-template-columns:1fr}
  .foot-grid{grid-template-columns:1fr;gap:32px}
  .topbar .wrap{justify-content:flex-start;gap:6px 14px;font-size:.62rem}
  .tarif{padding:28px 22px 26px}
  .tarif h3,.tarif .tarif-tag{min-height:0}
  .hero-actions .btn{flex:1 1 100%}
  .cbtn{display:none}                /* mobile : on glisse, on ne clique pas des flèches */
  .dots{margin-inline:0}
  /* Barre d'appel : le bouton principal ne dispose que de ~270px à 360px, et
     « ÊTRE PRÉVENU À L'OUVERTURE » en Archivo 700 espacé en fait ~245. Les 52px de
     padding horizontal du .btn le faisaient passer sur deux lignes, donc la barre
     dépassait les 76px réservés par body{padding-bottom}. On rend les 24px manquants. */
  .callbar .btn{padding-inline:14px}
}

/* Mouvement réduit : on coupe tout, et on rend le contenu visible. */
@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation-duration:.001ms!important;animation-iteration-count:1!important;transition-duration:.001ms!important}
  html{scroll-behavior:auto}
  .rail{scroll-behavior:auto}
  .reveal{opacity:1;transform:none}
  .steps.in li::after{width:100%}
}


/* ==========================================================================
   INDEX.HTML — compléments de la page d'accueil (16/08/2026)
   ⚠ Sans numéro volontairement : plusieurs pages ont ajouté leur section le même
   jour. AJOUTS UNIQUEMENT : aucune règle ci-dessus n'a été touchée.
   Classes préfixées .index-, utilisées seulement par index.html.
   Aucun nouveau point de rupture : .filet--2 passe déjà en 1 colonne à 860px.
   (Section placée avant l'impression pour que @media print reste en dernier.)
   ========================================================================== */

/* Le tableau « ce qui est compris / ce qui reste en supplément », posé sous le
   carrousel des tarifs : c'est la réponse écrite à l'astérisque de la vitrine.
   Il s'appuie sur .filet--2 pour la grille et le filet 1px. */
.index-inclus > div{padding:28px 26px}
.index-inclus h3{font-size:1.12rem;margin-bottom:16px}
.index-inclus ul{display:flex;flex-direction:column;gap:10px}
.index-inclus li{position:relative;padding-left:20px;font-size:.95rem;color:var(--bone)}
.index-inclus li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gold)}
/* Colonne « en supplément » : même grammaire, marqueur cendre au lieu de l'or. */
.index-inclus .index-sup li::before{background:var(--ash)}

/* Pastille « prochainement » posée dans une carte .forma. Sans align-self, la
   pastille s'étirerait sur toute la largeur (la carte est un flex en colonne). */
.index-badge{align-self:flex-start}

/* La signature de marque du gérant, en clôture du bandeau CTA (aplat or).
   Anton, comme tous les éléments d'affichage — donc en majuscules. */
.index-signature{
  margin-top:18px;max-width:none;
  font-family:var(--display);text-transform:uppercase;
  font-size:clamp(.98rem,1.9vw,1.24rem);line-height:1.1;letter-spacing:.02em;
  color:var(--night);
}


/* ==========================================================================
   25 · IMPRESSION (un candidat imprime souvent les tarifs et l'adresse)
   ========================================================================== */
@media print{
  body{background:#fff;color:#000}
  body::before,.nav,.callbar,.marquee,.carousel-nav,.carousel-progress,.hero-streaks,.cta{display:none!important}
  .rail{overflow:visible;flex-wrap:wrap}
  a[href^="http"]::after{content:" (" attr(href) ")";font-size:.8em}
  h1,h2,h3,h4,.footer p,.footer li{color:#000}
}


/* ==========================================================================
   PAGE « POLITIQUE DE CONFIDENTIALITÉ » (confidentialite.html) — 16/08/2026
   ⚠ Sans numéro volontairement : plusieurs sections ajoutées le même jour par
   des pages différentes portent déjà le numéro 26. À renuméroter en une passe
   finale, quand toutes les pages seront écrites.

   La page réutilise TEL QUEL le gabarit de lecture longue écrit pour
   mentions-legales.html — .legal-layout · .legal-toc · .legal-doc · .legal-dl
   (données / finalité / base légale / durée) · .legal-todo · .legal-updated.
   Rien de tout cela n'est redéclaré ici : les deux pages légales doivent
   rester des jumelles, pas des cousines.

   Il manquait une seule chose à ce gabarit : une liste à puces de CORPS de
   texte (les droits, les limites, les mesures de sécurité). La voici, au même
   idiome que les listes des cartes tarifs — tiret or, texte en --bone.
   Aucune règle existante modifiée, aucun nouveau seuil.
   ========================================================================== */
.conf-list{display:flex;flex-direction:column;gap:10px;margin-top:14px;max-width:80ch}
.conf-list li{position:relative;padding-left:20px;color:var(--bone);font-size:.97rem;line-height:1.65}
.conf-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gold)}


/* ==========================================================================
   26 · CONTACT.HTML — ajouts propres à la page Contact (16/08/2026)

   Section AJOUTÉE en fin de fichier, toutes les classes préfixées .contact-*.
   Aucune règle existante n'est modifiée, aucun token n'est ajouté, aucune
   couleur n'est écrite en dur.
   ⚠ Aucun nouveau breakpoint : la grille du formulaire se réorganise avec
   auto-fit, pas avec une media query — les 3 seuils du site restent 1100/860/620,
   déclarés une seule fois au §24.
   ========================================================================== */

/* Cellule de contenu posée dans une grille .filet.
   C'est l'équivalent de `.local-grid > *`, mais disponible aussi en 3 colonnes. */
.contact-cell{padding:30px 28px}
.contact-cell h3{font-size:1.15rem}
.contact-cell > * + *{margin-top:16px}

/* Rangée d'actions secondaires (liens plan / itinéraire) posée dans une .note. */
.contact-actions{display:flex;flex-wrap:wrap;gap:12px;margin-top:16px}

/* Groupe de boutons radio « boîte manuelle / automatique ».
   Le <fieldset> porte une bordure par défaut que le reset global (qui ne remet
   à zéro que margin et padding) ne retire pas. */
.contact-fieldset{border:0;margin-bottom:16px;min-width:0}
.contact-legend{
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ash);
  margin-bottom:10px;
}
.contact-choices{display:flex;flex-wrap:wrap;gap:12px 26px}
.contact-choices .check{color:var(--bone);font-size:.95rem;cursor:pointer}

/* Formulaire + colonne d'à-côté : deux colonnes quand la place existe, une
   seule en dessous de ~700px — sans media query, donc sans nouveau seuil.
   ⚠ Le min(330px,100%) n'est pas décoratif : avec un minmax(330px,1fr) nu, une
   fenêtre plus étroite que 330px produit une piste de 330px qui déborde du
   conteneur. Testé à 360px et à 320px : aucun débordement horizontal. */
.contact-form-grid{
  display:grid;gap:28px;align-items:start;
  grid-template-columns:repeat(auto-fit,minmax(min(330px,100%),1fr));
}

/* Piège à robots de Netlify Forms. Le champ doit exister dans le DOM, rester
   invisible ET non focalisable → display:none, surtout PAS .sr-only : un
   lecteur d'écran lirait le champ et l'utilisateur le remplirait. */
.contact-hp{display:none}


/* ==========================================================================
   26 · PAGE TARIFS (tarifs.html) — ajout du 16/08/2026
   Section AJOUTÉE en fin de fichier. Aucune règle existante n'est modifiée,
   aucune couleur en dur, aucun nouveau breakpoint : tout est fluide et
   s'appuie sur les grilles .filet (qui gèrent déjà 1100 / 860 / 620).
   Toutes les classes sont préfixées .tarifs- pour ne rien polluer.
   ========================================================================== */

/* Kicker du page-hero : la classe .kicker est inline-flex, elle n'a pas de
   marge basse par défaut. On l'espace ICI, sans toucher à .kicker. */
.tarifs-kicker{margin-bottom:16px}

/* Sommaire d'ancres sous le titre de page (réutilise .btn .btn--sm .btn--ghost) */
.tarifs-jump{display:flex;flex-wrap:wrap;gap:10px;margin-top:28px}

/* Rangée de pastilles au-dessus du titre d'une carte tarif (ex. « Prochainement ») */
.tarifs-badgerow{display:flex;flex-wrap:wrap;gap:8px;margin-bottom:14px}

/* Préfixe « dès » posé sur la ligne de base du grand prix Anton.
   Obligation légale : un « à partir de » ne s'affiche jamais seul — les trois
   formules du permis accéléré sont côte à côte, prix complets visibles. */
.tarifs-from{
  font-family:var(--meta);font-weight:700;font-size:.72rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}

/* Marqueur visible d'une donnée que nous n'avons pas. On ne comble jamais un
   trou par une estimation : on le montre. */
.tarifs-todo{
  font-family:var(--meta);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
  border-bottom:1px dashed var(--gold-35);white-space:nowrap;
}

/* Panneau de contenu logé dans une cellule .filet (inclus / supplément / financement) */
.tarifs-panel{padding:clamp(26px,3.4vw,38px)}
.tarifs-panel > * + *{margin-top:16px}
.tarifs-panel h3{font-size:1.22rem}
.tarifs-panel p{color:var(--ash);font-size:.95rem}
.tarifs-panel .link-arrow{margin-top:4px}

/* Liste « intitulé à gauche · prix à droite » — sert aux deux colonnes du bloc
   inclus/supplément et au bloc financement. Même idiome de filet que .hours. */
.tarifs-list{display:flex;flex-direction:column;gap:1px;background:var(--line-soft);margin-top:20px}
.tarifs-list li{
  background:var(--coal);padding:15px 0;
  display:flex;justify-content:space-between;gap:18px;align-items:baseline;
  font-size:.97rem;color:var(--bone);
}
.tarifs-list .t{position:relative;padding-left:24px}
.tarifs-list .t::before{
  content:"";position:absolute;left:0;top:.6em;width:10px;height:2px;background:var(--gold);
}
.tarifs-list .t small{
  display:block;color:var(--ash);font-size:.84rem;line-height:1.55;margin-top:5px;
}
.tarifs-list .p{
  flex:none;font-family:var(--display);font-size:1.4rem;line-height:1;color:var(--white);
}
/* Variante « pas un montant » : Compris, Inclus, [à compléter]… */
.tarifs-list .p.na{
  font-family:var(--meta);font-weight:700;font-size:.68rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--gold);
}

/* Tableaux réglementaires. Le tableau porte lui-même le filet (fond = la ligne,
   border-spacing = la révèle) : le conteneur ne fait QUE défiler.
   overflow-x local ⇒ jamais de barre horizontale sur la page, même à 360px. */
.tarifs-tablewrap{
  overflow-x:auto;overscroll-behavior-x:contain;
  -webkit-overflow-scrolling:touch;
}
.tarifs-table{
  width:100%;min-width:740px;
  border-collapse:separate;border-spacing:1px;
  background:var(--line);
}
.tarifs-table--slim{min-width:560px}
.tarifs-table th,.tarifs-table td{
  background:var(--coal);padding:15px 17px;text-align:left;vertical-align:top;
}
.tarifs-table thead th{
  background:var(--coal-2);
  font-family:var(--meta);font-weight:700;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--gold);
  white-space:nowrap;
}
.tarifs-table tbody th{
  font-family:var(--body);font-weight:700;font-size:.97rem;color:var(--white);
}
.tarifs-table tbody th small{
  display:block;font-weight:400;color:var(--ash);font-size:.83rem;
  line-height:1.5;margin-top:5px;
}
.tarifs-table td{color:var(--bone);font-size:.92rem;line-height:1.55}
.tarifs-table tbody tr:hover th,
.tarifs-table tbody tr:hover td{background:var(--coal-2)}
/* La colonne prix : Anton, alignée à droite, jamais coupée */
.tarifs-table .tp{
  font-family:var(--display);font-size:1.5rem;line-height:1;color:var(--white);
  text-align:right;white-space:nowrap;
}
.tarifs-table .tp sup{
  font-family:var(--body);font-size:.7rem;color:var(--gold);font-weight:700;
}
.tarifs-table .tp .tarifs-from{display:block;margin-bottom:4px}
.tarifs-table .tp.na{font-family:var(--meta);font-weight:700;font-size:.68rem;letter-spacing:.14em}

.tarifs-scrollhint{
  margin-top:12px;
  font-family:var(--meta);font-weight:600;font-size:.66rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
}

/* Titre intermédiaire au-dessus d'un tableau */
.tarifs-subhead{margin-bottom:18px}
.tarifs-subhead h3{font-size:1.3rem;margin-bottom:8px}
.tarifs-subhead p{color:var(--ash);font-size:.94rem}

/* Encadré d'identification réglementaire (arrêté du 19 juin 1987, art. 3 :
   toute publicité tarifaire porte le nom, l'adresse et le n° d'agrément). */
.tarifs-ident{
  background:var(--ink);border:1px solid var(--gold-18);
  padding:24px 26px;margin-top:26px;
}
.tarifs-ident dl{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.tarifs-ident div{display:flex;gap:14px;align-items:baseline;flex-wrap:wrap}
.tarifs-ident dt{
  font-family:var(--meta);font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
  min-width:150px;flex:none;
}
.tarifs-ident dd{color:var(--white);font-size:.97rem;font-weight:600}
.tarifs-ident dd em{color:var(--ash);font-style:normal;font-weight:400;font-size:.9rem}


/* ==========================================================================
   PAGE « MENTIONS LÉGALES » (mentions-legales.html) — ajout du 16/08/2026
   ⚠ Sans numéro volontairement : plusieurs sections ajoutées le même jour par
   des pages différentes portent déjà le numéro 26. À renuméroter en une passe
   finale, quand toutes les pages seront écrites.
   Section AJOUTÉE en fin de fichier : aucune règle écrite plus haut n'a été
   modifiée, aucune couleur en dur, aucun nouveau seuil (on réutilise 860 / 620).
   Toutes les classes sont préfixées .legal-* et ne servent qu'aux pages de
   lecture longue (mentions-legales.html, et confidentialite.html si besoin).
   ========================================================================== */

/* Ligne « dernière mise à jour », sous le chapô du .page-hero */
.legal-updated{
  margin-top:18px;
  font-family:var(--meta);font-weight:600;font-size:.68rem;
  letter-spacing:.18em;text-transform:uppercase;color:var(--ash);
}

/* Sommaire collant + colonne de lecture */
.legal-layout{
  display:grid;grid-template-columns:236px minmax(0,1fr);
  gap:clamp(30px,5vw,68px);align-items:start;
}
.legal-toc{position:sticky;top:96px}      /* 74px de nav sticky + respiration */
.legal-toc ol{display:flex;flex-direction:column;margin-top:18px}
.legal-toc a{
  display:block;padding:9px 0 9px 14px;border-left:1px solid var(--line);
  font-family:var(--meta);font-weight:600;font-size:.7rem;
  letter-spacing:.12em;text-transform:uppercase;color:var(--ash);
  transition:color .16s ease,border-color .16s ease;
}
.legal-toc a:hover{color:var(--gold);border-left-color:var(--gold)}

.legal-doc{max-width:80ch}
.legal-doc > section + section{margin-top:clamp(40px,5vw,58px)}
.legal-doc h2{font-size:clamp(1.45rem,2.9vw,2rem);margin-bottom:14px}
.legal-doc h3{font-size:1.05rem;margin-top:26px;margin-bottom:8px}
.legal-doc p{color:var(--bone);font-size:.98rem}
.legal-doc p + p{margin-top:12px}
.legal-doc .note{margin-top:20px}
.legal-doc a:not(.btn):not(.link-arrow){
  color:var(--gold);text-decoration:underline;text-underline-offset:3px;
}

/* Tableau champ / valeur — même idiome que .vehicle-specs : le fond EST le filet */
.legal-dl{
  display:flex;flex-direction:column;gap:1px;
  background:var(--line);border:1px solid var(--line);margin-top:22px;
}
.legal-dl > div{
  background:var(--coal);padding:14px 18px;
  display:grid;grid-template-columns:210px minmax(0,1fr);gap:6px 20px;align-items:baseline;
}
.legal-dl dt{
  font-family:var(--meta);font-weight:600;font-size:.66rem;
  letter-spacing:.16em;text-transform:uppercase;color:var(--ash);
}
.legal-dl dd{color:var(--white);font-size:.96rem;font-weight:600;overflow-wrap:anywhere}
.legal-dl dd a{color:var(--white)}
.legal-dl dd a:hover{color:var(--gold)}
.legal-dl dd small{
  display:block;margin-top:5px;
  color:var(--ash);font-weight:400;font-size:.84rem;line-height:1.6;
}

/* Le champ que nous n'avons pas : affiché comme manquant, jamais deviné */
.legal-todo{
  display:inline-block;
  font-family:var(--meta);font-weight:700;font-size:.66rem;
  letter-spacing:.14em;text-transform:uppercase;
  color:var(--gold);background:var(--gold-05);
  border:1px dashed var(--gold-35);padding:3px 9px;
}

/* Liste des textes de référence */
.legal-refs{margin-top:20px;display:flex;flex-direction:column;gap:9px}
.legal-refs li{position:relative;padding-left:20px;color:var(--ash);font-size:.92rem}
.legal-refs li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gold)}
.legal-refs b{color:var(--bone)}

@media (max-width:860px){
  .legal-layout{grid-template-columns:1fr}
  .legal-toc{position:static;padding-bottom:6px}
  .legal-toc ol{display:grid;grid-template-columns:1fr 1fr;gap:0 14px}
}
@media (max-width:620px){
  .legal-dl > div{grid-template-columns:1fr;gap:4px}
  .legal-toc ol{grid-template-columns:1fr}
}


/* ==========================================================================
   PAGE « FORMATIONS » (formations.html) — ajout du 16/08/2026
   ⚠ Sans numéro volontairement : plusieurs pages écrites le même jour portent
   déjà un « 26 ». À renuméroter en une passe finale.
   Section AJOUTÉE en fin de fichier : aucune règle écrite plus haut n'est
   modifiée, aucune couleur en dur, aucun token ni breakpoint nouveau
   (les .filet gèrent déjà 1100 / 860 / 620).
   Deux classes, pas une de plus, toutes préfixées .fmt-* :

   · .fmt-list — la puce « tiret or » existe déjà, mais UNIQUEMENT scopée à
                 `.tarif li`. La page Formations en a besoin dans des .forma
                 (« ce qui est compris dans le forfait »). Mêmes valeurs, même
                 or, même rythme : c'est le MÊME idiome, rendu réutilisable
                 hors carte tarif. Rien de neuf n'est inventé.
   · .fmt-cta  — équivalent de `.tarif .tarif-cta` (lui aussi scopé) : colle le
                 bouton au bas de la cellule pour que les 3 colonnes d'une
                 .filet--3 s'alignent sur la même ligne de base.
   ========================================================================== */
.fmt-list{display:flex;flex-direction:column;gap:9px}
.fmt-list li{position:relative;padding-left:20px;font-size:.94rem;color:var(--bone)}
.fmt-list li::before{content:"";position:absolute;left:0;top:.62em;width:8px;height:2px;background:var(--gold)}
.fmt-list li.muted{color:var(--ash)}

.fmt-cta{margin-top:auto;padding-top:8px}
/* `.forma .link-arrow` porte déjà un `margin-top:6px` plus spécifique (0,2,0) :
   on le neutralise ici à spécificité égale, et plus bas dans le fichier — sans
   toucher à la règle d'origine. */
.forma .fmt-cta{margin-top:auto}

/* Les cartes du carrousel de navigation sont des .forma posées dans un rail
   .carousel--filet. Or `.carousel--filet .rail > .slide{background:var(--coal)}`
   (0,3,0) l'emporte sur `.forma:hover` (0,2,0) : le survol serait muet alors que
   ces cartes sont cliquables. On rétablit le retour visuel prévu par .forma,
   à spécificité suffisante, sans modifier ni l'une ni l'autre des deux règles.
   (Même problème, même remède que `.carousel--filet .rail > .tarif--feat`.) */
.carousel--filet .rail > .forma:hover{background:var(--coal-2)}

/* --------------------------------------------------------------------------
   VISUELS DE MARQUE (16/08/2026) — les images de la Clio dans Paris sont des
   photos pleines, pas des découpes sur fond transparent comme l'ancien PNG.
   Le drop-shadow d'origine, pensé pour un détourage, donnait un halo autour
   d'un rectangle : on le remplace par un cadre net et une ombre portée douce.
   -------------------------------------------------------------------------- */
.shot-photo{
  border-radius:14px;
  border:1px solid var(--line);
  box-shadow:0 30px 60px rgba(0,0,0,.7);
}
.hero-car img.shot-photo{filter:none}


/* ==========================================================================
   26 - AJOUTS DU 26/08/2026 (retours du RDV Oualid & Baghdad)
   ========================================================================== */
.hero-target{color:var(--gold);vertical-align:-.08em;margin-right:.26em}
.price--surdevis{
  font-family:var(--meta);font-weight:700;
  font-size:.78rem;letter-spacing:.09em;text-transform:uppercase;
  color:var(--gold);line-height:1.35;
}
.tp--surdevis{
  font-family:var(--meta);font-weight:700;
  font-size:.66rem;letter-spacing:.06em;text-transform:uppercase;color:var(--gold);
  white-space:normal;
}
.answer-lead{font-size:1.1rem;line-height:1.5}
.answer-lead b{color:var(--gold)}

/* Icone WhatsApp flottante : visible en permanence, au-dessus de la barre d'appel mobile. */
.wa-fab{
  position:fixed;right:18px;bottom:22px;z-index:320;
  width:58px;height:58px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  background:#25D366;color:#fff;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
  transition:transform .18s ease,box-shadow .18s ease;
}
.wa-fab:hover,.wa-fab:focus-visible{transform:translateY(-2px) scale(1.05);box-shadow:0 14px 32px rgba(0,0,0,.55)}
.wa-fab svg{display:block}
@media (max-width:860px){
  .wa-fab{width:52px;height:52px;right:14px;bottom:calc(88px + env(safe-area-inset-bottom))}
  .wa-fab svg{width:27px;height:27px}
}
@media (prefers-reduced-motion:reduce){ .wa-fab{transition:none} }
@media print{ .wa-fab{display:none} }


/* ==========================================================================
   19 · CARTES D'AVIS (carrousel « Ce que disent les élèves »)
   Reprend le moteur générique de la section 11. Or de marque #D4AF37.
   ========================================================================== */
.avis-carte{
  display:flex;flex-direction:column;gap:14px;height:100%;margin:0;
  padding:26px 24px 22px;
  background:linear-gradient(180deg,rgba(212,175,55,.07) 0%,rgba(212,175,55,0) 42%),#111112;
  border:1px solid rgba(212,175,55,.28);border-radius:4px;
}
.avis-etoiles{
  font-size:1.02rem;letter-spacing:.16em;line-height:1;
  color:#D4AF37;text-shadow:0 0 14px rgba(212,175,55,.28);
}
.avis-carte blockquote{
  margin:0;flex:1;font-size:.98rem;line-height:1.62;color:#E8E6E1;
}
.avis-carte blockquote::before{content:"C";}
.avis-carte blockquote::after{content:"D";}
.avis-carte figcaption{
  display:flex;flex-direction:column;gap:3px;
  padding-top:14px;border-top:1px solid rgba(212,175,55,.20);
  font-size:.82rem;color:#8A8A8F;
}
.avis-carte figcaption b{
  font-weight:600;font-size:.92rem;color:#F4F2ED;letter-spacing:.01em;
}
@media (max-width:640px){
  .avis-carte{padding:22px 20px 18px}
  .avis-carte blockquote{font-size:.94rem}
}