/* Police Cinzel (SIL Open Font License 1.1, licence dans polices/OFL-Cinzel.txt), hébergée sur le site :
   aucun appel à Google Fonts. Police variable : un même fichier couvre les graisses 700 et 900. */
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../polices/cinzel-latin-ext.woff2") format("woff2"); unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: "Cinzel"; font-style: normal; font-weight: 400 900; font-display: swap; src: url("../polices/cinzel-latin.woff2") format("woff2"); unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }

:root {
  --fond: #0b1430;
  --fond-2: #13204a;
  --carte: #18275a;
  --bord: #2a3d7a;
  --texte: #eef2ff;
  --texte-doux: #a9b4d8;
  --or: #f5c542;
  --bleu: #3d8bff;
  --vert: #2ecc71;
  --rouge: #ff5d5d;
  --orange: #ffa94d;
  --rayon: 14px;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  min-height: 100vh;
  font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  color: var(--texte);
  background: radial-gradient(ellipse at top, var(--fond-2), var(--fond) 70%) fixed;
}

button { font: inherit; cursor: pointer; }
button:disabled { cursor: not-allowed; opacity: 0.5; }

/* En-tête */
.entete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  border-bottom: 1px solid var(--bord);
}
.logo { white-space: nowrap; font-size: 1.4rem; font-weight: 800; letter-spacing: 0.5px; background: none; border: none; color: var(--texte); padding: 0; }
.logo span { color: var(--or); }
nav { display: flex; flex-wrap: wrap; justify-content: flex-end; align-items: center; gap: 8px; }
.compte-actif { display: flex; align-items: center; gap: 4px; margin-left: 8px; padding-left: 12px; border-left: 1px solid var(--bord); font-weight: 600; }
.compte-actif .btn-lien { font-size: 0.85rem; }
nav button {
  background: none;
  border: 1px solid transparent;
  color: var(--texte-doux);
  padding: 6px 14px;
  border-radius: 999px;
}
nav button.actif { color: var(--texte); border-color: var(--bord); background: var(--carte); }

main { max-width: 860px; margin: 0 auto; padding: 24px 16px 48px; }

.ecran { display: none; }
.ecran.actif { display: block; }

.carte {
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 24px;
}
h1 { margin: 0 0 16px; font-size: 2rem; color: var(--or); }
h2 { margin: 32px 0 12px; font-size: 1.2rem; }
.sous-titre { color: var(--texte-doux); margin-top: -8px; }

/* Accueil */
.accueil-entete { text-align: center; padding: 24px 0 32px; }
.accueil-entete h1 { font-size: 2.6rem; color: var(--texte); margin-bottom: 8px; }
.accueil-entete h1 span { color: var(--or); }
.accueil-entete .sous-titre { margin: 0; }
.categories { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 16px; }
.categorie {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  text-align: left;
  padding: 24px;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: var(--carte);
  color: var(--texte);
  transition: border-color 0.15s, transform 0.15s;
}
.categorie:hover, .categorie:focus-visible { border-color: var(--or); transform: translateY(-2px); }
.categorie-icone { font-size: 2.2rem; }
.categorie-titre { font-size: 1.35rem; font-weight: 800; }
.categorie-texte { color: var(--texte-doux); line-height: 1.4; }

