:root{--rose:#FF4B91;--nuit:#000A37;--violet:#5000FF;--gris:#D8DBD1;--fond:#F4F5F1;--vert:#00BE96;--vertf:#E6F8F4;--rouge:#E5484D;--txt2:#4a5070}
*{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{font-family:Arial,Helvetica,sans-serif;color:var(--nuit);background:var(--fond)}
button{font-family:inherit;cursor:pointer;border:none}
input{font-family:inherit}
.cache{display:none!important}
@keyframes pop{from{transform:scale(.3);opacity:0}to{transform:none;opacity:1}}
@keyframes rebond{0%,80%,100%{transform:translateY(0);opacity:.4}40%{transform:translateY(-8px);opacity:1}}

/* ================= TÉLÉPHONE (joueur, télécommande) ================= */
.tel{max-width:480px;margin:0 auto;min-height:100%;display:flex;flex-direction:column;background:#fff}
.tel .top{background:var(--nuit);color:#fff;padding:14px 16px;font-size:14px;display:flex;justify-content:space-between;align-items:center;position:sticky;top:0;z-index:5}
.tel .top img{height:24px;vertical-align:middle;margin-right:8px}
.tel .top b{color:var(--rose)}
.tel.formateur .top{background:var(--violet)} .tel.formateur .top b{color:#fff}
.tel .in{flex:1;padding:18px;display:flex;flex-direction:column;gap:12px}
.tel h4{font-size:19px;line-height:1.3}
.tel .t{font-size:14px;color:var(--txt2);line-height:1.45}
.champ{border:2px solid var(--gris);border-radius:12px;padding:14px;font-size:18px;width:100%}
.champ:focus{outline:none;border-color:var(--violet)}
.tbtn{border-radius:14px;padding:17px 14px;color:#fff;font-weight:bold;font-size:16px;text-align:left;display:flex;align-items:center;gap:12px;width:100%;transition:transform .1s,opacity .3s}
.tbtn:active{transform:scale(.97)} .tbtn .l{width:30px;height:30px;border-radius:50%;background:rgba(255,255,255,.25);display:grid;place-items:center;flex:none}
.tbtn.off{opacity:.35} .tbtn.sel{outline:4px solid var(--nuit)} .tbtn.centre{justify-content:center}
.erreur{color:var(--rouge);font-size:14px}
.fin{margin:auto 0;display:flex;flex-direction:column;align-items:center;text-align:center;gap:12px;padding:10px 0}
.fin h4{font-size:22px}
.ico{width:92px;height:92px;border-radius:50%;display:grid;place-items:center;animation:pop .5s ease}
.ico svg{width:46px;height:46px}
.attente{display:flex;gap:7px;justify-content:center}.attente span{width:10px;height:10px;border-radius:50%;background:var(--rose);animation:rebond 1.2s infinite}.attente span:nth-child(2){animation-delay:.2s;background:var(--violet)}.attente span:nth-child(3){animation-delay:.4s;background:var(--nuit)}
.puce{background:var(--fond);border-radius:999px;padding:7px 18px;font-weight:bold;font-size:15px}
.tuiles{display:grid;grid-template-columns:1fr 1fr;gap:10px;width:100%}
.tuile{background:#fff;border:1px solid #E9EBF1;border-radius:16px;padding:12px 8px;box-shadow:0 6px 16px rgba(0,10,55,.07);position:relative;overflow:hidden;display:flex;flex-direction:column;align-items:center;gap:3px}
.tuile::before{content:"";position:absolute;left:0;right:0;top:0;height:5px;background:var(--c,var(--rose))}
.tuile .pic{width:28px;height:28px;border-radius:50%;display:grid;place-items:center;background:var(--c,var(--rose));margin-top:4px}
.tuile .pic svg{width:15px;height:15px}
.tuile b{font-size:25px;color:var(--v,var(--nuit))} .tuile span{font-size:11px;color:#6a7090;text-transform:uppercase;letter-spacing:.8px}
.parcours{display:flex;gap:6px;width:100%;flex-wrap:wrap;justify-content:center}
.parcours div{flex:1;min-width:44px;max-width:80px;border-radius:10px;padding:7px 0;font-size:11px;font-weight:bold;color:#fff;box-shadow:0 4px 10px rgba(0,10,55,.1)}
.parcours small{display:block;font-size:15px}
.rang{width:136px;height:136px;border-radius:50%;position:relative;display:grid;place-items:center;margin-top:10px;box-shadow:0 12px 26px rgba(0,10,55,.28);animation:pop .6s ease;isolation:isolate;background:var(--cg)}
.rang::before{content:"";position:absolute;inset:9px;border-radius:50%;background:var(--nuit);z-index:-1}
.rang b{color:#fff;font-size:58px;line-height:1;margin-top:-14px}
.rang svg{position:absolute;bottom:24px;left:50%;transform:translateX(-50%);width:60px}
.rang i{position:absolute;top:-12px;right:-12px;background:var(--cg);color:var(--nuit);font-style:normal;font-weight:bold;font-size:12px;padding:5px 11px;border-radius:999px;box-shadow:0 3px 8px rgba(0,10,55,.2)}
.ordreL .tbtn{background:var(--nuit)} .ordreL .tbtn.pris{background:var(--violet)}
.curseur{width:100%;accent-color:var(--violet);height:40px}
.valeur{font-size:44px;font-weight:bold;text-align:center;color:var(--violet)}
.assoc{display:flex;flex-direction:column;gap:10px}
.assoc label{font-weight:bold;font-size:15px}
.assoc select{width:100%;padding:12px;border-radius:10px;border:2px solid var(--gris);font-size:15px;background:#fff}
.imgq{width:100%;border-radius:12px;max-height:220px;object-fit:contain;background:var(--fond)}
.kv{background:var(--fond);border-radius:12px;padding:14px;font-size:14px;line-height:1.5}
.kv b{color:var(--rose)}
.rbtn{border-radius:16px;padding:22px;font-size:21px;font-weight:bold;color:#fff;width:100%}
.ferme{font-size:13px;color:#7a7f95}

/* ================= ÉCRAN PROJETÉ ================= */
.ecran{position:fixed;inset:0;background:var(--nuit);color:#fff;overflow:hidden;container-type:inline-size}
.ecran .haut{position:absolute;left:3cqw;right:3cqw;top:2.4cqw;display:flex;justify-content:space-between;align-items:center;font-size:1.4cqw;z-index:3;gap:2cqw}
.ecran .haut>span:last-child{text-align:right;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.chip{white-space:nowrap;flex-shrink:0;padding:.7cqw 1.8cqw;border-radius:9cqw;font-weight:bold;letter-spacing:.15cqw;text-transform:uppercase;font-size:1.3cqw;background:var(--rose)}
.corps{position:absolute;left:4cqw;right:4cqw;top:7.5cqw;bottom:6.5cqw;display:flex;flex-direction:column}
.question{font-size:3cqw;font-weight:bold;line-height:1.25;margin-bottom:2.2cqw;max-width:78cqw}
.chrono{position:absolute;right:4cqw;top:7.5cqw;width:8cqw;height:8cqw}
.chrono svg{width:100%;height:100%;transform:rotate(-90deg)} .chrono b{position:absolute;inset:0;display:grid;place-items:center;font-size:2.8cqw}
.reps{display:grid;grid-template-columns:1fr 1fr;gap:1.5cqw;flex:1;min-height:0}
.reps.trois{grid-template-columns:1fr 1fr 1fr}
.rep{border-radius:1.4cqw;position:relative;overflow:hidden;display:flex;align-items:center;gap:1.6cqw;padding:0 2cqw;font-size:2.1cqw;font-weight:bold;background:rgba(255,255,255,.08);border:.25cqw solid rgba(255,255,255,.18);transition:opacity .4s}
.rep .let{width:4.2cqw;height:4.2cqw;border-radius:50%;display:grid;place-items:center;flex:none;font-size:1.9cqw}
.rep .barre{position:absolute;left:0;top:0;bottom:0;width:0;opacity:.28;transition:width .8s ease}
.rep .pct{margin-left:auto;font-size:2.1cqw}
.rep.ok{border-color:var(--vert);background:rgba(0,190,150,.2)} .rep.ko{opacity:.35}
.vf .rep{justify-content:center;font-size:4cqw;flex-direction:column;gap:.6cqw} .vf .rep .pct{margin:0}
.compteur{position:absolute;left:4cqw;bottom:2.2cqw;font-size:1.6cqw;opacity:.9;z-index:3} .compteur b{color:var(--rose)}
.explic{position:absolute;left:4cqw;right:16cqw;bottom:1.8cqw;background:#fff;color:var(--nuit);border-radius:1.4cqw;padding:1.3cqw 2cqw;font-size:1.65cqw;border-left:1cqw solid var(--rose);z-index:4;animation:pop .4s ease}
.logoE{position:absolute;right:3cqw;bottom:2.2cqw;height:3.2cqw;z-index:2}
.lobby{display:flex;gap:5cqw;align-items:center;height:100%}
.lobby .qr{background:#fff;padding:1.3cqw;border-radius:2cqw;width:27cqw;flex:none}
.lobby .qr svg{width:100%;display:block}
.lobby h2{font-size:4cqw;margin-bottom:1cqw}
.lobby .code{font-size:2cqw;margin-bottom:3cqw;line-height:1.5} .lobby .code b{color:var(--rose);font-size:3.4cqw;letter-spacing:.6cqw}
.noms{display:flex;flex-wrap:wrap;gap:1.1cqw;max-height:22cqw;overflow:hidden}
.nom{background:var(--violet);padding:.8cqw 1.9cqw;border-radius:9cqw;font-size:1.8cqw;font-weight:bold;animation:pop .45s ease}
.ordreE{display:flex;flex-direction:column;gap:1cqw}
.ordreE .et{display:flex;align-items:center;gap:2cqw;background:rgba(255,255,255,.08);border:.25cqw solid rgba(255,255,255,.18);border-radius:1.4cqw;padding:1cqw 2cqw;font-size:2.1cqw;font-weight:bold}
.ordreE .n{width:4cqw;height:4cqw;border-radius:50%;background:var(--violet);display:grid;place-items:center;font-size:1.9cqw;flex:none}
.ordreE .et.ok{border-color:var(--vert);background:rgba(0,190,150,.2)} .ordreE .et.ok .n{background:var(--vert)}
.assocE{display:grid;grid-template-columns:1fr auto 1fr;gap:1cqw 2cqw;align-items:center;font-size:2cqw;font-weight:bold}
.assocE div{background:rgba(255,255,255,.08);border:.25cqw solid rgba(255,255,255,.18);border-radius:1.2cqw;padding:1cqw 1.6cqw}
.assocE .fl{background:none;border:none;color:var(--rose);font-size:2.6cqw;padding:0}
.estimE{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2cqw}
.estimE .bornes{display:flex;justify-content:space-between;width:70cqw;font-size:2cqw;opacity:.8}
.estimE .axe{position:relative;width:70cqw;height:1.2cqw;background:rgba(255,255,255,.18);border-radius:1cqw}
.estimE .pt{position:absolute;top:50%;width:1.6cqw;height:1.6cqw;border-radius:50%;background:var(--violet);transform:translate(-50%,-50%);opacity:.8}
.estimE .bon{position:absolute;top:50%;transform:translate(-50%,-50%);width:3cqw;height:3cqw;border-radius:50%;background:var(--vert);border:.4cqw solid #fff}
.estimE .grand{font-size:6cqw;font-weight:bold;color:var(--vert)}
.imgE{max-height:22cqw;max-width:40cqw;border-radius:1.4cqw;margin-bottom:1.5cqw;align-self:flex-start;background:#fff}
.podium{display:flex;align-items:flex-end;justify-content:center;gap:2.4cqw;flex:1}
.marche{width:18cqw;text-align:center}
.marche .bloc{border-radius:1.4cqw 1.4cqw 0 0;display:flex;align-items:flex-start;justify-content:center;padding-top:1.6cqw;font-size:5cqw;font-weight:bold;height:0;transition:height 1.1s cubic-bezier(.2,.8,.2,1);text-shadow:0 2px 6px rgba(0,10,55,.35)}
.marche .qui{font-size:2.5cqw;font-weight:bold;opacity:0;transition:opacity .5s .9s} .marche .pts{font-size:1.6cqw;opacity:0;margin-bottom:1cqw;transition:opacity .5s 1s}
.marche.on .qui,.marche.on .pts{opacity:1}
.suite{display:flex;gap:1cqw;justify-content:center;flex-wrap:wrap;margin-top:1.5cqw;font-size:1.6cqw}
.suite span{background:rgba(255,255,255,.1);border-radius:9cqw;padding:.6cqw 1.6cqw}
.confetti{position:absolute;inset:0;pointer-events:none;overflow:hidden;z-index:5}
.confetti i{position:absolute;top:-3cqw;width:1cqw;height:1.6cqw;animation:tombe 2.8s linear forwards}
@keyframes tombe{to{transform:translateY(62cqw) rotate(720deg)}}
.finE{display:flex;flex-direction:column;align-items:center;justify-content:center;flex:1;gap:2.5cqw;text-align:center}
.finE h2{font-size:4.5cqw}
.ebtn{border-radius:9cqw;padding:1.3cqw 3cqw;font-size:1.9cqw;font-weight:bold;color:#fff;background:var(--violet)}
.ebtn.c{background:transparent;border:.25cqw solid #fff}
.pilote{position:absolute;right:3cqw;top:2.2cqw;display:flex;align-items:center;gap:.8cqw;z-index:6}
.pilote button{opacity:.45;transition:opacity .2s,filter .2s}.pilote button:hover{opacity:1}
.pilote button{background:rgba(255,255,255,.15);color:#fff;border-radius:9cqw;padding:.6cqw 1.4cqw;font-size:1.2cqw;font-weight:bold}
.pilote #bSuiv{opacity:1;background:#00BE96;border-radius:.6cqw;padding:.8cqw 2.4cqw;font-size:1.6cqw;box-shadow:0 .3cqw 1cqw rgba(0,0,0,.35)}.pilote #bSuiv:hover{filter:brightness(1.08)}
.demarrer{position:fixed;inset:0;background:rgba(0,10,55,.92);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:24px;z-index:20;color:#fff;text-align:center;padding:20px}
.demarrer button{background:var(--rose);color:#fff;font-size:24px;font-weight:bold;padding:18px 40px;border-radius:999px}
.demarrer p{opacity:.8;font-size:16px}