/* =============================================================
   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 */

  --dot-size:    .12em;
  --dot-advance: .24em;

  --tone-red:    #FF2D3D;
  --tone-amber:  #FFB100;
  --tone-blue:   #1A73FF;
  --tone-green:  #14D85E;
  --tone-violet: #A84DFF;
  --tone-red-deep: #C4141F;
  --glass-ring: linear-gradient(135deg, rgba(255,255,255,.95) 0%, rgba(255,255,255,.35) 45%, rgba(11,11,13,.3) 100%);
  --tone-dur: 1.8s;
  --glass-bg: rgba(244,242,238,.92);
  --glass-blur: blur(18px) saturate(1.6);
  --squircle: 20px;
  --shadow-glass: 0 12px 32px rgba(7,7,8,.32), 0 2px 6px rgba(7,7,8,.2);
  --line-dur: .5s;
  --hero-poster: url("https://i.ytimg.com/vi/Jg5wkZ-dJXA/maxres2.jpg");

  /* ----- 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);
  --shadow-riffle: 0 28px 60px rgba(11,11,13,.16), 0 6px 16px rgba(11,11,13,.08);

  /* ----- 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 {
  display: inline-block;
  width: var(--dot-size);
  height: var(--dot-size);
  margin: 0 calc((var(--dot-advance) - var(--dot-size)) / 2);
  border-radius: 50%;
  background: var(--barley);
  color: transparent;
  overflow: hidden;
}
.statement__title .dot { --dot-size: .145em; }
.nowrap { white-space: nowrap; }
.visually-hidden {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0; border: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}

.tone-dot {
  --tone: var(--tone-red);
  position: relative;
  display: inline-block;
  flex: none;
  width: var(--tone-size, 8px);
  height: var(--tone-size, 8px);
  border-radius: 50%;
  vertical-align: middle;
  box-shadow: inset 0 0 0 1px var(--tone);
}
.tone-dot::before {
  content: "";
  position: absolute; inset: 0;
  border-radius: 50%;
  background: radial-gradient(120% 120% at 30% 22%, rgba(255,255,255,.42), rgba(255,255,255,0) 46%), var(--tone);
  clip-path: polygon(-10.0% 122.2%, -1.4% 126.7%, 7.1% 128.9%, 15.7% 127.2%, 24.3% 124.1%, 32.9% 122.0%, 41.4% 120.0%, 50.0% 115.5%, 58.6% 108.1%, 67.1% 101.3%, 75.7% 99.4%, 84.3% 102.3%, 92.9% 106.1%, 101.4% 106.9%, 110.0% 105.1%, 110% 118%, -10% 118%);
}
.tone-dot::after {
  content: "";
  position: absolute; inset: -1px;
  border-radius: 50%;
  border: 1px solid var(--tone);
  opacity: 0;
  pointer-events: none;
}
.tone-dot--amber { --tone: var(--tone-amber); }
.tone-dot--blue { --tone: var(--tone-blue); }
.tone-dot--green { --tone: var(--tone-green); }
.tone-dot--violet { --tone: var(--tone-violet); }
@keyframes toneFill {
  0% { clip-path: polygon(-10.0% 122.2%, -1.4% 126.7%, 7.1% 128.9%, 15.7% 127.2%, 24.3% 124.1%, 32.9% 122.0%, 41.4% 120.0%, 50.0% 115.5%, 58.6% 108.1%, 67.1% 101.3%, 75.7% 99.4%, 84.3% 102.3%, 92.9% 106.1%, 101.4% 106.9%, 110.0% 105.1%, 110% 118%, -10% 118%); }
  1.67% { clip-path: polygon(-10.0% 119.9%, -1.4% 123.8%, 7.1% 125.6%, 15.7% 124.3%, 24.3% 122.4%, 32.9% 121.7%, 41.4% 120.5%, 50.0% 115.8%, 58.6% 107.6%, 67.1% 100.1%, 75.7% 97.5%, 84.3% 99.6%, 92.9% 102.5%, 101.4% 102.9%, 110.0% 101.6%, 110% 118%, -10% 118%); }
  3.33% { clip-path: polygon(-10.0% 118.0%, -1.4% 120.9%, 7.1% 122.1%, 15.7% 121.0%, 24.3% 120.3%, 32.9% 121.0%, 41.4% 120.7%, 50.0% 116.0%, 58.6% 107.4%, 67.1% 99.4%, 75.7% 96.2%, 84.3% 97.3%, 92.9% 99.0%, 101.4% 98.8%, 110.0% 97.9%, 110% 118%, -10% 118%); }
  5% { clip-path: polygon(-10.0% 116.6%, -1.4% 118.3%, 7.1% 118.5%, 15.7% 117.4%, 24.3% 117.7%, 32.9% 119.8%, 41.4% 120.4%, 50.0% 116.0%, 58.6% 107.4%, 67.1% 99.2%, 75.7% 95.5%, 84.3% 95.6%, 92.9% 95.9%, 101.4% 94.7%, 110.0% 93.9%, 110% 118%, -10% 118%); }
  6.67% { clip-path: polygon(-10.0% 115.6%, -1.4% 115.9%, 7.1% 114.9%, 15.7% 113.6%, 24.3% 114.8%, 32.9% 118.1%, 41.4% 119.6%, 50.0% 115.6%, 58.6% 107.3%, 67.1% 99.3%, 75.7% 95.3%, 84.3% 94.3%, 92.9% 93.0%, 101.4% 90.7%, 110.0% 89.9%, 110% 118%, -10% 118%); }
  8.33% { clip-path: polygon(-10.0% 114.9%, -1.4% 113.7%, 7.1% 111.3%, 15.7% 109.6%, 24.3% 111.4%, 32.9% 115.7%, 41.4% 118.0%, 50.0% 114.7%, 58.6% 106.9%, 67.1% 99.5%, 75.7% 95.4%, 84.3% 93.4%, 92.9% 90.5%, 101.4% 87.0%, 110.0% 85.8%, 110% 118%, -10% 118%); }
  10% { clip-path: polygon(-10.0% 114.5%, -1.4% 111.8%, 7.1% 108.0%, 15.7% 105.6%, 24.3% 107.7%, 32.9% 112.7%, 41.4% 115.7%, 50.0% 113.0%, 58.6% 106.2%, 67.1% 99.6%, 75.7% 95.7%, 84.3% 92.8%, 92.9% 88.4%, 101.4% 83.5%, 110.0% 81.9%, 110% 118%, -10% 118%); }
  11.67% { clip-path: polygon(-10.0% 114.4%, -1.4% 110.2%, 7.1% 104.8%, 15.7% 101.7%, 24.3% 103.8%, 32.9% 109.2%, 41.4% 112.6%, 50.0% 110.6%, 58.6% 104.9%, 67.1% 99.5%, 75.7% 96.2%, 84.3% 92.5%, 92.9% 86.7%, 101.4% 80.5%, 110.0% 78.2%, 110% 118%, -10% 118%); }
  13.33% { clip-path: polygon(-10.0% 114.4%, -1.4% 109.0%, 7.1% 102.2%, 15.7% 98.2%, 24.3% 100.0%, 32.9% 105.4%, 41.4% 109.0%, 50.0% 107.6%, 58.6% 103.1%, 67.1% 99.2%, 75.7% 96.6%, 84.3% 92.5%, 92.9% 85.4%, 101.4% 78.0%, 110.0% 75.0%, 110% 118%, -10% 118%); }
  15% { clip-path: polygon(-10.0% 114.5%, -1.4% 108.0%, 7.1% 100.0%, 15.7% 95.1%, 24.3% 96.5%, 32.9% 101.5%, 41.4% 104.8%, 50.0% 103.9%, 58.6% 100.8%, 67.1% 98.5%, 75.7% 96.9%, 84.3% 92.7%, 92.9% 84.6%, 101.4% 76.2%, 110.0% 72.5%, 110% 118%, -10% 118%); }
  16.67% { clip-path: polygon(-10.0% 114.5%, -1.4% 107.3%, 7.1% 98.2%, 15.7% 92.6%, 24.3% 93.3%, 32.9% 97.6%, 41.4% 100.4%, 50.0% 99.7%, 58.6% 97.8%, 67.1% 97.3%, 75.7% 96.9%, 84.3% 92.7%, 92.9% 84.1%, 101.4% 74.9%, 110.0% 70.6%, 110% 118%, -10% 118%); }
  18.33% { clip-path: polygon(-10.0% 114.3%, -1.4% 106.7%, 7.1% 96.9%, 15.7% 90.7%, 24.3% 90.6%, 32.9% 93.8%, 41.4% 95.7%, 50.0% 95.0%, 58.6% 94.4%, 67.1% 95.6%, 75.7% 96.4%, 84.3% 92.6%, 92.9% 83.8%, 101.4% 74.2%, 110.0% 69.4%, 110% 118%, -10% 118%); }
  20% { clip-path: polygon(-10.0% 113.6%, -1.4% 105.9%, 7.1% 95.9%, 15.7% 89.3%, 24.3% 88.4%, 32.9% 90.3%, 41.4% 91.0%, 50.0% 90.1%, 58.6% 90.5%, 67.1% 93.3%, 75.7% 95.4%, 84.3% 92.2%, 92.9% 83.5%, 101.4% 74.0%, 110.0% 68.8%, 110% 118%, -10% 118%); }
  21.67% { clip-path: polygon(-10.0% 112.4%, -1.4% 105.0%, 7.1% 95.1%, 15.7% 88.4%, 24.3% 86.8%, 32.9% 87.3%, 41.4% 86.5%, 50.0% 85.1%, 58.6% 86.2%, 67.1% 90.4%, 75.7% 93.7%, 84.3% 91.3%, 92.9% 83.0%, 101.4% 74.0%, 110.0% 68.8%, 110% 118%, -10% 118%); }
  23.33% { clip-path: polygon(-10.0% 110.5%, -1.4% 103.8%, 7.1% 94.4%, 15.7% 88.0%, 24.3% 85.7%, 32.9% 84.7%, 41.4% 82.3%, 50.0% 80.2%, 58.6% 81.7%, 67.1% 87.0%, 75.7% 91.3%, 84.3% 89.7%, 92.9% 82.3%, 101.4% 74.2%, 110.0% 69.3%, 110% 118%, -10% 118%); }
  25% { clip-path: polygon(-10.0% 107.9%, -1.4% 102.0%, 7.1% 93.6%, 15.7% 87.8%, 24.3% 85.1%, 32.9% 82.6%, 41.4% 78.5%, 50.0% 75.5%, 58.6% 77.2%, 67.1% 83.2%, 75.7% 88.3%, 84.3% 87.5%, 92.9% 81.2%, 101.4% 74.3%, 110.0% 70.0%, 110% 118%, -10% 118%); }
  26.67% { clip-path: polygon(-10.0% 104.5%, -1.4% 99.6%, 7.1% 92.6%, 15.7% 87.7%, 24.3% 84.9%, 32.9% 81.0%, 41.4% 75.3%, 50.0% 71.3%, 58.6% 72.8%, 67.1% 79.2%, 75.7% 84.6%, 84.3% 84.5%, 92.9% 79.6%, 101.4% 74.2%, 110.0% 70.9%, 110% 118%, -10% 118%); }
  28.33% { clip-path: polygon(-10.0% 100.3%, -1.4% 96.6%, 7.1% 91.2%, 15.7% 87.6%, 24.3% 84.9%, 32.9% 79.9%, 41.4% 72.7%, 50.0% 67.6%, 58.6% 68.7%, 67.1% 75.0%, 75.7% 80.5%, 84.3% 80.9%, 92.9% 77.3%, 101.4% 73.7%, 110.0% 71.7%, 110% 118%, -10% 118%); }
  30% { clip-path: polygon(-10.0% 95.5%, -1.4% 92.9%, 7.1% 89.3%, 15.7% 87.3%, 24.3% 84.9%, 32.9% 79.1%, 41.4% 70.6%, 50.0% 64.5%, 58.6% 65.1%, 67.1% 70.8%, 75.7% 76.0%, 84.3% 76.7%, 92.9% 74.4%, 101.4% 72.8%, 110.0% 72.1%, 110% 118%, -10% 118%); }
  31.67% { clip-path: polygon(-10.0% 90.1%, -1.4% 88.6%, 7.1% 86.8%, 15.7% 86.5%, 24.3% 84.8%, 32.9% 78.5%, 41.4% 69.1%, 50.0% 62.2%, 58.6% 62.1%, 67.1% 66.9%, 75.7% 71.3%, 84.3% 72.0%, 92.9% 71.0%, 101.4% 71.2%, 110.0% 72.2%, 110% 118%, -10% 118%); }
  33.33% { clip-path: polygon(-10.0% 84.4%, -1.4% 83.7%, 7.1% 83.8%, 15.7% 85.2%, 24.3% 84.4%, 32.9% 78.0%, 41.4% 68.0%, 50.0% 60.6%, 58.6% 59.7%, 67.1% 63.4%, 75.7% 66.5%, 84.3% 66.9%, 92.9% 66.9%, 101.4% 69.1%, 110.0% 71.6%, 110% 118%, -10% 118%); }
  35% { clip-path: polygon(-10.0% 78.4%, -1.4% 78.3%, 7.1% 80.1%, 15.7% 83.3%, 24.3% 83.5%, 32.9% 77.3%, 41.4% 67.2%, 50.0% 59.6%, 58.6% 58.0%, 67.1% 60.3%, 75.7% 62.0%, 84.3% 61.8%, 92.9% 62.5%, 101.4% 66.3%, 110.0% 70.3%, 110% 118%, -10% 118%); }
  36.67% { clip-path: polygon(-10.0% 72.5%, -1.4% 72.8%, 7.1% 76.0%, 15.7% 80.8%, 24.3% 81.9%, 32.9% 76.3%, 41.4% 66.6%, 50.0% 59.1%, 58.6% 56.9%, 67.1% 57.8%, 75.7% 57.7%, 84.3% 56.6%, 92.9% 57.9%, 101.4% 62.9%, 110.0% 68.2%, 110% 118%, -10% 118%); }
  38.33% { clip-path: polygon(-10.0% 66.9%, -1.4% 67.1%, 7.1% 71.4%, 15.7% 77.5%, 24.3% 79.7%, 32.9% 74.8%, 41.4% 65.9%, 50.0% 59.0%, 58.6% 56.4%, 67.1% 55.8%, 75.7% 53.9%, 84.3% 51.8%, 92.9% 53.1%, 101.4% 59.1%, 110.0% 65.4%, 110% 118%, -10% 118%); }
  40% { clip-path: polygon(-10.0% 61.6%, -1.4% 61.6%, 7.1% 66.6%, 15.7% 73.7%, 24.3% 76.7%, 32.9% 72.8%, 41.4% 65.1%, 50.0% 59.0%, 58.6% 56.4%, 67.1% 54.4%, 75.7% 50.7%, 84.3% 47.3%, 92.9% 48.5%, 101.4% 55.0%, 110.0% 62.0%, 110% 118%, -10% 118%); }
  41.67% { clip-path: polygon(-10.0% 57.0%, -1.4% 56.4%, 7.1% 61.7%, 15.7% 69.4%, 24.3% 73.0%, 32.9% 70.1%, 41.4% 63.8%, 50.0% 59.1%, 58.6% 56.7%, 67.1% 53.5%, 75.7% 48.1%, 84.3% 43.4%, 92.9% 44.2%, 101.4% 50.8%, 110.0% 57.9%, 110% 118%, -10% 118%); }
  43.33% { clip-path: polygon(-10.0% 53.0%, -1.4% 51.8%, 7.1% 57.0%, 15.7% 64.7%, 24.3% 68.6%, 32.9% 66.7%, 41.4% 62.1%, 50.0% 58.9%, 58.6% 57.0%, 67.1% 53.0%, 75.7% 46.1%, 84.3% 40.2%, 92.9% 40.3%, 101.4% 46.5%, 110.0% 53.4%, 110% 118%, -10% 118%); }
  45% { clip-path: polygon(-10.0% 49.8%, -1.4% 47.8%, 7.1% 52.5%, 15.7% 59.8%, 24.3% 63.7%, 32.9% 62.6%, 41.4% 59.8%, 50.0% 58.4%, 58.6% 57.2%, 67.1% 52.6%, 75.7% 44.5%, 84.3% 37.7%, 92.9% 37.0%, 101.4% 42.5%, 110.0% 48.7%, 110% 118%, -10% 118%); }
  46.67% { clip-path: polygon(-10.0% 47.2%, -1.4% 44.4%, 7.1% 48.4%, 15.7% 54.8%, 24.3% 58.4%, 32.9% 58.0%, 41.4% 56.9%, 50.0% 57.3%, 58.6% 57.0%, 67.1% 52.2%, 75.7% 43.4%, 84.3% 35.8%, 92.9% 34.4%, 101.4% 38.8%, 110.0% 43.9%, 110% 118%, -10% 118%); }
  48.33% { clip-path: polygon(-10.0% 45.4%, -1.4% 41.9%, 7.1% 44.9%, 15.7% 50.1%, 24.3% 52.9%, 32.9% 52.9%, 41.4% 53.4%, 50.0% 55.6%, 58.6% 56.3%, 67.1% 51.7%, 75.7% 42.5%, 84.3% 34.4%, 92.9% 32.4%, 101.4% 35.5%, 110.0% 39.2%, 110% 118%, -10% 118%); }
  50% { clip-path: polygon(-10.0% 44.1%, -1.4% 40.1%, 7.1% 41.9%, 15.7% 45.6%, 24.3% 47.3%, 32.9% 47.5%, 41.4% 49.4%, 50.0% 53.2%, 58.6% 55.0%, 67.1% 50.8%, 75.7% 41.7%, 84.3% 33.6%, 92.9% 31.0%, 101.4% 32.8%, 110.0% 34.8%, 110% 118%, -10% 118%); }
  51.67% { clip-path: polygon(-10.0% 43.2%, -1.4% 38.9%, 7.1% 39.6%, 15.7% 41.6%, 24.3% 42.0%, 32.9% 42.1%, 41.4% 45.0%, 50.0% 50.2%, 58.6% 53.0%, 67.1% 49.4%, 75.7% 40.8%, 84.3% 33.1%, 92.9% 30.1%, 101.4% 30.6%, 110.0% 30.8%, 110% 118%, -10% 118%); }
  53.33% { clip-path: polygon(-10.0% 42.6%, -1.4% 38.2%, 7.1% 37.9%, 15.7% 38.2%, 24.3% 37.0%, 32.9% 36.7%, 41.4% 40.3%, 50.0% 46.5%, 58.6% 50.2%, 67.1% 47.4%, 75.7% 39.7%, 84.3% 32.7%, 92.9% 29.7%, 101.4% 28.9%, 110.0% 27.2%, 110% 118%, -10% 118%); }
  55% { clip-path: polygon(-10.0% 42.0%, -1.4% 37.9%, 7.1% 36.7%, 15.7% 35.2%, 24.3% 32.5%, 32.9% 31.6%, 41.4% 35.4%, 50.0% 42.4%, 58.6% 46.7%, 67.1% 44.7%, 75.7% 38.2%, 84.3% 32.3%, 92.9% 29.4%, 101.4% 27.6%, 110.0% 24.2%, 110% 118%, -10% 118%); }
  56.67% { clip-path: polygon(-10.0% 41.3%, -1.4% 37.8%, 7.1% 35.9%, 15.7% 32.9%, 24.3% 28.6%, 32.9% 26.9%, 41.4% 30.7%, 50.0% 37.9%, 58.6% 42.6%, 67.1% 41.3%, 75.7% 36.2%, 84.3% 31.7%, 92.9% 29.3%, 101.4% 26.7%, 110.0% 21.8%, 110% 118%, -10% 118%); }
  58.33% { clip-path: polygon(-10.0% 40.3%, -1.4% 37.6%, 7.1% 35.4%, 15.7% 31.0%, 24.3% 25.3%, 32.9% 22.7%, 41.4% 26.2%, 50.0% 33.2%, 58.6% 37.9%, 67.1% 37.3%, 75.7% 33.6%, 84.3% 30.7%, 92.9% 29.1%, 101.4% 25.9%, 110.0% 19.8%, 110% 118%, -10% 118%); }
  60% { clip-path: polygon(-10.0% 38.8%, -1.4% 37.2%, 7.1% 34.9%, 15.7% 29.4%, 24.3% 22.6%, 32.9% 19.2%, 41.4% 22.1%, 50.0% 28.4%, 58.6% 32.8%, 67.1% 32.7%, 75.7% 30.5%, 84.3% 29.2%, 92.9% 28.5%, 101.4% 25.2%, 110.0% 18.1%, 110% 118%, -10% 118%); }
  61.67% { clip-path: polygon(-10.0% 36.9%, -1.4% 36.5%, 7.1% 34.3%, 15.7% 28.1%, 24.3% 20.4%, 32.9% 16.3%, 41.4% 18.4%, 50.0% 23.8%, 58.6% 27.5%, 67.1% 27.7%, 75.7% 26.8%, 84.3% 27.2%, 92.9% 27.6%, 101.4% 24.3%, 110.0% 16.8%, 110% 118%, -10% 118%); }
  63.33% { clip-path: polygon(-10.0% 34.3%, -1.4% 35.2%, 7.1% 33.4%, 15.7% 26.9%, 24.3% 18.7%, 32.9% 14.1%, 41.4% 15.3%, 50.0% 19.5%, 58.6% 22.2%, 67.1% 22.4%, 75.7% 22.7%, 84.3% 24.7%, 92.9% 26.1%, 101.4% 23.1%, 110.0% 15.5%, 110% 118%, -10% 118%); }
  65% { clip-path: polygon(-10.0% 31.2%, -1.4% 33.3%, 7.1% 32.0%, 15.7% 25.6%, 24.3% 17.3%, 32.9% 12.4%, 41.4% 12.7%, 50.0% 15.5%, 58.6% 17.0%, 67.1% 17.1%, 75.7% 18.2%, 84.3% 21.5%, 92.9% 24.0%, 101.4% 21.5%, 110.0% 14.2%, 110% 118%, -10% 118%); }
  66.67% { clip-path: polygon(-10.0% 27.5%, -1.4% 30.8%, 7.1% 30.1%, 15.7% 24.1%, 24.3% 16.1%, 32.9% 11.1%, 41.4% 10.7%, 50.0% 12.0%, 58.6% 12.1%, 67.1% 11.7%, 75.7% 13.5%, 84.3% 17.9%, 92.9% 21.2%, 101.4% 19.4%, 110.0% 12.7%, 110% 118%, -10% 118%); }
  68.33% { clip-path: polygon(-10.0% 23.4%, -1.4% 27.6%, 7.1% 27.6%, 15.7% 22.2%, 24.3% 14.8%, 32.9% 10.1%, 41.4% 9.0%, 50.0% 8.9%, 58.6% 7.6%, 67.1% 6.6%, 75.7% 8.8%, 84.3% 13.9%, 92.9% 17.9%, 101.4% 16.8%, 110.0% 10.9%, 110% 118%, -10% 118%); }
  70% { clip-path: polygon(-10.0% 18.3%, -1.4% 23.2%, 7.1% 23.8%, 15.7% 19.2%, 24.3% 12.8%, 32.9% 8.6%, 41.4% 7.1%, 50.0% 5.7%, 58.6% 3.0%, 67.1% 1.3%, 75.7% 3.5%, 84.3% 9.0%, 92.9% 13.4%, 101.4% 12.9%, 110.0% 8.1%, 110% 118%, -10% 118%); }
  71.67% { clip-path: polygon(-10.0% 12.5%, -1.4% 17.7%, 7.1% 18.9%, 15.7% 15.2%, 24.3% 10.0%, 32.9% 6.6%, 41.4% 4.9%, 50.0% 2.3%, 58.6% -1.6%, 67.1% -4.1%, 75.7% -2.1%, 84.3% 3.4%, 92.9% 8.0%, 101.4% 8.1%, 110.0% 4.4%, 110% 118%, -10% 118%); }
  73.33% { clip-path: polygon(-10.0% 6.8%, -1.4% 12.0%, 7.1% 13.5%, 15.7% 10.8%, 24.3% 7.0%, 32.9% 4.6%, 41.4% 2.8%, 50.0% -0.6%, 58.6% -5.6%, 67.1% -8.9%, 75.7% -7.3%, 84.3% -2.0%, 92.9% 2.4%, 101.4% 2.8%, 110.0% 0.3%, 110% 118%, -10% 118%); }
  75% { clip-path: polygon(-10.0% 1.7%, -1.4% 6.6%, 7.1% 8.3%, 15.7% 6.5%, 24.3% 4.1%, 32.9% 2.8%, 41.4% 1.3%, 50.0% -2.8%, 58.6% -8.6%, 67.1% -12.4%, 75.7% -11.4%, 84.3% -6.7%, 92.9% -2.7%, 101.4% -2.1%, 110.0% -3.6%, 110% 118%, -10% 118%); }
  76.67% { clip-path: polygon(-10.0% -2.0%, -1.4% 2.3%, 7.1% 3.9%, 15.7% 2.9%, 24.3% 1.9%, 32.9% 1.8%, 41.4% 0.6%, 50.0% -3.7%, 58.6% -10.0%, 67.1% -14.3%, 75.7% -13.8%, 84.3% -10.0%, 92.9% -6.7%, 101.4% -6.1%, 110.0% -6.6%, 110% 118%, -10% 118%); }
  78.33% { clip-path: polygon(-10.0% -3.7%, -1.4% -0.2%, 7.1% 1.1%, 15.7% 0.8%, 24.3% 1.0%, 32.9% 2.0%, 41.4% 1.4%, 50.0% -2.9%, 58.6% -9.3%, 67.1% -13.9%, 75.7% -14.0%, 84.3% -11.1%, 92.9% -8.8%, 101.4% -8.3%, 110.0% -8.1%, 110% 118%, -10% 118%); }
  80% { clip-path: polygon(-10.0% -2.7%, -1.4% -0.2%, 7.1% 0.7%, 15.7% 0.8%, 24.3% 2.1%, 32.9% 4.1%, 41.4% 4.1%, 50.0% 0.1%, 58.6% -6.1%, 67.1% -10.6%, 75.7% -11.2%, 84.3% -9.4%, 92.9% -8.1%, 101.4% -8.0%, 110.0% -7.3%, 110% 118%, -10% 118%); }
  81.67% { clip-path: polygon(-10.0% 0.3%, -1.4% 1.7%, 7.1% 2.0%, 15.7% 2.3%, 24.3% 4.4%, 32.9% 7.3%, 41.4% 7.9%, 50.0% 4.4%, 58.6% -1.4%, 67.1% -5.6%, 75.7% -6.5%, 84.3% -5.8%, 92.9% -5.5%, 101.4% -6.0%, 110.0% -5.0%, 110% 118%, -10% 118%); }
  83.33% { clip-path: polygon(-10.0% 3.9%, -1.4% 4.3%, 7.1% 3.8%, 15.7% 4.2%, 24.3% 6.8%, 32.9% 10.3%, 41.4% 11.4%, 50.0% 8.5%, 58.6% 3.6%, 67.1% -0.2%, 75.7% -1.3%, 84.3% -1.4%, 92.9% -2.3%, 101.4% -3.2%, 110.0% -2.2%, 110% 118%, -10% 118%); }
  85% { clip-path: polygon(-10.0% 6.8%, -1.4% 6.2%, 7.1% 5.0%, 15.7% 5.3%, 24.3% 8.2%, 32.9% 11.9%, 41.4% 13.4%, 50.0% 11.2%, 58.6% 7.2%, 67.1% 4.2%, 75.7% 3.0%, 84.3% 2.2%, 92.9% 0.4%, 101.4% -1.1%, 110.0% -0.2%, 110% 118%, -10% 118%); }
  86.67% { clip-path: polygon(-10.0% 7.7%, -1.4% 6.3%, 7.1% 4.5%, 15.7% 4.5%, 24.3% 7.3%, 32.9% 11.1%, 41.4% 12.7%, 50.0% 11.3%, 58.6% 8.3%, 67.1% 6.1%, 75.7% 5.1%, 84.3% 3.7%, 92.9% 1.3%, 101.4% -0.7%, 110.0% -0.0%, 110% 118%, -10% 118%); }
  88.33% { clip-path: polygon(-10.0% 6.8%, -1.4% 4.8%, 7.1% 2.6%, 15.7% 2.4%, 24.3% 4.9%, 32.9% 8.2%, 41.4% 9.9%, 50.0% 9.0%, 58.6% 7.1%, 67.1% 5.8%, 75.7% 5.0%, 84.3% 3.4%, 92.9% 0.6%, 101.4% -1.6%, 110.0% -1.3%, 110% 118%, -10% 118%); }
  90% { clip-path: polygon(-10.0% 4.7%, -1.4% 2.5%, 7.1% 0.2%, 15.7% -0.3%, 24.3% 1.6%, 32.9% 4.4%, 41.4% 5.8%, 50.0% 5.4%, 58.6% 4.4%, 67.1% 3.9%, 75.7% 3.5%, 84.3% 1.9%, 92.9% -1.0%, 101.4% -3.3%, 110.0% -3.2%, 110% 118%, -10% 118%); }
  91.67% { clip-path: polygon(-10.0% 1.9%, -1.4% -0.3%, 7.1% -2.5%, 15.7% -3.2%, 24.3% -1.8%, 32.9% 0.2%, 41.4% 1.3%, 50.0% 1.2%, 58.6% 0.9%, 67.1% 1.1%, 75.7% 1.0%, 84.3% -0.5%, 92.9% -3.1%, 101.4% -5.2%, 110.0% -5.4%, 110% 118%, -10% 118%); }
  93.33% { clip-path: polygon(-10.0% -1.2%, -1.4% -3.1%, 7.1% -5.0%, 15.7% -5.7%, 24.3% -4.8%, 32.9% -3.5%, 41.4% -2.8%, 50.0% -2.8%, 58.6% -2.6%, 67.1% -2.1%, 75.7% -2.0%, 84.3% -3.1%, 92.9% -5.2%, 101.4% -7.0%, 110.0% -7.3%, 110% 118%, -10% 118%); }
  95% { clip-path: polygon(-10.0% -4.8%, -1.4% -6.2%, 7.1% -7.7%, 15.7% -8.3%, 24.3% -7.9%, 32.9% -7.2%, 41.4% -6.8%, 50.0% -6.8%, 58.6% -6.4%, 67.1% -5.7%, 75.7% -5.5%, 84.3% -6.2%, 92.9% -7.8%, 101.4% -9.1%, 110.0% -9.4%, 110% 118%, -10% 118%); }
  96.67% { clip-path: polygon(-10.0% -9.0%, -1.4% -9.9%, 7.1% -10.9%, 15.7% -11.3%, 24.3% -11.2%, 32.9% -10.9%, 41.4% -10.8%, 50.0% -10.8%, 58.6% -10.4%, 67.1% -9.8%, 75.7% -9.5%, 84.3% -9.9%, 92.9% -10.9%, 101.4% -11.7%, 110.0% -12.0%, 110% 118%, -10% 118%); }
  98.33% { clip-path: polygon(-10.0% -13.5%, -1.4% -13.9%, 7.1% -14.4%, 15.7% -14.6%, 24.3% -14.6%, 32.9% -14.5%, 41.4% -14.6%, 50.0% -14.6%, 58.6% -14.3%, 67.1% -14.0%, 75.7% -13.8%, 84.3% -13.9%, 92.9% -14.4%, 101.4% -14.8%, 110.0% -14.9%, 110% 118%, -10% 118%); }
  100% { clip-path: polygon(-10.0% -18.0%, -1.4% -18.0%, 7.1% -18.0%, 15.7% -18.0%, 24.3% -18.0%, 32.9% -18.0%, 41.4% -18.0%, 50.0% -18.0%, 58.6% -18.0%, 67.1% -18.0%, 75.7% -18.0%, 84.3% -18.0%, 92.9% -18.0%, 101.4% -18.0%, 110.0% -18.0%, 110% 118%, -10% 118%); }
}
@keyframes toneBounce {
  0%, 74% { scale: 1; }
  81% { scale: 1.2; }
  88% { scale: .93; }
  94% { scale: 1.03; }
  100% { scale: 1; }
}
@keyframes toneRipple {
  0%, 76% { opacity: 0; transform: scale(1); }
  80% { opacity: .8; transform: scale(1.05); }
  100% { opacity: 0; transform: scale(2.2); }
}

.menu__txt,
.header__shop,
.menu__links a,
.footer__col a:not(.btn):not(.social) { position: relative; }
.menu__txt::after,
.header__shop::after,
.menu__links a::after,
.footer__col a:not(.btn):not(.social)::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: var(--line-offset, -4px);
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: right center;
  transition: transform var(--line-dur) var(--ease-out-quart);
  pointer-events: none;
}
.menu__item:hover .menu__txt::after,
.menu__item:focus-visible .menu__txt::after,
.menu__links a:hover::after,
.menu__links a:focus-visible::after,
.header__shop:hover::after,
.header__shop:focus-visible::after,
.footer__col a:not(.btn):not(.social):hover::after,
.footer__col a:not(.btn):not(.social):focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.header__shop,
.menu__links .menu__cta { --line-offset: -8px; }
.header .header__shop:hover { background: transparent; color: inherit; transform: none; }

/* ---------- 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; }

/* ----------------------------------------------------------------
   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 : riffle de cartes photo -> logo -> hero
   ---------------------------------------------------------------- */
