/* Votre niveau IA en 5 minutes : style arcade rétro (fond nuit, aplats vifs, typo pixel). */
@font-face { font-family: 'PixelTitre'; src: url('fonts/press-start-2p-latin.woff2') format('woff2'); font-display: swap; }
@font-face { font-family: 'PixelTexte'; src: url('fonts/vt323-latin.woff2') format('woff2'); font-display: swap; }

:root {
  --fond: #120a2e;
  --fond-2: #1b1040;
  --carte: #221552;
  --carte-2: #2b1c66;
  --bord: #4a35a8;
  --texte: #f3efff;
  --texte-2: #c9bff2;
  --muet: #9d92cf;
  --vert: #5dff6a;
  --rouge: #ff4b4b;
  --jaune: #ffe24a;
  --cyan: #3ef2d2;
  --rose: #ff5fa8;
  --violet: #9b5cff;
  --bleu: #5ec8ff;
  --orange: #ff8c2e;
  --ombre: #07031a;
  --titre: 'PixelTitre', 'Courier New', monospace;
  --texte-font: 'PixelTexte', 'Courier New', monospace;
  --px: 4px;
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; min-height: 100dvh;
  background: var(--fond); color: var(--texte);
  font-family: var(--texte-font); font-size: 22px; line-height: 1.25;
  overflow-x: hidden;
}
body::before { /* ciel étoilé (pixels fixes, sans image) */
  content: ''; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(circle at 50% 0, #2a1766 0, var(--fond) 60%),
    var(--fond);
}
.etoiles { position: fixed; inset: 0; z-index: -1; pointer-events: none; }
.etoiles i { position: absolute; width: 3px; height: 3px; background: #fff; opacity: .7; animation: scintille 3s steps(2) infinite; }
.etoiles i:nth-child(3n) { opacity: .35; animation-duration: 4.5s; }
.etoiles i:nth-child(5n) { background: var(--cyan); animation-duration: 2.2s; }
@keyframes scintille { 0%, 100% { opacity: .2; } 50% { opacity: .9; } }

/* ---------- Typo ---------- */
h1, h2, h3, .titre { font-family: var(--titre); font-weight: normal; line-height: 1.45; letter-spacing: 0; margin: 0; }
h1 { font-size: 22px; color: var(--vert); text-shadow: var(--px) var(--px) 0 #1e6b2a, 0 0 18px rgba(93, 255, 106, .35); }
h2 { font-size: 15px; color: var(--jaune); }
h3 { font-size: 12px; color: var(--cyan); text-transform: uppercase; }
p { margin: 0 0 12px; }
.muet { color: var(--muet); }
.petit { font-size: 18px; }
.centre { text-align: center; }
.vr { visibility: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------- Mise en page téléphone ---------- */
.app { max-width: 560px; margin: 0 auto; padding: 16px 16px 40px; min-height: 100dvh; display: flex; flex-direction: column; }
.ecran { display: none; flex-direction: column; flex: 1; }
.ecran.actif { display: flex; animation: entree .25s steps(4); }
@keyframes entree { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

.carte { background: var(--carte); border: var(--px) solid var(--bord); box-shadow: var(--px) var(--px) 0 var(--ombre); padding: 16px; margin-bottom: 16px; }
.carte-2 { background: var(--carte-2); }

/* Boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 56px; padding: 12px 18px; width: 100%;
  font-family: var(--titre); font-size: 12px; line-height: 1.4; text-transform: uppercase;
  color: var(--fond); background: var(--vert); border: 0; cursor: pointer; text-decoration: none;
  box-shadow: 0 var(--px) 0 #1e6b2a, 0 calc(var(--px) * 2) 0 var(--ombre);
  transition: transform .05s;
  touch-action: manipulation;
}
.btn:active { transform: translateY(var(--px)); box-shadow: 0 0 0 #1e6b2a, 0 var(--px) 0 var(--ombre); }
.btn:focus-visible, .rep:focus-visible, input:focus-visible, .choix button:focus-visible { outline: 3px solid var(--jaune); outline-offset: 3px; }
.btn[disabled] { opacity: .45; cursor: not-allowed; }
.btn-2 { background: var(--carte-2); color: var(--texte); box-shadow: 0 var(--px) 0 var(--bord), 0 calc(var(--px) * 2) 0 var(--ombre); }
.btn-2:active { box-shadow: 0 0 0 var(--bord), 0 var(--px) 0 var(--ombre); }
.btn-3 { background: var(--rose); color: var(--fond); box-shadow: 0 var(--px) 0 #a52a66, 0 calc(var(--px) * 2) 0 var(--ombre); }
.btn-cyan { background: var(--cyan); color: var(--fond); box-shadow: 0 var(--px) 0 #1f8f7c, 0 calc(var(--px) * 2) 0 var(--ombre); }
.btn-jaune { background: var(--jaune); color: var(--fond); box-shadow: 0 var(--px) 0 #a88f12, 0 calc(var(--px) * 2) 0 var(--ombre); }
.btn-ligne { background: transparent; color: var(--texte-2); box-shadow: inset 0 0 0 var(--px) var(--bord); }
.btn-ligne:active { transform: none; }
.actions { display: flex; flex-direction: column; gap: 12px; margin-top: 8px; }
.ligne { display: flex; gap: 12px; }
.ligne > * { flex: 1; }

/* Champ */
label { display: block; font-size: 20px; color: var(--texte-2); margin-bottom: 6px; }
input[type=text] {
  width: 100%; min-height: 56px; padding: 10px 14px; font: inherit; font-size: 24px;
  color: var(--texte); background: var(--fond-2); border: var(--px) solid var(--bord);
}
input[type=text]::placeholder { color: var(--muet); }
.aide { font-size: 18px; color: var(--muet); margin: 6px 0 0; }

/* ---------- Accueil ---------- */
.hero { text-align: center; padding: 18px 0 6px; }
.hero h1 { font-size: 20px; margin: 12px 0 14px; }
.hero .sous { font-size: 22px; color: var(--texte-2); }
.badge { display: inline-block; font-family: var(--titre); font-size: 9px; color: var(--fond); background: var(--jaune); padding: 6px 10px; margin: 4px 0 10px; box-shadow: var(--px) var(--px) 0 var(--ombre); }
.consigne { border-left: var(--px) solid var(--cyan); padding-left: 12px; color: var(--texte); }
.parade { display: flex; justify-content: center; gap: 10px; margin: 8px 0 4px; }
.parade canvas { image-rendering: pixelated; }
.insert-code { display: none; }
.insert-code.visible { display: block; }
.code-input { text-transform: uppercase; letter-spacing: 6px; font-family: var(--titre); font-size: 20px; text-align: center; }
.pied { margin-top: auto; padding-top: 18px; font-size: 16px; color: var(--muet); line-height: 1.3; }
.pied p { margin-bottom: 8px; }
.marque { font-family: var(--titre); font-size: 9px; color: var(--muet); letter-spacing: 1px; }

/* ---------- Avatar ---------- */
.apercu { display: flex; justify-content: center; align-items: flex-end; min-height: 110px; position: relative; }
.apercu canvas { image-rendering: pixelated; animation: flotte 1.6s steps(2) infinite; }
@keyframes flotte { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-6px); } }
.socle { position: absolute; bottom: 10px; left: 50%; width: 120px; height: 8px; margin-left: -60px; background: #2b1c66; box-shadow: 0 var(--px) 0 var(--ombre); }
.choix { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.choix button {
  min-height: 72px; background: var(--fond-2); border: var(--px) solid var(--bord); cursor: pointer; padding: 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; color: var(--texte-2); font: inherit; font-size: 18px;
  touch-action: manipulation;
}
.choix button canvas { image-rendering: pixelated; }
.choix button[aria-pressed=true] { border-color: var(--jaune); background: var(--carte-2); color: var(--jaune); box-shadow: 0 0 0 var(--px) var(--jaune) inset; }
.choix.couleurs { grid-template-columns: repeat(4, 1fr); }
.choix.couleurs button { min-height: 56px; }
.pastille { width: 28px; height: 28px; box-shadow: 3px 3px 0 var(--ombre); }
.choix.acc { grid-template-columns: repeat(4, 1fr); }
.choix.acc button { min-height: 56px; font-size: 17px; }
.nom-avatar { text-align: center; font-family: var(--titre); font-size: 11px; color: var(--cyan); margin: 6px 0 2px; }

/* ---------- Questionnaire ---------- */
.entete-q { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.compteur { font-family: var(--titre); font-size: 11px; color: var(--jaune); }
.axe { font-family: var(--titre); font-size: 9px; color: var(--cyan); text-transform: uppercase; margin-bottom: 8px; }
.mini-avatar { position: relative; flex: none; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; min-width: 60px; max-width: 96px; }
.mini-avatar canvas { image-rendering: pixelated; animation: flotte 1.6s steps(2) infinite; max-height: 72px; max-width: 96px; width: auto !important; height: auto !important; }
.stade-pips { display: flex; gap: 3px; margin-top: 4px; }
.stade-pips i { width: 8px; height: 8px; background: var(--fond-2); border: 2px solid var(--bord); }
.stade-pips i.ok { background: var(--jaune); border-color: var(--jaune); }
.apercu-formes { display: flex; justify-content: center; align-items: flex-end; gap: 14px; margin: 4px 0 14px; min-height: 56px; }
.apercu-formes canvas { image-rendering: pixelated; opacity: .85; }
.attente-secours { margin: 6px 0 4px; width: 100%; max-width: 360px; }
.attente-secours .btn { animation: entree .3s steps(3); }
.laby-mini { display: block; width: 100%; height: auto; margin-bottom: 14px; border: 2px solid #1b1040; box-shadow: 3px 3px 0 var(--ombre); image-rendering: pixelated; }
.barre { display: grid; grid-template-columns: repeat(15, 1fr); gap: 3px; height: 12px; margin-bottom: 14px; }
.barre i { background: var(--fond-2); border: 2px solid var(--bord); }
.barre i.ok { background: var(--vert); border-color: var(--vert); }
.barre i.cur { background: var(--jaune); border-color: var(--jaune); animation: scintille 1s steps(2) infinite; }
.question { font-size: 25px; line-height: 1.2; margin: 6px 0 14px; color: var(--texte); }
.reps { display: flex; flex-direction: column; gap: 10px; }
.rep {
  display: flex; align-items: center; gap: 12px; width: 100%; min-height: 60px; padding: 10px 14px; text-align: left;
  font: inherit; font-size: 22px; line-height: 1.15; color: var(--texte); background: var(--fond-2);
  border: var(--px) solid var(--bord); cursor: pointer; touch-action: manipulation; box-shadow: 0 var(--px) 0 var(--ombre);
}
.rep::before { content: ''; flex: none; width: 16px; height: 16px; border: var(--px) solid var(--muet); background: var(--fond); }
/* réponse sélectionnée (pas encore validée) : surbrillance nette, on peut encore changer d'avis */
.rep[aria-pressed=true] { border-color: var(--jaune); background: #1e3a2a; color: #fff; box-shadow: 0 0 0 var(--px) var(--jaune), 0 var(--px) 0 var(--ombre); }
.rep[aria-pressed=true]::before { background: var(--vert); border-color: var(--vert); }
.rep:active { transform: translateY(2px); }
.rep, .btn, .choix button { -webkit-touch-callout: none; -webkit-user-select: none; user-select: none; } /* pas de menu ni de sélection sur appui long (iOS) */
.reps.verrou .rep { pointer-events: none; }
.reps.verrou .rep:not([aria-pressed=true]) { opacity: .45; }
.rappel { font-size: 18px; color: var(--muet); margin: 10px 0 0; }
.nav { display: flex; gap: 12px; margin-top: 16px; }
.nav .btn { flex: 1; }
.nav .btn-2 { flex: 0 0 38%; }

/* Transition d'axe */
.inter { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; text-align: center; gap: 16px; }
.inter .texte { font-size: 28px; color: var(--jaune); max-width: 20ch; }
.inter canvas { image-rendering: pixelated; }

/* Calcul */
.calcul { display: flex; flex-direction: column; align-items: center; justify-content: center; flex: 1; gap: 20px; }
.calcul .chargement { display: flex; gap: 6px; }
.calcul .chargement i { width: 14px; height: 14px; background: var(--vert); animation: charge .9s steps(1) infinite; }
.calcul .chargement i:nth-child(2) { animation-delay: .15s; } .calcul .chargement i:nth-child(3) { animation-delay: .3s; }
.calcul .chargement i:nth-child(4) { animation-delay: .45s; } .calcul .chargement i:nth-child(5) { animation-delay: .6s; }
@keyframes charge { 0% { opacity: .2; } 50% { opacity: 1; } 100% { opacity: .2; } }

/* Compte à rebours */
.rebours { position: fixed; inset: 0; z-index: 50; display: none; align-items: center; justify-content: center; background: rgba(7, 3, 26, .92); }
.rebours.visible { display: flex; }
.rebours .chiffre { font-family: var(--titre); font-size: 96px; color: var(--jaune); text-shadow: 6px 6px 0 var(--rouge); animation: pop .9s steps(3) infinite; }
@keyframes pop { 0% { transform: scale(.6); } 40% { transform: scale(1.1); } 100% { transform: scale(1); } }

/* Évolution (montée de forme) : ancienne forme qui tremble, flash, explosion pixel, nouvelle forme plus grande */
.levelup { position: fixed; inset: 0; z-index: 60; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: rgba(7, 3, 26, .94); text-align: center; padding: 20px; }
.levelup.visible { display: flex; }
.levelup .flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; }
.levelup .flash.on { animation: flash .25s steps(2) 1; }
@keyframes flash { 0% { opacity: 1; } 100% { opacity: 0; } }
.levelup .titre-lu { font-family: var(--titre); font-size: 24px; color: var(--jaune); text-shadow: 4px 4px 0 var(--rouge); opacity: 0; }
.levelup.phase-2 .titre-lu { opacity: 1; animation: secoue .5s steps(4) 2; }
.levelup .niveau-lu { font-family: var(--titre); font-size: 13px; opacity: 0; }
.levelup.phase-2 .niveau-lu { opacity: 1; animation: entree .3s steps(3); }
.levelup .palier-lu { font-family: var(--titre); font-size: 11px; color: #fff; line-height: 1.6; opacity: 0; white-space: nowrap; }
.levelup.phase-2 .palier-lu { opacity: 1; animation: entree .3s steps(3); }
.levelup .scene-lu { position: relative; width: 260px; height: 260px; display: flex; align-items: center; justify-content: center; }
.levelup .scene-lu canvas { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); image-rendering: pixelated; }
.levelup #levelup-avant { animation: tremble .12s steps(2) infinite; }
.levelup.phase-2 #levelup-avant { display: none; }
.levelup #levelup-boum { pointer-events: none; }
.levelup #levelup-avatar { visibility: hidden; }
.levelup.phase-2 #levelup-avatar { visibility: visible; animation: surgit .7s steps(7) 1; }
@keyframes surgit { 0% { transform: translate(-50%, -50%) scale(.4); } 60% { transform: translate(-50%, -50%) scale(1.2); } 100% { transform: translate(-50%, -50%) scale(1); } }
@keyframes tremble { 0% { transform: translate(-52%, -50%); } 100% { transform: translate(-48%, -51%); } }
@keyframes monte { 0% { transform: translateY(40px) scale(.7); } 60% { transform: translateY(-14px) scale(1.15); } 100% { transform: none; } }
@keyframes secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
.confettis { position: fixed; inset: 0; pointer-events: none; z-index: 61; }
.confettis i { position: absolute; width: 8px; height: 8px; animation: tombe 1.2s steps(8) forwards; }
@keyframes tombe { from { transform: translateY(0) ; opacity: 1; } to { transform: translateY(70vh); opacity: 0; } }

/* ---------- Résultat ---------- */
.res-haut { text-align: center; }
.res-haut .surtitre { font-size: 22px; color: var(--texte-2); margin-bottom: 6px; }
.res-haut h1 { font-size: 18px; color: var(--jaune); text-shadow: 3px 3px 0 var(--rouge); }
.res-haut .niveau-res { font-family: var(--titre); font-size: 12px; margin: 8px 0 0; }
.res-haut .palier { font-family: var(--titre); font-size: 9px; color: var(--cyan); margin-top: 10px; line-height: 1.7; }
.res-avatar { position: relative; display: flex; justify-content: center; align-items: flex-end; min-height: 230px; margin: 8px 0 0; padding-bottom: 18px; }
.res-avatar canvas { position: relative; z-index: 1; image-rendering: pixelated; animation: flotte 1.6s steps(2) infinite; }
.res-avatar .halo { position: absolute; left: 50%; top: 50%; width: 220px; height: 220px; margin: -110px 0 0 -110px; background: radial-gradient(circle, rgba(255, 226, 74, .22) 0, rgba(255, 226, 74, 0) 65%); animation: scintille 2.4s steps(3) infinite; }
.socle-res { bottom: 6px; width: 180px; margin-left: -90px; }
.forme-finale { text-align: center; font-family: var(--titre); font-size: 10px; color: var(--jaune); margin: 0 0 10px; }
.radar { display: flex; justify-content: center; margin: 4px 0 10px; }
.radar svg { width: 100%; max-width: 320px; height: auto; }
.radar .grille { fill: none; stroke: var(--bord); stroke-width: 2; }
.radar .zone { fill: rgba(93, 255, 106, .3); stroke: var(--vert); stroke-width: 3; stroke-linejoin: round; }
.radar .point { fill: var(--jaune); }
.radar text { font-family: var(--texte-font); font-size: 18px; fill: var(--texte-2); }
.radar .val { fill: var(--jaune); }
ul.liste { margin: 0; padding-left: 20px; }
ul.liste li { margin-bottom: 6px; }
.axes-liste { display: flex; flex-direction: column; gap: 10px; }
.axe-ligne { display: grid; grid-template-columns: 1fr auto; gap: 4px 10px; align-items: center; }
.axe-ligne .nom { font-family: var(--titre); font-size: 9px; color: var(--cyan); }
.axe-ligne .score { font-family: var(--titre); font-size: 10px; color: var(--jaune); }
.axe-ligne .jauge { grid-column: 1 / -1; display: grid; grid-template-columns: repeat(9, 1fr); gap: 3px; height: 8px; }
.axe-ligne .jauge i { background: var(--fond-2); }
.axe-ligne .jauge i.ok { background: var(--vert); }
.axe-ligne .jauge i.ok.mid { background: var(--jaune); }
.axe-ligne .jauge i.ok.low { background: var(--orange); }
.axe-ligne .ligne-texte { grid-column: 1 / -1; font-size: 19px; color: var(--texte-2); }
.attention { border-color: var(--orange); }
.attention h3 { color: var(--orange); }
.formation .nom-f { font-size: 24px; color: var(--texte); margin-bottom: 6px; }
.toast { position: fixed; left: 16px; right: 16px; bottom: 20px; z-index: 70; background: var(--carte-2); border: var(--px) solid var(--jaune); padding: 12px 14px; font-size: 20px; box-shadow: var(--px) var(--px) 0 var(--ombre); display: none; }
.toast.visible { display: block; animation: entree .2s steps(3); }

/* Feuille d'envoi */
.feuille { position: fixed; inset: 0; z-index: 80; display: none; align-items: flex-end; background: rgba(7, 3, 26, .85); }
.feuille.visible { display: flex; }
.feuille .panneau { width: 100%; max-width: 560px; margin: 0 auto; background: var(--carte); border-top: var(--px) solid var(--jaune); padding: 16px 16px 28px; }
.feuille .panneau p { font-size: 20px; }

/* ---------- Écran projeté ---------- */
/* v8 : en-tête compact (titre, compteurs et QR sur une seule rangée), le labyrinthe prend toute la place restante */
.screen { padding: 36px 24px 10px; min-height: 100dvh; display: flex; flex-direction: column; max-width: none; }
.sc-head { display: flex; align-items: center; justify-content: space-between; gap: 24px; margin-bottom: 8px; flex: none; }
.sc-head h1 { font-size: 30px; }
.sc-head .sous { font-size: 24px; color: var(--texte-2); margin: 0; }
.sc-code { display: flex; align-items: center; gap: 18px; }
.sc-code .etiquette { font-family: var(--titre); font-size: 12px; color: var(--texte-2); text-align: right; line-height: 1.6; }
.sc-code .code { font-family: var(--titre); font-size: 44px; color: var(--jaune); text-shadow: 5px 5px 0 var(--rouge); letter-spacing: 6px; }
.sc-code .qr { background: #fff; padding: 8px; image-rendering: pixelated; }
.sc-code .qr canvas { display: block; image-rendering: pixelated; }
.sc-stat { font-family: var(--titre); font-size: 13px; color: var(--cyan); margin-top: 8px; display: flex; gap: 24px; align-items: center; }

.sc-radar { display: none; align-items: center; gap: 30px; margin-top: 14px; background: var(--carte); border: var(--px) solid var(--bord); padding: 12px 20px; }
.sc-radar.visible { display: flex; }
.sc-radar svg { width: 220px; height: auto; }
.sc-radar .legende { font-size: 24px; color: var(--texte-2); }
.sc-radar .legende b { color: var(--jaune); font-weight: normal; }

/* Barre de pilotage (écran) */
.pilote { display: flex; gap: 10px; align-items: center; margin-top: 8px; flex-wrap: wrap; flex: none; }
.pilote .btn { width: auto; min-height: 40px; font-size: 9px; padding: 8px 14px; }
.pilote .etat { font-family: var(--titre); font-size: 10px; color: var(--muet); margin-left: auto; }
.pilote .btn-attention { animation: pulse 1.2s steps(2) infinite; }
.jeton { display: none; flex: 1; align-items: center; justify-content: center; }
.jeton.visible { display: flex; }
.jeton form { width: 100%; max-width: 760px; }
.jeton input[type=password] { width: 100%; min-height: 64px; padding: 10px 14px; font: inherit; font-size: 28px; color: var(--texte); background: var(--fond-2); border: var(--px) solid var(--bord); margin-bottom: 16px; }
.encadre-animateur { border-color: var(--jaune); box-shadow: 0 0 0 var(--px) var(--fond), 0 0 0 calc(var(--px) * 2) var(--jaune), 10px 10px 0 var(--ombre); padding: 28px; animation: cadre 1.6s steps(2) infinite; }
.encadre-animateur h2 { font-size: 20px; color: var(--jaune); margin: 14px 0 12px; }
.encadre-animateur .muet { font-size: 22px; }
.encadre-animateur label { font-size: 22px; }
.etiquette-animateur { display: inline-block; font-family: var(--titre); font-size: 14px; color: var(--fond); background: var(--jaune); padding: 8px 14px; box-shadow: var(--px) var(--px) 0 var(--ombre); text-transform: uppercase; }
@keyframes cadre { 0%, 100% { border-color: var(--jaune); } 50% { border-color: var(--orange); } }
.btn-gros { min-height: 76px; font-size: 18px; }
/* Bandeau DÉMARRER (accueil) : posé par-dessus le haut du labyrinthe, compact, pour ne pas lui prendre de place */
.banniere-depart { position: absolute; left: 50%; top: 64px; transform: translateX(-50%); z-index: 85; width: min(1100px, 94%); display: flex; align-items: center; justify-content: space-between; gap: 24px; background: rgba(43, 28, 102, .94); border: var(--px) solid var(--vert); box-shadow: 6px 6px 0 var(--ombre); padding: 10px 18px; }
.banniere-depart .texte-depart { font-size: 22px; color: var(--texte-2); line-height: 1.2; }
.banniere-depart .texte-depart b { color: var(--texte); font-weight: normal; }
.btn-demarrer { width: auto; min-width: 300px; min-height: 68px; font-size: 22px; letter-spacing: 2px; animation: pulse 1.2s steps(2) infinite; flex: none; }
@keyframes pulse { 0%, 100% { box-shadow: 0 var(--px) 0 #1e6b2a, 0 calc(var(--px) * 2) 0 var(--ombre), 0 0 0 0 rgba(93, 255, 106, .6); } 50% { box-shadow: 0 var(--px) 0 #1e6b2a, 0 calc(var(--px) * 2) 0 var(--ombre), 0 0 0 10px rgba(93, 255, 106, 0); } }
.secours { display: none; flex: 1; flex-direction: column; }
.secours.visible { display: flex; }
.secours .secours-tete { display: flex; align-items: center; justify-content: space-between; gap: 30px; flex-wrap: wrap; }
.secours .secours-tete > div { flex: 1 1 520px; }
.secours .btn-retry { width: auto; min-width: 420px; min-height: 96px; font-size: 24px; letter-spacing: 1px; flex: 0 0 auto; }
.secours .secours-raison { font-family: monospace, monospace; font-size: 14px; color: var(--muet); margin: 12px 0 0; word-break: break-word; }
.secours .secours-raison:empty { display: none; }
.connexion { display: none; flex: 1; align-items: center; justify-content: center; }
.connexion.visible { display: flex; }
.connexion .carte { width: 100%; max-width: 760px; padding: 28px; }
.connexion h2 { font-size: 20px; color: var(--cyan, var(--texte)); margin: 0 0 12px; animation: pulse-texte 1.2s steps(2) infinite; }
.connexion .muet { font-size: 22px; }
@keyframes pulse-texte { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
.secours .boutons { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 16px 0; }
.secours .boutons .btn { min-height: 90px; font-size: 13px; flex-direction: column; }
.secours .boutons .btn span { font-size: 28px; }
.soucoupe { position: fixed; top: 2px; left: -120px; width: 84px; height: 36px; z-index: -1; image-rendering: pixelated; animation: vole 28s linear infinite; pointer-events: none; opacity: .9; }
@keyframes vole { from { transform: translateX(0); } to { transform: translateX(calc(100vw + 240px)); } }
/* Fusée : derrière tout le contenu (z-index -1, le QR a un fond blanc opaque) et trajectoire au milieu de l'écran,
   hors de la colonne du QR / code PLAY (à droite) et du titre (à gauche) ; le labyrinthe, opaque, la masque en passant. */
.fusee { position: fixed; left: 50%; margin-left: -32px; bottom: -200px; z-index: -1; image-rendering: pixelated; animation: decolle 14s steps(28) infinite; pointer-events: none; }
@keyframes decolle { from { transform: translateY(0); } to { transform: translateY(-140vh); } }

/* ---------- Écran projeté : petites et grandes fenêtres (16:9 de 1280 x 720 à 3840 x 2160) ---------- */
@media (max-height: 820px) {
  .screen { padding-top: 26px; }
  .sc-head h1 { font-size: 22px; }
  .sc-head .sous { font-size: 18px; }
  .sc-stat { font-size: 11px; margin-top: 4px; }
  .sc-code { gap: 12px; }
  .sc-code .code { font-size: 32px; }
  .sc-code .etiquette { font-size: 10px; }
  .pilote .btn { min-height: 34px; font-size: 8px; padding: 6px 12px; }
  .banniere-depart { top: 52px; padding: 8px 14px; }
  .banniere-depart .texte-depart { font-size: 18px; }
  .btn-demarrer { min-width: 240px; min-height: 54px; font-size: 18px; }
}
@media (min-height: 1300px) {
  .screen { padding-top: 48px; }
  .sc-head h1 { font-size: 44px; }
  .sc-head .sous { font-size: 34px; }
  .sc-stat { font-size: 18px; }
  .sc-code .code { font-size: 64px; }
  .sc-code .etiquette { font-size: 16px; }
  .pilote .btn { min-height: 56px; font-size: 13px; }
  .banniere-depart { top: 100px; width: min(1700px, 94%); }
  .banniere-depart .texte-depart { font-size: 32px; }
  .btn-demarrer { min-width: 440px; min-height: 96px; font-size: 30px; }
}

/* ---------- Accessibilité et petits écrans ---------- */
@media (max-width: 360px) {
  body { font-size: 20px; }
  .hero h1 { font-size: 16px; }
  .choix { grid-template-columns: repeat(3, 1fr); }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation: none !important; transition: none !important; }
  .etoiles i { opacity: .5; }
  .soucoupe, .fusee { display: none; }
}

/* Utilitaires (pas de style en ligne : CSP style-src 'self') */
.mt14 { margin-top: 14px; }
.m0 { margin: 0; }
.titre-avatar { margin: 10px 0 4px; }
.btn-auto { width: auto; }
.texte-calcul { font-size: 26px; color: var(--jaune); }
.profil { font-size: 23px; }
.mt10 { margin-top: 10px; }

/* Écran : la zone live occupe la hauteur, la barre de pilotage reste en bas */
#sc-live { flex: 1; min-height: 0; display: flex; flex-direction: column; }
#sc-live[hidden] { display: none; }
.pilote { margin-top: auto; position: relative; z-index: 2; }

/* ---------- Écran : labyrinthe d'arcade néon ---------- */
.laby { position: relative; flex: 1; min-height: 300px; background: #000; border: var(--px) solid #0b0620; box-shadow: 0 0 0 2px #1b1040, 8px 8px 0 var(--ombre); overflow: hidden; }
.laby canvas#laby-fond, .laby canvas#laby-pastilles { position: absolute; left: 0; top: 0; display: block; }
.laby-pions { position: absolute; inset: 0; }
.pion { position: absolute; left: 0; top: 0; display: flex; align-items: center; justify-content: center; will-change: transform; }
.pion.cache { display: none; }
.pion .corps { display: flex; align-items: center; justify-content: center; animation: flotte 1.6s steps(2) infinite; }
.pion:nth-child(2n) .corps { animation-delay: -.8s; }
.pion.apparait .corps { animation: apparait .5s steps(5); }
.pion.marche .corps { animation: pas .22s steps(2) infinite; }
@keyframes pas { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px) scaleY(.92); } }
.pion canvas { display: block; image-rendering: pixelated; filter: drop-shadow(0 0 4px rgba(255, 255, 255, .25)); }
.pion.gauche canvas { transform: scaleX(-1); }
/* Pseudo affiché en permanence (v8) : étiquette compacte sous (ou au-dessus de) chaque personnage, placée par screen.js pour qu'aucun texte
   ne se chevauche ; surlignée en jaune 2,5 s à l'évolution et à l'arrivée. */
.pion .nom { position: absolute; left: 50%; top: 100%; transform: translateX(-50%); font-family: var(--titre); font-size: 9px; line-height: 1; color: #fff; white-space: nowrap; background: rgba(5, 2, 18, .84); border: 1px solid rgba(255, 255, 255, .3); padding: 3px 4px; z-index: 80; pointer-events: none; }
.pion .nom.surligne { color: #ffe24a; border-color: #ffe24a; background: #000; box-shadow: 0 0 8px rgba(255, 226, 74, .55); animation: nom-apparait .3s steps(3); }
.pion.hors .nom { opacity: .7; }
@keyframes nom-apparait { 0% { opacity: 0; } 100% { opacity: 1; } }
.pion.hors { opacity: .45; }
.pion.fini canvas { filter: drop-shadow(0 0 6px rgba(255, 255, 255, .7)); }
.pion.evolue .corps { animation: surgit-pion .8s steps(8) 1; }
@keyframes surgit-pion { 0% { transform: scale(.5); } 50% { transform: scale(1.4); } 100% { transform: scale(1); } }
.pion .flash-pion { position: absolute; inset: -6px; background: #fff; animation: flash .4s steps(3) 1; pointer-events: none; }
.pion .boum { position: absolute; left: 50%; top: 50%; image-rendering: pixelated; pointer-events: none; z-index: 2; }
.pion .etiquette-niveau { position: absolute; top: -4px; left: 50%; transform: translateX(-50%); font-family: var(--titre); font-size: 9px; white-space: nowrap; background: #000; padding: 3px 6px; border: 2px solid currentColor; animation: monte-etiquette 1.8s steps(9) forwards; z-index: 3; }
@keyframes monte-etiquette { 0% { opacity: 0; transform: translate(-50%, 10px); } 15% { opacity: 1; transform: translate(-50%, -4px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, -16px); } }
/* pseudo placé au-dessus du personnage : l'étiquette NIVEAU part vers le bas pour ne pas le recouvrir */
.pion.nom-haut .etiquette-niveau { top: auto; bottom: -4px; animation-name: descend-etiquette; }
@keyframes descend-etiquette { 0% { opacity: 0; transform: translate(-50%, -10px); } 15% { opacity: 1; transform: translate(-50%, 4px); } 80% { opacity: 1; } 100% { opacity: 0; transform: translate(-50%, 16px); } }
.grappe-badge { position: absolute; left: 0; top: 0; font-family: var(--titre); font-size: 9px; color: #120a2e; background: #ffe24a; padding: 2px 4px; border: 2px solid #000; box-shadow: 2px 2px 0 #000; z-index: 70; pointer-events: none; white-space: nowrap; }
.bandeau { display: none; position: absolute; left: 0; right: 0; bottom: 0; height: 26px; background: rgba(0, 0, 0, .88); border-top: 2px solid #1b1040; overflow: hidden; z-index: 90; }
.bandeau.visible { display: block; }
.bandeau span { position: absolute; left: 0; top: 0; line-height: 26px; white-space: nowrap; font-family: var(--titre); font-size: 10px; color: #ffe24a; will-change: transform; }
.sc-vide { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: 60px 20px; pointer-events: none; }
.sc-vide .carte-vide { max-width: 760px; background: rgba(7, 3, 26, .92); border: var(--px) solid var(--vert); box-shadow: 8px 8px 0 var(--ombre); padding: 22px 28px; font-size: 28px; color: var(--texte-2); text-align: center; }
.sc-vide .gros { font-family: var(--titre); font-size: 22px; color: var(--vert); margin-bottom: 16px; animation: scintille 1.6s steps(2) infinite; }

/* Résultats : podium par niveau (forme finale) */
.podium { display: none; flex: 1; grid-template-columns: repeat(4, 1fr); gap: 14px; align-items: end; position: relative; padding-bottom: 6px; }
.podium.visible { display: grid; }
/* limité au podium : `.pion.marche` (personnage en déplacement dans le labyrinthe) ne doit pas hériter de cette hauteur */
.podium .marche, .sc-resultats .marche { display: flex; flex-direction: column; justify-content: flex-end; min-height: 100%; }
.marche .n { font-family: var(--titre); font-size: 34px; color: var(--neon); text-align: center; margin-bottom: 8px; text-shadow: 0 0 14px var(--neon); }
.marche .n small { font-size: 11px; color: var(--texte-2); margin-left: 8px; }
.marche .avatars { display: flex; flex-wrap: wrap; justify-content: center; align-items: flex-end; gap: 4px 10px; padding: 0 6px 6px; }
.marche .av { display: flex; flex-direction: column; align-items: center; gap: 2px; animation: apparait .5s steps(5) backwards; }
.marche .av canvas { image-rendering: pixelated; animation: flotte 1.6s steps(2) infinite; }
.marche .av .nom { font-family: var(--titre); font-size: 7px; color: var(--texte-2); max-width: 90px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.socle-podium { background: var(--sombre); border: var(--px) solid var(--neon); box-shadow: 0 0 16px var(--neon), 6px 6px 0 var(--ombre); padding: 12px 10px 10px; text-align: center; }
.marche-1 .socle-podium { min-height: 96px; } .marche-2 .socle-podium { min-height: 126px; } .marche-3 .socle-podium { min-height: 156px; } .marche-4 .socle-podium { min-height: 186px; border-color: #ffd23f; box-shadow: 0 0 0 3px var(--neon), 0 0 18px var(--neon), 6px 6px 0 var(--ombre); }
.socle-podium h2 { font-size: 11px; color: var(--neon); }
.socle-podium .phrase { font-family: var(--titre); font-size: 13px; color: #fff; margin: 10px 0 8px; line-height: 1.5; }
.socle-podium .sous { font-size: 20px; color: var(--muet); }
.podium .en-cours { position: absolute; right: 0; top: -2px; font-family: var(--titre); font-size: 10px; color: var(--muet); }
.secours .podium { min-height: 360px; }