/* Variables CSS - Couleurs et styles */

:root {
    /* Couleurs principales - Fonds */
    --blanc: #FFFFFF;
    --gris-tres-clair: #FAFAFA;
    --gris-clair: #F5F5F5;
    --gris-moyen: #E0E0E0;
    --gris-fonce: #757575;
    --texte-principal: #333333;
    --texte-secondaire: #666666;

    /* Couleurs d'accent pastel - TRÈS PÂLES (inspirées du logo) */
    --bleu-pastel: #E3F2FD;        /* Bleu très pâle, presque blanc */
    --turquoise-pastel: #E0F7FA;   /* Turquoise très pâle */
    --orange-pastel: #FFE0B2;      /* Orange très pâle, crème */
    --vert-pastel: #E8F5E9;        /* Vert très pâle */
    --violet-pastel: #F3E5F5;      /* Violet très pâle */

    /* Couleurs d'accent - Pour boutons et CTA (plus saturées) */
    --bleu-clair: #90CAF9;         /* Bleu doux */
    --turquoise: #4DD0E1;          /* Turquoise doux */
    --orange-doux: #FFAB91;        /* Orange doux */
    --vert-doux: #81C784;          /* Vert doux */
    --violet-doux: #BA68C8;        /* Violet doux */

    /* Couleurs fonctionnelles */
    --succes: #4CAF50;
    --attention: #FFC107;
    --erreur: #F44336;
    --info: #2196F3;

    /* Transparences */
    --overlay-sombre: rgba(0, 0, 0, 0.6);
    --overlay-clair: rgba(255, 255, 255, 0.9);

    /* Typographie */
    --font-titres: 'Poppins', sans-serif;
    --font-texte: 'Open Sans', sans-serif;
    --font-heading: 'Poppins', sans-serif;
    
    /* Poids de police */
    --font-normal: 400;
    --font-medium: 500;
    --font-semibold: 600;
    --font-bold: 700;

    /* Tailles de police */
    --text-xs: 0.75rem;    /* 12px */
    --text-sm: 0.875rem;   /* 14px */
    --text-base: 1rem;     /* 16px */
    --text-lg: 1.125rem;   /* 18px */
    --text-xl: 1.25rem;    /* 20px */
    --text-2xl: 1.5rem;    /* 24px */
    --text-3xl: 1.875rem;  /* 30px */
    --text-4xl: 2.25rem;   /* 36px */
    --text-5xl: 3rem;      /* 48px */

    /* Espacements */
    --space-xs: 0.5rem;    /* 8px */
    --space-sm: 1rem;      /* 16px */
    --space-md: 1.5rem;    /* 24px */
    --space-lg: 2rem;      /* 32px */
    --space-xl: 3rem;      /* 48px */
    --space-2xl: 4rem;     /* 64px */
    --space-3xl: 6rem;     /* 96px */

    /* Bordures */
    --radius-sm: 4px;
    --radius-md: 8px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-round: 50%;

    /* Ombres */
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.1);
    --shadow-lg: 0 10px 15px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 25px rgba(0, 0, 0, 0.15);

    /* Transitions */
    --transition-rapide: 150ms ease-in-out;
    --transition-normale: 300ms ease-in-out;
    --transition-normal: 300ms ease-in-out;
    --transition-lente: 500ms ease-in-out;

    /* Largeurs maximales */
    --container-max: 1200px;
    --max-width-sm: 640px;
    --max-width-md: 768px;
    --max-width-lg: 1024px;
    --max-width-xl: 1280px;
    --max-width-2xl: 1536px;

    /* Z-index */
    --z-dropdown: 1000;
    --z-sticky: 1020;
    --z-fixed: 1030;
    --z-modal-backdrop: 1040;
    --z-modal: 1050;
    --z-tooltip: 1060;
}