/* ══════════════════════════════════════════════════════════
   AION 2 — Compendium  ·  feuille de style commune
   ══════════════════════════════════════════════════════════ */
:root{
  --void:#0A0D16;--slab:#141926;--slab2:#1B2130;--line:#2A3143;
  --ink:#EDF0F6;--dim:#98A1B5;--faint:#646D82;
  --gold:#E0AC4A;--gold2:#F5D89A;--aether:#63C0E0;--ember:#E0655A;--moss:#77C193;--violet:#A78BD0;
  --r:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--void)}
body{margin:0;background:transparent;color:var(--ink);font-family:'Barlow',system-ui,-apple-system,sans-serif;
 font-size:17px;line-height:1.65}

/* ══ FOND ANIMÉ ══
   La vidéo est décorative : floutée, désaturée et assombrie, puis recouverte
   d'un voile. Le visuel d'origine est très clair — sans ce traitement, le
   texte devient illisible. */
.bgmedia{position:fixed;inset:0;z-index:-2;overflow:hidden;pointer-events:none;background:var(--void)}
.bgmedia video,.bgmedia img{width:100%;height:100%;object-fit:cover;display:block}
/* L'image de fond est déjà sombre et bleutée : un traitement léger suffit et
   on la laisse se voir. La vidéo, elle, est très claire — il lui faut la
   totale, sinon le texte devient illisible. */
.bgmedia img{filter:saturate(.9) brightness(.6) blur(1px);transform:scale(1.04)}
.bgmedia video{filter:saturate(.55) brightness(.4) blur(3px);transform:scale(1.09)}
.bgscrim{position:fixed;inset:0;z-index:-1;pointer-events:none;
 background:
  radial-gradient(ellipse 1000px 520px at 50% -6%,rgba(224,172,74,.10),transparent 70%),
  linear-gradient(180deg,rgba(10,13,22,.58),rgba(10,13,22,.80) 38%,rgba(10,13,22,.92))}
.bgscrim.fort{
 background:
  radial-gradient(ellipse 1000px 520px at 50% -6%,rgba(224,172,74,.10),transparent 70%),
  linear-gradient(180deg,rgba(10,13,22,.72),rgba(10,13,22,.88) 38%,rgba(10,13,22,.94))}

/* ══ LECTEUR AUDIO ══ */
.player{position:fixed;right:16px;bottom:16px;z-index:60;display:flex;align-items:center;gap:10px;
 background:rgba(20,25,38,.92);backdrop-filter:blur(10px);border:1px solid var(--line);
 border-radius:99px;padding:7px 14px 7px 7px;box-shadow:0 6px 24px rgba(0,0,0,.45)}
.player:hover{border-color:var(--faint)}
.abtn{flex:0 0 auto;width:30px;height:30px;border-radius:50%;cursor:pointer;
 background:transparent;border:1px solid var(--line);color:var(--gold2);
 display:flex;align-items:center;justify-content:center;transition:.15s}
.abtn:hover{border-color:var(--faint);background:rgba(255,255,255,.05)}
.abtn.off{color:var(--faint)}
.abtn svg{width:14px;height:14px;fill:currentColor;display:block}
.pbtn{flex:0 0 auto;width:34px;height:34px;border-radius:50%;border:0;cursor:pointer;
 background:var(--gold);color:var(--void);display:flex;align-items:center;justify-content:center;
 transition:background .15s,transform .1s}
.pbtn:hover{background:var(--gold2)}
.pbtn:active{transform:scale(.93)}
.pbtn svg{width:15px;height:15px;fill:currentColor;display:block}
.pmeta{display:flex;flex-direction:column;line-height:1.2;min-width:0}
.pmeta b{font-family:'Cinzel',serif;font-size:12px;color:var(--gold2);font-weight:600;white-space:nowrap}
.pmeta span{font-size:11px;color:var(--faint);white-space:nowrap}
.pvol{-webkit-appearance:none;appearance:none;width:74px;height:4px;border-radius:99px;
 background:linear-gradient(90deg,var(--gold) var(--fill,35%),rgba(255,255,255,.15) var(--fill,35%));
 cursor:pointer;flex:0 0 auto;margin-right:4px}
.pvol::-webkit-slider-thumb{-webkit-appearance:none;width:13px;height:13px;border-radius:50%;
 background:var(--gold2);border:0;cursor:pointer}
