/* ==========================================================================
   MANETTE TÉLÉPHONE : feuille de style de la vraie page.
   Reprise de la feuille du design (lot 1 de Claude Design, art/reference/telephone/
   lot1-claude-design/style.css) : mêmes classes, mêmes valeurs. Sans bibliothèque,
   sans style en ligne (la politique de sécurité du serveur l'interdit).
   Les états sont des modificateurs nommés (.bouton--inactif, .perso--pris, ...).

   Ce qui a été adapté au design pour en faire une vraie page (repéré par « ADAPTÉ ») :
   largeur fluide au lieu de 390 x 844, zones sûres, police hébergée, écran du paysage en
   recouvrement, marges des paragraphes (ex-styles en ligne), planche de composants retirée.
   La section 16 (la manche) est PROVISOIRE : le design du lot 2 n'existe pas encore.
   ========================================================================== */

/* ==========================================================================
   1. VARIABLES
   ========================================================================== */
:root {
  /* Plateau */
  --bleu-nuit: #050c45;
  --bleu-profond: #0a1c9e;
  --bleu-scene: #1238e0;
  --bleu-brillant: #2f74ff;
  --cyan-neon: #35e6ff;
  --rose-neon: #ff4fb4;
  --jaune-ampoule: #ffd84a;
  --jaune-bonbon-haut: #ffe777;
  --jaune-bonbon-bas: #ffb21e;
  --blanc: #f7faff;
  --texte-doux: #c9d8ff;
  --encre: #08134f;
  --verre: rgba(7, 18, 105, 0.68);
  --verre-fort: rgba(4, 11, 75, 0.82);
  --verre-bord: rgba(53, 230, 255, 0.55);

  /* États */
  --ok: #4df2a8;
  --alerte: #ffb02e;
  --erreur: #d92b57;
  --erreur-clair: #ffc2cd;

  /* Couleurs de réponse (plots au sol de la télé) : utilisées au lot 2 */
  --reponse-rouge: #ff3b4e;
  --reponse-bleu: #2f7bff;
  --reponse-jaune: #ffd21f;
  --reponse-vert: #22c55e;

  /* Couleurs des joueurs : volontairement différentes des 4 réponses,
     sans paires proches. La couleur est secondaire : l'avatar et le prénom
     identifient d'abord. */
  --joueur-cyan: #35e6ff;
  --joueur-orange: #ff9a3c;
  --joueur-rose: #ff5fa7;
  --joueur-violet: #a98bff;
  --joueur-blanc: #f2f6ff;
  --joueur-caramel: #c98b55;
  --joueur-argent: #93a3c4;
  --joueur-sable: #e8d3a2;
  --anneau: var(--joueur-cyan); /* couleur du joueur courant, surchargée par .joueur--xxx */

  /* Typographie */
  --police: "Fredoka", "Arial Rounded MT Bold", "Nunito", system-ui, sans-serif;
  --police-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Formes */
  --rayon-s: 14px;
  --rayon-m: 22px;
  --rayon-l: 32px;
  --rayon-rond: 999px;

  /* Zones sûres (encoche en haut, barre de geste en bas) */
  --zone-haut: 52px;
  --zone-bas: 34px;
  --marge: 24px;
}
/* ADAPTÉ : dans un vrai navigateur de téléphone la barre du navigateur mange déjà de la hauteur
   (moins de 800 px utiles) : on resserre le haut et le bas pour garder la place du contenu. */
@media (max-height: 799px) {
  :root { --zone-haut: 20px; --zone-bas: 16px; }
}

/* ==========================================================================
   2. BASE
   ========================================================================== */
*,
*::before,
*::after {
  box-sizing: border-box;
}
html,
body {
  margin: 0;
}
/* ADAPTÉ : fond de secours (bords d'écran, rebond du défilement), pas de zoom au double toucher */
html {
  background: var(--bleu-nuit);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain; /* pas de « tirer pour recharger » en pleine partie */
  background: var(--bleu-nuit);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}
[hidden] {
  display: none !important;
}
button,
input {
  font: inherit;
  color: inherit;
}
.sr-seul {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

/* ==========================================================================
   3. ÉCRAN ET DÉCOR (plateau d'émission)
   ========================================================================== */
.ecran {
  position: relative;
  isolation: isolate;
  /* ADAPTÉ : le design est figé à 390 x 844, la vraie page prend la place de l'écran (et grandit si le contenu est plus haut) */
  width: 100%;
  max-width: 520px;
  min-height: 100vh;
  min-height: 100dvh;
  margin: 0 auto;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding:
    max(var(--zone-haut), calc(env(safe-area-inset-top, 0px) + 12px))
    max(var(--marge), env(safe-area-inset-right, 0px))
    max(var(--zone-bas), calc(env(safe-area-inset-bottom, 0px) + 12px))
    max(var(--marge), env(safe-area-inset-left, 0px));
  font-family: var(--police);
  font-weight: 500;
  color: var(--blanc);
  background:
    radial-gradient(120% 55% at 50% -6%, rgba(150, 190, 255, 0.55), transparent 62%),
    radial-gradient(90% 38% at 50% 106%, rgba(53, 230, 255, 0.42), transparent 70%),
    linear-gradient(180deg, #060e4d 0%, #0a24c0 36%, #1238e0 66%, #1f56ff 100%);
}
.contenu {
  position: relative;
  z-index: 1;
  flex: 1;
  display: flex;
  flex-direction: column;
  min-height: 0;
}

.decor {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
  pointer-events: none;
}
.decor__cone {
  position: absolute;
  top: -20px;
  width: 170px;
  height: 500px;
  background: linear-gradient(180deg, rgba(190, 220, 255, 0.5), rgba(120, 170, 255, 0.12) 55%, transparent);
  clip-path: polygon(38% 0, 62% 0, 100% 100%, 0 100%);
  mix-blend-mode: screen;
}
.decor__cone--1 { left: -30px; transform: rotate(9deg); }
.decor__cone--2 { left: 110px; }
.decor__cone--3 { right: -30px; transform: rotate(-9deg); }
.decor__ampoules {
  position: absolute;
  top: 10px;
  left: 0;
  right: 0;
  height: 14px;
  opacity: 0.9;
  background: radial-gradient(circle at 50% 50%, #fff 0 2.5px, rgba(255, 226, 130, 0.95) 3.5px, rgba(255, 200, 60, 0) 8px) 0 0 / 30px 14px repeat-x;
}
.decor__pilier {
  position: absolute;
  top: 36px;
  bottom: 160px;
  width: 8px;
  border-radius: 8px;
  background: linear-gradient(180deg, var(--cyan-neon), #9fd0ff 55%, var(--rose-neon));
  box-shadow: 0 0 8px var(--cyan-neon), 0 0 22px rgba(53, 230, 255, 0.6);
}
.decor__pilier::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--rose-neon);
  box-shadow: 0 0 10px var(--rose-neon);
}
.decor__pilier--g { left: 6px; }
.decor__pilier--g::after { left: 11px; }
.decor__pilier--d { right: 6px; }
.decor__pilier--d::after { right: 11px; }
.decor__sol {
  position: absolute;
  left: -45%;
  right: -45%;
  bottom: -250px;
  height: 460px;
  border-radius: 50%;
  background: radial-gradient(ellipse at 50% 25%, rgba(140, 190, 255, 0.5), rgba(30, 70, 230, 0) 68%);
}
.decor__sol::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(53, 230, 255, 0.6);
  box-shadow: 0 0 18px rgba(53, 230, 255, 0.6), inset 0 0 26px rgba(53, 230, 255, 0.35);
}
.decor__sol::after {
  content: "";
  position: absolute;
  inset: 46px 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 79, 180, 0.55);
  box-shadow: 0 0 16px rgba(255, 79, 180, 0.5);
}

