/* Variables CSS - Thème et breakpoints */

:root {
    /* Couleurs - Thème IDC */
    --primary-color: #1b7d3a;      /* Vert foncé du logo IDC */
    --secondary-color: #ff6600;    /* Orange du logo IDC */
    --primary-light: #2d9f52;      /* Vert clair pour hover */
    --primary-dark: #0f5629;       /* Vert très foncé */
    --secondary-light: #ffb84d;    /* Orange clair */
    --dark-color: #1a1a1a;
    --light-color: #f9f9f9;
    --white-color: #ffffff;
    --gray-color: #666666;
    --gray-light: #f5f5f5;
    --border-color: #e0e0e0;

    /* Typographie */
    --font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-size-base: 16px;
    --font-size-sm: 14px;
    --font-size-lg: 18px;
    --font-size-xl: 24px;
    --font-size-2xl: 32px;
    --font-size-3xl: 48px;

    /* Espacement */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;

    /* Breakpoints */
    --breakpoint-sm: 576px;    /* Petits téléphones */
    --breakpoint-md: 768px;    /* Tablettes */
    --breakpoint-lg: 992px;    /* Petits écrans */
    --breakpoint-xl: 1200px;   /* Écrans standard */
    --breakpoint-xxl: 1400px;  /* Grands écrans */

    /* Autres */
    --border-radius: 4px;
    --box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    --transition: all 0.3s ease;
}