/**
 * VARIABLES RESPONSIVE GLOBALES
 * Fichier central pour toutes les constantes responsive du projet
 * À importer en premier dans tous les CSS
 */

:root {
    /* ===== BREAKPOINTS STANDARDS (Mobile-first) ===== */
    /* IMPORTANT : Utiliser 767px pour mobile, 768px pour tablet+ */
    --breakpoint-mobile-max: 767px;      /* Mobile : 0-767px */
    --breakpoint-tablet-min: 768px;      /* Tablet start : 768px+ */
    --breakpoint-tablet-max: 1023px;     /* Tablet : 768-1023px */
    --breakpoint-desktop-min: 1024px;    /* Desktop start : 1024px+ */
    --breakpoint-desktop-max: 1535px;    /* Desktop : 1024-1535px */
    --breakpoint-large: 1536px;          /* Large : 1536px+ */

    /* Rétrocompatibilité (deprecated) */
    --breakpoint-mobile: 480px;
    --breakpoint-tablet: 768px;
    --breakpoint-desktop: 1024px;
    --breakpoint-xlarge: 1536px;

    /* ===== HAUTEURS NAVBAR (cohérentes sur tous supports) ===== */
    --navbar-height-desktop: 145px; /* = .navbar height (navbar.css) — desktop & tablette */
    --navbar-height-compact: 80px;
    --navbar-height-tablet: 160px;
    --navbar-height-mobile: 226px; /* Hauteur mesurée réelle : 225.58px */

    /* ===== ESPACEMENTS PRODUITS ===== */
    --product-gap-desktop: 30px;
    --product-gap-tablet: 20px;
    --product-gap-mobile: 20px;

    /* ===== LARGEURS CONTENEURS ===== */
    --container-max-width: 1600px;
    --container-tablet-width: 90%;
    --container-mobile-width: 95%;

    /* ===== TAILLES POLICE RESPONSIVE ===== */
    --font-nav-desktop: 1.2rem;
    --font-nav-tablet: 1.1rem;
    --font-nav-mobile: 1rem;

    /* ===== TRANSITIONS STANDARD ===== */
    --transition-fast: 0.2s ease;
    --transition-medium: 0.3s ease;
    --transition-slow: 0.5s ease;

    /* ===== Z-INDEX LAYERS ===== */
    --z-navbar: 1000;
    --z-modal: 2000;
    --z-popup: 3000;
}

/* ===== MEDIA QUERIES MIXINS (via custom properties) ===== */
/* Utilisation: @media (max-width: var(--breakpoint-tablet)) { ... } */

/* Debug helper - affiche le breakpoint actif */
body::before {
    content: 'Desktop (1200px+)';
    position: fixed;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 5px 10px;
    border-radius: 5px;
    font-size: 12px;
    z-index: 99999;
    display: none; /* Activer en dev pour debug */
}

@media (max-width: 1200px) {
    body::before {
        content: 'Desktop (1024-1200px)';
    }
}

@media (max-width: 1023px) {
    body::before {
        content: 'Tablet (768-1024px)';
        background: rgba(255, 165, 0, 0.8);
    }
}

@media (max-width: 767px) {
    body::before {
        content: 'Mobile (< 768px)';
        background: rgba(255, 0, 0, 0.8);
    }
}