/* ═══════════════════════════════════════════
   CHANGAN HAÏTI — Design System
   Dark Cinematic · Built from scratch
   ═══════════════════════════════════════════ */

/* ── Tokens ── */
:root {
  --bg:       #F4F6F8;   /* bande claire — voir PROJECT-CONTEXT, gris froid sous le navy */
  --surface:  #FFFFFF;   /* les cartes posees sur une bande claire sont blanches */
  --surface2: #e8eaee;
  --band-light:  #F4F6F8;
  --band-dark:   #0B0D12;
  --card:        #FFFFFF;
  /* Champs de formulaire : ces valeurs etaient codees en dur pour un fond
     clair. Aucun formulaire n'avait jamais ete pose sur une bande sombre,
     donc le probleme n'avait jamais pu apparaitre. */
  --field-bg:    rgba(0,0,0,0.03);
  --field-ph:    rgba(0,0,0,0.30);
  --card-shadow: 0 12px 40px rgba(16,24,40,0.10);
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.14);
  --text:     rgba(0,0,0,0.90);
  --text2:    rgba(0,0,0,0.66);   /* 6.5:1 sur la bande claire  */
  --text3:    rgba(0,0,0,0.55);   /* 4.65:1 — etait 0.35, soit 2.42:1, sous AA */
  /* Accent — navy officiel Changan. Deux valeurs, choisies par le contexte
     de bande et non surchargees au cas par cas : la bande sombre redefinit
     --accent, donc tout consommateur de var(--accent) suit automatiquement.
     Mesures : #004188 = 9.18:1 sur #F4F6F8 et 9.94:1 sur blanc ;
               #5B9BD5 = 6.57:1 sur #0B0D12. */
  --accent-on-light: #004188;
  --accent-on-dark:  #5B9BD5;
  --accent:        var(--accent-on-light);
  --accent-fg:     #FFFFFF;                 /* texte pose SUR l'accent — 9.94:1 */
  --accent-soft:   rgba(0,65,136,0.10);
  --accent-ring:   rgba(0,65,136,0.30);
  --accent-shadow: rgba(0,65,136,0.30);
  /* Embleme Changan — le symbole seul, sans le mot CHANGAN. Repris tel quel
     de Logos-Brand Slogan/LOGO SUITE/SYMBOL/RGB/SVG, viewBox resserree sur
     le trace (le fichier d'origine porte une marge). Pose en MASQUE et non
     en <svg> dans le HTML : une seule copie du trace pour tout le site au
     lieu de 24 reparties sur 12 pages, et la couleur suit `color`, donc les
     etats de survol existants continuent de fonctionner sans regle en plus.
     Proportions 229.6 x 200.2 — plus large que haut. */
  --v-emblem: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='99.9 99.9 229.6 200.2'%3E%3Cpath fill='%23000' d='M214.69,289.68c74.84,0,97.19-26.45,102.69-87.46,5.51-61.19-17.4-91.9-102.69-91.9s-108.2,30.71-102.69,91.9c5.5,61.01,27.85,87.46,102.69,87.46ZM267.98,182.95v-55.88c0-.62.6-1.06,1.19-.87,11.4,3.65,20.13,8.79,26.25,15.49,11.3,12.36,15.38,31.33,12.82,59.7-2.73,30.29-9.6,48.97-22.28,60.56-12.49,11.42-32.26,17.31-61.74,18.37-.7.02-1.17-.73-.84-1.34l37.81-69.42c4.45-8.17,6.79-17.32,6.79-26.62ZM172.27,123.1c11.88-2.4,25.97-3.61,42.42-3.61s30.54,1.21,42.42,3.61c.55.11.86.71.65,1.24-16.64,41.58-35.03,80.24-41.05,92.67-.82,1.7-3.23,1.7-4.04,0-6.02-12.43-24.42-51.09-41.05-92.67-.21-.53.1-1.12.65-1.24ZM133.96,141.69c6.13-6.7,14.86-11.84,26.25-15.49.58-.19,1.19.25,1.19.87v55.88c0,9.3,2.34,18.45,6.79,26.62l37.81,69.42c.34.61-.14,1.37-.84,1.33-29.49-1.05-49.25-6.95-61.74-18.36-12.68-11.59-19.55-30.27-22.28-60.56-2.55-28.37,1.52-47.34,12.82-59.7ZM214.67,300c82.98,0,107.71-29.49,113.81-97.53,6.08-67.9-18.87-102.47-113.81-102.47s-119.88,34.56-113.81,102.47c6.09,68.03,30.83,97.53,113.81,97.53ZM121.57,131.41c16.06-17.67,45.53-26.26,93.1-26.26s77.04,8.6,93.1,26.27c13.61,14.99,18.57,37.42,15.6,70.59-3.16,35.19-11.3,57.07-26.43,70.93-16.3,14.95-42.44,21.9-82.28,21.9s-65.98-6.96-82.28-21.9c-15.12-13.86-23.27-35.74-26.42-70.93-2.98-33.18,1.99-55.61,15.6-70.6Z'/%3E%3C/svg%3E");
  --ease:     cubic-bezier(0.32,0.72,0,1);   /* seule courbe du site */
  --t-fast:   180ms;                         /* retour interactif : survol, focus, couleur */
  --t-med:    350ms;                         /* revelations et changements d'etat plus amples */
  --sans:     'Noto Sans', system-ui, sans-serif;
  --mono:     'Noto Sans', ui-monospace, monospace;
  --radius:   20px;
  --radius-s: 12px;
}

/* ── Model pages: light theme ── */
body.model-page {
  --bg:       #F4F6F8;
  --surface:  #FFFFFF;
  --surface2: #eaecf0;
  --border:   rgba(0,0,0,0.08);
  --border2:  rgba(0,0,0,0.14);
  --text:     rgba(0,0,0,0.90);
  --text2:    rgba(0,0,0,0.66);
  --text3:    rgba(0,0,0,0.55);
}

/* Hero text always white (over dark image) */
body.model-page .model-hero-content p { color: rgba(255,255,255,0.70); }

/* Rythme sombre / clair — mappe au type de contenu, pas alterne pour lui-meme.
   Sombre : heros, galerie, CTA final (les moments photographiques).
   Clair  : 360, couleurs, specifications, equipement, financement, formulaires.
   Voir PROJECT-CONTEXT.md, decisions verrouillees. */
body.model-page .color-picker-section { background: var(--band-light); }
body.model-page .specs-section        { background: var(--band-light); }
body.model-page .features-section     { background: var(--band-light); }

/* Le visuel du selecteur de couleur est une photo studio sur fond blanc :
   elle vit dans une carte blanche a ombre douce, comme la visionneuse 360. */
body.model-page .cp-car-wrap { background: transparent; border-radius: 0; }

/* Nav scrolled on light model pages */
body.model-page #nav.scrolled {
  background: rgba(255,255,255,0.95);
  border-bottom-color: rgba(0,0,0,0.08);
}
body.model-page #nav.scrolled .nav-logo img { filter: none; }
body.model-page #nav.scrolled .nav-logo-div { color: rgba(0,0,0,0.20); }
body.model-page #nav.scrolled .nav-logo-name { color: rgba(0,0,0,0.55); }
body.model-page #nav.scrolled .nav-links a { color: rgba(0,0,0,0.60); }
body.model-page #nav.scrolled .nav-links a:hover { color: rgba(0,0,0,0.90); }

/* Closing section always uses dark text (light bg) */
body.model-page .closing::before { display: none; }
body.model-page .closing h2, body.model-page .closing p { color: var(--text); }

/* Angle gallery stage — light surface */
body.model-page .ag-stage { background: var(--card); }

/* ── Bandes sombres ────────────────────────────────────────────────────
   Un seul bloc : il repeint le fond ET redefinit les jetons de couleur.
   Tout composant qui consomme --text / --surface / --border bascule donc
   automatiquement, sans regle par composant.
   Transition entre bandes : coupe franche, partout, sans exception. */
.hero,
.marquee,
#commercial,
#contact,
body.model-page .model-hero,
body.model-page .gallery-section,
.closing,
footer {
  background: var(--band-dark);
  --bg:       var(--band-dark);
  --surface:  #141922;
  --surface2: #1B212B;
  --card:        #141922;
  --field-bg:    rgba(255,255,255,0.05);
  --field-ph:    rgba(255,255,255,0.38);
  --border:   rgba(255,255,255,0.10);
  --border2:  rgba(255,255,255,0.18);
  --text:     rgba(255,255,255,0.92);
  --text2:    rgba(255,255,255,0.72);   /* 9.6:1  */
  --text3:    rgba(255,255,255,0.55);   /* 6.24:1 — etait 0.46 */
  --accent:        var(--accent-on-dark);
  --accent-fg:     #0B0D12;             /* blanc sur #5B9BD5 = 2.96:1, insuffisant */
  --accent-soft:   rgba(91,155,213,0.14);
  --accent-ring:   rgba(91,155,213,0.40);
  --accent-shadow: rgba(0,0,0,0.45);
  color: var(--text);
}
/* La galerie devient un bord de bande : il lui faut sa marge haute. */
body.model-page .gallery-section { padding: 80px 0; }
/* Coupe franche : pas de filet decoratif aux jonctions. */
.marquee { border-top: none; border-bottom: none; }

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; scroll-padding-top: 76px; }
body {
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; border: none; }

/* ── Layout ── */
.w { max-width: 1200px; margin: 0 auto; padding: 0 36px; }
.section { padding: 112px 0; }

/* ── Typography scale ── */
.t-eyebrow {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--text3);
}
.t-label {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}
.t-display { font-size: clamp(32px, 4.2vw, 64px); font-weight: 700; letter-spacing: -0.04em; line-height: 1.05; }
.t-h1      { font-size: clamp(40px, 5.5vw, 72px); font-weight: 700; letter-spacing: -0.04em; line-height: 0.96; }
.t-h2      { font-size: clamp(32px, 4vw, 56px); font-weight: 700; letter-spacing: -0.035em; line-height: 1.01; }
.t-h3      { font-size: clamp(20px, 2.2vw, 28px); font-weight: 700; letter-spacing: -0.022em; }
.t-body    { font-size: 16px; line-height: 1.68; color: var(--text2); }
.t-small   { font-size: 13px; line-height: 1.6; color: var(--text2); }
.accent    { color: var(--accent); }

/* ── Eyebrow pill ── */
.eyebrow {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px 13px; border-radius: 999px;
  background: rgba(0,0,0,0.04);
  border: 1px solid var(--border);
  font-family: var(--mono); font-size: 10px;
  letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--text3);
}
.eyebrow .dot {
  width: 5px; height: 5px; border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-ring);
  flex-shrink: 0;
}
.eyebrow.blue {
  background: var(--accent-soft);
  border-color: var(--accent-ring);
  color: var(--accent);
}

