/* ==========================================
   VARIABLES ET BASE
   ========================================== */
:root {
    /* Couleurs principales CELER */
    --primary-gold: #1B3B5F;        /* Bleu Marine CELER (était gold) */
    --secondary-gold: #4A5568;      /* Gris Ardoise CELER (inchangé) */
    --accent-gold: #B87854;         /* Cuivre CELER (inchangé) */
    --dark-gold: #2d5280;           /* Bleu Marine Light CELER (était #65581e) */
    --light-beige: #a36848;         /* Cuivre Dark CELER (était #e6dba7) */
    --cream: #F8F9FA;               /* Blanc Cassé CELER (inchangé) */
    --bright-gold: #B87854;         /* Cuivre CELER (était #f6ac23) */
    
    /* Texte */
    --text-primary: #1B3B5F;        /* Bleu Marine CELER (était #1f2937) */
    --text-secondary: #4A5568;      /* Gris Ardoise CELER (était #4b5563) */
    /* ============================================
   CELER-EC - CHARTE GRAPHIQUE OFFICIELLE
   Basée sur guide_line_branche.html
   ============================================ */

/* ==========================================
   1. VARIABLES CSS RACINE
   ========================================== */

    /* Couleurs Principales (Charte Officielle) */
    --celer-primary: #1B3B5F;        /* Bleu Marine - Couleur principale */
    --celer-primary-light: #2d5280;  /* Bleu Marine clair - Variante */
    --celer-secondary: #4A5568;      /* Gris Ardoise - Textes secondaires */
    --celer-accent: #B87854;         /* Cuivre - Accents et CTA */
    --celer-accent-dark: #a36848;    /* Cuivre foncé - Hover */
    --celer-neutral: #F8F9FA;        /* Blanc Cassé - Fonds */
    --celer-neutral-dark: #e5e7eb;   /* Gris clair - Bordures */
    
    /* Couleurs complémentaires */
    --celer-gray-light: #6b7280;     /* Gris moyen */
    --celer-white: #ffffff;          /* Blanc pur */
    --celer-black: #1a1a1a;          /* Noir texte */
    
    /* Couleurs sémantiques */
    --celer-success: #059669;        /* Vert - Succès */
    --celer-warning: #f59e0b;        /* Orange - Avertissement */
    --celer-error: #dc2626;          /* Rouge - Erreur */
    --celer-info: #3b82f6;           /* Bleu - Information */
    
    /* Typographie (Charte Officielle) */
    --celer-font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    --celer-font-weight-light: 300;
    --celer-font-weight-normal: 400;
    --celer-font-weight-medium: 500;
    --celer-font-weight-semibold: 600;
    --celer-font-weight-bold: 700;
    
    /* Espacements standardisés */
    --celer-spacing-xs: 0.25rem;

  /* Chatbot */
    
     /* Chatbot - Couleurs CELER */
    --cb-primary: #1B3B5F;          /* Bleu Marine CELER (était #b4a459) */
    --cb-primary-light: #2d5280;    /* Bleu Marine Light CELER (était #d7d3a1) */
    --cb-secondary: #4A5568;        /* Gris Ardoise CELER (était #64748b) */
    --cb-primary-dark: #1B3B5F;     /* Bleu Marine CELER (était #96866d) */
    --cb-accent: #B87854;           /* Cuivre CELER (était #10b981) */
    --cb-warning: #f59e0b;          /* Inchangé */
    --cb-danger: #ef4444;           /* Inchangé */
    --cb-primary-subtle: rgba(27, 59, 95, 0.1);      /* Bleu Marine CELER 10% */
    --cb-primary-glow: rgba(27, 59, 95, 0.2);        /* Bleu Marine CELER 20% */
        }

        /**
 * CELER - Charte Graphique Couleurs
 * Version 1.0 - 2025
 * Fichier de variables CSS pour l'identité visuelle CELER
 */