.intro {
  position: fixed; inset: 0;
  z-index: var(--z-preloader);
  display: grid; place-items: center;
  color: var(--ink);
  overflow: hidden;
}
.intro.is-done { pointer-events: none; }
.intro.is-hidden { display: none; }

.intro__bg { position: absolute; inset: 0; background: var(--sand); z-index: 0; }

.intro__riffle {
  position: absolute; inset: 0; z-index: 2;
  display: grid; place-items: center;
}
.intro__card {
  grid-area: 1 / 1;
  width: clamp(200px, min(34vw, 50vh), 560px);
  aspect-ratio: 4 / 5;
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--sand);
  box-shadow: var(--shadow-riffle);
  opacity: 0;
  will-change: transform, opacity;
}
.intro__card.is-on { opacity: 1; }
.intro__card img {
  display: block; width: 100%; height: 100%;
  object-fit: cover;
  filter: var(--img-bw);
}

.intro__logo {
  position: absolute; z-index: 1; left: 0; top: 0;
  font-family: var(--font-serif);
  font-weight: 400;
  font-size: clamp(56px, 17.6vw, 140px);
  line-height: 0.86;
  text-transform: lowercase;
  letter-spacing: -0.02em;
  white-space: nowrap;
  transform-origin: 0 0;
  opacity: 0;
  will-change: transform, opacity;
}
.intro__glyph {
  position: relative;
  display: inline-block;
  opacity: 0;
  will-change: transform, opacity;
}
.intro__glyph.is-on { opacity: 1; }
.intro__ink { opacity: 0; }
.intro__glyph--dot {
  width: var(--dot-size);
  height: var(--dot-size);
  margin: 0 calc((var(--dot-advance) - var(--dot-size)) / 2);
  border-radius: 50%;
  overflow: hidden;
}
.intro__glyph--dot .intro__ink { display: block; width: 100%; height: 100%; background: var(--barley); color: transparent; }
.intro__glyph--dot .intro__pic { color: transparent; -webkit-background-clip: border-box; background-clip: border-box; }
.intro__glyph--f .intro__ink {
  color: transparent;
  -webkit-text-stroke: max(1px, .012em) var(--ink);
}
.intro__fill,
.intro__pic {
  position: absolute; inset: 0;
  pointer-events: none;
}
.intro__fill {
  color: var(--ink);
  clip-path: polygon(0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%, 100% 100%, 0% 100%);
  will-change: clip-path;
}
.intro__pic {
  color: transparent;
  background-size: cover;
  background-position: center;
  -webkit-background-clip: text;
  background-clip: text;
  filter: var(--img-bw);
  will-change: opacity;
}
@media (min-width: 741px) {
  .intro__logo { font-size: min(26vw, 52vh); }
}
@media (max-width: 740px) {
  .intro__card { width: min(78vw, 62vh); }
}