/* ── Buttons ── */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 13px 13px 13px 22px; border-radius: 999px;
  font: 600 14px/1 var(--sans); text-decoration: none; cursor: pointer;
  transition: transform var(--t-fast) var(--ease);
}
.btn:active { transform: scale(0.97); }
.btn-icon {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center;
  transition: transform var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.btn-icon svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

.btn-primary {
  background: var(--accent); color: var(--accent-fg);
  box-shadow: inset 0 1px 0 rgba(0,0,0,0.15), 0 4px 18px var(--accent-shadow);
}
.btn-primary .btn-icon { background: rgba(0,0,0,0.14); }
.btn-primary:hover .btn-icon { transform: translate(2px,-1px) scale(1.08); background: rgba(0,0,0,0.22); }

/* Le bouton fantome suit la bande sur laquelle il est pose : il lit les
   jetons plutot que des valeurs sombres codees en dur, sinon il devient
   illisible des qu'une section passe en sombre. */
.btn-ghost {
  background: transparent; color: var(--text);
  border: 1.5px solid var(--border2);
  padding: 13px 22px; gap: 0;
}
.btn-ghost:hover { border-color: var(--text3); background: rgba(128,128,128,0.10); color: var(--text); }

/* Un bouton plein SANS le chevron : `.btn` reserve sa marge droite au
   pastillon (13 px a droite contre 22 a gauche), ce qui decentre un bouton
   qui n'en porte pas. Les heros ont maintenant trois boutons pleins ; seul
   le premier garde le chevron, sinon trois chevrons alignes se lisent comme
   trois fois la meme action.

   `line-height: 32px` = la hauteur du pastillon. C'est ce qui donne aux
   trois boutons la MEME hauteur : sans lui le bouton sans chevron mesure
   40 px contre 58, et trois pastilles pleines de hauteurs differentes se
   lisent comme un defaut. Passer par la ligne plutot que par une hauteur
   fixe garde l'accord quand `.btn` change de marge au telephone (15 px). */
.btn-plain { padding-left: 22px; padding-right: 22px; gap: 0; line-height: 32px; }

.btn-sm {
  padding: 9px 9px 9px 16px; font-size: 13px;
}
.btn-sm .btn-icon { width: 26px; height: 26px; }
.btn-sm .btn-icon svg { width: 10px; height: 10px; }

/* ── Selecteur de langue ──────────────────────────────────────
   Il vit dans la barre de nav, qui traverse trois etats : transparente
   sur un heros sombre, blanche une fois defilee, et claire sur les pages
   sans heros. Les couleurs suivent donc les memes selecteurs que
   .nav-links plutot que d'etre fixees une fois. */
.lang-picker {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 3px; margin: 0 0 0 12px; flex-shrink: 0;
  border: 1px solid rgba(255,255,255,0.18); border-radius: 999px;
}
.lang-opt {
  min-width: 36px; height: 30px; padding: 0 8px;
  border: none; border-radius: 999px; background: none; cursor: pointer;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.08em;
  color: rgba(255,255,255,0.62);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.lang-opt:hover { color: rgba(255,255,255,0.95); }
.lang-opt.lang-on { background: var(--accent); color: var(--accent-fg); }
.lang-opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* Barre claire : meme bascule que .nav-links a */
#nav.scrolled .lang-picker,
body.light-nav #nav .lang-picker { border-color: rgba(0,0,0,0.14); }
#nav.scrolled .lang-opt,
body.light-nav #nav .lang-opt { color: rgba(0,0,0,0.55); }
#nav.scrolled .lang-opt:hover,
body.light-nav #nav .lang-opt:hover { color: rgba(0,0,0,0.90); }
#nav.scrolled .lang-opt.lang-on,
body.light-nav #nav .lang-opt.lang-on { background: var(--accent-on-light); color: #fff; }

/* Tiroir mobile : le selecteur y est reproduit, en cibles de 44px */
.nav-drawer .lang-picker { margin: 24px 0 0; border-color: rgba(255,255,255,0.22); }
.nav-drawer .lang-opt { min-width: 56px; height: 44px; font-size: 12px; }

@media (max-width: 768px) {
  /* Dans la barre, le selecteur cede la place au bouton menu ; il reste
     accessible dans le tiroir, ou les cibles font 44px. */
  #nav .nav-in > .lang-picker { display: none; }
}

/* ── Nav ── */
#nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 100;
  padding: 24px 36px;
  transition: padding var(--t-med) var(--ease), background var(--t-med) var(--ease), border-color var(--t-med) var(--ease);
  border-bottom: 1px solid transparent;
}
#nav.scrolled {
  padding: 10px 36px;
  background: rgba(255,255,255,0.90);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--border);
}
.nav-in { max-width: 1200px; margin: 0 auto; display: flex; align-items: center; gap: 4px; }
.nav-logo {
  display: inline-flex; align-items: center; gap: 10px;
  margin-right: auto; flex-shrink: 0;
}
.nav-logo img { height: 22px; width: auto; filter: brightness(0) invert(1); }
#nav.scrolled .nav-logo img { filter: brightness(0); }
#nav.scrolled .nav-logo-div { color: rgba(0,0,0,0.30); }
#nav.scrolled .nav-logo-name { color: rgba(0,0,0,0.68); }
#nav.scrolled .nav-links a { color: rgba(0,0,0,0.48); }
#nav.scrolled .nav-links a:hover { color: rgba(0,0,0,0.85); }
.nav-logo-div  { font-size: 15px; font-weight: 300; color: rgba(255,255,255,0.55); line-height: 1; }
.nav-logo-name { font-size: 12.5px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase; color: rgba(255,255,255,0.92); }

.nav-links { display: flex; gap: 2px; margin-right: 12px; }
.nav-links a {
  padding: 8px 14px; border-radius: 8px;
  font-size: 13px; font-weight: 500; color: rgba(255,255,255,0.88);
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-links a:hover { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }

/* Hamburger (mobile) */
.nav-toggle {
  display: none; background: none; border: none; cursor: pointer;
  padding: 8px; margin-right: 4px;
  flex-direction: column; gap: 5px;
}
.nav-toggle span {
  display: block; width: 22px; height: 1.5px;
  background: rgba(255,255,255,0.85); border-radius: 2px;
  transition: transform var(--t-med) var(--ease), opacity var(--t-med) var(--ease);
}
#nav.scrolled .nav-toggle span, body.light-nav .nav-toggle span { background: rgba(0,0,0,0.68); }
/* Le nav des pages modèle est BLANC une fois défilé (voir body.model-page #nav.scrolled).
   Les barres du hamburger doivent donc rester sombres — une règle blanche ici les
   rendait invisibles et supprimait toute navigation mobile après défilement. */
body.model-page #nav.scrolled .nav-toggle span { background: rgba(0,0,0,0.68); }

/* ── Light pages (contact, financement): dark nav text over light bg ── */
body.light-nav #nav .nav-logo img { filter: brightness(0); }
body.light-nav #nav .nav-logo-div { color: rgba(0,0,0,0.30); }
body.light-nav #nav .nav-logo-name { color: rgba(0,0,0,0.68); }
body.light-nav #nav .nav-links a { color: rgba(0,0,0,0.48); }
body.light-nav #nav .nav-links a:hover { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); }

/* Mobile nav drawer */
.nav-drawer {
  display: none; position: fixed; inset: 0; z-index: 99;
  background: rgba(9,9,15,0.97); backdrop-filter: blur(20px);
  padding: 100px 36px 48px;
  flex-direction: column; gap: 4px;
}
.nav-drawer.open { display: flex; }
.nav-drawer a {
  font-size: 28px; font-weight: 700; letter-spacing: -0.03em;
  color: rgba(255,255,255,0.80); padding: 12px 0;
  border-bottom: 1px solid rgba(255,255,255,0.10);
  transition: color var(--t-fast) var(--ease);
}
.nav-drawer a:hover { color: #fff; }
#nav.drawer-open .nav-toggle span { background: rgba(255,255,255,0.85) !important; }

/* ── Hero ── */
.hero {
  min-height: 100dvh; position: relative;
  display: grid; grid-template-rows: 1fr auto;
  overflow: hidden; background: var(--bg);
}
.hero-bg {
  position: absolute; inset: 0; pointer-events: none;
}
.hero-bg img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 45%;
  filter: brightness(0.60) saturate(0.9);
}
.hero-bg::after {
  content: '';
  position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(13,15,20,0.86) 0%, rgba(13,15,20,0.45) 42%, rgba(13,15,20,0.05) 100%),
    linear-gradient(to top, rgba(13,15,20,0.72) 0%, transparent 38%),
    /* bandeau haut : la barre de nav est transparente au chargement et se
       posait a meme la photo — jusqu'a 2.2:1 sur les heros clairs. */
    linear-gradient(to bottom, rgba(13,15,20,0.78) 0%, rgba(13,15,20,0.45) 60%, transparent 100%) top / 100% 150px no-repeat;
}
.hero-ambient { display: none; }
.hero-content {
  position: relative; z-index: 2; align-self: center;
  padding: 140px 36px 56px; max-width: 1200px; margin: 0 auto; width: 100%;
}
.hero-content .eyebrow { margin-bottom: 22px; }
.hero h1 { color: #ffffff; margin-bottom: 24px; }
.hero .hero-lede { max-width: 48ch; margin-bottom: 36px; color: rgba(255,255,255,0.75); }
/* Garde un chiffre avec ce qu'il mesure (« 2,7 millions… », « Garantie constructeur… ») : jamais de chiffre seul en fin de ligne. */
.hero-lede .nw { white-space: nowrap; }
.hero-content .eyebrow, .hero-content .t-eyebrow { color: rgba(255,255,255,0.55); }
.hero-actions { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; }
.hero-foot {
  position: relative; z-index: 2;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding: 20px 36px;
}
.hero-foot-in {
  max-width: 1200px; margin: 0 auto;
  display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: 12px;
}
.hero-stats { display: flex; align-items: center; gap: 20px; }
.hero-stat { font-family: var(--mono); font-size: 11px; color: rgba(255,255,255,0.45); letter-spacing: 0.1em; text-transform: uppercase; }
.hero-sep { width: 1px; height: 14px; background: rgba(255,255,255,0.18); }
.scroll-hint { display: flex; align-items: center; gap: 9px; font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.45); letter-spacing: 0.14em; text-transform: uppercase; }
.scroll-dot { width: 28px; height: 28px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.20); display: flex; align-items: center; justify-content: center; animation: bob 2.4s ease-in-out infinite; }
.scroll-dot svg { width: 10px; height: 10px; stroke: rgba(255,255,255,0.45); fill: none; stroke-width: 1.8; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(4px); } }

/* ── Marquee ── */
.marquee {
  border-top: 1px solid var(--border); border-bottom: 1px solid var(--border);
  background: var(--surface); overflow: hidden;
}
.marquee-inner {
  overflow: hidden;
  mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
  -webkit-mask-image: linear-gradient(90deg, transparent, black 8%, black 92%, transparent);
}
.marquee-track { display: flex; width: max-content; animation: mq 32s linear infinite; }
.marquee:hover .marquee-track { animation-play-state: paused; }
@keyframes mq { to { transform: translateX(-50%); } }
.mq-item { display: flex; align-items: center; }
.mq-name { font-size: 12px; font-weight: 600; letter-spacing: 0.04em; color: var(--text2); padding: 17px 28px; white-space: nowrap; }
.mq-dot { font-size: 5px; color: var(--accent); }

/* ── Section header ── */
.sh { display: flex; align-items: flex-end; gap: 56px; margin-bottom: 72px; }
.sh-left .eyebrow { margin-bottom: 16px; display: inline-flex; }
.sh-left h2 { color: var(--text); }
.sh-right { max-width: 42ch; color: var(--text2); font-size: 15px; line-height: 1.7; padding-bottom: 4px; flex-shrink: 0; }

/* Variante centree — en-tete sans paragraphe d'accompagnement (#models,
   #commercial). Le titre porte alors la section seul, donc il se centre au
   lieu de s'aligner a gauche sur un vide. Aucune regle de largeur ici : la
   media query mobile passe deja .sh en colonne, on ne fait qu'y changer
   l'alignement. */
.sh-center { flex-direction: column; align-items: center; text-align: center; }
.sh-center .sh-left { display: flex; flex-direction: column; align-items: center; }

/* ── Model grid ── */
.model-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }

/* ── Model card ── */
.mcard {
  border-radius: var(--radius); overflow: hidden; cursor: pointer;
  display: flex; flex-direction: column;
  background: var(--surface);
  box-shadow: 0 8px 32px rgba(0,0,0,0.3);
  position: relative; isolation: isolate;
  transition: box-shadow var(--t-med) var(--ease), transform var(--t-med) var(--ease);
  text-decoration: none; color: inherit;
}
/* Le halo de survol etait noir (rgba(0,0,0,0.55)) alors que #commercial vit
   sur --band-dark #0B0D12 : la carte se soulevait vraiment, mais l'ombre ne
   se voyait pas et le geste passait inapercu. Le liseré prend le relais et
   suit la bande tout seul — --border2 vaut rgba(255,255,255,0.18) sur fond
   sombre et rgba(0,0,0,0.14) sur fond clair. */
