/* ========================================
   CORRECTION NAVIGATION MOBILE
   ======================================== */

@media (max-width: 768px) {
    /* Structure de la navigation mobile */
    .nav-content {
        display: flex;
        align-items: center;
        justify-content: space-between;
        position: relative;
    }
    
    /* Logo à gauche */
    .logo {
        order: 1;
        margin-right: auto;
    }
    
    /* Menu hamburger à gauche après le logo */
    .nav-toggle {
        order: 2;
        position: static !important;
        margin-left: 15px;
        margin-right: auto;
    }

    /* ── Initiales / icône utilisateur centrées ── */
    .mobile-nav-avatar {
        order: 3;
        position: absolute !important;
        left: 50% !important;
        top: 50% !important;
        transform: translate(-50%, -50%) !important;
        margin: 0 !important;
        z-index: 100;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: opacity 0.3s ease, visibility 0.3s ease;
    }

    /* Cacher les initiales quand le menu hamburger est ouvert */
    body.menu-open .mobile-nav-avatar {
        opacity: 0 !important;
        visibility: hidden !important;
        pointer-events: none !important;
    }

    /* ── userMenuNav : cacher les boutons desktop sur mobile ── */
    .user-menu-nav {
        display: none !important;
    }

    /* Panier à droite */
    .cart-icon {
        order: 4;
        margin-left: auto;
        position: static !important;
    }
    
    /* Bouton d'appel mobile */
    .mobile-call-btn {
        order: 5;
    }

    /* ── CORRECTION CENTRAGE MENU MOBILE ── */
    /* Le menu déroulant occupe toute la largeur du viewport */
    .nav-links {
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        padding: 1rem 0 !important;       /* padding gauche/droite à 0 */
        margin: 0 !important;
        box-sizing: border-box !important;
    }

    /* Chaque item prend toute la largeur */
    .nav-links li {
        width: 100% !important;
        text-align: center !important;
        padding: 0 !important;
        margin: 0 !important;
    }

    /* Les liens sont parfaitement centrés */
    .nav-links a {
        display: block !important;
        width: 100% !important;
        text-align: center !important;
        padding: 0.8rem 1rem !important;
        box-sizing: border-box !important;
    }

    /* Les boutons Connexion / Créer compte sont aussi centrés */
    .nav-links .user-menu-nav,
    .nav-links .btn-login-nav,
    .nav-links .btn-register-nav {
        width: 100% !important;
        text-align: center !important;
        display: flex !important;
        justify-content: center !important;
    }
}

/* ── Sur desktop : cacher le conteneur mobile-nav-avatar ── */
@media (min-width: 769px) {
    .mobile-nav-avatar {
        display: none !important;
    }

    /* S'assurer que userMenuNav est bien visible sur desktop */
    .user-menu-nav {
        display: flex !important;
        margin-left: auto;
        margin-right: 20px;
        align-items: center;
        gap: 10px;
    }
}