/* ============================================================
   AstonLegacy — home.css
   Refonte « poster studio » NOIR & BLANC (page d'accueil).
   Chargé UNIQUEMENT sur la home (is_front_page) → toutes les règles
   ci-dessous ne s'appliquent jamais aux autres pages, même celles
   qui ciblent des sélecteurs globaux (.site-nav, a, h2…).

   Hiérarchie de chargement : style.css (thème sombre) PUIS home.css.
   Les surcharges nav/footer/body utilisent un préfixe `body.home`
   (spécificité supérieure aux règles `.home …` de style.css).

   Configurateur du hero = 100 % CSS : 5 <input radio> + :has().
   Le seul JS de la home (home.js) gère les flèches + le
   glisser du carrousel Articles. Rien d'autre.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS N&B — portés par body.home (couvrent nav + main)
   ------------------------------------------------------------ */
body.home {
  --bg:          #EFF0EF;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-nb);
  font-weight: 400;
  line-height: 1.5;
}

/* Conteneur centré commun aux sections (≠ hero, qui est plein-bleed) */
.hp-shell {
  max-width: 1640px;
  margin: 0 auto;
  padding: 0 5vw;
}

/* Titres : sur la home, pas de serif Cormorant → Manrope partout */
body.home h1,
body.home h2,
body.home h3 {
  font-family: var(--font-nb);
  color: var(--ink);
  line-height: 1;
}
body.home p { color: var(--muted); font-weight: 400; line-height: 1.5; }
body.home em { color: inherit; font-style: normal; }
body.home strong { color: inherit; }

/* ------------------------------------------------------------
   2. NAV — déplacée vers style.css
   Le skin N&B de la nav (pill liquid-glass, indicateur, langue)
   vit désormais dans style.css → section « HOME — skin nav N&B »,
   avec le reste du composant nav. L'indicateur glissant .nav-ind
   est piloté par home.js.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   3. HERO « poster studio »
   ------------------------------------------------------------ */
body.home .hp-hero {
  position: relative;
  overflow: hidden;
  height: auto;                                   /* annule le calc() de style.css */
  min-height: calc(100svh - var(--admin-h, 0px));
  min-height: calc(100vh  - var(--admin-h, 0px)); /* repli sans svh */
  isolation: isolate;

  /* Géométrie figée (validée en session précédente) */
  --carx: 58%;
  --cary: 56%;
  --carw: 60vw;
  --plumex: 36%;
  --plumey: 45%;
  --smoke: 1;
  --calpha: 0.90;

  /* Valeurs par défaut, écrasées par le <style> inline #hp-hero-colors */
  --mc-rgb: 22, 24, 26;
  --on: #fff;
  --onstroke: rgba(255, 255, 255, 0.55);
}

/* Les 5 radios d'état (cachés ; activés au clavier via leurs labels) */
.hp-cfg__radio {
  position: absolute;
  opacity: 0;
  pointer-events: none;
  width: 0;
  height: 0;
}

/* — Bande de couleur (haut 57 %) — */
.hp-hero__band {
  position: absolute;
  inset: 0 0 auto 0;
  height: 55%;
  background: rgba(var(--mc-rgb), var(--calpha));
  transition: background-color 0.5s ease;
  z-index: 0;
}

