/* ============================================================
   MyWMS — structure et composants (repris de MyB)
   ------------------------------------------------------------
   AUCUNE COULEUR EN DUR ICI : tout passe par les variables du theme
   (tokens-<client>.css). C'est ce qui permet d'habiller MyB aux couleurs d'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 de MyProd / du skill
             sibreeze-charte. Ne pas les reecrire.
     .wms-*  ce que MyWMS ajoute.
   ============================================================ */

/* ======================== densite ======================== */

/* Les tailles d'un logiciel de gestion web, pas d'un site vitrine (Damien, 12/10/2026 : « l'affichage est trop gros
   de tout ; regarde le std des logiciels web »). Microsoft Fluent 2, Salesforce Lightning, Atlassian et Ant Design
   tombent tous au meme endroit : texte a 14 px, champs et boutons de 32 px, lignes de tableau de 32 a 36 px, titre de
   page a 20-24 px, bandeau de moins de 50 px par rangee. Damien travaille a 125 % sur un ecran qui laisse 1314 x 596 px
   utiles : a 42 px la case et 30 px de marge, une fiche ne montrait que sa premiere carte.
   Ces valeurs ne vivent qu'ici : le terminal (terminal.css) garde ses grandes tailles, il se manipule au doigt. Sur
   un ecran tactile (pointer: coarse), les cases et les boutons remontent a 40 px. */
:root {
  --sib-fs-display: 1.375rem;  /* 22px */
  --sib-fs-h2:      1.0625rem; /* 17px */
  --sib-fs-h3:      .9375rem;  /* 15px */
  --sib-fs-body:    .875rem;   /* 14px */
  --sib-fs-kpi:     1.625rem;  /* 26px */
  --wms-saisie: 32px;          /* une case de saisie, une liste, un bouton */
  --wms-saisie-petite: 28px;   /* un bouton dans une ligne de tableau */
}
@media (pointer: coarse) { :root { --wms-saisie: 40px; --wms-saisie-petite: 36px; } }
/* La taille choisie par la personne dans ses preferences (/Preferences) : l'attribut data-taille que le serveur pose sur
   <html> (socle commun des My*, 29/10/2026). Les tailles du texte sont dans socle.css (memes valeurs qu'ici avant) ; MyWMS
   y ajoute la hauteur de ses cases. « html[...] » l'emporte sur les « :root » ci-dessus, ecran tactile compris. */
html[data-taille="compacte"] { --wms-saisie: 28px; --wms-saisie-petite: 24px; }
html[data-taille="grande"]   { --wms-saisie: 38px; --wms-saisie-petite: 32px; }

/* ======================== ossature ======================== */

.sib-page { max-width: 1500px; margin: 0 auto; padding: var(--sib-3); }
.sib-grid { display: grid; grid-template-columns: 1fr; gap: var(--sib-3); }
/* Des cartes posees l'une sous l'autre dans la page, sans grille : le meme ecart qu'entre les cartes d'une grille. */
.sib-page > .sib-card + .sib-card { margin-top: var(--sib-3); }
@media (min-width: 700px) { .sib-page { padding: var(--sib-4) var(--sib-5); } }

/* ======================== logo ======================== */

.sib-logo { display: inline-flex; align-items: center; }
.sib-logo img { height: 28px; width: auto; display: block; }
/* Au moins aussi specifique que « .sib-logo img », sinon les deux logos
   s'affichent cote a cote — defaut connu 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.05rem;
                   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; }

/* ======================== bandeau et rubriques ======================== */

/* UNE SEULE LIGNE DE 60 PX (reprise de MyB le 29/10/2026 ; MyWMS avait un bandeau de 78 px et une rangee d'onglets
   dessous) : logo, MyWMS, les rubriques, puis le client, le depot, l'utilisateur et le theme. Hauteur fixe — la barre
   laterale et les ancres se calent dessus. */
:root { --wms-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-3);
                     height: var(--wms-barre-h); padding: 0 var(--sib-4); }
