/* =========================================================================== DailyCare MU — THÈMES par centre/utilisateur (décision PO 2026-07-17). Catalogue FERMÉ de 8 thèmes : chaque nuance est CERTIFIÉE WCAG AAA (≥ 7:1) par Unit/ThemeContrasteTests, qui vérifie AUSSI que ce fichier reste conforme à ThemeCatalogue.cs (source de vérité C#). Lavande = les tokens par défaut de dailycare-tokens.css : AUCUN bloc ici (l'absence d'attribut = défaut). Livraison STATIQUE (un seul fichier, cache navigateur) — la CSP style-src 'self' interdit tout style inline : le thème actif est porté par l'attribut data-dc-theme posé sur par les layouts (cookie utilisateur → défaut du centre → lavande). Le thème nuit pose AUSSI data-bs-theme="dark" (Bootstrap 5.3) pour basculer les composants Bootstrap. =========================================================================== */ [data-dc-theme="ocean"] { --dc-primary: #1F3D7A; --dc-primary-hover: #193264; --dc-primary-container: #DCE8FB; --dc-navbar-bg: #1F3D7A; --dc-navbar-hover: #3E588D; --dc-surface: #F7FAFF; --dc-surface-container: #DCE8FB; --dc-card-bg: #DCE8FB; --dc-card-header-bg: #A8C2EE; --dc-card-border: #D0DFF8; --dc-card-shadow-1: rgba(31, 61, 122, 0.22); --dc-card-shadow-2: rgba(31, 61, 122, 0.10); --dc-row-alt-a: #DCE8FB; --dc-row-alt-b: #C3D6F5; --bs-primary: #1F3D7A; --bs-primary-rgb: 31, 61, 122; --bs-link-color: #1F3D7A; --bs-link-color-rgb: 31, 61, 122; --bs-link-hover-color: #193264; --bs-link-hover-color-rgb: 25, 50, 100; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #1F3D7A, #4A6BB5, #8FB4FF, #D3E2FF, #5B8DF5, #1F3D7A); --dc-kpi-degrade-1: linear-gradient(120deg, #0F5E66, #2E8A93, #6FC2CB, #CDEDF0, #45A3AC, #0F5E66); } [data-dc-theme="foret"] { --dc-primary: #1B5E20; --dc-primary-hover: #164D1A; --dc-primary-container: #DCEFDC; --dc-navbar-bg: #1B5E20; --dc-navbar-hover: #246429; --dc-surface: #F5FAF4; --dc-surface-container: #DCEFDC; --dc-card-bg: #DCEFDC; --dc-card-header-bg: #A5CFA9; --dc-card-border: #D0E8D1; --dc-card-shadow-1: rgba(27, 94, 32, 0.22); --dc-card-shadow-2: rgba(27, 94, 32, 0.10); --dc-row-alt-a: #DCEFDC; --dc-row-alt-b: #C4E2C6; --bs-primary: #1B5E20; --bs-primary-rgb: 27, 94, 32; --bs-link-color: #1B5E20; --bs-link-color-rgb: 27, 94, 32; --bs-link-hover-color: #164D1A; --bs-link-hover-color-rgb: 22, 77, 26; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #1B5E20, #3F8A45, #7CBB80, #DCEFDC, #57A05C, #1B5E20); --dc-kpi-degrade-1: linear-gradient(120deg, #0F4D48, #2F7A73, #6BAFA9, #D4EDEA, #479287, #0F4D48); } [data-dc-theme="lagon"] { --dc-primary: #0F4D48; --dc-primary-hover: #0C3F3B; --dc-primary-container: #D4EDEA; --dc-navbar-bg: #0F4D48; --dc-navbar-hover: #29615C; --dc-surface: #F2FAF9; --dc-surface-container: #D4EDEA; --dc-card-bg: #D4EDEA; --dc-card-header-bg: #92CCC6; --dc-card-border: #C6E6E2; --dc-card-shadow-1: rgba(15, 77, 72, 0.22); --dc-card-shadow-2: rgba(15, 77, 72, 0.10); --dc-row-alt-a: #D4EDEA; --dc-row-alt-b: #B8DFDB; --bs-primary: #0F4D48; --bs-primary-rgb: 15, 77, 72; --bs-link-color: #0F4D48; --bs-link-color-rgb: 15, 77, 72; --bs-link-hover-color: #0C3F3B; --bs-link-hover-color-rgb: 12, 63, 59; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #0F4D48, #2F7A73, #66ACA5, #D4EDEA, #479287, #0F4D48); --dc-kpi-degrade-1: linear-gradient(120deg, #1F5C8A, #417FB0, #7FAFD4, #D6E8F7, #5D96C4, #1F5C8A); } [data-dc-theme="bordeaux"] { --dc-primary: #6E1F38; --dc-primary-hover: #5A192E; --dc-primary-container: #FADEE4; --dc-navbar-bg: #6E1F38; --dc-navbar-hover: #823E54; --dc-surface: #FFF8F9; --dc-surface-container: #FADEE4; --dc-card-bg: #FADEE4; --dc-card-header-bg: #ECA9BC; --dc-card-border: #F6D2DA; --dc-card-shadow-1: rgba(110, 31, 56, 0.22); --dc-card-shadow-2: rgba(110, 31, 56, 0.10); --dc-row-alt-a: #FADEE4; --dc-row-alt-b: #F3C6D1; --bs-primary: #6E1F38; --bs-primary-rgb: 110, 31, 56; --bs-link-color: #6E1F38; --bs-link-color-rgb: 110, 31, 56; --bs-link-hover-color: #5A192E; --bs-link-hover-color-rgb: 90, 25, 46; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #6E1F38, #99465F, #C57F94, #FADEE4, #B0637B, #6E1F38); --dc-kpi-degrade-1: linear-gradient(120deg, #5B3A78, #7E5CA0, #AC8FC9, #EBDFF7, #9575B7, #5B3A78); } [data-dc-theme="terracotta"] { --dc-primary: #79391A; --dc-primary-hover: #632F15; --dc-primary-container: #FAE2D5; --dc-navbar-bg: #79391A; --dc-navbar-hover: #84492C; --dc-surface: #FFF8F4; --dc-surface-container: #FAE2D5; --dc-card-bg: #FAE2D5; --dc-card-header-bg: #E9B294; --dc-card-border: #F6D8C6; --dc-card-shadow-1: rgba(121, 57, 26, 0.22); --dc-card-shadow-2: rgba(121, 57, 26, 0.10); --dc-row-alt-a: #FAE2D5; --dc-row-alt-b: #F3CDB8; --bs-primary: #79391A; --bs-primary-rgb: 121, 57, 26; --bs-link-color: #79391A; --bs-link-color-rgb: 121, 57, 26; --bs-link-hover-color: #632F15; --bs-link-hover-color-rgb: 99, 47, 21; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #79391A, #A05F3C, #C98F6C, #FAE2D5, #B57751, #79391A); --dc-kpi-degrade-1: linear-gradient(120deg, #8A6112, #B08A3A, #D4B372, #F7ECD2, #C29E52, #8A6112); } [data-dc-theme="ardoise"] { --dc-primary: #333F48; --dc-primary-hover: #2A343B; --dc-primary-container: #E2E9ED; --dc-navbar-bg: #333F48; --dc-navbar-hover: #505A62; --dc-surface: #F8FAFB; --dc-surface-container: #E2E9ED; --dc-card-bg: #E2E9ED; --dc-card-header-bg: #B4C5CE; --dc-card-border: #D8E2E6; --dc-card-shadow-1: rgba(51, 63, 72, 0.22); --dc-card-shadow-2: rgba(51, 63, 72, 0.10); --dc-row-alt-a: #E2E9ED; --dc-row-alt-b: #CFDAE0; --bs-primary: #333F48; --bs-primary-rgb: 51, 63, 72; --bs-link-color: #333F48; --bs-link-color-rgb: 51, 63, 72; --bs-link-hover-color: #2A343B; --bs-link-hover-color-rgb: 42, 52, 59; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #333F48, #5A6873, #8C9AA5, #E2E9ED, #73828D, #333F48); --dc-kpi-degrade-1: linear-gradient(120deg, #35506B, #5A7793, #8BA5BE, #DCE7F0, #6F8CA8, #35506B); } /* --- NUIT (mode sombre en nuances de gris) : en plus de la rampe, bascule les tokens de TEXTE (texte clair #ECEAF0, estompé #BDB8C8 — tous deux ≥ 7:1 sur fond/carte/rayure, vérifié) et le contour. data-bs-theme="dark" (posé par les layouts en même temps que data-dc-theme) bascule les composants Bootstrap (formulaires, alertes, modales). Les badges de statut (fait/attention/ incident) gardent leurs pastilles CLAIRES d'origine : lisibles sur sombre. --- */ [data-dc-theme="nuit"] { --dc-primary: #3B3B44; --dc-primary-hover: #44444A; --dc-primary-container: #3B3B44; --dc-navbar-bg: #26262C; --dc-navbar-hover: #44444A; --dc-surface: #131316; --dc-surface-container: #1D1D22; --dc-on-surface: #ECEAF0; --dc-outline: #55525E; --dc-todo: #BDB8C8; --dc-todo-bg: #26262C; --dc-card-bg: #1D1D22; --dc-card-header-bg: #3B3B44; --dc-card-border: #2C2C33; --dc-card-shadow-1: rgba(0, 0, 0, 0.50); --dc-card-shadow-2: rgba(0, 0, 0, 0.30); --dc-row-alt-a: #1D1D22; --dc-row-alt-b: #26262C; --bs-primary: #3B3B44; --bs-primary-rgb: 59, 59, 68; --bs-link-color: #C6B4F0; --bs-link-color-rgb: 198, 180, 240; --bs-link-hover-color: #D6C9F5; --bs-link-hover-color-rgb: 214, 201, 245; /* Dégradés des 2 cartes du carrousel KPI (accueil) — voir tokens. */ --dc-kpi-degrade-0: linear-gradient(120deg, #26202F, #372F47, #4A3F60, #372F47, #2C2638, #26202F); --dc-kpi-degrade-1: linear-gradient(120deg, #1C2431, #283349, #364667, #283349, #212A3C, #1C2431); } /* Retouches NUIT ciblées : les rares couleurs posées en dur pour les surfaces claires deviendraient illisibles sur sombre. Chacune repasse par un token ou une teinte claire certifiée (#C6B4F0 : 8,9:1 sur carte). */ [data-dc-theme="nuit"] .dc-compte-lien, [data-dc-theme="nuit"] .dc-langue-resume, [data-dc-theme="nuit"] .dc-theme-resume { color: #C6B4F0; } [data-dc-theme="nuit"] .dc-chip[aria-pressed="true"], [data-dc-theme="nuit"] .dc-avatar { color: var(--dc-on-surface); } /* --------------------------------------------------------------------------- Pastilles du SÉLECTEUR de thème (panneau compte + /settings). La CSP interdit style="background:…" : une classe par thème, alimentée par le catalogue — la couleur montrée est celle du MENU (la plus identitaire du thème). --------------------------------------------------------------------------- */ .dc-theme-puce-lavande { background-color: #40316A; } .dc-theme-puce-ocean { background-color: #1F3D7A; } .dc-theme-puce-foret { background-color: #1B5E20; } .dc-theme-puce-lagon { background-color: #0F4D48; } .dc-theme-puce-bordeaux { background-color: #6E1F38; } .dc-theme-puce-terracotta { background-color: #79391A; } .dc-theme-puce-ardoise { background-color: #333F48; } .dc-theme-puce-nuit { background-color: #26262C; } /* Tuiles KPI de l'accueil en NUIT : les 6 pastels clairs (site.css) deviennent 6 tons SOMBRES de même famille — le texte clair (valeur #ECEAF0, libellé #BDB8C8) reste AAA (>= 7:1) sur chaque teinte, vérifié au calcul. */ [data-dc-theme="nuit"] .dc-kpi-grille .dc-kpi:nth-child(6n + 1) { background-color: #2B2537; } [data-dc-theme="nuit"] .dc-kpi-grille .dc-kpi:nth-child(6n + 2) { background-color: #232B3A; } [data-dc-theme="nuit"] .dc-kpi-grille .dc-kpi:nth-child(6n + 3) { background-color: #28283B; } [data-dc-theme="nuit"] .dc-kpi-grille .dc-kpi:nth-child(6n + 4) { background-color: #33252C; } [data-dc-theme="nuit"] .dc-kpi-grille .dc-kpi:nth-child(6n + 5) { background-color: #1E2A38; } [data-dc-theme="nuit"] .dc-kpi-grille .dc-kpi:nth-child(6n + 6) { background-color: #2E2A20; }