/* ==========================================================================
   MANETTE TÉLÉPHONE : feuille de style de la vraie page (lots 1 et 2 de Claude Design, version 2).
   Reprise de art/reference/telephone/lot2-claude-design/style.css : mêmes classes, mêmes jetons,
   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 (.reponse--choisi, .perso--pris ...).
   La partie « JETONS » est la seule à modifier pour changer couleurs, tailles de texte ou anneaux.

   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 à part (fonts/fredoka.css),
   logo Zigotos en image (le design a un logo provisoire en texte), écran du paysage en recouvrement,
   toasts flottants, bandeau de connexion, resserrements pour les écrans bas, planches de
   documentation retirées. Les plots du sol n'existent plus (le design en parle encore dans ses règles).
   ========================================================================== */

/* ==========================================================================
   1. JETONS
   Quatre familles de couleurs, chacune avec UN seul rôle :
     plateau   : fond et décor, jamais sur un composant
     interface : actions, sélection, focus, états, textes (blanc et encre)
     réponses  : les 4 boutons de réponse, rien d'autre
     joueurs   : identifier un joueur (anneau de l'avatar, pastille), rien d'autre
   ========================================================================== */
:root {
  /* --- Plateau : fond et décor --- */
  --plateau-nuit: #040a3a;
  --plateau-profond: #0a1c9e;
  --plateau-scene: #0e2bc4;
  --plateau-clair: #1538d8;
  --decor-cyan: #4cdcff;
  --decor-rose: #ff4fb4;
  --decor-ampoule: #fff0bf;

  /* --- Interface : blanc et encre, aucune teinte --- */
  --ui: #ffffff;
  --ui-bas: #cfd9f6;
  --ui-ombre: #8e9bcb;
  --ui-encre: #0a1560;
  --ui-texte: #f7faff;
  --ui-doux: #c6d2ff;
  --ui-verre: rgba(6, 16, 96, 0.68);
  --ui-verre-fort: rgba(3, 10, 70, 0.82);
  --ui-bord: rgba(255, 255, 255, 0.3);
  --ui-bord-faible: rgba(255, 255, 255, 0.18);
  --ui-inactif-haut: #98a0cf;
  --ui-inactif-bas: #6f78b0;

  /* --- Réponses : uniquement les boutons de réponse --- */
  --reponse-rouge: #ff3b4e;
  --reponse-bleu: #2f7bff;
  --reponse-jaune: #ffd21f;
  --reponse-vert: #22c55e;

  /* --- Joueurs : uniquement l'identité d'un joueur ---
     Réservés pour plus tard : --joueur-5 à --joueur-8 (à choisir hors des
     teintes des réponses et des 4 joueurs actuels). */
  --joueur-cyan: #35e6ff;
  --joueur-orange: #ff9a3c;
  --joueur-rose: #ff5fa7;
  --joueur-violet: #a98bff;

  /* Couleur du joueur courant : surchargée par .joueur--cyan, etc. */
  --anneau: var(--joueur-cyan);
  /* Couleur de la réponse courante : surchargée par .reponse--rouge, etc.
     ADAPTÉ : les trois nuances (haut, bas, ombre) sont écrites en dur au lieu de color-mix(), que les iPhone
     d'avant iOS 16.2 ignorent (les boutons seraient restés sans fond). Mêmes valeurs que le design. */
  --c: var(--reponse-rouge);
  --c-haut: #ff7280;
  --c-bas: #db3343;
  --c-ombre: #851f29;

  /* Le nom du jeu et son logo ne sont plus dans les jetons : voir nom-du-jeu.js (un seul endroit). */

  /* --- Typographie : une seule famille, 8 tailles --- */
  --police: "Fredoka", "Arial Rounded MT Bold", system-ui, sans-serif;
  --police-code: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
  --t-min: 16px;     /* plus petit texte autorisé */
  --t-s: 18px;       /* libellés, aides */
  --t-m: 20px;       /* texte courant */
  --t-l: 24px;       /* noms, sous-titres */
  --t-xl: 30px;      /* titres d'écran, boutons */
  --t-2xl: 38px;     /* verdicts */
  --t-hero: 52px;    /* logo */
  --t-score: 72px;   /* points, place */

  /* --- Anneaux d'avatar : un seul par avatar, couleur du joueur --- */
  --anneau-s: 3px;
  --anneau-m: 4px;
  --anneau-l: 7px;

  /* --- Sélection : échelle + halo blanc diffus + coche. Jamais de cadre. --- */
  --selection-echelle: 1.05;
  --selection-halo: 0 0 36px 8px rgba(255, 255, 255, 0.5);

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

  /* --- Zones sûres --- */
  --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,
   pas de « tirer pour recharger » en pleine partie, pas de sélection de texte ni de menu au toucher long. */
html {
  background: var(--plateau-nuit);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
body {
  min-height: 100vh;
  min-height: 100dvh;
  overscroll-behavior-y: contain;
  background: var(--plateau-nuit);
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  -webkit-touch-callout: none;
}
input { -webkit-user-select: text; user-select: text; }
[hidden] { display: none !important; }
[tabindex="-1"]:focus { outline: none; }
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;
}
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }

