/** * LES JETONS SANS COULEUR DU SOCLE — échelles et plans. * * Partagés par /feedbacks (admin) et /review (contributeur), ils étaient * dupliqués à l’identique dans le `:root` de chaque page. * * ⚠️ CE FICHIER NE PORTE PLUS AUCUNE COULEUR (DS-2a, 2026-08-27). Il en portait * dix-huit : les quatre `--fbx-primary*`, les quatre couleurs d’état, les six * `--st-*` et les six `--st-*-plate`. **Les six `--st-*` étaient MORTES** — * `feedback-palette.css`, chargée après, les redéclarait aux valeurs de D1, et * c’est celle-là que la cascade servait ; celles d’ici dataient d’avant. Deux * déclarations d’un même jeton dans deux feuilles ne se voient pas à la * relecture : elles se voient à l’écran, ou jamais. * * **Toutes les couleurs du socle vivent désormais dans `widget/feedback-palette.css`**, * en deux couches — primitives `--tpx-*`, rôles `--fbx-*` et `--st-*` — et dans * les deux thèmes. La règle B0 de `tools/ds-check.mjs` échoue sur toute couleur * littérale écrite ici, et la règle T sur tout rôle de couleur qui ne dirait pas * ce qu’il vaut en sombre. * * Ce qui reste ici : le rythme, la typographie, les rayons et les plans — les * échelles de DS-2b, qui ne dépendent d’aucun thème. */ :root { /* PANNEAU DE MENU — au-dela de quoi il cesse de suivre son contenu. Il prend `max-content` pour que sa ligne la plus longue fixe la largeur ; sans plafond, un libelle tres long le ferait sortir de l'ecran. */ --fbx-dd-pop-max-w: 90vw; /* ═══ ÉCHELLE D'ESPACEMENT (DS-2b, 2026-08-27) ═══════════════════════════ Base 2 sous 16 px, multiples de 4 au-dessus — la grille de `feedback-vars.css` (widget), reprise ici parce qu'une convention déjà en service se relit sans table de correspondance. NOMMÉS PAR LEUR VALEUR : `--fbx-space-16` se lit, `--fbx-space-md` se cherche. ⚠️ TREIZE CRANS, ET LE SEUIL EST DE TROIS EMPLOIS AU SOCLE. `1px` (2 emplois), `40px` (1) et `80px` (1) sont sur la grille et n'y sont PAS : un jeton déclaré pour un seul emploi est un jeton qu'on cherchera ailleurs sans le trouver. Ils restent littéraux, et la règle S les compte. ⚠️ CE SEUIL NE VAUT QUE POUR LES GAMMES NOMMÉES PAR LEUR VALEUR — celle-ci et les rayons. Les gammes nommées par leur RÔLE (tailles, graisses, interlignes) ne le subissent pas : un trou au milieu d'une gamme nommée coûte plus qu'un cran rare, parce qu'il ne se lit pas. ⚠️ NI ZÉRO NI NÉGATIF. `0` s'écrit `0` ; un décalage négatif n'est pas un cran de rythme mais un recalage — il reste littéral, ET IL EST COMPTÉ. Un recalage qui ne compte pas disparaît de la vue, et c'est justement ce qu'un lot de normalisation doit voir pour trancher. */ --fbx-space-2: 2px; --fbx-space-3: 3px; --fbx-space-4: 4px; --fbx-space-6: 6px; --fbx-space-8: 8px; --fbx-space-10: 10px; --fbx-space-12: 12px; --fbx-space-14: 14px; --fbx-space-16: 16px; --fbx-space-20: 20px; /* LA MESURE D'UNE COLONNE DE SAISIE — un jeton de DIMENSION, nomme par son role, pas un cran d'echelle (cf. la regle du bareme). 760px ≈ 90 caracteres : au-dela, un champ de texte devient penible a relire, et un formulaire etale sur 1400px n'a plus d'axe. ⚠️ IL ETAIT ECRIT DEUX FOIS EN LITTERAL le 2026-08-28 — dans `.fbx-card--form` et dans la grille de page qui devait s'aligner dessus. Deux mesures de la meme chose finissent par diverger. */ --fbx-form-w: 760px; --fbx-space-24: 24px; --fbx-space-28: 28px; --fbx-space-32: 32px; /* ═══ ÉCHELLE TYPOGRAPHIQUE (DS-2b) ══════════════════════════════════════ Sept tailles. Les six premières sont celles du widget, AUX MÊMES VALEURS ; `xl` est la dérogation — le socle a des titres, un widget n'en a pas. ⚠️ LE SOCLE N'A PAS DE 9 px : `--fbx-font-3xs` n'existe donc pas. ⚠️ LES TAILLES DE TITRE (19 à 32 px : six valeurs pour huit emplois) ET LES CINQ DEMI-PIXELS (`10.5` `11.5` `12.5` `13.5` `15`, quinze emplois) NE SONT PAS AU BARÈME, ET C'EST VOLONTAIRE : une échelle qui reprend chaque littéral n'est pas une échelle, et un demi-pixel est la trace d'un réglage fait à l'œil — il se solde à l'œil, avec un navigateur. */ --fbx-font-2xs: 10px; --fbx-font-xs: 11px; --fbx-font-sm: 12px; --fbx-font-base: 13px; --fbx-font-md: 14px; --fbx-font-lg: 16px; --fbx-font-xl: 18px; /* Graisses — quatre valeurs relevées, quatre crans : couverture ENTIÈRE, la seule famille du relevé dans ce cas. `bold` est la dérogation : le widget s'arrête à `semibold`. */ --fbx-weight-normal: 400; --fbx-weight-medium: 500; --fbx-weight-semibold: 600; --fbx-weight-bold: 700; /* Interlignes — SANS UNITÉ (un interligne se multiplie par sa taille). ⚠️ CETTE ÉCHELLE NE COUVRE QUE 14 DES 27 INTERLIGNES DU SOCLE, et le dire vaut mieux que la gonfler : onze valeurs se pressent entre 1 et 1,6 sans qu'aucune domine, ce qui signifie qu'il n'y a pas une échelle mais onze décisions ponctuelles. Le reste est de la dette, à regarder à l'écran. ⚠️ `tight` VAUT 1.3 ICI ET 1.25 DANS LE WIDGET : les valeurs du socle sont celles du socle — ce sont deux univers (règles P et Q). */ --fbx-leading-none: 1; --fbx-leading-tight: 1.3; --fbx-leading-snug: 1.4; --fbx-leading-normal: 1.5; /* ═══ RAYONS — trois crans NEUFS (DS-2b) ═════════════════════════════════ L'échelle nommée existait déjà et vit dans `feedback-admin.css` (`--fbx-radius-sm` 6px, `--fbx-radius` 8px, `-lg` 10px, `-xl` 16px). Ces trois-là lui manquaient, et ils sont ce que le socle emploie le plus. ⚠️ PAS DE CRAN POUR `7px` NI `12px`, bien qu'ils atteignent trois emplois : l'échelle `xs / sm / — / lg / xl` est nommée et lisible, y insérer deux valeurs intercalaires obligerait à la renommer entière pour six emplois. */ --fbx-radius-xs: 4px; /* le widget nomme 4px `sm`, mais `sm` vaut déjà 6px ici : le nom suit l'échelle du socle */ --fbx-radius-full: 50%; /* 28 emplois — de loin le rayon le plus employé */ --fbx-radius-pill: 999px; /* 999, la valeur EN SERVICE : le widget écrit 9999, mais au-delà du demi-côté le rendu est le même et l'on migre à sortie constante */ /* ═══ PLANS (DS-2b) ══════════════════════════════════════════════════════ NEUF couches pour SEPT valeurs, et c'est délibéré : UN NOM PAR RÔLE, MÊME À VALEUR ÉGALE. `--fbx-z-modal` et `--fbx-z-toast` valent 2000 aujourd'hui, `--fbx-z-dropdown` et `--fbx-z-lightbox` valent 9999 aujourd'hui — les fondre sous un nom unique cacherait exactement la question qu'un lot avec navigateur doit poser : un toast doit-il passer devant une modale ? une visionneuse devant une liste déroulante ? Deux rôles sous un seul nom rendent la question inposable. ⚠️ `login` ET NON `overlay` : « overlay » désignerait aussi bien le fond de modale, qui est un AUTRE plan. ⚠️ LES QUATRE PETITS CRANS DU SOCLE (1, 1, 1 et 2) NE SONT PAS DES PLANS : un glyphe posé sur son champ et le bouton de repli du rail vivent dans leur propre contexte d'empilement et ne se comparent à rien. Ils restent littéraux — c'est le cliquet O qui les tient, pas un jeton. */ --fbx-z-sticky: 30; /* bandeau collant des boards */ --fbx-z-flottant: 35; /* bouton flottant et barre de lot du téléphone, sous la navigation */ --fbx-z-sidebar: 40; /* barre de navigation fixe */ --fbx-z-bulle: 50; /* bulle d'une entrée de la barre — devant elle, sous tout voile */ --fbx-z-login: 1000; /* voile de connexion */ --fbx-z-modal: 2000; /* fond de modale */ --fbx-z-toast: 2000; /* même valeur AUJOURD'HUI, autre rôle */ --fbx-z-celebration: 2500; --fbx-z-dropdown: 9999; /* liste déroulante — devant une modale qui la contient */ --fbx-z-lightbox: 9999; /* visionneuse d'image ; même valeur, autre rôle */ /* LE CHEVRON DU BOUTON DE DROPDOWN (2026-09-20). Trois dimensions nommées par leur rôle, parce qu'elles sont lues à DEUX endroits — la boîte du pseudo-élément et la taille du masque qui la remplit — et que les voir diverger donnerait un tracé étiré sans que rien ne le signale. 10 x 6 est le tracé d'origine ; la marge droite le pose dans le rembourrage que `.fbx-select` réserve à droite. */ /* LA LARGEUR D'UN MENU DÉROULANT, posée par `enhanceSelect` sur chaque bouton (celle de son option la plus longue). En propriété et non en `min-width` en ligne (2026-09-25) : le bandeau des boards au téléphone doit la relâcher. */ --fbx-dd-min: auto; --fbx-dd-chevron-w: 10px; --fbx-dd-chevron-h: 6px; --fbx-dd-chevron-marge: 11px; /* LE TRACÉ DU CHEVRON, en un seul endroit (2026-10-02) : le menu déroulant et le bloc repliable (`.fbx-repli`) le posent en MASQUE, coloré par `background-color` — la seule façon qu'une data-URI suive le thème. */ --fbx-chevron-masque: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6' fill='none'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23000' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E"); } /* ═══════════════════════════════════════════════════════════════════════════ Contrôles de formulaire — select + checkbox custom, partagés par les boards. Les select/checkbox natifs (chevron collé, case système) juraient avec le reste de l'UI. Réutilisables sur toutes les pages qui chargent ce fichier. ═══════════════════════════════════════════════════════════════════════════ */ /* Select : chevron SVG espacé (data URI, aucune ressource externe). Utiliser background-COLOR (pas le raccourci background) pour ne pas écraser l'image. ⚠️ CETTE IMAGE NE SERT PLUS QU'AU `` : un élément remplacé ne porte aucun pseudo-élément — c'est la raison d'être de l'image de fond, qui reste pour le `