/* Révis Bac — feuille de style unique.
   Aucune couleur en dur ailleurs que dans ce fichier. */

/* ------------------------------------------------------------------ polices
   Outfit et Inter sont auto-hébergées : sans ça, une première ouverture hors ligne
   afficherait une police système, ce que le cahier des charges interdit.
   Fichiers à déposer dans /fonts/ (voir README). */

@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('/fonts/inter-400.woff2') format('woff2');
}
@font-face {
  font-family: 'Inter'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/inter-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 500; font-display: swap;
  src: url('/fonts/outfit-500.woff2') format('woff2');
}
@font-face {
  font-family: 'Outfit'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('/fonts/outfit-600.woff2') format('woff2');
}

/* ---------------------------------------------------------------- variables */

:root {
  /* Palette imposée. Ces huit valeurs ne se modifient pas. */
  --principale: #534AB7;
  --principale-claire: #7F77DD;
  --accent: #EF9F27;          /* XP, niveaux, hauts faits, série — rien d'autre */
  --or: #D4AF37;              /* quêtes rares et hauts faits légendaires — rien d'autre */
  --reussite: #1D9E75;
  --erreur: #D85A30;
  --fond-sombre: #14131F;
  --fond-clair: #FAFAFC;

  /* Raretés des hauts faits. */
  --rarete-commun: #888780;
  --rarete-rare: #7F77DD;
  --rarete-epique: #D4537E;
  --rarete-legendaire: #D4AF37;

  /* Couleurs de matière — repères visuels uniquement (liseré gauche des tuiles et
     des en-têtes de chapitre). Jamais de texte sur fond, jamais de fond plein :
     ces teintes ne sont pas testées en contraste. Reprises de Révis Brevet. */
  --m-philosophie: #b98cff;
  --m-francais: #e06c9f;
  --m-mathematiques: #4da3ff;
  --m-histoire: #d99a4e;
  --m-sciences: #45c98a;
  --m-anglais: #4ec9d6;
  --m-emc: #8d95a3;
  --m-oral: #ff8f5c;

  /* Mode sombre par défaut : c'est le mode de référence. */
  --fond: var(--fond-sombre);
  --fond-carte: #1C1A2B;
  --fond-carte-survol: #242137;
  --bordure: #2E2B42;
  --texte: #ECEBF3;
  --texte-doux: #A09DB4;

  /* Couleurs de TEXTE, distinctes des couleurs de fond.
     Sur fond sombre, --principale tombe à 2.65:1 : inutilisable pour du texte.
     On lit le violet clair, on peint avec le violet plein. */
  --texte-principale: var(--principale-claire);
  --texte-accent: var(--accent);
  --texte-or: var(--or);
  --texte-reussite: var(--reussite);
  --texte-erreur: var(--erreur);
  --sur-principale: #FFFFFF;

  --rayon: 14px;
  --rayon-petit: 9px;
  --gouttiere: 16px;
  --tactile: 44px;
  --largeur-max: 1100px;
  --titres: 'Outfit', sans-serif;
  --courant: 'Inter', sans-serif;
  --transition: 150ms ease;
  --ombre: 0 2px 10px rgba(0, 0, 0, 0.35);
}

/* Mode clair : les couleurs vives de la palette passent sous 4.5:1 sur #FAFAFC.
   On garde les teintes pour les fonds et les aplats, et on assombrit uniquement
   les variantes qui portent du texte. */
:root[data-theme="clair"] {
  --fond: var(--fond-clair);
  --fond-carte: #FFFFFF;
  --fond-carte-survol: #F1F0F7;
  --bordure: #DDDBE8;
  --texte: #1A1826;
  --texte-doux: #5C5872;

  --texte-principale: #534AB7;   /* 6.65:1 */
  --texte-accent: #9F640C;       /* 4.68:1 — l'ambre pur tombe à 2.09:1 */
  --texte-or: #886F1D;           /* 4.64:1 */
  --texte-reussite: #17805F;     /* 4.70:1 */
  --texte-erreur: #C44D25;       /* 4.54:1 */
  --ombre: 0 2px 10px rgba(30, 25, 60, 0.10);
}

@media (prefers-reduced-motion: reduce) {
  :root { --transition: 0ms; }
  *, *::before, *::after { animation-duration: 0.01ms !important; transition-duration: 0.01ms !important; }
}

/* --------------------------------------------------------------------- base */

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; font-size: var(--echelle, 100%); }

/* Bug réel trouvé et corrigé : `[hidden]` a la MÊME spécificité qu'une classe comme
   `.btn` ou `.menu-item`. Quand cette classe fixe elle aussi `display` (ce qui est son
   rôle), la règle du navigateur pour `[hidden]` — arrivée avant dans la feuille de style
   — perd, et l'élément reste visible malgré `element.hidden = true`. C'est ce qui gardait
   le bouton "Télécharger l'application" affiché après un clic censé le remplacer par les
   instructions manuelles. Cette ligne règle définitivement la question pour toute la
   page, présent et futur, plutôt que de corriger chaque classe une par une. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--fond);
  color: var(--texte);
  font-family: var(--courant);
  font-weight: 400;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, .chiffre {
  font-family: var(--titres);
  font-weight: 600;
  line-height: 1.25;
  margin: 0 0 12px;
}
h1 { font-size: 1.6rem; }
h2 { font-size: 1.2rem; font-weight: 500; }

p { margin: 0 0 14px; }
a { color: var(--texte-principale); }

.conteneur { width: 100%; max-width: var(--largeur-max); margin: 0 auto; padding: 0 var(--gouttiere); }
/* Haut et bas seulement : un raccourci « padding: 26px 0 60px » écrasait la gouttière
   de .conteneur sur tous les « section conteneur », collés au bord de l'écran en mobile. */
.section { padding-top: 26px; padding-bottom: 60px; }
.discret { color: var(--texte-doux); font-size: 0.92rem; }

:focus-visible {
  outline: 2px solid var(--texte-principale);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ------------------------------------------------------------------- entête */

.entete {
  position: sticky; top: 0; z-index: 20;
  background: color-mix(in srgb, var(--fond) 88%, transparent);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--bordure);
}
.entete-interne { display: flex; align-items: center; justify-content: space-between; height: 58px; }
.entete-actions { display: flex; gap: 8px; }

.logo {
  font-family: var(--titres); font-weight: 600; font-size: 1.15rem;
  color: var(--texte); text-decoration: none; letter-spacing: -0.01em;
}
.logo span { color: var(--texte-principale); }

/* ------------------------------------------------------------------ boutons */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--tactile); padding: 0 18px;
  font-family: var(--courant); font-size: 0.98rem; font-weight: 500;
  color: var(--texte);
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  cursor: pointer;
  transition: background var(--transition), border-color var(--transition), transform var(--transition);
}
/* Un lien habillé en bouton ne doit pas garder le soulignement des liens. */
a.btn { text-decoration: none; }
.btn:hover { background: var(--fond-carte-survol); }
.btn:active { transform: scale(0.985); }
.btn[disabled] { opacity: 0.55; cursor: not-allowed; }

/* Le violet plein ne sert qu'en aplat, avec du blanc dessus : 6.93:1. */
.btn-principal {
  background: var(--principale);
  border-color: var(--principale);
  color: var(--sur-principale);
  font-weight: 500;
}
.btn-principal:hover { background: var(--principale-claire); border-color: var(--principale-claire); }

.btn-icone { min-width: var(--tactile); padding: 0; color: var(--texte-doux); }

/* Dans l'en-tête, les icônes se passent de leur cadre : trois encadrés alignés sous le
   logo font une barre d'outils, alors qu'il s'agit de trois raccourcis. La zone tactile,
   elle, reste entière. */
.entete .btn-icone {
  background: none;
  border: 0;
  box-shadow: none;
  font-size: 1.4rem;
}
.entete .btn-icone:hover { background: none; color: var(--texte); }

/* ------------------------------------------------------------------- cartes */

.carte {
  background: var(--fond-carte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon);
  padding: 20px;
  box-shadow: var(--ombre);
}
.encadre-conseil { border-left: 3px solid var(--accent); }

/* ------------------------------------------------------- champs et messages */

.champ-code {
  width: 100%; min-height: 54px; padding: 12px 14px;
  background: var(--fond);
  color: var(--texte);
  border: 1px solid var(--bordure);
  border-radius: var(--rayon-petit);
  font-family: var(--titres); font-size: 1.15rem; font-weight: 500;
  letter-spacing: 0.08em; text-align: center; text-transform: uppercase;
  transition: border-color var(--transition);
}
.champ-code:focus { border-color: var(--principale-claire); outline: none; }
.champ-code::placeholder { color: var(--texte-doux); opacity: 0.65; letter-spacing: 0.06em; }
.champ-texte {
  font-family: var(--courant); font-size: 1rem; font-weight: 400;
  letter-spacing: normal; text-align: left; text-transform: none;
}

.engagement {
  display: flex; gap: 12px; align-items: flex-start;
  margin: 22px 0 4px;
  font-size: 0.9rem; color: var(--texte-doux);
}
.engagement input { margin-top: 4px; width: 18px; height: 18px; accent-color: var(--principale); flex: none; }

