/** * Dark theme — additive only. Every rule here is scoped under * [data-theme="dark"] and layered on top of the existing stylesheets * (loaded last in index.html); nothing in the other CSS files is edited * beyond swapping two `var(--ink)` misuses for the new `--contrast-surface` * token (see global.css) — zero risk of light-mode regression. * * Toggled by src/utils/theme.js, which sets/removes `data-theme="dark"` on * based on the Paramètres > Thème setting. * * Not touched here (deliberately already theme-invariant, dark by brand * design in both modes): the sidebar (layout.css), .control-hero, * .routine-hero, .btn-gradient, .login-page's gradient backdrop. * Not touched here (built entirely on tokens already, flips automatically * once the tokens below change): tables, the builders.js modal * (.modal-dialog), the dashboard's KpiRow/ActivityFeed/BreakdownPanel/ * TrendChart/MyTasksPanel/AlertsPanel, src/components/charts.js's bar/line * colors (kept identical in both themes — validated against a dark card * surface with the dataviz skill's palette script: contrast/CVD/normal- * vision all pass; only the cosmetic "lightness band" check fails for * blue/orange, an accepted trade-off to keep brand hues consistent across * themes rather than re-deriving a second palette). */ [data-theme="dark"] { --bg: #0b0f18; --card: #141a26; --line: #26304a; --ink: #eef2f8; --muted: #93a0b8; --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3); --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.35); --shadow-md: 0 8px 24px rgba(0, 0, 0, 0.4); --shadow-lg: 0 16px 40px rgba(0, 0, 0, 0.5); } /* ---------- Buttons ---------- */ [data-theme="dark"] .btn-secondary { background-color: var(--card); } [data-theme="dark"] .btn-danger { background-color: rgba(229, 67, 46, 0.15); border-color: rgba(229, 67, 46, 0.35); } [data-theme="dark"] .btn-danger:hover:not(:disabled) { background-color: rgba(229, 67, 46, 0.22); } [data-theme="dark"] .card:hover, [data-theme="dark"] .kpi-card:hover { border-color: #35405c; } [data-theme="dark"] .btn-success { background-color: rgba(18, 159, 107, 0.18); color: #6ee7b0; border-color: rgba(18, 159, 107, 0.3); } [data-theme="dark"] .btn-success:hover:not(:disabled) { background-color: rgba(18, 159, 107, 0.26); } [data-theme="dark"] .btn-warning { background-color: rgba(243, 141, 7, 0.18); color: #ffb84d; border-color: rgba(243, 141, 7, 0.3); } [data-theme="dark"] .btn-warning:hover:not(:disabled) { background-color: rgba(243, 141, 7, 0.26); } /* ---------- Badges (components.css) ---------- */ [data-theme="dark"] .badge { background-color: #232c40; color: #cbd5e1; } [data-theme="dark"] .badge-hot { background-color: rgba(229, 67, 46, 0.2); color: #ff9585; } [data-theme="dark"] .badge-warm { background-color: rgba(243, 141, 7, 0.2); color: #ffb84d; } [data-theme="dark"] .badge-cool { background-color: rgba(3, 105, 161, 0.22); color: #7dd3fc; } [data-theme="dark"] .badge-cold { background-color: rgba(107, 114, 128, 0.22); color: #cbd5e1; } [data-theme="dark"] .badge-blue { background-color: rgba(10, 165, 224, 0.18); color: #5fc4ee; } [data-theme="dark"] .badge-purple { background-color: rgba(124, 111, 196, 0.22); color: #b9adea; } [data-theme="dark"] .badge-green { background-color: rgba(18, 159, 107, 0.2); color: #6ee7b0; } /* Score badges (pages.css) - same recipe as the badges above */ [data-theme="dark"] .score { background-color: rgba(229, 67, 46, 0.2); } [data-theme="dark"] .score[data-score="high"] { background-color: rgba(18, 159, 107, 0.2); } [data-theme="dark"] .score[data-score="medium"] { background-color: rgba(243, 141, 7, 0.2); } /* ---------- Forms ---------- */ [data-theme="dark"] .form-field input, [data-theme="dark"] .form-field select, [data-theme="dark"] .form-field textarea, [data-theme="dark"] .form-control, [data-theme="dark"] .modal-body input, [data-theme="dark"] .modal-body select, [data-theme="dark"] .modal-body textarea { background-color: var(--card); color: var(--ink); } [data-theme="dark"] .modal-body input.error, [data-theme="dark"] .modal-body textarea.error, [data-theme="dark"] .modal-body select.error { background-color: rgba(229, 67, 46, 0.15); } /* ---------- Legacy modal (EventHandlers.js showFormModal/showConfirmation). The newer builders.js createModal() (.modal-dialog) already uses var(--card) and needs no override. ---------- */ [data-theme="dark"] .modal-content { background: var(--card); } /* ---------- Pipeline steps (design-system.css, Centre de pilotage) ---------- */ [data-theme="dark"] .pipeline-step[data-status="pending"] .pipeline-step-status, [data-theme="dark"] .pipeline-step[data-status="pending"] .pipeline-step-icon { background: #1c2333; color: #93a0b8; } [data-theme="dark"] .pipeline-step[data-status="running"] .pipeline-step-status { background: rgba(3, 105, 161, 0.22); color: #7dd3fc; } [data-theme="dark"] .pipeline-step[data-status="done"] .pipeline-step-status { background: rgba(18, 159, 107, 0.2); color: #6ee7b0; } [data-theme="dark"] .pipeline-step[data-status="error"] .pipeline-step-status { background: rgba(229, 67, 46, 0.2); color: #ff9585; } /* Timeline dot ring (Mode Routine) - white ring becomes a card-colored ring so it still "punches through" against the surface instead of glowing. */ [data-theme="dark"] .timeline-item::before { border-color: var(--card); } /* ---------- Skeleton loaders ---------- */ [data-theme="dark"] .skeleton { background: linear-gradient(90deg, #1c2333 25%, #263048 37%, #1c2333 63%); background-size: 400% 100%; } /* ---------- Sources de données ---------- */ [data-theme="dark"] .source-status { background: rgba(251, 201, 10, 0.18); color: #ffd84d; } /* ---------- Note (dashboard.css) ---------- */ [data-theme="dark"] .note { background-color: #1a2233; } /* ---------- Dashboard alerts / alert KPI (low-alpha tints need more alpha to read against a dark card instead of a near-white one) ---------- */ [data-theme="dark"] .alerts-row-high { background: rgba(229, 67, 46, 0.16); } [data-theme="dark"] .alerts-row-info { background: rgba(10, 165, 224, 0.16); } [data-theme="dark"] .kpi-card-alert { background: rgba(229, 67, 46, 0.08); border-color: rgba(229, 67, 46, 0.5); } /* ---------- Login page (src/pages/LoginPage.js has its own embedded