/* Catalogues (jeux, entraînements) */
.catalogue { display: flex; flex-direction: column; gap: 10px; }
.jeu-carte {
  display: flex;
  align-items: center;
  gap: 16px;
  width: 100%;
  text-align: left;
  padding: 16px;
  border-radius: 12px;
  border: 1px solid var(--bord);
  background: var(--fond);
  color: var(--texte);
}
button.jeu-carte:hover, button.jeu-carte:focus-visible { border-color: var(--or); }
.jeu-carte.bientot { opacity: 0.55; }
.jeu-icone { font-size: 2rem; flex-shrink: 0; }
.jeu-infos { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.jeu-nom { font-weight: 800; font-size: 1.1rem; }
.jeu-texte { color: var(--texte-doux); font-size: 0.9rem; line-height: 1.4; }
.jeu-etat { flex-shrink: 0; font-size: 0.8rem; font-weight: 700; padding: 4px 12px; border-radius: 999px; border: 1px solid var(--bord); color: var(--texte-doux); }
.jeu-etat.dispo { background: var(--or); border-color: var(--or); color: #1b1600; }
.retour-lien { padding: 0; margin-bottom: 8px; }

/* Entraînement */
.choix { border: none; padding: 0; margin: 0 0 20px; }
.choix legend { font-weight: 600; margin-bottom: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 12px; width: 100%; }
.choix-raccourcis { font-weight: 400; font-size: 0.85rem; }
.choix-raccourcis .btn-lien { padding: 0 4px; }
.puces { display: flex; flex-wrap: wrap; gap: 8px; }
.puce input { position: absolute; opacity: 0; pointer-events: none; }
.puce span {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 12px;
  border-radius: 999px;
  border: 1px solid var(--bord);
  background: var(--fond);
  color: var(--texte-doux);
  cursor: pointer;
  user-select: none;
}
.puce .compte { font-size: 0.75rem; opacity: 0.8; font-variant-numeric: tabular-nums; }
.puce input:checked + span { border-color: var(--or); color: var(--texte); box-shadow: 0 0 0 1px var(--or) inset; }
.puce input:focus-visible + span { outline: 2px solid var(--bleu); }
.note.gauche { text-align: left; margin-bottom: 12px; }
.interrupteur + .note { margin-top: 12px; }

.entrainement-barre .score { color: var(--vert); }
.progression { height: 6px; background: var(--carte); border-radius: 3px; overflow: hidden; margin-bottom: 16px; }
.progression > div { height: 100%; width: 0; background: var(--or); transition: width 0.3s; }
.correction { font-weight: 600; }
.correction.correct { color: var(--vert); }
.correction.faux { color: var(--rouge); }
.correction.passe { color: var(--orange); }
.centre-bloc { display: block; margin: 20px auto 0; }
.resultat.entrainement { color: var(--bleu); }

/* Face-à-face */
.ff-objectif { text-align: center; color: var(--texte-doux); margin: 8px 0 0; font-size: 0.9rem; }
#ff-texte { min-height: 2.8em; }
#ff-texte .curseur { display: inline-block; width: 0.5em; height: 1.1em; margin-left: 4px; vertical-align: -0.15em; background: var(--or); animation: clignote 0.7s steps(1) infinite; }
#ff-texte .coupe { color: var(--or); }
#ff-texte .reste { color: var(--texte-doux); }
@keyframes clignote { 50% { opacity: 0; } }
.ff-etat { min-height: 1.4em; margin: 0 0 10px; font-weight: 600; color: var(--or); }
.ff-chrono { margin-bottom: 12px; }
.btn-buzz {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  width: 150px;
  height: 150px;
  margin: 8px auto 0;
  border-radius: 50%;
  border: 6px solid #8f1d1d;
  background: radial-gradient(circle at 35% 30%, #ff7a7a, #e02424 60%, #a51b1b);
  color: #fff;
  font-size: 1.8rem;
  font-weight: 900;
  letter-spacing: 1px;
  box-shadow: 0 8px 0 #6b1414, 0 12px 24px rgba(0, 0, 0, 0.4);
  transition: transform 0.05s, box-shadow 0.05s;
}
.btn-buzz small { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 0.7rem; font-weight: 600; opacity: 0.85; letter-spacing: 0; }
/* Partie à deux : un buzzer par joueur (rouge pour le joueur 1, bleu pour le joueur 2) */
.ff-buzzers { display: flex; justify-content: center; gap: 28px; flex-wrap: wrap; }
.ff-buzzers .btn-buzz { margin: 8px 0 0; }
.btn-buzz.joueur-2 { border-color: #1d3f8f; background: radial-gradient(circle at 35% 30%, #8ab8ff, #2f6fe0 60%, #1b3fa5); box-shadow: 0 8px 0 #142f6b, 0 12px 24px rgba(0, 0, 0, 0.4); }
.btn-buzz.joueur-2:active { box-shadow: 0 2px 0 #142f6b, 0 4px 10px rgba(0, 0, 0, 0.4); }
.btn-buzz:active { transform: translateY(6px); box-shadow: 0 2px 0 #6b1414, 0 4px 10px rgba(0, 0, 0, 0.4); }
.question.buzz { animation: secousse 0.35s; }
@keyframes secousse { 25% { transform: translateX(-6px); } 50% { transform: translateX(6px); } 75% { transform: translateX(-3px); } }
@media (prefers-reduced-motion: reduce) {
  #ff-texte .curseur { animation: none; }
  .question.buzz { animation: none; }
}

/* Pause */
.barre-jeu { display: flex; justify-content: flex-end; margin-bottom: 10px; }
.btn-pause {
  background: var(--carte);
  border: 1px solid var(--bord);
  color: var(--texte);
  border-radius: 999px;
  padding: 6px 16px;
  font-weight: 600;
}
.btn-pause:hover, .btn-pause:focus-visible { border-color: var(--or); }
.pause {
  position: fixed;
  inset: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: rgba(6, 11, 30, 0.94);
  backdrop-filter: blur(10px);
}
.pause-boite {
  width: 100%;
  max-width: 400px;
  text-align: center;
  background: var(--carte);
  border: 1px solid var(--bord);
  border-radius: var(--rayon);
  padding: 28px 24px 16px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}
.pause-icone { font-size: 2.6rem; }
.pause-boite h2 { margin: 0; font-size: 1.6rem; color: var(--or); }
.pause-boite p { margin: 0 0 8px; color: var(--texte-doux); }
body.en-pause .q-texte { visibility: hidden; }
body.en-pause .btn-go .anneau,
body.en-pause #ff-texte .curseur { animation-play-state: paused; }

/* Entraînement : disposition des boutons */
.entrainement-barre { font-weight: 600; margin-bottom: 8px; display: grid; grid-template-columns: 1fr auto auto; align-items: center; gap: 16px; }
.btn-discret {
  background: none;
  border: 1px solid transparent;
  color: var(--texte-doux);
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.9rem;
}
.btn-discret:hover, .btn-discret:focus-visible { color: var(--texte); border-color: var(--bord); }
kbd {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 6px;
  border-radius: 4px;
  border: 1px solid currentColor;
  font: inherit;
  font-size: 0.7em;
  font-weight: 600;
  opacity: 0.6;
  vertical-align: 0.1em;
}
.ent-form { display: flex; flex-direction: column; align-items: flex-start; gap: 10px; }
.ligne-saisie { display: flex; gap: 10px; width: 100%; }
.ligne-saisie input { flex: 1; min-width: 0; font-size: 1.15rem; }
.ligne-saisie .btn-principal { flex-shrink: 0; }
.ent-apres { display: flex; flex-direction: column; gap: 14px; }
.ent-apres .correction { margin: 0; padding: 12px 14px; border-radius: 10px; background: var(--fond); }
.barre-lancement {
  position: sticky;
  bottom: 0;
  margin: 20px -24px -24px;
  padding: 14px 24px 20px;
  background: var(--carte);
  border-top: 1px solid var(--bord);
  border-radius: 0 0 var(--rayon) var(--rayon);
}
.barre-lancement .note { margin: 0 0 10px; }
@media (max-width: 560px) {
  .ligne-saisie { flex-direction: column; }
  .ligne-saisie .btn-principal { width: 100%; }
  .barre-lancement { margin: 20px -18px -18px; padding: 12px 18px 16px; }
  kbd { display: none; }
}

/* Mode invité */
.bandeau-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px 16px;
  margin-bottom: 16px;
  padding: 14px 18px;
  border-radius: var(--rayon);
  border: 1px dashed var(--bord);
  background: var(--fond-2);
}
.bandeau-invite p { margin: 0; color: var(--texte-doux); flex: 1 1 320px; }
.bandeau-invite strong { color: var(--texte); }
.compte-actif .cache { display: none; }

/* Défi du jour : bandeau de l'accueil */
.bandeau-defi {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  margin-bottom: 16px;
  padding: 14px 18px;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid var(--or);
  background: linear-gradient(90deg, rgba(245, 197, 66, 0.14), var(--carte) 60%);
  color: var(--texte);
}
.bandeau-defi:hover, .bandeau-defi:focus-visible { box-shadow: 0 0 0 1px var(--or) inset; }
.bandeau-defi-icone { font-size: 1.8rem; }
.bandeau-defi-texte { flex: 1; display: block; line-height: 1.5; }
.bandeau-defi-texte small { display: block; }
.bandeau-defi-texte small { color: var(--texte-doux); }
.cartes-classe .colisee-texte, .tournoi-texte { align-self: stretch; }
#accueil-theme { color: var(--or); font-weight: 700; }

/* Défi du jour : écran */
.dj-serie { color: var(--orange); font-weight: 700; margin-left: 8px; }
.dj-theme-bloc { display: flex; flex-direction: column; align-items: center; gap: 4px; margin: 8px 0 20px; padding: 18px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); }
.dj-theme-label { color: var(--texte-doux); text-transform: uppercase; letter-spacing: 1px; font-size: 0.75rem; }
.dj-theme { font-size: 1.8rem; font-weight: 800; color: var(--or); }
.dj-fait { padding: 16px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); }
.dj-score { font-size: 2rem; font-weight: 800; margin: 0 0 4px; }
.dj-historique { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dj-historique li { display: flex; align-items: center; gap: 12px; padding: 8px 12px; border-radius: 8px; background: var(--fond); }
.dj-h-date { color: var(--texte-doux); min-width: 90px; }
.dj-h-points { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }

/* Quiz à points */
.qz-progression { color: var(--texte-doux); font-weight: 400; }
.qz-chrono-ligne { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.qz-chrono { flex: 1; }
.qz-chrono > div { transition: width 0.1s linear; }
.qz-chrono.urgent > div { background: var(--rouge); }
.qz-secondes { min-width: 3em; text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.correction.approchee { color: var(--orange); }
.ligne-points { margin-left: auto; font-weight: 700; color: var(--or); }
.resultat.points { color: var(--or); }
#qzf-tuiles .tuiles { margin-bottom: 16px; }
#qzf-extra:not(:empty) { margin: 16px 0; }

/* Défi entre amis */
.zone-lien { display: flex; flex-direction: column; gap: 10px; padding: 16px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); }
.zone-lien h2 { margin: 0; font-size: 1.05rem; }
.zone-lien input[type="text"] { font-size: 0.85rem; color: var(--texte-doux); }
.zone-lien-etat { color: var(--vert); font-weight: 600; min-height: 1.2em; }
.zone-lien > .btn-secondaire { align-self: flex-start; }
.defi-recu { text-align: center; display: flex; flex-direction: column; gap: 8px; padding: 12px 0; }
.defi-recu-titre { font-size: 1.6rem; font-weight: 800; margin: 0; }
.defi-recu-score { font-size: 1.3rem; font-weight: 700; color: var(--or); }
.duel { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; }
.duel-joueur { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 14px; border-radius: var(--rayon); background: var(--fond); border: 2px solid var(--bord); }
.duel-joueur.gagnant { border-color: var(--or); }
.duel-joueur.gagnant .duel-nom::before { content: "👑 "; }
.duel-nom { font-weight: 600; }
.duel-score { font-size: 1.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
#da-contenu > .btn-principal { margin: 12px 0 8px; }

/* Colisée : la case de l'accueil, fond blanc et marches dorées animées */
.colisee-carte {
  grid-column: 1 / -1;
  flex-direction: row;
  align-items: center;
  gap: 24px;
  background: #ffffff;
  border-color: #e8d28a;
  color: #1a2147;
  overflow: hidden;
  position: relative;
}
.colisee-carte:hover, .colisee-carte:focus-visible { border-color: #c9971c; }
.colisee-carte .categorie-titre { color: #1a2147; }
.colisee-carte .categorie-texte { color: #4a5275; }
.colisee-texte { display: flex; flex-direction: column; gap: 8px; flex: 1; min-width: 0; }
.colisee-etat { font-weight: 700; color: #8a6510; }
.colisee-jauge { display: block; height: 8px; border-radius: 4px; background: #f3ead0; overflow: hidden; }
.colisee-jauge > span { display: block; height: 100%; width: 0; background: linear-gradient(90deg, #c9971c, #f5c542); border-radius: 4px; }
.colisee-carte.ouvert { animation: lueur-or 2.4s ease-in-out infinite; }
/* Mode classé en construction (mise en ligne statique) : cartes visibles mais inactives, état écrit en clair */
.tournoi-carte.en-construction, .colisee-carte.en-construction { cursor: default; filter: saturate(0.45) brightness(0.85); transform: none; }
.tournoi-carte.en-construction .tournoi-etat { color: #f1e6c8; }
@keyframes lueur-or {
  50% { box-shadow: 0 0 0 2px #f5c542, 0 0 32px rgba(245, 197, 66, 0.55); }
}

/* Décor : arches + marches dorées (de la plus étroite en haut à la plus large en bas) */
.colisee-decor {
  position: relative;
  flex-shrink: 0;
  width: 220px;
  height: 150px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-end;
  gap: 4px;
}
.colisee-decor .arches { display: flex; gap: 6px; margin-bottom: 6px; }
.colisee-decor .arches span {
  width: 18px;
  height: 26px;
  border: 3px solid #d9b44a;
  border-bottom: none;
  border-radius: 10px 10px 0 0;
}
.marche {
  display: block;
  height: 14px;
  border-radius: 3px;
  background: linear-gradient(100deg, #b8860b 0%, #f5c542 35%, #fff4c2 50%, #f5c542 65%, #b8860b 100%);
  background-size: 250% 100%;
  box-shadow: 0 3px 0 #9c7108;
  animation: reflet-marche 3.2s ease-in-out infinite;
}
.marche.m1 { width: 40%; animation-delay: 0.8s; }
.marche.m2 { width: 55%; animation-delay: 0.6s; }
.marche.m3 { width: 70%; animation-delay: 0.4s; }
.marche.m4 { width: 85%; animation-delay: 0.2s; }
.marche.m5 { width: 100%; animation-delay: 0s; }
/* Le reflet part de la marche du bas et « monte » l'escalier. */
@keyframes reflet-marche {
  0% { background-position: 100% 0; }
  45%, 100% { background-position: -50% 0; }
}
.eclat {
  position: absolute;
  width: 10px;
  height: 10px;
  background: #f5c542;
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: scintille 2.6s ease-in-out infinite;
}
.eclat.e1 { top: 8px; left: 18%; }
.eclat.e2 { top: 30px; right: 14%; animation-delay: 0.9s; }
.eclat.e3 { top: 64px; left: 6%; animation-delay: 1.7s; width: 7px; height: 7px; }
@keyframes scintille {
  0%, 100% { opacity: 0; transform: scale(0.4) rotate(0deg); }
  50% { opacity: 1; transform: scale(1) rotate(45deg); }
}
@media (prefers-reduced-motion: reduce) {
  .marche, .eclat, .colisee-carte.ouvert { animation: none; }
  .eclat { opacity: 0.8; }
}

/* Colisée : l'écran dédié (scène, portes, boss, classement, médailles, armoire, podium) est dans css/colisee.css */
.recompense { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 20px; border-radius: var(--rayon); background: #ffffff; color: #1a2147; text-align: center; }
.recompense-icone { font-size: 3.4rem; }
.recompense-nom { font-size: 1.4rem; font-weight: 800; }
.recompense .note { color: #4a5275; margin: 0; }

@media (max-width: 560px) {
  .colisee-carte { flex-direction: column; align-items: stretch; }
  .colisee-decor { width: 100%; height: 120px; }
  .duel { grid-template-columns: 1fr; }
}

/* Rangée « classé » de l'accueil : Tournoi (sombre) + Colisée (blanc et or) */
.cartes-classe { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cartes-classe .colisee-carte { grid-column: auto; flex-direction: column; align-items: stretch; gap: 12px; }
.cartes-classe .colisee-decor { width: 100%; height: 130px; }

/* Tournoi : carte sombre, compétition médiévale et chevaleresque */
.tournoi-carte {
  position: relative;
  overflow: hidden;
  gap: 12px;
  background:
    radial-gradient(ellipse at 50% 0%, rgba(150, 30, 40, 0.35), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.025) 0 2px, transparent 2px 28px),
    repeating-linear-gradient(90deg, rgba(255, 255, 255, 0.02) 0 2px, transparent 2px 56px),
    linear-gradient(180deg, #1b1116 0%, #0b0709 100%);
  border: 1px solid #5a1e24;
  color: #e9dcc0;
}
.tournoi-carte:hover, .tournoi-carte:focus-visible { border-color: #c9971c; box-shadow: 0 0 24px rgba(150, 30, 40, 0.45); }
.tournoi-carte .categorie-titre,
.tournoi-page h1 {
  font-family: "Cinzel", Georgia, "Times New Roman", serif;
  letter-spacing: 2px;
  color: #d9b44a;
  text-shadow: 0 2px 0 #3a0d12;
}
.tournoi-carte .categorie-texte { color: #b9a98a; }
.tournoi-texte { display: flex; flex-direction: column; gap: 8px; }
.tournoi-etat { font-weight: 700; color: #e05a5a; }

.tournoi-decor { position: relative; display: block; height: 130px; width: 100%; align-self: stretch; }
.fanion {
  position: absolute;
  top: 0;
  width: 34px;
  height: 78px;
  background: linear-gradient(180deg, #8b1a24, #5a0f17);
  border-top: 4px solid #c9971c;
  clip-path: polygon(0 0, 100% 0, 100% 100%, 50% 80%, 0 100%);
  transform-origin: top center;
  animation: flotte 3.4s ease-in-out infinite;
}
.fanion::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 22px;
  width: 14px;
  height: 14px;
  margin-left: -7px;
  background: #d9b44a;
  clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%);
}
.fanion.f1 { left: 12%; }
.fanion.f2 { left: 50%; margin-left: -17px; height: 92px; animation-delay: 0.6s; }
.fanion.f3 { right: 12%; animation-delay: 1.2s; }
@keyframes flotte { 0%, 100% { transform: skewX(0deg); } 50% { transform: skewX(-6deg) translateX(2px); } }
.torche {
  position: absolute;
  bottom: 18px;
  width: 26px;
  height: 26px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 70%, #fff3b0, #ffb02e 40%, #d9480f 70%, transparent 72%);
  filter: blur(0.5px);
  animation: vacille 0.9s ease-in-out infinite alternate;
}
.torche::before { content: ""; position: absolute; inset: -30px; border-radius: 50%; background: radial-gradient(circle, rgba(255, 150, 40, 0.35), transparent 65%); }
.torche.t1 { left: 2%; }
.torche.t2 { right: 2%; animation-delay: 0.35s; }
@keyframes vacille { from { transform: scale(0.92) rotate(-3deg); opacity: 0.85; } to { transform: scale(1.06) rotate(3deg); opacity: 1; } }
.tournoi-decor .epees { position: absolute; left: 50%; bottom: 0; transform: translateX(-50%); font-size: 2.2rem; filter: drop-shadow(0 0 8px rgba(217, 180, 74, 0.6)); }

/* Tournoi : écran */
.tournoi-page {
  background:
    radial-gradient(ellipse at 50% 0%, rgba(150, 30, 40, 0.3), transparent 55%),
    linear-gradient(180deg, #1b1116 0%, #0e090c 100%);
  border-color: #5a1e24;
  color: #e9dcc0;
}
.tournoi-entete { display: flex; align-items: center; gap: 16px; margin-bottom: 8px; }
.tournoi-entete .epees { font-size: 2.6rem; }
.tournoi-entete h1 { margin-bottom: 4px; }
.tournoi-page .sous-titre, .tournoi-page .regles, .tournoi-page .note { color: #b9a98a; }
.tournoi-page .regles strong { color: #e9dcc0; }
.tournoi-page h2 { font-family: "Cinzel", Georgia, serif; color: #d9b44a; letter-spacing: 1px; }
.to-derniere { display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; margin-bottom: 16px; border-radius: 10px; border: 1px solid #5a1e24; background: rgba(0, 0, 0, 0.35); }
.to-derniere.victoire strong { color: #d9b44a; font-size: 1.2rem; }
.to-derniere.defaite strong { color: #e05a5a; font-size: 1.2rem; }
.to-ecussons { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin: 12px 0 18px; }
.ecusson {
  display: grid;
  place-items: center;
  width: 44px;
  height: 52px;
  font-weight: 800;
  clip-path: polygon(0 0, 100% 0, 100% 62%, 50% 100%, 0 62%);
  background: #2a1a1f;
  color: #7d6a55;
}
.ecusson.gagne { background: linear-gradient(180deg, #e3c060, #a87a14); color: #2a1206; }
.ecusson.perdu { background: linear-gradient(180deg, #7a1d25, #4a0f15); color: #e9dcc0; }
.ecusson.abandon { background: #3a2a2e; color: #e05a5a; }
.to-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-bottom: 16px; }
.to-stat { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); border: 1px solid #3a1a20; }
.to-stat-valeur { font-family: "Cinzel", Georgia, serif; font-size: 1.5rem; font-weight: 900; color: #d9b44a; }
.to-stat-libelle { font-size: 0.85rem; color: #b9a98a; }
.to-action { padding: 16px; border-radius: 10px; border: 1px solid #c9971c; background: rgba(0, 0, 0, 0.3); }
.to-action p { margin-top: 0; }
.tournoi-page .btn-principal { background: linear-gradient(180deg, #e3c060, #b8860b); color: #2a1206; }
.to-ticket-ok { color: #d9b44a; font-weight: 700; }
.to-top { list-style: none; counter-reset: rang; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.to-top li { counter-increment: rang; display: flex; gap: 12px; padding: 8px 12px; border-radius: 8px; background: rgba(0, 0, 0, 0.3); }
.to-top li::before { content: counter(rang); min-width: 1.6em; font-weight: 800; color: #d9b44a; }
.to-top li.moi { outline: 1px solid #d9b44a; }
.to-top-points { margin-left: auto; font-weight: 700; font-variant-numeric: tabular-nums; }
.tournoi-page .dj-historique li { background: rgba(0, 0, 0, 0.3); }

/* Tirage au sort d'une joute */
.tirage { position: fixed; inset: 0; z-index: 90; display: grid; place-items: center; padding: 16px; background: rgba(8, 4, 6, 0.92); }
.tirage-boite { text-align: center; color: #e9dcc0; }
.tirage-titre { font-family: "Cinzel", Georgia, serif; font-size: 1.4rem; color: #b9a98a; animation: hesite 0.5s ease-in-out infinite alternate; }
.tirage.revele .tirage-titre { animation: none; }
.tirage-resultat { font-family: "Cinzel", Georgia, serif; font-size: 2.4rem; font-weight: 900; color: #d9b44a; margin: 8px 0 4px; min-height: 1.2em; }
.tirage.revele .tirage-resultat { animation: apparait 0.6s ease-out; }
.tirage-adversaire { font-size: 1.2rem; min-height: 1.4em; }
@keyframes hesite { from { opacity: 0.4; } to { opacity: 1; } }
@keyframes apparait { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* Inventaire : ticket d'or */
.inventaire-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-bottom: 12px; }
.ticket-or {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 18px 22px;
  border-radius: 10px;
  color: #2a1206;
  background: linear-gradient(115deg, #b8860b 0%, #f5c542 30%, #fff4c2 48%, #f5c542 62%, #b8860b 100%);
  background-size: 220% 100%;
  animation: reflet-ticket 4s ease-in-out infinite;
  -webkit-mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
          mask: radial-gradient(circle 10px at 0 50%, transparent 98%, #000) left / 51% 100% no-repeat,
                radial-gradient(circle 10px at 100% 50%, transparent 98%, #000) right / 51% 100% no-repeat;
}
@keyframes reflet-ticket { 0%, 100% { background-position: 100% 0; } 50% { background-position: 0 0; } }
.ticket-entete { font-family: "Cinzel", Georgia, serif; font-weight: 900; letter-spacing: 3px; font-size: 0.8rem; }
.ticket-titre { font-family: "Cinzel", Georgia, serif; font-size: 1.5rem; font-weight: 900; }
.ticket-detail { font-size: 0.85rem; }
.ticket-etat { margin-top: 6px; font-weight: 800; }
.ticket-or.utilise, .ticket-or.expire { filter: grayscale(0.85); opacity: 0.6; animation: none; }
@media (prefers-reduced-motion: reduce) {
  .fanion, .torche, .ticket-or, .tirage-titre { animation: none; }
}
@media (max-width: 700px) {
  .cartes-classe { grid-template-columns: 1fr; }
}


/* Statistiques globales : Empereurs */
.onglets-stats { margin: 0 0 20px; max-width: 420px; }
.empereur-actuel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  padding: 18px;
  margin-bottom: 16px;
  border-radius: var(--rayon);
  background: linear-gradient(115deg, #b8860b, #f5c542 45%, #fff4c2 55%, #f5c542 70%, #b8860b);
  color: #2a1206;
  text-align: center;
}
.empereur-icone { font-size: 2.4rem; }
.empereur-label { font-family: "Cinzel", Georgia, serif; font-weight: 900; letter-spacing: 2px; text-transform: uppercase; font-size: 0.85rem; }
.empereur-nom { font-size: 1.6rem; font-weight: 900; }
.empereur-actuel .note { color: #4a3510; margin: 0; }
.table-defilante { overflow-x: auto; }
.table-empereurs { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-empereurs th { text-align: left; font-size: 0.8rem; color: var(--texte-doux); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
.table-empereurs td { padding: 8px 10px; border-bottom: 1px solid var(--fond-2); }
.table-empereurs tr.moi td { color: var(--or); font-weight: 700; }
.table-empereurs td:first-child { color: var(--texte-doux); width: 2.5em; }
/* Classements par jeu (statistiques globales) et rangs du profil */
.classement-choix { display: flex; align-items: center; gap: 10px; margin: 0 0 12px; font-weight: 600; }
.classement-choix select { min-width: 220px; }
.table-classement td:nth-child(3) { white-space: nowrap; }
.classement-moi { color: var(--or); font-weight: 700; }
.profil-rangs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 10px; }
.profil-rang { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px; border-radius: var(--rayon); background: var(--carte); border: 1px solid var(--bord); }
.profil-rang-jeu { font-size: 0.85rem; color: var(--texte-doux); }
.profil-rang-place { font-size: 1.3rem; font-weight: 800; color: var(--or); }
.profil-rang.non-classe .profil-rang-place { color: var(--texte-doux); font-size: 1rem; }
@media (max-width: 560px) { .classement-choix select { min-width: 0; flex: 1; } }
/* Tableaux des statistiques personnelles (par jeu, face aux génies) */
.table-stats { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.table-stats th { text-align: left; font-size: 0.8rem; color: var(--texte-doux); font-weight: 600; padding: 8px 10px; border-bottom: 1px solid var(--bord); }
.table-stats td { padding: 8px 10px; border-bottom: 1px solid var(--fond-2); }
.table-stats td:first-child { font-weight: 700; }
.table-stats tr.moi td { color: var(--or); }
/* Pied de page et page des mentions légales */
.pied-site { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px 10px; padding: 18px 16px 28px; color: var(--texte-doux); font-size: 0.8rem; text-align: center; }
.pied-site .btn-lien { font-size: 0.8rem; }
.mentions h2 { margin-top: 28px; }
.mentions ul { padding-left: 1.2em; line-height: 1.6; }
/* Action irréversible (suppression du compte) */
.btn-secondaire.btn-danger { border-color: var(--rouge); color: var(--rouge); }
.profil-suppression { max-width: 420px; }
.table-stats td:nth-child(2), .table-stats td:nth-child(3) { white-space: nowrap; }
@media (max-width: 560px) { .table-stats th, .table-stats td { padding: 7px 6px; font-size: 0.85rem; } }

/* Administration */
.adm-bloc { padding: 16px; margin-top: 16px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); }
.adm-bloc h2 { margin: 0 0 8px; font-size: 1.1rem; }
.adm-bloc .actions { margin-top: 10px; }
.adm-bloc input[type="datetime-local"] { flex: 1; font: inherit; padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bord); background: var(--fond-2); color: var(--texte); color-scheme: dark; }
.btn-secondaire.danger { border-color: var(--rouge); color: var(--rouge); }
#btn-admin { color: var(--or); }


/* Accueil : Défi du jour, Jeux, Entraînements — animés, mais en retrait par rapport au mode classé */
.cartes-quotidien { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; }
.carte-anim { position: relative; overflow: hidden; gap: 6px; padding-top: 16px; }
.carte-anim .decor { position: relative; display: block; width: 100%; height: 86px; margin-bottom: 4px; align-self: stretch; }
.carte-etat { margin-top: auto; padding-top: 6px; font-weight: 700; font-size: 0.9rem; color: var(--or); }
.carte-anim:hover .decor, .carte-anim:focus-visible .decor { filter: brightness(1.15); }

/* Défi du jour : page de calendrier qui « respire », bordure lumineuse qui tourne lentement */
.carte-defi { border-color: rgba(245, 197, 66, 0.45); }
.carte-defi::before {
  content: "";
  position: absolute;
  inset: -40%;
  background: conic-gradient(from 0deg, transparent 0 70%, rgba(245, 197, 66, 0.22) 80%, transparent 90%);
  animation: tourne 9s linear infinite;
  pointer-events: none;
}
.carte-defi::after { content: ""; position: absolute; inset: 1px; border-radius: calc(var(--rayon) - 1px); background: var(--carte); z-index: 0; }
.carte-defi > * { position: relative; z-index: 1; }
.carte-defi.fait::before { animation-duration: 20s; opacity: 0.5; }
@keyframes tourne { to { transform: rotate(1turn); } }
.calendrier {
  position: absolute;
  left: 50%;
  top: 4px;
  width: 74px;
  margin-left: -37px;
  display: flex;
  flex-direction: column;
  align-items: center;
  border-radius: 8px;
  overflow: hidden;
  background: #ffffff;
  color: #1a2147;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35);
  animation: respire 4.5s ease-in-out infinite;
}
.calendrier-haut { width: 100%; padding: 2px 0; text-align: center; font-size: 0.7rem; font-weight: 800; text-transform: uppercase; letter-spacing: 1px; background: var(--or); color: #2a1206; }
.calendrier-jour { font-size: 1.9rem; font-weight: 900; line-height: 1.1; }
.calendrier-bas { font-size: 0.6rem; text-transform: capitalize; color: #4a5275; padding-bottom: 3px; }
@keyframes respire { 0%, 100% { transform: translateY(0) rotate(-2deg); } 50% { transform: translateY(-4px) rotate(2deg); } }
.etincelle {
  position: absolute;
  width: 8px;
  height: 8px;
  background: var(--or);
  clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%);
  opacity: 0;
  animation: scintille 3.2s ease-in-out infinite;
}
.etincelle.s1 { left: calc(50% - 56px); top: 14px; }
.etincelle.s2 { left: calc(50% + 46px); top: 52px; animation-delay: 1.6s; }

/* Jeux : plateau télé, deux projecteurs qui balaient doucement, petit buzzer qui pulse */
.decor-jeux .projecteur {
  position: absolute;
  top: -10px;
  width: 60px;
  height: 110px;
  background: linear-gradient(180deg, rgba(120, 170, 255, 0.35), transparent 85%);
  clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%);
  transform-origin: 50% 0;
  animation: balaie 6s ease-in-out infinite;
}
.decor-jeux .p1 { left: calc(50% - 70px); }
.decor-jeux .p2 { left: calc(50% + 10px); animation-delay: -3s; background: linear-gradient(180deg, rgba(245, 197, 66, 0.3), transparent 85%); }
@keyframes balaie { 0%, 100% { transform: rotate(-18deg); } 50% { transform: rotate(18deg); } }
.decor-jeux .plateau { position: absolute; left: 15%; right: 15%; bottom: 6px; height: 8px; border-radius: 50%; background: radial-gradient(ellipse, rgba(120, 170, 255, 0.35), transparent 70%); }
.mini-buzzer {
  position: absolute;
  left: 50%;
  bottom: 10px;
  width: 34px;
  height: 34px;
  margin-left: -17px;
  border-radius: 50%;
  border: 3px solid #8f1d1d;
  background: radial-gradient(circle at 35% 30%, #ff7a7a, #e02424 60%, #a51b1b);
  box-shadow: 0 3px 0 #6b1414;
  animation: pulse-buzzer 2.4s ease-in-out infinite;
}
@keyframes pulse-buzzer { 0%, 70%, 100% { transform: translateY(0); box-shadow: 0 3px 0 #6b1414; } 80% { transform: translateY(2px); box-shadow: 0 1px 0 #6b1414, 0 0 16px rgba(255, 90, 90, 0.6); } }

/* Entraînements : fiche de révision qui se retourne lentement (? → ✓) */
.decor-entrainement { perspective: 400px; }
.fiche {
  position: absolute;
  left: 50%;
  top: 6px;
  width: 92px;
  height: 62px;
  margin-left: -46px;
  transform-style: preserve-3d;
  animation: retourne 7s ease-in-out infinite;
}
.fiche-face {
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  border-radius: 8px;
  font-size: 1.8rem;
  font-weight: 900;
  backface-visibility: hidden;
  box-shadow: 0 6px 14px rgba(0, 0, 0, 0.3);
}
.fiche-face.recto { background: repeating-linear-gradient(180deg, #fffdf5 0 13px, #dfe6f7 13px 14px); color: var(--bleu); }
.fiche-face.verso { background: #eafaf0; color: var(--vert); transform: rotateY(180deg); }
.fiche-ombre { position: absolute; left: calc(50% - 40px); width: 80px; bottom: 4px; height: 6px; border-radius: 50%; background: rgba(0, 0, 0, 0.35); filter: blur(2px); }
@keyframes retourne { 0%, 40% { transform: rotateY(0); } 50%, 90% { transform: rotateY(180deg); } 100% { transform: rotateY(360deg); } }

@media (prefers-reduced-motion: reduce) {
  .carte-defi::before, .calendrier, .etincelle, .projecteur, .mini-buzzer, .fiche { animation: none; }
}
@media (max-width: 760px) {
  .cartes-quotidien { grid-template-columns: 1fr; }
}

/* Comptes à rebours */
.decompte { display: block; font-weight: 800; font-variant-numeric: tabular-nums; }
.decompte-colisee { color: #8a6510; background: #fbf4dc; border: 1px solid #e8d28a; border-radius: 8px; padding: 6px 10px; }
.decompte-grand { font-size: 1.3rem; color: var(--or); margin: 4px 0 12px; }
.decompte-ticket { margin-top: 6px; padding-top: 6px; border-top: 1px dashed rgba(42, 18, 6, 0.4); }
.decompte-tournoi { color: #d9b44a; margin: -4px 0 12px; }

/* Tournoi / Colisée : description dans une info-bulle au survol (ou au focus clavier) */
.tournoi-sous-titre { font-family: "Cinzel", Georgia, serif; font-weight: 700; letter-spacing: 2px; text-transform: uppercase; font-size: 0.8rem; color: #b9a98a; }
.info-bulle {
  position: absolute;
  left: 16px;
  right: 16px;
  top: 16px;
  z-index: 3;
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.45;
  text-align: left;
  background: rgba(10, 6, 8, 0.94);
  color: #e9dcc0;
  border: 1px solid #c9971c;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: opacity 0.2s, transform 0.2s;
}
.info-bulle-claire { background: rgba(255, 255, 255, 0.97); color: #1a2147; border-color: #e8d28a; box-shadow: 0 8px 24px rgba(26, 33, 71, 0.25); }
.tournoi-carte:hover .info-bulle, .tournoi-carte:focus-visible .info-bulle,
.colisee-carte:hover .info-bulle, .colisee-carte:focus-visible .info-bulle { opacity: 1; transform: translateY(0); }
@media (hover: none) { .info-bulle { display: none; } }

/* ===== Mode Histoire : cartes des sagas ===== */
.sagas { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(210px, 100%), 1fr)); grid-auto-rows: 230px; gap: 14px; margin: 8px 0 16px; }
/* Emplacements fixes : une sauvegarde, un prix ou un succès ne redimensionne pas la carte. */
.saga {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  grid-template-rows: 96px 36px 22px 16px 24px; /* décor dégagé en haut, titre juste en dessous */
  align-content: start;
  justify-items: start;
  gap: 2px;
  height: 230px;
  min-height: 230px;
  min-width: 0;
  padding: 12px;
  overflow: hidden;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  color: #fff;
  transition: box-shadow 0.15s, border-color 0.15s;
}
button.saga { cursor: pointer; }
button.saga:hover, button.saga:focus-visible { box-shadow: 0 0 18px rgba(245, 197, 66, 0.2); border-color: var(--or); }
.saga-decor { position: absolute; inset: 0; z-index: 0; }
.saga > :not(.saga-decor):not(.saga-cadenas):not(.saga-terminee):not(.saga-temporaire) { position: relative; z-index: 1; }
.saga-nom { grid-row: 2; align-self: start; margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1rem; line-height: 18px; text-shadow: 0 2px 6px rgba(0, 0, 0, 0.7); }
.saga-titre { grid-row: 3; margin: 0; font-size: 0.75rem; line-height: 14px; opacity: 0.9; text-shadow: 0 1px 4px rgba(0, 0, 0, 0.8); }
.saga-nom, .saga-titre { min-width: 0; max-width: 100%; display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 2; overflow: hidden; }
.saga-etat { grid-row: 5; align-self: end; max-width: 100%; margin: 0; padding: 4px 8px; border-radius: 999px; font-size: 0.75rem; line-height: 16px; font-weight: 700; background: rgba(0, 0, 0, 0.55); white-space: nowrap; }
.saga-progression { grid-row: 4; margin: 0; color: var(--texte); font-size: 0.75rem; line-height: 16px; font-weight: 600; font-variant-numeric: tabular-nums; }
.saga > .saga-terminee { position: absolute; top: 12px; left: 12px; z-index: 2; margin: 0; padding: 4px 8px; border: 1px solid var(--or); border-radius: 6px; color: var(--or); background: #0b1430e8; font-family: Cinzel, Georgia, serif; font-size: 0.7rem; line-height: 16px; font-weight: 800; letter-spacing: 0.08em; box-shadow: 0 0 12px #f5c54222; }
.saga.en-construction { filter: saturate(0.6); }
/* Catégories du Mode Histoire : temporaires (compte à rebours) puis définitives */
.histoire-categorie { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 14px; margin: 18px 0 2px; }
.histoire-categorie h2 { margin: 0; font-family: Cinzel, Georgia, serif; }
.histoire-categorie .note { flex-basis: 100%; margin: 0; }
.histoire-categorie.temporaires { padding: 12px 14px; border: 1px solid #f5c54266; border-radius: var(--rayon); background: linear-gradient(120deg, #f5c54214, transparent 60%); }
.histoire-categorie.gratuite { padding: 12px 14px; border: 1px solid #2ecc7188; border-radius: var(--rayon); background: linear-gradient(120deg, #2ecc7120, transparent 65%); }
.decompte-histoire { font-weight: 800; color: var(--or); font-variant-numeric: tabular-nums; }
.saga > .saga-temporaire { position: absolute; top: 8px; right: 8px; z-index: 2; margin: 0; padding: 1px 7px; border-radius: 999px; color: #ffe2c2; background: #2a1206b3; font-size: 0.66rem; line-height: 16px; font-weight: 800; letter-spacing: 0.02em; white-space: nowrap; }
.saga.en-construction .saga-etat, .saga.verrouillee .saga-etat { background: rgba(245, 197, 66, 0.9); color: #2a1206; }

/* Sorciers : ciel étoilé, bougies flottantes, château */
.saga-sorciers { background: linear-gradient(180deg, #0b0f2e, #1d1246 70%, #2a1650); }
.saga-sorciers .ciel, .hp-ciel {
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(1.5px 1.5px at 12% 18%, #fff, transparent), radial-gradient(1px 1px at 32% 8%, #fff, transparent),
    radial-gradient(1.5px 1.5px at 58% 22%, #fff, transparent), radial-gradient(1px 1px at 78% 12%, #fff, transparent),
    radial-gradient(1px 1px at 88% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 22% 38%, #fff, transparent),
    radial-gradient(1px 1px at 46% 44%, #fff, transparent), radial-gradient(1px 1px at 68% 40%, #fff, transparent);
  animation: scintillement 4s ease-in-out infinite alternate;
}
@keyframes scintillement { from { opacity: 0.55; } to { opacity: 1; } }
.bougie {
  position: absolute;
  width: 8px;
  height: 26px;
  border-radius: 2px;
  background: linear-gradient(90deg, #e9e2cc, #fffbea, #d8cfb4);
  animation: flotte-bougie 5s ease-in-out infinite;
}
.bougie::before {
  content: "";
  position: absolute;
  left: 50%;
  top: -12px;
  width: 8px;
  height: 12px;
  margin-left: -4px;
  border-radius: 50% 50% 45% 45%;
  background: radial-gradient(circle at 50% 70%, #fff7c2, #ffb02e 55%, transparent 60%);
  box-shadow: 0 0 12px 4px rgba(255, 176, 46, 0.45);
  animation: vacille 0.8s ease-in-out infinite alternate;
}
@keyframes flotte-bougie { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
.saga-sorciers .b1 { left: 14%; top: 24%; }
.saga-sorciers .b2 { left: 48%; top: 14%; animation-delay: -1.7s; }
.saga-sorciers .b3 { left: 80%; top: 28%; animation-delay: -3.1s; }
.saga-sorciers .chateau, .hp-chateau {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42%;
  background: #07081a;
  clip-path: polygon(0 100%, 0 70%, 8% 70%, 8% 45%, 12% 30%, 16% 45%, 16% 60%, 26% 60%, 26% 38%, 30% 18%, 34% 38%, 34% 55%, 46% 55%, 46% 30%, 50% 5%, 54% 30%, 54% 50%, 64% 50%, 64% 35%, 68% 20%, 72% 35%, 72% 62%, 84% 62%, 84% 44%, 88% 28%, 92% 44%, 92% 72%, 100% 72%, 100% 100%);
  opacity: 0.95;
}

/* Pokémon : balle qui oscille sur fond rouge et blanc */
.saga-pokemon { background: linear-gradient(160deg, #d62828 0 48%, #1b1b1b 48% 52%, #f2f2f2 52%); color: #1a1a1a; }
.saga-pokemon .saga-nom, .saga-pokemon .saga-titre { color: #fff; }
.saga-pokemon .balle {
  position: absolute;
  right: 18px;
  top: 18px;
  width: 64px;
  height: 64px;
  border-radius: 50%;
  border: 5px solid #1b1b1b;
  background: linear-gradient(180deg, #e63946 0 46%, #1b1b1b 46% 54%, #fff 54%);
  animation: oscille 2.6s ease-in-out infinite;
}
.saga-pokemon .balle::after { content: ""; position: absolute; left: 50%; top: 50%; width: 16px; height: 16px; margin: -8px 0 0 -8px; border-radius: 50%; background: #fff; border: 4px solid #1b1b1b; }
@keyframes oscille { 0%, 60%, 100% { transform: rotate(0); } 70% { transform: rotate(-14deg); } 80% { transform: rotate(12deg); } 90% { transform: rotate(-6deg); } }

/* Étoiles : saut dans l'hyperespace */
.saga-etoiles { background: radial-gradient(ellipse at center, #10162e, #000 75%); }
.saga-etoiles .hyperespace {
  position: absolute;
  inset: -50%;
  background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(160, 200, 255, 0.0) 0 3deg, rgba(160, 200, 255, 0.35) 3deg 3.6deg, rgba(160, 200, 255, 0) 3.6deg 9deg);
  -webkit-mask: radial-gradient(circle, transparent 12%, #000 60%);
          mask: radial-gradient(circle, transparent 12%, #000 60%);
  animation: tourne 30s linear infinite;
}
.saga-etoiles .saga-nom { color: #ffe81f; }

/* Trônes : neige qui tombe sur un trône d'épées */
.saga-trones { background: linear-gradient(180deg, #2b3440, #11161d); }
.saga-trones .neige {
  position: absolute;
  inset: 0;
  background-image: radial-gradient(2px 2px at 10% 10%, #fff, transparent), radial-gradient(1.5px 1.5px at 30% 40%, #fff, transparent),
    radial-gradient(2px 2px at 55% 20%, #fff, transparent), radial-gradient(1.5px 1.5px at 75% 55%, #fff, transparent),
    radial-gradient(2px 2px at 90% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 70%, #fff, transparent);
  background-size: 100% 120px;
  animation: neige 6s linear infinite;
  opacity: 0.8;
}
@keyframes neige { from { background-position: 0 0; } to { background-position: 20px 120px; } }
.saga-trones .trone {
  position: absolute;
  right: 20px;
  top: 20px;
  width: 60px;
  height: 80px;
  background: linear-gradient(180deg, #9aa4b1, #4a5562);
  clip-path: polygon(0 100%, 0 30%, 8% 0, 16% 30%, 24% 5%, 32% 30%, 42% 0, 50% 25%, 58% 0, 68% 30%, 76% 5%, 84% 30%, 92% 0, 100% 30%, 100% 100%, 75% 100%, 75% 60%, 25% 60%, 25% 100%);
}

.histoire-choix {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  margin-bottom: 14px;
  border-radius: var(--rayon);
  border: 1px solid var(--or);
  background: var(--fond);
}
.histoire-choix p { margin: 0; }
.histoire-choix-titre { font-weight: 800; color: var(--or); }

/* ===== Mode Histoire : scène du duel contre Vous-Savez-Qui ===== */
.hp-scene {
  position: relative;
  overflow: hidden;
  min-height: 560px;
  padding: 18px 18px 24px;
  border-radius: var(--rayon);
  border: 1px solid #3b2a6b;
  background: linear-gradient(180deg, #0b0f2e 0%, #1d1246 60%, #2a1650 100%);
  transition: background 1s;
}
/* Plus on avance, plus le ciel se charge de vert sombre (la menace grandit) */
.hp-scene[data-theme="sorciers"][data-chapitre="3"] { background: linear-gradient(180deg, #081a1a 0%, #142a2e 60%, #1d1246 100%); }
.hp-scene[data-theme="sorciers"][data-chapitre="4"] { background: linear-gradient(180deg, #050d0b 0%, #0f2a1d 60%, #1a1030 100%); }
.hp-scene[data-theme="sorciers"][data-chapitre="5"] { background: linear-gradient(180deg, #020403 0%, #0a2614 55%, #2a0f12 100%); }
.hp-ciel { pointer-events: none; }
.hp-ciel .bougie { opacity: 0.9; }
.hp-ciel .b1 { left: 6%; top: 18%; }
.hp-ciel .b2 { left: 22%; top: 8%; animation-delay: -1s; }
.hp-ciel .b3 { left: 40%; top: 16%; animation-delay: -2.2s; }
.hp-ciel .b4 { left: 60%; top: 9%; animation-delay: -3.4s; }
.hp-ciel .b5 { left: 77%; top: 20%; animation-delay: -0.6s; }
.hp-ciel .b6 { left: 92%; top: 11%; animation-delay: -4.2s; }
.hp-ciel .hp-chateau { height: 22%; opacity: 0.8; }
.hp-scene > :not(.hp-ciel):not(.hp-fin):not(.foot-decor):not(.mus-decor) { position: relative; z-index: 1; }

.hp-duel { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px; margin: 46px 0 18px; }
.hp-camp { display: flex; flex-direction: column; align-items: center; gap: 4px; color: #efe6ff; }
.hp-avatar { font-size: 2.6rem; filter: drop-shadow(0 0 10px rgba(180, 140, 255, 0.6)); }
.hp-ennemi .hp-avatar { filter: drop-shadow(0 0 12px rgba(40, 255, 120, 0.55)); }
.hp-nom { font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 0.9rem; }
.hp-vies { display: flex; gap: 4px; font-size: 1.4rem; }
.hp-vies .vie { filter: drop-shadow(0 0 6px #ffd447); transition: opacity 0.4s, transform 0.4s, filter 0.4s; }
.hp-vies .vie.perdue { opacity: 0.18; filter: grayscale(1); transform: scale(0.8); }
.hp-barre { display: block; width: 140px; max-width: 100%; height: 10px; border-radius: 5px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.hp-barre > span { display: block; height: 100%; width: 100%; background: linear-gradient(90deg, #0f8a3a, #39ff88); transition: width 0.6s ease-out; }
.hp-centre { text-align: center; color: #efe6ff; }
.hp-chapitre { margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.05rem; color: #ffd447; }
.hp-sous { margin: 4px 0 0; font-size: 0.85rem; opacity: 0.85; }

/* Rayons de sorts */
.rayon {
  position: absolute;
  top: 34%;
  left: 18%;
  right: 18%;
  height: 6px;
  border-radius: 3px;
  opacity: 0;
  pointer-events: none;
}
.rayon-joueur { background: linear-gradient(90deg, transparent, #ff4d4d, #ffd447); box-shadow: 0 0 18px 4px rgba(255, 90, 60, 0.7); transform-origin: left; }
.rayon-ennemi { background: linear-gradient(270deg, transparent, #1aff6e, #b6ffcf); box-shadow: 0 0 18px 4px rgba(40, 255, 120, 0.7); transform-origin: right; }
.sort-joueur .rayon-joueur { animation: rayon 0.7s ease-out; }
.sort-ennemi .rayon-ennemi { animation: rayon 0.7s ease-out; }
@keyframes rayon { 0% { opacity: 1; transform: scaleX(0); } 60% { opacity: 1; transform: scaleX(1); } 100% { opacity: 0; transform: scaleX(1); } }
.sort-joueur .hp-ennemi .hp-avatar { animation: touche 0.5s 0.35s; }
.sort-ennemi .hp-joueur .hp-avatar { animation: touche 0.5s 0.35s; }
.sort-ennemi .hp-parchemin { animation: secousse 0.4s 0.4s; }
@keyframes touche { 25% { transform: translateX(6px) rotate(8deg); filter: brightness(2); } 75% { transform: translateX(-4px) rotate(-5deg); } }

.hp-parchemin {
  max-width: 680px;
  margin: 0 auto;
  padding: 20px 22px;
  border-radius: 6px;
  color: #3b2a14;
  background: linear-gradient(180deg, #f6ecd2, #ead9b0);
  box-shadow: inset 0 0 30px rgba(120, 80, 30, 0.35), 0 10px 30px rgba(0, 0, 0, 0.5);
}
.hp-texte { margin: 0 0 16px; font-family: Georgia, "Times New Roman", serif; font-size: 1.3rem; font-weight: 700; line-height: 1.4; }
.hp-parchemin input[type="text"] { background: #fffaf0; color: #2a1a08; border-color: #c9a96a; }
.hp-parchemin .btn-discret { color: #6b5230; }
.hp-retour { min-height: 1.4em; margin: 12px 0 0; font-weight: 700; }
.hp-retour.juste { color: #1f7a3a; }
.hp-retour.faux { color: #a32020; }
.hp-parchemin #hp-suivante { margin-top: 12px; }
.hp-sauver { color: #cdbfff; }

.hp-fin { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; padding: 16px; background: rgba(5, 4, 15, 0.88); }
.hp-fin.cache { display: none; }
.hp-fin-boite { max-width: 460px; text-align: center; padding: 26px; border-radius: var(--rayon); background: #120c2a; border: 1px solid #ffd447; color: #efe6ff; }
.hp-fin-boite h2 { margin-top: 0; font-family: "Cinzel", Georgia, serif; font-size: 1.6rem; color: #ffd447; }
.hp-fin.defaite .hp-fin-boite { border-color: #39ff88; }
.hp-fin.defaite h2 { color: #39ff88; }
.hp-fin.victoire .hp-fin-boite { animation: apparait 0.6s ease-out; box-shadow: 0 0 40px rgba(255, 212, 71, 0.45); }

/* ===== Défis du compte ===== */
.defis-jauge-globale { height: 10px; margin-bottom: 18px; }
.defis-liste { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.defi-carte { display: flex; flex-direction: column; gap: 6px; padding: 14px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); opacity: 0.85; }
.defi-carte.valide { opacity: 1; border-color: var(--or); background: linear-gradient(160deg, rgba(245, 197, 66, 0.14), var(--fond) 55%); }
.defi-icone { font-size: 1.8rem; filter: grayscale(1); }
.defi-carte.valide .defi-icone { filter: none; }
.defi-nom { font-weight: 800; }
.defi-description { font-size: 0.85rem; color: var(--texte-doux); flex: 1; }
.defi-jauge { display: block; height: 6px; border-radius: 3px; background: var(--fond-2); overflow: hidden; }
.defi-jauge > span { display: block; height: 100%; background: var(--bleu); }
.defi-carte.valide .defi-jauge > span { background: var(--or); }
.defi-etat { font-size: 0.8rem; font-weight: 700; color: var(--texte-doux); }
.defi-carte.valide .defi-etat { color: var(--or); }

/* Notifications (défi validé) */
.toasts { position: fixed; right: 16px; bottom: 16px; z-index: 120; display: flex; flex-direction: column; gap: 8px; pointer-events: none; }
.toast-succes {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  border-radius: 12px;
  font-weight: 700;
  background: #1a1408;
  border: 1px solid var(--or);
  color: var(--or);
  box-shadow: 0 10px 28px rgba(0, 0, 0, 0.5);
  animation: toast-entree 0.4s ease-out;
  transition: opacity 0.5s, transform 0.5s;
}
.toast-succes.sortie { opacity: 0; transform: translateX(30px); }
.toast-icone { font-size: 1.5rem; }
@keyframes toast-entree { from { opacity: 0; transform: translateY(20px); } to { opacity: 1; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  .bougie, .bougie::before, .saga-sorciers .ciel, .hp-ciel, .balle, .hyperespace, .neige, .rayon, .toast-succes { animation: none !important; }
}
@media (max-width: 560px) {
  .hp-duel { grid-template-columns: 1fr 1fr; margin-top: 30px; }
  .hp-centre { grid-column: 1 / -1; grid-row: 1; }
  .hp-texte { font-size: 1.1rem; }
}

/* Accueil : case Mode Histoire — forêt de nuit balayée par une lampe torche */
.carte-histoire {
  position: relative;
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 190px;
  margin-bottom: 16px;
  padding: 20px 24px;
  overflow: hidden;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid #23402c;
  background: #050b10;
  color: #e8f3e6;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.carte-histoire:hover, .carte-histoire:focus-visible { border-color: #f5e6a8; box-shadow: 0 0 28px rgba(245, 230, 168, 0.25); }
.foret { position: absolute; inset: 0; }
.foret-ciel {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(1px 1px at 15% 20%, #cfe, transparent), radial-gradient(1px 1px at 42% 12%, #cfe, transparent),
    radial-gradient(1.5px 1.5px at 70% 18%, #cfe, transparent), radial-gradient(1px 1px at 88% 8%, #cfe, transparent),
    linear-gradient(180deg, #071420 0%, #0b1d1a 55%, #050b0c 100%);
}
.arbres { position: absolute; left: -2%; right: -2%; bottom: 0; clip-path: polygon(0 100%, 0 62%, 4% 40%, 8% 62%, 8% 55%, 13% 22%, 18% 55%, 18% 66%, 23% 35%, 28% 66%, 28% 50%, 34% 12%, 40% 50%, 40% 64%, 45% 38%, 50% 64%, 50% 58%, 55% 28%, 60% 58%, 60% 48%, 66% 8%, 72% 48%, 72% 62%, 77% 30%, 82% 62%, 82% 54%, 88% 18%, 94% 54%, 94% 60%, 97% 42%, 100% 60%, 100% 100%); }
.arbres-fond { height: 78%; background: #0b1a14; transform: scaleX(-1); opacity: 0.9; }
.arbres-devant { height: 62%; background: #030806; }
/* Même forêt en version éclairée, visible seulement dans le cône de la lampe : le cône et la zone
   éclairée partagent le même angle animé (--angle-lampe), donc ils restent parfaitement alignés. */
@property --angle-lampe { syntax: "<angle>"; inherits: true; initial-value: 285deg; }
.foret { animation: lampe 10s ease-in-out infinite; }
@keyframes lampe {
  0%, 100% { --angle-lampe: 262deg; }
  30% { --angle-lampe: 300deg; }
  55% { --angle-lampe: 284deg; }
  78% { --angle-lampe: 312deg; }
}
.foret-eclairee {
  position: absolute;
  inset: 0;
  background: radial-gradient(ellipse at 50% 100%, #3a3420, #1b2416 70%);
  -webkit-mask: conic-gradient(from calc(var(--angle-lampe) - 10deg) at 96% 88%, transparent 0deg, #000 5deg, #000 15deg, transparent 20deg);
          mask: conic-gradient(from calc(var(--angle-lampe) - 10deg) at 96% 88%, transparent 0deg, #000 5deg, #000 15deg, transparent 20deg);
}
.foret-eclairee .arbres-fond { background: #3f6b45; }
.foret-eclairee .arbres-devant { background: #24452c; }
.sentier { position: absolute; left: 30%; right: 30%; bottom: 0; height: 28%; background: #8a7350; clip-path: polygon(40% 0, 60% 0, 100% 100%, 0 100%); opacity: 0.8; }
/* Halo du faisceau : même cône, qui s'estompe avec la distance */
.faisceau {
  position: absolute;
  inset: 0;
  background: conic-gradient(from calc(var(--angle-lampe) - 10deg) at 96% 88%, transparent 0deg, rgba(255, 244, 200, 0.28) 6deg, rgba(255, 244, 200, 0.28) 14deg, transparent 20deg);
  -webkit-mask: radial-gradient(circle at 96% 88%, #000 0, transparent 85%);
          mask: radial-gradient(circle at 96% 88%, #000 0, transparent 85%);
  pointer-events: none;
}
.lampe {
  position: absolute;
  right: 18px;
  bottom: 30px;
  width: 34px;
  height: 11px;
  border-radius: 3px 5px 5px 3px;
  background: linear-gradient(180deg, #6b7280, #2f3540);
  transform-origin: 100% 50%;
  /* corps de la lampe orienté comme le faisceau (270° = vers la gauche) */
  transform: rotate(calc(var(--angle-lampe) - 270deg));
}
.lampe::before {
  content: "";
  position: absolute;
  left: -7px;
  top: -4px;
  width: 9px;
  height: 19px;
  border-radius: 3px;
  background: linear-gradient(90deg, #fff7d6, #c9ced8);
  box-shadow: -4px 0 14px 4px rgba(255, 244, 200, 0.55);
}
/* Des yeux qui s'allument de temps en temps dans le noir */
.yeux { position: absolute; left: 22%; top: 46%; display: flex; gap: 7px; opacity: 0; animation: yeux 11s ease-in-out infinite; }
.yeux span { width: 6px; height: 4px; border-radius: 50%; background: #ffd23f; box-shadow: 0 0 8px #ffd23f; }
@keyframes yeux { 0%, 62%, 74%, 100% { opacity: 0; } 64%, 70% { opacity: 1; } 67% { opacity: 0.1; } }
.luciole { position: absolute; width: 4px; height: 4px; border-radius: 50%; background: #e7ff8c; box-shadow: 0 0 8px 2px rgba(231, 255, 140, 0.7); animation: luciole 5s ease-in-out infinite; }
.luciole.l1 { left: 18%; top: 62%; }
.luciole.l2 { left: 38%; top: 48%; animation-delay: -1.3s; }
.luciole.l3 { left: 63%; top: 70%; animation-delay: -2.6s; }
.luciole.l4 { left: 76%; top: 40%; animation-delay: -3.8s; }
@keyframes luciole { 0%, 100% { opacity: 0.1; transform: translate(0, 0); } 50% { opacity: 1; transform: translate(10px, -8px); } }
.histoire-texte { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.histoire-titre { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.5rem; letter-spacing: 1px; color: #f5e6a8; text-shadow: 0 2px 8px #000; }
.histoire-sous-titre { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #9fc3a5; text-shadow: 0 1px 4px #000; }
.histoire-etat { margin-top: 4px; font-weight: 700; color: #e8f3e6; text-shadow: 0 1px 6px #000; }
@media (prefers-reduced-motion: reduce) {
  .foret, .yeux, .luciole { animation: none; }
}

/* ===== Tuiles animées : catalogues Jeux et Entraînements ===== */
.vignettes { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 8px; }
.vignette {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
  padding: 0 16px 16px;
  overflow: hidden;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid var(--bord);
  background: linear-gradient(180deg, var(--fond-2), var(--fond));
  color: var(--texte);
  transition: transform 0.18s, border-color 0.18s, box-shadow 0.18s;
}
button.vignette { cursor: pointer; }
button.vignette:hover, button.vignette:focus-visible { transform: translateY(-3px); border-color: var(--or); box-shadow: 0 12px 28px rgba(0, 0, 0, 0.35); }
.vignette-decor { position: relative; display: block; width: calc(100% + 32px); height: 112px; margin: 0 -16px 6px; overflow: hidden; background: radial-gradient(ellipse at 50% 120%, rgba(61, 139, 255, 0.18), transparent 70%); }
.vignette-nom { font-weight: 800; font-size: 1.1rem; }
.vignette-texte { color: var(--texte-doux); font-size: 0.9rem; line-height: 1.4; flex: 1; }
.vignette-badge { margin-top: 6px; padding: 4px 12px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; background: var(--or); color: #1b1600; }
.vignette.bientot { opacity: 0.6; }
.vignette.bientot .vignette-badge { background: var(--fond-2); color: var(--texte-doux); border: 1px solid var(--bord); }

/* La Pendule : balancier + deux chronos */
.pendule-tige { position: absolute; left: 50%; top: 6px; width: 3px; height: 70px; margin-left: -1.5px; background: #c9ced8; transform-origin: 50% 0; animation: balancier 2s ease-in-out infinite alternate; }
.pendule-masse { position: absolute; left: 50%; bottom: -12px; width: 22px; height: 22px; margin-left: -11px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c2, var(--or) 55%, #a87a14); box-shadow: 0 0 12px rgba(245, 197, 66, 0.5); }
@keyframes balancier { from { transform: rotate(-28deg); } to { transform: rotate(28deg); } }
.pendule-cadran { position: absolute; top: 40px; left: 16px; padding: 4px 8px; border-radius: 6px; font-weight: 800; font-variant-numeric: tabular-nums; background: #0a1024; border: 1px solid var(--bord); color: var(--or); animation: cadran-actif 4s steps(1) infinite; }
.pendule-cadran.droite { left: auto; right: 16px; color: var(--texte-doux); animation-delay: -2s; }
@keyframes cadran-actif { 0% { border-color: var(--or); color: var(--or); } 50% { border-color: var(--bord); color: var(--texte-doux); } }

/* Le Buzzer : bouton qui s'enfonce + ondes */
.gros-buzzer { position: absolute; left: 50%; top: 50%; width: 84px; height: 20px; margin: 10px 0 0 -42px; border-top: 3px solid var(--or); border-radius: 6px 6px 12px 12px; background: linear-gradient(180deg, #2c3a66, #121a38 70%); box-shadow: 0 8px 14px rgba(0, 0, 0, 0.45), inset 0 -3px 0 rgba(0, 0, 0, 0.35); }
.gros-buzzer::after { content: ""; position: absolute; left: 12px; right: 12px; top: 6px; height: 3px; border-radius: 2px; background: linear-gradient(90deg, transparent, #f5c54266, transparent); }
.buzzer-dome { position: absolute; left: 50%; bottom: 100%; width: 56px; height: 30px; margin: 0 0 1px -28px; border-radius: 28px 28px 5px 5px; background: radial-gradient(ellipse at 34% 26%, #ffe1e1 0 7%, #ff6b6b 24%, #dc2020 58%, #8f1414); box-shadow: inset 0 -4px 0 rgba(0, 0, 0, 0.28); transform-origin: 50% 100%; animation: appui 2.4s ease-in-out infinite; }
@keyframes appui { 0%, 60%, 100% { transform: scaleY(1); filter: none; } 68% { transform: scaleY(0.78); filter: drop-shadow(0 0 10px rgba(255, 90, 90, 0.8)); } }
.onde { position: absolute; left: 50%; top: 50%; width: 56px; height: 56px; margin: -36px 0 0 -28px; border-radius: 50%; border: 2px solid rgba(255, 120, 120, 0.65); opacity: 0; animation: onde 2.4s ease-out infinite; }
.onde.o2 { animation-delay: 0.25s; border-color: rgba(245, 197, 66, 0.55); }
.onde.o3 { animation-delay: 0.5s; }
@keyframes onde { 0%, 64% { transform: scale(1); opacity: 0; } 70% { opacity: 0.9; } 100% { transform: scale(2.4); opacity: 0; } }
/* Icône du Buzzer (dôme rouge sur socle doré), à la taille du texte */
.icone-buzzer { position: relative; display: inline-block; width: 1.05em; height: 0.82em; vertical-align: -0.06em; }
.icone-buzzer::before { content: ""; position: absolute; left: 0.17em; right: 0.17em; top: 0; height: 0.52em; border-radius: 0.36em 0.36em 0.06em 0.06em; background: radial-gradient(ellipse at 34% 28%, #ffe1e1 0 8%, #ff6b6b 26%, #dc2020 60%, #8f1414); }
.icone-buzzer::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 0.28em; border-radius: 0.08em 0.08em 0.14em 0.14em; background: linear-gradient(180deg, #ffe27a, #c9971c 60%, #8a6510); }

/* Défi entre amis : une enveloppe vole d'un ami à l'autre */
.vignette-amis .avatar { position: absolute; top: 40px; font-size: 2rem; animation: hoche 2s ease-in-out infinite; }
.vignette-amis .a1 { left: 18%; }
.vignette-amis .a2 { right: 18%; animation-delay: -1s; }
@keyframes hoche { 50% { transform: translateY(-5px); } }
.avion { position: absolute; top: 44px; left: 30%; font-size: 1.3rem; animation: vol-lettre 3.2s ease-in-out infinite; }
@keyframes vol-lettre {
  0% { transform: translate(0, 0) rotate(0); opacity: 0; }
  10% { opacity: 1; }
  45% { transform: translate(calc(100% + 60px), -26px) rotate(10deg); }
  50% { transform: translate(calc(100% + 90px), 0) rotate(0); opacity: 1; }
  55% { opacity: 0; }
  100% { transform: translate(calc(100% + 90px), 0); opacity: 0; }
}

/* La Série : quatre flammes qui s'allument l'une après l'autre */
.vignette-serie .vignette-decor { display: flex; align-items: center; justify-content: center; gap: 14px; }
.flamme { font-size: 1.8rem; filter: grayscale(1); opacity: 0.35; animation: allume 3.2s ease-in-out infinite; }
.flamme.f2 { animation-delay: 0.4s; }
.flamme.f3 { animation-delay: 0.8s; }
.flamme.f4 { animation-delay: 1.2s; }
@keyframes allume { 0%, 10% { filter: grayscale(1); opacity: 0.35; transform: scale(0.9); } 25%, 80% { filter: none; opacity: 1; transform: scale(1.1); } 100% { filter: grayscale(1); opacity: 0.35; } }

/* La Course aux points : quatre coureurs */
.vignette-course .vignette-decor { display: flex; flex-direction: column; justify-content: center; gap: 10px; padding: 0 20px; }
.piste-course { position: relative; display: block; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.08); }
.coureur { position: absolute; top: -4px; left: 0; width: 16px; height: 16px; border-radius: 50%; animation: course 3.5s ease-in-out infinite; }
.coureur.c1 { background: var(--or); }
.coureur.c2 { background: var(--bleu); animation-duration: 4.2s; }
.coureur.c3 { background: var(--vert); animation-duration: 3.1s; }
.coureur.c4 { background: #c4a3ff; animation-duration: 3.8s; }
@keyframes course { from { left: 0; } 85%, to { left: calc(100% - 16px); } }

/* Le Portrait mystère : les cases s'effacent pour révéler une silhouette */
.portrait { position: absolute; left: 50%; top: 10px; width: 90px; height: 90px; margin-left: -45px; display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; border-radius: 8px; overflow: hidden; background: #2a3466; }
.portrait .silhouette { position: absolute; inset: 0; display: grid; place-items: center; font-size: 3rem; z-index: 0; }
.portrait .case { position: relative; z-index: 1; background: var(--or); animation: devoile 6s ease-in-out infinite; }
.portrait .c2 { animation-delay: 0.5s; } .portrait .c3 { animation-delay: 1s; } .portrait .c4 { animation-delay: 1.5s; } .portrait .c5 { animation-delay: 2s; }
.portrait .c6 { animation-delay: 2.5s; } .portrait .c7 { animation-delay: 3s; } .portrait .c8 { animation-delay: 3.5s; } .portrait .c9 { animation-delay: 4s; }
@keyframes devoile { 0%, 10% { opacity: 1; } 20%, 85% { opacity: 0; } 100% { opacity: 1; } }

/* Entraînement par thème : égaliseur de difficulté + puces de thèmes */
.egaliseur { position: absolute; left: 50%; bottom: 14px; display: flex; align-items: flex-end; gap: 6px; height: 64px; margin-left: -45px; }
.barre-eq { width: 12px; border-radius: 3px 3px 0 0; background: linear-gradient(180deg, var(--or), #a87a14); animation: eq 1.6s ease-in-out infinite alternate; }
.barre-eq.b1 { height: 20%; } .barre-eq.b2 { height: 40%; animation-delay: -0.3s; } .barre-eq.b3 { height: 60%; animation-delay: -0.6s; } .barre-eq.b4 { height: 80%; animation-delay: -0.9s; } .barre-eq.b5 { height: 100%; animation-delay: -1.2s; }
@keyframes eq { to { transform: scaleY(0.45); } }
.barre-eq { transform-origin: bottom; }
.puce-flottante { position: absolute; padding: 2px 8px; border-radius: 999px; font-size: 0.7rem; font-weight: 700; background: var(--fond); border: 1px solid var(--bord); color: var(--bleu); animation: flotte-puce 4s ease-in-out infinite; }
.puce-flottante.p1 { left: 8%; top: 16px; } .puce-flottante.p2 { right: 8%; top: 28px; animation-delay: -1.3s; } .puce-flottante.p3 { left: 14%; top: 66px; animation-delay: -2.6s; }
@keyframes flotte-puce { 50% { transform: translateY(-6px); } }

/* Réviser mes erreurs : fiches qui se battent puis passent au vert */
.fiche-revision { position: absolute; top: 22px; left: 50%; width: 64px; height: 76px; margin-left: -32px; display: grid; place-items: center; border-radius: 8px; font-size: 1.6rem; font-weight: 900; background: #fffdf5; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.35); }
.fiche-revision.r1 { color: var(--rouge); transform: rotate(-14deg) translateX(-30px); animation: bat-gauche 4s ease-in-out infinite; }
.fiche-revision.r2 { color: var(--rouge); transform: rotate(10deg) translateX(30px); animation: bat-droite 4s ease-in-out infinite; }
.fiche-revision.r3 { color: var(--vert); animation: fiche-verte 4s ease-in-out infinite; }
@keyframes bat-gauche { 50% { transform: rotate(-4deg) translateX(-6px); } }
@keyframes bat-droite { 50% { transform: rotate(4deg) translateX(6px); } }
@keyframes fiche-verte { 0%, 40% { transform: scale(1); } 50% { transform: scale(1.15); box-shadow: 0 0 22px rgba(46, 204, 113, 0.6); } 60%, 100% { transform: scale(1); } }

/* Questions en rafale : éclair + chrono qui se vide */
.eclair-rafale { position: absolute; left: 50%; top: 18px; margin-left: -18px; font-size: 2.4rem; animation: eclair 1.8s steps(1) infinite; }
@keyframes eclair { 0%, 70% { opacity: 1; filter: drop-shadow(0 0 10px #ffd447); } 75% { opacity: 0.3; } 80% { opacity: 1; } 85% { opacity: 0.3; } }
.chrono-rafale { position: absolute; left: 20%; right: 20%; bottom: 20px; height: 8px; border-radius: 4px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.chrono-rafale > span { display: block; height: 100%; background: linear-gradient(90deg, var(--rouge), var(--or)); animation: vide-chrono 4s linear infinite; }
@keyframes vide-chrono { from { width: 100%; } to { width: 0; } }

/* ===== Entraînement modernisé ===== */
.question.entree { animation: entree-question 0.4s ease-out; }
@keyframes entree-question { from { opacity: 0; transform: translateY(12px) scale(0.98); } to { opacity: 1; transform: none; } }
.entrainement-barre { grid-template-columns: 1fr auto auto auto; }
.ent-serie { color: var(--orange); font-weight: 800; }
.ent-serie.pop { animation: pop 0.45s ease-out; }
@keyframes pop { 40% { transform: scale(1.35); } }
.progression > div { background: linear-gradient(90deg, #a87a14, var(--or), #fff4c2, var(--or)); background-size: 200% 100%; animation: brillance 2.5s linear infinite; }
@keyframes brillance { from { background-position: 100% 0; } to { background-position: -100% 0; } }
.puce span { transition: transform 0.15s, border-color 0.15s, color 0.15s; }
.puce span:hover { transform: translateY(-2px); }
.puce input:checked + span::before { content: "✓"; color: var(--or); font-weight: 900; animation: pop 0.3s ease-out; }
.choix { padding: 14px 16px; border-radius: var(--rayon); background: var(--fond); border: 1px solid var(--bord); }

/* Anneau de score du bilan */
@property --pct { syntax: "<number>"; inherits: false; initial-value: 0; }
.ent-fin-entete { display: flex; align-items: center; gap: 20px; margin-bottom: 12px; }
.ent-fin-entete h1 { margin-bottom: 4px; }
.anneau-score {
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 110px;
  height: 110px;
  border-radius: 50%;
  background: conic-gradient(var(--or) calc(var(--pct) * 1%), var(--fond) 0);
  transition: --pct 1.4s cubic-bezier(0.2, 0.8, 0.2, 1);
  position: relative;
}
.anneau-score::before { content: ""; position: absolute; inset: 10px; border-radius: 50%; background: var(--carte); }
.anneau-score span { position: relative; font-size: 1.5rem; font-weight: 900; font-variant-numeric: tabular-nums; }

@media (prefers-reduced-motion: reduce) {
  .vignette *, .question.entree, .progression > div, .ent-serie.pop { animation: none !important; }
  .anneau-score { transition: none; }
}
@media (max-width: 560px) {
  .ent-fin-entete { flex-direction: column; align-items: flex-start; }
}

/* ===== Accueil : Mode Histoire et Encyclopedia côte à côte ===== */
.cartes-aventure { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 16px; }
.cartes-aventure .carte-histoire { margin-bottom: 0; }

.carte-encyclopedie {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 190px;
  padding: 20px 24px;
  overflow: hidden;
  text-align: left;
  border-radius: var(--rayon);
  border: 1px solid #1f5f6b;
  background: radial-gradient(ellipse at 75% 30%, #145566 0%, #0b2f3d 45%, #071a24 100%);
  color: #e6f6f7;
  cursor: pointer;
  transition: border-color 0.2s, box-shadow 0.2s;
}
.carte-encyclopedie:hover, .carte-encyclopedie:focus-visible { border-color: #7fe3e8; box-shadow: 0 0 28px rgba(127, 227, 232, 0.25); }
.encyclo-decor { position: absolute; inset: 0; }
.encyclo-texte { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 4px; }
.encyclo-titre { font-family: "Cinzel", Georgia, serif; font-weight: 900; font-size: 1.5rem; letter-spacing: 1px; color: #bff4f6; text-shadow: 0 2px 8px #000; }
.encyclo-sous-titre { font-size: 0.85rem; text-transform: uppercase; letter-spacing: 2px; color: #7fc9cf; }
.encyclo-etat { margin-top: 4px; font-weight: 700; text-shadow: 0 1px 6px #000; }

/* Globe qui tourne : une bande de « continents » défile derrière un disque */
.globe { position: absolute; right: 44px; top: 26px; width: 110px; height: 110px; border-radius: 50%; overflow: hidden; background: radial-gradient(circle at 35% 30%, #4fb3e8, #1d5fa8 60%, #0d2f5c); box-shadow: inset -14px -10px 24px rgba(0, 0, 0, 0.55), 0 0 30px rgba(79, 179, 232, 0.35); }
.globe::after { content: ""; position: absolute; inset: 0; border-radius: 50%; background: radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.35), transparent 40%); }
.globe-terres {
  position: absolute;
  top: 0;
  left: 0;
  width: 200%;
  height: 100%;
  background:
    radial-gradient(ellipse 14% 20% at 8% 35%, #4caf6a 60%, transparent 62%),
    radial-gradient(ellipse 10% 26% at 20% 62%, #3e9a5b 60%, transparent 62%),
    radial-gradient(ellipse 16% 14% at 34% 30%, #5dbb76 60%, transparent 62%),
    radial-gradient(ellipse 9% 12% at 42% 70%, #3e9a5b 60%, transparent 62%),
    radial-gradient(ellipse 14% 20% at 58% 35%, #4caf6a 60%, transparent 62%),
    radial-gradient(ellipse 10% 26% at 70% 62%, #3e9a5b 60%, transparent 62%),
    radial-gradient(ellipse 16% 14% at 84% 30%, #5dbb76 60%, transparent 62%),
    radial-gradient(ellipse 9% 12% at 92% 70%, #3e9a5b 60%, transparent 62%);
  animation: rotation-globe 14s linear infinite;
}
@keyframes rotation-globe { to { transform: translateX(-50%); } }
.orbite { position: absolute; right: 24px; top: 6px; width: 150px; height: 150px; border-radius: 50%; border: 1px dashed rgba(191, 244, 246, 0.25); animation: tourne 9s linear infinite; }
.orbite.o2 { right: 34px; top: 16px; width: 130px; height: 130px; animation-duration: 13s; animation-direction: reverse; }
.mini-drapeau { position: absolute; top: -8px; left: 50%; width: 22px; height: 15px; margin-left: -11px; border-radius: 2px; box-shadow: 0 2px 6px rgba(0, 0, 0, 0.4); }
.mini-drapeau.m1 { background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); }
.mini-drapeau.m2 { background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); top: auto; bottom: -8px; }
.page-volante { position: absolute; width: 18px; height: 24px; border-radius: 2px; background: repeating-linear-gradient(180deg, #fffdf5 0 4px, #dfe6f7 4px 5px); opacity: 0; animation: page-vole 7s ease-in-out infinite; }
.page-volante.pv1 { left: 46%; bottom: 20px; }
.page-volante.pv2 { left: 56%; bottom: 10px; animation-delay: -2.3s; }
.page-volante.pv3 { left: 38%; bottom: 30px; animation-delay: -4.6s; }
@keyframes page-vole { 0% { opacity: 0; transform: translate(0, 0) rotate(0); } 15% { opacity: 0.9; } 80% { opacity: 0.6; } 100% { opacity: 0; transform: translate(-40px, -120px) rotate(-40deg); } }

/* ===== Encyclopedia : vignettes ===== */
.encyclo-page .vignette-decor { background: radial-gradient(ellipse at 50% 120%, rgba(127, 227, 232, 0.2), transparent 70%); }
/* Drapeau qui ondule : douze tranches verticales du même drapeau, décalées dans le temps */
.mat { position: absolute; left: calc(50% - 72px); top: 14px; width: 4px; height: 92px; border-radius: 2px; background: linear-gradient(90deg, #8c8f96, #d9dce2, #8c8f96); }
.drapeau-ondule { position: absolute; left: calc(50% - 68px); top: 18px; display: flex; width: 132px; height: 84px; }
.tranche {
  flex: 1;
  height: 100%;
  background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%);
  background-size: 132px 100%;
  background-position: calc(var(--i) * -11px) 0;
  animation: vague 1.8s ease-in-out infinite;
  animation-delay: calc(var(--i) * -0.12s);
  filter: brightness(calc(0.85 + var(--i) * 0.0));
}
@keyframes vague { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(5px); filter: brightness(0.82); } }
.livre { position: absolute; left: 50%; top: 22px; width: 100px; height: 70px; margin-left: -50px; perspective: 400px; }
.feuille { position: absolute; left: 50%; top: 0; width: 50px; height: 70px; border-radius: 0 4px 4px 0; background: repeating-linear-gradient(180deg, #fffdf5 0 9px, #dfe6f7 9px 10px); transform-origin: left center; animation: tourne-page 4.5s ease-in-out infinite; }
.feuille.f2 { animation-delay: 1.5s; }
.feuille.f3 { animation-delay: 3s; }
@keyframes tourne-page { 0%, 20% { transform: rotateY(0); } 60%, 100% { transform: rotateY(-180deg); } }

/* Mode « 20 drapeaux » : trois drapeaux qui se mélangent */
.carte-drapeau { position: absolute; left: 50%; top: 26px; width: 84px; height: 58px; margin-left: -42px; border-radius: 4px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.4); animation: melange 3.6s ease-in-out infinite; }
.carte-drapeau.cd1 { background: linear-gradient(180deg, #000 33.3%, #dd0000 33.3% 66.6%, #ffce00 66.6%); }
.carte-drapeau.cd2 { background: radial-gradient(circle at 50% 50%, #bc002d 30%, #fff 31%); animation-delay: -1.2s; }
.carte-drapeau.cd3 { background: linear-gradient(90deg, #009246 33.3%, #fff 33.3% 66.6%, #ce2b37 66.6%); animation-delay: -2.4s; }
@keyframes melange { 0% { transform: translateX(-60px) rotate(-12deg); z-index: 1; } 33% { transform: translateX(0) rotate(0) scale(1.08); z-index: 3; } 66% { transform: translateX(60px) rotate(12deg); z-index: 2; } 100% { transform: translateX(-60px) rotate(-12deg); z-index: 1; } }

/* Mode « Tour du monde » : un avion fait le tour du globe */
.globe.petit { right: auto; left: 50%; top: 18px; width: 76px; height: 76px; margin-left: -38px; }
.avion-orbite { right: auto; left: 50%; top: 4px; width: 104px; height: 104px; margin-left: -52px; animation-duration: 5s; }
.avion-tour { position: absolute; top: -12px; left: 50%; margin-left: -10px; font-size: 1.2rem; transform: rotate(90deg); }

/* ===== Drapeaux : partie ===== */
.dg-chrono { height: 10px; margin: 4px 0 14px; }
.dg-chrono > div { background: linear-gradient(90deg, var(--rouge), var(--or) 40%, var(--vert)); }
.dg-cadre { display: grid; place-items: center; min-height: 240px; margin: 6px 0 16px; padding: 16px; border-radius: var(--rayon); background: radial-gradient(ellipse at 50% 40%, rgba(127, 227, 232, 0.12), var(--fond) 75%); border: 2px solid var(--bord); }
.dg-image { width: min(320px, 80%); aspect-ratio: 4 / 3; object-fit: cover; border-radius: 6px; box-shadow: 0 12px 30px rgba(0, 0, 0, 0.45); }
.dg-image.apparait { animation: apparait-drapeau 0.45s ease-out, ondule-drapeau 3s ease-in-out 0.45s infinite; }
@keyframes apparait-drapeau { from { opacity: 0; transform: scale(0.85) rotate(-3deg); } to { opacity: 1; transform: none; } }
@keyframes ondule-drapeau { 50% { transform: perspective(600px) rotateY(-6deg) skewY(1deg); } }
.dg-cadre.flash-vert { animation: flash-vert 0.6s ease-out; }
.dg-cadre.flash-rouge { animation: flash-rouge 0.9s ease-out; }
.dg-retour { min-height: 1.4em; margin: 12px 0 0; font-weight: 700; }
.dg-retour.juste { color: var(--vert); }
.dg-retour.faux { color: var(--rouge); }
.dg-fin { text-align: center; }
.dg-fin.exploit h1 { background: linear-gradient(90deg, #ff6ec7, #ffd447, #7fe3e8, #b388ff, #ff6ec7); background-size: 300% 100%; -webkit-background-clip: text; background-clip: text; color: transparent; animation: holo 3s linear infinite; }
.dg-rates { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; text-align: center; }
.dg-rate { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 10px; border-radius: 10px; background: var(--fond); border: 1px solid var(--bord); font-weight: 600; font-size: 0.85rem; }
.dg-rate img { width: 90px; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 4px; }

/* ===== Raretés des succès ===== */
.defi-carte { position: relative; }
.badge-rarete { position: absolute; top: 10px; right: 10px; padding: 2px 8px; border-radius: 999px; font-size: 0.65rem; font-weight: 900; letter-spacing: 1px; }
.badge-rarete.badge-commun { background: #4a5275; color: #fff; }
.badge-rarete.badge-rare { background: #2f6fd6; color: #fff; }
.badge-rarete.badge-ultra-rare { background: #8e44ad; color: #fff; }
.badge-rarete.badge-genie { color: #1a0f2e; background: linear-gradient(90deg, #ff6ec7, #ffd447, #7fe3e8, #b388ff, #ff6ec7); background-size: 300% 100%; animation: holo 3s linear infinite; box-shadow: 0 0 12px rgba(255, 110, 199, 0.5); }
.defi-carte.rarete-genie { border-color: #b388ff; }
.defi-carte.rarete-genie.valide { box-shadow: 0 0 24px rgba(179, 136, 255, 0.45); }
@keyframes holo { to { background-position: 300% 0; } }

@media (prefers-reduced-motion: reduce) {
  .globe-terres, .orbite, .page-volante, .tranche, .feuille, .carte-drapeau, .dg-image.apparait, .badge-rarete.badge-genie, .dg-fin.exploit h1 { animation: none !important; }
}
@media (max-width: 760px) {
  .cartes-aventure { grid-template-columns: 1fr; }
}

/* ===== Cinématiques du Mode Histoire ===== */
.cine { position: fixed; inset: 0; z-index: 150; display: grid; place-items: center; padding: 16px; background: rgba(2, 3, 10, 0.96); }
.cine.cache { display: none; }
.cine-cadre { position: relative; width: min(920px, 100%); }
.cine-scene { position: relative; display: block; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border-radius: 12px; background: #050816; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.6); }
.cine-scene > span { position: absolute; }
.cine-legende { min-height: 3.2em; margin: 14px 0 0; text-align: center; font-family: Georgia, "Times New Roman", serif; font-size: 1.2rem; font-style: italic; color: #f3e9c8; }
.cine-legende.apparait { animation: legende 0.9s ease-out; }
@keyframes legende { from { opacity: 0; transform: translateY(8px); letter-spacing: 1px; } to { opacity: 1; transform: none; } }
.cine-passer { position: absolute; top: -40px; right: 0; background: none; border: 1px solid rgba(255, 255, 255, 0.3); color: #ddd; border-radius: 999px; padding: 4px 14px; font-weight: 600; }
.cine-passer:hover, .cine-passer:focus-visible { border-color: var(--or); color: var(--or); }

/* Éléments communs */
.cine-etoiles { inset: 0; background-image: radial-gradient(1.5px 1.5px at 10% 15%, #fff, transparent), radial-gradient(1px 1px at 25% 30%, #fff, transparent), radial-gradient(1.5px 1.5px at 45% 10%, #fff, transparent), radial-gradient(1px 1px at 62% 25%, #fff, transparent), radial-gradient(1.5px 1.5px at 80% 12%, #fff, transparent), radial-gradient(1px 1px at 92% 35%, #fff, transparent), radial-gradient(1px 1px at 35% 45%, #fff, transparent), radial-gradient(1px 1px at 72% 48%, #fff, transparent); animation: scintillement 3s ease-in-out infinite alternate; }
.cine-chateau { position: absolute; display: block; left: 20%; right: 20%; bottom: 0; height: 60%; background: #0a0b1e; clip-path: polygon(0 100%, 0 70%, 8% 70%, 8% 45%, 12% 30%, 16% 45%, 16% 60%, 26% 60%, 26% 38%, 30% 18%, 34% 38%, 34% 55%, 46% 55%, 46% 30%, 50% 5%, 54% 30%, 54% 50%, 64% 50%, 64% 35%, 68% 20%, 72% 35%, 72% 62%, 84% 62%, 84% 44%, 88% 28%, 92% 44%, 92% 72%, 100% 72%, 100% 100%); }
.cine-sol { left: 0; right: 0; bottom: 0; height: 22%; background: linear-gradient(180deg, #11131f, #05060c); }
.cine-sorcier, .cine-mage-noir { bottom: 18%; width: 70px; height: 150px; }
.cine-sorcier .chapeau { position: absolute; left: 14px; top: 0; width: 42px; height: 52px; background: #2b2f6b; clip-path: polygon(50% 0, 100% 100%, 0 100%); }
.cine-sorcier .robe { position: absolute; left: 4px; bottom: 0; width: 62px; height: 100px; background: linear-gradient(180deg, #23285a, #12153a); clip-path: polygon(35% 0, 65% 0, 100% 100%, 0 100%); }
.cine-mage-noir .capuche { position: absolute; left: 12px; top: 0; width: 46px; height: 56px; border-radius: 50% 50% 10% 10%; background: #0b0b0f; }
.cine-mage-noir .visage { position: absolute; left: 24px; top: 18px; width: 22px; height: 28px; border-radius: 50%; background: radial-gradient(circle at 50% 40%, #e8eadf, #9fa596); box-shadow: 0 0 14px rgba(120, 255, 160, 0.35); }
.cine-mage-noir .robe { position: absolute; left: 0; bottom: 0; width: 70px; height: 104px; background: linear-gradient(180deg, #0f0f14, #000); clip-path: polygon(30% 0, 70% 0, 100% 100%, 0 100%); }
.baguette { position: absolute; top: 62px; width: 34px; height: 3px; border-radius: 2px; background: #8b5a2b; }
.cine-sorcier .baguette { left: 54px; transform: rotate(-10deg); }
.cine-mage-noir .baguette { right: 54px; transform: rotate(10deg); background: #d8d2c4; }

/* 1. Arrivée au château : la caméra s'approche, les fenêtres s'allument, des barques traversent le lac */
.scene-arrivee { background: linear-gradient(180deg, #050a24 0%, #121a46 55%, #1b1440 100%); }
.cine-lune { right: 12%; top: 10%; width: 70px; height: 70px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe6, #e9dfb0); box-shadow: 0 0 40px rgba(255, 251, 230, 0.5); }
.cine-zoom { inset: 0; transform-origin: 50% 85%; animation: approche 7s ease-in-out forwards; }
.cine-zoom .cine-chateau { bottom: 26%; height: 46%; }
@keyframes approche { from { transform: scale(0.55) translateY(10%); } to { transform: scale(1.15) translateY(4%); } }
.cine-fenetres { position: absolute; left: 20%; right: 20%; bottom: 26%; height: 46%; }
.cine-fenetre { position: absolute; width: 1.4%; height: 3.2%; background: #ffd27a; box-shadow: 0 0 8px #ffb02e; opacity: 0; animation: fenetre 0.6s ease-out forwards; }
.w1 { left: 29%; top: 40%; animation-delay: 1.2s; } .w2 { left: 49%; top: 22%; animation-delay: 1.6s; } .w3 { left: 67%; top: 38%; animation-delay: 2s; }
.w4 { left: 12%; top: 55%; animation-delay: 2.3s; } .w5 { left: 52%; top: 45%; animation-delay: 2.6s; } .w6 { left: 87%; top: 50%; animation-delay: 2.9s; }
.w7 { left: 38%; top: 65%; animation-delay: 3.2s; } .w8 { left: 60%; top: 62%; animation-delay: 3.5s; } .w9 { left: 76%; top: 70%; animation-delay: 3.8s; }
@keyframes fenetre { to { opacity: 1; } }
.cine-lac { left: 0; right: 0; bottom: 0; height: 28%; background: linear-gradient(180deg, #1a2a5e, #070b1e); }
.cine-lac::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(180deg, transparent 0 6px, rgba(255, 255, 255, 0.05) 6px 7px); animation: clapotis 2s linear infinite; }
@keyframes clapotis { to { background-position: 0 14px; } }
.cine-barque { bottom: 10%; width: 46px; height: 10px; border-radius: 0 0 50% 50%; background: #3b2412; animation: traverse 7s linear forwards; }
.cine-barque.b2 { bottom: 5%; animation-duration: 8s; animation-delay: 0.6s; left: -10%; }
.cine-barque .lanterne { position: absolute; left: 20px; top: -14px; width: 6px; height: 8px; border-radius: 2px; background: #ffd27a; box-shadow: 0 0 12px 4px rgba(255, 176, 46, 0.6); }
@keyframes traverse { from { left: -8%; } to { left: 70%; } }

/* 2. La voiture bleue au-dessus de Londres */
.scene-voiture { background: linear-gradient(180deg, #2a1b4f 0%, #c0567a 55%, #f4a261 100%); }
.cine-crepuscule { left: 55%; top: 46%; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, #ffe8a3, #f4a261 70%); opacity: 0.85; }
.cine-nuages { inset: 0; background: radial-gradient(ellipse 90px 22px at 20% 30%, rgba(255, 255, 255, 0.45), transparent 70%), radial-gradient(ellipse 120px 26px at 70% 22%, rgba(255, 255, 255, 0.35), transparent 70%), radial-gradient(ellipse 80px 18px at 45% 50%, rgba(255, 255, 255, 0.3), transparent 70%); animation: nuages 6.5s linear forwards; }
@keyframes nuages { to { transform: translateX(-12%); } }
.cine-ville { left: -5%; right: -5%; bottom: 0; height: 45%; background: #1d1430; clip-path: polygon(0 100%, 0 70%, 6% 70%, 6% 55%, 12% 55%, 12% 75%, 18% 75%, 18% 40%, 21% 40%, 21% 22%, 22.5% 12%, 24% 22%, 24% 40%, 27% 40%, 27% 65%, 34% 65%, 34% 50%, 40% 50%, 40% 72%, 46% 72%, 46% 58%, 52% 58%, 52% 35%, 55% 30%, 58% 35%, 58% 68%, 64% 68%, 64% 52%, 72% 52%, 72% 74%, 78% 74%, 78% 46%, 84% 46%, 84% 64%, 90% 64%, 90% 56%, 96% 56%, 96% 76%, 100% 76%, 100% 100%); animation: nuages 6.5s linear forwards; }
.cine-voiture { left: -20%; top: 34%; width: 150px; height: 60px; animation: vol-voiture 6.5s ease-in-out forwards; }
.cine-voiture .carrosserie { position: absolute; left: 0; bottom: 12px; width: 150px; height: 30px; border-radius: 10px 18px 6px 6px; background: linear-gradient(180deg, #5b9bd5, #2e6aa8); }
.cine-voiture .vitre { position: absolute; left: 34px; top: 4px; width: 70px; height: 24px; border-radius: 12px 12px 0 0; background: linear-gradient(180deg, #2e6aa8 0 20%, #cfe6ff 20%); clip-path: polygon(14% 0, 86% 0, 100% 100%, 0 100%); }
.cine-voiture .roue { position: absolute; bottom: 2px; width: 22px; height: 22px; border-radius: 50%; background: radial-gradient(circle, #ccc 30%, #222 32%); animation: tourne 0.6s linear infinite; }
.cine-voiture .r1 { left: 22px; } .cine-voiture .r2 { right: 22px; }
.cine-voiture .sillage { position: absolute; right: 100%; top: 26px; width: 160px; height: 6px; border-radius: 3px; background: linear-gradient(270deg, rgba(255, 255, 255, 0.7), transparent); }
@keyframes vol-voiture { 0% { left: -20%; top: 40%; transform: rotate(-6deg); } 50% { top: 22%; transform: rotate(3deg); } 100% { left: 110%; top: 30%; transform: rotate(-4deg); } }

/* 3. Le cimetière : le chaudron bouillonne, la silhouette renaît */
.scene-cimetiere { background: linear-gradient(180deg, #050b08 0%, #0d1f16 60%, #050805 100%); }
.cine-brume { inset: 0; background: radial-gradient(ellipse at 50% 85%, rgba(120, 255, 160, 0.18), transparent 60%), radial-gradient(ellipse 60% 20% at 30% 80%, rgba(200, 220, 210, 0.15), transparent 70%); animation: brume 7.5s ease-in-out forwards; }
@keyframes brume { to { transform: translateX(4%); opacity: 1.2; } }
.cine-tombe { bottom: 12%; width: 46px; height: 64px; border-radius: 22px 22px 4px 4px; background: linear-gradient(180deg, #3a4140, #1b1f1e); }
.cine-tombe.t1 { left: 8%; } .cine-tombe.t2 { left: 22%; height: 50px; transform: rotate(-6deg); } .cine-tombe.t3 { right: 22%; height: 56px; transform: rotate(5deg); } .cine-tombe.t4 { right: 8%; }
.cine-chaudron { left: 50%; bottom: 10%; width: 120px; height: 70px; margin-left: -60px; border-radius: 10px 10px 60px 60px; background: radial-gradient(ellipse at 50% 20%, #1f3b2a, #0a0d0b 70%); box-shadow: 0 -6px 30px rgba(80, 255, 140, 0.45); }
.cine-chaudron .bulles { position: absolute; left: 10px; right: 10px; top: -6px; height: 14px; border-radius: 50%; background: radial-gradient(circle at 30% 50%, #7dff9e 3px, transparent 4px), radial-gradient(circle at 60% 40%, #7dff9e 4px, transparent 5px), radial-gradient(circle at 80% 60%, #7dff9e 3px, transparent 4px), #2bbf5a; animation: bulles 0.7s ease-in-out infinite alternate; }
@keyframes bulles { to { transform: scaleY(1.4); filter: brightness(1.3); } }
.cine-fumee { left: 50%; bottom: 20%; width: 160px; height: 200px; margin-left: -80px; border-radius: 50%; background: radial-gradient(ellipse, rgba(120, 255, 160, 0.35), transparent 65%); filter: blur(6px); animation: fumee 7.5s ease-in forwards; }
@keyframes fumee { 0% { transform: scale(0.3) translateY(40%); opacity: 0; } 40% { opacity: 1; } 100% { transform: scale(1.6) translateY(-10%); opacity: 0.7; } }
.cine-mage-noir.renait { left: 50%; margin-left: -35px; bottom: 16%; transform-origin: 50% 100%; animation: renaissance 7.5s ease-out forwards; }
@keyframes renaissance { 0%, 40% { transform: scale(0.1); opacity: 0; filter: blur(6px); } 70% { transform: scale(1.05); opacity: 1; filter: blur(0); } 100% { transform: scale(1.15); opacity: 1; } }
.cine-eclair-vert { inset: 0; background: rgba(120, 255, 160, 0.5); opacity: 0; animation: eclair-vert 7.5s ease-out forwards; }
@keyframes eclair-vert { 0%, 66% { opacity: 0; } 70% { opacity: 0.8; } 80%, 100% { opacity: 0; } }

/* 4. Le duel : rayons rouge et vert, sphère dorée qui oscille */
.scene-duel { background: linear-gradient(180deg, #0b0718 0%, #1a1030 60%, #0a0612 100%); }
.cine-sorcier.gauche { left: 10%; }
.cine-mage-noir.droite { right: 10%; }
.cine-rayon { top: calc(82% - 90px); height: 6px; border-radius: 3px; }
.cine-rayon.rouge { left: calc(10% + 88px); width: 34%; background: linear-gradient(90deg, #ff9a6b, #ff3b3b); box-shadow: 0 0 16px 4px rgba(255, 70, 70, 0.7); transform-origin: left; animation: rayon-rouge 7.5s ease-in-out forwards; }
.cine-rayon.vert { right: calc(10% + 88px); width: 34%; background: linear-gradient(270deg, #b6ffcf, #1aff6e); box-shadow: 0 0 16px 4px rgba(40, 255, 120, 0.7); transform-origin: right; animation: rayon-vert 7.5s ease-in-out forwards; }
@keyframes rayon-rouge { 0% { transform: scaleX(0); } 15% { transform: scaleX(1); } 45% { transform: scaleX(0.8); } 70% { transform: scaleX(1.15); } 100% { transform: scaleX(1.05); } }
@keyframes rayon-vert { 0% { transform: scaleX(0); } 15% { transform: scaleX(1); } 45% { transform: scaleX(1.2); } 70% { transform: scaleX(0.85); } 100% { transform: scaleX(0.95); } }
.cine-sphere { left: 50%; top: calc(82% - 90px); width: 46px; height: 46px; margin: -20px 0 0 -23px; border-radius: 50%; background: radial-gradient(circle at 40% 40%, #fffbe0, #ffd447 50%, #b8860b); box-shadow: 0 0 40px 12px rgba(255, 212, 71, 0.6); animation: sphere 7.5s ease-in-out forwards; }
@keyframes sphere { 0%, 12% { transform: scale(0); } 20% { transform: scale(1); } 45% { transform: translateX(-60px) scale(1.1); } 70% { transform: translateX(70px) scale(1.25); } 100% { transform: translateX(30px) scale(1.15); } }
.cine-etincelles { left: 50%; top: calc(82% - 90px); width: 6px; height: 6px; margin: -3px; border-radius: 50%; box-shadow: 20px -30px 0 #ffd447, -26px -18px 0 #fff4c2, 32px 22px 0 #ff9a6b, -18px 30px 0 #b6ffcf, 40px -6px 0 #ffd447, -40px 4px 0 #fff; animation: etincelles 0.5s ease-out infinite; }
@keyframes etincelles { from { transform: scale(0.4); opacity: 1; } to { transform: scale(2.2); opacity: 0; } }

/* 5. Victoire : l'aube sur le château et un feu d'artifice */
.scene-victoire { background: linear-gradient(180deg, #1b2a6b 0%, #f08a5d 60%, #ffd29a 100%); animation: aube 7.5s ease-out forwards; }
@keyframes aube { from { filter: brightness(0.35); } to { filter: brightness(1); } }
.cine-soleil { left: 50%; bottom: 20%; width: 160px; height: 160px; margin-left: -80px; border-radius: 50%; background: radial-gradient(circle, #fff6c9, #ffc36b 60%, transparent 70%); animation: leve 7.5s ease-out forwards; z-index: 0; }
@keyframes leve { from { transform: translateY(70%); } to { transform: translateY(-30%); } }
.cine-chateau.sauve { z-index: 1; background: #2a1d3a; }
.cine-feu { width: 8px; height: 8px; border-radius: 50%; z-index: 2; box-shadow: 0 -40px 0 #ffd447, 28px -28px 0 #ff6ec7, 40px 0 0 #7fe3e8, 28px 28px 0 #ffd447, 0 40px 0 #ff6ec7, -28px 28px 0 #7fe3e8, -40px 0 0 #ffd447, -28px -28px 0 #b388ff; opacity: 0; animation: feu 1.6s ease-out infinite; }
.cine-feu.f1 { left: 22%; top: 22%; animation-delay: 1s; } .cine-feu.f2 { left: 72%; top: 18%; animation-delay: 1.6s; }
.cine-feu.f3 { left: 48%; top: 12%; animation-delay: 2.2s; } .cine-feu.f4 { left: 84%; top: 36%; animation-delay: 2.8s; }
@keyframes feu { 0% { transform: scale(0.1); opacity: 1; } 70% { opacity: 1; } 100% { transform: scale(1.6); opacity: 0; } }

/* 6. Défaite : le mage noir lève sa baguette, un éclair vert envahit l'écran */
.scene-defaite { background: linear-gradient(180deg, #050608 0%, #0e1a12 100%); }
.cine-mage-noir.menace { left: 50%; margin-left: -35px; bottom: 18%; animation: menace 5.5s ease-in forwards; }
@keyframes menace { 0% { transform: scale(0.9); } 50% { transform: scale(1.3); } 100% { transform: scale(1.5); } }
.cine-rayon-final { inset: 0; transform-origin: 50% 42%; background: radial-gradient(circle at 50% 42%, #e6ffe9 0, #3dff7a 12%, rgba(61, 255, 122, 0.55) 30%, transparent 62%); opacity: 0; animation: rayon-final 5.5s ease-in forwards; }
@keyframes rayon-final { 0%, 40% { opacity: 0; transform: scale(0.1); } 52% { opacity: 1; transform: scale(0.5); } 68% { opacity: 1; transform: scale(3.5); } 100% { opacity: 0; transform: scale(3.5); } }
.cine-voile-vert { inset: 0; background: #000; opacity: 0; animation: voile 5.5s ease-in forwards; }
@keyframes voile { 0%, 70% { opacity: 0; } 100% { opacity: 1; } }

@media (prefers-reduced-motion: reduce) {
  .cine-scene *, .cine-scene { animation-duration: 0.01s !important; animation-iteration-count: 1 !important; }
}

/* ===== Mode Histoire : écran de départ (START) ===== */
.hi-scene { position: relative; overflow: hidden; min-height: 560px; border-radius: var(--rayon); border: 1px solid #3b2a6b; background: linear-gradient(180deg, #0b0f2e 0%, #1d1246 60%, #2a1650 100%); }
.hi-contenu { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 10px; padding: 28px 24px 40px; text-align: center; color: #efe6ff; }
.hi-retour { align-self: flex-start; color: #cdbfff; }
.hi-sur-titre { margin: 8px 0 0; text-transform: uppercase; letter-spacing: 4px; font-size: 0.8rem; color: #b8a7ff; }
.hi-titre { margin: 0; font-family: "Cinzel", Georgia, serif; font-size: clamp(2rem, 6vw, 3.2rem); font-weight: 900; color: #ffd447; text-shadow: 0 0 24px rgba(255, 212, 71, 0.45); animation: titre-hi 1s ease-out; }
@keyframes titre-hi { from { opacity: 0; letter-spacing: 12px; } to { opacity: 1; } }
.hi-sous-titre { margin: 0 0 6px; font-size: 1.1rem; }
.hi-chapitres { list-style: none; padding: 0; margin: 6px 0; display: flex; flex-direction: column; gap: 6px; width: min(460px, 100%); }
.hi-chapitres li { display: grid; grid-template-columns: 30px 1fr auto; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 10px; background: rgba(0, 0, 0, 0.35); text-align: left; animation: chapitre-hi 0.5s ease-out backwards; }
.hi-chapitres li:nth-child(2) { animation-delay: 0.1s; } .hi-chapitres li:nth-child(3) { animation-delay: 0.2s; } .hi-chapitres li:nth-child(4) { animation-delay: 0.3s; } .hi-chapitres li:nth-child(5) { animation-delay: 0.4s; }
@keyframes chapitre-hi { from { opacity: 0; transform: translateX(-16px); } }
.hi-chapitres li.passe { opacity: 0.55; }
.hi-chapitres li.passe .hi-num::after { content: " ✓"; color: var(--vert); }
.hi-num { font-family: "Cinzel", Georgia, serif; font-weight: 900; color: #ffd447; }
.hi-niveau { font-size: 0.75rem; color: #b8a7ff; }
.hi-infos { max-width: 520px; font-size: 0.85rem; color: #cdbfff; }
.hi-actions { display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: 6px; }
.btn-start {
  padding: 16px 48px;
  border: none;
  border-radius: 999px;
  font-family: "Cinzel", Georgia, serif;
  font-size: 1.4rem;
  font-weight: 900;
  letter-spacing: 3px;
  color: #2a1206;
  background: linear-gradient(180deg, #ffe680, #f5c542 50%, #c9971c);
  box-shadow: 0 0 0 4px rgba(255, 212, 71, 0.25), 0 10px 30px rgba(255, 212, 71, 0.35);
  animation: pulse-start 1.8s ease-in-out infinite;
}
.btn-start:hover, .btn-start:focus-visible { transform: scale(1.04); }
@keyframes pulse-start { 50% { box-shadow: 0 0 0 12px rgba(255, 212, 71, 0), 0 10px 40px rgba(255, 212, 71, 0.55); } }
.hi-actions .btn-lien { color: #cdbfff; }

/* Choix du rythme Histoire et chrono de compétition, communs à toutes les sagas. */
.hi-mode-choix { max-width: 460px; margin: 18px auto; padding: 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: var(--fond); }
.hi-mode-choix label { display: block; font-weight: 700; margin-bottom: 8px; }
.hi-mode-choix select { width: 100%; }
.hi-mode-choix p { color: var(--texte-doux); font-size: 0.85rem; margin: 10px 0 0; }
.hp-mode { margin: 0 0 8px; text-align: center; font-size: 0.85rem; font-weight: 700; }
.hp-chrono { display: flex; gap: 12px; align-items: center; margin-bottom: 12px; color: #453418; font-weight: 800; font-variant-numeric: tabular-nums; }
.hp-chrono.cache { display: none; }
.hp-chrono-piste { display: block; flex: 1; height: 8px; overflow: hidden; border-radius: 4px; background: #45341830; }
#hp-chrono-barre { display: block; height: 100%; background: var(--bleu); }
.hp-chrono.urgent { color: #a02525; }
.hp-chrono.urgent #hp-chrono-barre { background: var(--rouge); }

/* Hub : solde de tickets et histoires verrouillées */
.histoire-solde { display: inline-block; margin: 0 0 12px; padding: 6px 14px; border-radius: 999px; font-weight: 800; background: linear-gradient(90deg, #4a2c8a, #2a1650); border: 1px solid #b8a7ff; color: #fff; }
.saga.verrouillee .saga-decor { filter: grayscale(0.7) brightness(0.6); }
.saga-cadenas { position: absolute; top: 12px; right: 12px; z-index: 2; padding: 4px 10px; border-radius: 999px; font-size: 0.8rem; font-weight: 800; background: rgba(0, 0, 0, 0.75); border: 1px solid #b8a7ff; color: #fff; }
.hp-fin-tickets { font-weight: 800; color: #ffd447; }
/* Les trois monnaies partagent largeur, hauteur et description dans l’inventaire. */
.inventaire-monnaies { display: grid; grid-auto-rows: 1fr; gap: 16px; margin-bottom: 16px; }
.inventaire-monnaies .inventaire-histoire { margin-bottom: 0; min-height: 96px; }
.ticket-defi-libelle { display: inline-flex; align-items: center; gap: 0.4em; }
.ticket-defi-icone { position: relative; display: inline-block; flex: 0 0 auto; width: 1.45em; height: 0.95em; vertical-align: middle; background: linear-gradient(135deg, #91d5ff, var(--bleu) 65%, #235bc4); clip-path: polygon(0 0, 100% 0, 100% 32%, 88% 40%, 88% 60%, 100% 68%, 100% 100%, 0 100%, 0 68%, 12% 60%, 12% 40%, 0 32%); }
.ticket-defi-icone::after { content: ""; position: absolute; inset: 15% 25% 15% auto; border-left: 1px dashed var(--texte); }
.defi-reussite { margin: 16px 0; }
.progression.defi-reussite-barre { height: 12px; border-radius: 6px; background: var(--bord); }
.progression.defi-reussite-barre > div { background: linear-gradient(90deg, var(--bleu), #91d5ff); animation: none; }
@media (prefers-reduced-motion: reduce) {
  .progression.defi-reussite-barre > div { transition: none; }
}
.inventaire-histoire { display: grid; grid-template-columns: auto 1fr; align-items: center; gap: 2px 14px; margin-bottom: 16px; padding: 14px 18px; border-radius: var(--rayon); background: linear-gradient(90deg, #4a2c8a, #2a1650); border: 1px solid #b8a7ff; font-weight: 800; }
.inventaire-histoire-icone { grid-row: span 2; font-size: 2rem; }
.inventaire-histoire .note { margin: 0; text-align: left; color: #d9cfff; font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .btn-start, .hi-titre, .hi-chapitres li { animation: none; } }

/* ===== Boutique : échoppe du génie marchand ===== */
.boutique-echoppe { position: relative; overflow: hidden; padding-top: 54px; border-color: #80622f; background: radial-gradient(ellipse at 20% 65%, #3c3068 0, transparent 58%), linear-gradient(145deg, var(--fond-2), var(--fond)); }
.boutique-echoppe::before { content: ""; position: absolute; inset: 0 0 auto; height: 26px; background: repeating-linear-gradient(90deg, #563a82 0 44px, #be9140 44px 88px); border-bottom: 4px solid var(--or); border-radius: 0 0 50% 15%; opacity: 0.85; }
.boutique-enseigne { display: flex; align-items: center; justify-content: space-between; gap: 16px; text-align: center; margin-bottom: 28px; }
.boutique-enseigne h1 { font-family: Cinzel, Georgia, serif; font-size: clamp(1.5rem, 4vw, 2.1rem); color: var(--or); margin: 4px 0; }
.boutique-surtitre { margin: 0; text-transform: uppercase; letter-spacing: 0.2em; font-size: 0.7rem; color: var(--texte-doux); }
.boutique-lanterne { flex-shrink: 0; color: #fff0b7; font-size: 28px; padding: 10px; border: 1px solid #ab853c; border-radius: 45% 45% 35% 35%; background: #6e4b27; box-shadow: 0 0 24px #f5c54240; animation: boutique-lanterne 4s ease-in-out infinite; }
.boutique-lanterne:last-child { animation-delay: -2s; }
.boutique-etals { display: grid; grid-template-columns: 1fr 1fr; gap: 28px; align-items: center; }
.boutique-marchand, #boutique-contenu { min-width: 0; }
.boutique-bulle { position: relative; border: 1px solid #8f79b7; border-radius: 18px 18px 18px 4px; padding: 16px 20px; margin: 0 0 16px; min-height: 78px; display: flex; align-items: center; font-family: Georgia, serif; font-size: 1.1rem; background: #2b254d; color: var(--texte); }
.boutique-scene { position: relative; height: 280px; display: flex; justify-content: center; align-items: flex-end; padding-bottom: 42px; }
.boutique-scene .boutique-genie { font-size: 32px; z-index: 1; }
.boutique-scene .genie-turban { background: linear-gradient(#fff0b7, var(--or), #a77422); }
.boutique-halo { position: absolute; width: 240px; height: 240px; max-width: 100%; border-radius: 50%; background: radial-gradient(ellipse, #9e80ea55, #8060cb15 55%, transparent 70%); animation: boutique-halo 4s ease-in-out infinite; }
.boutique-comptoir { position: absolute; bottom: 0; left: 2%; right: 2%; height: 56px; display: flex; justify-content: space-evenly; align-items: center; border: 1px solid #a07835; border-top: 9px solid #c1944d; border-radius: 8px 8px 16px 16px; color: var(--or); background: linear-gradient(#593d38, #2e2436); box-shadow: 0 14px 24px #0004; }
.boutique-signature { text-align: center; font-size: 0.8rem; color: var(--texte-doux); margin: 16px 0 0; }
.boutique-bourse { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-bottom: 16px; }
.boutique-solde { padding: 8px 12px; border: 1px solid var(--bord); background: var(--fond); border-radius: 30px; font-size: 0.85rem; font-weight: 700; }
.boutique-offre { display: flex; flex-direction: column; align-items: center; padding: 24px 20px; border: 1px solid #97743a; border-radius: var(--rayon); background: radial-gradient(ellipse at 50% 15%, #74543755, transparent 65%), #17203e; text-align: center; }
.boutique-offre h2 { margin: 18px 0 4px; font-size: 1.35rem; }
.boutique-accroche { color: var(--texte-doux); font-size: 0.85rem; margin: 0 0 18px; }
.boutique-ticket { width: 148px; height: 86px; display: flex; align-items: center; justify-content: center; animation: boutique-ticket 4s ease-in-out infinite; }
.boutique-ticket-icone { font-size: 76px; line-height: 1; }
.boutique-prix { font-size: 1rem; font-weight: 800; margin-bottom: 14px; }
.boutique-offre .btn-principal { width: 100%; }
.boutique-manque { color: var(--texte-doux); font-size: 0.8rem; margin: 12px 0 0; }
.boutique-chemins { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 16px; margin-top: 12px; }
.boutique-chemins .btn-lien { font-size: 0.85rem; }
.boutique-achat-reussi { animation: boutique-achat 0.65s ease-out; }
@keyframes boutique-lanterne { 50% { transform: rotate(5deg); box-shadow: 0 0 32px #f5c54265; } }
@keyframes boutique-halo { 50% { transform: scale(1.08); opacity: 0.65; } }
@keyframes boutique-ticket { 0%, 100% { transform: translateY(0) rotate(-5deg); } 50% { transform: translateY(-7px) rotate(3deg); } }
@keyframes boutique-achat { 30% { box-shadow: 0 0 32px #f5c54288; border-color: var(--or); } }
@media (max-width: 560px) {
  .boutique-echoppe { padding: 44px 16px 20px; }
  .boutique-etals { grid-template-columns: 1fr; gap: 20px; }
  .boutique-enseigne { gap: 8px; margin-bottom: 18px; }
  .boutique-lanterne { font-size: 20px; padding: 6px; }
  .boutique-scene { height: 180px; padding-bottom: 30px; }
  .boutique-scene .boutique-genie { font-size: 23px; }
  .boutique-comptoir { height: 36px; left: 12%; right: 12%; }
  .boutique-bulle { min-height: 0; font-size: 1rem; padding: 12px 16px; }
  .boutique-signature { display: none; }
  .boutique-offre { padding: 20px; }
}
@media (prefers-reduced-motion: reduce) {
  #ecran-boutique *, #ecran-boutique *::before, #ecran-boutique *::after { animation: none; transition: none; }
}

/* ===== Logo : petit génie animé qui sort de sa lampe ===== */
.genie { position: relative; display: inline-block; flex-shrink: 0; width: 5em; height: 6em; font-size: 8px; }
.genie > span, .genie-flotte > span, .genie span span { position: absolute; display: block; }
.genie-flotte { position: absolute; inset: 0; animation: flotte-genie 3s ease-in-out infinite; }
@keyframes flotte-genie { 50% { transform: translateY(-0.35em) rotate(-2deg); } }
.genie-fumee {
  left: 1.6em; bottom: 1.3em; width: 1.4em; height: 2.2em;
  background: linear-gradient(180deg, #6f9bff, #a98dff 60%, rgba(200, 180, 255, 0.25));
  clip-path: polygon(25% 0, 75% 0, 62% 55%, 70% 100%, 30% 100%, 40% 55%);
  transform-origin: 50% 100%;
  animation: ondule-fumee 1.6s ease-in-out infinite alternate;
}
@keyframes ondule-fumee { from { transform: skewX(10deg); } to { transform: skewX(-10deg); } }
.genie-corps { left: 0.95em; bottom: 2.9em; width: 2.8em; height: 1.6em; border-radius: 1.4em 1.4em 0.9em 0.9em; background: linear-gradient(180deg, #5b8cff, #3c63d6); }
.genie-bras { left: 0.25em; top: 0.55em; width: 2.3em; height: 0.55em; border-radius: 0.3em; background: #4b7af0; box-shadow: inset 0 -0.12em 0 rgba(0, 0, 0, 0.2); }
.genie-bras::before, .genie-bras::after { content: ""; position: absolute; top: 0.05em; width: 0.35em; height: 0.45em; border-radius: 0.1em; background: #f5c542; }
.genie-bras::before { left: 0.35em; }
.genie-bras::after { right: 0.35em; }
.genie-tete { left: 1.45em; bottom: 4.25em; width: 1.9em; height: 1.9em; border-radius: 50%; background: radial-gradient(circle at 40% 35%, #9bbcff, #4f7ff0 75%); }
.genie-turban { left: -0.2em; top: -0.7em; width: 2.3em; height: 1.1em; border-radius: 50% 50% 35% 35%; background: linear-gradient(180deg, #c4a3ff, #7c4dff); box-shadow: inset 0 -0.15em 0 rgba(0, 0, 0, 0.18); }
.genie-joyau { left: 0.95em; top: 0.55em; width: 0.42em; height: 0.42em; transform: rotate(45deg); background: #ff5d8f; box-shadow: 0 0 0.5em #ff5d8f; animation: brille-joyau 2s ease-in-out infinite; }
@keyframes brille-joyau { 50% { box-shadow: 0 0 1em #ff9ec0; background: #ff86ab; } }
.genie-oeil { top: 0.75em; width: 0.28em; height: 0.36em; border-radius: 50%; background: #10173a; animation: cligne 4.5s ease-in-out infinite; }
.genie-oeil.g { left: 0.5em; }
.genie-oeil.d { right: 0.5em; }
@keyframes cligne { 0%, 92%, 100% { transform: scaleY(1); } 95% { transform: scaleY(0.1); } }
.genie-sourire { left: 0.6em; top: 1.15em; width: 0.7em; height: 0.35em; border-bottom: 0.14em solid #10173a; border-radius: 0 0 0.5em 0.5em; }
.genie-lampe { left: 0.5em; bottom: 0.45em; width: 3.4em; height: 1.25em; border-radius: 50% 50% 45% 45% / 70% 70% 30% 30%; background: linear-gradient(180deg, #fff1a8, #f5c542 45%, #b8860b); box-shadow: 0 0.25em 0.5em rgba(0, 0, 0, 0.4); }
.genie-lampe::before { content: ""; position: absolute; left: 0.9em; bottom: -0.38em; width: 1.6em; height: 0.42em; border-radius: 0.2em; background: linear-gradient(180deg, #e3b23c, #8a6510); }
.genie-lampe::after { content: ""; position: absolute; left: 1.15em; top: -0.35em; width: 1.1em; height: 0.5em; border-radius: 50% 50% 0 0; background: #f5c542; }
.genie-bec { right: -1.15em; top: 0.12em; width: 1.4em; height: 0.55em; background: linear-gradient(180deg, #ffe680, #c9971c); clip-path: polygon(0 25%, 100% 0, 100% 35%, 0 100%); }
.genie-anse { left: -0.65em; top: 0.12em; width: 0.85em; height: 0.85em; border: 0.22em solid #c9971c; border-right-color: transparent; border-radius: 50%; }
.genie-etincelle { width: 0.7em; height: 0.7em; background: #ffd447; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); animation: scintille 2.4s ease-in-out infinite; }
.genie-etincelle.s1 { right: 0.2em; top: 0.3em; }
.genie-etincelle.s2 { left: 0; top: 2em; animation-delay: -0.8s; }
.genie-etincelle.s3 { right: -0.3em; top: 2.6em; width: 0.5em; height: 0.5em; animation-delay: -1.6s; }
.logo:hover .genie-flotte, .logo:focus-visible .genie-flotte { animation-duration: 1s; }
.logo:hover .genie-lampe, .logo:focus-visible .genie-lampe { animation: frotte 0.4s ease-in-out 2; }
@keyframes frotte { 25% { transform: rotate(-6deg); } 75% { transform: rotate(6deg); } }

/* Logo de l'en-tête */
.logo { display: flex; align-items: center; gap: 6px; }
.logo .genie { font-size: 8px; margin: -4px 0 -2px; }
.logo-texte { font-weight: 800; }
.logo-genie, .titre-genie .lettre {
  background: linear-gradient(90deg, #c9971c, #f5c542 30%, #fff4c2 45%, #f5c542 60%, #c9971c);
  background-size: 250% 100%;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  animation: reflet-or 3.5s linear infinite;
}
@keyframes reflet-or { from { background-position: 100% 0; } to { background-position: -150% 0; } }
/* Les anciennes règles « .logo span » et « .accueil-entete h1 span » colorent en or toutes les balises span :
   on rétablit la couleur du texte normal et la transparence nécessaire au reflet doré. */
.logo .logo-texte { color: var(--texte); }
.logo .logo-genie { color: transparent; }
.titre-mots .mot:not(.titre-genie) .lettre { color: var(--texte); }
.titre-mots .mot { display: inline-block; white-space: nowrap; }

/* ===== Titre animé de l'accueil ===== */
.titre-anime { display: flex; align-items: center; justify-content: center; gap: 14px; flex-wrap: wrap; }
.genie-grand { font-size: 17px; }
.accueil-entete .titre-site { margin: 0; font-size: clamp(2rem, 6vw, 3.4rem); color: var(--texte); line-height: 1.1; }
.titre-mots { display: inline-block; }
.titre-site .lettre {
  display: inline-block;
  animation: lettre-arrive 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) backwards, vague-lettre 5s ease-in-out infinite;
  animation-delay: calc(var(--n) * 0.07s), calc(2s + var(--n) * 0.09s);
}
.titre-genie .lettre {
  animation: lettre-arrive 0.7s cubic-bezier(0.2, 1.6, 0.4, 1) backwards, vague-lettre 5s ease-in-out infinite, reflet-or 3.5s linear infinite;
  animation-delay: calc(var(--n) * 0.07s), calc(2s + var(--n) * 0.09s), 0s;
  text-shadow: none;
  filter: drop-shadow(0 0 10px rgba(245, 197, 66, 0.35));
}
.titre-site .espace { display: inline-block; width: 0.3em; }
@keyframes lettre-arrive { from { opacity: 0; transform: translateY(-0.9em) rotate(-12deg) scale(0.6); } }
@keyframes vague-lettre { 0%, 12%, 100% { transform: translateY(0); } 6% { transform: translateY(-0.18em); } }
.accueil-entete .sous-titre { animation: legende 1s ease-out 0.9s backwards; }

/* ===== Barre d'onglets du haut ===== */
.entete { gap: 12px; flex-wrap: wrap; }
.nav { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 10px; }
.onglets-nav { position: relative; display: flex; gap: 2px; padding: 4px; border-radius: 999px; background: rgba(255, 255, 255, 0.04); border: 1px solid var(--bord); }
.onglets-nav button {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border: none;
  border-radius: 999px;
  background: none;
  color: var(--texte-doux);
  font-weight: 600;
  transition: color 0.25s;
}
.onglets-nav button:hover, .onglets-nav button:focus-visible { color: var(--texte); }
.onglets-nav button.actif { color: #1b1600; }
/* l'ancienne règle « nav button.actif » donnait un fond à l'onglet actif, qui masquait l'indicateur doré */
.onglets-nav button, .onglets-nav button.actif { background: none; border-color: transparent; }
.nav-icone { display: inline-block; transition: transform 0.25s cubic-bezier(0.3, 1.6, 0.5, 1); }
.onglets-nav button:hover .nav-icone, .onglets-nav button.actif .nav-icone { transform: translateY(-1px) scale(1.18) rotate(-8deg); }
.nav-indicateur {
  position: absolute;
  z-index: 0;
  top: 4px;
  bottom: 4px;
  left: 0;
  width: 0;
  border-radius: 999px;
  background: linear-gradient(135deg, #ffe680, #f5c542 50%, #c9971c);
  box-shadow: 0 0 18px rgba(245, 197, 66, 0.45);
  transition: transform 0.4s cubic-bezier(0.3, 1.3, 0.5, 1), width 0.4s cubic-bezier(0.3, 1.3, 0.5, 1);
}
.compte-puce { display: flex; align-items: center; gap: 8px; padding: 4px 6px 4px 4px; border-radius: 999px; border: 1px solid var(--bord); background: rgba(255, 255, 255, 0.04); }
.compte-avatar { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; font-weight: 900; color: #fff; background: linear-gradient(135deg, #7c4dff, #3d8bff); box-shadow: 0 0 0 2px var(--or); animation: pulse-avatar 3s ease-in-out infinite; }
.compte-avatar.invite { background: #2a3466; box-shadow: 0 0 0 2px var(--bord); animation: none; }
@keyframes pulse-avatar { 50% { box-shadow: 0 0 0 2px var(--or), 0 0 12px rgba(245, 197, 66, 0.5); } }
.compte-nom { max-width: 130px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.compte-action { border: none; border-radius: 999px; padding: 5px 12px; background: none; color: var(--or); font-weight: 700; transition: background 0.2s; }
.compte-action:hover, .compte-action:focus-visible { background: rgba(245, 197, 66, 0.12); }
.compte-action.cache, .onglets-nav button.cache { display: none; }
@media (max-width: 900px) {
  .nav-libelle { display: none; }
  .onglets-nav button { padding: 7px 11px; }
}
@media (max-width: 560px) {
  .accueil-entete .titre-site { font-size: 1.9rem; text-align: center; }
  .logo-texte { font-size: 1.1rem; }
  .compte-nom { display: none; }
  .genie-grand { font-size: 12px; }
}
@media (prefers-reduced-motion: reduce) {
  .genie *, .titre-site .lettre, .logo-genie, .compte-avatar, .nav-indicateur { animation: none !important; transition: none !important; }
}

/* ===== Road to Legend : habillage « stade » de l'écran de jeu et de l'écran de départ ===== */
.foot-decor { display: none; position: absolute; inset: 0; pointer-events: none; }
[data-theme="foot"] .foot-decor { display: block; }
[data-theme="foot"] .hp-ciel { display: none; }
.hp-scene[data-theme="foot"], .hi-scene[data-theme="foot"] { border-color: #1f6b3a; background: radial-gradient(ellipse at 50% 0%, #1b2f5c 0%, #0b1530 55%, #06101e 100%); }
.foot-decor .projo { position: absolute; top: -40px; width: 260px; height: 420px; background: linear-gradient(180deg, rgba(255, 255, 230, 0.28), transparent 75%); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); animation: balaie 9s ease-in-out infinite; transform-origin: 50% 0; }
.foot-decor .pj1 { left: 4%; }
.foot-decor .pj2 { right: 4%; animation-delay: -4.5s; }
.foot-decor .tribune { position: absolute; left: 0; right: 0; bottom: 26%; height: 22%; background: radial-gradient(circle, rgba(255, 255, 255, 0.55) 1.2px, transparent 1.6px) 0 0 / 9px 9px, linear-gradient(180deg, #16203f, #0e1730); opacity: 0.55; }
.foot-decor .pelouse-scene { position: absolute; left: 0; right: 0; bottom: 0; height: 26%; background: repeating-linear-gradient(90deg, #1e7a3c 0 60px, #1a6c35 60px 120px); }
[data-theme="foot"] .hp-parchemin { background: linear-gradient(180deg, #ffffff, #eef6f0); color: #13301e; border-top: 6px solid #1e7a3c; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5); }
[data-theme="foot"] .hp-texte { font-family: system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; }
[data-theme="foot"] .hp-parchemin input[type="text"] { background: #fff; border-color: #9cc8a8; }
[data-theme="foot"] .hp-chapitre { color: #fff; text-shadow: 0 0 12px rgba(255, 255, 255, 0.4); }
[data-theme="foot"] .hp-vies .vie { filter: drop-shadow(0 0 6px rgba(255, 255, 255, 0.7)); }
[data-theme="foot"] .hp-barre > span { background: linear-gradient(90deg, #c9971c, #ffd447); }
[data-theme="foot"] .rayon-joueur { background: linear-gradient(90deg, transparent, #ffffff, #ffd447); box-shadow: 0 0 18px 4px rgba(255, 255, 255, 0.6); }
[data-theme="foot"] .rayon-ennemi { background: linear-gradient(270deg, transparent, #ff5d5d, #ffb3b3); box-shadow: 0 0 18px 4px rgba(255, 93, 93, 0.6); }
[data-theme="foot"] .hp-sauver, [data-theme="foot"] .hi-retour, [data-theme="foot"] .hi-infos { color: #cfe8d6; }
[data-theme="foot"] .hi-sur-titre { color: #9fe0b2; }
[data-theme="foot"] .hi-chapitres li { background: rgba(0, 0, 0, 0.45); }
[data-theme="foot"] .hi-niveau { color: #9fe0b2; }

/* Carte de la saga dans le hub : pelouse, petit but et ballon qui rebondit */
.saga-foot { background: radial-gradient(ellipse at 50% 0%, #1b2f5c, #0b1530 70%); }
.saga-foot .pelouse { position: absolute; left: 0; right: 0; bottom: 0; height: 45%; background: repeating-linear-gradient(90deg, #1e7a3c 0 22px, #1a6c35 22px 44px); }
.saga-foot .but-mini { position: absolute; right: 18px; top: 26px; width: 64px; height: 40px; border: 4px solid #fff; border-bottom: none; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 8px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.35) 0 2px, transparent 2px 8px); }
.saga-foot .ballon-rebond { position: absolute; left: 46%; top: 70px; font-size: 1.6rem; animation: rebond 1.4s cubic-bezier(0.5, 0, 0.5, 1) infinite; }
@keyframes rebond { 0%, 100% { transform: translateY(0) rotate(0); } 50% { transform: translateY(-46px) rotate(180deg); } }
.saga-foot .projo-mini { position: absolute; top: 0; width: 70px; height: 120px; background: linear-gradient(180deg, rgba(255, 255, 230, 0.3), transparent); clip-path: polygon(45% 0, 55% 0, 100% 100%, 0 100%); }
.saga-foot .pm1 { left: 6%; transform: rotate(-12deg); } .saga-foot .pm2 { right: 6%; transform: rotate(12deg); }

/* ===== En haut de l'affiche : carte, studio et scènes de concert ===== */
.saga-musique { background: linear-gradient(180deg, #211b48, var(--fond) 80%); }
.saga-musique .saga-decor { bottom: auto; height: 92px; }
/* Miniature indépendante des grandes cinématiques : tous les accessoires tiennent dans 92 px. */
.vignette-concert { position: absolute; inset: 0; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 25%, #51406788, transparent 70%); }
.vignette-concert > span { position: absolute; display: block; }
.vc-scene { left: 12%; right: 12%; top: 65px; height: 12px; border-top: 2px solid var(--or); border-radius: 50%; background: linear-gradient(#665070, #18213d); box-shadow: 0 -5px 18px #f5c54222; }
.vc-lumiere { top: 5px; width: 38%; height: 70px; transform-origin: 50% 0; clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); background: linear-gradient(#f5c54299, #f5c54205); animation: vc-balaye 5s ease-in-out infinite alternate; }
.vc-lumiere.gauche { left: 12%; }
.vc-lumiere.droite { right: 12%; background: linear-gradient(#bca3ff99, #bca3ff05); animation-delay: -5s; }
.vc-micro { top: 29px; width: 10px; height: 15px; border: 1px solid #e5e9f5; border-radius: 6px; background: repeating-linear-gradient(0deg, #b5bed2 0 2px, #47516b 2px 3px); box-shadow: 0 0 8px #f5c54255; }
.vc-micro.gauche { left: calc(39% - 5px); }
.vc-micro.droite { right: calc(39% - 5px); }
.vc-micro::before { content: ""; position: absolute; top: 14px; left: 3px; width: 2px; height: 23px; background: linear-gradient(90deg, #6f7c94, #e5e9f5); }
.vc-micro::after { content: ""; position: absolute; top: 36px; left: -4px; width: 16px; height: 3px; border-radius: 50%; background: #b5bed2; }
.vc-enceinte { top: 46px; width: 15px; height: 21px; border: 1px solid #737f9b; border-radius: 3px; background: radial-gradient(circle at 50% 60%, #8390ac 0 2px, #0b1430 3px 5px, transparent 6px), #26324b; }
.vc-enceinte.gauche { left: 19%; }
.vc-enceinte.droite { right: 19%; }
.vignette-concert .vc-egaliseur { left: calc(50% - 13px); top: 40px; width: 26px; height: 22px; display: flex; align-items: flex-end; gap: 2px; }
.vc-egaliseur i { display: block; width: 4px; height: 19px; border-radius: 2px; background: var(--or); transform-origin: bottom; animation: vc-rythme 1.4s ease-in-out infinite alternate; }
.vc-egaliseur i:nth-child(2) { height: 13px; animation-delay: -0.4s; background: #c3a5fa; }
.vc-egaliseur i:nth-child(3) { height: 22px; animation-delay: -0.9s; }
.vc-egaliseur i:nth-child(4) { height: 15px; animation-delay: -0.2s; background: #c3a5fa; }
.vc-egaliseur i:nth-child(5) { height: 18px; animation-delay: -0.7s; }
.vc-public { left: 8%; right: 8%; top: 73px; height: 13px; background: radial-gradient(ellipse at 50% 100%, #050c20 60%, transparent 65%) 0 0 / 16px 13px repeat-x; animation: vc-public 2s ease-in-out infinite alternate; }
.saga-musique .saga-nom { background: #0b1430cf; border-radius: 4px; }
@keyframes vc-balaye { from { transform: rotate(-16deg); } to { transform: rotate(16deg); } }
@keyframes vc-rythme { from { transform: scaleY(0.3); opacity: 0.65; } to { transform: scaleY(1); opacity: 1; } }
@keyframes vc-public { from { transform: translateY(0); } to { transform: translateY(-2px); } }
.mus-scene { position: absolute; inset: 0; display: block; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse at 50% 0%, #39294f, var(--fond) 80%); }
.mus-scene > span { position: absolute; display: block; }
.mus-plancher { inset: auto 0 0; height: 28%; border-top: 2px solid var(--or); background: linear-gradient(180deg, #503b43, #111b37); transform: perspective(240px) rotateX(12deg); }
.mus-projecteur { top: -8%; width: 44%; height: 110%; transform-origin: 50% 0; clip-path: polygon(47% 0, 53% 0, 100% 100%, 0 100%); background: linear-gradient(180deg, #f5c54280, #f5c54200); animation: mus-lumiere 7s ease-in-out infinite alternate; }
.mus-projecteur.gauche { left: 0; }
.mus-projecteur.droite { right: 0; background: linear-gradient(180deg, #9585ed80, #9585ed00); animation-delay: -7s; }
.mus-micro { top: 24%; font-size: 2.6rem; filter: drop-shadow(0 0 8px #f5c54266); animation: mus-micro 3s ease-in-out infinite alternate; }
.mus-micro.gauche { left: 27%; }
.mus-micro.droite { right: 27%; animation-delay: -3s; }
.mus-micro::after { content: ""; position: absolute; width: 3px; height: 30px; background: #b8bfd2; top: 90%; left: 48%; }
.mus-notes { top: 14%; left: 40%; color: var(--or); font-size: 1.35rem; letter-spacing: 0.15em; animation: mus-notes 4s ease-in-out infinite; }
.mus-public { inset: auto 0 -3px; height: 22%; background: radial-gradient(ellipse at 50% 100%, #060d22 57%, transparent 60%) 0 0 / 27px 100% repeat-x; animation: mus-public 2s ease-in-out infinite alternate; }
.mus-decor { display: none; }
[data-theme="musique"] .mus-decor { display: block; }
[data-theme="musique"] .hp-ciel { display: none; }
.hp-scene[data-theme="musique"], .hi-scene[data-theme="musique"] { border-color: var(--or); background: var(--fond); }
[data-theme="musique"] .mus-projecteur { opacity: 0.35; }
[data-theme="musique"] .hp-parchemin { background: linear-gradient(180deg, #fff9e9, #f3e5c4); border-top: 4px solid var(--or); }
[data-theme="musique"] .hp-texte { font-family: system-ui, -apple-system, "Segoe UI", sans-serif; }
[data-theme="musique"] .hp-ennemi .hp-avatar { filter: drop-shadow(0 0 12px #f5c54288); }
[data-theme="musique"] .hp-barre > span { background: linear-gradient(90deg, #b397e8, var(--or)); }
[data-theme="musique"] .rayon { display: none; }
[data-theme="musique"].sort-joueur .hp-joueur .hp-avatar { animation: mus-applaudi 0.65s ease-out; }
[data-theme="musique"].sort-ennemi .hp-joueur .hp-avatar { animation: mus-fausse-note 0.5s ease-out; }
[data-theme="musique"] .hi-chapitres li { background: #0b1430db; }
[data-theme="musique"] .hi-niveau, [data-theme="musique"] .hi-sur-titre { color: var(--or); }
[data-theme="musique"] .hi-infos, [data-theme="musique"] .hi-retour, [data-theme="musique"] .hp-sauver { color: var(--texte); }
.cine-scene .mus-artiste { left: calc(50% - 36px); bottom: 23%; font-size: 72px; filter: drop-shadow(0 0 18px #f5c54288); animation: mus-micro 2s ease-in-out infinite alternate; }
.cine-scene .mus-accessoire { right: 18%; bottom: 25%; font-size: clamp(2rem, 8vw, 4rem); animation: mus-applaudi 1.2s ease-out both; }
.mus-enceinte { bottom: 22%; width: 10%; height: 28%; border: 2px solid #71809f; border-radius: 8px; background: radial-gradient(circle at 50% 32%, #172443 19%, #637087 20% 22%, transparent 23%), radial-gradient(circle at 50% 76%, #172443 19%, #637087 20% 22%, transparent 23%), #0a1021; }
.mus-enceinte.gauche { left: 10%; }
.mus-enceinte.droite { right: 10%; }
.mus-scene .mus-rideau { display: none; top: 0; bottom: 0; width: 51%; background: repeating-linear-gradient(90deg, #32172f 0, #632846 10%, #32172f 20%); }
.mus-rideau.gauche { left: 0; }
.mus-rideau.droite { right: 0; }
.mus-quartier .mus-public { height: 12%; background-size: 65px 100%; }
.mus-quartier .mus-enceinte { height: 18%; }
.mus-studio { background: repeating-linear-gradient(90deg, #18213c 0 24px, #25304c 24px 26px); }
.mus-studio .mus-public, .mus-studio .mus-projecteur { display: none; }
.mus-studio::after { content: "● ENREGISTREMENT"; position: absolute; top: 12%; left: 0; right: 0; text-align: center; color: var(--rouge); font-size: 0.9rem; letter-spacing: 0.12em; }
.mus-tournee .mus-accessoire { animation: mus-route 5s ease-in-out both; }
.mus-rappel .mus-projecteur { width: 70%; left: 15%; background: linear-gradient(180deg, #f5c542aa, transparent); animation: none; }
.mus-sacre .mus-notes { top: 12%; left: 15%; width: 70%; text-align: center; font-size: 3rem; letter-spacing: 0.4em; }
.mus-sacre .mus-accessoire { right: 22%; animation: mus-trophee 2s ease-out both; }
.mus-fin .mus-projecteur, .mus-fin .mus-notes { animation: none; opacity: 0.15; }
.mus-fin .mus-rideau { display: block; animation: mus-fermeture 3s ease-in-out both; }
.mus-fin .mus-rideau.droite { animation-name: mus-fermeture-droite; }
@keyframes mus-lumiere { from { transform: rotate(-22deg); } to { transform: rotate(22deg); } }
@keyframes mus-micro { from { transform: translateY(0) rotate(-6deg); } to { transform: translateY(-5px) rotate(6deg); } }
@keyframes mus-notes { 0%, 100% { opacity: 0.45; transform: translateY(3px); } 50% { opacity: 1; transform: translateY(-8px); } }
@keyframes mus-public { from { transform: translateY(0); } to { transform: translateY(-4px); } }
@keyframes mus-applaudi { 50% { transform: scale(1.15); } }
@keyframes mus-fausse-note { 25%, 75% { transform: translateX(-4px); } 50% { transform: translateX(4px); } }
@keyframes mus-route { from { transform: translateX(160px); opacity: 0; } to { transform: translateX(0); opacity: 1; } }
@keyframes mus-trophee { from { transform: translateY(60px) scale(0.7); opacity: 0; } to { transform: translateY(0) scale(1); opacity: 1; } }
@keyframes mus-fermeture { from { transform: translateX(-100%); } to { transform: translateX(0); } }
@keyframes mus-fermeture-droite { from { transform: translateX(100%); } to { transform: translateX(0); } }
@media (max-width: 560px) {
  .cine-scene .mus-artiste { font-size: 56px; left: calc(50% - 28px); }
  .cine-scene .mus-accessoire { right: 15%; }
}
@media (prefers-reduced-motion: reduce) {
  .mus-scene *, .vignette-concert *, [data-theme="musique"] .hp-avatar { animation: none !important; }
}

/* ===== Cinématiques football ===== */
.cine-footballeur { width: 44px; height: 110px; }
.cine-footballeur > span { position: absolute; display: block; }
.cine-footballeur .tete { left: 13px; top: 0; width: 18px; height: 18px; border-radius: 50%; background: #e0b48a; box-shadow: inset 0 5px 0 #3b2412; }
.cine-footballeur .maillot { left: 6px; top: 18px; width: 32px; height: 38px; border-radius: 8px 8px 4px 4px; }
.cine-footballeur .short { left: 9px; top: 54px; width: 26px; height: 16px; border-radius: 2px; background: #f2f2f2; }
.cine-footballeur .jambe { top: 68px; width: 8px; height: 40px; border-radius: 3px; background: linear-gradient(180deg, #e0b48a 0 40%, #f2f2f2 40% 85%, #111 85%); }
.cine-footballeur .jambe.g { left: 12px; } .cine-footballeur .jambe.d { left: 24px; }
.maillot-rouge .maillot { background: linear-gradient(180deg, #e63946, #a51b1b); }
.maillot-bleu .maillot { background: linear-gradient(180deg, #2b5bd7, #1a3a8f); }
.maillot-bleu .short { background: #fff; }
.maillot-vert .maillot { background: linear-gradient(180deg, #2ecc71, #1e8a4c); }

/* Petit stade du quartier */
.ps-ciel { inset: 0; background: linear-gradient(180deg, #ffb76b 0%, #ff8a65 40%, #8e5ea2 100%); }
.ps-soleil { left: 12%; top: 18%; width: 90px; height: 90px; border-radius: 50%; background: radial-gradient(circle, #fff4c2, #ffb347 70%); opacity: 0.9; }
.ps-spectateurs { left: 5%; right: 5%; bottom: 34%; height: 40px; background: radial-gradient(circle at 50% 30%, #3b2d4f 9px, transparent 10px) 0 0 / 36px 40px; animation: ola 1.2s ease-in-out infinite alternate; }
@keyframes ola { to { transform: translateY(-4px); } }
.ps-barriere { left: 0; right: 0; bottom: 30%; height: 26px; background: repeating-linear-gradient(90deg, #7a4a24 0 10px, transparent 10px 30px), linear-gradient(180deg, transparent 6px, #7a4a24 6px 10px, transparent 10px 16px, #7a4a24 16px 20px, transparent 20px); }
.ps-terrain { left: 0; right: 0; bottom: 0; height: 30%; background: linear-gradient(180deg, #5f9e3c, #3f7a28); }
.ps-but { right: 10%; bottom: 22%; width: 120px; height: 70px; border: 5px solid #fff; border-bottom: none; }
.ps-filet { position: absolute; inset: 0; display: block; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 10px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.45) 0 2px, transparent 2px 10px); animation: filet 7s ease-out forwards; }
@keyframes filet { 0%, 52% { transform: none; } 58% { transform: scale(1.12) translateX(8px); } 70%, 100% { transform: none; } }
.ps-joueur { left: 18%; bottom: 8%; animation: frappe 7s ease-out forwards; }
@keyframes frappe { 0%, 28% { transform: none; } 34% { transform: rotate(-8deg); } 42%, 100% { transform: none; } }
.ps-ballon { left: 26%; bottom: 9%; font-size: 1.6rem; animation: tir-ballon 7s ease-in forwards; }
@keyframes tir-ballon { 0%, 32% { transform: translate(0, 0) rotate(0); } 52% { transform: translate(300%, -160%) rotate(540deg); } 54%, 100% { left: 77%; bottom: 26%; transform: rotate(720deg); } }

/* Grand stade (pro, sélection, penalty, sacre) */
.st-nuit { inset: 0; background: radial-gradient(ellipse at 50% 0%, #22346b, #0b1530 60%, #050a16); }
.st-nuit.dore { background: radial-gradient(ellipse at 50% 30%, #6b4a10, #2a1d08 55%, #0b0a05); }
.st-pylone { top: 4%; width: 46px; height: 22px; border-radius: 3px; background: repeating-linear-gradient(90deg, #fffbe0 0 8px, #fff 8px 10px); box-shadow: 0 0 30px 12px rgba(255, 251, 224, 0.55); opacity: 0; animation: allume-projo 0.4s steps(2) forwards; }
.py1 { left: 6%; animation-delay: 0.4s; } .py2 { left: 30%; animation-delay: 0.9s; } .py3 { right: 30%; animation-delay: 1.4s; } .py4 { right: 6%; animation-delay: 1.9s; }
@keyframes allume-projo { 0% { opacity: 0; } 50% { opacity: 0.4; } 100% { opacity: 1; } }
.st-tribunes { left: 0; right: 0; top: 22%; height: 42%; background: radial-gradient(circle, rgba(255, 255, 255, 0.5) 1.4px, transparent 1.8px) 0 0 / 10px 10px, radial-gradient(circle, rgba(43, 91, 215, 0.6) 1.4px, transparent 1.8px) 5px 5px / 10px 10px, linear-gradient(180deg, #121c3c, #0e1730); overflow: hidden; }
.st-tribunes.sombre { opacity: 0.5; }
.st-ola { position: absolute; top: 0; bottom: 0; width: 18%; display: block; background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.35), transparent); animation: vague-ola 2.6s linear infinite; }
@keyframes vague-ola { from { left: -20%; } to { left: 110%; } }
.st-flashs { left: 0; right: 0; top: 22%; height: 42%; background: radial-gradient(circle, #fff 1.5px, transparent 3px) 0 0 / 60px 50px; animation: flashs 0.5s steps(2) infinite; opacity: 0.8; }
@keyframes flashs { 50% { background-position: 23px 17px; } }
.st-pelouse { left: 0; right: 0; bottom: 0; height: 36%; background: repeating-linear-gradient(90deg, #1e7a3c 0 70px, #1a6c35 70px 140px); }
.st-ecran { left: 50%; bottom: 40%; transform: translateX(-50%); padding: 8px 18px; border-radius: 6px; font-weight: 900; letter-spacing: 2px; color: #ffd447; background: #050505; border: 2px solid #333; white-space: nowrap; animation: ecran-pro 7s ease-out forwards; }
@keyframes ecran-pro { 0%, 30% { opacity: 0; transform: translateX(-50%) scale(0.7); } 40%, 100% { opacity: 1; transform: translateX(-50%) scale(1); } }

/* Sélection nationale : drapeau géant qui ondule, joueurs alignés pendant l'hymne */
.sel-drapeau { left: 50%; top: 24%; display: flex; width: 240px; height: 140px; margin-left: -120px; }
.sel-drapeau .tranche { background: linear-gradient(90deg, #0055a4 33.3%, #fff 33.3% 66.6%, #ef4135 66.6%); background-size: 240px 100%; background-position: calc(var(--i) * -20px) 0; }
.sel-equipe { left: 50%; bottom: 6%; display: flex; gap: 14px; transform: translateX(-50%); }
.sel-equipe .cine-footballeur { position: relative; animation: hymne 2s ease-in-out infinite; }
.sel-equipe .j2 { animation-delay: -0.4s; } .sel-equipe .j3 { animation-delay: -0.8s; } .sel-equipe .j4 { animation-delay: -1.2s; } .sel-equipe .j5 { animation-delay: -1.6s; }
@keyframes hymne { 50% { transform: translateY(-3px); } }

/* Penalty de la dernière minute : gardien qui oscille, cœur qui bat */
.pen-ecran { left: 50%; top: 8%; transform: translateX(-50%); padding: 6px 16px; border-radius: 6px; font-weight: 900; letter-spacing: 1px; color: #ff5d5d; background: #050505; border: 2px solid #333; white-space: nowrap; animation: clignote-ecran 1s steps(1) infinite; }
@keyframes clignote-ecran { 50% { color: #ffd447; } }
.pen-but { left: 50%; bottom: 30%; width: 300px; height: 120px; margin-left: -150px; border: 6px solid #fff; border-bottom: none; }
.pen-filet { position: absolute; inset: 0; display: block; background: repeating-linear-gradient(45deg, rgba(255, 255, 255, 0.3) 0 2px, transparent 2px 12px), repeating-linear-gradient(-45deg, rgba(255, 255, 255, 0.3) 0 2px, transparent 2px 12px); }
.pen-gardien { position: absolute; left: 50%; bottom: 0; margin-left: -22px; animation: gardien 1.6s ease-in-out infinite alternate; }
@keyframes gardien { from { transform: translateX(-70px) rotate(-6deg); } to { transform: translateX(70px) rotate(6deg); } }
.pen-point { left: 50%; bottom: 12%; width: 10px; height: 6px; margin-left: -5px; border-radius: 50%; background: #fff; }
.pen-ballon { left: 50%; bottom: 13%; margin-left: -14px; font-size: 1.8rem; animation: respire-ballon 1s ease-in-out infinite; }
@keyframes respire-ballon { 50% { transform: scale(1.08); } }
.pen-coeur { inset: 0; background: radial-gradient(ellipse at center, transparent 55%, rgba(120, 0, 0, 0.55)); animation: battement 0.9s ease-in-out infinite; }
@keyframes battement { 0%, 100% { opacity: 0.4; } 15% { opacity: 1; } 30% { opacity: 0.5; } 45% { opacity: 0.9; } }

/* Sacre : la Coupe du monde levée, le Ballon doré qui brille, des confettis */
.confettis { inset: -20% 0 0 0; background: radial-gradient(circle, #ffd447 2px, transparent 3px) 0 0 / 40px 46px, radial-gradient(circle, #3d8bff 2px, transparent 3px) 13px 20px / 52px 40px, radial-gradient(circle, #fff 2px, transparent 3px) 27px 8px / 46px 52px; animation: pluie 3s linear infinite; }
.confettis { opacity: 0.75; }
.confettis.c2 { animation-duration: 4.4s; opacity: 0.5; }
@keyframes pluie { from { background-position: 0 0, 13px 20px, 27px 8px; } to { background-position: 0 92px, 13px 100px, 27px 112px; } }
.sacre-rayons { z-index: 0; }
.sacre-joueur { left: calc(34% + 23px); bottom: 6%; z-index: 2; animation: souleve 8s ease-out forwards; }
.sacre-joueur::before, .sacre-joueur::after { content: ""; position: absolute; top: -26px; width: 8px; height: 46px; border-radius: 4px; background: linear-gradient(180deg, #e0b48a 0 45%, #2b5bd7 45%); }
.sacre-joueur::before { left: 2px; transform: rotate(-12deg); } .sacre-joueur::after { right: 2px; transform: rotate(12deg); }
.pro-joueur { left: 50%; bottom: 8%; margin-left: -22px; animation: entree-pro 7s ease-out forwards; }
@keyframes entree-pro { 0%, 20% { transform: translateY(60px) scale(0.6); opacity: 0; } 45%, 100% { transform: none; opacity: 1; } }
.sel-drapeau .tranche { flex: 1; animation: ondule 2.4s ease-in-out infinite; animation-delay: calc(var(--i) * -0.15s); }
@keyframes ondule { 0%, 100% { transform: translateY(0); filter: brightness(1); } 50% { transform: translateY(8px); filter: brightness(0.82); } }
.coupe-monde { left: 34%; bottom: calc(6% + 100px); width: 90px; height: 190px; animation: souleve 8s ease-out forwards; }
@keyframes souleve { 0% { transform: translateY(120px); } 30% { transform: translateY(-10px); } 40%, 100% { transform: translateY(0); } }
.coupe-monde > span { position: absolute; display: block; }
.coupe-globe { left: 15px; top: 0; width: 60px; height: 60px; border-radius: 50%; background: radial-gradient(circle at 35% 30%, #fff4c2, #f5c542 50%, #a87a14); box-shadow: 0 0 30px rgba(255, 212, 71, 0.7); }
.coupe-corps { left: 22px; top: 52px; width: 46px; height: 100px; background: linear-gradient(90deg, #a87a14, #ffe680, #c9971c); clip-path: polygon(10% 0, 90% 0, 70% 50%, 90% 100%, 10% 100%, 30% 50%); }
.coupe-socle { left: 18px; bottom: 0; width: 54px; height: 36px; border-radius: 4px; background: linear-gradient(180deg, #1e7a3c 0 30%, #c9971c 30% 45%, #1e7a3c 45% 75%, #a87a14 75%); }
.coupe-monde, .ballon-or { z-index: 2; }
.ballon-or { right: 30%; bottom: 22%; font-size: 4rem; filter: sepia(1) saturate(6) hue-rotate(5deg) brightness(1.15) drop-shadow(0 0 20px rgba(255, 212, 71, 0.9)); animation: ballon-or 8s ease-out forwards; }
@keyframes ballon-or { 0%, 45% { opacity: 0; transform: scale(0.2) rotate(-90deg); } 60%, 100% { opacity: 1; transform: scale(1) rotate(0); } }
.sacre-rayons { left: 50%; top: 50%; width: 600px; height: 600px; margin: -300px; background: repeating-conic-gradient(rgba(255, 212, 71, 0.09) 0 8deg, transparent 8deg 20deg); animation: tourne 18s linear infinite; }

/* Journal de fin de carrière, avec la tête et le pseudo du joueur */
.jr-table { inset: 0; background: radial-gradient(ellipse at center, #6b4a2e, #2e1d10); }
.jr-journal { left: 50%; top: 50%; width: 62%; height: 84%; display: block; padding: 3% 4%; background: #f4efe3; color: #1a1a1a; box-shadow: 0 20px 60px rgba(0, 0, 0, 0.7); transform: translate(-50%, -50%); animation: journal-arrive 1.4s cubic-bezier(0.2, 0.9, 0.3, 1) forwards; font-family: Georgia, "Times New Roman", serif; }
@keyframes journal-arrive { from { transform: translate(-50%, -50%) rotate(-720deg) scale(0.05); } to { transform: translate(-50%, -50%) rotate(-3deg) scale(1); } }
.jr-journal > span { position: relative; display: block; text-align: center; }
.jr-titre-journal { font-weight: 900; letter-spacing: 3px; font-size: 0.9rem; padding-bottom: 4px; border-bottom: 3px double #1a1a1a; }
.jr-une { margin: 8px 0; font-size: clamp(1.4rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: 2px; }
.jr-photo { width: 120px; height: 120px; margin: 0 auto; overflow: hidden; border: 3px solid #1a1a1a; background: linear-gradient(180deg, #9db3c8, #c9d6e2); filter: grayscale(1) contrast(1.2); }
.jr-photo > span { position: absolute; display: block; }
.jr-tete { left: 35px; top: 18px; width: 50px; height: 56px; border-radius: 50% 50% 45% 45%; background: #e0b48a; }
.jr-cheveux { position: absolute; display: block; left: -2px; top: -4px; width: 54px; height: 20px; border-radius: 50% 50% 20% 20%; background: #3b2412; }
.jr-oeil { position: absolute; display: block; top: 24px; width: 6px; height: 6px; border-radius: 50%; background: #1a1a1a; }
.jr-oeil.g { left: 13px; } .jr-oeil.d { right: 13px; }
.jr-bouche { position: absolute; display: block; left: 17px; top: 40px; width: 16px; height: 8px; border-top: 2px solid #1a1a1a; border-radius: 50% 50% 0 0; }
.jr-maillot { left: 20px; top: 74px; width: 80px; height: 50px; border-radius: 20px 20px 0 0; display: grid !important; place-items: center; font-family: system-ui, sans-serif; font-weight: 900; font-size: 1.4rem; color: #fff; background: #333; }
.jr-sous-titre { margin-top: 10px; font-style: italic; font-size: clamp(0.9rem, 2.2vw, 1.25rem); font-weight: 700; }
.jr-colonnes { height: 22%; margin-top: 10px; background: repeating-linear-gradient(180deg, #b9b2a3 0 3px, transparent 3px 9px); -webkit-mask: linear-gradient(90deg, #000 0 31%, transparent 31% 34%, #000 34% 65%, transparent 65% 68%, #000 68%); mask: linear-gradient(90deg, #000 0 31%, transparent 31% 34%, #000 34% 65%, transparent 65% 68%, #000 68%); }

@media (prefers-reduced-motion: reduce) {
  .foot-decor *, .saga-foot * { animation: none !important; }
}

/* NON STOP, capitales et profils : composants communs, variantes bleu nuit et or. */
.genie-choix { --genie-teinte: #71dbb5; --genie-ombre: #258f79; --genie-turban: #f5c542; }
.genie-choix[data-niveau="moyen"] { --genie-teinte: #c4a3ff; --genie-ombre: #7952c7; --genie-turban: #8cdde3; }
.genie-choix[data-niveau="fort"] { --genie-teinte: #94c5ff; --genie-ombre: #3260c7; --genie-turban: #e6d398; }
.genie-choix[data-niveau="champion"] { --genie-teinte: #ff9797; --genie-ombre: #ae354e; --genie-turban: #e7b34e; }
.niveaux label > .genie-choix, .genie-apercu { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; min-height: 210px; background: radial-gradient(ellipse at top, var(--fond-2), var(--fond)); border-radius: var(--rayon); }
.genie-choix strong { display: block; color: var(--genie-teinte); font-size: 1.2rem; letter-spacing: 0.03em; }
.genie-choix small { display: block; color: var(--texte-doux); font-size: 0.78rem; line-height: 1.4; }
.genie-choix .genie-portrait { font-size: 11px; margin: 8px 12px; }
.genie-choix .genie-corps, .genie-choix .genie-bras { background: linear-gradient(var(--genie-teinte), var(--genie-ombre)); }
.genie-choix .genie-tete { background: radial-gradient(circle at 40% 35%, var(--genie-teinte), var(--genie-ombre)); }
.genie-choix .genie-turban { background: linear-gradient(var(--genie-turban), var(--genie-ombre)); }
.genie-niveau { display: inline-block; color: var(--or); font-family: Cinzel, Georgia, serif; font-size: 0.72rem; font-weight: 700; font-style: normal; letter-spacing: 0.06em; text-transform: uppercase; padding: 5px 9px; border: 1px solid #f5c54255; border-radius: 999px; background: linear-gradient(120deg, #f5c54212, #f5c54204); }
.genie-apercu { flex-direction: row; gap: 18px; min-height: 110px; grid-column: 1 / -1; padding: 12px; border: 1px solid var(--bord); margin-bottom: 16px; }
.genie-apercu small { margin: 6px 0; }
.ns-reglages { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; }
.ns-genies { grid-column: 1 / -1; min-width: 0; }
.ns-genies .niveaux { margin-bottom: 8px; }
.ns-themes { margin: 20px 0; grid-template-columns: repeat(2, minmax(0, 1fr)); grid-auto-rows: 1fr; }
.ns-theme { min-width: 0; overflow: hidden; padding: 20px 14px; }
.ns-theme .categorie-titre { font-size: clamp(1rem, 2.8vw, 1.35rem); overflow-wrap: anywhere; }
.ns-theme-decor { display: grid; place-items: center; height: 80px; width: 100%; position: relative; overflow: hidden; border-radius: 12px; background: radial-gradient(ellipse, #354375, transparent 70%); }
.ns-theme-symbole { display: block; font-size: 2.6rem; line-height: 1; color: var(--or); text-shadow: 0 0 16px #f5c54244; }
.ns-theme[data-animation="voyage"] .ns-theme-symbole { animation: ns-voyage 3.6s ease-in-out infinite; }
.ns-theme[data-animation="orbite"] .ns-theme-symbole { animation: ns-orbite 5s ease-in-out infinite; }
.ns-theme[data-animation="rebond"] .ns-theme-symbole { animation: ns-rebond 2.2s ease-in-out infinite; }
.ns-theme[data-animation="eclat"] .ns-theme-symbole { animation: ns-eclat 3s ease-in-out infinite; }
.ns-theme[data-animation="rideau"] .ns-theme-symbole { animation: ns-rideau 4s ease-in-out infinite; }
.ns-theme[data-animation="mystere"] .ns-theme-symbole { font-family: Georgia, serif; font-weight: 800; animation: ns-mystere 3s ease-in-out infinite; }
.ns-theme.mystere .ns-theme-decor { background: radial-gradient(ellipse, #654191, transparent 70%); }
@keyframes ns-voyage { 50% { transform: translateY(-6px); filter: drop-shadow(0 8px 7px #f5c54255); } }
@keyframes ns-orbite { 50% { transform: rotate(14deg); filter: drop-shadow(0 0 9px #94c5ff88); } }
@keyframes ns-rebond { 50% { transform: translateY(-8px) rotate(-8deg); } }
@keyframes ns-eclat { 50% { filter: drop-shadow(0 0 12px var(--or)); transform: scale(1.08); } }
@keyframes ns-rideau { 50% { transform: perspective(160px) rotateY(18deg); } }
@keyframes ns-mystere { 50% { opacity: 0.6; text-shadow: 0 0 22px #cfafff; transform: scale(1.08); } }
.ns-theme.mystere { background: radial-gradient(ellipse at top, #4b347c, var(--carte)); }
.ns-horloge { color: var(--or); font-size: 2rem; font-weight: 900; font-variant-numeric: tabular-nums; }
.ns-presentateur { display: flex; align-items: center; gap: 20px; margin: 20px 0; padding: 20px; border: 1px solid var(--or); border-radius: var(--rayon); background: var(--fond-2); }
.ns-animateur { display: flex; flex-direction: column; align-items: center; flex-shrink: 0; font-size: 2.5rem; animation: ns-arrive 0.7s ease-out, ns-salue 2s 0.7s ease-in-out infinite; }
.ns-costume { margin-top: -10px; }
.ns-plateau { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; padding: 20px 0; background: radial-gradient(ellipse at top, #273a6b, transparent 70%); }
.ns-colonne { min-width: 0; }
.ns-colonne h2 { font-size: 1rem; color: var(--or); }
.ns-lumieres { display: grid; gap: 8px; list-style: none; padding: 0; }
.ns-lumiere { border: 2px solid var(--bord); border-radius: 10px; background: var(--fond); padding: 12px; overflow-wrap: anywhere; transition: background 0.3s, border-color 0.3s; }
.ns-lumiere::before { content: ""; display: inline-block; width: 12px; height: 12px; border-radius: 50%; background: var(--texte-doux); margin-right: 8px; }
.ns-lumiere.juste { border-color: var(--vert); background: #103c32; }
.ns-lumiere.faux { border-color: var(--rouge); background: #4a2335; }
.ns-lumiere.juste::before { background: var(--vert); box-shadow: 0 0 12px var(--vert); }
.ns-lumiere.faux::before { background: var(--rouge); box-shadow: 0 0 12px var(--rouge); }
.ns-page details { margin: 20px 0; line-height: 1.7; }
.ns-page summary { cursor: pointer; color: var(--or); }
.vignette-non-stop { background: radial-gradient(ellipse at top, #433476, var(--fond)); }
.non-stop-decor, .capitale-decor { display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 8px; font-size: 3rem; }
.non-stop-decor { gap: 16px; padding: 12px 16px; }
.ns-decor-legende, .capitale-decor span { font-size: 0.8rem; color: var(--texte-doux); text-align: center; }
.ns-voyants { display: flex; justify-content: center; align-items: center; gap: 14px; }
.ns-voyant { --couleur-voyant: var(--vert); display: block; flex: 0 0 26px; width: 26px; height: 26px; border-radius: 50%; background: #66708a; box-shadow: inset 0 2px 4px rgba(255, 255, 255, 0.2); animation: ns-voyant-1 4s linear infinite; }
.ns-voyant:nth-child(2) { animation-name: ns-voyant-2; }
.ns-voyant:nth-child(3) { animation-name: ns-voyant-3; }
.ns-voyant:nth-child(4) { --couleur-voyant: var(--rouge); animation-name: ns-voyant-4; }
@keyframes ns-voyant-1 { 0%, 14%, 90%, 100% { background: #66708a; box-shadow: none; } 18%, 85% { background: var(--couleur-voyant); box-shadow: 0 0 12px var(--couleur-voyant); } }
@keyframes ns-voyant-2 { 0%, 29%, 90%, 100% { background: #66708a; box-shadow: none; } 33%, 85% { background: var(--couleur-voyant); box-shadow: 0 0 12px var(--couleur-voyant); } }
@keyframes ns-voyant-3 { 0%, 44%, 90%, 100% { background: #66708a; box-shadow: none; } 48%, 85% { background: var(--couleur-voyant); box-shadow: 0 0 12px var(--couleur-voyant); } }
@keyframes ns-voyant-4 { 0%, 59%, 90%, 100% { background: #66708a; box-shadow: none; } 63%, 85% { background: var(--couleur-voyant); box-shadow: 0 0 12px var(--couleur-voyant); } }
.vignette-capitales { background: radial-gradient(ellipse at top, #194d64, var(--fond)); }
.capitale-question { display: flex; flex-direction: column; align-items: center; gap: 16px; padding: 24px; text-align: center; }
.capitale-pays { font-size: clamp(1.8rem, 5vw, 3rem); font-weight: 800; color: var(--or); }
.profils-liste { display: grid; gap: 10px; margin: 20px 0; }
.profil-entete { display: flex; align-items: center; gap: 16px; margin-bottom: 24px; }
.profil-entete h1 { margin: 0; overflow-wrap: anywhere; }
/* Titre honorifique sous le pseudo, couleur selon la rareté du défi */
.profil-identite { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.profil-titre { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-family: "Cinzel", Georgia, serif; font-weight: 700; font-size: 0.95rem; letter-spacing: 0.03em; color: var(--texte-doux); }
.profil-titre-icone { font-size: 1.1em; }
.profil-titre.titre-rare { color: var(--bleu); }
.profil-titre.titre-ultra-rare { color: #c58bff; }
.profil-titre.titre-genie { color: var(--or); text-shadow: 0 0 10px #f5c54266; }
.profil-choix-titre { flex-wrap: wrap; }
.profil-avatar { display: grid; place-items: center; width: 42px; height: 42px; flex-shrink: 0; border-radius: 50%; color: var(--or); background: var(--fond); border: 1px solid var(--or); font-weight: 800; }
.profil-avatar.grand { width: 64px; height: 64px; font-size: 1.8rem; }
.profil-reglages { max-width: 480px; }
.profil-trophees { display: flex; flex-wrap: wrap; gap: 12px; }
.defis-parcours { margin-top: 28px; padding-top: 8px; border-top: 1px solid var(--bord); }
.defis-parcours h2 { color: var(--or); }
.invitation-code { font-variant-numeric: tabular-nums; font-weight: 700; overflow-wrap: anywhere; color: var(--or); }
@keyframes ns-arrive { from { opacity: 0; transform: translateX(-30px); } to { opacity: 1; transform: translateX(0); } }
@keyframes ns-salue { 0%, 100% { transform: rotate(-4deg); } 50% { transform: rotate(4deg); } }
@media (max-width: 560px) {
  .ns-plateau { grid-template-columns: 1fr; }
  .ns-presentateur { gap: 12px; padding: 12px; }
  .ns-reglages { grid-template-columns: 1fr; }
  .ns-themes { gap: 10px; }
  .ns-theme { padding: 12px 8px; }
  .ns-theme .categorie-texte { font-size: 0.8rem; }
}
@media (prefers-reduced-motion: reduce) {
  .ns-animateur, .ns-voyant, .ns-theme .ns-theme-symbole { animation: none; }
  .ns-voyant { background: var(--couleur-voyant); }
  .ns-lumiere { transition: none; }
}

/* Menu */
.regles { padding-left: 20px; line-height: 1.6; color: var(--texte-doux); }
.regles strong { color: var(--texte); }
.champ { display: flex; flex-direction: column; gap: 6px; margin: 20px 0; font-weight: 600; }
input[type="text"], .champ input {
  font: inherit;
  padding: 12px 14px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--fond);
  color: var(--texte);
}
input:focus { outline: 2px solid var(--bleu); outline-offset: 1px; }

.niveaux { border: none; padding: 0; margin: 0 0 24px; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; }
.niveaux legend { font-weight: 600; margin-bottom: 8px; }
.niveaux input { position: absolute; opacity: 0; }
.niveaux label > span {
  display: block;
  text-align: center;
  padding: 12px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--fond);
  cursor: pointer;
}
.niveaux input:checked + span { border-color: var(--or); color: var(--or); box-shadow: 0 0 0 1px var(--or) inset; }
.niveaux input:focus-visible + span { outline: 2px solid var(--bleu); }
/* Mode de jeu des mini-jeux (Genies.choixMode) : contre un génie ou à deux sur cet écran */
.mode-duo .mode-duo-choix { margin-bottom: 12px; }
.mode-duo .mode-duo-pseudo { max-width: 340px; margin: 0 0 24px; }
.note { color: var(--texte-doux); font-size: 0.85rem; text-align: center; margin: 16px 0 0; }

/* Boutons */
.btn-principal, .btn-secondaire {
  border: none;
  border-radius: 10px;
  padding: 12px 20px;
  font-weight: 700;
}
.btn-principal { background: var(--or); color: #1b1600; }
.btn-secondaire { background: var(--fond); color: var(--texte); border: 1px solid var(--bord); }
.btn-principal.grand { width: 100%; padding: 16px; font-size: 1.15rem; }
.btn-lien { background: none; border: none; color: var(--texte-doux); text-decoration: underline; padding: 8px; }
button.btn-retour, button.retour-lien {
  display: inline-flex; align-items: center; justify-content: center; gap: 10px;
  min-height: 44px; max-width: 100%; padding: 10px 16px;
  border: 1px solid var(--bord); border-radius: 10px;
  background: var(--fond); color: var(--texte); text-decoration: none;
  font-weight: 600; line-height: 1.4; white-space: normal;
  transition: background-color 0.15s, border-color 0.15s, box-shadow 0.15s;
}
button.btn-retour-fleche::before { content: "←"; flex-shrink: 0; color: var(--or); font-size: 1.2em; }
button.btn-retour:hover, button.retour-lien:hover { background: var(--fond-2); border-color: var(--or); box-shadow: 0 0 0 1px var(--or); }
button.btn-retour:focus-visible, button.retour-lien:focus-visible { outline: 3px solid var(--bleu); outline-offset: 3px; }
button.btn-retour:active, button.retour-lien:active { box-shadow: inset 0 0 0 1px var(--or); }
@media (prefers-reduced-motion: reduce) {
  button.btn-retour, button.retour-lien { transition: none; }
}
.actions { display: flex; gap: 10px; flex-wrap: wrap; }
.actions.centre { justify-content: center; margin: 20px 0; }

/* Joueurs / chronos */
.joueurs { display: grid; grid-template-columns: 1fr auto 1fr; gap: 12px; align-items: center; }
.vs { font-weight: 800; color: var(--texte-doux); }
.joueur {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 14px;
  text-align: center;
  transition: border-color 0.2s, box-shadow 0.2s, opacity 0.2s;
  opacity: 0.6;
  min-width: 0;
}
.joueur.actif { opacity: 1; border-color: var(--or); box-shadow: 0 0 24px rgba(245, 197, 66, 0.25); }
.joueur .nom { display: block; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.joueur .chrono { display: block; font-size: 2.6rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.joueur.urgent .chrono { color: var(--rouge); }
.jauge { height: 6px; background: var(--fond); border-radius: 3px; overflow: hidden; }
.jauge > div { height: 100%; width: 100%; background: var(--or); }
.joueur.urgent .jauge > div { background: var(--rouge); }

/* Retour sur la dernière réponse */
.retour { min-height: 1.6em; margin: 16px 0; text-align: center; font-weight: 600; }
.retour.correct { color: var(--vert); }
.retour.faux { color: var(--rouge); }
.retour.passe { color: var(--orange); }

/* Zone de question */
.zone-question { min-height: 280px; }
.cache { display: none !important; }

.go { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 0; }
.go p { font-size: 1.3rem; font-weight: 600; margin: 0; }
.btn-go {
  position: relative;
  width: 160px;
  height: 160px;
  border-radius: 50%;
  border: none;
  background: var(--carte);
  color: var(--or);
  font-size: 2.6rem;
  font-weight: 900;
}
.btn-go:disabled { opacity: 0.8; }
.btn-go svg { position: absolute; inset: 0; transform: rotate(-90deg); }
.btn-go circle { fill: none; stroke-width: 6; }
.btn-go .fond { stroke: var(--bord); }
.btn-go .anneau { stroke: var(--or); stroke-dasharray: 283; stroke-dashoffset: 0; }
.btn-go.go-anneau-actif .anneau { animation: decompte 3s linear forwards; }
.btn-go span { position: relative; }
@keyframes decompte { to { stroke-dashoffset: 283; } }

/* Départs de La Pendule : commandes dorées et décompte séparé du texte. */
.pendule-entete { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 16px; }
.pendule-entete h1 { margin: 0; }
.pendule-son { flex-shrink: 0; font-size: 0.85rem; padding: 9px 13px; }
.pendule-son[aria-pressed="false"] { color: var(--texte-doux); }
.pendule-start { display: flex; align-items: center; justify-content: center; gap: 20px; text-align: left; background: linear-gradient(115deg, #ffe7a0, var(--or) 60%, #e3ac29); box-shadow: 0 6px 22px #f5c54222; }
.pendule-start strong { display: block; font-family: Cinzel, Georgia, serif; font-size: 1.6rem; letter-spacing: 0.12em; }
.pendule-start small { display: block; font-size: 0.82rem; margin-top: 4px; font-weight: 600; }
.pendule-start-icone { display: grid; place-items: center; width: 52px; height: 52px; border: 1px solid #583f2544; border-radius: 50%; font-size: 2rem; flex-shrink: 0; }
.pendule-start-fleche { font-size: 1.8rem; margin-left: auto; }
.pendule-start:hover { filter: brightness(1.06); }
.go.pendule-go { position: relative; padding: 28px 20px; gap: 14px; border: 1px solid var(--bord); border-radius: var(--rayon); background: radial-gradient(ellipse at top, #25376a, var(--fond)); text-align: center; overflow: hidden; }
.pendule-go-surtitre { color: var(--or); font-size: 0.72rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.13em; }
.pendule-compte { display: grid; place-items: center; width: 64px; height: 64px; border: 1px solid #f5c54266; border-radius: 50%; color: var(--or); font-size: 2rem; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: 0 0 25px #f5c54216, inset 0 0 20px #f5c5420a; }
#btn-go.pendule-go-bouton { display: flex; flex-direction: column; align-items: center; gap: 4px; width: min(100%, 320px); height: auto; min-height: 82px; padding: 14px 24px; border-radius: 12px; background: linear-gradient(120deg, #ffe6a0, var(--or)); color: #1b1600; box-shadow: 0 6px 20px #f5c54222; }
.pendule-go-libelle { font-family: Cinzel, Georgia, serif; font-size: 1.7rem; letter-spacing: 0.12em; }
.pendule-go-soustitre { font-size: 0.8rem; font-weight: 600; }
#btn-go:disabled { background: var(--carte); color: var(--texte-doux); border: 1px solid var(--bord); box-shadow: none; }
.go .pendule-go-aide { max-width: 440px; font-size: 0.82rem; font-weight: 400; line-height: 1.5; color: var(--texte-doux); }
@media (max-width: 560px) {
  .pendule-start { gap: 12px; }
  .pendule-start strong { font-size: 1.3rem; }
  .pendule-start small { font-size: 0.75rem; }
  .pendule-start-icone { width: 42px; height: 42px; }
}

.question {
  background: var(--carte);
  border: 2px solid var(--bord);
  border-radius: var(--rayon);
  padding: 20px;
  transition: border-color 0.2s;
}
.question.flash-vert { animation: flash-vert 0.9s ease-out; }
.question.flash-rouge { animation: flash-rouge 0.9s ease-out; }
@keyframes flash-vert {
  0%, 40% { background: rgba(46, 204, 113, 0.35); border-color: var(--vert); box-shadow: 0 0 28px rgba(46, 204, 113, 0.55); }
  20% { background: rgba(46, 204, 113, 0.15); }
  100% { background: var(--carte); border-color: var(--bord); box-shadow: none; }
}
@keyframes flash-rouge {
  0%, 40% { background: rgba(255, 93, 93, 0.35); border-color: var(--rouge); box-shadow: 0 0 28px rgba(255, 93, 93, 0.55); }
  20% { background: rgba(255, 93, 93, 0.15); }
  100% { background: var(--carte); border-color: var(--bord); box-shadow: none; }
}
@media (prefers-reduced-motion: reduce) {
  .question.flash-vert, .question.flash-rouge { animation-duration: 0.01s; }
}
.meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.badge {
  display: inline-block;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  background: var(--fond);
  border: 1px solid var(--bord);
  color: var(--bleu);
  padding: 3px 10px;
  border-radius: 999px;
}
.difficulte { color: var(--or); letter-spacing: 2px; font-size: 0.85rem; }
.q-texte { font-size: 1.45rem; font-weight: 600; line-height: 1.4; margin: 18px 0; }
#form-reponse { display: flex; flex-direction: column; gap: 10px; }
#saisie { font-size: 1.15rem; width: 100%; }
.bot-etat { color: var(--texte-doux); font-style: italic; min-height: 1.2em; margin: 10px 0 0; }

#btn-abandon { display: block; margin: 20px auto 0; }

/* Fin de partie */
#fin-titre.victoire { color: var(--vert); }
#fin-titre.defaite { color: var(--rouge); }
.stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 12px; }
.bloc-stats { background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 16px; }
.bloc-stats h3 { margin: 0 0 4px; font-size: 1rem; }
.bloc-stats p { margin: 0; color: var(--texte-doux); }

/* Récapitulatif des questions */
.recap { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 8px; }
.ligne { background: var(--fond); border: 1px solid var(--bord); border-left: 4px solid var(--bord); border-radius: 10px; padding: 10px 14px; }
.ligne.correct { border-left-color: var(--vert); }
.ligne.faux { border-left-color: var(--rouge); }
.ligne.passe, .ligne.temps { border-left-color: var(--orange); }
.ligne-entete { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; font-size: 0.85rem; }
.ligne.correct .statut { color: var(--vert); }
.ligne.faux .statut { color: var(--rouge); }
.ligne.passe .statut, .ligne.temps .statut { color: var(--orange); }
.statut { font-weight: 700; }
.qui { color: var(--texte-doux); }
.ligne-question { margin: 6px 0; font-weight: 600; }
.ligne-reponses { margin: 0; display: flex; flex-wrap: wrap; gap: 4px 16px; font-size: 0.9rem; }
.attendue { color: var(--vert); }
.donnee { color: var(--rouge); }
.vide, .aide { color: var(--texte-doux); }

/* Historique */
.barre-outils { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 16px; }
.interrupteur { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.partie { background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; margin-bottom: 8px; }
.partie summary { display: flex; flex-wrap: wrap; gap: 6px 12px; align-items: center; padding: 12px 14px; cursor: pointer; }
.partie[open] summary { border-bottom: 1px solid var(--bord); }
.partie .recap { padding: 10px; }
.partie .ligne { background: var(--carte); }
.resultat { font-weight: 800; }
.resultat.victoire { color: var(--vert); }
.resultat.defaite { color: var(--rouge); }
.date { color: var(--texte-doux); font-size: 0.85rem; margin-left: auto; }

/* Compte */
.carte.etroite { max-width: 460px; margin: 0 auto; }
.onglets { display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--fond); padding: 4px; border-radius: 10px; margin: 16px 0 4px; }
.onglets button { background: none; border: none; color: var(--texte-doux); padding: 10px; border-radius: 8px; font-weight: 600; }
.onglets button.actif { background: var(--carte); color: var(--texte); }
.champ input[type="password"] { width: 100%; }
.erreur { color: var(--rouge); min-height: 1.2em; margin: 0 0 12px; font-weight: 600; }

select {
  font: inherit;
  padding: 8px 12px;
  border-radius: 10px;
  border: 1px solid var(--bord);
  background: var(--fond);
  color: var(--texte);
}

/* Statistiques */
.tuiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.tuile { background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 14px 16px; display: flex; flex-direction: column; gap: 2px; }
.tuile-valeur { font-size: 1.8rem; font-weight: 800; font-variant-numeric: tabular-nums; }
.tuile-libelle { color: var(--texte-doux); font-size: 0.85rem; }

.bilan { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-top: 16px; }
.bilan-bloc { background: var(--fond); border: 1px solid var(--bord); border-radius: 10px; padding: 12px 16px; }
.bilan-bloc h3 { margin: 0 0 6px; font-size: 1rem; }
.bilan-bloc ul { margin: 0; padding-left: 18px; color: var(--texte-doux); line-height: 1.6; }

.barres { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 2px; }
.barre {
  display: grid;
  grid-template-columns: minmax(110px, 190px) 1fr 3.5em 4em;
  align-items: center;
  gap: 12px;
  padding: 6px 8px;
  border-radius: 8px;
}
.barre:hover { background: var(--fond); }
.barre-libelle { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.piste { height: 12px; background: var(--fond); border-radius: 4px; overflow: hidden; }
.remplissage { display: block; height: 100%; background: var(--or); border-radius: 0 4px 4px 0; }
.barre-valeur { text-align: right; font-weight: 700; font-variant-numeric: tabular-nums; }
.barre-detail { color: var(--texte-doux); font-size: 0.85rem; font-variant-numeric: tabular-nums; }
.barre.peu .barre-libelle, .barre.peu .barre-valeur { color: var(--texte-doux); font-weight: 400; }
.barre.peu .remplissage { background: var(--bord); }

@media (max-width: 560px) {
  .barre { grid-template-columns: 1fr 3.2em 3.5em; row-gap: 4px; }
  .barre .piste { grid-column: 1 / -1; grid-row: 2; }
  .entete { flex-wrap: wrap; gap: 8px; }
  .carte { padding: 18px; }
  .joueur .chrono { font-size: 2rem; }
  .vs { font-size: 0.8rem; }
  .q-texte { font-size: 1.2rem; }
  .btn-go { width: 130px; height: 130px; }
}