/* Layout: the Oxyde logo's world — black void, cracked blood-red, worn steel. Red is the only colour; steel is a gradient, never flat grey.
   Long scroll: hero (emblem) → games → Horde / WoW Forever story (parallax war camp + pinned horizontal chapters) → roster → community → recruitment (WoW form → Discord). */
:root{
  --void:#070707; --coal:#0f0f10; --char:#17171a; --seam:#2a2a2e;
  --steel:#e4e5e8; --steel-dim:#a2a3a8; --steel-faint:#66676c;
  --blood:#d3141c; --ember:#ff3d2e; --wine:#3a0608;
  --f-brand:"Saira","Arial Black",Impact,sans-serif;
  --f-lore:"Cinzel","Trajan Pro",Georgia,serif;
  --f-body:"Barlow","Segoe UI",system-ui,sans-serif;
  --f-mono:"JetBrains Mono",ui-monospace,Menlo,monospace;
  --metal:linear-gradient(180deg,#ffffff 0%,#d6d7da 38%,#8b8c90 52%,#e9eaec 70%,#77787c 100%);
  --cracks:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='420' height='420'><filter id='c' x='0' y='0' width='100%' height='100%'><feTurbulence type='turbulence' baseFrequency='.022' numOctaves='3' seed='7' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0  0 0 0 0 0  0 0 0 0 0  1 0 0 0 0'/><feComponentTransfer><feFuncA type='discrete' tableValues='.95 .5 0 0 0 0 0 0 0 0 0 0 0 0'/></feComponentTransfer></filter><rect width='100%' height='100%' filter='url(%23c)'/></svg>");
  --noise:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='220' height='220'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1  0 0 0 0 1  0 0 0 0 1  0 0 0 .55 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>");
  color-scheme:dark;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{background:var(--void);color:var(--steel);font:400 17px/1.6 var(--f-body);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0;background-image:var(--noise);opacity:.045;pointer-events:none;z-index:100}
a{color:inherit}
:focus-visible{outline:2px solid var(--ember);outline-offset:3px}
.wrap{max-width:1240px;margin:0 auto;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.eyebrow{font:700 12px/1 var(--f-mono);letter-spacing:.22em;text-transform:uppercase;color:var(--blood)}
h1,h2,h3{font-family:var(--f-brand);font-style:italic;text-transform:uppercase;line-height:.9;margin:0;text-wrap:balance}
h2{font-size:clamp(42px,6.6vw,92px);font-weight:900;font-stretch:80%}
p{margin:0}
.lead{font-size:19px;color:var(--steel-dim);max-width:60ch}
.metal{background:var(--metal);-webkit-background-clip:text;background-clip:text;color:transparent}
.redcrack{background:var(--cracks),linear-gradient(180deg,#ff3a30,#c80f17 55%,#7a070c);background-size:420px,100%;-webkit-background-clip:text;background-clip:text;color:transparent}

/* NAV */
.nav{position:sticky;top:env(safe-area-inset-top,0px);z-index:50;background:color-mix(in srgb,var(--void) 84%,transparent);backdrop-filter:blur(10px);border-bottom:1px solid var(--seam)}
.nav .wrap{display:flex;align-items:center;gap:28px;height:64px}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none;font:italic 900 24px/1 var(--f-brand);font-stretch:125%;letter-spacing:.02em}
.logo img{width:40px;height:auto}
.nav ul{display:flex;gap:22px;list-style:none;margin:0 0 0 auto;padding:0}
.nav ul a{font:700 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;text-decoration:none;color:var(--steel-dim);transition:color .2s}
.nav ul a:hover,.nav ul a.on{color:var(--steel)}
.nav ul a.on{box-shadow:0 2px 0 var(--blood)}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;font:700 13px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;text-decoration:none;padding:15px 22px;border:1px solid var(--blood);background:var(--blood);color:#fff;cursor:pointer;clip-path:polygon(12px 0,100% 0,calc(100% - 12px) 100%,0 100%);transition:background .2s,transform .2s}
.btn:hover{background:var(--ember);transform:translateY(-2px)}
.btn.ghost{background:transparent;color:var(--steel);border-color:var(--steel-faint)}
.btn.ghost:hover{border-color:var(--steel);background:#ffffff0d}
.btn[disabled]{opacity:.5;cursor:wait}
.nav .btn{padding:11px 18px;font-size:11px}
@media (max-width:900px){.nav ul{display:none}.nav .btn{margin-left:auto}}

/* HERO */
.hero{position:relative;overflow:hidden;padding-block:clamp(50px,8vw,100px) 0;border-bottom:1px solid var(--seam);background:radial-gradient(ellipse 60% 70% at 78% 40%,#3a0608 0%,transparent 70%),var(--void)}
#embers{position:absolute;inset:0;width:100%;height:100%;pointer-events:none}
.hero .wrap{position:relative;z-index:2}
.hero-grid{display:grid;grid-template-columns:1.25fr 1fr;gap:30px;align-items:center}
.hero h1{font-size:clamp(64px,11.5vw,170px);font-weight:900;font-stretch:78%;line-height:.82;margin-top:22px}
.hero h1 span{display:block}
.hero .lead{color:var(--steel);margin-top:30px}
.hero-cta{display:flex;gap:14px;flex-wrap:wrap;margin-top:34px}
.emblem{position:relative;justify-self:center;width:min(100%,480px);aspect-ratio:1;display:grid;place-items:center}
.emblem img{width:92%;filter:drop-shadow(0 30px 60px #000) drop-shadow(0 0 50px #d3141c40);will-change:transform}


@keyframes spin{to{transform:rotate(360deg)}}
@media (max-width:820px){.hero-grid{grid-template-columns:1fr}.emblem{order:-1;width:min(70%,300px)}}
.ticker{position:relative;z-index:2;margin-top:60px;border-top:1px solid var(--seam);overflow:hidden;white-space:nowrap;background:var(--coal)}
.ticker div{display:inline-flex;gap:48px;padding:16px 0;animation:tick 32s linear infinite;font:italic 800 20px/1 var(--f-brand);font-stretch:110%;letter-spacing:.06em;text-transform:uppercase;color:var(--steel-dim)}
.ticker b{color:var(--blood)}
@keyframes tick{to{transform:translateX(-50%)}}

/* SECTIONS */
.sec{padding-block:clamp(80px,11vw,140px)}
.sec-head{display:grid;grid-template-columns:1fr auto;gap:24px;align-items:end;margin-bottom:56px}
.sec-head .eyebrow{margin-bottom:18px;display:block}
@media (max-width:760px){.sec-head{grid-template-columns:1fr}}

/* GAMES */
.games{display:grid;grid-template-columns:repeat(6,1fr);gap:14px}
.game{position:relative;min-height:330px;overflow:hidden;border:1px solid var(--seam);background:var(--coal);text-decoration:none;display:flex;flex-direction:column;justify-content:flex-end;padding:26px;isolation:isolate;transition:border-color .3s}
.game:hover{border-color:var(--blood)}
.game .art{position:absolute;inset:0;z-index:-1;transition:transform .9s cubic-bezier(.2,.7,.2,1)}
.game:hover .art{transform:scale(1.06)}
.game .art svg{position:absolute;inset:0;width:100%;height:100%}
.game .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 25%,#070707f0)}
.game.wow{grid-column:span 4;grid-row:span 2;min-height:560px}
.game.lol,.game.bf{grid-column:span 2}
.game.gta{grid-column:span 6;min-height:220px}
.game .tag{position:absolute;top:22px;left:26px;font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:7px 10px;background:#070707b3;border:1px solid var(--seam)}
.game .tag.hot{border-color:var(--blood);color:#fff;background:var(--blood)}
.game h3{font-size:clamp(30px,3.4vw,48px);font-weight:900;font-stretch:85%}
.game.wow h3{font-size:clamp(44px,6vw,84px)}
.game p{color:var(--steel-dim);margin-top:10px;max-width:46ch}
.game .meta{display:flex;gap:18px;flex-wrap:wrap;margin-top:16px;font:500 12px/1.4 var(--f-mono);letter-spacing:.08em;text-transform:uppercase;color:var(--steel-faint)}
.game .meta b{color:var(--steel)}
@media (max-width:900px){.games{grid-template-columns:1fr 1fr}.game.wow,.game.gta{grid-column:span 2}.game.lol,.game.bf{grid-column:span 1}.game.wow{min-height:440px}}
@media (max-width:560px){.games{grid-template-columns:1fr}.game.wow,.game.gta,.game.lol,.game.bf{grid-column:span 1}}

/* HORDE / WOW FOREVER */
.forever{background:linear-gradient(180deg,var(--void),#120304 10%,#120304 90%,var(--void))}
.forever-intro{padding-block:clamp(80px,11vw,140px) 0;position:relative;overflow:hidden}
.forever-intro h2{font-family:var(--f-lore);font-style:normal;text-transform:none;font-weight:700;font-size:clamp(38px,6vw,86px);line-height:1.02}
.forever-intro h2 em{font-style:normal;color:var(--blood)}
.warcry{font:700 14px/1 var(--f-lore);letter-spacing:.3em;text-transform:uppercase;color:var(--steel-dim);margin-top:22px}
.countdown{display:flex;gap:clamp(8px,2vw,22px);margin-top:36px;flex-wrap:wrap}
.cd{min-width:90px;padding:16px 14px 12px;border:1px solid #d3141c55;background:#070707b3;text-align:center;clip-path:polygon(10px 0,100% 0,100% calc(100% - 10px),calc(100% - 10px) 100%,0 100%,0 10px)}
.cd b{display:block;font:italic 900 clamp(42px,5.6vw,70px)/.9 var(--f-brand);font-stretch:80%;font-variant-numeric:tabular-nums}
.cd span{font:700 10px/1 var(--f-mono);letter-spacing:.2em;text-transform:uppercase;color:var(--steel-faint)}
.cd-note{margin-top:14px;font:500 13px/1.5 var(--f-mono);color:var(--steel-dim)}
.camp{position:relative;height:clamp(300px,42vw,520px);margin-top:10px;overflow:hidden}
.camp>*{position:absolute;left:-4%;width:108%;bottom:0;will-change:transform}
.camp .moon{left:58%;top:4%;width:clamp(110px,15vw,210px);aspect-ratio:1;border-radius:50%;background:radial-gradient(circle at 42% 38%,#ff8a6a,#d3141c 55%,#5a0509);box-shadow:0 0 140px 40px #d3141c40;bottom:auto}
.banner{transform-origin:top center;animation:sway 5s ease-in-out infinite}
.banner.b2{animation-duration:6.3s;animation-delay:-2s}.banner.b3{animation-duration:4.6s;animation-delay:-1s}
@keyframes sway{50%{transform:skewX(-4deg) scaleY(.98)}}
.flame{transform-box:fill-box;transform-origin:bottom center;animation:flick .35s ease-in-out infinite alternate}
@keyframes flick{to{transform:scaleY(1.25) scaleX(.85)}}

.hs{position:relative}
.hs-sticky{position:sticky;top:64px;height:calc(100vh - 64px);overflow:hidden;display:flex;align-items:center}
.hs-track{display:flex;gap:24px;padding-left:max(16px,calc((100vw - 1240px)/2 + 16px));padding-right:12vw;will-change:transform}
.chap{flex:0 0 min(540px,82vw);min-height:min(500px,70vh);border:1px solid var(--seam);background:var(--cracks),linear-gradient(180deg,#1a1012,#0d0d0e);background-size:600px,100%;background-blend-mode:normal;padding:36px;display:flex;flex-direction:column;position:relative;overflow:hidden}
.chap::before{content:"";position:absolute;left:0;top:0;width:100%;height:3px;background:linear-gradient(90deg,var(--blood),transparent)}
.chap .num{font:700 14px/1 var(--f-lore);color:var(--blood);letter-spacing:.24em}
.chap h3{font-family:var(--f-lore);font-style:normal;text-transform:none;font-weight:700;font-size:clamp(28px,2.8vw,40px);line-height:1.08;margin:18px 0 16px}
.chap p{color:var(--steel-dim);max-width:44ch}
.chap ul{margin:22px 0 0;padding:0;list-style:none;display:grid;gap:10px}
.chap li{display:flex;gap:12px;align-items:baseline;font-size:16px}
.chap li::before{content:"";flex:0 0 8px;height:8px;background:var(--blood);transform:rotate(45deg) translateY(-2px)}
.chap .glyph{position:absolute;right:-20px;bottom:-30px;width:230px;opacity:.08;pointer-events:none}
.tl{margin:20px 0 0;display:grid}
.tl div{display:grid;grid-template-columns:130px 1fr;gap:16px;padding:14px 0;border-top:1px solid var(--seam)}
.tl dt{font:700 12px/1.4 var(--f-mono);color:var(--ember);letter-spacing:.06em;text-transform:uppercase}
.tl dd{margin:0}
.tl .past{color:var(--steel-faint)}
.hs-progress{position:absolute;left:0;right:0;bottom:26px;height:2px;background:var(--seam);margin:0 max(16px,calc((100vw - 1240px)/2 + 16px))}
.hs-progress i{display:block;height:100%;width:0;background:var(--blood)}
@media (max-width:820px),(prefers-reduced-motion:reduce){
  .hs{height:auto!important}
  .hs-sticky{position:static;height:auto;display:block;padding-block:20px 60px}
  .hs-track{flex-direction:column;transform:none!important;padding-right:max(16px,env(safe-area-inset-right,0px));padding-left:max(16px,env(safe-area-inset-left,0px))}
  .chap{flex-basis:auto;min-height:0}
  .hs-progress{display:none}
}

/* ROSTER */
.filters{display:flex;gap:8px;flex-wrap:wrap}
.chip{font:700 12px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;padding:11px 14px;border:1px solid var(--seam);background:transparent;color:var(--steel-dim);cursor:pointer;transition:all .15s}
.chip:hover{color:var(--steel);border-color:var(--steel-faint)}
.chip[aria-pressed="true"]{background:var(--blood);color:#fff;border-color:var(--blood)}
.roster{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:12px}
.pl{position:relative;text-align:left;border:1px solid var(--seam);background:var(--coal);padding:20px;cursor:pointer;color:inherit;font:inherit;display:grid;grid-template-columns:52px 1fr;gap:14px;align-items:center;transition:transform .25s,border-color .25s}
.pl:hover{transform:translateY(-4px);border-color:var(--cc,var(--blood))}
.pl::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--cc,var(--blood))}
.av{width:52px;height:52px;display:grid;place-items:center;background:#000;border:1px solid var(--cc,var(--blood));clip-path:polygon(50% 0,100% 25%,100% 75%,50% 100%,0 75%,0 25%)}
.av svg{width:28px;height:28px;color:var(--cc,var(--blood))}
.pl b{display:block;font:italic 900 22px/1 var(--f-brand);font-stretch:90%;text-transform:uppercase}
.pl small{display:block;margin-top:5px;font:500 12px/1.3 var(--f-mono);color:var(--steel-dim)}
.pl .rk{grid-column:1/-1;display:flex;justify-content:space-between;gap:10px;font:500 11px/1 var(--f-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--steel-faint);padding-top:12px;border-top:1px solid var(--seam)}
.sample-note{margin-top:18px;font:500 12px/1.5 var(--f-mono);color:var(--steel-faint)}
.drawer{position:fixed;top:0;right:0;bottom:0;width:min(460px,100%);background:var(--char);border-left:1px solid var(--seam);z-index:80;transform:translateX(105%);transition:transform .45s cubic-bezier(.2,.8,.2,1);padding:calc(28px + env(safe-area-inset-top,0px)) max(28px,env(safe-area-inset-right,0px)) 28px 28px;overflow-y:auto}
.drawer.open{transform:none}
.scrim{position:fixed;inset:0;background:#000b;z-index:70;opacity:0;pointer-events:none;transition:opacity .3s}
.scrim.open{opacity:1;pointer-events:auto}
.drawer .x{position:absolute;top:calc(18px + env(safe-area-inset-top,0px));right:max(18px,env(safe-area-inset-right,0px));background:none;border:1px solid var(--seam);color:var(--steel);width:38px;height:38px;cursor:pointer;font-size:18px}
.drawer h3{font-size:46px;margin-top:18px;font-weight:900}
.drawer .cls{font:700 13px/1 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;margin-top:10px}
.stats{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--seam);border:1px solid var(--seam);margin:26px 0 0}
.stats div{background:var(--coal);padding:16px}
.stats dt{font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-faint)}
.stats dd{margin:8px 0 0;font:italic 900 28px/1 var(--f-brand);font-variant-numeric:tabular-nums}
.stats dd.pending{font:500 13px/1.35 var(--f-mono);font-style:normal;color:var(--ember)}
.bar{height:6px;background:var(--seam);margin-top:10px}.bar i{display:block;height:100%;background:var(--cc,var(--blood))}
.api{margin-top:22px;padding:16px;border:1px dashed var(--seam);font-size:14px;color:var(--steel-dim)}

/* COMMUNITY */
.comm{display:grid;grid-template-columns:1.4fr 1fr;gap:14px}
@media (max-width:900px){.comm{grid-template-columns:1fr}}
.news{display:grid;gap:12px}
.post{display:grid;grid-template-columns:160px 1fr;gap:20px;border:1px solid var(--seam);background:var(--coal);padding:18px;text-decoration:none;transition:border-color .25s}
.post:hover{border-color:var(--blood)}
.post .th{aspect-ratio:16/10;max-width:100%;position:relative;overflow:hidden;background:#140405}
.post .th svg{position:absolute;inset:0;width:100%;height:100%}
.post time{font:700 11px/1 var(--f-mono);color:var(--blood);letter-spacing:.14em;text-transform:uppercase}
.post h4{font:italic 900 23px/1.02 var(--f-brand);font-stretch:88%;text-transform:uppercase;margin:8px 0 6px}
.post p{font-size:15px;color:var(--steel-dim)}
@media (max-width:560px){.post{grid-template-columns:1fr}}
.side{display:grid;gap:12px;align-content:start}
.panel{border:1px solid var(--seam);background:var(--coal);padding:24px}
.panel h4{font:italic 900 22px/1 var(--f-brand);text-transform:uppercase;margin:0 0 16px}
.ev{display:grid;grid-template-columns:62px 1fr;gap:14px;padding:12px 0;border-top:1px solid var(--seam)}
.ev .day{font:italic 900 28px/.9 var(--f-brand);text-align:center}
.ev .day small{display:block;font:700 10px/1.5 var(--f-mono);font-style:normal;letter-spacing:.14em;color:var(--blood)}
.ev b{display:block;font-weight:600}
.ev span{font-size:14px;color:var(--steel-dim)}
.live{display:flex;align-items:center;gap:10px;font:700 12px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase}
.live i{width:9px;height:9px;border-radius:50%;background:var(--ember);animation:pulse 1.8s infinite}
@keyframes pulse{0%{box-shadow:0 0 0 0 #ff3d2e99}70%{box-shadow:0 0 0 10px transparent}}
.disc{background:linear-gradient(135deg,var(--wine),var(--coal));border-color:#5a0b0f}
.disc p{color:var(--steel-dim);font-size:15px;margin-bottom:18px}

footer{border-top:1px solid var(--seam);padding-block:50px 40px;background:var(--coal)}
.foot{display:flex;flex-wrap:wrap;gap:28px;justify-content:space-between;align-items:center}
.foot small{font:500 12px/1.6 var(--f-mono);color:var(--steel-faint);max-width:70ch}
.partners{display:flex;gap:24px;align-items:center;flex-wrap:wrap;font:italic 800 17px/1 var(--f-brand);text-transform:uppercase;color:var(--steel-dim)}
.partners span:first-child{font:700 11px/1 var(--f-mono);font-style:normal;letter-spacing:.2em;color:var(--steel-faint)}

.js .rv{transform:translateY(40px);opacity:.35;transition:transform 1s cubic-bezier(.2,.7,.2,1),opacity 1s}
.js .rv.in{transform:none;opacity:1}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}.js .rv{transform:none;opacity:1}}
/* photos */
.art.photo,.th.photo{background-size:cover;background-position:center}
.game.wow .art.photo{background-position:center 35%}
.forever-intro>.wrap{position:relative;z-index:1}
.forever-intro .camp{z-index:1}

/* WoW cinematic band (static) */
.forever-intro .vista{position:relative;width:min(100%,1600px);margin:clamp(30px,5vw,60px) auto 0;aspect-ratio:1983/793;max-width:100%;background-position:center;background-size:cover;background-repeat:no-repeat;-webkit-mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 85%,transparent 100%);mask-image:linear-gradient(180deg,transparent 0%,#000 10%,#000 85%,transparent 100%)}
.forever-intro .vista::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,#120304 0%,transparent 8%,transparent 92%,#120304 100%)}

.game .eyebrow,.game p,.game .meta{text-shadow:0 1px 10px #000,0 0 2px #000}

/* RECRUIT — shared (home teaser + /recrutement) */
.recruit{border-top:1px solid var(--seam);background:radial-gradient(ellipse 50% 60% at 15% 20%,#2a0405,transparent 70%),var(--void)}
.recruit-top{display:grid;grid-template-columns:1fr 1fr;gap:clamp(30px,6vw,80px);align-items:end;margin-bottom:40px}
@media (max-width:900px){.recruit-top{grid-template-columns:1fr}}
.code{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--seam);border:1px solid var(--seam)}
.code div{background:var(--coal);padding:16px 18px}
.code b{font:italic 900 26px/1 var(--f-brand);color:var(--blood)}
.code p{font-size:14px;color:var(--steel-dim);margin-top:6px}
@media (max-width:420px){.code{grid-template-columns:1fr}}

.rcards{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.rcards{grid-template-columns:repeat(2,minmax(0,1fr))}}
.rc{position:relative;display:flex;flex-direction:column;justify-content:flex-end;gap:6px;min-height:200px;padding:20px;border:1px solid var(--seam);background:var(--coal);overflow:hidden;text-decoration:none;color:var(--steel);cursor:pointer;text-align:left;font:inherit;isolation:isolate;transition:border-color .2s,transform .25s}
.rc .art{position:absolute;inset:0;z-index:-1;transition:transform .8s cubic-bezier(.2,.7,.2,1)}
.rc .art svg{position:absolute;inset:0;width:100%;height:100%}
.rc .art::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 20%,#070707f2 85%)}
.rc:hover{border-color:var(--blood);transform:translateY(-3px)}
.rc:hover .art{transform:scale(1.07)}
.rc[aria-pressed="true"]{border-color:var(--blood);box-shadow:inset 0 -4px 0 var(--blood)}
.rc .st{position:absolute;top:14px;left:14px;font:700 10px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;padding:6px 8px;border:1px solid var(--seam);background:#070707b3}
.rc .st.hot{background:var(--blood);border-color:var(--blood);color:#fff}
.rc b{font:italic 900 clamp(22px,2.4vw,30px)/.95 var(--f-brand);font-stretch:85%;text-transform:uppercase}
.rc small{font:500 12px/1.4 var(--f-mono);color:var(--steel-dim)}
.rc .go{font:700 11px/1 var(--f-mono);letter-spacing:.14em;text-transform:uppercase;color:var(--ember);margin-top:6px}
.rc[aria-pressed="true"] .go{color:var(--steel)}

/* /recrutement page */
.rhero{position:relative;overflow:hidden;padding-block:clamp(50px,8vw,100px) clamp(40px,6vw,70px);border-bottom:1px solid var(--seam);background:radial-gradient(ellipse 55% 80% at 85% 30%,#3a0608,transparent 70%),var(--void)}
.rhero h1{font-size:clamp(56px,10vw,140px);font-weight:900;font-stretch:78%;line-height:.84;margin-top:18px}
.rhero h1 span{display:block}
.rhero .lead{margin-top:24px;color:var(--steel)}
.rhero-grid{display:grid;grid-template-columns:1.2fr 1fr;gap:clamp(30px,5vw,70px);align-items:end}
@media (max-width:900px){.rhero-grid{grid-template-columns:1fr}}
.process{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1px;background:var(--seam);border:1px solid var(--seam);margin-top:clamp(36px,5vw,56px)}
.process div{background:var(--coal);padding:18px 20px}
.process b{display:block;font:700 11px/1 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--blood)}
.process strong{display:block;font:italic 900 22px/1.05 var(--f-brand);text-transform:uppercase;margin:10px 0 6px}
.process p{font-size:14px;color:var(--steel-dim)}
@media (max-width:820px){.process{grid-template-columns:1fr 1fr}}
@media (max-width:440px){.process{grid-template-columns:1fr}}
.pick-h{display:flex;justify-content:space-between;align-items:end;gap:16px;flex-wrap:wrap;margin-bottom:22px}
.pick-h h2{font-size:clamp(34px,4.6vw,60px)}

.formbox{position:relative;border:1px solid var(--seam);background:var(--coal);padding:clamp(20px,3.4vw,44px);margin-top:18px;scroll-margin-top:84px}
.formbox::before{content:"";position:absolute;left:-1px;right:-1px;top:-1px;height:3px;background:var(--gc,var(--blood))}
.fhead{display:flex;justify-content:space-between;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:26px}
.fhead h3{font-size:clamp(28px,3.4vw,44px);font-weight:900;font-stretch:85%}
.draft{font:500 12px/1.4 var(--f-mono);color:var(--steel-faint);display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.draft button{background:none;border:0;color:var(--steel-dim);text-decoration:underline;cursor:pointer;font:inherit;padding:0}
.steps{display:flex;gap:8px;margin-bottom:30px}
.steps span{flex:1;min-width:0;font:700 11px/1.3 var(--f-mono);letter-spacing:.12em;text-transform:uppercase;color:var(--steel-faint);padding-top:12px;border-top:3px solid var(--seam);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.steps span.on{color:var(--steel);border-top-color:var(--blood)}
.steps span.done{color:var(--steel-dim);border-top-color:#7a070c}
@media (max-width:560px){.steps span{font-size:0;letter-spacing:0}.steps span::before{content:attr(data-n);font-size:11px;letter-spacing:.1em}}
fieldset{border:0;padding:0;margin:0;display:grid;gap:26px;min-width:0}
fieldset legend{font:italic 900 22px/1 var(--f-brand);text-transform:uppercase;padding:0;margin-bottom:4px}
.fl{display:grid;gap:10px;min-width:0}
.fl>.lbl,label.fl{font:700 11px/1.3 var(--f-mono);letter-spacing:.16em;text-transform:uppercase;color:var(--steel-dim)}
label.fl{display:flex;flex-wrap:wrap;align-items:baseline;column-gap:8px;row-gap:10px;align-content:start}
label.fl>input,label.fl>select,label.fl>textarea{flex:1 0 100%}
.fl .hint{font:500 12px/1.4 var(--f-mono);letter-spacing:0;text-transform:none;color:var(--steel-faint)}
.fl .opt{font:500 11px/1 var(--f-mono);letter-spacing:.06em;text-transform:none;color:var(--steel-faint)}
.fl[data-bad] .lbl,label.fl[data-bad]{color:#ff8a80}
.fl[data-bad] input,.fl[data-bad] select,.fl[data-bad] textarea,.fl[data-bad] .chips,.fl[data-bad] .classes,.fl[data-bad] .races{outline:1px solid var(--blood);outline-offset:4px}
[hidden]{display:none!important}
input,select,textarea{font:400 16px/1.4 var(--f-body);color:var(--steel);background:var(--void);border:1px solid var(--seam);padding:13px 14px;width:100%;min-width:0;border-radius:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--blood)}
textarea{resize:vertical}
.count{font:500 11px/1 var(--f-mono);color:var(--steel-faint);justify-self:end;text-transform:none;letter-spacing:0}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:560px){.row2{grid-template-columns:1fr}}
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chips .chip{text-transform:none;letter-spacing:.02em;font:500 14px/1 var(--f-body)}
.chips .chip:disabled{opacity:.35;cursor:not-allowed}
.classes{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:8px}
.cl{display:grid;justify-items:center;gap:8px;padding:16px 8px 12px;border:1px solid var(--seam);background:var(--void);color:var(--steel-dim);cursor:pointer;font:600 13px/1.1 var(--f-body);text-align:center;transition:all .15s}
.cl svg{width:34px;height:34px;color:var(--cc)}
.cl:hover{border-color:var(--cc);color:var(--steel)}
.cl[aria-pressed="true"]{border-color:var(--cc);color:var(--steel);background:linear-gradient(180deg,color-mix(in srgb,var(--cc) 22%,transparent),var(--void));box-shadow:inset 0 -3px 0 var(--cc)}
.races{display:grid;grid-template-columns:repeat(auto-fill,minmax(130px,1fr));gap:8px}
.races .chip{padding:16px 12px;text-align:left;text-transform:none;font:italic 800 17px/1.1 var(--f-brand);letter-spacing:0}
.races .chip small{display:block;font:500 11px/1.3 var(--f-mono);font-style:normal;color:inherit;opacity:.7;margin-top:5px}
.check{display:flex;gap:12px;align-items:flex-start;font-size:15px;color:var(--steel);cursor:pointer}
.check input{width:20px;height:20px;flex:0 0 20px;accent-color:var(--blood);margin-top:2px}
.nav-steps{display:flex;justify-content:space-between;gap:12px;margin-top:32px;flex-wrap:wrap}
.err{padding:12px 14px;border:1px solid var(--blood);color:#ff8a80;font:500 14px/1.5 var(--f-mono);margin-top:20px}
.hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.review-note{font-size:15px;color:var(--steel-dim);max-width:62ch}
.done-panel{display:grid;gap:18px;justify-items:start;padding-block:10px}
.done-panel h3{font-size:clamp(34px,4.6vw,60px);font-weight:900;font-stretch:85%}
.done-panel p{color:var(--steel-dim);max-width:58ch}
.done-panel .row{display:flex;gap:12px;flex-wrap:wrap}

/* Discord embed preview */
.dprev{margin-top:22px;background:#313338;color:#dbdee1;padding:16px;font:400 15px/1.375 "gg sans","Noto Sans",var(--f-body);border-radius:6px;min-width:0}
.dprev .who{display:flex;gap:12px;align-items:center;margin-bottom:8px}
.dprev .who img{width:40px;height:40px;border-radius:50%;background:#000;object-fit:contain;padding:4px}
.dprev .who b{color:#fff;font-weight:600}
.dprev .who small{color:#949ba4;font-size:12px;margin-left:6px}
.dprev .bot{font:600 10px/1 var(--f-body);background:#5865f2;color:#fff;padding:3px 5px;border-radius:3px;margin-left:6px}
.dprev .msg{margin:0 0 6px 52px;color:#dbdee1}
.dprev .embed{border-left:4px solid var(--ec,#d3141c);background:#2b2d31;border-radius:4px;padding:12px 16px;max-width:560px;margin-left:52px}
.dprev .embed h5{margin:0 0 10px;color:#fff;font-size:16px}
.dprev .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px 14px}
.dprev .f{grid-column:1/-1;min-width:0}
.dprev .f.i{grid-column:auto}
.dprev .f b{display:block;color:#fff;font-size:13px;font-weight:600}
.dprev .f span{font-size:14px;white-space:pre-wrap;overflow-wrap:anywhere}
.dprev .ft{margin-top:10px;font-size:12px;color:#949ba4}
@media (max-width:560px){.dprev .embed,.dprev .msg{margin-left:0}.dprev .fields{grid-template-columns:1fr 1fr}}
.okmsg{padding:14px 16px;border:1px solid #3c8c5a;color:#7fd6a0;font:500 14px/1.5 var(--f-mono)}

.formbox .fbg{position:absolute;left:0;right:0;top:0;height:min(260px,40%);background:var(--gimg) center 30%/cover no-repeat;opacity:.3;-webkit-mask-image:linear-gradient(180deg,#000,transparent);mask-image:linear-gradient(180deg,#000,transparent);pointer-events:none;transition:background-image .3s}
.formbox>*:not(.fbg){position:relative}

/* ───────── MODERN LAYER (v3) ─────────
   Même identité (noir, rouge sang, acier) avec un rendu plus actuel :
   titres droits et nets, surfaces vitrées arrondies, menu flottant, beaucoup d'air.
   Ce fichier est chargé en dernier et prend le pas sur style.css / recruit.css. */
:root{
  --r:16px; --r-sm:10px;
  --glass:rgba(255,255,255,.035); --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.09); --line-2:rgba(255,255,255,.16);
  --void:#08080a; --coal:#0f0f12; --char:#141418;
}
body{background:radial-gradient(1200px 600px at 85% -10%,#3a060a55,transparent 60%),var(--void)}
body::before{opacity:.03}

/* Typo : droite, serrée, nette */
h1,h2,h3{font-style:normal;letter-spacing:-.015em;font-stretch:82%}
h2{font-size:clamp(40px,5.6vw,80px);font-weight:800;line-height:.95}
.metal,.redcrack{background:none;-webkit-background-clip:initial;background-clip:initial;color:var(--steel)}
.redcrack{color:var(--blood)}
.eyebrow{display:inline-flex;align-items:center;gap:8px;letter-spacing:.18em}
.eyebrow::before{content:"";width:18px;height:2px;background:var(--blood)}
.lead{font-size:18px;line-height:1.65}

/* Menu flottant */
.nav{top:calc(10px + env(safe-area-inset-top,0px));margin:10px auto 0;max-width:min(1240px,calc(100% - 24px));border:1px solid var(--line);border-radius:999px;background:rgba(12,12,15,.72);backdrop-filter:blur(16px) saturate(140%);-webkit-backdrop-filter:blur(16px) saturate(140%);box-shadow:0 10px 40px rgba(0,0,0,.45)}
.nav .wrap{height:58px;padding-left:max(18px,env(safe-area-inset-left,0px));padding-right:max(8px,env(safe-area-inset-right,0px))}
.nav ul a{font:600 13px/1 var(--f-body);letter-spacing:.02em;text-transform:none;padding:9px 12px;border-radius:999px;transition:background .2s,color .2s}
.nav ul{gap:4px}
.nav ul a:hover{background:var(--glass-2)}
.nav ul a.on{box-shadow:none;background:var(--glass-2);color:#fff}
.logo{font-stretch:110%;font-style:normal;letter-spacing:.06em;font-size:20px}

/* Boutons */
.btn{clip-path:none;border-radius:999px;font:700 14px/1 var(--f-body);letter-spacing:.01em;text-transform:none;padding:15px 24px;box-shadow:0 8px 24px rgba(211,20,28,.28)}
.btn:hover{transform:translateY(-1px);box-shadow:0 10px 30px rgba(255,61,46,.35)}
.btn.ghost{background:var(--glass);border-color:var(--line-2);box-shadow:none;backdrop-filter:blur(8px)}
.btn.ghost:hover{background:var(--glass-2);border-color:rgba(255,255,255,.3);color:#fff}
.nav .btn{padding:11px 18px;font-size:13px}

/* Hero */
.hero{border-bottom:0;background:none;padding-block:clamp(56px,8vw,110px) clamp(40px,6vw,80px)}
.hero-grid{grid-template-columns:1.05fr 1fr;gap:clamp(28px,5vw,72px)}
.pills{display:flex;flex-wrap:wrap;gap:8px}
.pill{font:600 12px/1 var(--f-body);padding:8px 12px;border-radius:999px;background:var(--glass);border:1px solid var(--line);color:var(--steel-dim)}
.pill-red{background:rgba(211,20,28,.14);border-color:rgba(211,20,28,.45);color:#ff8f86}
.hero h1{font-size:clamp(58px,8.4vw,128px);font-weight:900;font-stretch:78%;line-height:.88;margin-top:26px;letter-spacing:-.02em}
.hero h1 span{display:inline}
.h-red{color:var(--blood)} .h-white{color:#fff}
.hero .lead{margin-top:26px;color:var(--steel-dim)}
.hero-cta{margin-top:32px}
.hero-facts{display:flex;flex-wrap:wrap;gap:12px;margin:40px 0 0}
.hero-facts div{padding:14px 18px;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);min-width:120px}
.hero-facts dt{font:600 11px/1.3 var(--f-body);color:var(--steel-faint);text-transform:uppercase;letter-spacing:.1em}
.hero-facts dd{margin:6px 0 0;font:800 26px/1 var(--f-brand);font-stretch:85%;color:#fff;font-variant-numeric:tabular-nums}
.hero-mosaic{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.tile{position:relative;display:flex;align-items:flex-end;aspect-ratio:4/5;max-width:100%;border-radius:20px;overflow:hidden;background-size:cover;background-position:center;border:1px solid var(--line);text-decoration:none;color:#fff;box-shadow:0 20px 50px rgba(0,0,0,.5);transition:transform .5s cubic-bezier(.2,.7,.2,1),border-color .3s}
.tile::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,transparent 45%,rgba(0,0,0,.85))}
.tile span{position:relative;z-index:1;margin:14px;font:700 14px/1 var(--f-body);padding:9px 12px;border-radius:999px;background:rgba(10,10,12,.55);backdrop-filter:blur(8px);border:1px solid var(--line)}
.tile:hover{transform:translateY(-4px);border-color:rgba(211,20,28,.6)}
.t-lol,.t-gta{transform:translateY(28px)}
.t-lol:hover,.t-gta:hover{transform:translateY(24px)}
@media (max-width:900px){.hero-grid{grid-template-columns:1fr}.t-lol,.t-gta{transform:none}.tile{aspect-ratio:1/1}}

/* Sections & cartes */
.sec{padding-block:clamp(80px,10vw,130px)}
.games{gap:14px}
.game{border-radius:22px;border-color:var(--line);padding:30px}
.game .tag{border-radius:999px;font:600 11px/1 var(--f-body);letter-spacing:.06em;padding:8px 12px;background:rgba(10,10,12,.6);backdrop-filter:blur(8px);border-color:var(--line)}
.game .tag.hot{background:var(--blood);border-color:var(--blood)}
.game h3{font-weight:800;font-stretch:82%}
.game .meta{font:500 13px/1.4 var(--f-body);letter-spacing:0;text-transform:none}

/* WoW Forever */
.forever{background:linear-gradient(180deg,transparent,#110405 12%,#110405 88%,transparent)}
.forever-intro .vista{border-radius:24px;width:min(calc(100% - 32px),1240px);-webkit-mask-image:none;mask-image:none;border:1px solid var(--line);box-shadow:0 30px 80px rgba(0,0,0,.55)}
.forever-intro .vista::after{background:none}
.cd{clip-path:none;border-radius:var(--r);background:var(--glass);border:1px solid var(--line);backdrop-filter:blur(8px)}
.cd b{font-style:normal;font-weight:800}
.warcry{color:var(--blood)}
.chap{border-radius:22px;border-color:var(--line);background:linear-gradient(180deg,rgba(255,255,255,.05),rgba(255,255,255,.015));backdrop-filter:blur(10px)}
.chap::before{display:none}
.chap li::before{border-radius:2px}
.hs-progress{height:3px;border-radius:3px;overflow:hidden}

/* Roster */
.chip{border-radius:999px;font:600 13px/1 var(--f-body);letter-spacing:.01em;text-transform:none;padding:10px 16px;background:var(--glass);border-color:var(--line)}
.chip[aria-pressed="true"]{box-shadow:0 6px 18px rgba(211,20,28,.3)}
.pl{border-radius:var(--r);background:var(--glass);border-color:var(--line)}
.pl::before{top:14px;bottom:14px;border-radius:3px}
.pl b{font-style:normal;font-weight:800}
.av{border-radius:14px;clip-path:none}
.drawer{border-radius:24px 0 0 24px;background:rgba(18,18,22,.92);backdrop-filter:blur(20px)}
.stats{border-radius:var(--r);overflow:hidden}

/* Communauté */
.post,.panel{border-radius:20px;background:var(--glass);border-color:var(--line)}
.post .th{border-radius:12px}
.post h4,.panel h4{font-style:normal;font-weight:800}
.ev .day{font-style:normal}
.disc{background:linear-gradient(135deg,rgba(211,20,28,.22),rgba(255,255,255,.02))}

/* Recrutement */
.code{gap:10px;background:none;border:0}
.code div{border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.code b{font-style:normal;font-weight:800}
.rc{border-radius:20px;border-color:var(--line)}
.rc .st{border-radius:999px;font:600 11px/1 var(--f-body);letter-spacing:.04em;padding:7px 11px;backdrop-filter:blur(8px)}
.rc b{font-style:normal;font-weight:800}
.rc .go{font:700 13px/1 var(--f-body);letter-spacing:0;text-transform:none}
.rc[aria-pressed="true"]{box-shadow:0 0 0 2px var(--blood),0 18px 40px rgba(211,20,28,.25)}
.rhero{border-bottom:0;background:none}
.rhero h1{font-weight:900;font-stretch:78%}
.process{gap:10px;background:none;border:0}
.process div{border-radius:var(--r);background:var(--glass);border:1px solid var(--line)}
.process strong{font-style:normal;font-weight:800}
.formbox{border-radius:24px;border-color:var(--line);background:linear-gradient(180deg,rgba(255,255,255,.04),rgba(255,255,255,.015));overflow:hidden}
.formbox::before{height:3px;border-radius:0}
.fhead h3{font-weight:800}
.steps span{border-top-width:3px;border-radius:2px}
fieldset legend{font-style:normal;font-weight:800}
input,select,textarea{border-radius:12px;background:rgba(0,0,0,.35);border-color:var(--line);transition:border-color .15s,box-shadow .15s}
input:focus,select:focus,textarea:focus{border-color:var(--blood);box-shadow:0 0 0 4px rgba(211,20,28,.18)}
.cl{border-radius:14px;background:rgba(0,0,0,.3);border-color:var(--line)}
.races .chip{border-radius:14px;font-style:normal;font-weight:700}
.err{border-radius:12px;background:rgba(211,20,28,.1)}
.okmsg{border-radius:12px}
.dprev{border-radius:14px}

/* Footer */
footer{background:transparent;border-top:1px solid var(--line)}
.partners{font-style:normal}

/* ───────── v5 : fond noir pur + police Impact partout ───────── */
:root{
  --void:#000; --coal:#000; --char:#000; --seam:#1e1e22;
  --glass:transparent; --glass-2:rgba(255,255,255,.06);
  --line:rgba(255,255,255,.1); --line-2:rgba(255,255,255,.18);
  --f-impact:Impact,"Anton",Haettenschweiler,"Arial Narrow Bold","Arial Narrow",sans-serif;
  --f-brand:var(--f-impact); --f-body:var(--f-impact); --f-mono:var(--f-impact); --f-lore:var(--f-impact);
}
body{background:#000}
body::before{display:none}
.forever,.hero,.rhero,.recruit,footer{background:#000}
body,body *{font-family:var(--f-impact)!important;font-weight:400!important;font-style:normal!important;font-stretch:100%!important}
body{letter-spacing:.02em}
p,li,dd,.lead,input,select,textarea,.post p,.panel p,.chap p,.review-note,.done-panel p,.api{letter-spacing:.03em;line-height:1.5}
h1,h2,h3,h4,h5,legend{text-transform:uppercase;letter-spacing:.01em;line-height:.95}
h2{font-size:clamp(40px,5.4vw,78px)}
.hero h1{font-size:clamp(60px,8.6vw,130px);line-height:.9}
.rhero h1{font-size:clamp(56px,8vw,120px);line-height:.9}
.rhero h1 span{display:inline}
.game h3{font-size:clamp(30px,3vw,44px)}
.game.wow h3{font-size:clamp(46px,5.6vw,80px)}
.rc b{font-size:clamp(22px,2.2vw,28px);text-transform:uppercase}
.pl b{font-size:22px;text-transform:uppercase}
.post h4{font-size:24px}
.fhead h3{font-size:clamp(30px,3.4vw,46px)}
.drawer h3{font-size:46px}
.cd b{font-size:clamp(46px,6vw,72px)}
.hero-facts dd{font-size:30px}
.code b{font-size:28px}
.process strong{font-size:22px}
.logo{font-size:22px;letter-spacing:.06em}
.eyebrow,.tag,.st,.pill,.hero-facts dt,.stats dt,.steps span,.fl>.lbl,label.fl,.count,.draft,.cd span,.chap .num,.tl dt,.post time,.ev .day small,.live,.sample-note,.rc .go,.game .meta{letter-spacing:.08em}
.nav ul a,.btn,.chip,.cl,.races .chip{letter-spacing:.04em;text-transform:uppercase}
.btn{font-size:16px}
.dprev,.dprev *{font-family:"gg sans","Noto Sans","Segoe UI",Arial,sans-serif!important;letter-spacing:0!important}
.dprev b,.dprev h5{font-weight:600!important}
/* surfaces : noir + simple filet, plus de gris */
.game,.rc,.post,.panel,.pl,.chap,.formbox,.code div,.process div,.hero-facts div,.cd,.tile,.chap,.formbox,.drawer,.stats div{background-color:#000}
.chap,.formbox{background:#000}
.disc{background:linear-gradient(135deg,rgba(211,20,28,.25),#000 70%)}
.nav{background:rgba(0,0,0,.85)}
.drawer{border-left:1px solid var(--line)}
input,select,textarea,.cl{background:#000}
.btn.ghost,.chip,.pill{background:transparent}
.stats{background:var(--line)}

/* Logo complet en haut, plus grand, qui déborde du menu */
.nav{overflow:visible}
.nav .wrap{height:68px}
.logo-top{position:relative;align-self:flex-start;align-items:flex-start;height:100%}
.logo-top img{display:block;width:auto;height:108px;margin-top:6px;filter:drop-shadow(0 10px 24px rgba(0,0,0,.85)) drop-shadow(0 0 22px rgba(211,20,28,.28));transition:transform .3s}
.logo-top:hover img{transform:scale(1.04)}
@media (max-width:900px){.logo-top img{height:84px;margin-top:4px}}
@media (max-width:480px){.logo-top img{height:76px;margin-top:4px}}

/* Menu : plus de cadre global, le logo est posé seul ; seuls les liens ont leur pastille */
.nav{background:transparent;border:0;box-shadow:none;backdrop-filter:none;-webkit-backdrop-filter:none;pointer-events:none}
.nav .wrap>*{pointer-events:auto}
.nav ul{background:rgba(0,0,0,.78);border:1px solid var(--line);border-radius:999px;padding:6px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:0 10px 30px rgba(0,0,0,.5)}
.nav .btn{margin-left:10px}

/* Menu pleine largeur, bande noire en dégradé (aucun contour), logo qui rétrécit au défilement */
.nav{position:sticky;top:0;margin:0;max-width:none;width:100%;border-radius:0;padding-top:env(safe-area-inset-top,0px);background:linear-gradient(180deg,#000 0%,#000 55%,rgba(0,0,0,0) 100%)}
.nav .wrap{max-width:1240px;margin:0 auto;height:76px;padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px))}
.logo-top img{transition:height .3s ease,margin .3s ease,transform .3s}
.nav.scrolled{background:linear-gradient(180deg,#000 0%,#000 80%,rgba(0,0,0,0) 100%)}
.nav.scrolled .logo-top img{height:62px;margin-top:7px}
@media (max-width:900px){.nav .btn{margin-left:auto}.nav.scrolled .logo-top img{height:56px}}

/* ───────── Titres travaillés : Impact + reflets + contour + ombre ───────── */
:root{
  --steel-grad:linear-gradient(180deg,#ffffff 0%,#f4f4f6 30%,#c9cacf 46%,#7d7e84 50%,#d9dade 58%,#f7f7f8 78%,#a9aab0 100%);
  --red-grad:linear-gradient(180deg,#ff8a7d 0%,#ff3326 28%,#d3141c 46%,#8e070d 50%,#e3151d 60%,#ff4a3a 80%,#9c0a10 100%);
}
h1,h2,.game h3,.fhead h3,.done-panel h3,.drawer h3,.rc b,.cd b,.hero-facts dd{
  word-spacing:.14em;letter-spacing:.02em;
  background-image:var(--steel-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,255,255,.14);
  filter:drop-shadow(0 2px 0 rgba(0,0,0,.95)) drop-shadow(0 10px 22px rgba(0,0,0,.85));
}
h1 .h-red,h1 .redcrack,h2 .redcrack,h2 em,.game h3 .redcrack,.h-red,.redcrack{
  background-image:var(--red-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(255,140,120,.22);
  filter:drop-shadow(0 2px 0 #2a0000) drop-shadow(0 10px 26px rgba(211,20,28,.45));
}
h1 .h-white,h1 .metal,h2 .metal,.game h3 .metal{background-image:var(--steel-grad);-webkit-background-clip:text;background-clip:text;-webkit-text-fill-color:transparent;color:transparent}
/* les spans portent leur propre dégradé : on évite le double filtre sur le parent */
h1:has(span),h2:has(span),.game h3:has(span){filter:drop-shadow(0 10px 22px rgba(0,0,0,.85))}
h1 span,h2 span,h2 em,.game h3 span{filter:drop-shadow(0 2px 0 rgba(0,0,0,.95))}
h1 .h-red,h1 .redcrack,h2 .redcrack,h2 em,.game h3 .redcrack{filter:drop-shadow(0 2px 0 #2a0000) drop-shadow(0 8px 20px rgba(211,20,28,.4))}
.hero h1,.rhero h1{letter-spacing:.03em}
.rhero h1 span,.hero h1 span{display:inline-block;padding-bottom:.04em}
.cd b{-webkit-text-stroke:0}

/* ───────── v6 : plus métallique, moins de lueur ───────── */
:root{
  /* acier brossé : reflets nets et contrastés, ligne d'horizon marquée */
  --steel-grad:linear-gradient(180deg,#ffffff 0%,#e9eaee 18%,#b8bac1 36%,#ffffff 47%,#55575e 50%,#8c8e95 58%,#d7d8dd 74%,#f6f6f8 86%,#7a7c83 100%);
  /* rouge anodisé : même découpe de reflet, sans halo */
  --red-grad:linear-gradient(180deg,#ff9c90 0%,#f0362b 18%,#b80f17 36%,#ff6a5c 47%,#5e0408 50%,#9c0a11 58%,#d8141c 74%,#ff5143 86%,#6e050a 100%);
}
h1,h2,.game h3,.fhead h3,.done-panel h3,.drawer h3,.rc b,.cd b,.hero-facts dd{
  -webkit-text-stroke:1px rgba(0,0,0,.55);
  filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 0 #000) drop-shadow(0 5px 6px rgba(0,0,0,.9));
}
h1 .h-red,h1 .redcrack,h2 .redcrack,h2 em,.game h3 .redcrack,.h-red,.redcrack{
  -webkit-text-stroke:1px rgba(40,0,0,.7);
  filter:drop-shadow(0 1px 0 rgba(255,180,170,.25)) drop-shadow(0 2px 0 #1a0000) drop-shadow(0 5px 6px rgba(0,0,0,.9));
}
h1:has(span),h2:has(span),.game h3:has(span){filter:none}
h1 span,h2 span,.game h3 span{filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 0 #000) drop-shadow(0 5px 6px rgba(0,0,0,.9))}
h1 .h-red,h1 .redcrack,h2 .redcrack,h2 em,.game h3 .redcrack{filter:drop-shadow(0 1px 0 rgba(255,180,170,.25)) drop-shadow(0 2px 0 #1a0000) drop-shadow(0 5px 6px rgba(0,0,0,.9))}
.cd b{-webkit-text-stroke:0}

/* ───────── v7 : typographie uniformisée ─────────
   5 tailles seulement, 3 couleurs de texte.
   Titres = acier ; rouge réservé au mot-marque des deux grands titres, aux boutons et aux repères. */
:root{
  --t1:#ececec;   /* texte fort */
  --t2:#a9a9ad;   /* texte courant */
  --t3:#707075;   /* libellés */
  --fs-display:clamp(56px,7.6vw,112px);
  --fs-h2:clamp(38px,4.8vw,64px);
  --fs-h3:clamp(24px,2.2vw,30px);
  --fs-body:17px;
  --fs-label:13px;
}
/* Titres */
.hero h1,.rhero h1{font-size:var(--fs-display);line-height:.92}
h2,.forever-intro h2,.pick-h h2,.done-panel h3{font-size:var(--fs-h2);line-height:.98}
h3,.game h3,.game.wow h3,.fhead h3,.drawer h3,.rc b,.pl b,.post h4,.panel h4,fieldset legend,.chap h3,.process strong,.code b,.hero-facts dd{font-size:var(--fs-h3);line-height:1.05;text-transform:uppercase}
.game.wow h3{font-size:clamp(32px,3.4vw,44px)}
.cd b{font-size:clamp(40px,5vw,60px)}
/* tous les titres secondaires en acier, plus de rouge dans les h2/h3 */
h2 .redcrack,h2 em,.game h3 .redcrack,.forever-intro h2 em,.code b,.process strong,.post h4,.panel h4,.pl b,.chap h3,fieldset legend,.hero-facts dd{
  background-image:var(--steel-grad);-webkit-background-clip:text;background-clip:text;color:transparent;-webkit-text-fill-color:transparent;
  -webkit-text-stroke:1px rgba(0,0,0,.55);filter:drop-shadow(0 1px 0 rgba(255,255,255,.18)) drop-shadow(0 2px 0 #000)}
/* Texte courant : une taille, une couleur */
p,.lead,li,dd,.game p,.post p,.panel p,.chap p,.chap li,.ev span,.code p,.process p,.review-note,.done-panel p,.api,.disc p,.tl dd,.check,.foot small{font-size:var(--fs-body);color:var(--t2);line-height:1.55}
.ev b{font-size:var(--fs-body);color:var(--t1)}
/* Libellés : une taille, une couleur */
.eyebrow,.tag,.st,.pill,.hero-facts dt,.stats dt,.steps span,.fl>.lbl,label.fl,.count,.draft,.cd span,.chap .num,.tl dt,.post time,.ev .day small,.live,.sample-note,.game .meta,.game .meta b,.rc small,.pl small,.pl .rk,.cls,.fl .hint,.fl .opt,.cd-note,.warcry,.partners span:first-child{font-size:var(--fs-label);color:var(--t3);letter-spacing:.08em;text-transform:uppercase}
.eyebrow::before{background:var(--blood)}
.pill-red,.tag.hot,.st.hot{color:#fff}
.tl dt,.chap .num,.warcry,.post time,.ev .day small{color:var(--t3)}
.fl[data-bad] .lbl,label.fl[data-bad]{color:#ff8a80}
/* Menu, boutons, puces : même taille */
.nav ul a,.btn,.chip,.cl,.races .chip,.rc .go,.tile span{font-size:14px;letter-spacing:.06em}
.nav ul a{color:var(--t2)} .nav ul a:hover,.nav ul a.on{color:var(--t1)}
.rc .go{color:var(--t1)}
.races .chip small{font-size:12px;color:var(--t3)}
.ev .day{font-size:var(--fs-h3);color:var(--t1)}
.av{font-size:var(--fs-h3)}
input,select,textarea{font-size:var(--fs-body);color:var(--t1)}

/* ───────── v8 : textes en blanc, logo plus grand ───────── */
:root{--t1:#ffffff;--t2:#f2f2f2;--t3:#ffffff;--steel-dim:#f2f2f2;--steel-faint:#ffffff}
.nav ul a{color:#fff}
.tl .past{color:#fff;opacity:.7}
.logo-top img{height:146px;margin-top:6px}
.nav.scrolled .logo-top img{height:78px;margin-top:6px}
@media (max-width:900px){.logo-top img{height:108px;margin-top:4px}.nav.scrolled .logo-top img{height:64px}}
@media (max-width:480px){.logo-top img{height:96px;margin-top:4px}.nav.scrolled .logo-top img{height:60px}}
.hero{padding-top:clamp(84px,9vw,130px)}
.rhero{padding-top:clamp(84px,9vw,130px)}

/* Logo sans lueur */
.logo-top img,.logo img{filter:none!important}

/* ───────── Page recrutement : haut épuré ───────── */
.rhero2{position:relative;overflow:hidden;padding-block:clamp(150px,14vw,200px) clamp(56px,7vw,90px);text-align:center;background:#000}
.rbg{position:absolute;inset:0;display:grid;grid-template-columns:repeat(4,1fr);opacity:.42;-webkit-mask-image:linear-gradient(180deg,rgba(0,0,0,.2) 0%,#000 30%,#000 55%,transparent 100%);mask-image:linear-gradient(180deg,rgba(0,0,0,.2) 0%,#000 30%,#000 55%,transparent 100%)}
.rbg span{background-size:cover;background-position:center;filter:saturate(.9)}
.rbg::after{content:"";position:absolute;inset:0;background:radial-gradient(ellipse 60% 70% at 50% 55%,rgba(0,0,0,.75),rgba(0,0,0,.25) 70%,rgba(0,0,0,.6))}
.rhero-inner{position:relative;z-index:1;display:flex;flex-direction:column;align-items:center}
.rhero2 .eyebrow{justify-content:center}
.rhero2 h1{margin-top:20px}
.rhero2 .lead{margin:22px auto 0;max-width:56ch;text-align:center}
.rhero2 .btn{margin-top:30px}
.charter{list-style:none;margin:48px 0 0;padding:0;display:flex;flex-wrap:wrap;justify-content:center;border-top:1px solid var(--line);border-bottom:1px solid var(--line)}
.charter li{display:flex;flex-direction:column;align-items:center;gap:6px;padding:18px 34px}
.charter li+li{border-left:1px solid var(--line)}
.charter b{font-size:var(--fs-h3);color:#fff;letter-spacing:.04em;background:none;-webkit-text-fill-color:#fff;-webkit-text-stroke:0;filter:none}
.charter span{font-size:var(--fs-label);color:#fff;letter-spacing:.08em;text-transform:uppercase;opacity:.85}
@media (max-width:700px){.charter li{padding:14px 18px;flex:1 1 45%}.charter li+li{border-left:0}}
.steps-band{background:#000;padding-block:10px 0}
.flow{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:24px;position:relative;counter-reset:none}
.flow::before{content:"";position:absolute;left:22px;right:22px;top:22px;height:2px;background:linear-gradient(90deg,var(--blood),rgba(211,20,28,.25))}
.flow li{position:relative;display:flex;flex-direction:column;gap:8px}
.flow i{position:relative;z-index:1;display:grid;place-items:center;width:46px;height:46px;border-radius:50%;background:#000;border:2px solid var(--blood);font-style:normal;font-size:20px;color:#fff}
.flow b{margin-top:8px;font-size:var(--fs-h3);text-transform:uppercase;color:#fff;letter-spacing:.03em;background:none;-webkit-text-fill-color:#fff;-webkit-text-stroke:0;filter:none}
.flow span{font-size:var(--fs-body);color:#f2f2f2;line-height:1.5}
@media (max-width:820px){.flow{grid-template-columns:1fr 1fr;row-gap:30px}.flow::before{display:none}}
@media (max-width:440px){.flow{grid-template-columns:1fr}}
/* petits titres de cadres : blanc net, sans effet métal */
.code b,.process strong{background:none;-webkit-text-fill-color:#fff;color:#fff;-webkit-text-stroke:0;filter:none}

/* titres portant la classe .metal : réapplique l acier (le reset .metal les rendait invisibles) */
h1.metal,h2.metal,h3.metal{background-image:var(--steel-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent;color:transparent}

/* numéros de chapitres WoW plus grands */
.chap .num{font-size:22px!important;letter-spacing:.06em!important;color:var(--blood)!important}

/* ───────── v9 : palette strictement issue du logo ─────────
   Rouge logo (mesuré) : #cf0304 · clair #f91016 · sombre #ae0102 · ombre #5a0001
   Acier logo (mesuré) : #fbfbfb · #b4b4b6 · #646468
   Noir : #000. Aucune autre couleur dans l'interface. */
:root{
  --blood:#cf0304; --ember:#f91016; --wine:#ae0102; --red-deep:#5a0001;
  --steel-hi:#fbfbfb; --steel-mid:#b4b4b6; --steel-lo:#646468;
  --steel-grad:linear-gradient(180deg,#fbfbfb 0%,#e6e6e8 18%,#b4b4b6 36%,#fbfbfb 47%,#4a4a4e 50%,#646468 58%,#b4b4b6 74%,#ececee 86%,#646468 100%);
  --red-grad:linear-gradient(180deg,#ff3a3a 0%,#f91016 18%,#cf0304 36%,#ff2a2a 47%,#5a0001 50%,#ae0102 58%,#cf0304 74%,#f91016 86%,#5a0001 100%);
  --line:rgba(180,180,182,.18); --line-2:rgba(180,180,182,.3);
}
/* boutons et accents : rouge logo */
.btn{background:var(--blood);border-color:var(--blood);box-shadow:0 8px 22px rgba(207,3,4,.3)}
.btn:hover{background:var(--ember);border-color:var(--ember);box-shadow:0 10px 26px rgba(249,16,22,.32)}
.btn.ghost{border-color:var(--line-2);box-shadow:none}
.btn.ghost:hover{border-color:var(--steel-mid);background:rgba(180,180,182,.08)}
.pill-red{background:rgba(207,3,4,.16);border-color:rgba(207,3,4,.6);color:#fff}
.tag.hot,.st.hot,.chip[aria-pressed="true"]{background:var(--blood);border-color:var(--blood);color:#fff}
.chip[aria-pressed="true"]{box-shadow:0 6px 16px rgba(207,3,4,.3)}
.live i{background:var(--ember);animation:none;box-shadow:0 0 0 3px rgba(207,3,4,.25)}
.hs-progress i,.steps span.on{background:none}
.hs-progress i{background:var(--blood)}
.steps span.on{border-top-color:var(--blood)} .steps span.done{border-top-color:var(--wine)}
.flow i{border-color:var(--blood)} .flow::before{background:linear-gradient(90deg,var(--blood),rgba(207,3,4,.2))}
.eyebrow::before,.chap li::before{background:var(--blood)}
.rc[aria-pressed="true"]{box-shadow:0 0 0 2px var(--blood),0 18px 40px rgba(207,3,4,.22)}
.rc:hover,.game:hover,.post:hover,.tile:hover{border-color:rgba(207,3,4,.7)}
input:focus,select:focus,textarea:focus{border-color:var(--blood);box-shadow:0 0 0 4px rgba(207,3,4,.18)}
.check input{accent-color:var(--blood)}
.disc{background:linear-gradient(135deg,rgba(207,3,4,.24),#000 70%);border-color:rgba(207,3,4,.35)}
/* icônes de classes / postes / roster : acier, rouge quand sélectionné (plus de couleurs de classes) */
.cl,.pl,.drawer{--cc:var(--blood)!important}
.cl svg,.av svg{color:var(--steel-mid)!important}
.cl:hover svg{color:var(--steel-hi)!important}
.cl[aria-pressed="true"]{background:linear-gradient(180deg,rgba(207,3,4,.2),#000)!important;box-shadow:inset 0 -3px 0 var(--blood)!important;border-color:var(--blood)!important}
.cl[aria-pressed="true"] svg{color:#fff!important}
.av{border-color:var(--line-2)!important;background:#000}
.drawer .cls{color:var(--blood)!important}
.formbox{--gc:var(--blood)!important}
/* messages */
.err{border-color:var(--blood);color:#fff;background:rgba(207,3,4,.14)}
.okmsg{border-color:var(--steel-mid);color:#fff;background:rgba(180,180,182,.08)}
.fl[data-bad] .lbl,label.fl[data-bad]{color:var(--ember)!important}
.fl[data-bad] input,.fl[data-bad] select,.fl[data-bad] textarea,.fl[data-bad] .chips,.fl[data-bad] .classes,.fl[data-bad] .races{outline-color:var(--blood)}
:focus-visible{outline-color:var(--ember)}

/* ───────── v10 : métal NET (aucun flou) ─────────
   Dégradés à arêtes franches (ligne d'horizon nette au milieu), pas de filtre, pas de contour semi-transparent. */
:root{
  --steel-grad:linear-gradient(180deg,#ffffff 0%,#ffffff 22%,#e2e2e4 40%,#b4b4b6 49%,#646468 49.5%,#7c7c80 62%,#b4b4b6 80%,#e8e8ea 100%);
  --red-grad:linear-gradient(180deg,#ff5050 0%,#f91016 24%,#e00609 40%,#cf0304 49%,#6e0102 49.5%,#ae0102 66%,#cf0304 84%,#f0181c 100%);
}
h1,h2,h3,h1 *,h2 *,h3 *,.game h3,.fhead h3,.done-panel h3,.drawer h3,.rc b,.cd b,.hero-facts dd,
h1 .h-red,h1 .redcrack,h2 .redcrack,h2 em,.game h3 .redcrack,.h-red,.redcrack,h1 .h-white,h1 .metal,h2 .metal,
h1:has(span),h2:has(span),.game h3:has(span),.code b,.process strong,.post h4,.panel h4,.pl b,.chap h3,fieldset legend{
  filter:none!important;-webkit-text-stroke:0!important;text-shadow:none!important;
  -webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:geometricPrecision}
h1.metal,h2.metal,h3.metal,h1 .metal,h2 .metal,h1 .h-white{background-image:var(--steel-grad)!important}
h1 .h-red,h1 .redcrack,.h-red,.redcrack{background-image:var(--red-grad)!important;-webkit-background-clip:text!important;background-clip:text!important;-webkit-text-fill-color:transparent!important}
/* les blocs posés sur photo gardent une ombre portée nette (sans flou) via le conteneur */
.game h3,.rc b{filter:drop-shadow(0 2px 0 #000)!important}

/* chaque ligne d un titre a son propre reflet */
h1 span,h2 span,h3 span,.game h3 span{display:inline!important;-webkit-box-decoration-break:clone;box-decoration-break:clone}
h1,h2,h3{-webkit-box-decoration-break:clone;box-decoration-break:clone}

/* sur-titres (Candidature · section…, Recrutement · Joueurs…) plus grands */
.eyebrow{font-size:clamp(15px,1.5vw,19px)!important;letter-spacing:.07em!important;gap:12px}
.eyebrow::before{width:28px;height:3px}

/* ───────── Classement WoW ───────── */
.lhero{padding-block:clamp(150px,13vw,190px) clamp(40px,5vw,70px)}
.rbg1{grid-template-columns:1fr;opacity:.5}
.ladder-sec{padding-top:clamp(30px,4vw,50px)}
.ladder-bar{display:flex;justify-content:space-between;align-items:center;gap:16px;flex-wrap:wrap;margin-bottom:18px}
.ladder-meta{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;color:#fff;opacity:.85}
.ladder-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:20px}
.ladder{width:100%;border-collapse:collapse;min-width:760px}
.ladder th{font-size:var(--fs-label);letter-spacing:.08em;text-transform:uppercase;text-align:left;padding:16px 18px;border-bottom:1px solid var(--line);color:#fff;white-space:nowrap}
.ladder td{padding:14px 18px;border-bottom:1px solid var(--line);color:#fff;font-size:var(--fs-body);vertical-align:middle}
.ladder tbody tr:last-child td{border-bottom:0}
.ladder tbody tr:hover td{background:rgba(207,3,4,.06)}
.ladder .n{text-align:right;font-variant-numeric:tabular-nums}
.ladder .pos{width:56px;font-size:var(--fs-h3);color:#fff}
.ladder .top .pos{color:var(--blood)}
.ladder .top .pos{box-shadow:inset 3px 0 0 var(--blood)}
.ladder .who b{display:block;font-size:20px;text-transform:uppercase;letter-spacing:.03em}
.ladder .who small{display:block;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase;opacity:.8}
.ladder .cls{display:inline-flex;align-items:center;gap:10px;white-space:nowrap}
.ladder .lic{width:24px;height:24px;color:var(--steel-mid)}
.ladder .rk{white-space:nowrap}
.ladder-empty{border:1px solid var(--line);border-radius:20px;padding:clamp(28px,5vw,56px);display:grid;gap:16px;justify-items:start}
.ladder-empty h3{font-size:var(--fs-h3)}
.ladder-empty p{max-width:60ch}
.admin{margin-top:clamp(60px,8vw,100px);display:grid;gap:22px}
.admin-head{display:grid;gap:10px}
.admin-login,.admin-add{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end}
.admin-login .fl,.admin-add .fl{flex:1 1 200px}
.admin-actions{display:flex;flex-wrap:wrap;gap:12px}
.admin-table{min-width:980px}
.admin-table input,.admin-table select{padding:9px 10px;font-size:15px;min-width:70px}
.admin-table .api{font-size:var(--fs-label);max-width:180px}
.admin-table .acts{display:flex;gap:6px;white-space:nowrap}
.admin-table .acts .chip{padding:8px 12px;font-size:12px}

/* classement communautaire */
.community{display:grid;grid-template-columns:1fr 1fr;gap:16px;margin-top:clamp(40px,6vw,70px);scroll-margin-top:100px}
@media (max-width:900px){.community{grid-template-columns:1fr}}
.cbox{border:1px solid var(--line);border-radius:20px;padding:clamp(20px,3vw,32px);display:grid;gap:18px;align-content:start;background:#000}
.cbox h3{font-size:var(--fs-h3)}
.cbox>p{max-width:56ch}
.cbox .btn{justify-self:start}
.cmsg{padding:12px 14px;border-radius:12px}
.admin-table{min-width:1180px}
.admin-table tr.pending td{background:rgba(207,3,4,.08)}
.admin-table .st{white-space:nowrap;font-size:var(--fs-label);letter-spacing:.06em;text-transform:uppercase}
.lhero .btn{margin-top:26px}
.admin-table select{min-width:120px}

/* emblèmes de classe (WoW, BF6) */
.classes:has(.emb){grid-template-columns:repeat(auto-fill,minmax(112px,1fr))}
.cl svg.emb{width:62px;height:62px;--emb-frame:url(#og-steel);transition:transform .15s}
.cl:hover svg.emb{transform:translateY(-2px)}
.cl[aria-pressed="true"] svg.emb{--emb-frame:url(#og-red)}
.cl:has(.emb){padding:14px 8px 12px}

/* classement : teaser avant le 5 novembre */
.lhero .countdown{margin-top:30px;justify-content:center}
.tease-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}
@media (max-width:1000px){.tease-grid{grid-template-columns:1fr 1fr}}
@media (max-width:560px){.tease-grid{grid-template-columns:1fr}}
.tease{border:1px solid var(--line);border-top:2px solid var(--blood);border-radius:16px;padding:22px;background:#000;display:grid;gap:10px;align-content:start}
.tease b{font-family:var(--f-impact);font-weight:400;font-size:22px;letter-spacing:.03em;text-transform:uppercase;color:#fff}
.tease p{color:#fff;margin:0}
.tease-table{position:relative;margin-top:clamp(36px,5vw,56px)}
.tease-table .ladder{pointer-events:none}
.tease-table td:first-child{color:var(--blood);font-family:var(--f-impact);font-size:22px}
.sk{display:inline-block;height:12px;border-radius:6px;background:linear-gradient(90deg,#1a0000,#3a0001 50%,#1a0000);vertical-align:middle}
.tease-over{position:absolute;inset:44px 0 0;display:grid;place-items:center;background:linear-gradient(180deg,rgba(0,0,0,.2),rgba(0,0,0,.75))}
.tease-over span{font-family:var(--f-impact);font-size:clamp(26px,4vw,44px);text-transform:uppercase;letter-spacing:.03em}
.tease-cta{display:flex;flex-wrap:wrap;gap:12px;justify-content:center;margin-top:clamp(36px,5vw,56px)}
.tease-over span{text-align:center;padding:0 16px}
@media (max-width:600px){
  .lhero h1{font-size:clamp(40px,12.5vw,64px)}
  .lhero .countdown{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;width:100%}
  .lhero .countdown .cd{min-width:0;padding:12px 4px}
  .lhero .countdown .cd b{font-size:30px}
  .lhero .countdown .cd span{font-size:10px;letter-spacing:.04em}
}
.tease b{color:#f91016!important;-webkit-text-fill-color:#f91016;background:none!important;font-size:24px}

/* partenaires */
.partner-logos{display:grid;grid-template-columns:1fr 1fr;gap:16px}
@media (max-width:700px){.partner-logos{grid-template-columns:1fr}}
.plogo{border:1px solid var(--line);border-radius:20px;background:#000;display:grid;place-items:center;padding:clamp(24px,4vw,44px);min-height:260px}
.plogo img{max-width:min(100%,420px);max-height:220px;width:auto;height:auto;object-fit:contain}
.partners{gap:20px}
.partners img{display:block;width:auto;object-fit:contain}
.partners .pf-wide{height:34px}
.partners .pf-tall{height:58px}
.nav-cta{display:flex;gap:10px;align-items:center}
.nav-cta{margin-left:auto}
@media (max-width:600px){.nav-cta{gap:8px}.nav-cta .btn{padding:10px 14px;font-size:12px}}
.foot-links{display:flex;gap:18px}
.foot-links a{color:#fff;text-transform:uppercase;letter-spacing:.06em;font-size:14px;text-decoration:none}
.foot-links a:hover{color:#f91016}
/* icônes Twitch / Discord */
.soc{display:inline-flex;align-items:center;justify-content:center;gap:8px;height:46px;min-width:46px;padding:0 16px 0 13px;border-radius:999px;border:1px solid var(--line);background:#000;color:#fff;text-decoration:none;text-transform:uppercase;letter-spacing:.06em;font-size:13px;transition:border-color .15s,background .15s,color .15s}
.soc svg{width:22px;height:22px;flex:none}
.soc:hover{border-color:#f91016;color:#fff}
.soc-main{background:#cf0304;border-color:#cf0304}
.soc-main:hover{background:#f91016;border-color:#f91016}
.soc-main svg circle{fill:currentColor}
@media (max-width:600px){.soc{padding:0;width:44px;height:44px}.soc span{display:none}}
.foot-links .soc{padding:0;width:44px;height:44px}
.flow b{color:#f91016!important;-webkit-text-fill-color:#f91016!important}
.races .chip{color:#f91016!important;font-size:16px}
.races .chip small{color:#fff!important;opacity:1}
.races .chip[aria-pressed="true"]{color:#fff!important}
.races .chip:hover{background:#f91016;border-color:#f91016;color:#000!important}
.races .chip:hover small{color:#000!important}
/* tout bouton / boîte rouge au survol : texte noir */
.btn:not(.ghost):hover,.soc-main:hover,.chip[aria-pressed="true"]:hover,.races .chip[aria-pressed="true"]:hover{color:#000!important;-webkit-text-fill-color:#000}
.chip[aria-pressed="true"]:hover small,.races .chip[aria-pressed="true"]:hover small{color:#000!important}
.soc-main:hover svg,.btn:not(.ghost):hover svg{color:#000}

/* ── barre du haut v11 : noir plein, tout centré verticalement ── */
.nav{position:sticky!important;top:0!important;margin:0!important;max-width:none!important;width:100%!important;border:0!important;border-radius:0!important;
  background:#000!important;box-shadow:0 1px 0 rgba(207,3,4,.35)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
  padding-top:env(safe-area-inset-top,0px);pointer-events:auto!important;z-index:60;transition:box-shadow .3s}
.nav .wrap{display:flex!important;align-items:center!important;gap:24px;height:132px!important;max-width:1240px;margin:0 auto;transition:height .3s ease}
.nav .logo-top{align-self:center!important;align-items:center!important;height:auto!important;display:flex;flex:none}
.nav .logo-top img{height:112px!important;margin:0!important;transition:height .3s ease}
.nav ul{margin:0 auto!important;align-self:center}
.nav .nav-cta{margin-left:0!important;align-self:center;flex:none}
.nav.scrolled .wrap{height:86px!important}
.nav.scrolled .logo-top img{height:70px!important}
.nav.scrolled{box-shadow:0 1px 0 rgba(207,3,4,.5),0 14px 30px rgba(0,0,0,.8)!important}
@media (max-width:1100px){.nav .wrap{gap:14px}.nav ul a{padding:9px 9px!important;font-size:13px!important}}
@media (max-width:900px){
  .nav .wrap{height:104px!important;justify-content:space-between}
  .nav .logo-top img{height:86px!important}
  .nav.scrolled .wrap{height:72px!important}
  .nav.scrolled .logo-top img{height:58px!important}
}

/* partenaires v2 : mise en avant */
.partners-sec{padding-top:clamp(70px,9vw,120px);padding-bottom:clamp(70px,9vw,120px)}
.partners-head{text-align:center;display:grid;justify-items:center;gap:14px;margin-bottom:clamp(30px,4vw,50px)}
.partners-head .lead{max-width:60ch;margin:0}
.partner-logos{gap:22px}
.plogo{margin:0;padding:0;min-height:0;display:grid;grid-template-rows:1fr auto;border:1px solid rgba(207,3,4,.45);border-top:3px solid #cf0304;border-radius:22px;overflow:hidden;background:#000;transition:border-color .2s,transform .2s}
.plogo:hover{border-color:#f91016;transform:translateY(-3px)}
.plogo-art{display:grid;place-items:center;min-height:clamp(260px,30vw,400px);padding:clamp(24px,4vw,48px);background:radial-gradient(60% 60% at 50% 50%,rgba(207,3,4,.16),rgba(0,0,0,0) 70%),#000}
.plogo-art img{max-width:min(100%,520px);max-height:clamp(200px,24vw,320px);width:auto;height:auto;object-fit:contain}
.plogo figcaption{padding:16px 22px;border-top:1px solid rgba(207,3,4,.3);font-family:var(--f-impact);font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:#f91016;text-align:center}
/* pied de page */
.partners span:first-child{font-size:15px!important;color:#f91016!important}
.partners .pf-wide{height:46px}
.partners .pf-tall{height:84px}
.plogo-art{background:#000!important}

/* ── menu v12 : moderne et homogène ── */
.nav ul{background:none!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;padding:0!important;gap:4px!important;display:flex;align-items:center}
.nav ul a{position:relative;display:flex!important;align-items:center;height:44px;padding:0 14px!important;border-radius:12px!important;background:none!important;box-shadow:none!important;
  font-family:var(--f-impact)!important;font-weight:400!important;font-size:16px!important;letter-spacing:.06em!important;text-transform:uppercase;color:#fff!important;transition:color .2s}
.nav ul a::after{content:"";position:absolute;left:14px;right:14px;bottom:6px;height:2px;border-radius:2px;background:#f91016;transform:scaleX(0);transform-origin:left;transition:transform .25s ease}
.nav ul a:hover::after,.nav ul a.on::after{transform:scaleX(1)}
.nav ul a:hover,.nav ul a.on{color:#fff!important;background:none!important}
.nav .nav-cta{gap:8px!important;padding-left:18px;border-left:1px solid rgba(255,255,255,.14)}
.nav .soc{height:44px!important;min-width:44px;padding:0 16px 0 13px!important;border-radius:12px!important;font-family:var(--f-impact);font-size:16px!important;letter-spacing:.06em!important;
  border:1px solid rgba(255,255,255,.18)!important;background:#000!important;color:#fff!important}
.nav .soc:hover{border-color:#f91016!important;color:#fff!important}
.nav .soc-main{background:#cf0304!important;border-color:#cf0304!important}
.nav .soc-main:hover{background:#f91016!important;border-color:#f91016!important;color:#000!important}
.nav .soc svg{width:20px;height:20px}
.foot-links .soc{border-radius:12px!important}
@media (max-width:1100px){.nav ul a{padding:0 9px!important;font-size:15px!important}.nav ul a::after{left:9px;right:9px}.nav .nav-cta{padding-left:12px}}
@media (max-width:1000px){.nav .nav-cta{border-left:0;padding-left:0;margin-left:auto!important}}
@media (max-width:600px){.nav .soc{padding:0!important;width:44px}}
.nav ul a{white-space:nowrap}
@media (max-width:1240px){.nav .soc span{display:none}.nav .soc{padding:0!important;width:44px;justify-content:center}}
@media (max-width:1060px){.nav ul a{padding:0 7px!important;font-size:14px!important}.nav ul a::after{left:7px;right:7px}.nav .wrap{gap:10px!important}.nav .logo-top img{height:96px!important}}
.nav .burger{display:none!important}
@media (max-width:1000px){
  .nav ul{display:none!important}
  .nav .burger{display:inline-flex!important;padding:0!important;width:44px;justify-content:center;cursor:pointer}
  .nav.open .burger{border-color:#f91016!important}
  .nav.open ul{border-radius:0!important;display:flex!important;flex-direction:column;align-items:stretch;gap:0!important;position:fixed;left:0;right:0;z-index:1000;background:#000!important;border-top:1px solid rgba(207,3,4,.4)!important;border-bottom:1px solid rgba(207,3,4,.4)!important;padding:8px 16px 16px!important;box-shadow:0 20px 40px rgba(0,0,0,.85)!important}
  .nav.open ul a{height:54px;font-size:20px!important;padding:0 4px!important;border-bottom:1px solid rgba(255,255,255,.08);border-radius:0!important}
  .nav.open ul a::after{left:4px;right:auto;width:40px;bottom:10px}
}

/* nom visible sous l'icône quand la place manque */
@media (max-width:1240px){
  .nav .soc{flex-direction:column;gap:3px;width:auto!important;min-width:64px;height:54px!important;padding:6px 10px!important}
  .nav .soc span{display:block!important;font-size:11px!important;letter-spacing:.08em;line-height:1}
  .nav .soc svg{width:20px;height:20px}
}
@media (max-width:600px){.nav .soc{min-width:58px;padding:6px 6px!important}.nav .soc span{font-size:10px!important}}
.foot-links .soc{width:auto!important;height:44px;padding:0 16px 0 13px!important}
.foot-links .soc span{display:inline!important}
/* menu v13 : plus grand + noms toujours visibles */
.nav ul a{font-size:20px!important;height:48px;padding:0 15px!important}
.nav ul a::after{left:15px;right:15px;height:3px;bottom:5px}
.nav .soc{height:48px!important;font-size:18px!important}
.nav .soc svg{width:22px;height:22px}
@media (max-width:1366px){.nav ul a{font-size:18px!important;padding:0 11px!important}.nav ul a::after{left:11px;right:11px}}
@media (max-width:1240px){
  .nav ul a{font-size:17px!important;padding:0 8px!important}.nav ul a::after{left:8px;right:8px}
  .nav .soc{flex-direction:column;gap:4px;width:auto!important;min-width:66px;height:56px!important;padding:6px 10px!important}
  .nav .soc span{display:block!important;font-size:12px!important;letter-spacing:.08em;line-height:1}
}
@media (max-width:1060px){.nav ul a{font-size:15px!important;padding:0 6px!important}.nav ul a::after{left:6px;right:6px}}
@media (max-width:600px){.nav .soc{min-width:60px;padding:6px 6px!important}.nav .soc span{font-size:11px!important}}
.nav.open ul a{font-size:24px!important;height:60px}
.foot-links .soc{width:auto!important;height:44px;padding:0 16px 0 13px!important}
.foot-links .soc span{display:inline!important}
.nav .wrap{max-width:1320px!important;gap:20px!important}
.nav ul a{font-size:19px!important;padding:0 12px!important}.nav ul a::after{left:12px;right:12px}
@media (max-width:1366px){.nav ul a{font-size:18px!important;padding:0 10px!important}.nav ul a::after{left:10px;right:10px}.nav .soc{font-size:17px!important}}
@media (max-width:1300px){.nav ul a{font-size:17px!important;padding:0 8px!important}.nav ul a::after{left:8px;right:8px}.nav .wrap{gap:14px!important}}
@media (max-width:1100px){.nav ul a{font-size:15px!important;padding:0 6px!important}.nav ul a::after{left:6px;right:6px}.nav .wrap{gap:10px!important}}

a.plogo{text-decoration:none;color:inherit}
.plogo .pcap{display:flex;justify-content:center;align-items:baseline;gap:14px;padding:16px 22px;border-top:1px solid rgba(207,3,4,.3);font-family:var(--f-impact);font-size:22px;text-transform:uppercase;letter-spacing:.04em;color:#f91016}
.plogo .pcap em{font-style:normal;font-family:inherit;font-size:14px;color:#fff;letter-spacing:.08em}
a.plogo:hover .pcap em{color:#f91016}
.partners a{display:block;transition:transform .2s}
.partners a:hover{transform:translateY(-2px)}
/* partenaires v3 : logos libres, sans cadre */
.plogo{border:0!important;border-radius:0!important;background:none!important;overflow:visible!important;box-shadow:none!important}
.plogo:hover{transform:none!important}
.plogo-art{min-height:0!important;padding:10px 0 0!important;background:none!important}
.plogo-art img{max-height:clamp(180px,22vw,300px)!important;transition:transform .25s ease}
a.plogo:hover .plogo-art img{transform:scale(1.04)}
.plogo .pcap{border-top:0!important;padding:18px 0 0!important}
.partner-logos{gap:clamp(30px,6vw,90px)!important;align-items:end}

/* bande QG (visuel salle Oxyde) */
.qg-band{position:relative;min-height:clamp(520px,62vw,860px);display:flex;align-items:flex-end;overflow:hidden;background:#000}
.qg-bg{position:absolute;inset:0;background-size:cover;background-position:center 30%}
.qg-band::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 14%,rgba(0,0,0,0) 52%,rgba(0,0,0,.85) 80%,#000 100%)}
.qg-inner{position:relative;z-index:1;text-align:center;display:grid;justify-items:center;gap:16px;padding-bottom:clamp(40px,6vw,80px)}
.qg-inner .lead{max-width:56ch;margin:0;color:#fff}
.qg-cta{display:flex;gap:12px;flex-wrap:wrap;justify-content:center;margin-top:8px}
@media (max-width:700px){.qg-band{min-height:620px}.qg-bg{background-position:center 20%;background-size:auto 70%;background-repeat:no-repeat}}
@media (max-width:700px){.qg-band{min-height:700px}.qg-bg{background-size:210% auto!important;background-position:center top!important}}
.eyebrow::before{display:none!important;content:none!important}
/* partenaires v4 (choix B) : une ligne, fond noir pur */
.partners-sec{padding:clamp(50px,6vw,70px) 0!important;background:#000!important;border-top:1px solid rgba(255,255,255,.08);border-bottom:1px solid rgba(255,255,255,.08)}
.partners-sec .wrap{display:grid;grid-template-columns:auto 1fr;align-items:center;gap:60px}
.partners-head{text-align:left!important;justify-items:start!important;margin:0!important}
.partners-head .lead{display:none}
.partners-head h2{font-size:clamp(32px,3.2vw,44px)!important;line-height:1}
.partner-logos{display:flex!important;justify-content:flex-end;align-items:center;gap:clamp(40px,6vw,80px)!important}
.plogo .pcap{display:none!important}
.plogo-art{padding:0!important}
.plogo-art img{max-height:110px!important;width:auto}
@media (max-width:760px){
  .partners-sec .wrap{grid-template-columns:1fr;gap:30px;justify-items:center}
  .partners-head{text-align:center!important;justify-items:center!important}
  .partner-logos{justify-content:center;gap:40px!important}
  .plogo-art img{max-height:90px!important}
}
/* bande QG v2 : image entière, texte en dessous (jamais par-dessus le logo) */
.qg-band{display:block!important;min-height:0!important;padding-bottom:clamp(40px,6vw,80px)}
.qg-bg{position:relative!important;inset:auto!important;width:100%;aspect-ratio:1536/1024;max-height:min(78vh,860px);background-size:cover!important;background-position:center 40%!important;background-repeat:no-repeat!important}
.qg-bg::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,#000 0%,rgba(0,0,0,0) 10%,rgba(0,0,0,0) 85%,#000 100%)}
.qg-band::after{display:none!important}
.qg-inner{padding-bottom:0!important;margin-top:clamp(-10px,-1vw,0px)}
@media (max-width:700px){.qg-bg{aspect-ratio:1/1;background-size:170% auto!important;background-position:center 30%!important;max-height:none}}

/* lueurs rouges animées derrière l'accueil */
.ambient{position:fixed;inset:0;z-index:-1;overflow:hidden;pointer-events:none;background:#000}
.ambient i{position:absolute;border-radius:50%;filter:blur(90px);opacity:.38;will-change:transform}
.ambient i:nth-child(1){width:55vmax;height:55vmax;left:-15vmax;top:-10vmax;background:radial-gradient(circle,#cf0304 0%,rgba(207,3,4,0) 65%);animation:glowA 38s ease-in-out infinite alternate}
.ambient i:nth-child(2){width:48vmax;height:48vmax;right:-14vmax;top:30vh;background:radial-gradient(circle,#ae0102 0%,rgba(174,1,2,0) 65%);animation:glowB 46s ease-in-out infinite alternate;opacity:.32}
.ambient i:nth-child(3){width:40vmax;height:40vmax;left:25vw;bottom:-18vmax;background:radial-gradient(circle,#f91016 0%,rgba(249,16,22,0) 62%);animation:glowC 52s ease-in-out infinite alternate;opacity:.22}
@keyframes glowA{to{transform:translate(22vw,18vh) scale(1.15)}}
@keyframes glowB{to{transform:translate(-26vw,-14vh) scale(.9)}}
@keyframes glowC{to{transform:translate(-18vw,-22vh) scale(1.2)}}
@media (prefers-reduced-motion:reduce){.ambient i{animation:none!important}}
body:has(.ambient){background:transparent!important}
html:has(.ambient){background:#000}
body:has(.ambient) .sec,body:has(.ambient) .hero,body:has(.ambient) .partners-sec{background:transparent!important}
body:has(.ambient) .forever,body:has(.ambient) .qg-band{background:transparent!important}
/* lueurs v2 : braises + halo diffus */
.ambient canvas{position:absolute;inset:0;display:block}
.ambient i{filter:blur(110px)!important}
.ambient i:nth-child(1){opacity:.26!important;left:auto!important;right:-8vmax!important;top:-6vmax!important;width:60vmax!important;height:60vmax!important}
.ambient i:nth-child(2){opacity:.18!important;left:-20vmax!important;right:auto!important;top:45vh!important}
.hero-tag{font-family:var(--f-impact);font-size:clamp(24px,2.6vw,36px);text-transform:uppercase;letter-spacing:.14em;color:#fff;margin:22px 0 0;line-height:1.1}
/* sous-titres (eyebrows) plus visibles, en rouge */
.eyebrow{font-family:var(--f-impact)!important;font-weight:400!important;font-size:clamp(18px,1.9vw,26px)!important;letter-spacing:.12em!important;color:#f91016!important;-webkit-text-fill-color:#f91016!important;text-transform:uppercase;margin-bottom:6px}
.formbox>*:not(.fbg){position:relative;z-index:1}
.post time{color:#f91016!important;-webkit-text-fill-color:#f91016!important;font-family:var(--f-impact);font-size:16px!important;letter-spacing:.1em!important}
.side .panel h4{color:#f91016!important;-webkit-text-fill-color:#f91016!important;background:none!important}