/* ============================================================
   Poste de production — structure et composants
   ------------------------------------------------------------
   AUCUNE COULEUR EN DUR ICI : tout passe par les variables du theme
   (tokens-<client>.css). C'est ce qui permet de revendre le site a un autre
   client en changeant un seul fichier. Si une couleur manque, on ajoute un
   token dans le theme — on ne pose pas un hex dans cette feuille.

   Deux familles de classes :
     .sib-*   composants de la charte SI Breeze, repris tels quels du skill
              sibreeze-charte (references/composants.md). Ne pas les reecrire.
     .poste-* ce que l'atelier ajoute : cibles tactiles, tuiles de ligne,
              pave numerique, fiche de valeurs. Ecrit contre les memes tokens.
   ============================================================ */

:root {
  /* Cibles tactiles — un operateur ganté, debout, devant un ecran mural.
     La charte vise un dashboard a la souris (boutons de 42px) ; ici le
     minimum est 56px, 64px pour ce qui declenche un mouvement de stock. */
  --poste-cible: 56px;
  --poste-cible-l: 64px;
  --poste-tuile: 116px;
}

/* ======================== charte : ossature ======================== */

/* Meme largeur que MyWMS (Damien, 22/10/2026 : « elargis les pages comme MyWMS ») : 1500 px,
   des marges de 20 px sur les cotes, 12 px entre les cartes. */
.sib-page { max-width: 1500px; margin: 0 auto; padding: var(--sib-3); }
.sib-grid { display: grid; grid-template-columns: 1fr; gap: var(--sib-3); }

@media (min-width: 700px) {
  .sib-page { padding: var(--sib-4) var(--sib-5); }
}

/* ======================== charte : logo ======================== */

.sib-logo { display: inline-flex; align-items: center; }
.sib-logo img { height: 40px; width: auto; display: block; }
/* La regle de masquage doit etre AU MOINS aussi specifique que « .sib-logo img »
   ci-dessus, sinon les deux logos s'affichent cote a cote — c'est ce que montrait la
   capture du 18/09/2026, et le defaut vient du CSS de la charte. */
.sib-logo img.sib-logo__sombre { display: none; }
.sib-logo__repli { display: none; font-weight: var(--sib-fw-hero); font-size: 1.25rem;
                   letter-spacing: -.02em; color: currentColor; }
.sib-logo.is-repli img { display: none; }
.sib-logo.is-repli .sib-logo__repli { display: block; }

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sib-logo img.sib-logo__clair { display: none; }
  :root:not([data-theme="light"]) .sib-logo img.sib-logo__sombre { display: block; }
}
:root[data-theme="dark"] .sib-logo img.sib-logo__clair { display: none; }
:root[data-theme="dark"] .sib-logo img.sib-logo__sombre { display: block; }

/* ======================== charte : bandeau ======================== */

/* UNE SEULE LIGNE, comme MyB (16/10/2026) : logo, MyProd, les rubriques, puis le client,
   l'utilisateur et le theme. Hauteur fixe — la barre laterale et les ancres se calent dessus. */
:root { --poste-barre-h: 60px; }
.sib-app-bar { background: var(--sib-bandeau); color: var(--sib-sur-bandeau);
               position: sticky; top: 0; z-index: 30; }
.sib-app-bar__haut { display: flex; align-items: center; gap: var(--sib-4);
                     min-height: var(--poste-barre-h); padding: 0 var(--sib-5); }
.sib-app-bar__titre { margin: 0; font-weight: 600; font-size: var(--sib-fs-body);
                      color: var(--sib-blanc); white-space: nowrap; }
.sib-app-bar__titre span { color: var(--sib-sur-bandeau-2); font-weight: 500; }
.sib-app-bar__actions { margin-left: auto; display: flex; align-items: center;
                        gap: var(--sib-3); flex-shrink: 0; }
.sib-app-bar__user { font-size: var(--sib-fs-sm); color: var(--sib-sur-bandeau-2); white-space: nowrap; }
/* Le bandeau est sombre dans les deux themes : le logo y est toujours la version blanche. */
.sib-app-bar .sib-logo img.sib-logo__clair { display: none; }
.sib-app-bar .sib-logo img.sib-logo__sombre { display: block; }

.sib-btn--bandeau { background: transparent; color: var(--sib-blanc);
                    border-color: var(--sib-bandeau-filet);
                    padding: 9px var(--sib-4); min-height: 44px;
                    font-size: var(--sib-fs-sm); }
.sib-btn--bandeau:hover { background: var(--sib-bandeau-survol); }
.sib-btn--rond { width: 44px; height: 44px; min-height: 44px; padding: 0; }

/* ======================== charte : carte ======================== */

.sib-card {
  background: var(--sib-surface);
  border: var(--sib-bd);
  border-radius: var(--sib-r);
  padding: var(--sib-4) var(--sib-5);  /* comme MyWMS : 16 px dessus-dessous, 20 px sur les cotes */
  transition: background .25s, border-color .25s, transform .25s;
}
.sib-card__head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: var(--sib-3); flex-wrap: wrap; margin-bottom: var(--sib-4);
}
.sib-card__head h2 { margin: 0; }
.sib-card__meta { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }

/* ======================== charte : boutons ======================== */

.sib-btn {
  font: 600 var(--sib-fs-sm)/1 var(--sib-font);
  padding: 12px var(--sib-5);
  border-radius: var(--sib-r-pill);
  border: 2px solid transparent;
  cursor: pointer;
  min-height: 42px;
  text-decoration: none;
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  transition: background-color .25s, border-color .25s, color .25s;
}
.sib-btn--primary { background: var(--sib-grad-orange); color: var(--sib-on-orange); }
.sib-btn--primary:hover { background: var(--sib-grad-orange-survol); }
.sib-btn--secondary { background: var(--sib-bleu); color: var(--sib-blanc); }
.sib-btn--ghost { background: var(--sib-blanc); color: var(--sib-bleu);
                  border-color: var(--sib-border-fort); }
.sib-btn--ghost:hover { background: var(--sib-survol); }
.sib-btn:disabled { opacity: .45; cursor: not-allowed; }
.poste .sib-btn--primary:disabled {
  background: var(--sib-surface-2); color: var(--sib-ink-3);
  border-color: var(--sib-border); opacity: 1;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .sib-btn--secondary,
  :root:not([data-theme="light"]) .sib-btn--ghost {
    background: var(--sib-surface-2); color: var(--sib-ink); border-color: var(--sib-border-fort);
  }
}
:root[data-theme="dark"] .sib-btn--secondary,
:root[data-theme="dark"] .sib-btn--ghost {
  background: var(--sib-surface-2); color: var(--sib-ink); border-color: var(--sib-border-fort);
}

/* ======================== charte : badges et alertes ======================== */

.sib-badge {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: var(--sib-fs-xs); font-weight: 600; line-height: 1;
  padding: 6px 11px; border-radius: var(--sib-r-pill);
  border: 1px solid; white-space: nowrap;
}
.sib-badge--good { color: var(--sib-good); background: var(--sib-good-bg); border-color: var(--sib-good-br); }
.sib-badge--warn { color: var(--sib-warn); background: var(--sib-warn-bg); border-color: var(--sib-warn-br); }
.sib-badge--serious { color: var(--sib-serious); background: var(--sib-serious-bg); border-color: var(--sib-serious-br); }
.sib-badge--crit { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }
.sib-badge--neutre { color: var(--sib-neutre); background: var(--sib-neutre-bg); border-color: var(--sib-neutre-br); }

.sib-alert {
  display: flex; flex-direction: column; gap: 2px;
  padding: var(--sib-3) var(--sib-4);
  border-radius: var(--sib-r-sm);
  border: 1px solid; border-left-width: 4px;
  font-size: var(--sib-fs-sm);
}
.sib-alert strong { font-weight: 700; }
.sib-alert--good { color: var(--sib-good); background: var(--sib-good-bg); border-color: var(--sib-good-br); }
.sib-alert--warn { color: var(--sib-warn); background: var(--sib-warn-bg); border-color: var(--sib-warn-br); }
.sib-alert--serious { color: var(--sib-serious); background: var(--sib-serious-bg); border-color: var(--sib-serious-br); }
.sib-alert--crit { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }

/* ======================== charte : tableau dense ======================== */

.sib-table-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch;
                    border-radius: var(--sib-r-sm); }
.sib-table { width: 100%; border-collapse: collapse; font-size: var(--sib-fs-sm); }
.sib-table th, .sib-table td {
  padding: 11px var(--sib-3);
  border-bottom: 1px solid var(--sib-border);
  text-align: left; white-space: nowrap;
}
.sib-table thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--sib-surface-2);
  color: var(--sib-ink-2);
  font-size: var(--sib-fs-xs); font-weight: 600;
  text-transform: uppercase; letter-spacing: .05em;
  border-bottom: 2px solid var(--sib-border);
}
.sib-table .sib-num { text-align: right; }
.sib-table tbody tr:hover { background: var(--sib-survol); }
.sib-table th:first-child, .sib-table td:first-child {
  position: sticky; left: 0; background: var(--sib-surface); font-weight: 600;
}
.sib-table thead th:first-child { background: var(--sib-surface-2); z-index: 2; }
.sib-table tbody tr:hover td:first-child { background: var(--sib-survol); }

/* ============================================================
   Ajouts applicatifs — le poste d'atelier
   ============================================================ */

/* Le tableau devient tactile : une ligne se designe au doigt, donc elle doit
   faire la hauteur d'un doigt. Le survol de la charte ne suffit pas a dire
   « selectionne » sur un ecran sans souris — d'ou l'etat explicite. */
.poste-tactile .sib-table td { padding: var(--sib-3) var(--sib-2); font-size: var(--sib-fs-body); }
.poste-tactile .sib-table th { padding: 8px var(--sib-2); }
/* Le nom du composant est ce qui peut se replier ; une quantite coupee serait pire
   qu'inutile, donc elle garde son « nowrap » et sa chasse fixe. */
.poste-tactile .sib-table td:first-child { white-space: normal; min-width: 11rem; }
.poste-tactile .sib-table tbody tr { cursor: pointer; }
.poste-tactile .sib-table tbody tr:active td { background: var(--sib-survol); }

.poste-ligne--sel td,
.poste-ligne--sel td:first-child { background: var(--sib-surface-2); }
.poste-ligne--sel td:first-child { box-shadow: inset 4px 0 0 0 var(--sib-orange); }

/* Une ligne non declarable reste visible — la tracabilite de ce qui a tourne
   sur la ligne le demande — mais elle ne se designe pas. */
