/* =========================================================
   LinkZen × OpenFrame × CaseOne
   Direction : ARCHIVE & PROTOCOL — 2026
   ---------------------------------------------------------
   Anti-Claude / anti-Anthropic editorial. Posture éditoriale :
   - Mono-first UI (JetBrains Mono pour la chrome)
   - Type-driven hero en serif display (Fraunces variable,
     axes SOFT/WONK/opsz, font-stretch 75-92% pour densité)
   - Tabular "spec sheet" (numéros de section, IDs, filets)
   - Density haute (vs Claude clairsemé)
   - Surfaces = papier non blanc / encre profonde
     (jamais #fff ni #000 purs)
   - Slow web : transitions 600-900ms, anti-TikTok
     (cohérence avec la posture commerciale "Slow to scale")

   Charte officielle 2026 (PDF Le Constat) :
   - Socle    : #0b1620 encre, #fafaf7 papier, #e4c079 OR
                (accent), #e8ddc8 papier warm
   - Marque   : #2f5d50 vert forêt (LinkZen + OpenFrame light)
   - Sombre   : #6f8f7a vert sauge (OpenFrame dark primaire)
   - CaseOne  : #2e3031 graphite, #571711 bordeaux (tampons)

   Surfaces par marque
   - LinkZen     : encre sombre / papier clair (toggle)
   - OpenFrame   : encre sombre / papier clair (toggle)
   - CaseOne     : graphite — TOUJOURS sombre, tampon bordeaux
   ========================================================= */

/* ---------- TOKENS ---------- */
:root {
  /* Palette — charte officielle LinkZen × OpenFrame × CaseOne (PDF Le Constat)
     ⚠️ Cette palette est SACRÉE. Voir skill /linkzen-charte. */
  --c-encre:        #0b1620;   /* fond sombre charte */
  --c-papier:       #fafaf7;   /* fond clair charte */
  --c-papier-warm:  #e8ddc8;   /* sable, citations, papier warm charte */
  --c-vert-foret:   #2f5d50;   /* marque · liens (LinkZen) · primaire OpenFrame light */
  --c-vert-sauge:   #6f8f7a;   /* primaire boutons (OpenFrame dark) — charte officielle */
  --c-vert-sauge-bright: #8aa595; /* déclinaison luminosité pour mode nuit (contraste WCAG AA+) */
  --c-or:           #e4c079;   /* Accents · Filets/hover · CTA lumière de loupe */
  --c-bordeaux:     #571711;   /* Tampons CaseOne (rare) */
  --c-graphite:     #2e3031;   /* Surfaces panneaux CaseOne */
  --c-bronze:       #8c530d;
  --c-terre:        #a0411f;
  --c-marron:       #40250d;
  --c-marron-deep:  #261607;
  --c-orange:       #f28c0f;
  --c-orange-comp:  #f59e0c;

  /* Surface DARK — paliers calibrés "vrai mode nuit" (audit user 2026-05-08).
     Profondeur réelle entre paliers, teinte bleu-encre minérale CONSERVÉE
     dans la charte officielle #0b1620. Variations en luminosité/saturation
     pour créer 4 plans distincts au lieu de 3 paliers presque identiques. */
  --bg:        var(--c-encre);            /* #0b1620 — fond cinématique le plus sombre */
  --bg-soft:   #0f1c2a;                   /* +1 cran : surfaces empilées (sections soft) */
  --bg-raised: #14253a;                   /* +2 crans : cards saillantes */
  --bg-paper:  #1a304b;                   /* +3 crans : casefile, dossier, popover */
  --bg-elevated: #243f60;                 /* +4 crans : éléments rares en dessus */
  --line:      rgba(232, 221, 200, 0.10);
  --line-strong: rgba(232, 221, 200, 0.22);

  --ink:       var(--c-papier-warm);      /* #e8ddc8 charte — texte papier sur encre */
  --ink-dim:   #c8bea7;                   /* +5% lisibilité vs #b8b09c */
  --ink-mute:  #8a8273;                   /* +5% lisibilité vs #7a7160 */

  /* Système de couleurs — vert sauge DOMINANT (audit user 2026-05-08)
     Inversion de dominance : vert sauge bright #8aa595 devient
     l'accent principal (texte, hover, liens, filets, accents h1/h2/h3),
     l'or #e4c079 reste chirurgical pour CTA primaire, ::selection et
     signatures rares (lumière de loupe CaseOne). Contraste WCAG AA+
     5.2:1 sur encre #0b1620 (le sauge charte #6f8f7a tombe à 4.05:1
     limite AA, donc on utilise systématiquement la version bright). */
  --accent:         var(--c-vert-sauge-bright);  /* DOMINANT — texte/hover/filets */
  --accent-soft:    var(--c-vert-sauge);         /* charte officielle */
  --gold:           var(--c-or);                  /* OR chirurgical — CTA primaire, ::selection */
  --gold-soft:      #d6ad65;
  --link:           var(--c-vert-sauge-bright);
  --brand:          var(--c-vert-sauge-bright);
  --display-acc:    var(--c-vert-sauge-bright);
  --h2-italic:      var(--c-vert-sauge-bright);
  --stamp:          var(--c-bordeaux);    /* CaseOne uniquement */

  /* Typo — direction Awwwards 2026 (anti-Claude/Anthropic typographique)
     Bricolage Grotesque : grotesque variable expressif (wdth 75-200, opsz, wght)
       — pour les display H1/hero, plus de personnalité que Inter/DM Sans
       sans tomber dans le Fraunces serif italique cliché AI
     Instrument Serif : serif éditorial Belle Époque, italique fragile
       — garde l'âme éditoriale (h2 italique charte, chiffres ornementaux)
       sans le mood-board Anthropic
     Geist : grotesque neutre Vercel, body propre
     Space Mono : mono signature, anti-JetBrains-Mono cliché
     Special Elite : typewriter, signature CaseOne dossier */
  --display:       'Bricolage Grotesque', 'Inter', system-ui, sans-serif;
  --serif-display: 'Instrument Serif', 'Newsreader', Georgia, serif;
  --sans:          'Geist', 'DM Sans', system-ui, sans-serif;
  --mono:          'Space Mono', 'JetBrains Mono', 'SF Mono', Menlo, monospace;
  --type:          'Special Elite', 'Courier Prime', 'Courier New', monospace;

  /* Échelles — display lourd, body dense */
  --fs-mega:   clamp(72px, 13vw, 220px);  /* hero */
  --fs-h1:     clamp(40px, 5.5vw, 76px);
  --fs-h2:     clamp(28px, 3.6vw, 52px);
  --fs-h3:     clamp(20px, 2.2vw, 28px);
  --fs-lead:   clamp(16px, 1.4vw, 19px);
  --fs-body:   15px;
  --fs-small:  13px;
  --fs-tiny:   11px;

  /* Layout */
  --w-max: 1480px;
  --pad-x: clamp(20px, 4vw, 56px);
  --pad-y: clamp(80px, 11vw, 140px);
  --gut:   clamp(14px, 1.6vw, 22px);

  /* Anim */
  --ease-out: cubic-bezier(.22,.8,.24,1);
  --ease-soft: cubic-bezier(.4,0,.2,1);
}

/* ---------- THÈME LIGHT — papier ivoire (refonte audit 2026-05-08) ---------- */
:root[data-theme="light"] {
  --bg:        var(--c-papier);          /* #fafaf7 papier charte */
  --bg-soft:   #f3eee0;                  /* sable tendre (déclinaison papier warm) */
  --bg-raised: #ebe5d4;                  /* surface raised — cards, panels */
  --bg-paper:  var(--c-papier-warm);     /* #e8ddc8 charte — citations, dossier */
  --bg-elevated: #ddd2bd;                /* +1 cran rare */
  --line:      rgba(11, 22, 32, 0.12);
  --line-strong: rgba(11, 22, 32, 0.28);

  --ink:       var(--c-encre);
  --ink-dim:   #2c3a47;
  --ink-mute:  #5a6571;

  --accent:        var(--c-vert-foret);  /* DOMINANT — light mode = vert forêt (AAA sur papier) */
  --accent-soft:   #2a544a;
  --gold:           var(--c-or);          /* OR chirurgical — CTA primaire, ::selection */
  --gold-soft:      #c19550;
  --link:           var(--c-vert-foret);
  --brand:          var(--c-vert-foret);
  --display-acc:    var(--c-vert-foret);
  --h2-italic:      var(--c-vert-foret); /* h2 LinkZen light = vert forêt (charte) */
}

