/* =============================================================
   FUBIZ — one-page. Design system d'après DESIGN.md (gamma DA)
   Palette sable terreuse · typo 3 rôles · ghost pills r40 ·
   spacing fluide indexé sur --vw-screen · easings exacts.
   ============================================================= */

/* ----------------------------------------------------------------
   1. TOKENS
   ---------------------------------------------------------------- */
:root {
  /* largeur d'écran courante (mise à jour en JS) -> spacing fluide */
  --vw-screen: 1440;
  --u: calc(1 / var(--vw-screen) * 100 * 1vw);   /* 1px @ design width, fluide */

  /* ----- Palette — MONOCHROME RICHE (remplace la couche couleur du DESIGN.md)
     Noir profond légèrement froid (pas #000), blanc papier chaud (pas #FFF),
     gris pour la hiérarchie. Soupçon de teinte bleu-quasi-noir pour sortir du
     N&B clinique. Typo / structure / motion inchangés. ----- */
  --ink:         #0B0B0D;   /* noir profond, faible teinte froide   */
  --dark:        #070708;   /* noir le plus profond (overlays)      */
  --dark-bg:     #0E0E11;   /* fond des sections sombres            */
  --dark-green:  #141417;   /* (ex-accent) -> gris très sombre      */
  --olive:       #1B1B1F;   /* surface / cards sombres              */
  --press:       #2A2A2F;   /* états pressés / 3e card              */
  --earth:       #3A3A3F;   /* gris chaud foncé                     */
  --moss:        #8C8A88;   /* gris moyen — texte secondaire        */
  --slate:       #B7B5B2;   /* gris clair — désactivé               */
  --barley:      #9C9892;   /* gris légèrement chaud — labels       */
  --sand:        #F4F2EE;   /* BLANC PAPIER chaud (fond principal)  */
  --snow:        #FFFFFF;   /* blanc pur — hautes lumières rares    */
  --red:         #9C9892;   /* accent neutralisé (monochrome)       */

  --moss-transparent: rgba(140,138,136,.34);
  --transparent-snow: hsla(0,0%,100%,.26);
  --modal-bg:         hsla(240,6%,5%,.86);

  /* ----- Rôles sémantiques (page claire par défaut) ----- */
  --bg:          var(--sand);
  --bg-invert:   var(--dark-bg);
  --surface:     var(--olive);
  --text:        var(--ink);
  --text-invert: var(--sand);
  --text-muted:  var(--moss);
  --line:        var(--barley);
  --accent:      var(--ink);

  /* ----- Images en COULEURS d'origine (filtre N&B retiré sur tout le site) ----- */
  --img-bw: none;

  /* ----- Typographie — système theboncollectif.com (voir TYPOGRAPHY.md) -----
     // TODO licence : --font-main -> "PP Neue Montreal" ; --font-accent -> "Sharp Grotesk"
     Mono-famille grotesque : une seule fonte porte tout. Les anciens rôles
     serif/sans/mono pointent désormais vers la grotesque (compat des classes). */
  --font-main:   "Hanken Grotesk", system-ui, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
  --font-accent: "Archivo", var(--font-main);   /* Sharp Grotesk Black Italic ≈ 900 italic */
  --font-role:   "Instrument Serif", Georgia, serif;  /* rôles équipe en italique (cf. mnstr) */
  --font-serif:  var(--font-main);
  --font-sans:   var(--font-main);
  --font-mono:   var(--font-main);

  /* ----- Tracking (tokens boncollectif) ----- */
  --tracking-tight: -0.05em;   /* gros titres   */
  --tracking-snug:  -0.02em;   /* titres moyens */
  --tracking-wide:   0.04em;   /* labels / boutons / nav small */

  /* ----- Rayons ----- */
  --radius-pill: calc(40 * var(--u));
  --radius-sm:   calc(6 * var(--u));
  --radius-xs:   3px;
  --radius-full: 9999px;

  /* ----- Ombre (quasi nulle, signature gamma) ----- */
  --shadow-soft: calc(11 * var(--u)) calc(4 * var(--u)) calc(12 * var(--u)) rgba(0,0,0,.10);

  /* ----- Easings (suite Penner du DESIGN.md) ----- */
  --ease-out-quad:    cubic-bezier(.25,.46,.45,.94);
  --ease-out-cubic:   cubic-bezier(.215,.61,.355,1);
  --ease-out-quart:   cubic-bezier(.165,.84,.44,1);
  --ease-out-quint:   cubic-bezier(.23,1,.32,1);
  --ease-out-expo:    cubic-bezier(.19,1,.22,1);
  --ease-in-out-quart:cubic-bezier(.77,0,.175,1);
  --ease-in-out-expo: cubic-bezier(1,0,0,1);

  /* ----- Gouttière de page (fluide) ----- */
  --pad-side: clamp(20px, calc(100 * var(--u)), 120px);

  /* ----- z-index ----- */
  --z-selectors: 1; --z-header-dropdown: 2; --z-transition: 3; --z-header: 4;
  --z-menu: 5; --z-modal: 6; --z-cookie: 7; --z-cursor: 8; --z-preloader: 9;
}

/* ----------------------------------------------------------------
   2. RESET
   ---------------------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { scroll-behavior: smooth; -webkit-text-size-adjust: 100%; }

/* Lenis (scroll inertiel) — recommandé pour éviter les conflits */
html.lenis, html.lenis body { height: auto; }
.lenis.lenis-smooth { scroll-behavior: auto !important; }
.lenis.lenis-smooth [data-lenis-prevent] { overscroll-behavior: contain; }
.lenis.lenis-stopped { overflow: hidden; }

body {
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.4;
  color: var(--text);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: hidden;
}

img, video { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul { list-style: none; }
input { font: inherit; }

::selection { background: var(--dark-green); color: var(--sand); }

:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: 2px;
}

.dot { color: var(--barley); }

/* ---------- Grain / texture (profondeur monochrome, non-clinique) ---------- */
body::after {
  content: "";
  position: fixed; inset: 0;
  z-index: 50; pointer-events: none;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.82' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 140px 140px;
  opacity: .05;
  mix-blend-mode: overlay;
}
@media (prefers-reduced-motion: reduce) { body::after { opacity: .035; } }

