/*
* console.css — shared design tokens + components for the Operations console
* SPAs (OPS-CONSOLE-702). Used by /admin/ (home) and /admin/support/; the
* older pages (metrics/login/staff/providers) keep their inline styles with
* the SAME variable names, so both generations render consistently.
* Dark by default, light via prefers-color-scheme.
*/
:root {
color-scheme: dark light;
--bg: #0d1117; --panel: #161b22; --panel-2: #1c2129; --border: #2d333b;
--text: #e6edf3; --muted: #8b949e; --accent: #58a0f9; --accent-2: #3fb950;
--danger: #f85149; --warn: #d29922;
/* Aplats sous texte BLANC (boutons, onglets, pastilles pleines) : distincts des couleurs
de texte, car #4493f8 / #f85149 sous du blanc tombent à 3,1 / 3,35:1. Visés ≥ 4,5:1 mesuré
(QA2 Régie AGENT-PC-0511-22, OPS-REGIE-SOMBRE-TABLEAU-0511-001). */
--accent-fill: #1a64d6; --danger-fill: #d1242f;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
}
html[data-theme="light"] { --bg: #f4f7fb; --panel: #fff; --panel-2: #edf2f7; --border: #d7e0eb; --text: #142033; --muted: #5e6d80;
/* Couleurs sémantiques ASSOMBRIES pour le fond clair. Celles de `:root` sont
calibrées pour du sombre : sur blanc elles tombent à 2,5-3,3 de contraste,
sous le seuil AA de 4,5 — c'est ce qui rendait les pastilles d'alerte
illisibles (OPS-CONSOLE-LIGHT-CONTRAST-001). */
/* OPS-CDP-PAQUET-PROVIDERS-ETAT-1211-001 — accent clair #1160c4 → #0f5bbb : onglet actif sur son
propre fond teinté (13 % d'accent sur --panel-2) à 4,43:1 → 4,75:1. Même teinte. */
--accent: #0f5bbb; --accent-2: #1c7a37; --warn: #8a6410; --danger: #c0322b;
--accent-fill: #1160c4; --danger-fill: #c0322b; }
html[data-theme="dark"] { --bg: #0a101a; --panel: #101925; --panel-2: #182333; --border: #273649; --text: #eaf0f7; --muted: #9aabbd;
/* Couleurs sémantiques du SOMBRE reposées ici — OPS-WEB-KO-CAMPAGNE-1211-001.
Sans elles, un poste réglé en CLAIR qui force la console en sombre héritait des valeurs
claires du bloc `@media (prefers-color-scheme: light)` ci-dessous (#1160c4, #1c7a37…) :
onglets actifs, surtitres, liens et puces tombaient à 2,0–3,3:1 sur #101925 / #0a101a
(tour web QA du 12/11). Mêmes teintes que `:root`, mesurées ≥ 4,5:1 sur --panel et --bg. */
/* OPS-CDP-PAQUET-PROVIDERS-ETAT-1211-001 — accent #4493f8 → #58a0f9 (même teinte, plus clair) :
menu mobile actif (#1c2c4d) 4,47 → 5,15:1, entrée active Hôpital/Console IA 4,19 → 4,76:1. */
--accent: #58a0f9; --accent-2: #3fb950; --warn: #d29922; --danger: #f85149;
--accent-fill: #1a64d6; --danger-fill: #d1242f; }
@media (prefers-color-scheme: light) {
:root { --bg: #f6f8fa; --panel: #ffffff; --panel-2: #eef1f4; --border: #d0d7de;
--text: #1f2328; --muted: #656d76;
--accent: #0f5bbb; --accent-2: #1c7a37; --warn: #8a6410; --danger: #c0322b;
--accent-fill: #1160c4; --danger-fill: #c0322b; }
}
/* Lissage en niveaux de gris : seulement sur fond SOMBRE.
*
* La version précédente (2026-08-06) posait la règle sans condition, sur la
* foi que « la console est sombre par défaut ». C'est faux : elle a deux
* thèmes, `html[data-theme="light"]` et la palette claire ci-dessus, et un
* poste réglé en clair les voit. Or sur fond clair, `antialiased` SUPPRIME le
* rendu sous-pixels, amincit les glyphes et délave le texte — soit exactement
* le flou que la règle prétendait corriger, dans l'autre sens.
*
* (Propriété appliquée par Chrome/Safari sous macOS seulement ; sous Windows
* elle est analysée puis ignorée, le lissage y vient de DirectWrite.) */
html[data-theme="dark"] body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
@media (prefers-color-scheme: dark) {
html:not([data-theme="light"]) body {
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
}
* { box-sizing: border-box; }
body { margin: 0; background: var(--bg); color: var(--text); min-height: 100vh; }
/* ── Header ─────────────────────────────────────────────────────────────── */
header.console {
display: flex; align-items: center; gap: .8rem; flex-wrap: wrap;
padding: .9rem 1.4rem; background: var(--panel); border-bottom: 1px solid var(--border);
position: sticky; top: 0; z-index: 5;
}
.console-brand { display:flex; align-items:center; gap:.55rem; color:var(--text); text-decoration:none; min-width:max-content; }
.console-brand img { width:34px; height:34px; object-fit:contain; }
/* ⚠️ LA CLASSE QUI NOMME LE LOGO LE DIMENSIONNE — 2026-09-04.
Elle ne portait que `object-fit` et `flex`. La TAILLE vivait dans la règle du PARENT
(`.console-brand img`), donc toute console qui bâtit son en-tête avec un autre parent
héritait d'un `` SANS dimension — et `myth-mark.png` fait 1280 × 1280 px.
Constaté par le fondateur sur « Carte & Navigation » : le logo occupait toute la page.
`flex: 0 0 auto` interdisait en plus au conteneur de le réduire.
La console `support` avait déjà résolu ça chez elle (`.brand-link img{height:34px;width:34px}`) ;
`routing`, née après, ne l'a pas repris — « le correctif livré sur une seule des deux ».
Poser la taille ICI ferme le motif pour toutes, actuelles et futures.
⚠️ Aucune régression possible : toutes les règles existantes qui dimensionnent un logo
(`.console-brand img`, `.brand-link img`, `.brand img`) sont en `.classe + type`, soit une
spécificité (0,1,1) qui l'emporte sur `.myth-logo` (0,1,0). Elles gardent donc la main. */
.myth-logo { width: 34px; height: 34px; object-fit: contain; flex: 0 0 auto; }
html[data-theme="dark"] .myth-logo { filter: brightness(0) invert(1); opacity: .92; }
html[data-theme="light"] .myth-logo { filter: none; opacity: 1; }
.console-brand span { display:grid; line-height:1.05; }
.console-brand strong { font-size:.92rem; letter-spacing:.08em; }
.console-brand small, .console-title small { color:var(--muted); font-size:.69rem; letter-spacing:.04em; }
.console-divider { width:1px; height:28px; background:var(--border); }
.console-title { display:grid; gap:.08rem; }
.console-title strong { font-size:.94rem; }
.spacer { flex: 1; }
#who { font-size: .85rem; color: var(--muted); }
.profile-summary { display:flex; align-items:center; gap:.45rem; background:transparent; border:1px solid transparent; padding:.4rem .55rem; color:var(--text); }
.profile-summary-label { font-weight:650; font-size:.82rem; }
.theme-toggle { width:34px; height:34px; padding:0; display:grid; place-items:center; font-size:1rem; }
/* ── Controls ───────────────────────────────────────────────────────────── */
button, select, input, textarea {
font: inherit; color: var(--text); background: var(--panel-2);
border: 1px solid var(--border); border-radius: 8px; padding: .42rem .7rem;
}
button, select { cursor: pointer; }
button:hover, select:hover { border-color: var(--accent); }
button.primary { background: var(--accent-fill); border-color: var(--accent-fill); color: #fff; font-weight: 600; }
button.primary:hover { filter: brightness(1.1); }
button:disabled { opacity: .55; cursor: not-allowed; }
.ghost { background: transparent; color: var(--muted); border-color: transparent; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--accent); }
/* Listes déroulantes lisibles dans les deux thèmes — OPS-CONSOLE-LISTES-LISIBLES-3010-001.
La liste OUVERTE d'un