/* ==========================================================================
   LE STOCK, VUE ORDINATEUR (à partir de 1280 px)

   D'après le prompt « vue ordinateur » de Stéphanie et sa maquette du
   22/10/2026 (design_handoff_module_stock/). Préfixe `skb-` ; tout est rangé
   sous `.sk-bureau`, posé par ecran-stock.js au-delà de 1280 px : le
   téléphone et la tablette ne voient rien de ce fichier.

   Gabarit commun : colonne de filtres à gauche, tableau compact au centre
   (lignes de 50 px, traits fins, pas de cartes), barre d'action en bas ou
   panneau à droite. Couleurs : celles de l'application d'abord (prompt §3),
   et les seules valeurs propres à la vue ordinateur écrites une fois ici.
   ========================================================================== */

/* --- Les couleurs de la jauge (prompt §2). Le reste vient des jetons. --- */
.sk-bureau {
  --skb-piste: #ECEFF2;
  --skb-seuil: #5F6B73;
  --skb-ok: #5F9E97;
  --skb-bas: #D9931F;
  --skb-epuise: #C4453A;
  --skb-voile: rgba(20, 30, 40, .28);
  --skb-gauche: 248px;
  --skb-tiroir: 420px;
}
[data-theme="sombre"] .sk-bureau {
  --skb-piste: #263233;
  --skb-seuil: #C9D1D6;
  --skb-ok: #6FB3AB;
  --skb-bas: #E0A23A;
  --skb-epuise: #E0695E;
  --skb-voile: rgba(0, 0, 0, .45);
}

/* --- La carte : les onglets en haut, le contenu prend toute la hauteur. --- */
.sk-bureau { padding-bottom: 0; overflow: hidden; }
.sk-bureau .sk-onglets { margin-bottom: 0; }
.sk-bureau .sk-onglet { padding: var(--e-3) var(--e-3); }

/* --- Accueil : la zone sous les onglets porte le fond neutre ; les tuiles
   sont celles du téléphone, validées le 22/10 (§24). --- */
.sk-bureau[data-sk-vue="accueil"] { padding: 0; background: var(--surface); }
.sk-bureau .sk-accueil {
  padding: var(--e-5);
  background: linear-gradient(160deg, var(--ta-fond-1) 0%, var(--ta-fond-2) 100%);
  min-height: 70vh;
}
.sk-bureau .sk-alertes { grid-template-columns: 1fr; margin-bottom: var(--e-4); }
.sk-bureau .sk-alerte { min-height: 52px; padding: var(--e-2) var(--e-4); }
.sk-bureau .sk-alerte-txt { flex-direction: row; align-items: baseline; gap: var(--e-3); flex-wrap: wrap; }
.sk-bureau .sk-alerte-txt span { font-size: var(--t-texte); }
.sk-alerte-voir { display: none; }
.sk-bureau .sk-alerte-voir {
  display: inline;
  flex: none;
  font-size: var(--t-texte);
  font-weight: var(--graisse-forte);
}
.sk-bureau .sk-tuiles { gap: var(--e-4); }

/* --- Le gabarit : colonne de gauche, puis la zone (tableau + tiroir). --- */
.skb-cadre {
  display: grid;
  grid-template-columns: var(--skb-gauche) minmax(0, 1fr);
  min-height: calc(100vh - 150px);
}
.skb-gauche {
  padding: var(--e-5) var(--e-2) var(--e-5) var(--e-3);
  border-right: 1px solid var(--trait);
}
.skb-section + .skb-section { margin-top: var(--e-4); }
.skb-section-titre {
  margin: 0 0 var(--e-1);
  padding: 0 var(--e-3);
  color: var(--encre2);
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
}
.skb-filtre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--e-3);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: var(--t-texte);
  text-align: left;
  cursor: pointer;
}
.skb-filtre:hover { background: var(--surface2); }
.skb-filtre[aria-pressed="true"] { background: var(--lagon-f); color: var(--teal-d); font-weight: var(--graisse-appui); }
.skb-filtre-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skb-filtre-n { flex: none; color: var(--encre3); font-size: var(--t-appui); font-variant-numeric: tabular-nums; }
.skb-filtre-n[data-s="bas"] { color: var(--st-bas); font-weight: var(--graisse-appui); }
.skb-filtre-n[data-s="epuise"] { color: var(--st-epuise); font-weight: var(--graisse-appui); }