/* ==========================================================================
   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(--ui-texte);
  background:
    radial-gradient(120% 52% at 50% -6%, rgba(150, 190, 255, 0.5), transparent 62%),
    linear-gradient(180deg, #050c45 0%, var(--plateau-profond) 42%, var(--plateau-scene) 72%, var(--plateau-clair) 100%);
}
/* Écrans de la manche : fond plus sombre, pour que le bleu de réponse ressorte */
.ecran--manche {
  background:
    radial-gradient(120% 46% at 50% -6%, rgba(120, 160, 255, 0.4), transparent 62%),
    linear-gradient(180deg, #030828 0%, #06124f 50%, #0a1c8a 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.42), rgba(120, 170, 255, 0.1) 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, 240, 191, 0.9) 3.5px, rgba(255, 240, 191, 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(--decor-cyan), #9fd0ff 55%, var(--decor-rose));
  box-shadow: 0 0 8px var(--decor-cyan), 0 0 22px rgba(76, 220, 255, 0.5);
}
.decor__pilier::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 3px;
  background: var(--decor-rose);
  box-shadow: 0 0 10px var(--decor-rose);
}
.decor__pilier--g { left: 6px; }
.decor__pilier--g::after { left: 11px; }
.decor__pilier--d { right: 6px; }
.decor__pilier--d::after { right: 11px; }
.decor__sol {
  display: none; /* ADAPTÉ : le sol n'est que sur l'arrivée, le personnage et le salon (classe .ecran--sol, posée par vues.js) */
  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.4), rgba(30, 70, 230, 0) 68%);
}
.decor__sol::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid rgba(76, 220, 255, 0.5);
  box-shadow: 0 0 18px rgba(76, 220, 255, 0.5), inset 0 0 26px rgba(76, 220, 255, 0.3);
}
.decor__sol::after {
  content: "";
  position: absolute;
  inset: 46px 80px;
  border-radius: 50%;
  border: 3px solid rgba(255, 79, 180, 0.45);
  box-shadow: 0 0 16px rgba(255, 79, 180, 0.4);
}

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

.carte {
  background: var(--ui-verre);
  border: 3px solid var(--ui-bord);
  border-radius: var(--rayon-l);
  box-shadow: inset 0 2px 0 rgba(255, 255, 255, 0.16), 0 10px 24px rgba(2, 6, 60, 0.35);
  backdrop-filter: blur(6px);
}

.titre {
  margin: 0;
  font-weight: 700;
  font-size: var(--t-xl);
  line-height: 1.1;
  text-align: center;
  text-shadow: 0 3px 0 rgba(5, 12, 69, 0.7);
}
.titre--gauche { text-align: left; }
.titre--sous-bandeau { margin-top: 16px; }
.titre--liste { margin: 14px 0 10px; font-size: var(--t-l); }
.texte-doux { margin: 0; color: var(--ui-doux); }
.texte-doux--centre { text-align: center; font-size: var(--t-s); font-weight: 600; }
.reset-marge { margin: 0; }

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

/* Connexion : point plein = en ligne, point creux = hors ligne */
.connexion {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 0 16px 0 14px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-min);
  font-weight: 600;
  background: var(--ui-verre-fort);
  border: 2px solid var(--ui-bord);
}
.connexion__point {
  width: 12px;
  height: 12px;
  border-radius: 50%;
  background: var(--ui);
  box-shadow: 0 0 10px rgba(255, 255, 255, 0.8);
}
.connexion--hors-ligne .connexion__point { background: transparent; border: 3px solid var(--ui); box-shadow: none; }

/* 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: var(--t-m);
  font-weight: 600;
  background: var(--ui-verre-fort);
  border: 3px solid var(--ui-bord);
}
.puce__code { font-weight: 700; letter-spacing: 0.14em; }
.puce--compteur strong { font-weight: 700; }

/* Messages d'état du salon */
.message {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
  padding: 12px 18px;
  border-radius: var(--rayon-m);
  font-size: var(--t-m);
  font-weight: 600;
  line-height: 1.2;
  background: var(--ui-verre);
  border: 3px solid var(--ui-bord-faible);
}
.message--manque { border-style: dashed; border-color: var(--ui-bord); }
.message--pret { background: var(--ui); color: var(--ui-encre); border-color: var(--ui); }

/* 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(--decor-ampoule) 6px);
  box-shadow: 0 0 10px rgba(255, 240, 191, 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); } }

/* Formes de réponse : même dessin sur le téléphone et sur la télé.
   Un seul tracé blanc cerclé d'encre, lisible sur les 4 couleurs. */
.forme {
  --forme-taille: 104px;
  width: var(--forme-taille);
  height: var(--forme-taille);
  flex: none;
  overflow: visible;
  fill: var(--ui);
  stroke: var(--ui-encre);
  stroke-width: 9;
  stroke-linejoin: round;
  paint-order: stroke;
}
.forme--m { --forme-taille: 64px; }
.forme--s { --forme-taille: 44px; stroke-width: 11; }

