/* * MODE DALTONIEN — instant|t * Palette accessible (deuteranopie / protanopie) * Basée sur la norme Paul Tol / IBM colorblind-safe * Activé via data-daltonien="on" sur * Sélecteur html[...] spécificité (0,1,1) > :root (0,1,0) */ /* ── Variables de couleur ── */ html[data-daltonien="on"] { --rouge: #d55e00; --rouge-fonce: #b04800; --vivant: #0072b2; --dormant: #e6b800; --finalisation:#56b4e9; } /* ── Indicateur bouton actif ── */ .btn-daltonien { font-size: 0.68rem; color: var(--gris-clair, #666); background: none; border: 0.5px solid rgba(128,128,128,0.2); padding: 0.3rem 0.7rem; cursor: pointer; font-family: 'Barlow', sans-serif; transition: all 0.2s; letter-spacing: 0.05em; } .btn-daltonien:hover { color: var(--blanc, #f0ede8); } html[data-daltonien="on"] .btn-daltonien { color: #56b4e9 !important; border-color: #0072b2 !important; background: rgba(0,114,178,0.12) !important; } /* ── Indicateur visuel navbar — barre bleue en haut ── */ html[data-daltonien="on"] .navbar { border-top: 2px solid #0072b2 !important; } /* ── Changements visibles sur toutes les pages ── */ /* Eyebrows (labels de section) : rouge → bleu */ html[data-daltonien="on"] .lobby-eyebrow, html[data-daltonien="on"] .dept-eyebrow, html[data-daltonien="on"] .section-eyebrow, html[data-daltonien="on"] .navbar-dept { color: #0072b2 !important; } /* Barre fondamentaux */ html[data-daltonien="on"] .fondamentaux { border-color: rgba(0,114,178,0.3) !important; background: rgba(0,114,178,0.04) !important; } html[data-daltonien="on"] .fondamentaux-label { color: #0072b2 !important; } /* KPIs accent (pipeline, alertes) */ html[data-daltonien="on"] .kpi-val.accent { color: #0072b2 !important; } html[data-daltonien="on"] .kpi-val.alerte { color: #d55e00 !important; } html[data-daltonien="on"] .metrique-val.accent { color: #0072b2 !important; } /* Compteurs statut (vivant/dormant/finalisation) */ html[data-daltonien="on"] .compteur[data-statut="vivant"] .compteur-dot { background: #0072b2 !important; } html[data-daltonien="on"] .compteur[data-statut="dormant"] .compteur-dot { background: #e6b800 !important; } html[data-daltonien="on"] .compteur[data-statut="finalisation"] .compteur-dot { background: #56b4e9 !important; } html[data-daltonien="on"] .compteur[data-statut="archive"] .compteur-dot { background: #888 !important; } /* Alertes / rouge dans tableaux */ html[data-daltonien="on"] .alerte, html[data-daltonien="on"] .statut-alerte { color: #d55e00 !important; } /* Badges statut inline (background coloré) */ html[data-daltonien="on"] [style*="background:var(--vivant)"], html[data-daltonien="on"] [style*="background: var(--vivant)"] { background: #0072b2 !important; } html[data-daltonien="on"] [style*="background:var(--dormant)"], html[data-daltonien="on"] [style*="background: var(--dormant)"] { background: #e6b800 !important; } html[data-daltonien="on"] [style*="background:var(--rouge)"], html[data-daltonien="on"] [style*="background: var(--rouge)"] { background: #d55e00 !important; } /* ── Cartes département (lobby) ── --dept-couleur est défini en inline style → ne peut pas être redéfini via :root On cible donc directement ::before et .dept-label */ html[data-daltonien="on"] .dept-card:nth-child(1)::before, html[data-daltonien="on"] .dept-card:nth-child(1) .dept-label, html[data-daltonien="on"] .dept-card:nth-child(1) .metrique-val.accent { color: #d55e00; } html[data-daltonien="on"] .dept-card:nth-child(1)::before { background: #d55e00 !important; } html[data-daltonien="on"] .dept-card:nth-child(2)::before { background: #e6b800 !important; } html[data-daltonien="on"] .dept-card:nth-child(2) .dept-label, html[data-daltonien="on"] .dept-card:nth-child(2) .metrique-val.accent { color: #e6b800 !important; } html[data-daltonien="on"] .dept-card:nth-child(3)::before { background: #0072b2 !important; } html[data-daltonien="on"] .dept-card:nth-child(3) .dept-label, html[data-daltonien="on"] .dept-card:nth-child(3) .metrique-val.accent { color: #0072b2 !important; } html[data-daltonien="on"] .dept-card:nth-child(4)::before { background: #56b4e9 !important; } html[data-daltonien="on"] .dept-card:nth-child(4) .dept-label, html[data-daltonien="on"] .dept-card:nth-child(4) .metrique-val.accent { color: #56b4e9 !important; } html[data-daltonien="on"] .dept-card:nth-child(5)::before { background: #009e73 !important; } html[data-daltonien="on"] .dept-card:nth-child(5) .dept-label, html[data-daltonien="on"] .dept-card:nth-child(5) .metrique-val.accent { color: #009e73 !important; } html[data-daltonien="on"] .dept-card:nth-child(6)::before { background: #cc79a7 !important; } html[data-daltonien="on"] .dept-card:nth-child(6) .dept-label, html[data-daltonien="on"] .dept-card:nth-child(6) .metrique-val.accent { color: #cc79a7 !important; } /* Couleur navbar département (top border) */ html[data-daltonien="on"] .navbar[style*="border-top"] { border-top-color: #0072b2 !important; }