/* Application des joueurs du quiz (plan du 2026-11-11, T15) : téléphone d'abord (360 à 430 px), thème foncé d'Atlantis
   (jetons de design/jetons.css), accent #FF5300, Poppins. Cibles de 48 px au moins, focus visible orange. Les couleurs
   des choix (orange, turquoise, violet, jaune) servent de contour, puis de fond une fois le choix fait : texte foncé sur
   orange, turquoise et jaune, blanc sur violet (4,6:1). Aucun mouvement sous prefers-reduced-motion, sauf le chrono, qui
   est une information. */

:root {
  --entete: 56px;
  --choix-1: #FF5300;
  --choix-2: #00B8A9;
  --choix-3: #7B61FF;
  --choix-4: #FFC93C;
  --sur-choix-1: #141210;
  --sur-choix-2: #141210;
  --sur-choix-3: #FFFFFF;
  --sur-choix-4: #141210;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  min-height: 100vh;
  min-height: 100svh;
  background: var(--c-fond);
  color: var(--c-texte);
  font-family: var(--police);
  font-size: var(--taille-corps);
  line-height: 1.45;
  -webkit-tap-highlight-color: transparent;
}

button, input { font: inherit; color: inherit; }

:focus-visible { outline: 3px solid var(--c-accent); outline-offset: 2px; }

.sr {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- En-tête fixe et mince : « Quiz », bascule FR / EN ---------- */
.entete {
  position: fixed; inset: 0 0 auto; z-index: 10;
  display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3);
  height: calc(var(--entete) + env(safe-area-inset-top));
  padding: env(safe-area-inset-top) max(var(--espace-4), env(safe-area-inset-right)) 0 max(var(--espace-4), env(safe-area-inset-left));
  background: var(--c-fond);
  border-bottom: 1px solid var(--c-filet);
}
.marque { font-size: var(--taille-titre-3); font-weight: var(--graisse-gras); letter-spacing: -0.01em; }
.langue {
  min-height: var(--cible-minimum); min-width: var(--cible-minimum);
  padding: 0 var(--espace-4);
  border: 1px solid var(--c-contour); border-radius: var(--rayon-bouton);
  background: transparent;
  font-size: var(--taille-meta); font-weight: var(--graisse-demi-gras);
  cursor: pointer;
}
.langue:hover { border-color: var(--c-accent); }

/* Connexion perdue : discret, sous l'en-tête */
.bandeau {
  position: fixed; inset: calc(var(--entete) + env(safe-area-inset-top)) 0 auto; z-index: 9;
  margin: 0; padding: var(--espace-2) var(--espace-4);
  background: var(--c-ambre-fond); color: var(--c-ambre);
  font-size: var(--taille-meta); font-weight: var(--graisse-moyen); text-align: center;
}
.bandeau[hidden] { display: none; }
.hors-ligne .app { padding-top: calc(var(--entete) + env(safe-area-inset-top) + var(--espace-5) + 36px); }

/* ---------- Colonne ---------- */
.app {
  max-width: 480px; margin: 0 auto;
  padding: calc(var(--entete) + env(safe-area-inset-top) + var(--espace-5)) var(--espace-4) calc(var(--espace-6) + env(safe-area-inset-bottom));
}
.ecran-centre {
  min-height: calc(100svh - var(--entete) - var(--espace-5) - var(--espace-6));
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--espace-4);
  text-align: center;
}
.titre-message { margin: 0; font-size: var(--taille-titre-2); font-weight: var(--graisse-gras); line-height: 1.2; }
.texte-message { margin: 0; color: var(--c-texte-2); max-width: 30ch; }

/* Chargement : squelettes */
.ecran-chargement { display: grid; gap: var(--espace-4); }
.squelette { border-radius: var(--rayon-bouton); background: var(--c-surface-2); }
.squelette-titre { height: 36px; width: 70%; }
.squelette-champ { height: 56px; }
.squelette-bouton { height: 56px; background: var(--c-surface); }

