/* Coquille d'application SIRC : barre de titre + bulle flottante (mobile),
   barre latérale fine + en-tête de page + contenu à largeur maîtrisée (desktop).
   Inspiré de Diner. Toutes les valeurs viennent de tokens.css. */

/* ---------- Structure ---------- */
.app { min-height: 100dvh; }
.main { min-width: 0; }
.page {
  width: 100%; max-width: 720px; margin: 0 auto;
  padding: 0 var(--gutter) calc(var(--nav-h) + 40px + var(--safe-b));
}

/* ---------- Barre de titre (collante, floutée au défilement) ---------- */
.appbar {
  position: sticky; top: 0; z-index: 40;
  display: flex; align-items: center; gap: var(--s2);
  min-height: 56px; margin: 0 calc(-1 * var(--gutter)) var(--s3);
  padding: calc(var(--safe-t) + var(--s2)) var(--s2) var(--s2) var(--gutter);
  background: var(--bg);
  transition: box-shadow var(--t-base), background-color var(--t-base);
}
.appbar.is-scrolled {
  background: var(--glass);
  -webkit-backdrop-filter: blur(20px) saturate(1.4); backdrop-filter: blur(20px) saturate(1.4);
  box-shadow: 0 1px 0 var(--border);
}
.appbar h1 { flex: 1; min-width: 0; font-size: 22px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.appbar .sub { display: block; font-size: var(--fs-small); font-weight: 400; color: var(--text-2); letter-spacing: 0; }
.appbar-actions { display: flex; align-items: center; gap: var(--s1); }

/* ---------- Sections ---------- */
.section { display: flex; flex-direction: column; gap: var(--s2); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); min-height: 28px; padding: 0 var(--s1); }
.section-head h2 { font-size: var(--fs-small); font-weight: 600; color: var(--text-2); letter-spacing: .01em; }
.section-head a { font-size: var(--fs-small); font-weight: 500; color: var(--brand-text); }

/* ---------- Grilles ---------- */
.grid { display: grid; gap: var(--s3); }
.grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s3); }
.layout-aside { display: grid; gap: var(--s5); }
.layout-aside > *, .grid > *, .stack-lg > * { min-width: 0; }
.layout-aside > aside { display: flex; flex-direction: column; gap: var(--s5); }

/* Actions : pleine largeur et empilées sur mobile, en ligne et compactes sur desktop */
.actions { display: flex; flex-direction: column; gap: var(--s2); }
.actions-row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); }
.row.wrap { flex-wrap: wrap; }

/* ---------- Bulle de navigation (mobile) : 3 entrées + bouton Scanner ---------- */
.fab.fab-accent { background: var(--brand); color: var(--brand-ink); }  /* Scanner : action principale, couleur de marque */
.fab.fab-accent:active { background: var(--brand-press); }

/* ---------- Barre latérale (desktop) ---------- */
.sidebar { display: none; }

