/* ============================================================================================= KISMAIN — FEUILLE DE BASE DE L'APPLICATION Un seul fichier décide de l'habillage des soixante et un gabarits. Il porte trois peaux, pas une : le membre, l'opérateur, et l'invité qui arrive par un jeton. Les trois partagent la marque et la grammaire des formes ; elles ne partagent ni la couleur de fond, ni la densité, ni la typographie des chiffres. Un opérateur qui ouvre un dossier ne doit jamais pouvoir croire qu'il est dans l'écran d'un membre. Les jetons de couleur viennent de sites/kismain/index.html et des deux planches de maquettes (sites/kismain-app/maquettes/). Ils ne sont pas redéfinis ailleurs : une page qui invente sa propre teinte est un défaut, pas une variante. ============================================================================================= */ /* --- FONTES --------------------------------------------------------------------------------- Auto-hébergées. Un @font-face qui pointe vers fonts.gstatic.com fait partir une requête vers un tiers américain à chaque affichage de chaque page, porteuse de l'IP du membre et de l'adresse consultée. La règle qui a fait écarter Fly.io et Didit vaut aussi pour une fonte. Les `unicode-range` sont recopiés de la réponse de l'API Google : ce sont eux qui font qu'une page en français ne télécharge que le jeu latin, et rien d'autre. Voir fontes/LISEZMOI.md. */ @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap; src:url("fontes/serif-latin.62f0a26ced41.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308, U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"Source Serif 4";font-style:normal;font-weight:200 900;font-display:swap; src:url("fontes/serif-latin-ext.ab6e1dbe7b75.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("fontes/mono-400-latin.814fe1615d4d.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308, U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:400;font-display:swap; src:url("fontes/mono-400-latin-ext.17a5b2a15bf5.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F, U+A720-A7FF} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url("fontes/mono-500-latin.6708425c446b.woff2") format("woff2"); unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308, U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD} @font-face{font-family:"IBM Plex Mono";font-style:normal;font-weight:500;font-display:swap; src:url("fontes/mono-500-latin-ext.216ee1a35b06.woff2") format("woff2"); unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329, U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F, U+A720-A7FF} /* --- JETONS --------------------------------------------------------------------------------- */ /* --- LA PALETTE A ÉTÉ RÉCHAUFFÉE — 17/09/2026, décision du Fondateur ------------------------- « Revois les couleurs afin qu'elles soient encore plus chaleureuses. » CE QUI A CHANGÉ, ET COMMENT. Les verts tirent désormais sur l'olive plutôt que sur le conifère : quelques points de bleu en moins, quelques points de rouge en plus. Le papier passe de #FAF7F0 à #FDF8EE, l'encre de #141A17 à #1C1811. À l'œil nu on ne nomme pas la différence, on la ressent — c'est exactement ce qu'on demande à un fond et à une encre. CE QUI N'A PAS CHANGÉ. Les VALEURS bougent, les NOMS et les RÔLES ne bougent pas. Aucune règle de cette feuille n'a été touchée : c'est ce qui permet de réchauffer quatre mille lignes sans en relire une seule. POURQUOI CES VALEURS-LÀ ET PAS D'AUTRES. Le premier jet passait par une formule qui conservait la luminance en décalant la teinte. Élégant, et faux : elle rendait le vert de marque en kaki (#27331F) et l'encre en brun (#26190F). Un vert de marque ne se calcule pas, il se choisit — et l'écart admissible est bien plus étroit sur un ton pâle que sur un vert profond, ce qu'une force unique ne sait pas voir. LE CONTRÔLE EST AILLEURS, ET IL EST AUTOMATIQUE. `tests/test_contraste_aa.py` apparie les rôles d'écriture aux fonds et vérifie le seuil sur chaque paire. Réchauffer sans le lancer serait changer une palette à l'aveugle. -------------------------------------------------------------------------------------------- */ :root{ /* Verts de la marque — réchauffés vers l'olive le 17/09/2026, rôles inchangés. */ --vert-950:#0E251A; --vert-900:#153727; --vert-800:#1B422D; --vert-700:#244F39; --vert-600:#2A5C42; --vert-500:#336C4F; --vert-300:#88AA93; --vert-100:#E7EFE5; --vert-50:#F3F8F1; /* --- LES DEUX RÔLES DU VERT (LOT F, 08/09/2026) -------------------------------------------- La gamme `--vert-*` ci-dessus est la MARQUE. Elle ne bascule pas en Veille : un vert de marque qui changerait de valeur selon l'heure ne serait plus une marque, et surtout ces mêmes valeurs servent de FOND aux surfaces sombres du produit (la barre de navigation, le volet de la porte, le bandeau de saison, le bloc de promesse). Les faire pâlir retournait ces surfaces : fond clair, texte blanc, illisible. Ce qui bascule, ce sont les deux rôles d'ÉCRITURE, et eux seuls : `--titre` — les titres, sur fond de page ; `--accent` — les liens, les marques, tout ce qui écrit en vert dans le texte courant. En clair ils valent exactement ce qu'ils valaient (`--vert-900` et `--vert-700`) : aucun pixel ne change en thème Papier. En Veille ils s'éclaircissent, pendant que les fonds sombres restent sombres. */ --titre:#153727; --accent:#244F39; /* --- LE FOCUS CLAVIER (refonte UI, 15/09/2026) ---------------------------------------------- Le contour de focus avait une valeur fixe, `--vert-500` : 6,4:1 sur le papier clair, mais 2,3:1 sur le papier de Veille et 2,6:1 sur la barre du haut, sombre dans les deux thèmes. WCAG 2.2 (1.4.11) demande 3:1 à un indicateur de focus. `--focus` — suit le thème : `--vert-500` en Papier, `--vert-300` en Veille ; `--focus-sur-sombre` — fixe, pour les surfaces sombres en permanence (même logique que `--sur-sombre` ci-dessous). Ces surfaces redéfinissent `--focus` localement : toutes les règles de focus qui lisent `--focus` changent d'elles-mêmes, sans course à la spécificité. */ --focus:var(--vert-500); --focus-sur-sombre:var(--sur-sombre); /* --- CE QUI EST POSÉ SUR UNE SURFACE SOMBRE EN PERMANENCE ---------------------------------- La barre de navigation, le volet de la porte, le bloc de promesse, la tuile de visio : leur fond est sombre dans les DEUX thèmes. Ce qui s'écrit dessus ne doit donc jamais basculer, sinon il vire au sombre sur sombre le jour où le reste passe en Veille. Ces jetons-là sont volontairement absents du bloc `body.veille` : c'est leur définition qui est unique, pas un oubli. */ --sur-sombre:#E9F0E4; --ardoise-claire:#C6CED8; --ardoise-pale:#E6EAEF; --ardoise-moyenne:#5A7189; /* --- LE VERT DE REMPLISSAGE, SÉPARÉ DU VERT D'ÉCRITURE (LOT F, 08/09/2026) ------------------ `--vert-700` faisait deux métiers : il écrivait (21 déclarations de `color`, plus des bordures et des traits) et il remplissait (un bouton, ma bulle de message, un jeton coché). Tant qu'il n'y avait qu'un thème clair, les deux allaient ensemble. En thème sombre ils divergent : le vert qui écrit doit s'éclaircir pour rester lisible, le vert qui remplit doit rester assez sombre pour porter du blanc. Un seul jeton ne peut pas faire les deux. `--vert-plein` est donc le vert des surfaces pleines, et lui seul. Il ne s'éclaircit qu'un peu en Veille — juste de quoi se détacher du fond sombre sans perdre le texte blanc. */ --vert-plein:#244F39; --vert-plein-2:#1B422D; /* Neutres chauds — le papier et le sable. */ --sable:#FDF8EE; --sable-2:#FFFCF4; --paper:#FFFDF7; /* `--ink-mute` valait #8A948F jusqu'au 08/09/2026. Il tombait à 3,1:1 sur le papier blanc et à 2,6:1 sur les fonds pâles — sous le seuil AA que le brief des écrans exige lui-même, alors qu'il écrit des libellés réels (le rang d'un palier, la date d'une mesure, l'en-tête d'une colonne de tableau). #646B68 tient 4,5:1 sur les HUIT fonds clairs du produit, le plus exigeant étant `--stop-pale`. La hiérarchie à trois niveaux se resserre par le bas, et c'est le prix : un gris trop clair pour être lu n'est pas une nuance, c'est un texte absent. */ --ink:#1C1811; --ink-soft:#5B584C; --ink-mute:#6A675B; --line:#EADFC8; --line-soft:#F4EBD9; /* Neutres froids, repris de la planche Claude Design. Ils coexistent avec les lignes sable : le sable sépare deux blocs de contenu, le froid sépare deux lignes d'un même tableau. Les confondre donnait des tableaux qui semblaient rayés. */ --ligne-froide:#DCE5D9; --vert-25:#F0F4EC; --laiton:#A8863F; --laiton-2:#C7A159; --laiton-pale:#F6EFDE; --laiton-texte:#806217; /* Le filet qui accompagne `--laiton-pale`. Il était écrit var(--laiton-filet) en clair à huit endroits : invisible tant que le produit n'avait qu'un thème, bloquant dès qu'il en a deux. */ --laiton-filet:#E7D6A9; --stop:#8C3A32; --stop-pale:#F6E7E5; --stop-ligne:#E0B6B0; /* Le rouge a le même double métier que le vert : il écrit (« Raccrocher », un refus) et il remplit (le bouton lui-même). En Veille, celui qui écrit doit s'éclaircir pour se détacher du fond, celui qui remplit doit rester assez sombre pour porter du blanc — sur le rouge clair, le blanc tombait à 2,6:1. Deux jetons, donc. */ --stop-plein:#8C3A32; --stop-plein-2:#7A3029; /* --- BLEU ARDOISE — LA STRUCTURE (LOT F, 08/09/2026) -------------------------------------- La seule teinte vraiment neuve de la refonte. Elle existe parce qu'il manquait une couleur pour dire « ouverte » : une étape en cours, disponible, qui ne réclame rien. Sans elle, il ne restait que le laiton (qui veut dire « à vous de jouer ») ou le gris (qui dit « éteint », ce qu'une étape ouverte n'est pas) — et le laiton finissait par tout peindre. Elle est choisie loin du laiton ET du vert, les deux couleurs déjà signifiantes : un bleu froid ne se confond avec aucune des deux, même vu de biais ou par un œil qui distingue mal les rouges. Contraste vérifié : --structure-texte sur --structure-pale passe AA. */ --structure:#2E4256; --structure-clair:#5A7189; --structure-pale:#E6EAEF; --structure-texte:#223345; --structure-filet:#C6CED8; /* Le pointillé d'une étape à venir. Ni un gris de désactivation, ni un cadenas : un contour qui dit « pas encore tracé ». La condition d'ouverture est toujours écrite en clair à côté. */ /* --- LES TEINTES CHAUDES (02/09/2026) ----------------------------------------------------- Le vert, le sable et le laiton restent la marque, et ils ne bougent pas. Ces quatre-là s'ajoutent en accent seulement : un filet, une pastille, un fond de vignette, jamais un fond de page. Elles existent parce que le produit paraissait juste et froid, et qu'un service qui parle de mariage a le droit d'avoir l'air content. Le rose et le rouge romantiques restent exclus. Ce n'était pas une conséquence de l'interdit de figuration — c'est un choix de positionnement, écrit en août, que la réouverture du 01/09 n'a pas touché. `--terre` est une terre cuite, pas un rouge : elle est désaturée et sourde, et elle ne se confond avec aucune application de rencontre. Contrastes vérifiés sur le sable et sur le papier : `--abricot-texte`, `--terre` et `--safran-texte` passent AA en corps de texte, les trois pâles ne servent que de fond. */ --abricot:#D99A5B; --abricot-pale:#FBEFE1; --abricot-texte:#96541C; --terre:#A85842; --safran:#D9A93F; --safran-pale:#FAF1D9; --safran-texte:#8A6410; --sarcelle:#2E6B6B; --sarcelle-pale:#E3F0EF; /* --- LES ENCRES DES ILLUSTRATIONS (17/09/2026) ---------------------------------------------- UNE FAMILLE À PART, ET C'EST VOULU. Ces dix jetons ne servent qu'aux dessins du parcours. Ils ne sont pas des couleurs d'interface : aucun texte ne s'écrit dedans, aucun bouton ne s'en peint, et ils échappent donc aux règles de contraste qui tiennent le reste de cette feuille. Les confondre avec `--vert` ou `--sable` reviendrait à interdire à une illustration ce qu'on autorise à une photographie. POURQUOI UN PRÉFIXE. La première version des dessins appelait `var(--miel)`, `var(--vert)`, `var(--voile)` — des noms repris du prototype, dont HUIT n'existaient pas dans cette feuille. Une propriété personnalisée absente rend la déclaration invalide au calcul, et `fill` retombe alors sur sa valeur initiale, qui est le NOIR. Tous les dessins de l'application se sont donc affichés sur un disque noir, et personne ne l'a vu avant que le Fondateur n'ouvre l'écran sur son téléphone. `tests/test_encres_des_dessins.py` vérifie maintenant que chaque `var(--d-…)` écrit dans un dessin est déclaré ici ET dans le bloc de nuit. C'est la seule protection qui vaille : un jeton oublié ne se voit pas en relisant du SVG, il se voit sur un écran. LA NUIT N'EST PAS UNE INVERSION. Les encres sombres ne sont pas les claires retournées : le papier devient brun très sombre, les verts s'éclaircissent pour rester lisibles dessus, et les chaudes perdent en clarté ce qu'elles gardent en chaleur. */ --d-papier:#FBF1DC; /* le fond de la vignette */ --d-brume:#EFE2C8; /* le second fond, pour les compositions en deux plans */ --d-miel:#F3D49B; --d-safran:#E9AE3E; --d-abricot:#DE8F4E; --d-terre:#BE5B3D; --d-sauge:#A7C6B0; --d-vert-2:#4E8C6B; --d-vert:#1E5540; /* le trait dessiné, celui qui porte la forme */ --d-nuit:#123A2C; /* Comment les encres se mélangent, et combien de grain. DEUX JETONS PLUTÔT QU'UNE SECONDE REQUÊTE DE MÉDIA : la palette de nuit doit vivre à un seul endroit de cette feuille, et un test le tient depuis le lot F. Le multiplié ne vaut que sur fond clair — sur le papier sombre de la nuit, multiplier des encres déjà sombres les écrase en noir, c'est-à-dire exactement la tache que l'on vient de corriger. */ --melange-encres:multiply; --grain-opacite:.55; /* Graphite — la console opérateur. Un métier distinct, donc une palette distincte : froide, dense, sans sable. Le laiton et le rouge y restent les deux seules couleurs, et ils ne veulent dire qu'une chose chacun (voir .poste-nb plus bas). */ --gr-950:#1C2226; --gr-900:#2A3238; --gr-800:#39424A; --gr-600:#4A5459; --gr-400:#7C868B; --gr-300:#98A2A7; --gr-200:#CFD6D9; --gr-100:#E2E6E8; /* Le gris qui écrit sur fond CLAIR. `--gr-400` reste celui du rail sombre, où il tient 4,7:1 ; sur le papier il tombait à 3,7:1, et il y écrivait de vrais libellés. */ --gr-500:#5A6469; --gr-50:#F4F6F7; --gr-25:#FAFBFB; /* --- LA CONSOLE PREND DES COULEURS (05/09/2026) -------------------------------------------- Demande du Fondateur : « une interface fluide, moderne, futuriste, ludique et claire ». Les quatre premiers adjectifs sont faciles à mal servir, et le cinquième les arbitre — une console où l'on décide du sort de vraies personnes ne doit jamais ressembler à un jeu. Ce qui change : le graphite reste la structure, et six accents froids s'y ajoutent. Chacun ne veut dire qu'une chose, et c'est cela qui rend l'écran lisible plutôt que décoré : cyan — l'action, le focus, la donnée vivante ; violet — la simulation, ce qui n'est pas encore décidé ; menthe — ce qui est en règle ; ambre — ce qui attend un geste ; corail — ce qui est en retard ou en défaut ; ardoise — le reste, c'est-à-dire l'essentiel. Ce qui NE change pas : la zone membre. Elle garde son sable et son vert. Personne n'a demandé de la rendre futuriste, et un service qui parle de mariage n'y gagnerait rien. */ /* --- LES TROIS RÔLES D'ÉCRITURE DE LA CONSOLE (09/09/2026) -------------------------------- Même partage que le vert, le rouge et le violet ailleurs dans cette feuille : une couleur qui REMPLIT n'est pas la même que celle qui ÉCRIT. La console n'avait jamais fait ce partage, et le brief `23_` signalait que rien ne vérifiait ses contrastes. Mesuré : `--op-menthe` tombait à 3,3:1 en texte sur le papier, `--op-cyan-sombre` à 4,3:1 sur les fonds teintés, et `--gr-400` à 3,7:1 — trois textes sous le seuil AA que le produit s'impose partout ailleurs. Les valeurs ci-dessous tiennent 4,5:1 sur les NEUF fonds clairs de la console, le plus exigeant étant `--gr-100`. `tests/test_contraste_aa.py` les vérifie une par une. */ /* --- LA RÈGLE DE COULEUR DE LA RÉGIE, 12/09/2026 (brief 24, §6) ------------------------------ Une couleur, un sens, et rien d'autre. Le cyan, l'ambre, la menthe et le violet du 05/09 deviennent l'azur, le safran, le jade et l'iris : mêmes métiers, valeurs revues pour que la console se reconnaisse en une seconde comme n'étant pas le produit. Le cuivre est neuf et ne veut dire qu'une chose : le mode admin. azur la Régie elle-même : entrée courante, focus, lien, donnée vivante ; safran attend un geste de l'opérateur ; jade fait, valide, franchi ; corail alerte, échec, mesure ; iris un geste définitif, qui ne se défait pas ; cuivre le mode admin. Chaque jeton qui ÉCRIT tient AA sur les dix fonds clairs de la console, et `tests/test_contraste_aa.py` le mesure. */ --op-azur:#2F7FE0; --op-azur-clair:#7FB2F0; --op-azur-pale:#E4EEFB; --op-azur-sombre:#1F5FB0; --op-azur-texte:#1D5AA6; --op-safran:#D99A1E; --op-safran-pale:#FBF1DA; --op-safran-texte:#7A5406; --op-jade:#2E9E7A; --op-jade-pale:#E3F3EC; --op-jade-texte:#1B6B52; --op-corail:#D65B4F; --op-corail-pale:#FBE9E6; --op-corail-texte:#9B3A31; --op-iris:#6F63D6; --op-iris-pale:#ECEAF9; --op-iris-texte:#4A42A8; --op-cuivre:#B8672B; --op-cuivre-pale:#F8EADF; --op-cuivre-texte:#8A4A1A; /* L'encre : le rail, et rien d'autre de sombre. */ --op-nuit:#0F1A22; /* `--op-relief` vivait ici, déclaré et employé zéro fois depuis l'origine. Retiré le 09/09/2026 sur avis de Claude Design : « il ne nommait pas un sens mais une élévation ». Ce que l'élévation devait dire est désormais une règle de forme — la carte que l'état commande porte une ombre et une bordure haute cyan, aucune autre carte n'a d'ombre. Un jeton mort est une intention que personne n'a tenue, et il finit par être réemployé de travers parce qu'il était libre : `test_contraste_aa.py` en refuse maintenant l'apparition. */ /* Ardoise chaude — la zone des invités (tiers de confiance, entremetteur, proche qui recommande). Ni membre ni opérateur : ils arrivent par un jeton, pour une seule tâche, et ils doivent le voir sans avoir à le lire. */ --tz-900:#2E2A24; --tz-700:#4A4237; --tz-300:#B3A894; --tz-100:#EFE9DE; --tz-50:#F8F4EC; /* Refonte UI, 16/09/2026 : l'app membre et le portail invité lisent `--radius-*`. `--r` et `--r-sm` ne servent plus qu'à la console (et à `.chiffre`, `.jetons`) ; ils partiront avec un éventuel lot console. `--r-lg` a été retiré (lot de clôture). */ --r:14px; --r-sm:8px; /* --- L'ÉCHELLE D'ESPACEMENT (08/09/2026) ---------------------------------------------------- Elle n'existait pas : les marges étaient écrites en dur, 16, 22 ou 26 px selon l'endroit et le jour. Sept pas, dont chacun vaut environ 1,45 fois le précédent à partir de 13 px. CES VALEURS DÉCRIVENT CE QUI EST DÉJÀ LÀ, elles ne le corrigent pas. 8, 13, 18 et 26 sont les quatre valeurs qui dominent déjà cette feuille : une échelle en base 4 (16, 24, 48) serait plus pure et obligerait à réécrire trente écrans pour que les nouveaux ne jurent pas avec les anciens. Le code neuf s'y adosse ; l'ancien y vient quand on le touche, jamais par principe. */ /* Refonte UI, 16/09/2026 : l'app membre lit désormais `--space-*` (refonte/DESIGN-SYSTEM.md). `--e1` à `--e6` ne servent plus qu'à la console (et à `body.porte`) ; ils partiront avec un éventuel lot console. `--e7`, jamais lu, a été retiré (lot de clôture). */ --e1:4px; --e2:8px; --e3:13px; --e4:18px; --e5:26px; --e6:38px; /* L'ÉCHELLE TYPOGRAPHIQUE DE LA CONSOLE — 10/09/2026, passe visuelle. Elle en comptait DIX-SEPT tailles distinctes, dont onze entre 0,75 et 1,02 rem : des écarts d'un pixel, invisibles pris un par un, incohérents pris ensemble. C'est ce qui faisait qu'un écran ne ressemblait pas tout à fait au précédent sans qu'on sache dire pourquoi. Quatre degrés pour le texte. Chaque valeur remplacée s'écartait d'au plus 1 px de la sienne, et le rendu ne saute donc nulle part — c'est la cohérence qui change, pas la taille. */ --op-t1:.75rem; /* 12 px, le plancher du produit : étiquettes, chasse fixe, mentions */ --op-t2:.82rem; /* texte secondaire */ --op-t3:.9rem; /* texte courant */ --op-t4:1rem; /* titres de carte */ --shadow-op:0 1px 2px rgba(15,20,23,.05),0 14px 34px -18px rgba(15,20,23,.4); --serif:"Source Serif 4","Iowan Old Style","Palatino Linotype",Palatino,Georgia,serif; --sans:-apple-system,BlinkMacSystemFont,"Inter","Segoe UI",Roboto,Helvetica,Arial,sans-serif; --mono:"IBM Plex Mono",ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; /* L'arabe n'est employé qu'à un seul endroit, l'invocation qui ouvre l'engagement. Rien n'est téléchargé pour lui : la pile va chercher ce que le système possède déjà, dans l'ordre iOS/macOS puis Android puis Windows, et retombe sur le serif du navigateur. Une police d'affichage chargée pour trois mots coûterait plus qu'elle ne rapporte. */ --arabe:"Geeza Pro","Noto Naskh Arabic","Scheherazade New","Traditional Arabic","Amiri",serif; --ease:cubic-bezier(.22,.61,.36,1); /* --- DESIGN SYSTEM, TEMPS 1 (refonte UI, 15/09/2026) ---------------------------------------- Nouvelles échelles déclarées, AUCUNE règle ne les lit encore : rien ne change à l'écran. Les règles y passent lot par lot (temps 2). Temps 3 (16/09/2026) : `--shadow`, `--shadow-lg`, `--r-lg` et `--e7` retirés ; `--e1…6`, `--r`, `--r-sm` gardés pour la console. Valeurs écrites en littéral, jamais en `var()` d'un jeton qui bascule en Veille : un `var()` déclaré sur `:root` se résout sur `:root`, et ne suivrait pas le bloc de nuit. */ /* Espacements — 10 marches. Remplaceront `--e1…--e7` (4/8/13/18/26/38/56). */ --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px; --space-5:24px; --space-6:32px; --space-7:40px; --space-8:48px; --space-9:64px; --space-10:80px; /* Texte — 8 degrés, corps à 18 px (`--text-4`). Plancher : 12 px ; seule dérogation, écrite en clair ailleurs : les 11,2 px de l'état de palier (`.arc-l .quoi`). Le plancher des jetons est surveillé par refonte/verifier_contrat.py (règle M6). La console garde `--op-t1…4`. */ --text-1:.75rem; --text-2:.875rem; --text-3:1rem; --text-4:1.125rem; --text-5:1.25rem; --text-6:1.5rem; --text-7:1.75rem; --text-8:2.25rem; --leading-titre:1.2; --leading-dense:1.45; --leading-corps:1.6; /* Rayons. Remplaceront `--r-sm`, `--r`, `--r-lg`, `99px` et les rayons écrits en dur. */ --radius-champ:8px; --radius-carte:14px; --radius-grand:18px; --radius-pilule:999px; /* --- LE FILET N'EST PAS LE CONTOUR — 17/09/2026 ------------------------------------------- Deux métiers qu'un seul jeton faisait, et mal. `--line` SÉPARE : le trait sous une section, le bord d'une carte, le cadre d'un tableau. WCAG l'exempte explicitement, c'est de la décoration, et il a le droit d'être discret — c'est même tout ce qu'on lui demande. `--contour-champ` DÉLIMITE UN CONTRÔLE : le bord d'une pastille, d'une case, d'un champ. Là, 1.4.11 exige 3:1, et pour une bonne raison : une pastille du parcours a le même fond que la page derrière elle. Son bord est LA seule chose qui dit qu'on peut appuyer dessus. À 1,3:1, il ne le disait à personne. Les valeurs tiennent 3:1 sur les fonds clairs du produit, et `--contour-actif` sur les mêmes : un état de survol qu'on ne distingue pas n'est pas un état. */ --contour-champ:#8F8779; --contour-actif:#7D9684; /* Ombres (valeurs Papier ; la Veille redéclare les deux premières). */ --shadow-1:0 1px 2px rgba(20,26,23,.04),0 12px 32px -8px rgba(20,26,23,.10); --shadow-2:0 2px 4px rgba(20,26,23,.05),0 24px 60px -20px rgba(20,26,23,.22); --shadow-pied:0 -14px 30px -16px rgba(20,26,23,.5); --halo-focus:0 0 0 3px rgba(44,106,84,.13); /* halo des champs au focus (lot composants) */ /* Couches — l'ordre actuel à l'identique, avec des noms. 0 à 2 restent locaux à un composant. */ /* La bande de regard, quand un opérateur regarde. Déclarée ici parce que DEUX choses la lisent : le décalage du corps, et la hauteur du châssis du parcours. */ --h-regard:34px; --z-collant:10; --z-collant-onglets:11; --z-popover:12; --z-bandeau:20; --z-barre:40; --z-flottant:60; --z-flottant-haut:61; --z-calque:70; /* Dimensions qui ne sont pas des espacements. */ --cible-min:44px; /* cible tactile minimale */ --barre-basse:52px; /* barre des lieux sur téléphone ; écrite aussi en clair dans le bloc plein écran, où deux tests la lisent mot pour mot */ /* Couleurs fixes sur surfaces pleines ou sombres (ne basculent pas en Veille). */ --sur-plein:#FFFFFF; --sur-sombre-chaud:#FFFDF9; --fond-scene:#0B1A14; --voile-1:rgba(255,255,255,.07); --voile-2:rgba(255,255,255,.10); --voile-3:rgba(255,255,255,.14); } /* ============================================================================================= VEILLE — RETIRÉE LE 14/09/2026, décision du Fondateur. Depuis le 08/09/2026, `body.veille` imposait le thème sombre à l'appel et à la visio même en plein jour, au motif qu'un écran clair éclaire le visage de qui regarde. Le Fondateur a tranché autrement : « en mode normal, sombre uniquement si le téléphone est paramétré avec la vue sombre ». L'appel et la visio suivent donc le système comme tout le reste de la zone membre, par le bloc `prefers-color-scheme:dark` ci-dessous, et aucun écran ne force plus une peau. Le bloc de jetons qui vivait ici était une copie exacte de celui du système ; il n'a plus de raison d'exister, et `tests/test_lotf_aucune_peau_forcee.py` garde qu'il ne revient pas. CE QUI NE BASCULE PAS. La console opérateur (`body.op`, palette graphite, `color-scheme:light` assumé) et le portail des invités (`body.tiers`, ardoise chaude) gardent leur identité : ce sont deux métiers distincts, pas deux humeurs du même écran. CONTRASTES VÉRIFIÉS (WCAG AA, calculés et non estimés) : `tests/test_contraste_aa.py` refait le calcul pour chaque rôle d'écriture sur chaque fond, dans les deux thèmes. ============================================================================================= */ /* ============================================================================================= LE PRODUIT SUIT LE THÈME DU SYSTÈME — arbitrage du Fondateur, 08/09/2026. La question laissée ouverte au-dessus est tranchée : quand le téléphone passe en sombre, le soir, la zone membre passe avec lui. Un membre qui consulte la nuit ne reçoit plus une page blanche en pleine figure, et la raison qui imposait déjà Veille sur la visio (un écran clair éclaire le visage de qui regarde) vaut un peu partout ailleurs. CE QUI NE SUIT PAS, ET POURQUOI. La console opérateur et le portail des invités sont exclus par `:not(.op):not(.tiers)`. Ce sont deux métiers, pas deux humeurs du même écran : la console assume `color-scheme:light`, et un invité qui arrive par un jeton pour une seule tâche n'a aucune raison de recevoir l'apparence de nuit d'un produit dont il n'est pas membre. `body.veille` N'EXISTE PLUS (14/09/2026) : l'appel et la visio suivent ce bloc comme les autres écrans. C'est donc ici, et ici seulement, que vit la palette de nuit ; les contrastes sont recalculés dessus par `tests/test_contraste_aa.py`. ============================================================================================= */ @media (prefers-color-scheme:dark){ body:not(.op):not(.tiers){ color-scheme:dark; /* Le sol, et les deux surfaces qui s'en détachent. Un vert très sombre plutôt qu'un gris : la marque reste la marque quand la lumière baisse. */ /* Réchauffés le 17/09/2026, comme la palette claire : un noir bleuté sous un contenu qui parle de mariage est un contresens, et la nuit n'a pas de raison d'être plus froide que le jour. Mêmes luminances, donc mêmes rapports de contraste. */ --sable:#161B15; --sable-2:#1B201A; --paper:#232821; --ink:#EBEBE4; --ink-soft:#BDBDAF; --ink-mute:#A6A599; --line:#3B4034; --line-soft:#2C3028; --ligne-froide:#3C4239; --vert-25:#1F241C; /* Les deux contours de contrôle. Mêmes seuils qu'en Papier : 3:1 sur les fonds où un contrôle se pose, parce qu'une pastille y a le même fond que la page derrière elle. */ --contour-champ:#7B6552; --contour-actif:#487056; /* La gamme de marque ne bouge pas : elle porte les fonds sombres, qui restent sombres. Seuls les deux rôles d'écriture s'éclaircissent, et le vert de remplissage se relève d'un cran pour se détacher du sol. `--vert-50` et `--vert-100`, eux, sont des FONDS pâles en Papier : à ce titre ils basculent, comme le sable. */ --titre:#BCD0BA; --accent:#88AA93; --focus:#88AA93; /* --vert-300 : mêmes rapports qu'avant réchauffement (17/09/2026) */ --vert-plein:#2C6A54; --vert-plein-2:#245A47; --vert-50:#152220; --vert-100:#22322C; /* Le laiton garde son unique sens — « à vous de jouer » — et le tient dans le noir. */ --laiton:#D9B978; --laiton-2:#C7A159; --laiton-pale:#2A2417; --laiton-texte:#E3C688; --laiton-filet:#4A3D1F; --stop:#E08A80; --stop-pale:#2E1C19; --stop-ligne:#5C332E; --stop-plein:#A34A40; --stop-plein-2:#8C3A32; --structure:#8FA6BE; --structure-clair:#A9BCCE; --structure-pale:#1E2833; --structure-texte:#C9D6E2; --structure-filet:#33465A; /* Les accents chauds : seuls leurs fonds pâles basculent, les teintes de texte s'éclaircissent juste assez. Ils ne servent qu'en accent, jamais en fond de page — la règle ne change pas. */ --abricot:#E0A96F; --abricot-pale:#2C2119; --abricot-texte:#E8BA86; --terre:#C97D66; --safran:#DFB55C; --safran-pale:#2B2415; --safran-texte:#E5C275; --sarcelle:#5FA2A2; --sarcelle-pale:#152A2A; /* Les encres des illustrations, de nuit. Le papier de la vignette devient un brun très sombre plutôt qu'un gris : une vignette grise sur un fond vert-nuit se verrait comme un trou. Le vert du trait s'inverse — il éclaire au lieu d'assombrir — et les chaudes descendent en clarté, sans quoi elles brilleraient seules au milieu d'un écran éteint. */ --d-papier:#221A11; --d-brume:#2C2318; --d-miel:#5C4626; --d-safran:#BE8C33; --d-abricot:#B5723F; --d-terre:#A8503A; --d-sauge:#3F5C4A; --d-vert-2:#6FA98A; --d-vert:#A6CFB7; --d-nuit:#C9E4D4; --melange-encres:normal; --grain-opacite:.28; --shadow-1:0 1px 2px rgba(0,0,0,.5); --shadow-2:0 10px 30px -12px rgba(0,0,0,.7); /* design system, temps 1 */ --halo-focus:0 0 0 3px rgba(127,168,149,.28); /* lot composants : le halo Papier ne se voyait pas sur --paper */ } } /* --- SOCLE ----------------------------------------------------------------------------------- */ *{box-sizing:border-box} *:focus-visible{outline:2px solid var(--focus);outline-offset:2px;border-radius:3px} /* Les surfaces sombres dans les deux thèmes prennent le focus clair (refonte UI, 15/09/2026). */ .topnav,.lieux-bloc,.tiersnav,.bandeau-saison,.box.promesse,.acces>.sombre,.volet-sombre, body.en-session .scene{--focus:var(--focus-sur-sombre)} html{scroll-behavior:smooth} @media (prefers-reduced-motion:reduce){html{scroll-behavior:auto}} /* 18 px, pas 17 : le cahier des charges (§16) l'exige sur téléphone, et l'entourage du Fondateur n'a pas vingt ans. Mesuré le 12/09/2026 : 16,6 px de corps, 12 px de mentions. */ body{margin:0;background:var(--sable);color:var(--ink);font-family:var(--sans); font-size:var(--text-4);line-height:var(--leading-corps);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility} h1,h2,h3{font-family:var(--serif);font-weight:600;color:var(--titre);line-height:var(--leading-titre); margin:0 0 .5em;letter-spacing:-.012em;text-wrap:balance} h1{font-size:var(--text-7)}h2{font-size:var(--text-5)}h3{font-size:var(--text-3)} p{margin:0 0 .9em;max-width:66ch;text-wrap:pretty} a{color:var(--accent);text-underline-offset:2px} a:hover{color:var(--vert-800)} strong{font-weight:600} .sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden; clip:rect(0,0,0,0);white-space:nowrap;border:0} /* Les chiffres qui se comparent — durées, montants, volumes de travail — passent en chasse fixe. Un « 14 » et un « 6 » alignés se lisent d'un coup ; en proportionnelle il faut les compter. */ .nb{font-family:var(--mono);font-variant-numeric:tabular-nums;font-feature-settings:"tnum"} /* ============================================================================================= CHÂSSIS — trois peaux ============================================================================================= */ /* --- Peau membre : barre sombre, repère de saison permanent --------------------------------- L'ancienne barre était blanche sur fond sable : elle flottait, et le repère de saison n'y avait pas de place lisible. Sombre, elle devient un châssis — on sait toujours où l'on est, dans quelle semaine, et à quelle date la décision tombe, sans que cette information dispute la page. */ .topnav{background:var(--vert-950);color:var(--sur-sombre);position:sticky;top:0;z-index:var(--z-barre); box-shadow:0 1px 0 rgba(255,255,255,.05)} .topnav-in{max-width:1280px;margin:0 auto;padding:0 var(--space-5);min-height:56px; display:flex;align-items:center;gap:var(--space-4);flex-wrap:wrap} .topnav-brand{display:inline-flex;align-items:center;gap:var(--space-2);font-family:var(--serif); font-weight:600;font-size:var(--text-4);color:#FFFDF9;text-decoration:none;letter-spacing:.01em; padding:var(--space-2) 0} .topnav-brand svg{flex:0 0 auto} .lieux{display:flex;gap:2px;flex-wrap:wrap;align-items:center} .lieux a{color:var(--vert-300);text-decoration:none;font-size:var(--text-2);font-weight:600; padding:var(--space-2) var(--space-3);border-radius:var(--radius-pilule);white-space:nowrap;position:relative; transition:color .18s ease,background .18s ease} .lieux a:hover{color:#FFFDF9;background:rgba(255,255,255,.07)} .lieux a.on{color:#FFFDF9;background:rgba(255,255,255,.10)} /* Le repère de la page courante : un filet laiton sous l'entrée, qui s'étire à l'arrivée. */ .lieux a.on::after{content:"";position:absolute;left:11px;right:11px;bottom:2px;height:2px; border-radius:2px;background:var(--laiton-2)} /* --- LE BLOC DES LIEUX : dans la barre du haut sur bureau, en bas sur téléphone ------------- Un seul balisage, deux places. Sur bureau il reste ce qu'il était, une rangée d'onglets dans la barre sombre, et la cinquième cellule est masquée : la sortie rapide garde son bouton flottant, il n'y a pas de barre basse pour le gêner. Sur téléphone il descend au pied de l'écran et prend la place du bandeau de secours. La sortie rapide y devient la cinquième cellule, séparée par un filet et en couleur d'arrêt. Elle n'est pas une destination : elle ne prend jamais l'état de page courante, et elle vit hors du `