/* --- CONFIGURATION MOBILE (Le Cercle Des Pistons) --- */
@media (max-width: 767px) {
    
    /* 1. Ajustement de la Navbar principale */
    nav {
        height: 70px !important;
        padding: 0 15px !important;
        display: flex !important;
        align-items: center !important;
    }

    nav .max-w-7xl {
        display: flex !important;
        flex-direction: row !important;
        justify-content: space-between !important;
        align-items: center !important;
        width: 100% !important;
    }

    /* 2. LE MINI MENU DÉROULANT STYLE LUXE */
    #mobile-menu {
        display: none; /* Caché par défaut */
        position: absolute !important;
        top: 75px !important; /* Juste en dessous de la bordure */
        right: 15px !important; /* Aligné à droite pour un look "bulle" */
        width: 220px !important; /* Largeur compacte */
        
        /* Effet Glassmorphism (Verre dépoli) */
        background: rgba(10, 10, 10, 0.9) !important;
        backdrop-filter: blur(20px) !important;
        -webkit-backdrop-filter: blur(20px) !important;
        
        /* Bordures et coins arrondis */
        border: 1px solid rgba(212, 175, 55, 0.3) !important;
        border-radius: 20px !important;
        box-shadow: 0 15px 35px rgba(0, 0, 0, 0.5) !important;
        
        /* Alignement des liens */
        flex-direction: column !important;
        padding: 15px 0 !important;
        gap: 0 !important;
        z-index: 9999 !important;
        overflow: hidden;
        
        /* Animation d'apparition */
        animation: slideDown 0.3s ease-out forwards;
    }

    /* Classe activée par le clic */
    .show-important {
        display: flex !important;
    }

    /* 3. STYLE DES LIENS DANS LE MENU */
    #mobile-menu a {
        color: rgba(255, 255, 255, 0.8) !important;
        font-size: 13px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 2px !important;
        padding: 15px 20px !important;
        width: 100% !important;
        text-align: left !important; /* Aligné à gauche pour le look menu pro */
        border-bottom: 1px solid rgba(255, 255, 255, 0.05) !important;
        transition: all 0.3s ease;
    }

    /* Dernier lien sans bordure */
    #mobile-menu a:last-child {
        border-bottom: none !important;
    }

    /* État au survol/clic sur le lien */
    #mobile-menu a:active {
        background: rgba(212, 175, 55, 0.1) !important;
        color: #d4af37 !important;
        padding-left: 25px !important; /* Petit effet de décalage */
    }

    /* Couleur dorée pour le Shop */
    #mobile-menu a[href="shop.php"] {
        color: #d4af37 !important;
    }

    /* 4. AJUSTEMENT LOGO ET BOUTONS */
    nav img {
        width: 32px !important;
        height: 32px !important;
    }

    /* On cache le bouton "Mon Compte" d'origine sur mobile pour ne pas surcharger */
    nav .hidden.sm\:inline-block {
        display: none !important;
    }

    /* Animation */
    @keyframes slideDown {
        from { opacity: 0; transform: translateY(-10px); }
        to { opacity: 1; transform: translateY(0); }
    }
}