/**
 * Content Harmony CSS - Harmonisation des styles pour Sections et KeyFigures
 * Assure une cohérence visuelle sur les pages utilisant des Sections et KeyFigures
 * Ce CSS est inclus uniquement dans les pages qui utilisent ces composants
 */

/* ============================================
   VARIABLES CSS GLOBALES
   ============================================ */
:root {
  /* Couleurs principales harmonisées */
  --content-primary: #2250fc;
  --content-primary-dark: #1a3fc9;
  --content-primary-light: #4a6ffc;
  --content-secondary: #B42E5E;
  --content-secondary-dark: #8a2347;
  --content-secondary-light: #c94d7a;
  
  /* Couleurs de texte */
  --text-primary: #1a1a1a;
  --text-secondary: #4a5568;
  --text-muted: #6b7280;
  --text-light: #9ca3af;
  
  /* Couleurs de fond */
  --bg-light: #f8f9fa;
  --bg-white: #ffffff;
  --bg-gradient-start: #667eea;
  --bg-gradient-end: #764ba2;
  
  /* Polices harmonisées */
  --font-family-base: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-family-heading: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  
  /* Tailles de police harmonisées */
  --font-size-xs: 0.75rem;      /* 12px */
  --font-size-sm: 0.875rem;      /* 14px */
  --font-size-base: 1rem;        /* 16px */
  --font-size-lg: 1.125rem;      /* 18px */
  --font-size-xl: 1.25rem;       /* 20px */
  --font-size-2xl: 1.5rem;       /* 24px */
  --font-size-3xl: 1.875rem;     /* 30px */
  --font-size-4xl: 2.25rem;      /* 36px */
  --font-size-5xl: 3rem;         /* 48px */
  
  /* Espacements harmonisés */
  --spacing-xs: 0.5rem;
  --spacing-sm: 0.75rem;
  --spacing-md: 1rem;
  --spacing-lg: 1.5rem;
  --spacing-xl: 2rem;
  --spacing-2xl: 3rem;
  --spacing-3xl: 4rem;
  
  /* Rayons de bordure */
  --radius-sm: 0.375rem;
  --radius-md: 0.5rem;
  --radius-lg: 0.75rem;
  --radius-xl: 1rem;
  
  /* Ombres harmonisées */
  --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);
}

/* ============================================
   STYLES GLOBAUX POUR SECTIONS
   ============================================ */

/* Titre de section harmonisé - seulement si pas de style inline */
.section-title:not([style*="color"]) {
  font-family: var(--font-family-heading);
  font-weight: 700;
  font-size: clamp(1.5rem, 4vw, 2.25rem);
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* Exception : ne pas forcer la couleur si déjà définie explicitement */
.section-title.text-white,
.section-title.text-white-50,
.section-title.text-white-75,
.section-title.text-light {
  /* La couleur est héritée de la classe */
}

/* Sous-titre de section harmonisé */
.section-subtitle:not([style*="color"]) {
  font-family: var(--font-family-base);
  font-size: var(--font-size-lg);
  font-weight: 400;
  line-height: 1.6;
}

/* Exception : ne pas forcer la couleur si déjà définie explicitement */
.section-subtitle.text-white,
.section-subtitle.text-white-50,
.section-subtitle.text-white-75,
.section-subtitle.text-light {
  /* La couleur est héritée de la classe */
}

/* Contenu de section harmonisé */
.section-content:not([style*="color"]):not(.text-light):not(.text-white):not(.text-white-50):not(.text-white-75),
.section-content-text:not([style*="color"]):not(.text-light):not(.text-white):not(.text-white-50):not(.text-white-75) {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.7;
}

/* ============================================
   STYLES GLOBAUX POUR KEYFIGURES
   ============================================ */

/* Texte en surbrillance (highlightText) harmonisé - seulement si pas de style inline */
.kf-highlight:not(.text-white):not(.text-white-50):not(.text-white-75):not([style*="color"]),
.kf-value:not(.text-white):not(.text-white-50):not(.text-white-75):not([style*="color"]),
[class*="kf-stat"] .value:not(.text-white):not(.text-white-50):not(.text-white-75):not([style*="color"]) {
  font-family: var(--font-family-heading);
  font-weight: 700;
  line-height: 1.1;
}

/* Label harmonisé */
.kf-label:not([style*="color"]),
.label:not([style*="color"]) {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: 600;
}

/* Titre KeyFigure harmonisé */
.kf-title:not([style*="color"]),
.kf-title h4:not([style*="color"]),
.kf-title h5:not([style*="color"]),
.kf-title h6:not([style*="color"]) {
  font-family: var(--font-family-heading);
  font-size: var(--font-size-lg);
  font-weight: 600;
  line-height: 1.3;
}

/* Sous-titre KeyFigure harmonisé */
.kf-subtitle:not([style*="color"]) {
  font-family: var(--font-family-base);
  font-size: var(--font-size-sm);
  font-weight: 400;
}

/* Prose harmonisée pour le contenu riche */
.kf-prose:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light),
.kf-text:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light),
.kf-content:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light) {
  font-family: var(--font-family-base);
  font-size: var(--font-size-base);
  font-weight: 400;
  line-height: 1.7;
}

