/*
 * Gestion des stocks
 * Copyright (C) 2026 Franck Petit
 *
 * Ce programme est un logiciel libre : vous pouvez le redistribuer et/ou le
 * modifier selon les termes de la GNU General Public License telle que
 * publiée par la Free Software Foundation, dans sa version 3 ou, à votre choix,
 * toute version ultérieure.
 *
 * Ce programme est distribué dans l'espoir qu'il sera utile, mais SANS AUCUNE
 * GARANTIE ; sans même la garantie implicite de VALEUR MARCHANDE ou
 * d'ADÉQUATION À UN USAGE PARTICULIER. Voir la GNU General Public
 * License pour plus de détails.
 *
 * Vous devriez avoir reçu une copie de la GNU General Public License
 * avec ce programme. Si ce n'est pas le cas, voir <https://www.gnu.org/licenses/>.
 */
/* Gestion des stocks — styles spécifiques. La base vient de socle/ui/charte.css.
   Aucune couleur en dur : tout passe par les jetons du socle, sans quoi le thème
   sombre donnerait des cartes blanches sous une encre claire. */

/* ---------- Largeur de page ----------
   La charte du socle borne le contenu à 1180 px, largeur juste pour du texte
   suivi. Le magasin ne montre presque que des tableaux — articles, mouvements,
   commandes — et sur les écrans 27" du comptoir, la moitié de la dalle restait
   vide pendant que les colonnes se serraient. On élargit donc ICI, sans toucher
   à la charte : la largeur du socle vaut pour toute la suite, ce n'est pas au
   stock d'en décider pour les autres.
   Bornée en vw pour garder une gouttière, et à 1720 px pour qu'une ligne de
   tableau reste parcourable de l'œil sur une dalle très large. */
.sc-main{max-width:min(1720px,95vw)}

/* ---------- Navigation latérale ----------
   Dix entrées ne tiennent pas sur une ligne d'onglets ; sous 900 px la colonne
   repasse en barre horizontale défilante (le comptoir a un écran large, le
   magasinier en rayon a un téléphone). */
.st-layout{display:grid;grid-template-columns:200px minmax(0,1fr);gap:var(--pas);align-items:start}
.onglets{display:flex;flex-direction:column;gap:2px;position:sticky;top:14px;
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre);padding:8px;margin:0}
.onglets a{padding:.5rem .7rem;border-radius:var(--r-s);text-decoration:none;color:var(--encre-douce);
  font-size:.88rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background .12s,color .12s}
.onglets a:hover{background:var(--marque-clair);color:var(--encre);text-decoration:none}
.onglets a.actif{background:var(--marque);color:var(--marque-contraste);font-weight:600}
.onglets .role{display:block;margin-top:8px;border-top:1px solid var(--ligne);
  padding:.6rem .7rem 0;font-size:.8rem;color:var(--encre-douce);text-decoration:none}
.onglets a.role:hover{color:var(--encre)}
/* Sélecteur de magasin : présent seulement quand il y a plusieurs magasins.
   Discret par construction — c'est un repère, pas une commande du quotidien. */
.choix-magasin{margin-top:8px;border-top:1px solid var(--ligne);padding-top:.6rem}
.choix-magasin select{width:100%;font-size:.85rem;padding:.35rem .4rem;
  border:1px solid var(--ligne);border-radius:var(--r-s);
  background:var(--surface);color:var(--encre)}
@media(max-width:900px){
  .st-layout{grid-template-columns:1fr}
  .onglets{flex-direction:row;overflow-x:auto;position:static;padding:6px;gap:.25rem;
    -webkit-overflow-scrolling:touch}
  /* Sans cela, flex comprime chaque onglet jusqu'à n'en montrer qu'une lettre :
     la barre devenait « T. A. S. E. C. » et ne se lisait plus. */
  .onglets a{flex:0 0 auto;white-space:nowrap}
  .onglets .role{margin-top:0;margin-left:auto;border-top:none;padding-top:.5rem}
  .choix-magasin{margin-top:0;margin-left:auto;border-top:none;padding-top:0;align-self:center}
  .choix-magasin select{width:auto}
}

