/* ═══════════════════════════════════════════════════════════
   Dark Mode — myboussole.fr v1.0
   Injecté sur TOUT le site via inject_header.py (style id="dark-mode-css").
   Déclenché par html.dark-mode (JS anti-FOUC dans dark-mode.js).
   Le JS respecte l'OS (prefers-color-scheme) par défaut,
   avec override manuel via toggle lune/soleil dans le header.
   ═══════════════════════════════════════════════════════════ */

/* ── 1. color-scheme ── */
html.dark-mode { color-scheme: dark; }

/* ── 2. Variables CSS (override :root articles) ── */
html.dark-mode {
  --navy: #e8e4dc;
  --ink: #d4cfc6;
  --forest: #6aaf94;
  --forest-dark: #4d9478;
  --muted: rgba(232,228,220,0.55);
  --paper: #1a1e24;
  --paper2: #252a32;
  --border: rgba(255,255,255,0.08);
  --bg-card: #21262e;
  /* Variables articles non surchargées précédemment */
  --color-text: #e8e4dc;
  --color-surface: #21262e;
  --color-text-muted: rgba(232,228,220,0.60);
  --color-accent-light: rgba(106,175,148,0.30);
  --color-border: rgba(255,255,255,0.08);
  --sage: #286a4d;
}

/* ── 3. Body ── */
html.dark-mode body {
  background: #1a1e24;
  color: #e8e4dc;
}

/* ── 3b. Corps d'article — filet sitewide.
   Certains articles fixent .article-body p/li/ul/ol/strong en couleur littérale
   (rgba(6,23,45,.8x) / #06172D) au lieu de var(--navy), sans jamais passer par
   ce partial → texte quasi invisible en dark mode (bug trouvé sur 2 fichiers
   le 04/07/2026, cf. lessons.md). Les fichiers qui utilisent déjà var(--navy)/
   var(--text) ne sont pas affectés par ce filet (même teinte, écart d'opacité
   imperceptible). ── */
html.dark-mode .article-body p,
html.dark-mode .article-body li,
html.dark-mode .article-body ul,
html.dark-mode .article-body ol {
  color: rgba(232,228,220,.85) !important;
}
html.dark-mode .article-body strong {
  color: #e8e4dc !important;
}