/* ---------- Images : N&B riche et contrasté (noirs profonds) ---------- */
.reel-item img, .reel-item video,
.cover__card img,
.scard__media img,
.hcard__media img,
.feature__media img,
.statement__bg,
.num-row__thumb {
  filter: var(--img-bw);
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHIE — système theboncollectif.com (voir TYPOGRAPHY.md)
      Mono-grotesque · UPPERCASE dominant · tracking serré en gros /
      ouvert en petit · line-height compressé sur les titres.
   ---------------------------------------------------------------- */
.t-display {                /* H1 — 110px / 700 / lh .85 / -0.05em */
  font-family: var(--font-main);
  font-weight: 700;
  font-size: clamp(44px, calc(110 * var(--u)), 150px);
  line-height: 0.85;
  letter-spacing: var(--tracking-tight);
  text-transform: uppercase;
}
.t-h2 {                     /* 62px / 500 / lh .85 */
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(32px, calc(62 * var(--u)), 84px);
  line-height: 0.86;
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
}
.t-h3 {                     /* 40px / 500 */
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(24px, calc(40 * var(--u)), 52px);
  line-height: 0.92;
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
}
/* ancien rôle "serif" (highlights / features / covers) -> grotesque 500 uppercase */
.t-h3-serif {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(22px, calc(34 * var(--u)), 44px);
  line-height: 0.95;
  letter-spacing: var(--tracking-snug);
  text-transform: uppercase;
}
/* accent expressif — Sharp Grotesk Black Italic (≈ Archivo 900 italic) */
.t-accent {
  font-family: var(--font-accent);
  font-weight: 900;
  font-style: italic;
  text-transform: none;
  letter-spacing: normal;
}
.t-body-lg { font-family: var(--font-main); font-weight: 400; font-size: clamp(17px, calc(20 * var(--u)), 24px); line-height: 1.3; }
.t-body    { font-family: var(--font-main); font-weight: 500; font-size: clamp(15px, calc(16 * var(--u)), 18px); line-height: 1.3; }
.t-body-sm { font-family: var(--font-main); font-weight: 400; font-size: clamp(14px, calc(14 * var(--u)), 16px); line-height: 1.45; }
.t-ui      { font-family: var(--font-main); font-weight: 400; font-size: 14px; line-height: 1.3; }
.t-label {
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(10px, calc(12 * var(--u)), 13px);
  line-height: 1.3;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--barley);
}

/* ----------------------------------------------------------------
   3b. ESPERLUETTE ÉDITORIALE — chaque " et " / " & " visible -> <span class="amp">
       "&" en Instrument Serif italic. Dimension en em -> s'adapte à TOUT contexte
       (display, h2/h3, corps, labels) ; léger réglage optique selon la taille.
   ---------------------------------------------------------------- */
.amp {
  font-family: var(--font-role);     /* Instrument Serif, italique élégant */
  font-style: italic;
  font-weight: 400;
  font-size: 1.08em;                 /* relatif : suit la taille du texte parent */
  letter-spacing: .02em;             /* un peu d'air autour du glyphe */
  vertical-align: baseline;
}
/* Grands titres : l'esperluette ornée prend vite trop de place -> on réduit le ratio. */
.t-display .amp,
.t-h1 .amp,
.t-h2 .amp,
.t-h3 .amp,
.t-h3-serif .amp { font-size: .9em; }
/* Petits labels mono/uppercase : l'& gagne un poil de présence + micro-alignement. */
.t-label .amp { font-size: 1.16em; vertical-align: -.02em; }
/* Rôle fondateur : déjà en Instrument Serif italic -> on neutralise le sur-dimensionnement. */
.founder__role .amp { font-size: 1em; letter-spacing: 0; }

/* ----------------------------------------------------------------
   4. BOUTONS — ghost pill
   ---------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: calc(8 * var(--u));
  padding: calc(9 * var(--u)) calc(20 * var(--u));
  font-family: var(--font-main);
  font-size: clamp(12px, calc(14 * var(--u)), 15px);
  font-weight: 400;
  line-height: 1;
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: currentColor;
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--radius-pill);
  white-space: nowrap;
  transition: background .3s var(--ease-out-cubic),
              color .3s var(--ease-out-cubic),
              transform .3s var(--ease-out-cubic);
}
.btn:hover {
  background: currentColor;
  transform: translateY(-2px);
}
/* le label reprend la couleur du fond local — défini par section */
.btn:hover { color: var(--bg); }
.statement--dark .btn:hover,
.hero .btn:hover,
.feature .btn:hover { color: var(--dark-bg); }

.btn--lg { padding: calc(14 * var(--u)) calc(30 * var(--u)); font-size: clamp(13px, calc(15 * var(--u)), 17px); }

.btn--solid {
  background: var(--ink);
  color: var(--sand);
  border-color: var(--ink);
}
.btn--solid:hover { background: var(--press); border-color: var(--press); color: var(--sand); transform: translateY(-2px); }

/* ----------------------------------------------------------------
   5. INTRO — choré gamma : wordmark -> cycle 4 frames -> zoom -> handoff vidéo
   ---------------------------------------------------------------- */
.intro {
  position: fixed; inset: 0;
  z-index: var(--z-preloader);
  display: grid; place-items: center;
  color: var(--sand);
  overflow: hidden;
}
.intro.is-done { pointer-events: none; }
.intro.is-hidden { display: none; }

/* fond noir (se retire en fondu à la fin) */
.intro__bg { position: absolute; inset: 0; background: var(--dark); z-index: 0; }

/* wordmark centré */
.intro__word {
  position: relative; z-index: 2;
  font-family: var(--font-main); font-weight: 700;
  font-size: clamp(48px, 14vw, 200px);
  line-height: .9; text-transform: lowercase; letter-spacing: var(--tracking-tight);
  opacity: 0; transform: translateY(18px);
  will-change: transform, opacity;
}

/* stage centré : boîte au ratio viewport, scalée jusqu'au plein écran */
.intro__stage {
  position: absolute; z-index: 1;
  width: 42vw; height: 42vh;            /* même ratio que le viewport -> scale uniforme remplit */
  border-radius: var(--radius-sm);
  overflow: hidden;
  opacity: 0;
  transform: scale(1);
  transform-origin: center center;
  will-change: transform, opacity;
}
.intro__frame {
  position: absolute; inset: 0;
  background-size: cover; background-position: center;
  filter: var(--img-bw);
  opacity: 0;
  will-change: opacity;
}
.intro__frame.is-on { opacity: 1; }

/* body pendant l'intro : scroll figé */
body.intro-active { overflow: hidden; }
.no-js .intro { display: none; }

/* ----------------------------------------------------------------
   6. HEADER + MENU
   ---------------------------------------------------------------- */
.header {
  position: fixed; top: 0; left: 0; right: 0;
  z-index: var(--z-header);
  display: flex; align-items: center; justify-content: space-between;
  padding: calc(22 * var(--u)) var(--pad-side);
  color: var(--sand);
  mix-blend-mode: difference;       /* lisible sur tous les fonds */
  transition: padding .4s var(--ease-out-quart);
}
.header.is-compact { padding: calc(14 * var(--u)) var(--pad-side); }

.header__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(20px, calc(26 * var(--u)), 30px);
  text-transform: lowercase;
  line-height: 1;
}
.header__nav {
  display: flex;
  gap: calc(28 * var(--u));
  font-family: var(--font-mono);
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.18em;
}
.header__nav a { position: relative; padding: 4px 0; }
.header__nav a::after {
  content: ""; position: absolute; left: 0; bottom: 0;
  width: 100%; height: 1px; background: currentColor;
  transform: scaleX(0); transform-origin: right;
  transition: transform .4s var(--ease-out-quart);
}
.header__nav a:hover::after { transform: scaleX(1); transform-origin: left; }

.header__actions { display: flex; align-items: center; gap: calc(16 * var(--u)); }
.header__shop { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .1em; padding: calc(7 * var(--u)) calc(16 * var(--u)); }

.menu-toggle { display: inline-flex; align-items: center; gap: 10px; font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .18em; }
.menu-toggle__icon { position: relative; width: 22px; height: 10px; }
.menu-toggle__icon i { position: absolute; left: 0; width: 100%; height: 1.5px; background: currentColor; transition: transform .4s var(--ease-out-quart), top .4s var(--ease-out-quart); }
.menu-toggle__icon i:nth-child(1) { top: 0; }
.menu-toggle__icon i:nth-child(2) { top: 8px; }
.menu-toggle.is-open .menu-toggle__icon i:nth-child(1) { top: 4px; transform: rotate(45deg); }
.menu-toggle.is-open .menu-toggle__icon i:nth-child(2) { top: 4px; transform: rotate(-45deg); }

