/* -------------------------------------------------------------------
   Direction artistique "Nuit europeenne" (§13) : fond sombre assume
   partout (retour utilisateur - le blanc/clair d'origine "faisait
   cheap" a cote de la mascotte et de la nav du bas repensee), bleu en
   couleur de marque, dore pour les moments forts (bonus, tete de
   classement), rose pour ce qui est personnel (serie, records). Les
   tokens generiques ci-dessous (--noir/--gris/--gris-clair/--bordure)
   sont desormais des roles "texte clair / texte attenue / surface
   sombre / bordure discrete" - garde leurs anciens noms pour ne pas
   renommer des dizaines de selecteurs, mais leurs VALEURS ont bascule.
   --blanc reste un blanc pur inchangee : reserve au texte pose sur une
   couleur vive (boutons, badges), jamais a un fond de page/carte.
   Mobile-first, pas de police ni d'icone externe (systeme uniquement)
   - simple, rapide, hors ligne. ------------------------------------- */
:root {
  --noir: #f1f2f7;
  --gris: #9aa3c9;
  --gris-clair: #161d3d;
  --bordure: rgba(255, 255, 255, .12);
  --blanc: #ffffff;
  --dore: #b8860b;
  /* "-clair" = teintes translucides (retour utilisateur, DA "Studio
     complet") plutot que des remplissages clairs opaques - pensees a
     l'origine pour un chip sur fond blanc, elles deviennent un lisere
     de couleur sur la surface sombre qui les entoure desormais partout. */
  --dore-clair: rgba(184, 134, 11, .16);
  --rouge: #b3261e;
  --rouge-clair: rgba(255, 107, 107, .14);
  /* Texte d'erreur directement sur le fond sombre de la page (pas un
     chip a fond clair, --rouge/--rouge-clair restent adaptes a ca) -
     --rouge seul est illisible (rouge fonce sur marine tres fonce). */
  --rouge-texte: #ff6b6b;
  /* Texte fonce, reserve aux quelques surfaces volontairement restees
     claires (champ de saisie) meme dans l'appli sombre. */
  --texte-sur-clair: #16181c;
  /* Surfaces "carte" sur fond sombre - une nuance plus claire que le
     fond de page (voir body), une deuxieme encore plus claire pour les
     elements imbriques/survoles. */
  --pr-surface: #141b3f;
  --pr-surface-haute: #1c2557;
  --rayon: 14px;
  --ombre: 0 4px 16px rgba(0, 0, 0, .35), 0 1px 3px rgba(0, 0, 0, .3);
}

* { box-sizing: border-box; }

body {
  margin: 0;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: radial-gradient(circle at 15% 0%, #16204f 0%, transparent 45%), var(--pr-bleu-nuit);
  background-attachment: fixed;
  color: var(--noir);
  padding-bottom: 72px; /* place pour la nav du bas */
  min-height: 100vh;
}

.conteneur { max-width: 480px; margin: 0 auto; padding: 1rem 1.1rem 2rem; }

/* Retour utilisateur : l'appli est pensee mobile-first (colonne
   centree de 480px) - sur grand ecran, les marges vides des deux
   cotes donnaient l'impression d'une page a moitie vide. La colonne
   s'elargit un peu ; le fond sombre (voir body ci-dessus) s'applique
   deja a toutes les tailles, rien de plus a faire ici. */
@media (min-width: 700px) {
  .conteneur { max-width: 620px; }
}

h1, h2, h3 { margin: 0 0 0.5rem; line-height: 1.25; }
h1 { font-size: 1.5rem; font-weight: 900; letter-spacing: -0.02em; }
h2 { font-size: 1.15rem; font-weight: 800; }
p { line-height: 1.5; color: var(--noir); }
.muted { color: var(--gris); font-size: 0.9rem; }

/* Pied de page discret (mentions legales/CGU/confidentialite) - retour
   utilisateur, Phase 7 deploiement : volontairement en bas de l'ecran
   "Comment jouer", jamais dans la nav-bas ("ca ferait tache"). */
.pied-page-legal { text-align: center; margin-top: 1.4rem; }
.pied-page-legal a { color: var(--gris); text-decoration: none; }
.pied-page-legal a:hover, .pied-page-legal a:focus-visible { color: var(--pr-bleu-eclat); text-decoration: underline; }
/* Liste des criteres de classement (page Aide) - premiere liste
   ordonnee de l'appli, pas de style herite a corriger, juste un
   rythme coherent avec les paragraphes environnants de .carte. */
ol, ul { line-height: 1.5; color: var(--noir); margin: 0.4rem 0; padding-left: 1.3rem; }
li { margin-bottom: 0.2rem; }

/* -- Entete "Nuit europeenne" avec mascotte -------------------------- */
/* Sticky (retour utilisateur : le bouton "?" devenait inaccessible des
   qu'on scrollait dans un ecran long comme le recap ou le classement -
   c'etait la vraie cause de "je ne trouve pas la page d'aide", pas un
   probleme de lien manquant). Fond marine + halo de projecteur + semis
   d'etoiles (retour utilisateur : DA "nuit europeenne" validee) -
   memes ingredients que le halo/semis deja utilises ailleurs dans
   l'app (voir .halo-scene, la mascotte elle-meme reste la seule image
   bitmap de l'appli, generee par l'utilisateur - static/img/mascotte*.png). */
.entete {
  display: flex; align-items: center; justify-content: space-between; gap: 0.5rem;
  padding: 0.75rem 1.1rem;
  position: sticky; top: 0; z-index: 15; overflow: hidden;
  background: radial-gradient(circle at 18% 20%, var(--pr-bleu-marine) 0%, var(--pr-bleu-nuit) 72%);
  border-bottom: 2px solid var(--pr-bleu-eclat);
}
.entete::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: radial-gradient(circle, rgba(255,255,255,.9) 0.7px, transparent 0.7px);
  background-size: 22px 22px;
}
/* Retour utilisateur : un clic sur le logo/nom doit ramener a
   l'accueil, comme sur la plupart des sites. */
.entete .marque { display: flex; align-items: center; gap: 0.55rem; position: relative; cursor: pointer; }
.logo-mascotte { width: 40px; height: auto; flex-shrink: 0; display: block; }
.entete .titre { font-weight: 800; font-size: 1.28rem; letter-spacing: -0.015em; color: var(--blanc); }
.entete .titre .vert { color: var(--pr-bleu-eclat); }

/* Mascotte en grand sur l'ecran de bienvenue - premiere chose vue par
   un visiteur non connecte, doit donner le ton (retour utilisateur). */
