/* ==========================================================
   CORRECTION RESPONSIVE MENUS - MOBILE / TABLETTE
   Objectif : aucun menu caché, déconnexion visible, pas de scroll horizontal
   ========================================================== */

html, body {
    max-width: 100%;
    overflow-x: hidden;
}

nav,
.navbar,
.menu,
.main-menu,
.top-menu,
.header-menu,
.admin-menu,
.admin-tabs,
.admin-tab-buttons,
.admin-menu-buttons,
.admin-pro-tabs,
.d-flex,
.btn-group {
    flex-wrap: wrap !important;
}

nav a,
nav button,
.navbar a,
.navbar button,
.menu a,
.menu button,
.main-menu a,
.main-menu button,
.top-menu a,
.top-menu button,
.header-menu a,
.header-menu button,
.admin-tabs button,
.admin-tab-buttons button,
.admin-menu-buttons button,
.admin-pro-tabs button,
.btn,
button {
    white-space: normal !important;
}

@media (max-width: 900px) {
    nav,
    .navbar,
    .menu,
    .main-menu,
    .top-menu,
    .header-menu,
    .admin-menu,
    .admin-tabs,
    .admin-tab-buttons,
    .admin-menu-buttons,
    .admin-pro-tabs {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
        justify-content: center !important;
        align-items: center !important;
        width: 100% !important;
        padding: 8px !important;
        box-sizing: border-box !important;
    }

    nav a,
    nav button,
    .navbar a,
    .navbar button,
    .menu a,
    .menu button,
    .main-menu a,
    .main-menu button,
    .top-menu a,
    .top-menu button,
    .header-menu a,
    .header-menu button,
    .admin-tabs button,
    .admin-tab-buttons button,
    .admin-menu-buttons button,
    .admin-pro-tabs button,
    .btn,
    button {
        min-height: 42px !important;
        padding: 9px 12px !important;
        font-size: 13px !important;
        border-radius: 12px !important;
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    a[href*="logout"],
    a[href*="deconnexion"],
    a[href*="logout.php"],
    button[name*="logout"],
    button[class*="logout"],
    .logout,
    .deconnexion {
        display: inline-flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: relative !important;
        z-index: 9999 !important;
        background: #EF4135 !important;
        color: #fff !important;
        font-weight: 800 !important;
    }

    table {
        display: block !important;
        width: 100% !important;
        overflow-x: auto !important;
        white-space: nowrap !important;
    }

    iframe {
        width: 100% !important;
        max-width: 100% !important;
    }

    .container,
    .content,
    .main,
    main,
    .card,
    .panel,
    .admin-panel,
    .admin-tab-panel {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }
}

@media (max-width: 600px) {
    nav,
    .navbar,
    .menu,
    .main-menu,
    .top-menu,
    .header-menu,
    .admin-menu,
    .admin-tabs,
    .admin-tab-buttons,
    .admin-menu-buttons,
    .admin-pro-tabs {
        justify-content: stretch !important;
        align-items: stretch !important;
    }

    nav a,
    nav button,
    .navbar a,
    .navbar button,
    .menu a,
    .menu button,
    .main-menu a,
    .main-menu button,
    .top-menu a,
    .top-menu button,
    .header-menu a,
    .header-menu button,
    .admin-tabs button,
    .admin-tab-buttons button,
    .admin-menu-buttons button,
    .admin-pro-tabs button {
        flex: 1 1 calc(50% - 8px) !important;
        text-align: center !important;
        justify-content: center !important;
    }

    a[href*="logout"],
    a[href*="deconnexion"],
    a[href*="logout.php"],
    button[name*="logout"],
    button[class*="logout"],
    .logout,
    .deconnexion {
        flex: 1 1 100% !important;
        text-align: center !important;
        justify-content: center !important;
        margin-top: 6px !important;
    }
}

@media (max-width: 380px) {
    nav a,
    nav button,
    .navbar a,
    .navbar button,
    .menu a,
    .menu button,
    .main-menu a,
    .main-menu button,
    .top-menu a,
    .top-menu button,
    .header-menu a,
    .header-menu button,
    .admin-tabs button,
    .admin-tab-buttons button,
    .admin-menu-buttons button,
    .admin-pro-tabs button {
        flex: 1 1 100% !important;
    }
}