/* — Panache de fumée (feTurbulence procédural, SMIL) — */
.hp-hero__smoke {
  position: absolute;
  left: var(--plumex);
  top: var(--plumey);
  width: 52%;
  height: 82%;
  transform: translateX(-50%);
  opacity: var(--smoke);
  mix-blend-mode: screen;
  pointer-events: none;
  overflow: hidden;
  -webkit-mask: radial-gradient(52% 58% at 50% 42%, #000 18%, rgba(0,0,0,0) 72%);
          mask: radial-gradient(52% 58% at 50% 42%, #000 18%, rgba(0,0,0,0) 72%);
}
.hp-hero__smoke-svg {
  position: absolute;
  width: 170%;
  height: 200%;
  left: -35%;
  top: -50%;
}
.hp-hero__smoke-svg--1 { animation: hp-smk1 70s linear infinite; }
.hp-hero__smoke-svg--2 { animation: hp-smk2 52s linear infinite; opacity: 0.55; }
@keyframes hp-smk1 {
  0%, 100% { transform: translateX(-7%); }
  50%      { transform: translateX(7%); }
}
@keyframes hp-smk2 {
  0%, 100% { transform: translate(6%, 2%); }
  50%      { transform: translate(-6%, -2%); }
}

/* — Stack générique : tous les enfants occupent la même cellule
     → le conteneur prend la taille du plus grand, pas d'effondrement — */
.hp-hero__carbob,
.hp-hero__texts {
  display: grid;
}
.hp-hero__carbob > *,
.hp-hero__texts > * {
  grid-area: 1 / 1;
}

/* — Outline géant (nom du modèle, derrière la voiture) — */
.hp-hero__out {
  position: absolute;
  inset: 0 0 auto 0;          /* couvre exactement la bande */
  height: 57%;
  z-index: 1;
  pointer-events: none;
  display: grid;
  place-items: center;        /* chaque mot centré dans la bande */
  overflow: hidden;           /* le mot étiré est coupé aux bords de la bande */
}
.hp-hero__out-item {
  grid-area: 1 / 1;
  font-family: 'Oswald', var(--font-nb), system-ui, sans-serif;
  font-weight: 600;
  font-size: 100px;           /* base de mesure ; le fit JS étire pour remplir la bande */
  line-height: 1;
  letter-spacing: 0;
  text-transform: uppercase;
  white-space: nowrap;
  transform-origin: center center;  /* scaleX/scaleY posés par home.js */
  /* GLASS — calibré via le panneau live « out text » : dégradé vertical
     bas→haut (transparent → blanc 0.3) découpé sur les glyphes + halo
     sombre. */
  color: transparent;
  -webkit-text-fill-color: transparent;
  -webkit-text-stroke: 0;
  background-image: linear-gradient(0deg, rgba(255,255,255,0), rgba(255,255,255,0.3));
  -webkit-background-clip: text;
          background-clip: text;
  filter: drop-shadow(0 0 30px rgba(19,21,20,0.67));
  transition: opacity 0.6s var(--spring-soft);
  opacity: 0;
}

/* — Kicker « Aston Martin — année » : vit dans le bloc texte, juste
     au-dessus du titre, sur le fond clair → toujours sombre. — */
.hp-hero__kicker {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--muted);
}
.hp-hero__kicker::before {
  content: "";
  width: 26px;
  height: 1px;
  background: currentColor;
  opacity: 0.7;
}

/* — Voiture (PNG 3/4) à cheval sur la coupe —
     carwrap = centrage (transform protégé) · carbob = bob + grille — */
.hp-hero__carwrap {
  position: absolute;
  left: var(--carx);
  top: var(--cary);
  width: var(--carw);
  max-width: 80%;
  z-index: 6;            /* au-dessus du bas (.hp-hero__bottom z5) → voiture au 1er plan */
  pointer-events: none;  /* décorative : laisse les contrôles dessous cliquables */
  transform: translate(-50%, -50%);
}
.hp-hero__carbob { animation: hp-bob 9s ease-in-out infinite; }
/* Transition WebGL (hero-car.js) : les <img> sont masquées et remplacées par
   un <canvas>. On garantit alors une colonne pleine largeur à la grille pour
   que le canvas ait une taille, et on cale le canvas dans la cellule. */
.hp-hero__carbob:has(.hp-hero__gl) { grid-template-columns: minmax(0, 1fr); }
.hp-hero__gl { grid-area: 1 / 1; align-self: center; width: 100%; aspect-ratio: 1254 / 540; z-index: 6; pointer-events: none; }
.hp-hero__gl canvas { width: 100% !important; height: 100% !important; display: block; }
@keyframes hp-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-6px); }
}
.hp-hero__car {
  position: relative;
  z-index: 1;             /* au-dessus de l'ombre de sol (même cellule grid) */
  width: 100%;
  height: auto;
  filter: drop-shadow(0 20px 26px rgba(19, 21, 20, 0.26));
  opacity: 0;
  transform: translateY(18px) scale(0.985);
  transition: opacity 0.5s ease, transform 0.8s var(--spring-soft);
}
/* Ombre de contact elliptique au sol — effet « voiture posée » réaliste.
   Ellipse douce sous les roues, derrière la voiture (z0 < car z1). */
.hp-hero__car-shadow {
  position: absolute;
  left: 50%;
  bottom: 12%;
  width: 70%;
  height: 12%;
  transform: translateX(-50%);
  border-radius: 50%;
  background: radial-gradient(ellipse 50% 50% at 50% 50%,
    rgba(19, 21, 20, 0.64) 0%,
    rgba(19, 21, 20, 0.36) 44%,
    rgba(19, 21, 20, 0) 72%);
  filter: blur(13px);
  z-index: 0;
}

/* — Bas du hero : titre + tagline + specs / sélecteur — */
.hp-hero__bottom {
  position: absolute;
  left: 5vw; right: 5vw; top: 56%; bottom: auto;   /* toujours sous .hp-hero__band (55%) */
  z-index: 5;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 28px;
  flex-wrap: wrap;
}
.hp-hero__info { display: flex; flex-direction: column; }
.hp-hero__text {
  grid-area: 1 / 1;
  display: flex;
  flex-direction: column;
  gap: 14px;
  opacity: 0;
  transition: opacity 0.5s ease;
}
.hp-hero__title {
  font-weight: 600;
  font-size: clamp(36px, 5vw, 65px);
  letter-spacing: -0.04em;
  line-height: 0.9;
  color: var(--ink);
}
/* Caractères « dud » dorés du scramble → classe partagée .al-dud (style.css). */
.hp-hero__tag {
  font-size: clamp(12px, 1.05vw, 15px);
  color: var(--muted);
  font-weight: 500;
  max-width: 30ch;
  line-height: 1.3;
  letter-spacing: 0.005em;
}
/* Specs mises en valeur — barre de verre frosté + séparateurs.
   Frosté (pas de displacement) : le bloc est sur le fond clair, peu de
   contraste derrière → un verre givré rend mieux qu'une réfraction. */