/* ---------- Rejoindre ---------- */
.titre-soiree {
  margin: 0 0 var(--espace-6);
  font-size: var(--taille-titre-1); font-weight: var(--graisse-gras); line-height: 1.15; letter-spacing: -0.015em;
  overflow-wrap: anywhere;
}
.formulaire { display: grid; gap: var(--espace-5); }
.champ { display: grid; gap: var(--espace-2); }
.etiquette { font-weight: var(--graisse-demi-gras); color: var(--c-texte-2); }
.saisie {
  width: 100%; min-height: 56px;
  padding: 0 var(--espace-4);
  border: 2px solid var(--c-contour); border-radius: var(--rayon-bouton);
  background: var(--c-surface);
  font-size: 20px; font-weight: var(--graisse-moyen);
}
.saisie:focus { border-color: var(--c-accent); }
.saisie:focus-visible { outline-offset: 3px; }
.saisie[aria-invalid="true"] { border-color: var(--c-rouge); }
.saisie-code {
  font-size: var(--taille-titre-2); font-weight: var(--graisse-demi-gras);
  letter-spacing: 0.3em; text-transform: uppercase; text-align: center;
  font-variant-numeric: tabular-nums;
}
.sous-champ { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--espace-3); }
.compteur { margin-left: auto; font-size: var(--taille-meta); color: var(--c-texte-3); font-variant-numeric: tabular-nums; }
.erreur { margin: 0; color: var(--c-rouge); font-size: var(--taille-meta); font-weight: var(--graisse-moyen); }
.erreur:empty { display: none; }
.jouer {
  width: 100%; min-height: var(--cible-service);
  border: 0; border-radius: var(--rayon-bouton);
  background: var(--c-accent); color: var(--c-sur-accent);
  font-size: var(--taille-bouton); font-weight: var(--graisse-gras);
  cursor: pointer;
}
.jouer:disabled { opacity: 0.6; cursor: progress; }

/* ---------- Attente ---------- */
.pastille {
  display: inline-flex; align-items: center; flex-wrap: wrap; justify-content: center;
  margin: 0; padding: var(--espace-2) var(--espace-5);
  border-radius: var(--rayon-rond); background: var(--c-surface-2);
  font-size: var(--taille-corps-fort); font-weight: var(--graisse-demi-gras);
}
.pastille-nom { overflow-wrap: anywhere; }
.pastille-table { color: var(--c-texte-2); font-weight: var(--graisse-moyen); }
.pastille-table::before { content: ""; display: inline-block; width: 1px; height: 1em; margin: 0 var(--espace-3); vertical-align: -0.12em; background: var(--c-contour); }
.attente-texte { margin: 0; font-size: 22px; font-weight: var(--graisse-demi-gras); color: var(--c-texte); animation: pulsation 2.4s ease-in-out infinite; }
@keyframes pulsation { 50% { opacity: 0.5; } }

/* ---------- Carte de la question ---------- */
.carte { background: var(--c-surface); border-radius: var(--rayon-panneau); overflow: hidden; padding-bottom: var(--espace-4); }
.chrono { height: 8px; background: var(--c-surface-2); }
.chrono-barre { height: 100%; background: var(--c-accent); transform-origin: left center; }
.chrono-ligne { display: flex; align-items: center; justify-content: space-between; gap: var(--espace-3); padding: var(--espace-3) var(--espace-4) 0; }
.chrono-s {
  font-size: var(--taille-chiffre-geant); font-weight: var(--graisse-gras); line-height: 1;
  font-variant-numeric: tabular-nums; color: var(--c-accent);
}
.urgent .chrono-barre { background: var(--c-rouge); }
.urgent .chrono-s { color: var(--c-rouge); }
.piege {
  padding: 2px var(--espace-3);
  border-radius: var(--rayon-rond); background: var(--c-ambre-fond); color: var(--c-ambre);
  font-size: var(--taille-meta); font-weight: var(--graisse-demi-gras); white-space: nowrap;
}
.enonce {
  margin: 0; padding: var(--espace-3) var(--espace-4) var(--espace-5);
  font-size: 22px; font-weight: var(--graisse-demi-gras); line-height: 1.3;
  overflow-wrap: anywhere;
}