.skb-zone { position: relative; min-width: 0; }
.skb-centre { padding: var(--e-5) var(--e-5) var(--e-6); }

.skb-tete {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin-bottom: var(--e-3);
}
.skb-titre { margin: 0; font-size: var(--t-titre-l); font-weight: var(--graisse-forte); color: var(--encre); }
.skb-actions { display: flex; align-items: center; gap: var(--e-3); min-width: 0; }
.sk-bureau .skb-recherche { width: 300px; margin: 0; min-height: 42px; }
.skb-btn-second {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 42px;
  padding: 0 var(--e-4);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-texte);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
  cursor: pointer;
}
.skb-btn-second:hover { background: var(--surface2); }
.skb-btn-ico { width: 18px; height: 18px; flex: none; }

/* --- Le tableau --- */
.skb-table { display: flex; flex-direction: column; }
.skb-rangee {
  display: grid;
  /* Minimums choisis pour tenir à 1280 px (vérification visuelle du 22/10 :
     la dernière colonne sortait du tableau avec 220 + 130 + 120 + 200). */
  grid-template-columns: minmax(150px, 2.2fr) minmax(100px, 1.2fr) minmax(100px, 1fr) minmax(150px, 1.9fr);
  align-items: center;
  column-gap: var(--e-4);
  min-height: 50px;
  padding: 0 var(--e-3);
  border: 0;
  border-bottom: 1px solid var(--trait2);
  background: transparent;
  color: var(--encre);
  font: inherit;
  text-align: left;
}
.skb-entete {
  min-height: 36px;
  border-bottom-color: var(--trait);
  color: var(--encre2);
  font-size: var(--t-appui);
  font-weight: var(--graisse-appui);
}
.skb-ligne { width: 100%; cursor: pointer; }
.skb-ligne:hover { background: var(--surface2); }
.skb-ligne[aria-current="true"] { background: var(--lagon-f); }
.skb-cell { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skb-nom { display: flex; align-items: center; gap: var(--e-2); }
.skb-nom-txt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: var(--t-base); font-weight: var(--graisse-moyenne); }
.skb-nom .sk-etiq { flex: none; }
.skb-qte { font-size: var(--t-base); font-weight: var(--graisse-appui); font-variant-numeric: tabular-nums; }
.skb-qte[data-s="bas"] { color: var(--st-bas); }
.skb-qte[data-s="epuise"] { color: var(--st-epuise); }
.skb-qte[data-s="compter"] { color: var(--encre2); font-weight: var(--graisse-moyenne); }
.skb-note { margin-right: var(--e-2); color: var(--encre3); font-weight: var(--graisse-appui); }
.skb-dernier { color: var(--encre2); font-size: var(--t-appui); }
.skb-dernier[data-s="aucun"], .skb-sans { color: var(--encre3); font-size: var(--t-appui); }

/* La jauge : piste, remplissage, et le trait du seuil au milieu. */
.skb-jauge {
  position: relative;
  overflow: visible;
  /* La cellule coupe ce qui dépasse : on réserve la place du trait. */
  margin-block: 5px;
  display: block;
  width: 100%;
  max-width: 160px;
  height: 7px;
  border-radius: var(--r-p);
  background: var(--skb-piste);
}
.skb-jauge-rempli { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-p); background: var(--skb-ok); }
.skb-jauge-rempli[data-s="bas"] { background: var(--skb-bas); }
.skb-jauge-rempli[data-s="epuise"] { background: var(--skb-epuise); }
/* Le trait du seuil dépasse de la barre et reste lisible sur le remplissage
   (Stéphanie, 22/10 : « il manque le trait au milieu de la jauge »). */
