/* ============================================================
   theme.css — Design tokens et composants UI partagés
   Site TOEFL — préparation
   
   Ce fichier contient :
   - Les variables de design (couleurs, typo) pour mode jour et mode nuit
   - Le layout général (.page)
   - Les composants UI réutilisés par toutes les catégories d'exercices
   - Les styles des 3 vues (config, session, récap)
   - Le toggle thème jour/nuit
   
   Aucune logique spécifique à une catégorie ici. Toute variation
   visuelle propre à une catégorie doit se faire via des classes
   ajoutées localement.
   ============================================================ */

:root {
  /* Test lisibilité : fond de page blanc. Les surfaces surélevées (cartes,
     champs, pills) passent en lin pour ressortir par contraste sur le blanc ;
     --bg-deep reste le lin le plus marqué pour les mises en avant fortes.
     Pour revenir en arrière : --bg #F0EEE9 / --bg-elev #F4F1EA. */
  --bg: #FFFFFF;
  --bg-elev: #F0EEE9;
  --bg-deep: #E8E2D5;
  --ink: #2C4A6B;
  --ink-soft: #4A6385;
  --ink-mute: #8295AC;
  --rule: #C8D4E5;
  --accent: #A8412A;
  --good: #4A6B3A;
  --armed: #4A3AA8;
}

/* Test fond blanc — il ne suffit pas de changer --bg : le body (et les
   composants partagés) sont peints par style.css via --color-bg / --color-surface.
   Sans surcharger CES tokens, le body reste lin et crée une césure avec le canvas
   blanc de html. On les aligne donc sur le schéma blanc, en thème clair uniquement.
   Spécificité (0,2,0) > le :root de style.css, donc gagne quel que soit l'ordre ;
   le :not exclut le sombre, qui garde les tokens de style.css.
   Pour revenir en arrière : supprimer ce bloc + remettre --bg #F0EEE9 / --bg-elev #F4F1EA. */
:root:not([data-theme="dark"]) {
  --color-bg: #FFFFFF;       /* fond du body + aplats partagés -> blanc */
  --color-surface: #F0EEE9;  /* surfaces surélevées partagées -> lin */
}

[data-theme="dark"] {
  --bg: #1A2638;
  --bg-elev: #243149;
  --bg-deep: #2E3D58;
  --ink: #EDF2FB;
  --ink-soft: #B8C4D9;
  --ink-mute: #9BAAC4;
  --rule: #3A4A66;
  --accent: #E89878;
  --good: #9BBE85;
  --armed: #8E7DD6;
}


html, body { min-height: 100vh; }
.page {
  max-width: 960px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}
/* .page ne contenant que le header, suivi d'une section full-bleed (topbar de
   session) : on retire le padding bas, sinon il crée un vide avant la section. */
.page--flush {
  padding-bottom: 0;
}
@media (max-width: 640px) {
  .page { padding: 40px 20px 64px; }
}

/* ============= HEADER COMMUN ============= */
.breadcrumb {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  margin-bottom: 24px;
}
.breadcrumb a { color: var(--ink-soft); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); }
.breadcrumb .sep { margin: 0 10px; opacity: 0.5; }

.toefl-page-header {
  display: block;
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 32px;
}
.eyebrow {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.title {
  font-size: 56px;
  font-weight: 600;
  letter-spacing: -0.025em;
  line-height: 1;
  margin-bottom: 16px;
}
@media (max-width: 640px) { .title { font-size: 32px; line-height: 1.05; } }
.subtitle {
  font-size: 19px;
  font-style: italic;
  color: var(--ink-soft);
  max-width: 560px;
}

.section-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 24px;
}

/* ============= VUES ============= */
.view { display: none; }
.view.active { display: block; }

/* ============= CONFIG : LISTE DES BLOCS ============= */
.blocs-list {
  border-top: 1px solid var(--rule);
  margin-bottom: 56px;
}
.bloc-row {
  display: grid;
  grid-template-columns: auto 1fr auto auto;
  gap: 24px;
  align-items: center;
  padding: 20px 4px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.15s;
}
.bloc-row:hover { background: var(--bg-elev); }
.bloc-row.disabled {
  cursor: not-allowed;
  opacity: 0.45;
}
.bloc-row.disabled:hover { background: transparent; }
.check {
  width: 20px;
  height: 20px;
  border: 1.5px solid var(--rule);
  background: var(--bg-elev);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.15s;
  flex-shrink: 0;
}
.bloc-row:hover .check { border-color: var(--ink-soft); }
.bloc-row.checked .check {
  border-color: var(--ink);
  background: var(--ink);
}
.check svg {
  width: 12px;
  height: 12px;
  color: var(--bg);
  opacity: 0;
  transition: opacity 0.15s;
}
.bloc-row.checked .check svg { opacity: 1; }
.bloc-info { min-width: 0; }
.bloc-name {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: 4px;
}
.bloc-desc {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  line-height: 1.45;
}
.bloc-level {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  padding: 4px 9px;
  border: 1px solid var(--rule);
  background: var(--bg);
  white-space: nowrap;
}
.bloc-stats {
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 2px;
  min-width: 110px;
}
.bloc-rate {
  font-family: var(--font-display);
  font-size: 22px;
  font-weight: 500;
  font-style: italic;
  letter-spacing: -0.01em;
  color: var(--ink);
}
.bloc-rate.zero { color: var(--ink-mute); }
.bloc-count {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
}

/* Bloc-row : layout mobile sur deux lignes */
@media (max-width: 640px) {
  .bloc-row {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "check info  stats"
      "check level stats";
    gap: 8px 16px;
    padding: 16px 4px;
  }
  .bloc-row .check { grid-area: check; align-self: start; margin-top: 4px; }
  .bloc-row .bloc-info { grid-area: info; }
  .bloc-row .bloc-level { grid-area: level; justify-self: start; align-self: start; }
  .bloc-row .bloc-stats { grid-area: stats; align-self: center; min-width: 0; }
  .bloc-name { font-size: 18px; }
  .bloc-desc { font-size: 13px; }
  .bloc-rate { font-size: 18px; }
  .bloc-count { font-size: 10px; }
}

.quick-actions {
  display: flex;
  gap: 16px;
  margin-bottom: 24px;
  flex-wrap: wrap;
}
.quick-action {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-soft);
  background: none;
  border: none;
  border-bottom: 1px dashed var(--rule);
  padding: 4px 0;
  cursor: pointer;
  transition: all 0.15s;
  font-weight: var(--mono-weight);
}
.quick-action:hover {
  color: var(--ink);
  border-bottom-color: var(--ink);
  border-bottom-style: solid;
}

.options-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 32px;
  margin-bottom: 56px;
}
@media (max-width: 640px) { .options-grid { grid-template-columns: 1fr; } }

.option-block label {
  display: block;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  font-family: var(--font-mono);
  font-size: 12px;
  font-weight: var(--mono-weight);
  padding: 8px 14px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  color: var(--ink-soft);
  cursor: pointer;
  transition: all 0.15s;
}
.pill:hover {
  border-color: var(--ink-soft);
  color: var(--ink);
}
.pill.selected {
  border-color: var(--ink);
  background: var(--ink);
  color: var(--bg);
}

/* Chiffre indicatif entre parenthèses dans les pills de longueur :
   "Sprint (10)", "Demi-fond (25)", etc.
   Légèrement atténué pour laisser le libellé principal dominer. */
.pill .pill-num {
  font-weight: var(--mono-weight);
  margin-left: 2px;
}

.launch-bar {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 24px 28px;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 24px;
  align-items: center;
}
@media (max-width: 640px) {
  .launch-bar { grid-template-columns: 1fr; }
}
.launch-summary { font-size: 15px; }
.launch-summary strong { font-weight: 600; color: var(--ink); }
.launch-summary .muted { color: var(--ink-mute); font-style: italic; }

/* Base visuelle .btn : plateforme Nogegon. TOEFL ne garde ici que
   les contraintes fonctionnelles qui lui sont propres. */
.btn {
  white-space: nowrap;
}
.btn:hover:not(:disabled) {
  background: var(--accent);
  border-color: var(--accent);
}
.btn:disabled {
  background: var(--bg-deep);
  border-color: var(--rule);
  color: var(--ink-mute);
  cursor: not-allowed;
}
.btn-secondary {
  background: var(--bg-elev);
  color: var(--ink-soft);
  border: 1px solid var(--rule);
}
.btn-secondary:hover:not(:disabled) {
  background: var(--bg-deep);
  color: var(--ink);
  border-color: var(--ink-soft);
}
.btn-shortcut {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 9px;
  margin-left: 8px;
  text-transform: none;
  letter-spacing: 0;
}

