/* ============================================================================
   wb-shell.css — structure de page du socle (WEBBASE-4032, lot 3 de l'épic du style #3947)

   Plan : docs/design/style-socle-inventaire.md (§ 3, 4, 10, 12, 15 et 18 de la peau produit de référence, réécrits
   sur le contrat). Chargé par _ThemeStylesheets juste après compat.css, avant les fichiers du thème :
   un thème peut donc surcharger ces règles, et un thème « pur fichier de valeurs » les pilote par ses
   --theme-*. Aucune couleur en dur : tout passe par les --wb-* câblés dans compat.css (garde-fou
   Issue4032). Aucun :has() pour deviner la structure : les vues posent des classes explicites.

   1. Rail de navigation (desktop) — #wb-app-sidebar
   2. Barre du haut et recherche globale
   3. En-tête de page — .wb-page-header, et le marqueur de titre (--theme-title-marker)
   4. Pages d'authentification — body.wb-auth-page (posé par _Layout)
   5. Menu mobile — #wb-mobile-offcanvas
   6. Pied de page
   ============================================================================ */

/* ─── 1. Rail de navigation ─────────────────────────────────────────────────── */
#wb-app-sidebar {
  background: var(--wb-rail);
  border-right: 0;
  scrollbar-color: var(--wb-rail-line) transparent;
}
/* Marque sans logo : posée sur le rail. Avec un logo, cartouche clair (un logo foncé reste lisible
   dans les deux modes) et filet de marque — seulement s'il y a un logo : pas de cartouche vide. */
.wb-sidebar-brand {
  color: var(--wb-rail-text-strong);
  border-bottom: 1px solid var(--wb-rail-line);
}
.wb-sidebar-brand:hover { color: var(--wb-rail-text-strong); }
.wb-sidebar-brand-has-logo {
  background: var(--wb-logo-cap);
  color: var(--wb-rail);
  border-bottom: 3px solid var(--wb-primary);
}
.wb-sidebar-brand-has-logo:hover { color: var(--wb-rail); }

.wb-sidebar-search { padding: var(--wb-space-5) var(--wb-space-3) var(--wb-space-2); }
.wb-sidebar-search .wb-search-field-icon { color: var(--wb-rail-text); }
.wb-sidebar-search-input {
  background: var(--wb-rail-raised);
  border: 1px solid var(--wb-rail-line);
  color: var(--wb-rail-text-strong);
}
.wb-sidebar-search-input::placeholder { color: var(--wb-rail-text); opacity: .8; }
.wb-sidebar-search-input:focus-visible {
  border-color: var(--wb-rail-signal);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wb-rail-signal) 25%, transparent);
}

.wb-sidebar-nav {
  padding: var(--wb-space-3) 0;
  scrollbar-width: thin;
  scrollbar-color: var(--wb-rail-line) transparent;
}
.wb-sidebar-nav .nav-link {
  color: var(--wb-rail-text);
  border-radius: 0;
  padding: var(--wb-space-3) var(--wb-space-5);
  font-weight: 500;
}
.wb-sidebar-nav .nav-link:hover {
  background-color: var(--wb-rail-hover);
  color: var(--wb-rail-text-strong);
}
.wb-sidebar-nav .nav-link:focus-visible {
  outline: 2px solid var(--wb-rail-signal);
  outline-offset: -2px;
}
.wb-sidebar-nav .nav-link.active {
  background-color: var(--wb-rail-active);
  color: var(--wb-rail-text-strong);
  font-weight: 600;
  /* Repère de l'entrée active (WEBBASE-1721) : inset, la boîte ne change pas de largeur. */
  box-shadow: inset 3px 0 0 0 var(--wb-rail-signal);
}
.wb-sidebar-group-toggle[aria-expanded="true"] { color: var(--wb-rail-text-strong); }
/* L'icône d'un groupe : l'écart vient du gap de .nav-link dans le rail, de cette marge dans le menu
   mobile (ses liens n'ont pas de gap). Avant, me-2 s'ajoutait au gap : libellés décalés de 8 px. */