/* ==========================================================================
   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: var(--t-xl);
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
  transition: transform 0.08s ease, box-shadow 0.08s ease;
}
.bouton:focus-visible,
.lien:focus-visible,
.perso:focus-visible,
.reponse:focus-visible { outline: 4px solid var(--ui); outline-offset: 5px; }

/* Action principale : bonbon blanc, texte encre */
.bouton--principal {
  color: var(--ui-encre);
  background: linear-gradient(180deg, #ffffff 0%, #f3f6ff 50%, var(--ui-bas) 100%);
  box-shadow: inset 0 4px 0 #ffffff, inset 0 -6px 0 rgba(110, 125, 195, 0.3), 0 7px 0 var(--ui-ombre), 0 16px 26px rgba(2, 8, 70, 0.55);
}
.bouton--principal:active {
  transform: translateY(5px);
  box-shadow: inset 0 4px 0 #ffffff, inset 0 -6px 0 rgba(110, 125, 195, 0.3), 0 2px 0 var(--ui-ombre), 0 8px 14px rgba(2, 8, 70, 0.55);
}

/* « Je suis prêt » une fois touché : verre, contour blanc, coche */
.bouton .icone { width: 32px; height: 32px; stroke-width: 4; }
.bouton--pret {
  color: var(--ui);
  background: var(--ui-verre-fort);
  border: 4px solid var(--ui);
  box-shadow: var(--selection-halo);
}

/* Inactif (code incomplet, hors ligne) */
.bouton--inactif,
.bouton:disabled {
  cursor: not-allowed;
  color: rgba(10, 21, 96, 0.7);
  background: linear-gradient(180deg, var(--ui-inactif-haut), var(--ui-inactif-bas));
  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);
}

/* Chargement */
.bouton--chargement { cursor: progress; }
.spinner {
  width: 26px;
  height: 26px;
  flex: none;
  border-radius: 50%;
  border: 4px solid rgba(10, 21, 96, 0.25);
  border-top-color: var(--ui-encre);
  animation: tourne 0.9s linear infinite;
}
@keyframes tourne { to { transform: rotate(360deg); } }

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

/* Lien discret */
.lien {
  appearance: none;
  align-self: center;
  min-height: 48px;
  padding: 0 18px;
  border: 0;
  background: none;
  font-family: var(--police);
  font-size: var(--t-s);
  font-weight: 500;
  color: var(--ui-doux);
  text-decoration: underline;
  text-underline-offset: 4px;
  cursor: pointer;
}
.lien--gauche { align-self: flex-start; padding-left: 0; }

/* ==========================================================================
   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: var(--t-s); font-weight: 600; color: var(--ui-doux); }
.champ__saisie {
  width: 100%;
  height: 64px;
  padding: 0 22px;
  border-radius: var(--rayon-l);
  border: 3px solid var(--ui-bord);
  background: var(--ui-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: var(--ui);
  outline: none;
}
.champ__saisie::placeholder { color: rgba(198, 210, 255, 0.6); }
.champ__saisie:focus {
  border-color: var(--ui);
  box-shadow: inset 0 3px 8px rgba(0, 0, 0, 0.35), var(--selection-halo);
}
.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;
}
.champ__message {
  display: none;
  padding-left: 8px;
  font-size: var(--t-s);
  font-weight: 600;
  color: var(--ui);
}
.champ__message::before { content: "! "; font-weight: 700; }
.champ--erreur .champ__saisie { border-color: var(--ui); border-style: dashed; }
.champ--erreur .champ__message { display: block; }

/* ==========================================================================
   7. ÉCRAN 1 : ARRIVÉE
   ========================================================================== */
.logo-bloc { position: relative; display: flex; justify-content: center; margin: 0 0 14px; padding-top: 118px; }
.mascotte {
  position: absolute;
  top: 0;
  left: 50%;
  width: 148px;
  height: 148px;
  margin-left: -74px;
  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 : l'image du jeu (voir nom-du-jeu.js). ADAPTÉ : le design avait un logo provisoire en texte dans un cadre
   à ampoules ; le logo Zigotos Party est une illustration complète, sans cadre. */
.logo {
  position: relative;
  z-index: 1;
  width: 100%;
  max-width: 330px;
  margin: 0;
}
.logo__image {
  display: block;
  width: 100%;
  height: auto;
  filter: drop-shadow(0 10px 16px rgba(2, 8, 70, 0.55));
}
.accroche { margin: 8px 0 14px; text-align: center; font-size: 22px; font-weight: 600; color: var(--ui-doux); }
.pied { margin: auto 0 0; padding-top: 14px; text-align: center; font-size: var(--t-s); font-weight: 500; color: var(--ui-doux); }

/* ==========================================================================
   8. AVATARS (un seul anneau, couleur du joueur)
   ========================================================================== */
.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%, #6f9bff 0%, #1f44d4 72%);
  border: var(--anneau-m) solid var(--anneau);
}
.avatar img { display: block; width: 100%; height: 100%; object-fit: cover; }
.avatar--s { border-width: var(--anneau-s); }
.avatar--l { border-width: var(--anneau-l); }
.avatar--neutre { border-color: rgba(255, 255, 255, 0.35); }
.avatar--neutre img { filter: grayscale(1) brightness(0.8); }

