@font-face{font-family:'KaliGraff';src:local('KaliGraff'),local('Kali Graff'),local('KGRAFTRIAL'),url('KGRAFTRIAL.otf') format('opentype'),url('KGRAFTRIAL.ttf') format('truetype'),url('KaliGraff.otf') format('opentype'),url('KaliGraff.ttf') format('truetype');font-display:swap}
:root{
  box-sizing:border-box;
  padding-top:env(safe-area-inset-top,0px);
  padding-bottom:env(safe-area-inset-bottom,0px);
  --bg:#eef2fb; --fg:#0b1226; --card:#ffffff; --line:#cdd7ee; --mut:#51608a;
  --b1:#1f6bff;
  --b2:color-mix(in srgb,var(--b1) 55%,#fff);
  --nk:1;
  --fh:'KaliGraff','Erica One','Rubik Spray Paint';--fb:'Kalam';--fhw:400;--fbw:700;
}
:root[data-font="kaligraff"]{--fh:'KaliGraff','Erica One','Rubik Spray Paint';--fb:'Kalam';--fhw:400;--fbw:700}
:root[data-font="brouillon"]{--fh:'Permanent Marker';--fb:'Caveat Brush';--fhw:400;--fbw:400}
:root[data-font="poster"]{--fh:'Londrina Solid';--fb:'Kalam';--fhw:900;--fbw:700}
:root[data-font="comics"]{--fh:'Bangers';--fb:'Patrick Hand';--fhw:400;--fbw:400}
:root[data-font="gros"]{--fh:'Erica One';--fb:'Kalam';--fhw:400;--fbw:700}
:root[data-font="spray"]{--fh:'Rubik Spray Paint';--fb:'Kalam';--fhw:400;--fbw:700}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){--bg:#070c22;--fg:#eaf0ff;--card:#0d1533;--line:#22305f;--mut:#8ea2d6}
}
:root[data-theme="dark"]{--bg:#070c22;--fg:#eaf0ff;--card:#0d1533;--line:#22305f;--mut:#8ea2d6}
html{scroll-padding-top:env(safe-area-inset-top,0px);height:100%}
*,*::before,*::after{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--fg);font-family:'Rajdhani','Segoe UI',system-ui,sans-serif;font-weight:500;font-size:18px;min-height:100%}
:root.solo{padding:0}
:root.solo,:root.solo body{background:transparent!important;overflow:hidden}
:root.solo .preview-only{display:none!important}

