/* ===================================================================
   FIX ÉLÉMENTS FLOTTANTS MOBILE
   Corrige le problème où les boutons flottants et la navbar scrollent avec le contenu
   =================================================================== */

@media (max-width: 768px) {
    /* Force la navbar à rester fixée en haut */
    .header,
    .header--glass {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: 100% !important;
        z-index: 1000 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
    }
    
    /* Ajouter un padding-top au body pour compenser la navbar fixe */
    body {
        padding-top: 140px !important;
    }
    
    /* S'assurer que le contenu principal ne passe pas sous la navbar */
    main {
        position: relative !important;
        z-index: 1 !important;
    }
    
    /* Force tous les éléments flottants à rester fixés */
    .chatbot-trigger,
    #discordModalBtn,
    .floating-btn,
    .floating-btn--discord-premium {
        position: fixed !important;
        z-index: 9998 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
        backface-visibility: hidden !important;
        -webkit-backface-visibility: hidden !important;
        perspective: 1000px !important;
        -webkit-perspective: 1000px !important;
    }
    
    /* Chatbot en bas à droite */
    .chatbot-trigger {
        bottom: 20px !important;
        right: 20px !important;
    }
    
    /* Discord au-dessus du chatbot */
    #discordModalBtn {
        bottom: 90px !important;
        right: 20px !important;
    }
    
    /* S'assurer que les overlays restent aussi fixés */
    #authOverlay,
    .modal-overlay,
    .mobile-sort-overlay,
    .filters-drawer-overlay,
    .product-modal-overlay,
    .discord-modal-overlay {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        transform: translate3d(0, 0, 0) !important;
        -webkit-transform: translate3d(0, 0, 0) !important;
    }
    
    /* Fix spécifique pour iOS Safari */
    @supports (-webkit-touch-callout: none) {
        .chatbot-trigger,
        #discordModalBtn,
        .floating-btn {
            position: fixed !important;
            -webkit-transform: translate3d(0, 0, 0) !important;
            transform: translate3d(0, 0, 0) !important;
        }
    }
}

/* Très petits écrans */
@media (max-width: 480px) {
    .chatbot-trigger {
        bottom: 15px !important;
        right: 15px !important;
    }
    
    #discordModalBtn {
        bottom: 85px !important;
        right: 15px !important;
    }
}