/* ============================================================
   LECLERC — sixteen. Charte : Ferrari (Refero 80164adf), reprise
   dans refero-variables.css chargé avant cette feuille.
   Trois tiers : bruts (charte) → rôles → composants.
   ============================================================ */

:root {
  /* Rôles, à partir des jetons de la charte */
  --background: var(--color-carbone-nero);
  --surface-night: var(--color-notte-profonda);
  --surface-black: var(--color-carbone-nero);
  --surface-white: var(--color-bianco-ferrari);
  --surface-wash: var(--color-velo-di-luce);
  --surface-red: var(--color-rosso-corsa);
  --surface-red-deep: var(--color-rosso-scuro);
  --foreground: var(--color-bianco-ferrari);
  --foreground-muted: var(--color-fumo);
  --foreground-faint: rgb(255 255 255 / 0.4);
  --foreground-on-light: var(--color-carbone-nero);
  --foreground-on-light-muted: var(--color-piombo);
  --border-on-dark: var(--color-grafite);
  --border-on-light: var(--color-argento-chiaro);
  --accent: var(--color-rosso-corsa);
  --accent-deep: var(--color-rosso-scuro);
  --accent-muted: rgb(218 41 28 / 0.25);
  --contour-dark: rgb(255 255 255 / 0.13);
  --contour-light: rgb(0 0 0 / 0.08);
  --contour-footer: rgb(255 255 255 / 0.1);
  --timeline-outline: var(--color-grafite);
  --timeline-fill: rgb(255 255 255 / 0.06);
  --timeline-rail: rgb(255 255 255 / 0.2);
  --map-dot: var(--color-rosso-scuro);
  --map-grid: rgb(0 0 0 / 0.35);
  --map-grid-ghost: rgb(0 0 0 / 0.18);

  /* Typo : une seule famille, deux graisses (charte) */
  --font-display: "Ferrari Sans", "Genos", "Helvetica Neue", Arial, sans-serif;  /* titres, chiffres, nav : Genos, l'équivalent libre de Ferrari Sans */
  --font-text: "Barlow", "Helvetica Neue", Arial, sans-serif;                     /* textes courants : une grotesque calme */
  --font-sans: var(--font-display);
  --weight-regular: 400;
  --weight-medium: 500;
  --weight-display: 600;   /* Ferrari Sans Medium = Title-Font de ferrari.com */
  --type-impact: 6rem;        /* le nom */
  --type-display-lg: 4.375rem;
  --type-display: 3.25rem;
  --type-display-sm: 3.4375rem;
  --type-heading: 2.375rem;   /* chiffres des stats */
  --type-year: 2.25rem;
  --type-title: 1.25rem;
  --type-lead: 1.125rem;
  --type-label: 1rem;
  --type-body: 0.875rem;
  --type-eyebrow: 0.75rem;
  --leading-headline: 0.74;   /* Genos : interlignage très serré */
  --leading-flat: 0.88;
  --leading-cap: 0.72;
  --leading-display: 1.1;
  --tracking-wide: 0.083em;    /* la voix de la charte */
  --tracking-wider: 0.091em;
  --tracking-label: 0.04em;
  --tracking-heading: 0.005em;
  --tracking-stat: -0.04em;

  --duration-fast: 150ms;
  --duration-normal: 250ms;
  --duration-plate: 700ms;
  --ease-entrance: cubic-bezier(0.2, 0, 0, 1);
  --ease-plate: cubic-bezier(0.33, 0, 0, 1);
  --gap-section: 84px;         /* charte : 64–96px */
  --radius: 0px;               /* charte : géométrie nette */
}

/* Bandes de taille racine : un rem = un pixel de maquette */
html { font-size: 16px; }
@media (max-width: 1920px) { html { font-size: 0.833333vw; } }
@media (max-width: 1440px) { html { font-size: 1.111111vw; } }
@media (max-width: 1279px) { html { font-size: 16px; } }