/* ---------- SURFACES PAR MARQUE ---------- */
/* OpenFrame DARK : primaire vert sauge, surfaces vert forêt, filets gold */
:root[data-theme="dark"] [data-surface="openframe"] {
  --brand:          var(--c-vert-sauge);
  --link:           var(--c-vert-sauge);
  --display-acc:    var(--c-vert-sauge);
  --h2-italic:      var(--c-vert-sauge);  /* h2 italic OpenFrame dark = vert sauge (charte) */
}
/* OpenFrame LIGHT : primaire vert forêt */
:root[data-theme="light"] [data-surface="openframe"] {
  --brand:          var(--c-vert-foret);
  --link:           var(--c-vert-foret);
  --display-acc:    var(--c-vert-foret);
  --h2-italic:      var(--c-vert-foret);
}

/* CaseOne : toujours sombre, surfaces graphite, accents gold (lumière de loupe), tampon bordeaux rare.
   ⚠️ Exception au "vert sauge dominant" — l'or "lumière de loupe" est la signature CaseOne
   (charte officielle), on ne touche pas. */
[data-surface="caseone"] {
  --bg:        var(--c-encre);
  --bg-soft:   var(--c-graphite);
  --bg-raised: #383a3c;
  --bg-paper:  #232325;
  --ink:       var(--c-papier-warm);
  --ink-dim:   #c0b9a5;
  --ink-mute:  #837b6a;
  --accent:        var(--c-or);          /* CTA, lumière de loupe charte (signature) */
  --accent-soft:   #d6ad65;
  --gold:           var(--c-or);
  --gold-soft:      #d6ad65;
  --link:           var(--c-or);
  --brand:          var(--c-or);
  --display-acc:    var(--c-or);          /* CaseOne = lumière de loupe */
  --h2-italic:      var(--c-or);
  --stamp:          var(--c-bordeaux);   /* DOSSIER OUVERT — rare */
  --line:      rgba(232, 221, 200, 0.10);
  --line-strong: rgba(232, 221, 200, 0.22);
}
:root[data-theme="light"] [data-surface="caseone"] {
  /* CaseOne reste sombre même en mode jour — c'est un dossier */
}