.pvol::-moz-range-thumb{width:13px;height:13px;border-radius:50%;background:var(--gold2);border:0;cursor:pointer}
.pvol:focus-visible,.pbtn:focus-visible,.abtn:focus-visible{outline:2px solid var(--gold2);outline-offset:2px}
.player.playing .pbtn{background:var(--moss)}
.player.playing .pbtn:hover{background:#8fd3ab}
@media(max-width:560px){
  .player{right:10px;bottom:10px;gap:8px;padding:6px 11px 6px 6px}
  .pmeta{display:none}
  .pvol{width:58px}
}
@media print{.player,.bgmedia,.bgscrim{display:none}}
h1,h2,h3{font-family:'Cinzel',Georgia,serif;letter-spacing:.01em}
.wrap{max-width:860px;margin:0 auto;padding:0 22px}
.mono{font-family:'JetBrains Mono',ui-monospace,monospace}
a{color:var(--gold2)}

/* ── BARRE DE SITE ── */
.topbar{border-bottom:1px solid var(--line);background:rgba(10,13,22,.82)}
.topbar .inner{max-width:860px;margin:0 auto;padding:11px 22px;display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.brand{font-family:'Cinzel',serif;font-weight:700;font-size:15px;color:var(--gold2);text-decoration:none;
 letter-spacing:.08em;white-space:nowrap}
.brand span{color:var(--faint);font-weight:600}
.topbar nav{display:flex;gap:3px;overflow-x:auto;scrollbar-width:none;margin-left:auto}
.topbar nav::-webkit-scrollbar{display:none}
.topbar nav a{color:var(--faint);text-decoration:none;font-size:13px;padding:5px 11px;border-radius:99px;white-space:nowrap}
.topbar nav a:hover{color:var(--ink);background:var(--slab)}
.topbar nav a.here{color:var(--void);background:var(--gold);font-weight:600}
.topbar nav a.here:hover{background:var(--gold2)}

/* ── HERO ── */
header.hero{padding:48px 0 32px;text-align:center;border-bottom:1px solid var(--line)}
.eyebrow{font-size:11px;letter-spacing:.3em;text-transform:uppercase;color:var(--gold);font-weight:600}
h1{font-size:clamp(28px,5.6vw,44px);margin:12px 0 14px;font-weight:700;line-height:1.1}
h1 em{font-style:normal;color:var(--gold2)}
.hero-p{color:var(--dim);max-width:56ch;margin:0 auto;font-size:17.5px}
.hero-p b{color:var(--ink)}

/* ── NAV DE SECTIONS ── */
nav.sections{position:sticky;top:0;z-index:20;background:rgba(10,13,22,.94);backdrop-filter:blur(10px);
 border-bottom:1px solid var(--line)}
nav.sections .inner{max-width:860px;margin:0 auto;padding:0 22px;display:flex;gap:2px;overflow-x:auto;scrollbar-width:none}
nav.sections .inner::-webkit-scrollbar{display:none}
nav.sections a{flex:0 0 auto;color:var(--faint);text-decoration:none;padding:13px 11px;font-size:13px;
 letter-spacing:.03em;border-bottom:2px solid transparent;white-space:nowrap;transition:color .15s,background .15s}
nav.sections a:hover{color:var(--ink)}
nav.sections a.on{color:var(--gold2);border-bottom-color:var(--gold);
 background:linear-gradient(180deg,transparent,rgba(224,172,74,.1))}

/* Rappel du guide en cours, épinglé à gauche pendant que les sections défilent */
.pagelabel{position:sticky;left:0;z-index:2;flex:0 0 auto;display:flex;align-items:center;gap:9px;
 padding:13px 13px 13px 0;margin-right:4px;background:var(--void);white-space:nowrap;
 /* l'ombre pleine prolonge le fond vers la gauche pour masquer les puces qui
    défilent dans le padding du conteneur, sans décaler la boîte collante */
 box-shadow:-26px 0 0 var(--void);
 font-family:'Cinzel',serif;font-size:13px;font-weight:600;color:var(--gold2);
 border-right:1px solid var(--line)}
.pagelabel::before{content:"";width:5px;height:5px;border-radius:50%;background:var(--gold);flex:0 0 auto}
.pagelabel span{color:var(--faint);font-family:'JetBrains Mono',monospace;font-size:11px;letter-spacing:.12em}

main{padding:16px 0 100px}
section{padding:44px 0 0;scroll-margin-top:56px}
h2{font-size:26px;margin:0 0 6px;font-weight:600}
h2 .num{font-family:'JetBrains Mono',monospace;font-size:14px;color:var(--gold);
 display:block;letter-spacing:.2em;margin-bottom:8px;font-weight:600}
h3.sub{font-family:'Cinzel',serif;font-size:20px;color:var(--gold2);margin:34px 0 10px;font-weight:600}
.intro{color:var(--dim);margin:0 0 26px;font-size:16.5px;max-width:64ch}
p{margin:0 0 14px}

/* ── CARTES ── */
.card{background:var(--slab);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin-bottom:16px}
.card h3{font-size:19px;margin:0 0 8px;color:var(--gold2);font-weight:600}
.card p{margin:0 0 12px;color:var(--dim);font-size:16px}
.card p:last-child{margin-bottom:0}
.card p b,.card li b{color:var(--ink);font-weight:600}
.card ul{margin:0;padding-left:20px;color:var(--dim);font-size:15.5px}
.card ul li{margin-bottom:6px}

/* ── HUB (accueil) ── */
.hub{display:grid;gap:14px}
@media(min-width:660px){.hub{grid-template-columns:1fr 1fr}}
a.tile{display:block;background:var(--slab);border:1px solid var(--line);border-left:3px solid var(--gold);
 border-radius:var(--r);padding:20px 22px;text-decoration:none;transition:border-color .15s,transform .15s}
a.tile:hover{border-color:var(--faint);border-left-color:var(--gold2);transform:translateY(-2px)}
a.tile .k{font-family:'JetBrains Mono',monospace;font-size:11.5px;color:var(--gold);letter-spacing:.18em}
a.tile h3{font-family:'Cinzel',serif;font-size:20px;margin:5px 0 8px;color:var(--gold2);font-weight:600}
a.tile p{margin:0;color:var(--dim);font-size:15.5px;line-height:1.5}
a.tile .go{display:block;margin-top:12px;font-size:13px;color:var(--faint)}
a.tile.wide{border-left-color:var(--aether)}
a.tile.wide .k{color:var(--aether)}
@media(min-width:660px){a.tile.span2{grid-column:1/-1}}

/* ── STAT CARDS ── */
.stats{display:grid;gap:12px}
@media(min-width:640px){.stats{grid-template-columns:1fr 1fr}}
.stat{background:var(--slab);border:1px solid var(--line);border-left:3px solid var(--gold);border-radius:var(--r);padding:18px 20px}
.stat .rank{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--gold);letter-spacing:.15em}
.stat h4{font-family:'Cinzel',serif;font-size:19px;margin:4px 0 8px;color:var(--gold2);font-weight:600}
.stat p{margin:0 0 10px;color:var(--dim);font-size:15.5px;line-height:1.55}
.stat .where{font-size:13.5px;color:var(--faint);border-top:1px solid var(--line);padding-top:9px;margin:0}
.stat .where b{color:var(--aether);font-weight:600}
.stat.dim{border-left-color:var(--faint)}
.stat.dim h4{color:var(--dim)}
.stat.dim .rank{color:var(--faint)}

/* ── CHECKLIST ── */
.phase{margin-bottom:26px}
.phase-head{display:flex;align-items:baseline;gap:12px;margin-bottom:4px;flex-wrap:wrap}
.phase-head h3{font-family:'Cinzel',serif;font-size:21px;margin:0;color:var(--gold2);font-weight:600}
.phase-head .when{font-size:13px;color:var(--faint);letter-spacing:.08em;text-transform:uppercase}
.phase>p.sub{color:var(--dim);font-size:15.5px;margin:0 0 14px}
.step{display:flex;gap:14px;background:var(--slab);border:1px solid var(--line);border-radius:var(--r);
 padding:15px 18px;margin-bottom:8px;cursor:pointer;transition:border-color .15s,opacity .2s;align-items:flex-start}
.step:hover{border-color:var(--faint)}
.step .box{flex:0 0 22px;height:22px;border:1.5px solid var(--faint);border-radius:4px;margin-top:2px;
 display:flex;align-items:center;justify-content:center;transition:.15s}
.step .box::after{content:"";width:10px;height:6px;border-left:2px solid var(--void);border-bottom:2px solid var(--void);
 transform:rotate(-45deg) scale(0);transition:transform .18s;margin-top:-2px}
.step.done{opacity:.5;border-color:rgba(119,193,147,.35)}
.step.done .box{background:var(--moss);border-color:var(--moss)}
.step.done .box::after{transform:rotate(-45deg) scale(1)}
.step.done .t{text-decoration:line-through;text-decoration-color:var(--faint)}
.step .t{font-size:16px;color:var(--ink);font-weight:500;display:block;margin-bottom:3px}
.step .w{font-size:14.5px;color:var(--dim);display:block;line-height:1.5}
.progress{display:flex;align-items:center;gap:14px;background:var(--slab2);border:1px solid var(--line);
 border-radius:var(--r);padding:14px 18px;margin-bottom:22px;position:sticky;top:47px;z-index:10}
.progress .bar{flex:1;height:7px;background:rgba(255,255,255,.07);border-radius:99px;overflow:hidden}
.progress .bar i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--gold),var(--gold2));
 border-radius:99px;transition:width .3s}
