/* ============================================================================ JAMPATHA YOGA — LES VALEURS DU SITE, À UN SEUL ENDROIT ============================================================================ Créé le 03/09/2026. Premier fichier de style partagé du site : jusqu'ici, 49 pages portaient chacune sa copie des couleurs, soit 14 840 lignes de CSS et 195 valeurs distinctes. Toutes les divergences corrigées les 02 et 03/09 — le logo qui sautait de 28px, deux fonds différents, trois tailles de titre, neuf propriétés qui séparaient deux tuiles jumelles — venaient de là, et d'elle seule. COMMENT S'EN SERVIR Les pages n'écrivent plus de couleur en dur : elles appellent une variable. Chacune garde une valeur de repli littérale — `var(--jy-vert, #4A5E51)` — pour qu'une page qui aurait perdu ce fichier reste lisible plutôt que de virer au noir sur noir. MIGRATION PROGRESSIVE, ET C'EST VOULU Ce fichier est inerte tant qu'une page ne l'appelle pas : il ne déclare que des variables, aucune règle. On peut donc le brancher partout d'un coup sans rien changer à l'écran, puis convertir les pages une par une, en vérifiant chacune. Sur un site en production sans préproduction, c'est la seule façon raisonnable de procéder. ============================================================================ */ :root { /* ------------------------------------------------------------------------ LE FOND ------------------------------------------------------------------------ Un aplat, là où le body portait CINQ valeurs : la couleur de base plus quatre dégradés radiaux, un par coin. L'effet était invisible sur téléphone et à peine perceptible sur portable, mais il assombrissait le coin bas-droit — ce qui donnait l'impression que certaines pages « s'assombrissaient en bas ». Un dégradé en coins est par ailleurs une signature de 2020-2021, au même titre que le verre dépoli. La teinte, elle, ne change pas : 42° / 43% / 95%, un blanc cassé chaud qui vient du même monde que le logo. */ --jy-fond: #F8F5EE; /* Le blanc des cartes est CASSÉ, pas pur (03/09). Un #FFFFFF posé sur un fond ivoire est plus froid que lui : il ne se détache pas, il tranche. #FDFCF8 reste plus clair que le fond — une carte doit se lire comme posée dessus — mais partage sa chaleur, autour de 45° de teinte comme le crème. L'écart de luminosité suffit à séparer les deux plans. */ --jy-fond-carte: #FDFCF8; /* ------------------------------------------------------------------------ LE VERT, EN QUATRE DEGRÉS ------------------------------------------------------------------------ #4A5E51 faisait à lui seul huit métiers : texte, icônes, bordures, fonds de badge, boutons pleins, liens, intitulés, barre du bas. La teinte est conservée — un sauge autour de 145°, qui vient du lotus — mais elle est étagée. C'est l'étagement, pas la teinte, qui donne de la profondeur à un écran. Les rapports indiqués sont mesurés sur --jy-fond selon WCAG 2.1. */ /* RECALÉ SUR 141° LE 03/09, LA TEINTE DU LOGO. Première version : j'annonçais « même teinte » et j'avais dérivé. Mesure faite — #4A5E51 est à 141°, le gris de légende #7A8B80 à 141,5° : toute la palette d'origine est bâtie sur cette teinte, ce qui n'était écrit nulle part. Mes verts étaient partis à 148 et 149°, avec deux à trois fois plus de saturation. Ça ne s'appelle plus étager une teinte, ça s'appelle en changer. Tout est ramené à 141°. Seules la luminosité et la saturation varient d'un degré à l'autre, et la saturation reste modérée — 15 à 30 % contre 12 % à l'origine, de quoi donner de la présence à un aplat sans quitter le sauge. */ --jy-encre: #232F27; /* titres et corps 12,8:1 */ --jy-vert-lecture: #3A5A45; /* liens, icônes, intitulés 7,1:1 — meilleur que l'ancien #4A5E51 (6,4:1), et sur la teinte du logo. */ --jy-vert-action: #3D714F; /* boutons pleins, onglet actif — 5,9:1 en blanc sur ce vert. Saturation ramenée de 30 à 27 % le 03/09 : la teinte était juste, mais l'aplat sortait un peu du reste de la palette. Trois points suffisent — le contraste y gagne même légèrement. */ /* DEUX PASSES LE MÊME JOUR, ET C'EST LA SECONDE QUI COMPTE. Il était à 144,6° : trop mentholé. Je l'ai d'abord ramené à 137°, en le réchauffant ET en le désaturant à la fois. Or c'est la SATURATION qui produisait la menthe, pas la teinte — à 91 % de luminosité, quelques degrés ne se voient presque pas, une saturation à 22 % se voit beaucoup. La désaturation faite (16 %), la teinte peut revenir sur celle du logo sans que le vert redevienne mentholé. Toute la gamme tient donc entre 140,4 et 141,9° : c'est le plancher de précision d'une couleur codée sur huit bits, on ne peut pas resserrer davantage. */ --jy-vert-fond: #E3EDE7; /* fonds de badge et de pastille, OPAQUES : le rgba(74,94,81,.10) d'avant changeait de rendu selon ce qu'il y avait dessous. */ --jy-vert-fond-encre: #30503B; /* UN CRAN PLUS SOUTENU, POUR LES BOUTONS SECONDAIRES (03/09). Le fond de badge se détache trop peu de l'ivoire des cartes — 1,17 de rapport — pour un élément sur lequel on doit CLIQUER. Celui-ci monte à 1,33 : le bouton se voit comme un bouton, sans devenir un second aplat vert qui concurrencerait l'action principale. Même teinte, saturation 18 %, luminosité 85 %. Le texte du vert de lecture y reste à 5,6:1. */ --jy-vert-fond-fort: #D2E0D7; /* LA GRANDE SURFACE VERTE — la barre du bas de l'administration (03/09). C'est #4A5E51, le vert d'origine, et il est GARDÉ tel quel : à 141° / 12 % / 33 %, il est déjà un membre légitime de la gamme, son degré le plus sourd. Le vert d'action, lui, est calibré pour un bouton de deux centimètres, pas pour une bande qui traverse l'écran — étalé sur cette surface, il serait criard. Déclaré ici plutôt que laissé en dur : c'est la seule façon qu'il ne redevienne pas une valeur orpheline, comme les 195 qu'on vient de regrouper. */ --jy-vert-surface: #4A5E51; --jy-filet: #D7E0D9; /* remplace #D5DDD5, #E2E8E2 et #E5E5E5 */ /* ASSOMBRI LE 03/09 POUR PASSER LE SEUIL DE LISIBILITÉ. Il valait #7A8B80 — la teinte du logo, 141,5°, et c'est lui qui avait permis de retrouver cette teinte quand le reste avait dérivé. Mais il était à 3,3:1 sur le crème et 3,5 sur l'ivoire, quand le seuil d'un texte courant est de 4,5. Ce n'est pas « un peu pâle » : c'est en dessous du seuil sur les DEUX fonds du site, pour trente-trois emplois — sous-titres, légendes, libellés des onglets inactifs, dates de validité. Le genre de défaut invisible pour qui a écrit le texte et sait ce qu'il dit. #647569 garde la teinte à 141° et descend juste ce qu'il faut : 4,5 sur le crème, 4,8 sur l'ivoire. La hiérarchie entre un titre et sa légende tient de toute façon à l'écart de CORPS et de graisse, pas à la pâleur du gris. --jy-gris-fonce, créé une heure plus tôt pour un seul cas, disparaît : deux gris à un point d'écart auraient recommencé à diverger. */ --jy-gris: #647569; /* 4,5:1 sur le crème, 4,8:1 sur l'ivoire */ /* ------------------------------------------------------------------------ LES COULEURS QUI DISENT QUELQUE CHOSE ------------------------------------------------------------------------ Elles ne relèvent pas de l'identité mais du sens : une somme à encaisser n'est ni une action ni une alerte, une annulation n'est pas un simple accent. */ /* Encaissement. Ce bleu existait déjà, employé de la même façon sur le tableau de bord, les réservations et les factures. DÉSATURÉ LE 03/09. Il était à 204° / 45% / 33% : la seule couleur franche d'un site par ailleurs entièrement désaturé, et elle cassait légèrement l'ensemble. Il reste bleu — même teinte à 204° — mais sa saturation tombe à 27%, la moitié. Un bleu ardoise, qui se distingue toujours du vert sans lui disputer l'attention. Contraste amélioré au passage : 6,7:1 contre 6,5. Pourquoi PAS un vert bleuté, l'autre option envisagée : il se lirait comme un vert un peu faux plutôt que comme une couleur à part. Une somme à encaisser n'est ni une action, ni une alerte, ni la marque — c'est justement ce que dit un bleu, et un vert le perdrait. Une descente à 18 % a été essayée puis annulée le 03/09 : trop effacée, la pastille cessait de se repérer d'un coup d'œil dans une liste, ce qui est sa seule fonction. */ --jy-encaisser: #3E5A6D; /* 6,7:1 */ --jy-encaisser-fond: #EBEFF2; --jy-encaisser-filet:#CBD6DD; /* Disponible / indisponible. Les badges « 2 places » et « Complet » portaient les palettes par défaut de Material — #E8F5E9 et #2E7D32 pour l'un, #F5F5F5 et #888 pour l'autre — alors que les badges de l'administration, juste à côté dans la navigation, portaient déjà le vert du site. Deux verts pour dire la même chose, sur deux écrans qu'on enchaîne. Le vert « disponible » n'a pas besoin d'un token à lui : c'est --jy-vert-fond, celui de tous les badges. Seul l'état INDISPONIBLE en demandait un — un gris neutre et chaud, qui dise « ce n'est pas pour vous » sans passer pour une alerte. */ --jy-neutre-fond: #ECEDE9; /* Alerte. Ni un danger — rien n'est cassé — ni une information neutre : « aucun crédit disponible », « facture demandée ». L'ambre est le code universel de cet entre-deux, et le site en portait déjà quatre variantes empruntées à Material. Celui-ci est réchauffé vers la terre cuite pour tenir avec le crème. */ --jy-alerte: #8A5A12; /* 5,6:1 sur son fond */ --jy-alerte-fond: #FBF0DC; /* Danger. UN seul rouge, là où le site en portait quatre — #D32F2F, #C0392B, #DC3545 et #C62828, tous venus des palettes par défaut de Bootstrap et Material. Sur un crème chaud, ces rouges-là sonnent froid. La terre cuite dit la même chose sans quitter la famille. */ --jy-danger: #A8452F; /* 5,4:1 */ --jy-danger-fond: #F6E9E4; /* LA VERSION POUR FOND SOMBRE (03/09). La terre cuite est trop foncée pour se lire sur la carte du prochain cours ; il fallait donc une variante claire, et il en existait une — #F2C9C2, écrite en dur, à 9° de teinte mais 65 % de saturation. Un rose pastel, la dernière couleur du site à n'appartenir à aucune famille. Celle-ci garde la teinte de la terre cuite (11°) et descend à 45 % : elle se lit comme un terracotta éclairci, pas comme un rose. 5,9:1 sur le fond sombre — moins que le rose (7,6:1) mais très au-dessus du seuil, et « Annuler » doit rester discret : c'est une action irréversible qu'on ne cherche pas à provoquer. */ --jy-danger-clair: #E4BCB4; /* Accent. L'abricot du cœur du lotus, absent de l'interface jusqu'ici alors qu'il est dans la marque. Pour ce qui attire l'œil sans alerter. FONDS SEULEMENT : son contraste de 2,2:1 l'interdit comme couleur de texte. */ --jy-accent: #E0975F; --jy-accent-fond: #FAEBDC; --jy-accent-encre:#8A4E1C; /* la version lisible, pour du texte sur --jy-accent-fond */ /* ------------------------------------------------------------------------ LES SURFACES ------------------------------------------------------------------------ Le verre dépoli — blanc translucide, flou d'arrière-plan, deux ombres — est ce qui date le plus dans ce site, plus que la teinte du vert. Un filet et une ombre d'un pixel suffisent à détacher une carte de son fond. */ /* Filet légèrement réchauffé avec le blanc des cartes : un filet vert-gris sur un blanc cassé chaud redonnerait le froid qu'on vient d'enlever. */ --jy-carte-filet: #E6E9E0; /* PLUS D'OMBRE AU REPOS (03/09). Elle valait déjà 0 1px 2px à 5 % — autant l'enlever : le filet suffit à poser une carte sur le crème, et les surfaces plates sont la direction actuelle. Le token reste, à `none`, pour que le jour où une carte a besoin d'élévation on sache où la reprendre. */ --jy-carte-ombre: none; /* Réservée aux cartes CLIQUABLES. Une ombre qui réagit au survol sur un bloc inerte est un tic de 2020 : elle promet une interaction qui n'existe pas. */ --jy-carte-ombre-survol: 0 3px 10px rgba(30, 45, 35, .07); /* TROIS RAYONS, PAS SIX. Relevé sur l'espace élève : 6, 8, 10, 12, 14 et 16px coexistaient, dont 12px trente-six fois. Aucun de ces écarts n'était une intention. */ --jy-rayon: 16px; /* cartes et grands blocs */ --jy-rayon-moyen: 12px; /* lignes, tuiles internes, champs */ --jy-rayon-petit: 10px; /* boutons */ }