/* =========================================================================== ÉCRAN CATALOGUE — articles, familles, dépôts (.cat-*) Composants.Shared/CatalogueEcran.razor, monté par EasyPOS, EasyStock, EasySales et EasyPurchase. UNE FEUILLE POUR CET ÉCRAN, ET CHARGÉE APRÈS modele-erp.css. Les classes ci-dessous ne servent QUE lui : la puce de famille, le liseré d'écart de cache, les trois états de marge. Une classe qui servirait un deuxième écran remonterait dans le gabarit (modele-erp.css, section 11) — jamais l'inverse, sous peine qu'un écran dépende de la feuille d'un autre pour s'afficher. AUCUNE COULEUR LITTÉRALE. Tout vient des jetons d'easytech-theme.css, donc le thème sombre suit sans qu'on écrive une seconde fois ces règles. La seule couleur littérale de l'écran est celle de la FAMILLE, qui est une donnée saisie par l'utilisateur : elle arrive par un style en ligne, et sa valeur de repli est le jeton --et-inerte. =========================================================================== */ /* --------------------------------------------------------------------------- 1. BARRE D'OUTILS — les filtres métier, posés dans le talon `Actions` du composant Tableau. Ils partent au SERVEUR (le point d'entrée plafonne à mille lignes), d'où un champ validé par Entrée et non une requête par frappe. --------------------------------------------------------------------------- */ /* La recherche emprunte .tbl-recherche au gabarit de liste — même gabarit, même champ, même place. Elle a seulement besoin d'un peu plus de large : son invite nomme trois champs interrogés. */ .cat-recherche { max-width: 340px; } /* Le select se cale sur la hauteur du champ de recherche du gabarit (31 px) : deux commandes voisines de hauteurs différentes dans la même barre se lisent comme deux barres. */ .cat-select { height: 31px; max-width: 200px; padding: 0 8px; border: 1px solid var(--et-form-border); border-radius: 0; background: var(--et-surface); color: var(--et-ink); font-family: inherit; font-size: 13px; } .cat-select:focus { border-color: var(--et-form-blue); outline: none; box-shadow: 0 0 0 2px var(--et-focus); } /* --------------------------------------------------------------------------- 2. CELLULE « LIBELLÉ » — le nom, ses deux marqueurs, et l'écart de cache. --------------------------------------------------------------------------- */ .cat-libelle { min-width: 0; } /* Le favori de caisse et le code-barres sont des MARQUEURS, pas des valeurs : ils tiennent dans la ligne du libellé et ne prennent pas de colonne. */ .cat-favori { margin-left: 6px; color: var(--et-avertissement-ink); font-size: 12px; } .cat-cb { margin-left: 6px; color: var(--et-inerte); font-size: 12px; } /* L'ÉCART DE CACHE, SOUS LE LIBELLÉ ET NON DANS UNE RANGÉE À PART. Il vivait dans un second que ni le tri ni la pagination ni l'export ne savaient suivre : trié, l'avertissement se retrouvait ailleurs que sur son article. Ici il ne peut plus s'en séparer, et la rangée porte en plus le liseré .tbl-alerte du gabarit. */ .cat-ecart { margin-top: 2px; font-size: 12px; line-height: 1.4; color: var(--et-avertissement-ink); } /* --------------------------------------------------------------------------- 3. FAMILLE ET DÉPÔT — la couleur enfin utile, et le libellé qui porte un état. La couleur de famille est saisie depuis toujours et ne servait que dans l'onglet « Familles », dans une colonne à en-tête vide. Posée devant le nom — ici comme dans la liste des articles — elle donne le regroupement visuel que le tri seul ne donne pas : on voit d'un balayage où finissent les boissons. --------------------------------------------------------------------------- */ .cat-fam { display: inline-flex; align-items: center; gap: 7px; min-width: 0; } /* Le libellé d'un dépôt porte parfois la pastille « caisse » : même rangée, même espacement que la puce de famille — les deux colonnes « Libellé » de l'écran se lisent alors pareil. */ .cat-depot { display: inline-flex; align-items: center; gap: 8px; min-width: 0; flex-wrap: wrap; } .cat-fam-puce { flex: none; width: 9px; height: 9px; /* Carré, comme tout le reste de la charte : le rond aurait été le seul de l'écran, et --et-r vaut 0 depuis la bascule. */ background: var(--et-inerte); } /* --------------------------------------------------------------------------- 4. MARGE ET STOCK — un nombre QUALIFIÉ. Les utilitaires Bootstrap d'origine ne venaient d'aucun jeton, et « text-warning » sur fond blanc mesurait 2,15:1 — sous le seuil AA pour du texte courant. Les trois états reprennent les couleurs sémantiques de Fiori déjà servies par les pastilles voisines : une seule paire par état sur l'écran, au lieu de deux teintes voisines qui se disputent le même sens. --------------------------------------------------------------------------- */ .cat-marge { font-weight: 600; } .cat-marge.est-perte { color: var(--et-danger-ink); } .cat-marge.est-faible { color: var(--et-avertissement-ink); } /* La marge saine n'est PAS verte : elle est le cas normal, et teinter le normal fait trois couleurs dans une colonne où deux seulement demandent un geste. Elle garde donc l'encre courante, et seule l'anomalie ressort. */ .cat-marge.est-ok { color: var(--et-ink); font-weight: 500; } /* Une rupture est un fait d'exploitation, pas une erreur de saisie : elle est rouge parce qu'elle bloque une vente, au même titre qu'une marge négative. */ .cat-rupture { color: var(--et-danger-ink); font-weight: 600; } /* --------------------------------------------------------------------------- 5. PALIERS — docs/conventions-responsive.md. Recette à 390 / 768 / 1280 / 1600 px, paliers pris dans l'échelle retenue. Rien à 1024 px : la barre d'outils s'enroule d'elle-même (flex-wrap du gabarit) et le tableau défile dans .tbl-defile. --------------------------------------------------------------------------- */ /* Sous 720 px, les deux filtres et la recherche tiennent la largeur plutôt que de laisser trois moignons côte à côte sur trois lignes. */ @media (max-width: 720px) { .cat-recherche { max-width: none; flex-basis: 100%; } .cat-select { max-width: none; flex: 1 1 140px; } } /* RÈGLE TACTILE (lot 02, docs/cibles-tactiles.md) : sous 1024 px, aucune cible interactive ne descend sous 44 px, et une cible ne rétrécit jamais. Le champ de recherche du gabarit est déjà repris par lot02 ; les deux selects sont propres à cet écran, donc à sa charge. */ @media (max-width: 1024px) { .cat-select { height: 44px; } } /* --------------------------------------------------------------------------- 6. LES MODALES (lot 3) — quatre boîtes portées sur la grille dense. Rien ici ne redéfinit le gabarit : .mx-modale-*, .mx-champ, .mx-check et .mx-irreversible viennent de modele-erp.css. Ne restent que trois formes de champ que la grille ne connaît pas — un nombre suivi de son unité, un compte comptable, un sélecteur de couleur. --------------------------------------------------------------------------- */ /* NOMBRE + UNITÉ. Le motif remplace l'`input-group` de Bootstrap, dont le « addon » est un bloc bordé collé au champ : à angles droits et sans arrondi à recoller, deux boîtes accolées se lisent comme un seul champ coupé en deux. L'unité redevient ce qu'elle est — une note posée à côté, pas un contrôle. */ .cat-avec-unite { display: flex; align-items: center; gap: 8px; } .cat-unite { font-size: 13px; color: var(--et-muted); white-space: nowrap; } /* UN COMPTE EST UN NUMÉRO, donc en chasse fixe — même règle que les matricules et les montants. Largeur calée sur les huit chiffres du plan SYSCOHADA. */ .cat-compte { max-width: 170px; font-family: var(--et-font-mono); font-variant-numeric: tabular-nums; } /* SÉLECTEUR DE COULEUR. `type=color` se rend avec une marge interne propre au navigateur ; sans ce resserrement, l'aplat n'occupe que la moitié du champ de 40 px de la modale et flotte au milieu d'un cadre blanc. */ .cat-couleur { width: 72px; padding: 3px; cursor: pointer; } /* ÉTAT VIDE DE LA MODALE DE STOCK. La table, elle, vit dans .tbl-cadre / .tbl-defile du gabarit et n'a rien à recevoir ici ; seul son absence demande une mise en page, et l'état vide du composant Tableau ne sert pas une table écrite à la main. */ .cat-stock-vide { padding: 28px 14px; text-align: center; font-size: 13px; color: var(--et-muted); } .cat-stock-vide .bi { font-size: 22px; color: var(--et-inerte); } /* Sous 720 px, le gabarit replie lui-même la colonne de libellés au-dessus de la valeur (modele-erp.css, section 9). Les champs à unité, eux, sont propres à cet écran : à 560 px ils s'enroulent plutôt que de comprimer le nombre. */ @media (max-width: 560px) { .cat-avec-unite { flex-wrap: wrap; } } /* --------------------------------------------------------------------------- 7. LA MODALE ARTICLE — UN DOSSIER À ONGLETS, NON UN ROULEAU. La modale d'article portait sept groupes et vingt-huit champs : près de 1 900 px dans une boîte qui, elle, ne défile pas. C'est le VOILE qui défilait, en emportant l'en-tête et le pied hors de vue — le bouton « Enregistrer » n'était donc jamais là où l'on venait de taper. Elle reprend le rail d'onglets groupés du gabarit (.mx-fiche / .mx-rail), celui de la fiche salarié : les panneaux se superposent, la hauteur est constante, et l'en-tête comme le pied restent à l'écran. RIEN ICI NE REDÉFINIT LE GABARIT. Le rail, les panneaux, la grille dense, la bande de faits saillants et — depuis .mx-modale-fiche — la mise en boîte du rail dans une modale viennent tous de modele-erp.css. Ne reste que la LARGEUR (une colonne de rail en plus de la colonne de saisie ne tient pas dans 660 px) et la teinte du refus au pied. LA HAUTEUR ET LES GOUTTIÈRES ÉTAIENT ICI, ELLES N'Y SONT PLUS. Cette modale avait devancé le gabarit et bricolait un `padding: 0` sur son corps, avec six règles pour rattraper ce que le bricolage cassait — dont un `.cat-art-fiche` que RailOnglets, qui ne prend pas de classe, n'a jamais reçu. .mx-modale-fiche fait tout cela, et mieux : la boîte est bornée à la hauteur de l'écran et ce sont les panneaux qui défilent. --------------------------------------------------------------------------- */ /* LA LARGEUR EST CELLE DU CRAN TRÈS LARGE (2026-09-10) — .est-tres-large, posée dans la page. Le raisonnement qui donnait 1000 px reste vrai et c'est lui qui choisit le cran : le rail prend 208 px, la colonne de libellés 158, et à 660 il ne resterait pas 300 px pour saisir un libellé de 200 caractères. */ /* La bande de faits vient JUSTE SOUS le filet de 3 px de l'en-tête : son propre filet supérieur en ferait un second, deux pixels plus bas. */ .cat-art-faits { border-top: 0; } /* La puce de famille dans la tuile : même carré que dans la liste, calé sur la ligne de texte de la valeur plutôt que sur sa boîte. */ .cat-art-faits .cat-fam-puce { display: inline-block; vertical-align: middle; margin-right: 6px; } /* Le compte d'erreurs du pied — et, depuis la même passe, le refus du serveur. Il remplace la mention sur l'héritage des comptes, qui n'est plus ce qu'on a besoin de lire à ce moment-là. Les DEUX modales à onglets s'en servent. */ .cat-art-ko { color: var(--et-danger-ink); font-weight: 600; } /* --------------------------------------------------------------------------- 8. LA MODALE FAMILLE — LA MÊME GRAMMAIRE, SUR LE MÊME ÉCRAN. L'article était devenu un dossier à onglets et la famille restait un rouleau de deux groupes. Or les deux fiches s'ouvrent depuis CET écran, souvent dans la même minute — on crée une famille pour y ranger l'article qu'on saisit —, et rien ne coûte plus cher qu'apprendre deux fois où sont les choses à un mètre d'intervalle. Elle prend donc les quatre onglets de l'article, aux mêmes clés et aux mêmes places. CE QUI A CHANGÉ DANS LE GABARIT ENTRE LES DEUX. La modale article avait devancé .mx-modale-fiche et bricolait un `padding: 0` sur le corps ; le gabarit a écrit l'affordance depuis, et les deux modales de cet écran s'en servent maintenant. Elle apporte ce que le bricolage ne savait pas faire : la boîte bornée à la hauteur de l'écran, la fiche sans bordure ni plancher de page, et les PANNEAUX qui défilent plutôt que le voile. Sept règles d'écran disparaissent avec — dont un `.cat-art-fiche` que RailOnglets, qui ne prend pas de classe, n'a jamais reçu. NE RESTE MÊME PLUS LA LARGEUR (2026-09-10) : les deux fenêtres portent désormais un CRAN de la charte, posé dans la page — .est-tres-large (1120 px) pour l'article, .est-large (880) pour la famille. L'écart entre les deux demeure, et c'est le même : le rail prend 208 px et les libellés 158, mais le plus long champ de la famille est un libellé de 120 caractères, pas les 200 de l'article ni ses trois colonnes de codes taxe. Dix champs ne demandent pas la place de vingt-huit — seulement, cela se dit maintenant en crans et non en « 860 et non 1 000 ». --------------------------------------------------------------------------- */ /* Même raison que .cat-art-faits : la bande touche le filet de 3 px de l'en-tête, son propre filet supérieur en ferait un second. */ .cat-fam-faits { border-top: 0; } /* APERÇU DE LA COULEUR, À CÔTÉ DU NUANCIER. Le sélecteur natif montre la teinte, pas ce qu'elle FAIT : la puce de la liste et du bouton de caisse, à sa taille réelle et devant le libellé qu'elle accompagnera. */ .cat-fam-couleur { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } /* --------------------------------------------------------------------------- L'ÉDITEUR D'ASSOCIATIONS TAXE (db/1397) A QUITTÉ CETTE FEUILLE. Il servait les deux modales du catalogue ; la fiche article (ART-02) le saisit désormais aussi, par le composant partagé EditeurTaxes.razor. Ses classes sont montées dans le gabarit — css/modele-erp.css §11.x, préfixe .mx-taxe-. La règle du dépôt : une classe employée par deux écrans monte dans le gabarit, jamais l'inverse, sans quoi la fiche article ne se rendrait qu'à condition que la feuille du catalogue soit chargée. Ce qui RESTE ici : les jetons de la colonne « Taxes » des deux listes, qui ne servent qu'au catalogue et n'ont donc rien à faire dans le gabarit. --------------------------------------------------------------------------- */ /* Les codes associés, dans les LISTES : lus ensemble, ils disent d'un coup d'œil quelles familles sont rattachées et lesquelles ne le sont pas. */ .cat-taxe-jetons { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; } .cat-taxe-jeton { display: inline-flex; align-items: center; gap: 4px; padding: 1px 6px; background: var(--et-neutre-bg); color: var(--et-ink); font-family: var(--et-font-mono); font-size: 12px; } /* La catégorie n'est montrée QUE si elle n'est pas « tous domaines » : la rappeler sur le cas général alourdirait la colonne sans rien apprendre. */ .cat-taxe-jeton .dom { color: var(--et-form-blue-d); font-weight: 600; } /* Un code désactivé depuis le rattachement : il se voit, il ne se cache pas. */ .cat-taxe-jeton.est-mort { color: var(--et-inerte); text-decoration: line-through; } /* --------------------------------------------------------------------------- LA VIGNETTE DE LA GRILLE — colonne d'illustration du catalogue. 32 px, soit la hauteur d'une rangée dense : la vignette s'y loge SANS pousser la ligne. C'était la condition pour que la colonne soit acceptable par défaut — une image qui fait grandir chaque rangée transforme une liste de cinquante lignes en liste de trente, et c'est la densité qu'on vient chercher dans un catalogue. La case garde sa largeur même vide, sinon les colonnes danseraient d'une page à l'autre selon le nombre d'articles illustrés. Mais elle ne dessine RIEN quand il n'y a pas d'image : pas de cadre, pas de silhouette. `contain` sur un fond neutre : une image de catalogue arrive en portrait comme en paysage, et on ne rogne pas le sujet pour remplir un carré. Aucune couleur littérale : les jetons portent le thème sombre. --------------------------------------------------------------------------- */ .cat-vignette-case { display: inline-flex; align-items: center; justify-content: center; width: 32px; height: 32px; } .cat-vignette { max-width: 32px; max-height: 32px; object-fit: contain; background: var(--et-surface-2); border: 1px solid var(--et-hairline); }