.skb-jauge-seuil { position: absolute; left: 50%; top: 50%; z-index: 1; width: 2px; height: 15px; margin-left: -1px; transform: translateY(-50%); border-radius: 1px; background: var(--skb-seuil); box-shadow: 0 0 0 1px var(--surface); }

/* --- La fiche en tiroir : elle couvre le tableau, pas la colonne de gauche. --- */
.skb-voile {
  position: absolute;
  inset: 0;
  z-index: 20;
  display: flex;
  justify-content: flex-end;
  background: var(--skb-voile);
}
.skb-tiroir {
  position: sticky;
  top: 0;
  width: var(--skb-tiroir);
  max-width: 100%;
  height: 100%;
  max-height: calc(100vh - 80px);
  overflow-y: auto;
  padding: var(--e-5);
  background: var(--surface);
  box-shadow: -18px 0 40px -24px rgba(0, 0, 0, .35);
  animation: skb-glisse .18s ease-out;
}
.skb-tiroir:focus { outline: none; }
.skb-tiroir:focus-visible { outline: 2px solid var(--teal); outline-offset: -2px; }
@keyframes skb-glisse { from { transform: translateX(24px); opacity: .4; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .skb-tiroir { animation: none; } }

.skb-tiroir-tete { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--e-3); }
.skb-tiroir-cat { margin: 0 0 2px; color: var(--encre2); font-size: var(--t-appui); }
.skb-tiroir-nom { margin: 0; font-size: var(--t-titre); font-weight: var(--graisse-forte); }
.skb-fermer {
  flex: none;
  min-height: 36px;
  padding: 0 var(--e-4);
  border: 0;
  border-radius: var(--r-p);
  background: var(--surface2);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-appui);
  font-weight: var(--graisse-appui);
  cursor: pointer;
}
.skb-fermer:hover { background: var(--trait2); }
.skb-tiroir-qte { display: flex; align-items: baseline; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-5); }
.skb-tiroir-n { font-size: 40px; font-weight: var(--graisse-forte); line-height: 1; font-variant-numeric: tabular-nums; }
.skb-tiroir-n.skb-inconnu { font-size: var(--t-titre-l); color: var(--encre2); }
.skb-tiroir-u { color: var(--encre2); font-size: var(--t-titre-s); }
.skb-tiroir-qte .sk-etiq { align-self: center; }
.skb-tiroir-seuil { margin: var(--e-1) 0 0; color: var(--encre2); font-size: var(--t-appui); }

.skb-portes { display: grid; grid-template-columns: 1fr 1fr; gap: var(--e-3); margin-top: var(--e-4); }
.skb-porte {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 44px;
  border: 1px solid transparent;
  border-radius: var(--r-s);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--graisse-forte);
  cursor: pointer;
}
.skb-porte[data-sens="sorties"] { background: var(--st-sortie-f); color: var(--st-sortie); border-color: color-mix(in srgb, var(--st-sortie) 25%, transparent); }
.skb-porte[data-sens="entrees"] { background: var(--st-entree-f); color: var(--st-entree); border-color: color-mix(in srgb, var(--st-entree) 25%, transparent); }

.skb-tiroir-intertitre { margin: var(--e-5) 0 var(--e-2); font-size: var(--t-base); font-weight: var(--graisse-forte); }
.skb-histo { margin: 0; padding: 0; list-style: none; }
.skb-histo li { padding: var(--e-2) 0; border-top: 1px solid var(--trait2); }
.skb-histo li[data-annule="oui"] { opacity: .6; }
.skb-histo-l1 { margin: 0; color: var(--encre2); font-size: var(--t-texte); }
.skb-histo-l2 { margin: 2px 0 0; color: var(--encre); font-size: var(--t-appui); }
.skb-histo-q { font-weight: var(--graisse-forte); }
.skb-histo-q[data-sorte="sortie"] { color: var(--st-sortie); }
.skb-histo-q[data-sorte="entree"] { color: var(--st-entree); }
.skb-histo-q[data-sorte="inventaire"] { color: var(--encre); }

