/* L'ÉCRAN DE SAISIE DU COMMERCIAL — maquette « broadsheet » du DAF, 12/09/2026.
 *
 * Une mise en page de journal, et c'est un choix assumé : romain gras pour les
 * titres, capitales espacées pour les étiquettes, filets, intertitres numérotés.
 * Elle ne ressemble pas au reste de GEST-CO, et elle n'a pas à lui ressembler :
 * c'est l'écran qu'un commercial ouvre devant un client, debout. Tout est donc
 * cantonné sous `.saisie-broadsheet` — pas une règle n'en sort.
 *
 * DEUX CONTRAINTES ONT COMMANDÉ LA MISE EN PAGE :
 *
 * 1. TOUT DOIT TENIR DANS L'ÉCRAN DE LA TABLETTE. Le bandeau et la barre
 *    d'action ne bougent pas ; ce sont les deux colonnes qui défilent, et elles
 *    seules. Les boutons « Enregistrer » et « Transmettre » restent donc
 *    toujours sous le pouce, quel que soit le nombre de lignes.
 *
 * 2. LES CIBLES SE TOUCHENT AU DOIGT. Les boutons − et + font 44 points de
 *    côté, le minimum au-dessous duquel on tape à côté ; les lignes du tableau
 *    respirent ; la quantité s'atteint sans viser.
 */

.saisie-broadsheet {
  --bs-encre: #16181a;
  --bs-doux: #6f7377;
  --bs-tres-doux: #9aa0a5;
  --bs-accent: #0e7fa6;
  --bs-accent-clair: #e2f1f8;
  --bs-fond: #f3f2f0;
  --bs-papier: #ffffff;
  --bs-filet: #dedbd6;
  --bs-sombre: #1a1c1e;
  --bs-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia,
    "Times New Roman", serif;

  display: flex;
  flex-direction: column;
  /* Le rail fait 95vh ; on retire le bandeau du haut et les marges de la vue.
     `min-height` garde l'écran utilisable sur un portable en paysage. */
  height: calc(95vh - 104px);
  min-height: 460px;
  margin: -4px 0 0;
  color: var(--bs-encre);
  font-family: var(--bs-serif);
  background: var(--bs-fond);
  border: 1px solid var(--bs-filet);
  border-radius: 10px;
  overflow: hidden;
}

/* ─────────────────────────── Le bandeau ─────────────────────────────── */

.bs-tete {
  flex: none;
  padding: 10px 20px 0;
  background: var(--bs-papier);
  border-bottom: 1px solid var(--bs-filet);
}

.bs-masthead {
  display: flex; align-items: center; gap: 14px;
  padding-bottom: 8px; border-bottom: 1px solid var(--bs-filet);
}
.bs-logo { width: 74px; height: auto; flex: none; }
.bs-enseigne { display: flex; flex-direction: column; line-height: 1.15; }
.bs-enseigne strong { font-size: 17px; letter-spacing: .04em; }
.bs-enseigne span { font-size: 11px; color: var(--bs-doux); }
/* La bande d'animaux du tableau de bord : très large et très basse, elle
   s'étire dans l'espace qui reste et se recadre sans jamais se déformer. */
.bs-bande {
  flex: 1 1 auto; min-width: 0; height: 40px;
  object-fit: cover;
  /* Les animaux sont à droite de l'image du tableau de bord ; la gauche porte
     le slogan, déjà écrit à côté. On cadre donc sur eux. */
  object-position: 100% center;
  border-radius: 6px; display: block;
}

.bs-fil {
  display: flex; align-items: baseline; gap: 12px;
  padding-top: 9px; flex-wrap: wrap;
}
.bs-retour {
  font: inherit; font-size: 12px; cursor: pointer; padding: 3px 9px;
  border: 1px solid var(--bs-filet); border-radius: 4px;
  background: var(--bs-papier); color: var(--bs-doux);
}
.bs-retour:hover { border-color: var(--bs-encre); color: var(--bs-encre); }

.bs-caps {
  font-family: var(--bs-serif);
  font-size: 10.5px; letter-spacing: .18em; text-transform: uppercase;
  color: var(--bs-encre);
}
.bs-doux { color: var(--bs-doux); font-weight: 400; }
.bs-filet-court { flex: 0 0 44px; height: 1px; background: var(--bs-encre); }