/* Menu plein écran */
.menu {
  position: fixed; inset: 0;
  z-index: var(--z-menu);
  display: flex; flex-direction: column; justify-content: center;
  padding: calc(120 * var(--u)) var(--pad-side) calc(60 * var(--u));
  background: var(--dark-green);
  color: var(--sand);
  clip-path: inset(0 0 100% 0);
  visibility: hidden;
  transition: clip-path .8s var(--ease-in-out-quart), visibility .8s;
}
.menu.is-open { clip-path: inset(0 0 0 0); visibility: visible; }
.menu__nav { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.menu__item {
  display: flex; align-items: baseline; gap: calc(24 * var(--u));
  font-family: var(--font-serif);
  font-size: clamp(34px, 9vw, 110px);
  text-transform: lowercase; line-height: 1.05;
  opacity: 0; transform: translateY(40px);
  transition: opacity .6s var(--ease-out-quart), transform .6s var(--ease-out-quart), color .3s;
}
.menu.is-open .menu__item { opacity: 1; transform: translateY(0); }
.menu.is-open .menu__item:nth-child(1) { transition-delay: .15s; }
.menu.is-open .menu__item:nth-child(2) { transition-delay: .22s; }
.menu.is-open .menu__item:nth-child(3) { transition-delay: .29s; }
.menu.is-open .menu__item:nth-child(4) { transition-delay: .36s; }
.menu.is-open .menu__item:nth-child(5) { transition-delay: .43s; }
.menu__item:hover { color: var(--barley); }
.menu__num { font-family: var(--font-mono); font-size: clamp(11px, 1.4vw, 14px); color: var(--barley); letter-spacing: .2em; }
.menu__footer { display: flex; justify-content: space-between; align-items: end; margin-top: auto; padding-top: calc(40 * var(--u)); flex-wrap: wrap; gap: 16px; }
.menu__links { display: flex; gap: calc(24 * var(--u)); font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; }
.menu__links a:hover { color: var(--barley); }
.menu__caption { font-family: var(--font-mono); font-size: 12px; text-transform: uppercase; letter-spacing: .12em; color: var(--barley); }

/* ----------------------------------------------------------------
   7. HERO
   ---------------------------------------------------------------- */
.hero {
  position: relative;
  min-height: 100vh;
  display: flex; flex-direction: column;
  padding: calc(120 * var(--u)) var(--pad-side) calc(40 * var(--u));
  background: var(--dark-bg);
  color: var(--sand);
  overflow: hidden;
}
/* vidéo plein écran en boucle (derrière l'UI) */
.hero__video {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-bw);                 /* N&B riche, cohérent DA monochrome */
  z-index: 0;
}
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,8,.45), rgba(7,7,8,.2) 35%, rgba(7,7,8,.55)); }
.hero > .hero__inner, .hero > .hero__reel, .hero > .hero__scroll { position: relative; z-index: 2; }

/* révélation de l'UI hero à la fin de l'intro (stagger) */
.hero__inner, .hero__reel, .hero__scroll { opacity: 1; }
body.intro-active .hero__inner,
body.intro-active .hero__reel,
body.intro-active .hero__scroll { opacity: 0; transform: translateY(24px); }
.hero.is-revealed .hero__inner,
.hero.is-revealed .hero__reel,
.hero.is-revealed .hero__scroll {
  opacity: 1; transform: translateY(0);
  transition: opacity .8s var(--ease-out-quart), transform .8s var(--ease-out-quart);
}
.hero.is-revealed .hero__reel { transition-delay: .12s; }
.hero.is-revealed .hero__scroll { transition-delay: .22s; }

.hero__inner { flex: 0 0 auto; padding-top: calc(40 * var(--u)); }
.hero__wordmark {
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(72px, 22vw, 360px);
  line-height: 0.86;
  text-transform: lowercase;
  letter-spacing: -0.02em;
}
.hero__tagline { margin-top: calc(16 * var(--u)); color: var(--barley); }

.hero__reel {
  margin-top: auto;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: calc(16 * var(--u));
}
.reel-item { position: relative; border-radius: var(--radius-pill); overflow: hidden; aspect-ratio: 4/5; background: var(--olive); }
.reel-item video, .reel-item img { width: 100%; height: 100%; object-fit: cover; }
.reel-item figcaption {
  position: absolute; left: calc(18 * var(--u)); bottom: calc(16 * var(--u));
  color: var(--sand); mix-blend-mode: difference;
}
.reel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.4), transparent 45%);
  pointer-events: none;
}
.hero__scroll { margin-top: calc(24 * var(--u)); color: var(--barley); display: flex; justify-content: center; }
.hero__scroll span { position: relative; }
.hero__scroll span::after { content: "↓"; margin-left: 8px; display: inline-block; animation: bob 1.8s var(--ease-in-out-quart) infinite; }
@keyframes bob { 0%,100% { transform: translateY(0); } 50% { transform: translateY(5px); } }

/* ----------------------------------------------------------------
   8. TICKER / MARQUEE
   ---------------------------------------------------------------- */
.ticker {
  overflow: hidden;
  background: var(--sand);
  color: var(--ink);
  border-top: 1px solid var(--moss-transparent);
  border-bottom: 1px solid var(--moss-transparent);
  padding: calc(18 * var(--u)) 0;
}
.ticker--big { background: var(--dark-green); color: var(--sand); border: none; padding: calc(40 * var(--u)) 0; }
.marquee { width: 100%; overflow: hidden; }
.marquee__track {
  display: inline-flex; align-items: center; gap: calc(28 * var(--u));
  white-space: nowrap;
  font-family: var(--font-mono);
  font-size: clamp(13px, calc(15 * var(--u)), 18px);
  text-transform: uppercase; letter-spacing: .14em;
  will-change: transform;
}
/* grand marquee = accent expressif (Sharp Grotesk Black Italic ≈ Archivo 900 italic) */
.ticker--big .marquee__track { font-family: var(--font-accent); font-weight: 900; font-style: italic; text-transform: uppercase; letter-spacing: var(--tracking-snug); gap: calc(48 * var(--u)); }
.marquee__track .sep { color: var(--barley); }

/* ----------------------------------------------------------------
   9. LISTE NUMÉROTÉE + hover-reveal
   ---------------------------------------------------------------- */
.numbered { padding: calc(120 * var(--u)) var(--pad-side); background: var(--sand); color: var(--ink); }
.numbered__head { margin-bottom: calc(56 * var(--u)); }
.numbered__head .t-label { margin-bottom: calc(16 * var(--u)); }
.numbered__head .t-h2 { max-width: 16ch; }

