/* =============================================================
atlas-edn · mode nuit
Override des variables CSS de :root via body.dark-mode.
Aucune modification des item-XX.css individuels n'est nécessaire :
la cascade des variables suffit à basculer toute la fiche.
============================================================= */
body.dark-mode {
/* Fonds */
--bg-cream: #16181c; /* fond principal — gris foncé chaud */
--bg-card: #1f2228; /* cartes — légèrement plus clair que le fond */
--bg-dark: #0f1114; /* zones très sombres / footer */
/* Texte */
--ink: #e4e6eb; /* texte principal — pas blanc pur */
--ink-muted: #a8acb3; /* texte secondaire */
--ink-soft: #6b7280; /* texte très atténué */
--ink-inverse: #1a1713; /* reste sombre (fond inversé devient clair) */
/* Accents graphiques */
--accent-dash: #4a4a52;
--accent-border: #2a2d34;
/* Spécialités — versions désaturées et éclaircies pour rester lisibles */
--spe-cardio: #4d8593;
--spe-pneumo: #98a85a;
--spe-infectio: #d97a5d;
--spe-neuro: #b87aab;
--spe-orl: #e2a25b;
--spe-mir: #c4b9ad;
--spe-interne: #b89977;
--spe-urgences: #c97c6f;
--spe-nephro: #b87aab;
--spe-endocrino: #e2a25b;
--spe-ortho: #e2a25b;
--spe-hepato: #d97a5d;
--spe-onco: #d97aa3;
--spe-anapath: #a87fb8;
--spe-genetique: #98c47a;
--spe-radio: #b89977;
--spe-gyneco: #d97a5d;
--spe-psy: #b87aab;
--spe-psy-light: #2a1f28;
--spe-psy-2: #b87aab;
--spe-psy-3: #d499c8;
--spe-psy-4: #d99fb0;
--spe-psy-5: #d97a5d;
--spe-psy-6: #c49a4d;
--spe-psy-7: #e2a25b;
--spe-psy-8: #98a85a;
/* Accents pédagogiques transverses */
--accent-blue: #6ea4b3;
--accent-blue-soft: #1e2d35;
--accent-orange: #e29a5b;
--accent-orange-soft: #2e2418;
--accent-yellow: #d4b95e;
--accent-yellow-soft: #2a2616;
--accent-green: #8aae5e;
--accent-green-soft: #1f2818;
--accent-green-strong:#a8c97a;
/* Alertes rouges adoucies */
--alert-red: #ef9a9a;
--alert-red-soft: #2a1818;
/* Niveaux — éclaircis pour rester lisibles sur fond sombre */
--niveau-5: #8aae5e;
--niveau-4: #a8c97a;
--niveau-3: #d4b95e;
--niveau-12: #e29a5b;
--niveau-null: var(--ink-soft);
--niveau-flag: var(--alert-red);
/* Couche perso "Mes erreurs" */
--erreur-accent: #d99c5d;
}
/* =============================================================
Transitions smooth pour le toggle
On cible body et ses descendants directs — évite les transitions
imbriquées qui alourdiraient le rendu.
============================================================= */
body, body * {
transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
/* =============================================================
Filet de sécurité — couvre les couleurs hardcodées potentielles
dans les item-XX.css individuels (sélecteurs génériques).
============================================================= */
body.dark-mode .tab-content,
body.dark-mode .card,
body.dark-mode section,
body.dark-mode article {
background-color: var(--bg-card);
color: var(--ink);
}
body.dark-mode table,
body.dark-mode .table-clean {
background-color: var(--bg-card);
color: var(--ink);
}
body.dark-mode th {
background-color: var(--bg-dark);
color: var(--ink);
border-color: var(--accent-border);
}
body.dark-mode td {
border-color: var(--accent-border);
}
/* =============================================================
Annotations — désaturer les surlignages en mode nuit
Les classes réelles utilisées par annotations-engine.js sont
`.annot-highlight.annot-{yellow|blue|red|pink}`.
============================================================= */
body.dark-mode .annot-highlight.annot-yellow {
background: rgba(212, 185, 94, 0.30) !important;
color: var(--ink) !important;
}
body.dark-mode .annot-highlight.annot-blue {
background: rgba(110, 164, 179, 0.30) !important;
color: var(--ink) !important;
}
body.dark-mode .annot-highlight.annot-red {
background: rgba(239, 154, 154, 0.28) !important;
color: var(--ink) !important;
}
body.dark-mode .annot-highlight.annot-pink {
background: rgba(217, 122, 163, 0.28) !important;
color: var(--ink) !important;
}
body.dark-mode .annot-highlight:hover { filter: brightness(1.10); }
/* Le gras-annotation reste lisible — léger boost de luminance */
body.dark-mode .annot-bold { color: var(--ink); }
/* =============================================================
Mode ludique — adapter les overlays sombres au fond sombre
(rgba(0,0,0,...) devient invisible sur fond sombre).
============================================================= */
body.dark-mode.ludic-on .ludic-hide:not(.revealed) {
background: rgba(255, 255, 255, 0.06);
}
@media (hover: hover) {
body.dark-mode.ludic-on .ludic-hide:not(.revealed):hover {
background: rgba(255, 255, 255, 0.10);
}
}
body.dark-mode.ludic-on .ludic-hide.revealed {
background: rgba(138, 174, 94, 0.22);
}
body.dark-mode .ludic-eval-popup {
background: var(--bg-card);
border-color: var(--accent-border);
box-shadow: 0 6px 20px rgba(0, 0, 0, 0.45), 0 1px 3px rgba(0, 0, 0, 0.30);
}
/* =============================================================
Préserver les images médicales — aucun filter sur ![]()
.
============================================================= */
body.dark-mode img { filter: none; }
/* =============================================================
Bouton toggle dark mode — design discret dans la coque.
============================================================= */
.dark-mode-toggle {
background: transparent;
border: 1px solid var(--accent-border);
border-radius: 50%;
width: 36px;
height: 36px;
font-size: 18px;
cursor: pointer;
display: inline-flex;
align-items: center;
justify-content: center;
margin-left: 12px;
color: var(--ink-inverse);
line-height: 1;
transition: background-color 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
}
body.dark-mode .dark-mode-toggle {
color: var(--ink);
border-color: var(--accent-border);
}
.dark-mode-toggle:hover {
background-color: rgba(255, 255, 255, 0.08);
transform: scale(1.05);
}
.dark-mode-toggle:active { transform: scale(0.95); }
.dark-mode-toggle:focus-visible {
outline: 2px solid var(--spe-orl, #c27a2c);
outline-offset: 2px;
}
/* =============================================================
@media print — forcer le mode clair à l'impression.
============================================================= */
@media print {
body.dark-mode {
--bg-cream: #f4efe6;
--bg-card: #faf6ec;
--bg-dark: #1a1713;
--ink: #1a1713;
--ink-muted: #6b5e45;
--ink-soft: #9e8f72;
--ink-inverse: #faf6ec;
--accent-dash: #c4b898;
--accent-border: #e0d5b8;
--spe-cardio: #2f5e6b;
--spe-pneumo: #6b7a3a;
--spe-infectio: #b8472c;
--spe-neuro: #8a4a7f;
--spe-orl: #c27a2c;
--spe-mir: #1a1713;
--spe-psy: #6e3f66;
--alert-red: #a52a1a;
--alert-red-soft: #f3dccf;
}
.dark-mode-toggle { display: none !important; }
body, body * { transition: none !important; }
}
/* =============================================================
▼ FIX v2 — cards & couleurs hardcodées
============================================================= */
/* -------------------------------------------------------------
Bloc 1 — Variables locales redéfinies dans components.css et
item-XX.css. Ces variables sont utilisées massivement par
les composants (cards, tables, pipeline, etiogrid…) et
n'étaient pas couvertes par la v1.
body.dark-mode (0,1,1) bat :root (0,1,0), donc pas de !important.
------------------------------------------------------------- */
body.dark-mode {
/* Couches de fond */
--paper: #1f2228; /* fond principal des cards (était #faf6ec via --bg-card) */
--paper-2: #16181c; /* variante (en-têtes, zones secondaires) */
--bg-2: #16181c; /* fond zones discrètes (en-têtes tableaux) */
--bg-3: #0f1114; /* zones encore plus discrètes */
/* Bordures */
--rule: #2a2d34;
--rule-2: #3a3d44;
/* Hiérarchie de texte (utilisée massivement) */
--ink-2: #c4c8cf; /* texte secondaire (était #524a3e) */
--ink-3: #8a8e95; /* texte tertiaire (était #8a8270) */
--ink-4: #6b7280; /* texte muted (était #b2a98f) */
/* Couleurs sémantiques utilisées par les item-XX.css */
--danger: #ef9a9a;
--warn: #d4b95e;
--ok: #98c47a;
--orange: #e29a5b;
--jaune: #d4b95e;
--rouge: #ef9a9a;
--vert: #98c47a;
--violet: #b87aab;
}
/* -------------------------------------------------------------
Bloc 2 — Couleurs hardcodées des cards dans item-XX.css.
!important uniquement sur ces overrides ciblés (pas en
wildcard) pour battre les déclarations directes hex.
------------------------------------------------------------- */
/* Fonds blancs purs (#fff) — passent en bg-card sombre */
body.dark-mode table.matrix tbody tr:hover td,
body.dark-mode .cascade-step,
body.dark-mode .dsm-card,
body.dark-mode .pieges-card,
body.dark-mode .pieges-card .alerte,
body.dark-mode .annot-toolbar,
body.dark-mode .annot-tool-color {
background-color: var(--bg-card) !important;
}
/* Fonds rose pâle (#fbeee8) — versions sombres rouge subtil
col-rouge cascade, duree-rouge / forme-rouge tables,
orient-organique, ci-rouge, tdp-tdp matrix. */
body.dark-mode .cascade-step.col-rouge,
body.dark-mode table.matrix-duree tbody tr.duree-rouge th,
body.dark-mode table.matrix-formes tbody tr.forme-rouge th,
body.dark-mode .orient-card.orient-organique,
body.dark-mode .ci-card.ci-rouge,
body.dark-mode table.matrix-tdp tbody tr td.tdp-tdp,
body.dark-mode [class*="piege"],
body.dark-mode [class*="alerte-rouge"] {
background-color: rgba(239, 154, 154, 0.10) !important;
border-color: rgba(239, 154, 154, 0.30) !important;
}
/* Fond #f3dccf (terracotta pâle) — alert-clinical, influence-cle,
stripe, timeline tl-rouge */
body.dark-mode .alert-clinical,
body.dark-mode .influence-cle,
body.dark-mode .stripe,
body.dark-mode .timeline-bar .tl-zone.tl-rouge,
body.dark-mode [style*="#f3dccf"] {
background-color: rgba(217, 122, 93, 0.10) !important;
border-color: rgba(217, 122, 93, 0.30) !important;
}
/* Fond #efe4eb (rose-violet pâle) — orient-psy, tdp-schizo */
body.dark-mode .orient-card.orient-psy,
body.dark-mode table.matrix-tdp tbody tr td.tdp-schizo {
background-color: rgba(184, 122, 171, 0.10) !important;
border-color: rgba(184, 122, 171, 0.30) !important;
}
/* Fond #fff3d6 (jaune pâle) — distinguer / warn,
et timeline tl-jaune */
body.dark-mode .orient-card.distinguer,
body.dark-mode .timeline-bar .tl-zone.tl-jaune,
body.dark-mode [class*="warn-bloc"] {
background-color: rgba(212, 185, 94, 0.12) !important;
border-color: rgba(212, 185, 94, 0.30) !important;
}
/* Fond #fdf2e3 / #f5d2a8 (orange pâle) — ci-orange, timeline tl-orange */
body.dark-mode .ci-card.ci-orange,
body.dark-mode .timeline-bar .tl-zone.tl-orange {
background-color: rgba(226, 154, 91, 0.12) !important;
border-color: rgba(226, 154, 91, 0.30) !important;
}
/* Dégradé hardcodé record-banner (linear-gradient #f3dccf → #efe4eb) */
body.dark-mode .record-banner,
body.dark-mode [style*="linear-gradient"][style*="#f3dccf"] {
background: linear-gradient(135deg, rgba(217, 122, 93, 0.10) 0%, rgba(184, 122, 171, 0.10) 100%) !important;
}
/* -------------------------------------------------------------
Bloc 3 — Familles utilitaires (.fam-sem, .fam-psy, .fam-age,
.fam-tt, .fam-legal, .fam-dx, .fam-record, .fam-nonpsy).
Les --fam-bg pastels pètent les yeux en dark mode → 10%.
------------------------------------------------------------- */
body.dark-mode .fam-sem { --fam-bg: rgba(110, 164, 179, 0.10); }
body.dark-mode .fam-nonpsy { --fam-bg: rgba(217, 122, 93, 0.10); }
body.dark-mode .fam-psy { --fam-bg: rgba(184, 122, 171, 0.10); }
body.dark-mode .fam-age { --fam-bg: rgba(226, 162, 91, 0.10); }
body.dark-mode .fam-tt { --fam-bg: rgba(152, 168, 90, 0.10); }
body.dark-mode .fam-legal { --fam-bg: rgba(196, 185, 173, 0.10); }
body.dark-mode .fam-dx { --fam-bg: rgba(184, 153, 119, 0.10); }
body.dark-mode .fam-record { --fam-bg: rgba(184, 122, 171, 0.10); }
/* -------------------------------------------------------------
Bloc 4 — Bandeau « PÉDAGOGIQUE » (.didyou, rendu par
didyou() dans item-63.js et alii) + autres encadrés.
.didyou utilise déjà var(--paper) → automatiquement sombre
via le Bloc 1, mais on ajoute des règles ciblées au cas où
un item le surcharge.
------------------------------------------------------------- */
body.dark-mode .didyou,
body.dark-mode .pedagogique,
body.dark-mode .pedago-bloc,
body.dark-mode .a-retenir,
body.dark-mode .retenir,
body.dark-mode [class*="pedago"],
body.dark-mode [class*="retenir"],
body.dark-mode .info-bloc,
body.dark-mode .key-takeaway {
background-color: var(--paper) !important;
border-color: var(--rule) !important;
color: var(--ink) !important;
}
body.dark-mode .didyou p,
body.dark-mode .didyou .dy-tag {
color: var(--ink-2) !important;
}
body.dark-mode .didyou h5,
body.dark-mode .didyou b {
color: var(--ink) !important;
}
/* Eyebrows / petits labels en majuscules */
body.dark-mode .eyebrow-label,
body.dark-mode .label-pedago,
body.dark-mode .label-rang {
color: var(--ink-muted) !important;
}
/* -------------------------------------------------------------
Bloc 5 — Bouton flottant « Annotations N » + panneau latéral.
Classes réelles (lues dans annotations.css) :
#annotations-panel-btn (FAB)
.apb-icon / .apb-label / .apb-count
#annotations-panel (panneau latéral)
.ap-header
------------------------------------------------------------- */
body.dark-mode #annotations-panel-btn {
background-color: var(--bg-card) !important;
color: var(--ink) !important;
border-color: var(--accent-border) !important;
box-shadow: 0 4px 14px rgba(0, 0, 0, 0.45) !important;
}
body.dark-mode #annotations-panel-btn:hover {
box-shadow: 0 6px 18px rgba(0, 0, 0, 0.55) !important;
}
body.dark-mode #annotations-panel-btn .apb-count {
background-color: var(--spe-psy) !important;
color: var(--bg-dark) !important;
}
body.dark-mode #annotations-panel {
background-color: var(--bg-cream) !important;
border-left-color: var(--accent-border) !important;
box-shadow: -4px 0 20px rgba(0, 0, 0, 0.55) !important;
}
body.dark-mode .ap-header {
background-color: var(--bg-card) !important;
border-bottom-color: var(--accent-border) !important;
}
body.dark-mode .annot-menu-item:hover {
background-color: var(--bg-card) !important;
}
body.dark-mode .annot-menu-danger:hover {
background-color: var(--alert-red-soft) !important;
}
/* =============================================================
@media print — restaurer aussi les variables locales du Bloc 1
pour que l'impression sorte en mode clair complet.
============================================================= */
@media print {
body.dark-mode {
--paper: #faf6ec;
--paper-2: #fffcf5;
--bg-2: #ece5d6;
--bg-3: #e4dcc8;
--rule: #d7ccb4;
--rule-2: #c4b898;
--ink-2: #524a3e;
--ink-3: #8a8270;
--ink-4: #b2a98f;
--danger: #a52a1a;
--warn: #8a5a12;
--ok: #4e6a2f;
--orange: #c46a2c;
--jaune: #c2a32c;
--rouge: #a52a1a;
--vert: #4e6a2f;
--violet: #6e3f66;
}
}
/* =============================================================
▼ FIX v3 — Industrialisation dark mode sur les 22 items
Sélecteurs identifiés via audit complet des couleurs hardcodées
dans tous les assets/item-*.css.
============================================================= */
/* -------------------------------------------------------------
1. Cards & blocs neutres — fond #fff hardcodé devient bg-card
------------------------------------------------------------- */
body.dark-mode .step,
body.dark-mode .step .chip,
body.dark-mode .step .chips,
body.dark-mode .item-link,
body.dark-mode .axis-card,
body.dark-mode .dd-item,
body.dark-mode .escalade-step,
body.dark-mode .ci-card,
body.dark-mode .anti-card,
body.dark-mode .sub-card,
body.dark-mode .forme-card,
body.dark-mode .at-step,
body.dark-mode .brca-block,
body.dark-mode .frise-step,
body.dark-mode .seuil-row,
body.dark-mode .dsm-cell,
body.dark-mode .sympho-card,
body.dark-mode .cog-block,
body.dark-mode .duree-step,
body.dark-mode .hospit4-card,
body.dark-mode .pruning-step,
body.dark-mode .lithium-bloc,
body.dark-mode .lithium-wrap,
body.dark-mode .pronostic-bloc,
body.dark-mode .reflexes-wrap,
body.dark-mode .cleram-phase,
body.dark-mode .demarche-node,
body.dark-mode .red-flags-wrap,
body.dark-mode .profil-section,
body.dark-mode .profil-section p,
body.dark-mode .depbip-axis,
body.dark-mode .abces-physio .ap-block,
body.dark-mode .lcs-table,
body.dark-mode .pyramide-germ,
body.dark-mode .minitree,
body.dark-mode .prev-table,
body.dark-mode .prev-table tbody tr:hover td,
body.dark-mode .minitree .mt-decision .mt-ci,
body.dark-mode .alerte-card,
body.dark-mode .alerte-card .al-bloc,
body.dark-mode .record-banner-trauma,
body.dark-mode .timeline-bar,
body.dark-mode .tl-zone,
body.dark-mode .aes-step,
body.dark-mode .anti-section,
body.dark-mode .frise-l,
body.dark-mode .anti-card.rang-A,
body.dark-mode .lcs-table thead th.col-norm,
body.dark-mode .lcs-table thead th.col-purul {
background-color: var(--bg-card) !important;
border-color: var(--accent-border) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
2. Variantes "danger" / rouge — fond rouge sombre subtil
------------------------------------------------------------- */
body.dark-mode .alerte-rouge,
body.dark-mode .alert-red,
body.dark-mode .iris-alert,
body.dark-mode .caps-alert,
body.dark-mode .demarche-top-alert,
body.dark-mode .frise-step.frise-danger,
body.dark-mode .frise-step.frise-warn,
body.dark-mode .seuil-row.seuil-danger,
body.dark-mode .seuil-row.seuil-warn,
body.dark-mode .ci-card.ci-rouge,
body.dark-mode .ci-card.ci-orange,
body.dark-mode .cascade-step.col-rouge,
body.dark-mode .cascade-step.col-orange,
body.dark-mode .timeline-bar .tl-zone.tl-rouge,
body.dark-mode .timeline-bar .tl-zone.tl-orange,
body.dark-mode .forme-card.forme-rouge,
body.dark-mode .forme-card.forme-orange,
body.dark-mode .anti-section.anti-ci,
body.dark-mode .frise-urg,
body.dark-mode .vignette-trap,
body.dark-mode .piege-card,
body.dark-mode .alert-clinical,
body.dark-mode .alert-clinical.alert-warn,
body.dark-mode .aes-step.urgent,
body.dark-mode .profil-section.profil-pieges,
body.dark-mode table.matrix-duree tbody tr.duree-rouge th,
body.dark-mode table.matrix-formes tbody tr.forme-rouge th,
body.dark-mode .orient-card.orient-organique {
background-color: rgba(239, 154, 154, 0.08) !important;
border-color: rgba(239, 154, 154, 0.30) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
3. Variantes "warn" jaune — fond jaune subtil
------------------------------------------------------------- */
body.dark-mode .frise-step.frise-ok,
body.dark-mode .forme-card.forme-jaune,
body.dark-mode .orient-card.distinguer {
background-color: rgba(212, 185, 94, 0.08) !important;
border-color: rgba(212, 185, 94, 0.30) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
4. Variantes "ok" vert — fond vert subtil
------------------------------------------------------------- */
body.dark-mode .forme-card.forme-vert {
background-color: rgba(152, 196, 122, 0.08) !important;
border-color: rgba(152, 196, 122, 0.30) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
5. Variante "psy" rose-violet — fond aubergine subtil
------------------------------------------------------------- */
body.dark-mode .orient-card.orient-psy {
background-color: rgba(184, 122, 171, 0.08) !important;
border-color: rgba(184, 122, 171, 0.30) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
6. Item 329 — Produits Sanguins Labiles (palette spécifique)
------------------------------------------------------------- */
body[data-matiere="hematologie"].dark-mode [class*="psl-"],
body.mat-hematologie.dark-mode [class*="psl-"],
body.dark-mode [class*="psl-"],
body.dark-mode [class*="groupe-"],
body.dark-mode [class*="-cgr"],
body.dark-mode [class*="-pfc"],
body.dark-mode [class*="-cp"],
body.dark-mode [class*="-cpa"] {
background-color: var(--bg-card) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
7. Item 332 — États de choc (sélecteurs spécifiques)
------------------------------------------------------------- */
body.dark-mode [class*="choc-"],
body.dark-mode .step.choc-card {
background-color: var(--bg-card) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
8. Item 312 — Tumeurs sein, gradients spéciaux et dégradés
NOTE : ne couvre que les gradients INLINE (style="…").
Les gradients définis dans les CSS-files (item-312
.frise-warn/.frise-danger/.brca-block, item-340 timeline,
item-64/66 banners) ne sont pas matchés ici — à reprendre
en v4 si visuellement gênants.
------------------------------------------------------------- */
body.dark-mode [style*="linear-gradient"] {
background-image: none !important;
background-color: var(--bg-card) !important;
}
/* Sauf les gradients dans les bandeaux de réussite ludique
et autres décorations volontaires (à préserver) */
body.dark-mode .ludic-banner,
body.dark-mode .badge-success,
body.dark-mode [class*="ludic-"][style*="linear-gradient"] {
background-image: revert !important;
}
/* -------------------------------------------------------------
9. Filet de sécurité — couleurs hardcodées en inline style
(les item-XX.js injectent du HTML avec style="background:#…")
------------------------------------------------------------- */
body.dark-mode [style*="background:#fff"]:not([style*="#fff5"]):not([style*="#fff3"]):not([style*="#fffc"]),
body.dark-mode [style*="background: #fff"]:not([style*="#fff5"]):not([style*="#fff3"]):not([style*="#fffc"]),
body.dark-mode [style*="background:#f3dccf"],
body.dark-mode [style*="background: #f3dccf"],
body.dark-mode [style*="background:#fbeee8"],
body.dark-mode [style*="background: #fbeee8"],
body.dark-mode [style*="background:#efe4eb"],
body.dark-mode [style*="background: #efe4eb"],
body.dark-mode [style*="background:#fff3d6"],
body.dark-mode [style*="background: #fff3d6"],
body.dark-mode [style*="background:#fdf2e3"],
body.dark-mode [style*="background: #fdf2e3"] {
background-color: var(--bg-card) !important;
}
/* -------------------------------------------------------------
10. Préserver les éléments qui DOIVENT garder leur couleur
(badges, surlignages, boutons d'action, dots d'état)
Bloc volontairement vide — sert de marqueur de non-override.
------------------------------------------------------------- */
/* =============================================================
▼ FIX v4 — Mindmap SVG + sélecteurs résiduels item-64
============================================================= */
/* -------------------------------------------------------------
1. Mindmap radiale SVG — nœuds, chips, links
.node-bg / .node-chip ont `fill: #fff` hardcodé dans tous
les item-XX.css (22/22 fichiers). On les force en bg-card.
------------------------------------------------------------- */
body.dark-mode .mmwrap svg.canvas .node-bg {
fill: var(--bg-card) !important;
stroke: var(--accent-border) !important;
}
body.dark-mode .mmwrap svg.canvas .node-chip {
fill: var(--bg-card) !important;
stroke: var(--accent-border) !important;
}
body.dark-mode .mmwrap svg.canvas .node-title {
fill: var(--ink) !important;
}
body.dark-mode .mmwrap svg.canvas .node-sub {
fill: var(--ink-muted) !important;
}
body.dark-mode .mmwrap svg.canvas .node-chip-t {
fill: var(--ink-muted) !important;
}
body.dark-mode .mmwrap svg.canvas path.link {
stroke: var(--accent-border) !important;
}
body.dark-mode .mmwrap svg.canvas .ring {
stroke: var(--accent-border) !important;
}
/* root-circle garde sa couleur de spécialité (var(--spe-psy), etc.)
on s'assure juste que le texte du root reste lisible */
body.dark-mode .mmwrap svg.canvas .root-text {
fill: var(--ink-inverse) !important;
}
/* Boutons de zoom (+/-/reset) en haut à droite de la mindmap */
body.dark-mode .mmwrap .zctl button {
background-color: var(--bg-card) !important;
border-color: var(--accent-border) !important;
color: var(--ink) !important;
}
body.dark-mode .mmwrap .zctl button:hover {
background-color: var(--accent-border) !important;
}
body.dark-mode .mmwrap .zhint {
background-color: rgba(31, 34, 40, 0.85) !important;
color: var(--ink-muted) !important;
border-color: var(--accent-border) !important;
}
/* -------------------------------------------------------------
2. Sélecteurs résiduels item-64 (matrix-tbtb, lithium, pronostic)
------------------------------------------------------------- */
body.dark-mode table.matrix-tbtb tbody tr.tbtb-alert th,
body.dark-mode table.matrix-tbtb tbody tr.tbtb-alert td,
body.dark-mode table.matrix-tbtb tbody tr.tbtb-alert td.tdp-schizo,
body.dark-mode table.matrix-tbtb tbody tr.tbtb-alert td.tdp-tdp,
body.dark-mode .lithium-bloc:nth-child(6),
body.dark-mode .pronostic-bloc.bloc-mauvais {
background-color: rgba(239, 154, 154, 0.10) !important;
border-color: rgba(239, 154, 154, 0.30) !important;
color: var(--ink) !important;
}
body.dark-mode .pronostic-bloc.bloc-mauvais h4 {
color: var(--danger) !important;
}
/* -------------------------------------------------------------
3. Filet de sécurité SVG global — autres SVG de l'atlas
IMPORTANT : exclure car les items 177/337/340 ont
24 occurrences de `fill="#fff"` sur des labels qui
doivent rester blancs (textes sur formes colorées).
------------------------------------------------------------- */
body.dark-mode svg :not(text)[fill="#fff"],
body.dark-mode svg :not(text)[fill="white"],
body.dark-mode svg :not(text)[fill="#FFFFFF"] {
fill: var(--bg-card) !important;
}
body.dark-mode svg :not(text)[stroke="#fff"]:not(.preserve-stroke) {
stroke: var(--accent-border) !important;
}
/* =============================================================
▼ FIX v5 — Robustesse totale
- item-189 (banners, démarche, fam-*, axes DICV)
- item-192 (tables comparatives connectivites + ANCA)
- filet ultime générique pour futurs items
============================================================= */
/* -------------------------------------------------------------
1. Item 189 — banners info-box (Précision, Pédiatrie, Actu)
------------------------------------------------------------- */
body.dark-mode .info-box {
background-color: rgba(110, 164, 179, 0.08) !important;
border-color: rgba(110, 164, 179, 0.30) !important;
color: var(--ink) !important;
}
body.dark-mode .info-box-warn {
background-color: rgba(212, 185, 94, 0.10) !important;
border-color: rgba(212, 185, 94, 0.30) !important;
border-left-color: var(--warn) !important;
color: var(--ink) !important;
}
body.dark-mode .info-box-actu {
background-color: rgba(110, 164, 179, 0.10) !important;
border-left-color: var(--info, var(--spe-cardio)) !important;
color: var(--ink) !important;
}
body.dark-mode .info-box p,
body.dark-mode .info-box-warn p,
body.dark-mode .info-box-actu p,
body.dark-mode .info-box-list,
body.dark-mode .info-box-list li {
color: var(--ink) !important;
}
body.dark-mode .info-box-warn .info-box-tag { color: var(--warn) !important; }
body.dark-mode .info-box-actu .info-box-tag { color: var(--info, var(--spe-cardio)) !important; }
body.dark-mode .info-box-source { color: var(--ink-muted) !important; }
/* -------------------------------------------------------------
2. Item 189 — démarche diagnostique
.dt-entry est inversée à l'origine (background: var(--ink),
color: var(--paper)) — pattern ingérable en dark mode car les
variables s'inversent. On force un contraste accent sombre.
------------------------------------------------------------- */
body.dark-mode .dt-entry {
background-color: var(--bg-3) !important;
color: var(--ink) !important;
border-color: var(--accent-border) !important;
}
body.dark-mode .dt-entry h4,
body.dark-mode .dt-entry h5,
body.dark-mode .dt-entry .dt-tag {
color: var(--ink) !important;
opacity: 1 !important;
}
body.dark-mode .dt-leaf {
background-color: var(--bg-card) !important;
border-color: var(--rule) !important;
color: var(--ink) !important;
}
body.dark-mode .dt-leaf.dt-danger {
background-color: rgba(239, 154, 154, 0.08) !important;
border-left-color: var(--danger) !important;
}
body.dark-mode .dt-leaf.dt-warn {
background-color: rgba(212, 185, 94, 0.08) !important;
border-left-color: var(--warn) !important;
}
body.dark-mode .dt-leaf.dt-ok {
background-color: rgba(152, 196, 122, 0.08) !important;
border-left-color: var(--ok) !important;
}
body.dark-mode .dt-leaf.dt-info {
background-color: rgba(110, 164, 179, 0.08) !important;
border-left-color: var(--info, var(--spe-cardio)) !important;
}
body.dark-mode .dt-branch,
body.dark-mode .dt-branch-a,
body.dark-mode .dt-branch-b,
body.dark-mode .dt-subleaf,
body.dark-mode .dt-explo,
body.dark-mode .dt-html-tree,
body.dark-mode .dt-mid {
background-color: var(--bg-card) !important;
border-color: var(--rule) !important;
color: var(--ink) !important;
}
body.dark-mode .dt-branch h4,
body.dark-mode .dt-branch-h h4,
body.dark-mode .dt-leaf-test,
body.dark-mode .dt-leaf-diag,
body.dark-mode .dt-explo-label,
body.dark-mode .dt-explo-diag {
color: var(--ink) !important;
}
body.dark-mode .dt-leaf-arrow,
body.dark-mode .dt-explo-test,
body.dark-mode .dt-sub {
color: var(--ink-3) !important;
}
/* -------------------------------------------------------------
3. Item 189 — familles thématiques (--fam-bg pastels)
On désature TOUS les --fam-bg vers du 10% pour éviter qu'ils
restent claqués en dark mode.
------------------------------------------------------------- */
body.dark-mode .fam-cadrage { --fam-bg: rgba(196, 185, 173, 0.10); }
body.dark-mode .fam-evoquer { --fam-bg: rgba(239, 154, 154, 0.10); }
body.dark-mode .fam-bilan { --fam-bg: rgba(110, 164, 179, 0.10); }
body.dark-mode .fam-dicv { --fam-bg: rgba(217, 122, 93, 0.10); }
body.dark-mode .fam-atlas { --fam-bg: rgba(226, 162, 91, 0.10); }
body.dark-mode .fam-prevention { --fam-bg: rgba(152, 196, 122, 0.10); }
body.dark-mode .fam-inf { --fam-bg: rgba(239, 154, 154, 0.10); }
body.dark-mode .fam-lymphoprolif { --fam-bg: rgba(184, 122, 171, 0.10); }
body.dark-mode .fam-diarrhee { --fam-bg: rgba(226, 162, 91, 0.10); }
body.dark-mode .fam-autoim { --fam-bg: rgba(184, 122, 171, 0.10); }
body.dark-mode .fam-granulo { --fam-bg: rgba(212, 185, 94, 0.10); }
/* -------------------------------------------------------------
4. Item 189 — cards principales
------------------------------------------------------------- */
body.dark-mode .def-card,
body.dark-mode .composant-card,
body.dark-mode .bilan-card,
body.dark-mode .dicv-axis,
body.dark-mode .dicv-axes-grid,
body.dark-mode .reflex-box,
body.dark-mode .vignette,
body.dark-mode .keypoint,
body.dark-mode .keypoints-list,
body.dark-mode .ac-card,
body.dark-mode .apart-card,
body.dark-mode .classif-col,
body.dark-mode .schema-tolerance,
body.dark-mode .schema-meca,
body.dark-mode .meca-col,
body.dark-mode .meca-note,
body.dark-mode .hub-wrap,
body.dark-mode .aan-fluo {
background-color: var(--bg-card) !important;
border-color: var(--rule) !important;
color: var(--ink) !important;
}
body.dark-mode .def-card p,
body.dark-mode .def-card ul,
body.dark-mode .def-card ul li,
body.dark-mode .composant-card ul,
body.dark-mode .composant-card ul li,
body.dark-mode .bilan-card ul,
body.dark-mode .bilan-card ul li,
body.dark-mode .dicv-axis ul,
body.dark-mode .dicv-axis ul li,
body.dark-mode .reflex-box p,
body.dark-mode .vignette p,
body.dark-mode .keypoint p,
body.dark-mode .keypoints-list .kp-body,
body.dark-mode .meca-list,
body.dark-mode .meca-list li,
body.dark-mode .meca-intro,
body.dark-mode .ac-card p,
body.dark-mode .ac-card .ac-row,
body.dark-mode .apart-card p {
color: var(--ink-2) !important;
}
body.dark-mode .def-card p b,
body.dark-mode .composant-card ul li b,
body.dark-mode .bilan-card ul li b,
body.dark-mode .keypoint p b,
body.dark-mode .meca-list li b,
body.dark-mode .ac-card .ac-row b,
body.dark-mode .vignette p b,
body.dark-mode .classif-group ul li b {
color: var(--ink) !important;
}
/* -------------------------------------------------------------
5. Item 192 — tables comparatives (compare-connect, compare-anca)
------------------------------------------------------------- */
body.dark-mode .compare-connect,
body.dark-mode .compare-anca {
background-color: var(--bg-card) !important;
border-color: var(--rule) !important;
color: var(--ink) !important;
}
body.dark-mode .compare-connect .cmp-head,
body.dark-mode .compare-anca .cmp-head {
background-color: var(--bg-2) !important;
}
body.dark-mode .compare-connect .cmp-head .ch.mech {
background-color: var(--bg-3) !important;
color: var(--ink) !important;
}
body.dark-mode .compare-connect .cmp-head .ch.mech .cname {
color: var(--ink) !important;
}
body.dark-mode .compare-connect .cmp-row:nth-child(odd) .cell {
background-color: var(--paper-2) !important;
}
body.dark-mode .compare-connect .cmp-row .rh,
body.dark-mode .compare-connect .cmp-row .cell,
body.dark-mode .compare-anca .cmp-row .rh,
body.dark-mode .compare-anca .cmp-row .cell {
color: var(--ink) !important;
border-color: var(--rule) !important;
}
body.dark-mode .compare-connect .cmp-row .rh .sub {
color: var(--ink-3) !important;
}
body.dark-mode .ac-card .ac-piege {
background-color: rgba(239, 154, 154, 0.10) !important;
border-color: rgba(239, 154, 154, 0.30) !important;
}
body.dark-mode .ac-card .ac-piege .ac-lbl { color: var(--danger) !important; }
/* -------------------------------------------------------------
6. Item 192 — schémas custom (meca-col, meca-tag/note, aan-fluo)
------------------------------------------------------------- */
body.dark-mode .meca-col {
background-color: var(--bg-card) !important;
border-color: var(--rule) !important;
}
body.dark-mode .meca-tag {
background-color: var(--bg-2) !important;
color: var(--ink-2) !important;
}
body.dark-mode .meca-note {
background-color: var(--bg-2) !important;
color: var(--ink-2) !important;
}
body.dark-mode .aan-fluo .aan-img {
background-color: var(--bg-2) !important;
}
body.dark-mode .aan-fluo .aan-legend h4 { color: var(--ink) !important; }
body.dark-mode .aan-fluo .aan-legend .src { color: var(--ink-3) !important; }
/* -------------------------------------------------------------
7. Filet ULTIME — couleurs hex pastels résiduelles inline
Audit corpus actuel : tous les hex inline `#e...` et `#f...`
sont des pastels (#ead8e4, #fbeee8, #fff, #fff3d6, #f3dccf,
#f3e5c7, #f4e0cf, #fff3e3, #fff8ed). Aucune couleur vive
inline n'utilise ces préfixes — bloc safe.
Garde-fou : exclusions sur quelques sous-codes vifs au cas où.
------------------------------------------------------------- */
body.dark-mode [style*="background:#f"]:not([style*="background:#fff5"]):not([style*="background:#fffc"]):not([style*="background:#f0c0"]),
body.dark-mode [style*="background: #f"]:not([style*="background: #fff5"]):not([style*="background: #fffc"]):not([style*="background: #f0c0"]),
body.dark-mode [style*="background:#e"],
body.dark-mode [style*="background: #e"] {
background-color: var(--bg-card) !important;
background-image: none !important;
}
/* Filet text-color : si une couleur de texte est hardcodée en
ton sombre (#1xx, #2xx, #3xx) inline, on force --ink.
Audit corpus : 0 occurrence actuelle — future-proofing. */
body.dark-mode [style*="color:#1"]:not([class*="dot-"]):not([class*="badge"]),
body.dark-mode [style*="color: #1"]:not([class*="dot-"]):not([class*="badge"]),
body.dark-mode [style*="color:#2"]:not([class*="dot-"]):not([class*="badge"]),
body.dark-mode [style*="color: #2"]:not([class*="dot-"]):not([class*="badge"]),
body.dark-mode [style*="color:#3"]:not([class*="dot-"]):not([class*="badge"]),
body.dark-mode [style*="color: #3"]:not([class*="dot-"]):not([class*="badge"]) {
color: var(--ink) !important;
}
/* -------------------------------------------------------------
8. Filet pattern « card inversée » générique
Le pattern var(--ink) en bg + var(--paper) en color devient
illisible quand les deux variables s'inversent en dark mode.
On force un fond accent (bg-3) pour préserver le contraste.
------------------------------------------------------------- */
body.dark-mode .ch.mech,
body.dark-mode .header-inverse,
body.dark-mode [class*="-inverse"]:not([class*="ink-inverse"]) {
background-color: var(--bg-3) !important;
color: var(--ink) !important;
}
/* -------------------------------------------------------------
9. Couleurs de texte sémantiques inline
------------------------------------------------------------- */
body.dark-mode .danger { color: var(--danger) !important; }
body.dark-mode .warn { color: var(--warn) !important; }
body.dark-mode .ok { color: var(--ok) !important; }
body.dark-mode .muted { color: var(--ink-3) !important; }
/* -------------------------------------------------------------
10. Tags rang A / rang B — préserver lisibilité
------------------------------------------------------------- */
body.dark-mode .rang-tag {
background-color: var(--bg-card) !important;
color: var(--ink-2) !important;
border-color: var(--rule-2) !important;
}
body.dark-mode .rang-tag.rang-a { color: var(--ok) !important; }
body.dark-mode .rang-tag.rang-b { color: var(--ink-3) !important; }
/* =============================================================
▼ FIX v6 — item 195 : figcaptions SVG, lanes pipeline,
--ent-*-bg dans les SVG, et masquage ludique sur cellules accent
============================================================= */
/* 1. Figcaption SVG / image lisible en mode nuit (problème 2A item 195).
item-195.css applique color: var(--ink-3) au figcaption ; en dark
--ink-3 = #8a8e95 sur --paper #1f2228 → contraste limite. On
remonte à --ink-2 (#c4c8cf) pour un contraste franc. */
body.dark-mode .svg-fig figcaption,
body.dark-mode .img-fig figcaption {
color: var(--ink-2) !important;
}
body.dark-mode .svg-fig figcaption b,
body.dark-mode .img-fig figcaption b {
color: var(--ink) !important;
}
/* 2. SVG physiopath item 195 — les rect ont fill="var(--ent-acg-bg)".
En dark, --ent-acg-bg reste saumon clair → texte clair illisible.
On override la variable UNIQUEMENT dans .svg-fig (les cellules
.cell-*-accent du tableau pivot ne sont pas affectées). */
body.dark-mode .svg-fig {
--ent-acg: #d97a5d;
--ent-acg-bg: #4a2018;
--ent-ppr: #e2a25b;
--ent-ppr-bg: #4a3318;
--ent-takayasu: #b87aab;
--ent-takayasu-bg:#2e2440;
}
/* 3. Lane cortico-épargne (problème 4 item 195) — fond clair par
défaut, devient illisible en dark. On remplace par un fond
accent sombre dérivé de --fam. */
body.dark-mode .pipeline {
background-color: var(--paper) !important;
border-color: var(--rule) !important;
}
body.dark-mode .pipeline .lane {
background: color-mix(in oklab, var(--fam, var(--ink)) 18%, var(--paper)) !important;
border-color: color-mix(in oklab, var(--fam, var(--ink)) 50%, var(--paper)) !important;
}
body.dark-mode .pipeline .lane-h h3 {
color: var(--ink) !important;
}
body.dark-mode .pipeline .step {
background-color: var(--paper) !important;
border-color: var(--rule) !important;
color: var(--ink) !important;
}
body.dark-mode .pipeline .step h5 { color: var(--ink) !important; }
body.dark-mode .pipeline .step p,
body.dark-mode .pipeline .step ul,
body.dark-mode .pipeline .step ul li { color: var(--ink-2) !important; }
body.dark-mode .pipeline .step .sn {
background: color-mix(in oklab, var(--fam, var(--ink)) 25%, var(--paper)) !important;
color: var(--ink) !important;
}
/* 4. Masquage ludique sur cellule accent — version nuit
(cohérent avec item-195.css mais adapté au fond sombre). */
body.dark-mode.ludic-on table.compare tbody td.cell-acg-accent .ludic-hide:not(.revealed),
body.dark-mode.ludic-on table.compare tbody td.cell-ppr-accent .ludic-hide:not(.revealed),
body.dark-mode.ludic-on table.compare tbody td.cell-takay-accent .ludic-hide:not(.revealed) {
background:
repeating-linear-gradient(
45deg,
color-mix(in oklab, var(--fam-cell, var(--ent-takayasu)) 25%, var(--paper)) 0 6px,
color-mix(in oklab, var(--fam-cell, var(--ent-takayasu)) 45%, var(--paper)) 6px 12px
) !important;
border-color: var(--fam-cell, var(--ent-takayasu)) !important;
}