.mascotte-hero { display: block; width: 100%; max-width: 220px; height: auto; margin: 0.4rem auto 0.8rem; }
/* Retour utilisateur : "SavoirFoot" (nom du site) doit apparaitre
   clairement des l'arrivee sur l'ecran de bienvenue, pas seulement
   dans l'en-tete discret tout en haut - meme traitement que le titre
   de l'en-tete (Savoir en blanc / Foot en bleu eclat), en plus grand. */
.bienvenue-marque {
  text-align: center; font-weight: 800; font-size: 1.9rem; letter-spacing: -0.02em;
  color: var(--blanc); margin: 0.1rem 0 0.35rem;
}
.bienvenue-marque .vert { color: var(--pr-bleu-eclat); }

/* Mascotte sur la carte principale de l'accueil (les deux etats,
   deja joue / pas encore joue) - plus discrete que le hero de
   bienvenue, juste de quoi accompagner le titre de la carte. */
.accueil-carte-entete { display: flex; align-items: center; gap: 0.8rem; margin-bottom: 0.9rem; }
.accueil-carte-entete h2 { margin-bottom: 0.2rem; }
.mascotte-accueil { width: 56px; height: auto; flex-shrink: 0; }
/* Retour utilisateur : "SavoirFoot" doit aussi apparaitre pres de la
   mascotte sur l'accueil (jusque-la, seul l'en-tete tout en haut le
   montrait) - petit label au-dessus du titre de la carte, pas une
   redite du h2 de l'ecran ("Salut, X"). */
.accueil-marque-mini {
  font-size: 0.68rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.06em;
  color: var(--pr-bleu-eclat); margin: 0 0 0.15rem;
}
/* Retour utilisateur (§12 suite, idee #7) : bandeau "jour thematique" -
   meme accent or/bonus que le reste de l'appli (partage_image.py::
   BONUS_ECLAT cote carte de partage) pour rester coherent, distinct du
   bleu de marque habituel - ce jour sort du lot, la couleur doit le dire. */
.theme-badge {
  display: inline-block; font-size: 0.78rem; font-weight: 800; margin: 0.1rem 0 0;
  color: var(--pr-bonus-eclat); background: var(--pr-bonus-clair); padding: 0.15rem 0.55rem; border-radius: 999px;
}

/* Flamme de serie (profil) - rose, seul indicateur vraiment personnel
   de l'appli (retour utilisateur, DA "nuit europeenne"). */
.badge-flamme {
  display: inline-flex; align-items: center; gap: 0.35rem;
  background: var(--pr-rose-clair); color: var(--pr-rose-vif);
  padding: 0.3rem 0.7rem; border-radius: 999px; font-weight: 800; font-size: 0.98rem;
}

/* Statistiques (profil, retour utilisateur - retention) : grille de
   tuiles sur la surface imbriquee (--pr-surface-haute, deja utilisee
   pour les elements imbriques dans une carte). Chaque tuile porte sa
   propre teinte d'accent pour se distinguer d'un coup d'oeil, pas de
   bleu uniforme partout (meilleur score = vert, pire = rouge, comme le
   reste de l'appli utilise deja ces couleurs pour juste/faux). */
.profil-stats-titre { margin: 1.5rem 0 0; }
.stats-grille { display: grid; grid-template-columns: 1fr 1fr; gap: 0.7rem; margin-top: 0.7rem; }
.stat-tuile {
  background: var(--pr-surface-haute); border: 1px solid var(--bordure); border-radius: 10px;
  padding: 0.85rem 0.9rem;
}
.stat-tuile .stat-valeur { display: block; font-size: 1.6rem; font-weight: 900; color: var(--pr-bleu-eclat); letter-spacing: -0.01em; line-height: 1.15; }
.stat-tuile .stat-libelle { display: block; font-size: 0.76rem; color: var(--gris); font-weight: 700; margin-top: 0.25rem; }
.stat-tuile.meilleur .stat-valeur { color: var(--pr-vert-vif); }
.stat-tuile.pire .stat-valeur { color: var(--pr-rouge-vif); }
.stats-vide { color: var(--gris); font-size: 0.9rem; margin-top: 0.7rem; }

/* Succes/badges (§14ter, retour utilisateur - retention, idee #4) -
   grille compacte, verrouilles inclus (opacite reduite, cadenas a la
   place de l'emoji) pour donner un objectif visible plutot que de ne
   montrer que ce qui est deja obtenu. Meme accent or/bonus que le
   bandeau "jour thematique" (.theme-badge) une fois debloque. */
.succes-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 0.6rem; margin-top: 0.7rem; }
.succes-tuile {
  display: flex; flex-direction: column; align-items: center; text-align: center; gap: 0.3rem;
  padding: 0.7rem 0.4rem; border-radius: 10px; border: 1px solid var(--bordure);
  background: var(--pr-surface-haute); opacity: 0.4;
}
.succes-tuile .succes-emoji { font-size: 1.6rem; }
/* text-transform: none - la regle globale `button { text-transform:
   uppercase }` s'appliquerait sinon (.succes-tuile est un <button>
   depuis le retour utilisateur "clic/tap pour voir le mode d'emploi"),
   meme correctif que .club-tuile .club-nom. */
.succes-tuile .succes-nom { font-size: 0.68rem; font-weight: 700; color: var(--gris); line-height: 1.2; text-transform: none; }
.succes-tuile.debloque { opacity: 1; border-color: var(--pr-bonus-eclat); background: var(--pr-bonus-clair); }
.succes-tuile.debloque .succes-nom { color: var(--pr-bonus-eclat); }
.badge-flamme .icone-flamme { width: 16px; height: 16px; flex-shrink: 0; }

/* Club de coeur (retour utilisateur, retention, §14) - grille de choix
   (ecran dedie et profil) + badge compact (classement). Pas de vrais
   blasons (aucun asset a sourcer/licencier - voir clubs.py) : la
   couleur du club porte tout le poids visuel, sur un pastille ronde
   avec son code a la place d'un logo. */
.grille-clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 0.6rem; margin-top: 0.6rem; }
/* Retour utilisateur : catalogue etendu a 6 championnats (114 clubs,
   voir clubs.py) - une grille plate serait illisible, regroupee par
   championnat avec un petit intertitre (premier sans marge, les
   suivants espaces du groupe precedent). */
.grille-clubs-ligue {
  font-size: 0.72rem; font-weight: 800; text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--pr-bleu-eclat); margin: 1.4rem 0 0;
}
.grille-clubs-ligue:first-child { margin-top: 1rem; }
.club-tuile {
  display: flex; align-items: center; gap: 0.6rem; text-align: left;
  background: var(--pr-surface); border: 1.5px solid var(--bordure); border-radius: 10px;
  padding: 0.7rem 0.8rem; cursor: pointer; color: var(--noir); font: inherit;
}
.club-tuile:hover, .club-tuile:focus-visible { border-color: var(--pr-bleu-eclat); outline: none; }
.club-tuile.selectionne { border-color: var(--pr-bleu-eclat); background: var(--pr-bleu-clair); }
.club-tuile .pastille-club {
  width: 34px; height: 34px; border-radius: 50%; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 0.62rem; font-weight: 900; letter-spacing: -0.01em;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}