.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-2); flex-shrink: 0; }
.sib-app-bar__user { font-size: var(--sib-fs-sm); color: var(--sib-sur-bandeau-2); white-space: nowrap;
                     max-width: 160px; overflow: hidden; text-overflow: ellipsis; }

/* Les rubriques DEFILENT, elles ne passent pas a la ligne : un retour a la ligne change la
   hauteur du bandeau et fait sauter tout le contenu. */
.sib-nav { display: flex; align-items: center; gap: 2px; flex: 1 1 auto; min-width: 0;
           overflow-x: auto; scrollbar-width: none; }
.sib-nav::-webkit-scrollbar { display: none; }
.sib-nav a { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap;
             padding: 6px 9px; border-radius: var(--sib-r-pill); line-height: 18px;
             font-size: var(--sib-fs-sm); font-weight: 600; text-decoration: none;
             color: var(--sib-sur-bandeau-2); transition: background-color .25s, color .25s; }
.sib-nav a:hover { background: var(--sib-bandeau-survol); color: var(--sib-blanc); }
/* L'orange est le seul signal chaud, et sa force vient de sa rarete :
   une rubrique active par ecran, rien d'autre. */
.sib-nav a[aria-current="page"] { background: var(--sib-orange); color: var(--sib-on-orange); }
/* L'administration se range a droite des domaines : ce n'est pas ce qu'on vient faire. */
.sib-nav__service { margin-left: auto; }
.sib-nav__avenir { font-size: var(--sib-fs-xs); font-weight: 500; opacity: .75;
                   border: 1px solid currentColor; border-radius: var(--sib-r-pill);
                   padding: 1px 7px; }

/* Le menu de l'utilisateur : ses preferences, son mot de passe, le terminal, la deconnexion. */
.sib-nav__moi { position: relative; }
.sib-nav__moi > summary { list-style: none; cursor: pointer; white-space: nowrap; display: flex; align-items: center;
                          height: var(--wms-saisie); padding: 0 var(--sib-3); border-radius: var(--sib-r-pill);
                          font-size: var(--sib-fs-sm); font-weight: 600;
                          color: var(--sib-blanc); border: 1px solid var(--sib-bandeau-filet); }
/* Un nom long se coupe, la fleche reste. */
.sib-nav__moi-nom { max-width: 140px; overflow: hidden; text-overflow: ellipsis; }
.sib-nav__moi > summary::-webkit-details-marker { display: none; }
.sib-nav__moi > summary::after { content: "\00a0▾"; }
.sib-nav__moi-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 230px;
                     display: grid; gap: 2px; padding: var(--sib-2); white-space: nowrap;
                     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 .wms-note { padding: 4px 8px 6px; margin: 0; }
.sib-nav__moi-menu a, .sib-nav__moi-menu button { all: unset; cursor: pointer; padding: 6px 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 a:focus-visible, .sib-nav__moi-menu button:focus-visible { outline: 2px solid var(--sib-orange); }
.sib-nav__moi-menu form { margin: 0; }
.sib-nav__moi-menu .wms-icone { width: 16px; height: 16px; }

/* 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; }
/* Connecte, sur l'ecran de Damien (1 314 px utiles a 125 %), la place va aux rubriques : le logo s'efface, MyWMS reste. */
@media (max-width: 1440px) { .sib-app-bar:has(.sib-nav) .sib-logo { display: none; } }
@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); }
  .sib-app-bar:has(.sib-nav) .sib-app-bar__titre { display: none; }
  .sib-nav__moi-nom { max-width: 90px; }
}

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

/* Les pages de la rubrique ouverte (reprise de MyB le 29/10/2026 ; elles etaient les sous-onglets « wms-onglets » des
   emplacements et du referentiel). Absente quand la rubrique n'a qu'une page : la place va au contenu. */
