/* =====================================================================
   histoire.css — Page « L'histoire d'Aston Martin »
   Frise CINÉMATIQUE regroupée PAR DÉCENNIE, scène par scène.

   Structure (cf. archive-histoire.php + histoire.js) :
     #heroes.hist > #decLead + .dec[data-decade]
       .dec > .dec__head (plaque morph) + .dec__intro + [ scènes ]
       scènes :
         .sc   data-scene="soc|comp"  -> plein écran + cartouche fumé qui monte
         .scL  data-scene="logo"      -> blanc quadrillé, emblème + texte désync
         .scV  data-scene="veh"       -> blanc quadrillé, 1–3 cartes voiture
     #tl > .tl__cursor + #tlTrack > .tl__y[data-decade]

   Variables de layout : --nav-h (54px) · --footer-h (73px) · --admin-h (0/32px)

   PERF :
   - La plaque .dec__head se transforme à chaque frame -> flou frosté simple
     (PAS la réfraction SVG url(), trop coûteuse en scale).
   - Les scènes sont en content-visibility:auto -> les scènes hors-écran ne
     sont pas peintes (on ne paie pas 40+ scènes plein écran simultanées).
   - Transforms 3D + opacité uniquement (composite), pilotés au scroll (rAF).
   ===================================================================== */

:root{
  --hist-serif:'Cormorant Garamond',Georgia,serif;
  --hist-nb:'Manrope',system-ui,sans-serif;
  --hist-label:'Oswald',system-ui,sans-serif;
  --hist-paper:#F2F1EC;
}

body.page-histoire, main{background:var(--hist-paper);color:#131514}

/* ---- Scroller plein écran (scrollbar masquée) ---- */
.hist{
  position:relative;
  height:calc(100svh - var(--admin-h,0px));
  overflow-y:scroll;overflow-x:hidden;
  -webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none;
}
.hist::-webkit-scrollbar{width:0;height:0;display:none}
.heroes{display:block}

/* ---- FOOTER — verre clair « comme le header », full-bleed ---- */
body.page-histoire .site-footer{
  position:fixed;left:0;right:0;bottom:0;z-index:45;
}

/* =====================================================================
   RAIL DÉCENNIES — ancien panneau (inerte : supplanté par le bloc #tl
   en bas de fichier). Conservé sans effet visible ; nettoyable plus tard.
   ===================================================================== */
/* =====================================================================
   FRISE — règle graduée en verre (aside #tl)  — VERSION ACTIVE
   Tête de lecture fixe au centre ; le ruban des dates glisse derrière
   (translateY piloté par histoire.js — inchangé).
   Supplante les anciennes règles .tl / .tl__track / .tl__y / .tl__cursor.
   Active centrée pile sur le trait (top: calc(50% - 8px), mesuré delta=0).
   ===================================================================== */
#tl {
    position: fixed;
    left: 16px;
    right: auto;
    top: calc(var(--admin-h,0px) + 9em);
    bottom: 9em;
    height: auto;
    width: 104px;
    z-index: 40;
    padding: 30px 0;
    isolation: isolate;
    overflow: hidden;
    /* Fond ALLÉGÉ (.30→.40 au lieu de .60→.74) : un fond trop opaque noyait la
       réfraction liquid-glass (backdrop-filter url(#…) posé en inline par
       histoire.js sur Chromium). Plus transparent = la photo qui défile se
       réfracte visiblement à travers le rail. Le blur(16) reste le repli
       hors-Chromium (l'inline url() le supplante là où la réfraction marche). */
    background: linear-gradient(180deg, rgba(255,255,255,.30), rgba(255,255,255,.40));
    -webkit-backdrop-filter: blur(16px) saturate(1.04) brightness(1.12);
    backdrop-filter: blur(16px) saturate(1.04) brightness(1.12);
    box-shadow: inset 0 1px 0 rgba(255,255,255,.95),
    inset 0 0 0 1px rgba(255,255,255,.55),
    0 2px 64px -14px rgba(19,21,20,.34);
    -webkit-mask: linear-gradient(180deg, transparent 0, #000 10%, #000 90%, transparent 100%);
    mask: linear-gradient(180deg, transparent 4%, #000 10%, #000 91%, transparent 95%);
}

/* trait de tête de lecture — calé sur l'active (le JS centre à -8px) 
#tl::after{
  content:""; position:absolute; left:14px; right:14px; top:calc(50% - 8px); height:1px; z-index:0;
  background:linear-gradient(90deg, transparent, rgba(122,94,22,.30) 30%, rgba(122,94,22,.30) 70%, transparent);
  transform:translateY(-.5px); pointer-events:none;
}*/

/* ruban : filet + graduation fine ; dates espacées (gap 50) */
#tlTrack{ gap:50px; padding-right:0; z-index:1;
  /* .al-glass__panel NEUTRALISÉ sur le rail : le verre est déjà porté par .tl,
     donc on retire le double-frosté (fond + filtre) + bordure + ombre du panneau. */
  background:none; -webkit-backdrop-filter:none; backdrop-filter:none; border:0; box-shadow:none;
}
#tlTrack::before{
  content:""; position:absolute; top:-260px; bottom:-260px; right:13px; width:1px;
  background:rgba(19,21,20,.24);
}
#tlTrack::after{
  content:""; position:absolute; top:-260px; bottom:-260px; right:14px; width:6px;
  background:repeating-linear-gradient(180deg, rgba(19,21,20,.18) 0 1px, transparent 1px 11px);
}