.skb-infos { margin-top: var(--e-5); padding: var(--e-3) var(--e-4) var(--e-4); border-radius: var(--r-m); background: var(--surface2); border: 1px solid var(--trait2); }
.skb-infos-tete { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); }
.skb-infos-tete .skb-tiroir-intertitre { margin: 0; }
.skb-lien {
  min-height: 36px;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--teal);
  font: inherit;
  font-size: var(--t-appui);
  font-weight: var(--graisse-forte);
  cursor: pointer;
}
.skb-dl { margin: var(--e-2) 0 0; }
.skb-dl > div { display: flex; justify-content: space-between; gap: var(--e-3); padding: 3px 0; font-size: var(--t-appui); }
.skb-dl dt { color: var(--encre2); }
.skb-dl dd { margin: 0; color: var(--encre); text-align: right; }

/* --- La fenêtre « Ajouter / modifier un produit » : 520 px, centrée. --- */
.sk-bureau .sk-panneau { width: 520px; padding: var(--e-5); }
.sk-bureau .sk-toast { bottom: var(--e-5); }
.skb-pied-panneau { display: flex; justify-content: flex-end; gap: var(--e-3); margin-top: var(--e-3); }
.skb-pied-panneau .sk-btn { width: auto; margin: 0; min-height: 42px; padding: 0 var(--e-5); }

/* ==========================================================================
   LES PAGES DE SAISIE (Entrées, puis Sorties) : colonne de 280 px à gauche,
   le bon au centre, la barre d'action collée en bas (prompt §4.3).
   ========================================================================== */
.skb-cadre-saisie { grid-template-columns: 280px minmax(0, 1fr); }
.skb-cadre-saisie[data-sens="entrees"] { --skb-sens: var(--st-entree); --skb-sens-f: var(--st-entree-f); }
.skb-cadre-saisie[data-sens="sorties"] { --skb-sens: var(--st-sortie); --skb-sens-f: var(--st-sortie-f); }
.skb-gauche-large { padding: var(--e-4) var(--e-3) var(--e-5); max-height: calc(100vh - 150px); overflow-y: auto; }