.wms-icone { width: 18px; height: 18px; flex-shrink: 0; }
.wms-cadre--laterale { display: flex; align-items: flex-start; }
.wms-cadre--laterale > .sib-page { flex: 1 1 auto; min-width: 0; margin: 0; }
.wms-laterale { flex: 0 0 214px; position: sticky; top: var(--wms-barre-h);
                height: calc(100vh - var(--wms-barre-h)); overflow-y: auto;
                display: flex; flex-direction: column; gap: 2px;
                padding: var(--sib-3) var(--sib-2); background: var(--sib-surface);
                border-right: 1px solid var(--sib-border-2); transition: flex-basis .2s; }
.wms-laterale__titre { margin: 0 0 var(--sib-1); padding: 0 var(--sib-3); font-size: .6875rem;
                       font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--sib-ink-3);
                       white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* minmax(0, 1fr) et min-width: 0 : un libelle trop long (« Stockeurs automatiques » en taille grande) se coupe en « … »
   au lieu d'elargir la barre, qui defilait alors de cote (29/10/2026). Le libelle entier reste dans l'infobulle. */
.wms-laterale__nav { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1px; }
.wms-laterale__lien { display: flex; align-items: center; gap: var(--sib-2); padding: 6px 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; }
.wms-laterale__lien:hover { background: var(--sib-survol); color: var(--sib-ink); }
.wms-laterale__lien[aria-current="page"] { background: var(--sib-surface-2); color: var(--sib-ink);
                                           box-shadow: inset 3px 0 0 var(--sib-orange); }
.wms-laterale__texte { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.wms-laterale__sommaire { display: grid; margin: 2px 0 var(--sib-1) 20px; padding-left: var(--sib-2);
                          border-left: 1px solid var(--sib-border-2); }
.wms-laterale__sommaire a { padding: 4px var(--sib-2); font-size: var(--sib-fs-xs); color: var(--sib-ink-3);
                            text-decoration: none; border-radius: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wms-laterale__sommaire a:hover { color: var(--sib-ink); background: var(--sib-survol); }
.wms-laterale__sommaire a[aria-current] { color: var(--sib-orange-ink); font-weight: 600; }
.wms-laterale__replier { all: unset; cursor: pointer; margin-top: auto; display: flex; align-items: center;
                         gap: var(--sib-2); padding: 6px var(--sib-3); border-radius: var(--sib-r-sm);
                         font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }
.wms-laterale__replier:hover { background: var(--sib-survol); color: var(--sib-ink); }
.wms-laterale__replier:focus-visible, .wms-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. */
.wms-cadre [id] { scroll-margin-top: calc(var(--wms-barre-h) + var(--sib-3)); }

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

/* Petit ecran : la barre laterale devient une rangee de pages au-dessus du contenu. */
@media (max-width: 800px) {
  .wms-cadre--laterale { display: block; }
  .wms-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; }
  .wms-laterale__titre, .wms-laterale__sommaire, .wms-laterale__replier { display: none; }
  .wms-laterale__nav { display: flex; gap: var(--sib-1); }
}

/* ======================== connexion, comptes ======================== */

/* Connexion, mot de passe, acces refuse : une carte etroite au centre. */
.wms-connexion { max-width: 420px; margin: var(--sib-5) auto; }

/* Les comptes dans /Parametres (repris de MyB) : une colonne par reglage, tout aligne en haut, des champs de 32 px. */
.wms-comptes td { vertical-align: top; white-space: nowrap; }
.wms-comptes td > b, .wms-comptes__etat { display: inline-block; line-height: var(--wms-saisie); }
.wms-comptes td > b { line-height: 1.3; padding-top: 6px; }
.wms-comptes th, .wms-comptes td { padding-left: 6px; padding-right: 6px; }
.sib-table.wms-comptes th { white-space: normal; vertical-align: bottom; }
/* Tenir dans 1 000 px (ecran a 125 %, barre laterale ouverte) : les boutons restent visibles. */
.wms-comptes input:not([type=checkbox]), .wms-comptes select { height: var(--wms-saisie); min-height: 0; min-width: 0; width: 112px; }
.wms-comptes select { width: 124px; }
.wms-comptes .wms-deroulant { width: 164px; }
.wms-comptes .wms-comptes__nouveau { display: grid; gap: 4px; }
.wms-comptes .sib-btn { min-height: var(--wms-saisie); height: var(--wms-saisie); padding: 0 var(--sib-3); font-size: var(--sib-fs-xs); }
/* Les boutons l'un sous l'autre : « Retirer » n'elargit pas la ligne. */
.wms-comptes__actions { display: flex; flex-direction: column; align-items: stretch; gap: 4px; margin: 0; }

/* Les menus d'un utilisateur : un deroulant de cases a cocher, le resume dans le bouton ferme. */
.wms-deroulant { position: relative; }
.wms-deroulant > summary { list-style: none; cursor: pointer; height: var(--wms-saisie); box-sizing: border-box; line-height: 20px;
                           padding: 5px 28px 5px 10px; border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-sm);
                           background: var(--sib-surface); white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
                           position: relative; font-size: var(--sib-fs-sm); }