/* ==========================================================================
   4. ÉLÉMENTS COMMUNS
   ========================================================================== */
.barre-haut {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 48px;
}

.carte {
  background: var(--verre);
  border: 3px solid var(--verre-bord);
  border-radius: var(--rayon-l);
  box-shadow: 0 0 22px rgba(53, 230, 255, 0.28), inset 0 2px 0 rgba(255, 255, 255, 0.18);
  -webkit-backdrop-filter: blur(6px); /* ADAPTÉ : Safari avant la version 18 */
  backdrop-filter: blur(6px);
}

.titre {
  margin: 0;
  font-weight: 700;
  font-size: 30px;
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 3px 0 rgba(5, 12, 69, 0.7), 0 0 18px rgba(53, 230, 255, 0.45);
}
.titre--gauche { text-align: left; }
.titre--sous-bandeau { margin-top: 16px; }
.titre--liste { margin: 14px 0 10px; font-size: 24px; }

.texte-doux { color: var(--texte-doux); }

.icone {
  width: 24px;
  height: 24px;
  flex: none;
  fill: none;
  stroke: currentColor;
  stroke-width: 3;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Indicateur de connexion */
.connexion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px 0 14px;
  border-radius: var(--rayon-rond);
  font-size: 16px;
  font-weight: 600;
  background: var(--verre-fort);
  border: 2px solid rgba(255, 255, 255, 0.25);
}
.connexion__point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ok);
  box-shadow: 0 0 0 3px rgba(77, 242, 168, 0.25), 0 0 12px var(--ok);
}
.connexion--hors-ligne .connexion__point {
  background: var(--alerte);
  box-shadow: 0 0 0 3px rgba(255, 176, 46, 0.25), 0 0 12px var(--alerte);
}

/* Puces (salon, compteur) */
.puce {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding: 0 18px;
  border-radius: var(--rayon-rond);
  font-size: 20px;
  font-weight: 600;
  background: var(--verre-fort);
  border: 3px solid var(--verre-bord);
  box-shadow: 0 0 16px rgba(53, 230, 255, 0.3);
}
.puce__code {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: var(--cyan-neon);
  text-shadow: 0 0 10px rgba(53, 230, 255, 0.8);
}
.puce--compteur { border-color: var(--jaune-ampoule); box-shadow: 0 0 16px rgba(255, 216, 74, 0.35); }
.puce--compteur strong { color: var(--jaune-ampoule); }

/* Messages d'état (attente, minimum de joueurs, tout le monde prêt) */
.message {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--rayon-m);
  font-size: 20px;
  font-weight: 600;
  line-height: 1.2;
  background: var(--verre);
  border: 3px solid rgba(255, 255, 255, 0.2);
}
.message--manque { border-color: var(--alerte); }
.message--pret { border-color: var(--cyan-neon); box-shadow: 0 0 20px rgba(53, 230, 255, 0.45); }