.poste-ligne--inerte td { color: var(--sib-ink-3); cursor: default; }
.poste-ligne--inerte:hover td { background: var(--sib-surface); }

/* Boutons du poste : cibles tactiles. L'action qui declenche un mouvement de
   stock est la seule en --primary (l'orange est rare, c'est ce qui lui donne
   son poids). */
.poste .sib-btn { min-height: var(--poste-cible); font-size: var(--sib-fs-body);
                  padding: 14px var(--sib-5); }
.poste .sib-btn--primary { min-height: var(--poste-cible-l); }
.poste .sib-btn--bandeau { min-height: 44px; font-size: var(--sib-fs-sm); padding: 9px var(--sib-4); }

/* Tuiles de l'ecran 1 : choisir sa ligne de production d'un appui. */
.poste-tuiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
                gap: var(--sib-3); }
.poste-tuile {
  display: flex; flex-direction: column; align-items: flex-start; gap: var(--sib-1);
  min-height: var(--poste-tuile); padding: var(--sib-4);
  text-align: left; text-decoration: none;
  background: var(--sib-surface); color: var(--sib-ink);
  border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r);
  cursor: pointer; transition: background .25s, border-color .25s, transform .25s;
}
.poste-tuile:hover { background: var(--sib-survol); transform: translateY(-2px); }
.poste-tuile:active { transform: none; }
.poste-tuile__code { font-size: var(--sib-fs-h2); font-weight: var(--sib-fw-title); }
.poste-tuile__libelle { color: var(--sib-ink-2); }
.poste-tuile__compte { margin-top: auto; font-size: var(--sib-fs-sm); color: var(--sib-ink-3); }
.poste-tuile--sel { border-color: var(--sib-orange); background: var(--sib-survol); }

/* Fiche de valeurs : les cases « libelle / valeur » des blocs 1, 4 et 5. */
.poste-fiche { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
               gap: var(--sib-3); }
.poste-case { background: var(--sib-surface-2); border: 1px solid var(--sib-border);
              border-radius: var(--sib-r-sm); padding: var(--sib-3) var(--sib-4);
              display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.poste-case__label { font-size: var(--sib-fs-xs); text-transform: uppercase;
                     letter-spacing: .05em; color: var(--sib-ink-3); }
.poste-case__valeur { font-size: var(--sib-fs-h3); font-weight: 600; overflow-wrap: anywhere; }
.poste-case__valeur--grand { font-size: var(--sib-fs-h2); font-weight: var(--sib-fw-hero); }
.poste-case__unite { font-size: var(--sib-fs-sm); font-weight: 500; color: var(--sib-ink-3); }
.poste-case__indice { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }

/* Champs : rayon 10px et filet fort, comme la charte ; hauteur tactile. */
.sib-champ { display: flex; flex-direction: column; gap: var(--sib-1); min-width: 0; }
.sib-champ__label { font-size: var(--sib-fs-xs); text-transform: uppercase;
                    letter-spacing: .05em; color: var(--sib-ink-3); }
.sib-champ input, .sib-champ select, .sib-champ textarea {
  font: 500 var(--sib-fs-body)/1.3 var(--sib-font);
  color: var(--sib-ink); background: var(--sib-surface);
  border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r-sm);
  padding: 0 var(--sib-4); min-height: var(--poste-cible); width: 100%;
  font-variant-numeric: tabular-nums;
}
.sib-champ textarea { min-height: 96px; padding: var(--sib-3) var(--sib-4); resize: vertical; }
.sib-champ input[readonly] { color: var(--sib-ink-2); }

/* Une case a cocher n'est pas un champ de saisie : la largeur pleine et la hauteur
   tactile en faisaient un grand carre vide, dont le libelle tombait dessous. Elle
   reste large de doigt, mais sur une ligne avec son texte. */
.sib-champ input[type="checkbox"] { width: 28px; height: 28px; min-height: 0;
                                    padding: 0; flex: 0 0 auto; accent-color: var(--sib-orange); }
.poste-coche { display: flex; align-items: center; gap: var(--sib-3);
               min-height: var(--poste-cible); font-size: var(--sib-fs-sm); }

/* ============ Ecran de parametrage : presentation « bureau », celle de MyB ============
   Cet ecran n'est PAS un ecran d'atelier. Il se remplit au clavier, une fois, a
   l'installation — pas au doigt entre deux fournees. La cible tactile de 56px et les
   trois colonnes y produisaient des libelles coupes en deux et une page a rallonge ;
   MyB empile un champ par ligne en format dense, et c'est ce qu'on reprend ici pour
   que l'installation se fasse du meme geste d'une application a l'autre. */
.poste-reglages .poste-champs > * + * { margin-top: var(--sib-4); }
.poste-reglages .sib-champ { gap: 6px; }
.poste-reglages .sib-champ input,
.poste-reglages .sib-champ select {
  min-height: 0; padding: 10px var(--sib-3); border-width: 1px;
  font: 400 var(--sib-fs-sm)/1.4 var(--sib-font);
}
.poste-reglages .poste-duo { display: flex; gap: var(--sib-3); flex-wrap: wrap; }
.poste-reglages .poste-duo > .sib-champ { flex: 1; min-width: 120px; }
.poste-reglages .poste-coche { min-height: 0; }

/* Pied de l'ecran de parametrage : il ne colle pas. Rien n'y est urgent, et un pied
   flottant sur une page de reglages mange de la hauteur pour rien. */
.poste-reglages__pied { display: flex; flex-wrap: wrap; align-items: center;
                        gap: var(--sib-4); margin-top: var(--sib-4); }

.poste-actions { display: flex; align-items: center; gap: var(--sib-3); flex-wrap: wrap; }
.poste-note { font-size: var(--sib-fs-sm); color: var(--sib-ink-3); }
.poste-mono { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
              font-size: var(--sib-fs-xs); font-variant-numeric: tabular-nums;
              overflow-wrap: anywhere; }

/* Reponse brute d'un service, sur l'ecran de parametrage. Bornee en hauteur : un
   $metadata fait des milliers de lignes, et ce qui compte est dans les premieres. */
.poste-extrait { margin: var(--sib-2) 0 0; padding: var(--sib-3);
                 background: var(--sib-surface-2); border: 1px solid var(--sib-border);
                 border-radius: var(--sib-r-sm);
                 font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
                 font-size: var(--sib-fs-xs); line-height: 1.45;
                 white-space: pre-wrap; word-break: break-word;
                 max-height: 220px; overflow: auto; }

/* Pied d'ecran 3 : il porte la validation, donc il reste atteignable sans
   remonter toute la page. */
.poste-pied { position: sticky; bottom: 0; z-index: 20;
              display: flex; align-items: center; gap: var(--sib-3); flex-wrap: wrap;
              padding: var(--sib-3) var(--sib-4);
              background: var(--sib-surface); border: var(--sib-bd);
              border-radius: var(--sib-r); }

/* Journal des consommations en attente : volontairement en retrait, ce ne sont
   pas encore des mouvements. */
.poste-journal { display: flex; flex-direction: column; gap: var(--sib-2);
                 padding: var(--sib-3); background: var(--sib-surface-2);
                 border: 1px dashed var(--sib-border-fort); border-radius: var(--sib-r-sm); }
.poste-journal__titre { font-size: var(--sib-fs-xs); text-transform: uppercase;
                        letter-spacing: .05em; color: var(--sib-ink-3); }
.poste-journal__ligne { display: flex; align-items: center; gap: var(--sib-3);
                        flex-wrap: wrap; font-size: var(--sib-fs-sm); }
.poste-journal__ligne .sib-btn { margin-left: auto; min-height: 44px; }

/* Pave numerique : il FLOTTE, donc c'est le seul endroit ou l'ombre est permise. */
.poste-voile { position: fixed; inset: 0; z-index: 50; display: flex;
               align-items: center; justify-content: center; padding: var(--sib-4);
               background: var(--sib-voile); }
.poste-pave { width: min(420px, 100%); display: flex; flex-direction: column; gap: var(--sib-3);
              padding: var(--sib-5); background: var(--sib-surface);
              border: var(--sib-bd); border-radius: var(--sib-r);
              box-shadow: var(--sib-shadow-pop); }
.poste-pave__titre { font-size: var(--sib-fs-h3); font-weight: 600; }
.poste-pave__sous { font-size: var(--sib-fs-sm); color: var(--sib-ink-3); }
.poste-pave__ecran { min-height: var(--poste-cible-l); display: flex; align-items: center;
                     justify-content: flex-end; gap: var(--sib-2); padding: 0 var(--sib-4);
                     background: var(--sib-surface-2); border: 2px solid var(--sib-border-fort);
                     border-radius: var(--sib-r-sm);
                     font-size: var(--sib-fs-kpi); font-weight: var(--sib-fw-hero);
                     font-variant-numeric: tabular-nums; }
.poste-pave__ecran .poste-case__unite { font-size: var(--sib-fs-body); }
.poste-pave__touches { display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--sib-2); }
.poste-pave__touches .sib-btn { min-height: var(--poste-cible-l); font-size: var(--sib-fs-h2); }
.poste-pave__bas { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sib-2); }
.poste-pave__bas .sib-btn { min-height: var(--poste-cible-l); }

[hidden] { display: none !important; }

/* ---------------- barre de sections et accueil ---------------- */

/* Sections du bandeau, reprises de la charte : elles DEFILENT, elles ne passent pas a
   la ligne — un retour a la ligne changerait la hauteur du bandeau et ferait sauter
   tout le contenu sous lui. */
.sib-nav { display: flex; align-items: center; gap: var(--sib-1); flex: 1 1 auto; min-width: 0;
           overflow-x: auto; scrollbar-width: none; }
.sib-nav::-webkit-scrollbar { display: none; }
.sib-nav a {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: var(--sib-2);
  padding: 9px var(--sib-4); min-height: 44px;
  border-radius: var(--sib-r-pill);
  font: 600 var(--sib-fs-sm)/1 var(--sib-font);
  color: var(--sib-blanc); text-decoration: none;
  transition: background .2s;
}
.sib-nav a:hover { background: var(--sib-bandeau-survol); }

/* La section active est une pilule ORANGE a texte bleu. C'est l'emploi le plus
   justifie de l'orange dans l'application : il n'y en a qu'un a l'ecran, et il repond
   a « ou suis-je ». */
.sib-nav a[aria-current="page"] { background: var(--sib-grad-orange); color: var(--sib-on-orange); }

