/* ==========================================================================
   Stock — fiche 3

   Un vrai tableau à grille complète sur poste bureau : bordures sur les
   lignes ET les colonnes, jamais un simple border-bottom (règle standing
   KAIROZ sur les tableaux).

   Sous le seuil mobile de 820 px, le tableau disparaît au profit d'une liste
   de cartes. Un tableau à largeur fixe sur téléphone impose un défilement
   horizontal et oblige à dézoomer pour atteindre une case — c'est le piège
   numéro un du projet (B18_REGLES_AFFICHAGE §4).
   ========================================================================== */

/* LE TABLEAU NE PREND PAS TOUTE LA LARGEUR.
   Sur 1440 px, une ligne de trois colonnes etiree sur 1500 px oblige l oeil a
   traverser l ecran pour relier un article a sa quantite. Constat de
   Stephanie du 29/08 : ce n est pas tres pratique pour lire.
   760 px suffisent aux trois colonnes et gardent le nom pres de son chiffre. */
.st-conteneur { padding: 0; overflow: hidden; max-width: 760px; }

/* --------------------------------------------------------------------------
   Le tableau
   -------------------------------------------------------------------------- */

.st-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--t-base);
}

.st-table th,
.st-table td {
  border: 1px solid var(--trait);
  padding: var(--e-3) var(--e-4);
  text-align: left;
}

.st-table th {
  background: var(--surface2);
  font-size: var(--t-petit);
  letter-spacing: .06em;
  text-transform: uppercase;
  font-weight: var(--graisse-caps);
  color: var(--encre3);
}

/* Pas de bordure sur le pourtour : la carte porte déjà le contour. */
.st-table tr > *:first-child { border-left: 0; }
.st-table tr > *:last-child { border-right: 0; }
.st-table thead tr > * { border-top: 0; }

.st-th-c { text-align: center; }

.st-td-nom {
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
}

.st-td-q,
.st-td-s {
  text-align: center;
  white-space: nowrap;
}

.st-td-s { color: var(--encre2); }

.st-td-a {
  width: 64px;
  text-align: center;
  padding: 4px !important;
}

/* La quantité est ce qu'on vient chercher : elle est lisible de loin. */
.st-nombre {
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-forte);
  line-height: 1.1;
}

.st-nombre-bas { color: var(--lave); }

.st-non-compte {
  font-size: var(--t-petit);
  color: var(--encre2);
  font-style: italic;
}

.st-tr-alerte { background: var(--ambre-f); }

/* Le bouton d'ouverture : une vraie cible de 44 px, pas un caractère perdu. */
.st-plus {
  width: 44px;
  height: 44px;
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface2);
  color: var(--teal);
  font-size: 22px;
  line-height: 1;
  font-weight: var(--graisse-forte);
  cursor: pointer;
}

.st-plus:hover {
  border-color: var(--teal);
  background: var(--lagon-f);
}

/* --------------------------------------------------------------------------
   Le panneau qui s'ouvre sous une ligne
   -------------------------------------------------------------------------- */

.st-tr-detail > td { background: var(--surface2); }

.st-form {
  display: flex;
  gap: var(--e-3);
  align-items: center;
  flex-wrap: wrap;
  padding-bottom: var(--e-3);
}

.st-champ {
  width: 120px;
  min-height: var(--cible);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  padding: 0 var(--e-3);
  /* 16 px minimum : en dessous, Safari iOS zoome au toucher et l'écran part
     de travers (B18_REGLES_AFFICHAGE §2). */
  font-size: 16px;
  background: var(--surface);
  color: var(--encre);
}

.st-select {
  min-height: var(--cible);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  padding: 0 var(--e-3);
  font-size: 16px;
  background: var(--surface);
  color: var(--encre);
}

.st-valider { min-height: var(--cible); }

.st-msg {
  font-size: var(--t-base);
  color: var(--lave);
}

.st-journal { padding-bottom: var(--e-2); }

.st-vide-j {
  margin: 0;
  font-size: var(--t-base);
  color: var(--encre2);
}

.st-mvt {
  display: flex;
  gap: var(--e-4);
  align-items: baseline;
  padding: var(--e-2) 0;
  border-top: 1px solid var(--trait2);
  font-size: var(--t-base);
}

.st-mvt-q {
  flex: none;
  min-width: 4em;
  font-weight: var(--graisse-forte);
}

.st-entree { color: var(--teal); }
.st-sortie { color: var(--ambre); }
.st-mvt-quoi { flex: none; min-width: 7em; }

.st-mvt-qui {
  flex: 1;
  min-width: 0;
  color: var(--encre2);
  font-size: var(--t-petit);
}

/* --------------------------------------------------------------------------
   Les cartes — vue mobile
   -------------------------------------------------------------------------- */