@media (min-width: 900px) {
  :root { --touch: 44px; }
  .navbubble { display: none; }
  .app { display: grid; grid-template-columns: auto 1fr; }

  .sidebar {
    position: sticky; top: 0; height: 100dvh; width: 232px;
    display: flex; flex-direction: column; gap: 2px;
    padding: var(--s3) var(--s3) var(--s4);
    background: var(--surface); box-shadow: 1px 0 0 var(--border);
    transition: width var(--t-slow) var(--ease-out);
    overflow: hidden;
  }
  .sidebar-head { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s2); margin-bottom: var(--s3); }
  .brand-mark {
    position: relative; display: grid; place-items: center; flex: none; width: 30px; height: 30px; border-radius: 9px;
    background: var(--brand); color: var(--brand-ink); font-weight: 600; font-size: 13px;
  }
  .brand-mark::after {
    content: ""; position: absolute; top: -3px; right: -3px; width: 9px; height: 9px; border-radius: 50%;
    background: var(--accent); box-shadow: 0 0 0 2px var(--surface);
  }
  .brand-mark.is-logo { display: block; padding: 0; border-radius: 50%; background: none; object-fit: contain; }
  .brand-mark.is-logo::after { content: none; }
  .brand-name { font-weight: 600; font-size: var(--fs-h3); letter-spacing: -0.01em; }
  .side-section { padding: var(--s4) var(--s3) var(--s1); font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-2); }
  .side-item {
    position: relative; display: flex; align-items: center; gap: var(--s3);
    min-height: 40px; padding: 0 var(--s3); border: 0; border-radius: 12px;
    background: transparent; color: var(--text-2); font-weight: 500; font-size: 14px; white-space: nowrap;
    width: 100%; text-align: left;
    transition: background-color var(--t-fast), color var(--t-fast);
  }
  .side-item:hover { background: var(--surface-2); color: var(--text); }
  .side-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); }
  .side-item.side-accent { color: var(--brand-text); }
  .side-item.side-accent[aria-current="page"] { background: var(--brand-soft); }
  .side-item .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
  .sidebar-foot { margin-top: auto; display: flex; flex-direction: column; gap: 2px; padding-top: var(--s3); box-shadow: inset 0 1px 0 var(--border); }
  .side-user { display: flex; align-items: center; gap: var(--s3); padding: var(--s2) var(--s3); min-width: 0; }

  .app.is-collapsed .sidebar { width: 72px; }
  .app.is-collapsed .side-label, .app.is-collapsed .brand-name, .app.is-collapsed .side-section,
  .app.is-collapsed .side-user .grow, .app.is-collapsed .side-item .count { display: none; }

  /* Contenu */
  .page { max-width: 1120px; padding: 0 var(--s6) var(--s6); }
  .page-narrow { max-width: 760px; }
  .appbar { min-height: 72px; margin: 0 calc(-1 * var(--s6)) var(--s4); padding: var(--s3) var(--s6); }
  .appbar h1 { font-size: var(--fs-h1); }

  .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grid.cols-auto { grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); }
  .layout-aside { grid-template-columns: minmax(0, 1fr) 340px; align-items: start; }
  .layout-aside > aside { position: sticky; top: 88px; }

  .actions { flex-direction: row; flex-wrap: wrap; }
  .actions-row { display: flex; }
  .page .btn-block { width: auto; }
  .page .actions .btn, .page .actions-row .btn { min-width: 132px; }
  .form { max-width: 560px; }
  .hide-desktop { display: none !important; }
}

@media (max-width: 899px) {
  .hide-mobile { display: none !important; }
}

/* ---------- Menu latéral (mobile) : toutes les rubriques, la bulle ne garde que les actions fréquentes ---------- */
.appbar-menu { margin-left: calc(-1 * var(--s2)); }
.drawer { position: fixed; inset: 0; z-index: 90; }
.drawer[hidden] { display: none; }
.drawer-scrim { position: absolute; inset: 0; background: rgb(0 0 0 / .38); opacity: 0; transition: opacity var(--t-base); }
.drawer-panel {
  position: absolute; inset: 0 auto 0 0; width: min(300px, 84vw); display: flex; flex-direction: column; gap: 2px;
  padding: calc(var(--safe-t) + var(--s3)) var(--s3) calc(var(--safe-b) + var(--s3)); overflow-y: auto;
  background: var(--surface); box-shadow: var(--shadow-2); transform: translateX(-100%); transition: transform var(--t-slow) var(--ease-out);
}
.drawer.is-open .drawer-scrim { opacity: 1; }
.drawer.is-open .drawer-panel { transform: none; }
.drawer-head { display: flex; align-items: center; gap: var(--s3); min-height: 52px; padding: 0 var(--s2); margin-bottom: var(--s2); }
.drawer-head img { border-radius: 50%; }
.drawer-head .brand-name { flex: 1; font-weight: 600; font-size: var(--fs-h3); }
.drawer-item {
  display: flex; align-items: center; gap: var(--s3); min-height: 44px; padding: 0 var(--s3); width: 100%;
  border: 0; border-radius: 12px; background: transparent; color: var(--text-2); font: inherit; font-weight: 500; font-size: 15px; text-align: left;
}
.drawer-item:active, .drawer-item:hover { background: var(--surface-2); color: var(--text); }
.drawer-item[aria-current="page"] { background: var(--brand-soft); color: var(--brand-text); }
.drawer-item .count { margin-left: auto; min-width: 20px; height: 20px; padding: 0 6px; display: grid; place-items: center; border-radius: var(--r-pill); background: var(--accent); color: var(--accent-ink); font-size: 11px; font-weight: 600; }
.drawer-foot { margin-top: auto; padding-top: var(--s3); box-shadow: inset 0 1px 0 var(--border); }
@media (prefers-reduced-motion: reduce) { .drawer-panel, .drawer-scrim { transition: none; } }

/* Transitions entre pages (navigation multi-pages, View Transitions API) */
@view-transition { navigation: auto; }