/* Petites ampoules qui rebondissent (attente) */
.ampoules { display: inline-flex; gap: 8px; flex: none; }
.ampoule {
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: radial-gradient(circle at 40% 35%, #fff 0 3px, var(--jaune-ampoule) 5px, #ffb21e);
  box-shadow: 0 0 10px rgba(255, 216, 74, 0.9);
  animation: rebond 1.2s ease-in-out infinite;
}
.ampoule:nth-child(2) { animation-delay: 0.15s; }
.ampoule:nth-child(3) { animation-delay: 0.3s; }
@keyframes rebond {
  0%, 60%, 100% { transform: translateY(0); }
  30% { transform: translateY(-8px); }
}

/* ==========================================================================
   5. BOUTONS
   ========================================================================== */
.bouton {
  position: relative;
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 72px;
  padding: 0 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  border-radius: var(--rayon-rond);
  font-family: var(--police);
  font-size: 30px;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bouton::before {
  content: "";
  position: absolute;
  top: 6px;
  left: 9%;
  right: 9%;
  height: 34%;
  border-radius: var(--rayon-rond);
  background: linear-gradient(180deg, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0));
  pointer-events: none;
}
.bouton:focus-visible,
.lien:focus-visible,
.perso:focus-visible {
  outline: 4px solid #fff;
  outline-offset: 4px;
}

/* Bouton bonbon jaune (action principale) */
.bouton--principal {
  color: var(--encre);
  background: linear-gradient(180deg, var(--jaune-bonbon-haut) 0%, var(--jaune-ampoule) 46%, var(--jaune-bonbon-bas) 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -6px 0 rgba(190, 100, 0, 0.3), 0 7px 0 #b86a00, 0 16px 26px rgba(2, 8, 70, 0.6);
}
.bouton--principal:active {
  transform: translateY(5px);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -6px 0 rgba(190, 100, 0, 0.3), 0 2px 0 #b86a00, 0 8px 14px rgba(2, 8, 70, 0.6);
}

/* « Je suis prêt » une fois touché : cyan */
.bouton--pret {
  color: var(--encre);
  background: linear-gradient(180deg, #a6f6ff 0%, var(--cyan-neon) 46%, #10b5da 100%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -6px 0 rgba(0, 80, 110, 0.3), 0 7px 0 #07768f, 0 16px 26px rgba(2, 8, 70, 0.6), 0 0 26px rgba(53, 230, 255, 0.55);
}

/* Inactif (code incomplet, hors ligne) */
.bouton--inactif,
.bouton:disabled {
  cursor: not-allowed;
  color: rgba(8, 19, 79, 0.75);
  background: linear-gradient(180deg, #8f97c9, #6a72aa);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.25), 0 7px 0 #3d4580, 0 16px 26px rgba(2, 8, 70, 0.45);
}
.bouton--inactif::before,
.bouton:disabled::before { opacity: 0.4; }

/* Chargement : le libellé reste, un rond tourne */
.bouton--chargement { cursor: progress; }
.bouton .icone { width: 32px; height: 32px; stroke-width: 4; }
.spinner {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 4px solid rgba(8, 19, 79, 0.28);
  border-top-color: var(--encre);
  animation: tourne 0.9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

/* Secondaire (contour) */
.bouton--secondaire {
  min-height: 56px;
  font-size: 22px;
  color: var(--blanc);
  background: transparent;
  border: 3px solid var(--verre-bord);
  box-shadow: none;
}
.bouton--secondaire::before { display: none; }

/* Lien discret (Quitter le salon, Annuler) */
.lien {
  appearance: none;
  align-self: center;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  background: none;
  font-family: var(--police);
  font-size: 18px;
  font-weight: 500;
  color: var(--texte-doux);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}

/* ==========================================================================
   6. CHAMPS
   ========================================================================== */
.formulaire { display: flex; flex-direction: column; gap: 14px; }
.champ { display: flex; flex-direction: column; gap: 8px; }
.champ__libelle {
  padding-left: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--texte-doux);
}
.champ__saisie {
  width: 100%;
  height: 64px;
  padding: 0 22px;
  border-radius: var(--rayon-l);
  border: 3px solid var(--verre-bord);
  background: var(--verre-fort);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35);
  font-family: var(--police);
  font-size: 26px;
  font-weight: 600;
  color: #fff;
  outline: none;
}
.champ__saisie::placeholder { color: rgba(201, 216, 255, 0.6); }
.champ__saisie:focus-visible,
.champ__saisie--focus {
  border-color: var(--cyan-neon);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(53, 230, 255, 0.35), 0 0 22px rgba(53, 230, 255, 0.6);
}
.champ__saisie--code {
  height: 80px;
  text-align: center;
  text-transform: uppercase;
  font-size: 46px;
  font-weight: 700;
  letter-spacing: 0.3em;
  text-indent: 0.3em;
  color: var(--cyan-neon);
  text-shadow: 0 0 14px rgba(53, 230, 255, 0.8);
}
.champ__message {
  display: none;
  padding-left: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--erreur-clair);
}
.champ--erreur .champ__saisie {
  border-color: #ff6b8c;
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35), 0 0 0 4px rgba(255, 107, 140, 0.3);
}
.champ--erreur .champ__message { display: block; }

/* ==========================================================================
   7. ÉCRAN 1 : ARRIVÉE
   ========================================================================== */
.logo-bloc {
  position: relative;
  display: flex;
  justify-content: center;
  margin: 0 0 18px;
  padding-top: 128px;
}
.mascotte {
  position: absolute;
  top: 0;
  left: 50%;
  width: 152px;
  height: 152px;
  margin-left: -76px;
  object-fit: contain;
  filter: drop-shadow(0 8px 14px rgba(2, 8, 70, 0.5));
  animation: coucou 2.4s ease-in-out infinite;
  transform-origin: 50% 90%;
}
@keyframes coucou {
  0%, 100% { transform: rotate(-4deg); }
  50% { transform: rotate(4deg); }
}
.logo {
  position: relative;
  z-index: 1;
  margin: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 32px 14px;
  border-radius: 34px;
  background: linear-gradient(180deg, #2a5bff, #0b25b8);
  border: 4px solid #fff;
  box-shadow: 0 0 0 5px var(--cyan-neon), 0 0 30px rgba(53, 230, 255, 0.85), inset 0 5px 0 rgba(255, 255, 255, 0.35), 0 14px 22px rgba(2, 8, 70, 0.55);
}
.logo::before {
  content: "";
  position: absolute;
  inset: -22px;
  border-radius: 46px;
  border: 7px dotted #ffe58a;
  filter: drop-shadow(0 0 6px #ffd84a);
  pointer-events: none;
}
.logo__mot {
  display: block;
  margin: 0;
  font-size: 52px;
  font-weight: 700;
  line-height: 0.95;
  letter-spacing: 0.01em;
  color: #fff;
  text-shadow: 0 4px 0 #0a1c9e, 0 0 18px rgba(255, 255, 255, 0.45);
}
.logo__mot--rose {
  color: var(--rose-neon);
  text-shadow: 0 4px 0 #7a0e55, 0 0 18px rgba(255, 79, 180, 0.8);
}
.accroche {
  margin: 8px 0 14px;
  text-align: center;
  font-size: 22px;
  font-weight: 600;
  color: var(--texte-doux);
}
.pied {
  margin-top: auto;
  padding-top: 14px;
  text-align: center;
  font-size: 18px;
  font-weight: 500;
  color: var(--texte-doux);
}

/* ==========================================================================
   8. AVATARS ET PERSONNAGES
   ========================================================================== */
.avatar {
  --taille: 64px;
  position: relative;
  flex: none;
  width: var(--taille);
  height: var(--taille);
  border-radius: 50%;
  overflow: hidden;
  background: radial-gradient(circle at 50% 28%, #78a6ff 0%, #2147d8 72%);
  border: 4px solid var(--anneau);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 0 16px var(--anneau); /* ADAPTÉ : repli pour les navigateurs sans color-mix (iPhone avant iOS 16.2) */
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.3), 0 0 16px color-mix(in srgb, var(--anneau) 70%, transparent);
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar--grand { --taille: var(--grand, 190px); border-width: 7px; } /* ADAPTÉ : taille réglable (écrans bas) */

/* Une couleur par joueur */
.joueur--cyan { --anneau: var(--joueur-cyan); }
.joueur--orange { --anneau: var(--joueur-orange); }
.joueur--rose { --anneau: var(--joueur-rose); }
.joueur--violet { --anneau: var(--joueur-violet); }
.joueur--blanc { --anneau: var(--joueur-blanc); }
.joueur--caramel { --anneau: var(--joueur-caramel); }
.joueur--argent { --anneau: var(--joueur-argent); }
.joueur--sable { --anneau: var(--joueur-sable); }

.pastille {
  display: grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--anneau);
  border: 3px solid #fff;
  font-size: 16px;
  font-weight: 700;
  color: var(--encre);
}

/* ==========================================================================
   9. ÉCRAN 2 : CHOIX DU PERSONNAGE
   ========================================================================== */
.bandeau-salon {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 12px 20px 14px;
  text-align: center;
}
.bandeau-salon__salon { margin: 0; font-size: 22px; font-weight: 700; }
.bandeau-salon__nom { margin: 0; font-size: 18px; font-weight: 500; color: var(--texte-doux); }
.bandeau-salon__nom strong { color: var(--jaune-ampoule); font-weight: 700; }

.vedette {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding-top: 14px;
}
.vedette__socle {
  position: absolute;
  top: calc(var(--grand, 190px) - 14px);
  left: 50%;
  width: 250px;
  height: 56px;
  margin-left: -125px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(53, 230, 255, 0.55), rgba(53, 230, 255, 0) 70%);
  border: 3px solid rgba(53, 230, 255, 0.8);
  box-shadow: 0 0 20px rgba(53, 230, 255, 0.7);
}
.vedette .avatar { z-index: 1; }
.vedette__bulle {
  position: absolute;
  top: 16px;
  right: 18px;
  z-index: 2;
  padding: 6px 16px;
  border-radius: var(--rayon-rond);
  font-size: 20px;
  font-weight: 700;
  color: var(--encre);
  background: #fff;
  box-shadow: 0 6px 14px rgba(2, 8, 70, 0.5);
  transform: rotate(8deg);
}
.vedette__nom {
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 20px 0 0;
  font-size: 32px;
  font-weight: 700;
  line-height: 1;
}
.vedette__couleur {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: var(--texte-doux);
}
.vedette__couleur::before {
  content: "";
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--anneau);
  box-shadow: 0 0 10px var(--anneau);
}
.vedette--coucou .avatar { animation: coucou 2.4s ease-in-out infinite; transform-origin: 50% 90%; }

.carrousel {
  display: flex;
  gap: 12px;
  margin: 0 calc(var(--marge) * -1);
  padding: 14px var(--marge) 10px;
  overflow-x: auto;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--marge);
  scrollbar-width: none;
}
.carrousel::-webkit-scrollbar { display: none; }
.perso {
  position: relative;
  flex: none;
  width: 104px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px 8px 14px;
  border-radius: 28px;
  border: 3px solid rgba(255, 255, 255, 0.2);
  background: var(--verre);
  color: var(--blanc);
  font-family: var(--police);
  cursor: pointer;
  scroll-snap-align: start;
}
.perso .avatar { --taille: 76px; }
.perso__nom { font-size: 20px; font-weight: 600; line-height: 1; }
.perso__couleur {
  width: 38px;
  height: 8px;
  border-radius: var(--rayon-rond);
  background: var(--anneau);
  box-shadow: 0 0 8px var(--anneau);
}
.perso--choisi {
  border-color: var(--jaune-ampoule);
  background: linear-gradient(180deg, rgba(255, 216, 74, 0.28), var(--verre));
  box-shadow: 0 0 22px rgba(255, 216, 74, 0.6);
  transform: translateY(-4px);
}
.perso--pris { cursor: not-allowed; }
.perso--pris .avatar img { filter: grayscale(1) brightness(0.75); }
.perso--pris .avatar { box-shadow: none; border-color: rgba(255, 255, 255, 0.3); }
.perso--pris .perso__nom { color: rgba(247, 250, 255, 0.6); }
.perso--pris .perso__couleur { opacity: 0.35; box-shadow: none; }
.perso__pris-par { position: absolute; top: -8px; right: -6px; }