/* ---------- RESET ---------- */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; -webkit-font-smoothing: antialiased; }
body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-body);
  line-height: 1.55;
  overflow-x: hidden;
  transition: background-color .4s var(--ease-soft), color .4s var(--ease-soft);
  position: relative;
}
img, svg { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
ul, ol { list-style: none; }
::selection { background: var(--accent); color: var(--bg); }

/* ---------- BACKGROUND : papier granuleux fibreux ---------- */
/* Couche 1 : grain fin (fibres papier) */
body::before {
  content: '';
  position: fixed; inset: 0;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 600 600'><filter id='paper'><feTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='4' seed='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 0.7 0'/></filter><rect width='100%25' height='100%25' filter='url(%23paper)'/></svg>");
  opacity: 0.085;
  pointer-events: none;
  z-index: 1;
  mix-blend-mode: overlay;
}
:root[data-theme="light"] body::before {
  opacity: 0.13;
  mix-blend-mode: multiply;
}
[data-surface="caseone"] body::before { opacity: 0.10; }

/* Couche 2 : taches/variations de teinte papier (warm spots) */
body::after {
  content: '';
  position: fixed; inset: 0;
  background:
    radial-gradient(ellipse 65% 50% at 18% 22%, rgba(228, 192, 121, 0.025), transparent 55%),
    radial-gradient(ellipse 55% 45% at 82% 78%, rgba(160, 65, 31, 0.02), transparent 60%),
    radial-gradient(ellipse 90% 70% at 50% 110%, rgba(11, 22, 32, 0.18), transparent 65%);
  pointer-events: none;
  z-index: 1;
}
:root[data-theme="light"] body::after {
  background:
    radial-gradient(ellipse 65% 50% at 18% 22%, rgba(160, 65, 31, 0.03), transparent 55%),
    radial-gradient(ellipse 55% 45% at 82% 78%, rgba(140, 83, 13, 0.025), transparent 60%);
}

/* ---------- LAYOUT ---------- */
.container {
  max-width: var(--w-max);
  margin: 0 auto;
  padding: 0 var(--pad-x);
  position: relative;
  z-index: 2;
}
.section { padding: var(--pad-y) 0; position: relative; z-index: 2; }
.section + .section { border-top: 1px solid var(--line); }

/* ============================================================
   THREAD-LOGO — fil rouge cinématique en filigrane
   ------------------------------------------------------------
   Le logo OpenFrame vit derrière le contenu et morphe au scroll
   à travers 8 configs (cf. linkzen.js initThreadLogo).
   - Couleur via classes : is-tense (bordeaux), is-open (sauge),
     is-thread (or signature), is-gold (or engagement),
     is-foret (vert forêt LinkZen).
   - Opacité contrôlée via --logo-opacity (depuis JS, par section).
   - mix-blend-mode: screen sur dark / multiply sur light.
   ============================================================ */
.thread-logo {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 70vmin;
  height: 70vmin;
  pointer-events: none;
  z-index: 0;          /* derrière le contenu par défaut (data-depth="back") */
  color: var(--c-papier-warm);
  opacity: var(--logo-opacity, 0.10);
  /* Audit user 2026-05-10 : le logo apparaissait trop tard (transition
     opacity 1500ms = lag 1.5s sur le rendu vs le scroll). On raccourcit
     à 250ms — la lerp JS smooth déjà la valeur, la CSS n'a pas besoin
     d'un long easing. Couleur reste à 1500ms pour transition smooth
     entre sections (palette change). */
  transition: opacity 250ms ease-out,
              color 1500ms cubic-bezier(0.4, 0, 0.2, 1);
  will-change: opacity;
}
.thread-logo rect { fill: currentColor; }

/* DEPTH FRONT — le logo passe DEVANT le contenu (sections data-depth="front").
   Audit harmonie 2026-05-10 : on passe de mix-blend-mode: difference
   (trop agressif, inverse les couleurs) à mix-blend-mode: soft-light
   (subtle overlay qui préserve la lisibilité du texte). Opacity réduite
   à ×1.2 (vs 1.6 avant) pour rester chirurgical. */
.thread-logo.is-front {
  z-index: 5;
  opacity: calc(var(--logo-opacity, 0.10) * 1.2);
}
@supports (mix-blend-mode: soft-light) {
  .thread-logo.is-front { mix-blend-mode: soft-light; }
}
@supports not (mix-blend-mode: soft-light) {
  /* Fallback : opacité capée à 0.16 max pour rester subtle. */
  .thread-logo.is-front { opacity: min(0.16, calc(var(--logo-opacity, 0.10) * 1.0)); }
}

/* mix-blend-mode = bonus visuel (screen = lumineux sur dark). Si non supporté
   ou désactivé (hardware accel off, certains builds Chromium fork comme
   Comet/Brave), le logo reste visible via l'opacity seule. */
@supports (mix-blend-mode: screen) {
  .thread-logo { mix-blend-mode: screen; }
}

/* Variantes couleur — palette charte officielle (15 classes pour la
   bibliothèque 40 configs : identité/structure/mouvement/signes/cinéma/vivant) */
.thread-logo.is-tense  { color: var(--c-bordeaux); }      /* tension dramatique */
.thread-logo.is-open   { color: var(--c-vert-sauge); }    /* respiration */
.thread-logo.is-thread { color: var(--c-or); }            /* fil rouge or */
.thread-logo.is-gold   { color: var(--c-or); }            /* engagement */
.thread-logo.is-foret  { color: var(--c-vert-foret); }    /* marque LinkZen */
.thread-logo.is-stair  { color: var(--c-or); }            /* progression */
.thread-logo.is-arrow  { color: var(--c-vert-sauge); }    /* direction */
.thread-logo.is-cross  { color: var(--c-papier-warm); }   /* équilibre */
.thread-logo.is-wave   { color: var(--c-or); }            /* cycle */
.thread-logo.is-stars  { color: var(--c-papier-warm); }   /* constellation */
.thread-logo.is-deep   { color: var(--c-or); }            /* immersion */
.thread-logo.is-cinema { color: var(--c-papier-warm); }   /* large cinémascope */
.thread-logo.is-living { color: var(--c-or); }            /* vivant pulsant */
.thread-logo.is-breath { color: var(--c-papier-warm); }   /* respire */
.thread-logo.is-pulse  { color: var(--c-bordeaux); }      /* battement */
/* Aurora : gradient SVG (override fill via id="auroraGrad" dans defs) */
.thread-logo.is-aurora rect { fill: url(#auroraGrad); }

/* Halo lumineux subtil derrière le logo. Background gradient avec couleur
   explicite (currentColor dans gradient = bug sur certains forks Chromium,
   cf. Comet 2026-05). */
.thread-glow {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60vmin;
  height: 60vmin;
  pointer-events: none;
  z-index: 0;
  background: radial-gradient(ellipse at center, rgba(232, 221, 200, 0.5) 0%, transparent 60%);
  opacity: 0.04;
  filter: blur(40px);
  transition: opacity 1500ms ease;
}
@supports (mix-blend-mode: screen) {
  .thread-glow { mix-blend-mode: screen; }
}

/* Mode light — sans mix-blend-mode, color foncée + opacité réduite */
:root[data-theme="light"] .thread-logo {
  color: var(--c-vert-foret);
  opacity: calc(var(--logo-opacity, 0.10) * 0.6);
}
@supports (mix-blend-mode: multiply) {
  :root[data-theme="light"] .thread-logo { mix-blend-mode: multiply; }
}
:root[data-theme="light"] .thread-glow {
  display: none;
}

/* Reduced motion — pas de transitions */
@media (prefers-reduced-motion: reduce) {
  .thread-logo, .thread-glow { transition: none !important; }
}

/* Mobile — réduire la taille pour ne pas saturer le viewport */
@media (max-width: 700px) {
  .thread-logo { width: 90vmin; height: 90vmin; }
  .thread-glow { width: 80vmin; height: 80vmin; }
}

/* ---------- DOC CHROME : entête de section "spec sheet" ---------- */
.doc-row {
  display: grid;
  grid-template-columns: 120px 1fr;
  gap: 28px;
  align-items: baseline;
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
  margin-bottom: 36px;
}
.doc-row .doc-id {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.16em;
  color: var(--accent);
  text-transform: uppercase;
  white-space: nowrap;
}
.doc-row .doc-id strong {
  color: var(--ink);
  font-weight: 500;
  display: block;
  margin-top: 4px;
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
}
.doc-row .doc-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
@media (max-width: 720px) {
  .doc-row { grid-template-columns: 1fr; gap: 8px; }
}

/* ---------- TYPO : DISPLAY ----------
   Bricolage Grotesque pour les TITRES forts (display, h1, h3 amplifiés).
   Instrument Serif italique pour les h2 (charte) et chiffres ornementaux.
   Direction Awwwards 2026 : grotesque tendu + serif fragile en contrepoint.
   ---------------------------------------------------------------- */
.display {
  font-family: var(--display);
  font-weight: 540;
  font-stretch: 88%;                /* wdth axis Bricolage : 75-200 */
  font-optical-sizing: auto;
  font-variation-settings: "opsz" 96;
  font-size: var(--fs-mega);
  line-height: 0.84;
  letter-spacing: -0.035em;
  color: var(--ink);
  text-wrap: balance;
}
/* Accent display : signal couleur uniquement (typo héritée du parent grotesque)
   Anti-Claude : plus de saut serif italique, juste un changement de couleur. */
.display .accent {
  color: var(--display-acc);
}
.display .alt {
  font-family: var(--mono);
  font-weight: 400;
  font-size: 0.42em;
  letter-spacing: 0.02em;
  vertical-align: 0.35em;
  text-transform: uppercase;
  color: var(--ink-mute);
}

.h1 {
  font-family: var(--display);
  font-weight: 520;
  font-stretch: 90%;
  font-size: var(--fs-h1);
  line-height: 0.94;
  letter-spacing: -0.028em;
  color: var(--ink);
  text-wrap: balance;
}
/* Accent h1 : signal couleur uniquement (anti-Claude) */
.h1 .accent {
  color: var(--display-acc);
}

/* h2 — Bricolage Grotesque (anti-Claude : plus d'italique serif sur titres) */
.h2 {
  font-family: var(--display);
  font-weight: 540;
  font-stretch: 88%;
  font-size: var(--fs-h2);
  line-height: 1.0;
  letter-spacing: -0.02em;
  color: var(--ink);
  text-wrap: balance;
}
.h2 .accent {
  color: var(--accent);
}
[data-surface="caseone"] .h2 .accent { color: var(--ink); }
:root[data-theme="dark"] .h2 .accent { color: var(--accent); }

.h3 {
  font-family: var(--display);
  font-weight: 600;
  font-stretch: 92%;
  font-size: var(--fs-h3);
  line-height: 1.18;
  letter-spacing: -0.012em;
  color: var(--ink);
}

.lead {
  font-family: var(--sans);
  font-weight: 400;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--ink-dim);
  max-width: 60ch;
}
.lead strong { color: var(--ink); font-weight: 500; }
.lead .accent { color: var(--accent); font-weight: 500; }

.body { color: var(--ink-dim); line-height: 1.65; max-width: 64ch; }
.body strong { color: var(--ink); font-weight: 500; }
.body .accent { color: var(--accent); }

.small { font-size: var(--fs-small); color: var(--ink-mute); line-height: 1.55; }

.mono {
  font-family: var(--mono);
  font-size: var(--fs-tiny);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
}
.mono.acc { color: var(--accent); }

/* ---------- NAV ---------- */
.nav {
  position: fixed; inset: 0 0 auto 0;
  z-index: 100;
  padding: 0 var(--pad-x);
  height: 64px;
  display: flex; align-items: center; justify-content: space-between;
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--line-strong);
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.04em;
}
.nav-left { display: flex; align-items: center; gap: 0; }
.brand-mark {
  display: inline-flex; align-items: center; gap: 12px;
  padding: 8px 14px 8px 0;
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.04em;
  font-weight: 500;
  color: var(--ink);
  text-transform: uppercase;
  border-right: 1px solid var(--line-strong);
  margin-right: 14px;
}
/* Logo brand-mark : "LZ" à l'intérieur du cadre OpenFrame officiel
   asymétrique. Le SVG fait fond, le texte LZ est superposé centré. */
.brand-mark-logo {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 22px;
  color: var(--accent);
  flex-shrink: 0;
}
.brand-mark-logo svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  display: block;
}
.brand-mark-logo-text {
  position: relative;
  font-family: var(--mono);
  font-size: 9px;
  font-weight: 600;
  letter-spacing: 0;
  color: inherit;
  z-index: 1;
  line-height: 1;
}
.brand-mark:hover .brand-mark-logo { color: var(--c-or); transition: color 0.3s ease; }
.brand-sub {
  display: inline-block;
  padding-left: 4px;
  color: var(--ink-mute);
  font-size: 11px;
  letter-spacing: 0.16em;
}

