/* ============================================================
   AstonLegacy — model.css
   FICHE MODÈLE — single-modeles.php  (is_singular('modeles'))
   Refonte « poster studio » NOIR & BLANC + liquid glass, alignée
   sur le langage de la home (home.css). Chargé UNIQUEMENT sur la
   fiche → toutes les règles sont scopées body.single-modeles, y
   compris les surcharges nav/typo qui visent des sélecteurs globaux.

   Hiérarchie de chargement : style.css (thème sombre) PUIS model.css.
   Contraste du texte sur le champ couleur (--on) calculé EN PHP
   (classe AL_Color), injecté en variable inline sur .model-hero.
   Hero 100 % CSS : aucun JS propre à la fiche.
   ============================================================ */

/* ------------------------------------------------------------
   1. TOKENS N&B + base (scopés à la fiche)
   ------------------------------------------------------------ */
body.single-modeles {
  --bg:        #EFF0EF;

  /* defaults, écrasés par le style inline de .model-hero */
  --mc-rgb: 22, 24, 26;
  --on: #fff;

  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-nb);
  font-weight: 400;
  line-height: 1.5;
}
/* Les titres globaux (h1/h2) héritent d'un serif via style.css :
   on force Manrope sur la fiche (spécificité body.classe + élément). */
body.single-modeles h1,
body.single-modeles h2,
body.single-modeles h3 { font-family: var(--font-nb); color: var(--ink); line-height: 1; }
body.single-modeles p  { color: var(--muted); }

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

/* ------------------------------------------------------------
   2. NAV — supprimée : le header est désormais GLOBAL (style.css +
   nav.js, identique partout). Plus de skin nav propre à la fiche.
   ------------------------------------------------------------ */

/* ------------------------------------------------------------
   3. HERO — vue de dessus PLEINE HAUTEUR (centre) + 3/4 retournée
   (bas-gauche) sous la carte specs liquid glass, profil (bas-droite).
   Coupe verticale : moitié gauche claire, moitié droite = champ
   couleur ACF. Contraste du texte = --on (calculé en PHP, AL_Color).
   ------------------------------------------------------------ */
.model-hero {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: calc(100svh - var(--admin-h, 0px));
  min-height: calc(100vh  - var(--admin-h, 0px));   /* repli sans svh */
  /* --mc-rgb / --on injectés inline par PHP (AL_Color) */
}

/* Demi-champ couleur (droite) — feuilleté d'un halo blanc doux */
.model-hero__field {
  position: absolute;
  inset: 0 0 0 auto;
  width: 50%;
  background: rgba(var(--mc-rgb), 0.94);
  z-index: 0;
}
.model-hero__field::after {
  content: "";
  position: absolute; inset: 0;
  background: radial-gradient(130% 80% at 28% 8%, rgba(255,255,255,0.14), rgba(255,255,255,0) 58%);
}

/* Fil d'Ariane (haut gauche, sur le clair) */
.model-crumb {
  position: absolute;
  top: calc(var(--admin-h, 0px) + 88px);
  left: 5vw;
  z-index: 7;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--muted);
}
.model-crumb a { text-decoration: none; }
.model-crumb span { opacity: 0.45; margin: 0 4px; }

/* Vue 3/4 RETOURNÉE — ancrée bas-gauche, sur le clair (sous la carte specs) */
.model-hero__threeq {
  position: absolute;
  left: 13vw; bottom: 4%;
  width: 23.5vw; max-width: 460px; height: auto;
  z-index: 2;
  pointer-events: none;
  animation: al-rise 0.95s var(--spring-soft) both 0.08s scaleX(-1);
  -webkit-transform: scaleX(-1);
  transform: scaleX(-1);
}

/* Pièce maîtresse : vue de dessus, PLEINE HAUTEUR du hero, centrée */
.model-hero__stage {
  position: absolute;
  left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  height: 81%;
  z-index: 5;
  margin: 0;
  pointer-events: none;
}
.model-hero__top-img {
  height: 100%; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 36px 46px rgba(19,21,20,0.34));
  animation: al-rise 0.95s var(--spring-soft) both 0.05s;
}

/* Profil — ancré bas-droite, sur le champ couleur */
.model-hero__side {
  position: absolute;
  right: 7vw; bottom: 4vh;
  width: 34vw; max-width: 560px; height: auto;
  z-index: 2;
  pointer-events: none;
  animation: al-rise 0.95s var(--spring-soft) both 0.12s;
}

