/* ═══════════════════════════════════════════════════════════════════
   CHAPTER CONTENT — GABARIT UNIFIÉ DU CONTENU DES CHAPITRES
   ═══════════════════════════════════════════════════════════════════

   POURQUOI CE FICHIER
   Le contenu de chapters.content_html a été rédigé au fil des unités avec
   des familles de classes ad hoc (ul-*, fr-*, ek-*, sci-*, phon-*…).
   Un audit a relevé 91 classes utilisées 3 326 fois SANS AUCUNE définition
   CSS : elles s'affichaient donc en texte brut, d'où des rendus incohérents
   d'une unité à l'autre (ex. .callout__label, 161 occurrences, invisible).
   .callout lui-même n'avait ni bordure ni marge ni padding : seulement une
   border-color, répartie sur trois fichiers avec des !important concurrents.

   PRINCIPE
   Au lieu de styler 91 classes séparément, tout est ramené à un petit jeu
   de PRIMITIVES paramétrées par variables :
     · BOÎTE     (--box-bg / --box-line / --box-accent / --box-ink)
     · CARTE     (panneau bordé, avec libellé optionnel)
     · LISTE     (variantes décorées)
     · GRILLE    (auto-fit, s'empile sur mobile)
     · TYPO      (kicker, lead, mono, tag, muted…)
   Ajouter une unité ne demande donc plus de nouveau CSS : on réutilise le
   vocabulaire existant, et toute classe d'une même famille hérite du même
   rendu, en clair comme en sombre, en LTR comme en RTL.

   CHARGEMENT
   Ce fichier se charge APRÈS dark-system.css : ce dernier applique des
   règles sombres très génériques en !important (dont
   `.chapter__body div { color: var(--dark-muted) !important }`) qui
   écraseraient sinon la couleur de toutes les boîtes. Les surcharges
   sombres ci-dessous portent donc elles aussi !important, à dessein.

   Propriétés logiques (inline-start/end) partout : le RTL arabe et le LTR
   français sortent corrects sans règle miroir dédiée.
   ═══════════════════════════════════════════════════════════════════ */


/* ═══════════════════════════════════════════
   1. PRIMITIVE « BOÎTE »
   ═══════════════════════════════════════════ */