/* ============= SESSION : TOPBAR ============= */
.session-topbar {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--bg);
  border-bottom: 1px solid var(--rule);
  padding: 16px 32px;
}
.session-topbar-inner {
  max-width: 820px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 24px;
  align-items: center;
}
.topbar-back {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-soft);
  text-decoration: none;
  padding: 6px 12px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  transition: all 0.15s;
  cursor: pointer;
}
.topbar-back:hover {
  border-color: var(--ink);
  color: var(--ink);
}
.topbar-progress {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.topbar-progress-text {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
}
.topbar-progress-text strong {
  font-weight: 600;
  color: var(--ink);
}
.topbar-progress-bar {
  height: 3px;
  background: var(--rule);
  overflow: hidden;
}
.topbar-progress-fill {
  height: 100%;
  background: var(--ink);
  transition: width 0.3s ease;
}
.topbar-score {
  display: none; /* score « x · y » masqué ; les #score-* restent dans le DOM pour engine.js */
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  text-align: right;
}
.topbar-score strong {
  color: var(--ink-soft);
  font-weight: 600;
}

/* ============= SESSION : ZONE PRINCIPALE ============= */
.session-page, #session-page {
  max-width: 820px;
  margin: 0 auto;
  padding: 48px 32px 96px;
}
@media (max-width: 640px) {
  .session-page { padding: 32px 20px 64px; }
  .session-topbar { padding: 12px 16px; }
  .session-topbar-inner { gap: 12px; grid-template-columns: auto 1fr; }
  .topbar-back { padding: 5px 10px; font-size: 10px; }
  .topbar-progress { gap: 6px; }
  .topbar-progress-text { font-size: 10px; gap: 8px; }
  .topbar-score { font-size: 10px; }
  .question-phrase { font-size: 19px; }
  .complete-input { font-size: 19px; padding: 12px 16px; }
  .option { padding: 14px 18px; font-size: 16px; }
  .feedback-verdict-text { font-size: 16px; }
  .feedback-text { font-size: 15px; }
  .feedback-correction { font-size: 15px; }
}

.question-header {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  margin-bottom: 24px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--rule);
  flex-wrap: wrap;
}
.question-id {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
}
.question-format {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
}
.instruction {
  font-family: var(--font-display);
  font-size: 1.35rem;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  margin-bottom: 18px;
}
.instruction em {
  font-size: 1rem;
  color: var(--ink-soft);
  font-style: italic;
}

.question-phrase {
  font-size: 24px;
  line-height: 1.45;
  color: var(--ink);
  margin-bottom: 32px;
  font-weight: 400;
}
.question-phrase em { font-style: italic; }
.question-phrase .blank {
  display: inline-block;
  min-width: 80px;
  border-bottom: 2px solid var(--ink-soft);
  padding: 0 4px;
}
.question-phrase .blank.filled {
  border-bottom-color: var(--ink);
  color: var(--ink);
  font-style: italic;
  font-weight: 500;
}

.options {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 32px;
}
.option {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 18px 24px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  cursor: pointer;
  transition: all 0.15s;
  font-size: 18px;
  color: var(--ink);
  text-align: left;
  width: 100%;
  font-family: inherit;
}
.option:hover:not(:disabled) {
  border-color: var(--ink);
  background: var(--bg-deep);
}
.option.selected {
  border-color: var(--ink);
  background: var(--bg-deep);
}
.option.selected .option-key {
  border-color: var(--ink);
  color: var(--ink);
  background: var(--bg);
}
.option-key {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  color: var(--ink-mute);
  width: 18px;
  height: 18px;
  border: 1px solid var(--rule);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.option:hover:not(:disabled) .option-key {
  border-color: var(--ink);
  color: var(--ink);
}
.option-text { flex: 1; }
.option:disabled { cursor: default; }
.option.correct { border-color: var(--good); }
.option.correct .option-key {
  border-color: var(--good);
  color: var(--good);
  background: var(--bg);
}
.option.incorrect { border-color: var(--accent); }
.option.incorrect .option-key {
  border-color: var(--accent);
  color: var(--accent);
  background: var(--bg);
}
.option.dimmed { opacity: 0.4; }
.option-mark {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
}
.option.correct .option-mark { color: var(--good); }
.option.incorrect .option-mark { color: var(--accent); }

.complete-input-wrap {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 32px;
}
.complete-input {
  font-family: var(--font-display);
  font-size: 24px;
  font-weight: 500;
  font-style: italic;
  padding: 14px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  color: var(--ink);
  width: 100%;
  transition: border-color 0.15s;
}
.complete-input:focus {
  outline: none;
  border-color: var(--ink);
}
.complete-input.correct {
  border-color: var(--good);
  color: var(--good);
}
.complete-input.incorrect {
  border-color: var(--accent);
  color: var(--accent);
}
.complete-hint {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 12px;
}
.complete-hint kbd {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  padding: 2px 6px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  color: var(--ink-soft);
  text-transform: none;
  letter-spacing: 0;
}

.feedback {
  margin-top: 24px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  animation: fadeIn 0.3s ease;
}
@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}
.feedback-verdict {
  display: flex;
  align-items: baseline;
  gap: 12px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}
