/* ===================================================================
   FIX BARRE SAFARI iOS - CARRÉ BLANC EN BAS UNIQUEMENT
   =================================================================== */

/* Carré blanc en bas UNIQUEMENT sur iOS Safari mobile */
@media (max-width: 768px) {
    @supports (-webkit-touch-callout: none) {
        #ios-white-overlay {
            position: fixed !important;
            bottom: 0 !important;
            left: 0 !important;
            right: 0 !important;
            height: 5px !important;
            background: #ffffff !important;
            z-index: 999999 !important;
            pointer-events: none !important;
            display: block !important;
        }
    }
}

/* ===================================================================
   FIX FLASH BLANC AU SCROLL RAPIDE - iOS & Android
   =================================================================== */

/* Fix pour le "rubber banding" et overscroll sur mobile */
@supports (-webkit-touch-callout: none) {
    html, body {
        /* Empêche le bounce effect qui montre du blanc */
        overscroll-behavior: none !important;
        overscroll-behavior-y: none !important;
        -webkit-overflow-scrolling: touch;
        background: #ffffff !important;
        background-color: #ffffff !important;
    }
    
    /* Background de secours sur le html pour éviter le flash - GPU accelerated */
    html::before {
        content: '';
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        height: 100dvh; /* Dynamic viewport pour iOS */
        background: #ffffff;
        z-index: -9999;
        pointer-events: none;
        will-change: transform;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        backface-visibility: hidden;
        -webkit-backface-visibility: hidden;
    }
    
    /* Force le body à avoir un fond solide */
    body {
        background-attachment: fixed !important;
    }
    
    /* Empêcher les gaps entre sections */
    main, section, .container, .catalogue-section, .products-premium-layout {
        background-color: #ffffff !important;
    }
}

/* Fix général pour tous les navigateurs mobiles */
@media (max-width: 768px) {
    html, body {
        overscroll-behavior: none;
        overscroll-behavior-y: none;
        background: #ffffff !important;
    }
    
    /* Fond de secours pour mobile */
    html::after {
        content: '';
        position: fixed;
        top: -50vh;
        left: 0;
        right: 0;
        bottom: -50vh;
        background: #ffffff;
        z-index: -10000;
        pointer-events: none;
    }
    
    /* Toutes les sections principales avec fond blanc */
    main, section, .container, article, div[class*="section"], div[class*="container"] {
        background-color: #ffffff;
    }
}