/* ─── FENÊTRE STOCK (plan entreprise) — même moule que budget ─── */ /* Fenêtre, barre, onglets, corps et message viennent du SOCLE. */ .st-titre { font-weight: var(--p-appuye); } .st-tabs:empty { display: none; } /* Un refus doit SAUTER AUX YEUX : en texte simple il passait inaperçu (22/08, Adam a cru avoir créé une commande jamais partie). */ .st-msg.err { color: var(--danger); font-weight: 600; border: 1px solid var(--danger); border-radius: var(--r-objet); padding: 8px 10px; background: color-mix(in srgb, var(--danger) 12%, transparent); } /* CE QUI A DISPARU SE DIT — mais discrètement : ce n'est ni une erreur, ni un avertissement. C'est un état de fait, énoncé une fois en bas de l'écran. Un cadre rouge ferait croire à une panne exactement là où l'on veut dire l'inverse. */ .st-acces { /* `margin` sur les DEUX axes verticaux depuis que la note se pose en tete de `#st-body` : sans marge basse elle collerait au premier bloc de la page. L'autre usage (page entierement interdite) l'affiche seule, donc la marge basse n'y gene pas. */ color: var(--muted); padding: 10px 12px; margin: 10px 0; border-left: 2px solid var(--accent); border-radius: 0 8px 8px 0; background: color-mix(in srgb, var(--accent) 7%, transparent); font-size: .95em; } /* Gabarit commun des écrans stock (maquette proto/stock-ui figée le 20/08). Tout suit le thème actif — aucune couleur en dur. */ /* Les tuiles viennent du SOCLE (deux colonnes sous 640px comprises, règle qui venait d'ici et qui sert désormais aux quatre écrans). */ .st-kpi .d { font-size: var(--t-etiquette); color: var(--muted); } .st-bloc { margin-top: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-objet); padding: 8px 10px; } .st-bloc .titre { font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 4px; } /* ⛔⛔ CE FLEX DÉBORDAIT, ET ADAM L'A VU SUR SA CAPTURE DU 16/09 À 22h14 (écran Documents) : les liens « imprimer » et « CSV » posés PAR-DESSUS la deuxième ligne du texte, le « ⤓ CSV » coupé au bord droit, et toute la page prise d'un défilement HORIZONTAL. La cause, mesurée : un flex d'UNE ligne (pas de `flex-wrap`) dont l'enfant texte garde le `min-width: auto` par défaut — *il refuse donc de descendre sous la largeur de son mot le plus long*, pousse `.x` hors du cadre, et `align-items: center` place les actions au MILIEU vertical d'un texte de trois lignes, c'est-à-dire dessus. ⚠⚠ ET LE REMÈDE ÉTAIT DÉJÀ DANS CE FICHIER, quatre jours plus tôt, sur une autre capture du même téléphone : `.bg-form` (12/09) a reçu `flex-wrap` + un plancher pour exactement ce défaut, et le commentaire qui l'accompagne dit déjà *« un correctif qui ne cherche pas ses frères en laisse un »*. **Celui-ci était le frère.** ⚠ LES DEUX PROPRIÉTÉS SONT INERTES TANT QUE LA LIGNE TIENT : le wrap n'agit qu'au débordement, et `min-width: 0` ne change rien à un texte qui n'a pas besoin de rétrécir. *Leurs deux modes d'échec tombent du bon côté* — c'est ce qui permet de les poser sur un gabarit partagé sans avoir la capture de chaque écran qui l'emploie. ⚠ Ce qui périmerait ce filet : qu'une ligne d'alerte se mette à porter un contenu si long que l'enveloppement devienne son rendu NORMAL — ce serait le signe qu'elle veut `.st-edition`, pas un réglage de plus ici. */ .st-alerte { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; padding: 5px 2px; cursor: pointer; border-radius: var(--r-fin); } .st-alerte > * { min-width: 0; } .st-alerte:hover { background: var(--panel2); } .st-alerte .pastille { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--accent); } .st-alerte .pastille.rouge { background: var(--danger); } .st-alerte .x { margin-left: auto; color: var(--muted); min-height: var(--cible-mini); min-width: var(--cible-mini); display: inline-flex; align-items: center; justify-content: center; } /* ─── UNE FICHE D'ÉDITION (16/09, après le refus d'Adam) ─────────── ⛔ RÉPARER LE FLEX N'AURAIT PAS SUFFI, ET C'EST LE FOND DU DÉFAUT : `.st-alerte` est le gabarit d'une LIGNE — une phrase, une action au bout. Une édition imprimable est une FICHE : un titre, ce qu'elle porte, et ses actions. *Le défaut n'était pas un réglage manqué, c'était un gabarit employé hors de son domaine de validité* — et un gabarit détourné ne produit aucune erreur, il produit un écran qu'on ne peut pas lire. ⛔ LES ACTIONS SONT SOUS LE TEXTE, À TOUTE LARGEUR, sans point de bascule. *Un gabarit qui change de forme à une largeur donnée se casse à cette largeur-là, et personne ne regarde jamais le produit exactement là.* ⚠ LA PORTÉE EST EN CORPS DE TEXTE, PAS EN ÉTIQUETTE : elle n'est pas une mention secondaire comme la référence sous un nom de client — c'est elle qui décide QUEL document on imprime, et deux éditions de même allure ne se distinguent que par elle une fois sur le papier. Sur 11 px elle ne se lit pas, et on imprime alors au hasard. */ /* ⚠ DEUX NOMS, UNE SEULE DÉCLARATION — et c'est la règle du dépôt, pas une économie de lignes : une édition imprimable et un document déposé sont le même OBJET d'écran (un titre, ce qu'il est, ses actions), donc ils ne peuvent pas diverger sans qu'on le décide. *Deux blocs jumeaux finissent toujours par se séparer, et c'est celui qu'on ne regarde pas qui prend du retard.* Le produit le fait déjà pour ses huit familles de boutons de navigation. ⛔ `.st-doc` est né d'un FRÈRE trouvé dans l'heure : l'onglet voisin — le même écran, à un clic de celui qu'Adam venait de valider — rendait ses trois actions en `.st-tag`, c'est-à-dire des badges de onze pixels, dans un tableau à cinq colonnes qui défilait horizontalement sur téléphone. */ #stock .st-edition, #stock .st-doc { padding: 12px 2px; border-top: 1px solid var(--line); } #stock .st-edition:first-child, #stock .st-doc:first-child { border-top: 0; padding-top: 2px; } #stock .st-edition .nom, #stock .st-doc .nom { font-size: var(--t-lu); font-weight: var(--p-appuye); } #stock .st-edition .portee, #stock .st-doc .portee { font-size: var(--t-corps); color: var(--muted); margin-top: 3px; } /* ⚠ QUATRE PORTEURS, UNE SEULE DÉCLARATION. L'accueil du 31-B pose des actes au bas d'un `.st-bloc` et de l'encart de valeur : écrire les mêmes quatre propriétés une seconde fois aurait fabriqué une famille jumelle, et *c'est celle qu'on ne regarde pas qui finit par avoir tort.* On rallonge le sélecteur, pas la feuille. */ #stock .st-edition .actes, #stock .st-doc .actes, #stock .st-bloc .actes, #stock .st-valeur .actes { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: 9px; } /* LES RATTACHEMENTS restent des badges, et c'est leur vrai métier : ils se LISENT, ils ne se visent pas au pouce. *Une cible de 44 px n'est due qu'à ce qu'on doit ATTEINDRE* — et le détachement, lui, est passé dans les actions, où il a la taille d'un bouton. */ #stock .st-doc .liens { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 5px; } .st-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 7px; margin-top: 10px; } .st-tuile { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-objet); padding: 10px 11px; cursor: pointer; text-align: left; font: inherit; color: var(--text); } .st-tuile:hover { border-color: var(--accent); } .st-tuile .ic { font-size: 18px; } .st-tuile .n { font-weight: 600; margin-top: 2px; } .st-tuile .d { font-size: var(--t-etiquette); color: var(--muted); margin-top: 1px; } /* margin sur les DEUX bords : deux barres empilées (filtres puis création) se touchaient, faute de marge haute (22/08 : « les cadres se touchent, ce n'est pas esthétique »). */ /* ─── L'EN-TÊTE D'UN ÉCRAN DU STOCK (13/09) ──────────────────────── Retour d'Adam sur le catalogue déployé : « ça n'a ni queue ni tête, brouillon ». Quatre choses : le FIL (où l'on est), le TITRE (ce qu'on regarde), le SOUS-TITRE (ce que la page montre), les ACTIONS à droite du titre — jamais flottantes au-dessus des filtres. Aucune couleur en dur : les jetons du thème, sinon un chantier THÈMES repeindrait le produit en laissant cette en-tête derrière. */ #stock .st-entete-bloc { margin: 2px 0 14px; padding-bottom: 12px; border-bottom: 1px solid var(--line2); } #stock .st-entete { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } #stock .st-entete-txt { min-width: 0; } #stock .st-fil { font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .07em; margin-bottom: 4px; } /* 19px = « titre de panneau » de l'échelle typographique. Une taille hors échelle ferait rougir test_fenetres_ui, et elle aurait raison : un titre choisi au pixel ne suit plus le reste. */ #stock .st-h1 { margin: 0; font-size: var(--t-chiffre); font-weight: var(--p-appuye); line-height: 1.25; } #stock .st-sous { margin: 8px 0 0; font-size: var(--t-note); color: var(--muted); } #stock .st-entete-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } /* Sous 520 px de PANNEAU (pas de fenêtre : le chat peut occuper la moitié de l'écran), les actions passent sous le titre et prennent toute la largeur — deux boutons serrés côte à côte à 44 px de haut se ratent au doigt. */ @container nimzou-stock (max-width: 520px) { #stock .st-entete-actions { width: 100%; } #stock .st-entete-actions > button { flex: 1; min-width: 140px; } } /* UNE BARRE DE FILTRES ÉTIQUETÉE — la variante en grille (13/09). `.st-filtres` seule reste ce qu'elle était : une rangée de contrôles nus, encore utilisée par une vingtaine d'écrans. ⚠ La grille annule `flex: 1` et `min-width: 120px` du champ : en grille ils ne servent plus à rien et le min-width empêcherait la colonne de rétrécir sous 120 px, donc de se replier. */ #stock .st-filtres.st-grille { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); align-items: end; margin: 0 0 10px; } /* ⛔ UNE SEULE HAUTEUR, SINON LES ÉTIQUETTES SE DÉCALENT (13/09, chevauchement vu par Adam sur ordinateur). Le bloc Rechercher porte un bouton à 44 px quand les selects font 34 : avec `align-items: end` les colonnes s'alignent par le BAS, donc « CATÉGORIE » tombait dix pixels plus bas que « RECHERCHER » et le champ voisin semblait chevaucher son étiquette. 44 px est la cible tactile du produit (`--cible`) : ces champs étaient de toute façon sous le minimum, et la règle les y ramène au lieu d'inventer une hauteur pour aligner. */ #stock .st-filtres.st-grille input:not([type="checkbox"]), #stock .st-filtres.st-grille select { flex: none; width: 100%; min-width: 0; height: var(--cible); } /* ═══ L'ANNUAIRE DES FOURNISSEURS (maquette validée le 20/09) ═════ DEUX COLONNES SUR PC, la fiche à droite SANS superposition — et sur téléphone la fiche REMPLACE la liste. ⚠ Le basculement se fait par une CLASSE posée par le JS (`.fiche-ouverte`), jamais par un `hidden` calculé à la largeur : *une largeur lue en JS ne suit pas une rotation d'écran, une media query si.* */ #stock .st-annuaire { display: grid; gap: 0; grid-template-columns: minmax(240px, 300px) minmax(0, 1fr); } #stock .st-four-liste { padding-right: 14px; border-right: 1px solid var(--line); } #stock .st-four-item { display: flex; align-items: flex-start; gap: 10px; width: 100%; text-align: left; padding: 12px 10px; min-height: var(--cible); background: none; border: 1px solid transparent; border-radius: var(--r-objet); color: inherit; cursor: pointer; } #stock .st-four-item:hover { border-color: var(--line2); } #stock .st-four-item[aria-current="true"] { background: var(--panel2); border-color: var(--accent); } /* LE MONOGRAMME EST UN REPÈRE, PAS UNE DONNÉE : il se dérive du nom, donc il ne ment jamais et ne demande aucune colonne. */ #stock .st-four-mono { flex: none; width: 34px; height: 34px; display: grid; place-items: center; border-radius: var(--r-fin); background: var(--panel2); color: var(--accent); font-size: var(--t-etiquette); font-weight: 600; } /* 600 et non 650 : la graisse de titre de la charte (DM Sans). */ #stock .st-four-item b { display: block; font-weight: 600; line-height: 1.4; } #stock .st-four-item span { display: block; color: var(--muted); font-size: var(--t-note); margin-top: 3px; } #stock .st-four-fiche { padding: 0 0 0 20px; min-width: 0; } /* ⛔ LES CHAMPS DE L'ANNUAIRE S'AFFICHAIENT BRUTS (Adam, 25/09 : « il manque le css ici »). L'habit des champs du stock ne vit que dans les blocs de filtres (`.st-filtres input`) ; ceux de l'annuaire — la recherche comme la fiche — n'y sont pas, donc le navigateur les dessinait à sa façon : fond blanc, bord fin. Ils prennent ici l'habit de la barre étiquetée (`.st-filtres.st-grille`), par les mêmes jetons et à la même hauteur (`--cible`). */ #stock .st-annuaire .st-champ input:not([type="checkbox"]), #stock .st-annuaire .st-champ textarea { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); padding: 0 10px; font-family: inherit; width: 100%; min-width: 0; height: var(--cible); } #stock .st-annuaire .st-champ textarea { height: auto; padding: 8px 10px; resize: vertical; } /* Habillés, les champs de la fiche collaient chacun à l'étiquette du suivant : le même écart que la barre étiquetée (`gap: 12px`). */ #stock .st-four-fiche > .st-champ { margin-bottom: 12px; } #stock .st-four-stats { display: grid; gap: 8px; margin: 14px 0 18px; grid-template-columns: repeat(3, 1fr); } #stock .st-four-stat { padding: 11px 10px; border-radius: var(--r-objet); background: var(--panel2); } #stock .st-four-stat b { display: block; font-size: var(--t-chiffre); font-weight: 600; } #stock .st-four-stat span { display: block; color: var(--muted); font-size: var(--t-note); margin-top: 4px; } /* L'APERÇU DU LOT : il MONTRE l'effet au lieu d'énoncer la règle. *Un gérant ne lit pas « arrondi au multiple supérieur » — il lit « 3 lots de 5 ».* */ #stock .st-four-lot { display: flex; align-items: center; gap: 10px; } /* Le pas-a-pas : deux carres de 44, la cible tactile d'Adam. Ils prennent `.st-nav` comme tout bouton du module, et cette regle ne fait que les CONTRAINDRE ici — elle ne redefinit aucune couleur, donc le theme continue de les porter. */ #stock .st-four-lot .st-nav { min-width: 44px; flex: none; padding: 0; } #stock .st-four-lot output { min-width: 44px; text-align: center; font-size: var(--t-chiffre); font-weight: 600; } #stock .st-four-apercu { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 14px; margin: 12px 0 0; border: 1px solid var(--line); border-radius: var(--r-objet); background: var(--panel2); } #stock .st-four-apercu b { color: var(--accent); } #stock .st-four-barre { position: sticky; bottom: 0; z-index: 2; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 0; margin-top: 18px; border-top: 1px solid var(--line); background: var(--panel); } #stock .st-four-barre .st-msg { margin-right: auto; } #stock .st-four-retour { display: none; } @media (max-width: 820px) { /* LA FICHE REMPLACE LA LISTE — c'est une vraie page, pas un panneau posé dessus. *Superposer laisserait la liste défiler derrière, et le retour arrière du téléphone fermerait l'écran entier au lieu de refermer la fiche.* */ #stock .st-annuaire { display: block; } #stock .st-four-liste { padding-right: 0; border-right: 0; } #stock .st-four-fiche { padding-left: 0; } #stock .st-annuaire:not(.fiche-ouverte) .st-four-fiche { display: none; } #stock .st-annuaire.fiche-ouverte .st-four-liste { display: none; } #stock .st-four-retour { display: inline-flex; } #stock .st-four-stats { grid-template-columns: repeat(3, 1fr); gap: 6px; } } /* LA SAISIE EN SÉRIE n'est pas un filtre : elle ÉCRIT. Ses deux filets la détachent de la recherche, exactement comme la maquette. ⚠ Le select y perd l'habillage que `.st-filtres select` lui donnait — sans les trois lignes ci-dessous il repartait au style natif du navigateur, ce qui ne lève aucune erreur et se voit seulement à l'œil. */ #stock .st-serie { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0; padding: 11px 0; border-top: 1px solid var(--line2); border-bottom: 1px solid var(--line2); } #stock .st-serie-l { font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; font-weight: var(--p-appuye); } #stock .st-serie select { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); height: 34px; padding: 0 10px; font-family: inherit; max-width: 100%; } /* LA RECHERCHE ET SON BOUTON (13/09, proposition ChatGPT #2) : Entrée ne se voit pas, et sur un clavier virtuel la touche de validation n'est pas toujours celle qu'on croit. Le bouton hérite de `.st-nav`, donc de la cible tactile du produit — rien à redéclarer ici, et il suivra si elle change. */ #stock .st-recherche { display: flex; gap: 6px; min-width: 0; } /* ⛔ LE CHAMP PORTE SON HABIT LUI-MÊME (25/09, Adam au banc, sur « Consulter une fiche » : « est-ce un problème CSS ou c'est conçu de la sorte ? »). Il ne l'avait qu'à l'intérieur d'un bloc `.st-filtres` : posé ailleurs, il s'affichait brut — fond blanc, coins carrés. Les valeurs sont celles de `.st-filtres input` ; dans une grille, la règle de la grille garde la hauteur, et la largeur revient au champ (règle ci-dessous). */ #stock .st-recherche input { flex: 1; min-width: 0; background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); height: var(--cible); padding: 0 10px; font-family: inherit; } #stock .st-recherche button { flex: none; } /* ⛔ DANS UNE GRILLE, LA LOUPE ÉTAIT POUSSÉE HORS DE SA CASE (relevé au banc le 26/09, reprise n° 22) : la règle de la grille impose `flex: none; width: 100%` au champ, qui prenait toute la case — la loupe passait sous le sélecteur voisin au PC et hors de l'écran au téléphone. Le champ d'une recherche reprend sa place flexible. */ #stock .st-filtres.st-grille .st-recherche input:not([type="checkbox"]) { flex: 1; width: auto; } /* La catégorie SOUS le nom : elle distingue la référence 13 peinte de la 13 brute — deux articles pour une seule référence, et sans elle la liste montre deux lignes qui semblent identiques. */ #stock .st-art-cat { color: var(--muted); } #stock .st-reperes { display: flex; flex-direction: column; gap: 3px; align-items: flex-start; } #stock .st-reperes-d { color: var(--muted); } /* L'AIDE DÉPLIABLE : fermée elle ne coûte qu'une ligne, donc elle ne gêne pas qui sait déjà — et elle porte ce qu'aucune colonne ne peut dire (pourquoi un stock estimé n'entre pas dans les alertes). */ #stock .st-aide { margin: 14px 0 4px; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--r-objet); background: var(--panel); } #stock .st-aide summary { cursor: pointer; min-height: var(--cible-mini); display: flex; align-items: center; font-weight: var(--p-appuye); } /* ⛔ `display: flex` RETIRE LE TRIANGLE DU NAVIGATEUR (reprise n° 22) : rien ne disait que ces cartes s'ouvrent. Un chevron dessiné, qui tourne à l'ouverture — tracé en bordures, donc il suit le thème. */ #stock .st-aide summary::before { content: ""; flex: none; width: 7px; height: 7px; margin: 0 12px 0 3px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(-45deg); } #stock .st-aide[open] > summary::before { transform: rotate(45deg); } #stock .st-aide ul { margin: 6px 0 0; padding-left: 18px; color: var(--muted); font-size: var(--t-note); } #stock .st-aide li { margin: 6px 0; } /* ⛔ LE DÉPLIABLE PORTE UNE LISTE DE DÉFINITIONS À L'ACCUEIL : chaque chiffre y a son nom ET sa portée exacte, et une puce ne dit pas lequel des deux on lit. Le `ul` reste : c'est la forme de l'écran État, et les deux vivent dans la même enveloppe. */ /* ─── LE CHOIX D'UNE OPÉRATION AU SCANNER (32-B) ────────────────── ⛔ LA CARTE ENTIÈRE EST LE BOUTON. Au doigt, viser un petit lien au bout d'une fiche est le geste qu'on rate — et ce hub est fait pour être pris en main debout, une caisse dans l'autre bras. *Une cible de 44 px posée dans une carte de 90 laisse 46 px qui ne font rien, et rien ne dit à l'utilisateur lesquels.* ⚠ `.nom` et `.portee` reprennent le vocabulaire de `.st-edition` : même rôle, même mot. Contextualisés par leur parent, ils ne se marchent pas dessus — et un troisième nom pour la même chose est une divergence qui attend. */ /* ─── UN ARTICLE SCANNÉ QUI ATTEND SA QUANTITÉ (32-C2) ──────────── ⛔ La quantité se tape (décision d'Adam du 17/09) et ça ne peut pas se faire pendant le scan : la caméra occupe l'écran entier. Ces lignes sont donc le SAS entre les deux — *un article scanné est une intention ; c'est la quantité qui en fait une ligne.* ⚠ Le champ ne rétrécit pas sous 5em : au doigt, une case de deux caractères se rate, et c'est la case qui porte tout le sens. */ #stock .st-scanne { display: flex; align-items: center; gap: var(--e-2); flex-wrap: wrap; padding: 7px 2px; border-top: 1px solid var(--line); } #stock .st-scanne:first-of-type { border-top: 0; } #stock .st-scanne .n { flex: 1 1 140px; min-width: 0; font-size: var(--t-corps); } #stock .st-scanne input { flex: 0 0 auto; width: 5.5em; min-width: 5em; text-align: right; font-variant-numeric: tabular-nums; } /* ⚠ CE QUE LA CASE PORTE DÉJÀ (32-D) — l'inventaire au scan REMPLACE un total, il ne l'additionne jamais : *une nouvelle lecture rouvre le total, elle ne s'y ajoute pas* (contrat de la fiche 32). Sans cette mention, porter écraserait en silence ce qui a été compté une heure plus tôt. ⚠ Elle est en taille d'étiquette et en gris : c'est un repère, pas une donnée — la donnée est dans la case, et elle seule part. */ #stock .st-scanne .d { flex: 0 0 auto; font-size: var(--t-etiquette); color: var(--muted); } #stock .st-choix-grille { display: grid; gap: var(--e-2); grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); margin-bottom: 14px; } /* La ligne « Pas de caméra ici » posée au-dessus (25/09) : sans cet écart, son cadre touchait les cartes. */ #stock .st-bloc + .st-choix-grille { margin-top: var(--e-2); } #stock .st-choix { display: block; width: 100%; min-width: 0; min-height: var(--cible); padding: 12px 14px; background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-objet); color: var(--text); font: inherit; text-align: left; cursor: pointer; } #stock .st-choix:hover { background: var(--panel2); } #stock .st-choix .nom { display: block; font-size: var(--t-lu); font-weight: var(--p-appuye); } #stock .st-choix .portee { display: block; font-size: var(--t-corps); color: var(--muted); margin-top: 3px; } /* LA FORME A COUPLES de `stAide` : un mot, puis ce qu'il veut dire. Elle remplace le
ecrit a la main de l'accueil — le style le suit, il ne lui survit pas en classe fantome. */ #stock .st-aide li > b { font-weight: var(--p-appuye); } #stock .st-aide-d { color: var(--muted); } /* ─── L'ACCUEIL DU STOCK (lot 31-B, maquette 31 validée) ────────── ⛔ TROIS REPÈRES PHYSIQUES, ET LA VALEUR N'EN EST PAS UN. Les quatre tuiles d'avant posaient « Entrepôt » et « Valeur (vente TTC) » côte à côte : *le voisinage faisait lire « la valeur de mon entrepôt »*, alors que le serveur cumule TOUS LES LIEUX et n'y garde que les soldes positifs. Le chiffre était juste, sa PLACE le rendait faux — et rien ne pouvait le signaler, puisqu'aucun test ne lit une mise en page. La valeur part donc en colonne, sous son propre titre et sa propre portée. ⚠ `auto-fit` plutôt qu'un nombre de colonnes : la fenêtre du stock partage la scène avec la conversation, donc la largeur qui compte est celle du PANNEAU, jamais celle de l'écran. Trois repères tiennent en ligne dès 600px de contenu, passent à deux, puis à un — sans qu'aucun point de bascule soit inventé. */ #stock .st-kpis.st-trois { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); } /* La portée sous le chiffre tient sur DEUX lignes : ce que le nombre compte, puis ce qu'il ne compte pas. La seconde est la seule chose qui empêche d'additionner deux cartes qui ne se recouvrent pas. */ #stock .st-kpi .d + .d { margin-top: 3px; } /* La grille de l'accueil : ce qu'on surveille à gauche, ce que ça vaut à droite. Une seule colonne tant que le cadre est étroit. */ #stock .st-bord { display: grid; gap: var(--e-3); align-items: start; margin-top: 12px; } #stock .st-bord > * { min-width: 0; } #stock .st-valeur { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-objet); padding: 12px; } #stock .st-valeur h3 { margin: 0 0 10px; font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .05em; } #stock .st-valeur .ligne { margin-bottom: 10px; } #stock .st-valeur .l { display: block; font-size: var(--t-note); color: var(--muted); } #stock .st-valeur .m { font-size: var(--t-chiffre); font-weight: var(--p-appuye); font-variant-numeric: tabular-nums; } #stock .st-valeur .note { margin: 0 0 10px; font-size: var(--t-note); color: var(--muted); } /* L'HEURE DIT QU'UNE LECTURE A RÉUSSI, jamais la date d'un mouvement. Le bouton relit ; il n'écrit rien. */ #stock .st-lecture { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-2); margin: 2px 0 12px; } #stock .st-lecture .q { font-size: var(--t-note); color: var(--muted); } #stock .st-champ { display: grid; gap: 5px; min-width: 0; } #stock .st-champ-l { font-size: var(--t-etiquette); color: var(--muted); font-weight: var(--p-appuye); text-transform: uppercase; letter-spacing: .04em; } /* ⛔ UN CHAMP QUI PREND TOUTE LA LARGEUR DE SA GRILLE (13/09, proposition 09, forme vue par Adam sur l'écran réel). Un nom de client est long et il commande tout le reste de la commande : le ranger dans une colonne à côté d'un select le tronque. La maquette validée lui donne sa propre ligne, les deux autres champs se partageant celle du dessous. */ #stock .st-filtres.st-grille .st-champ-large { grid-column: 1 / -1; } /* ⛔ LA DOUBLE EPAISSEUR DES LISTES DEROULANTES (Adam au banc, 21/09). On bordait le `select` — trait + rayon de 12px — sans jamais neutraliser son apparence NATIVE : le navigateur dessinait donc son propre controle, un rectangle qui ne suit pas le rayon, A L'INTERIEUR de notre boite. *Deux traits concentriques, et aucune regle fautive : c'est l'ABSENCE d'une ligne qui se voyait.* ⚠ `appearance: none` EMPORTE AUSSI LA FLECHE, donc elle se redessine ici. Deux degrades croises et pas une image : *un SVG en data-URI fige sa couleur, et ce produit a quatre themes.* `currentColor` suit le texte, donc le theme, sans qu'aucune regle s'en occupe — c'est le meme choix que les icones du rail. ⚠⚠ `background-image` SEUL, jamais le raccourci `background` : les regles voisines posent `background: var(--panel2)`, et un raccourci ici remettrait leur couleur a zero. */ #stock select { -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%); background-position: right 15px center, right 10px center; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; padding-right: 30px; } /* ⛔ UN SELECT HORS D'UNE BARRE DE FILTRES N'AVAIT QUE SA FLÈCHE (Adam au banc, 26/09, les réglages de Documents). L'habillage vit sur `.st-filtres select` et `.st-serie select` : un `select` posé par `stChamp` ailleurs gardait le fond et le texte du navigateur, une barre blanche sur un thème sombre, sans aucune erreur. C'est le défaut déjà réparé pour la saisie en série, qui revenait par un autre conteneur. Même habillage ici, en `background-color` et jamais le raccourci (il effacerait la flèche ci-dessus), avec la place de la flèche gardée à droite. */ #stock .st-champ select { background-color: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); height: 34px; padding: 0 30px 0 10px; font-family: inherit; max-width: 100%; } /* Dans un panneau, le champ est seul sur sa ligne : la grille de `.st-champ` étirait le select d'un bord à l'autre, et étirait aussi la case à cocher, que le navigateur dessine alors au MILIEU de sa largeur. */ #stock .st-bloc > .st-champ select { justify-self: start; min-width: 240px; } #stock .st-bloc > .st-champ input[type="checkbox"] { justify-self: start; } /* Le champ de saisie posé par `stChamp` dans un panneau n'avait aucun habit (Adam, 01/10, « Nouvelle foire ») : même habit que l'annuaire. */ #stock .st-bloc > .st-champ > input:not([type="checkbox"]):not([type="radio"]), #stock .st-bloc > .st-champ > textarea { background: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); padding: 0 10px; font-family: inherit; height: var(--cible); min-width: 0; max-width: 100%; justify-self: start; } #stock .st-bloc > .st-champ > input:not([type]), #stock .st-bloc > .st-champ > input[type="text"], #stock .st-bloc > .st-champ > input[type="search"] { width: min(100%, 480px); } #stock .st-bloc > .st-champ > textarea { width: 100%; height: auto; padding: 8px 10px; resize: vertical; } /* La démarque connue d'une foire (01/10) : la quantité, puis son motif, dans la cellule. Même habit que les autres champs du stock. */ #stock .st-demarque { display: flex; gap: 6px; align-items: center; justify-content: flex-end; } #stock .st-demarque input { width: 4.5em; text-align: right; } #stock .st-demarque select { background-color: var(--panel2); color: var(--text); border: 1px solid var(--line2); border-radius: var(--r-objet); height: 34px; padding: 0 26px 0 8px; font-family: inherit; } .st-filtres { display: flex; gap: 6px; flex-wrap: wrap; margin: 8px 0; } /* Un formulaire de CRÉATION n'est pas une barre de filtres : il s'encadre, pour qu'on voie qu'un panneau s'est ouvert. */ .st-panneau { border: 1px solid var(--line2); border-radius: var(--r-objet); background: var(--panel); padding: 11px 12px; margin: 10px 0; } .st-panneau > .titre { font-size: var(--t-etiquette); color: var(--muted); text-transform: uppercase; letter-spacing: .04em; margin-bottom: 8px; } .st-panneau .st-filtres { margin: 0; } /* Onglets d'un écran du stock (Documents : éditer / bibliothèque). */ .st-onglets { display: flex; gap: 6px; margin: 4px 0 10px; border-bottom: 1px solid var(--line2); } .st-onglet:hover { color: var(--text); } .st-panneau .st-actions { margin-top: 9px; } /* contrôles-pilules cliquables (case de filtre, imprimer, CSV) — plus grands et aérés que les badges st-tag (22/08 : « c'est collé ») */ .st-pilule-action { font-size: var(--t-corps); background: var(--panel2); border: 1px solid var(--line2); border-radius: 999px; padding: 7px 14px; color: var(--text); cursor: pointer; text-decoration: none; /* `font-family: inherit` (13/09) : la règle ne servait qu'à des et des