/* =========================================================
   Colère Froide — design system (post-apo / cyber)
   Transmission d'un futur dévasté. Tension glace / braise.
   Typo "droit" : grotesque + mono terminal. CRT + glitch + HUD.
   ========================================================= */

:root {
  --bg:        #06080a;
  --bg-2:      #0a0d11;
  --ink:       #eaf1f4;
  --muted:     #6f7d86;   /* acier froid */
  --line:      rgba(180, 215, 230, 0.12);
  --line-soft: rgba(180, 215, 230, 0.06);

  --cold:      #5cd1e0;   /* glace / cyan cyber */
  --cold-deep: #1d6f86;
  --ember:     #e2552b;   /* incendie / colère */
  --ember-soft:#f5895f;
  --signal:    #f0a93a;   /* ambre — alerte HUD */
  --violet:    #9d6bff;   /* tunnel du temps / accents */
  --bio:       #34e6a0;   /* le vivant — bioluminescence, la planète résiste */
  --bio-soft:  #76ffc6;

  --display: "Space Grotesk", "Segoe UI", system-ui, sans-serif;
  --mono:    "Space Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --gut: clamp(20px, 5vw, 80px);
  --maxw: 1280px;
  --ease: cubic-bezier(0.22, 1, 0.36, 1);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; }

body {
  margin: 0;
  /* base sombre quasi neutre : la couleur vient des glyphes, pas d'un lavis */
  background:
    radial-gradient(120% 55% at 50% -12%, rgba(92, 209, 224, 0.05), transparent 60%),
    linear-gradient(180deg, #070809 0%, #060708 60%, #050506 100%);
  color: var(--ink);
  font-family: var(--display);
  line-height: 1.5;
  letter-spacing: 0.01em;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

/* Lueurs d'ambiance : braise en bas, glace en haut */
body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background:
    radial-gradient(120% 80% at 50% -12%, rgba(92, 209, 224, 0.07), transparent 60%),
    radial-gradient(70% 52% at 88% 16%, rgba(157, 107, 255, 0.07), transparent 55%),
    radial-gradient(70% 55% at 12% 80%, rgba(52, 230, 160, 0.05), transparent 55%);
  animation: ambiance 22s ease-in-out infinite alternate;
}
@keyframes ambiance { 0% { opacity: 0.78; } 100% { opacity: 1; } }

/* Crasse / film de pollution sur tout l'écran — la destruction qui ronge l'image */
body::after {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  z-index: 1;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.62' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='150' height='150' filter='url(%23n)'/%3E%3C/svg%3E");
  background-size: 160px 160px;
  background-repeat: repeat;
  mix-blend-mode: soft-light;
  opacity: 0.55;
  animation: grime 6s steps(5) infinite;
}
@keyframes grime {
  0% { background-position: 0 0; }
  20% { background-position: -40px 30px; }
  40% { background-position: 50px -20px; }
  60% { background-position: -25px -45px; }
  80% { background-position: 35px 40px; }
  100% { background-position: 0 0; }
}

a { color: inherit; text-decoration: none; }
em { font-style: normal; }
.warm { color: var(--ember-soft); }
.cold { color: var(--cold); }
.bio { color: var(--bio); text-shadow: 0 0 18px rgba(52, 230, 160, 0.35); }
.blink { animation: blink 1.4s steps(2, start) infinite; }
.glyph-cf { font-family: "Noto Sans Cuneiform", var(--mono); letter-spacing: 0.12em; opacity: 0.8; }
@keyframes blink { 50% { opacity: 0; } }

/* ---------- Canvas ---------- */
#field { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 0; display: block; }

/* ---------- Halo curseur ---------- */
.cursor-glow {
  position: fixed; top: 0; left: 0;
  width: 480px; height: 480px; margin: -240px 0 0 -240px;
  border-radius: 50%; pointer-events: none; z-index: 2;
  background: radial-gradient(circle, rgba(92, 209, 224, 0.10), transparent 60%);
  opacity: 0; transition: opacity 0.6s var(--ease);
  mix-blend-mode: screen;
}

/* ---------- CRT / scanlines / vignette ---------- */
.crt { position: fixed; inset: 0; z-index: 40; pointer-events: none; }
.crt::before {
  content: ""; position: absolute; inset: 0;
  background: repeating-linear-gradient(
    0deg, rgba(0, 0, 0, 0.16) 0 1px, transparent 1px 3px);
  opacity: 0.55;
  animation: flicker 4.5s infinite;
}
.crt::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(125% 125% at 50% 50%, transparent 52%, rgba(0, 0, 0, 0.6) 100%);
}
@keyframes flicker {
  0%, 100% { opacity: 0.55; }
  48% { opacity: 0.55; }
  50% { opacity: 0.42; }
  52% { opacity: 0.58; }
  78% { opacity: 0.5; }
}

/* ---------- Crochets HUD ---------- */
.hud-corners span {
  position: fixed; width: 22px; height: 22px; z-index: 6; pointer-events: none;
  border: 1px solid rgba(92, 209, 224, 0.35);
}
.hud-corners span:nth-child(1) { top: 16px; left: 16px; border-right: 0; border-bottom: 0; }
.hud-corners span:nth-child(2) { top: 16px; right: 16px; border-left: 0; border-bottom: 0; }
.hud-corners span:nth-child(3) { bottom: 16px; left: 16px; border-right: 0; border-top: 0; }
.hud-corners span:nth-child(4) { bottom: 16px; right: 16px; border-left: 0; border-top: 0; }

/* ---------- Barre de progression ---------- */
.progress { position: fixed; top: 0; left: 0; width: 100%; height: 2px; z-index: 60; background: var(--line-soft); }
.progress span {
  display: block; height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--cold-deep), var(--cold) 55%, var(--ember));
  box-shadow: 0 0 12px rgba(92, 209, 224, 0.6);
}

/* ---------- Top bar ---------- */
.topbar {
  position: fixed; top: 0; left: 0; right: 0; z-index: 50;
  display: flex; align-items: center; justify-content: space-between;
  padding: clamp(16px, 2.4vw, 26px) var(--gut);
  mix-blend-mode: difference;
}
.brand { display: inline-flex; align-items: center; gap: 10px; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; }
.brand-mark { border: 1px solid var(--ink); padding: 2px 6px; font-weight: 700; }
.brand-sep { opacity: 0.5; }
.topnav { display: flex; align-items: center; gap: clamp(14px, 2vw, 30px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; }
.topnav a { position: relative; padding: 4px 0; opacity: 0.85; transition: opacity 0.3s; }
.topnav a:hover { opacity: 1; }
.topnav a::after {
  content: ""; position: absolute; left: 0; bottom: 0; width: 100%; height: 1px;
  background: currentColor; transform: scaleX(0); transform-origin: left;
  transition: transform 0.4s var(--ease);
}
.topnav a:hover::after { transform: scaleX(1); }
.nav-cta { border: 1px solid currentColor; padding: 7px 16px !important; }
.nav-cta::after { display: none; }

/* ---------- Layout ---------- */
main { position: relative; z-index: 3; }
.block { position: relative; max-width: var(--maxw); margin: 0 auto; padding: clamp(90px, 16vh, 200px) var(--gut); }

.label {
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--muted); margin: 0 0 28px;
}
.label::before {
  content: ""; display: inline-block; width: 26px; height: 1px;
  background: var(--cold); vertical-align: middle; margin-right: 14px;
}

/* ---------- HERO ---------- */
.hero {
  position: relative; z-index: 3; min-height: 100svh;
  max-width: var(--maxw); margin: 0 auto; padding: 0 var(--gut);
  display: flex; flex-direction: column; justify-content: center;
}
.hud-readout {
  position: absolute; top: clamp(86px, 14vh, 130px); right: var(--gut);
  display: flex; flex-direction: column; gap: 6px; text-align: right;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em;
  text-transform: uppercase; color: var(--cold); opacity: 0.8;
}
.hud-readout .hud-line { white-space: nowrap; }
.hud-readout b { color: var(--ink); font-weight: 700; }

.hero .eyebrow { font-family: var(--mono); font-size: 13px; letter-spacing: 0.3em; text-transform: uppercase; color: var(--signal); margin: 0 0 clamp(20px, 3vh, 40px); }
.hero-title { margin: 0; font-weight: 700; font-size: clamp(60px, 16vw, 300px); line-height: 0.86; letter-spacing: -0.03em; text-transform: uppercase; }
.hero-title .word { display: block; will-change: transform; position: relative; }
.word--warm { color: var(--ink); filter: drop-shadow(0 0 34px rgba(226, 85, 43, 0.25)); }
.word--cold {
  color: transparent;
  -webkit-text-stroke: 1.5px var(--cold); text-stroke: 1.5px var(--cold);
  margin-left: 0.08em; filter: drop-shadow(0 0 22px rgba(92, 209, 224, 0.25));
}
/* glitch périodique sur le titre */
.glitch .word { animation: glitch 5s infinite; }
.glitch .word--cold { animation-delay: -2.5s; }
@keyframes glitch {
  0%, 78%, 100% { transform: translate(0, 0); text-shadow: none; clip-path: inset(0 0 0 0); }
  79% { transform: translate(-4px, 0); text-shadow: 5px 0 var(--ember), -5px 0 var(--cold); clip-path: inset(0 0 64% 0); }
  81% { transform: translate(5px, 0); text-shadow: -5px 0 var(--ember), 4px 0 var(--cold); clip-path: inset(42% 0 22% 0); }
  83% { transform: translate(-3px, 0); text-shadow: 3px 0 var(--cold), -4px 0 var(--ember); clip-path: inset(72% 0 4% 0); }
  85% { transform: translate(2px, 0); text-shadow: 4px 0 var(--ember), -2px 0 var(--cold); clip-path: inset(20% 0 50% 0); }
  86% { transform: translate(0, 0); text-shadow: none; clip-path: inset(0 0 0 0); }
}

.hero-gloss { margin: clamp(18px, 2.6vh, 30px) 0 0; font-family: var(--mono); font-size: clamp(13px, 1.3vw, 16px); letter-spacing: 0.14em; color: var(--cold); opacity: 0.85; }
.hero-sub { margin: clamp(20px, 3vh, 34px) 0 0; max-width: 66ch; font-size: clamp(16px, 1.6vw, 21px); color: #c4ccd3; }
.hero-sign { margin: clamp(14px, 2vh, 22px) 0 0; max-width: 54ch; font-family: var(--mono); font-size: clamp(11px, 1.2vw, 13px); letter-spacing: 0.06em; line-height: 1.55; color: var(--muted); }
.hero-sign .cold { color: var(--cold); }
.scrollcue { display: inline-flex; align-items: center; gap: 14px; margin-top: clamp(40px, 7vh, 80px); font-family: var(--mono); font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--muted); }
.scrollcue-line { position: relative; width: 60px; height: 1px; background: var(--line); overflow: hidden; }
.scrollcue-line::after { content: ""; position: absolute; inset: 0; background: var(--cold); transform: translateX(-100%); animation: cue 2.4s var(--ease) infinite; }
@keyframes cue { 0% { transform: translateX(-100%); } 60%, 100% { transform: translateX(100%); } }