@media (min-width: 1441px) and (max-width: 1920px) {
  [data-hero] { --hero-base: calc(1920 / 1440);
    --type-impact: calc(6rem * var(--hero-base)); --type-display-lg: calc(4.375rem * var(--hero-base));
    --type-display: calc(3.25rem * var(--hero-base)); --type-heading: calc(2.375rem * var(--hero-base));
    --type-title: calc(1.25rem * var(--hero-base)); --type-lead: calc(1.125rem * var(--hero-base));
    --type-label: calc(1rem * var(--hero-base)); --type-body: calc(0.875rem * var(--hero-base));
    --type-eyebrow: calc(0.75rem * var(--hero-base)); }
  [data-hero] [data-hero-panels] { width: calc(13.625rem * var(--hero-base, 1)); }
  [data-season] { --season-base: calc(1920 / 1440);
    --type-display-sm: calc(3.4375rem * var(--season-base)); --type-lead: calc(1.125rem * var(--season-base));
    --type-body: calc(0.875rem * var(--season-base)); --type-eyebrow: calc(0.75rem * var(--season-base)); }
}

*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; min-height: 100lvh; background: var(--background); color: var(--foreground);
  font-family: var(--font-sans); font-weight: var(--weight-regular); -webkit-font-smoothing: antialiased;
  text-transform: uppercase; overflow-x: clip;
}
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-stopped { overflow: hidden; }
a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; text-transform: inherit; }
h1, h2, h3, p, dl, dd, dt, ul { margin: 0; padding: 0; }
ul { list-style: none; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
canvas { display: block; }
.u-eyebrow { font-size: var(--type-eyebrow); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wide); line-height: var(--leading-flat); }
.u-label { font-size: var(--type-label); letter-spacing: var(--tracking-label); line-height: var(--leading-flat); }
.u-body { font-size: var(--type-body); letter-spacing: var(--tracking-label); line-height: var(--leading-flat); }
.u-text, p.u-text { font-family: var(--font-text); }
.u-medium { font-weight: var(--weight-medium); }
.u-muted { color: var(--foreground-muted); }
.u-accent { color: var(--accent); }

/* ───────── Bannière d'erreur de chargement ───────── */
.asset-error { position: fixed; left: 1rem; bottom: 1rem; z-index: 90; background: var(--accent); color: var(--surface-white); padding: 0.75rem 1rem; font-size: var(--type-body); letter-spacing: var(--tracking-wide); max-width: 40rem; }

/* ───────── Pile collante ───────── */
.stack { position: relative; background: var(--surface-black); }
.stack__layer { position: sticky; top: 0; }
.stack__layer--0 { z-index: 0; }
.stack__layer--1 { z-index: 10; }
.stack__layer--last { position: relative; z-index: 20; }
.stack__layer--tall { position: relative; height: 320lvh; }
.stack__layer--tall .stack__sticky { position: sticky; top: 0; height: 100lvh; }
.stack__layer--tall .stack__inner { height: 100lvh; }
@media (max-width: 639px) { .stack__layer--tall { height: 260lvh; } }
.stack__inner { transform-origin: center; }
.stack__shade { position: absolute; inset: 0; background: var(--surface-black); opacity: 0; pointer-events: none; }

/* ───────── Damier de couture ───────── */
.seam { position: absolute; left: 0; right: 0; top: 0; height: 34svh; pointer-events: none; z-index: 30; }
.seam canvas { width: 100%; height: 100%; }
@media (max-width: 639px) { .seam { z-index: 0; } }

/* ============================================================
   1 — HERO
   ============================================================ */
[data-hero] { position: relative; isolation: isolate; min-height: 100lvh; overflow: hidden; background: var(--background); color: var(--foreground); }
.hero__backdrop { position: absolute; inset: 0; z-index: 0; pointer-events: none; overflow: hidden; }
.hero__backdrop canvas { width: 100%; height: 100%; }
.hero__stage { position: absolute; inset: 0; z-index: 1; pointer-events: none; opacity: 0; transform: translateY(200px); }
.hero__seq { position: absolute; inset: 0; width: 100%; height: 100%; }
.stack__layer--hero { height: 240lvh; }
@media (max-width: 639px) { .stack__layer--hero { height: 200lvh; } }
.hero__ramp { position: absolute; left: 0; right: 0; bottom: 0; height: 22%; z-index: 2; pointer-events: none; display: none; }
.hero__content { position: relative; z-index: 3; min-height: 100lvh; display: flex; flex-direction: column; padding: 1.5rem; pointer-events: none; }
.hero__content > * { pointer-events: auto; }
@media (min-width: 640px) { .hero__content { padding-left: 2rem; padding-right: 2rem; } }
@media (max-height: 500px) { .hero__content { padding-top: 0.75rem; padding-bottom: 0.75rem; } }
.hero__middle { flex: 1; display: flex; align-items: center; justify-content: space-between; gap: 2rem; }

