/* ========================================
   FIX ANTI-SAUT GLOBAL
   À ajouter AVANT tous les autres CSS
   ======================================== */

/* 1. FORCER LA SCROLLBAR TOUJOURS VISIBLE */
html {
    overflow-y: scroll !important;
    /* Force la scrollbar même si le contenu est court */
    scroll-padding-top: 90px !important;
    /* Compense la hauteur de la navbar (80px + 10px marge) */
    /* scroll-behavior: smooth !important; - DESACTIVE POUR EVITER SAUTS NAVBAR */
}

/* 2. EMPÊCHER LES CHANGEMENTS DE LARGEUR */
body {
    overflow-x: hidden !important;
    /* Pas de scroll horizontal */
}

/* 3. DIMENSIONS FIXES POUR LA NAVBAR */
.navbar {
    min-height: 80px !important;
    height: 80px !important;
    max-height: 80px !important;
    /* Fix dimensions math: 50px content + 15px*2 padding = 80px */
    padding-top: 15px !important;
    padding-bottom: 15px !important;
}

/* Navbar sur mobile - méthode marge avec correction mode sombre */
@media (max-width: 968px) {

    /* Reset du padding navbar */
    .navbar {
        padding-right: 15px !important;
        /* Valeur standard */
    }

    /* ALIGNEMENT PARFAIT - MODE CLAIR ET SOMBRE */
    .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-right: 0 !important;
    }

    /* Enlever les marges individuelles et FIXER LA LARGEUR pour éviter les sauts */
    .cart-icon,
    .dark-mode-toggle {
        margin-right: 0 !important;
        margin-left: 0 !important;
        width: 40px !important;
        /* Largeur fixe */
        height: 40px !important;
        /* Hauteur fixe */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
    }

    /* Stabiliser les icônes à l'intérieur */
    .cart-icon i,
    .dark-mode-toggle i {
        width: 20px !important;
        /* Largeur d'icône fixe */
        text-align: center !important;
        display: inline-block !important;
    }

    /* Burger menu - position static dans le flux flex */
    .burger-menu {
        position: static !important;
        display: flex !important;
    }
}

/* CORRECTIF MODE SOMBRE ABSOLU (Juste pour être sûr que rien ne l'écrase) */
@media (max-width: 968px) {

    html body.dark-mode .nav-actions,
    html.dark-mode body .nav-actions,
    body[class*="dark"] .nav-actions {
        display: flex !important;
        align-items: center !important;
        gap: 15px !important;
        margin-right: 0 !important;
    }
}

/* 4. LOGO - DIMENSIONS STRICTES (DESKTOP UNIQUEMENT) */
@media (min-width: 969px) {
    .logo {
        width: 280px !important;
        min-width: 280px !important;
        max-width: 280px !important;
        height: 50px !important;
        overflow: hidden !important;
    }
}

/* Logo flexible sur mobile */
@media (max-width: 968px) {
    .logo {
        height: 50px !important;
        overflow: visible !important;
        flex: 0 0 auto !important;
        max-width: none !important;
    }

    .logo span {
        font-size: 1.5rem !important;
        white-space: nowrap !important;
    }
}

.logo img,
.logo canvas,
.logo .spinner {
    width: 50px !important;
    height: 50px !important;
    min-width: 50px !important;
    min-height: 50px !important;
    flex-shrink: 0 !important;
}

/* 5. PANIER - SECTIONS FIXES SUPPRIMÉES POUR LAISSER PLACE À STYLE.CSS */


/* 6. DÉSACTIVER TOUTES LES ANIMATIONS AU CLIC */
*:active,
*:focus {
    transform: none !important;
}

button:active,
button:focus {
    transform: none !important;
}

/* 7. FILTRES - DIMENSIONS FIXES */
.filter-btn {
    white-space: nowrap !important;
    flex-shrink: 0 !important;
}

/* 8. EMPÊCHER LE REFLOW DES POLICES */
body {
    font-family: 'Poppins', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
}

/* Réserver l'espace pour les polices custom */
.logo span {
    font-family: 'Great Vibes', cursive !important;
    line-height: 50px !important;
}

/* 9. IMAGES - TOUJOURS RÉSERVER L'ESPACE */
img {
    display: block !important;
}

/* 10. BOX-SIZING UNIFORME */
*,
*::before,
*::after {
    box-sizing: border-box !important;
}

/* 11. MENU BURGER - INTERACTION ET STYLE DU MENU DÉROULANT */
@media (max-width: 968px) {
    .burger-menu {
        display: flex !important;
        /* Position static gérée plus haut pour l'alignement */
        z-index: 1000 !important;
    }

    .nav-menu {
        position: fixed !important;
        top: 80px !important;
        /* Hauteur de la navbar */
        left: -100% !important;
        width: 100% !important;
        height: calc(100vh - 80px) !important;
        /* Adapter à la navbar de 80px */
        background-color: #fff !important;
        /* Fallback si var() marche pas */
        background-color: var(--color-white, #fff) !important;
        flex-direction: column !important;
        padding: 2rem !important;
        /* Correspond à var(--spacing-lg) */
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1) !important;
        transition: left 0.3s ease !important;
        overflow-y: auto !important;
    }

    .nav-menu.active {
        left: 0 !important;
    }

    /* Correction mode sombre pour le menu déroulant */
    body.dark-mode .nav-menu,
    .dark-mode .nav-menu {
        background-color: #1A1A1A !important;
        background-color: var(--color-background, #1A1A1A) !important;
    }
}

/* 12. NAVBAR - Z-INDEX CORRECT */
.navbar {
    z-index: 999 !important;
}

.cart-icon {
    z-index: 100 !important;
}