/* Le message porte une icône en plus de la couleur : jamais l'information par la couleur seule. */
.message { min-height: 22px; margin: 16px 0; font-size: 0.92rem; color: var(--texte-doux); }
.message.erreur::before { content: '✕ '; font-weight: 600; }
.message.succes::before { content: '✓ '; font-weight: 600; }
.message.erreur { color: var(--texte-erreur); }
.message.succes { color: var(--texte-reussite); }

/* --------------------------------------------------------- bannière de MAJ */

.banniere-maj {
  position: fixed; left: 50%; bottom: 16px; transform: translateX(-50%) translateY(140%);
  z-index: 40; display: flex; align-items: center; gap: 12px;
  width: calc(100% - 32px); max-width: 460px;
  padding: 12px 14px;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  transition: transform 220ms ease;
}
.banniere-maj[data-visible="oui"] { transform: translateX(-50%) translateY(0); }
.banniere-maj p { margin: 0; flex: 1; font-size: 0.92rem; }
.banniere-maj .fermer {
  background: none; border: 0; color: var(--texte-doux);
  font-size: 1.3rem; line-height: 1; cursor: pointer;
  min-width: 32px; min-height: 32px;
}

/* ------------------------------------------------------- quêtes et hauts faits */

.quete { display: flex; align-items: center; gap: 12px; padding: 10px 0; }
.quete + .quete { border-top: 1px solid var(--bordure); }
.quete-texte { flex: 1; font-size: 0.94rem; }
.quete-compte { flex: none; font-family: var(--titres); font-size: 0.86rem; color: var(--texte-doux); }
.quete[data-termine="oui"] .quete-texte { color: var(--texte-doux); text-decoration: line-through; }
.quete[data-termine="oui"] .quete-compte::after { content: ' ✓'; color: var(--texte-reussite); }

/* Les quêtes rares sont en or, comme les hauts faits légendaires, et nulle part ailleurs. */
.quete-rare { border-left: 3px solid var(--or); padding-left: 12px; }
.quete-rare .quete-compte { color: var(--texte-or); }

.mini-jauge { height: 4px; border-radius: 2px; background: var(--bordure); overflow: hidden; margin-top: 6px; }
.mini-jauge > div { height: 100%; background: var(--principale); }
.quete-rare .mini-jauge > div { background: var(--or); }

.grille-hauts-faits {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px;
}
.haut-fait {
  padding: 14px; border-radius: var(--rayon-petit);
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-top: 3px solid var(--teinte, var(--bordure));
}
.haut-fait[data-obtenu="non"] { opacity: 0.45; border-top-color: var(--bordure); }
.haut-fait-nom { font-family: var(--titres); font-weight: 500; font-size: 0.96rem; margin: 0 0 4px; }
.haut-fait-desc { font-size: 0.82rem; color: var(--texte-doux); margin: 0; line-height: 1.4; }
.haut-fait-rarete { font-size: 0.72rem; color: var(--teinte); text-transform: uppercase; letter-spacing: 0.06em; margin: 0 0 6px; }

/* ------------------------------------------------------------- surimpressions */

.surimpression {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(6px);
  animation: apparaitre 200ms ease;
}
.surimpression[data-sortie="oui"] { animation: disparaitre 240ms ease forwards; }

.surimpression-carte {
  max-width: 340px; width: 100%; padding: 26px 22px; text-align: center;
  background: var(--fond-carte); border: 1px solid var(--teinte);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  animation: surgir 320ms cubic-bezier(0.2, 1.3, 0.4, 1);
}
.surimpression-etiquette {
  margin: 0 0 10px; font-size: 0.74rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--teinte);
}
.surimpression-titre {
  margin: 0 0 8px; font-family: var(--titres); font-weight: 600; font-size: 1.5rem; color: var(--teinte);
}
.surimpression-sous { margin: 0; font-size: 0.94rem; color: var(--texte-doux); }

/* Le légendaire, et lui seul, a une bordure en or animée. */
.surimpression-carte.legendaire {
  border-width: 2px;
  background:
    linear-gradient(var(--fond-carte), var(--fond-carte)) padding-box,
    conic-gradient(from var(--tour, 0deg), #D4AF37, #FFF3C4, #D4AF37, #8A6D1F, #D4AF37) border-box;
  border-color: transparent;
  animation: surgir 320ms cubic-bezier(0.2, 1.3, 0.4, 1), tourner 3.2s linear infinite;
}

@property --tour { syntax: '<angle>'; inherits: false; initial-value: 0deg; }
@keyframes tourner { to { --tour: 360deg; } }
@keyframes apparaitre { from { opacity: 0; } to { opacity: 1; } }
@keyframes disparaitre { to { opacity: 0; } }
@keyframes surgir { from { opacity: 0; transform: scale(0.9) translateY(12px); } to { opacity: 1; transform: none; } }

/* Repli sans animation : le contenu doit rester lisible et fermable. */
@media (prefers-reduced-motion: reduce) {
  .surimpression, .surimpression-carte, .surimpression-carte.legendaire { animation: none; }
}

/* ------------------------------------------------------- bilan hebdomadaire (stories) */

.bilan-superposition {
  position: fixed; inset: 0; z-index: 80;
  display: flex; align-items: center; justify-content: center;
  background: var(--fond-sombre);
  animation: apparaitre 200ms ease;
}
.bilan-superposition[data-sortie="oui"] { animation: disparaitre 240ms ease forwards; }

.bilan-barres {
  position: absolute; top: 14px; left: 14px; right: 14px;
  display: flex; gap: 6px; z-index: 2;
}
.bilan-barre { flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.22); overflow: hidden; }
/* Largeur pilotée en JS (bilan.js), pas par [data-etat] : un attribut qui change sans que
   la valeur cible de la transition change (ici "width: 100%" dans les deux cas) peut laisser
   certains moteurs ne pas relancer/annuler proprement une transition déjà en cours — la barre
   reste alors visuellement bloquée en plein milieu de son animation au lieu de sauter à 100 %. */
.bilan-barre > div { height: 100%; width: 0; background: #fff; }

.bilan-fermer {
  position: absolute; top: 24px; right: 14px; z-index: 2;
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: rgba(255,255,255,0.12); color: #fff; font-size: 1.1rem; line-height: 1;
  cursor: pointer;
}

.bilan-zone { position: absolute; top: 0; bottom: 0; width: 35%; z-index: 1; cursor: pointer; }
.bilan-zone-gauche { left: 0; }
.bilan-zone-droite { right: 0; }

.bilan-carte {
  max-width: 380px; width: calc(100% - 48px); text-align: center; color: #fff;
  padding: 0 8px;
}
.bilan-etiquette {
  margin: 0 0 14px; font-size: 0.8rem; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--accent);
}
.bilan-titre {
  margin: 0; font-family: var(--titres); font-weight: 600; font-size: 2.4rem; line-height: 1.15;
  word-break: break-word;
}
.bilan-sous { margin: 6px 0 0; font-size: 1.05rem; color: rgba(255,255,255,0.75); }
.bilan-texte { margin: 18px 0 0; font-size: 0.98rem; color: rgba(255,255,255,0.75); line-height: 1.5; }
.bilan-continuer { margin-top: 26px; }

.bilan-carte.bilan-anime .bilan-etiquette,
.bilan-carte.bilan-anime .bilan-titre,
.bilan-carte.bilan-anime .bilan-sous,
.bilan-carte.bilan-anime .bilan-texte,
.bilan-carte.bilan-anime .bilan-continuer {
  animation: surgir 380ms cubic-bezier(0.2, 1.3, 0.4, 1) both;
}
.bilan-carte.bilan-anime .bilan-titre { animation-delay: 60ms; }
.bilan-carte.bilan-anime .bilan-sous { animation-delay: 110ms; }
.bilan-carte.bilan-anime .bilan-texte { animation-delay: 160ms; }
.bilan-carte.bilan-anime .bilan-continuer { animation-delay: 210ms; }

@media (prefers-reduced-motion: reduce) {
  .bilan-superposition, .bilan-carte.bilan-anime * { animation: none; }
}

/* --------------------------------------------------------- carte d'installation */

.carte-install { border-left: 3px solid var(--principale); margin-bottom: 20px; }
.install-titre { margin: 0 0 6px; font-family: var(--titres); font-weight: 600; font-size: 1.08rem; }
.install-texte { margin: 0 0 14px; font-size: 0.92rem; color: var(--texte-doux); }
.install-message:empty { display: none; }
.install-message { margin: 12px 0 0; }

.install-etapes { margin-top: 4px; }
.install-etape {
  display: flex; gap: 10px; align-items: flex-start;
  margin: 0 0 10px; font-size: 0.92rem; line-height: 1.5;
}
.install-etape:last-child { margin-bottom: 0; }
.install-numero {
  flex: none; width: 22px; height: 22px; margin-top: 1px;
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--principale); color: var(--sur-principale);
  font-family: var(--titres); font-size: 0.78rem; font-weight: 600;
}

.install-plus-tard {
  display: block; width: 100%; margin-top: 12px; padding: 8px 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--courant); font-size: 0.86rem;
  color: var(--texte-doux); text-decoration: underline;
}

