/* ============================================================
   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 {
  --bg: #F4F1EA;
  --bg-elev: #FAF8F2;
  --bg-deep: #E8E2D5;
  --ink: #2C4A6B;
  --ink-soft: #4A6385;
  --ink-mute: #8295AC;
  --rule: #C8D4E5;
  --accent: #A8412A;
  --good: #4A6B3A;
  --armed: #4A3AA8;
  --dot-color: rgba(44,74,107,0.05);
}
[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;
  --dot-color: rgba(237,242,251,0.05);
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html, body {
  background: var(--bg);
  color: var(--ink);
  font-family: 'Newsreader', Georgia, serif;
  font-size: 17px;
  line-height: 1.55;
  min-height: 100vh;
}
body {
  background-image: radial-gradient(circle at 1px 1px, var(--dot-color) 1px, transparent 0);
  background-size: 24px 24px;
}

.page {
  max-width: 880px;
  margin: 0 auto;
  padding: 64px 32px 96px;
}
@media (max-width: 640px) {
  .page { padding: 40px 20px 64px; }
}

/* ============= HEADER COMMUN ============= */
.breadcrumb {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  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; }

.header {
  margin-bottom: 56px;
  border-bottom: 1px solid var(--rule);
  padding-bottom: 32px;
}
.eyebrow {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.15em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'Newsreader', serif;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.1em;
  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: 500;
}
.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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  margin-bottom: 12px;
}
.pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.pill {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 500;
  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 {
  opacity: 0.6;
  font-weight: 400;
  margin-left: 2px;
}
.pill.selected .pill-num {
  opacity: 0.8;
}

.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; }

.btn {
  font-family: 'JetBrains Mono', monospace;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  padding: 14px 28px;
  border: 1px solid var(--ink);
  background: var(--ink);
  color: var(--bg);
  cursor: pointer;
  transition: all 0.15s;
  white-space: nowrap;
  font-family: 'JetBrains Mono', monospace;
}
.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: 'JetBrains Mono', monospace;
  font-size: 9px;
  opacity: 0.7;
  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: 880px;
  margin: 0 auto;
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 24px;
  align-items: center;
}
.topbar-back {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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 {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  text-align: right;
}
.topbar-score strong {
  color: var(--ink-soft);
  font-weight: 600;
}

/* ============= SESSION : ZONE PRINCIPALE ============= */
.session-page {
  max-width: 760px;
  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 auto; }
  .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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
}
.question-format {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  padding: 3px 8px;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
}
.instruction {
  font-family: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-bottom: 16px;
}
.instruction em {
  font-family: 'Newsreader', serif;
  font-size: 14px;
  text-transform: none;
  letter-spacing: 0;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'Newsreader', serif;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  color: var(--ink-mute);
  display: flex;
  align-items: center;
  gap: 12px;
}
.complete-hint kbd {
  font-family: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 600;
  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: 'JetBrains Mono', monospace;
  font-size: 10px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  color: var(--ink-mute);
  margin-bottom: 8px;
}
.feedback-text {
  font-size: 17px;
  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: 17px;
  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: 'Newsreader', serif;
  font-size: 36px;
  font-weight: 500;
  font-style: italic;
  color: var(--ink);
  letter-spacing: -0.02em;
  line-height: 1;
}
.recap-stat-label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.1em;
  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: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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%; }
}

/* ============= TOGGLE THÈME ============= */
.theme-toggle {
  position: fixed;
  bottom: 24px;
  right: 24px;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: 1px solid var(--rule);
  background: var(--bg-elev);
  color: var(--ink-soft);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
  z-index: 100;
  padding: 0;
  opacity: 0.7;
}
.theme-toggle:hover {
  border-color: var(--ink);
  color: var(--ink);
  opacity: 1;
}
.theme-toggle svg { width: 18px; height: 18px; }
[data-theme="dark"] .theme-toggle .icon-sun { display: block; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }

/* ============= 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: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-mute);
  text-align: center;
  text-transform: uppercase;
  letter-spacing: 0.15em;
}


/* ============= 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: 'JetBrains Mono', monospace;
  font-size: 10px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'Newsreader', serif;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  color: var(--ink-mute);
  width: 18px;
  flex-shrink: 0;
  text-align: right;
}

.m-row-right {
  font-family: 'Newsreader', serif;
  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: 'Newsreader', serif;
  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: 'Newsreader', serif;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: 13px;
  color: var(--ink-soft);
  font-weight: 500;
  padding-top: 2px;
}

.d-row-text {
  flex: 1;
  font-size: 17px;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  font-size: 10px;
  color: var(--ink-mute);
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'Newsreader', serif;
  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: 'Newsreader', serif;
  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: 'JetBrains Mono', monospace;
  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: 'JetBrains Mono', monospace;
  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: 600;
  font-size: 14px;
  width: 16px;
  text-align: center;
  font-family: 'JetBrains Mono', monospace;
}

.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: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.12em;
  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: 'Newsreader', serif;
  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: 17px;
  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: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-mute);
  margin-bottom: 10px;
}

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

.info-example {
  font-family: 'Newsreader', serif;
  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: 'JetBrains Mono', monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 17px;
  line-height: 1.7;
  color: var(--ink);
  margin-bottom: 20px;
  position: relative;
  padding-left: 36px;
  max-width: 68ch;
}
.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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.15em;
  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: 'JetBrains Mono', monospace;
  font-size: 11px;
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.12em;
  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);
}