/* dates : Oswald thin, alignées sur le filet */
#tl .tl__y{
  position:relative; display:block; width:auto; margin-right:25px; text-align:right;
  font-family:"Oswald", sans-serif; font-weight:300; font-size:13px;
  letter-spacing:.06em; line-height:1; color:rgba(19,21,20,.46);
  font-variant-numeric:tabular-nums; transform-origin:100% 50%;
  transition:
    transform .6s var(--spring-soft, cubic-bezier(.22,1,.36,1)),
    color .4s ease, opacity .4s ease, font-weight .3s ease;
}
#tl .tl__y::before {
    content: "";
    position: absolute;
    right: -5px;
    top: 50%;
    width: 5px;
    height: 1px;
    transform: translateY(-50%);
    transition: width .5s var(
  --spring-soft, cubic-bezier(.22,1,.36,1)), background .4s ease, height .4s ease;
    background: linear-gradient(180deg, rgb(0 0 0 / 0%), rgb(0 0 0 / 28%), rgb(0 0 0 / 0%));
}
#tl .tl__y::after{ content:none; }

/* date active : or profond, agrandie en douceur (tick = tiret de base) */
#tl .tl__y.is-active{
  color:var(--color-gold-deep, #7A5E16); font-weight:500; opacity:1;
  transform:scale(2.15);
}

/* tête de lecture : flèche or — calée sur l'active */
#tl .tl__cursor{
  position:absolute; top:calc(50% - 8px); left:auto; right:22px; width:auto; height:auto;
  transform:translateY(-50%); z-index:2;
}
#tl .tl__cursor::before{
  content:""; position:absolute; right:0; top:50%; transform:translateY(-50%);
  width:0; height:0;
  border-top:5px solid transparent; border-bottom:5px solid transparent;
  border-right:7px solid var(--color-gold-deep, #7A5E16);
}
#tl .tl__cursor::after{ content:none; }
-------
.tl::before{content:"";position:absolute;inset:0;pointer-events:none;opacity:.1;
  background:linear-gradient(135deg,rgba(255,255,255,.9),transparent 55%)}
.tl.grabbing{cursor:grabbing}

.tl__cursor{position:absolute;left:12px;right:12px;top:50%;transform:translateY(-50%);
  height:60px;
  background:rgba(255,255,255,.60);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.75),0 2px 12px rgba(19,21,20,.12);
  z-index:0;pointer-events:none; display:none;}

.tl__track {
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    will-change: transform;
    transition: transform .45s cubic-bezier(.22,1,.36,1);
    display: flex;
    gap: 40px;
    flex-direction: column;
}

