/* ===== Variables CSS : Charte graphique de l'ARCTB ===== */
:root {
    /* Couleurs de fond */
    --bg-primary: #1F56A0;          /* Bleu CTB (en-tête, boutons) */
    --bg-secondary: #1A4A8A;        /* Bleu foncé CTB (sections, cartes) */
    --bg-accent: #8b0000;           /* Rouge bordeaux (accents) */
    --bg-neutral: #F5F5F5;          /* Fond gris 2001 (conteneurs) */

    /* Couleurs transparentes */
    --bg-primary-trans: rgba(31, 86, 160, 0.5);
    --bg-secondary-trans: rgba(26, 74, 138, 0.5);
    --bg-accent-trans: rgba(139, 0, 0, 0.2);
    --bg-neutral-trans: rgba(245, 245, 245, 0.5);

    /* Couleurs de texte */
    --text-primary: #212529;        /* Texte principal */
    --text-secondary: #6c757d;      /* Texte secondaire */

    /* Diviseurs */
    --divider-primary: #dee2e6;
    --divider-accent: #BBBBBB; /* Gris CTB */

    /* Utilitaires */
    --white: #ffffff;
    --black: #000000;
    --white-trans: rgba(255, 255, 255, 0.4);
    --black-trans: rgba(0, 0, 0, 0.3);
    --black-trans-high: rgba(0, 0, 0, 0.1);

    /* Typographie */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height: 1.6;              /* Unité sans "rem" pour éviter les cumul */

    /* Espacements */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Bordures & effets */
    --border-radius: 8px;
    --box-shadow: 0 2px 10px var(--black-trans-high);
    --transition: all 0.3s ease;
}

.ctb {
    /* Couleurs de fond */
    --bg-primary: #1F56A0;          /* Bleu CTB (en-tête, boutons) */
    --bg-secondary: #1A4A8A;        /* Bleu foncé CTB (sections, cartes) */
    --bg-accent: #8b0000;           /* Rouge bordeaux (accents) */
    --bg-neutral: #F5F5F5;          /* Fond gris 2001 (conteneurs) */

    /* Couleurs transparentes */
    --bg-primary-trans: rgba(31, 86, 160, 0.5);
    --bg-secondary-trans: rgba(26, 74, 138, 0.5);
    --bg-accent-trans: rgba(139, 0, 0, 0.2);
    --bg-neutral-trans: rgba(245, 245, 245, 0.5);

    /* Couleurs de texte */
    --text-primary: #212529;        /* Texte principal */
    --text-secondary: #6c757d;      /* Texte secondaire */

    /* Diviseurs */
    --divider-primary: #dee2e6;
    --divider-accent: #BBBBBB; /* Gris CTB */

    /* Utilitaires */
    --white: #ffffff;
    --black: #000000;
    --white-trans: rgba(255, 255, 255, 0.4);
    --black-trans: rgba(0, 0, 0, 0.3);
    --black-trans-high: rgba(0, 0, 0, 0.1);

    /* Typographie */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height: 1.6;              /* Unité sans "rem" pour éviter les cumul */

    /* Espacements */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Bordures & effets */
    --border-radius: 8px;
    --box-shadow: 0 2px 10px var(--black-trans-high);
    --transition: all 0.3s ease;
}

.ginko {
    /* Couleurs de fond */
    --bg-primary: #00a693;          /* Bleu turquoise (en-tête, boutons) */
    --bg-secondary: #2e8b57;        /* Vert (sections, cartes) */
    --bg-accent: #8b0000;           /* Rouge bordeaux (accents) */
    --bg-neutral: #f8f9fa;          /* Fond clair (conteneurs) */

    /* Couleurs transparentes */
    --bg-primary-trans: rgba(0, 166, 147, 0.5);
    --bg-secondary-trans: rgba(46, 139, 87, 0.5);
    --bg-accent-trans: rgba(139, 0, 0, 0.2);
    --bg-neutral-trans: rgba(248, 249, 250, 0.5);

    /* Couleurs de texte */
    --text-primary: #212529;        /* Texte principal */
    --text-secondary: #6c757d;      /* Texte secondaire */

    /* Diviseurs */
    --divider-primary: #dee2e6;
    --divider-accent: #80cbc4;

    /* Utilitaires */
    --white: #ffffff;
    --black: #000000;
    --white-trans: rgba(255, 255, 255, 0.4);
    --black-trans: rgba(0, 0, 0, 0.3);
    --black-trans-high: rgba(0, 0, 0, 0.1);

    /* Typographie */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height: 1.6;              /* Unité sans "rem" pour éviter les cumul */

    /* Espacements */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Bordures & effets */
    --border-radius: 8px;
    --box-shadow: 0 2px 10px var(--black-trans-high);
    --transition: all 0.3s ease;
}

.error {
    /* Couleurs de fond */
    --bg-primary: #d32f2f;
    --bg-secondary: #b71c1c;
    --bg-accent: #ff5722;
    --bg-neutral: #f5f5f5;

    /* Couleurs transparentes */
    --bg-primary-trans: rgba(211, 47, 47, 0.5);
    --bg-secondary-trans: rgba(183, 28, 28, 0.5);
    --bg-accent-trans: rgba(255, 87, 34, 0.2);
    --bg-neutral-trans: rgba(245, 245, 245, 0.5);

    /* Couleurs de texte */
    --text-primary: #ffffff;
    --text-secondary: #e0e0e0;

    /* Diviseurs */
    --divider-primary: #e0e0e0;
    --divider-accent: #ff5722;

    /* Utilitaires */
    --white: #ffffff;
    --black: #000000;
    --white-trans: rgba(255, 255, 255, 0.7);
    --black-trans: rgba(0, 0, 0, 0.3);
    --black-trans-high: rgba(0, 0, 0, 0.1);

    /* Typographie */
    --font-main: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --font-size-base: 1rem;
    --font-size-h1: 2.5rem;
    --font-size-h2: 2rem;
    --font-size-h3: 1.5rem;
    --line-height: 1.6;

    /* Espacements */
    --spacing-sm: 0.5rem;
    --spacing-md: 1rem;
    --spacing-lg: 2rem;
    --spacing-xl: 3rem;

    /* Bordures & effets */
    --border-radius: 8px;
    --box-shadow: 0 4px 12px rgba(211, 47, 47, 0.3);
    --transition: all 0.3s ease;
}