/* Ombres au sol « naturelles ». La voiture du milieu (top-view) garde son
   drop-shadow (sur .model-hero__top-img). La 3/4 et le profil reçoivent une
   ombre de CONTACT : une ellipse floutée posée sous la voiture, visible à
   travers les zones transparentes du PNG (z-index 1, donc sous les voitures
   en z-index 2). Mêmes ancrages (left/right/bottom) que les voitures → elles
   se suivent au resize. */
.model-hero__cshadow {
  position: absolute;
  z-index: 1;
  pointer-events: none;
  animation: al-rise 0.95s var(--spring-soft) both 0.1s;
}
.model-hero__cshadow--threeq {
  left: 13vw; bottom: calc(4% + 6px);
  width: 24vw; max-width: 470px; height: 58px;
  background: radial-gradient(ellipse 48% 52% at 52% 50%, rgba(19,21,20,0.55), rgba(19,21,20,0) 70%);
  filter: blur(6px);
}
.model-hero__cshadow--side {
  right: 6vw; bottom: calc(4vh + 6px);
  width: 33vw; max-width: 580px; height: 50px;
  background: radial-gradient(ellipse 50% 50% at 50% 50%, rgba(19,21,20,0.50), rgba(19,21,20,0) 72%);
  filter: blur(7px);
}

/* Carte specs — LIQUID GLASS (paramètres du header), par-dessus la 3/4.
   Toujours posée sur la zone claire → texte encre lisible quel que soit
   le modèle (clair argent comme rouge/sombre). */
.model-hero__specs {
  position: absolute;
  left: 4vw; top: 50%;
  transform: translateY(-50%);
  z-index: 5;
  isolation: isolate;                  /* contexte z-index du sheen ::before (ex-liste partagée) */
  --glass-tint: rgba(255, 255, 255, 0.30);
  --glass-radius: 24px;
  display: flex;
  flex-direction: column;
  padding: 12px;                       /* inset du cadre ; le panneau porte le contenu */
  border-radius: 24px;
  /* variante : flou plus léger que la recette commune (3px vs 14px).
     Hors Chromium, ce repli frosté prend le relais ; sur Chromium,
     model.js écrit un backdrop-filter url(#…) inline par-dessus. */
  -webkit-backdrop-filter: blur(3px) saturate(1) brightness(1.16);
          backdrop-filter: blur(3px) saturate(1) brightness(1.16);
  animation: al-rise 0.9s var(--spring-soft) both 0.14s;
}
/* DOUBLE VERRE — panneau intérieur frosté (specs / view / panel / valo) */
.model-hero__specs-panel {
  display: flex; flex-direction: column; gap: 16px;
  padding: 20px 80px;
  --panel-tint: rgba(255, 255, 255, 0.5);
  --panel-radius: 18px;
  --panel-blur: 10px;
}

/* Reflet diagonal (sheen) commun aux trois cartes verre, et passage du
   contenu au-dessus. La DIFFRACTION réfractante est posée par model.js
   (Chromium uniquement) : il écrit un « backdrop-filter: url(#…) » inline sur
   chaque carte, dimensionné à l'élément. Hors Chromium, le repli frosté
   (blur + brightness ci-dessus / ci-dessous) prend le relais. */
.model-hero__specs::before,
.model-panel::before,
.model-valo::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%);
}
.model-hero__specs > *,
.model-panel > *,
.model-valo > * {
  position: relative;
  z-index: 1;
}
.model-hero__spec {
  padding: 20px 0;
  border-bottom: 1px solid var(--line);
}
.model-hero__spec-k {
  font-size: 9.5px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--subtle);
  font-weight: 700;
  margin-bottom: 4px;
}
.model-hero__spec-v {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
  letter-spacing: -0.01em;
  line-height: 1;
  font-variant-numeric: tabular-nums;
}
.model-hero__spec-v em { font-style: normal; font-size: 0.6em; color: var(--muted); margin-left: 3px; }

