/* --- GESTION MOBILE (RESPONSIVE) --- */

/* Par défaut, l'overlay est caché */
#sidebar-overlay {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background: rgba(0, 0, 0, 0.5);
  z-index: 900; /* Juste en dessous de la sidebar */
}

/* Bouton menu caché sur desktop */
#mobile-menu-btn {
  background: transparent !important;
  border: 1px solid rgba(255,255,255,0.3) !important;
  font-size: 20px !important;
  padding: 5px 10px !important;
  display: none; /* Caché par défaut */
}

@media (max-width: 768px) {
  /* Afficher le bouton menu */
  #mobile-menu-btn {
    display: block !important;
  }

  /* Cacher/Déplacer la sidebar */
  #sidebar {
    position: fixed;
    left: -270px; /* Caché à gauche */
    top: 0;
    height: 100%;
    z-index: 1000; /* Au-dessus de tout */
    transition: left 0.3s ease;
    box-shadow: 2px 0 10px rgba(0,0,0,0.5);
  }

  /* Classe pour ouvrir la sidebar */
  #sidebar.open {
    left: 0;
  }

  /* Afficher l'overlay quand la sidebar est ouverte */
  #sidebar.open + #main-content #sidebar-overlay, /* Si structure différente */
  body.sidebar-open #sidebar-overlay { 
    display: block;
  }
  
  /* Ajustement du header pour faire de la place au bouton */
  #header-bar h1 {
    font-size: 16px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  
  /* Sur mobile, empiler les éléments du header */
  #header-bar {
    flex-wrap: wrap;
    gap: 10px;
  }
  
  #header-bar > div {
    width: 100%;
    justify-content: space-between;
  }
  
  #model-select, #profile-select {
    width: 48%; /* Partager l'espace */
    max-width: none;
  }
}