.bloc{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre);padding:var(--pas);margin-bottom:var(--pas)}
.bloc h2{margin-top:0;font-size:1.05rem}
.colonnes{display:grid;grid-template-columns:repeat(auto-fit,minmax(320px,1fr));gap:var(--pas)}

/* ---------- Cartes de synthèse ---------- */
.cartes{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--pas);margin-bottom:var(--pas)}
.carte{background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre);padding:var(--pas);display:flex;flex-direction:column;gap:.2rem}
.carte .chiffre{font-size:1.6rem;font-weight:700;color:var(--marque-texte);line-height:1.1}
.carte span:last-child{color:var(--encre-douce);font-size:.85rem}
.carte.alerte{border-color:var(--alerte);background:var(--alerte-fond)}
.carte.alerte .chiffre{color:var(--alerte)}

/* ---------- Formulaires ---------- */
label{display:block;margin:.5rem 0;font-size:.9rem;color:var(--encre-douce)}
label input,label select{display:block;width:100%;margin-top:.2rem}
label.inline{display:flex;align-items:center;gap:.4rem}
label.inline input{width:auto;margin:0}
.ligne{display:flex;flex-wrap:wrap;gap:.75rem;align-items:flex-end}
.ligne label{margin:0}
.ligne form{margin:0}
fieldset{border:1px solid var(--ligne);border-radius:var(--r-s);padding:.75rem;margin:.75rem 0}
legend{color:var(--encre-douce);font-size:.85rem;padding:0 .3rem}
.connexion{max-width:26rem;margin:8vh auto}

/* ---------- Tableaux ---------- */
table{width:100%;border-collapse:collapse;font-size:.9rem}
th,td{text-align:left;padding:.45rem .5rem;border-bottom:1px solid var(--ligne);vertical-align:top}
th{color:var(--encre-douce);font-weight:600;font-size:.82rem}
tbody tr:hover{background:var(--surface-2)}
tr.sous-seuil td{background:var(--alerte-fond)}
/* La référence fournisseur : c'est elle qu'on recopie pour commander, elle doit
   donc rester sélectionnable d'un bloc, sans se replier au milieu d'un tiret. */
/* La ventilation se règle dans le tableau : le formulaire tient sur la ligne. */
.ligne-entite{display:flex;gap:.3rem;align-items:center;margin:0}
/* La colonne ne doit pas prendre la place de l'article : le select est borné et
   laisse le navigateur tronquer le libellé long, la liste déroulée le montrant
   en entier de toute façon. */
.ligne-entite select{font-size:.8rem;padding:.2rem .3rem;max-width:8rem;width:100%}

/* Le corps d'une demande de devis se relit avant d'être envoyé : il occupe la
   largeur et garde une chasse fixe, comme le fournisseur le recevra. */
textarea[name="corps"]{width:100%;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;
  font-size:.9rem;line-height:1.5;padding:.7rem;border:1px solid var(--ligne);
  border-radius:var(--r-s);background:var(--surface);color:var(--encre)}

/* Choix du second panneau du tableau de bord. Deux liens, pas un sélecteur :
   l'état reste lisible dans l'URL et survit à un rafraîchissement. */
.onglets-panneau{display:flex;gap:.5rem;margin:0 0 .75rem;flex-wrap:wrap}
.onglets-panneau a{padding:.3rem .7rem;border-radius:var(--r-s);text-decoration:none;
  font-size:.85rem;color:var(--encre-douce);border:1px solid var(--ligne)}
.onglets-panneau a:hover{background:var(--marque-clair);color:var(--encre);text-decoration:none}
.onglets-panneau a.actif{background:var(--marque);color:var(--marque-contraste);
  border-color:var(--marque);font-weight:600}

/* Une case à cocher et son texte forment un seul objet cliquable : sans cela,
   le label s'empile en colonne comme les autres champs du formulaire. */
