/* ============================================================
   DUNVARRA, 1993 — ambiance brumeuse & tempétueuse
   ============================================================ */
:root{
  --bg:      #070b10;
  --bg-2:    #0b1219;
  --panel:   rgba(15,22,30,.72);
  --panel-2: rgba(20,29,39,.78);
  --line:    rgba(120,150,175,.16);
  --line-2:  rgba(120,150,175,.28);

  --ink:     #dfe6ee;
  --ink-soft:#aeb9c6;
  --mut:     #7d8b9b;

  --gold:    #c9a24b;
  --gold-2:  #e8cd86;
  --blood:   #a52a22;
  --blood-2: #d7514a;
  --sea:     #4c86b6;
  --sea-2:   #8fc3e8;
  --moss:    #6f8f5f;

  --serif:  "EB Garamond", "Iowan Old Style", "Palatino Linotype", Georgia, serif;
  --title:  "Cinzel", "Trajan Pro", var(--serif);
  --rad: 14px;
}

*{ box-sizing:border-box }
html,body{ margin:0; min-height:100% }
html{ scroll-behavior:smooth }
body{
  background:
    radial-gradient(140% 90% at 50% -10%, #14202b 0%, var(--bg-2) 42%, var(--bg) 78%);
  color:var(--ink);
  font-family:var(--serif);
  font-size:18px; line-height:1.66;
  letter-spacing:.005em;
  overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
a{ color:var(--gold-2); text-decoration:none }
a:hover{ color:#fff }
h1,h2,h3{ font-family:var(--title); font-weight:700; letter-spacing:.04em; line-height:1.2 }
::selection{ background:rgba(201,162,75,.32); color:#fff }

/* ---------- Couches d'ambiance (fixes, plein écran) ---------- */
.sky,.storm,.fog,.lightning,.vignette,.grain{
  position:fixed; inset:0; pointer-events:none; z-index:0;
}
.sky{
  background:
    radial-gradient(80% 55% at 22% 8%, rgba(76,134,182,.10), transparent 60%),
    radial-gradient(70% 60% at 82% 0%, rgba(60,80,110,.14), transparent 62%),
    linear-gradient(180deg, rgba(6,10,15,.2), rgba(6,10,15,.72));
  animation:skyshift 26s ease-in-out infinite alternate;
}
@keyframes skyshift{ from{ filter:brightness(.92) } to{ filter:brightness(1.06) } }

.storm{ z-index:1; opacity:.55 }

/* Brouillard : trois nappes qui dérivent à des vitesses différentes */
.fog{
  z-index:2; opacity:.5; mix-blend-mode:screen;
  background-repeat:repeat;
  background-image:
    radial-gradient(60% 40% at 20% 60%, rgba(150,170,190,.16), transparent 60%),
    radial-gradient(50% 45% at 70% 40%, rgba(120,140,165,.14), transparent 60%),
    radial-gradient(55% 40% at 45% 80%, rgba(170,185,200,.12), transparent 60%);
  background-size:180% 180%;
  filter:blur(4px);
}
.fog-1{ animation:drift1 60s linear infinite; opacity:.42 }
.fog-2{ animation:drift2 95s linear infinite; opacity:.30; filter:blur(9px) }
.fog-3{ animation:drift3 140s linear infinite; opacity:.22; filter:blur(16px) }
@keyframes drift1{ from{ background-position:0% 50% } to{ background-position:200% 50% } }
@keyframes drift2{ from{ background-position:100% 40% } to{ background-position:-100% 60% } }
@keyframes drift3{ from{ background-position:50% 0% } to{ background-position:-150% 100% } }

.vignette{
  z-index:4;
  background:radial-gradient(120% 100% at 50% 38%, transparent 52%, rgba(0,0,0,.55) 100%);
}
.grain{
  z-index:5; opacity:.05; mix-blend-mode:overlay;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='120' height='120'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
  animation:grainmove 1.2s steps(3) infinite;
}
@keyframes grainmove{ 0%{transform:translate(0,0)} 33%{transform:translate(-3%,2%)} 66%{transform:translate(2%,-3%)} 100%{transform:translate(0,0)} }

/* ---------- Barre du haut ---------- */
.topbar{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; gap:26px;
  padding:14px clamp(16px,4vw,44px);
  background:linear-gradient(180deg, rgba(6,10,15,.86), rgba(6,10,15,.35));
  backdrop-filter:blur(7px);
  border-bottom:1px solid var(--line);
}
.brand{ display:flex; align-items:baseline; gap:9px }
.brand-mark{ font-family:var(--title); font-weight:700; font-size:1.35rem; letter-spacing:.34em; color:var(--gold-2); text-shadow:0 0 22px rgba(201,162,75,.28) }
.brand-year{ font-family:var(--title); font-size:.72rem; letter-spacing:.3em; color:var(--mut) }
.mainnav{ display:flex; gap:6px; flex-wrap:wrap; margin-left:auto }
.mainnav a{
  color:var(--ink-soft); font-size:.86rem; letter-spacing:.16em; text-transform:uppercase;
  padding:8px 14px; border:1px solid transparent; border-radius:999px; transition:.18s;
}
.mainnav a:hover{ color:#fff; border-color:var(--line-2) }
.mainnav a.active{ color:var(--gold-2); border-color:var(--gold); background:rgba(201,162,75,.08) }

/* ---------- Contenu ---------- */
.page{ position:relative; z-index:10 }
.wrap{ max-width:1120px; margin:0 auto; padding:clamp(26px,5vw,64px) clamp(16px,4vw,40px) 90px }
.wrap.narrow{ max-width:820px }
.muted{ color:var(--mut) }
.lead{ font-size:1.2rem; color:var(--ink-soft); line-height:1.7 }
code{ font-family:ui-monospace,Menlo,Consolas,monospace; font-size:.86em; color:var(--gold-2); background:rgba(201,162,75,.08); padding:.1em .4em; border-radius:5px }
hr.rule{ border:0; height:1px; background:linear-gradient(90deg,transparent,var(--line-2),transparent); margin:40px 0 }

/* ---------- HÉRO (accueil) ---------- */
.hero{ min-height:78vh; display:flex; flex-direction:column; justify-content:center; align-items:center; text-align:center; padding:80px 20px 60px; position:relative }
.hero .eyebrow{ font-family:var(--title); letter-spacing:.5em; text-transform:uppercase; color:var(--sea-2); font-size:.8rem; margin:0 0 18px; opacity:.85 }
.hero h1{
  font-size:clamp(3rem,11vw,8.4rem); margin:0; color:#f3ede0;
  letter-spacing:.14em;
  text-shadow:0 2px 40px rgba(0,0,0,.7), 0 0 60px rgba(76,134,182,.18);
  animation:hero-in 1.6s cubic-bezier(.2,.7,.2,1) both;
}
.hero .year{
  font-family:var(--title); font-size:clamp(1.1rem,4vw,1.9rem); letter-spacing:.7em;
  color:var(--gold-2); margin:12px 0 0; padding-left:.7em;
  animation:hero-in 1.6s .2s cubic-bezier(.2,.7,.2,1) both;
}
@keyframes hero-in{ from{ opacity:0; transform:translateY(22px); filter:blur(10px) } to{ opacity:1; transform:none; filter:none } }
.hero .tagline{ max-width:640px; margin:30px auto 0; color:var(--ink-soft); font-size:1.22rem; font-style:italic; animation:hero-in 1.6s .4s both }
.hero .cta{ margin-top:40px; display:flex; gap:14px; flex-wrap:wrap; justify-content:center; animation:hero-in 1.6s .6s both }
.scroll-cue{ margin-top:56px; color:var(--mut); font-size:.78rem; letter-spacing:.3em; text-transform:uppercase; animation:bob 2.4s ease-in-out infinite }
@keyframes bob{ 0%,100%{ transform:translateY(0); opacity:.5 } 50%{ transform:translateY(8px); opacity:1 } }

/* ---------- Boutons ---------- */
.btn{
  display:inline-flex; align-items:center; gap:10px;
  font-family:var(--title); font-size:.82rem; letter-spacing:.2em; text-transform:uppercase;
  padding:13px 26px; border-radius:999px; border:1px solid var(--gold);
  color:var(--gold-2); background:rgba(201,162,75,.06); transition:.2s; cursor:pointer;
}
.btn:hover{ background:var(--gold); color:#10141a; box-shadow:0 0 30px rgba(201,162,75,.35) }
.btn.ghost{ border-color:var(--line-2); color:var(--ink-soft); background:transparent }
.btn.ghost:hover{ border-color:var(--sea-2); color:#fff; background:rgba(76,134,182,.1); box-shadow:none }
.btn.blood{ border-color:var(--blood); color:var(--blood-2); background:rgba(165,42,34,.08) }
.btn.blood:hover{ background:var(--blood); color:#fff; box-shadow:0 0 30px rgba(165,42,34,.4) }

/* ---------- Panneaux & sections ---------- */
.panel{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--rad);
  padding:clamp(20px,3vw,34px); backdrop-filter:blur(6px);
  box-shadow:0 24px 60px rgba(0,0,0,.45);
}
.section-title{ display:flex; align-items:center; gap:16px; margin:0 0 6px }
.section-title h2{ font-size:1.9rem; color:var(--gold-2); margin:0 }
.section-title .count{ font-family:var(--serif); color:var(--mut); font-size:1rem; letter-spacing:.05em }
.section-sub{ color:var(--mut); font-style:italic; margin:2px 0 26px }

.stats{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; margin:8px 0 0 }
.stat{ background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:16px 24px; min-width:130px; text-align:center; backdrop-filter:blur(6px) }
.stat b{ display:block; font-family:var(--title); font-size:2rem; color:var(--gold-2); line-height:1 }
.stat span{ display:block; margin-top:8px; color:var(--mut); font-size:.74rem; letter-spacing:.18em; text-transform:uppercase }

/* Cartes d'entrée (accueil) */
.gateways{ display:grid; gap:20px; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); margin-top:30px }
.gateway{ position:relative; overflow:hidden; display:block; padding:30px 26px; border-radius:var(--rad); border:1px solid var(--line); background:var(--panel); transition:.22s }
.gateway:hover{ transform:translateY(-4px); border-color:var(--gold); box-shadow:0 26px 60px rgba(0,0,0,.5) }
.gateway .g-k{ font-family:var(--title); letter-spacing:.3em; text-transform:uppercase; font-size:.72rem; color:var(--sea-2) }
.gateway h3{ font-size:1.5rem; color:var(--gold-2); margin:12px 0 8px }
.gateway p{ color:var(--ink-soft); margin:0; font-size:1.02rem }
.gateway .g-arrow{ margin-top:16px; color:var(--gold); letter-spacing:.2em; font-size:.8rem; text-transform:uppercase }

/* ---------- Familles & grille de personnages ---------- */
.fam-block{ margin:0 0 44px }
.fam-head{ display:flex; align-items:center; gap:14px; margin:0 0 16px; padding-bottom:10px; border-bottom:1px solid var(--line) }
.fam-dot{ width:14px; height:14px; border-radius:50%; box-shadow:0 0 14px currentColor }
.fam-head h2{ font-size:1.5rem; margin:0; letter-spacing:.08em }
.fam-head .fam-n{ margin-left:auto; color:var(--mut); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase }

.pgrid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)) }
.pcard{
  position:relative; display:flex; gap:14px; align-items:center;
  padding:16px; border-radius:var(--rad); border:1px solid var(--line);
  background:var(--panel); transition:.2s; overflow:hidden;
}
.pcard::before{ content:""; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--accent,var(--gold)); opacity:.7 }
.pcard:hover{ transform:translateY(-3px); border-color:var(--line-2); box-shadow:0 20px 46px rgba(0,0,0,.5) }
.pcard:hover .avatar{ border-color:var(--gold) }
.avatar{
  flex:0 0 54px; width:54px; height:54px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-family:var(--title); font-size:1.15rem; color:var(--gold-2);
  background:radial-gradient(120% 120% at 30% 20%, #1c2734, #0c1219);
  border:1px solid var(--line-2); transition:.2s;
}
.avatar img{ width:100%; height:100%; object-fit:cover; display:block }
.pcard .p-nom{ font-family:var(--title); font-size:1.06rem; color:var(--ink); margin:0 0 2px; line-height:1.25 }
.pcard .p-meta{ color:var(--mut); font-size:.84rem; line-height:1.4 }
.pcard .p-q{ position:absolute; right:12px; bottom:10px; font-size:.72rem; color:var(--gold); letter-spacing:.06em; opacity:.85 }

/* ---------- Badges ---------- */
.badges{ display:flex; gap:8px; flex-wrap:wrap; margin:0 }
.badge{ font-family:var(--title); font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:4px 11px; border-radius:999px; border:1px solid var(--line-2); color:var(--mut) }
.badge.gold{ color:var(--gold-2); border-color:var(--gold); background:rgba(201,162,75,.08) }
.badge.blood{ color:var(--blood-2); border-color:var(--blood); background:rgba(165,42,34,.12) }
.badge.sea{ color:var(--sea-2); border-color:var(--sea); background:rgba(76,134,182,.12) }
.badge.elu{ color:#f0d27a; border-color:#d8b24a; background:rgba(216,178,74,.14); box-shadow:0 0 16px rgba(216,178,74,.25) }
.badge.mort{ color:#9aa6b4; border-color:rgba(120,150,175,.4); background:rgba(120,150,175,.08) }
.pcard.dead .avatar{ filter:grayscale(.6); opacity:.75 }
.pcard.dead .p-nom::after{ content:" †"; color:var(--mut); font-size:.85em }
.p-dead{ position:absolute; right:12px; bottom:10px; font-size:.7rem; color:var(--mut); letter-spacing:.04em; font-style:italic }

/* ---------- Fiche personnage ---------- */
.perso-hero{ display:flex; gap:26px; align-items:flex-end; flex-wrap:wrap; margin:0 0 8px }
.perso-hero .avatar-xl{
  flex:0 0 110px; width:110px; height:110px; border-radius:50%; overflow:hidden;
  display:grid; place-items:center; font-family:var(--title); font-size:2.3rem; color:var(--gold-2);
  background:radial-gradient(120% 120% at 30% 20%, #1e2a38, #0a0f15);
  border:1px solid var(--gold); box-shadow:0 0 40px rgba(201,162,75,.18);
}
.avatar-xl img{ width:100%; height:100%; object-fit:cover; display:block }
.perso-hero h1{ font-size:clamp(2rem,6vw,3.4rem); margin:0; color:#f3ede0; letter-spacing:.06em }
.perso-hero .role{ font-size:1.15rem; color:var(--gold-2); font-style:italic; margin:6px 0 12px }
.backlink{ display:inline-block; margin:0 0 22px; color:var(--mut); font-size:.82rem; letter-spacing:.14em; text-transform:uppercase }
.backlink:hover{ color:var(--sea-2) }

.perso-grid{ display:grid; gap:24px; grid-template-columns:320px 1fr; align-items:start; margin-top:26px }
@media(max-width:860px){ .perso-grid{ grid-template-columns:1fr } }

.factsheet dl{ margin:0; display:grid; grid-template-columns:auto 1fr; gap:10px 16px }
.factsheet dt{ color:var(--mut); font-size:.72rem; letter-spacing:.14em; text-transform:uppercase; padding-top:3px }
.factsheet dd{ margin:0; color:var(--ink) }
.factsheet + .factsheet{ margin-top:20px }

.prose{ color:var(--ink-soft); font-size:1.08rem }
.prose p{ margin:0 0 1em }
.prose .firstword{ font-family:var(--title); color:var(--gold-2) }

.obj-list{ list-style:none; margin:0; padding:0 }
.obj-list li{ position:relative; padding:10px 0 10px 26px; border-bottom:1px dashed var(--line) }
.obj-list li::before{ content:"◆"; position:absolute; left:0; top:10px; color:var(--gold); font-size:.7rem }
.obj-list li.mj::before{ content:"⚑"; color:var(--blood-2) }
.obj-list .obj-tag{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; color:var(--mut); margin-left:8px }

/* ---------- Journal des quêtes (timeline) ---------- */
.timeline{ position:relative; margin:10px 0 0; padding-left:26px }
.timeline::before{ content:""; position:absolute; left:7px; top:6px; bottom:6px; width:2px;
  background:linear-gradient(180deg,var(--gold),transparent) }
.day{ position:relative; margin:0 0 26px }
.day-date{ font-family:var(--title); font-size:.78rem; letter-spacing:.2em; text-transform:uppercase; color:var(--gold-2); margin:0 0 12px }
.day-date::before{ content:""; position:absolute; left:-26px; margin-top:5px; width:14px; height:14px; border-radius:50%;
  background:var(--bg); border:2px solid var(--gold); box-shadow:0 0 12px rgba(201,162,75,.5) }
.quest{
  position:relative; background:var(--panel-2); border:1px solid var(--line); border-left:3px solid var(--sea);
  border-radius:10px; padding:14px 16px; margin:0 0 10px;
}
.quest.ok{ border-left-color:var(--moss) }
.quest.ko{ border-left-color:var(--blood) }
.quest p{ margin:0; color:var(--ink) }
.quest .q-foot{ display:flex; gap:10px; align-items:center; margin-top:8px; flex-wrap:wrap }
.q-state{ font-size:.64rem; letter-spacing:.14em; text-transform:uppercase; padding:3px 9px; border-radius:999px; border:1px solid var(--line-2); color:var(--mut) }
.q-state.ok{ color:var(--moss); border-color:var(--moss) }
.q-state.ko{ color:var(--blood-2); border-color:var(--blood) }
.q-note{ color:var(--mut); font-size:.9rem; font-style:italic }

.empty{ color:var(--mut); font-style:italic; padding:24px; text-align:center; border:1px dashed var(--line); border-radius:12px }

/* ---------- Pages lore (récit) ---------- */
.lore-hero{ text-align:center; padding:40px 0 20px }
.lore-hero .kicker{ font-family:var(--title); letter-spacing:.5em; text-transform:uppercase; color:var(--sea-2); font-size:.78rem }
.lore-hero h1{ font-size:clamp(2.4rem,8vw,5rem); margin:14px 0 0; color:#f3ede0; letter-spacing:.1em }
.lore-hero .sub{ color:var(--ink-soft); font-style:italic; font-size:1.25rem; margin:16px auto 0; max-width:620px }
.lore{ font-size:1.14rem; color:var(--ink-soft); line-height:1.85 }
.lore h2{ color:var(--gold-2); font-size:1.7rem; margin:52px 0 14px; letter-spacing:.05em }
.lore h3{ color:var(--sea-2); font-size:1.2rem; letter-spacing:.08em; text-transform:uppercase; margin:34px 0 10px }
.lore p{ margin:0 0 1.15em }
.lore p .drop{ float:left; font-family:var(--title); font-size:3.4rem; line-height:.8; color:var(--gold-2); padding:6px 12px 0 0 }
.lore blockquote{
  margin:26px 0; padding:16px 24px; border-left:3px solid var(--gold);
  background:rgba(201,162,75,.05); color:var(--ink); font-style:italic; border-radius:0 10px 10px 0;
}
.lore .creed{ text-align:center; font-family:var(--title); letter-spacing:.06em; color:var(--gold-2); font-size:1.15rem; margin:34px 0; font-style:normal; line-height:1.9 }
.lore ul{ padding-left:1.3em } .lore li{ margin:.4em 0 }
.rule-ornament{ text-align:center; color:var(--gold); letter-spacing:1em; margin:44px 0 }

.callout{ border:1px solid var(--blood); background:rgba(165,42,34,.08); border-radius:12px; padding:18px 22px; margin:28px 0 }
.callout .c-k{ font-family:var(--title); color:var(--blood-2); letter-spacing:.18em; text-transform:uppercase; font-size:.74rem; margin:0 0 6px }

/* ---------- Statistiques / Chroniques ---------- */
.stat-cols{ display:grid; gap:22px; grid-template-columns:repeat(auto-fit,minmax(320px,1fr)); align-items:start }
.barchart{ margin:6px 0 0 }
.bar-row{ margin:0 0 14px }
.bar-head{ display:flex; justify-content:space-between; align-items:baseline; margin:0 0 5px }
.bar-name{ font-family:var(--serif); color:var(--ink); font-size:1rem }
.bar-val{ font-family:var(--title); color:var(--gold-2); font-size:.9rem; letter-spacing:.05em }
.bar-track{ height:12px; border-radius:999px; background:rgba(120,150,175,.10); overflow:hidden; border:1px solid var(--line) }
.bar-fill{ height:100%; border-radius:999px; background:linear-gradient(90deg,var(--c,var(--gold)),color-mix(in srgb,var(--c,var(--gold)) 60%,#fff)); box-shadow:0 0 14px var(--c,var(--gold)); animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both }
@keyframes grow{ from{ width:0 !important } }

.lead-list{ list-style:none; margin:6px 0 0; padding:0; counter-reset:rank }
.lead-list li{ counter-increment:rank; display:flex; align-items:center; gap:14px; padding:11px 0; border-bottom:1px solid var(--line) }
.lead-list li::before{ content:counter(rank); flex:0 0 30px; text-align:center; font-family:var(--title); color:var(--gold-2); font-size:1rem;
  border:1px solid var(--line-2); border-radius:50%; width:30px; height:30px; line-height:28px }
.lead-list li:nth-child(1)::before{ color:#12161c; background:var(--gold-2); border-color:var(--gold) }
.lead-list .l-name{ flex:1; color:var(--ink) }
.lead-list .l-name a{ color:var(--ink) } .lead-list .l-name a:hover{ color:#fff }
.lead-list .l-sub{ display:block; color:var(--mut); font-size:.8rem }
.lead-list .l-val{ font-family:var(--title); color:var(--gold-2); letter-spacing:.05em }
.lead-list .l-thumb{ flex:0 0 auto; width:38px; height:38px; border-radius:50%; overflow:hidden; border:1px solid var(--line-2) }
.lead-list .l-thumb img{ width:100%; height:100%; object-fit:cover; display:block }

.donut-wrap{ display:flex; align-items:center; gap:26px; flex-wrap:wrap; justify-content:center }
.donut{ width:170px; height:170px; border-radius:50%; position:relative; flex:0 0 auto;
  background:conic-gradient(var(--moss) 0 var(--a), var(--blood) var(--a) var(--b), rgba(120,150,175,.18) var(--b) 100%);
  box-shadow:0 0 30px rgba(0,0,0,.4) }
.donut::after{ content:""; position:absolute; inset:24px; border-radius:50%; background:radial-gradient(120% 120% at 40% 30%,#141b24,#0a0f15); border:1px solid var(--line) }
.donut-center{ position:absolute; inset:0; display:grid; place-content:center; text-align:center; z-index:2 }
.donut-center b{ font-family:var(--title); font-size:1.9rem; color:var(--gold-2); line-height:1 }
.donut-center span{ display:block; color:var(--mut); font-size:.68rem; letter-spacing:.16em; text-transform:uppercase; margin-top:4px }
.legend{ list-style:none; margin:0; padding:0 }
.legend li{ display:flex; align-items:center; gap:10px; margin:9px 0; color:var(--ink-soft) }
.legend .sw{ width:13px; height:13px; border-radius:3px; flex:0 0 auto }
.legend b{ color:var(--ink); font-family:var(--title); margin-left:auto; letter-spacing:.04em }

.spark{ display:flex; align-items:flex-end; gap:6px; height:150px; padding:10px 0 0 }
.spark .col{ flex:1; display:flex; flex-direction:column; align-items:center; gap:8px; min-width:0 }
.spark .col .stack{ width:100%; max-width:44px; display:flex; flex-direction:column-reverse; border-radius:6px 6px 0 0; overflow:hidden; background:rgba(120,150,175,.08) }
.spark .col .seg{ width:100%; animation:grow 1.1s cubic-bezier(.2,.8,.2,1) both }
.spark .col .seg.ok{ background:linear-gradient(180deg,#89ad76,#6f8f5f) }
.spark .col .seg.ko{ background:linear-gradient(180deg,#d7514a,#a52a22) }
.spark .col .seg.na{ background:linear-gradient(180deg,#5f7891,#3f566e) }
.spark .col .d{ color:var(--mut); font-size:.68rem; letter-spacing:.04em; white-space:nowrap }
.spark .col .t{ color:var(--gold-2); font-family:var(--title); font-size:.8rem }
.chart-legend{ display:flex; gap:18px; flex-wrap:wrap; margin:14px 0 0; color:var(--mut); font-size:.82rem }
.chart-legend span{ display:inline-flex; align-items:center; gap:7px }
.chart-legend i{ width:11px; height:11px; border-radius:3px; display:inline-block }

/* ============================================================
   « Que sont-ils devenus ? » — cartes de fin de série (style Fargo)
   Froid, graphique, ultra-lisible. Mode film sans habillage.
   ============================================================ */
.devenus-stage{
  --paper:#07090c; --ink2:#f0eee6; --cold:#9fb0bf; --steel:#61707e;
  position:fixed; inset:0; z-index:80; display:flex; flex-direction:column;
  background:
    radial-gradient(130% 100% at 50% 44%, rgba(18,24,31,.55), rgba(4,6,9,.94) 82%),
    var(--paper);
}
/* Bandes cinéma (letterbox) — vendent le côté « film » */
.devenus-stage::before,
.devenus-stage::after{ content:""; position:absolute; left:0; right:0; height:5vh; min-height:26px; z-index:6; background:#000; pointer-events:none }
.devenus-stage::before{ top:0 } .devenus-stage::after{ bottom:0 }
.devenus-stage.filmmode::before,
.devenus-stage.filmmode::after{ height:8vh }

/* Nappe froide teintée famille, très discrète */
.dv-glow{ position:absolute; inset:0; z-index:0; opacity:.16; transition:background 1.4s ease;
  background:radial-gradient(75% 60% at 50% 46%, var(--c,#9fb0bf), transparent 72%); filter:saturate(.5) blur(8px) }

.dv-progress{ height:2px; background:rgba(255,255,255,.05); flex:0 0 auto; position:relative; z-index:7 }
.dv-bar{ height:100%; width:0; background:var(--cold) }
.dv-bar.run{ transition:width linear }

.dv-viewport{ flex:1; display:flex; flex-direction:column; justify-content:safe center; align-items:center;
  padding:clamp(16px,4.5vh,64px) clamp(20px,5vw,90px); overflow-y:auto; overflow-x:hidden; position:relative; z-index:2 }
.dv-viewport::-webkit-scrollbar{ width:8px } .dv-viewport::-webkit-scrollbar-thumb{ background:rgba(159,176,191,.25); border-radius:8px }
.dv-slide{ width:100%; max-width:1120px; flex:0 0 auto }
.dv-slide.enter{ animation:dvin 1.1s cubic-bezier(.16,.8,.24,1) both }
@keyframes dvin{ from{ opacity:0; transform:translateY(20px); filter:blur(6px) } to{ opacity:1; transform:none; filter:none } }

/* ---- En-tête de carte : index · famille ---- */
.dv-top{ display:flex; align-items:center; gap:18px; margin:0 0 clamp(20px,3.5vh,40px) }
.dv-index{ font-family:var(--title); font-weight:700; font-size:clamp(1.4rem,3vw,2.1rem); color:var(--c,#9fb0bf); letter-spacing:.04em; line-height:1 }
.dv-index i{ color:var(--steel); font-style:normal; font-size:.55em; letter-spacing:.1em }
.dv-topline{ flex:1; height:1px; background:linear-gradient(90deg, var(--c,#9fb0bf), transparent) }
.dv-fam{ font-family:var(--title); letter-spacing:.42em; text-transform:uppercase; font-size:clamp(.7rem,1.4vw,.92rem); color:var(--c,#9fb0bf) }

/* ---- Corps : portrait + texte ---- */
.dv-body{ display:grid; grid-template-columns:minmax(200px,300px) 1fr; gap:clamp(26px,4vw,56px); align-items:start }
@media(max-width:820px){ .dv-body{ grid-template-columns:1fr; gap:24px } }

.dv-portrait{ margin:0 }
.dv-plate{ position:relative; aspect-ratio:4/5; width:100%; border:1px solid rgba(159,176,191,.28); background:
    linear-gradient(160deg, #12181f, #070a0e); display:grid; place-items:center; overflow:hidden }
.dv-plate::after{ content:""; position:absolute; inset:0; box-shadow:inset 0 0 60px rgba(0,0,0,.7);
  background:repeating-linear-gradient(0deg, rgba(255,255,255,.015) 0 2px, transparent 2px 4px) }
.dv-plate .dv-mono{ font-family:var(--title); font-weight:700; font-size:clamp(3rem,9vw,5.5rem); color:var(--ink2);
  letter-spacing:.05em; filter:grayscale(1); opacity:.9; text-shadow:0 4px 30px rgba(0,0,0,.6) }
.dv-plate .dv-tick{ position:absolute; left:0; top:0; bottom:0; width:4px; background:var(--c,#9fb0bf); z-index:2 }
.dv-plate .dv-photo{ position:absolute; inset:0; width:100%; height:100%; object-fit:cover; display:block; filter:contrast(1.03) saturate(.9) }
.dv-portrait figcaption{ margin-top:14px; display:flex; flex-direction:column; gap:6px }
.dv-metier{ font-family:var(--serif); color:var(--cold); font-style:italic; font-size:1rem; line-height:1.4 }
.dv-dates{ font-family:var(--title); font-size:.68rem; letter-spacing:.18em; text-transform:uppercase; color:var(--steel) }
.dv-dates.mort{ color:#b6c3cf } .dv-dates.alive{ color:#7fa07e }

.dv-text{ min-width:0 }
.dv-name{ font-size:clamp(2.6rem,7.5vw,6.2rem); line-height:.98; margin:0; color:var(--ink2); letter-spacing:.01em;
  text-shadow:0 3px 40px rgba(0,0,0,.6) }
.dv-status{ display:flex; flex-wrap:wrap; gap:8px 16px; margin:18px 0 0; padding-top:14px; border-top:1px solid rgba(159,176,191,.18) }
.dv-status span{ font-family:var(--title); font-size:.7rem; letter-spacing:.16em; text-transform:uppercase; color:var(--steel) }
.dv-status span.blood{ color:var(--blood-2) }
.dv-status span.elu{ color:#e6c96f }
.dv-faits{ margin-top:14px; padding:10px 14px; border-left:2px solid var(--c,#9fb0bf);
  background:rgba(159,176,191,.06); color:var(--cold); font-size:clamp(.88rem,1.3vw,1.02rem); line-height:1.5 }
.dv-faits .df-k{ font-family:var(--title); font-size:.62rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--c,#9fb0bf); margin-right:8px }
.dv-epi{ margin-top:clamp(20px,3vh,34px) }
.dv-epi p{ margin:0; color:var(--ink2); font-size:clamp(1.15rem,2vw,1.7rem); line-height:1.62; font-weight:400 }
.dv-epi p .drop{ float:left; font-family:var(--title); font-weight:700; font-size:3.4em; line-height:.72; color:var(--c,#9fb0bf); padding:8px 14px 0 0; filter:saturate(.6) }

/* Écrans peu hauts (portables 900/768) : on réduit pour que la carte tienne sans chevauchement */
@media (max-height: 900px){
  .dv-faits{ margin-top:10px; padding:7px 12px; font-size:.86rem; line-height:1.42 }
  .dv-top{ margin-bottom:16px }
  .dv-name{ font-size:clamp(2rem,4.4vw,3.4rem) }
  .dv-status{ margin-top:12px; padding-top:10px }
  .dv-epi{ margin-top:16px }
  .dv-epi p{ font-size:clamp(1rem,1.5vw,1.18rem); line-height:1.52 }
  .dv-epi p .drop{ font-size:2.8em }
  .dv-body{ gap:26px; grid-template-columns:minmax(170px,230px) 1fr }
  .devenus-stage::before,.devenus-stage::after{ height:28px }
  .devenus-stage.filmmode::before,.devenus-stage.filmmode::after{ height:40px }
}
@media (max-height: 720px){
  .dv-faits{ font-size:.8rem; padding:6px 10px }
  .dv-top{ margin-bottom:10px }
  .dv-name{ font-size:clamp(1.7rem,3.6vw,2.5rem) }
  .dv-epi{ margin-top:12px }
  .dv-epi p{ font-size:1rem; line-height:1.45 }
  .dv-body{ gap:16px; grid-template-columns:minmax(140px,190px) 1fr }
  .devenus-stage::before,.devenus-stage::after{ height:20px }
  .devenus-stage.filmmode::before,.devenus-stage.filmmode::after{ height:30px }
}

/* ---- Intro / outro (cartons façon Fargo) ---- */
.dv-card-title{ max-width:900px; margin:0 auto; text-align:center }
.dv-kicker{ font-family:var(--title); letter-spacing:.5em; text-transform:uppercase; color:var(--steel); font-size:clamp(.68rem,1.4vw,.82rem); margin:0 0 26px }
.dv-title{ font-size:clamp(2.4rem,8vw,5.4rem); color:var(--ink2); letter-spacing:.03em; margin:0 0 26px; line-height:1.02 }
.dv-truestory{ max-width:680px; margin:0 auto 12px; color:var(--cold); font-size:clamp(1.05rem,2.2vw,1.4rem); line-height:1.8 }
.dv-truestory .em{ color:var(--ink2) }
.dv-sub{ color:var(--cold); font-style:italic; font-size:clamp(1.05rem,2.4vw,1.45rem); max-width:660px; margin:0 auto 34px; line-height:1.7 }
.dv-start{ font-family:var(--title); font-size:.86rem; letter-spacing:.22em; text-transform:uppercase; padding:15px 40px; border-radius:2px;
  border:1px solid var(--cold); color:var(--ink2); background:transparent; cursor:pointer; transition:.2s }
.dv-start:hover{ background:var(--ink2); color:#0a0d11 }
.dv-loop-note{ margin-top:28px; color:var(--steel); font-size:.74rem; letter-spacing:.24em; text-transform:uppercase }

/* ---- Contrôles ---- */
.dv-controls{ flex:0 0 auto; display:flex; align-items:center; gap:12px; justify-content:center; flex-wrap:wrap; position:relative; z-index:7;
  padding:12px 20px; background:linear-gradient(0deg, rgba(4,6,9,.92), transparent); }
.dv-controls button, .dv-controls a{ font-family:var(--title); font-size:.7rem; letter-spacing:.14em; text-transform:uppercase;
  border:1px solid rgba(159,176,191,.28); color:var(--cold); background:transparent; border-radius:2px; padding:9px 15px; cursor:pointer; transition:.18s; text-decoration:none }
.dv-controls button:hover, .dv-controls a:hover{ border-color:var(--ink2); color:var(--ink2) }
.dv-controls .dv-play{ border-color:var(--cold); color:var(--ink2); min-width:118px }
.dv-controls .dv-film{ margin-left:6px }
.dv-count{ font-family:var(--title); color:var(--steel); letter-spacing:.16em; font-size:.76rem; min-width:74px; text-align:center }
.dv-speed{ display:inline-flex; border:1px solid rgba(159,176,191,.22); border-radius:2px; overflow:hidden }
.dv-speed button{ border:0; border-radius:0; padding:9px 12px }
.dv-speed button.on{ background:rgba(159,176,191,.16); color:var(--ink2) }
.dv-hint{ color:var(--steel); font-size:.7rem; letter-spacing:.06em }
@media(max-width:720px){ .dv-hint{ display:none } }

/* ---- Mode film : plus aucune légende, curseur masqué ---- */
.devenus-stage.filmmode{ cursor:none }
.devenus-stage.filmmode .dv-controls,
.devenus-stage.filmmode .dv-progress{ opacity:0; pointer-events:none; transition:opacity .5s }
.devenus-stage.filmmode.nudge{ cursor:auto }
.devenus-stage.filmmode.nudge .dv-controls,
.devenus-stage.filmmode.nudge .dv-progress{ opacity:1; pointer-events:auto }

/* ============================================================
   Bibliothèque : onglets, grilles vidéos/images, visionneuse
   ============================================================ */
.tabs{ display:flex; gap:10px; flex-wrap:wrap; margin:18px 0 8px }
.tab{ font-family:var(--title); font-size:.8rem; letter-spacing:.16em; text-transform:uppercase; color:var(--ink-soft);
  background:var(--panel); border:1px solid var(--line); border-radius:999px; padding:10px 20px; cursor:pointer; transition:.18s;
  display:inline-flex; align-items:center; gap:9px }
.tab:hover{ border-color:var(--line-2); color:#fff }
.tab.active{ border-color:var(--gold); color:var(--gold-2); background:rgba(201,162,75,.08) }
.tab .tab-n{ font-size:.7rem; color:var(--mut); border:1px solid var(--line); border-radius:999px; padding:0 8px }
.tab.active .tab-n{ color:var(--gold-2); border-color:var(--gold) }

.vid-grid{ display:grid; gap:16px; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); margin:16px 0 0 }
.vid-card{ display:flex; flex-direction:column; text-align:left; padding:0; background:var(--panel); border:1px solid var(--line);
  border-radius:12px; overflow:hidden; cursor:pointer; transition:.2s; font-family:inherit; color:inherit }
.vid-card:hover{ transform:translateY(-3px); border-color:var(--gold); box-shadow:0 18px 40px rgba(0,0,0,.5) }
.vid-thumb{ position:relative; display:block; aspect-ratio:16/9; background:#0a0f15; overflow:hidden }
.vid-thumb img{ width:100%; height:100%; object-fit:cover; display:block; opacity:.92; transition:.2s }
.vid-card:hover .vid-thumb img{ opacity:1; transform:scale(1.03) }
.vid-ph{ position:absolute; inset:0; background:
   radial-gradient(80% 80% at 30% 20%, rgba(76,134,182,.22), transparent 60%),
   repeating-linear-gradient(0deg, rgba(255,255,255,.03) 0 2px, transparent 2px 5px), #0c1218 }
.vid-play{ position:absolute; inset:0; margin:auto; width:52px; height:52px; border-radius:50%;
  display:grid; place-items:center; color:#10141a; background:rgba(232,205,134,.92); font-size:1rem; padding-left:3px;
  box-shadow:0 6px 20px rgba(0,0,0,.5); transition:.2s }
.vid-card:hover .vid-play{ transform:scale(1.1); background:var(--gold-2) }
.vid-tag{ position:absolute; top:8px; left:8px; font-family:var(--title); font-size:.6rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); background:rgba(6,10,15,.7); border:1px solid var(--line-2); border-radius:999px; padding:3px 9px }
.vid-meta{ padding:11px 13px 13px }
.vid-title{ display:block; font-family:var(--title); font-size:.98rem; color:var(--ink); line-height:1.25 }
.vid-sub{ display:block; color:var(--mut); font-size:.76rem; margin-top:3px; letter-spacing:.04em }

.img-grid{ display:grid; gap:10px; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); margin:14px 0 0 }
.img-cell{ padding:0; border:1px solid var(--line); border-radius:10px; overflow:hidden; cursor:pointer; background:#0a0f15;
  aspect-ratio:1/1; transition:.18s }
.img-cell:hover{ border-color:var(--gold); transform:translateY(-2px); box-shadow:0 14px 30px rgba(0,0,0,.5) }
.img-cell img{ width:100%; height:100%; object-fit:cover; display:block }

.lightbox{ position:fixed; inset:0; z-index:90; display:grid; place-items:center; padding:4vh 4vw;
  background:rgba(4,6,9,.9); backdrop-filter:blur(6px) }
.lightbox[hidden]{ display:none }
.lb-close{ position:absolute; top:16px; right:18px; z-index:2; width:44px; height:44px; border-radius:50%;
  background:rgba(255,255,255,.06); border:1px solid var(--line-2); color:#fff; font-size:1.2rem; cursor:pointer }
.lb-close:hover{ border-color:var(--gold); color:var(--gold-2) }
.lb-stage{ width:min(1100px,94vw); max-height:90vh; display:grid; place-items:center }
.lb-frame{ position:relative; width:100%; aspect-ratio:16/9; background:#000; border:1px solid var(--line-2); box-shadow:0 30px 80px rgba(0,0,0,.7) }
.lb-frame iframe, .lb-frame video{ position:absolute; inset:0; width:100%; height:100%; border:0 }
.lb-img{ max-width:94vw; max-height:90vh; object-fit:contain; border:1px solid var(--line-2); box-shadow:0 30px 80px rgba(0,0,0,.7) }

/* ---------- Lecteur cassette ---------- */
.cassette{
  position:fixed; left:18px; bottom:18px; z-index:60;
  display:flex; align-items:center; gap:10px;
}
.cassette-btn{
  display:flex; align-items:center; gap:10px;
  background:linear-gradient(180deg,#1b232d,#0c1116); border:1px solid var(--line-2);
  border-radius:10px; padding:9px 12px; color:var(--ink-soft);
  box-shadow:0 14px 34px rgba(0,0,0,.55); transition:.2s;
}
.cassette-btn:hover{ border-color:var(--gold); color:#fff }
.reel{ width:15px; height:15px; border-radius:50%; border:3px solid var(--mut); position:relative; flex:0 0 auto }
.reel::after{ content:""; position:absolute; inset:4px; border-radius:50%; background:var(--mut) }
.tape-label{ font-family:var(--title); font-size:.68rem; letter-spacing:.14em; text-transform:uppercase; max-width:150px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap }
.cassette.playing .reel{ border-color:var(--gold-2); animation:spin 1.6s linear infinite }
.cassette.playing .reel::after{ background:var(--gold-2) }
@keyframes spin{ to{ transform:rotate(360deg) } }
.cassette-eq{ display:flex; align-items:flex-end; gap:3px; height:20px; opacity:0; transition:.3s }
.cassette.playing .cassette-eq{ opacity:1 }
.cassette-eq i{ width:3px; background:var(--gold-2); height:6px; border-radius:2px; animation:eq 1s ease-in-out infinite }
.cassette-eq i:nth-child(2){ animation-delay:.2s } .cassette-eq i:nth-child(3){ animation-delay:.4s }
.cassette-eq i:nth-child(4){ animation-delay:.1s } .cassette-eq i:nth-child(5){ animation-delay:.3s }
@keyframes eq{ 0%,100%{ height:5px } 50%{ height:18px } }
.yt-hidden{ position:absolute; width:1px; height:1px; opacity:0; pointer-events:none; left:-9999px }

/* ---------- Pied de page ---------- */
.foot{ position:relative; z-index:10; text-align:center; padding:50px 20px 90px; color:var(--mut); border-top:1px solid var(--line); margin-top:40px }
.foot p{ margin:4px 0 }
.foot-sub{ font-style:italic; font-size:.9rem; opacity:.8 }
.ghost-title{ color:var(--gold-2); font-size:2.2rem }

@media(max-width:600px){
  body{ font-size:17px }
  .tape-label{ max-width:92px }
  .mainnav a{ padding:6px 10px; font-size:.74rem; letter-spacing:.1em }
}

/* Respect des préférences de mouvement réduit */
@media (prefers-reduced-motion: reduce){
  .fog,.sky,.grain,.scroll-cue,.cassette.playing .reel,.cassette-eq i{ animation:none !important }
  .hero h1,.hero .year,.hero .tagline,.hero .cta{ animation:none !important }
}