.install-glyphe {
  width: 17px; height: 17px; vertical-align: -3px; margin-left: 2px;
  color: var(--texte-principale);
}

.quete-icone { flex: none; font-size: 1.3rem; line-height: 1; width: 26px; text-align: center; }
.quete-titre { font-family: var(--titres); font-weight: 500; font-size: 0.94rem; }
.quete-texte { font-size: 0.86rem; color: var(--texte-doux); }
.quete[data-termine="oui"] .quete-titre { text-decoration: line-through; color: var(--texte-doux); }
.haut-fait-icone { margin-right: 6px; font-size: 0.95rem; }
.haut-fait-xp { margin: 8px 0 0; font-size: 0.78rem; color: var(--texte-accent); font-family: var(--titres); }
.haut-fait[data-obtenu="non"] .haut-fait-xp { color: var(--texte-doux); }

/* ------------------------------------------------------- épreuves et flashcards */

.entete-epreuve { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.chrono { margin: 0; font-family: var(--titres); font-weight: 600; font-size: 1.5rem; }
.chrono[data-urgent="oui"] { color: var(--texte-erreur); }

.reponse[data-actif="oui"] { border-color: var(--principale); background: var(--fond-carte-survol); font-weight: 500; }

.champ-redaction {
  width: 100%; padding: 12px 14px; resize: vertical;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-family: var(--courant); font-size: 1rem; line-height: 1.6;
}
.champ-redaction:focus { border-color: var(--principale-claire); outline: none; }

/* La carte occupe tout l'espace : le verso ne doit jamais être visible du coin de l'œil. */
.carte-flash {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px;
  width: 100%; min-height: 170px; padding: 26px 20px; text-align: center; cursor: pointer;
  background: var(--fond-carte); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon); box-shadow: var(--ombre);
  font-family: var(--courant);
  transition: border-color var(--transition), transform var(--transition);
}
.carte-flash:active { transform: scale(0.995); }
.carte-flash.retournee { border-color: var(--principale-claire); }
.flash-face { font-family: var(--titres); font-weight: 600; font-size: 1.16rem; line-height: 1.4; }
.carte-flash.retournee .flash-face { font-size: 1.08rem; font-weight: 400; font-family: var(--courant); }
.flash-indice { font-size: 0.84rem; color: var(--texte-doux); }

.verdicts { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 8px; }
.verdicts .btn { padding: 0 8px; font-size: 0.9rem; }

/* ------------------------------------------------------------- tuiles matière */

.tuile-matiere {
  display: block;
  border-left: 4px solid var(--accent-matiere, var(--principale-claire));
  text-decoration: none;
  color: inherit;
}
.tuile-matiere:hover { background: var(--fond-carte-survol); }
.tuile-matiere[aria-disabled="true"] { opacity: 0.6; pointer-events: none; }

/* --------------------------------------------------------------- fil d'ariane
   Repris de Révis Brevet : chaque étape est un bouton, la dernière n'est pas
   cliquable. Sur un module ouvert depuis une matière, c'est le seul chemin de
   retour visible — la croix de l'en-tête ramène à l'accueil, pas à l'étape d'avant. */

.fil { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.fil .btn { padding: 0 14px; min-height: 40px; font-size: 0.9rem; text-decoration: none; }
.fil [aria-current="page"] { color: var(--texte-doux); cursor: default; }

/* ------------------------------------------------------------ barre d'onglets
   Fixée en bas, avec le bouton central en relief : c'est lui qui porte l'action
   qu'on veut voir répétée tous les jours, la séance. Les quatre autres sont plats.
   Toutes les cibles font au moins --tactile de haut, et la barre respecte la zone
   sûre des téléphones à encoche ou à barre gestuelle. */

.onglets {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
  display: flex; align-items: flex-end; justify-content: space-around;
  padding: 6px 4px calc(6px + env(safe-area-inset-bottom));
  background: var(--fond-entete);
  border-top: 1px solid var(--bordure);
  backdrop-filter: blur(12px);
}

.onglet {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  min-height: var(--tactile); padding: 6px 2px;
  color: var(--texte-doux); text-decoration: none;
  border-radius: var(--rayon-petit);
  transition: color var(--transition);
}
.onglet:hover { color: var(--texte); }
.onglet[aria-current="page"] { color: var(--principale-claire); }

.onglet-icone { font-size: 1.24rem; line-height: 1; }
.onglet-nom { font-size: 0.68rem; font-family: var(--courant); letter-spacing: 0.01em; }

/* Le bouton central déborde vers le haut. margin-top négatif plutôt que translate :
   la zone tactile suit le bouton, alors qu'une transformation la laisserait en bas. */
.onglet-central {
  flex: 0 0 auto;
  margin: -22px 6px 0;
  width: 58px; height: 58px; min-height: 58px; padding: 0;
  border-radius: 50%;
  background: var(--principale);
  color: #fff;
  box-shadow: 0 6px 18px rgba(83, 74, 183, 0.45);
  gap: 0;
}
.onglet-central:hover { color: #fff; background: var(--principale-claire); }
.onglet-central[aria-current="page"] { color: #fff; }
.onglet-central .onglet-icone { font-size: 1.3rem; }
.onglet-central .onglet-nom {
  font-size: 0.6rem; margin-top: 1px;
}

/* La barre est en position fixe : sans réserve, elle masque la fin du contenu. */
body.avec-onglets { padding-bottom: calc(84px + env(safe-area-inset-bottom)); }

@media (prefers-reduced-motion: reduce) {
  .onglet { transition: none; }
}

/* ------------------------------------------------- référence d'une explication
   En philosophie, une thèse sans son texte n'apprend rien : on affiche l'œuvre, sa
   date et les dates de l'auteur sous l'explication, en retrait typographique. */

.reference {
  margin: 10px 0 0;
  padding-top: 8px;
  border-top: 1px solid var(--bordure);
  font-size: 0.84rem;
  color: var(--texte-doux);
  font-style: italic;
}
.explication { white-space: pre-line; }

/* Spécialité SVT : vert, distinct du vert de l'enseignement scientifique. */
:root { --m-svt: #86c34e; }

/* ------------------------------------------------------- QCM en conditions réelles
   Jusqu'ici définis en local dans session.html et demo.html : chaque module qui rend
   des QCM devait redéfinir jauge et reponse pour ne pas s'afficher nu. Remontés ici
   pour que /matiere.html — qui monte automatismes.js et melimelo.js sans jamais
   redéclarer ces classes — les affiche correctement. */

.jauge { height: 6px; border-radius: 3px; background: var(--bordure); overflow: hidden; }
.jauge > div { height: 100%; background: var(--principale); width: 0; transition: width 300ms ease; }

.reponse {
  display: block; width: 100%; text-align: left;
  margin-bottom: 10px; padding: 14px 16px; min-height: var(--tactile);
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-family: var(--courant); font-size: 1rem; line-height: 1.45; cursor: pointer;
  transition: border-color var(--transition), background var(--transition), transform var(--transition);
}
.reponse:hover:not([disabled]) { background: var(--fond-carte-survol); }
.reponse[disabled] { cursor: default; opacity: 1; }
.reponse[data-etat="juste"] { border-color: var(--reussite); color: var(--texte-reussite); font-weight: 500; }
.reponse[data-etat="juste"]::before { content: '✓  '; font-weight: 600; }
.reponse[data-etat="faux"] { border-color: var(--erreur); color: var(--texte-erreur); animation: secousse 260ms ease; }
.reponse[data-etat="faux"]::before { content: '✕  '; font-weight: 600; }

@keyframes secousse {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-5px); }
  75% { transform: translateX(5px); }
}

.explication {
  margin-top: 14px; padding: 14px 16px;
  background: var(--fond); border-left: 3px solid var(--principale-claire);
  border-radius: var(--rayon-petit); font-size: 0.94rem;
}

/* ---------------------------------------------------- repères géographiques (carte) */

.reperes-carte-conteneur {
  position: relative; width: 100%; line-height: 0;
  border-radius: var(--rayon-petit); overflow: hidden; border: 1px solid var(--bordure);
}
.reperes-image { display: block; width: 100%; height: auto; }

.reperes-pastille {
  position: absolute; transform: translate(-50%, -50%);
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--fond); color: var(--texte);
  border: 2px solid var(--principale); box-shadow: 0 1px 4px rgba(0,0,0,0.35);
  font-family: var(--titres); font-weight: 600; font-size: 0.82rem; line-height: 1;
  cursor: pointer; padding: 0;
}
.reperes-pastille[data-actif="oui"] {
  background: var(--principale); color: #fff;
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--principale) 35%, transparent);
}
.reperes-pastille[data-etat="trouve"] {
  background: var(--reussite); color: #fff; border-color: var(--reussite); cursor: default;
}