label.case{display:inline-flex;align-items:center;gap:.4rem;white-space:nowrap}
label.case input{width:auto;margin:0}
.magasins-fournisseur{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem 1rem}
.magasins-fournisseur legend{font-size:.85rem;color:var(--encre-douce)}

td.ref{white-space:nowrap;font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.85rem}
/* Une référence n'est pas une description. Le 14/09, le titre complet d'une fiche
   produit (192 caractères) collé dans ce champ faisait d'une seule cellule
   insécable une colonne de 1 400 px, qui poussait le tableau hors de sa carte.
   On borne, on coupe d'un « … », et le texte entier reste au survol (title). */
td.ref .ref-texte{display:block;max-width:16rem;overflow:hidden;text-overflow:ellipsis}
td form{margin:0}
.muted{color:var(--encre-douce);font-size:.85rem}

/* ---------- Badges ----------
   Les couleurs disent le sens : une entrée est un gain, une sortie une perte.
   Elles viennent des jetons d'état du socle, donc suivent le thème. */
.badge{display:inline-block;padding:.1rem .5rem;border-radius:var(--r-pilule);
  font-size:.75rem;font-weight:600;white-space:nowrap}
.badge.mv-entree{background:var(--ok-fond);color:var(--ok)}
.badge.mv-sortie{background:var(--erreur-fond);color:var(--erreur)}
.badge.mv-ajustement{background:var(--info-fond);color:var(--info)}
.badge.alerte{background:var(--alerte-fond);color:var(--alerte)}
.badge.sv-peremption{background:var(--alerte-fond);color:var(--alerte)}
.badge.sv-serie{background:var(--info-fond);color:var(--info)}
.badge.sv-epi{background:var(--marque-clair);color:var(--marque-texte)}
.badge.st-ouvert,.badge.st-envoyee,.badge.st-partielle{background:var(--info-fond);color:var(--info)}
.badge.st-clos,.badge.st-soldee,.badge.st-en_stock{background:var(--ok-fond);color:var(--ok)}
.badge.st-annule,.badge.st-annulee,.badge.st-rebut,.badge.st-perime{background:var(--erreur-fond);color:var(--erreur)}
.badge.st-brouillon,.badge.st-sorti{background:var(--surface-2);color:var(--encre-douce)}

/* ---------- Messages ---------- */
.msg{padding:.6rem .8rem;border-radius:var(--r-s);margin-bottom:var(--pas);font-size:.9rem;border:1px solid transparent}
.msg.ok{background:var(--ok-fond);color:var(--ok);border-color:var(--ok)}
.msg.erreur{background:var(--erreur-fond);color:var(--erreur);border-color:var(--erreur)}
.msg.info{background:var(--info-fond);color:var(--info);border-color:var(--info)}

/* ---------- Sous-onglets du référentiel ---------- */
.sous-onglets{display:flex;flex-wrap:wrap;gap:.4rem}
.sous-onglets a{padding:.35rem .7rem;border-radius:var(--r-pilule);text-decoration:none;
  color:var(--encre-douce);border:1px solid var(--ligne);font-size:.85rem}
.sous-onglets a.actif{background:var(--marque);color:var(--marque-contraste);border-color:var(--marque)}

/* Suggestions de l'annuaire. Couleurs prises aux jetons du socle : la boîte doit
   rester lisible en thème sombre comme en thème clair. */
.ac-box{position:absolute;z-index:20;left:0;right:0;top:100%;margin-top:4px;
  background:var(--surface);border:1px solid var(--ligne);border-radius:var(--r);
  box-shadow:var(--ombre-h);max-height:280px;overflow-y:auto;padding:4px}
/* Sélecteurs plus forts que la règle générale des boutons : une suggestion est
   un <button>, mais elle ne doit pas ressembler à un bouton d'action. */
