/* ================================================================
   MENNET – responsive.css
   Fichier unique de responsive design pour toutes les pages.
   À placer dans /assets/responsive.css
   ================================================================ */

/* ----------------------------------------------------------------
   1. RESET DE BASE (s'applique partout)
   ---------------------------------------------------------------- */
*, *::before, *::after {
    box-sizing: border-box;
}

img {
    max-width: 100%;
    height: auto;
}

/* ----------------------------------------------------------------
   2. BOUTON HAMBURGER
   Affiché uniquement sur mobile pour ouvrir/fermer la sidebar.
   Caché par défaut sur desktop.
   ---------------------------------------------------------------- */
.hamburger-btn {
    display: none;
    background: none;
    border: none;
    color: white;
    font-size: 26px;
    cursor: pointer;
    padding: 5px 10px;
    line-height: 1;
}

/* ----------------------------------------------------------------
   3. MEDIA QUERIES – TABLETTE ET MOBILE (≤ 768px)
   ---------------------------------------------------------------- */
@media (max-width: 768px) {

    /* --- INDEX.HTML : Navbar --- */
    .navbar {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
        padding: 12px 15px !important;
    }

    .nav-links {
        gap: 10px;
        width: 100%;
    }

    .nav-item {
        font-size: 14px;
    }

    .nav-actions {
        width: 100%;
        justify-content: flex-end;
        gap: 12px;
    }

    /* --- INDEX.HTML : Bannière --- */
    .banner {
        height: 90px !important;
    }

    /* --- INDEX.HTML : Container principal --- */
    .container {
        margin: 15px auto !important;
        padding: 0 12px !important;
    }

    /* --- INDEX.HTML : Sections --- */
    .section {
        padding: 25px 15px !important;
    }

    /* --- INDEX.HTML : Grilles de cartes --- */
    .grid {
        grid-template-columns: 1fr !important;
        gap: 20px !important;
    }

    /* --- INDEX.HTML : Formulaire démo (2 colonnes → 1 colonne) --- */
    .devis-grid {
        grid-template-columns: 1fr !important;
        column-gap: 0 !important;
    }

    .full-width {
        grid-column: span 1 !important;
    }

    /* --- INDEX.HTML : Message vide --- */
    .empty-message {
        font-size: 17px !important;
        margin-top: 80px !important;
        padding: 0 20px;
    }

    /* --- INDEX.HTML : Titres --- */
    h2 { font-size: 22px !important; }
    h3 { font-size: 17px !important; }

    /* ============================================================
       PAGES INTERNES (dashboard, data-entry, etc.)
       Layout sidebar + main → colonne verticale sur mobile
       ============================================================ */

    /* Le body passe en colonne et peut scroller */
    body {
        flex-direction: column !important;
        height: auto !important;
        overflow: auto !important;
    }

    /* --- SIDEBAR : devient une barre horizontale en haut --- */
    .sidebar {
        width: 100% !important;
        height: auto !important;
        flex-direction: row !important;
        flex-wrap: wrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 10px 15px !important;
        position: sticky;
        top: 0;
        z-index: 200;
    }

    /* Logo dans la sidebar : horizontal et compact */
    .logo-box {
        padding: 0 !important;
        border: none !important;
        display: flex !important;
        align-items: center !important;
        gap: 10px !important;
        text-align: left !important;
    }

    .logo-box img {
        max-width: 35px !important;
        margin: 0 !important;
    }

    .logo-box h1 {
        font-size: 18px !important;
        letter-spacing: 2px !important;
    }

    .logo-box small {
        display: none !important;
    }

    /* Bouton hamburger visible sur mobile */
    .hamburger-btn {
        display: block;
    }

    /* Sélecteur de langue caché sur mobile (économie de place) */
    .language-selector {
        display: none !important;
    }

    /* Menu latéral : caché par défaut, s'ouvre via hamburger */
    .menu {
        display: none !important;
        width: 100% !important;
        padding: 5px 0 !important;
    }

    .menu.open {
        display: block !important;
    }

    /* --- ZONE PRINCIPALE --- */
    .main {
        width: 100% !important;
        overflow: visible !important;
    }

    /* Top bar : hauteur auto et padding réduit */
    .top-bar {
        height: auto !important;
        min-height: 55px !important;
        padding: 10px 15px !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* Zone de contenu : padding réduit */
    .view-container {
        padding: 15px !important;
        overflow: visible !important;
    }

    /* --- TABLEAUX D'INDICATEURS : scroll horizontal --- */
    .indicators-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    /* --- GRILLE MENSUELLE : 2 colonnes au lieu de 4 --- */
    .monthly-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* --- CARDS INTERNES --- */
    .card {
        padding: 20px 15px !important;
    }

    /* --- ONGLETS DE DOMAINE --- */
    .domain-tabs {
        gap: 6px !important;
    }

    .domain-tab {
        padding: 6px 12px !important;
        font-size: 13px !important;
    }

    /* --- ONGLETS SAISIE / HISTORIQUE --- */
    .tab {
        padding: 10px 12px !important;
        font-size: 13px !important;
    }

    /* --- BOUTON SAVE ALL --- */
    .save-btn {
        width: 100% !important;
        text-align: center !important;
    }

    /* --- NOTIFICATIONS (repositionnées) --- */
    .data-entry-notification {
        top: auto !important;
        bottom: 20px !important;
        right: 10px !important;
        left: 10px !important;
        max-width: none !important;
    }
}

/* ----------------------------------------------------------------
   4. MEDIA QUERIES – PETITS MOBILES (≤ 480px)
   ---------------------------------------------------------------- */
@media (max-width: 480px) {

    /* Index : nav items encore plus compacts */
    .nav-item {
        font-size: 13px !important;
    }

    .nav-links {
        gap: 8px !important;
    }

    /* Réduire encore les boutons lang/login */
    .lang-toggle {
        font-size: 12px !important;
        padding: 4px 8px !important;
    }

    .btn-action {
        font-size: 13px !important;
    }

    /* Pages internes : 1 seule colonne pour la grille mensuelle */
    .monthly-grid {
        grid-template-columns: 1fr !important;
    }

    /* Header de section compact */
    h2 { font-size: 19px !important; }
    h3 { font-size: 15px !important; }
    p, ul { font-size: 14px !important; }
}