/* ===========================================================================
   gom-mobile.css — Multi-device Stage A : finition mobile de la prod.
   Additif / non destructif. Porté du vrai design (« Optimisation site
   multi-appareils ») sur les tokens de PRODUCTION. À charger APRÈS dashboard.css.
   Rien ici ne s'applique au-dessus de 880px → desktop strictement inchangé.
   =========================================================================== */

/* ---------- header compact sur mobile (on garde le vrai logo) ---------- */
@media (max-width: 640px) {
  header { flex-wrap: wrap; gap: 8px; padding: 8px 12px; align-items: center; }
  header .logo { flex: 1 1 auto; min-width: 0; }
  header .header-right > div {
    flex-wrap: nowrap; gap: 3px; overflow-x: auto;
    -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 2px;
  }
  header .header-right > div::-webkit-scrollbar { display: none; }
  header .header-right button { padding: 2px 5px; border-width: 1px; flex: 0 0 auto; }
  header .header-right button img { width: 17px; height: 11px; }
}

/* ---------- bottom tab bar (nav principale mobile) ---------- */
.gom-bbar {
  display: none; position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-sticky, 50);
  background: color-mix(in oklab, var(--color-ink-950) 88%, transparent);
  -webkit-backdrop-filter: blur(14px) saturate(160%);
  backdrop-filter: blur(14px) saturate(160%);
  border-top: 1px solid var(--border-subtle);
  padding: 6px 8px calc(6px + env(safe-area-inset-bottom));
  grid-template-columns: repeat(5, 1fr); gap: 2px;
}
.gom-bbar .bb-item {
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 7px 2px 6px; border: none; background: transparent; cursor: pointer;
  border-radius: var(--radius-md); color: var(--fg-3); position: relative;
  font-family: var(--font-display); min-height: 48px;
  transition: color var(--dur-fast), background var(--dur-fast);
}
.gom-bbar .bb-item .bi { font-size: 19px; line-height: 1; }
.gom-bbar .bb-item .bl { font-size: 9.5px; font-weight: 600; letter-spacing: 0.03em; text-transform: none; }
.gom-bbar .bb-item:hover { color: var(--fg-1); }
.gom-bbar .bb-item.on { color: var(--color-amber-300); background: var(--surface-tint-amber); }
.gom-bbar .bb-item .bdot {
  position: absolute; top: 5px; right: calc(50% - 15px);
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--color-cyan-400); box-shadow: 0 0 8px var(--color-cyan-400);
}

@media (max-width: 880px) {
  .gom-bbar { display: grid; }
  /* laisse la place à la barre : le contenu ne passe plus dessous */
  .app-main { padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important; }
}
@media (prefers-reduced-motion: reduce) {
  .gom-bbar .bb-item { transition-duration: 0.01ms; }
}

/* ===========================================================================
   FIXES 2026-07-05 (retour M0z4r)
   =========================================================================== */

/* --- FIX 1 : drawer mobile — le haut de la liste passait sous les barres.
   Ouvert = plein écran depuis le haut, au-dessus du header (z-100) et de la
   mobile-topbar (z-40). Le drawer a son propre bouton ✕ (.sidenav-close). --- */
@media (max-width: 900px) {
  .sidenav.open {
    top: 0 !important;
    height: 100dvh !important;
    z-index: 130 !important;
    padding-top: 10px;
  }
  .sidenav .sidenav-header { position: sticky; top: 0; z-index: 2;
    background: linear-gradient(180deg, #0c111c 92%, transparent); }
}

/* --- FIX 2 : drapeaux — plus de contour « blanc », juste le drapeau sur fond
   transparent ; actif = léger halo ambré (via le box-shadow inline existant),
   inactif = atténué. Zone cliquable conservée. --- */
header .header-right > div > button {
  border: none !important;
  background: transparent !important;
  padding: 3px !important;
  border-radius: 5px !important;
  transition: background var(--dur-fast), transform var(--dur-fast);
}
header .header-right > div > button:hover { background: rgba(255,255,255,.06) !important; transform: translateY(-1px); }
header .header-right > div > button img { border-radius: 3px; display: block; }

/* --- FIX 3 : mobile-topbar — breadcrumb à gauche, bouton menu à droite,
   icône propre (voir le SVG dans le markup) au lieu du hamburger→X. --- */
.mobile-topbar .mobile-breadcrumb { order: 0; }
.mobile-topbar .hamburger.gom-menu-btn {
  order: 9; margin-left: 8px; width: 40px; height: 40px; padding: 0;
  display: flex; flex-direction: row; align-items: center; justify-content: center;
  border-radius: 11px; color: var(--fg-2); background: transparent;
  transition: background var(--dur-fast), color var(--dur-fast);
}
.mobile-topbar .hamburger.gom-menu-btn:hover,
.mobile-topbar .hamburger.gom-menu-btn:focus-visible {
  background: var(--surface-raised); color: var(--color-amber-300);
}