/* Concept : terminal tactique d'une unité tombée dans la zone rouge.
   HUD militaire kaki sur fond de nuit, grilles de carte, et le sang par-dessus. */
:root{
  color-scheme:dark;
  --night:#0b0a09;       /* fond */
  --bunker:#13120f;      /* bandes secondaires */
  --bone:#ece6dc;        /* texte */
  --khaki:#b5ad84;       /* texte HUD */
  --olive:rgba(150,145,95,.16); /* traits de grille */
  --blood:#d8261c;       /* accent AfterZ */
  --gore:#7d0c07;        /* sang séché */
  --ember:#ff6a50;       /* lueur */
  --paper:#d4c9b2;       /* papier du dossier */
  --ink:#1e1916;
  --line:rgba(236,230,220,.12);
  --f-display:"Black Ops One",Impact,"Arial Black",sans-serif;
  --f-ui:Rajdhani,"Segoe UI",system-ui,sans-serif;
  --f-hud:"Share Tech Mono",Consolas,"Courier New",monospace;
  --f-type:"Special Elite","Courier New",Courier,monospace;
  --gut-l:max(16px,env(safe-area-inset-left,0px));
  --gut-r:max(16px,env(safe-area-inset-right,0px));
}
*{box-sizing:border-box}
html{scroll-behavior:smooth;background:var(--night)}
body{margin:0;background:var(--night);color:var(--bone);font:500 18px/1.55 var(--f-ui);overflow-x:hidden}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:30;background:var(--night)}
a{color:inherit}
h1,h2,h3{font-family:var(--f-display);font-weight:400;letter-spacing:.04em;margin:0;line-height:1.02;text-transform:uppercase;text-wrap:balance}
.wrap{max-width:1180px;margin:0 auto;padding-left:var(--gut-l);padding-right:var(--gut-r)}
.hud{font:400 13px/1.3 var(--f-hud);letter-spacing:.14em;text-transform:uppercase;color:var(--khaki)}
.hud b{color:var(--blood);font-weight:400}
.grid-bg{background-image:linear-gradient(var(--olive) 1px,transparent 1px),linear-gradient(90deg,var(--olive) 1px,transparent 1px);background-size:48px 48px}
#grain{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:40;opacity:.07;mix-blend-mode:overlay}
.splat{position:absolute;pointer-events:none;z-index:1}

/* Boutons biseautés AfterZ */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:.55em;min-height:48px;padding:.65em 1.6em;
  font:400 18px var(--f-display);letter-spacing:.06em;text-transform:uppercase;text-decoration:none;color:#f1ebe0;
  background:rgba(14,10,10,.75);border:2px solid rgba(216,38,28,.75);cursor:pointer;
  clip-path:polygon(4% 0,100% 0,96% 100%,0 100%);transition:background .15s,transform .15s,box-shadow .15s}
