: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; /* 09.08 - L'ENCRE DU SURVOL DU BOUTON PRINCIPAL. Les quatre boutons pleins (console .ui-btn.primary et .go.primary/.go.vert, portail .lg2-btn et .btn) foncent au survol vers --accent-2 SANS changer d'encre : --on-accent (#02111b) y mesurait 2,36:1 en clair - sous le plancher, précisément sur l'action qu'on s'apprête à cliquer. Même construction que --on-red : blanc en clair (8,09:1 sur #2f546a), encre-noire en sombre (--accent-2 y est un bleu CLAIR #aecade, 11,2:1). Mesuré, jamais supposé. */ --on-accent-2:#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; /* ══ LE SECOND BRIN D'UNE TRAME (05.08) ══════════════════════════════════════════════════ UNE TRAME N'EST PAS UN TROU. Les cellules d'absence du Tournus étaient hachurées `repeating-linear-gradient(45deg, var(--ink-soft) 0 2px, var(--card) 2px 4px)` : la moitié des pixels laissait voir la CARTE, c'est-à-dire le plan sur lequel l'encre de l'aplat n'a aucune raison de tenir. Mesuré au navigateur, sur 99 cellules et sur la légende `.frzleg` : **1,00:1 en thème clair** (blanc sur carte blanche) et **1,14:1 en sombre** (encre-noire sur carte sombre). À l'écran, « Vacances », « Formation » et « Indispo » s'affichaient comme trois pastilles hachurées SANS AUCUN TEXTE - et c'est l'écran dont Rémy avait déjà dit « on lit vraiment mal les tournus ». `--on-ink-soft` avait bien été mesuré (5,01:1 / 6,93:1) - contre l'APLAT PLEIN. La trame est arrivée après, et personne n'a re-mesuré le second brin. C'est la leçon de l'invariant J, reprise : le fond n'est pas toujours ce qu'un `background:` déclare. LA RÈGLE QUI EN SORT : le second brin est un TON DU PREMIER, déplacé À L'OPPOSÉ de l'encre qui s'y pose - jamais un autre plan. Ainsi la trame ne peut que RENFORCER le contraste : le pire des deux brins reste le brin plein, celui qu'on a déjà mesuré. · sur `--ink-soft` (encre blanche en clair, noire en nuit) : clair 5,19 et 6,79 → pire 5,19 ; sombre 7,34 et 9,07 → pire 7,34. Écart de trame ΔL* 7,3 et 6,8 : la hachure se VOIT. · sur le pâle figé #94a3b8 (« Off », encre `--sur-pale`) : 7,46 et 9,20, ΔL* 6,8. Celui-là était juste en clair par accident (la carte y est blanche) et faux en nuit. Teintes conservées à 205° et 215° - les brins restent dans leur famille. */ --trame-ink-soft:#48555e; /* sous l'ink-soft : l'encre y est BLANCHE, le brin descend. RE-DÉRIVÉ le 05.08 avec le recalibrage de `--ink-soft` : le brin suit son aplat, sinon la trame se referme (l'écart serait tombé de ΔL* 7,3 à 1,3 - une hachure invisible). 7,67:1. */ --trame-pale:#a9b5c6; /* sous le pâle figé : l'encre y est NOIRE, le brin monte */ /* `--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. */ /* ⚠⚠ L'ENCRE ATTÉNUÉE NE TENAIT PAS SUR LES TROIS LAVIS DE SIGNAL (05.08). Sa note ci-dessus dit l'avoir « calculée sur les six fonds où elle se pose », et le pire cas y passe « de 4,36 à 4,63 ». Cette mesure portait sur la FEUILLE et la SURFACE - pas sur les lavis. Mesurée contre les cinq plans qui la portent réellement : clair : --bg 4,63 · --card 5,19 · --blue-bg 4,35 · --green-bg 4,35 · --orange-bg 4,34 sombre : --bg 6,42 · --card 5,77 · --blue-bg 4,43 · --green-bg 4,46 · --orange-bg 5,04 Cinq combinaisons sous le plancher, sur les trois encarts que le produit emploie pour DIRE quelque chose - l'information, l'acquis, la vigilance. C'est là que vivaient les 41 textes à 4,43:1 relevés à l'audit, et c'est un défaut de CALIBRAGE du jeton, pas une occurrence : l'encre atténuée de la feuille doit tenir sur les fonds de la feuille. Assombrie (clair) et éclaircie (sombre) de trois centièmes, teinte conservée à 205° : pire cas **4,88:1** en clair, **4,87:1** en sombre. L'écart avec l'encre pleine reste de 38 points de clarté en clair et 21 en sombre - la hiérarchie ne bouge pas à l'œil. ⚠ CE JETON EST AUSSI UN APLAT (la trame d'absence du Tournus le prend pour fond). Le déplacer déplace la trame : `--on-ink-soft` remesuré (5,84:1 en clair, 8,06:1 en sombre) et `--trame-ink-soft` re-dérivé pour garder son ΔL* 7. On ne bouge pas une encre qui sert d'aplat sans refaire les deux. */ --ink:#02111b; --ink-soft:#586772; --line:#d7e1e8; --bg:#ecf3f9; --card:#ffffff; --silver:#8b98a1; /* ── ÉCHELLE DE FORCE D'UNE RÈGLE (`--rang-*`, 07.08) ──────────────────────────────────── Cinq paliers, du plus négociable au plus intouchable : très souple · souple · moyenne · dur · extrême (vocabulaire de Rémy, 07.08 - le mien était inventé). Employés par l'écran des réglages du solveur : ÉCHANTILLON de la légende et `accent-color` de la glissière. ⚠ C'EST UNE ÉCHELLE, DONC ELLE SE LIT EN NIVEAUX DE GRIS (DESIGN.md, invariant I). Mon premier choix - ink-soft / ink / orange-ink / red-ink - a été MESURÉ avant d'être posé et REJETÉ : ΔL* de 0,8 entre « souple » (42,7) et « dur » (42,0) en clair, 2,6 en sombre. Deux teintes différentes à clarté identique, c'est précisément l'échelle codée par la seule teinte que la charte interdit. Et `check_charte` ne l'aurait PAS vue : son invariant I découvre les familles par PRÉFIXE de jeton, or ces quatre-là n'en partageaient aucun - la leçon de l'invariant J, prise une fois de plus. D'où ce préfixe `--rang-`, qui les fait entrer dans le balayage tout seuls. ⚠ REFONDUES LE MÊME JOUR, SUR SIGNALEMENT DE RÉMY : « en light, couleur pas lisible, aucune couleur de vraiment lisible. » Il avait raison, et la cause n'était pas le choix des teintes - c'était le RÔLE qu'on leur avait donné. Version rejetée : #6b7377 · #505e64 · #364a52 · #492c10 · #3e0f0c. Elles teintaient un MOT, donc elles devaient tenir 4,5:1 sur la feuille claire, donc AUCUNE ne pouvait dépasser L* 45 - et sous L* 45 il ne reste ni cyan, ni vert, ni or : cinq gris-ardoise et deux presque-noirs. Les cinq paliers étaient mesurés bons (ΔL* 8,8) et illisibles à l'œil, parce que la mesure disait « distincts en clarté » là où l'œil demandait « distincts en couleur ». C'est la limite de l'invariant I dite à l'envers : un écart de clarté suffisant ne fabrique pas une couleur reconnaissable. LE CORRECTIF EST UN CHANGEMENT DE RÔLE, PAS UNE RETOUCHE. La couleur n'écrit plus le mot : elle est un ÉCHANTILLON posé à côté d'un mot en encre pleine (`.rs-leg b i`). Un aplat de 22 × 10 px n'est pas du texte - son plancher est 3:1 (composant d'interface) et non 4,5:1 -, et la bande utile s'ouvre de L* 32 à 57. Le mot, lui, y a GAGNÉ : de 3,3:1 à 19,1:1. ⚠ ET LA PREMIÈRE RAMPE POSÉE DANS CETTE BANDE ÉTAIT MOCHE - dit par Rémy, à raison, dans l'heure : #009396 · #008734 · #776500 · #9a3700 · #98001e. Cyan, vert, or, orange, rouge, au CHROMA MAXIMAL du gamut (33 à 65). J'avais optimisé « le plus coloré possible » comme si c'était la même chose que « lisible », alors que TOUTE la palette de ce produit vit entre chroma 13 et 45 : accent 13 · green 30 · orange 42 · red 45. Une rampe à 65 n'est pas plus visible, elle est ÉTRANGÈRE - cinq couleurs qui n'appartiennent à aucun autre écran. LA RAMPE DÉFINITIVE EST CELLE DU PRODUIT, prolongée d'un cran. Elle reprend ses quatre teintes exactes - 249° (accent) · 145° (green) · 75° (orange) · 25° (red) - et intercale un sienna à 45° pour le cinquième palier. Chroma 15 → 50, dans le registre. Résultat : « souple » EST le vert du produit, « moyenne » son ocre, « extrême » son rosewood assombri. Rien de neuf à apprendre à l'œil. MESURÉ sur les valeurs ci-dessous (clarté imposée, teinte imposée, chroma visé puis rabattu au gamut) : ΔL* consécutifs 6,1 · 6,3 · 6,2 · 6,4 en clair - plancher 3,5 - et contrastes de 3,13:1 à 7,76:1 sur les deux fonds de l'écran. La clarté MONTE avec la force dans les deux thèmes (comprendre : le CONTRASTE monte - en clair la couleur s'assombrit, en sombre elle s'éclaire). ⚠ CETTE RAMPE EMPRUNTE DES COULEURS QUE LE PRODUIT NOMME DÉJÀ (vert/orange/rouge de l'IOT, de la fatigue, des légendes). C'est délibéré et c'est le prix à payer : ici elles disent l'INTENSITÉ, pas le verdict. Le mot est à côté, en toutes lettres, pour cette raison. */ --rang-tres-souple:#6f8da1; --rang-souple:#56835b; --rang-moyenne:#8b6123; --rang-dur:#924228; --rang-extreme:#8e222d; /* 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). */ /* ══ LA FRISE DE ROTATION - LE FOND CRIAIT PLUS FORT QUE LE SUJET (03.08, signalé par Rémy : « on lit vraiment mal les tournus ») ══════════════════════════════════════════════════════ Le code de la frise porte depuis l'origine la règle « SMUR = COLORÉ (il est chez nous) · ailleurs = SOURD ». Mesurée après le portage de palette, elle était FAUSSE : « aux urgences », l'état MAJORITAIRE, était à chroma 13,9 et le SMUR à 13,0 - le fond était plus saturé que le sujet, et plus sombre, donc il dominait l'écran. Sur 53 semaines × 60 médecins, ça donne un mur d'acier où l'on cherche ses semaines à la loupe. C'est le MÊME défaut que le 01.08, revenu par une autre porte : là c'était la saturation, ici c'est le portage qui a rendu tout le monde acier. Une règle écrite dans un commentaire ne se défend pas toute seule. MAINTENANT : le SMUR est le SEUL chromatique (C 34 contre 2,2 pour les autres), et l'ailleurs est une rampe de gris. La frise se lit d'un coup d'œil : ce qui est bleu, c'est chez nous. ⚠ `--rot-smur` est un jeton NEUF. La frise empruntait `--accent` - un jeton d'ACTION - pour peindre un ÉTAT : deux sens dans une valeur, donc l'un des deux cassait à chaque changement de l'autre. C'est exactement ce qui vient de se produire. */ --rot-smur:#1d85b2; --rot-anesth:#9a9b9f; --rot-urgences:#b5b6ba; /* 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) */ /* Employé ~12× (console + portail) mais jamais défini avant le 09.08 : chaque emploi retombait sur transparent. Le fallback `var(--chip-bg,var(--bg))` de console.py disait déjà l'intention. */ --chip-bg:var(--bg); /* ── 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; /* LE RAIL D'UNE JAUGE POSEE SUR LA CHARPENTE (06.08). `--side-line` separe deux zones de la charpente : a 1,6:1 sur le cartouche, il est fait pour se faire oublier. Le CONTOUR d'une jauge, lui, PORTE DU SENS - il dit ou s'arrete la mesure - et WCAG 1.4.11 lui demande 3:1. Mesure : 3,19:1 en theme clair, 3,29:1 en sombre. Meme famille que l'acier, assombrie a teinte constante : ce n'est pas une couleur de plus, c'est un barreau de plus. */ --side-jauge:#516674; /* ── DEUX ENCRES DE SIGNAL POUR LA CHARPENTE (09.08) ───────────────────────────────────── Le « Point » pose ses données SUR le cartouche, dans les DEUX themes - et les encres de signal de la feuille n'y survivent pas : mesurees sur #02111b, --orange-ink tombe a 3,18:1, --red-ink a 2,75:1, --green-ink a 3,20:1. Toutes sous le plancher de 4,5:1. Elles sont concues pour ecrire sur du clair ; les employer sur la charpente aurait livre du texte d'alerte illisible, exactement l'invariant C. Ces deux-ci sont les versants NUIT des memes familles, et valent la meme chose dans les deux themes - comme --side-jauge, et pour la meme raison : le cartouche est sombre des deux cotes. Mesure : attention 9,39:1 (clair) / 9,68:1 (sombre) · alarme 10,14:1 / 10,46:1. */ --side-att:#dead6f; --side-alarme:#ffa59f; --side-ok:#9ad9a8; /* `--side-ok` (10.08) : il manquait un VERT à la charpente, et « Valider » n'avait donc aucune encre propre sur le cartouche. Choisi par la MESURE, pas à l'œil : 11,71:1 sur le cartouche clair, 12,08:1 sur le sombre, et ΔL* 4,99 du membre le plus proche de sa famille (`--side-alarme`) - au-dessus du plancher de 3,5 de l'invariant I. Les trois candidats plus saturés que j'ai essayés d'abord tombaient à ΔL* 1,0-1,7 : lus en niveaux de gris, ils étaient le MÊME ton que le rouge. */ /* 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. ⚠ LA SECONDE VALEUR N'AVAIT JAMAIS ÉTÉ ÉCRITE (05.08). La ligne ci-dessus annonce « deux valeurs » ; il n'y en avait qu'une, #c0c1c4, recopiée du cartouche - et le commentaire du bloc sombre la mesure « 8,82:1 sur la surface », ce qui est vrai LÀ-BAS. Or les TROIS seuls consommateurs de ce jeton (`.seg button`, `.seg.sub button`, et `.seg.niv3` qui en hérite) vivent tous sur la FEUILLE, jamais sur la charpente : `#secbar` prend `background:var(--bg)`. Mesuré au navigateur en thème clair : **1,61:1 sur #ecf3f9**, 1,80:1 sur la carte. Toute la barre d'espace de 2e niveau était illisible sur 26 des 32 écrans - seul l'onglet courant, qui passe à `--ink`, se lisait. C'est la QUATRIÈME fois qu'une valeur gelée ne tient pas un rapport sur deux fonds (`--side-ink-soft` 28.07, la charpente 29.07, `--cartouche-action` 02.08) - et la première où aucun garde-fou ne pouvait le dire : voir l'invariant O. LA VALEUR CLAIRE : #596975, teinte 205,7° - celle de `--ink-soft` et de l'acier, à 0,6° près. Mesurée sur les DEUX plans que la navigation touche : 5,07:1 sur la feuille #ecf3f9, 5,67:1 sur la carte #ffffff. Et elle garde le RANG que le sombre lui donne déjà : la navigation est d'un cran PLUS PRÈS de l'encre que la prose atténuée (clair L* 43,5 contre 46,0 pour `--ink-soft` ; sombre L* 78 contre 65) - un onglet est un contrôle, pas un accompagnement. L'onglet courant garde ses 39 points de clarté d'avance. */ --nav-ink:#596975; --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. ⚠ LE JETON EXISTAIT DEPUIS LE 29.07 ET N'ÉTAIT PRESQUE PAS EMPLOYÉ (05.08). En venant changer de monospace, on a compté **26 piles écrites en toutes lettres** - 12 dans cette feuille, 12 dans le portail, 2 dans console_app.js - contre une poignée de `var(--mono)`. La règle 9 avait été écrite ici même, puis appliquée à quatre endroits sur trente. Elles y passent toutes : changer de fonte est désormais CETTE ligne, et rien d'autre. ── SPACE MONO → IBM PLEX MONO (05.08, choisi par Rémy sur maquette parmi six jeux). Ce qui a décidé, et c'est mesuré : à 11 px - la plus petite taille du système, celle des étiquettes, des horaires et de l'horodatage - Space Mono avait la plus petite hauteur d'x du lot (rapport x/H de **0,709**, contre 0,739 ici). Ce n'est PAS la largeur qui l'a départagée : j'avais d'abord reproché à Space Mono d'écrire « 08:00 » 18 % plus large qu'Archivo, ce qui revenait à reprocher à une monospace d'être monospace - mesurées, les quatre candidates tiennent toutes entre 33 et 34 px. La largeur ne dit rien, la hauteur d'x dit tout. Trois graisses sont servies (400 · 600 · 700) parce que la feuille en demande trois : `.kpi .lab` écrit en 600, `.fcal-mois` et `.fcal-jd b` en 700. Space Mono n'en avait que deux et le 600 était SYNTHÉTISÉ par le navigateur - une graisse fausse, que personne ne pouvait voir. */ --mono:'IBM Plex Mono',ui-monospace,Menlo,Consolas,monospace; /* ── LES TROIS FAMILLES DU CALENDRIER DE FORMATION (03.08) ──────────────────────────── Rampe de clarté, comme les postes : F SMUR 92 → F REGA 87 → Formations 82 en clair, 34 → 28 → 22 en sombre. La teinte identifie, la clarté sépare - et le LIBELLÉ est toujours écrit à côté, jamais remplacé par la couleur. Encres mesurées sur leur aplat : 5,01 à 6,86:1. */ --fcal-smur:#d7ebfa; --fcal-smur-t:#26526b; --fcal-rega:#f6d4b3; --fcal-rega-t:#6a4d2b; --fcal-autre:#cbccd0; --fcal-autre-t:#4f5055; } *{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:var(--cartouche-soft);margin:15px 12px 4px;font-weight:700} .sb-grp-d{display:block;font-size:11px;text-transform:none;letter-spacing:0;color:var(--cartouche-faint);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:var(--side-ink);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)} /* BASCULE DE VUE À L'INTÉRIEUR D'UN ÉCRAN (`.bviewbtn`) - RAPATRIÉE ICI LE 05.08. Ses trois règles vivaient dans le