:root{
  color-scheme: dark;
  --void:#070406; --panel:rgba(19,10,13,.82); --panel-solid:#160c10;
  --glass:rgba(24,13,17,.72);
  --edge:#42171d; --edge-hot:#FF2A38;
  --text:#F6ECEE; --muted:#C69AA0; --faint:#7A5960;
  --red:#FF2130; --red-deep:#B00E18; --gold:#F5C542; --gold-deep:#9c7415;
  --steel:#8A93A9;
  /* couleurs du logo MLDEG (M bleu, L vert, D or, E rouge, G vert) */
  --lg-blue:#1A7FE0; --lg-green:#22C020; --lg-gold:#E8C22E; --lg-red:#E8433F;
  /* image de repli affichée sous les visuels distants (miniature YouTube supprimée…) */
  --broken:url('/img/fallback.png');
  --mono:"JetBrains Mono","Cascadia Code",ui-monospace,"SF Mono",Menlo,Consolas,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --maxw:1180px; --n:6px;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
/* sticky footer : le pied reste toujours en bas */
body{
  margin:0; color:var(--text); font-family:var(--sans); line-height:1.55;
  background:var(--void); -webkit-font-smoothing:antialiased; overflow-x:hidden;
  min-height:100vh; display:flex; flex-direction:column;
}
main{flex:1 0 auto}
footer{flex-shrink:0}
a{color:inherit; text-decoration:none}
.wrap{max-width:var(--maxw); margin:0 auto; padding:0 22px; width:100%}
/* Bandeau, en-tête et pied de page : la bande occupe tout l'écran, mais son
   contenu reste centré et plafonné. Sur un écran très large, la marque et les
   boutons se retrouveraient sinon collés aux deux bords opposés. */
.wrap-full{max-width:1560px; margin-inline:auto; padding-inline:clamp(22px, 3vw, 48px)}
.mono{font-family:var(--mono)}
.tab{font-variant-numeric:tabular-nums}
.hidden{display:none !important}
:focus-visible{outline:2px solid var(--red); outline-offset:2px}

/* fond molten réel (public/background.png) + CRT */
#molten{position:fixed; inset:0; z-index:-2; width:100vw; height:100vh; display:block;
  background:#070406 url('/background.png') center center / cover no-repeat fixed;}
#crt{position:fixed; inset:0; z-index:60; pointer-events:none;
  background:
    repeating-linear-gradient(0deg, rgba(0,0,0,.17) 0 1px, transparent 1px 3px),
    radial-gradient(125% 95% at 50% 38%, transparent 52%, rgba(0,0,0,.55));
  animation:flick 5s steps(60) infinite;}
@keyframes flick{0%,100%{opacity:.94} 50%{opacity:1}}

.pixl{position:relative;
  clip-path:polygon(0 var(--n),var(--n) var(--n),var(--n) 0, calc(100% - var(--n)) 0,calc(100% - var(--n)) var(--n),100% var(--n),
    100% calc(100% - var(--n)),calc(100% - var(--n)) calc(100% - var(--n)),calc(100% - var(--n)) 100%,
    var(--n) 100%,var(--n) calc(100% - var(--n)),0 calc(100% - var(--n)));
  box-shadow:inset 0 0 0 2px var(--edge);}
.pixl.hot{box-shadow:inset 0 0 0 2px var(--red-deep)}

/* HEADER STICKY (marquee + nav restent en haut) */
.site-header{position:sticky; top:0; z-index:50}