.joueur--cyan { --anneau: var(--joueur-cyan); }
.joueur--orange { --anneau: var(--joueur-orange); }
.joueur--rose { --anneau: var(--joueur-rose); }
.joueur--violet { --anneau: var(--joueur-violet); }

/* Pastille de joueur (nom précédé d'un point de sa couleur) */
.pastille-nom {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 12px 0 10px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-min);
  font-weight: 600;
  background: var(--ui-verre-fort);
  border: 2px solid var(--ui-bord);
}
.pastille-nom::before { content: ""; width: 14px; height: 14px; border-radius: 50%; background: var(--anneau); }

/* Coche de sélection (blanche, la même partout) */
.coche {
  display: none;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui);
  color: var(--ui-encre);
  box-shadow: 0 4px 10px rgba(2, 8, 70, 0.5);
}
.coche .icone { width: 24px; height: 24px; stroke-width: 4; }

/* ==========================================================================
   9. ÉCRAN 2 : CHOIX DU PERSONNAGE (grille fixe 2 x 2)
   ========================================================================== */
.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: var(--t-s); font-weight: 500; color: var(--ui-doux); }
.bandeau-salon__nom strong { color: var(--ui); font-weight: 700; }

.grille-persos {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 224px;
  gap: 18px 16px;
  margin-top: 26px;
}
.perso {
  position: relative;
  appearance: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  padding: 14px 8px;
  border-radius: 30px;
  border: 3px solid var(--ui-bord-faible);
  background: var(--ui-verre);
  color: var(--ui-texte);
  font-family: var(--police);
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease;
}
.perso .avatar { --taille: 128px; border-width: var(--anneau-l); }
.perso__bulle {
  display: none;
  position: absolute;
  top: -16px;
  right: 6px;
  z-index: 2;
  padding: 6px 16px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-m);
  font-weight: 700;
  color: var(--ui-encre);
  background: var(--ui);
  box-shadow: 0 6px 14px rgba(2, 8, 70, 0.5);
  transform: rotate(8deg);
}
.perso .coche { position: absolute; top: 10px; left: 10px; }

/* Sélectionné : échelle + halo + coche, rien d'autre (pas de cadre) */
.perso--choisi {
  z-index: 1;
  transform: scale(var(--selection-echelle));
  background: rgba(255, 255, 255, 0.2);
  box-shadow: var(--selection-halo);
}
.perso--choisi .coche,
.perso--choisi .perso__bulle { display: grid; }
.perso--choisi .perso__bulle { display: block; }
.perso--choisi .avatar { animation: coucou 2.4s ease-in-out infinite; transform-origin: 50% 90%; }

/* Pris par un autre joueur : gris, avec son prénom */
.perso--pris { cursor: not-allowed; background: rgba(3, 10, 70, 0.55); }

/* ==========================================================================
   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(--ui-verre);
  border: 3px solid var(--ui-bord-faible);
}
.joueur-ligne .avatar { --taille: 54px; border-width: var(--anneau-s); }
.joueur-ligne__nom {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--t-l);
  font-weight: 600;
}
.joueur-ligne__toi {
  margin-left: 8px;
  padding: 2px 10px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-min);
  font-weight: 700;
  color: var(--ui-encre);
  background: var(--ui);
  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: var(--t-min);
  font-weight: 700;
}
.etat .icone { width: 18px; height: 18px; stroke-width: 4; }
.etat--pret { color: var(--ui-encre); background: var(--ui); }
.etat--attente { color: var(--ui-doux); border: 2px solid rgba(198, 210, 255, 0.6); }
.etat--deconnecte { color: var(--ui); border: 2px dashed var(--ui); }
.joueur-ligne--moi { background: rgba(255, 255, 255, 0.2); box-shadow: var(--selection-halo); }
.joueur-ligne--deconnecte { opacity: 0.65; }
.joueur-ligne--libre { border-style: dashed; background: transparent; color: var(--ui-doux); }
.joueur-ligne--libre .avatar { background: transparent; border: 3px dashed rgba(198, 210, 255, 0.5); display: grid; place-items: center; font-size: var(--t-l); font-weight: 700; }

.actions-bas { margin-top: auto; display: flex; flex-direction: column; gap: 8px; }
.zone-attente { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }

/* ==========================================================================
   11. ÉCRAN 4 : CONNEXION PERDUE ET MESSAGES
   ========================================================================== */
