/**
 * CampusQCM Global Typography & Hero System
 * Système unifié pour cohérence visuelle sur tout le site
 * 
 * @package CampusQCM
 * @version 2.1.0
 */

/* ========================================
   TYPOGRAPHY TOKENS - GLOBAL
======================================== */
:root {
  /* Font Family */
  --cq-font-heading: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --cq-font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  
  /* Heading Sizes - Desktop */
  --cq-h1-size: clamp(2rem, 4vw, 2.75rem);
  --cq-h2-size: clamp(1.5rem, 3vw, 2rem);
  --cq-h3-size: clamp(1.25rem, 2.5vw, 1.5rem);
  --cq-h4-size: 1.125rem;
  
  /* Heading Weights */
  --cq-h1-weight: 800;
  --cq-h2-weight: 700;
  --cq-h3-weight: 600;
  --cq-h4-weight: 600;
  
  /* Line Heights */
  --cq-h1-lh: 1.15;
  --cq-h2-lh: 1.25;
  --cq-h3-lh: 1.35;
  --cq-body-lh: 1.65;
  
  /* Letter Spacing */
  --cq-heading-ls: -0.02em;
  
  /* Body Text */
  --cq-body-size: 1rem;
  --cq-body-color: #64748b;
  --cq-body-color-dark: #94a3b8;
  
  /* ================================
     COLOR PALETTE - LIGHT MODE
  ================================ */
  /* Primary Accent */
  --cq-accent: #6366f1;
  --cq-accent-alt: #8b5cf6;
  
  /* Semantic Colors */
  --cq-amber: #f59e0b;
  --cq-amber-light: #fbbf24;
  --cq-success: #10b981;
  --cq-success-light: #34d399;
  --cq-danger: #ef4444;
  --cq-danger-light: #f87171;
  --cq-warning: #f59e0b;
  --cq-info: #3b82f6;
  
  /* Background Colors */
  --cq-bg: #ffffff;
  --cq-bg-alt: #f8fafc;
  --cq-card-bg: #ffffff;
  
  /* Border Colors */
  --cq-border: #e2e8f0;
  --cq-border-light: #f1f5f9;
  
  /* Text Colors */
  --cq-text: #1e293b;
  --cq-text-muted: #64748b;
  --cq-text-light: #94a3b8;
  
  /* Hero Spacing */
  --cq-hero-padding-top: 80px;
  --cq-hero-padding-bottom: 60px;
  --cq-hero-padding-x: 40px;
  --cq-hero-radius: 24px;
  --cq-hero-margin-bottom: 48px;
  --cq-hero-margin-top: 2rem;
  
  /* Hero Gradient - Dynamique selon la palette choisie */
  --cq-hero-gradient: linear-gradient(135deg, var(--cq-accent, #6366f1) 0%, var(--cq-accent-alt, #8b5cf6) 100%);
  --cq-hero-shadow: 0 20px 60px color-mix(in srgb, var(--cq-accent, #6366f1) 25%, transparent);
  
  /* Variantes fixes pour pages spécifiques */
  --cq-hero-gradient-green: linear-gradient(135deg, #10b981 0%, #059669 100%);
  --cq-hero-shadow-green: 0 20px 60px rgba(16, 185, 129, 0.25);
  --cq-hero-gradient-amber: linear-gradient(135deg, #f59e0b 0%, #d97706 100%);
  --cq-hero-shadow-amber: 0 20px 60px rgba(245, 158, 11, 0.25);
  --cq-hero-gradient-blue: linear-gradient(135deg, #3b82f6 0%, #1d4ed8 100%);
  --cq-hero-shadow-blue: 0 20px 60px rgba(59, 130, 246, 0.25);
  --cq-hero-gradient-rose: linear-gradient(135deg, #f43f5e 0%, #e11d48 100%);
  --cq-hero-shadow-rose: 0 20px 60px rgba(244, 63, 94, 0.25);
}

/* ================================
   COLOR PALETTE - DARK MODE
================================ */
body.qcm-dark,
[data-theme="dark"] {
  --cq-bg: #0f172a;
  --cq-bg-alt: #1e293b;
  --cq-card-bg: #1f2937;
  
  --cq-border: #374151;
  --cq-border-light: #475569;
  
  --cq-text: #f1f5f9;
  --cq-text-muted: #94a3b8;
  --cq-text-light: #64748b;
}

/* ========================================
   GLOBAL TYPOGRAPHY RESET
   (s'applique à toutes les pages du thème)
======================================== */

/* Toutes les pages du thème CampusQCM */
.campus-page h1,
.profile-page h1,
.scores-page h1,
.generator-page h1,
.blog-page h1,
.aide-page h1,
.contact-page h1,
.groups-page h1 {
  font-family: var(--cq-font-heading);
  font-size: var(--cq-h1-size);
  font-weight: var(--cq-h1-weight);
  line-height: var(--cq-h1-lh);
  letter-spacing: var(--cq-heading-ls);
  color: var(--cq-text, #1e293b);
  margin: 0 0 1rem;
}

.campus-page h2,
.profile-page h2,
.scores-page h2,
.generator-page h2,
.blog-page h2,
.aide-page h2,
.contact-page h2,
.groups-page h2 {
  font-family: var(--cq-font-heading);
  font-size: var(--cq-h2-size);
  font-weight: var(--cq-h2-weight);
  line-height: var(--cq-h2-lh);
  letter-spacing: var(--cq-heading-ls);
  color: var(--cq-text, #1e293b);
  margin: 0 0 1rem;
}

.campus-page h3,
.profile-page h3,
.scores-page h3,
.generator-page h3,
.blog-page h3,
.aide-page h3,
.contact-page h3,
.groups-page h3 {
  font-family: var(--cq-font-heading);
  font-size: var(--cq-h3-size);
  font-weight: var(--cq-h3-weight);
  line-height: var(--cq-h3-lh);
  letter-spacing: var(--cq-heading-ls);
  color: var(--cq-text, #1e293b);
  margin: 0 0 0.75rem;
}

.campus-page h4,
.profile-page h4,
.scores-page h4,
.generator-page h4,
.blog-page h4,
.aide-page h4,
.contact-page h4,
.groups-page h4 {
  font-family: var(--cq-font-heading);
  font-size: var(--cq-h4-size);
  font-weight: var(--cq-h4-weight);
  line-height: var(--cq-h3-lh);
  color: var(--cq-text, #1e293b);
  margin: 0 0 0.5rem;
}

.campus-page p,
.profile-page p,
.scores-page p,
.generator-page p,
.blog-page p,
.aide-page p,
.contact-page p,
.groups-page p {
  font-family: var(--cq-font-body);
  font-size: var(--cq-body-size);
  line-height: var(--cq-body-lh);
  color: var(--cq-body-color);
  margin: 0 0 1rem;
}

/* Dark mode pour toutes les pages */
body.qcm-dark .campus-page p,
body.qcm-dark .profile-page p,
body.qcm-dark .scores-page p,
body.qcm-dark .generator-page p,
body.qcm-dark .blog-page p,
body.qcm-dark .aide-page p,
body.qcm-dark .contact-page p,
body.qcm-dark .groups-page p {
  color: var(--cq-body-color-dark);
}

body.qcm-dark .campus-page h1,
body.qcm-dark .campus-page h2,
body.qcm-dark .campus-page h3,
body.qcm-dark .campus-page h4,
body.qcm-dark .profile-page h1,
body.qcm-dark .profile-page h2,
body.qcm-dark .profile-page h3,
body.qcm-dark .profile-page h4,
body.qcm-dark .scores-page h1,
body.qcm-dark .scores-page h2,
body.qcm-dark .scores-page h3,
body.qcm-dark .scores-page h4,
body.qcm-dark .generator-page h1,
body.qcm-dark .generator-page h2,
body.qcm-dark .generator-page h3,
body.qcm-dark .generator-page h4,
body.qcm-dark .blog-page h1,
body.qcm-dark .blog-page h2,
body.qcm-dark .blog-page h3,
body.qcm-dark .blog-page h4,
body.qcm-dark .aide-page h1,
body.qcm-dark .aide-page h2,
body.qcm-dark .aide-page h3,
body.qcm-dark .aide-page h4,
body.qcm-dark .contact-page h1,
body.qcm-dark .contact-page h2,
body.qcm-dark .contact-page h3,
body.qcm-dark .contact-page h4,
body.qcm-dark .groups-page h1,
body.qcm-dark .groups-page h2,
body.qcm-dark .groups-page h3,
body.qcm-dark .groups-page h4 {
  color: #f1f5f9;
}

/* ========================================
   UNIFIED HERO COMPONENT
======================================== */
.cq-hero {
  position: relative;
  padding: var(--cq-hero-padding-top) var(--cq-hero-padding-x) var(--cq-hero-padding-bottom);
  border-radius: var(--cq-hero-radius);
  overflow: hidden;
  margin-top: var(--cq-hero-margin-top);
  margin-bottom: var(--cq-hero-margin-bottom);
  background: var(--cq-hero-gradient);
  box-shadow: var(--cq-hero-shadow);
  text-align: center;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.cq-hero--green {
  --cq-hero-gradient: var(--cq-hero-gradient-green);
  --cq-hero-shadow: var(--cq-hero-shadow-green);
}

.cq-hero--blue {
  --cq-hero-gradient: var(--cq-hero-gradient-blue);
  --cq-hero-shadow: var(--cq-hero-shadow-blue);
}

.cq-hero--amber {
  --cq-hero-gradient: var(--cq-hero-gradient-amber);
  --cq-hero-shadow: var(--cq-hero-shadow-amber);
}

.cq-hero--rose {
  --cq-hero-gradient: var(--cq-hero-gradient-rose);
  --cq-hero-shadow: var(--cq-hero-shadow-rose);
}

.cq-hero--flat {
  border-radius: 0 0 32px 32px;
  margin-bottom: 40px;
}

/* Hero Overlay (decorative) */
.cq-hero__overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* Hero Content */
.cq-hero__content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  width: 100%;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Hero Badge */
.cq-hero__badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
}

/* Hero Title */
.cq-hero__title {
  font-size: var(--cq-h1-size);
  font-weight: var(--cq-h1-weight);
  line-height: var(--cq-h1-lh);
  letter-spacing: var(--cq-heading-ls);
  color: white !important;
  margin-bottom: 1rem;
  text-align: center !important;
}

/* Hero Subtitle */
.cq-hero__subtitle {
  font-size: 1.125rem;
  opacity: 1;
  max-width: 650px;
  margin: 0 auto;
  line-height: 1.6;
  color: rgba(255, 255, 255, 1) !important;
  text-align: center !important;
}

/* ========================================
   SECTION HEADERS (for content sections)
======================================== */
.cq-section-header {
  text-align: center;
  max-width: 700px;
  margin: 0 auto 2.5rem;
}

.cq-section-header h2 {
  margin-bottom: 0.75rem;
}

.cq-section-header p {
  font-size: 1.0625rem;
  color: var(--cq-text-secondary, #64748b);
}

/* ========================================
   PAGE SECTION TITLES (with icons)
======================================== */
.cq-section-title {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--cq-text, #1e293b);
  margin-bottom: 1.25rem;
  padding-bottom: 0.75rem;
  border-bottom: 2px solid var(--cq-border, #e2e8f0);
}

body.qcm-dark .cq-section-title {
  color: #f1f5f9;
  border-color: #374151;
}

/* ========================================
   RESPONSIVE HERO
======================================== */
@media (max-width: 768px) {
  :root {
    --cq-hero-padding-top: 60px;
    --cq-hero-padding-bottom: 50px;
    --cq-hero-padding-x: 24px;
    --cq-hero-radius: 20px;
    --cq-hero-margin-bottom: 32px;
  }

  .cq-hero__badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.875rem;
    margin-bottom: 1.25rem;
  }

  .cq-hero__subtitle {
    font-size: 1rem;
  }
}

@media (max-width: 480px) {
  :root {
    --cq-hero-padding-top: 48px;
    --cq-hero-padding-bottom: 40px;
    --cq-hero-padding-x: 16px;
    --cq-hero-radius: 16px;
    --cq-hero-margin-bottom: 24px;
  }

  .cq-hero--flat {
    border-radius: 0 0 24px 24px;
    margin-bottom: 24px;
  }
}

/* ========================================
   LEGACY HERO CLASSES - UNIFIED STYLES
   (pour compatibilité avec les pages existantes)
======================================== */

/* Profile Hero */
.profile-hero,
.scores-hero,
.generator-hero,
.groups-hero,
.aide-hero,
.contact-hero,
.dashboard-hero,
.espace-enseignant .teacher-header {
  position: relative;
  padding: var(--cq-hero-padding-top) var(--cq-hero-padding-x) var(--cq-hero-padding-bottom);
  border-radius: var(--cq-hero-radius);
  overflow: hidden;
  margin-bottom: var(--cq-hero-margin-bottom);
  background: var(--cq-hero-gradient);
  box-shadow: var(--cq-hero-shadow);
  text-align: center;
  color: var(--cq-hero-text, white);
}

/* Variantes de couleur - Héros avec couleurs fixes */
.groups-hero {
  --cq-hero-gradient: var(--cq-hero-gradient-green);
  --cq-hero-shadow: var(--cq-hero-shadow-green);
}

.contact-hero {
  --cq-hero-gradient: var(--cq-hero-gradient-green);
  --cq-hero-shadow: var(--cq-hero-shadow-green);
}

.aide-hero {
  /* Aide utilise la palette choisie par défaut */
}

.espace-enseignant .teacher-header {
  --cq-hero-gradient: linear-gradient(135deg, #6366f1 0%, #4f46e5 100%);
  border-radius: 16px;
  padding: 2rem;
  margin-bottom: 2rem;
  text-align: left;
}

/* Hero Overlays unifiés */
.profile-hero-overlay,
.scores-hero-overlay,
.generator-hero-overlay,
.catalog-hero-overlay,
.home-hero-overlay {
  position: absolute;
  inset: 0;
  background: 
    radial-gradient(circle at 20% 50%, rgba(255,255,255,0.15) 0%, transparent 50%),
    radial-gradient(circle at 80% 80%, rgba(255,255,255,0.1) 0%, transparent 50%);
  pointer-events: none;
}

/* Hero Content unifiés */
.profile-hero-content,
.scores-hero-content,
.generator-hero-content,
.catalog-hero-content,
.home-hero-content {
  position: relative;
  z-index: 2;
  max-width: 800px;
  margin: 0 auto;
}

/* Hero Badges unifiés */
.profile-hero-badge,
.scores-hero-badge,
.generator-hero-badge,
.catalog-hero-badge,
.home-hero-badge,
.dashboard-hero-badge,
.groups-hero-badge {
  display: inline-block;
  font-size: 0.8125rem;
  font-weight: 600;
  padding: 0.5rem 1rem;
  background: rgba(255,255,255,0.2);
  border-radius: 999px;
  margin-bottom: 1.5rem;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255,255,255,0.3);
  color: white;
}

/* Hero Titles unifiés - même taille partout */
.profile-hero h1,
.scores-hero h1,
.generator-hero h1,
.groups-hero h1,
.aide-hero h1,
.contact-hero h1,
.catalog-hero h1,
.home-hero h1,
.home-hero-v2 h1,
.home-hero-v2 .page-h1,
.dashboard-hero h1,
.espace-enseignant .teacher-header h1,
.qcm-hub-hero__title,
.qcm-seo-hero__title {
  font-family: var(--cq-font-heading), 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif !important;
  font-size: var(--cq-h1-size) !important;
  font-weight: var(--cq-h1-weight) !important;
  line-height: var(--cq-h1-lh) !important;
  letter-spacing: var(--cq-heading-ls) !important;
  font-style: normal !important;
  text-transform: none !important;
  color: white !important;
  margin-bottom: 1rem !important;
}

/* Hero Subtitles unifiés */
.profile-hero-subtitle,
.scores-hero-subtitle,
.generator-hero-subtitle,
.catalog-hero-subtitle,
.home-hero-subtitle,
.dashboard-hero-subtitle,
.groups-hero-subtitle,
.aide-hero-subtitle,
.contact-hero-subtitle,
.qcm-hub-hero__subtitle,
.qcm-seo-hero__subtitle {
  font-size: 1.125rem !important;
  line-height: 1.6 !important;
  max-width: 650px !important;
  margin: 0 auto !important;
  color: var(--cq-hero-text-soft, rgba(255, 255, 255, 0.95)) !important;
  text-align: center !important;
}

/* ========================================
   SECTION TITLE STYLES (pages internes)
======================================== */
.profile-section-title,
.scores-section-title,
.generator-section-title,
.sidebar-title,
.cta-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--cq-text, #1e293b);
  margin-bottom: 1rem;
}

body.qcm-dark .profile-section-title,
body.qcm-dark .scores-section-title,
body.qcm-dark .generator-section-title,
body.qcm-dark .sidebar-title,
body.qcm-dark .cta-title {
  color: #e5e7eb;
}

/* ========================================
   CARD HEADERS (H3 inside cards)
======================================== */
.profile-card h3,
.scores-card h3,
.generator-card h3,
.sidebar-card h3,
.cq-card h3 {
  font-size: 1.125rem;
  font-weight: 600;
  color: var(--cq-text, #1e293b);
  margin-bottom: 0.75rem;
}

body.qcm-dark .profile-card h3,
body.qcm-dark .scores-card h3,
body.qcm-dark .generator-card h3,
body.qcm-dark .sidebar-card h3,
body.qcm-dark .cq-card h3 {
  color: #e5e7eb;
}

/* ========================================
   PAGE TITLES (page-h1 class legacy)
======================================== */
.page-h1 {
  font-size: var(--cq-h1-size) !important;
  font-weight: var(--cq-h1-weight) !important;
  line-height: var(--cq-h1-lh) !important;
  letter-spacing: var(--cq-heading-ls) !important;
}

/* ========================================
   HOME & CATALOG SPECIFIC OVERRIDES
======================================== */
.home-h1,
.catalog-h1 {
  font-size: var(--cq-h1-size) !important;
  font-weight: var(--cq-h1-weight) !important;
  line-height: var(--cq-h1-lh) !important;
  letter-spacing: var(--cq-heading-ls) !important;
  color: white !important;
  margin-bottom: 1rem !important;
}

.section-header h2 {
  font-size: var(--cq-h2-size);
  font-weight: var(--cq-h2-weight);
  line-height: var(--cq-h2-lh);
  letter-spacing: var(--cq-heading-ls);
  color: var(--cq-text, #1e293b);
  margin-bottom: 0.75rem;
}

.section-header p {
  font-size: 1.0625rem;
  color: var(--cq-text-secondary, #64748b);
  line-height: 1.65;
}

body.qcm-dark .section-header h2 {
  color: #f1f5f9;
}

body.qcm-dark .section-header p {
  color: #94a3b8;
}