.feedback-verdict-icon {
  font-family: var(--font-mono);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  font-weight: var(--mono-weight);
  padding: 4px 10px;
}
.feedback-verdict-icon.correct {
  color: var(--good);
  border: 1px solid var(--good);
}
.feedback-verdict-icon.incorrect {
  color: var(--accent);
  border: 1px solid var(--accent);
}
.feedback-verdict-text {
  font-size: 18px;
  color: var(--ink);
  font-style: italic;
}
.feedback-verdict-text strong {
  font-weight: 600;
  font-style: normal;
}
.feedback-block { margin-bottom: 16px; }
.feedback-label {
  font-family: var(--font-mono);
  font-size: 10px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.feedback-text {
  font-size: 1rem;
  line-height: 1.6;
  color: var(--ink-soft);
}
.feedback-text strong {
  color: var(--ink);
  font-weight: 600;
}
.feedback-text em { font-style: italic; }
.feedback-correction {
  background: var(--bg-elev);
  border-left: 2px solid var(--good);
  padding: 12px 16px;
  margin-top: 8px;
  font-style: italic;
  color: var(--ink);
  font-size: 1rem;
  line-height: 1.55;
  display: flex;
  align-items: center;
  gap: 12px;
}
.feedback-correction strong { font-weight: 600; font-style: normal; }

/* Slot audio à droite : pousse le bouton play à l'extrême droite du container.
   Utilisé dans les options de question (format O), dans le feedback (verdict,
   ee-pair-row, feedback-correction). Le container parent doit être en flex. */
.option-audio-slot,
.feedback-audio-slot {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  flex-shrink: 0;
}

.action-bar {
  margin-top: 32px;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  flex-wrap: wrap;
}

/* ============= RÉCAPITULATIF FINAL ============= */
.recap-stats {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  margin-bottom: 56px;
}
@media (max-width: 640px) { .recap-stats { grid-template-columns: 1fr; } }
.recap-stat {
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  padding: 24px 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.recap-stat-value {
  font-family: var(--font-display);
  font-size: 36px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.recap-stat-label {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
}

.recap-section { margin-bottom: 48px; }
.recap-list {
  border-top: 1px solid var(--rule);
}
.recap-item {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 20px;
  align-items: baseline;
  padding: 16px 4px;
  border-bottom: 1px solid var(--rule);
}
.recap-item-id {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  white-space: nowrap;
}
.recap-item-word {
  font-size: 18px;
  font-weight: 600;
  color: var(--ink);
}
.recap-item-sense {
  font-size: 14px;
  font-style: italic;
  color: var(--ink-soft);
  margin-top: 2px;
}
.recap-item-format {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  padding: 3px 8px;
  border: 1px solid var(--rule);
  white-space: nowrap;
}

.recap-empty {
  text-align: center;
  padding: 48px 16px;
  color: var(--ink-soft);
  font-style: italic;
  font-size: 18px;
  border: 1px dashed var(--rule);
}

.recap-actions {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  justify-content: flex-end;
}
@media (max-width: 640px) {
  .recap-actions { flex-direction: column; }
  .recap-actions .btn { width: 100%; }
}

/* Le toggle de thème est fourni par /assets/css/style.css (plateforme Nogegon). */

/* ============= TRANSITIONS ============= */
body, .bloc-row, .pill, .check, .btn, .launch-bar, .option, .topbar-back {
  transition: background-color 0.3s ease, border-color 0.3s ease, color 0.3s ease;
}

.footer {
  margin-top: 80px;
  padding-top: 24px;
  border-top: 1px solid var(--rule);
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  color: var(--ink-mute);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
}


/* ============= BOUTON DE RESET (vue config des catégories) ============= */
.reset-category-zone {
  margin: 24px 0 40px;
  display: flex;
  justify-content: flex-end;
}

.reset-category-btn {
  background: none;
  border: none;
  color: var(--ink-mute);
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  cursor: pointer;
  padding: 4px 8px;
  text-decoration: underline;
  text-decoration-color: var(--rule);
  text-underline-offset: 3px;
  transition: color 0.2s ease;
}

.reset-category-btn:hover {
  color: var(--accent);
  text-decoration-color: var(--accent);
}

.reset-category-btn:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.reset-category-btn:disabled:hover {
  color: var(--ink-mute);
  text-decoration-color: var(--rule);
}

/* =========================================================
   FORMAT M : Appariement (matching) — mécanique clic-clic
   Le set d'options est unique et affiché en haut (m-banner).
   Chaque ligne a un slot vide (m-row-slot) où l'option armée s'attribue.
   ========================================================= */

/* Banner d'options en haut de l'exercice (set unique, plus de duplication par ligne) */
.m-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-radius: 0;
  margin-bottom: 24px;
}

.m-banner-label {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  margin-right: 4px;
}

/* Pills cliquables : les options du banner et (réutilisées) du format D */
.m-pill {
  background: var(--bg);
  border: 1px solid var(--rule);
  border-radius: 0;
  padding: 6px 14px;
  font-size: 14px;
  font-family: var(--font-display);
  color: var(--ink);
  cursor: pointer;
  transition: all 0.15s ease;
  user-select: none;
}

.m-pill:hover:not(:disabled) {
  border-color: var(--ink-soft);
  background: var(--bg-elev);
}

/* Option actuellement armée (en attente d'attribution) */
.m-pill.armed {
  background: var(--armed);
  color: var(--bg);
  border-color: var(--armed);
}

/* Compatibilité avec format D : selected/correct/incorrect/dimmed restent valides */
.m-pill.selected {
  background: var(--ink);
  color: var(--bg);
  border-color: var(--ink);
}

.m-pill:disabled {
  cursor: default;
  opacity: 0.45;
}

.m-pill.correct {
  border-color: var(--good);
  background: var(--bg);
  color: var(--good);
  font-weight: 600;
}

.m-pill.incorrect {
  border-color: var(--accent);
  background: var(--bg);
  color: var(--accent);
  text-decoration: line-through;
}

.m-pill.dimmed {
  opacity: 0.3;
}

/* Grille des paires à apparier */
.m-grid {
  margin-bottom: 16px;
}

.m-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 8px;
  border-bottom: 1px solid var(--rule);
  cursor: pointer;
  transition: background 0.12s ease;
}

.m-row:last-child {
  border-bottom: none;
}

/* Quand une option est armée, les lignes encore vides indiquent qu'elles sont attribuables */
.m-row.armable {
  background: rgba(74, 58, 168, 0.08);
}
.m-row.armable:hover {
  background: rgba(74, 58, 168, 0.16);
}
[data-theme="dark"] .m-row.armable {
  background: rgba(142, 125, 214, 0.10);
}
[data-theme="dark"] .m-row.armable:hover {
  background: rgba(142, 125, 214, 0.18);
}

/* Feedback post-validation par ligne (vert ou rouge en arrière-plan) */
.m-row.correct {
  background: rgba(94, 178, 138, 0.08);
}
.m-row.wrong {
  background: rgba(206, 94, 94, 0.07);
}

.m-row-num {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  color: var(--ink-mute);
  width: 18px;
  flex-shrink: 0;
  text-align: right;
}

.m-row-right {
  font-family: var(--font-display);
  font-size: 16px;
  font-weight: 500;
  color: var(--ink);
  min-width: 200px;
  flex: 1 1 auto;
}

.m-row-arrow {
  color: var(--ink-mute);
  font-size: 14px;
  flex-shrink: 0;
}

/* Slot où l'option attribuée s'affiche (ou un tiret si vide) */
.m-row-slot {
  flex: 0 0 auto;
  min-width: 140px;
  min-height: 30px;
  display: flex;
  align-items: center;
  padding: 4px 10px;
  border: 1px dashed var(--rule);
  border-radius: 0;
  background: var(--bg);
}

.m-row.armable .m-row-slot {
  border-style: solid;
  border-color: var(--armed);
  background: var(--bg-elev);
}

.m-slot-empty {
  color: var(--ink-mute);
  font-size: 13px;
  font-style: italic;
}

/* Option attribuée à une ligne */
.m-placed {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 4px 4px 12px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}

.m-placed-text {
  display: inline-block;
}

.m-placed-x {
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 6px;
  font-size: 14px;
  line-height: 1.4;
  user-select: none;
  transition: color 0.12s ease;
}
.m-placed-x:hover {
  color: var(--accent);
}

/* Bonne réponse rappelée à côté d'une ligne fausse, après validation */
.m-expected-note {
  margin-left: 12px;
  color: var(--good);
  font-family: var(--font-display);
  font-size: 13px;
}
.m-expected-note strong {
  font-weight: 600;
}

/* Indicateur de validation par ligne (✓ ou ✗) */
.m-row-feedback {
  width: 18px;
  text-align: center;
  font-size: 16px;
  font-weight: 600;
  flex-shrink: 0;
}

.m-row-feedback.ok {
  color: var(--good);
}

.m-row-feedback.ko {
  color: var(--accent);
}

/* Ligne de statut sous la grille (« x sélectionné, cliquez sur une ligne », etc.) */
.m-status {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px;
  color: var(--ink-mute);
  padding: 8px 0 12px;
  letter-spacing: 0.02em;
}

/* Lignes de feedback "À retenir" pour les paires ratées */
.m-feedback-row {
  font-size: 14px;
  line-height: 1.6;
  padding: 6px 0;
  border-bottom: 1px solid var(--rule);
}

.m-feedback-row:last-child {
  border-bottom: none;
}

.m-feedback-row strong {
  font-weight: 600;
  color: var(--ink);
}

.m-feedback-row em {
  font-style: italic;
  color: var(--good);
}

.m-feedback-piege {
  display: block;
  margin-top: 4px;
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
}

/* Responsive : sur mobile étroit, le slot prend toute la largeur sous le nom */
@media (max-width: 600px) {
  .m-row {
    flex-wrap: wrap;
  }
  .m-row-right {
    flex: 1 1 calc(100% - 50px);
    min-width: 0;
  }
  .m-row-arrow {
    display: none;
  }
  .m-row-slot {
    flex: 1 1 100%;
    margin-left: 30px;
  }
  .m-row-feedback {
    position: absolute;
    right: 0;
  }
}

/* =========================================================
   FORMAT D : Discrimination contrastive
   Réutilise .m-tag et .m-pill du format M, mais layout différent :
   chaque ligne = phrase complète au-dessus, pills en-dessous.
========================================================= */

.d-options-set {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0 20px;
  padding: 12px 14px;
  border: 1px solid var(--rule);
  border-radius: 10px;
  background: var(--bg-elev);
}

.d-options-label {
  font-size: 13px;
  color: var(--ink-soft);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  margin-right: 4px;
}

.d-grid {
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 16px 0;
}

.d-row {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--rule);
  border-radius: 12px;
  background: var(--bg-elev);
  position: relative;
}

.d-row-phrase {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}

.d-row-num {
  flex: 0 0 auto;
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: var(--mono-weight);
  padding-top: 2px;
}

.d-row-text {
  flex: 1;
  font-size: 1rem;
  line-height: 1.5;
  color: var(--ink);
}

.d-row-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-left: 24px;
}

.d-pill {
  /* hérite de .m-pill, juste un padding un peu plus généreux */
  padding: 7px 16px;
}

.d-row-feedback {
  position: absolute;
  top: 14px;
  right: 16px;
  font-size: 18px;
  font-weight: 600;
}

.d-row-feedback.ok {
  color: var(--good);
}

.d-row-feedback.ko {
  color: var(--accent);
}

/* Le blank dans la phrase D : style proche du blank de C, mais contenu modifiable
   au cours de la sélection */
.d-blank {
  display: inline-block;
  min-width: 60px;
  padding: 2px 8px;
  border-bottom: 2px solid var(--ink-soft);
  text-align: center;
  font-weight: 500;
}

.d-blank.filled {
  background: var(--bg-elev);
  border-bottom-color: var(--accent);
}

.d-blank.filled.corrected {
  background: color-mix(in srgb, var(--accent) 10%, transparent);
  border-bottom-color: var(--accent);
  color: var(--accent);
}

/* Bloc de feedback D : explications par phrase */
.d-feedback-row {
  display: block;
  margin-bottom: 8px;
  font-size: 14px;
  line-height: 1.5;
}

.d-feedback-row:last-child {
  margin-bottom: 0;
}

.d-feedback-num {
  display: inline-block;
  width: 22px;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  color: var(--ink-soft);
}

.d-feedback-row strong {
  font-weight: 600;
  color: var(--ink);
}

.d-feedback-expl {
  color: var(--ink-soft);
}

@media (max-width: 600px) {
  .d-row-text {
    font-size: 16px;
  }
  .d-row-pills {
    margin-left: 0;
  }
  .d-row-feedback {
    top: 12px;
    right: 12px;
  }
}

/* =========================================================
   FORMAT K : Classement (catégorisation)
   Mécanique clic-clic identique à M, mais layout différent :
   - banner d'éléments à classer en haut (pastilles qui disparaissent
     une fois placées)
   - grille de 2 à 4 colonnes en dessous, chaque colonne = catégorie
   - les éléments placés s'affichent comme petites pastilles dans
     leur colonne d'attribution
   Réutilise .m-pill et .armed pour la cohérence visuelle.
   ========================================================= */

.k-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  padding: 12px 14px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  margin-bottom: 24px;
  min-height: 52px;
}

.k-banner-label {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  margin-right: 4px;
}

