*{box-sizing:border-box;margin:0}
:root{--bg:#020617;--bg2:#0b1220;--card:#111827;--card2:#0f172a;--bd:#1f2937;--bd2:#374151;--tx:#f8fafc;--mut:#94a3b8;--sub:#cbd5e1;--acc:#14b8a6;--acc2:#2dd4bf;--ease:cubic-bezier(.22,1,.36,1)}
html{scroll-behavior:smooth}
body{background:var(--bg);color:var(--tx);font-family:Inter,system-ui,sans-serif;-webkit-font-smoothing:antialiased;line-height:1.5;overflow-x:hidden}
a{color:inherit;text-decoration:none}button{font:inherit;color:inherit;cursor:pointer;background:none;border:0}img{display:block;max-width:100%}
.wrap{max-width:1280px;margin:0 auto;padding:0 24px}
h1{font-size:clamp(2.6rem,6.4vw,5.2rem);line-height:1.02;font-weight:800;letter-spacing:-.03em}
h2{font-size:clamp(1.9rem,3.8vw,3rem);line-height:1.08;font-weight:700;letter-spacing:-.02em}
h3{font-weight:600}.eyebrow{font-size:.8rem;font-weight:600;color:var(--acc2);letter-spacing:.04em;text-transform:uppercase}
.lead{font-size:1.15rem;color:var(--sub);max-width:42rem}.sm{font-size:.82rem;color:var(--mut)}.mono{font-family:'JetBrains Mono',monospace}
.btn{display:inline-flex;align-items:center;gap:.5rem;background:var(--acc);color:#fff;font-weight:600;border-radius:10px;padding:.85rem 1.5rem;transition:background .2s,transform .25s var(--ease)}.btn:hover{background:var(--acc2);transform:translateY(-2px)}
.btn.o{background:transparent;border:1px solid var(--bd2);color:var(--tx)}.btn.o:hover{border-color:var(--acc2);background:transparent}
.sec{padding:110px 0;border-top:1px solid var(--bd)}.alt{background:var(--bg2)}
.card{background:var(--card);border:1px solid var(--bd2);border-radius:14px}
#prog{position:fixed;top:0;left:0;right:0;height:2px;background:var(--acc);transform-origin:left;transform:scaleX(0);z-index:90}
.nav{position:fixed;top:0;left:0;right:0;z-index:80;transition:background .3s,border-color .3s;border-bottom:1px solid transparent}.nav.s{background:var(--bg);border-color:var(--bd)}
.nav .hin{height:68px;display:flex;align-items:center;justify-content:space-between}
.logo{display:flex;align-items:center;gap:.55rem;font-weight:800;font-size:1.15rem}.logo i{display:grid;place-items:center;width:30px;height:30px;border-radius:8px;background:var(--acc);font-style:normal;font-size:.95rem}
.nav nav{display:flex;gap:28px;font-size:.9rem;color:var(--sub)}.nav nav a:hover{color:#fff}@media(max-width:900px){.nav nav{display:none}}
/* reveal */
.js .rv{opacity:0;transform:translateY(22px);transition:opacity .75s var(--ease),transform .75s var(--ease);transition-delay:var(--d,0s)}.js .rv.in{opacity:1;transform:none}
.px{transform:translate3d(0,var(--py,0px),0);will-change:transform}
/* HERO */
#hero{position:relative;min-height:100vh;display:flex;align-items:center;overflow:hidden}
#hero .bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:kb 2.8s var(--ease) both}
@keyframes kb{from{transform:scale(1.12)}to{transform:scale(1.02)}}
#hero .scrim{position:absolute;inset:0;background:rgba(2,6,23,.78)}
#hero .hin{position:relative;padding:130px 24px 90px;width:100%}
.ch{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:48px}
@media(max-width:900px){.ch{grid-template-columns:1fr}}
.pc{position:relative;text-align:left;padding:22px;border:1px solid var(--bd2);border-radius:14px;background:rgba(2,6,23,.82);transition:border-color .25s,transform .35s var(--ease);display:flex;flex-direction:column;gap:6px;min-height:170px}
.pc:hover{border-color:var(--acc2);transform:translateY(-5px)}.pc .n{font-family:'JetBrains Mono',monospace;color:var(--acc2);font-size:.8rem}.pc h3{font-size:1.2rem}.pc p{color:var(--sub);font-size:.92rem}.pc .go{margin-top:auto;color:var(--acc2);font-weight:600;font-size:.9rem}
.scroll{position:absolute;bottom:26px;left:50%;transform:translateX(-50%);font-size:.75rem;color:var(--mut);display:flex;flex-direction:column;align-items:center;gap:6px}.scroll i{width:1px;height:34px;background:var(--bd2);position:relative;overflow:hidden}.scroll i::after{content:'';position:absolute;left:0;top:-14px;width:1px;height:14px;background:var(--acc2);animation:dr 1.8s infinite}@keyframes dr{to{top:34px}}
/* STORY */
#story{position:relative;border-top:1px solid var(--bd)}
.stk{position:sticky;top:0;height:100vh;overflow:hidden}
.stk .bgs img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s var(--ease)}.stk .bgs img.on{opacity:1}
.stk .scrim{position:absolute;inset:0;background:rgba(2,6,23,.84)}
.stk .hin{position:relative;height:100%;display:grid;grid-template-columns:5fr 7fr;gap:48px;align-items:center;padding-top:68px}
@media(max-width:960px){.stk .hin{grid-template-columns:1fr;gap:16px;padding-top:80px;align-content:start}}
.ptabs{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:22px}.pt{padding:.4rem .8rem;border:1px solid var(--bd2);border-radius:9px;font-size:.8rem;font-weight:600;color:var(--sub);background:rgba(2,6,23,.6);transition:all .2s}.pt.on{background:var(--acc);border-color:var(--acc);color:#fff}
.persona{font-size:.82rem;color:var(--mut);border-left:2px solid var(--acc);padding-left:12px;margin-bottom:22px}
.chap{position:relative}.chap .c{position:absolute;inset:auto 0 auto 0;opacity:0;transform:translateY(18px);transition:opacity .5s var(--ease),transform .5s var(--ease);pointer-events:none}.chap .c.on{opacity:1;transform:none;pointer-events:auto}
.chap h2{font-size:clamp(1.7rem,3.2vw,2.6rem)}.chap p{margin-top:14px;color:var(--sub);font-size:1.08rem}
.dots{display:flex;gap:8px;margin-top:210px}@media(max-width:960px){.dots{margin-top:150px}}
.dots i{height:3px;flex:1;background:var(--bd2);border-radius:2px;overflow:hidden;position:relative}.dots i b{position:absolute;inset:0;background:var(--acc2);transform-origin:left;transform:scaleX(var(--f,0))}
/* DASHBOARD */
.win{border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--card2);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);display:grid;grid-template-columns:168px 1fr;height:min(560px,62vh);transform:translate3d(0,0,0) scale(var(--ws,1));transition:transform .6s var(--ease)}
@media(max-width:960px){.win{grid-template-columns:1fr;height:48vh}.side{display:none}}
.side{background:var(--bg);border-right:1px solid var(--bd);padding:14px 10px;font-size:.8rem}.side .lg{display:flex;gap:8px;align-items:center;font-weight:700;padding:4px 8px 14px}.side .lg i{width:20px;height:20px;border-radius:6px;background:var(--acc);display:grid;place-items:center;font-style:normal;font-size:.75rem}
.side a{display:flex;gap:8px;align-items:center;padding:8px 10px;border-radius:8px;color:var(--mut);transition:all .3s}.side a::before{content:'';width:12px;height:12px;border-radius:3px;border:1.5px solid currentColor;opacity:.7}.side a.on{background:var(--card);color:#fff}.side a.on::before{background:var(--acc);border-color:var(--acc)}
.main{display:flex;flex-direction:column;min-width:0}.top{display:flex;justify-content:space-between;align-items:center;padding:12px 18px;border-bottom:1px solid var(--bd)}.top b{font-size:.95rem}.top span{font-size:.75rem;color:var(--mut)}
.scn{position:relative;flex:1;overflow:hidden}.sc{position:absolute;inset:0;padding:18px;overflow:hidden;animation:sin .45s var(--ease)}@keyframes sin{from{opacity:0;transform:translateY(12px)}}
.k{--k:clamp(0,calc(var(--t,0)*var(--n,6) - var(--i,0)),1);opacity:var(--k);transform:translateY(calc((1 - var(--k))*16px))}
.sc h4{font-size:.95rem;margin-bottom:12px}
.row{display:flex;align-items:center;gap:10px;padding:10px 12px;border:1px solid var(--bd);border-radius:10px;background:var(--card);margin-bottom:8px;font-size:.84rem}.row .g{flex:1;min-width:0}.row .g b{display:block;font-weight:600}
.av{width:30px;height:30px;border-radius:50%;background:var(--acc);display:grid;place-items:center;font-size:.75rem;font-weight:700;flex:none}
.chip{font-size:.75rem;font-weight:600;border-radius:6px;padding:.15rem .5rem;border:1px solid var(--bd2);color:var(--mut);transition:all .3s;white-space:nowrap}
.done .chip.w,.chip.ok{background:#10b98122;border-color:#10b98166;color:#34d399}.chip.w2{display:inline}.done .chip.w{display:none}.chip.dn{display:none}.done .chip.dn{display:inline;background:#10b98122;border-color:#10b98166;color:#34d399}
.bar{height:8px;border-radius:4px;background:var(--bd);overflow:hidden}.bar i{display:block;height:100%;background:var(--acc);width:calc(var(--t,0)*100%)}
.kp{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-bottom:14px}@media(max-width:700px){.kp{grid-template-columns:repeat(2,1fr)}}
.kp div{border:1px solid var(--bd);border-radius:10px;padding:10px;background:var(--card)}.kp b{display:block;font-size:1.3rem;font-weight:700}.kp span{font-size:.75rem;color:var(--mut)}
.ln{fill:none;stroke:var(--acc2);stroke-width:2.5;stroke-dasharray:700;stroke-dashoffset:calc((1 - var(--t,0))*700)}
.tw{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.tw>div{border:1px solid var(--bd2);border-radius:12px;padding:14px;background:var(--card);transition:all .35s var(--ease);font-size:.85rem}.tw>div.on{border-color:var(--acc2);transform:translateY(-4px)}
.tg{width:38px;height:22px;border-radius:99px;background:var(--bd2);position:relative;transition:background .3s;flex:none}.tg::after{content:'';position:absolute;top:3px;left:3px;width:16px;height:16px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}.on-tg .tg{background:var(--acc)}.on-tg .tg::after{transform:translateX(16px)}
.dotp{animation:mv 5s ease-in-out infinite alternate}@keyframes mv{to{transform:translate(18px,10px)}}
.fl{stroke:var(--acc2);stroke-width:2;stroke-dasharray:6 8;animation:fl 1.2s linear infinite;fill:none}@keyframes fl{to{stroke-dashoffset:-14}}
/* tablet / generic sections */
.two{display:grid;grid-template-columns:1fr 1fr;gap:56px;align-items:center}@media(max-width:960px){.two{grid-template-columns:1fr;gap:32px}}
.tab{border:1px solid var(--bd2);border-radius:26px;padding:12px;background:var(--bg);box-shadow:0 30px 60px -20px rgba(0,0,0,.7);max-width:560px;margin:auto;width:100%}
.tab .scr{border-radius:16px;overflow:hidden;background:var(--card2);min-height:420px;display:flex;flex-direction:column}
.tn{display:flex;gap:4px;padding:10px;border-bottom:1px solid var(--bd)}.tn button{flex:1;padding:.5rem;border-radius:8px;font-size:.78rem;font-weight:600;color:var(--mut);transition:all .25s}.tn button.on{background:var(--card);color:#fff}
.tp{padding:18px;display:none;flex:1}.tp.on{display:block;animation:sin .4s var(--ease)}
.sites{display:grid;grid-template-columns:4fr 8fr;gap:44px;align-items:center}@media(max-width:960px){.sites{grid-template-columns:1fr}}
.sl button{display:block;width:100%;text-align:left;padding:16px 0 16px 18px;border-left:2px solid var(--bd2);opacity:.5;transition:all .3s}.sl button.on{opacity:1;border-color:var(--acc)}.sl h3{font-size:1.1rem}.sl p{font-size:.9rem;color:var(--mut)}
.br{border:1px solid var(--bd2);border-radius:14px;overflow:hidden;background:var(--card);box-shadow:0 30px 60px -24px rgba(0,0,0,.7)}.bb{display:flex;align-items:center;gap:7px;padding:10px 14px;border-bottom:1px solid var(--bd);background:var(--card2)}.bb i{width:9px;height:9px;border-radius:50%;background:var(--bd2)}.bb span{margin-left:10px;font-size:.75rem;color:var(--mut);font-family:'JetBrains Mono',monospace}
.vw{position:relative;aspect-ratio:16/10;overflow:hidden}.site{position:absolute;inset:0;opacity:0;transform:translateY(12px) scale(.99);transition:opacity .6s var(--ease),transform .6s var(--ease);font-size:clamp(.6rem,1.1vw,.9rem)}.site.on{opacity:1;transform:none}
.sn{display:flex;justify-content:space-between;padding:1em 1.6em;font-weight:700;align-items:center}.sn span{font-weight:500;font-size:.85em;opacity:.8;display:flex;gap:1.4em}.sh{padding:2.4em 2.2em}.sh h4{font-size:2.6em;line-height:1.05;font-weight:800;max-width:11em}.sh p{margin-top:.8em;max-width:26em;opacity:.85}.sh b{display:inline-block;margin-top:1.2em;padding:.7em 1.3em;border-radius:.5em;font-weight:700;margin-right:.6em}
.tl{display:grid;grid-template-columns:repeat(4,1fr);gap:.8em;padding:0 2.2em}.tl div{padding:1em;border-radius:.6em;font-weight:600;font-size:.9em;text-align:center}.ls{display:grid;grid-template-columns:repeat(3,1fr);gap:1em;padding:0 2.2em}.ls div{border-radius:.6em;overflow:hidden;background:#fff;color:#0f172a}.ls em{display:block;height:5.4em}.ls span{display:block;padding:.6em .8em;font-weight:700;font-size:.9em}
.acc{display:flex;gap:16px;height:520px}@media(max-width:900px){.acc{flex-direction:column;height:auto}}
.ac{position:relative;flex:1;border-radius:16px;overflow:hidden;border:1px solid var(--bd2);transition:flex .7s var(--ease);cursor:pointer;min-height:140px}.ac.on{flex:3.2}.ac img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.ac.on img{transform:scale(1.05)}.ac::after{content:'';position:absolute;inset:0;background:rgba(2,6,23,.55)}
.ac .t{position:absolute;z-index:1;left:24px;bottom:24px;right:24px}.ac h3{font-size:1.6rem}.ac ul{list-style:none;margin-top:12px;display:grid;gap:6px;font-size:.95rem;color:#e2e8f0;max-height:0;opacity:0;overflow:hidden;transition:all .6s var(--ease)}.ac.on ul{max-height:140px;opacity:1}.ac li::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--acc2);margin-right:10px}
.flow{position:relative;height:340px}.node{position:absolute;transform:translate(-50%,-50%);border:1px solid var(--bd2);background:var(--card);border-radius:14px;padding:16px 20px;text-align:center;min-width:150px}.node b{display:block}.node span{font-size:.75rem;color:var(--mut)}
.tools{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}@media(max-width:960px){.tools{grid-template-columns:repeat(2,1fr)}}@media(max-width:560px){.tools{grid-template-columns:1fr}}
.tile{display:flex;flex-direction:column;padding:22px;min-height:220px;transition:border-color .2s,transform .35s var(--ease),opacity .3s}.tile:hover{border-color:var(--acc);transform:translateY(-5px)}.tile.hide{display:none}
.tile .tp2{display:flex;justify-content:space-between;gap:8px}.tile .tp2 span{font-size:.75rem;color:var(--mut)}.tile p{font-size:.88rem;color:var(--mut);margin-top:6px}.tile .pv{margin-top:auto;padding-top:16px}.s2{grid-column:span 2}.s4{grid-column:span 4}@media(max-width:960px){.s4{grid-column:span 2}}@media(max-width:560px){.s2,.s4{grid-column:span 1}}
.ng{border:1px solid var(--bd2);background:var(--card2);border-radius:10px;padding:.8rem 1rem;font-family:'JetBrains Mono',monospace;color:var(--acc2);min-height:50px}
.fl2{display:flex;gap:8px;margin:28px 0 36px;flex-wrap:wrap}
.iso{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:900px){.iso{grid-template-columns:1fr}}
.db{padding:20px;border:1px solid var(--bd2);border-radius:14px;background:var(--card)}.db .cyl{height:54px;border:2px solid var(--acc);border-radius:14px;margin-bottom:14px;position:relative;overflow:hidden}.db .cyl::after{content:'';position:absolute;left:0;top:0;height:100%;width:30%;background:rgba(20,184,166,.25);animation:sw 3s ease-in-out infinite alternate}@keyframes sw{to{left:70%}}
table.cmp{width:100%;border-collapse:collapse;font-size:.95rem}.cmp th,.cmp td{padding:18px 16px;border-bottom:1px solid var(--bd2);text-align:left;vertical-align:top}.cmp thead th{font-size:.8rem;color:var(--mut)}.cmp tbody th{color:#fff;width:18%}.cmp td:last-child{color:#fff}.cmp td:last-child::before{content:'✓ ';color:var(--acc2);font-weight:700}
details{border-bottom:1px solid var(--bd2);padding:22px 0}summary{list-style:none;cursor:pointer;display:flex;justify-content:space-between;font-weight:600;font-size:1.05rem}summary::-webkit-details-marker{display:none}.pl{color:var(--acc2);font-size:1.4rem;line-height:1;transition:transform .25s var(--ease)}details[open] .pl{transform:rotate(45deg)}details p{margin-top:12px;color:var(--sub)}
.cta{position:relative;overflow:hidden;border-top:1px solid var(--bd)}.cta>img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}.cta .scrim{position:absolute;inset:0;background:rgba(2,6,23,.8)}.cta .hin{position:relative;padding:120px 24px;text-align:center}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
html.reduce{scroll-behavior:auto}html.js.reduce .rv{opacity:1;transform:none;transition:none}html.reduce .px{transform:none!important}html.reduce #hero .bg,html.reduce .dotp,html.reduce .fl,html.reduce .scroll i::after,html.reduce .db .cyl::after{animation:none!important}html.reduce .sc{animation:none}

/* ===== v7 : sections enrichies ===== */
.h2w{max-width:860px}
.pills{display:flex;gap:8px;flex-wrap:wrap}
.pl2{padding:.5rem .95rem;border:1px solid var(--bd2);border-radius:10px;font-size:.85rem;font-weight:600;color:var(--sub);background:rgba(2,6,23,.55);transition:all .25s var(--ease)}.pl2:hover{border-color:var(--acc2)}.pl2.on{background:var(--acc);border-color:var(--acc);color:#fff}
/* sites métier */
.sites2{display:grid;grid-template-columns:3fr 9fr;gap:40px;align-items:start;margin-top:50px}@media(max-width:1000px){.sites2{grid-template-columns:1fr}}
.sl2 button{display:flex;gap:14px;align-items:center;width:100%;text-align:left;padding:14px;border:1px solid transparent;border-radius:12px;transition:all .3s var(--ease);opacity:.6}.sl2 button.on{opacity:1;background:var(--card);border-color:var(--bd2)}
.sl2 .ic{width:40px;height:40px;border-radius:10px;display:grid;place-items:center;font-weight:800;flex:none}.sl2 h3{font-size:1rem}.sl2 p{font-size:.8rem;color:var(--mut)}
.sl2 .prog{height:2px;background:var(--bd2);margin-top:8px;border-radius:2px;overflow:hidden}.sl2 .prog i{display:block;height:100%;background:var(--acc2);width:0}.sl2 button.on .prog i{animation:pbar var(--dur,6s) linear forwards}@keyframes pbar{to{width:100%}}
.br2{border:1px solid var(--bd2);border-radius:14px;overflow:hidden;background:#000;box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.vw2{position:relative;aspect-ratio:16/10;overflow:hidden;background:#fff}
.site2{position:absolute;inset:0;opacity:0;transition:opacity .6s var(--ease);font-size:clamp(.55rem,1.05vw,.95rem);pointer-events:none}.site2.on{opacity:1}
.pg{position:absolute;left:0;right:0;top:0}.site2.on .pg{animation:pgs 18s ease-in-out infinite alternate}@keyframes pgs{from{transform:translateY(0)}to{transform:translateY(var(--sc,-42%))}}
.sd{padding:1.1em 2em;display:flex;justify-content:space-between;align-items:center}.sd nav{display:flex;gap:1.6em;font-size:.85em;opacity:.85}
/* jeux */
#jeux{position:relative;overflow:hidden}#jeux .bgj{position:absolute;inset:0}#jeux .bgj img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity 1s}#jeux .bgj img.on{opacity:1}#jeux .scr2{position:absolute;inset:0;background:rgba(2,6,23,.84)}#jeux .wrap{position:relative}
.gp{margin-top:36px;min-height:470px;border-radius:16px;overflow:hidden;border:1px solid var(--bd2);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.gp .in2{animation:sin .5s var(--ease)}
.stg>*{opacity:0;animation:sin .6s var(--ease) forwards;animation-delay:calc(var(--i,0)*.09s)}
/* FiveM panel */
.fv{background:#070d1a;color:#e5e7eb;display:grid;grid-template-columns:230px 1fr 260px;min-height:470px;font-size:.84rem}@media(max-width:900px){.fv{grid-template-columns:1fr}}
.fv>div{padding:16px;border-right:1px solid #16213a}.fv h5{font-size:.75rem;letter-spacing:.08em;color:#64748b;margin-bottom:10px;text-transform:uppercase}
.un{display:flex;justify-content:space-between;align-items:center;padding:9px 10px;border:1px solid #16213a;border-radius:8px;margin-bottom:8px;background:#0b1424}.un b{font-size:.8rem}.st{font-size:.75rem;padding:.1rem .45rem;border-radius:5px;border:1px solid}.st.g{color:#34d399;border-color:#34d39955}.st.r{color:#f87171;border-color:#f8717155}.st.a{color:#fbbf24;border-color:#fbbf2455}
.fmap{position:relative;height:100%;min-height:360px;border:1px solid #16213a;border-radius:10px;background:#0a1220;overflow:hidden}
.ev{padding:9px 10px;border-left:2px solid var(--acc);background:#0b1424;border-radius:0 8px 8px 0;margin-bottom:8px}.ev small{color:#64748b;display:block}
/* RedM panel */
.rd{background:#d9c59a;color:#3b2a1a;padding:26px;min-height:470px;font-family:'Cinzel',serif;border:6px double #5b4228}.rd h4{font-size:1.5rem;letter-spacing:.06em;text-align:center;border-bottom:2px solid #5b4228;padding-bottom:10px}
.rd .ps{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-top:20px}@media(max-width:700px){.rd .ps{grid-template-columns:1fr}}
.poster{background:#ecdcb5;border:2px solid #5b4228;padding:14px;text-align:center;box-shadow:3px 4px 0 #5b422855;transform:rotate(var(--r,0deg))}.poster b{display:block;font-size:1.25rem;letter-spacing:.1em}.poster .face{height:90px;margin:8px auto;border:2px solid #5b4228;display:grid;place-items:center;background:#cdb88a}.poster span{font-size:.8rem}.poster em{display:block;font-style:normal;font-weight:700;font-size:1.05rem;margin-top:4px}
.rd .rk{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px;font-size:.85rem}.rd .rk span{border:1.5px solid #5b4228;padding:.3rem .7rem;background:#ecdcb5}
/* Minecraft panel */
.mc{background:#2b2b2b;color:#e5e5e5;padding:24px;min-height:470px;font-family:'VT323',monospace;font-size:1.2rem}.mc h4{font-family:'Silkscreen',monospace;font-size:1rem;margin-bottom:14px;color:#fff}
.mcb{background:#5d9b3a;color:#fff;border:2px solid #1a1a1a;box-shadow:inset -3px -3px 0 #3f6d28,inset 3px 3px 0 #86c25f;padding:.3rem .8rem;font-family:'Silkscreen',monospace;font-size:.75rem;cursor:pointer}.mcb.rj{background:#9b3a3a;box-shadow:inset -3px -3px 0 #6d2828,inset 3px 3px 0 #c25f5f}
.mcr{display:flex;align-items:center;gap:12px;padding:10px;background:#3a3a3a;border:2px solid #1a1a1a;box-shadow:inset 2px 2px 0 #555;margin-bottom:10px}.mcr .sk{width:34px;height:34px;background:#8d6b4a;border:2px solid #1a1a1a;flex:none;position:relative}.mcr .sk::after{content:'';position:absolute;left:6px;top:8px;width:6px;height:6px;background:#222;box-shadow:12px 0 #222}.mcr .g{flex:1}
.mcg{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px}.mcg i{aspect-ratio:1;background:#3a3a3a;border:2px solid #1a1a1a;box-shadow:inset 2px 2px 0 #555;display:grid;place-items:center;font-style:normal;font-size:.8rem;font-family:'Silkscreen',monospace}
.tag2{padding:.1rem .5rem;font-family:'Silkscreen',monospace;font-size:.75rem;border:2px solid #1a1a1a}
/* custom theming */
.themer{display:grid;grid-template-columns:320px 1fr;gap:24px;margin-top:44px}@media(max-width:1000px){.themer{grid-template-columns:1fr}}
.ctl{padding:20px;display:grid;gap:20px;align-content:start}.ctl label{font-size:.78rem;color:var(--mut);display:block;margin-bottom:8px;font-weight:600;letter-spacing:.03em;text-transform:uppercase}
.sw{display:flex;gap:8px;flex-wrap:wrap}.sw button{width:30px;height:30px;border-radius:8px;border:2px solid transparent;transition:transform .2s var(--ease)}.sw button.on{border-color:#fff;transform:scale(1.12)}
.ctl select{font:inherit;background:var(--card2);color:var(--tx);border:1px solid var(--bd2);border-radius:8px;padding:.55rem .7rem;width:100%}.ctl input[type=range]{width:100%;accent-color:var(--acc)}
.prev{border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--pb,#0b1220);color:var(--pt,#f8fafc);font-family:var(--pf,Inter);transition:background .4s,color .4s;min-height:460px;display:grid;grid-template-columns:150px 1fr}
@media(max-width:700px){.prev{grid-template-columns:1fr}.prev .ps2{display:none}}
.ps2{background:var(--pc,#111827);padding:14px 10px;font-size:.8rem;transition:background .4s}.ps2 b{display:block;padding:4px 8px 12px;color:var(--pa,#14b8a6)}.ps2 div{padding:8px 10px;border-radius:var(--pr,10px);opacity:.75}.ps2 div.a{background:var(--pa,#14b8a6);color:#fff;opacity:1}
.pm{padding:18px;display:grid;gap:14px;align-content:start}.pk{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}.pk div{background:var(--pc,#111827);border:1px solid rgba(128,128,128,.25);border-radius:var(--pr,10px);padding:12px;transition:all .4s}.pk b{font-size:1.3rem;display:block;color:var(--pa,#14b8a6)}.pk span{font-size:.75rem;opacity:.7}
.pbtn{display:inline-block;background:var(--pa,#14b8a6);color:#fff;padding:.6rem 1.1rem;border-radius:var(--pr,10px);font-weight:700;font-size:.85rem;transition:all .4s}
.psite{background:var(--pc,#111827);border:1px solid rgba(128,128,128,.25);border-radius:var(--pr,10px);padding:18px;transition:all .4s}.psite h6{font-size:1.25rem;font-weight:700;margin-bottom:6px}
.prow{display:flex;justify-content:space-between;padding:8px 10px;border:1px solid rgba(128,128,128,.25);border-radius:var(--pr,10px);margin-top:6px;font-size:.8rem}.prow i{font-style:normal;color:var(--pa,#14b8a6);font-weight:700}
/* intégration */
.intg{display:grid;grid-template-columns:7fr 5fr;gap:24px;margin-top:44px}@media(max-width:1000px){.intg{grid-template-columns:1fr}}
.dg{position:relative;padding:10px}.dg svg{width:100%;height:auto;display:block}.nd rect{fill:var(--card);stroke:var(--bd2);stroke-width:1.5;transition:stroke .3s}.nd.hot rect{stroke:var(--acc2)}.nd text{fill:#f8fafc;font-size:13px;font-weight:600;font-family:Inter}.nd .t2{fill:#94a3b8;font-size:10px;font-weight:400}
.lnk{stroke:var(--bd2);stroke-width:2;fill:none;stroke-dasharray:5 7;animation:fl 1.4s linear infinite}
.feed{padding:0;overflow:hidden;display:flex;flex-direction:column}.feed .hd{padding:14px 16px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between}.feed .li{display:grid;grid-template-columns:auto 1fr auto;gap:10px;padding:11px 16px;border-bottom:1px solid var(--bd);font-size:.82rem;animation:sin .4s var(--ease)}.feed pre{margin:0;padding:14px 16px;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:#cbd5e1;background:var(--card2);border-top:1px solid var(--bd);white-space:pre-wrap}
/* tools workbench */
.tgrid{display:grid;grid-template-columns:repeat(8,1fr);gap:10px;margin-top:40px}@media(max-width:1000px){.tgrid{grid-template-columns:repeat(4,1fr)}}@media(max-width:560px){.tgrid{grid-template-columns:repeat(2,1fr)}}
.tt2{display:flex;flex-direction:column;align-items:center;gap:8px;padding:14px 8px;border:1px solid var(--bd2);border-radius:12px;background:var(--card);font-size:.76rem;font-weight:600;color:var(--sub);text-align:center;transition:all .3s var(--ease);position:relative}.tt2:hover{transform:translateY(-3px);border-color:var(--acc2)}.tt2.on{border-color:var(--acc);background:var(--bg2);color:#fff}.tt2 svg{width:26px;height:26px;stroke:var(--acc2);fill:none;stroke-width:1.7}
.tt2 small{font-size:.75rem;color:var(--mut);font-weight:500}
.wb{margin-top:16px;display:grid;grid-template-columns:230px 1fr;min-height:420px;border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--card2);box-shadow:0 40px 80px -30px rgba(0,0,0,.7)}@media(max-width:800px){.wb{grid-template-columns:1fr}.wbs{display:none}}
.wbs{background:var(--bg);border-right:1px solid var(--bd);padding:16px;font-size:.8rem}.wbs h6{font-size:.75rem;letter-spacing:.08em;color:var(--mut);margin:14px 0 8px;text-transform:uppercase}.wbs div{padding:7px 10px;border-radius:8px;color:var(--mut)}.wbs div.on{background:var(--card);color:#fff}
.wbm{padding:22px;display:flex;flex-direction:column;gap:16px}.wbm .hd{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap}.wbm .hd b{font-size:1.1rem}.in3{background:var(--card);border:1px solid var(--bd2);border-radius:8px;padding:.55rem .7rem;color:var(--tx);font:inherit;width:100%}
.out{background:var(--card);border:1px solid var(--bd2);border-radius:12px;padding:16px;animation:sin .4s var(--ease)}
.idc{border:1px solid var(--bd2);border-radius:14px;padding:16px;background:var(--bg);display:grid;grid-template-columns:90px 1fr;gap:16px;max-width:430px}.idc .ph{border-radius:10px;background:var(--bd2);display:grid;place-items:center;height:110px}.idc .ln2{font-size:.75rem;color:var(--mut)}.idc b{display:block;font-size:1rem}
.cg{display:grid;grid-template-columns:1fr 1fr;gap:12px}@media(max-width:600px){.cg{grid-template-columns:1fr}}
.stb{display:grid;grid-template-columns:90px 1fr 34px;gap:10px;align-items:center;font-size:.78rem;margin-top:8px}.stb .bar i{transition:width .6s var(--ease)}
.ck{display:flex;align-items:center;gap:10px;padding:9px 12px;border:1px solid var(--bd2);border-radius:8px;margin-bottom:8px;cursor:pointer;background:var(--card)}.ck i{width:16px;height:16px;border-radius:4px;border:1.5px solid var(--bd2);display:grid;place-items:center;font-style:normal;font-size:.75rem;flex:none}.ck.on i{background:var(--acc);border-color:var(--acc)}
.tree{font-family:'JetBrains Mono',monospace;font-size:.8rem;color:var(--mut);display:grid;gap:4px}.tree b{color:#fff;display:block;margin-top:8px}
.upl{border:1.5px dashed var(--bd2);border-radius:12px;padding:20px;text-align:center}
/* sécurité */
.secg{display:grid;grid-template-columns:5fr 7fr;gap:24px;margin-top:44px}@media(max-width:1000px){.secg{grid-template-columns:1fr}}
.stabs{display:grid;gap:10px;align-content:start}.stabs button{text-align:left;padding:18px;border:1px solid var(--bd2);border-radius:14px;background:var(--card);transition:all .3s var(--ease);position:relative;overflow:hidden}.stabs button.on{border-color:var(--acc);background:var(--card2)}.stabs button h3{font-size:1rem}.stabs button p{font-size:.84rem;color:var(--mut);margin-top:4px}.stabs button .pb{position:absolute;left:0;bottom:0;height:2px;background:var(--acc2);width:0}.stabs button.on .pb{animation:pbar var(--dur,7s) linear forwards}
.sp{min-height:420px;padding:22px;display:none;flex-direction:column;gap:14px}.sp.on{display:flex;animation:sin .45s var(--ease)}
.tn3{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}.tn3 .tb{border:1px solid var(--bd2);border-radius:12px;padding:14px;text-align:center;background:var(--card2);transition:all .4s;position:relative}.tn3 .tb.me{border-color:var(--acc)}.tn3 .tb.bad{border-color:#ef4444;animation:shake .4s}@keyframes shake{25%{transform:translateX(-5px)}75%{transform:translateX(5px)}}
.tn3 .cyl2{height:40px;border:2px solid var(--bd2);border-radius:12px;margin:10px 0}.tn3 .tb.me .cyl2{border-color:var(--acc)}.tn3 .tb.bad .cyl2{border-color:#ef4444}
.pm2{width:100%;border-collapse:collapse;font-size:.85rem}.pm2 th,.pm2 td{padding:11px 8px;border-bottom:1px solid var(--bd);text-align:center}.pm2 th:first-child,.pm2 td:first-child{text-align:left}.pm2 thead th{color:var(--mut);font-size:.75rem;font-weight:600}
.tg2{display:inline-block;width:34px;height:20px;border-radius:99px;background:var(--bd2);position:relative;transition:background .3s;cursor:pointer}.tg2::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .3s var(--ease)}.tg2.on{background:var(--acc)}.tg2.on::after{transform:translateX(14px)}
/* avant / après */
.cmpw{position:relative;margin-top:44px;border:1px solid var(--bd2);border-radius:16px;overflow:hidden;aspect-ratio:16/8.5;background:var(--card2);user-select:none}@media(max-width:800px){.cmpw{aspect-ratio:4/5}}
.cl2{position:absolute;inset:0;padding:22px}.cl2.after{clip-path:inset(0 0 0 var(--cut,50%));background:var(--bg2)}.cl2.before{background:#1a1b1e}
.lab{position:absolute;top:14px;font-size:.75rem;font-weight:700;letter-spacing:.06em;padding:.25rem .6rem;border-radius:6px;z-index:3;text-transform:uppercase}
.cmpw input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:ew-resize;z-index:5;margin:0}.hdl{position:absolute;top:0;bottom:0;left:var(--cut,50%);width:2px;background:var(--acc2);z-index:4;pointer-events:none}.hdl::after{content:'⇆';position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);width:38px;height:38px;border-radius:50%;background:var(--acc);display:grid;place-items:center;color:#fff;font-size:1rem}
.dm{display:grid;gap:8px;font-family:'Inter';font-size:.82rem}.dm div{background:#2b2d31;border-radius:6px;padding:8px 10px;color:#dbdee1}.dm b{color:#f2a900}.dm small{color:#80848e;margin-left:6px}
.sh2{display:grid;grid-template-columns:repeat(6,1fr);gap:2px;margin-top:14px;font-size:.75rem;font-family:'JetBrains Mono',monospace}.sh2 span{padding:5px;background:#26282b;color:#9aa0a6;border:1px solid #3a3d41;overflow:hidden;white-space:nowrap}.sh2 .y{background:#4a4320;color:#e8d57a}.sh2 .r{background:#4a2323;color:#f19a9a}
.cmpr{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:22px}@media(max-width:900px){.cmpr{grid-template-columns:1fr 1fr}}.cmpr div{border:1px solid var(--bd2);border-radius:12px;padding:16px;background:var(--card)}.cmpr b{display:block;margin-bottom:6px}.cmpr s{display:block;color:var(--mut);font-size:.85rem}.cmpr span{display:block;margin-top:6px;font-size:.88rem;color:#fff}.cmpr span::before{content:'✓ ';color:var(--acc2);font-weight:700}

@keyframes upl{0%{width:0}100%{width:100%}}

/* ===== v8 : catalogue de thèmes réels ===== */
.tcat{display:grid;grid-template-columns:240px 1fr;gap:24px;align-items:start}@media(max-width:1000px){.tcat{grid-template-columns:1fr}}
.tlist{display:grid;gap:8px}@media(max-width:1000px){.tlist{grid-template-columns:repeat(4,1fr)}}@media(max-width:560px){.tlist{grid-template-columns:repeat(2,1fr)}}
.tbtn{display:flex;align-items:center;gap:12px;text-align:left;padding:12px;border:1px solid var(--bd2);border-radius:12px;background:var(--card);transition:all .3s var(--ease)}.tbtn:hover{border-color:var(--acc2);transform:translateX(3px)}.tbtn.on{border-color:var(--acc);background:var(--card2);transform:none}
.tbtn .sw3{display:flex;flex:none}.tbtn .sw3 i{width:14px;height:34px;display:block}.tbtn .sw3 i:first-child{border-radius:6px 0 0 6px}.tbtn .sw3 i:last-child{border-radius:0 6px 6px 0}.tbtn b{display:block;font-size:.9rem}.tbtn span{font-size:.75rem;color:var(--mut)}
.tshow{border:1px solid var(--bd2);border-radius:16px;overflow:hidden;background:var(--tb);color:var(--tt);font-family:var(--tfb);transition:background .5s var(--ease),color .5s var(--ease);box-shadow:0 40px 80px -30px rgba(0,0,0,.8)}
.tshow .nav3{display:flex;justify-content:space-between;align-items:center;padding:14px 22px;background:var(--ts);border-bottom:1px solid var(--tbd);transition:background .5s}.tshow .nav3 b{font-family:var(--tfh);font-size:1.1rem;letter-spacing:.02em}.tshow .nav3 nav{display:flex;gap:18px;font-size:.82rem;color:var(--tm);font-family:var(--tfa)}
.tshow .hro{position:relative;aspect-ratio:16/7;overflow:hidden}.tshow .hro img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;animation:tin .8s var(--ease)}.tshow .hro .ov{position:absolute;inset:0;background:rgba(0,0,0,.45)}
.tshow .hro .tx{position:absolute;left:28px;bottom:26px;right:28px;color:#fff;animation:tin .7s var(--ease)}.tshow .hro h3{font-family:var(--tfh);font-size:clamp(1.4rem,3vw,2.4rem);line-height:1.05;margin-bottom:12px;text-shadow:0 2px 12px rgba(0,0,0,.5)}
@keyframes tin{from{opacity:0;transform:translateY(10px) scale(1.02)}}
.tbtnp{display:inline-block;padding:.75rem 1.4rem;cursor:pointer;transition:transform .15s,filter .2s;font-size:.9rem}.tbtnp:hover{filter:brightness(1.1)}.tbtnp:active{transform:translate(2px,3px)}
.tshow .cols{display:grid;grid-template-columns:1fr 1fr 1.25fr;gap:0}@media(max-width:900px){.tshow .cols{grid-template-columns:1fr}}
.tshow .cols>div{padding:22px;border-right:1px solid var(--tbd)}.tshow .cols>div:last-child{border-right:0}
.tshow h6{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--tm);margin-bottom:12px;font-family:var(--tfa)}
.pal{display:grid;grid-template-columns:repeat(3,1fr);gap:8px}.pal div{border:1px solid var(--tbd);border-radius:var(--trd);overflow:hidden;font-size:.75rem}.pal i{display:block;height:38px}.pal span{display:block;padding:4px 6px;font-family:var(--tfa);background:var(--ts);color:var(--tm)}
.fnt{margin-top:14px;display:grid;gap:6px;font-size:.82rem}.fnt div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--tbd);padding-bottom:5px}.fnt span{color:var(--tm);font-size:.75rem}
.cmpn{display:grid;gap:12px}.tin{background:var(--ts);border:1px solid var(--tbd);border-radius:var(--trd);padding:.65rem .8rem;color:var(--tt);font:inherit;font-size:.85rem;width:100%}
.bdg{display:flex;gap:6px;flex-wrap:wrap}.bdg span{padding:.2rem .6rem;font-size:.75rem;font-weight:700;border-radius:var(--trd);background:var(--ta);color:var(--tos);font-family:var(--tfa)}.bdg span.o{background:transparent;border:1px solid var(--ta);color:var(--ta)}
.tcard{background:var(--ts);border:1px solid var(--tbd);border-radius:var(--trd);padding:14px;font-size:.84rem}.tcard b{font-family:var(--tfh);display:block;font-size:1rem;margin-bottom:4px}
.kit{display:block;width:100%;border-radius:var(--trd);border:1px solid var(--tbd);animation:tin .7s var(--ease)}
.tbar{display:flex;gap:8px;flex-wrap:wrap;padding:12px 22px;border-top:1px solid var(--tbd);background:var(--ts);font-size:.76rem;color:var(--tm);align-items:center;font-family:var(--tfa)}

/* ===== v9 ===== */
.tcards{display:grid;grid-template-columns:1fr 1fr;gap:24px}.tcards.one{grid-template-columns:1fr}@media(max-width:1180px){.tcards{grid-template-columns:1fr}}
.tc{display:grid;grid-template-columns:1.2fr .8fr;border:1px solid var(--bd2);border-radius:20px;overflow:hidden;background:var(--card);min-height:360px;transition:border-color .3s,box-shadow .4s var(--ease),transform .4s var(--ease)}
.tc:hover{border-color:var(--acc);box-shadow:0 30px 60px -30px rgba(0,0,0,.8);transform:translateY(-3px)}
.tc.big{grid-template-columns:1.1fr .9fr;min-height:420px}.tc.rev .tc-r{order:-1}
.tc-l{padding:28px;display:flex;flex-direction:column;gap:12px;min-width:0}.tc-l h3{font-size:1.35rem;font-weight:700;letter-spacing:-.01em}.tc-l>p{color:var(--sub);font-size:.95rem}
.tc-tag{align-self:flex-start;font-size:.75rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;padding:.2rem .6rem;border-radius:6px;border:1px solid color-mix(in srgb,var(--acc) 45%,transparent);color:var(--acc2)}.tc-tag.warn{color:#fbbf24;border-color:#fbbf2455}.tc-tag.ext{color:#a5b4fc;border-color:#a5b4fc55}
.tc-cta{margin-top:auto;padding-top:8px;color:var(--acc2);font-weight:600;font-size:.9rem;transition:letter-spacing .25s}.tc-cta:hover{letter-spacing:.02em}
.tc-r{position:relative;overflow:hidden;min-height:220px;background:var(--bg2)}.tc-r img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}.tc:hover .tc-r img{transform:scale(1.06)}
.tc-r::after{content:'';position:absolute;inset:0;background:rgba(2,6,23,.18)}
@media(max-width:760px){.tc,.tc.big{grid-template-columns:1fr}.tc-r,.tc.rev .tc-r{order:-1;height:210px;min-height:210px}}
.mk{border:1px solid var(--bd2);border-radius:12px;background:var(--bg);overflow:hidden;font-size:.8rem;margin-top:auto}.mk .mh{display:flex;gap:6px;align-items:center;padding:8px 12px;border-bottom:1px solid var(--bd);color:var(--mut);font-size:.75rem}.mk .mh i{width:8px;height:8px;border-radius:50%;background:var(--bd2)}.mk .mh span{margin-left:6px}.mk .live{margin-left:auto;font-style:normal;color:#34d399;display:flex;align-items:center;gap:6px}.mk .live::before{content:'';width:6px;height:6px;border-radius:50%;background:#34d399;animation:pulse 1.6s infinite}.mk .mb{padding:14px}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.tc-ui{margin-top:auto}.tc .tc-ui .mk{margin-top:0}
.mg{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}.mg .chip{font-size:.75rem}
.mbtn{background:var(--acc);color:#fff;border-radius:8px;padding:.4rem .8rem;font-size:.78rem;font-weight:600;transition:background .2s,transform .15s}.mbtn:hover{background:var(--acc2)}.mbtn:active{transform:scale(.96)}.mbtn.o{background:transparent;border:1px solid var(--bd2);color:var(--sub)}
.cur{display:inline-block;width:2px;height:1.1em;background:var(--acc2);vertical-align:-2px;margin-left:2px;animation:pulse 1s steps(1) infinite}
/* avant / après */
.ba{display:grid;grid-template-columns:1fr 1fr;gap:20px}@media(max-width:900px){.ba{grid-template-columns:1fr}}
.bacol{border-radius:20px;border:1px solid var(--bd2);padding:28px;background:var(--card);display:flex;flex-direction:column}.bacol.good{border-color:var(--acc);background:var(--card2)}
.bah{margin-bottom:18px}.bah h3{font-size:1.3rem;margin-top:8px}.bl{display:inline-block;font-size:.75rem;font-weight:700;letter-spacing:.06em;text-transform:uppercase;padding:.2rem .6rem;border-radius:6px;background:#3f3f46;color:#e4e4e7}.bl.g{background:var(--acc);color:#fff}
.bol{list-style:none;padding:0;display:grid;gap:0;counter-reset:s}
.bs{display:grid;grid-template-columns:34px 1fr auto;gap:14px;align-items:center;padding:13px 0;border-bottom:1px dashed var(--bd2);opacity:0;transform:translateX(-14px);transition:opacity .5s var(--ease),transform .5s var(--ease)}.bs.in{opacity:1;transform:none}
.bs .no{width:30px;height:30px;border-radius:50%;display:grid;place-items:center;font-size:.8rem;font-weight:700;border:1px solid var(--bd2);color:var(--mut)}.bacol.good .bs .no{background:var(--acc);border-color:var(--acc);color:#fff}
.bs span.t{font-size:.95rem}.bs em{font-style:normal;font-size:.75rem;padding:.15rem .5rem;border-radius:6px;border:1px solid var(--bd2);color:var(--mut)}.bs em.d{color:#a5b4fc;border-color:#a5b4fc55}.bs em.s{color:#86efac;border-color:#86efac55}.bs em.p{color:var(--acc2);border-color:color-mix(in srgb,var(--acc) 55%,transparent)}
.bs .wn{grid-column:2/4;font-size:.76rem;color:#fbbf24;margin-top:-6px}
.baf{display:flex;gap:28px;align-items:flex-end;flex-wrap:wrap;margin-top:auto;padding-top:22px}.baf div b{display:block;font-size:2.6rem;line-height:1;font-weight:800;font-variant-numeric:tabular-nums}.bacol.good .baf div b{color:var(--acc2)}.baf div span{font-size:.78rem;color:var(--mut)}.bw{flex:1;min-width:200px;font-size:.88rem;color:#fbbf24}.bw.ok{color:#34d399}
/* faq */
.faqw{display:grid;grid-template-columns:4fr 8fr;gap:56px}@media(max-width:900px){.faqw{grid-template-columns:1fr;gap:28px}}
.faql{border-top:1px solid var(--bd2)}.faql details{padding:0;border-bottom:1px solid var(--bd2)}.faql summary{display:flex;align-items:center;gap:16px;padding:22px 4px;font-size:1.05rem;transition:color .25s,padding .3s var(--ease)}.faql summary:hover,.faql details[open] summary{color:var(--acc2)}.faql .fn{font-family:'JetBrains Mono',monospace;font-size:.75rem;color:var(--mut)}.faql .pl{margin-left:auto}
.faql details[open] p{animation:sin .45s var(--ease)}.faql p{padding:0 4px 24px 44px;color:var(--sub);max-width:42rem}
/* footer */
.ft{border-top:1px solid var(--bd);padding:64px 0 36px;background:var(--bg)}.ftg{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:32px}@media(max-width:800px){.ftg{grid-template-columns:1fr 1fr}}
.ft h6{font-size:.75rem;letter-spacing:.08em;text-transform:uppercase;color:var(--mut);margin-bottom:14px}.ft a{display:block;color:var(--sub);font-size:.9rem;padding:4px 0;transition:color .2s}.ft a:hover{color:var(--acc2)}.ft .cp{margin-top:44px;padding-top:22px;border-top:1px solid var(--bd);font-size:.8rem;color:var(--mut);display:flex;justify-content:space-between;flex-wrap:wrap;gap:10px}
/* bandeau jeux */
.logos{border-bottom:1px solid var(--bd);background:var(--bg)}.logos .wrap{display:flex;align-items:center;gap:36px;flex-wrap:wrap;padding-top:26px;padding-bottom:26px}.logos span{font-size:.8rem;color:var(--mut)}.logos img{height:30px;width:auto;opacity:.55;filter:grayscale(1);transition:all .3s}.logos img:hover{opacity:1;filter:none}
/* nav actif + retour haut */
.nav nav a.act{color:#fff}.nav nav a.act::after{content:'';display:block;height:2px;background:var(--acc2);margin-top:4px;border-radius:2px}
.res{margin-top:20px;padding:14px;border:1px dashed color-mix(in srgb,var(--acc) 55%,transparent);border-radius:14px;font-size:.84rem}
/* ===== v10 : sobriété, héros par parcours ===== */
:root{--r:12px}
.eyebrow{font-family:'JetBrains Mono',monospace;text-transform:none;letter-spacing:0;font-weight:500;color:var(--mut);font-size:.82rem}
.eyebrow::before{content:'/ ';color:var(--acc2)}
h2{font-weight:650}
.card,.tc,.bacol,.mk,.tshow,.br2,.tab,.win,.prev,.gp,.faql,.themer .ctl{border-radius:var(--r)}
.tc{box-shadow:none}.tc:hover{transform:none;box-shadow:none}.tile:hover{transform:none}
.persona{border-left:0;padding-left:0;color:var(--mut)}#ptabs{display:none}
.win{box-shadow:none}.browser,.br2{box-shadow:none}
.btn{border-radius:8px}.btn:hover{transform:none}
.nav nav a{font-size:.88rem}.nav .alt-link{color:var(--mut);font-size:.82rem;border:1px solid var(--bd2);border-radius:8px;padding:.35rem .7rem}.nav .alt-link:hover{color:#fff;border-color:var(--acc2)}
/* héros */
.hh{background:var(--bg);border-bottom:1px solid var(--bd);padding-top:68px}
.hh .wrap{display:grid;grid-template-columns:6fr 6fr;gap:56px;align-items:center;padding-top:64px;padding-bottom:72px;min-height:calc(100vh - 68px)}
@media(max-width:1000px){.hh .wrap{grid-template-columns:1fr;min-height:0;gap:40px}}
.hh h1{font-size:clamp(2.4rem,5vw,4.2rem);line-height:1.05;font-weight:700;letter-spacing:-.025em}
.hh .sub{margin-top:22px;font-size:1.12rem;color:var(--sub);max-width:34rem}
.hh .meta{display:flex;gap:32px;flex-wrap:wrap;margin-top:44px;padding-top:22px;border-top:1px solid var(--bd);font-size:.84rem;color:var(--mut)}.hh .meta b{display:block;color:var(--tx);font-weight:600;font-size:.92rem;margin-bottom:2px}
.vis{position:relative;height:540px}@media(max-width:1000px){.vis{height:470px}}
.vis .ph{position:absolute;inset:0 0 44px 70px;border-radius:var(--r);overflow:hidden;border:1px solid var(--bd2)}.vis .ph img{width:100%;height:100%;object-fit:cover}.vis .ph::after{content:'';position:absolute;inset:0;background:rgba(2,6,23,.22)}
.vis .c1{position:absolute;left:0;bottom:0;width:64%}.vis .c2{position:absolute;right:0;top:30px;width:50%}
@media(max-width:560px){.vis .c1{width:86%}.vis .c2{display:none}.vis .ph{inset:0 0 44px 0}}
.vc{background:var(--card2);border:1px solid var(--bd2);border-radius:var(--r);font-size:.8rem;overflow:hidden}.vc .vh{padding:10px 14px;border-bottom:1px solid var(--bd);display:flex;justify-content:space-between;color:var(--mut);font-size:.75rem}.vc .vb{padding:12px;display:grid;gap:8px}
.vr{display:flex;align-items:center;gap:10px;padding:8px 10px;border:1px solid var(--bd);border-radius:8px;background:var(--card);transition:opacity .4s,transform .4s var(--ease),background .3s}
.vr.out{opacity:.35}.vr.new{animation:sin .45s var(--ease)}
.vr .av{width:26px;height:26px;font-size:.75rem}
.vr b{font-weight:600}.vr .sm{font-size:.75rem}
.vr .st{margin-left:auto;font-size:.75rem;padding:.12rem .45rem;border-radius:6px;border:1px solid var(--bd2);color:var(--mut);transition:all .3s}.vr.ok .st{color:#34d399;border-color:#34d39955;background:#10b98115}
.opt{display:flex;gap:6px}.opt span{flex:1;text-align:center;padding:.45rem;border:1px solid var(--bd2);border-radius:8px;font-weight:600;transition:all .3s}.opt span.on{background:var(--acc);border-color:var(--acc);color:#fff}
.fld{border:1px solid var(--bd2);border-radius:8px;padding:.55rem .7rem;background:var(--card);font-family:'JetBrains Mono',monospace;min-height:36px}
.pbar{height:6px;border-radius:3px;background:var(--bd);overflow:hidden}.pbar i{display:block;height:100%;background:var(--acc);transition:width .6s var(--ease)}
/* accueil */
.pick{border-top:1px solid var(--bd)}
.pk1{position:relative;display:block;overflow:hidden;border-bottom:1px solid var(--bd);min-height:30vh}
.pk1 img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1.2s var(--ease)}.pk1:hover img{transform:scale(1.04)}.pk1::after{content:'';position:absolute;inset:0;background:rgba(2,6,23,.72);transition:background .4s}.pk1:hover::after{background:rgba(2,6,23,.55)}
.pk1 .in9{position:relative;z-index:1;display:grid;grid-template-columns:90px 1fr auto;gap:24px;align-items:center;padding:56px 0}@media(max-width:700px){.pk1 .in9{grid-template-columns:1fr;gap:10px;padding:36px 0}}
.pk1 .n9{font-family:'JetBrains Mono',monospace;color:var(--acc2);font-size:.9rem}.pk1 h2{font-size:clamp(1.8rem,3.6vw,3rem)}.pk1 p{color:var(--sub);margin-top:8px;max-width:38rem}.pk1 .go9{font-weight:600;color:var(--acc2);white-space:nowrap}

/* ===== v11 : hubs et sous-parcours ===== */
.crumb{display:flex;gap:8px;align-items:center;font-size:.84rem;color:var(--mut)}.crumb a:hover{color:#fff}.crumb b{color:var(--tx);font-weight:500}
.note{margin-top:22px;padding:12px 14px;border:1px solid #fbbf2455;background:#fbbf2410;color:#fcd34d;border-radius:8px;font-size:.85rem;max-width:34rem}
.hg{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:1000px){.hg{grid-template-columns:repeat(2,1fr)}}@media(max-width:620px){.hg{grid-template-columns:1fr}}
.hc{display:flex;flex-direction:column;border:1px solid var(--bd2);border-radius:var(--r);overflow:hidden;background:var(--card);transition:border-color .25s}.hc:hover{border-color:var(--acc)}
.hc .im{position:relative;aspect-ratio:16/10;overflow:hidden;background:var(--bg2)}.hc .im img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;transition:transform 1s var(--ease)}.hc:hover .im img{transform:scale(1.05)}
.hc .bd{padding:18px 18px 20px;display:flex;flex-direction:column;gap:8px;flex:1}.hc h3{font-size:1.1rem}.hc p{font-size:.9rem;color:var(--sub);flex:1}.hc .go{font-size:.85rem;font-weight:600;color:var(--acc2);margin-top:4px}
.tg3{display:flex;gap:6px;flex-wrap:wrap}.tg3 span{font-size:.75rem;font-weight:600;padding:.15rem .5rem;border-radius:6px;border:1px solid var(--bd2);color:var(--mut)}.tg3 .ok{color:#34d399;border-color:#34d39955}.tg3 .wip{color:#fbbf24;border-color:#fbbf2455}.tg3 .soon{color:#a5b4fc;border-color:#a5b4fc55}
.st4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--bd2);border-radius:var(--r);overflow:hidden}@media(max-width:900px){.st4{grid-template-columns:1fr 1fr}}@media(max-width:520px){.st4{grid-template-columns:1fr}}
.st4>div{padding:24px;border-right:1px solid var(--bd2);background:var(--card)}.st4>div:last-child{border-right:0}.st4 .n{font-family:'JetBrains Mono',monospace;color:var(--acc2);font-size:.8rem}.st4 h3{font-size:1rem;margin-top:10px}.st4 p{font-size:.88rem;color:var(--mut);margin-top:6px}
.code{margin:12px 0 0;padding:12px 14px;background:#050b17;border:1px solid var(--bd2);border-radius:8px;font-family:'JetBrains Mono',monospace;font-size:.75rem;color:#cbd5e1;white-space:pre-wrap;overflow:auto}
.gsty{display:grid;grid-template-columns:1fr 1fr;gap:20px;align-items:center}@media(max-width:900px){.gsty{grid-template-columns:1fr}}.gsty img{width:100%;border:1px solid var(--bd2);border-radius:var(--r);display:block}.gsty.two{grid-template-columns:1fr 1fr}
.sib{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}@media(max-width:900px){.sib{grid-template-columns:repeat(2,1fr)}}.sib a{padding:14px;border:1px solid var(--bd2);border-radius:10px;font-size:.9rem;background:var(--card);transition:border-color .2s}.sib a:hover,.sib a.cur{border-color:var(--acc);color:var(--acc2)}.sib span{display:block;font-size:.75rem;color:var(--mut);margin-top:2px}
/* skins de jeu */
.skin-redm .vc,.skin-redm .mk{background:#e8d9b5;color:#3b2a1a;border:2px solid #5b4228;border-radius:4px;font-family:Cinzel,serif}.skin-redm .vc .vh,.skin-redm .mk .mh{color:#6b5436;border-color:#bfa77a;background:#decb9b}.skin-redm .mk .mh i{background:#bfa77a}
.skin-redm .vr,.skin-redm .mk .row{background:#efe2c0;border:1px solid #bfa77a;color:#3b2a1a;border-radius:3px}.skin-redm .vr .st,.skin-redm .mk .chip{color:#5b4228;border-color:#5b4228;background:transparent}.skin-redm .vr.ok .st{color:#2f5d2a;background:#d8e6c3;border-color:#2f5d2a}.skin-redm .av{background:#5b4228;color:#f3e7c9}.skin-redm .vr .sm,.skin-redm .mk .sm{color:#6b5436}
.skin-mc .vc,.skin-mc .mk{background:#2b2b2b;color:#e5e5e5;border:2px solid #1a1a1a;border-radius:2px;font-family:'VT323',monospace;font-size:1.05em}.skin-mc .vc .vh,.skin-mc .mk .mh{color:#a3a3a3;border-color:#1a1a1a;background:#232323}
.skin-mc .vr,.skin-mc .mk .row{background:#3a3a3a;border:2px solid #1a1a1a;border-radius:0}.skin-mc .av{background:#8d6b4a;border-radius:0}.skin-mc .vr .st,.skin-mc .mk .chip{border-radius:0;border-width:2px}.skin-mc .vr.ok .st{background:#5d9b3a;color:#fff;border-color:#1a1a1a}
.skin-redm .tc,.skin-redm .hc{border-radius:4px}.skin-mc .tc,.skin-mc .hc{border-radius:2px}

/* ===== v12 ===== */
.logos2{border-bottom:1px solid var(--bd);background:var(--bg)}.logos2 .wrap{padding-top:26px;padding-bottom:26px;display:grid;gap:14px}
.lrow{display:flex;gap:16px;align-items:center;flex-wrap:wrap}.lrow .lh{width:110px;font-size:.75rem;color:var(--mut);font-family:'JetBrains Mono',monospace;flex:none}@media(max-width:700px){.lrow .lh{width:100%}}
.lchips{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.lg{display:inline-flex;align-items:center;gap:8px;padding:.35rem .7rem;border:1px solid var(--bd2);border-radius:8px;font-size:.82rem;color:var(--mut);background:var(--card);transition:color .2s,border-color .2s,transform .25s var(--ease);white-space:nowrap}
.lg:hover{color:var(--tx);border-color:var(--acc2);transform:translateY(-2px)}.lg img{height:20px;width:auto;opacity:.75}.lg i{font-style:normal;font-family:'JetBrains Mono',monospace;color:var(--acc2);font-size:.8rem}.lg.soon{opacity:.6}.lg small{font-size:.75rem;color:#a5b4fc}
.r4{display:grid;grid-template-columns:repeat(4,1fr);gap:0;border:1px solid var(--bd2);border-radius:var(--r);overflow:hidden}@media(max-width:900px){.r4{grid-template-columns:1fr 1fr}}@media(max-width:520px){.r4{grid-template-columns:1fr}}
.r4>div{padding:22px;border-right:1px solid var(--bd2);background:var(--card)}.r4>div:last-child{border-right:0}.r4 h3{font-size:1rem}.r4 p{font-size:.88rem;color:var(--mut);margin-top:8px}
.jg{display:grid;grid-template-columns:repeat(3,1fr);gap:12px}@media(max-width:800px){.jg{grid-template-columns:1fr 1fr}}@media(max-width:480px){.jg{grid-template-columns:1fr}}
.jg>div{padding:16px;border:1px solid var(--bd2);border-radius:10px;background:var(--card)}.jg b{display:block;font-size:.95rem}.jg span{font-size:.82rem;color:var(--mut)}
/* transition entre pages : morphing carte -> héros (JS) */
.fl-o{position:fixed;z-index:300;background-size:cover;background-position:center;pointer-events:none;will-change:left,top,width,height}
.fl-s{position:fixed;inset:0;z-index:299;background:#020617;opacity:0;pointer-events:none}

#mbar{position:sticky;top:0;z-index:100;display:flex;gap:12px;align-items:center;justify-content:center;flex-wrap:wrap;padding:10px 16px;background:#0f766e;color:#fff;font-size:.86rem}
#mbar[hidden]{display:none}#mbar .mbtn{background:#fff;color:#0f172a;border-radius:8px;padding:.35rem .8rem;font-weight:600;border:0;cursor:pointer}#mbar .mbtn.o{background:transparent;color:#fff;border:1px solid #fff9}
.mtog{background:transparent;border:1px solid var(--bd2);color:var(--sub);border-radius:8px;padding:.3rem .7rem;font-size:.8rem;cursor:pointer}.mtog:hover{border-color:var(--acc2);color:#fff}

/* ===== v13 : SEO, outils jouables, pages marketing ===== */
.skip{position:absolute;left:-9999px;top:8px;z-index:200;background:#fff;color:#0f172a;padding:.5rem .9rem;border-radius:8px;font-weight:600}.skip:focus{left:8px}
.tgrid2{display:grid;grid-template-columns:1fr 1fr;gap:28px}@media(max-width:1000px){.tgrid2{grid-template-columns:1fr}}.tt3{font-size:1rem;margin-bottom:10px}
.tool .mk{margin-top:0}.tool.big .mk{font-size:.9rem}
.fgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}@media(max-width:900px){.fgrid{grid-template-columns:1fr 1fr}}@media(max-width:560px){.fgrid{grid-template-columns:1fr}}
.fg{padding:22px;border:1px solid var(--bd2);border-radius:var(--r);background:var(--card)}.fg h3{font-size:1rem;margin-bottom:12px}.fg ul{list-style:none;padding:0;display:grid;gap:8px}.fg a{color:var(--sub);font-size:.92rem;transition:color .2s}.fg a:hover{color:var(--acc2)}
.tblw{overflow-x:auto;margin-top:28px}.cmp{width:100%;border-collapse:collapse;font-size:.95rem}.cmp th,.cmp td{padding:16px;border-bottom:1px solid var(--bd2);text-align:left;vertical-align:top}.cmp thead th{font-size:.8rem;color:var(--mut)}.cmp tbody th{color:#fff;width:20%;font-weight:600}.cmp td:last-child{color:#fff}.cmp td:last-child::before{content:'✓ ';color:var(--acc2);font-weight:700}
.gl{display:grid;grid-template-columns:1fr 1fr;gap:0 40px;margin-top:28px}@media(max-width:800px){.gl{grid-template-columns:1fr}}.gl>div{padding:18px 0;border-bottom:1px solid var(--bd2)}.gl dt{font-weight:600;color:var(--acc2)}.gl dd{margin:6px 0 0;color:var(--sub);font-size:.95rem}
.ckg{border:1px solid var(--bd2);border-radius:var(--r);padding:16px 18px 10px;margin:0 0 16px;background:var(--card)}.ckg legend{padding:0 8px;font-weight:600;color:var(--acc2)}
.ci{display:flex;gap:12px;align-items:center;padding:11px 4px;border-bottom:1px dashed var(--bd2);cursor:pointer;transition:color .2s}.ci:last-child{border-bottom:0}.ci i{width:18px;height:18px;border:1.5px solid var(--bd2);border-radius:5px;flex:none;display:grid;place-items:center;font-style:normal;font-size:.75rem;transition:all .2s}.ci.on{color:var(--mut);text-decoration:line-through}.ci.on i{background:var(--acc);border-color:var(--acc);color:#fff}.ci.on i::after{content:'✓'}
.lpb{list-style:none;padding:0;margin-top:26px;display:grid;gap:14px}.lpb li{display:grid;gap:2px;padding-left:18px;position:relative}.lpb li::before{content:'';position:absolute;left:0;top:.5em;width:8px;height:8px;border-radius:50%;background:var(--acc)}.lpb b{font-size:1rem}.lpb span{color:var(--mut);font-size:.9rem}
#stickycta{position:fixed;left:0;right:0;bottom:0;z-index:90;padding:12px 16px;background:var(--bg);border-top:1px solid var(--bd);display:none;transform:translateY(100%);transition:transform .35s var(--ease)}#stickycta.on{transform:none}@media(max-width:800px){#stickycta{display:block}}#stickycta .btn{width:100%;justify-content:center}
/* démo interactive */
.demo9{display:grid;grid-template-columns:7fr 5fr;gap:20px}@media(max-width:960px){.demo9{grid-template-columns:1fr}}
.dtabs{display:flex;gap:6px;padding:12px;border-bottom:1px solid var(--bd);flex-wrap:wrap}.dt{padding:.45rem .9rem;border-radius:8px;font-size:.85rem;font-weight:600;color:var(--mut)}.dt.on{background:var(--bg2);color:var(--tx)}
.pane{display:none;padding:18px}.pane.on{display:block}
.ap{display:flex;align-items:center;gap:12px;padding:12px;border:1px solid var(--bd);border-radius:10px;margin-bottom:10px;background:var(--card2)}.ap .sm{font-size:.8rem;color:var(--mut)}
.b2{padding:.4rem .8rem;border-radius:8px;font-size:.8rem;font-weight:600;border:1px solid var(--bd2);transition:all .2s}.b2.ok{background:var(--acc);border-color:var(--acc);color:#fff}.b2.no:hover{border-color:#ef4444;color:#ef4444}
.demo9 select{font:inherit;background:var(--card2);color:var(--tx);border:1px solid var(--bd2);border-radius:8px;padding:.5rem .7rem;width:100%}
.lr{display:grid;grid-template-columns:54px 1fr auto;gap:10px;padding:11px 16px;border-bottom:1px solid var(--bd);font-size:.85rem;align-items:center}.lr.new{animation:flash .9s var(--ease)}@keyframes flash{from{background:color-mix(in srgb,var(--acc) 22%,transparent);transform:translateY(-8px);opacity:0}to{background:transparent;transform:none;opacity:1}}
.tag{font-size:.75rem;font-weight:600;border-radius:6px;padding:.15rem .5rem;border:1px solid var(--bd2)}
.demo9 .tog{width:44px;height:24px;border-radius:999px;background:var(--bd2);position:relative;flex:none;transition:background .25s}.demo9 .tog::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}.demo9 .tog.on{background:var(--acc)}.demo9 .tog.on::after{transform:translateX(20px)}

/* ===== corrections de l'audit UI/UX ===== */
img{height:auto;max-width:100%}
html{scroll-padding-top:84px}
:root{--onacc:#03201c}
.btn:not(.o):not(.ghost),.pl2.on,.pt.on,.tt.on,.chip.on,.gt.on,.mbtn:not(.o),.b2.ok,.av,.logo i,.bl.g,.opt span.on,.tt2.on,.ck9,.ci.on i,.ck.on i,.tg.on-tg{color:var(--onacc)}
.bacol.good .bs .no{color:var(--onacc)}
.skin-mc .av{color:#fff}.skin-redm .av{color:#f3e7c9}
.btn.o,.mbtn.o,.btn.ghost{color:var(--tx)}.btn.ghost{color:var(--acc2)}
/* peaux de jeu : contrastes */
.skin-mc .vr .st,.skin-mc .mk .chip{color:#e5e5e5}.skin-mc .vr .sm,.skin-mc .mk .sm,.skin-mc .vc .sm{color:#d0d0d0}.skin-mc .vr.ok .st{background:#7bc653;color:#0b1a06}
.skin-mc .vr{padding:6px 8px}.skin-mc .vc{font-size:1rem}
.skin-redm .vc .vh,.skin-redm .mk .mh,.skin-redm .vc .vh span,.skin-redm .mk .mh span{color:#4a3720}.skin-redm .vr .mono,.skin-redm .mk .mono{color:#6b2d0f!important}.skin-redm .vr .sm,.skin-redm .mk .sm,.skin-redm .vc .sm{color:#4a3720}
.skin-redm .vr.ok .st{color:#1f4a1a}
/* titres de scène sans niveau de titre */
.sc .h4{font-size:.95rem;margin-bottom:12px;font-weight:600}
.fg h2{font-size:1rem;margin-bottom:12px;font-weight:600}
/* clavier : focus visible sur contrôles personnalisés */
.ci:focus-visible,.ck:focus-visible,[role=checkbox]:focus-visible{outline:2px solid var(--acc2);outline-offset:2px}
/* cibles tactiles */
@media(max-width:900px){.ft a{padding:.75rem 0;min-height:44px;display:flex;align-items:center}.crumb a{padding:.7rem .15rem;display:inline-block}.alt-link{padding:.65rem .9rem}.tc-cta{display:inline-block;padding:.8rem 0}.lg{padding:.55rem .8rem}.sib a{min-height:48px}.fg a{display:inline-block;padding:.5rem 0}.hc .go{padding:.4rem 0;display:inline-block}.mtog{padding:.6rem .9rem}.tt,.gt,.pt,.pl2{min-height:40px}.faql summary{min-height:52px}.btn{min-height:44px}.mbtn{min-height:40px}.b2{min-height:40px}.dt{min-height:40px}.ci{min-height:44px}}

#mbar{position:fixed;left:16px;right:16px;bottom:16px;max-width:760px;margin:0 auto;border-radius:12px;z-index:120;box-shadow:0 10px 30px -10px rgba(0,0,0,.6)}
body:has(#stickycta) #mbar{bottom:84px}

/* menu mobile */
.burger{display:none;width:44px;height:44px;border:1px solid var(--bd2);border-radius:10px;background:transparent;place-items:center;align-content:center;gap:4px;cursor:pointer}.burger i{display:block;width:18px;height:2px;background:var(--tx);border-radius:2px;transition:transform .25s var(--ease),opacity .2s}
.burger[aria-expanded=true] i:nth-child(1){transform:translateY(6px) rotate(45deg)}.burger[aria-expanded=true] i:nth-child(2){opacity:0}.burger[aria-expanded=true] i:nth-child(3){transform:translateY(-6px) rotate(-45deg)}
.mnav{display:none}
@media(max-width:860px){.burger{display:grid}.alt-link{display:none}.mnav{position:absolute;top:100%;left:0;right:0;background:var(--bg);border-bottom:1px solid var(--bd);padding:6px 24px 18px;display:grid}.mnav[hidden]{display:none}.mnav a{display:flex;align-items:center;min-height:48px;border-bottom:1px solid var(--bd);color:var(--sub);font-size:1rem}.mnav a:last-child{border-bottom:0;color:var(--acc2)}.nav .hin{gap:10px}.nav .hin>div:last-child{margin-left:auto}}

body[data-page=sub] .hh h1{font-size:clamp(2.2rem,4.4vw,3.6rem)}
body[data-page=sub] .hh .wrap{padding-top:20px;padding-bottom:56px}
body[data-page=sub] .hh .sub{margin-top:16px}
body[data-page=sub] .hh .meta{margin-top:32px}
#stickycta.on{display:block}
.logo i{color:var(--onacc)!important}
.ck9{font-size:.75rem!important;color:var(--onacc)!important}

.nav .btn{white-space:nowrap}
@media(max-width:520px){.nav .btn .mh{display:none}.nav .btn{padding:.5rem .9rem!important}.logo{font-size:1.05rem}}


/* ===== Studio : le panel comme héros ===== */
.studio{position:relative;border-bottom:1px solid var(--bd)}
.studio .intro{padding:104px 0 28px}
.studio .intro h1{font-size:clamp(2.4rem,5.4vw,4.6rem);line-height:1.03;font-weight:800;letter-spacing:-.03em;max-width:15ch}
.studio .intro .sub{margin-top:18px;font-size:1.15rem;color:var(--sub);max-width:44rem}
.studio .sk{display:flex;gap:8px;flex-wrap:wrap;margin-top:28px;align-items:center}.studio .sk span{font-size:.8rem;color:var(--mut);margin-right:6px}
.studio .track{position:relative}
.studio .pin{position:sticky;top:64px;height:calc(100vh - 64px);display:grid;grid-template-rows:1fr auto;gap:14px;padding:6px 0 18px}
.stage{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:22px;min-height:0}@media(max-width:1100px){.stage{grid-template-columns:1fr}.cap{display:none}}
.cap{align-self:center}.cap .n{font-family:'JetBrains Mono',monospace;color:var(--acc2);font-size:.8rem}.cap h2{font-size:1.7rem;line-height:1.1;margin-top:10px;font-weight:700}.cap p{margin-top:12px;color:var(--sub);font-size:1rem}
.cap .dots{display:flex;gap:6px;margin-top:22px}.cap .dots i{height:3px;flex:1;background:var(--bd2);border-radius:2px;overflow:hidden;position:relative}.cap .dots i b{position:absolute;inset:0;background:var(--acc2);transform-origin:left;transform:scaleX(var(--f,0))}
.mcap{display:none;padding:0 0 6px}@media(max-width:1100px){.mcap{display:block}.mcap b{display:block;font-size:1rem}.mcap span{font-size:.88rem;color:var(--mut)}}
/* fenêtre du panel */
.win{--wbg:#07060F;--sb:#0d0b1a;--sf:#12101F;--tx:#F4F1FF;--mu:#A7A1C2;--bd:#2B2645;--ac:#22D3EE;--on:#04121a;--fh:Montserrat,Inter,sans-serif;--fb:Inter,sans-serif;--rd:12px;
 position:relative;display:grid;grid-template-columns:190px minmax(0,1fr);min-height:0;border:1px solid var(--bd);border-radius:calc(var(--rd) + 4px);overflow:hidden;background:var(--wbg);color:var(--tx);font-family:var(--fb);font-size:.86rem;transition:background .5s var(--ease),color .5s,border-color .5s}
.win[data-skin=redm]{--wbg:#d9c59a;--sb:#5b4228;--sf:#ecdcb5;--tx:#3b2a1a;--mu:#6b5436;--bd:#bfa77a;--ac:#7a2e12;--on:#fff;--fh:Cinzel,serif;--fb:Nunito,sans-serif;--rd:4px}
.win[data-skin=minecraft]{--wbg:#1E1914;--sb:#2b2b2b;--sf:#3B2A1A;--tx:#F3E9D2;--mu:#C9B79A;--bd:#5C4128;--ac:#2ecc71;--on:#0e2a12;--fh:Silkscreen,monospace;--fb:Nunito,sans-serif;--rd:0px}
.win[data-skin=hytale]{--wbg:#EAF5FF;--sb:#FFF8E7;--sf:#FFFFFF;--tx:#16244A;--mu:#4a5a82;--bd:#9fc5ee;--ac:#F2B233;--on:#3a2300;--fh:'Lilita One',sans-serif;--fb:Nunito,sans-serif;--rd:16px}
.win h3,.win .fh{font-family:var(--fh)}
.win .sb{background:var(--sb);border-right:1px solid var(--bd);padding:14px 10px;display:flex;flex-direction:column;gap:4px;transition:background .5s}
.win[data-skin=redm] .sb{color:#f3e7c9}.win .sb .sx-lg{display:flex;gap:8px;align-items:center;font-weight:800;padding:4px 8px 14px;font-family:var(--fh)}.win .sb .sx-lg i{width:22px;height:22px;border-radius:calc(var(--rd)/2);background:var(--ac);color:var(--on);display:grid;place-items:center;font-style:normal;font-size:.75rem}
.win .sb button{display:flex;gap:10px;align-items:center;text-align:left;padding:.55rem .65rem;border-radius:calc(var(--rd)/1.5);color:var(--mu);transition:background .2s,color .2s;width:100%}.win[data-skin=redm] .sb button{color:#e3d2ad}
.win .sb button::before{content:'';width:12px;height:12px;border:1.5px solid currentColor;border-radius:3px;flex:none;opacity:.8}
.win .sb button:hover{background:color-mix(in srgb,var(--ac) 14%,transparent);color:var(--tx)}.win[data-skin=redm] .sb button:hover{color:#fff}
.win .sb button.on{background:var(--ac);color:var(--on)}.win .sb button.on::before{background:var(--on);border-color:var(--on)}
.win .sb .gm{margin-top:auto;padding:10px 8px 2px;border-top:1px solid var(--bd);font-size:.75rem;color:var(--mu)}.win[data-skin=redm] .sb .gm{color:#e3d2ad}
.win .mn{display:flex;flex-direction:column;min-width:0;min-height:0}
.win .tb{display:flex;align-items:center;gap:12px;padding:10px 16px;border-bottom:1px solid var(--bd);background:var(--sf);transition:background .5s}
.win .tb h3{font-size:1rem;font-weight:700;margin-right:auto}.win .tb .pill{font-size:.75rem;border:1px solid var(--bd);border-radius:999px;padding:.2rem .6rem;color:var(--mu);display:flex;gap:6px;align-items:center}.win .tb .pill i{width:7px;height:7px;border-radius:50%;background:#34d399}
.win .tb .srch{border:1px solid var(--bd);border-radius:var(--rd);padding:.35rem .7rem;color:var(--mu);min-width:160px;font-size:.8rem}@media(max-width:700px){.win .tb .srch{display:none}}
.win .vws{position:relative;flex:1;min-height:0;overflow:hidden}
.win .v{position:absolute;inset:0;padding:16px;overflow:auto;opacity:0;transform:translateY(10px);pointer-events:none;transition:opacity .35s var(--ease),transform .35s var(--ease)}.win .v.on{opacity:1;transform:none;pointer-events:auto}
.win .sx-card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--rd);padding:12px 14px;transition:background .5s,border-color .5s}
.win .sx-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-bottom:12px}@media(max-width:700px){.win .sx-kpis{grid-template-columns:1fr 1fr}}
.win .sx-kpis b{display:block;font-size:1.5rem;font-family:var(--fh);font-variant-numeric:tabular-nums}.win .sx-kpis span{font-size:.75rem;color:var(--mu)}
.win .btn2{display:inline-flex;align-items:center;gap:6px;padding:.45rem .85rem;border-radius:calc(var(--rd)/1.4);background:var(--ac);color:var(--on);font-weight:700;font-size:.8rem;transition:transform .15s,filter .2s;cursor:pointer;border:0}.win .btn2:hover{filter:brightness(1.1)}.win .btn2:active,.win .btn2.press{transform:scale(.94)}
.win .btn2.o{background:transparent;color:var(--tx);border:1px solid var(--bd)}
.win[data-skin=minecraft] .btn2{border:3px solid #0a3d1c;box-shadow:inset 3px 3px 0 #7cf0a4,inset -3px -3px 0 #0f8a41,0 3px 0 #0a3d1c;font-family:var(--fh);text-transform:uppercase;font-size:.7rem}.win[data-skin=minecraft] .btn2.o{border:3px solid #1f1f1f;box-shadow:inset 3px 3px 0 #a0a0a0,inset -3px -3px 0 #3d3d3d,0 3px 0 #1f1f1f;background:#6b6b6b;color:#fff}
.win[data-skin=hytale] .btn2{border:3px solid #8a5a00;border-radius:999px;box-shadow:inset 0 2px 0 #fff1c2,0 3px 0 #8a5a00;font-family:var(--fh);font-weight:400}.win[data-skin=redm] .btn2{border:2px solid #3b2a1a;font-family:var(--fh)}
.win .sx-row{display:flex;align-items:center;gap:10px;padding:9px 10px;border:1px solid var(--bd);border-radius:calc(var(--rd)/1.4);background:var(--sf);margin-bottom:8px;transition:opacity .35s,transform .35s var(--ease),max-height .35s,background .5s}
.win .sx-row.out{opacity:0;transform:translateX(24px)}.win .sx-row b{font-weight:700}.win .sx-row .g{flex:1;min-width:0}.win .sx-row small{display:block;color:var(--mu);font-size:.75rem}
.win .sx-av{width:28px;height:28px;border-radius:50%;background:var(--ac);color:var(--on);display:grid;place-items:center;font-weight:700;font-size:.75rem;flex:none}.win[data-skin=minecraft] .sx-av{border-radius:0}
.win .sx-tg{font-size:.75rem;font-weight:700;border:1px solid var(--bd);border-radius:calc(var(--rd)/2);padding:.12rem .5rem;color:var(--mu)}.win .sx-tg.ok{color:#10b981;border-color:#10b98166}.win .sx-tg.w{color:#d97706;border-color:#d9770666}.win .sx-tg.b{color:#ef4444;border-color:#ef444466}
.win .sx-two{display:grid;grid-template-columns:1.4fr 1fr;gap:12px}@media(max-width:800px){.win .sx-two{grid-template-columns:1fr}}
.win .sx-feed .sx-li{display:grid;grid-template-columns:auto 1fr;gap:10px;padding:7px 0;border-bottom:1px dashed var(--bd);font-size:.8rem}.win .sx-feed .sx-li:first-child{animation:sin .4s var(--ease)}.win .sx-feed code{font-family:'JetBrains Mono',monospace;color:var(--ac);font-size:.75rem}.win[data-skin=redm] .sx-feed code{color:#7a2e12}.win[data-skin=hytale] .sx-feed code{color:#8a5a00}
.win svg .ln{fill:none;stroke:var(--ac);stroke-width:2.5;stroke-dasharray:600;stroke-dashoffset:600;animation:dr 1.6s var(--ease) forwards}@keyframes dr{to{stroke-dashoffset:0}}
.win table{width:100%;border-collapse:collapse;font-size:.82rem}.win th,.win td{padding:8px 6px;border-bottom:1px solid var(--bd);text-align:left}.win th{font-size:.75rem;color:var(--mu);font-weight:600}
.win .sx-map{position:relative;height:100%;min-height:260px;border:1px solid var(--bd);border-radius:var(--rd);background:var(--sf);overflow:hidden}.win .sx-map svg{position:absolute;inset:0;width:100%;height:100%}
.win .sx-dot{position:absolute;width:11px;height:11px;border-radius:50%;background:var(--ac);transform:translate(-50%,-50%);transition:left 3s linear,top 3s linear;cursor:pointer}.win .sx-dot::after{content:'';position:absolute;inset:-6px;border-radius:50%;border:1px solid var(--ac);opacity:.5;animation:rg 2s infinite}@keyframes rg{from{transform:scale(.6);opacity:.8}to{transform:scale(1.6);opacity:0}}
.win .sx-tip{position:absolute;left:10px;bottom:10px;background:var(--sb);color:var(--tx);border:1px solid var(--bd);border-radius:8px;padding:.4rem .7rem;font-size:.78rem}.win[data-skin=redm] .sx-tip{color:#f3e7c9}
.win .sx-swch{display:flex;gap:8px;flex-wrap:wrap;margin-top:8px}.win .sx-swch button{padding:.5rem .9rem;border:1px solid var(--bd);border-radius:calc(var(--rd)/1.4);background:var(--sf);color:var(--tx);font-weight:700;transition:all .2s}.win .sx-swch button.on{background:var(--ac);color:var(--on);border-color:var(--ac)}
.win .sx-bar{height:8px;border-radius:calc(var(--rd)/2);background:var(--bd);overflow:hidden}.win .sx-bar i{display:block;height:100%;background:var(--ac);transition:width .6s var(--ease)}
.win .sx-ck{display:flex;gap:10px;align-items:center;padding:8px 10px;border:1px solid var(--bd);border-radius:calc(var(--rd)/1.4);margin-bottom:8px;background:var(--sf);cursor:pointer}.win .sx-ck i{width:16px;height:16px;border:1.5px solid var(--bd);border-radius:4px;display:grid;place-items:center;font-style:normal;font-size:.7rem;flex:none;transition:all .25s}.win .sx-ck.on i{background:var(--ac);border-color:var(--ac);color:var(--on)}.win .sx-ck.on i::after{content:'✓'}
.win .sx-tgl{width:34px;height:20px;border-radius:99px;background:var(--bd);position:relative;flex:none;transition:background .25s;cursor:pointer}.win .sx-tgl::after{content:'';position:absolute;top:3px;left:3px;width:14px;height:14px;border-radius:50%;background:#fff;transition:transform .25s var(--ease)}.win .sx-tgl.on{background:var(--ac)}.win .sx-tgl.on::after{transform:translateX(14px)}
.win .sx-nodes{display:flex;justify-content:space-between;align-items:center;gap:8px;margin:6px 0 14px;position:relative}.win .sx-nd{flex:1;text-align:center;padding:12px 6px;border:1px solid var(--bd);border-radius:var(--rd);background:var(--sf);font-weight:700;position:relative;z-index:1;transition:border-color .3s,transform .3s}.win .sx-nd.hot{border-color:var(--ac);transform:translateY(-3px)}.win .sx-nd small{display:block;color:var(--mu);font-weight:400;font-size:.72rem}
.win .gh{position:absolute;left:0;top:0;z-index:20;width:22px;height:22px;pointer-events:none;transition:transform .7s var(--ease);filter:drop-shadow(0 2px 4px rgba(0,0,0,.5))}
.win .gh svg{width:22px;height:22px;display:block;transition:transform .15s}.win .gh.press svg{transform:scale(.8)}
.win .sx-toast{position:absolute;right:14px;bottom:14px;z-index:15;background:var(--ac);color:var(--on);padding:.5rem .8rem;border-radius:calc(var(--rd)/1.4);font-weight:700;font-size:.8rem;animation:sin .35s var(--ease)}
@media(max-width:700px){.win{grid-template-columns:1fr;grid-template-rows:auto 1fr}.win .sb{flex-direction:row;overflow-x:auto;padding:8px;border-right:0;border-bottom:1px solid var(--bd)}.win .sb .sx-lg,.win .sb .gm{display:none}.win .sb button{width:auto;white-space:nowrap}.win .sb button::before{display:none}}
html.reduce .win .gh{display:none}html.reduce .win .v{transition:none}

.stage{height:100%;align-items:stretch}.stage>.win{height:100%;min-height:0}.studio .pin{min-height:0}.win .vws{min-height:300px}

@media(max-width:700px){.win .sb nav{display:flex;gap:6px}.win .vws{min-height:340px}}
.win .sb nav{display:flex;flex-direction:column;gap:4px}@media(max-width:700px){.win .sb nav{flex-direction:row}}

/* ===== v2 : décor de jeu, légende en bandeau, panel dense ===== */
.studio{background:#020617;overflow:clip}
.studio .bgx{position:absolute;inset:0;z-index:0;pointer-events:none}
.studio .bgx .stk{position:sticky;top:0;height:100vh;overflow:hidden}
.studio .bgx img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;opacity:0;transition:opacity .9s var(--ease);filter:saturate(1.1)}
.studio .bgx img.on{opacity:.85}
.studio .bgx .scr{position:absolute;inset:0;background:linear-gradient(180deg,rgba(2,6,23,.8),rgba(2,6,23,.15) 45%,rgba(2,6,23,.85))}
.studio .track{position:relative;z-index:1;width:min(1320px,100% - 32px);margin:0 auto}
.studio .pin{top:56px;height:calc(100vh - 56px);padding:12px 0 18px;display:block}
.studio .stage{height:100%;display:grid;grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);gap:14px}
.studio .cap{display:grid;grid-template-columns:auto 1fr minmax(120px,220px);gap:18px;align-items:center;padding:12px 18px;border:1px solid rgba(148,163,184,.25);border-radius:14px;background:rgba(2,6,23,.72);backdrop-filter:blur(10px);align-self:auto}
.studio .cap .n{font-family:'JetBrains Mono',monospace;color:var(--acc2);font-size:.85rem;border:1px solid var(--bd2);border-radius:8px;padding:.3rem .6rem}
.studio .cap h2{font-size:clamp(1.05rem,2vw,1.45rem);margin:0;line-height:1.15}.studio .cap p{margin:3px 0 0;font-size:.9rem;color:var(--sub)}
.studio .cap .dots{margin:0}
@media(max-width:800px){.studio .cap{grid-template-columns:1fr;gap:8px}.studio .cap .dots{order:-1}.studio .cap .n{display:none}.studio .cap p{display:none}}
.studio .mcap{display:none!important}
.stage>.win{box-shadow:0 40px 90px -20px rgba(0,0,0,.75),0 0 0 1px rgba(255,255,255,.06);border-radius:18px;height:100%}
.win{grid-template-columns:210px minmax(0,1fr)}
.win .tb{padding:12px 18px}.win .vws .v{padding:18px}
.win .sx-card{box-shadow:0 1px 0 rgba(255,255,255,.04) inset}
.win .sx-kpis em{display:block;font-style:normal;font-size:.72rem;margin-top:2px}.win .sx-kpis em.up{color:#34d399}.win .sx-kpis em.w{color:#f59e0b}
.win .sx-kpis b{font-size:1.7rem;margin-top:2px}
.win .chart{width:100%;height:150px;margin-top:10px}.win .chart .ar{opacity:0;animation:fi 1s .5s forwards}@keyframes fi{to{opacity:1}}
.win .sx-av{background:hsl(var(--h,200) 55% 42%);color:#fff;width:32px;height:32px}
.win[data-skin=redm] .sx-av{background:#7a2e12}.win[data-skin=minecraft] .sx-av{background:hsl(var(--h,120) 40% 35%)}
.win .sx-row{padding:10px 12px}.win .sx-row:hover{border-color:var(--ac)}
.win .sx-hint{position:relative;box-shadow:0 0 0 3px color-mix(in srgb,var(--ac) 55%,transparent);animation:hp 1s ease-in-out infinite}
@keyframes hp{50%{box-shadow:0 0 0 7px color-mix(in srgb,var(--ac) 0%,transparent)}}
.win .gh{width:30px;height:30px}.win .gh svg{width:30px;height:30px}
.win .sx-toast{box-shadow:0 10px 30px rgba(0,0,0,.4)}
.win .sb button{padding:.65rem .75rem}

.studio .stage{max-width:1120px;margin:0 auto;width:100%}.win .chart{height:105px}

/* ===== v3 : hero cinématique + panel en perspective qui se redresse ===== */
.studio{--e:0}
.studio .pin{overflow:visible}
.studio .hero2{position:absolute;left:0;top:0;right:0;z-index:3;padding:clamp(18px,5vh,56px) 8px 0;opacity:calc(1 - var(--e)*1.7);transform:translateY(calc(var(--e)*-40px));pointer-events:auto}
.studio .hero2 h1{font-size:clamp(2.4rem,5.6vw,5rem);line-height:1.02;font-weight:800;letter-spacing:-.035em;max-width:16ch;text-shadow:0 4px 30px rgba(0,0,0,.6)}
.studio .hero2 .sub{margin-top:18px;font-size:clamp(1rem,1.5vw,1.2rem);color:#cbd5e1;max-width:36rem;text-shadow:0 2px 14px rgba(0,0,0,.7)}
.studio .hero2 .hcta{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.studio .hero2 .eyebrow2{font-family:'JetBrains Mono',monospace;font-size:.78rem;letter-spacing:.14em;text-transform:uppercase;color:var(--acc2);margin-bottom:16px}
.studio .hero2 .sk span{color:#cbd5e1}
.studio .stage{transform-origin:50% 0;transform:perspective(1800px) translateY(calc((1 - var(--e))*50vh)) rotateX(calc((1 - var(--e))*18deg)) scale(calc(.94 + var(--e)*.06));will-change:transform}
.studio .cap{opacity:var(--e)}
.studio .bgx img.on{opacity:1}
.studio .bgx .scr{background:linear-gradient(90deg,rgba(2,6,23,.85),rgba(2,6,23,.2) 60%,rgba(2,6,23,.5)),linear-gradient(180deg,rgba(2,6,23,.3),rgba(2,6,23,.9))}
@media(max-width:800px){.studio .hero2 h1{font-size:2.3rem}.studio .stage{transform:perspective(1200px) translateY(calc((1 - var(--e))*46vh)) rotateX(calc((1 - var(--e))*12deg))}}

.win .v{scrollbar-width:none}.win .v::-webkit-scrollbar{display:none}
.studio .bgx img{filter:saturate(1.35) brightness(1.25)}.studio .bgx .scr{background:linear-gradient(90deg,rgba(2,6,23,.8),rgba(2,6,23,.1) 65
.win .v{scrollbar-width:none}.win .v::-webkit-scrollbar{display:none}
.studio .bgx img{filter:saturate(1.35) brightness(1.25)}
.studio .bgx .scr{background:linear-gradient(90deg,rgba(2,6,23,.8),rgba(2,6,23,.1) 65%,rgba(2,6,23,.35)),linear-gradient(180deg,rgba(2,6,23,.15),rgba(2,6,23,.85))}