.st-cartes { display: none; }

.st-carte { border-bottom: 1px solid var(--trait); }
.st-carte:last-child { border-bottom: 0; }
.st-carte-alerte { background: var(--ambre-f); }

.st-carte-tete {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: var(--e-3) var(--e-4) 2px;
  min-height: var(--cible);
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.st-carte-nom {
  flex: 1;
  min-width: 0;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
}

.st-carte-q { flex: none; }

.st-carte-seuil {
  padding: 0 var(--e-4) var(--e-3);
  font-size: var(--t-petit);
  color: var(--encre2);
}

.st-carte .st-form,
.st-carte .st-journal { padding: 0 var(--e-4) var(--e-3); }

/* --------------------------------------------------------------------------
   Ce qui est prévu — la carte de prévision (§4 des propositions du 31/08)

   Elle ne retire rien au stock : elle compare les besoins des anniversaires à
   venir à ce qui reste. Le seuil dit « il n'en reste plus beaucoup », elle dit
   « il n'y en aura pas assez samedi ».
   -------------------------------------------------------------------------- */

.st-prevision {
  max-width: 760px;
  padding: var(--e-4);
  margin-bottom: var(--e-4);
}

.st-prev-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  margin-bottom: var(--e-3);
}

.st-prev-titre {
  margin: 0;
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.st-prev-sous {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

.st-prev-liste { display: grid; gap: var(--e-2); }

.st-prev-ligne {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-2) var(--e-3);
  border-radius: var(--r-s);
  /* 3 px : le filet de couleur qui porte le verdict. Deux px se perdent a
     cote d'un fond teinte, quatre font une bande. */
  border-left: 3px solid var(--trait);
  background: var(--surface2);
  font-size: var(--t-base);
}

/* Le rouge est réservé aux vrais problèmes, et manquer de gobelets samedi en
   est un (CLAUDE.md §7). L'ambre marque ce qu'on ne sait pas. */
.st-prev-manque { border-left-color: var(--lave); background: var(--lave-f); }
.st-prev-assez { border-left-color: var(--pousse); background: var(--pousse-f); }
.st-prev-inconnu { border-left-color: var(--ambre); background: var(--ambre-f); }

.st-prev-nom {
  flex: 1 1 8em;
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.st-prev-besoin { flex: none; color: var(--encre); }

.st-prev-reste {
  flex: none;
  color: var(--encre2);
  font-size: var(--t-petit);
}

.st-prev-reserve {
  margin: var(--e-3) 0 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* L'alerte se cale sur la largeur du tableau. Pleine largeur, elle tirait
   l'oeil a 1360 px pour une phrase qui commente une carte large de 760. */
.st-alerte { max-width: 760px; }

/* --------------------------------------------------------------------------
   La barre : filtres en pilules + l'action « Je compte »
   -------------------------------------------------------------------------- */

.st-barre {
  display: flex;
  align-items: center;
  gap: var(--e-3);
  max-width: 760px;
  margin-bottom: var(--e-3);
}

.st-barre .so { flex: 1 1 auto; margin-bottom: 0; min-width: 0; }
.st-compter { flex: none; min-height: var(--cible); }

/* --------------------------------------------------------------------------
   Les intertitres de nature (§5) — les périssables en premier
   -------------------------------------------------------------------------- */

.st-tr-groupe td,
.st-td-groupe {
  background: var(--surface2);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre2);
  padding: var(--e-2) var(--e-4);
}

.st-groupe {
  margin: var(--e-3) 0 0;
  padding: var(--e-2) var(--e-4);
  font-size: var(--t-petit);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre2);
  background: var(--surface2);
}

/* --------------------------------------------------------------------------
   À acheter (§3) — le calcul existait, l'écran manquait
   -------------------------------------------------------------------------- */

.st-courses { max-width: 760px; padding: var(--e-4); }

.st-courses-tete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--e-3);
  margin-bottom: var(--e-3);
}

.st-courses-compte {
  margin: 0;
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.st-courses-liste { display: grid; gap: var(--e-2); }

.st-course {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-s);
  background: var(--surface);
}

.st-course-quoi { flex: 1 1 10em; min-width: 0; display: grid; gap: 2px; }

.st-course-nom {
  font-size: var(--t-base);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.st-course-detail { font-size: var(--t-petit); color: var(--encre2); }

.st-course-q {
  flex: none;
  font-size: var(--t-titre-s);
  font-weight: var(--graisse-forte);
  color: var(--teal);
}

.st-course-fait { flex: none; min-height: var(--cible); }

.st-copie-repli {
  width: 100%;
  margin-top: var(--e-3);
  min-height: 6em;
  font-family: inherit;
  font-size: var(--t-champ);
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-s);
  background: var(--surface);
  color: var(--encre);
  padding: var(--e-2);
}