/* text-transform: none - la regle globale `button { text-transform:
   uppercase }` (voulue pour les libelles d'action type "VALIDER")
   rendait les noms de club illisibles en capitales ("PARIS SAINT-
   GERMAIN") ; un nom propre reste dans sa casse normale. */
.club-tuile .club-nom { font-size: 0.88rem; font-weight: 700; line-height: 1.2; text-transform: none; }

/* Badge compact - a cote d'un pseudo dans le classement. */
.badge-club {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%; flex-shrink: 0;
  font-size: 0.52rem; font-weight: 900; margin-right: 0.4rem; vertical-align: middle;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.15);
}

/* Sous-onglets "Joueurs / Clubs" du classement - memes boutons que
   .onglets mais plus discrets (deuxieme niveau de choix, pas le
   premier). */
.sous-onglets { display: flex; gap: 0.4rem; margin-bottom: 0.8rem; }
.sous-onglets button {
  flex: 1; background: transparent; color: var(--gris); border: 1.5px solid var(--bordure);
  padding: 0.45rem; border-radius: 8px; font-weight: 700; font-size: 0.82rem;
}
.sous-onglets button.actif { background: var(--pr-bleu-marine); color: var(--blanc); border-color: var(--pr-bleu-marine); }

/* Retour utilisateur : "Total / Moyenne" est un sous-choix de la vue
   "Clubs" (troisieme niveau), pas un choix de meme rang - visuellement
   plus petit, indente, en pilules (pas flex:1 pleine largeur) et
   precede d'un libelle, pour qu'on comprenne au premier coup d'oeil
   qu'il est imbrique sous "Clubs" plutot qu'aligne a cote. */
.sous-onglets-tri {
  display: flex; align-items: center; gap: 0.35rem;
  margin: -0.3rem 0 0.8rem 0.3rem;
}
.sous-onglets-tri-libelle {
  color: var(--gris); font-size: 0.72rem; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.03em; margin-right: 0.1rem;
}
.sous-onglets-tri button {
  flex: none; background: transparent; color: var(--gris); border: 1.5px solid var(--bordure);
  padding: 0.25rem 0.7rem; border-radius: 999px; font-weight: 700; font-size: 0.72rem;
}
.sous-onglets-tri button.actif { background: var(--pr-bleu-eclat); color: var(--blanc); border-color: var(--pr-bleu-eclat); }

/* Retour utilisateur : choix du championnat AVANT la grille de clubs
   (filtre plutot que scroll) - pilules qui passent a la ligne (5
   categories, largeur variable selon le nom), contrairement aux
   .sous-onglets a largeur egale qui ne conviendraient pas ici. */
.categories-club { display: flex; flex-wrap: wrap; gap: 0.4rem; margin: 0.8rem 0; }
.categories-club button {
  flex: none; background: transparent; color: var(--gris); border: 1.5px solid var(--bordure);
  padding: 0.4rem 0.9rem; border-radius: 999px; font-weight: 700; font-size: 0.78rem;
}
.categories-club button.actif { background: var(--pr-bleu-marine); color: var(--blanc); border-color: var(--pr-bleu-marine); }
.rang-ligne .club-libelle { display: block; color: var(--gris); font-size: 0.78rem; font-weight: 600; margin-top: 0.1rem; }
.profil-club-ligne { display: flex; align-items: center; gap: 0.5rem; }
.profil-club-ligne .bouton-texte { margin-left: auto; padding: 0; }

/* -- Boutons : degrades vert pelouse / argent satine, etendus a toute
   l'app (retour utilisateur : propager la DA "Prestige" partout, pas
   seulement Jeu/Recap - .bouton-principal/.bouton-or et
   .bouton-secondaire/.bouton-argent partagent desormais le meme rendu). */
