/* ════════════════════════════════════════════════════════════════════
   Éditeur enrichi : habillage sombre
   ════════════════════════════════════════════════════════════════════

   Ces règles vivaient dans ev-app.css, que seul l'espace connecté
   charge. La page publique d'un sujet ouvre elle aussi un éditeur, pour
   le champ de motivation : elle aurait hérité d'une barre d'outils
   claire sur fond sombre. Plutôt que de recopier les règles, ou de
   servir toute la feuille de l'espace connecté à la vitrine, on les
   sort ici. Les deux endroits chargent ce fichier.

   ATTENTION AUX SÉLECTEURS : la bibliothèque compose son interface avec
   des ÉLÉMENTS PERSONNALISÉS (<rte-content>, <rte-bottom>,
   <rte-subtoolbar>, <rte-line-spliter>), pas avec des classes.
   ════════════════════════════════════════════════════════════════════ */

/* ── Éditeur enrichi ───────────────────────────────────────────────
   Sa barre d'outils et sa zone de saisie sont rendues par sa propre
   feuille, qui ne connaît pas nos tokens. */
/* L'enveloppe de l'éditeur, sa barre d'outils et ses menus. La zone de
   saisie, elle, est une <iframe> : son style est injecté depuis
   ev-rich-editor.js, aucune feuille de la page ne l'atteignant. */
:root[data-ev-theme="dark"] .richtexteditor,
:root[data-ev-theme="dark"] rte-toolbar,
:root[data-ev-theme="dark"] .rte-toolbar-desktop,
:root[data-ev-theme="dark"] rte-editor,
:root[data-ev-theme="dark"] rte-dropdown-panel,
:root[data-ev-theme="dark"] rte-dropdown-box,
:root[data-ev-theme="dark"] rte-panel,
:root[data-ev-theme="dark"] .rte-dropdown-panel,
:root[data-ev-theme="dark"] .rte-dropdown-box,
:root[data-ev-theme="dark"] .rte-panel {
  background-color: var(--ev-surface) !important;
  border-color: var(--ev-divider) !important;
  color: var(--ev-text) !important;
}
:root[data-ev-theme="dark"] rte-toolbar button,
:root[data-ev-theme="dark"] rte-toolbar-button { color: var(--ev-text-muted) !important; }
:root[data-ev-theme="dark"] .rte-toolbar button:hover { background: var(--ev-surface-offset) !important; }

/* Le pied de l'éditeur porte la mention de la bibliothèque sur une bande
   claire.

   ATTENTION AUX SÉLECTEURS : la bibliothèque compose son interface avec
   des ÉLÉMENTS PERSONNALISÉS (`<rte-content>`, `<rte-bottom>`,
   `<rte-subtoolbar>`, `<rte-line-spliter>`), pas avec des classes. Les
   règles écrites `.rte-content` ne visaient donc rien du tout, et la
   zone de saisie comme le pied restaient blancs sur fond sombre. On
   cible ici le nom de balise. */
:root[data-ev-theme="dark"] rte-bottom,
:root[data-ev-theme="dark"] rte-bottom *,
:root[data-ev-theme="dark"] rte-subtoolbar,
:root[data-ev-theme="dark"] rte-subtoolbar *,
:root[data-ev-theme="dark"] .rte-statusbar,
:root[data-ev-theme="dark"] .rte-poweredby {
  background: var(--ev-surface) !important;
  color: var(--ev-text-faint) !important;
  border-color: var(--ev-divider) !important;
}

/* La zone de saisie : l'enveloppe et l'<iframe> elle-même. Le corps du
   document embarqué est habillé séparément, depuis ev-rich-editor.js. */
:root[data-ev-theme="dark"] rte-content,
:root[data-ev-theme="dark"] rte-editarea,
:root[data-ev-theme="dark"] iframe.rte-editable {
  background: var(--ev-surface) !important;
  border-color: var(--ev-divider) !important;
}

/* Séparateurs de la barre d'outils : un gris clair posé en fond. */
:root[data-ev-theme="dark"] rte-line-spliter,
:root[data-ev-theme="dark"] rte-toolbar-spliter {
  background: var(--ev-divider) !important;
}
:root[data-ev-theme="dark"] .rte-dropdown-panel li:hover,
:root[data-ev-theme="dark"] .rte-dropdown-box li:hover {
  background: var(--ev-surface-offset) !important;
}