.numbered__list { position: relative; border-top: 1px solid var(--moss-transparent); }
.num-row {
  position: relative;
  display: grid;
  grid-template-columns: calc(80 * var(--u)) 1fr auto;
  align-items: center;
  gap: calc(24 * var(--u));
  padding: calc(28 * var(--u)) 0;
  border-bottom: 1px solid var(--moss-transparent);
  cursor: pointer;
  transition: padding-left .5s var(--ease-out-quart);
}
.num-row:hover { padding-left: calc(24 * var(--u)); }
.num-row__index { color: var(--moss); }
.num-row__title {
  font-family: var(--font-serif);
  font-size: clamp(22px, calc(40 * var(--u)), 50px);
  line-height: 1; text-transform: lowercase; letter-spacing: -.01em;
  transition: color .4s var(--ease-out-quart);
}
.num-row:hover .num-row__title { color: var(--press); }
.num-row__cat { color: var(--moss); justify-self: end; }
.num-row__thumb {
  position: fixed;            /* suit le curseur via JS */
  top: 0; left: 0;
  width: clamp(160px, 18vw, 260px);
  aspect-ratio: 4/5;
  object-fit: cover;
  border-radius: var(--radius-sm);
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -50%) scale(.85);
  transition: opacity .4s var(--ease-out-quart), transform .5s var(--ease-out-quart);
  z-index: var(--z-header-dropdown);
  will-change: transform, opacity;
}
.num-row.is-hover .num-row__thumb { opacity: 1; transform: translate(-50%, -50%) scale(1); }

/* ----------------------------------------------------------------
   10. STATEMENTS
   ---------------------------------------------------------------- */
.statement { position: relative; padding: calc(140 * var(--u)) var(--pad-side); overflow: hidden; }
.statement--dark { color: var(--sand); background: var(--dark-bg); }
.statement--light { background: var(--sand); color: var(--moss); }
.statement__bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: .35; z-index: 0;
  transform: scale(1.08);
}
.statement--dark::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(31,29,16,.5), rgba(31,29,16,.75)); z-index: 0; }
.statement__inner { position: relative; z-index: 1; display: grid; grid-template-columns: 1.1fr .9fr; gap: calc(48 * var(--u)); align-items: end; }
.statement__inner--center { grid-template-columns: 1fr; justify-items: center; text-align: center; gap: calc(28 * var(--u)); max-width: 60ch; margin: 0 auto; }
.statement__title { max-width: 14ch; }
.statement--light .statement__title { color: var(--ink); }
.statement__body { display: flex; flex-direction: column; gap: calc(28 * var(--u)); align-items: start; }
.statement__lead { max-width: 50ch; }

/* ----------------------------------------------------------------
   11. CATÉGORIES — STICKY SCROLL CARDS
   ---------------------------------------------------------------- */
.sticky-cards { padding: calc(120 * var(--u)) var(--pad-side) calc(60 * var(--u)); background: var(--sand); }
.sticky-cards__intro { margin-bottom: calc(56 * var(--u)); }
.sticky-cards__intro .t-label { margin-bottom: calc(16 * var(--u)); }
.sticky-cards__intro .t-h2 { color: var(--ink); max-width: 18ch; }

.sticky-cards__stack { display: flex; flex-direction: column; gap: calc(40 * var(--u)); }
.scard {
  position: sticky;
  top: calc(90px + var(--i) * 26px);   /* empilement décalé */
  display: grid;
  grid-template-columns: 1fr 1fr;
  min-height: clamp(360px, 60vh, 560px);
  border-radius: var(--radius-pill);
  overflow: hidden;
  background: var(--olive);
  color: var(--sand);
  box-shadow: var(--shadow-soft);
}
.scard__media { overflow: hidden; }
.scard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out-quart); }
.scard:hover .scard__media img { transform: scale(1.05); }
.scard__content { padding: clamp(28px, calc(56 * var(--u)), 72px); display: flex; flex-direction: column; gap: calc(20 * var(--u)); align-items: start; justify-content: center; }
.scard__label { color: var(--barley); }
.scard__title { color: var(--sand); }
.scard__text { color: var(--sand); opacity: .8; max-width: 36ch; }

/* différencier les fonds des 3 cards */
.scard:nth-child(1) { background: var(--olive); }
.scard:nth-child(2) { background: var(--dark-green); }
.scard:nth-child(3) { background: var(--press); }

/* ----------------------------------------------------------------
   12. À LA UNE / HIGHLIGHTS
   ---------------------------------------------------------------- */
.highlights { padding: calc(120 * var(--u)) var(--pad-side); background: var(--dark-bg); color: var(--sand); }
.highlights__head { display: flex; align-items: end; justify-content: space-between; margin-bottom: calc(48 * var(--u)); gap: 24px; }
.highlights__head .t-h2 { color: var(--sand); }
.highlights__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(28 * var(--u)); }
.hcard { display: flex; flex-direction: column; gap: calc(18 * var(--u)); align-items: start; }
.hcard__media { display: block; width: 100%; aspect-ratio: 4/5; overflow: hidden; border-radius: var(--radius-pill); }
.hcard__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out-quart); }
.hcard__media:hover img { transform: scale(1.06); }
.hcard__label { color: var(--barley); }
.hcard__title { color: var(--sand); }

/* ----------------------------------------------------------------
   13. DANS LA PRESSE
   ---------------------------------------------------------------- */
.press { padding: calc(120 * var(--u)) var(--pad-side); background: var(--sand); color: var(--ink); }
.press__head { margin-bottom: calc(48 * var(--u)); }
.press__head .t-label { margin-bottom: calc(16 * var(--u)); }
.press__head .t-h2 { color: var(--ink); }
.press__list { border-top: 1px solid var(--moss-transparent); }
.press-row {
  display: grid;
  grid-template-columns: calc(140 * var(--u)) 1fr auto;
  gap: calc(24 * var(--u));
  align-items: center;
  padding: calc(24 * var(--u)) 0;
  border-bottom: 1px solid var(--moss-transparent);
  transition: padding-left .5s var(--ease-out-quart);
}
.press-row:hover { padding-left: calc(20 * var(--u)); }
.press-row__date { color: var(--moss); }
.press-row__title { font-size: clamp(18px, calc(24 * var(--u)), 28px); }
.press-row__src { color: var(--moss); justify-self: end; }

/* ----------------------------------------------------------------
   14. FEATURE ROWS (média / studio / talks)
   ---------------------------------------------------------------- */
.feature { padding: calc(60 * var(--u)) var(--pad-side) calc(120 * var(--u)); background: var(--sand); color: var(--ink); display: flex; flex-direction: column; gap: calc(48 * var(--u)); }
.feature__row { display: grid; grid-template-columns: 1fr 1fr; gap: calc(48 * var(--u)); align-items: center; }
.feature__row--reverse .feature__media { order: 2; }
.feature__media { border-radius: var(--radius-pill); overflow: hidden; aspect-ratio: 11/8; }
.feature__media img { width: 100%; height: 100%; object-fit: cover; transition: transform 1s var(--ease-out-quart); }
.feature__row:hover .feature__media img { transform: scale(1.05); }
.feature__text { display: flex; flex-direction: column; gap: calc(20 * var(--u)); align-items: start; }
.feature__text .t-label { color: var(--moss); }
.feature__text .t-h3-serif { color: var(--ink); }
.feature__text .t-body-sm { color: var(--moss); max-width: 42ch; }

/* ----------------------------------------------------------------
   15. LA FRÉQUENCE FUBIZ — COVERFLOW 3D + scrubber temporel
   ---------------------------------------------------------------- */
.frequence { padding: calc(140 * var(--u)) 0 calc(120 * var(--u)); background: var(--dark-bg); color: var(--sand); overflow: hidden; }
.frequence__intro { max-width: 24ch; margin: 0 var(--pad-side) calc(40 * var(--u)); }
.frequence__title { color: var(--sand); }
.frequence__sub { color: var(--barley); margin-top: calc(20 * var(--u)); max-width: 40ch; }