.hp-hero__specs {
  display: inline-flex;
  margin-top: 16px;
  padding: 5px;                        /* inset du cadre ; le panneau porte les specs */
  width: fit-content;
  isolation: isolate;
  /* DOUBLE VERRE : cadre .al-glass + panneau frosté .hp-hero__specs-panel */
  --glass-tint: rgba(255, 255, 255, 0.32);
  --glass-radius: 18px;
  -webkit-backdrop-filter: blur(16px) saturate(1.25);
          backdrop-filter: blur(16px) saturate(1.25);
}
.hp-hero__specs-panel {
  display: inline-flex; align-items: stretch;
  padding: 12px 6px;
  --panel-tint: rgba(255, 255, 255, 0.55);
  --panel-radius: 14px;
  --panel-blur: 12px;
}
.hp-hero__spec {
  position: relative;
  padding: 0 30px;
  display: flex;
  flex-direction: column;
  justify-content: center;
}
.hp-hero__spec + .hp-hero__spec::before {
  content: "";
  position: absolute;
  left: 0; top: 50%;
  transform: translateY(-50%);
  width: 1px; height: 62%;
  background: var(--line);
}
.hp-hero__spec b {
  font-weight: 600;
  font-size: clamp(22px, 3vw, 30px);
  letter-spacing: -0.02em;
  color: var(--ink);
  display: inline-flex;
  align-items: baseline;
  white-space: nowrap;
  line-height: 0.95;
}
/* Le nombre est l'élément dominant : chiffres tabulaires (alignement
   stable au changement de modèle), pleine présence. */
.hp-hero__spec .num { font-variant-numeric: tabular-nums; }
.hp-hero__spec b em {
  font-style: normal;
  font-size: 0.42em;
  margin-left: 5px;
  font-weight: 600;
  color: var(--muted);
  letter-spacing: 0;
}
/* Label de la spec : enfant DIRECT uniquement (> span) — sinon ce
   sélecteur attrape aussi .num (span dans le <b>) et écrase le chiffre. */
.hp-hero__spec > span {
  display: block;
  font-size: 10px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--subtle);
  margin-top: 9px;
  font-weight: 600;
}

/* Sélecteur (segmented control) — même verre que la nav home (recette
   frostée + sheen). La réfraction SVG url(#…) reste réservée à la nav
   (JS/canvas) ; sur ce fond clair le givré rend identiquement. */
.hp-hero__select {
  position: relative;
  display: flex;
  align-items: center;
  padding: 5px;
  border-radius: 999px;
}
/* Sheen diagonal discret, identique à la nav (sous le contenu) */
.hp-hero__select::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  z-index: 0;
  opacity: 0.07;
  background:
    linear-gradient(135deg, rgba(255,255,255,0.55) 0%, rgba(255,255,255,0) 36%),
    radial-gradient(130% 90% at 50% -30%, rgba(255,255,255,0.30), rgba(255,255,255,0) 62%);
}
/* Le segment interne devient transparent : le verre, c'est le pill parent */
.hp-hero__seg {
  position: relative;
  z-index: 1;
  display: flex;
  gap: 2px;
}
.hp-hero__opt {
  padding: 9px 17px;
  border-radius: 999px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--muted);
  white-space: nowrap;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s, background 0.45s var(--spring), box-shadow 0.45s var(--spring);
}
/* Hover « comme la nav » : capsule de verre douce sous l'item survolé.
   L'item actif garde sa pilule blanche pleine (règle :has(:checked) plus
   spécifique → elle l'emporte au survol de l'actif). Capsule glissante
   littérale = JS (.nav-ind) ; ici on reste CSS-only, fidèle au look. */
.hp-hero__opt:hover {
  color: var(--ink);
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.5);
}

/* Pager (dots) — centré sur la largeur de page. .hp-hero__bottom est
   symétrique (left:5vw / right:5vw), donc 50% = centre de page. */
.hp-hero__pager {
  position: relative;          /* en flux à toutes les tailles → compte dans la hauteur du bloc */
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 14px;
}
.hp-hero__dots { display: flex; gap: 7px; }
.hp-hero__dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: rgba(19, 21, 20, 0.2);
  cursor: pointer;
  transition: all 0.5s var(--spring);
}

/* Accessibilité : anneau de focus visible. Chaque option du sélecteur
   est un <label> qui CONTIENT son radio → le focus clavier est natif. */
.hp-hero__opt:has(.hp-cfg__radio:focus-visible),
.hp-hero__dot:focus-visible {
  outline: 2px solid var(--ink);
  outline-offset: 2px;
}

/* ----- COMMUTATION D'ÉTAT (le cœur CSS-first) -----
   L'élément [data-i="N"] devient visible quand le radio #hpc-N est coché.
   Couvre voiture, outline, texte, dot. (La variable --mc-rgb par état est
   injectée par le <style> inline #hp-hero-colors du template ; --on /
   --onstroke n'y sont plus utilisées côté CSS.) */