.reperes-propositions { display: flex; flex-wrap: wrap; gap: 8px; }
.reperes-proposition {
  min-height: var(--tactile); padding: 8px 14px;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: 999px;
  font-family: var(--courant); font-size: 0.92rem; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.reperes-proposition:hover:not([disabled]) { background: var(--fond-carte-survol); }
.reperes-proposition[disabled] { cursor: default; }
.reperes-proposition[data-etat="trouve"] { border-color: var(--reussite); color: var(--texte-reussite); opacity: 0.7; }
.reperes-proposition[data-etat="faux"] { border-color: var(--erreur); color: var(--texte-erreur); animation: secousse 260ms ease; }

/* --------------------------------------------------------- frise chronologique */

.frise-timeline {
  display: flex; flex-direction: column; gap: 8px;
  min-height: 44px; padding: 10px;
  background: var(--fond); border: 1px dashed var(--bordure); border-radius: var(--rayon-petit);
}
.frise-pioche { display: flex; flex-direction: column; gap: 8px; }

.frise-carte {
  display: flex; align-items: center; gap: 10px;
  width: 100%; min-height: var(--tactile); padding: 10px 14px;
  background: var(--fond-carte, var(--fond)); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-family: var(--courant); font-size: 0.92rem; text-align: left; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.frise-carte:hover { background: var(--fond-carte-survol); }
.frise-carte[data-zone="posee"] { border-color: var(--principale); }
.frise-carte[data-etat="juste"] { border-color: var(--reussite); color: var(--texte-reussite); cursor: default; }
.frise-carte[data-etat="faux"] { border-color: var(--erreur); color: var(--texte-erreur); cursor: default; }

.frise-rang {
  flex: 0 0 auto; width: 24px; height: 24px; display: grid; place-items: center;
  border-radius: 50%; background: var(--principale); color: #fff;
  font-family: var(--titres); font-weight: 600; font-size: 0.78rem;
}
.frise-carte[data-etat="juste"] .frise-rang { background: var(--reussite); }
.frise-carte[data-etat="faux"] .frise-rang { background: var(--erreur); }

/* --------------------------------------------------------- avant ou après ? */

.aa-portees { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 8px; }
.aa-portee {
  display: flex; flex-direction: column; gap: 2px; align-items: flex-start;
  min-height: var(--tactile); padding: 10px 12px;
  background: var(--fond); color: var(--texte);
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-family: var(--courant); font-size: 0.92rem; text-align: left; cursor: pointer;
  transition: border-color var(--transition), background var(--transition);
}
.aa-portee .discret { font-size: 0.8rem; }
.aa-portee:hover { background: var(--fond-carte-survol); }
.aa-portee[aria-checked="true"] { border-color: var(--principale); box-shadow: inset 0 0 0 1px var(--principale); font-weight: 500; }

.aa-plateau { margin: 14px 0; }
.aa-evenement {
  padding: 14px 16px; border-radius: var(--rayon);
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-left: 4px solid var(--accent-matiere, var(--principale-claire));
  transition: border-color var(--transition);
}
.aa-evenement[data-role="mystere"] { border-style: dashed; border-left-style: solid; }
.aa-evenement[data-etat="juste"] { border-color: var(--reussite); border-style: solid; }
.aa-evenement[data-etat="faux"] { border-color: var(--erreur); border-style: solid; }
.aa-etiquette { margin: 0 0 4px; font-size: 0.76rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--texte-doux); }
.aa-texte { margin: 0 0 6px; font-size: 1.05rem; line-height: 1.4; }
.aa-date { margin: 0; font-family: var(--titres); font-weight: 600; font-size: 1.15rem; color: var(--texte-principale); }
.aa-date[data-revele="oui"] { animation: aa-revele 380ms ease; }
.aa-evenement[data-etat="juste"] .aa-date { color: var(--texte-reussite); }
.aa-evenement[data-etat="faux"] .aa-date { color: var(--texte-erreur); }
.aa-question { margin: 12px 0; text-align: center; font-size: 0.9rem; color: var(--texte-doux); }
.aa-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.aa-choix .reponse { margin: 0; text-align: center; font-weight: 500; }
/* Sous les boutons : il apparaît sans déplacer ce que le pouce vient de toucher. */
.aa-bandeau { margin: 12px 0 0; text-align: center; }

@keyframes aa-revele {
  from { opacity: 0; transform: translateY(4px); }
  to { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .aa-date[data-revele="oui"] { animation: none; }
}

/* ------------------------------------------------------- jeux et défi du jour */

.defi-carte { border: 1px solid var(--principale-claire); border-left-width: 4px; }
.defi-titre { margin: 0 0 6px; font-family: var(--titres); font-weight: 600; font-size: 1.02rem; }
.defi-jeu { margin: 0 0 6px; font-size: 1.05rem; font-weight: 500; }
.defi-bandeau {
  margin: 0 0 14px; padding: 10px 12px; border-radius: var(--rayon-petit);
  background: color-mix(in srgb, var(--principale) 14%, transparent);
  border: 1px solid color-mix(in srgb, var(--principale-claire) 45%, transparent);
}
.defi-bandeau .defi-titre { margin-bottom: 2px; font-size: 0.95rem; }
.defi-resultat {
  margin: 12px 0 0; padding: 8px 10px; border-radius: var(--rayon-petit); font-size: 0.9rem;
  background: color-mix(in srgb, var(--principale) 14%, transparent);
}

.jeux-liste { display: flex; flex-direction: column; gap: 10px; }
.jeu-carte {
  display: flex; align-items: center; gap: 14px; padding: 14px 16px;
  color: inherit; text-decoration: none;
  transition: background var(--transition), border-color var(--transition);
}
.jeu-carte:hover { background: var(--fond-carte-survol); border-color: var(--principale-claire); }
.jeu-icone { flex: none; font-size: 1.6rem; width: 36px; text-align: center; }
.jeu-texte { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.jeu-nom { font-weight: 500; }
.jeu-matiere { font-size: 0.82rem; }
.jeu-detail { font-size: 0.84rem; }
.jeu-record { flex: none; text-align: right; font-size: 1.1rem; line-height: 1.2; }
.jeu-record .discret { display: block; font-size: 0.74rem; }

/* ------------------------------------------------------------------ faux amis */

/* overflow-x: clip — la carte glissée ne doit pas créer de défilement horizontal. */
.fa-scene { position: relative; margin: 0 0 14px; padding-top: 14px; overflow-x: clip; }
.fa-indice {
  position: absolute; top: 0; z-index: 2; padding: 3px 10px; border-radius: 999px;
  font-size: 0.8rem; font-weight: 500; opacity: 0; transition: opacity var(--transition);
  pointer-events: none;
}
.fa-indice-gauche { left: 8px; color: var(--texte-erreur); border: 1px solid var(--erreur); background: var(--fond); }
.fa-indice-droite { right: 8px; color: var(--texte-reussite); border: 1px solid var(--reussite); background: var(--fond); }
.fa-scene[data-penche="gauche"] .fa-indice-gauche,
.fa-scene[data-penche="droite"] .fa-indice-droite { opacity: 1; }
.fa-carte {
  position: relative; text-align: center; padding: 22px 18px;
  border-left: 4px solid var(--accent-matiere, var(--principale-claire));
  touch-action: pan-y; user-select: none; -webkit-user-select: none; cursor: grab;
  transition: transform 180ms ease, border-color var(--transition);
}
.fa-carte.fa-tenue { transition: none; cursor: grabbing; }
.fa-carte[data-etat="juste"] { border-color: var(--reussite); }
.fa-carte[data-etat="faux"] { border-color: var(--erreur); }
.fa-mot { margin: 0 0 8px; font-family: var(--titres); font-weight: 600; font-size: 1.7rem; line-height: 1.2; }
.fa-exemple { margin: 0 0 16px; font-style: italic; color: var(--texte-doux); font-size: 0.95rem; }
.fa-veut-dire { margin: 0 0 2px; font-size: 0.82rem; color: var(--texte-doux); }
.fa-proposition { margin: 0; font-family: var(--titres); font-weight: 500; font-size: 1.3rem; color: var(--texte-principale); }
.fa-revelation {
  margin-top: 16px; padding: 12px 14px; text-align: left; font-size: 0.94rem;
  background: var(--fond); border-radius: var(--rayon-petit);
}
@media (prefers-reduced-motion: reduce) {
  .fa-carte { transition: none; }
}

/* ------------------------------------------------------------- qui a dit ça ? */

.qad-citation {
  margin: 0 0 12px; padding: 4px 0 4px 16px;
  border-left: 3px solid var(--accent-matiere, var(--principale-claire));
  font-family: var(--titres); font-weight: 500; font-size: 1.15rem; line-height: 1.45;
}
.qad-touche {
  display: inline-grid; place-items: center; width: 22px; height: 22px; margin-right: 10px;
  border-radius: 6px; border: 1px solid var(--bordure);
  font-size: 0.78rem; color: var(--texte-doux); vertical-align: 1px;
}
.reponse[data-etat] .qad-touche { display: none; }
.qad-oeuvre { margin: 14px 0 0; font-size: 0.92rem; color: var(--texte-doux); }

/* ------------------------------------------------------------- chasse aux figures */

.fig-extrait { font-size: 1.05rem; }
.fig-cible {
  background: color-mix(in srgb, var(--accent-matiere, var(--principale-claire)) 28%, transparent);
  color: inherit; border-radius: 4px; padding: 0 3px;
  box-decoration-break: clone; -webkit-box-decoration-break: clone;
}

/* Bandeau « Bonne réponse ! » / « Faux » / « Temps écoulé » du méli-mélo chronométré. */
.banniere-etat {
  margin: 0 0 14px; padding: 10px 14px;
  border-radius: var(--rayon-petit); font-weight: 500; font-size: 0.94rem;
}
.banniere-etat[data-etat="juste"] { background: color-mix(in srgb, var(--reussite) 16%, transparent); color: var(--texte-reussite); }
.banniere-etat[data-etat="faux"] { background: color-mix(in srgb, var(--erreur) 16%, transparent); color: var(--texte-erreur); }

@media (prefers-reduced-motion: reduce) {
  .reponse[data-etat="faux"] { animation: none; }
  [data-roue-groupe] { transition-duration: 200ms !important; }
}

/* ------------------------------------------------------------- roue de la fortune */

.roue-superposition {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(6px);
  animation: apparaitre 180ms ease;
}

.roue-panneau {
  position: relative; width: 100%; max-width: 340px;
  padding: 28px 20px 24px; text-align: center;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  animation: surgir 220ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

.roue-fermer {
  position: absolute; top: 8px; right: 8px;
  width: var(--tactile); height: var(--tactile);
  border: 0; background: none; color: var(--texte-doux);
  font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: var(--rayon-petit);
}
.roue-fermer:hover { background: var(--fond-carte-survol); color: var(--texte); }

.roue-badge {
  display: inline-block; margin: 0 0 18px; padding: 6px 14px;
  background: var(--fond); border-radius: 999px;
  font-size: 0.86rem; color: var(--texte-doux);
}

.roue-svg-wrap { position: relative; width: 220px; height: 220px; margin: 0 auto; }
.roue-svg-wrap svg { display: block; }

.roue-pointeur {
  position: absolute; top: -4px; left: 50%; transform: translateX(-50%);
  width: 0; height: 0; z-index: 2;
  border-left: 9px solid transparent; border-right: 9px solid transparent;
  border-top: 16px solid var(--texte);
}

.roue-resultat { margin: 18px 0 0; font-weight: 500; font-size: 1.02rem; }

/* --------------------------------------------------------------- jeu des paires
   Rendu en page complète (memoire.html), pas en fenêtre flottante : une explication de
   flashcard peut être longue, et chaque carte a désormais une hauteur fixe avec son
   propre défilement interne — impossible qu'un texte déborde sur la carte du dessous. */

.memoire-barre { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }

/* Deux colonnes jusqu'à une largeur confortable pour trois : le texte d'une flashcard
   (une question, une définition) a besoin de place, pas de cases serrées façon Memory
   pour enfants. C'était l'origine du texte minuscule signalé : trois colonnes sur un
   téléphone ne laissait que ~110px de large pour le texte. */
.memoire-grille { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
@media (min-width: 560px) { .memoire-grille { grid-template-columns: repeat(3, 1fr); } }

.memoire-carte {
  position: relative; height: 192px; padding: 0;
  background: none; border: 0; cursor: pointer;
}
.memoire-carte[data-etat="trouvee"] { cursor: default; }

.memoire-carte-interieure {
  /* display:block est essentiel : c'est un <span> (inline par défaut), et un ancêtre
     positionné mais inline ne fournit pas de bloc conteneur fiable à ses enfants en
     position absolute — largeur/hauteur à 100% n'ont alors aucun effet. C'est la cause
     du texte minuscule et tronqué signalé : la face visible s'effondrait à une taille
     quasi nulle au lieu de remplir la carte. */
  display: block; position: relative; width: 100%; height: 100%;
}

.memoire-carte-face {
  position: absolute; inset: 0;
  border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  font-family: var(--courant); line-height: 1.35;
  transition: opacity 180ms ease, transform 180ms ease;
}
.memoire-carte-dos {
  display: flex; align-items: center; justify-content: center;
  background: var(--fond); color: var(--texte-doux); font-size: 2.1rem;
  opacity: 1; transform: scale(1);
}
.memoire-carte-recto {
  /* "safe center" : centré verticalement quand ça tient, ramené en haut (scrollable en
     entier) quand le texte déborde — jamais coupé des deux côtés comme un pur "center"
     le ferait sur un contenu plus grand que la carte. */
  display: flex; align-items: safe center; justify-content: center; text-align: center;
  padding: 14px; overflow-y: auto;
  background: var(--fond-carte); color: var(--texte);
  font-size: clamp(0.92rem, 4vw, 1.05rem); font-weight: 500;
  opacity: 0; transform: scale(0.94); pointer-events: none;
}
.memoire-carte[data-etat="face"] .memoire-carte-dos,
.memoire-carte[data-etat="trouvee"] .memoire-carte-dos {
  opacity: 0; transform: scale(0.94); pointer-events: none;
}
.memoire-carte[data-etat="face"] .memoire-carte-recto,
.memoire-carte[data-etat="trouvee"] .memoire-carte-recto {
  opacity: 1; transform: scale(1); pointer-events: auto;
}
.memoire-carte[data-etat="trouvee"] .memoire-carte-recto {
  background: color-mix(in srgb, var(--reussite) 14%, transparent);
  border-color: var(--reussite); color: var(--texte-reussite);
}

/* --------------------------------------------------------------- recherche */

.recherche-superposition {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 72px 16px 24px;
  background: color-mix(in srgb, var(--fond) 82%, transparent);
  backdrop-filter: blur(6px);
  animation: apparaitre 180ms ease;
}

.recherche-panneau {
  width: 100%; max-width: 480px; max-height: calc(100vh - 96px);
  display: flex; flex-direction: column;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  overflow: hidden;
  animation: surgir 220ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

.recherche-entete {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 10px 10px 16px; border-bottom: 1px solid var(--bordure);
}

.recherche-champ {
  flex: 1; min-width: 0; min-height: var(--tactile);
  border: 0; background: none; color: var(--texte);
  font-family: var(--courant); font-size: 1.02rem;
}
.recherche-champ:focus { outline: none; }
.recherche-champ::placeholder { color: var(--texte-doux); }

.recherche-fermer {
  flex: none; width: var(--tactile); height: var(--tactile);
  border: 0; background: none; color: var(--texte-doux);
  font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: var(--rayon-petit);
}
.recherche-fermer:hover { background: var(--fond-carte-survol); color: var(--texte); }

.recherche-resultats { overflow-y: auto; padding: 6px; }

.recherche-resultat {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 12px 10px; border-radius: var(--rayon-petit);
  color: var(--texte); text-decoration: none;
}
.recherche-resultat:hover, .recherche-resultat:focus-visible { background: var(--fond-carte-survol); }
.recherche-resultat-titre { font-size: 0.96rem; }
.recherche-resultat-sous { flex: none; font-size: 0.8rem; color: var(--texte-doux); }

/* --------------------------------------------------- points forts / faibles */

.prefs-superposition {
  position: fixed; inset: 0; z-index: 70;
  display: flex; align-items: center; justify-content: center;
  padding: 16px;
  background: rgba(0, 0, 0, 0.55);
  animation: apparaitre 180ms ease;
}

.prefs-panneau {
  position: relative; width: 100%; max-width: 420px; max-height: calc(100vh - 64px);
  overflow-y: auto;
  padding: 26px 20px 22px;
  background: var(--fond-carte); border: 1px solid var(--bordure);
  border-radius: var(--rayon); box-shadow: var(--ombre);
  animation: surgir 220ms cubic-bezier(0.2, 1.3, 0.4, 1);
}

.prefs-fermer {
  position: absolute; top: 8px; right: 8px;
  width: var(--tactile); height: var(--tactile);
  border: 0; background: none; color: var(--texte-doux);
  font-size: 1.3rem; line-height: 1; cursor: pointer; border-radius: var(--rayon-petit);
}
.prefs-fermer:hover { background: var(--fond-carte-survol); color: var(--texte); }

.prefs-liste { display: flex; flex-direction: column; gap: 8px; }

.prefs-ligne {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  width: 100%; min-height: var(--tactile); padding: 10px 14px;
  background: var(--fond); border: 1px solid var(--bordure); border-radius: var(--rayon-petit);
  color: var(--texte); font-family: var(--courant); font-size: 0.96rem; text-align: left;
  cursor: pointer;
}
.prefs-nom { flex: 1; }
.prefs-etat {
  flex: none; padding: 3px 10px; border-radius: 999px;
  font-size: 0.78rem; color: var(--texte-doux); border: 1px solid var(--bordure);
}
.prefs-ligne[data-etat="fort"] { border-color: var(--reussite); }
.prefs-ligne[data-etat="fort"] .prefs-etat { color: var(--texte-reussite); border-color: var(--reussite); }
.prefs-ligne[data-etat="faible"] { border-color: var(--erreur); }
.prefs-ligne[data-etat="faible"] .prefs-etat { color: var(--texte-erreur); border-color: var(--erreur); }

/* ------------------------------------------------------------- menu (en-tête) */

.menu-superposition {
  position: fixed; inset: 0; z-index: 70;
  display: flex; justify-content: flex-end;
}
.menu-superposition[hidden] { display: none; }

.menu-fond {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.55);
  animation: apparaitre 180ms ease;
}

.menu-panneau {
  position: relative; width: 78vw; max-width: 300px; height: 100%;
  display: flex; flex-direction: column;
  background: var(--fond-carte); border-left: 1px solid var(--bordure);
  box-shadow: var(--ombre);
  animation: glisser-depuis-droite 220ms cubic-bezier(0.2, 1, 0.4, 1);
}
@keyframes glisser-depuis-droite { from { transform: translateX(100%); } to { transform: none; } }

.menu-entete {
  min-height: 58px; display: flex; align-items: center;
  padding: 0 18px; border-bottom: 1px solid var(--bordure);
  font-family: var(--titres); font-weight: 600; color: var(--texte);
}

.menu-liste { list-style: none; margin: 0; display: flex; flex-direction: column; padding: 8px; gap: 2px; }

.menu-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--tactile); padding: 0 12px;
  background: none; border: 0; border-radius: var(--rayon-petit);
  color: var(--texte); font-family: var(--courant); font-size: 0.98rem;
  text-align: left; text-decoration: none; cursor: pointer;
}
.menu-item:hover { background: var(--fond-carte-survol); }
.menu-item[hidden] { display: none; }
.menu-icone { flex: none; font-size: 1.2rem; }

/* ------------------------------------------------------------- signalement d'erreur */

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.signaler {
  display: inline-block; background: none; border: 0; padding: 8px 0 2px; margin-top: 6px;
  color: var(--texte-doux); font: inherit; font-size: 0.82rem;
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}
.signaler:hover { color: var(--texte); }
.signaler:disabled { text-decoration: none; cursor: default; color: var(--texte-reussite, var(--texte-doux)); }
.signalement { z-index: 90; align-items: flex-end; padding: 12px; }
@media (min-width: 560px) { .signalement { align-items: center; } }
.signalement-carte {
  max-width: 440px; text-align: left; padding: 22px 20px 18px;
  max-height: calc(100dvh - 24px); overflow-y: auto; border-color: var(--bordure);
}
.signalement-titre { margin: 0 0 8px; font-size: 1.2rem; }
.signalement-extrait {
  margin: 0 0 14px; padding: 8px 10px; font-size: 0.84rem; line-height: 1.45;
  border-left: 3px solid var(--bordure); background: var(--fond);
  border-radius: 0 8px 8px 0; overflow-wrap: anywhere;
}
.signalement-motifs { border: 0; padding: 0; margin: 0 0 12px; display: grid; gap: 6px; }
.signalement-motif {
  display: flex; align-items: center; gap: 10px; padding: 9px 12px; cursor: pointer;
  border: 1px solid var(--bordure); border-radius: 10px; font-size: 0.9rem;
}
.signalement-motif:has(input:checked) { border-color: var(--principale-claire, var(--teinte)); background: var(--fond); }
.signalement-motif input { accent-color: var(--principale, currentColor); margin: 0; }
.signalement-libelle { display: block; margin: 0 0 6px; font-size: 0.86rem; color: var(--texte-doux); }
.signalement-carte textarea {
  width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px;
  padding: 10px 12px; border-radius: 10px; border: 1px solid var(--bordure);
  background: var(--fond); color: var(--texte); font: inherit; font-size: 16px;
}
.signalement-etat { min-height: 1.2em; margin: 8px 0 0; font-size: 0.86rem; color: var(--texte-erreur, var(--texte-doux)); }
.signalement-etat:empty { display: none; }
.signalement-actions { display: flex; gap: 10px; margin-top: 14px; }
.signalement-actions .btn { flex: 1; }

/* ------------------------------------------------------------- mode survie */

.sv-entete {
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 10px;
  margin: 0 0 10px; min-height: 34px;
}
.sv-vies { display: flex; gap: 4px; font-size: 1.35rem; line-height: 1; }
.sv-vies[data-perdu="oui"] .sv-coeur[data-plein="non"]:last-of-type,
.sv-vies[data-perdu="oui"] { animation: secousse 320ms ease; }
.sv-coeur[data-plein="non"] { opacity: 0.45; filter: grayscale(1); }
.sv-combo { font-family: var(--titres); font-weight: 600; font-size: 0.95rem; color: var(--texte-doux); text-align: center; white-space: nowrap; }
.sv-combo[data-actif="oui"] { color: var(--texte-accent); }
.sv-score { font-family: var(--titres); font-weight: 700; font-size: 1.35rem; text-align: right; font-variant-numeric: tabular-nums; }
.sv-score[data-monte="oui"] { animation: sv-monte 360ms ease; transform-origin: right center; }
@keyframes sv-monte { 40% { transform: scale(1.18); color: var(--texte-reussite); } }
.sv-vies[data-rendue="oui"] .sv-coeur[data-plein="oui"]:nth-child(3) { animation: surgir 420ms cubic-bezier(0.2, 1.3, 0.4, 1); }
.sv-chrono { height: 8px; border-radius: 999px; background: var(--bordure); overflow: hidden; margin: 0 0 14px; }
.sv-chrono > div {
  height: 100%; width: 100%; transform-origin: left center; border-radius: inherit;
  background: var(--principale-claire, var(--teinte)); transition: background 200ms ease;
}
.sv-chrono > div[data-urgent="oui"] { background: var(--erreur); }
.sv-matiere { margin: 0 0 6px; font-size: 0.8rem; text-transform: uppercase; letter-spacing: 0.06em; }
.sv-enonce { margin: 0 0 14px; font-weight: 500; font-size: 1.04rem; line-height: 1.45; }
.sv-gain {
  margin: 10px 0 0; text-align: center; font-family: var(--titres); font-weight: 700;
  font-size: 1.15rem; color: var(--texte-reussite); animation: surgir 260ms ease;
}
.sv-portees { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 18px; }
.sv-portee {
  padding: 8px 14px; border-radius: 999px; border: 1px solid var(--bordure);
  background: var(--fond-carte); color: var(--texte); font: inherit; font-size: 0.9rem; cursor: pointer;
}
.sv-portee[aria-pressed="true"] { border-color: var(--principale); background: var(--principale); color: #fff; font-weight: 500; }
@media (prefers-reduced-motion: reduce) {
  .sv-vies[data-perdu="oui"], .sv-gain, .sv-score[data-monte="oui"], .sv-vies[data-rendue="oui"] .sv-coeur { animation: none; }
}

/* ------------------------------------------------------------- mode hors ligne */

.hors-ligne[data-etat="ok"] { border-color: color-mix(in srgb, var(--reussite) 55%, var(--bordure)); }
.hors-ligne[data-etat="ok"] [data-hl-etat] { color: var(--texte-reussite); }
.hors-ligne[data-etat="incomplet"] { border-color: color-mix(in srgb, var(--accent) 55%, var(--bordure)); }

/* ------------------------------------------------------------- fil d'actu */

.fil { --fil-teinte: var(--principale); }
.fil-entete {
  position: relative; overflow: hidden;
  padding: 16px 18px 14px; margin: 0 0 10px;
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  border-top: 4px solid var(--fil-teinte);
}
.fil-entete::after {
  content: ''; position: absolute; inset: 0; pointer-events: none;
  background: radial-gradient(120% 80% at 100% 0%, color-mix(in srgb, var(--fil-teinte) 22%, transparent), transparent 60%);
}
.fil-entete-haut { display: flex; justify-content: space-between; align-items: center; margin: 0 0 6px; }
.fil-essais { font-size: 1.05rem; letter-spacing: 2px; }
.fil-etoile[data-pleine="non"] { filter: grayscale(1); opacity: 0.3; }
.fil-titre { margin: 0 0 2px; font-size: 1.3rem; }
.fil-lieu { margin: 0 0 8px; font-size: 0.84rem; color: var(--texte-doux); }
.fil-accroche { margin: 0 0 10px; font-size: 0.92rem; }
.fil-mission {
  position: relative; z-index: 1; margin: 0; padding: 9px 12px; border-radius: 10px;
  background: color-mix(in srgb, var(--fil-teinte) 14%, var(--fond)); font-size: 0.9rem;
}
.fil-mission[data-fini="oui"] { background: color-mix(in srgb, var(--reussite) 16%, var(--fond)); }
.fil-mission[data-fini="non"] { background: color-mix(in srgb, var(--erreur) 14%, var(--fond)); }
.fil-avertissement { margin: 0 0 8px; text-align: center; font-size: 0.74rem; color: var(--texte-doux); letter-spacing: 0.02em; }

.fil-posts {
  background: var(--fond-carte); border: 1px solid var(--bordure); border-radius: var(--rayon);
  overflow: hidden;
}
.fil-post {
  position: relative; display: flex; gap: 12px; padding: 14px 14px 10px;
  border-bottom: 1px solid var(--bordure);
  animation: fil-arrive 420ms cubic-bezier(0.2, 0.9, 0.3, 1) both; animation-delay: var(--delai);
  transition: background 250ms ease;
}
.fil-post:last-child { border-bottom: 0; }
@keyframes fil-arrive { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.fil-avatar {
  flex: none; width: 42px; height: 42px; border-radius: 50%;
  display: grid; place-items: center; font-size: 1.3rem;
  background: color-mix(in srgb, var(--fil-teinte) 20%, var(--fond));
  border: 1px solid color-mix(in srgb, var(--fil-teinte) 40%, var(--bordure));
}
.fil-corps { flex: 1; min-width: 0; }
.fil-auteur { margin: 0 0 3px; font-size: 0.9rem; line-height: 1.35; overflow-wrap: anywhere; }
.fil-auteur .discret { font-size: 0.82rem; }
.fil-texte { margin: 0 0 8px; font-size: 0.97rem; line-height: 1.5; overflow-wrap: anywhere; }
.fil-hashtag { color: color-mix(in srgb, var(--fil-teinte) 70%, var(--texte)); font-weight: 500; }
.fil-actions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.fil-stat { font-size: 0.78rem; color: var(--texte-doux); font-variant-numeric: tabular-nums; }
.fil-fake {
  margin-left: auto; padding: 6px 12px; min-height: 34px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--bordure); background: var(--fond); color: var(--texte);
  font: inherit; font-size: 0.82rem; font-weight: 500;
  transition: border-color var(--transition), background var(--transition), transform 120ms ease;
}
.fil-fake:hover:not([disabled]) { border-color: var(--erreur); background: color-mix(in srgb, var(--erreur) 10%, var(--fond)); }
.fil-fake:active:not([disabled]) { transform: scale(0.95); }
.fil-fake[disabled] { opacity: 0.35; cursor: default; }
.fil-fake[hidden] { display: none; }
.fil-verdict {
  margin: 10px 0 2px; padding: 10px 12px; border-radius: 10px; font-size: 0.88rem; line-height: 1.5;
  background: var(--fond); border-left: 3px solid var(--reussite);
}
.fil-verdict-titre { margin: 0 0 4px; font-weight: 700; }
.fil-post[data-etat="faux"] { background: color-mix(in srgb, var(--erreur) 9%, transparent); }
.fil-post[data-etat="faux"] .fil-verdict { border-left-color: var(--erreur); }
.fil-post[data-etat="vrai"] { background: color-mix(in srgb, var(--reussite) 7%, transparent); }
.fil-post[data-etat="verifie"] .fil-verdict { font-size: 0.82rem; color: var(--texte-doux); padding: 7px 10px; }

.fil-tampon {
  margin-left: auto; pointer-events: none;
  padding: 2px 12px; border: 3px solid currentColor; border-radius: 8px;
  font-family: var(--titres); font-weight: 800; font-size: 1.15rem; letter-spacing: 0.12em;
  transform: rotate(-8deg); opacity: 0.9;
  animation: fil-tampon 380ms cubic-bezier(0.2, 1.4, 0.4, 1) both;
}
.fil-post[data-etat="faux"] .fil-tampon { color: var(--erreur); }
.fil-post[data-etat="vrai"] .fil-tampon { color: var(--reussite); }
@keyframes fil-tampon { from { opacity: 0; transform: rotate(-8deg) scale(2.4); } to { opacity: 0.9; transform: rotate(-8deg) scale(1); } }

@media (prefers-reduced-motion: reduce) {
  .fil-post, .fil-tampon { animation: none; }
}
.etiquette-nouveau {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px; vertical-align: 2px;
  font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--fond); background: var(--accent);
}
.fil { max-width: 680px; margin-inline: auto; }
.fil > .fil-entete, .fil > .fil-posts { width: 100%; box-sizing: border-box; }

/* ------------------------------------------------------------- mission mars */
/* Un poste de pilotage : toujours sombre, même en mode clair (c'est un écran de jeu). */

.mars {
  --m-fond: #0B0A12; --m-panneau: rgba(24, 20, 34, 0.86); --m-bord: rgba(232, 116, 59, 0.28);
  --m-texte: #F3EEE9; --m-doux: #B8AFA8; --m-rouille: #E8743B; --m-ambre: #F4C27A;
  --m-ok: #3DDC97; --m-ko: #FF5D5D;
  --m-o2: #5CD6F2; --m-energie: #F7C948; --m-eau: #4E9BFF; --m-moral: #FF8FC0;
  position: relative; overflow: hidden; isolation: isolate;
  padding: 20px 16px 22px; border-radius: var(--rayon);
  background: radial-gradient(120% 70% at 50% 0%, #2A1612 0%, #120D16 55%, var(--m-fond) 100%);
  color: var(--m-texte); border: 1px solid var(--m-bord);
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35);
}
.mars .discret { color: var(--m-doux); }
.mars-ciel {
  position: absolute; inset: 0; z-index: -1; pointer-events: none; opacity: 0.8;
  background-image:
    radial-gradient(1px 1px at 12% 18%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 72% 12%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 38% 42%, #ffe9d6 50%, transparent 51%),
    radial-gradient(1px 1px at 88% 36%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 22% 72%, #fff 50%, transparent 51%),
    radial-gradient(1.5px 1.5px at 62% 82%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 92% 70%, #ffd9c2 50%, transparent 51%),
    radial-gradient(1px 1px at 48% 8%, #fff 50%, transparent 51%),
    radial-gradient(1px 1px at 6% 48%, #fff 50%, transparent 51%);
  background-size: 260px 260px;
  animation: mars-scintille 6s ease-in-out infinite alternate;
}
@keyframes mars-scintille { from { opacity: 0.45; } to { opacity: 0.9; } }

/* briefing */
.mars-briefing { text-align: center; padding-top: 26px; }
.mars-defi { text-align: left; margin: 0 0 12px; color: var(--texte); }
.mars-planete {
  position: relative; width: 132px; height: 132px; margin: 4px auto 16px; border-radius: 50%;
  background:
    radial-gradient(circle at 30% 62%, rgba(80, 22, 6, 0.55) 0 9%, transparent 10%),
    radial-gradient(circle at 64% 34%, rgba(90, 28, 8, 0.45) 0 6%, transparent 7%),
    radial-gradient(circle at 52% 78%, rgba(255, 190, 140, 0.25) 0 5%, transparent 6%),
    radial-gradient(ellipse at 50% 8%, rgba(255, 245, 235, 0.85) 0 9%, transparent 16%),
    radial-gradient(circle at 34% 30%, #F6A56E 0%, #D4581F 42%, #8C2B0A 76%, #3E1204 100%);
  box-shadow: inset -22px -14px 36px rgba(0, 0, 0, 0.6), 0 0 70px rgba(232, 116, 59, 0.45);
  animation: mars-flotte 7s ease-in-out infinite;
}
@keyframes mars-flotte { 50% { transform: translateY(-6px); } }
.mars-lune {
  position: absolute; width: 14px; height: 11px; border-radius: 50%;
  background: radial-gradient(circle at 35% 35%, #CBB9A8, #6E5E52);
  top: 50%; left: 50%; animation: mars-orbite 9s linear infinite;
}
@keyframes mars-orbite {
  from { transform: rotate(0deg) translateX(92px) rotate(0deg); }
  to { transform: rotate(360deg) translateX(92px) rotate(-360deg); }
}
.mars-sur-titre { margin: 0 0 4px; font-size: 0.72rem; letter-spacing: 0.22em; text-transform: uppercase; color: var(--m-ambre); }
.mars-titre {
  margin: 0 0 10px; font-family: var(--titres); font-weight: 800; letter-spacing: 0.08em; font-size: 1.9rem;
  color: #fff; text-shadow: 0 0 18px rgba(232, 116, 59, 0.7);
}
.mars-brief { margin: 0 auto 16px; max-width: 42ch; line-height: 1.55; color: var(--m-texte); }
.mars-equipage { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 0 0 16px; }
.mars-membre {
  display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 10px 4px;
  border-radius: 12px; background: var(--m-panneau); border: 1px solid var(--m-bord);
}
.mars-membre-avatar { font-size: 1.6rem; }
.mars-membre-nom { font-size: 0.72rem; font-weight: 600; line-height: 1.2; }
.mars-membre-role { font-size: 0.66rem; color: var(--m-doux); }
.mars-regles { text-align: left; margin: 0 0 14px; padding: 12px 14px 12px 30px; line-height: 1.65; font-size: 0.9rem; border-radius: 12px; background: var(--m-panneau); }
.mars-record { margin: 0 0 12px; font-size: 0.86rem; color: var(--m-ambre); }
.mars-lancer, .mars-suivant { width: 100%; background: linear-gradient(135deg, #E8743B, #C2410C); border-color: transparent; color: #fff; box-shadow: 0 8px 24px rgba(232, 116, 59, 0.35); }

/* tableau de bord */
.mars-hud { position: relative; margin: 0 0 14px; }
.mars-hud[data-alerte="oui"]::before {
  content: ''; position: fixed; inset: 0; z-index: 30; pointer-events: none;
  box-shadow: inset 0 0 90px rgba(255, 60, 60, 0.45); animation: mars-alarme 1.4s ease-in-out infinite;
}
@keyframes mars-alarme { 50% { opacity: 0.25; } }
.mars-sol { display: flex; align-items: baseline; gap: 8px; margin: 0 0 8px; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; }
.mars-sol-etiquette { font-size: 0.8rem; letter-spacing: 0.2em; color: var(--m-ambre); }
.mars-sol-valeur { font-size: 2rem; font-weight: 700; color: #fff; text-shadow: 0 0 12px rgba(244, 194, 122, 0.6); }
.mars-sol-total { color: var(--m-doux); }
.mars-trajet { position: relative; height: 26px; margin: 0 22px 12px 0; }
.mars-trajet-piste { position: absolute; top: 11px; left: 0; right: 0; height: 4px; border-radius: 4px; background: rgba(255, 255, 255, 0.12); overflow: hidden; }
.mars-trajet-fait { height: 100%; background: linear-gradient(90deg, var(--m-rouille), var(--m-ambre)); transition: width 600ms ease; }
.mars-trajet-fusee { position: absolute; top: 0; transform: translateX(-50%) rotate(45deg); font-size: 1.05rem; transition: left 600ms ease; }
.mars-trajet-fin { position: absolute; right: -22px; top: 1px; font-size: 1rem; }
.mars-jauges { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.mars-jauge {
  position: relative; display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 2px 6px;
  padding: 8px 10px 9px; border-radius: 12px; background: var(--m-panneau); border: 1px solid rgba(255, 255, 255, 0.07);
}
.mars-jauge-icone { font-size: 1rem; }
.mars-jauge-nom { font-size: 0.78rem; color: var(--m-doux); }
.mars-jauge-valeur { font-family: ui-monospace, Menlo, monospace; font-weight: 700; font-size: 0.95rem; }
.mars-jauge-barre { grid-column: 1 / -1; height: 6px; border-radius: 6px; background: rgba(255, 255, 255, 0.1); overflow: hidden; }
.mars-jauge-barre > div { height: 100%; border-radius: inherit; transition: width 700ms cubic-bezier(0.3, 1.2, 0.5, 1); }
.mars-jauge[data-jauge="o2"] .mars-jauge-barre > div { background: var(--m-o2); box-shadow: 0 0 10px var(--m-o2); }
.mars-jauge[data-jauge="energie"] .mars-jauge-barre > div { background: var(--m-energie); box-shadow: 0 0 10px var(--m-energie); }
.mars-jauge[data-jauge="eau"] .mars-jauge-barre > div { background: var(--m-eau); box-shadow: 0 0 10px var(--m-eau); }
.mars-jauge[data-jauge="moral"] .mars-jauge-barre > div { background: var(--m-moral); box-shadow: 0 0 10px var(--m-moral); }
.mars-jauge[data-bas="oui"] { border-color: var(--m-ko); animation: mars-clignote 1s steps(2) infinite; }
.mars-jauge[data-bas="oui"] .mars-jauge-valeur { color: var(--m-ko); }
@keyframes mars-clignote { 50% { border-color: transparent; } }
.mars-delta {
  position: absolute; right: 8px; top: -9px; padding: 1px 7px; border-radius: 999px; opacity: 0;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.76rem; font-weight: 700; pointer-events: none;
}
.mars-delta[data-sens="plus"] { background: var(--m-ok); color: #06281A; }
.mars-delta[data-sens="moins"] { background: var(--m-ko); color: #2A0606; }
.mars-delta-anime { animation: mars-delta 1.6s ease forwards; }
@keyframes mars-delta { 0% { opacity: 0; transform: translateY(6px) scale(0.8); } 15% { opacity: 1; transform: none; } 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(-8px); } }

/* transmission */
.mars-transmission { padding: 14px; border-radius: 14px; background: var(--m-panneau); border: 1px solid var(--m-bord); }
.mars-transmission-entete { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; font-size: 0.9rem; flex-wrap: wrap; }
.mars-avatar { font-size: 1.5rem; width: 40px; height: 40px; display: grid; place-items: center; border-radius: 50%; background: rgba(232, 116, 59, 0.16); border: 1px solid var(--m-bord); }
.mars-role { color: var(--m-doux); font-weight: 400; }
.mars-enjeu { margin-left: auto; font-size: 0.74rem; padding: 3px 9px; border-radius: 999px; background: rgba(255, 255, 255, 0.08); color: var(--m-ambre); }
.mars-cadre { margin: 0 0 12px; min-height: 3.2em; line-height: 1.55; font-family: ui-monospace, 'SFMono-Regular', Menlo, monospace; font-size: 0.88rem; color: #E8DDD3; }
.mars-cadre[data-curseur="oui"]::after { content: '▌'; color: var(--m-rouille); animation: mars-clignote 0.8s steps(2) infinite; }
.mars-question { margin: 0 0 12px; font-weight: 600; font-size: 1.02rem; line-height: 1.45; color: #fff; }
.mars-choix { display: grid; gap: 8px; }
.mars-option {
  display: flex; gap: 10px; align-items: flex-start; width: 100%; padding: 12px; text-align: left; cursor: pointer;
  border-radius: 12px; border: 1px solid rgba(255, 255, 255, 0.14); background: rgba(255, 255, 255, 0.04);
  color: var(--m-texte); font: inherit; font-size: 0.95rem; line-height: 1.4;
  transition: border-color 160ms ease, background 160ms ease, transform 120ms ease;
}
.mars-option:hover:not([disabled]) { border-color: var(--m-rouille); background: rgba(232, 116, 59, 0.1); }
.mars-option:active:not([disabled]) { transform: scale(0.99); }
.mars-option[disabled] { cursor: default; }
.mars-option[data-etat="juste"] { border-color: var(--m-ok); background: rgba(61, 220, 151, 0.12); }
.mars-option[data-etat="faux"] { border-color: var(--m-ko); background: rgba(255, 93, 93, 0.12); animation: secousse 260ms ease; }
.mars-option-lettre {
  flex: none; width: 24px; height: 24px; display: grid; place-items: center; border-radius: 7px;
  font-family: ui-monospace, Menlo, monospace; font-size: 0.8rem; font-weight: 700;
  background: rgba(232, 116, 59, 0.2); color: var(--m-ambre);
}
.mars-issue { margin: 14px 0 10px; padding: 12px 14px; border-radius: 12px; line-height: 1.5; animation: surgir 320ms ease; }
.mars-issue[data-issue="ok"] { background: rgba(61, 220, 151, 0.12); border: 1px solid rgba(61, 220, 151, 0.4); }
.mars-issue[data-issue="ko"] { background: rgba(255, 93, 93, 0.12); border: 1px solid rgba(255, 93, 93, 0.4); }
.mars-issue-titre { margin: 0 0 4px; font-weight: 700; }
.mars-note { margin: 0 0 6px; padding: 12px 14px; border-radius: 12px; background: rgba(0, 0, 0, 0.3); border-left: 3px solid var(--m-o2); font-size: 0.9rem; line-height: 1.55; }
.mars-note-titre { margin: 0 0 4px; font-weight: 700; color: var(--m-o2); }
.mars .signaler { color: var(--m-doux); }
.mars-suivant { margin-top: 12px; }

/* fin */
.mars-fin { text-align: center; padding-top: 28px; }
.mars-decollage { font-size: 3.2rem; margin: 0 0 8px; animation: mars-decolle 2.4s cubic-bezier(0.5, 0, 0.3, 1) both; filter: drop-shadow(0 12px 14px rgba(244, 194, 122, 0.7)); }
@keyframes mars-decolle { 0% { transform: translateY(40px) rotate(-45deg); opacity: 0; } 30% { opacity: 1; } 100% { transform: translateY(0) rotate(-45deg); } }
.mars-bruit {
  height: 70px; margin: 0 auto 12px; max-width: 220px; border-radius: 10px; opacity: 0.8;
  background: repeating-linear-gradient(0deg, rgba(255, 255, 255, 0.18) 0 2px, rgba(0, 0, 0, 0.35) 2px 4px),
              linear-gradient(90deg, #333, #777, #222, #999, #444);
  background-size: 100% 4px, 300% 100%;
  animation: mars-parasites 0.35s steps(3) infinite;
}
@keyframes mars-parasites { to { background-position: 0 4px, 100% 0; } }
.mars-fin[data-issue="ko"] .mars-titre { color: #FFB4B4; text-shadow: 0 0 18px rgba(255, 60, 60, 0.7); }
.mars-bilan { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 6px 0 12px; }
.mars-bilan > div { padding: 12px 6px; border-radius: 12px; background: var(--m-panneau); border: 1px solid var(--m-bord); display: flex; flex-direction: column; gap: 2px; }
.mars-bilan-chiffre { font-family: ui-monospace, Menlo, monospace; font-size: 1.5rem; font-weight: 700; color: #fff; }
.mars-bilan-chiffre small { font-size: 0.85rem; color: var(--m-doux); }
.mars-bilan-legende { font-size: 0.74rem; color: var(--m-doux); }
.mars .recompenses, .mars .defi-resultat { color: var(--m-texte); }
.mars-journal { margin-bottom: 10px; }
.mars-journal summary { cursor: pointer; font-weight: 500; line-height: 1.45; }
.mars-journal summary span { font-family: ui-monospace, Menlo, monospace; font-size: 0.82rem; margin-right: 6px; color: var(--texte-doux); }
.mars-journal[data-juste="non"] { border-left: 3px solid var(--erreur); }
.mars-journal[data-juste="oui"] { border-left: 3px solid var(--reussite); }

@media (prefers-reduced-motion: reduce) {
  .mars-ciel, .mars-planete, .mars-lune, .mars-jauge[data-bas="oui"], .mars-hud[data-alerte="oui"]::before,
  .mars-decollage, .mars-bruit, .mars-issue, .mars-delta-anime { animation: none; }
  .mars-delta-anime { opacity: 1; }
}