/*!
 * Lamarck UI v1.0 — Navigation unifiée (top bar « lkbar »).
 * UN SEUL modèle de navigation pour TOUTES les apps. Remplace .topbar,
 * .app-header, .brand-header, .lk-sidebar comme chrome principal.
 * Charger après ds-tokens.css.
 */

.lkbar { position:sticky; top:0; z-index:50; background:var(--surface);
  border-bottom:1px solid var(--border);
  backdrop-filter:saturate(150%) blur(8px); -webkit-backdrop-filter:saturate(150%) blur(8px); }

/* Icônes sprite de la top bar : rendu monoline (hérité par les <use>).
   Sans ça les symboles icons.svg s'affichent en aplat noir. */
.lkbar svg, .lkbar-switcher svg { fill:none; stroke:currentColor; stroke-width:1.7;
  stroke-linecap:round; stroke-linejoin:round; }

/* Pleine largeur, aligné sur la gouttière du <main> (padding:20px 24px),
   pour que logo/avatar/onglets s'alignent verticalement avec le contenu. */
.lkbar-row { width:100%; margin:0; padding:9px 24px;
  display:flex; align-items:center; gap:16px; min-height:46px; }

/* Marque : vrai logo Lamarck (wordmark). Clic = retour portail (direct). */
.lkbar-brand { display:flex; align-items:center; gap:12px; text-decoration:none; cursor:pointer; }
.lkbar-logo { height:23px; width:auto; display:block; }
/* invert() rend le fond du PNG noir : lighten le fond dans le chrome sombre
   (max(noir, surface) = surface), seules les lettres claires restent. */
:root[data-theme="dark"] .lkbar-logo { filter:invert(1) hue-rotate(180deg) brightness(1.05);
  mix-blend-mode:lighten; }
.lkbar-sep { width:1px; height:20px; background:var(--border); }
/* Contexte d'app — discret par défaut, masquable (cf. [data-appctx]) */
.lkbar-app { font-size:13.5px; font-weight:600; letter-spacing:-.01em; color:var(--muted); }
.lkbar-spacer { flex:1; }

/* Fil d'Ariane dans la barre (variante "breadcrumb") — sert AUSSI de retour */
.lkbar-crumb { display:flex; align-items:center; gap:7px; font-size:13.5px; color:var(--muted); white-space:nowrap; }
.lkbar-crumb a { color:var(--muted); font-weight:500; }
.lkbar-crumb a:hover { color:var(--accent); text-decoration:none; }
.lkbar-crumb .sep { color:var(--border-2); }
.lkbar-crumb .cur { color:var(--text); font-weight:600; }

/* App-switcher : clic logo → menu (retour portail + apps). Variante. */
/* Panneau borné en hauteur + ascenseur : la flotte complète (22 apps + 6
   intitulés de thème) dépasse l'écran — sans ça le bas du menu était
   inatteignable (cf. bug juin 2026). `sticky` colle le « Retour au portail »
   en tête pendant le scroll de la grille. */
.lkbar-switcher { position:absolute; left:20px; top:52px; width:300px; max-width:calc(100vw - 28px);
  max-height:min(72vh, 560px); overflow-y:auto; overscroll-behavior:contain;
  background:var(--surface); border:1px solid var(--border); border-radius:var(--r-md);
  padding:6px; box-shadow:var(--sh-lg); display:none; z-index:70; }
.lkbar-switcher.open { display:block; }
.lkbar-switcher .home { position:sticky; top:0; z-index:1; display:flex; align-items:center; gap:9px;
  padding:8px 10px; border-radius:8px; font-weight:600; font-size:13px; color:var(--accent);
  background:var(--surface); }
.lkbar-switcher .home:hover { background:var(--accent-light); text-decoration:none; }
.lkbar-switcher .home svg { width:15px; height:15px; }
.lkbar-switcher hr { border:0; border-top:1px solid var(--border); margin:4px; }
.lkbar-switcher .grid { display:grid; grid-template-columns:1fr 1fr; gap:2px; }
/* Intitulé de thème : sépare les blocs d'apps par groupe (pleine largeur). */
.lkbar-switcher .grid .cat { grid-column:1 / -1; font-size:10px; font-weight:600;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  padding:6px 8px 2px; }
.lkbar-switcher .grid .cat:not(:first-child) { border-top:1px solid var(--border);
  margin-top:3px; }
.lkbar-switcher .grid a { display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:7px;
  font-size:12.5px; line-height:1.2; color:var(--text); }
