/* ========================================
   VARIABLES CSS CENTRALISÉES
   Pour faciliter la maintenance du site
   ======================================== */

:root {
    /* === ESPACEMENTS UNIFORMES === */
    /* Desktop */
    --grid-gap-desktop: 2.5rem;
    --section-padding-desktop: 6rem 2rem;
    --max-content-width: 1400px;
    
    /* Tablette (769px - 1024px) */
    --grid-gap-tablet: 2rem;
    --section-padding-tablet: 4rem 2rem;
    --grid-padding-tablet: 0 2rem;
    
    /* Mobile (max 768px) */
    --grid-gap-mobile: 1.5rem;
    --section-padding-mobile: 3rem 1.5rem;
    --grid-padding-mobile: 0 1.5rem;
    
    /* === COULEURS === */
    --color-primary: #ee7f08;
    --color-primary-light: #ffa940;
    --color-text-dark: #0a0e27;
    --color-text-medium: #4a5568;
    --color-text-light: #5a5a5a;
    --color-bg-white: #ffffff;
    --color-bg-gray-light: #f8fafb;
    --color-bg-gray: #eef2f5;
    
    /* === TYPOGRAPHIE === */
    --font-primary: 'Montserrat', sans-serif;
    --font-secondary: 'Comfortaa', sans-serif;
    
    /* === TRANSITIONS === */
    --transition-smooth: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    --transition-premium: all 0.5s cubic-bezier(0.4, 0, 0.2, 1);
    
    /* === OMBRES === */
    --shadow-card: 0 8px 30px rgba(10, 14, 39, 0.08), 0 2px 8px rgba(10, 14, 39, 0.04);
    --shadow-card-hover: 0 24px 60px rgba(238, 127, 8, 0.15), 0 8px 20px rgba(10, 14, 39, 0.08);
}

/* ========================================
   CLASSES UTILITAIRES RÉUTILISABLES
   ======================================== */

/* Grilles uniformes pour toutes les sections */
.grid-uniform {
    display: grid;
    gap: var(--grid-gap-desktop);
    max-width: var(--max-content-width);
    margin: 0 auto;
}

/* Grille 4 colonnes (desktop) */
.grid-4-cols {
    grid-template-columns: repeat(4, 1fr);
}

/* Grille 3 colonnes (desktop) */
.grid-3-cols {
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
}

/* Sections uniformes */
.section-uniform {
    padding: var(--section-padding-desktop);
    position: relative;
    overflow: hidden;
}

/* ========================================
   MEDIA QUERIES UNIFORMISÉES
   ======================================== */

/* Tablette (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .grid-uniform {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--grid-gap-tablet);
        padding: var(--grid-padding-tablet);
    }
    
    .section-uniform {
        padding: var(--section-padding-tablet);
    }
}

/* Mobile (max 768px) */
@media (max-width: 768px) {
    .grid-uniform {
        grid-template-columns: 1fr;
        gap: var(--grid-gap-mobile);
        padding: var(--grid-padding-mobile);
    }
    
    .section-uniform {
        padding: var(--section-padding-mobile);
    }
}