.wb-sidebar-group-icon { margin-right: var(--wb-space-3); }
.wb-sidebar-nav .wb-sidebar-group-icon { margin-right: 0; }
.wb-sidebar-nav .wb-sidebar-children {
  margin: 0 0 var(--wb-space-2) calc(var(--wb-space-5) + .5rem);
  padding-left: 0;
  border-left: 1px solid var(--wb-rail-line);
}
.wb-sidebar-nav .wb-sidebar-children .nav-link { padding-left: var(--wb-space-5); font-size: .8125rem; }
#wb-sidebar-search-empty { color: var(--wb-rail-text); }
.wb-sidebar-toggle {
  border-top: 1px solid var(--wb-rail-line);
  color: var(--wb-rail-text);
}
.wb-sidebar-toggle:hover { color: var(--wb-rail-text-strong); }

/* ─── 2. Barre du haut ──────────────────────────────────────────────────────── */
/* Filet plutôt qu'ombre (l'ombre de site.css est retirée à la source). */
.navbar .nav-link,
.navbar .btn-link.nav-link { color: var(--wb-text-muted); }
.navbar .nav-link:hover,
.navbar .btn-link.nav-link:hover { color: var(--wb-text); }
.navbar .nav-link .bi,
.navbar .btn-link .bi { color: var(--wb-text-muted); }
.navbar .nav-link:hover .bi,
.navbar .btn-link:hover .bi { color: var(--wb-text); }
.navbar .dropdown-toggle { font-weight: 500; color: var(--wb-text-secondary); }
.navbar .form-control {
  background-color: var(--wb-surface);
  border-color: var(--wb-border-color);
}
/* Recherche globale pleine ; largeur fluide (260 px au plus, 40 % de la fenêtre sur un écran étroit). */
#wb-global-search-input {
  background-color: var(--wb-surface-alt);
  border: 1px solid transparent;
  height: 34px;
  width: min(260px, 40vw);
}
#wb-global-search-input:hover { border-color: var(--wb-border-color); }
#wb-global-search-input:focus {
  background-color: var(--wb-surface-card);
  border-color: var(--wb-primary);
}

/* ─── 3. En-tête de page ────────────────────────────────────────────────────── */
/* .wb-page-header se pose sur la rangée qui porte le titre de la page (titre et actions) ; posé sur
   le h1 lui-même (titre seul, sans rangée), il ne donne que le titre et son marqueur. Garde-fou :
   chaque vue de page qui a un h1 porte la classe (Issue4032). */
.wb-page-header:not(h1) {
  padding-bottom: var(--wb-space-6);
  /* !important : les vues posent une marge utilitaire Bootstrap (mb-3, mb-4…), elle-même !important. */
  margin-bottom: var(--wb-space-7) !important;
  border-bottom: 1px solid var(--wb-border-color);
}
/* Marqueur du titre : losange de la couleur de marque par défaut (décision de Fabrice, 2026-10-27) ;
   un thème le retire par --theme-title-marker: none. Jamais hors de l'en-tête de page : titres
   d'articles, pages CMS et pages légales n'ont pas la classe. */
.wb-page-header h1::before,
h1.wb-page-header::before {
  content: var(--wb-title-marker);
  display: inline-block;
  width: .45em;
  height: .45em;
  margin: 0 .55em .12em .1em;
  background: var(--wb-primary);
  transform: rotate(45deg);
  vertical-align: middle;
}
.wb-page-header h1 + p,
.wb-page-header h1 + .text-muted,
h1.wb-page-header + p,
h1.wb-page-header + .text-muted {
  /* !important : bat le .text-muted de Bootstrap. */
  color: var(--wb-text-muted) !important;
  font-size: .9375rem;
  margin-top: var(--wb-space-2);
}
/* Actions secondaires de l'en-tête en « ghost » : l'action primaire reste seule à peser. */
.wb-page-header .btn-outline-secondary {
  --bs-btn-border-color: transparent;
  --bs-btn-bg: transparent;
  --bs-btn-color: var(--wb-text-secondary);
  --bs-btn-hover-bg: var(--wb-surface-alt);
  --bs-btn-hover-border-color: transparent;
  --bs-btn-hover-color: var(--wb-text);
  --bs-btn-active-bg: var(--wb-border-color);
  --bs-btn-active-border-color: transparent;
  --bs-btn-active-color: var(--wb-text);
}
.wb-page-header .btn-primary {
  font-weight: 600;
  padding-inline: 1rem;
}
/* Retour vers la liste au-dessus du titre (« ← Processus ») : lien discret. */
.wb-page-header > div > a.small { color: var(--wb-text-muted); }
.wb-page-header > div > a.small:hover { color: var(--wb-primary); }