.progress .lbl{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--gold2);flex:0 0 auto}
.progress button{background:none;border:1px solid var(--line);color:var(--faint);border-radius:4px;
 padding:4px 10px;font-family:inherit;font-size:12px;cursor:pointer;flex:0 0 auto}
.progress button:hover{color:var(--ink);border-color:var(--faint)}

/* ── PIÈGES ── */
.trap{background:var(--slab);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;margin-bottom:12px}
.trap .no{font-family:'JetBrains Mono',monospace;font-size:12px;color:var(--ember);letter-spacing:.14em}
.trap h4{font-size:18px;margin:5px 0 9px;color:var(--ink);font-weight:600;font-family:'Barlow',sans-serif}
.trap p{margin:0;color:var(--dim);font-size:15.5px}
.trap .cost{display:block;margin-top:10px;padding-top:9px;border-top:1px solid var(--line);
 font-size:14px;color:var(--ember)}

/* ── GLOSSAIRE / ACCORDÉON ── */
.gl{border-bottom:1px solid var(--line)}
.gl:last-child{border-bottom:0}
.gl summary{cursor:pointer;padding:14px 0;font-size:16.5px;color:var(--ink);font-weight:500;
 list-style:none;display:flex;justify-content:space-between;align-items:center;gap:12px}