/* --------------------------------------------------------------------------
   Le comptage guidé (§2) — un article par écran, en grand

   Sur téléphone, on tient l'appareil d'une main et on compte de l'autre. Le
   chiffre à taper doit être la seule chose à viser.
   -------------------------------------------------------------------------- */

.st-comptage { max-width: 560px; }

.st-cp-un,
.st-cp-recap,
.st-cp-fin { padding: var(--e-5) var(--e-4); }

.st-cp-avance {
  margin: 0;
  font-size: var(--t-petit);
  color: var(--encre2);
}

/* 4 px : un filet, pas une barre. Aucun jeton d'espacement ne descend si bas
   (le plus petit est --e-1 a 4 px, mais c'est une marge, pas une epaisseur de
   trait) et une jauge plus epaisse volerait la vedette au nom de l'article. */
.st-cp-barre {
  height: 4px;
  margin: var(--e-2) 0 var(--e-4);
  border-radius: var(--r-p);
  background: var(--trait2);
  overflow: hidden;
}

.st-cp-jauge { height: 100%; background: var(--teal); }

.st-cp-nom {
  margin: 0 0 var(--e-2);
  font-size: var(--t-titre-l);
  font-weight: var(--graisse-appui);
  color: var(--encre);
}

.st-cp-annonce {
  margin: 0 0 var(--e-4);
  font-size: var(--t-base);
  color: var(--encre2);
}

/* 56 px, au-dessus du plancher de 44 : meme raisonnement que le bouton
   principal de l'ecran Ma journee. C'est le champ qu'on remplit vingt-cinq
   fois de suite, debout devant une etagere, souvent sans regarder l'ecran. */
.st-cp-champ {
  width: 100%;
  min-height: 56px;
  font-family: inherit;
  font-size: var(--t-titre-l);
  text-align: center;
  border: 1px solid var(--trait-champ);
  border-radius: var(--r-m);
  background: var(--surface);
  color: var(--encre);
  padding: 0 var(--e-3);
}

.st-cp-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.st-cp-actions button { min-height: var(--cible); }

/* `.btn-principal` est pleine largeur par nature — c'est ce qu'on veut sur
   téléphone, jamais sur un poste bureau où le bouton ferait une barre de
   560 px. Dans la rangée d'actions, il reprend sa taille et garde son poids
   visuel par la couleur. */
.st-cp-actions .btn-principal {
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  min-height: var(--cible);
}

.st-cp-bilan {
  margin: 0 0 var(--e-4);
  font-size: var(--t-base);
  color: var(--encre2);
}

/* Le récapitulatif garde la grille complète du tableau, y compris sur
   téléphone : quatre colonnes courtes de chiffres tiennent sans défilement,
   et c'est le seul endroit où l'écart se lit en face de sa valeur. */
.st-cp-table { display: table; margin-bottom: var(--e-4); }
.st-cp-table th, .st-cp-table td { padding: var(--e-2) var(--e-3); }

@media (max-width: 820px) {
  .st-table { display: none; }
  .st-cartes { display: block; }
  .st-cp-table { display: table; }

  /* La barre passe sur deux lignes plutôt que de comprimer les pilules. */
  .st-barre { flex-wrap: wrap; }
  .st-barre .so { flex: 1 1 100%; }
  .st-compter { width: 100%; }

  .st-course-fait { width: 100%; }
  .st-cp-actions button { flex: 1 1 45%; }
  /* Sur téléphone, le geste répété reprend toute la ligne. */
  .st-cp-actions .btn-principal { flex: 1 1 100%; width: 100%; }
}

/* ==========================================================================
   Le tableau triable — refonte du 31/08/2026

   Sept colonnes, toutes triables, ordre alphabetique par defaut. C'est le
   choix du client : « j'ai mis par ordre alphabetique justement pour
   simplifier la gestion du stock ».
   ========================================================================== */

/* LE TABLEAU S'ELARGIT. Les 760 px du 29/08 tenaient pour trois colonnes ; il
   y en a huit depuis que la derniere entree et la derniere sortie s'affichent.
   Les serrer produirait la ligne de deux mots que la regle des tableaux
   interdit. */
.st-large { max-width: 1100px; }

.st-tri {
  display: flex;
  align-items: center;
  gap: var(--e-2);
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  text-align: left;
  cursor: pointer;
}

.st-fleche { color: var(--encre3); font-size: var(--t-micro); }
.st-table th[aria-sort] .st-tri { color: var(--teal); }
.st-table th[aria-sort] .st-fleche { color: var(--teal); }

.st-td-nat { color: var(--encre2); font-size: var(--t-appui); white-space: nowrap; }
.st-td-date { font-size: var(--t-appui); color: var(--encre2); white-space: nowrap; }
.st-jamais { color: var(--encre3); font-style: italic; font-size: var(--t-appui); }

