/* ==========================================================================
   Zone Rouge : site v6
   Identité : l'écran de briefing du jeu. Police stencil du HUD pour les titres,
   Barlow Semi Condensed pour le texte, Rajdhani pour les petits relevés.
   Mouvement : une seule idée (la zone qui se resserre) déclinée en anneaux,
   verrouillage de viseur et radar. Tout se coupe avec prefers-reduced-motion.
   ========================================================================== */

@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/barlow-400.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:500;font-display:swap;src:url(fonts/barlow-500.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/barlow-600.woff2) format("woff2")}
@font-face{font-family:"Barlow Semi Condensed";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/barlow-700.woff2) format("woff2")}
@font-face{font-family:"Black Ops One";font-style:normal;font-weight:400;font-display:swap;src:url(fonts/stencil.woff2) format("woff2")}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:600;font-display:swap;src:url(fonts/rajdhani-600.woff2) format("woff2")}
@font-face{font-family:"Rajdhani";font-style:normal;font-weight:700;font-display:swap;src:url(fonts/rajdhani-700.woff2) format("woff2")}

:root{
  --nuit:#0E1218; --nuit2:#151B23; --nuit3:#1C2430;
  --ligne:rgba(236,232,225,.09); --ligne2:rgba(236,232,225,.17); --verre:rgba(236,232,225,.04);
  --craie:#ECE8E1; --doux:#B9C0CA; --brume:#8A93A0;
  --rouge:#E9483A; --rouge-h:#F4604F; --rouge-s:rgba(233,72,58,.14); --laiton:#E3B65B;
  --f:"Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --hud:"Rajdhani","Barlow Semi Condensed","Arial Narrow",Arial,sans-serif;
  --st:"Black Ops One",Impact,"Arial Black",sans-serif;
  --ease:cubic-bezier(.16,.8,.2,1);
  color-scheme:dark;
  interpolate-size:allow-keywords;
}

/* transitions entre les pages (navigateurs qui les gèrent, sans effet ailleurs) */
@view-transition{navigation:auto}
::view-transition-old(root){animation:vt-out .2s ease both}
::view-transition-new(root){animation:vt-in .35s ease both}
@keyframes vt-out{to{opacity:0}}
@keyframes vt-in{from{opacity:0}}