/* Pastille du banner : hérite de .m-pill (déjà défini plus haut),
   pas besoin de redéclarer la base. .k-pill ne sert qu'à scoper
   d'éventuelles surcharges plus tard. */
.k-pill {
  /* Hérite de .m-pill */
}

/* Grille des colonnes-catégories. Le nombre de colonnes est défini
   par une classe spécifique selon le nombre de catégories (2 à 4). */
.k-grid {
  display: grid;
  gap: 12px;
  margin-bottom: 16px;
}

.k-grid-cols-2 {
  grid-template-columns: repeat(2, 1fr);
}
.k-grid-cols-3 {
  grid-template-columns: repeat(3, 1fr);
}
.k-grid-cols-4 {
  grid-template-columns: repeat(4, 1fr);
}

/* Sur mobile, on retombe en une seule colonne (la 4-colonnes serait
   illisible). 2 colonnes restent jouables sur mobile. */
@media (max-width: 600px) {
  .k-grid-cols-3,
  .k-grid-cols-4 {
    grid-template-columns: repeat(2, 1fr);
  }
}
@media (max-width: 380px) {
  .k-grid-cols-2,
  .k-grid-cols-3,
  .k-grid-cols-4 {
    grid-template-columns: 1fr;
  }
}

/* Une colonne : zone de réception. Bordure dashed qui devient solide
   quand un item est armé (signal "déposez ici"). */
.k-col {
  display: flex;
  flex-direction: column;
  background: var(--bg);
  border: 1px dashed var(--rule);
  cursor: pointer;
  transition: border-color 0.15s ease, background 0.15s ease;
  min-height: 120px;
}

.k-col:hover {
  border-color: var(--ink-soft);
}

/* État "armable" : un item est armé, la colonne est une cible valide.
   Couleur violette comme la pastille armée, pour la cohérence du signal. */
.k-col.armable {
  border-style: solid;
  border-color: var(--armed);
  background: var(--bg-elev);
}
[data-theme="dark"] .k-col.armable {
  background: rgba(142, 125, 214, 0.08);
}

/* Header de colonne : le label de la catégorie. Style typographique
   proche d'un sous-titre, pour bien séparer du contenu de la colonne. */
.k-col-header {
  font-family: var(--font-display);
  font-size: 15px;
  font-weight: 600;
  color: var(--ink);
  padding: 10px 12px;
  border-bottom: 1px solid var(--rule);
  text-align: center;
  letter-spacing: -0.005em;
}

/* Corps de la colonne : contient les pastilles placées, en flux
   vertical. Padding modeste pour permettre à plusieurs pastilles
   de tenir sans gaspiller la place. */
.k-col-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 10px;
}

/* Pastille d'un élément placé dans une colonne. Style proche de
   .m-placed mais légèrement plus compact (les colonnes K sont étroites
   par rapport au slot M). */
.k-placed {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: 6px;
  padding: 4px 4px 4px 10px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  font-family: var(--font-display);
  font-size: 14px;
  color: var(--ink);
}

.k-placed-text {
  flex: 1;
}

.k-placed-x {
  color: var(--ink-mute);
  cursor: pointer;
  padding: 0 6px;
  font-size: 13px;
  user-select: none;
  transition: color 0.12s ease;
}
.k-placed-x:hover {
  color: var(--accent);
}

/* Feedback post-validation sur les pastilles placées */
.k-placed.correct {
  border-color: var(--good);
  color: var(--good);
}

.k-placed.incorrect {
  border-color: var(--accent);
  color: var(--accent);
  text-decoration: line-through;
  text-decoration-thickness: 1px;
}

/* Statut sous la grille (« x sélectionné », « 4/8 classés », etc.) */
.k-status {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px;
  color: var(--ink-mute);
  padding: 8px 0 12px;
  letter-spacing: 0.02em;
}

/* Lignes de feedback détaillé après validation. Une ligne par item,
   avec la catégorie correcte et l'explication. */
.k-feedback-row {
  display: block;
  padding: 10px 0;
  border-bottom: 1px solid var(--rule);
  font-size: 14px;
  line-height: 1.6;
}

.k-feedback-row:last-child {
  border-bottom: none;
}

.k-feedback-mark {
  display: inline-block;
  width: 18px;
  font-weight: 600;
  margin-right: 6px;
}

.k-feedback-row.ok .k-feedback-mark {
  color: var(--good);
}
.k-feedback-row.ko .k-feedback-mark {
  color: var(--accent);
}

.k-feedback-row strong {
  font-weight: 600;
  color: var(--ink);
}

.k-feedback-row em {
  font-style: italic;
  color: var(--good);
  font-weight: 500;
}

.k-feedback-arrow {
  color: var(--ink-mute);
  margin: 0 6px;
}

.k-feedback-user {
  color: var(--accent);
  font-style: italic;
  font-size: 13px;
  margin-left: 4px;
}

.k-feedback-expl {
  margin-top: 4px;
  margin-left: 24px;
  color: var(--ink-soft);
  font-size: 13px;
  font-style: italic;
}

/* =========================================================
   AUDIO : bouton de lecture inline (TTS)
   Bouton compact qui peut s'insérer à côté d'un mot, d'une phrase ou d'un
   titre. Aspect discret par défaut, accent visible quand la lecture est en
   cours. La couleur d'accent reprend le terracotta de l'identité.
   ========================================================= */

.audio-play-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin-left: 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
  color: var(--ink-soft);
  cursor: pointer;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  line-height: 1;
  vertical-align: middle;
  transition: color 120ms, border-color 120ms, background 120ms;
}

.audio-play-btn:hover {
  color: var(--accent);
  border-color: var(--accent);
}

.audio-play-btn:active {
  background: var(--bg-elev);
}

.audio-play-btn-small {
  width: 18px;
  height: 18px;
  margin-left: 6px;
  font-size: 9px;
}

.audio-play-btn-playing {
  color: var(--accent);
  border-color: var(--accent);
  background: var(--bg-elev);
}

.audio-play-icon {
  display: inline-block;
  pointer-events: none;
}

/* =========================================================
   FORMAT E1 : feedback "la paire"
   Affichage côte à côte des phrases correcte et incorrecte après validation,
   avec un marqueur ✓/✗ et la mention "vue à l'instant" sur celle que
   l'apprenant a réellement traitée.
   ========================================================= */

.ee-pair {
  display: flex;
  flex-direction: column;
  gap: 0;
  border: 1px solid var(--rule);
  background: var(--bg);
}

.ee-pair-row {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 10px 14px;
  font-size: 15px;
  line-height: 1.5;
  border-bottom: 1px solid var(--rule);
}

.ee-pair-row:last-child {
  border-bottom: none;
}

.ee-pair-mark {
  flex-shrink: 0;
  font-weight: var(--mono-weight);
  font-size: 14px;
  width: 16px;
  text-align: center;
  font-family: var(--font-mono);
}

.ee-pair-correcte .ee-pair-mark {
  color: var(--good);
}

.ee-pair-incorrecte .ee-pair-mark {
  color: var(--accent);
}

.ee-pair-phrase {
  flex: 1;
  color: var(--ink);
}

.ee-pair-incorrecte .ee-pair-phrase {
  color: var(--ink-soft);
}

.ee-pair-vue {
  flex-shrink: 0;
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 2px 8px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  align-self: center;
}

/* =========================================================
   FORMAT X : Repérer l'erreur
   Une phrase rendue token par token, chaque token cliquable.
   Contrainte critique : aucun token ne doit paraître plus interactif
   qu'un autre AVANT le clic. État de survol uniforme partout, padding
   uniforme partout, aucune classe distinctive sur le mot fautif.
   ========================================================= */

/* Conteneur de la phrase. Hérite de .question-phrase pour la taille
   et la couleur du texte, mais on ajuste line-height pour absorber le
   padding vertical des tokens sans déchirer la ligne. */
.x-phrase {
  line-height: 2;
  /* Petit reset : la phrase est composée de <button> + espaces, le
     line-height suffit à aérer. Pas de margin supplémentaire. */
}

/* Token cliquable : button reset. Aspect identique au texte normal,
   sauf au survol où un soulignement pointillé discret signale
   l'interactivité. Padding latéral pour que les mots courts (« I »,
   « am ») et la ponctuation collée (« you. ») aient une zone de clic
   confortable, alignée avec celle des mots longs. */
.x-token {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  background: transparent;
  border: none;
  border-bottom: 1px dotted transparent;
  padding: 2px 4px;
  margin: 0;
  cursor: pointer;
  /* line-height local pour que le border-bottom du :hover ne saute pas
     visuellement par rapport aux tokens non survolés */
  line-height: 1.3;
  font-weight: inherit;
  transition: border-color 0.12s ease, color 0.12s ease;
}

.x-token:hover:not(:disabled) {
  border-bottom-color: var(--ink-soft);
  color: var(--ink);
}

.x-token:focus-visible {
  outline: 1px dotted var(--ink-soft);
  outline-offset: 2px;
}

.x-token:disabled {
  cursor: default;
}