/* --- le deck 3D --- */
.coverflow { position: relative; }
.coverflow__stage {
  position: relative;
  height: clamp(360px, 46vw, 620px);
  perspective: 1800px;                 /* profondeur 3D (cf. ~2000px gamma)   */
  perspective-origin: 38% 50%;         /* point de fuite légèrement à gauche  */
  cursor: grab;
  touch-action: pan-y;
  overflow: visible;
}
.coverflow__stage.is-dragging { cursor: grabbing; }
.coverflow__track {
  position: absolute; top: 50%; left: 0;
  height: 0;
  display: flex; align-items: center;
  transform-style: preserve-3d;
  will-change: transform;              /* on n'anime QUE transform (GPU)      */
}

.cover {
  position: relative;
  flex: 0 0 auto;
  width: var(--cf-step, 120px);        /* pas horizontal = fort recouvrement  */
  height: clamp(300px, 34vw, 480px);
  transform-style: preserve-3d;
  margin-top: calc(-1 * clamp(150px, 17vw, 240px)); /* recentre vertical (track h=0) */
}
.cover__card {
  position: absolute; top: 0; right: 0;
  width: clamp(220px, 25vw, 360px);
  height: 100%;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--olive);
  transform-origin: right center;       /* axe de rotation = bord droit (gamma) */
  transform: rotateY(-58deg);           /* mur incliné qui fuit                 */
  backface-visibility: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.35);
  transition: transform .55s var(--ease-out-quart), box-shadow .4s var(--ease-out-quart);
  will-change: transform;
}
.cover__card img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out-quart); }
.cover__overlay {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,9,8,.7), transparent 55%);
  opacity: 0; transition: opacity .3s var(--ease-out-cubic);
}
.cover__year {
  position: absolute; left: calc(14 * var(--u)); bottom: calc(12 * var(--u));
  font-family: var(--font-mono); font-size: 11px; letter-spacing: .14em; color: var(--sand);
  opacity: 0; transition: opacity .3s var(--ease-out-cubic);
}

/* survol : la cover sort du deck (translateX comme gamma, 0.2s snappy) */
.coverflow:not(.is-dragging) .cover:hover .cover__card { transform: rotateY(-46deg) translateX(8%); box-shadow: 0 16px 50px rgba(0,0,0,.5); }

/* cover active (au centre du scrubber) : se redresse face caméra + avance */
.cover.is-active .cover__card {
  transform: rotateY(0deg) translateZ(70px) scale(1.02);
  box-shadow: 0 24px 70px rgba(0,0,0,.55);
}
.cover.is-active .cover__overlay,
.cover.is-active .cover__year { opacity: 1; }
.cover.is-active .cover__card img { transform: scale(1.04); }

/* labels décoratifs 2005 / 2026 aux extrémités */
.coverflow__decor {
  display: flex; justify-content: space-between;
  margin: calc(24 * var(--u)) var(--pad-side) 0;
  font-family: var(--font-mono); font-size: clamp(11px, calc(14 * var(--u)), 16px);
  letter-spacing: .14em; color: var(--moss); pointer-events: none;
}

/* --- lecture du projet centré --- */
.frequence__active { margin: calc(36 * var(--u)) var(--pad-side) calc(28 * var(--u)); min-height: calc(70 * var(--u)); }
.cf-active__cat { color: var(--barley); display: block; margin-bottom: calc(8 * var(--u)); }
.cf-active__title { color: var(--sand); transition: opacity .3s var(--ease-out-cubic); }

/* --- scrubber temporel --- */
.frequence__control { margin: 0 var(--pad-side); }
.freq-readout { display: flex; align-items: baseline; gap: calc(16 * var(--u)); margin-bottom: calc(18 * var(--u)); }
.freq-readout__from { color: var(--moss); }
.freq-readout__year {
  font-family: var(--font-serif);
  font-size: clamp(34px, calc(56 * var(--u)), 76px);
  line-height: .9; color: var(--sand); font-variant-numeric: tabular-nums;
}
.slider { position: relative; width: 100%; }
.slider__progress { position: absolute; top: 50%; left: 0; right: 0; height: 1px; background: var(--moss-transparent); transform: translateY(-50%); pointer-events: none; }
.slider__progress span { display: block; height: 100%; width: 100%; background: var(--barley); transform-origin: left; transform: scaleX(0); }
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 1;
  width: 100%; height: 26px; background: transparent; outline: none; cursor: grab;
}
.slider input[type="range"]:active { cursor: grabbing; }
.slider input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none; appearance: none;
  width: 26px; height: 26px; border-radius: var(--radius-full);
  background: var(--sand); border: 1px solid var(--sand);
  transition: transform .3s var(--ease-out-cubic), background .3s var(--ease-out-cubic);
}
.slider input[type="range"]:hover::-webkit-slider-thumb,
.slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.18); background: var(--barley); }
.slider input[type="range"]::-moz-range-thumb {
  width: 26px; height: 26px; border: 1px solid var(--sand); border-radius: var(--radius-full);
  background: var(--sand); cursor: pointer;
}
.slider__scale { display: flex; justify-content: space-between; margin-top: calc(16 * var(--u)); font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--moss); }
.slider__scale span { transition: color .3s var(--ease-out-cubic); }
.slider__scale span.is-active { color: var(--sand); }

/* ----------------------------------------------------------------
   15c. GALERIE EN BIAIS — une carte inclinée qui switche (~1s), façon mnstr
        Carte paysage tiltée ; 2 calques en cross-fade (opacity), couleurs natives.
   ---------------------------------------------------------------- */
.gallery { background: var(--bg); color: var(--ink); padding: calc(90 * var(--u)) var(--pad-side) calc(70 * var(--u)); }
.gallery__label { color: var(--moss); margin-bottom: calc(48 * var(--u)); }
.gallery__stage { display: grid; place-items: center; min-height: clamp(260px, 34vw, 460px); }
.gallery__card {
  position: relative;
  width: clamp(280px, 46vw, 660px);
  aspect-ratio: 1.6 / 1;                 /* paysage, comme mnstr (~1.86) */
  transform: rotate(-4deg);             /* incliné, même esprit que mnstr */
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--olive);
  box-shadow: 0 30px 80px rgba(0,0,0,.18);
}
.gallery__img {
  position: absolute; inset: 0;
  width: 100%; height: 100%; object-fit: cover;
  opacity: 0;
  transition: opacity .45s var(--ease-out-cubic);
  will-change: opacity;
}
.gallery__img.is-on { opacity: 1; }
.gallery__card { cursor: zoom-in; }
.gallery__card:focus-visible { outline: 2px solid var(--moss); outline-offset: 6px; }

/* ---- LIGHTBOX galerie (clic sur la carte) ---- */
.glightbox {
  position: fixed; inset: 0; z-index: 240;
  display: none;
  place-items: center;
  padding: clamp(20px, 5vw, 64px);
}
.glightbox.is-open { display: grid; }

.glightbox__backdrop {
  position: absolute; inset: 0;
  background: rgba(11,11,13,.9);
  opacity: 0;
  transition: opacity .45s var(--ease-out-cubic);
  cursor: zoom-out;
}
.glightbox.is-shown .glightbox__backdrop { opacity: 1; }