/* Le second selecteur n'est pas decoratif. Les cartes portent .rv, et
   `html.js .rv.in` (ligne ~1040) remet transform: none une fois le reveal
   termine. Sa specificite (0,3,1) egalait ou depassait celle de
   `.mcard:hover`, et elle arrive plus bas dans le fichier : le soulevement
   etait donc annule des la fin du reveal — c'est-a-dire toujours, sur le
   site reel. Seuls l'ombre et la fleche repondaient encore au survol, d'ou
   l'impression de cartes mortes. En qualifiant par .rv.in on passe a (0,4,1)
   et on repasse devant. Le selecteur nu reste pour le cas sans JS, ou .rv ne
   pose aucun transform. */
.mcard:hover,
html.js .mcard.rv.in:hover {
  box-shadow: 0 0 0 1px var(--border2), 0 26px 56px rgba(0,0,0,0.60);
  transform: translateY(-6px);
}

/* Portrait card — cinematic full-bleed */
.mcard.portrait { aspect-ratio: 3/4; justify-content: flex-end; }
.mcard.portrait .mc-img {
  position: absolute; inset: 0;
  background: var(--surface2);
}
.mcard.portrait .mc-img img {
  width: 100%; height: 100%;
  object-fit: cover; object-position: center 25%;
  filter: brightness(0.92) saturate(1.05);
  transition: transform var(--t-med) var(--ease);
}
.mcard.portrait:hover .mc-img img { transform: scale(1.04); }
.mcard.portrait .mc-img::after {
  content: ''; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(9,9,15,0.96) 0%, rgba(9,9,15,0.52) 42%, transparent 68%);
}
.mcard.portrait .mc-body {
  position: relative; z-index: 2;
  padding: 22px 24px 26px;
  display: flex; flex-direction: column;
}
/* Card text sits on a dark gradient overlay — always white */
.mc-cat { font-family: var(--mono); font-size: 9px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(255,255,255,0.50); margin-bottom: 7px; }
.mc-name { font-size: clamp(26px, 3.2vw, 44px); font-weight: 700; letter-spacing: -0.03em; line-height: 0.92; color: #fff; margin-bottom: 8px; }
.mc-spec { font-family: var(--mono); font-size: 10px; color: rgba(255,255,255,0.68); margin-top: 4px; }

/* Wide card */
.mcard.wide {
  grid-column: span 2; aspect-ratio: auto; min-height: 360px;
  background: var(--surface);
}
.mcard.wide .mc-img {
  position: absolute; inset: 0;
}
.mcard.wide .mc-img img {
  width: 100%; height: 100%; object-fit: cover; object-position: center 40%;
  filter: brightness(0.98) saturate(1.1) contrast(1.03);
  /* Les cartes portrait zooment deja au survol ; les wide restaient figees.
     Le zoom passe par --mc-zoom et non par une valeur en dur : une carte peut
     avoir un cadrage de base propre (voir Hunter EREV) et le survol se
     multiplie dessus au lieu de l'ecraser. */
  transform: scale(var(--mc-zoom, 1));
  transition: transform var(--t-med) var(--ease);
}
.mcard.wide:hover .mc-img img { transform: scale(calc(var(--mc-zoom, 1) * 1.045)); }
.mcard.wide .mc-img::after {
  content: ''; position: absolute; inset: 0;
  /* Voile renforce, mesure au pixel le plus clair sous chaque bloc de texte et
     non a la moyenne. L'ancien voile laissait .mc-cat a 2.23:1 sur la carte
     Hunter Diesel — deja en echec avant l'ajout de la carte EREV. */
  background: linear-gradient(to top, rgba(13,15,20,0.95) 0%, rgba(13,15,20,0.78) 34%, rgba(13,15,20,0.30) 54%, transparent 72%);
}
.mcard.wide .mc-body {
  position: relative; z-index: 2;
  margin-top: auto; padding: 28px;
}
.mcard.wide .mc-cat  { color: rgba(255,255,255,0.62); }
.mcard.wide .mc-name { color: #fff; }
.mcard.wide .mc-spec { color: rgba(255,255,255,0.68); }

/* La pastille fleche du survol (.mc-arrow) a ete retiree des cartes
   utilitaires a la demande : la carte entiere est deja un lien. */

/* Dark placeholder card (no image yet) */
/* .wide veut dire « occupe deux colonnes sur trois ». Dans #commercial la
   grille n'a que deux colonnes et les deux vehicules sont mis en avant a
   egalite : chaque carte occupe donc une colonne. */
#commercial .model-grid .mcard.wide { grid-column: span 1; }

/* Hunter EREV : la carte a porte pendant une session un recadrage a elle
   (`object-position: center 85%` + `--mc-zoom: 1.25`) parce que la photo source
   1920x1440 laissait un tiers de ciel vide et faisait tomber le pick-up
   derriere le voile de texte. Cette regle est partie avec la photo : la carte
   est passee en panneau clair (voir plus bas), l'image est un detoure cadre en
   `contain`, il n'y a plus ni ciel a rattraper ni voile a eviter. Elle est
   notee ici parce que son selecteur, avec son attribut href, pesait plus lourd
   que le bloc `.light` : la reintroduire telle quelle re-ecraserait le cadrage.
   */

/* Panneau clair — les deux Hunter. Ni l'un ni l'autre n'a de photo de mise en
   scene utilisable ici : ce qui existe, ce sont deux detoures studio sur fond
   transparent (hunter-diesel-blanc.png, hunter-erev-mecha-gray.png). Le fond
   du detoure etant vide, c'est la carte qui le fournit — d'ou le degrade clair,
   qui reprend celui deja cuit dans les images Startruck et M60. Tout le reste
   est le traitement standard de .mcard.wide : voile de lisibilite, texte blanc,
   vehicule cadre bas et large. Les quatre cartes de la rangee se lisent pareil.
   (Une premiere version poussait plus loin — panneau clair sans voile, encre
   sombre, vehicule entier et plus haut. Vu en place, la rangee se cassait en
   deux : Yann a demande l'alignement sur Startruck et M60, pas l'inverse.)
   Le detoure ne remplit pas la carte tout seul (2.03:1 contre ~1.35:1) : laisse
   nu il flottait haut et petit au milieu du panneau. `contain` +
   `--mc-zoom: 1.24` + `object-position: center 78%` lui rendent la presence des
   deux autres sans passer par `cover`, qui coupait le pare-chocs avant du
   Diesel et l'arriere de l'EREV — la benne est un argument de vente, elle
   reste entiere.
   Contrastes releves sur le pixel le plus clair sous chaque bloc de texte,
   texte blanc, cartes rendues puis echantillonnees (pas calcules sur le voile
   seul : c'est la carrosserie qui remonte sous le texte, pas le degrade).
   Au 1440 — Hunter 10.2 a 10.4 / 11.6 / 14.5 a 16.1 ; Startruck et M60 au meme
   endroit 10.2 / 11.4 a 11.6 / 14.4 a 14.8. Au 390 — Hunter 12.5 a 13.6 /
   13.2 / 14.6 a 14.8 ; les deux autres 13.0 a 14.0 / 13.8 / 15.3 a 15.5.
   La rangee est homogene, mesure comprise, et tout est au-dessus de AA. */
#commercial .mcard.wide.light {
  background: linear-gradient(168deg, #FFFFFF 0%, #F2F4F7 100%);
}
#commercial .mcard.wide.light .mc-img img {
  object-fit: contain;
  object-position: center 78%;
  --mc-zoom: 1.24;
}
/* Meme garde-fous que la fiche technique : sur ecran tactile le survol reste
   colle apres le tap, et le mouvement reduit coupe le soulevement. */
@media (hover: none) {
  /* Meme qualification que la regle de survol, sinon l'annulation perd. */
  .mcard:hover, html.js .mcard.rv.in:hover { transform: none; }
  .mcard.wide:hover .mc-img img { transform: scale(var(--mc-zoom, 1)); }
  .mcard.portrait:hover .mc-img img { transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .mcard, .mcard.wide .mc-img img { transition: none; }
  .mcard:hover, html.js .mcard.rv.in:hover { transform: none; }
}

.mcard.dark-ph { background: linear-gradient(155deg, #14151f 0%, var(--surface) 100%); border: 1px solid var(--border); }
.mcard.dark-ph .ph-icon { opacity: 0.12; }

/* ── Why Changan ── */
.why-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 72px; align-items: start; }
.why-left .eyebrow { margin-bottom: 18px; display: inline-flex; }
.why-left h2 { margin-bottom: 16px; }
.stat-row { display: flex; gap: 40px; margin-top: 48px; flex-wrap: wrap; }
.stat-item { display: flex; flex-direction: column; gap: 6px; }
.stat-big { font-size: 42px; font-weight: 700; letter-spacing: -0.04em; color: var(--text); line-height: 1; }
.stat-lbl { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); }

.quote-card {
  border-radius: 22px; padding: 40px; position: relative; overflow: hidden;
  background: linear-gradient(155deg, var(--surface2) 0%, var(--surface) 100%);
  border: 1px solid var(--border);
  box-shadow: 0 32px 64px -24px rgba(0,0,0,0.5);
}
.quote-card::before {
  content: '\201C';
  position: absolute; top: 6px; right: 26px;
  font-family: Georgia, 'Times New Roman', serif;
  font-size: 130px; line-height: 1;
  color: var(--accent-soft);
  pointer-events: none;
}
.q-tag  { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.2em; text-transform: uppercase; color: var(--text3); margin-bottom: 22px; position: relative; }
.q-text { font-size: clamp(18px, 1.9vw, 24px); font-weight: 600; color: var(--text); line-height: 1.34; letter-spacing: -0.02em; position: relative; }
.q-attr { margin-top: 22px; font-family: var(--mono); font-size: 10px; color: var(--text3); position: relative; }

/* ── Financing teaser ── */
.fin-teaser { background: var(--surface); border-radius: var(--radius); padding: 56px; display: grid; grid-template-columns: 1fr auto; gap: 48px; align-items: center; }
.fin-cards-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 40px; }
.fin-card {
  padding: 28px; border-radius: var(--radius-s);
  background: var(--surface2); border: 1px solid var(--border);
  display: flex; flex-direction: column; gap: 12px;
  transition: border-color var(--t-fast) var(--ease);
}
.fin-card:hover { border-color: var(--border2); }
.fin-icon {
  width: 42px; height: 42px; border-radius: 10px;
  background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.08);
  display: flex; align-items: center; justify-content: center;
}
.fin-icon svg { width: 18px; height: 18px; stroke: var(--accent); fill: none; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.fin-card h3 { font-size: 16px; font-weight: 700; letter-spacing: -0.02em; color: var(--text); }
.fin-card p  { font-size: 13.5px; color: var(--text2); line-height: 1.6; flex: 1; }
.fin-tag { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; background: var(--surface2); color: var(--text2); border: 1px solid var(--border); align-self: flex-start; }

/* ── Contact form ── */
.contact-grid { display: grid; grid-template-columns: 1.1fr 0.9fr; gap: 48px; }
.form-card { background: var(--card); border: 1px solid var(--border); border-radius: var(--radius); padding: 40px; box-shadow: var(--card-shadow); }
.form-title { font-size: 22px; font-weight: 700; letter-spacing: -0.025em; margin-bottom: 28px; color: var(--text); }
.row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.ff { margin-bottom: 14px; }
.ff label { display: block; font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); margin-bottom: 7px; }
.ff input, .ff select, .ff textarea {
  width: 100%; padding: 12px 16px; border-radius: var(--radius-s);
  border: 1.5px solid var(--border); background: var(--field-bg);
  font: 14px/1.4 var(--sans); color: var(--text); outline: none; -webkit-appearance: none;
  transition: border-color var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.ff input::placeholder, .ff textarea::placeholder { color: var(--field-ph); }
.ff select option { background: var(--surface); color: var(--text); }
.ff select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M2.5 4.5L6 8l3.5-3.5' fill='none' stroke='%23808894' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 14px center;
  background-size: 12px;
  padding-right: 40px;
  cursor: pointer;
}
.ff input:focus, .ff select:focus, .ff textarea:focus {
  border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.ff textarea { min-height: 92px; resize: vertical; }
form.contact-form.was-validated input:invalid,
form.contact-form.was-validated select:invalid {
  border-color: rgba(220,60,60,0.55);
}
.cf-note { margin-top: 14px; font-size: 13px; color: var(--text2); }

.info-panel h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 28px; color: var(--text); }
.info-row { padding: 18px 0; border-bottom: 1px solid var(--border); }
.info-row:last-of-type { border-bottom: none; }
.info-lbl { font-family: var(--mono); font-size: 9px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); margin-bottom: 4px; }
.info-val { font-size: 15px; font-weight: 600; color: var(--text); }
.info-sub { font-size: 13px; color: var(--text2); margin-top: 2px; }
.map-embed { margin-top: 24px; width: 100%; height: 210px; border: 1px solid var(--border); border-radius: var(--radius-s); display: block; filter: grayscale(0.15); }
.map-stub { margin-top: 24px; height: 160px; border-radius: var(--radius-s); border: 1px dashed var(--border); background: rgba(0,0,0,0.02); display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; }
.map-stub svg { width: 22px; height: 22px; stroke: var(--text3); fill: none; stroke-width: 1.4; }
.map-stub span { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); }