/* ---------- HERO vidéo (flux intercepté) ---------- */
.hero--video { overflow: hidden; }
.hero-video { position: absolute; inset: 0; z-index: -2; background: var(--bg); }
.hero-video video {
  width: 100%; height: 100%; object-fit: cover; object-position: center 25%; display: block;
  /* Connexion vraiment instable : tremblement + décrochages (transform), scintillement (filter), coupures (opacity).
     Trois durées premières -> elles se déphasent en permanence, jamais le même état. */
  animation: vid-chaos 4.8s steps(1) infinite, vid-flick 1.7s steps(1) infinite, vid-cut 3.7s steps(1) infinite;
}
@keyframes vid-chaos {
  0% { transform: scale(1.05) translate(0, 0); }
  3% { transform: scale(1.05) translate(-2px, 1px); }
  6% { transform: scale(1.06) translate(2px, -2px); }
  9% { transform: scale(1.05) translate(-1px, 2px); }
  12% { transform: scale(1.12) translate(0, -16px); }
  14% { transform: scale(1.12) translate(0, 9px); }
  16% { transform: scale(1.05) translate(1px, -1px); }
  20% { transform: scale(1.06) translate(-3px, 2px); }
  24% { transform: scale(1.05) translate(2px, 1px); }
  27% { transform: scale(1.05) translate(-1px, -2px); }
  30% { transform: scale(1.13) translate(15px, 3px); }
  31% { transform: scale(1.13) translate(-13px, -2px); }
  33% { transform: scale(1.05) translate(1px, 1px); }
  37% { transform: scale(1.06) translate(-2px, -1px); }
  41% { transform: scale(1.05) translate(2px, 2px); }
  44% { transform: scale(1.05) translate(-1px, 1px); }
  47% { transform: scale(1.11) translate(0, 18px); }
  49% { transform: scale(1.11) translate(0, -12px); }
  51% { transform: scale(1.05) translate(1px, 0); }
  55% { transform: scale(1.06) translate(-2px, 2px); }
  59% { transform: scale(1.05) translate(2px, -2px); }
  62% { transform: scale(1.13) translate(-17px, 4px); }
  63% { transform: scale(1.13) translate(14px, -3px); }
  66% { transform: scale(1.05) translate(-1px, 1px); }
  70% { transform: scale(1.06) translate(2px, -1px); }
  74% { transform: scale(1.05) translate(-2px, 2px); }
  78% { transform: scale(1.05) translate(1px, 1px); }
  81% { transform: scale(1.12) translate(0, -20px); }
  83% { transform: scale(1.12) translate(0, 11px); }
  85% { transform: scale(1.05) translate(-1px, -1px); }
  89% { transform: scale(1.06) translate(2px, 2px); }
  93% { transform: scale(1.05) translate(-2px, 1px); }
  96% { transform: scale(1.08) translate(3px, -2px); }
  100% { transform: scale(1.05) translate(0, 0); }
}
@keyframes vid-flick {
  0% { filter: none; }
  12% { filter: brightness(1.18) contrast(1.12); }
  24% { filter: saturate(0.55) hue-rotate(7deg); }
  30% { filter: invert(0.06) contrast(1.35); }
  33% { filter: none; }
  50% { filter: contrast(1.3) brightness(0.9); }
  64% { filter: saturate(1.6) hue-rotate(-9deg); }
  70% { filter: invert(0.07) contrast(1.2); }
  73% { filter: none; }
  88% { filter: contrast(1.25) brightness(1.12); }
  100% { filter: none; }
}
@keyframes vid-cut {
  0%, 27% { opacity: 1; }
  28% { opacity: 0.22; }
  29% { opacity: 1; }
  54% { opacity: 1; }
  55% { opacity: 0.1; }
  56% { opacity: 0.7; }
  57% { opacity: 1; }
  81% { opacity: 1; }
  82% { opacity: 0.3; }
  83% { opacity: 1; }
  100% { opacity: 1; }
}
.hero-scrim {
  position: absolute; inset: 0; z-index: -1;
  background:
    linear-gradient(180deg, rgba(6, 8, 10, 0.3) 0%, rgba(6, 8, 10, 0.12) 38%, rgba(6, 8, 10, 0.82) 100%),
    linear-gradient(90deg, rgba(6, 8, 10, 0.66) 0%, transparent 56%);
}
.feed-tag {
  position: absolute; left: var(--gut); bottom: clamp(20px, 4vh, 40px); z-index: 4;
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--ember-soft);
}
.feed-tag .blink { color: var(--ember); }
.sound-toggle {
  position: absolute; right: var(--gut); bottom: clamp(20px, 4vh, 40px); z-index: 4;
  display: inline-flex; align-items: center; gap: 9px;
  background: rgba(6, 8, 10, 0.4); border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 15px; cursor: pointer; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  transition: color 0.3s, border-color 0.3s;
}
.sound-toggle:hover { color: var(--ink); border-color: var(--cold); }
.sound-toggle[aria-pressed="true"] { color: var(--cold); border-color: var(--cold); }
.sound-toggle--hint { animation: sound-hint 2.2s ease-in-out infinite; }
@keyframes sound-hint {
  0%, 100% { border-color: var(--line); box-shadow: 0 0 0 rgba(92, 209, 224, 0); }
  50% { border-color: var(--cold); box-shadow: 0 0 18px rgba(92, 209, 224, 0.35); }
}
.sound-toggle .st-ico { font-size: 13px; }
@media (max-width: 720px) {
  .feed-tag { display: none; }
}

/* ---------- HERO : interférence + datation (transmission difficile) ---------- */
.hero-static {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.5; mix-blend-mode: screen;
  background: repeating-linear-gradient(0deg, rgba(92, 209, 224, 0.045) 0 2px, transparent 2px 4px);
  animation: hero-interf 5.5s steps(1) infinite;
}
.hero-static::after {
  content: ""; position: absolute; left: 0; right: 0; height: 16%;
  background: linear-gradient(180deg, transparent, rgba(92, 209, 224, 0.07), transparent);
  animation: hero-band 7s linear infinite;
}
@keyframes hero-interf { 0%,100%{opacity:.4} 7%{opacity:.12} 8%{opacity:.6} 33%{opacity:.32} 34%{opacity:.06} 36%{opacity:.5} 70%{opacity:.42} 71%{opacity:.1} 73%{opacity:.55} }
@keyframes hero-band { 0%{transform:translateY(-30%)} 100%{transform:translateY(680%)} }
.hero-date {
  display: inline-flex; align-items: center; gap: 10px; align-self: flex-start;
  margin: 0 0 clamp(16px, 2.4vh, 28px); padding: 8px 14px; border: 1px solid var(--cold);
  font-family: var(--mono); font-size: 12px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cold);
  background: rgba(6, 8, 10, 0.4); -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
}
.hero-date b { color: var(--ink); font-weight: 700; font-size: 14px; letter-spacing: 0.08em; }
.hero-date .blink { color: var(--ember); }

/* ---------- MANIFESTE ---------- */
.manifeste .statement { margin: 0; max-width: 32ch; font-size: clamp(25px, 4vw, 65px); line-height: 1.08; letter-spacing: -0.02em; font-weight: 500;text-align:justify; }

/* ---------- Adresse aux militant·es ---------- */
.adresse-body { margin-top: clamp(22px, 3.5vh, 40px); }
.adresse-body p { margin: 0 0 clamp(20px, 3vh, 32px); max-width: 32ch; font-size: clamp(19px, 2.4vw, 30px); line-height: 1.34; font-weight: 500; letter-spacing: -0.01em; color: #cdd6dd;
text-align:justify;}
.adresse-body strong { color: var(--ink); font-weight: 700; }
.adresse-body em { font-style: normal; }
.adresse-body .cold { color: var(--cold); }
.adresse-body .warm { color: var(--ember-soft); }
.adresse-body .adresse-end { margin-top: clamp(6px, 1.5vh, 16px); max-width: 24ch; font-weight: 700; font-size: clamp(26px, 4vw, 50px); color: var(--ink); }