/* 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.is-over-hero { mix-blend-mode: normal; }
.header.is-over-hero .header__wordmark { filter: drop-shadow(0 1px 10px rgba(7,7,8,.55)); }

.header__wordmark {
  font-family: var(--font-serif);
  font-size: clamp(20px, calc(26 * var(--u)), 30px);
  text-transform: lowercase;
  line-height: 1;
}
:is(.header__wordmark, .footer__wordmark) .wm-f {
  position: relative;
  display: inline-block;
  color: transparent;
  -webkit-text-stroke: 1px var(--sand);
  padding: 0 .02em;
}
:is(.header__wordmark, .footer__wordmark) .wm-f:nth-child(2) { --wm-i: 1; }
:is(.header__wordmark, .footer__wordmark) .wm-f:nth-child(3) { --wm-i: 2; }
:is(.header__wordmark, .footer__wordmark) .wm-f:nth-child(4) { --wm-i: 3; }
:is(.header__wordmark, .footer__wordmark) .wm-f:nth-child(5) { --wm-i: 4; }
:is(.header__wordmark, .footer__wordmark) .wm-f::before,
:is(.header__wordmark, .footer__wordmark) .wm-f::after {
  content: attr(data-ch);
  position: absolute;
  inset: 0;
  padding: 0 .02em;
  -webkit-text-stroke: 0;
  pointer-events: none;
  will-change: clip-path;
}
:is(.header__wordmark, .footer__wordmark) .wm-f::before {
  color: var(--sand);
  clip-path: polygon(0% 14%, 25% 25%, 50% 14%, 75% 3%, 100% 14%, 100% 100%, 0% 100%);
  animation: wmFill 1.2s cubic-bezier(.22,.9,.24,1) calc(var(--wm-i, 0) * .22s) both, wmWave 3.4s linear calc(1.2s + var(--wm-i, 0) * .22s) infinite;
}
:is(.header__wordmark, .footer__wordmark) .wm-f::after {
  color: var(--dark);
  opacity: .7;
  clip-path: polygon(-60% 0%, -30% 0%, -55% 100%, -85% 100%);
  animation: wmShine 3.6s cubic-bezier(.45,0,.2,1) calc(1.6s + var(--wm-i, 0) * .22s) infinite;
}
:is(.header__wordmark, .footer__wordmark) .wm-f__splash,
:is(.header__wordmark, .footer__wordmark) .wm-f__sheen {
  position: absolute;
  inset: 0;
  padding: 0 .02em;
  -webkit-text-stroke: 0;
  pointer-events: none;
  will-change: clip-path;
}
:is(.header__wordmark, .footer__wordmark) .wm-f__splash { color: var(--sand); }
:is(.header__wordmark, .footer__wordmark) .wm-f__sheen { color: var(--dark); clip-path: polygon(-60% 0%, -30% 0%, -55% 100%, -85% 100%); }
:is(.header__wordmark, .footer__wordmark) .wm-f__ring,
:is(.header__wordmark, .footer__wordmark) .wm-f__glow,
:is(.header__wordmark, .footer__wordmark) .wm-f__drop {
  position: absolute;
  pointer-events: none;
  border-radius: var(--radius-full);
  will-change: transform, opacity;
}
:is(.header__wordmark, .footer__wordmark) .wm-f__ring { left: 50%; top: 18%; width: 1.1em; height: 1.1em; border: 1px solid var(--sand); opacity: 0; }
:is(.header__wordmark, .footer__wordmark) .wm-f__glow { left: 50%; top: 30%; width: 1.4em; height: 1.4em; background: radial-gradient(circle, var(--sand) 0%, transparent 65%); opacity: 0; }
:is(.header__wordmark, .footer__wordmark) .wm-f__drop { left: 50%; top: 4%; background: var(--sand); }
@keyframes wmFill {
  0%   { clip-path: polygon(0% 100%, 25% 100%, 50% 100%, 75% 100%, 100% 100%, 100% 100%, 0% 100%); }
  100% { clip-path: polygon(0% 14%, 25% 25%, 50% 14%, 75% 3%, 100% 14%, 100% 100%, 0% 100%); }
}
@keyframes wmWave {
  0%     { clip-path: polygon(0% 14%, 25% 25%, 50% 14%, 75% 3%, 100% 14%, 100% 100%, 0% 100%); }
  6.25%  { clip-path: polygon(0% 20.2%, 25% 26.1%, 50% 11.8%, 75% 5.8%, 100% 20.2%, 100% 100%, 0% 100%); }
  12.5%  { clip-path: polygon(0% 29.4%, 25% 29.4%, 50% 13.8%, 75% 13.8%, 100% 29.4%, 100% 100%, 0% 100%); }
  18.75% { clip-path: polygon(0% 40.2%, 25% 34.3%, 50% 19.9%, 75% 25.8%, 100% 40.2%, 100% 100%, 0% 100%); }
  25%    { clip-path: polygon(0% 51%, 25% 40%, 50% 29%, 75% 40%, 100% 51%, 100% 100%, 0% 100%); }
  31.25% { clip-path: polygon(0% 60.1%, 25% 45.7%, 50% 39.8%, 75% 54.2%, 100% 60.1%, 100% 100%, 0% 100%); }
  37.5%  { clip-path: polygon(0% 66.2%, 25% 50.6%, 50% 50.6%, 75% 66.2%, 100% 66.2%, 100% 100%, 0% 100%); }
  43.75% { clip-path: polygon(0% 68.2%, 25% 53.9%, 50% 59.8%, 75% 74.2%, 100% 68.2%, 100% 100%, 0% 100%); }
  50%    { clip-path: polygon(0% 66%, 25% 55%, 50% 66%, 75% 77%, 100% 66%, 100% 100%, 0% 100%); }
  56.25% { clip-path: polygon(0% 59.8%, 25% 53.9%, 50% 68.2%, 75% 74.2%, 100% 59.8%, 100% 100%, 0% 100%); }
  62.5%  { clip-path: polygon(0% 50.6%, 25% 50.6%, 50% 66.2%, 75% 66.2%, 100% 50.6%, 100% 100%, 0% 100%); }
  68.75% { clip-path: polygon(0% 39.8%, 25% 45.7%, 50% 60.1%, 75% 54.2%, 100% 39.8%, 100% 100%, 0% 100%); }
  75%    { clip-path: polygon(0% 29%, 25% 40%, 50% 51%, 75% 40%, 100% 29%, 100% 100%, 0% 100%); }
  81.25% { clip-path: polygon(0% 19.9%, 25% 34.3%, 50% 40.2%, 75% 25.8%, 100% 19.9%, 100% 100%, 0% 100%); }
  87.5%  { clip-path: polygon(0% 13.8%, 25% 29.4%, 50% 29.4%, 75% 13.8%, 100% 13.8%, 100% 100%, 0% 100%); }
  93.75% { clip-path: polygon(0% 11.8%, 25% 26.1%, 50% 20.2%, 75% 5.8%, 100% 11.8%, 100% 100%, 0% 100%); }
  100%   { clip-path: polygon(0% 14%, 25% 25%, 50% 14%, 75% 3%, 100% 14%, 100% 100%, 0% 100%); }
}
@keyframes wmShine {
  0%   { clip-path: polygon(-60% 0%, -30% 0%, -55% 100%, -85% 100%); }
  45%  { clip-path: polygon(150% 0%, 180% 0%, 155% 100%, 125% 100%); }
  100% { clip-path: polygon(150% 0%, 180% 0%, 155% 100%, 125% 100%); }
}
@media (prefers-reduced-motion: reduce) {
  :is(.header__wordmark, .footer__wordmark) .wm-f::before { animation: none; clip-path: none; }
  :is(.header__wordmark, .footer__wordmark) .wm-f::after { display: none; animation: none; }
}
.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__txt { --line-offset: -2px; }
.menu__item:nth-child(2) { --mi: 1; }
.menu__item:nth-child(3) { --mi: 2; }
.menu__item:nth-child(4) { --mi: 3; }
.menu__item:nth-child(5) { --mi: 4; }
.menu__num { font-family: var(--font-mono); font-size: clamp(11px, 1.4vw, 14px); color: var(--barley); letter-spacing: .2em; }
.menu__rule {
  display: inline-block; flex: none;
  font-size: clamp(11px, 1.4vw, 14px);
  width: clamp(16px, 2.6vw, 40px); height: 1px;
  margin: 0 calc(-10 * var(--u));
  background: var(--moss-transparent);
  transform: translateY(-.4em);
}
.menu__item .tone-dot { --tone-size: clamp(9px, 1.1vw, 15px); transform: translateY(-.18em); }
.menu.has-dots .tone-dot,
.menu.has-dots .tone-dot::before,
.menu.has-dots .tone-dot::after { animation-duration: var(--tone-dur); animation-delay: calc(.55s + var(--mi, 0) * .09s); animation-fill-mode: both; }
.menu.has-dots .tone-dot { animation-name: toneBounce; animation-timing-function: linear; }
.menu.has-dots .tone-dot::before { animation-name: toneFill; animation-timing-function: linear; }
.menu.has-dots .tone-dot::after { animation-name: toneRipple; animation-timing-function: cubic-bezier(.2,.7,.3,1); }
.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; align-items: center; flex-wrap: wrap; 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__links .menu__cta:hover { color: inherit; background: transparent; transform: none; }

.menu__close {
  position: absolute; z-index: 1;
  top: calc(16 * var(--u)); right: var(--pad-side);
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-width: 48px; height: 48px; padding: 0 14px;
  font-family: var(--font-main); font-weight: 500; font-size: 12px;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink);
  background: var(--glass-bg);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
  border: 0;
  border-radius: var(--squircle);
  corner-shape: squircle;
  box-shadow: var(--shadow-glass);
  cursor: pointer;
  opacity: 0;
  transform: translateY(-10px) scale(.92);
  transition: opacity .45s var(--ease-out-quart), transform .6s var(--ease-out-quart), box-shadow .35s var(--ease-out-quart);
}
.menu__close::before {
  content: "";
  position: absolute; inset: 0;
  padding: 1.5px;
  border-radius: inherit;
  corner-shape: squircle;
  background: var(--glass-ring);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
  mask-composite: exclude;
  opacity: .9;
  transition: background-position .8s var(--ease-out-quart), opacity .35s var(--ease-out-quart);
  pointer-events: none;
}
.menu__close-icon { position: relative; width: 18px; height: 18px; flex: none; transition: transform .6s var(--ease-out-quart); }
.menu__close-icon i {
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
  transform: translate(-50%, -50%) rotate(45deg) scaleX(0);
  transition: transform .55s var(--ease-out-quart);
}
.menu__close-icon i:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(0); }
.menu__close-label { display: none; }
.menu.is-open .menu__close { opacity: 1; transform: none; transition-delay: .35s, .35s, 0s; }
.menu.is-open .menu__close-icon i { transform: translate(-50%, -50%) rotate(45deg) scaleX(1); transition-delay: .55s; }
.menu.is-open .menu__close-icon i:nth-child(2) { transform: translate(-50%, -50%) rotate(-45deg) scaleX(1); transition-delay: .63s; }
.menu__close:hover { box-shadow: var(--shadow-glass), 0 0 0 4px rgba(244,242,238,.14); }
.menu__close:hover::before { background-position: 100% 50%; opacity: 1; }
.menu__close:hover .menu__close-icon { transform: rotate(90deg); }
.menu.is-open .menu__close:active { transform: scale(.96); transition-delay: 0s; }
.menu__close:focus-visible { outline: 2px solid var(--sand); outline-offset: 3px; }
@media (min-width: 741px) {
  .menu__close { padding: 0 18px 0 16px; }
  .menu__close-label { display: inline; }
}
.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__yt {
  position: absolute; inset: 0; z-index: 0;
  overflow: hidden;
  pointer-events: none;
  container-type: size;
  background: var(--dark-bg) var(--hero-poster) center / cover no-repeat;
}
.hero__yt iframe {
  position: absolute; top: 50%; left: 50%;
  width: max(120cqw, 213.33cqh);
  height: max(120cqh, 67.5cqw);
  border: 0;
  transform: translate(-50%, -50%);
}
.hero__yt::after {
  content: "";
  position: absolute; inset: 0; z-index: 1;
  background: var(--dark-bg) var(--hero-poster) center / cover no-repeat;
  transition: opacity 1.4s var(--ease-out-quart);
  pointer-events: none;
}
.hero__yt.is-playing::after { opacity: 0; }
.hero__veil { position: absolute; inset: 0; z-index: 1; pointer-events: none;
  background: linear-gradient(180deg, rgba(7,7,8,.62), rgba(7,7,8,.38) 40%, rgba(7,7,8,.62)); }
.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__tagline { margin-top: calc(16 * var(--u)); color: var(--barley); }

.hero__reel {
  margin: auto 0;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: calc(16 * var(--u));
}
.reel-item {
  position: relative; border-radius: var(--radius-pill); overflow: hidden; aspect-ratio: 4/5;
  background: rgba(244,242,238,.04);
  box-shadow: inset 0 0 0 1px rgba(244,242,238,.55), 0 24px 60px rgba(0,0,0,0);
  transition: box-shadow .9s var(--ease-out-quart);
}
.reel-item video, .reel-item img { width: 100%; height: 100%; object-fit: cover; }
.reel-item > video,
.reel-item > img {
  opacity: 0; scale: 1.08;
  transition: opacity .8s var(--ease-out-quart), scale 1.4s var(--ease-out-quart);
}
.reel-item.is-touched { box-shadow: inset 0 0 0 1px rgba(244,242,238,0), 0 24px 60px rgba(0,0,0,.28); }
.reel-item.is-touched > video,
.reel-item.is-touched > img { opacity: 1; scale: 1; }
@media (hover: hover) {
  .reel-item:hover { box-shadow: inset 0 0 0 1px rgba(244,242,238,0), 0 24px 60px rgba(0,0,0,.28); }
  .reel-item:hover > video,
  .reel-item:hover > img { opacity: 1; scale: 1; }
}
.reel-item figcaption {
  position: absolute; z-index: 1; left: calc(18 * var(--u)); bottom: calc(16 * var(--u));
  color: var(--sand);
}
.reel-item::after {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.55), transparent 50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity .8s var(--ease-out-quart);
}
.reel-item.is-touched::after { opacity: 1; }
@media (hover: hover) { .reel-item:hover::after { opacity: 1; } }
.reel-item:nth-child(2) { --ri: 1; }
.reel-item:nth-child(3) { --ri: 2; }
.reel-item:nth-child(4) { --ri: 3; }
.reel-item:nth-child(5) { --ri: 4; }
.hero .reel-item { opacity: 0; transform: translateY(36px) scale(.94); }
body:not(.intro-active) .hero.is-revealed .reel-item {
  opacity: 1; transform: none;
  transition: opacity 1s var(--ease-out-quart), transform 1.2s var(--ease-out-quart);
  transition-delay: calc(.3s + var(--ri, 0) * .14s);
}
.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;
}
.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;
}
.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 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); }
.num-row__logo {
  display: block;
  width: clamp(44px, 5vw, 72px); height: clamp(18px, 1.9vw, 28px);
  object-fit: contain; object-position: right center;
  opacity: .8;
}

/* ----------------------------------------------------------------
   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;
  width: 90%;
  margin: 0 auto;
  min-height: clamp(320px, 52vh, 480px);
  border-radius: 0;
  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);
}
.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; }
.press-row__logo {
  display: block;
  width: clamp(64px, 7vw, 104px); height: clamp(16px, 1.7vw, 24px);
  object-fit: contain; object-position: right center;
  opacity: .7;
}

/* ----------------------------------------------------------------
   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 { position: relative; 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), scale 1.8s var(--ease-out-quart) .15s, opacity 1.1s var(--ease-out-quart) .15s; }
.feature.is-motion .feature__media {
  transform: perspective(1000px) rotateX(var(--rx, 0deg)) rotateY(var(--ry, 0deg));
  will-change: transform;
}
.feature.is-motion .feature__media::before {
  content: "";
  position: absolute; inset: -1px; z-index: 2;
  background: var(--sand);
  transform-origin: center top;
  transition: transform 1.3s var(--ease-in-out-quart);
  pointer-events: none;
}
.feature.is-motion .feature__row.is-visible .feature__media::before { transform: scaleY(0); }
.feature.is-motion .feature__media::after {
  content: "";
  position: absolute; z-index: 1;
  left: -50%; top: -50%; width: 200%; height: 200%;
  background: radial-gradient(circle at center, rgba(255,255,255,.3), rgba(255,255,255,0) 32%);
  opacity: 0;
  transform: translate(var(--sx, 0%), var(--sy, 0%));
  transition: opacity .6s var(--ease-out-quart);
  pointer-events: none;
}
.feature.is-motion .feature__media.is-hover::after { opacity: 1; }
.feature.is-motion .feature__media img { scale: 1.55; opacity: 0; will-change: transform, opacity; }
.feature.is-motion .feature__row.is-visible .feature__media img { scale: 1.28; opacity: 1; }
.feature.is-motion .feature__row.is-visible .feature__media.is-hover img { scale: 1.4; transition: transform 1s var(--ease-out-quart), scale 1.1s var(--ease-out-quart), opacity 1.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(84 * 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 : retour visuel sans changement de géométrie (hit-testing stable) */
.coverflow:not(.is-dragging) .cover:hover .cover__card { 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); }
.coverflow.is-3d { --cf-w: clamp(220px, 25vw, 360px); --cf-h: clamp(300px, 34vw, 480px); }
.coverflow.is-3d .coverflow__stage { perspective: none; }
.coverflow.is-3d .coverflow__track { left: 50%; width: 0; display: block; transform-style: flat; }
.coverflow.is-3d .cover {
  position: absolute; left: 0; top: 0;
  width: var(--cf-w); height: var(--cf-h);
  margin: calc(-.5 * var(--cf-h)) 0 0 calc(-.5 * var(--cf-w));
  transform-style: flat;
  will-change: translate;
}
.coverflow.is-3d .cover__card,
.coverflow.is-3d .cover.is-active .cover__card {
  inset: 0; width: 100%;
  transform: none; transform-origin: 50% 50%;
  transition: box-shadow .4s var(--ease-out-quart);
  will-change: transform;
}

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