/* Les onglets segmentés de la colonne de gauche. */
.skb-segments {
  display: flex;
  gap: 2px;
  margin-bottom: var(--e-4);
  padding: 3px;
  border-radius: var(--r-s);
  background: var(--trait2);
}
.skb-segment {
  flex: 1 1 auto;
  min-height: 36px;
  padding: 0 6px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--encre2);
  font: inherit;
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
  cursor: pointer;
}
.skb-segment[aria-selected="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-basse); }

.skb-produits .skb-section-titre { margin-top: var(--e-3); padding: 0 var(--e-2); }
.sk-bureau .skb-recherche-gauche { width: 100%; margin: 0 0 var(--e-2); }
.skb-produit {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  min-height: 40px;
  padding: 0 var(--e-2);
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: var(--t-texte);
  text-align: left;
  cursor: pointer;
}
.skb-produit:hover { background: var(--surface2); }
.skb-produit[aria-pressed="true"] { background: var(--skb-sens-f); color: var(--skb-sens); font-weight: var(--graisse-appui); }
.skb-produit-nom { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.skb-produit .sk-etiq { flex: none; }
.skb-produit-ico { width: 16px; height: 16px; flex: none; color: var(--encre3); }
.skb-produit[aria-pressed="true"] .skb-produit-ico { color: var(--skb-sens); }
.skb-vide-gauche { padding: var(--e-2); }

/* Les cartes (commandes, historique). */
.skb-cartes { display: flex; flex-direction: column; gap: var(--e-2); }
.skb-nouveau {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--e-2);
  min-height: 40px;
  border: 1px dashed var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-texte);
  font-weight: var(--graisse-appui);
  cursor: pointer;
}
.skb-carte {
  display: flex;
  flex-direction: column;
  gap: 3px;
  width: 100%;
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  text-align: left;
  cursor: pointer;
}
.skb-carte:hover { border-color: var(--trait-champ); }
.skb-carte[aria-current="true"] { border-color: var(--skb-sens); background: var(--skb-sens-f); }
.skb-carte[aria-disabled="true"] { cursor: default; }
.skb-carte-l1 { display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.skb-carte-titre { min-width: 0; overflow-wrap: anywhere; font-size: var(--t-texte); font-weight: var(--graisse-forte); }
.skb-carte-l1 .skb-statut { align-self: flex-start; }
.skb-carte-l2 { color: var(--encre2); font-size: var(--t-petit); line-height: 1.35; }
.skb-statut { flex: none; padding: 2px var(--e-2); border-radius: var(--r-p); font-size: var(--t-etiquette); font-weight: var(--graisse-appui); }
.skb-statut[data-s="attente"] { background: var(--st-bas-f); color: var(--st-bas); }
.skb-statut[data-s="fait"] { background: var(--lagon-f); color: var(--teal-d); }

/* Le centre : en-tête, note, tableau, puis la barre en bas. */
.skb-centre-saisie { display: flex; flex-direction: column; padding: 0; min-height: calc(100vh - 150px); }
.skb-saisie { display: flex; flex-direction: column; flex: 1; padding: var(--e-5) var(--e-5) 0; }
.skb-note-champ { display: flex; align-items: center; gap: var(--e-3); max-width: 560px; margin-bottom: var(--e-3); }
.skb-note-lbl { font-size: var(--t-texte); font-weight: var(--graisse-appui); }
.skb-entree-texte {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-texte);
}
.skb-bandeau {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
  padding: var(--e-3) var(--e-4);
  border: 1px solid var(--trait);
  border-radius: var(--r-m);
  background: var(--surface2);
}
.skb-bandeau-ico { width: 20px; height: 20px; flex: none; color: var(--encre2); }
.skb-bandeau-txt { flex: 1; margin: 0; font-size: var(--t-texte); font-weight: var(--graisse-appui); }

.skb-rangee-saisie {
  grid-template-columns: minmax(170px, 2fr) minmax(100px, 1.1fr) 112px minmax(110px, 1.1fr) 40px;
  min-height: 56px;
}
.skb-table-reception .skb-rangee-saisie { grid-template-columns: 40px minmax(170px, 2fr) minmax(100px, 1fr) 112px minmax(110px, 1fr); }
.skb-rangee-saisie > .skb-cell { white-space: normal; }
.skb-rangee-saisie[data-saisi="oui"], .skb-rangee-saisie[data-modifie="oui"] { background: color-mix(in srgb, var(--skb-sens-f) 45%, transparent); }
.skb-rangee-saisie[data-recu="non"] { background: var(--surface2); }
.skb-rangee-saisie[data-recu="non"] .skb-nom-txt { color: var(--encre2); }
.skb-nom-bloc { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.skb-sous-ligne { color: var(--encre2); font-size: var(--t-petit); }
.skb-sous-ligne[data-s="erreur"] { color: var(--st-epuise); }
.skb-sous-ligne[data-s="ecart"] { color: var(--st-bas); }
.skb-rangee-saisie .skb-cell:nth-last-child(2) { font-weight: var(--graisse-appui); }
.skb-table-reception .skb-rangee-saisie .skb-cell:nth-last-child(2) { font-weight: var(--graisse-normale); }
.skb-table-reception .skb-rangee-saisie .skb-cell:last-child { font-weight: var(--graisse-appui); }
.skb-coche { width: 20px; height: 20px; accent-color: var(--skb-sens); cursor: pointer; }
.skb-retirer {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--r-s);
  background: transparent;
  color: var(--encre2);
  cursor: pointer;
}
.skb-retirer:hover { background: var(--trait2); color: var(--encre); }
.skb-retirer-ico { width: 18px; height: 18px; }
.skb-vide-bon {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: var(--e-1);
  min-height: 160px;
  border: 1.5px dashed var(--trait-champ);
  border-radius: var(--r-m);
}
.skb-vide-titre { margin: 0; font-size: var(--t-base); font-weight: var(--graisse-appui); }
.skb-apres-table { margin: var(--e-2) 0 0; }

