* { box-sizing: border-box; margin: 0; padding: 0; }
body {
  font-family: 'Segoe UI', system-ui, sans-serif;
  background: #1a1a2e;
  color: #eee;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px;
}
h1 { font-size: 1.4rem; margin-bottom: 8px; color: #00d4aa; }
.subtitle { font-size: 0.85rem; color: #888; margin-bottom: 20px; }
.container { width: 100%; max-width: 620px; }
.card {
  background: #16213e;
  border-radius: 12px;
  padding: 24px;
  margin-bottom: 16px;
  border: 1px solid #0f3460;
}
.category-btn {
  display: block; width: 100%; padding: 14px 18px; margin-bottom: 10px;
  background: #0f3460; border: 1px solid #1a4080; border-radius: 8px;
  color: #eee; font-size: 1rem; cursor: pointer; text-align: left;
  transition: background 0.2s;
}
.category-btn:hover:not(:disabled) { background: #1a4080; }
.category-btn:disabled { opacity: 0.4; cursor: not-allowed; border-color: #0a2040; }
.category-btn .cat-score { float: right; color: #00d4aa; font-size: 0.85rem; }
.category-btn .cat-time { float: right; color: #666; font-size: 0.75rem; margin-right: 12px; }
/* Feuille de route : chapitre ou module pas encore ecrit (chapters/roadmap.js).
   Le bouton reste lisible (pas de opacity: 0.4 comme un simple verrouillage) :
   c'est une vue d'ensemble du travail restant, elle doit se lire. */
.category-btn .cat-wip { float: right; color: #f39c12; font-size: 0.8rem; }
.category-btn.is-wip { background: #16213e; border-style: dashed; border-color: #3a3050; }
.category-btn.is-wip:disabled { opacity: 0.75; }
/* Niveau d'origine de la notion (levels.js). En PREFIXE du libelle : la droite
   du bouton est deja prise par le score, le temps et le marqueur wip. Deux
   couleurs distinctes, sinon le badge ne se lit qu'en dechiffrant 3 caracteres. */
.cat-level {
  display: inline-block; font-size: 0.65rem; font-weight: 700; line-height: 1.4;
  padding: 1px 5px; margin-right: 7px; border-radius: 4px;
  vertical-align: middle; letter-spacing: 0.3px;
}
.cat-level.lvl-2de { background: #123a5e; color: #7fc4ff; }
.cat-level.lvl-1re { background: #3a2a5e; color: #c8a8ff; }
/* Legende des badges, sur la liste des chapitres uniquement : un marqueur non
   explique est du bruit. */
.level-legend { font-size: 0.75rem; color: #888; margin: 0 0 14px; }

/* En-tete du menu des categories */
.menu-intro { font-size: 0.85rem; color: #aaa; margin: 10px 0 14px; }
.menu-note {
  font-size: 0.8rem; color: #f39c12; margin: 0 0 14px;
  padding: 8px 12px; background: #221a0a; border-left: 3px solid #f39c12; border-radius: 4px;
}

#quiz-area { display: none; }
.timer-bar { height: 6px; background: #0f3460; border-radius: 3px; margin-bottom: 16px; overflow: hidden; }
.timer-fill { height: 100%; background: #00d4aa; transition: width 0.1s linear; border-radius: 3px; }
.timer-fill.danger { background: #e94560; }
/* Chronometre du temps depasse : remplace la barre (6px + 16px de marge), donc
   cale sur la meme hauteur totale pour ne pas faire sauter l'enonce. Chiffres
   tabulaires : sans eux la largeur du compteur oscille a chaque dixieme. */
.timer-over {
  font-size: 0.78rem; line-height: 16px; margin-bottom: 6px;
  color: #e94560; font-variant-numeric: tabular-nums;
}
.progress-text { font-size: 0.8rem; color: #888; margin-bottom: 12px; }
/* En-tete de la serie : sortie a gauche, compteur a droite, sur une seule ligne.
   Sur un ecran de 390px la place verticale est comptee : le lien de sortie ne
   doit pas coûter une ligne de plus. */
.quiz-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 12px; }
.quiz-head .btn-back { margin-bottom: 0; flex-shrink: 0; }
.quiz-head .progress-text { margin-bottom: 0; }
/* KaTeX en displayMode ne coupe pas les lignes : un énoncé long déborde. Sans
   overflow-x, c'est la PAGE qui défile horizontalement et le clavier part hors
   écran. On confine le défilement à l'énoncé. Les générateurs doivent malgré
   tout rester courts : un énoncé qu'il faut faire défiler est illisible au
   chronomètre. Mesure de référence : 300px disponibles sur un écran de 390px. */
.question-text { font-size: 1.3rem; margin-bottom: 6px; line-height: 1.8; min-height: 60px; overflow-x: auto; overflow-y: hidden; }
.question-text .katex { font-size: 1.4rem; }
@media (max-width: 480px) {
  /* Un cran plus petit sur téléphone : gagne ~15 % de largeur sur les énoncés. */
  .question-text .katex { font-size: 1.15rem; }
}
.question-hint { font-size: 0.8rem; color: #888; margin-bottom: 16px; font-style: italic; }

.btn { padding: 10px 20px; border: none; border-radius: 8px; font-size: 1rem; cursor: pointer; transition: background 0.2s; }
.btn-primary { background: #00d4aa; color: #1a1a2e; font-weight: 600; }
.btn-primary:hover { background: #00b894; }
.btn-secondary { background: #0f3460; color: #eee; }
.btn-secondary:hover { background: #1a4080; }
/* Bouton discret : accès à la fiche de cours pendant l'exercice */
.btn-ghost { background: none; border: 1px solid #0f3460; color: #888; font-size: 0.85rem; padding: 8px 14px; }
.btn-ghost:hover { color: #00d4aa; border-color: #00d4aa; }
.submit-row { display: flex; gap: 10px; align-items: center; }
.submit-row .btn-ghost { margin-left: auto; }
/* Avertissement : consulter la fiche coûte la progression en cours */
.course-warn {
  font-size: 0.85rem; color: #f39c12; margin-bottom: 16px;
  padding: 10px 14px; background: #2a1f0a; border: 1px solid #f39c12; border-radius: 8px;
}

.feedback { margin-top: 12px; padding: 10px 14px; border-radius: 8px; font-size: 0.9rem; display: none; }
.feedback.show { display: block; }
.feedback.correct { background: #0a2a1a; border: 1px solid #00d4aa; color: #00d4aa; }
.feedback.incorrect { background: #2a0a0a; border: 1px solid #e94560; color: #e94560; }
/* Erreur de syntaxe : ni une réussite ni un échec, la réponse n'est pas consommée */
.feedback.syntax { background: #2a2109; border: 1px solid #e8b339; color: #e8b339; }

#results-area { display: none; }
.score-big { font-size: 3rem; font-weight: 700; text-align: center; margin: 16px 0; }
.score-big.good { color: #00d4aa; }
.score-big.medium { color: #f39c12; }
.score-big.bad { color: #e94560; }
.results-detail { font-size: 0.9rem; color: #aaa; margin-bottom: 16px; }
.results-detail li { padding: 8px 0; border-bottom: 1px solid #0f3460; list-style: none; line-height: 1.6; }
.results-detail .wrong { color: #e94560; }
.results-detail .right { color: #00d4aa; }
/* Juste, mais hors temps : 0 point sans etre une erreur de maths. Meme ambre que
   le feedback des erreurs de notation. */
.results-detail .late { color: #e8b339; }
.results-detail .katex { font-size: 1rem; }
.btn-row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.tab-bar { display: flex; gap: 0; margin-bottom: 18px; border-bottom: 1px solid #0f3460; }
.tab-btn {
  flex: 1; padding: 12px 16px; background: none; border: none; border-bottom: 2px solid transparent;
  color: #888; font-size: 0.95rem; cursor: pointer; transition: color 0.2s, border-color 0.2s;
}
.tab-btn:hover { color: #ccc; }
.tab-btn.active { color: #00d4aa; border-bottom-color: #00d4aa; font-weight: 600; }
/* Fiche pratique : texte continu, sans blocs separes */
.theory-text { font-size: 0.95rem; line-height: 2.1; color: #ddd; }
.theory-text .katex { font-size: 1rem; }
/* Le code Python des fiches (blocs \texttt{}) : monospace, comme texttt. */
.theory-text code { font-family: 'Courier New', monospace; font-size: 0.92em; color: #9be3d0; }
.theory-text .th-title { display: block; margin-top: 18px; margin-bottom: 4px; }
.theory-text .th-title:first-child { margin-top: 0; }
.theory-text .th-line { display: block; margin-left: 14px; margin-bottom: 2px; }
.explanation { margin-top: 6px; padding: 8px 12px; background: #1a1a2e; border-left: 3px solid #f39c12; border-radius: 4px; font-size: 0.85rem; color: #ccc; line-height: 1.6; }
.explanation .katex { font-size: 0.9rem; }
.answer-row { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.answer-label { font-size: 0.9rem; color: #aaa; min-width: 50px; text-align: right; }
.choice-row { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.choice-btn {
  padding: 12px 24px; font-size: 1.1rem; border: 2px solid #0f3460; border-radius: 8px;
  background: #1a1a2e; color: #eee; cursor: pointer; transition: border-color 0.2s, background 0.2s;
}
.choice-btn:hover:not(:disabled) { border-color: #00d4aa; background: #0a2a1a; }
.choice-btn.selected { border-color: #00d4aa; background: #0a2a1a; color: #00d4aa; font-weight: 600; }
.choice-btn.correct { border-color: #00d4aa; background: #0a2a1a; color: #00d4aa; }
.choice-btn.incorrect { border-color: #e94560; background: #2a0a0a; color: #e94560; }
.choice-btn:disabled { cursor: not-allowed; opacity: 0.7; }
.answer-field {
  flex: 1; padding: 12px 16px; font-size: 1.2rem;
  background: #1a1a2e; border: 2px solid #0f3460; border-radius: 8px;
  color: #eee; outline: none;
}
.answer-field:focus { border-color: #00d4aa; }
.answer-field.correct { border-color: #00d4aa; background: #0a2a1a; }
.answer-field.incorrect { border-color: #e94560; background: #2a0a0a; }
/* Clavier de symboles */
.keypad { display: flex; flex-wrap: wrap; gap: 6px; margin: 2px 0 12px; }
.key-btn {
  min-width: 46px; min-height: 42px; padding: 6px 10px; font-size: 1rem;
  background: #16213e; border: 1px solid #0f3460; border-radius: 8px;
  color: #cfe; cursor: pointer; transition: border-color 0.15s, background 0.15s, color 0.15s;
  -webkit-tap-highlight-color: transparent;
}
.key-btn:hover:not(:disabled) { border-color: #00d4aa; color: #00d4aa; }
.key-btn:active:not(:disabled) { background: #0a2a1a; }
.key-btn:disabled { opacity: 0.35; cursor: not-allowed; }
.key-btn.key-wide { font-size: 0.9rem; }
.btn-swap { background: none; border: 1px solid #0f3460; border-radius: 6px; color: #888; font-size: 1rem; padding: 4px 8px; cursor: pointer; transition: color 0.2s, border-color 0.2s; }
.btn-swap:hover { color: #00d4aa; border-color: #00d4aa; }
#system-helper { margin-bottom: 12px; }
.sys-row { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.sys-line { font-size: 1.1rem; min-width: 160px; }
.sys-mult { width: 50px; padding: 6px; font-size: 0.9rem; background: #1a1a2e; border: 1px solid #0f3460; border-radius: 4px; color: #eee; text-align: center; }
.sys-mult:focus { border-color: #00d4aa; outline: none; }
.sys-result { font-size: 0.9rem; color: #00d4aa; margin-left: 8px; min-width: 120px; }
.sys-swap-col { display: flex; align-items: center; justify-content: center; }
.btn-reset { background: none; border: 1px solid #0f3460; border-radius: 6px; color: #888; font-size: 1.1rem; width: 32px; height: 32px; cursor: pointer; transition: color 0.2s, border-color 0.2s; flex-shrink: 0; }
.btn-reset:hover { color: #e94560; border-color: #e94560; }
/* Bouton de validation en masse : n'existe qu'en ?tagazok (cf. app.js). */
.menu-row { display: flex; align-items: center; gap: 8px; margin-bottom: 10px; }
.btn-mark { background: none; border: 1px solid #0f3460; border-radius: 6px; color: #888; font-size: 0.95rem; width: 32px; height: 32px; cursor: pointer; transition: color 0.2s, border-color 0.2s; flex-shrink: 0; }
.btn-mark:hover:enabled { color: #00d4aa; border-color: #00d4aa; }
.btn-mark:disabled { opacity: 0.35; cursor: not-allowed; }
.btn-back { background: none; border: none; color: #888; font-size: 0.85rem; cursor: pointer; padding: 0; margin-bottom: 4px; }
.btn-back:hover { color: #00d4aa; }
.subject-btn { display: block; width: 100%; padding: 16px 20px; margin-bottom: 10px; background: #0f3460; border: 1px solid #1a4080; border-radius: 8px; color: #eee; font-size: 1.1rem; cursor: pointer; text-align: left; transition: background 0.2s; }
.subject-btn:hover { background: #1a4080; }

/* Barre de session : compte connecte, etat d'enregistrement, deconnexion.
   Elle est sur tous les ecrans : sur un navigateur partage, savoir QUI est
   connecte compte autant que la progression elle-meme. */
.session-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 0.78rem; color: #888; margin-bottom: 16px;
}
.session-user { color: #00d4aa; }
.session-user::before { content: "\1F464  "; }
.btn-link { background: none; border: none; color: #888; font-size: 0.78rem; cursor: pointer; padding: 0; text-decoration: underline; }
.btn-link:hover { color: #00d4aa; }
/* L'etat d'enregistrement doit se lire d'un coup d'oeil : discret quand tout va
   bien, franchement rouge quand la progression n'est QUE locale. */
.sync-status { margin-left: auto; }
.sync-status.saving { color: #888; }
.sync-status.saved { color: #4a7; }
.sync-status.failed { color: #e94560; }
.sync-retry { background: none; border: 1px solid #e94560; border-radius: 6px; color: #e94560; font-size: 0.72rem; padding: 2px 8px; margin-left: 6px; cursor: pointer; }
.sync-retry:hover { background: #2a0a0a; }

/* Demarrage et connexion */
.boot-text { font-size: 0.9rem; color: #aaa; margin: 0; }
.login-intro { font-size: 0.9rem; color: #aaa; margin: 0 0 16px; }
.login-field {
  display: block; width: 100%; box-sizing: border-box; margin-bottom: 12px;
  padding: 12px 14px; background: #0f3460; border: 1px solid #1a4080; border-radius: 8px;
  color: #eee; font-size: 1rem;
}
.login-field:focus { outline: none; border-color: #00d4aa; }
#login-btn { width: 100%; }
.login-error { font-size: 0.85rem; color: #e94560; margin: 12px 0 0; }

#french-editor { width: 100%; padding: 14px 16px; font-size: 1rem; line-height: 1.6; background: #1a1a2e; border: 2px solid #0f3460; border-radius: 8px; color: #eee; outline: none; resize: vertical; font-family: 'Segoe UI', system-ui, sans-serif; }
#french-editor:focus { border-color: #00d4aa; }
.version-tag { position: fixed; bottom: 8px; left: 10px; font-size: 0.7rem; color: #555; }