/* État correct : le token cible (ou le token cliqué SI c'est le bon).
   Encadré vert, sans fond, pour rester sobre. */
.x-token.correct {
  border-bottom: 2px solid var(--good);
  color: var(--good);
  font-weight: 500;
}

/* État incorrect : le token cliqué quand il n'est pas le bon.
   Encadré rouge, barré pour signifier « à supprimer / à remplacer ». */
.x-token.incorrect {
  border-bottom: 2px solid var(--accent);
  color: var(--accent);
  text-decoration: line-through;
  text-decoration-color: var(--accent);
}

/* Tous les autres tokens après validation : atténués pour ramener l'œil
   sur les deux tokens significatifs (le bon et le cliqué). */
.x-token.dimmed {
  opacity: 0.4;
}

/* =========================================================
   FORMAT INFO : Carte de cours / rappel
   Pas d'évaluation. Continuité visuelle avec les exercices :
   même question-header, même typographie de fond. Mais l'accent
   est porté par la couleur "armed" (violet) au lieu du bleu encre,
   pour signaler à l'apprenant qu'il change de registre — il n'est
   pas en train de répondre, il est en train de lire.
   ========================================================= */

.info-card {
  margin-bottom: 32px;
  padding: 28px 32px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--armed);
}

@media (max-width: 640px) {
  .info-card {
    padding: 22px 20px;
  }
}

/* Titre principal de la notion : plus généreux que les question-phrase
   d'exercice, mais reste dans la même famille typographique pour la
   continuité demandée. Couleur encre standard — le violet est réservé
   aux barres structurelles (bordure gauche de la carte, barres des
   exemples), pas au texte. */
.info-title {
  font-family: var(--font-display);
  font-size: 28px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin-bottom: 18px;
}

@media (max-width: 640px) {
  .info-title {
    font-size: 23px;
  }
}

/* Corps de la notion : prose lisible, taille légèrement supérieure aux
   feedbacks pour signaler que c'est du contenu de cours, pas un commentaire. */
.info-content {
  font-size: 1rem;
  line-height: 1.65;
  color: var(--ink);
}

.info-content p + p {
  margin-top: 12px;
}

.info-content em {
  font-style: italic;
  color: var(--ink-soft);
}

.info-content strong {
  font-weight: 600;
  color: var(--ink);
}

/* Blocs secondaires (exemples, attention) : structure proche des
   feedback-block, avec petit label en mono majuscule. */
.info-block {
  margin-top: 24px;
  padding-top: 18px;
  border-top: 1px solid var(--rule);
}

.info-block-label {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}

.info-examples {
  list-style: none;
  padding: 0;
  margin: 0;
}

.info-example {
  font-family: var(--font-display);
  font-size: 16px;
  line-height: 1.55;
  color: var(--ink);
  padding: 6px 0 6px 16px;
  border-left: 2px solid var(--armed);
  margin-bottom: 8px;
}

.info-example:last-child {
  margin-bottom: 0;
}

.info-example em {
  font-style: italic;
}

/* Bloc Attention : signal visuel un peu plus appuyé, mais reste
   sobre — on ne met pas d'icône bruyante. */
.info-block-attention .info-block-label {
  color: var(--accent);
}

.info-text {
  font-size: 15px;
  line-height: 1.6;
  color: var(--ink-soft);
}

.info-text em {
  font-style: italic;
  color: var(--ink);
}

/* Tags : pastilles discrètes en bas de carte, hors flux de lecture. */
.info-tags {
  margin-top: 24px;
  padding-top: 16px;
  border-top: 1px dashed var(--rule);
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.info-tag {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 10px;
  letter-spacing: var(--mono-tracking);
  text-transform: uppercase;
  color: var(--ink-mute);
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: var(--bg);
}

/* =========================================================
   READING : page de lecture (étape 1) et page de questions (étape 2)
   
   Granularité différente des autres catégories : un texte parent contient
   plusieurs questions, présentées en deux étapes. La page Lecture (étape 1)
   demande une typographie de lecture longue ; la page Questions (étape 2)
   reprend l'ergonomie habituelle avec le texte replié en haut.
   ========================================================= */

/* Eyebrow "Étape N sur 2 · …" — pattern eyebrow standard du design system */
.reading-step-label {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: 0.18em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}

/* Titre du texte (ex : "The Origins of Coral Bleaching") */
.reading-title {
  font-size: 36px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  color: var(--ink);
  margin-bottom: 12px;
}
@media (max-width: 640px) {
  .reading-title { font-size: 26px; }
}

/* Variante compacte utilisée dans le bloc replié de l'étape 2 */
.reading-title-small {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.2;
  color: var(--ink);
  margin: 16px 0 12px;
}

/* Métadonnées du texte ("R-C-001 · court · 5 questions à suivre") */
.reading-meta {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  margin-bottom: 32px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--rule);
}

/* Conteneur du texte : largeur de lecture confortable (mesure typographique
   ~65-75 caractères par ligne). Le paragraphe lui-même est limité plutôt
   que le conteneur, pour que le bandeau métadonnées et la launch-bar
   puissent rester pleine largeur. */
.reading-text {
  margin-bottom: 40px;
}

/* Paragraphes : line-height généreux pour la lecture longue, espacement
   marqué entre paragraphes, indentation de gauche pour faire respirer
   le numéro de paragraphe en marge. */
.reading-para {
  font-size: 1rem;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 20px;
  position: relative;
  padding-left: 36px;
  max-width: none;
}
.reading-para:last-child { margin-bottom: 0; }

@media (max-width: 640px) {
  .reading-para {
    font-size: 16px;
    line-height: 1.65;
    padding-left: 28px;
  }
}

/* Numéro [1] [2] [3]… en marge gauche, en monospace, discret.
   Position absolue pour qu'il sorte du flux du texte et reste aligné
   sur la première ligne du paragraphe. */
.reading-para-num {
  position: absolute;
  left: 0;
  top: 0;
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  color: var(--ink-mute);
  line-height: inherit;
  /* Le numéro est aligné sur la première ligne par sa font-size de 17px×1.7 */
  padding-top: 4px;
}

@media (max-width: 640px) {
  .reading-para-num {
    font-size: 10px;
    padding-top: 3px;
  }
}

/* =========================================================
   READING — étape 2 : texte replié + questions
   ========================================================= */

/* Bloc <details> qui contient le texte de référence en mode replié.
   On garde le texte accessible pendant que l'apprenant répond, mais sans
   qu'il occupe tout l'écran. */
.reading-text-collapsible {
  margin: 0 0 40px;
  padding: 16px 20px;
  background: var(--bg-elev);
  border: 1px solid var(--rule);
}

.reading-text-collapsible summary {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-soft);
  cursor: pointer;
  list-style: none;
  padding: 4px 0;
  user-select: none;
}

.reading-text-collapsible summary::-webkit-details-marker { display: none; }

.reading-text-collapsible summary:hover {
  color: var(--ink);
}

/* Indicateur ▸ / ▾ avant le summary, qui pivote selon l'état */
.reading-text-collapsible summary::before {
  content: '▸';
  display: inline-block;
  margin-right: 8px;
  transition: transform 0.15s ease;
  font-size: 10px;
  color: var(--ink-mute);
}
.reading-text-collapsible[open] summary::before {
  transform: rotate(90deg);
}

/* Le texte replié reprend les styles .reading-text/.reading-para mais sans
   la largeur de lecture pleine — il vit dans un cadre plus restreint. */
.reading-text-collapsible .reading-text {
  margin-top: 16px;
  margin-bottom: 0;
}

.reading-text-collapsible .reading-para {
  font-size: 15px;
  line-height: 1.6;
  margin-bottom: 14px;
}

/* Conteneur des questions de l'étape 2 */
.reading-questions {
  display: flex;
  flex-direction: column;
  gap: 40px;
  margin-bottom: 40px;
}

/* Chaque question, avec son numéro et ses options.
   .question-phrase et .option héritent du design system standard. */
.reading-question {
  padding-top: 24px;
  border-top: 1px solid var(--rule);
}
.reading-question:first-child {
  padding-top: 0;
  border-top: none;
}

/* "Question 1 / 5" — eyebrow propre à chaque question */
.reading-question-num {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--ink-mute);
  margin-bottom: 12px;
}

/* Override léger : .question-phrase dans Reading est un peu plus serré
   (la question est un énoncé, pas une phrase à trou) */
.reading-question .question-phrase {
  font-size: 19px;
  line-height: 1.45;
  margin-bottom: 16px;
}

/* =========================================================
   BOUTON "RETOUR AU MENU PRINCIPAL"
   Utilisé en bas des pages de catégorie et de la page Révisions.
   ========================================================= */
.back-to-home-wrap {
  display: flex;
  justify-content: center;
  margin: 64px 0 32px;
}
.back-to-home {
  font-family: var(--font-mono);
  font-size: 11px;
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  padding: 8px 14px;
  background: transparent;
  color: var(--ink);
  border: 1px solid var(--ink);
  cursor: pointer;
  text-decoration: none;
  transition: background 0.15s ease, color 0.15s ease;
}
.back-to-home:hover {
  background: var(--ink);
  color: var(--bg);
}