.lkbar-switcher .grid a:hover { background:var(--surface-2); text-decoration:none; }
.lkbar-switcher .grid a .d { width:22px; height:22px; border-radius:6px; flex:none; display:grid; place-items:center; color:#fff; }
.lkbar-switcher .grid a .d svg { width:12px; height:12px; }

/* Nav primaire — icône + label, soulignement actif */
.lkbar-nav { display:flex; align-items:center; gap:3px; }
.lkbar-nav a { display:inline-flex; align-items:center; gap:8px; padding:8px 13px;
  font-size:14px; font-weight:500; color:var(--text-2); border-radius:9px;
  text-decoration:none; transition:background .12s, color .12s; }
.lkbar-nav a svg { width:16px; height:16px; opacity:.85; }
.lkbar-nav a:hover { background:var(--surface-2); color:var(--text); text-decoration:none; }
.lkbar-nav a.active { background:var(--accent-light); color:var(--accent); font-weight:600; }
.lkbar-nav a.active svg { opacity:1; }

/* Variante "soulignée" (opt-in via .lkbar.underline) — proche cockpit legacy */
.lkbar.underline .lkbar-nav a { border-radius:0; padding:8px 12px;
  border-bottom:2px solid transparent; }
.lkbar.underline .lkbar-nav a.active { background:transparent; border-bottom-color:var(--accent); }

/* ── Rangée 2 : onglets PROPRES À L'APP ───────────────────────────────
   Chrome (rangée 1) = identique partout. Cette rangée porte la nav
   spécifique de l'app (sections du portail, vues d'un cockpit…).
   Soulignés, scroll horizontal swipeable sur mobile. */
.lkbar-tabs { display:flex; gap:2px; width:100%; margin:0;
  padding:0 24px; overflow-x:auto; scrollbar-width:none; }
.lkbar-tabs::-webkit-scrollbar { display:none; }
.lkbar-tabs a { display:inline-flex; align-items:center; gap:7px; padding:11px 14px;
  font-size:13.5px; font-weight:500; color:var(--text-2); border-bottom:2px solid transparent;
  white-space:nowrap; transition:color .12s, border-color .12s; }
.lkbar-tabs a svg { width:15px; height:15px; opacity:.8; }
.lkbar-tabs a:hover { color:var(--text); text-decoration:none; }
.lkbar-tabs a.active { color:var(--accent); border-bottom-color:var(--accent); font-weight:600; }
.lkbar-tabs a.active svg { opacity:1; }
.lkbar.has-tabs .lkbar-row { padding-bottom:0; }
.lkbar.has-tabs .lkbar-tabs { border-top:1px solid var(--border); margin-top:6px; }

/* Recherche globale (⌘K) */
.lkbar-search { display:flex; align-items:center; gap:9px; width:280px; max-width:32vw;
  background:var(--surface-2); border:1px solid transparent; border-radius:10px;
  padding:9px 12px; color:var(--muted); font-size:13.5px; cursor:text; transition:.15s; }
.lkbar-search:hover { background:var(--border); }
.lkbar-search:focus-within { background:var(--surface); border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-ring); }
.lkbar-search svg { width:16px; height:16px; flex:none; }
.lkbar-search .kbd { margin-left:auto; font:600 10px/1 var(--font-mono); color:var(--muted);
  background:var(--surface); border:1px solid var(--border); border-radius:5px; padding:4px 6px; }

/* Boutons d'icône (notifs…) */
.lkbar-iconbtn { width:38px; height:38px; border-radius:10px; display:grid; place-items:center;
  color:var(--text-2); border:1px solid var(--border); background:var(--surface);
  cursor:pointer; position:relative; transition:.15s; }
.lkbar-iconbtn:hover { background:var(--surface-2); }
.lkbar-iconbtn svg { width:18px; height:18px; }
.lkbar-iconbtn .badge-count { position:absolute; top:-5px; right:-5px; min-width:17px; height:17px;
  padding:0 4px; border-radius:9px; background:var(--red); color:#fff; font:700 10px/17px var(--font);
  text-align:center; border:2px solid var(--surface); }

/* Pastille utilisateur + dropdown */
.lkbar-user { position:relative; }
.lkbar-avatar { width:38px; height:38px; border-radius:50%; border:0; cursor:pointer;
  background:linear-gradient(135deg, var(--accent), var(--accent-dark)); color:#fff;
  font-weight:700; font-size:13px; display:grid; place-items:center; transition:transform .1s; }