/* ── 4. Header ── */
html.dark-mode .site-header {
  background: rgba(26,30,36,0.93) !important;
  border-top-color: #286a4d !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}
html.dark-mode .topbar-logo .logo-my { color: #b0c4b8 !important; }
html.dark-mode .topbar-nav a { color: #d4cfc6 !important; }
html.dark-mode .nav-dropdown {
  background: rgba(26,30,36,0.97) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.45) !important;
}
html.dark-mode .nav-dropdown a { color: #d4cfc6 !important; }
html.dark-mode .nav-dropdown a:hover { background: rgba(106,175,148,0.12) !important; }
html.dark-mode .btn-link {
  color: #6aaf94 !important;
  text-decoration-color: rgba(106,175,148,.55) !important;
}
html.dark-mode .btn-link:hover {
  text-decoration-color: #6aaf94 !important;
}
html.dark-mode .mobile-menu-btn span { background: #d4cfc6 !important; }
html.dark-mode .topbar-nav { background: #1e2328 !important; }
html.dark-mode .topbar-nav a { border-bottom-color: rgba(255,255,255,0.04) !important; }
html.dark-mode .btn-primary { background: #286a4d !important; }
html.dark-mode .btn-primary:hover { background: #1e4d38 !important; }
html.dark-mode .nav-mobile-cta { background: #286a4d !important; }

/* ── 5. Article card ── */
html.dark-mode .article-card {
  background: #21262e !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35) !important;
}

/* ── 6. Footer ── */
html.dark-mode .site-footer {
  color: rgba(232,228,220,0.55) !important;
  border-top-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .site-footer a:hover { color: #6aaf94 !important; }

/* ── 7. Composants articles communs ── */
html.dark-mode .callout,
html.dark-mode .callout-info { background: #252a32 !important; }
html.dark-mode .box-warning {
  background: rgba(220,38,38,0.08) !important;
  color: #fca5a5 !important;
}
html.dark-mode .box-doctor,
html.dark-mode .pharmd-box { background: rgba(77,148,120,0.12) !important; }
html.dark-mode .epistemic-box { background: #252a32 !important; }
html.dark-mode .conclusion-box-c {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.25) !important;
}
html.dark-mode .conclusion-box-c h2,
html.dark-mode .conclusion-box-c > strong:first-child { color: #e8e4dc !important; }
html.dark-mode .conclusion-box-c p { color: #d4cfc6 !important; }
html.dark-mode .conclusion-box-c > em { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .mechanism-summary { background: #252a32 !important; }
html.dark-mode .action-block,
html.dark-mode .app-bridge { background: rgba(77,148,120,0.14) !important; }
/* Lecteur audio (audio-player-card) — promu depuis dark-mode-autogen.css (seuil 4 pages
   atteint : chikungunya, 1889, sommeil-covid-long-en-clair, vegf-a-covid-long-en-clair) */
html.dark-mode .audio-player-card { background: rgba(255,255,255,0.04) !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .audio-voice-btn { background: rgba(255,255,255,0.04) !important; border-color: rgba(232,228,220,0.12) !important; color: #e8e4dc !important; }
html.dark-mode .audio-voice-btn.is-active { background: rgba(45,106,79,0.16) !important; border-color: rgba(106,175,148,0.28) !important; color: #8fd0b5 !important; }
/* Promu en même temps (vit-S625) : emplacement audio réservé désormais dans le template
   canonique (templates/article-canonique.html) — toute nouvelle publication en portera un. */
html.dark-mode .audio-pending-badge { background: rgba(255,255,255,0.04) !important; color: #e8e4dc !important; }
/* Accordéon étude-détail (.etude-detail) — promu depuis dark-mode-autogen.css (seuil 4 pages
   atteint dès l'introduction, série "Le corps sous contrainte" : c03, c04, c06, c08, c09, c10,
   c11, vit-S827) */
html.dark-mode .etude-detail { background: rgba(255,255,255,0.04) !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .proof-badge {
  background: rgba(106,175,148,0.12) !important;
  color: #6aaf94 !important;
}
html.dark-mode .article-level-badge { filter: brightness(0.8); }
html.dark-mode .sources-section { border-top-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .sources-list { color: rgba(232,228,220,0.6) !important; }
html.dark-mode .sources-list a { color: #6aaf94 !important; }
html.dark-mode .cta-main {
  background: linear-gradient(135deg, #1e4d38, #2d5a48) !important;
}
html.dark-mode .article-listing-card,
html.dark-mode .article-item {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .breadcrumb a { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .breadcrumb { color: rgba(232,228,220,0.55) !important; }
/* Atténuation légère des images en dark */
html.dark-mode picture img,
html.dark-mode .hero-img { filter: brightness(0.87); }

/* ── 8. NutriFact / Fiches ── */
html.dark-mode .nf-card,
html.dark-mode .fiche-card { background: #21262e !important; }
html.dark-mode .nf-section { background: #252a32 !important; }
html.dark-mode .nf-badge { background: rgba(106,175,148,0.12) !important; }

/* ── 9. Scrollbar ── */
html.dark-mode {
  scrollbar-color: rgba(255,255,255,0.14) transparent;
}

/* ── 10. Bouton dark-mode toggle (topbar) ── */
.dark-mode-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 36px; height: 36px; flex-shrink: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(6,23,45,0.10);
  background: transparent;
  cursor: pointer; padding: 0;
  transition: background 0.15s, border-color 0.15s;
  color: inherit;
}
.dark-mode-toggle:hover {
  background: rgba(6,23,45,0.07);
  border-color: rgba(6,23,45,0.18);
}
html.dark-mode .dark-mode-toggle {
  border-color: rgba(255,255,255,0.12);
}
html.dark-mode .dark-mode-toggle:hover {
  background: rgba(255,255,255,0.09);
  border-color: rgba(255,255,255,0.22);
}
/* Alignement toggle dans .topbar-cta (desktop) */
.topbar-cta {
  align-items: center;
  gap: 12px;
}

/* Toggle visible sur mobile : on ré-affiche .topbar-cta mais sans le btn-primary */
@media (max-width: 768px) {
  .topbar { grid-template-columns: 1fr auto auto !important; }
  .topbar-cta {
    display: flex !important;
    align-items: center;
    gap: 0;
    padding: 0;
    grid-column: 2;
  }
  .topbar-cta .btn-primary { display: none !important; }
  .mobile-menu-btn { grid-column: 3 !important; }
}

/* ══════════════════════════════════════════════════
   PHASE 3 — Résidus hardcodés (audit Playwright S473)
   ══════════════════════════════════════════════════ */

/* ── 11. Variables manquantes (--text, --color-border, --accent-light) ── */
html.dark-mode {
  --text: #e8e4dc;
  --color-border: rgba(255,255,255,0.08);
  --accent-light: rgba(106,175,148,0.15);
}

/* ── 12. P0 — Résidus blancs bloquants ── */

/* NutriFact header card (background:#fff hardcodé) */
html.dark-mode .nf-header {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .nf-header h1,
html.dark-mode .nf-header-name { color: #e8e4dc !important; }
html.dark-mode .nf-header-sub,
html.dark-mode .nf-header-desc { color: rgba(232,228,220,0.55) !important; }

/* Paragraphe chapeau article */
html.dark-mode .article-lead { background: transparent !important; }

/* Article listing — apt-card newsletter (background:#fff hardcodé) */
html.dark-mode #apt-card,
html.dark-mode .apt-card {
  background: #252a32 !important;
  box-shadow: 0 24px 80px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.06) !important;
  color: #e8e4dc !important;
}
html.dark-mode .apt-card h2,
html.dark-mode .apt-card h3,
html.dark-mode .apt-card p { color: #e8e4dc !important; }
html.dark-mode .apt-card input[type="email"],
html.dark-mode .apt-card input[type="text"] {
  background: #1a1e24 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.12) !important;
}

/* NutriFact section sources */
html.dark-mode section#sources,
html.dark-mode .nf-sources-section { background: transparent !important; }

/* ── 13. P1 — Structures avec fond blanc hardcodé ── */

/* synthesis-card (double définition, la 2e a background:#fff) */
html.dark-mode .synthesis-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
}
html.dark-mode .synthesis-card strong { color: #e8e4dc !important; }
html.dark-mode .synthesis-card p { color: rgba(232,228,220,0.65) !important; }

/* table-scroll (background:#fff hardcodé) */
html.dark-mode .table-scroll {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .table-scroll table { background: transparent !important; }
html.dark-mode .table-scroll th {
  background: #252a32 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.07) !important;
}
html.dark-mode .table-scroll td {
  color: #d4cfc6 !important;
  border-color: rgba(255,255,255,0.06) !important;
}

/* NutriFact — synthesis cell et evidence panel */
html.dark-mode .nf-synthesis-cell,
html.dark-mode .ep-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.07) !important;
}

/* Articles listing — accordéon parcours */
html.dark-mode .parcours { border-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .parcours-header { background: #252a32 !important; }
html.dark-mode .parcours-header:hover { background: #2d333b !important; }
html.dark-mode .parcours-title { color: #e8e4dc !important; }
html.dark-mode .parcours--featured .parcours-header {
  background: rgba(232,164,10,0.10) !important;
  border-bottom-color: rgba(232,164,10,0.20) !important;
}
html.dark-mode .parcours--featured .parcours-body {
  background: #21262e !important;
  border-top-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode .path-item {
  border-color: rgba(255,255,255,0.07) !important;
  color: #d4cfc6 !important;
}
html.dark-mode .path-item:hover { background: rgba(106,175,148,0.07) !important; }

/* Articles listing — search input */
html.dark-mode #search-input {
  background: #21262e !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode #search-input::placeholder { color: rgba(232,228,220,0.38) !important; }
html.dark-mode #search-input:focus { border-color: #6aaf94 !important; }

/* ── 14. P1 — Contraste texte hardcodé ── */

/* Guides — marker blocks (couleur dark #2a1f1a hardcodée) */
html.dark-mode .marker { background: #252a32 !important; border-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .marker-body,
html.dark-mode .marker-body * { color: #e8e4dc !important; }

/* Guides — hero content (couleur forest #2f5c4f hardcodée) */
html.dark-mode .g-hero { background: #1a1e24 !important; }
html.dark-mode .g-hero-content,
html.dark-mode .g-hero-content h1,
html.dark-mode .g-hero-content h2,
html.dark-mode .g-hero-content p,
html.dark-mode .g-hero-content span { color: #e8e4dc !important; }

/* ── 15. P2 — Boutons UI ── */

/* Fiches — navigation prev/next */
html.dark-mode button#fw-prev,
html.dark-mode button#fw-next,
html.dark-mode .btn-fiche-nav {
  background: #252a32 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode button#fw-prev:hover,
html.dark-mode button#fw-next:hover { background: #2d333b !important; }

/* Scroll-to-top */
html.dark-mode #scroll-top,
html.dark-mode .btn-nav-scroll-top {
  background: #252a32 !important;
  color: #e8e4dc !important;
  box-shadow: 0 2px 10px rgba(0,0,0,0.5) !important;
}
html.dark-mode .btn-nav-scroll-top:hover { background: #2d333b !important; }

/* Guide — CTA button */
html.dark-mode .g-cta-btn {
  background: #4d9478 !important;
  color: #fff !important;
  border-color: transparent !important;
}
html.dark-mode .g-cta-btn:hover { background: #3d7a62 !important; }

/* Newsletter — email input standalone */
html.dark-mode #email-input {
  background: #21262e !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode #email-input::placeholder { color: rgba(232,228,220,0.38) !important; }

/* Share buttons */
html.dark-mode .share-btn-copy {
  background: #252a32 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .share-btn-print {
  background: #252a32 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .share-btn-print:hover { background: #2d333b !important; }

/* Reading-mode btn */
html.dark-mode #btn-dark {
  background: #252a32 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 4 — Homepage : hero-overlay + mbs-footer
   ══════════════════════════════════════════════════ */

/* ── 16. Hero overlay (gradient crème hardcodé → dark) ── */
html.dark-mode .hero-overlay {
  background: linear-gradient(
    90deg,
    rgba(26, 30, 36, 0.97) 0%,
    rgba(26, 30, 36, 0.90) 38%,
    rgba(26, 30, 36, 0.45) 62%,
    rgba(26, 30, 36, 0.15) 74%,
    rgba(26, 30, 36, 0.00) 86%
  ) !important;
}

/* ── 17. Footer homepage (.mbs-footer) ── */
html.dark-mode .mbs-footer {
  background: #1a1e24 !important;
  color: rgba(232, 228, 220, 0.68) !important;
  border-top: 1px solid rgba(255,255,255,0.06) !important;
}
html.dark-mode .mbs-footer a { color: rgba(232, 228, 220, 0.65) !important; }
html.dark-mode .mbs-footer a:hover { color: #6aaf94 !important; }
html.dark-mode .mbs-footer__col-title { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .mbs-footer__brand-name { color: #e8e4dc !important; }
html.dark-mode .mbs-footer__tagline { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .mbs-footer__bottom,
html.dark-mode .mbs-footer__copy {
  border-top-color: rgba(255,255,255,0.06) !important;
  color: rgba(232,228,220,0.55) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 5 — Pills hero + audience-tags (fond blanc 70%)
   ══════════════════════════════════════════════════ */

/* ── 18. .pill (hero features) ── */
html.dark-mode .pill {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(232, 228, 220, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}

/* ── 19. .audience-tag (Pour qui ?) ── */
html.dark-mode .audience-tag {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(232, 228, 220, 0.88) !important;
  border-color: rgba(255, 255, 255, 0.12) !important;
}
html.dark-mode .audience-tag.active,
html.dark-mode .audience-tag--active {
  background: rgba(106, 175, 148, 0.18) !important;
  color: #6aaf94 !important;
  border-color: rgba(106, 175, 148, 0.30) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 6 — Homepage : résidus inline + composants
   ══════════════════════════════════════════════════ */

/* ── 20. .logo-boussole (vert #286a4d trop sombre) ── */
html.dark-mode .logo-boussole { color: #286a4d !important; }

/* ── 21. .kicker / .hero .kicker (fond blanc hardcodé) ── */
html.dark-mode .kicker,
html.dark-mode .hero .kicker {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  box-shadow: none !important;
}

/* ── 22. --muted2 + .audience-label "Pour qui ?" ── */
html.dark-mode { --muted2: rgba(232, 228, 220, 0.42); }
html.dark-mode .audience-label { color: rgba(232,228,220,0.55) !important; }

/* ── 23. .cta-inner (card "Commence aujourd'hui") ── */
html.dark-mode .cta-inner {
  background: rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow: 0 8px 40px rgba(0,0,0,0.30) !important;
}
/* §23b. #essayer.cta-section (homepage) : transparent en clair → transparent en dark */
html.dark-mode #essayer.cta-section { background: transparent !important; border: none !important; }
html.dark-mode .cta-section--feature-final {
  background: transparent !important;
  border-color: transparent !important;
}
html.dark-mode .cta-inner h2 { color: #e8e4dc !important; }
html.dark-mode .cta-inner > p { color: rgba(232, 228, 220, 0.72) !important; }

/* ── 24. .cta-badge (badges caractéristiques CTA) ── */
html.dark-mode .cta-badge {
  background: rgba(255, 255, 255, 0.07) !important;
  color: rgba(232, 228, 220, 0.75) !important;
}

/* ── 25. "Mon Espace Santé stocke" — inline style color:#06172D hardcodé ── */
html.dark-mode p[style*="06172D"] { color: #e8e4dc !important; }
html.dark-mode p[style*="rgba(6,23,45,.55)"] { color: rgba(232, 228, 220, 0.55) !important; }

/* ══════════════════════════════════════════════════
   PHASE 7 — Cartes corpus + hero-note (greys résiduels)
   ══════════════════════════════════════════════════ */

/* ── 26. .hero-note (disclaimer hero, rgba(255,255,255,0.52)) ── */
html.dark-mode .hero-note {
  background: rgba(255, 255, 255, 0.06) !important;
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* ── 27. .card / .card-link (cartes corpus "Articles & Veille"…, rgba(255,255,255,0.64)) ── */
html.dark-mode .card,
html.dark-mode .card-link {
  background: #21262e !important;
  box-shadow: 0 1px 4px rgba(0,0,0,0.35), 0 0 0 1px rgba(255,255,255,0.06) !important;
  color: #e8e4dc !important;
}
html.dark-mode .card p,
html.dark-mode .card-link p { color: rgba(232, 228, 220, 0.62) !important; }

/* ══════════════════════════════════════════════════
   PHASE 8 — Articles + fonctionnalités + auteur
   ══════════════════════════════════════════════════ */

/* ── 28. .phrase-signature (articles — encadrés citatifs, #f8f8f8) ── */
html.dark-mode .phrase-signature {
  background: #21262e !important;
  color: #e8e4dc !important;
  border-top-color: rgba(61, 138, 107, 0.6) !important;
  border-bottom-color: rgba(61, 138, 107, 0.6) !important;
}

/* ── 29. .founder-tag (index.html — badges auteur, rgba(255,255,255,.60)) ── */
html.dark-mode .founder-tag {
  background: rgba(255, 255, 255, 0.08) !important;
  border-color: rgba(255, 255, 255, 0.10) !important;
  color: rgba(232, 228, 220, 0.75) !important;
}

/* ── 30. .anchor-nav a (fonctionnalites/ — nav ancres, rgba(255,255,255,.62)) ── */
html.dark-mode .anchor-nav a {
  background: rgba(255, 255, 255, 0.07) !important;
  border-color: rgba(255, 255, 255, 0.09) !important;
  color: rgba(232, 228, 220, 0.70) !important;
}
html.dark-mode .anchor-nav a:hover {
  background: rgba(255, 255, 255, 0.14) !important;
  color: #e8e4dc !important;
}

/* ══════════════════════════════════════════════════
   PHASE 9 — NutriFact listing + related-card + footer liens
   ══════════════════════════════════════════════════ */

/* ── 31. NutriFact listing — cards (background:#fff hardcodé) ── */
html.dark-mode .nutrifact-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
  color: #e8e4dc !important;
}
html.dark-mode .nutrifact-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
  border-color: #6aaf94 !important;
}
html.dark-mode .card-category { color: #6aaf94 !important; }
html.dark-mode .card-name { color: #e8e4dc !important; }
html.dark-mode .card-subtitle { color: rgba(232,228,220,0.60) !important; }
html.dark-mode .card-lien { color: rgba(106,175,148,0.85) !important; }

/* Filtres pills NutriFact (background:#fff + border:#d1d5db hardcodés) */
html.dark-mode .filter-btn {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.65) !important;
}
html.dark-mode .filter-btn.active,
html.dark-mode .filter-btn:hover {
  background: rgba(106,175,148,0.12) !important;
  border-color: rgba(106,175,148,0.30) !important;
  color: #6aaf94 !important;
}

/* Search NutriFact (background:#fff hardcodé) */
html.dark-mode .search-input {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #e8e4dc !important;
}
html.dark-mode .search-input::placeholder {
  color: rgba(232,228,220,0.38) !important;
}
html.dark-mode .search-input:focus {
  border-color: #6aaf94 !important;
  box-shadow: 0 0 0 3px rgba(106,175,148,0.12) !important;
}

/* ── 32. Cards "Sur le même sujet" (background:rgba(248,246,240,0.8) beige) ── */
html.dark-mode .related-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .related-card:hover {
  border-color: #6aaf94 !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.45) !important;
}
html.dark-mode .related-card-title { color: #e8e4dc !important; }
html.dark-mode .related-card-label { color: #6aaf94 !important; }
html.dark-mode .related-card-desc { color: rgba(232,228,220,0.60) !important; }
html.dark-mode .related-title { color: rgba(232,228,220,0.55) !important; }

/* ── 33. Footer articles (.site-footer) — liens (couleur absente) ── */
html.dark-mode .site-footer a {
  color: rgba(232,228,220,0.55) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 10 — site-footer logo + disclaimer illisibles
   ══════════════════════════════════════════════════ */

/* ── 34. Logo "my" (navy #06172D → invisible en dark, toutes surfaces) ── */
html.dark-mode .logo-my {
  color: rgba(232,228,220,0.65) !important;
}
/* Topbar conserve #b0c4b8 (spécificité supérieure — règle §2 ligne 37) */

/* ── 35. Logo "Boussole" (spécificité renforcée pour site-footer) ── */
html.dark-mode .site-footer .logo-boussole {
  color: #286a4d !important;
}

/* ── 36. Disclaimer "Information à visée éducative…" (rgba(6,23,45,0.45) → illisible) ── */
html.dark-mode .site-footer__disclaimer {
  color: rgba(232,228,220,0.55) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 11 — /guides/ : guide-card + pills + section-lede
   ══════════════════════════════════════════════════ */

/* ── 37. guide-card + guide-card-locked (background:#fff hardcodé) ── */
html.dark-mode .guide-card,
html.dark-mode .guide-card-locked {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .guide-card:hover,
html.dark-mode .guide-card-locked:hover {
  border-color: #6aaf94 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.45) !important;
}

/* ── 38. section-lede + guide-subtitle (navy rgba(6,23,45,0.6) → illisible) ── */
html.dark-mode .section-lede,
html.dark-mode .guide-subtitle {
  color: rgba(232,228,220,0.65) !important;
}

/* ── 39. guide-pill (bg navy 5% + texte navy → invisible) ── */
html.dark-mode .guide-pill {
  background: rgba(255,255,255,0.06) !important;
  color: rgba(232,228,220,0.65) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── 40. guide-pill-free (dark forest green #1b4332 → illisible en dark) ── */
html.dark-mode .guide-pill-free {
  background: rgba(106,175,148,0.12) !important;
  color: #6aaf94 !important;
  border-color: rgba(106,175,148,0.25) !important;
}

/* ── 41. Verts trop sombres (#286a4d) sur /guides/ ── */
html.dark-mode .section-eyebrow,
html.dark-mode .guide-cta,
html.dark-mode .guide-price {
  color: #6aaf94 !important;
}

/* ══════════════════════════════════════════════════
   PHASE 11b — /guides/index.html : hero + collection
   h1 et p ont des styles inline color:#06172D → !important obligatoire
   ══════════════════════════════════════════════════ */

/* ── 42c. Hero h1 + p inline-style navy (#06172D / rgba(6,23,45)) ── */
html.dark-mode h1[style*="color:#06172D"] {
  color: #e8e4dc !important;
}
html.dark-mode p[style*="color:rgba(6,23,45"] {
  color: rgba(232,228,220,0.75) !important;
}

/* ── 42d. collection-note (p, stat-label, stat-num) ── */
html.dark-mode .collection-note p {
  color: rgba(232,228,220,0.72) !important;
}
html.dark-mode .collection-stat-label {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode .collection-stat-num {
  color: #6aaf94 !important;
}

/* ── 42e. notify-consent (rgba(6,23,45,0.4) → illisible) ── */
html.dark-mode .notify-consent {
  color: rgba(232,228,220,0.55) !important;
}

/* ── 42b. locked-badge (rgba(255,255,255,0.95) → badge blanc sur dark) ── */
html.dark-mode .locked-badge {
  background: rgba(255,255,255,0.08) !important;
  color: rgba(232,228,220,0.70) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
}

/* ── 42. notify-input (background:#fff hardcodé) ── */
html.dark-mode .notify-input {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: #e8e4dc !important;
}
html.dark-mode .notify-input::placeholder {
  color: rgba(232,228,220,0.38) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 12 — /fonctionnalites/ : hs-badge + privacy-pills
   ══════════════════════════════════════════════════ */

/* ── 43. .hs-badge (kicker hero fonctionnalités, rgba(255,255,255,.68)) ── */
html.dark-mode .hs-badge {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  box-shadow: none !important;
  color: rgba(232,228,220,0.75) !important;
}

/* ── 44. .privacy-pill (badges privacy, rgba(255,255,255,.68)) ── */
html.dark-mode .privacy-pill {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.80) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 13 — /articles/ : listing + preview drawer
   ══════════════════════════════════════════════════ */

/* ── 45. .tab-btn (filtres Tous/Comprendre/Pratique/Niveau/Mots-clés) ── */
html.dark-mode .tab-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.70) !important;
}
html.dark-mode .tab-btn:hover {
  color: rgba(232,228,220,0.95) !important;
  border-color: rgba(232,228,220,0.30) !important;
}

/* ── 46. .tag-filter-btn (thèmes : Actu, Alimentation, Biologie…) ── */
html.dark-mode .tag-filter-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.70) !important;
}
html.dark-mode .tag-filter-btn:hover {
  border-color: rgba(106,175,148,0.5) !important;
  color: #6aaf94 !important;
}
html.dark-mode .tag-filter-btn.tag-filter-active {
  background: #286a4d !important;
  border-color: #286a4d !important;
  color: #fff !important;
}

/* ── 47. .pg-btn (pagination 1-18) ── */
html.dark-mode .pg-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.75) !important;
}
html.dark-mode .pg-btn:hover:not(:disabled) {
  border-color: rgba(232,228,220,0.30) !important;
  color: #e8e4dc !important;
}

/* ── 48. .email-card + .email-form (newsletter listing) ── */
html.dark-mode .email-card {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .email-card-text h3 { color: #e8e4dc !important; }
html.dark-mode .email-card-text p  { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .email-form input {
  background: rgba(255,255,255,0.08) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #e8e4dc !important;
}

/* ── 49. .article-tag (tags inline par article) ── */
html.dark-mode .article-tag {
  background: rgba(106,175,148,0.12) !important;
  color: #6aaf94 !important;
}

/* ── 50. Preview drawer — .apt-title / .apt-excerpt / tabs / meta ── */
html.dark-mode .apt-title {
  color: #e8e4dc !important;
}
html.dark-mode .apt-excerpt {
  color: rgba(232,228,220,0.70) !important;
}
html.dark-mode .apt-tab {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode .apt-tab.apt-tab-active {
  color: #6aaf94 !important;
  border-bottom-color: #6aaf94 !important;
}
html.dark-mode .apt-tabs {
  border-bottom-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .apt-meta {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode .apt-eyebrow {
  color: #6aaf94 !important;
}
html.dark-mode .apt-tag {
  background: rgba(106,175,148,0.12) !important;
  color: #6aaf94 !important;
}
html.dark-mode .apt-close {
  background: rgba(255,255,255,0.12) !important;
  color: rgba(232,228,220,0.85) !important;
}
html.dark-mode .apt-retenir-body strong {
  color: #e8e4dc !important;
}
html.dark-mode .apt-nav {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(232,228,220,0.85) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 14 — /articles/ : graph carte des thèmes + modale thème
   ══════════════════════════════════════════════════ */

/* ── 51. Bouton "Carte des thèmes" (inline styles) ── */
html.dark-mode #graph-toggle-btn {
  color: rgba(232,228,220,0.85) !important;
  border-color: rgba(255,255,255,0.15) !important;
}
html.dark-mode #graph-toggle-btn:hover {
  background: rgba(255,255,255,0.06) !important;
}

/* ── 52. Panneau graph (background inline rgba(255,255,255,0.92)) ── */
html.dark-mode #graph-panel {
  background: #1e2530 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 53. Tooltip D3 (graph-tip) ── */
html.dark-mode #graph-tip {
  background: #252a35 !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: #e8e4dc !important;
}

/* ── 54. Légende bas du graphe (spans inline color:#4a5568) ── */
html.dark-mode #graph-panel span[style*="color:#4a5568"],
html.dark-mode #graph-panel span[style*="color: #4a5568"] {
  color: rgba(232,228,220,0.60) !important;
}
html.dark-mode #graph-panel div[style*="border-top"] {
  border-top-color: rgba(255,255,255,0.06) !important;
}

/* ── 55. Modale thème D3 (#theme-modal) ── */
html.dark-mode #theme-modal > div {
  background: #1e2530 !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.55) !important;
}
html.dark-mode #theme-modal-title {
  color: #e8e4dc !important;
}
html.dark-mode #theme-modal-count {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode #theme-modal div[style*="border-bottom"] {
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
html.dark-mode #theme-modal-list li {
  color: rgba(232,228,220,0.80) !important;
  border-bottom-color: rgba(255,255,255,0.05) !important;
}
html.dark-mode #theme-modal-list a {
  color: #6aaf94 !important;
}

/* ══════════════════════════════════════════════════
   PHASE 15 — Articles individuels : FAQ + infographies SVG
   ══════════════════════════════════════════════════ */

/* ── 56. .faq-item (accordion FAQ articles, background:#fff) ── */
html.dark-mode .faq-item {
  background: #1e2530 !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .faq-item summary {
  color: #e8e4dc !important;
}
html.dark-mode .faq-answer {
  color: rgba(232,228,220,0.65) !important;
}

/* ── 57. .article-svg-figure (infographies SVG, background:#fff hardcodé)
   Stratégie : filter brightness() plutôt que fond sombre
   car le SVG contient du texte navy hardcodé qui deviendrait illisible ── */
html.dark-mode .article-svg-figure {
  filter: brightness(0.82) contrast(1.05) !important;
  border-color: rgba(255,255,255,0.07) !important;
  box-shadow: 0 12px 30px rgba(0,0,0,0.35) !important;
}
html.dark-mode .article-svg-figure figcaption {
  filter: brightness(1.3) !important;
  color: rgba(232,228,220,0.55) !important;
}

/* ── 57b. figcaption inline navy (hors .article-svg-figure) — audit S865
   32 occurrences dans les articles avec rgba(6,23,45,.42) hardcodé ── */
html.dark-mode figcaption[style*="rgba(6,23,45"] {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode figcaption[style*="06172D"] {
  color: rgba(232,228,220,0.55) !important;
}

/* ── 57c. strong inline navy — audit S865 (1 occurrence) ── */
html.dark-mode strong[style*="06172D"],
html.dark-mode strong[style*="#06172D"] {
  color: #e8e4dc !important;
}

/* ── 57d. Link cards inline background:#fff (articles liés) — audit S865 ── */
html.dark-mode a[href][style*="background:#fff"] {
  background: #252b35 !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 57e. SVG inline background:#ffffff (hors .article-svg-figure) — audit S865
   Même stratégie brightness() pour préserver la lisibilité du contenu SVG ── */
html.dark-mode svg[style*="background:#ffffff"],
html.dark-mode svg[style*="background: #ffffff"],
html.dark-mode svg[style*="background:#fff"] {
  filter: brightness(0.82) contrast(1.05) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 16 — Audit complet : Tarteaucitron + preview btns + divers
   ══════════════════════════════════════════════════ */

/* ── 58. Bannière Tarteaucitron (#tarteaucitronAlertBig) ──
   Spécificité renforcée (html.dark-mode body #id = 0,1,1,2)
   pour battre le :root body #id (0,1,1,1) de cmp-head.html ── */
html.dark-mode body #tarteaucitronAlertBig {
  background: #1e2530 !important;
  box-shadow:
    0 0 0 1px rgba(255,255,255,.06),
    0 4px 8px rgba(0,0,0,.2),
    0 20px 48px rgba(0,0,0,.45) !important;
}
html.dark-mode body #tarteaucitronAlertBig::before {
  color: #e8e4dc !important;
}
html.dark-mode body #tarteaucitronDisclaimerAlert,
html.dark-mode body #tarteaucitronDisclaimerAlert * {
  color: rgba(232,228,220,0.62) !important;
}
html.dark-mode body #tarteaucitronDisclaimerAlert a,
html.dark-mode body #tarteaucitronDisclaimerAlert a:visited {
  color: #6aaf94 !important;
}
html.dark-mode body #tarteaucitronAlertBig .tarteaucitronCTAButton,
html.dark-mode body #tarteaucitronAlertBig #tarteaucitronCloseAlert {
  border-color: rgba(255,255,255,0.15) !important;
  color: rgba(232,228,220,0.80) !important;
}
html.dark-mode body #tarteaucitronAlertBig .tarteaucitronCTAButton:hover,
html.dark-mode body #tarteaucitronAlertBig #tarteaucitronCloseAlert:hover {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.28) !important;
}

/* ── 59. Panel Tarteaucitron (#tarteaucitron) ── */
html.dark-mode body #tarteaucitron {
  background: #1e2530 !important;
  color: #e8e4dc !important;
}
html.dark-mode body #tarteaucitron .tarteaucitronLine:not(.tarteaucitronMainLine) {
  background: rgba(255,255,255,0.03) !important;
  border-color: rgba(255,255,255,0.06) !important;
}
html.dark-mode body #tarteaucitronMainLineOffset {
  background: #151a22 !important;
}

/* ── 60. .preview-btn hover states (articles listing) ── */
html.dark-mode .preview-btn-apercu:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: #6aaf94 !important;
  color: #6aaf94 !important;
}
html.dark-mode .preview-btn-retenir:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: rgba(232,228,220,0.50) !important;
  color: rgba(232,228,220,0.90) !important;
}

/* ── 61. .phone-real (frame téléphone /fonctionnalites/) ── */
html.dark-mode .phone-real {
  background: #0e1117 !important;
}

/* ── 62. .apt-loading (spinner preview drawer) ── */
html.dark-mode .apt-loading {
  color: rgba(232,228,220,0.55) !important;
}

/* ── 63. .apt-retenir-body em (italique signature, rgba(6,23,45,.45)) ── */
html.dark-mode .apt-retenir-body em {
  color: rgba(232,228,220,0.55) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 17 — /nutrifact/ pages individuelles : badges preuve, table, subgroup, callout
   ══════════════════════════════════════════════════ */

/* ── 64. Badges niveau de preuve (backgrounds hardcodés clairs) ── */
html.dark-mode .nf-badge-preuve-mod {
  color: #f59e0b !important;
  border-color: rgba(245,158,11,0.35) !important;
  background: rgba(245,158,11,0.10) !important;
}
html.dark-mode .nf-badge-preuve-fort {
  color: #6aaf94 !important;
  border-color: rgba(106,175,148,0.35) !important;
  background: rgba(106,175,148,0.10) !important;
}
html.dark-mode .nf-badge-preuve-faible,
html.dark-mode .nf-badge-tag {
  color: rgba(232,228,220,0.55) !important;
  border-color: rgba(255,255,255,0.12) !important;
  background: rgba(255,255,255,0.06) !important;
}

/* ── 65. .nf-subgroup (séparateur #dceaf7 + couleur #2d7dc4) ── */
html.dark-mode .nf-subgroup {
  color: #6ba8d8 !important;
  border-bottom-color: rgba(107,168,216,0.20) !important;
}
html.dark-mode .nf-subgroup::before {
  background: #6ba8d8 !important;
}

/* ── 66. .nf-svg-summary (background #f0f7ff hardcodé) ── */
html.dark-mode .nf-svg-summary {
  background: rgba(107,168,216,0.10) !important;
  border-color: rgba(107,168,216,0.25) !important;
  color: #6ba8d8 !important;
}

/* ── 67. .nf-table th (#f9fafb) + hover td (#fafafa) ── */
html.dark-mode .nf-table th {
  background: rgba(255,255,255,0.05) !important;
  color: rgba(232,228,220,0.75) !important;
  border-bottom-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode .nf-table td {
  border-bottom-color: rgba(255,255,255,0.05) !important;
}
html.dark-mode .nf-table tr:hover td {
  background: rgba(255,255,255,0.04) !important;
}

/* ── 68. .callout-note variantes inline (blue #f0f7ff, amber #fef9ec) ── */
html.dark-mode .callout-note[style*="background:#f0f7ff"],
html.dark-mode .callout-note[style*="background: #f0f7ff"] {
  background: rgba(107,168,216,0.08) !important;
  border-left-color: #6ba8d8 !important;
}
html.dark-mode .callout-note[style*="background:#fef9ec"],
html.dark-mode .callout-note[style*="background: #fef9ec"] {
  background: rgba(245,158,11,0.07) !important;
  border-left-color: #f59e0b !important;
}
html.dark-mode .callout-note strong,
html.dark-mode .callout-note p {
  color: rgba(232,228,220,0.85) !important;
}

/* ── 69. Badges pb-* (level-pills NutriFact) ── */
html.dark-mode .pb-green {
  background: rgba(106,175,148,0.12) !important;
  border-color: rgba(106,175,148,0.30) !important;
  color: #6aaf94 !important;
}
html.dark-mode .pb-yellow {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.30) !important;
  color: #f59e0b !important;
}
html.dark-mode .pb-red {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.30) !important;
  color: #f87171 !important;
}
html.dark-mode .pb-gray {
  background: rgba(255,255,255,0.06) !important;
  border-color: rgba(255,255,255,0.12) !important;
  color: rgba(232,228,220,0.55) !important;
}

/* ── 70. Blocs spéciaux NutriFact (backgrounds hardcodés) ── */
html.dark-mode .nf-pratique-box {
  background: rgba(106,175,148,0.07) !important;
  border-color: rgba(106,175,148,0.22) !important;
}
html.dark-mode .nf-pratique-title { color: #6aaf94 !important; }
html.dark-mode .nf-brief {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.30) !important;
  border-left-color: #6aaf94 !important;
}
html.dark-mode .nf-snippet {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .nf-not-box {
  background: rgba(220,38,38,0.07) !important;
  border-color: rgba(220,38,38,0.22) !important;
}
html.dark-mode .nf-not-title { color: #f87171 !important; }

/* ══════════════════════════════════════════════════
   PHASE 18 — /guides/ pages individuelles : G-U1, G-U2, G-MCL…
   ══════════════════════════════════════════════════ */

/* ── 71. .b-prob (background #fef3c7 hardcodé) ── */
html.dark-mode .b-prob {
  background: rgba(245,158,11,0.10) !important;
  color: #f59e0b !important;
}

/* ── 72. .info-box (rgba(6,23,45,0.04) → quasi invisible sur fond sombre) ── */
html.dark-mode .info-box {
  background: rgba(232,228,220,0.05) !important;
  border-left-color: rgba(232,228,220,0.40) !important;
}

/* ── 73. .crosssell-card ── */
html.dark-mode .crosssell-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .crosssell-card:hover {
  border-color: #6aaf94 !important;
  box-shadow: 0 4px 16px rgba(0,0,0,0.40) !important;
}
html.dark-mode .crosssell-card-footer {
  border-top-color: rgba(255,255,255,0.07) !important;
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode .crosssell-eyebrow { color: #6aaf94 !important; }

/* ── 74. Boxes thématiques guides ── */
html.dark-mode .g-toc-box,
html.dark-mode .g-objective-box,
html.dark-mode .g-redflags-box,
html.dark-mode .g-infoblock,
html.dark-mode .g-after-box,
html.dark-mode .g-final-cta-box {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .g-objective-label,
html.dark-mode .g-redflags-label,
html.dark-mode .g-infoblock-label,
html.dark-mode .g-after-label { color: #6aaf94 !important; }

/* ── 75. .g-nav-float (barre de navigation flottante guides) ── */
html.dark-mode .g-nav-float {
  background: #1e2530 !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,0.45) !important;
}
html.dark-mode .g-nav-float-btn { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .g-nav-float-btn.active-ctrl {
  color: #6aaf94 !important;
  border-bottom-color: #6aaf94 !important;
}

/* ── 76. .g-tier / .g-tiers (niveaux de recommandation) ── */
html.dark-mode .g-tier {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 19 — /articles/ Niveau pills + hub CTA
   ══════════════════════════════════════════════════════════════════ */

/* ── 77. .lvl-btn (filtres Niveau : Tous / Grand public / Public averti / Public expert) ── */
html.dark-mode .lvl-btn {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.70) !important;
}
html.dark-mode .lvl-btn:hover {
  border-color: rgba(232,228,220,0.28) !important;
  color: #e8e4dc !important;
}
/* Actif "Tous" (navy → remplacé par fond sombre contrasté) */
html.dark-mode .lvl-btn[data-level="tous"].lvl-active {
  background: rgba(232,228,220,0.12) !important;
  border-color: rgba(232,228,220,0.35) !important;
  color: #e8e4dc !important;
}
/* Actif "Grand public" (vert) */
html.dark-mode .lvl-btn[data-level="debutant"].lvl-active {
  background: rgba(106,175,148,0.20) !important;
  border-color: rgba(106,175,148,0.50) !important;
  color: #6aaf94 !important;
}
/* Actif "Public averti" (orange) */
html.dark-mode .lvl-btn[data-level="intermediaire"].lvl-active {
  background: rgba(224,123,42,0.18) !important;
  border-color: rgba(224,123,42,0.45) !important;
  color: #e07b2a !important;
}
/* Actif "Public expert" (rouge) */
html.dark-mode .lvl-btn[data-level="expert"].lvl-active {
  background: rgba(192,57,43,0.18) !important;
  border-color: rgba(192,57,43,0.45) !important;
  color: #e05c4a !important;
}

/* ── 78. .hub-app-cta-btn (CTA hub microbiote — var(--forest) trop pâle en dark) ── */
html.dark-mode .hub-app-cta-btn {
  background: #3d7a62 !important;
  color: #fff !important;
}
html.dark-mode .hub-app-cta-btn:hover {
  background: #4d9478 !important;
}

/* ══════════════════════════════════════════════════════════════════
   PHASE 20 — /fiches/ : widget fiche visuelle complet
   ══════════════════════════════════════════════════════════════════ */

/* ── 79. .fw-slide (container slide — fond crème → gris pâle en dark) ── */
html.dark-mode .fw-slide {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 80. .fw-title / .fw-badge / .fw-body / .fw-keyword-val ── */
html.dark-mode .fw-title { color: #e8e4dc !important; }
html.dark-mode .fw-badge { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .fw-badge em { color: #6aaf94 !important; }
html.dark-mode .fw-body { color: rgba(232,228,220,0.85) !important; }
html.dark-mode .fw-body strong { color: #e8e4dc !important; }
html.dark-mode .fw-keyword-val { color: #e8e4dc !important; }
html.dark-mode .fw-keyword-label { color: rgba(232,228,220,0.55) !important; }

/* ── 81. .fw-keyword (bloc mot-clé — fond #fff) ── */
html.dark-mode .fw-keyword {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── 82. .fw-analogy (bloc analogie bleu) ── */
html.dark-mode .fw-analogy {
  background: rgba(59,130,246,0.07) !important;
  border-left-color: rgba(59,130,246,0.30) !important;
}
html.dark-mode .fw-analogy-label { color: #6ba8d8 !important; }
html.dark-mode .fw-analogy-text { color: rgba(232,228,220,0.82) !important; }

/* ── 83. .fw-why (bloc "pourquoi" orange) ── */
html.dark-mode .fw-why {
  background: rgba(217,119,6,0.07) !important;
  border-left-color: rgba(217,119,6,0.30) !important;
}
html.dark-mode .fw-why-label { color: #d4915a !important; }
html.dark-mode .fw-why-text { color: rgba(232,228,220,0.82) !important; }

/* ── 84. .fw-chip-violet / .fw-chip-teal (chips navigation mécanismes) ── */
html.dark-mode .fw-chip-violet {
  background: rgba(83,74,183,0.15) !important;
  border-color: rgba(83,74,183,0.40) !important;
  color: #a89fe8 !important;
}
html.dark-mode .fw-chip-teal {
  background: rgba(15,110,86,0.15) !important;
  border-color: rgba(106,175,148,0.40) !important;
  color: #6aaf94 !important;
}

/* ── 84bis. Override dark-mode couleurs fill/stroke SVG mécanismes fiches visuelles (vit-S733, 21/08/2026)
   Centralisé ici (et non dans chaque fiche) car inject_header.py régénère le bloc
   <style id="dark-mode-css"> depuis ce partial à chaque commit HTML — toute règle
   ajoutée directement dans un fichier fiches/*/index.html est silencieusement
   écrasée au commit suivant. Couvre les couleurs de palette §9 boussole-fiche-visuelle
   utilisées en fill/stroke sur <text>/formes SVG dans .fw-slide svg. ── */
html.dark-mode .fw-slide svg [fill="#2d6a4f"] { fill: #6aaf94 !important; }
html.dark-mode .fw-slide svg [stroke="#2d6a4f"] { stroke: #6aaf94 !important; }
html.dark-mode .fw-slide svg [fill="#1e4d38"] { fill: #6aaf94 !important; }
html.dark-mode .fw-slide svg [stroke="#1e4d38"] { stroke: #6aaf94 !important; }
html.dark-mode .fw-slide svg [fill="#b45309"] { fill: #d4915a !important; }
html.dark-mode .fw-slide svg [stroke="#b45309"] { stroke: #d4915a !important; }
html.dark-mode .fw-slide svg [fill="#d97706"] { fill: #d4915a !important; }
html.dark-mode .fw-slide svg [stroke="#d97706"] { stroke: #d4915a !important; }
html.dark-mode .fw-slide svg [fill="#3730a3"] { fill: #a89fe8 !important; }
html.dark-mode .fw-slide svg [stroke="#3730a3"] { stroke: #a89fe8 !important; }
html.dark-mode .fw-slide svg [fill="#6d28d9"] { fill: #c4b5fd !important; }
html.dark-mode .fw-slide svg [stroke="#6d28d9"] { stroke: #c4b5fd !important; }
html.dark-mode .fw-slide svg [fill="#0f766e"] { fill: #5eead4 !important; }
html.dark-mode .fw-slide svg [stroke="#0f766e"] { stroke: #5eead4 !important; }
html.dark-mode .fw-slide svg [fill="#065f46"] { fill: #6ee7b7 !important; }
html.dark-mode .fw-slide svg [stroke="#065f46"] { stroke: #6ee7b7 !important; }
html.dark-mode .fw-slide svg [fill="#92400e"] { fill: #fdba74 !important; }
html.dark-mode .fw-slide svg [stroke="#92400e"] { stroke: #fdba74 !important; }
html.dark-mode .fw-slide svg [fill="#be185d"] { fill: #f9a8d4 !important; }
html.dark-mode .fw-slide svg [stroke="#be185d"] { stroke: #f9a8d4 !important; }
html.dark-mode .fw-slide svg [stroke="#06172D"] { stroke: #6b7a87 !important; }
/* #6b7a87 remplace #5a6a78 (décision Rémy, vit-S734, 21/08/2026) : #5a6a78 ne
   passait qu'~2,7-3,0:1 (calcul luminance relative WCAG, fond .fw-slide/body
   composité) — insuffisant même pour le seuil non-texte 1.4.11 (3:1, applicable
   ici : stroke de contour informatif, pas décoratif). #6b7a87 vise ~3,4:1,
   marge au-dessus du seuil, même famille de teinte (slate/steel muté). */

/* ── 85. .fw-btn (boutons Précédent/Suivant intra-slide) ── */
html.dark-mode .fw-btn {
  background: rgba(255,255,255,0.05) !important;
  border-color: rgba(106,175,148,0.25) !important;
  color: #6aaf94 !important;
}
html.dark-mode .fw-btn:hover { background: rgba(106,175,148,0.10) !important; }
html.dark-mode .fw-btn:disabled {
  color: rgba(232,228,220,0.20) !important;
  border-color: rgba(255,255,255,0.06) !important;
  background: transparent !important;
}

/* ── 86. .fw-nav (barre nav intra-slide) + .fw-dot ── */
html.dark-mode .fw-nav { border-top-color: rgba(255,255,255,0.08) !important; }
html.dark-mode .fw-dot { background: rgba(232,228,220,0.15) !important; }
html.dark-mode .fw-dot.on { background: #6aaf94 !important; }

/* ── 87. .fw-cover-chips (VUE D'ENSEMBLE — header slide 0) ── */
html.dark-mode .fiche-lead { color: rgba(232,228,220,0.80) !important; }
html.dark-mode .fiche-meta { color: rgba(232,228,220,0.55) !important; }

/* ── 88. Hub thématique banner — titre span inline color:#06172D ── */
html.dark-mode span[style*="06172D"] { color: #e8e4dc !important; }
html.dark-mode span[style*="rgba(6,23,45"] { color: rgba(232,228,220,0.70) !important; }

/* ── 89. .fiche-share-block — label + border top (dark mode) ── */
html.dark-mode .fiche-share-label { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .fiche-share-block { border-top-color: rgba(255,255,255,0.08) !important; }

/* ══════════════════════════════════════════════════════════════
   PHASE 21 — /nutrifact/ + /guides/ : éléments résiduels
   ══════════════════════════════════════════════════════════════ */

/* ── 90. .nf-badge-mod (amber — distinct de nf-badge-preuve-mod) ── */
html.dark-mode .nf-badge-mod {
  color: #f59e0b !important;
  border-color: rgba(245,158,11,0.32) !important;
  background: rgba(245,158,11,0.10) !important;
}

/* ── 91. .nf-badge-cat (vert clair, distinct de nf-badge-preuve-fort) ── */
html.dark-mode .nf-badge-cat {
  color: #6aaf94 !important;
  border-color: rgba(106,175,148,0.32) !important;
  background: rgba(106,175,148,0.10) !important;
}

/* ── 92. .nf-anchor (liens rapides §A header) ── */
html.dark-mode .nf-anchor {
  background: rgba(106,175,148,0.08) !important;
  border-color: rgba(106,175,148,0.22) !important;
  color: #6aaf94 !important;
}
html.dark-mode .nf-anchor:hover {
  background: rgba(106,175,148,0.16) !important;
}

/* ── 93. .box-warning variants (rouge, amber, navy) ── */
html.dark-mode .box-warning.amber {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.32) !important;
  color: #f59e0b !important;
}
html.dark-mode .box-warning.rouge {
  background: rgba(220,38,38,0.08) !important;
  border-color: rgba(220,38,38,0.32) !important;
  color: #fca5a5 !important;
}
html.dark-mode .box-warning.navy {
  background: rgba(59,130,246,0.08) !important;
  border-color: rgba(59,130,246,0.28) !important;
  color: #93c5fd !important;
}

/* ── 94. .nf-variability (encart variabilité amber) ── */
html.dark-mode .nf-variability {
  background: rgba(245,158,11,0.08) !important;
  border-color: rgba(245,158,11,0.28) !important;
  color: rgba(232,228,220,0.85) !important;
}

/* ── 95. .cta-boussole a (bouton blanc sur fond vert) ── */
html.dark-mode .cta-boussole a {
  background: rgba(255,255,255,0.12) !important;
  color: #e8e4dc !important;
}

/* ── 96. .nf-pratique (classe HTML réelle ≠ nf-pratique-box dans dark-mode.css) ── */
html.dark-mode .nf-pratique {
  background: rgba(106,175,148,0.07) !important;
  border-color: rgba(106,175,148,0.22) !important;
}

/* ── 97. .ep-card (evidence cards NutriFact) ── */
html.dark-mode .ep-card {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(255,255,255,0.10) !important;
}

/* ── 98. .nf-table lignes paires (background:#f9fafb hardcodé) ── */
html.dark-mode .nf-table tr:nth-child(even) td {
  background: rgba(255,255,255,0.03) !important;
}

/* ── 99. .ctrl-btn (toolbar vue patient/clinicien) — var(--card,#fff) fallback ── */
html.dark-mode .ctrl-btn {
  background: #21262e !important;
  color: rgba(232,228,220,0.80) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.30) !important;
}
html.dark-mode .ctrl-btn.active-ctrl {
  background: rgba(106,175,148,0.20) !important;
  color: #6aaf94 !important;
  border-color: rgba(106,175,148,0.38) !important;
}

/* ── 100. .g-final-cta-box gradient + bouton (Phase 18 trop générique) ── */
html.dark-mode .g-final-cta-box {
  background: linear-gradient(135deg, rgba(45,106,79,0.40) 0%, rgba(30,77,56,0.55) 100%) !important;
  border: 1px solid rgba(106,175,148,0.22) !important;
}
html.dark-mode .g-final-cta-box .btn {
  background: rgba(255,255,255,0.14) !important;
  color: #e8e4dc !important;
}

/* ── 101. .g-hero (guide hero) ── */
html.dark-mode .g-hero {
  background: linear-gradient(180deg, #1a1e24 0%, #1e2530 100%) !important;
  border-bottom-color: rgba(255,255,255,0.08) !important;
}

/* ── 102. .b-solid (benefit badge solide guides) ── */
html.dark-mode .b-solid {
  background: rgba(106,175,148,0.12) !important;
  color: #6aaf94 !important;
}

/* ── 103. .flag-delai + .dt-node.non + .dt-branch-label.non (G1 arbre décision) ── */
html.dark-mode .flag-delai {
  background: rgba(245,158,11,0.10) !important;
  color: #f59e0b !important;
}
html.dark-mode .dt-node.non {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.32) !important;
  color: #f59e0b !important;
}
html.dark-mode .dt-branch-label.non {
  background: rgba(245,158,11,0.10) !important;
  color: #f59e0b !important;
}

/* ── 104. .g-kp (Key Point cards guides) ── */
html.dark-mode .g-kp {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}

/* ── 105. .marker-card (evidence markers guides) ── */
html.dark-mode .marker-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .marker-card.collapsed .marker-body::before {
  background: linear-gradient(180deg, transparent 0%, #21262e 100%) !important;
}

/* ── 106. .g-toolbar-btn (barre d'outils guides) ── */
html.dark-mode .g-toolbar-btn {
  background: #21262e !important;
  color: #6aaf94 !important;
  border-color: rgba(106,175,148,0.35) !important;
}
html.dark-mode .g-toolbar-btn:hover {
  background: #6aaf94 !important;
  color: #1a1e24 !important;
}

/* ── 107. .action-block guides ── */
html.dark-mode .action-block {
  background: #21262e !important;
  border-color: rgba(106,175,148,0.35) !important;
}

/* ── 108. .patient-summary (G-U1 et similaires) ── */
html.dark-mode .patient-summary {
  background: rgba(5,150,105,0.10) !important;
  border-left-color: #059669 !important;
}

/* ── 109. .g-redflags-box / .g-redflags-label (rouge explicite — Phase 18 trop générique) ── */
html.dark-mode .g-redflags-box {
  background: rgba(185,28,28,0.10) !important;
  border-left-color: #ef4444 !important;
  border-color: rgba(185,28,28,0.28) !important;
}
html.dark-mode .g-redflags-label {
  background: #7f1d1d !important;
  color: #fca5a5 !important;
}

/* ── 110. #view-badge (patient/clinicien badge guides) ── */
html.dark-mode #view-badge.patient {
  background: rgba(5,150,105,0.18) !important;
  color: #34d399 !important;
}
html.dark-mode #view-badge.clinician {
  background: rgba(30,64,175,0.18) !important;
  color: #93c5fd !important;
}

/* ── 111. Articles — Sommaire nav (inline styles hardcodés — aria-label) ── */
html.dark-mode nav[aria-label="Sommaire de l'article"] {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.12) !important;
}
html.dark-mode nav[aria-label="Sommaire de l'article"] p {
  color: rgba(106,175,148,0.85) !important;
}
html.dark-mode nav[aria-label="Sommaire de l'article"] a {
  color: #8da4a0 !important;
}

/* ── 112. Articles — .author-note (fond #f0f4ff codé en dur) ── */
html.dark-mode .author-note {
  background: rgba(67, 97, 238, 0.10) !important;
  border-left-color: #8da4ef !important;
  color: #c8c4bc !important;
}
html.dark-mode .author-note .author-label {
  color: #8da4ef !important;
}
html.dark-mode .author-note p {
  color: #c8c4bc !important;
}

/* ── 112. Articles — .profile-card (--color-surface non surchargé en dark) ── */
html.dark-mode .profile-card {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .profile-card p {
  color: #c8c4bc !important;
}

/* ── 113. Articles — .disclaimer (--color-surface non surchargé en dark) ── */
html.dark-mode .disclaimer {
  background: #21262e !important;
  color: rgba(232,228,220,0.65) !important;
}

/* ── 114. Panel Résumé — carrousel images (pilote DICV — vit-S662) ── */
html.dark-mode .preview-btn-resume:hover {
  background: rgba(255,255,255,0.10) !important;
  border-color: #6aaf94 !important;
  color: #6aaf94 !important;
}
html.dark-mode .apt-resume-carousel { background: #000 !important; }
html.dark-mode .apt-resume-track img { background: #000 !important; }
html.dark-mode .apt-resume-nav {
  background: rgba(255,255,255,.92) !important;
  border-color: rgba(45,106,79,.6) !important;
  color: #2d6a4f !important;
}
html.dark-mode .apt-resume-dot { background: rgba(232,228,220,0.22) !important; }
html.dark-mode .apt-resume-dot-active { background: #6aaf94 !important; }

/* ══════════════════════════════════════════════════
   PHASE 22b — Reading mode toggle (toutes surfaces)
   ══════════════════════════════════════════════════ */
html.dark-mode .reading-mode-toggle {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.18) !important;
}
html.dark-mode .rmt-label { color: #e8e4dc !important; }
html.dark-mode .rmt-desc  { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .rmt-switch { background: #3a404a !important; }
html.dark-mode .rmt-switch::after { background: #e8e4dc !important; }
html.dark-mode .reading-mode-toggle[aria-checked="true"] .rmt-switch,
html.dark-mode .reading-mode-toggle[aria-pressed="true"] .rmt-switch { background: #286a4d !important; }

/* ══════════════════════════════════════════════════
   PHASE 22c — Composants articles récurrents
   ══════════════════════════════════════════════════ */

/* synthesis-item (grille "Ce que vous allez comprendre") */
html.dark-mode .synthesis-item { background: #252a32 !important; border-color: rgba(232,228,220,0.18) !important; }
html.dark-mode .synthesis-item strong { color: #e8e4dc !important; }
html.dark-mode .synthesis-item p     { color: rgba(232,228,220,0.70) !important; }

/* FAQ accordion */
html.dark-mode .faq-question  { background: #252a32 !important; border-color: rgba(232,228,220,0.18) !important; color: #e8e4dc !important; }
html.dark-mode .glossary-content { background: #1e2128 !important; color: rgba(232,228,220,0.80) !important; }

/* Epistemic table */
html.dark-mode .epistemic-table th { background: #252a32 !important; color: #e8e4dc !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .epistemic-table td { background: transparent !important; color: rgba(232,228,220,0.80) !important; border-color: rgba(232,228,220,0.10) !important; }
html.dark-mode .epistemic-table tr:nth-child(even) td { background: rgba(232,228,220,0.04) !important; }

/* Proof badges colorés */
html.dark-mode .proof-badge.orange { background: rgba(192,86,33,0.20) !important; color: #f6ad7c !important; border-color: rgba(192,86,33,0.35) !important; }
html.dark-mode .proof-badge.red    { background: rgba(185,28,28,0.18) !important; color: #fca5a5 !important; border-color: rgba(185,28,28,0.30) !important; }

/* Callout warning */
html.dark-mode .callout-warning { background: rgba(245,158,11,0.12) !important; border-color: rgba(245,158,11,0.30) !important; color: rgba(232,228,220,0.85) !important; }

/* Breadcrumb separateurs */
html.dark-mode .breadcrumb-sep { color: rgba(232,228,220,0.30) !important; }

/* CTA main */
html.dark-mode .cta-main a { background: #286a4d !important; color: #e8e4dc !important; border-color: transparent !important; }

/* Article meta icon */
html.dark-mode .article-meta-icon { color: rgba(232,228,220,0.55) !important; }

/* ══════════════════════════════════════════════════
   PHASE 22 — NutriFacture : composants dark mode
   ══════════════════════════════════════════════════ */

/* §22-1. Fonds blancs communs nutrifact */
html.dark-mode .cta-boussole a,
html.dark-mode .nf-cta a { background: #286a4d !important; color: #e8e4dc !important; border-color: transparent !important; }

html.dark-mode .nf-related-card,
html.dark-mode .nf-syn-cell,
html.dark-mode .nf-synth-cell,
html.dark-mode .nf-block,
html.dark-mode .nf-strip-cell { background: #252a32 !important; border-color: rgba(232,228,220,0.15) !important; }

html.dark-mode .nf-toc { background: #252a32 !important; border-color: rgba(232,228,220,0.18) !important; }

/* §22-2. Couleurs texte muted nutrifact */
html.dark-mode .nf-subtitle,
html.dark-mode .nf-snippet-label,
html.dark-mode .ep-zone-title,
html.dark-mode .nf-svg-caption,
html.dark-mode .nf-meta-line,
html.dark-mode .nf-bullets .pmid { color: rgba(232,228,220,0.55) !important; }

html.dark-mode .nf-sources-list li { color: rgba(232,228,220,0.70) !important; }

html.dark-mode .nf-synthesis-cell strong { color: #e8e4dc !important; }

/* §22-3. Inline styles colorés (badges statut, alertes) — override par fond générique */
html.dark-mode [style*="background:#fef3c7"],
html.dark-mode [style*="background:#fef2f2"],
html.dark-mode [style*="background:#f0fdf4"],
html.dark-mode [style*="background:#f0f7ff"],
html.dark-mode [style*="background:#fffbeb"],
html.dark-mode [style*="background:#f8f9fb"],
html.dark-mode [style*="background:#fff8ed"],
html.dark-mode [style*="background:#f8f6f0"],
html.dark-mode [style*="background:#f8f5ee"] { background: #252a32 !important; border-color: rgba(232,228,220,0.18) !important; }

html.dark-mode [style*="color:#92400e"],
html.dark-mode [style*="color:#b91c1c"] { color: rgba(232,228,220,0.80) !important; }

html.dark-mode [style*="color:rgba(6,23,45"] { color: rgba(232,228,220,0.60) !important; }

/* §22-4. <pre> avec background inline hardcodé light */
html.dark-mode pre[style] { background: #252a32 !important; border-color: rgba(232,228,220,0.15) !important; color: #d4cfc6 !important; }

/* ══════════════════════════════════════════════════
   PHASE 25 — Override CSS variables nutrifact (:root → dark)
   Les nutrifacts définissent leurs propres custom properties.
   html.dark-mode (spécificité 0,1,1) > :root (0,0,1) → override garanti.
   ══════════════════════════════════════════════════ */
html.dark-mode {
  --surface:      #252a32 !important;
  --forest-light: #1a2820 !important;
  --muted:        rgba(232,228,220,0.55) !important;
  --muted-light:  rgba(232,228,220,0.18) !important;
  --muted-soft:   rgba(232,228,220,0.42) !important;
  --navy:         #e8e4dc !important;
  --bg:           #1a1d23 !important;
  --paper2:       #1e2128 !important;
  --warn-bg:      rgba(245,158,11,0.10) !important;
  --warn-border:  rgba(245,158,11,0.32) !important;
  --border:       rgba(232,228,220,0.12) !important;
  --border-light: rgba(232,228,220,0.08) !important;
  --rouge:        #fca5a5 !important;
}

/* §25-1. Badges manquants */
html.dark-mode .ep-badge-fort      { background: rgba(5,150,105,0.18) !important; color: #6ee7b7 !important; border-color: rgba(5,150,105,0.28) !important; }
html.dark-mode .badge-gray         { background: rgba(232,228,220,0.08) !important; color: rgba(232,228,220,0.55) !important; }

/* §25-2. Classes variantes multi-nutrifacts */
html.dark-mode .nf-tag             { background: rgba(232,228,220,0.08) !important; color: rgba(232,228,220,0.55) !important; }
html.dark-mode .nf-table small     { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .nf-prec-num        { background: rgba(232,228,220,0.08) !important; color: rgba(232,228,220,0.60) !important; }
html.dark-mode .nf-prec-num::before { color: #e8e4dc !important; }
html.dark-mode .pmid-ref           { background: rgba(14,165,233,0.12) !important; color: #7dd3fc !important; border-color: rgba(14,165,233,0.22) !important; }
html.dark-mode .mediator-note      { background: #1e2128 !important; border-color: rgba(232,228,220,0.10) !important; }
html.dark-mode .pratique-box,
html.dark-mode .nf-pratique-box    { background: #1e2128 !important; border-color: rgba(45,106,79,0.25) !important; }

/* §25-3. Nav anchors variante (.nf-anchors) */
html.dark-mode .nf-anchors         { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .nf-anchors a       { background: rgba(45,106,79,0.18) !important; color: #6ee7b7 !important; }
html.dark-mode .nf-anchors a:hover { background: rgba(45,106,79,0.30) !important; }

/* §25-4. Bullets PMID variantes */
html.dark-mode .nf-bullets li .pmid { background: rgba(14,165,233,0.12) !important; color: #7dd3fc !important; }
html.dark-mode .nf-sub-bullets li::before { background: rgba(232,228,220,0.40) !important; }
html.dark-mode .nf-precautions-list li::before { background: rgba(232,228,220,0.40) !important; }

/* §25-5. Strip variantes */
html.dark-mode .nf-strip-key,
html.dark-mode .nf-strip-val       { color: #e8e4dc !important; }
html.dark-mode .nb-cat             { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }

/* §25-6. CTA text (déjà blanc mais fond peut être clair) */
html.dark-mode .nf-cta             { background: #286a4d !important; }
html.dark-mode .nf-cta p,
html.dark-mode .cta-boussole p     { color: rgba(232,228,220,0.85) !important; }
html.dark-mode .btn-app-top,
html.dark-mode .btn-scroll-top,
html.dark-mode .scroll-top         { color: #e8e4dc !important; }

/* ══════════════════════════════════════════════════
   PHASE 26 — Override CSS variables articles (:root → dark)
   Audit 27/06/2026 — variables non couvertes, triées par nb d'usages.
   Même principe que PHASE 25 : html.dark-mode (0,1,1) > :root (0,0,1).
   ══════════════════════════════════════════════════ */
html.dark-mode {
  /* ── Texte (aliases non encore couverts) ── */
  --ink-soft:             rgba(232,228,220,0.55) !important;
  --color-primary:        #e8e4dc !important;
  --muted3:               rgba(232,228,220,0.18) !important;

  /* ── Fonds clairs → dark ── */
  --sand:                 #1e2128 !important;
  --cream:                #1e2128 !important;
  --sage-lighter:         #1e2128 !important;
  --mauve-light:          #252a32 !important;
  --sand-light:           #1e2128 !important;
  --color-bg:             #1a1d23 !important;
  --color-warm:           #1e2128 !important;
  --card-bg:              #252a32 !important;

  /* ── Borders / séparateurs ── */
  --line:                 rgba(232,228,220,0.12) !important;
  --borderSoft:           rgba(232,228,220,0.08) !important;

  /* ── Zones warning / amber ── */
  --warning-bg:           rgba(245,158,11,0.10) !important;
  --warning-border:       rgba(245,158,11,0.35) !important;
  --color-warning-bg:     rgba(245,158,11,0.10) !important;
  --color-warning-border: rgba(245,158,11,0.35) !important;
  --amber-bg:             rgba(245,158,11,0.10) !important;
  --amber-pale:           rgba(245,158,11,0.12) !important;

  /* ── Zones négatives / rouges ── */
  --negative-bg:          rgba(185,28,28,0.12) !important;
  --red-pale:             rgba(185,28,28,0.12) !important;

  /* ── Ombres (supprime halos navy clairs) ── */
  --shadow:               0 14px 34px rgba(0,0,0,0.40) !important;
  --shadowSoft:           0 14px 34px rgba(0,0,0,0.40) !important;
  --shadow-md:            0 4px 24px rgba(0,0,0,0.40) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 29 — Audit automatique complet 27/06/2026
   69 sélecteurs · script audit_darkmode_complete.py
   Triage : backgrounds light, borders navy, textes navy.
   Sélecteurs d'éléments globaux (h1/h3) exclus volontairement.
   ══════════════════════════════════════════════════ */

/* 98× — .toc */
html.dark-mode .toc {
  background: rgba(232,228,220,0.03) !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 96× — .glossaire-accordion */
html.dark-mode .glossaire-accordion {
  background: #1e2128 !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 43× — .box-doctor */
html.dark-mode .box-doctor {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.12) !important;
}
/* 31× — .share-copy */
html.dark-mode .share-copy {
  background: rgba(232,228,220,0.07) !important;
  border: 1px solid rgba(232,228,220,0.15) !important;
}
/* 20× — .conclusion-box */
html.dark-mode .conclusion-box {
  background: #252a32 !important;
}
/* 16× — .nf-synthesis-cell */
html.dark-mode .nf-synthesis-cell {
  background: #252a32 !important;
}
/* 15× — .toc-box */
html.dark-mode .toc-box {
  background: #1e2128 !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 12× — .article-epistemic + .epistemic-box */
html.dark-mode .article-epistemic,
html.dark-mode .epistemic-box {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 10× — details.faq-item border */
html.dark-mode details.faq-item {
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 10× — .ep-badge-mod */
html.dark-mode .ep-badge-mod {
  background: #1e2128 !important;
  border-color: rgba(232,228,220,0.15) !important;
}
/* 9× — .sommaire */
html.dark-mode .sommaire {
  background: #1e2128 !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 8× — .article-box */
html.dark-mode .article-box {
  background: rgba(232,228,220,0.04) !important;
}
/* 4× — .section-lead (promu depuis dark-mode-autogen.css, ops-S14 18/08/2026 — fond identique au patron .article-box, cf. §6o skill boussole-article-html) */
html.dark-mode .section-lead {
  background: rgba(232,228,220,0.04) !important;
  color: #e8e4dc !important;
}
/* 8× — .nf-badge-preuve-faible */
html.dark-mode .nf-badge-preuve-faible {
  background: #1e2128 !important;
}
/* 7× — .article-meta */
html.dark-mode .article-meta {
  color: rgba(232,228,220,0.55) !important;
}
/* 7× — .toc-block */
html.dark-mode .toc-block {
  background: rgba(232,228,220,0.03) !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 7× — .glossaire-accordion summary */
html.dark-mode .glossaire-accordion summary {
  background: rgba(232,228,220,0.02) !important;
  color: #e8e4dc !important;
}
/* 6× — .sources-list li */
html.dark-mode .sources-list li {
  color: rgba(232,228,220,0.60) !important;
}
/* 6× — .article-epistemic (seul) */
html.dark-mode .article-epistemic {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 6× — .epistemic-block */
html.dark-mode .epistemic-block {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 6× — .nf-sources */
html.dark-mode .nf-sources {
  background: #252a32 !important;
}
/* 5× — .article-footer */
html.dark-mode .article-footer {
  background: #1e2128 !important;
  color: rgba(232,228,220,0.42) !important;
}
/* 5× — .nf-food-table th */
html.dark-mode .nf-food-table th {
  background: #1e2128 !important;
}
/* 5× — .nf-related-card */
html.dark-mode .nf-related-card {
  background: #252a32 !important;
}
/* 4× — .faq-section details */
html.dark-mode .faq-section details {
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 4× — .proof-badge.neutral */
html.dark-mode .proof-badge.neutral {
  background: rgba(232,228,220,0.05) !important;
  border-color: rgba(232,228,220,0.12) !important;
}
/* 4× — .toc-wrapper */
html.dark-mode .toc-wrapper {
  background: rgba(232,228,220,0.03) !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 4× — summary (accordéon générique) */
html.dark-mode summary {
  background: #1e2128 !important;
}
/* 4× — details.glossaire */
html.dark-mode details.glossaire {
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 4× — .epistemic-summary */
html.dark-mode .epistemic-summary {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 4× — .ep-zone */
html.dark-mode .ep-zone {
  background: #1e2128 !important;
}
/* 3× — .glossaire-toggle */
html.dark-mode .glossaire-toggle {
  border: 1px solid rgba(232,228,220,0.12) !important;
  color: rgba(232,228,220,0.60) !important;
}
/* 3× — .related-card .rc-title */
html.dark-mode .related-card .rc-title {
  color: #e8e4dc !important;
}
/* 3× — .sources-section h2 */
html.dark-mode .sources-section h2 {
  color: #e8e4dc !important;
}
/* 3× — .encadre-warning */
html.dark-mode .encadre-warning {
  background: #1e2128 !important;
}
/* 3× — .synthesis-card-text */
html.dark-mode .synthesis-card-text {
  color: rgba(232,228,220,0.65) !important;
}
/* 3× — .pro-badge */
html.dark-mode .pro-badge {
  background: rgba(232,228,220,0.08) !important;
}
/* 2× — .premium-cta */
html.dark-mode .premium-cta {
  background: #252a32 !important;
}
/* 2× — .badge-warn */
html.dark-mode .badge-warn {
  background: #1e2128 !important;
}
/* 2× — .bilan-priority */
html.dark-mode .bilan-priority {
  background: #252a32 !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 2× — .hub-section */
html.dark-mode .hub-section {
  background: rgba(232,228,220,0.03) !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* 2× — .svg-container */
html.dark-mode .svg-container {
  background: #252a32 !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 2× — .glossaire-item .g-def */
html.dark-mode .glossaire-item .g-def {
  color: rgba(232,228,220,0.70) !important;
}
/* 2× — .risk-table th */
html.dark-mode .risk-table th {
  background: #1e2128 !important;
  color: rgba(232,228,220,0.50) !important;
}
/* 2× — .faq-section h2 */
html.dark-mode .faq-section h2 {
  color: #e8e4dc !important;
}
/* 2× — .vt-* (veille timeline) */
html.dark-mode .veille-timeline-wrap {
  border: 1px solid rgba(232,228,220,0.07) !important;
}
html.dark-mode .vt-left,
html.dark-mode .vt-month,
html.dark-mode .vt-detail-wrap {
  background: #1e2128 !important;
}
html.dark-mode .vt-sep::before,
html.dark-mode .vt-sep::after {
  background: rgba(232,228,220,0.10) !important;
}
/* 2× — .toc-title */
html.dark-mode .toc-title {
  color: rgba(232,228,220,0.55) !important;
}
/* 2× — .box-warning p (fond amber dark → texte clair) */
html.dark-mode .box-warning p {
  color: #e8e4dc !important;
}
/* 2× — .share-title */
html.dark-mode .share-title {
  color: rgba(232,228,220,0.55) !important;
}
/* 2× — .source-note */
html.dark-mode .source-note {
  background: rgba(232,228,220,0.03) !important;
}
/* 2× — .matrix-cell-hyp */
html.dark-mode .matrix-cell-hyp {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.12) !important;
}
/* 2× — .exam-card */
html.dark-mode .exam-card {
  background: #252a32 !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 2× — .risk-card / .safe-card */
html.dark-mode .risk-card {
  background: #1e2128 !important;
}
html.dark-mode .safe-card {
  background: #252a32 !important;
}
/* 2× — .btn-share.copy */
html.dark-mode .btn-share.copy {
  background: rgba(232,228,220,0.08) !important;
}
/* 2× — tables alternées */
html.dark-mode .mg-table tr:nth-child(even) td {
  background: rgba(232,228,220,0.02) !important;
}
/* 2× — .glossaire-accordion li */
html.dark-mode .glossaire-accordion li {
  color: rgba(232,228,220,0.75) !important;
}
/* 2× — .mecanisme-schema */
html.dark-mode .mecanisme-schema {
  background: rgba(232,228,220,0.03) !important;
  border: 1px solid rgba(232,228,220,0.08) !important;
}
/* 2× — .epistemic-label */
html.dark-mode .epistemic-label {
  color: #e8e4dc !important;
}
/* 2× — nutrifact misc */
html.dark-mode .nf-variability-box {
  background: #1e2128 !important;
}
html.dark-mode .nf-snippet-label {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode .nf-svg-caption {
  color: rgba(232,228,220,0.55) !important;
}
/* 2× — .b-rct */
html.dark-mode .b-rct {
  background: #1e2128 !important;
}
/* 2× — .article-svg-figure svg */
html.dark-mode .article-svg-figure svg {
  background: #1e2128 !important;
}

/* ══════════════════════════════════════════════════
   PHASE 28 — Hardcodes inline articles (classes sans var())
   Audit 27/06/2026 — 5 patterns à fonds/couleurs hardcodés.
   Spécificité html.dark-mode .classe (0,2,1) > .classe (0,1,0).
   ══════════════════════════════════════════════════ */

/* ── H2/H3 hardcodés #06172D (6 articles) ── */
html.dark-mode .article-card h2,
html.dark-mode .article-card h3 {
  color: #e8e4dc !important;
}

/* ── .callout-emerging — fond jaune paille #fefce8 (41 articles) ── */
html.dark-mode .callout-emerging {
  background: rgba(234,179,8,0.08) !important;
  border-color: rgba(234,179,8,0.28) !important;
  color: rgba(232,228,220,0.85) !important;
}

/* ── .article-lead — fond blanc #fff (101 articles) ── */
html.dark-mode .article-lead {
  background: #1e2128 !important;
  border-color: rgba(232,228,220,0.08) !important;
}

/* ── .proof-badge — badges niveau preuve (163 articles) ── */
html.dark-mode .proof-badge.low {
  background: rgba(245,158,11,0.15) !important;
  color: rgba(232,228,220,0.75) !important;
}
html.dark-mode .proof-badge.medium {
  background: rgba(59,130,246,0.15) !important;
  color: rgba(232,228,220,0.75) !important;
}
html.dark-mode .proof-badge.high {
  background: rgba(22,163,74,0.15) !important;
  color: rgba(232,228,220,0.75) !important;
}

/* ── .faq-item — fond blanc (129 articles) ── */
html.dark-mode .faq-item {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.10) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 27 — Override CSS variables guides (:root → dark)
   Audit 27/06/2026 — variables propres aux guides HTML.
   ══════════════════════════════════════════════════ */
html.dark-mode {
  --card:           #252a32 !important;                  /* 20 usages — fond carte #FFFFFF */
  --text-hint:      rgba(232,228,220,0.40) !important;  /*  5 usages — hint text navy */
  --boussole-navy:  #e8e4dc !important;                 /*  4 usages — alias --navy guides */
  --text-secondary: rgba(232,228,220,0.60) !important;  /*  4 usages — texte secondaire */
}

/* ══════════════════════════════════════════════════
   PHASE 23 — Audit exhaustif : 188 classes manquantes
   Généré 27/06/2026 — couverture complète vitrine
   ══════════════════════════════════════════════════ */

/* §23-1. Tables des matières (TOC / sommaire) */
html.dark-mode .toc,
html.dark-mode .toc-box,
html.dark-mode .toc-block,
html.dark-mode .sommaire,
html.dark-mode .article-toc { background: #1e2128 !important; border-color: rgba(232,228,220,0.12) !important; }

html.dark-mode .toc-title,
html.dark-mode .toc-label,
html.dark-mode .toc-block h3,
html.dark-mode .article-toc h3,
html.dark-mode .article-toc-title { color: rgba(232,228,220,0.55) !important; }

html.dark-mode .toc a { color: rgba(232,228,220,0.70) !important; }

/* §23-2. Glossaires & accordéons */
html.dark-mode .glossaire-accordion,
html.dark-mode .glossaire-accordion ul { background: #1e2128 !important; border-color: rgba(232,228,220,0.10) !important; }

html.dark-mode .glossaire-accordion > div { background: #252a32 !important; border-color: rgba(232,228,220,0.10) !important; }

html.dark-mode .glossaire-accordion summary,
html.dark-mode .glossaire-section summary,
html.dark-mode .glossaire-toggle,
html.dark-mode .faq summary { color: #e8e4dc !important; }

html.dark-mode .glossaire-accordion li,
html.dark-mode .glossaire-accordion ul li { color: rgba(232,228,220,0.70) !important; }

html.dark-mode .glossaire-item { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .glossaire-item .g-term  { color: #e8e4dc !important; }
html.dark-mode .glossaire-item .g-def,
html.dark-mode .glossaire-item dd       { color: rgba(232,228,220,0.70) !important; }
html.dark-mode .glossaire-item .g-en    { color: rgba(232,228,220,0.55) !important; }

html.dark-mode .glossaire-section summary::after { color: rgba(232,228,220,0.40) !important; }
html.dark-mode .glossaire-toggle:hover { background: rgba(232,228,220,0.06) !important; }
html.dark-mode .glossaire-toggle .g-arrow { color: rgba(232,228,220,0.50) !important; }

/* §23-3. Glossary (variante anglophone) */
html.dark-mode .glossary-box,
html.dark-mode .glossary-item { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .glossary-title  { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .glossary-item .gi-fr { color: #e8e4dc !important; }
html.dark-mode .glossary-item .gi-en,
html.dark-mode .glossary-en          { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .glossary-def         { color: rgba(232,228,220,0.70) !important; }

/* §23-4. Details / Summary génériques */
html.dark-mode details              { background: #1e2128 !important; border-color: rgba(232,228,220,0.10) !important; }
html.dark-mode details summary      { background: #252a32 !important; color: #e8e4dc !important; }
html.dark-mode summary:hover        { background: rgba(232,228,220,0.06) !important; }
html.dark-mode .faq-block details[open] { background: #1e2128 !important; }
html.dark-mode .edition-summary     { background: #1e2128 !important; border-color: rgba(232,228,220,0.10) !important; }

/* §23-5. CTA & boutons */
html.dark-mode .cta-principal {
  background: linear-gradient(135deg, #286a4d 0%, #1f4d38 100%) !important;
  border: 1px solid rgba(106,175,148,0.18) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22) !important;
}
html.dark-mode .cta-principal h3 {
  color: #e8e4dc !important;
  border-color: transparent !important;
}
html.dark-mode .cta-principal p {
  color: rgba(232,228,220,0.82) !important;
  opacity: 1 !important;
}
html.dark-mode .founder-block {
  background: linear-gradient(135deg, rgba(37,42,50,0.96), rgba(30,33,40,0.98)) !important;
  border-color: rgba(106,175,148,0.18) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22) !important;
}
html.dark-mode .stats-strip {
  background: rgba(37,42,50,0.92) !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .stat-item {
  border-color: rgba(232,228,220,0.08) !important;
}
html.dark-mode .prat-card {
  background: rgba(37,42,50,0.92) !important;
  border-color: rgba(232,228,220,0.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
}
html.dark-mode .prat-card:hover,
html.dark-mode .prat-card.active {
  border-color: rgba(106,175,148,0.3) !important;
  box-shadow: 0 12px 28px rgba(0,0,0,0.24) !important;
}
html.dark-mode .prat-avatar {
  background: linear-gradient(135deg, #286a4d 0%, #4d9478 100%) !important;
  border-color: rgba(106,175,148,0.3) !important;
}
html.dark-mode .prat-tag {
  background: rgba(106,175,148,0.12) !important;
  border-color: rgba(106,175,148,0.22) !important;
}
html.dark-mode .prat-cta {
  background: #286a4d !important;
  border-color: transparent !important;
}
html.dark-mode .prat-cta:hover {
  background: #1e4d38 !important;
}
html.dark-mode .prat-cta.prat-cta-secondary {
  background: transparent !important;
  border-color: rgba(106,175,148,0.28) !important;
}
html.dark-mode .prat-cta.prat-cta-secondary:hover {
  background: rgba(106,175,148,0.1) !important;
}
html.dark-mode .lang-btn {
  background: rgba(37,42,50,0.92) !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .lang-btn.active {
  background: #286a4d !important;
  border-color: #286a4d !important;
}
html.dark-mode .model-intro,
html.dark-mode .q-card {
  background: rgba(37,42,50,0.92) !important;
  border-color: rgba(232,228,220,0.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.14) !important;
}
html.dark-mode .model-callout {
  background: rgba(106,175,148,0.08) !important;
}
html.dark-mode .q-options label {
  border-color: rgba(232,228,220,0.08) !important;
}
html.dark-mode .q-options label:hover {
  background: rgba(106,175,148,0.08) !important;
}
html.dark-mode .q-options label.selected {
  background: rgba(106,175,148,0.18) !important;
  border-color: rgba(106,175,148,0.26) !important;
}
html.dark-mode .likert-row {
  background: rgba(37,42,50,0.92) !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .likert-row label {
  border-color: rgba(232,228,220,0.08) !important;
}
html.dark-mode .likert-row label:hover {
  background: rgba(106,175,148,0.08) !important;
}
html.dark-mode .likert-row label.selected {
  background: #286a4d !important;
}
html.dark-mode .submit-btn {
  border-color: transparent !important;
}
html.dark-mode .toast {
  background: rgba(185,28,28,0.92) !important;
}
html.dark-mode .progress-bar {
  background: rgba(106,175,148,0.12) !important;
}
html.dark-mode .progress-fill {
  background: #286a4d !important;
}
html.dark-mode .vt-line {
  background: rgba(106,175,148,0.28) !important;
}
html.dark-mode .vt-dot {
  background: transparent !important;
  box-shadow: none !important;
}
html.dark-mode .vt-dot:hover::before,
html.dark-mode .vt-dot.active::before {
  box-shadow: 0 0 0 4px rgba(106,175,148,0.16) !important;
}
html.dark-mode .vtb-solid {
  background: rgba(59,109,17,0.18) !important;
}
html.dark-mode .vtb-warn {
  background: rgba(186,117,23,0.18) !important;
  color: #f6ad7c !important;
}
html.dark-mode .vtb-narr {
  background: rgba(232,228,220,0.08) !important;
}
html.dark-mode .vtc-pmid {
  background: rgba(232,228,220,0.08) !important;
}
html.dark-mode .vtc-pmid:hover {
  background: rgba(106,175,148,0.12) !important;
}
html.dark-mode .vtc-insight-mini {
  background: rgba(106,175,148,0.10) !important;
}
html.dark-mode .vtc-expand-btn {
  background: transparent !important;
  border-color: rgba(106,175,148,0.28) !important;
}
html.dark-mode .vtc-expand-btn:hover {
  background: rgba(106,175,148,0.10) !important;
  border-color: rgba(106,175,148,0.4) !important;
}
html.dark-mode .vtd-list li::before {
  background: #6aaf94 !important;
}
html.dark-mode .vtd-close {
  background: transparent !important;
  border-color: transparent !important;
}
html.dark-mode .glossaire-box {
  background: rgba(37,42,50,0.92) !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .glossaire-box summary,
html.dark-mode .glossaire-header {
  background: rgba(232,228,220,0.06) !important;
}
html.dark-mode .glossaire-header:hover,
html.dark-mode .faq-q:hover {
  background: rgba(232,228,220,0.08) !important;
}
html.dark-mode .hero-badge.blue,
html.dark-mode .pwa-tag.blue,
html.dark-mode .tool-card-badge.blue {
  background: rgba(59,130,246,0.18) !important;
  color: #93c5fd !important;
}
html.dark-mode .bar-fill.blue {
  background: #3b82f6 !important;
}
html.dark-mode .cta-box {
  background: linear-gradient(135deg, rgba(37,42,50,0.96) 0%, rgba(30,33,40,0.96) 100%) !important;
  border-color: rgba(106,175,148,0.22) !important;
}
html.dark-mode .cta-box > a:not([class]) {
  background: #286a4d !important;
  color: #e8e4dc !important;
  border-color: transparent !important;
}
html.dark-mode .cta-btn,
html.dark-mode .btn-cta,
html.dark-mode .cta-button,
html.dark-mode .cta-btn-blanc,
html.dark-mode .btn-cta-blanc,
html.dark-mode .nf-cta-btn,
html.dark-mode .lm-btn,
html.dark-mode .leadmagnet-btn,
html.dark-mode .premium-cta,
html.dark-mode .cta-block a,
html.dark-mode .cta-block .cta-btn,
html.dark-mode .cta-principal a.btn-cta,
html.dark-mode .app-bridge a,
html.dark-mode .app-bridge a.ab-btn,
html.dark-mode .app-bridge-cta      { background: #286a4d !important; color: #e8e4dc !important; border-color: transparent !important; }

/* §23-6. App bridge block */
html.dark-mode .app-bridge-title,
html.dark-mode .app-bridge .ab-title { color: #e8e4dc !important; }
html.dark-mode .app-bridge p,
html.dark-mode .app-bridge-text,
html.dark-mode .app-bridge .ab-text  { color: rgba(232,228,220,0.70) !important; }

/* §23-7. Hub cards & chips */
html.dark-mode .hub-card            { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .hub-card.coming:hover { color: rgba(232,228,220,0.30) !important; }
html.dark-mode .hub-chip            { background: #252a32 !important; border-color: rgba(232,228,220,0.15) !important; color: rgba(232,228,220,0.70) !important; }
html.dark-mode .faq-card            { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }

/* §23-8. Badges evidence / épistémiques (couleur adaptée au mode sombre) */
html.dark-mode .ep-badge-mod,
html.dark-mode .ep-tag-mod,
html.dark-mode .badge-warn,
html.dark-mode .badge-yellow,
html.dark-mode .ep-b-yellow,
html.dark-mode .badge-preuve-mod,
html.dark-mode .nb-mod             { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.30) !important; }

html.dark-mode .ep-badge-faible,
html.dark-mode .ep-tag-faible,
html.dark-mode .ep-tag-prelim,
html.dark-mode .badge-none,
html.dark-mode .badge-no,
html.dark-mode .nb-faible          { background: rgba(232,228,220,0.08) !important; color: rgba(232,228,220,0.55) !important; border-color: rgba(232,228,220,0.15) !important; }

html.dark-mode .badge-red,
html.dark-mode .badge-no,
html.dark-mode .ep-b-red,
html.dark-mode .nf-warn-red        { background: rgba(185,28,28,0.15) !important; color: #fca5a5 !important; border-color: rgba(185,28,28,0.28) !important; }

html.dark-mode .pz-rouge           { background: rgba(185,28,28,0.15) !important; border-color: rgba(185,28,28,0.28) !important; }
html.dark-mode .pz-ambre           { background: rgba(245,158,11,0.15) !important; border-color: rgba(245,158,11,0.28) !important; }

/* §23-9. Tables spécifiques */
html.dark-mode .risk-table th,
html.dark-mode .nf-food-table th,
html.dark-mode .nf-alim-table th   { background: #252a32 !important; color: #e8e4dc !important; border-color: rgba(232,228,220,0.12) !important; }

html.dark-mode .comparison-table tr:nth-child(even) td,
html.dark-mode .data-table tr:nth-child(even) td { background: rgba(232,228,220,0.04) !important; }

html.dark-mode .ev-row             { background: #252a32 !important; }
html.dark-mode .ev-row:nth-child(even) { background: #1e2128 !important; }

/* §23-10. Figures, SVG, captions */
html.dark-mode .figure-container,
html.dark-mode .svg-container,
html.dark-mode .svg-figure,
html.dark-mode .nf-svg-wrap        { background: #252a32 !important; border-color: rgba(232,228,220,0.10) !important; }

html.dark-mode .svg-figure svg     { background: transparent !important; }

html.dark-mode .svg-caption,
html.dark-mode .svg-figure figcaption,
html.dark-mode .figure-caption,
html.dark-mode .article-visual figcaption,
html.dark-mode .circuit-figure figcaption,
html.dark-mode .diagram-block figcaption,
html.dark-mode .diagram-caption    { color: rgba(232,228,220,0.55) !important; }

/* §23-11. Nutrifact — gaps complémentaires */
html.dark-mode .nf-reaction-card   { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .nf-bullets .absent { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .nf-sources li,
html.dark-mode .nf-table caption   { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .pmid-tag           { color: rgba(232,228,220,0.55) !important; }

/* §23-12. Textes navigation & méta */
html.dark-mode .article-breadcrumb,
html.dark-mode .article-breadcrumb a,
html.dark-mode .bc-inline,
html.dark-mode .bc-inline a        { color: rgba(232,228,220,0.55) !important; }

html.dark-mode .article-meta-sep   { color: rgba(232,228,220,0.20) !important; }
html.dark-mode .article-meta-tag   { color: rgba(232,228,220,0.55) !important; }

html.dark-mode .share-title,
html.dark-mode .share-section h2,
html.dark-mode .share-block-label,
html.dark-mode .share-block p      { color: rgba(232,228,220,0.65) !important; }

html.dark-mode .share-btn.copy     { color: #e8e4dc !important; }

html.dark-mode .btn-nav-conclusion { color: rgba(232,228,220,0.65) !important; border-color: rgba(232,228,220,0.25) !important; }

/* §23-13. Titres & textes hardcodés #06172D */
html.dark-mode .article-h2,
html.dark-mode .toc-title,
html.dark-mode .article-synthesis h2,
html.dark-mode h2.section-h2,
html.dark-mode .faq-section h2,
html.dark-mode .related-section h2,
html.dark-mode .related-section > h2,
html.dark-mode .app-bridge .ab-title,
html.dark-mode .app-bridge-title,
html.dark-mode .epistemic-label,
html.dark-mode .prose h2,
html.dark-mode .prose h3           { color: #e8e4dc !important; }

html.dark-mode .prose strong       { color: #e8e4dc !important; }

html.dark-mode .epistemic-title    { color: rgba(232,228,220,0.70) !important; }
html.dark-mode .epistemic-val,
html.dark-mode .epistemic-value,
html.dark-mode .epistemic-text     { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .epistemic-col.ep-limit h4 { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .epistemic-col li   { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .epistemic-item.limit strong { color: rgba(232,228,220,0.60) !important; }

html.dark-mode .faq-title          { color: rgba(232,228,220,0.80) !important; }
html.dark-mode .faq-arrow          { color: rgba(232,228,220,0.45) !important; }

html.dark-mode .target-block       { color: rgba(232,228,220,0.70) !important; }
html.dark-mode .target-block strong { color: #e8e4dc !important; }

html.dark-mode .synthesis-title    { color: rgba(232,228,220,0.70) !important; }
html.dark-mode .synthesis-label    { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .synthesis-cell     { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }

html.dark-mode .article-footer p   { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .article-footer a   { color: rgba(232,228,220,0.55) !important; }

/* §23-14. Cards génériques */
html.dark-mode .risk-card,
html.dark-mode .safe-card,
html.dark-mode .bilan-priority,
html.dark-mode .exam-card,
html.dark-mode .technique-card,
html.dark-mode .nt-card,
html.dark-mode .tool-card,
html.dark-mode .serotonin-criteria-card,
html.dark-mode .profil-card,
html.dark-mode .pricing-card       { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }

html.dark-mode .encadre-warning,
html.dark-mode .encadre-attention  { background: rgba(245,158,11,0.10) !important; border-color: rgba(245,158,11,0.25) !important; color: rgba(232,228,220,0.85) !important; }

html.dark-mode .schema-wrapper     { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }

html.dark-mode .methode-card.m2    { background: #252a32 !important; }
html.dark-mode .voie-creatine      { background: #252a32 !important; }
html.dark-mode .silhouette-panel   { background: #1e2128 !important; }
html.dark-mode .im                 { background: #252a32 !important; }

/* §23-15. Textes "chiffres" et misc muted */
html.dark-mode .chiffre-desc       { color: rgba(232,228,220,0.60) !important; }
html.dark-mode .svg-caption        { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .tag-gray           { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .fw-cover-intro     { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .note-article       { background: #252a32 !important; color: rgba(232,228,220,0.65) !important; }

/* §23-16. Badges couleur non standard */
html.dark-mode .badge-none         { background: rgba(232,228,220,0.08) !important; color: rgba(232,228,220,0.50) !important; border-color: rgba(232,228,220,0.15) !important; }

html.dark-mode .ep-badge-mod,
html.dark-mode .ep-badge-faible    { color: rgba(232,228,220,0.70) !important; border: 1px solid rgba(232,228,220,0.15) !important; }

/* §23-17. Timeline / vignette */
html.dark-mode .vt-left,
html.dark-mode .vt-month,
html.dark-mode .vt-detail-wrap,
html.dark-mode .vtd-source         { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; color: rgba(232,228,220,0.70) !important; }

/* §23-18. 404 page */
html.dark-mode .wrap .e404-code,
html.dark-mode .wrap .e404-sub     { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .wrap .e404-links a { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .wrap .e404-links a:hover { color: #e8e4dc !important; }

/* §23-19. PWA install block */
html.dark-mode .pwa-install-visual { background: #1e2128 !important; }
html.dark-mode .pwa-platform       { background: #252a32 !important; border-color: rgba(232,228,220,0.12) !important; }
html.dark-mode .pwa-tip            { color: rgba(232,228,220,0.55) !important; }

/* §23-20. App subscription (abonnement/index.html) */
html.dark-mode .screen-greeting,
html.dark-mode .screen-date,
html.dark-mode .screen-card-label  { color: rgba(232,228,220,0.70) !important; }

/* §23-21. Skip link accessibilité */
html.dark-mode .skip-link          { background: #252a32 !important; color: #e8e4dc !important; }
html.dark-mode .skip-link:focus    { background: #286a4d !important; color: #e8e4dc !important; }

/* §23-22. Tarteaucitron — bouton deny texte hardcodé */
html.dark-mode .tarteaucitronAlertBig .tarteaucitronDeny { color: #e8e4dc !important; }

/* §23-23. Toggle switch générique */
html.dark-mode .toggle-switch::after { background: #e8e4dc !important; }

/* §23-24. Misc — evidence legend, figure containers */
html.dark-mode .evidence-legend    { color: rgba(232,228,220,0.60) !important; }
html.dark-mode .evidence-levels-subtitle { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .ev-content p       { color: rgba(232,228,220,0.70) !important; }

html.dark-mode .temoignage-block .temo-source { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .data-card .dc-label { color: rgba(232,228,220,0.55) !important; }

/* §23-25. Article synthesis h2 */
html.dark-mode .article-synthesis h2 { color: #e8e4dc !important; }

/* §23-26. Cartes waitlist Boussole+/Pro (abonnement/index.html) — glass card
   background:rgba(255,255,255,.7) non couvert (fond blanc/gris délavé sur
   fond sombre) + bouton CTA en background:var(--ink) (mésusage : --ink est
   la variable TEXTE, elle devient claire en dark mode, donnant un bouton
   clair illisible avec du texte blanc dessus). Trouvé 26/08/2026 (ops-S25,
   capture Rémy). Fix bouton fait en dur dans le HTML (background:var(--color-accent),
   jamais surchargé par ce partial — forest reste forest dans les 2 thèmes) ;
   seule la carte a besoin d'un override ici. */
html.dark-mode #brevo-plus-form,
html.dark-mode #brevo-praticien-form {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 24 — NutriFacture : composants manquants (audit ashwagandha 27/06/2026)
   ══════════════════════════════════════════════════ */

/* §24-1. Navigation d'ancres (pills TOC nutrifact) */
html.dark-mode .nf-nav-anchors {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .nf-nav-anchors a {
  background: rgba(45,106,79,0.18) !important;
  color: #6ee7b7 !important;
  border-color: rgba(45,106,79,0.25) !important;
}
html.dark-mode .nf-nav-anchors a:hover { background: rgba(45,106,79,0.30) !important; }

/* §24-1bis. Sommaire latéral sticky nutrifact (.nf-toc-rail — promu S664, 30 fiches) */
html.dark-mode .nf-toc-rail-inner {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .nf-toc-rail a:hover,
html.dark-mode .nf-toc-rail a.active {
  background: rgba(45,106,79,0.16) !important;
  color: #8fd0b5 !important;
}

/* §24-2. Breadcrumb & meta nutrifact */
html.dark-mode .nf-breadcrumb,
html.dark-mode .nf-breadcrumb span,
html.dark-mode .nf-meta,
html.dark-mode .nf-meta span        { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .nf-breadcrumb a     { color: #6ee7b7 !important; }

/* §24-3. Header badges (badge-cat / badge-preuve-mod / badge-maj) */
html.dark-mode .badge-cat           { background: rgba(45,106,79,0.18) !important; color: #6ee7b7 !important; border-color: rgba(45,106,79,0.28) !important; }
html.dark-mode .badge-preuve-mod    { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.28) !important; }
html.dark-mode .badge-maj           { background: rgba(14,165,233,0.15) !important; color: #7dd3fc !important; border-color: rgba(14,165,233,0.25) !important; }

/* §24-4. Epistemic badges (ep-b-*) — preuve niveau */
html.dark-mode .ep-b-green          { background: rgba(5,150,105,0.18) !important; color: #6ee7b7 !important; border-color: rgba(5,150,105,0.28) !important; }
html.dark-mode .ep-b-yellow         { background: rgba(245,158,11,0.15) !important; color: #fbbf24 !important; border-color: rgba(245,158,11,0.28) !important; }
html.dark-mode .ep-b-red            { background: rgba(185,28,28,0.15) !important; color: #fca5a5 !important; border-color: rgba(185,28,28,0.28) !important; }
html.dark-mode .ep-b-gray           { background: rgba(232,228,220,0.08) !important; color: rgba(232,228,220,0.55) !important; border-color: rgba(232,228,220,0.15) !important; }

/* §24-5. Data list */
html.dark-mode .nf-data-list li     { background: #252a32 !important; border-left-color: rgba(45,106,79,0.40) !important; color: #e8e4dc !important; }
html.dark-mode .nf-data-list li b   { color: #e8e4dc !important; }

/* §24-6. Précaution zone navy */
html.dark-mode .pz-navy             { background: rgba(232,228,220,0.06) !important; color: #e8e4dc !important; border-color: rgba(232,228,220,0.15) !important; }
html.dark-mode .nf-prec-list li     { background: #252a32 !important; }

/* §24-7. Not-list & sources */
html.dark-mode .nf-not-list li      { color: rgba(232,228,220,0.75) !important; }
html.dark-mode .nf-sources-title    { color: #e8e4dc !important; }
html.dark-mode .nf-internal-link    { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .nf-internal-link:hover { color: #6ee7b7 !important; }

/* §24-8. PMID tag (background inline clair) */
html.dark-mode .pmid-tag            { background: rgba(14,165,233,0.12) !important; color: #7dd3fc !important; border-color: rgba(14,165,233,0.22) !important; }

/* §24-9. Scroll button */
html.dark-mode .scroll-btn          { background: #286a4d !important; color: #e8e4dc !important; }

/* ══════════════════════════════════════════════════
   R90. PRINT — annuler le dark mode (toutes surfaces)
   Position finale dans le fichier = spécificité gagnante
   sur toutes les règles html.dark-mode précédentes.
   ══════════════════════════════════════════════════ */
@media print {
  /* Reset fond + couleur racine */
  html.dark-mode,
  html.dark-mode body {
    background: white !important;
    color: #06172D !important;
  }

  /* Fiches visuelles — slides et conteneurs */
  html.dark-mode .fiche-card,
  html.dark-mode .fw-slide {
    background: white !important;
    color: #06172D !important;
    box-shadow: none !important;
  }

  /* Texte des fiches */
  html.dark-mode .fw-title,
  html.dark-mode .fw-body,
  html.dark-mode .fw-badge,
  html.dark-mode .fw-analogy-text,
  html.dark-mode .fw-why-text,
  html.dark-mode .fw-keyword-val,
  html.dark-mode .fw-keyword-label {
    color: #e8e4dc !important;
  }

  /* Blocs contextuels fiches */
  html.dark-mode .fw-analogy { background: rgba(0,0,0,0.04) !important; }
  html.dark-mode .fw-why     { background: rgba(0,0,0,0.04) !important; }

  /* Articles / NutriFact */
  html.dark-mode h1, html.dark-mode h2, html.dark-mode h3,
  html.dark-mode h4, html.dark-mode h5, html.dark-mode h6,
  html.dark-mode p, html.dark-mode li, html.dark-mode span,
  html.dark-mode .article-footer,
  html.dark-mode .sources-section,
  html.dark-mode .sources-list,
  html.dark-mode .nf-header-name,
  html.dark-mode .nf-header-sub,
  html.dark-mode .callout,
  html.dark-mode .callout-info,
  html.dark-mode .conclusion-box-c,
  html.dark-mode .synthesis-card {
    color: #06172D !important;
    background: transparent !important;
  }

  /* Fonds blancs explicites */
  html.dark-mode .nf-card,
  html.dark-mode .nf-header,
  html.dark-mode .article-card,
  html.dark-mode .synthesis-card {
    background: white !important;
  }
}

/* ══════════════════════════════════════════════════
   PHASE 30 — Fixes var(--white)/var(--navy) + nettoyage 27/06/2026
   Cas non détectables par audit_darkmode.py (var() qui s'inversent)
   ══════════════════════════════════════════════════ */

/* §30-1. Body-widget (var(--white) → dark) */
html.dark-mode .body-widget {
  background: #1e2128 !important;
  border-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .body-widget-header {
  background: rgba(232,228,220,0.05) !important;
  color: rgba(232,228,220,0.55) !important;
  border-color: rgba(232,228,220,0.08) !important;
}

/* §30-2. Stat-chip (var(--navy) → crème en dark → forcer fond sombre) */
html.dark-mode .stat-chip {
  background: #252a32 !important;
  border: 1px solid rgba(232,228,220,0.12) !important;
}
html.dark-mode .stat-chip .stat-num {
  color: #e8e4dc !important;
}
html.dark-mode .stat-chip .stat-label {
  color: rgba(232,228,220,0.60) !important;
}

/* §30-3. Fix PHASE X auto-généré — .epistemic-box manquait html.dark-mode */
html.dark-mode .article-epistemic,
html.dark-mode .epistemic-box {
  background: rgba(232,228,220,0.04) !important;
  border: 1px solid rgba(232,228,220,0.10) !important;
}
/* Note : html.dark-mode h1/h3 globaux retirés (trop larges — cassent CTAs blancs)
   Note : .vt-left / .vt-month déjà couverts §23-17 */

/* PHASE X — Audit auto 2026-06-27 */
/* 15 sélecteurs, impact ≥ 2 fichiers */

/* 12× */
html.dark-mode .article-epistemic,
html.dark-mode .epistemic-box {
  background: rgba(232,228,220,0.04) !important; /* 6× */
  border: 1px solid rgba(232,228,220,0.10) !important; /* 6× */
}

/* 4× */
html.dark-mode details.glossaire li {
  background: #252a32 !important; /* 4× */
}

/* 4× */
html.dark-mode #fw-lightbox-close {
  background: #252a32 !important; /* 4× */
}

/* 4× */
html.dark-mode #fw-lightbox-close:hover {
  background: #252a32 !important; /* 4× */
}

/* 3× */
html.dark-mode .g-final-cta-box::before {
  background: #252a32 !important; /* 3× */
}

/* 3× */
html.dark-mode .g-final-cta-box::after {
  background: #252a32 !important; /* 3× */
}

/* 2× */
html.dark-mode .encadre-alerte {
  background: #252a32 !important; /* 2× */
}

/* 2× */
html.dark-mode .callout-warn {
  background: #252a32 !important; /* 2× */
}

/* 2× */
html.dark-mode h3 {
  color: #e8e4dc !important; /* 2× */
}

/* 2× */
html.dark-mode .vt-left {
  background: #1e2128 !important; /* 2× */
}

/* 2× */
html.dark-mode .vt-month {
  background: #1e2128 !important; /* 2× */
}

/* 2× */
html.dark-mode .vt-sep::before,.vt-sep::after {
  background: rgba(232,228,220,0.1) !important; /* 2× */
}

/* 2× */
html.dark-mode h1 {
  color: #e8e4dc !important; /* 2× */
}

/* 2× */
html.dark-mode .cofacteur-card {
  background: #252a32 !important; /* 1× */
  border: 1px solid rgba(232,228,220,0.08) !important; /* 1× */
}

/* 2× */
html.dark-mode .seq-content {
  background: #252a32 !important; /* 1× */
  border: 1px solid rgba(232,228,220,0.08) !important; /* 1× */
}

/* ══════════════════════════════════════════════════
   PHASE 31 — Audit ciblé des trous dark mode 28/06/2026
   Classes récurrentes présentes dans les pages mais absentes du partial global.
   ══════════════════════════════════════════════════ */

/* §31-1. Hero badge commun des pages fonctionnalités */
html.dark-mode .hero-feat .eyebrow {
  background: rgba(45,106,79,0.14) !important;
  border-color: rgba(106,175,148,0.24) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.16) !important;
  color: #8fd0b5 !important;
}

/* §31-2. Onglets /abonnement */
html.dark-mode .abonnement-tab {
  background: rgba(255,255,255,0.07) !important;
  border-color: rgba(255,255,255,0.10) !important;
  color: rgba(232,228,220,0.72) !important;
}
html.dark-mode .abonnement-tab:hover,
html.dark-mode .abonnement-tab.active {
  background: #286a4d !important;
  border-color: #286a4d !important;
  color: #fff !important;
}
html.dark-mode .badge--pro {
  background: rgba(232,228,220,0.08) !important;
  color: rgba(232,228,220,0.74) !important;
}

/* §31-3. Variantes locales de badges de preuve */
html.dark-mode .proof-badge-tres-faible {
  background: rgba(232,228,220,0.08) !important;
  color: rgba(232,228,220,0.72) !important;
  border-color: rgba(232,228,220,0.14) !important;
}
html.dark-mode .proof-badge.proof-badge-tres-faible {
  background: rgba(232,228,220,0.08) !important;
  color: rgba(232,228,220,0.72) !important;
  border-color: rgba(232,228,220,0.14) !important;
}

/* §31-4. Cartes comparatives spécifiques */
html.dark-mode .compare-card {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .compare-card-header,
html.dark-mode .compare-card .compare-title {
  color: #e8e4dc !important;
}
html.dark-mode .compare-card-body,
html.dark-mode .compare-card li {
  color: rgba(232,228,220,0.72) !important;
  border-bottom-color: rgba(232,228,220,0.08) !important;
}
html.dark-mode .compare-card.viral,
html.dark-mode .compare-card.virus-card {
  background: rgba(185,28,28,0.10) !important;
  border-color: rgba(185,28,28,0.28) !important;
}
html.dark-mode .compare-card.vaccine,
html.dark-mode .compare-card.vaccin-card {
  background: rgba(5,150,105,0.10) !important;
  border-color: rgba(5,150,105,0.24) !important;
}
html.dark-mode .compare-card.viral .compare-card-title,
html.dark-mode .compare-card.virus-card .compare-title {
  color: #fca5a5 !important;
}
html.dark-mode .compare-card.vaccine .compare-card-title,
html.dark-mode .compare-card.vaccin-card .compare-title {
  color: #6ee7b7 !important;
}

/* §31-5. Blocs épistémiques et tableaux locaux */
html.dark-mode .ep-item {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .ep-item p {
  color: rgba(232,228,220,0.72) !important;
}
html.dark-mode .ep-item.ep-spec .ep-label {
  color: rgba(232,228,220,0.55) !important;
}
html.dark-mode .ev-table {
  border-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .ev-table thead th {
  background: #1e2128 !important;
  color: rgba(232,228,220,0.58) !important;
  border-bottom-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .ev-table tbody tr {
  border-bottom-color: rgba(232,228,220,0.08) !important;
}
html.dark-mode .ev-table tbody td {
  background: #252a32 !important;
  color: #e8e4dc !important;
}
html.dark-mode .ev-table tbody tr:nth-child(even):not(.ev-sh):not(.ev-dashed) td {
  background: #1e2128 !important;
}
html.dark-mode .ev-effect,
html.dark-mode .ev-indic,
html.dark-mode .ev-table td.ev-indic {
  color: rgba(232,228,220,0.55) !important;
}

/* §31-6. Bloc lien expert */
html.dark-mode .expert-link-box {
  background: rgba(232,228,220,0.04) !important;
  border-color: rgba(232,228,220,0.16) !important;
  color: rgba(232,228,220,0.72) !important;
}

/* §31-7. Métadonnées fiches */
html.dark-mode .fiche-meta-item {
  color: rgba(232,228,220,0.60) !important;
}
html.dark-mode .fiche-meta-sep {
  background: rgba(232,228,220,0.24) !important;
  color: rgba(232,228,220,0.24) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 32 — Consolidation dark mode 28/06/2026
   Remonte les overrides locaux restants et couvre les familles récurrentes.
   ══════════════════════════════════════════════════ */

/* §32-1. Hub / listing hub */
html.dark-mode .hub-hero {
  background: #1e2530 !important;
}
html.dark-mode .hub-card {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .hub-card:hover {
  border-color: rgba(106,175,148,0.40) !important;
}
html.dark-mode .hub-card--dedicated {
  background: rgba(45,106,79,0.12) !important;
  border-color: rgba(106,175,148,0.32) !important;
}
html.dark-mode .hub-inline-cta,
html.dark-mode .hub-nutrifact-note,
html.dark-mode .hub-app-cta {
  background: rgba(45,106,79,0.10) !important;
  border-color: rgba(106,175,148,0.24) !important;
}
html.dark-mode .hub-section-header {
  border-bottom-color: rgba(255,255,255,0.07) !important;
}
html.dark-mode .hub-stats {
  border-top-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .hub-card-footer {
  border-top-color: rgba(255,255,255,0.06) !important;
}

/* §32-2. FAQ */
html.dark-mode .faq-item {
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .faq-item summary {
  color: #e8e4dc !important;
}
html.dark-mode .faq-item .faq-answer {
  color: rgba(232,228,220,0.65) !important;
}

/* §32-3. Page Nouveautés */
html.dark-mode .upd-hero {
  background: linear-gradient(180deg, rgba(26,30,36,0.96) 0%, rgba(37,42,50,0.98) 100%) !important;
  border-bottom: 1px solid rgba(255,255,255,0.06) !important;
}
html.dark-mode .upd-eyebrow,
html.dark-mode .upd-hero .wrap p.upd-eyebrow {
  color: #8fd0b5 !important;
}
html.dark-mode .upd-hero h1,
html.dark-mode .upd-entry__title,
html.dark-mode .upd-details li strong {
  color: var(--navy) !important;
}
html.dark-mode .upd-hero p.lead {
  color: rgba(232,228,220,0.72) !important;
}
html.dark-mode .upd-btn-2 {
  color: #6aaf94 !important;
  border-color: rgba(106,175,148,0.34) !important;
  background: rgba(106,175,148,0.08) !important;
}
html.dark-mode .upd-btn-2:hover {
  background: rgba(106,175,148,0.14) !important;
}
html.dark-mode .upd-timeline::before {
  background: rgba(106,175,148,0.18) !important;
}
html.dark-mode .upd-entry {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 18px 36px rgba(0,0,0,0.22) !important;
}
html.dark-mode .upd-entry::before {
  background: #4d9478 !important;
  border-color: #1a1e24 !important;
  box-shadow: 0 0 0 6px rgba(106,175,148,0.06) !important;
}
html.dark-mode .upd-ver {
  color: #6aaf94 !important;
  background: rgba(106,175,148,0.12) !important;
}
html.dark-mode .upd-date,
html.dark-mode .upd-more-label,
html.dark-mode .upd-shot figcaption,
html.dark-mode .upd-note {
  color: rgba(232,228,220,0.52) !important;
}
html.dark-mode .upd-lead {
  color: rgba(232,228,220,0.82) !important;
}
html.dark-mode .upd-details li {
  color: rgba(232,228,220,0.68) !important;
}
html.dark-mode .upd-details li::before {
  color: rgba(106,175,148,0.72) !important;
}
html.dark-mode .upd-shot {
  background: rgba(232,228,220,0.04) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .upd-cta {
  background: #10151b !important;
}
html.dark-mode .upd-cta a {
  background: #286a4d !important;
  color: #fff !important;
}

/* §32-4. Blocs éditoriaux récurrents */
html.dark-mode body.simplified section[data-depth="mechanism"] {
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .article-synthesis {
  background: rgba(45,106,79,0.10) !important;
  border-color: rgba(106,175,148,0.24) !important;
}
html.dark-mode .article-synthesis h2 {
  color: #e8e4dc !important;
}
html.dark-mode .reading-guide {
  background: #1e2128 !important;
  border-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .reading-guide-label,
html.dark-mode .reading-guide-item span {
  color: #e8e4dc !important;
}
html.dark-mode .reading-guide-item {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .reading-guide-item p {
  color: rgba(232,228,220,0.65) !important;
}
html.dark-mode .article-meta-tag {
  background: rgba(106,175,148,0.12) !important;
  border-color: rgba(106,175,148,0.24) !important;
  color: rgba(232,228,220,0.72) !important;
}
html.dark-mode .article-meta-tag:hover {
  background: rgba(106,175,148,0.18) !important;
  border-color: rgba(106,175,148,0.32) !important;
}
html.dark-mode .article-meta-sep {
  background: rgba(232,228,220,0.24) !important;
}
html.dark-mode .target-block {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.20) !important;
  color: rgba(232,228,220,0.72) !important;
}
html.dark-mode .target-block strong {
  color: #e8e4dc !important;
}
html.dark-mode .chiffres-cles {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.22) !important;
}
html.dark-mode .box-info {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.22) !important;
}
html.dark-mode .related-title {
  color: rgba(232,228,220,0.55) !important;
}

/* §32-5. Sémantique de preuves et callouts */
html.dark-mode .callout.established,
html.dark-mode .callout.green,
html.dark-mode .proof-badge.established,
html.dark-mode .proof-badge.green,
html.dark-mode .proof-badge.proof-badge--green,
html.dark-mode .proof-badge--green,
html.dark-mode .hero-badge.green {
  background: rgba(45,106,79,0.12) !important;
  border-color: rgba(106,175,148,0.28) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .callout.warning,
html.dark-mode .callout-box.warning,
html.dark-mode .proof-badge.warning,
html.dark-mode .proof-badge.orange,
html.dark-mode .proof-badge.proof-badge--orange,
html.dark-mode .proof-badge--orange {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.26) !important;
  color: #f6c56b !important;
}
html.dark-mode .callout.speculative,
html.dark-mode .proof-badge.speculation,
html.dark-mode .proof-badge.red,
html.dark-mode .proof-badge.negative,
html.dark-mode .proof-badge.proof-badge--red,
html.dark-mode .proof-badge--red,
html.dark-mode .result-card.negative {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(248,113,113,0.24) !important;
  color: #fca5a5 !important;
}
html.dark-mode .result-dot.negative {
  background: #f87171 !important;
  box-shadow: 0 0 0 3px rgba(248,113,113,0.16) !important;
}
html.dark-mode .epistemic-badge.established,
html.dark-mode .epistemic-badge.hypothesis,
html.dark-mode .ep-label.speculation,
html.dark-mode .signal.hypothesis,
html.dark-mode .signal.speculation {
  border-color: rgba(255,255,255,0.14) !important;
}
html.dark-mode .epistemic-badge.hypothesis,
html.dark-mode .proof-badge.hypothesis,
html.dark-mode .signal.hypothesis {
  background: rgba(245,158,11,0.10) !important;
  color: #f6c56b !important;
}
html.dark-mode .ep-label.speculation,
html.dark-mode .proof-badge.speculation,
html.dark-mode .signal.speculation {
  background: rgba(220,38,38,0.10) !important;
  color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════════
   PHASE 33 — Couverture des classes recurrentes 28/06/2026
   Batch prudent : variantes homogènes, sans retoucher les CTA déjà contrastés.
   ══════════════════════════════════════════════════ */

/* §33-1. Cartouches et micro-CTA */
html.dark-mode .micro-cta,
html.dark-mode .inline-cta,
html.dark-mode .cta-inline {
  background: rgba(45,106,79,0.10) !important;
  border-color: rgba(106,175,148,0.22) !important;
  color: rgba(232,228,220,0.74) !important;
}
html.dark-mode .micro-cta:hover {
  background: rgba(45,106,79,0.14) !important;
}
html.dark-mode .micro-cta a,
html.dark-mode .inline-cta a,
html.dark-mode .cta-inline a {
  color: #8fd0b5 !important;
}
html.dark-mode .micro-cta-text strong {
  color: #e8e4dc !important;
}
html.dark-mode .micro-cta-text span,
html.dark-mode .micro-cta p {
  color: rgba(232,228,220,0.68) !important;
}

/* §33-2. Glossaire et tags */
html.dark-mode .glossaire-accordion .glossaire-bilingue {
  background: rgba(232,228,220,0.04) !important;
  border-color: rgba(106,175,148,0.18) !important;
}
html.dark-mode .article-meta .tag,
html.dark-mode .audience-strip .tag,
html.dark-mode .meta .tag,
html.dark-mode .tag-pill {
  background: rgba(106,175,148,0.12) !important;
  border-color: rgba(106,175,148,0.24) !important;
  color: #8fd0b5 !important;
}

/* §33-3. Alerte / prudence */
html.dark-mode .box-prudence,
html.dark-mode .alert-box,
html.dark-mode .warning-box {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.24) !important;
}
html.dark-mode .box-prudence .article-box-title,
html.dark-mode .alert-box strong,
html.dark-mode .alert-box .alert-title,
html.dark-mode .warning-box strong,
html.dark-mode .warning-box-title {
  color: #f6c56b !important;
}

/* §33-4. Etat selectionne et progression */
html.dark-mode .related-card.is-selected {
  border-color: rgba(106,175,148,0.40) !important;
  box-shadow: 0 0 0 1px rgba(106,175,148,0.18), 0 10px 24px rgba(0,0,0,0.24) !important;
  outline: none !important;
}
html.dark-mode .reading-progress-bar,
html.dark-mode #reading-progress-bar {
  background: linear-gradient(90deg, #6aaf94, #8fd0b5) !important;
}

/* §33-5. Guides et tableaux */
html.dark-mode .pull-quote {
  background: rgba(106,175,148,0.10) !important;
  border-left-color: rgba(106,175,148,0.60) !important;
  color: #d4cfc6 !important;
}
html.dark-mode .table-wrap {
  background: #21262e !important;
  border-color: rgba(255,255,255,0.10) !important;
}
html.dark-mode .table-wrap th {
  background: #252a32 !important;
  color: #e8e4dc !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .table-wrap td {
  color: rgba(232,228,220,0.72) !important;
  border-color: rgba(255,255,255,0.08) !important;
}
html.dark-mode .table-wrap tr:hover td {
  background: rgba(106,175,148,0.08) !important;
}

/* §33-6. Badges visuels et etats emergents */
html.dark-mode .hero .pill .dot,
html.dark-mode .hero-feat .eyebrow .dot,
html.dark-mode .hs-badge .dot {
  background: radial-gradient(circle at 30% 30%, rgba(143,208,181,0.95), rgba(106,175,148,0.68)) !important;
  box-shadow: 0 0 0 3px rgba(106,175,148,0.14) !important;
}
html.dark-mode .callout.emerging,
html.dark-mode .epistemic-card.emerging,
html.dark-mode .proof-badge.emerging {
  background: rgba(245,158,11,0.10) !important;
  border-color: rgba(245,158,11,0.22) !important;
  color: #f6c56b !important;
}
html.dark-mode .epistemic-box li.emerging::before {
  background: #f6c56b !important;
}

/* §33-7. Garde-fou contre la cascade des badges hypotheses */
html.dark-mode .proof-badge.proof-badge-tres-faible.hypothesis {
  background: rgba(232,228,220,0.08) !important;
  color: rgba(232,228,220,0.72) !important;
  border-color: rgba(232,228,220,0.14) !important;
}

/* ══════════════════════════════════════════════════
   PHASE 34 — Dette faible risque 28/06/2026
   Badges, cartes NutriFact et footer guides.
   ══════════════════════════════════════════════════ */

/* §34-1. Skip buttons des pages fonctionnalités */
html.dark-mode .skip {
  background: rgba(232,228,220,0.10) !important;
  border-color: rgba(255,255,255,0.12) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.28) !important;
}
html.dark-mode .skip:focus {
  outline: 1px solid rgba(106,175,148,0.45) !important;
}

/* §34-2. Red flags guides */
html.dark-mode .g-redflags-box p.footer-note {
  border-color: rgba(252,165,165,0.20) !important;
}

/* §34-3. Badges fiches */
html.dark-mode .fiche-card-badge {
  background: rgba(106,175,148,0.12) !important;
  color: #86efac !important;
}
html.dark-mode .fiche-card-badge.badge-covid {
  background: rgba(190,24,93,0.16) !important;
  color: #f9a8d4 !important;
}
html.dark-mode .fiche-card-badge.badge-dysautonomie {
  background: rgba(15,118,110,0.16) !important;
  color: #5eead4 !important;
}
html.dark-mode .fiche-card-badge.badge-immuno {
  background: rgba(109,40,217,0.16) !important;
  color: #c4b5fd !important;
}
html.dark-mode .fiche-card-badge.badge-metabolisme {
  background: rgba(6,95,70,0.16) !important;
  color: #6ee7b7 !important;
}
html.dark-mode .fiche-card-badge.badge-neuro {
  background: rgba(55,48,163,0.16) !important;
  color: #a5b4fc !important;
}
html.dark-mode .fiche-card-badge.badge-sfc {
  background: rgba(180,83,9,0.16) !important;
  color: #fdba74 !important;
}

/* §34-3b. Callout NutriFact (hub fiches) */
html.dark-mode .fiches-nutrifact-callout {
  background: linear-gradient(135deg,rgba(106,175,148,0.08),rgba(110,135,125,0.10)) !important;
  border-color: rgba(255,255,255,0.14) !important;
}
html.dark-mode .fiches-nutrifact-callout p {
  color: #e8e4dc !important;
}
html.dark-mode .fiches-nutrifact-callout p.fiches-nutrifact-sub {
  color: rgba(232,228,220,0.62) !important;
}

/* §34-4. Cartes épistémiques NutriFact */
html.dark-mode .ep-card-main {
  background: rgba(99,132,184,0.16) !important;
  border-color: rgba(167,196,238,0.30) !important;
}
html.dark-mode .ep-card-badge {
  border-color: rgba(255,255,255,0.16) !important;
}

/* PHASE 35 — Dette faible risque 28/06/2026 */
/* §35-1. Hubs éditoriaux */
html.dark-mode .hub-feature,
html.dark-mode .hub-mech {
  background: rgba(45,106,79,0.08) !important;
}
html.dark-mode .hub-tag {
  background: rgba(106,175,148,0.12) !important;
  color: #8fd0b5 !important;
}
html.dark-mode a.hub-tag:hover {
  background: rgba(106,175,148,0.18) !important;
}
html.dark-mode .hub-key-points li::before,
html.dark-mode .hub-step::before {
  background: #6aaf94 !important;
}
html.dark-mode .hub-articles-card {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.12) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.28) !important;
}
html.dark-mode .hub-cta-card {
  background: linear-gradient(135deg, #224738 0%, #286a4d 100%) !important;
}
html.dark-mode .hub-cta-btn {
  background: rgba(232,228,220,0.96) !important;
  color: #1f513b !important;
}
html.dark-mode .hub-primary-action {
  background: #286a4d !important;
}
html.dark-mode .hub-primary-action:hover {
  background: #255640 !important;
}
html.dark-mode .hub-secondary-action {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(106,175,148,0.24) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .hub-secondary-action:hover {
  background: rgba(106,175,148,0.10) !important;
  border-color: rgba(106,175,148,0.34) !important;
}

/* §35-2. Guides publics */
html.dark-mode .guide-cover {
  background: #141820 !important;
}
html.dark-mode .g-hero-badge {
  background: rgba(106,175,148,0.12) !important;
  border-color: rgba(106,175,148,0.24) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .g-btn-primary {
  background: #286a4d !important;
  box-shadow: 0 8px 20px rgba(0,0,0,0.28) !important;
}
html.dark-mode .g-btn-primary:hover {
  background: #255640 !important;
}
html.dark-mode .g-nav-float-btn {
  background: #252a32 !important;
  border-color: rgba(106,175,148,0.24) !important;
  box-shadow: 0 4px 14px rgba(0,0,0,0.30) !important;
  color: rgba(232,228,220,0.65) !important;
}
html.dark-mode .g-nav-float-btn:hover {
  background: rgba(106,175,148,0.14) !important;
  color: #8fd0b5 !important;
}

/* PHASE 36 — Familles fermées 28/06/2026 */
/* §36-1. Fiches : CTA liés */
html.dark-mode .related-cta {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.20) !important;
}
html.dark-mode .related-cta-text strong {
  color: #e8e4dc !important;
}
html.dark-mode .related-cta-btn {
  background: #286a4d !important;
  color: #e8e4dc !important;
}
html.dark-mode .related-cta-btn:hover {
  background: #255640 !important;
}

/* §36-2. Guides publics : contrôles de dépliage / sources */
html.dark-mode .marker-expand {
  background: transparent !important;
  border-color: transparent !important;
  color: #8fd0b5 !important;
}
html.dark-mode .marker-expand:hover {
  color: #a7d9c6 !important;
}
html.dark-mode .sources-toggle-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(106,175,148,0.24) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .sources-toggle-btn:hover {
  background: rgba(106,175,148,0.10) !important;
  border-color: rgba(106,175,148,0.34) !important;
}

/* §36-3. Guides : encarts à propos et badges méthodologiques */
html.dark-mode .about-stat {
  background: #252a32 !important;
  border-color: rgba(232,228,220,0.12) !important;
}
html.dark-mode .b-ongoing {
  background: rgba(124,58,237,0.16) !important;
  color: #c4b5fd !important;
}
html.dark-mode .b-spec {
  background: rgba(107,122,141,0.20) !important;
  color: #cbd5e1 !important;
}

/* PHASE 37 — Familles fermées 28/06/2026 */
/* §37-1. Badges de synthèse dans les articles comparatifs */
html.dark-mode .badge-good,
html.dark-mode .badge-solid {
  background: rgba(45,106,79,0.14) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .badge-poor {
  background: rgba(220,38,38,0.12) !important;
  color: #fca5a5 !important;
}

/* §37-2. Tables biomarqueurs */
html.dark-mode .bio-table th {
  background: #244b3b !important;
  color: #e8e4dc !important;
}
html.dark-mode .bio-table tr:nth-child(even) td {
  background: rgba(45,106,79,0.08) !important;
}

/* §37-3. Sémantique de preuve fermée */
html.dark-mode .proof-badge.consensus {
  background: rgba(45,106,79,0.12) !important;
  border-color: rgba(106,175,148,0.28) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .proof-badge.probable,
html.dark-mode .epistemic-box li.probable::before {
  background: rgba(245,158,11,0.12) !important;
  border-color: rgba(245,158,11,0.26) !important;
  color: #f6c56b !important;
}

/* PHASE 38 — Cloture des familles fermées 28/06/2026 */
/* §38-1. Boutons techniques homogènes */
html.dark-mode .btn-accent,
html.dark-mode .btn-forest,
html.dark-mode .app-bridge-btn {
  background: #286a4d !important;
  color: #e8e4dc !important;
}
html.dark-mode .btn-accent,
html.dark-mode .btn-forest {
  box-shadow: 0 8px 22px rgba(0,0,0,0.24) !important;
}
html.dark-mode .btn-accent:hover,
html.dark-mode .btn-forest:hover,
html.dark-mode .app-bridge-btn:hover {
  background: #255640 !important;
}

/* §38-2. Badges hero et rubans */
html.dark-mode .hero-badge:not(.green):not(.blue):not(.amber):not(.purple) {
  background: rgba(45,106,79,0.12) !important;
  border-color: rgba(106,175,148,0.24) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .hero-badge:not(.green):not(.blue):not(.amber):not(.purple)::before {
  background: #8fd0b5 !important;
}
html.dark-mode .highlight-strip {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.20) !important;
  box-shadow: 0 10px 26px rgba(0,0,0,0.18) !important;
}
html.dark-mode .fiche-meta-tag {
  background: rgba(106,175,148,0.12) !important;
  color: #8fd0b5 !important;
}

/* §38-3. Guides : cover / about / tabs / cross-sell */
html.dark-mode .cover-badge::before {
  background: rgba(106,175,148,0.72) !important;
}
html.dark-mode .cover-stat {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(106,175,148,0.18) !important;
}
html.dark-mode .cover-pill.light,
html.dark-mode .cover-meta-pill.light {
  background: rgba(106,175,148,0.12) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .guide-about {
  background: #1a1e24 !important;
}
html.dark-mode .guide-tabs {
  background: #1e242c !important;
  border-color: rgba(255,255,255,0.08) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.22) !important;
}
html.dark-mode .crosssell-section {
  background: #1a1e24 !important;
}
html.dark-mode .crosssell-card-teaser:hover {
  border-color: rgba(106,175,148,0.28) !important;
}
html.dark-mode .pro-badge-soon {
  background: rgba(122,133,149,0.20) !important;
  color: rgba(232,228,220,0.62) !important;
}
html.dark-mode .g-intro-label {
  background: rgba(106,175,148,0.18) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .g-hero-visual {
  box-shadow: 0 28px 56px rgba(0,0,0,0.30), 0 8px 20px rgba(0,0,0,0.18) !important;
}

/* §38-4. Glossaires et encadrés */
html.dark-mode .glossary-toggle {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(106,175,148,0.18) !important;
  color: #e8e4dc !important;
}
html.dark-mode .glossary-toggle:hover {
  background: rgba(106,175,148,0.10) !important;
}
html.dark-mode .callout-box.danger,
html.dark-mode .proof-badge.danger {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(248,113,113,0.24) !important;
  color: #fca5a5 !important;
}
html.dark-mode .encadre-key {
  background: rgba(45,106,79,0.08) !important;
}
html.dark-mode .encadre-key strong {
  color: #8fd0b5 !important;
}

/* §38-5. Tables et états de preuve cohérents */
html.dark-mode .evidence-table th {
  background: #244b3b !important;
  color: #e8e4dc !important;
}
html.dark-mode .evidence-table tr:hover td {
  background: rgba(45,106,79,0.08) !important;
}
html.dark-mode .proof-badge.is-emerging {
  background: rgba(245,158,11,0.12) !important;
  color: #f6c56b !important;
}

/* PHASE 39 — Dernier lot mécanique 28/06/2026 */
/* §39-1. Guides et strips */
html.dark-mode .g-after-label {
  background: rgba(106,175,148,0.14) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .nf-strip {
  background: rgba(255,255,255,0.08) !important;
}
html.dark-mode .rule-box {
  background: rgba(245,158,11,0.10) !important;
}
html.dark-mode .b-def {
  background: rgba(59,130,246,0.14) !important;
  color: #93c5fd !important;
}

/* §39-2. Éléments de structure et séparation */
html.dark-mode .hero-hr {
  background: #6aaf94 !important;
  border-color: transparent !important;
}
html.dark-mode .key-point {
  background: rgba(45,106,79,0.08) !important;
  border-color: rgba(106,175,148,0.24) !important;
}

/* §39-3. Filtres et boutons secondaires */
html.dark-mode .ann-chip {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(232,228,220,0.12) !important;
  color: rgba(232,228,220,0.68) !important;
}
html.dark-mode .ann-chip:hover {
  background: rgba(106,175,148,0.10) !important;
  border-color: rgba(106,175,148,0.26) !important;
  color: #e8e4dc !important;
}
html.dark-mode .ann-chip.active {
  background: rgba(106,175,148,0.16) !important;
  border-color: rgba(106,175,148,0.36) !important;
  color: #8fd0b5 !important;
}
html.dark-mode .btn-ghost {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(232,228,220,0.12) !important;
  color: #e8e4dc !important;
}
html.dark-mode .btn-ghost:hover {
  background: rgba(106,175,148,0.10) !important;
}
html.dark-mode .btn-submit {
  background: #286a4d !important;
  color: #e8e4dc !important;
}
html.dark-mode .btn-submit:hover {
  background: #255640 !important;
}

/* PHASE 42 — Lot priorité 3 (9 classes, 3 fichiers chacune) */

/* §42-1. Hub card tag "à venir" */
html.dark-mode .hub-card-tag.coming {
  background: rgba(234,88,12,0.15) !important;
  color: #fb923c !important;
}

/* §42-2. Encadré data (variantes vert / violet) */
html.dark-mode .encadre-data {
  background: rgba(255,255,255,0.05) !important;
  border-left-color: rgba(232,228,220,0.22) !important;
}

/* §42-3. Glossaire grid (utilise --paper2, déjà surchargé — règle explicite pour coverage) */
html.dark-mode .glossaire-grid {
  background: var(--paper2) !important;
}

/* §42-4. Image hero (assombrir légèrement sur fond sombre) */
html.dark-mode .hero-img {
  filter: brightness(0.87) !important;
}

/* §42-5. .moderate — dot risque (orange) + badge preuve (vert) */
html.dark-mode .risk-dot.moderate {
  background: #c2410c !important;
}
html.dark-mode .proof-badge.moderate {
  background: rgba(45,106,79,0.12) !important;
  border-color: rgba(45,106,79,0.30) !important;
  color: #6ee7b7 !important;
}

/* §42-6. Badge de preuve modéré (vert forêt) */
html.dark-mode .proof-badge-modere {
  background: rgba(45,106,79,0.16) !important;
  color: #6ee7b7 !important;
}

/* §42-7. Badge revue systématique / méta-analyse (bleu) */
html.dark-mode .proof-badge.revue {
  background: rgba(59,130,246,0.12) !important;
  color: #93c5fd !important;
}

/* §42-8. Sources section (utilise --color-border / --color-text-muted — règle explicite pour coverage) */
html.dark-mode .sources {
  border-color: var(--color-border) !important;
  color: var(--color-text-muted) !important;
}

/* §42-9. Callout warn (--warn et --warn-dim non définis en dark — override explicite) */
html.dark-mode .callout.warn {
  background: rgba(245,158,11,0.10) !important;
  border-left-color: rgba(245,158,11,0.45) !important;
}
html.dark-mode .callout.warn strong {
  color: #fcd34d !important;
}

/* PHASE 41 — Lot priorité 2 (article-figure, info, btn-app, proof-badge-faible) */

/* §41-1. Article figure — image et légende */
html.dark-mode .article-figure {
  border-color: rgba(232,228,220,0.10) !important;
}
html.dark-mode .article-figure img {
  border-color: rgba(232,228,220,0.10) !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.30) !important;
}
html.dark-mode .article-figure figcaption {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(232,228,220,0.10) !important;
}

/* §41-2. Callout / key-number info (bleu) */
html.dark-mode .callout-box.info,
html.dark-mode .callout.info {
  background: rgba(37,99,235,0.10) !important;
  border-color: rgba(59,130,246,0.40) !important;
}
html.dark-mode .key-number-card.info {
  background: rgba(59,130,246,0.10) !important;
  border-color: rgba(59,130,246,0.30) !important;
}
html.dark-mode .key-number-card.info .key-number-value {
  color: #93c5fd !important;
}

/* §41-3. Bouton app (CTA vert) */
html.dark-mode .app-bridge .btn-app,
html.dark-mode .app-bridge a.btn-app {
  background: #286a4d !important;
  color: #e8e4dc !important;
}
html.dark-mode .app-bridge .btn-app:hover,
html.dark-mode .app-bridge a.btn-app:hover {
  background: #255640 !important;
}

/* §41-4. Badge de preuve faible (orange ambré, variante rouge selon article) */
html.dark-mode .proof-badge-faible {
  background: rgba(224,123,42,0.16) !important;
  border-color: rgba(224,123,42,0.30) !important;
  color: #fbbf6a !important;
}

/* PHASE 40 — États d'erreur */
/* §40-1. Formulaire contact / feedback erreur */
html.dark-mode .form-feedback.error {
  background: rgba(220,38,38,0.12) !important;
  border-color: rgba(220,38,38,0.28) !important;
  color: #fca5a5 !important;
}

/* §40-2. Input email-gate en état erreur */
html.dark-mode .email-gate-input.error {
  border-color: rgba(220,38,38,0.65) !important;
}

/* §40-3. Key-number card état erreur */
html.dark-mode .key-number-card.error {
  background: rgba(220,38,38,0.10) !important;
  border-color: rgba(220,38,38,0.30) !important;
}
html.dark-mode .key-number-card.error .key-number-value {
  color: #fca5a5 !important;
}

/* ══════════════════════════════════════════════════════════════════════
   PHASE 19 — Priorité 4 (S878) — 45 classes non couvertes
   ══════════════════════════════════════════════════════════════════════ */

/* §43. .hero-img — images hero articles/fiches */
html.dark-mode .hero-img { filter: brightness(0.85) !important; }

/* §44. Badges colorés textuels */
html.dark-mode .badge-blue     { background: rgba(30,64,175,0.20) !important; color: #93c5fd !important; }
html.dark-mode .badge-green    { background: rgba(5,150,105,0.15) !important; color: #6ee7b7 !important; }
html.dark-mode .badge-ok       { background: rgba(22,163,74,0.15) !important; color: #86efac !important; }
html.dark-mode .badge-probable { background: rgba(59,130,246,0.15) !important; color: #93c5fd !important; }

/* §45. .btn-secondary */
html.dark-mode .btn-secondary       { background: #286a4d !important; color: #e8e4dc !important; }
html.dark-mode .btn-secondary:hover { background: #1b4332 !important; }

/* §46. .cover-meta-pill */
html.dark-mode .cover-meta-pill { background: rgba(45,106,79,0.30) !important; color: #e8e4dc !important; }

/* §47. .cta-bloc / .cta-section */
html.dark-mode .cta-bloc,
html.dark-mode .cta-section    { background: rgba(45,106,79,0.10) !important; border-color: rgba(45,106,79,0.22) !important; }
html.dark-mode .cta-section.cta-section--feature-final {
  background: transparent !important;
  border-color: transparent !important;
}
html.dark-mode .cta-section h2 { color: #e8e4dc !important; }
html.dark-mode .cta-section p  { color: rgba(232,228,220,0.65) !important; }
html.dark-mode .cta-section--feature-final a[href*="/fonctionnalites/nouveautes/"] {
  color: #6aaf94 !important;
}

/* §48. .dc-narr / .dc-obs / .dc-prospe / .dc-solid — points timeline clinique */
html.dark-mode .vt-dot.dc-narr   { --vt-dot-color: #6b6860 !important; }
html.dark-mode .vt-dot.dc-obs    { --vt-dot-color: #c4841e !important; }
html.dark-mode .vt-dot.dc-prospe { --vt-dot-color: #23b285 !important; }
html.dark-mode .vt-dot.dc-solid  { --vt-dot-color: #4a8a1a !important; }

/* §49. .divider */
html.dark-mode .divider { border-top-color: rgba(232,228,220,0.10) !important; }

/* §50. .edition-accordeon / .edition-body / .edition-pill / .edition-accroche */
html.dark-mode .edition-accordeon { background: #1e2329 !important; border-color: rgba(45,106,79,0.22) !important; }
html.dark-mode .edition-body      { background: #252a32 !important; }
html.dark-mode .edition-pill      { background: #1b4332 !important; color: #e8e4dc !important; }
/* color:#444 en dur (jamais couvert) -> contraste très faible en dark mode, trouvé 04/07/2026 (capture Rémy) */
html.dark-mode .edition-accroche  { color: rgba(232,228,220,0.55) !important; }

/* §51. .goto-conclusion / .goto-conclusion-btn */
html.dark-mode .goto-conclusion,
html.dark-mode .goto-conclusion-btn { color: #6aaf94 !important; }

/* §52. .gtab */
html.dark-mode .gtab        { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .gtab:hover  { color: #e8e4dc !important; }
html.dark-mode .gtab.active { color: #6aaf94 !important; border-bottom-color: #6aaf94 !important; }

/* §53. .guide-section */
html.dark-mode .guide-section   { background: #1e2329 !important; border-color: rgba(232,228,220,0.08) !important; }
html.dark-mode .guide-section p { color: rgba(232,228,220,0.75) !important; }

/* §54. .hero-split / .hero-split__visual */
html.dark-mode .hero-split                     { background: #1a2028 !important; }
html.dark-mode .hero-split h1 mark             { background-image: linear-gradient(135deg,#6aaf94 0%,#52a87a 100%) !important; }
html.dark-mode .hero-split__visual::before     { background: radial-gradient(circle,rgba(106,175,148,0.10) 0%,transparent 70%) !important; }

/* §55. .hs-av / .hs-trust */
html.dark-mode .hs-av                { border-color: #1a2028 !important; }
html.dark-mode .hs-trust             { color: rgba(232,228,220,0.55) !important; }
html.dark-mode .hs-trust span::before { background: #6aaf94 !important; }

/* §56. .layer0-box */
html.dark-mode .layer0-box { background: rgba(124,58,237,0.10) !important; border-color: rgba(124,58,237,0.25) !important; color: #c4b5fd !important; }

/* §57. .mol-table */
html.dark-mode .mol-table thead tr               { background: #286a4d !important; }
html.dark-mode .mol-table th                     { color: #e8e4dc !important; }
html.dark-mode .mol-table td                     { color: rgba(232,228,220,0.80) !important; border-color: rgba(232,228,220,0.10) !important; }
html.dark-mode .mol-table tr:nth-child(even) td  { background: rgba(232,228,220,0.04) !important; }

/* §58. .preliminary */
html.dark-mode .proof-badge.preliminary { background: rgba(220,38,38,0.10) !important; color: #fca5a5 !important; border-color: rgba(220,38,38,0.22) !important; }

/* §59. .privacy-inner */
html.dark-mode .privacy-inner    { background: #1e2329 !important; }
html.dark-mode .privacy-inner>p  { color: rgba(232,228,220,0.70) !important; }

/* §60. .proof-badge--* (double tiret) */
html.dark-mode .proof-badge--consensus { background: rgba(107,33,168,0.15) !important; color: #d8b4fe !important; }
html.dark-mode .proof-badge--invitro   { background: rgba(37,99,235,0.12) !important; color: #93c5fd !important; }
html.dark-mode .proof-badge--meta      { background: rgba(5,150,105,0.12) !important; color: #6ee7b7 !important; }
html.dark-mode .proof-badge--observ    { background: rgba(192,86,33,0.15) !important; color: #fed7aa !important; }

/* §61. .proof-badge-green / -orange / -red (tiret simple) */
html.dark-mode .proof-badge-green  { background: rgba(45,106,79,0.15) !important; color: #6aaf94 !important; }
html.dark-mode .proof-badge-orange { background: rgba(192,86,33,0.15) !important; color: #f6ad7c !important; }
html.dark-mode .proof-badge-red    { background: rgba(185,28,28,0.15) !important; color: #fca5a5 !important; }

/* §62. .published */
html.dark-mode .hub-card-tag.published { background: rgba(45,106,79,0.18) !important; color: #6aaf94 !important; }

/* §63. .scroll-top-btn (distinct de .scroll-top / .btn-nav-scroll-top déjà couverts) */
html.dark-mode .scroll-top-btn { background: #2d333b !important; color: #e8e4dc !important; box-shadow: 0 4px 12px rgba(0,0,0,0.40) !important; }

/* §64. .solid — .epistemic-card.solid */
html.dark-mode .epistemic-card.solid                    { background: rgba(45,106,79,0.12) !important; }
html.dark-mode .epistemic-card.solid .epistemic-card-label { color: #6aaf94 !important; }

/* §65. .spinner */
html.dark-mode .spinner { border-color: rgba(232,228,220,0.15) !important; border-top-color: #6aaf94 !important; }

/* §66. .step-num */
html.dark-mode .step-num { background: rgba(45,106,79,0.15) !important; color: #6aaf94 !important; }

/* §67. .synthese-rapide */
html.dark-mode .synthese-rapide { background: linear-gradient(135deg,rgba(45,106,79,0.10),rgba(45,106,79,0.06)) !important; border-color: rgba(45,106,79,0.22) !important; }

/* §68. .synthesis-icon */
html.dark-mode .synthesis-icon { background: rgba(45,106,79,0.12) !important; color: #e8e4dc !important; }

/* §69. .toggle-dot */
html.dark-mode .reading-mode-toggle .toggle-dot                      { border-color: #6aaf94 !important; }
html.dark-mode .reading-mode-toggle[aria-checked="true"] .toggle-dot,
html.dark-mode .reading-mode-toggle[aria-pressed="true"] .toggle-dot { background: #6aaf94 !important; }

/* §70. .uncertain */
html.dark-mode .epistemic-box li.uncertain::before { background: #6b7280 !important; }
html.dark-mode .synthesis-card.uncertain strong    { color: #fbbf24 !important; }
html.dark-mode .epistemic-item.uncertain strong    { color: #fbbf24 !important; }

/* §43b. .hero-img — correctif VISUAL_PROP (filter seul ignoré par audit) */
html.dark-mode .hero-img { filter: brightness(0.85) !important; box-shadow: none !important; }

/* §43c. supprimé — désaturation hero-img--dark était une fausse piste.
   La glow orange est intentionnelle dans l'image. Fond uniforme §71 suffit. */

/* §49b. .divider — border-color (border-top-color ignoré par audit) */
html.dark-mode .divider { border-color: rgba(232,228,220,0.10) !important; }

/* §51b. .goto-conclusion / .goto-conclusion-btn — background explicit */
html.dark-mode .goto-conclusion,
html.dark-mode .goto-conclusion-btn { background: transparent !important; color: #6aaf94 !important; }

/* §52b. .gtab — background explicit */
html.dark-mode .gtab        { background: transparent !important; color: rgba(232,228,220,0.55) !important; }
html.dark-mode .gtab:hover  { color: #e8e4dc !important; }
html.dark-mode .gtab.active { color: #6aaf94 !important; border-bottom-color: #6aaf94 !important; }

/* ── S879 — Fix jonction bas-hero + classes post-hero S528/S531 ── */

/* §71. hero--dark : gradient original finissait en #271308 brun chaud (jonction visible
   avec body #1a1e24). Et #1a2240 créait un bleu-noir trop prononcé côté texte.
   Solution : fond uniforme = même couleur que body → zéro jonction, zéro bleu. */
html.dark-mode .hero--dark {
  background: #1a1e24 !important;
}

/* §72. audience-inner — bandeau pathologies : gradient terracotta + border warm */
html.dark-mode .audience-inner {
  background: linear-gradient(135deg, rgba(201,122,97,.08), rgba(150,150,200,.06)) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* §73. newsletter-inner — bloc newsletter */
html.dark-mode .newsletter-inner {
  background: linear-gradient(135deg, rgba(45,106,79,.10), rgba(110,135,125,.08)) !important;
  border-color: rgba(255,255,255,.08) !important;
  box-shadow: 0 2px 16px rgba(0,0,0,.25) !important;
}

/* §74. newsletter-input — champ email : rgba(255,255,255,.80) = quasi blanc → sombre */
html.dark-mode .newsletter-input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e8e4dc !important;
  outline: none !important;
}
html.dark-mode .newsletter-input:focus {
  border-color: rgba(110,135,125,.50) !important;
  box-shadow: 0 0 0 3px rgba(110,135,125,.12) !important;
  outline: none !important;
}

/* §75. fiche-card-badge-new — badge "Nouvelle" amber sur fiches/index.html */
html.dark-mode .fiche-card-badge-new {
  background: rgba(180,83,9,.20) !important;
  color: #fdba74 !important;
}

/* ════════════════════════════════════════════════════════════════
   §76. articles/index.html — badges niveau, pagination, filtres
   (fonds pastel clairs illisibles en dark mode)
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .badge-new {
  background: rgba(237,147,177,.12) !important;
  border-color: rgba(237,147,177,.30) !important;
}
html.dark-mode .lvl-deb  { background: rgba(45,106,79,.15)   !important; }
html.dark-mode .lvl-exp  { background: rgba(124,58,237,.12)  !important; }
html.dark-mode .lvl-int,
html.dark-mode .pnum     { background: rgba(30,64,175,.15)   !important; }
html.dark-mode .reset-filters-btn {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark-mode .parcours-title svg { background: rgba(255,255,255,.05) !important; }
html.dark-mode .theme-modal-num    { background: rgba(255,255,255,.06) !important; }
html.dark-mode .results-bar--stuck { box-shadow: 0 2px 8px rgba(0,0,0,.35) !important; }

/* ════════════════════════════════════════════════════════════════
   §77. guides/G1 — action-nodes, flags, réponse rapide, cover
   (fonds #dcfce7/#ffedd5/#dbeafe/#f3f4f6 → illisibles en dark)
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .dt-node.action-orange {
  background: rgba(249,115,22,.10) !important;
  border-color: #f97316 !important;
}
html.dark-mode .dt-node.action-vert {
  background: rgba(22,163,74,.10) !important;
  border-color: #16a34a !important;
}
html.dark-mode .dt-node.oui {
  background: rgba(22,163,74,.10) !important;
  border-color: #4ade80 !important;
}
html.dark-mode .b-cross      { background: rgba(59,130,246,.15) !important; }
html.dark-mode .b-insuf,
html.dark-mode .flag-limite  { background: rgba(255,255,255,.06) !important; }
html.dark-mode .flag-priority,
html.dark-mode .td-approche  { background: rgba(22,163,74,.12) !important; }
html.dark-mode .cover-part {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.07) !important;
}
html.dark-mode .part-divider { background: rgba(255,255,255,.04) !important; }
html.dark-mode .rr-anchor {
  background: rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .rr-card {
  background: var(--card) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .rr-section {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .redflag-item {
  background: rgba(211,47,47,.08) !important;
  border-color: rgba(211,47,47,.28) !important;
}

/* ════════════════════════════════════════════════════════════════
   §78. praticiens/formation — quiz, cards, inputs, badges résultats
   (rgba(255,255,255,.70-.88) et rgba(6,23,45,.10) → fond blanc/navy)
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .quiz-wrapper,
html.dark-mode #quiz-gate {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 4px 24px rgba(0,0,0,.30) !important;
}
html.dark-mode .quiz-choice,
html.dark-mode .mod-tab,
html.dark-mode .prof-card {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
}
html.dark-mode .mod-card {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow: 0 2px 12px rgba(0,0,0,.25) !important;
}
html.dark-mode .btn-mod {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
}
html.dark-mode .email-gate-input {
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e8e4dc !important;
}
html.dark-mode .proof-track,
html.dark-mode .quiz-prog-bar,
html.dark-mode .quiz-timer-bar  { background: rgba(255,255,255,.10) !important; }
html.dark-mode .quiz-case-banner {
  background: rgba(180,83,9,.12) !important;
  border-color: rgba(180,83,9,.32) !important;
}
html.dark-mode .correct {
  background: rgba(45,106,79,.18) !important;
  border-color: rgba(45,106,79,.55) !important;
}
html.dark-mode .wrong {
  background: rgba(220,38,38,.12) !important;
  border-color: rgba(220,38,38,.45) !important;
}
html.dark-mode .result-badge,
html.dark-mode .sb {
  background: rgba(45,106,79,.12) !important;
  border-color: rgba(45,106,79,.28) !important;
}
html.dark-mode .result-fail-badge {
  background: rgba(180,83,9,.12) !important;
  border-color: rgba(180,83,9,.28) !important;
}
html.dark-mode .commun           { background: rgba(45,106,79,.15)  !important; }
html.dark-mode .metier           { background: rgba(180,83,9,.12)   !important; }
html.dark-mode .formation-footer { background: rgba(45,106,79,.10)  !important; }

/* ════════════════════════════════════════════════════════════════
   §79. guides/G-COVID-SUPPL — badges couleur (fonds pastel purs)
   bs=vert, bp=amber, bc=bleu, bi=gris, br=rose, bo=violet
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .bs { background: rgba(22,163,74,.12)   !important; }
html.dark-mode .bp { background: rgba(245,158,11,.12)  !important; }
html.dark-mode .bc { background: rgba(59,130,246,.13)  !important; }
html.dark-mode .bi { background: rgba(255,255,255,.06) !important; }
html.dark-mode .br { background: rgba(236,72,153,.10)  !important; }
html.dark-mode .bo { background: rgba(124,58,237,.12)  !important; }
html.dark-mode .alert { background: rgba(211,47,47,.10) !important; }
html.dark-mode .ep {
  background:   rgba(255,255,255,.04) !important;
  border-color: rgba(255,255,255,.08) !important;
}

/* ════════════════════════════════════════════════════════════════
   §80. pro/index.html — laptop/desk mockup écrans blancs, cards
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .laptop-screen,
html.dark-mode .phone-screen   { background: #1e2230 !important; }
html.dark-mode .desk-metric-card,
html.dark-mode .desk-chart,
html.dark-mode .desk-patient-card {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .desk-topbar-tab { background: rgba(255,255,255,.06) !important; }
html.dark-mode .split-card,
html.dark-mode .feat-card,
html.dark-mode .highlight-card,
html.dark-mode .prof-tool {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
  box-shadow:   0 2px 12px rgba(0,0,0,.20) !important;
}
html.dark-mode .prof-quote { background: rgba(255,255,255,.04) !important; }

/* ════════════════════════════════════════════════════════════════
   §81. app/index.html — phone/watch mockup, éléments d'écran
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .screen-tab-bar  { background: rgba(20,24,30,.85)    !important; }
html.dark-mode .screen-tab      { background: rgba(255,255,255,.08)  !important; }
html.dark-mode .screen-card {
  background:   rgba(255,255,255,.07) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .screen-mood {
  background:   rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.08) !important;
}
html.dark-mode .wlogo {
  background:   rgba(255,255,255,.08) !important;
  border-color: rgba(255,255,255,.12) !important;
}

/* ════════════════════════════════════════════════════════════════
   §82. praticiens/index.html — cards blanches, form, badges
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .cond-card,
html.dark-mode .step,
html.dark-mode .benefit-card {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.09) !important;
}
html.dark-mode .form-panel {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
  box-shadow:   0 2px 16px rgba(0,0,0,.25) !important;
}
html.dark-mode .form-input {
  background:   rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #e8e4dc !important;
}
html.dark-mode .check-item {
  background:   rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.10) !important;
}
html.dark-mode .prat-badge-certifie {
  background:   rgba(234,179,8,.12) !important;
  border-color: rgba(234,179,8,.30) !important;
}

/* ════════════════════════════════════════════════════════════════
   §83. guides/G2-P — interactions sécurité (rgba 0.04 → trop légers)
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .lss-ok   { background: rgba(22,101,52,.10)  !important; }
html.dark-mode .lss-warn { background: rgba(211,47,47,.10)  !important; }
html.dark-mode .lss-mod  { background: rgba(230,81,0,.10)   !important; }

/* ════════════════════════════════════════════════════════════════
   §84. Lot C — pastels clairs articles individuels
   Couleurs claires hardcodées (#e1f5ee, #dbeafe, #fce4ec, etc.)
   remplacées par rgba dark-native avec teinte d'origine conservée.
   ════════════════════════════════════════════════════════════════ */
/* — vert clair / vert menthe — */
html.dark-mode .callout-proof,
html.dark-mode .data-card,
html.dark-mode .meta-analyse,
html.dark-mode .em,
html.dark-mode .m3,
html.dark-mode .voie-comt,
html.dark-mode .rr-badge      { background: rgba(22,163,74,.12) !important; }
html.dark-mode .hub-chip-green,
html.dark-mode .cover-chip-g  { background: rgba(22,163,74,.12) !important; color: #6ee7b7 !important; }
html.dark-mode .badge-preuve-fort { background: rgba(22,163,74,.10) !important; }
/* — bleu clair — */
html.dark-mode .m1,
html.dark-mode .um             { background: rgba(59,130,246,.13) !important; }
/* — violet / lavande — */
html.dark-mode .gap-card,
html.dark-mode .purple,
html.dark-mode .voie-melatonine { background: rgba(139,92,246,.12) !important; }
html.dark-mode .hub-chip-purple,
html.dark-mode .cover-chip-v   { background: rgba(139,92,246,.12) !important; color: #c4b5fd !important; }
/* — rose / rouge clair — */
html.dark-mode .pm             { background: rgba(220,38,38,.10) !important; }
html.dark-mode .experimentale  { background: rgba(236,72,153,.10) !important; }
/* — jaune / ambre — */
html.dark-mode .badge-orange,
html.dark-mode .observationnelle { background: rgba(245,158,11,.15) !important; color: #fbbf24 !important; }
/* — vert d'eau / teal — */
html.dark-mode .proof-badge--rct { background: rgba(20,184,166,.12) !important; }
/* — gris clair / neutre — */
html.dark-mode .ev-b-off,
html.dark-mode .hub-soon-badge,
html.dark-mode .badge-preuve-faible { background: rgba(255,255,255,.07) !important; color: rgba(232,228,220,.60) !important; }

/* ════════════════════════════════════════════════════════════════
   §85. Lot C — fonds blancs/beige élevés (pages diverses)
   Backgrounds blancs ou semi-blancs → var(--card) ou rgba neutre.
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .assoc-card,
html.dark-mode .intro-card     { background: var(--card) !important; }
html.dark-mode .prv-section    { background: rgba(255,255,255,.04) !important; }
html.dark-mode .os-badge       { background: rgba(255,255,255,.10) !important; }
html.dark-mode .content-card-header { background: rgba(255,255,255,.04) !important; }
html.dark-mode .ask-quote      { background: rgba(255,255,255,.05) !important; }
html.dark-mode .reading-mode   { background: var(--card) !important; }
/* annuaire — sidebar + inputs */
html.dark-mode .annuaire-sidebar { background: var(--card) !important; border-color: rgba(255,255,255,.08) !important; }
html.dark-mode .ann-search input,
html.dark-mode .ann-searchbar-field input,
html.dark-mode .waitlist-form input,
html.dark-mode .waitlist-form select { background: rgba(255,255,255,.06) !important; border-color: rgba(255,255,255,.12) !important; color: #e8e4dc !important; }
html.dark-mode .ann-btn-search  { background: rgba(45,106,79,.85) !important; }
html.dark-mode .leaflet-popup-content-wrapper { box-shadow: 0 4px 16px rgba(0,0,0,.45) !important; }

/* ════════════════════════════════════════════════════════════════
   §86. hero-cta — primary vert + secondary ghost outline en dark
   §45 global écrase .btn-secondary en vert → surcharge spécifique.
   ════════════════════════════════════════════════════════════════ */
html.dark-mode .hero-cta .btn.btn-primary {
  background: #3d7a62 !important;
  color: #fff !important;
}
html.dark-mode .hero-cta .btn.btn-primary:hover {
  background: #286a4d !important;
}
html.dark-mode .hero-cta .btn.btn-secondary {
  background: rgba(255,255,255,.10) !important;
  border: 1.5px solid rgba(255,255,255,.35) !important;
  color: #f5f0e8 !important;
}
html.dark-mode .hero-cta .btn.btn-secondary:hover {
  background: rgba(255,255,255,.18) !important;
}

/* ════════════════════════════════════════════════════════════════
   §87. Couleurs hardcodées inline — overrides dark mode globaux
   Inline styles ont priorité sur les classes CSS normales, mais
   PAS sur les !important de stylesheet (cascade CSS §6.4.2).
   Sélecteurs [style*="color:#XXX"] capturent tous les éléments
   ayant ces hex hardcodés (464 × #286a4d, 371 × #06172D, 19 × #1b4332).
   ════════════════════════════════════════════════════════════════ */

/* vert forêt → vert lisible en dark (#6aaf94) */
html.dark-mode [style*="color:#286a4d"],
html.dark-mode [style*="color: #286a4d"] {
  color: var(--forest) !important;
}

/* vert très sombre → vert lisible en dark */
html.dark-mode [style*="color:#1b4332"],
html.dark-mode [style*="color: #1b4332"] {
  color: var(--forest) !important;
}

/* navy (#06172D) → crème en dark (#e8e4dc) */
html.dark-mode [style*="color:#06172D"],
html.dark-mode [style*="color:#06172d"],
html.dark-mode [style*="color: #06172D"],
html.dark-mode [style*="color: #06172d"] {
  color: var(--navy) !important;
}

/* ════════════════════════════════════════════════════════════════
   PHASE 23 — Audit 27/06/2026 — correctifs résiduels
   Issues non couvertes par §76-§87 confirmées via rapport audit.
   ════════════════════════════════════════════════════════════════ */

/* §88. Inline color:#1a2535 (#copy-btn-brouillard) — valeur absente de §87 */
html.dark-mode [style*="color:#1a2535"],
html.dark-mode [style*="color: #1a2535"] {
  color: rgba(232,228,220,0.85) !important;
}

/* §89. Inline background:#fef9ec (bloc EFSA vitamine-D — absent de §22-3) */
html.dark-mode [style*="background:#fef9ec"],
html.dark-mode [style*="background: #fef9ec"] {
  background: rgba(245,158,11,0.08) !important;
  border-left-color: rgba(245,158,11,0.40) !important;
}
html.dark-mode [style*="background:#fef9ec"] *,
html.dark-mode [style*="background: #fef9ec"] * {
  color: rgba(232,228,220,0.80) !important;
}

/* §90. .wrap > p/h (page 404 — texte rgba(6,23,45,0.6) non overridé en dark) */
html.dark-mode .wrap p,
html.dark-mode .wrap h1,
html.dark-mode .wrap h2,
html.dark-mode .wrap h3 {
  color: rgba(232,228,220,0.80) !important;
}

/* §91. .logo-boussole : vert canonique marque */
html.dark-mode .logo-boussole {
  color: #286a4d !important;
}

/* §92. .share-wa (blanc sur rgb(37,211,102) vert WhatsApp — ratio 1.98)
   Fond conservé, texte basculé navy foncé */
html.dark-mode .share-wa {
  color: #e8e4dc !important;
}

/* §93. .badge-level.badge-pa (blanc sur orange — ratio 2.98) */
html.dark-mode .badge-level.badge-pa {
  color: #e8e4dc !important;
  filter: brightness(0.80) !important;
}

/* §94. .pmid / .pmid-tag standalone (bleu sur bleu translucide — ratio 1.66)
   Extension de §25-2/§25-4 aux sélecteurs non-contextuels */
html.dark-mode .pmid,
html.dark-mode .pmid-tag {
  background: rgba(14,165,233,0.12) !important;
  color: #7dd3fc !important;
  border-color: rgba(14,165,233,0.22) !important;
}

/* §95. .chiffre-value (vert #286a4d hardcodé sur card sombre) */
html.dark-mode .chiffre-value {
  color: #6aaf94 !important;
}

/* §96. .bio-high / .bio-mid (verts sombres dans nf-table — rgb(21,128,61) ratio 2.88) */
html.dark-mode .bio-high,
html.dark-mode .bio-mid {
  color: #6ee7b7 !important;
  background: rgba(22,163,74,0.12) !important;
}

/* ── Dark mode : modale CMP privacy (privacy-modal-*) ── */
html.dark-mode .privacy-modal-root {
  --pm-bg: #101722;
  --pm-surface: rgba(19,27,40,.94);
  --pm-card: rgba(16,23,34,.78);
  --pm-ink: #e8e4dc;
  --pm-muted: rgba(216,224,235,.76);
  --pm-muted-2: rgba(216,224,235,.58);
  --pm-border: rgba(216,224,235,.22);
  --pm-border-soft: rgba(216,224,235,.14);
  --pm-shadow: 0 18px 52px rgba(0,0,0,.44);
  background: transparent;
  backdrop-filter: none;
}

html.dark-mode .privacy-modal {
  background:
    radial-gradient(700px 420px at 12% 0%, rgba(40,106,77,.18), transparent 60%),
    var(--pm-bg);
}

html.dark-mode .privacy-mini {
  background: rgba(16,23,34,.82);
  border-color: rgba(216,224,235,.16);
  color: #6aaf94;
  box-shadow: 0 10px 28px rgba(0,0,0,.36);
}

html.dark-mode .privacy-mini:hover,
html.dark-mode .privacy-mini:focus-visible {
  border-color: rgba(106,175,148,.42);
  box-shadow: 0 14px 34px rgba(0,0,0,.46);
}

html.dark-mode .privacy-modal__section {
  background: var(--pm-card);
  border-color: var(--pm-border-soft);
}

html.dark-mode .privacy-modal__shield {
  background: rgba(40,106,77,.14);
  border-color: rgba(40,106,77,.36);
}

html.dark-mode .privacy-modal__icon {
  background: rgba(40,106,77,.14);
  border-color: rgba(40,106,77,.36);
}

html.dark-mode .privacy-modal__divider {
  background: var(--pm-border);
}

html.dark-mode .privacy-modal__close,
html.dark-mode .privacy-modal__btn,
html.dark-mode .privacy-modal__info,
html.dark-mode .privacy-modal__footer {
  background: rgba(255,255,255,.04);
}

html.dark-mode .privacy-modal__btn--primary {
  background: var(--pm-accent);
  border-color: var(--pm-accent);
  color: #fff;
}

html.dark-mode .privacy-modal__btn--primary:hover {
  background: var(--pm-accent-hover);
  border-color: var(--pm-accent-hover);
}

html.dark-mode .privacy-modal__btn--link {
  background: transparent;
  border-color: transparent;
  color: #6aaf94;
}

html.dark-mode .privacy-modal__badge,
html.dark-mode .privacy-modal__switch {
  background: rgba(255,255,255,.07);
  border-color: rgba(216,224,235,.14);
}

html.dark-mode .privacy-modal__lock {
  color: #e8e4dc;
  background: rgba(255,255,255,.07);
  border-color: rgba(216,224,235,.14);
}

/* ── Dark mode : bloc PDF consultation (/fonctionnalites/) ── */
html.dark-mode .pdf-summary {
  background: rgba(33,38,46,.82);
  border-color: rgba(255,255,255,.08);
  box-shadow: 0 18px 48px rgba(0,0,0,.34);
}

html.dark-mode .pdf-summary__kicker {
  background: rgba(106,175,148,.12);
  border-color: rgba(106,175,148,.24);
}

html.dark-mode .pdf-summary__lead,
html.dark-mode .pdf-summary__body {
  color: #d4cfc6;
}

html.dark-mode .pdf-summary__list li {
  background: rgba(255,255,255,.04);
  border-color: rgba(255,255,255,.08);
  color: rgba(232,228,220,.72);
}

html.dark-mode .pdf-summary__image {
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 22px 58px rgba(0,0,0,.42);
  filter: none;
}

html.dark-mode .pdf-summary__caption {
  color: rgba(232,228,220,.58);
}

/* ── Dark mode : modale exemple rapport PDF ── */
html.dark-mode .report-modal__backdrop {
  background: rgba(1,8,17,.72);
}

html.dark-mode .report-modal__panel {
  background: rgba(20,25,32,.96);
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 28px 90px rgba(0,0,0,.58);
}

html.dark-mode .report-modal__header {
  border-bottom-color: rgba(255,255,255,.08);
}

html.dark-mode .report-modal__kicker {
  color: #6aaf94;
}

html.dark-mode .report-modal__title {
  color: #f5f0e8;
}

html.dark-mode .report-modal__desc {
  color: rgba(232,228,220,.70);
}

html.dark-mode .report-modal__close {
  background: rgba(255,255,255,.08);
  border-color: rgba(255,255,255,.12);
  color: #f5f0e8;
}

html.dark-mode .report-modal__close:hover {
  background: rgba(255,255,255,.13);
}

html.dark-mode .report-modal__image {
  border-color: rgba(255,255,255,.10);
  box-shadow: 0 22px 64px rgba(0,0,0,.46);
  filter: none;
}

html.dark-mode .report-modal__caption {
  color: rgba(232,228,220,.58);
}

/* §97. Sommaire latéral sticky .toc-rail + liens utilitaires .toc-conclusion/.toc-label
   (promu vit-S675, 13/08/2026 — 12 pages au moment de la promotion, seuil audit_darkmode_autogen
   dépassé). Valeurs identiques à celles précédemment auto-générées (tone=accent/surface). */
html.dark-mode .toc-conclusion:focus-visible,
html.dark-mode .toc-label:focus-visible,
html.dark-mode .toc-rail a:focus-visible,
html.dark-mode .toc-rail-conclusion:focus-visible {
  outline-color: rgba(106,175,148,0.28);
}

html.dark-mode .toc-rail a {
  color: rgba(232,228,220,0.62) !important;
}

html.dark-mode .toc-rail-intro,
html.dark-mode .toc-rail-conclusion {
  color: rgba(232,228,220,0.55) !important;
}

html.dark-mode .toc-rail a.active,
html.dark-mode .toc-rail a:hover {
  background: rgba(45,106,79,0.16);
  color: #8fd0b5 !important;
}

html.dark-mode .toc-rail-inner {
  background: rgba(255,255,255,0.04);
  border-color: rgba(232,228,220,0.12);
  box-shadow: 0 10px 24px rgba(0,0,0,0.18);
}

/* §98. Lien "Introduction" du sommaire .toc-intro / .toc-rail-intro
   (promu vit-S739, 21/08/2026 — 11 pages au moment de la promotion, seuil audit_darkmode_autogen
   dépassé). Valeurs identiques à celles précédemment auto-générées (tone=accent). */
html.dark-mode .toc-intro:focus-visible,
html.dark-mode .toc-rail-intro:focus-visible {
  outline-color: rgba(106,175,148,0.28);
}

html.dark-mode .toc-rail-intro:hover {
  background: rgba(45,106,79,0.16);
  color: #8fd0b5 !important;
}

/* §99. Mur d'accès (paywall) des articles sous inscription — badge hero, carte du mur,
   en-tête, bouton Google, séparateur et boutons CTA (promu vit-S772, 29/08/2026 —
   14 pages au moment de la promotion, 7 index.html + 7 locked.html, seuil
   audit_darkmode_autogen dépassé). Valeurs identiques à celles précédemment
   auto-générées : tone=accent pour le badge et les CTA, tone=surface pour les
   surfaces du mur. Les annotations darkmode-auto correspondantes ont été retirées
   de scripts/_partials/paywall-darkmode.css dans le même commit. */
html.dark-mode .hero-reserved-badge {
  background: rgba(45,106,79,0.16) !important;
  box-shadow: 0 10px 24px rgba(0,0,0,0.18) !important;
  color: #8fd0b5 !important;
}

html.dark-mode .paywall-wall {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(232,228,220,0.12) !important;
}

html.dark-mode .paywall-wall-head {
  background: rgba(255,255,255,0.04) !important;
}

html.dark-mode .paywall-google-btn {
  background: rgba(255,255,255,0.04) !important;
  border-color: rgba(232,228,220,0.12) !important;
  color: #e8e4dc !important;
}

html.dark-mode .paywall-divider::before {
  background: rgba(255,255,255,0.04) !important;
}

html.dark-mode .paywall-divider::after {
  background: rgba(255,255,255,0.04) !important;
}

html.dark-mode .paywall-form button {
  background: rgba(45,106,79,0.16) !important;
  border-color: rgba(106,175,148,0.28) !important;
  color: #8fd0b5 !important;
}

html.dark-mode .paywall-cta {
  background: rgba(45,106,79,0.16) !important;
  border-color: rgba(106,175,148,0.28) !important;
  color: #8fd0b5 !important;
}


/* §100 — entrée compte de la nav (vit-S776). Ces règles vivent ici et non dans
   header.css : ce dernier est injecté INLINE dans chaque page, et audit_darkmode
   refuse (à raison) toute règle html.dark-mode inline hors des deux feuilles de
   référence. Bloqué au pre-commit, pas à la relecture. */
html.dark-mode .topbar-account { color: rgba(232,238,245,.75); }
html.dark-mode .topbar-account:hover,
html.dark-mode .topbar-account:focus-visible { color: #7fc9a4; background: rgba(127,201,164,.1); }

/* §101 — bouton ☆ favoris des contenus (vit-S780). Styles clairs dans
   scripts/_partials/favoris.css (<link> posé par inject_fav.py) ; les règles
   sombres vivent ici, feuille de référence injectée globalement, jamais dans
   le partial (même doctrine que §100). */
html.dark-mode .mb-fav-btn {
  color: #e8b072;
  border-color: rgba(232,176,114,.55);
  background: rgba(184,121,47,.08);
  box-shadow: none;
}
html.dark-mode .mb-fav-btn:hover {
  background: rgba(184,121,47,.18);
}
html.dark-mode .mb-fav-btn.is-on {
  color: #12100c;
  border-color: #e8b072;
  background: #e8b072;
}
/* v2 vit-S781 — reprise sommaire, flottant, barre de fin, cartes listing, toast */
html.dark-mode .mb-fav-rail {
  color: #e8b072; border-color: rgba(232,176,114,.5); background: rgba(184,121,47,.08);
}
html.dark-mode .mb-fav-rail:hover { background: rgba(184,121,47,.18); }
html.dark-mode .mb-fav-rail.is-on { color: #12100c; border-color: #e8b072; background: #e8b072; }
html.dark-mode .mb-fav-fab {
  color: #e8b072; border-color: rgba(232,176,114,.55); background: #1a1e24;
  box-shadow: 0 2px 10px rgba(0,0,0,.45);
}
html.dark-mode .mb-fav-fab:hover { background: rgba(184,121,47,.2); }
html.dark-mode .mb-fav-fab.is-on { color: #12100c; border-color: #e8b072; background: #e8b072; }
html.dark-mode .mb-fav-endbar {
  border-color: rgba(232,176,114,.4); background: rgba(184,121,47,.08);
}
html.dark-mode .mb-fav-card {
  color: rgba(232,238,245,.62); border-color: rgba(232,238,245,.25); background: #1a1e24;
}
html.dark-mode .mb-fav-card:hover { color: #e8b072; border-color: rgba(232,176,114,.55); }
html.dark-mode .mb-fav-card.is-on { color: #12100c; border-color: #e8b072; background: #e8b072; }
html.dark-mode #mb-fav-toast { background: #e8eef5; color: #12161c; }
html.dark-mode #mb-fav-toast a { color: #f6c56b; }