.wms-deroulant > summary::-webkit-details-marker { display: none; }
.wms-deroulant > summary::after { content: "▾"; position: absolute; right: 10px; top: 50%; transform: translateY(-50%); }
.wms-deroulant[open] > summary::after { content: "▴"; }
/* Ouvert DANS la ligne (pas en surimpression) : le tableau defile dans son cadre, qui couperait une liste flottante. */
.wms-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: var(--sib-r-sm); }
.wms-coche { display: flex; align-items: center; gap: var(--sib-2); white-space: nowrap; font-size: var(--sib-fs-sm); }
.wms-coche input { width: 16px; height: 16px; min-height: 0; accent-color: var(--sib-orange); }

/* ======================== cartes ======================== */

.sib-card { background: var(--sib-surface); border: var(--sib-bd); border-radius: var(--sib-r);
            padding: var(--sib-4) var(--sib-5); 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-3); }
.sib-card__head h2 { margin: 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title); }
.sib-card__meta { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }

/* ======================== boutons ======================== */

.sib-btn { font: 600 var(--sib-fs-sm)/1 var(--sib-font); padding: 0 var(--sib-4);
           border-radius: var(--sib-r-pill); border: 2px solid transparent; cursor: pointer;
           min-height: var(--wms-saisie); 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; }
.sib-btn--bandeau { background: transparent; color: var(--sib-blanc);
                    border-color: var(--sib-bandeau-filet); padding: 0 var(--sib-3);
                    min-height: var(--wms-saisie); font-size: var(--sib-fs-sm); }
.sib-btn--bandeau:hover { background: var(--sib-bandeau-survol); }
.sib-btn--rond { width: var(--wms-saisie); height: var(--wms-saisie); min-height: var(--wms-saisie); padding: 0; }
.sib-btn--petit { min-height: var(--wms-saisie-petite); padding: 0 var(--sib-3); font-size: var(--sib-fs-xs); }

@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);
}

/* ======================== 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: 3px 8px; 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-2) var(--sib-3);
             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); }

/* ======================== 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: 6px 10px; border-bottom: 1px solid var(--sib-border);
                               text-align: left; vertical-align: top; }
.sib-table td.num, .sib-table th.num { font-variant-numeric: tabular-nums; 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: .6875rem; font-weight: 600;
                      text-transform: uppercase; letter-spacing: .04em; white-space: nowrap;
                      border-bottom: 2px solid var(--sib-border); }

/* ======================== formulaires ======================== */

/* La hauteur d'une case de saisie (--wms-saisie, plus haut) : une liste et un champ ont la meme, et une
   case a cocher posee parmi des champs se centre sur elle.
   Le libelle s'ecrit comme une phrase, au-dessus de la case, comme dans les logiciels de gestion : en
   capitales espacees, il etait plus large, passait plus souvent sur deux lignes et criait plus que la saisie. */