.glightbox__inner {
  position: relative; z-index: 1;
  display: flex; flex-direction: column; align-items: center;
  gap: clamp(16px, 2.4vw, 28px);
  max-width: 100%; max-height: 100%;
}
.glightbox__img {
  display: block;
  max-width: min(92vw, 1200px);
  max-height: 76vh;
  width: auto; height: auto;
  object-fit: contain;
  border-radius: var(--radius-sm);
  box-shadow: 0 40px 120px rgba(0,0,0,.5);
  transform-origin: top left;
  will-change: transform, opacity;
}
.glightbox__cta {
  opacity: 0; transform: translateY(8px);
  color: var(--sand);
  transition: opacity .4s var(--ease-out-cubic) .12s,
              transform .4s var(--ease-out-cubic) .12s,
              background .3s var(--ease-out-cubic),
              border-color .3s var(--ease-out-cubic);
}
.glightbox.is-shown .glightbox__cta { opacity: 1; transform: translateY(0); }
.glightbox__cta:hover { color: var(--dark-bg); transform: translateY(-2px); }

.glightbox__close {
  position: absolute; z-index: 2;
  top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px);
  width: clamp(42px, 6vw, 52px); height: clamp(42px, 6vw, 52px);
  display: grid; place-items: center;
  font-size: clamp(24px, 3.6vw, 30px); line-height: 1;
  color: var(--sand);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.28);
  border-radius: var(--radius-full);
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s var(--ease-out-cubic),
              background .3s var(--ease-out-cubic),
              transform .3s var(--ease-out-cubic);
}
.glightbox.is-shown .glightbox__close { opacity: 1; }
.glightbox__close:hover { background: rgba(255,255,255,.18); transform: translateY(-2px); }

@media (prefers-reduced-motion: reduce) {
  .glightbox__backdrop,
  .glightbox__cta,
  .glightbox__close { transition: opacity .2s linear; }
  .glightbox__cta { transform: none; }
}

/* ----------------------------------------------------------------
   15d. SPOTLIGHT FONDATEUR — Romain Colin (un seul sujet ; cadre mnstr)
   ---------------------------------------------------------------- */
.team { background: var(--bg); color: var(--ink); padding: calc(100 * var(--u)) var(--pad-side) calc(120 * var(--u)); }
.team__intro { margin-bottom: calc(48 * var(--u)); }
.team__intro .t-label { margin-bottom: calc(16 * var(--u)); }
.team__intro .t-h2 { color: var(--ink); }

.founder { display: flex; align-items: flex-end; gap: calc(40 * var(--u)); }
.founder__media {
  flex: 0 0 auto;
  width: clamp(220px, 26vw, 340px);
  aspect-ratio: 4 / 5;                    /* cadre ~4:5 façon mnstr, coins droits */
  overflow: hidden; background: var(--olive);
}
.founder__media img { width: 100%; height: 100%; object-fit: cover; transition: transform .9s var(--ease-out-quart); }
.founder:hover .founder__media img { transform: scale(1.04); }
.founder__text { padding-bottom: calc(8 * var(--u)); }
.founder__name {
  font-family: var(--font-main); font-weight: 500;
  font-size: clamp(26px, calc(40 * var(--u)), 56px);
  line-height: .95; text-transform: uppercase; letter-spacing: var(--tracking-snug);
  color: var(--ink);
}
.founder__role {
  margin-top: calc(8 * var(--u));
  font-family: var(--font-role); font-style: italic; font-weight: 400;
  font-size: clamp(18px, calc(24 * var(--u)), 30px);
  line-height: 1.2; color: var(--moss);
}
@media (max-width: 740px) {
  .founder { flex-direction: column; align-items: flex-start; gap: calc(24 * var(--u)); }
  .founder__media { width: clamp(200px, 60vw, 300px); }
}

/* ----------------------------------------------------------------
   15e. FUBIZ EN CHIFFRES — bande de compteurs animés
   ---------------------------------------------------------------- */
.stats { background: var(--bg-invert); color: var(--sand); padding: calc(110 * var(--u)) var(--pad-side); }
.stats__intro { margin-bottom: calc(56 * var(--u)); }
.stats__intro .t-label { margin-bottom: calc(16 * var(--u)); }
.stats__intro .t-h2 { color: var(--sand); }
.stats__grid {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(40 * var(--u)) calc(28 * var(--u));
}
.stat { display: flex; flex-direction: column; gap: calc(10 * var(--u)); border-top: 1px solid var(--moss-transparent); padding-top: calc(18 * var(--u)); }
.stat__num {
  font-family: var(--font-main); font-weight: 700;
  font-size: clamp(36px, calc(64 * var(--u)), 88px);
  line-height: .9; letter-spacing: var(--tracking-tight);
  color: var(--sand); font-variant-numeric: tabular-nums;
}
.stat__label { color: var(--barley); max-width: 22ch; }
.stat--todo .stat__num::after { content: "*"; color: var(--moss); font-size: .5em; vertical-align: super; margin-left: .05em; }
.stats__note { color: var(--moss); margin-top: calc(40 * var(--u)); }

@media (max-width: 900px) { .stats__grid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 575px) {
  .stats__grid { grid-template-columns: repeat(2, 1fr); gap: 28px 18px; }
  .stat__num { font-size: clamp(22px, 9vw, 34px); }   /* tient dans une cellule 2-col, pas de coupe */
}

/* ----------------------------------------------------------------
   16. FOOTER
   ---------------------------------------------------------------- */
.footer { background: var(--dark-green); color: var(--sand); padding: calc(100 * var(--u)) var(--pad-side) calc(40 * var(--u)); }
.footer__cta { display: flex; flex-direction: column; align-items: center; text-align: center; gap: calc(28 * var(--u)); padding-bottom: calc(80 * var(--u)); border-bottom: 1px solid var(--moss-transparent); }
.footer__title { color: var(--sand); }
.footer__form { display: flex; gap: calc(12 * var(--u)); width: min(520px, 100%); }
.footer__input { flex: 1; color: var(--sand); border-color: var(--moss); background: transparent; }
.footer__input::placeholder { color: var(--moss); }
.footer__input:focus { border-color: var(--sand); }
.input {
  padding: calc(13 * var(--u)) calc(20 * var(--u));
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  background: transparent;
  transition: border-color .3s var(--ease-out-cubic);
}
.input:focus { outline: none; border-color: currentColor; }

/* icônes sociales — trait fin monochrome */
.socials { display: flex; gap: calc(14 * var(--u)); }
.social {
  display: grid; place-items: center;
  width: calc(44 * var(--u)); height: calc(44 * var(--u));
  min-width: 38px; min-height: 38px;
  border: 1px solid var(--moss-transparent);
  border-radius: var(--radius-full);
  color: var(--sand);
  transition: background .3s var(--ease-out-cubic), color .3s var(--ease-out-cubic),
              border-color .3s var(--ease-out-cubic), transform .3s var(--ease-out-cubic);
}
.social svg {
  width: 42%; height: 42%;
  fill: none; stroke: currentColor; stroke-width: 1.4;
  stroke-linecap: round; stroke-linejoin: round;
}
.social:hover { background: var(--sand); color: var(--ink); border-color: var(--sand); transform: translateY(-2px); }