.choix { display: grid; gap: var(--espace-3); margin: 0; padding: 0 var(--espace-4); list-style: none; }
.c1 { --choix: var(--choix-1); --sur-choix: var(--sur-choix-1); }
.c2 { --choix: var(--choix-2); --sur-choix: var(--sur-choix-2); }
.c3 { --choix: var(--choix-3); --sur-choix: var(--sur-choix-3); }
.c4 { --choix: var(--choix-4); --sur-choix: var(--sur-choix-4); }
.choix-btn, .choix-revele {
  display: flex; align-items: center; gap: var(--espace-3);
  width: 100%; min-height: var(--cible-ligne);
  padding: var(--espace-3) var(--espace-4) var(--espace-3) var(--espace-3);
  border: 2px solid var(--choix, var(--c-contour)); border-radius: var(--rayon-bouton);
  background: transparent; text-align: left;
  font-size: var(--taille-corps-fort); font-weight: var(--graisse-demi-gras); line-height: 1.3;
}
.choix-btn { cursor: pointer; transition: transform var(--mouvement-rapide) var(--mouvement-courbe); }
.choix-btn:active:not(:disabled) { transform: scale(0.98); }
.choix-btn:disabled { cursor: default; }
.choix-btn:disabled:not(.choisi) { opacity: 0.4; }
.lettre {
  flex: none; display: grid; place-items: center;
  width: 36px; height: 36px; border-radius: var(--rayon-rond);
  background: var(--choix, var(--c-surface-2)); color: var(--sur-choix, var(--c-texte));
  font-size: var(--taille-corps); font-weight: var(--graisse-gras);
}
.choix-texte { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.choisi { background: var(--choix); color: var(--sur-choix); }
.choisi .lettre { background: var(--sur-choix); color: var(--choix); }

.statut {
  display: flex; align-items: center; justify-content: center; gap: var(--espace-2);
  margin: var(--espace-4) var(--espace-4) 0; color: var(--c-texte-2); font-weight: var(--graisse-demi-gras);
}
.statut-envoyee { color: var(--c-vert); }
.erreur-reponse { margin: var(--espace-3) var(--espace-4) 0; text-align: center; }
.icone { flex: none; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- Révélation ---------- */
.carte-revelation { padding: var(--espace-5) 0 var(--espace-4); }
.resultat { margin: 0 var(--espace-4); font-size: var(--taille-corps-fort); font-weight: var(--graisse-gras); }
.resultat-bonne { color: var(--c-vert); }
.resultat-mauvaise { color: var(--c-rouge); }
.resultat-aucune { color: var(--c-texte-2); }
.points {
  margin: var(--espace-1) var(--espace-4) 0;
  font-size: var(--taille-chiffre-geant); font-weight: var(--graisse-extra-gras); line-height: 1.1;
  font-variant-numeric: tabular-nums; color: var(--c-texte-2);
}
.points-gagnes { color: var(--c-texte); }
.total { margin: var(--espace-1) var(--espace-4) 0; color: var(--c-texte-2); font-size: var(--taille-meta); }
.rang { margin: var(--espace-4) var(--espace-4) 0; font-size: var(--taille-titre-3); font-weight: var(--graisse-demi-gras); }
.rang-table { margin: var(--espace-1) var(--espace-4) 0; color: var(--c-texte-2); }
.enonce-revele {
  margin-top: var(--espace-5); padding-top: var(--espace-4); border-top: 1px solid var(--c-filet);
  font-size: var(--taille-corps-fort); color: var(--c-texte-2);
}
.choix-revele { border-color: var(--c-filet); color: var(--c-texte-2); }
.choix-revele .lettre { background: var(--c-surface-2); color: var(--c-texte-2); }
.choix-revele.juste { border-color: var(--c-vert); background: var(--c-vert-fond); color: var(--c-texte); }
.choix-revele.juste .lettre { background: var(--c-vert); color: var(--c-fond); }
.choix-revele.juste .icone { color: var(--c-vert); }
.choix-revele.fausse { border-color: var(--c-rouge); background: var(--c-rouge-fond); color: var(--c-texte); }
.choix-revele.fausse .lettre { background: var(--c-rouge); color: var(--c-sur-rouge); }
.choix-revele.fausse .icone { color: var(--c-rouge); }
/* Explication de la question, sous la bonne réponse, alignée sur son texte (après la lettre de 36 px) */
.choix-revele.avec-explication { flex-wrap: wrap; }
.choix-revele .explication {
  flex-basis: 100%; padding-left: calc(36px + var(--espace-3));
  color: var(--c-texte-2); font-size: var(--taille-meta); font-weight: var(--graisse-moyen); overflow-wrap: anywhere;
}

/* ---------- Fin ---------- */
.ecran-fin { gap: var(--espace-2); }
.ecran-fin .titre-message { margin-bottom: var(--espace-5); font-size: var(--taille-titre-1); }
.fin-etiquette { margin: 0; color: var(--c-texte-2); font-weight: var(--graisse-moyen); }
.fin-rang { margin: 0; font-size: 64px; font-weight: var(--graisse-extra-gras); line-height: 1; color: var(--c-accent); font-variant-numeric: tabular-nums; }
.fin-sur { margin: 0; color: var(--c-texte-2); font-size: var(--taille-titre-3); font-weight: var(--graisse-demi-gras); }
.fin-points { margin: var(--espace-2) 0 0; font-size: var(--taille-titre-3); font-weight: var(--graisse-demi-gras); font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .attente-texte { animation: none; }
  .choix-btn { transition: none; }
  .choix-btn:active:not(:disabled) { transform: none; }
}