.lkbar-avatar:hover { transform:scale(1.05); }
.lkbar-menu { position:absolute; right:0; top:48px; min-width:248px; background:var(--surface);
  border:1px solid var(--border); border-radius:var(--r-md); padding:6px; box-shadow:var(--sh-lg);
  display:none; }
.lkbar-menu.open { display:block; }
.lkbar-menu-user { padding:10px 12px 8px; font-size:14px; font-weight:600; color:var(--text); }
.lkbar-menu-sub { padding:0 12px 10px; font-size:12px; color:var(--muted); }
.lkbar-menu-section { padding:8px 12px 4px; font:600 10px/1 var(--font-mono); text-transform:uppercase;
  letter-spacing:.08em; color:var(--muted); }
.lkbar-menu a, .lkbar-menu button { display:flex; align-items:center; gap:10px; width:100%;
  padding:9px 12px; text-align:left; background:transparent; border:0; border-radius:8px;
  color:var(--text); font:inherit; font-size:13.5px; cursor:pointer; text-decoration:none; }
.lkbar-menu a svg, .lkbar-menu button svg { width:16px; height:16px; color:var(--muted); }
.lkbar-menu a:hover, .lkbar-menu button:hover { background:var(--surface-2); text-decoration:none; }
.lkbar-menu hr { border:0; border-top:1px solid var(--border); margin:6px 4px; }
.lkbar-theme { display:flex; gap:4px; padding:4px 6px 6px; }
.lkbar-theme button { flex:1; padding:7px 10px; border:1px solid var(--border); border-radius:8px;
  background:var(--surface-2); color:var(--text); font:600 12px var(--font); cursor:pointer; }
