/*
===========================================
MAISONS CTL - VARIABLES CSS V1.0
Fichier: /public_html/css/variables.css
Description: Fichier centralisant toutes les variables CSS du projet.
             Permet de maintenir une cohérence visuelle et facilite
             les modifications globales (couleurs, espacements, etc.).
Version: 1.0 - Variables centralisées
Date: Janvier 2025
===========================================
*/

:root {
    /* ====== TYPOGRAPHIE ====== */
    --font-primary: 'Poppins', sans-serif;
    --font-size-base: 16px;
    --line-height-base: 1.6;
    
    /* ====== COULEURS PRINCIPALES ====== */
    --color-primary: #ffffff;
    --color-secondary: #f8f9fa;
    --color-accent: #c41e3a;
    --color-accent-hover: #a01729;
    --color-accent-light: rgba(196, 30, 58, 0.1);
    
    /* ====== COULEURS DE TEXTE ====== */
    --color-text-primary: #2c3e50;
    --color-text-secondary: #6c757d;
    --color-text-light: #ffffff;
    --color-text-muted: #adb5bd;
    
    /* ====== COULEURS NEUTRES ====== */
    --color-light: #ffffff;
    --color-grey-light: #e9ecef;
    --color-grey: #6c757d;
    --color-grey-dark: #343a40;
    --color-dark: #212529;
    --color-border: #e9ecef;
    
    /* ====== ESPACEMENTS ====== */
    --spacing-xs: 0.25rem;   /* 4px */
    --spacing-sm: 0.5rem;    /* 8px */
    --spacing-md: 1rem;      /* 16px */
    --spacing-lg: 1.5rem;    /* 24px */
    --spacing-xl: 2rem;      /* 32px */
    --spacing-xxl: 3rem;     /* 48px */
    --spacing-xxxl: 5rem;    /* 80px */
    
    /* ====== SECTIONS PADDING (Responsive) ====== */
    --section-padding-desktop: 120px;
    --section-padding-tablet: 80px;
    --section-padding-mobile: 60px;
    
    /* ====== CONTAINER ====== */
    --container-max-width: 1200px;
    --container-padding: 20px;
    
    /* ====== TRANSITIONS ====== */
    --transition-speed: 0.3s;
    --transition-speed-slow: 0.6s;
    --transition-ease: ease-in-out;
    
    /* ====== BORDURES ====== */
    --border-radius-sm: 6px;
    --border-radius: 12px;
    --border-radius-lg: 20px;
    --border-radius-pill: 50px;
    
    /* ====== OMBRES ====== */
    --shadow-light: 0 2px 15px rgba(0, 0, 0, 0.08);
    --shadow-medium: 0 5px 25px rgba(0, 0, 0, 0.12);
    --shadow-heavy: 0 10px 40px rgba(0, 0, 0, 0.15);
    --shadow-colored: 0 4px 15px rgba(196, 30, 58, 0.3);
    
    /* ====== Z-INDEX ====== */
    --z-index-mobile-menu: 900;
    --z-index-header: 1000;
    --z-index-modal: 1100;
    --z-index-whatsapp: 1200;
    
    /* ====== BREAKPOINTS (pour référence JS) ====== */
    --breakpoint-sm: 576px;
    --breakpoint-md: 768px;
    --breakpoint-lg: 992px;
    --breakpoint-xl: 1200px;
    --breakpoint-xxl: 1400px;
    
    /* ====== HEADER ====== */
    --header-height: 80px;
    --header-height-scrolled: 60px;
    --header-bg: rgba(255, 255, 255, 0.95);
    
    /* ====== ANIMATIONS ====== */
    --animation-duration: 0.6s;
    --animation-delay-increment: 0.1s;
}