.footer__grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: calc(40 * var(--u)); padding: calc(60 * var(--u)) 0; }
.footer__col { display: flex; flex-direction: column; gap: calc(16 * var(--u)); align-items: start; }
.footer__col .t-label { color: var(--barley); margin-bottom: calc(8 * var(--u)); }
.footer__col a:not(.btn) { color: var(--sand); opacity: .8; transition: opacity .3s; }
.footer__col a:not(.btn):hover { opacity: 1; }
.footer__socials { display: flex; flex-wrap: wrap; gap: calc(12 * var(--u)); }

.footer__bottom { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding-top: calc(40 * var(--u)); border-top: 1px solid var(--moss-transparent); flex-wrap: wrap; }
.footer__wordmark { font-family: var(--font-serif); font-size: clamp(28px, calc(40 * var(--u)), 56px); text-transform: lowercase; }
.footer__bottom .t-label { color: var(--barley); }

/* ----------------------------------------------------------------
   17. REVEALS (IntersectionObserver)
   ---------------------------------------------------------------- */
.reveal { opacity: 0; transform: translateY(40px); transition: opacity .9s var(--ease-out-quart), transform .9s var(--ease-out-quart); }
.reveal.is-visible { opacity: 1; transform: translateY(0); }

/* ----------------------------------------------------------------
   18. RESPONSIVE — breakpoints 1280 / 1200 / 900 / 740 / 575
   ---------------------------------------------------------------- */
@media (max-width: 1200px) {
  .header__nav { display: none; }            /* on bascule sur le menu plein écran */
}

@media (max-width: 900px) {
  .statement__inner { grid-template-columns: 1fr; gap: calc(32 * var(--u)); align-items: start; }
  .scard { grid-template-columns: 1fr; }
  .scard__media { aspect-ratio: 16/10; }
  .feature__row, .feature__row--reverse { grid-template-columns: 1fr; gap: calc(24 * var(--u)); }
  .feature__row--reverse .feature__media { order: 0; }
  .highlights__grid { grid-template-columns: repeat(2, 1fr); }
  .coverflow__stage { perspective: 1400px; }
  .footer__grid { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 740px) {
  :root { --pad-side: 20px; }
  .hero__reel { grid-template-columns: repeat(2, 1fr); }
  .hero { min-height: 92vh; }
  .highlights__grid { grid-template-columns: 1fr; }
  .coverflow__stage { perspective: 1100px; height: clamp(320px, 80vw, 460px); }
  .num-row { grid-template-columns: calc(48px) 1fr; }
  .num-row__cat { display: none; }
  .press-row { grid-template-columns: 90px 1fr; }
  .press-row__src { display: none; }
  .footer__grid { grid-template-columns: 1fr; }
  .footer__form { flex-direction: column; }
  .footer__bottom { flex-direction: column; align-items: start; }

  /* FIX MOBILE — 3 titres .t-display qui débordaient (plancher 44px trop grand).
     On garde text-transform/font-weight/font-family/line-height hérités de .t-display ;
     seule la font-size devient fluide pour tenir dans le viewport (testé 390/375px). */
  .statement__title { font-size: clamp(26px, 8.5vw, 40px); max-width: 100%; word-break: normal; }
  .frequence__title { font-size: clamp(26px, 8vw, 40px); word-break: normal; }
  .footer__title    { font-size: clamp(22px, 7vw, 38px); word-break: normal; }
}

@media (max-width: 575px) {
  .header__shop { display: none; }
  .hero__reel { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .num-row__title { font-size: clamp(20px, 7vw, 30px); }
  .freq-readout__count { display: none; }
  .scard { border-radius: calc(24 * var(--u)); }
  .reel-item { border-radius: calc(24 * var(--u)); }
}

/* ----------------------------------------------------------------
   19. PREFERS-REDUCED-MOTION
   ---------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .reveal { opacity: 1; transform: none; }
  .marquee__track { transform: none !important; }
  .hero__scroll span::after { animation: none; }
  /* coverflow : on aplatit le 3D et on laisse le scroll natif horizontal */
  .coverflow__stage { perspective: none; overflow-x: auto; }
  .coverflow__track { position: relative; top: auto; transform: none !important; }
  .cover { margin-top: 0; }
  .cover__card { transform: none !important; position: relative; }
  .cover.is-active .cover__card { transform: none !important; }
}

/* ----------------------------------------------------------------
   16. FEED — grille d'images plein écran (data-driven, futur Instagram)
       Structure type mosaïque (cf. views.fr) · style 100 % tokens Fubiz.
       Grille statique (pas de 3D) → loading="lazy" OK. Ne touche pas au coverflow.
   ---------------------------------------------------------------- */
.feed {
  background: var(--bg);
  color: var(--ink);
  padding: calc(120 * var(--u)) 0 calc(120 * var(--u));  /* pleine largeur : 0 horizontal */
}
.feed__head {
  text-align: center;
  margin: 0 var(--pad-side) calc(56 * var(--u));
}
.feed__title {
  font-family: var(--font-serif);          /* police "serif" du site */
  font-weight: 500;
  font-size: clamp(32px, calc(72 * var(--u)), 96px);
  line-height: 0.9;
  letter-spacing: var(--tracking-tight);
  color: var(--ink);
}
.feed__grid {
  display: grid;
  grid-template-columns: repeat(6, 1fr);    /* desktop : 6 colonnes */
  gap: 2px;                                  /* gouttières très fines (images quasi jointives) */
  width: 100%;
}
.feed__item {
  position: relative;
  display: block;
  aspect-ratio: 3 / 4;                       /* portrait ~3:4 */
  overflow: hidden;
  background: var(--olive);                  /* placeholder pendant le lazy-load */
}
.feed__img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
  transition: transform .6s var(--ease-out-quart);
}
.feed__item:hover .feed__img { transform: scale(1.04); }
.feed__cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: calc(16 * var(--u)) calc(14 * var(--u)) calc(12 * var(--u));
  color: var(--snow);
  font-family: var(--font-main);
  font-weight: 500;
  font-size: clamp(12px, calc(14 * var(--u)), 16px);
  letter-spacing: var(--tracking-wide);
  background: linear-gradient(to top, rgba(7,7,8,.72), transparent);
  pointer-events: none;                      /* le clic passe au lien */
}
.feed__cap:empty { display: none; }          /* overlay vide si pas de texte */

@media (max-width: 900px) { .feed__grid { grid-template-columns: repeat(4, 1fr); } }  /* tablette : 4 */
@media (max-width: 575px) {
  .feed__grid { grid-template-columns: repeat(3, 1fr); }   /* mobile : 3 colonnes */
  .feed__title { font-size: clamp(28px, 9vw, 46px); }      /* mobile : titre resserré (desktop inchangé) */
}

/* ----------------------------------------------------------------
   16b. LIGHTBOX FEED — vue plein écran maison (animation signature).
        100 % isolé du coverflow. Anim JS via WAAPI : transform/opacity/clip-path/filter.
   ---------------------------------------------------------------- */