/* Masthead */
.masthead { display: flex; align-items: center; justify-content: space-between; position: relative; z-index: 30; }
.masthead__logo { display: flex; align-items: baseline; gap: 0.5rem; font-size: var(--type-label); font-weight: var(--weight-medium); letter-spacing: var(--tracking-wider); line-height: 1; height: 1.5rem; }
.masthead__logo small { font-size: var(--type-eyebrow); font-weight: var(--weight-regular); color: var(--foreground-muted); letter-spacing: var(--tracking-wider); }
.masthead__logo .shield { width: auto; height: 1.75rem; display: block; }
.masthead__logo { align-items: center; }
.masthead__nav { position: absolute; left: 50%; transform: translateX(-50%); display: none; }
.masthead__nav ul { display: flex; gap: 4rem; }
.masthead__nav a, .masthead__garage { font-size: var(--type-eyebrow); letter-spacing: var(--tracking-wide); line-height: var(--leading-flat); transition: color var(--duration-fast) var(--ease-entrance); padding: 5px 0; }
.masthead__nav a:hover, .masthead__garage:hover { color: var(--accent); }
.masthead__garage { display: none; font-weight: var(--weight-medium); }
.masthead__burger { display: block; padding: 0.5rem; margin-right: -0.5rem; }
.masthead__burger i { display: block; width: 1.5rem; height: 1px; background: currentColor; }
.masthead__burger i + i { margin-top: 0.3125rem; }
@media (min-width: 1280px) { .masthead__nav, .masthead__garage { display: block; } .masthead__burger { display: none; } }

/* Feuille plein écran */
.sheet { position: fixed; inset: 0; z-index: 50; background: var(--background); padding: 1.5rem 2rem; display: flex; flex-direction: column; opacity: 0; }
.sheet__top { display: flex; align-items: center; justify-content: space-between; }
.sheet__close { position: relative; width: 1.5rem; height: 1.5rem; }
.sheet__close i { position: absolute; left: 0; top: 50%; width: 1.5rem; height: 1px; background: currentColor; transform: rotate(45deg); }
.sheet__close i + i { transform: rotate(-45deg); }
.sheet__nav { flex: 1; display: flex; flex-direction: column; justify-content: center; gap: 1rem; }
.sheet__nav a { display: block; font-size: var(--type-heading); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); }
.sheet__nav a:hover { color: var(--accent); }
@media (min-width: 640px) { .sheet__nav { gap: 1.5rem; } .sheet__nav a { font-size: var(--type-display); } }

/* Identité */
.identity { position: relative; max-width: 26.0625rem; display: flex; flex-direction: column; gap: 6.0625rem; will-change: transform; }
@media (max-width: 1279px) { .identity { gap: 2rem; } }
@media (max-height: 500px) { .identity { gap: 1.5rem; } }
.identity__id { font-size: var(--type-label); letter-spacing: var(--tracking-wide); color: var(--foreground-muted); margin-bottom: 1.25rem; }

.identity__name { font-size: var(--type-impact); font-weight: var(--weight-display); letter-spacing: 0; line-height: var(--leading-headline); max-width: 6.4em; }
.identity__name > span[aria-hidden] { row-gap: 0; }
.identity__meta { display: flex; flex-direction: column; gap: 1rem; }
@media (max-height: 500px) { .identity__meta { gap: 0.25rem; } }
.identity__meta li { display: flex; align-items: center; gap: 0.5rem; font-family: var(--font-text); font-weight: var(--weight-medium); font-size: var(--type-lead); letter-spacing: var(--tracking-label); line-height: var(--leading-flat); }
.identity__meta .flag { width: 1.125rem; height: 0.75rem; display: block; }
.identity__meta .star { width: 1rem; height: 1rem; display: block; fill: currentColor; }
.identity__meta .shield { width: auto; height: 1.125rem; display: block; }