.cfocus { position: fixed; inset: 0; z-index: 250; }
.cfocus__backdrop { position: absolute; inset: 0; background: rgba(14,14,17,.96); cursor: zoom-out; }
.cfocus__frame {
  position: fixed; overflow: hidden;
  border-radius: var(--radius-sm);
  background: var(--olive);
  box-shadow: 0 50px 140px rgba(0,0,0,.6);
  transform-origin: 50% 50%;
  pointer-events: none;
  will-change: transform, clip-path;
}
.cfocus__img { display: block; width: 100%; height: 100%; object-fit: cover; transform-origin: 50% 50%; will-change: transform; }
.cfocus__sheen {
  position: absolute; top: -10%; bottom: -10%; left: 0; width: 60%;
  background: linear-gradient(100deg, transparent 0%, rgba(244,242,238,.16) 45%, rgba(244,242,238,.28) 50%, rgba(244,242,238,.16) 55%, transparent 100%);
  mix-blend-mode: screen; opacity: 0;
}
.cfocus__grain {
  position: absolute; inset: 0; opacity: 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;
}
.cfocus__bar { position: absolute; left: 0; right: 0; height: 7vh; background: var(--dark); transform: scaleY(0); pointer-events: none; }
.cfocus__bar--top { top: 0; transform-origin: top; }
.cfocus__bar--bottom { bottom: 0; transform-origin: bottom; }
.cfocus__rule { display: block; width: clamp(40px, calc(64 * var(--u)), 90px); height: 1px; background: var(--barley); transform-origin: center; }
.cfocus__text {
  position: fixed; left: var(--pad-side); right: var(--pad-side); bottom: clamp(28px, calc(60 * var(--u)), 80px);
  display: flex; flex-direction: column; align-items: center; gap: calc(14 * var(--u));
  text-align: center; pointer-events: none;
}
.cfocus__name {
  margin: 0;
  font-family: var(--font-serif); font-weight: 400;
  font-size: clamp(36px, min(calc(120 * var(--u)), 14vw), 168px);
  line-height: .92; letter-spacing: var(--tracking-tight);
  color: var(--sand); text-transform: uppercase;
  mix-blend-mode: difference;
}
.cfocus__word { display: inline-block; overflow: hidden; vertical-align: top; padding: .04em .08em .1em; margin: -.04em 0 -.1em; }
.cfocus__word > span { display: inline-block; will-change: transform; }
.cfocus__subs { font-family: var(--font-mono); font-size: clamp(11px, calc(13 * var(--u)), 15px); letter-spacing: .18em; text-transform: uppercase; color: var(--barley); }
.cfocus__close {
  position: absolute; top: clamp(14px, 2.5vw, 28px); right: clamp(14px, 2.5vw, 28px);
  width: 44px; height: 44px; display: grid; place-items: center;
  font-size: 24px; line-height: 1; color: var(--sand);
  background: transparent; border: 1px solid var(--moss-transparent); border-radius: var(--radius-full);
  cursor: pointer;
  transition: transform .4s var(--ease-out-quart);
}
.cfocus__close:hover { transform: rotate(90deg); }
.cfocus__close:focus-visible { outline: 1px solid var(--sand); outline-offset: 4px; }