/* ---------- Sections « prose » (leviers, possible, ensemble) ---------- */
.prose { max-width: 48ch; margin-top: clamp(20px, 3vh, 36px); }
.prose p { margin: 0 0 clamp(16px, 2.4vh, 26px); font-size: clamp(16px, 1.7vw, 21px); line-height: 1.5; color: #c4ccd3;text-align:justify; }
.prose p strong { color: var(--ink); font-weight: 700; }
.prose .lead { font-size: clamp(21px, 2.8vw, 32px); line-height: 1.28; font-weight: 500; letter-spacing: -0.01em; color: var(--ink); }
.big-line { margin: clamp(26px, 4vh, 44px) 0 0; max-width: 26ch; font-size: clamp(25px, 3.8vw, 48px); line-height: 1.12; font-weight: 700; letter-spacing: -0.02em; color: var(--ink);text-align:justify; }
.big-line .cold { color: var(--cold); }
.big-line .warm { color: var(--ember-soft); }

/* ---------- Carte de bascule (interstitiel cinématique) ---------- */
.interstice { position: relative; min-height: 82svh; display: flex; align-items: center; justify-content: center; text-align: center; padding: clamp(60px, 12vh, 120px) var(--gut); }
.interstice p { margin: 0; max-width: 18ch; font-size: clamp(32px, 6.5vw, 88px); line-height: 1.03; font-weight: 700; letter-spacing: -0.03em; color: var(--ink); }
.interstice .cold { color: var(--cold); }

/* ---------- SYSTÈME TERRE (console) ---------- */
.console {
  position: relative;
  border: 1px solid var(--line);
  border-top: 1px solid rgba(226, 85, 43, 0.45);
  background: linear-gradient(180deg, rgba(40, 14, 46, 0.5), rgba(8, 76, 58, 0.35));
  padding: clamp(20px, 3vw, 38px);
  font-family: var(--mono);
  box-shadow: inset 0 0 60px rgba(92, 209, 224, 0.04), inset 0 2px 34px rgba(226, 85, 43, 0.08);
}
.console-head { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); padding-bottom: 18px; border-bottom: 1px solid var(--line); }
.console-head .alert { color: var(--signal); }
.row { display: flex; align-items: baseline; gap: 16px; padding: clamp(14px, 2vh, 20px) 0; border-bottom: 1px solid var(--line-soft); }
.row-label { font-size: clamp(14px, 1.5vw, 17px); color: var(--ink); white-space: nowrap; }
.row-dots { flex: 1; border-bottom: 1px dotted var(--muted); transform: translateY(-5px); opacity: 0.35; min-width: 24px; }
.row-val { font-size: clamp(18px, 2.4vw, 30px); font-weight: 700; color: var(--signal); white-space: nowrap; font-variant-numeric: tabular-nums; }
.row-val .pfx, .row-val .sfx { color: var(--muted); font-weight: 400; font-size: 0.6em; margin: 0 0.15em; }
.row-dir { width: 1.4em; text-align: center; font-size: 14px; }
.row-dir.up { color: var(--ember); }
.row-dir.down { color: var(--cold); }
.console-foot { margin: 18px 0 0; font-size: 12px; letter-spacing: 0.1em; line-height: 1.5; color: var(--muted);text-align:justify; }
.console-foot strong { color: var(--ember-soft); font-weight: 700; }
.console-bio { margin: 18px 0 0; font-family: var(--mono); font-size: clamp(13px, 1.5vw, 16px); letter-spacing: 0.04em; line-height: 1.5; color: #c4ccd3;text-align:justify; }
.console-bio strong { color: var(--cold); }
.console-src { margin: 12px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); }
.console-src a { color: var(--cold); border-bottom: 1px solid transparent; transition: border-color 0.3s;text-align:justify; }
.console-src a:hover { border-color: var(--cold); }
.console-why { margin: 18px 0 0; }
.console-why summary { cursor: pointer; list-style: none; font-family: var(--mono); font-size: 12px; letter-spacing: 0.08em; color: var(--cold);text-align:justify; }
.console-why summary::-webkit-details-marker { display: none; }
.console-why summary::before { content: "+ "; }
.console-why[open] summary::before { content: "– "; }
.console-why p { margin: 12px 0 0; max-width: 70ch; font-size: clamp(13px, 1.5vw, 15px); line-height: 1.55; color: #aab4bc;text-align:justify; }
.console-why p strong { color: var(--ink); }
.console-why .cold { color: var(--cold); }

/* Tableau d'évolution (2010 ▸ 2087) */
.stable { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.srow {
  display: grid; grid-template-columns: 1.7fr 0.85fr 1fr 1.3fr 0.4fr;
  align-items: center; gap: clamp(8px, 1.4vw, 16px); min-width: 480px;
  padding: clamp(11px, 1.6vh, 16px) 0; border-bottom: 1px solid var(--line-soft);
}
.srow:not(.srow-head) { background: linear-gradient(90deg, transparent 38%, rgba(240, 169, 58, 0.035) 74%, rgba(226, 85, 43, 0.07)); }
.srow-head { border-bottom: 1px solid var(--line); }
.srow-head .scell { font-weight: 700; font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.srow-head .scell-proj { color: var(--signal); }
.scell { font-family: var(--mono); font-weight: 700; text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; font-size: clamp(14px, 1.7vw, 20px); }
.scell .pfx { font-weight: 400; }
.scell-label { text-align: left; font-weight: 400; color: var(--ink); font-size: clamp(13px, 1.4vw, 16px); }
.scell-label i { color: var(--muted); font-style: normal; font-size: 0.78em; letter-spacing: 0.04em; margin-left: 5px; text-transform: uppercase; }
.srow:not(.srow-head) .scell:nth-child(2) { color: var(--muted); }
.srow:not(.srow-head) .scell:nth-child(3) { color: var(--ink); }
.srow:not(.srow-head) .scell:nth-child(4) { color: var(--ember); }
.scell-dir { text-align: center; color: var(--ember); font-weight: 400; font-size: 13px; }
.console-next { margin: 18px 0 0; font-size: clamp(14px, 1.6vw, 18px); line-height: 1.5; color: #c4ccd3; max-width: 60ch; }
.console-next .cold { color: var(--cold); }

/* ---------- Section « Le droit qu'on nous vend » (pont vers Lex Angeli Terrae) ---------- */
.console-next { display: inline-block; transition: color 0.3s; }
.console-next:hover { color: var(--ink); }
.promesse-grid { display: grid; grid-template-columns: 1fr 1fr; gap: clamp(20px, 4vw, 60px); margin-top: clamp(28px, 4vh, 48px); }
.promesse-col { border-top: 1px solid var(--line); padding-top: 22px; }
.promesse-k { display: block; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; margin-bottom: 18px; }
.promesse-k.sell { color: var(--cold); }
.promesse-k.real { color: var(--ember); }
.promesse-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 14px;text-align:justify; }
.promesse-list li { position: relative; padding-left: 20px; font-size: clamp(14px, 1.5vw, 17px); line-height: 1.45; color: #b8c1c8; }
.promesse-list li::before { content: "—"; position: absolute; left: 0; color: var(--muted); }
.promesse-col:last-child .promesse-list li::before { color: var(--ember); }
.promesse-act { margin-top: clamp(34px, 5vh, 52px); text-align: center; }
.promesse-note { margin: 16px auto 0; max-width: 54ch; font-family: var(--mono); font-size: clamp(11px, 1.2vw, 13px); line-height: 1.55; letter-spacing: 0.04em; color: var(--muted); }
.promesse-note strong { color: var(--ink); font-weight: 700; }
.promesse-note .cold { color: var(--cold); }
.promesse-punch { margin: clamp(40px, 6vh, 64px) auto 0; max-width: 40ch; text-align: center; font-size: clamp(17px, 2vw, 23px); line-height: 1.4; color: var(--muted); }
.promesse-punch strong { display: block; margin-top: 10px; font-weight: 500; color: var(--ink); font-size: 1.08em; }
/* Renvoi (en fiction) vers le site de l'aïeule de Hope — Lex Angeli Terrae, 2026 */
.laet { max-width: 60ch; margin: clamp(34px, 6vh, 60px) auto 0; padding: 20px 22px; border: 1px solid var(--line); border-left: 2px solid var(--cold); background: rgba(92, 209, 224, 0.04); }
.laet-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cold); margin-bottom: 10px; }
.laet p { margin: 0 0 14px; color: #b8c2c9; font-size: 15px; line-height: 1.55; }
.laet a { display: inline-block; font-family: var(--mono); font-size: 13px; letter-spacing: 0.04em; color: var(--ink); border-bottom: 1px solid var(--cold); padding-bottom: 2px; transition: color 0.3s, border-color 0.3s; }
.laet a:hover { color: var(--cold); border-color: var(--ink); }
@media (max-width: 720px) { .promesse-grid { grid-template-columns: 1fr; gap: 28px; } }

/* ---------- LE DROIT POUR AGIR ---------- */
.block-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 16px; padding-bottom: 40px; border-bottom: 1px solid var(--line); }
.block-lead { margin: 0; max-width: 74ch; color: var(--muted); font-size: clamp(15px, 1.5vw, 18px); }
.chapters { list-style: none; margin: 0; padding: 0; }
.chapter {
  display: grid; grid-template-columns: minmax(120px, 0.4fr) 1fr;
  gap: clamp(20px, 5vw, 80px); align-items: center;
  padding: clamp(40px, 7vh, 72px) 0; border-bottom: 1px solid var(--line);
  transition: background 0.5s var(--ease);
}
.chapter:hover { background: linear-gradient(90deg, rgba(92, 209, 224, 0.05), transparent 70%); }
.chapter-no {
  font-size: clamp(56px, 9vw, 150px); font-weight: 700; line-height: 1; color: transparent;
  -webkit-text-stroke: 1px rgba(180, 215, 230, 0.22); letter-spacing: -0.04em;
  will-change: transform; transition: -webkit-text-stroke-color 0.4s;
}
.chapter:hover .chapter-no { -webkit-text-stroke-color: var(--cold); }
.chapter-body h3 { margin: 0 0 12px; font-size: clamp(24px, 3.2vw, 40px); font-weight: 500; letter-spacing: -0.01em; text-transform: uppercase; }
.chapter-body p { margin: 0; max-width: 46ch; color: #aab4bc; font-size: clamp(15px, 1.5vw, 18px); }

/* ---------- REGISTRE (dossiers) ---------- */
.dossiers .block-lead { max-width: 60ch; }
.dossier-filters { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 10px; }
.dossier-filters button {
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 9px 16px; cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s;
}
.dossier-filters button:hover { color: var(--ink); border-color: var(--cold); }
.dossier-filters button.active { color: var(--bg); background: var(--cold); border-color: var(--cold); }
.dossier-list { list-style: none; margin: 0; padding: 0; }
.dossier {
  display: grid; grid-template-columns: 60px 1fr auto auto; align-items: center;
  gap: clamp(12px, 2.4vw, 28px); padding: clamp(18px, 2.6vh, 26px) 0;
  border-bottom: 1px solid var(--line); transition: background 0.4s var(--ease);
}
.dossier:hover { background: linear-gradient(90deg, rgba(92, 209, 224, 0.05), transparent 70%); }
.dossier-code { font-family: var(--mono); font-size: 12px; letter-spacing: 0.1em; color: var(--muted); transition: color 0.3s; }
.dossier:hover .dossier-code { color: var(--cold); }
.dossier-main h3 { margin: 0 0 5px; font-size: clamp(17px, 2vw, 23px); font-weight: 500; letter-spacing: -0.01em; }
.dossier-loc { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--muted); text-transform: uppercase; margin-left: 8px; white-space: nowrap; }
.dossier-main p { margin: 0; max-width: 64ch; color: #98a3ab; font-size: clamp(13px, 1.4vw, 15px); }
.dossier-tag { font-family: var(--mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); border: 1px solid var(--line); padding: 4px 9px; white-space: nowrap; }
.dossier-status { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; white-space: nowrap; border: 1px solid currentColor; }
.st-win { color: var(--bio); }
.st-loss { color: var(--ember); }
.st-ongoing, .st-mixed { color: var(--signal); }
.st-precedent { color: var(--ink); opacity: 0.75; }
@media (max-width: 860px) {
  .dossier { grid-template-columns: auto 1fr; grid-template-areas: "code status" "main main" "tag tag"; row-gap: 10px; }
  .dossier-code { grid-area: code; }
  .dossier-status { grid-area: status; justify-self: end; }
  .dossier-main { grid-area: main; }
  .dossier-tag { grid-area: tag; justify-self: start; }
  .dossier-loc { display: block; margin: 5px 0 0; }
}

/* ---------- CITATION ---------- */
.quote { text-align: center; }
.hope-warn { text-align: center; }
.hope-warn blockquote { margin: 0 auto; max-width: 26ch; font-size: clamp(23px, 4vw, 50px); line-height: 1.18; font-weight: 600; letter-spacing: -0.015em; }
.hope-warn .cold { color: var(--cold); }
.hope-attr { margin: clamp(20px, 3vh, 32px) 0 0; font-family: var(--mono); font-size: 13px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }

/* ---------- Décodage du message (glitch / matrix) ---------- */
.decode { position: relative; z-index: 3; max-width: var(--maxw); margin: 0 auto; padding: clamp(64px, 13vh, 150px) var(--gut); }
.decode-inner { max-width: 60ch; animation: decode-skip 9s steps(1) infinite; }
/* le message "saute" : la liaison n'arrive pas à se maintenir (atténué) */
@keyframes decode-skip {
  0%, 26% { transform: translate(0, 0); }
  27% { transform: translate(0, -6px); }
  28% { transform: translate(1px, 3px); }
  29%, 58% { transform: translate(0, 0); }
  59% { transform: translate(0, 5px); }
  60% { transform: translate(-1px, -3px); }
  61%, 85% { transform: translate(0, 0); }
  86% { transform: translate(0, -4px); }
  87% { transform: translate(1px, 2px); }
  88%, 100% { transform: translate(0, 0); }
}

/* Instabilité globale : tout le HTML "reçu" a de petits accrocs, par à-coups
   (la transmission n'est pas plus stable que la vidéo). Atténué pour rester discret. */
.block, .interstice, .affaire { animation: tx-skip 9s steps(1) infinite; }
/* Très mauvaise réception : bursts d'interférence, mais plus faibles et plus espacés */
@keyframes tx-skip {
  0%, 13% { transform: translate(0, 0); filter: none; opacity: 1; }
  /* burst 1 */
  14% { transform: translate(-3px, 1px) skewX(-0.7deg); filter: brightness(1.08) contrast(1.1); opacity: 0.93; }
  15% { transform: translate(3px, -1px) skewX(0.8deg); filter: hue-rotate(3deg); opacity: 1; }
  16% { transform: translate(-2px, 1px); filter: none; opacity: 0.7; }
  17% { transform: translate(2px, -1px) skewX(-0.5deg); filter: contrast(1.15) brightness(1.06); opacity: 1; }
  18% { transform: translate(-1px, 0); filter: none; }
  19%, 43% { transform: translate(0, 0); filter: none; opacity: 1; }
  /* burst 2 */
  44% { transform: translate(3px, -1px) skewX(0.8deg); filter: brightness(1.1) hue-rotate(-4deg); opacity: 0.96; }
  45% { transform: translate(-2px, 1px) skewX(-0.4deg); filter: none; opacity: 0.65; }
  46% { transform: translate(2px, -1px) skewX(0.6deg); filter: contrast(1.15); opacity: 1; }
  47% { transform: translate(-1px, 1px); filter: brightness(1.05); }
  48%, 75% { transform: translate(0, 0); filter: none; opacity: 1; }
  /* burst 3 */
  76% { transform: translate(-3px, 1px) skewX(0.5deg); filter: brightness(1.08) contrast(1.12); opacity: 0.9; }
  77% { transform: translate(2px, -1px) skewX(-0.8deg); filter: hue-rotate(3deg); opacity: 1; }
  78% { transform: translate(-1px, 1px); filter: none; opacity: 0.7; }
  79% { transform: translate(1px, -1px) skewX(0.4deg); filter: contrast(1.1); opacity: 1; }
  80%, 100% { transform: translate(0, 0); filter: none; opacity: 1; }
}
.decode-head { margin: 0 0 24px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--signal); }
.decode-head #decode-status { color: var(--ember); }
.decode-head b { color: var(--cold); }
.decode-text { margin: 0; font-family: "Space Mono", "Noto Sans Cuneiform", ui-monospace, monospace; font-size: clamp(15px, 2vw, 24px); line-height: 1.55; color: #d6dde2; 
min-height: 7.5em; word-break: break-word;text-align:justify; }
.decode-text.scrambling { color: var(--cold); text-shadow: 1.5px 0 var(--ember), -1.5px 0 var(--cold); animation: decode-jit 0.16s steps(2) infinite; }
@keyframes decode-jit { 0% { transform: translateX(-1px); opacity: 0.9; } 50% { transform: translateX(1.2px); opacity: 1; } 100% { transform: translateX(0.4px); opacity: 0.82; } }
.decode.dying .decode-inner { animation: power-die 3s linear forwards, decode-skip 7s steps(1) infinite; }
@keyframes power-die {
  0%, 3% { opacity: 1; }
  4%, 9% { opacity: 0.03; }
  10%, 11% { opacity: 0.5; }
  12%, 19% { opacity: 0.05; }
  20%, 21% { opacity: 0.85; }
  22%, 30% { opacity: 0.07; }
  31%, 33% { opacity: 0.35; }
  34%, 41% { opacity: 0.12; }
  42%, 44% { opacity: 0.7; }
  45%, 53% { opacity: 0.05; }
  54%, 56% { opacity: 0.9; }
  57%, 65% { opacity: 0.1; }
  66%, 69% { opacity: 0.45; }
  70%, 78% { opacity: 0.16; }
  79%, 83% { opacity: 0.8; }
  84%, 100% { opacity: 1; }
}
.decode-sign { margin: 22px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.quote blockquote { margin: 0 auto; max-width: 20ch; font-size: clamp(30px, 5.2vw, 84px); line-height: 1.06; font-weight: 500; letter-spacing: -0.02em; }

/* ---------- LA TRAVERSÉE (28 affaires) ---------- */
.traverse { position: relative; background: linear-gradient(180deg, rgba(8, 11, 14, 0), rgba(8, 11, 14, 0.5)); }
.traverse-pin { position: sticky; top: 0; height: 100svh; overflow: hidden; display: flex; align-items: center; }
.traverse-head { position: absolute; top: clamp(84px, 12vh, 120px); left: 0; right: 0; display: flex; justify-content: space-between; align-items: baseline; gap: 16px; padding: 0 var(--gut); z-index: 3; pointer-events: none; }
.traverse-head .label { margin: 0; }
.traverse-year { margin: 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); }
.traverse-year b { color: var(--cold); font-size: 17px; margin-left: 6px; }
.traverse-track { display: flex; align-items: stretch; gap: clamp(16px, 2vw, 28px); padding: 0 var(--gut); will-change: transform; }
.traverse-hint { position: absolute; bottom: clamp(24px, 5vh, 48px); left: var(--gut); margin: 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); z-index: 3; pointer-events: none; }
.station {
  flex: 0 0 clamp(280px, 33vw, 410px); align-self: center; min-height: 52vh;
  display: flex; flex-direction: column; justify-content: flex-end; gap: 14px;
  padding: clamp(22px, 2vw, 30px); border: 1px solid var(--line); border-top: 2px solid var(--cold);
  background: linear-gradient(180deg, rgba(12, 16, 20, 0.25), rgba(8, 11, 14, 0.55));
  transition: transform 0.4s var(--ease), border-color 0.4s;
}
.station:hover { transform: translateY(-6px); }
.station-year { font-family: var(--mono); font-weight: 700; font-size: clamp(30px, 4vw, 58px); line-height: 1; color: var(--ink); letter-spacing: 0.01em; }
.station-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--muted); }
.station-title { margin: 4px 0 0; font-size: clamp(19px, 2.1vw, 28px); font-weight: 600; line-height: 1.06; letter-spacing: -0.01em; }
.station-human { margin: 0; color: #a6b0b8; font-size: clamp(13px, 1.4vw, 15px); line-height: 1.45; }
.station-verdict { align-self: flex-start; margin-top: 4px; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; color: var(--cold); }
.station-legal { margin-top: 2px; }
.station-legal summary { list-style: none; cursor: pointer; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; color: var(--muted); transition: color 0.3s; }
.station-legal summary::-webkit-details-marker { display: none; }
.station-legal summary:hover { color: var(--ink); }
.station-legal[open] summary { color: var(--cold); }
.station-legal p { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: #8b969e; border-left: 1px solid var(--line); padding-left: 12px; }
.station.st-loss { border-top-color: var(--ember); } .station.st-loss .station-verdict { color: var(--ember); }
.station.st-ongoing, .station.st-mixed { border-top-color: var(--signal); }
.station.st-ongoing .station-verdict, .station.st-mixed .station-verdict { color: var(--signal); }
.station.st-precedent { border-top-color: #cdd6dd; } .station.st-precedent .station-verdict { color: #cdd6dd; }
.station.st-win { border-top-color: var(--bio); } .station.st-win .station-verdict { color: var(--bio); }
.station--end { border-top-color: var(--ember); justify-content: center; background: linear-gradient(180deg, rgba(226, 85, 43, 0.1), rgba(8, 11, 14, 0.6)); }
.station--end .station-year { color: var(--ember); }
.station-cta { align-self: flex-start; margin-top: 10px; font-family: var(--mono); font-size: 12px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ink); border: 1px solid var(--cold); padding: 11px 18px; pointer-events: auto; transition: background 0.3s, color 0.3s, border-color 0.3s; }
.station-cta:hover { background: var(--ember); border-color: var(--ember); color: #fff; }

/* Terminus verrouillé — terminal AS/400, phosphore vert fluo */
.station--locked { border-top-color: #2bff5a; background: linear-gradient(180deg, rgba(0, 255, 80, 0.06), rgba(4, 8, 6, 0.72)); }
.as400 {
  position: relative; margin: 0 0 6px; border: 1px solid rgba(43, 255, 90, 0.55);
  background: #02160a; border-radius: 4px; overflow: hidden;
  box-shadow: 0 0 22px rgba(0, 255, 80, 0.22), inset 0 0 36px rgba(0, 255, 80, 0.07);
  animation: as400-corrupt 7s steps(1) infinite;
}
@keyframes as400-corrupt {
  0%, 40%, 44%, 70%, 73%, 100% { filter: none; transform: translate(0, 0); }
  41% { filter: hue-rotate(-45deg) brightness(1.4) contrast(1.3); transform: translate(-2px, 0); }
  42% { filter: hue-rotate(35deg) saturate(2); transform: translate(2px, 1px); }
  43% { filter: invert(0.15) brightness(1.2); transform: translate(-1px, 0); }
  71% { filter: brightness(0.45) hue-rotate(90deg); transform: translate(1px, -1px); }
  72% { filter: contrast(1.6) saturate(1.6); transform: translate(-1px, 1px); }
}
.as400-bar {
  font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.16em; text-transform: uppercase;
  color: #7dffaa; background: rgba(0, 255, 80, 0.1); padding: 6px 10px;
  border-bottom: 1px solid rgba(43, 255, 90, 0.4);
}
.as400-screen {
  position: relative; z-index: 1; margin: 0; padding: 13px 12px 15px;
  font-family: var(--mono); font-size: clamp(11px, 1.3vw, 13.5px); line-height: 1.75;
  color: #2bff5a; text-shadow: 0 0 6px rgba(0, 255, 80, 0.65);
  white-space: pre-wrap; word-break: break-word;
}
.as400-dim { color: rgba(43, 255, 90, 0.5); text-shadow: none; }
.as400-err { color: #c6ff2e; text-shadow: 0 0 8px rgba(180, 255, 0, 0.6); }
.as400::after {
  content: ""; position: absolute; inset: 0; z-index: 2; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.22) 2px 3px);
}
.blink-hard { animation: blink-hard 1.05s steps(1) infinite; }
.as400-cur { animation: blink-hard 0.8s steps(1) infinite; }
@keyframes blink-hard { 0%, 58% { opacity: 1; } 59%, 100% { opacity: 0; } }

/* Effet radioactif léger sur chaque dossier */
.station { position: relative; overflow: hidden; }
.station > * { position: relative; z-index: 1; }
.station:not(.station--end)::after {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: radial-gradient(55% 38% at 86% 14%, rgba(150, 230, 95, 0.12), transparent 70%);
  mix-blend-mode: screen; animation: rad-pulse 4.5s ease-in-out infinite;
}
.station:not(.station--end)::before {
  content: "\2622"; position: absolute; top: 14px; right: 16px; z-index: 1; pointer-events: none;
  font-size: 13px; line-height: 1; color: rgba(150, 230, 95, 0.45);
  text-shadow: 0 0 8px rgba(150, 230, 95, 0.5); animation: rad-pulse 4.5s ease-in-out infinite;
}
.station:nth-child(3n)::before, .station:nth-child(3n)::after { animation-delay: -1.6s; }
.station:nth-child(3n+1)::before, .station:nth-child(3n+1)::after { animation-delay: -3.1s; }
@keyframes rad-pulse { 0%, 100% { opacity: 0.3; } 50% { opacity: 0.85; } }
@media (max-width: 820px) {
  .traverse { height: auto !important; }
  .traverse-pin { position: static; height: auto; display: block; overflow: visible; padding: clamp(80px, 12vh, 120px) 0; }
  .traverse-head { position: static; margin: 0 0 26px; }
  .traverse-hint { display: none; }
  .traverse-track { flex-direction: column; transform: none !important; gap: 16px; }
  .station { flex: none; width: 100%; min-height: 0; }
}

/* ---------- Bouton d'ouverture de dossier ---------- */
.station-open { align-self: flex-start; margin-top: 6px; background: none; border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; padding: 9px 14px; cursor: pointer; transition: color 0.3s, border-color 0.3s, background 0.3s; }
.station-open:hover { color: var(--bg); background: var(--cold); border-color: var(--cold); }

/* ---------- DOSSIER (overlay preuves & sources) ---------- */
.dossier-overlay { position: fixed; inset: 0; z-index: 120; display: none; align-items: center; justify-content: center; padding: clamp(16px, 4vw, 48px); background: rgba(4, 6, 8, 0.72); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.dossier-overlay.open { display: flex; animation: do-in 0.3s var(--ease); }
@keyframes do-in { from { opacity: 0; } to { opacity: 1; } }
.dossier-vortex { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.dossier-overlay .dossier-modal { z-index: 1; }
.dossier-overlay.open .dossier-vortex::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background:
    repeating-radial-gradient(circle at center, rgba(92, 209, 224, 0.22) 0 2px, transparent 2px 32px),
    conic-gradient(from 0deg, rgba(157, 107, 255, 0.34), rgba(92, 209, 224, 0.30), rgba(226, 85, 43, 0.26), rgba(157, 107, 255, 0.34));
  filter: blur(0.4px);
  animation: vortex 1.15s var(--ease) both;
}
@keyframes vortex {
  0% { transform: scale(0.04) rotate(-45deg); opacity: 0; }
  22% { opacity: 1; }
  100% { transform: scale(2.3) rotate(370deg); opacity: 0; }
}
.dossier-overlay.open .dossier-modal { animation: do-modal 0.7s var(--ease) both; }
@keyframes do-modal { from { transform: scale(0.74) translateY(14px); opacity: 0; } to { transform: scale(1) translateY(0); opacity: 1; } }
.dossier-modal { position: relative; width: min(720px, 100%); max-height: 86vh; overflow-y: auto; background: linear-gradient(180deg, rgba(12, 16, 20, 0.96), rgba(8, 11, 14, 0.98)); border: 1px solid var(--cold); box-shadow: 0 0 60px rgba(92, 209, 224, 0.12); padding: clamp(28px, 4vw, 52px); }
.dossier-close { position: absolute; top: 14px; right: 14px; background: none; border: 1px solid var(--line); color: var(--muted); width: 38px; height: 38px; cursor: pointer; font-size: 15px; transition: color 0.3s, border-color 0.3s; }
.dossier-close:hover { color: var(--ink); border-color: var(--ember); }
.do-figure { margin: 0 0 22px; border: 1px solid var(--line); background: #0a0d11; }
.do-figure img { display: block; width: 100%; max-height: 340px; object-fit: cover; }
.do-figure figcaption { font-family: var(--mono); font-size: 10px; letter-spacing: 0.05em; color: var(--muted); padding: 8px 12px; }
.do-meta { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--muted); margin: 0 0 14px; }
.do-title { margin: 0 0 16px; font-size: clamp(26px, 4vw, 44px); font-weight: 700; line-height: 1.04; letter-spacing: -0.02em; }
.do-verdict { display: inline-block; font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 5px 10px; border: 1px solid currentColor; color: var(--cold); }
.do-verdict.st-loss { color: var(--ember); }
.do-verdict.st-ongoing, .do-verdict.st-mixed { color: var(--signal); }
.do-verdict.st-precedent { color: #cdd6dd; }
.do-verdict.st-win { color: var(--bio); }
.do-human { margin: 20px 0 0; font-size: clamp(16px, 1.8vw, 20px); line-height: 1.5; color: #d4dbe0; }
.do-block { margin-top: 28px; padding-top: 22px; border-top: 1px solid var(--line); }
.do-k { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.18em; text-transform: uppercase; color: var(--cold); margin-bottom: 12px; }
.do-block > p { margin: 0; color: #aab4bc; font-size: 15px; line-height: 1.5; }
.do-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.do-list li { font-size: 14px; line-height: 1.4; }
.do-list a { color: var(--ink); border-bottom: 1px solid var(--cold); padding-bottom: 1px; }
.do-list a:hover { color: var(--cold); }
.do-photo { font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ember-soft); margin-left: 6px; white-space: nowrap; }
.do-src { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; padding: 12px 0; border-bottom: 1px solid var(--line-soft); }
.do-badge { font-family: var(--mono); font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; padding: 3px 8px; border: 1px solid currentColor; white-space: nowrap; }
.do-badge.k-law { color: var(--cold); }
.do-badge.k-press { color: var(--signal); }
.do-badge.k-photo { color: var(--ember-soft); }
.do-badge.k-report { color: var(--violet); }
.do-note { margin: 16px 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.05em; color: var(--muted); }
.do-pending { margin: 0; font-family: var(--mono); font-size: 13px; color: var(--signal); }

/* ---------- Page individuelle d'une affaire ---------- */
/* Fond : la vraie photo de la catastrophe, en filigrane semi-transparent */
.affaire-bg {
  position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background-size: cover; background-position: center;
  opacity: 0; transition: opacity 1.4s ease;
  filter: grayscale(0.12) contrast(1.04) brightness(0.82) saturate(0.95);
}
.affaire-bg.on { opacity: 0.22; }
.affaire-bg::after {
  content: ""; position: absolute; inset: 0;
  background: radial-gradient(130% 100% at 50% 0%, transparent 0%, rgba(6, 8, 10, 0.35) 62%, rgba(6, 8, 10, 0.72) 100%);
}
.affaire { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; padding: clamp(28px, 5vh, 60px) var(--gut) clamp(60px, 12vh, 120px); }
.affaire .do-title { margin-top: 6px; }
.do-back { font-family: var(--mono); font-size: 13px; letter-spacing: 0.1em; color: var(--cold); transition: color 0.3s; }
.do-back:hover { color: var(--ember); }
.do-nav { margin-top: 44px; padding-top: 22px; border-top: 1px solid var(--line); }
.page-vortex { position: fixed; inset: 0; z-index: 90; pointer-events: none; overflow: hidden; }
.page-vortex::before {
  content: ""; position: absolute; left: 50%; top: 50%;
  width: 240vmax; height: 240vmax; margin: -120vmax 0 0 -120vmax;
  background:
    repeating-radial-gradient(circle at center, rgba(92, 209, 224, 0.20) 0 2px, transparent 2px 34px),
    conic-gradient(from 0deg, rgba(157, 107, 255, 0.30), rgba(92, 209, 224, 0.26), rgba(226, 85, 43, 0.22), rgba(157, 107, 255, 0.30));
  filter: blur(0.4px);
  animation: vortex 1.05s var(--ease) both;
}

/* ---------- NEWSLETTER (transmission) ---------- */
.newsletter { text-align: center; }
.newsletter .label { text-align: center; }
.newsletter .label::before { display: none; }
.newsletter-lead { margin: 0 auto clamp(28px, 4vh, 44px); max-width: 52ch; color: #c4ccd3; font-size: clamp(15px, 1.6vw, 19px); }
.nl-form { max-width: 640px; margin: 0 auto; }
.nl-field { display: flex; align-items: center; gap: 12px; border: 1px solid var(--line); background: rgba(10, 14, 18, 0.5); padding: 10px 10px 10px 18px; -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px); transition: border-color 0.3s, box-shadow 0.3s; }
.nl-field:focus-within { border-color: var(--cold); box-shadow: 0 0 0 1px var(--cold), 0 0 30px rgba(92, 209, 224, 0.15); }
.nl-prompt { font-family: var(--mono); color: var(--cold); font-size: 18px; }
.nl-input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--ink); font-family: var(--mono); font-size: clamp(14px, 1.5vw, 16px); letter-spacing: 0.04em; caret-color: var(--cold); }
.nl-input::placeholder { color: var(--muted); }
.nl-hp { position: absolute; left: -9999px; width: 1px; height: 1px; opacity: 0; pointer-events: none; }
.nl-submit { flex: none; background: var(--cold); color: var(--bg); border: 0; font-family: var(--mono); font-size: 12px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; padding: 13px 20px; cursor: pointer; transition: background 0.3s, color 0.3s; }
.nl-submit:hover { background: var(--ember); color: #fff; }
.nl-submit:disabled { opacity: 0.5; cursor: default; }
.nl-status { min-height: 1.2em; margin: 16px 0 0; font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; }
.nl-status.ok { color: var(--cold); }
.nl-status.err { color: var(--ember); }
.newsletter-fine { margin: clamp(24px, 3vh, 34px) 0 0; font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--muted); }
.newsletter-fine b { color: var(--ink); }
.newsletter-coda { margin: clamp(34px, 5vh, 56px) auto 0; max-width: 42ch; font-size: clamp(16px, 1.9vw, 22px); line-height: 1.4; color: #c4ccd3; }
.newsletter-coda .cold { color: var(--cold); }
@media (max-width: 560px) { .nl-field { flex-wrap: wrap; } .nl-submit { width: 100%; } }

/* ---------- CTA ---------- */
.cta { text-align: center; }
.cta .label { text-align: center; }
.cta .label::before { display: none; }
.cta-title { margin: 0 auto clamp(36px, 5vh, 56px); max-width: 18ch; font-size: clamp(32px, 6vw, 92px); line-height: 1.0; font-weight: 700; letter-spacing: -0.025em; text-transform: uppercase; }
.btn {
  display: inline-flex; align-items: center; gap: 14px; padding: 18px 34px;
  border: 1px solid var(--cold); font-family: var(--mono); font-size: 13px;
  letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink);
  position: relative; overflow: hidden; isolation: isolate;
  transition: color 0.4s var(--ease), border-color 0.4s var(--ease);
}
.btn::before { content: ""; position: absolute; inset: 0; z-index: -1; background: var(--ember); transform: translateY(101%); transition: transform 0.45s var(--ease); }
.btn:hover { color: #fff; border-color: var(--ember); }
.btn:hover::before { transform: translateY(0); }
.btn-arrow { transition: transform 0.4s var(--ease); }
.btn:hover .btn-arrow { transform: translate(3px, -3px); }

/* ---------- FOOTER ---------- */
.footer {
  position: relative; z-index: 3; display: flex; flex-wrap: wrap; gap: 16px;
  align-items: center; justify-content: space-between; padding: 40px var(--gut);
  border-top: 1px solid var(--line); font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted);
}
.footer-mid { opacity: 0.75; }
.footer-nav { display: flex; gap: 24px; }
.footer-nav a:hover { color: var(--ink); }

/* ---------- Pages légales (mentions, confidentialité) ---------- */
.legal-top { padding: clamp(18px, 3vw, 28px) var(--gut); border-bottom: 1px solid var(--line); position: relative; z-index: 3; }
.legal-back { font-family: var(--mono); font-size: 13px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); transition: color 0.3s; }
.legal-back:hover { color: var(--cold); }
.legal { position: relative; z-index: 3; max-width: 760px; margin: 0 auto; padding: clamp(34px, 6vh, 72px) var(--gut) clamp(60px, 12vh, 120px); }
.legal h1 { font-size: clamp(30px, 5vw, 52px); font-weight: 700; letter-spacing: -0.02em; line-height: 1.06; margin: 12px 0 8px; }
.legal h2 { font-size: clamp(17px, 2.1vw, 22px); font-weight: 600; color: var(--ink); margin: 36px 0 10px; }
.legal p, .legal li { color: #bcc6cd; font-size: clamp(15px, 1.6vw, 17px); line-height: 1.6; }
.legal ul { margin: 0; padding-left: 1.2em; }
.legal li { margin-bottom: 8px; }
.legal a { color: var(--cold); border-bottom: 1px solid var(--cold); }
.legal a:hover { color: var(--ember); border-color: var(--ember); }
.legal strong { color: var(--ink); }
.legal .todo { color: var(--signal); font-family: var(--mono); font-size: 0.88em; }

/* ---------- Reveal ---------- */
[data-reveal] { opacity: 0; transform: translateY(26px); transition: opacity 0.9s var(--ease), transform 0.9s var(--ease); }
[data-reveal].in { opacity: 1; transform: none; }

/* ---------- Responsive ---------- */
@media (max-width: 820px) {
  .hud-readout { position: static; text-align: left; margin: 96px 0 24px; align-items: flex-start; }
}
@media (max-width: 720px) {
  .brand-name { display: none; }
  .topnav a:not(.nav-cta) { display: none; }
  .chapter { grid-template-columns: 1fr; gap: 18px; }
  .chapter-no { font-size: clamp(60px, 22vw, 110px); }
  .hero-sub { max-width: none; }
  .row { flex-wrap: wrap; }
  .row-dots { display: none; }
}

/* ---------- Boot / transmission ---------- */
.boot {
  position: fixed; inset: 0; z-index: 200;
  display: flex; align-items: center; justify-content: center;
  background: #050708; color: var(--cold); font-family: var(--mono); overflow: hidden;
}
.boot::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, rgba(0, 0, 0, 0.22) 0 1px, transparent 1px 3px);
  opacity: 0.5;
}
.boot.done { animation: boot-out 0.6s var(--ease) forwards; }
@keyframes boot-out { to { opacity: 0; visibility: hidden; transform: translateY(-14px); } }
.boot-inner { width: min(680px, 86vw); position: relative; z-index: 1; }
.boot-log { margin: 0; font-size: clamp(11px, 1.4vw, 14px); letter-spacing: 0.08em; line-height: 2.1; color: var(--cold); }
.boot-log span { display: block; opacity: 0; transform: translateY(4px); }
.boot-log span.show { opacity: 0.85; transform: none; transition: opacity 0.25s, transform 0.25s; }
.boot-bar { height: 2px; margin: 20px 0; background: rgba(92, 209, 224, 0.15); overflow: hidden; }
.boot-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--cold-deep), var(--cold)); transition: width 0.9s var(--ease); box-shadow: 0 0 12px var(--cold); }
.boot-title { font-family: var(--display); font-weight: 700; text-transform: uppercase; letter-spacing: -0.01em; font-size: clamp(30px, 8vw, 92px); color: var(--ink); line-height: 0.9; opacity: 0; transform: translateY(6px); }
.boot-title.show { opacity: 1; transform: none; transition: opacity 0.5s var(--ease), transform 0.5s var(--ease); text-shadow: 0 0 34px rgba(92, 209, 224, 0.45); }
.boot-skip {
  position: absolute; bottom: 22px; right: 22px; z-index: 1;
  background: none; border: 1px solid var(--line); color: var(--muted);
  font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em;
  text-transform: uppercase; padding: 8px 14px; cursor: pointer;
  transition: color 0.3s, border-color 0.3s;
}
.boot-skip:hover { color: var(--ink); border-color: var(--cold); }
.boot-lock { overflow: hidden; }

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation: none !important; transition: none !important; }
  [data-reveal] { opacity: 1; transform: none; }
  .crt::before { opacity: 0.4; }
  .dossier-vortex { display: none; }
  .page-vortex { display: none; }
  .traverse { height: auto !important; }
  .traverse-pin { position: static; height: auto; display: block; overflow: visible; padding: 90px 0; }
  .traverse-head { position: static; margin: 0 0 26px; }
  .traverse-hint { display: none; }
  .traverse-track { flex-direction: column; transform: none !important; gap: 16px; }
  .station { flex: none; width: 100%; min-height: 0; }
}


