/* ========================================================================== Mode sombre — clair par défaut, sombre si data-bs-theme="dark" est posé sur (choix explicite persisté, ou préférence système détectée par assets/controllers/theme_toggle_controller.js). Stratégie : n'inverser QUE les variables qui sont de vraies rampes de luminosité relative (--gray-*, --success-*, --danger-*, --warning-*, --info-*, --primary-*, --purple-*) — jamais --white/--black/--main-*, qui sont utilisées comme couleurs LITTÉRALES fixes (ex: texte blanc sur un bouton --main-600) et casseraient le contraste partout si on les inversait. Pour les vraies surfaces (fond de page, cartes, sidebar...), on cible les sélecteurs directement plutôt que de détourner --white. ========================================================================== */ :root { /* Corrige 2 bugs préexistants dans main.css (variables mal formées) sans toucher au fichier compilé : on les redéfinit dans le format réellement consommé par les règles qui les utilisent. */ --border-color: #BDBECC; /* était un triplet HSL utilisé sans hsl() → bordures de cartes invisibles */ --body-color: 220 33% 7%; /* était lié à --gray-600 (hex) mais consommé via hsl() → couleur invalide */ } [data-bs-theme="dark"] { /* ---------- Rampe de gris (texte, bordures, fonds subtils) ---------- */ --gray-50: #12151C; --gray-100: #1B1F27; --gray-200: #2A2F3A; --gray-300: #3C4250; --gray-400: #5B6274; --gray-500: #8890A0; --gray-600: #C3C8D4; --gray-700: #DCE0E8; --gray-800: #EDEFF3; --gray-900: #F5F6F9; --gray-950: #FFFFFF; --border-color: #2A2F3A; --body-color: 220 15% 85%; --heading-color: 0 0% 100%; /* ---------- Familles de statut (fonds pastel de badges + texte) ---------- */ --primary-50: #16213D; --primary-100: #1C2B4D; --danger-50: #3A1518; --danger-100: #4A1B1F; --danger-600: #FF6B6C; --success-50: #0F2B1B; --success-100: #123A22; --success-600: #34D399; --warning-50: #3A2712; --warning-100: #4A3115; --warning-600: #FFB35C; --info-50: #10233D; --info-100: #152C4D; --info-600: #4FD8EE; --purple-50: #211A3D; --purple-100: #2A2150; --purple-600: #8C7CFF; color-scheme: dark; } /* Préférence système, uniquement si l'utilisateur n'a pas fait de choix explicite */ @media (prefers-color-scheme: dark) { :root:not([data-bs-theme="light"]):not([data-bs-theme="dark"]) { color-scheme: dark; } } /* ========================================================================== Surfaces — ciblées directement (jamais via --white, voir note en tête) ========================================================================== */ [data-bs-theme="dark"] body { background-color: #0A0B0E; } [data-bs-theme="dark"] .card, [data-bs-theme="dark"] .dropdown-menu .card { background-color: #15171D; border: 1px solid var(--border-color); } [data-bs-theme="dark"] .sidebar, [data-bs-theme="dark"] .sidebar__logo, [data-bs-theme="dark"] .top-navbar { background-color: #0A0B0E !important; border-color: var(--border-color) !important; } [data-bs-theme="dark"] .form-control, [data-bs-theme="dark"] .form-select, [data-bs-theme="dark"] textarea { background-color: #171A22; border-color: var(--border-color); color: hsl(var(--body-color)); } [data-bs-theme="dark"] .form-control::placeholder { color: var(--gray-400); } [data-bs-theme="dark"] .table { --bs-table-bg: transparent; --bs-table-color: hsl(var(--body-color)); border-color: var(--border-color); } [data-bs-theme="dark"] .bg-white { background-color: #15171D !important; } [data-bs-theme="dark"] .bg-gray-50 { background-color: var(--gray-100) !important; } [data-bs-theme="dark"] .toggle-search-box, [data-bs-theme="dark"] .modal-content { background-color: #15171D; } /* Avatar par défaut (initiales) : dégradé conservé, juste un léger assombrissement pour rester cohérent avec l'ensemble sombre */ [data-bs-theme="dark"] .avatar-upload-box { background-color: var(--gray-100) !important; }