/* =========================================================
   UKRAINE 1991–2026 · LES DEUX NARRATIFS — dossier spécial
   Concept : la ligne de faille. Un fait, deux lectures.
   ========================================================= */

/* ---------- 1. Tokens ---------- */
:root{
  /* papier / encre */
  --paper:   oklch(0.955 0.013 84);
  --paper-2: oklch(0.925 0.017 82);
  --ink:     oklch(0.21 0.012 60);
  --ink-2:   oklch(0.36 0.012 60);
  --ink-3:   oklch(0.50 0.012 60);
  --ink-4:   oklch(0.66 0.010 60);
  --rule:    oklch(0.21 0.012 60 / 0.12);
  --rule-2:  oklch(0.21 0.012 60 / 0.06);

  /* nuit (ouvertures d'acte, moments de bascule) */
  --night:     oklch(0.165 0.008 60);
  --night-2:   oklch(0.21 0.009 60);
  --night-ink: oklch(0.93 0.012 84);
  --night-dim: oklch(0.66 0.010 70);
  --night-rule: oklch(0.93 0.012 84 / 0.12);

  /* les deux récits */
  --west: oklch(0.50 0.105 252);   /* encre bleue — Kyiv & capitales occidentales */
  --east: oklch(0.53 0.135 34);    /* rouille — Moscou */
  --west-n: oklch(0.72 0.09 252);  /* variantes lisibles sur nuit */
  --east-n: oklch(0.72 0.12 40);

  /* type */
  --f-display: 'Archivo', 'Arial Narrow', sans-serif;
  --f-text: 'Newsreader', Georgia, 'Times New Roman', serif;
  --f-mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;

  --t-body: clamp(1.125rem, 0.35vw + 1.03rem, 1.3rem);
  --t-lead: clamp(1.3rem, 0.7vw + 1.1rem, 1.7rem);
  --t-dek:  clamp(1.4rem, 1.4vw + 1rem, 2.35rem);
  --t-h2:   clamp(2.7rem, 6.4vw, 7rem);
  --t-mono: 0.72rem;

  /* espace */
  --gutter: clamp(16px, 4vw, 56px);
  --rail-w: 0px;
  --s-1: .5rem; --s-2: 1rem; --s-3: 1.5rem; --s-4: 2.5rem; --s-5: 4rem; --s-6: 7rem; --s-7: 11rem;

  /* mouvement */
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --ease-io: cubic-bezier(0.76, 0, 0.24, 1);
  --d-s: 250ms; --d-m: 450ms; --d-l: 900ms;

  color-scheme: light;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:   oklch(0.19 0.009 70);
    --paper-2: oklch(0.225 0.010 70);
    --ink:     oklch(0.91 0.012 84);
    --ink-2:   oklch(0.80 0.012 84);
    --ink-3:   oklch(0.66 0.010 80);
    --ink-4:   oklch(0.52 0.010 75);
    --rule:    oklch(0.91 0.012 84 / 0.12);
    --rule-2:  oklch(0.91 0.012 84 / 0.06);
    --night:   oklch(0.125 0.006 60);
    --night-2: oklch(0.16 0.007 60);
    --west: oklch(0.72 0.09 252);
    --east: oklch(0.72 0.12 40);
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:   oklch(0.19 0.009 70);
  --paper-2: oklch(0.225 0.010 70);
  --ink:     oklch(0.91 0.012 84);
  --ink-2:   oklch(0.80 0.012 84);
  --ink-3:   oklch(0.66 0.010 80);
  --ink-4:   oklch(0.52 0.010 75);
  --rule:    oklch(0.91 0.012 84 / 0.12);
  --rule-2:  oklch(0.91 0.012 84 / 0.06);
  --night:   oklch(0.125 0.006 60);
  --night-2: oklch(0.16 0.007 60);
  --west: oklch(0.72 0.09 252);
  --east: oklch(0.72 0.12 40);
  color-scheme: dark;
}

@media (min-width: 1080px){ :root{ --rail-w: 232px; } }