/* ── Closing CTA ── */
.closing {
  background: var(--bg); padding: 110px 0;
  text-align: center; position: relative; overflow: hidden;
}
.closing::before { display: none; }
.closing-in { position: relative; z-index: 1; }
.closing .eyebrow { margin-bottom: 22px; }
.closing h2 { color: var(--text); margin: 0 auto 20px; max-width: 18ch; }
.closing p { color: var(--text2); font-size: 17px; margin: 0 auto 36px; max-width: 44ch; line-height: 1.65; }
.closing .btn { margin: 0 auto; }

/* ── Footer — dark bookend ── */
footer { padding: 32px 36px; border-top: none; }
.foot { max-width: 1200px; margin: 0 auto; display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 14px; }
.foot-copy { font-family: var(--mono); font-size: 11px; color: var(--text3); }
.foot-links { display: flex; gap: 20px; }
.foot-links a { font-family: var(--mono); font-size: 11px; color: var(--text2); transition: color var(--t-fast) var(--ease); }
.foot-links a:hover { color: var(--accent); }

/* ── Model (detail) page ── */
.model-hero {
  min-height: 100dvh; position: relative;
  display: flex; flex-direction: column; justify-content: flex-end;
  overflow: hidden; background: var(--bg);
}
.model-hero-bg { position: absolute; inset: 0; }
.model-hero-bg img { width: 100%; height: 100%; object-fit: cover; object-position: center 40%; filter: brightness(0.62) saturate(0.95); }
.model-hero-bg::after {
  content: ''; position: absolute; inset: 0;
  background:
    linear-gradient(to right, rgba(9,9,15,0.85) 0%, rgba(9,9,15,0.4) 55%, rgba(9,9,15,0.1) 100%),
    linear-gradient(to top, rgba(9,9,15,0.95) 0%, transparent 45%),
    linear-gradient(to bottom, rgba(9,9,15,0.78) 0%, rgba(9,9,15,0.45) 60%, transparent 100%) top / 100% 150px no-repeat;
}
.model-hero-content {
  position: relative; z-index: 2;
  padding: 120px 36px 60px; max-width: 1200px; margin: 0 auto; width: 100%;
}
.model-hero-content .eyebrow { margin-bottom: 18px; }
.model-hero-content h1 { color: var(--text); margin-bottom: 18px; }
.model-hero-content p  { color: rgba(0,0,0,0.52); font-size: 17px; max-width: 52ch; line-height: 1.65; margin-bottom: 32px; }

/* Specs table */
.specs-section { padding: 80px 0; }
.specs-grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 80px;
  /* Le bloc titre/texte/bouton est plus court que la liste de specs : sans
     ce centrage il flottait en haut de colonne, decale par rapport au
     tableau. align-items:center l'aligne sur le milieu de la liste. */
  align-items: center;
}

.specs-left h2 { color: var(--text); margin-bottom: 12px; }
.specs-left p   { color: var(--text2); font-size: 15px; line-height: 1.68; margin-bottom: 36px; }
/* La fiche technique est une carte, comme la visionneuse 360 (.cp-stage) et
   le formulaire (.form-card) : meme --card-shadow, meme rayon. Le tableau
   flottait sur la bande claire sans arete, il se lisait comme du texte libre.
   Carte blanche et non panneau sombre : PROJECT-CONTEXT verrouille #specs
   sur une bande claire. */
.spec-list {
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 8px 28px;
  box-shadow: var(--card-shadow);
  /* La carte se souleve au survol, comme les vignettes modele. Seuls
     transform et box-shadow sont animes : ni l'un ni l'autre ne declenche
     de reflow, la liste ne bouge donc pas ses voisins. */
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.spec-list:hover {
  transform: translateY(-5px);
  box-shadow: 0 24px 64px rgba(16,24,40,0.16);
}
/* Sur ecran tactile le survol reste colle apres le tap : la carte y demeure
   posee. Meme logique pour le mouvement reduit. */
@media (hover: none) {
  .spec-list:hover { transform: none; box-shadow: var(--card-shadow); }
}
@media (prefers-reduced-motion: reduce) {
  .spec-list { transition: none; }
  .spec-list:hover { transform: none; }
}
.spec-row {
  display: grid; grid-template-columns: 1fr 1.2fr;
  padding: 15px 0; border-bottom: 1px solid var(--border);
  transition: padding-left var(--t-fast) var(--ease);
  cursor: default;
}
/* La carte fournit deja l'arete basse : un dernier filet ferait doublon. */
.spec-row:last-child { border-bottom: none; }
.spec-row:hover { padding-left: 8px; }
.spec-lbl { font-family: var(--mono); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); align-self: center; }
.spec-val { font-size: 15px; font-weight: 600; color: var(--text); }

/* Features list */
.features-section { padding: 0 0 80px; }
.features-section h2 { color: var(--text); margin-bottom: 32px; }
.features-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.feature-item {
  padding: 24px; border-radius: var(--radius-s);
  background: var(--surface); border: 1px solid var(--border);
}
.feature-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-bottom: 14px; }
.feature-item p { font-size: 14px; line-height: 1.6; color: var(--text2); }

/* Equipment photo grid */
/* Les photos ouvrent la section et la liste texte suit : la marge vit donc sur
   la liste, pas sur la grille photo, sinon elle s'ajoutait au margin-bottom du
   titre et creusait 80px sous le h2. */
.eq-photo-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.eq-photo-grid + .features-grid { margin-top: 48px; }
.eq-photo-card {
  border-radius: 14px; overflow: hidden;
  background: var(--surface); border: 1px solid var(--border);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.eq-photo-card:hover { transform: translateY(-4px); box-shadow: 0 12px 32px rgba(0,0,0,0.10); }
.eq-photo-card img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; }
.eq-photo-card span {
  display: block; padding: 12px 14px;
  font-size: 13px; font-weight: 500; color: var(--text2);
  letter-spacing: 0.01em;
}

/* Gallery */
.gallery-section { padding: 0 0 80px; }
.gallery-section h2 { color: var(--text); margin-bottom: 32px; }
.gallery-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
/* height:100% sur les vignettes : la premiere occupe 2 colonnes en 16/9 et
   fixe donc la hauteur de sa rangee, bien plus haute qu'une vignette 4/3
   seule. Sans hauteur imposee la voisine gardait sa hauteur propre et
   laissait un rectangle de fond nu sous elle. object-fit:cover recadre. */
.gallery-grid img { width: 100%; height: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 12px; transition: transform var(--t-med) var(--ease); cursor: pointer; }
.gallery-grid img:first-child { grid-column: span 2; aspect-ratio: 16/9; }
/* La derniere vignette s'etire sur les colonnes restantes de sa rangee. Sans
   cette regle une galerie de 4 photos laisse une cellule vide -- un rectangle
   de fond nu en bas a droite : la premiere vignette occupe deja 2 colonnes,
   donc n photos consomment n+1 cellules et seul un multiple de 3 tombe juste.
   Concerne 4 photos (span 2) et 3 ou 6 photos (span 3) ; 5 photos tombent
   deja juste et ne matchent aucune des deux regles. Les ratios elargis
   gardent la hauteur de rangee alignee sur celle de la premiere vignette. */
.gallery-grid img:last-child:nth-child(3n)   { grid-column: span 3; aspect-ratio: 24/9; }
.gallery-grid img:last-child:nth-child(3n+1) { grid-column: span 2; aspect-ratio: 16/9; }
.gallery-grid img:hover { transform: scale(1.02); }

/* ── Financing page ── */
/* Cet element porte aussi .w, dont le raccourci padding (0 20px sous 768px,
   declare plus bas dans le fichier) remettait le padding haut a zero : le
   eyebrow passait alors sous la barre de nav fixe. Deux classes pour gagner
   en specificite, et des longhands pour ne plus se battre sur un raccourci. */
.fin-page-header.w { padding-top: 140px; padding-bottom: 72px; }
.fin-page-header .eyebrow { margin-bottom: 20px; display: inline-flex; }
.fin-page-header h1 { color: var(--text); margin-bottom: 18px; max-width: 16ch; }
.fin-page-header p { color: var(--text2); font-size: 17px; max-width: 52ch; line-height: 1.65; }
.fin-page-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; margin-bottom: 20px; }
.fin-calc {
  padding: 36px 40px; border-radius: var(--radius); margin-top: 16px;
  border: 1.5px dashed var(--border); background: rgba(0,0,0,0.02);
  display: flex; align-items: center; justify-content: space-between; gap: 32px; flex-wrap: wrap;
}
.fin-calc .label { font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--text3); margin-bottom: 8px; }
.fin-calc h3 { font-size: 20px; font-weight: 700; letter-spacing: -0.025em; color: var(--text); margin-bottom: 6px; }
.fin-calc p { font-size: 14px; color: var(--text2); max-width: 42ch; line-height: 1.55; }
.fin-badge { padding: 9px 18px; border-radius: 999px; border: 1px solid var(--border); font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--text3); white-space: nowrap; }