.chapter__body .callout,
.chapter__body .ul-callout,
.chapter__body .fr-callout,
.chapter__body .bl-note,
.chapter__body .prose-note,
.chapter__body .note-inline,
.chapter__body .cr-box,
.chapter__body .ek-note,
.chapter__body .ul-trap,
.chapter__body .fr-trap,
.chapter__body .ek-warning,
.chapter__body .ek-bad,
.chapter__body .ex-wrong,
.chapter__body .ek-good,
.chapter__body .ex-ok,
.chapter__body .ek-check,
.chapter__body .ul-exam,
.chapter__body .ek-exam,
.chapter__body .ek-weight,
.chapter__body .ul-quote,
.chapter__body .ek-quote,
.chapter__body .ek-objectives,
.chapter__body .fr-obj,
.chapter__body .ul-refs,
.chapter__body .fr-refs,
.chapter__body .ek-refs,
.chapter__body .ul-review,
.chapter__body .fr-review,
.chapter__body .fr-plan,
.chapter__body .ek-pattern,
.chapter__body .ek-mini,
.chapter__body .ek-example,
.chapter__body .fr-compare,
.chapter__body .fr-xref {
  display: block;
  background: var(--box-bg, #f5f9ff);
  border: 1px solid var(--box-line, #dbeafe);
  border-inline-start: 4px solid var(--box-accent, var(--clr-primary));
  border-radius: .75rem;
  padding: .875rem 1.25rem;
  margin-block: 1.125rem;
  font-size: .875rem;
  line-height: 1.75;
  color: var(--box-ink, #1e3a8a);
}

/* Le contenu interne ne doit pas rajouter de marge parasite en tête/pied */
.chapter__body .callout > :first-child,
.chapter__body .ul-callout > :first-child,
.chapter__body .fr-callout > :first-child,
.chapter__body .bl-note > :first-child,
.chapter__body .ul-trap > :first-child,
.chapter__body .fr-trap > :first-child,
.chapter__body .ek-warning > :first-child,
.chapter__body .ek-good > :first-child,
.chapter__body .ek-bad > :first-child,
.chapter__body .ul-exam > :first-child,
.chapter__body .ul-quote > :first-child,
.chapter__body .ek-objectives > :first-child,
.chapter__body .fr-obj > :first-child,
.chapter__body .ul-refs > :first-child,
.chapter__body .fr-refs > :first-child,
.chapter__body .ul-review > :first-child,
.chapter__body .fr-review > :first-child,
.chapter__body .fr-plan > :first-child { margin-block-start: 0; }

.chapter__body .callout > :last-child,
.chapter__body .ul-callout > :last-child,
.chapter__body .fr-callout > :last-child,
.chapter__body .bl-note > :last-child,
.chapter__body .ul-trap > :last-child,
.chapter__body .fr-trap > :last-child,
.chapter__body .ek-warning > :last-child,
.chapter__body .ek-good > :last-child,
.chapter__body .ek-bad > :last-child,
.chapter__body .ul-exam > :last-child,
.chapter__body .ul-quote > :last-child,
.chapter__body .ek-objectives > :last-child,
.chapter__body .fr-obj > :last-child,
.chapter__body .ul-refs > :last-child,
.chapter__body .fr-refs > :last-child,
.chapter__body .ul-review > :last-child,
.chapter__body .fr-review > :last-child,
.chapter__body .fr-plan > :last-child { margin-block-end: 0; }

/* ── Tonalités ─────────────────────────────── */

/* Info / neutre (défaut, bleu) */
.chapter__body .callout,
.chapter__body .ul-callout,
.chapter__body .fr-callout,
.chapter__body .bl-note,
.chapter__body .prose-note,
.chapter__body .note-inline,
.chapter__body .cr-box,
.chapter__body .ek-note,
.chapter__body .fr-xref {
  --box-bg: #f5f9ff;
  --box-line: #dbeafe;
  --box-accent: var(--clr-primary);
  --box-ink: #1e3a8a;
}

/* Avertissement / piège (ambre) */
.chapter__body .callout--warn,
.chapter__body .ul-trap,
.chapter__body .fr-trap,
.chapter__body .ek-warning {
  --box-bg: #fffbeb;
  --box-line: #fde68a;
  --box-accent: #d97706;
  --box-ink: #78350f;
}

/* Erreur / à éviter (rouge) */
.chapter__body .ek-bad,
.chapter__body .ex-wrong {
  --box-bg: #fef2f2;
  --box-line: #fecaca;
  --box-accent: #dc2626;
  --box-ink: #7f1d1d;
}

/* Correct / validé (vert) */
.chapter__body .callout--tip,
.chapter__body .ek-good,
.chapter__body .ex-ok,
.chapter__body .ek-check {
  --box-bg: #f0fdf4;
  --box-line: #bbf7d0;
  --box-accent: #16a34a;
  --box-ink: #14532d;
}

/* Concours / pondération (violet) */
.chapter__body .ul-exam,
.chapter__body .ek-exam,
.chapter__body .ek-weight {
  --box-bg: #faf5ff;
  --box-line: #e9d5ff;
  --box-accent: #7e22ce;
  --box-ink: #581c87;
}

/* Citation (ardoise, italique) */
.chapter__body .ul-quote,
.chapter__body .ek-quote {
  --box-bg: #f8fafc;
  --box-line: #e2e8f0;
  --box-accent: #64748b;
  --box-ink: #334155;
  font-style: italic;
}
.chapter__body .ul-quote__src {
  display: block;
  margin-block-start: .5rem;
  font-style: normal;
  font-size: .8125rem;
  font-weight: 600;
  color: var(--clr-muted);
  text-align: end;
}
.chapter__body .ul-quote__src::before { content: "— "; }

/* Objectifs (sarcelle) */
.chapter__body .ek-objectives,
.chapter__body .fr-obj {
  --box-bg: #f0fdfa;
  --box-line: #99f6e4;
  --box-accent: #0d9488;
  --box-ink: #134e4a;
}

/* Références / sources (gris discret) */
.chapter__body .ul-refs,
.chapter__body .fr-refs,
.chapter__body .ek-refs {
  --box-bg: var(--clr-bg-alt, #f8fafc);
  --box-line: var(--clr-border);
  --box-accent: #94a3b8;
  --box-ink: var(--clr-muted);
  font-size: .8125rem;
}

/* Révision / plan / motif (indigo doux) */
.chapter__body .ul-review,
.chapter__body .fr-review,
.chapter__body .fr-plan,
.chapter__body .ek-pattern,
.chapter__body .ek-mini,
.chapter__body .ek-example,
.chapter__body .fr-compare {
  --box-bg: #eef2ff;
  --box-line: #c7d2fe;
  --box-accent: #4f46e5;
  --box-ink: #312e81;
}


/* ═══════════════════════════════════════════
   2. LIBELLÉS DE BOÎTE
   .callout__label : 161 occurrences, aucune définition avant ce fichier.
   ═══════════════════════════════════════════ */

.chapter__body .callout__label,
.chapter__body .ul-exam__label,
.chapter__body .fr-card__label,
.chapter__body .ek-label,
.chapter__body .fr-kicker {
  display: block;
  margin-block-end: .375rem;
  font-size: .75rem;
  font-weight: 800;
  letter-spacing: .02em;
  line-height: 1.5;
  color: var(--box-accent, var(--clr-primary));
  text-transform: none;
}

/* Le libellé prend la teinte de sa boîte parente */
.chapter__body .callout--warn .callout__label { color: #b45309; }
.chapter__body .callout--tip .callout__label { color: #15803d; }
.chapter__body .ul-exam .ul-exam__label { color: #7e22ce; }


/* ═══════════════════════════════════════════
   3. PRIMITIVE « CARTE »
   ═══════════════════════════════════════════ */

.chapter__body .fr-card,
.chapter__body .sci-card,
.chapter__body .card-sm,
.chapter__body .phon-card,
.chapter__body .step-card,
.chapter__body .vocab-item,
.chapter__body .trait-pair {
  background: var(--clr-bg, #fff);
  border: 1px solid var(--clr-border);
  border-top: 3px solid var(--card-accent, var(--clr-primary));
  border-radius: .75rem;
  padding: 1rem 1.125rem;
  margin-block: 1rem;
  box-shadow: var(--shadow-sm);
  font-size: .9375rem;
  line-height: 1.7;
}
.chapter__body .fr-card > :first-child,
.chapter__body .sci-card > :first-child,
.chapter__body .card-sm > :first-child,
.chapter__body .phon-card > :first-child,
.chapter__body .step-card > :first-child,
.chapter__body .vocab-item > :first-child,
.chapter__body .trait-pair > :first-child { margin-block-start: 0; }
.chapter__body .fr-card > :last-child,
.chapter__body .sci-card > :last-child,
.chapter__body .card-sm > :last-child,
.chapter__body .phon-card > :last-child,
.chapter__body .step-card > :last-child,
.chapter__body .vocab-item > :last-child,
.chapter__body .trait-pair > :last-child { margin-block-end: 0; }

/* Dans une grille, les cartes ne cumulent pas les marges verticales */
.chapter__body .fr-grid > *,
.chapter__body .ul-grid > *,
.chapter__body .phon-grid > *,
.chapter__body .ek-grid2 > *,
.chapter__body .ek-grid3 > * { margin-block: 0; }

.chapter__body .card-sm {
  padding: .75rem .875rem;
  font-size: .875rem;
}
.chapter__body .sci-card { --card-accent: #0891b2; }
.chapter__body .step-card { --card-accent: #7e22ce; }
.chapter__body .step-card--accent { --card-accent: #d97706; }
.chapter__body .phon-card { --card-accent: #0d9488; text-align: center; }

.chapter__body .phon-card__title {
  display: block;
  font-weight: 800;
  font-size: 1rem;
  color: var(--clr-primary-dk);
}
.chapter__body .phon-card__sub {
  display: block;
  font-size: .8125rem;
  color: var(--clr-muted);
}
.chapter__body .phon-card__letters {
  display: block;
  margin-block-start: .375rem;
  font-size: 1.25rem;
  font-weight: 700;
  letter-spacing: .08em;
  color: var(--clr-text);
}

.chapter__body .step-card__num {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  inline-size: 1.75rem;
  block-size: 1.75rem;
  margin-inline-end: .5rem;
  border-radius: 50%;
  background: var(--card-accent, var(--clr-primary));
  color: #fff;
  font-size: .8125rem;
  font-weight: 700;
  flex-shrink: 0;
}

/* Paires de traits (phonétique) */
.chapter__body .trait-pair { --card-accent: #64748b; }
.chapter__body .trait-pair__label {
  display: block;
  font-size: .75rem;
  font-weight: 800;
  color: var(--clr-muted);
}
.chapter__body .trait-pair__letters {
  display: block;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--clr-text);
}
.chapter__body .trait-pair__mnemonic {
  display: block;
  font-size: .8125rem;
  font-style: italic;
  color: var(--clr-muted);
}
.chapter__body .trait-pair__box--voiced,
.chapter__body .trait-pair__box--voiceless {
  display: block;
  border-radius: .5rem;
  padding: .625rem .75rem;
  margin-block: .375rem;
}
.chapter__body .trait-pair__box--voiced { background: #ecfdf5; border: 1px solid #a7f3d0; }
.chapter__body .trait-pair__box--voiceless { background: #fef2f2; border: 1px solid #fecaca; }

/* Conteneur de termes-clés */
.chapter__body .key-terms {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: .875rem;
  margin-block: 1.125rem;
}


/* ═══════════════════════════════════════════
   4. PRIMITIVE « GRILLE »  (s'empile sous 620px)
   ═══════════════════════════════════════════ */

.chapter__body .fr-grid,
.chapter__body .ul-grid,
.chapter__body .phon-grid,
.chapter__body .ek-grid2,
.chapter__body .ek-grid3 {
  display: grid;
  gap: .875rem;
  margin-block: 1.125rem;
}
.chapter__body .fr-grid,
.chapter__body .ul-grid,
.chapter__body .ek-grid2 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.chapter__body .phon-grid { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.chapter__body .ek-grid3 { grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }

@media (max-width: 620px) {
  .chapter__body .fr-grid,
  .chapter__body .ul-grid,
  .chapter__body .ek-grid2,
  .chapter__body .ek-grid3 { grid-template-columns: 1fr; }
  .chapter__body .phon-grid { grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); }
}


/* ═══════════════════════════════════════════
   5. PRIMITIVE « LISTE »
   ═══════════════════════════════════════════ */

.chapter__body .ul-mini,
.chapter__body .ul-example,
.chapter__body .ul-term,
.chapter__body .ul-mono,
.chapter__body .ul-steps,
.chapter__body .ul-event,
.chapter__body .ul-drill,
.chapter__body .ul-formula,
.chapter__body .ul-timeline,
.chapter__body .ul-muted,
.chapter__body .ul-flow,
.chapter__body .bl-list,
.chapter__body .ek-checklist,
.chapter__body .fr-check {
  margin-block: .75rem;
  padding-inline-start: 1.25rem;
  font-size: .9375rem;
  line-height: 1.8;
}
.chapter__body .ul-mini > li,
.chapter__body .ul-example > li,
.chapter__body .ul-term > li,
.chapter__body .ul-mono > li,
.chapter__body .ul-steps > li,
.chapter__body .ul-event > li,
.chapter__body .ul-drill > li,
.chapter__body .ul-formula > li,
.chapter__body .ul-timeline > li,
.chapter__body .ul-muted > li,
.chapter__body .ul-flow > li,
.chapter__body .bl-list > li,
.chapter__body .ek-checklist > li,
.chapter__body .fr-check > li { margin-block: .3125rem; }

.chapter__body .ul-mini { font-size: .875rem; }
.chapter__body .ul-muted { color: var(--clr-muted); font-size: .875rem; }
.chapter__body .ul-mono { font-family: 'Courier New', Consolas, monospace; font-size: .875rem; }
.chapter__body .ul-term > li > strong:first-child,
.chapter__body .ul-example > li > strong:first-child { color: var(--clr-primary-dk); }

/* Listes à puce personnalisée */
.chapter__body .ek-checklist,
.chapter__body .fr-check { list-style: none; padding-inline-start: 0; }
.chapter__body .ek-checklist > li,
.chapter__body .fr-check > li {
  position: relative;
  padding-inline-start: 1.6rem;
}
.chapter__body .ek-checklist > li::before,
.chapter__body .fr-check > li::before {
  content: "✓";
  position: absolute;
  inset-inline-start: 0;
  color: #16a34a;
  font-weight: 800;
}

.chapter__body .ul-flow,
.chapter__body .ul-timeline { list-style: none; padding-inline-start: 0; }
.chapter__body .ul-flow > li,
.chapter__body .ul-timeline > li {
  position: relative;
  padding-inline-start: 1.5rem;
}
.chapter__body .ul-flow > li::before {
  content: "→";
  position: absolute;
  inset-inline-start: 0;
  color: var(--clr-primary);
  font-weight: 700;
}
[dir="rtl"] .chapter__body .ul-flow > li::before { content: "←"; }
.chapter__body .ul-timeline > li::before {
  content: "";
  position: absolute;
  inset-inline-start: .3rem;
  inset-block-start: .65em;
  inline-size: .5rem;
  block-size: .5rem;
  border-radius: 50%;
  background: var(--clr-primary);
}

/* Réponse d'exercice : masquée visuellement jusqu'au survol/focus */
.chapter__body .ul-drill__a {
  display: inline-block;
  border-radius: .3rem;
  padding-inline: .35rem;
  background: var(--clr-surface, #f1f5f9);
  color: transparent;
  cursor: help;
  transition: color var(--transition, .25s);
}
.chapter__body .ul-drill__a:hover,
.chapter__body .ul-drill__a:focus-visible { color: var(--clr-primary-dk); }


/* ═══════════════════════════════════════════
   6. TYPOGRAPHIE & ÉLÉMENTS EN LIGNE
   ═══════════════════════════════════════════ */

.chapter__body .fr-lead,
.chapter__body .ek-lead,
.chapter__body .ul-lead {
  font-size: 1.0625rem;
  line-height: 1.85;
  color: var(--clr-text);
  font-weight: 500;
  margin-block: .875rem;
}

.chapter__body .small,
.chapter__body .ek-small {
  display: block;
  font-size: .8125rem;
  color: var(--clr-muted);
  line-height: 1.7;
}

/* Notation phonétique / translittération : toujours LTR */
.chapter__body .ipa {
  direction: ltr;
  unicode-bidi: isolate;
  font-family: 'Courier New', Consolas, monospace;
  font-size: .9375em;
  color: var(--clr-primary-dk);
  background: var(--clr-primary-lt, #eff6ff);
  border-radius: .3rem;
  padding-inline: .3rem;
}

/* Texte arabe inséré dans un contexte LTR */
.chapter__body .ar {
  direction: rtl;
  unicode-bidi: isolate;
  font-size: 1.0625em;
}

.chapter__body .tname {
  font-weight: 700;
  color: var(--clr-primary-dk);
}

.chapter__body .tag-b {
  display: inline-block;
  border-radius: 999px;
  padding: .15rem .55rem;
  font-size: .75rem;
  font-weight: 700;
  background: var(--clr-primary-lt, #eff6ff);
  color: var(--clr-primary-dk);
  border: 1px solid #dbeafe;
}

.chapter__body .ek-mark {
  background: #fef9c3;
  border-radius: .25rem;
  padding-inline: .25rem;
  color: #713f12;
  font-weight: 600;
}

/* Exemple : bloc discret en retrait */
.chapter__body .ex,
.chapter__body .ex-row {
  display: block;
  border-inline-start: 3px solid var(--clr-border);
  padding-inline-start: .875rem;
  margin-block: .625rem;
  font-size: .9375rem;
  color: var(--clr-text);
}
.chapter__body .ex-row { border-inline-start-color: var(--clr-primary); }


/* ═══════════════════════════════════════════
   7. TABLEAUX ALIAS  (même rendu que .bl-table)
   ═══════════════════════════════════════════ */

.chapter__body table.fr-table,
.chapter__body table.gram-table {
  display: block;
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  border-collapse: collapse;
  inline-size: 100%;
  margin-block: 1.125rem;
  font-size: .875rem;
  border: 1px solid var(--clr-border);
  border-radius: .625rem;
}
.chapter__body table.fr-table th,
.chapter__body table.gram-table th {
  background: var(--clr-primary);
  color: #fff;
  padding: .7rem 1rem;
  text-align: start;
  font-weight: 600;
}
.chapter__body table.fr-table td,
.chapter__body table.gram-table td {
  padding: .7rem 1rem;
  border-block-start: 1px solid var(--clr-border);
  vertical-align: top;
}
.chapter__body table.fr-table tbody tr:nth-child(even),
.chapter__body table.gram-table tbody tr:nth-child(even) { background: #f8fafc; }


/* ═══════════════════════════════════════════
   8. GARDE-FOU MOBILE
   Aucun composant de contenu ne doit déborder horizontalement.
   ═══════════════════════════════════════════ */

@media (max-width: 600px) {
  .chapter__body .callout,
  .chapter__body .ul-callout,
  .chapter__body .fr-callout,
  .chapter__body .bl-note,
  .chapter__body .ul-trap,
  .chapter__body .fr-trap,
  .chapter__body .ek-warning,
  .chapter__body .ek-good,
  .chapter__body .ek-bad,
  .chapter__body .ul-exam,
  .chapter__body .ul-quote,
  .chapter__body .ek-objectives,
  .chapter__body .fr-obj,
  .chapter__body .ul-refs,
  .chapter__body .fr-refs,
  .chapter__body .ul-review,
  .chapter__body .fr-review,
  .chapter__body .fr-plan { padding: .75rem .875rem; }

  .chapter__body .fr-card,
  .chapter__body .sci-card,
  .chapter__body .phon-card,
  .chapter__body .step-card,
  .chapter__body .vocab-item,
  .chapter__body .trait-pair { padding: .875rem; }
}

/* Les mots très longs (URL, identifiants) ne poussent jamais la boîte */
.chapter__body .callout,
.chapter__body .ul-callout,
.chapter__body .fr-callout,
.chapter__body .fr-card,
.chapter__body .sci-card,
.chapter__body .card-sm,
.chapter__body .ul-refs,
.chapter__body .fr-refs { overflow-wrap: anywhere; }


/* ═══════════════════════════════════════════
   9. THÈME SOMBRE
   !important requis : dark-system.css se charge avant ce fichier et pose
   des règles génériques en !important (notamment sur .chapter__body div)
   qui écraseraient sinon les couleurs de chaque composant.
   ═══════════════════════════════════════════ */

html[data-theme="dark"] .chapter__body .callout,
html[data-theme="dark"] .chapter__body .ul-callout,
html[data-theme="dark"] .chapter__body .fr-callout,
html[data-theme="dark"] .chapter__body .bl-note,
html[data-theme="dark"] .chapter__body .prose-note,
html[data-theme="dark"] .chapter__body .note-inline,
html[data-theme="dark"] .chapter__body .cr-box,
html[data-theme="dark"] .chapter__body .ek-note,
html[data-theme="dark"] .chapter__body .ul-trap,
html[data-theme="dark"] .chapter__body .fr-trap,
html[data-theme="dark"] .chapter__body .ek-warning,
html[data-theme="dark"] .chapter__body .ek-bad,
html[data-theme="dark"] .chapter__body .ex-wrong,
html[data-theme="dark"] .chapter__body .ek-good,
html[data-theme="dark"] .chapter__body .ex-ok,
html[data-theme="dark"] .chapter__body .ek-check,
html[data-theme="dark"] .chapter__body .ul-exam,
html[data-theme="dark"] .chapter__body .ek-exam,
html[data-theme="dark"] .chapter__body .ek-weight,
html[data-theme="dark"] .chapter__body .ul-quote,
html[data-theme="dark"] .chapter__body .ek-quote,
html[data-theme="dark"] .chapter__body .ek-objectives,
html[data-theme="dark"] .chapter__body .fr-obj,
html[data-theme="dark"] .chapter__body .ul-refs,
html[data-theme="dark"] .chapter__body .fr-refs,
html[data-theme="dark"] .chapter__body .ek-refs,
html[data-theme="dark"] .chapter__body .ul-review,
html[data-theme="dark"] .chapter__body .fr-review,
html[data-theme="dark"] .chapter__body .fr-plan,
html[data-theme="dark"] .chapter__body .ek-pattern,
html[data-theme="dark"] .chapter__body .ek-mini,
html[data-theme="dark"] .chapter__body .ek-example,
html[data-theme="dark"] .chapter__body .fr-compare,
html[data-theme="dark"] .chapter__body .fr-xref {
  background: var(--dark-surface-2) !important;
  border-color: var(--dark-line) !important;
  border-inline-start-color: var(--box-accent-dk, #7db7f0) !important;
  color: var(--dark-text) !important;
}

/* Accent conservé (teinte claire lisible sur fond sombre) */
html[data-theme="dark"] .chapter__body .callout--warn,
html[data-theme="dark"] .chapter__body .ul-trap,
html[data-theme="dark"] .chapter__body .fr-trap,
html[data-theme="dark"] .chapter__body .ek-warning { --box-accent-dk: #fbbf24; }
html[data-theme="dark"] .chapter__body .ek-bad,
html[data-theme="dark"] .chapter__body .ex-wrong { --box-accent-dk: #f87171; }
html[data-theme="dark"] .chapter__body .callout--tip,
html[data-theme="dark"] .chapter__body .ek-good,
html[data-theme="dark"] .chapter__body .ex-ok,
html[data-theme="dark"] .chapter__body .ek-check { --box-accent-dk: #4ade80; }
html[data-theme="dark"] .chapter__body .ul-exam,
html[data-theme="dark"] .chapter__body .ek-exam,
html[data-theme="dark"] .chapter__body .ek-weight { --box-accent-dk: #c084fc; }
html[data-theme="dark"] .chapter__body .ek-objectives,
html[data-theme="dark"] .chapter__body .fr-obj { --box-accent-dk: #2dd4bf; }
html[data-theme="dark"] .chapter__body .ul-quote,
html[data-theme="dark"] .chapter__body .ek-quote,
html[data-theme="dark"] .chapter__body .ul-refs,
html[data-theme="dark"] .chapter__body .fr-refs,
html[data-theme="dark"] .chapter__body .ek-refs { --box-accent-dk: #94a3b8; }
html[data-theme="dark"] .chapter__body .ul-review,
html[data-theme="dark"] .chapter__body .fr-review,
html[data-theme="dark"] .chapter__body .fr-plan,
html[data-theme="dark"] .chapter__body .ek-pattern,
html[data-theme="dark"] .chapter__body .ek-mini,
html[data-theme="dark"] .chapter__body .ek-example,
html[data-theme="dark"] .chapter__body .fr-compare { --box-accent-dk: #a5b4fc; }

/* Libellés */
html[data-theme="dark"] .chapter__body .callout__label,
html[data-theme="dark"] .chapter__body .ul-exam__label,
html[data-theme="dark"] .chapter__body .fr-card__label,
html[data-theme="dark"] .chapter__body .ek-label,
html[data-theme="dark"] .chapter__body .fr-kicker {
  color: var(--box-accent-dk, #9cc9f5) !important;
}

/* Cartes */
html[data-theme="dark"] .chapter__body .fr-card,
html[data-theme="dark"] .chapter__body .sci-card,
html[data-theme="dark"] .chapter__body .card-sm,
html[data-theme="dark"] .chapter__body .phon-card,
html[data-theme="dark"] .chapter__body .step-card,
html[data-theme="dark"] .chapter__body .vocab-item,
html[data-theme="dark"] .chapter__body .trait-pair {
  background: var(--dark-surface) !important;
  border-color: var(--dark-line) !important;
  border-top-color: var(--card-accent-dk, #7db7f0) !important;
  color: var(--dark-text) !important;
}
html[data-theme="dark"] .chapter__body .sci-card { --card-accent-dk: #22d3ee; }
html[data-theme="dark"] .chapter__body .step-card { --card-accent-dk: #c084fc; }
html[data-theme="dark"] .chapter__body .step-card--accent { --card-accent-dk: #fbbf24; }
html[data-theme="dark"] .chapter__body .phon-card { --card-accent-dk: #2dd4bf; }

html[data-theme="dark"] .chapter__body .phon-card__title,
html[data-theme="dark"] .chapter__body .tname,
html[data-theme="dark"] .chapter__body .ul-term > li > strong:first-child,
html[data-theme="dark"] .chapter__body .ul-example > li > strong:first-child {
  color: var(--dark-heading) !important;
}
html[data-theme="dark"] .chapter__body .phon-card__sub,
html[data-theme="dark"] .chapter__body .ul-quote__src,
html[data-theme="dark"] .chapter__body .small,
html[data-theme="dark"] .chapter__body .ek-small,
html[data-theme="dark"] .chapter__body .ul-muted,
html[data-theme="dark"] .chapter__body .trait-pair__label,
html[data-theme="dark"] .chapter__body .trait-pair__mnemonic { color: var(--dark-muted) !important; }
html[data-theme="dark"] .chapter__body .phon-card__letters,
html[data-theme="dark"] .chapter__body .trait-pair__letters,
html[data-theme="dark"] .chapter__body .fr-lead,
html[data-theme="dark"] .chapter__body .ek-lead,
html[data-theme="dark"] .chapter__body .ul-lead { color: var(--dark-text) !important; }

html[data-theme="dark"] .chapter__body .trait-pair__box--voiced {
  background: rgba(34, 197, 94, .14) !important;
  border-color: rgba(74, 222, 128, .34) !important;
}
html[data-theme="dark"] .chapter__body .trait-pair__box--voiceless {
  background: rgba(239, 68, 68, .14) !important;
  border-color: rgba(248, 113, 113, .34) !important;
}

html[data-theme="dark"] .chapter__body .ipa {
  background: rgba(125, 183, 240, .16) !important;
  color: #bfdbfe !important;
}
html[data-theme="dark"] .chapter__body .tag-b {
  background: rgba(125, 183, 240, .16) !important;
  border-color: var(--dark-line) !important;
  color: #bfdbfe !important;
}
html[data-theme="dark"] .chapter__body .ek-mark {
  background: rgba(250, 204, 21, .2) !important;
  color: #fde68a !important;
}
html[data-theme="dark"] .chapter__body .ul-drill__a { background: var(--dark-surface-2) !important; }
html[data-theme="dark"] .chapter__body .ul-drill__a:hover,
html[data-theme="dark"] .chapter__body .ul-drill__a:focus-visible { color: #bfdbfe !important; }

html[data-theme="dark"] .chapter__body .ex,
html[data-theme="dark"] .chapter__body .ex-row { border-inline-start-color: var(--dark-line-strong) !important; }

html[data-theme="dark"] .chapter__body table.fr-table,
html[data-theme="dark"] .chapter__body table.gram-table { border-color: var(--dark-line) !important; }
html[data-theme="dark"] .chapter__body table.fr-table th,
html[data-theme="dark"] .chapter__body table.gram-table th {
  background: var(--dark-surface-2) !important;
  color: var(--dark-heading) !important;
}
html[data-theme="dark"] .chapter__body table.fr-table td,
html[data-theme="dark"] .chapter__body table.gram-table td {
  color: var(--dark-text) !important;
  border-color: var(--dark-line) !important;
}
html[data-theme="dark"] .chapter__body table.fr-table tbody tr:nth-child(even),
html[data-theme="dark"] .chapter__body table.gram-table tbody tr:nth-child(even) {
  background: rgba(255, 255, 255, .05) !important;
}