.gl summary::-webkit-details-marker{display:none}
.gl summary::after{content:"+";color:var(--gold);font-family:'JetBrains Mono',monospace;font-size:18px;flex:0 0 auto}
.gl[open] summary::after{content:"−"}
.gl summary:hover{color:var(--gold2)}
.gl .body{padding:0 0 16px;color:var(--dim);font-size:15.5px;max-width:64ch}
.gl .body b{color:var(--ink)}
.gl .body ul{padding-left:20px;margin:8px 0}

/* ── LISTES ROUTINE ── */
.rt{display:grid;gap:14px}
@media(min-width:640px){.rt{grid-template-columns:1fr 1fr}}
.rt ul{margin:0;padding:0;list-style:none}
.rt li{padding:9px 0;border-bottom:1px solid var(--line);color:var(--dim);font-size:15.5px}
.rt li:last-child{border-bottom:0}
.rt li b{color:var(--ink);font-weight:600;display:block;font-size:16px}
.rt li small{color:var(--faint);font-size:13.5px}

/* ── ENCADRÉS ── */
.callout{background:linear-gradient(180deg,rgba(224,172,74,.09),rgba(224,172,74,.03));
 border:1px solid rgba(224,172,74,.28);border-radius:var(--r);padding:20px 24px;margin:18px 0}
.callout h4{font-family:'Cinzel',serif;font-size:17px;margin:0 0 8px;color:var(--gold2);font-weight:600}
.callout p{margin:0 0 10px;color:var(--dim);font-size:16px}
.callout p:last-child{margin-bottom:0}
.callout p b{color:var(--ink)}
.callout.calm{background:rgba(99,192,224,.06);border-color:rgba(99,192,224,.25)}
.callout.calm h4{color:var(--aether)}
.callout.warn{background:rgba(224,101,90,.07);border-color:rgba(224,101,90,.28)}
.callout.warn h4{color:var(--ember)}