.sib-nav__avenir {
  font-size: var(--sib-fs-xs); font-weight: 600; text-transform: lowercase;
  padding: 2px 8px; border-radius: var(--sib-r-pill);
  border: 1px solid var(--sib-bandeau-filet); color: var(--sib-sur-bandeau-2);
}
.sib-nav a[aria-current="page"] .sib-nav__avenir {
  border-color: var(--sib-on-orange); color: var(--sib-on-orange);
}
/* L'administration se range a droite des modules : ce n'est pas ce qu'on vient faire. */
.sib-nav__service { margin-left: auto; }

/* Le menu de l'utilisateur : profil, « Mon mot de passe », « Se déconnecter ». */
.sib-nav__moi { position: relative; }
.sib-nav__moi > summary { list-style: none; cursor: pointer; white-space: nowrap;
                          display: inline-flex; align-items: center; min-height: 44px;
                          padding: 0 var(--sib-4); border-radius: var(--sib-r-pill);
                          font: 600 var(--sib-fs-sm)/1 var(--sib-font);
                          color: var(--sib-blanc); border: 1px solid var(--sib-bandeau-filet); }
.sib-nav__moi > summary::-webkit-details-marker { display: none; }
.sib-nav__moi > summary::after { content: " ▾"; white-space: pre; }
.sib-nav__moi-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 240px;
                     display: grid; gap: var(--sib-1); padding: var(--sib-3);
                     background: var(--sib-surface); color: var(--sib-ink);
                     border-radius: 12px; box-shadow: 0 8px 24px rgba(7, 16, 56, .18); }
.sib-nav__moi-menu a, .sib-nav__moi-menu button { all: unset; cursor: pointer; padding: 10px 8px; border-radius: 8px;
                     font-size: var(--sib-fs-sm); color: inherit; display: flex; align-items: center; gap: 8px; }
.sib-nav__moi-menu a:hover, .sib-nav__moi-menu button:hover { background: var(--sib-surface-2); }
.sib-nav__moi-menu form { margin: 0; }
.sib-nav__moi-menu .poste-icone { width: 16px; height: 16px; }

@media (max-width: 1100px) { .sib-app-bar__user { display: none; } }
@media (max-width: 700px) {
  .sib-app-bar__haut { gap: var(--sib-2); padding: 0 var(--sib-3); }
  /* Connecte, la place va aux rubriques ; sur la page de connexion, le logo reste. */
  .sib-app-bar:has(.sib-nav) .sib-logo, .sib-app-bar:has(.sib-nav) .sib-app-bar__titre { display: none; }
  .sib-nav__moi > summary { padding: 0 var(--sib-3); max-width: 120px; overflow: hidden; text-overflow: ellipsis; }
}

/* ======================== barre laterale de la rubrique ======================== */

/* Les pages de la rubrique ouverte, comme MyB (16/10/2026). Absente quand la rubrique n'a
   qu'une page : la place va au contenu — c'est le cas de l'atelier, du planning et des affaires. */
.poste-icone { width: 18px; height: 18px; flex-shrink: 0; }
.poste-cadre--laterale { display: flex; align-items: flex-start; }
.poste-cadre--laterale > .sib-page { flex: 1 1 auto; min-width: 0; margin: 0; }
.poste-laterale { flex: 0 0 216px; position: sticky; top: var(--poste-barre-h);
                  height: calc(100vh - var(--poste-barre-h)); overflow-y: auto;
                  display: flex; flex-direction: column; gap: var(--sib-1);
                  padding: var(--sib-4) var(--sib-3); background: var(--sib-surface);
                  border-right: 1px solid var(--sib-border-2); transition: flex-basis .2s; }
.poste-laterale__titre { margin: 0 0 var(--sib-2); padding: 0 var(--sib-3); font-size: var(--sib-fs-xs);
                         font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sib-ink-3);
                         white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.poste-laterale__nav { display: grid; gap: 2px; }
.poste-laterale__lien { display: flex; align-items: center; gap: var(--sib-3); padding: 10px var(--sib-3);
                        border-radius: var(--sib-r-sm); color: var(--sib-ink-2); text-decoration: none;
                        font-size: var(--sib-fs-sm); font-weight: 600; white-space: nowrap; }
.poste-laterale__lien:hover { background: var(--sib-survol); color: var(--sib-ink); }
.poste-laterale__lien[aria-current="page"] { background: var(--sib-surface-2); color: var(--sib-ink);
                                             box-shadow: inset 3px 0 0 var(--sib-orange); }
.poste-laterale__texte { overflow: hidden; text-overflow: ellipsis; }
.poste-laterale__sommaire { display: grid; margin: 2px 0 var(--sib-2) 26px; padding-left: var(--sib-3);
                            border-left: 1px solid var(--sib-border-2); }
.poste-laterale__sommaire a { padding: 6px var(--sib-2); font-size: var(--sib-fs-xs); color: var(--sib-ink-3);
                              text-decoration: none; border-radius: 6px; }
.poste-laterale__sommaire a:hover { color: var(--sib-ink); background: var(--sib-survol); }
.poste-laterale__sommaire a[aria-current] { color: var(--sib-orange-ink); font-weight: 600; }
.poste-laterale__replier { all: unset; cursor: pointer; margin-top: auto; display: flex; align-items: center;
                           gap: var(--sib-3); padding: 10px var(--sib-3); border-radius: var(--sib-r-sm);
                           font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }
.poste-laterale__replier:hover { background: var(--sib-survol); color: var(--sib-ink); }
.poste-laterale__replier:focus-visible, .poste-laterale__lien:focus-visible { outline: 2px solid var(--sib-orange); outline-offset: 1px; }
/* Une ancre ne doit pas finir sous le bandeau colle en haut. */
.poste-cadre--laterale [id] { scroll-margin-top: calc(var(--poste-barre-h) + var(--sib-4)); }

/* Repliee : les icones seules ; le libelle reste dans l'infobulle (title). */
@media (min-width: 801px) {
  .poste-laterale-repliee .poste-laterale { flex-basis: 64px; }
  .poste-laterale-repliee .poste-laterale__texte,
  .poste-laterale-repliee .poste-laterale__sommaire { display: none; }
  .poste-laterale-repliee .poste-laterale__titre { visibility: hidden; }
  .poste-laterale-repliee .poste-laterale__lien,
  .poste-laterale-repliee .poste-laterale__replier { justify-content: center; padding-inline: 0; }
  .poste-laterale-repliee .poste-laterale__replier .poste-icone { transform: rotate(180deg); }
}

/* Petit ecran : la barre laterale devient une rangee de pages au-dessus du contenu. */
@media (max-width: 800px) {
  .poste-cadre--laterale { display: block; }
  .poste-laterale { position: static; height: auto; flex-direction: row; overflow-x: auto;
                    padding: var(--sib-2) var(--sib-3); border-right: 0; border-bottom: 1px solid var(--sib-border-2);
                    scrollbar-width: none; }
  .poste-laterale__titre, .poste-laterale__sommaire, .poste-laterale__replier { display: none; }
  .poste-laterale__nav { display: flex; gap: var(--sib-1); }
}

/* Connexion, mot de passe, acces refuse : une carte etroite au centre. */
.poste-connexion { max-width: 460px; margin: var(--sib-6) auto; }
.poste-connexion .poste-champs { display: grid; gap: var(--sib-3); }
/* Un compte utilisateur dans /Parametres : ses reglages sur une ligne, qui passe a la ligne. */
.poste-compte { display: flex; flex-wrap: wrap; gap: var(--sib-2); align-items: center; margin: 0; }
.poste-compte input, .poste-compte select { min-width: 150px; }
/* La carte des comptes : une ligne par utilisateur, une colonne par reglage, tout aligne en haut,
   a la densite du bureau (champs et boutons de 32 px). */
.poste-comptes td { vertical-align: top; white-space: nowrap; }
.poste-comptes td > b, .poste-comptes__etat { display: inline-block; line-height: 32px; }
.poste-comptes th, .poste-comptes td { padding-left: var(--sib-2); padding-right: var(--sib-2); }
.poste-comptes th { white-space: normal; vertical-align: bottom; }
.poste-comptes input:not([type=checkbox]), .poste-comptes select { height: 32px; min-width: 0; width: 130px; }
.poste-comptes select { width: 145px; }
.poste-comptes .poste-deroulant { min-width: 180px; max-width: 200px; }
.poste-comptes .sib-btn { min-height: 32px; height: 32px; padding: 0 var(--sib-3); font-size: var(--sib-fs-xs); }
.poste-comptes__actions { display: flex; gap: var(--sib-2); margin: 0; }
.poste-comptes .poste-deroulant > summary { height: 32px; line-height: 20px; box-sizing: border-box; }

/* Les menus d'un utilisateur : un deroulant de cases a cocher, le resume dans le bouton ferme. */
.poste-deroulant { position: relative; min-width: 210px; max-width: 280px; }
.poste-deroulant > summary { list-style: none; cursor: pointer; padding: 5px 28px 5px 10px; border: 1px solid var(--sib-border-fort);
                             border-radius: 6px; background: var(--sib-surface); white-space: nowrap; overflow: hidden;
                             text-overflow: ellipsis; position: relative; }
.poste-deroulant > summary::-webkit-details-marker { display: none; }
.poste-deroulant > summary::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.poste-deroulant[open] > summary::after { content: "▴"; }
/* Ouvert DANS la ligne (pas en surimpression) : le tableau defile dans son cadre, qui couperait une liste flottante. */
.poste-deroulant__liste { margin-top: 4px; display: grid; gap: 4px; padding: 8px 12px; background: var(--sib-surface);
                          border: 1px solid var(--sib-border-fort); border-radius: 6px; }
.poste-deroulant__liste .poste-coche { white-space: nowrap; }
.poste-liste-reglee { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--sib-fs-xs);
                      white-space: pre; overflow-x: auto; width: 100%; }

/* Fonctionnalite annoncee mais pas livree : la tuile le montre et ne promet pas de
   clic. Une tuile qui ouvre un ecran vide est pire qu'une tuile en retrait. */
.poste-tuile--inerte {
  border-style: dashed; border-color: var(--sib-border);
  background: var(--sib-surface-2); cursor: default;
}
.poste-tuile--inerte:hover { transform: none; background: var(--sib-surface-2); }
.poste-tuile--inerte .poste-tuile__code { color: var(--sib-ink-2); }