.wms-champ { display: block; margin: var(--sib-3) 0 0; font-size: var(--sib-fs-sm);
             font-weight: 600; color: var(--sib-ink-2); }
.wms-champ input, .wms-champ select {
  display: block; width: 100%; min-height: var(--wms-saisie); margin-top: 4px;
  font: 400 var(--sib-fs-sm)/1.4 var(--sib-font);
  padding: 5px 10px; border-radius: var(--sib-r-sm);
  border: 1px solid var(--sib-border-fort); background: var(--sib-surface);
  color: var(--sib-ink); text-transform: none; letter-spacing: normal;
}
.wms-champ input:focus, .wms-champ select:focus { outline: var(--sib-focus); outline-offset: 1px; }
.wms-champ input::placeholder { color: var(--sib-ink-3); }
.wms-champ textarea { display: block; width: 100%; margin-top: 4px; font: 400 var(--sib-fs-sm)/1.45 var(--sib-font);
                      padding: 6px 10px; border-radius: var(--sib-r-sm); border: 1px solid var(--sib-border-fort);
                      background: var(--sib-surface); color: var(--sib-ink); text-transform: none; letter-spacing: normal; resize: vertical; }
.wms-champ textarea:focus { outline: var(--sib-focus); outline-offset: 1px; }
/* Une saisie sans libelle, dans une ligne de tableau ou a cote d'un bouton (changer un statut, « pour tous ») : la
   hauteur d'un petit bouton, le meme filet que les champs, au lieu du rendu brut du navigateur. :where() ne pese
   rien, une regle de .wms-champ l'emporte toujours. */
:where(.sib-page) :where(input:not([type="checkbox"], [type="radio"], [type="file"], [type="hidden"]), select) {
  min-height: var(--wms-saisie-petite); padding: 3px 8px; font: 400 var(--sib-fs-sm)/1.4 var(--sib-font);
  border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-sm); background: var(--sib-surface); color: var(--sib-ink);
  vertical-align: middle;
}
/* Une liste reglee (/Parametres) : une valeur par ligne, colonnes alignees. */
.wms-champ textarea.wms-liste { font-family: ui-monospace, "Cascadia Mono", Consolas, monospace; font-size: var(--sib-fs-xs); white-space: pre; overflow-x: auto; }
.wms-listes { display: grid; gap: var(--sib-2) var(--sib-5); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .wms-listes { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wms-listes h3 { margin: var(--sib-3) 0 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title); }
/* Des champs cote a cote. Ils se calent en bas : quand un libelle passe sur deux lignes, les cases de
   saisie restent sur la meme ligne (Damien, 12/10/2026 : « rien n'est aligne »). */
.wms-duo { display: flex; gap: var(--sib-3); flex-wrap: wrap; align-items: flex-end; }
.wms-duo .wms-champ { flex: 1; min-width: 120px; }
.wms-duo .wms-champ--auto { flex: 0 0 auto; }
.wms-duo .wms-champ--large { min-width: 260px; }

/* Une grille de saisie, pour les fiches : les colonnes s'alignent aussi d'une ligne a l'autre.
   --double prend deux colonnes, --large toute la ligne ; .wms-ligne commence une nouvelle ligne. */
.wms-grille { display: grid; grid-template-columns: repeat(var(--wms-colonnes, 3), minmax(0, 1fr));
              gap: 0 var(--sib-3); align-items: end; }
.wms-grille--4 { --wms-colonnes: 4; }
.wms-grille > .wms-champ--double { grid-column: span 2; }
.wms-grille > .wms-champ--large { grid-column: 1 / -1; }
.wms-grille > .wms-ligne { grid-column-start: 1; }
@media (max-width: 699px) {
  .wms-grille { --wms-colonnes: 2; }
  .wms-grille > .wms-champ--double { grid-column: 1 / -1; }
}

/* Une case a cocher parmi des champs : centree sur la ligne des cases de saisie. */
.wms-duo:has(> .wms-champ) > .wms-case, .wms-grille > .wms-case { min-height: var(--wms-saisie); }

/* Plusieurs saisies sous un meme libelle (quantite et unite, longueur × largeur × hauteur). */
.wms-ensemble { display: flex; align-items: center; gap: var(--sib-2); margin-top: 4px; }
.wms-ensemble input, .wms-ensemble select { margin-top: 0; min-width: 0; }
.wms-ensemble input { flex: 1 1 0; }
.wms-ensemble select { flex: 0 0 auto; width: auto; }
.wms-ensemble span { color: var(--sib-ink-3); font-weight: 400; }

/* Un choix exclusif court (le mode de suivi d'un article) : des segments, comme les onglets. Le bouton
   radio reste dans la page, invisible, pour le clavier et les lecteurs d'ecran. */
.wms-segments { display: flex; width: fit-content; max-width: 100%; gap: 2px; min-height: var(--wms-saisie); margin-top: 4px; padding: 2px;
                border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-pill); background: var(--sib-surface); }
