:root{ /* LA GOUTTIÈRE — le rembourrage horizontal du corps sous 640 px, et la SEULE source de cette valeur. Les blocs qui sortent volontairement du rembourrage (le cartouche et la feuille en plein écran) la compensent par une marge négative : ils écrivaient `-14px` en dur pour un rembourrage de 12, d'où 4 px de page en trop et un défilement latéral que DESIGN.md interdit. Deux règles qui disent la même chose divergent toujours ; celles-ci LISENT. */ --gouttiere:12px; /* HAUTEUR DU BANDEAU « DÉMONSTRATION » — LA source de cette valeur : le bandeau la POSE et la barre du haut la LIT pour caler son ancrage collant. Deux nombres pour une même hauteur divergent (règle 9), et ici la divergence se voit tout de suite : la barre recouvre le bandeau ou laisse un trou. 0 en production, où le bandeau n'existe pas. */ --demo-h:30px; /* COULEURS. Ces valeurs sont celles qui s'appliquent — plus aucune couche ne les corrige plus bas. Elles ont porté un indigo #4b45d1 jusqu'au 28.07, écrasé 578 lignes plus loin par un bloc « OVERRIDE ARDOISE » : le haut du fichier annonçait une couleur que l'application n'a jamais affichée, et c'est en la citant qu'une question a été posée à Rémy pour rien. */ /* ── 01.08 (soir) — LA PALETTE CHANGE, ET AVEC ELLE LE MÉTIER DE LA COULEUR ──────────────── Rémy a fourni la palette et tranché après réserves écrites : space-indigo #2d3047 · teal #087e8b · celadon #abd1b5 · mint-cream #edf4ed · rosewood #ba324f. L'ardoise #5C6E99, épinglée le 28.07, est REMPLACÉE — ce n'est pas une dérive, c'est une décision. LA RÈGLE QUI GOUVERNE MAINTENANT : **si c'est coloré, ça se clique**. Mesuré au navigateur sur l'accueil avant correctif : 58 éléments cliquables, UN SEUL portait la moindre chroma, et 11 objets colorés étaient inertes. La couleur était exactement à l'envers — elle peignait les états, qu'on ne peut que lire, et désertait les commandes. Tenu par l'invariant K. QUATRE des cinq couleurs tombaient sur la légende métier (rosewood ↔ alarme Δteinte 11,5° ; mint-cream ↔ fond « garde tenue » ΔL* 0,49 — la MÊME couleur ; celadon ↔ fatigue calme ΔL* 3,4). On ne les fait donc pas COHABITER avec la légende, on la lui fait ABSORBER : le rosewood DEVIENT l'alarme, le mint-cream DEVIENT le fond acquis, le celadon DEVIENT la bande calme. Deux couleurs voisines qui ne servent pas au même endroit finissent toujours par se confondre ; une couleur qui EST le jeton ne le peut pas. Le teal brut ne sait pas ÉCRIRE : #087e8b mesure 4,32:1 sur la feuille, sous le plancher. D'où `--accent-ink` #006f7b (5,29:1 sur la feuille, 5,90 sur la surface) — la règle de l'aplat et de l'encre, appliquée à l'accent lui-même. */ --accent:#87a0b2; --accent-2:#2f546a; --accent-ink:#43687e; --violet:#c0c1c4; --on-accent:#02111b; /* L'EXERGUE (01.08). La palette n'a laissé AUCUNE couleur libre pour la mise en exergue : ses cinq membres sont pris par la charpente, l'action et trois signaux métier. L'indigo fait donc double emploi — charpente ET filet d'exergue — et c'est assumé, pas subi : il n'apparaît en exergue que sur la feuille, où la charpente n'est jamais. Un seul exergue par écran. */ --ex:#3f4045; --ex-ink:#58595e; --ex-pale:#e3ecf4; /* 29.07 — L'ENCRE POSÉE SUR UN APLAT TEINTÉ, POUR LE VERT ET LE ROUGE AUSSI. Ces deux tokens existaient dans `portail_med.html` DEPUIS LE 27.07 et n'ont jamais atteint la feuille partagée. Résultat : le portail était juste, la CONSOLE peignait `#fff` en dur — 23 règles, dont 6 à 2,42:1 en thème sombre (logo, bascule de rôle, onglet actif). C'est la MÊME divergence qu'au 28.07, à six heures d'intervalle, et exactement ce que le déménagement du monde visuel devait empêcher. Tant que le portail garde sa copie des 292 règles, ça recommencera : la vraie correction est de lui faire CONSOMMER cette feuille. Valeurs reprises TELLES QUELLES du portail — surtout pas recalculées : deux définitions du même token divergent d'un demi-ton, puis d'une règle entière (règle 9). MESURÉ le 29.07, jamais supposé — sombre : accent 2,42 → 7,75 · vert 2,36 → 7,59 · rouge 3,15 → 5,71. En clair les trois valent #ffffff : la substitution n'y change rien. */ --on-green:#02111b; --on-red:#ffffff; /* 29.07 — LES ENCRES DES FRISES (Tournus). Trois familles de fond y cohabitaient sans qu'aucune n'ait d'encre à elle, et l'encre de l'ACCENT était posée sur les trois : en thème sombre elle bascule à #111118 et l'on obtenait du quasi-noir sur du bleu nuit — 13 mesures entre 1,81:1 et 3,75:1. Chaque famille a désormais la sienne, mesurée : · `--on-frise` encre des 13 teintes FIXES de la frise CDC (fonds sombres, identiques dans les deux thèmes) : blanc, de 5,02:1 à 10,36:1 selon la teinte. · `--sur-pale` encre des fonds PÂLES figés (#cfe9da « présent », #94a3b8 « Off ») : 14,61:1 et 7,33:1. Le blanc y donnait 1,29:1 — la pastille de légende « présent / dispo » était illisible dans LES DEUX thèmes. · `--on-ink-soft` encre sur un aplat gris `--ink-soft` : 5,01:1 en clair, 6,93:1 en sombre (le blanc y tombait à 2,71:1 — c'est la pastille « Vacances »). Ces trois-là ne portent pas de sens métier : ce sont des encres, et elles n'existent que pour être MESURÉES contre leur fond. */ --on-frise:#ffffff; --sur-pale:#02111b; --on-ink-soft:#ffffff; /* `--ink-soft` valait #6d6f78 : 5,01:1 sur la surface blanche, mais seulement 4,36 à 4,48 sur les QUATRE aplats pâles de signal (rouge, bleu, vert, ambre) — sous le plancher, sur les libellés et les marginalia qui vivent précisément dans ces encarts. Assombri de quatre unités, calculé sur les six fonds où il se pose : le pire cas passe de 4,36 à 4,63. À l'œil, rien ne bouge ; c'est le but — une encre atténuée doit rester atténuée, et rester lisible. */ /* ── LA FEUILLE PREND LE GRAIN DE L'ARDOISE (01.08) ──────────────────────────────────────── `--bg` valait #F4F5F7, un gris quasi neutre. Le monde s'appelle « la feuille et son cartouche » : une feuille topographique n'est pas blanche, et deux blancs superposés ne font pas un champ, ils font un vide. Mesuré sur l'écran d'accueil de la console, la SEULE mesure qui décrivait vraiment le grief « ça manque d'atmosphère » : 0,08 % de la surface portait la moindre chroma, et l'accent de marque n'y peignait AUCUN pixel. La feuille reçoit donc la teinte de l'ardoise, très diluée. Ce n'est pas de la couleur, c'est de la MATIÈRE : à l'œil rien n'est « bleu », mais le blanc des blocs redevient du papier POSÉ sur quelque chose au lieu de se fondre dans le fond. Effet second, et il sert le premier grief : l'écart feuille→surface passe de ΔL* 3,49 à 4,50 — le pas que le thème SOMBRE tenait déjà (4,05). Les deux thèmes séparent enfin leurs plans du même geste, au lieu que le clair soit le plus plat des deux. L'encre atténuée y est REMESURÉE, pas supposée : 4,74:1 (contre 4,87 sur l'ancien fond), au-dessus du plancher de 4,5. */ /* ⚠ CE QUI PRÉCÈDE DÉCRIT LE GRAIN D'ARDOISE DU 01.08 (matin) : le principe TIENT, la teinte a changé le soir même. La feuille porte désormais la teinte de l'INDIGO de la charpente, même dilution — « un peu de saturation dans les gris » (Rémy). Chroma 4 à 7 en Lab, plus au milieu de l'échelle où l'œil la voit, moins aux extrêmes : rien ne paraît bleu, mais le blanc des blocs redevient du papier POSÉ sur quelque chose. Encre atténuée remesurée sur la nouvelle feuille : 4,73:1, au-dessus du plancher. */ --ink:#02111b; --ink-soft:#5f6f7b; --line:#d7e1e8; --bg:#ecf3f9; --card:#ffffff; --silver:#8b98a1; /* LA LÉGENDE ABSORBE LA PALETTE (01.08 soir — voir la note de l'accent). Le rosewood EST l'alarme, le mint-cream EST le fond acquis. Mesuré, jamais supposé : blanc sur rosewood 5,74:1 · blanc sur le vert 5,18:1 · encre acquise sur son fond 4,80:1. Le vert d'aplat a été assombri de L* 52 à 46 pour que `--on-green` (blanc) repasse le plancher : à L* 52 il mesurait 4,19:1. La vigilance est le seul signal que la palette ne fournit pas — elle ne bouge donc pas. */ /* ══ LA LÉGENDE REPREND SES TROIS COULEURS NOMMÉES (02.08, signalé par Rémy) ═══════════════ Le portage sur quatre couleurs avait fondu les signaux dans la palette : l'acquis en acier, l'alarme en vanille, la vigilance en gunmetal. Mesuré, tout tenait. À l'écran, c'était FAUX — et pour une raison qu'aucun contraste ne peut voir : **ce produit NOMME ses couleurs dans son propre texte**. Le sélecteur IOT propose « vert (supervise) · orange (autonome) · rouge (ACR seul) », les légendes disent « ● atteint · ● proche · ● loin », `fatigue.bande()` renvoie les chaînes "vert"/"orange"/"rouge", et l'inbox écrit « 2 membres en zone fatigue (dont 1 en rouge) ». Un niveau appelé ROUGE peint en olive fait mentir l'interface à chaque ligne. D'où la séparation, qui est la bonne et qu'on aurait dû garder : **les quatre couleurs gouvernent l'INTERFACE** (charpente, feuille, action, attention) ; **la LÉGENDE MÉTIER garde ses trois couleurs nommées**, désaturées pour vivre avec elles, mais reconnaissables comme leur nom. Elles ne peignent QUE des niveaux — jamais un fond de page, jamais un contrôle. RAMPE MONOTONE, dans les deux thèmes : le rouge est TOUJOURS le plus loin de la page (clair L* 52 → 45 → 38 ; sombre 66 → 70 → 74). Elles se lisent donc aussi en niveaux de gris. ⚠ LA LEÇON, pour la prochaine palette : avant de retirer une couleur, chercher si le PRODUIT l'écrit en toutes lettres. Une contrainte de vocabulaire ne se voit dans aucune mesure. */ --green:#59875e; --green-bg:#e0efe1; --orange:#8c6224; --orange-bg:#fae8d5; --red:#993a3b; --red-bg:#ffe4e1; --blue-bg:#dfedf7; /* ── BANDES DE FATIGUE — UNE ÉCHELLE, DONC UNE RAMPE DE CLARTÉ (01.08) ──────────────────── Une échelle séquentielle ne se code pas par la TEINTE seule. Les deux palettes qui ont existé ici étaient construites sur la teinte, et TOUTES DEUX étaient illisibles en gris — mesuré au navigateur, luminance sur 255 : · ce que la bande peignait vraiment (--green/--orange/--red) : 160,3 · 160,6 · 131,9 → calme et vigilance séparés de **0,3 sur 255**. Le même gris, exactement. · la famille --fat-* déclarée ici (et jamais utilisée) : écarts de 0,5 et 0,6. Autrement dit la palette DOCUMENTÉE était aussi cassée que celle en service ; adopter l'une pour l'autre n'aurait rien réglé. Le défaut n'était pas le choix des jetons, c'était le principe de construction. RAMPE : L* CIE régulier, un cran de 12 entre bandes voisines — écarts en gris désormais de 31 à 37. Le voyage de teinte vert→ambre→rouge est CONSERVÉ (il porte le sens appris) ; c'est la clarté qui fait le travail, donc la bande se lit aussi en niveaux de gris, en daltonisme, et sur un écran de nuit mal réglé. PRINCIPE, valable dans les deux thèmes : PLUS C'EST CHAUD, PLUS C'EST LOIN DE LA PAGE. En clair la page est blanche → le calme est le plus pâle, le risque le plus sombre. En sombre la page est noire → l'ordre s'inverse, et ce n'est pas une inversion mécanique : le calme est l'état le PLUS FRÉQUENT, il reste donc discret la nuit, et c'est l'alarme qui brille. Chroma modéré près du blanc (une teinte pâle très saturée vire au fluo). `--fat-extreme` EST RETIRÉ : `fatigue.bande()` ne renvoie que vert/orange/rouge — aucun chemin de code ne pouvait produire une quatrième bande. C'était une valeur morte, comme l'indigo que DESIGN.md signale déjà. */ /* 01.08 (soir) — LE CELADON DEVIENT LA BANDE CALME. Il était à ΔL* 3,4 et 1,4° de teinte de l'ancienne : deux noms pour une couleur. La rampe est RECONSTRUITE autour de lui pour garder le pas de L* 12 : 80,5 · 68,4 · 56,5 (pas de 12,1 et 11,9). Teintes du voyage vert→ambre→rouge conservées. Encre #14151a : 10,87 · 7,56 · 5,12 sur les trois. */ --fat-calme:#b2d5b4; --fat-vigil:#d6af81; --fat-risque:#dc8b86; /* Encre des trois aplats. Elle NE BASCULE PAS : les trois aplats sont clairs dans les deux thèmes, donc son fond ne bascule pas non plus (même raisonnement que `--sur-pale`). Mesurée sur les six aplats : 4,63 au pire, 11,95 au mieux. */ --fat-ink:#02111b; /* FRISE DE ROTATION. L'alternance 4+4 était peinte en --accent (SMUR) contre --violet (bloc) : deux violets voisins, illisibles côte à côte sur 53 semaines — on ne VOYAIT pas l'alternance. Règle retenue : le SMUR est COLORÉ (il est chez nous), l'ailleurs est SOURD (bloc = ardoise, urgences = sarcelle). Le contraste chaud/froid fait apparaître les blocs de 4 semaines. ⚠ LE CONTRASTE CHAUD/FROID NE SUFFISAIT PAS (01.08). Ce commentaire affirmait que l'alternance 4+4 « se voyait » depuis qu'on opposait l'ardoise à la sarcelle. Mesuré : ΔL* 2,4 en clair et 2,9 en sombre — deux teintes différentes, une seule CLARTÉ. En niveaux de gris, sur un écran de nuit mal réglé ou pour un daltonien, la frise redevenait ce qu'elle était avant le correctif : une bande unie sur 53 semaines. C'est le même défaut que les bandes de fatigue et que les postes, sur une troisième famille — d'où l'invariant I, qui les BALAIE toutes au lieu d'attendre qu'on y pense. Clartés écartées à ΔL* 9,2, teintes gardées. Ces deux teintes ne portent jamais de texte (la légende est à côté du pavé, pas dedans) : aucune encre à réapparier. */ /* ⚠ LE FOND NE DOIT PAS CRIER PLUS FORT QUE LE SUJET (01.08, après retour de Rémy : « la couleur n'est pas si facile à lire »). La frise répond à « QUI EST AU SMUR, QUAND ». Or « aux urgences » est l'état par DÉFAUT du CDC — le sous-titre le dit : « le reste du temps aux urgences » — et il occupait jusqu'à 95 % de la surface en sarcelle PLEINE, mesurée à saturation 0,47 contre 0,25 pour l'accent du SMUR. La condition la moins intéressante était la plus criante, et ce qu'on vient chercher se noyait dedans : un mur de couleur, pas une frise. L'intention était pourtant écrite dans `ROTC` depuis le début — « SMUR = COLORÉ (il est chez nous) · ailleurs = SOURD ». Écrite, jamais tenue. Les deux « ailleurs » deviennent donc de vrais fonds (saturation 0,21 et 0,16), et le SMUR reste le seul aplat vif — et l'EXTRÊME de la rampe de clarté, ce qui le fait lire comme figure. Teintes conservées (sarcelle / ardoise) : on baisse la CHROMA et on écarte la CLARTÉ, on ne change pas l'identité des états. Clartés L* : hors tournus 95,5 · urgences 84,0 · bloc 75,5 · SMUR 46,6 (écarts 28,9 · 8,4 · 11,5). */ --rot-anesth:#bbbbbf; --rot-urgences:#658092; /* LES DEUX NEUTRES DE SÉRIE (29.07). `#9aa0ab` était répété 8 fois dans `console_app.js`, `#9a9a9a` 4 fois et `#c08a3c` 3 fois — trois littéraux pour deux rôles : « rien à signaler » et « à surveiller, mais sans alarme ». Les deux gris étaient à deux unités l'un de l'autre : ils fusionnent. VOLONTAIREMENT identiques dans les deux thèmes, comme la palette de frise : une série doit rester reconnaissable d'un thème à l'autre. Ce sont des APLATS — ils peignent des barres et des points ; leur ENCRE passe par `encreDe` (console_app.js). */ /* ⚠ `--serie-neutre` BASCULE DÉSORMAIS (02.08). Le commentaire ci-dessus dit « volontairement identiques dans les deux thèmes » — c'était vrai tant qu'il ne peignait que des points et des barres de série sur fond clair. Depuis que la jauge « atteint » du tableau hélico le porte, il est un APLAT posé sur la carte : mesuré **2,63:1 sur le blanc**, sous le plancher de 3:1. Il suit donc son fond, comme les axes. ⚠ ET L'AMBRE AUSSI — j'avais écrit ici même « il reste figé : 3,03:1, au-dessus ». C'était mesuré contre le BLANC, pas contre la FEUILLE, où il tombe à 2,71:1. L'invariant N m'a pris en défaut sur la ligne que je venais d'écrire : mesurer contre le mauvais fond, c'est ne rien mesurer (règle 13). */ --serie-neutre:#8b8b8f; --serie-ambre:#7e784f; --fat-hd:#e3ecf4; --fat-hd-ink:#02111b; --fat-cell-line:#dfe6ec; --hover:rgba(2,17,27,.05); /* survol de ligne / cellule (teinté à l'encre, adapté par le dark) */ /* ── COULEURS DE POSTE — LA TEINTE DIT QUEL POSTE, LA CLARTÉ DIT COMBIEN IL PÈSE (01.08) ─── SSOT visuelle du calendrier, de la légende et des tags, sur la console ET sur le portail. ⚠ ELLES ÉTAIENT QUATRE FOIS LA MÊME COULEUR. Mesurés au navigateur, les écarts de clarté entre voisines : 0,7 · 0,9 · 1,6 en clair (L* 93,6 → 95,5) et 0,7 · 1,0 · 1,3 en sombre, soit une étendue de 1,4 SUR 255 en niveaux de gris. Le 0,3 sur 255 séparant --sh-h de --sh-n en sombre est EXACTEMENT le chiffre que DESIGN.md cite comme preuve du défaut des bandes de fatigue — corrigé le 01.08 au matin, quelques lignes plus haut, dans ce fichier. Conséquence à l'écran : le calendrier était teinté sans être lisible. Pour savoir quel poste on regardait il fallait lire la lettre (« J · », « N · », « H · ») ; la couleur ne portait rien. C'est la définition d'une couleur décorative, ce que ce système dit refuser. LA RAMPE. Les quatre postes gardent leur TEINTE — le pourpre de l'hélico est une convention du service, il ne bouge pas — et reçoivent une seconde dimension : la CLARTÉ, qui ordonne jour → soir → nuit → hélico. L'ordre n'est pas décoratif, c'est le poids réel d'une garde : le jour est l'ordinaire, la nuit pèse (+15 %, cf. heures_poste), l'hélico engage une compétence qu'aucun forçage ne contourne. Plus le poste engage, plus il s'écarte de la page. Pas de ΔL* 4,0 en clair — au-dessus du ΔL* 3,5 que le thème clair s'impose déjà entre deux plans de travail. Le chroma monte à mesure qu'on descend : un ton pâle simplement assombri vire au gris, et l'on aurait remplacé quatre blancs par quatre gris. Tenu par l'invariant I de check_charte.py, qui balaie TOUTES les familles de couleur — la règle du 01.08 n'avait été appliquée qu'à celle qui l'avait inspirée. ENCRES APPARIÉES : inchangées, sauf --sh-ht. Le pourpre #8e44ad tombait à 3,59:1 sur l'aplat hélico devenu plus dense ; assombri À TEINTE CONSTANTE (le geste déjà posé le 28.07 pour --red-ink / --green-ink / --orange-ink), il mesure 4,61:1 sur son aplat, 6,58:1 sur la feuille et 7,18:1 sur la surface. Mesuré, jamais supposé. */ /* ══ L'HÉLICO GARDE SON POURPRE (02.08, demande de Rémy) ═══════════════════════════════════ Le portage sur quatre couleurs avait fait des quatre postes une rampe d'une SEULE teinte, et le pourpre était tombé avec les autres. Il revient — mais **sans quitter son barreau** : la rampe de clarté reste la structure (jour 92 → soir 87,5 → nuit 82 → hélico 76 en clair ; 20 → 24,5 → 29 → 33,5 en sombre), et le pourpre est posé À la clarté de l'hélico, pas à la place de la clarté. La teinte (h 316) est celle du pourpre historique du service ; c'est sa CLARTÉ qui dit le poids du poste, sa teinte qui dit lequel c'est. Mesuré : encre 5,07:1 sur son aplat en clair, 5,71:1 en sombre ; ΔL* avec la nuit 6,07 et 4,45 — au-dessus du plancher de 3,5 que l'invariant I impose à toute la famille `--sh-*`. */ /* ══ LE SOIR PREND L'HEURE DORÉE (02.08, demande de Rémy) ══════════════════════════════════ Comme le pourpre de l'hélico, cet ambre est posé À la clarté du soir, pas à la place de la clarté : la rampe tient (jour 92,1 → soir 86,5 → nuit 82,1 → hélico 76 en clair ; 19,9 → 25 → 29,1 → 33,4 en sombre, écarts de 4,1 à 5,5). Deux postes portent donc une teinte propre — le soir et l'hélico — et deux restent sur l'acier : la teinte identifie, la clarté pèse. ⚠ EFFET DE BORD MESURÉ, ET CORRIGÉ ICI : en thème sombre, l'aplat du soir (L* 25) tombait sur `--orange-bg` (L* 24,05), même teinte chaude — un fond de vigilance et une garde du soir peuvent cohabiter dans une même cellule de calendrier. Le lavis de vigilance est descendu à L* 20 (ΔL* 4,9), son encre y gagne d'ailleurs : 6,44:1 contre 5,66. Encres mesurées sur leur aplat : 5,50:1 en clair, 6,57:1 en sombre. */ --sh-j:#deeaf3; --sh-jt:#395e74; --sh-s:#fdd1a3; --sh-st:#6c4c24; --sh-n:#b4d0e4; --sh-nt:#295269; --sh-h:#cdb2da; --sh-ht:#583769; /* hélico = POURPRE (convention) */ --bleu:#43687e; /* ENCRES DE SIGNAL (28.07). Le vert, le rouge et l'ambre sont définis comme des APLATS — ils sont justes en fond. Posés comme ENCRE sur la feuille claire, aucun n'atteint 4,5:1 : le rouge plafonnait à 4,09 et servait de texte 140 fois. Ces variantes assombries ne servent QU'AU TEXTE ; les aplats gardent leur valeur, donc le monde visuel ne bouge pas. C'est le symétrique de `encre-sur-*`, qui règle le cas inverse (encre claire sur aplat). Calculées, pas choisies : plancher 4,6:1 sur la feuille, la surface et l'aplat pâle du signal lui-même. En thème sombre elles valent le signal, qui y est déjà lisible. */ --red-ink:#993a3b; --green-ink:#3d6e44; --orange-ink:#845b1d; --violet-ink:#43687e; /* compat : l'ancien bleu marine de la console suit l'accent — devenu teal le 01.08 */ /* ENCRES DES SIX AXES D'ÉQUITÉ (29.07). Elles vivaient dans une table JS (`EQFIFA_ENCRE`), dont le commentaire disait lui-même qu'elles étaient « calculées, plancher 4,6:1 sur la feuille et sur la surface blanche » — donc pour le thème CLAIR uniquement. Posées telles quelles sur la carte sombre, les six chiffres du diagnostic d'équité tombaient à 3,5:1. C'est l'angle mort déclaré de `check_charte` : une encre sur un fond calculé en JS. Ici, ce sont des JETONS : le thème les bascule, et il n'y a qu'un endroit où les lire. Les APLATS, eux, restent en JS et ne basculent pas — une série doit rester discernable d'elle-même d'un thème à l'autre. Seule l'encre suit son fond. */ /* ── LES SIX AXES D'ÉQUITÉ ENTRENT DANS LA CHARTE (02.08, signalé par Rémy) ────────────── Ils vivaient dans une table JS (`EQFIFA`, console_app.js) : six teintes vives choisies hors palette, jamais mesurées entre elles, et invisibles pour l'invariant I — qui balaie les JETONS, pas les tables JS. Mesuré sur l'écran Équité après la refonte : six aplats saturés, dont CINQ hors palette. C'est l'angle mort que J avait été inventé pour couvrir, mais J ne lit que `ROTC` ; la seconde famille peinte en JS lui échappait. Ils deviennent donc des JETONS — l'invariant I les balaie par le préfixe `--eq-ax-`, et un septième axe ajouté demain entrera dans la famille tout seul. Teintes ancrées sur la palette (rosewood 16° · ambre 72° · celadon 148° · sarcelle 175° · teal 213° · indigo 289°) et surtout ÉCARTÉES EN CLARTÉ : pas de L* 5,0 entre voisines, contre 0,4 à 2,1 auparavant. La frise se lit désormais en niveaux de gris — ce que six teintes vives à clarté égale ne permettaient pas, malgré leur vivacité. ⚠ ILS BASCULENT — J'AVAIS ÉCRIT L'INVERSE ICI MÊME, ET C'ÉTAIT FAUX (02.08, signalé par Rémy : « je t'ai pointé les mauvaises couleurs sur fond sombre »). J'avais gelé les six aplats « pour qu'une série reste reconnaissable d'un thème à l'autre » — un principe hérité, et juste en soi. Mais une VALEUR UNIQUE ne peut pas tenir 3:1 contre un fond L* 100 ET contre un fond L* 13,4. Mesuré : en SOMBRE `--eq-ax-helico` tombait à **2,65:1** sur la carte (la barre disparaissait) ; en CLAIR `--eq-ax-jours` à **2,52:1** et le neutre de série à **2,63:1** — donc la jauge « atteint » que je venais de poser sur le tableau hélico était elle-même sous le plancher. Le défaut était dans les DEUX thèmes, pas seulement celui qu'on regardait. C'est EXACTEMENT l'erreur du rail teal, commise deux heures plus tôt dans la même session sur une autre famille : une encre — un aplat ici — se calcule contre SON fond. Ce qui porte l'identité d'une série, ce n'est pas la valeur : c'est la TEINTE et l'ORDRE de clarté. Les deux sont conservés (helico < feries < heures < nuits < we < jours) ; seule l'échelle se déplace — L* 38→58 en clair, 55→75 en sombre. Plancher 3:1 contre la carte ET contre la piste de la jauge (WCAG 1.4.11, élément non textuel), tenu par l'invariant N. */ --eq-ax-helico:#88898c; --eq-ax-feries:#5f5b33; --eq-ax-heures:#26526b; --eq-ax-nuits:#4a697e; --eq-ax-we:#6b8291; --eq-ax-jours:#797346; --eq-ink-heures:#26526b; --eq-ink-nuits:#4a697e; --eq-ink-we:#576d7d; --eq-ink-feries:#5f5b33; --eq-ink-helico:#6a6a6e; --eq-ink-jours:#716c3f; /* sidebar — neutre profond, plat (plus de dégradé navy) */ /* 28.07 — MÊME CORRECTIF QUE LE PORTAIL, ET VOILÀ POURQUOI IL A FALLU L'ÉCRIRE DEUX FOIS. `--side-ink-soft` valait #7d7f8a : mesuré 4,27:1 sur la charpente #1b1c21 et 3,62:1 sur la pastille de rôle — sous 4,5 dans les DEUX thèmes. « Déconnexion » et l'onglet de rôle inactif étaient illisibles. La charpente est sombre quel que soit le thème : son encre se calcule contre SON fond, pas contre le thème. #9a9ca6 → 6,30:1 et 5,24:1. ⚠ Ce bloc et celui de portail_med.html sont DEUX copies du même monde : corrigé le matin dans le portail, le défaut vivait encore ici l'après-midi, dans la console. C'est le doublon qu'on résorbe juste en dessous (CARTOUCHE_CSS, servi aux deux pages). */ /* 01.08 (soir) — LA CHARPENTE PASSE AU SPACE-INDIGO. Elle s'ÉCLAIRCIT : L* 10,4 → 20,5. C'est la conséquence la plus visible du choix de palette, et elle a été signalée avant : le cartouche n'est plus un quasi-noir, c'est une ardoise profonde. L'ordre des plans tient toujours (charpente 20,5 < feuille 95,6 < surface 100), et la règle du cartouche ne bouge pas : ce noir bleu porte la charpente et rien d'autre. Encre 10,51:1, atténuée 6,00:1, rail teal 6,34:1 — mesurés contre SON fond, jamais contre le thème. */ --side-1:#02111b; --side-2:#141f26; --side-3:#09161d; --side-line:#2d3b44; --side-ink:#ffffff; --side-ink-soft:#aaabae; /* formes */ /* LES FORMES SE DURCISSENT (29.07, reset visuel). 8/6/4 → 4/3/2. Un angle très arrondi matelasse, et un outil de planification n'a rien à amortir : c'est la signature du tableau de bord SaaS que ce système dit refuser depuis le premier jour. Le durcissement se lit surtout là où la forme se RÉPÈTE — cellules de calendrier, pastilles, cartes de mesure. Seule la pastille d'état reste pleinement ronde : sa forme porte du sens (« la règle du niveau rond »). */ --radius:4px; --radius-s:3px; --radius-xs:2px; /* L'ANNEAU DE FOCUS EST UN JETON (01.08). Il était écrit EN DUR huit fois — cinq ici, deux dans le portail, une dans console_app.js — toutes à l'ancienne ardoise rgba(92,110,153,.18). Un changement d'accent laissait donc huit anneaux sur l'ancienne couleur, et rien ne pouvait le signaler : ce n'est ni un `color:` ni un `background:`, aucun invariant ne le regardait. Il se DÉRIVE de l'accent, comme la lueur du cartouche. */ /* L'ENCRE DE LA NAVIGATION (02.08). Depuis que la navigation sort du coloriage, elle a besoin d'une encre à elle : elle n'est ni l'encre du texte (elle doit rester en retrait de l'onglet courant) ni l'encre atténuée du thème — en sombre, celle-ci est un GRIS, et Rémy veut du BLANC : « en mode sombre cela doit être en blanc les écritures ». Un jeton, deux valeurs, mesurées contre le plan qui les porte. */ --nav-ink:#c0c1c4; --anneau:0 0 0 3px rgba(135,160,178,.42); /* LE CONTOUR D'UN CONTRÔLE (01.08). « Seuls les cliquables sont colorés » ne se joue pas que dans l'encre : un bouton fantôme au filet neutre reste un rectangle inerte. Son contour prend donc l'accent, très dilué — assez pour dire « ceci se presse », pas assez pour crier. */ --accent-bord:rgba(67,104,126,.34); --shadow:0 1px 2px rgba(2,17,27,.06); --shadow-s:0 1px 1px rgba(2,17,27,.05); /* LE VOILE (29.07). Le système déclarait ses ombres et pas ses VOILES : chaque écran modal en inventait un — rgba(15,23,42,.12), rgba(10,14,30,.55), rgba(10,10,20,.42) : trois bleus nuit différents, aucun dans la palette. C'est le trou qu'un faux positif du détecteur avait mis au jour (« hors palette » : la règle n'avait rien à quoi comparer). Comme une ombre, un voile se teinte à l'ENCRE, jamais à une couleur d'ambiance. Deux profondeurs : le voile léger d'un traitement en cours, le voile franc d'une boîte de dialogue. */ --voile:rgba(2,17,27,.30); --voile-fort:rgba(2,17,27,.58); --font:'Archivo',system-ui,-apple-system,'Segoe UI',Roboto,Arial,sans-serif; /* RESET DU 29.07 — « la typographie devient éditoriale » (DESIGN.md). Le display passe de Fira Sans à NEWSREADER, une serif de presse : un planning est un document qu'on LIT, pas un tableau de bord qu'on surveille. Le contraste serif/monospace remplace le contraste bloc/fond qu'on vient de retirer des contrôles. Replis en serif système, jamais en sans. */ --display:'Newsreader',Georgia,'Times New Roman',serif; /* LA CHASSE FIXE EST UN JETON (29.07). Elle était réécrite en toutes lettres 20 fois dans cette feuille et dans le portail — c'est-à-dire 20 endroits à corriger le jour où la pile de repli change, et 20 occasions de diverger (règle 9). Elle porte trois métiers : la légende, la marginalia, et depuis le reset les HORAIRES — `07:30→07:30` s'aligne d'une ligne à l'autre. */ --mono:'Space Mono',ui-monospace,Menlo,Consolas,monospace; } *{box-sizing:border-box} body{font-family:var(--font);background:var(--bg);color:var(--ink);font-size:14px;line-height:1.55; font-weight:400;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility;letter-spacing:-.05px;margin:0} /* ⚠ UN CONTRÔLE N'HÉRITE PAS DE LA POLICE DU DOCUMENT (29.07, trouvé par la passe d'audit de la vue « Générer »). Le navigateur impose sa propre face aux `button`, `input`, `select` et `textarea` — sur macOS, Arial 13,33 px. Les classes qui pensaient à écrire `font-family:inherit` allaient bien (`.ui-btn`, `.btn`, `.seg button`) ; `button.go` — LA classe de bouton la plus employée de la console — ne le faisait pas. Tous ses boutons étaient donc composés en ARIAL, dans une application dont la charte déclare trois familles choisies. Le défaut ne se voyait pas parce qu'une grotesque ressemble à une autre en 12,75 px ; il s'est vu en le MESURANT. Corrigé à la racine plutôt que classe par classe : tout contrôle hérite, désormais et pour tout contrôle écrit demain. Les champs qui veulent la chasse fixe la redemandent plus bas. */ button,input,select,textarea{font-family:inherit} h1,h2,h3,.display{font-family:var(--display);font-weight:600;letter-spacing:-.3px} /* Un lien ne se teinte plus : il se SOULIGNE. C'est l'affordance la plus ancienne du web, et elle ne coûte pas une couleur. Le survol épaissit le filet et le passe à l'accent. */ a{color:var(--ink);text-decoration:none;box-shadow:inset 0 -1px 0 var(--silver)} a:hover{box-shadow:inset 0 -2px 0 var(--accent)} a.hb-link,a.sb-link,a.go,a.ui-btn,a.btn,a.porte,a.lg2-lien{box-shadow:none} a.hb-link:hover,a.sb-link:hover,a.go:hover,a.ui-btn:hover,a.btn:hover,a.porte:hover{box-shadow:none} /* ---------- layout coquille ---------- */ .shell{display:grid;grid-template-columns:248px 1fr;min-height:100vh} .sb{background:var(--side-1);color:var(--side-ink); display:flex;flex-direction:column;position:sticky;top:0;height:100vh;border-right:1px solid var(--side-line)} .sb-brand{display:flex;align-items:center;gap:11px;padding:18px 18px 16px} /* LA MARQUE N'EST PLUS UN CARRÉ COLORÉ (29.07). Un carré arrondi teinté portant une initiale est le logotype par défaut de toutes les interfaces générées — et il posait, en prime, le plus gros aplat d'accent permanent de l'écran, présent sur CHAQUE page. Il devient une capitale gravée : la serif du display, un filet d'un pixel, un angle presque droit. L'écusson du service reste l'identité qui gouverne le DISCOURS ; il n'a jamais eu à colorer un carré de 32 px. */ .sb-logo{width:32px;height:32px;border-radius:var(--radius-xs);background:transparent;border:1px solid var(--side-line); display:grid;place-items:center;font-family:var(--display);font-weight:600;color:var(--cartouche-ink);font-size:15px;letter-spacing:0} .sb-brand b{color:var(--cartouche-ink);font-size:15px;font-weight:600} .sb-brand span{display:block;font-size:11px;color:var(--side-ink-soft)} .sb-nav{padding:6px 10px;overflow:auto;flex:1} .sb-grp{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:#647691;margin:15px 12px 4px;font-weight:700} .sb-grp-d{display:block;font-size:11px;text-transform:none;letter-spacing:0;color:#9aa7bd;font-weight:500;margin-top:1px} .sb-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:var(--radius);color:var(--cartouche-ink); text-decoration:none;font-size:13.5px;font-weight:500;cursor:pointer;margin:2px 0;transition:.15s;border:none;background:none;width:100%;text-align:left} .sb-link svg{width:17px;height:17px;flex:none;opacity:.85} .sb-link:hover{background:rgba(255,255,255,.06);color:var(--cartouche-ink)} .sb-link.on{background:rgba(255,255,255,.11);color:var(--cartouche-ink);box-shadow:inset 2px 0 0 var(--accent)} .sb-link .pillN{margin-left:auto;background:var(--red);color:var(--on-red);font-size:11px;font-weight:700;padding:1px 7px;border-radius:20px} .sb-who{border-top:1px solid var(--side-line);padding:12px 16px;display:flex;align-items:center;gap:10px} .sb-who .av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,.08);display:grid;place-items:center;color:#e7e8ee;font-weight:600;font-size:13px} .sb-who b{color:#e7eefb;font-size:13px;font-weight:600} .sb-who small{display:block;color:var(--side-ink-soft);font-size:11px} .main{display:flex;flex-direction:column;min-width:0} /* 0,82 d'opacité ne masquait pas assez : le contenu défilait DESSOUS et restait fantomatiquement lisible à travers la barre. `DESIGN.md` proscrit le verre dépoli DÉCORATIF ; ici il ne l'est pas, mais il doit faire son travail — 0,96 laisse la sensation de matière sans laisser passer le texte. */ .tb{position:sticky;top:0;z-index:5;background:rgba(255,255,255,.96);backdrop-filter:blur(10px); border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:13px 26px} .tb h1{font-size:26px;margin:0;font-weight:700;letter-spacing:-.02em} .tb .sub{color:var(--ink-soft);font-size:11px;margin-top:1px} .tb .spacer{flex:1} /* LA LIGNE DE CARTOUCHE (01.08). L'en-tête de page empilait TROIS lignes — le titre, le sous-titre, puis « à jour 21:47 » sur une quatrième voix (11,5 px, sans-serif, sa propre couleur). Trois voix pour situer un écran, dans la bande la plus chère de l'application : elle se répète sur les 34 écrans, et le contenu commençait 208 px plus bas. Un cartouche de carte porte le titre ET sa date d'édition SUR LA MÊME LIGNE, séparés d'un filet. C'est ce que fait cette rangée : sous-titre · fraîcheur · marqueur, une seule voix (la meta monospace de `DESIGN.md`), un seul filet vertical entre deux mentions. 22 px repris sur chaque écran, et une graduation de moins à lire. */ .tb-meta{display:flex;align-items:center;flex-wrap:wrap;gap:0 10px;margin-top:3px;min-width:0} .tb-meta>*{min-width:0} /* Le sous-titre et son filet séparateur ont quitté cette rangée le 01.08 (couche de slogans) : leurs règles partent avec eux — une classe sans porteur est une ruine qu'on croit vivante. */ @media (max-width:620px){ .tb-meta{row-gap:2px} } /* La fraîcheur parle désormais la MÊME langue que le sous-titre (meta monospace, 11 px, capitales, +0,04em) au lieu de sa quatrième voix à 11,5 px. Elle reste au plancher documenté, jamais en dessous. Le point garde sa transition : c'est lui qui pulse quand une donnée vient de changer. */ #tb_fresh{display:inline-flex;align-items:center;gap:6px;font-family:var(--mono);font-size:11px; letter-spacing:.04em;text-transform:uppercase;color:var(--ink-soft);transition:color .4s} #tb_fresh_dot{width:7px;height:7px;border-radius:50%;background:var(--ink-soft);flex:none; display:inline-block;transition:background .4s,box-shadow .4s} .content{padding:22px 26px 44px;max-width:1280px;width:100%} /* ---------- sous-onglets (segmented) ---------- UNE SEULE GRAMMAIRE D'ÉTAT, À TOUTES LES LARGEURS (29.07, reset visuel). L'actif se disait de DEUX façons selon la largeur : aplat d'ardoise sous 881 px, soulignement au-dessus. Deux grammaires pour un même état — et c'est la mauvaise qui s'affichait au téléphone, là où le portail est le plus utilisé. Désormais, partout et pour tous les sélecteurs : SOULIGNEMENT de 2 px, encre pleine, graisse 600. Rien d'autre ne change entre l'état inactif et l'état actif, et c'est suffisant — c'est même la seule chose qui se lit du premier coup d'œil dans une rangée. La BOÎTE disparaît aussi : une rangée d'onglets n'a pas besoin d'être encadrée, un filet dessous suffit et il aligne les onglets sur le corps de la page. */ .seg{display:inline-flex;gap:2px;background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0;flex-wrap:wrap;margin-bottom:16px} /* ⚠ L'INVERSION DES ONGLETS DU 01.08 EST ANNULÉE (02.08) — voir la note de `.hb-link`. J'avais coloré l'onglet inactif « puisqu'il est cliquable ». Sur l'espace Planifier cela faisait HUIT sous-onglets teal d'affilée : un ruban de couleur en travers de la page, pour dire une chose que le filet de 2 px disait déjà. Retour à la grammaire du 29.07 : l'inactif en encre atténuée, le courant en encre pleine, soulignement de 2 px. */ .seg button{border:none;background:none;padding:9px 14px;border-radius:0;font-size:13px;font-weight:500;color:var(--nav-ink);cursor:pointer;font-family:inherit;transition:.12s} .seg button:hover{color:var(--ink)} .seg button.on{background:transparent;color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)} .seg.sub{background:transparent;border:none;border-bottom:1px solid var(--line);border-radius:0;padding:0;gap:0} .seg.sub button{background:none;border:none;font-size:13.5px;font-weight:500;padding:11px 0;border-radius:0;color:var(--nav-ink)} .seg.sub button:hover{background:transparent;color:var(--ink)} .seg.sub button.on{background:transparent;color:var(--ink);font-weight:600;box-shadow:inset 0 -2px 0 var(--accent)} /* ---------- boutons ---------- */ /* ── LA COULEUR CLASSE, ELLE NE SIGNALE PAS (02.08) ───────────────────────────────────────── Troisième et dernier recul sur « tous les cliquables sont colorés ». Sur la file « à traiter » du Hub, SIX boutons portaient l'accent — encre ET contour, donc la couleur posée deux fois par bouton, six fois de suite. Plus rien ne classait : la couleur éclairait tout au lieu de désigner. Et sur le quasi-noir du thème sombre, six contours cyan à L* 72 font le « poste de pilotage néon sur noir » que ce système nomme explicitement comme contre-référence. La charte le disait déjà, depuis le reset du 29.07 : **un seul bouton principal par écran**. Le fantôme redevient donc un fantôme — encre du texte, contour au filet — et l'accent reste au SEUL bouton principal, qui le porte trois fois (contour à l'encre d'action, filet de 2 px, graisse 600). Sur la capture de Rémy, l'œil va enfin à « Voir la fatigue », c'est-à-dire à la seule décision urgente — celle que sa ligne signale déjà par son fond. Les LIENS gardent l'accent : un lien dans une phrase n'a aucune autre affordance. */ .ui-btn{background:transparent;border:1px solid var(--line);border-radius:var(--radius);padding:6px 12px;font-size:12.75px;font-weight:500;cursor:pointer;color:var(--ink); display:inline-flex;align-items:center;gap:6px;line-height:1.35;letter-spacing:-.1px;transition:.12s;font-family:inherit} .ui-btn:hover{background:var(--hover);border-color:var(--silver)} /* L'ACTION PRINCIPALE EST UN TAMPON, PAS UNE PASTILLE (29.07, reset visuel). Plus d'aplat : elle se distingue par TROIS choses simultanées — un contour à l'ENCRE PLEINE (et non au filet), un soulignement interne de 2 px en ardoise, et la graisse à 600. Sur fond identique au fantôme, c'est la force du contour qui la désigne, et le filet d'accent qui dit « c'est celle-là ». Testé au gris : les trois signaux survivent, ce qu'un aplat coloré ne garantissait pas. */ /* ── LE CLIQUABLE SE DIT PAR UN BOUTON, PAS PAR UNE TYPOGRAPHIE (02.08, décision de Rémy) ─── « Pas fan de cette typo en bleu comme ça… retire-la partout et fais des boutons de couleur si tu veux faire du cliquable. Reviens sur du simple, beau, épuré. » 102 encres d'action sont redevenues l'encre du texte. Ce qui porte la couleur, désormais, c'est UN OBJET — l'action principale, en aplat plein — et non des mots teintés éparpillés. ⚠ CECI REVIENT SUR LE RESET DU 29.07 (« l'accent ne remplit plus, il souligne »), et c'est la même personne qui l'avait demandé puis l'annule, en connaissance de cause. Ce que le reset combattait n'était pas l'aplat en soi : c'étaient CINQ aplats simultanés à 375 px. La règle qui reste, et que l'invariant G tient désormais, est le vrai remède : **un seul contrôle par écran porte un aplat d'accent — l'action principale, et rien d'autre.** Encres mesurées sur l'aplat : 4,81:1 en clair (blanc sur #087e8b), 8,62:1 en sombre. */ .ui-btn.primary{background:var(--accent);color:var(--on-accent);border-color:transparent;font-weight:600;box-shadow:none} .ui-btn.primary:hover{background:var(--accent-2);border-color:transparent;box-shadow:none} .ui-btn.ghost{background:transparent;border:1px solid var(--line);color:var(--ink)} .ui-btn.ghost:hover{background:var(--hover);border-color:var(--silver)} .ui-btn.sm{padding:5px 11px;font-size:12.5px;border-radius:var(--radius)} .ui-btn:disabled{opacity:.5;cursor:default;transform:none} /* DESTRUCTIF (charte UX, principe B « sûr par défaut ») : le ROUGE est RÉSERVÉ à ce qui supprime ou remplace des données (Supprimer, De zéro). Il ne s'applique JAMAIS à une action courante — ni aux boutons « ↩ Annuler », qui sont des SÉCURITÉS (retour en arrière), pas des dangers. Modificateur unique, valable sur .ui-btn / .subtab / .go → un seul style destructif dans toute la console. */ .ui-btn.danger,.subtab.danger,.go.danger{color:var(--red-ink);border:1px solid var(--red);background:transparent} .ui-btn.danger:hover,.subtab.danger:hover,.go.danger:hover{background:var(--red-bg);border-color:var(--red-ink)} /* ---------- L'ÉTAPE D'UNE CHAÎNE (29.07) ---------- Pour un écran qui déroule un PROCESSUS — « ① Désidérata », puis « ② Générer & publier ». Deux défauts se répondaient sur la vue « Générer » : l'étape ① vivait dans une carte encadrée quand l'étape ② n'était qu'une ligne nue, si bien que deux moments de MÊME rang ne se ressemblaient pas ; et la carte ajoutait un troisième contour sous deux rangs de navigation déjà encadrés. Ici : aucune boîte. Un numéro atténué, un titre en serif, un filet plein sur toute la largeur — le filet SÉPARE et le blanc GROUPE, ce qu'un cadre fait moins bien parce qu'il fait les deux à la fois. Plus d'espace au-dessus du titre qu'en dessous (34 / 12), comme partout. ⚠ Le numéro reste « ① » / « ② » et NON « 01 » / « 02 » : plusieurs messages de l'application renvoient à « ② Générer » en toutes lettres (toasts, infobulles). Renuméroter l'écran aurait cassé la référence sans que rien ne le signale. */ .etape{display:flex;align-items:baseline;gap:11px;flex-wrap:wrap;margin:34px 0 12px;padding-bottom:9px; border-bottom:1px solid var(--line)} .etape:first-child{margin-top:4px} .etape .n{font-size:15px;font-weight:400;color:var(--ink-soft);flex:none;line-height:1} .etape h3{font-family:var(--display);font-size:19px;font-weight:600;letter-spacing:-.01em;margin:0;line-height:1.1} .etape .sep{flex:1;min-width:8px} /* Les actions posées sur la ligne d'étape se recentrent sur elle : alignées sur la LIGNE DE BASE du titre, un bouton paraît tomber. */ .etape .go,.etape .ui-btn,.etape .act-link,.etape a{align-self:center;margin-top:0;margin-bottom:0} /* Le corps d'une étape s'aligne sur son titre, sans se refermer dans un cadre. */ .etape-bd{margin:0 0 6px} /* ---------- LE DÉCLENCHEUR DISCRET (29.07, reset visuel) ---------- Pour une action secondaire NOMMÉE qui doit rester trouvable sans peser : « Je ne peux plus → ». Le bouton fantôme ne convenait pas — sa boîte à filet, posée seule sous un titre, pèse autant qu'un bouton principal tout en étant illisible de nuit : encre atténuée sur filet atténué, les deux à faible contraste sur la surface. Mesuré sur le portail en thème sombre avant d'y toucher. Ici : pas de boîte du tout. L'encre PLEINE (donc le contraste du texte porteur, pas celui d'un libellé), un filet d'un pixel sous le texte seul, un chevron fin. Au survol le filet passe à l'ardoise et double d'épaisseur — le filet change, jamais la position ni la taille. Sa cible tactile passe par une zone de frappe, pas par la police (règle du doigt). */ .act-link{display:inline-flex;align-items:center;gap:7px;background:none;border:none;padding:2px 0; font-family:var(--font);font-size:13px;font-weight:600;color:var(--ink);letter-spacing:-.1px; line-height:1.6;cursor:pointer;position:relative; box-shadow:inset 0 -1px 0 var(--silver);transition:box-shadow .12s cubic-bezier(.22,1,.36,1),color .12s cubic-bezier(.22,1,.36,1)} .act-link:hover{color:var(--ink);box-shadow:inset 0 -2px 0 var(--accent)} .act-link:focus-visible{outline:none;box-shadow:inset 0 -2px 0 var(--accent),var(--anneau)} /* ⚠ UN `role=button` DOIT SE VOIR QUAND ON L'ATTEINT (01.08). Les cartes de groupe et les cartes de radar d'Équité viennent de recevoir rôle, tabindex et clavier (`gesteClavier`) : sans anneau, on les atteint au clavier sans savoir où l'on est — un focus invisible n'est pas de la navigation, c'est de la devinette. Même anneau que les champs et les boutons, pour ne pas inventer une troisième signalétique de focus. `:focus-visible` : rien ne s'affiche à la souris. ⚠ `outline`, pas `box-shadow` : ces cartes portent DÉJÀ un `box-shadow` (le liseré du panneau), qu'une ombre de focus écraserait — et l'anneau doit survivre au mode contraste élevé, qui supprime les ombres mais garde les contours. */ [role="button"]:focus-visible{outline:2px solid var(--accent);outline-offset:2px; box-shadow:var(--anneau)} .act-link .chev{width:14px;height:14px;flex:none;stroke-width:1.5;fill:none;stroke:currentColor} /* La zone de frappe vaut pour TOUS les pointeurs : viser un filet d'un pixel à la souris n'est pas agréable non plus, et elle ne déforme rien puisqu'elle est invisible. ⚠ ELLE NE S'ÉTENDAIT QUE VERTICALEMENT (31.07). `left:0;right:0` lui donnait la largeur du texte : un déclencheur court restait une cible courte — « Voir → » mesuré à 42,4 × 44 px. La hauteur était traitée, la largeur pas : le même défaut, à la même date, que la règle tactile générale. Elle atteint désormais 44 px dans les DEUX sens, par l'idiome que le système emploie déjà pour `.frm-choix` — le glyphe garde sa taille, la cible grandit. */ .act-link::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%); width:100%;min-width:44px;height:44px} /* L'EXPOSANT EST DU TEXTE D'INTERFACE (31.07). `sup` et `sub` prennent `font-size:smaller` du navigateur — mesuré à 10,4 px sur « 1er » dans les règles RH, donc sous le plancher, sans qu'aucune déclaration du projet ne le dise. C'est le pendant de l'invariant A étendu aux rem : une taille peut être fautive sans être écrite. On pose un plancher, la proportion est gardée partout où le parent est assez grand pour la permettre. */ sup,sub{font-size:max(11px,.75em)} /* ---------- L'HORAIRE EST UNE MESURE (29.07) ---------- `07:30→07:30` était composé dans la face du display, collé au libellé du poste dans le même bloc — donc lu comme la SUITE du titre, alors que c'est une grandeur. En chasse fixe il s'aligne d'une ligne à l'autre et la colonne des heures se lit verticalement, ce qu'aucune proportionnelle ne permet. C'est l'emploi légitime de la monospace : une donnée, pas un costume. */ .hor{font-family:var(--mono);font-size:13px;font-weight:400;letter-spacing:.02em;color:var(--ink-soft); font-variant-numeric:tabular-nums} /* ---------- cartes ---------- */ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);box-shadow:none} .panel-hd{padding:14px 18px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px} .panel-hd h3{margin:0;font-size:14.5px;font-weight:600} .panel-hd .more{margin-left:auto;color:var(--ink);font-size:12.5px;font-weight:550;cursor:pointer;text-decoration:none} .panel-bd{padding:16px 18px} .row{display:grid;gap:16px} /* UNE PISTE DE GRILLE NE RÉTRÉCIT PAS TOUTE SEULE. Par défaut un élément de grille porte `min-width:auto` : il refuse de passer sous la largeur de son contenu, et c'est la PISTE qui s'élargit — donc la page entière. Mesuré le 28.07 : dans « Réglages de génération », un calendrier poussait un `.panel` à 854 px dans une fenêtre de 760, et toute la console glissait latéralement. La rupture à 880 px fonctionnait pourtant : elle passait bien en une colonne, mais une colonne trop large. C'est `min-width:0` qui manquait, pas un point d'arrêt. */ .row>*,.cols>*,.grid-kpi>*{min-width:0} /* Le conteneur à défilement des tableaux larges. Il existait dans le portail depuis le 27.07 et PAS dans la feuille partagée : la console n'en avait donc aucun, et sa table « Comptes & accès » (7 colonnes, 816 px) poussait la page. La charte : un tableau large défile dans SA boîte, le corps de la page jamais. */ .tscroll{overflow-x:auto;-webkit-overflow-scrolling:touch;max-width:100%} .grid-kpi{display:grid;gap:16px;grid-template-columns:repeat(auto-fit,minmax(160px,1fr))} .kpi{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:15px 16px;box-shadow:none} .kpi .lab{color:var(--ink-soft);font-size:12px;font-weight:550;display:flex;align-items:center;gap:7px} .kpi .lab .dot{width:9px;height:9px;border-radius:50%} .kpi .v{font-family:var(--display);font-size:28px;font-weight:600;margin-top:7px;letter-spacing:-.8px} .kpi .t{font-size:11px;margin-top:3px;font-weight:550} .up{color:var(--green-ink)} .down{color:var(--red-ink)} .flat{color:var(--ink-soft)} /* ---------- aide / note ---------- */ .note{font-size:12.5px;color:var(--ink-soft);background:var(--bg);border:1px solid var(--line);border-radius:var(--radius);padding:9px 13px;margin-bottom:16px;line-height:1.5} .hint{color:var(--ink-soft);font-size:13px;line-height:1.55;margin-bottom:14px;max-width:760px} /* ---------- tables ---------- */ .ui-table{width:100%;border-collapse:separate;border-spacing:0;font-size:13px} .ui-table th{text-align:left;font-size:11.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--ink-soft);font-weight:700;padding:10px 14px;border-bottom:1px solid var(--line)} .ui-table td{padding:11px 14px;border-bottom:1px solid var(--line)} .ui-table tr:last-child td{border-bottom:none} /* ---------- LE COMPARATIF (29.07) : `.ui-table.compare` ---------- Pour choisir ENTRE des options mesurées sur les mêmes critères. Les variantes du solveur étaient trois cartes côte à côte, chacune portant six mesures et quatre boutons : dix-huit chiffres et douze boutons pour une décision unique — « laquelle je publie ». Et comparer deux cartes oblige l'œil à sauter d'une colonne à l'autre en retenant le chiffre, ce qu'un tableau supprime : les valeurs d'un même critère s'alignent, et l'écart se VOIT au lieu de se calculer. Les nombres passent en chasse fixe et alignés à droite — c'est ce qui les rend comparables ; une proportionnelle décale les unités d'une ligne à l'autre. */ .ui-table.compare td.n,.ui-table.compare th.n{text-align:right;font-family:var(--mono); font-variant-numeric:tabular-nums;white-space:nowrap} .ui-table.compare th.n{font-family:var(--mono);font-size:11px;letter-spacing:.05em} .ui-table.compare td.n{font-weight:700;font-size:13px} .ui-table.compare .nom{font-family:var(--display);font-size:15.5px;font-weight:600;letter-spacing:-.01em} /* La ligne recommandée se marque par un FILET en tête de ligne — pas par un fond teinté, qui colorerait toute la rangée et rendrait ses chiffres moins lisibles que ceux des autres. */ .ui-table.compare tr.reco td{background:var(--bg)} .ui-table.compare tr.reco td:first-child{box-shadow:inset 3px 0 0 var(--accent)} .ui-table.compare td.act{white-space:nowrap;text-align:right} .ui-table.compare .sous{font-family:var(--mono);font-size:11px;letter-spacing:.04em;color:var(--ink-soft); margin-top:3px;display:block;font-weight:400} /* La colonne des noms se faisait écraser par les colonnes de chiffres — le navigateur répartit la largeur au prorata du contenu, et six nombres courts pèsent plus qu'un nom long. « FEASIBLE · optimum non prouvé » retombait alors sur trois lignes et faisait enfler toute la rangée. Elle garde un plancher ; les chiffres n'ont besoin que de leur chasse. ⚠ MESURÉ, PAS SUPPOSÉ : à 236 px de plancher et 14 px de gouttière, le tableau dépassait la colonne à 820 px de fenêtre et « Publier » — l'action principale — partait derrière le défilement horizontal. Un tableau peut défiler ; le geste qu'il commande, non. Plancher ramené à 200 px et gouttières resserrées : sept colonnes tiennent maintenant sous 820 px. */ .ui-table.compare td:first-child,.ui-table.compare th:first-child{min-width:200px} .ui-table.compare th,.ui-table.compare td{padding-left:10px;padding-right:10px} .ui-table.compare th:first-child,.ui-table.compare td:first-child{padding-left:14px} .ui-table.compare td.act .go{padding:5px 11px;font-size:12.5px} .ui-table tr:hover td{background:var(--hover)} /* ---------- chips / pills / badges ---------- */ .chip2{display:inline-flex;align-items:center;gap:6px;background:var(--bg);border:1px solid #e2e5f6;border-radius:20px;padding:3px 11px 3px 9px;font-size:12.5px;font-weight:550;margin:2px} .pill{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;padding:3px 10px;border-radius:20px} .pill.ok,.pill.prev,.pill.info{background:var(--bg);color:var(--ink-soft);border:1px solid var(--line)} .pill.todo{background:var(--red-bg);color:var(--red-ink)} .badge2{display:inline-block;padding:5px 12px;border-radius:var(--radius);font-weight:600;font-size:13px} .badge2.ok{background:var(--green-bg);color:var(--green-ink)} .badge2.ko{background:var(--red-bg);color:var(--red-ink)} /* LA PASTILLE IOT — TROIS SILHOUETTES, PAS TROIS TEINTES (29.07). Mesuré : le rouge `#cf4046` (L 0,1737) et le vert `#1a874f` (L 0,1811) donnent **1,03:1 ENTRE EUX**. En niveaux de gris — le test que DESIGN.md prescrit lui-même — c'était rigoureusement le même point, sur le premier écran de la console. Un `title` n'y change rien : il n'est pas visible. Les trois restent RONDES (règle du niveau rond) et se distinguent par la FORME : disque plein · anneau creux · disque cerclé. La couleur devient un renfort, plus le seul porteur. `outline` plutôt que `border` sur le rouge : il ne déplace rien dans la ligne. */ .dotmini{width:9px;height:9px;border-radius:50%;display:inline-block;box-sizing:border-box;flex:none} .iot-v{background:var(--green)} .iot-o{background:transparent;border:2.5px solid var(--orange)} .iot-r{background:var(--red);outline:1.5px solid var(--red);outline-offset:1.5px} .dotmini:not([class*="iot-"]){background:transparent;border:1.5px dashed var(--ink-soft)} /* ---------- alertes ---------- */ .alert2{display:flex;gap:11px;align-items:flex-start;padding:11px 13px;border-radius:var(--radius-s);margin-bottom:9px;font-size:13px} .alert2:last-child{margin-bottom:0} .alert2 .ic{width:26px;height:26px;border-radius:var(--radius);display:grid;place-items:center;flex:none;font-size:13px;font-weight:700} .alert2.red{background:var(--red-bg)} .alert2.red .ic{background:var(--red-bg);color:var(--red-ink)} .alert2.org{background:var(--card);border:1px solid var(--line)} .alert2.org .ic{background:var(--bg);color:var(--ink-soft)} .alert2.grn{background:var(--card);border:1px solid var(--line)} .alert2.grn .ic{background:var(--bg);color:var(--ink-soft)} .alert2 .meta{color:var(--ink-soft);font-size:12px} /* barre de progression (actions longues : génération…) */ .prog-wrap{padding:14px 2px} .prog-track{height:10px;border-radius:var(--radius-s);background:var(--line);overflow:hidden} .prog-fill{height:100%;border-radius:var(--radius-s);background:var(--accent);transition:width .35s ease;position:relative} .prog-fill:not(.done)::after{content:"";position:absolute;inset:0;border-radius:var(--radius-s);background:linear-gradient(90deg,transparent,rgba(255,255,255,.45),transparent);background-size:40% 100%;background-repeat:no-repeat;animation:progShine 1.1s linear infinite} .prog-fill.done{background:var(--green)} .prog-lbl{margin-top:8px;font-size:13px;color:var(--ink-soft);font-weight:600} @keyframes progShine{0%{background-position:-40% 0}100%{background-position:140% 0}} /* Survol : ni deplacement ni ombre teintee (charte) — le filet dit le survol. */ .alert2.act{transition:border-color .12s,background-color .12s;border:1px solid transparent} .alert2.act:hover{border-color:var(--accent);background:var(--hover)} .alert2.act.red:hover{border-color:#f0b4ae} .alert2.act.org:hover{border-color:#eccf95} .alert2 .cta{font-size:11.5px;font-weight:700;opacity:.78;margin-top:2px} /* ---------- inputs ---------- */ .ui-input,select.ui-input,input.ui-input{border:1px solid var(--line);border-radius:var(--radius);padding:7px 10px;font-size:13px;font-family:inherit;color:var(--ink);background:#fff} .ui-input:focus{outline:none;border-color:var(--accent);box-shadow:var(--anneau)} label.lab{font-size:12.5px;color:var(--ink-soft);font-weight:550} /* ---------- barres de progression ---------- */ .bar{height:8px;border-radius:20px;background:#edeef8;overflow:hidden;display:inline-block;width:160px;vertical-align:middle} .bar > i{display:block;height:100%;border-radius:20px;background:var(--accent)} /* ---------- calendrier mensuel ---------- */ /* `1fr` VEUT DIRE `minmax(auto,1fr)`, et ce minimum `auto` est celui du CONTENU. Les pastilles de poste portent `white-space:nowrap` : un nom long élargissait donc la colonne, les sept colonnes faisaient 800 px, et toute la console glissait latéralement entre 620 et 880 px. `minmax(0,1fr)` autorise la piste à descendre sous son contenu — le nom s'abrège alors par les points de suspension déjà prévus sur `.shift`, au lieu de pousser la page. */ .calx{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:8px} .calx .dow{font-size:11px;font-weight:400;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.1em;text-align:center;padding-bottom:2px} .calx .cell{background:var(--card);border:1px solid var(--line);border-radius:var(--radius-s);min-height:104px;padding:7px 8px;display:flex;flex-direction:column;gap:4px;transition:.12s;content-visibility:auto;contain-intrinsic-size:auto 104px} .calx .cell:hover{border-color:var(--accent)} /* JOUR EN TENSION (prevision_tension) : un liseré ambre DISCRET. Pas d'aplat — la couleur de fond est déjà prise par le week-end, et deux aplats superposés ne se lisent plus. */ .calx .cell.tendu{border-color:var(--orange-ink);box-shadow:inset 0 0 0 1px var(--orange)} .calx .cell.we{background:var(--bg)} .calx .cell.out{background:transparent;border:none} .calx .cell .d{font-size:11px;font-weight:600;color:var(--ink-soft)} .calx .shift{font-size:11px;font-weight:550;border-radius:var(--radius-s);padding:2px 7px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .calx .s-j{background:var(--sh-j);color:var(--sh-jt)} .calx .s-n{background:var(--sh-n);color:var(--sh-nt)} .calx .s-h{background:var(--sh-h);color:var(--sh-ht)} .calx .s-s{background:var(--sh-s);color:var(--sh-st)} .calx .force{background:var(--bg);color:var(--ink-soft);border:1px dashed var(--line)} /* ══ « À CONFIRMER » — LA FORME DIT L'ÉTAT, LA COULEUR DIT LE POSTE (29.07) ════════════════════ L'onglet Cadres peignait le nom validé en `--green-bg` : un aplat de STATUT, à 7×13 px, trois fois le rembourrage d'une pastille de garde. Une garde de cadre est une garde — elle prend donc la teinte de SON poste, comme C1, JC ou H. Ce qui reste à dire, c'est « pas encore confirmé par le cadre » : un contour TIRÉ, dans l'encre du poste (`currentColor`), donc sur la paire aplat/ encre déjà mesurée — aucune couleur nouvelle, aucune paire nouvelle. Doublé par un « ? » dans le libellé : le test en niveaux de gris passe, la couleur ne porte jamais l'état seule. Le contour transparent sur la pastille de base garde les deux états EXACTEMENT à la même taille (`box-sizing:border-box` : le contour ne pousse rien). ══ */ .calx .shift{border:1px solid transparent} .calx .shift.tbc{border-style:dashed;border-color:currentColor} /* ══ FIGURE ET FOND, SANS DEGRADER LE FOND (29.07 — portail médecin) ═══════════════════════════ « Mes gardes en évidence, celles des collègues en retrait » se faisait par `opacity:.62` sur la pastille du collègue. Mesuré après composition : 3,11 / 3,21 / 2,70 — tout sous le plancher de 4,5, et sur un mois sans garde personnelle c'était TOUT l'écran. On ne construit pas une figure en abîmant le fond : le fond descend d'un cran de GRAISSE (550 → 450, il reste pleinement lisible), la figure monte d'un cran ET prend un liseré. La forme survit au gris. */ .calx .shift.collegue{font-weight:450} .calx .shift.moi{font-weight:700;box-shadow:inset 0 0 0 1px currentColor;white-space:normal;line-height:1.3} /* MA GARDE NE SE TRONQUE PAS. Mesuré : « Hélico 07:30→07:30 » demandait 119 px dans une cellule de 107 (87 px utiles) et sortait en « Hélico 07:3… » — l'horaire, c'est-à-dire la seule chose que le médecin vient chercher, coupé. Les noms de collègues, eux, tenaient. Elle passe donc à la ligne plutôt qu'à l'ellipse : c'est l'élément prioritaire de la case, il peut coûter une ligne de haut. Les collègues gardent l'ellipse (15 sur 134 en usaient) — abréger un nom déjà secondaire est le bon compromis, tronquer l'horaire de sa propre garde ne l'est pas. */ /* Le champ de fichier cesse d'être un widget de formulaire brut : son bouton emprunte la grammaire du bouton fantôme (contour filet, fond transparent), le nom du fichier reste en encre atténuée. */ .ui-file{font-size:12.5px;color:var(--ink-soft);max-width:100%} .ui-file::file-selector-button{font-family:inherit;font-size:12.5px;font-weight:600;color:var(--ink); background:transparent;border:1px solid var(--line);border-radius:var(--radius-s);padding:7px 13px; margin-right:11px;cursor:pointer;transition:.12s cubic-bezier(.22,1,.36,1)} .ui-file::file-selector-button:hover{background:var(--hover);border-color:var(--ink-soft)} /* L'ANCIENNE VALEUR d'une garde modifiée, sous sa pastille. Même traitement que dans la grille de semaine — chasse fixe, barrée — et au plancher de 11 px : c'est une information, pas une note. */ .calx .was{font-family:'Space Mono',ui-monospace,Menlo,monospace;font-size:11px;color:var(--ink-soft);text-decoration:line-through;margin:-3px 0 0 7px} /* ---------- en-tête de carte : icône ---------- */ .panel-hd .hic{width:30px;height:30px;border-radius:var(--radius);background:var(--bg);color:var(--ink-soft);display:grid;place-items:center;flex:none} .panel-hd .hic svg{width:17px;height:17px} /* MOBILE : l'en-tête « Cadre & équipe du jour » ne tient pas sur une ligne (titre + hier/date) → on WRAPPE : le titre reste en haut, le bloc de navigation passe dessous, pleine largeur. Fini le titre tassé. */ @media(max-width:620px){ .panel-hd{flex-wrap:wrap;gap:8px 10px} .panel-hd h3{flex:1 1 auto;min-width:0} .panel-hd > div[style*="margin-left:auto"]{margin-left:0 !important;width:100%;justify-content:space-between} #pjLabel,#eqjLabel{min-width:0 !important;flex:1 1 auto} } /* ---------- actions rapides ---------- */ .qa{display:grid;grid-template-columns:1fr 1fr;gap:10px} .qa a{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:var(--radius); text-decoration:none;color:var(--ink);font-weight:550;font-size:13px;background:var(--card);transition:.15s;cursor:pointer} .qa a:hover{border-color:var(--accent);background:var(--bg)} .qa a .ic{width:32px;height:32px;border-radius:var(--radius);background:var(--bg);color:var(--ink);display:grid;place-items:center;flex:none} .qa a .ic svg{width:17px;height:17px} /* ---------- équipe du jour ---------- */ .team-row{display:flex;align-items:center;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line)} .team-row:last-child{border:none} .team-row .role{width:66px;font-size:11.5px;font-weight:700;color:var(--ink-soft);text-transform:uppercase;letter-spacing:.4px;flex:none} .tag{font-size:11px;font-weight:700;padding:2px 8px;border-radius:var(--radius-s);white-space:nowrap} .tag.j{background:var(--sh-j);color:var(--sh-jt)} .tag.n{background:var(--sh-n);color:var(--sh-nt)} .tag.h{background:var(--sh-h);color:var(--sh-ht)} .tag.s{background:var(--sh-s);color:var(--sh-st)} .tag.x{background:var(--bg);color:var(--ink-soft)} /* ---------- toast ---------- */ .toast{position:fixed;right:22px;bottom:22px;z-index:50;background:#1c2440;color:#fff;padding:12px 16px;border-radius:var(--radius); box-shadow:0 10px 30px rgba(9,10,22,.25);font-size:13.5px;font-weight:500;opacity:0;transform:translateY(10px);transition:.25s} .toast.show{opacity:1;transform:translateY(0)} .toast.ok{background:var(--green)} .toast.ko{background:var(--red)} /* ===================================================================== */ /* PONT HÉRITAGE — re-style des anciennes classes des vues vers le thème */ /* (chargé APRÈS l'ancien