.lb { position: fixed; inset: 0; z-index: 9999; display: none; }
.lb.is-open { display: block; }
.lb__backdrop {
  position: absolute; inset: 0;
  background: rgba(7,7,8,.92);
  opacity: 0;
  will-change: opacity;
}
.lb__stage { position: absolute; inset: 0; margin: 0; will-change: transform; }
.lb__imgwrap {
  position: fixed;                 /* box = cadre final ; left/top/width/height posés en inline par le JS */
  overflow: hidden;
  transform-origin: top left;
  clip-path: inset(0 0 0 0);
  background: var(--olive);
  will-change: transform, clip-path;
}
.lb__img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  will-change: transform, filter;
}
.lb__tint {
  position: absolute; inset: 0;
  background: var(--dark-green);
  mix-blend-mode: color;
  opacity: 0; pointer-events: none;
  will-change: opacity;
}
.lb__grain {
  position: absolute; inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.8' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='160' height='160' filter='url(%23n)' opacity='0.55'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  mix-blend-mode: overlay;
  opacity: 0; pointer-events: none;
  will-change: opacity;
}
.lb__ui { position: absolute; inset: 0; pointer-events: none; }
.lb__ui > * { pointer-events: auto; opacity: 0; will-change: opacity, transform; }
.lb__brand {
  position: absolute; top: calc(34 * var(--u)); left: var(--pad-side);
  font-family: var(--font-serif); font-size: clamp(20px, calc(28 * var(--u)), 34px);
  color: var(--sand); text-transform: lowercase; letter-spacing: var(--tracking-tight);
}
.lb__cap {
  position: absolute; left: var(--pad-side); bottom: calc(52 * var(--u));
  max-width: 46ch; margin: 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(18px, calc(26 * var(--u)), 34px); line-height: 1.15;
  color: var(--sand);
}
.lb__ig {
  position: absolute; right: var(--pad-side); bottom: calc(52 * var(--u));
  display: inline-flex; align-items: center;
  padding: calc(13 * var(--u)) calc(22 * var(--u));
  font-family: var(--font-main); font-weight: 500;
  font-size: clamp(13px, calc(14 * var(--u)), 16px); letter-spacing: var(--tracking-wide);
  text-transform: uppercase; text-decoration: none;
  color: var(--ink); background: var(--sand);
  border-radius: var(--radius-full);
  transition: transform .3s var(--ease-out-cubic);
}
.lb__ig:hover { transform: scale(1.04); }
.lb__close {
  position: absolute; top: calc(28 * var(--u)); right: var(--pad-side);
  width: calc(48 * var(--u)); height: calc(48 * var(--u)); min-width: 42px; min-height: 42px;
  display: grid; place-items: center;
  font-family: var(--font-main); font-size: 26px; line-height: 1;
  color: var(--sand); background: transparent;
  border: 1px solid var(--moss); border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform .3s var(--ease-out-cubic);
}
.lb__close:hover { transform: scale(1.08); }

@media (max-width: 575px) {
  .lb__cap  { right: var(--pad-side); bottom: calc(104 * var(--u)); font-size: clamp(17px, calc(22 * var(--u)), 26px); }
  .lb__ig   { left: var(--pad-side); right: var(--pad-side); bottom: calc(40 * var(--u)); justify-content: center; }
}

/* ----------------------------------------------------------------
   17. LIVE CHICAGO — bandeau temps réel (typographique, noir/blanc strict).
       Hérite des tokens du site (typo, --pad-side, --ink/--sand). Aucune image.
       N'anime que transform/opacity. Isolé du reste.
   ---------------------------------------------------------------- */
.chicago {
  background: var(--bg);            /* blanc papier (= --sand), identique aux autres sections claires */
  color: var(--ink);               /* texte noir, même valeur que le reste du site */
  padding: clamp(40px, calc(60 * var(--u)), 80px) var(--pad-side);
}
.chicago__top {
  display: flex; justify-content: space-between; align-items: baseline; flex-wrap: wrap;
  gap: calc(16 * var(--u));
  padding-bottom: calc(20 * var(--u));
  border-bottom: 1px solid var(--moss-transparent);   /* fin filet, lisible sur blanc */
  margin-bottom: clamp(22px, calc(34 * var(--u)), 46px);
}
.chicago__kicker { color: var(--moss); margin: 0; }
.chicago__clock {
  margin: 0; font-family: var(--font-main); font-weight: 500;
  font-variant-numeric: tabular-nums; letter-spacing: var(--tracking-wide);
  font-size: clamp(12px, calc(14 * var(--u)), 16px); color: var(--ink);
  display: inline-flex; align-items: baseline; gap: calc(10 * var(--u));
}
.chicago__tz { color: var(--moss); }
.chicago__main { display: flex; align-items: flex-start; gap: clamp(14px, calc(26 * var(--u)), 44px); flex-wrap: wrap; }
.chicago__temp {
  font-family: var(--font-main); font-weight: 600;
  font-size: clamp(52px, calc(104 * var(--u)), 132px);
  line-height: .9; letter-spacing: var(--tracking-tight);
  font-variant-numeric: tabular-nums;
  display: inline-flex; align-items: flex-start; color: var(--ink);
}
.chicago__unit { font-size: .28em; font-weight: 500; margin-top: .25em; margin-left: .06em; letter-spacing: 0; color: var(--moss); }
.chicago__sky { display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding-top: calc(10 * var(--u)); }
.chicago__glyph { font-family: var(--font-main); font-weight: 500; font-size: clamp(22px, calc(34 * var(--u)), 46px); line-height: .9; color: var(--ink); }
.chicago__skylabel { color: var(--moss); }
.chicago__msg {
  margin: clamp(20px, calc(30 * var(--u)), 42px) 0 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(17px, calc(23 * var(--u)), 30px);
  line-height: 1.12; letter-spacing: var(--tracking-snug);
  max-width: 30ch; color: var(--ink);
}
/* état initial du reveal (posé par JS, jamais en l'absence de JS / reduced-motion) */
.chicago.is-armed .chicago__top,
.chicago.is-armed .chicago__main,
.chicago.is-armed .chicago__msg { opacity: 0; }

@media (max-width: 575px) {
  .chicago__main { gap: calc(18 * var(--u)); }
  .chicago__temp { font-size: clamp(46px, calc(74 * var(--u)), 92px); }
  .chicago__msg { font-size: clamp(16px, calc(20 * var(--u)), 24px); }
}
@media (prefers-reduced-motion: reduce) {
  .chicago.is-armed .chicago__top,
  .chicago.is-armed .chicago__main,
  .chicago.is-armed .chicago__msg { opacity: 1; }
}

/* --- intégration en haut du footer : bandeau blanc pleine largeur, ras le haut du footer --- */
.footer .chicago {
  /* annule le padding du footer (haut 100u + horizontal --pad-side) -> bandeau blanc full-bleed ;
     le padding propre de .chicago réinsère le contenu à --pad-side, aligné comme les autres sections */
  margin: calc(-100 * var(--u)) calc(-1 * var(--pad-side)) clamp(44px, calc(64 * var(--u)), 88px);
}

/* image Chicago : accent discret à droite, ratio panoramique préservé (pas de crop) */
.chicago__media { flex: 0 0 auto; align-self: center; margin: 0 0 0 auto; width: clamp(190px, 26vw, 330px); }
.chicago__img { display: block; width: 100%; height: auto; }
/* --- FILTRE NOIR & BLANC sur l'image Chicago : SUPPRIMER cette règle pour garder le ton sépia d'origine --- */
.chicago__img { filter: grayscale(100%) contrast(1.05); }

@media (max-width: 575px) {
  .chicago__media { align-self: flex-start; margin: calc(10 * var(--u)) 0 0; width: 100%; max-width: 360px; }
}