/* ══════════════════════════════════════════════════════════════════════
 *  STOKARA — COQUE COMMUNE  (stokara-shell.css)
 *  ────────────────────────────────────────────────────────────────────
 *  Un seul en-tête, une seule fois, pour TOUTES les pages du site.
 *
 *  Le problème qu'elle règle : chaque page s'était écrit son propre
 *  bandeau. Neuf structures différentes coexistaient (.dashboard-header,
 *  .app-header, .inventory-header, .user-header, header.top, .topbar,
 *  .hdr, .nx-top, .brand-header), de hauteurs allant de 44 à 96 px, avec
 *  des titres de 1 rem à 1,6 rem et des boutons tous différents. En
 *  passant d'une page à l'autre, le bandeau sautait.
 *
 *  Le parti pris : ne PAS réécrire le HTML de 37 pages — ce serait 37
 *  occasions de casser un identifiant ou un gestionnaire d'événement.
 *  On normalise à la place. Cette feuille impose la même apparence à
 *  toutes les racines d'en-tête connues ; stokara-shell.js range leur
 *  contenu dans la même disposition en DÉPLAÇANT les nœuds existants
 *  (les id, les onclick et les écouteurs survivent intacts).
 *
 *  ORDRE DE CHARGEMENT — cette feuille se charge EN DERNIER, après le
 *  <style> de la page, après stokara-ui.css et après mobile.css. Elle
 *  reprend donc à son compte la compaction mobile de l'en-tête, que ses
 *  !important neutraliseraient sinon.
 *
 *      <link rel="stylesheet" href="/assets/stokara-ui.css">
 *      <link rel="stylesheet" href="/assets/mobile.css">
 *      <link rel="stylesheet" href="/assets/stokara-shell.css">
 *      <script defer src="/assets/stokara-shell.js"></script>
 * ══════════════════════════════════════════════════════════════════════ */

:root{
  /* ── Identité ──
     Le bleu nuit du groupe, déjà porté par l'accueil. On le garde : il
     est reconnu, il est sobre, il tient sur un vidéoprojecteur d'atelier
     comme sur un téléphone. */
  --sk-h-grad:linear-gradient(135deg,#1a237e 0%,#3949ab 100%);
  --sk-h-height:60px;          /* hauteur du contenu, hors rembourrage */
  --sk-h-pad-y:.5rem;
  --sk-h-max:1400px;           /* largeur utile, identique partout */
  --sk-h-z:1000;

  /* ── Palette commune (celle de la page de connexion) ──
     Orange et bleu : les deux couleurs du logo. Le bleu porte les fonds et
     la navigation, l'orange marque l'action et le point d'appui. Ces
     jetons sont disponibles sur TOUTES les pages : une page qui veut
     s'aligner n'a plus qu'à écrire var(--sk-or) au lieu de recopier un
     code hexadécimal de plus. */
  --sk-or-clair:#ffdcaf; --sk-or:#f9871a; --sk-or-fonce:#b45106;
  --sk-bl-clair:#aec6ff; --sk-bl:#3949ab; --sk-bl-fonce:#101858;
  --sk-encre:#151c3c; --sk-encre-2:#4b5878; --sk-encre-3:#6d7896;
  --sk-verre:rgba(255,255,255,.55);
  --sk-verre-bord:rgba(255,255,255,.72);
  --sk-verre-flou:blur(26px) saturate(155%);

  /* Jetons repris par le corps des pages (voir « LANGAGE COMMUN ») */
  --sk-r:14px; --sk-r-sm:10px; --sk-pill:999px;
  --sk-ring:0 0 0 3px rgba(249,135,26,.22);
}

/* ══════════════════════════════════════════════════════════════════════
   1. L'EN-TÊTE
   ══════════════════════════════════════════════════════════════════════
   Toutes les racines connues reçoivent EXACTEMENT le même traitement.
   .sk-header est ajoutée par le script : les pages qui n'avaient aucun
   bandeau en reçoivent un, et celles dont la racine porte un nom inconnu
   sont rattrapées par cette classe. */
.sk-header,
header.dashboard-header, header.app-header, header.inventory-header,
header.user-header, header.top, header.topbar, header.hdr, header.nx-top,
header.brand-header, .dashboard-header, .inventory-header, .user-header{
  display:block !important;
  /* ── Le relief ──
     Le bandeau était un aplat dégradé, plat comme une étiquette. Trois
     couches lui donnent du volume, dans le même esprit que les sphères de
     l'accueil : une lueur chaude en haut à droite (la même source de
     lumière que celle qui éclaire les billes), une ombre froide en bas à
     gauche, et le dégradé de marque en dessous. Le liseré clair du haut
     simule l'arête éclairée, l'ombre portée décolle la barre du contenu. */
  background:
    radial-gradient(680px 160px at 88% -30%, rgba(249,135,26,.34) 0%, rgba(249,135,26,0) 70%),
    radial-gradient(520px 200px at 6% 130%, rgba(6,10,40,.42) 0%, rgba(6,10,40,0) 72%),
    var(--sk-h-grad) !important;
  color:#fff !important;
  margin:0 !important;
  padding:var(--sk-h-pad-y) 0 !important;
  border:none !important;
  border-bottom:1px solid rgba(255,255,255,.14) !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,.20),
    inset 0 -1px 0 rgba(0,0,0,.18),
    0 6px 22px rgba(12,18,52,.28) !important;
  position:sticky !important;
  top:0 !important;
  z-index:var(--sk-h-z) !important;
  width:auto !important;
  min-height:0 !important;
  max-height:none !important;
  height:auto !important;
  border-radius:0 !important;
  backdrop-filter:none !important;
  /* Une page pouvait poser une grille ou un flex sur sa balise <header> :
     on repart d'un bloc neutre, la disposition est confiée à .sk-h-in. */
  gap:0 !important;
  align-items:initial !important;
  justify-content:initial !important;
}

