/* ========================================================================== KAIROS — Thème « Instrument Pro » (direction 3a) Signature géométrique : chanfrein coin HAUT-DROIT + coin BAS-GAUCHE. ========================================================================== */ /* --- 1. TOKENS ---------------------------------------------------------- */ /* ⛔ POINT 6/7 (11.09.2026) — IDENTITE CHAUDE, CHASSIS SOMBRE, DEUX ACCENTS. Decision de Brice : graphite BRUN (chaud), pas bleute (froid) -- « ca fait plus pro et haute qualite » -- et le rail reste SOMBRE dans les DEUX modes clair/sombre du contenu (signature du produit, jamais bascule). Detail complet, ratios de contraste mesures et jetons de reprise : docs/2609_11_KAIROS_ARCHITECTURE_IDENTITE_VISUELLE_V2.md -- ce fichier applique les valeurs, le document explique le POURQUOI. Ne pas modifier l'un sans l'autre. */ :root { /* --- Chassis (rail), TOUJOURS sombre, ne change jamais avec le theme --- */ --ai-rail:#16130f; --ai-rail-line:#241f18; --ai-rail-label:#a8a094; --ai-rail-fg:#6e675c; --ai-rail-fg-active:#b08843; --ai-rail-fg-text-active:#f0ebe2; --ai-thead-bg:#16130f; --ai-thead-fg:#a8a094; /* --- Contenu CLAIR (defaut) --- */ --ai-ink:#2c3038; --ai-ink-2:#454b55; --ai-muted:#6b6b68; --ai-faint:#9a958c; --ai-disabled:#b7b2a8; --ai-bg:#efece7; --ai-surface:#f9f7f4; --ai-surface-2:#f1ede6; --ai-row-selected:#e9eff8; --ai-line:#e2ded6; --ai-line-2:#cfc9bf; --ai-line-soft:#e9e5dd; /* ENCRE POSEE SUR --ai-ink (15.09.2026). Un bloc peint en `var(--ai-ink)` (badge du bandeau) est un fond qui S'INVERSE avec le theme ; son encre doit donc s'inverser avec lui. Elle etait en dur (#fff, libelle #8b97a8) : en sombre, blanc sur creme #f0ebe2 = 1.19:1, libelle 2.49:1 -- la date du tableau de bord ne se lisait plus. En clair ces deux jetons valent EXACTEMENT les valeurs 3a d'avant : rien n'est repeint. Mesures et choix : docs/2609_11_KAIROS_ARCHITECTURE_IDENTITE_VISUELLE_V2.md, §4 ; sonde scripts/verifier_contraste_badge.js. */ --ai-on-ink:#fff; --ai-on-ink-muted:#8b97a8; /* ACCENT POSE SUR --ai-ink (15.09.2026, item 74) : le pied et le chevron de la carte d'alerte (`.ai-card--alert`) lisaient `--ai-accent-hi`, qui ne s'inverse pas avec le fond : en sombre, #6ba3ea sur creme = 2.20:1. En clair, valeur 3a exacte (#3d82e0, 3.45:1 -- sous l'AA texte, heritee, notee au document d'identite §4 point 6, non touchee). */ --ai-on-ink-accent:#3d82e0; /* Accent BLEU = ce sur quoi on agit (actions, liens, selection, travail planifie). Meme valeur qu'avant : elle passait deja tous les contrastes. */ --ai-accent:#1c56a0; --ai-accent-2:#14406f; --ai-accent-hi:#3d82e0; --ai-accent-soft:#eaf0f8; /* Accent LAITON = ce qu'on LIT sans y toucher (absences, vacances, teletravail, feries, notes de semaine, gardes, liseres, alertes non bloquantes). --ai-lecture pour les traits/icones/pastilles (mesure 3.05:1 sur --ai-surface, sous le seuil 3:1 sur --ai-bg -- reserver aux surfaces claires, jamais en filet direct sur le fond) ; --ai-lecture-fg pour du TEXTE (6.17:1 sur --ai-bg, largement AA). */ --ai-lecture:#b08843; --ai-lecture-fg:#6b5323; --ai-lecture-soft:#f5eee0; /* LOT 6a - le rouge d'action destructive. AUCUN des trois n'est un choix neuf : les trois existaient deja dans le produit, disperses. #a32d2d ai-ui.js:41 (.aiui-btn--danger) · base.html:83 (.ti-trash) absences.py:55 (MALADIE) · tokens.css:45 (--status-danger) #7a1d1d ai-ui.js:42 - le survol du SEUL bouton destructif existant #fcebeb tokens.css:46 (--status-danger-bg) · main.py:992 (DELETE) Nommes ici pour que le gabarit 3a puisse les EMPLOYER, pas pour les inventer. Les trois roles calquent exactement ceux de l'accent : couleur / survol / fond de survol du fantome. */ --ai-danger:#a32d2d; --ai-danger-2:#7a1d1d; --ai-danger-soft:#fcebeb; --ai-ok:#1f6f4a; --ai-ok-bg:#e8f1eb; --ai-warn:#a8620b; --ai-warn-bg:#fbf0df; --ai-warn-fg:#8a5008; --ai-info:#1c56a0; --ai-info-bg:#e8eef6; --ai-info-fg:#14406f; --ai-off:#7b8494; --ai-off-bg:#eef0f3; --ai-off-fg:#4b5563; /* ⛔⛔ POINT 1 (11.09.2026), revue de Brice — EXCEPTION NOMMEE A LA REGLE DES DEUX ACCENTS, assumee par Brice au nom de la lisibilite : le niveau d'urgence des echanges (/echanges) veut des couleurs FRANCHES -- un vrai vert, un vrai jaune, un vrai rouge -- jamais du bleu ni du laiton. Ce ne sont PAS --ai-danger/--ai-warn/--ai-ok : ces trois-la restent reserves a leur usage actuel (action destructrice, alerte, succes) partout ailleurs dans le produit -- les reutiliser ici ferait deriver LEUR sens a chaque futur ajustement de CETTE echelle. Trois jetons dedies, reserves a ce seul usage. ⚠️ « Jaune » n'est jamais un jaune pur (#FFEB3B et proches echouent le contraste texte des qu'on les pose sur un fond clair OU sombre) -- un amber/or soutenu se lit encore comme "jaune" et passe l'AA. Contraste MESURE (formule WCAG), texte ET pastille, sur --ai-surface ET sur --ai-bg des DEUX modes : clair : rouge #C62828 (5.26:1 / 4.77:1) · jaune #8A5A00 (5.54:1 / 5.03:1) · vert #1E6823 (6.42:1 / 5.83:1) sombre: rouge #EF5350 (4.96:1 / 5.31:1) · jaune #FFC107 (10.61:1 / 11.36:1) · vert #4CAF50 (6.22:1 / 6.66:1) Toutes >= 4.5:1 (seuil texte), les deux couleurs de chaque niveau servent A LA FOIS a la pastille (forme) et au libelle texte a cote -- jamais la couleur seule, l'etiquette texte reste posee (deja le cas, inchange). Nuancier (docs/2609_11_KAIROS_REFERENCE_Palette_V2.html) et document d'identite mis a jour avec ces memes six valeurs. */ --ai-urgence-rouge:#C62828; --ai-urgence-jaune:#8A5A00; --ai-urgence-vert:#1E6823; --ai-font:'Space Grotesk',system-ui,-apple-system,sans-serif; --ai-mono:'IBM Plex Mono',ui-monospace,monospace; /* LOT I point 2 : echelle typographique UNIQUE de l'app (6 niveaux nommes). Page titre=h1, titre de carte/section=h3, corps=body, libelle/table dense =table, texte d'aide=meta, en-tete de tableau=eyebrow. h2 reste dispo pour un rang intermediaire (bandeau semaine, etc.) entre h1 et h3. Ne JAMAIS ajouter une taille en dur dans un template : tout passe par ces 6 noms. */ --ai-fs-h1:27px; --ai-fs-h2:19px; --ai-fs-h3:14px; --ai-fs-body:13.5px; --ai-fs-table:12.5px; --ai-fs-meta:11.5px; --ai-fs-eyebrow:10px; /* LOT K point 5 : audit complet, 527 tailles en dur trouvees dans toute l'app. Les 6 tokens ci-dessus couvrent le TEXTE (titres, corps, libelles, aide) ; deux familles restaient hors echelle par nature - glyphes d'icone (Tabler, dimensionnes par font-size comme du texte, mais ce n'est pas du texte a lire) et grands nombres d'affichage (compteurs de carte KPI, badge semaine). Plutot que de les forcer sur l'echelle texte (une icone de 17px ecrasee a 14 ou 19px se voit), ce sont deux echelles COMPAGNES, memes principes (nommees, une seule source), perimetre different. */ --ai-fs-icon-sm:13px; --ai-fs-icon-md:17px; --ai-fs-icon-lg:21px; --ai-fs-display:32px; --ai-track-tight:-.035em; --ai-track-eyebrow:.16em; --ai-s1:4px; --ai-s2:8px; --ai-s3:12px; --ai-s4:16px; --ai-s5:20px; --ai-s6:28px; --ai-chamfer:12px; --ai-chamfer-sm:6px; --ai-chamfer-lg:16px; --ai-radius:0; --ai-shadow-1:0 1px 2px rgba(13,20,32,.05); --ai-shadow-2:0 1px 2px rgba(13,20,32,.2); } /* --- Contenu SOMBRE — bascule explicite (reglages utilisateur, defaut CLAIR). Le RAIL n'est PAS redefini ici : il reste sombre dans les deux modes, ses jetons ne dependent jamais de [data-theme]. `--ai-accent` est AJUSTE dans ce bloc (3d82e0, dejà --ai-accent-hi) : le bleu #1c56a0 ne passe qu'a 2.55:1 sur le fond sombre #16130f -- sous l'AA -- alors que 3d82e0 (deja dans la palette, aucune couleur neuve) tient 4.82:1. Meme principe applique a --ai-info, qui partage la valeur de --ai-accent. */ :root[data-theme="dark"] { --ai-ink:#f0ebe2; --ai-ink-2:#d8d2c6; --ai-muted:#a8a094; --ai-faint:#6e675c; --ai-disabled:#4f4a40; --ai-bg:#16130f; --ai-surface:#1e1a15; --ai-surface-2:#241f18; --ai-row-selected:#1c2733; --ai-line:#3a342b; --ai-line-2:#4a4335; --ai-line-soft:#2a251e; /* Encre sur --ai-ink (creme #f0ebe2 ici) -- deux valeurs DEJA dans la palette, aucune couleur neuve : #16130f (--ai-bg / --ai-rail) = 15.59:1 ; #6e675c (--ai-faint / --ai-rail-fg) = 4.71:1, AA texte. L'ecart libelle/texte (3.31:1) garde la hierarchie du clair (2.96:1). */ --ai-on-ink:#16130f; --ai-on-ink-muted:#6e675c; /* #1c56a0 (le bleu d'action du clair, --ai-accent-2 ici) sur creme #f0ebe2 = 6.12:1 -- AA texte, aucune couleur neuve, et il reste BLEU : le pied d'une carte d'alerte dit ou l'on va agir. */ --ai-on-ink-accent:#1c56a0; --ai-accent:#3d82e0; --ai-accent-2:#1c56a0; --ai-accent-hi:#6ba3ea; --ai-accent-soft:#1c2733; --ai-lecture:#b08843; --ai-lecture-fg:#d8c9a8; --ai-lecture-soft:#2a2318; --ai-info:#3d82e0; --ai-info-bg:#1c2733; --ai-info-fg:#6ba3ea; --ai-ok-bg:#173224; --ai-warn-bg:#332615; --ai-warn-fg:#e0a860; --ai-danger-soft:#3a1f1f; --ai-off-bg:#2a2822; --ai-off-fg:#a8a094; /* ⛔ TROUVE EN CONSTRUISANT LE NUANCIER (point 4, 11.09.2026) : --ai-danger et --ai-ok n'avaient jamais ete ajustes pour le mode sombre -- seuls leurs fonds (-soft/-bg) l'avaient ete. Mesure : #a32d2d (danger) sur le fond sombre #16130f ne fait que 2.62:1, #1f6f4a (ok) 3.03:1-- tous deux SOUS le seuil de texte 4.5:1. Corrige ici, meme principe que l'ajustement deja fait sur --ai-accent (garder la teinte, eclaircir jusqu'au seuil, jamais inventer une couleur neuve) : #d95d58 (danger) = 4.99:1, #2fa66d (ok) = 5.99:1. */ --ai-danger:#d95d58; --ai-danger-2:#a32d2d; --ai-ok:#2fa66d; /* POINT 1 (11.09.2026) : memes trois jetons qu'en clair, teinte gardee, eclaircis jusqu'au seuil de texte contre le fond sombre -- voir la mesure complete au bloc :root ci-dessus. */ --ai-urgence-rouge:#EF5350; --ai-urgence-jaune:#FFC107; --ai-urgence-vert:#4CAF50; } /* ⛔ PAS de @media (prefers-color-scheme) ICI, deliberement : Brice a ecrit « stockee PAR COMPTE, defaut CLAIR » -- un systeme d'exploitation regle en sombre ne doit RIEN changer tant que le compte n'a pas choisi. Le seul declencheur est l'attribut [data-theme="dark"], pose par le reglage utilisateur (voir base.html). */ /* ⛔ ITEM 75 (15.09.2026) — EN SOMBRE, PICO PEIGNAIT LES TABLEAUX EN BLEU FROID. Pico (premiere feuille de base.html) pose sous [data-theme=dark] --pico-background-color: rgb(19,22.5,30.5) · --pico-color: #c2c7d0 --pico-table-border-color: #202632 et les LIT dans `td, th { background-color; color; border-bottom }`, dans `p, ul, ol, dl, table, pre, address, blockquote`, `label, legend`, `dialog` et sur la racine. Aucun jeton Kairos ne les couvrait : toute cellule sans fond propre etait une dalle bleu-gris sur la page graphite chaud, tout paragraphe sans encre propre un gris-bleu. RECENSE PAR SENTINELLES, pas suppose (scripts/verifier_item75_pico_sombre.js, 41 ecrans, 1280/390) : cellules peintes par Pico sur 11 ecrans — /rh-bascule, /rh-decompte-heures-sup, /absences, /personnel/niveaux, /statistiques, /sites-salles, /activites-competences (deux onglets), /regles-couverture, /comptes, /indispos-salles, /pilotage ; encre lue par la grille du planning et par les p/ul/label de tout le produit ; filet lu par AUCUNE cellule (les tables Kairos posent le leur) — realigne quand meme, pour la table suivante. CORRESPONDANCE, en miroir du clair (ou Pico peint les cellules en BLANC, un cran au-dessus de la page #efece7 et presque confondu avec la carte #f9f7f4) : racine -> --ai-bg le canevas est la page td, th -> --ai-surface un cran au-dessus de la page, confondu avec la carte qui porte le tableau encre -> --ai-ink-2 celle des cellules de table.ai-table filet de table -> --ai-line-soft celui de table.ai-table Mesure (WCAG, sombre) : --ai-ink-2 sur --ai-surface 11.50:1 ; lien --ai-accent sur --ai-surface 4.50:1 (4.505, contre 4.67 sur le bleu de Pico) ; T14 repos -> survol (--ai-line-soft) 1.14, seuil 1.10. ⚠️ Le fond des cellules reste OPAQUE : les colonnes collees de 71-c et 71-g (rh-bascule, rh-decompte) ne posent aucun fond et comptent sur celui-ci pour couvrir ce qui defile dessous. ⚠️ Le CLAIR n'est pas touche : tout est sous [data-theme="dark"], captures claires comparees au pixel par la sonde. */ :root[data-theme="dark"] { --pico-background-color:var(--ai-bg); --pico-color:var(--ai-ink-2); --pico-table-border-color:var(--ai-line-soft); } :root[data-theme="dark"] :where(td, th) { --pico-background-color:var(--ai-surface); } /* ⛔ ITEM 79, PUCE « CHAMPS » (15.09.2026) — EN SOMBRE, PICO PEIGNAIT LES CHAMPS EN BLEU-GRIS ET LES CASES COCHEES DANS UN BLEU QUI N'EST PAS LE NOTRE. Pico pose `input, select, textarea { --pico-background-color: var(--pico-form-element-background-color); --pico-border-color: …; --pico-color: … }` et `[type=checkbox]:checked { … var(--pico-primary- background) }` ; sous [data-theme=dark] ces variables valent rgb(28,33,44), #e0e3e7, #2a3140, #0172ad. `.ai-champs` pose ses champs texte lui-meme : tout le RESTE lisait Pico. RECENSE PAR SENTINELLES, pas suppose (scripts/verifier_item79_champs_sombre.js, 36 ecrans, 1280/390) : champs lecteurs sur 17 ecrans — /versions (54 cases, 2 listes, recherche), /comptes et /activites-competences (radios), /echanges, /echanges/1, /mail/parametres, /absences, /personnel, /personnel/1/edit, /sites-salles, /audit-log, /regles-couverture, /indispos-salles, /reserve, /planning (notes de semaine) ; et le texte d'exemple (::placeholder) des champs de `.ai-champs` eux-memes, qu'aucune regle Kairos ne peignait. CORRESPONDANCE — un formulaire, un aspect : celui que `.ai-champs` pose deja (§ LOT F, decision de Brice du 02.09), dans ses deux modes. fond, fond au focus -> --ai-surface encre -> --ai-ink filet -> --ai-line-2 ; au focus --ai-accent anneau de focus -> --ai-accent-soft (champ texte) texte d'exemple -> --ai-muted invalide / valide -> --ai-danger / --ai-ok (aucun porteur aujourd'hui : pose pour le champ suivant) option choisie (liste multiple) -> --ai-row-selected Et deux ecarts VOULUS a `.ai-champs`, parce que la mesure les impose : - case/radio AU REPOS : filet --ai-muted et non --ai-line-2. Le filet EST le composant (WCAG 1.4.11, 3:1) : --ai-line-2 sur --ai-surface = 1.77:1. Pico sombre d'avant : 1.33:1. ⚠️ --ai-faint (3.10:1 sur --ai-surface) a ete ESSAYE ET MESURE FAUX : les cases de la fiche personnel sont posees sur --ai-surface-2 (2.78:1) et « Pictogrammes » de /absences 2.93:1. --ai-muted tient 6.69:1 sur --ai-surface, 5.6:1 et plus sur --ai-surface-2. - case/radio AU FOCUS : anneau --ai-accent-hi. Une case cochee a deja son filet en --ai-accent, l'anneau est le SEUL signe du focus ; --ai-accent-soft (#1c2733) y serait invisible. 6.63:1 sur --ai-surface. Mesure (WCAG, sombre, sur --ai-surface) : encre 14.57:1 ; texte d'exemple 6.69:1 ; filet au focus 4.50:1 ; invalide 4.66:1 ; valide 5.60:1 ; coche blanche sur --ai-accent 3.84:1. ⚠️ Les ICONES de champ (chevron, date, heure, recherche) sont des SVG en data-URI : une variable CSS n'entre pas dans un data-URI. Leur trace est donc ecrit en dur, rgb(168,160,148) = la valeur SOMBRE de --ai-muted — a changer ici si ce jeton change. Memes dessins que Pico, seul le `stroke` differe. Le clair garde le gris de Pico (non touche). ⚠️ Autres puces de 79, blocs suivants : `small` / `summary`, `code`, puis boutons (`button.secondary`, bouton bleu de Pico) et filet attenue. ⚠️ Le CLAIR n'est pas touche : tout est sous [data-theme="dark"]. */ :root[data-theme="dark"] { --pico-form-element-background-color:var(--ai-surface); --pico-form-element-active-background-color:var(--ai-surface); --pico-form-element-selected-background-color:var(--ai-row-selected); --pico-form-element-color:var(--ai-ink); --pico-form-element-placeholder-color:var(--ai-muted); --pico-form-element-border-color:var(--ai-line-2); --pico-form-element-active-border-color:var(--ai-accent); --pico-form-element-focus-color:var(--ai-accent-soft); --pico-form-element-invalid-border-color:var(--ai-danger); --pico-form-element-invalid-active-border-color:var(--ai-danger); --pico-form-element-valid-border-color:var(--ai-ok); --pico-form-element-valid-active-border-color:var(--ai-ok); --pico-icon-chevron:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(168, 160, 148)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-date:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(168, 160, 148)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='18' rx='2' ry='2'%3E%3C/rect%3E%3Cline x1='16' y1='2' x2='16' y2='6'%3E%3C/line%3E%3Cline x1='8' y1='2' x2='8' y2='6'%3E%3C/line%3E%3Cline x1='3' y1='10' x2='21' y2='10'%3E%3C/line%3E%3C/svg%3E"); --pico-icon-time:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(168, 160, 148)' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='12' r='10'%3E%3C/circle%3E%3Cpolyline points='12 6 12 12 16 14'%3E%3C/polyline%3E%3C/svg%3E"); --pico-icon-search:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none' stroke='rgb(168, 160, 148)' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='11' cy='11' r='8'%3E%3C/circle%3E%3Cline x1='21' y1='21' x2='16.65' y2='16.65'%3E%3C/line%3E%3C/svg%3E"); } /* Specificite (0,3,1) : Pico pose l'anneau des cases par `[data-theme=dark] input:is([type=checkbox], …)` (0,2,1). Le bleu d'action est redefini ICI pour les cases et radios, et ce bloc reste necessaire : la puce « boutons » (plus bas) pose --pico-primary-background sur --ai-accent-2 pour les boutons ; les cases gardent --ai-accent (coche blanche 3.84:1, seuil 3:1 d'un composant, point 12 du document d'identite). */ :root[data-theme="dark"] input:is([type="checkbox"], [type="radio"]) { --pico-primary-background:var(--ai-accent); --pico-primary-border:var(--ai-accent); --pico-form-element-border-color:var(--ai-muted); --pico-form-element-focus-color:var(--ai-accent-hi); } /* ⛔ ITEM 79, PUCE « SMALL / SUMMARY » (15.09.2026) — EN SOMBRE, PICO PEIGNAIT LES AIDES ET LES TITRES DE SECTION OUVERTS DE SON GRIS BLEUTE. `--pico-muted-color` vaut #7b8495 = rgb(123,132,149) sous [data-theme=dark]. Pico la lit, directement ou par une variable qui en derive, dans :where(input,select,textarea,fieldset,.grid) + small (aide d'un champ) … [aria-invalid=false|true] + small -> --pico-ins-color / --pico-del-color details[open] > summary:not([role]):not(:focus) -> --pico-accordion-open-summary-color details summary:focus:not([role]) -> --pico-accordion-active-summary-color (#79c0ff) figure figcaption, hgroup > :last-child, [type=file], separateur du fil d'Ariane (li::after), blockquote footer, ins, del. ⚠️ Un titre OUVERT battait la couleur que son gabarit lui donne : la regle de Pico pese (0,3,2), `.ec-mois__summary { color:var(--ai-ink) }` (0,1,0). RECENSE PAR SENTINELLES, pas suppose (scripts/verifier_item79_aides_sombre.js, 39 ecrans, 1280/390, page servie PUIS tous ses
ouverts) : aides `small` — /absences (small.ab-hint ×2), /sites-salles (×3), /salles/new, /type-activites/new ; titres ouverts — /echanges (mois, « Ouvrir un sujet »), /planning (« À regarder », « Note de la semaine »), /rh-bascule, /comptes (« modifier » ×6, 4.04:1 AVANT — sous l'AA), /versions (56 libelles, une fois deplies). CORRESPONDANCE, en miroir du clair (ou Pico peint ces textes d'un gris un cran sous l'encre) : --pico-muted-color, titre ouvert, pied de citation -> --ai-muted aide valide / invalide, ins / del -> --ai-ok / --ai-danger (memes jetons que les filets valide/invalide des champs, 79) titre au focus (souris) -> --ai-accent-hi Mesure (WCAG, sombre) : --ai-muted 7.16 sur --ai-bg, 6.69 sur --ai-surface, 6.32 sur --ai-surface-2 (Pico : 4.92 / 4.59 / 4.34) ; ecart --ai-muted / --ai-ink-2 1.72:1, le clair tient 1.64 — la hierarchie aide/texte est gardee. --ai-ok 5.60 / --ai-danger 4.66 sur --ai-surface (4.41 sur --ai-surface-2 : aucun porteur aujourd'hui, pose pour le champ suivant). ⚠️ Titre au focus : --ai-accent-hi et non --ai-accent. Le bleu d'action tient 4.50:1 sur --ai-surface et 4.26:1 sur --ai-surface-2 — sous l'AA ; --ai-accent-hi 6.63 / 6.27. C'est le bleu que la case prend deja au focus. ⚠️ Hors perimetre : au focus CLAVIER, Pico peint le titre de --pico-primary (#01aaff) — puce « bouton bleu de Pico ». Le titre FERME lit --pico-color, deja realigne par 75 (--ai-ink-2). ⚠️ Le CLAIR n'est pas touche : tout est sous [data-theme="dark"]. */ :root[data-theme="dark"] { --pico-muted-color:var(--ai-muted); --pico-accordion-open-summary-color:var(--ai-muted); --pico-blockquote-footer-color:var(--ai-muted); --pico-accordion-active-summary-color:var(--ai-accent-hi); --pico-ins-color:var(--ai-ok); --pico-del-color:var(--ai-danger); } /* ⛔ ITEM 79, PUCE « CODE » (15.09.2026) — EN SOMBRE, PICO POSAIT CHAQUE `code` SUR UNE DALLE BLEU MARINE, ENCRE GRIS BLEUTE. Sous [data-theme=dark] : --pico-code-background-color rgb(26,30.5,40.25), --pico-code-color #8891a4. Pico les lit dans code, kbd, pre, samp { background; color } pre > code, pre > samp { background: 0 0 } (le bloc porte la dalle) `kbd` lit --pico-code-kbd-background-color = var(--pico-color) et --pico-code-kbd-color = var(--pico-background-color) : les deux DERIVENT de variables deja realignees par 75 (touche creme sur graphite, 12.30:1) — non touchees ici, jugees par la sonde. RECENSE PAR SENTINELLES, pas suppose (scripts/verifier_item79_code_sombre.js, 40 ecrans, 1280/390, page servie PUIS tous ses
ouverts) : code — /rh-bascule (reglages rh_plafond_report_*), /personnel/1/edit (×2, rh_date_reprise / settings.json), /versions (×4 : commit de mesure, HEAD, comparaison, une ligne depliee) ; kbd — /personnel/1/patterns, /personnel/27/patterns, dans l'aide des trames (app/aide/35-trames.html) — deja chaud par 75. Les autres `code` du produit posent leur fond et leur encre eux-memes (.aide-corps, .cp-mdp, .vp-*, .rf-liste, .imp-contrat) et ne lisent pas Pico. CORRESPONDANCE : dalle -> --ai-line-soft et PAS --ai-surface-2, qu'ecrivent .aide-corps et .cp-mdp : mesure des supports, 2 releves sur 14 (1280 + 390) posent la dalle sur une section --ai-surface-2 (/personnel/1/edit) — dalle 1.00:1, invisible. --ai-line-soft : 1.22 sur --ai-bg, 1.14 sur --ai-surface, 1.08 sur --ai-surface-2 ; la dalle de Pico en clair tient 1.03 sur la carte, 1.08 sur la page : meme discretion. (--ai-line, 1.33 a 1.50, essaye au calcul : plus visible qu'une dalle claire, et c'est un jeton de FILET, pas de surface.) encre -> --ai-ink-2 l'encre du texte courant (75), que les gabarits de Kairos ecrivent deja quand ils stylent un code (.vp-version__meta, .rf-liste). Pas --ai-muted, miroir du gris de Pico clair : un code est un identifiant qu'on RECOPIE (commit, nom de reglage) — il ne s'efface pas. Mesure (WCAG, sombre) : --ai-ink-2 sur --ai-line-soft 10.10:1 (Pico : 5.22). ⚠️ Le CLAIR n'est pas touche : tout est sous [data-theme="dark"]. La dalle claire de Pico (rgb(243,244.5,246.75)) est elle aussi froide sur la carte creme — constat, pas corrige ici (clair identique, regle de 79). */ :root[data-theme="dark"] { --pico-code-background-color:var(--ai-line-soft); --pico-code-color:var(--ai-ink-2); } /* ⛔ ITEM 79, PUCE « BOUTONS » ET FILET ATTENUE (15.09.2026) — EN SOMBRE, PICO PEIGNAIT SES BOUTONS, SES ANNEAUX DE FOCUS ET SES FILETS DANS SA PALETTE FROIDE. Sous [data-theme=dark] : --pico-primary-background #0172ad (bouton bleu), survol #017fc0, --pico-primary #01aaff, --pico-primary-focus rgba(1,170,255,.375), --pico-secondary-background #525f7a, --pico-contrast-background #eff1f4, --pico-muted-border-color #202632. Pico les lit dans button, [role=button], [type=submit|button|reset] fond, filet, encre :hover/:active/:focus -> -hover-* ; :focus -> anneau 0 0 0 2px -focus .secondary, [type=reset], ::file-selector-button -> secondary-* .contrast, bulle [data-tooltip] -> contrast-* .outline -> filet et encre a:focus-visible -> anneau -focus details summary:focus-visible -> encre --pico-primary hr, blockquote -> muted-border RECENSE PAR SENTINELLES, pas suppose (scripts/verifier_item79_boutons_sombre.js, 46 ecrans, 1280/390, 31 variables ; page servie,
/ ouverts, puis AU SURVOL et AU FOCUS CLAVIER de chaque element interactif) : bouton bleu — /personnel/1/edit et /personnel/new (« Enregistrer »), /indispos-salles (« Enregistrer l'indisponibilite ») ; bouton secondaire — « Appliquer 60% » et le lien-bouton « Annuler » de /personnel/1/edit, « Annuler » de /personnel/new ; ANNEAU DE FOCUS — TOUT LE PRODUIT : chaque lien et bouton du rail et du contenu lisait --pico-primary-focus au focus clavier, bleu translucide a 1.99:1 sur le graphite (seuil 3:1) ; titre au focus clavier — summary.aide-porte__bouton (--pico-primary) ; .contrast, .outline, bulles, hr, citation — aucun porteur : poses pour le suivant, exerces par le banc de la sonde. CORRESPONDANCE, en miroir du clair (bouton bleu plein, secondaire neutre plein, un cran plus SOMBRE au survol — ce que fait deja .ai-btn) : bouton bleu repos --ai-accent-2, encre #fff (inchangee) 7.27:1 survol melange --ai-accent-2 / --ai-accent-soft 10.79:1 secondaire repos --ai-line-2, encre --ai-ink 8.24:1 survol --ai-line 10.37:1 contraste, bulle repos --ai-ink, encre --ai-on-ink 15.59:1 survol --ai-ink-2 12.30:1 anneaux de focus --ai-accent-hi OPAQUE : 7.10 sur --ai-bg, 6.63 sur --ai-surface (Pico : 1.99). C'est deja le bleu du focus des cases (79 champs) et des titres (79 aides). contour, titre au focus clavier --ai-accent-hi (6.63 / 6.27) ; survol du contour --ai-ink ; contour secondaire --ai-muted filet attenue (hr, citation) --ai-line, le jeton de filet ⚠️ BOUTON BLEU : --ai-accent-2 et PAS --ai-accent, qu'ecrit .ai-btn. Blanc sur --ai-accent = 3.84:1, sous l'AA (Pico : 5.23) : aligner les boutons de Pico sur .ai-btn les aurait tous degrades. Le defaut de .ai-btn en sombre est note (document d'identite §4 point 15), pas corrige ici. ⚠️ SURVOL DU BOUTON BLEU : aucun jeton n'est plus sombre que --ai-accent-2 en restant bleu (--ai-accent-soft seul : bouton confondu avec la page, 1.22). Le melange a parts egales des deux est le seul ecart de ce fichier a « aucune couleur neuve » — il ne sort pas de la palette. --ai-accent (plus clair, sens de Pico) : 3.84:1, rejete. ⚠️ SOULIGNEMENT : color-mix(… 50%, transparent) = la demi-teinte de Pico. ⚠️ Le CLAIR n'est pas touche : tout est sous [data-theme="dark"]. */ :root[data-theme="dark"] { --pico-primary:var(--ai-accent-hi); --pico-primary-background:var(--ai-accent-2); --pico-primary-border:var(--ai-accent-2); --pico-primary-underline:color-mix(in srgb, var(--ai-accent-hi) 50%, transparent); --pico-primary-hover:var(--ai-ink); --pico-primary-hover-background:color-mix(in srgb, var(--ai-accent-2), var(--ai-accent-soft)); --pico-primary-hover-border:color-mix(in srgb, var(--ai-accent-2), var(--ai-accent-soft)); --pico-primary-hover-underline:var(--ai-ink); --pico-primary-focus:var(--ai-accent-hi); --pico-primary-inverse:#fff; --pico-secondary:var(--ai-muted); --pico-secondary-background:var(--ai-line-2); --pico-secondary-border:var(--ai-line-2); --pico-secondary-underline:color-mix(in srgb, var(--ai-muted) 50%, transparent); --pico-secondary-hover:var(--ai-ink-2); --pico-secondary-hover-background:var(--ai-line); --pico-secondary-hover-border:var(--ai-line); --pico-secondary-hover-underline:var(--ai-ink-2); --pico-secondary-focus:var(--ai-accent-hi); --pico-secondary-inverse:var(--ai-ink); --pico-contrast:var(--ai-ink); --pico-contrast-background:var(--ai-ink); --pico-contrast-border:var(--ai-ink); --pico-contrast-underline:color-mix(in srgb, var(--ai-ink) 50%, transparent); --pico-contrast-hover:var(--ai-ink-2); --pico-contrast-hover-background:var(--ai-ink-2); --pico-contrast-hover-border:var(--ai-ink-2); --pico-contrast-hover-underline:var(--ai-ink-2); --pico-contrast-focus:var(--ai-accent-hi); --pico-contrast-inverse:var(--ai-on-ink); --pico-muted-border-color:var(--ai-line); } /* LIEN-BOUTON AU SURVOL — mesure par la meme sonde : `a:hover { color: var(--ai-accent-2) }` (§ liens, poids (0,1,1)) bat l'encre que Pico pose sur [role=button] (0,1,0). Au survol, le lien-bouton « Annuler » de /personnel/1/edit passait en bleu sur son propre fond : 1.36:1 avec Pico sombre, 1.69:1 avec les jetons ci-dessus. Ici l'encre reste celle que Pico donne au bouton dans cet etat (--pico-color = -inverse). Les boutons Kairos portes par un (.ai-btn, .ai-btn-ghost, .ai-btn-outline) posent leur encre eux-memes : exclus. ⚠️ Le meme defaut existe en CLAIR — non touche (regle de 79), reporte au backlog avec sa mesure. */ :root[data-theme="dark"] a[role="button"]:not([class*="ai-btn"]):hover { color:var(--pico-color); } /* ANNEAU DE FOCUS POSE SUR UN EN-TETE --ai-ink — mesure par la meme sonde : la croix du tiroir de /absences est posee sur `.ab-drawer-header`, peint en --ai-ink, donc CREME en sombre. --ai-accent-hi n'y tient que 2.20:1 (seuil 3:1 ; l'anneau de Pico : 1.38:1). Meme en-tete sur le tiroir du planning (`.pl-drawer-header`, 74-c). Le jeton existe pour ce cas precis : --ai-on-ink-accent, « accent pose sur --ai-ink » (#1c56a0 sur creme, 6.12:1). Pose sur l'en-tete, herite par ce qui s'y focalise. ⚠️ `body:not(:has(.k2-pad))` : drapeau de refonte allume (refonte_absences_enabled, refonte_planning_enabled — allumes sur DEV), kairos-2 repeint l'en-tete en chassis graphite et l'anneau de la racine (--ai-accent-hi, 7.59:1) est le bon. La garde porte sur la PAGE et non sur l'ancetre : mesure, une garde `:not(.k2-pad *)` dependait de l'endroit ou l'en-tete est pose dans le DOM (2.55:1 sur un en-tete hors de .k2-pad, drapeau allume). Mesure dans les deux etats de chaque drapeau. ⚠️ La sonde pose sa sentinelle AUSSI sur ces deux en-tetes : une variable redeclaree localement cacherait sinon ses lecteurs. */ :root[data-theme="dark"] body:not(:has(.k2-pad)) :is(.ab-drawer-header, .pl-drawer-header) { --pico-primary-focus:var(--ai-on-ink-accent); } /* ⛔ POINT 3 (11.09.2026) — UN SEUL INTERRUPTEUR POUR TOUS LES PICTOGRAMMES. Regle deplacee ici depuis planning/view.html : elle vivait dans UN SEUL gabarit alors que .pl-picto est desormais pose dans onze fichiers (planning, pilotage, personnel, echanges, audit, comptes, sites externes, patterns du personnel). Une classe partagee dans la feuille commune, pas une copiee-collee par ecran -- sinon la regle divergera au premier oubli. La classe body.pl-hide-pictos est posee par app/templates/base.html, pour CHAQUE page qui l'etend, depuis la cle localStorage partagee `kairosShowPictos` (etat de depart : eteint -- decision de Brice du 11.09.2026, l'inverse d'avant). */ body.pl-hide-pictos .pl-picto { display:none; } /* ⛔⛔ ITEM 121 (17.09.2026) — L'AUTRE MOITIE DU POINT 3 : CE QUI NE PASSE JAMAIS SOUS L'INTERRUPTEUR CI-DESSUS. ⛔ CE QUI A ETE MESURE, PAS DEDUIT. Le 16.09, l'item 120 a ouvert une capture et trouve, reglages par defaut : .ec-erreur .pl-picto i -> checkVisibility() = false boite 0 x 0, ::before content = "" Le recensement de l'item 121 a ensuite trouve 24 triangles d'alerte emballes dans `.pl-picto` (21 au grep d'une seule ligne, 3 de plus concatenes en JS) : AUCUN ne se peignait chez personne. ⭐ LA REGLE QUI TRANCHE, ET ELLE EST DANS LE NOM DES DEUX CLASSES. `.pl-picto` = PICTOGRAMME DE CONFORT : il accompagne un libelle, un titre ou une propriete affichee en permanence. Il illustre. On peut l'eteindre sans rien perdre — c'est tout l'objet de l'interrupteur. `.ai-signal` = SIGNAL : il porte le NIVEAU d'un etat anormal, risque ou bloquant. Il n'apparait que quand cet etat est vrai. Une erreur n'est pas une decoration : son icone ne depend pas d'un reglage de confort. ⚠️ POURQUOI LA COULEUR NE SUFFIT PAS A REMPLACER LE GLYPHE — c'est deja ecrit au § 11ter/11quater plus bas, mesure a l'appui : entre les deux niveaux de bandeau la teinte ne rend que 1,05 a 1,53 : 1. « La teinte est un RENFORT, elle ne porte rien toute seule. » Ce qui porte, c'est le GLYPHE qui change. Un fond ambre n'est donc PAS un porteur de remplacement : il ne dispense aucun triangle de se peindre. ⚠️ LA TAILLE EST LA LECON DE L'ITEM 120 : sorti de `.pl-picto`, le triangle prenait la taille du texte (13,5 px, boite 14 x 13 mesuree au navigateur). Il prend donc une taille d'ICONE. Deux seulement, pas une par ecran : `--md` (defaut, texte courant) et `--sm` pour les contextes denses (meta 11,5 px, eyebrow 10 px : un 17 px y serait demesure, exactement la faute que Brice a trouvee le 16.09 sur l'item 113). ⚠️ LA COULEUR N'EST PAS POSEE PAR DEFAUT, ET C'EST VOULU : la plupart des hotes (.mb-erreur, .pl-indispo-badge, .ai-rapport-*, les lignes rouges de personnel/fiche, un bouton --danger) donnent deja la bonne encre par heritage. `--warn` n'est ajoute que la ou l'hote est neutre. Une classe qui forcerait `--ai-warn-fg` repeindrait en ambre le triangle d'un bouton rouge a texte blanc. ⭐ LE FILET, ET IL A ETE VU MORDRE (temoin T2 de sonde_pictos_alerte.js). Si un tour futur ré-emballe un signal dans `.pl-picto`, il reste visible : le cliquet `scripts/verifier_pictos_alerte.js` refuse le balisage, et cette regle empeche entre-temps la disparition SILENCIEUSE — le defaut que l'item 121 a du aller chercher a la loupe. ⚠️ Regle SEPAREE, et non `:not(:has(...))` greffe sur la regle du Point 3 : sur un navigateur sans `:has()`, une regle greffee serait jetee AVEC le masquage et rallumerait TOUS les pictogrammes du produit. Separee, elle est simplement ignoree, et on retombe sur le comportement d'aujourd'hui dans le seul cas que le cliquet interdit deja. */ .ai-signal { font-size:var(--ai-fs-icon-md); vertical-align:-3px; flex:none; line-height:1.35; } .ai-signal--sm { font-size:var(--ai-fs-icon-sm); vertical-align:-2px; } .ai-signal--warn { color:var(--ai-warn-fg); } body.pl-hide-pictos .pl-picto:has(.ai-signal) { display:inline; } /* ⛔⛔ ITEM 168 (22.09.2026) — LA TROISIEME FAMILLE, ET C'EST UN RETOUR A LA DECISION DE L'ITEM 121, PAS UNE EXCEPTION DE PLUS. Brice, 22.09.2026 : « so YES : Pictograms hidden by default … UNLESS LIKE WE ALREADY SAID IT — they are not a pictogram but essential (like in the planning the criss-cross picto to say that the planning is modified differently than originally planned for that trame) ». Et, sur l'absence de drapeau : « Sans drapeau : c'est le retour a la decision, pas une nouvelle fonction. » ⭐ LE VOCABULAIRE EST DESORMAIS A TROIS MOTS, ET C'EST LE MEME CRITERE QU'EN 121 — « que perd-on en eteignant ? » : `.pl-picto` PICTOGRAMME DE CONFORT. Il accompagne un libelle deja ecrit a cote. Eteint, on perd une illustration, jamais une information. C'est TOUT l'objet de l'interrupteur. `.ai-signal` SIGNAL. Il porte le NIVEAU d'un etat anormal, risque ou bloquant, et n'apparait que quand cet etat est vrai. `.ai-essentiel` PORTEUR D'INFORMATION. L'etat qu'il decrit est NORMAL (ce n'est donc pas un signal), mais AUCUN mot de l'ecran ne le dit a sa place. L'eteindre ne retire pas un ornement : il retire une donnee. ⚠️ LA QUESTION QUI TRANCHE, ET ELLE SE MESURE : masque-t-on le glyphe et relit-on la case sans rien perdre ? Mesure du 22.09 sur le produit vivant (`mesures/item_d1/inventaire_pictos_2026-09-22.json`) : · `/absences`, interrupteur eteint : une pastille ne porte plus que des initiales et une couleur. Le MOTIF — vacances, maladie, formation — n'est lisible NULLE PART a l'ecran, legende comprise. Seulement au `title`, c'est-a-dire au survol, c'est-a-dire jamais sur un telephone. -> essentiel. · `/planning` : le trait pointille de `.pl-pill-ponctuel` survit deja, mais la LIGNE DE LEGENDE qui le nomme part avec le glyphe. Eteint, l'ecran montrait une forme que rien ne nommait. -> essentiel. · `/personnel//patterns` : « trame inactive » et « pas encore en vigueur » etaient des glyphes SEULS, sans un mot a cote. -> essentiel, ET ils recoivent leur libelle en toutes lettres (demande de Brice du 22.09) : un glyphe qu'on ne peut plus eteindre reste un glyphe qu'il faut deviner. ⛔ POURQUOI UNE CLASSE, ALORS QUE RETIRER `.pl-picto` SUFFIRAIT. Parce qu'une absence ne se relit pas. `warn-icon--orpheline`, `--expire` et `--pastille` etaient deja hors de l'interrupteur, et personne n'a vu pendant cinq jours que les deux etats de trame d'a cote, eux, y etaient restes : le tri avait ete fait une fois, a la main, et il etait reste incomplet SANS QUE RIEN NE LE DISE. Une classe nommee se grep, se compte, et se fait verifier — `scripts/verifier_pictos_essentiels.js`. ⭐ LE FILET, MEME FORME QU'EN 121 ET POUR LA MEME RAISON. Si un tour futur re-emballe un porteur d'information dans `.pl-picto`, il reste visible au lieu de disparaitre en silence. ⚠️ Regle SEPAREE, jamais `:not(:has(...))` greffe sur la regle du Point 3 : sur un navigateur sans `:has()`, une regle greffee serait jetee AVEC le masquage et rallumerait TOUS les pictogrammes du produit. ⚠️ AUCUNE TAILLE NI AUCUNE COULEUR ICI, ET C'EST VOULU — l'inverse de `.ai-signal`. Un signal est toujours une icone d'alerte de taille comparable ; un porteur d'information vit dans des hotes qui dictent deja la sienne (`.ab-pill .ab-icon` en `--sm`, `.pl-ponctuel-icon` en `--sm`, la legende en taille de texte). Une taille posee ici gagnerait sur la moitie d'entre eux et casserait leur densite — exactement la faute que Brice a trouvee le 16.09 sur l'item 113. */ body.pl-hide-pictos .pl-picto:has(.ai-essentiel) { display:inline; } /* --- 2. BASE ------------------------------------------------------------ */ *,*::before,*::after { box-sizing: border-box; } body { margin:0; font-family:var(--ai-font); font-size:var(--ai-fs-body); color:var(--ai-ink); background:var(--ai-bg); } h1,h2,h3 { font-weight:600; letter-spacing:var(--ai-track-tight); color:var(--ai-ink); margin:0; } h1 { font-size:var(--ai-fs-h1); } h2 { font-size:var(--ai-fs-h2); } h3 { font-size:var(--ai-fs-h3); } a { color:var(--ai-accent); text-decoration:none; } a:hover { color:var(--ai-accent-2); text-decoration:underline; } table { border-collapse:collapse; } .ai-num,.ai-time { font-family:var(--ai-mono); font-variant-numeric:tabular-nums; } .ai-eyebrow { font-family:var(--ai-mono); font-size:var(--ai-fs-eyebrow); letter-spacing:var(--ai-track-eyebrow); text-transform:uppercase; color:var(--ai-faint); } /* LOT I point 2 : defauts globaux "libelle" et "texte d'aide" - une case a cocher ou un input sans classe locale doit deja tomber juste, sans que chaque template ait besoin de re-poser une taille. Une regle plus specifique (composant local) continue de gagner via la cascade normale. */ label { font-size:var(--ai-fs-table); } small { font-size:var(--ai-fs-meta); } /* --- 3. SIGNATURE GÉOMÉTRIQUE ------------------------------------------- */ .ai-cut { clip-path: polygon(0 0, calc(100% - var(--ai-chamfer)) 0, 100% var(--ai-chamfer), 100% 100%, var(--ai-chamfer) 100%, 0 calc(100% - var(--ai-chamfer))); } .ai-cut-sm { --ai-chamfer:var(--ai-chamfer-sm); } .ai-cut-lg { --ai-chamfer:var(--ai-chamfer-lg); } /* --- 4. BOUTONS --------------------------------------------------------- clip-path découpe bordures ET outline : un bouton secondaire est donc un liseré chanfreiné (parent coloré) contenant un bouton chanfreiné blanc. */ /* ⛔⛔ RETOUR DE BRICE (18.09 soir) — « LE PROBLÈME EST GÉNÉRAL », ET C'EST MESURÉ, PAS SEULEMENT SOUPÇONNÉ. Pico pose `button[type=submit] { width:100% }` (élément + attribut = spécificité (0,1,1)). AUCUNE des classes de bouton ci-dessous ne porte de `width` propre — `.ai-btn` en composait déjà sans, et chaque écran qui en avait besoin posait son PROPRE `style="width:auto"` en ligne (personnel/fiche.html : le changement de contrat, l'ajout d'une absence — trois fois la même rustine avant ce correctif). Une classe seule (0,1,0) NE BAT JAMAIS (0,1,1), quel que soit l'ordre des feuilles : c'est pour ça que `.ai-btn-ghost--icon` (qui pose pourtant SON PROPRE `width:34px`) perdait aussi contre Pico sur un `