/* ---------- Chrome de la page ---------- */
header.top{position:sticky;top:env(safe-area-inset-top,0px);z-index:20;background:var(--bg);border-bottom:2px dashed var(--line)}
.top-in{max-width:1500px;margin:0 auto;padding:14px 22px 0}
.brandline{display:flex;align-items:baseline;gap:16px;flex-wrap:wrap}
.brandline h1{margin:0;font-family:var(--fh),Impact,sans-serif;font-weight:var(--fhw);font-size:32px;letter-spacing:.02em;transform:rotate(-1deg)}
.brandline p{margin:0;color:var(--mut);font-size:17px}
nav.tabs{display:flex;gap:4px;overflow-x:auto;margin-top:12px;scrollbar-width:thin}
nav.tabs button{flex:none;font:inherit;font-weight:700;font-size:18px;padding:10px 18px;color:var(--mut);background:none;border:0;border-bottom:4px solid transparent;cursor:pointer}
nav.tabs button[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--b1)}
nav.tabs button:hover{color:var(--fg)}
nav.tabs button:focus-visible,.card a:focus-visible,input:focus-visible{outline:3px solid var(--b2);outline-offset:2px}
main{max-width:1500px;margin:0 auto;padding:24px 22px 60px}
section.pane[hidden]{display:none}
.lead{color:var(--mut);max-width:70ch;margin:0 0 20px;line-height:1.45}
.grid-cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,360px),1fr));gap:22px}
.card{background:var(--card);border:2px dashed var(--line);padding:14px;display:flex;flex-direction:column;gap:10px;min-width:0}
.card.wide{grid-column:1/-1}
.card header{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.card h3{margin:0;font-size:21px;font-weight:700}
.dim{color:var(--mut);font-size:15px;white-space:nowrap}
.frame{position:relative;width:100%;overflow:hidden;background:#070c22;border:1px solid var(--line)}
.frame.checker{background:conic-gradient(#1a2238 25%,#10162a 0 50%,#1a2238 0 75%,#10162a 0) 0 0/24px 24px}
.card footer{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.card footer a{color:var(--b1);font-weight:700;text-decoration:underline;text-underline-offset:3px}
.card footer input{flex:1 1 160px;min-width:0;font:inherit;font-size:14px;padding:5px 8px;background:var(--bg);color:var(--mut);border:1px solid var(--line)}
.note{color:var(--mut);font-size:15px;margin:0}

/* ---------- Onglet réseaux ---------- */
.settings{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:16px 22px;max-width:1000px}
.field{display:flex;flex-direction:column;gap:6px}
.field label{font-weight:700;font-size:17px;display:flex;align-items:center;gap:8px}
.field label svg{width:20px;height:20px;color:var(--b1)}
.field input[type=text],.field input[type=password]{font:inherit;font-size:18px;padding:10px 12px;background:var(--card);color:var(--fg);border:2px solid var(--line)}
.field input[type=color]{padding:2px;height:46px;width:100%;cursor:pointer}
.field.full{grid-column:1/-1}
.refs{display:flex;flex-wrap:wrap;gap:10px 22px}
.refs label{display:flex;align-items:center;gap:8px;font-weight:700;cursor:pointer}
.refs input{width:20px;height:20px;accent-color:var(--b1)}
.help{margin-top:28px;max-width:75ch;line-height:1.5;color:var(--mut)}
.help h3{color:var(--fg);margin:18px 0 6px;font-size:21px}
.help code{background:var(--card);border:1px solid var(--line);padding:1px 6px;font-size:16px}
 .reset{font:inherit;font-weight:700;padding:10px 16px;border:2px solid var(--line);background:var(--card);color:var(--fg);cursor:pointer}
.studio-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,320px),1fr));gap:18px}
.studio-card{background:var(--card);border:2px dashed var(--line);padding:18px;display:flex;flex-direction:column;gap:12px;min-width:0}
.studio-card h3{margin:0;font-family:var(--fh),Impact,sans-serif;font-size:24px;font-weight:var(--fhw)}
.studio-card p{margin:0;color:var(--mut);line-height:1.4}
.studio-clock{font-family:var(--fh),Impact,sans-serif;font-size:clamp(32px,5vw,54px);color:var(--b1);letter-spacing:.04em}
.studio-actions{display:flex;flex-wrap:wrap;gap:8px}
.studio-actions .tbtn{border-style:dashed}
.studio-hint{font-size:14px;color:var(--mut)}
.ig-planner{display:grid;grid-template-columns:repeat(auto-fit,minmax(min(100%,390px),1fr));gap:18px}
.ig-slot{min-width:0}
.ig-slot-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ig-slot-time{font-family:var(--fh),Impact,sans-serif;color:var(--b1);font-size:21px}
.ig-slot-body{display:grid;grid-template-columns:minmax(0,1fr) minmax(130px,190px);align-items:start;gap:14px}
.ig-editor{display:grid;gap:10px;min-width:0}
.ig-editor textarea{width:100%;min-height:88px;resize:vertical;font:inherit;font-size:17px;padding:9px 11px;background:var(--card);color:var(--fg);border:2px solid var(--line)}
.ig-editor select{font:inherit;padding:8px 10px;background:var(--card);color:var(--fg);border:2px solid var(--line)}
.ig-preview{position:relative;width:100%;aspect-ratio:9/16;overflow:hidden;border:2px dashed var(--line);background:#070c22}
.ig-art{position:relative;width:1080px;height:1920px;overflow:hidden;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:7%;padding:12%;text-align:center;color:#fff;background:radial-gradient(ellipse at 50% 78%,color-mix(in srgb,var(--b1) 55%,#10162a),transparent 58%),linear-gradient(145deg,#17234a,#070c22 65%);transform:scale(var(--ig-scale,.16));transform-origin:top left}
.ig-art::before{content:"";position:absolute;inset:4%;border:2px dashed rgba(245,243,255,.72);pointer-events:none}
.ig-art::after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 12% 12%,rgba(255,255,255,.2) 0 1px,transparent 2px) 0 0/22px 22px;opacity:.45;pointer-events:none}
.ig-art>*{position:relative;z-index:1}
.ig-art-day{font-family:var(--fh),Impact,sans-serif;font-size:50px;color:var(--b2);letter-spacing:.12em}
.ig-art-title{font-family:var(--fh),Impact,sans-serif;font-size:132px;line-height:1.06;text-shadow:7px 7px 0 var(--b1);overflow-wrap:anywhere}
.ig-art-copy{font-family:var(--fb),'Segoe Print',cursive;font-size:68px;line-height:1.3;white-space:pre-wrap;overflow-wrap:anywhere}
.ig-art-cta{font-family:var(--fh),Impact,sans-serif;font-size:60px;padding:5% 8%;background:var(--b1);box-shadow:8px 10px 0 rgba(0,0,0,.38);transform:rotate(-2deg)}
.ig-save-status{min-height:1.4em;color:var(--mut);font-size:15px}
@media(max-width:520px){.ig-slot-body{grid-template-columns:minmax(0,1fr) minmax(105px,34%);gap:9px}}


.tests{display:flex;flex-wrap:wrap;gap:8px}
.tbtn{font:inherit;font-weight:700;font-size:16px;padding:6px 14px;color:var(--fg);background:var(--bg);border:2px solid var(--line);cursor:pointer}
.tbtn:hover{border-color:var(--b1)}
.tbtn:focus-visible{outline:3px solid var(--b2);outline-offset:2px}
.card footer input[data-secret="1"]{-webkit-text-security:disc;text-security:disc}
#livestatus{list-style:none;padding:0;margin:0 0 22px;display:grid;gap:6px;font-weight:600;font-size:18px}
#livestatus li{padding-left:22px;position:relative}
#livestatus li::before{content:"";position:absolute;left:0;top:.45em;width:12px;height:12px;border-radius:50%;background:var(--mut)}
#livestatus li.ok::before{background:#1fbf86}
#livestatus li.err::before{background:#ff3b3b}
.field select{font:inherit;font-size:18px;padding:10px 12px;background:var(--card);color:var(--fg);border:2px solid var(--line)}
.sec{margin:14px 0 0;font-family:'Permanent Marker',Impact,sans-serif;font-weight:400;font-size:26px}
.warn{border-left:5px solid #f2b800;padding:8px 14px;background:var(--card);color:var(--fg);margin:14px 0}

/* ============ SCÈNES (design en pixels, mises à l'échelle par JS) ============ */
.stage{position:absolute;left:0;top:0;transform-origin:0 0;overflow:hidden;color:#f5f3ff;font-family:var(--fb),'Segoe Print','Comic Sans MS',cursive;font-weight:var(--fbw)}
.stage svg{display:block;overflow:visible}
.mk{font-family:var(--fh),'Marker Felt',Impact,sans-serif;font-weight:var(--fhw)}
.up{text-transform:uppercase}
.jg{--r:0deg;transform:rotate(var(--r));will-change:translate;animation:bob 3.6s ease-in-out infinite alternate}
@keyframes bob{from{translate:0 3px}to{translate:0 -9px}}
.frame.paused .stage,.frame.paused .stage *,.frame.paused .stage *::before,.frame.paused .stage *::after{animation-play-state:paused!important}

/* papier déchiré */
.torn1{--torn:polygon(0 5%,3% 0,9% 4%,16% 0,24% 5%,33% 1%,42% 4%,52% 0,61% 5%,71% 1%,80% 4%,90% 0,97% 3%,100% 8%,99% 30%,100% 52%,98% 75%,100% 94%,95% 100%,87% 96%,78% 100%,69% 95%,58% 100%,48% 96%,38% 100%,27% 95%,17% 100%,8% 96%,2% 100%,0 92%,1% 70%,0 48%,2% 24%)}
.torn2{--torn:polygon(1% 0,10% 4%,20% 0,31% 5%,41% 1%,50% 5%,60% 0,72% 4%,83% 0,92% 5%,100% 1%,98% 22%,100% 46%,99% 70%,100% 100%,90% 95%,80% 100%,69% 96%,58% 100%,47% 95%,35% 100%,24% 96%,13% 100%,5% 96%,0 100%,2% 76%,0 52%,1% 26%)}
.torn3{--torn:polygon(0 0,8% 5%,18% 1%,28% 4%,40% 0,51% 5%,63% 1%,74% 4%,85% 0,100% 4%,98% 28%,100% 50%,99% 76%,100% 96%,92% 100%,80% 95%,68% 100%,55% 96%,43% 100%,31% 95%,19% 100%,9% 96%,0 100%,1% 74%,0 50%,2% 25%)}
.paper{position:relative;color:#0a0d1c;filter:url(#rough2) drop-shadow(6px 8px 0 rgba(0,0,0,.5))}
.paper::before{content:"";position:absolute;inset:0;background:#f2f5ff;clip-path:var(--torn);z-index:-1}
.tape{position:absolute;width:130px;height:40px;background:color-mix(in srgb,var(--b1) 55%,transparent);top:-16px}
.tape.t-a{left:36px;transform:rotate(-8deg)}
.tape.t-b{right:36px;transform:rotate(6deg)}

/* fond cahier */
.bgk{position:absolute;inset:0;overflow:hidden;background:
  radial-gradient(ellipse 70% 60% at 50% 120%,color-mix(in srgb,var(--b1) 55%,#000),transparent 70%),
  linear-gradient(rgba(120,160,255,.16) 2px,transparent 2px) 0 20px/100% 64px,
  #070c22}
.bgk::before{content:"";position:absolute;top:0;bottom:0;left:168px;width:4px;background:var(--b1);opacity:.55}
.bgk::after{content:"";position:absolute;inset:0;opacity:.28;mix-blend-mode:screen;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='300' height='300'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='.8' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 1 0 0 0 0 1 0 0 0 0 1 0 0 0 .6 0'/></filter><rect width='100%' height='100%' filter='url(%23n)'/></svg>")}
.ht{position:absolute;width:760px;height:560px;background:repeating-linear-gradient(120deg,rgba(245,243,255,.20) 0 3px,transparent 3px 17px);-webkit-mask-image:radial-gradient(ellipse at center,#000 25%,transparent 68%);mask-image:radial-gradient(ellipse at center,#000 25%,transparent 68%)}
.ht.h1{left:-200px;bottom:-160px}
.ht.h2{right:-220px;top:-190px;transform:scaleX(-1)}
.bgs{position:absolute;left:0;top:0}
.fl{position:absolute;bottom:-40px;font-family:var(--fh),sans-serif;font-weight:var(--fhw);font-size:46px;color:rgba(245,243,255,.5);animation:flt 13s linear infinite}
@keyframes flt{0%{transform:translateY(0) rotate(0);opacity:0}12%{opacity:1}88%{opacity:1}100%{transform:translateY(-1200px) rotate(90deg);opacity:0}}
.draw{stroke-dasharray:1;stroke-dashoffset:1;animation:draw 7s cubic-bezier(.6,0,.25,1) infinite}
@keyframes draw{0%{stroke-dashoffset:1;opacity:1}42%,88%{stroke-dashoffset:0;opacity:1}100%{stroke-dashoffset:0;opacity:0}}

/* autocollants / doodles */
.doo{position:absolute;display:flex;flex-direction:column;align-items:center;filter:url(#rough2);--r:0deg;--d:0s;opacity:0;transform:rotate(var(--r));animation:bob 4s ease-in-out infinite alternate,gflash 24s ease-in-out infinite;animation-delay:0s,var(--d)}
.doo.solid{opacity:1;animation:bob 4s ease-in-out infinite alternate}
.doo.faint{opacity:.28;animation:bob 5s ease-in-out infinite alternate}
.doo.pop{opacity:1;animation:bob 3s ease-in-out infinite alternate,pop 6s ease-in-out infinite;animation-delay:0s,0s}
.doo svg{width:100%;height:auto}
@keyframes gflash{0%{opacity:0;scale:.85}1.5%{opacity:.38;scale:1}5%{opacity:.38;scale:1.04}7%,100%{opacity:0;scale:1.1}}
@keyframes pop{0%,8%{scale:0}15%{scale:1.25}20%,84%{scale:1}92%,100%{scale:0}}

/* ----- 3D : sol, cubes, titre extrudé, prisme ----- */
.floor{position:absolute;left:-30%;right:-30%;bottom:-14%;height:56%;transform:perspective(700px) rotateX(68deg);transform-origin:50% 100%;
  background:linear-gradient(rgba(120,170,255,.38) 3px,transparent 3px) 0 0/100% 90px,linear-gradient(90deg,rgba(120,170,255,.38) 3px,transparent 3px) 0 0/110px 100%;
  -webkit-mask-image:linear-gradient(to top,#000,transparent 85%);mask-image:linear-gradient(to top,#000,transparent 85%);animation:floor 2.4s linear infinite}
@keyframes floor{to{background-position:0 90px,0 0}}
.cubew{position:absolute;perspective:700px;opacity:.85;animation:bob 5s ease-in-out infinite alternate}
.cube{position:absolute;inset:0;transform-style:preserve-3d;animation:cspin 16s linear infinite}
.cf{position:absolute;inset:0;border:3px solid rgba(245,243,255,.9);background:repeating-linear-gradient(120deg,color-mix(in srgb,var(--b1) 38%,transparent) 0 6px,transparent 6px 14px);box-shadow:inset 0 0 22px color-mix(in srgb,var(--b1) 70%,transparent)}
@keyframes cspin{from{transform:rotateX(22deg) rotateY(0)}to{transform:rotateX(382deg) rotateY(360deg)}}
.x3{position:relative;transform-style:preserve-3d;line-height:1.1;white-space:nowrap}
.xl{position:absolute;left:0;top:0;white-space:nowrap}
.xf{position:relative;display:block;color:#f5f3ff;-webkit-text-stroke:2px #05081a;paint-order:stroke fill;text-shadow:0 0 50px color-mix(in srgb,var(--b1) 70%,transparent);filter:url(#rough2)}
.sway{transform-style:preserve-3d;will-change:transform;animation:sway 8s ease-in-out infinite}
@keyframes sway{0%,100%{transform:rotateX(7deg) rotateY(-17deg)}50%{transform:rotateX(3deg) rotateY(17deg)}}
.pw{position:relative;perspective:1100px;flex:none}
.prism{position:absolute;inset:0;transform-style:preserve-3d;will-change:transform;animation:pspin 9s linear infinite}
@keyframes pspin{from{transform:rotateX(-14deg) rotateY(0)}to{transform:rotateX(-14deg) rotateY(360deg)}}
.ps{position:absolute;left:50%;top:50%;border:3px solid #f5f3ff;background:repeating-linear-gradient(110deg,rgba(255,255,255,.28) 0 3px,transparent 3px 14px),linear-gradient(90deg,var(--b1),color-mix(in srgb,var(--b1) 55%,#000))}
.pface{position:absolute;left:50%;top:50%}
.pface.back{}
.psh{position:absolute;left:15%;bottom:-18%;width:70%;height:12%;background:radial-gradient(ellipse,rgba(0,0,0,.55),transparent 70%);animation:psh 4.5s ease-in-out infinite}
@keyframes psh{50%{scale:.7 1;opacity:.6}}
.kickrow{display:flex;align-items:center;gap:34px;margin-bottom:8px;position:relative;z-index:3}

/* écrans */
.hdb{position:absolute;left:92px;top:76px;font-size:48px;background:var(--b1);padding:2px 22px 0;color:#fff;box-shadow:5px 6px 0 rgba(0,0,0,.5);filter:url(#rough2);--r:-6deg}
.chip{position:absolute;right:110px;top:80px;display:flex;align-items:center;gap:16px;font-size:44px;--r:2deg;filter:url(#rough2)}
.chip u{width:24px;height:24px;border-radius:50%;background:#ff3b3b;animation:pulse 1.4s ease-in-out infinite}
@keyframes pulse{50%{opacity:.25}}
.ctr{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;padding-bottom:110px}
.kick{font-size:50px;padding:6px 44px 0;transform:rotate(-2deg);letter-spacing:.06em}
.ttl{position:relative;display:flex;justify-content:center;align-items:center;margin:46px 0 30px;perspective:1500px}
.circ{position:absolute;left:50%;top:50%;width:1500px;height:560px;margin:-280px 0 0 -750px;pointer-events:none}
.und{position:absolute;left:50%;bottom:-24px;width:1000px;height:40px;margin-left:-500px}
.subn{position:relative;z-index:3;font-size:78px;color:var(--b2);text-shadow:3px 3px 0 rgba(0,0,0,.6);--r:-1.5deg;letter-spacing:.02em;margin-top:6px}
.pb{position:relative;width:900px;height:56px;margin-top:26px;filter:url(#rough2)}
.pb svg{position:absolute;inset:0}
.pb i{position:absolute;left:14px;top:14px;height:28px;width:0;background:repeating-linear-gradient(120deg,var(--b1) 0 8px,var(--b2) 8px 14px);animation:pbar 6s cubic-bezier(.5,0,.2,1) infinite}
@keyframes pbar{0%{width:0;opacity:1}85%{width:872px;opacity:1}100%{width:872px;opacity:0}}
.cd{margin-top:26px;font-size:112px;padding:0 50px;transform:rotate(1.5deg);line-height:1.2}
.socrow{position:absolute;left:0;right:0;bottom:44px;display:flex;justify-content:center;gap:18px;padding:0 70px}
.si{display:flex;align-items:center;gap:10px;padding:10px 22px 8px;font-size:32px;white-space:nowrap;min-width:0}
.si svg{width:40px;height:40px;color:var(--c);filter:drop-shadow(1px 1px 0 #0a0d1c)}
.si b{font-weight:400;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--c) 75%,transparent) 58% 92%,transparent 92%);padding:0 6px}

/* alertes */
.alertwrap{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;perspective:1400px}
.alert{width:880px;height:250px;display:flex;align-items:center;gap:36px;padding:0 50px;transform-origin:50% 100%;will-change:transform;animation:alertio 6s infinite}
@keyframes alertio{
 0%{transform:rotateX(-100deg) translateY(30px) rotate(-1.5deg) scale(.6,1.3);opacity:0;animation-timing-function:cubic-bezier(.2,1.25,.35,1)}
 11%{transform:rotateX(0deg) translateY(0px) rotate(-1.5deg) scale(1.14,.86);opacity:1;animation-timing-function:ease-in-out}
 15%{transform:rotateX(0deg) translateY(-18px) rotate(-1.5deg) scale(.92,1.1);animation-timing-function:ease-in-out}
 19%{transform:rotateX(0deg) translateY(0px) rotate(-1.5deg) scale(1.06,.95);animation-timing-function:ease-in-out}
 23%,50%{transform:rotateX(0deg) translateY(0px) rotate(-1.5deg) scale(1,1);opacity:1;animation-timing-function:ease-in-out}
 56%{transform:rotateX(0deg) translateY(0px) rotate(1.8deg) scale(1.02,.98);opacity:1;animation-timing-function:ease-in-out}
 62%{transform:rotateX(0deg) translateY(0px) rotate(-2.4deg) scale(1.02,.98);opacity:1;animation-timing-function:ease-in-out}
 68%,80%{transform:rotateX(0deg) translateY(0px) rotate(-1.5deg) scale(1,1);opacity:1;animation-timing-function:cubic-bezier(.6,0,.9,.4)}
 92%,100%{transform:rotateX(95deg) translateY(-30px) rotate(-1.5deg) scale(1,1);opacity:0}}
.a-ico{position:relative;flex:none;width:170px;height:170px;color:#0a0d1c}
.a-ico svg{position:absolute;inset:0;width:100%;height:100%}
.a-ico svg.i{inset:38px;width:94px;height:94px}
.a-txt{min-width:0;max-width:600px}
.a-k{font-size:52px;line-height:1;color:#0a0d1c}
.a-s{font-size:44px;line-height:1.1;color:#2a4fc4;margin-top:2px;white-space:nowrap}
.a-s:empty{display:none}
.a-n{display:inline-block;max-width:600px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom;font-size:90px;line-height:1.1;color:#0a0d1c;padding:0 14px;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--b1) 55%,#fff) 58% 92%,transparent 92%)}

/* panneaux */
.panel{position:absolute;left:36px;right:44px;top:50px;bottom:50px;display:flex;align-items:center;gap:30px;padding:0 40px;will-change:transform;animation:ptilt 6s ease-in-out infinite alternate}
@keyframes ptilt{from{transform:perspective(1100px) rotateY(-11deg) rotateX(3deg) rotate(-1deg)}to{transform:perspective(1100px) rotateY(11deg) rotateX(-2deg) rotate(-1deg)}}
.p-ico{position:relative;flex:none;width:104px;height:104px;color:#0a0d1c}
.p-ico svg{position:absolute;inset:0;width:100%;height:100%}
.p-ico svg.i{inset:26px;width:52px;height:52px}
.p-t{flex:1 1 auto;min-width:0}
.p-name{font-size:56px;line-height:1.1;white-space:nowrap;display:inline-block;padding:0 8px;background:linear-gradient(transparent 62%,color-mix(in srgb,var(--c) 80%,transparent) 62% 92%,transparent 92%)}
.p-h{font-size:40px;color:#1a2252;white-space:nowrap;margin-top:4px;line-height:1.1}

/* caméra */
.cfr,.gfr{position:absolute;left:0;top:0}
.cfr path:first-child{animation:glow 3s ease-in-out infinite alternate}
@keyframes glow{from{opacity:.55}to{opacity:1}}
.ct{position:absolute;width:110px;height:36px;background:color-mix(in srgb,var(--b1) 60%,transparent)}
.ct.a{left:8px;top:30px;transform:rotate(-40deg)}.ct.b{right:8px;top:30px;transform:rotate(40deg)}
.ct.c{left:8px;bottom:30px;transform:rotate(40deg)}.ct.d{right:8px;bottom:30px;transform:rotate(-40deg)}
.camtag{position:absolute;left:62px;bottom:48px;font-size:50px;padding:6px 46px 0;transform:rotate(-2deg)}
.camlive{position:absolute;right:70px;top:54px;display:flex;align-items:center;gap:14px;font-size:40px;padding:6px 34px 0;transform:rotate(2deg)}
.camlive u{width:22px;height:22px;border-radius:50%;background:#ff3b3b;animation:pulse 1.4s ease-in-out infinite}

/* overlay gameplay */
.fake{position:absolute;inset:0;background:radial-gradient(circle at 50% 45%,#2c3d63,#0f1626 70%);display:flex;align-items:center;justify-content:center;font-family:var(--fh),sans-serif;font-weight:var(--fhw);font-size:90px;color:rgba(255,255,255,.12)}
.gtop{position:absolute;left:0;right:0;top:0;height:100px;background:rgba(7,12,34,.88);display:flex;align-items:center;justify-content:space-between;padding:0 40px}
.gtopl{position:absolute;left:0;right:0;top:92px}
.gname{display:flex;align-items:center;gap:20px;font-size:50px}
.rot{position:relative;width:700px;height:64px;perspective:700px}
.rot span{position:absolute;right:0;top:0;display:flex;align-items:center;gap:14px;font-size:44px;opacity:0;transform-origin:50% 50%;animation:rot 25s ease-in-out infinite;animation-delay:calc(var(--i)*5s)}
.rot span b{font-weight:400;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--c) 70%,transparent) 58% 92%,transparent 92%);padding:0 6px}
.rot svg{width:44px;height:44px;color:var(--c)}
@keyframes rot{0%{opacity:0;transform:rotateX(-85deg) translateY(12px)}2.5%,17.5%{opacity:1;transform:rotateX(0) translateY(0)}20%,100%{opacity:0;transform:rotateX(85deg) translateY(-12px)}}
.gbox{position:absolute;bottom:130px;width:480px;height:270px}
.gbox.cam{left:30px}.gbox.chat{right:30px}
.gbox.chat .bgf{position:absolute;inset:10px;background:rgba(7,12,34,.6)}
.gbox .lbl{position:absolute;left:14px;top:-40px;font-size:36px;padding:2px 24px 0;transform:rotate(-2deg)}
.gbox .msg{position:absolute;left:30px;top:26px;right:20px;font-size:32px;line-height:1.35;color:#dbe6ff}
.gbox .msg b{color:var(--b2);font-weight:400}
.gbot{position:absolute;left:14px;right:14px;bottom:14px;height:98px;display:flex;align-items:center;gap:60px;padding:0 50px;font-size:44px}
.gbot .lab{color:#2a4fc4;margin-right:12px}
.gbot .sp{margin-left:auto;font-size:44px}

/* transition */
.tx{position:absolute;inset:0;overflow:hidden}
.tb{position:absolute;top:-25%;height:150%;left:-70%;width:190%;rotate:-14deg;will-change:translate;animation:tband 3.8s infinite}
.tb.t1{background:#f2f5ff}
.tb.t2{background:repeating-linear-gradient(120deg,var(--b1) 0 24px,color-mix(in srgb,var(--b1) 78%,#000) 24px 32px);animation-delay:.12s}
.tb.t3{background:#070c22;animation-delay:.24s;overflow:hidden}
@keyframes tband{
 0%{translate:-100% 0;animation-timing-function:cubic-bezier(.2,.9,.25,1.1)}
 32%,60%{translate:0 0;animation-timing-function:cubic-bezier(.7,-.1,.8,.3)}
 94%,100%{translate:100% 0}}
.trlogo{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.tsun{position:absolute;left:50%;top:50%;width:2800px;height:2800px;margin:-1400px 0 0 -1400px;opacity:0;
 background:repeating-conic-gradient(color-mix(in srgb,var(--b1) 75%,transparent) 0 7deg,transparent 7deg 15deg);
 -webkit-mask-image:radial-gradient(circle,#000 8%,transparent 55%);mask-image:radial-gradient(circle,#000 8%,transparent 55%);
 animation:tsun 3.8s ease-in-out infinite,tspin 9s linear infinite}
@keyframes tsun{0%,34%{opacity:0}42%,58%{opacity:1}66%,100%{opacity:0}}
@keyframes tspin{to{rotate:360deg}}
.tpop{position:relative;display:flex;flex-direction:column;align-items:center;gap:30px;perspective:1400px;scale:0;animation:tpop 3.8s infinite}
@keyframes tpop{0%,33%{scale:0;rotate:-40deg}38%{scale:1.3 .8;rotate:8deg}42%{scale:.9 1.15}46%{scale:1.05 .97;rotate:-3deg}50%,58%{scale:1;rotate:0deg}64%,100%{scale:0;rotate:30deg}}
.conf.t i{animation:tburst 3.8s ease-out infinite}
@keyframes tburst{0%,36%{opacity:0;translate:0 0;scale:.2;rotate:0deg}38%{opacity:1}52%{translate:var(--dx) var(--dy);rotate:var(--rot);scale:1;opacity:1}72%,100%{translate:var(--dx) calc(var(--dy) + 360px);rotate:var(--rot);opacity:0}}
.sfx.tt{animation:sfxT 3.8s infinite}
@keyframes sfxT{0%,38%{opacity:0;scale:0}41%{opacity:1;scale:1.4}44%{scale:.9}47%,60%{opacity:1;scale:1}64%,100%{opacity:0;scale:0}}
.trname{filter:none;transform:none}

/* bannières, logo */
.bn{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);display:flex;align-items:center;gap:calc(var(--u)*.5)}
.bn-n{font-size:calc(var(--u)*1.9*var(--nk));line-height:1.05;text-shadow:calc(var(--u)*.07) calc(var(--u)*.07) 0 var(--b1),-2px -2px 0 rgba(0,0,0,.45);white-space:nowrap;filter:url(#rough2);transform:rotate(-2deg)}
.bn-s{display:inline-block;font-size:calc(var(--u)*.5);padding:calc(var(--u)*.04) calc(var(--u)*.4) 0;margin-top:calc(var(--u)*.14);white-space:nowrap}
.bn-r{display:flex;align-items:center;gap:calc(var(--u)*.22);margin-top:calc(var(--u)*.3);font-size:calc(var(--u)*.46);color:#dbe6ff;white-space:nowrap}
.bn-r svg{width:calc(var(--u)*.46);height:calc(var(--u)*.46);color:var(--b2)}
.bn-r b{font-weight:400;margin-left:calc(var(--u)*.2);padding:0 6px;background:linear-gradient(transparent 58%,color-mix(in srgb,var(--b1) 75%,transparent) 58% 92%,transparent 92%)}
.guide{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);border:3px dashed rgba(255,255,255,.4)}
.avatar-guide{position:absolute;inset:0;border-radius:50%;box-shadow:0 0 0 2000px rgba(0,0,0,.55);border:6px dashed var(--b2)}
.center{position:absolute;inset:0;display:flex;align-items:center;justify-content:center}
.wm{display:flex;align-items:center;gap:60px}
.wm-n{font-size:calc(230px*var(--nk));line-height:1;text-shadow:10px 10px 0 var(--b1),-3px -3px 0 rgba(0,0,0,.45);white-space:nowrap;filter:url(#rough2);transform:rotate(-2deg)}
.logo{filter:url(#rough2)}


/* alertes en direct */
.alert.live{opacity:0;animation:none}
.alert.live.go{animation:alertio 6s forwards}
.idle{position:absolute;left:0;right:0;bottom:6px;text-align:center;font-size:30px;color:rgba(245,243,255,.55)}
/* tchat */
.chatlist{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;overflow:hidden;padding:20px 16px 16px;perspective:700px;-webkit-mask-image:linear-gradient(transparent,#000 14%);mask-image:linear-gradient(transparent,#000 14%)}
.cm{position:relative;flex:none;max-width:100%;padding:8px 20px 10px;font-size:36px;line-height:1.25;color:#0a0d1c;background:#f2f5ff;border-left:9px solid var(--uc,#6f9bff);border-radius:4px 14px 5px 12px;box-shadow:5px 6px 0 rgba(0,0,0,.45);transform-origin:0 100%;word-break:break-word;animation:cmin .5s cubic-bezier(.2,1.3,.4,1) both}
.cm .u{font-family:var(--fh),Impact,sans-serif;font-weight:var(--fhw);margin-right:12px;font-size:1.05em;background:linear-gradient(transparent 56%,color-mix(in srgb,var(--uc,#6f9bff) 55%,transparent) 56% 92%,transparent 92%)}
.cm img.em{height:1.5em;vertical-align:middle;margin:-6px 3px -2px}
.chatlist.sm{inset:14px;gap:8px;padding:10px 6px 4px}
.chatlist.sm .cm{font-size:26px;padding:4px 14px 6px;border-left-width:7px;box-shadow:3px 4px 0 rgba(0,0,0,.45)}
@keyframes cmin{0%{opacity:0;translate:-70px 0;scale:.5 1.5;rotate:-6deg}55%{opacity:1;translate:6px 0;scale:1.08 .92;rotate:2deg}78%{translate:0 0;scale:.97 1.04;rotate:-1deg}100%{opacity:1;translate:0 0;scale:1 1;rotate:0deg}}
.gbot .lab{white-space:nowrap}
.gbot span[data-last]{display:inline-block;max-width:280px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;vertical-align:bottom}

/* ===== version goofy ===== */
.jelly{transform-style:preserve-3d;transform-origin:50% 100%;will-change:transform;animation:jelly 3s infinite}
@keyframes jelly{0%,26%,100%{scale:1 1;translate:0 0;animation-timing-function:ease-out}
 4%{scale:1.08 .93;translate:0 3px}
 9%{scale:.95 1.07;translate:0 -14px}
 14%{scale:1.05 .96;translate:0 0}
 19%{scale:.98 1.02}
 23%{scale:1.01 .995}}
.wv i{display:inline-block;font-style:normal;animation:wave 1.4s ease-in-out infinite;animation-delay:calc(var(--i)*.07s)}
@keyframes wave{0%,100%{translate:0 0;rotate:0deg}25%{translate:0 -14px;rotate:-6deg}75%{translate:0 5px;rotate:5deg}}
.si{animation:hop 2.8s ease-in-out infinite}
@keyframes hop{0%,40%,100%{translate:0 0;scale:1 1}8%{scale:1.05 .93}20%{translate:0 -16px;scale:.97 1.05}30%{translate:0 0;scale:1.06 .94}35%{scale:.97 1.04}}
.p-ico{animation:wob 2.6s ease-in-out infinite}
@keyframes wob{0%,100%{rotate:-10deg;scale:1}50%{rotate:10deg;scale:1.12}}
.sfx{position:absolute;width:300px;height:190px;opacity:0;--r:0deg;transform:rotate(var(--r));filter:url(#rough2);animation:sfxpop 14s infinite;animation-delay:var(--d)}
.sfx svg{position:absolute;inset:0;width:100%;height:100%}
.sfx b{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#0a0d1c;font-size:54px;letter-spacing:.02em;white-space:nowrap;font-weight:var(--fhw);font-family:var(--fh),Impact,sans-serif}
.sfx.st{opacity:1;animation:sfxshake .45s linear infinite}
@keyframes sfxpop{0%{opacity:0;scale:0}1%{opacity:1;scale:1.4}2.5%{scale:.88;rotate:-4deg}4%{scale:1.06;rotate:3deg}6%,9%{scale:1;rotate:0deg;opacity:1}11%,100%{opacity:0;scale:0}}
@keyframes sfxshake{0%,100%{translate:0 0}25%{translate:-5px 3px}50%{translate:4px -4px}75%{translate:-3px -2px}}
.peek{position:absolute;top:0;display:flex;gap:14px;padding-top:30px;translate:0 -160%;animation:peek 16s ease-in-out infinite;animation-delay:var(--d)}
@keyframes peek{0%,8%{translate:0 -160%}14%,40%{translate:0 0}46%,100%{translate:0 -160%}}
.peek .eye{position:relative;width:84px;height:104px;border-radius:50%;background:#fff;border:6px solid #05081a;overflow:hidden;animation:blink 4s infinite}
.peek .eye s{position:absolute;width:40px;height:40px;border-radius:50%;background:#05081a;left:18px;top:34px;animation:look 3.2s ease-in-out infinite}
.peek .eye s::after{content:"";position:absolute;left:9px;top:7px;width:11px;height:11px;border-radius:50%;background:#fff}
.peek .br{position:absolute;top:0;width:92px;height:15px;background:#05081a;border-radius:9px}
.peek .br.l{left:-6px;rotate:14deg;animation:brow 3.2s ease-in-out infinite}
.peek .br.r{left:98px;rotate:-14deg;animation:brow2 3.2s ease-in-out infinite}
@keyframes blink{0%,90%,100%{scale:1 1}94%{scale:1 .08}}
@keyframes look{0%,100%{translate:0 0}20%{translate:-14px -8px}45%{translate:16px -6px}70%{translate:6px 14px}}
@keyframes brow{0%,100%{rotate:14deg;translate:0 0}50%{rotate:26deg;translate:0 -6px}}
@keyframes brow2{0%,100%{rotate:-14deg;translate:0 0}50%{rotate:-26deg;translate:0 -6px}}
.pup{animation:slook 3.4s ease-in-out infinite}
@keyframes slook{0%,100%{translate:0 0}20%{translate:-6px -3px}45%{translate:6px -2px}70%{translate:3px 6px}}
.sbrow{transform-box:fill-box;transform-origin:center;animation:sbrow 3.4s ease-in-out infinite}
.sbrow.r{animation-direction:reverse}
@keyframes sbrow{0%,100%{rotate:0deg}50%{rotate:-12deg}}
.spk{transform-box:fill-box;transform-origin:center;animation:twk 2s ease-in-out infinite}
@keyframes twk{0%,100%{scale:1;rotate:0deg}50%{scale:1.35;rotate:20deg}}
.cf:first-child::before,.cf:first-child::after{content:"";position:absolute;top:24%;width:26%;height:26%;border-radius:50%;border:3px solid #05081a;background:radial-gradient(circle at 62% 58%,#05081a 0 30%,#fff 32%)}
.cf:first-child::before{left:16%}.cf:first-child::after{right:16%}
.conf{position:absolute;left:50%;top:50%;width:0;height:0;pointer-events:none}
.conf i{position:absolute;left:-9px;top:-9px;width:18px;height:26px;opacity:0;border:3px solid #05081a}
.alert.go ~ .conf i,.alert:not(.live) ~ .conf i{animation:burst 6s ease-out forwards}
.alert:not(.live) ~ .conf i{animation-iteration-count:infinite}
@keyframes burst{0%,9%{opacity:0;translate:0 0;scale:.2;rotate:0deg}12%{opacity:1}34%{translate:var(--dx) var(--dy);rotate:var(--rot);scale:1;opacity:1}58%,100%{translate:var(--dx) calc(var(--dy) + 300px);rotate:var(--rot);opacity:0}}
.react{position:absolute;left:calc(50% + 330px);top:calc(50% - 150px);font-size:110px;line-height:1;opacity:0;pointer-events:none;font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif}
.alert.go ~ .react,.alert:not(.live) ~ .react{animation:reactpop 6s ease-in-out forwards}
.alert:not(.live) ~ .react{animation-iteration-count:infinite}
@keyframes reactpop{0%,10%{opacity:0;scale:0;rotate:-30deg}15%{opacity:1;scale:1.5;rotate:14deg}20%{scale:.9;rotate:-8deg}24%,80%{opacity:1;scale:1;rotate:6deg}84%,100%{opacity:0;scale:0;rotate:30deg}}

/* ===== fonctions avancées (widgets) ===== */
.wd{position:absolute;color:#0a0d1c}
.wd i{font-style:normal}
.wfill{position:absolute;inset:8px 14px 14px 8px;padding:12px 24px}
.hs{transition:opacity .6s ease,translate .6s ease;transition-delay:calc(var(--k,0)*.18s)}
:root.busy .hs{opacity:0;translate:0 14px;transition-delay:0s}
.emo{font-family:'Noto Color Emoji','Apple Color Emoji','Segoe UI Emoji',sans-serif}
/* session */
.w-session .wfill{display:flex;align-items:center;justify-content:space-between;gap:18px}
.ss1{font-size:36px;line-height:1;white-space:nowrap}.ss1 b{font-weight:inherit;color:#2a4fc4}
.ss2{font-size:26px;line-height:1.1}.ss2 span{opacity:.6}.ss2 b{font-weight:700}.ss2 em{display:block;font-size:20px;opacity:.65;font-style:normal}
.ss3{font-size:32px;white-space:nowrap}
/* infos */
.w-infos .wfill{display:flex;flex-direction:column;justify-content:center;gap:8px}
.ir{display:flex;align-items:baseline;gap:14px;min-width:0}
.ir i{flex:none;width:150px;font-size:20px;letter-spacing:.08em;color:#2a4fc4;font-weight:700}
.ir b{font-size:28px;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
/* stats */
.w-stats .wfill{display:grid;grid-template-columns:repeat(3,1fr);grid-auto-rows:1fr;gap:8px 14px;padding:16px 22px}
.tl{display:flex;flex-direction:column;justify-content:center;min-width:0}
.tl i{font-size:19px;letter-spacing:.08em;color:#2a4fc4;font-weight:700;white-space:nowrap}
.tl b{font-family:var(--fh),Impact,sans-serif;font-weight:var(--fhw);font-size:30px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.amb{grid-column:1/-1}.amb i{font-size:19px;letter-spacing:.08em;color:#2a4fc4;font-weight:700}
.ambb{height:16px;background:rgba(10,13,28,.14);border-radius:8px;overflow:hidden;margin-top:4px}
.ambb u{display:block;height:100%;width:0;background:linear-gradient(90deg,var(--b1),#ff6fa8);border-radius:8px;transition:width .8s ease}
/* musique */
.w-musique .wfill{display:flex;align-items:center;gap:22px;padding:14px 22px 14px 18px}
.cov{position:relative;flex:none;width:150px;height:150px;background:#0a0d1c;border:5px solid #0a0d1c;border-radius:6px 14px 6px 12px;overflow:hidden;display:flex;align-items:center;justify-content:center;color:#f2f5ff;font-size:70px}
.cov img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:none}
.mt{flex:1;min-width:0}
.mt1{font-size:32px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mt2{font-size:28px;color:#2a4fc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mbar{height:12px;background:rgba(10,13,28,.16);border-radius:6px;overflow:hidden;margin:10px 0 4px}
.mbar i{display:block;height:100%;width:0;background:var(--b1);border-radius:6px}
.mtime{display:flex;justify-content:space-between;font-size:20px;opacity:.7}
.mhint{font-size:18px;opacity:.6;margin-top:2px;min-height:20px}
/* historique */
.w-historique .wfill{display:flex;flex-direction:column;gap:6px;padding:12px 20px}
.hh{font-size:30px;line-height:1}
.hr{display:flex;align-items:center;gap:14px;min-width:0}
.hr img,.hr .hc{flex:none;width:52px;height:52px;border-radius:5px;background:#0a0d1c;object-fit:cover;color:#f2f5ff;font-size:26px;display:flex;align-items:center;justify-content:center}
.hr div{min-width:0;flex:1}
.hr b{display:block;font-size:24px;line-height:1.1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr span{display:block;font-size:20px;color:#2a4fc4;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hr em{flex:none;font-size:18px;opacity:.6;font-style:normal}
.hempty{font-size:24px;opacity:.65;padding-top:10px}
/* bandeau */
.tkw{position:absolute;left:12px;right:16px;top:8px;bottom:14px;display:flex;align-items:center;overflow:hidden}
.tkl{flex:none;background:var(--b1);color:#fff;padding:2px 24px 0;margin:0 22px 0 26px;font-size:34px;transform:rotate(-2deg)}
.tkv{flex:1;overflow:hidden;white-space:nowrap}
.tkin{display:inline-block;font-size:40px;animation:tkmove linear infinite;will-change:translate}
.tkin span{margin-right:90px}
@keyframes tkmove{to{translate:-50% 0}}
/* communauté */
.w-communaute .wfill{display:flex;flex-direction:column;gap:12px;padding:16px 24px}
.cfx i,.ce i{font-size:19px;letter-spacing:.08em;color:#2a4fc4;font-weight:700}
.cfm{font-size:30px;line-height:1.2;margin-top:4px;word-break:break-word;min-height:76px}
.cfm b{font-family:var(--fh),Impact,sans-serif;font-weight:var(--fhw);color:#2a4fc4;margin-right:8px}
.cfm.empty{opacity:.55}
.cg .cgt{display:flex;justify-content:space-between;align-items:baseline}
.cg .cgt i{font-size:22px;font-weight:700}.cg .cgt b{font-size:30px}
.cgb{height:22px;background:rgba(10,13,28,.14);border-radius:11px;overflow:hidden;margin-top:4px}
.cgb u{display:block;height:100%;width:0;background:repeating-linear-gradient(120deg,var(--b1) 0 10px,var(--b2) 10px 18px);border-radius:11px;transition:width .8s ease}
.ce ul{list-style:none;margin:4px 0 0;padding:0;display:grid;gap:3px}
.ce li{font-size:24px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.ce li b{font-weight:700}
.ce .none{opacity:.55}
/* notifications */
.tsw{position:absolute;inset:0;display:flex;flex-direction:column;justify-content:flex-end;gap:12px;padding:10px 14px;pointer-events:none}
.ts{display:flex;align-items:center;gap:16px;padding:10px 26px 12px 18px;background:#f2f5ff;color:#0a0d1c;border-left:10px solid var(--b1);border-radius:6px 16px 6px 14px;box-shadow:5px 6px 0 rgba(0,0,0,.45);animation:tsin .6s cubic-bezier(.2,1.3,.4,1) both}
.ts.out{animation:tsout .45s ease-in both}
.ts .ti{font-size:44px;line-height:1}
.ts b{display:block;font-family:var(--fh),Impact,sans-serif;font-weight:var(--fhw);font-size:30px;line-height:1.1}
.ts span{display:block;font-size:26px;color:#2a4fc4;line-height:1.1}
@keyframes tsin{from{opacity:0;translate:-80px 0;scale:.6 1.4}60%{translate:6px 0;scale:1.06 .94}to{opacity:1;translate:0 0;scale:1 1}}
@keyframes tsout{to{opacity:0;translate:-60px 0;scale:.8 1}}
/* couche d'effets : easter eggs, logo, mode exclusif */
.fxl{position:absolute;inset:0;overflow:hidden;pointer-events:none}
.conf.x1 i{animation:xburst 2.6s ease-out both}
@keyframes xburst{0%{opacity:1;translate:0 0;scale:.3}35%{translate:var(--dx) var(--dy);rotate:var(--rot);scale:1}100%{translate:var(--dx) calc(var(--dy) + 420px);rotate:var(--rot);opacity:0}}
.sfx.os{opacity:0;animation:sfxos 2.4s both}
@keyframes sfxos{0%{opacity:0;scale:0}8%{opacity:1;scale:1.4}14%{scale:.9}20%,70%{opacity:1;scale:1}100%{opacity:0;scale:0}}
.peek.once{animation:peekonce 3.8s ease-in-out both}
@keyframes peekonce{0%{translate:0 -160%}18%,72%{translate:0 0}100%{translate:0 -160%}}
.rain{position:absolute;top:-140px;font-size:84px;line-height:1;animation:rainfall 3.8s linear both}
@keyframes rainfall{to{translate:0 1400px;rotate:240deg}}
.lg{position:absolute;left:50%;top:50%;margin:-150px 0 0 -150px;width:300px;height:300px;display:flex;align-items:center;justify-content:center}
.lg-pop{animation:lgpop 3.4s both}
@keyframes lgpop{0%{scale:0;rotate:-40deg}12%{scale:1.3 .8;rotate:8deg}18%{scale:.9 1.15}24%,80%{scale:1;rotate:0deg}100%{scale:0;rotate:30deg}}
.lg-zoom{animation:lgzoom 3s ease-in both}
@keyframes lgzoom{0%{scale:.1;opacity:0}30%{scale:1;opacity:1}60%{scale:1.1;opacity:1}100%{scale:7;opacity:0}}
.lg-glitch{animation:lgglitch 3s steps(1) both;filter:drop-shadow(9px 0 0 rgba(255,0,80,.8)) drop-shadow(-9px 0 0 rgba(0,240,255,.8))}
@keyframes lgglitch{0%{opacity:0}6%{opacity:1;translate:-30px 0;clip-path:inset(0 0 60% 0)}12%{translate:26px 4px;clip-path:inset(40% 0 0 0)}18%{translate:0 0;clip-path:none}30%{opacity:0}36%,70%{opacity:1;translate:0 0}74%{translate:18px -6px;clip-path:inset(20% 0 30% 0)}78%{translate:0 0;clip-path:none}90%{opacity:0}100%{opacity:0}}
.lg-slide{margin-left:-150px;animation:lgslide 3.4s ease-in-out both}
@keyframes lgslide{0%{translate:-1300px 0;rotate:-240deg}35%{translate:0 0;rotate:0deg}65%{translate:0 0;rotate:0deg}100%{translate:1300px 0;rotate:240deg}}
.lg-prisme{animation:lgprisme 3.6s both}
@keyframes lgprisme{0%{scale:0;rotate:-90deg}15%{scale:1.2}22%,78%{scale:1;rotate:0deg}100%{scale:0;rotate:90deg}}
/* mode exclusif */
.exc{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;animation:excin .6s ease both}
.exc.out{animation:excout .6s ease both}
@keyframes excin{from{opacity:0}to{opacity:1}}
@keyframes excout{to{opacity:0}}
.exb{position:absolute;inset:0;background:radial-gradient(ellipse at 50% 50%,rgba(7,12,34,.55),rgba(7,12,34,.93) 75%)}
.exr{position:relative;background:var(--b1);color:#fff;font-size:54px;padding:6px 60px 0;transform:rotate(-3deg);box-shadow:8px 9px 0 rgba(0,0,0,.5);margin-bottom:34px;animation:exrib .8s cubic-bezier(.2,1.2,.3,1) both}
@keyframes exrib{from{translate:-1400px 0}to{translate:0 0}}
.ext{position:relative;perspective:1500px;animation:extpop .9s cubic-bezier(.2,1.4,.3,1) both}
@keyframes extpop{from{scale:0}to{scale:1}}
.exs{position:relative;margin-top:30px;font-size:70px;color:var(--b2);text-shadow:3px 3px 0 rgba(0,0,0,.6);text-align:center;max-width:1500px}
/* transitions intelligentes */
.trc{position:absolute;inset:0;opacity:0;pointer-events:none}
.trcv{position:absolute;inset:0;width:100%;height:100%;image-rendering:pixelated}
.trc::after{content:"";position:absolute;inset:0;background:repeating-linear-gradient(0deg,rgba(0,0,0,.28) 0 2px,transparent 2px 5px);mix-blend-mode:multiply}
.trt{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:#fff}
.trt b{font-family:var(--fh),Impact,sans-serif;font-weight:var(--fhw);font-size:150px;letter-spacing:.04em;text-shadow:8px 0 0 rgba(255,0,80,.85),-8px 0 0 rgba(0,240,255,.85)}
.trt i{font-size:54px;letter-spacing:.3em;text-shadow:3px 3px 0 #000}
.vz{position:absolute;inset:0;width:100%;height:100%}
.tabh{margin:26px 0 10px;font-family:'Permanent Marker',Impact,sans-serif;font-weight:400;font-size:26px}

@media (prefers-reduced-motion:reduce){
  .stage *,.stage *::before,.stage *::after{animation-duration:.01ms!important;animation-iteration-count:1!important}
  .stage .alert:not(.live),.stage .trlogo{opacity:1!important}
}

/* ===== pack vertical TikTok (1080 × 1920) ===== */
.portrait-bg{position:absolute;inset:0;overflow:hidden;background:
 radial-gradient(ellipse 95% 40% at 50% 100%,color-mix(in srgb,var(--b1) 42%,#000),transparent 72%),
 radial-gradient(ellipse at 50% 35%,#17234a 0%,#070c22 72%);}
.portrait-bg:before{content:"";position:absolute;inset:0;background:linear-gradient(rgba(120,160,255,.13) 2px,transparent 2px) 0 0/100% 70px;opacity:.8}
.portrait-bg:after{content:"";position:absolute;inset:0;background:radial-gradient(circle at 10% 10%,rgba(255,255,255,.12) 0 2px,transparent 3px) 0 0/42px 42px;opacity:.55}
.pt-frame{position:absolute;inset:34px;border:3px solid rgba(245,243,255,.78);outline:2px dashed color-mix(in srgb,var(--b1) 70%,transparent);outline-offset:-15px;pointer-events:none}
.pt-top{position:absolute;top:105px;left:0;right:0;display:flex;align-items:center;justify-content:center;gap:22px}
.pt-live{display:flex;align-items:center;gap:14px;padding:9px 28px;background:var(--b1);color:white;font-size:34px;letter-spacing:.12em;transform:rotate(-2deg);box-shadow:7px 8px 0 rgba(0,0,0,.4)}
.pt-live i{display:block;width:15px;height:15px;background:#ff4646;border-radius:50%;animation:pulse 1.4s infinite}
.pt-brand{position:absolute;top:235px;left:70px;right:70px;text-align:center}
.pt-logo{width:210px;height:210px;margin:0 auto 28px;filter:url(#rough2);animation:bob 3.6s ease-in-out infinite alternate}
.pt-kick{display:inline-block;font-size:40px;padding:8px 28px 4px;transform:rotate(-2deg)}
.pt-title{font-size:116px;line-height:1.02;margin:42px 24px 22px;overflow-wrap:anywhere;text-shadow:7px 7px 0 var(--b1),-3px -3px 0 rgba(0,0,0,.45);filter:url(#rough2)}
.pt-sub{font-size:42px;line-height:1.25;color:var(--b2);max-width:850px;margin:0 auto;text-align:center;padding:0 26px}
.pt-deco{position:absolute;font-family:var(--fh),sans-serif;color:rgba(245,243,255,.65);font-size:70px;animation:bob 4s ease-in-out infinite alternate}
.pt-deco.a{left:76px;top:660px;rotate:-12deg}.pt-deco.b{right:74px;top:790px;rotate:12deg}.pt-deco.c{left:95px;bottom:480px;rotate:9deg}.pt-deco.d{right:95px;bottom:600px;rotate:-8deg}
.pt-timer{position:absolute;left:105px;right:105px;top:1080px;text-align:center;padding:24px 10px 18px;font-size:112px;line-height:1.1}
.pt-timer-label{font-size:28px;letter-spacing:.2em;color:#2a4fc4;margin-bottom:8px}
.pt-progress{height:20px;margin:24px 125px 0;border:3px solid #f5f3ff;background:rgba(255,255,255,.12);padding:3px;transform:rotate(-1deg)}
.pt-progress i{display:block;height:100%;width:100%;background:repeating-linear-gradient(120deg,var(--b1) 0 12px,var(--b2) 12px 20px);transform-origin:left;animation:ptprogress 900s linear forwards}
@keyframes ptprogress{from{transform:scaleX(1)}to{transform:scaleX(0)}}
.pt-socials{position:absolute;left:105px;right:105px;bottom:170px;display:flex;flex-direction:column;gap:18px}
.pt-social{display:flex;align-items:center;gap:20px;padding:12px 24px 10px;font-size:34px;background:#f2f5ff;color:#0a0d1c;box-shadow:6px 7px 0 rgba(0,0,0,.4);transform:rotate(var(--rot))}
.pt-social svg{width:40px;height:40px;flex:none;color:var(--c)}
.pt-social b{font-weight:700;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pt-footer{position:absolute;bottom:75px;left:0;right:0;text-align:center;font-size:25px;letter-spacing:.16em;color:rgba(245,243,255,.62)}
.pt-nontimer .pt-brand{top:390px}
.pt-nontimer .pt-title{font-size:130px}
.pt-nontimer .pt-sub{font-size:46px}
.pt-nontimer .pt-socials{bottom:320px}
.pt-nontimer .pt-footer{bottom:180px}