/* ── Commercial range list ── */
.range-list { border-top: 1px solid var(--border); }
.range-row {
  display: grid; grid-template-columns: 2.2fr 2fr 1fr auto;
  align-items: center; gap: 24px;
  padding: 22px 0; border-bottom: 1px solid rgba(0,0,0,0.04);
  cursor: pointer; border-radius: 6px; transition: background var(--t-fast) var(--ease);
}
.range-row:hover { background: rgba(128,128,128,0.08); padding-left: 12px; padding-right: 12px; margin: 0 -12px; }
.range-name { font-size: 18px; font-weight: 700; color: var(--text); letter-spacing: -0.02em; }
.range-sub  { font-family: var(--mono); font-size: 9px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--text3); margin-top: 3px; }
.range-spec { font-family: var(--mono); font-size: 11.5px; color: var(--text2); }
.range-tag  { display: inline-flex; align-items: center; padding: 4px 11px; border-radius: 999px; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; background: var(--surface2); color: var(--text2); }
.range-tag.erev { background: var(--accent-soft); color: var(--accent); }
.range-btn { display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 999px; border: 1px solid var(--border); font: 500 12px/1 var(--sans); color: var(--text2); background: none; cursor: pointer; transition: border-color var(--t-fast) var(--ease), color var(--t-fast) var(--ease); white-space: nowrap; }
.range-btn:hover { border-color: var(--text3); color: var(--text); }
.range-btn svg { width: 10px; height: 10px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* L'en-tete de #models est le seul du site dont le contenu est pleine largeur :
   le carrousel commence a 20px et ses onglets a 52px, alors que .w placait le
   titre a 156px au 1440. On sort donc cet en-tete du centrage de .w.
   Historiquement il s'alignait ensuite sur le bord du carrousel ; depuis que
   l'en-tete et les onglets sont centres (2026-07-31), il ne reste de cette
   regle que la sortie de .w — les marges auto ci-dessous font le centrage, et
   la largeur de 1128px est conservee pour ne pas relancer les longueurs de
   ligne du titre.
   Les autres .sh (#commercial, #contact, /contact, /financement) introduisent
   du contenu qui vit dans .w : ils sont deja alignes et ne bougent pas. */
#models > .w { max-width: none; padding-left: 60px; padding-right: 60px; }
#models .sh { max-width: 1128px; margin-left: auto; margin-right: auto; }

/* ── Car Showcase Carousel ── */
/* L'en-tete de #models portait un padding-top nul : l'oeil « Gamme Passagers »
   se retrouvait colle sous le bandeau defilant. On lui rend la respiration des
   autres sections. En dessous de 768px la media query .section (72px) s'applique
   deja et gagne, donc la valeur est identique aux deux largeurs. */
.cs-section { padding-top: 72px; }
.cs-outer { position: relative; background: var(--bg); }

.cs-slide {
  display: none;
  grid-template-columns: minmax(0,1fr);
  justify-items: center;
  text-align: center;
  gap: 0;
  padding: 52px 40px 44px;
  max-width: 1400px;
  margin: 0 auto;
}
/* .cs-info n'est plus qu'un conteneur logique : display:contents fait de ses
   enfants des items de la grille, ce qui permet aux boutons de passer SOUS
   le vehicule sans toucher au HTML. */
.cs-info { display: contents; }
.cs-slide.cs-active {
  display: grid;
  animation: cs-in 380ms cubic-bezier(0.32,0.72,0,1) both;
}
.cs-slide.cs-exit { animation: cs-out 200ms ease forwards; }
@keyframes cs-in  { from { opacity:0; transform:translateX(28px); } to { opacity:1; transform:none; } }
@keyframes cs-out { to   { opacity:0; transform:translateX(-20px); } }

/* Le nom visible est desormais porte par .cs-ghost. Le <h2> reste dans le DOM,
   masque visuellement, pour que la structure de titres de la page survive. */
.cs-name {
  position:absolute; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip-path:inset(50%); white-space:nowrap; border:0;
}
.cs-tag  { font-family:var(--mono); font-size:10px; letter-spacing:0.14em; text-transform:uppercase; color:var(--accent); margin-bottom:22px; display:block; }
.cs-tagline { font-size:16px; color:var(--text2); line-height:1.65; margin-bottom:36px; max-width:32ch; }
.cs-actions { grid-row:2; display:flex; gap:12px; flex-wrap:wrap; align-items:center; justify-content:center; margin-top:4px; }

.cs-stage {
  grid-row: 1;
  background: transparent;
  display: flex; align-items: center; justify-content: center;
  width: 100%; max-width: 1000px;
  min-height: 470px;
  padding: 0;
  position: relative;
  overflow: hidden;
}
/* Giant ghosted model name behind the car */
/* Une diapositive sans detourage exploitable porte un espace reserve a la
   place du vehicule. Le mot geant reste : il porte le nom du modele sur les
   sept diapositives, la carte se pose dessus comme le ferait la voiture. */
.cs-stage--ph { padding: 0 20px; }
.cs-stage--ph .photo-placeholder { width: 100%; max-width: 760px; position: relative; z-index: 1; margin-top: 64px; }
.cs-ghost {
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 12px;
  font-size: clamp(58px, 9.5vw, 132px); font-weight: 700;
  letter-spacing: -0.045em; line-height: 1;
  /* Ce mot EST le titre du modele : il porte de l'information, donc le seuil
     AA grand texte (3:1) s'applique. Mesure : le navy en filigrane plafonne a
     2.99:1 a l'opacite ou il ressemble encore a un filigrane — il ne peut donc
     pas porter le nom. Noir a 82% = 12.88:1 sur #F4F6F8, et laisse le navy au
     seul bouton au lieu d'avoir deux bleus qui se disputent la diapositive. */
  color: rgba(0,0,0,0.82);
  white-space: nowrap; user-select: none; pointer-events: none;
  text-transform: uppercase;
}
.cs-stage img {
  max-height: 400px; max-width: 800px; margin: 70px auto 0;
  width: 100%; object-fit: contain;
  position: relative; z-index: 1;
  animation: car-in 480ms cubic-bezier(0.32,0.72,0,1) both;
}
.cs-stage::after {
  display: none;
}
@keyframes car-in { from { opacity:0; transform:translateX(36px); } to { opacity:1; transform:none; } }

/* Arrows */
.cs-arrow {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; z-index: 10;
  background: rgba(0,0,0,0.05); border: 1px solid rgba(0,0,0,0.09);
  display: flex; align-items: center; justify-content: center; cursor: pointer;
  transition: background var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease), transform var(--t-fast) var(--ease);
}
.cs-arrow:hover { background: rgba(128,128,128,0.16); border-color: var(--border2); transform: translateY(-50%) scale(1.05); }
.cs-prev { left: 20px; }
.cs-next { right: 20px; }

/* Model tabs */
.cs-tabs {
  border-top: 1px solid var(--border);
  display: flex; overflow-x: auto; padding: 0 52px;
  scrollbar-width: none;
  /* `safe` est indispensable ici : la bande defile horizontalement, et un
     `center` nu rend les premiers onglets inatteignables des que le contenu
     deborde (le trop-plein part des deux cotes et on ne peut pas defiler vers
     la gauche). Avec `safe`, le navigateur retombe sur `start` en cas de
     debordement — centre au 1440, defilable au 390. */
  justify-content: safe center;
}
.cs-tabs::-webkit-scrollbar { display: none; }
.cs-tab {
  position: relative;
  padding: 16px 24px; flex-shrink: 0;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--text3); background: none; border: none; cursor: pointer;
  transition: color var(--t-fast) var(--ease);
}
.cs-tab::after {
  content: '';
  position: absolute; bottom: 0; left: 0;
  height: 2px; width: 0;
  background: var(--accent);
}
.cs-tab.cs-active { color: var(--text); }
.cs-tab.cs-active::after {
  animation: cs-progress 4s linear forwards;
}
/* Autoplay pauses on hover — pause the progress bar too */
.cs-outer:hover .cs-tab.cs-active::after { animation-play-state: paused; }
.cs-tab:hover:not(.cs-active) { color: var(--text2); }
@keyframes cs-progress {
  from { width: 0; }
  to   { width: 100%; }
}

@media (max-width: 900px) {
  #models > .w { padding-left: 20px; padding-right: 20px; }
  .cs-slide { padding: 32px 20px 34px; }
  .cs-stage { min-height: 250px; }
  .cs-stage img { max-height: 210px; margin-top: 40px; }
  .cs-actions { margin-top: 10px; }
  .cs-arrow { display: none; }
  .cs-tabs { padding: 0 16px; }
}