/* Colonne identité (droite, sur le champ couleur → texte = --on) */
.model-hero__id {
  position: absolute;
  right: 5vw; top: 50%;
  transform: translateY(-50%);
  z-index: 4;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  gap: 13px;
  max-width: 42vw;
  color: var(--on);
  animation: al-rise 0.9s var(--spring-soft) both 0.26s;
}
.model-hero__by {
  display: flex; align-items: center; gap: 10px;
  font-size: 11px; font-weight: 600; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--on); opacity: 0.82;
}
.model-hero__by::after { content: ""; width: 24px; height: 1px; background: currentColor; }
.model-hero__title {
  margin: 0;
  font-weight: 800;
  font-size: clamp(56px, 7.4vw, 112px);
  letter-spacing: -0.045em;
  line-height: 0.84;
  color: var(--on);
}
.model-hero__title em {
  display: block;
  font-style: normal;
  font-weight: 300;
  font-size: 0.26em;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  opacity: 0.85;
  margin-top: 8px;
}
.model-hero__sub {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  font-weight: 600; color: var(--on); opacity: 0.7;
}
.model-hero__tag {
  font-size: 14.5px; line-height: 1.45; max-width: 100%;
  color: var(--on); opacity: 0.86; font-weight: 500; margin: 4px 0 0;
}
.model-hero__bond {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--on); opacity: 0.9;
}
.model-hero__bond .ti { font-size: 13px; }

/* Colonne identité : texte BINAIRE 100 % --on (blanc OU encre selon le
   contraste du champ ACF, calculé en PHP) — aucune atténuation. Le sélecteur
   est scopé .model-hero__id afin de battre les règles typographiques de base
   « body.single-modeles h1 { color: var(--ink) } » et « …p { color: var(--muted) } »
   qui, plus spécifiques que .model-hero__title/.__tag, forçaient sinon le titre
   en encre et la tagline en gris sur les champs sombres. */
.model-hero__id,
.model-hero__id .model-hero__by,
.model-hero__id .model-hero__title,
.model-hero__id .model-hero__title em,
.model-hero__id .model-hero__sub,
.model-hero__id .model-hero__tag,
.model-hero__id .model-hero__bond {
  color: var(--on);
  opacity: 1;
}
.model-hero__cta { display: flex; gap: 10px; margin-top: 6px; }

/* Boutons du hero (sur le champ couleur) */
.model-btn {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 600; letter-spacing: 0.01em;
  text-decoration: none; cursor: pointer; border: 0;
  padding: 12px 22px; border-radius: 999px;
  transition: transform 0.4s var(--spring), box-shadow 0.4s ease;
}
.model-btn:hover, .model-pager:hover {
    color: inherit;
}

/* CTA de la fiche : le mécanisme (fond translucide .18 → blanc) vient désormais
   du .al-btn--gooey-white GLOBAL. Ici on n'adapte que ce qui dépend du CHAMP
   COULEUR : texte contrasté (--on) + liseré blanc au repos ; au survol le fond
   devient blanc → texte en --ink (encre). */
.model-hero__cta .al-btn--gooey-white {
  color: var(--on);
  border-color: rgba(255, 255, 255, 0.35);
}
.model-hero__cta .al-btn--gooey-white:hover { color: var(--ink); }
/* .model-btn--primary remplacé par .al-btn--gooey-white (design system) */
.model-btn--ghost {
  color: var(--on);
  background: transparent;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,0.3);
}
.model-btn:hover { transform: translateY(-3px); }
.model-btn .ti { font-size: 15px; }

/* Variante de centrage pour les éléments verticalement centrés
   (le translateY(-50%) doit survivre à l'animation) */
.model-hero__specs { animation-name: model-rise-c; }
.model-hero__id    { animation-name: model-rise-c; }
@keyframes model-rise-c {
  from { opacity: 0; transform: translateY(calc(-50% + 18px)); }
  to   { opacity: 1; transform: translateY(-50%); }
}

/* ------------------------------------------------------------
   4. SECTIONS COMMUNES (eyebrow, titre, lien flèche)
   ------------------------------------------------------------ */
.model-sec { padding: 90px 0; }
/* .model-eyebrow remplacé par .eyebrow (design system) */
.model-h2 {
  font-size: clamp(32px, 5vw, 54px);
  font-weight: 800; letter-spacing: -0.035em; line-height: 0.98;
  color: var(--ink);
  margin: 0 0 36px;
}
.model-h2 b { font-weight: 300; }

/* ------------------------------------------------------------
   5. TROIS VUES — plaques verre « pop-out »
   ------------------------------------------------------------ */