/* ============================================================
   Ergonomie tactile : grandes cibles, peu de defilement
   ------------------------------------------------------------
   Le poste est un ecran mural devant lequel on est debout, souvent avec des
   gants. Deux exigences qui se contredisent : des cibles LARGES (56 px, 64 px
   pour ce qui bouge du stock) et un ecran qu'on n'a pas a faire defiler entre
   deux gestes. La reponse n'est pas de rapetisser les boutons, c'est de
   repartir en COLONNES et de borner ce qui peut grandir — les tableaux
   defilent dans leur carte, pas la page entiere.
   ============================================================ */

/* Cartes plus denses dans le poste que dans un tableau de bord : le padding de
   30 px de la charte coute deux lignes de tableau par bloc. */
.poste .sib-card { padding: var(--sib-4); }
.poste .sib-card__head { margin-bottom: var(--sib-3); }
.poste .sib-page { padding: var(--sib-3); padding-bottom: 96px; }
.poste .sib-grid { gap: var(--sib-3); }

/* Un tableau ne pousse plus la page : il defile sous son en-tete, qui reste
   visible (thead deja sticky). Les hauteurs sont en vh pour suivre l'ecran du
   terminal, du 10 pouces au mural. */
.poste-tableau { max-height: 46vh; overflow: auto; }
.poste-tableau--court { max-height: 30vh; }
.poste-tableau--long { max-height: 62vh; }

/* Grille a deux colonnes des qu'il y a la place (ecran de parametrage). L'ecran 3
   ne s'en sert plus : depuis les retours Paries du 29/09, ses blocs s'empilent en
   pleine largeur (.poste-pile). */
.poste-grille { display: grid; grid-template-columns: 1fr; gap: var(--sib-3); }

@media (min-width: 1000px) {
  .poste-grille { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .poste-grille__large,
  .poste-grille__entete { grid-column: 1 / -1; }
}

/* On reste a DEUX colonnes, meme sur un mural 1920 : a trois, les cartes deviennent
   plus etroites que les tableaux qu'elles portent, et « Qte disponible » ou « Reste »
   se retrouvent coupes hors de vue. Mesure a la capture, pas au raisonnement. */
@media (min-width: 1600px) {
  .poste-tableau { max-height: 54vh; }
}

/* Les cases de fiche se serrent un peu : sur huit cases, c'est une ligne de
   defilement en moins. */
.poste .poste-fiche { grid-template-columns: repeat(auto-fit, minmax(165px, 1fr)); gap: var(--sib-2); }
.poste .poste-case { padding: var(--sib-2) var(--sib-3); }

/* Tuiles de l'ecran 1 : dix lignes doivent tenir sans defilement. On reduit la
   largeur minimale, pas la hauteur — c'est la hauteur qui fait la cible. */
.poste .poste-tuiles { grid-template-columns: repeat(auto-fill, minmax(245px, 1fr)); }
.poste .poste-tuile { min-height: 96px; padding: var(--sib-3); }

/* Journal des consommations : lui aussi borne, sinon dix lots consommes
   repoussent le pied d'ecran hors de vue. */
.poste-journal { max-height: 22vh; overflow: auto; }

/* Ecrans bas (tablette en paysage, 800x600 d'un vieux terminal) : on rend de la
   hauteur en resserrant le bandeau et les tableaux. */
@media (max-height: 800px) {
  .sib-logo img { height: 30px; }
  .poste-tableau { max-height: 38vh; }
  .poste-tableau--court { max-height: 26vh; }
}

/* La case de SAISIE se distingue des cases de lecture : c'est la seule du bloc 1 sur
   laquelle on appuie, et elle portait la meme apparence que les sept autres. */
.poste-case--saisie {
  background: var(--sib-surface);
  border: 2px solid var(--sib-border-fort);
  gap: var(--sib-2);
}
.poste-case--saisie .sib-btn { width: 100%; }

/* Les cases de fiche prenaient la hauteur de la plus grande (celle qui porte le
   bouton), d'ou des blocs a moitie vides : chacune reprend sa hauteur naturelle. */
.poste .poste-fiche { align-items: start; }

/* De quoi ne jamais laisser la derniere carte sous le pied collant. */
.poste .sib-page { padding-bottom: 120px; }

/* ======================== ecran 3, retours Paries du 29/09 ========================
   Les blocs s'empilent en PLEINE LARGEUR : composants et lots se lisent « en longueur »,
   code et libelle sur une ligne, plus aeres qu'a deux colonnes. */
.poste-pile { display: flex; flex-direction: column; gap: var(--sib-3); }

/* Colonne reduite a son contenu : statut, n° d'OF, quantites. La colonne restante
   (article, composant) prend la place. */
.sib-table .poste-col-serree { width: 1%; }

/* Bloc 1 — ligne 1 : statut, OF, reference, libelle ; le rebut en haut a droite. */
.poste-entete { display: flex; flex-direction: column; gap: var(--sib-3); }
.poste-entete__titre {
  display: flex; align-items: center; gap: var(--sib-3); flex-wrap: wrap;
  padding-bottom: var(--sib-3); border-bottom: 1px solid var(--sib-border);
}
.poste-entete__titre .sib-badge { font-size: var(--sib-fs-sm); padding: 8px 14px; }
.poste-entete__of { font-size: var(--sib-fs-h2); font-weight: var(--sib-fw-hero);
                    font-variant-numeric: tabular-nums; }
.poste-entete__ref { font-size: var(--sib-fs-body); color: var(--sib-ink-3);
                     font-variant-numeric: tabular-nums; }
.poste-entete__lib { font-size: var(--sib-fs-h2); font-weight: var(--sib-fw-title);
                     min-width: 0; overflow-wrap: anywhere; }

/* Lignes 2 et 3 : des cases de meme largeur, qui passent a la ligne sur un petit ecran. */
.poste-entete__ligne { display: grid; gap: var(--sib-3);
                       grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.poste-entete__ligne--quantites { grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.poste-entete__pied { display: flex; align-items: center; gap: var(--sib-3); flex-wrap: wrap; }
.poste-entete__rebut { font-size: var(--sib-fs-sm); font-weight: 600; color: var(--sib-warn); }

/* Une case de saisie est un BOUTON entier : on appuie n'importe ou dessus. */
button.poste-case--saisie {
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  min-height: var(--poste-cible-l);
}
button.poste-case--saisie:hover { background: var(--sib-survol); }

.poste-lien {
  margin-left: auto; background: none; border: 0; padding: var(--sib-2) 0; min-height: 44px;
  font: 500 var(--sib-fs-sm)/1.2 var(--sib-font); color: var(--sib-ink-2);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* Pictogramme REBUT : discret tant qu'il n'y a pas de rebut, marque quand il y en a un. */
.poste-rebut {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--sib-2);
  min-height: var(--poste-cible); padding: 0 var(--sib-4);
  font: 600 var(--sib-fs-sm)/1 var(--sib-font); text-transform: uppercase; letter-spacing: .06em;
  color: var(--sib-ink-2); background: var(--sib-surface);
  border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r-pill); cursor: pointer;
}
.poste-rebut:hover { color: var(--sib-crit); border-color: var(--sib-crit-br); }
.poste-rebut--actif { color: var(--sib-crit); background: var(--sib-crit-bg); border-color: var(--sib-crit-br); }
.poste-rebut:disabled { opacity: .45; cursor: not-allowed; }

/* Bloc 2 : code et libelle du composant sur UNE ligne. */
.poste-tactile .sib-table td:first-child { white-space: nowrap; }
.poste-composant { display: inline-flex; align-items: baseline; gap: var(--sib-3); }
.poste-composant span { font-weight: 500; color: var(--sib-ink-2); white-space: normal; }

/* Annulation de la saisie d'un composant : petit, discret, mais touchable. */
.poste-annuler {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; padding: 0;
  color: var(--sib-ink-3); background: transparent;
  border: 1px solid transparent; border-radius: var(--sib-r-pill); cursor: pointer;
}
.poste-annuler:hover:not(:disabled) { color: var(--sib-crit); border-color: var(--sib-crit-br); }
.poste-annuler:disabled { opacity: .3; cursor: default; }

/* Bloc 3 : lignes aerees. */
.poste-tactile .poste-table-lots td { padding-top: var(--sib-4); padding-bottom: var(--sib-4); }

/* Fenetre : messages bloquants et saisie du rebut. Elle FLOTTE, comme le pave. */
.poste-fenetre {
  width: min(560px, 100%); max-height: calc(100vh - 2 * var(--sib-4)); overflow: auto;
  display: flex; flex-direction: column; gap: var(--sib-4);
  padding: var(--sib-5); background: var(--sib-surface);
  border: var(--sib-bd); border-top: 6px solid var(--sib-border-fort);
  border-radius: var(--sib-r); box-shadow: var(--sib-shadow-pop);
}
.poste-fenetre--crit { border-top-color: var(--sib-crit-br); }
.poste-fenetre--warn { border-top-color: var(--sib-warn-br); }
.poste-fenetre__titre { display: flex; align-items: center; gap: var(--sib-3);
                        font-size: var(--sib-fs-h2); font-weight: var(--sib-fw-title); }
.poste-fenetre--crit .poste-fenetre__titre { color: var(--sib-crit); }
.poste-fenetre--warn .poste-fenetre__titre { color: var(--sib-warn); }
.poste-fenetre__corps { display: flex; flex-direction: column; gap: var(--sib-3);
                        font-size: var(--sib-fs-body); }
.poste-fenetre__corps p { margin: 0; }
.poste-fenetre__corps ul { margin: 0; padding-left: var(--sib-5);
                           display: flex; flex-direction: column; gap: var(--sib-2); }
.poste-fenetre__actions { display: flex; justify-content: flex-end; gap: var(--sib-3); flex-wrap: wrap; }
.poste-fenetre__erreur { color: var(--sib-crit); font-weight: 600; min-height: 1.2em; }

/* Motifs de rebut : des tuiles, pas une liste deroulante — au doigt, avec des gants. */
.poste-motifs { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: var(--sib-2); }
.poste-motif {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  min-height: var(--poste-cible); padding: var(--sib-2) var(--sib-3);
  font: 500 var(--sib-fs-sm)/1.2 var(--sib-font); color: var(--sib-ink); text-align: left;
  background: var(--sib-surface-2); border: 2px solid var(--sib-border); border-radius: var(--sib-r-sm);
  cursor: pointer;
}
.poste-motif strong { font-size: var(--sib-fs-body); }
.poste-motif--choisi { border-color: var(--sib-orange); background: var(--sib-survol);
                       box-shadow: inset 4px 0 0 0 var(--sib-orange); }

/* Texte pour lecteur d'ecran seulement (en-tete de la colonne d'annulation). */
.sib-sr { position: absolute; width: 1px; height: 1px; overflow: hidden;
          clip: rect(0 0 0 0); white-space: nowrap; }

/* ---------------- ecran 1 : la LIGNE doit sauter aux yeux ---------------- */

/* Retour Pariès du 29/09 : le CODE de la ligne en grand (« COND »), le libellé dessous
   en plus petit (« Conditionnement »). C'est le code qu'on lit sur l'OF papier. */
.poste-tuile__code {
  font-size: var(--sib-fs-h2);
  font-weight: var(--sib-fw-title);
  line-height: var(--sib-lh-tight);
  letter-spacing: .02em;
  color: var(--sib-ink);
}
.poste-tuile__libelle {
  font-size: var(--sib-fs-sm);
  color: var(--sib-ink-2);
  /* Un libellé long se replie plutôt que de sortir du cadre ; la page est en
     lang="fr", la césure tombe au bon endroit. */
  hyphens: auto;
  overflow-wrap: anywhere;
  max-width: 100%;
}

/* Une ligne sans OF reste ouvrable — on peut vouloir y regarder — mais elle ne se
   dispute pas le regard avec celles qui ont du travail. */
.poste-tuile--vide { border-color: var(--sib-border); background: var(--sib-surface-2); }
.poste-tuile--vide .poste-tuile__code { color: var(--sib-ink-2); }

.poste-atelier-bloc + .poste-atelier-bloc { margin-top: var(--sib-4); }
.poste-atelier-titre {
  display: flex; align-items: baseline; gap: var(--sib-3); flex-wrap: wrap;
  margin: 0 0 var(--sib-2);
  font-size: var(--sib-fs-h3);
}
.poste-atelier-titre__libelle { color: var(--sib-ink-2); font-weight: 500; }
.poste-atelier-titre__compte {
  margin-left: auto;
  font-size: var(--sib-fs-sm); font-weight: 500; color: var(--sib-ink-3);
}

/* ---------------- fil d'Ariane ---------------- */

/* Il sert deux choses a la fois : dire OU ON EST — un operateur qui revient d'une
   machine ne sait plus quel OF est ouvert — et remonter d'un cran sans chercher un
   bouton. D'ou des etapes qui sont de vraies cibles tactiles (44 px), et non du
   texte souligne qu'on rate au doigt. */
.poste-fil {
  display: flex; align-items: center; gap: var(--sib-1);
  flex-wrap: wrap;
  margin-bottom: var(--sib-3);
}
/* Texte CENTRÉ dans sa bulle (retour Pariès du 29/09) : « baseline » collait le texte
   en haut d'une pastille de 44 px. Centrage vertical et horizontal, interligne de 1
   pour que la hauteur de ligne n'ajoute pas un décalage, et filet de 1,5 px plutôt
   que 2 pour affiner l'encadré. */
.poste-fil__etape {
  display: inline-flex; align-items: center; justify-content: center; gap: var(--sib-2);
  min-height: 44px; padding: 0 var(--sib-4);
  border-radius: var(--sib-r-pill);
  font: 600 var(--sib-fs-sm)/1 var(--sib-font);
  text-align: center;
  color: var(--sib-ink-2); text-decoration: none;
  border: 1.5px solid transparent;
}
a.poste-fil__etape { border-color: var(--sib-border); background: var(--sib-surface); }
a.poste-fil__etape:hover { background: var(--sib-survol); color: var(--sib-ink); }

/* L'etape courante se voit et ne se touche pas : filet fort, pas de fond cliquable. */
.poste-fil__etape--courante {
  color: var(--sib-ink);
  border-color: var(--sib-border-fort);
  background: var(--sib-surface-2);
}
.poste-fil__detail { font-weight: 500; font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }
.poste-fil__separateur { color: var(--sib-ink-3); font-size: var(--sib-fs-h3); }

@media (max-height: 800px) {
  .poste-fil { margin-bottom: var(--sib-2); }
  .poste-fil__etape { min-height: 40px; padding: 0 var(--sib-3); }
}

/* ======================== planification ========================

   Ce n'est PAS un ecran ganté : le chef d'atelier n'a ni les memes gestes ni la meme
   distance de lecture que l'operateur de ligne. Cibles a 40 px et non 56, densite de
   tableau assumee, pas de pave numerique. Aucune couleur en dur ici non plus : le
   theme reste echangeable d'un client a l'autre. */

.plan { display: grid; gap: var(--sib-4); }

.plan-bandeau__reglages {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sib-3);
}
.plan-bandeau__reglages .sib-champ { flex: 0 1 160px; }

.plan-maille {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-3);
  margin: 0; padding: 0 0 0 var(--sib-3);
  border: 0; border-left: 2px solid var(--sib-border);
}
.plan-maille legend { padding: 0; }
.plan-maille label {
  display: inline-flex; align-items: center; gap: var(--sib-2);
  min-height: 40px;
  font-size: var(--sib-fs-sm); font-weight: 600; color: var(--sib-ink);
  cursor: pointer;
}