.bs-ref {
  margin-left: auto; text-align: right;
  font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase;
  line-height: 1.5; color: var(--bs-encre);
}

.bs-titre {
  margin: 2px 0 8px; font-size: clamp(21px, 2.4vw, 30px);
  font-weight: 700; letter-spacing: -.01em; line-height: 1.08;
  text-transform: uppercase;
}
.bs-titre .bs-code { color: var(--bs-accent); }

/* Le double filet du journal : un gras, un fin, deux points d'écart. */
.bs-regle { height: 4px; border-top: 3px solid var(--bs-encre);
  border-bottom: 1px solid var(--bs-encre); }

/* ──────────────────────────── Le corps ──────────────────────────────── */

.bs-corps {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: minmax(240px, 320px) minmax(0, 1fr);
}
.bs-colonne, .bs-principal {
  min-height: 0; overflow-y: auto; padding: 14px 20px 18px;
}
.bs-colonne { border-right: 1px solid var(--bs-filet); background: var(--bs-papier); }
.bs-principal { background: var(--bs-fond); }

.bs-bloc + .bs-bloc { margin-top: 18px; }

.bs-section {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  margin: 0 0 10px; font-size: 17px; font-weight: 700; letter-spacing: -.01em;
}
.bs-num {
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  color: var(--bs-accent); font-variant-numeric: tabular-nums;
}
.bs-section .bs-doux { font-size: 15px; font-weight: 400; }
.bs-unites { margin-left: auto; display: flex; align-items: baseline; gap: 8px; }
.bs-unites strong { font-size: 26px; letter-spacing: -.02em; }

/* ── Le type de produits, en segments ── */
.bs-segments {
  display: flex; border: 1px solid var(--bs-encre); border-radius: 2px;
  overflow: hidden;
}
.bs-segment {
  flex: 1; font: inherit; font-size: 15px; font-weight: 600; cursor: pointer;
  padding: 11px 8px; border: 0; background: var(--bs-fond); color: var(--bs-tres-doux);
  text-transform: none;
}
.bs-segment.actif { background: var(--bs-encre); color: #fff; }
.bs-segment:disabled { cursor: default; }
.bs-segment:not(.actif):not(:disabled):hover { color: var(--bs-encre); }

.bs-note {
  display: flex; align-items: flex-start; gap: 6px;
  margin: 9px 0 0; font-size: 13px; line-height: 1.45; color: var(--bs-accent);
}
.bs-note svg { flex: none; margin-top: 2px; }

/* ── La recherche ── */
.bs-chercher {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--bs-encre); border-radius: 2px;
  background: var(--bs-papier); padding: 0 12px;
}
.bs-chercher .bs-loupe { color: var(--bs-doux); display: flex; }
.bs-chercher input {
  flex: 1; min-width: 0; font: inherit; font-size: 16px; padding: 12px 0;
  border: 0; outline: none; background: none; color: var(--bs-encre);
}
.bs-chercher:focus-within { box-shadow: 0 0 0 3px var(--bs-accent-clair); }
.bs-aide { margin: 8px 0 0; font-size: 12.5px; line-height: 1.45; color: var(--bs-doux); }

.bs-resultats { display: grid; gap: 0; margin-top: 10px; max-height: 240px; overflow-y: auto; }
.bs-resultat {
  display: flex; flex-direction: column; align-items: flex-start; gap: 1px;
  font: inherit; text-align: left; cursor: pointer; padding: 9px 10px;
  border: 0; border-bottom: 1px solid var(--bs-filet); background: none;
  color: var(--bs-encre);
}
.bs-resultat:hover { background: var(--bs-accent-clair); }
.bs-resultat strong { font-size: 14.5px; }
.bs-resultat span { font-size: 12px; color: var(--bs-doux); }

