/* ============================================================ CHARTE "planche topo" — tokens + états colorés UNIQUEMENT. Les métriques (tailles, marges, mises en page) vivent dans style.css. BLEU ETUFOR depuis le 2026-07-26 (s9). Le vert de fondation a été remplacé par le bleu du logo de l'entreprise, MESURÉ sur le fichier fourni par Thierry : #006CAA — 81 % des pixels colorés du logo, teinte 202°. Méthode, à reprendre si la palette doit encore bouger : chaque vert a gardé SA saturation et SA luminosité, seule la TEINTE a changé. Tout le rapport de valeurs du thème est donc intact (ce qui était sombre le reste), et l'application n'a plus qu'UNE teinte, celle du logo. Le contraste ne baisse nulle part : à luminosité égale un bleu est perçu plus sombre qu'un vert (encre 11,35 → 12,12 sur papier). Le papier reste CHAUD (#f3efe6) : crème + bleu est le couple d'un plan d'architecte, refroidir le fond ferait perdre le grain "planche topo". DEUX EXCEPTIONS, chacune pour une raison mesurée : — priorités : le feu tricolore rouge → orange → VERT → gris est conservé. C'est une convention universelle, pas une couleur de marque ; le rendre bleu mettrait la teinte d'accent sur les tâches les MOINS urgentes. — NO STRESS : ne pouvait pas rester #4a6d8c, qui devenait le même bleu que LET'S GO. Descendu à #4C6776 (même teinte, désaturé). Vérifié sur les SIX paires d'accents : la plus proche vaut ΔE 29,0, contre 31,0 avant le changement — donc pas de régression, et les quatre restent au-dessus du seuil 4,5 de contraste, car un accent sert AUSSI de couleur de texte. NOMS HISTORIQUES CONSERVÉS : `--sapin` / `--sapin-2` portent désormais du bleu. Un nom qui ment coûte cher (cf. `commit_sync()`, notes.md) — ils sont gardés SCIEMMENT, parce que renommer obligerait à toucher `style.css` (18 références), qui est le fichier commun avec JIMMA : la charte cesserait d'être reportable par simple copie. À renommer le jour où le bleu sera adopté des deux côtés. Lire `--sapin` comme « accent principal ». ============================================================ */ /* IBM Plex Mono servie EN LOCAL. Elle venait de fonts.googleapis.com : une PWA qui prétend fonctionner hors ligne ne peut pas dépendre d'un CDN — la police serait tombée en repli au premier trajet sans réseau, et le service worker n'aurait de toute façon pas pu mettre en cache une origine tierce. Sous-ensemble LATIN uniquement (celui que Google servait déjà) : accents français, tiret cadratin et guillemets couverts ; les flèches et pictogrammes hors plage retombent sur Consolas, exactement comme avant. `font-display: swap` : le texte s'affiche tout de suite en repli, la police se substitue au chargement — pas d'écran muet. */ @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 400; font-display: swap; src: url("../polices/ibm-plex-mono-400.woff2") format("woff2"); } @font-face { font-family: "IBM Plex Mono"; font-style: normal; font-weight: 500; font-display: swap; src: url("../polices/ibm-plex-mono-500.woff2") format("woff2"); } :root { /* Fond : inchangé, volontairement chaud. */ --papier: #f3efe6; --papier-2: #ece7da; --carte: #faf8f1; --trame: rgba(62, 84, 96, .07); /* était rgba(61, 96, 76, .07) */ /* Pas du quadrillage (30.07, jimma #3360). VALEUR CHOISIE À L'ŒIL, sur l'appareil, après être passé par 28px puis 19px puis 24px : Thierry a tranché pour 20px. Le calcul a servi à comprendre, pas à décider — et la bonne décision n'est pas tombée sur un chiffre rond en millimètres. 20px = 3,31 mm réels sur l'iPhone, 4,65 mm sur le PC. NE JAMAIS L'ÉCRIRE EN `mm` : le millimètre du CSS est NOMINAL (1 pouce = 96px par définition), jamais physique. `4mm` vaudrait 15px, soit 2,5 mm réels sur l'iPhone — l'unité ment, et elle ment différemment sur chaque écran. Le millimètre reste la bonne façon d'en PARLER, jamais de l'écrire. Un pas ENTIER, aussi : un pas fractionnaire fait tomber les traits de 1px entre deux pixels, rendu inégal à 3 pixels physiques par pixel CSS. LES DEUX RAPPORTS, MESURÉS le 30.07 (ils resservent à chaque réglage) : iPhone 15 Pro 393px CSS sur 65,1 mm de dalle -> 0,166 mm par px CSS PC de Thierry iiyama 3440px sur 800 mm, aucune mise à l'échelle Windows (96 dpi, 1 px CSS = 1 px physique) -> 0,233 Le même quadrillage est donc 1,4x plus grand sur le PC — Firefox ET widget, c'est le même écran. Aucune valeur unique ne donne la même taille des deux côtés ; la parade, le jour où ça gênera, est une requête de média sur `resolution` (1 dppx sur le PC, 3 sur l'iPhone), pas une seconde feuille. */ --trame-pas: 20px; /* LE JOUR PRÉVU CI-DESSUS EST ARRIVÉ (30.07, jimma #3385) : Thierry a mesuré 4,5 mm sur le PC et en veut 5. La requête de média est donc posée plus bas, et CETTE valeur-ci reste celle de l'iPhone — tranchée à l'œil (#3360), elle ne doit pas bouger parce que le PC, lui, a changé. */ /* Encre. VALIDÉE PAR THIERRY SUR L'IPHONE le 2026-07-26 : barreau « bleu-4 » de la rampe d'une seule teinte -- L* 30, chroma 24, contraste 8,03 sur papier. L'encre n'est donc plus un presque-noir bleuté mais un BLEU assumé : elle s'éloigne du noir de ΔE 19,4 à 38,9. Toujours très au-dessus du seuil de lisibilité (4,5), y compris pour le segment de tri actif, qui pose du papier SUR cette encre — même paire, même 8,03. Barreaux plus prudents de la MÊME rampe, si l'encre devait un jour être assombrie : #153E56 (9,86), #173445 (11,34), #152B37 (12,77), et l'étape intermédiaire #222E35 (12,12), qui n'aura vécu que quelques heures. CONSÉQUENCE À SURVEILLER : l'écart de clarté avec `--encre-2` tombe de 24 à 12 points de L*. La hiérarchie texte principal / secondaire tient encore (les deux diffèrent aussi de chroma), mais elle est moins marquée. */ --encre: #134C6C; /* #22352b (vert) -> #222E35 -> ici */ --encre-2: #5A666C; /* était #5a6b60 */ /* Accent principal = LE BLEU DU LOGO, tel quel, non retouché. */ --sapin: #006CAA; /* était #3d604c */ --sapin-2: #005485; /* était #2f4d3c */ /* Alertes : inchangées — elles ne relèvent pas de l'identité. */ --rouge: #c8442e; --ambre: #b07c22; --orange: #d97b29; /* Filets et ombres : VOLONTAIREMENT LAISSES SUR LE TON SOMBRE (rgb 34,46,53 = l'ancienne encre), et non recales sur `--encre` passee a bleu-4. Ils ne disent pas la couleur du texte, ils disent la PROFONDEUR : les porter a L* 30 donnerait des filets a .15 d'opacite quasi invisibles et des ombres pales, donc des tuiles qui perdent leur relief. Un systeme visuel n'a aucune obligation d'avoir la meme couleur de texte et de bordure. Ils restent sur la teinte 202, donc dans la meme famille. Les 33 `rgba(34,46,53,...)` ecrites en dur dans `style.css` et les 6 de `tray.html` suivent la meme regle -- inchangees, pour la meme raison. */ --bord: rgba(34, 46, 53, .18); --bord-fort: rgba(34, 46, 53, .35); --ombre: 0 1px 0 rgba(34,46,53,.12), 0 6px 18px -12px rgba(34,46,53,.35); --ombre-tenue: 0 2px 3px rgba(34,46,53,.25), 0 10px 22px -8px rgba(34,46,53,.45); --mono: "IBM Plex Mono", Consolas, ui-monospace, monospace; /* replis : glyphes hors sous-ensemble latin */ --sans: "Segoe UI Semilight", "Segoe UI", system-ui, sans-serif; --sans-fort: "Segoe UI", system-ui, sans-serif; /* Priorités (miroir TW : 1 = haute) — FEU TRICOLORE, inchangé. Le vert de `--prio-3` est le SEUL vert restant : il ne dit pas la marque, il dit « peu urgent ». Voir l'en-tête du fichier. */ --prio-1: #c8442e; --prio-2: #d97b29; --prio-3: #4e7d42; --prio-0: #b8b4a8; /* Accents des colonnes kanban. Chacun sert AUSSI de couleur de texte (style.css : `color: var(--accent)` sur du .72rem) -> contraste >= 4,5 sur la carte exigé, et les SIX paires doivent rester distinctes. Mesuré : lisibilité 4,57 / 5,30 / 5,63 / 14,97 ; paire la plus proche LET'S GO–NO STRESS ΔE 29,0 (avant le passage au bleu : 31,0). */ --acc-illico: #c8442e; --acc-lets_go: #006CAA; /* était #3d604c — le bleu du logo */ --acc-no_stress: #4C6776; /* était #4a6d8c — désaturé pour ne pas se confondre avec LET'S GO */ --acc-backlog: #222; } /* Pas du quadrillage sur les écrans où 1 px CSS = 1 px PHYSIQUE (30.07, jimma #3385). Le critère n'est pas « PC » mais la DENSITÉ : c'est elle qui fait qu'un même pas ne rend pas la même taille réelle. Le PC de Thierry est à 1 dppx (iiyama 3440 px sur 800 mm, aucune mise à l'échelle Windows), l'iPhone 15 Pro à 3 dppx — la règle ne l'atteint donc jamais. POURQUOI 22 ET PAS 21 : Thierry a mesuré 4,5 mm pour 20 px (0,225 mm/px), la fiche ci-dessus 4,65 (0,2326). 22 px est la seule valeur ENTIÈRE qui tombe le plus près de 5 mm sous LES DEUX lectures — 4,95 mm par la première, 5,12 par la seconde. 22,2 px serait l'exact, et c'est justement ce qu'on s'interdit : un pas fractionnaire pose les traits de 1px entre deux pixels. `max-resolution` et non la syntaxe d'intervalle `(resolution <= …)` : même effet, comprise plus largement — la feuille est servie à Firefox, à WebKit iOS et au WebView2 du widget. NE PAS écrire ce pas en `mm` : le millimètre du CSS est NOMINAL (1 pouce = 96 px par définition), il ment, et il ment différemment sur chaque écran. */ @media (max-resolution: 1.5dppx) { :root { --trame-pas: 22px; } } * { box-sizing: border-box; } /* fond papier quadrillé + encre (chaque front garde police/marges) */ body { color: var(--encre); background: repeating-linear-gradient(0deg, transparent 0 calc(var(--trame-pas) - 1px), var(--trame) calc(var(--trame-pas) - 1px) var(--trame-pas)), repeating-linear-gradient(90deg, transparent 0 calc(var(--trame-pas) - 1px), var(--trame) calc(var(--trame-pas) - 1px) var(--trame-pas)), var(--papier); } /* logo ज (initiale de जिम्मा) */ .croix { color: var(--rouge); font-weight: 600; line-height: 1; font-family: "Nirmala UI", var(--sans-fort); } /* priorités : couleur de texte (pastilles) et bordure gauche de tuile */ .prio-1 { color: var(--prio-1); } .prio-2 { color: var(--prio-2); } .prio-3 { color: var(--prio-3); } .prio-0 { color: var(--prio-0); } /* Selecteur DOUBLE (`.tache.prio-b-N`, specificite 0,2,0) et non `.prio-b-N` seul (0,1,0). Raison mesuree, pas theorique : `style.css` pose `.tache { border-left-... }` a specificite EGALE et se charge APRES cette feuille -- a egalite, l'ordre source tranche, donc il gagnait. Symptome : les quatre priorites rendaient toutes l'encre (rgb(34,53,43) a l'epoque, le theme etait encore vert), alors que les variables --prio-N portaient bien leurs couleurs. Aucune erreur CSS, rien dans la console : seule la couleur CALCULEE le disait. Le meme defaut a ete diagnostique dans JIMMA (s17) -- les deux depots partagent ces feuilles. */ .tache.prio-b-1 { border-left-color: var(--prio-1); } .tache.prio-b-2 { border-left-color: var(--prio-2); } .tache.prio-b-3 { border-left-color: var(--prio-3); } .tache.prio-b-0 { border-left-color: var(--prio-0); } /* ÉTATS DU BADGE DATE — quatre échelons (Thierry, 30.07, jimma #3387) : rouge GRAS retard « c'est déjà passé » rouge aujourd'hui « c'est maintenant » vert demain « c'est pour tout de suite » gris plus loin que demain — AUCUNE classe, c'est le gris du badge (`.badge.date`, style.css) Le rouge dit l'urgence, la GRAISSE dit la faute : deux états voisins, deux signaux, une seule couleur. L'orange de demain a été remplacé par le vert le 30.07 ; c'est le SEUL changement de cette révision, les trois autres échelons étaient déjà en place. Le vert est `--prio-3`, le seul vert de la charte : il ne dit pas la marque, il dit « peu urgent ». Aucun jeton n'est créé ici — ce serait un deuxième nom pour la même couleur. Fichier COMMUN : vaut pour la PWA ET le widget (tray.html lie ce fichier). Les classes sont EXCLUSIVES chez tous les producteurs (rendu.js, _tuile.html, tray.html) : ne pas les réunir par une virgule, c'est précisément ce qui avait effacé la distinction retard/aujourd'hui. */ .badge.date.retard { color: var(--rouge); font-weight: 600; } .badge.date.ech-auj { color: var(--rouge); } .badge.date.ech-demain { color: var(--prio-3); } /* 4e ÉCHELON — « plus loin que demain ». ESSAI DU 30.07 : le gris seul restait moyennement visible et trop proche du vert de demain (constat Thierry sur l'appareil), d'où l'italique et la réduction, qui l'éloignent par la FORME et plus seulement par la teinte. `.612rem` ET NON `90%` : un pourcentage de `font-size` se résout sur le PARENT, pas sur l'élément — `90%` aurait donné 90 % de la police de la tuile, pas des `.68rem` du badge. La valeur est donc calculée ici : .68 × .9. `#7C7C75` choisi à l'œil sur un rendu à la vraie police. Contraste 3,66:1 sur le papier, sous le seuil AA de 4,5 pour du petit texte, et c'est ASSUMÉ : ce badge dit « rien ne presse ». Ne pas le « corriger » au nom d'une norme sans le lui redemander. Le jeton sert TROIS feuilles (pwa/css/style.css, la copie Flask, tray.html). */ :root { --date-loin: #7C7C75; /* ORANGE DE L'ETAT « a_redescendre » -- une ligne partie dans Access puis modifiee ici (vue Table, 30.07). CHOISI PAR LA MESURE et non a l'oeil : les deux oranges de la charte sont illisibles sur ce fond clair (`--orange` 2,69:1, `--ambre` 3,18:1, pour un seuil de 4,5). Celui-ci donne 4,72:1 sur `--papier` -- c'est le plus vif qui passe le seuil. Il tombe a 3,73:1 dans la pastille de mandat, dont le fond est teinte, exactement comme le bleu y tombe a 3,88 : ecart connu, assume, et rare (1 ligne sur 35 102 ce jour). C'est l'etat qui ALERTE : il doit se lire mieux que les autres, pas moins bien -- d'ou le refus des deux oranges existants malgre leur presence dans la charte. */ --sync-redescendre: #9A5B14; /* Taille du badge de date. DÉCLARÉE ICI et non dans `style.css`, parce que c'est le seul fichier que lisent les TROIS surfaces -- le widget ne charge pas `style.css`, il a ses propres métriques. Chaque surface peut la redéfinir pour elle-même (le widget la met à .65rem) ; le RAPPORT du 4e échelon, lui, n'est écrit qu'une fois et suit automatiquement. Avant ce jeton, ce rapport était figé à `.612rem` : juste dans la PWA, faux dans le widget, ou il ne valait que -5,8 %. */ --date-badge: .68rem; } .badge.date { font-size: var(--date-badge); } .badge.date.ech-loin { color: var(--date-loin); font-style: italic; font-size: calc(var(--date-badge) * .9); } /* filtre priorités : couleurs des cercles (app .pcercle + tray .pcer) */ .pc-1 { color: var(--prio-1); } .pc-2 { color: var(--prio-2); } .pc-3 { color: var(--prio-3); } .pc-0 { color: var(--prio-0); } /* Témoin d'état, en-tête du tray (`#temoin` de tray/tray.html). RÉTABLI le 26.07 : ces règles avaient été retirées à l'écriture de la PWA, qui n'a pas de témoin — et le tray de JIMAYA charge désormais CETTE charte. Sans elles le témoin s'affichait sans couleur ni police mono. Le sens a changé avec le portage : il ne dit plus l'état de Teamwork (abandonné) mais celui de la connexion à Supabase. Les états, eux, se correspondent — d'où des règles inchangées. La PWA ne les utilise pas ; elles ne coûtent que ces sept lignes, et les garder ici évite une seconde charte à maintenir. */ .temoin { font-family: var(--mono); white-space: nowrap; } .temoin.ok { color: var(--sapin); } .temoin.attente { color: var(--orange); } .temoin.attente.off { color: var(--encre-2); } .temoin.encours { color: var(--rouge); animation: pulse-sync 1s ease-in-out infinite; } @keyframes pulse-sync { 50% { opacity: .35; } }