.plan-compteurs {
  display: flex; flex-wrap: wrap; gap: var(--sib-2);
  margin-top: var(--sib-3);
}

/* La file, puis la charge a droite sur un grand ecran. Le perimetre n'est plus une colonne :
   c'est un deroulant de la ligne des filtres (22/10/2026), toute la largeur va a la file.
   La charge garde une largeur plancher pour que ses barres restent lisibles. */
.plan-colonnes { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--sib-4); }

@media (min-width: 1500px) {
  .plan-colonnes { grid-template-columns: minmax(0, 1fr) minmax(300px, .62fr); }
}

/* Le deroulant du perimetre : ferme, un champ qui resume ; ouvert, l'arbre en surimpression. */
.plan-filtres .plan-filtres__perimetre { flex: 0 1 230px; position: relative; }
.plan-deroulant > summary {
  list-style: none; cursor: pointer; position: relative;
  /* Meme gabarit que les listes voisines (Statut d'OF, Operation...) : hauteur, bord, rayon, texte. */
  display: flex; align-items: center;
  min-height: var(--poste-cible); padding: 0 34px 0 16px; box-sizing: border-box;
  border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r); background: var(--sib-surface);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; font-size: var(--sib-fs-body);
}
.plan-deroulant > summary::-webkit-details-marker { display: none; }
.plan-deroulant__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.plan-deroulant > summary::after { content: "▾"; position: absolute; right: 12px; top: 50%; transform: translateY(-50%); }
.plan-deroulant[open] > summary::after { content: "▴"; }
.plan-deroulant__panneau {
  position: absolute; z-index: 30; top: calc(100% + 4px); left: 0;
  width: max(100%, 340px); max-height: 60vh; overflow: auto;
  padding: var(--sib-3); background: var(--sib-surface);
  border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-sm); box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.plan-deroulant__pied { display: flex; align-items: center; justify-content: space-between; gap: var(--sib-2);
  margin-top: var(--sib-3); padding-top: var(--sib-2); border-top: 1px solid var(--sib-border); }

/* ---------------- 0. l'arbre de perimetre ---------------- */

.plan-arbre { list-style: none; margin: 0; padding: 0; }
.plan-arbre--enfants { margin-left: var(--sib-4); border-left: 2px solid var(--sib-border); padding-left: var(--sib-2); }

.plan-noeud__ligne {
  display: flex; align-items: center; gap: var(--sib-2);
  min-height: 40px; padding: 2px var(--sib-2);
  border-radius: var(--sib-r-sm);
  font-size: var(--sib-fs-sm);
  cursor: pointer;
}
.plan-noeud__ligne:hover { background: var(--sib-survol); }
.plan-noeud__nom { flex: 1 1 auto; min-width: 0; }
.plan-noeud--atelier > .plan-noeud__ligne { font-weight: 700; }
.plan-noeud--centre > .plan-noeud__ligne { font-weight: 600; }
.plan-noeud__code { font-weight: 400; color: var(--sib-ink-3); }
.plan-noeud__compte { display: inline-flex; align-items: center; gap: var(--sib-1); }
.plan-noeud__nombre {
  min-width: 24px; padding: 2px 6px;
  border-radius: var(--sib-r-pill);
  background: var(--sib-surface-2); color: var(--sib-ink-2);
  font-size: var(--sib-fs-xs); font-weight: 600; text-align: center;
}

/* ---------------- A. la file ---------------- */

.plan-groupe + .plan-groupe { margin-top: var(--sib-5); }
.plan-groupe__titre {
  display: flex; align-items: baseline; gap: var(--sib-3);
  margin: 0 0 var(--sib-2);
  font-size: var(--sib-fs-h3);
}
.plan-groupe__compte { margin-left: auto; font-size: var(--sib-fs-sm); color: var(--sib-ink-3); }

/* La file ne doit PAS avoir d'ascenseur horizontal : dans une colonne d'ecran, il cache
   la derniere colonne — l'etat — qui est justement celle qu'on vient lire. D'ou six
   colonnes au lieu de neuf, ce qui va ensemble dans la meme cellule sur deux lignes, et
   le « nowrap » general des tableaux levé ici. */
.plan-file .sib-table td { white-space: normal; vertical-align: top; }
.plan-file .sib-table th { white-space: nowrap; }
.plan-file .sib-table td.sib-num { white-space: nowrap; }

/* Ces deux colonnes se serrent sur leur contenu ; c'est l'article qui prend la place
   restante, parce que c'est lui qu'on lit en diagonale. */
.plan-cel-of, .plan-cel-creneau { width: 1%; }
.plan-cel-article { min-width: 14ch; }

/* La reference d'OF et la date ne se coupent jamais en deux — le reste de la cellule,
   si : c'est ce qui remplace l'ascenseur. */
.plan-cel-of .poste-mono, .plan-cel-creneau .poste-mono { white-space: nowrap; }

/* Un peu plus serre que le tableau de l'atelier : ici on compare des lignes entre elles,
   on ne vise pas au doigt ganté. */
.plan-file .sib-table th, .plan-file .sib-table td { padding: 9px var(--sib-2); }

/* La deuxieme ligne d'une cellule : l'operation, le code article, la date au plus tard.
   Plus petite et plus pale — elle precise, elle ne se dispute pas le regard. */
.plan-cel__sous {
  display: block;
  margin-top: 2px;
  font-size: var(--sib-fs-xs);
  font-weight: 500;
  color: var(--sib-ink-3);
}
.plan-cel__unite { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }

/* ---------------- mode ordonnancement ---------------- */