/* MARQUEE */
.marquee{
  background:linear-gradient(180deg,#1a0a0d,#0d0608);
  border-bottom:2px solid var(--red-deep);
  box-shadow:0 2px 0 rgba(255,33,48,.25), 0 10px 30px rgba(0,0,0,.5);
  font-family:var(--mono); font-size:12px;}
.marquee-in{display:flex; align-items:center; gap:16px; height:42px; overflow:hidden; letter-spacing:.04em}
.coin{color:var(--gold); font-weight:700; letter-spacing:.12em; white-space:nowrap; transition:color .14s, text-shadow .14s}
.coin:hover{color:#fff; text-shadow:0 0 10px rgba(245,197,66,.9)}
.status{display:flex; align-items:center; gap:8px; white-space:nowrap; letter-spacing:.08em; text-transform:uppercase}
.dot{width:9px;height:9px;border-radius:1px;background:var(--faint)}
.status.live .dot{background:var(--red); animation:ember 1.6s infinite}
@keyframes ember{0%,100%{box-shadow:0 0 0 0 rgba(255,33,48,.6),0 0 6px var(--red)}50%{box-shadow:0 0 0 5px transparent,0 0 12px var(--red)}}
.marquee .next{margin-left:auto; color:var(--muted); display:flex; gap:9px; align-items:center; white-space:nowrap}
.marquee .next b{color:var(--text); font-weight:600}
.marquee .chan{color:var(--red)}

/* NAV */
header.top{border-bottom:1px solid var(--edge); background:rgba(9,5,6,.66); backdrop-filter:blur(6px)}
.nav{display:flex; align-items:center; gap:20px; height:64px}
.brand{font-family:var(--mono); font-weight:800; font-size:22px; letter-spacing:.06em; color:var(--text); display:flex; align-items:center; text-shadow:2px 2px 0 rgba(0,0,0,.8)}
/* wordmark aux couleurs du logo */
.wm-m{color:var(--lg-blue)} .wm-l{color:var(--lg-green)} .wm-d{color:var(--lg-gold)}
.wm-e{color:var(--lg-red)} .wm-g{color:var(--lg-green)}
.brand .cur{width:10px;height:16px;background:var(--gold);margin-left:5px;animation:blink 1.05s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
/* bouton burger : n'apparaît que quand le menu passe en panneau */
.nav-toggle{display:none; width:42px; height:38px; padding:0; cursor:pointer; background:#160c10; border:0;
  box-shadow:inset 0 0 0 2px var(--edge); position:relative}
.nav-toggle:hover{box-shadow:inset 0 0 0 2px var(--red-deep)}
.nav-toggle-bars,.nav-toggle-bars::before,.nav-toggle-bars::after{position:absolute; left:11px; width:20px; height:2px;
  background:var(--text); transition:transform .18s, opacity .12s}
.nav-toggle-bars{top:18px}
.nav-toggle-bars::before,.nav-toggle-bars::after{content:""; left:0}
.nav-toggle-bars::before{top:-6px} .nav-toggle-bars::after{top:6px}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars{background:transparent}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::before{transform:translateY(6px) rotate(45deg); background:var(--red)}
.nav-toggle[aria-expanded="true"] .nav-toggle-bars::after{transform:translateY(-6px) rotate(-45deg); background:var(--red)}

.menu{display:flex; gap:2px; font-family:var(--mono); font-size:12.5px}
.menu a{padding:8px 11px; color:var(--muted); letter-spacing:.03em; text-transform:uppercase; border-bottom:2px solid transparent}
.menu a:hover{color:var(--text)}
/* filet vertical qui détache le wiki des rubriques de contenu */
.menu-sep{width:1px; align-self:center; height:16px; margin:0 8px; background:var(--edge)}
/* lien actif : teinté par la couleur de sa catégorie (menu neutre le reste du temps) */
.menu a.on{color:var(--accent,var(--text)); border-bottom-color:var(--accent,var(--red)); text-shadow:0 0 12px color-mix(in srgb, var(--accent,var(--red)) 45%, transparent)}
.menu a.merch{color:var(--gold)}
.top-right{margin-left:auto; display:flex; gap:10px; align-items:center}
/* sélecteur de langue : deux codes, l'actif en rouge */
.lang-switch{display:flex; gap:2px; font-family:var(--mono); font-size:11px; letter-spacing:.06em}
.lang-switch a{padding:5px 7px; color:var(--faint); border:1px solid transparent}
.lang-switch a:hover{color:var(--muted)}
.lang-switch a.on{color:var(--red); border-color:var(--edge)}
.btn{font-family:var(--mono); font-size:12px; padding:9px 14px; color:var(--text); background:#1c0e12; cursor:pointer; border:0; letter-spacing:.06em; text-transform:uppercase;
  box-shadow:inset 0 0 0 2px var(--edge), 3px 3px 0 rgba(0,0,0,.5); transition:transform .1s; display:inline-flex; gap:7px; align-items:center}
.btn:hover{transform:translate(-1px,-1px); box-shadow:inset 0 0 0 2px var(--red-deep),4px 4px 0 rgba(0,0,0,.5)}
.btn:active{transform:translate(2px,2px); box-shadow:inset 0 0 0 2px var(--red-deep),0 0 0 rgba(0,0,0,.5)}
.btn.play{background:var(--red); color:#1a0002; font-weight:700; box-shadow:inset 0 0 0 2px #ff6b74,3px 3px 0 var(--red-deep)}
.btn.play:hover{box-shadow:inset 0 0 0 2px #ff8f96,4px 4px 0 var(--red-deep)}
.btn.gold{background:var(--gold); color:#231800; font-weight:700; box-shadow:inset 0 0 0 2px #ffdd7a,3px 3px 0 var(--gold-deep)}
/* boutons de téléchargement des fiches modpack */
.btn.blue{background:#0b69c1; color:#eaf4ff; font-weight:700; box-shadow:inset 0 0 0 2px #4ea1f0,3px 3px 0 #05386a}
.btn.blue:hover{box-shadow:inset 0 0 0 2px #7cbcf7,4px 4px 0 #05386a}
.btn.blue:active{box-shadow:inset 0 0 0 2px #7cbcf7,0 0 0 #05386a}
.btn.green{background:#0ecc12; color:#062b07; font-weight:700; box-shadow:inset 0 0 0 2px #6cf06f,3px 3px 0 #067a09}
.btn.green:hover{box-shadow:inset 0 0 0 2px #9bf79d,4px 4px 0 #067a09}
.btn.green:active{box-shadow:inset 0 0 0 2px #9bf79d,0 0 0 #067a09}

/* HERO */
.hero{padding:46px 0 20px}
.hero-grid{display:grid; grid-template-columns:1.28fr .92fr; gap:26px; align-items:center}
.eyebrow{font-family:var(--mono); font-size:11.5px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); margin:0 0 16px; display:flex; gap:10px; align-items:center}
.eyebrow::before{content:""; width:22px; height:2px; background:var(--gold)}
h1.title{margin:0; font-family:var(--sans); font-size:clamp(34px,5.2vw,64px); line-height:.9; color:var(--text); text-transform:uppercase; text-wrap:balance; letter-spacing:-.01em}
h1.title span{display:block}
h1.title .red{color:var(--red); text-shadow:0 0 24px rgba(255,33,48,.45)}
h1.title .out{color:transparent; -webkit-text-stroke:2px var(--gold)}
.lede{color:var(--muted); font-size:15.5px; max-width:50ch; margin:20px 0 24px}
.hero-cta{display:flex; gap:12px; flex-wrap:wrap; align-items:center}

/* NOW PLAYING screen */
.screen{background:#0a0507; padding:12px}
.screen .bezel{background:linear-gradient(180deg,#160a0d,#0a0406); padding:14px 16px 16px; position:relative; overflow:hidden}
.screen .scan{position:absolute; inset:0; pointer-events:none; background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 1px,transparent 1px 3px)}
.screen .hud{display:flex; justify-content:space-between; font-family:var(--mono); font-size:10.5px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase; margin-bottom:10px}
.screen .hud .rec{color:var(--red)}
.thumb{aspect-ratio:16/9; background:linear-gradient(135deg,#3a0d10,#0c0406 55%,#4a1408); background-size:cover,96px; background-position:center,center; background-repeat:no-repeat; position:relative; display:grid; place-items:center; margin-bottom:12px}
.thumb .play-ic{width:0;height:0;border-left:26px solid var(--red);border-top:16px solid transparent;border-bottom:16px solid transparent; filter:drop-shadow(0 0 10px rgba(255,33,48,.7))}
.thumb .ep-no{position:absolute; left:10px; bottom:8px; font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.6); color:#fff; padding:3px 7px; letter-spacing:.06em}
.thumb .dur{position:absolute; right:10px; bottom:8px; font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.6); color:#fff; padding:3px 7px; letter-spacing:.06em}
a.thumb{cursor:pointer}
a.thumb:hover .play-ic{filter:drop-shadow(0 0 16px rgba(255,33,48,1)); transform:scale(1.12)}
.screen .meta a{color:var(--gold)}
.screen h3{margin:2px 0 4px; font-family:var(--sans); font-size:19px; text-transform:uppercase; letter-spacing:-.01em}
.screen .meta{font-family:var(--mono); font-size:11.5px; color:var(--muted); letter-spacing:.04em}

/* SECTION */
section{padding:38px 0; position:relative}
.sec-head{display:flex; align-items:center; gap:14px; margin-bottom:22px; flex-wrap:wrap}
.sec-head h2{font-family:var(--sans); font-size:clamp(20px,3vw,30px); text-transform:uppercase; margin:0; letter-spacing:-.01em}
.sec-head .rule{flex:1; height:3px; min-width:30px; background:repeating-linear-gradient(90deg,var(--red-deep) 0 8px,transparent 8px 14px)}
.sec-head .count{font-family:var(--mono); font-size:11px; color:var(--gold); letter-spacing:.1em; text-transform:uppercase; white-space:nowrap}

.chips{display:flex; gap:9px; flex-wrap:wrap; margin-bottom:22px}
.chip{font-family:var(--mono); font-size:12px; padding:8px 14px; color:var(--muted); background:#160c10; cursor:pointer; border:0; letter-spacing:.06em; text-transform:uppercase; box-shadow:inset 0 0 0 2px var(--edge)}
.chip:hover{color:var(--text)}
.chip.on{color:#1a0002; background:var(--red); box-shadow:inset 0 0 0 2px #ff7b83; font-weight:700}

/* series grid */
.grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(228px,1fr)); gap:16px}
/* --accent : couleur du tag/cadre, réglable en back-office (catégorie ou série) */
.serie{--accent:var(--red); background:var(--glass); display:flex; flex-direction:column; transition:transform .13s}
.serie:hover{transform:translateY(-4px)}
.serie.pixl{box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, #1b0d11)}
.serie:hover.pixl{box-shadow:inset 0 0 0 2px var(--accent)}
.cover{aspect-ratio:16/10; position:relative; display:flex; justify-content:flex-end; align-items:flex-start; padding:10px; background-size:cover,84px; background-position:center,center; background-repeat:no-repeat}
.cover::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px); pointer-events:none}
/* tags : sous la miniature, catégorie puis tags libres, teintés par --accent */
.tags{display:flex; flex-wrap:wrap; gap:6px; align-items:center}
.serie .cat,.tag-chip{font-family:var(--mono); font-size:10px; letter-spacing:.1em; text-transform:uppercase; padding:3px 8px; line-height:1.5;
  color:var(--accent); background:color-mix(in srgb, var(--accent) 16%, transparent); box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 55%, transparent)}
.tag-chip{display:inline-flex; align-items:center}
.tag-chip.has-logo{padding:3px 7px}
.tag-chip img{height:16px; width:auto; max-width:74px; object-fit:contain; display:block}
.badges .tag-chip{font-size:10px; padding:4px 9px}
.pill{font-family:var(--mono); font-size:10px; letter-spacing:.08em; text-transform:uppercase; padding:3px 7px; font-weight:700; z-index:1}
.pill.live{background:var(--red); color:#1a0002; animation:glowp 2s infinite}
@keyframes glowp{0%,100%{box-shadow:0 0 4px rgba(255,33,48,.4)}50%{box-shadow:0 0 12px rgba(255,33,48,.9)}}
.pill.done{background:rgba(138,147,169,.2); color:var(--steel)}
.pill.gold{background:var(--gold); color:#231800}
/* Statut d'un projet : la couleur dit l'avancement d'un coup d'œil.
   TODO reste à faire, Beta est jouable mais mouvant, Released est stable. */
.pill--todo{background:var(--red); color:#1a0002}
.pill--beta{background:#00EEFF; color:#04262b}
.pill--released{background:#22C020; color:#04240a}
.serie .body{padding:13px 14px 15px; display:flex; flex-direction:column; gap:9px; flex:1; box-shadow:inset 0 3px 0 var(--accent)}
.serie h3{font-family:var(--sans); font-size:16px; text-transform:uppercase; letter-spacing:-.01em; margin:0; line-height:1.08}
.serie .row{display:flex; justify-content:space-between; align-items:center; margin-top:auto; font-family:var(--mono); font-size:11.5px; color:var(--muted)}
.serie .row .go{color:var(--accent)}
.vs{position:absolute; top:0; right:0; z-index:2; background:var(--gold); color:#231800; font-family:var(--mono); font-weight:800; font-size:11px; letter-spacing:.1em; padding:4px 9px 4px 12px; clip-path:polygon(12px 0,100% 0,100% 100%,0 100%)}

/* pas de visuel : image de repli posée sur le dégradé de la carte */
.cA,.cB,.cC,.cD,.cE,.cF,.cG,.cH{background-size:84px,cover; background-position:center,center; background-repeat:no-repeat}
.cA{background-image:var(--broken),linear-gradient(135deg,#5a0f14,#160406)}
.cB{background-image:var(--broken),linear-gradient(135deg,#3a0d5c,#120420)}
.cC{background-image:var(--broken),linear-gradient(135deg,#7a4a0e,#241202)}
.cD{background-image:var(--broken),linear-gradient(135deg,#0d4a54,#04191d)}
.cE{background-image:var(--broken),linear-gradient(135deg,#6a1020,#1c0509)}
.cF{background-image:var(--broken),linear-gradient(135deg,#243f6b,#0a1224)}
.cG{background-image:var(--broken),linear-gradient(135deg,#2f5a12,#0c1806)}
.cH{background-image:var(--broken),linear-gradient(135deg,#661056,#1e0518)}

/* RELEASE LOG */
.logwrap{overflow-x:auto; background:var(--glass)}
table.log{border-collapse:collapse; width:100%; min-width:660px; font-family:var(--mono); font-size:12.5px}
table.log th{text-align:left; padding:12px 16px; font-size:10.5px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold); border-bottom:2px solid var(--edge)}
table.log td{padding:12px 16px; border-bottom:1px solid rgba(66,23,29,.5)}
table.log tr:last-child td{border-bottom:0}
table.log tbody tr:hover td{background:rgba(255,33,48,.06)}
.rank{color:var(--faint); width:34px}
.tag{font-size:10px; letter-spacing:.05em; text-transform:uppercase; padding:3px 8px; font-weight:700}
.tag.mp{background:rgba(255,33,48,.16); color:var(--red)}
.tag.dp{background:rgba(245,197,66,.18); color:var(--gold)}
.tag.rp{background:rgba(138,147,169,.2); color:var(--steel)}
.st{display:inline-flex; align-items:center; gap:7px; color:var(--muted)}
.st::before{content:""; width:8px; height:8px; background:var(--faint)}
.st.rel::before{background:var(--red)}
.st.beta::before{background:var(--gold)}
.st.todo::before{background:var(--faint)}
.ver{color:var(--faint)}

/* PLANNING */
.plan-head{display:flex; align-items:center; gap:12px; margin-bottom:16px; font-family:var(--mono); font-size:12px; color:var(--muted); flex-wrap:wrap}
.plan-head .wk{color:var(--gold); font-weight:700; letter-spacing:.08em}
.plan{display:grid; grid-template-columns:repeat(7,1fr); gap:9px}
.day{background:var(--glass); padding:12px 11px 15px; min-height:118px}
.day h4{font-family:var(--mono); font-size:11px; letter-spacing:.1em; text-transform:uppercase; color:var(--faint); margin:0 0 10px}
.day.today{box-shadow:inset 0 0 0 2px var(--red)}
.day.today h4{color:var(--red)}
.slot{font-family:var(--mono); font-size:11px; background:rgba(255,33,48,.09); border-left:3px solid var(--red); padding:6px 8px; margin-bottom:6px; line-height:1.35}
.slot .t{color:var(--gold)}
.slot.off{background:rgba(138,147,169,.08); border-left-color:var(--faint); color:var(--faint)}

/* PLAYER 1 / BIO */
.player{display:grid; grid-template-columns:150px 1fr; gap:26px; align-items:center; background:var(--glass); padding:26px}
.avatar{aspect-ratio:1; background:conic-gradient(from 0deg,#ff2130,#b00e18,#f5c542,#ff2130); position:relative; display:grid; place-items:center}
.avatar.has-img{background-size:cover; background-position:center; background-repeat:no-repeat}
.avatar .face{width:78%; height:66%; background:#0a0406; display:grid; place-items:center; font-family:var(--mono); font-weight:800; font-size:24px; letter-spacing:.04em; text-align:center; text-shadow:2px 2px 0 rgba(0,0,0,.8)}
.player .p1{font-family:var(--mono); font-size:11px; letter-spacing:.14em; color:var(--red); text-transform:uppercase; margin:0 0 8px}
.player p{color:var(--muted); margin:0 0 14px; font-size:14.5px}
.traits{display:flex; gap:8px; flex-wrap:wrap; margin-bottom:16px}
.trait{font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase; padding:5px 10px; color:var(--text); background:#160c10; box-shadow:inset 0 0 0 2px var(--edge)}
.trait b{color:var(--red)}
.hud-stats{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono)}
.hstat .k{font-size:10px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase}
.hstat b{font-size:24px; display:block; letter-spacing:-.02em; color:var(--text)}

/* ---- back to top ---- */
#toTop{position:fixed; right:20px; bottom:20px; z-index:55; width:46px; height:46px; border:0; cursor:pointer;
  font-family:var(--mono); font-size:16px; font-weight:800; color:#1a0002; background:var(--red);
  box-shadow:inset 0 0 0 2px #ff6b74, 3px 3px 0 var(--red-deep);
  opacity:0; transform:translateY(14px); pointer-events:none; transition:opacity .2s, transform .2s, box-shadow .1s}
#toTop.show{opacity:1; transform:none; pointer-events:auto}
#toTop:hover{box-shadow:inset 0 0 0 2px #ff8f96, 4px 4px 0 var(--red-deep)}
#toTop:active{transform:translate(2px,2px); box-shadow:inset 0 0 0 2px #ff8f96, 0 0 0 var(--red-deep)}
@media (prefers-reduced-motion:reduce){ #toTop{transition:opacity .2s} }

/* ---- steam ---- */
.steam-sort{font-family:var(--mono); font-size:12px; background:#160c10; color:var(--text); border:0; box-shadow:inset 0 0 0 2px var(--edge); padding:8px 12px; cursor:pointer; letter-spacing:.04em}
.steam-sort:focus{outline:none; box-shadow:inset 0 0 0 2px var(--red)}
.steam-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; margin-top:8px}
.steam-game{background:var(--glass); display:flex; flex-direction:column; transition:transform .13s}
.steam-game:hover{transform:translateY(-4px)} .steam-game:hover.pixl{box-shadow:inset 0 0 0 2px var(--red)}
.steam-cover{aspect-ratio:460/215; background:#0d0709 center center no-repeat; background-size:cover,84px; position:relative; display:flex; align-items:flex-end; justify-content:flex-end; padding:8px}
.steam-cover::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px); pointer-events:none}
.steam-time{font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.66); color:#fff; padding:3px 8px; z-index:1; letter-spacing:.04em}
.steam-body{padding:12px 13px 14px; display:flex; flex-direction:column; gap:8px; flex:1}
.steam-body h3{margin:0; font-family:var(--sans); font-size:14.5px; text-transform:uppercase; letter-spacing:-.01em; line-height:1.1}
/* Barre de progression (succès Steam) : aplat franc, couleur donnée par le
   niveau atteint — même barème que les notes de modpack. */
.segs{display:flex; gap:2px; margin-top:auto; --seg:var(--red)}
.segs.seg-mid{--seg:#F59B23}
.segs.seg-high{--seg:#22C020}
.segs i{flex:1; height:6px; background:#2a1418}
.segs i.f{background:var(--seg)}
.pct{font-family:var(--mono); font-size:10.5px; color:var(--gold); letter-spacing:.06em}

/* ---- planning (home : semaine en cours + vignettes récentes) ---- */
.plan-home{display:flex; flex-direction:column; gap:12px}
.plan-current{position:relative; display:block; background:var(--glass); line-height:0}
.plan-current img{width:100%; height:auto; display:block}
.plan-cap{position:absolute; left:0; bottom:0; font-family:var(--mono); font-size:13px; color:var(--gold); background:rgba(0,0,0,.66); padding:7px 13px; text-transform:uppercase; letter-spacing:.06em; line-height:1.4}
.plan-thumbs{display:grid; grid-template-columns:repeat(4,1fr); gap:10px}
.plan-thumb{position:relative; display:block; background:var(--glass); line-height:0; aspect-ratio:16/9; overflow:hidden; transition:transform .12s}
.plan-thumb:hover{transform:translateY(-3px)} .plan-thumb:hover.pixl{box-shadow:inset 0 0 0 2px var(--red)}
.plan-thumb img{width:100%; height:100%; object-fit:cover}
.plan-thumb span{position:absolute; right:0; bottom:0; font-family:var(--mono); font-size:12px; font-weight:700; color:var(--gold); background:rgba(0,0,0,.7); padding:4px 9px; letter-spacing:.04em}
@media (max-width:820px){ .plan-thumbs{grid-template-columns:repeat(2,1fr)} }
/* page planning : 4 par ligne, une section par année */
.plannings{display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px}
@media (max-width:1000px){ .plannings{grid-template-columns:repeat(3,1fr)} }
@media (max-width:760px){ .plannings{grid-template-columns:repeat(2,1fr)} }
@media (max-width:460px){ .plannings{grid-template-columns:1fr} }
.year-nav{margin-bottom:10px}
.year-nav .chip{text-decoration:none}
.year-head{margin-top:36px}
.year-head h2{color:var(--gold); font-family:var(--mono); font-size:20px; letter-spacing:.06em}
.planning{margin:0; background:var(--glass); line-height:0}
.planning img{width:100%; height:auto; display:block}
.planning figcaption{font-family:var(--mono); font-size:12px; color:var(--muted); padding:10px 12px; letter-spacing:.06em; text-transform:uppercase; line-height:1.4}
.planning-empty{aspect-ratio:16/9; display:grid; place-items:center; color:var(--faint); font-family:var(--mono); font-size:13px}

/* ---- partenaires ---- */
.partners{display:grid; grid-template-columns:repeat(auto-fill,minmax(280px,1fr)); gap:16px; margin-top:8px}
.partner{background:var(--glass); display:flex; flex-direction:column; transition:transform .13s}
.partner:hover{transform:translateY(-4px)} .partner:hover.pixl{box-shadow:inset 0 0 0 2px var(--red)}
.partner-logo{aspect-ratio:16/9; display:grid; place-items:center; background:#0d0709; padding:20px; position:relative}
.partner-logo::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.14) 0 1px,transparent 1px 3px); pointer-events:none}
.partner-logo img{max-width:82%; max-height:80%; object-fit:contain; filter:drop-shadow(0 0 14px rgba(255,33,48,.25))}
.partner-mono{font-family:var(--mono); font-weight:800; font-size:26px; text-transform:uppercase; color:var(--gold); letter-spacing:.05em}
.partner-body{padding:14px 16px; display:flex; flex-direction:column; gap:8px; flex:1}
.partner-body h3{margin:0; font-family:var(--sans); text-transform:uppercase; font-size:17px; letter-spacing:-.01em}
.partner-body p{margin:0; color:var(--muted); font-size:13px}
.partner-body .go{margin-top:auto; font-family:var(--mono); font-size:12px; color:var(--red)}

/* ---- error pages (remplissent l'écran, contenu centré) ---- */
.err-wrap{display:flex; gap:clamp(40px,6vw,90px); align-items:center; justify-content:center; padding:40px 22px; flex-wrap:wrap; text-align:center; min-height:calc(100vh - 250px)}
.err-visual img{max-width:min(600px,42vw); height:auto; image-rendering:auto; filter:drop-shadow(0 0 60px rgba(255,33,48,.3))}
.err-text{max-width:540px; text-align:left}
.err-code{font-family:var(--mono); font-size:clamp(90px,16vw,200px); font-weight:800; color:var(--red); line-height:.85; margin:0 0 8px; text-shadow:0 0 44px rgba(255,33,48,.55); letter-spacing:-.03em}
.err-title{font-size:clamp(28px,4.6vw,52px); text-transform:uppercase; margin:0 0 16px; letter-spacing:-.01em}
.err-msg{color:var(--muted); margin:0 0 28px; font-size:clamp(15px,1.3vw,18px); max-width:46ch}
.err-tag{font-family:var(--mono); font-size:13px; letter-spacing:.2em; text-transform:uppercase; color:var(--gold); display:block; margin-bottom:14px}
@media (max-width:820px){ .err-wrap{gap:24px; min-height:auto; padding:50px 22px} .err-text{text-align:center; max-width:520px} }

/* ---- image de repli (<img> cassée) : jamais étirée, centrée dans son cadre ---- */
.img-broken{object-fit:contain !important; background:#160c10; padding:6%}
.planning .img-broken{width:100%; height:auto; aspect-ratio:16/9}
.plan-current .img-broken{width:100%; height:auto; aspect-ratio:16/9}
.plan-thumb .img-broken,.partner-logo .img-broken{width:100%; height:100%}
.tag-chip .img-broken{height:16px; width:16px; padding:0}
.shead-logo.img-broken{max-height:46%; max-width:160px; padding:0}

/* ---- visuel absent : même image de repli que pour les visuels cassés ---- */
.ethumb.empty{background-image:var(--broken); background-size:72px; background-position:center; background-repeat:no-repeat}
.thumb.empty{background-image:var(--broken),linear-gradient(135deg,#3a0d10,#0c0406 55%,#4a1408); background-size:96px,cover}
.bigthumb.empty{background-image:var(--broken); background-size:120px; background-position:center; background-repeat:no-repeat}
.steam-cover.empty{background-image:var(--broken); background-size:84px; background-position:center; background-repeat:no-repeat}
.planning-empty{background:var(--broken) center/84px no-repeat}

/* ---- filtre par tag (listes séries / projets) ---- */
.tag-filter{margin:-6px 0 20px}
.tag-filter .chip{--accent:var(--red); display:inline-flex; align-items:center; gap:7px}
.tag-filter .chip img{height:15px; width:auto; max-width:64px; object-fit:contain}
.tag-filter .chip.on{color:#150406; background:var(--accent); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 60%, #fff); font-weight:700}
.tag-filter .chip:not(.on){color:color-mix(in srgb, var(--accent) 80%, var(--text)); box-shadow:inset 0 0 0 2px color-mix(in srgb, var(--accent) 45%, transparent)}

/* ---- bloc « Mon avis » (fiches Minecraft) ---- */
.review{display:grid; grid-template-columns:170px 1fr; gap:26px; align-items:start; background:var(--glass); padding:24px 26px}
/* Note de modpack : la couleur vient du score, pas de la série. Aplat franc,
   sans dégradé, pour que 0 ne ressemble pas à 10. */
.review .score{display:flex; flex-direction:column; gap:10px; --score:var(--red)}
.review .score-low{--score:#FF2130}
.review .score-mid{--score:#F59B23}
.review .score-high{--score:#22C020}
/* Le sans-faute mérite sa propre couleur. */
.review .score-perfect{--score:#00EEFF}
.review .score-val{display:flex; align-items:baseline; gap:4px; font-family:var(--mono)}
.review .score-val b{font-size:54px; line-height:1; color:var(--score); text-shadow:0 0 22px color-mix(in srgb, var(--score) 45%, transparent)}
.review .score-val span{font-size:15px; color:var(--faint)}
.review .segs{display:flex; gap:2px}
.review .segs i{flex:1; height:8px; background:#2a1418}
.review .segs i.f{background:var(--score)}
.review-text{color:var(--muted); font-size:15px; line-height:1.7}
@media (max-width:700px){ .review{grid-template-columns:1fr; gap:16px} }

/* ---- sections par type (page Work) ---- */
.type-section + .type-section{margin-top:30px}

/* ---- galerie de screenshots (page projet) ---- */
.shots{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:14px}
.shot{margin:0; background:var(--glass); line-height:0; transition:transform .12s}
.shot:hover{transform:translateY(-3px)} .shot:hover.pixl{box-shadow:inset 0 0 0 2px var(--accent,var(--red))}
.shot img{width:100%; height:auto; display:block; aspect-ratio:16/9; object-fit:cover}
.shot figcaption{font-family:var(--mono); font-size:11.5px; color:var(--muted); padding:9px 12px; line-height:1.4}

/* ---- pages d'erreur : visuel sous le texte ---- */
.err-wrap{flex-direction:column}

/* ============ WIKI ============ */
/* Cadres du wiki : même verre dépoli que la barre de navigation, sinon le fond
   molten reste net derrière et le texte devient dur à lire. */
.wiki-side,.wiki-body,.wiki-card{backdrop-filter:blur(6px)}
.wiki{display:grid; grid-template-columns:270px 1fr; gap:26px; align-items:start; margin-top:18px}
.wiki-side{position:sticky; top:118px; background:var(--glass); padding:14px; max-height:calc(100vh - 150px); overflow:auto}
.wiki-side .find{margin-bottom:12px}
.wiki-tree{list-style:none; margin:0; padding:0; font-size:13.5px}
.wiki-tree ul{list-style:none; margin:2px 0 6px; padding-left:12px; border-left:1px solid var(--edge)}
.wiki-tree a{display:flex; gap:7px; align-items:baseline; padding:5px 8px; color:var(--muted); line-height:1.35}
.wiki-tree a:hover{color:var(--text); background:rgba(255,255,255,.04)}
.wiki-tree a.on{color:var(--text); background:color-mix(in srgb, var(--red) 16%, transparent); box-shadow:inset 2px 0 0 var(--red); font-weight:600}
.wiki-tree a.draft{opacity:.65}
.wiki-tree .ic{font-size:14px}
.wik-draft{font-family:var(--mono); font-size:9px; letter-spacing:.08em; text-transform:uppercase; color:var(--gold); align-self:center}
/* page pas encore traduite : pastille dans le sommaire, bandeau sur la page */
.wik-untr{font-family:var(--mono); font-size:9px; letter-spacing:.08em; color:var(--faint); align-self:center; margin-left:6px}
.wiki-untranslated{margin:0 0 18px; padding:9px 13px; font-size:12.5px; color:var(--gold);
  background:rgba(245,197,66,.08); border-left:3px solid var(--gold)}
.wiki-main{min-width:0}
.wiki-title{font-family:var(--sans); font-size:clamp(28px,4vw,44px); text-transform:uppercase; letter-spacing:-.01em; margin:0 0 8px; display:flex; gap:12px; align-items:center}
.wiki-summary{color:var(--muted); font-size:15.5px; margin:0 0 20px}
/* sommaire de page : 3e colonne collante, façon GitBook */
.wiki.has-toc{grid-template-columns:250px minmax(0,1fr) 210px}
.wiki-toc{position:sticky; top:118px; align-self:start; max-height:calc(100vh - 150px); overflow:auto; padding-left:14px; border-left:1px solid var(--edge)}
.wiki-toc .k{font-family:var(--mono); font-size:10px; letter-spacing:.12em; text-transform:uppercase; color:var(--gold)}
.wiki-toc ul{list-style:none; margin:10px 0 0; padding:0; font-size:13px}
.wiki-toc li{margin:0} .wiki-toc li.lvl3{padding-left:14px}
.wiki-toc a{display:block; padding:5px 0 5px 10px; margin-left:-15px; border-left:2px solid transparent; color:var(--faint); line-height:1.35}
.wiki-toc a:hover{color:var(--muted)}
.wiki-toc a.on{color:var(--text); border-left-color:var(--red)}
.wiki-body h2{scroll-margin-top:120px; font-size:24px; border-bottom:1px solid var(--edge); padding-bottom:6px}
.wiki-body h3{scroll-margin-top:120px; font-size:18px}
/* paragraphes resserrés : une ligne vide sépare, sans grand trou */
.wiki-body p{margin:0 0 11px}
.wiki-body p:last-child{margin-bottom:0}
/* Une image glissée au fil du texte reste sur sa ligne ; seule une image seule
   dans son paragraphe (classe posée par le rendu) passe en bloc avec ses marges.
   margin-block seulement : le centrage de :::center joue sur les marges latérales. */
.wiki-body img{max-width:100%; height:auto; display:inline-block; vertical-align:middle; margin:0}
.wiki-body > img,.wiki-body .wk-figure img{display:block; margin-block:16px}
.wiki-body .wk-figure{margin:0}
/* Icônes en début de puce : taille de texte, et lignes resserrées pour que la
   liste ne s'étire pas dès qu'une image apparaît. */
.wiki-body li img{max-height:1.7em; width:auto; vertical-align:-.35em; margin:0 3px 0 0}
.wiki-body li:has(img){margin-bottom:2px; line-height:1.45}
.wiki-body pre{background:#120b0f; padding:14px 16px; overflow:auto; font-family:var(--mono); font-size:12.5px; box-shadow:inset 0 0 0 1px var(--edge)}
/* code au fil du texte : petit cadre, la couleur du texte reste réglable */
.wiki-body code,.prose code{font-family:var(--mono); font-size:.88em; color:var(--text);
  background:#1c1219; padding:1px 6px; border-radius:4px; box-shadow:inset 0 0 0 1px var(--edge); white-space:nowrap}
.wiki-body pre code,.prose pre code{background:none; padding:0; border-radius:0; box-shadow:none; color:var(--text); white-space:pre; font-size:1em}
.wiki-body a code,.prose a code{color:inherit}
.wiki-body blockquote{margin:16px 0; padding:8px 16px; border-left:3px solid var(--red); background:rgba(255,33,48,.06); color:var(--muted)}
.wiki-body .table-wrap{overflow-x:auto; margin:16px 0}
.wiki-body table{border-collapse:collapse; width:100%; font-size:13.5px}
.wiki-body th,.wiki-body td{padding:9px 12px; border-bottom:1px solid rgba(66,23,29,.6); text-align:left}
.wiki-body th{color:var(--gold); font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase}
.wiki-foot{display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; margin-top:28px; padding-top:18px; border-top:1px solid var(--edge)}
.wiki-foot .upd{font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.wiki-nextprev{display:flex; gap:10px; flex-wrap:wrap}
.wiki-cards{display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px}
.wiki-card{background:var(--glass); padding:16px 18px; display:flex; flex-direction:column; gap:8px; transition:transform .12s}
.wiki-card:hover{transform:translateY(-3px)} .wiki-card:hover.pixl{box-shadow:inset 0 0 0 2px var(--red)}
.wiki-card h3{margin:0; font-family:var(--sans); font-size:17px; text-transform:uppercase; letter-spacing:-.01em; display:flex; gap:9px; align-items:center}
.wiki-card p{margin:0; color:var(--muted); font-size:13.5px}
.wiki-card .sub{margin-top:auto; font-family:var(--mono); font-size:11px; color:var(--red)}
@media (max-width:1180px){ .wiki.has-toc{grid-template-columns:250px minmax(0,1fr)} .wiki-toc{display:none} }
@media (max-width:900px){ .wiki,.wiki.has-toc{grid-template-columns:1fr} .wiki-side{position:static; max-height:none} }

/* ---- blocs de contenu façon GitBook ---- */
.wiki-body hr,.prose hr{border:0; height:3px; margin:26px 0; background:repeating-linear-gradient(90deg,var(--red-deep) 0 8px,transparent 8px 14px)}
.wk-hint{display:flex; gap:12px; margin:18px 0; padding:14px 16px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--edge)}
.wk-hint-ic{font-size:16px; line-height:1.5; flex:none}
.wk-hint-body>:first-child{margin-top:0} .wk-hint-body>:last-child{margin-bottom:0}
.wk-hint--info{box-shadow:inset 0 0 0 1px rgba(26,127,224,.5); background:rgba(26,127,224,.08)}
.wk-hint--success{box-shadow:inset 0 0 0 1px rgba(34,192,32,.5); background:rgba(34,192,32,.08)}
.wk-hint--warning{box-shadow:inset 0 0 0 1px rgba(232,194,46,.5); background:rgba(232,194,46,.08)}
.wk-hint--danger{box-shadow:inset 0 0 0 1px rgba(255,33,48,.5); background:rgba(255,33,48,.08)}

.wk-tabs{margin:18px 0; box-shadow:inset 0 0 0 1px var(--edge)}
.wk-tab-btns{display:flex; flex-wrap:wrap; gap:2px; padding:6px 6px 0; background:rgba(255,255,255,.03)}
.wk-tab-btn{font-family:var(--mono); font-size:12px; padding:8px 14px; border:0; cursor:pointer; color:var(--muted); background:transparent; border-bottom:2px solid transparent}
.wk-tab-btn:hover{color:var(--text)}
.wk-tab-btn.on{color:var(--text); border-bottom-color:var(--red); background:rgba(255,255,255,.04)}
.wk-tab-pane{display:none; padding:16px}
.wk-tab-pane.on{display:block}
.wk-tab-pane>:first-child{margin-top:0} .wk-tab-pane>:last-child{margin-bottom:0}

.wk-code{margin:18px 0; box-shadow:inset 0 0 0 1px var(--edge); background:#120b0f; position:relative}
.wk-code-head{display:flex; justify-content:space-between; align-items:center; gap:12px; padding:8px 14px; background:rgba(255,255,255,.04); font-family:var(--mono); font-size:11.5px}
.wk-code-title{color:var(--text)}
.wk-code-lang{color:var(--gold); text-transform:uppercase; letter-spacing:.08em; font-size:10px}
.wk-code pre{margin:0; background:transparent; box-shadow:none}
/* les lignes trop longues reviennent à la ligne au lieu de défiler */
.wk-code code,.wiki-body pre code{white-space:pre-wrap; overflow-wrap:anywhere}
/* numéros de ligne (greffon highlight.js) : une rangée par ligne, repli compris */
.hljs-ln{border-collapse:collapse; width:100%}
.hljs-ln td{padding:0; vertical-align:top; border:0}
.hljs-ln-numbers{width:1%; padding-right:14px !important; text-align:right; color:var(--faint);
  user-select:none; -webkit-user-select:none; white-space:nowrap}
.hljs-ln-code{white-space:pre-wrap; overflow-wrap:anywhere}

.wiki-body details{margin:18px 0; padding:0 16px; background:rgba(255,255,255,.03); box-shadow:inset 0 0 0 1px var(--edge)}
.wiki-body details summary{cursor:pointer; padding:12px 0; font-weight:600; list-style:none; display:flex; gap:9px; align-items:center}
.wiki-body details summary::-webkit-details-marker{display:none}
.wiki-body details summary::before{content:"▸"; color:var(--red); transition:transform .15s}
.wiki-body details[open] summary::before{transform:rotate(90deg)}
.wiki-body details>*:not(summary){margin-bottom:14px}

/* bouton de copie posé sur chaque bloc de code */
.wk-copy{position:absolute; top:8px; right:8px; z-index:2; font-family:var(--mono); font-size:10.5px; letter-spacing:.06em; text-transform:uppercase;
  padding:5px 9px; color:var(--muted); background:#1c1219; border:0; cursor:pointer; box-shadow:inset 0 0 0 1px var(--edge); opacity:0; transition:opacity .14s, color .14s}
.wk-code:hover .wk-copy,.wiki-body pre:hover .wk-copy,.wk-copy:focus{opacity:1}
.wk-copy:hover{color:var(--text)}
.wk-copy.done{color:var(--lg-green)}
.wk-code:has(.wk-code-head) .wk-copy{top:34px}
.wiki-body pre{position:relative}

/* ancre au survol des titres */
.wiki-body h2,.wiki-body h3{position:relative}
.wiki-body .wk-anchor{position:absolute; left:-22px; color:var(--faint); opacity:0; text-decoration:none; transition:opacity .14s}
.wiki-body h2:hover .wk-anchor,.wiki-body h3:hover .wk-anchor{opacity:1}
.wiki-body .wk-anchor:hover{color:var(--red)}

/* ---- stepper, cartes de renvoi, fichiers ---- */
.wk-stepper{margin:18px 0; padding-left:4px}
.wk-step{display:grid; grid-template-columns:34px 1fr; gap:14px; position:relative; padding-bottom:18px}
.wk-step:not(:last-child)::before{content:""; position:absolute; left:16px; top:34px; bottom:0; width:2px; background:var(--edge)}
.wk-step-no{width:32px; height:32px; display:grid; place-items:center; font-family:var(--mono); font-weight:700; font-size:14px;
  color:#1a0002; background:var(--red); box-shadow:inset 0 0 0 2px #ff7b83}
.wk-step-body>:first-child{margin-top:0} .wk-step-body>:last-child{margin-bottom:0}

.wk-card{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:10px 0; padding:14px 16px; background:var(--glass);
  box-shadow:inset 0 0 0 1px var(--edge); transition:transform .12s, box-shadow .12s}
.wk-card:hover{transform:translateY(-2px); box-shadow:inset 0 0 0 1px var(--red)}
.wk-card-t{font-weight:600; color:var(--text); display:flex; gap:9px; align-items:center}
.wk-card-s{color:var(--muted); font-size:13.5px}
.wk-card-go{margin-left:auto; color:var(--red); font-family:var(--mono)}

.wk-file{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin:18px 0; padding:12px 14px; background:var(--glass); box-shadow:inset 0 0 0 1px var(--edge)}
.wk-file-ext{font-family:var(--mono); font-size:10px; font-weight:700; letter-spacing:.08em; padding:6px 9px; color:var(--gold);
  background:rgba(245,197,66,.14); box-shadow:inset 0 0 0 1px rgba(245,197,66,.4)}
/* PNG : l'aperçu prend la place de la pastille d'extension, même encombrement. */
.wk-file-thumb{width:56px; height:40px; flex:none; object-fit:contain; display:block;
  background:rgba(245,197,66,.08); box-shadow:inset 0 0 0 1px rgba(245,197,66,.4); padding:2px}
.wk-file-name{display:flex; flex-direction:column; gap:2px; color:var(--text); font-size:14px}
.wk-file-size{font-family:var(--mono); font-size:11px; color:var(--faint)}
.wk-file .btn{margin-left:auto; font-size:11px; padding:7px 11px}
.wk-file .btn + .btn{margin-left:0}

/* ---- alignement et filet fin ---- */
.wk-align--center{text-align:center}
.wk-align--right{text-align:right}
.wk-align--left{text-align:left}
.wk-align--center img,.wk-align--center .wk-file,.wk-align--center table{margin-left:auto; margin-right:auto}
.wk-align--right img{margin-left:auto}
hr.wk-rule-thin{border:0; height:2px; margin:18px 0; background:repeating-linear-gradient(90deg,var(--red-deep) 0 8px,transparent 8px 14px); opacity:.75}
.wiki-body h1{font-size:30px; scroll-margin-top:120px; margin:26px 0 12px}

/* ---- coloration syntaxique (highlight.js, thème maison) ---- */
.hljs-comment,.hljs-quote{color:#7A5960; font-style:italic}
.hljs-keyword,.hljs-selector-tag,.hljs-literal,.hljs-section,.hljs-doctag,.hljs-type{color:#FF6B74}
.hljs-string,.hljs-regexp,.hljs-addition,.hljs-attribute,.hljs-meta .hljs-string{color:#22C020}
.hljs-number,.hljs-symbol,.hljs-bullet,.hljs-link{color:#F5C542}
.hljs-title,.hljs-title.function_,.hljs-name,.hljs-selector-id,.hljs-selector-class{color:#7AA2F7}
.hljs-attr,.hljs-variable,.hljs-template-variable,.hljs-property{color:#E8C22E}
.hljs-built_in,.hljs-class .hljs-title{color:#4FD4A0}
.hljs-deletion{color:#FF2130}
.hljs-emphasis{font-style:italic} .hljs-strong{font-weight:700}

/* ---- diagrammes Mermaid ---- */
.wiki-body pre.mermaid{background:#0a0507; box-shadow:inset 0 0 0 1px var(--edge); padding:18px; margin:18px 0; text-align:center; overflow-x:auto}
.wiki-body pre.mermaid:not([data-processed]){color:var(--faint); font-size:12px; text-align:left}
.wiki-body pre.mermaid svg{max-width:100%; height:auto}
.wiki-body pre.mermaid .wk-copy{display:none}

/* empty state */
.empty{font-family:var(--mono); font-size:13px; color:var(--faint); padding:26px; background:var(--glass); box-shadow:inset 0 0 0 2px var(--edge)}
.empty code{color:var(--gold)}

/* FOOTER */
footer{border-top:2px solid var(--edge); margin-top:44px; padding:34px 0 48px; font-family:var(--mono); font-size:12px; color:var(--muted)}
.foot{display:flex; justify-content:space-between; gap:20px; flex-wrap:wrap; align-items:center}
.socials{display:flex; gap:12px; flex-wrap:wrap; align-items:center}
.socials a{width:38px;height:38px; display:grid; place-items:center; color:var(--text); background:transparent; font-size:19px;
  transition:transform .16s cubic-bezier(.34,1.56,.64,1), color .16s, filter .16s; will-change:transform}
.socials a:hover{transform:scale(1.35) translateY(-3px); color:var(--sc,var(--red));
  filter:drop-shadow(0 0 12px color-mix(in srgb, var(--sc,var(--red)) 65%, transparent))}

/* FontAwesome Brands (self-hosted) */
@font-face{font-family:"FA Brands"; font-style:normal; font-weight:400; font-display:block; src:url('/fonts/fa-brands-400.woff2') format('woff2')}
.fab{font-family:"FA Brands"; font-weight:400; font-style:normal; display:inline-block; line-height:1; -webkit-font-smoothing:antialiased; -moz-osx-font-smoothing:grayscale}
.fa-steam::before{content:"\f1b6"} .fa-x-twitter::before{content:"\e61b"} .fa-twitter::before{content:"\f099"}
.fa-discord::before{content:"\f392"} .fa-twitch::before{content:"\f1e8"} .fa-youtube::before{content:"\f167"}
.fa-instagram::before{content:"\f16d"} .fa-tiktok::before{content:"\e07b"} .fa-patreon::before{content:"\f3d9"}
.fa-facebook::before{content:"\f39e"} .fa-github::before{content:"\f09b"} .fa-reddit::before{content:"\f1a1"}
.fa-spotify::before{content:"\f1bc"} .fa-kickstarter::before{content:"\f3bb"}
/* Logo du pied de page : même encombrement que le mot-symbole texte d'avant. */
.foot-logo{display:block; height:34px; width:auto; margin-bottom:8px}
.legal{color:var(--text); letter-spacing:.04em; line-height:1.7}
.foot-link{color:var(--muted); transition:color .14s}
.foot-link:hover{color:var(--red)}
.heart{color:var(--red)}
.continue{color:var(--gold)}

/* ============ SERIES DETAIL ============ */
.crumb{font-family:var(--mono); font-size:11px; letter-spacing:.08em; text-transform:uppercase; color:var(--faint); padding:20px 0 4px; display:flex; gap:9px; align-items:center; flex-wrap:wrap}
.crumb a:hover{color:var(--muted)} .crumb .sep{color:var(--red-deep)} .crumb .cur{color:var(--gold)}
.shero{display:grid; grid-template-columns:1.15fr .85fr; gap:26px; align-items:stretch; padding:14px 0 30px}
.sinfo{display:flex; flex-direction:column; justify-content:center}
.badges{display:flex; gap:9px; align-items:center; flex-wrap:wrap; margin-bottom:14px}
.pill.cat{background:rgba(0,0,0,.5); color:#fff; box-shadow:inset 0 0 0 2px var(--edge)}
.stitle{margin:0; font-family:var(--sans); font-size:clamp(34px,5.4vw,64px); line-height:.9; text-transform:uppercase; letter-spacing:-.01em; text-wrap:balance}
.stitle .red{color:var(--red); text-shadow:0 0 22px rgba(255,33,48,.4)}
.sdesc{color:var(--muted); font-size:15px; margin:16px 0 20px; max-width:46ch}
.facts{display:flex; gap:22px; flex-wrap:wrap; font-family:var(--mono); margin-bottom:22px}
.fact .k{font-size:10px; letter-spacing:.12em; color:var(--gold); text-transform:uppercase} .fact b{font-size:22px; display:block; letter-spacing:-.02em}
.fact .s{font-size:12px; color:var(--muted)}
.sinfo .cta{display:flex; gap:11px; flex-wrap:wrap}
.sinfo .cta.dl{margin-top:10px}
.player-frame{position:relative; aspect-ratio:16/9; margin-bottom:12px; background:#000; overflow:hidden}
.player-frame iframe{position:absolute; inset:0; width:100%; height:100%; border:0}
.bigthumb{aspect-ratio:16/9; position:relative; display:grid; place-items:center; margin-bottom:12px; overflow:hidden; background-size:cover; background-position:center}
.bigthumb .wm{position:absolute; font-family:var(--sans); font-weight:800; font-size:120px; color:rgba(255,255,255,.07); letter-spacing:-.04em; z-index:0}
.bigthumb .play-ic{width:0;height:0;border-left:30px solid var(--red);border-top:19px solid transparent;border-bottom:19px solid transparent; filter:drop-shadow(0 0 12px rgba(255,33,48,.75)); z-index:1; cursor:pointer}
.bigthumb .ep-no{position:absolute; left:10px; bottom:9px; font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.62); color:#fff; padding:3px 8px; letter-spacing:.06em; z-index:1}
.bigthumb .dur{position:absolute; right:10px; bottom:9px; font-family:var(--mono); font-size:11px; background:rgba(0,0,0,.62); color:#fff; padding:3px 8px; z-index:1}
.ep-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:16px}
.ep{background:var(--glass); display:flex; flex-direction:column; cursor:pointer; transition:transform .12s}
.ep:hover{transform:translateY(-4px)} .ep:hover.pixl{box-shadow:inset 0 0 0 2px var(--red)}
.ep.playing.pixl{box-shadow:inset 0 0 0 2px var(--gold)}
.ethumb{aspect-ratio:16/9; position:relative; display:grid; place-items:center; overflow:hidden; background-size:cover,72px; background-position:center,center; background-repeat:no-repeat}
.ethumb::after{content:""; position:absolute; inset:0; background:repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px); pointer-events:none}
.ethumb .wm{font-family:var(--sans); font-weight:800; font-size:64px; color:rgba(255,255,255,.09); letter-spacing:-.04em}
.ethumb .no{position:absolute; left:8px; top:8px; font-family:var(--mono); font-size:10.5px; background:var(--red); color:#1a0002; font-weight:700; padding:3px 7px; z-index:1}
.ethumb .dur{position:absolute; right:8px; bottom:8px; font-family:var(--mono); font-size:10.5px; background:rgba(0,0,0,.66); color:#fff; padding:2px 7px; z-index:1}
.ethumb .new{position:absolute; right:8px; top:8px; font-family:var(--mono); font-size:10px; background:var(--gold); color:#231800; font-weight:800; padding:3px 7px; letter-spacing:.06em; z-index:1}
.ethumb .pl{position:absolute; inset:0; margin:auto; width:0;height:0;border-left:22px solid rgba(255,255,255,.92);border-top:14px solid transparent;border-bottom:14px solid transparent; opacity:0; transition:opacity .12s; z-index:1}
.ep:hover .pl{opacity:1}
.ep .eb{padding:12px 13px 14px; display:flex; flex-direction:column; gap:6px; flex:1}
.ep h4{margin:0; font-family:var(--sans); font-size:14.5px; text-transform:uppercase; letter-spacing:-.005em; line-height:1.12}
.ep .edate{margin-top:auto; font-family:var(--mono); font-size:11px; color:var(--muted); display:flex; justify-content:space-between}
.ep .edate .go{color:var(--red)}
.sort{display:flex; gap:0; font-family:var(--mono); font-size:11px}
.sort a{background:#160c10; color:var(--muted); padding:7px 12px; cursor:pointer; text-transform:uppercase; letter-spacing:.06em; box-shadow:inset 0 0 0 2px var(--edge)}
.sort a.on{background:var(--red); color:#1a0002; box-shadow:inset 0 0 0 2px #ff7b83; font-weight:700}

/* ---- recherche instantanée (séries / épisodes) ---- */
.find{flex:0 1 260px; min-width:170px; display:flex}
.find-in{width:100%; font-family:var(--mono); font-size:12px; padding:8px 12px; color:var(--text); background:#160c10; border:0;
  box-shadow:inset 0 0 0 2px var(--edge); letter-spacing:.04em; -webkit-appearance:none; appearance:none}
.find-in::placeholder{color:var(--faint)}
.find-in:focus{outline:none; box-shadow:inset 0 0 0 2px var(--red)}

/* ---- entête parallaxe de fiche série ---- */
.shead{position:relative; margin-top:18px; height:clamp(150px,22vw,300px); overflow:hidden; background:#0a0507; box-shadow:inset 0 0 0 2px var(--edge)}
.shead-bg{position:absolute; inset:-7%; background-size:cover,140px; background-position:center,center; background-repeat:no-repeat; transition:transform .35s cubic-bezier(.2,.7,.3,1); will-change:transform}
.shead::after{content:""; position:absolute; inset:0; z-index:1; pointer-events:none;
  background:linear-gradient(180deg,rgba(7,4,6,.12),rgba(7,4,6,.82)), repeating-linear-gradient(0deg,rgba(0,0,0,.16) 0 1px,transparent 1px 3px)}
.shead-logo{position:absolute; inset:0; margin:auto; z-index:2; max-width:min(62%,540px); max-height:72%; object-fit:contain;
  filter:drop-shadow(0 8px 22px rgba(0,0,0,.8))}
.shead-title{position:absolute; inset:auto 0 18px 0; z-index:2; text-align:center; font-family:var(--sans); font-weight:800;
  font-size:clamp(24px,4vw,48px); text-transform:uppercase; letter-spacing:-.01em; text-shadow:0 4px 18px rgba(0,0,0,.85)}
.tag-link:hover{color:var(--gold)}

/* ---- listes d'épisodes groupées par année ---- */
.ep-year + .ep-year{margin-top:26px}
.sec-head.sub{margin-bottom:14px}
.sec-head.sub h3{margin:0; font-family:var(--mono); font-size:17px; color:var(--gold); letter-spacing:.08em}

/* ---- épisode récent (< 7 jours) : badge + brillance ---- */
.ep.fresh.pixl{box-shadow:inset 0 0 0 2px var(--gold)}
.ep.fresh .ethumb::before{content:""; position:absolute; top:0; left:-70%; width:45%; height:100%; z-index:2; pointer-events:none;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.55),transparent); transform:skewX(-18deg); animation:shine 3.2s ease-in-out infinite}
@keyframes shine{0%{left:-70%} 60%,100%{left:140%}}

/* ---- contenu de page libre (Jeux en fond…) ---- */
.prose{color:var(--muted); font-size:15px; line-height:1.7; overflow-wrap:break-word}
/* Series cards are a component of their own, drawn for the home page: the
   content rules stay out of them. :where() weighs nothing, so excluding the
   cards leaves the cascade of every other block exactly as it was. */
.prose h2:not(:where(.pg-series *)),.prose h3:not(:where(.pg-series *)){color:var(--text); text-transform:uppercase; letter-spacing:-.01em; margin:22px 0 10px}
.prose h2:first-child,.prose h3:first-child{margin-top:0}
.prose a:not(:where(.pg-series *)){color:var(--gold)} .prose a:not(:where(.pg-series *)):hover{color:var(--red)}
.prose ul{padding-left:20px; margin:0 0 14px} .prose li{margin-bottom:6px}
/* These pages are built block by block in the admin. Text blocks come back as
   plain HTML, alignment and indentation as ql-* classes, the other blocks as
   the pg-* pieces below. */
.prose p{margin:0 0 14px} .prose>:last-child{margin-bottom:0}
.prose h4{color:var(--text); margin:18px 0 8px; font-size:16px; text-transform:uppercase; letter-spacing:-.01em}
.prose ol{padding-left:22px; margin:0 0 14px}
.prose blockquote{margin:0 0 14px; padding:8px 16px; border-left:3px solid var(--red); background:rgba(255,33,48,.06)}
.prose pre{background:#120b0f; padding:14px 16px; margin:0 0 14px; overflow:auto; font-family:var(--mono); font-size:12.5px; box-shadow:inset 0 0 0 1px var(--edge)}
.prose img:not(:where(.pg-series *)){max-width:100%; height:auto}
/* The site runs dark; an embed that declares no scheme of its own runs light.
   On such a mismatch the browser paints an opaque white backdrop behind the
   frame — an OBS widget, transparent in OBS, turned up in a white box. Giving
   the frame the embedded page's scheme lets its transparency through. */
.prose iframe{max-width:100%; border:0; color-scheme:normal}
.prose .ql-video{display:block; width:100%; aspect-ratio:16/9; height:auto; margin:0 0 14px}
.prose .ql-indent-1{padding-left:3em} .prose .ql-indent-2{padding-left:6em}
.prose .ql-indent-3{padding-left:9em} .prose .ql-indent-4{padding-left:12em}
/* A text block reads as it does in the editor: lines follow each other, and
   only an empty line — or the next block — opens a gap. */
.prose .pg-text{margin:0 0 18px}
.prose .pg-text p,.prose .pg-text ul,.prose .pg-text ol{margin:0}
.prose .pg-text li{margin-bottom:0}
.prose .ql-align-center{text-align:center}
.prose .ql-align-right{text-align:right}
.prose .ql-align-justify{text-align:justify}

.prose .pg-img{margin:0 0 18px}
.prose .pg-img img{width:var(--w,100%); height:auto; display:block}
.prose .pg-img--center{text-align:center} .prose .pg-img--center img{margin-inline:auto}
.prose .pg-img--right{text-align:right} .prose .pg-img--right img{margin-left:auto}
.prose .pg-img figcaption{margin-top:8px; font-family:var(--mono); font-size:11.5px; color:var(--faint)}
.prose .pg-video{margin:0 0 18px; aspect-ratio:16/9}
.prose .pg-video iframe{width:100%; height:100%; display:block; border:0}
.prose .pg-btn{margin:0 0 18px}
/* Series cards dropped into a page. What the content passes down by
   inheritance is set back to the body's, as the cards find it on the home page. */
.prose .pg-series{margin:0 0 18px; color:var(--text); font-size:1rem; line-height:1.55; overflow-wrap:normal}
/* Blocks set side by side, each column carrying its share of the room. They
   stack once the screen no longer holds them, and the rule turns with them. */
.prose .pg-cols{display:grid; grid-template-columns:var(--tpl,1fr 1fr); gap:20px; margin:0 0 18px}
.prose .pg-col>:last-child{margin-bottom:0}
.prose .pg-col--sep{border-left:1px solid var(--rule,rgba(255,255,255,.14)); padding-left:20px}
@media (max-width:820px){
  .prose .pg-cols{grid-template-columns:1fr}
  .prose .pg-col--sep{border-left:0; padding-left:0;
    border-top:1px solid var(--rule,rgba(255,255,255,.14)); padding-top:20px}
}
/* Twitch live: the player takes the room, the chat holds the right column and
   drops underneath once the screen no longer carries them side by side. */
.prose .pg-live{display:flex; gap:12px; margin:0 0 18px; align-items:stretch}
.prose .pg-live-player{flex:1; min-width:0; aspect-ratio:16/9}
.prose .pg-live-chat{flex:0 0 320px; min-width:0}
.prose .pg-live iframe{width:100%; height:100%; display:block; border:0}
@media (max-width:820px){
  .prose .pg-live{flex-direction:column}
  .prose .pg-live-chat{flex:none; height:380px}
}

@media (max-width:900px){
  .hero-grid,.player,.shero{grid-template-columns:1fr}
  .plan{grid-template-columns:repeat(3,1fr)}
  .player{grid-template-columns:100px 1fr}

  /* Le menu se replie derrière le burger : il était simplement masqué, donc
     aucune autre page n'était atteignable sur téléphone ou tablette. */
  .nav-toggle{display:block; order:2; margin-left:auto}
  .top-right{order:3; margin-left:0}
  .menu{
    order:4; position:absolute; top:100%; left:0; right:0; z-index:60;
    flex-direction:column; align-items:stretch; gap:0; padding:6px 0 10px;
    background:rgba(9,5,6,.97); backdrop-filter:blur(8px);
    border-bottom:2px solid var(--red-deep); box-shadow:0 14px 30px rgba(0,0,0,.6);
    max-height:calc(100dvh - 100%); overflow:auto;
    /* Replié : hors flux ET hors tabulation, sans transition qui saute. */
    display:none;
  }
  .menu.open{display:flex}
  .menu a{padding:13px clamp(22px, 3vw, 48px); font-size:14px; border-bottom:0;
    border-left:3px solid transparent}
  .menu a.on{border-bottom-color:transparent; border-left-color:var(--accent,var(--red))}
  .menu-sep{width:auto; height:1px; margin:6px clamp(22px, 3vw, 48px)}
  .nav{position:relative; flex-wrap:wrap; gap:10px; height:auto; min-height:64px; padding-block:8px}
  .brand{order:1}
}
@media (max-width:560px){
  .plan{grid-template-columns:repeat(2,1fr)}
  .marquee .next .hide{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition:none !important}
  html{scroll-behavior:auto}
}

/* ============ TIER LIST ============ */
/* Chaque rang est une bande : étiquette colorée à gauche, cartes à droite. */
.tiers{display:flex; flex-direction:column; gap:10px; margin-top:18px}
.tier{display:grid; grid-template-columns:120px minmax(0,1fr); gap:10px; align-items:stretch;
  background:var(--glass); backdrop-filter:blur(6px); box-shadow:inset 0 0 0 1px var(--edge)}
.tier-label{display:flex; flex-direction:column; justify-content:center; align-items:center; gap:4px;
  padding:16px 10px; text-align:center; background:var(--tier,var(--red)); color:#12080a}
.tier-label b{font-family:var(--mono); font-size:26px; line-height:1; letter-spacing:.04em; text-transform:uppercase}
.tier-label small{font-family:var(--mono); font-size:10.5px; letter-spacing:.08em; opacity:.75}
.tier-items{display:flex; flex-wrap:wrap; gap:12px; padding:12px}
/* Miniature seule, réduite de 30 % : le classement se lit d'un coup d'œil. */
.tier-items .serie{width:147px; flex:none}
.serie-compact .vs{font-size:10px}
.tier-none{margin:auto 0; font-family:var(--mono); font-size:11.5px; color:var(--faint); letter-spacing:.06em}
.tier-empty{opacity:.65}
.tier-out .tier-label{background:#2a1418; color:var(--muted)}
.tier-out .tier-label b{font-size:15px}
@media (max-width:700px){
  .tier{grid-template-columns:1fr}
  .tier-label{flex-direction:row; gap:10px; padding:9px 12px}
  .tier-label b{font-size:18px}
  .tier-items .serie{width:132px}
}