.st-puce {
  display: inline-block;
  padding: 1px 8px;
  border-radius: var(--r-p);
  font-size: var(--t-petit);
  font-weight: var(--graisse-appui);
  white-space: nowrap;
}

.st-puce-ok { background: var(--pousse-f); color: var(--pousse); }
.st-puce-bas { background: var(--lave-f); color: var(--lave); }
.st-puce-inc { background: var(--ambre-f); color: var(--ambre); }

/* --------------------------------------------------------------------------
   La barre d'actions
   -------------------------------------------------------------------------- */

.st-actions-barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-bottom: var(--e-3);
  max-width: 1100px;
}

/* `.btn-principal` est pleine largeur par nature. Une classe simple ne
   suffit pas a le contredire : les deux ont le meme poids et c'est
   l'ordre de chargement qui tranche. On monte donc d'un cran. */
.st-actions-barre .st-bouton,
.st-inv-pied .st-bouton,
.st-actions .st-bouton,
.st-inv-fin .st-bouton {
  display: inline-block;
  width: auto;
  flex: 0 0 auto;
  min-height: var(--cible);
}

/* Les filtres repondent a une autre question que le tri : « montre-moi
   seulement ce qui cloche » plutot que « range-moi la colonne ». Ils sont donc
   discrets, a cote des actions, et pas en pilules d'onglet. */
.st-filtre {
  min-height: 34px;
  padding: 0 var(--e-3);
  border: 1px solid var(--trait);
  border-radius: var(--r-p);
  background: var(--surface);
  color: var(--encre2);
  font-size: var(--t-appui);
  cursor: pointer;
}

.st-filtre[aria-pressed="true"] {
  background: var(--lagon-b);
  border-color: transparent;
  color: var(--sur-lagon);
  font-weight: var(--graisse-appui);
}

/* --------------------------------------------------------------------------
   Ajouter un produit
   -------------------------------------------------------------------------- */

.st-ajout { max-width: 620px; margin-bottom: var(--e-3); }
.st-champ-bloc { display: block; margin-bottom: var(--e-3); }

.st-etiq {
  display: block;
  margin-bottom: var(--e-1);
  font-size: var(--t-micro);
  font-weight: var(--graisse-forte);
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--encre2);
}

.st-champ-large { width: 100%; }

.st-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2);
  margin-top: var(--e-4);
}

.st-ko { color: var(--lave); font-size: var(--t-appui); }
.st-aide { margin: var(--e-3) 0 0; font-size: var(--t-petit); color: var(--encre2); }

.st-bandeau-ok {
  max-width: 1100px;
  margin: 0 0 var(--e-3);
  padding: var(--e-3);
  border-left: 3px solid var(--pousse);
  border-radius: 0 var(--r-s) var(--r-s) 0;
  background: var(--pousse-f);
  font-size: var(--t-appui);
}

/* --------------------------------------------------------------------------
   L'inventaire

   Un tableau, l'ordre alphabetique, et UN SEUL bouton Enregistrer. Le comptage
   un article a la fois a disparu : il etait pense pour le telephone et penible
   sur ordinateur, la ou on fait un inventaire.
   -------------------------------------------------------------------------- */

.st-inv-table { display: table; }
.st-champ-inv { width: 6em; text-align: right; }

.st-inv-pied {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--e-2) var(--e-3);
  padding: var(--e-3) var(--e-4);
  border-top: 1px solid var(--trait);
}

.st-bilan { flex: 1 1 14em; font-size: var(--t-appui); color: var(--encre2); }
.st-ecart-plus { color: var(--pousse); font-weight: var(--graisse-appui); }
.st-ecart-moins { color: var(--lave); font-weight: var(--graisse-appui); }
.st-inv-fin { max-width: 620px; display: grid; gap: var(--e-3); justify-items: start; }

/* --------------------------------------------------------------------------
   Le journal de tous les articles
   -------------------------------------------------------------------------- */

.st-journal-large { padding: 0 var(--e-4) var(--e-3); }
.st-mvt-art { flex: 1 1 9em; font-weight: var(--graisse-appui); color: var(--encre); }
.st-journal-large .st-mvt-quoi { flex: 0 0 8em; }

@media (max-width: 820px) {
  /* Le tableau d'inventaire garde sa grille : quatre colonnes courtes de
     chiffres tiennent sans defilement, et c'est le seul endroit ou l'ecart se
     lit en face de sa valeur. */
  .st-inv-table { display: table; }
  .st-inv-table th, .st-inv-table td { padding: var(--e-2); }
  .st-champ-inv { width: 4.5em; }

  .st-actions-barre .st-bouton,
  .st-inv-pied .st-bouton { flex: 1 1 100%; width: 100%; }
}