/* Le formulaire de placement n'a aucun champ visible : tout ce qu'il soumet vit dans la
   file et le rejoint par « form= ». Il ne doit donc occuper aucune place. */
.plan-placer { display: contents; }

.plan-saisie { display: block; margin-bottom: var(--sib-1); }
.plan-saisie > span {
  display: block;
  font-size: var(--sib-fs-xs); font-weight: 600; color: var(--sib-ink-3);
}
.plan-saisie input {
  width: 100%; min-width: 15ch;
  min-height: 36px; padding: 4px var(--sib-2);
  border: 2px solid var(--sib-border); border-radius: var(--sib-r-sm);
  background: var(--sib-surface); color: var(--sib-ink);
  font: 600 var(--sib-fs-sm)/1.2 var(--sib-font);
}
.plan-saisie input:focus-visible { outline: none; box-shadow: var(--sib-focus); }

.plan-gestes { display: flex; flex-wrap: wrap; gap: var(--sib-1); margin-top: var(--sib-2); }
.plan-gestes .sib-btn { min-height: 34px; padding: 4px var(--sib-3); font-size: var(--sib-fs-xs); }

/* Les sequences sans poste : une pile de travail, pas une anomalie. Filet pointille
   pour dire « rien ne les tient encore » sans crier a l'erreur. */
.plan-groupe--libre {
  padding: var(--sib-3);
  border: 2px dashed var(--sib-border-fort);
  border-radius: var(--sib-r-sm);
  background: var(--sib-surface-2);
}

/* ---------------- A bis. le Gantt ----------------

   Pas de bibliotheque : des positions en POURCENTAGE de l'horizon, calculees cote
   serveur (CalculPlanning.Gantt) et posees en « left » / « width ». Consequence voulue :
   le Gantt s'imprime, se lit sans JavaScript, et son placement se teste sans navigateur. */

.plan-gantt__echelle,
.plan-gfond { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; }

.plan-gantt__echelle {
  margin-left: 150px;
  padding-bottom: var(--sib-1);
  border-bottom: 2px solid var(--sib-border);
  font-size: var(--sib-fs-xs); color: var(--sib-ink-3); text-align: center;
}
.plan-gcol { overflow: hidden; white-space: nowrap; }
.plan-gcol--ferme { opacity: .55; }

.plan-gligne { display: flex; align-items: stretch; gap: var(--sib-2); margin-top: var(--sib-2); }
.plan-gligne__nom {
  flex: 0 0 142px;
  display: flex; flex-direction: column; gap: 2px; justify-content: center;
  font-size: var(--sib-fs-sm); font-weight: 600;
  overflow-wrap: anywhere;
}

/* La piste : sa hauteur suit le nombre de VOIES, donc deux sequences qui se chevauchent
   ne se cachent pas l'une l'autre. C'est tout l'interet du Gantt — le conflit doit se
   voir, pas se deviner. */
.plan-gpiste {
  position: relative; flex: 1 1 auto; min-width: 0;
  height: calc(var(--voies, 1) * 26px + 4px);
  border: 1px solid var(--sib-border); border-radius: var(--sib-r-sm);
  background: var(--sib-surface);
}
.plan-gfond { position: absolute; inset: 0; }
.plan-gfond > span { border-right: 1px solid var(--sib-grid); }
.plan-gfond > span:last-child { border-right: 0; }
.plan-gfond .plan-gfond--ferme {
  background: repeating-linear-gradient(
    45deg, var(--sib-surface-2), var(--sib-surface-2) 3px, var(--sib-page) 3px, var(--sib-page) 6px);
}

/* L'instant present. Il n'est trace QUE s'il tombe dans l'horizon : un trait colle a un
   bord ferait croire a un present qui n'en est pas un. */
.plan-gmaintenant {
  position: absolute; top: 0; bottom: 0; width: 2px;
  background: var(--sib-orange);
  z-index: 2;
}

.plan-gbarre {
  position: absolute; height: 22px;
  display: flex; align-items: center;
  padding: 0 6px;
  border: 2px solid transparent; border-radius: var(--sib-r-sm);
  font: 600 var(--sib-fs-xs)/1 var(--sib-font);
  text-decoration: none; overflow: hidden; white-space: nowrap;
  z-index: 1;
}
.plan-gbarre:hover { filter: brightness(.96); }
.plan-gbarre:focus-visible { outline: none; box-shadow: var(--sib-focus); z-index: 3; }
.plan-gbarre__texte { overflow: hidden; text-overflow: ellipsis; }

/* Meme palette que les badges d'etat : un retard se reconnait a la meme teinte dans la
   file et dans le Gantt, et le glyphe voyage avec la barre — une couleur seule ne suffit
   ni sur un mural mal regle, ni pour un chef d'atelier daltonien. */
.plan-gbarre--ok      { background: var(--sib-good-bg);    border-color: var(--sib-good-br);    color: var(--sib-good); }
.plan-gbarre--retard  { background: var(--sib-warn-bg);    border-color: var(--sib-warn-br);    color: var(--sib-warn); }
.plan-gbarre--figee   { background: var(--sib-serious-bg); border-color: var(--sib-serious-br); color: var(--sib-serious); }
.plan-gbarre--neutre  { background: var(--sib-neutre-bg);  border-color: var(--sib-neutre-br);  color: var(--sib-neutre); }

/* Une sequence qui deborde de l'horizon : le bord concerne est coupe droit plutot
   qu'arrondi. La forme dit « ca continue au-dela », sans texte. */
.plan-gbarre--avant { border-top-left-radius: 0; border-bottom-left-radius: 0; border-left-style: dashed; }
.plan-gbarre--apres { border-top-right-radius: 0; border-bottom-right-radius: 0; border-right-style: dashed; }

.plan-gattente { margin-top: var(--sib-5); padding-top: var(--sib-4); border-top: 2px dashed var(--sib-border-fort); }
.plan-gpuces { display: flex; flex-wrap: wrap; gap: var(--sib-2); margin-top: var(--sib-2); }
.plan-gpuce {
  padding: 4px var(--sib-3);
  border: 2px solid transparent; border-radius: var(--sib-r-pill);
  font: 600 var(--sib-fs-xs)/1.2 var(--sib-font);
}

/* Le Gantt a besoin de largeur : en mode Gantt, le plan de charge passe dessous plutot
   que de lui disputer la place. */
@media (min-width: 1500px) {
  .plan-colonnes--large { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 999px) {
  .plan-gantt__echelle { margin-left: 0; }
  .plan-gligne { flex-direction: column; gap: var(--sib-1); }
  .plan-gligne__nom { flex: none; }
}

/* ---------------- fusion de la maquette de Loic (08/10/2026) ----------------
   Navigation d'horizon, filtres, calendrier, glisser-deposer a la souris. Memes jetons
   que le reste : aucune couleur en dur. */

.plan-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.plan-nav {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-2);
  margin-bottom: var(--sib-3);
}
.plan-nav .sib-btn { min-height: 40px; padding: 6px var(--sib-3); }
.plan-nav__zooms { display: inline-flex; flex-wrap: wrap; gap: 2px; margin-left: var(--sib-2);
  padding: 3px; border: 1px solid var(--sib-border); border-radius: var(--sib-r-pill); }
.plan-zoom {
  display: inline-flex; align-items: center; min-height: 34px; padding: 0 var(--sib-3);
  border-radius: var(--sib-r-pill);
  font-size: var(--sib-fs-sm); font-weight: 600; color: var(--sib-bleu); text-decoration: none;
}
.plan-zoom:hover { background: var(--sib-survol); }
.plan-zoom[aria-current="true"] { background: var(--sib-bleu); color: var(--sib-blanc); }

/* Les compteurs sont des cases a cocher habillees en badges : cochee, la pastille est
   cernee. La case elle-meme reste dans le flux du clavier. */
fieldset.plan-compteurs { border: 0; padding: 0; margin: var(--sib-3) 0 0; }
.plan-etat { position: relative; cursor: pointer; user-select: none; }
.plan-etat input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.plan-etat:has(input:checked) { box-shadow: 0 0 0 2px currentColor; }
.plan-etat:has(input:focus-visible) { box-shadow: var(--sib-focus); }

.plan-filtres {
  display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sib-3);
  margin-top: var(--sib-3); padding-top: var(--sib-3);
  border-top: 1px solid var(--sib-border);
}
.plan-filtres .sib-champ { flex: 0 1 190px; }
.plan-filtres .plan-filtres__recherche { flex: 1 1 260px; }
.plan-filtres__actions { display: inline-flex; flex-wrap: wrap; gap: var(--sib-2); margin-left: auto; }
.plan-filtres__actions .sib-btn { min-height: 40px; padding: 6px var(--sib-3); font-size: var(--sib-fs-sm); }
.plan-filtres__bilan { margin: var(--sib-2) 0 0; }

/* Graduations horaires : meme marge que l'echelle des jours, pour tomber au meme endroit. */
.plan-gantt__heures {
  position: relative; height: 16px; margin-left: 150px;
  font-size: var(--sib-fs-xs); color: var(--sib-ink-3);
}
.plan-gantt__heures > span { position: absolute; top: 0; transform: translateX(-50%); white-space: nowrap; }

/* Le glisser n'existe qu'a la souris : l'astuce et la main ne s'affichent que la. */
.plan-gantt__astuce { display: none; }
/* Les bords d'une barre : on tire le gauche pour le debut, le droit pour la fin (22/10/2026).
   Invisibles au doigt ; a la souris, une poignee apparait au survol. */
.plan-gbarre__bord { display: none; }
@media (hover: hover) and (pointer: fine) {
  .plan-gantt__astuce { display: inline; }
  .plan-gbarre[data-deplacable="1"] { cursor: grab; }
  .plan-gbarre__bord {
    display: block; position: absolute; top: 0; bottom: 0; width: 8px; cursor: ew-resize;
  }
  .plan-gbarre__bord--debut { left: 0; }
  .plan-gbarre__bord--fin { right: 0; }
  .plan-gbarre:hover .plan-gbarre__bord::after {
    content: ""; position: absolute; top: 4px; bottom: 4px; left: 3px; width: 2px;
    border-radius: 1px; background: currentColor; opacity: .55;
  }
}
/* Le brouillon du planning (22/10/2026) : le bandeau, et les sequences deplacees pas encore validees. */
.plan-brouillon { border-color: var(--sib-orange); }
.plan-brouillon__tete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-2) var(--sib-4); }
.plan-brouillon__gestes { display: inline-flex; gap: var(--sib-2); margin-left: auto; }
.plan-brouillon__gestes .sib-btn { min-height: 40px; padding: 6px var(--sib-4); }
.plan-brouillon__liste { margin: var(--sib-2) 0 0; padding-left: var(--sib-5); font-size: var(--sib-fs-sm); columns: 2 320px; }
.plan-badge-brouillon { background: var(--poste-aproduire-bg); border-color: var(--sib-orange); color: var(--sib-orange-ink); }
.plan-gbarre--brouillon { outline: 2px dashed var(--sib-orange); outline-offset: 1px; }
.plan-gbarre--glisse {
  cursor: grabbing; z-index: 4; opacity: .9;
  box-shadow: 0 4px 12px rgba(0, 0, 0, .25);
}
.plan-bulle {
  position: absolute; z-index: 50; pointer-events: none;
  padding: 4px var(--sib-2); border-radius: var(--sib-r-sm);
  background: var(--sib-bleu); color: var(--sib-blanc);
  font: 600 var(--sib-fs-xs)/1.2 var(--sib-font);
}

