/* ==========================================================================
   Navigation — bascule desktop / compact
   Le CSS Tailwind du projet est précompilé sans variantes `xl:` : les points
   de bascule du bandeau sont donc définis ici.
   - < 1280 px : menu compact (bouton hamburger) — tablettes paysage incluses
   - >= 1280 px : menu horizontal complet
   ========================================================================== */

/* Menu horizontal : masqué par défaut (la classe `hidden` de Tailwind le
   garantit avant chargement du CSS), affiché à partir de 1280 px. */
@media (min-width: 1280px) {
  .nav-desktop {
    display: flex !important;
  }
  .nav-burger,
  .nav-drawer {
    display: none !important;
  }
}

/* Bouton hamburger : visible sous 1280 px. */
.nav-burger {
  display: flex;
}

/* Panneau déroulant : masqué sur grand écran (l'ouverture est gérée par Alpine). */
@media (min-width: 1280px) {
  .nav-drawer[x-cloak] {
    display: none !important;
  }
}

/* Confort tactile : entrées du menu déroulant mobile */
.nav-drawer a,
.nav-drawer button {
  min-height: 44px;
}

/* Nom de l'utilisateur : masqué quand la place manque (l'initiale reste,
   le nom complet est dans le menu profil). Évite le débordement du bandeau
   pour les rôles à menu chargé. */
@media (max-width: 1439.98px) {
  .nav-username {
    display: none !important;
  }
}

/* Un peu plus de place pour les menus les plus chargés (ADMIN) : padding
   horizontal légèrement réduit sur les entrées de premier niveau. */
@media (min-width: 1280px) {
  .nav-desktop > a,
  .nav-desktop > div > button {
    padding-left: 0.6rem !important;
    padding-right: 0.6rem !important;
  }
}