/* ===================================================================== Tokens de la charte — le SEUL fichier à éditer pour changer l'habillage. Les valeurs livrées reprennent la charte fournie par le premier client, avec les écarts de contraste justifiés plus bas. Ce sont des VALEURS PAR DÉFAUT : elles n'engagent rien, et un autre client les remplace ici sans toucher à un gabarit ni à une ligne de PHP. Le nom, le logo et les libellés de rôles se règlent dans config/packages/socle.yaml. RÈGLE DE LECTURE — un token nomme un RÔLE, pas une couleur physique. Deux familles s'y opposent, et les confondre casse le lot sombre : - les tokens ANCRÉS gardent la même valeur dans les deux lots, parce que la surface sur laquelle ils se posent ne change pas non plus. L'aplat de marque garde sa teinte en sombre : ce qui s'écrit dessus reste donc sombre. Les inverser produisait du blanc sur l'aplat à 2,07:1. - les tokens BASCULÉS suivent le thème, parce que leur fond, lui, bascule. Chaque valeur porte son ratio mesuré CONTRE LE FOND OÙ ELLE SERT, pas contre le blanc par principe. ===================================================================== */ :root{ /* `light dark` annonce au navigateur que les deux lots existent : il accorde alors ses propres couleurs — barres de défilement, champs natifs, sélecteurs de date. Sans cette ligne, un thème sombre laisse des îlots clairs que le CSS ne contrôle pas. */ color-scheme: light dark; /* ---- Marque — ANCRÉE ---------------------------------------------- --marque sert aux APLATS et aux décors ; il ne porte jamais de texte, ni ne reçoit de texte blanc : blanc sur #F6A23E ne vaut que 2,07:1. Il ne bascule pas : une marque qui change de couleur avec le thème du système n'est plus une marque. --marque-encre est sa déclinaison LISIBLE — la seule à porter du texte. Elle, bascule : c'est de l'ENCRE sur la page, jamais un fond. Mesurée : 5,32:1 sur blanc, 4,92 sur le fond d'application. La teinte d'origine (#E18A1C) plafonnait à 2,67:1 partout — le § 2.8 promet le niveau AA, et un lien illisible ne l'atteint pas. */ --marque:#F6A23E; /* L'encre du VOLET D'ACCROCHE des écrans de connexion — et elle est BLANCHE sur décision du client, prise en voyant les deux versions côte à côte. Mesuré : 1,97:1 sur l'aplat de marque, sous le seuil AA (3:1 grands textes, 4,5:1 courants) que le reste du socle tient. Le volet est décoratif (`aria-hidden`) et son contenu n'est répété nulle part ailleurs — c'est un choix de marque assumé, pas un oubli : pour revenir au contraste mesuré, remettre ici la valeur de --sur-marque-fort. Ne bascule pas en sombre : l'aplat ne bascule pas. */ --accroche-encre:#FFFFFF; --marque-encre:#9C5C0A; /* Encre posée SUR l'aplat de marque. ANCRÉE, puisque l'aplat l'est. 7,32:1 et 5,34:1 sur --marque, dans les deux lots. */ --sur-marque-fort:#262626; --sur-marque:#3C3C3C; /* Encre CLAIRE sur l'aplat de marque — jamais pour ce qui doit se LIRE : blanc sur #F6A23E ne vaut que 2,07:1. La coche d'un droit ouvert (le user, 2026-09-30), dont le cercle d'encre de marque porte la forme. ANCRÉE, puisque l'aplat l'est. */ --sur-marque-clair:#FFFFFF; /* ---- Navigation — ANCRÉE ------------------------------------------ La barre latérale est sombre dans les DEUX lots : c'est une surface de repère, pas une surface de lecture, et la voir changer d'un thème à l'autre déplacerait le point fixe de l'écran. --nav vaut la même valeur que --sur-marque aujourd'hui, et c'est une COÏNCIDENCE, pas une équivalence : l'un est un fond, l'autre est de l'encre. Les fondre en un seul token ferait qu'éclaircir le menu éclaircirait aussi le texte posé sur l'aplat de marque, sans rapport. Encres posées dessus : 11,03:1 et 6,83:1, dans les deux lots. --sur-nav-doux porte le texte au repos ; le blanc franc est réservé au survol et à l'élément courant, ce qui donne au menu sa hiérarchie sans jouer sur la taille. La charte fournie employait #8C8882 pour les titres de section : 3,13:1, sous le seuil de 4,5 exigé d'un texte. */ --nav:#3C3C3C; --sur-nav:#FFFFFF; --sur-nav-doux:#CFCBC6; /* Fond de survol dans le menu. Blanc dessus vaut 8,86:1, l'encre douce 5,49:1. */ --nav-survol:#4A4A4A; /* ---- Action principale — BASCULÉE --------------------------------- Le bouton plein est le seul endroit où une couleur de marque sert de FOND. Il lui faut donc sa propre paire, distincte de --marque-encre : en sombre, l'encre s'éclaircit alors que ce fond doit s'assombrir — une seule valeur ne peut pas faire les deux. Repos : 11,03:1 en clair, 7,32:1 en sombre. Survol : 5,32:1 en clair, 7,04:1 en sombre. La limite du bouton contre la page tient aussi le 3:1 du SC 1.4.11 : 10,21:1 en clair, 8,33:1 en sombre. */ --action:#3C3C3C; --action-survol:#9C5C0A; --sur-action:#FFFFFF; /* ---- Surfaces et texte — BASCULÉES -------------------------------- */ --texte:#5D5D5D; /* 6,09:1 sur --bg, 6,58:1 sur --surface */ --texte-fort:#3C3C3C; --bg:#F7F6F3; --surface:#FFFFFF; /* `--bg` faisait CINQ métiers : fond de page, fond de champ, fond de pastille neutre, fond d'en-tête de colonne, et survol de ligne. Conséquence directe et visible : survoler une ligne la repeignait exactement de la couleur de la bande d'en-tête — et de la pastille de rôle posée dedans. Le survol ne se lisait pas comme un survol, il se lisait comme « cette ligne est devenue un en-tête ». La base fournie donne quatre valeurs distinctes à ces cinq surfaces ; en voici trois. `--bg` garde alors la page, les champs de saisie, et les cases de codes de secours (`auth.css`) — un SIXIÈME usage que mon décompte initial avait manqué, et que le relecteur externe a relevé. Réserve honnête sur l'en-tête et le survol : deux aplats presque blancs ne peuvent pas s'écarter de plus de 1,02:1 en luminance, et la base fournie est au même écart. Ce qui les distingue est la TEINTE — l'un tire au gris, l'autre au pêche. Le seuil de 3:1 du SC 1.4.11 ne s'applique pas ici : il vise l'identification d'un composant, pas la séparation de deux fonds adjacents. */ --entete-bg:#FBFAF8; /* --texte dessus : 6,31:1 */ --survol:#FBF7F0; /* --texte dessus : 6,17:1 */ --neutre-bg:#EFEDEA; /* --texte-fort dessus : 9,44:1 */ /* Le filet qui marque une LIGNE SÉLECTIONNÉE, et pourquoi ce n'est pas un fond de plus. `--survol` vaut 1,07:1 contre `--surface` : c'est assez pour suivre une souris, et pas pour repérer d'un coup d'œil lesquelles des cinquante lignes sont cochées — il faudrait lire chaque case. Or aucun aplat presque blanc ne fera mieux, par la même arithmétique qui limite déjà l'en-tête et le survol à 1,02:1 d'écart. La sélection sort donc du registre des fonds : un filet à gauche, à 5,32:1, qui se voit en balayant la colonne. Il se pose en ombre INTERNE et non en bordure — une bordure de 3 px décalerait le contenu de la ligne au moment du clic, et le tableau tressauterait à chaque case cochée. La case à cocher reste l'information première (SC 1.4.1 : la couleur n'est jamais le seul véhicule) ; ce filet la redit à l'échelle du tableau. */ --selection-marque:#9C5C0A; /* 5,32:1 sur --surface — SC 1.4.11 en demande 3:1 */ /* --ligne sépare ; --bord délimite un composant CLIQUABLE. La charte n'avait que #E8E5E0 (1,26:1), invisible comme contour de bouton — SC 1.4.11 exige 3:1 pour la limite d'un composant d'interface. */ --ligne:#E8E5E0; /* 3,63:1 sur blanc ET 3,36:1 sur --bg. La valeur précédente (#968E82) tenait 3,24 sur blanc mais 2,995 sur le fond d'application — et 2,995 ne s'arrondit pas à 3. */ --bord:#8E8579; /* L'anneau de focus doit lui-même atteindre 3:1 sur ce qu'il entoure. --focus vaut pour les fonds clairs ; la barre de navigation, sombre dans les DEUX lots, le redéfinit à --marque (5,34:1 sur --nav) — voir appli.css. --halo est la version translucide employée par les champs : elle vivait en rgba() en dur, ce qui la laissait brune après un changement de charte. */ --focus:#9C5C0A; --halo:rgba(156,92,10,.22); /* Voile derrière une boîte de dialogue. Il BASCULE : sur une page déjà sombre, un voile noir ne détache plus rien — c'est la boîte qui doit être plus claire que son fond. */ --voile:rgba(38,38,38,.42); /* ---- Sémantique — BASCULÉE ---------------------------------------- Textes ramenés au-dessus de 4,5:1 sur leur propre fond. Les fonds sont inchangés : c'est le texte qui bougeait le moins visiblement. */ /* Pastille qui DISTINGUE sans alerter — le rôle le plus élevé d'une liste de comptes. Elle vaut aujourd'hui la même chose que --warn, et c'est une COÏNCIDENCE : l'une signale un état à corriger, l'autre un rang. Les fondre ferait qu'assombrir les avertissements assombrirait les rôles, sans rapport. La base fournie emploie ici #C77A14 sur #FDF0DD : 3,00:1, sous le seuil de 4,5 exigé d'un texte. On garde son fond et sa famille, on descend l'encre — 5,68:1. */ --accent:#8A5208; --accent-bg:#FDF0DD; --ok:#1E7B4D; --ok-bg:#E6F3EC; /* 4,60:1 */ --warn:#8A5208; --warn-bg:#FDF0DD; /* 5,68:1 — était 3,77 */ --err:#B3261E; --err-bg:#FBEAE9; /* 5,62:1 */ --info:#1F5C8A; --info-bg:#E7F0F7; /* 6,16:1 */ /* ---- Typographie --------------------------------------------------- La charte fournie n'avait AUCUNE échelle : vingt tailles dispersées dans les feuilles, dont des demi-pixels (12,5 / 13,5 / 11,5 / 10,5). Celle-ci les regroupe sans demi-pixel, en restant sur les valeurs réellement employées. Le corps de texte passe à 15px sur les écrans publics : 13px convient à un back-office dense, pas à un écran lu une fois, souvent sur téléphone. --fs-sm garde 13px pour le dense. */ --fs-xs:12px; --fs-sm:13px; --fs-base:15px; --fs-md:17px; --fs-lg:20px; --fs-xl:25px; /* Poppins est SERVIE PAR LE SOCLE, jamais depuis un CDN : une feuille de style distante bloque le rendu, et derrière un pare-feu qui jette les paquets en silence, c'est un écran blanc pendant l'expiration TCP. Les fichiers vivent dans public/fonts/ et leurs @font-face dans polices.css. La pile de repli reste déclarée : elle sert le temps du téléchargement, et si les fichiers venaient à manquer, la mise en page tient. */ --font:"Poppins",system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; --font-mono:"JetBrains Mono",ui-monospace,SFMono-Regular,Menlo,monospace; /* ---- Espace : grille de 4 ----------------------------------------- La charte employait 6, 7, 8, 10, 12, 13, 14, 16 sans règle. */ --e-1:4px; --e-2:8px; --e-3:12px; --e-4:16px; --e-6:24px; --e-8:32px; --e-12:48px; --radius:10px; --radius-sm:8px; /* Le rayon d'une pastille et celui d'un cercle ne suivent pas --radius : une charte anguleuse pose --radius:0 et veut garder ses avatars ronds. */ --radius-pastille:12px; --shadow:0 1px 2px rgba(60,60,60,.05),0 4px 14px rgba(60,60,60,.06); /* La même ombre, vers le HAUT : une barre posée au bas de la fenêtre se détache de ce qui défile dessous. `--shadow` ne peut pas servir — son décalage descend, et une ombre qui tombe sous un pied collant ne se voit pas. */ --ombre-haute:0 -4px 14px rgba(60,60,60,.06); /* ---- Forme — ce que « un seul fichier à éditer » ne couvrait pas ------ La règle tenait pour la COULEUR seule : hauteurs, largeurs, durées, graisses et casse vivaient en dur dans les feuilles. Un client qui posait --radius:0 gardait une pastille arrondie, et celui dont la fonte de marque n'a que deux graisses récupérait du gras SYNTHÉTIQUE aux niveaux 500 et 600 — le navigateur épaissit les contours par calcul, ce qui se voit d'autant plus qu'un back-office est dense. `HabillageTest::testAucuneLongueurEnDurHorsDuFichierDeCharte` refuse désormais toute longueur qui ne passe pas par ici. */ --h-controle:44px; /* hauteur d'un bouton, d'un champ : la cible cliquable */ --h-controle-sm:36px; /* la même, dense — voir le contexte `.coque` plus bas */ /* Bouton à ICÔNE SEULE : carré, et il ne suit PAS la densité du texte — il n'en contient pas. 36 px reste au-dessus des 24×24 du SC 2.5.8 dans les deux contextes. */ --h-icone:36px; /* Un JOUR du calendrier de « Période » : un carré cliquable, au-dessus des 24×24 du SC 2.5.8, et sept qui tiennent côte à côte dans une boîte de deux mois. */ --h-jour:36px; /* Le PICTO qui accompagne un texte — le signe d'aide d'un bloc d'explication replié : un peu plus grand que la lettre, pour se voir sans crier. */ --t-picto-texte:1.15em; /* Le gabarit des trois pièces qui se succèdent à gauche d'une ligne de dépôt — l'anneau de progression, la coche, la vignette. Une seule valeur pour les trois : c'est ce qui fait que la ligne ne bouge pas d'un pixel quand l'une remplace l'autre. Au-dessus du plancher de 24 px de SC 2.5.8, l'anneau étant un bouton. */ --h-piece:32px; --h-case:18px; /* case à cocher : la taille native est trop petite pour être visée */ /* Le sélecteur d'organisation de la barre supérieure. Borné, parce qu'il porte un CHEMIN complet — « Groupe Alpha / Compta / Paie » — et qu'un `select` non borné s'étire jusqu'à pousser le titre de l'écran hors du cadre. Le texte est tronqué par l'ellipse plutôt que la barre déformée : le chemin entier reste lisible en ouvrant la liste. */ --l-selecteur-organisation:14rem; /* L'écran de déplacement : la colonne des destinations, bornée en largeur ET en hauteur. Une liste qui pousserait l'aperçu hors de l'écran défait ce que l'écran est venu régler ; vingt-quatre emplacements tiennent en défilant dans cette hauteur. Et la pastille du signe (−, +, =) : un cercle de la taille d'une case, lisible sans dominer le chiffre. */ --l-colonne-propositions:344px; --h-liste-propositions:26rem; /* La même colonne quand les propositions sont un ARBRE : plus large, parce qu'un chemin décalé de sa profondeur ne tenait pas sur une ligne dans 344 px (« Ophtazon / Afrique / Secteur Ouest » y passait à la ligne, mesuré le 2026-09-14), et jamais bornée en hauteur. */ --l-colonne-arbre:30rem; --h-liste-cases:15rem; /* le bloc de cases filtrables : huit lignes visibles, le reste défile */ --h-liste-cartes:17.5rem; /* la même, en cartes de 52 px : cinq rangées visibles (280 px, planche 8 de la fiche) */ --h-signe:22px; /* Le tableau des droits : la colonne des modules et onglets, puis chaque colonne d'action. Les actions ont TOUTES la même largeur — la même action tombe à la même place d'un module à l'autre, et c'est ce qui permet de balayer une colonne au lieu de la chercher. « Supprimer » tient sur une ligne en 13 px dans 4.5rem, mesuré sur la planche. */ --l-colonne-onglet:11rem; --l-colonne-coche:4.5rem; /* Un tableau à colonnes FIXES (`_tableau`, `colonnes_fixes`) : la colonne qui nomme la ligne — un avatar, un nom, une adresse — et une colonne étroite — une pastille, une date, un bouton. La colonne sans largeur prend le reste ; sous la largeur minimale, le tableau défile au lieu de l'écraser. Relevé par le user le 2026-09-28 : sans elles, chaque filtre de l'annuaire redimensionnait les colonnes. */ --l-colonne-identite:18rem; --l-colonne-etroite:7.5rem; /* La LIGNE D'OPTION qui dit sa valeur (maquette A3 de « Sécurité », 2026-10-03) : la base du sujet, sous laquelle la valeur passe à la ligne, et la colonne de la valeur, fixe pour que les valeurs de deux lignes s'alignent. Le geste prend `--l-colonne-etroite`. */ --l-option-sujet:20rem; --l-option-valeur:18rem; /* …et le titre d'une ligne OUVERTE : la base sous laquelle ses choix passent dessous, plutôt que de l'écraser — à 390 px, la page défilait de 9 px de côté (mesuré, 2026-10-03). */ --l-option-titre:12rem; /* …et le sujet d'une ligne d'option posée dans une BOÎTE : à 20rem, le libellé et sa valeur ne tenaient plus côte à côte dans les 592 px utiles d'une boîte large, et chaque libellé passait au-dessus de ses noms (mesuré sur « Accès à la fiche », 2026-10-05). */ --l-option-sujet-boite:12rem; --l-colonne-signe:3.5rem; /* une colonne qui ne porte qu'un signe — le « ⋯ » des gestes d'une ligne (menu `.sans-libelle`) */ --l-tableau-colonnes-fixes:48rem; --l-colonne-intitule:222px; /* la fiche d'une personne, à neuf colonnes : 190 px de texte et 32 de marges sur sa planche (236 de texte à sept) — mesuré au navigateur */ /* « Rôles et droits » : la colonne des rôles. Un nom de rôle long — « Marketing et communication » — tient sur deux lignes, et le tableau garde sa largeur. */ --l-colonne-roles:15rem; /* …et la hauteur au-delà de laquelle cette colonne défile : la planche la borne, pour que la page ne s'allonge pas avec le catalogue — quarante rôles tiennent en défilant. */ --h-liste-roles:38.75rem; /* « Rattacher quelqu'un » : la grille des personnes du périmètre (planche D1) — une carte de personne ne descend pas sous 15rem, et la grille défile au-delà de cinq rangées ; les rôles, en cartes de 18.75rem, parce qu'un rôle dit aussi les modules qu'il touche. */ --l-personne:15rem; --h-liste-personnes:16.25rem; --l-role:18.75rem; --l-filtre-cases:13.75rem; /* 220 px : le filtre étiqueté des cases, à côté d'un titre (planche 8 de la fiche) */ --l-recherche-droit:16rem; /* « Chercher un droit », compact dans la tête du tableau des droits (2026-10-03) */ --h-picto-champ:16px; /* un pictogramme posé DANS un champ, comme la loupe de la recherche */ /* L'interrupteur : piste, bouton, et la course du bouton. Les trois vont ensemble — la course vaut la largeur de piste moins le bouton et ses deux marges. Changer la piste sans la course décale le bouton hors du rail. */ --l-interrupteur:38px; /* La puce des récapitulatifs « ce qui va se passer » — un point, pas un disque de liste. */ --l-puce:6px; /* La boîte du repère de tri (⇅ ▲ ▼) : ⇅ est plus large que ▲ de 4 px, et la colonne bougeait au tri — la boîte est figée à la largeur du plus large, en `em` pour suivre la taille de l'en-tête. */ --l-repere-tri:1.25em; --h-interrupteur:21px; --e-interrupteur:2px; /* la marge du bouton dans sa piste */ --course-interrupteur:17px; /* Rayon d'une forme en gélule : un demi de sa hauteur suffirait, mais une valeur franche survit à un changement de hauteur sans recalcul. */ --radius-gelule:999px; --h-avatar:34px; --h-avatar-petit:26px; --h-avatar-grand:56px; /* l'en-tête d'une fiche : on identifie quelqu'un, pas une ligne */ --h-barre:60px; /* la barre supérieure du back-office */ --l-menu:236px; --l-menu-reduit:70px; --duree:.18s; /* Largeurs des écrans d'authentification. Une charte qui veut un formulaire plus large ou une accroche plus courte les règle ici — c'était en dur dans auth.css. */ --l-carte-auth:400px; --l-accroche:440px; /* Le décor du volet de connexion. 760 est la taille du dessin de la base fournie (`lentille.svg`, 760×760) — plus petit, la cible flottait au milieu du volet au lieu de l'habiter. `width:100%` le borne sur les volets plus étroits. */ --l-decor:760px; --l-code-secours:210px; /* largeur minimale d'un code, pour qu'il ne se coupe jamais */ --l-surgissant:352px; /* un panneau ancré à son bouton : assez pour un champ de fichier */ /* Une carte présentée en boîte de dialogue (carte-en-boite.js). Plus large que la boîte de confirmation : elle reçoit un FORMULAIRE — des organisations et leurs rôles — pas une question à deux boutons. Bornée par l'écran dans appli.css. La variante large porte les cartes à champs en grille (« Ouvrir un compte ») : trois champs s'écrasent dans la largeur standard. */ --l-boite-formulaire:36rem; --l-boite-formulaire-large:40rem; /* La boîte d'APERÇU : large pour qu'une page A4 se lise sans zoomer, et haute de tout l'écran — `dvh` et non `vh` : sur un téléphone la barre du navigateur se rétracte, et `vh` laisserait le pied de la boîte sous le pli. */ --l-boite-visionneuse:56rem; --h-boite-pleine:min(92dvh,64rem); /* « 12 / 240 » tient sans que les flèches de la barre de pages bougent quand le numéro change. */ --l-compteur-pages:5.5rem; /* Le sélecteur de rôle d'une ligne d'organisation : borné, sinon un libellé de rôle long pousse le nom de l'organisation hors de sa ligne. */ --l-affectation-role:14rem; /* La colonne des RÉGLAGES — composant « Réglages » (maquette C4) : à qui, où, la période et la raison, à côté de ce qui en découle. 25rem = les 400 px de la maquette, assez pour le calendrier de la période et une ligne de pilules de motif. */ --l-colonne-reglages:25rem; /* La place que demande la SUITE des réglages pour tenir entière, carte comprise — composant « Réglages » : mesurée sur la plus large, la grille des droits temporaires, 824 px (sept actions à leur minimum de 65 px) plus les 50 px de la carte. En dessous, les réglages passent au-dessus d'elle plutôt que de la faire défiler de côté. */ --l-reglages-suite:55rem; /* La même, quand la suite ne montre que les droits des rôles cochés — « Ajouter un utilisateur ». À 55rem la colonne passait SOUS les réglages dès 1 300 px (mesuré à 1 400, contenu de 1 101 px) ; à 30rem, les deux tiennent côte à côte dès 904 px de contenu, 1 203 px de fenêtre avec le menu. */ --l-reglages-suite-etroite:30rem; /* Largeur minimale d'un champ dans une grille de formulaire : en dessous, une adresse électronique ne se relit plus. C'est la largeur DISPONIBLE qui décide du nombre de colonnes, jamais un point de rupture. */ --l-champ-grille:12rem; /* Un champ COURT : un nombre ou un code de quelques caractères — un délai en jours. À la largeur d'une saisie ordinaire, deux chiffres flottaient dans un cadre de 200 px. */ --l-champ-court:8rem; /* La colonne « nom + rôle » du bandeau d'identité passe l'outil de photo À LA LIGNE en dessous de cette largeur, plutôt que de se laisser écraser contre lui. C'est un seuil de repli, pas une largeur de rendu : au-dessus, la colonne prend toute la place disponible. */ --l-identite:12rem; /* Longueur de ligne confortable, en CARACTÈRES et non en pixels : la mesure suit la police, et une charte à fonte étroite gagne des caractères sans qu'on y touche. 45 à 75 est la fourchette lisible ; en dessous l'œil saute trop souvent à la ligne. C'est la mesure des textes COURTS posés dans un cadre étroit — une boîte, un état vide, un champ : 44ch rend une cinquantaine de caractères (mesuré à 13 px). Une page de documentation a la sienne, `--l-lecture`, juste en dessous. */ --l-mesure:44ch; /* La colonne d'une page de DOCUMENTATION (la vitrine des composants) : texte, code, tableaux et aperçus y partagent le même bord droit. La vitrine a d'abord borné ses textes à `--l-mesure` dans une colonne sans limite, et le user l'a vu comme « une colonne invisible » : 359 px de texte sous 581 px de code à 1440, bien pire sur un écran plus large. En `rem` et non en `ch` : la colonne mêle trois tailles de police, et une largeur en caractères y changerait d'un élément à l'autre — le décalage même qu'on corrige. 38rem, c'est la largeur que la colonne avait déjà sur un écran de 1440 : rien n'y bouge, et un écran plus large centre la page au lieu de l'étirer. */ --l-lecture:38rem; /* Largeur minimale d'une donnée dans une fiche. Les paires s'écoulent en autant de colonnes que la place en permet : c'est la LARGEUR DISPONIBLE qui décide, jamais un point de rupture posé sur la fenêtre. Le menu se replie et le contenu gagne 166 px d'un coup, sans que la fenêtre bouge — aucune media query ne voit ça. Mesuré : deux colonnes à partir de 802 px de contenu, trois à partir de 1170. Remplace `--l-etiquette-fiche`, qui dimensionnait une gouttière d'étiquettes sur la PIRE d'entre elles (« Vérification en deux étapes ») et la gaspillait sur toutes les autres : elle laissait 836 px de large à une adresse qui en occupe 130. */ /* LA GOUTTIÈRE DU CONTENU — le retrait entre le bord de la zone principale et ce qu'on y lit. Elle est un TOKEN parce que deux règles doivent la lire ensemble : `.contenu` la pose en `padding`, et le pied COLLANT la reprend en `margin` négatif pour aller toucher les deux bords. Deux valeurs écrites séparément divergent au premier changement de maquette, et le pied se retrouve en retrait de huit pixels sans que personne ne sache pourquoi. */ --gouttiere-contenu:var(--e-6); --l-donnee:22rem; /* Un tableau BORNÉ en hauteur — `.entete-figee` : l'en-tête de colonnes reste visible pendant que les lignes défilent dans leur zone, jamais la page entière. En pourcentage de la fenêtre : une charte qui veut plus de lignes visibles règle ici, pas dans appli.css. Ce commentaire a d'abord promis un `scroll-padding` de la hauteur d'un contrôle contre le focus posé sous l'en-tête (SC 2.4.11). La règle qui le portait (`.borne`) est partie le 2026-09-05 faute d'écran, et la promesse ne tenait pas : `scroll-padding` n'agit que quand le navigateur défile, et il ne défile pas vers une cible qu'il croit déjà visible — mesuré sur le pied collant. C'est le décrochage au focus clavier (appli.css, « Tableau figé ») qui garde ce que le clavier atteint. LES 3/4 DE L'ÉCRAN, jamais plus que la zone qui défile sous les onglets (`100cqh` : le contenu de la page est un conteneur quand une liste la remplit — appli.css). Le user, 2026-10-06 : avant que l'en-tête ne colle, le tableau doit prendre au moins les 3/4 de la hauteur. Il valait 60vh. Une liste en pleine hauteur ne descend pas sous cette valeur ; un tableau ordinaire ne monte pas au-dessus. */ --h-liste:min(75dvh,100cqh); /* Sur un TÉLÉPHONE (sous 40rem de large, appli.css) : TOUTE la zone qui défile. On fait défiler la page jusqu'à ce que l'en-tête du tableau arrive en haut — sous les onglets, qui restent à l'écran —, puis le tableau défile sur la hauteur de l'écran (le user, 2026-10-06, capture d'un iPhone XS à l'appui). Plus court, l'en-tête n'arrivait jamais en haut : à 70 % de l'écran, il s'arrêtait à mi-hauteur. */ --h-liste-telephone:100cqh; /* Le PLANCHER d'un tableau à en-tête collant (`max-height` de `.entete-figee`) : jamais moins que ses en-têtes et cinq lignes (63 px chacune sur l'annuaire, l'en-tête 73), même quand les 3/4 d'une fenêtre très basse en donneraient moins. Son histoire, parce qu'elle explique le chiffre. Il a été le MINIMUM d'une liste en pleine hauteur : six lignes (22.5rem), puis deux (12rem) le 2026-09-30 pour qu'elle remplisse la fenêtre d'un portable sous le bandeau d'une fiche. À deux lignes, une fenêtre basse rendait la liste inutilisable — 192 px pour 45 lignes, mesuré à 560 px de haut devant le client le 2026-10-05, « on ne peut pas scroller ». Remonté à cinq le lendemain, puis remplacé dans ce rôle par `--h-liste` : une liste en pleine hauteur tient désormais les 3/4 de l'écran, toute la zone qui défile sur un téléphone. */ --h-liste-min:24rem; /* La hauteur d'un `.cadre-pleine-hauteur` : la fenêtre de démonstration où la vitrine montre une liste en pleine hauteur sans réorganiser sa propre page. */ --h-cadre-liste:37.5rem; /* La DENSITÉ d'une liste : la même liste, plus serrée, activée par `densite=dense` dans l'adresse. Deux tokens basculent — la taille du texte dense et la hauteur des contrôles — et rien d'autre : ce n'est pas une seconde feuille, c'est le même tableau resserré. */ --fs-dense:12px; --h-controle-dense:28px; /* Graisses. Une fonte à deux graisses seulement les replie sur 400 et 700, en un fichier, plutôt que de laisser le navigateur en inventer deux. */ --gras-etiquette:600; --gras-titre:700; /* Le menu au repos : plus léger que les étiquettes, pour que l'élément courant se détache sans jouer sur la taille. Une fonte à deux graisses le replie sur 400. */ --gras-menu:500; /* Casse et interlettrage des ÉTIQUETTES — en-têtes de colonne, titres de section du menu. Une charte qui refuse les capitales pose `none` ici. Elles ne s'appliquent JAMAIS à un libellé de bouton ou de lien : certains lecteurs d'écran restituent un texte capitalisé par CSS comme un sigle, et ce texte-là est un nom accessible. Sur un en-tête de colonne, c'est du contenu — le symptôme ne s'y produit pas. */ --casse-etiquette:uppercase; --interlettrage-etiquette:.07em; } /* ===================================================================== Contexte DENSE — le back-office, et lui seul. Le socle fondait deux contextes dans une seule échelle : les écrans d'authentification, lus une fois, souvent sur téléphone ; et le back-office, lu toute la journée. Résultat mesuré contre la base fournie : châssis à 15 px là où elle est à 14, données à 13 px là où elle est à 13,5 — le socle était plus GROS dans le cadre et plus PETIT dans le contenu, exactement l'inverse du rythme d'un outil dense. En chaîne : bouton 44 px contre 38, champ 47 contre 44, ligne de tableau 69 contre 63. Redéfinir les tokens sur `.coque` plutôt que dans `appli.css` garde toutes les valeurs dans ce fichier : c'est la promesse « un seul fichier à éditer ». Les écrans d'authentification ne portent pas `.coque` et gardent l'échelle du haut — la justification écrite plus haut reste vraie là où elle a été écrite. Aucun demi-pixel : la base fournie met ses tableaux à 13,5 px, le socle garde 13. L'écart ne se voit pas ; une échelle sans demi-pixel, si. ===================================================================== */ .coque{ /* `font-size` EST redéclarée, et c'est le point que j'avais manqué : redéfinir `--fs-base` ne change rien au texte déjà hérité. CSS transmet la valeur CALCULÉE d'une propriété héritée, pas une réévaluation du token — `body` avait calculé 15 px une fois pour toutes, et les paragraphes la gardaient pendant que les boutons, qui relisent `var(--fs-base)`, passaient à 14. C'est exactement le mélange que ce contexte est censé supprimer. */ font-size:var(--fs-base); --fs-base:14px; --fs-md:16px; --fs-lg:18px; /* le titre de la barre : 18/700 dans la base fournie */ --h-controle:38px; /* médiane des back-offices documentés : 32 à 40 */ --h-controle-sm:32px; } /* ===================================================================== Lot SOMBRE — le second des deux lots préréglés promis au § 2.8. Il suit la préférence du système. Pour l'imposer ou l'interdire, posez `data-theme="dark"` ou `data-theme="light"` sur et adaptez le sélecteur. Les sept tokens ANCRÉS y sont RÉPÉTÉS À L'IDENTIQUE, et c'est volontaire : leur fond ne bascule pas, donc eux non plus. Les répéter plutôt que les omettre garde le test de parité strict — une valeur manquante y reste une erreur, une valeur égale y est une décision écrite. ===================================================================== */ @media (prefers-color-scheme: dark){ :root{ /* --- ANCRÉS : mêmes valeurs qu'en clair, mêmes ratios ------------- */ --marque:#F6A23E; /* l'aplat de marque ne bascule pas */ --accroche-encre:#FFFFFF; /* même raison : posée sur l'aplat */ --sur-marque-fort:#262626; /* 7,32:1 sur --marque */ --sur-marque-clair:#FFFFFF; /* jamais pour ce qui doit se lire : 2,07:1 */ --sur-marque:#3C3C3C; /* 5,34:1 sur --marque */ --nav:#3C3C3C; /* la barre latérale est sombre dans les deux lots */ --sur-nav:#FFFFFF; /* 11,03:1 sur --nav */ --sur-nav-doux:#CFCBC6; /* 6,83:1 sur --nav */ --nav-survol:#4A4A4A; /* --- BASCULÉS ----------------------------------------------------- */ --marque-encre:#E8A34A; /* 7,30:1 sur --surface — encre, jamais fond */ --action:#F6A23E; /* le fond du bouton s'éclaircit quand la page s'assombrit */ --action-survol:#E8A34A; --sur-action:#262626; /* 7,32:1 au repos, 7,04:1 au survol */ --texte:#B8B3AC; /* 7,53:1 */ --texte-fort:#EDEAE5; /* 13,08:1 */ --bg:#1B1A19; --surface:#242322; --entete-bg:#282725; /* 7,16:1 pour --texte */ --survol:#2C2A28; /* 6,86:1 pour --texte */ --neutre-bg:#33312D; /* 10,82:1 pour --texte-fort */ --selection-marque:#E8A34A; /* 7,30:1 sur --surface */ --ligne:#38352F; /* séparateur : aucun seuil, il ne délimite aucun composant */ --bord:#7A756E; /* 3,43:1 — limite d'un composant cliquable, SC 1.4.11 */ --accent:#E8B266; --accent-bg:#33240F; /* 7,85:1 */ --ok:#6ECB99; --ok-bg:#16301F; /* 7,22:1 */ --warn:#E8B266; --warn-bg:#33240F; /* 7,85:1 */ --err:#F49A92; --err-bg:#3A1B18; /* 7,32:1 */ --info:#8CC2E8; --info-bg:#152833; /* 7,95:1 */ --focus:#E8A34A; --halo:rgba(232,163,74,.28); --voile:rgba(0,0,0,.62); --shadow:0 1px 2px rgba(0,0,0,.4),0 4px 14px rgba(0,0,0,.35); --ombre-haute:0 -4px 14px rgba(0,0,0,.35); } }