.ac-box .ac-item{display:flex;flex-direction:column;align-items:flex-start;gap:1px;
  width:100%;text-align:left;border:0;background:none;padding:8px 12px;
  border-radius:var(--r-s);cursor:pointer;font:inherit;color:var(--encre)}
.ac-box .ac-item:hover,.ac-box .ac-item:focus,.ac-box .ac-item.actif{
  background:var(--marque-clair);color:var(--encre);outline:none}
/* Le détail garde son contraste sur la ligne survolée. */
.ac-box .ac-item:hover .ac-id,.ac-box .ac-item:focus .ac-id,
.ac-box .ac-item.actif .ac-id{color:var(--encre-douce)}
.ac-nom{font-weight:600;font-size:.9rem}
.ac-id{font-size:.78rem;color:var(--encre-douce)}
.ac-avert{font-size:.78rem;color:var(--encre-douce);margin-top:2px}
.ac-empty{padding:10px 12px;color:var(--encre-douce);font-size:.85rem}

/* Sortie d'aperçu : sous les onglets, toujours atteignable. */
.quitter-apercu{margin:6px 0 0}
.quitter-apercu button{width:100%;font-size:.8rem}
@media(max-width:900px){.quitter-apercu{margin:0 0 0 .25rem}.quitter-apercu button{width:auto}}

/* Édition d'un accès : détachée du tableau, pour que la liste reste lisible. */
.bloc-edition{margin:.8rem 0;padding:.8rem 1rem;border:1px solid var(--marque);
  border-radius:var(--r);background:var(--marque-clair)}
.bloc-edition h3{margin:0 0 .3rem}
.bloc-edition form{margin:.4rem 0 0}
.bloc-edition .ligne{align-items:end}
.bloc-edition form[method="get"]{display:inline-block}

/* ---------------------------------------------------------------------------
   Boutons.
   `.btn` et `.sec` étaient posées sur les liens et les boutons de toute
   l'application sans qu'aucune règle ne leur corresponde : les liens-boutons
   s'affichaient en texte souligné, et les boutons gardaient l'apparence du
   système. On reprend ici l'aspect de `.sc-btn` de la charte.

   Les boutons du socle (`sc-*`) sont exclus : ils ont déjà leurs propres règles,
   et les recouvrir ferait diverger l'entête de son socle.
   --------------------------------------------------------------------------- */
button:not([class*="sc-"]), .btn{
  font:inherit;font-size:.9rem;font-weight:600;padding:9px 17px;border-radius:var(--r-s);
  border:1px solid transparent;cursor:pointer;text-decoration:none;
  display:inline-block;line-height:1.3;
  background:var(--marque);color:var(--marque-contraste)}
button:not([class*="sc-"]):hover, .btn:hover{background:var(--marque-fonce);text-decoration:none}

/* Secondaire : la commande qui accompagne, jamais celle qu'on cherche. */
button.sec:not([class*="sc-"]), .btn.sec, a.sec{
  background:var(--surface);color:var(--encre);border-color:var(--ligne)}
button.sec:not([class*="sc-"]):hover, .btn.sec:hover, a.sec:hover{background:var(--marque-clair)}

button:disabled, .btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}

/* Dans un tableau, les boutons sont des commandes de ligne : plus discrets, et
   ils ne doivent pas faire grossir la hauteur des lignes. */
table button:not([class*="sc-"]), table .btn{padding:5px 11px;font-size:.82rem}

/* Formulaires sur écran étroit.
   Un champ et son bouton posés côte à côte se partagent la largeur : au
   téléphone, le champ de scan — le plus utilisé du comptoir — se retrouvait
   réduit à quelques caractères. Sur mobile, chaque champ prend donc la ligne,
   et le bouton passe dessous, à la largeur du pouce. */
@media(max-width:640px){
  .ligne{gap:.5rem}
  .ligne > label{flex:1 1 100%}
  .ligne > button,.ligne > .btn{flex:1 1 100%}
  /* Sauf dans un tableau, où la ligne doit rester compacte. */
  table .ligne > label,table .ligne > button{flex:0 1 auto}
}