.points-page { display: flex; justify-content: center; gap: 10px; padding: 2px 0 14px; }
.point-page { width: 10px; height: 10px; border-radius: 50%; background: rgba(255, 255, 255, 0.4); }
.point-page--actif { width: 26px; border-radius: var(--rayon-rond); background: var(--jaune-ampoule); }

/* ==========================================================================
   10. ÉCRAN 3 : SALON D'ATTENTE
   ========================================================================== */
.salon-entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}
.liste-joueurs {
  display: flex;
  flex-direction: column;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.joueur-ligne {
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 66px;
  padding: 5px 14px 5px 7px;
  border-radius: 40px;
  background: var(--verre);
  border: 3px solid rgba(255, 255, 255, 0.18);
}
.joueur-ligne .avatar { --taille: 54px; border-width: 3px; }
.joueur-ligne__nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 24px;
  font-weight: 600;
}
.joueur-ligne__toi {
  margin-left: 6px;
  padding: 2px 10px;
  border-radius: var(--rayon-rond);
  font-size: 16px;
  font-weight: 700;
  color: var(--encre);
  background: var(--jaune-ampoule);
  vertical-align: 3px;
}
.etat {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 34px;
  padding: 0 12px;
  border-radius: var(--rayon-rond);
  font-size: 16px;
  font-weight: 700;
}
.etat .icone { width: 18px; height: 18px; stroke-width: 4; }
.etat--pret { color: var(--encre); background: var(--cyan-neon); }
.etat--attente { color: var(--texte-doux); border: 2px solid rgba(201, 216, 255, 0.6); }
.etat--deconnecte { color: var(--encre); background: var(--alerte); }
.joueur-ligne--moi {
  border-color: var(--jaune-ampoule);
  background: linear-gradient(90deg, rgba(255, 216, 74, 0.22), var(--verre));
  box-shadow: 0 0 18px rgba(255, 216, 74, 0.35);
}
.joueur-ligne--deconnecte { opacity: 0.65; }
.joueur-ligne--deconnecte .avatar img { filter: grayscale(0.8); }

