/* --- 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 {
        gap: 10px;
    }

    #header-bar>div {
        width: 100%;
        justify-content: space-between;
    }

    #model-select,
    #profile-select {
        width: 48%;
        /* Partager l'espace */
        max-width: none;
    }
}