/* La case de quantité : 96 × 38, deux flèches empilées à droite. */
.skb-q {
  display: inline-flex;
  align-items: stretch;
  width: 96px;
  height: 38px;
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  overflow: hidden;
}
.skb-q-compacte { width: 82px; height: 32px; }
.skb-q[data-etat="saisi"] { border-color: var(--skb-sens, var(--teal)); box-shadow: 0 0 0 1px var(--skb-sens, var(--teal)); }
.skb-q[data-etat="erreur"] { border-color: var(--st-epuise); box-shadow: 0 0 0 1px var(--st-epuise); }
.skb-q:focus-within { outline: 2px solid var(--teal); outline-offset: 1px; }
.skb-q-champ {
  flex: 1;
  width: 0;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--encre);
  font: inherit;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  font-variant-numeric: tabular-nums;
  text-align: center;
}
.skb-q-champ:focus { outline: none; }
.skb-q[data-etat="saisi"] .skb-q-champ { color: var(--skb-sens, var(--teal)); }
.skb-q-champ:disabled { color: var(--encre3); }
.skb-q-fleches { display: flex; flex-direction: column; width: 28px; border-left: 1px solid var(--trait); }
.skb-q-fleche {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--encre2);
  cursor: pointer;
}
.skb-q-fleche + .skb-q-fleche { border-top: 1px solid var(--trait); }
.skb-q-fleche:hover { background: var(--trait2); color: var(--encre); }
.skb-q-fleche:disabled { cursor: default; color: var(--encre3); background: transparent; }
.skb-q-ico { width: 14px; height: 14px; }

/* La barre du bas. */
.skb-barre {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-4);
  margin: auto calc(var(--e-5) * -1) 0;
  padding: var(--e-3) var(--e-5);
  border-top: 1px solid var(--trait);
  background: var(--surface);
}
.skb-barre-resume { font-size: var(--t-texte); font-weight: var(--graisse-forte); }
.skb-barre-resume[data-s="ecart"] { color: var(--st-bas); }
.skb-barre-resume[data-s="erreur"] { color: var(--st-epuise); }
.skb-barre-actions { display: flex; align-items: center; gap: var(--e-4); }
.skb-barre .sk-btn { min-height: 46px; padding: 0 var(--e-5); border-radius: var(--r-m); font-size: var(--t-base); font-weight: var(--graisse-forte); white-space: nowrap; }
.skb-lien-gris {
  min-height: 40px;
  padding: 0 var(--e-2);
  border: 0;
  background: transparent;
  color: var(--encre2);
  font: inherit;
  font-size: var(--t-texte);
  cursor: pointer;
}
.skb-lien-gris:hover { color: var(--encre); text-decoration: underline; }

/* ==========================================================================
   SORTIES, ACHATS, INVENTAIRE, HISTORIQUE (22/10/2026)
   ========================================================================== */