.lkbar-theme button.on { background:var(--accent); color:#fff; border-color:var(--accent); }

/* Burger (mobile) — caché en desktop */
.lkbar-burger { display:none; width:38px; height:38px; border:1px solid var(--border);
  background:var(--surface); border-radius:10px; color:var(--text); cursor:pointer;
  align-items:center; justify-content:center; }
.lkbar-burger svg { width:20px; height:20px; }

/* ── RESPONSIVE / iPhone (≤ 720px) ────────────────────────────────────
   La nav primaire bascule en feuille déroulante (drawer) déclenchée par
   le burger. La recherche se réduit à une icône. Tout reste atteignable. */
@media (max-width:720px) {
  /* Plus d'air vertical : les boutons font 38px, on leur donne 14px de
     marge (au lieu de 8) → barre ~67px, contrôles bien centrés et non
     tassés contre les bords. */
  .lkbar-row { padding:14px 14px; gap:10px; }
  /* Sur desktop, .lkbar.has-tabs colle la rangée d'onglets sous la rangée 1
     (padding-bottom:0). Mais sur mobile les onglets passent en drawer flottant
     (hors flux), donc ce 0 laissait la rangée 1 tassée en bas (14px en haut,
     0 en bas). On restaure une marge symétrique. */
  .lkbar.has-tabs .lkbar-row { padding-bottom:14px; }
  .lkbar-switcher { top:64px; }   /* suit la barre élargie (~67px) */
  .lkbar-app { display:none; }
  .lkbar-search { width:38px; max-width:38px; padding:9px; border-radius:10px; }
  .lkbar-search .kbd, .lkbar-search .ph { display:none; }
  .lkbar-burger { display:inline-flex; }
  /* Drawer mobile : le markup rend .lkbar-tabs (rangée 2) et le burger
     toggle .open dessus (lkToggleNav). .lkbar-nav est gardé en alias pour
     les apps qui auraient conservé l'ancien nom. Le sélecteur préfixé
     .lkbar.has-tabs sert à battre la règle desktop border-top/margin-top. */
  .lkbar.has-tabs .lkbar-tabs,
  .lkbar-tabs, .lkbar-nav { position:fixed; inset:66px 0 auto 0; flex-direction:column; gap:2px;
    background:var(--surface); border-top:none; border-bottom:1px solid var(--border);
    box-shadow:var(--sh-lg); margin-top:0;
    padding:8px; align-items:stretch; transform:translateY(-8px); opacity:0; pointer-events:none;
    transition:opacity .15s, transform .15s; z-index:60; }
  .lkbar.has-tabs .lkbar-tabs.open,
  .lkbar-tabs.open, .lkbar-nav.open { transform:translateY(0); opacity:1; pointer-events:auto; }
  .lkbar-tabs a, .lkbar-nav a { padding:12px 14px; font-size:15px; border-radius:10px;
    border-bottom:none; }
  .lkbar-tabs a svg, .lkbar-nav a svg { width:18px; height:18px; }
  .lkbar-tabs a.active, .lkbar-nav a.active { background:var(--accent-light); }
}

/* Zone de contenu standard sous la top bar */
.lk-main { max-width:min(1320px,96vw); margin:0 auto; padding:28px 22px 64px; }
@media (max-width:720px) { .lk-main { padding:18px 14px 48px; } }

/* ── Palette de commandes ⌘K (lkpalette.js) ───────────────────────────
   Overlay centré + champ + listbox. Deux groupes : « Cette app »
   (LK_SEARCH_ITEMS ou fallback onglets lkbar) et « Autres apps »
   (grille du switcher). État actif = .on (grammaire DS). */
.lkp-overlay { position:fixed; inset:0; background:rgba(0,0,0,.45); z-index:5000;
  display:none; align-items:flex-start; justify-content:center; padding:12vh 16px 16px; }
.lkp-overlay.open { display:flex; }
.lkp-box { width:100%; max-width:560px; background:var(--surface);
  border:1px solid var(--border-2); border-radius:var(--r-xl); box-shadow:var(--sh-lg);
  overflow:hidden; }
.lkp-input { width:100%; border:0; outline:none; background:transparent;
  color:var(--text); font:500 16px/1.4 var(--font); padding:16px 18px;
  border-bottom:1px solid var(--border); }
.lkp-input::placeholder { color:var(--muted); }
.lkp-list { max-height:46vh; overflow-y:auto; padding:6px; }
.lkp-section { font:600 10px/1 var(--font-mono); letter-spacing:.06em;
  text-transform:uppercase; color:var(--muted); padding:10px 12px 5px; }
.lkp-opt { display:flex; align-items:center; gap:10px; padding:9px 12px;
  border-radius:var(--r); cursor:pointer; color:var(--text); font-size:14px; }
.lkp-opt.on { background:var(--accent-light); color:var(--accent); }
.lkp-opt .lkp-group { margin-left:auto; font-size:11px; color:var(--muted); }
.lkp-empty { padding:18px 12px; color:var(--muted); font-size:13px; text-align:center; }
@media (max-width:720px) { .lkp-overlay { padding-top:8vh; } .lkp-list { max-height:55vh; } }

/* ── Bandeau impersonation — partagé toutes apps ──────────────────────
   Rendu par app_base_v2.html juste sous la top bar quand l'user courant
   est impersonné (un admin qui « voit comme » un autre user). Remonté du
   portail vers le shared pour s'afficher à l'identique sur les satellites.
   Fond ambré PLEIN + texte blanc = beaucoup plus voyant que l'ancien
   amber-light/amber du portail. En flux normal sous la top bar sticky
   (la top bar elle-même reste visible au scroll). */
.lk-impersonate-banner {
  background:var(--amber); color:#fff;
  border-bottom:1px solid rgba(0,0,0,.18);
  box-shadow:0 1px 4px rgba(0,0,0,.14);
  font-size:13px; line-height:1.4; letter-spacing:-.005em;
}
.lk-impersonate-inner {
  width:100%; margin:0; padding:9px 24px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}
.lk-impersonate-msg { display:inline-flex; align-items:center; gap:9px; min-width:0; }
.lk-impersonate-ico {
  display:inline-flex; flex:0 0 auto; width:18px; height:18px;
}
.lk-impersonate-ico svg {
  width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8;
  stroke-linecap:round; stroke-linejoin:round;
}
.lk-impersonate-txt { min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.lk-impersonate-name { font-weight:700; }
.lk-impersonate-sub { opacity:.82; font-size:11.5px; letter-spacing:.01em; }
.lk-impersonate-banner .lk-impersonate-stop {
  flex:0 0 auto; background:#fff; color:var(--amber);
  border:1px solid #fff; border-radius:7px; padding:5px 13px;
  cursor:pointer; font:inherit; font-size:12px; font-weight:600;
  letter-spacing:-.005em; transition:background .15s, color .15s, opacity .15s;
}
.lk-impersonate-banner .lk-impersonate-stop:hover { background:transparent; color:#fff; }
.lk-impersonate-banner .lk-impersonate-stop:active { opacity:.85; }
/* Mobile : on masque le sous-texte « impersonation admin » pour gagner
   de la place — l'icône œil + le fond ambré + le bouton suffisent. */
@media (max-width:640px) {
  .lk-impersonate-sub { display:none; }
  .lk-impersonate-inner { padding:8px 12px; gap:10px; }
}