button, .bouton {
  font: inherit; cursor: pointer; border: none; border-radius: 4px;
  padding: 0.8rem 1.3rem; font-weight: 800; font-size: 0.95rem;
  text-transform: uppercase; letter-spacing: 0.01em;
  transition: transform 0.08s ease, opacity 0.15s ease;
}
button:active { transform: scale(0.97); }
button:disabled { opacity: 0.5; cursor: not-allowed; }
.bouton-principal, .bouton-or {
  width: 100%;
  background: linear-gradient(180deg, var(--pr-bleu-eclat) 0%, var(--pr-bleu-vif) 55%, var(--pr-bleu-marine) 100%);
  color: var(--blanc); box-shadow: 0 8px 18px -6px var(--pr-bleu-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.bouton-principal:hover, .bouton-or:hover { background: linear-gradient(180deg, var(--pr-bleu-vif) 0%, var(--pr-bleu-marine) 100%); }
.bouton-principal:disabled, .bouton-or:disabled { background: var(--gris-clair); color: var(--gris); box-shadow: none; }
.bouton-secondaire, .bouton-argent {
  width: 100%;
  background: linear-gradient(180deg, var(--pr-argent-clair) 0%, var(--pr-argent) 100%);
  color: var(--pr-noir); box-shadow: 0 8px 18px -6px var(--pr-argent-glow), inset 0 1px 0 rgba(255,255,255,.6);
}
.bouton-texte { background: transparent; color: var(--pr-bleu-eclat); padding: 0.4rem 0.2rem; font-weight: 700; text-transform: none; letter-spacing: normal; }
.bouton-danger { background: var(--rouge-clair); color: var(--rouge-texte); text-transform: none; letter-spacing: normal; }

/* Les champs de saisie restent volontairement clairs (texte fonce sur
   fond blanc) meme dans une appli sombre - c'est LA ou le joueur tape
   sa propre reponse, la lisibilite maximale prime sur la coherence de
   fond ; --texte-sur-clair est dedie a ce cas (--noir, lui, est devenu
   clair pour le reste de l'appli, voir tout en haut). */
input[type=text], input[type=email], textarea {
  font: inherit; width: 100%; padding: 0.75rem 0.9rem; border-radius: 4px;
  border: 1.5px solid var(--pr-noir); background: var(--blanc); color: var(--texte-sur-clair); font-weight: 600;
}
input:focus, textarea:focus { outline: 3px solid var(--pr-bleu-vif); outline-offset: 1px; }
input[type=text]:disabled { background: var(--gris-clair); color: var(--gris); opacity: 0.8; border-color: var(--bordure); }
label { display: block; font-weight: 700; font-size: 0.88rem; margin: 0.9rem 0 0.35rem; }

/* Panneau "plateau" (retour utilisateur) : bordure nette + coins moins
   arrondis plutot que la carte flottante generique d'origine - garde
   une seule declaration, tous les ecrans en heritent. Fond sombre
   (--pr-surface, une nuance plus claire que le fond de page) + bordure
   discrete plutot que noire (invisible sur fond deja tres sombre). */
.carte {
  background: var(--pr-surface); border: 1.5px solid var(--bordure); border-radius: 8px;
  padding: 1.1rem; box-shadow: var(--ombre); margin-bottom: 1rem;
}

/* -- Ecrans (SPA basique, une seule page servie) --------------------*/
.ecran { display: none; }
.ecran.actif { display: block; }

/* -- Contexte du quiz (date + numero, retour utilisateur) -----------*/
.contexte-quiz { color: var(--gris); font-size: 0.85rem; text-align: center; margin-bottom: 0.6rem; }

/* -- Nav du bas : verre depoli sombre + glow (retour utilisateur -
   remplace la simple barre plate blanche, jugee "pas moderne"). L'onglet
   actif se distingue par un point lumineux (pas juste un changement de
   couleur de texte) et une icone qui "brille" legerement. ------------*/
.nav-bas {
  position: fixed; bottom: 0; left: 0; right: 0; display: none;
  background: rgba(10, 17, 40, .88); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  border-top: 1px solid rgba(255, 255, 255, .08);
  padding: 0.5rem 0 calc(0.5rem + env(safe-area-inset-bottom));
  justify-content: space-around; z-index: 10;
}
.nav-bas.actif { display: flex; }
.nav-bas button {
  background: none; border-radius: 10px; padding: 0.4rem 0.9rem;
  color: #7d84a0; font-size: 0.78rem; font-weight: 600; display: flex;
  flex-direction: column; align-items: center; gap: 0.2rem; transition: color .15s ease;
}
.nav-bas button.selectionne { color: var(--blanc); }
.nav-bas button.selectionne svg { filter: drop-shadow(0 0 6px var(--pr-bleu-eclat)); }
.nav-bas button.selectionne::after {
  content: ""; width: 4px; height: 4px; border-radius: 999px;
  background: var(--pr-bleu-eclat); box-shadow: 0 0 6px 1px var(--pr-bleu-eclat); margin-top: 1px;
}

/* -- Toasts (retour utilisateur : remplace alert(), non stylisable et
   hors DA) - empiles au-dessus du bandeau du bas. --------------------*/
#toast-conteneur {
  position: fixed; left: 0; right: 0; bottom: calc(84px + env(safe-area-inset-bottom));
  display: flex; flex-direction: column; align-items: center; gap: 0.5rem;
  z-index: 50; pointer-events: none; padding: 0 1rem;
}
.toast {
  max-width: 420px; width: 100%; background: var(--pr-surface-haute); color: var(--blanc);
  padding: 0.8rem 1.1rem; border-radius: 12px; box-shadow: var(--ombre);
  border: 1px solid var(--bordure);
  font-size: 0.88rem; font-weight: 600; text-align: center;
  opacity: 0; transform: translateY(10px); transition: opacity .25s ease, transform .25s ease;
  pointer-events: auto;
}
.toast.visible { opacity: 1; transform: translateY(0); }
.toast.toast-erreur { background: var(--rouge); border-color: var(--rouge); }
/* Succes debloque (§14ter, idee #4) - meme accent or/bonus que le
   reste des recompenses "speciales" de l'appli (.theme-badge,
   .succes-tuile.debloque). */
.toast.toast-succes { background: var(--pr-bonus-eclat); border-color: var(--pr-bonus-eclat); color: var(--pr-bleu-nuit); }
.nav-bas button svg { width: 22px; height: 22px; }

/* -- Barre de progression 1/10 -> 10/10 (§13) ------------------------*/
.progression { display: flex; gap: 4px; margin-bottom: 0.9rem; }
.progression .segment { flex: 1; height: 6px; border-radius: 3px; background: var(--gris-clair); }
.progression .segment.fait { background: var(--vert); }
.progression .segment.courant { background: var(--dore); }

/* -- Chrono ----------------------------------------------------------*/
.chrono {
  font-variant-numeric: tabular-nums; font-weight: 700; font-size: 1.4rem;
  color: var(--vert); text-align: center; margin: 0.3rem 0 1rem;
}
.chrono.urgent { color: var(--rouge); }

/* -- Statuts de reponse (recap) : voir le bloc "PRESTIGE" plus bas, qui
   redessine entierement .pastille/.verdict pour #ecran-recap - garde
   ici seulement le keyframe partage pulseAttente. ---------------------*/
@keyframes pulseAttente { 0%, 100% { opacity: 0.45; } 50% { opacity: 1; } }
@keyframes apparitionZoneReveal { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: translateY(0); } }
.zone-reveal { animation: apparitionZoneReveal 0.3s ease both; }

.ligne-recap { display: flex; justify-content: space-between; align-items: center; gap: 0.6rem; padding: 0.7rem 0; border-bottom: 1px solid var(--bordure); }
.ligne-recap:last-child { border-bottom: none; }
.ligne-recap .contenu { flex: 1; min-width: 0; }
.ligne-recap .question { font-weight: 600; font-size: 0.92rem; }
/* -- Reponse donnee + statut cote a cote (retour utilisateur : on doit
   comprendre immediatement de quelle reponse "juste"/"faux" parle) ----*/
.ligne-reponse { margin: 0.2rem 0; }
.ligne-reponse .saisie-texte { color: var(--gris); font-size: 0.85rem; }
.ligne-recap .points { font-weight: 700; white-space: nowrap; display: flex; align-items: center; gap: 0.4rem; }

/* -- Bouton VAR (contestation en un clic, §8) -------------------------*/
.bouton-var {
  background: none; border: none; font-size: 1.15rem; padding: 0.1rem 0.3rem;
  cursor: pointer; opacity: 0.35; filter: grayscale(1); transition: opacity 0.15s, filter 0.15s;
}
.bouton-var:hover { opacity: 0.7; }
.bouton-var.allume { opacity: 1; filter: grayscale(0); cursor: default; }

/* -- Choix bonus (icone ballon) ---------------------------------------*/
.choix-bonus { display: flex; align-items: center; gap: 0.6rem; padding: 0.7rem; border: 1.5px solid var(--bordure); border-radius: 8px; margin-bottom: 0.5rem; cursor: pointer; }
.choix-bonus.selectionne { border-color: var(--pr-bonus-eclat); background: var(--pr-bonus-clair); }
.choix-bonus input { width: auto; }
.icone-ballon { width: 22px; height: 22px; flex-shrink: 0; }