.wms-segments label { position: relative; display: inline-flex; align-items: center; padding: 0 var(--sib-3);
                      border-radius: var(--sib-r-pill); cursor: pointer; white-space: nowrap;
                      font-size: var(--sib-fs-sm); font-weight: 600; text-transform: none; letter-spacing: normal;
                      color: var(--sib-ink-2); transition: background-color .25s, color .25s; }
.wms-segments label:hover { background: var(--sib-survol); }
.wms-segments input[type="radio"] { position: absolute; inset: 0; width: 100%; height: 100%; min-height: 0;
                                    margin: 0; padding: 0; border: 0; opacity: 0; cursor: pointer; }
.wms-segments label:has(input:checked) { background: var(--sib-bleu); color: var(--sib-blanc); }
.wms-segments label:has(input:focus-visible) { box-shadow: var(--sib-focus); }
.wms-actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sib-2) var(--sib-3);
               margin-top: var(--sib-4); }
/* Une barre d'action qui reste au bas de l'ecran pendant qu'on parcourt une longue liste (Damien, 12/10/2026, « Lancer la vague » :
   « le bloc bas doit etre en flottant pour toujours le voir ») : elle colle au bas de la fenetre tant que son formulaire est a
   l'ecran, et retrouve sa place a la fin de la liste. Posee dans une carte, elle en prend toute la largeur. Les reglages rares
   (.wms-barre-action__plus) s'ouvrent au-dessus d'elle, sans la faire grandir. */
.wms-barre-action { position: sticky; bottom: 0; z-index: 5; display: flex; flex-wrap: wrap; align-items: flex-end;
                    gap: var(--sib-2) var(--sib-3); margin: var(--sib-3) calc(-1 * var(--sib-5)) calc(-1 * var(--sib-4));
                    padding: var(--sib-2) var(--sib-5) var(--sib-3); background: var(--sib-surface);
                    border-top: 2px solid var(--sib-border-fort); border-radius: 0 0 var(--sib-r) var(--sib-r); }
.wms-barre-action .wms-champ { margin: 0; flex: 1 1 160px; }
.wms-barre-action .wms-champ--large { flex: 2 1 240px; }
.wms-barre-action__resume { margin: 0; align-self: center; font-size: var(--sib-fs-sm); color: var(--sib-ink-2); min-width: 15rem; }
.wms-barre-action__plus { position: relative; }
.wms-barre-action__plus > summary { list-style: none; }
.wms-barre-action__plus > summary::-webkit-details-marker { display: none; }
.wms-barre-action__plus > div { position: absolute; right: 0; bottom: calc(100% + var(--sib-2)); display: flex; gap: var(--sib-2);
                                width: max-content; max-width: 90vw; padding: var(--sib-3); background: var(--sib-surface);
                                border: 1px solid var(--sib-border-fort); border-radius: var(--sib-r-sm); box-shadow: var(--sib-shadow-pop); }