/* Champs sans attribut `type` explicite.
   La charte ne vise que `input[type=text]` et consorts : un `<input name="c">`
   — le champ de scan, les quantités — n'était donc pas stylé du tout et gardait
   le fond BLANC du navigateur. Invisible en thème clair, illisible en sombre.
   Correction locale ; le socle mériterait la même. */
input:not([type]){
  font:inherit;font-size:.92rem;padding:9px 12px;border:1px solid var(--ligne);
  border-radius:var(--r-s);background:var(--surface);color:var(--encre);
  width:100%;max-width:100%}
input:not([type]):focus{outline:2px solid var(--marque);outline-offset:-1px;
  border-color:var(--marque)}

/* Nombre saisi DANS un tableau. La règle ci-dessus étire tout champ sans type
   à 100 % de sa cellule : un nombre à deux chiffres occupait la moitié de
   l'écran, et son unité tombait à la ligne. Le champ prend ici la largeur de ce
   qu'on y écrit, son unité reste collée au nombre, et les chiffres s'alignent à
   droite pour se comparer d'une ligne à l'autre.
   Le sélecteur reprend `:not([type])` pour passer devant elle sans !important. */
.saisie-num{display:flex;align-items:baseline;gap:.4rem;white-space:nowrap}
.saisie-num input:not([type]){width:4.5rem;text-align:right;padding:.3rem .45rem;
  font-variant-numeric:tabular-nums}
/* Un prix porte des centimes, parfois quatre décimales : il lui faut plus. */
.saisie-num.prix input:not([type]){width:6.5rem}
.saisie-num .unite{color:var(--encre-douce);font-size:.85rem}
/* Le plancher de réception : une contrainte, pas une donnée — il s'efface. */
.saisie-num .plancher{color:var(--encre-douce);font-size:.8rem}

/* ---------------------------------------------------------------------------
   Écran de rayon.
   Un seul geste, sur un téléphone tenu d'une main, debout dans une allée : tout
   y est plus gros qu'ailleurs, et rien n'y est décoratif. Les cibles tactiles
   font 48 px, taille en dessous de laquelle on rate un bouton avec un gant.
   --------------------------------------------------------------------------- */
.st-nu{display:block;max-width:34rem;margin:0 auto;padding:1rem}
.st-nu .st-contenu{padding:0}

.rayon-scan{text-align:center;padding:2rem 0}
.rayon-consigne{font-size:1.15rem;font-weight:600;margin:0 0 1rem}
.rayon-scan form{display:grid;gap:.75rem}
.rayon-scan input{font-size:1.15rem;padding:14px;text-align:center}
.rayon-scan button{min-height:48px;font-size:1rem}
.rayon-pied{margin-top:1.5rem;font-size:.85rem}

.rayon-titre{font-size:1.35rem;margin:0 0 .2rem;line-height:1.25}

/* La quantité est la seule chose qu'on vient saisir : elle occupe la place. */
.rayon-quantite{display:flex;gap:.5rem;align-items:stretch;margin:1.2rem 0 .2rem}
.rayon-quantite input{flex:1;font-size:2rem;font-weight:600;text-align:center;
  padding:12px;min-height:64px}
.rayon-quantite button{flex:0 0 64px;font-size:1.6rem;min-height:64px;padding:0}
.rayon-unite{text-align:center;margin:0 0 1.2rem}

.rayon-champ{display:block;margin:0 0 1.2rem}
.rayon-champ select{min-height:48px;font-size:1rem}

.rayon-valider{width:100%;min-height:56px;font-size:1.1rem}

/* Ce que le rayon a compris de la saisie. Une recherche qui ne trouve rien doit
   se voir : sans ces deux blocs, l'écran revenait au champ de scan sans un mot,
   et l'agent en concluait que l'application était cassée. */
.rayon-erreur{margin:1rem 0 0;padding:.7rem .9rem;border-radius:var(--r-s);
  background:var(--erreur-fond);color:var(--erreur);border:1px solid var(--erreur)}