.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(--ui-encre);
  background: var(--ui);
  box-shadow: 0 8px 22px rgba(2, 8, 70, 0.5);
}
.bandeau--alerte .spinner { width: 24px; height: 24px; border-width: 4px; }
.ecran--hors-ligne .liste-joueurs,
.ecran--hors-ligne .zone-attente { opacity: 0.45; filter: saturate(0.5); pointer-events: none; }
/* ADAPTÉ : le bandeau est en haut de l'écran, au-dessus de la vue en cours, comme dans le design (écran 4).
   Pendant la manche il flotte par-dessus le rappel, pour que les quatre boutons ne changent pas de taille. */
.zone-bandeaux { position: relative; z-index: 3; }
.zone-bandeaux .bandeau { min-height: 52px; margin-bottom: 12px; }
.ecran--manche .zone-bandeaux {
  position: absolute;
  top: max(var(--zone-haut), calc(env(safe-area-inset-top, 0px) + 12px));
  left: max(var(--marge), env(safe-area-inset-left, 0px));
  right: max(var(--marge), env(safe-area-inset-right, 0px));
}
.ecran--manche .zone-bandeaux .bandeau { margin-bottom: 0; }
.ecran--hors-ligne .reponses { opacity: 0.45; filter: saturate(0.5); pointer-events: none; }

/* Toasts : tous blancs, la différence est dans l'icône */
.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: var(--ui-encre);
  background: var(--ui);
  box-shadow: 0 10px 28px rgba(2, 8, 70, 0.55);
}
.toast__icone {
  flex: none;
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--ui-encre);
  color: var(--ui);
}
.toast--erreur { animation: secoue 0.4s ease-in-out 1; }
@keyframes secoue { 0%, 100% { transform: translateX(0); } 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }

/* ==========================================================================
   12. É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;
}
@media (orientation: landscape) and (max-height: 500px) and (pointer: coarse) and (min-aspect-ratio: 3/2) {
  .ecran--paysage { display: flex; }
}
.ecran--paysage .contenu { 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: var(--t-2xl); font-weight: 700; line-height: 1.05; text-shadow: 0 4px 0 rgba(5, 12, 69, 0.7); }
.consigne__texte { margin: 0; font-size: var(--t-m); font-weight: 500; color: var(--ui-doux); }

/* ==========================================================================
   13. LOT 2 : LA MANCHE
   ========================================================================== */
/* Rappel minuscule en haut : avatar, prénom, numéro de question */
.rappel { display: flex; align-items: center; gap: 12px; min-height: 56px; }
.rappel .avatar { --taille: 48px; border-width: var(--anneau-s); }
.rappel__prenom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: var(--t-m); font-weight: 600; }
.rappel__question {
  padding: 6px 14px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-s);
  font-weight: 600;
  background: var(--ui-verre-fort);
  border: 2px solid var(--ui-bord);
}

/* Minuteur discret : barre blanche qui se vide, pulsation à la fin */
.minuteur { --reste: 100%; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.minuteur__piste { flex: 1; height: 14px; border-radius: var(--rayon-rond); background: rgba(255, 255, 255, 0.2); overflow: hidden; }
.minuteur__reste { height: 100%; width: var(--reste); border-radius: var(--rayon-rond); background: var(--ui); }
.minuteur__secondes { min-width: 2ch; text-align: right; font-size: var(--t-l); font-weight: 700; }
.minuteur--75 { --reste: 75%; }
.minuteur--50 { --reste: 50%; }
.minuteur--25 { --reste: 25%; }
.minuteur--fin .minuteur__reste { animation: pulse 0.6s ease-in-out infinite; }
.minuteur--fin .minuteur__secondes { animation: pulse 0.6s ease-in-out infinite; }
@keyframes pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }

.consigne-courte { margin: 16px 0 0; text-align: center; font-size: var(--t-m); font-weight: 600; color: var(--ui-doux); }

/* 4 grands boutons de réponse en 2 x 2 : rouge/éclair, bleu/goutte,
   jaune/étoile, vert/hexagone (haut gauche, haut droite, bas gauche, bas droite) */
