Quiz LDC \u2014 PSG vs Arsenal \u2014 Animateur<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-app-compat.js\"><\/script>\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-database-compat.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<style>\n*{box-sizing:border-box;margin:0;padding:0;}\n:root{\n --gold:#C9A84C;--gl:#F0D080;--gd:#a07030;\n --bg:#07071a;--sf:rgba(255,255,255,.04);\n --bd:rgba(201,168,76,.18);--bdh:rgba(201,168,76,.35);\n --ok:#10b981;--err:#ef4444;--r:14px;--mu:rgba(238,240,248,.45);\n}\nbody{font-family:'Exo 2',sans-serif;background:var(--bg);color:#EEF0F8;min-height:100vh;overflow-x:hidden;}\n\n\/* \u2500\u2500 STARS \u2500\u2500 *\/\n.stars{position:fixed;inset:0;z-index:0;pointer-events:none;}\n.star{position:absolute;border-radius:50%;background:#fff;opacity:.5;animation:twinkle var(--dur,3s) ease-in-out infinite alternate;}\n@keyframes twinkle{from{opacity:.15}to{opacity:.7}}\n\n\/* \u2500\u2500 UCL BG \u2500\u2500 *\/\n.ucl-bg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40vw;opacity:.02;z-index:0;pointer-events:none;user-select:none;}\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.hdr{position:sticky;top:0;z-index:200;height:58px;background:rgba(7,7,26,.97);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;}\n.wm{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:4px;color:var(--mu);}\n.mu{display:flex;align-items:center;gap:1rem;}\n.cb{font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:900;letter-spacing:3px;display:flex;align-items:center;gap:8px;}\n.dp{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#003f7f,#0060bf);border:1px solid rgba(0,100,200,.5);}\n.da{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7f0000,#bf0000);border:1px solid rgba(200,0,0,.5);}\n.vp{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:5px;color:var(--gold);padding:3px 10px;border:1px solid rgba(201,168,76,.3);border-radius:20px;}\n.hr2{display:flex;align-items:center;gap:10px;}\n.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:blink 1s ease-in-out infinite alternate;}\n.live-txt{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:4px;color:var(--ok);}\n@keyframes blink{from{opacity:1}to{opacity:.2}}\n\n.scr{position:relative;z-index:1;}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LOBBY\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#lobby{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2.5rem;}\n.lob-title{text-align:center;}\n.lob-title h1{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;background:linear-gradient(135deg,var(--gl),var(--gold),var(--gd));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:4px;line-height:1.1;margin-bottom:.5rem;}\n.lob-title p{font-size:.75rem;letter-spacing:6px;color:var(--mu);text-transform:uppercase;}\n\n.lob-grid{display:grid;grid-template-columns:280px 1fr;gap:1.5rem;width:100%;max-width:900px;align-items:start;}\n@media(max-width:700px){.lob-grid{grid-template-columns:1fr;}}\n\n.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;}\n.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gl),transparent);opacity:.5;}\n.ctitle{font-family:'Orbitron',sans-serif;font-size:.56rem;letter-spacing:5px;color:var(--gold);margin-bottom:1.1rem;display:flex;align-items:center;gap:8px;}\n.ctitle::before{content:'';display:inline-block;width:14px;height:1px;background:var(--gold);}\n\n.rc-instruction{font-size:.78rem;color:var(--mu);line-height:1.6;margin-bottom:1rem;text-align:center;}\n#qr-container{background:#fff;border-radius:10px;padding:10px;display:inline-block;margin-bottom:1rem;}\n.room-code{text-align:center;}\n.rc-lbl{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:4px;color:var(--mu);margin-bottom:.4rem;}\n.rc-val{font-family:'Orbitron',sans-serif;font-size:1.3rem;font-weight:900;color:var(--gl);letter-spacing:4px;background:rgba(240,208,128,.08);border:1px solid rgba(240,208,128,.25);border-radius:8px;padding:.4rem 1rem;display:inline-block;}\n\n#pc{font-size:.82rem;color:var(--mu);margin-bottom:.8rem;letter-spacing:1px;}\n#plist{display:flex;flex-wrap:wrap;gap:6px;min-height:50px;align-content:flex-start;}\n.pchip{background:rgba(201,168,76,.1);border:1px solid var(--bdh);border-radius:20px;padding:4px 14px;font-size:.8rem;font-weight:600;color:var(--gl);animation:chip .35s cubic-bezier(.34,1.56,.64,1);}\n@keyframes chip{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}\n\n.launch-btn{\n padding:1.1rem 3rem;font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:900;letter-spacing:4px;\n background:linear-gradient(135deg,var(--gd),var(--gold),var(--gl),var(--gold),var(--gd));\n background-size:300% 100%;border:none;border-radius:var(--r);color:#07071a;cursor:pointer;\n transition:background-position .3s,transform .15s,box-shadow .3s;\n box-shadow:0 0 30px rgba(201,168,76,.3);\n}\n.launch-btn:hover:not(:disabled){background-position:100% 0;box-shadow:0 0 50px rgba(201,168,76,.5);transform:translateY(-2px);}\n.launch-btn:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none;}\n.edit-btn{margin-top:.5rem;padding:.7rem 2rem;font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:3px;background:transparent;border:1px solid rgba(201,168,76,.35);color:var(--mu);border-radius:var(--r);cursor:pointer;transition:all .2s;}\n.edit-btn:hover{border-color:var(--gold);color:var(--gl);background:rgba(201,168,76,.08);}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GAME\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#game{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;}\n\n.q-card{width:100%;max-width:860px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:2rem;position:relative;overflow:hidden;}\n.q-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gl),transparent);opacity:.5;}\n\n.q-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;}\n.q-num{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:4px;color:var(--mu);}\n.q-diff-h{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;padding:4px 12px;border-radius:20px;}\n.dh-easy{background:rgba(16,185,129,.15);color:var(--ok);border:1px solid rgba(16,185,129,.3);}\n.dh-medium{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.3);}\n.dh-hard{background:rgba(239,68,68,.15);color:var(--err);border:1px solid rgba(239,68,68,.3);}\n\n.timer-wrap{display:flex;align-items:center;gap:12px;margin-bottom:1.4rem;}\n.t-track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}\n.t-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#7a6030,#F0D080);transition:width .9s linear,background .3s;}\n.t-num{font-family:'Orbitron',sans-serif;font-size:2rem;font-weight:900;color:var(--gl);min-width:48px;text-align:right;}\n\n.q-txt{font-size:1.1rem;font-weight:600;line-height:1.5;color:#EEF0F8;margin-bottom:1.4rem;text-align:center;}\n\n.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem;}\n.ohost{padding:1.1rem 1.4rem;border-radius:var(--r);display:flex;align-items:center;gap:1rem;border:1px solid transparent;transition:border-color .4s,background .4s;}\n.o0{background:rgba(0,63,127,.25);}\n.o1{background:rgba(127,0,0,.25);}\n.o2{background:rgba(0,80,40,.25);}\n.o3{background:rgba(80,50,0,.25);}\n.ohost.correct{background:rgba(16,185,129,.2);border-color:var(--ok);box-shadow:0 0 20px rgba(16,185,129,.2);}\n.ohost.wrong{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.25);opacity:.5;}\n.oltr{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:900;flex-shrink:0;}\n.o0 .oltr{background:rgba(0,63,127,.6);color:#90c8ff;}\n.o1 .oltr{background:rgba(127,0,0,.6);color:#ffa0a0;}\n.o2 .oltr{background:rgba(0,80,40,.6);color:#90ffb0;}\n.o3 .oltr{background:rgba(80,50,0,.6);color:#ffd090;}\n.ohost.correct .oltr{background:rgba(16,185,129,.3);color:#6ee7b7;}\n.otxt{font-size:.92rem;font-weight:600;line-height:1.3;flex:1;}\n\n.stats-row{display:flex;gap:1rem;justify-content:center;margin-bottom:1.2rem;}\n.stat-box{background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:10px;padding:.6rem 1.5rem;text-align:center;}\n.stat-n{font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:900;color:var(--gl);}\n.stat-l{font-size:.6rem;letter-spacing:3px;color:var(--mu);}\n\n.gacts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}\n.gact{padding:.75rem 2rem;font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:3px;font-weight:700;border-radius:var(--r);cursor:pointer;border:1px solid var(--bdh);background:var(--sf);color:#EEF0F8;transition:all .2s;}\n.gact.primary{background:linear-gradient(135deg,var(--gd),var(--gold));color:#07071a;border:none;box-shadow:0 0 20px rgba(201,168,76,.3);}\n.gact:hover:not(:disabled){transform:translateY(-2px);}\n.gact:disabled{opacity:.3;cursor:not-allowed;}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCOREBOARD\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#scoreboard{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;}\n.sttl{font-family:'Orbitron',sans-serif;font-size:1rem;letter-spacing:6px;color:var(--mu);}\n#slist{width:100%;max-width:600px;display:flex;flex-direction:column;gap:.5rem;}\n.srow{display:flex;align-items:center;gap:1rem;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:.8rem 1.2rem;animation:fadeUp .4s ease both;}\n@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}\n.srk{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:900;flex-shrink:0;}\n.rkg{background:linear-gradient(135deg,#b8960c,#ffd700);color:#07071a;}\n.rksi{background:linear-gradient(135deg,#808080,#c0c0c0);color:#07071a;}\n.rkbr{background:linear-gradient(135deg,#8b4513,#cd7f32);color:#07071a;}\n.rkot{background:rgba(255,255,255,.08);color:var(--mu);}\n.sbw{flex:1;}\n.sbn{font-weight:700;font-size:.95rem;}\n.sco{font-size:.8rem;color:var(--ok);min-width:40px;text-align:center;}\n.spt{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:900;color:var(--gl);min-width:60px;text-align:right;}\n.sacts{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;}\n.sact{padding:.8rem 2.5rem;font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:3px;font-weight:700;border-radius:var(--r);cursor:pointer;border:1px solid var(--bdh);background:var(--sf);color:#EEF0F8;transition:all .2s;}\n.sact.primary{background:linear-gradient(135deg,var(--gd),var(--gold));color:#07071a;border:none;box-shadow:0 0 20px rgba(201,168,76,.3);}\n.sact:hover{transform:translateY(-2px);}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FINAL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#final{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;}\n.troph{font-size:5rem;animation:bounce .8s ease infinite alternate;}\n@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-14px)}}\n.fhead{font-family:'Orbitron',sans-serif;font-size:clamp(1.2rem,3vw,2rem);font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,var(--gl),var(--gold),var(--gd));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;}\n.podwrap{display:flex;align-items:flex-end;gap:1rem;justify-content:center;flex-wrap:wrap;}\n.podcol{display:flex;flex-direction:column;align-items:center;gap:.4rem;}\n.pblk{width:80px;display:flex;align-items:center;justify-content:center;font-size:2rem;border-radius:8px 8px 0 0;}\n.pb1{height:100px;background:linear-gradient(to bottom,rgba(255,215,0,.25),rgba(255,215,0,.05));border:1px solid rgba(255,215,0,.4);}\n.pb2{height:75px;background:linear-gradient(to bottom,rgba(192,192,192,.2),rgba(192,192,192,.02));border:1px solid rgba(192,192,192,.3);}\n.pb3{height:60px;background:linear-gradient(to bottom,rgba(205,127,50,.2),rgba(205,127,50,.02));border:1px solid rgba(205,127,50,.3);}\n.pname{font-weight:700;font-size:.9rem;text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n.ppts{font-size:.75rem;color:var(--mu);}\n.frank{width:100%;max-width:580px;}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"stars\" id=\"stars\"><\/div>\n<div class=\"ucl-bg\">\ud83c\udfc6<\/div>\n\n\n<div class=\"hdr\">\n <div class=\"wm\">UEFA Champions League<\/div>\n <div class=\"mu\">\n <div class=\"cb\"><div class=\"dp\"><\/div> PSG<\/div>\n <div class=\"vp\">FINALE<\/div>\n <div class=\"cb\">ARSENAL <div class=\"da\"><\/div><\/div>\n <\/div>\n <div class=\"hr2\">\n <div class=\"live-dot\" id=\"ld\" style=\"display:none\"><\/div>\n <div class=\"live-txt\" id=\"ll\" style=\"display:none\">LIVE<\/div>\n <div class=\"wm\" id=\"hs\">ANIMATEUR<\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lobby\" class=\"scr\">\n <div class=\"lob-title\">\n <h1>\u26bd QUIZ CHAMPIONS<\/h1>\n <p>Budapest \u00b7 30 mai 2026 \u00b7 18h00<\/p>\n <\/div>\n <div class=\"lob-grid\">\n\n \n <div class=\"card\">\n <div class=\"ctitle\">QR Code joueurs<\/div>\n <p class=\"rc-instruction\">\ud83d\udcf1 Scannez le QR code<br>ou rendez-vous sur<br><strong style=\"color:var(--gl)\">animcloud.fr\/player<\/strong><\/p>\n <div style=\"text-align:center;margin-bottom:1rem;\">\n <div id=\"qr-container\"><\/div>\n <\/div>\n <div class=\"room-code\">\n <div class=\"rc-lbl\">Code de la salle<\/div>\n <div class=\"rc-val\" id=\"rcode\">\u2014<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"ctitle\">Joueurs connect\u00e9s<\/div>\n <div id=\"pc\">En attente des joueurs…<\/div>\n <div id=\"plist\"><\/div>\n <\/div>\n\n <\/div>\n <button class=\"launch-btn\" id=\"startBtn\" onclick=\"startGame()\" disabled>\u26a1 LANCER LA PARTIE<\/button>\n <button class=\"edit-btn\" onclick=\"openEditor()\">\u270f\ufe0f Modifier les questions<\/button>\n<\/div>\n\n\n<div id=\"editorModal\" style=\"display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.85);overflow-y:auto;padding:2rem 1rem;\">\n <div style=\"max-width:780px;margin:0 auto;background:#0e0e24;border:1px solid rgba(201,168,76,.3);border-radius:16px;padding:2rem;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;\">\n <div style=\"font-family:'Orbitron',sans-serif;font-size:.8rem;letter-spacing:4px;color:#C9A84C;\">\u270f\ufe0f \u00c9DITEUR DE QUESTIONS<\/div>\n <button onclick=\"closeEditor()\" style=\"background:transparent;border:1px solid rgba(255,255,255,.2);color:#EEF0F8;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px;\">\u2715 Fermer<\/button>\n <\/div>\n <div id=\"editorList\" style=\"display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem;\"><\/div>\n <div style=\"display:flex;gap:1rem;\">\n <button onclick=\"addQuestion()\" style=\"flex:1;padding:12px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);color:#F0D080;border-radius:10px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:3px;\">+ AJOUTER UNE QUESTION<\/button>\n <button onclick=\"saveAndClose()\" style=\"flex:1;padding:12px;background:linear-gradient(135deg,#7a6030,#C9A84C);border:none;color:#000;border-radius:10px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:.65rem;font-weight:900;letter-spacing:3px;\">\ud83d\udcbe SAUVEGARDER<\/button>\n <\/div>\n <div id=\"editorMsg\" style=\"text-align:center;margin-top:.75rem;font-size:12px;color:#10b981;min-height:18px;\"><\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"game\" class=\"scr\" style=\"display:none\">\n <div class=\"q-card\">\n <div class=\"q-meta\">\n <span class=\"q-num\" id=\"hqNum\">Q1\/15<\/span>\n <span class=\"q-diff-h dh-easy\" id=\"hqDiff\">FACILE<\/span>\n <\/div>\n <div class=\"timer-wrap\">\n <div class=\"t-track\"><div class=\"t-fill\" id=\"hFill\" style=\"width:100%\"><\/div><\/div>\n <div class=\"t-num\" id=\"hNum\">20<\/div>\n <\/div>\n <div class=\"q-txt\" id=\"hqTxt\">…<\/div>\n <div class=\"ogrid\" id=\"hOpts\"><\/div>\n <div class=\"stats-row\">\n <div class=\"stat-box\">\n <div class=\"stat-n\" id=\"stAnsw\">0<\/div>\n <div class=\"stat-l\">R\u00c9PONSES<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-n\" id=\"stTot\">0<\/div>\n <div class=\"stat-l\">JOUEURS<\/div>\n <\/div>\n <\/div>\n <div class=\"gacts\">\n <button class=\"gact primary\" id=\"revealBtn\" onclick=\"revealAnswer()\">\ud83d\udd0d R\u00c9V\u00c9LER LA R\u00c9PONSE<\/button>\n <button class=\"gact\" id=\"nextBtn\" onclick=\"nextQ()\" style=\"display:none\">SUIVANT \u25b6<\/button>\n <button class=\"gact\" id=\"finishBtn\" onclick=\"doFinish()\" style=\"display:none\">PODIUM \ud83c\udfc6<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"scoreboard\" class=\"scr\" style=\"display:none\">\n <div class=\"sttl\">\u2014 Classement \u2014<\/div>\n <div id=\"slist\"><\/div>\n <div class=\"sacts\">\n <button class=\"sact primary\" id=\"snext\" onclick=\"\">QUESTION SUIVANTE \u25b6<\/button>\n <button class=\"sact\" id=\"sfinish\" style=\"display:none\" onclick=\"doFinish()\">PODIUM \ud83c\udfc6<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"final\" class=\"scr\" style=\"display:none\">\n <div class=\"troph\">\ud83c\udfc6<\/div>\n <div class=\"fhead\">CHAMPIONS DU QUIZ !<\/div>\n <div class=\"podwrap\" id=\"podium\"><\/div>\n <div class=\"frank\" id=\"frank\"><\/div>\n <button class=\"launch-btn\" style=\"max-width:400px;margin-top:1rem\" onclick=\"location.reload()\">\ud83d\udd04 REJOUER<\/button>\n<\/div>\n\n\n<script>\n\/* \u2500\u2500 FIREBASE \u2500\u2500 *\/\nfirebase.initializeApp({\n apiKey:\"AIzaSyDr2MTBJz12LPIcGrC-aeNHXgtrKRHDGNY\",\n authDomain:\"final-b59d8.firebaseapp.com\",\n databaseURL:\"https:\/\/final-b59d8-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId:\"final-b59d8\",\n storageBucket:\"final-b59d8.firebasestorage.app\",\n messagingSenderId:\"752381093261\",\n appId:\"1:752381093261:web:e09de65ba1a03ab39109c4\"\n});\nconst db = firebase.database();\nconst PLAYER_URL = \"https:\/\/www.animcloud.fr\/player\/\";\nconst TL = 20;\nconst medals = ['\ud83e\udd47','\ud83e\udd48','\ud83e\udd49'];\n\n\/* \u2500\u2500 QUESTIONS \u2500\u2500 *\/\nconst QS = [\n {q:\"Dans quelle ville se joue la finale de la LDC 2026 ?\", opts:[\"Londres\",\"Munich\",\"Budapest\",\"Madrid\"], ans:2, diff:\"easy\"},\n {q:\"Combien de fois le PSG a-t-il remport\u00e9 la LDC avant cette finale ?\", opts:[\"0 fois\",\"1 fois \u2014 2025 contre l'Inter\",\"2 fois\",\"3 fois\"], ans:1, diff:\"easy\"},\n {q:\"Par quel score le PSG a-t-il battu l'Inter Milan en finale 2025 ?\", opts:[\"2-0\",\"3-1\",\"4-1\",\"5-0\"], ans:3, diff:\"medium\"},\n {q:\"En 1995, le PSG a remport\u00e9 quelle finale europ\u00e9enne ?\", opts:[\"La Ligue des Champions\",\"La Coupe UEFA\",\"La Coupe des Coupes\",\"La Supercoupe d'Europe\"], ans:2, diff:\"medium\"},\n {q:\"Quelles \u00e9quipes le PSG a-t-il \u00e9limin\u00e9es pour la finale 2025-26 ?\", opts:[\"Monaco, Chelsea, Liverpool, Bayern\",\"Barcelone, Chelsea, Real Madrid, Bayern\",\"Monaco, Liverpool, Atletico, Bayern\",\"Brest, Chelsea, Liverpool, Bayern\"], ans:0, diff:\"medium\"},\n {q:\"Par quel score cumul\u00e9 le PSG a-t-il \u00e9limin\u00e9 Liverpool en quarts ?\", opts:[\"2-0\",\"3-1\",\"4-0\",\"5-1\"], ans:2, diff:\"hard\"},\n {q:\"Par quel score cumul\u00e9 le PSG a-t-il \u00e9limin\u00e9 le Bayern en demi ?\", opts:[\"4-3\",\"5-4\",\"6-5\",\"7-4\"], ans:2, diff:\"hard\"},\n {q:\"Quelles \u00e9quipes Arsenal a-t-il \u00e9limin\u00e9es pour la finale 2025-26 ?\", opts:[\"Inter, Barcelone, Atl\u00e9tico\",\"Leverkusen, Sporting CP, Atl\u00e9tico\",\"Leverkusen, Liverpool, Real Madrid\",\"PSV, Sporting CP, Atletico\"], ans:1, diff:\"medium\"},\n {q:\"Arsenal a termin\u00e9 \u00e0 quelle place en phase de ligue 2025-26 ?\", opts:[\"1\u00e8re place\",\"2\u00e8me place\",\"3\u00e8me place\",\"4\u00e8me place\"], ans:0, diff:\"medium\"},\n {q:\"Quel joueur du PSG a marqu\u00e9 le plus de buts en LDC 2025-26 ?\", opts:[\"Mbapp\u00e9\",\"Demb\u00e9l\u00e9\",\"Barcola\",\"Asensio\"], ans:1, diff:\"hard\"},\n {q:\"Quel est le nom du stade de la finale 2026 ?\", opts:[\"Allianz Arena\",\"Pusk\u00e1s Ar\u00e9na\",\"Wembley\",\"Bernabeu\"], ans:1, diff:\"easy\"},\n {q:\"Combien de fois Arsenal a-t-il atteint la finale de la LDC ?\", opts:[\"Jamais\",\"1 fois\",\"2 fois\",\"3 fois\"], ans:1, diff:\"medium\"},\n {q:\"En quelle ann\u00e9e a \u00e9t\u00e9 cr\u00e9\u00e9e la Ligue des Champions format actuel ?\", opts:[\"1955\",\"1992\",\"1999\",\"2004\"], ans:1, diff:\"easy\"},\n {q:\"Quel record le PSG a-t-il battu en demi-finale retour contre le Bayern ?\", opts:[\"Plus grand score d'une demi-finale\",\"Plus d'affluence\",\"Plus de tirs\",\"Plus de passes\"], ans:0, diff:\"hard\"},\n {q:\"Qui est l'entra\u00eeneur du PSG pour la finale 2026 ?\", opts:[\"Luis Enrique\",\"Zinedine Zidane\",\"Thomas Tuchel\",\"Mauricio Pochettino\"], ans:0, diff:\"easy\"}\n];\n\n\/* \u2500\u2500 STATE \u2500\u2500 *\/\nlet gRef, roomId;\nlet curQ = 0;\nlet totalPlayers = 0;\nlet tick = null;\nlet timeLeft = TL;\nlet answerListener = null;\n\n\/* \u2500\u2500 STARS \u2500\u2500 *\/\n(()=>{\n const c = document.getElementById('stars');\n for(let i=0;i<60;i++){\n const s = document.createElement('div');\n s.className = 'star';\n const sz = Math.random()*2+1;\n s.style.cssText = `width:${sz}px;height:${sz}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--dur:${2+Math.random()*4}s;animation-delay:${Math.random()*4}s`;\n c.appendChild(s);\n }\n})();\n\n\/* \u2500\u2500 INIT ROOM \u2500\u2500 *\/\nroomId = 'ROOM_' + Math.random().toString(36).substr(2,6).toUpperCase();\ngRef = db.ref('games\/' + roomId);\ngRef.set({ state:'lobby', currentQ:-1, players:{}, questions:QS });\n\nconst joinUrl = PLAYER_URL + '?room=' + roomId;\n\n\/* Afficher le room code *\/\ndocument.getElementById('rcode').textContent = roomId;\n\n\/* G\u00e9n\u00e9rer le QR code dynamiquement *\/\nnew QRCode(document.getElementById('qr-container'), {\n text: joinUrl,\n width: 220,\n height: 220,\n colorDark: '#000000',\n colorLight: '#ffffff',\n correctLevel: QRCode.CorrectLevel.M\n});\n\n\/* \u2500\u2500 \u00c9COUTE JOUEURS \u2500\u2500 *\/\ngRef.child('players').on('value', snap => {\n const pl = snap.val() || {};\n const names = Object.values(pl).map(p => p.name).filter(Boolean);\n totalPlayers = names.length;\n document.getElementById('pc').textContent = names.length === 0\n ? 'En attente des joueurs...'\n : `${names.length} joueur${names.length > 1 ? 's' : ''} connect\u00e9${names.length > 1 ? 's' : ''}`;\n document.getElementById('plist').innerHTML = names.map(n => `<span class=\"pchip\">\ud83d\udc64 ${n}<\/span>`).join('');\n document.getElementById('startBtn').disabled = names.length < 1;\n document.getElementById('stTot').textContent = totalPlayers;\n});\n\n\/* \u2500\u2500 UTILS \u00c9CRANS \u2500\u2500 *\/\nfunction showScreen(id) {\n ['lobby','game','scoreboard','final'].forEach(s => {\n document.getElementById(s).style.display = 'none';\n });\n document.getElementById(id).style.display = 'flex';\n document.getElementById(id).style.flexDirection = 'column';\n}\n\n\/* \u2500\u2500 START \u2500\u2500 *\/\nfunction startGame() {\n curQ = 0;\n document.getElementById('ld').style.display = 'block';\n document.getElementById('ll').style.display = 'block';\n document.getElementById('hs').style.display = 'none';\n showQuestion(0);\n}\n\n\/* \u2500\u2500 AFFICHER QUESTION \u2500\u2500 *\/\nfunction showQuestion(idx) {\n const q = QS[idx];\n showScreen('game');\n\n \/* Meta *\/\n document.getElementById('hqNum').textContent = `Q${idx+1}\/${QS.length}`;\n const diffMap = { easy:'FACILE', medium:'MOYEN', hard:'DIFFICILE' };\n const diffCls = { easy:'dh-easy', medium:'dh-medium', hard:'dh-hard' };\n const diffEl = document.getElementById('hqDiff');\n diffEl.textContent = diffMap[q.diff] || q.diff;\n diffEl.className = 'q-diff-h ' + (diffCls[q.diff] || 'dh-easy');\n\n \/* Texte *\/\n document.getElementById('hqTxt').textContent = q.q;\n\n \/* Options *\/\n const ltrs = ['A','B','C','D'];\n const cols = ['o0','o1','o2','o3'];\n document.getElementById('hOpts').innerHTML = q.opts.map((opt,i) => `\n <div class=\"ohost ${cols[i]}\" id=\"ho${i}\">\n <div class=\"oltr\">${ltrs[i]}<\/div>\n <div class=\"otxt\">${opt}<\/div>\n <\/div>\n `).join('');\n\n \/* Boutons *\/\n document.getElementById('revealBtn').style.display = 'block';\n document.getElementById('nextBtn').style.display = 'none';\n document.getElementById('finishBtn').style.display = 'none';\n\n \/* Stats *\/\n document.getElementById('stAnsw').textContent = 0;\n document.getElementById('stTot').textContent = totalPlayers;\n\n \/* Firebase : \u00e9tat playing \u2014 on efface les r\u00e9ponses pr\u00e9c\u00e9dentes *\/\n gRef.update({ state:'playing', currentQ: idx, answers: null, revealed: false, questionStartTime: Date.now() });\n\n \/* Timer *\/\n startTimer();\n\n \/* \u00c9coute des r\u00e9ponses *\/\n if(answerListener) gRef.child('answers').off('value', answerListener);\n answerListener = gRef.child('answers').on('value', snap => {\n const ans = snap.val() || {};\n document.getElementById('stAnsw').textContent = Object.keys(ans).length;\n });\n}\n\n\/* \u2500\u2500 TIMER \u2500\u2500 *\/\nfunction startTimer() {\n stopTimer();\n timeLeft = TL;\n setTimerUI(TL);\n tick = setInterval(() => {\n timeLeft = Math.max(0, timeLeft - 1);\n setTimerUI(timeLeft);\n if(timeLeft === 0) stopTimer();\n }, 1000);\n}\n\nfunction setTimerUI(t) {\n const fill = document.getElementById('hFill');\n const num = document.getElementById('hNum');\n fill.style.width = (t \/ TL * 100) + '%';\n fill.style.background = t <= 5\n ? 'linear-gradient(90deg,#7f1d1d,#ef4444)'\n : t <= 10\n ? 'linear-gradient(90deg,#7a6030,#C9A84C)'\n : 'linear-gradient(90deg,#7a6030,#F0D080)';\n num.textContent = t;\n num.style.color = t <= 5 ? '#ef4444' : '#F0D080';\n}\n\nfunction stopTimer() {\n clearInterval(tick);\n tick = null;\n}\n\n\/* \u2500\u2500 R\u00c9V\u00c9LER \u2500\u2500 *\/\nfunction revealAnswer() {\n stopTimer();\n const q = QS[curQ];\n\n \/* Colorier les options *\/\n for(let i=0; i<4; i++){\n const el = document.getElementById('ho' + i);\n if(!el) continue;\n el.classList.add(i === q.ans ? 'correct' : 'wrong');\n }\n\n \/* Firebase : \u00e9tat revealed *\/\n gRef.update({ state:'revealed' });\n\n \/* Calculer scores depuis Firebase *\/\n gRef.child('answers').once('value', snap => {\n const answers = snap.val() || {};\n const updates = {};\n Object.entries(answers).forEach(([pid, data]) => {\n if(data.answer === q.ans){\n const bonus = Math.max(0, TL - (data.time || TL));\n const pts = 100 + bonus * 5;\n updates[`players\/${pid}\/score`] = firebase.database.ServerValue.increment(pts);\n updates[`players\/${pid}\/correct`] = firebase.database.ServerValue.increment(1);\n }\n });\n if(Object.keys(updates).length > 0) gRef.update(updates);\n \/* Effacer les r\u00e9ponses *\/\n gRef.child('answers').remove();\n });\n\n \/* Boutons *\/\n document.getElementById('revealBtn').style.display = 'none';\n const isLast = curQ >= QS.length - 1;\n document.getElementById('nextBtn').style.display = isLast ? 'none' : 'block';\n document.getElementById('finishBtn').style.display = isLast ? 'block' : 'none';\n}\n\n\/* \u2500\u2500 QUESTION SUIVANTE \u2500\u2500 *\/\nfunction nextQ() {\n curQ++;\n showScoreboard(() => showQuestion(curQ));\n}\n\n\/* \u2500\u2500 SCOREBOARD \u2500\u2500 *\/\nfunction showScoreboard(cb) {\n showScreen('scoreboard');\n const isLast = curQ >= QS.length - 1;\n document.getElementById('snext').style.display = isLast ? 'none' : 'block';\n document.getElementById('sfinish').style.display = isLast ? 'block' : 'none';\n document.getElementById('snext').onclick = () => { if(cb) cb(); };\n\n gRef.child('players').once('value', snap => {\n const pl = Object.values(snap.val() || {}).sort((a,b) => (b.score||0) - (a.score||0));\n document.getElementById('slist').innerHTML = pl.map((p,i) => `\n <div class=\"srow\" style=\"animation-delay:${i*.07}s\">\n <div class=\"srk ${i===0?'rkg':i===1?'rksi':i===2?'rkbr':'rkot'}\">${i<3?medals[i]:'#'+(i+1)}<\/div>\n <div class=\"sbw\"><div class=\"sbn\">${p.name||'?'}<\/div><\/div>\n <div class=\"sco\">${p.correct||0} \u2713<\/div>\n <div class=\"spt\">${p.score||0} pts<\/div>\n <\/div>\n `).join('');\n });\n}\n\n\/* \u2500\u2500 PODIUM FINAL \u2500\u2500 *\/\nfunction doFinish() {\n gRef.update({ state:'finished' });\n showScreen('final');\n\n gRef.child('players').once('value', snap => {\n const pl = Object.values(snap.val() || {}).sort((a,b) => (b.score||0) - (a.score||0));\n const [p1,p2,p3] = [pl[0], pl[1], pl[2]];\n\n document.getElementById('podium').innerHTML = `\n ${p2 ? `<div class=\"podcol\"><div class=\"pname\">${p2.name}<\/div><div class=\"ppts\">${p2.score||0} pts<\/div><div class=\"pblk pb2\">\ud83e\udd48<\/div><\/div>` : ''}\n ${p1 ? `<div class=\"podcol\"><div class=\"pname\">${p1.name}<\/div><div class=\"ppts\">${p1.score||0} pts<\/div><div class=\"pblk pb1\">\ud83e\udd47<\/div><\/div>` : ''}\n ${p3 ? `<div class=\"podcol\"><div class=\"pname\">${p3.name}<\/div><div class=\"ppts\">${p3.score||0} pts<\/div><div class=\"pblk pb3\">\ud83e\udd49<\/div><\/div>` : ''}\n `;\n\n document.getElementById('frank').innerHTML = pl.map((p,i) => `\n <div class=\"srow\" style=\"animation-delay:${i*.06}s\">\n <div class=\"srk ${i===0?'rkg':i===1?'rksi':i===2?'rkbr':'rkot'}\">${i<3?medals[i]:'#'+(i+1)}<\/div>\n <div class=\"sbw\"><div class=\"sbn\">${p.name||'?'}<\/div><\/div>\n <div class=\"sco\">${p.correct||0} \u2713<\/div>\n <div class=\"spt\">${p.score||0} pts<\/div>\n <\/div>\n `).join('');\n });\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \u00c9DITEUR DE QUESTIONS\n Les questions sont sauvegard\u00e9es dans localStorage\n et recharg\u00e9es \u00e0 chaque ouverture du host.\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst LS_KEY = 'quiz_ldc_questions';\n\n\/\/ Au d\u00e9marrage : charger depuis localStorage si dispo\n(function loadSavedQuestions() {\n try {\n const saved = localStorage.getItem(LS_KEY);\n if (saved) {\n const parsed = JSON.parse(saved);\n if (Array.isArray(parsed) && parsed.length > 0) {\n QS.length = 0;\n parsed.forEach(q => QS.push(q));\n }\n }\n } catch(e) {}\n})();\n\nfunction openEditor() {\n renderEditor();\n document.getElementById('editorModal').style.display = 'block';\n}\n\nfunction closeEditor() {\n document.getElementById('editorModal').style.display = 'none';\n}\n\nfunction renderEditor() {\n const list = document.getElementById('editorList');\n list.innerHTML = QS.map((q, i) => `\n <div style=\"background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);border-radius:12px;padding:1rem;\" id=\"qblock-${i}\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;\">\n <span style=\"font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;color:#C9A84C;\">QUESTION ${i+1}<\/span>\n <div style=\"display:flex;gap:8px;align-items:center;\">\n <select id=\"diff-${i}\" style=\"background:#1a1a35;border:1px solid rgba(201,168,76,.3);color:#EEF0F8;border-radius:6px;padding:4px 8px;font-size:12px;\">\n <option value=\"easy\" ${q.diff==='easy'?'selected':''}>\ud83d\udfe2 Facile<\/option>\n <option value=\"medium\" ${q.diff==='medium'?'selected':''}>\ud83d\udfe1 Moyen<\/option>\n <option value=\"hard\" ${q.diff==='hard'?'selected':''}>\ud83d\udd34 Difficile<\/option>\n <\/select>\n <button onclick=\"removeQuestion(${i})\" style=\"background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#ef4444;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px;\">\ud83d\uddd1<\/button>\n <\/div>\n <\/div>\n <textarea id=\"qtxt-${i}\" rows=\"2\" placeholder=\"Texte de la question\"\n style=\"width:100%;background:#12122a;border:1px solid rgba(255,255,255,.12);color:#EEF0F8;border-radius:8px;padding:10px;font-size:14px;font-family:'Exo 2',sans-serif;resize:vertical;margin-bottom:.75rem;\">${q.q}<\/textarea>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:8px;\">\n ${q.opts.map((opt, j) => `\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <input type=\"radio\" name=\"ans-${i}\" id=\"ans-${i}-${j}\" value=\"${j}\" ${q.ans===j?'checked':''} style=\"accent-color:#C9A84C;width:16px;height:16px;flex-shrink:0;\">\n <input type=\"text\" id=\"opt-${i}-${j}\" value=\"${opt}\" placeholder=\"Option ${['A','B','C','D'][j]}\"\n style=\"flex:1;background:#12122a;border:1px solid rgba(255,255,255,.12);color:#EEF0F8;border-radius:6px;padding:8px;font-size:13px;font-family:'Exo 2',sans-serif;\">\n <\/div>\n `).join('')}\n <\/div>\n <div style=\"font-size:11px;color:rgba(238,240,248,.4);margin-top:6px;\">\u261d\ufe0f S\u00e9lectionne le bouton radio de la bonne r\u00e9ponse<\/div>\n <\/div>\n `).join('');\n}\n\nfunction addQuestion() {\n QS.push({\n q: \"Nouvelle question ?\",\n opts: [\"Option A\", \"Option B\", \"Option C\", \"Option D\"],\n ans: 0,\n diff: \"easy\"\n });\n renderEditor();\n \/\/ Scroll vers la nouvelle question\n setTimeout(() => {\n const list = document.getElementById('editorList');\n list.lastElementChild?.scrollIntoView({ behavior: 'smooth' });\n }, 100);\n}\n\nfunction removeQuestion(i) {\n if (QS.length <= 1) { alert('Il faut au moins 1 question !'); return; }\n if (!confirm(`Supprimer la question ${i+1} ?`)) return;\n QS.splice(i, 1);\n renderEditor();\n}\n\nfunction saveAndClose() {\n \/\/ Lire toutes les valeurs du formulaire\n const newQS = [];\n let errors = [];\n\n for (let i = 0; i < QS.length; i++) {\n const qtxt = document.getElementById(`qtxt-${i}`)?.value.trim();\n const diff = document.getElementById(`diff-${i}`)?.value || 'easy';\n const opts = [0,1,2,3].map(j => document.getElementById(`opt-${i}-${j}`)?.value.trim() || '');\n const ansEl = document.querySelector(`input[name=\"ans-${i}\"]:checked`);\n const ans = ansEl ? parseInt(ansEl.value) : 0;\n\n if (!qtxt) { errors.push(`Q${i+1} : texte manquant`); continue; }\n if (opts.some(o => !o)) { errors.push(`Q${i+1} : option vide`); continue; }\n\n newQS.push({ q: qtxt, opts, ans, diff });\n }\n\n if (errors.length) {\n document.getElementById('editorMsg').style.color = '#ef4444';\n document.getElementById('editorMsg').textContent = errors[0];\n return;\n }\n\n \/\/ Mettre \u00e0 jour QS\n QS.length = 0;\n newQS.forEach(q => QS.push(q));\n\n \/\/ Sauvegarder dans localStorage\n try { localStorage.setItem(LS_KEY, JSON.stringify(QS)); } catch(e) {}\n\n \/\/ Mettre \u00e0 jour Firebase si la room existe d\u00e9j\u00e0\n if(gRef) {\n gRef.update({ questions: QS });\n }\n\n document.getElementById('editorMsg').style.color = '#10b981';\n document.getElementById('editorMsg').textContent = `\u2705 ${QS.length} questions sauvegard\u00e9es !`;\n setTimeout(() => {\n document.getElementById('editorMsg').textContent = '';\n closeEditor();\n }, 1500);\n}\n\n\/* \u2500\u2500 INIT \u00c9CRANS \u2500\u2500 *\/\nshowScreen('lobby');\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Quiz LDC \u2014 PSG vs Arsenal \u2014 Animateur \ud83c\udfc6 UEFA Champions League PSG FINALE ARSENAL LIVE ANIMATEUR \u26bd QUIZ CHAMPIONS Budapest \u00b7 30 mai 2026 \u00b7 18h00 QR Code joueurs \ud83d\udcf1 Scannez le QR codeou rendez-vous suranimcloud.fr\/player Code de la salle \u2014 Joueurs connect\u00e9s En attente des joueurs… \u26a1 LANCER LA PARTIE \u270f\ufe0f Modifier les […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10147","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/comments?post=10147"}],"version-history":[{"count":17,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10147\/revisions"}],"predecessor-version":[{"id":10179,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10147\/revisions\/10179"}],"wp:attachment":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/media?parent=10147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":10147,"date":"2026-05-29T10:01:17","date_gmt":"2026-05-29T10:01:17","guid":{"rendered":"https:\/\/www.animcloud.fr\/?page_id=10147"},"modified":"2026-05-29T18:43:32","modified_gmt":"2026-05-29T18:43:32","slug":"host","status":"publish","type":"page","link":"https:\/\/www.animcloud.fr\/en\/host\/","title":{"rendered":"host"},"content":{"rendered":"\n\n\n\n\n\nQuiz LDC \u2014 PSG vs Arsenal \u2014 Animateur<\/title>\n<link href=\"https:\/\/fonts.googleapis.com\/css2?family=Orbitron:wght@400;700;900&family=Exo+2:wght@300;400;600;700&display=swap\" rel=\"stylesheet\">\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-app-compat.js\"><\/script>\n<script src=\"https:\/\/www.gstatic.com\/firebasejs\/10.12.0\/firebase-database-compat.js\"><\/script>\n<script src=\"https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/qrcodejs\/1.0.0\/qrcode.min.js\"><\/script>\n<style>\n*{box-sizing:border-box;margin:0;padding:0;}\n:root{\n --gold:#C9A84C;--gl:#F0D080;--gd:#a07030;\n --bg:#07071a;--sf:rgba(255,255,255,.04);\n --bd:rgba(201,168,76,.18);--bdh:rgba(201,168,76,.35);\n --ok:#10b981;--err:#ef4444;--r:14px;--mu:rgba(238,240,248,.45);\n}\nbody{font-family:'Exo 2',sans-serif;background:var(--bg);color:#EEF0F8;min-height:100vh;overflow-x:hidden;}\n\n\/* \u2500\u2500 STARS \u2500\u2500 *\/\n.stars{position:fixed;inset:0;z-index:0;pointer-events:none;}\n.star{position:absolute;border-radius:50%;background:#fff;opacity:.5;animation:twinkle var(--dur,3s) ease-in-out infinite alternate;}\n@keyframes twinkle{from{opacity:.15}to{opacity:.7}}\n\n\/* \u2500\u2500 UCL BG \u2500\u2500 *\/\n.ucl-bg{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%);font-size:40vw;opacity:.02;z-index:0;pointer-events:none;user-select:none;}\n\n\/* \u2500\u2500 HEADER \u2500\u2500 *\/\n.hdr{position:sticky;top:0;z-index:200;height:58px;background:rgba(7,7,26,.97);border-bottom:1px solid var(--bd);display:flex;align-items:center;justify-content:space-between;padding:0 2rem;}\n.wm{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:4px;color:var(--mu);}\n.mu{display:flex;align-items:center;gap:1rem;}\n.cb{font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:900;letter-spacing:3px;display:flex;align-items:center;gap:8px;}\n.dp{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#003f7f,#0060bf);border:1px solid rgba(0,100,200,.5);}\n.da{width:22px;height:22px;border-radius:50%;background:linear-gradient(135deg,#7f0000,#bf0000);border:1px solid rgba(200,0,0,.5);}\n.vp{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:5px;color:var(--gold);padding:3px 10px;border:1px solid rgba(201,168,76,.3);border-radius:20px;}\n.hr2{display:flex;align-items:center;gap:10px;}\n.live-dot{width:8px;height:8px;border-radius:50%;background:var(--ok);animation:blink 1s ease-in-out infinite alternate;}\n.live-txt{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:4px;color:var(--ok);}\n@keyframes blink{from{opacity:1}to{opacity:.2}}\n\n.scr{position:relative;z-index:1;}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n LOBBY\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#lobby{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:2.5rem;}\n.lob-title{text-align:center;}\n.lob-title h1{font-family:'Orbitron',sans-serif;font-size:clamp(1.8rem,4vw,3rem);font-weight:900;background:linear-gradient(135deg,var(--gl),var(--gold),var(--gd));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;letter-spacing:4px;line-height:1.1;margin-bottom:.5rem;}\n.lob-title p{font-size:.75rem;letter-spacing:6px;color:var(--mu);text-transform:uppercase;}\n\n.lob-grid{display:grid;grid-template-columns:280px 1fr;gap:1.5rem;width:100%;max-width:900px;align-items:start;}\n@media(max-width:700px){.lob-grid{grid-template-columns:1fr;}}\n\n.card{background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:1.5rem;position:relative;overflow:hidden;}\n.card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gl),transparent);opacity:.5;}\n.ctitle{font-family:'Orbitron',sans-serif;font-size:.56rem;letter-spacing:5px;color:var(--gold);margin-bottom:1.1rem;display:flex;align-items:center;gap:8px;}\n.ctitle::before{content:'';display:inline-block;width:14px;height:1px;background:var(--gold);}\n\n.rc-instruction{font-size:.78rem;color:var(--mu);line-height:1.6;margin-bottom:1rem;text-align:center;}\n#qr-container{background:#fff;border-radius:10px;padding:10px;display:inline-block;margin-bottom:1rem;}\n.room-code{text-align:center;}\n.rc-lbl{font-family:'Orbitron',sans-serif;font-size:.55rem;letter-spacing:4px;color:var(--mu);margin-bottom:.4rem;}\n.rc-val{font-family:'Orbitron',sans-serif;font-size:1.3rem;font-weight:900;color:var(--gl);letter-spacing:4px;background:rgba(240,208,128,.08);border:1px solid rgba(240,208,128,.25);border-radius:8px;padding:.4rem 1rem;display:inline-block;}\n\n#pc{font-size:.82rem;color:var(--mu);margin-bottom:.8rem;letter-spacing:1px;}\n#plist{display:flex;flex-wrap:wrap;gap:6px;min-height:50px;align-content:flex-start;}\n.pchip{background:rgba(201,168,76,.1);border:1px solid var(--bdh);border-radius:20px;padding:4px 14px;font-size:.8rem;font-weight:600;color:var(--gl);animation:chip .35s cubic-bezier(.34,1.56,.64,1);}\n@keyframes chip{from{transform:scale(.5);opacity:0;}to{transform:scale(1);opacity:1;}}\n\n.launch-btn{\n padding:1.1rem 3rem;font-family:'Orbitron',sans-serif;font-size:.85rem;font-weight:900;letter-spacing:4px;\n background:linear-gradient(135deg,var(--gd),var(--gold),var(--gl),var(--gold),var(--gd));\n background-size:300% 100%;border:none;border-radius:var(--r);color:#07071a;cursor:pointer;\n transition:background-position .3s,transform .15s,box-shadow .3s;\n box-shadow:0 0 30px rgba(201,168,76,.3);\n}\n.launch-btn:hover:not(:disabled){background-position:100% 0;box-shadow:0 0 50px rgba(201,168,76,.5);transform:translateY(-2px);}\n.launch-btn:disabled{opacity:.3;cursor:not-allowed;transform:none;box-shadow:none;}\n.edit-btn{margin-top:.5rem;padding:.7rem 2rem;font-family:'Orbitron',sans-serif;font-size:.72rem;letter-spacing:3px;background:transparent;border:1px solid rgba(201,168,76,.35);color:var(--mu);border-radius:var(--r);cursor:pointer;transition:all .2s;}\n.edit-btn:hover{border-color:var(--gold);color:var(--gl);background:rgba(201,168,76,.08);}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n GAME\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#game{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;}\n\n.q-card{width:100%;max-width:860px;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:2rem;position:relative;overflow:hidden;}\n.q-card::before{content:'';position:absolute;top:0;left:0;right:0;height:1px;background:linear-gradient(90deg,transparent,var(--gl),transparent);opacity:.5;}\n\n.q-meta{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.2rem;}\n.q-num{font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:4px;color:var(--mu);}\n.q-diff-h{font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;padding:4px 12px;border-radius:20px;}\n.dh-easy{background:rgba(16,185,129,.15);color:var(--ok);border:1px solid rgba(16,185,129,.3);}\n.dh-medium{background:rgba(201,168,76,.15);color:var(--gold);border:1px solid rgba(201,168,76,.3);}\n.dh-hard{background:rgba(239,68,68,.15);color:var(--err);border:1px solid rgba(239,68,68,.3);}\n\n.timer-wrap{display:flex;align-items:center;gap:12px;margin-bottom:1.4rem;}\n.t-track{flex:1;height:8px;border-radius:4px;background:rgba(255,255,255,.08);overflow:hidden;}\n.t-fill{height:100%;border-radius:4px;background:linear-gradient(90deg,#7a6030,#F0D080);transition:width .9s linear,background .3s;}\n.t-num{font-family:'Orbitron',sans-serif;font-size:2rem;font-weight:900;color:var(--gl);min-width:48px;text-align:right;}\n\n.q-txt{font-size:1.1rem;font-weight:600;line-height:1.5;color:#EEF0F8;margin-bottom:1.4rem;text-align:center;}\n\n.ogrid{display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin-bottom:1.4rem;}\n.ohost{padding:1.1rem 1.4rem;border-radius:var(--r);display:flex;align-items:center;gap:1rem;border:1px solid transparent;transition:border-color .4s,background .4s;}\n.o0{background:rgba(0,63,127,.25);}\n.o1{background:rgba(127,0,0,.25);}\n.o2{background:rgba(0,80,40,.25);}\n.o3{background:rgba(80,50,0,.25);}\n.ohost.correct{background:rgba(16,185,129,.2);border-color:var(--ok);box-shadow:0 0 20px rgba(16,185,129,.2);}\n.ohost.wrong{background:rgba(239,68,68,.07);border-color:rgba(239,68,68,.25);opacity:.5;}\n.oltr{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:.7rem;font-weight:900;flex-shrink:0;}\n.o0 .oltr{background:rgba(0,63,127,.6);color:#90c8ff;}\n.o1 .oltr{background:rgba(127,0,0,.6);color:#ffa0a0;}\n.o2 .oltr{background:rgba(0,80,40,.6);color:#90ffb0;}\n.o3 .oltr{background:rgba(80,50,0,.6);color:#ffd090;}\n.ohost.correct .oltr{background:rgba(16,185,129,.3);color:#6ee7b7;}\n.otxt{font-size:.92rem;font-weight:600;line-height:1.3;flex:1;}\n\n.stats-row{display:flex;gap:1rem;justify-content:center;margin-bottom:1.2rem;}\n.stat-box{background:rgba(255,255,255,.04);border:1px solid var(--bd);border-radius:10px;padding:.6rem 1.5rem;text-align:center;}\n.stat-n{font-family:'Orbitron',sans-serif;font-size:1.6rem;font-weight:900;color:var(--gl);}\n.stat-l{font-size:.6rem;letter-spacing:3px;color:var(--mu);}\n\n.gacts{display:flex;gap:1rem;justify-content:center;flex-wrap:wrap;}\n.gact{padding:.75rem 2rem;font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:3px;font-weight:700;border-radius:var(--r);cursor:pointer;border:1px solid var(--bdh);background:var(--sf);color:#EEF0F8;transition:all .2s;}\n.gact.primary{background:linear-gradient(135deg,var(--gd),var(--gold));color:#07071a;border:none;box-shadow:0 0 20px rgba(201,168,76,.3);}\n.gact:hover:not(:disabled){transform:translateY(-2px);}\n.gact:disabled{opacity:.3;cursor:not-allowed;}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n SCOREBOARD\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#scoreboard{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;}\n.sttl{font-family:'Orbitron',sans-serif;font-size:1rem;letter-spacing:6px;color:var(--mu);}\n#slist{width:100%;max-width:600px;display:flex;flex-direction:column;gap:.5rem;}\n.srow{display:flex;align-items:center;gap:1rem;background:var(--sf);border:1px solid var(--bd);border-radius:var(--r);padding:.8rem 1.2rem;animation:fadeUp .4s ease both;}\n@keyframes fadeUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}\n.srk{width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-family:'Orbitron',sans-serif;font-size:.75rem;font-weight:900;flex-shrink:0;}\n.rkg{background:linear-gradient(135deg,#b8960c,#ffd700);color:#07071a;}\n.rksi{background:linear-gradient(135deg,#808080,#c0c0c0);color:#07071a;}\n.rkbr{background:linear-gradient(135deg,#8b4513,#cd7f32);color:#07071a;}\n.rkot{background:rgba(255,255,255,.08);color:var(--mu);}\n.sbw{flex:1;}\n.sbn{font-weight:700;font-size:.95rem;}\n.sco{font-size:.8rem;color:var(--ok);min-width:40px;text-align:center;}\n.spt{font-family:'Orbitron',sans-serif;font-size:1rem;font-weight:900;color:var(--gl);min-width:60px;text-align:right;}\n.sacts{display:flex;gap:1rem;flex-wrap:wrap;justify-content:center;}\n.sact{padding:.8rem 2.5rem;font-family:'Orbitron',sans-serif;font-size:.7rem;letter-spacing:3px;font-weight:700;border-radius:var(--r);cursor:pointer;border:1px solid var(--bdh);background:var(--sf);color:#EEF0F8;transition:all .2s;}\n.sact.primary{background:linear-gradient(135deg,var(--gd),var(--gold));color:#07071a;border:none;box-shadow:0 0 20px rgba(201,168,76,.3);}\n.sact:hover{transform:translateY(-2px);}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n FINAL\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\n#final{min-height:calc(100vh - 58px);display:flex;flex-direction:column;align-items:center;justify-content:center;padding:2rem;gap:1.5rem;}\n.troph{font-size:5rem;animation:bounce .8s ease infinite alternate;}\n@keyframes bounce{from{transform:translateY(0)}to{transform:translateY(-14px)}}\n.fhead{font-family:'Orbitron',sans-serif;font-size:clamp(1.2rem,3vw,2rem);font-weight:900;letter-spacing:4px;background:linear-gradient(135deg,var(--gl),var(--gold),var(--gd));-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text;text-align:center;}\n.podwrap{display:flex;align-items:flex-end;gap:1rem;justify-content:center;flex-wrap:wrap;}\n.podcol{display:flex;flex-direction:column;align-items:center;gap:.4rem;}\n.pblk{width:80px;display:flex;align-items:center;justify-content:center;font-size:2rem;border-radius:8px 8px 0 0;}\n.pb1{height:100px;background:linear-gradient(to bottom,rgba(255,215,0,.25),rgba(255,215,0,.05));border:1px solid rgba(255,215,0,.4);}\n.pb2{height:75px;background:linear-gradient(to bottom,rgba(192,192,192,.2),rgba(192,192,192,.02));border:1px solid rgba(192,192,192,.3);}\n.pb3{height:60px;background:linear-gradient(to bottom,rgba(205,127,50,.2),rgba(205,127,50,.02));border:1px solid rgba(205,127,50,.3);}\n.pname{font-weight:700;font-size:.9rem;text-align:center;max-width:90px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}\n.ppts{font-size:.75rem;color:var(--mu);}\n.frank{width:100%;max-width:580px;}\n<\/style>\n<\/head>\n<body>\n\n<div class=\"stars\" id=\"stars\"><\/div>\n<div class=\"ucl-bg\">\ud83c\udfc6<\/div>\n\n\n<div class=\"hdr\">\n <div class=\"wm\">UEFA Champions League<\/div>\n <div class=\"mu\">\n <div class=\"cb\"><div class=\"dp\"><\/div> PSG<\/div>\n <div class=\"vp\">FINALE<\/div>\n <div class=\"cb\">ARSENAL <div class=\"da\"><\/div><\/div>\n <\/div>\n <div class=\"hr2\">\n <div class=\"live-dot\" id=\"ld\" style=\"display:none\"><\/div>\n <div class=\"live-txt\" id=\"ll\" style=\"display:none\">LIVE<\/div>\n <div class=\"wm\" id=\"hs\">ANIMATEUR<\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"lobby\" class=\"scr\">\n <div class=\"lob-title\">\n <h1>\u26bd QUIZ CHAMPIONS<\/h1>\n <p>Budapest \u00b7 30 mai 2026 \u00b7 18h00<\/p>\n <\/div>\n <div class=\"lob-grid\">\n\n \n <div class=\"card\">\n <div class=\"ctitle\">QR Code joueurs<\/div>\n <p class=\"rc-instruction\">\ud83d\udcf1 Scannez le QR code<br>ou rendez-vous sur<br><strong style=\"color:var(--gl)\">animcloud.fr\/player<\/strong><\/p>\n <div style=\"text-align:center;margin-bottom:1rem;\">\n <div id=\"qr-container\"><\/div>\n <\/div>\n <div class=\"room-code\">\n <div class=\"rc-lbl\">Code de la salle<\/div>\n <div class=\"rc-val\" id=\"rcode\">\u2014<\/div>\n <\/div>\n <\/div>\n\n \n <div class=\"card\">\n <div class=\"ctitle\">Joueurs connect\u00e9s<\/div>\n <div id=\"pc\">En attente des joueurs…<\/div>\n <div id=\"plist\"><\/div>\n <\/div>\n\n <\/div>\n <button class=\"launch-btn\" id=\"startBtn\" onclick=\"startGame()\" disabled>\u26a1 LANCER LA PARTIE<\/button>\n <button class=\"edit-btn\" onclick=\"openEditor()\">\u270f\ufe0f Modifier les questions<\/button>\n<\/div>\n\n\n<div id=\"editorModal\" style=\"display:none;position:fixed;inset:0;z-index:500;background:rgba(0,0,0,.85);overflow-y:auto;padding:2rem 1rem;\">\n <div style=\"max-width:780px;margin:0 auto;background:#0e0e24;border:1px solid rgba(201,168,76,.3);border-radius:16px;padding:2rem;\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem;\">\n <div style=\"font-family:'Orbitron',sans-serif;font-size:.8rem;letter-spacing:4px;color:#C9A84C;\">\u270f\ufe0f \u00c9DITEUR DE QUESTIONS<\/div>\n <button onclick=\"closeEditor()\" style=\"background:transparent;border:1px solid rgba(255,255,255,.2);color:#EEF0F8;border-radius:8px;padding:6px 14px;cursor:pointer;font-size:13px;\">\u2715 Fermer<\/button>\n <\/div>\n <div id=\"editorList\" style=\"display:flex;flex-direction:column;gap:1rem;margin-bottom:1.5rem;\"><\/div>\n <div style=\"display:flex;gap:1rem;\">\n <button onclick=\"addQuestion()\" style=\"flex:1;padding:12px;background:rgba(201,168,76,.15);border:1px solid rgba(201,168,76,.4);color:#F0D080;border-radius:10px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:.65rem;letter-spacing:3px;\">+ AJOUTER UNE QUESTION<\/button>\n <button onclick=\"saveAndClose()\" style=\"flex:1;padding:12px;background:linear-gradient(135deg,#7a6030,#C9A84C);border:none;color:#000;border-radius:10px;cursor:pointer;font-family:'Orbitron',sans-serif;font-size:.65rem;font-weight:900;letter-spacing:3px;\">\ud83d\udcbe SAUVEGARDER<\/button>\n <\/div>\n <div id=\"editorMsg\" style=\"text-align:center;margin-top:.75rem;font-size:12px;color:#10b981;min-height:18px;\"><\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"game\" class=\"scr\" style=\"display:none\">\n <div class=\"q-card\">\n <div class=\"q-meta\">\n <span class=\"q-num\" id=\"hqNum\">Q1\/15<\/span>\n <span class=\"q-diff-h dh-easy\" id=\"hqDiff\">FACILE<\/span>\n <\/div>\n <div class=\"timer-wrap\">\n <div class=\"t-track\"><div class=\"t-fill\" id=\"hFill\" style=\"width:100%\"><\/div><\/div>\n <div class=\"t-num\" id=\"hNum\">20<\/div>\n <\/div>\n <div class=\"q-txt\" id=\"hqTxt\">…<\/div>\n <div class=\"ogrid\" id=\"hOpts\"><\/div>\n <div class=\"stats-row\">\n <div class=\"stat-box\">\n <div class=\"stat-n\" id=\"stAnsw\">0<\/div>\n <div class=\"stat-l\">R\u00c9PONSES<\/div>\n <\/div>\n <div class=\"stat-box\">\n <div class=\"stat-n\" id=\"stTot\">0<\/div>\n <div class=\"stat-l\">JOUEURS<\/div>\n <\/div>\n <\/div>\n <div class=\"gacts\">\n <button class=\"gact primary\" id=\"revealBtn\" onclick=\"revealAnswer()\">\ud83d\udd0d R\u00c9V\u00c9LER LA R\u00c9PONSE<\/button>\n <button class=\"gact\" id=\"nextBtn\" onclick=\"nextQ()\" style=\"display:none\">SUIVANT \u25b6<\/button>\n <button class=\"gact\" id=\"finishBtn\" onclick=\"doFinish()\" style=\"display:none\">PODIUM \ud83c\udfc6<\/button>\n <\/div>\n <\/div>\n<\/div>\n\n\n<div id=\"scoreboard\" class=\"scr\" style=\"display:none\">\n <div class=\"sttl\">\u2014 Classement \u2014<\/div>\n <div id=\"slist\"><\/div>\n <div class=\"sacts\">\n <button class=\"sact primary\" id=\"snext\" onclick=\"\">QUESTION SUIVANTE \u25b6<\/button>\n <button class=\"sact\" id=\"sfinish\" style=\"display:none\" onclick=\"doFinish()\">PODIUM \ud83c\udfc6<\/button>\n <\/div>\n<\/div>\n\n\n<div id=\"final\" class=\"scr\" style=\"display:none\">\n <div class=\"troph\">\ud83c\udfc6<\/div>\n <div class=\"fhead\">CHAMPIONS DU QUIZ !<\/div>\n <div class=\"podwrap\" id=\"podium\"><\/div>\n <div class=\"frank\" id=\"frank\"><\/div>\n <button class=\"launch-btn\" style=\"max-width:400px;margin-top:1rem\" onclick=\"location.reload()\">\ud83d\udd04 REJOUER<\/button>\n<\/div>\n\n\n<script>\n\/* \u2500\u2500 FIREBASE \u2500\u2500 *\/\nfirebase.initializeApp({\n apiKey:\"AIzaSyDr2MTBJz12LPIcGrC-aeNHXgtrKRHDGNY\",\n authDomain:\"final-b59d8.firebaseapp.com\",\n databaseURL:\"https:\/\/final-b59d8-default-rtdb.europe-west1.firebasedatabase.app\",\n projectId:\"final-b59d8\",\n storageBucket:\"final-b59d8.firebasestorage.app\",\n messagingSenderId:\"752381093261\",\n appId:\"1:752381093261:web:e09de65ba1a03ab39109c4\"\n});\nconst db = firebase.database();\nconst PLAYER_URL = \"https:\/\/www.animcloud.fr\/player\/\";\nconst TL = 20;\nconst medals = ['\ud83e\udd47','\ud83e\udd48','\ud83e\udd49'];\n\n\/* \u2500\u2500 QUESTIONS \u2500\u2500 *\/\nconst QS = [\n {q:\"Dans quelle ville se joue la finale de la LDC 2026 ?\", opts:[\"Londres\",\"Munich\",\"Budapest\",\"Madrid\"], ans:2, diff:\"easy\"},\n {q:\"Combien de fois le PSG a-t-il remport\u00e9 la LDC avant cette finale ?\", opts:[\"0 fois\",\"1 fois \u2014 2025 contre l'Inter\",\"2 fois\",\"3 fois\"], ans:1, diff:\"easy\"},\n {q:\"Par quel score le PSG a-t-il battu l'Inter Milan en finale 2025 ?\", opts:[\"2-0\",\"3-1\",\"4-1\",\"5-0\"], ans:3, diff:\"medium\"},\n {q:\"En 1995, le PSG a remport\u00e9 quelle finale europ\u00e9enne ?\", opts:[\"La Ligue des Champions\",\"La Coupe UEFA\",\"La Coupe des Coupes\",\"La Supercoupe d'Europe\"], ans:2, diff:\"medium\"},\n {q:\"Quelles \u00e9quipes le PSG a-t-il \u00e9limin\u00e9es pour la finale 2025-26 ?\", opts:[\"Monaco, Chelsea, Liverpool, Bayern\",\"Barcelone, Chelsea, Real Madrid, Bayern\",\"Monaco, Liverpool, Atletico, Bayern\",\"Brest, Chelsea, Liverpool, Bayern\"], ans:0, diff:\"medium\"},\n {q:\"Par quel score cumul\u00e9 le PSG a-t-il \u00e9limin\u00e9 Liverpool en quarts ?\", opts:[\"2-0\",\"3-1\",\"4-0\",\"5-1\"], ans:2, diff:\"hard\"},\n {q:\"Par quel score cumul\u00e9 le PSG a-t-il \u00e9limin\u00e9 le Bayern en demi ?\", opts:[\"4-3\",\"5-4\",\"6-5\",\"7-4\"], ans:2, diff:\"hard\"},\n {q:\"Quelles \u00e9quipes Arsenal a-t-il \u00e9limin\u00e9es pour la finale 2025-26 ?\", opts:[\"Inter, Barcelone, Atl\u00e9tico\",\"Leverkusen, Sporting CP, Atl\u00e9tico\",\"Leverkusen, Liverpool, Real Madrid\",\"PSV, Sporting CP, Atletico\"], ans:1, diff:\"medium\"},\n {q:\"Arsenal a termin\u00e9 \u00e0 quelle place en phase de ligue 2025-26 ?\", opts:[\"1\u00e8re place\",\"2\u00e8me place\",\"3\u00e8me place\",\"4\u00e8me place\"], ans:0, diff:\"medium\"},\n {q:\"Quel joueur du PSG a marqu\u00e9 le plus de buts en LDC 2025-26 ?\", opts:[\"Mbapp\u00e9\",\"Demb\u00e9l\u00e9\",\"Barcola\",\"Asensio\"], ans:1, diff:\"hard\"},\n {q:\"Quel est le nom du stade de la finale 2026 ?\", opts:[\"Allianz Arena\",\"Pusk\u00e1s Ar\u00e9na\",\"Wembley\",\"Bernabeu\"], ans:1, diff:\"easy\"},\n {q:\"Combien de fois Arsenal a-t-il atteint la finale de la LDC ?\", opts:[\"Jamais\",\"1 fois\",\"2 fois\",\"3 fois\"], ans:1, diff:\"medium\"},\n {q:\"En quelle ann\u00e9e a \u00e9t\u00e9 cr\u00e9\u00e9e la Ligue des Champions format actuel ?\", opts:[\"1955\",\"1992\",\"1999\",\"2004\"], ans:1, diff:\"easy\"},\n {q:\"Quel record le PSG a-t-il battu en demi-finale retour contre le Bayern ?\", opts:[\"Plus grand score d'une demi-finale\",\"Plus d'affluence\",\"Plus de tirs\",\"Plus de passes\"], ans:0, diff:\"hard\"},\n {q:\"Qui est l'entra\u00eeneur du PSG pour la finale 2026 ?\", opts:[\"Luis Enrique\",\"Zinedine Zidane\",\"Thomas Tuchel\",\"Mauricio Pochettino\"], ans:0, diff:\"easy\"}\n];\n\n\/* \u2500\u2500 STATE \u2500\u2500 *\/\nlet gRef, roomId;\nlet curQ = 0;\nlet totalPlayers = 0;\nlet tick = null;\nlet timeLeft = TL;\nlet answerListener = null;\n\n\/* \u2500\u2500 STARS \u2500\u2500 *\/\n(()=>{\n const c = document.getElementById('stars');\n for(let i=0;i<60;i++){\n const s = document.createElement('div');\n s.className = 'star';\n const sz = Math.random()*2+1;\n s.style.cssText = `width:${sz}px;height:${sz}px;left:${Math.random()*100}%;top:${Math.random()*100}%;--dur:${2+Math.random()*4}s;animation-delay:${Math.random()*4}s`;\n c.appendChild(s);\n }\n})();\n\n\/* \u2500\u2500 INIT ROOM \u2500\u2500 *\/\nroomId = 'ROOM_' + Math.random().toString(36).substr(2,6).toUpperCase();\ngRef = db.ref('games\/' + roomId);\ngRef.set({ state:'lobby', currentQ:-1, players:{}, questions:QS });\n\nconst joinUrl = PLAYER_URL + '?room=' + roomId;\n\n\/* Afficher le room code *\/\ndocument.getElementById('rcode').textContent = roomId;\n\n\/* G\u00e9n\u00e9rer le QR code dynamiquement *\/\nnew QRCode(document.getElementById('qr-container'), {\n text: joinUrl,\n width: 220,\n height: 220,\n colorDark: '#000000',\n colorLight: '#ffffff',\n correctLevel: QRCode.CorrectLevel.M\n});\n\n\/* \u2500\u2500 \u00c9COUTE JOUEURS \u2500\u2500 *\/\ngRef.child('players').on('value', snap => {\n const pl = snap.val() || {};\n const names = Object.values(pl).map(p => p.name).filter(Boolean);\n totalPlayers = names.length;\n document.getElementById('pc').textContent = names.length === 0\n ? 'En attente des joueurs...'\n : `${names.length} joueur${names.length > 1 ? 's' : ''} connect\u00e9${names.length > 1 ? 's' : ''}`;\n document.getElementById('plist').innerHTML = names.map(n => `<span class=\"pchip\">\ud83d\udc64 ${n}<\/span>`).join('');\n document.getElementById('startBtn').disabled = names.length < 1;\n document.getElementById('stTot').textContent = totalPlayers;\n});\n\n\/* \u2500\u2500 UTILS \u00c9CRANS \u2500\u2500 *\/\nfunction showScreen(id) {\n ['lobby','game','scoreboard','final'].forEach(s => {\n document.getElementById(s).style.display = 'none';\n });\n document.getElementById(id).style.display = 'flex';\n document.getElementById(id).style.flexDirection = 'column';\n}\n\n\/* \u2500\u2500 START \u2500\u2500 *\/\nfunction startGame() {\n curQ = 0;\n document.getElementById('ld').style.display = 'block';\n document.getElementById('ll').style.display = 'block';\n document.getElementById('hs').style.display = 'none';\n showQuestion(0);\n}\n\n\/* \u2500\u2500 AFFICHER QUESTION \u2500\u2500 *\/\nfunction showQuestion(idx) {\n const q = QS[idx];\n showScreen('game');\n\n \/* Meta *\/\n document.getElementById('hqNum').textContent = `Q${idx+1}\/${QS.length}`;\n const diffMap = { easy:'FACILE', medium:'MOYEN', hard:'DIFFICILE' };\n const diffCls = { easy:'dh-easy', medium:'dh-medium', hard:'dh-hard' };\n const diffEl = document.getElementById('hqDiff');\n diffEl.textContent = diffMap[q.diff] || q.diff;\n diffEl.className = 'q-diff-h ' + (diffCls[q.diff] || 'dh-easy');\n\n \/* Texte *\/\n document.getElementById('hqTxt').textContent = q.q;\n\n \/* Options *\/\n const ltrs = ['A','B','C','D'];\n const cols = ['o0','o1','o2','o3'];\n document.getElementById('hOpts').innerHTML = q.opts.map((opt,i) => `\n <div class=\"ohost ${cols[i]}\" id=\"ho${i}\">\n <div class=\"oltr\">${ltrs[i]}<\/div>\n <div class=\"otxt\">${opt}<\/div>\n <\/div>\n `).join('');\n\n \/* Boutons *\/\n document.getElementById('revealBtn').style.display = 'block';\n document.getElementById('nextBtn').style.display = 'none';\n document.getElementById('finishBtn').style.display = 'none';\n\n \/* Stats *\/\n document.getElementById('stAnsw').textContent = 0;\n document.getElementById('stTot').textContent = totalPlayers;\n\n \/* Firebase : \u00e9tat playing \u2014 on efface les r\u00e9ponses pr\u00e9c\u00e9dentes *\/\n gRef.update({ state:'playing', currentQ: idx, answers: null, revealed: false, questionStartTime: Date.now() });\n\n \/* Timer *\/\n startTimer();\n\n \/* \u00c9coute des r\u00e9ponses *\/\n if(answerListener) gRef.child('answers').off('value', answerListener);\n answerListener = gRef.child('answers').on('value', snap => {\n const ans = snap.val() || {};\n document.getElementById('stAnsw').textContent = Object.keys(ans).length;\n });\n}\n\n\/* \u2500\u2500 TIMER \u2500\u2500 *\/\nfunction startTimer() {\n stopTimer();\n timeLeft = TL;\n setTimerUI(TL);\n tick = setInterval(() => {\n timeLeft = Math.max(0, timeLeft - 1);\n setTimerUI(timeLeft);\n if(timeLeft === 0) stopTimer();\n }, 1000);\n}\n\nfunction setTimerUI(t) {\n const fill = document.getElementById('hFill');\n const num = document.getElementById('hNum');\n fill.style.width = (t \/ TL * 100) + '%';\n fill.style.background = t <= 5\n ? 'linear-gradient(90deg,#7f1d1d,#ef4444)'\n : t <= 10\n ? 'linear-gradient(90deg,#7a6030,#C9A84C)'\n : 'linear-gradient(90deg,#7a6030,#F0D080)';\n num.textContent = t;\n num.style.color = t <= 5 ? '#ef4444' : '#F0D080';\n}\n\nfunction stopTimer() {\n clearInterval(tick);\n tick = null;\n}\n\n\/* \u2500\u2500 R\u00c9V\u00c9LER \u2500\u2500 *\/\nfunction revealAnswer() {\n stopTimer();\n const q = QS[curQ];\n\n \/* Colorier les options *\/\n for(let i=0; i<4; i++){\n const el = document.getElementById('ho' + i);\n if(!el) continue;\n el.classList.add(i === q.ans ? 'correct' : 'wrong');\n }\n\n \/* Firebase : \u00e9tat revealed *\/\n gRef.update({ state:'revealed' });\n\n \/* Calculer scores depuis Firebase *\/\n gRef.child('answers').once('value', snap => {\n const answers = snap.val() || {};\n const updates = {};\n Object.entries(answers).forEach(([pid, data]) => {\n if(data.answer === q.ans){\n const bonus = Math.max(0, TL - (data.time || TL));\n const pts = 100 + bonus * 5;\n updates[`players\/${pid}\/score`] = firebase.database.ServerValue.increment(pts);\n updates[`players\/${pid}\/correct`] = firebase.database.ServerValue.increment(1);\n }\n });\n if(Object.keys(updates).length > 0) gRef.update(updates);\n \/* Effacer les r\u00e9ponses *\/\n gRef.child('answers').remove();\n });\n\n \/* Boutons *\/\n document.getElementById('revealBtn').style.display = 'none';\n const isLast = curQ >= QS.length - 1;\n document.getElementById('nextBtn').style.display = isLast ? 'none' : 'block';\n document.getElementById('finishBtn').style.display = isLast ? 'block' : 'none';\n}\n\n\/* \u2500\u2500 QUESTION SUIVANTE \u2500\u2500 *\/\nfunction nextQ() {\n curQ++;\n showScoreboard(() => showQuestion(curQ));\n}\n\n\/* \u2500\u2500 SCOREBOARD \u2500\u2500 *\/\nfunction showScoreboard(cb) {\n showScreen('scoreboard');\n const isLast = curQ >= QS.length - 1;\n document.getElementById('snext').style.display = isLast ? 'none' : 'block';\n document.getElementById('sfinish').style.display = isLast ? 'block' : 'none';\n document.getElementById('snext').onclick = () => { if(cb) cb(); };\n\n gRef.child('players').once('value', snap => {\n const pl = Object.values(snap.val() || {}).sort((a,b) => (b.score||0) - (a.score||0));\n document.getElementById('slist').innerHTML = pl.map((p,i) => `\n <div class=\"srow\" style=\"animation-delay:${i*.07}s\">\n <div class=\"srk ${i===0?'rkg':i===1?'rksi':i===2?'rkbr':'rkot'}\">${i<3?medals[i]:'#'+(i+1)}<\/div>\n <div class=\"sbw\"><div class=\"sbn\">${p.name||'?'}<\/div><\/div>\n <div class=\"sco\">${p.correct||0} \u2713<\/div>\n <div class=\"spt\">${p.score||0} pts<\/div>\n <\/div>\n `).join('');\n });\n}\n\n\/* \u2500\u2500 PODIUM FINAL \u2500\u2500 *\/\nfunction doFinish() {\n gRef.update({ state:'finished' });\n showScreen('final');\n\n gRef.child('players').once('value', snap => {\n const pl = Object.values(snap.val() || {}).sort((a,b) => (b.score||0) - (a.score||0));\n const [p1,p2,p3] = [pl[0], pl[1], pl[2]];\n\n document.getElementById('podium').innerHTML = `\n ${p2 ? `<div class=\"podcol\"><div class=\"pname\">${p2.name}<\/div><div class=\"ppts\">${p2.score||0} pts<\/div><div class=\"pblk pb2\">\ud83e\udd48<\/div><\/div>` : ''}\n ${p1 ? `<div class=\"podcol\"><div class=\"pname\">${p1.name}<\/div><div class=\"ppts\">${p1.score||0} pts<\/div><div class=\"pblk pb1\">\ud83e\udd47<\/div><\/div>` : ''}\n ${p3 ? `<div class=\"podcol\"><div class=\"pname\">${p3.name}<\/div><div class=\"ppts\">${p3.score||0} pts<\/div><div class=\"pblk pb3\">\ud83e\udd49<\/div><\/div>` : ''}\n `;\n\n document.getElementById('frank').innerHTML = pl.map((p,i) => `\n <div class=\"srow\" style=\"animation-delay:${i*.06}s\">\n <div class=\"srk ${i===0?'rkg':i===1?'rksi':i===2?'rkbr':'rkot'}\">${i<3?medals[i]:'#'+(i+1)}<\/div>\n <div class=\"sbw\"><div class=\"sbn\">${p.name||'?'}<\/div><\/div>\n <div class=\"sco\">${p.correct||0} \u2713<\/div>\n <div class=\"spt\">${p.score||0} pts<\/div>\n <\/div>\n `).join('');\n });\n}\n\n\/* \u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\n \u00c9DITEUR DE QUESTIONS\n Les questions sont sauvegard\u00e9es dans localStorage\n et recharg\u00e9es \u00e0 chaque ouverture du host.\n\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550\u2550 *\/\nconst LS_KEY = 'quiz_ldc_questions';\n\n\/\/ Au d\u00e9marrage : charger depuis localStorage si dispo\n(function loadSavedQuestions() {\n try {\n const saved = localStorage.getItem(LS_KEY);\n if (saved) {\n const parsed = JSON.parse(saved);\n if (Array.isArray(parsed) && parsed.length > 0) {\n QS.length = 0;\n parsed.forEach(q => QS.push(q));\n }\n }\n } catch(e) {}\n})();\n\nfunction openEditor() {\n renderEditor();\n document.getElementById('editorModal').style.display = 'block';\n}\n\nfunction closeEditor() {\n document.getElementById('editorModal').style.display = 'none';\n}\n\nfunction renderEditor() {\n const list = document.getElementById('editorList');\n list.innerHTML = QS.map((q, i) => `\n <div style=\"background:rgba(255,255,255,.04);border:1px solid rgba(201,168,76,.2);border-radius:12px;padding:1rem;\" id=\"qblock-${i}\">\n <div style=\"display:flex;justify-content:space-between;align-items:center;margin-bottom:.75rem;\">\n <span style=\"font-family:'Orbitron',sans-serif;font-size:.6rem;letter-spacing:3px;color:#C9A84C;\">QUESTION ${i+1}<\/span>\n <div style=\"display:flex;gap:8px;align-items:center;\">\n <select id=\"diff-${i}\" style=\"background:#1a1a35;border:1px solid rgba(201,168,76,.3);color:#EEF0F8;border-radius:6px;padding:4px 8px;font-size:12px;\">\n <option value=\"easy\" ${q.diff==='easy'?'selected':''}>\ud83d\udfe2 Facile<\/option>\n <option value=\"medium\" ${q.diff==='medium'?'selected':''}>\ud83d\udfe1 Moyen<\/option>\n <option value=\"hard\" ${q.diff==='hard'?'selected':''}>\ud83d\udd34 Difficile<\/option>\n <\/select>\n <button onclick=\"removeQuestion(${i})\" style=\"background:rgba(239,68,68,.15);border:1px solid rgba(239,68,68,.3);color:#ef4444;border-radius:6px;padding:4px 10px;cursor:pointer;font-size:12px;\">\ud83d\uddd1<\/button>\n <\/div>\n <\/div>\n <textarea id=\"qtxt-${i}\" rows=\"2\" placeholder=\"Texte de la question\"\n style=\"width:100%;background:#12122a;border:1px solid rgba(255,255,255,.12);color:#EEF0F8;border-radius:8px;padding:10px;font-size:14px;font-family:'Exo 2',sans-serif;resize:vertical;margin-bottom:.75rem;\">${q.q}<\/textarea>\n <div style=\"display:grid;grid-template-columns:1fr 1fr;gap:8px;\">\n ${q.opts.map((opt, j) => `\n <div style=\"display:flex;align-items:center;gap:6px;\">\n <input type=\"radio\" name=\"ans-${i}\" id=\"ans-${i}-${j}\" value=\"${j}\" ${q.ans===j?'checked':''} style=\"accent-color:#C9A84C;width:16px;height:16px;flex-shrink:0;\">\n <input type=\"text\" id=\"opt-${i}-${j}\" value=\"${opt}\" placeholder=\"Option ${['A','B','C','D'][j]}\"\n style=\"flex:1;background:#12122a;border:1px solid rgba(255,255,255,.12);color:#EEF0F8;border-radius:6px;padding:8px;font-size:13px;font-family:'Exo 2',sans-serif;\">\n <\/div>\n `).join('')}\n <\/div>\n <div style=\"font-size:11px;color:rgba(238,240,248,.4);margin-top:6px;\">\u261d\ufe0f S\u00e9lectionne le bouton radio de la bonne r\u00e9ponse<\/div>\n <\/div>\n `).join('');\n}\n\nfunction addQuestion() {\n QS.push({\n q: \"Nouvelle question ?\",\n opts: [\"Option A\", \"Option B\", \"Option C\", \"Option D\"],\n ans: 0,\n diff: \"easy\"\n });\n renderEditor();\n \/\/ Scroll vers la nouvelle question\n setTimeout(() => {\n const list = document.getElementById('editorList');\n list.lastElementChild?.scrollIntoView({ behavior: 'smooth' });\n }, 100);\n}\n\nfunction removeQuestion(i) {\n if (QS.length <= 1) { alert('Il faut au moins 1 question !'); return; }\n if (!confirm(`Supprimer la question ${i+1} ?`)) return;\n QS.splice(i, 1);\n renderEditor();\n}\n\nfunction saveAndClose() {\n \/\/ Lire toutes les valeurs du formulaire\n const newQS = [];\n let errors = [];\n\n for (let i = 0; i < QS.length; i++) {\n const qtxt = document.getElementById(`qtxt-${i}`)?.value.trim();\n const diff = document.getElementById(`diff-${i}`)?.value || 'easy';\n const opts = [0,1,2,3].map(j => document.getElementById(`opt-${i}-${j}`)?.value.trim() || '');\n const ansEl = document.querySelector(`input[name=\"ans-${i}\"]:checked`);\n const ans = ansEl ? parseInt(ansEl.value) : 0;\n\n if (!qtxt) { errors.push(`Q${i+1} : texte manquant`); continue; }\n if (opts.some(o => !o)) { errors.push(`Q${i+1} : option vide`); continue; }\n\n newQS.push({ q: qtxt, opts, ans, diff });\n }\n\n if (errors.length) {\n document.getElementById('editorMsg').style.color = '#ef4444';\n document.getElementById('editorMsg').textContent = errors[0];\n return;\n }\n\n \/\/ Mettre \u00e0 jour QS\n QS.length = 0;\n newQS.forEach(q => QS.push(q));\n\n \/\/ Sauvegarder dans localStorage\n try { localStorage.setItem(LS_KEY, JSON.stringify(QS)); } catch(e) {}\n\n \/\/ Mettre \u00e0 jour Firebase si la room existe d\u00e9j\u00e0\n if(gRef) {\n gRef.update({ questions: QS });\n }\n\n document.getElementById('editorMsg').style.color = '#10b981';\n document.getElementById('editorMsg').textContent = `\u2705 ${QS.length} questions sauvegard\u00e9es !`;\n setTimeout(() => {\n document.getElementById('editorMsg').textContent = '';\n closeEditor();\n }, 1500);\n}\n\n\/* \u2500\u2500 INIT \u00c9CRANS \u2500\u2500 *\/\nshowScreen('lobby');\n<\/script>\n<\/body>\n<\/html>\n","protected":false},"excerpt":{"rendered":"<p>Quiz LDC \u2014 PSG vs Arsenal \u2014 Animateur \ud83c\udfc6 UEFA Champions League PSG FINALE ARSENAL LIVE ANIMATEUR \u26bd QUIZ CHAMPIONS Budapest \u00b7 30 mai 2026 \u00b7 18h00 QR Code joueurs \ud83d\udcf1 Scannez le QR codeou rendez-vous suranimcloud.fr\/player Code de la salle \u2014 Joueurs connect\u00e9s En attente des joueurs… \u26a1 LANCER LA PARTIE \u270f\ufe0f Modifier les […]<\/p>\n","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-10147","page","type-page","status-publish","hentry"],"jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10147","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/comments?post=10147"}],"version-history":[{"count":17,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10147\/revisions"}],"predecessor-version":[{"id":10179,"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/pages\/10147\/revisions\/10179"}],"wp:attachment":[{"href":"https:\/\/www.animcloud.fr\/en\/wp-json\/wp\/v2\/media?parent=10147"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}