/* ============================================
   THÈME CLAIR – Variables CSS
   Journée Immersion Stratégique
============================================ */

:root {
    /* Couleurs principales */
    --teal: #21B1A1;
    --teal-dark: #1a9089;
    --teal-light: #e8f7f6;
    --charcoal: #303437;
    --gray-mid: #676B70;
    --gray-light: #D7D0CE;
    --yellow: #D4CC4D;
    --gold: #B8960C;

    /* Fond & texte */
    --bg: #FFFFFF;
    --bg-alt: #F8F7F5;
    --bg-dark: #303437;
    --text: #303437;
    --text-muted: #676B70;
    --text-light: #9CA3AF;
    --text-on-dark: #F8F7F5;

    /* Composants */
    --border: #E5E7EB;
    --card-bg: #FFFFFF;
    --card-shadow: 0 2px 12px rgba(0,0,0,0.06), 0 1px 3px rgba(0,0,0,0.04);

    /* Hero spécifique */
    --hero-bg: #F8F7F5;
    --hero-text: #303437;
    --hero-sub: #676B70;

    /* Timer banner */
    --timer-bg: #C0392B;
    --timer-text: #FFFFFF;

    /* Boutons */
    --btn-primary-bg: #21B1A1;
    --btn-primary-text: #FFFFFF;
    --btn-primary-hover: #1a9089;

    /* Accordéon FAQ */
    --faq-border: #E5E7EB;
    --faq-hover: #F8F7F5;

    /* Gradients */
    --gradient-hero: linear-gradient(135deg, #F8F7F5 0%, #EDF5F4 100%);
    --gradient-cta: linear-gradient(135deg, #21B1A1 0%, #1a9089 100%);
}