.nav-links {
  display: flex; align-items: stretch; gap: 0;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.nav-links a {
  color: var(--ink-dim);
  position: relative;
  padding: 22px 18px;
  transition: color .25s, background-color .25s;
  display: inline-flex; align-items: center; gap: 8px;
}
.nav-links a::before {
  content: attr(data-num);
  font-size: 9px;
  color: var(--ink-mute);
  letter-spacing: 0.14em;
}
.nav-links a:hover { color: var(--ink); background: var(--bg-soft); }
.nav-links a.active { color: var(--accent); }
.nav-links a.active::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: -1px;
  height: 2px;
  background: var(--accent);
}
/* Quick Win — pastille distinguée (haut de funnel) */
.nav-links a.quick-win-link { color: var(--accent); position: relative; }
.nav-links a.quick-win-link::before { color: var(--accent); }
.nav-links a.quick-win-link::after {
  content: '·1h';
  font-size: 9px;
  letter-spacing: 0.06em;
  color: var(--ink-mute);
  margin-left: 4px;
  text-transform: none;
}
.nav-links a.quick-win-link:hover { background: color-mix(in srgb, var(--accent) 10%, transparent); }

.nav-right { display: flex; align-items: center; gap: 0; }
.theme-toggle {
  width: 64px; height: 64px;
  border: none;
  border-left: 1px solid var(--line-strong);
  display: inline-flex; align-items: center; justify-content: center;
  color: var(--ink-dim);
  transition: color .25s, background-color .25s;
}
.theme-toggle:hover { color: var(--accent); background: var(--bg-soft); }
.theme-toggle .icon-light { display: none; }
:root[data-theme="light"] .theme-toggle .icon-dark { display: none; }
:root[data-theme="light"] .theme-toggle .icon-light { display: inline-block; }

.nav-cta {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 22px;
  height: 64px;
  border-left: 1px solid var(--line-strong);
  background: var(--accent);
  color: var(--bg);
  display: inline-flex; align-items: center; gap: 10px;
  transition: background-color .25s;
}
.nav-cta:hover { background: var(--accent-soft); }
.nav-cta::before { content: '◆'; font-size: 10px; }

.burger {
  display: none;
  width: 64px; height: 64px;
  border-left: 1px solid var(--line-strong);
  align-items: center; justify-content: center;
}
.burger span { display: block; width: 22px; height: 1.5px; background: var(--ink); transition: transform .3s, opacity .3s; }
.burger span + span { margin-top: 6px; }

/* Live status dot dans la nav */
.nav-status {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 8px;
  padding: 0 18px;
  border-left: 1px solid var(--line-strong);
  height: 64px;
}
.nav-status::before {
  content: ''; width: 6px; height: 6px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 70%, transparent);
  animation: pulse 2.4s var(--ease-soft) infinite;
}
@keyframes pulse {
  0% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 50%, transparent); }
  70% { box-shadow: 0 0 0 8px color-mix(in srgb, var(--accent) 0%, transparent); }
  100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--accent) 0%, transparent); }
}

/* ---------- HERO ---------- */
.hero {
  min-height: 92vh;
  padding-top: 130px;
  padding-bottom: var(--pad-y);
  display: flex; flex-direction: column; justify-content: center;
  position: relative;
}
.hero::after {
  content: '';
  position: absolute; left: 0; right: 0; bottom: 0;
  height: 1px;
  background: linear-gradient(to right, transparent, var(--accent) 30%, var(--accent) 70%, transparent);
  opacity: .35;
}

.hero-row {
  display: grid; grid-template-columns: 120px 1fr;
  gap: 28px;
  margin-bottom: 24px;
  align-items: baseline;
  border-top: 1px solid var(--line-strong);
  padding-top: 18px;
}
@media (max-width: 720px) {
  .hero-row { grid-template-columns: 1fr; gap: 8px; }
}

.hero-display {
  margin: 36px 0 56px;
}