/* Panneaux à crochets */
[data-hero-panels] { display: flex; flex-direction: column; gap: 2rem; width: 13.625rem; }
.bracket { position: relative; padding: 1rem; }
.bracket__c { position: absolute; width: 0.625rem; height: 0.625rem; stroke: currentColor; fill: none; }
.bracket__c--tr { top: 0; right: 0; }
.bracket__c--tl { top: 0; left: 0; transform: scaleX(-1); }
.bracket__c--bl { bottom: 0; left: 0; transform: scale(-1); }
.bracket__c--br { bottom: 0; right: 0; transform: scaleY(-1); }
.panel__eyebrow { color: var(--accent); }
.panel__list { display: flex; flex-direction: column; gap: 0.375rem; margin-top: 1rem; font-family: var(--font-text); font-size: var(--type-body); letter-spacing: var(--tracking-label); line-height: var(--leading-flat); }
.panel__list dt { font-weight: var(--weight-medium); }
.panel__circuit { width: 4.875rem; height: 3.125rem; margin-top: 1rem; margin-left: auto; display: block; stroke: currentColor; fill: none; stroke-width: 1.5; }
[data-hero-stats] { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1rem; margin-top: 1.5rem; }
[data-hero-stats] dt { font-size: var(--type-eyebrow); letter-spacing: var(--tracking-label); white-space: nowrap; color: var(--foreground-muted); }
[data-hero-stats] dd { font-size: var(--type-heading); font-weight: var(--weight-display); line-height: var(--leading-cap); letter-spacing: var(--tracking-stat); margin-top: 0.5rem; }

/* Rangée d'actions */
.actions { margin-top: 0.5rem; display: grid; grid-template-columns: 1fr auto 1fr; align-items: end; gap: 2rem; }
.actions > .cta { grid-column: 2; }
.actions__trailer { display: flex; align-items: center; gap: 0.75rem; }
.actions__trailer svg { width: 2rem; height: 2rem; }
.actions__trailer span { display: block; font-family: var(--font-text); font-size: var(--type-body); letter-spacing: var(--tracking-label); line-height: var(--leading-flat); }
.actions__trailer span + span { margin-top: 0.375rem; color: var(--foreground-muted); }
.actions__trailer:hover span:first-child { color: var(--accent); }
.actions__socials { display: flex; justify-content: flex-end; gap: 2rem; font-size: var(--type-body); letter-spacing: var(--tracking-wide); }
@media (min-width: 1280px) { .actions__socials { gap: 3.6875rem; } }
.actions__socials a:hover { color: var(--accent); }

/* CTA biseauté */
.cta { position: relative; display: inline-flex; align-items: center; justify-content: center; gap: 0.7em; height: 2.5em; width: auto; padding: 0 1.4em 0 1.2em; font-size: var(--type-title); letter-spacing: var(--tracking-wide); line-height: var(--leading-flat); color: var(--accent); }
.cta svg.cta__frame { position: absolute; inset: 0; width: 100%; height: 100%; }
.cta__body { fill: var(--surface-night); }
.cta--on-light .cta__body { fill: var(--surface-black); }
.cta--hollow .cta__body { fill: none; }
.cta__flood { fill: var(--accent); transform-origin: left; transform: scaleX(0); transition: transform var(--duration-normal) var(--ease-plate); }
.cta__ring { fill: none; stroke: var(--accent); stroke-opacity: 0.25; }
.cta__brackets { fill: none; stroke: var(--accent); }
.cta__label { position: relative; transition: color var(--duration-normal) var(--ease-plate); }
.cta__arrow { position: relative; width: 0.65em; height: 0.5em; fill: none; stroke: var(--accent); transition: transform var(--duration-fast) var(--ease-entrance), stroke var(--duration-normal); }
.cta:hover .cta__flood { transform: scaleX(1); }
.cta:hover .cta__label { color: var(--surface-black); }
.cta:hover .cta__arrow { stroke: var(--surface-black); transform: translateX(0.25rem); }