/* ─── 4. Pages d'authentification ───────────────────────────────────────────── */
/* body.wb-auth-page : posé par _Layout sur les pages du module Auth affichées sans menu latéral
   (connexion, mot de passe oublié, invitation…). Le fond reste uni (--wb-surface) : le fond pointillé
   de la peau produit de référence est une signature de marque, pas de la grammaire. */
.wb-auth-page main .card { border-top: 3px solid var(--wb-primary); }
/* !important : bat les p-* utilitaires des vues. */
.wb-auth-page main .card-body { padding: 2rem !important; }
.wb-auth-page main .card-title {
  font-family: var(--wb-font-display);
  letter-spacing: -0.03em;
}
/* !important : la barre du haut porte un fond !important dans site.css et compat.css. */
.wb-auth-page .navbar { background-color: transparent !important; }

/* ─── 5. Menu mobile ────────────────────────────────────────────────────────── */
#wb-mobile-offcanvas {
  background: var(--wb-rail);
  color: var(--wb-rail-text);
}
#wb-mobile-offcanvas .offcanvas-header {
  border-bottom: 1px solid var(--wb-rail-line);
}
#wb-mobile-offcanvas .offcanvas-header.wb-sidebar-brand-has-logo {
  background: var(--wb-logo-cap);
  border-bottom: 3px solid var(--wb-primary);
}
.wb-offcanvas-brand { color: var(--wb-rail-text-strong); }
.wb-sidebar-brand-has-logo .wb-offcanvas-brand { color: var(--wb-rail); }
#wb-mobile-offcanvas .offcanvas-header .btn-close { filter: var(--bs-btn-close-white-filter); }
#wb-mobile-offcanvas .offcanvas-header.wb-sidebar-brand-has-logo .btn-close { filter: none; }
#wb-mobile-offcanvas .nav-link {
  color: var(--wb-rail-text);
  font-weight: 500;
}
#wb-mobile-offcanvas .nav-link:hover,
#wb-mobile-offcanvas .nav-link:focus { color: var(--wb-rail-text-strong); }
#wb-mobile-offcanvas .nav-link.active {
  color: var(--wb-rail-text-strong);
  font-weight: 600;
  box-shadow: inset 3px 0 0 0 var(--wb-rail-signal);
  background: var(--wb-rail-active);
}
/* !important : bat les utilitaires de couleur de Bootstrap — .text-danger (lien de déconnexion) et .text-body
   (sélecteur de langue), qui donnait un texte sombre sur le rail. */
#wb-mobile-offcanvas .nav-link.text-danger { color: var(--wb-rail-danger) !important; }
#wb-mobile-offcanvas .nav-link.text-body { color: var(--wb-rail-text) !important; }
#wb-mobile-offcanvas hr { border-color: var(--wb-rail-line); opacity: 1; }
#wb-mobile-offcanvas .wb-sidebar-children {
  border-left: 1px solid var(--wb-rail-line);
  margin-left: .5rem;
}
#wb-mobile-offcanvas .dropdown-menu {
  background: var(--wb-rail-raised);
  border-color: var(--wb-rail-line);
}
#wb-mobile-offcanvas .dropdown-item { color: var(--wb-rail-text); }
#wb-mobile-offcanvas .offcanvas-body {
  scrollbar-width: thin;
  scrollbar-color: var(--wb-rail-line) transparent;
}

/* ─── 6. Pied de page ───────────────────────────────────────────────────────── */
.footer {
  background: transparent;
  color: var(--wb-text-muted);
}
.footer a { color: var(--wb-text-muted); }
.footer a:hover { color: var(--wb-text); }