/* Le rang intérieur : marque à gauche, actions à droite, rien au milieu.
   Créé (ou récupéré) par le script — c'est LUI qui tient la largeur. */
.sk-h-in{
  max-width:var(--sk-h-max);
  margin:0 auto;
  padding:0 clamp(12px,2.5vw,20px);
  width:100%;
  min-height:var(--sk-h-height);
  display:flex;
  align-items:center;
  gap:.7rem;
  flex-wrap:nowrap;
  /* Plusieurs pages posent un motif décoratif sur leur bandeau via
     ::before/::after en position absolue. Un pseudo-élément positionné se
     peint AU-DESSUS des enfants non positionnés : le titre passait
     derrière le calque et se ternissait (pharmacies, dépôt, gestion
     pharmacie). On se place au-dessus, une bonne fois. */
  position:relative;
  z-index:1;
}

/* ── La marque : logo + titre + sous-titre ── */
.sk-h-brand{
  display:flex; align-items:center; gap:.7rem;
  min-width:0; flex:0 1 auto; text-decoration:none; color:inherit;
}
.sk-h-brand:hover{ color:inherit; text-decoration:none; }
/* ── Note sur la spécificité ──
   Les sélecteurs qui suivent sont volontairement redondants
   (« .sk-header .sk-h-in .sk-h-title » plutôt que « .sk-h-title »).
   Ce n'est pas de la coquetterie : la couche mobile impose
   « .header-title{font-size:1.02rem !important} » et plusieurs pages
   ajoutent leur propre « header.top b{…!important} ». À !important égal,
   c'est la spécificité qui tranche — et une classe simple perdait. Cinq
   tailles de titre différentes subsistaient sur téléphone. */
.sk-header .sk-h-brand img, .sk-header .sk-h-in .logo,
.sk-header .sk-h-in .brand-logo, .sk-header .sk-h-in .app-logo,
.sk-header .sk-h-in .nx-logo, .sk-header .sk-h-in .sk-h-logo{
  height:38px !important; width:38px !important; flex:0 0 auto;
  object-fit:contain !important;
  background:rgba(255,255,255,.12) !important;
  padding:5px !important; border-radius:9px !important;
  margin:0 !important;
  filter:drop-shadow(0 2px 4px rgba(0,0,0,.22));
}
.sk-h-txt{ min-width:0; display:flex; flex-direction:column; justify-content:center; }
/* Le titre : blanc plein. Le dégradé découpé de l'ancienne charte se
   délavait sur les écrans peu contrastés de l'atelier et disparaissait
   à l'impression. */
