/* ============================================================================ ROBUR — hiérarchie du texte Dépend de tokens.css. Aucune valeur en dur : que des jetons. POURQUOI CE FICHIER EXISTE Adam, 12/08/2026, sur l'onglet Semaine : « il faut un code couleur pour le texte, c'est très dur de se repérer, on ne distingue pas les jours du premier coup d'œil, les jours de repos sont ton sur ton. » Il a raison, et la mesure le confirme au chiffre près. Ce qui séparait deux jours à l'écran, c'était : · le fond d'une carte contre le fond de page — 1,09:1 (clair ET sombre) · le trait de la carte contre la page — 1,39:1 clair / 1,53:1 sombre · pour un jour de repos, ce MÊME trait en pointillé, sur fond transparent, donc le repos n'avait littéralement AUCUN élément au-dessus de 1,6:1. Le seuil de la WCAG 1.4.11 pour un élément qui doit être identifié est 3:1. Rien ne l'atteignait. « Ton sur ton » n'était pas une impression : c'était une mesure. MAIS LA COULEUR N'EST PAS LA RÉPONSE, ELLE N'EN EST QU'UN QUART. La WCAG 1.4.1 l'interdit comme porteur unique, et une salle de sport est exactement l'endroit où la couleur lâche : plein soleil, écran gras, une personne sur douze qui ne distingue pas deux teintes. Quatre porteurs travaillent donc ENSEMBLE, et chaque information en utilise au moins deux : 1. LA POSITION — le repère est toujours au même endroit, colonne de gauche, largeur fixe. C'est ce qui permet de BALAYER. 2. LE POIDS ET LA TAILLE — un niveau se lit avant d'être lu. 3. LA FORME — plein = fait, contour = à faire, pointillé = repos. C'est la règle n°2 du système, elle survit au daltonisme. 4. LA COULEUR — en dernier, et jamais seule. LES CINQ NIVEAUX, ET RIEN D'AUTRE Cinq, parce qu'au sixième plus personne ne sait lequel employer. | # | Classe | Rôle | Couleur | Taille | Poids | |---|-------------|-----------------------------|------------------|--------|-------| | 1 | .t-repere | l'ancre de balayage | --c-text 15,1:1 | xl | 700 | | 2 | .t-titre | le sujet de la ligne | --c-text 15,1:1 | lg | 600 | | 3 | .t-valeur | le fait mesurable, chiffré | --c-text 15,1:1 | base | 600 | | 4 | .t-meta | le contexte, jamais décisif | --c-text-muted 7:1 | sm | 400 | | 5 | .t-mention | l'unité, la note, le « ≈ » | --c-text-subtle 4,1:1 | xs | 400 | Trois des cinq niveaux sont à la MÊME couleur (l'encre). C'est voulu : la hiérarchie se fait d'abord à la taille et au poids, la couleur ne sert qu'à séparer ce qui décide (encre) de ce qui accompagne (estompe). Un dégradé de cinq gris serait illisible au soleil et ne dirait rien de plus. LE NIVEAU 5 EST SOUS 4,5:1 EN THÈME CLAIR (4,12:1) — C'EST ASSUMÉ ET BORNÉ. --c-text-subtle ne porte QUE de la redondance : une unité déjà collée à son chiffre, un « sur 12 » déjà écrit ailleurs. Si un texte de niveau 5 est la seule source d'une information, c'est le niveau qui est faux, pas la teinte. En `prefers-contrast: more`, tokens.css le remonte à 7,04:1. LA RÈGLE QUI AURAIT ÉVITÉ LE DÉFAUT, ET QUI VAUT POUR TOUTE L'APP --c-border (1,39:1) est un filet DÉCORATIF : il aère, il ne délimite pas. Dès qu'un contour porte une information — « ceci est un jour », « ceci est du repos » — il passe à --c-border-strong (3,63:1) ou à une couleur de nature. Un contour informatif sous 3:1 est un bogue, pas un parti pris. ============================================================================ */ /* Garde du