.wms-barre-action__plus .wms-champ { flex: 0 0 7.5rem; }
.wms-note { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); line-height: var(--sib-lh-body); margin: 4px 0 0; }
.wms-mono { font-variant-numeric: tabular-nums; font-family: ui-monospace, "Cascadia Mono", Consolas, monospace;
            font-size: var(--sib-fs-xs); }
.wms-extrait { margin: 4px 0 0; padding: var(--sib-2) var(--sib-3); border-radius: var(--sib-r-sm);
               background: var(--sib-surface-2); border: 1px solid var(--sib-border);
               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; }
.wms-defs { display: grid; grid-template-columns: auto 1fr; gap: 4px var(--sib-4);
            margin: 0; font-size: var(--sib-fs-sm); }
.wms-defs dt { color: var(--sib-ink-3); font-size: var(--sib-fs-sm); }
/* Un chemin ou une liste sans espace (la racine, les migrations) passe a la ligne plutot que de sortir de sa carte. */
.wms-defs dd { margin: 0; min-width: 0; overflow-wrap: anywhere; }

/* ======================== accueil ======================== */

.wms-accueil { display: grid; gap: var(--sib-3); grid-template-columns: 1fr; }
@media (min-width: 760px) { .wms-accueil { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1180px) { .wms-accueil { grid-template-columns: repeat(3, 1fr); } }

/* Une tuile cliquable se souleve de 2px au survol — le mouvement de la charte. */
.wms-tuile { display: flex; flex-direction: column; gap: var(--sib-2); text-decoration: none;
             color: inherit; }
.wms-tuile:hover { background: var(--sib-survol); transform: translateY(-2px); }
.wms-tuile--attente { opacity: .92; }
.wms-tuile h2 { margin: 0; font-size: var(--sib-fs-h3); font-weight: var(--sib-fw-title);
                color: var(--sib-ink); }
.wms-tuile p { margin: 0; font-size: var(--sib-fs-sm); line-height: var(--sib-lh-body);
               color: var(--sib-ink-2); }
.wms-tuile__pied { margin-top: auto; padding-top: var(--sib-2); }

/* La pastille de la charte : bleu-clair au repos, inversee au survol. */
.wms-pastille { width: 30px; height: 30px; border-radius: var(--sib-r-pill); flex-shrink: 0;
                display: inline-flex; align-items: center; justify-content: center;
                background: var(--sib-bleu-clair); color: var(--sib-bleu);
                font-weight: 700; font-size: var(--sib-fs-sm);
                transition: background-color .25s, color .25s; }
.wms-tuile:hover .wms-pastille { background: var(--sib-bleu); color: var(--sib-blanc); }

/* Un bouton primaire desactive ne doit pas garder l'orange : il signalerait une action
   possible qui ne l'est pas. Repris du CRM a la fusion (05/10/2026). */
.sib-btn--primary:disabled { background: var(--sib-surface-2); color: var(--sib-ink-3);
                             border-color: var(--sib-border); opacity: 1; }

/* Case a cocher sur une ligne, dans un formulaire de parametrage. */
.wms-case { display: flex; align-items: center; gap: var(--sib-2); margin-top: var(--sib-3);
            font-size: var(--sib-fs-sm); font-weight: 600; color: var(--sib-ink); }
.wms-case input { width: auto; margin: 0; }

/* Un groupe de choix qui vont ensemble (le suivi du stock d'un article : quantite, lot, serie). */
.wms-groupe { border: 1px solid var(--sib-border); border-radius: var(--sib-r-sm); padding: var(--sib-1) var(--sib-3) var(--sib-3);
              margin: var(--sib-3) 0 0; }
.wms-groupe legend { padding: 0 var(--sib-1); font-size: .6875rem; color: var(--sib-ink-3); text-transform: uppercase;
                     letter-spacing: .05em; }

/* La notice en pied de chaque page (nee ici le 12/10/2026) est devenue .sib-notice, dans socle.css (socle commun des
   My*, 29/10/2026). */

/* Liste de manques sous une carte : lisible, sans crier. */
.wms-liste { margin: 4px 0 0; padding-left: 18px; font-size: var(--sib-fs-xs);
             color: var(--sib-ink-2); line-height: var(--sib-lh-body); }

/* ======================== MyWMS : tableau de bord ======================== */

.wms-titre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--sib-3);
             flex-wrap: wrap; margin-bottom: var(--sib-3); }