/* ===================== FORMAT R — échelle / gradation ===================== */
.r-echelle{font-family:var(--font-display);font-style:italic;color:var(--ink-soft);margin:-4px 0 16px}
.r-banner{display:flex;flex-wrap:wrap;gap:10px;min-height:44px;padding:12px;border:1px dashed var(--rule);border-radius:10px;margin:12px 0 20px;align-items:center}
.r-banner-label{font-family:var(--font-mono); font-weight: var(--mono-weight);font-size:11px;color:var(--ink-mute);margin-right:4px}
.r-track{display:flex;gap:12px;align-items:stretch;margin-bottom:8px}
.r-slot{flex:1;min-height:64px;border:1.5px solid var(--rule);border-radius:10px;background:var(--bg);display:flex;align-items:center;justify-content:center;cursor:pointer;position:relative;transition:.12s}
.r-slot-num{position:absolute;top:6px;left:10px;font-family:var(--font-mono); font-weight: var(--mono-weight);font-size:11px;color:var(--ink-mute)}
.r-slot-body{display:flex;align-items:center;justify-content:center;gap:8px;padding:8px}
.r-slot.armable{border-color:var(--armed);border-style:dashed}
.r-slot.filled{cursor:default}
.r-placed{display:inline-flex;align-items:center;gap:8px}
.r-placed-text{font-family:var(--font-mono);font-size:15px;font-weight: var(--mono-weight)}
.r-placed-x{font-family:var(--font-mono); font-weight: var(--mono-weight);font-size:12px;color:var(--ink-mute);cursor:pointer;border:1px solid var(--rule);border-radius:6px;padding:1px 7px}
.r-slot.ok{border-color:var(--good);background:color-mix(in srgb, var(--good) 12%, var(--bg))}
.r-slot.ko{border-color:var(--accent);background:color-mix(in srgb, var(--accent) 12%, var(--bg))}
.r-poles{display:flex;justify-content:space-between;font-family:var(--font-mono); font-weight: var(--mono-weight);font-size:11px;color:var(--ink-mute);text-transform:uppercase;letter-spacing:.06em;margin-bottom:16px}
.r-poles-arrow{flex:1;text-align:center;color:var(--rule)}
.r-status{font-family:var(--font-mono); font-weight: var(--mono-weight);font-size:12px;color:var(--ink-mute);margin-bottom:12px;min-height:1em}
.r-correct-order{font-family:var(--font-mono)}
.r-lt{color:var(--ink-mute)}
@media (max-width:520px){.r-track{flex-direction:column}.r-poles{flex-direction:column;align-items:flex-start;gap:2px}.r-poles-arrow{display:none}}

/* ============= MODALE DE CONFIRMATION =============
   Composant partagé (reset des stats sur la home, quitter une session…).
   Markup : .confirm-overlay[hidden] > .confirm-modal > icône / titre / texte / actions.
   Utilise les tokens TOEFL (--bg / --ink / --accent), d'où sa place ici (chargée par
   index.html ET review-session.html) plutôt que dans style.css. */
.confirm-overlay {
  position: fixed; inset: 0; z-index: 200;
  background: rgba(20, 20, 20, 0.45);
  display: flex; align-items: center; justify-content: center; padding: 20px;
}
.confirm-overlay[hidden] { display: none; }
.confirm-modal {
  background: var(--bg); border: 1px solid var(--rule); border-radius: var(--radius-lg, 8px);
  padding: 28px; max-width: 380px; text-align: center;
}
.confirm-icon {
  width: 44px; height: 44px; border-radius: 50%;
  background: color-mix(in srgb, var(--accent) 16%, var(--bg-elev)); color: var(--accent);
  display: flex; align-items: center; justify-content: center; margin: 0 auto 14px;
}
.confirm-title { font-family: var(--font-display); font-size: 1.2rem; color: var(--ink); margin: 0 0 6px; }
.confirm-text { font-size: 14px; color: var(--ink-soft); line-height: 1.6; margin: 0 0 20px; }
.confirm-actions { display: flex; gap: 10px; justify-content: center; }
.confirm-cancel, .confirm-ok {
  font-family: var(--font-mono); font-weight: var(--mono-weight); font-size: 11px; letter-spacing: var(--mono-tracking); text-transform: uppercase;
  padding: 9px 16px; border-radius: var(--radius-md, 4px); cursor: pointer;
  border: 1px solid var(--rule); background: transparent; color: var(--ink-soft);
}
.confirm-cancel:hover { border-color: var(--ink); color: var(--ink); }
.confirm-ok { border-color: var(--accent); color: var(--accent); }
.confirm-ok:hover { background: var(--accent); color: var(--bg); }

/* ============= BARRE DE PROGRESSION (comp-progress) =============
   Portée depuis components.css (Nuancier), tokens remappés : piste --rule,
   remplissage --ink (primary), rayons pilule, transition --t-med.
   Hauteurs explicites (l'échelle d'espacement Nuancier diffère). */
.comp-progress-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; margin-bottom: 6px;
}
.comp-progress-value {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; color: var(--ink-mute);
}
.comp-progress {
  position: relative; width: 100%;
  background: var(--rule);
  border-radius: var(--radius-pill);
  overflow: hidden;
}
.comp-progress--sm { height: 4px; }
.comp-progress--md { height: 8px; }
.comp-progress--lg { height: 12px; }
.comp-progress-fill {
  height: 100%;
  border-radius: var(--radius-pill);
  background: var(--ink);
  transition: width var(--t-med);
}
.comp-progress--primary .comp-progress-fill { background: var(--ink); }
.comp-progress--success .comp-progress-fill { background: var(--good); }
.comp-progress--error   .comp-progress-fill { background: var(--accent); }