.actions-bas {
  margin-top: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.zone-attente {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 14px;
}
.compteur-prets { margin: 0; text-align: center; font-size: 18px; font-weight: 600; color: var(--texte-doux); }

/* ==========================================================================
   11. ÉCRAN 4 : CONNEXION PERDUE
   ========================================================================== */
.bandeau {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 60px;
  padding: 10px 18px;
  border-radius: var(--rayon-m);
  font-size: 19px;
  font-weight: 700;
  line-height: 1.15;
  text-align: center;
}
.bandeau--alerte {
  color: var(--encre);
  background: linear-gradient(180deg, #ffd36a, var(--alerte));
  box-shadow: 0 8px 22px rgba(2, 8, 70, 0.5), inset 0 3px 0 rgba(255, 255, 255, 0.55);
}
.bandeau--alerte .spinner { width: 24px; height: 24px; border-width: 4px; }
/* ADAPTÉ : le bandeau est en haut de l'écran, au-dessus de la vue en cours */
.zone-bandeaux { position: relative; z-index: 3; }
.zone-bandeaux .bandeau { margin-bottom: 16px; }
.ecran--hors-ligne .liste-joueurs,
.ecran--hors-ligne .zone-attente { opacity: 0.45; filter: saturate(0.5); pointer-events: none; }

/* ==========================================================================
   12. TOASTS
   ========================================================================== */
.toast {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 12px 18px 12px 12px;
  border-radius: var(--rayon-m);
  font-size: 19px;
  font-weight: 600;
  line-height: 1.2;
  color: #fff;
  border: 3px solid rgba(255, 255, 255, 0.55);
  box-shadow: 0 10px 28px rgba(2, 8, 70, 0.55), inset 0 3px 0 rgba(255, 255, 255, 0.3);
}
.toast__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #fff;
}
.toast__icone .icone { width: 24px; height: 24px; }
.toast--erreur { background: linear-gradient(180deg, #e83a65, #b8123f); }
.toast--erreur .toast__icone { color: #b8123f; }
.toast--info { background: linear-gradient(180deg, #3a72ff, #1a36c4); }
.toast--info .toast__icone { color: #1a36c4; }
.toast--ok { color: var(--encre); background: linear-gradient(180deg, #8ff3ff, var(--cyan-neon)); border-color: #fff; }
.toast--ok .toast__icone { color: #0a7f9b; }

/* Salon fermé (plein écran, présenté en carte) */
.carte-fin {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 14px;
  padding: 22px 20px 24px;
  text-align: center;
}
.carte-fin__titre { margin: 0; font-size: 28px; font-weight: 700; }
.carte-fin__texte { margin: 0; font-size: 18px; color: var(--texte-doux); }

/* ==========================================================================
   13. ÉCRAN 5 : ORIENTATION
   ADAPTÉ : dans le design, cet écran est une maquette de 844 x 390. Dans la vraie page c'est un
   recouvrement plein écran, visible seulement sur un téléphone tenu à l'horizontale
   (orientation paysage, petite hauteur, écran tactile, format bien allongé : un clavier qui
   rétrécit la page en portrait ne le déclenche pas).
   ========================================================================== */
.ecran--paysage {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 100;
  width: auto;
  max-width: none;
  min-height: 0;
  margin: 0;
  padding: 24px 56px;
  flex-direction: row;
  align-items: center;
  justify-content: center;
  gap: 48px;
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (min-aspect-ratio: 3/2) {
  .ecran--paysage { display: flex; }
}
.ecran--paysage .contenu { flex: none; flex-direction: row; align-items: center; justify-content: center; gap: 48px; }
.ecran--paysage .decor__pilier { top: 18px; bottom: 18px; }
.ecran--paysage .decor__sol { bottom: -330px; }
.redresse { flex: none; width: 190px; height: 190px; }
.redresse__tel { transform-origin: 95px 95px; animation: redresse 2.8s ease-in-out infinite; }
@keyframes redresse {
  0%, 20% { transform: rotate(-90deg); }
  60%, 100% { transform: rotate(0deg); }
}
.consigne { max-width: 400px; display: flex; flex-direction: column; gap: 12px; }
.consigne__titre { margin: 0; font-size: 38px; font-weight: 700; line-height: 1.05; text-shadow: 0 4px 0 rgba(5, 12, 69, 0.7), 0 0 20px rgba(53, 230, 255, 0.5); }
.consigne__texte { margin: 0; font-size: 20px; font-weight: 500; color: var(--texte-doux); }

/* (La section 14 du design, la planche de composants, est de la documentation : retirée de la vraie page.) */

/* ==========================================================================
   15. ACCESSIBILITÉ
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation: none !important;
    transition: none !important;
  }
}

/* ==========================================================================
   16. NOTIFICATIONS ET ÉCRANS COMMUNS (ADAPTÉ : le design montre les toasts en planche,
   dans la vraie page ils flottent en haut de l'écran et disparaissent seuls)
   ========================================================================== */
.toasts {
  position: fixed;
  z-index: 90;
  top: calc(env(safe-area-inset-top, 0px) + 12px);
  left: 0;
  right: 0;
  max-width: 520px;
  margin: 0 auto;
  padding: 0 var(--marge);
  display: flex;
  flex-direction: column;
  gap: 10px;
  pointer-events: none;
  font-family: var(--police);
}
.toasts .toast { pointer-events: auto; animation: toast-entree 0.25s ease-out both; }
.toasts .toast--sortie { animation: toast-sortie 0.25s ease-in both; }
@keyframes toast-entree {
  from { opacity: 0; transform: translateY(-16px); }
  to { opacity: 1; transform: none; }
}
@keyframes toast-sortie {
  to { opacity: 0; transform: translateY(-16px); }
}
.ecran--fermee .contenu { justify-content: center; }
.noscript { position: relative; z-index: 5; margin: 0; padding: 20px; font-family: var(--police); font-size: 20px; color: #fff; background: var(--erreur); }

/* ADAPTÉ : sur un écran bas (navigateur de téléphone avec ses barres), on resserre l'arrivée et le choix du personnage
   pour que le bouton principal reste visible sans défiler. */
@media (max-height: 740px) {
  .mascotte { width: 112px; height: 112px; margin-left: -56px; }
  .logo-bloc { padding-top: 92px; margin-bottom: 14px; }
  .logo__mot { font-size: 44px; }
  .accroche { margin: 4px 0 8px; font-size: 20px; }
  .formulaire { gap: 10px; }
  .champ { gap: 6px; }
  .champ__saisie { height: 56px; font-size: 24px; }
  .champ__saisie--code { height: 68px; font-size: 40px; }
  .bouton { min-height: 64px; font-size: 28px; }
  .vedette { --grand: 132px; }
  .vedette__socle { width: 200px; margin-left: -100px; }
  .vedette__nom { margin-top: 14px; font-size: 28px; }
  .titre { font-size: 26px; }
  .perso .avatar { --taille: 64px; }
  .perso { width: 96px; padding: 10px 6px 12px; }
  .joueur-ligne { min-height: 60px; }
}

/* ==========================================================================
   17. LA MANCHE : PROVISOIRE
   Le design du lot 2 (question, réponse, révélation, classement, fin) n'existe pas encore.
   Ces écrans réutilisent le langage du lot 1 (mêmes variables, cartes, boutons « bonbon »,
   puces, lignes de joueur) et seront remplacés par le vrai design.
   ========================================================================== */

/* Barre « c'est moi » : avatar, prénom, score, rang */
.moi {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 52px;
  padding: 4px 12px 4px 6px;
  border-radius: 40px;
  background: var(--verre);
  border: 3px solid rgba(255, 255, 255, 0.18);
}
.moi .avatar { --taille: 40px; border-width: 3px; }
.moi__nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: 20px;
  font-weight: 600;
}
.moi__score { flex: none; font-size: 17px; font-weight: 600; color: var(--texte-doux); white-space: nowrap; }
.moi__score strong { font-size: 22px; font-weight: 700; color: var(--jaune-ampoule); }
.moi__rang {
  flex: none;
  display: inline-flex;
  align-items: center;
  min-height: 32px;
  padding: 0 12px;
  border-radius: var(--rayon-rond);
  font-size: 18px;
  font-weight: 700;
  color: var(--encre);
  background: var(--cyan-neon);
}

/* Numéro de question, barre d'avancement et minuteur rond */
.question-entete { display: flex; align-items: center; gap: 14px; margin-top: 10px; }
.progression { flex: 1; min-width: 0; }
.progression__texte { margin: 0; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; font-size: 18px; font-weight: 700; }
.progression__theme {
  padding: 1px 10px;
  border-radius: var(--rayon-rond);
  font-size: 15px;
  font-weight: 600;
  color: var(--texte-doux);
  border: 2px solid rgba(201, 216, 255, 0.5);
}
.progression__barre { height: 10px; margin-top: 6px; overflow: hidden; border-radius: var(--rayon-rond); background: rgba(255, 255, 255, 0.22); }
.progression__rempli {
  display: block;
  height: 100%;
  width: var(--avancement, 0%);
  border-radius: inherit;
  background: linear-gradient(90deg, var(--cyan-neon), var(--rose-neon));
}
.chrono { position: relative; flex: none; width: 68px; height: 68px; }
.chrono svg { display: block; width: 100%; height: 100%; transform: rotate(-90deg); }
.chrono__fond { fill: var(--verre-fort); stroke: rgba(255, 255, 255, 0.2); stroke-width: 9; }
.chrono__reste {
  fill: none;
  stroke: var(--cyan-neon);
  stroke-width: 9;
  stroke-linecap: round;
  stroke-dasharray: 263.9;
  filter: drop-shadow(0 0 5px var(--cyan-neon));
}
.chrono__nombre { position: absolute; inset: 0; display: grid; place-items: center; font-size: 28px; font-weight: 700; }
.chrono--vite .chrono__reste { stroke: var(--jaune-ampoule); filter: drop-shadow(0 0 5px var(--jaune-ampoule)); }
.chrono--urgent .chrono__reste { stroke: var(--rose-neon); filter: drop-shadow(0 0 6px var(--rose-neon)); }
.chrono--urgent .chrono__nombre { color: #ff8fc9; animation: pouls 0.6s ease-in-out infinite alternate; }
@keyframes pouls {
  from { transform: scale(1); }
  to { transform: scale(1.18); }
}

/* Énoncé */
.question { margin-top: 10px; padding: 12px 16px; text-align: center; }
.question__texte {
  margin: 0;
  font-size: 23px;
  font-weight: 700;
  line-height: 1.15;
  overflow-wrap: anywhere;
  text-shadow: 0 3px 0 rgba(5, 12, 69, 0.7), 0 0 14px rgba(53, 230, 255, 0.35);
}
.question--moyenne .question__texte { font-size: 20px; }
.question--longue .question__texte { font-size: 18px; }

/* Les quatre réponses : une couleur ET une forme chacune (daltonisme), le texte complet */
.reponses { display: flex; flex-direction: column; gap: 10px; margin: 12px 0 0; padding: 0; list-style: none; }
.reponse {
  --rep: var(--reponse-rouge);
  --rep-haut: #ff8a96;
  --rep-ombre: #a31224;
  position: relative;
  appearance: none;
  border: 0;
  width: 100%;
  min-height: 62px;
  padding: 7px 16px 7px 9px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-radius: 26px;
  font-family: var(--police);
  font-size: 21px;
  font-weight: 700;
  line-height: 1.15;
  text-align: left;
  color: #fff;
  text-shadow: 0 2px 0 rgba(0, 0, 0, 0.28);
  cursor: pointer;
  background: linear-gradient(180deg, var(--rep-haut) 0%, var(--rep) 55%);
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 6px 0 var(--rep-ombre), 0 12px 20px rgba(2, 8, 70, 0.5);
  transition: transform 0.12s ease, opacity 0.2s ease, box-shadow 0.12s ease;
}
.reponse--rouge { --rep: var(--reponse-rouge); --rep-haut: #ff8a96; --rep-ombre: #a31224; }
.reponse--bleu { --rep: var(--reponse-bleu); --rep-haut: #7fb0ff; --rep-ombre: #1a47b3; }
.reponse--jaune { --rep: var(--reponse-jaune); --rep-haut: #ffe98a; --rep-ombre: #a77c00; color: var(--encre); text-shadow: none; }
.reponse--vert { --rep: var(--reponse-vert); --rep-haut: #7ee8a5; --rep-ombre: #0d6f32; color: var(--encre); text-shadow: none; }
.reponse:focus-visible { outline: 4px solid #fff; outline-offset: 4px; }
.reponse:active:not(:disabled) { transform: translateY(5px); box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 1px 0 var(--rep-ombre), 0 6px 12px rgba(2, 8, 70, 0.5); }
.reponse__forme {
  flex: none;
  display: grid;
  place-items: center;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: #fff;
  color: var(--rep-ombre);
  box-shadow: 0 3px 0 rgba(0, 0, 0, 0.2);
}
.reponse__forme svg { width: 28px; height: 28px; fill: currentColor; }
.reponse__texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.reponse__marque {
  flex: none;
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #fff;
  color: #0a9b63;
}
.reponse__marque .icone { width: 22px; height: 22px; stroke-width: 4; }
/* Réponse choisie : plus grosse, lumineuse, entourée de blanc. Les autres s'éteignent. */
.reponse--choisie {
  transform: scale(1.03);
  outline: 4px solid #fff;
  outline-offset: 2px;
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 6px 0 var(--rep-ombre), 0 0 30px var(--rep), 0 12px 20px rgba(2, 8, 70, 0.5);
}
.reponse--attenue { opacity: 0.4; filter: saturate(0.6); }
.reponse:disabled { cursor: default; }
.reponse--choisie:disabled { opacity: 1; filter: none; }

/* État sous les réponses : « enregistrée », « verrouillée », qui a répondu */
.statut { display: flex; flex-direction: column; align-items: center; gap: 8px; margin-top: 14px; }
.statut__message { margin: 0; display: flex; align-items: center; justify-content: center; gap: 10px; font-size: 21px; font-weight: 700; text-align: center; }
.statut__message:empty { display: none; }
.statut__message .icone { width: 26px; height: 26px; stroke-width: 3.5; }
.statut__message--verrou { color: var(--cyan-neon); text-shadow: 0 0 12px rgba(53, 230, 255, 0.6); }
.statut__aide { margin: 0; font-size: 17px; font-weight: 500; color: var(--texte-doux); text-align: center; }
.statut__aide:empty { display: none; }
.statut__fenetre { width: 70%; height: 8px; overflow: hidden; border-radius: var(--rayon-rond); background: rgba(255, 255, 255, 0.2); }
.statut__fenetre i { display: block; height: 100%; width: var(--reste, 0%); border-radius: inherit; background: var(--jaune-ampoule); }
.repondu { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 0; padding: 2px 6px; list-style: none; }
.pion { position: relative; display: flex; }
.pion .avatar { --taille: 36px; border-width: 3px; }
.pion--attend .avatar { opacity: 0.5; }
.pion--attend .avatar img { filter: grayscale(0.7); }
.pion--deconnecte { opacity: 0.4; }
.pion__coche {
  position: absolute;
  right: -6px;
  bottom: -4px;
  display: grid;
  place-items: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--ok);
  border: 2px solid #fff;
  color: var(--encre);
}
.pion__coche .icone { width: 12px; height: 12px; stroke-width: 5; }
.repondu__compte { margin: 0; font-size: 17px; font-weight: 600; color: var(--texte-doux); text-align: center; }

/* Écrans hauts (844 px et plus) : on remet de l'air autour des réponses */
@media (min-height: 800px) {
  .moi { min-height: 58px; }
  .moi .avatar { --taille: 44px; }
  .question-entete { margin-top: 12px; }
  .chrono { width: 80px; height: 80px; }
  .chrono__nombre { font-size: 32px; }
  .question { margin-top: 12px; padding: 14px 18px; }
  .question__texte { font-size: 26px; }
  .question--moyenne .question__texte { font-size: 22px; }
  .question--longue .question__texte { font-size: 19px; }
  .reponse { min-height: 72px; font-size: 22px; padding: 8px 18px 8px 11px; }
  .reponse__forme { width: 48px; height: 48px; }
  .reponses { gap: 12px; }
}

/* Compte à rebours de début */
.decompte {
  display: grid;
  place-items: center;
  width: 200px;
  height: 200px;
  margin: 30px auto 0;
  border-radius: 50%;
  font-size: 110px;
  font-weight: 700;
  line-height: 1;
  background: radial-gradient(circle at 40% 30%, #3a72ff, #0b25b8);
  border: 6px solid #fff;
  box-shadow: 0 0 0 6px var(--cyan-neon), 0 0 40px rgba(53, 230, 255, 0.8), inset 0 5px 0 rgba(255, 255, 255, 0.35), 0 14px 22px rgba(2, 8, 70, 0.55);
  text-shadow: 0 6px 0 #0a1c9e, 0 0 20px rgba(255, 255, 255, 0.4);
}
.decompte--bat { animation: bat 0.5s ease-out; }
@keyframes bat {
  from { transform: scale(0.88); }
  to { transform: scale(1); }
}
.regle { margin-top: 28px; text-align: center; justify-content: center; }

/* Révélation */
.resultat {
  margin-top: 14px;
  padding: 18px 16px 20px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  text-align: center;
}
.resultat--juste { border-color: var(--ok); box-shadow: 0 0 26px rgba(77, 242, 168, 0.5), inset 0 2px 0 rgba(255, 255, 255, 0.18); }
.resultat--faux { border-color: #ff6b8c; box-shadow: 0 0 22px rgba(255, 107, 140, 0.4), inset 0 2px 0 rgba(255, 255, 255, 0.18); }
.resultat--rien { border-color: var(--alerte); box-shadow: 0 0 22px rgba(255, 176, 46, 0.35), inset 0 2px 0 rgba(255, 255, 255, 0.18); }
.resultat__verdict { margin: 0; display: flex; align-items: center; gap: 12px; font-size: 30px; font-weight: 700; line-height: 1.1; }
.resultat__rond { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 50%; background: #fff; }
.resultat__rond .icone { width: 28px; height: 28px; stroke-width: 4; }
.resultat--juste .resultat__rond { color: #0a9b63; }
.resultat--faux .resultat__rond { color: #c01844; }
.resultat--rien .resultat__rond { color: #b8700a; }
.resultat__points {
  margin: 4px 0 0;
  font-size: 72px;
  font-weight: 700;
  line-height: 1;
  color: var(--jaune-ampoule);
  text-shadow: 0 4px 0 #b86a00, 0 0 22px rgba(255, 216, 74, 0.6);
}
.resultat--faux .resultat__points,
.resultat--rien .resultat__points { color: var(--texte-doux); text-shadow: 0 3px 0 rgba(5, 12, 69, 0.7); }
.resultat__detail { margin: 0; font-size: 19px; font-weight: 600; color: var(--texte-doux); }
.resultat__phrase { margin: 4px 0 0; font-size: 19px; font-weight: 500; }
.bonne-reponse { margin-top: 14px; }
.bonne-reponse__etiquette { margin: 0 0 8px 8px; display: flex; align-items: center; gap: 8px; font-size: 18px; font-weight: 700; color: var(--ok); }
.bonne-reponse__etiquette .icone { width: 22px; height: 22px; stroke-width: 4; }
.bonne-reponse__etiquette--faux { margin-top: 14px; color: #ff9db3; }
[tabindex="-1"]:focus { outline: none; }
.reponse--statique { cursor: default; min-height: 66px; }
.reponse--juste { outline: 4px solid var(--ok); outline-offset: 2px; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -5px 0 rgba(0, 0, 0, 0.16), 0 6px 0 var(--rep-ombre), 0 0 30px var(--ok), 0 12px 20px rgba(2, 8, 70, 0.5); }
.reponse--fausse { opacity: 0.85; margin-top: 12px; }
.reponse--fausse .reponse__texte { text-decoration: line-through; text-decoration-thickness: 3px; }
.reponse--fausse .reponse__marque { color: #c01844; }
.mon-rang { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin-top: 14px; }
.mon-rang .puce { min-height: 44px; font-size: 19px; gap: 8px; }
.mon-rang .puce strong { color: var(--jaune-ampoule); font-weight: 700; }
.fleche { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; }
.fleche .icone { width: 22px; height: 22px; stroke-width: 4; }
.fleche--monte { color: var(--ok); }
.fleche--descend { color: #ff9db3; }
.fleche--stable { color: var(--texte-doux); }
.attente-suite { margin-top: auto; padding-top: 16px; }

/* Classement (intermédiaire et final) */
.titre-classement { margin: 14px 0 4px; text-align: left; font-size: 28px; }
.sous-titre { margin: 0 0 10px; font-size: 18px; font-weight: 500; color: var(--texte-doux); }
.liste-joueurs--classement { gap: 8px; }
.liste-joueurs--classement .joueur-ligne { min-height: 58px; gap: 10px; padding: 4px 12px 4px 8px; }
.liste-joueurs--classement .joueur-ligne .avatar { --taille: 46px; }
.liste-joueurs--classement .joueur-ligne__nom { display: flex; align-items: center; font-size: 22px; }
.joueur-ligne__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.rang-rond {
  flex: none;
  display: grid;
  place-items: center;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  font-size: 19px;
  font-weight: 700;
  background: rgba(255, 255, 255, 0.16);
}
.rang-rond--1 { color: var(--encre); background: linear-gradient(180deg, #ffe777, #ffb21e); }
.rang-rond--2 { color: var(--encre); background: linear-gradient(180deg, #f2f6ff, #9aa7c9); }
.rang-rond--3 { color: var(--encre); background: linear-gradient(180deg, #f0b27a, #b9692b); }
.joueur-ligne__score { flex: none; font-size: 22px; font-weight: 700; color: var(--jaune-ampoule); }
.joueur-ligne .fleche { flex: none; min-width: 26px; justify-content: center; }
.ecart { margin: 12px 0 0; text-align: center; font-size: 19px; font-weight: 600; color: var(--texte-doux); }

/* Fin de partie */
.fin-scene { position: relative; display: flex; flex-direction: column; align-items: center; padding-top: 6px; }
.fin-medaille {
  position: relative;
  z-index: 1;
  display: grid;
  place-items: center;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  font-size: 64px;
  font-weight: 700;
  line-height: 1;
  color: var(--encre);
  background: radial-gradient(circle at 40% 30%, #ffffff, #8fb0ff 72%);
  border: 6px solid #fff;
  box-shadow: 0 0 0 6px rgba(53, 230, 255, 0.55), 0 0 34px rgba(53, 230, 255, 0.7), 0 12px 20px rgba(2, 8, 70, 0.5);
}
.fin-medaille__texte { display: inline-flex; align-items: baseline; }
.fin-medaille small { font-size: 26px; font-weight: 700; }
.fin-medaille--1 { background: radial-gradient(circle at 40% 30%, #fff6c4, #ffd84a 55%, #e79a0c); box-shadow: 0 0 0 6px #ffe58a, 0 0 40px rgba(255, 216, 74, 0.8), 0 12px 20px rgba(2, 8, 70, 0.5); }
.fin-medaille--2 { background: radial-gradient(circle at 40% 30%, #ffffff, #c3cde6 60%, #8d9ac0); box-shadow: 0 0 0 6px #e6ecff, 0 0 34px rgba(220, 230, 255, 0.7), 0 12px 20px rgba(2, 8, 70, 0.5); }
.fin-medaille--3 { background: radial-gradient(circle at 40% 30%, #ffe0c0, #e0975a 60%, #a8591f); box-shadow: 0 0 0 6px #f1b98c, 0 0 34px rgba(240, 170, 110, 0.7), 0 12px 20px rgba(2, 8, 70, 0.5); }
.fin-socle {
  position: absolute;
  top: 148px;
  left: 50%;
  width: 230px;
  height: 50px;
  margin-left: -115px;
  border-radius: 50%;
  background: radial-gradient(ellipse, rgba(53, 230, 255, 0.55), rgba(53, 230, 255, 0) 70%);
  border: 3px solid rgba(53, 230, 255, 0.8);
  box-shadow: 0 0 20px rgba(53, 230, 255, 0.7);
}
.fin-nom { z-index: 1; margin: 18px 0 0; display: flex; align-items: center; gap: 10px; font-size: 30px; font-weight: 700; line-height: 1; }
.fin-nom .avatar { --taille: 46px; border-width: 3px; }
.fin-score { margin: 6px 0 0; font-size: 20px; font-weight: 600; color: var(--texte-doux); text-align: center; }
.fin-score strong { font-size: 34px; font-weight: 700; color: var(--jaune-ampoule); text-shadow: 0 3px 0 #b86a00; }
.stats { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; margin: 16px 0 0; padding: 0; list-style: none; }
.stat { padding: 10px 6px 12px; text-align: center; border-radius: 22px; background: var(--verre); border: 3px solid rgba(255, 255, 255, 0.2); }
.stat__valeur { display: block; font-size: 26px; font-weight: 700; line-height: 1.1; color: var(--jaune-ampoule); }
.stat__nom { display: block; margin-top: 4px; font-size: 15px; font-weight: 600; line-height: 1.1; color: var(--texte-doux); }
.badge-titre {
  margin-top: 14px;
  padding: 12px 18px 14px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border-radius: 26px;
  color: var(--encre);
  background: linear-gradient(180deg, var(--jaune-bonbon-haut), var(--jaune-ampoule) 46%, var(--jaune-bonbon-bas));
  box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.6), inset 0 -5px 0 rgba(190, 100, 0, 0.3), 0 5px 0 #b86a00, 0 12px 20px rgba(2, 8, 70, 0.5);
}
.badge-titre__nom { font-size: 26px; font-weight: 700; line-height: 1.1; }
.badge-titre__texte { font-size: 17px; font-weight: 600; }
.confettis { position: absolute; inset: 0; overflow: hidden; pointer-events: none; z-index: 0; }
.confettis i {
  position: absolute;
  top: -20px;
  width: 10px;
  height: 18px;
  border-radius: 3px;
  opacity: 0;
  animation: confetti 3.2s linear infinite;
}
.confettis i:nth-child(1) { left: 6%; background: var(--rose-neon); animation-delay: 0s; }
.confettis i:nth-child(2) { left: 14%; background: var(--jaune-ampoule); animation-delay: 0.6s; }
.confettis i:nth-child(3) { left: 23%; background: var(--cyan-neon); animation-delay: 1.4s; }
.confettis i:nth-child(4) { left: 31%; background: #fff; animation-delay: 0.2s; }
.confettis i:nth-child(5) { left: 40%; background: var(--rose-neon); animation-delay: 2s; }
.confettis i:nth-child(6) { left: 49%; background: var(--jaune-ampoule); animation-delay: 1s; }
.confettis i:nth-child(7) { left: 58%; background: var(--cyan-neon); animation-delay: 2.4s; }
.confettis i:nth-child(8) { left: 66%; background: #fff; animation-delay: 0.8s; }
.confettis i:nth-child(9) { left: 74%; background: var(--rose-neon); animation-delay: 1.8s; }
.confettis i:nth-child(10) { left: 82%; background: var(--jaune-ampoule); animation-delay: 0.4s; }
.confettis i:nth-child(11) { left: 90%; background: var(--cyan-neon); animation-delay: 2.8s; }
.confettis i:nth-child(12) { left: 96%; background: #fff; animation-delay: 1.2s; }
@keyframes confetti {
  0% { opacity: 0; transform: translateY(0) rotate(0deg); }
  10% { opacity: 1; }
  100% { opacity: 0.9; transform: translateY(360px) rotate(540deg); }
}

/* Hors ligne : on ne peut plus toucher aux réponses ni aux listes */
.ecran--hors-ligne .reponses,
.ecran--hors-ligne .repondu,
.ecran--hors-ligne .liste-joueurs--classement { opacity: 0.45; filter: saturate(0.5); pointer-events: none; }