/* -- Classement --------------------------------------------------------*/
/* -- Podium (retour utilisateur : distinguer aussi les rangs 2 et 3,
   pas seulement le 1er) - liseré colore en bord de ligne pour reperer
   les tetes de classement d'un coup d'oeil pendant le scroll. Couleurs
   de texte "eclat"/eclaircies plutot que les tons sobres d'origine
   (penses pour du texte fonce sur blanc) - illisibles sur fond sombre. */
.rang-ligne { display: flex; align-items: center; gap: 0.7rem; padding: 0.6rem 0 0.6rem 0.6rem; border-bottom: 1px solid var(--bordure); border-left: 3px solid transparent; }
.rang-ligne:last-child { border-bottom: none; }
.rang-ligne .rang { width: 2rem; text-align: center; font-weight: 700; color: var(--gris); }
.rang-ligne.top1 { border-left-color: var(--pr-bonus-eclat); }
.rang-ligne.top1 .rang { color: var(--pr-bonus-eclat); }
.rang-ligne.top2 { border-left-color: var(--pr-argent); }
.rang-ligne.top2 .rang { color: var(--pr-argent); }
.rang-ligne.top3 { border-left-color: #d68a4f; }
.rang-ligne.top3 .rang { color: #d68a4f; }
.rang-ligne .pseudo { flex: 1; font-weight: 700; }
.rang-ligne.moi { background: var(--pr-bleu-clair); border-radius: 8px; }
/* Retour utilisateur : combien de joueurs au total sur ce classement,
   et ma position en pourcentage - sous la carte, pas dedans (une
   metadonnee sur la liste, pas une entree de plus). */
.classement-total { text-align: center; margin-top: 0.7rem; }
.classement-total strong { color: var(--pr-bleu-eclat); font-weight: 800; }
.onglets { display: flex; gap: 0.4rem; margin-bottom: 1rem; }

/* -- Navigation entre periodes + recherche (retour utilisateur) ------*/
.classement-nav-periode { display: flex; align-items: center; justify-content: center; gap: 0.6rem; margin-bottom: 0.6rem; }
.classement-nav-periode button { background: var(--gris-clair); color: var(--noir); border: none; border-radius: 999px; width: 30px; height: 30px; font-weight: 700; cursor: pointer; flex-shrink: 0; }
.classement-nav-periode button:disabled { opacity: 0.35; cursor: not-allowed; }
.classement-nav-periode p { margin: 0; text-align: center; }
.classement-recherche { margin-bottom: 0.8rem; }
.onglets button { flex: 1; background: var(--gris-clair); color: var(--gris); }
.onglets button.actif { background: var(--pr-bleu-marine); color: var(--blanc); }

.erreur { color: var(--rouge-texte); font-size: 0.88rem; margin-top: 0.5rem; }
.info { background: var(--pr-bonus-clair); color: var(--pr-bonus-eclat); padding: 0.6rem 0.8rem; border-radius: 8px; font-size: 0.85rem; margin-bottom: 0.8rem; font-weight: 600; }

/* -- Comment jouer -------------------------------------------------------*/
/* Exemple gagnant en dore (pas vert) : coherent avec le vrai rendu
   d'un bonus reussi dans le recap (badge/points dores, pas verts -
   le vert y est reserve a la reussite d'une reponse, pas au bonus). */
.regle-exemple { background: var(--pr-bonus-clair); border-radius: 8px; padding: 0.7rem 0.9rem; font-size: 0.9rem; margin: 0.6rem 0; }
.regle-exemple.penalite { background: var(--rouge-clair); }

/* -- Question bonusee dans le recap (retour utilisateur : plus visible
   qu'un simple emoji ballon) --------------------------------------------*/
.ligne-recap.bonus { background: var(--dore-clair); border-radius: 10px; padding-left: 0.6rem; margin: 0 -0.6rem; border-bottom-color: transparent; }
.puce-bonus {
  display: inline-flex; align-items: center; gap: 0.2rem; background: var(--dore); color: var(--blanc);
  font-size: 0.68rem; font-weight: 700; padding: 0.1rem 0.45rem; border-radius: 999px; margin-left: 0.4rem;
  vertical-align: middle; white-space: nowrap;
}
.ligne-recap .pts-bonus { font-weight: 700; }
.ligne-recap .pts-bonus.positif { color: var(--pr-bonus-eclat); }
.ligne-recap .pts-bonus.negatif { color: var(--rouge-texte); }
.taux-collectif { color: var(--gris); font-size: 0.78rem; margin-top: 0.15rem; }

/* -- Accueil (retour utilisateur : ecran prioritaire pour la DA) -----*/
.accueil-score-apercu { font-size: 1rem; }
.accueil-score-apercu strong { font-size: 1.9rem; font-weight: 900; color: var(--pr-bleu-eclat); letter-spacing: -0.01em; }

/* -- Calendrier personnel (accueil, retour utilisateur) : vraie grille
   de mois (7 colonnes) plutot qu'un bandeau a defiler horizontalement -
   vision d'ensemble du mois en un coup d'oeil, navigation mois par
   mois. -----------------------------------------------------------*/
.calendrier-entete { display: flex; align-items: center; justify-content: space-between; margin-bottom: 0.9rem; }
.calendrier-entete h2 { margin: 0; text-transform: capitalize; font-size: 1.08rem; font-weight: 800; letter-spacing: -0.01em; }
.calendrier-entete button {
  background: var(--pr-surface-haute); color: var(--noir); border: 1.5px solid var(--bordure); border-radius: 999px;
  width: 32px; height: 32px; font-weight: 700; cursor: pointer; flex-shrink: 0; font-size: 0.92rem;
  display: flex; align-items: center; justify-content: center; transition: background-color .15s;
}
.calendrier-entete button:hover { background: var(--pr-bleu-marine); }
.calendrier-jours-semaine { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; margin-bottom: 0.4rem; }
.calendrier-jours-semaine span { text-align: center; font-size: 0.66rem; color: var(--gris); font-weight: 700; text-transform: uppercase; letter-spacing: 0.02em; }
.calendrier-grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }

/* -- Case jour : la pastille ronde du numero porte le vrai signal
   (aujourd'hui = anneau bleu, joue = pastille pleine bleue), la case
   elle-meme reste discrete - plus lisible qu'un simple carre grise. --*/
.jour-calendrier {
  aspect-ratio: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.15rem;
  border-radius: 10px; background: var(--pr-surface-haute); border: 1px solid var(--bordure); color: var(--gris);
  cursor: default; font: inherit; padding: 0.2rem; transition: transform .12s ease;
}
.jour-calendrier.vide { background: none; border: none; visibility: hidden; }
.jour-calendrier .jc-jour {
  width: 24px; height: 24px; display: flex; align-items: center; justify-content: center;
  border-radius: 50%; font-weight: 700; font-size: 0.82rem; color: var(--noir);
}
.jour-calendrier.aujourdhui { border-color: var(--pr-bleu-eclat); }
.jour-calendrier.aujourdhui .jc-jour { box-shadow: inset 0 0 0 2px var(--pr-bleu-eclat); color: var(--pr-bleu-eclat); }
.jour-calendrier.joue { background: var(--pr-bleu-clair); border-color: var(--pr-bleu-vif); cursor: pointer; box-shadow: var(--ombre); }
.jour-calendrier.joue .jc-jour { background: var(--pr-bleu-vif); color: var(--blanc); }
.jour-calendrier.joue .jc-points { font-size: 0.6rem; font-weight: 700; color: var(--pr-bleu-eclat); }
.jour-calendrier.joue:hover { transform: translateY(-1px); }
.jour-calendrier.joue:active { transform: scale(0.94); }
.jour-calendrier.non-prepare { opacity: 0.35; border-style: dashed; }
/* Retour utilisateur : distinguer "jamais eu de quiz ce jour-la"
   (non-prepare, grise/pointille ci-dessus) de "un quiz existait, pas
   joue" - jusqu'ici les deux rendaient une case identique, aucun moyen
   de reperer un jour manque d'un coup d'oeil (inspiration : calendrier
   de latabledessavoirs). Reste bien lisible (pas d'opacite reduite,
   contrairement a non-prepare) - c'est une information a part entiere,
   pas un simple "rien a voir ici". Jamais applique a aujourd'hui ni a
   un jour futur : on n'a "manque" que ce qui est deja passe. */
.jour-calendrier.manque { border-color: var(--rouge-texte); }
.jour-calendrier.manque .jc-jour { color: var(--rouge-texte); }
.jour-calendrier.manque .jc-points { font-size: 0.6rem; font-weight: 700; color: var(--rouge-texte); opacity: .85; }

/* =====================================================================
   DIRECTION ARTISTIQUE "NUIT EUROPEENNE" - appliquee a toute l'app
   (retour utilisateur explicite : ete "Prestige" vert/pelouse, remplace
   par un bleu nuit + rose, inspires de la mascotte ballon-cerveau
   generee par l'utilisateur - voir static/img/mascotte*.png). Le bleu
   est desormais la couleur de MARQUE (boutons, bordures, bandeau,
   focus) ; le rose est reserve aux moments PERSONNELS (serie de jours
   joues, records) - jamais sur un bouton d'action ni une structure
   d'ecran. Le vert ne disparait pas : --pr-vert-vif/--pr-vert-texte
   restent un SIGNAL pur (bonne reponse en jeu/recap), plus jamais une
   couleur de marque - convention juste/faux quasi universelle,
   la retirer couterait de la clarte pendant le jeu pour un gain
   esthetique nul. Toujours pas de police/icone externe : SVG inline
   dessinees a la main (coche/croix/etoiles), memes techniques que le
   reste de l'app (voir .logo-ballon, .icone-ballon).
   ===================================================================== */
:root {
  /* Bleu nuit europeenne (couleurs echantillonnees sur la mascotte
     reelle - static/img/mascotte.png - pas inventees independamment). */
  --pr-bleu-marine: #123a7e;
  --pr-bleu-vif: #2f56d6;
  --pr-bleu-eclat: #5b8dff;
  --pr-bleu-glow: rgba(47, 86, 214, .5);
  /* Translucide (DA "Studio complet") plutot qu'un bleu quasi-blanc
     pense pour un fond de page clair - lisere de couleur sur la
     surface sombre qui l'entoure desormais (ligne "moi" du classement,
     jour joue du calendrier). */
  --pr-bleu-clair: rgba(47, 86, 214, .22);
  --pr-bleu-nuit: #0a1128;
  /* Rose de la mascotte - reserve aux temps forts personnels (voir
     .badge-flamme, confettis 10/10) : jamais la couleur de marque. */
  --pr-rose: #f890ab;
  --pr-rose-vif: #ef5586;
  --pr-rose-clair: rgba(248, 144, 171, .18);
  --pr-argent: #8b93a1;
  --pr-argent-clair: #dde1e6;
  --pr-argent-glow: rgba(139, 147, 161, .5);
  --pr-noir: #0c0d10;
  --pr-noir-satin: linear-gradient(155deg, #1c1e24 0%, #0c0d10 55%, #17181c 100%);
  --pr-rouge-vif: #d61f1f;
  --pr-rouge-glow: rgba(214, 31, 31, .5);
  --pr-vert-vif: #0ea355;
  --pr-vert-glow: rgba(14, 163, 85, .45);
  /* --pr-vert-texte (assombri, pense pour du texte sur blanc) n'est plus
     utilise depuis la DA "Studio complet" (--pr-vert-vif directement,
     voir #ecran-recap .verdict.validee_contestation) - gardee definie
     au cas ou, mais plus une variante active. */
  --pr-vert-texte: #0b7a3f;
  /* Dore fonce sobre, reserve exclusivement au marqueur "bonus" (retour
     utilisateur : le bonus ne doit pas se confondre avec les autres
     accents - un accent distinct). --pr-bonus reste utilise pour les
     chips a fond clair (toujours son propre contraste, independant du
     fond de page) ; --pr-bonus-eclat sert de variante "texte direct sur
     fond sombre" partout ailleurs. */
  --pr-bonus: #8a6d1f;
  --pr-bonus-eclat: #b08f2e;
  --pr-bonus-glow: rgba(138, 109, 31, .4);
  --pr-bonus-clair: rgba(176, 143, 46, .16);
}


/* -- Typographie imposante pour titres/scores de ces deux ecrans ----*/
#ecran-jeu h2, #ecran-recap h1, .plaque-score .valeur {
  font-weight: 900; letter-spacing: -0.02em;
}

/* -- Ecran Jeu : halo de projecteur derriere la question -------------*/
#ecran-jeu .contexte-quiz {
  font-weight: 700; letter-spacing: .08em; text-transform: uppercase; font-size: .72rem; color: var(--pr-bleu-eclat);
}