/* ── LISTE « PLUS TARD » ── */
.later{display:grid;gap:8px}
.later div{background:var(--slab);border:1px solid var(--line);border-radius:var(--r);padding:13px 18px;
 display:flex;gap:14px;align-items:baseline;font-size:15.5px;color:var(--faint);flex-wrap:wrap}
.later div b{color:var(--dim);font-weight:600;flex:0 0 auto;min-width:150px}

/* ── TABLEAUX ── */
.tw{overflow-x:auto;border:1px solid var(--line);border-radius:var(--r);margin-bottom:16px;background:var(--slab)}
table{border-collapse:collapse;width:100%;font-size:15px;min-width:440px}
th,td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line);vertical-align:top}
thead th{background:var(--slab2);color:var(--gold2);font-family:'Cinzel',serif;font-size:13.5px;
 font-weight:600;letter-spacing:.04em;white-space:nowrap}
tbody tr:last-child td{border-bottom:0}
td{color:var(--dim)}
td b,th b{color:var(--ink)}
td.k{color:var(--ink);font-weight:600;white-space:nowrap}
td.n{font-family:'JetBrains Mono',monospace;color:var(--gold2);white-space:nowrap;font-size:14px}
.rare{font-family:'JetBrains Mono',monospace;font-size:13px;color:var(--aether)}

/* ── TIER LIST ── */
.tier{display:flex;gap:12px;align-items:stretch;background:var(--slab);border:1px solid var(--line);
 border-radius:var(--r);margin-bottom:8px;overflow:hidden}
.tier .badge{flex:0 0 62px;display:flex;align-items:center;justify-content:center;
 font-family:'Cinzel',serif;font-size:20px;font-weight:700;color:var(--void);background:var(--gold)}
.tier.t2 .badge{background:var(--gold2)}
.tier.t3 .badge{background:var(--aether)}
.tier.t4 .badge{background:var(--faint)}
.tier .body{padding:13px 16px 13px 4px}
.tier .body b{color:var(--ink);display:block;font-size:16px;margin-bottom:2px}
.tier .body span{color:var(--dim);font-size:14.5px}

/* ── PILULES ── */
.pills{display:flex;flex-wrap:wrap;gap:7px;margin:0 0 16px}
.pill{background:var(--slab2);border:1px solid var(--line);border-radius:99px;padding:4px 12px;
 font-size:13px;color:var(--dim)}
.pill b{color:var(--gold2);font-weight:600}

/* ── FORMULE ── */
.formula{background:#0D111C;border:1px solid var(--line);border-left:3px solid var(--aether);border-radius:var(--r);
 padding:16px 18px;overflow-x:auto;font-family:'JetBrains Mono',monospace;font-size:13px;line-height:1.75;
 color:var(--dim);margin-bottom:14px;white-space:pre-wrap}
.formula b{color:var(--gold2);font-weight:600}

/* ── FIGURES (captures d'écran) ── */
figure{margin:0 0 18px}
figure a{display:block;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
 background:#0D111C;line-height:0;transition:border-color .15s}
figure a:hover{border-color:var(--gold)}
figure img{display:block;width:100%;height:auto}
figure.narrow{max-width:470px}
figure.mid{max-width:640px}
figcaption{font-size:13.5px;color:var(--faint);padding:9px 2px 0;line-height:1.5}
figcaption b{color:var(--dim);font-weight:600}
figcaption .zoom{color:var(--faint);opacity:.75}
.figrow{display:grid;gap:16px;margin-bottom:18px}
@media(min-width:660px){.figrow.two{grid-template-columns:1fr 1fr;align-items:start}}
.figrow figure{margin:0}

/* ── SOURCE ── */
.src{font-size:13px;color:var(--faint);border-left:2px solid var(--line);padding-left:12px;margin:14px 0 0}
.src b{color:var(--dim)}

footer{border-top:1px solid var(--line);padding:26px 0 50px;color:var(--faint);font-size:13.5px}
footer b{color:var(--dim)}
footer p{margin:0 0 10px}
.backtop{display:inline-block;margin-top:6px;color:var(--faint);text-decoration:none;font-size:13px}
.backtop:hover{color:var(--gold2)}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}