/* ════════════════════════════════════════════════════════════════════════
   shared/shell.css — App shell « Appli » (DA 2026) : top bar fine + sidebar
   gauche (desktop) / barre du bas (mobile). Injecté par shared/shell.js.
   Utilise les tokens + classes de shared/da.css (jour+nuit).
   ════════════════════════════════════════════════════════════════════════ */
.bb-shell{ min-height:100vh; background:var(--bg); }
/* Agrandissement (≈ zoom navigateur 150 %) — DESKTOP seulement (mobile = priorité reportée). Tunable ici.
   NB : sous zoom, les unités vh se résolvent sur le viewport RÉEL puis sont ×1.4 → on divise les vh par le facteur. */
@media (min-width:881px){
  .bb-shell{ zoom:1.4; }
  .bb-layout .bb-side{ height:calc(100vh / 1.4 - 64px); } /* spécificité > .bb-side de base ; 64 ≈ hauteur topbar perçue sous zoom */
}

/* ── Top bar ──────────────────────────────────────────────────────────── */
.bb-top{ position:sticky; top:0; z-index:30; height:58px; display:flex; align-items:center; gap:14px; padding:0 18px;
  background:var(--topbar); backdrop-filter:blur(12px); border-bottom:1px solid var(--hair); }
.bb-logo{ display:flex; align-items:center; gap:.55rem; text-decoration:none; flex:0 0 auto; }
.bb-logo-b{ width:30px; height:30px; border-radius:9px; background:var(--grad); display:flex; align-items:center; justify-content:center;
  color:var(--acc-ink); font-family:var(--font-display); font-size:16px; }
.bb-logo-t{ font-family:var(--font-display); font-size:1.1rem; letter-spacing:.04em; color:var(--text); }
@media (max-width:560px){ .bb-logo-t{ display:none; } }
.bb-search{ position:absolute; left:50%; transform:translateX(-50%); width:min(40vw,440px); display:flex; align-items:center; gap:8px; background:var(--input-bg);
  border:1px solid var(--border); border-radius:11px; padding:0 12px; }
/* Recherche centrée en absolu : on ne l'affiche qu'au-delà de la largeur où elle ne chevauche plus le logo/les actions sous zoom. */
@media (max-width:1180px){ .bb-search{ display:none; } }
.bb-search svg{ flex:0 0 auto; color:var(--text2); }
.bb-search input{ flex:1; min-width:0; background:transparent; border:none; outline:none; color:var(--text);
  font-family:var(--font-body); font-size:14px; padding:10px 0; }
.bb-top-act{ margin-left:auto; display:flex; align-items:center; gap:.55rem; flex:0 0 auto; position:relative; }
.bb-icon-btn{ width:36px; height:36px; border-radius:10px; border:1px solid var(--border); background:var(--surface);
  color:var(--text); cursor:pointer; display:flex; align-items:center; justify-content:center; }
.bb-icon-btn:hover{ border-color:var(--acc); }
.bb-avatar{ width:34px; height:34px; border-radius:50%; background:var(--surface3); border:1px solid var(--border); padding:0; cursor:pointer; overflow:hidden;
  display:flex; align-items:center; justify-content:center; font-family:var(--font-display); font-size:.82rem; color:var(--text2); text-decoration:none; background-size:cover; background-position:center; }
.bb-avatar:hover{ border-color:var(--acc); }

/* ── Menu compte (dropdown sous l'avatar) ─────────────────────────────── */
.bb-menu{ position:absolute; top:calc(100% + 9px); right:0; min-width:236px; background:var(--surface); border:1px solid var(--border);
  border-radius:14px; box-shadow:0 16px 44px -14px rgba(0,0,0,.6); padding:7px; z-index:50; display:none; }
.bb-menu.open{ display:block; }
.bb-menu-item{ display:flex; align-items:center; gap:.65rem; width:100%; padding:.62rem .7rem; border:none; background:none; color:var(--text);
  font-family:var(--font-body); font-size:.92rem; font-weight:600; text-align:left; border-radius:9px; cursor:pointer; text-decoration:none; }
.bb-menu-item:hover{ background:var(--surface2); }
.bb-menu-item svg{ flex:0 0 auto; color:var(--text2); }
.bb-menu-item.danger{ color:var(--error); } .bb-menu-item.danger svg{ color:var(--error); }
.bb-menu-sep{ height:1px; background:var(--hair); margin:6px 4px; }
/* Etat de connexion (bbShell.setAuth) : 'in' = items compte ; 'out' = « Se connecter ». Defaut markup = 'in'. */
.bb-menu[data-auth="out"] .auth-in{ display:none; }
.bb-menu[data-auth="in"] .auth-out{ display:none; }

/* ── Layout : sidebar + main ──────────────────────────────────────────── */
.bb-layout{ display:flex; max-width:1280px; margin:0 auto; align-items:flex-start; }
.bb-side{ flex:0 0 218px; box-sizing:border-box; position:sticky; top:58px; align-self:flex-start; padding:22px 14px;
  display:flex; flex-direction:column; gap:3px; height:calc(100vh - 58px); }
.bb-side-org{ margin-top:14px; }
.bb-side-spacer{ flex:1 1 auto; }
.bb-main{ flex:1 1 0; min-width:0; }

/* ── Barre du bas (mobile) ────────────────────────────────────────────── */
.bb-bottom{ display:none; }
@media (max-width:880px){
  .bb-side{ display:none; }
  .bb-bottom{ display:flex; position:fixed; bottom:0; left:0; right:0; z-index:30; height:62px; align-items:center;
    justify-content:space-around; background:var(--topbar); backdrop-filter:blur(12px); border-top:1px solid var(--hair); padding:0 6px; }
  .bb-bi{ display:flex; flex-direction:column; align-items:center; gap:2px; color:var(--text2); text-decoration:none; font-size:.6rem; font-weight:600; }
  .bb-bi.is-active{ color:var(--acc); }
  .bb-bi-org{ width:46px; height:46px; margin-top:-14px; border-radius:14px; background:var(--grad-btn); color:var(--acc-ink);
    transform:skewX(-9deg); display:flex; align-items:center; justify-content:center; }
  .bb-bi-org > *{ transform:skewX(9deg); }
  .bb-main{ padding-bottom:74px; }
}