:root {
  /* ========================================
     COULEURS PRINCIPALES
     ======================================== */
  
  /* Bleu Marine - Couleur Primaire */
  --color-primary: #1B3B5F;
  --color-primary-rgb: 27, 59, 95;
  --color-primary-light: #2d5280;
  --color-primary-dark: #152f4a;
  
  /* Cuivre - Couleur Accent */
  --color-accent: #B87854;
  --color-accent-rgb: 184, 120, 84;
  --color-accent-light: #c98b6b;
  --color-accent-dark: #a36848;
  
  /* Gris Ardoise - Couleur Secondaire */
  --color-secondary: #4A5568;
  --color-secondary-rgb: 74, 85, 104;
  --color-secondary-light: #6b7280;
  --color-secondary-dark: #374151;
  
  /* Blanc Cassé - Couleur Neutre */
  --color-neutral: #F8F9FA;
  --color-neutral-rgb: 248, 249, 250;
  
  /* ========================================
     COULEURS UTILITAIRES
     ======================================== */
  
  /* Backgrounds */
  --bg-white: #ffffff;
  --bg-light: #F8F9FA;
  --bg-gray: #e5e7eb;
  --bg-dark: #1B3B5F;
  --bg-accent: #B87854;
  
  /* Textes */
  --text-primary: #1B3B5F;
  --text-secondary: #4A5568;
  --text-light: #6b7280;
  --text-white: #ffffff;
  --text-accent: #B87854;
  
  /* Bordures */
  --border-light: #e5e7eb;
  --border-medium: #d1d5db;
  --border-dark: #9ca3af;
  --border-primary: #1B3B5F;
  --border-accent: #B87854;
  
  /* ========================================
     GRADIENTS
     ======================================== */
  
  --gradient-primary: linear-gradient(135deg, #1B3B5F 0%, #2d5280 100%);
  --gradient-accent: linear-gradient(135deg, #B87854 0%, #a36848 100%);
  --gradient-secondary: linear-gradient(135deg, #4A5568 0%, #6b7280 100%);
  --gradient-light: linear-gradient(135deg, #F8F9FA 0%, #ffffff 100%);
  
  /* ========================================
     ÉTATS INTERACTIFS
     ======================================== */
  
  /* Hover States */
  --hover-primary: #2d5280;
  --hover-accent: #a36848;
  --hover-secondary: #6b7280;
  
  /* Focus States */
  --focus-primary: #1B3B5F;
  --focus-accent: #B87854;
  
  /* Active States */
  --active-primary: #152f4a;
  --active-accent: #8f5a3e;
  
  /* Disabled States */
  --disabled-bg: #e5e7eb;
  --disabled-text: #9ca3af;
  
  /* ========================================
     OPACITÉS PRÉDÉFINIES
     ======================================== */
  
  /* Primary avec opacité */
  --primary-10: rgba(27, 59, 95, 0.1);
  --primary-20: rgba(27, 59, 95, 0.2);
  --primary-30: rgba(27, 59, 95, 0.3);
  --primary-50: rgba(27, 59, 95, 0.5);
  --primary-70: rgba(27, 59, 95, 0.7);
  --primary-90: rgba(27, 59, 95, 0.9);
  --primary-95: rgba(27, 59, 95, 0.95);
  
  /* Accent avec opacité */
  --accent-10: rgba(184, 120, 84, 0.1);
  --accent-20: rgba(184, 120, 84, 0.2);
  --accent-30: rgba(184, 120, 84, 0.3);
  --accent-50: rgba(184, 120, 84, 0.5);
  --accent-70: rgba(184, 120, 84, 0.7);
  --accent-90: rgba(184, 120, 84, 0.9);
  
  /* Secondary avec opacité */
  --secondary-10: rgba(74, 85, 104, 0.1);
  --secondary-20: rgba(74, 85, 104, 0.2);
  --secondary-50: rgba(74, 85, 104, 0.5);
  --secondary-70: rgba(74, 85, 104, 0.7);
  
  /* ========================================
     OMBRES
     ======================================== */
  
  --shadow-sm: 0 1px 2px 0 rgba(27, 59, 95, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(27, 59, 95, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(27, 59, 95, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(27, 59, 95, 0.1);
  --shadow-2xl: 0 25px 50px -12px rgba(27, 59, 95, 0.25);
  
  /* Ombres spécifiques */
  --shadow-card: 0 10px 40px rgba(0, 0, 0, 0.1);
  --shadow-button: 0 4px 20px rgba(184, 120, 84, 0.3);
  --shadow-nav: 0 2px 10px rgba(27, 59, 95, 0.1);
  
  /* ========================================
     COULEURS DE STATUT
     ======================================== */
  
  /* Success - Vert */
  --success: #059669;
  --success-light: #d1fae5;
  --success-dark: #047857;
  
  /* Error - Rouge */
  --error: #dc2626;
  --error-light: #fee2e2;
  --error-dark: #b91c1c;
  
  /* Warning - Orange/Jaune */
  --warning: #f59e0b;
  --warning-light: #fef3c7;
  --warning-dark: #d97706;
  
  /* Info - Bleu clair */
  --info: #3b82f6;
  --info-light: #dbeafe;
  --info-dark: #2563eb;
}

/* ========================================
   CLASSES UTILITAIRES
   ======================================== */

/* Backgrounds */
.bg-primary { background-color: var(--color-primary); }
.bg-accent { background-color: var(--color-accent); }
.bg-secondary { background-color: var(--color-secondary); }
.bg-neutral { background-color: var(--color-neutral); }
.bg-white { background-color: var(--bg-white); }

/* Gradients */
.bg-gradient-primary { background: var(--gradient-primary); }
.bg-gradient-accent { background: var(--gradient-accent); }
.bg-gradient-secondary { background: var(--gradient-secondary); }

/* Textes */
.text-primary { color: var(--text-primary); }
.text-accent { color: var(--text-accent); }
.text-secondary { color: var(--text-secondary); }
.text-light { color: var(--text-light); }
.text-white { color: var(--text-white); }

/* Bordures */
.border-primary { border-color: var(--border-primary); }
.border-accent { border-color: var(--border-accent); }
.border-light { border-color: var(--border-light); }
.border-medium { border-color: var(--border-medium); }

/* ========================================
   VALEURS PANTONE & CMYK (Commentaires)
   ======================================== */

/*
BLEU MARINE (#1B3B5F)
- Pantone: 289 C
- CMYK: 72, 38, 0, 63
- RGB: 27, 59, 95
- Usage: Logo, titres, navigation, boutons primaires

CUIVRE (#B87854)
- Pantone: 4725 C
- CMYK: 0, 35, 54, 28
- RGB: 184, 120, 84
- Usage: Signature logo, CTA, liens, accents

GRIS ARDOISE (#4A5568)
- Pantone: 432 C
- CMYK: 29, 18, 0, 59
- RGB: 74, 85, 104
- Usage: Textes secondaires, sous-titres

BLANC CASSÉ (#F8F9FA)
- Pantone: Cool Gray 1 C
- CMYK: 1, 0, 1, 2
- RGB: 248, 249, 250
- Usage: Fonds de page, espaces de respiration
*/