/* ============= INTERSTICIEL DE FIN DE SESSION (bilan + étoiles) ============= */
.session-recap {
  max-width: 520px;
  margin: 48px auto;
  text-align: center;
}
.recap-eyebrow {
  font-family: var(--font-mono); font-weight: var(--mono-weight);
  font-size: 12px; text-transform: uppercase; letter-spacing: var(--mono-tracking);
  color: var(--ink-mute); margin-bottom: 16px;
}
.recap-heading {
  font-family: var(--font-display); font-size: 2.4rem; font-weight: 600;
  color: var(--ink); margin: 0 0 18px; line-height: 1.1;
}
.recap-stars { display: flex; justify-content: center; gap: 8px; margin-bottom: 22px; }
.recap-star { width: 34px; height: 34px; }
/* Or « rating » : pas d'équivalent dans la palette, littéral assumé (clair + sombre). */
.recap-star.is-on  { fill: #C9A227; }
.recap-star.is-off { fill: var(--rule); }
[data-theme="dark"] .recap-star.is-on { fill: #D9B84A; }
.recap-score {
  font-family: var(--font-display); font-size: 1.6rem; color: var(--ink); margin: 0 0 8px;
}
.recap-score strong { color: var(--good); }
.recap-message {
  font-size: 1.05rem; color: var(--ink-soft); line-height: 1.5; margin: 0 0 28px;
}
.recap-back { min-width: 220px; }

/* ============================================================
   MOBILE-FIRST OVERRIDES — 2026-06
   Base pensée pour 320–767 px, enrichie à partir de 48rem.
   Les noms de classes existants sont conservés pour ne pas casser le HTML/JS.
   ============================================================ */

:root {
  --toefl-gutter: clamp(16px, 4vw, 32px);
  --toefl-section-space: clamp(32px, 8vw, 64px);
  --toefl-card-padding: clamp(16px, 4vw, 28px);
  --toefl-tap: 48px;
  --toefl-reading-width: 68ch;
}

html,
body {
  width: 100%;
  min-width: 320px;
  min-height: 100dvh;
  overflow-x: clip;
}


/* Layout mobile par défaut. */
.page {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-top: max(28px, env(safe-area-inset-top));
  padding-right: max(var(--toefl-gutter), env(safe-area-inset-right));
  padding-bottom: max(56px, env(safe-area-inset-bottom));
  padding-left: max(var(--toefl-gutter), env(safe-area-inset-left));
}

.page--flush {
  padding-bottom: 0;
}

.page > .header {
  margin-bottom: clamp(32px, 8vw, 56px);
}

.toefl-page-header {
  margin-bottom: clamp(32px, 8vw, 56px);
  padding-bottom: clamp(20px, 5vw, 32px);
}

/* Pages "session" : le header est seul dans .page--flush, suivi de la topbar.
   On le resserre et on retire son trait — la topbar fait office de séparateur.
   Supprime le grand vide et le double trait horizontal. */
.page--flush .header {
  margin-bottom: 0;
  padding-bottom: clamp(16px, 4vw, 24px);
  border-bottom: 0;
}

.breadcrumb {
  margin-bottom: clamp(16px, 5vw, 24px);
  overflow-wrap: anywhere;
}

.title {
  max-width: 100%;
  font-size: clamp(2rem, 10vw, 3.5rem);
  line-height: 1.04;
  text-wrap: balance;
}

.subtitle {
  max-width: min(100%, 35rem);
  font-size: clamp(1rem, 4.5vw, 1.1875rem);
}

.section-label {
  margin-bottom: clamp(16px, 5vw, 24px);
}

/* Configuration : une composition lisible à une seule colonne. */
.blocs-list {
  margin-bottom: var(--toefl-section-space);
}

.bloc-row {
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas:
    "check info stats"
    "check level stats";
  gap: 8px 14px;
  padding: 16px 4px;
}

.bloc-row .check {
  grid-area: check;
  align-self: start;
  width: 24px;
  height: 24px;
  margin-top: 2px;
}

.bloc-row .bloc-info { grid-area: info; }
.bloc-row .bloc-level {
  grid-area: level;
  justify-self: start;
}
.bloc-row .bloc-stats {
  grid-area: stats;
  min-width: 0;
  align-self: center;
}

.bloc-name {
  font-size: clamp(1.125rem, 5vw, 1.375rem);
  overflow-wrap: anywhere;
}

.bloc-desc {
  font-size: clamp(0.8125rem, 3.5vw, 0.875rem);
}

.options-grid {
  grid-template-columns: minmax(0, 1fr);
  gap: 24px;
  margin-bottom: var(--toefl-section-space);
}

.pills {
  gap: 8px;
}

.pill,
.m-pill,
.d-pill {
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  white-space: normal;
  text-align: center;
}

.launch-bar {
  grid-template-columns: minmax(0, 1fr);
  gap: 18px;
  padding: var(--toefl-card-padding);
}

.btn {
  width: 100%;
  min-height: var(--toefl-tap);
  white-space: normal;
  text-align: center;
}

.btn-shortcut,
kbd {
  display: none;
}

/* Session : sticky topbar adaptée aux safe areas. */
.session-topbar {
  top: 0;
  padding-top: max(10px, env(safe-area-inset-top));
  padding-right: max(12px, env(safe-area-inset-right));
  padding-bottom: 10px;
  padding-left: max(12px, env(safe-area-inset-left));
}

.session-topbar-inner {
  width: 100%;
  max-width: none;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 10px;
}

.topbar-back {
  min-width: 44px;
  min-height: 44px;
  padding: 8px 10px;
}

.topbar-progress {
  min-width: 0;
}

.topbar-progress-text {
  gap: 8px;
  font-size: 10px;
}

.session-page,
#session-page {
  width: 100%;
  max-width: none;
  margin-inline: auto;
  padding-top: clamp(28px, 7vw, 48px);
  padding-right: max(var(--toefl-gutter), env(safe-area-inset-right));
  padding-bottom: max(88px, env(safe-area-inset-bottom));
  padding-left: max(var(--toefl-gutter), env(safe-area-inset-left));
}

.question-header {
  align-items: flex-start;
  gap: 10px;
  margin-bottom: 20px;
}

.question-id,
.question-format {
  overflow-wrap: anywhere;
}

.instruction {
  max-width: var(--toefl-reading-width);
  font-size: clamp(1.125rem, 5vw, 1.35rem);
}

.question-phrase {
  max-width: var(--toefl-reading-width);
  font-size: clamp(1.1875rem, 5.2vw, 1.5rem);
  line-height: 1.5;
  margin-bottom: 28px;
  overflow-wrap: anywhere;
}

.question-phrase .blank,
.d-blank {
  max-width: 100%;
  min-width: min(80px, 35vw);
}

.options {
  gap: 10px;
}

.option {
  min-height: 56px;
  gap: 12px;
  padding: 14px 16px;
  font-size: clamp(1rem, 4.2vw, 1.125rem);
  overflow-wrap: anywhere;
}

.option-key {
  width: 24px;
  height: 24px;
}

.complete-input-wrap {
  margin-bottom: 28px;
}

.complete-input {
  min-height: 56px;
  padding: 12px 16px;
  font-size: max(16px, clamp(1.125rem, 5vw, 1.5rem));
}

.complete-hint {
  line-height: 1.5;
  flex-wrap: wrap;
}

.feedback {
  margin-top: 24px;
  padding-top: 24px;
  scroll-margin-bottom: 96px;
}

.feedback-verdict {
  align-items: flex-start;
}

.feedback-text,
.feedback-correction {
  font-size: clamp(0.9375rem, 4vw, 1rem);
  overflow-wrap: anywhere;
}

.feedback-correction {
  align-items: flex-start;
}

.action-bar {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 10px;
  margin-top: 28px;
}

.action-bar .btn {
  width: 100%;
}

/* Récapitulatif. */
.recap-stats {
  grid-template-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: var(--toefl-section-space);
}

.recap-stat {
  padding: 20px 18px;
}

.recap-item {
  grid-template-columns: minmax(0, 1fr) auto;
  grid-template-areas:
    "id format"
    "content content";
  gap: 8px 12px;
  align-items: start;
}

.recap-item-id { grid-area: id; }
.recap-item-format { grid-area: format; }
.recap-item > :not(.recap-item-id):not(.recap-item-format) {
  grid-area: content;
  min-width: 0;
}

.recap-actions {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
}

.recap-actions .btn {
  width: 100%;
}

/* Formats d’appariement et de discrimination : interaction tactile. */
.m-banner,
.k-banner,
.d-options-set {
  gap: 8px;
  padding: 12px;
}

.m-row {
  position: relative;
  flex-wrap: wrap;
  gap: 8px 10px;
  padding: 14px 4px;
  min-height: 56px;
}

.m-row-right {
  flex: 1 1 calc(100% - 42px);
  min-width: 0;
}

.m-row-arrow {
  display: none;
}

.m-row-slot {
  flex: 1 1 100%;
  min-width: 0;
  min-height: 44px;
  margin-left: 28px;
}

.m-placed {
  max-width: 100%;
  min-height: 40px;
}

.m-placed-text {
  overflow-wrap: anywhere;
}

.m-placed-x {
  min-width: 36px;
  min-height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.m-row-feedback {
  position: absolute;
  top: 14px;
  right: 4px;
}

.d-row {
  padding: 14px;
  border-radius: 8px;
}

.d-row-pills {
  margin-left: 0;
}


.footer {
  margin-top: var(--toefl-section-space);
  padding-bottom: env(safe-area-inset-bottom);
}

/* Enrichissements tablette et desktop. */
@media (min-width: 48rem) {
  .page {
    max-width: 960px;
    padding-top: 64px;
    padding-right: 32px;
    padding-bottom: 96px;
    padding-left: 32px;
  }

  /* Le flush doit aussi gagner sur desktop : sans ce rappel dans la requête,
     le .page ci-dessus (même spécificité, plus bas dans la source) réintroduit
     les 96px et crée un vide avant la topbar de session. */
  .page--flush { padding-bottom: 0; }

  .title {
    font-size: clamp(3rem, 6vw, 3.5rem);
  }

  .bloc-row {
    grid-template-columns: auto minmax(0, 1fr) auto auto;
    grid-template-areas: none;
    gap: 24px;
    padding: 20px 4px;
  }

  .bloc-row .check,
  .bloc-row .bloc-info,
  .bloc-row .bloc-level,
  .bloc-row .bloc-stats {
    grid-area: auto;
    align-self: center;
  }

  .bloc-row .check {
    width: 20px;
    height: 20px;
    margin-top: 0;
  }

  .bloc-row .bloc-level { justify-self: auto; }
  .bloc-row .bloc-stats { min-width: 110px; }

  .options-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 32px;
  }

  .launch-bar {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 24px;
    padding: 24px 28px;
  }

  .btn {
    width: auto;
    white-space: nowrap;
  }

  .btn-shortcut,
  kbd {
    display: inline;
  }

  .session-topbar {
    padding: 16px 32px;
  }

  .session-topbar-inner,
  .session-page,
  #session-page {
    max-width: 820px;
  }

  .session-page,
  #session-page {
    padding: 48px 32px 96px;
  }

  /* Cohérence : header, topbar et contenu partagent la même colonne (820px),
     et la topbar n'est plus pleine largeur — son trait s'aligne sur le reste. */
  .page--flush {
    max-width: 820px;
  }
  .session-topbar {
    max-width: 820px;
    margin-inline: auto;
  }
  .session-topbar-inner {
    max-width: none;
  }

  .action-bar {
    display: flex;
    justify-content: flex-end;
    flex-wrap: wrap;
  }

  .action-bar .btn {
    width: auto;
  }

  .recap-stats {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 16px;
  }

  .recap-item {
    grid-template-columns: auto minmax(0, 1fr) auto;
    grid-template-areas: none;
    gap: 20px;
    align-items: baseline;
  }

  .recap-item-id,
  .recap-item-format,
  .recap-item > :not(.recap-item-id):not(.recap-item-format) {
    grid-area: auto;
  }

  .recap-actions {
    display: flex;
    justify-content: flex-end;
  }

  .recap-actions .btn {
    width: auto;
  }

  .m-row {
    flex-wrap: nowrap;
    padding: 12px 8px;
  }

  .m-row-right {
    min-width: 200px;
    flex: 1 1 auto;
  }

  .m-row-arrow {
    display: block;
  }

  .m-row-slot {
    flex: 0 0 auto;
    min-width: 140px;
    margin-left: 0;
  }

  .m-row-feedback {
    position: static;
  }
}