.reponses {
  flex: 1 1 0;
  min-height: 420px;
  max-height: 500px;
  margin-top: auto;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
  gap: 18px 16px;
  padding-bottom: 10px;
}
.reponse {
  position: relative;
  appearance: none;
  display: grid;
  place-items: center;
  border: 0;
  border-radius: 34px;
  cursor: pointer;
  background: linear-gradient(180deg, var(--c-haut) 0%, var(--c) 42%, var(--c-bas) 100%);
  box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 0 rgba(0, 0, 0, 0.14), 0 9px 0 var(--c-ombre), 0 18px 26px rgba(2, 6, 60, 0.55);
  transition: transform 0.12s ease, opacity 0.2s ease, filter 0.2s ease;
}
.reponse:active { transform: translateY(6px) scale(0.98); }
.reponse .forme { --forme-taille: 112px; }
.reponse .coche { position: absolute; top: 14px; right: 14px; }
.reponse--rouge { --c: var(--reponse-rouge); --c-haut: #ff7280; --c-bas: #db3343; --c-ombre: #851f29; }
.reponse--bleu { --c: var(--reponse-bleu); --c-haut: #69a0ff; --c-bas: #286adb; --c-ombre: #184085; }
.reponse--jaune { --c: var(--reponse-jaune); --c-haut: #ffdf5e; --c-bas: #dbb51b; --c-ombre: #856d10; }
.reponse--vert { --c: var(--reponse-vert); --c-haut: #60d58b; --c-bas: #1da951; --c-ombre: #126631; }

/* Choisi : échelle + halo + coche ; les autres s'éteignent */
.reponse--choisi { z-index: 2; transform: scale(var(--selection-echelle)); box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 0 rgba(0, 0, 0, 0.14), 0 9px 0 var(--c-ombre), var(--selection-halo); }
.reponse--choisi .coche { display: grid; }
.reponse--eteint { opacity: 0.28; filter: saturate(0.3); }
/* Temps écoulé : les couleurs sont grisées (la réponse est fermée), mais on peut encore les marteler : voir « Spam » plus bas */
.reponse--inactif { opacity: 0.35; filter: grayscale(1); cursor: default; }
/* Petite tuile de réponse (retours après révélation) */
.reponse--mini { width: 112px; height: 112px; border-radius: 28px; box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.14), 0 6px 0 var(--c-ombre); }
.reponse--mini .coche { width: 36px; height: 36px; top: -12px; right: -12px; }
.reponse--mini .forme { --forme-taille: 64px; stroke-width: 11; }
.reponse--bonne { box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.14), 0 6px 0 var(--c-ombre), var(--selection-halo); }
.reponse--bonne .coche { display: grid; width: 36px; height: 36px; top: -12px; right: -12px; }
.reponse--barree { opacity: 0.55; filter: saturate(0.5); }
.reponse--barree .coche { display: grid; width: 36px; height: 36px; top: -12px; right: -12px; }

/* Fenêtre de 2 secondes pour changer d'avis */
.verrou { display: flex; flex-direction: column; align-items: center; gap: 8px; margin: 12px 0 14px; }
.verrou__message { display: inline-flex; align-items: center; gap: 10px; font-size: var(--t-xl); font-weight: 700; text-shadow: 0 3px 0 rgba(5, 12, 69, 0.7); }
.verrou__message .icone { width: 32px; height: 32px; stroke-width: 4; }
.verrou__annuler { width: 220px; display: flex; flex-direction: column; gap: 8px; }
.verrou__annuler .bouton { min-height: 52px; font-size: var(--t-m); }
.fenetre { height: 8px; border-radius: var(--rayon-rond); background: rgba(255, 255, 255, 0.25); overflow: hidden; }
.fenetre__reste { height: 100%; width: var(--reste, 100%); border-radius: var(--rayon-rond); background: var(--ui); }

/* Écran de message plein écran (attente, retard, pause, annulée, fin) */
.ecran-message { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; text-align: center; }
.ecran-message__titre { margin: 0; font-size: var(--t-2xl); font-weight: 700; line-height: 1.05; text-shadow: 0 4px 0 rgba(5, 12, 69, 0.7); }
.ecran-message__texte { margin: 0; font-size: var(--t-m); font-weight: 500; color: var(--ui-doux); }
.rond-icone {
  display: grid;
  place-items: center;
  width: 120px;
  height: 120px;
  border-radius: 50%;
  background: var(--ui);
  color: var(--ui-encre);
  box-shadow: 0 8px 0 var(--ui-ombre), 0 0 40px rgba(255, 255, 255, 0.3);
}
.rond-icone .icone { width: 60px; height: 60px; stroke-width: 3.5; }
.rond-icone--s { width: 96px; height: 96px; }
.rond-icone--s .icone { width: 48px; height: 48px; }
.rond-icone--verre { background: var(--ui-verre-fort); color: var(--ui); border: 4px solid var(--ui); box-shadow: none; }
.regarde-la-tele { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: var(--rayon-rond); font-size: var(--t-m); font-weight: 700; background: var(--ui-verre-fort); border: 2px solid var(--ui-bord); }
.regarde-la-tele .icone { width: 28px; height: 28px; }

/* Retours après révélation */
.verdict { display: flex; flex-direction: column; align-items: center; gap: 8px; }
.verdict__mot { margin: 0; font-size: var(--t-2xl); font-weight: 700; text-shadow: 0 4px 0 rgba(5, 12, 69, 0.7); }
.verdict__phrase { margin: 0; font-size: var(--t-m); color: var(--ui-doux); }
.points { margin: 4px 0 0; font-size: var(--t-score); font-weight: 700; line-height: 1; text-shadow: 0 5px 0 rgba(5, 12, 69, 0.7), 0 0 26px rgba(255, 255, 255, 0.35); }
.points--zero { opacity: 0.7; text-shadow: 0 5px 0 rgba(5, 12, 69, 0.7); }
.place { display: inline-flex; align-items: center; gap: 10px; padding: 10px 22px; border-radius: var(--rayon-rond); font-size: var(--t-l); font-weight: 700; background: var(--ui-verre-fort); border: 2px solid var(--ui-bord); }
.place .icone { width: 28px; height: 28px; stroke-width: 4; }
.revelation { display: flex; justify-content: center; gap: 28px; }
.tuile { display: flex; flex-direction: column; align-items: center; gap: 14px; font-size: var(--t-s); font-weight: 600; color: var(--ui-doux); }
.avatar--content { animation: saut 0.8s ease-out 1; }
.avatar--decu { animation: secoue 0.6s ease-in-out 1; }
@keyframes saut { 0%, 100% { transform: translateY(0); } 40% { transform: translateY(-16px); } }

/* Fin de partie */
.place-finale { margin: 0; font-size: 104px; font-weight: 700; line-height: 0.9; text-shadow: 0 6px 0 rgba(5, 12, 69, 0.7), 0 0 30px rgba(255, 255, 255, 0.3); }
.place-finale small { font-size: 0.5em; vertical-align: 0.55em; }
.score-final { margin: 0; font-size: var(--t-xl); font-weight: 700; }
.avatar--grand { --taille: 150px; border-width: var(--anneau-l); }

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

/* Ajouts du design : variantes de mise en page */
.ecran--hors-ligne .bandeau { min-height: 52px; }
.ecran--hors-ligne .liste-joueurs { gap: 8px; }
.verdict--haut { margin: 12px 0 14px; }

/* ==========================================================================
   16. ADAPTATIONS DE LA VRAIE PAGE (repérées « ADAPTÉ »)
   ========================================================================== */
/* Décor du sol : seulement sur les écrans du design qui l'ont */
.ecran--sol .decor__sol,
.ecran--paysage .decor__sol { display: block; }

/* Boutons natifs : pas de sélection de texte, pas de zoom au double toucher, zone tactile d'au moins 44 px */
.bouton, .lien, .perso, .reponse { -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.lien { min-height: 48px; }

/* Fenêtre de changement d'avis : après « Annuler », seule la barre reste, avec la consigne */
.verrou--changer .verrou__annuler .bouton,
.verrou--changer .verrou__message .icone { display: none; }
.verrou--changer .verrou__message { font-size: var(--t-l); }

/* Compte à rebours de début : le chiffre dans le rond blanc */
.rond-icone--nombre { width: 160px; height: 160px; font-size: 96px; font-weight: 700; line-height: 1; }
.rond-icone--go { font-size: 60px; }
.rond-icone--bat { animation: bat 0.5s ease-out; }
@keyframes bat { from { transform: scale(0.86); } to { transform: scale(1); } }

/* Série de bonnes réponses (retour « Bonne réponse ») */
.serie {
  margin: -6px 0 0;
  padding: 4px 16px;
  border-radius: var(--rayon-rond);
  font-size: var(--t-s);
  font-weight: 700;
  color: var(--ui-encre);
  background: var(--ui);
}
.place { max-width: 100%; text-align: center; }

/* Toasts : ils flottent en haut de l'écran, disparaissent seuls et se ferment d'un toucher (le design les montre en planche) */
.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--erreur { animation: toast-entree 0.25s ease-out both, secoue 0.4s ease-in-out 0.25s 1; }
.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); } }
.noscript { position: relative; z-index: 5; margin: 0; padding: 20px; font-family: var(--police); font-size: var(--t-m); color: var(--ui-encre); background: var(--ui); }