.model-views {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
  gap: 24px;
}
.model-view {
  position: relative;
  height: 300px;
  border-radius: 26px;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-end;
  padding: 0 10px 10px;
  isolation: isolate;
  /* cadre = .al-glass (teinte/bordure/ombre) ; on garde le blur 18 propre */
  --glass-tint: rgba(255, 255, 255, 0.34);
  --glass-radius: 26px;
  -webkit-backdrop-filter: blur(18px) saturate(1.2) brightness(1.07);
          backdrop-filter: blur(18px) saturate(1.2) brightness(1.07);
  transition: transform 0.55s var(--spring), box-shadow 0.5s ease;
}
.model-view: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);
}
.model-view__img {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -58%);
  max-width: 88%; max-height: 78%; width: auto;
  object-fit: contain;
  filter: drop-shadow(0 12px 18px rgba(19,21,20,0.12)) drop-shadow(0 24px 34px rgba(19,21,20,0.08));
  z-index: 3;
  transition: transform 0.55s var(--spring-soft);
}
.model-view:hover .model-view__img { transform: translate(-50%, -62%) scale(1.04); }
.model-view__label {
  position: relative; z-index: 1;
  font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase;
  color: var(--muted);
}
.model-view__accent {
  position: relative; z-index: 1;
  width: 34px; height: 3px; border-radius: 2px; margin-top: 10px;
  background: rgb(var(--mc-rgb));
  box-shadow: 0 0 0 1px var(--line-soft);
}
.model-view__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;
}

/* ------------------------------------------------------------
   6. CORPS — description + fiche technique (plaque verre)
   ------------------------------------------------------------ */