.halo-scene { position: relative; padding-top: 0.4rem; }
.halo-scene::before {
  content: ""; position: absolute; inset: -20px -10px auto -10px; height: 260px;
  background: radial-gradient(ellipse at 50% 0%, var(--pr-bleu-glow) 0%, rgba(47,128,80,0) 72%);
  filter: blur(6px); pointer-events: none; z-index: 0;
}
/* Panneau "plateau" du jeu (retour utilisateur, DA "Studio complet") :
   surface elevee + cadre bleu eclat lumineux plutot que le cadre noir
   sur blanc d'origine (pense pour un fond de page blanc - un cadre noir
   sur fond deja tres sombre serait invisible). Reste la zone la plus
   critique en lisibilite (saisie sous chrono) : contraste verifie,
   texte de la question repasse en clair. */
.panneau-jeu {
  position: relative; z-index: 1; background: var(--pr-surface-haute);
  border: 2px solid var(--pr-bleu-eclat); border-radius: 6px;
  padding: 1.3rem 1.2rem 1.2rem; margin-bottom: 1rem;
  box-shadow: 0 0 0 1px var(--pr-bleu-glow), 0 18px 40px -14px rgba(0,0,0,.6);
}
.panneau-jeu::before {
  content: ""; display: block; height: 5px; margin: -1.3rem -1.2rem 1rem;
  background: linear-gradient(90deg, var(--pr-bleu-marine) 0%, var(--pr-bleu-eclat) 50%, var(--pr-bleu-marine) 100%);
  border-radius: 4px 4px 0 0;
}
#ecran-jeu #jeu-question {
  /* Retour utilisateur : le gras herite du h2 global (800, tres lourd)
     rendait le texte de la question difficile a lire - poids plus
     sobre ici specifiquement, la taille/le contraste suffisent deja a
     la faire ressortir sur le panneau. */
  font-size: 1.5rem; font-weight: 600; line-height: 1.3; color: var(--blanc);
}