*{box-sizing:border-box}
html{scroll-behavior:smooth;scroll-padding-top:84px;-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;background:var(--nuit);color:var(--craie);font:400 18px/1.55 var(--f);-webkit-font-smoothing:antialiased;overflow-x:clip}
body::before{content:"";position:fixed;inset:0;pointer-events:none;z-index:50;opacity:.045;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
main{flex:1}
img{max-width:100%}
a{color:inherit}
button{font:inherit}
:focus-visible{outline:2px solid var(--rouge);outline-offset:3px;border-radius:4px}
::selection{background:var(--rouge);color:#fff}
.wrap{max-width:1200px;margin:0 auto;padding-left:max(22px,env(safe-area-inset-left,0px));padding-right:max(22px,env(safe-area-inset-right,0px))}
.carre{display:inline-block;width:.5em;height:.5em;background:var(--rouge);margin-right:.55em;vertical-align:.08em;flex:none}
.eti{font:600 15px/1.2 var(--hud);letter-spacing:.07em;color:var(--brume)}
.sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.skip{position:absolute;left:-999px;top:8px;background:var(--rouge);color:#fff;padding:8px 14px;border-radius:6px;z-index:80}
.skip:focus{left:12px}

/* ---------- navigation */
header{position:sticky;top:env(safe-area-inset-top,0px);z-index:40;background:rgba(14,18,24,.72);-webkit-backdrop-filter:blur(14px) saturate(1.25);backdrop-filter:blur(14px) saturate(1.25);border-bottom:1px solid var(--ligne);transition:background .3s,border-color .3s;view-transition-name:entete}
header.scrolled{background:rgba(14,18,24,.92);border-bottom-color:var(--ligne2)}
header .wrap{display:flex;align-items:center;gap:26px;padding-block:12px}
.logo{display:flex;align-items:center;font:400 21px/1 var(--st);letter-spacing:.07em;text-decoration:none;white-space:nowrap}
nav{display:flex;gap:24px;flex:1}
nav a{position:relative;color:var(--brume);text-decoration:none;font-weight:600;padding-block:4px;transition:color .2s}
nav a::after{content:"";position:absolute;left:50%;bottom:-7px;width:5px;height:5px;background:var(--rouge);transform:translateX(-50%) scale(0);transition:transform .25s var(--ease)}
nav a:hover,nav a[aria-current="page"]{color:var(--craie)}
nav a:hover::after,nav a[aria-current="page"]::after{transform:translateX(-50%) scale(1)}
.prog{position:absolute;left:0;right:0;bottom:-1px;height:2px;pointer-events:none}
.prog i{display:block;height:100%;background:var(--rouge);transform-origin:left;transform:scaleX(var(--p,0));box-shadow:0 0 10px rgba(233,72,58,.8)}
.burger{display:none;margin-left:auto;width:42px;height:38px;padding:0;border:1px solid var(--ligne2);border-radius:8px;background:none;color:var(--craie);cursor:pointer;align-items:center;justify-content:center}
.burger i,.burger i::before,.burger i::after{display:block;width:18px;height:2px;background:currentColor;position:relative;transition:transform .25s,background .25s,top .25s}
.burger i::before,.burger i::after{content:"";position:absolute;left:0}
.burger i::before{top:-6px}.burger i::after{top:6px}
header.open .burger i{background:transparent}
header.open .burger i::before{top:0;transform:rotate(45deg)}
header.open .burger i::after{top:0;transform:rotate(-45deg)}

/* ---------- boutons */
.btn{position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.6em;padding:14px 24px;border:1px solid var(--ligne2);border-radius:8px;background:var(--verre);color:var(--craie);font:700 17px/1.1 var(--f);text-decoration:none;cursor:pointer;overflow:hidden;transition:background .2s,transform .2s,box-shadow .2s,border-color .2s}
.btn:hover{background:rgba(236,232,225,.1);border-color:rgba(236,232,225,.32)}
.btn.prim{background:var(--rouge);border-color:transparent;color:#fff;box-shadow:0 10px 30px -12px rgba(233,72,58,.85)}
.btn.prim::after{content:"";position:absolute;inset:0;background:linear-gradient(100deg,transparent 30%,rgba(255,255,255,.28) 50%,transparent 70%);transform:translateX(-120%);transition:transform .7s var(--ease);pointer-events:none}
.btn.prim:hover{background:var(--rouge-h);transform:translateY(-1px)}
.btn.prim:hover::after{transform:translateX(120%)}
.btn .fl{font:600 14px/1 var(--hud);letter-spacing:.06em;opacity:.8}
.btn .fl:empty{display:none}
header .btn{padding:8px 16px;font-size:16px;box-shadow:none}
.actions{display:flex;gap:12px;flex-wrap:wrap}

/* ---------- animations communes */
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fadeIn{to{opacity:1}}
@keyframes rise{to{opacity:1;transform:none}}
@keyframes flotte{from{transform:translateY(0)}to{transform:translateY(-9px)}}
@keyframes pouls{70%{box-shadow:0 0 0 10px rgba(233,72,58,0)}100%{box-shadow:0 0 0 0 rgba(233,72,58,0)}}
.rise{opacity:0;transform:translateY(16px);animation:rise .9s var(--ease) forwards;animation-delay:calc(.85s + var(--d,0)*.1s)}

/* apparition au défilement : seulement pour les éléments marqués data-r, et seulement si le script tourne */
.js [data-r]{opacity:0;transform:translateY(26px);transition:opacity .8s var(--ease),transform .8s var(--ease);transition-delay:calc(var(--d,0)*90ms)}
.js [data-r].in{opacity:1;transform:none}
.m{display:block;overflow:hidden;padding-bottom:.1em;margin-bottom:-.1em}
.m>span{display:block}
.js .m>span{transform:translateY(108%);transition:transform .95s var(--ease)}
.js .in .m>span,.js .m.in>span{transform:none}

/* ---------- bandeau d'accueil */
.hero{position:relative;isolation:isolate;display:flex;align-items:center;min-height:clamp(620px,92svh,920px);overflow:hidden;border-bottom:1px solid var(--ligne)}
.hero-bg{position:absolute;z-index:-3;inset:-4% -2%;transform:translate3d(calc(var(--mx,0)*-14px),calc(var(--zs,0)*80px + var(--my,0)*-8px),0)}
.hero-bg img{display:block;width:100%;height:100%;object-fit:cover;object-position:70% 50%;filter:saturate(.95) contrast(1.05);animation:kb 26s ease-in-out infinite alternate}
@keyframes kb{from{transform:scale(1)}to{transform:scale(1.08) translate3d(-1.2%,.6%,0)}}
.hero::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(90deg,var(--nuit) 0%,rgba(14,18,24,.92) 30%,rgba(14,18,24,.42) 58%,rgba(14,18,24,.08) 100%),linear-gradient(0deg,var(--nuit) 0%,transparent 26%),linear-gradient(180deg,rgba(14,18,24,.55),transparent 22%)}
.zone{position:absolute;z-index:-1;right:-9%;top:50%;width:min(88vh,880px);aspect-ratio:1;pointer-events:none;
  transform:translate3d(calc(var(--mx,0)*-26px),calc(-50% + var(--my,0)*-18px),0) scale(calc(1 - var(--zs,0)*.55))}
.zone svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible;animation:zoneIn 2.4s var(--ease) both}
@keyframes zoneIn{from{transform:scale(1.4);opacity:0}30%{opacity:1}to{transform:none;opacity:1}}
.zone svg *{transform-box:fill-box;transform-origin:center}
.zone .z-main{fill:none;stroke:var(--rouge);stroke-width:2.5;stroke-opacity:.85;stroke-dasharray:1 2;stroke-dashoffset:1;animation:trace 2.6s .2s var(--ease) forwards}
@keyframes trace{to{stroke-dashoffset:0}}
.zone .z-dash{fill:none;stroke:var(--rouge);stroke-opacity:.5;stroke-width:1.5;stroke-dasharray:4 6;animation:spin 160s linear infinite}
.zone .z-tick{fill:none;stroke:var(--craie);stroke-opacity:.3;stroke-width:14;stroke-dasharray:.9 4.1;animation:spin 240s linear infinite reverse}
.zone .z-in{fill:none;stroke:var(--rouge);stroke-opacity:.32;stroke-width:1}
.zone .z-cross{fill:none;stroke:var(--rouge);stroke-opacity:.75;stroke-width:2}
.zone .z-core{fill:var(--rouge)}
.zone .sweep{position:absolute;inset:4%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 292deg,rgba(233,72,58,0) 292deg,rgba(233,72,58,.16) 350deg,rgba(233,72,58,.4) 360deg);-webkit-mask-image:radial-gradient(circle,transparent 0 12%,#000 13%);mask-image:radial-gradient(circle,transparent 0 12%,#000 13%);animation:spin 9s linear infinite}
.zone .ping{position:absolute;inset:0;border-radius:50%;border:1.5px solid var(--rouge);opacity:0;animation:ping 5s 1.8s ease-out infinite}
@keyframes ping{0%{transform:scale(.08);opacity:.7}100%{transform:scale(.88);opacity:0}}

.hud{position:absolute;z-index:1;inset:26px;pointer-events:none}
.hud i{position:absolute;width:30px;height:30px;border:2px solid rgba(236,232,225,.38);opacity:0;animation:fadeIn .8s 1.7s forwards}
.hud i:nth-child(1){top:0;left:0;border-right:0;border-bottom:0}
.hud i:nth-child(2){top:0;right:0;border-left:0;border-bottom:0}
.hud i:nth-child(3){bottom:0;left:0;border-right:0;border-top:0}
.hud i:nth-child(4){bottom:0;right:0;border-left:0;border-top:0}
.hud .lecture{position:absolute;right:46px;bottom:6px;font:600 14px/1 var(--hud);letter-spacing:.1em;color:var(--brume);opacity:0;animation:fadeIn .8s 2.1s forwards}
.hud .lecture b{color:var(--craie);font-weight:600;font-variant-numeric:tabular-nums}
.defiler{position:absolute;z-index:1;left:50%;bottom:34px;width:1px;height:56px;background:var(--ligne2);overflow:hidden}
.defiler::after{content:"";position:absolute;left:0;top:0;width:1px;height:50%;background:var(--rouge);animation:descend 2.4s ease-in-out infinite}
@keyframes descend{0%{transform:translateY(-100%)}100%{transform:translateY(200%)}}

.hero .wrap{position:relative;z-index:2;width:100%;padding-block:clamp(64px,9vh,110px)}
.coord{display:flex;gap:10px 22px;flex-wrap:wrap;margin-bottom:20px;font:600 15px/1 var(--hud);letter-spacing:.08em;color:var(--brume)}
.coord span{display:flex;align-items:center;gap:8px}
.live{display:inline-block;width:8px;height:8px;border-radius:50%;background:var(--rouge);box-shadow:0 0 0 0 rgba(233,72,58,.6);animation:pouls 2s infinite}
.hero h1{margin:0 0 28px;font:400 clamp(58px,min(14.5vw,22vh),198px)/.9 var(--st);letter-spacing:.015em}
.hero h1 .l{display:block;overflow:hidden;padding:.05em .1em .02em 0;margin:-.05em 0 -.02em}
.hero h1 .l span{display:inline-block;transform:translateY(112%);animation:lettre 1s var(--ease) forwards;animation-delay:calc(.3s + var(--i)*.07s)}
@keyframes lettre{to{transform:none}}
.hero h1 .r{color:var(--rouge);text-shadow:0 0 60px rgba(233,72,58,.35)}
.hero p{max-width:30em;margin:0 0 34px;font-size:clamp(19px,2vw,22px);color:var(--doux)}
.chiffres{display:flex;gap:clamp(24px,4vw,56px);flex-wrap:wrap;margin-top:clamp(34px,6vh,60px);padding-top:22px;border-top:1px solid var(--ligne);max-width:660px}
.chiffres b{display:block;font:400 clamp(38px,4.4vw,56px)/1 var(--st);font-variant-numeric:tabular-nums}
.chiffres span{color:var(--brume);font-size:16px}
@media (hover:hover) and (pointer:fine){.hero{cursor:crosshair}.hero a,.hero button{cursor:pointer}}

/* ---------- bandeau défilant */
.ticker{position:relative;overflow:hidden;background:var(--nuit2);border-bottom:1px solid var(--ligne);-webkit-mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent);mask-image:linear-gradient(90deg,transparent,#000 7%,#000 93%,transparent)}
.ticker .piste{display:flex;width:max-content;animation:defile 55s linear infinite}
.ticker ul{display:flex;flex:none;margin:0;padding:0;list-style:none}
.ticker li{display:flex;align-items:center;gap:28px;padding:18px 28px 18px 0;white-space:nowrap;font:700 20px/1 var(--hud);letter-spacing:.1em;text-transform:uppercase;color:var(--doux)}
.ticker li::after{content:"";width:8px;height:8px;background:var(--rouge);flex:none}
.ticker:hover .piste{animation-play-state:paused}
@keyframes defile{to{transform:translateX(-50%)}}

/* ---------- en-tête de page intérieure */
.ph{position:relative;isolation:isolate;overflow:hidden;border-bottom:1px solid var(--ligne);padding-block:clamp(56px,8vw,104px) clamp(42px,5vw,70px)}
.ph::before{content:"";position:absolute;inset:0;z-index:-2;background:radial-gradient(60% 130% at 92% 0%,var(--rouge-s),transparent 70%)}
.ph::after{content:"";position:absolute;inset:0;z-index:-1;opacity:.7;background-image:linear-gradient(var(--ligne) 1px,transparent 1px),linear-gradient(90deg,var(--ligne) 1px,transparent 1px);background-size:56px 56px;-webkit-mask-image:radial-gradient(70% 90% at 85% 20%,#000,transparent 75%);mask-image:radial-gradient(70% 90% at 85% 20%,#000,transparent 75%)}
.ph .zone-s{position:absolute;z-index:-1;right:-5%;top:50%;width:min(44vw,500px);aspect-ratio:1;transform:translateY(-50%);border-radius:50%;border:1.5px dashed rgba(233,72,58,.4);pointer-events:none;animation:spin 140s linear infinite}
.ph .zone-s::before{content:"";position:absolute;inset:20%;border-radius:50%;border:1px solid rgba(233,72,58,.22)}
.ph .zone-s::after{content:"";position:absolute;inset:2%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 300deg,rgba(233,72,58,.0) 300deg,rgba(233,72,58,.14) 352deg,rgba(233,72,58,.34) 360deg);animation:spin 8s linear infinite}
.ph .eti{display:flex;align-items:center;margin-bottom:18px;opacity:0;animation:fadeIn .7s .1s forwards}
.ph h1{margin:0 0 22px;font:400 clamp(38px,6.2vw,84px)/1 var(--st);letter-spacing:.025em;text-transform:uppercase;text-wrap:balance;max-width:16em;animation:wipe 1s .15s var(--ease) both}
@keyframes wipe{from{clip-path:inset(-12% 100% -12% -3%)}to{clip-path:inset(-12% -3% -12% -3%)}}
.ph p{max-width:36em;margin:0;color:var(--doux);font-size:clamp(18px,1.8vw,21px);opacity:0;transform:translateY(14px);animation:rise .9s .55s var(--ease) forwards}
.ph .actions{margin-top:30px;opacity:0;transform:translateY(14px);animation:rise .9s .7s var(--ease) forwards}

/* ---------- sections */
section{position:relative;padding-block:clamp(64px,7.5vw,104px);border-bottom:1px solid var(--ligne)}
.tete{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:22px 64px;align-items:end;margin-bottom:44px}
.tete .eti{grid-column:1/-1;display:flex;align-items:center}
.tete .eti::after{content:"";flex:1;max-width:220px;height:1px;margin-left:16px;background:linear-gradient(90deg,var(--ligne2),transparent);transform-origin:left}
.js .tete .eti::after{transform:scaleX(0);transition:transform 1.1s .15s var(--ease)}
.js .tete.in .eti::after{transform:none}
h2{margin:0;font:700 clamp(38px,5.2vw,66px)/.98 var(--f);letter-spacing:-.005em;text-wrap:balance}
.intro{margin:0;max-width:34em;color:var(--doux)}
.intro a,.note a,.prose a,.rep a{color:var(--craie);text-decoration-color:rgba(233,72,58,.7);text-underline-offset:3px}
.note{margin:28px 0 0;max-width:48em;color:var(--brume);font-size:16px}
.prose{max-width:46em;color:var(--doux)}
.prose h3{margin:34px 0 8px;color:var(--craie);font:700 26px/1.15 var(--f)}
.prose p{margin:0 0 14px}
.prose ul{margin:0 0 14px;padding-left:1.2em}
.prose li{margin-bottom:6px}
code{font-family:ui-monospace,SFMono-Regular,Consolas,Menlo,monospace;font-size:.82em;background:rgba(0,0,0,.35);padding:2px 7px;border-radius:5px;color:var(--craie);word-break:break-all}
.cta-section{border-bottom:0}

/* ---------- modes */
.modes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));border:1px solid var(--ligne);border-radius:18px;overflow:hidden;background:var(--verre)}
.mode{position:relative;isolation:isolate;padding:34px 30px 38px}
.mode+.mode{border-left:1px solid var(--ligne)}
.spot::before{content:"";position:absolute;inset:0;z-index:-1;opacity:0;pointer-events:none;transition:opacity .35s;background:radial-gradient(340px circle at var(--mx,50%) var(--my,30%),rgba(233,72,58,.17),transparent 70%)}
.spot:hover::before{opacity:1}
.mode .ico{display:block;width:56px;height:56px;margin-bottom:26px;color:var(--rouge);overflow:visible}
.ico *{fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round;stroke-linejoin:round;transform-box:fill-box;transform-origin:center;transition:transform .55s var(--ease)}
.ico .dot{fill:currentColor;stroke:none}
.js .ico .d{stroke-dasharray:1 2;stroke-dashoffset:1;transition:transform .55s var(--ease),stroke-dashoffset 1.4s var(--ease) calc(.3s + var(--d,0)*.12s)}
.js [data-r].in .ico .d{stroke-dashoffset:0}
.mode:hover .ico .a1{transform:translateX(6px)}
.mode:hover .ico .a2{transform:translateX(-6px)}
.mode:hover .ico .rot{transform:rotate(45deg)}
.mode:hover .ico .bomb{animation:secoue .6s ease}
@keyframes secoue{20%{transform:rotate(-4deg)}50%{transform:rotate(4deg)}80%{transform:rotate(-2deg)}}
.mode h3{margin:0 0 6px;font:700 28px/1.1 var(--f)}
.mode .regle{margin-bottom:14px;font:600 16px/1.3 var(--hud);letter-spacing:.05em;color:var(--laiton)}
.mode p{margin:0;color:var(--doux)}

/* ---------- captures en viseur + visionneuse */
.gal{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:30px 22px}
.gal.une{grid-template-columns:1.6fr 1fr}
.gal.une .grande{grid-row:span 2}
.vis{margin:0;min-width:0}
.vis .cadre{position:relative;isolation:isolate;display:block;width:100%;padding:0;overflow:hidden;border:1px solid var(--ligne);border-radius:12px;background:var(--nuit2);color:inherit;text-align:left;cursor:zoom-in}
.vis img{display:block;width:100%;height:auto;transition:transform .9s var(--ease),filter .5s}
.vis .cadre:hover img,.vis .cadre:focus-visible img{transform:scale(1.035);filter:brightness(1.07)}
.vis .cadre i{position:absolute;z-index:2;width:26px;height:26px;border:0 solid var(--rouge);opacity:.6;pointer-events:none;transition:top .6s var(--ease),left .6s var(--ease),right .6s var(--ease),bottom .6s var(--ease),opacity .4s}
.vis .cadre i:nth-of-type(1){top:10px;left:10px;border-top-width:2px;border-left-width:2px}
.vis .cadre i:nth-of-type(2){top:10px;right:10px;border-top-width:2px;border-right-width:2px}
.vis .cadre i:nth-of-type(3){bottom:10px;left:10px;border-bottom-width:2px;border-left-width:2px}
.vis .cadre i:nth-of-type(4){bottom:10px;right:10px;border-bottom-width:2px;border-right-width:2px}
.vis .cadre:hover i,.vis .cadre:focus-visible i{opacity:1}
.vis .cadre:hover i:nth-of-type(1),.vis .cadre:focus-visible i:nth-of-type(1){top:30px;left:30px}
.vis .cadre:hover i:nth-of-type(2),.vis .cadre:focus-visible i:nth-of-type(2){top:30px;right:30px}
.vis .cadre:hover i:nth-of-type(3),.vis .cadre:focus-visible i:nth-of-type(3){bottom:30px;left:30px}
.vis .cadre:hover i:nth-of-type(4),.vis .cadre:focus-visible i:nth-of-type(4){bottom:30px;right:30px}
.vis .verrou{position:absolute;z-index:2;left:50%;bottom:14px;padding:5px 12px 4px;border-radius:4px;background:rgba(14,18,24,.78);color:var(--craie);font:700 14px/1 var(--hud);letter-spacing:.1em;opacity:0;transform:translate(-50%,8px);transition:opacity .35s,transform .5s var(--ease)}
.vis .cadre:hover .verrou,.vis .cadre:focus-visible .verrou{opacity:1;transform:translate(-50%,0)}
.vis figcaption{display:flex;justify-content:space-between;gap:12px;margin-top:11px;color:var(--doux);font-size:16.5px}

.lb{width:min(1280px,94vw);max-width:none;padding:0;border:0;background:transparent;color:var(--craie);overflow:visible}
.lb::backdrop{background:rgba(6,9,13,.86);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.lb[open]{animation:lbIn .35s var(--ease)}
.lb[open]::backdrop{animation:fadeBack .3s both}
@keyframes lbIn{from{opacity:0;transform:scale(.965) translateY(10px)}}
@keyframes fadeBack{from{opacity:0}}
.lb figure{margin:0}
.lb img{display:block;width:100%;height:auto;max-height:80vh;object-fit:contain;border-radius:10px;border:1px solid var(--ligne2);background:var(--nuit)}
.lb figcaption{display:flex;justify-content:space-between;gap:16px;margin-top:12px;font-size:17px;color:var(--doux)}
.lb .cmp{font:600 15px/1.4 var(--hud);letter-spacing:.08em;color:var(--brume)}
.lb-b{position:absolute;display:grid;place-items:center;width:48px;height:48px;border:1px solid var(--ligne2);border-radius:50%;background:rgba(14,18,24,.8);color:var(--craie);font-size:26px;line-height:1;cursor:pointer;transition:background .2s,border-color .2s}
.lb-b:hover{background:var(--rouge);border-color:transparent}
.lb-x{top:-58px;right:0}
.lb-p{left:-62px;top:calc(50% - 40px)}
.lb-n{right:-62px;top:calc(50% - 40px)}

@media (max-width:1400px){.lb-p{left:10px}.lb-n{right:10px}.lb-p,.lb-n{top:calc(50% - 34px);background:rgba(14,18,24,.78)}}
@media (max-width:1100px){.camos{grid-template-columns:repeat(3,minmax(0,1fr))}}

/* ---------- cartes */
.cartes{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.carte{position:relative;isolation:isolate;display:flex;flex-direction:column;justify-content:flex-end;aspect-ratio:4/3;padding:26px;overflow:hidden;border:1px solid var(--ligne);border-radius:16px}
.carte img{position:absolute;inset:0;z-index:-3;width:100%;height:100%;object-fit:cover;transition:transform .9s var(--ease)}
.carte::before{content:"";position:absolute;inset:0;z-index:-2;background:linear-gradient(0deg,rgba(14,18,24,.97) 0%,rgba(14,18,24,.82) 34%,rgba(14,18,24,.35) 62%,transparent 84%)}
.carte::after{content:"";position:absolute;z-index:-1;left:50%;top:38%;width:170%;aspect-ratio:1;margin:-85% 0 0 -85%;border-radius:50%;background:conic-gradient(from 0deg,transparent 0 310deg,rgba(233,72,58,.0) 310deg,rgba(233,72,58,.2) 352deg,rgba(233,72,58,.45) 360deg);opacity:0;transition:opacity .5s;animation:spin 4.5s linear infinite;pointer-events:none}
.carte:hover img{transform:scale(1.06)}
.carte:hover::after{opacity:1}
.carte .eti{color:var(--laiton)}
.carte h3{margin:4px 0 6px;font:700 32px/1 var(--f)}
.carte p{margin:0;color:var(--doux)}

/* ---------- vitrine (armes, skins) */
.vitrine{--vr:2.05;container-type:inline-size;position:relative;isolation:isolate;display:grid;place-items:center;overflow:hidden;aspect-ratio:2.05/1;border:1px solid var(--ligne);border-radius:20px;
  background:radial-gradient(70% 90% at 50% 62%,color-mix(in srgb,var(--acc,#E9483A) 24%,transparent),transparent 72%),linear-gradient(180deg,var(--nuit2),var(--nuit))}
.vitrine::before{content:"";position:absolute;inset:0;z-index:-2;opacity:.55;background-image:linear-gradient(var(--ligne) 1px,transparent 1px),linear-gradient(90deg,var(--ligne) 1px,transparent 1px);background-size:48px 48px;-webkit-mask-image:radial-gradient(60% 70% at 50% 60%,#000,transparent 80%);mask-image:radial-gradient(60% 70% at 50% 60%,#000,transparent 80%)}
.vitrine .anneau{position:absolute;z-index:-1;left:50%;top:54%;width:min(70%,520px);aspect-ratio:1;transform:translate(-50%,-50%);border-radius:50%;border:1.5px dashed color-mix(in srgb,var(--acc,#E9483A) 50%,transparent);animation:spin 90s linear infinite}
.vitrine .anneau::before{content:"";position:absolute;inset:14%;border-radius:50%;border:1px solid color-mix(in srgb,var(--acc,#E9483A) 30%,transparent)}
.vitrine .fond{position:absolute;z-index:-1;left:0;right:0;bottom:5%;text-align:center;font:400 clamp(34px,calc(94cqw / var(--em,7)),170px)/.8 var(--st);color:transparent;-webkit-text-stroke:1.5px rgba(236,232,225,.09);white-space:nowrap;overflow:hidden;user-select:none;pointer-events:none}
.vitrine>img,.vitrine .pile img{max-width:88%;max-height:calc(80cqw / var(--vr));width:auto;height:auto;filter:drop-shadow(0 26px 26px rgba(0,0,0,.6)) drop-shadow(0 0 36px color-mix(in srgb,var(--acc,#E9483A) 28%,transparent))}
.vitrine>img.flotte{animation:flotte 7s ease-in-out infinite alternate}
.vitrine>img,.vitrine .pile{translate:calc(var(--tx,0)*12px) calc(var(--ty,0)*7px)}
.vitrine .anneau{translate:calc(var(--tx,0)*-16px) calc(var(--ty,0)*-9px)}
.vitrine .fond{translate:calc(var(--tx,0)*-8px) 0}

/* ---------- explorateur d'armes */
.expl{display:grid;grid-template-columns:290px minmax(0,1fr);gap:30px;align-items:start}
.expl-liste{position:sticky;top:96px;display:grid;gap:4px}
.onglet{position:relative;display:grid;grid-template-columns:84px minmax(0,1fr);align-items:center;gap:12px;width:100%;padding:9px 14px 9px 12px;border:1px solid transparent;border-radius:12px;background:none;color:var(--doux);text-align:left;cursor:pointer;transition:background .25s,border-color .25s}
.onglet img{display:block;width:84px;height:36px;object-fit:contain;filter:drop-shadow(0 4px 6px rgba(0,0,0,.5))}
.onglet b{display:block;font:700 19px/1.1 var(--f);color:var(--craie)}
.onglet small{display:block;margin-top:2px;font:500 15px/1.2 var(--f);color:var(--brume)}
.onglet:hover{background:var(--verre)}
.onglet[aria-selected="true"]{background:var(--nuit2);border-color:var(--ligne2)}
.onglet[aria-selected="true"]::before{content:"";position:absolute;left:-1px;top:14px;bottom:14px;width:3px;border-radius:2px;background:var(--rouge)}
.expl-scene [role="tabpanel"][hidden]{display:none}
.arme .vitrine img{opacity:1}
.js .arme .vitrine img{opacity:0;transform:translateX(46px) scale(.96);filter:blur(8px) drop-shadow(0 26px 26px rgba(0,0,0,.6))}
.js .arme.on .vitrine img{opacity:1;transform:none;filter:drop-shadow(0 26px 26px rgba(0,0,0,.6)) drop-shadow(0 0 36px color-mix(in srgb,var(--acc,#E9483A) 28%,transparent));transition:opacity .7s var(--ease),transform .9s var(--ease),filter .9s var(--ease)}
.fiche{display:grid;grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);gap:28px 44px;margin-top:28px}
.fiche h3{margin:0;font:700 clamp(34px,4vw,46px)/1 var(--f)}
.fiche .ligne{display:flex;align-items:center;flex-wrap:wrap;gap:10px 14px;margin:10px 0 14px}
.puce-c{display:inline-block;padding:5px 11px 4px;border:1px solid var(--ligne2);border-radius:6px;font:700 15px/1 var(--hud);letter-spacing:.06em;color:var(--doux)}
.prix{font:600 17px/1 var(--hud);letter-spacing:.05em;color:var(--laiton)}
.fiche p{margin:0;color:var(--doux);max-width:32em}
.chif{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px 20px;margin:24px 0 0;padding:0;list-style:none}
.chif li{padding-top:10px;border-top:1px solid var(--ligne)}
.chif b{display:block;font:400 clamp(24px,2.6vw,30px)/1.1 var(--st);color:var(--craie)}
.chif span{font-size:15px;color:var(--brume)}
.barres{display:grid;gap:18px;align-content:start;padding-top:6px}
.barre{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:14px;font:600 17px/1 var(--f);color:var(--doux)}
.jauge{position:relative;height:10px;background:var(--ligne2);-webkit-mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 10px);mask-image:repeating-linear-gradient(90deg,#000 0 7px,transparent 7px 10px)}
.jauge i{position:absolute;left:0;top:0;bottom:0;width:calc(var(--v)*100%);background:var(--rouge)}
.js .jauge i{width:0;transition:width 1.1s var(--ease) calc(var(--k,0)*80ms + .25s)}
.js .on .jauge i{width:calc(var(--v)*100%)}

/* ---------- camouflages classiques */
.camos{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.camo{padding:16px;border:1px solid var(--ligne);border-radius:14px;background:var(--verre);transition:border-color .3s,transform .4s var(--ease)}
.camo:hover{border-color:var(--ligne2);transform:translateY(-3px)}
.camo .vit{display:grid;place-items:center;aspect-ratio:2.5/1;margin-bottom:12px;border-radius:8px;background:radial-gradient(75% 100% at 50% 72%,rgba(236,232,225,.17),rgba(236,232,225,.05) 55%,transparent 80%)}
.camo .vit img{display:block;max-width:100%;max-height:100%;width:auto;height:auto;filter:drop-shadow(0 8px 8px rgba(0,0,0,.5))}
.camo h3{margin:0 0 8px;font:700 21px/1.1 var(--f)}
.camo .rang{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:6px 8px;margin-bottom:8px}
.camo p{margin:0;color:var(--brume);font-size:15.5px}

/* ---------- collections */
@property --acc{syntax:"<color>";inherits:true;initial-value:#E9483A}
.colls{--acc:#E9483A}
.coll-tabs{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin-bottom:28px}
.coll-tabs .tl{display:flex;flex-wrap:wrap;gap:10px}
.puce{display:inline-flex;align-items:center;gap:10px;padding:10px 17px 10px 12px;border:1px solid var(--ligne2);border-radius:999px;background:none;color:var(--doux);font:600 17px/1 var(--f);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.puce i{flex:none;width:14px;height:14px;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));box-shadow:0 0 12px color-mix(in srgb,var(--c1) 60%,transparent)}
.puce:hover{background:var(--verre);color:var(--craie)}
.puce[aria-selected="true"]{background:var(--nuit3);border-color:var(--craie);color:var(--craie)}
.puce.secret{border-style:dashed;color:var(--brume);cursor:default}
.puce.secret:hover{background:none;color:var(--brume)}
.puce.secret svg{width:14px;height:14px;fill:none;stroke:currentColor;stroke-width:2.4}
.coll-scene [role="tabpanel"][hidden]{display:none}
.coll{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:40px;align-items:center;transition:--acc .7s ease}
.coll .vitrine{--vr:1.5;aspect-ratio:1.5/1}
.coll .vitrine .pile{position:relative;display:grid;place-items:center;width:100%;height:100%}
.coll .vitrine .pile .arme-i{max-width:90%;max-height:calc(62cqw / var(--vr));transform:translateY(-6%)}
.coll .vitrine .pile .couteau-i{position:absolute;right:5%;bottom:7%;width:34%;max-width:none;max-height:none}
.js .coll .vitrine .pile img{opacity:0;transition:opacity .6s var(--ease),transform .9s var(--ease);transform:translateY(18px) scale(.97)}
.js .coll.on .vitrine .pile .arme-i{opacity:1;transform:translateY(-6%)}
.js .coll.on .vitrine .pile .couteau-i{opacity:1;transform:none;transition-delay:.12s}
.tier{display:inline-flex;align-items:center;padding:6px 11px 5px;border:1px solid color-mix(in srgb,var(--t) 55%,transparent);border-radius:6px;background:color-mix(in srgb,var(--t) 11%,transparent);color:var(--t);font:700 15px/1 var(--hud);letter-spacing:.07em}
.coll h3{margin:14px 0 10px;font:700 clamp(36px,4.4vw,54px)/1 var(--f)}
.coll p{margin:0 0 16px;color:var(--doux);max-width:30em}
.coll dl{display:grid;grid-template-columns:auto 1fr;gap:6px 16px;margin:0 0 20px}
.coll dt{color:var(--brume);font-size:16px}
.coll dd{margin:0;font-weight:600}
.vars{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.vars button{width:36px;height:36px;padding:0;border:2px solid transparent;border-radius:50%;background:linear-gradient(135deg,var(--c1),var(--c2));cursor:pointer;box-shadow:0 0 0 2px var(--nuit),0 0 0 3px var(--ligne2);transition:box-shadow .25s,transform .25s}
.vars button:hover{transform:scale(1.08)}
.vars button[aria-pressed="true"]{box-shadow:0 0 0 2px var(--nuit),0 0 0 4px var(--craie)}
.vars .nom{margin-left:6px;font:600 17px/1 var(--f);color:var(--doux)}

/* ---------- soldat à faire tourner */
.soldat{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr);gap:56px;align-items:center}
.vue3d{position:relative;isolation:isolate;aspect-ratio:1/.98;overflow:hidden;border:1px solid var(--ligne);border-radius:20px;background:radial-gradient(60% 60% at 50% 58%,rgba(233,72,58,.15),transparent 70%),linear-gradient(180deg,var(--nuit2),var(--nuit));touch-action:pan-y;cursor:grab;user-select:none;-webkit-user-select:none}
.vue3d.drag{cursor:grabbing}
.vue3d::before{content:"";position:absolute;inset:0;z-index:-1;opacity:.5;background-image:linear-gradient(var(--ligne) 1px,transparent 1px),linear-gradient(90deg,var(--ligne) 1px,transparent 1px);background-size:44px 44px;-webkit-mask-image:radial-gradient(55% 65% at 50% 62%,#000,transparent 80%);mask-image:radial-gradient(55% 65% at 50% 62%,#000,transparent 80%)}
.vue3d .sol{position:absolute;z-index:-1;left:50%;bottom:6%;width:62%;height:13%;transform:translateX(-50%);border-radius:50%;border:1.5px dashed rgba(233,72,58,.55);background:radial-gradient(closest-side,rgba(233,72,58,.28),transparent)}
.vue3d .frames{position:absolute;left:50%;top:4%;height:92%;aspect-ratio:var(--ar,1.05);transform:translateX(-50%);pointer-events:none}
.vue3d .frames img{position:absolute;inset:0;width:100%;height:100%;opacity:0;filter:drop-shadow(0 16px 18px rgba(0,0,0,.55));-webkit-user-drag:none}
.vue3d .frames img.v{opacity:1}
.vue3d .astuce{position:absolute;left:50%;bottom:16px;display:flex;align-items:center;gap:8px;transform:translateX(-50%);padding:6px 13px 5px;border-radius:999px;background:rgba(14,18,24,.75);font:600 14px/1 var(--hud);letter-spacing:.08em;color:var(--doux);transition:opacity .5s}
.vue3d.drag .astuce,.vue3d.vu .astuce{opacity:0}
.tenues{display:flex;flex-wrap:wrap;gap:10px;margin:26px 0 0;padding:0;list-style:none}
.tenue{display:inline-flex;align-items:center;gap:10px;padding:9px 16px 9px 11px;border:1px solid var(--ligne2);border-radius:999px;background:none;color:var(--doux);font:600 17px/1 var(--f);cursor:pointer;transition:background .25s,border-color .25s,color .25s}
.tenue i{flex:none;width:14px;height:14px;border-radius:50%;background:var(--c)}
.tenue small{font:600 13px/1 var(--hud);letter-spacing:.06em;color:var(--laiton)}
.tenue:hover{background:var(--verre);color:var(--craie)}
.tenue[aria-pressed="true"]{background:var(--nuit3);border-color:var(--craie);color:var(--craie)}

/* ---------- paliers du passe */
.passe{margin-top:64px}
.paliers-t{display:flex;align-items:baseline;gap:14px;margin-bottom:18px}
.paliers-t b{font:400 clamp(44px,5vw,64px)/1 var(--st);font-variant-numeric:tabular-nums}
.paliers-t span{color:var(--doux);font-size:20px}
.paliers{display:grid;grid-template-columns:repeat(20,minmax(0,1fr));gap:6px}
.paliers i{aspect-ratio:1;border-radius:3px;background:rgba(233,72,58,.78)}
.paliers i:last-child{background:var(--laiton);box-shadow:0 0 20px rgba(227,182,91,.7)}
.js .paliers i{background:var(--ligne2);box-shadow:none}
.js .paliers.in i{animation:allume .5s calc(var(--i)*14ms) both}
.js .paliers.in i:last-child{animation-name:allumeOr}
@keyframes allume{0%{background:var(--ligne2)}45%{background:var(--rouge);box-shadow:0 0 14px rgba(233,72,58,.95)}100%{background:rgba(233,72,58,.78);box-shadow:none}}
@keyframes allumeOr{0%{background:var(--ligne2)}45%{background:#fff;box-shadow:0 0 30px rgba(255,255,255,.9)}100%{background:var(--laiton);box-shadow:0 0 20px rgba(227,182,91,.7)}}
.paliers-n{display:flex;justify-content:space-between;margin-top:14px;color:var(--brume);font-size:16px}

/* ---------- points forts et atouts */
.feat{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:36px 28px}
.feat>div{padding-top:20px;border-top:2px solid var(--ligne)}
.feat>div:nth-child(-n+3){border-top-color:rgba(233,72,58,.55)}
.feat svg{display:block;width:40px;height:40px;margin-bottom:14px;color:var(--rouge);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.feat h3{margin:0 0 8px;font:700 25px/1.15 var(--f)}
.feat p{margin:0;color:var(--doux)}
.atouts{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.atout{position:relative;isolation:isolate;display:flex;flex-direction:column;align-items:flex-start;padding:26px;border:1px solid var(--ligne);border-radius:16px;background:var(--verre);transition:border-color .3s,transform .4s var(--ease)}
.atout:hover{border-color:rgba(233,72,58,.5);transform:translateY(-3px)}
.atout svg{display:block;width:44px;height:44px;margin-bottom:16px;color:var(--rouge);fill:none;stroke:currentColor;stroke-width:2.2;stroke-linecap:round;stroke-linejoin:round}
.atout h3{margin:0 0 6px;font:700 25px/1.1 var(--f)}
.atout p{margin:0 0 16px;color:var(--doux)}
.atout .prix{margin-top:auto}

/* ---------- vitrine d'accueil (arsenal) */
.duo{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1.1fr);gap:56px;align-items:center}
.duo h2{margin-bottom:18px}
.liste-p{margin:24px 0 30px;padding:0;list-style:none;display:grid;gap:10px;color:var(--doux)}
.liste-p li{display:flex;gap:12px;align-items:baseline}
.liste-p li::before{content:"";flex:none;width:8px;height:8px;background:var(--rouge);transform:translateY(-1px)}
.duo .vitrine{--vr:1.3;aspect-ratio:1.3/1}

/* ---------- nouveautés */
.chrono{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 36px}
.chrono li{display:grid;grid-template-columns:64px minmax(0,1fr);gap:16px;padding:22px 0;border-top:1px solid var(--ligne)}
.chrono li:first-child{border-top-color:var(--rouge)}
.chrono b{font:400 24px/1.2 var(--st);color:var(--craie)}
.chrono li:first-child b{color:var(--rouge)}
.chrono p{margin:0;color:var(--doux);font-size:17px}
.chrono strong{color:var(--craie);font-weight:600}
.versions{--lx:171px;position:relative}
.versions::before,.versions::after{content:"";position:absolute;left:var(--lx);top:0;bottom:0;width:2px;background:var(--ligne)}
.versions::after{background:var(--rouge);bottom:auto;height:calc(var(--tp,0)*100%);box-shadow:0 0 12px rgba(233,72,58,.7)}
.versions article{position:relative;display:grid;grid-template-columns:150px minmax(0,1fr);gap:8px 44px;padding:38px 0}
.versions article::before{content:"";position:absolute;left:calc(var(--lx) - 5px);top:48px;width:12px;height:12px;background:var(--nuit);border:2px solid var(--ligne2);transition:background .4s,border-color .4s,box-shadow .4s,transform .4s var(--ease)}
.versions article.on::before{background:var(--rouge);border-color:var(--rouge);box-shadow:0 0 0 6px rgba(233,72,58,.2);transform:rotate(45deg)}
html:not(.js) .versions{--tp:1}
html:not(.js) .versions article::before{background:var(--rouge);border-color:var(--rouge)}
.versions .v{font:400 clamp(28px,3vw,38px)/1 var(--st);color:var(--craie)}
.versions article:first-child .v{color:var(--rouge)}
.versions .v small{display:block;margin-top:10px;font:600 14px/1 var(--hud);letter-spacing:.06em;color:var(--brume)}
.versions h2{margin:0 0 10px;font-size:clamp(26px,3vw,34px);line-height:1.1}
.versions ul{margin:0;padding-left:1.2em;max-width:46em;color:var(--doux)}
.versions li{margin-bottom:6px}
.versions li strong{color:var(--craie);font-weight:600}

/* ---------- téléchargement */
.dl{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.sys{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:18px;padding:32px;border:1px solid var(--ligne);border-radius:18px;background:var(--nuit2);transition:border-color .3s,box-shadow .3s}
.sys .haut{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 12px}
.sys .haut .eti{white-space:nowrap}
.sys h3{margin:0;font:700 32px/1 var(--f)}
.sys .tag{display:none;margin-left:10px;font:700 14px/1 var(--hud);letter-spacing:.07em;color:var(--rouge);white-space:nowrap}
.sys.pour-toi{border-color:rgba(233,72,58,.55);box-shadow:0 0 0 1px rgba(233,72,58,.25),0 28px 70px -34px rgba(233,72,58,.55)}
.sys.pour-toi .tag{display:inline}
.sys ol{display:grid;gap:12px;margin:0;padding:0;list-style:none;counter-reset:e;color:var(--doux)}
.sys li{display:grid;grid-template-columns:28px minmax(0,1fr);gap:10px;counter-increment:e}
.sys li::before{content:counter(e);display:grid;place-items:center;height:26px;border:1px solid rgba(233,72,58,.45);border-radius:6px;color:var(--rouge);font:700 15px/1 var(--hud)}
.sys .btn{align-self:flex-start;margin-top:auto}
.conf{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:20px}
.conf>div{padding-top:18px;border-top:2px solid var(--ligne)}
.conf h3{margin:0 0 8px;font:700 26px/1.1 var(--f)}
.conf ul{margin:0;padding-left:1.15em;color:var(--doux)}

/* ---------- jouer entre potes */
.voies{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.voie{position:relative;isolation:isolate;display:flex;flex-direction:column;gap:10px;padding:26px 26px 28px;border:1px solid var(--ligne);border-radius:18px;background:var(--nuit2)}
.voie .eti{color:var(--laiton)}
.voie h3{margin:0;font:700 28px/1.1 var(--f)}
.voie p{margin:0;color:var(--doux)}
.voie ul{margin:6px 0 0;padding-left:1.15em;color:var(--doux)}
.voie li{margin-bottom:4px}
.schema{display:block;width:100%;height:auto;margin:0 0 6px;overflow:visible}
.schema .g-l{fill:none;stroke:var(--brume);stroke-width:1.6;stroke-linecap:round}
.schema .flux{fill:none;stroke:var(--rouge);stroke-width:2;stroke-linecap:round;stroke-dasharray:3 9;animation:flux 1.3s linear infinite}
@keyframes flux{to{stroke-dashoffset:-24}}
.schema .noeud{fill:var(--nuit3);stroke:var(--craie);stroke-width:1.8}
.schema .pl{fill:var(--craie)}
.schema .led{fill:var(--rouge)}
.schema .wifi{fill:none;stroke:var(--rouge);stroke-width:2.2;stroke-linecap:round;animation:wifi 2.4s ease-in-out infinite}
@keyframes wifi{0%,100%{opacity:.2}50%{opacity:1}}
.schema .halo{fill:none;stroke:var(--rouge);stroke-width:1.5;transform-box:fill-box;transform-origin:center;animation:halo 3s ease-out infinite}
@keyframes halo{0%{transform:scale(.6);opacity:.8}100%{transform:scale(1.7);opacity:0}}
.schema text{fill:var(--craie);font:400 13px var(--st);letter-spacing:.04em}
.schema .s-t{fill:var(--brume);font:600 12px var(--hud);letter-spacing:.08em}
.reseau{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.port{padding-top:20px;border-top:2px solid var(--ligne)}
.port:first-child{border-top-color:var(--rouge)}
.port b{display:block;margin-bottom:8px;font:400 clamp(34px,4vw,48px)/1 var(--st);letter-spacing:.02em}
.port span{color:var(--doux)}

/* ---------- questions */
.faq{max-width:860px;border-top:1px solid var(--ligne)}
.faq details{border-bottom:1px solid var(--ligne)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:20px;padding:22px 0;list-style:none;font:600 22px/1.25 var(--f);cursor:pointer;transition:color .2s}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:12px;height:12px;background:var(--rouge);transition:transform .35s var(--ease);clip-path:polygon(40% 0,60% 0,60% 40%,100% 40%,100% 60%,60% 60%,60% 100%,40% 100%,40% 60%,0 60%,0 40%,40% 40%)}
.faq details[open] summary::after{transform:rotate(45deg)}
.faq summary:hover{color:#fff}
.faq details::details-content{block-size:0;overflow:hidden;transition:block-size .4s var(--ease),content-visibility .4s allow-discrete}
.faq details[open]::details-content{block-size:auto}
.faq .rep{padding:0 40px 24px 0;max-width:46em;color:var(--doux)}
.faq .rep p{margin:0}

/* ---------- appel final avec chrono */
.cta{position:relative;isolation:isolate;display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:28px 44px;overflow:hidden;padding:clamp(26px,4vw,52px);border:1px solid var(--ligne);border-radius:22px;background:radial-gradient(70% 150% at 100% 0%,var(--rouge-s),transparent 70%),var(--nuit2)}
.cta h2{margin:0 0 8px;font-size:clamp(32px,4.2vw,52px)}
.cta p{margin:0;max-width:30em;color:var(--doux)}
.bombe{position:relative;width:118px;height:118px}
.bombe svg{display:block;width:100%;height:100%;transform:rotate(-90deg);overflow:visible}
.bombe .t0{fill:none;stroke:var(--ligne2);stroke-width:5}
.bombe .t1{fill:none;stroke:var(--rouge);stroke-width:5;stroke-linecap:round;stroke-dasharray:326.7;stroke-dashoffset:var(--o,0);filter:drop-shadow(0 0 6px rgba(233,72,58,.75))}
.bombe .num{position:absolute;inset:0;display:grid;place-items:center;font:400 28px/1 var(--st);font-variant-numeric:tabular-nums}
.bombe.boum .t1{stroke:#fff;filter:drop-shadow(0 0 16px #fff)}
.bombe.boum .num{color:var(--rouge);animation:clignote .3s steps(2) 3}
@keyframes clignote{50%{opacity:.2}}
.cta .btn.prim.alerte{animation:alerte .9s ease 2}
@keyframes alerte{50%{box-shadow:0 0 0 10px rgba(233,72,58,.25),0 10px 30px -12px rgba(233,72,58,.85);transform:scale(1.04)}}

/* ---------- pied de page */
footer{overflow:hidden;border-top:1px solid var(--ligne)}
footer .wrap.cols{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:36px;align-items:start;padding-top:56px;color:var(--brume);font-size:16.5px}
footer h4{margin:0 0 12px;color:var(--craie);font:700 16px/1 var(--f)}
footer ul{display:grid;gap:8px;margin:0;padding:0;list-style:none}
footer a{color:var(--doux);text-decoration:none}
footer a:hover{color:var(--craie);text-decoration:underline}
footer .marque{margin-bottom:12px;color:var(--craie);font:400 20px/1 var(--st);letter-spacing:.07em}
footer .marque+p{margin:0;max-width:26em}
.mot{margin:34px 0 -.12em;font:400 calc(96vw / var(--em,7.8))/.82 var(--st);letter-spacing:.02em;text-align:center;white-space:nowrap;color:transparent;-webkit-text-stroke:1px rgba(236,232,225,.1);user-select:none;-webkit-mask-image:linear-gradient(180deg,#000 25%,transparent 96%);mask-image:linear-gradient(180deg,#000 25%,transparent 96%)}
.calme-b{padding:7px 14px;border:1px solid var(--ligne2);border-radius:999px;background:none;color:var(--doux);font:600 14px/1 var(--hud);letter-spacing:.06em;cursor:pointer;transition:background .2s,color .2s}
.calme-b:hover{background:var(--verre);color:var(--craie)}
.calme-b[aria-pressed="true"]{background:var(--nuit3);border-color:var(--craie);color:var(--craie)}
footer .petit{align-items:center;display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:-14px;padding-bottom:26px;position:relative;font-size:15px;color:var(--brume)}

/* ---------- adaptation */
@media (max-width:1100px){
  .burger{display:inline-flex}
  header .wrap{gap:12px}
  header .wrap>.btn{margin-left:auto}
  nav{display:none;position:absolute;left:0;right:0;top:100%;flex-direction:column;gap:0;padding:6px max(22px,env(safe-area-inset-left,0px)) 16px;background:#0E1218;border-bottom:1px solid var(--ligne)}
  header.open nav{display:flex}
  nav a{padding:14px 0 14px 16px;border-top:1px solid var(--ligne);font-size:19px}
  nav a:first-child{border-top:0}
  nav a::after{left:0;bottom:auto;top:50%;transform:translateY(-50%) scale(0)}
  nav a:hover::after,nav a[aria-current="page"]::after{transform:translateY(-50%) scale(1)}
}
@media (max-width:980px){
  .expl{grid-template-columns:minmax(0,1fr)}
  .expl-scene{min-width:0}
  .expl-liste{position:static;display:flex;gap:8px;min-width:0;overflow-x:auto;overscroll-behavior-x:contain;padding-bottom:8px;margin-inline:-22px;padding-inline:22px;scroll-snap-type:x proximity;scrollbar-width:none}
  .expl-liste::-webkit-scrollbar{display:none}
  .onglet{flex:none;width:auto;min-width:190px;scroll-snap-align:start;border-color:var(--ligne)}
  .fiche{grid-template-columns:minmax(0,1fr)}
  .coll{grid-template-columns:minmax(0,1fr)}
  .soldat{grid-template-columns:minmax(0,1fr);gap:36px}
  .duo{grid-template-columns:minmax(0,1fr);gap:36px}
}
@media (max-width:860px){
  .tete{grid-template-columns:minmax(0,1fr)}
  .modes,.cartes,.reseau,.dl,.gal,.gal.une,.chrono,.feat,.voies,.conf,.atouts{grid-template-columns:minmax(0,1fr)}
  .mode+.mode{border-left:0;border-top:1px solid var(--ligne)}
  .gal.une .grande{grid-row:auto}
  .feat>div:nth-child(-n+3){border-top-color:var(--ligne)}
  .feat>div:first-child{border-top-color:rgba(233,72,58,.55)}
  .chrono li:nth-child(n+2){border-top-color:var(--ligne)}
  .hero{min-height:0}
  .hero::before{background:linear-gradient(180deg,rgba(14,18,24,.6),var(--nuit) 88%)}
  .zone{right:-34%;top:30%;width:112vw}
  .hud,.defiler{display:none}
  .chiffres{gap:28px}
  .paliers{grid-template-columns:repeat(10,minmax(0,1fr))}
  .versions{--lx:7px}
  .versions article{grid-template-columns:1fr;gap:12px;padding:28px 0 28px 34px}
  .versions article::before{top:34px}
  .versions .v small{display:inline;margin-left:12px}
  .ph .zone-s{right:-30%;width:90vw;opacity:.7}
  .cta{grid-template-columns:minmax(0,1fr);justify-items:start}
  footer .wrap.cols{grid-template-columns:minmax(0,1fr)}
  .lb-p{left:8px}.lb-n{right:8px}.lb-x{top:-56px;right:4px}
  .lb-p,.lb-n{top:auto;bottom:70px}
  .camos{grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .camo{padding:12px}
  .camo h3{font-size:19px}
  .btn .fl{display:none}
}
@media (max-width:560px){
  .chif{grid-template-columns:repeat(2,minmax(0,1fr))}
  .barre{grid-template-columns:82px minmax(0,1fr)}
  .vitrine{--vr:1.6;aspect-ratio:1.6/1}
  .sys{padding:24px}
  .sys h3{font-size:28px}
  .coll .vitrine{--vr:1.25;aspect-ratio:1.25/1}
  .onglet{min-width:176px}
}

/* ---------- sans JavaScript (ou script non chargé) : toutes les fiches sont lisibles les unes sous les autres, les commandes inutiles disparaissent */
html:not(.js) .expl-liste,html:not(.js) .coll-tabs,html:not(.js) .tenues,html:not(.js) .astuce,html:not(.js) .vars{display:none}
html:not(.js) .expl{grid-template-columns:minmax(0,1fr)}
html:not(.js) .expl-scene [role="tabpanel"][hidden],html:not(.js) .coll-scene [role="tabpanel"][hidden]{display:block}
html:not(.js) .expl-scene [role="tabpanel"]+[role="tabpanel"],html:not(.js) .coll-scene [role="tabpanel"]+[role="tabpanel"]{margin-top:72px}

/* ---------- mouvement réduit : tout est visible tout de suite, rien ne bouge en continu */
@media (prefers-reduced-motion:reduce){
  @view-transition{navigation:none}
  html{scroll-behavior:auto}
  *,*::before,*::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
  .js [data-r],.js .m>span,.js .arme .vitrine img,.js .coll .vitrine .pile img{opacity:1!important;transform:none!important;filter:none}
  .js .jauge i{width:calc(var(--v)*100%)}
  .js .paliers i{background:rgba(233,72,58,.78)}
  .js .paliers i:last-child{background:var(--laiton)}
  .zone .z-main{stroke-dashoffset:0}
  .ticker .piste{animation:none;flex-wrap:wrap;width:auto}
  .ticker ul+ul{display:none}
  .hero h1 .l span,.rise{transform:none;opacity:1}
}

/* ---------- même chose, à la demande du visiteur (bouton du pied de page) */
html.calme{scroll-behavior:auto}
html.calme *,html.calme *::before,html.calme *::after{animation-duration:.001ms!important;animation-delay:0s!important;animation-iteration-count:1!important;transition-duration:.001ms!important;transition-delay:0s!important}
html.calme.js [data-r],html.calme.js .m>span,html.calme.js .arme .vitrine img,html.calme.js .coll .vitrine .pile img{opacity:1!important;transform:none!important;filter:none}
html.calme.js .jauge i{width:calc(var(--v)*100%)}
html.calme.js .paliers i{background:rgba(233,72,58,.78)}
html.calme.js .paliers i:last-child{background:var(--laiton)}
html.calme .zone .z-main{stroke-dashoffset:0}
html.calme .ticker .piste{animation:none;flex-wrap:wrap;width:auto}
html.calme .ticker ul+ul{display:none}
html.calme .hero h1 .l span,html.calme .rise{transform:none;opacity:1}