.tl__y {
    position: relative;
    display: flex;
    align-items: center;
    padding-left: 24px;
    font-family: var(--hist-nb);
    font-weight: 700;
    font-size: 1em;
    line-height: 1.5;
    letter-spacing: -0.1em;
    color: rgba(19,21,20,.38);
    cursor: pointer;
    user-select: none;
    font-variant-numeric: tabular-nums;
    transition: color .3s;
    flex-direction: row;
}
.tl__y::before {
    content: "";
    position: absolute;
    width: 10px;
    height: 1px;
    background-color: var(--ink);
    opacity: 0.5;
    transition: width backgound-color translateX opacity .3s;
    transform: translateX(-130%);
}
.tl__y.is-active{color:var(--ink); font-size:3em;}
.tl__y.is-active::before {
    opacity: 1;
    background-color: var(--gold);
    width: 20px;
    transform: translateX(-70%);
}
.tl__y.is-active::after {
    content: "'s";
    font-size: 0.5em;
    transform: translateX(5px) translateY(6px);
    letter-spacing: 0px;
}

/* =====================================================================
   DÉCENNIES — plaque morph  /  dec-lead (hero éditorial)
   ===================================================================== */
.dec-lead{
  min-height:calc(90svh - var(--nav-h,54px) - var(--admin-h,0px));
  display:flex;align-items:flex-start;justify-content:center;          /* shell remonté en haut */
  padding:0 var(--spacing-page,52px);box-sizing:border-box;text-align:center;
  /* image de fond en bas-centre, sur base papier opaque (pas de fuite de scène) */
  background-color:var(--hist-paper,#F2F1EC);
  background-image:url("https://astonlegacy.fr/wp-content/uploads/2026/06/history-bg-e1780754459701.png");   /* <-- REMPLACE par ton image */
  background-repeat:no-repeat;
    background-position: bottom;
    background-size: cover;                                         /* ou cover selon l'image */
}
.dec-lead__shell{
  max-width:760px;
  padding-top:calc(var(--admin-h,0px) + var(--nav-h,54px) + 44px);    /* juste sous le header */
}
.dec-lead__eyebrow{
  display:inline-flex;align-items:center;gap:12px;margin:0 0 18px;
  font:600 12px/1 var(--hist-label);letter-spacing:.32em;text-transform:uppercase;
  color:var(--color-gold-deep,#7A5E16);
}
.dec-lead__eyebrow::before,.dec-lead__eyebrow::after{
  content:"";width:30px;height:1px;background:currentColor;opacity:.5;
}
.dec-lead__title{
  margin:0;color:var(--ink);
  font:700 clamp(40px,7vw,92px)/1.02 var(--hist-label);letter-spacing:-.02em;
}
.dec-lead__sub{
  margin:18px auto 0;max-width:46ch;color:var(--muted,#676C68);
  font:400 clamp(15px,1.4vw,18px)/1.5 var(--hist-nb);
}

/* Plaque décennie.
   Fantôme (en flux, taille épinglée) = dimensionne le chip → petit & stable.
   Chiffre visible = absolu, agrandi à l'arrivée puis ramené à l'échelle 1
   via transform:scale (composited → fluide, pas de relayout).
   La plaque n'a ni fond ni bordure ni ombre : la surface = .dec__glass. */
.dec__head{
  position:sticky;
  top:calc(var(--nav-h,54px) + var(--admin-h,0px) + 34px);   /* (2) état final 20px plus bas (14+20) */
  z-index:6;
  width:max-content;margin:0 auto;
  display:flex;align-items:center;justify-content:center;
  padding:10px 24px;border-radius:12px;color:var(--ink);
  overflow:visible;isolation:isolate;transform-origin:top center;
  /* repli Firefox : X (centre→droite) + Y (arrivée→épinglé) pilotés par --p */
  transform:
    translateX(calc(var(--p,1) * (50vw - 50px - 50%)))           /* (3) → bord droit -50px à l'épinglage */
    translateY(calc((1 - var(--p,1)) * var(--arrive, 30svh)));   /* (1) arrivée paramétrable */
  will-change:transform;backface-visibility:hidden;
}

/* (1) la PREMIÈRE décennie arrive centrée verticalement (état de base) */
.dec:first-of-type .dec__head{ --arrive: calc(50svh - var(--nav-h,54px) - 60px); }

/* surface verre (recette commune dans style.css — sélecteur groupé) */
.dec__glass{position:absolute;inset:0;border-radius:inherit;z-index:-1;pointer-events:none;
  opacity:var(--p,0);                               /* repli Firefox : --p posé par histoire.js */
  will-change:opacity;backface-visibility:hidden}

/* typo commune aux deux exemplaires du chiffre */
.dec__num{font-family:var(--hist-nb);font-weight:800;line-height:.86;letter-spacing:-.03em;
  white-space:nowrap;color:var(--ink);margin:0;font-variant-numeric:tabular-nums}
.dec__num::after{content:"'s";font-weight:600;font-size:.62em;opacity:.5;margin-left:.02em}

/* fantôme : invisible, en flux, taille épinglée → fixe la taille du chip */
.dec__num--ghost{visibility:hidden;font-size:1.8vw}

/* chiffre visible : absolu, centré, échelle pilotée (repli Firefox via --p) */
.dec__num--live{position:absolute;left:50%;top:50%;font-size:25.5vw;transform-origin:center;
  transform:translate(-50%,-50%) scale(calc(1 - var(--p,1) * .9294));  /* p=1 → .0706 (=1.8/25.5) ; p=0 → 1 */
  will-change:transform;backface-visibility:hidden}

/* zone d'intro (== introDist du JS : 62svh) */
.dec__intro{height:62svh}

/* ---------------------------------------------------------------
   Morph piloté par SCROLL-TIMELINE CSS (Chromium/Safari).
   Plaque (translate), chiffre (scale) et verre (opacité) animés sur
   la MÊME timeline --decview → tout reste synchronisé.
   Aucune propriété de layout animée (ni padding ni font-size) → pas de
   relayout, pas de re-génération du verre → pas de tremblement.
   --------------------------------------------------------------- */
@supports (animation-timeline: view()){
  .dec{timeline-scope:--decview}
  .dec__intro{view-timeline-name:--decview;view-timeline-axis:block}
  .dec__head{animation:al-dechead linear both;animation-timeline:--decview;animation-range:cover 50% cover 100%}
  .dec__num--live{animation:al-decnum linear both;animation-timeline:--decview;animation-range:cover 50% cover 100%}
  .dec__glass{animation:al-glass-in linear both;animation-timeline:--decview;animation-range:cover 50% cover 100%}
  @keyframes al-dechead{
  0%  { transform: translateX(0) translateY(var(--arrive, 30svh)) }
  100%{ transform: translateX(calc(50vw - 50px - 50%)) translateY(0) }
}
  @keyframes al-decnum{0%{transform:translate(-50%,-50%) scale(1)}100%{transform:translate(-50%,-50%) scale(.0706)}}
  @keyframes al-glass-in{from{opacity:0}to{opacity:1}}
}

/* =====================================================================
   SCÈNE Société / Compétition (.sc) — image plein écran + cartouche fumé
   Valeurs de mouvement (figées, appliquées par histoire.js) :
     parallaxe -99 · pivot 7.5° · échelle 1.06 · fade 0.43 -> 1
   ===================================================================== */
.sc{position:relative;height:350vh;content-visibility:auto;contain-intrinsic-size:auto 230vh}
.sc--last{height:185vh;contain-intrinsic-size:auto 185vh}
.sc__stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1400px;z-index:1}
.sc__bg{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform,opacity;
  background:var(--hist-paper);background-size:cover;background-position:center}
.sc__flow{position:relative;z-index:3;margin-top:-100vh;padding-top:108vh;padding-bottom:10vh}

/* --- variante CLAIRE par défaut (sans image = « fond hors image clair ») --- */
.sc__grid{position:absolute;inset:-12%;opacity:.6;
  background-image:linear-gradient(rgba(19,21,20,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,21,20,.06) 1px,transparent 1px);
  background-size:64px 64px}
.sc__ghost{position:absolute;left:50%;top:45%;transform:translate(-50%,-50%);white-space:nowrap;
  font:700 40vh/.8 var(--hist-label);letter-spacing:-.03em;color:rgba(19,21,20,.05)}
.sc__ph{position:absolute;left:50%;bottom:7%;transform:translateX(-50%);white-space:nowrap;
  font:600 11px/1 var(--hist-label);letter-spacing:.3em;text-transform:uppercase;color:rgba(19,21,20,.4)}
.sc__veil{position:absolute;inset:0;z-index:2;will-change:opacity;background:transparent}
.sc:not(.has-cover) .sc__veil{opacity:0!important}
.sc__card{max-width:min(470px,80vw);margin:0 auto;padding:34px 38px;border-radius:20px;color:#131514;isolation:isolate;
  --glass-tint:rgba(255,255,255,.40);            /* cadre .al-glass (la liste partagée ne le fournit plus) */
  -webkit-backdrop-filter:blur(14px) saturate(1) brightness(1.16);
          backdrop-filter:blur(14px) saturate(1) brightness(1.16);
  will-change:transform;
  border:1px solid rgba(19,21,20,.10);
  box-shadow:0 30px 70px -34px rgba(0,0,0,.28)}
.sc__kicker{display:inline-flex;align-items:center;gap:9px;font:600 11px/1 var(--hist-label);
  letter-spacing:.3em;text-transform:uppercase;color:rgba(19,21,20,.6);margin-bottom:14px}
.sc__kicker::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--dot,#37a06f)}
.sc__title{font:700 40px/1.03 var(--hist-label);letter-spacing:-.01em;margin:0 0 16px;color:#131514}
.sc__body{font:400 13px/1.2 var(--hist-nb);color:#3e3e3e}
.sc__body h2{color:var(--ink);font-family:var(--hist-nb);font-weight:600;line-height:1;margin:0 0 1em;padding:1em 0;font-size:clamp(16px,1.4vw,18px);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);color:var(--ink)}
.sc__body p{color:var(--ink);line-height:1.2;text-align:justify;margin:0 0 12px}
.sc__body p:last-child{margin-bottom:0}

/* --- variante SOMBRE quand une vraie image de fond est présente --- */
.sc.has-cover .sc__bg{background-color:#0c0f0e}
.sc.has-cover .sc__veil{background:linear-gradient(180deg,rgba(8,10,9,.05),rgba(8,10,9,.5))}
.sc.has-cover .sc__card{color:var(--muted);background-color: #ffffff29;
  position:relative;
  border:0;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.18),inset 0 0 0 1px rgba(255,255,255,.08),0 40px 90px -40px rgba(0,0,0,.7)}
/* Double fond : panneau frosté = .al-glass__panel (recette COMMUNE, style.css —
   partagée avec l'archive). Ici on ne pose QUE sa position (en retrait, derrière
   le texte) + les variables propres à l'histoire. Présent sur les scènes photo. */
.sc__panel{
  position:absolute;inset:10px;z-index:-1;pointer-events:none;
  --panel-tint:rgba(255,255,255,.5);
  --panel-blur:20px;
  --panel-radius:14px;
}
.sc.has-cover .sc__kicker{color:var(--ink)}
.sc.has-cover .sc__title{color:var(--ink)}
.sc.has-cover .sc__body{color:var(--ink)}

/* =====================================================================
   SCÈNE Logo (.scL) — fond blanc quadrillé, emblème + texte désync
   Valeurs figées : imgPar 110 · textPar -40 · spin 33° · imgX -15 · textX 25
   ===================================================================== */
.scL{position:relative;height:185vh;background:var(--hist-paper);color:#131514;
  content-visibility:auto;contain-intrinsic-size:auto 185vh}
.scL__stage{position:sticky;top:0;height:100vh;overflow:hidden;perspective:1500px}
.scL__grid{position:absolute;inset:-8%;opacity:.5;
  background-image:linear-gradient(rgba(19,21,20,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,21,20,.07) 1px,transparent 1px);
  background-size:58px 58px}
.scL__wrap{position:absolute;inset:0;left:60%;transform:translateX(-50%);max-width:min(1400px,80vw);width:100%;
  display:grid;grid-template-columns:1fr 1fr;align-items:center;gap:4vw;padding:0 8vw;box-sizing:border-box}
.scL__img{justify-self:center;position:relative;width:min(34vw,420px);aspect-ratio:1/1;
  will-change:transform;transform-style:preserve-3d;display:grid;place-items:center}
.scL__img img{max-width:100%;max-height:100%;object-fit:contain;
  filter:drop-shadow(0 22px 30px rgba(19,21,20,.22))}
.scL__plinth{position:absolute;inset:0;border:1px solid rgba(19,21,20,.18);border-radius:50%;
  display:grid;place-items:center}
.scL__plinth b{font:700 60px/1 var(--hist-label);letter-spacing:.04em;color:rgba(19,21,20,.16)}
.scL__cap{position:absolute;left:50%;transform:translateX(-50%);bottom:-30px;white-space:nowrap;
  font:600 10px/1 var(--hist-label);letter-spacing:.3em;text-transform:uppercase;color:rgba(19,21,20,.45)}
.scL__text{will-change:transform}
.scL__k{display:inline-flex;align-items:center;gap:9px;font:600 11px/1 var(--hist-label);
  letter-spacing:.3em;text-transform:uppercase;color:var(--muted,#676C68);margin-bottom:14px}
.scL__k::before{content:"";width:7px;height:7px;border-radius:50%;background:var(--color-gold-deep,#7A5E16)}
.scL__t{font:700 40px/1.03 var(--hist-label);letter-spacing:-.01em;margin:0 0 16px;color:var(--ink,#131514)}
.scL__b{font:400 13px/1.2 var(--hist-nb);color:#3e3e3e;max-width:46ch}
.scL__b h2{font-family:var(--hist-nb);font-weight:600;line-height:1;margin:0 0 1em;padding:1em 0;font-size:clamp(16px,1.4vw,18px);border-top:1px solid var(--ink);border-bottom:1px solid var(--ink);color:var(--ink)}
.scL__b p{color:var(--muted);line-height:1.2;text-align:justify;margin:0 0 12px}
.scL__b p:last-child{margin-bottom:0}

/* =====================================================================
   SCÈNE Véhicules (.scV) — fond blanc quadrillé, 1–3 cartes
   Valeurs figées : par 300/170/-25 · spin 0 · gap 54
   ===================================================================== */
.scV{position:relative;height:175vh;color:#131514;
  content-visibility:auto;contain-intrinsic-size:auto 175vh}
.scV__stage{position:sticky;top:0;height:120vh;overflow:hidden;perspective:1600px;display:grid;place-items:center}
.scV__grid{position:absolute;inset:-8%;opacity:.5;
  background-image:linear-gradient(rgba(19,21,20,.07) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(19,21,20,.07) 1px,transparent 1px);
  background-size:58px 58px}
/* libellé décennie « 1920's » : vertical, collé à droite, centré ; dérive posée par histoire.js */
.scV__head{position:absolute;top:50%;right:clamp(16px,3vw,40px);left:auto;bottom:auto;
  transform:translateY(-50%);will-change:transform;white-space:nowrap;
  writing-mode:vertical-rl;text-orientation:mixed;
  font:600 13px/1 var(--hist-label);letter-spacing:.3em;text-transform:uppercase;color:rgba(19,21,20,.5)}
.scV__row{position:relative;display:flex;gap:54px;align-items:center;justify-content:center;
  width:100%;max-width:min(1300px,80vw);padding:0 6vw;box-sizing:border-box}
.scV__cell{flex:1 1 0;max-width:360px;will-change:transform;transform-style:preserve-3d}

/* =====================================================================
   CARTE VÉHICULE (.dcard--car) — utilisée dans .scV
   ===================================================================== */
.dcard--car{position:relative;border-radius:20px;overflow:hidden;isolation:isolate;
  display:flex;flex-direction:column;color:var(--ink,#131514);
  background:linear-gradient(180deg,rgba(255,255,255,.55),rgba(255,255,255,.72));
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05);
  box-shadow:inset 0 1px 0 rgba(255,255,255,.9),inset 0 0 0 1px rgba(19,21,20,.06),0 18px 44px -22px rgba(0,0,0,.4)}
.dcard--car .dcard__band{flex:0 0 46%;position:relative;display:grid;place-items:center;
  background:var(--c,#1a1d1c);overflow:hidden}
.dcard--car .dcard__band img{max-width:88%;max-height:82%;object-fit:contain;
  filter:drop-shadow(0 16px 22px rgba(0,0,0,.34))}
.dcard--car .dcard__carghost{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--hist-label);font-weight:600;font-size:clamp(40px,4vw,64px);text-transform:uppercase;
  color:var(--on,#fff);opacity:.10;white-space:nowrap;pointer-events:none}
.dcard--car .dcard__info{flex:1 1 auto;min-height:0;padding:clamp(12px,1.1vw,18px) clamp(14px,1.3vw,20px);
  display:flex;flex-direction:column}
.dcard--car .dcard__name{font-family:var(--hist-nb);font-weight:800;font-size:clamp(17px,1.4vw,24px);
  line-height:1;letter-spacing:-.01em;color:var(--ink);margin:2px 0}
.dcard--car .dcard__years{font-family:var(--hist-nb);font-weight:800;font-size:13px;color:var(--ink);opacity:.5}
.dcard--car .dcard__years em{font-style:normal;opacity:.6;font-size:.9em}
.dcard--car .dcard__specs{margin-top:10px;display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}
.dcard--car .dcard__specs .k{font-family:var(--hist-label);font-weight:500;font-size:8px;letter-spacing:.14em;
  text-transform:uppercase;color:rgba(19,21,20,.5)}
.dcard--car .dcard__specs .v{font-family:var(--hist-nb);font-weight:700;font-size:14px;color:var(--ink);
  font-variant-numeric:tabular-nums}
/* CTA = bouton gooey doré du design system (.al-btn--gooey-white).
   Ici on ne garde que le positionnement dans la carte ; le reste (fond blanc
   liseré → remplissage doré + flèche) vient de style.css. */
.dcard--car .dcard__cta{margin-top:auto;align-self:flex-start}

/* =====================================================================
   SCROLL-DRIVEN (mutualisé) — UN driver --sp par scène, lu en calc().
   Chromium/Safari : --sp animé par la scroll-timeline (bloc @supports).
   Firefox sans flag : --sp posé par histoire.js au scroll (même rendu).
   Valeurs figées (calibrées en live) :
     .sc  parallaxe -99 · pivot 7.5° · échelle 1.06 · fade 0.43→1
     .scL imgPar 110 · textPar -40 · spin 33° · imgX -15 · textX 25
     .scV par [300,170,-25] · head ±130 · plage cover 0→100
   ===================================================================== */
@property --sp{ syntax:'<number>'; inherits:true; initial-value:0 }
@keyframes al-prog{ from{ --sp:0 } to{ --sp:1 } }

.sc__bg{transform:translateY(calc(var(--sp) * -99px)) rotateX(calc((var(--sp) - .5) * 7.5deg)) scale(1.06);
  opacity:calc(1 - clamp(0, (var(--sp) - .43) / .57, 1))}
.sc--last .sc__bg{opacity:1}
.sc__veil{opacity:calc((1 - clamp(0, (var(--sp) - .43) / .57, 1)) * .55)}
.sc:not(.has-cover) .sc__veil{opacity:0}
.scL__img{transform:translate3d(calc((.5 - var(--sp)) * 200px), calc((.5 - var(--sp)) * 110px), 0) rotateY(calc((var(--sp) - .5) * 33deg))}
.scL__text{transform:translate3d(calc((.5 - var(--sp)) * -100px), calc((.5 - var(--sp)) * -40px), 0)}
.scV__cell{transform:translateY(calc((.5 - var(--sp)) * var(--par,0) * 1px))}
.scV__cell:nth-child(3n+1){--par:300}
.scV__cell:nth-child(3n+2){--par:170}
.scV__cell:nth-child(3n+3){--par:-25}
.scV__head{transform:translateY(calc(-50% + (.5 - var(--sp)) * 130px))}

@supports (animation-timeline: view()){
  .sc,.scL,.scV{animation:al-prog linear both;animation-timeline:view();animation-range:cover 0% cover 100%}
}

/* =====================================================================
   Responsive
   ===================================================================== */
/* @1024 (tablette paysage) : la rail fait encore 104px → on décale le contenu
   scL à droite (padding gauche) pour la dégager. Le @860/@768 reprennent dessous. */
@media (max-width:1024px){
  .scL__wrap{ padding-left:14vw; }
}
@media (max-width:860px){
  .tl{width:34%}
  .tl__y{font-size:24px;padding-left:20px}
  .dec__head,.dec__num{animation:none!important}
  /* anim coupée en mobile → le chiffre --live restait à scale(.0706) ≈ microscopique.
     On le rend STATIQUE et grand (et le ghost cale le chip à la même taille). */
  .dec__num--ghost{font-size:13vw}
  .dec__num--live{font-size:13vw;transform:translate(-50%,-50%) scale(1)}
  .sc__title{font-size:30px}
  .sc__card{margin:0 4vw 0 auto}   /* décalée à DROITE (clear du rail) ; plafond 80vw via la base */
  .scL__wrap{grid-template-columns:1fr;gap:6vh;padding:0 7vw}
  .scL__img{width:min(54vw,300px)}
  .scV__row{flex-direction:column;gap:24px}
  .scV__cell{max-width:340px;width:100%}
}
/* ≤768 : rail timeline ALLÉGÉE (plus étroite, verre clair, sans graduation) +
   contenu décalé à DROITE (hors du rail) et resserré (max 80vw). */
@media (max-width:768px){
  #tl{ width:52px; left:8px; padding:16px 0;
       background:linear-gradient(180deg,rgba(255,255,255,.20),rgba(255,255,255,.32)); }
  #tlTrack::before, #tlTrack::after{ display:none; }   /* filet + graduations retirés → moins d'éléments */
  #tlTrack{ gap:34px; }
  #tl .tl__y{ font-size:11px; margin-right:10px; }
  #tl .tl__y.is-active{ transform:scale(1.7); }

  /* Contenu décalé à droite (clear du rail) + resserré à 80vw */
  .sc__card{ margin-left:auto; margin-right:4vw; }
  /* scL : on abandonne le stage collant 100vh (qui rognait / laissait échapper
     le texte) → la SECTION S'ADAPTE À SON CONTENU, en flux normal. */
  .scL{ height:auto; content-visibility:visible; contain-intrinsic-size:auto; }
  .scL__stage{ position:relative; height:auto; overflow:visible; perspective:none; }
  .scL__wrap{ position:relative; inset:auto; left:auto; right:auto; transform:none;
    width:auto; margin-left:auto; margin-right:4vw; padding:56px 0; }
  .scL__img, .scL__text{ transform:none !important; }   /* coupe la parallaxe 3D → plus de débordement */

  .scV__row{ justify-self:end; margin-right:4vw; padding:0; }
  .scV__head{ right:4px; }
}
@media (max-width:480px){
  .dcard--car .dcard__specs{grid-template-columns:1fr}   /* specs voiture sur 1 colonne */
  .tl__y{font-size:18px;padding-left:14px}
  .sc__title{font-size:24px}
  .scL__img{width:min(72vw,300px)}
}

/* =====================================================================
   Accessibilité — pas de morph ni de parallaxe si mouvement réduit
   ===================================================================== */
@media (prefers-reduced-motion:reduce){
  .dec__head,.dec__num{animation:none!important}
  .dec__head{transform:none!important}
  .dec__glass{animation:none!important;opacity:1!important}
  .sc,.scL,.scV{animation:none!important}
  .tl__track{transition:none!important}
  .sc__bg,.sc__card,.scL__img,.scL__text,.scV__cell{transform:none!important}
  .scV__head{transform:translateY(-50%)!important}
  .sc__bg{opacity:1!important}
    .dec__head{transform:translateX(calc(50vw - 50px - 50%))!important}
  .dec__num--live{transform:translate(-50%,-50%) scale(.0706)!important}
  .dec__glass{opacity:1!important}
}

.hist-hint{position:fixed;left:50%;bottom:5em;transform:translateX(-50%);z-index:7;
  width:26px;height:42px;border:2px solid var(--ink);border-radius:14px;opacity:.45}
.hist-hint span{position:absolute;left:50%;top:8px;width:4px;height:8px;border-radius:2px;
  background:var(--ink);animation:hint-bob 1.4s ease-in-out infinite}
@keyframes hint-bob{0%,100%{transform:translateX(-50%) translateY(0);opacity:1}
  50%{transform:translateX(-50%) translateY(10px);opacity:.2}}

/* disparaît dès qu'on scrolle (pur CSS, scroll-timeline du scroller) */
@supports (animation-timeline: scroll()){
  #heroes{scroll-timeline:--histscroll block}
  .hist-hint{animation:hint-fade linear both;animation-timeline:--histscroll;animation-range:0 14svh}
  @keyframes hint-fade{from{opacity:.45}to{opacity:0}}
}
@media (prefers-reduced-motion:reduce){ .hist-hint span{animation:none} }

/* accessibilité */
@media (prefers-reduced-motion: reduce){
  #tl .tl__y, #tl .tl__y::before{ transition:none; }
}