.model-body { display: grid; grid-template-columns: 1.3fr 1fr; gap: 24px; align-items: start; }
.model-desc__content { font-size: 15px; line-height: 1.75; color: var(--muted); max-width: 62ch; }
.model-desc__content p { margin: 0 0 16px; }
.model-tags { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 22px; }
.model-tags .tag {
  font-size: 10px; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--color-gold-deep, #7A5E16);     /* puces verre partagées (= single) */
  padding: 7px 14px; border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  border: 1px solid rgba(122, 94, 22, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.model-tags .tag:hover { background: #fff; border-color: rgba(122, 94, 22, 0.5); }

.model-panel {
  position: relative;
  isolation: isolate;
  --glass-tint: rgba(255, 255, 255, 0.40);
  --glass-radius: 24px;
  border-radius: 24px;
  padding: 9px;
  -webkit-backdrop-filter: blur(14px) saturate(1) brightness(1.16);
          backdrop-filter: blur(14px) saturate(1) brightness(1.16);
}
.model-panel__inner {
  padding: 24px 26px 8px;
  --panel-tint: rgba(255, 255, 255, 0.55);
  --panel-radius: 17px;
  --panel-blur: 14px;
}
.model-panel__label {
  font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase;
  color: var(--subtle); margin-bottom: 8px;
}
.model-row {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 14px 0; border-bottom: 1px solid var(--line-soft);
}
.model-row:last-child { border-bottom: 0; }
.model-row__k { font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--subtle); font-weight: 600; }
.model-row__v { font-size: 16px; font-weight: 600; color: var(--ink); text-align: right; font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------
   7. VALORISATION — carte accent (couleur modèle en liseré)
   ------------------------------------------------------------ */
.model-valo {
  position: relative;
  isolation: isolate;
  --glass-tint: rgba(255, 255, 255, 0.40);
  --glass-radius: 24px;
  margin-top: 24px;
  border-radius: 24px;
  padding: 8px;
  -webkit-backdrop-filter: blur(14px) saturate(1) brightness(1.16);
          backdrop-filter: blur(14px) saturate(1) brightness(1.16);
}
.model-valo__inner {
  display: flex; align-items: center; justify-content: space-between; gap: 20px; flex-wrap: wrap;
  padding: 22px 26px;
  --panel-tint: rgba(255, 255, 255, 0.55);
  --panel-radius: 17px;
  --panel-blur: 14px;
}
.model-valo__k { font-size: 11px; font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--subtle); }
.model-valo__date { font-size: 11px; color: var(--subtle); margin-top: 4px; }
.model-valo__v { font-size: clamp(22px, 2.4vw, 30px); font-weight: 700; letter-spacing: -0.02em; color: var(--ink); font-variant-numeric: tabular-nums; }
.model-valo__v .cur { font-size: 0.7em; color: var(--muted); margin-left: 2px; }

/* ------------------------------------------------------------
   8. GALERIE
   ------------------------------------------------------------ */
.model-gallery { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; }
.model-gallery__item {
  position: relative;
  aspect-ratio: 4 / 3;
  border-radius: 18px;
  overflow: hidden;
  background: var(--surface);
  box-shadow: inset 0 0 0 1px var(--line), 0 16px 36px -28px rgba(19,21,20,0.4);
  cursor: pointer;
  /* reset bouton (l'item est un <button> pour la lightbox) */
  display: block; width: 100%; padding: 0; border: 0; font: inherit; color: inherit; -webkit-appearance: none; appearance: none;
}
.model-gallery__item img { width: 100%; height: 100%; object-fit: cover; transition: transform 0.55s var(--spring-soft); }
.model-gallery__item:hover img { transform: scale(1.05); }
.model-gallery__item:focus-visible { outline: 2px solid var(--color-gold-deep); outline-offset: 3px; }

/* ── LIGHTBOX (construite par single-model.js, ajoutée au <body>) ── */
.model-lightbox {
  position: fixed; inset: 0; z-index: 9999;
  display: flex; align-items: center; justify-content: center;
  background: rgba(10, 11, 11, 0.92);
  -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px);
  opacity: 0; visibility: hidden;
  transition: opacity 0.3s ease, visibility 0s linear 0.3s;
}
.model-lightbox.is-open { opacity: 1; visibility: visible; transition: opacity 0.3s ease; }
.model-lightbox__img {
  max-width: 90vw; max-height: 86vh; width: auto; height: auto; object-fit: contain;
  border-radius: 8px; box-shadow: 0 40px 120px -30px rgba(0, 0, 0, 0.8);
  transform: scale(0.96); transition: transform 0.35s var(--spring-soft, ease);
}
.model-lightbox.is-open .model-lightbox__img { transform: scale(1); }
.model-lightbox__btn {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 52px; height: 52px; border-radius: 50%; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  background: rgba(255, 255, 255, 0.12); color: #fff;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
  transition: background 0.2s ease;
}
.model-lightbox__btn:hover { background: rgba(255, 255, 255, 0.24); }
.model-lightbox__prev { left: 18px; }
.model-lightbox__next { right: 18px; }
.model-lightbox__close {
  position: absolute; top: 18px; right: 18px;
  width: 44px; height: 44px; border-radius: 50%; border: 0; cursor: pointer;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 24px; line-height: 1;
  -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px);
}
.model-lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.model-lightbox__count {
  position: absolute; bottom: 20px; left: 50%; transform: translateX(-50%);
  color: rgba(255, 255, 255, 0.7); font-size: 12px; letter-spacing: 0.12em; font-variant-numeric: tabular-nums;
}
html.lb-open { overflow: hidden; }   /* fige le scroll quand la lightbox est ouverte */
@media (max-width: 768px) {
  .model-lightbox__btn { width: 42px; height: 42px; }
  .model-lightbox__prev { left: 8px; }
  .model-lightbox__next { right: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .model-lightbox, .model-lightbox__img { transition: none; }
}

/* ------------------------------------------------------------
   9. ARTICLES LIÉS
   ------------------------------------------------------------ */
.model-related__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 20px; }
/* cartes = composant partagé .al-card (style.css) */

/* ------------------------------------------------------------
   10. DISCLAIMER
   ------------------------------------------------------------ */
.model-disclaimer {
  padding: 26px 5vw;
  text-align: center;
  font-size: 11px; font-style: italic; color: var(--subtle);
  border-top: 1px solid var(--line);
}

/* ------------------------------------------------------------
   11. RESPONSIVE
   ------------------------------------------------------------ */
/* Deux états seulement : desktop (>1024, hero inchangé) et mobile (≤1024, bloc
   « split » en fin de fichier). Ici on ne garde QUE le repli des grilles de contenu. */
@media (max-width: 1024px) {
  .model-body { grid-template-columns: 1fr; }
  .model-gallery { grid-template-columns: repeat(2, 1fr); }
  .model-related__grid { grid-template-columns: 1fr; }
}