/* Écrans de message : un peu plus d'air autour du contenu */
.actions-bas .bouton + .bouton, .actions-bas .bouton + .lien { margin-top: 0; }

/* Écrans bas (navigateur de téléphone avec ses barres : 560 à 700 px utiles) : on resserre pour que tout tienne sans défiler */
@media (max-height: 740px) {
  .logo-bloc { padding-top: 88px; margin-bottom: 8px; }
  .mascotte { width: 112px; height: 112px; margin-left: -56px; }
  .logo { max-width: 270px; }
  .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: 60px; font-size: 28px; }
  .titre--sous-bandeau { margin-top: 10px; font-size: 26px; }
  .grille-persos { flex: 1; grid-auto-rows: minmax(0, 1fr); gap: 12px; margin: 26px 0 12px; }
  .perso { gap: 6px; padding: 8px 6px; }
  .perso .avatar { --taille: 92px; border-width: 5px; }
  .actions-bas { padding-bottom: 2px; }
  /* salon : 4 joueurs, deux messages et trois boutons doivent tenir sans cacher « Je suis prêt » */
  .puce { min-height: 40px; }
  .titre--liste { margin: 8px 0 6px; font-size: 22px; }
  .liste-joueurs { gap: 6px; }
  .joueur-ligne { min-height: 52px; gap: 12px; padding: 3px 12px 3px 5px; }
  .joueur-ligne .avatar { --taille: 44px; }
  .zone-attente { margin-top: 8px; }
  .message { padding: 8px 14px; font-size: 18px; }
  .texte-doux--centre { display: none; }
  .bouton--secondaire { min-height: 48px; font-size: 22px; }
  .zone-bandeaux .bandeau { min-height: 46px; margin-bottom: 8px; font-size: 17px; }
  .ecran--hors-ligne .zone-attente { display: none; }
  .reponses { min-height: 0; margin-bottom: 0; gap: 14px 12px; }
  .reponse { border-radius: 28px; }
  .reponse .forme { --forme-taille: 84px; }
  .verrou { margin: 8px 0 10px; gap: 6px; }
  .verrou__message { font-size: var(--t-l); }
  .verrou__annuler .bouton { min-height: 48px; }
  .verdict--haut { margin: 8px 0 10px; gap: 4px; }
  .consigne-courte { margin: 10px 0 12px; }
  .rond-icone { width: 96px; height: 96px; }
  .rond-icone--s { width: 72px; height: 72px; }
  .rond-icone--s .icone { width: 36px; height: 36px; }
  .rond-icone--nombre { width: 128px; height: 128px; font-size: 76px; }
  .ecran-message { gap: 12px; }
  .points { font-size: 60px; }
  .reponse--mini { width: 92px; height: 92px; }
  .reponse--mini .forme { --forme-taille: 52px; }
  .revelation { gap: 24px; padding-bottom: 4px; }
  .tuile { gap: 10px; }
  .avatar--grand { --taille: 110px; border-width: 5px; }
  .place-finale { font-size: 80px; }
}
@media (max-height: 620px) {
  .logo-bloc { padding-top: 64px; }
  .mascotte { width: 88px; height: 88px; margin-left: -44px; }
  .logo { max-width: 230px; }
  .pied { display: none; }
  .reponses { gap: 12px 10px; }
  .reponse .forme { --forme-taille: 70px; }
  .rappel { min-height: 48px; }
  .minuteur { margin-top: 4px; }
  .grille-persos .perso .avatar { --taille: 76px; }
}
/* Grands écrans (430 x 932 et plus) : les boutons de réponse profitent de la hauteur */
@media (min-height: 900px) {
  .reponses { max-height: 600px; }
}
/* Petite largeur (360 px) */
@media (max-width: 374px) {
  :root { --marge: 18px; --t-hero: 46px; }
  .puce { padding: 0 14px; font-size: var(--t-min); }
  .champ__saisie--code { font-size: 38px; letter-spacing: 0.22em; text-indent: 0.22em; }
  .verdict__mot, .ecran-message__titre { font-size: 34px; }
  .place { font-size: 21px; padding: 8px 16px; }
  .joueur-ligne__nom { font-size: 21px; }
}

