.demo-bar{background:#0b0b0d;color:#f2f2f2;font:13px/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;border-bottom:1px solid #2a2a30;position:relative;z-index:40}
.demo-bar>div{width:min(1200px,100%);margin:0 auto;padding:8px 16px;display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center;justify-content:space-between}
.demo-bar b{color:#ffd23f}.demo-bar nav{display:flex;gap:6px;flex-wrap:wrap}
.demo-bar nav a{padding:4px 10px;border-radius:999px;border:1px solid #3a3a42;text-decoration:none;color:#f2f2f2;font-weight:600;font-size:12.5px}
.demo-bar nav a[aria-current]{background:#ffd23f;color:#111;border-color:#ffd23f}
.gate{position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.82);display:grid;place-items:center;padding:16px;backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)}
.gate[hidden]{display:none}
.gate .gbox{max-width:440px;width:100%;border-radius:18px;padding:28px;text-align:center;display:grid;gap:14px;font-family:system-ui,-apple-system,"Segoe UI",sans-serif}
.gate .age{margin:0 auto;width:72px;height:72px;border-radius:50%;border:4px solid #ff5d5d;display:grid;place-items:center;font:900 24px system-ui;color:#ff5d5d}
.gate h2{margin:0;font-size:28px}.gate p{margin:0;opacity:.8}
.gate button,.gate a{min-height:50px;border-radius:12px;font:700 16px system-ui;cursor:pointer;text-decoration:none;display:grid;place-items:center}
.toast{position:fixed;left:50%;bottom:96px;transform:translateX(-50%) translateY(20px);padding:10px 16px;border-radius:999px;font:700 14px system-ui;opacity:0;transition:.2s;pointer-events:none;z-index:120;background:#111;color:#fff;border:1px solid #444}
.toast.on{opacity:1;transform:translateX(-50%) translateY(0)}
.ph{display:inline-block;border:1px dashed currentColor;border-radius:6px;padding:0 6px;font-size:.78em;font-weight:700;letter-spacing:0;vertical-align:middle;opacity:.9;font-family:system-ui,sans-serif;text-transform:none}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;animation-iteration-count:1!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}

:root{--bg:#020814;--tx:#eef6ff;--mut:#93a6c4;--a1:#c2ff3d;--a2:#2ee6ff;--ln:rgba(140,190,255,.16);--ln2:rgba(194,255,61,.45);--glass:rgba(3,12,28,.6);--glass2:rgba(255,255,255,.035);--glass-solid:rgba(4,14,32,.97);--th:#061226;--hud-bg:rgba(2,8,20,.88);--on:#06110a;--btn-grad:linear-gradient(100deg,#c2ff3d,#7dffb0 55%,#2ee6ff);--h1-grad:linear-gradient(180deg,#ffffff 35%,#c2ff3d 120%);--fallback:radial-gradient(70% 50% at 50% 100%,rgba(46,230,255,.25),transparent 60%),radial-gradient(40% 40% at 50% 60%,rgba(194,255,61,.2),transparent 60%),#020814;--gr:#7dff6a;--rd:#ff5470;--r:4px;--r-lg:8px;--dot-r:2px;--hd:'Big Shoulders Display',Impact,sans-serif;--bd:'Inter',system-ui,sans-serif;--mono:'JetBrains Mono',ui-monospace,monospace;--hw:900;--hls:.005em;--h1:clamp(66px,11.5vw,176px);--h2:clamp(42px,5.6vw,78px)}
*{box-sizing:border-box}html{scroll-behavior:auto}
body{margin:0;background:var(--bg);color:var(--tx);font-family:var(--bd);font-size:16px;line-height:1.6;overflow-x:hidden}
a{color:inherit}
#gl{position:fixed;inset:0;width:100%;height:100%;z-index:0;display:block}
.fallback{position:fixed;inset:0;z-index:0;background:var(--fallback);display:none}
.no-gl .fallback{display:block}.no-gl #gl{display:none}
.vignette{position:fixed;inset:0;z-index:1;pointer-events:none;background:radial-gradient(120% 90% at 50% 50%,transparent 55%,rgba(0,0,0,.6))}
.grain{position:fixed;inset:-50%;z-index:1;pointer-events:none;opacity:.07;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='200' height='200'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='200' height='200' filter='url(%23n)'/%3E%3C/svg%3E");animation:gr 1s steps(4) infinite}
@keyframes gr{25%{transform:translate(-3%,2%)}50%{transform:translate(2%,-3%)}75%{transform:translate(-2%,-1%)}}
.ui{position:relative;z-index:2}
/* intro */
.intro{position:fixed;inset:0;z-index:90;background:var(--bg);display:grid;place-items:center;transition:clip-path 1.1s cubic-bezier(.77,0,.18,1);clip-path:inset(0 0 0 0)}
.intro.out{clip-path:inset(0 0 100% 0)}
.intro .ld{display:grid;gap:14px;justify-items:center;font:600 12px var(--mono);letter-spacing:.32em;color:var(--mut);text-transform:uppercase}
.intro .ld svg{width:120px;color:var(--a1);filter:drop-shadow(0 0 18px var(--a1))}
.intro .pc{font:800 clamp(56px,10vw,120px)/1 var(--hd);color:var(--tx);letter-spacing:-.03em}
.intro .track{width:220px;height:2px;background:var(--ln)}.intro .track i{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--a1),var(--a2))}
/* curseur */
.cur,.cur-r{position:fixed;left:0;top:0;z-index:95;pointer-events:none;border-radius:50%;transform:translate(-50%,-50%)}
.cur{width:6px;height:6px;background:var(--a1)}
.cur-r{width:38px;height:38px;border:1px solid var(--a1);transition:width .25s,height .25s,border-color .25s,background .25s;mix-blend-mode:screen}
.cur-r.on{width:70px;height:70px;background:color-mix(in srgb,var(--a1) 14%,transparent)}
@media (pointer:coarse){.cur,.cur-r{display:none}}
/* HUD */
.hud{position:fixed;top:0;left:0;right:0;z-index:20;pointer-events:none}
.hud .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px 20px;font:500 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut);pointer-events:auto;background:linear-gradient(var(--hud-bg),transparent)}
.hud .logo{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font:700 14px var(--hd);letter-spacing:.14em}
.hud .logo svg{width:30px;color:var(--a1);filter:drop-shadow(0 0 8px var(--a1))}
.hud .sect{display:none}.hud .sect b{color:var(--a1)}
@media(min-width:700px){.hud .sect{display:block}}
.hud .go{pointer-events:auto;border:1px solid var(--ln2);color:var(--tx);text-decoration:none;padding:10px 16px;font:600 11.5px var(--mono);letter-spacing:.14em;background:color-mix(in srgb,var(--a1) 10%,transparent);border-radius:var(--r)}
.prog{position:fixed;left:0;top:0;height:2px;z-index:21;background:linear-gradient(90deg,var(--a1),var(--a2));width:0}
.dots{position:fixed;right:18px;top:50%;transform:translateY(-50%);z-index:20;display:none;flex-direction:column;gap:16px}
@media(min-width:900px){.dots{display:flex}}
.dots a{width:9px;height:9px;border:1px solid var(--ln2);border-radius:var(--dot-r);display:block;transition:.3s;position:relative}
.dots a.on{background:var(--a1);box-shadow:0 0 14px var(--a1);transform:scale(1.3)}
.dots a::after{content:attr(data-t);position:absolute;right:20px;top:50%;transform:translateY(-50%);font:500 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);white-space:nowrap;opacity:0;transition:.3s}
.dots a:hover::after,.dots a.on::after{opacity:1}
/* sections */
.sec{min-height:100vh;display:flex;align-items:center;padding:120px 20px 100px}
.sec>.in{width:min(1240px,100%);margin:0 auto;display:flex}
.sec.r>.in{justify-content:flex-end}.sec.c>.in{justify-content:center}
.panel{width:min(560px,100%);background:var(--glass);border:1px solid var(--ln);padding:32px;position:relative;border-radius:var(--r-lg);backdrop-filter:blur(18px) saturate(150%);-webkit-backdrop-filter:blur(18px) saturate(150%);box-shadow:0 30px 80px -40px rgba(0,0,0,.8)}
.panel::before{content:"";position:absolute;inset:0;border-radius:inherit;padding:1px;background:linear-gradient(135deg,var(--a1),transparent 35%,transparent 65%,var(--a2));-webkit-mask:linear-gradient(#000 0 0) content-box,linear-gradient(#000 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}
.panel.wide{width:min(1000px,100%)}
.tag{font:600 11.5px var(--mono);letter-spacing:.24em;text-transform:uppercase;color:var(--a1);display:flex;align-items:center;gap:10px}
.tag::before{content:"";width:24px;height:1px;background:var(--a1);box-shadow:0 0 8px var(--a1)}
h1,h2{font-family:var(--hd);font-weight:var(--hw);letter-spacing:var(--hls);margin:14px 0;line-height:.95}
.hero{background:none;border:0;backdrop-filter:none;-webkit-backdrop-filter:none;padding:0;width:min(900px,100%);box-shadow:none}
.hero::before{display:none}
.hero h1{font-size:var(--h1);white-space:nowrap}
.hero h1 .w>span{background:var(--h1-grad);-webkit-background-clip:text;background-clip:text;color:transparent;padding-right:.04em}
h2{font-size:var(--h2,clamp(30px,4vw,52px))}
.w{display:inline-block;overflow:hidden;vertical-align:top;padding:0 0 .12em;margin-bottom:-.12em}.w>span{display:inline-block;transform:translateY(105%);transition:transform .9s cubic-bezier(.2,.8,.2,1)}
.in-view .w>span{transform:none}
.lead{color:var(--mut);font-size:18.5px;max-width:34em;margin:0 0 28px}
@media(max-width:760px){.hero h1{font-size:var(--h1m,var(--h1))}.hero .lead,.hero .tag,.stats{text-shadow:0 1px 14px rgba(0,0,0,.95),0 0 3px rgba(0,0,0,.8)}}
.btns{display:flex;gap:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:10px;min-height:56px;padding:0 26px;font:700 14px var(--hd);letter-spacing:.08em;text-transform:uppercase;text-decoration:none;color:var(--tx);border:1px solid var(--ln2);background:color-mix(in srgb,var(--a1) 8%,transparent);cursor:pointer;border-radius:var(--r);transition:background .25s,box-shadow .25s;will-change:transform}
.btn:hover{background:color-mix(in srgb,var(--a1) 18%,transparent);box-shadow:0 0 34px -6px var(--a1)}
.btn.prim{background:var(--btn-grad);color:var(--on);border:0}
.btn:focus-visible,a:focus-visible,button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:2px solid var(--a1);outline-offset:3px}
.scroll{margin-top:46px;font:500 11px var(--mono);letter-spacing:.26em;color:var(--mut);display:flex;align-items:center;gap:12px;text-transform:uppercase}
.scroll i{width:1px;height:48px;background:linear-gradient(var(--a1),transparent);animation:sc 2s infinite}
@keyframes sc{0%{transform:scaleY(0);transform-origin:top}50%{transform:scaleY(1);transform-origin:top}51%{transform-origin:bottom}100%{transform:scaleY(0);transform-origin:bottom}}
.stats{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-top:32px;max-width:580px}
.stats div{border-left:1px solid var(--ln2);padding:4px 12px}
.stats b{display:block;font:700 20px var(--hd)}
.stats span{font:11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut)}
.seg{display:inline-flex;border:1px solid var(--ln);margin:6px 0 18px;border-radius:var(--r);overflow:hidden}
.seg button{border:0;background:none;color:var(--mut);font:600 11.5px var(--mono);letter-spacing:.14em;padding:10px 14px;cursor:pointer}
.seg button[aria-pressed=true]{background:var(--a1);color:var(--on)}
.offers{display:grid;gap:14px}
@media(min-width:700px){.offers{grid-template-columns:1fr 1fr}}
.off{border:1px solid var(--ln);padding:22px;background:var(--glass2);display:flex;flex-direction:column;gap:10px;border-radius:var(--r)}
.off.vip{border-color:var(--a2);box-shadow:0 0 50px -20px var(--a2) inset}
.off h3{margin:0;font:700 22px var(--hd)}
.off .px{font:800 34px var(--hd);background:linear-gradient(90deg,var(--a1),var(--a2));-webkit-background-clip:text;background-clip:text;color:transparent}
.off .px small{font:500 12px var(--mono);-webkit-text-fill-color:var(--mut)}
.off ul{margin:0;padding:0;list-style:none;display:grid;gap:6px;font-size:15px;color:var(--mut)}
.off li::before{content:"◆ ";color:var(--a1);font-size:10px}
.off .btn{margin-top:auto}
.notice{font:12.5px var(--mono);color:var(--a2);border:1px dashed color-mix(in srgb,var(--a2) 60%,transparent);padding:9px 12px;margin:0 0 12px;border-radius:var(--r)}
.kpis{display:grid;grid-template-columns:repeat(2,1fr);gap:8px;margin-bottom:12px}
@media(min-width:700px){.kpis{grid-template-columns:repeat(4,1fr)}}
.kpis div{border:1px solid var(--ln);padding:12px;background:var(--glass2);border-radius:var(--r)}
.kpis b{display:block;font:800 24px var(--hd)}
.kpis span{font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.filters{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
.filters label{display:grid;gap:3px;font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.filters select{min-height:42px;border:1px solid var(--ln2);background:var(--glass2);color:var(--tx);font:600 14px var(--mono);padding:0 10px;border-radius:var(--r)}
.tablewrap{overflow:auto;border:1px solid var(--ln);max-height:290px;border-radius:var(--r)}
table{width:100%;border-collapse:collapse;min-width:560px;font:13px var(--mono)}
th{position:sticky;top:0;background:var(--th);text-align:left;font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--a1);padding:9px;border-bottom:1px solid var(--ln2)}
td{padding:8px 9px;border-bottom:1px solid var(--ln)}
.res{font-weight:700;font-size:11px}.res.g{color:var(--gr)}.res.p{color:var(--rd)}.res.r{color:var(--mut)}
.legend{font:11px var(--mono);color:var(--mut);margin-top:10px}
.legend i{display:inline-block;width:9px;height:9px;margin:0 6px 0 12px;vertical-align:-1px;border-radius:2px}
.proto{list-style:none;padding:0;margin:0 0 20px;display:grid;gap:10px;counter-reset:p}
.proto li{counter-increment:p;display:flex;gap:14px;align-items:baseline;border-bottom:1px solid var(--ln);padding-bottom:10px}
.proto li::before{content:"0" counter(p);font:800 22px var(--hd);color:var(--a1)}
.faq details{border-bottom:1px solid var(--ln)}
.faq summary{cursor:pointer;list-style:none;padding:12px 0;font-weight:600;display:flex;gap:10px}
.faq summary::-webkit-details-marker{display:none}
.faq summary::before{content:"▸";color:var(--a2);transition:.2s}
.faq details[open] summary::before{transform:rotate(90deg)}
.faq p{margin:0 0 12px 20px;color:var(--mut);font-size:14.5px}
.grid2{display:grid;gap:22px}
@media(min-width:800px){.grid2{grid-template-columns:1fr 1fr}}
.links a{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid var(--ln);text-decoration:none;font:600 16px var(--hd)}
.links a span{font:12px var(--mono);color:var(--mut)}.links a:hover{color:var(--a1)}
form.f{display:grid;gap:10px}
form.f label{display:grid;gap:4px;font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
form.f input,form.f textarea{background:var(--glass2);border:1px solid var(--ln);color:var(--tx);font:15px var(--bd);padding:11px;border-radius:var(--r)}
form.f textarea{min-height:80px;resize:vertical}
.ok{display:none;color:var(--gr);font:13px var(--mono)}
.qrrow{display:flex;gap:14px;align-items:center;flex-wrap:wrap;margin-top:12px}
.qrrow .qr{width:110px;background:#fff;padding:6px;border-radius:8px}
.copy{border:1px solid var(--ln2);background:var(--glass2);color:var(--tx);font:600 11.5px var(--mono);letter-spacing:.1em;padding:9px 12px;cursor:pointer;display:block;margin-bottom:6px;border-radius:var(--r)}
.jr{display:flex;gap:14px;align-items:flex-start;border:1px solid color-mix(in srgb,var(--rd) 60%,transparent);padding:14px;margin-top:20px;font-size:13.5px;background:color-mix(in srgb,var(--rd) 7%,transparent);border-radius:var(--r)}
.jr .age{flex:none;font:800 14px var(--hd);color:var(--rd);border:1px solid var(--rd);padding:6px 8px;border-radius:6px}
.jr p{margin:0}
.foot{font:12px var(--mono);color:var(--mut);margin-top:16px;display:flex;justify-content:space-between;flex-wrap:wrap;gap:8px}
.mbar{position:fixed;left:0;right:0;bottom:0;z-index:25;display:flex;gap:8px;padding:10px 12px calc(10px + env(safe-area-inset-bottom,0px));background:linear-gradient(transparent,var(--bg) 35%)}
.mbar .btn{flex:1;min-height:52px;padding:0 10px;font-size:12px}
@media(min-width:900px){.mbar{display:none}}
.note{font:12px var(--mono);color:var(--mut)}
.demo-bar{position:relative;z-index:30}
.hero h1{text-transform:uppercase;line-height:.82;letter-spacing:.01em}
h2{text-transform:uppercase;line-height:.88}
.btn{font-family:var(--mono);letter-spacing:.12em}
.off h3,.off .px,.stats b,.kpis b{font-family:var(--hd);letter-spacing:.02em}
.off .px{font-size:44px}.kpis b{font-size:32px}.stats b{font-size:26px}
.panel::before{background:linear-gradient(135deg,var(--a1),transparent 30%,transparent 70%,var(--a2))}
.tag{color:var(--a1)}

html{scroll-padding-top:80px}
[hidden]{display:none!important}
.w{padding-top:.14em!important;margin-top:-.14em}
.tbl-wide table{min-width:880px}
.sheet .top .burger{font-size:20px;color:var(--tx)}
body.lock{overflow:hidden}
#gl{opacity:0;transition:opacity 1.4s ease}#gl.on{opacity:1}
.veil{position:fixed;inset:0;z-index:1;pointer-events:none;background:linear-gradient(180deg,rgba(2,8,20,calc(var(--veil) * .35)) 0%,rgba(2,8,20,var(--veil)) 55%,rgba(2,8,20,calc(var(--veil) + .1)))}
.skip{position:absolute;left:-999px;top:8px;z-index:200;background:var(--a1);color:var(--on);padding:10px 14px;border-radius:4px;font-weight:700}.skip:focus{left:8px}
/* en-tête */
header.nav{position:sticky;top:0;z-index:30;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}
header.nav.scrolled{background:rgba(2,8,20,.82);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);border-bottom-color:var(--ln)}
.nav .in{width:min(1280px,100%);margin:0 auto;display:flex;align-items:center;gap:16px;padding:12px 20px}
.nav .logo{display:flex;align-items:center;gap:10px;color:var(--tx);text-decoration:none;font:800 20px var(--hd);letter-spacing:.06em}
.logo svg.mark{width:60px;height:auto;color:var(--a1);filter:drop-shadow(0 0 8px rgba(194,255,61,.5))}
.wm{font:700 10.5px var(--mono);letter-spacing:.34em;color:var(--tx);opacity:.85}
.hero h1{white-space:normal!important;line-height:.86;font-size:clamp(54px,7.4vw,122px)!important}
.intro .ld svg{width:180px}
.score{font:800 15px var(--mono);color:var(--tx)}
.testband{border:1px solid var(--a2);background:rgba(46,230,255,.07);border-radius:var(--r);padding:12px 14px;font-size:14px;color:var(--tx)}
.nav .links{display:none;gap:2px;margin-left:12px}
.nav .links a{padding:9px 12px;font:600 12px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut);text-decoration:none;border-radius:var(--r)}
.nav .links a:hover{color:var(--tx)}.nav .links a[aria-current]{color:var(--on);background:var(--a1)}
.nav .act{margin-left:auto;display:flex;gap:8px;align-items:center}
.ico{width:44px;height:44px;display:grid;place-items:center;border:1px solid var(--ln2);border-radius:var(--r);color:var(--tx);background:rgba(194,255,61,.06)}
.ico svg{width:20px}
.btn.sm{min-height:44px;padding:0 16px;font-size:12px}
.burger{width:44px;height:44px;border:1px solid var(--ln2);border-radius:var(--r);background:none;display:grid;place-content:center;gap:6px;cursor:pointer}
.burger i{display:block;width:20px;height:2px;background:var(--tx)}
@media(min-width:1060px){.nav .links{display:flex}.burger{display:none}}
@media(min-width:1060px) and (max-width:1320px){.nav .links{margin-left:6px}.nav .links a{padding:9px 7px;letter-spacing:.08em;font-size:11.5px}.nav .in{gap:10px}}
@media(max-width:520px){.nav .act .btn.sm{display:none}}
.sheet{position:fixed;inset:0;z-index:60;background:rgba(2,8,20,.97);backdrop-filter:blur(10px);display:flex;flex-direction:column;padding:16px 20px calc(24px + env(safe-area-inset-bottom,0px));overflow:auto}
.sheet[hidden]{display:none}
.sheet .top{display:flex;justify-content:space-between;align-items:center;margin-bottom:18px}
.sheet nav{display:grid;gap:2px}
.sheet nav a{font:900 40px/1.1 var(--hd);text-transform:uppercase;color:var(--tx);text-decoration:none;padding:6px 0;border-bottom:1px solid var(--ln)}
.sheet nav a[aria-current]{color:var(--a1)}
.sheet .btns{margin-top:22px}.sheet .btns .btn{flex:1}
/* mise en page des pages intérieures */
.wrap{width:min(1200px,100%);margin:0 auto}
.sec.blk{min-height:0;display:block;padding:26px 20px}
.pg-hero{min-height:56vh;display:flex;align-items:flex-end;padding:90px 20px 30px}
.pg-hero .wrap>*{max-width:860px}
.pg-hero h1{font:900 clamp(56px,10vw,140px)/.84 var(--hd);text-transform:uppercase;margin:14px 0;letter-spacing:.005em}
.pg-hero h1 .w>span{background:var(--h1-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
.pg-hero .lead{color:#c3cfdf;text-shadow:0 1px 14px rgba(0,0,0,.9)}
.crumbs{font:600 11.5px var(--mono);letter-spacing:.16em;text-transform:uppercase;color:var(--mut)}
.crumbs a{color:var(--mut);text-decoration:none}.crumbs a:hover{color:var(--a1)}
.grid{display:grid;gap:16px}
@media(min-width:800px){.g2{grid-template-columns:1fr 1fr}.g21{grid-template-columns:2fr 1fr}.g12{grid-template-columns:1fr 1.4fr}}
@media(min-width:900px){.g3{grid-template-columns:repeat(3,1fr)}.g4{grid-template-columns:repeat(4,1fr)}}
.card{background:var(--glass);border:1px solid var(--ln);border-radius:var(--r-lg);padding:24px;backdrop-filter:blur(18px) saturate(140%);-webkit-backdrop-filter:blur(18px) saturate(140%);position:relative}
.card h2{font:900 clamp(30px,3.6vw,46px)/.92 var(--hd);text-transform:uppercase;margin:10px 0 14px}
.card h3{font:800 24px/1 var(--hd);text-transform:uppercase;letter-spacing:.02em;margin:0 0 10px}
.card p{color:var(--mut);margin:0 0 12px}
.card.hl{border-color:var(--ln2);box-shadow:0 0 60px -30px var(--a1) inset}
.more{display:inline-flex;align-items:center;gap:8px;font:700 12.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--a1);text-decoration:none;margin-top:14px}
.more:hover{text-decoration:underline}
.badge{display:inline-flex;align-items:center;gap:6px;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:5px 9px;border-radius:3px;border:1px solid var(--ln2);color:var(--tx)}
.badge.g{color:#07140a;background:var(--gr);border-color:var(--gr)}.badge.p{color:#fff;background:var(--rd);border-color:var(--rd)}
.badge.r{color:var(--tx);background:#33405a;border-color:#33405a}.badge.a{color:var(--on);background:var(--a2);border-color:var(--a2)}
.badge.l{color:var(--on);background:var(--a1);border-color:var(--a1);animation:pulse 1.6s infinite}.badge.e{color:var(--tx);border-color:var(--mut)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(194,255,61,.55)}70%{box-shadow:0 0 0 8px rgba(194,255,61,0)}}
.badge.vip{color:#ff8be8;border-color:#ff4fd8}.badge.gratuit{color:var(--a2);border-color:var(--a2)}
.dots5{display:inline-flex;gap:4px;vertical-align:middle}.dots5 i{width:9px;height:9px;border-radius:2px;background:rgba(255,255,255,.14)}.dots5 i.on{background:var(--a1);box-shadow:0 0 8px var(--a1)}
.reveal{opacity:0;transform:translateY(26px);transition:opacity .8s ease,transform .8s cubic-bezier(.2,.8,.2,1)}.reveal.in-view{opacity:1;transform:none}
.ph{color:var(--a1)}
.k5{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
@media(min-width:700px){.k5{grid-template-columns:repeat(5,1fr)}}
.k5 div{border:1px solid var(--ln);padding:14px;background:var(--glass);border-radius:var(--r);backdrop-filter:blur(12px)}
.k5 b{display:block;font:900 34px/1 var(--hd)}.k5 span{font:10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.k5 b.pos{color:var(--gr)}.k5 b.neg{color:var(--rd)}
.field{display:grid;gap:5px;font:600 10.5px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.field input,.field select,.field textarea{background:rgba(255,255,255,.04);border:1px solid var(--ln2);color:var(--tx);font:500 16px var(--bd);padding:12px;border-radius:var(--r);letter-spacing:0;text-transform:none;min-height:48px}
.field textarea{min-height:110px;resize:vertical}
.field small{font:12px var(--bd);letter-spacing:0;text-transform:none;color:var(--mut)}
.field .err{color:var(--rd);display:none}.field.bad .err{display:block}.field.bad input{border-color:var(--rd)}
.chk{display:flex;gap:10px;align-items:flex-start;font-size:14.5px;color:var(--tx);cursor:pointer;line-height:1.45}
.chk input{width:22px;height:22px;margin:1px 0 0;accent-color:#c2ff3d;flex:none}
.chips{display:flex;gap:8px;flex-wrap:wrap}
.chips button{border:1px solid var(--ln2);background:none;color:var(--mut);font:600 11.5px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:10px 14px;border-radius:var(--r);cursor:pointer;min-height:44px}
.chips button[aria-pressed=true]{background:var(--a1);color:var(--on);border-color:var(--a1)}
tr[data-id]{cursor:pointer}tr[data-id]:hover td{background:rgba(194,255,61,.06)}
/* ligne entière en vert (pari passé) ou rouge (non passé), annulés compris */
tr.is-g>td{color:var(--gr)}tr.is-p>td{color:var(--rd)}tr.is-g>td{background:rgba(125,255,106,.07)}tr.is-p>td{background:rgba(255,84,112,.07)}
.pager{display:flex;gap:8px;align-items:center;justify-content:space-between;margin-top:12px;font:12px var(--mono);color:var(--mut)}
.pager button{min-height:44px}
.modal{position:fixed;inset:0;z-index:90;background:rgba(0,0,0,.72);display:grid;place-items:center;padding:16px;backdrop-filter:blur(6px)}
.modal[hidden]{display:none}
.modal .card{max-width:480px;width:100%;background:var(--glass-solid)}
.switch{position:relative;width:52px;height:30px;flex:none}.switch input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;position:absolute;z-index:1}
.switch i{position:absolute;inset:0;border-radius:99px;background:#26324a;transition:.2s}.switch i::after{content:"";position:absolute;left:4px;top:4px;width:22px;height:22px;border-radius:50%;background:#fff;transition:.2s}
.switch input:checked+i{background:var(--a1)}.switch input:checked+i::after{transform:translateX(22px);background:var(--on)}
.switch input:focus-visible+i{outline:2px solid var(--a1);outline-offset:3px}
.row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--ln)}
.row:last-child{border-bottom:0}.row small{display:block;color:var(--mut);font-size:13px}
.lockbox{position:relative}.lockbox .blur{filter:blur(7px);user-select:none;pointer-events:none}
.lockbox .over{position:absolute;inset:0;display:grid;place-items:center;text-align:center;padding:16px}
.lockbox .over>div{background:var(--glass-solid);border:1px solid #ff4fd8;padding:20px;border-radius:var(--r-lg);max-width:360px}
.tg{background:#17212b;border-radius:14px;padding:14px;font:15px/1.5 system-ui,-apple-system,"Segoe UI",sans-serif;color:#e9eef3;max-width:420px;box-shadow:0 20px 50px -20px rgba(0,0,0,.8)}
.tg .hd{display:flex;align-items:center;gap:10px;margin-bottom:10px;font-weight:700}
.tg .av{width:38px;height:38px;border-radius:50%;background:#0b1626;display:grid;place-items:center}.tg .av svg{width:24px;color:#c2ff3d}
.tg .bub{background:#2b5278;border-radius:12px 12px 12px 4px;padding:10px 12px}
.tg .bub+.bub{margin-top:6px}.tg .tm{font-size:11px;opacity:.6;text-align:right}
.steps{display:flex;gap:6px;margin-bottom:18px}
.steps span{flex:1;font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;color:var(--mut);border-top:3px solid #26324a;padding-top:8px}
.steps span.on{color:var(--a1);border-color:var(--a1)}.steps span.done{color:var(--tx);border-color:var(--gr)}
.radio-cards{display:grid;gap:10px}
.radio-cards label{display:flex;justify-content:space-between;align-items:center;gap:12px;border:1px solid var(--ln2);border-radius:var(--r);padding:16px;cursor:pointer;background:rgba(255,255,255,.03)}
.radio-cards input{accent-color:#c2ff3d;width:20px;height:20px}
.radio-cards label:has(input:checked){border-color:var(--a1);background:rgba(194,255,61,.08)}
.radio-cards b{font:800 22px var(--hd);text-transform:uppercase}.radio-cards small{display:block;color:var(--mut)}
.chart{width:100%;height:auto;display:block;touch-action:pan-y}
.chart text{font:11px var(--mono);fill:var(--mut)}
.cd{font:700 13px var(--mono);color:var(--a1);letter-spacing:.06em}
.pcard .pc-top{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;font:12px var(--mono);color:var(--mut);letter-spacing:.06em}
.pcard h3{font:900 clamp(30px,3.4vw,44px)/.95 var(--hd);text-transform:uppercase;margin:14px 0}
.pc-row{display:grid;grid-template-columns:repeat(2,1fr);gap:10px;margin-bottom:14px}
@media(min-width:600px){.pc-row{grid-template-columns:repeat(4,1fr)}}
.pc-row div{border:1px solid var(--ln);border-radius:var(--r);padding:10px 12px;background:rgba(255,255,255,.03)}
.pc-row small{display:block;font:10px var(--mono);letter-spacing:.14em;text-transform:uppercase;color:var(--mut)}
.pc-row b{font:800 20px var(--hd)}
.quote{border-left:3px dashed var(--ln2);padding:4px 0 4px 16px;color:var(--mut)}
.stars{display:inline-flex;gap:2px}.stars button{background:none;border:0;font-size:30px;line-height:1;color:#3a4660;cursor:pointer;padding:4px;min-width:44px;min-height:44px}
.stars button.on{color:var(--a1)}
.tabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:16px}
.tabs button{border:1px solid var(--ln2);background:none;color:var(--mut);font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;padding:12px 16px;border-radius:var(--r);cursor:pointer}
.tabs button[aria-selected=true]{background:var(--a1);color:var(--on);border-color:var(--a1)}
.legal h2{font:900 30px/1 var(--hd);text-transform:uppercase;margin:26px 0 10px}.legal h2:first-child{margin-top:0}
.legal p,.legal li{color:#c3cfdf;font-size:15.5px}.legal ul{padding-left:20px}
.callout{border:1px solid var(--a2);background:rgba(46,230,255,.06);border-radius:var(--r);padding:14px 16px;font-size:14.5px;color:var(--tx)}
.callout.warn{border-color:var(--rd);background:rgba(255,84,112,.07)}
.big404{font:900 clamp(120px,26vw,320px)/.8 var(--hd);background:var(--h1-grad);-webkit-background-clip:text;background-clip:text;color:transparent}
/* pied de page */
footer.ft{position:relative;z-index:2;padding:40px 20px calc(110px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--ln);background:linear-gradient(transparent,rgba(2,8,20,.92) 30%)}
@media(min-width:900px){footer.ft{padding-bottom:40px}}
.ft .top{display:flex;flex-wrap:wrap;gap:16px;justify-content:space-between;align-items:center;margin-bottom:24px}
.ft .top p{color:var(--mut);margin:0;max-width:420px}
.ft .soc{display:flex;gap:8px;flex-wrap:wrap}.ft .soc a{font:600 12px var(--mono);letter-spacing:.08em;color:var(--tx);text-decoration:none;border:1px solid var(--ln2);padding:10px 12px;border-radius:var(--r)}
.ft .cols{display:grid;grid-template-columns:repeat(2,1fr);gap:20px}
@media(min-width:800px){.ft .cols{grid-template-columns:repeat(4,1fr)}}
.ft h4{font:700 11px var(--mono);letter-spacing:.18em;text-transform:uppercase;color:var(--a1);margin:0 0 10px}
.ft .cols a{display:block;color:var(--mut);text-decoration:none;padding:6px 0;font-size:14.5px}.ft .cols a:hover{color:var(--tx)}
.howto{margin:12px 0 18px;padding-left:22px;display:grid;gap:8px;color:#c3cfdf;font-size:15px}.howto b{color:var(--tx)}
.copyv{display:flex;gap:8px;align-items:center;flex-wrap:wrap;justify-content:flex-end;text-align:right;min-width:0}
.copyv code{font:600 14px var(--mono);overflow-wrap:anywhere;color:var(--tx)}
@media (max-width:640px){.row:has(>.copyv){flex-direction:column;align-items:stretch;gap:8px}.copyv{justify-content:space-between;text-align:left}}
td code{font:600 12.5px var(--mono)}td small{color:var(--mut)}
[data-demo-only][hidden]{display:none!important}

/* réseaux en hologrammes : tuile qui flotte au-dessus d'un projecteur, lueur de marque, reflet irisé, inclinaison au survol */
.holo-soc{display:flex;flex-wrap:wrap;gap:14px 18px}
.hsoc{display:flex;flex-direction:column;align-items:center;gap:10px;text-decoration:none;color:var(--tx);perspective:500px;min-width:64px}
.hsoc .hx{position:relative;width:58px;height:58px;display:grid;place-items:center;transform-style:preserve-3d;
  transform:rotateX(calc(14deg + var(--ry,0deg))) rotateY(var(--rx,0deg)) translateZ(0);transition:transform .25s ease;animation:hfloat 4.2s ease-in-out infinite}
.hsoc:nth-child(2) .hx{animation-delay:-.8s}.hsoc:nth-child(3) .hx{animation-delay:-1.6s}.hsoc:nth-child(4) .hx{animation-delay:-2.4s}.hsoc:nth-child(5) .hx{animation-delay:-3.2s}
.hsoc .hx::before{content:"";position:absolute;inset:0;border-radius:14px;border:1px solid color-mix(in srgb,var(--hc) 70%,transparent);
  background:linear-gradient(160deg,color-mix(in srgb,var(--hc) 22%,transparent),rgba(2,8,20,.35) 60%);box-shadow:0 0 22px -4px var(--hc),inset 0 0 18px -6px var(--hc);transform:translateZ(-6px)}
.hsoc .hx::after{content:"";position:absolute;inset:0;border-radius:14px;pointer-events:none;mix-blend-mode:screen;opacity:.55;
  background:repeating-linear-gradient(0deg,rgba(255,255,255,.12) 0 1px,transparent 1px 3px),linear-gradient(115deg,transparent 30%,rgba(255,255,255,.35) 45%,transparent 60%);
  background-size:100% 100%,250% 100%;animation:hsheen 3.6s linear infinite}
.hsoc svg{position:relative;width:28px;height:28px;color:var(--hc);filter:drop-shadow(0 0 6px var(--hc)) drop-shadow(0 0 14px var(--hc));transform:translateZ(14px);animation:hflick 5s steps(1) infinite}
.hsoc .hb{position:absolute;left:50%;top:100%;width:46px;height:30px;transform:translate(-50%,-6px) rotateX(70deg);border-radius:50%;
  background:radial-gradient(closest-side,color-mix(in srgb,var(--hc) 55%,transparent),transparent);filter:blur(2px);opacity:.8}
.hsoc .hs{position:absolute;left:50%;bottom:-16px;width:2px;height:16px;transform:translateX(-50%);background:linear-gradient(var(--hc),transparent);opacity:.6}
.hsoc .hn{font:700 11px var(--mono);letter-spacing:.12em;text-transform:uppercase;text-align:center;margin-top:8px}
.hsoc .hn small{display:block;font:500 10.5px var(--mono);letter-spacing:.04em;text-transform:none;color:var(--mut);margin-top:3px}
.hsoc:hover .hx,.hsoc:focus-visible .hx{animation-play-state:paused}.hsoc:hover svg{filter:drop-shadow(0 0 8px var(--hc)) drop-shadow(0 0 22px var(--hc))}
.hsoc:focus-visible{outline:2px solid var(--a1);outline-offset:6px;border-radius:8px}
@keyframes hfloat{0%,100%{translate:0 0}50%{translate:0 -5px}}
@keyframes hsheen{0%{background-position:0 0,130% 0}100%{background-position:0 0,-130% 0}}
@keyframes hflick{0%,92%,100%{opacity:1}93%{opacity:.55}95%{opacity:1}96%{opacity:.7}}
@media(prefers-reduced-motion:reduce){.hsoc .hx,.hsoc .hx::after,.hsoc svg{animation:none}}
.ft .holo-soc{gap:10px 14px}.ft .hsoc{min-width:56px}
.reseaux-holo{padding:18px 4px 6px}
/* ---- lisibilité sur la scène 3D : voile local derrière les titres, verre plus dense, petits textes plus clairs.
   La scène, les hologrammes et la profondeur ne changent pas : seul ce qui est derrière le texte est assombri. ---- */
:root{--mut:#b4c2d8;--glass:rgba(3,12,28,.78)}
.pg-hero{position:relative;overflow:hidden}
.pg-hero .wrap{position:relative}
.pg-hero .wrap::before,.panel.hero::before{content:"";position:absolute;inset:-40px -24px -32px -24px;z-index:-1;pointer-events:none;
  background:radial-gradient(75% 85% at 28% 58%,rgba(2,8,20,.8),rgba(2,8,20,.5) 52%,rgba(2,8,20,0) 80%)}
.pg-hero h1,.hero h1{filter:drop-shadow(0 2px 12px rgba(0,0,0,.7))}
.pg-hero .lead,.hero .lead{color:#dfe8f4}
.pg-hero .lead,.hero .lead,.crumbs,.tag,.stats,.scroll,.dsum p{text-shadow:0 1px 2px rgba(0,0,0,.95),0 0 18px rgba(2,8,20,.95)}
.tag{font-weight:700}
.crumbs,.crumbs a{color:#c9d5e6}
.note{font:500 12.5px/1.55 var(--mono);color:#bccadf}
.field{font-weight:700;color:#bccadf}
.card p{color:#bccadf}
.k5 span,.pc-row small,.stats span,.k4 span,.hsoc .hn small{color:#bccadf;font-weight:600}
.k5 div,.pc-row div,.k4 div{background:rgba(3,12,28,.74)}
.badge{font-weight:800}
.mt-wait{display:flex;gap:14px;align-items:flex-start;border:1px solid rgba(46,230,255,.45);background:rgba(46,230,255,.07);border-radius:var(--r-lg);padding:16px 18px;margin:16px 0}
.mt-wait .pulse{flex:none;width:14px;height:14px;margin-top:5px;border-radius:50%;background:var(--a2);box-shadow:0 0 0 0 rgba(46,230,255,.6);animation:mtw 1.8s infinite}
.mt-wait b{display:block;font:800 18px var(--bd);color:var(--tx);margin-bottom:4px}.mt-wait p{margin:0;color:#c9d5e6;font-size:14.5px}
@keyframes mtw{70%{box-shadow:0 0 0 12px rgba(46,230,255,0)}100%{box-shadow:0 0 0 0 rgba(46,230,255,0)}}
@media(prefers-reduced-motion:reduce){.mt-wait .pulse{animation:none}}

/* ==== profondeur et immersion (27/10) ====
   1. atmosphère : brume colorée et particules en trois profondeurs entre la scène et le contenu (plus de fond noir « vide ») ;
   2. panneaux holographiques : verre teinté et flouté au lieu d'aplats sombres, arêtes lumineuses, coins de visée, reflet qui passe,
      légère inclinaison 3D qui suit la souris et contenu détaché en profondeur ;
   3. arrivée des panneaux depuis la profondeur au défilement. La lisibilité reste assurée par le flou du verre et le voile local des titres. */
:root{--glass:rgba(4,16,34,.56)}
.grain{opacity:.035}
#atmo{position:fixed;inset:0;width:100%;height:100%;z-index:1;pointer-events:none}
.fog{position:fixed;inset:-10%;z-index:1;pointer-events:none;opacity:.9;mix-blend-mode:screen;
  background:radial-gradient(38% 30% at 18% 28%,rgba(46,230,255,.10),transparent 70%),radial-gradient(34% 28% at 82% 70%,rgba(194,255,61,.08),transparent 70%),
             radial-gradient(50% 40% at 50% 110%,rgba(46,230,255,.12),transparent 70%);animation:fogd 26s ease-in-out infinite alternate}
@keyframes fogd{0%{transform:translate3d(-2%,-1%,0) scale(1)}100%{transform:translate3d(2%,1.5%,0) scale(1.06)}}
.card,.panel:not(.hero),.tk,.mt-stage{
  background:linear-gradient(155deg,rgba(28,70,110,.30),rgba(4,16,34,.62) 42%,rgba(3,10,24,.74));
  border:1px solid rgba(140,200,255,.18);border-radius:14px;
  backdrop-filter:blur(22px) saturate(165%) brightness(.92);-webkit-backdrop-filter:blur(22px) saturate(165%) brightness(.92);
  box-shadow:0 1px 0 rgba(255,255,255,.08) inset,0 0 0 1px rgba(46,230,255,.05),0 30px 70px -30px rgba(0,0,0,.85),0 0 60px -36px rgba(46,230,255,.55)}
.card,.panel:not(.hero),.tk{transform-style:preserve-3d;transform:perspective(1100px) rotateX(var(--tx3,0deg)) rotateY(var(--ty3,0deg));transition:transform .5s cubic-bezier(.2,.8,.2,1),border-color .3s,box-shadow .3s}
.card:hover,.panel:not(.hero):hover,.tk:hover{border-color:rgba(194,255,61,.38);box-shadow:0 1px 0 rgba(255,255,255,.1) inset,0 34px 80px -30px rgba(0,0,0,.9),0 0 70px -30px rgba(194,255,61,.45)}
/* coins de visée + arête lumineuse en haut */
.card::before,.panel:not(.hero)::before{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;z-index:0;
  background:linear-gradient(var(--a1),var(--a1)) top left/18px 2px,linear-gradient(var(--a1),var(--a1)) top left/2px 18px,
             linear-gradient(var(--a2),var(--a2)) bottom right/18px 2px,linear-gradient(var(--a2),var(--a2)) bottom right/2px 18px,
             linear-gradient(90deg,transparent,rgba(194,255,61,.55) 30%,rgba(46,230,255,.55) 70%,transparent) top/100% 1px;
  background-repeat:no-repeat;opacity:.75;filter:drop-shadow(0 0 6px rgba(194,255,61,.5))}
/* reflet holographique qui balaie lentement le panneau */
.card::after,.panel:not(.hero)::after{content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;z-index:0;mix-blend-mode:screen;opacity:.5;
  background:linear-gradient(115deg,transparent 35%,rgba(46,230,255,.07) 45%,rgba(194,255,61,.06) 50%,transparent 60%) 0 0/260% 100%,
             repeating-linear-gradient(0deg,rgba(255,255,255,.018) 0 1px,transparent 1px 4px);animation:hsweep 9s linear infinite}
@keyframes hsweep{0%{background-position:130% 0,0 0}100%{background-position:-130% 0,0 0}}
.card>*,.panel:not(.hero)>*{position:relative;z-index:1;transform:translateZ(18px)}
.card h2,.card h3,.panel h2{transform:translateZ(30px);text-shadow:0 0 24px rgba(194,255,61,.18)}
/* encarts de chiffres : verre plus léger, chiffres qui ressortent */
.k5 div,.k4 div,.pc-row div,.stats div{background:linear-gradient(160deg,rgba(28,70,110,.28),rgba(4,16,34,.6));border-color:rgba(140,200,255,.18);border-radius:10px;backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px)}
.k5 b,.k4 b{text-shadow:0 0 22px rgba(194,255,61,.25)}
/* arrivée depuis la profondeur */
.reveal{opacity:0;transform:perspective(1100px) translate3d(0,40px,-120px) rotateX(10deg);transition:opacity .9s ease,transform 1s cubic-bezier(.2,.8,.2,1)}
.reveal.in-view{opacity:1;transform:perspective(1100px) rotateX(var(--tx3,0deg)) rotateY(var(--ty3,0deg))}
@media(prefers-reduced-motion:reduce){.fog,.card::after,.panel::after{animation:none}.card,.panel,.tk,.reveal{transform:none!important}}
@media(max-width:760px){.card>*,.panel:not(.hero)>*,.card h2,.card h3,.panel h2{transform:none}.card::after,.panel:not(.hero)::after{animation:none}}

/* ==== cinématique d'entrée (accueil) ==== */
.cine-ov{transition:opacity 1.3s ease,visibility 0s linear 1.3s!important;clip-path:none!important}
.cine-ov.out{opacity:0;visibility:hidden}
.cine-ov .cine-l{font:700 12px var(--mono);letter-spacing:.36em;text-transform:uppercase;color:var(--mut)}
.cine-bars{position:fixed;inset:0;z-index:80;pointer-events:none}
.cine-bars::before,.cine-bars::after{content:"";position:absolute;left:0;right:0;height:0;background:#000;transition:height 1.2s cubic-bezier(.7,0,.2,1)}
.cine-bars::before{top:0}.cine-bars::after{bottom:0}
body.cine .cine-bars::before,body.cine .cine-bars::after{height:9vh}
.cine-skip{position:fixed;right:20px;bottom:calc(11vh + 6px);z-index:85;min-height:44px;padding:0 18px;border-radius:999px;border:1px solid rgba(255,255,255,.35);background:rgba(0,0,0,.45);color:#fff;
  font:700 12px var(--mono);letter-spacing:.12em;text-transform:uppercase;cursor:pointer;backdrop-filter:blur(6px);transition:opacity .5s}
.cine-skip:hover{background:var(--a1);color:var(--on);border-color:var(--a1)}
body:not(.cine) .cine-skip{opacity:0;pointer-events:none}
header.nav,main.ui,footer.ft,.demo-bar,.mbar,#atmo,.fog{transition:opacity 1.4s ease,transform 1.6s cubic-bezier(.2,.8,.2,1)}
body.cine header.nav{opacity:0;transform:translateY(-30px);pointer-events:none}
/* pas de flou ni de mise à l'échelle sur toute la page : sur iPhone, une couche floutée de ~7 500 px de haut (~100 Mo) faisait planter Safari */
body.cine main.ui,body.cine footer.ft{opacity:0;transform:translateY(40px);pointer-events:none}
body.cine .demo-bar,body.cine .mbar,body.cine #atmo,body.cine .fog,body.cine .veil{opacity:0;pointer-events:none}
body.cine{overflow:hidden}
@media(prefers-reduced-motion:reduce){.cine-bars,.cine-skip{display:none}}

/* ==== téléphones et écrans tactiles (audit du 27/10) ==== */
/* bouton « Passer l'intro » : au-dessus de la barre d'accueil de l'iPhone */
.cine-skip{right:calc(20px + env(safe-area-inset-right,0px));bottom:calc(11vh + 6px + env(safe-area-inset-bottom,0px))}
/* champ de recherche des pronos : ne dépasse plus sur les petits écrans */
#f-q{width:100%;min-width:0;box-sizing:border-box}
@media(pointer:coarse){
  /* zones de toucher d'au moins 44 px */
  .demo-bar nav a,.more,.seg button{min-height:44px;display:inline-flex;align-items:center}
  .nav .logo{min-height:44px}
  .copy{min-height:44px;display:flex;align-items:center;justify-content:center}
  input[type=checkbox],input[type=radio]{width:24px;height:24px}
  .chk{min-height:44px;display:flex;align-items:center;gap:10px}
  summary{padding-block:7px}
  #s-c,#s-p{min-height:44px}
}
@media(max-width:760px){
  /* textes d'au moins 12 px */
  .wm,.tag,.crumbs,.hsoc .hn,.scroll,h4,.field,label.field,th,small,.badge,.ph,.tm,button{font-size:12px}
  /* verre sans flou d'arrière-plan, bien moins coûteux pour le téléphone (iPhone anciens surtout) ; presque opaque, car sans
     flou les éléments lumineux placés derrière (panneau de la tour des montantes…) transparaîtraient */
  .card,.panel:not(.hero),.tk{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(155deg,rgba(14,40,66,.95),rgba(4,15,32,.96) 42%,rgba(3,10,24,.97))}
  .k5 div,.k4 div,.pc-row div,.stats div{backdrop-filter:none;-webkit-backdrop-filter:none;background:linear-gradient(160deg,rgba(18,48,80,.95),rgba(4,16,34,.97))}
  body #panel{background:linear-gradient(160deg,rgba(14,40,66,.95),rgba(3,12,28,.97))!important}   /* simulateur des montantes : fond propre à la page */
  .fog{mix-blend-mode:normal;opacity:.55;animation:none}
}

.codebox{display:flex;gap:10px;align-items:flex-end;margin-top:16px}
.codebox input{text-transform:uppercase;letter-spacing:.06em}
details.codeitem{border:1px solid var(--ln);border-radius:var(--r);padding:12px 14px;background:rgba(255,255,255,.02)}
details.codeitem+details.codeitem{margin-top:10px}
details.codeitem>summary{cursor:pointer;display:flex;flex-wrap:wrap;justify-content:space-between;gap:8px;align-items:center;list-style:none}
details.codeitem>summary::-webkit-details-marker{display:none}
details.codeitem .cname code{font:800 17px var(--mono);color:var(--a1)}
details.codeitem .cstat{font:600 13px var(--mono);color:#c3cfdf}

@media(max-width:760px){html:not(.no-gl) .hero{padding-top:30vh}}

/* ---- refonte UX : repère, pastilles, « i », feuille d'aide, barre d'onglets ---- */
.rep{display:flex;align-items:center;gap:18px 22px;flex-wrap:wrap}
.rep .ic{width:56px;height:56px;border-radius:14px;display:grid;place-items:center;flex:none;background:linear-gradient(140deg,rgba(194,255,61,.25),rgba(46,230,255,.12));border:1px solid var(--ln2)}
.rep .ic svg,.mbar.tabbar svg{fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
.rep .ic svg{width:28px;height:28px;color:var(--a1)}
.rep .t{flex:1;min-width:240px}
.rep h1{margin:0;font:900 clamp(44px,6vw,72px)/.9 var(--hd);text-transform:uppercase;letter-spacing:.01em}
.rep .t p{margin:8px 0 0;color:#d5e1f0;font-size:17px;line-height:1.45}
.rep .chips{display:flex;flex-wrap:wrap;gap:8px}
.rep .chip{display:inline-flex;align-items:center;gap:7px;padding:7px 12px;border-radius:99px;background:rgba(3,12,28,.72);border:1px solid var(--ln);font:600 13.5px var(--bd);color:#dbe6f3;white-space:nowrap;text-decoration:none}
.rep .chip .d{width:7px;height:7px;border-radius:50%;background:var(--a1)}
.rep a.chip:hover{border-color:var(--a1)}
.rep .chip.warn{border-color:rgba(255,200,74,.55);color:#ffe3a1}.rep .chip.warn .d{background:#ffc84a}
button.aide-i,.rep .chips button.aide-i{display:inline-grid;place-items:center;width:20px;height:20px;min-width:0;min-height:0;padding:0;border-radius:50%;border:1px solid #5d7190;background:none;color:#d5e1f0;font:700 11.5px/1 var(--bd);letter-spacing:0;text-transform:none;cursor:pointer;flex:none;vertical-align:middle;position:relative}
button.aide-i::after{content:"";position:absolute;inset:-12px}
button.aide-i:hover{border-color:var(--a1);color:var(--a1)}
button.aide-i:focus-visible{outline:2px solid var(--a1);outline-offset:2px}
#aide{position:fixed;inset:0;z-index:90;display:none;align-items:flex-end;justify-content:center;background:rgba(0,0,0,.5)}
#aide.on{display:flex}
#aide .s{width:min(560px,100%);background:#0a1426;border:1px solid var(--ln2);border-bottom:0;border-radius:18px 18px 0 0;padding:20px 22px calc(26px + env(safe-area-inset-bottom,0px));box-shadow:0 -20px 60px rgba(0,0,0,.5)}
#aide h2{margin:0 0 10px;font:900 28px/1 var(--hd);text-transform:uppercase;color:var(--a1)}
#aide p{margin:0 0 8px;color:#dbe6f3;font-size:16px;line-height:1.5}
#aide .x{float:right;background:none;border:1px solid var(--ln);border-radius:8px;padding:5px 11px;color:#dbe6f3;font:600 14px var(--bd);cursor:pointer}
.days{position:sticky;top:var(--hh,64px);z-index:15;display:flex;gap:8px;align-items:center;padding:10px 0;margin:6px 0 4px;background:linear-gradient(rgba(2,8,20,.92) 70%,rgba(2,8,20,0));overflow-x:auto;scrollbar-width:none}
.days::-webkit-scrollbar{display:none}
.day{flex:none;display:flex;flex-direction:column;align-items:flex-start;gap:2px;padding:8px 16px;border-radius:var(--r);border:1px solid var(--ln2);background:rgba(3,12,28,.78);min-width:118px;min-height:0;text-align:left;color:var(--tx);cursor:pointer;font:inherit;letter-spacing:0;text-transform:none}
.day b{font:800 15px var(--bd)}.day span{font:600 12px var(--mono);color:#9fb1ca}
.day[aria-pressed=true]{background:var(--a1);border-color:var(--a1);color:var(--on)}.day[aria-pressed=true] span{color:#24410a}
.day:hover{border-color:var(--a1)}.day:disabled{opacity:.45;cursor:not-allowed}
.day.cal{position:relative}.day.cal select{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%}
.mbar.tabbar{justify-content:space-around;gap:0;padding:8px 4px calc(10px + env(safe-area-inset-bottom,0px));background:rgba(2,8,20,.95);border-top:1px solid var(--ln);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px)}
.mbar.tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;padding:4px 2px;border-radius:9px;color:#9fb1ca;text-decoration:none;font:700 10px var(--mono);letter-spacing:.05em;text-transform:uppercase;min-height:48px;justify-content:center}
.mbar.tabbar svg{width:22px;height:22px}
.mbar.tabbar a[aria-current=page]{color:var(--a1)}.mbar.tabbar a.vipb{color:var(--a2)}
@media(max-width:760px){.rep{gap:12px}.rep .ic{width:44px;height:44px;border-radius:11px}.rep .ic svg{width:22px;height:22px}.rep .t{min-width:0}.rep .t p{font-size:15.5px}
.day{min-width:100px;padding:7px 12px}
.rep .chips{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;margin:0 -16px;padding:0 16px 2px}.rep .chips::-webkit-scrollbar{display:none}}