/* ------------------------------------------------------------
   12. MOUVEMENT RÉDUIT
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  body.single-modeles *,
  body.single-modeles *::before,
  body.single-modeles *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
  .model-hero__specs { transform: translateY(-50%); }
  .model-hero__id    { transform: translateY(-50%); }
  .model-hero__rail  { transform: translateY(-50%); }
}

/* ------------------------------------------------------------
   13. HERO — RAIL « ATELIER » (designer / usine / carrosserie)
       Annotation verticale flottante sur le bord droit du champ.
   ------------------------------------------------------------ */
.model-hero__rail {
  position: absolute;
  right: 20px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 6;
  writing-mode: vertical-rl;
  text-orientation: mixed;
  white-space: nowrap;
  color: var(--on);
  pointer-events: none;
  /* model-rise-c préserve le translateY(-50%) de centrage (al-rise finit en transform:none) */
  animation: model-rise-c 0.9s cubic-bezier(0.22, 1, 0.36, 1) both 0.25s;
}
.model-hero__rail-k {
  font: 600 9px/1.3 'Oswald', system-ui, sans-serif;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  opacity: 0.5;
}
.model-hero__rail-v {
  font: 500 12.5px/1.3 'Manrope', system-ui, sans-serif;
  letter-spacing: 0.03em;
}
.model-hero__rail-sep {
  display: inline-block;
  margin: 14px 0;
  opacity: 0.32;
}
/* rail : visible >768 (desktop) ; masquée ≤768 par le bloc « split » */

/* ------------------------------------------------------------
   14. FICHE TECHNIQUE — SOUS-TITRES DE GROUPE
   ------------------------------------------------------------ */
.model-panel__sub {
  margin: 26px 0 6px;
  font: 600 10px/1 'Oswald', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--subtle, #6b6f6d);
  opacity: 0.85;
}
.model-panel__sub:first-of-type {
  margin-top: 10px;
}

/* ============================================================
   AJOUT — HERO FICHE : ghost (nom du modèle en filigrane géant,
   derrière le contenu). À coller À LA FIN de model.css.
   Réglages live : font-size (clamp), color (opacité), rotate /
   left / width (étalement vertical des mots, rotation 90°).
   ============================================================ */
.model-hero__ghost {
  position: absolute;
  left: -45vw;
  top: 0;
  bottom: 0;
  width: 100vh;
  z-index: 1;
  display: flex;
  flex-direction: row;
  justify-content: space-around;
  align-items: flex-start;
  overflow: hidden;
  pointer-events: none;
  rotate: 90deg;
}
.model-hero__ghost span {
  display: block;
  font-family: 'Oswald', var(--font-nb), system-ui, sans-serif;
  font-weight: 600;
  font-size: clamp(90px, 15.5vh, 210px);
  line-height: 0.82;
  letter-spacing: -0.01em;
  text-transform: uppercase;
  white-space: nowrap;
  color: rgba(19, 21, 20, 0.10);
}
/* ghost : visible à toutes tailles (desktop + bloc « split » ≤768) */

/* ============================================================
   15. AJOUT — HERO FICHE : PAGER MODÈLE PRÉCÉDENT / SUIVANT
   Deux liens vers les fiches adjacentes (ordre chronologique
   annee_debut, calculé en PHP). Posés dans .model-hero__id, sur
   le champ couleur → couleur = --on.

   Traitement visuel ALIGNÉ sur .model-btn--primary : verre blanc
   fixe (rgba blanc + brightness) → toujours CLAIR, que le champ
   couleur soit clair (Cygnet) ou sombre (Valhalla). Le précédent
   color-mix(var(--on)) virait au sombre sur les champs clairs.

   Largeur ADAPTATIVE : le bouton peut rétrécir (min-width:0 +
   flex-shrink) et le nom long se tronque proprement (ellipsis)
   au lieu de déborder.
   ============================================================ */