.hp-hero:has(#hpc-0:checked) [data-i="0"],
.hp-hero:has(#hpc-1:checked) [data-i="1"],
.hp-hero:has(#hpc-2:checked) [data-i="2"],
.hp-hero:has(#hpc-3:checked) [data-i="3"],
.hp-hero:has(#hpc-4:checked) [data-i="4"] {
  opacity: 1;
}
.hp-hero:has(#hpc-0:checked) .hp-hero__car[data-i="0"],
.hp-hero:has(#hpc-1:checked) .hp-hero__car[data-i="1"],
.hp-hero:has(#hpc-2:checked) .hp-hero__car[data-i="2"],
.hp-hero:has(#hpc-3:checked) .hp-hero__car[data-i="3"],
.hp-hero:has(#hpc-4:checked) .hp-hero__car[data-i="4"] {
  transform: translateY(0) scale(1);
}
/* Label actif → pilule blanche (le radio coché vit DANS le label) */
.hp-hero__opt:has(.hp-cfg__radio:checked) {
  color: var(--ink);
  font-weight: 600;
  background: #fff;
  box-shadow: 0 5px 16px -5px rgba(19, 21, 20, 0.3);
}
/* Dot actif → barre allongée */
.hp-hero:has(#hpc-0:checked) .hp-hero__dot[data-i="0"],
.hp-hero:has(#hpc-1:checked) .hp-hero__dot[data-i="1"],
.hp-hero:has(#hpc-2:checked) .hp-hero__dot[data-i="2"],
.hp-hero:has(#hpc-3:checked) .hp-hero__dot[data-i="3"],
.hp-hero:has(#hpc-4:checked) .hp-hero__dot[data-i="4"] {
  width: 22px;
  border-radius: 999px;
  background: var(--ink);
}

/* ----- ENTRÉE À L'OUVERTURE (stagger CSS, sans .booted JS) ----- */
.hp-hero__bottom .hp-hero__info,
.hp-hero__bottom .hp-hero__select,
.hp-hero__bottom .hp-hero__pager {
  animation: al-rise 0.85s var(--spring-soft) both;
}
.hp-hero__bottom .hp-hero__info   { animation-delay: 0.14s; }
.hp-hero__bottom .hp-hero__select { animation-delay: 0.42s; }
.hp-hero__bottom .hp-hero__pager  { animation-delay: 0.50s; }

/* ------------------------------------------------------------
   4. SECTIONS COMMUNES (eyebrow, titres, lien flèche)
   ------------------------------------------------------------ */
.hp-sec { padding: 96px 0; }
.hp-sec__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  gap: 24px;
  margin-bottom: 40px;
}
.hp-eyebrow {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--subtle);
}
.hp-eyebrow::before { content: ""; width: 26px; height: 1px; background: currentColor; }
.hp-sec__title {
  font-size: clamp(34px, 5vw, 58px);
  font-weight: 800;
  letter-spacing: -0.035em;
  line-height: 0.98;
  color: var(--ink);
}
.hp-sec__title b { font-weight: 300; }
.hp-link-arrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--ink);
  white-space: nowrap;
}
.hp-sec__head-tools { display: flex; align-items: center; gap: 24px; }

/* ------------------------------------------------------------
   5. LA REVUE — accordéon horizontal (CSS pur, sans JS)
   Une lamelle par catégorie ; au survol elle s'ouvre et révèle la
   photo nette + une plaque liquid glass (catégorie, titre, extrait).
   Compétition (.hpx-acc--default) est ouverte au repos. Mouvement
   volontairement lent (flex-grow 0.9s).
   ------------------------------------------------------------ */
.hp-revue__acc {
  display: flex;
  gap: 12px;
  height: 55vh;
  min-height: 420px;
  padding: 6px 2px 26px;
}
.hpx-acc {
  position: relative;
  flex: 1 1 0;
  flex-grow: 1;
  min-width: 58px;
  border-radius: 24px;
  overflow: hidden;
  text-decoration: none;
  isolation: isolate;
  box-shadow: 0 26px 64px -30px rgba(19, 21, 20, 0.55);
  transition: flex-grow 0.9s var(--spring-soft);
}
/* Tailles : Compétition ouverte au repos, puis suit le survol. */
.hpx-acc--default { flex-grow: 5.5; }
.hp-revue__acc:hover .hpx-acc--default:not(:hover) { flex-grow: 1; }
.hpx-acc:hover { flex-grow: 5.5; }

.hpx-acc__img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform: scale(1.05);
  filter: grayscale(0.4) brightness(0.8);
  transition: filter 0.85s ease, transform 1.3s var(--spring-soft);
}
.hpx-acc__scrim {
  position: absolute;
  inset: 0;
  z-index: 1;
  background: linear-gradient(to top, rgba(8, 9, 9, 0.55), rgba(8, 9, 9, 0) 58%);
}
.hpx-acc__num {
  position: absolute;
  top: 15px;
  left: 16px;
  z-index: 4;
  font-size: 12px;
  font-weight: 700;
  color: #fff;
  opacity: 0.85;
}
.hpx-acc__vlabel {
  position: absolute;
  inset: 0;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  color: #fff;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  text-shadow: 0 1px 10px rgba(0, 0, 0, 0.55);
  transition: opacity 0.7s ease;
}
.hpx-acc__plate {
  position: absolute;
  left: 15px;
  right: 15px;
  bottom: 15px;
  z-index: 5;
  padding: 6px;                        /* inset ; le panneau porte le contenu */
  isolation: isolate;
  /* DOUBLE VERRE : cadre .al-glass + panneau frosté .hpx-acc__panel */
  --glass-tint: rgba(255, 255, 255, 0.46);
  --glass-radius: 18px;
  -webkit-backdrop-filter: blur(14px) saturate(1) brightness(1.16);
          backdrop-filter: blur(14px) saturate(1) brightness(1.16);
  opacity: 0;
  transform: translateY(14px);
  /* PAS de delay ici → la DISPARITION est immédiate. Le delay d'APPARITION
     est porté par l'état révélé (.is-revealed, 0.7s) plus bas. */
  transition: opacity 0.5s ease, transform 0.6s var(--spring-soft);
}
.hpx-acc__panel {
  display: block;                      /* span → bloc, sinon le titre (display:block) casse le panneau inline */
  padding: 14px 16px 15px;
  --panel-tint: rgba(255, 255, 255, 0.55);
  --panel-radius: 14px;
  --panel-blur: 14px;
}
.hpx-acc__cat {
  display: inline-block;
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink);
  padding: 5px 11px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.55);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.55);
  margin-bottom: 11px;
}
.hpx-acc__title {
  display: block;            /* le titre passe SOUS la pastille catégorie, pas à côté */
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: -0.015em;
  color: var(--ink);
  margin-bottom: 8px;
}
.hpx-acc__exc {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ink);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-bottom: 13px;
}
.hpx-acc__more { font-size: 12px; font-weight: 600; letter-spacing: 0.02em; color: var(--ink); }

/* États « ouvert » : image nette, plaque visible, label vertical masqué.
   Repos → la lamelle .hpx-acc--default. Au survol du rail, elle se referme
   (sauf si c'est elle qu'on survole), et la lamelle survolée s'ouvre. */
.hpx-acc--default .hpx-acc__img { filter: none; transform: scale(1); }
.hpx-acc--default .hpx-acc__plate { opacity: 1; transform: none; }
.hpx-acc--default .hpx-acc__vlabel { opacity: 0; }
.hp-revue__acc:hover .hpx-acc--default:not(:hover) .hpx-acc__img { filter: grayscale(0.4) brightness(0.8); transform: scale(1.05); }
.hp-revue__acc:hover .hpx-acc--default:not(:hover) .hpx-acc__plate { opacity: 0; transform: translateY(14px); }
.hp-revue__acc:hover .hpx-acc--default:not(:hover) .hpx-acc__vlabel { opacity: 1; }
.hpx-acc:hover .hpx-acc__img { filter: none; transform: scale(1); }
.hpx-acc:hover .hpx-acc__plate { opacity: 1; transform: none; }
.hpx-acc:hover .hpx-acc__vlabel { opacity: 0; }

/* La plaque (catégorie / titre / extrait) de la lamelle ouverte n'apparaît
   QU'UNE FOIS l'accordéon révélé — elle entre en scène APRÈS l'animation
   d'entrée de .hp-revue__acc, pas pendant. Sans JS → visible normalement. */
html.al-js .hp-revue__acc[data-al-reveal]:not(.is-revealed) .hpx-acc--default .hpx-acc__plate {
  opacity: 0;
  transform: translateY(14px);
}
html.al-js .hp-revue__acc[data-al-reveal].is-revealed .hpx-acc--default .hpx-acc__plate {
  transition-delay: 0.7s;   /* attend la fin du reveal de l'accordéon (0.7s) — APPARITION uniquement */
}
/* DISPARITION immédiate : le délai ne doit pas s'appliquer quand la plaque part.
   Spécificité montée (≥ la règle reveal ci-dessus) pour forcer le delay à 0. */
.hp-revue__acc:hover .hpx-acc--default:not(:hover) .hpx-acc__plate,
html.al-js .hp-revue__acc[data-al-reveal].is-revealed:hover .hpx-acc--default:not(:hover) .hpx-acc__plate {
  transition-delay: 0s;
}

@media (prefers-reduced-motion: reduce) {
  .hpx-acc,
  .hpx-acc__img,
  .hpx-acc__plate,
  .hpx-acc__vlabel { transition: none; }
}

/* ------------------------------------------------------------
   6. MODÈLES — tuiles « pop-out » (voiture débordant en haut)
   Carte glass = ~2/3 de la tuile ; la vue de dessus déborde par le
   haut pour créer la profondeur. Le grand padding-haut du rail
   contient ce débordement + le soulèvement au survol. Le défilement
   gauche/droite est piloté par la souris (home.js).
   ------------------------------------------------------------ */
.hp-models__strip {
  display: flex;
  gap: 30px;
  overflow-x: auto;
  overflow-y: hidden;
  padding: 245px 8px 34px;
  scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
  align-items: flex-end;
  cursor: ew-resize;
}
.hp-models__strip::-webkit-scrollbar { display: none; }

.hpx-mt2 {
  position: relative;
  flex: 0 0 clamp(220px, 23vw, 300px);
  height: 200px;
  margin-bottom: 4em;
  text-decoration: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px 12px;
  isolation: isolate;
  /* DOUBLE VERRE : cadre .al-glass (teinte + bordure + ombre) + frost ; le
     panneau .hpx-mt2__panel porte la 2e couche frostée. */
  --glass-tint: rgba(255, 255, 255, 0.26);
  --glass-radius: 26px;
  -webkit-backdrop-filter: blur(16px) saturate(1.2) brightness(1.07);
          backdrop-filter: blur(16px) saturate(1.2) brightness(1.07);
  transition: transform 0.55s var(--spring), box-shadow 0.5s ease;
}
.hpx-mt2__panel {
  position: relative; z-index: 1;
  width: 100%;
  display: flex; flex-direction: column; align-items: center;
  padding: 10px 14px 14px;
  --panel-tint: rgba(255, 255, 255, 0.5);
  --panel-radius: 18px;
  --panel-blur: 12px;
}
.hpx-mt2:hover {
  transform: translateY(-8px);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.96),
    inset 0 0 0 1px rgba(255, 255, 255, 0.26),
    0 36px 72px -24px rgba(19, 21, 20, 0.55);
}
.hpx-mt2__car {
  position: absolute;
  left: 50%;
  bottom: 95px;
  transform: translateX(-50%);
  height: clamp(232px, 25vw, 312px);
  width: auto;
  max-width: none;
  object-fit: contain;
  filter: drop-shadow(0 10px 14px rgba(19, 21, 20, 0.10)) drop-shadow(0 20px 30px rgba(19, 21, 20, 0.07));
  z-index: 3;
  pointer-events: auto; /* la voiture fait partie de la zone cliquable du lien */
  transition: transform 0.55s var(--spring-soft);
}
.hpx-mt2:hover .hpx-mt2__car { transform: translateX(-50%) translateY(-12px) scale(1.05); }
.hpx-mt2__name { position: relative; z-index: 1; margin-top: 6px; font-size: 16.5px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.hpx-mt2__pwr { position: relative; z-index: 1; margin-top: 8px; font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em; color: var(--muted); }
.hpx-mt2__accent { position: relative; z-index: 1; width: 36px; height: 3px; border-radius: 2px; margin-top: 12px; background: var(--mc, var(--ink)); }

/* Rail + hints de navigation (chevrons). Le défilement étant piloté à la
   souris, on signale l'horizontalité ; ils s'effacent au 1er défilement. */
.hp-models__rail { position: relative; }
.hp-models__hint {
  position: absolute;
  top: 25%;
  margin-top: -21px;
  z-index: 6;
  pointer-events: none;
  font-family: var(--font-nb);
  font-size: 42px;
  font-weight: 300;
  line-height: 1;
  color: rgba(19, 21, 20, 0.30);
  transition: opacity 0.5s ease;
}
.hp-models__hint--l { left: 8px; animation: hp-hint-l 1.9s ease-in-out infinite; }
.hp-models__hint--r { right: 8px; animation: hp-hint-r 1.9s ease-in-out infinite; }
.hp-models__rail.is-scrolled .hp-models__hint { opacity: 0; }
@keyframes hp-hint-l { 0%, 100% { transform: translateX(0); opacity: 0.30; } 50% { transform: translateX(-5px); opacity: 0.55; } }
@keyframes hp-hint-r { 0%, 100% { transform: translateX(0); opacity: 0.30; } 50% { transform: translateX(5px); opacity: 0.55; } }

@media (prefers-reduced-motion: reduce) {
  .hpx-mt2,
  .hpx-mt2__car { transition: none; }
  .hp-models__hint { animation: none; }
}

/* ------------------------------------------------------------
   7. RUBRIQUES (3 portes)
   ------------------------------------------------------------ */
.hp-gates { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
.hp-gate {
  display: flex;
  flex-direction: column;
  min-height: 208px;
  /* DOUBLE VERRE : cadre .al-glass + panneau frosté .hp-gate__panel */
  --glass-tint: rgba(255, 255, 255, 0.40);
  --glass-radius: 20px;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  transition: transform 0.4s var(--spring-soft);
}
.hp-gate:hover { transform: translateY(-5px); }
.hp-gate__panel {
  flex: 1;
  display: flex; flex-direction: column;
  margin: 9px;
  padding: 26px 28px;
  --panel-tint: rgba(255, 255, 255, 0.55);
  --panel-radius: 14px;
  --panel-blur: 16px;
}
.hp-gate__num { font-size: 13px; font-weight: 700; color: var(--subtle); }
.hp-gate__title { margin-top: auto; font-size: 27px; font-weight: 800; letter-spacing: -0.03em; color: var(--ink); }
.hp-gate__sub { margin-top: 8px; font-size: 13px; color: var(--muted); }
@media (max-width: 1024px) { .hp-gates { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 768px)  { .hp-gates { grid-template-columns: 1fr; } }

/* ============================================================
   TIMELINE « rail vivant » — survol = jalon actif + carte verre
   Données : répéteur ACF home_timeline (front-page.php).
   Carte = recette verre commune (style.css) + variante .46→.60 ici.
   Actif piloté par home.js (data-on) ; le reste est en CSS.
   ============================================================ */
.altl { position: relative; margin-top: 24px; padding-top: 172px; }

.altl__card {
  position: absolute;
  top: 0; left: 0;
  width: 330px;
  text-decoration: none;
  /* DOUBLE VERRE : cadre .al-glass + panneau frosté .altl__card-panel */
  isolation: isolate;
  --glass-tint: rgba(255, 255, 255, 0.48);
  --glass-radius: 18px;
  -webkit-backdrop-filter: blur(14px) saturate(1.1);
          backdrop-filter: blur(14px) saturate(1.1);
  transform: translateX(0);
  transition: transform 0.6s var(--spring-soft);
  z-index: 3;
}
.altl__card-panel {
  display: block;
  margin: 7px;
  padding: 15px 18px 17px;
  --panel-tint: rgba(255, 255, 255, 0.5);
  --panel-radius: 13px;
  --panel-blur: 16px;
}
.altl__card::after {
  content: "";
  position: absolute;
  bottom: -6px;
  left: var(--arrowL, 40px);
  width: 13px; height: 13px;
  background: linear-gradient(135deg, rgba(255,255,255,0.46), rgba(255,255,255,0.60));
  transform: rotate(45deg);
  box-shadow: 2px 2px 6px -3px rgba(19,21,20,0.3);
}
.altl__card-yr {
  display: block;
  font-family: 'Oswald', var(--font-nb);
  font-size: 30px; font-weight: 600; line-height: 1;
  color: var(--color-gold-deep);
}
.altl__card-tx {
  display: block; margin-top: 8px;
  font-family: var(--font-nb);
  font-size: 13.5px; line-height: 1.5;
  color: var(--ink);
}
.altl__card-cta {
  display: inline-flex; align-items: center; gap: 6px;
  margin-top: 13px;
  font-family: var(--font-nb);
  font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-gold-deep);
  transition: gap 0.3s var(--spring-soft);
}
.altl__card:hover .altl__card-cta,
.altl__card:focus-visible .altl__card-cta { gap: 11px; }

.altl__track { position: relative; }
.altl__base { position: absolute; top: 9px; left: 0; right: 0; height: 1px; background: var(--line); }
.altl__fill {
  position: absolute; top: 9px; left: 0; height: 1px; width: 0;
  background: var(--color-gold-deep);
  transition: width 0.6s var(--spring-soft);
}
.altl__head {
  position: absolute; top: 9px; left: 0;
  width: 20px; height: 20px;
  border-radius: 50%;
  border: 1.5px solid var(--color-gold-deep);
  background: transparent;
  transform: translate(-50%, -50%);
  transition: left 0.6s var(--spring-soft);
  box-shadow: 0 0 0 4px rgba(122,94,22,0.10);
  z-index: 2; pointer-events: none;
}
.altl__nodes { position: relative; display: flex; z-index: 1; }
.altl__node {
  flex: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: 20px; padding-top: 4px;
  text-decoration: none; cursor: pointer;
}
.altl__dot {
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--subtle);
  transition: transform 0.4s var(--spring), background 0.3s ease;
  z-index: 1;
}
.altl__yr {
  font-family: 'Oswald', var(--font-nb);
  font-size: 25px; font-weight: 500;
  color: var(--ink); opacity: 0.38;
  transition: opacity 0.35s ease, transform 0.5s var(--spring), color 0.3s ease;
}
.altl__node:hover .altl__yr,
.altl__node:focus-visible .altl__yr { opacity: 0.7; }
.altl__node[data-on="1"] .altl__yr {
  opacity: 1; color: var(--color-gold-deep); transform: scale(1.16);
}
.altl__node[data-on="1"] .altl__dot {
  background: var(--color-gold-deep); transform: scale(1.4);
}

.altl__more { margin-top: 36px; text-align: center; }
/* lien « Explorer toute l'histoire » : apparence via .al-link (global, style.css) */
.altl__more a { display: inline-flex; }

@media (prefers-reduced-motion: reduce) {
  .altl__card, .altl__fill, .altl__head, .altl__dot, .altl__yr { transition: none; }
}

/* Mobile : carte pleine largeur, années resserrées */
@media (max-width: 720px) {
  .altl { padding-top: 150px; }
  .altl__card { width: calc(100% - 4px); }
  .altl__yr { font-size: 18px; }
}

/* ------------------------------------------------------------
   9. RESPONSIVE HERO
   ------------------------------------------------------------ */
@media (max-width: 880px) {
  .hp-hero__carwrap { --carw: 122vw; }
  .hp-hero__spec { padding: 0 18px; }
  .hp-hero__bottom { flex-direction: column; align-items: flex-start; gap: 20px; }
  /* Le select est désormais un pill horizontal ; align-items flex-start
     n'a plus lieu d'être. La passe mobile dédiée affinera ce bloc. */
  .hp-hero__pager { bottom: 0; }
}

/* ------------------------------------------------------------
   10. MOUVEMENT RÉDUIT — coupe fumée, bob, entrées
   (la fumée SMIL reste, très atténuée ; aucune dérive CSS)
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.home *,
  body.home *::before,
  body.home *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .hp-hero__smoke-svg--1,
  .hp-hero__smoke-svg--2,
  .hp-hero__carbob { animation: none !important; }
  .hp-hero__car { transform: none; opacity: 1; }
}

/* ============================================================
   AJOUT — HERO HOME : bouton « Voir l'affiche » + capsule de
   sélection qui suit la souris (rebond, façon header .nav-ind).
   À coller À LA FIN de home.css. Toutes les règles sont neuves.
   ============================================================ */

/* — Bouton « Voir l'affiche » (1 par modèle, affiché selon le radio coché) —
     Même recette de verre clair que le sélecteur voisin (.hp-hero__select) :
     il fait désormais partie de la même famille de contrôles que la nav, le
     sélecteur, model-btn--primary et les filtres de La Revue. Texte en encre
     (--ink) → lisible sur la pilule givrée, sur la partie basse claire du hero. */
.hp-hero__poster-wrap { display: flex; }
.hp-hero__poster {
  display: none;                 /* masqué tant que le modèle n'est pas actif */
  margin-top: 18px;              /* l'apparence vient de .al-btn--gooey-white (global, style.css) */
}
/* seul le bouton du modèle coché est visible/cliquable */
.hp-hero:has(#hpc-0:checked) .hp-hero__poster[data-i="0"],
.hp-hero:has(#hpc-1:checked) .hp-hero__poster[data-i="1"],
.hp-hero:has(#hpc-2:checked) .hp-hero__poster[data-i="2"],
.hp-hero:has(#hpc-3:checked) .hp-hero__poster[data-i="3"],
.hp-hero:has(#hpc-4:checked) .hp-hero__poster[data-i="4"] { display: inline-flex; }

/* — Capsule glissante du sélecteur (créée par home.js) — */
.hp-hero__seg.is-js .hp-hero__opt { position: relative; z-index: 1; }
/* en mode JS, la capsule porte le visuel : on neutralise les fonds CSS
   (survol + actif) pour éviter le doublon ; couleur/poids du label conservés */
.hp-hero__seg.is-js .hp-hero__opt:hover { background: transparent; box-shadow: none; }
.hp-hero__seg.is-js .hp-hero__opt:has(.hp-cfg__radio:checked) { background: transparent; box-shadow: none; }
/* La capsule du sélecteur utilise désormais la classe PARTAGÉE .al-seg__ind
   (look + reduced-motion définis dans style.css, comportement piloté par le
   module assets/js/sliding-indicator.js — mutualisé avec le nav principal). */

/* ============================================================
   RESPONSIVE — Home (ladder 1280/1024/768/480 ; desktop ≥1281 inchangé).
   La couche hero a déjà ses passes 960/880 ; on ajoute ici gouttières,
   rythme des sections, mise en pile de l'accordéon Revue et cibles tactiles.
   ============================================================ */
@media (max-width: 1024px) {
  .hp-shell { padding: 0 var(--gut); }   /* gouttière mutualisée (plancher 16px) */
  .hp-sec { padding: 72px 0; }
  .hp-hero__carwrap { --cary: 38%; }                 /* voiture remontée */
  .hp-hero__bottom { top: 56%; bottom: auto; }       /* le bas démarre sous la bande (.hp-hero__band = 55%) */
}
@media (max-width: 768px) {
  .hp-sec { padding: 56px 0; }
  .hp-sec__head { margin-bottom: 28px; }

  /* LA REVUE : l'accordéon horizontal (ouverture au survol) devient une
     PILE verticale de cartes, contenu toujours visible (pas de hover tactile). */
  .hp-revue__acc { flex-direction: column; height: auto; min-height: 0; gap: 14px; }
  .hpx-acc { flex: none; width: 100%; height: 500px; min-width: 0; }
  .hpx-acc__img { filter: none; transform: scale(1); }
  .hpx-acc__plate { opacity: 1 !important; transform: none !important; }
  .hpx-acc__vlabel { display: none; }

  /* HERO (esprit du @430, valeurs tablette) : voiture recentrée/remontée/réduite,
     bas ré-ancré en bas (annule le top:56% du 1024), dots plus bas. */
  .hp-hero__carwrap { --carx: 50%; --cary: 45%; --carw: 85vw; }
  .hp-hero__bottom { height: auto; }   /* sous la bande (top:56% hérité de la base), hauteur = contenu */
  .hp-hero__pager { position: relative; align-self: center; transform: none; left: auto; bottom: auto; margin-top: 44px; }  /* relative → compte dans la hauteur du bloc, espace au-dessus des dots */

  /* Sélecteur : tient dans le viewport, noms tronqués en « … » */
  .hp-hero__select { width: 100%; max-width: 100%; }
  .hp-hero__seg { width: 100%; }
  .hp-hero__opt {
    flex: 1 1 0; min-width: 0; min-height: 44px;        /* équi-répartition + cible tactile */
    padding: 9px 10px; font-size: 12px; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
  }
  .hp-hero__dot { min-width: 18px; min-height: 18px; }

  /* Bande modèles : swipe natif + un modèle plus gros + indices ← → renforcés */
  .hp-models__strip { cursor: default; gap: 20px; }
  .hpx-mt2 { flex: 0 0 70vw; }
  .hpx-mt2__car { height: clamp(248px, 56vw, 320px); }
  .hp-models__hint { font-size: 50px; color: rgba(19, 21, 20, 0.5); }
}
@media (max-width: 480px) {
  .hp-sec { padding: 44px 0; }
  .hp-sec__head { flex-direction: column; align-items: flex-start; gap: 14px; }
  .hpx-acc { height: 500px; }
}
/* ≤430 : réglages fins du hero (voiture + bas + sélecteur) et de la bande modèles. */
@media (max-width: 430px) {
  .hp-hero__carwrap { --carx: 50%; --cary: 40%; --carw: 85vw; }   /* recentrée, plus petite, remontée */
  .hp-hero__band { height: 46%; }                                 /* bande raccourcie → plus de place pour le contenu */
  .hp-hero__bottom { top: 48%; height: auto; }                    /* reste SOUS la bande (46%), mais remonté → pager plus dans l'overflow */
  .hp-hero__pager { position: relative; align-self: center; transform: none; left: auto; bottom: auto; margin-top: 44px; }  /* relative → compte dans la hauteur du bloc, espace au-dessus des dots */

  /* Sélecteur : tient dans le viewport, noms tronqués en « … » */
  .hp-hero__select { width: 100%; max-width: 100%; }
  .hp-hero__seg { width: 100%; }
  .hp-hero__opt {
    flex: 1 1 0; min-width: 0; padding: 9px 8px; font-size: 11px; text-align: center;
    overflow: hidden; text-overflow: ellipsis;
  }

  /* Bande modèles : un seul modèle plus gros + indices ← → plus visibles */
  .hpx-mt2 { flex: 0 0 82vw; }
  .hpx-mt2__car { height: clamp(248px, 64vw, 300px); }
  .hp-models__hint { font-size: 54px; color: rgba(19, 21, 20, 0.55); }
}
/* ≤340 : très petits mobiles — voiture remontée */
@media (max-width: 340px) {
  .hp-hero__carwrap { --cary: 40%; }
}