@media (orientation: landscape) and (max-height: 31rem) {
  .session-topbar {
    position: static;
  }

  .session-page,
  #session-page {
    padding-top: 20px;
  }

}

@media (prefers-reduced-motion: reduce) {
  .feedback,
  .topbar-progress-fill {
    animation: none;
    transition: none;
  }
}

/* ============================================================
   COMPOSANTS MÉTIER TOEFL
   Ces règles vivaient auparavant dans le design system global Nogegon.
   Elles appartiennent au service TOEFL : home + pages de catégorie.
   ============================================================ */
/* --- Lanceur de session (« Parcours ») ---
   Sélecteurs de nombre/niveau (pastilles .comp-tag) + bouton Démarrer
   (.color-block). Partagé par la home et les pages de catégorie. */
.parcours { display: flex; flex-direction: column; gap: var(--space-lg); max-width: 720px; }
.parcours-group-label {
  font-family: var(--font-mono);
  font-size: var(--text-sm);
  font-weight: var(--mono-weight);
  text-transform: uppercase;
  letter-spacing: var(--mono-tracking);
  color: var(--color-text);
  margin-bottom: var(--space-md);
}
.parcours-choices { display: flex; flex-wrap: wrap; gap: 10px; }
/* État sélectionné d'une pastille : pleine. */
.parcours-choice.is-selected {
  background: var(--color-text);
  color: var(--color-bg);
  border-color: var(--color-text);
}
.parcours-start { width: 100%; min-height: 0; padding: 24px 28px; gap: 8px; border-radius: var(--radius-xl); }
.parcours-start-title { font-family: var(--font-display); font-size: 2rem; font-weight: 600; line-height: 1.05; }
.parcours-start-summary { font-family: var(--font-display); font-size: 1.05rem; opacity: 0.85; }
.parcours-start:disabled { opacity: 0.6; cursor: progress; }
.parcours-start:disabled:hover { transform: none; box-shadow: none; }
/* Titre de page de catégorie (au-dessus du lanceur). */
.cat-page-title {
  font-family: var(--font-display);
  font-size: 2rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  color: var(--color-text);
  margin: 0 0 var(--space-lg);
}

/* ============================================================
   ANALYTIQUES / RÉVISIONS — composants partagés dans TOEFL
   Utilisés par la home (onglet Personnalisé) et la page Révisions.
   ============================================================ */
/* ---- styles portés de revisions.html (onglet Personnalisé) ---- */
  /* ========================================================
     STYLES SPÉCIFIQUES À LA PAGE RÉVISIONS
     (les variables, layout général, .page, .header etc. viennent de toefl.css)
     ======================================================== */

  /* Bandeau d'avertissement quand des catégories ne sont pas visitées */
  .revisions-warning {
    margin: 24px 0 32px;
    padding: 16px 20px;
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.5;
  }
  .revisions-warning strong { color: var(--ink); }
  .revisions-warning a {
    color: var(--accent);
    text-decoration: underline;
  }

  /* Bloc analytic : un titre + chiffre principal + bouton + détail */
  .analytic-block {
    padding: 24px 0;
    border-top: 1px solid var(--rule);
  }
  /* Plus d'exception « premier bloc » : la rangée de cartes KPI ouvre
     désormais l'onglet, donc chaque bloc analytic garde son filet de
     séparation (y compris « Sujets à améliorer », juste sous les cartes). */

  .analytic-header {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 12px;
    flex-wrap: wrap;
  }

  .analytic-title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 500;
    color: var(--ink);
    letter-spacing: -0.01em;
  }

  .analytic-action {
    /* Bouton "Retravailler" — variation du .btn standard */
    font-family: var(--font-mono);
    font-size: 11px;
    font-weight: var(--mono-weight);
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    padding: 8px 14px;
    background: transparent;
    color: var(--ink);
    border: 1px solid var(--ink);
    cursor: pointer;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .analytic-action:hover {
    background: var(--ink);
    color: var(--bg);
  }
  .analytic-action:disabled {
    opacity: 0.35;
    cursor: not-allowed;
  }
  .analytic-action:disabled:hover {
    background: transparent;
    color: var(--ink);
  }

  .analytic-summary {
    font-family: var(--font-display);
    font-size: 16px;
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 16px;
  }
  .analytic-summary .big {
    font-size: 28px;
    font-style: italic;
    color: var(--ink);
    font-weight: 500;
    letter-spacing: -0.02em;
    margin-right: 8px;
  }

  /* Liste des items (top N) sous certains analytics */
  .analytic-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
  }
  .analytic-list li {
    display: flex;
    align-items: baseline;
    gap: 12px;
    padding: 8px 12px;
    background: var(--bg-elev);
    border: 1px solid var(--rule);
    font-size: 14px;
    color: var(--ink-soft);
  }
  .analytic-list .item-id {
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 11px;
    color: var(--ink-mute);
    letter-spacing: var(--mono-tracking);
    flex-shrink: 0;
    min-width: 90px;
  }
  .analytic-list .item-cat {
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 10px;
    color: var(--ink-mute);
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    flex-shrink: 0;
  }
  .analytic-list .item-detail {
    flex: 1;
    color: var(--ink);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .analytic-list .item-stat {
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 10px;
    color: var(--ink-mute);
    flex-shrink: 0;
  }
  .analytic-list .item-stat.warn { color: var(--accent); }
  .analytic-list .item-stat.good { color: var(--good); }

  .analytic-list-more {
    margin-top: 8px;
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 11px;
    color: var(--ink-mute);
    text-align: right;
  }

  /* Empilement des bannières « Sujets à améliorer » (composant comp-banner). */
  .improve-banners {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
  .improve-banners .comp-banner { font-size: 14px; }
  .improve-banners .item-id {
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 11px;
    letter-spacing: var(--mono-tracking);
  }
  .improve-banners .item-cat {
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
  }

  /* Tableau de stats par axe (catégorie / format) */
  .analytic-table {
    width: 100%;
    border-collapse: collapse;
    margin-top: 8px;
    font-size: 14px;
  }
  .analytic-table th,
  .analytic-table td {
    padding: 10px 12px;
    text-align: left;
    border-bottom: 1px solid var(--rule);
  }
  .analytic-table th {
    font-family: var(--font-mono);
    font-size: 10px;
    font-weight: var(--mono-weight);
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    color: var(--ink-mute);
    border-bottom: 1px solid var(--ink-soft);
  }
  .analytic-table td.num,
  .analytic-table th.num {
    text-align: right;
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 12px;
  }
  .analytic-table td.label {
    color: var(--ink);
    font-weight: 500;
  }
  .analytic-table td.muted { color: var(--ink-mute); }
  .analytic-table td.warn { color: var(--accent); }
  .analytic-table td.good { color: var(--good); }
  .analytic-table .row-action {
    text-align: right;
    width: 1px;
    white-space: nowrap;
  }
  .analytic-table .row-action button {
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    padding: 4px 10px;
    background: transparent;
    color: var(--ink-soft);
    border: 1px solid var(--rule);
    cursor: pointer;
    transition: color 0.15s, border-color 0.15s;
  }
  .analytic-table .row-action button:hover {
    color: var(--accent);
    border-color: var(--accent);
  }

  /* Empty state */
  .analytic-empty {
    font-family: var(--font-display);
    font-style: italic;
    color: var(--ink-mute);
    font-size: 15px;
  }

  /* Lien retour vers index */
  .back-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-family: var(--font-mono); font-weight: var(--mono-weight);
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: var(--mono-tracking);
    color: var(--ink-mute);
    text-decoration: none;
    margin-bottom: 32px;
    transition: color 0.15s ease;
  }
  .back-link:hover { color: var(--accent); }

  @media (max-width: 640px) {
    .analytic-title { font-size: 19px; }
    .analytic-summary .big { font-size: 24px; }
    .analytic-table th,
    .analytic-table td { padding: 8px; font-size: 13px; }
    .analytic-list li { flex-wrap: wrap; }
    .analytic-list .item-id { min-width: 70px; }
  }

/* ============================================================
   ERREUR DE SESSION — composant partagé par les pages review-session
   ============================================================ */
/* ========================================================
     Page review-session : sobre, ne contient que la vue session.
     Tout le rendu est délégué à engine.js via startReviewSession.
     ======================================================== */

  /* Bandeau d'erreur si la session ne peut pas être lancée */
  .session-error {
    margin: 64px auto;
    max-width: 560px;
    padding: 32px;
    background: var(--bg-elev);
    border-left: 3px solid var(--accent);
    text-align: center;
  }
  .session-error h2 {
    font-family: 'Spectral', serif;
    font-size: 24px;
    font-weight: 500;
    color: var(--ink);
    margin: 0 0 12px;
  }
  .session-error p {
    color: var(--ink-soft);
    line-height: 1.5;
    margin-bottom: 20px;
  }
  .session-error .btn-secondary {
    display: inline-block;
    text-decoration: none;
  }