/* -- Chrono : badge circulaire sombre, tension croissante -----------*/
.chrono-scene { display: flex; justify-content: center; margin: 0.2rem 0 0.8rem; }
#ecran-jeu .chrono {
  position: relative; z-index: 1; display: flex; align-items: center; justify-content: center;
  width: 74px; height: 74px; border-radius: 50%; background: var(--pr-noir-satin);
  color: var(--blanc); font-size: 1.7rem; font-weight: 900;
  box-shadow: 0 0 0 3px var(--pr-bleu-eclat), 0 0 22px 2px var(--pr-bleu-glow);
  transition: box-shadow .3s ease;
}
#ecran-jeu .chrono.tension-haute {
  box-shadow: 0 0 0 3px var(--pr-bleu-vif), 0 0 26px 6px var(--pr-bleu-glow);
  animation: pouls-tension 1.1s ease-in-out infinite;
}
#ecran-jeu .chrono.urgent, #ecran-jeu .chrono.tension-critique {
  box-shadow: 0 0 0 3px var(--pr-rouge-vif), 0 0 30px 8px var(--pr-rouge-glow);
  animation: pouls-tension 0.55s ease-in-out infinite;
}
@keyframes pouls-tension { 0%, 100% { transform: scale(1); } 50% { transform: scale(1.07); } }

/* -- Barre de progression : jalons style "etapes de plateau" --------*/
#ecran-jeu .progression { gap: 3px; margin-bottom: 0.5rem; }
#ecran-jeu .progression .segment { height: 5px; border-radius: 2px; background: var(--bordure); }
#ecran-jeu .progression .segment.fait { background: var(--pr-argent); }
#ecran-jeu .progression .segment.courant { background: var(--pr-bleu-vif); box-shadow: 0 0 8px 1px var(--pr-bleu-glow); }

/* -- Champ de reponse + boutons imposants -----------------------------*/
#ecran-jeu input[type=text] {
  border: 2px solid var(--pr-noir); border-radius: 4px; font-weight: 600; font-size: 1.05rem; padding: 0.85rem 0.9rem;
}
#ecran-jeu input[type=text]:focus { outline: 3px solid var(--pr-bleu-vif); outline-offset: 1px; }
#ecran-jeu input[type=text]:disabled { border-color: var(--bordure); }

/* -- Barre de temps sous le champ (retour utilisateur) : redondante
   avec le chrono en haut, mais visible du coin de l'oeil pendant la
   saisie sans avoir a lever les yeux. Purement decorative, comme le
   chrono - le vrai arbitrage du temps reste cote serveur. --------------*/
.barre-temps { height: 5px; background: var(--gris-clair); border-radius: 3px; overflow: hidden; margin-top: 0.5rem; }
.barre-temps-remplissage {
  height: 100%; width: 100%; background: var(--pr-bleu-vif);
  transition: width 1s linear, background-color 0.3s ease;
}
.barre-temps-remplissage.tension-haute { background: var(--pr-bonus-eclat); }
.barre-temps-remplissage.tension-critique { background: var(--pr-rouge-vif); }

.aide-saisie { font-size: 0.78rem; margin-top: 0.4rem; margin-bottom: 0; }

.jeu-actions { margin-top: 0.8rem; display: flex; align-items: center; gap: 0.7rem; }
.jeu-actions .bouton-or { flex: 1; margin: 0; }
.bouton-passer {
  background: none; border: none; color: var(--gris); font-weight: 700; font-size: 0.85rem;
  text-decoration: underline; text-underline-offset: 2px; padding: 0.5rem 0.2rem;
}
.bouton-passer:disabled { opacity: 0.4; text-decoration: none; }

/* .bouton-or/.bouton-argent fusionnes avec .bouton-principal/.bouton-secondaire
   (voir tout en haut du fichier) - meme rendu partout desormais. */
#jeu-feedback { font-weight: 700; letter-spacing: .02em; text-align: center; }

/* =====================================================================
   Ecran Recapitulatif
   ===================================================================== */
#ecran-recap h1 { display: none; } /* la plaque de score devient le titre visuel principal */

/* -- Plaque de score : traitement "argent/noir", au-dessus meme de
   l'or (reserve aux enjeux encore plus forts, retour utilisateur) ---*/
/* Retour utilisateur : l'anneau/halo argente d'origine ("Studio
   complet", pense pour detacher la plaque noire d'une page BLANCHE)
   ne collait plus a la DA "Nuit europeenne" - lisait comme un simple
   encart noir. Bascule sur l'or deja etabli ailleurs dans l'appli
   (--pr-bonus-eclat/--pr-bonus, la teinte des bonus/recompenses) pour
   un vrai effet "plaque de trophee". Le chiffre du score reste blanc
   (lisibilite maximale du chiffre hero), seuls le cadre/halo et
   l'etiquette passent dores. */
.plaque-score {
  position: relative; background: var(--pr-noir-satin); border-radius: 8px; padding: 1.4rem 1.3rem 1.2rem;
  margin-bottom: 1rem; text-align: center; overflow: hidden;
  box-shadow: 0 0 0 1.5px var(--pr-bonus-eclat), 0 0 34px 3px rgba(176,143,46,.32), 0 20px 40px -18px rgba(0,0,0,.6);
}
.plaque-score::before {
  content: ""; position: absolute; inset: 0;
  background: linear-gradient(115deg, transparent 30%, rgba(255,255,255,.14) 45%, transparent 60%);
}
.plaque-score .etiquette { position: relative; color: var(--pr-bonus-eclat); font-size: .72rem; font-weight: 700; letter-spacing: .16em; text-transform: uppercase; }
.plaque-score .valeur { position: relative; color: var(--blanc); font-size: 3.1rem; line-height: 1.05; margin: .15rem 0; text-shadow: 0 0 24px rgba(176,143,46,.5); }
.plaque-score .sous-titre { position: relative; color: var(--pr-argent-clair); font-size: .88rem; font-weight: 600; }