.model-hero__pager {
  display: flex;
  gap: 10px;
  margin-top: 14px;
  flex-wrap: wrap;
  justify-content: flex-end;
  align-self: stretch;     /* override align-items:flex-end de .model-hero__id → pleine largeur de colonne */
  width: 100%;
}
.model-pager {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-width: 0;            /* autorise la troncature des noms longs */
  max-width: 100%;
  flex: 0 1 auto;          /* peut rétrécir si la ligne déborde */
  padding: 9px 14px;
  border-radius: 14px;
  text-decoration: none;
  color: var(--on);
  /* même traitement que .model-btn--primary */
  background: rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(14px) saturate(1.2) brightness(1.1);
          backdrop-filter: blur(14px) saturate(1.2) brightness(1.1);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.35), 0 14px 30px -16px rgba(19, 21, 20, 0.5);
  transition: transform 0.4s var(--spring), box-shadow 0.4s ease;
}
.model-pager:hover { transform: translateY(-3px); }
.model-pager:focus-visible { outline: 2px solid var(--on); outline-offset: 2px; }
.model-pager .ti { font-size: 17px; flex: 0 0 auto; opacity: 0.85; }
.model-pager__txt {
  display: flex; flex-direction: column; line-height: 1.1;
  min-width: 0;            /* maillon de la chaîne de troncature flex */
  flex: 1 1 auto;
}
.model-pager--prev .model-pager__txt { text-align: left; }
.model-pager--next .model-pager__txt { text-align: right; }
.model-pager__k {
  font: 600 8.5px/1 'Oswald', system-ui, sans-serif;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  opacity: 0.62;
  margin-bottom: 3px;
}
.model-pager__n {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 13px; font-weight: 600; letter-spacing: -0.01em;
}
/* pager : comportement desktop >768 ; masqué ≤768 (bloc « split » masque .model-hero__id) */
@media (prefers-reduced-motion: reduce) {
  .model-pager { transition: none; }
  .model-pager:hover { transform: none; }
}

/* ============================================================
   HERO FICHE MODÈLE — version mobile « split » (@1024 et moins)
   100vh STRICT · voiture vue de dessus centrée · champ ACF à DROITE /
   gris à GAUCHE · titre GHOST vertical à gauche le long de la voiture ·
   specs en cartouche HORIZONTAL en bas. (Placé en fin de fichier pour
   réafficher le ghost masqué par le @1024 plus haut.)
   ============================================================ */
@media (max-width: 1024px) {
  .model-hero {
    height: calc(100svh - var(--admin-h, 0px));
    min-height: 0;
    overflow: hidden;
    display: block;                 /* annule le flex column du @1024 */
    padding: 0;
  }
  /* SPLIT vertical : ACF à droite, gris (fond page) à gauche */
  .model-hero__field { inset: 0 0 0 auto; width: 50%; height: auto; }

  .model-crumb { position: absolute; top: calc(var(--admin-h, 0px) + 70px); left: 4vw; margin: 0; z-index: 7; }

  /* Voiture vue de dessus : centrée dans le viewport */
  .model-hero__stage {
    position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%);
    height: auto; width: auto; margin: 0; place-items: initial;
  }
  .model-hero__top-img { height: 66vh; width: auto; max-width: 62vw; object-fit: contain; }

  /* Titre GHOST : géant, vertical, à gauche, derrière la voiture */
  .model-hero__ghost {
    display: flex; flex-direction: row; align-items: center; justify-content: center;
    rotate: none; left: 0; right: auto; top: 0; bottom: 0; width: 52%;
    z-index: 1; overflow: hidden; pointer-events: none;
  }
  .model-hero__ghost span {
    writing-mode: vertical-rl; text-orientation: mixed;
    font-size: clamp(56px, 19vw, 110px); line-height: 1;
  }

  /* Specs : cartouche HORIZONTAL en bas, centré */
  .model-hero__specs {
    position: absolute; left: 50%; right: auto; top: auto; bottom: 16px;
    transform: translateX(-50%); margin: 0; flex-direction: row; z-index: 6;
    width: 90vw;
    animation: none;   /* sinon model-rise-c impose sa transform finale → cartouche décalé */
  }
  .model-hero__specs-panel { flex-direction: row; gap: 0; padding: 8px 4px; width: 100%; justify-content: space-around; }
  .model-hero__spec { flex: 1 1 0; padding: 4px 6px; border-bottom: 0; border-right: 1px solid var(--line); text-align: center; }
  .model-hero__spec:last-child { border-right: 0; }
  .model-hero__spec--cylindree,
  .model-hero__spec--moteur { display: none; }   /* retirées pour gagner de la place */
  .model-hero__spec-k { font-size: 8px; margin-bottom: 2px; }
  .model-hero__spec-v { font-size: 15px; }

  /* On masque le bloc identité (le titre est porté par le ghost) + vues annexes */
  .model-hero__id,
  .model-hero__threeq,
  .model-hero__side,
  .model-hero__cshadow,
  .model-hero__rail { display: none; }

  .model-sec { padding: 90px 30px; }
}