/* ── Le produit désigné, sa quantité, son bouton ── */
.bs-choisi {
  margin-top: 12px; padding: 12px; background: var(--bs-accent-clair);
  border: 1px solid var(--bs-accent); border-radius: 2px;
}
.bs-choisi .bs-produit { display: block; font-size: 15px; }
.bs-choisi .bs-doux { display: block; font-size: 12.5px; margin-bottom: 10px; }
.bs-choisi-ligne { display: flex; align-items: center; gap: 10px; }
.bs-choisi-ligne label {
  font-size: 10.5px; letter-spacing: .12em; text-transform: uppercase;
  color: var(--bs-doux);
}
.bs-choisi-ligne input {
  width: 76px; font: inherit; font-size: 19px; font-weight: 700; text-align: center;
  padding: 9px 4px; border: 1px solid var(--bs-encre); border-radius: 2px;
  background: var(--bs-papier); color: var(--bs-encre);
}
.bs-ajouter {
  flex: 1; font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 12px 14px; border: 0; border-radius: 2px;
  background: var(--bs-accent); color: #fff;
}
.bs-ajouter:hover { background: #0b6a8c; }

.bs-hr { margin: 18px 0; border: 0; border-top: 1px solid var(--bs-filet); }

/* ── Le contrôle avant envoi ── */
.bs-controle h4 { margin: 0 0 9px; color: var(--bs-doux); }
.bs-controle ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.bs-controle li {
  display: flex; align-items: center; gap: 8px;
  font-size: 14px; color: var(--bs-tres-doux);
}
.bs-controle li.fait { color: var(--bs-encre); }
.bs-controle li.fait svg { color: var(--bs-accent); }

/* ── Le tableau des lignes ── */
.bs-table { width: 100%; border-collapse: collapse; background: var(--bs-papier); }
/* LE BANDEAU VERT DES TABLEAUX N'A RIEN À FAIRE ICI. `gescom.css` peint tous
   les `thead th` en vert AMCOVET, position sticky comprise ; c'est juste
   partout ailleurs, et faux dans un journal. On le défait explicitement —
   sélecteur plus spécifique, pas de `!important`. */
.saisie-broadsheet .bs-table thead th {
  position: static;
  font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase;
  font-weight: 400; text-align: right;
  color: var(--bs-doux); background: transparent;
  padding: 0 12px 7px; border-bottom: 1px solid var(--bs-encre);
}
.saisie-broadsheet .bs-table th.gauche,
.saisie-broadsheet .bs-table td.gauche { text-align: left; }
.saisie-broadsheet .bs-table th.bs-col-num,
.saisie-broadsheet .bs-table td.bs-col-num { text-align: left; width: 42px; }
.saisie-broadsheet .bs-table th.bs-col-qte { text-align: center; }
.bs-table td { padding: 9px 12px; border-bottom: 1px solid var(--bs-filet); vertical-align: middle; }
.bs-table tbody tr:nth-child(even) { background: #faf9f8; }
.bs-produit { display: block; font-size: 15.5px; font-weight: 700; letter-spacing: .01em; }
.bs-table .bs-doux { display: block; font-size: 12.5px; }

.bs-quantite { display: inline-flex; border: 1px solid var(--bs-filet); border-radius: 2px; }
.bs-quantite button {
  width: 44px; height: 44px; font: inherit; font-size: 20px; cursor: pointer;
  border: 0; background: var(--bs-papier); color: var(--bs-encre); line-height: 1;
}
.bs-quantite button:hover { background: var(--bs-fond); }
.bs-quantite button.plus { background: var(--bs-accent-clair); }
.bs-quantite button.plus:hover { background: #cfe8f3; }
.bs-quantite input {
  width: 62px; font: inherit; font-size: 18px; font-weight: 700; text-align: center;
  border: 0; border-left: 1px solid var(--bs-filet); border-right: 1px solid var(--bs-filet);
  background: var(--bs-papier); color: var(--bs-encre); -moz-appearance: textfield;
}
.bs-quantite input::-webkit-outer-spin-button,
.bs-quantite input::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; }

.bs-retirer {
  display: inline-flex; align-items: center; gap: 5px;
  font: inherit; font-size: 13.5px; cursor: pointer; padding: 6px 8px;
  border: 0; background: none; color: var(--bs-doux);
}
.bs-retirer:hover { color: #b3261e; }

.bs-vide {
  margin: 0; padding: 26px 16px; text-align: center; font-size: 15px;
  color: var(--bs-doux); background: var(--bs-papier);
  border: 1px dashed var(--bs-filet);
}

/* ── La demande spéciale ── */
.bs-principal textarea {
  width: 100%; font: inherit; font-size: 15px; line-height: 1.5; padding: 11px 13px;
  border: 1px solid var(--bs-encre); border-radius: 2px; resize: vertical;
  background: var(--bs-papier); color: var(--bs-encre);
}
.bs-principal textarea:focus { outline: none; box-shadow: 0 0 0 3px var(--bs-accent-clair); }
.bs-sous-champ {
  display: flex; justify-content: space-between; gap: 12px; margin-top: 7px;
  font-size: 13px;
}
.bs-lien { color: var(--bs-accent); }
.bs-compteur { color: var(--bs-doux); font-variant-numeric: tabular-nums; }

/* ─────────────────────── La barre d'action ──────────────────────────── */

.bs-barre {
  flex: none;
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
  padding: 12px 20px; background: var(--bs-sombre); color: #fff;
}
.bs-compte {
  display: flex; flex-direction: column; line-height: 1.1;
  padding-right: 22px; border-right: 1px solid rgba(255, 255, 255, .18);
}
.bs-compte .bs-caps { color: rgba(255, 255, 255, .6); }
.bs-compte strong { font-size: 25px; letter-spacing: -.02em; }
.bs-consigne { margin: 0; flex: 1; min-width: 180px; font-size: 13.5px;
  line-height: 1.4; color: rgba(255, 255, 255, .82); }
.bs-actions { display: flex; gap: 10px; margin-left: auto; }
.bs-bouton {
  font: inherit; font-size: 15px; font-weight: 700; cursor: pointer;
  padding: 13px 20px; border-radius: 2px;
  border: 1px solid rgba(255, 255, 255, .45); background: none; color: #fff;
}
.bs-bouton:hover { background: rgba(255, 255, 255, .1); }
.bs-bouton.principal { border-color: var(--bs-accent); background: var(--bs-accent); }
.bs-bouton.principal:hover { background: #0b6a8c; }

/* ───────────────────── Tablette et petits écrans ────────────────────── */

/* En portrait, les deux colonnes s'empilent : la saisie d'abord, la commande
   ensuite. C'est l'ordre du geste, et c'est déjà celui du HTML. */
@media (max-width: 900px) {
  .saisie-broadsheet { height: calc(100vh - 128px); }
  .bs-corps { grid-template-columns: 1fr; grid-template-rows: auto 1fr; overflow-y: auto; }
  .bs-colonne { border-right: 0; border-bottom: 1px solid var(--bs-filet); overflow: visible; }
  .bs-principal { overflow: visible; }
  .bs-bande { display: none; }
  .bs-barre { gap: 14px; padding: 10px 14px; }
  .bs-actions { width: 100%; margin-left: 0; }
  .bs-actions .bs-bouton { flex: 1; }
}

/* Les tablettes basses — 768 points de haut en paysage — n'ont pas un point à
   perdre : on resserre le bandeau plutôt que de rogner sur les cibles. */
@media (max-height: 820px) and (min-width: 901px) {
  .bs-tete { padding-top: 8px; }
  .bs-masthead { padding-bottom: 6px; gap: 11px; }
  .bs-logo { width: 52px; }
  .bs-bande { height: 28px; }
  .bs-enseigne strong { font-size: 15px; }
  .bs-fil { padding-top: 6px; }
  .bs-titre { font-size: clamp(18px, 1.9vw, 23px); margin: 1px 0 5px; }
  .bs-colonne, .bs-principal { padding: 10px 18px 12px; }
  .bs-bloc + .bs-bloc { margin-top: 11px; }
  .bs-section { margin-bottom: 6px; font-size: 15.5px; }
  .bs-unites strong { font-size: 21px; }
  .bs-table td { padding: 5px 12px; }
  .bs-produit { font-size: 14.5px; }
  .bs-quantite button { width: 42px; height: 42px; }
  .bs-principal textarea { min-height: 52px; }
  .bs-resultats { max-height: 190px; }
  .bs-barre { padding: 9px 20px; }
  .bs-compte strong { font-size: 21px; }
}

/* Les tablettes 4:3 en paysage — 768 points de haut — sont le cas le plus
   serré du parc. On y gagne les vingt derniers points sur les rembourrages,
   jamais sur la taille du texte ni sur les cibles tactiles. */
@media (max-height: 790px) and (min-width: 901px) {
  .bs-table td { padding: 4px 12px; }
  .bs-quantite button { width: 40px; height: 40px; }
  .bs-principal textarea { min-height: 44px; }
  .bs-sous-champ { margin-top: 5px; font-size: 12px; }
  .bs-barre { padding: 7px 18px; }
  .bs-compte strong { font-size: 19px; }
  .bs-bouton { padding: 11px 18px; }
}