.btn:hover,.btn:focus-visible{background:rgba(216,38,28,.85);transform:translateY(-1px);box-shadow:0 0 22px rgba(216,38,28,.6)}
.btn:focus-visible{outline:2px solid var(--ember);outline-offset:4px}
.btn.main{background:var(--blood);border-color:var(--ember);font-size:21px;padding:.7em 2em}
.btn.main:hover{background:#e83a2a}
.btn[disabled]{opacity:.5;cursor:not-allowed;transform:none;box-shadow:none;background:rgba(14,10,10,.75)}
.ico{width:1.1em;height:1.1em;flex:none;fill:none;stroke:currentColor;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* En-tête */
header{position:fixed;top:env(safe-area-inset-top,0px);left:0;right:0;z-index:20;border-bottom:1px solid transparent;transition:background .2s,border-color .2s}
header.solid{background:rgba(11,10,9,.95);backdrop-filter:blur(6px);border-color:rgba(216,38,28,.35)}
.nav{display:flex;align-items:center;justify-content:space-between;height:64px;gap:16px}
.logo{font:400 26px var(--f-display);letter-spacing:.06em;text-decoration:none}
.logo span{color:var(--blood)}
.links{display:flex;gap:24px;font:700 15px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;align-items:center}
.links a{text-decoration:none;opacity:.75;padding-block:6px;border-bottom:2px solid transparent}
.links a:hover{opacity:1;color:var(--ember)}
.links a[aria-current="page"]{opacity:1;color:var(--ember);border-color:var(--blood)}
.links .vote-tab{opacity:1;color:var(--blood)}
.nav .btn{min-height:40px;font-size:14px;padding:.45em 1.2em}
.mobile-vote{display:none}
@media (max-width:820px){.links{display:none}.mobile-vote{display:inline-flex}.nav .btn.dl{display:none}}

/* ============ ACCUEIL ============ */
.hero{position:relative;min-height:min(94svh,920px);display:flex;align-items:center;overflow:hidden;background:#000;padding-block:120px 100px}
.hero video{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;filter:saturate(.7) contrast(1.1) sepia(.15)}
.hero::before{content:"";position:absolute;inset:0;z-index:1;
  background:radial-gradient(ellipse at 50% 45%,transparent 20%,rgba(40,0,0,.55) 70%,rgba(0,0,0,.92) 100%),linear-gradient(to bottom,transparent 55%,var(--night) 100%)}
.hero::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;opacity:.14;background:repeating-linear-gradient(0deg,#000 0 2px,transparent 2px 4px)}
/* cadre HUD */
.frame{position:absolute;z-index:2;inset:86px var(--gut-r) 58px var(--gut-l);pointer-events:none}
.frame i{position:absolute;width:34px;height:34px;border:2px solid rgba(181,173,132,.6)}
.frame i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.frame i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.frame i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.frame i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.frame .tl,.frame .tr,.frame .bl,.frame .br{position:absolute}
.frame .tl{top:12px;left:48px}.frame .tr{top:12px;right:48px;text-align:right}
.frame .bl{bottom:12px;left:48px}.frame .br{bottom:12px;right:48px;text-align:right}
.rec{display:inline-block;width:9px;height:9px;border-radius:50%;background:var(--blood);box-shadow:0 0 10px var(--blood);margin-right:8px;animation:blink 1.2s steps(2) infinite}
@media (max-width:640px){.frame .tr,.frame .br{display:none}}

.hero .wrap{position:relative;z-index:3;width:100%;display:grid;justify-items:center;text-align:center;gap:24px}
.title{position:relative}
.hero h1{font-size:clamp(72px,16vw,210px);color:#f1ebe0;text-shadow:0 0 60px rgba(216,38,28,.55),0 5px 0 #000;animation:boot 1.4s ease-out 1}
.hero h1 span{color:var(--blood)}
.drips{position:absolute;left:0;right:0;top:86%;height:0;pointer-events:none}
.drips i{position:absolute;top:0;width:var(--w,9px);height:var(--h,40px);background:linear-gradient(var(--blood),var(--gore));
  border-radius:0 0 999px 999px;transform-origin:top;animation:drip 2.6s cubic-bezier(.4,0,.2,1) both;animation-delay:var(--d,1s)}
.drips i::after{content:"";position:absolute;left:50%;bottom:-4px;width:calc(var(--w,9px) * 1.5);height:calc(var(--w,9px) * 1.5);transform:translateX(-50%);border-radius:50%;background:var(--gore)}
.hero .tag{margin:20px 0 0;max-width:36ch;font:400 clamp(18px,2.2vw,23px)/1.5 var(--f-type);color:#ddd4c8}
.cta{display:flex;gap:14px;justify-content:center;flex-wrap:wrap}
@media (max-width:520px){.cta .btn{width:100%}}

@keyframes blink{50%{opacity:.15}}
@keyframes drip{from{transform:scaleY(.05)}to{transform:scaleY(1)}}
@keyframes boot{
  0%{opacity:.2;text-shadow:-8px 0 rgba(216,38,28,.9),8px 0 rgba(181,173,132,.6)}
  12%{opacity:1}
  18%{opacity:.3;transform:translateX(4px) skewX(-6deg)}
  24%{opacity:1;transform:none;text-shadow:-3px 0 rgba(216,38,28,.9),3px 0 rgba(181,173,132,.5)}
  40%{text-shadow:0 0 60px rgba(216,38,28,.55),0 5px 0 #000}
}

/* Ruban de quarantaine */
.tape{position:relative;z-index:4;overflow:hidden;background:repeating-linear-gradient(-45deg,var(--blood) 0 22px,#120c0c 22px 44px);
  transform:rotate(-1.6deg);margin:-26px -20px 0;border-block:3px solid #120c0c;box-shadow:0 10px 30px rgba(0,0,0,.6)}
.tape .run{display:flex;width:max-content;animation:run 38s linear infinite}
.tape span{display:block;padding:10px 18px;margin-block:8px;font:400 20px var(--f-display);letter-spacing:.12em;color:#f1ebe0;white-space:nowrap;background:#120c0c}
.tape span+span{margin-left:44px}
@keyframes run{to{transform:translateX(-50%)}}

section{padding-block:100px;position:relative}
h2{font-size:clamp(36px,5.4vw,62px)}
.head{display:grid;gap:14px;margin-bottom:46px}
.head p{margin:0;max-width:60ch;color:#b9b0a6;font-size:20px}

/* Dossier */
.dossier{display:grid;grid-template-columns:1fr 1.15fr;gap:60px;align-items:center}
.dossier>div,.dossier>article{min-width:0}
.sheet{position:relative;background:var(--paper);color:var(--ink);padding:44px 38px 40px;transform:rotate(1.2deg);
  box-shadow:0 30px 60px rgba(0,0,0,.6),inset 0 0 90px rgba(110,70,30,.4);font:400 18px/1.7 var(--f-type)}
.sheet::before{content:"";position:absolute;top:-14px;left:28px;width:120px;height:32px;background:rgba(236,230,220,.45);transform:rotate(-6deg)}
.sheet .meta{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:14px;border-bottom:1px dashed rgba(30,25,22,.5);padding-bottom:10px;margin-bottom:18px}
.sheet p{margin:0 0 14px;position:relative;z-index:2}
.sheet p:last-of-type{margin:0}
.sheet s{text-decoration-thickness:2px;opacity:.7}
.sheet .redact{background:var(--ink);color:transparent;user-select:none;padding:0 .2em}
.stamp{position:absolute;z-index:3;right:22px;bottom:26px;transform:rotate(-12deg);border:4px double var(--blood);color:var(--blood);
  padding:6px 14px;font:400 26px var(--f-display);letter-spacing:.1em;opacity:.85;mix-blend-mode:multiply}
@media (max-width:880px){.dossier{grid-template-columns:1fr;gap:48px}.sheet{transform:rotate(.6deg);padding:40px 22px 90px}}

/* Kit */
.bunker{background-color:var(--bunker);border-block:1px solid var(--line)}
.kit{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:22px}
@media (max-width:880px){.kit{grid-template-columns:1fr}}
.item{position:relative;overflow:hidden;background:#0e0c0b;border:1px solid var(--line);padding:30px 28px;display:grid;gap:12px;align-content:start;
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%);transition:border-color .2s,transform .2s}
.item:hover{border-color:rgba(216,38,28,.7);transform:translateY(-4px)}
.item .hud{display:flex;justify-content:space-between;gap:8px;border-bottom:1px dashed rgba(181,173,132,.3);padding-bottom:10px}
.item svg{width:46px;height:46px;stroke:var(--blood);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:2}
.item h3{font-size:28px;position:relative;z-index:2}
.item p{margin:0;color:#b9b0a6;position:relative;z-index:2}

/* Protocole */
.proto{display:grid;gap:14px}
.row{display:grid;grid-template-columns:auto 1fr auto;gap:22px;align-items:center;padding:22px 24px;border:1px solid var(--line);background:linear-gradient(90deg,rgba(216,38,28,.1),transparent 40%)}
.row>div{min-width:0}
.row .n{font:400 44px var(--f-display);color:var(--blood);line-height:1;width:1.4em}
.row b{display:block;font:400 22px var(--f-display);text-transform:uppercase;letter-spacing:.04em}
.row p{margin:2px 0 0;color:#b9b0a6}
.ip{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
.ip code{font:400 17px var(--f-hud);padding:9px 12px;background:#000;border:1px dashed rgba(216,38,28,.6);color:var(--bone)}
.ghost{font:700 14px var(--f-ui);letter-spacing:.12em;text-transform:uppercase;min-height:42px;padding:0 14px;cursor:pointer;background:transparent;color:var(--bone);border:1px solid var(--line)}
.ghost:hover,.ghost:focus-visible{border-color:var(--blood);color:var(--ember)}
.row .btn{font-size:15px;min-height:42px;padding:.4em 1.2em}
@media (max-width:760px){.row{grid-template-columns:auto 1fr}.row>:last-child{grid-column:1/-1}}

/* Radar */
.signal{overflow:hidden;background-color:var(--night);border-top:1px solid var(--line)}
.signal .wrap{display:grid;grid-template-columns:1.1fr 1fr;gap:40px;align-items:center}
.signal .wrap>div{min-width:0;display:grid;gap:18px;justify-items:start}
.signal p{margin:0;color:#b9b0a6;font-size:20px;max-width:46ch}
.radar{width:100%;max-width:440px;aspect-ratio:1;justify-self:center}
.radar canvas{width:100%;height:100%;display:block}
@media (max-width:880px){.signal .wrap{grid-template-columns:1fr}.radar{max-width:320px}}

/* ============ ONGLET VOTE ============ */
.vote-hero{padding-block:130px 60px;border-bottom:1px solid var(--line);overflow:hidden}
.vote-hero .wrap{display:grid;gap:16px;position:relative;z-index:2}
.vote-hero h1{font-size:clamp(52px,9vw,120px)}
.vote-hero h1 span{color:var(--blood)}
.vote-hero p{margin:0;max-width:58ch;color:#b9b0a6;font-size:20px}
.sites{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,300px),1fr));gap:22px}
.site{position:relative;display:grid;gap:16px;padding:26px;background:#0e0c0b;border:1px solid var(--line);
  clip-path:polygon(0 0,calc(100% - 22px) 0,100% 22px,100% 100%,0 100%)}
.site.ready{border-color:rgba(216,38,28,.55)}
.site .top{display:flex;justify-content:space-between;align-items:center;gap:10px}
.site h3{font-size:26px;overflow-wrap:anywhere}
.state{font:400 13px var(--f-hud);letter-spacing:.12em;text-transform:uppercase;padding:5px 10px;border:1px solid currentColor;white-space:nowrap}
.state.on{color:var(--ember);box-shadow:0 0 12px rgba(216,38,28,.35)}
.state.off{color:var(--khaki)}
.timer{font:400 40px var(--f-hud);font-variant-numeric:tabular-nums;letter-spacing:.06em;color:var(--bone)}
.timer small{display:block;font-size:12px;letter-spacing:.18em;color:var(--khaki);text-transform:uppercase}
.bar{height:6px;background:rgba(236,230,220,.08)}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--gore),var(--blood));width:100%}
.site .btn{width:100%}
.rewards{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr));gap:14px}
.reward{display:grid;grid-template-columns:auto 1fr;gap:14px;align-items:center;padding:18px;border:1px dashed rgba(181,173,132,.35)}
.reward .qty{font:400 30px var(--f-display);color:var(--blood);min-width:2.4ch;text-align:center}
.reward b{display:block;font:700 18px var(--f-ui);text-transform:uppercase;letter-spacing:.06em}
.reward span{color:#b9b0a6;font-size:16px}
.note{margin-top:22px;color:var(--khaki);font:400 14px/1.6 var(--f-hud)}

/* ============ RADIO ============ */
.radio{position:fixed;z-index:25;right:calc(16px + env(safe-area-inset-right,0px));bottom:calc(16px + env(safe-area-inset-bottom,0px));
  display:flex;align-items:center;gap:12px;padding:10px 14px 10px 10px;max-width:calc(100vw - 32px);
  background:rgba(11,10,9,.94);border:1px solid rgba(181,173,132,.35);box-shadow:0 10px 30px rgba(0,0,0,.6);backdrop-filter:blur(6px)}
.radio button{width:44px;height:44px;display:grid;place-items:center;cursor:pointer;background:transparent;color:var(--bone);border:1px solid var(--line)}
.radio button:hover:not([disabled]),.radio button:focus-visible{border-color:var(--blood);color:var(--ember)}
.radio button[disabled]{opacity:.4;cursor:not-allowed}
.radio #r-play{background:var(--blood);border-color:var(--ember)}
.radio #r-play[disabled]{background:transparent;border-color:var(--line)}
.radio svg{width:18px;height:18px;fill:currentColor}
.radio .info{min-width:0;display:grid;gap:2px}
.radio .name{font:700 15px var(--f-ui);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:170px}
.radio input[type=range]{width:90px;accent-color:var(--blood)}
.eq{display:inline-flex;gap:2px;align-items:flex-end;height:12px;margin-right:6px;vertical-align:-1px}
.eq i{width:3px;background:var(--blood);height:30%}
.radio.playing .eq i{animation:eq .8s ease-in-out infinite alternate}
.radio.playing .eq i:nth-child(2){animation-delay:-.3s}.radio.playing .eq i:nth-child(3){animation-delay:-.55s}
@keyframes eq{to{height:100%}}
@media (max-width:520px){.radio input[type=range]{display:none}.radio .name{max-width:120px}}

footer{border-top:1px solid var(--line);padding-block:26px calc(96px + env(safe-area-inset-bottom,0px));color:var(--khaki);font:400 13px var(--f-hud);letter-spacing:.1em;text-transform:uppercase}
footer .wrap{display:flex;justify-content:space-between;gap:16px;flex-wrap:wrap}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  .hero h1,.rec,.tape .run,.drips i,.radio.playing .eq i{animation:none}
  .btn,.item{transition:none}
}