.sk-header .sk-h-in .sk-h-title{
  font-size:1.12rem !important; font-weight:700 !important;
  line-height:1.2 !important; margin:0 !important; padding:0 !important;
  color:#fff !important; background:none !important;
  -webkit-background-clip:border-box !important; background-clip:border-box !important;
  -webkit-text-fill-color:#fff !important;
  letter-spacing:-.01em;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.sk-header .sk-h-in .sk-h-sub{
  font-size:.76rem !important; font-weight:400 !important;
  line-height:1.25 !important; margin:.08rem 0 0 !important; padding:0 !important;
  color:rgba(255,255,255,.82) !important;
  white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
  display:block;
}
.sk-header .sk-h-in .sk-h-sub:empty{ display:none; }

/* Le vide élastique qui pousse les actions à droite. */
.sk-h-sp{ flex:1 1 auto; min-width:.5rem; }

/* ── Le bouton « ☰ » ──
   Invisible sur écran large, où les actions tiennent en ligne. Il n'apparaît
   qu'au format téléphone, où il devient la seule porte d'entrée vers elles
   (voir le bloc TÉLÉPHONE plus bas). */
.sk-h-burger{
  display:none;
  align-items:center; justify-content:center;
  flex:0 0 auto;
  width:42px; height:42px;
  margin-left:.35rem;
  padding:0;
  background:rgba(255,255,255,.14);
  border:1px solid rgba(255,255,255,.22);
  border-radius:10px;
  color:#fff; font-size:1.15rem; line-height:1;
  cursor:pointer;
  transition:background .16s;
}
.sk-h-burger:hover{ background:rgba(255,255,255,.26); }
.sk-h-burger.open{ background:var(--sk-or); border-color:transparent; }

/* ── Les actions ──
   Boutons et liens du bandeau, tous ramenés au même gabarit : même
   hauteur, même rayon, même translucidité. C'est ce qui donne son
   unité au site plus encore que le fond du bandeau. */
.sk-h-act{
  display:flex; align-items:center; gap:.4rem;
  flex:0 0 auto; flex-wrap:nowrap;
  overflow-x:auto; scrollbar-width:none; max-width:62%;
}
.sk-h-act::-webkit-scrollbar{ display:none; }

.sk-header .sk-h-act > a, .sk-header .sk-h-act > button, .sk-header .sk-h-act > .btn,
.sk-header .sk-h-act > select, .sk-header .sk-h-act > input, .sk-header .sk-h-act > .sk-h-pill{
  display:inline-flex !important; align-items:center; justify-content:center;
  gap:.4rem; flex:0 0 auto;
  min-height:36px !important; height:auto !important;
  padding:0 .8rem !important; margin:0 !important;
  font-size:.82rem !important; font-weight:600 !important; line-height:1 !important;
  color:#fff !important; text-decoration:none !important;
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:9px !important;
  box-shadow:none !important;
  cursor:pointer; white-space:nowrap;
  transition:background .16s, border-color .16s, transform .16s;
}
.sk-h-act > a:hover, .sk-h-act > button:hover, .sk-h-act > .btn:hover,
.sk-h-act > select:hover{
  background:rgba(255,255,255,.26) !important;
  border-color:rgba(255,255,255,.34) !important;
  color:#fff !important;
}
.sk-h-act > *:active{ transform:translateY(1px); }
.sk-h-act > *:disabled, .sk-h-act > .disabled{ opacity:.5; cursor:not-allowed; }
.sk-h-act i, .sk-h-act .bi, .sk-h-act .fas, .sk-h-act .far{
  font-size:.9rem; margin:0 !important; line-height:1;
}
/* Un bouton d'action seule (icône sans texte) reste carré, donc rond au
   survol : sans cela la règle des 36 px l'étirait en ovale. */
.sk-h-act > .sk-h-icon{ width:36px; padding:0 !important; }
/* Le libellé fabriqué pour une icône nue ne sert qu'au menu du téléphone :
   sur écran large, l'icône se suffit et la place manque. */
.sk-h-label-auto{ display:none; }

/* L'action mise en avant d'une page (« Nouveau », « Enregistrer »…) :
   pleine, pour se détacher des actions de navigation. */
.sk-h-act > .sk-h-primary{
  background:rgba(255,255,255,.95) !important;
  border-color:transparent !important;
  color:#1a237e !important;
}
.sk-h-act > .sk-h-primary:hover{ background:#fff !important; color:#141c63 !important; }

/* Une action destructrice reste lisible sur fond bleu nuit. */
.sk-h-act > .sk-h-danger{
  background:rgba(226,0,26,.9) !important; border-color:transparent !important; color:#fff !important;
}
.sk-h-act > .sk-h-danger:hover{ background:#c00017 !important; }

/* ── Pastilles d'information du bandeau ──
   Compte connecté, état « en direct », rôle… Elles ne se cliquent pas :
   elles se distinguent des boutons par un fond plus discret. */
.sk-h-pill{
  background:rgba(255,255,255,.1) !important;
  border:1px solid rgba(255,255,255,.18) !important;
  font-weight:600 !important; font-size:.75rem !important;
  border-radius:var(--sk-pill) !important;
  padding:0 .7rem !important; min-height:28px !important;
  color:rgba(255,255,255,.94) !important;
  cursor:default !important;
}
.sk-h-act > .sk-h-pill:hover{ background:rgba(255,255,255,.1) !important; }

/* ══════════════════════════════════════════════════════════════════════
   LES WIDGETS PORTÉS PAR LE BANDEAU
   ══════════════════════════════════════════════════════════════════════
   C'est ici que se jouait la dernière différence entre deux en-têtes. La
   barre elle-même était bien identique partout — mais ce qu'on y posait ne
   l'était pas du tout : les compteurs des tableaux d'atelier arrivaient en
   grosses tuiles carrées, l'horloge en bloc de deux lignes, le sélecteur de
   compte de l'accueil en pastille blanche, les compteurs de missions en
   étiquettes claires. Chacun gardait la mise en forme de sa page d'origine,
   et deux bandeaux se ressemblaient de loin sans jamais se ressembler
   vraiment.

   Désormais tout ce qui atterrit ici reçoit la MÊME matière que les boutons
   d'à côté : verre translucide, même arrondi, même liseré, même relief.
   Seule la couleur d'alerte (retard, urgence) reste distinctive — c'est la
   seule différence qui porte une information. */
.sk-h-extra{
  display:flex; align-items:center; gap:.4rem;
  flex:0 1 auto; min-width:0; overflow-x:auto; scrollbar-width:none;
  color:#fff;
}
.sk-h-extra::-webkit-scrollbar{ display:none; }

/* ① Les CONTENEURS DE REGROUPEMENT redeviennent de simples rangées.
   Les tableaux d'atelier enveloppent leurs quatre compteurs dans un
   « .kpis », l'accueil ses informations de compte dans un
   « .header-actions ». Sans cette règle, c'est l'enveloppe qui recevait la
   pastille et les compteurs restaient nus à l'intérieur. */
.sk-header .sk-h-extra > .kpis,
.sk-header .sk-h-extra > .header-actions{
  display:flex !important; align-items:center; gap:.4rem;
  background:none !important; border:none !important; box-shadow:none !important;
  padding:0 !important; margin:0 !important; border-radius:0 !important;
  min-height:0;
}

/* ② LE WIDGET : soit un enfant direct de la zone, soit un enfant d'un
   conteneur de regroupement. C'est lui qui porte la pastille. */
.sk-header .sk-h-extra > *,
.sk-header .sk-h-extra > .kpis > *,
.sk-header .sk-h-extra > .header-actions > *{
  flex:0 0 auto;
  display:inline-flex !important; align-items:center; gap:.35rem;
  margin:0 !important;
  padding:.2rem .65rem !important;
  min-height:30px; max-width:none;
  background:rgba(255,255,255,.13) !important;
  border:1px solid rgba(255,255,255,.2) !important;
  border-radius:var(--sk-pill) !important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.16) !important;
  color:#fff !important;
  font-size:.72rem !important; font-weight:600 !important; line-height:1.3 !important;
  white-space:nowrap; text-align:left;
}

/* ③ LE TEXTE À L'INTÉRIEUR d'un widget n'a jamais de fond ni de bord.
   Attention : on ne vise QUE les éléments en ligne. Une première version
   neutralisait « div » aussi — or l'horloge et chaque compteur SONT des
   div : la règle leur retirait la pastille qu'on venait de leur donner. */
.sk-header .sk-h-extra b,
.sk-header .sk-h-extra strong{
  font-size:.95rem !important; font-weight:800 !important; color:#fff !important;
  line-height:1 !important; background:none !important; border:none !important;
  padding:0 !important; margin:0 !important;
}
.sk-header .sk-h-extra span,
.sk-header .sk-h-extra small,
.sk-header .sk-h-extra .clock > div,
.sk-header .sk-h-extra .header-actions span{
  font-size:.7rem !important; font-weight:600 !important;
  color:rgba(255,255,255,.86) !important;
  margin:0 !important; padding:0 !important;
  background:none !important; border:none !important; box-shadow:none !important;
  min-height:0 !important;
}
.sk-header .sk-h-extra img{
  height:20px !important; width:20px !important;
  border-radius:50% !important; padding:0 !important; background:none !important;
}

/* ④ Les seules couleurs conservées : celles qui disent « regarde ici ».
   Placées après ②, elles l'emportent à spécificité égale. */
.sk-header .sk-h-extra .late,
.sk-header .sk-h-extra .retard,
.sk-header .sk-h-extra .danger{ background:rgba(226,0,26,.32) !important; border-color:rgba(255,150,160,.5) !important; }
.sk-header .sk-h-extra .soon,
.sk-header .sk-h-extra .warn{ background:rgba(249,135,26,.32) !important; border-color:rgba(255,190,120,.5) !important; }
.sk-header .sk-h-extra .run,
.sk-header .sk-h-extra .ok{ background:rgba(120,220,255,.22) !important; border-color:rgba(120,220,255,.4) !important; }

/* ⑤ L'horloge des tableaux d'atelier tient sur deux lignes : c'est le seul
   widget qu'on laisse s'écarter du gabarit, parce qu'une heure lisible à
   dix mètres est précisément sa raison d'être. */
.sk-header .sk-h-extra > .clock{
  flex-direction:column !important; align-items:center; gap:0;
  padding:.15rem .8rem !important; line-height:1.15 !important;
}
.sk-header .sk-h-extra > .clock > div:first-child{
  font-size:1.05rem !important; font-weight:800 !important; color:#fff !important;
}
/* Le voyant « en direct » logé dans l'horloge ferait une troisième ligne :
   il est déjà présent en pastille dans les actions, à droite. */
.sk-header .sk-h-extra > .clock > .live{ display:none !important; }

@media (max-width:900px){ .sk-h-extra{ display:none; } }

/* ── Ce que le script laisse de côté ──
   Un champ de recherche ou un sélecteur logé dans le bandeau garde sa
   fonction, mais prend la tenue commune. */
.sk-h-in input[type="text"], .sk-h-in input[type="search"], .sk-h-in select{
  background:rgba(255,255,255,.14) !important;
  border:1px solid rgba(255,255,255,.22) !important;
  color:#fff !important; border-radius:9px !important;
  min-height:36px !important; font-size:.82rem !important;
  padding:0 .7rem !important;
  /* Sans plafond, le champ de recherche de balance.html s'étirait sur la
     moitié du bandeau : il hérite d'un flex-grow de sa page d'origine. */
  width:auto !important; max-width:230px !important; flex:0 1 230px !important;
}
@media (max-width:900px){
  .sk-h-in input[type="text"], .sk-h-in input[type="search"]{ max-width:150px !important; flex-basis:150px !important; }
}
@media (max-width:560px){
  .sk-h-in input[type="text"], .sk-h-in input[type="search"]{ display:none !important; }
}
.sk-h-in input::placeholder{ color:rgba(255,255,255,.6) !important; }
.sk-h-in select option{ color:#1f2937; background:#fff; }

/* Le bouton « menu » de l'accueil : même gabarit que les autres actions. */
.sk-h-in .menu-toggle{
  background:rgba(255,255,255,.14) !important; border:1px solid rgba(255,255,255,.2) !important;
  color:#fff !important; border-radius:9px !important;
  width:36px !important; height:36px !important; min-height:36px !important;
  padding:0 !important; display:inline-flex !important;
  align-items:center; justify-content:center; flex:0 0 auto; font-size:1rem;
}

/* ══════════════════════════════════════════════════════════════════════
   2. L'EN-TÊTE SUR TÉLÉPHONE
   ══════════════════════════════════════════════════════════════════════
   Un bandeau collant de 90 px sur un écran de 700 px, c'est un septième
   de l'écran perdu en permanence. On resserre, sans jamais descendre
   sous 44 px de cible tactile pour les boutons. */
@media (max-width:768px){
  :root{ --sk-h-height:50px; --sk-h-pad-y:.35rem; }
  .sk-header, header.dashboard-header, header.app-header, header.inventory-header,
  header.user-header, header.top, header.topbar, header.hdr, header.nx-top,
  header.brand-header, .dashboard-header, .inventory-header, .user-header{
    padding-top:max(.35rem,env(safe-area-inset-top)) !important;
    padding-bottom:.35rem !important;
  }
  .sk-h-in{ padding:0 10px; gap:.5rem; }
  .sk-header .sk-h-brand img, .sk-header .sk-h-in .logo,
  .sk-header .sk-h-in .brand-logo, .sk-header .sk-h-in .app-logo,
  .sk-header .sk-h-in .nx-logo, .sk-header .sk-h-in .sk-h-logo{
    height:32px !important; width:32px !important; padding:4px !important; }
  .sk-header .sk-h-in .sk-h-title{ font-size:.98rem !important; }
  .sk-header .sk-h-in .sk-h-sub{ font-size:.68rem !important; }
  /* ══ Les actions sur téléphone : un seul bouton, un panneau ══
     Deux essais avant celui-ci, et ils avaient chacun leur défaut.
     Avec les libellés, trois boutons faisaient déjà déborder la barre, qui
     se mettait à glisser latéralement — un geste que personne ne découvre
     seul, et qui cache les dernières actions. En icônes nues, tout tenait
     mais plus rien ne se lisait : six pictogrammes alignés dont on devine
     le sens, et le titre écrasé à « Ta… » sur l'accueil.

     Le bouton « ☰ » règle les deux : la barre ne porte plus que la marque
     et lui. Tout le reste descend dans un panneau qui s'ouvre au toucher,
     où chaque action retrouve son libellé en toutes lettres et une cible
     de 44 px. C'est la disposition que tout le monde connaît, et c'est
     celle que l'accueil utilisait déjà pour son propre menu. */
  .sk-h-burger{ display:inline-flex !important; }

  .sk-header .sk-h-act{
    position:absolute;
    top:100%; right:.5rem; left:.5rem;
    z-index:20;
    flex-direction:column;
    align-items:stretch;
    gap:.3rem;
    max-width:none;
    padding:.5rem;
    overflow:visible;
    background:linear-gradient(160deg,#1b2568,#141c52);
    border:1px solid rgba(255,255,255,.2);
    border-top:none;
    border-radius:0 0 14px 14px;
    box-shadow:0 18px 40px rgba(6,10,32,.55);
    /* Fermé par défaut : c'est le script qui pose la classe « open ». */
    display:none;
  }
  .sk-header .sk-h-act.open{ display:flex; }

  /* Dans le panneau, les libellés reviennent : c'est tout l'intérêt. */
  .sk-header .sk-h-act .sk-h-label{ display:inline !important; }
  .sk-header .sk-h-act > a,
  .sk-header .sk-h-act > button,
  .sk-header .sk-h-act > .btn,
  .sk-header .sk-h-act > select{
    width:auto !important;
    justify-content:flex-start !important;
    padding:0 .9rem !important;
    min-height:44px !important;
    font-size:.88rem !important;
    border-radius:10px !important;
    background:rgba(255,255,255,.1) !important;
  }
  .sk-header .sk-h-act > .sk-h-icon{ width:auto !important; }
  .sk-header .sk-h-act > .sk-h-pill{
    display:flex !important;
    justify-content:flex-start;
    min-height:34px !important;
    background:rgba(255,255,255,.06) !important;
  }
  .sk-header .sk-h-act i{ width:1.3rem; text-align:center; }

  /* La marque reprend toute la largeur laissée par les actions : le titre
     n'est plus tronqué, le sous-titre non plus. */
  .sk-h-brand{ flex:1 1 auto; min-width:0; }
  /* Toutes les commandes du bandeau — y compris celles qu'un habillage de
     page a transformées en <div> ou en <label> — atteignent la cible
     tactile. Le « :not » épargne les pastilles, qui ne se cliquent pas. */
  .sk-header .sk-h-act > *:not(.sk-h-pill){
    min-height:40px !important; padding:0 .6rem !important; font-size:.78rem !important;
  }
  .sk-header .sk-h-act > .sk-h-pill{ min-height:30px !important; }
  .sk-header .sk-h-act > .sk-h-icon{ width:40px; padding:0 !important; }
  .sk-h-in .menu-toggle{ width:40px !important; height:40px !important; min-height:40px !important; }
  /* Sous 560 px, le texte des actions disparaît : seules les icônes
     restent. Cinq boutons libellés ne tiennent pas sur 390 px, et un
     bandeau qui glisse horizontalement se manipule mal au pouce. */
}
@media (max-width:560px){
  /* Les pastilles d'état (« en direct », « 0 en ligne »…) disparaissent :
     à cette largeur elles se faisaient couper en plein mot par le bord de
     l'écran, ce qui salissait le bandeau sans rien apprendre. Le corps de
     la page porte la même information, en entier. */
  .sk-header .sk-h-act > .sk-h-pill{ display:none !important; }
  /* Le sous-titre, lui, RESTE. Il tenait très bien sur 390 px avec ses
     points de suspension, et c'est souvent lui qui distingue deux pages
     au titre voisin (« Stock matériel » — service qualité ou entretien ?). */
}

/* Impression : le bandeau ne consomme pas la première page. */
@media print{
  .sk-header, header.dashboard-header, header.app-header, header.inventory-header,
  header.user-header, header.top, header.topbar, header.hdr, header.nx-top{
    display:none !important;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   3. LE DÉCOR DE SPHÈRES  (accueil et connexion uniquement)
   ══════════════════════════════════════════════════════════════════════
   Réservé aux deux pages « vitrine » : celle par laquelle on entre et celle
   qui accueille. Les pages de travail ne l'ont pas — un décor animé derrière
   un tableau de trois cents lignes fatigue et n'apporte rien. Elles reçoivent
   en revanche la même palette (les jetons --sk-or / --sk-bl ci-dessus).

   Les sphères sont dessinées en CSS : deux dégradés radiaux superposés (la
   tache de lumière d'abord, le volume ensuite) et une ombre interne pour
   creuser le côté opposé à la source lumineuse. Aucune image téléchargée,
   et un rendu net à toute définition d'écran.

   Le préfixe « sk- » n'est pas décoratif : board.html a déjà un « .halo » et
   frais_alarmes.html une « .scene », qui n'ont rien à voir. Sans préfixe,
   cette feuille les aurait écrasés.

   Usage — coller ce bloc juste après <body> :
       <div class="sk-scene" aria-hidden="true">
         <span class="sk-filigrane"></span><span class="sk-halo"></span>
         <span class="sk-orb bleu sk-o1"></span> … (jusqu'à sk-o9)
       </div>                                                            */
/* z-index NÉGATIF, et c'est important.
   La première version posait la scène en z-index:0 et remontait le contenu
   des pages par « .sk-scene ~ main, ~ .mobile-nav… { position:relative } ».
   Erreur : le menu mobile et son voile étaient déjà en position:fixed. Leur
   imposer « relative » les a fait retomber dans le flux, où ils ont pris
   576 px de hauteur et repoussé toute la page vers le bas.

   Ici, la scène descend d'elle-même sous le contenu et ne touche à AUCUN
   élément de la page. Elle reste au-dessus du fond du corps de page, qui
   est peint sur la toile racine. */
.sk-scene{
  position:fixed; inset:0; overflow:hidden; z-index:-1; pointer-events:none;
}
/* Variante atténuée, pour une page qui a du contenu à lire par-dessus.
   Sur la connexion, le décor peut occuper l'écran : il n'y a qu'une carte.
   Sur l'accueil, il y a trente tuiles — à pleine intensité, les sphères
   passaient entre elles et l'œil ne savait plus où se poser. */
.sk-scene.discret{ opacity:.5; }

/* Une page qui pose un fond opaque sur son corps masquerait la scène : le
   fond du corps est peint sur la toile, donc au-dessus d'un z-index négatif.
   Les deux pages concernées gardent un fond translucide ; si une troisième
   s'ajoute un jour, c'est la première chose à vérifier. */
.sk-orb{
  position:absolute; border-radius:50%;
  background:
    radial-gradient(circle at 32% 26%, rgba(255,255,255,.92) 0%, rgba(255,255,255,0) 42%),
    radial-gradient(circle at 34% 30%, var(--c1) 0%, var(--c2) 58%, var(--c3) 100%);
  box-shadow:
    inset -14px -18px 42px rgba(0,0,0,.30),
    inset 8px 10px 26px rgba(255,255,255,.18),
    0 30px 60px rgba(16,24,64,.22);
  animation:sk-flotte var(--duree,22s) ease-in-out infinite;
  animation-delay:var(--retard,0s);
  will-change:transform;
}
.sk-orb.orange{ --c1:var(--sk-or-clair); --c2:var(--sk-or); --c3:var(--sk-or-fonce); }
.sk-orb.bleu  { --c1:var(--sk-bl-clair); --c2:var(--sk-bl); --c3:var(--sk-bl-fonce); }

@keyframes sk-flotte{
  0%,100%{ transform:translate3d(0,0,0); }
  50%    { transform:translate3d(var(--dx,16px), var(--dy,-26px), 0); }
}

/* Composition : trois grosses masses qui cadrent le contenu, des satellites
   pour la profondeur, et des billes coupées par le bord pour que la scène
   paraisse continuer hors de l'écran. */
.sk-o1{ width:300px; height:300px; top:-78px;    left:6%;      --dx:20px;  --dy:26px;  --duree:26s; }
.sk-o2{ width:190px; height:190px; top:12%;      left:26%;     --dx:-18px; --dy:-22px; --duree:20s; --retard:-4s; }
.sk-o3{ width:128px; height:128px; top:6%;       right:20%;    --dx:14px;  --dy:22px;  --duree:17s; --retard:-8s; }
.sk-o4{ width:400px; height:400px; bottom:-140px;right:-90px;  --dx:-22px; --dy:-18px; --duree:30s; }
.sk-o5{ width:220px; height:220px; bottom:6%;    left:-70px;   --dx:18px;  --dy:-24px; --duree:24s; --retard:-6s; }
.sk-o6{ width:92px;  height:92px;  top:34%;      right:8%;     --dx:-16px; --dy:20px;  --duree:15s; --retard:-3s; }
.sk-o7{ width:64px;  height:64px;  top:22%;      right:34%;    --dx:12px;  --dy:18px;  --duree:13s; --retard:-9s; }
.sk-o8{ width:250px; height:250px; bottom:-60px; left:30%;     --dx:-20px; --dy:-16px; --duree:28s; --retard:-12s; }
.sk-o9{ width:74px;  height:74px;  bottom:26%;   right:26%;    --dx:16px;  --dy:-20px; --duree:16s; --retard:-5s; }

/* Le halo détache le contenu des sphères : sans lui, un contraste fort
   passerait de temps à autre juste derrière une ligne de texte. */
.sk-halo{
  position:absolute; top:50%; left:50%;
  width:min(660px,128vw); height:min(660px,128vw);
  transform:translate(-50%,-50%); border-radius:50%;
  background:radial-gradient(circle, rgba(255,255,255,.55) 0%, rgba(255,255,255,.16) 55%, rgba(255,255,255,0) 72%);
}

/* Le filigrane de marque : ImageSite/Fond.webp est le logotype « STOKARA »
   posé sur du blanc. Étiré en « cover », il remplissait l'écran d'un logo
   géant recadré au hasard selon la fenêtre. En fusion « multiply », le blanc
   devient transparent et seules les lettres subsistent : la marque est là,
   en grand, sans écraser le contenu.

   Il est posé en BAS À GAUCHE, pas au centre : centré, la carte de connexion
   lui tombait pile au milieu et on ne lisait plus que « S…ARA ». Dans
   l'angle, il reste entier et ne rencontre jamais le contenu. */
.sk-filigrane{
  position:absolute; inset:0;
  background:url("/ImageSite/Fond.webp") no-repeat left -3% bottom 4% / min(560px,62vw) auto;
  opacity:.16; mix-blend-mode:multiply;
}

@media (max-width:768px){
  /* Sur un téléphone, la carte occupe presque tout : le filigrane passerait
     derrière elle. On le réduit et on le pousse tout en bas. */
  .sk-filigrane{ background-size:min(360px,72vw) auto; background-position:center bottom 2%; opacity:.12; }

  /* Dimensionnées pour un écran large, deux sphères couvriraient la moitié
     des 390 px d'un téléphone. On les réduit, on écarte les grosses vers les
     bords, et on retire les satellites qui tombaient pile derrière le
     contenu utile. */
  .sk-o1{ width:190px; height:190px; top:-60px; left:-30px; }
  .sk-o2{ width:110px; height:110px; top:9%;    left:52%; }
  .sk-o3{ width:74px;  height:74px;  top:4%;    right:8%; }
  .sk-o4{ width:260px; height:260px; bottom:-110px; right:-90px; }
  .sk-o5{ width:150px; height:150px; bottom:10%; left:-70px; }
  .sk-o6{ width:56px;  height:56px;  top:30%;   right:4%; }
  .sk-o8{ width:160px; height:160px; bottom:-60px; left:34%; }
  .sk-o7, .sk-o9{ display:none; }
  .sk-halo{ width:132vw; height:132vw; }
}

/* Un décor qui bouge peut gêner, voire donner la nausée. Le système le
   signale, on l'écoute : les sphères s'immobilisent, la scène ne change pas
   d'un pixel. */
@media (prefers-reduced-motion:reduce){
  .sk-orb{ animation:none !important; }
}

/* ══════════════════════════════════════════════════════════════════════
   4. LANGAGE COMMUN DU CORPS DE PAGE
   ══════════════════════════════════════════════════════════════════════
   Le bandeau ne suffit pas à faire un site : deux pages au même en-tête
   mais l'une aux angles vifs et l'autre aux gros arrondis se lisent
   encore comme deux produits. On aligne donc les quelques traits qui se
   remarquent — fond, arrondis, ombres, focus, en-têtes de tableau.

   TOUT CE BLOC EST DANS UNE COUCHE @layer, et c'est capital : une règle
   en couche perd TOUJOURS face à une règle sans couche, quel que soit
   l'ordre de chargement. Or cette feuille est chargée en dernier — sans
   ce garde-fou, mon fond clair effaçait celui de chaque page qui en avait
   choisi un. reset.html a perdu son bleu au premier essai ; les tableaux
   d'atelier et la vidéosurveillance, tout aussi sombres, y passaient
   aussi. Ici, une page qui ne dit rien hérite du socle commun ; une page
   qui a fait un choix le garde. C'est un socle, pas une camisole.

   (Si un très vieux navigateur ignore @layer, il ignore le bloc entier :
   chaque page conserve alors son apparence actuelle. Aucune casse.) */
@layer stokara-socle {

  body{
    background:radial-gradient(circle at top,#eaf1fb 0,#eef1f6 45%,#e6eaf1 100%);
    background-attachment:fixed;
    color:#1f2430;
  }

  /* Cartes, panneaux, cadres : même arrondi, même ombre, même filet. */
  .card, .panel, .sk-card{
    border-radius:var(--sk-r);
    border:1px solid #e6eaf1;
    box-shadow:0 3px 12px rgba(16,24,40,.07);
  }

  /* ── Champs : un seul anneau de focus sur tout le site ──
     Orange, comme sur la page de connexion. C'est le détail qui fait le
     plus pour l'impression d'unité : on le voit à chaque clic dans un
     champ, sur chaque page, et il était jusqu'ici bleu ici, gris là,
     absent ailleurs. */
  input:focus-visible, select:focus-visible, textarea:focus-visible,
  .form-control:focus, .form-select:focus{
    outline:none;
    border-color:var(--sk-or);
    box-shadow:var(--sk-ring);
  }

  /* Les boutons principaux de Bootstrap prennent le bleu de marque, et le
     bouton d'action positive l'orange — la même hiérarchie que sur la
     connexion : le bleu navigue, l'orange engage. */
  .btn-primary{
    background:linear-gradient(135deg,#3949ab 0%,#2a3690 100%);
    border-color:transparent;
  }
  .btn-primary:hover, .btn-primary:focus{
    background:linear-gradient(135deg,#4757c4 0%,#31409f 100%);
    border-color:transparent;
  }
  .btn-warning, .btn-orange{
    background:linear-gradient(135deg,#fb8c1a 0%,#ef6c0a 100%);
    border-color:transparent; color:#fff;
  }
  .btn-warning:hover, .btn-orange:hover{
    background:linear-gradient(135deg,#ff9c31 0%,#f9781a 100%); color:#fff;
  }

  /* La sélection de texte reprend l'orange : un rappel discret, présent
     partout, qui ne coûte aucune place. */
  ::selection{ background:rgba(249,135,26,.28); }

  /* En-têtes de tableau : petites capitales grises, même partout. */
  table thead th, .table thead th{
    font-size:.72rem; text-transform:uppercase; letter-spacing:.03em;
    font-weight:700; color:#6b7280;
  }

  /* Barre de défilement discrète, cohérente d'une page à l'autre. */
  *{ scrollbar-width:thin; scrollbar-color:#c3cbd9 transparent; }
  *::-webkit-scrollbar{ width:10px; height:10px; }
  *::-webkit-scrollbar-thumb{ background:#c3cbd9; border-radius:99px; border:3px solid transparent; background-clip:content-box; }
  *::-webkit-scrollbar-thumb:hover{ background:#a7b2c4; background-clip:content-box; }
}

@media (prefers-reduced-motion:reduce){
  .sk-h-act > *{ transition:none !important; }
}