.kf-prose p,
.kf-prose ul,
.kf-prose ol {
  margin-bottom: var(--spacing-md);
}

.kf-prose h1:not([style*="color"]),
.kf-prose h2:not([style*="color"]),
.kf-prose h3:not([style*="color"]),
.kf-prose h4:not([style*="color"]) {
  font-family: var(--font-family-heading);
  font-weight: 600;
  line-height: 1.3;
  margin-top: var(--spacing-lg);
  margin-bottom: var(--spacing-md);
}

.kf-prose h1 { font-size: var(--font-size-3xl); }
.kf-prose h2 { font-size: var(--font-size-2xl); }
.kf-prose h3 { font-size: var(--font-size-xl); }
.kf-prose h4 { font-size: var(--font-size-lg); }

.kf-prose a {
  text-decoration: underline;
  transition: color 0.2s ease;
}

.kf-prose strong {
  font-weight: 600;
}

/* ============================================
   HARMONISATION DES TAILLES DISPLAY
   ============================================ */

/* Classes display harmonisées - seulement pour les KeyFigures et Sections */
.kf-highlight.display-1,
.kf-highlight.display-2,
.kf-highlight.display-3,
.kf-highlight.display-4,
.kf-highlight.display-5,
.kf-highlight.display-6,
.section-title.display-1,
.section-title.display-2,
.section-title.display-3,
.section-title.display-4,
.section-title.display-5,
.section-title.display-6 {
  font-weight: 700;
  line-height: 1.1;
}

.kf-highlight.display-1 { font-size: clamp(2.5rem, 6vw, 4rem); }
.kf-highlight.display-2 { font-size: clamp(2rem, 5vw, 3.5rem); }
.kf-highlight.display-3 { font-size: clamp(1.75rem, 4.5vw, 3rem); }
.kf-highlight.display-4 { font-size: clamp(1.5rem, 4vw, 2.5rem); }
.kf-highlight.display-5 { font-size: clamp(1.25rem, 3.5vw, 2rem); }
.kf-highlight.display-6 { font-size: clamp(1.125rem, 3vw, 1.75rem); }

/* ============================================
   HARMONISATION DES ESPACEMENTS
   ============================================ */

/* Espacement cohérent entre sections - seulement pour les sections créées via l'admin */
section[data-section-id] + section[data-section-id] {
  margin-top: var(--spacing-3xl);
}

/* ============================================
   RESPONSIVE
   ============================================ */

@media (max-width: 768px) {
  .section-title:not([style*="font-size"]) {
    font-size: clamp(1.25rem, 5vw, 1.75rem);
  }
  
  .section-subtitle:not([style*="font-size"]) {
    font-size: var(--font-size-base);
  }
  
  .kf-prose:not([style*="font-size"]) {
    font-size: var(--font-size-sm);
  }
}

/* ============================================
   DARK MODE SUPPORT
   ============================================ */

@media (prefers-color-scheme: dark) {
  .section-title:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light),
  .kf-title:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light) {
    color: #f8f9fa;
  }
  
  .section-subtitle:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light),
  .kf-prose:not([style*="color"]):not(.text-white):not(.text-white-50):not(.text-white-75):not(.text-light) {
    color: #dee2e6;
  }
}