.skb-cadre-saisie[data-sens="inventaire"] { grid-template-columns: var(--skb-gauche) minmax(0, 1fr); --skb-sens: var(--teal); --skb-sens-f: var(--lagon-f); }
.skb-cadre[data-sens="achats"] { --skb-sens: var(--teal); --skb-sens-f: var(--lagon-f); }
.skb-filtre-n[data-s="fini"] { color: var(--teal-d); font-weight: var(--graisse-appui); }
.skb-rangee-saisie[data-depasse="oui"] { background: var(--st-epuise-f); }
.skb-rangee-saisie[data-depasse="oui"] .skb-cell:nth-last-child(2) { color: var(--st-epuise); }

.skb-select {
  min-height: 40px;
  max-width: 340px;
  padding: 0 var(--e-3);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  font: inherit;
  font-size: var(--t-texte);
}
.skb-evenement { display: flex; align-items: center; gap: var(--e-3); margin-bottom: var(--e-3); padding: var(--e-3) var(--e-4); border-radius: var(--r-m); background: var(--surface2); border: 1px solid var(--trait2); }
.skb-bascule { display: inline-flex; gap: 2px; padding: 3px; border-radius: var(--r-s); background: var(--trait2); }
.skb-bascule-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--e-2);
  min-height: 36px;
  padding: 0 var(--e-4);
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--encre2);
  font: inherit;
  font-size: var(--t-texte);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
  cursor: pointer;
}
.skb-bascule-btn[aria-pressed="true"] { background: var(--surface); color: var(--encre); box-shadow: var(--ombre-basse); }
.skb-envoi { display: flex; flex-direction: column; gap: var(--e-3); margin-bottom: var(--e-3); padding: var(--e-3) var(--e-4); border: 1px solid var(--trait); border-radius: var(--r-m); background: var(--surface2); }
.skb-envoi-ligne { display: flex; align-items: center; flex-wrap: wrap; gap: var(--e-4); }
.skb-envoi-champ { display: flex; align-items: center; gap: var(--e-3); }
.skb-canal { display: inline-flex; align-items: center; gap: var(--e-2); font-size: var(--t-texte); cursor: pointer; }
[data-mode="preparer"] .skb-q[data-etat="saisi"] { border-color: var(--tu-hist); box-shadow: 0 0 0 1px var(--tu-hist); }
[data-mode="preparer"] .skb-q[data-etat="saisi"] .skb-q-champ { color: var(--tu-hist); }
[data-mode="preparer"] .skb-rangee-saisie[data-saisi="oui"] { background: var(--surface2); }

/* Achats : trois colonnes, le panneau de 340 px à droite. */
.skb-cadre-achats { grid-template-columns: var(--skb-gauche) minmax(0, 1fr) 340px; }
.skb-titre-moyen { font-size: var(--t-titre); }
.skb-rangee-achat, .skb-cadre-achats .skb-rangee { grid-template-columns: minmax(160px, 2fr) minmax(120px, 1.2fr) 112px; }
.skb-cadre-achats .skb-rangee .skb-cell { white-space: normal; }
.skb-cadre-achats .skb-jauge { margin-top: var(--e-1); max-width: 120px; }
.skb-ajouter { min-height: 36px; padding: 0 var(--e-3); }
.skb-panneau-droit { display: flex; flex-direction: column; min-height: calc(100vh - 150px); padding: var(--e-4) var(--e-3) 0; border-left: 1px solid var(--trait); }
.skb-panneau-corps { flex: 1; overflow-y: auto; max-height: calc(100vh - 330px); }
.skb-article { display: flex; align-items: center; gap: var(--e-2); padding: var(--e-2) 0; border-bottom: 1px solid var(--trait2); }
.skb-article-txt { display: flex; flex: 1; flex-direction: column; gap: 1px; min-width: 0; }
.skb-article .skb-nom-txt { font-size: var(--t-texte); font-weight: var(--graisse-appui); }
.skb-panneau-pied { position: sticky; bottom: 0; display: flex; flex-direction: column; gap: var(--e-2); padding: var(--e-3) 0; background: var(--surface); border-top: 1px solid var(--trait); }
.skb-panneau-pied .sk-btn { width: 100%; min-height: 46px; border-radius: var(--r-m); font-weight: var(--graisse-forte); }
.skb-large { width: 100%; justify-content: center; }
.skb-carte-fixe { cursor: default; }
.skb-carte-actions { display: flex; gap: var(--e-2); margin-top: var(--e-2); }
.skb-petit { min-height: 34px; padding: 0 var(--e-3); font-size: var(--t-appui); }
.skb-partage .sk-panneau-titre { margin-bottom: var(--e-3); }
.skb-modes, .skb-gens { display: flex; flex-direction: column; gap: var(--e-2); margin-bottom: var(--e-4); }
.skb-gens { max-height: 260px; overflow-y: auto; padding: var(--e-2) var(--e-3); border: 1px solid var(--trait); border-radius: var(--r-s); }
.skb-mode { display: flex; align-items: center; gap: var(--e-2); font-size: var(--t-texte); cursor: pointer; }