.rayon-choix{list-style:none;margin:1rem 0 0;padding:0;display:grid;gap:.5rem;text-align:left}
.rayon-choix a{display:block;min-height:48px;padding:.6rem .8rem;border:1px solid var(--ligne);
  border-radius:var(--r);background:var(--surface);text-decoration:none;color:var(--encre)}
.rayon-choix a:hover{background:var(--marque-clair)}
.rayon-choix span{display:block;font-size:.85rem}

/* Aide : un sommaire de questions, des sections ancrées. */
.aide-toc{columns:2;column-gap:2rem;margin:.5rem 0 0}
@media(max-width:640px){.aide-toc{columns:1}}
.aide-toc a{display:block;padding:.2rem 0}
.aide-pill{display:inline-block;font-size:.72rem;font-weight:600;padding:2px 8px;
  border-radius:var(--r-pilule);background:var(--marque-clair);color:var(--marque-texte);
  vertical-align:middle;margin-left:.3rem}
/* Sans cela, l'ancre place le titre sous le bandeau collant. */
.bloc[id]{scroll-margin-top:5rem}
.bloc ol{margin:.5rem 0;padding-left:1.3rem}
.bloc ol li{margin-bottom:.4rem}

/* ---------------------------------------------------------------------------
   Écran du terminal de comptoir (terminal.php — Zebra TC22, ~412 px de large).
   Page autonome, tenue d'une main : une seule colonne, des cibles de 48 px au
   moins, et le champ de scan toujours prêt. La quantité reprend .rayon-quantite
   pour que les deux écrans mobiles se ressemblent. Aucune couleur en dur : tout
   passe par les jetons de la charte, qui bascule seule en thème sombre.
   --------------------------------------------------------------------------- */
body.terminal{margin:0;background:var(--fond);color:var(--encre)}
.term-bandeau{display:flex;justify-content:space-between;align-items:center;gap:.5rem;
  padding:.6rem 1rem;background:var(--marque-fonce);color:var(--marque-contraste);font-size:.9rem}
.term-magasin{font-weight:600}
.term-etat{font-size:.8rem}
.term{max-width:34rem;margin:0 auto;padding:1rem 1rem 2rem}
.term .msg{margin:0 0 .8rem}
.term-titre{font-size:1.35rem;line-height:1.25;margin:.2rem 0 .8rem}
.term-pile{display:grid;gap:1rem}
.term-champ{display:block;position:relative;margin:0}
.term-champ input,.term-champ select{min-height:48px;font-size:1rem}
.term-imputation{border:1px solid var(--ligne);border-radius:var(--r-s);
  padding:.6rem .8rem;background:var(--surface)}
.term-imputation summary{min-height:32px;line-height:32px;cursor:pointer;font-weight:600;
  color:var(--marque-texte)}
.term-imputation[open] summary{margin-bottom:.6rem}
.term-imputation .term-champ + .term-champ{margin-top:.6rem}
.term-principal{width:100%;min-height:56px;font-size:1.1rem}

/* Accueil du terminal : deux gestes, deux grandes cibles. Chacune dit ce qu'elle
   fait, pas seulement son nom — « Entrée » seul se lit mal debout au comptoir. */
.term-accueil{display:grid;gap:1rem;margin-top:.5rem}
.term-action{display:grid;gap:.25rem;align-content:center;min-height:112px;padding:1rem 1.2rem;
  border-radius:var(--r);background:var(--marque);text-decoration:none;box-shadow:var(--ombre)}
/* Ces boutons sont des liens : en thème sombre, la charte colore tous les liens
   par « :root[data-theme="sombre"] a » (spécificité 0,2,1), qui l'emportait sur
   .term-action — gris-bleu sur bleu nuit, illisible. body.terminal a.term-action
   (0,2,2) passe devant, pour le choix explicite comme pour la préférence système. */
