/* =========================================================================
   ALL INTENSITY — Quiz live · styles partagés (participantes / TV / console)
   ========================================================================= */
@import url('https://fonts.googleapis.com/css2?family=Montserrat:ital,wght@0,500;0,700;0,800;0,900;1,700;1,800;1,900&display=swap');

:root{
  --gold:#F5C24E;--gold-deep:#E0A33A;--magenta:#E0518F;--violet:#7D6CC0;--coral:#F2855C;
  --ink:#241B3D;--white:#fff;
  --bg1:#7b6bb0;--bg2:#c77fb4;--bg3:#f3a7c0;--bg4:#f7cbb5;
  --glass:rgba(255,255,255,.16);--glass-strong:rgba(255,255,255,.24);
  --shadow:0 18px 50px rgba(40,20,60,.28);
  font-synthesis:none;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
/* App mobile : on bloque le scroll de page et le rebond (rubber-band) sans position:fixed
   (qui, combiné à background-attachment:fixed, fait disparaître le dégradé sur iOS) */
html.app-lock,body.app-lock{height:100%;overflow:hidden;overscroll-behavior:none}
body{
  font-family:'Montserrat',system-ui,-apple-system,Segoe UI,Roboto,sans-serif;color:var(--ink);
  min-height:100vh;-webkit-font-smoothing:antialiased;
  background:
    radial-gradient(1200px 700px at 12% 8%, rgba(123,107,176,.95), transparent 60%),
    radial-gradient(1100px 800px at 85% 92%, rgba(247,203,181,.9), transparent 60%),
    linear-gradient(135deg,var(--bg1) 0%,var(--bg2) 42%,var(--bg3) 72%,var(--bg4) 100%);
}
/* dégradé garanti en fond (couvre tout, même quand le scroll est verrouillé) */
body.app-lock{background-attachment:scroll}
html.app-lock{background:linear-gradient(135deg,var(--bg1),var(--bg3))}
.confetti{position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;overflow:hidden}
.confetti i{position:absolute;display:block;width:8px;height:14px;border-radius:2px;
  background:linear-gradient(180deg,#ffe39a,var(--gold-deep));opacity:0;animation:fall linear infinite}
@keyframes fall{0%{transform:translateY(-12vh) rotate(0);opacity:0}10%{opacity:.9}100%{transform:translateY(112vh) rotate(540deg);opacity:.2}}

/* logo recréé : ALL / INTENSITY empilé, A doré */
.logo{display:inline-flex;flex-direction:column;line-height:.82;font-style:italic;font-weight:900;
  letter-spacing:-.5px;transform:skewX(-3deg);text-shadow:0 3px 16px rgba(40,20,60,.4)}
.logo .l1{font-size:.92em;color:#fff}.logo .l2{color:#fff}.logo .a{color:var(--gold)}

/* ====================== TV (plein cadre 16:9) ====================== */
.tv{position:relative;width:100vw;height:100vh;overflow:hidden;display:flex;flex-direction:column;z-index:1}
.tv .head{display:flex;align-items:center;justify-content:space-between;padding:2.4vh 3.2vw;flex:0 0 auto}
.tv .head .logo{font-size:2.6vw}
.tv .head .live{color:#fff;font-weight:800;font-style:italic;font-size:1.1vw;opacity:.75;letter-spacing:2px}
.qcount .pill{background:var(--gold);color:var(--ink);border-radius:999px;padding:.8vh 1.6vw;font-weight:900;font-style:italic;font-size:1.5vw}
.tv .body{position:relative;flex:1;display:flex;flex-direction:column;justify-content:center;gap:3.2vh;padding:1vh 4vw 5vh;min-height:0;overflow:hidden}

.qtop{display:flex;align-items:center;gap:2vw;flex:0 0 auto}
.ring{position:relative;width:9vw;height:9vw;max-width:130px;max-height:130px;flex:0 0 auto}
.ring svg{transform:rotate(-90deg);width:100%;height:100%}
.ring .bg{stroke:rgba(255,255,255,.22)}
.ring .fg{stroke:var(--gold);stroke-linecap:round;transition:stroke-dashoffset 1s linear}
.ring .num{position:absolute;inset:0;display:flex;align-items:center;justify-content:center;font-weight:900;font-style:italic;font-size:3.2vw;color:#fff}
.qtype{background:var(--glass-strong);border:1px solid rgba(255,255,255,.3);color:#fff;font-weight:800;font-size:1vw;letter-spacing:2px;text-transform:uppercase;padding:1vh 1.4vw;border-radius:999px}
.qtext{color:#fff;font-weight:900;font-style:italic;font-size:clamp(28px,3.4vw,64px);line-height:1.08;text-shadow:0 4px 24px rgba(30,15,50,.45);flex:0 0 auto;max-width:92vw}
.choices{display:grid;grid-template-columns:1fr 1fr;gap:1.4vw;flex:0 0 auto}
.choice{position:relative;display:flex;align-items:center;gap:1.4vw;padding:2vh 2vw;border-radius:1.2vw;color:#fff;font-weight:800;font-size:2.1vw;box-shadow:0 14px 34px rgba(30,15,50,.3);border:.25vw solid rgba(255,255,255,.18);min-height:10.5vh}
.choice .ico{width:3vw;height:3vw;flex:0 0 auto;display:grid;place-items:center}
.choice .ico svg{width:2.6vw;height:2.6vw;fill:#fff}
.choice.c0{background:linear-gradient(135deg,#ef6aa0,var(--magenta))}
.choice.c1{background:linear-gradient(135deg,#8e7ed0,var(--violet))}
.choice.c2{background:linear-gradient(135deg,#ffce63,var(--gold-deep))}
.choice.c3{background:linear-gradient(135deg,#f79a6f,var(--coral))}
.choice .count{margin-left:auto;background:rgba(0,0,0,.22);border-radius:999px;padding:.6vh 1.2vw;font-size:1.7vw;font-weight:900;min-width:3vw;text-align:center}
.choice.dim{opacity:.3;filter:saturate(.6)}
.choice.win{outline:.35vw solid #fff;transform:translateY(-.4vh) scale(1.02);box-shadow:0 18px 40px rgba(30,15,50,.45)}
.choice.win::after{content:"✓";position:absolute;top:-1.4vh;right:-1vw;width:3.4vw;height:3.4vw;border-radius:50%;background:#3ddc84;color:#063;display:grid;place-items:center;font-weight:900;font-size:2vw;box-shadow:0 4px 14px rgba(0,0,0,.3)}

.center{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2.5vh;text-align:center;color:#fff}
.big-title{font-weight:900;font-style:italic;font-size:5.5vw;text-shadow:0 5px 26px rgba(30,15,50,.5)}
.big-sub{font-weight:700;font-size:1.7vw;opacity:.92;max-width:62vw}
.count-big{display:flex;flex-direction:column;align-items:center}
.count-big .n{font-weight:900;font-style:italic;font-size:10vw;color:#fff;line-height:1;text-shadow:0 6px 30px rgba(40,20,60,.55)}
.count-big .lbl{font-weight:800;font-size:1.5vw;letter-spacing:3px;text-transform:uppercase;opacity:.9;margin-top:-.5vh}

/* lobby : QR + compteur côte à côte */
.lobby-grid{display:flex;align-items:center;justify-content:center;gap:6vw;flex-wrap:wrap;margin-top:1vh}
.qr-card{background:#fff;border:.4vw solid var(--gold);border-radius:1.6vw;padding:1.8vw 1.8vw 1.2vw;display:flex;flex-direction:column;align-items:center;gap:1vh;box-shadow:0 16px 44px rgba(30,15,50,.4)}
.qr-label{color:var(--gold-deep);font-weight:900;font-style:italic;font-size:1.6vw}
.qr-box{display:flex;align-items:center;justify-content:center;background:#fff;border-radius:.4vw}
.qr-box img,.qr-box canvas{display:block;width:100%;height:auto}
.qr-url{color:var(--ink);font-weight:800;font-size:1.1vw;letter-spacing:.5px}

/* suspense */
.drumroll{font-size:7vw;animation:shake .35s ease-in-out infinite}
@keyframes shake{0%,100%{transform:rotate(-8deg)}50%{transform:rotate(8deg)}}
.suspense-q{color:#fff;font-weight:800;font-style:italic;font-size:2.4vw;opacity:.85;max-width:70vw}
.suspense-big{font-weight:900;font-style:italic;font-size:8vw;color:#fff;letter-spacing:3px;text-shadow:0 5px 22px rgba(30,15,50,.5);animation:pulse 1.1s ease-in-out infinite}
.suspense-big .d{opacity:0;animation:dot 1.4s ease-in-out infinite}
.suspense-big .d:nth-of-type(2){animation-delay:.25s}.suspense-big .d:nth-of-type(3){animation-delay:.5s}
@keyframes dot{0%,70%,100%{opacity:0}35%{opacity:1}}
@keyframes pulse{0%,100%{transform:scale(1);filter:brightness(1)}50%{transform:scale(1.05);filter:brightness(1.25)}}
.scanbar{width:46vw;height:1.4vh;border-radius:999px;background:rgba(255,255,255,.18);overflow:hidden;position:relative}
.scanbar::after{content:"";position:absolute;top:0;left:-40%;width:40%;height:100%;border-radius:999px;background:linear-gradient(90deg,transparent,var(--gold),transparent);animation:scan 1.3s linear infinite}
@keyframes scan{to{left:100%}}
.scan-choices{display:grid;grid-template-columns:repeat(4,1fr);gap:1.2vw;width:60vw}
.scan-choices.tf{grid-template-columns:1fr 1fr;width:40vw}
.scan-tile{height:7vh;border-radius:1vw;opacity:.45;animation:glow 1.6s ease-in-out infinite}
.scan-tile.c0{background:linear-gradient(135deg,#ef6aa0,var(--magenta))}.scan-tile.c1{background:linear-gradient(135deg,#8e7ed0,var(--violet))}
.scan-tile.c2{background:linear-gradient(135deg,#ffce63,var(--gold-deep))}.scan-tile.c3{background:linear-gradient(135deg,#f79a6f,var(--coral))}
.scan-tile:nth-child(1){animation-delay:0s}.scan-tile:nth-child(2){animation-delay:.4s}.scan-tile:nth-child(3){animation-delay:.8s}.scan-tile:nth-child(4){animation-delay:1.2s}
@keyframes glow{0%,100%{opacity:.35;transform:scale(1)}50%{opacity:1;transform:scale(1.06)}}

/* résultats (camemberts) */
.results-wrap{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3vh;color:#fff;text-align:center}
.donuts{display:flex;gap:8vw;flex-wrap:wrap;justify-content:center;align-items:flex-start}
.donut-card{display:flex;flex-direction:column;align-items:center;gap:1.4vh}
.donut{position:relative;width:20vw;max-width:300px;aspect-ratio:1}
.donut svg{width:100%;height:100%}
.donut .seg{transition:stroke-dashoffset 1.1s cubic-bezier(.4,0,.2,1)}
.donut-center{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.donut-center .dc-n{font-weight:900;font-style:italic;font-size:3.4vw}
.donut-center .dc-s{font-size:1vw;font-weight:800;opacity:.82;text-transform:uppercase;letter-spacing:1px}
.donut-title{font-weight:800;font-size:1.5vw}
.legend{display:flex;flex-wrap:wrap;gap:.8vh 1.4vw;justify-content:center;font-size:1.1vw;font-weight:700;max-width:24vw}
.legend .lg{display:flex;align-items:center;gap:.5vw}
.legend .lg i{width:1vw;height:1vw;border-radius:3px;display:inline-block;flex:0 0 auto}

/* leaderboard TV */
.lb{width:64vw;display:flex;flex-direction:column;gap:1.3vh}
.lb-row{display:flex;align-items:center;gap:1.6vw;background:rgba(40,24,64,.46);border:1px solid rgba(255,255,255,.16);border-radius:1.2vw;padding:1.8vh 2vw;color:#fff;animation:slide .5s ease backwards}
.lb-row:nth-child(1){animation-delay:.05s}.lb-row:nth-child(2){animation-delay:.13s}.lb-row:nth-child(3){animation-delay:.21s}.lb-row:nth-child(4){animation-delay:.29s}.lb-row:nth-child(5){animation-delay:.37s}
@keyframes slide{from{transform:translateX(3vw);opacity:0}to{transform:none;opacity:1}}
.lb-rank{font-weight:900;font-style:italic;font-size:2.4vw;width:3.5vw;text-align:center}
.lb-emo{font-size:2.2vw;width:2.6vw;text-align:center}
.lb-row.top1{background:linear-gradient(135deg,#ffd86b,var(--gold-deep));border-color:#fff;transform:scale(1.03);box-shadow:0 12px 30px rgba(224,163,58,.4)}
.lb-row.top1 .lb-rank,.lb-row.top1 .lb-name,.lb-row.top1 .lb-pts{color:var(--ink)}
.lb-row.top1 .lb-rank{font-size:3vw}
.lb-name{font-weight:800;font-size:2.2vw;flex:1;text-align:left}
.lb-pts{font-weight:900;font-style:italic;font-size:2.3vw;color:#fff}

/* classement complet TV */
.full{flex:1;width:100%;display:flex;flex-direction:column;min-height:0;padding-top:1vh}
.full-title{color:#fff;font-weight:900;font-style:italic;font-size:2.4vw;text-align:center;margin-bottom:1.4vh;text-shadow:0 4px 20px rgba(30,15,50,.4);flex:0 0 auto}
.full-title span{font-size:1.3vw;opacity:.8;font-weight:800}
.full-grid{flex:1;min-height:0;column-count:3;column-gap:1.4vw;overflow:hidden}
.frow{display:flex;align-items:center;gap:.6vw;background:rgba(40,24,64,.42);border:1px solid rgba(255,255,255,.1);border-radius:.6vw;padding:.45vh .9vw;color:#fff;min-width:0;margin-bottom:.55vh;break-inside:avoid}
.frow .fr{font-weight:900;font-style:italic;color:var(--gold);width:2vw;text-align:right;font-size:1.05vw;flex:0 0 auto}
.frow .fe{font-size:1.25vw;flex:0 0 auto}
.frow .fnm{font-weight:800;font-size:1.05vw;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.frow .fpt{font-weight:900;font-style:italic;font-size:1.05vw;color:#fff;flex:0 0 auto}
.frow.medal{background:linear-gradient(135deg,#ffd86b,var(--gold-deep));border-color:#fff}
.frow.medal .fr,.frow.medal .fnm,.frow.medal .fpt{color:var(--ink)}
.crown{font-size:8vw;line-height:1}

/* ====================== PHONE (participantes, plein écran) ====================== */
.phone-app{position:relative;z-index:1;height:100dvh;max-width:480px;margin:0 auto;display:flex;flex-direction:column;
  padding-top:max(env(safe-area-inset-top),12px);padding-bottom:max(env(safe-area-inset-bottom),8px)}
.ph-head{display:flex;align-items:center;justify-content:space-between;padding:8px 18px 4px;flex:0 0 auto}
.ph-head .logo{font-size:17px}
.ph-score{background:rgba(36,27,61,.5);color:var(--gold);font-weight:900;font-style:italic;border-radius:999px;padding:5px 12px;font-size:13px}
.ph-body{flex:1;min-height:0;display:flex;flex-direction:column;padding:4px 14px 8px;overflow-y:auto;-webkit-overflow-scrolling:touch}

.join-card{margin:auto;width:100%;text-align:center;color:#fff;display:flex;flex-direction:column;gap:16px}
.join-card .edition{font-weight:800;font-style:italic;font-size:12px;letter-spacing:2px;color:var(--gold)}
.hello{font-weight:900;font-style:italic;font-size:24px;line-height:1.05;text-shadow:0 3px 16px rgba(30,15,50,.4)}
.field{display:flex;flex-direction:column;gap:6px;text-align:left}
.field label{font-size:11px;font-weight:800;letter-spacing:1.5px;text-transform:uppercase;color:rgba(255,255,255,.85);padding-left:6px}
.field input{border:0;border-radius:14px;padding:15px 16px;font-family:inherit;font-weight:700;font-size:16px;background:#fff;color:var(--ink);outline:3px solid transparent;transition:.15s;width:100%}
.field input:focus{outline-color:var(--gold)}
.join-card{margin:auto 0;gap:13px}
.emoji-pick{display:grid;grid-template-columns:repeat(6,1fr);gap:6px;max-height:34vh;overflow-y:auto;padding:6px;background:rgba(36,27,61,.28);border-radius:12px;border:1px solid rgba(255,255,255,.16);-webkit-overflow-scrolling:touch}
.emoji-pick::-webkit-scrollbar{width:8px}.emoji-pick::-webkit-scrollbar-thumb{background:rgba(255,255,255,.3);border-radius:8px}
.emoji-btn{border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.12);border-radius:10px;padding:8px 0;font-size:22px;cursor:pointer;transition:.12s;line-height:1}
.emoji-btn:hover{background:rgba(255,255,255,.28)}
.emoji-btn.on{background:var(--gold);border-color:var(--gold);transform:scale(1.12)}
.btn{border:0;border-radius:14px;padding:16px 18px;font-family:inherit;font-weight:900;font-style:italic;font-size:17px;cursor:pointer;transition:.18s;letter-spacing:.5px;width:100%}
.btn-gold{background:var(--gold);color:var(--ink);box-shadow:0 10px 24px rgba(224,163,58,.45)}
.btn-gold:active{transform:translateY(2px)}
.btn:disabled{opacity:.4;cursor:not-allowed;box-shadow:none;filter:grayscale(.3)}
.join-hint{font-size:12px;font-weight:700;color:rgba(255,255,255,.85);text-align:center;margin-top:-6px}

.ph-center{margin:auto;text-align:center;color:#fff;display:flex;flex-direction:column;gap:14px;align-items:center}
.ph-center .emoji{font-size:54px}
.ph-center .t{font-weight:900;font-style:italic;font-size:26px;line-height:1.1}
.ph-center .s{font-weight:700;font-size:15px;opacity:.9;max-width:280px}
.dots{display:flex;gap:7px}
.dots i{width:9px;height:9px;border-radius:50%;background:#fff;opacity:.5;animation:blink 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,100%{opacity:.3;transform:scale(.85)}50%{opacity:1;transform:scale(1.15)}}

.ph-q{color:#fff;font-weight:800;font-size:clamp(17px,4.6vw,22px);line-height:1.22;text-align:center;padding:6px 2px 10px;flex:0 0 auto;display:flex;align-items:center;justify-content:center}
.ph-timer{align-self:center;background:rgba(36,27,61,.5);color:#fff;font-weight:900;font-style:italic;border-radius:999px;padding:6px 18px;font-size:16px;margin-bottom:10px;flex:0 0 auto}
.ph-choices{display:grid;grid-template-columns:1fr 1fr;grid-auto-rows:1fr;gap:11px;flex:1;min-height:0;margin-top:4px}
.ph-choices.tf{grid-template-columns:1fr}
.ph-choice{border:0;border-radius:16px;padding:14px;color:#fff;font-family:inherit;font-weight:800;font-size:clamp(16px,4.4vw,19px);cursor:pointer;display:flex;flex-direction:column;align-items:center;gap:8px;min-height:0;height:100%;justify-content:center;box-shadow:0 8px 20px rgba(30,15,50,.28);transition:.15s;text-align:center}
.ph-choice .ico svg{width:clamp(24px,6vw,30px);height:clamp(24px,6vw,30px);fill:#fff}
.ph-choice.c0{background:linear-gradient(135deg,#ef6aa0,var(--magenta))}.ph-choice.c1{background:linear-gradient(135deg,#8e7ed0,var(--violet))}
.ph-choice.c2{background:linear-gradient(135deg,#ffce63,var(--gold-deep))}.ph-choice.c3{background:linear-gradient(135deg,#f79a6f,var(--coral))}
.ph-choice:active{transform:scale(.96)}
.ph-choice.picked{outline:4px solid #fff;transform:scale(1.02)}
.ph-choice.faded{opacity:.32}
.ph-choices.tf .ph-choice{flex-direction:row;font-size:20px}

.result{margin:auto;text-align:center;color:#fff;display:flex;flex-direction:column;gap:12px;align-items:center;width:100%}
.result .badge{width:96px;height:96px;border-radius:50%;display:grid;place-items:center;font-size:52px;box-shadow:0 12px 30px rgba(0,0,0,.25)}
.result.good .badge{background:#3ddc84;color:#053}.result.bad .badge{background:#ff6b8a;color:#5a0a1e}
.result .rtitle{font-weight:900;font-style:italic;font-size:30px}
.result .pts{font-weight:900;font-style:italic;font-size:40px;color:#fff;text-shadow:0 4px 16px rgba(40,20,60,.5)}
.result .rank-chip{background:rgba(36,27,61,.5);border:1px solid rgba(255,255,255,.3);border-radius:14px;padding:12px 18px;font-weight:800;font-size:15px}
.result .rank-chip b{color:var(--gold);font-size:20px}
.podium-pos{font-weight:900;font-style:italic;font-size:64px;color:#fff;line-height:1;text-shadow:0 5px 20px rgba(40,20,60,.5)}

/* ====================== CONSOLE HÔTE ====================== */
.host-wrap{position:relative;z-index:1;max-width:680px;margin:0 auto;padding:18px 16px 40px}
.host-top{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:14px}
.host-top .logo{font-size:24px}
.console{background:rgba(36,27,61,.40);border:1px solid rgba(255,255,255,.22);border-radius:22px;box-shadow:var(--shadow);backdrop-filter:blur(14px);overflow:hidden;color:#fff}
.console-head{display:flex;align-items:center;gap:10px;flex-wrap:wrap;padding:14px 16px 0}
.console-head .rl{font-weight:900;font-style:italic;font-size:13px;letter-spacing:.5px;color:var(--gold);display:flex;align-items:center;gap:8px}
.console-head .rl .dot{width:9px;height:9px;border-radius:50%;background:#3ddc84;box-shadow:0 0 0 0 rgba(61,220,132,.6);animation:rpulse 1.6s infinite}
@keyframes rpulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.55)}70%{box-shadow:0 0 0 9px rgba(61,220,132,0)}100%{box-shadow:0 0 0 0 rgba(61,220,132,0)}}
.console-head .phase{margin-left:auto;font-weight:800;font-size:12px;background:rgba(255,255,255,.14);padding:5px 12px;border-radius:999px}
.ctabs{display:flex;gap:6px;width:100%;margin-top:10px;padding:4px;background:rgba(0,0,0,.18);border-radius:12px}
.ctab{flex:1;border:0;background:transparent;color:#fff;font-family:inherit;font-weight:800;font-size:13px;padding:10px;border-radius:9px;cursor:pointer;opacity:.7;transition:.15s}
.ctab.on{background:#fff;color:var(--ink);opacity:1}
.cpane{padding:14px 16px 16px}
.remote-btns{display:flex;gap:9px;flex-wrap:wrap}
.rbtn{border:0;border-radius:12px;padding:12px 16px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;background:rgba(255,255,255,.14);color:#fff;border:1px solid rgba(255,255,255,.22);transition:.15s;flex:1;min-width:120px}
.rbtn:hover{background:rgba(255,255,255,.24)}
.rbtn:disabled{opacity:.4;cursor:not-allowed}
.rbtn.primary{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.rbtn.primary:hover{background:#ffd778}
.rbtn.warn{background:rgba(255,255,255,.08)}
.hint{font-size:11px;opacity:.72;margin-top:10px;text-align:center;font-weight:600}

.monitor{margin-top:14px;display:flex;flex-direction:column;gap:12px}
.mon-sec{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.1);border-radius:14px;padding:12px 13px}
.mon-h{font-weight:900;font-style:italic;font-size:14px;display:flex;align-items:center;gap:8px;margin-bottom:10px}
.mon-h .mon-sub{margin-left:auto;font-style:normal;font-weight:800;font-size:12px;color:var(--gold)}
.mon-empty{opacity:.6;font-size:13px;font-weight:600;text-align:center;padding:14px 0}
.vbar{margin-bottom:10px}.vbar:last-child{margin-bottom:0}
.vbar-top{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:700;margin-bottom:4px}
.vbar-top .vc-ico{width:13px;height:13px;border-radius:4px;flex:0 0 auto}
.vbar-top .vc-name{flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.vbar-top .vc-name b{color:#3ddc84}
.vbar-top .vc-num{font-weight:900;font-style:italic;opacity:.9}
.vbar.ok .vc-num{color:#3ddc84}
.vbar-track{height:9px;background:rgba(255,255,255,.12);border-radius:999px;overflow:hidden}
.vbar-fill{height:100%;border-radius:999px;transition:width .5s cubic-bezier(.4,0,.2,1)}
.mon-lb{display:flex;align-items:center;gap:9px;padding:7px 9px;border-radius:10px;font-size:13px;margin-bottom:5px;background:rgba(255,255,255,.06)}
.mon-lb:last-child{margin-bottom:0}
.mon-lb .ml-r{font-weight:900;font-style:italic;width:24px;text-align:center;flex:0 0 auto}
.mon-lb .ml-e{font-size:16px;flex:0 0 auto}
.mon-lb .ml-n{font-weight:800;flex:1;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.mon-lb .ml-p{font-weight:900;font-style:italic;color:var(--gold);flex:0 0 auto}

/* admin (onglet Questions) */
.admin-toolbar{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:14px}
.admin-toolbar .btn{width:auto;padding:11px 16px;font-size:14px}
.btn-ghost{background:rgba(255,255,255,.16);color:#fff;border:1px solid rgba(255,255,255,.3)}
.panel{background:rgba(0,0,0,.18);border:1px solid rgba(255,255,255,.12);border-radius:16px;padding:16px;margin-bottom:14px}
.panel h2{font-weight:900;font-style:italic;font-size:18px;margin-bottom:4px}
.panel .sub{font-size:12.5px;opacity:.8;font-weight:600;margin-bottom:14px}
.admin .field{margin-bottom:13px}
.admin input[type=text],.admin input[type=number],.admin textarea{width:100%;border:0;border-radius:12px;padding:12px 14px;font-family:inherit;font-weight:600;font-size:15px;background:rgba(255,255,255,.95);color:var(--ink);outline:3px solid transparent}
.admin textarea{resize:vertical;min-height:60px}
.seg{display:flex;gap:8px}
.seg button{flex:1;border:1px solid rgba(255,255,255,.3);background:rgba(255,255,255,.1);color:#fff;border-radius:12px;padding:11px;font-family:inherit;font-weight:800;font-size:14px;cursor:pointer;transition:.15s}
.seg button.on{background:var(--gold);color:var(--ink);border-color:var(--gold)}
.choice-edit{display:flex;align-items:center;gap:10px;margin-bottom:9px}
.choice-edit .ci{width:30px;height:30px;border-radius:8px;flex:0 0 auto;display:grid;place-items:center}
.choice-edit .ci svg{width:22px;height:22px;fill:#fff}
.choice-edit .ci.c0{background:var(--magenta)}.choice-edit .ci.c1{background:var(--violet)}.choice-edit .ci.c2{background:var(--gold-deep)}.choice-edit .ci.c3{background:var(--coral)}
.choice-edit input{flex:1}
.choice-edit .correct-radio{display:flex;align-items:center;gap:5px;font-size:11px;font-weight:800;white-space:nowrap;cursor:pointer;opacity:.85}
.choice-edit .correct-radio input{width:auto;accent-color:#3ddc84;transform:scale(1.3)}
.row2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.admin-actions{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.qlist{display:flex;flex-direction:column;gap:11px}
.qcard{background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.18);border-radius:14px;padding:13px 15px;display:flex;align-items:center;gap:12px}
.qcard.editing{outline:2px solid var(--gold)}
.qcard .qnum{width:30px;height:30px;border-radius:50%;background:var(--gold);color:var(--ink);font-weight:900;display:grid;place-items:center;flex:0 0 auto;font-size:14px}
.qcard .qmeta{flex:1;min-width:0}
.qcard .qmeta .qt{font-weight:800;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.qcard .qmeta .qd{font-size:11px;opacity:.75;font-weight:600;margin-top:2px}
.qcard .qd .tag{background:rgba(255,255,255,.15);padding:2px 7px;border-radius:6px;margin-right:5px}
.qcard .ops{display:flex;gap:5px;flex:0 0 auto}
.iconbtn{width:32px;height:32px;border-radius:9px;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.1);color:#fff;cursor:pointer;font-size:14px;display:grid;place-items:center;transition:.15s}
.iconbtn:hover{background:rgba(255,255,255,.25)}.iconbtn.del:hover{background:#ff6b8a;border-color:#ff6b8a}

/* gate code animateur */
.gate{position:fixed;inset:0;z-index:50;display:flex;align-items:center;justify-content:center;padding:20px;
  background:rgba(20,12,40,.6);backdrop-filter:blur(8px)}
.gate-card{background:rgba(36,27,61,.85);border:1px solid rgba(255,255,255,.2);border-radius:20px;padding:28px 24px;max-width:340px;width:100%;text-align:center;color:#fff;box-shadow:var(--shadow)}
.gate-card .logo{font-size:26px;margin-bottom:6px}
.gate-card h2{font-weight:900;font-style:italic;font-size:20px;margin:10px 0 6px}
.gate-card p{font-size:13px;opacity:.85;font-weight:600;margin-bottom:16px}
.gate-card input{width:100%;border:0;border-radius:12px;padding:14px;font-family:inherit;font-weight:800;font-size:18px;text-align:center;letter-spacing:2px;background:#fff;color:var(--ink);margin-bottom:12px;outline:3px solid transparent}
.gate-card input:focus{outline-color:var(--gold)}
.gate-err{color:#ff9bb0;font-size:12px;font-weight:700;min-height:16px;margin-top:8px}

.toast{position:fixed;bottom:18px;left:50%;transform:translateX(-50%);z-index:60;background:rgba(20,12,40,.9);color:#fff;font-weight:700;font-size:13px;padding:11px 18px;border-radius:12px;border:1px solid rgba(255,255,255,.2);opacity:0;transition:.3s;pointer-events:none}
.toast.show{opacity:1}

@media (max-width:520px){
  .host-wrap{padding:12px 10px 30px}
}