/* Salon hors ligne (design, écran 4) : pas de compteur « prêts sur N », pour que tout tienne sous le bandeau */
.ecran--hors-ligne .texte-doux--centre { display: none; }

/* ==========================================================================
   17. SPAM SUR LES COULEURS (18 octobre 2026)
   Chaque toucher sur une couleur compte un coup (le personnage tape sur son buzzer sur la télé), pendant la réponse et après le
   verrouillage. Pas de nouveau jeton : la couleur touchée s'enfonce, sa forme rebondit et une onde blanche part à chaque coup.
   ========================================================================== */
/* enfoncée tant qu'un doigt est posé (au moins 90 ms) : même descente que le bouton « Je suis prêt », y compris pour la couleur choisie */
.reponse.reponse--enfonce { transform: translateY(6px) scale(0.96); }
.reponse--choisi.reponse--enfonce { transform: translateY(6px) scale(calc(var(--selection-echelle) * 0.96)); }
.reponse--mini.reponse--enfonce { transform: translateY(4px) scale(0.94); }
.reponse--enfonce { box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 0 rgba(0, 0, 0, 0.14), 0 3px 0 var(--c-ombre), 0 8px 14px rgba(2, 6, 60, 0.55); }
.reponse--choisi.reponse--enfonce { box-shadow: inset 0 5px 0 rgba(255, 255, 255, 0.45), inset 0 -8px 0 rgba(0, 0, 0, 0.14), 0 3px 0 var(--c-ombre), var(--selection-halo); }
.reponse--mini.reponse--enfonce { box-shadow: inset 0 4px 0 rgba(255, 255, 255, 0.45), inset 0 -6px 0 rgba(0, 0, 0, 0.14), 0 2px 0 var(--c-ombre); }
/* à chaque coup : la forme rebondit, une onde blanche part de la couleur */
.reponse::after {
  content: "";
  position: absolute;
  inset: -2px;
  border-radius: inherit;
  border: 4px solid #ffffff;
  opacity: 0;
  pointer-events: none;
}
.reponse--rebond::after { animation: spam-onde 0.3s ease-out 1; }
.reponse--rebond .forme { animation: spam-rebond 0.22s ease-out 1; }
@keyframes spam-onde { from { opacity: 0.85; transform: scale(1); } to { opacity: 0; transform: scale(1.22); } }
@keyframes spam-rebond { 0% { transform: scale(1); } 35% { transform: scale(0.8); } 70% { transform: scale(1.12); } 100% { transform: scale(1); } }