/* "Specsheet" sous le hero — façon plaque d'identification */
.specsheet {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
@media (max-width: 900px) { .specsheet { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .specsheet { grid-template-columns: 1fr; } }
.spec {
  padding: 22px 22px 24px;
  border-right: 1px solid var(--line);
  position: relative;
}
.spec:last-child { border-right: none; }
.spec .k {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 12px;
  display: flex; justify-content: space-between; align-items: center;
}
.spec .k::after {
  content: attr(data-i);
  color: var(--ink-mute);
  font-size: 9px;
}
.spec .v {
  font-family: var(--serif-display);
  font-stretch: 85%;
  font-weight: 400;
  font-size: 22px;
  line-height: 1.15;
  color: var(--ink);
  letter-spacing: -0.015em;
  margin-bottom: 6px;
}
.spec .d {
  font-size: 13px;
  color: var(--ink-mute);
  line-height: 1.5;
}

/* ---------- CASEFILE — case study à la fiche dossier ---------- */
.casefile {
  border: 1px solid var(--line-strong);
  background: var(--bg-paper);
  position: relative;
  box-shadow: 0 1px 0 rgba(11, 22, 32, 0.08), 0 12px 32px -16px rgba(11, 22, 32, 0.18);
}
:root[data-theme="dark"] .casefile {
  background: var(--bg-soft);
  box-shadow: 0 1px 0 rgba(11, 22, 32, 0.4), 0 16px 40px -20px rgba(0,0,0,0.6);
}
.casefile::before {
  /* coin pliure dossier en haut à droite */
  content: '';
  position: absolute;
  top: 0; right: 0;
  width: 28px; height: 28px;
  background: linear-gradient(225deg, var(--bg) 50%, transparent 50%);
  border-bottom: 1px solid var(--line-strong);
  border-left: 1px solid var(--line-strong);
}
.casefile-head {
  padding: 18px 28px;
  border-bottom: 1px solid var(--line-strong);
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  flex-wrap: wrap;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
}
.casefile-head .mono {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
}
.casefile-head .acc { color: var(--accent); font-weight: 600; }
.casefile-body { padding: 36px; }
@media (max-width: 720px) { .casefile-body { padding: 24px; } }
.casefile-foot {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px dashed var(--line-strong);
  font-size: 14px;
  color: var(--ink-dim);
}
.casefile-foot strong { color: var(--accent); font-weight: 600; }

/* ---------- VIZ — barres comparatives + marge hero ---------- */
.casefile-viz {
  display: grid;
  grid-template-columns: 1fr 280px;
  gap: 36px;
  align-items: stretch;
  padding: 28px 0;
  border-top: 2px solid var(--ink);
  border-bottom: 2px solid var(--ink);
  position: relative;
}
@media (max-width: 820px) {
  .casefile-viz { grid-template-columns: 1fr; gap: 28px; }
}
.viz-bars {
  display: flex;
  flex-direction: column;
  gap: 24px;
}
.bar-row {
  display: grid;
  grid-template-columns: 80px 1fr;
  gap: 24px;
  align-items: center;
}
@media (max-width: 520px) {
  .bar-row { grid-template-columns: 1fr; gap: 8px; }
}
.bar-label {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 600;
}
.bar-tracks {
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bar-line {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.bar {
  height: 28px;
  background: var(--ink);
  color: var(--bg);
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
  padding: 0 12px;
  position: relative;
  transition: width 0.6s cubic-bezier(.22,.8,.24,1);
}
.bar.dim { background: color-mix(in srgb, var(--ink) 35%, var(--bg-paper)); color: var(--ink); }
.bar.accent { background: var(--accent); color: var(--c-encre); }
.bar-num {
  font-family: var(--serif-display);
  font-weight: 460;
  font-stretch: 80%;
  font-size: 16px;
  letter-spacing: -0.01em;
}
.bar-tag {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-mute);
  padding-left: 2px;
}
.bar-delta {
  color: var(--ink-dim);
  font-weight: 600;
  letter-spacing: 0.08em;
}
.bar-delta.accent { color: var(--accent); }

/* Bloc marge ×1.6 — number hero */
.viz-margin {
  background: var(--c-encre);
  color: var(--c-papier-warm);
  padding: 32px 28px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 8px;
  position: relative;
  border: 1px solid var(--ink);
}
:root[data-theme="dark"] .viz-margin {
  background: var(--c-encre);
  border: 1px solid var(--accent);
}
.viz-margin::before {
  content: 'CONCLUSION';
  position: absolute;
  top: 12px; right: 16px;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.24em;
  color: var(--accent);
  font-weight: 600;
}
.vm-tag {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-papier-warm);
  opacity: 0.7;
}
.vm-num {
  font-family: var(--serif-display);
  font-stretch: 75%;
  font-weight: 380;
  font-size: clamp(96px, 12vw, 140px);
  line-height: 0.85;
  letter-spacing: -0.045em;
  color: var(--c-papier-warm);
  margin: 4px 0 8px;
}
.vm-num .accent { color: var(--accent); font-style: normal; }
.vm-foot {
  font-family: var(--sans);
  font-size: 13px;
  color: var(--c-papier-warm);
  opacity: 0.85;
  line-height: 1.45;
  max-width: 22ch;
}
.vm-foot strong { color: var(--accent); font-weight: 600; opacity: 1; }

/* ---------- TICKER (mono, sec, sans italique) ---------- */
.ticker {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  overflow: hidden;
  padding: 16px 0;
  white-space: nowrap;
  position: relative;
  z-index: 2;
  background: var(--bg-soft);
}
.ticker-track {
  display: inline-flex; gap: 0;
  animation: tickerScroll 38s linear infinite;
  white-space: nowrap;
}
.ticker-track > span {
  font-family: var(--mono);
  font-size: 13px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  color: var(--ink-dim);
  display: inline-flex; align-items: center; gap: 28px;
  padding: 0 22px;
  border-right: 1px solid var(--line);
}
.ticker-track > span::before {
  content: attr(data-tag) ' ';
  color: var(--accent);
  font-size: 11px;
  letter-spacing: 0.22em;
  font-weight: 500;
}
@keyframes tickerScroll {
  from { transform: translateX(0); }
  to   { transform: translateX(-50%); }
}

/* ---------- MODULE CARDS (remplace bento) ---------- */
.modules {
  display: grid; gap: 0;
  grid-template-columns: repeat(12, 1fr);
  border-top: 1px solid var(--line-strong);
  border-left: 1px solid var(--line);
}
.mod {
  padding: 32px 32px 36px;
  position: relative;
  border-right: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  transition: background-color .35s var(--ease-out);
  min-height: 220px;
  display: flex; flex-direction: column;
  background: transparent;
}
.mod:hover { background: var(--bg-soft); }
.mod-id {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 18px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.mod-id::after {
  content: attr(data-i);
  color: var(--ink-mute);
  font-size: 9px;
  letter-spacing: 0.18em;
}
.mod-title {
  font-family: var(--display);
  font-stretch: 92%;
  font-weight: 540;
  font-size: clamp(20px, 1.8vw, 26px);
  line-height: 1.08;
  letter-spacing: -0.018em;
  color: var(--ink);
  margin-bottom: 14px;
}
.mod-title .accent {
  color: var(--accent);
}
.mod-body { font-size: 13.5px; line-height: 1.55; color: var(--ink-dim); flex: 1; }
.mod-body strong { color: var(--ink); font-weight: 500; }
.mod-foot {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
  display: flex; justify-content: space-between; align-items: center;
  transition: color .25s;
}
.mod-foot::after { content: '→'; transition: transform .25s; }
.mod:hover .mod-foot { color: var(--accent-soft); }
.mod:hover .mod-foot::after { transform: translateX(6px); }

.span-3 { grid-column: span 3; }
.span-4 { grid-column: span 4; }
.span-5 { grid-column: span 5; }
.span-6 { grid-column: span 6; }
.span-7 { grid-column: span 7; }
.span-8 { grid-column: span 8; }
.span-9 { grid-column: span 9; }
.span-12 { grid-column: span 12; }
@media (max-width: 1100px) { .span-3, .span-4, .span-5, .span-7, .span-8, .span-9 { grid-column: span 6; } }
@media (max-width: 720px) { .modules > * { grid-column: span 12 !important; } }

.mod.feat { background: var(--bg-paper); }
.mod.feat .mod-title { color: var(--ink); }

/* ---------- BIG NUMBERS (display) — chiffres choc ---------- */
.bignums {
  display: grid; grid-template-columns: repeat(4, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
@media (max-width: 900px) { .bignums { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .bignums { grid-template-columns: 1fr; } }
.bignum {
  padding: 36px 26px 32px;
  border-right: 1px solid var(--line);
  position: relative;
  display: flex; flex-direction: column;
  min-height: 220px;
}
.bignum:last-child { border-right: none; }
.bignum .head {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 24px;
  display: flex; justify-content: space-between;
}
.bignum .head::after {
  content: attr(data-i);
  color: var(--ink-mute);
  font-size: 9px;
}
.bignum .num {
  font-family: var(--serif-display);
  font-stretch: 75%;
  font-weight: 380;
  font-size: clamp(60px, 7.5vw, 110px);
  line-height: 0.9;
  letter-spacing: -0.045em;
  color: var(--ink);
  margin-bottom: auto;
}
.bignum .num .accent { color: var(--accent); }
.bignum .lbl {
  font-size: 13px;
  line-height: 1.5;
  color: var(--ink-dim);
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px dashed var(--line-strong);
}
.bignum .lbl strong { color: var(--ink); font-weight: 500; }
.bignum .lbl .accent { color: var(--accent); font-weight: 500; }

/* ---------- BUTTONS ---------- */
.btn {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 14px 22px;
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  font-weight: 500;
  border: 1.5px solid var(--accent);
  color: var(--bg);
  background: var(--accent);
  border-radius: 0;
  transition: background-color .25s, color .25s, gap .25s;
}
.btn:hover { background: var(--accent-soft); border-color: var(--accent-soft); gap: 16px; }
.btn::before { content: '◆'; font-size: 10px; opacity: .8; }
.btn-ghost {
  background: transparent;
  color: var(--ink);
  border-color: var(--line-strong);
}
.btn-ghost:hover { color: var(--accent); border-color: var(--accent); background: transparent; }
.btn-ghost::before { color: var(--accent); }
.btn .arrow { display: inline-block; transition: transform .25s; }
.btn:hover .arrow { transform: translateX(4px); }

/* ---------- VALUES — grid horizontal "principles" ---------- */
.principles {
  display: grid; grid-template-columns: repeat(5, 1fr);
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
}
@media (max-width: 980px) { .principles { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 520px) { .principles { grid-template-columns: 1fr; } }
.principle {
  padding: 32px 24px 36px;
  border-right: 1px solid var(--line);
  position: relative;
  transition: background-color .35s;
}
.principle:last-child { border-right: none; }
.principle:hover { background: var(--bg-soft); }
.principle .head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 28px;
  display: flex; justify-content: space-between; align-items: baseline;
}
.principle .head::after {
  content: attr(data-i);
  color: var(--ink-mute);
  font-size: 9px;
  letter-spacing: 0.18em;
}
.principle .title {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 560;
  font-size: clamp(24px, 2vw, 30px);
  line-height: 0.98;
  letter-spacing: -0.022em;
  color: var(--ink);
  margin-bottom: 14px;
}
.principle .title .accent {
  color: var(--accent);
}
.principle .body { font-size: 13px; line-height: 1.55; color: var(--ink-dim); }

/* ---------- BRAND SPLIT (LinkZen → OpenFrame / CaseOne) ---------- */
.split {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 0;
  border-top: 1px solid var(--line-strong);
}
@media (max-width: 900px) { .split { grid-template-columns: 1fr; } }
.split-side {
  padding: 56px 48px 48px;
  position: relative;
  border-right: 1px solid var(--line);
  transition: background-color .4s var(--ease-soft);
  display: flex; flex-direction: column; justify-content: space-between;
  min-height: 580px;
  overflow: hidden;
}
@media (max-width: 900px) { .split-side { padding: 48px 28px; min-height: auto; } }
.split-side:last-child { border-right: none; }
.split-side:hover { background: var(--bg-soft); }
.split-side[data-brand="caseone"] {
  background: var(--c-graphite);
  color: var(--c-papier-warm);
  --ink: var(--c-papier-warm); --ink-dim: #c0b9a5; --ink-mute: #837b6a;
  --accent: var(--c-or); --accent-soft: #d6ad65;
  --stamp: var(--c-bordeaux);
  --line: rgba(232,221,200,.10); --line-strong: rgba(232,221,200,.22);
}

.split-side .roman {
  position: absolute; top: 32px; right: 36px;
  font-family: var(--serif-display); font-stretch: 70%; font-weight: 380;
  font-size: clamp(120px, 14vw, 180px);
  color: var(--accent);
  line-height: 0.85;
  opacity: .15;
  pointer-events: none;
}
.split-side .head {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
  margin-bottom: 26px;
  display: flex; align-items: center; gap: 12px;
}
.split-side .head::before { content: attr(data-num); color: var(--ink-mute); }
.split-name {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 540;
  font-size: clamp(48px, 6vw, 84px);
  line-height: 0.94;
  letter-spacing: -0.032em;
  color: var(--ink);
  margin-bottom: 22px;
}
.split-name .accent {
  color: var(--accent);
}
.split-tag {
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.45;
  color: var(--ink-dim);
  margin-bottom: 36px;
  max-width: 38ch;
}
.split-tag strong { color: var(--ink); font-weight: 500; }
.split-list {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  display: flex; flex-direction: column; gap: 4px;
  margin-bottom: 36px;
  border-top: 1px dashed var(--line-strong);
  padding-top: 20px;
}
.split-list li {
  display: flex; justify-content: space-between; align-items: baseline;
  padding: 8px 0;
  border-bottom: 1px dashed var(--line);
}
.split-list li::before {
  content: counter(li, decimal-leading-zero);
  counter-increment: li;
  color: var(--accent);
  font-weight: 600;
}
.split-list { counter-reset: li; }
.split-list li::after { content: '→'; color: var(--ink-mute); }
.split-list li span { flex: 1; padding: 0 12px; color: var(--ink-dim); }

.split-side[data-brand="caseone"] .split-name {
  font-family: var(--type);
  letter-spacing: -0.005em;
  font-weight: 400;
  font-stretch: 100%;
}
.split-side[data-brand="caseone"] .split-name .accent {
  color: var(--c-or);
}

/* ---------- SABLIER — HOURGLASS INTERACTIF (signature OpenFrame) ---------- */
/* Paliers en parallélogramme · grain de sable corail/or qui tombe au survol
   · cycle ambiant 4s · footer narratif · tags N0..N5 sur le bord externe.
   Couleurs : pilotées par --accent (gold OpenFrame light/dark) charte. */

.sablier-section { position: relative; }

/* Header 3-col éditorial */
.hg-header {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: end;
  gap: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 32px;
}
@media (max-width: 900px) {
  .hg-header { grid-template-columns: 1fr; text-align: center; gap: 20px; }
}
.hg-eyebrow {
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 10px;
}
@media (max-width: 900px) { .hg-eyebrow { justify-content: center; } }
.hg-dot {
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--accent);
  box-shadow: 0 0 8px color-mix(in srgb, var(--accent) 50%, transparent);
  animation: hg-blink 2.4s ease-in-out infinite;
}
@keyframes hg-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}
.hg-title {
  font-family: var(--display);
  font-size: clamp(40px, 6vw, 72px);
  font-weight: 540;
  font-stretch: 90%;
  line-height: 0.94;
  letter-spacing: -0.022em;
  text-align: center;
  color: var(--ink);
}
.hg-title em {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--h2-italic);
  font-weight: 400;
  font-stretch: 100%;
}
.hg-intro {
  font-size: 14px;
  line-height: 1.6;
  color: var(--ink-dim);
  max-width: 320px;
  margin-left: auto;
}
.hg-intro strong { color: var(--ink); font-weight: 500; }
.hg-intro .accent { color: var(--accent); font-weight: 500; }
@media (max-width: 900px) { .hg-intro { margin: 0 auto; } }

/* Column headers */
.hg-col-headers {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  margin-bottom: 16px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.25em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
}
.hg-col-h.left { text-align: right; padding-right: 24px; }
.hg-col-h.center { text-align: center; }
.hg-col-h.right { text-align: left; padding-left: 24px; }
@media (max-width: 900px) {
  .hg-col-headers { grid-template-columns: 1fr 60px 1fr; }
  .hg-col-h.left { padding-right: 12px; }
  .hg-col-h.right { padding-left: 12px; }
}

/* Hourglass layout */
.hourglass {
  display: grid;
  grid-template-columns: 1fr 110px 1fr;
  gap: 0;
  position: relative;
}
@media (max-width: 900px) { .hourglass { grid-template-columns: 1fr 60px 1fr; } }

.pyramid-hg {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.pyramid-hg.left  { align-items: flex-end; }
.pyramid-hg.right { align-items: flex-start; }

/* Bricks — parallélogramme widths */
.brick {
  height: 64px;
  padding: 0 22px;
  display: flex;
  align-items: center;
  background: color-mix(in srgb, var(--ink) 5%, transparent);
  border: 1px solid var(--line);
  cursor: pointer;
  transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
  font: inherit; color: inherit;
  text-align: left;
}
.brick::before {
  /* glass highlight */
  content: '';
  position: absolute; inset: 0;
  background: linear-gradient(135deg, color-mix(in srgb, var(--bg) 25%, transparent) 0%, transparent 50%);
  pointer-events: none;
  opacity: 0.5;
}
.pyramid-hg.left  .brick { justify-content: flex-end; text-align: right; }
.pyramid-hg.right .brick { justify-content: flex-start; text-align: left; }

/* widths sablier (left widens DOWN, right widens UP) */
.pyramid-hg.left  .brick[data-level="5"] { width: 38%; }
.pyramid-hg.left  .brick[data-level="4"] { width: 50%; }
.pyramid-hg.left  .brick[data-level="3"] { width: 62%; }
.pyramid-hg.left  .brick[data-level="2"] { width: 74%; }
.pyramid-hg.left  .brick[data-level="1"] { width: 86%; }
.pyramid-hg.left  .brick[data-level="0"] { width: 98%; }
.pyramid-hg.right .brick[data-level="5"] { width: 98%; }
.pyramid-hg.right .brick[data-level="4"] { width: 86%; }
.pyramid-hg.right .brick[data-level="3"] { width: 74%; }
.pyramid-hg.right .brick[data-level="2"] { width: 62%; }
.pyramid-hg.right .brick[data-level="1"] { width: 50%; }
.pyramid-hg.right .brick[data-level="0"] { width: 38%; }

.brick .content {
  display: flex; flex-direction: column; gap: 0;
  position: relative; z-index: 2;
}
.pyramid-hg.left  .content { align-items: flex-end; }
.pyramid-hg.right .content { align-items: flex-start; }

.brick-label {
  font-family: var(--display);
  font-size: 22px;
  font-weight: 540;
  font-stretch: 90%;
  line-height: 1.1;
  color: var(--ink);
  transition: color 0.35s ease;
}
.brick-label em {
  font-family: var(--serif-display);
  font-style: italic;
  color: var(--h2-italic);
  font-weight: 400;
  font-stretch: 100%;
  letter-spacing: -0.005em;
  transition: color 0.35s ease;
}
.brick .sub {
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--ink-mute);
  font-weight: 500;
  margin-top: 2px;
  transition: color 0.35s ease;
}

/* Tags N0..N5 sur le bord externe */
.brick .tag {
  position: absolute;
  width: 38px; height: 38px;
  background: var(--bg);
  border: 1.5px solid var(--accent);
  color: var(--accent);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.05em;
  transition: all 0.35s ease;
  z-index: 3;
}
.pyramid-hg.left  .brick .tag { left:  -19px; top: 50%; transform: translateY(-50%); }
.pyramid-hg.right .brick .tag { right: -19px; top: 50%; transform: translateY(-50%); }

/* Axe central — chiffres romains + ligne fil */
.axis {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
}
.axis-cell {
  height: 64px;
  width: 100%;
  display: flex; align-items: center; justify-content: center;
  position: relative;
  z-index: 2;
}
.axis-cell .roman {
  font-family: var(--serif-display);
  font-size: 28px;
  font-weight: 460;
  font-stretch: 90%;
  color: var(--ink);
  transition: all 0.35s ease;
  line-height: 1;
}
.axis::before {
  content: '';
  position: absolute;
  top: 0; bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 1px;
  background: linear-gradient(180deg, transparent 0%, var(--line-strong) 8%, var(--line-strong) 92%, transparent 100%);
  z-index: 1;
}

/* Grain de sable — le killer move */
.grain {
  position: absolute;
  left: 50%; transform: translateX(-50%);
  width: 8px; height: 8px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow:
    0 0 16px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 4px var(--accent);
  z-index: 4;
  pointer-events: none;
  opacity: 0;
  top: -12px;
  transition: top 0.85s cubic-bezier(0.5, 0, 0.5, 1), opacity 0.3s ease-out;
}

/* ACTIVE state */
.brick.active {
  background: var(--accent);
  border-color: var(--accent);
  box-shadow:
    0 12px 32px color-mix(in srgb, var(--accent) 35%, transparent),
    0 0 0 1px var(--accent);
  transform: translateY(-2px);
}
.brick.active::before { opacity: 0.15; }
.brick.active .brick-label,
.brick.active .brick-label em,
.brick.active .sub { color: var(--c-encre); }
.brick.active .tag {
  background: var(--c-encre);
  color: var(--accent);
  border-color: var(--c-encre);
  transform: translateY(-50%) scale(1.15);
}
.axis-cell.active .roman {
  color: var(--accent);
  transform: scale(1.4);
  font-weight: 500;
}

/* DIM others when one is active */
.hourglass.has-active .brick:not(.active),
.hourglass.has-active .axis-cell:not(.active) .roman {
  opacity: 0.32;
}

/* Hover (when nothing is forced active) */
.brick:not(.active):hover {
  background: color-mix(in srgb, var(--ink) 10%, transparent);
  border-color: var(--line-strong);
}
.brick:not(.active):hover .brick-label em { color: var(--accent); }

/* Footer narratif */
.hg-footer {
  margin-top: 36px;
  padding: 28px 36px;
  background: color-mix(in srgb, var(--ink) 6%, transparent);
  border-left: 3px solid var(--accent);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 36px;
  align-items: center;
  min-height: 100px;
}
@media (max-width: 900px) {
  .hg-footer { grid-template-columns: 1fr; gap: 14px; text-align: center; padding: 20px; }
}
.hg-footer-num {
  /* Chiffre romain palier — reste en serif comme signe (pas un mot),
     mais en upright (pas italique, anti-Claude) */
  font-family: var(--serif-display);
  font-size: clamp(48px, 6vw, 72px);
  font-weight: 400;
  font-style: normal;
  color: var(--accent);
  line-height: 1;
  transition: opacity 0.18s ease;
  min-width: 60px;
}
.hg-footer-text {
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  transition: opacity 0.18s ease;
}
/* PATCH anti-Claude : le <strong> ne déclenche plus une bascule de
   typographie (pas d'Instrument Serif italique en punchline) — juste
   un signal couleur + weight modéré, dans la même chasse que le body */
.hg-footer-text strong {
  color: var(--accent);
  font-weight: 600;
  font-family: inherit;
  font-style: normal;
  font-size: inherit;
  letter-spacing: inherit;
}
/* CTA palier — version ultra-discrète (audit user 2026-05-09 :
   "trop Claude la bordure à droite"). Fini souligné + couleur
   accent visible. Texte muted simple, arrow qui apparaît au hover. */
.hg-footer-cta {
  font-family: var(--sans);
  font-size: 13px;
  letter-spacing: 0;
  text-transform: none;
  color: var(--ink-mute);
  font-weight: 400;
  border: none;
  padding: 0;
  background: transparent;
  white-space: nowrap;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: color 0.25s ease, gap 0.25s var(--ease-out, cubic-bezier(0.22, 1, 0.36, 1));
}
.hg-footer-cta::after {
  content: '→';
  display: inline-block;
  opacity: 0.5;
  transition: transform 0.25s ease, opacity 0.25s ease;
}
.hg-footer-cta:hover {
  background: transparent;
  color: var(--ink);
  gap: 10px;
}
.hg-footer-cta:hover::after {
  opacity: 1;
  transform: translateX(2px);
}
@media (max-width: 900px) {
  .hg-footer-cta { justify-self: center; }
}

/* Mobile — bricks plus compactes */
@media (max-width: 900px) {
  .brick { height: 52px; padding: 0 14px; }
  .brick-label { font-size: 14px; }
  .brick .sub { font-size: 7px; }
  .brick .tag { width: 28px; height: 28px; font-size: 8px; }
  .pyramid-hg.left  .brick .tag { left:  -14px; }
  .pyramid-hg.right .brick .tag { right: -14px; }
  .axis-cell { height: 52px; }
  .axis-cell .roman { font-size: 20px; }
}

/* ---------- DIAGNOSTIC HUB ---------- */
.diag-hub {
  display: grid; grid-template-columns: 1.1fr 1fr; gap: 64px;
  align-items: stretch;
  margin-top: 36px;
  border-top: 1px solid var(--line-strong);
  padding-top: 32px;
}
@media (max-width: 900px) { .diag-hub { grid-template-columns: 1fr; gap: 32px; } }

.diag-hub-visual {
  position: relative;
  aspect-ratio: 1.05 / 1;
  border: 1px solid var(--line-strong);
  background: var(--bg-paper);
  display: flex; align-items: center; justify-content: center;
  overflow: hidden;
}
.diag-hub-visual::before {
  content: '';
  position: absolute; inset: 0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size: 36px 36px;
  opacity: .8;
}
.diag-hub-visual::after {
  content: 'DIAG.SYS / Ω-1';
  position: absolute; top: 16px; left: 18px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  color: var(--accent);
  text-transform: uppercase;
}
.diag-circle {
  width: 70%; aspect-ratio: 1; border-radius: 50%;
  border: 1.5px dashed var(--accent);
  position: relative;
  animation: rotate 80s linear infinite;
}
.diag-circle .node {
  position: absolute;
  width: 14px; height: 14px;
  background: var(--accent);
  border-radius: 50%;
  box-shadow: 0 0 0 6px color-mix(in srgb, var(--accent) 18%, transparent);
}
.diag-circle .node:nth-child(1) { top: -7px; left: 50%; transform: translateX(-50%); }
.diag-circle .node:nth-child(2) { right: -7px; top: 50%; transform: translateY(-50%); }
.diag-circle .node:nth-child(3) { bottom: -7px; left: 50%; transform: translateX(-50%); }
.diag-circle .node:nth-child(4) { left: -7px; top: 50%; transform: translateY(-50%); }
.diag-circle .core {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  font-family: var(--serif-display); font-stretch: 75%; font-weight: 380;
  font-size: clamp(40px, 5vw, 72px);
  letter-spacing: -0.04em;
  color: var(--ink);
  animation: rotate 80s linear infinite reverse;
}
.diag-circle .core small {
  display: block;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.2em;
  font-weight: 500;
  color: var(--accent);
  margin-top: 4px;
}
@keyframes rotate { from { transform: rotate(0); } to { transform: rotate(360deg); } }

/* ---------- DOSSIER (CaseOne — entête de fichier) ---------- */
.dossier-stamp {
  position: relative;
  display: inline-flex; align-items: center;
  font-family: var(--mono);
  font-size: 11px;
  letter-spacing: 0.22em;
  color: var(--c-bordeaux);
  text-transform: uppercase;
  padding: 8px 14px;
  border: 2px solid var(--c-bordeaux);
  margin-bottom: 28px;
  transform: rotate(-2deg);
  background: color-mix(in srgb, var(--c-bordeaux) 8%, transparent);
}
[data-surface="caseone"] .dossier-stamp {
  border-color: color-mix(in srgb, var(--c-bordeaux) 75%, var(--c-papier-warm));
  color: var(--c-papier-warm);
  background: color-mix(in srgb, var(--c-bordeaux) 40%, transparent);
}

/* CaseOne typewriter override */
[data-surface="caseone"] .display,
[data-surface="caseone"] .h1,
[data-surface="caseone"] .h2 {
  font-family: var(--type);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 0.98;
}
[data-surface="caseone"] .display .accent,
[data-surface="caseone"] .h1 .accent,
[data-surface="caseone"] .h2 .accent {
  color: var(--c-or);
}
[data-surface="caseone"] .mod-title,
[data-surface="caseone"] .principle .title,
[data-surface="caseone"] .step-label,
[data-surface="caseone"] .sd-content h3,
[data-surface="caseone"] .spec .v,
[data-surface="caseone"] .bignum .num {
  font-family: var(--type);
  font-stretch: 100%;
  font-weight: 400;
  letter-spacing: -0.005em;
}

/* ---------- FOOTER ---------- */
.footer {
  padding: 80px var(--pad-x) 36px;
  border-top: 1px solid var(--line-strong);
  position: relative; z-index: 2;
  background: var(--bg);
}
.footer-grid {
  max-width: var(--w-max); margin: 0 auto 64px;
  display: grid; grid-template-columns: 2fr 1fr 1fr 1fr; gap: 40px;
  border-top: 1px solid var(--line);
  padding-top: 48px;
}
@media (max-width: 900px) { .footer-grid { grid-template-columns: 1fr 1fr; } }
@media (max-width: 520px) { .footer-grid { grid-template-columns: 1fr; gap: 32px; } }
.footer-mark {
  font-family: var(--display);
  font-stretch: 88%;
  font-weight: 540;
  font-size: 36px;
  letter-spacing: -0.024em;
  color: var(--ink);
  margin-bottom: 14px;
  line-height: 0.95;
  display: flex;
  align-items: center;
  gap: 16px;
}
.footer-mark-frame {
  flex-shrink: 0;
  color: var(--accent);
  transition: color 0.4s var(--ease-out, ease);
}
.footer-mark:hover .footer-mark-frame {
  color: var(--gold);
}
.footer-tag {
  font-family: var(--sans);
  font-size: 14px;
  color: var(--ink-dim);
  max-width: 38ch;
  line-height: 1.55;
}
.footer-col h5 {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--accent);
  margin-bottom: 22px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--line-strong);
}
.footer-col ul { display: flex; flex-direction: column; gap: 12px; }
.footer-col li a {
  font-family: var(--sans); font-size: 13.5px;
  color: var(--ink-dim);
  transition: color .25s, transform .25s var(--ease-out);
  display: inline-flex; align-items: center; gap: 6px;
}
.footer-col li a::before {
  content: '→';
  font-family: var(--mono);
  color: var(--accent);
  opacity: 0;
  transition: opacity .25s, transform .25s;
  transform: translateX(-4px);
}
.footer-col li a:hover { color: var(--ink); }
.footer-col li a:hover::before { opacity: 1; transform: translateX(0); }
.footer-bot {
  max-width: var(--w-max); margin: 0 auto;
  padding-top: 28px; border-top: 1px solid var(--line);
  display: flex; justify-content: space-between; align-items: center;
  font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em;
  color: var(--ink-mute); text-transform: uppercase;
  flex-wrap: wrap; gap: 16px;
}
.footer-bot .acc { color: var(--accent); }

/* ---------- REVEAL ON SCROLL ---------- */
.reveal {
  opacity: 0;
  transform: translateY(22px);
  transition: opacity .8s var(--ease-out), transform .8s var(--ease-out);
  /* Failsafe : si l'IntersectionObserver ne fire pas (forks Chromium
     type Comet, navigateurs anciens), anim auto à 3s post-load pour
     que tout le contenu reste visible. .reveal.in (JS) reprend la
     main quand il s'applique avant 3s, désactivant l'animation. */
  animation: reveal-failsafe 0.8s var(--ease-out) 3s forwards;
}
.reveal.in {
  opacity: 1;
  transform: translateY(0);
  animation: none;
}
@keyframes reveal-failsafe {
  to { opacity: 1; transform: translateY(0); }
}
.reveal[data-stagger="2"] { transition-delay: .12s; }
.reveal[data-stagger="3"] { transition-delay: .24s; }
.reveal[data-stagger="4"] { transition-delay: .36s; }

/* Char by char reveal pour le hero display */
.split-line { overflow: hidden; display: block; }
.split-line span { display: inline-block; transform: translateY(110%); transition: transform .9s var(--ease-out); }
.reveal.in .split-line span { transform: translateY(0); }
.reveal.in .split-line:nth-child(2) span { transition-delay: .15s; }
.reveal.in .split-line:nth-child(3) span { transition-delay: .3s; }

/* ---------- ACCESSIBILITY / motion ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  html { scroll-behavior: auto; }
  .reveal { opacity: 1; transform: none; }
  .split-line span { transform: none; }
}

/* ---------- MOBILE NAV ---------- */
@media (max-width: 820px) {
  .nav-links, .nav-status { display: none; }
  .burger { display: none; }
  .nav-cta { display: none; }
  .theme-toggle { width: 56px; height: 64px; }
  .nav-mobile {
    position: fixed; inset: 0;
    background: var(--bg);
    z-index: 99;
    padding: 100px var(--pad-x) 40px;
    transform: translateY(-100%);
    visibility: hidden;
    transition: transform .45s var(--ease-out), visibility 0s linear .45s;
    display: flex; flex-direction: column; gap: 0;
    border-top: 1px solid var(--line-strong);
  }
  .nav-mobile.open {
    transform: translateY(0);
    visibility: visible;
    transition: transform .45s var(--ease-out), visibility 0s linear 0s;
  }
  .nav-mobile a {
    font-family: var(--serif-display);
    font-stretch: 80%; font-weight: 400;
    font-size: clamp(36px, 8vw, 60px);
    color: var(--ink);
    letter-spacing: -0.03em;
    padding: 18px 0;
    border-bottom: 1px solid var(--line-strong);
    display: flex; justify-content: space-between; align-items: baseline;
  }
  .nav-mobile a::after {
    content: attr(data-num);
    font-family: var(--mono);
    font-size: 12px; letter-spacing: 0.18em;
    color: var(--accent);
    font-weight: 500;
  }
  .nav-mobile a .accent { color: var(--accent); }
}
.nav-mobile { display: none; }
@media (max-width: 820px) { .nav-mobile { display: flex; } }

/* ---------- SAFETY: pyramid full-width on mobile ---------- */
@media (max-width: 980px) {
  .pyramid > .step { width: 100% !important; }
}

/* ---------- HELPERS ---------- */
.flow > * + * { margin-top: 22px; }
.flow-lg > * + * { margin-top: 36px; }
.cta-row {
  display: flex; gap: 14px; flex-wrap: wrap;
  margin-top: 40px;
}
.cluster {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
}

/* Selection card final CTA */
.cta-final {
  border-top: 1px solid var(--line-strong);
  border-bottom: 1px solid var(--line-strong);
  padding: 64px 0;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 56px;
  align-items: center;
}
@media (max-width: 720px) {
  .cta-final { grid-template-columns: 1fr; gap: 24px; padding: 48px 0; }
}
.cta-final h2 {
  font-family: var(--display);
  font-stretch: 85%;
  font-weight: 540;
  font-size: clamp(40px, 7vw, 96px);
  line-height: 0.92;
  letter-spacing: -0.034em;
}
.cta-final h2 .accent {
  font-family: var(--serif-display);
  font-style: italic;
  font-weight: 400;
  color: var(--accent);
  font-stretch: 100%;
}
[data-surface="caseone"] .cta-final h2 {
  font-family: var(--type); font-stretch: 100%;
}

/* ---------- DIVIDER MONO ---------- */
.divider {
  display: flex; align-items: center; gap: 14px;
  margin: 28px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.24em;
  color: var(--ink-mute);
  text-transform: uppercase;
}
.divider::before, .divider::after {
  content: ''; flex: 1; height: 1px; background: var(--line-strong);
}