/* Confettis sur un score parfait (10/10) - retour utilisateur, DA
   "nuit europeenne" : declenchement unique et precis (voir
   afficherRecap), jamais une animation permanente. Couleurs des
   moments forts de l'appli (bleu, or, argent, rose) - .plaque-score a
   deja overflow:hidden, les pieces tombantes sont naturellement
   coupees a ses bords. */
.confetti-conteneur { position: absolute; inset: 0; pointer-events: none; z-index: 2; }
.confetti-piece {
  position: absolute; top: -12px; width: 7px; height: 12px; border-radius: 1px; opacity: 0;
  animation: confetti-tombe 1.7s ease-in forwards;
}
@keyframes confetti-tombe {
  0% { transform: translateY(0) rotate(0deg); opacity: 1; }
  100% { transform: translateY(160px) rotate(360deg); opacity: 0; }
}

.ligne-plaque-var { text-align: center; margin: 0 0 1rem; }

/* -- Liste des questions : panneau "plateau", pas une carte flottante.
   Bordure eclat (comme le panneau de jeu) plutot que noire - invisible
   sur un fond de page desormais tout aussi sombre. -------------------*/
#ecran-recap #recap-liste {
  background: var(--pr-surface); border: 2px solid var(--pr-bleu-marine); border-radius: 6px;
  padding: 0 1.1rem; box-shadow: 0 14px 30px -18px rgba(0,0,0,.5);
}

#ecran-recap .ligne-recap { position: relative; display: flex; align-items: flex-start; gap: 0.75rem; padding: 0.9rem 0; }
#ecran-recap .ligne-recap.bonus { background: linear-gradient(90deg, var(--pr-bonus-clair) 0%, transparent 85%); margin: 0 -1.1rem; padding-left: 1.1rem; padding-right: 1.1rem; border-radius: 4px; }
#ecran-recap .ligne-recap .contenu { flex: 1; min-width: 0; }
#ecran-recap .ligne-recap .question { font-size: .98rem; font-weight: 700; color: var(--blanc); }

/* -- Pastille de resultat (retour utilisateur, mot exact) : "sans
   pastille" pendant l'attente - un simple contour vide, presque
   invisible, garde uniquement pour ne pas faire sauter la mise en
   page - PUIS un disque plein verte/rouge avec coche/croix (SVG
   dessinee a la main) apparait au moment du reveal. ------------------*/
.pastille {
  flex-shrink: 0; width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center;
  background: transparent; box-shadow: inset 0 0 0 1.5px var(--bordure); transition: transform .15s ease;
}
.pastille svg { width: 16px; height: 16px; }
.pastille.attente { animation: pulseAttente 1.6s ease-in-out infinite; }
.pastille.revele-juste { background: var(--pr-vert-vif); box-shadow: 0 0 0 2px var(--blanc), 0 0 14px 2px var(--pr-vert-glow); }
.pastille.revele-faux { background: var(--pr-rouge-vif); box-shadow: 0 0 0 2px var(--blanc), 0 0 14px 2px var(--pr-rouge-glow); }
.pastille.pop { animation: popPastille 0.45s cubic-bezier(.34, 1.56, .64, 1) both; }
@keyframes popPastille { 0% { transform: scale(.4); } 55% { transform: scale(1.25); } 100% { transform: scale(1); } }

/* -- Verdict sobre (retour utilisateur : la pastille coche/croix suffit
   deja a dire juste/faux, pas besoin d'un second signal en couleur
   partout) : la reponse fausse est simplement barree, et la solution
   s'affiche a cote en texte neutre - le vert reste reserve a la reussite
   (pastille + VAR accepte), jamais a un simple rappel de la reponse. --*/
#ecran-recap .ligne-reponse .saisie-texte { font-weight: 600; display: block; }
#ecran-recap .ligne-reponse .saisie-texte.barree { text-decoration: line-through; text-decoration-thickness: 1.5px; color: var(--gris); font-weight: 500; }
/* Toujours sur sa propre ligne, sous la reponse donnee - jamais a cote
   (retour utilisateur : la position doit etre la meme quelle que soit
   la longueur du texte, "a cote" ne peut pas le garantir a chaque fois
   sur mobile). ---------------------------------------------------------*/
#ecran-recap .verdict { display: block; font-size: .84rem; color: var(--gris); font-style: italic; margin-top: .2rem; }
/* --pr-vert-texte (assombri, pense pour du texte sur blanc) illisible
   sur fond sombre - --pr-vert-vif (deja utilise pour la pastille juste)
   sert desormais aussi ici, DA "Studio complet". */
#ecran-recap .verdict.validee_contestation { color: var(--pr-vert-vif); font-weight: 800; font-style: normal; text-transform: uppercase; font-size: .76rem; letter-spacing: .03em; }
#ecran-recap .puce-bonus {
  background: linear-gradient(180deg, var(--pr-bonus-eclat), var(--pr-bonus)); color: var(--blanc); font-weight: 800;
  box-shadow: 0 0 10px 1px var(--pr-bonus-glow);
}
#ecran-recap .points { font-weight: 800; }
#ecran-recap .pts-bonus.positif { color: var(--pr-bonus-eclat); }
#ecran-recap .pts-bonus.negatif { color: var(--pr-rouge-vif); }

/* -- Badge VAR façon plaque TV officielle : carre noir, texte blanc,
   bordures nettes, pas d'icone (retour utilisateur, remplace le
   drapeau emoji). Bordure discrete ajoutee (DA "Studio complet") : sans
   elle, --pr-noir se fondrait dans un fond de page presque aussi
   sombre. --------------------------------------------------------------*/
.badge-var {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 24px; background: var(--pr-noir); color: var(--blanc);
  font-size: .58rem; font-weight: 900; letter-spacing: .02em; border-radius: 2px;
  border: 1px solid var(--bordure); cursor: pointer; opacity: .4; filter: grayscale(.3); transition: opacity .15s, filter .15s, box-shadow .15s;
}
.badge-var:hover { opacity: .75; }
.badge-var.allume { opacity: 1; filter: none; cursor: default; box-shadow: 0 0 0 2px var(--pr-bleu-marine), 0 0 10px 1px var(--pr-bleu-glow); animation: pouls-tension 1.6s ease-in-out infinite; }

/* -- Boutons de bas d'ecran (partager / classement) -------------------*/
#ecran-recap #recap-partager { width: 100%; margin-bottom: .6rem; }
#ecran-recap #recap-voir-classement { width: 100%; }