/* Inventaire. */
.skb-cadre-saisie[data-sens="inventaire"] .skb-rangee-saisie { grid-template-columns: minmax(170px, 2fr) minmax(110px, 1.1fr) 112px minmax(120px, 1.1fr); }
.skb-ecart { font-weight: var(--graisse-appui); }
.skb-ecart[data-s="ok"] { color: var(--teal-d); }
.skb-ecart[data-s="ecart"] { color: var(--st-bas); }
.skb-progres { display: flex; flex-direction: column; gap: var(--e-2); min-width: 320px; }
.skb-progres-l { display: flex; justify-content: space-between; gap: var(--e-4); }
.skb-progres-piste { position: relative; display: block; height: 5px; border-radius: var(--r-p); background: var(--skb-piste); }
.skb-progres-rempli { position: absolute; inset: 0 auto 0 0; border-radius: var(--r-p); background: var(--teal); }

/* Historique. */
.skb-retour { min-height: 36px; margin: 0 0 var(--e-3); padding: 0 var(--e-3); border: 0; background: transparent; color: var(--teal); font: inherit; font-size: var(--t-texte); font-weight: var(--graisse-appui); cursor: pointer; }
.skb-rangee-hist { grid-template-columns: 64px minmax(150px, 1.6fr) minmax(120px, 1.1fr) minmax(110px, 1fr) minmax(160px, 1.8fr); min-height: 46px; }
.skb-rangee-hist[data-annule="oui"] { opacity: .55; }
.skb-jour { padding: var(--e-4) var(--e-3) var(--e-2); font-size: var(--t-texte); font-weight: var(--graisse-forte); color: var(--encre); border-bottom: 1px solid var(--trait); }
.skb-mvt { display: inline-flex; align-items: center; gap: var(--e-2); font-weight: var(--graisse-forte); }
.skb-mvt[data-sorte="sorties"] { color: var(--st-sortie); }
.skb-mvt[data-sorte="entrees"] { color: var(--st-entree); }
.skb-mvt-ico { width: 16px; height: 16px; flex: none; }
.sk-bureau .skb-recherche-seule { margin-bottom: var(--e-3); }

/* Achats à 1280 px : les trois colonnes ne tenaient pas (boutons « Ajouter »
   sous le panneau de droite — vérification visuelle du 22/10). Colonnes plus
   étroites jusqu'à 1440 px. */
.skb-cadre-achats { grid-template-columns: 200px minmax(0, 1fr) 300px; }
.skb-cadre-achats .skb-rangee { grid-template-columns: minmax(0, 2fr) minmax(80px, 1fr) max-content; column-gap: var(--e-3); }
.skb-cadre-achats .skb-centre { padding-inline: var(--e-4); }
@media (min-width: 1440px) {
  .skb-cadre-achats { grid-template-columns: var(--skb-gauche) minmax(0, 1fr) 340px; }
  .skb-cadre-achats .skb-centre { padding-inline: var(--e-5); }
}