/* ===================== DÉCRYPTAGES (articles de fond) ===================== */
.decryptages .decryptage-list { display: grid; gap: 18px; margin-top: clamp(18px, 3vh, 32px); }
.dz-card { display: block; border: 1px solid var(--line); border-left: 2px solid var(--cold); background: rgba(92, 209, 224, 0.03); padding: 20px 22px; transition: border-color 0.3s, background 0.3s, transform 0.3s; }
.dz-card:hover { border-color: var(--cold); background: rgba(92, 209, 224, 0.06); transform: translateX(3px); }
.dz-kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--cold); }
.dz-title { margin: 8px 0; font-size: clamp(19px, 2.4vw, 27px); line-height: 1.12; letter-spacing: -0.01em; }
.dz-lede { margin: 0 0 12px; color: #aeb8bf; font-size: 15px; line-height: 1.55; }
.dz-go { font-family: var(--mono); font-size: 12px; letter-spacing: 0.06em; color: var(--ink); border-bottom: 1px solid var(--cold); padding-bottom: 2px; }

/* Page article (lecture calme) */
.article { position: relative; z-index: 3; max-width: 720px; margin: 0 auto; padding: clamp(28px, 5vh, 60px) var(--gut) clamp(60px, 12vh, 120px); }
.art-kicker { font-family: var(--mono); font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--cold); margin: 0 0 14px; }
.art-title { font-size: clamp(28px, 5vw, 50px); line-height: 1.05; letter-spacing: -0.02em; margin: 0 0 18px; }
.art-lede { font-size: clamp(17px, 2.2vw, 22px); line-height: 1.5; color: #cdd6dd; margin: 0; }
.art-body { margin-top: clamp(22px, 4vh, 40px); }
.art-body h2 { font-size: clamp(20px, 2.6vw, 29px); line-height: 1.14; margin: clamp(32px, 5vh, 50px) 0 12px; color: var(--ink); letter-spacing: -0.01em; }
.art-body p { font-size: 16.5px; line-height: 1.72; color: #c4ced5; margin: 0 0 16px; }
.art-body strong { color: var(--ink); font-weight: 600; }
.art-body em { font-style: italic; color: var(--cold); }
.art-body blockquote { margin: clamp(24px, 4vh, 40px) 0; padding: 6px 0 6px 22px; border-left: 2px solid var(--ember); font-size: clamp(19px, 2.6vw, 26px); line-height: 1.32; font-weight: 500; color: var(--ink); }

/* Iceberg de la qualité de victime */
.iceberg { margin: clamp(28px, 5vh, 46px) 0; border: 1px solid var(--line); border-radius: 5px; overflow: hidden; background: linear-gradient(180deg, #0b2734 0%, #0a1d29 22%, #07131c 46%, #050b12 72%, #01040800 100%), linear-gradient(180deg, #0b2734, #010406); }
.ice-cap { font-family: var(--mono); font-size: 11px; letter-spacing: 0.16em; text-transform: uppercase; color: #bfe9f2; padding: 12px 16px; border-bottom: 1px solid rgba(92, 209, 224, 0.22); background: rgba(92, 209, 224, 0.07); }
.ice-strata { display: flex; flex-direction: column; }
.ice-band { padding: 15px 18px; border-top: 1px solid rgba(255, 255, 255, 0.04); }
.ice-band b { display: block; font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; margin-bottom: 4px; }
.ice-band span { font-size: 14.5px; line-height: 1.5; }
.ice-air { color: #eaf6fa; } .ice-air b { color: var(--cold); }
.ice-line { text-align: center; font-family: var(--mono); font-size: 10px; letter-spacing: 0.22em; text-transform: uppercase; color: rgba(92, 209, 224, 0.65); padding: 6px; background: rgba(92, 209, 224, 0.09); border-top: 1px solid rgba(92, 209, 224, 0.25); border-bottom: 1px solid rgba(92, 209, 224, 0.25); }
.ice-s1 { color: #bccdd5; } .ice-s1 b { color: #8fb6c2; }
.ice-s2 { color: #91a6b0; } .ice-s2 b { color: #6f97a4; }
.ice-s3 { color: #6a838e; } .ice-s3 b { color: #5e8493; }
.ice-floor { background: rgba(0, 0, 0, 0.4); } .ice-floor b { color: #5e7d6e; } .ice-floor span { color: #455258; }

/* ===================== Pages affaires statiques (SEO) ===================== */
.afflaires-index { max-width: 1100px; }
.aff-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; margin: clamp(24px, 4vh, 42px) 0; }
.aff-card { display: flex; flex-direction: column; border: 1px solid var(--line); background: rgba(10, 16, 20, 0.4); overflow: hidden; transition: border-color 0.3s, transform 0.3s; }
.aff-card:hover { border-color: var(--cold); transform: translateY(-3px); }
.aff-card-img { display: block; height: 210px; background-size: cover; background-position: center; filter: grayscale(0) contrast(1.02) brightness(1.25); }
.aff-card-noimg { background: linear-gradient(135deg, rgba(92, 209, 224, 0.14), rgba(157, 107, 255, 0.1) 55%, rgba(8, 12, 15, 0.6)); }
.aff-card-body { display: flex; flex-direction: column; gap: 9px; padding: 16px 18px; }
.aff-card-meta { font-family: var(--mono); font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--muted); }
.aff-card-t { font-size: 18px; line-height: 1.18; font-weight: 600; letter-spacing: -0.01em; }
.aff-card .do-verdict { align-self: flex-start; }
/* "À lire aussi" en bas de fiche */
.rel-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; margin-top: 6px; }
.rel-card { display: flex; flex-direction: column; gap: 4px; padding: 12px 14px; border: 1px solid var(--line); border-left: 2px solid var(--cold); background: rgba(92, 209, 224, 0.03); transition: background 0.3s, border-color 0.3s; }
.rel-card:hover { background: rgba(92, 209, 224, 0.07); border-color: var(--cold); }
.rel-year { font-family: var(--mono); font-size: 11px; letter-spacing: 0.1em; color: var(--cold); }
.rel-t { font-size: 14px; line-height: 1.25; color: var(--ink); }

/* ===================== Page /donnees (données planétaires) ===================== */
.do-frame { position: relative; border: 1px solid var(--line); padding: clamp(28px, 5vh, 46px) clamp(22px, 4vw, 38px); margin-bottom: clamp(20px, 3vh, 32px);
  background: radial-gradient(120% 140% at 0% 0%, rgba(92, 209, 224, 0.08), transparent 55%), rgba(10, 16, 20, 0.45); }
.do-frame .frame-corner { position: absolute; width: 18px; height: 18px; border: 1px solid var(--cold); pointer-events: none; }
.do-frame .frame-corner:nth-child(1) { top: -1px; left: -1px; border-right: 0; border-bottom: 0; }
.do-frame .frame-corner:nth-child(2) { top: -1px; right: -1px; border-left: 0; border-bottom: 0; }
.do-frame .frame-corner:nth-child(3) { bottom: -1px; left: -1px; border-right: 0; border-top: 0; }
.do-frame .frame-corner:nth-child(4) { bottom: -1px; right: -1px; border-left: 0; border-top: 0; }
.do-frame .do-title { margin-top: 0; }
.do-frame .do-human { margin-bottom: 0; }
.data-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 18px; margin: clamp(24px, 4vh, 42px) 0; }
.data-card { position: relative; display: flex; flex-direction: column; gap: 9px; padding: 24px 24px 20px; border: 1px solid var(--line); border-top: 2px solid var(--accent, var(--cold)); background:
    radial-gradient(120% 140% at 0% 0%, color-mix(in srgb, var(--accent, var(--cold)) 10%, transparent), transparent 60%),
    rgba(10, 16, 20, 0.45);
  overflow: hidden; transition: border-color 0.3s, transform 0.3s, background 0.3s, box-shadow 0.3s; }
.data-card:hover { border-color: var(--accent, var(--cold)); transform: translateY(-4px); box-shadow: 0 18px 34px -18px color-mix(in srgb, var(--accent, var(--cold)) 55%, transparent); }
.data-tag { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--accent, var(--cold)); }
.data-num { font-family: var(--display); font-weight: 700; font-size: clamp(34px, 5.5vw, 52px); line-height: 0.95; letter-spacing: -0.02em; color: var(--ink);
  text-shadow: 0 0 26px color-mix(in srgb, var(--accent, var(--cold)) 45%, transparent); }
.data-unit { font-size: 0.42em; margin-left: 4px; color: var(--accent, var(--cold)); letter-spacing: 0; }
.data-lbl { font-size: 15.5px; line-height: 1.25; font-weight: 600; color: var(--ink); }
.data-sub { font-size: 13.5px; line-height: 1.5; color: #aeb8bf; }
.data-src { margin-top: auto; padding-top: 6px; font-family: var(--mono); font-size: 11.5px; letter-spacing: 0.04em; color: var(--accent, var(--cold)); border-bottom: 1px solid transparent; align-self: flex-start; transition: border-color 0.3s, color 0.3s; }
.data-src:hover { border-color: var(--accent, var(--cold)); color: var(--bio-soft); }

.data-chart { display: block; width: 100%; height: 56px; margin: 2px 0 -4px; }
.data-chart-axis { display: flex; justify-content: space-between; font-family: var(--mono); font-size: 10px; letter-spacing: 0.06em; color: var(--muted); margin-bottom: 2px; }

/* ===================== Page /transmission (contact) ===================== */
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 16px; margin: clamp(24px, 4vh, 42px) 0; }
.tx-card { display: flex; flex-direction: column; gap: 10px; padding: 24px 22px; border: 1px solid var(--line); background: rgba(10, 16, 20, 0.45); transition: border-color 0.3s, transform 0.3s; }
.tx-card:hover { border-color: var(--cold); transform: translateY(-3px); }
.tx-ico { font-size: 26px; line-height: 1; color: var(--cold); text-shadow: 0 0 18px rgba(92, 209, 224, 0.4); }
.tx-h { font-size: 18px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }
.tx-p { margin: 0; font-size: 14px; line-height: 1.55; color: #aeb8bf; }
.tx-act { margin-top: auto; font-family: var(--mono); font-size: 13px; letter-spacing: 0.02em; color: var(--ink); border-bottom: 1px solid var(--cold); padding-bottom: 2px; align-self: flex-start; transition: color 0.3s, border-color 0.3s; word-break: break-word; }
a.tx-act:hover { color: var(--cold); border-color: var(--ink); }
.tx-soon { color: var(--muted); border-bottom-style: dashed; cursor: default; }

/* ===================== Menu cyber — terminal AS/400 (barre de navigation) ===================== */
.topbar--term { mix-blend-mode: normal; pointer-events: none; }
.topbar--term .brand, .topbar--term .topnav { pointer-events: auto; }

/* La marque passe au phosphore vert */
.topbar--term .brand { color: #2bff5a; text-shadow: 0 0 7px rgba(0, 255, 80, 0.5); }
.topbar--term .brand-mark { border-color: rgba(43, 255, 90, 0.7); box-shadow: 0 0 10px rgba(0, 255, 80, 0.28), inset 0 0 8px rgba(0, 255, 80, 0.14); }
.topbar--term .brand-sep { color: rgba(43, 255, 90, 0.45); }

/* Le menu = un écran de terminal vivant */
.topbar--term .topnav {
  position: relative; overflow: hidden;
  gap: clamp(12px, 1.7vw, 24px);
  padding: 15px clamp(14px, 1.7vw, 22px); border-radius: 4px;
  background: rgba(2, 16, 8, 0.62);
  border: 1px solid rgba(43, 255, 90, 0.4);
  box-shadow: 0 0 20px rgba(0, 255, 80, 0.16), inset 0 0 26px rgba(0, 255, 80, 0.06);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
  transform-origin: center center; will-change: transform, opacity, filter;
  animation: tv-cut 11s linear infinite;
}
/* vieille TV : le menu se contracte, s'éteint ~1,5 s, puis se rallume */
@keyframes tv-cut {
  0%, 80% { transform: scale(1); opacity: 1; filter: brightness(1); }
  81.5%   { transform: scaleX(1.05) scaleY(0.02); opacity: 1; filter: brightness(2.6); }   /* écrasement en ligne, flash */
  83.5%   { transform: scaleX(0.012) scaleY(0.012); opacity: 0.85; filter: brightness(3); } /* la ligne se réduit en point */
  84.5%, 98% { transform: scaleX(0.012) scaleY(0); opacity: 0; filter: brightness(1); }      /* noir ~1,5 s */
  99%     { transform: scaleX(1.06) scaleY(0.02); opacity: 1; filter: brightness(2.3); }     /* rallumage : la ligne revient */
  99.6%   { transform: scaleX(1) scaleY(1.08); opacity: 1; filter: brightness(1.5); }        /* léger rebond */
  100%    { transform: scale(1); opacity: 1; filter: brightness(1); }
}
/* on ne coupe pas pendant qu'on s'en sert */
.topbar--term .topnav:hover { animation-play-state: paused; }
/* lignes de balayage statiques */
.topbar--term .topnav::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background: repeating-linear-gradient(0deg, transparent 0 2px, rgba(0, 0, 0, 0.16) 2px 3px);
}
/* faisceau de scan qui balaie le menu ("ça charge") */
.topbar--term .topnav::after {
  content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 38%; z-index: 0; pointer-events: none;
  background: linear-gradient(90deg, transparent, rgba(0, 255, 80, 0.16), transparent);
  animation: nav-scan 4.6s linear infinite;
}
@keyframes nav-scan { 0% { transform: translateX(-130%); } 100% { transform: translateX(360%); } }

.topbar--term .nav-prompt {
  position: relative; z-index: 1; white-space: nowrap;
  font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase;
  color: rgba(125, 255, 170, 0.72); text-shadow: 0 0 6px rgba(0, 255, 80, 0.4);
}

/* éléments du menu — phosphore + préfixe terminal */
.topbar--term .topnav a {
  position: relative; z-index: 1; opacity: 1;
  color: #2bff5a; text-shadow: 0 0 6px rgba(0, 255, 80, 0.5);
  transition: transform 0.35s var(--ease), opacity 0.3s, color 0.25s, text-shadow 0.25s;
}
.topbar--term .topnav a::before { content: "> "; color: rgba(43, 255, 90, 0.45); }
.topbar--term .topnav a::after { display: none; }
/* déstructuré : chaque ligne décalée, se "verrouille" à l'horizontale au survol */
.topbar--term .topnav a:nth-of-type(1) { transform: translateY(-8px); opacity: 0.92; }
.topbar--term .topnav a:nth-of-type(2) { transform: translateY(8px); opacity: 1; }
.topbar--term .topnav a:nth-of-type(3) { transform: translateY(-8px); opacity: 0.92; }
.topbar--term .topnav a:nth-of-type(4) { transform: translateY(8px); opacity: 1; }
.topbar--term .topnav a:nth-of-type(5) { transform: translateY(-8px); opacity: 0.95; }
.topbar--term .topnav a:hover { transform: none; opacity: 1; color: #c6ff2e; text-shadow: 0 0 10px rgba(180, 255, 0, 0.7); }
.topbar--term .topnav a:hover::before { content: "■ "; color: #c6ff2e; }

/* CTA = touche active du terminal */
.topbar--term .nav-cta { border: 1px solid rgba(198, 255, 46, 0.7) !important; background: rgba(180, 255, 0, 0.06); box-shadow: 0 0 12px rgba(180, 255, 0, 0.16); }
.topbar--term .nav-cta:hover { background: rgba(180, 255, 0, 0.16); }

/* curseur clignotant en bout de ligne (réutilise as400-cur) */
.topbar--term .nav-cur { position: relative; z-index: 1; margin-left: -6px; color: #2bff5a; text-shadow: 0 0 8px rgba(0, 255, 80, 0.7); }

@media (max-width: 720px) {
  .topbar--term .nav-prompt, .topbar--term .nav-cur { display: none; }
  .topbar--term .topnav { padding: 8px 12px; }
}

@media (max-width: 720px) {
  .bw-grid { grid-template-columns: 1fr; }
}

/* ===================== Vidéo iceberg — titre incrusté ===================== */
.dz-video { position: relative; display: block; margin: 18px 0 6px; border: 1px solid var(--line); border-radius: 4px; overflow: hidden; }
.dz-video video { display: block; width: 100%; }
.dz-video-cap {
  position: absolute; left: 0; right: 0; top: 0; z-index: 1;
  padding: 14px 18px 30px;
  background: linear-gradient(180deg, rgba(3, 8, 12, 0.85), rgba(3, 8, 12, 0));
  font-family: var(--mono); font-size: clamp(12px, 1.7vw, 16px);
  letter-spacing: 0.05em; line-height: 1.3; color: var(--ink);
  text-shadow: 0 1px 14px rgba(0, 0, 0, 0.85);
}
.dz-video-cap::before { content: "▸ "; color: var(--cold); }

/* ===================== Logo Lex Angeli Terrae (bandeau dans l'encart conventions) ===================== */
.laet-logo { display: block; width: min(260px, 74%); height: auto; margin: 2px 0 16px; border-radius: 8px; box-shadow: 0 0 26px rgba(92, 209, 224, 0.22); }

/* ===================== Affaires — grille immersive (remplace la traversée horizontale) ===================== */
.affaires-sec { position: relative; z-index: 2; }
.as400--free { max-width: 760px; margin: clamp(18px, 3vh, 30px) 0; }
.as400--free.as400--locked { border-color: rgba(255, 90, 90, 0.45); box-shadow: 0 0 22px rgba(255, 40, 40, 0.14), inset 0 0 36px rgba(255, 0, 0, 0.05); }
.as400--free.as400--locked .as400-screen { color: #ff7a7a; text-shadow: 0 0 6px rgba(255, 40, 40, 0.55); }
.as400--free.as400--locked .as400-bar { color: #ffb0b0; background: rgba(255, 40, 40, 0.1); border-color: rgba(255, 90, 90, 0.4); }
.as400-foot { margin: 12px 4px 2px; font-size: 13.5px; line-height: 1.55; color: var(--muted); }
.as400-foot a { border-bottom: 1px solid var(--cold); padding-bottom: 1px; }

.aff-grid-live { display: flex; flex-wrap: wrap; gap: clamp(14px, 2vw, 22px); margin: clamp(20px, 3.5vh, 40px) 0; }
.aff-tile { position: relative; flex: 1 1 320px; min-height: 286px; display: flex; overflow: hidden; border: 1px solid var(--line); border-radius: 6px; background: #06090d; isolation: isolate; transition: transform 0.4s var(--ease), border-color 0.4s, box-shadow 0.4s; }
.aff-tile-media { position: absolute; inset: 0; z-index: 0; background-image: var(--img); background-size: cover; background-position: center; filter: grayscale(0.1) contrast(1.03) brightness(0.9); transform: scale(1.04); transition: transform 0.6s var(--ease), filter 0.5s; }
.aff-tile--noimg .aff-tile-media { background: radial-gradient(120% 100% at 30% 0%, rgba(92, 209, 224, 0.16), rgba(157, 107, 255, 0.1) 45%, rgba(6, 9, 13, 0.92)); filter: none; transform: none; }
.aff-tile-scrim { position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(4, 7, 10, 0.08) 0%, rgba(4, 7, 10, 0.4) 55%, rgba(4, 7, 10, 0.82) 100%); }
.aff-tile-body { position: relative; z-index: 2; margin-top: auto; display: flex; flex-direction: column; gap: 7px; padding: 20px; width: 100%; }
.aff-tile-year { font-family: var(--mono); font-size: 12px; letter-spacing: 0.12em; color: var(--cold); text-shadow: 0 0 12px rgba(92, 209, 224, 0.5); }
.aff-tile-meta { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: #b9c4cc; }
.aff-tile-title { font-size: clamp(18px, 2.1vw, 23px); line-height: 1.12; font-weight: 700; letter-spacing: -0.01em; color: #fff; text-shadow: 0 1px 16px rgba(0, 0, 0, 0.75); }
.aff-tile-verdict { align-self: flex-start; margin-top: 2px; font-family: var(--mono); font-size: 11px; letter-spacing: 0.06em; padding: 3px 9px; border: 1px solid var(--line); border-radius: 3px; color: var(--ink); background: rgba(0, 0, 0, 0.38); }
.aff-tile.st-win .aff-tile-verdict { color: var(--bio); border-color: rgba(52, 230, 160, 0.4); }
.aff-tile.st-mixed .aff-tile-verdict { color: #ffd479; border-color: rgba(255, 180, 60, 0.38); }
.aff-tile.st-loss .aff-tile-verdict { color: var(--ember); border-color: rgba(226, 85, 43, 0.42); }
.aff-tile-go { font-family: var(--mono); font-size: 11px; letter-spacing: 0.08em; color: var(--cold); opacity: 0; transform: translateY(6px); transition: opacity 0.35s, transform 0.35s; }
.aff-tile:hover { transform: translateY(-5px); border-color: var(--cold); box-shadow: 0 14px 40px rgba(0, 0, 0, 0.5), 0 0 26px rgba(92, 209, 224, 0.18); }
.aff-tile:hover .aff-tile-media { transform: scale(1.12); filter: grayscale(0) contrast(1.06) brightness(1); }
.aff-tile:hover .aff-tile-go { opacity: 1; transform: none; }
.aff-tile:focus-visible { outline: 2px solid var(--cold); outline-offset: 2px; }

@media (max-width: 600px) { .aff-tile { flex: 1 1 100%; min-height: 240px; } }

/* ===================== Ce qu'on défend — la beauté (couleurs vives, contraste) ===================== */
.beaute { position: relative; z-index: 2; }
.beaute-title { font-size: clamp(27px, 4.6vw, 50px); line-height: 1.06; letter-spacing: -0.02em; margin: 0 0 14px; color: #fff;text-align:justify; }
.bw-hero { position: relative; display: block; height: clamp(364px, 70vh, 730px); margin: clamp(22px, 4vh, 40px) 0 12px; border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.bw-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(248px, 1fr)); gap: 12px; }
.bw { position: relative; display: block; height: clamp(273px, 36vh, 377px); border-radius: 7px; overflow: hidden; border: 1px solid var(--line); }
.bw-img { width: 100%; height: 100%; object-fit: cover; display: block; transform: scale(1.03); transition: transform 1.1s var(--ease), filter 0.6s; filter: saturate(1.08) contrast(1.03); }
.bw:hover .bw-img, .bw-hero:hover .bw-img { transform: scale(1.1); filter: saturate(1.16) contrast(1.05); }
.bw-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 14px 16px; display: flex; flex-direction: column; gap: 3px; background: linear-gradient(0deg, rgba(0, 0, 0, 0.82), rgba(0, 0, 0, 0.12) 68%, transparent); }
.bw-cap b { font-size: clamp(14px, 1.7vw, 18px); line-height: 1.2; color: #fff; font-weight: 600; text-shadow: 0 1px 10px rgba(0, 0, 0, 0.6); }
.bw-hero .bw-cap { padding: 22px 22px; }
.bw-hero .bw-cap b { font-size: clamp(18px, 2.6vw, 28px); }
.bw-cred { font-family: var(--mono); font-size: 10px; letter-spacing: 0.04em; color: rgba(255, 255, 255, 0.55); }
.beaute-coda { margin: clamp(26px, 4.5vh, 46px) 0 0; font-size: clamp(20px, 3vw, 30px); line-height: 1.25; font-weight: 600; letter-spacing: -0.01em; color: #fff; }