/* ---------- 2. Base ---------- */
*,*::before,*::after{ box-sizing:border-box; margin:0; padding:0; }
html{ -webkit-text-size-adjust:100%; scroll-padding-top: 5rem; }
body{
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-text);
  font-size: var(--t-body);
  line-height: 1.6;
  font-optical-sizing: auto;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  overflow-x: clip;
}
::selection{ background: var(--ink); color: var(--paper); }
a{ color: inherit; }
img,iframe{ display:block; max-width:100%; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
:focus-visible{ outline: 2px solid var(--west); outline-offset: 3px; }

/* grain papier */
body::after{
  content:""; position:fixed; inset:0; pointer-events:none; z-index:90;
  opacity:.05; mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='160' height='160'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='3' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
@media (prefers-color-scheme: dark){ :root:not([data-theme="light"]) body::after{ mix-blend-mode:overlay; opacity:.06; } }
:root[data-theme="dark"] body::after{ mix-blend-mode:overlay; opacity:.06; }

.skip{
  position:fixed; top:-100px; left:var(--gutter); z-index:200;
  background:var(--ink); color:var(--paper); padding:.6rem 1rem;
  font: 500 var(--t-mono)/1 var(--f-mono); letter-spacing:.1em; text-transform:uppercase;
}
.skip:focus{ top: 1rem; }

.mono, .lbl{
  font-family: var(--f-mono);
  font-size: var(--t-mono);
  font-weight: 500;
  letter-spacing: .14em;
  text-transform: uppercase;
  line-height: 1.4;
}
.sr-only{ position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* ---------- 3. Barre de progression + en-tête ---------- */
.progress{
  position:fixed; top:0; left:0; right:0; height:2px; z-index:120;
  background: transparent;
}
.progress span{
  display:block; height:100%; width:100%;
  transform-origin: 0 50%; transform: scaleX(var(--p, 0));
  background: linear-gradient(90deg, var(--west) 0 50%, var(--east) 50% 100%);
}

.masthead{
  position:fixed; top:0; left:0; right:0; z-index:110;
  display:flex; align-items:center; justify-content:space-between; gap:1rem;
  padding: 1.15rem var(--gutter);
  color: #f3efe6;
  mix-blend-mode: difference;
  pointer-events:none;
}
.masthead > *{ pointer-events:auto; }
.brand{
  font-family: var(--f-display);
  font-variation-settings: "wdth" 75;
  font-weight: 800; font-size: 1rem; letter-spacing: .06em;
  text-decoration:none; text-transform:uppercase;
  display:flex; align-items:center; gap:.7rem;
}
.brand i{ display:inline-block; width:1px; height:1.1em; background: currentColor; }
.brand small{ font-family:var(--f-mono); font-weight:400; font-size:.62rem; letter-spacing:.18em; opacity:.75; }
.mast-right{ display:flex; align-items:center; gap: 1.4rem; }
.mast-now{ font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase; opacity:0; transition:opacity var(--d-m) var(--ease-out); white-space:nowrap; }
.is-reading .mast-now{ opacity:.85; }
.mast-link{
  font-family:var(--f-mono); font-size:.66rem; letter-spacing:.14em; text-transform:uppercase;
  text-decoration:none; border-bottom:1px solid currentColor; padding-bottom:1px; opacity:.85;
}
.mast-link:hover{ opacity:1; }
@media (min-width:1080px){ .mast-now{ display:none; } }
@media (max-width:560px){ .brand small, .mast-link{ display:none; } }

/* ---------- 4. Rail chronologique (desktop) ---------- */
.rail{
  position:fixed; z-index:60; top:0; bottom:0; left:0; width: var(--rail-w);
  display:none;
  padding: 6.5rem 0 2rem var(--gutter);
  color: #f3efe6;
  mix-blend-mode: difference;
  transition: opacity var(--d-m) var(--ease-out);
  opacity:0;
}
@media (min-width:1080px){ .rail{ display:flex; flex-direction:column; } }
.is-reading .rail{ opacity:1; }

.odo{
  display:flex; font-family: var(--f-display);
  font-variation-settings: "wdth" 62;
  font-weight: 800; font-size: 4.6rem; line-height:1; letter-spacing:-.02em;
  height:1em; overflow:hidden;
  font-feature-settings: "tnum" 1;
}
.odo-col{ display:flex; flex-direction:column; transition: transform var(--d-l) var(--ease-out); }
.odo-col span{ height:1em; display:block; text-align:center; }
.odo-col:nth-child(2){ transition-delay: 40ms; }
.odo-col:nth-child(3){ transition-delay: 80ms; }
.odo-col:nth-child(4){ transition-delay: 120ms; }

.rail-act{ margin-top: .9rem; color: inherit; opacity:.6; min-height: 2.8em; }
.rail-piece{
  margin-top:.35rem; font-family: var(--f-text); font-style: italic; font-size: 1.05rem; line-height:1.25;
  max-width: 16ch; height: 2.5em; overflow:hidden;
}
.rail-line{
  position:relative; flex:1; margin-top: 2rem; margin-bottom: 1rem;
  width: 120px;
}
.rail-axis{ position:absolute; left:0; top:0; bottom:0; width:1px; background: currentColor; opacity:.2; }
.rail-yr{
  position:absolute; left: 10px; transform: translateY(-50%);
  font-family: var(--f-mono); font-size:.6rem; letter-spacing:.1em; opacity:.45;
}
.rail-yr::before{ content:""; position:absolute; left:-64px; top:50%; width:6px; height:1px; background: currentColor; }
.rail-dot{
  position:absolute; width:7px; height:7px; border-radius:50%;
  transform: translate(-3px, -50%);
  background: currentColor; opacity:.28;
  transition: opacity var(--d-s), transform var(--d-s) var(--ease-out);
}
.rail-dot::after{ content:""; position:absolute; inset:-6px; } /* zone de clic */
.rail-dot:hover{ opacity:.8; }
.rail-dot.is-past{ opacity:.6; }
.rail-dot.is-current{ opacity:1; transform: translate(-3px,-50%) scale(1.6); }
.rail-span{ position:absolute; left:0; width:1px; background: currentColor; opacity:.5; }
.rail-cursor{
  position:absolute; left:-4px; width: 28px; height:1px; background: currentColor;
  transform: translateY(var(--y, 0px));
  transition: transform var(--d-l) var(--ease-out);
}
.rail-hint{ opacity:.45; font-size:.6rem; }

/* ---------- 5. Mise en page générale ---------- */
main{ position:relative; }
.col{
  padding-left: calc(var(--rail-w) + var(--gutter));
  padding-right: var(--gutter);
}
.wrap{ max-width: 1120px; }

.night{
  background: var(--night); color: var(--night-ink);
  --ink: var(--night-ink); --ink-2: oklch(0.82 0.012 84); --ink-3: var(--night-dim); --ink-4: oklch(0.52 0.01 70);
  --rule: var(--night-rule); --rule-2: oklch(0.93 0.012 84 / 0.06);
  --west: var(--west-n); --east: var(--east-n);
}
.night ::selection{ background: var(--night-ink); color: var(--night); }

/* ---------- 6. Hero ---------- */
.hero{
  position:relative; min-height: 100svh; padding-left: var(--gutter);
  display:grid; grid-template-rows: auto 1fr auto;
  padding-top: 6rem; padding-bottom: 2.2rem;
  overflow:hidden;
}
.hero-top{ display:flex; justify-content:space-between; gap:1rem; color: var(--ink-3); flex-wrap:wrap; }
.hero-title{
  position:relative; align-self:center;
  font-family: var(--f-display);
  font-variation-settings: "wdth" 62;
  font-weight: 800;
  font-size: clamp(4.2rem, 17.5vw, 19rem);
  line-height: .84; letter-spacing: -.035em;
  text-transform: uppercase;
  margin: 3rem 0 2rem;
  user-select:none;
}
.hero-title .ht-layer{ display:block; }
.hero-title .ht-layer + .ht-layer{ position:absolute; inset:0; }
.hero-title .ht-w{ clip-path: inset(0 50% 0 0); color: var(--west); transform: translateY(var(--hx, 0px)); }
.hero-title .ht-e{ clip-path: inset(0 0 0 50%); color: var(--east); transform: translateY(calc(var(--hx, 0px) * -1)); }
.hero-title .ht-base{ color: transparent; }
.hero-title span.row{ display:block; }
.hero-title span.row:last-child{ padding-left: .6em; }
.hero-fault{
  position:absolute; top:0; bottom:0; left:50%; width:1px;
  background: linear-gradient(var(--night-ink), var(--night-ink)) center/1px 100% no-repeat;
  opacity:.35; transform-origin: 50% 0;
  animation: draw 1.6s var(--ease-io) .2s both;
}
.hero-foot{
  display:grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: var(--s-4); align-items:end;
}
.hero-dek{
  font-size: var(--t-dek); line-height:1.22; font-weight: 350; max-width: 30ch;
  font-variation-settings: "opsz" 48;
  text-wrap: balance;
}
.hero-dek em{ font-style: italic; }
.hero-meta{ display:grid; gap:.55rem; color: var(--ink-3); justify-self:end; text-align:right; }
.hero-meta b{ color: var(--ink); font-weight:500; }
.scroll-cue{
  display:inline-flex; align-items:center; gap:.7rem; margin-top: 1rem; color: var(--ink);
  text-decoration:none; justify-self:end;
}
.scroll-cue i{ position:relative; width:1px; height:42px; background: var(--night-rule); overflow:hidden; display:block; }
.scroll-cue i::after{
  content:""; position:absolute; left:0; top:0; width:1px; height:40%; background: var(--night-ink);
  animation: cue 2.2s var(--ease-io) infinite;
}
@keyframes cue{ 0%{ transform: translateY(-100%);} 100%{ transform: translateY(260%);} }
@keyframes draw{ from{ transform: scaleY(0);} to{ transform: scaleY(1);} }

.hero-in{ animation: rise 1.1s var(--ease-out) both; }
.hero-in.d1{ animation-delay:.15s } .hero-in.d2{ animation-delay:.35s } .hero-in.d3{ animation-delay:.55s }
@keyframes rise{ from{ opacity:0; transform: translateY(24px);} to{ opacity:1; transform:none; } }

@media (max-width: 760px){
  .hero-title{ font-size: 22.5vw; margin: 2rem 0 1.5rem; }
  .hero-title span.row:last-child{ padding-left: 0; }
  .hero-foot{ grid-template-columns: 1fr; }
  .hero-meta{ justify-self:start; text-align:left; }
  .scroll-cue{ justify-self:start; }
}

/* ---------- 7. Mode d'emploi ---------- */
.howto{ padding-top: var(--s-7); padding-bottom: var(--s-6); }
.howto-grid{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; row-gap: var(--s-4);
}
.howto-kicker{ grid-column: 1 / -1; color: var(--ink-3); display:flex; gap:1rem; align-items:center; }
.howto-kicker::after{ content:""; flex:1; height:1px; background: var(--rule); }
.howto-lead{
  grid-column: 1 / 9;
  font-size: var(--t-lead); line-height: 1.45; font-weight: 380;
  font-variation-settings: "opsz" 30;
}
.howto-lead p + p{ margin-top: 1em; }
.dropcap::first-letter{
  float:left; font-family: var(--f-display); font-variation-settings:"wdth" 62; font-weight:800;
  font-size: 4.4em; line-height:.8; margin: .06em .1em -.05em 0; color: var(--ink);
}
.anatomy{
  grid-column: 2 / -1;
  display:grid; grid-template-columns: 1.1fr 1fr 1px 1fr; gap: 0 2rem; align-items:start;
  border-top: 1px solid var(--ink); padding-top: 1.2rem; margin-top: var(--s-3);
}
.anatomy > div{ display:grid; gap:.5rem; }
.anatomy .lbl{ color: var(--ink-3); }
.anatomy p{ font-size: 1rem; line-height:1.5; color: var(--ink-2); }
.anatomy .a-w .lbl{ color: var(--west); }
.anatomy .a-e .lbl{ color: var(--east); }
.anatomy .a-fault{ align-self:stretch; background: var(--ink); opacity:.5; width:1px; }
.lens-intro{
  grid-column: 2 / 11;
  display:flex; flex-wrap:wrap; align-items:center; gap: 1rem 2rem;
  padding: 1.4rem 0; border-top: 1px solid var(--rule); border-bottom: 1px solid var(--rule);
}
.lens-intro p{ font-size: 1rem; color: var(--ink-2); max-width: 46ch; flex: 1 1 280px; }
.keys{ grid-column: 2 / -1; color: var(--ink-4); }
kbd{
  font-family: var(--f-mono); font-size:.68rem; border:1px solid var(--rule); border-bottom-width:2px;
  padding:.05rem .4rem; border-radius:3px; color: var(--ink-2);
}
@media (max-width: 860px){
  .howto-lead, .anatomy, .lens-intro, .keys{ grid-column: 1 / -1; }
  .anatomy{ grid-template-columns: 1fr; gap: 1.4rem; }
  .anatomy .a-fault{ display:none; }
  .keys{ display:none; }
}

/* ---------- 8. Lentille ---------- */
.lens{
  display:inline-flex; border:1px solid var(--rule); background: var(--paper);
  font-family: var(--f-mono); font-size:.66rem; letter-spacing:.1em; text-transform:uppercase;
}
.lens button{
  padding: .7rem .95rem; color: var(--ink-3); position:relative;
  transition: color var(--d-s), background var(--d-s);
  display:inline-flex; align-items:center; gap:.5rem; white-space:nowrap;
}
.lens button + button{ border-left: 1px solid var(--rule); }
.lens button i{ width:7px; height:7px; display:inline-block; border-radius:50%; background: currentColor; }
.lens button[data-lens="west"] i{ background: var(--west); }
.lens button[data-lens="east"] i{ background: var(--east); }
.lens button[data-lens="both"] i{ background: linear-gradient(90deg, var(--west) 50%, var(--east) 50%); }
.lens button:hover{ color: var(--ink); }
.lens button[aria-pressed="true"]{ color: var(--paper); background: var(--ink); }

.lens-float{
  position:fixed; z-index:100; left: 50%; bottom: max(16px, env(safe-area-inset-bottom));
  transform: translate(-50%, 140%); transition: transform var(--d-m) var(--ease-out);
  display:flex; align-items:center; box-shadow: 0 10px 30px -12px oklch(0.2 0.01 60 / .35);
}
.lens-float .lens-cap{
  font-family: var(--f-mono); font-size:.6rem; letter-spacing:.14em; text-transform:uppercase;
  padding: 0 .9rem; color: var(--ink-3); background: var(--paper); align-self:stretch; display:flex; align-items:center;
  border:1px solid var(--rule); border-right:0;
}
.is-reading .lens-float{ transform: translate(-50%, 0); }
.zone-hero .lens-float{ transform: translate(-50%, 140%); }
@media (min-width:1080px){ .lens-float{ left: calc(50% + var(--rail-w) / 2); } }
@media (max-width: 560px){
  .lens-float{ left:16px; right:16px; transform: translateY(140%); }
  .is-reading .lens-float{ transform: none; }
  .zone-hero .lens-float{ transform: translateY(140%); }
  .lens-float .lens{ flex:1; }
  .lens-float .lens button{ flex:1; justify-content:center; padding: .8rem .4rem; }
  .lens-float .lens-cap{ display:none; }
}

/* effets de la lentille sur les lectures */
.reading{ transition: opacity var(--d-m) var(--ease-out), filter var(--d-m) var(--ease-out); }
[data-lens="west"] .reading.east,
[data-lens="east"] .reading.west{
  opacity: .16; filter: blur(3px) grayscale(1);
  user-select: none;
}
[data-lens="west"] .quote-e, [data-lens="east"] .quote-w{ opacity:.16; filter: blur(3px); }

/* ---------- 9. Ouvertures d'acte ---------- */
.act{
  position:relative; min-height: 100svh;
  display:grid; align-content:center;
  padding-top: var(--s-6); padding-bottom: var(--s-6);
  overflow:hidden;
}
.act-num{
  position:absolute; right: calc(var(--gutter) * -.2); bottom: -0.16em;
  font-family: var(--f-display); font-variation-settings: "wdth" 62; font-weight: 800;
  font-size: clamp(16rem, 52vw, 52rem); line-height:.8; letter-spacing:-.04em;
  color: transparent; -webkit-text-stroke: 1px oklch(0.93 0.012 84 / 0.2);
  pointer-events:none;
  transform: translateY(var(--ay, 0px));
}
.act-inner{ position:relative; display:grid; gap: var(--s-3); max-width: 1120px; }
.act-kicker{ color: var(--ink-3); display:flex; gap: 1.2rem; flex-wrap:wrap; }
.act-kicker b{ color: var(--ink); font-weight:500; }
.act-title{
  font-family: var(--f-display); font-variation-settings: "wdth" 68; font-weight: 800;
  font-size: clamp(3.4rem, 11vw, 11.5rem); line-height:.86; letter-spacing:-.03em;
  text-transform: uppercase; text-wrap: balance;
}
.act-dek{
  max-width: 34ch; font-size: var(--t-dek); line-height: 1.25; font-weight: 330; font-style: italic;
  color: var(--ink-2); font-variation-settings: "opsz" 48;
}
.act-toc{
  margin-top: var(--s-3); display:flex; flex-wrap:wrap; gap: .4rem 1.6rem; list-style:none;
  border-top: 1px solid var(--rule); padding-top: 1rem; max-width: 900px;
}
.act-toc a{ text-decoration:none; color: var(--ink-3); font-family: var(--f-mono); font-size:.7rem; letter-spacing:.08em; }
.act-toc a:hover{ color: var(--ink); }
.act-toc a span{ color: var(--ink-4); margin-right:.4rem; }

/* ---------- 10. Pièces ---------- */
.piece{
  position:relative;
  padding-top: var(--s-6); padding-bottom: var(--s-6);
}
.piece + .piece::before{
  content:""; position:absolute; top:0; height:1px; background: var(--rule);
  left: calc(var(--rail-w) + var(--gutter)); right: var(--gutter);
}
.piece-inner{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px;
  max-width: 1120px;
}
.piece-meta{
  grid-column: 1 / -1;
  display:flex; flex-wrap:wrap; align-items:center; gap: .5rem 1.4rem;
  color: var(--ink-3); margin-bottom: var(--s-3);
}
.piece-meta .no{ color: var(--ink); }
.piece-meta .init{ display:inline-flex; align-items:center; gap:.5rem; }
.piece-meta .init::before{ content:""; width:18px; height:1px; background: currentColor; }
.piece-meta .init[data-side="west"]{ color: var(--west); }
.piece-meta .init[data-side="east"]{ color: var(--east); }
.piece-meta .tags{ color: var(--ink-4); margin-left:auto; }

.piece-title{
  grid-column: 1 / 12;
  font-family: var(--f-display); font-variation-settings: "wdth" 70; font-weight: 780;
  font-size: var(--t-h2); line-height: .9; letter-spacing: -.025em;
  text-wrap: balance;
}
.piece-dek{
  grid-column: 1 / 9; margin-top: var(--s-3);
  font-size: var(--t-dek); line-height: 1.2; font-style: italic; font-weight: 330;
  color: var(--ink-2); font-variation-settings: "opsz" 60; text-wrap: balance;
}
.piece-fact{
  grid-column: 2 / 9; margin-top: var(--s-5);
  position:relative;
}
.piece-fact .lbl{ display:block; color: var(--ink-3); margin-bottom: .9rem; }
.piece-fact p{
  font-size: var(--t-lead); line-height: 1.5; font-weight: 400;
  font-variation-settings: "opsz" 24; text-wrap: pretty; hanging-punctuation: first;
}
.piece-fact p + p{ margin-top: .8em; }

/* variante : rythme décalé une pièce sur deux */
.piece.alt .piece-title{ grid-column: 3 / -1; }
.piece.alt .piece-dek{ grid-column: 3 / 11; }
.piece.alt .piece-fact{ grid-column: 4 / 11; }
.piece.alt .piece-src{ grid-column: 4 / -1; }

/* la ligne de faille */
.split{
  grid-column: 1 / -1; margin-top: var(--s-5);
  display:grid; grid-template-columns: minmax(0,1fr) 1px minmax(0,1fr); column-gap: clamp(1.5rem, 4vw, 4rem);
  position:relative;
}
.split-cap{
  grid-column: 1 / -1; text-align:center; color: var(--ink-4); margin-bottom: 1.4rem;
  display:flex; align-items:center; gap:1rem;
}
.split-cap::before,.split-cap::after{ content:""; flex:1; height:1px; background: var(--rule); }
.fault{
  width:1px; background: var(--ink); opacity:.55; transform-origin: 50% 0;
  position:relative;
}
.fault::before{
  content:""; position:absolute; left:-3px; top:-4px; width:7px; height:7px; border-radius:50%; background: var(--ink);
}
.reading{ position:relative; padding-top: .2rem; }
.reading h3{
  display:flex; align-items:center; gap:.6rem; margin-bottom: 1rem;
}
.reading.west h3{ color: var(--west); }
.reading.east h3{ color: var(--east); }
.reading h3::before{ content:""; width: 10px; height:10px; background: currentColor; display:block; }
.reading p{
  font-size: var(--t-body); line-height: 1.58; color: var(--ink-2);
  text-wrap: pretty;
}
.reading p + p{ margin-top: .8em; }
.reading .voice{
  display:block; margin-top: .7em; font-family: var(--f-mono); font-size: .64rem; letter-spacing:.12em; text-transform:uppercase; color: var(--ink-4);
}
.reading.west{ text-align:right; }
.reading.west h3{ justify-content:flex-end; flex-direction: row-reverse; }
.split-cap .c-west, .split-cap .c-east{ display:none; }
[data-lens="west"] .split-cap .c-both, [data-lens="east"] .split-cap .c-both{ display:none; }
[data-lens="west"] .split-cap .c-west{ display:inline; color: var(--west); }
[data-lens="east"] .split-cap .c-east{ display:inline; color: var(--east); }

.piece-src{
  grid-column: 2 / -1; margin-top: var(--s-5);
  display:flex; flex-wrap:wrap; align-items:baseline; gap: .6rem 1.4rem;
}
.piece-src .lbl{ color: var(--ink-4); }
.src{
  font-family: var(--f-mono); font-size: .72rem; letter-spacing:.02em; color: var(--ink-2);
  text-decoration: none; border-bottom: 1px solid var(--rule); padding-bottom: 2px;
  transition: color var(--d-s), border-color var(--d-s);
}
.src:hover{ color: var(--ink); border-color: var(--ink); }
.src span{ color: var(--ink-4); }

/* pièce « contexte » (sans controverse explicite) */
.piece.context .piece-title{ grid-column: 4 / -1; font-size: clamp(2.2rem, 4.6vw, 4.8rem); }
.piece.context .piece-dek{ grid-column: 4 / 11; }
.piece.context .piece-fact{ grid-column: 4 / 11; }
.piece.context .piece-src{ grid-column: 4 / -1; }
.piece.context .piece-meta{ padding-left: 0; }
.no-split{
  grid-column: 4 / 11; margin-top: var(--s-4);
  font-family: var(--f-mono); font-size: .7rem; letter-spacing:.08em; color: var(--ink-3); line-height:1.6;
  border-left: 1px solid var(--rule); padding-left: 1rem;
}

/* citations en exergue */
.pull{
  grid-column: 1 / -1; margin-top: var(--s-5);
  display:grid; grid-template-columns: minmax(0,1fr) auto; gap: 1rem 2rem; align-items:end;
  border-top: 1px solid var(--ink); padding-top: 1.4rem;
}
.pull blockquote{
  font-family: var(--f-text); font-style: italic; font-weight: 300;
  font-size: clamp(2rem, 4.4vw, 4.6rem); line-height: 1.04; letter-spacing: -.015em;
  font-variation-settings: "opsz" 72; text-wrap: balance;
  transition: opacity var(--d-m), filter var(--d-m);
}
.pull figcaption{ color: var(--ink-3); text-align:right; }

/* chiffre clé */
.figure{
  padding-top: var(--s-6); padding-bottom: var(--s-6);
  border-top: 1px solid var(--rule);
}
.figure-inner{
  display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; align-items:end; max-width: 1120px;
}
.figure-num{
  grid-column: 1 / 8;
  font-family: var(--f-display); font-variation-settings: "wdth" 62; font-weight: 800;
  font-size: clamp(6rem, 22vw, 22rem); line-height: .8; letter-spacing: -.045em;
  font-feature-settings: "tnum" 1;
  white-space: nowrap;
}
.figure-num small{ font-size: .4em; letter-spacing:-.02em; margin-left:.05em; }
.figure-txt{ grid-column: 8 / -1; display:grid; gap: .8rem; padding-bottom: .6rem; }
.figure-txt p{ font-size: var(--t-lead); line-height: 1.35; font-variation-settings:"opsz" 30; }
.figure-txt .lbl{ color: var(--ink-3); }

/* pièce plein noir — la bascule */
.piece.night + .piece::before, .piece.night::before{ display:none; }
.piece.turning{ padding-top: var(--s-7); padding-bottom: var(--s-7); }
.turning-date{
  grid-column: 1 / -1;
  font-family: var(--f-display); font-variation-settings: "wdth" 62; font-weight: 800;
  font-size: clamp(4.6rem, 19vw, 20rem); line-height: .82; letter-spacing: -.045em;
  margin-bottom: var(--s-4);
  font-feature-settings: "tnum" 1;
  display:flex; flex-wrap:wrap; gap: 0 .12em;
}
.turning-date span{ display:inline-block; }
.turning-date .sep{ color: var(--east); }

/* pièce à conviction (média) */
.exhibit{
  grid-column: 2 / 11; margin-top: var(--s-5);
  border: 1px solid var(--rule); background: var(--paper-2);
}
.piece.alt .exhibit{ grid-column: 3 / -1; }
.exhibit-head{
  display:flex; justify-content:space-between; gap:1rem; padding: .8rem 1rem; border-bottom: 1px solid var(--rule);
  color: var(--ink-3);
}
.exhibit-stage{ position:relative; aspect-ratio: 16 / 9; background: var(--night); color: var(--night-ink); }
.exhibit-stage iframe{ position:absolute; inset:0; width:100%; height:100%; border:0; }
.exhibit-play{
  position:absolute; inset:0; display:flex; flex-direction:column; align-items:center; justify-content:center; gap: 1.1rem;
  width:100%; color: var(--night-ink); text-decoration:none;
  background:
    repeating-linear-gradient(90deg, oklch(0.93 0.012 84 / .05) 0 1px, transparent 1px 6px);
}
.exhibit-play .wave{ display:flex; align-items:center; gap:3px; height: 56px; }
.exhibit-play .wave i{
  width:3px; background: var(--night-ink); opacity:.7; display:block; height: calc(var(--h) * 1%);
}
.exhibit-play .btn{
  display:inline-flex; align-items:center; gap:.7rem; border:1px solid var(--night-rule); padding: .8rem 1.1rem;
  font-family: var(--f-mono); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  transition: background var(--d-s), color var(--d-s);
}
.exhibit-play:hover .btn{ background: var(--night-ink); color: var(--night); }
.exhibit-play small{ font-family: var(--f-mono); font-size: .6rem; letter-spacing:.1em; opacity:.55; max-width: 44ch; text-align:center; padding: 0 1rem; }

/* ---------- 11. Épilogue / méthode / index ---------- */
.epilogue{ padding-top: var(--s-7); padding-bottom: var(--s-6); }
.epi-grid{ display:grid; grid-template-columns: repeat(12, minmax(0,1fr)); column-gap: 24px; row-gap: var(--s-4); max-width:1120px; }
.epi-title{
  grid-column: 1 / -1;
  font-family: var(--f-display); font-variation-settings:"wdth" 68; font-weight:800;
  font-size: clamp(3rem, 8vw, 8.5rem); line-height:.88; letter-spacing:-.03em; text-transform:uppercase;
}
.epi-body{ grid-column: 2 / 9; font-size: var(--t-lead); line-height: 1.5; font-variation-settings:"opsz" 24; }
.epi-body p + p{ margin-top: 1em; }
.epi-aside{ grid-column: 9 / -1; display:grid; gap: 1.2rem; align-content:start; padding-top:.4rem; }
.epi-aside .lbl{ color: var(--ink-3); }
.epi-aside p{ font-size: 1rem; line-height:1.5; color: var(--ink-2); }

.index{ padding-top: var(--s-5); padding-bottom: var(--s-6); }
.index-head{ display:flex; justify-content:space-between; align-items:baseline; gap:1rem; border-top:1px solid var(--ink); padding-top: 1rem; max-width:1120px; }
.index-list{ list-style:none; max-width:1120px; margin-top: 1rem; columns: 2; column-gap: 48px; }
.index-list li{
  break-inside: avoid; display:grid; grid-template-columns: 2.4rem 1fr; gap: .8rem;
  padding: .7rem 0; border-bottom: 1px solid var(--rule-2);
  font-size: 1rem; line-height: 1.35;
}
.index-list .n{ font-family: var(--f-mono); font-size:.68rem; color: var(--ink-4); padding-top:.2rem; }
.index-list a.t{ text-decoration:none; }
.index-list a.t:hover{ text-decoration: underline; text-underline-offset: 3px; }
.index-list .s{ display:block; font-family: var(--f-mono); font-size: .64rem; color: var(--ink-4); margin-top:.2rem; letter-spacing:.02em; word-break: break-all; }
.index-list .s a{ text-decoration:none; }
.index-list .s a:hover{ color: var(--ink); }

.colophon{
  padding-top: var(--s-5); padding-bottom: calc(var(--s-6) + 40px);
}
.colo-inner{ display:flex; flex-wrap:wrap; justify-content:space-between; gap: 1.4rem; color: var(--ink-3); max-width:1120px; }
.colo-inner a{ color: var(--ink); }
.colo-big{
  font-family: var(--f-display); font-variation-settings:"wdth" 62; font-weight:800;
  font-size: clamp(3rem, 12vw, 12rem); line-height:.82; letter-spacing:-.04em; text-transform:uppercase;
  margin-bottom: var(--s-4);
}
.colo-big .w{ color: var(--west); } .colo-big .e{ color: var(--east); }

/* ---------- 12. Révélations ---------- */
.js [data-reveal]{
  opacity:0; transform: translateY(26px);
  transition: opacity var(--d-l) var(--ease-out), transform var(--d-l) var(--ease-out);
  transition-delay: var(--rd, 0ms);
}
.js [data-reveal].is-in{ opacity:1; transform:none; }
.js .split .fault{ transform: scaleY(0); transition: transform 1.4s var(--ease-io) .1s; }
.js .split .reading.west{ opacity:0; transform: translateX(28px); }
.js .split .reading.east{ opacity:0; transform: translateX(-28px); }
.js .split .reading{ transition: opacity 1s var(--ease-out) .45s, transform 1.2s var(--ease-out) .45s, filter var(--d-m) var(--ease-out); }
.js .split.is-in .fault{ transform: scaleY(1); }
.js .split.is-in .reading{ opacity:1; transform:none; }
.js [data-lens="west"] .split.is-in .reading.east,
.js [data-lens="east"] .split.is-in .reading.west{ opacity:.16; }

.js .turning-date span{ opacity:0; transform: translateY(.3em); transition: opacity .9s var(--ease-out), transform 1.1s var(--ease-out); }
.js .turning-date.is-in span{ opacity:1; transform:none; }
.js .turning-date.is-in span:nth-child(2){ transition-delay: .08s } .js .turning-date.is-in span:nth-child(3){ transition-delay: .16s }
.js .turning-date.is-in span:nth-child(4){ transition-delay: .24s } .js .turning-date.is-in span:nth-child(5){ transition-delay: .32s }

/* ---------- 13. Responsive ---------- */
@media (max-width: 860px){
  .piece-title, .piece-dek, .piece-fact, .piece-src, .exhibit,
  .piece.alt .piece-title, .piece.alt .piece-dek, .piece.alt .piece-fact, .piece.alt .piece-src, .piece.alt .exhibit,
  .piece.context .piece-title, .piece.context .piece-dek, .piece.context .piece-fact, .piece.context .piece-src, .no-split,
  .figure-num, .figure-txt, .epi-body, .epi-aside{ grid-column: 1 / -1; }
  .piece-fact{ margin-top: var(--s-4); }
  .piece-meta .tags{ margin-left:0; width:100%; }
  .split{ grid-template-columns: 1fr; row-gap: 0; }
  .fault{ height:1px; width: 100%; margin: 2rem 0; transform-origin: 0 50%; }
  .fault::before{ left:-1px; top:-3px; }
  .js .split .fault{ transform: scaleX(0); }
  .js .split.is-in .fault{ transform: scaleX(1); }
  .reading.west{ text-align:left; }
  .reading.west h3{ justify-content:flex-start; flex-direction: row; }
  .js .split .reading.west, .js .split .reading.east{ transform: translateY(16px); }
  .pull{ grid-template-columns: 1fr; }
  .pull figcaption{ text-align:left; }
  .figure-num{ font-size: clamp(5rem, 30vw, 12rem); }
  .index-list{ columns: 1; }
  .act-num{ font-size: 70vw; }
  .piece, .figure{ padding-top: var(--s-5); padding-bottom: var(--s-5); }
}

/* ---------- 14. Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{ animation-duration: .001ms !important; animation-iteration-count: 1 !important; transition-duration: .001ms !important; transition-delay: 0ms !important; }
  .js [data-reveal], .js .split .reading, .js .turning-date span{ opacity:1 !important; transform:none !important; }
  .js .split .fault{ transform:none !important; }
  .hero-title .ht-w, .hero-title .ht-e, .act-num{ transform:none !important; }
  .scroll-cue i::after{ display:none; }
}

/* ---------- 15. Impression ---------- */
@media print{
  .masthead, .rail, .lens-float, .progress, .scroll-cue, body::after{ display:none !important; }
  .night{ background: none; color: #111; --ink:#111; --ink-2:#222; --ink-3:#555; }
  .col{ padding-left: 0; }
  .act, .hero{ min-height:auto; }
  .js [data-reveal], .js .split .reading{ opacity:1 !important; transform:none !important; }
}
.rail kbd{ color: inherit; border-color: currentColor; opacity:.6; }