/* --- lecture du projet centré --- */
.frequence__active { margin: calc(14 * var(--u)) var(--pad-side) calc(16 * var(--u)); min-height: calc(58 * 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(6 * 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: 15px; 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(--sand); transform-origin: left; transform: scaleX(0); }
.slider input[type="range"] {
  -webkit-appearance: none; appearance: none;
  position: relative; z-index: 1;
  display: block; margin: 0;
  width: 100%; height: 30px; 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: 14px; height: 14px; border-radius: var(--radius-full);
  background: var(--sand); border: 0;
  box-shadow: 0 0 0 5px rgba(244,242,238,.1), 0 0 0 6px rgba(244,242,238,.16);
  transition: transform .4s var(--ease-out-quart);
}
.slider input[type="range"]:hover::-webkit-slider-thumb,
.slider input[type="range"]:active::-webkit-slider-thumb { transform: scale(1.3); }
.slider input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 5px rgba(244,242,238,.1), 0 0 0 6px var(--sand); }
.slider input[type="range"]::-moz-range-thumb {
  width: 14px; height: 14px; border: 0; border-radius: var(--radius-full);
  background: var(--sand); cursor: pointer;
  box-shadow: 0 0 0 5px rgba(244,242,238,.1), 0 0 0 6px rgba(244,242,238,.16);
  transition: transform .4s var(--ease-out-quart);
}
.slider input[type="range"]:hover::-moz-range-thumb,
.slider input[type="range"]:active::-moz-range-thumb { transform: scale(1.3); }
.slider__scale { display: flex; justify-content: space-between; margin: calc(10 * var(--u)) 7px 0; font-family: var(--font-mono); font-size: 10px; letter-spacing: .12em; color: var(--moss); }
.slider__scale span { position: relative; width: 0; display: flex; justify-content: center; padding-top: 10px; white-space: nowrap; opacity: .55; transition: opacity .3s var(--ease-out-cubic), color .3s var(--ease-out-cubic); }
.slider__scale span::before { content: ""; position: absolute; top: 0; left: 0; width: 1px; height: 5px; background: currentColor; transform: scaleY(.6); transform-origin: top; transition: transform .3s var(--ease-out-cubic); }
.slider__scale span.is-active { color: var(--sand); opacity: 1; }
.slider__scale span.is-active::before { transform: scaleY(1); }

/* ----------------------------------------------------------------
   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 { --gallery-w: clamp(260px, 40vw, 600px); background: var(--bg); color: var(--ink); padding: calc(90 * var(--u)) var(--pad-side) calc(70 * var(--u)); overflow-x: clip; }
.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: var(--gallery-w);
  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__stage > .gallery__card,
.gallery__stack,
.gallery__page { grid-area: 1 / 1; }
.gallery__card { z-index: 2; }
.gallery__stack {
  position: relative; z-index: 1;
  width: var(--gallery-w);
  aspect-ratio: 1.6 / 1;
  transform: translate(var(--st-x), var(--st-y)) rotate(var(--st-r));
  pointer-events: none;
}
.gallery__sheet {
  position: absolute; inset: 0;
  display: block;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  background: var(--olive);
  filter: brightness(.78) saturate(.9);
  box-shadow: 0 18px 50px rgba(0,0,0,.16);
  animation: gallerySheet var(--st-d) cubic-bezier(.37,0,.63,1) infinite alternate;
  will-change: transform;
}
@keyframes gallerySheet {
  from { transform: translateY(0px) rotate(-.8deg); }
  to   { transform: translateY(-6px) rotate(.8deg); }
}
.gallery__page {
  position: relative; z-index: 3;
  width: var(--gallery-w);
  aspect-ratio: 1.6 / 1;
  pointer-events: none;
  will-change: transform, opacity;
}
.gallery__page-face {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  border-radius: var(--radius-sm);
  box-shadow: 0 30px 80px rgba(0,0,0,.24);
}
@media (prefers-reduced-motion: reduce) {
  .gallery__stack, .gallery__page { display: none; }
}
.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;
}
.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: absolute; inset: 0; z-index: 1;
  display: grid; place-items: center;
}
.glightbox__img,
.glightbox__cta { grid-area: 1 / 1; }
.glightbox__img {
  display: block;
  max-width: 100vw;
  max-height: 100vh;
  width: auto; height: auto;
  object-fit: contain;
  transform-origin: 50% 50%;
  will-change: transform, clip-path;
}
.glightbox__cta {
  align-self: end;
  margin-bottom: clamp(18px, 4vh, 40px);
  background: var(--modal-bg);
  opacity: 0; transform: translateY(14px);
  color: var(--sand);
  transition: opacity .5s var(--ease-out-cubic),
              transform .7s var(--ease-out-expo),
              background .3s var(--ease-out-cubic),
              border-color .3s var(--ease-out-cubic);
}
.glightbox.is-shown .glightbox__cta { opacity: 1; transform: translateY(0); transition-delay: .62s, .62s, 0s, 0s; }
.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: 44px; height: 44px;
  color: var(--sand);
  background: var(--modal-bg);
  border: 0;
  border-radius: var(--radius-full);
  cursor: pointer;
  opacity: 0; transform: rotate(-90deg);
  transition: opacity .25s var(--ease-out-cubic),
              background .3s var(--ease-out-cubic),
              transform .3s var(--ease-out-cubic);
}
.glightbox.is-shown .glightbox__close { opacity: 1; transform: rotate(0deg); transition-delay: .5s, 0s, .5s; transition-duration: .5s, .3s, .8s; transition-timing-function: var(--ease-out-cubic), var(--ease-out-cubic), var(--ease-out-expo); }
.glightbox.is-shown .glightbox__close:hover { background: rgba(255,255,255,.18); transform: rotate(90deg); transition-delay: 0s; }
.glightbox__close::before,
.glightbox__close::after {
  content: "";
  position: absolute; left: 50%; top: 50%;
  width: 18px; height: 1.5px;
  background: currentColor;
  border-radius: var(--radius-full);
}
.glightbox__close::before { transform: translate(-50%, -50%) rotate(45deg); }
.glightbox__close::after { transform: translate(-50%, -50%) rotate(-45deg); }

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

.contact { position: relative; background: var(--dark-bg); }
.contact__panel {
  position: relative; z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
  gap: calc(60 * var(--u));
  align-items: start;
  padding: calc(140 * var(--u)) var(--pad-side) calc(160 * var(--u));
  background: var(--bg); color: var(--ink);
  border-radius: 0 0 var(--radius-pill) var(--radius-pill);
  box-shadow: 0 40px 80px rgba(0,0,0,.35);
}
.contact__intro { display: flex; flex-direction: column; gap: calc(16 * var(--u)); }
.contact__intro .t-h2 { color: var(--ink); font-size: clamp(40px, 11vw, 112px); }
.contact__studio {
  display: grid; gap: calc(26 * var(--u));
  margin-top: calc(40 * var(--u)); padding-top: calc(32 * var(--u));
  border-top: 1px solid var(--moss-transparent);
}
.contact__office { display: flex; flex-direction: column; gap: calc(6 * var(--u)); align-items: start; }
.contact__office .t-label { color: var(--moss); }
.contact__office a { position: relative; font-size: clamp(17px, calc(20 * var(--u)), 24px); color: var(--ink); }
.contact__socials { display: flex; gap: calc(22 * var(--u)); }
.contact__office a::after {
  content: "";
  position: absolute; left: 0; right: 0; bottom: -3px;
  height: 1px;
  background: currentColor;
  transform: scaleX(0); transform-origin: right center;
  transition: transform var(--line-dur) var(--ease-out-quart);
}
.contact__office a:hover::after,
.contact__office a:focus-visible::after { transform: scaleX(1); transform-origin: left center; }
.contact__optional { color: var(--slate); text-transform: none; letter-spacing: 0; }
.contact__select { position: relative; }
.contact__select::after {
  content: "";
  position: absolute; right: 4px; top: 50%;
  width: 9px; height: 9px;
  border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-70%) rotate(45deg);
  pointer-events: none;
}
.contact__select .contact__input {
  -webkit-appearance: none; appearance: none;
  padding-right: 28px;
  cursor: pointer;
}
.contact__form { display: grid; grid-template-columns: 1fr 1fr; gap: calc(28 * var(--u)) calc(32 * var(--u)); }
.contact__field { display: flex; flex-direction: column; gap: calc(8 * var(--u)); min-width: 0; }
.contact__field--wide { grid-column: 1 / -1; }
.contact__field > label { color: var(--moss); }
.contact__input {
  width: 100%;
  padding: calc(8 * var(--u)) 0;
  font-family: var(--font-main); font-weight: 400;
  font-size: clamp(17px, calc(20 * var(--u)), 24px); line-height: 1.3;
  color: var(--ink);
  background: transparent;
  border: 0; border-bottom: 1px solid var(--moss-transparent); border-radius: 0;
  transition: border-color .3s var(--ease-out-cubic);
}
.contact__input:focus { outline: none; border-bottom-color: var(--ink); }
.contact__input--area { resize: vertical; min-height: calc(140 * var(--u)); }
.contact__input[aria-invalid="true"] { border-bottom-color: var(--tone-red-deep); }
.contact__error { min-height: 1.3em; color: var(--tone-red-deep); }
.contact__actions { display: flex; align-items: center; flex-wrap: wrap; gap: calc(24 * var(--u)); }
.contact__status { color: var(--moss); }
.thanks {
  position: sticky; bottom: 0; z-index: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: calc(22 * var(--u));
  min-height: 100vh;
  min-height: 100svh;
  padding: calc(60 * var(--u)) var(--pad-side);
  text-align: center;
  background: var(--dark-bg); color: var(--sand);
}
.thanks__rule {
  display: block; width: 1px; height: calc(72 * var(--u));
  background: var(--moss-transparent);
  transform-origin: center top;
}
.thanks__title { color: var(--sand); font-size: clamp(56px, 17vw, 240px); line-height: .9; }
.thanks__mask { display: inline-block; overflow: hidden; padding: .04em .06em .08em; }
.thanks__word { display: inline-block; }
.thanks__lead { max-width: 34ch; color: var(--barley); }
.thanks__credits { display: flex; flex-direction: column; gap: calc(6 * var(--u)); }
.thanks__credits .t-label { color: var(--barley); }
.thanks .thanks__rule { transition: transform 1s var(--ease-out-quart); }
.thanks .thanks__rule--end { transition-delay: 1.15s; }
.thanks .thanks__word { transition: transform 1.2s var(--ease-out-quart) .25s; }
.thanks:not(.is-in) .thanks__word { transform: translateY(105%); }
.thanks .thanks__lead,
.thanks .thanks__credits .t-label { transition: opacity .9s var(--ease-out-quart), transform .9s var(--ease-out-quart); }
.thanks .thanks__lead { transition-delay: .6s; }
.thanks .thanks__credits .t-label:nth-child(1) { transition-delay: .75s; }
.thanks .thanks__credits .t-label:nth-child(2) { transition-delay: .83s; }
.thanks .thanks__credits .t-label:nth-child(3) { transition-delay: .91s; }
.thanks .thanks__credits .t-label:nth-child(4) { transition-delay: .99s; }
.thanks:not(.is-in) .thanks__lead,
.thanks:not(.is-in) .thanks__credits .t-label { opacity: 0; transform: translateY(16px); }
.thanks:not(.is-in) .thanks__rule { transform: scaleY(0); }
@media (max-width: 900px) {
  .contact__panel { grid-template-columns: 1fr; gap: calc(36 * var(--u)); border-radius: 0 0 calc(24 * var(--u)) calc(24 * var(--u)); }
}
@media (max-width: 575px) {
  .contact__form { grid-template-columns: 1fr; }
}

/* ----------------------------------------------------------------
   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; }
.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__col .tone-dot { --tone-size: 7px; margin-right: .6em; }
.footer__col a:nth-of-type(2) { --fi: 1; }
.footer__col a:nth-of-type(3) { --fi: 2; }
.footer__col a:nth-of-type(4) { --fi: 3; }
.footer__col.is-lit .tone-dot,
.footer__col.is-lit .tone-dot::before,
.footer__col.is-lit .tone-dot::after { animation-duration: var(--tone-dur); animation-delay: calc(.2s + var(--fi, 0) * .12s); animation-fill-mode: both; }
.footer__col.is-lit .tone-dot { animation-name: toneBounce; animation-timing-function: linear; }
.footer__col.is-lit .tone-dot::before { animation-name: toneFill; animation-timing-function: linear; }
.footer__col.is-lit .tone-dot::after { animation-name: toneRipple; animation-timing-function: cubic-bezier(.2,.7,.3,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); }
  .reel-item:nth-child(5) { grid-column: 1 / -1; aspect-ratio: 16 / 10; }
  .hero { min-height: 92vh; }
  .highlights__grid { grid-template-columns: 1fr; }
  .coverflow__stage { perspective: 1100px; height: clamp(320px, 80vw, 460px); }
  .coverflow.is-3d { --cf-w: 38vw; --cf-h: calc(38vw * 1.333); }
  .coverflow__decor { margin-top: -40px; }
  .num-row { grid-template-columns: calc(48px) 1fr auto; }
  .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; }
  .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; }
  .hero .reel-item { opacity: 1; transform: none; }
  .tone-dot::before { animation: none; clip-path: none; }
  .thanks .thanks__word,
  .thanks .thanks__lead,
  .thanks .thanks__credits .t-label,
  .thanks .thanks__rule { transform: none; opacity: 1; }
  .menu.has-dots .tone-dot,
  .menu.has-dots .tone-dot::before,
  .menu.has-dots .tone-dot::after,
  .footer__col.is-lit .tone-dot,
  .footer__col.is-lit .tone-dot::before,
  .footer__col.is-lit .tone-dot::after { animation: 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 {
  position: relative;
  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 .nowrap { position: relative; }
.feed__phone {
  position: absolute; left: 100%; bottom: .3em;
  width: .64em;
  pointer-events: none;
}
.feed__phone img {
  display: block; width: 100%; height: auto;
  filter: drop-shadow(0 .08em .1em rgba(11,11,13,.2));
  animation: phoneFloat 6s ease-in-out infinite alternate;
}
@keyframes phoneFloat {
  from { translate: 0 0; }
  to { translate: 0 -.05em; }
}
@media (prefers-reduced-motion: reduce) {
  .feed__phone img { animation: none; }
}
.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; }
}