/* Jetons de marque, communs au bureau et au portail. * * Chargé sur les deux surfaces : le bureau par app_include_css, le portail * par web_include_css. Une seule définition, donc aucune dérive possible * entre l'écran de connexion et l'application. * * La v16 porte deux familles de variables en parallèle : * * - l'ancienne, sémantique et large (--bg-color, --card-bg, --border-color), * employée par l'essentiel du bureau ; * - la nouvelle, dite « espresso » (--ink-*, --surface-*, --outline-*), * employée par les écrans refaits, dont la page de connexion. * * Les deux sont traitées ici. N'en habiller qu'une laisse la moitié de * l'interface sur la palette d'origine, sans que rien ne le signale. * * Aucune classe interne n'est visée : la feuille survit aux montées de * version. * * Le sélecteur n'est pas « :root » mais « :root:not([data-theme="dark"]) », * pour deux raisons mesurées, pas par précaution : * * - login.bundle.css redéclare « :root, [data-theme="light"] » APRÈS cette * feuille et remet --bg-color à blanc. À spécificité égale, la dernière * déclaration l'emporte : un simple « :root » était chargé puis écrasé, * sans la moindre erreur pour le signaler. Le « :not() » porte la * spécificité à (0,2,0) et tranche indépendamment de l'ordre. * * - « [data-theme="dark"] » a la même spécificité que « :root ». Un simple * « :root » posé en dernier écrasait donc le thème sombre au lieu de lui * céder. L'exclusion le laisse intact : tant que sa déclinaison à la * marque n'est pas faite, il garde ses valeurs d'origine, cohérentes. */ :root:not([data-theme="dark"]) { /* Jetons de la maison. Les crèmes perdent de la saturation à mesure qu'elles foncent, et tirent vers le papier (teinte OKLCH vers 90°) plutôt que vers le vert (100°). La palette d'août gardait la même dose de jaune à chaque cran : saturation doublée entre le fond et les bordures, et des champs et traits qui viraient au kaki sur un écran froid ou mal calibré. Les textes secondaires passent au-dessus du seuil AA avec de la marge. L'atténué d'août tenait 4,6 pour 1 sur la crème et 4,2 sur les champs, et les valeurs en lecture seule, laissées au gris de l'amont, 3,6. */ --maeba-encre: #11191F; --maeba-encre-douce: #1B252D; --maeba-creme: #FAF9F6; --maeba-accent: #FFED90; --maeba-surface: #FFFFFF; --maeba-surface-sourde: #FCFBF9; --maeba-surface-creuse: #F2F1ED; --maeba-surface-enfoncee: #ECEAE5; --maeba-surface-profonde: #E1DFD9; --maeba-bordure: #E8E6E0; --maeba-bordure-marquee: #D9D7D0; /* Trait des contrôles qui n'ont que lui pour se signaler (case non cochée) : au moins 3 pour 1 sur le blanc (3,63) et sur la crème (3,44), seuil des composants d'interface. Les traits de champ, doublés d'un libellé, restent sur les bordures ci-dessus. */ --maeba-bordure-controle: #8A867E; --maeba-texte-attenue: #5F656C; --maeba-texte-secondaire: #4A5058; /* ------------------------------------------------- famille historique */ /* Surfaces. La v16 pose du blanc partout ; le fond passe en crème pour que les cartes et tableaux se détachent au lieu de flotter sur du blanc pur. */ --bg-color: var(--maeba-creme); --fg-color: var(--maeba-surface); --card-bg: var(--maeba-surface); --navbar-bg: var(--maeba-surface); --modal-bg: var(--maeba-surface); --popover-bg: var(--maeba-surface); --toast-bg: var(--maeba-surface); --control-bg: var(--maeba-surface-sourde); --subtle-accent: var(--maeba-surface-creuse); --subtle-fg: var(--maeba-surface-sourde); --disabled-control-bg: var(--maeba-surface-creuse); /* La valeur d'un champ en lecture seule se lit, elle ne s'efface pas : c'est souvent le montant ou le tiers que l'on vient vérifier. */ --disabled-text-color: var(--maeba-texte-secondaire); /* Traits. Une bordure chaude plutôt que le gris neutre d'origine : c'est ce qui donne le ton sur les tableaux denses, là où l'utilisateur passe sa journée. */ --border-color: var(--maeba-bordure); --dark-border-color: var(--maeba-bordure-marquee); --table-border-color: var(--maeba-bordure); --btn-group-border-color: var(--maeba-bordure-marquee); --border-primary: var(--maeba-encre); /* Marque et actions. L'encre, pas l'accent : un bouton primaire jaune porterait un libellé blanc illisible. L'accent est réservé au repérage, jamais au fond d'une action. */ --brand-color: var(--maeba-encre); --primary-color: var(--maeba-encre); --primary: var(--maeba-encre); --btn-primary: var(--maeba-encre); --btn-default-bg: var(--maeba-surface-sourde); --btn-default-hover-bg: var(--maeba-surface-creuse); --btn-ghost-hover-bg: var(--maeba-surface-creuse); --sidebar-select-color: var(--maeba-surface-creuse); /* Repérage. L'accent vit ici : l'anneau de focus et le surlignage. Il attire l'œil là où c'est utile sans peser sur le reste de l'écran. */ --highlight-color: var(--maeba-surface-creuse); --yellow-highlight-color: var(--maeba-accent); --checkbox-focus-shadow: 0 0 0 3px rgba(255, 237, 144, 0.55); --highlight-shadow: 0 0 0 3px rgba(255, 237, 144, 0.55); --checkbox-color: var(--maeba-encre); --placeholder-color: var(--maeba-texte-attenue); /* ------------------------------------------------------- rampe d'états Une seule rampe, dix teintes, chacune en paire fond clair et texte foncé de la même famille. Elle sert à la fois les alertes et les pastilles d'état des listes, deux familles que la v16 tient séparées et qui divergeaient donc en couleur. Fonds sourds et légèrement chauds, pour tenir sur la crème sans virer au criard : dans une liste de deux cents lignes, l'état doit se lire sans que la couleur prenne le pas sur le contenu. Contrastes vérifiés, tous entre 6,9 et 8,9 pour 1, soit largement au-dessus du seuil AA de 4,5. Les valeurs d'origine de la v16 plafonnaient à 4,8 pour « payé » et 4,9 pour « impayé ». */ --maeba-etat-vert-fond: #DDE7CB; --maeba-etat-vert-texte: #2F4A21; --maeba-etat-rouge-fond: #F6D5CE; --maeba-etat-rouge-texte: #6E2318; --maeba-etat-ambre-fond: #FFF1B0; --maeba-etat-ambre-texte: #5A4300; --maeba-etat-orange-fond: #FBE3CE; --maeba-etat-orange-texte: #7A3B12; --maeba-etat-bleu-fond: #DDE4F2; --maeba-etat-bleu-texte: #24406E; --maeba-etat-violet-fond: #E4E1F7; --maeba-etat-violet-texte: #3B3175; --maeba-etat-cyan-fond: #D9EAEC; --maeba-etat-cyan-texte: #17505A; --maeba-etat-rose-fond: #F7DDE6; --maeba-etat-rose-texte: #6E1F3E; --maeba-etat-gris-fond: var(--maeba-surface-creuse); --maeba-etat-gris-texte: #4A5058; --maeba-etat-gris-fonce-fond: var(--maeba-bordure-marquee); --maeba-etat-gris-fonce-texte: #2B3238; /* Alertes et messages, branchés sur la rampe. L'information passe du violet au bleu : le violet reste réservé aux pastilles « purple », que la v16 emploie ailleurs, et un message d'information bleu est ce que tout le monde attend. */ --alert-bg-info: var(--maeba-etat-bleu-fond); --alert-bg-success: var(--maeba-etat-vert-fond); --alert-bg-warning: var(--maeba-etat-ambre-fond); --alert-bg-danger: var(--maeba-etat-rouge-fond); --alert-text-info: var(--maeba-etat-bleu-texte); --alert-text-success: var(--maeba-etat-vert-texte); --alert-text-warning: var(--maeba-etat-ambre-texte); --alert-text-danger: var(--maeba-etat-rouge-texte); /* Ombres. Deux couches par niveau, teintées d'encre plutôt que de noir pur : une ombre neutre sur un fond crème vire au gris sale. */ --card-shadow: 0 1px 2px rgba(17, 25, 31, 0.04), 0 4px 16px rgba(17, 25, 31, 0.04); --btn-shadow: 0 1px 2px rgba(17, 25, 31, 0.04); --modal-shadow: 0 8px 24px rgba(17, 25, 31, 0.08), 0 32px 64px rgba(17, 25, 31, 0.12); /* Barres de défilement, pour que les zones denses restent dans le ton. */ --scrollbar-thumb-color: var(--maeba-bordure-marquee); --scrollbar-track-color: transparent; /* ---------------------------------------------------- famille espresso */ /* Textes. La v16 échelonne l'encre du plus clair au plus foncé ; seuls les trois derniers crans portent du texte de lecture, ce sont les seuls à passer à l'encre de la maison. Les crans clairs restent neutres : ils servent de traits et de fonds désactivés, les réchauffer les ferait lire comme un état d'alerte. Le cran 7 porte une bonne part des libellés du bureau. Rabattu sur l'atténué, il grisait l'écran entier ; il prend le secondaire, un cran plus soutenu, et l'atténué reste au cran 6. */ --ink-gray-6: var(--maeba-texte-attenue); --ink-gray-7: var(--maeba-texte-secondaire); --ink-gray-8: var(--maeba-encre-douce); --ink-gray-9: var(--maeba-encre); --text-color: var(--maeba-encre-douce); --heading-color: var(--maeba-encre); --text-muted: var(--maeba-texte-attenue); --text-light: var(--maeba-texte-attenue); /* Surfaces. Les trois crans sombres servent de fond aux actions pleines, d'où l'encre ; les crans clairs prennent les surfaces chaudes. */ --surface-white: var(--maeba-surface); --surface-modal: var(--maeba-surface); --surface-gray-1: var(--maeba-surface-sourde); --surface-gray-2: var(--maeba-surface-creuse); /* Crans 3 et 4, employés par les écrans refaits de la v16.53. Laissés au gris neutre de l'amont, ils côtoyaient la crème et le mélange de gris froid et de gris chaud se lisait comme une salissure. */ --surface-gray-3: var(--maeba-surface-enfoncee); --surface-gray-4: var(--maeba-surface-profonde); --surface-gray-5: var(--maeba-texte-attenue); --surface-gray-6: var(--maeba-encre-douce); --surface-gray-7: var(--maeba-encre); --surface-menu-bar: var(--maeba-surface-sourde); /* Pastilles d'état des listes. La v16 les construit par « background: var(--bg-) » et « color: var(--text-on-) », une famille distincte de --alert-*. Habiller la seconde sans la première laissait les listes, c'est-à-dire l'écran où l'utilisateur passe sa journée, sur la palette d'origine : vert menthe et rose froid sur une table crème. La rampe couvre les douze noms déclarés en amont, y compris les variantes orthographiques gray et grey, que la v16 maintient toutes les deux. En manquer une laisserait une pastille froide isolée. --bg-light-gray sert aussi de fond de page à certains gabarits du portail, dans un bloc