/* ========================================================================== EasyStock — feuille de style du module de stock et négoce SAP Fiori habillé EasyTech. Chargée APRÈS `modele-erp.css`, dont elle s'appuie sur les jetons --et-* et sur lequel elle ne revient jamais. POURQUOI CETTE FEUILLE EXISTE, ET POURQUOI SI TARD EasyStock était, au 2026-09-08, le seul module métier de la suite SANS feuille de module : EasyCompta en a cinq, EasyPaie et EasyConso une chacun, la caisse son jeu propre. Ses trente écrans s'habillaient donc directement en Bootstrap NU — `text-danger`, `bg-warning-subtle`, `badge bg-success-subtle` — c'est-à-dire aux couleurs de Bootstrap et non à celles de la charte. Mesuré : 371 encres d'état et 218 aplats hors charte, le plus gros écart de tout le dépôt (le module suivant, App, en compte 193 ; Achat 96). La règle de CLAUDE.md dit quand une feuille de module doit exister : « lorsque plusieurs écrans partagent les règles ». Trente écrans qui écrivent la même pastille d'état sont exactement ce cas — et trente feuilles d'écran en auraient été trente copies. CE QUE BOOTSTRAP COÛTAIT VRAIMENT, ET QUI N'EST PAS QU'UNE QUESTION DE TEINTE `.text-danger`, `.text-success`, `.text-warning` ne sont redéfinis par aucune de nos 110 feuilles : ils rendent les valeurs d'origine de Bootstrap. Contrastes mesurés (WCAG, sur les quatre fonds que ces écrans posent réellement — surface, rangée survolée, ligne sélectionnée, aplat d'état) : blanc --et-rang --et-tint aplat d'état .text-warning #ffc107 1,63 1,39 1,46 1,42 .text-danger #dc3545 4,53 3,87 4,04 3,95 .text-success #198754 4,53 3,87 4,04 3,96 --et-avertissement-ink 6,85 5,85 6,12 5,98 --et-danger-ink 7,96 6,80 7,10 6,95 --et-succes-ink 5,87 5,01 5,24 5,13 `.text-warning` à 1,63:1 sur blanc n'est pas « un peu clair » : c'est du jaune sur du blanc, illisible, et il portait vingt seuils de réapprovi- sionnement. Les deux autres passent le AA sur blanc et le perdent SOUS LE CURSEUR — un écart de stock lisible à l'arrêt, plus lisible dès qu'on survole sa ligne pour la lire. C'est le défaut que CLAUDE.md décrit mot pour mot (« a figure in a list loses AA under the cursor ») et que les rangs -ink existent pour corriger. Et `.text-danger` reste identique en thème sombre — `--bs-danger-rgb` ne bascule pas, seuls les `-emphasis` le font. Les rangs -ink, eux, ont leur valeur sombre dans easytech-theme.css. TROIS RÈGLES TENUES PARTOUT DANS LE MODULE 1. Une couleur d'état ne s'écrit JAMAIS en `color:` — c'est le rang -ink qui s'y écrit. La couleur d'état est un aplat, un filet ou une marque. 2. La pastille d'état du module est celle du gabarit, `.mx-pastille`, et non une pastille de plus : elle porte le point de 6 px qui double la teinte pour qui ne distingue pas le vert du rouge, et qui survit à l'impression en noir et blanc. Un inventaire s'imprime. 3. Aucune valeur en dur. Cette feuille ne définit pas un seul jeton de couleur : tout vient de easytech-theme.css. ========================================================================== */ /* ========================================================================== 0. Portée `.ecran-stock` est posé par StockLayout autour de @Body. Il ne sert qu'aux deux endroits où cette feuille REPREND UNE CLASSE DE BOOTSTRAP — la barre de progression (§4) et la règle des 44 px (§6). Sans portée, agrandir une case à cocher sous 1024 px agrandirait celles des vingt coquilles de la suite, et recolorer une barre d'avancement recolorerait celles de la paie. `display: contents` et non un bloc : le conteneur ne crée aucune boîte, les écrans restent enfants directs de `.et-scroll` et aucune géométrie ne bouge. Les familles `.es-*` ci-dessous ne sont, elles, PAS portées — une pastille d'état est la même dans un écran de stock et dans la fiche article ouverte depuis un écran de vente. ========================================================================== */ .ecran-stock { display: contents; } /* ========================================================================== 1. Encres d'état Le remplaçant des 371 `text-*` de Bootstrap. Deux classes plutôt qu'une — `.es-encre est-negatif` — parce que le modificateur `est-*` est le vocabulaire d'état de toute l'application (.mx-pastille, .mx-fait-val, .gen-indic-val, .pos-variation) : un chiffre négatif se nomme pareil ici et dans la fiche article. PAS DE FOND. C'est la seule famille de cette feuille qui pose une couleur sans aplat dessous, et c'est délibéré : dans une table dense, un aplat par cellule chiffrée rend la colonne illisible — la couleur cesse de signaler dès qu'elle est partout. Le rang -ink est précisément ce que la charte prévoit pour ce cas (« As ink on any light ground the three take the ink rank too »), et il tient le AA sur les quatre fonds mesurés plus haut, marge minimale 5,01:1. ========================================================================== */ .es-encre.est-positif { color: var(--et-succes-ink); } .es-encre.est-critique { color: var(--et-avertissement-ink); } .es-encre.est-negatif { color: var(--et-danger-ink); } .es-encre.est-neutre { color: var(--et-neutre); } .es-encre.est-info { color: var(--et-form-blue-encre); } /* Une encre d'état posée sur un GLYPHE suit la même règle que sur du texte. L'exemption « grand texte » ne s'applique pas : une icône Bootstrap rendue à 16 px n'atteint pas le palier des 24 px, et CLAUDE.md rappelle ce que l'exemption a coûté ailleurs — l'icône et sa propre légende dans deux verts différents. Rien à déclarer ici, `color` sur un suffit ; la ligne existe pour que la question ne se repose pas. */ /* ========================================================================== 2. Plaques — les fonds neutres Remplace `.bg-light`, 50 emplois. Bootstrap y met #f8f9fa, que easytime-shell.css doit rattraper à la main en thème sombre par une règle `!important` réservée à ce cas ; le jeton, lui, bascule seul. ========================================================================== */ .es-plaque { background: var(--et-surface-2); border: 1px solid var(--et-hairline); } /* Sans filet : quand la plaque est déjà DANS un cadre qui en porte un — le corps d'une carte, une cellule de table — le second filet double le premier à un pixel de distance et se lit comme un défaut de rendu. */ .es-plaque-nue { background: var(--et-surface-2); } /* ========================================================================== 3. Aplats d'état Remplace `bg-*-subtle` hors pastille — les encarts de rappel, les rangées signalées, les blocs de total. L'aplat porte SON encre : c'est la règle 3 d'easypaie.css, « un rouge sur blanc n'est pas un état négatif, c'est un texte rouge », et elle vaut ici mot pour mot. Le filet est celui de l'état et non `--et-hairline` : un aplat pâle sans bord se dissout sur `--et-surface-2`, qui est presque aussi clair que lui. L'ambre fait exception et prend `--et-avertissement-mark` — à 2,15:1 la teinte pure n'atteint pas le seuil graphique de 3:1, et un ambre pur est intrinsèquement clair (CLAUDE.md, révision du 2026-09-03). ========================================================================== */ /* DEUX FAMILLES ET NON UNE, parce que l'aplat se rencontre dans deux situations qui ne demandent pas la même chose : `.es-fond` NE POSE QUE LA COULEUR — le fond et l'encre qui l'accompagne, rien d'autre. C'est la bande de titre d'un bloc qui porte DÉJÀ son cadre et son rembourrage, ou une portion d'une boîte déjà dessinée. Y ajouter un filet le doublerait à un pixel du premier, et un rembourrage décalerait un contenu déjà calé. `.es-aplat` est `.es-fond` PLUS la boîte : rembourrage et filet. C'est l'encart autonome — un rappel, un avertissement posé seul dans une colonne. Écrire la seconde sur la première plutôt que de recopier cinq fois les mêmes couleurs : la teinte est décidée à un seul endroit. */ .es-fond.est-positif { background: var(--et-succes-bg); color: var(--et-succes-ink); } .es-fond.est-critique { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); } .es-fond.est-negatif { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); } .es-fond.est-info { background: var(--et-info-bg); color: var(--et-form-blue-encre); } .es-fond.est-neutre { background: var(--et-neutre-bg); color: var(--et-ink); } /* `.es-aplat` et `.es-plaque` (§2) SONT LES DEUX SEULES FAMILLES QUE LE MODULE N'EMPLOIE PAS ENCORE, et c'est dit ici plutôt que laissé à découvrir : les trente écrans portés n'avaient, à la mesure, que des fonds déjà encadrés — d'où `.es-fond` et `.es-plaque-nue` partout. Elles restent parce qu'elles sont la moitié « avec boîte » de deux paires dont l'autre moitié sert, que la table de correspondance de docs/easystock-gabarit.md dit laquelle choisir, et que le premier encart autonome écrit n'aura pas à recopier cinq couleurs pour exister. Même raison qu'easypaie.css et easycompta-vignette .css, déposées avant d'être consommées. */ .es-aplat { padding: 10px 12px; border: 1px solid transparent; } .es-aplat.est-positif { background: var(--et-succes-bg); color: var(--et-succes-ink); border-color: var(--et-succes-bord); } .es-aplat.est-critique { background: var(--et-avertissement-bg); color: var(--et-avertissement-ink); border-color: var(--et-avertissement-mark); } .es-aplat.est-negatif { background: var(--et-danger-badge-bg); color: var(--et-danger-ink); border-color: var(--et-danger-bord); } .es-aplat.est-info { background: var(--et-info-bg); color: var(--et-form-blue-encre); border-color: var(--et-info-bord); } .es-aplat.est-neutre { background: var(--et-neutre-bg); color: var(--et-ink); border-color: var(--et-hairline); } /* Une RANGÉE de table signalée — le remplaçant de `.table-danger` et de ses frères, 68 emplois. Ceux-là ne basculent pas : Bootstrap fige leurs valeurs claires (#f8d7da, #fff3cd, #d1e7dd) et ne les redéfinit pas sous [data-bs-theme=dark]. Une rangée signalée est donc, en thème sombre, un pavé rose pâle à encre noire au milieu d'une table nuit. ON ÉCRIT `--bs-table-bg` ET NON `background`, ET C'EST OBLIGATOIRE : la règle `.table > :not(caption) > * > *` de Bootstrap peint chaque CELLULE avec var(--bs-table-bg). Un fond posé sur le serait recouvert par ses propres — la déclaration existerait, elle ne se verrait pas. Nommer la variable la fait descendre par héritage jusque dans les cellules, exactement comme `.alert-danger` nomme --bs-alert-bg dans easytech-theme.css. L'ENCRE RESTE L'ENCRE NORMALE. Bootstrap force ici --bs-table-color: #000 ; nous la rendons au jeton, pas à la teinte d'état. Seule la cellule qui porte le motif du signalement prend `.es-encre` : une rangée entière en rouge dit que tout y est faux, alors que c'est une colonne qui l'est. */ .es-rangee { --bs-table-color: var(--et-ink); } .es-rangee.est-critique { --bs-table-bg: var(--et-avertissement-bg); } .es-rangee.est-negatif { --bs-table-bg: var(--et-danger-badge-bg); } .es-rangee.est-positif { --bs-table-bg: var(--et-succes-bg); } .es-rangee.est-info { --bs-table-bg: var(--et-info-bg); } /* La rangée de TOTAL — un , une ligne de sous-total — remplace `.table-light` hors en-tête. Dans un , `.table-light` est une classe morte : easytech-theme.css peint tous les en-têtes avec --et-table-head à une spécificité supérieure (easytime-shell.css:433 le mesure). Hors en-tête, rien ne la recouvre, et elle rend #f8f9fa à encre noire — la même bande blanche au bas d'une table sombre. Les emplois de `thead` sont donc laissés tels quels : les convertir n'aurait rien changé à l'écran, et aurait fait un diff pour rien. */ .es-total { --bs-table-bg: var(--et-surface-2); --bs-table-color: var(--et-ink); } /* --- Filets d'état ------------------------------------------------------- Remplace `border-danger` (28), `border-warning` (20), `border-success` (5) et `border-primary` (11) — la carte signalée, le bloc actif, le pavé de choix retenu. Comme aplat ci-dessus mais SANS fond : le filet suffit à désigner quand le contenu, lui, doit rester lisible en encre normale. LA TEINTE VIVE RESTE, ici et seulement ici : au seuil graphique de 3:1, --et-danger rend 4,83:1 sur blanc et --et-succes 3,30:1, tous deux au-dessus. L'ambre seul échoue (2,15:1) et prend son rang `-mark`, de même teinte et de même saturation, la clarté abaissée jusqu'à ce que les quatre fonds passent. `border-primary` n'était pas un état mais une SÉLECTION — « voici la carte active ». Elle prend le bleu de la charte : Bootstrap y mettait #0d6efd, à côté du #0057B8 que le même écran emploie pour ses liens. Les classes de Bootstrap qu'elles remplacent portaient `!important` ; ces règles-ci n'en ont pas besoin, rien ne les concurrence. */ .es-bord.est-positif { border-color: var(--et-succes); } .es-bord.est-critique { border-color: var(--et-avertissement-mark); } .es-bord.est-negatif { border-color: var(--et-danger); } .es-bord.est-info { border-color: var(--et-form-blue); } /* La sélection porte aussi une teinte de fond dans deux pavés de choix (Nomenclatures : « kit éclaté » / « article assemblé »). C'est --et-tint, la teinte d'information de la charte, celle qui marque déjà la ligne sélectionnée d'une liste. */ .es-choisi { background: var(--et-tint); border-color: var(--et-form-blue); } /* ========================================================================== 4. Marques Une couleur d'état qui n'est ni encre ni aplat : la barre d'accent d'un bloc, la puce d'une jauge. Elle garde la teinte VIVE — c'est le seul rôle où la charte la conserve — sauf l'ambre, qui prend son rang `-mark`. ========================================================================== */ /* LE DÉFAUT D'ABORD, LES ÉTATS ENSUITE, ET L'ORDRE EST LA RÈGLE — pas une préférence de rédaction. `.ecran-stock .progress-bar` et `.es-marque.est-*` pèsent le MÊME poids de spécificité, (0,2,0) l'un comme l'autre : à égalité, c'est la dernière déclaration lue qui l'emporte. Écrit dans l'autre sens, le défaut bleu repeignait les barres vertes qu'il est censé laisser passer. LA BARRE EN COURS ÉTAIT LE SECOND BLEU DE L'ÉCRAN. Les neuf barres du module sont écrites pareil : une teinte SEULEMENT une fois l'avancement à 100 %, et rien avant. Tant qu'une campagne, un comptage ou une tournée n'est pas fini — c'est-à-dire tout le temps où on regarde la barre — elle tombait donc sur le défaut de Bootstrap, #0d6efd, à côté du #0057B8 que le même écran emploie pour ses liens et ses boutons. Aucune de nos 110 feuilles ne reprenait `.progress` ; c'est fait ici, sous la portée du module. Sous `.ecran-stock` PARCE QUE C'EST UNE REPRISE DE BOOTSTRAP : les familles .es-* sont à nous et n'ont besoin d'aucune portée ; celle-ci redéfinit une classe qui appartient à toute l'application. */ .ecran-stock .progress { background: var(--et-surface-2); border-radius: var(--et-r-pill); } .ecran-stock .progress-bar { background-color: var(--et-form-blue); } /* L'emploi principal des marques est justement cette barre — une campagne, un comptage, une tournée : `.progress-bar bg-success` devient `.progress-bar es-marque est-positif`. */ .es-marque.est-positif { background: var(--et-succes); } .es-marque.est-critique { background: var(--et-avertissement-mark); } .es-marque.est-negatif { background: var(--et-danger); } .es-marque.est-info { background: var(--et-form-blue); } /* ========================================================================== 5. Attente LE MÊME GESTE SE RENDAIT DE DEUX COULEURS. Le module compte dix-neuf indicateurs de chargement, tous `.spinner-border`, tous au même endroit d'un écran et pour la même attente — et neuf étaient `text-primary`, dix `text-secondary`. Bleu ici, gris là, sans qu'aucune règle ne dise pourquoi : l'écart ne vient pas d'une intention mais de l'écran voisin qu'on a recopié. Le bleu n'était d'ailleurs pas le nôtre — #0d6efd contre le #0057B8 de la charte, à côté des liens du même écran. Une seule classe pour les dix-neuf. `currentColor` est le défaut de Bootstrap pour ce composant : nommer l'encre suffit. ========================================================================== */ .es-attente { color: var(--et-form-blue); } /* ========================================================================== 6. Paliers de largeur EN QUEUE DE FEUILLE, à spécificité égale des blocs qu'ils reprennent — placés plus haut ils se feraient écraser par eux. Même raison qu'à la section 17 d'easypaie.css. UN SEUL PALIER, ET C'EST CE QUE LA MESURE A DIT. Les écrans de ce module sont bâtis sur la grille de Bootstrap (`row` / `col-md-*`), déjà fluide : rien ne casse entre 1600 et 640 px. Les deux objets rigides du dépôt qui les concernent — les tables larges et les cibles tactiles — sont déjà tenus par lot03-tables-larges.css et lot02-cibles-tactiles.css. Poser 720 et 560 px pour tenir un plan aurait ajouté deux largeurs de rupture au dépôt sans rien corriger. RESTE CE QUE LE LOT 02 LAISSE HORS DE PORTÉE : il pose la règle des 44 px sur la coquille et sur le gabarit de liste `.tbl-*`, pas sur les commandes qu'un écran écrit lui-même (docs/cibles-tactiles.md). Les trente écrans d'EasyStock commandent en `.btn-sm` de Bootstrap — 31 px de haut mesurés — et un inventaire tournant se fait sur tablette, en rayon, pas au bureau. min-height et non height : « Valider le comptage du dépôt » passe à la ligne dans une barre étroite, et une hauteur fixe le couperait. Même raison qu'au lot 02. ========================================================================== */ @media (max-width: 1024px) { .ecran-stock .btn-sm, .ecran-stock .form-control-sm, .ecran-stock .form-select-sm { min-height: 44px; height: auto; padding-top: 6px; padding-bottom: 6px; } /* Une case à cocher de comptage se pointe avec le pouce. Le carré de 1em — 13 px à la taille de texte de ces écrans — est la plus petite cible de tout le module. Les trente-neuf cases du module l'emportent à 20 px, et la rangée qui les porte à 44 px. ON REMPLACE LA MÉCANIQUE DE BOOTSTRAP, ON NE LA MORD PAS. `.form-check` est un bloc à `padding-left: 1.5em` dont la case est sortie par `float: left` + `margin-left: -1.5em` : un `display: flex` posé par-dessus ANNULE le float sans annuler le retrait ni la marge négative, et la case part alors à gauche du bloc. On rend donc les trois déclarations d'un coup — retrait, flottement, marge — et l'écart est repris par `gap`. Le libellé garde sa taille de texte : c'est la CIBLE qu'on agrandit, pas l'écriture. Et la marge n'est remise à zéro que DANS un `.form-check` : le module porte aussi des cases nues, en cellule de table, où le calage vertical vient du ``. */ /* Marche tactile retiree le 2026-09-10 : lot02 la pose une fois pour toutes les cases natives du back-office, a 24 px. Voir docs/cibles-tactiles.md. */ .ecran-stock .form-check { min-height: 44px; display: flex; align-items: center; gap: 8px; padding-left: 0; } .ecran-stock .form-check > .form-check-input { float: none; margin: 0; flex: none; } .ecran-stock .form-check > .form-check-label { margin: 0; } }