/* ── Color Picker ── */
.color-picker-section {
  padding: 80px 0 96px;
  background: #0d0f14;
}
.color-picker-section .t-h2 { color: #fff; }

.color-picker-section .cp-swatch { box-shadow: 0 0 0 1.5px rgba(255,255,255,0.2); }
.color-picker-section .cp-swatch.cp-active::after { border-color: var(--accent); }
.cp-header {
  display: flex; align-items: baseline; justify-content: space-between;
  margin-bottom: 48px; flex-wrap: wrap; gap: 12px;
}
.cp-color-name {
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em;
  text-transform: uppercase; color: var(--accent);
}
.cp-stage {
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 40px;
  background: var(--card); border-radius: 24px; padding: 20px;
  box-shadow: var(--card-shadow);
}
.cp-car-wrap {
  position: relative;
  width: 100%;
  height: 480px;
  background: #f5f6f8;
  border-radius: 20px;
  overflow: hidden;
}
.cp-car-img {
  position: absolute;
  inset: 0;
  width: 100%; height: 100%;
  object-fit: contain;
  transition: opacity var(--t-med) var(--ease);
}
.cp-layer-b {
  opacity: 0;
}
.cp-swatches {
  display: flex; gap: 14px; flex-wrap: wrap; align-items: center; justify-content: center;
}
.cp-swatch {
  width: 36px; height: 36px; border-radius: 50%;
  background: var(--swatch-color);
  border: 2px solid rgba(0,0,0,0.08);
  cursor: pointer; position: relative;
  transition: transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.cp-swatch::after {
  content: ''; position: absolute;
  inset: -5px; border-radius: 50%;
  border: 2px solid transparent;
  transition: border-color var(--t-fast) var(--ease);
}
.cp-swatch:hover { transform: scale(1.12); }
.cp-swatch.cp-active::after { border-color: var(--accent); }

/* ── Revelation au defilement ─────────────────────────────────────────
   Le masquage est conditionne a html.js, pose par config.js dans <head>
   avant le premier rendu. Si le JS n'arrive jamais — connexion coupee,
   erreur, blocage — rien n'est masque et la page reste entierement
   lisible. Auparavant .rv masquait sans condition : sans site.js le site
   etait une page blanche.
   Pas de filter : c'etait la partie couteuse a peindre et la plus voyante.
   Le premier ecran n'est jamais anime (voir reveal() dans js/site.js). */
.rv { transition: opacity var(--t-med) var(--ease), transform var(--t-med) var(--ease); }
html.js .rv { opacity: 0; transform: translateY(10px); }
html.js .rv.in { opacity: 1; transform: none; }
html.js .rv.rv-now { transition: none; }
html.js .hero-content.rv, html.js .model-hero-content.rv { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: reduce) {
  .rv, html.js .rv { opacity: 1; transform: none; transition: none; }
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .model-grid { grid-template-columns: repeat(2, 1fr); }
  .mcard.wide { grid-column: span 2; }
  .why-grid { grid-template-columns: 1fr; gap: 48px; }
  .fin-cards-row { grid-template-columns: 1fr; }
  .contact-grid { grid-template-columns: 1fr; }
  .specs-grid { grid-template-columns: 1fr; gap: 40px; }
  .fin-page-cards { grid-template-columns: 1fr; }
  .features-grid { grid-template-columns: 1fr 1fr; }
  /* Trois colonnes de vignettes 4/3 deviennent illisibles sous 1024px — la
     grille photo suit la meme reduction que les autres. */
  .eq-photo-grid { grid-template-columns: repeat(2, 1fr); }
  .sh { flex-direction: column; align-items: flex-start; gap: 16px; }
  /* Cette regle arrive apres .sh-center et a la meme specificite : sans ce
     rappel, l'en-tete centre repasserait a gauche sous 1024px. */
  .sh-center { align-items: center; }
  .range-row { grid-template-columns: 1fr 1fr; }
  .range-row .range-btn { display: none; }
  .fin-teaser { grid-template-columns: 1fr; }
}
@media (max-width: 768px) {
  .w { padding: 0 20px; }
  .section { padding: 72px 0; }
  #nav { padding: 18px 20px; }
  #nav.scrolled { padding: 10px 20px; }
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  .hero-content { padding: 120px 20px 48px; }
  .hero-foot { padding: 16px 20px; }
  .model-grid { grid-template-columns: 1fr; }
  #commercial .model-grid { grid-template-columns: 1fr !important; }
  .mcard.wide { grid-column: span 1; min-height: 360px; }
  .model-grid .mcard.wide .mc-img img { object-position: center center; }
  /* Les deux cartes en detoure ont besoin de leur propre reglage ici. Sous
     768px la grille passe a une colonne : la carte devient presque carree
     (~350x390) alors que le detoure fait 2:1. En `contain` il ne remplissait
     plus qu'un bandeau, et le cadrage bas du 1440 l'enfonçait sous le voile —
     le pick-up sortait gris sur les deux cartes. Startruck et M60 n'ont pas ce
     probleme, leur `cover` se recadre tout seul. Zoom plus franc et assise plus
     haute : le vehicule occupe la zone claire, le voile ne prend que les roues.
     Mesure refaite a cette largeur, elle est plus favorable qu'au 1440. */
  #commercial .mcard.wide.light .mc-img img { object-position: center 44%; --mc-zoom: 1.45; }
  /* Le voile est calibre sur une carte de 360px : le texte y occupe le tiers
     bas, la ou le degrade est dense. A 260px le meme texte occupait 60% de la
     carte et debordait dans la zone claire — `.mc-cat` tombait a 2.08:1 sur le
     Hunter EREV et 2.86:1 sur le Hunter Diesel, sous le seuil AA de 4.5:1
     (deja le cas avant cette session). On rend sa hauteur a la carte plutot que
     d'alourdir le voile : assombrir davantage reglait le contraste en effacant
     le vehicule, ce qui est exactement ce que la carte doit montrer.
     La hauteur seule laissait le Hunter EREV a 4.50:1, pile sur le seuil — son
     `.mc-cat` passe sur deux lignes et mord dans le ciel clair de la photo. Le
     voile est donc repris d'un cran : le minimum mesure qui donne de la marge
     (5.62:1) sans noircir la carte. */
  .mcard.wide .mc-img::after {
    background: linear-gradient(to top,
      rgba(13,15,20,0.95) 0%,
      rgba(13,15,20,0.82) 38%,
      rgba(13,15,20,0.42) 60%,
      transparent 80%);
  }
  .gallery-grid { grid-template-columns: 1fr 1fr; }
  .gallery-grid img:first-child { grid-column: span 2; }
  /* Deux colonnes : le compte qui tombe juste change, donc on annule les
     regles 3 colonnes avant de reposer la bonne (span 2 pour un nombre pair
     de photos). L'annulation doit precede la regle, meme specificite. */
  .gallery-grid img:last-child:nth-child(3n),
  .gallery-grid img:last-child:nth-child(3n+1) { grid-column: auto; aspect-ratio: 4/3; }
  .gallery-grid img:last-child:nth-child(2n)   { grid-column: span 2; aspect-ratio: 16/9; }
  .features-grid { grid-template-columns: 1fr; }
  .row2 { grid-template-columns: 1fr; }
  .why-grid { gap: 40px; }
  footer { padding: 24px 20px; }
  .foot { flex-direction: column; align-items: flex-start; gap: 12px; }
  .stat-row { gap: 28px; }
  .range-row { grid-template-columns: 1fr; gap: 8px; }
  .range-row .range-tag, .range-row .range-btn { display: none; }
}


/* ============================================================
   Visionneuse 360° (déplacé depuis l'inline UNI-K + généralisé)
   ============================================================ */
.viewer-360-section { padding: 80px 0; }
.viewer-360-section .viewer-360-sub { color: var(--text2); }
.ag-viewer { display:flex; flex-direction:column; gap:16px; }
.ag-stage {
  position:relative; background:var(--surface); border-radius:20px;
  overflow:hidden; aspect-ratio:16/9;
  user-select:none; -webkit-user-select:none;
}
.ag-mode-drag .ag-stage { cursor:ew-resize; }
.ag-layer {
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:cover; display:block; pointer-events:none;
  transition:opacity var(--t-med) var(--ease);
}
.ag-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  background:rgba(0,0,0,0.45); border:0.5px solid rgba(255,255,255,0.12);
  color:rgba(255,255,255,0.85); border-radius:50%;
  width:44px; height:44px; display:flex; align-items:center; justify-content:center;
  cursor:pointer; transition:background var(--t-fast) var(--ease);
  backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
}
.ag-arrow:hover { background:var(--accent); }
.ag-arrow-l { left:16px; }
.ag-arrow-r { right:16px; }
/* .ag-label — l'etiquette « ANGLE N » / « INTERIEUR N » posee sur l'image
   a ete retiree a la demande. Le libelle vit toujours dans l'alt de la vue
   et dans celui de la vignette, donc rien ne se perd hors de l'ecran. */
/* .ag-hint — l'indice « glisser » a ete retire a la demande. La rotation au
   doigt reste possible, elle n'est simplement plus annoncee. */
.ag-thumbs { display:flex; gap:8px; overflow-x:auto; padding-bottom:4px; scrollbar-width:none; }
.ag-thumbs::-webkit-scrollbar { display:none; }
.ag-thumb {
  flex-shrink:0; width:90px; height:60px; border-radius:10px; overflow:hidden;
  border:2px solid transparent; cursor:pointer; transition:border-color var(--t-fast) var(--ease);
  background:var(--surface);
}
.ag-thumb img { width:100%; height:100%; object-fit:cover; display:block; pointer-events:none; }
.ag-thumb.active { border-color:var(--accent); }
.ag-tabs { display:flex; gap:8px; }
.ag-tab {
  padding:8px 20px; border-radius:50px; font-size:13px; font-family:inherit;
  border:0.5px solid var(--border2); background:transparent; color:var(--text2);
  cursor:pointer; transition:all var(--t-fast) var(--ease);
}
.ag-tab-active, .ag-tab:hover { background:var(--accent); border-color:var(--accent); color:var(--accent-fg); }


/* La visionneuse 360° vit dans une carte blanche sur une section gris clair,
   car les vues sont des photos studio sur fond blanc. */
.viewer-360-section { background:var(--band-light); }
.viewer-360-section .t-h2 { color:#101418; }

.viewer-360-section .viewer-360-sub { color:#5b6570; }
.ag-card {
  background:var(--card); border-radius:24px; padding:20px;
  box-shadow:var(--card-shadow);
}
.ag-stage { background:#FFFFFF; border:1px solid #eceff2; }
.ag-thumb { background:#FFFFFF; border:2px solid #e6eaee; }
.ag-thumb.active { border-color:var(--accent); }
.ag-tab:not(.ag-tab-active) { color:#5b6570; border-color:#d8dde2; }


/* ============================================================
   "Photos bientôt disponibles" — composant réutilisable.
   Utilisé partout où un emplacement d'image est vide ;
   retirer dès que la vraie photo arrive.
   ============================================================ */
.photo-placeholder {
  display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:14px; text-align:center; padding:48px 24px; min-height:320px;
  background:radial-gradient(120% 120% at 50% 0%, #151a24 0%, #0b0d13 55%, #07080c 100%);
  border:1px solid rgba(255,255,255,0.07); border-radius:20px;
}
.photo-placeholder .pp-logo { width:54px; height:auto; opacity:.55; }
.photo-placeholder .pp-title {
  color:rgba(255,255,255,.92); font-size:14px; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase; margin:0;
}
.photo-placeholder .pp-sub {
  color:rgba(255,255,255,.45); font-size:14px; line-height:1.6;
  max-width:420px; margin:0;
}
.photo-placeholder .pp-cta {
  display:inline-flex; align-items:center; gap:9px; margin-top:8px;
  padding:11px 22px; border-radius:50px; font-size:14px;
  color:rgba(255,255,255,.9); text-decoration:none;
  border:1px solid rgba(255,255,255,.22); transition:all var(--t-fast) var(--ease);
}
.photo-placeholder .pp-cta:hover {
  border-color:#25D366; color:#fff; background:rgba(37,211,102,.12);
}
.photo-placeholder .pp-cta svg { color:#25D366; }
/* variante héro : remplit le fond du héro */
.model-hero-bg .photo-placeholder--hero {
  position:absolute; inset:0; border-radius:0; border:none; min-height:100%;
  z-index:0; padding-bottom:140px;
}


/* Voile des heros — sur mobile le texte occupe toute la largeur, un degrade
   lateral ne le couvre donc pas. On passe a un voile vertical, appuye en bas,
   la ou le titre et le sous-titre se posent. Mesure au pixel le plus clair
   sous chaque bloc de texte, pas a la moyenne. */
@media (max-width: 768px) {
  .hero-bg::after, .model-hero-bg::after {
    background:
      linear-gradient(to top, rgba(9,9,15,0.94) 0%, rgba(9,9,15,0.78) 38%, rgba(9,9,15,0.42) 70%, rgba(9,9,15,0.28) 100%),
      linear-gradient(to bottom, rgba(9,9,15,0.80) 0%, rgba(9,9,15,0.45) 60%, transparent 100%) top / 100% 130px no-repeat;
  }
}

/* Le sous-titre du composant « photos bientot disponibles » etait a 4.4:1. */
.photo-placeholder .pp-sub { color: rgba(255,255,255,.62); }

/* Bouton WhatsApp flottant — discret mais toujours a portee de pouce. */
.wa-fab {
  position:fixed; right:22px; bottom:22px; z-index:900;
  width:56px; height:56px; border-radius:50%;
  display:flex; align-items:center; justify-content:center;
  background:var(--accent-on-light); color:#25D366;
  box-shadow:0 8px 24px rgba(0,0,0,.35);
  transition:transform var(--t-fast) var(--ease), box-shadow var(--t-fast) var(--ease);
}
.wa-fab:hover { transform:translateY(-2px) scale(1.04); box-shadow:0 12px 30px rgba(0,0,0,.42); color:#fff; }
.wa-fab svg { width:28px; height:28px; }
@media (max-width:480px) {
  .wa-fab { right:16px; bottom:18px; width:52px; height:52px; }
}


/* ============================================================
   Passe mobile 390x844 — corrections
   Voir STATE.md. Regroupé ici volontairement : chaque règle
   corrige un défaut constaté à 390px, pas un choix de design.
   La refonte de l'en-tête mobile reste un chantier Phase 1B.
   ============================================================ */

/* 1. Contraste du sélecteur de couleur.
   body.model-page repeint la section en clair (#f4f5f7) mais le titre
   restait blanc : rapport de contraste 1.09:1, titre invisible. */
body.model-page .color-picker-section .t-h2 { color: #101418; }
body.model-page .color-picker-section .cp-swatch { box-shadow: 0 0 0 1.5px rgba(0,0,0,0.12); }
.cp-color-name { color: var(--accent); }

/* 3. Le geste horizontal appartient à la visionneuse, le vertical à la page.
   Sans cela le doigt fait défiler la page pendant la rotation. */
.ag-stage { touch-action: pan-y; }

@media (max-width: 768px) {
  /* 4. Le bouton « Nous Contacter » de la barre de navigation dépassait de
     8px hors écran et se cassait sur deux lignes. Le tiroir contient déjà
     l'entrée, et le héros porte ses propres appels à l'action. */
  #nav .nav-in > .btn { display: none; }

  /* 5. iOS zoome le formulaire dès qu'un champ fait moins de 16px. */
  .ff input, .ff select, .ff textarea { font-size: 16px; }

  /* 6. .cp-car-wrap était figé à 480px de haut : à 350px de large le
     véhicule ne remplissait que ~160px et les pastilles de couleur
     tombaient sous la ligne de flottaison. */
  .cp-car-wrap { height: auto; aspect-ratio: 2 / 1; }

  /* 7. Cibles tactiles — 44px minimum.
     Le logo et le hamburger gagnent leur zone tactile par padding compense
     d'une marge negative : la cible fait 44px sans que la barre grandisse. */
  .cp-swatch { width: 44px; height: 44px; }
  .ag-tab { min-height: 44px; padding: 10px 20px; }
  .foot-links { gap: 8px; flex-wrap: wrap; }
  .foot-links a { padding: 14px 8px; }
  .nav-logo { padding: 11px 0; margin: -11px 0; }
  .nav-toggle { padding: 15px 11px; margin: -7px -11px -7px 0; }
  .btn, .btn-ghost { padding-top: 15px; padding-bottom: 15px; }
  .info-row a { display: inline-block; padding: 12px 0; }

  /* 8. À 310px de scène les flèches se posaient en plein sur le véhicule.
     On garde 44px de zone tactile mais on les colle aux bords. */
  .ag-arrow-l { left: 6px; }
  .ag-arrow-r { right: 6px; }
  .ag-arrow { background: rgba(0,0,0,0.32); }
}

/* 9. Le bouton WhatsApp (z-index 900) flottait au-dessus du tiroir (z-index 99). */
.nav-drawer.open ~ .wa-fab { display: none; }

/* ============================================================
   #autres-modeles — la gamme en bas de chaque page modele
   Bande claire entre #galerie et #cta, toutes deux sombres : la coupe
   dure tombe donc des deux cotes, conformement au systeme de bandes.
   Les tuiles sont construites par js/site.js a partir de config.js —
   le HTML ne porte que la coquille (titre + lien gamme), pour qu'un
   visiteur sans JS garde une sortie. Voir SITE-STRUCTURE §11.
   ============================================================ */
.am-section { background: var(--bg); padding: 92px 0; }
.am-head { max-width: 1128px; margin: 0 auto 40px; padding: 0 32px;
           text-align: center; position: relative; }
.am-head h2 { font-size: clamp(30px, 4.2vw, 52px); font-weight: 700;
              letter-spacing: -0.035em; line-height: 1.02; color: var(--text); margin: 0; }

/* La rangee saigne jusqu'aux bords de la fenetre : une tuile coupee au bord
   est la seule facon honnete d'annoncer qu'il reste des modeles a voir. */
.am-scroll {
  display: flex; gap: 20px; overflow-x: auto; overflow-y: hidden;
  padding: 6px max(20px, calc((100% - 1128px) / 2)) 10px;
  scroll-snap-type: x proximity;
  scrollbar-width: none; -webkit-overflow-scrolling: touch;
}
.am-scroll::-webkit-scrollbar { display: none; }
/* Voile de bord, allume seulement du cote ou il reste du contenu. */
.am-scroll.can-r { mask-image: linear-gradient(to right, #000 calc(100% - 64px), transparent 100%); }
.am-scroll.can-l { mask-image: linear-gradient(to right, transparent 0, #000 64px); }
.am-scroll.can-l.can-r {
  mask-image: linear-gradient(to right, transparent 0, #000 64px,
                              #000 calc(100% - 64px), transparent 100%);
}

.am-tile {
  position: relative; flex: 0 0 268px; scroll-snap-align: start;
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  padding: 0 0 16px; text-decoration: none;
  transition: transform 240ms cubic-bezier(0.32,0.72,0,1), box-shadow 240ms;
}
a.am-tile:hover { transform: translateY(-3px); box-shadow: 0 14px 34px rgba(0,0,0,0.10); }

.am-shot { position: relative; z-index: 1; height: 148px; margin: 32px 14px 0;
           display: flex; align-items: center; justify-content: center; }
.am-shot img { display: block; }
.am-shot img.cut { max-width: 100%; max-height: 100%; object-fit: contain; }
.am-shot img.pho { width: 100%; height: 100%; object-fit: cover; border-radius: 9px; }

.am-name { position: relative; z-index: 1; margin: 16px 16px 0;
           font-size: 15px; font-weight: 600; letter-spacing: -0.015em; color: var(--text); }
/* Le modele courant reste dans la rangee, sans lien : la gamme garde sa taille
   reelle et le visiteur voit ou il se situe dedans. */
.am-tile.is-current { background: var(--surface2); }
.am-tile.is-current .am-name { color: var(--text2); }
.am-here { position: relative; z-index: 1; display: block; margin: 4px 16px 0;
           font-family: var(--mono); font-size: 10px; letter-spacing: 0.18em;
           text-transform: uppercase; color: var(--accent); }

/* .am-navs / .am-nav — les deux boutons ont ete retires : poses en absolu
   dans l'en-tete, ils tombaient SUR « Un seul concessionnaire ». La rangee
   se fait defiler au doigt ou a la molette, comme elle le faisait deja sur
   mobile ou ces boutons etaient masques. site.js teste leur presence
   (`if (prev)`), il n'a donc rien a changer. */

.am-foot { max-width: 1128px; margin: 34px auto 0; padding: 0 32px; text-align: center; }
/* Le lien reste — c'est la seule sortie vers la gamme depuis une page
   modele — mais sa pastille fleche (.am-arrow) est retiree, comme sur les
   cartes utilitaires. Reste un lien texte a l'accent. */
.am-foot a { display: inline-flex; align-items: center; text-decoration: none;
             font-size: 15px; font-weight: 600; color: var(--accent); }
.am-foot a:hover { text-decoration: underline; text-underline-offset: 4px; }

@media (max-width: 768px) {
  .am-section { padding: 64px 0; }
  .am-head { padding: 0 16px; margin-bottom: 28px; }
  .am-scroll { gap: 12px; padding: 6px 16px 10px; }
  .am-tile { flex: 0 0 172px; }
  .am-shot { height: 100px; margin: 26px 10px 0; }
  .am-name { font-size: 13px; margin: 12px 12px 0; }
  .am-here { margin: 3px 12px 0; font-size: 9px; }
  .am-foot { margin-top: 26px; padding: 0 16px; }
}


/* ── Embleme a la place des chevrons ──────────────────────────────────
   Trois paires precedent/suivant portaient un chevron : le carrousel de
   l'accueil (.cs-arrow), la rangee « Autres modeles » (.am-nav) et la
   visionneuse 360 (.ag-arrow). Elles portent maintenant l'embleme, pose
   par ::before en masque — les boutons sont vides dans le HTML.

   L'embleme ne pointe nulle part : c'est la POSITION qui dit la direction,
   choix assume. aria-label garde le sens pour un lecteur d'ecran, et les
   deux boutons d'une paire sont volontairement identiques.
   ─────────────────────────────────────────────────────────────────────── */
.cs-arrow::before,
.ag-arrow::before {
  content: "";
  display: block;
  background-color: currentColor;
  -webkit-mask: var(--v-emblem) center / contain no-repeat;
          mask: var(--v-emblem) center / contain no-repeat;
}
/* Hauteur = largeur x 200.2/229.6, pour ne pas ecraser le trace. */
.cs-arrow::before { width: 23px; height: 20px; }
.ag-arrow::before { width: 21px; height: 18px; }

/* ── L'embleme pivote pour se lire comme une fleche ────────────────────
   Le V de l'embleme pointe vers le bas. Un quart de tour le fait pointer
   vers la gauche sur le bouton precedent et vers la droite sur le suivant :
   la marque reste entiere, mais la paire se lit enfin comme une paire de
   fleches. L'anneau exterieur etant circulaire, seul le V bouge a l'oeil.
   ─────────────────────────────────────────────────────────────────────── */
.cs-prev::before, .ag-arrow-l::before { transform: rotate(90deg); }
.cs-next::before, .ag-arrow-r::before { transform: rotate(-90deg); }

/* Les chevrons tenaient leur couleur d'un `stroke` sur le <svg>. Le masque
   suit `color`, donc la couleur remonte sur le bouton lui-meme. */
.cs-arrow { color: var(--accent); }

/* ── Curseur ─────────────────────────────────────────────────────────
   L'embleme avait remplace le curseur partout via `* { cursor: url(...) }`.
   Retire a la demande : il masquait la main sur les liens et la barre de
   saisie dans les champs, donc l'indice de survol. Retour aux curseurs
   natifs du navigateur. Les images /images/cursor-changan*.png restent
   dans dist/ mais ne sont plus referencees.
   ─────────────────────────────────────────────────────────────────────── */

/* ════════════════════════════════════════════════════════════════════
   PASSE CORRECTIONS 13/08 — nav deroulante, boutons de devis, lightbox,
   rangee « autres modeles » glissable, trainee de curseur.
   ════════════════════════════════════════════════════════════════════ */

/* ── Nav : MODÈLES en menu deroulant (desktop) ──────────────────────
   Le tiroir mobile reste une liste a plat (option 1 du document de
   corrections) : un sous-menu au doigt coute un tap de plus pour rien. */
.nav-dd { position: relative; display: flex; align-items: center; }
.nav-dd-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: none; background: none; border-radius: 8px;
  font-family: inherit; font-size: 13px; font-weight: 500;
  color: rgba(255,255,255,0.88); cursor: pointer;
  transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease);
}
.nav-dd-btn:hover, .nav-dd.open .nav-dd-btn { background: rgba(255,255,255,0.08); color: rgba(255,255,255,0.95); }
.nav-dd-caret { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--t-fast) var(--ease); }
.nav-dd.open .nav-dd-caret { transform: rotate(180deg); }
body.light-nav #nav .nav-dd-btn { color: rgba(0,0,0,0.48); }
body.light-nav #nav .nav-dd-btn:hover,
body.light-nav #nav .nav-dd.open .nav-dd-btn { background: rgba(0,0,0,0.05); color: rgba(0,0,0,0.85); }

.nav-dd-menu {
  position: absolute; top: calc(100% + 10px); left: 0; z-index: 120;
  min-width: 234px; padding: 8px;
  background: var(--surface); border: 1px solid var(--border2);
  border-radius: 14px; box-shadow: 0 18px 44px rgba(16,24,40,0.18);
  display: flex; flex-direction: column; gap: 2px;
  opacity: 0; visibility: hidden; transform: translateY(-6px);
  transition: opacity var(--t-fast) var(--ease), transform var(--t-fast) var(--ease), visibility var(--t-fast);
}
.nav-dd.open .nav-dd-menu { opacity: 1; visibility: visible; transform: none; }
/* La barre est posee sur un hero sombre : le menu, lui, est une carte
   claire. Les couleurs de .nav-links ne doivent donc pas fuir dedans. */
#nav .nav-dd-menu a {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 9px;
  color: var(--text) !important; background: none;
}
#nav .nav-dd-menu a:hover { background: var(--accent-soft) !important; color: var(--accent-on-light) !important; }
.nav-dd-t { font-size: 14px; font-weight: 600; letter-spacing: -0.01em; }
.nav-dd-s { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3); }
#nav .nav-dd-menu a:hover .nav-dd-s { color: var(--accent-on-light); opacity: 0.75; }

/* ── Carrousel : la photo du modele est un lien ──────────────────────
   `display:contents` : l'ancre sort de la mise en page, l'image reste
   fille directe de .cs-stage et garde ses marges et son z-index. */
.cs-shot { display: contents; }
.cs-stage img { cursor: pointer; }

/* ── Trois boutons sous les specifications ── */
.specs-actions { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 28px; }

/* ── Etiquettes de financement cliquables ── */
.fin-tag--link { text-decoration: none; transition: background var(--t-fast) var(--ease), color var(--t-fast) var(--ease), border-color var(--t-fast) var(--ease); }
.fin-tag--link:hover { background: var(--accent-soft); border-color: var(--accent-ring); color: var(--accent); }

/* ── Etiquette posee dans un titre ── */
.title-tag {
  display: inline-block; vertical-align: middle;
  padding: 6px 13px; border-radius: 999px;
  background: var(--accent-soft); border: 1px solid var(--accent-ring);
  font-family: var(--mono); font-size: 10px; font-weight: 500;
  letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent);
  white-space: nowrap;
}

/* ── Groupe de boutons dans un CTA de fin ── */
.closing-actions { display: flex; flex-wrap: wrap; gap: 12px; justify-content: center; }

/* ── Cartes d'equipement : le point bleu cede la place a un filet ──── */
.feature-item { border: 1px solid var(--accent-ring); }

/* ── Rangee « autres modeles » : glissable a la souris ───────────────
   Les fleches avaient ete retirees le 04/08 (elles tombaient sur le
   titre). Le glissement rend la rangee manoeuvrable au curseur sans
   rien reposer par-dessus les vehicules. */
.am-scroll { cursor: grab; }
.am-scroll.is-dragging { cursor: grabbing; scroll-behavior: auto; user-select: none; }
.am-scroll.is-dragging a { pointer-events: none; }

/* ── Lightbox : equipements et galerie en grand ─────────────────────
   Une seule visionneuse pour les deux sections. Ouverte au clic, fermee
   par Echap, par le fond ou par la croix ; fleches entre les images
   du meme groupe. */
.eq-photo-card img, .gallery-grid img { cursor: zoom-in; }
.lb {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: rgba(9,9,15,0.94); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden; transition: opacity var(--t-med) var(--ease), visibility var(--t-med);
}
.lb.open { opacity: 1; visibility: visible; }
.lb-fig { margin: 0; max-width: min(1280px, 92vw); max-height: 88vh; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.lb-fig img { max-width: 100%; max-height: 78vh; width: auto; height: auto; border-radius: 12px; display: block; box-shadow: 0 30px 80px rgba(0,0,0,0.5); }
.lb-cap { font-size: 13px; color: rgba(255,255,255,0.66); text-align: center; max-width: 60ch; }
.lb-btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%;
  background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.18);
  color: #fff; cursor: pointer; display: flex; align-items: center; justify-content: center;
  transition: background var(--t-fast) var(--ease);
}
.lb-btn:hover { background: rgba(255,255,255,0.18); }
.lb-btn[disabled] { opacity: 0.25; cursor: default; }
.lb-prev { left: max(16px, 3vw); } .lb-next { right: max(16px, 3vw); }
.lb-btn::before {
  content: ""; width: 22px; height: 22px; background: currentColor;
  -webkit-mask: var(--v-emblem) center/contain no-repeat; mask: var(--v-emblem) center/contain no-repeat;
}
.lb-prev::before { transform: rotate(90deg); } .lb-next::before { transform: rotate(-90deg); }
.lb-close {
  position: absolute; top: 20px; right: 20px; width: 44px; height: 44px;
  border-radius: 50%; background: rgba(255,255,255,0.08);
  border: 1px solid rgba(255,255,255,0.18); color: #fff; cursor: pointer;
  font-size: 20px; line-height: 1; display: flex; align-items: center; justify-content: center;
}
.lb-close:hover { background: rgba(255,255,255,0.18); }
@media (max-width: 768px) {
  .lb-btn { width: 44px; height: 44px; }
  .lb-prev { left: 8px; } .lb-next { right: 8px; }
}

/* ── Trainee de curseur : embleme Changan ────────────────────────────
   Purement decorative, `pointer-events:none`, et le curseur natif reste
   en place — c'est ce qui coutait l'indice de survol le 07/08. Posee
   seulement sur pointeur fin et si l'utilisateur ne demande pas moins
   d'animation ; injectee par site.js, donc absente sans JS. */
.ct-dot {
  position: fixed; top: 0; left: 0; z-index: 9999;
  pointer-events: none; will-change: transform;
  background: var(--accent-on-light);
  -webkit-mask: var(--v-emblem) center/contain no-repeat;
  mask: var(--v-emblem) center/contain no-repeat;
  opacity: 0;
  transition: opacity 260ms var(--ease);
}
.ct-on .ct-dot { opacity: var(--ct-o, 0.5); }
@media (prefers-reduced-motion: reduce) { .ct-dot { display: none; } }

/* ── Precommande ──────────────────────────────────────────────────────
   La page /precommande/ reprend la carte de formulaire du contact
   (.form-card, .ff, .row2) : rien n'est redefini ici de ce qui existe
   deja. S'ajoutent seulement les trois choses que le contact n'a pas —
   des sections numerotees, des choix a cocher, et un pave de recapitulatif.
   Le bon de commande papier numerote ses sections 01..07 ; les garder
   permet de comparer l'ecran et le papier ligne a ligne au comptoir.
   ───────────────────────────────────────────────────────────────────── */
/* Le formulaire est long la ou le panneau lateral est court : la grille du
   contact (1.1 / 0.9) laisse les cases a cocher a l'etroit sur deux colonnes.
   Cette page seule reequilibre — **sous min-width obligatoirement** : ce bloc
   est ajoute a la fin du fichier, donc a specificite egale il gagnerait sur le
   `@media (max-width:1024px) { .contact-grid { 1fr } }` plus haut et la page
   deborderait de 148 px au telephone. Verifie. */
@media (min-width: 1025px) {
  .pc-grid { grid-template-columns: 1.4fr 0.75fr; }
}

.pc-step {
  display: flex; align-items: baseline; gap: 12px;
  margin: 34px 0 18px; padding-top: 22px; border-top: 1px solid var(--border);
}
.pc-step:first-of-type { margin-top: 0; padding-top: 0; border-top: none; }
.pc-step-n { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; color: var(--accent); }
.pc-step-t { font-size: 15px; font-weight: 700; letter-spacing: -0.01em; color: var(--text); margin: 0; }

.pc-hint { margin-top: 7px; font-size: 12.5px; line-height: 1.5; color: var(--text3); }

.pc-fs { border: none; padding: 0; margin: 0 0 14px; min-width: 0; }
.pc-legend {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--text3); margin-bottom: 10px; padding: 0;
}

/* Cases et boutons radio : la cible tactile est la carte entiere, pas la
   pastille de 16 px. Le site se lit d'abord au telephone. */
.opt-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.opt {
  display: flex; align-items: center; gap: 10px;
  padding: 12px 14px; border: 1.5px solid var(--border); border-radius: var(--radius-s);
  background: var(--field-bg); cursor: pointer;
  font-size: 13.5px; line-height: 1.35; color: var(--text);
  transition: border-color var(--t-fast) var(--ease), background var(--t-fast) var(--ease);
}
.opt:hover { border-color: var(--accent-ring); }
.opt input { width: 16px; height: 16px; flex: 0 0 16px; margin: 0; accent-color: var(--accent); cursor: pointer; }
.opt:focus-within { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
/* :has() n'est pas indispensable — sans lui la case reste cochee et lisible,
   elle n'est simplement pas surlignee. */
.opt:has(input:checked) { border-color: var(--accent); background: var(--accent-soft); }

.pc-consent {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 16px; border: 1.5px solid var(--border); border-radius: var(--radius-s);
  background: var(--field-bg); cursor: pointer;
  font-size: 13.5px; line-height: 1.55; color: var(--text2); margin-bottom: 18px;
}
.pc-consent input { width: 16px; height: 16px; flex: 0 0 16px; margin-top: 2px; accent-color: var(--accent); cursor: pointer; }
.pc-consent:has(input:checked) { border-color: var(--accent); }
.preorder-form.was-validated .pc-consent:has(input:invalid) { border-color: rgba(220,60,60,0.55); }

/* La ligne d'etat dit ce qui manque AVANT le clic. Elle garde sa hauteur
   quand elle est vide, sinon le bouton saute au premier caractere saisi. */
.pc-status { min-height: 1.3em; }
.pc-status.is-missing { color: #b3261e; }

.pc-done { margin-bottom: 36px; padding-bottom: 20px; border-bottom: 1px solid var(--border); }
.pc-done-lead { font-size: 14px; line-height: 1.6; color: var(--text2); margin-bottom: 8px; }

/* ── Precommande : un ecran par section ───────────────────────────────
   Les sept `.pc-page` sont dans le HTML et VISIBLES. Sans JavaScript la
   page reste le formulaire d'un seul tenant qu'elle etait — c'est le repli.
   Tout ce bloc ne s'applique que sous `.pc-wizard`, la classe que site.js
   pose quand il prend la main.
   ───────────────────────────────────────────────────────────────────── */
.pc-page[hidden] { display: none; }

/* En parcours, chaque section commence en haut d'un ecran : le filet de
   separation n'a plus rien a separer. Hors parcours (sans JS) il revient,
   sinon les sept sections se collent en un seul pave illisible — le wrapper
   `.pc-page` casse le `:first-of-type` sur lequel comptait la regle plus haut. */
.pc-page + .pc-page .pc-step {
  margin-top: 34px; padding-top: 22px; border-top: 1px solid var(--border);
}
.pc-wizard .pc-page .pc-step { margin-top: 0; padding-top: 0; border-top: none; }
.pc-wizard .pc-step-t:focus { outline: none; }
/* Les sept sections vont de 111 a 453 px de haut : la carte se pliait en
   accordeon d'un ecran a l'autre. Ce plancher n'aligne pas tout — ce serait
   un trou de 340 px sous « Livraison » — il retire seulement les sauts les
   plus brusques. */
.pc-wizard .pc-page { min-height: 240px; }

/* La barre de progression : sept segments, pas un pourcentage. Le visiteur
   doit pouvoir compter ce qui reste — « il m'en reste deux » se supporte,
   « 71 % » ne veut rien dire sur un formulaire. */
.pc-prog { margin: 0 0 30px; }
.pc-prog-rail { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: 5px; }
.pc-prog-seg {
  height: 4px; border-radius: 999px; background: var(--border);
  transition: background var(--t-fast) var(--ease);
}
.pc-prog-seg.is-done { background: var(--accent-ring); }
.pc-prog-seg.is-on { background: var(--accent); }
.pc-prog-lbl {
  margin: 12px 0 0; font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.14em; text-transform: uppercase; color: var(--text3);
}

/* Retour a gauche, Suivant a droite. `.pc-nav-r` porte les deux boutons de
   droite pour que Suivant reste a droite quand Retour est absent — avec
   `space-between` seul, un enfant unique retombe a gauche. */
.pc-nav { display: flex; align-items: center; gap: 12px; margin-top: 28px; }
.pc-nav-r { margin-left: auto; display: flex; gap: 12px; }
/* `[hidden]` est une regle du navigateur a specificite nulle : `.btn` et son
   `display:inline-flex` la battent. Sans cette ligne, Suivant et Envoyer
   restent visibles cote a cote sur la derniere etape. */
.pc-nav .btn[hidden] { display: none; }

/* Une fois la demande partie, la carte du formulaire s'efface : le panneau
   de confirmation porte deja la phrase, le recapitulatif et le bouton pour
   recommencer. Deux copies de la meme phrase l'une sous l'autre se lisent
   comme un bug, et un formulaire encore ouvert invite a un second envoi. */
form.pc-sent { display: none; }

/* Le changement d'ecran est annonce par un mouvement court : sans lui, sept
   sections identiques donnent l'impression que le clic n'a rien fait. */
.pc-wizard .pc-page { animation: pc-in 260ms var(--ease) both; }
@keyframes pc-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .pc-wizard .pc-page { animation: none; }
}

@media (max-width: 560px) {
  /* Au telephone les deux boutons prennent chacun la moitie de la rangee
     plutot que de se tasser a droite. */
  .pc-nav-r { flex: 1; }
  .pc-nav-r .btn { flex: 1; justify-content: center; }
  .pc-nav > .pc-back { flex: 0 0 auto; }
}

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

@media (max-width: 900px) {
  .opt-grid { grid-template-columns: 1fr; }
}

/* `.closing .btn { margin: 0 auto }` centre le bouton unique des pages modele.
   Des qu'il y en a deux, ces marges automatiques les repoussent aux deux bouts
   de la ligne au lieu de les grouper au centre — defaut deja present sur
   /financement/, decouvert en posant le bouton de precommande a cote. Une
   selection plus specifique le neutralise dans le groupe, sans toucher au cas
   du bouton seul. */
.closing .closing-actions .btn { margin: 0; }

/* ── Nav : cinq entrees au lieu de quatre ────────────────────────────
   « Precommande » est la cinquieme entree de .nav-links. Deux choses ont
   saute en la posant, et la deuxieme etait deja cassee avant elle.

   1. Les liens n'avaient pas de `nowrap` : « Pourquoi Changan » se coupait
      en deux et la barre passait sur deux lignes. Un libelle de navigation
      ne se coupe jamais au milieu ; la regle manquait, elle n'avait
      simplement jamais ete declenchee a quatre entrees.

   2. **Le selecteur de langue sortait deja de l'ecran entre 769 et ~845 px
      sur le site actuel**, a quatre entrees — mesure avant/apres. La barre
      ne sait pas se comprimer sous une certaine largeur : elle deborde. La
      cinquieme entree ne cree pas le defaut, elle etend la bande a ~969 px.
      Le tiroir prenait le relais a 768 px ; il le prend maintenant a 980,
      ou tout tient. Il contient deja les cinq entrees, « Nous Contacter »
      et le selecteur de langue : rien n'est perdu, la barre cesse
      simplement d'essayer de tout afficher trop tot.

   Les quatre regles deplacees sont exactement celles que le bloc
   `@media (max-width: 768px)` posait pour la barre — elles restent la, ce
   bloc-ci ne fait que les avancer sur la plage 769-980. */
.nav-links a { white-space: nowrap; }

@media (min-width: 769px) and (max-width: 980px) {
  .nav-links { display: none; }
  .nav-toggle { display: flex; }
  #nav .nav-in > .btn { display: none; }
  #nav .nav-in > .lang-picker { display: none; }
}

/* Entre 981 et 1090 px les cinq entrees tiennent, mais serrees. */
@media (min-width: 981px) and (max-width: 1090px) {
  .nav-links { gap: 0; }
  .nav-links a { padding: 8px 9px; font-size: 12.5px; }
  .nav-dd-btn { padding-left: 9px; padding-right: 9px; font-size: 12.5px; }
}