.plan-dialogue {
  max-width: 460px; width: calc(100% - 32px);
  padding: var(--sib-5); border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r);
  background: var(--sib-surface); color: var(--sib-ink);
}
.plan-dialogue::backdrop { background: rgba(7, 16, 56, .45); }
.plan-dialogue h2 { margin: 0 0 var(--sib-3); font-size: var(--sib-fs-h3); }
.plan-dialogue p { margin: 0 0 var(--sib-3); line-height: 1.6; }
.plan-dialogue__note { font-size: var(--sib-fs-sm); color: var(--sib-warn); }
.plan-dialogue__boutons { display: flex; justify-content: flex-end; gap: var(--sib-2); }

/* Le calendrier : sept colonnes egales. En dessous de 760 px il defile a l'horizontale
   plutot que d'ecraser ses cases — une case de 40 px ne montre plus rien. */
.plan-calendrier { overflow-x: auto; }
.plan-cal { min-width: 760px; }
.plan-cal__tete, .plan-cal__semaine { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.plan-cal__tete {
  padding-bottom: var(--sib-1); border-bottom: 2px solid var(--sib-border);
  font-size: var(--sib-fs-xs); font-weight: 700; text-transform: uppercase; color: var(--sib-ink-3); text-align: center;
}
.plan-cal__semaine { margin-top: 4px; }
.plan-cal__jour {
  display: flex; flex-direction: column; gap: 3px; min-height: 92px; min-width: 0;
  padding: 4px; border: 1px solid var(--sib-border); border-radius: var(--sib-r-sm);
  background: var(--sib-surface);
}
.plan-cal__jour--ferme {
  background: repeating-linear-gradient(
    45deg, var(--sib-surface-2), var(--sib-surface-2) 3px, var(--sib-page) 3px, var(--sib-page) 6px);
}
.plan-cal__jour--hors { opacity: .4; }
.plan-cal__jour--auj { border: 2px solid var(--sib-orange); }
.plan-cal__date { display: flex; align-items: center; font-size: var(--sib-fs-xs); font-weight: 700; color: var(--sib-ink-2); }
.plan-cal__puce {
  display: block; min-width: 0; padding: 3px 5px;
  border: 2px solid transparent; border-radius: var(--sib-r-sm);
  font: 600 var(--sib-fs-xs)/1.25 var(--sib-font); text-decoration: none;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.plan-cal__puce:focus-visible { outline: none; box-shadow: var(--sib-focus); }
.plan-cal__detail { display: block; overflow: hidden; text-overflow: ellipsis; font-weight: 500; opacity: .85; }

/* ---------------- B. le plan de charge ---------------- */

.plan-charge-ligne + .plan-charge-ligne {
  margin-top: var(--sib-4);
  padding-top: var(--sib-4);
  border-top: 1px solid var(--sib-border);
}
.plan-charge-ligne__tete {
  display: flex; align-items: baseline; gap: var(--sib-3); flex-wrap: wrap;
  margin-bottom: var(--sib-2);
}
.plan-charge-ligne__nom { font-weight: 600; }
.plan-charge-ligne__meta { margin-left: auto; font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }

.plan-barres {
  display: flex; align-items: flex-end; gap: 4px;
  margin-top: var(--sib-2);
  overflow-x: auto;
}
/* Les barres se serrent plutot que de declencher un ascenseur : dix jours doivent tenir
   dans la colonne. En dessous de 20 px l'etiquette du jour ne se lit plus, et c'est
   seulement la que le defilement reprend la main. */
.plan-barre { flex: 1 1 0; min-width: 20px; text-align: center; }

/* Le fut donne l'echelle : sans capacite, le plein reste a zero et c'est la valeur
   chiffree qui informe. Une barre sans plafond ne doit pas faire croire a un taux. */
.plan-barre__fut {
  height: 72px;
  display: flex; align-items: flex-end;
  border: 1px solid var(--sib-border);
  border-radius: var(--sib-r-sm);
  background: var(--sib-surface-2);
  overflow: hidden;
}
.plan-barre__plein { width: 100%; background: var(--sib-series-1); }
.plan-barre--sur .plan-barre__plein { background: var(--sib-warn); }

/* La surcharge porte une COULEUR, un mot (l'infobulle) et une FORME : le liseré en
   haut du fut. Sur un mural mal regle, ou pour un chef d'atelier daltonien, la teinte
   seule ne suffit pas. */
.plan-barre--sur .plan-barre__fut { border-color: var(--sib-warn-br); border-top-width: 3px; }

/* Un seau sans jour ouvre : le fut est hachure plutot que legende. C'est ce qui permet
   de supprimer le nom du jour sous la barre — et donc l'ascenseur horizontal. Le libelle
   complet reste dans l'infobulle. */
.plan-barre--ferme .plan-barre__fut {
  background: repeating-linear-gradient(
    45deg, var(--sib-surface-2), var(--sib-surface-2) 3px, var(--sib-page) 3px, var(--sib-page) 6px);
}
.plan-barre--ferme .plan-barre__jour { color: var(--sib-ink-3); opacity: .65; }

.plan-barre__valeur { display: block; font-size: var(--sib-fs-xs); font-weight: 600; color: var(--sib-ink-2); }
.plan-barre__jour {
  display: block;
  font-size: var(--sib-fs-xs); color: var(--sib-ink-3);
  white-space: nowrap;
}

/* ===================== ecran 2 bis : rebut et recyclage ===================== */

/* « Saisie rebuts » / « Saisie recyclage » : en haut a droite de l'ecran 2, et bascule
   de l'ecran 2 bis. Meme forme que le pictogramme de rebut de l'ecran 3. */
.poste-modes { display: flex; gap: var(--sib-2); flex-wrap: wrap; margin-left: auto; }
.poste-mode {
  display: inline-flex; align-items: center; gap: var(--sib-2);
  min-height: var(--poste-cible); padding: 0 var(--sib-4);
  font: 600 var(--sib-fs-sm)/1 var(--sib-font); text-transform: uppercase; letter-spacing: .06em;
  color: var(--sib-ink-2); background: var(--sib-surface); text-decoration: none;
  border: 2px solid var(--sib-border-fort); border-radius: var(--sib-r-pill);
}
.poste-mode:hover { color: var(--sib-orange); border-color: var(--sib-orange); }
.poste-mode--actif { color: var(--sib-orange); border-color: var(--sib-orange); background: var(--sib-survol); }

/* Numero d'etape, comme les blocs de la maquette. */
.poste-etape { display: flex; align-items: center; gap: var(--sib-2); margin: 0 0 var(--sib-3);
               font-size: var(--sib-fs-h3); font-weight: 600; }
.poste-etape__n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 1.7em; height: 1.7em; margin-right: var(--sib-2); border-radius: var(--sib-r-pill);
  font-size: .8em; font-weight: 700; color: var(--sib-on-orange); background: var(--sib-orange);
}
.poste-lien-ligne { color: inherit; text-decoration: none; }

.poste-resume { display: flex; flex-wrap: wrap; gap: var(--sib-2) var(--sib-5); align-items: baseline;
                margin-bottom: var(--sib-4); font-size: var(--sib-fs-sm); color: var(--sib-ink-3); }
.poste-resume b { color: var(--sib-ink); font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-weight: 600; }

/* La quantite et son unite sur une ligne : le champ ne prend pas toute la largeur. */
.poste-saisie-unite { display: flex; align-items: center; gap: var(--sib-2); }
.sib-champ .poste-quantite, .poste-quantite { width: 9rem; flex: 0 0 auto; text-align: right; font-size: var(--sib-fs-h3); font-weight: 600; }
.poste-quantite--ligne { width: 7rem; font-size: var(--sib-fs-body); }
.poste-quantite:disabled { opacity: .45; }
.poste-erreur { color: var(--sib-crit); font-weight: 600; }

/* Motifs : des tuiles a cocher, au doigt — le bouton radio reste la pour le clavier. */
.poste-motifs-choix { border: 0; padding: 0; margin: var(--sib-4) 0 0; display: flex; flex-direction: column; gap: var(--sib-2); }
.poste-motif { position: relative; }
.poste-motif input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.poste-motif:has(input:checked) { border-color: var(--sib-orange); background: var(--sib-survol);
                                  box-shadow: inset 4px 0 0 0 var(--sib-orange); }
.poste-motif:has(input:focus-visible) { outline: 2px solid var(--sib-orange); outline-offset: 2px; }

.poste-coche-ligne { width: 28px; height: 28px; accent-color: var(--sib-orange); cursor: pointer; }
.poste-table-recyclage tbody tr { cursor: default; }
.poste-tactile .poste-table-recyclage td:first-child { min-width: 0; width: 1%; }
.poste-table-recyclage tr.poste-ligne--inerte td { color: var(--sib-ink-3); }
.poste-choix-lot { min-height: 44px; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; }

/* ============== ecran 3 resserre sur la maquette v1.3 de Mathieu (12/10/2026) ==============
   Retour du 12/10 : « c'est trop gros ». Sur un portable (745 px utiles), le bloc 1 prenait
   la moitie de l'ecran et les composants passaient sous le pied. La maquette tient en-tete,
   composants, lots et pied sur un ecran : on reprend ses proportions, sans descendre sous
   44 px pour ce qui se touche du doigt. */
.poste-pile { gap: var(--sib-2); }
.poste .poste-pile .sib-card { padding: var(--sib-3) var(--sib-4); }
.poste .poste-pile .sib-card__head { margin-bottom: var(--sib-2); }
.poste .poste-pile .sib-card__head h2 { font-size: var(--sib-fs-h3); }

/* Ligne 1 : statut, OF, article — et le rebut, ramene a 44 px. */
.poste-entete { gap: var(--sib-3); }
.poste-entete__titre { padding-bottom: var(--sib-2); }
.poste-entete__titre .sib-badge { font-size: var(--sib-fs-xs); padding: 4px 10px; }
.poste .poste-pile .poste-rebut { min-height: 44px; padding: 0 var(--sib-3); }

/* Ligne 2 : cinq colonnes, comme la maquette (emplacement, lot, DLUO, pieces, etiquettes). */
.poste-entete__ligne--champs { grid-template-columns: repeat(auto-fit, minmax(130px, 1fr));
                               align-items: start; }
.poste-entete .sib-champ { gap: 2px; }
.poste-entete .sib-champ input { min-height: 44px; padding: 0 var(--sib-3); }
.poste-lecture { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.poste-lecture__valeur { display: flex; align-items: center; gap: var(--sib-1); min-height: 44px;
                         font-size: var(--sib-fs-h3); font-weight: 600; font-variant-numeric: tabular-nums; }
.poste-entete .poste-case--saisie { min-height: 0; gap: 0; padding: var(--sib-1) var(--sib-3); }
.poste-entete .poste-case--saisie .poste-case__valeur { font-size: var(--sib-fs-h3); }

/* Ligne 3 : les quantites de l'OF en lecture, sans cadre ; la quantite declaree reste
   la case a toucher, un peu plus grande. Le reste de l'OF se lit sur la meme ligne. */
.poste-entete__ligne--quantites {
  grid-template-columns: auto auto minmax(220px, 280px) 1fr; align-items: end;
  gap: var(--sib-3) var(--sib-6); padding-top: var(--sib-3); border-top: 1px dashed var(--sib-border);
}
.poste-entete__ligne--quantites .poste-lecture__valeur { min-height: 0; font-size: var(--sib-fs-h2); }
/* « Qté à produire » sur fond orange clair (Damien, 22/10/2026 : « pas tres visible »). */
:root { --poste-aproduire-bg: #ffe7cf; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --poste-aproduire-bg: #4a2a0c; } }
:root[data-theme="dark"] { --poste-aproduire-bg: #4a2a0c; }
.poste-lecture--aproduire { background: var(--poste-aproduire-bg); border-radius: var(--sib-r-sm);
                            padding: var(--sib-1) var(--sib-3); }
.poste-entete .poste-case--declaree { border-color: var(--sib-orange); }
.poste-entete .poste-case--declaree .poste-case__valeur { font-size: var(--sib-fs-h2); font-weight: var(--sib-fw-hero); }
.poste-entete__ligne--quantites .poste-entete__pied { align-self: center; }
@media (max-width: 900px) {
  .poste-entete__ligne--quantites { grid-template-columns: 1fr 1fr; }
}

/* Blocs 2 et 3 : lignes moins hautes ; un lot garde de quoi se toucher. */
.poste .poste-pile .sib-table td { padding: var(--sib-2); }
.poste .poste-pile .poste-table-lots td { padding-top: var(--sib-3); padding-bottom: var(--sib-3); }

/* Pied : boutons a 48 px, padding reduit — il colle en bas, chaque pixel s'y voit. */
.poste .poste-pile .poste-pied { padding: var(--sib-2) var(--sib-3); }
.poste .poste-pile .poste-pied .sib-btn { min-height: 48px; padding: 10px var(--sib-4); }

/* Valeur et indice cote a cote dans une case a toucher : une ligne de moins. */
.poste-case__ligne { display: flex; align-items: baseline; gap: var(--sib-2); flex-wrap: wrap; min-width: 0; }

/* ============== ecrans bas : 596 px utiles chez Paries (12/10/2026) ==============
   Un portable a 125 % d'affichage ne laisse que ~600 px de haut. Le bandeau sur deux
   lignes, le fil d'Ariane et l'en-tete de l'OF les prenaient presque tous : on passe le
   bandeau sur UNE ligne, on affine le fil, et l'en-tete perd ses indices secondaires.
   Les cibles restent a 40 px au moins. */
@media (max-height: 800px) and (min-width: 900px) {
  :root { --poste-barre-h: 52px; }
  .sib-app-bar__haut { padding: 0 var(--sib-4); gap: var(--sib-3); }
  .sib-logo img { height: 26px; }
  .sib-nav a { min-height: 38px; padding: 6px var(--sib-3); }
  .sib-nav__moi > summary { min-height: 38px; padding: 0 var(--sib-3); }
  .sib-btn--bandeau { min-height: 38px; padding: 6px var(--sib-3); }
  .sib-btn--rond { width: 38px; height: 38px; min-height: 38px; }
}
@media (max-height: 800px) {
  .poste .sib-page { padding-top: var(--sib-2); }
  .poste-fil { margin-bottom: var(--sib-1); }
  .poste-fil__etape { min-height: 32px; padding: 0 var(--sib-3); font-size: var(--sib-fs-xs); }

  .poste .poste-pile .sib-card { padding: var(--sib-2) var(--sib-3); }
  .poste-entete { gap: var(--sib-2); }
  .poste-entete__titre { gap: var(--sib-2) var(--sib-3); padding-bottom: var(--sib-1); }
  .poste-entete__of, .poste-entete__lib { font-size: var(--sib-fs-h3); }
  .poste .poste-pile .poste-rebut { min-height: 40px; }
  .poste-entete .sib-champ input { min-height: 40px; }
  .poste-lecture__valeur { min-height: 40px; }
  .poste-entete__ligne--champs .poste-case__indice:not(#affEtiquettesEtat) { display: none; }
  .poste-entete__ligne--quantites { padding-top: var(--sib-2); }
  .poste-entete__ligne--quantites .poste-lecture__valeur,
  .poste-entete .poste-case--declaree .poste-case__valeur { font-size: var(--sib-fs-h3); }
  .poste .poste-pile .poste-pied .sib-btn { min-height: 44px; padding: 8px var(--sib-4); }
  .poste .poste-pile .poste-pied { padding: var(--sib-1) var(--sib-3); }
}
.sib-btn--petit { min-height: 34px; padding: 7px var(--sib-4); font-size: var(--sib-fs-xs); }

/* L'infobulle de bulles.js (.sib-bulle) vit dans socle.css depuis le 29/10/2026 (socle commun
   des My*) : meme carte claire, au texte du corps, que celle posee ici le 22/10/2026. */

/* ---------------- les fleches du Gantt (22/10/2026) ----------------
   Un calque SVG par-dessus les barres, qui ne prend aucun clic (planification.js). La teinte dit le
   type : bleu entre les sequences d'un OF, orange du sous-OF vers l'OF pere. Le pointille dit le
   conflit (la suite commence avant la fin de ce qui la precede), sans effacer le type. */
:root { --plan-lien-seq: #2f62c9; --plan-lien-sousof: #d96a00; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --plan-lien-seq: #8fb0ff; --plan-lien-sousof: #ffa04a; }
}
:root[data-theme="dark"] { --plan-lien-seq: #8fb0ff; --plan-lien-sousof: #ffa04a; }

.plan-gantt { position: relative; isolation: isolate; }
/* Aucune transition sur les barres : avec « animations reduites » (Windows, bureau a distance), la
   charte pose .01ms sur TOUT, et une barre glissee n'est a sa place qu'une image plus tard — les
   fleches, tracees entre-temps, auraient un temps de retard. */
.plan-gbarre { transition-property: none; }
.plan-liens {
  position: absolute; inset: 0; width: 100%; height: 100%;
  overflow: visible; pointer-events: none; z-index: 2;
}
.plan-gantt--sans-liens .plan-liens { display: none; }
.plan-lien { fill: none; stroke-width: 1.6; stroke-linejoin: round; transition: opacity .12s; }
.plan-lien--seq     { stroke: var(--plan-lien-seq); }
.plan-lien--sousof  { stroke: var(--plan-lien-sousof); stroke-width: 2; }
.plan-lien--conflit { stroke-dasharray: 5 3; }
.plan-lien--exemple { stroke: var(--sib-ink-3); }
/* La pointe au milieu d'une fleche qui revient en arriere : pleine, sans trait. */
.plan-lien--pointe { stroke: none; }
.plan-lien--pointe.plan-lien--seq    { fill: var(--plan-lien-seq); }
.plan-lien--pointe.plan-lien--sousof { fill: var(--plan-lien-sousof); }
.plan-lien__tete--seq     { fill: var(--plan-lien-seq); }
.plan-lien__tete--sousof  { fill: var(--plan-lien-sousof); }
.plan-lien__tete--exemple { fill: var(--sib-ink-3); }
.plan-liens--focus .plan-lien { opacity: .18; }
.plan-liens--focus .plan-lien--actif { opacity: 1; stroke-width: 2.6; }

.plan-glegende {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-1) var(--sib-4);
  font-size: var(--sib-fs-xs); color: var(--sib-ink-3);
}
.plan-glegende__item { display: inline-flex; align-items: center; gap: var(--sib-1); }
.plan-glegende__voir {
  display: inline-flex; align-items: center; gap: var(--sib-1);
  font-weight: 600; color: var(--sib-ink-2); cursor: pointer;
}
.plan-glegende__voir input { margin: 0; accent-color: var(--sib-orange); }

/* ---------------- les heures non travaillees (22/10/2026) ----------------
   Le calendrier Divalto du poste (MCALENJOUR) : ce qui est hors de ses horaires est grise et
   hachure, sous les barres. Plus marque que les jours non ouvres theoriques : c'est une donnee
   de l'ERP, pas une hypothese. */
:root { --plan-hors-a: rgba(7, 16, 56, .13); --plan-hors-b: rgba(7, 16, 56, .05); }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --plan-hors-a: rgba(255, 255, 255, .13); --plan-hors-b: rgba(255, 255, 255, .04); }
}
:root[data-theme="dark"] { --plan-hors-a: rgba(255, 255, 255, .13); --plan-hors-b: rgba(255, 255, 255, .04); }

.plan-ghors { position: absolute; inset: 0; pointer-events: none; overflow: hidden; border-radius: inherit; }
.plan-ghors > span,
.plan-glegende__hors {
  background: repeating-linear-gradient(135deg, var(--plan-hors-a) 0 3px, var(--plan-hors-b) 3px 7px);
}
.plan-ghors > span { position: absolute; top: 0; bottom: 0; }
.plan-glegende__hors {
  display: inline-block; width: 22px; height: 12px;
  border: 1px solid var(--sib-border); border-radius: 2px;
}