body.terminal a.term-action{color:var(--marque-contraste)}
.term-action strong{font-size:1.5rem;line-height:1.2}
.term-action span{font-size:.95rem}
.term-action:active{background:var(--marque-fonce)}

/* Pour qui, et sur quoi : rappelé en haut, sans rien qu'on puisse toucher. La
   teinte dérive de --surface, pas de --marque-clair qui est calé sur le blanc :
   en thème sombre, un texte clair y deviendrait illisible. */
.term-contexte{display:flex;flex-wrap:wrap;gap:.2rem .6rem;align-items:baseline;
  margin:0 0 1rem;padding:.6rem .8rem;border-radius:var(--r-s);color:var(--encre);
  background:color-mix(in srgb, var(--marque) 12%, var(--surface))}

.term-scan{display:grid;gap:.6rem;margin:0 0 1.2rem}
.term-consigne{margin:0;text-align:center;font-size:1.1rem;font-weight:600;color:var(--encre)}
.term-scan-ligne{display:flex;gap:.5rem;position:relative}
.term-scan-ligne input:not([type]){flex:1;min-height:56px;font-size:1.15rem;text-align:center}
/* Un mot plutôt qu'un symbole : un glyphe de clavier est mal couvert par les
   polices système, et ne se lit pas au premier regard. */
.term-scan-ligne button{flex:0 0 auto;min-height:56px;padding:0 .9rem;font-size:.95rem}
.term-chercher{min-height:48px}

.term-choix{list-style:none;margin:0 0 1rem;padding:0;display:grid;gap:.4rem}
.term-choix a{display:grid;gap:.1rem;padding:.7rem .8rem;border:1px solid var(--ligne);
  border-radius:var(--r-s);background:var(--surface);color:var(--encre);text-decoration:none}
.term-erreur{margin:0 0 1rem;padding:.6rem .8rem;border-radius:var(--r-s);
  background:var(--erreur-fond);color:var(--erreur)}
/* La machine scannée : on la nomme, pour que la personne vérifie d'un coup d'œil
   que c'est bien celle qu'elle tient en main. */
.term-machine{margin:.3rem 0 .6rem;padding:.6rem .8rem;border-radius:var(--r-s);
  background:var(--ok-fond);color:var(--ok)}
.term-machine span{display:block;font-size:.85rem}
/* Entrée au terminal : les numéros de série scannés pour un article, chacun
   retirable — une étiquette mal lue se rattrape tant que rien n'est en stock. */
.term-series li{display:flex;justify-content:space-between;align-items:center;gap:.6rem}
.term-series code{overflow-wrap:anywhere}
.term-series form{margin:0}
.term-series button{min-height:40px}

.term-panier{margin:0 0 1.2rem}
.term-panier h2{font-size:1rem;margin:0 0 .5rem}
.term-panier ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--ligne)}
.term-panier li{padding:.55rem 0;border-bottom:1px solid var(--ligne)}
.term-ligne{display:flex;justify-content:space-between;align-items:baseline;gap:.8rem}
.term-ligne-lib{flex:1;min-width:0;overflow-wrap:anywhere}
.term-ligne-qte{font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.term-modifier summary{display:inline-block;min-height:32px;line-height:32px;margin-top:.2rem;
  font-size:.85rem;cursor:pointer;color:var(--marque-texte)}
.term-corriger{display:flex;align-items:center;gap:.5rem;margin:.4rem 0 0}
.term-corriger input:not([type]){width:6rem;min-height:44px;text-align:center}
.term-corriger button{min-height:44px}

.term-fiche{display:grid;gap:.2rem}
.term-unites{margin:.8rem 0;padding:.5rem .8rem;border:1px solid var(--ligne);border-radius:var(--r-s)}
.term-unite{display:flex;align-items:center;gap:.6rem;min-height:44px}
.term-unite input[type=checkbox]{width:22px;height:22px;flex:0 0 22px}
.term-pied{margin:1rem 0 0;text-align:center}
.term-bas{margin-top:2rem;text-align:center;font-size:.85rem;color:var(--encre-douce)}