/* Voile de chargement */
.veil { position: fixed; inset: 0; z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; background: var(--background); color: var(--foreground); }
.veil__inner { display: flex; flex-direction: column; align-items: center; }
.veil__helmet { position: relative; width: 7.2rem; height: 8.5rem; }
.veil__helmet svg { position: absolute; inset: 0; width: 100%; height: 100%; }
.veil__name { margin-top: 1.75rem; font-size: var(--type-lead); letter-spacing: 0.18em; line-height: var(--leading-flat); }
.veil__meter { position: absolute; left: 0; right: 0; bottom: 0; height: 4px; background: var(--border-on-dark); }
.veil__meter i { display: block; height: 100%; background: var(--accent); transform-origin: left; transform: scaleX(0); }

/* Hero — arrangement étroit */
@media (max-width: 1279px) {
  .hero__stage { align-items: flex-end; }
    .hero__ramp { display: block; background-image: linear-gradient(to bottom,
    rgb(0 0 0 / 0) 0%, rgb(0 0 0 / 0.06) 26%, rgb(0 0 0 / 0.2) 46%, rgb(0 0 0 / 0.45) 64%, rgb(0 0 0 / 0.74) 80%, rgb(0 0 0 / 0.93) 91%, var(--background) 100%); }
  .hero__middle { flex-direction: column; align-items: flex-start; justify-content: flex-start; gap: 2rem; padding-top: 2rem; }
  .identity { gap: 2rem; }
  .identity__name { font-size: var(--type-display-lg); }
  .actions { grid-template-columns: 1fr; }
  .actions__trailer, .actions__socials { display: none; }
  .cta { width: 100%; height: 3.5rem; }
}
@media (min-width: 768px) and (max-width: 1279px) { .hero__middle { flex-direction: row; justify-content: space-between; } .identity__name { font-size: var(--type-impact); } }
@media (max-width: 639px) { [data-hero-panels] { display: none; } .identity__name { font-size: var(--type-display-lg); } }

/* Story : le récit de la course, par-dessus le site */
.story { position: fixed; inset: 0; z-index: 70; background: rgb(0 0 0 / 0.92); display: flex; align-items: center; justify-content: center; padding: 2rem; opacity: 0; transition: opacity 320ms var(--ease-entrance); overflow: auto; }
.story[hidden] { display: none; }
.story.is-on { opacity: 1; }
.story__inner { position: relative; width: min(46rem, 100%); background: var(--surface-black); border: 1px solid rgb(255 255 255 / 0.2); padding: 3rem 3rem 2.5rem; transform: translateY(18px); transition: transform 520ms var(--ease-plate); }
.story.is-on .story__inner { transform: none; }
.story__close { position: absolute; top: 1.25rem; right: 1.25rem; width: 1.5rem; height: 1.5rem; }
.story__close i { position: absolute; left: 0; top: 50%; width: 1.5rem; height: 1px; background: currentColor; transform: rotate(45deg); }
.story__close i + i { transform: rotate(-45deg); }
.story__title { margin-top: 1.25rem; font-size: var(--type-display); font-weight: var(--weight-display); letter-spacing: var(--tracking-heading); line-height: var(--leading-headline); }
.story__body { margin-top: 2rem; display: flex; flex-direction: column; gap: 1.1rem; font-family: var(--font-text); font-size: 1.05rem; line-height: 1.45; letter-spacing: 0.01em; text-transform: none; color: rgb(255 255 255 / 0.88); }
.story__foot { margin-top: 2rem; padding-top: 1rem; border-top: 1px solid rgb(255 255 255 / 0.15); font-size: var(--type-body); letter-spacing: var(--tracking-label); color: var(--foreground-muted); }
@media (max-width: 639px) { .story { padding: 1rem; } .story__inner { padding: 2.5rem 1.5rem 2rem; } }