/* Cabinet Infirmier Favris Sylvie — thème sombre. Pensé pour les tournées de 6 h du matin : à cette heure-là, un écran blanc dans une voiture ou dans une chambre éblouit et réveille le patient. Règle de construction : ce fichier ne redéfinit QUE des variables CSS. Aucun sélecteur profond, aucune règle de mise en page, aucun !important — il peut donc être ajouté après n'importe quelle feuille sans rien casser. Un composant qui utilise les tokens suit ; un composant qui code une couleur en dur reste inchangé, sans effet de bord. Deux déclencheurs : - le réglage du téléphone (prefers-color-scheme: dark) ; - l'interrupteur mémorisé, qui pose data-theme="sombre" ou "clair" sur et l'emporte toujours sur le réglage du téléphone. Le jeu de variables reprend celui de crm/plus/assets/plus.css et propose les alias les plus courants, pour que les feuilles du site public, du CRM et du panel en bénéficient dès qu'elles adoptent les mêmes noms. */ :root { color-scheme: light; } /* ------------------------------------------------------------- palette sombre */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { color-scheme: dark; /* fonds et surfaces */ --fond: #14171b; --fond-2: #1a1e23; --carte: #1c2025; --carte-2: #232830; --surface: #1c2025; --bg: #14171b; /* traits */ --bord: #2c3238; --bord-fort: #3a424a; --border: #2c3238; /* textes */ --texte: #e9ecef; --texte-fort: #f6f8fa; --doux: #a2a9b2; --text: #e9ecef; --muted: #a2a9b2; --ink: #e9ecef; --ink2: #aab2ba; /* alias de la feuille du CRM */ --trait: #313840; --trait2: #272d34; --ok-bg: #16281f; --att: #d9a34a; --att-bg: #2b2417; --dgr: #e8785e; --dgr-bg: #2e1d18; --info: #58b6cf; --info-bg: #14262d; --om: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px -22px rgba(0, 0, 0, .9); /* accent : légèrement éclairci, sinon le vert soin passe sous le seuil AA */ --acc: #3fb8a6; --acc2: #57cbb6; --acc-contraste: #08211e; /* états */ --ok: #4cbf9a; --attention: #d9a34a; --alerte: #e8785e; /* profondeur : dans le sombre, l'ombre ne se voit pas, la bordure fait le travail */ --ombre: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px -22px rgba(0, 0, 0, .9); --ombre-forte: 0 18px 46px -26px rgba(0, 0, 0, .95); } } /* --------------------------------------------- interrupteur : sombre forcé */ :root[data-theme="sombre"] { color-scheme: dark; --fond: #14171b; --fond-2: #1a1e23; --carte: #1c2025; --carte-2: #232830; --surface: #1c2025; --bg: #14171b; --bord: #2c3238; --bord-fort: #3a424a; --border: #2c3238; --texte: #e9ecef; --texte-fort: #f6f8fa; --doux: #a2a9b2; --text: #e9ecef; --muted: #a2a9b2; --ink: #e9ecef; --ink2: #aab2ba; /* alias de la feuille du CRM */ --trait: #313840; --trait2: #272d34; --ok-bg: #16281f; --att: #d9a34a; --att-bg: #2b2417; --dgr: #e8785e; --dgr-bg: #2e1d18; --info: #58b6cf; --info-bg: #14262d; --om: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px -22px rgba(0, 0, 0, .9); --acc: #3fb8a6; --acc2: #57cbb6; --acc-contraste: #08211e; --ok: #4cbf9a; --attention: #d9a34a; --alerte: #e8785e; --ombre: 0 1px 0 rgba(255, 255, 255, .03), 0 10px 30px -22px rgba(0, 0, 0, .9); --ombre-forte: 0 18px 46px -26px rgba(0, 0, 0, .95); } /* ------------------------------------------- interrupteur : clair forcé */ :root[data-theme="clair"] { color-scheme: light; } /* --------------------------------------------------------- images en sombre */ /* Les photos du cabinet sont très lumineuses : on baisse d'un cran leur éclat pour qu'elles ne brûlent pas l'écran au milieu d'une page sombre. Réglage purement optique, aucune modification de mise en page. */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) img:not([src$=".svg"]):not(.plein-eclat) { filter: brightness(.88) contrast(1.02); } } :root[data-theme="sombre"] img:not([src$=".svg"]):not(.plein-eclat) { filter: brightness(.88) contrast(1.02); } /* ------------------------------------------------------------------------ Site public : le thème sombre plus haut ne couvrait que les variables du CRM (--fond, --texte, --acc…). Le front utilise une autre nomenclature (--bg, --fg, --surface, --accent…) : sans ce bloc, le fond passait en sombre alors que le texte restait foncé — page illisible. ------------------------------------------------------------------------ */ @media (prefers-color-scheme: dark) { :root:not([data-theme="clair"]) { --bg: oklch(19% 0.012 178); --surface: oklch(23% 0.014 178); --surface-2: oklch(26% 0.016 178); --surface-3: oklch(30% 0.018 178); --fg: oklch(94% 0.008 178); --fg-fort: oklch(98% 0.004 178); --muted: oklch(75% 0.012 178); --border: oklch(34% 0.016 178); --border-fort: oklch(44% 0.020 178); --accent-clair: oklch(30% 0.045 178); --accent-voile: oklch(28% 0.035 178); --accent-fg: oklch(98% 0.004 178); --accent-fonce: oklch(82% 0.090 178); --accent: oklch(72% 0.110 178); --accent-2: oklch(76% 0.100 178); --accent-fonce: oklch(82% 0.090 178); --accent: oklch(72% 0.110 178); --accent-2: oklch(76% 0.100 178); --alerte-bg: oklch(28% 0.045 75); --alerte-bord: oklch(42% 0.070 75); --succes-bg: oklch(27% 0.040 155); --erreur-bg: oklch(28% 0.050 25); --sh-1: 0 1px 2px rgb(0 0 0 / .45); --sh-2: 0 4px 14px rgb(0 0 0 / .50); --sh-3: 0 12px 34px rgb(0 0 0 / .55); } } :root[data-theme="sombre"] { --bg: oklch(19% 0.012 178); --surface: oklch(23% 0.014 178); --surface-2: oklch(26% 0.016 178); --surface-3: oklch(30% 0.018 178); --fg: oklch(94% 0.008 178); --fg-fort: oklch(98% 0.004 178); --muted: oklch(75% 0.012 178); --border: oklch(34% 0.016 178); --border-fort: oklch(44% 0.020 178); --accent-clair: oklch(30% 0.045 178); --accent-voile: oklch(28% 0.035 178); --accent-fg: oklch(98% 0.004 178); --accent-fonce: oklch(82% 0.090 178); --accent: oklch(72% 0.110 178); --accent-2: oklch(76% 0.100 178); --alerte-bg: oklch(28% 0.045 75); --alerte-bord: oklch(42% 0.070 75); --succes-bg: oklch(27% 0.040 155); --erreur-bg: oklch(28% 0.050 25); --sh-1: 0 1px 2px rgb(0 0 0 / .45); --sh-2: 0 4px 14px rgb(0 0 0 / .50); --sh-3: 0 12px 34px rgb(0 0 0 / .55); }