.wms-titre h1 { margin: 0; }
.wms-titre p { margin: 2px 0 0; color: var(--sib-ink-2); font-size: var(--sib-fs-sm); }

.wms-kpis { display: grid; gap: var(--sib-3); grid-template-columns: repeat(2, minmax(0, 1fr)); margin-bottom: var(--sib-3); }
@media (min-width: 900px) { .wms-kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.wms-kpi { display: flex; flex-direction: column; gap: 2px; text-decoration: none; color: inherit; padding: var(--sib-3) var(--sib-4); }
a.wms-kpi:hover { background: var(--sib-survol); }
.wms-kpi__valeur { font-size: var(--sib-fs-kpi); font-weight: var(--sib-fw-hero); line-height: 1;
                   font-variant-numeric: tabular-nums; color: var(--sib-ink); }
.wms-kpi__libelle { font-size: var(--sib-fs-sm); color: var(--sib-ink-2); }
.wms-kpi__detail { font-size: var(--sib-fs-xs); color: var(--sib-ink-3); }
.wms-kpi--alerte .wms-kpi__valeur { color: var(--sib-crit); }

/* ======================== MyWMS : filtres et listes ======================== */

.wms-filtres { display: flex; flex-wrap: wrap; align-items: flex-end; gap: var(--sib-2) var(--sib-3); margin-bottom: var(--sib-3); }
.wms-filtres .wms-champ { margin: 0; min-width: 160px; }
.wms-filtres .wms-champ--large { min-width: 260px; flex: 1; }
.wms-onglets { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: var(--sib-3); }
.wms-onglets a { padding: 4px var(--sib-3); border-radius: var(--sib-r-pill); border: 1px solid var(--sib-border-fort);
                 font-size: var(--sib-fs-sm); font-weight: 600; text-decoration: none; color: var(--sib-ink-2); }
.wms-onglets a[aria-current="page"] { background: var(--sib-bleu); color: var(--sib-blanc); border-color: var(--sib-bleu); }
.wms-vide { padding: var(--sib-5); text-align: center; color: var(--sib-ink-3); font-size: var(--sib-fs-sm); }
.wms-pile { display: flex; flex-direction: column; gap: var(--sib-3); }
.wms-deux { display: grid; gap: var(--sib-3); grid-template-columns: 1fr; }
@media (min-width: 1000px) { .wms-deux { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.wms-messages { display: flex; flex-direction: column; gap: var(--sib-2); margin-bottom: var(--sib-3); }
.wms-inline { display: inline; margin: 0; }
.wms-faible { color: var(--sib-ink-3); }
/* Un numero ou un code qui ne se coupe pas : c'est la colonne de texte voisine qui passe a la ligne. */
.wms-sans-coupure { white-space: nowrap; }
.wms-ligne-fermee td { color: var(--sib-ink-3); }
.wms-table-actions { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Sur un ecran de bureau, les gestes d'une ligne tiennent sur une ligne : c'est la colonne de texte qui passe a la ligne,
   pas la ligne de tableau qui double de hauteur. */
@media (min-width: 1000px) { .sib-table .wms-table-actions { flex-wrap: nowrap; } }

/* Les photos des reserves a la reception (lot 3) : des vignettes qui s'ouvrent en grand. */
.wms-photos { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 12rem), 1fr)); gap: var(--sib-3); }
.wms-photos figure { margin: 0; display: grid; gap: var(--sib-1); }
.wms-photos img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--sib-r-sm, 8px); border: 2px solid var(--sib-border-2); }
.wms-photos figcaption { font-size: var(--sib-fs-sm, .8125rem); display: grid; }