/**
 * STYLES.CSS - VERSION OPTIMISÉE
 * OmegApp Pro
 * 
 * Améliorations :
 * ✅ Transitions fluides pour le mode sombre
 * ✅ Boutons modales centrés
 * ✅ Responsive optimisé
 * ✅ Tous les styles nécessaires consolidés
 */

/* ============================================
   VARIABLES CSS - PALETTE CENTRALISÉE
   ============================================ */
:root {
  /* ─── PRIMARY (Indigo/Blue - Actions principales) ─── */
  --primary-50: #eef2ff;
  --primary-100: #e0e7ff;
  --primary-200: #c7d2fe;
  --primary-300: #a5b4fc;
  --primary-400: #818cf8;
  --primary-500: #6366f1;
  --primary-600: #4f46e5;
  --primary-700: #4338ca;
  --primary-800: #3730a3;
  --primary-900: #312e81;

  /* ─── INFO (Blue - Informations) ─── */
  --info-50: #eff6ff;
  --info-100: #dbeafe;
  --info-200: #bfdbfe;
  --info-300: #93c5fd;
  --info-400: #60a5fa;
  --info-500: #3b82f6;
  --info-600: #2563eb;
  --info-700: #1d4ed8;
  --info-800: #1e40af;
  --info-900: #1e3a8a;

  /* ─── SUCCESS (Green - Confirmations) ─── */
  --success-50: #f0fdf4;
  --success-100: #dcfce7;
  --success-200: #bbf7d0;
  --success-300: #86efac;
  --success-400: #4ade80;
  --success-500: #22c55e;
  --success-600: #16a34a;
  --success-700: #15803d;
  --success-800: #166534;
  --success-900: #14532d;

  /* ─── EMERALD (Vert émeraude - Bilans, positif) ─── */
  --emerald-50: #ecfdf5;
  --emerald-100: #d1fae5;
  --emerald-200: #a7f3d0;
  --emerald-300: #6ee7b7;
  --emerald-400: #34d399;
  --emerald-500: #10b981;
  --emerald-600: #059669;
  --emerald-700: #047857;
  --emerald-800: #065f46;
  --emerald-900: #064e3b;

  /* ─── DANGER (Red - Erreurs, suppressions) ─── */
  --danger-50: #fef2f2;
  --danger-100: #fee2e2;
  --danger-200: #fecaca;
  --danger-300: #fca5a5;
  --danger-400: #f87171;
  --danger-500: #ef4444;
  --danger-600: #dc2626;
  --danger-700: #b91c1c;
  --danger-800: #991b1b;
  --danger-900: #7f1d1d;

  /* ─── WARNING (Amber - Alertes, attentions) ─── */
  --warning-50: #fffbeb;
  --warning-100: #fef3c7;
  --warning-200: #fde68a;
  --warning-300: #fcd34d;
  --warning-400: #fbbf24;
  --warning-500: #f59e0b;
  --warning-600: #d97706;
  --warning-700: #b45309;
  --warning-800: #92400e;
  --warning-900: #78350f;

  /* ─── PURPLE (Violet - Emails, actions spéciales) ─── */
  --purple-50: #faf5ff;
  --purple-100: #f3e8ff;
  --purple-200: #e9d5ff;
  --purple-300: #d8b4fe;
  --purple-400: #c084fc;
  --purple-500: #a855f7;
  --purple-600: #9333ea;
  --purple-700: #7c3aed;
  --purple-800: #6b21a8;
  --purple-900: #581c87;

  /* ─── GRAY (Textes, bordures, fonds) ─── */
  --gray-50: #f9fafb;
  --gray-100: #f3f4f6;
  --gray-200: #e5e7eb;
  --gray-300: #d1d5db;
  --gray-400: #9ca3af;
  --gray-500: #6b7280;
  --gray-600: #4b5563;
  --gray-700: #374151;
  --gray-800: #1f2937;
  --gray-900: #111827;

  /* ─── SEMANTIC SHORTCUTS ─── */
  --text-primary: var(--gray-900);
  --text-secondary: var(--gray-600);
  --text-muted: var(--gray-400);
  --border-default: var(--gray-200);
  --border-hover: var(--gray-300);
  --bg-page: var(--info-50);
  --bg-card: #ffffff;
  --bg-hover: var(--gray-50);

  /* ─── TRANSITIONS ─── */
  --transition-speed: 0.3s;
  --transition-fast: 0.15s;

  /* ─── SHADOWS ─── */
  --shadow-sm: 0 1px 2px rgba(0,0,0,0.05);
  --shadow-md: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
  --shadow-lg: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
  --shadow-xl: 0 20px 25px -5px rgba(0,0,0,0.1), 0 10px 10px -5px rgba(0,0,0,0.04);

  /* ─── BORDER RADIUS ─── */
  --radius-sm: 6px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;

  /* ─── Z-INDEX SCALE ─── */
  --z-base: 1;
  --z-dropdown: 100;
  --z-sticky: 200;
  --z-fixed: 500;
  --z-modal-backdrop: 900;
  --z-modal: 1000;
  --z-popover: 2000;
  --z-tooltip: 3000;
  --z-notification: 9999;
  --z-top: 99999;

  /* ─── TYPOGRAPHY SCALE ─── */
  --font-xs:   10px;   /* Petites étiquettes, badges */
  --font-sm:   12px;   /* Inputs, texte secondaire */
  --font-base: 14px;   /* Corps de texte, défaut */
  --font-lg:   16px;   /* Boutons, navigation */
  --font-xl:   18px;   /* Titres de cartes */
  --font-2xl:  22px;   /* Titres de sections */
  --font-3xl:  28px;   /* Titres majeurs */
  --font-4xl:  40px;   /* Titres de pages */

  /* ─── FONT WEIGHT SCALE ─── */
  --fw-normal:    400;
  --fw-medium:    500;
  --fw-semibold:  600;
  --fw-bold:      700;
  --fw-extrabold: 800;

  /* ─── LEGACY (compatibilité) ─── */
  --blue: var(--info-500);
  --blue-600: var(--info-600);
  --blue-700: var(--info-700);

  /* ═══════════════════════════════════════════════
     GLASSMORPHISM - Interface Élève Moderne
     ═══════════════════════════════════════════════ */

  /* Palette Bleu/Violet Glassmorphism */
  --glass-primary: rgba(99, 102, 241, 0.8);
  --glass-secondary: rgba(139, 92, 246, 0.8);
  --glass-accent: rgba(236, 72, 153, 0.8);

  /* Effets Glass */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-bg-light: rgba(255, 255, 255, 0.25);
  --glass-bg-dark: rgba(15, 23, 42, 0.3);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-light: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(20px);
  --glass-blur-light: blur(10px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-shadow-lg: 0 25px 50px -12px rgba(0, 0, 0, 0.25);

  /* Gradients Glassmorphism */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-bg-eleve: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --gradient-header: linear-gradient(135deg, var(--primary-500) 0%, var(--purple-600) 100%);

  /* Gamification */
  --xp-gold: #fbbf24;
  --xp-gradient: linear-gradient(90deg, #fbbf24 0%, #f59e0b 100%);
  --streak-fire: #ef4444;
  --badge-shine: linear-gradient(45deg, transparent 30%, rgba(255,255,255,0.5) 50%, transparent 70%);
}

/* ============================================
   CLASSES UTILITAIRES - COULEURS
   ============================================ */

/* Backgrounds */
.bg-primary { background-color: var(--primary-600) !important; }
.bg-primary-light { background-color: var(--primary-50) !important; }
.bg-success { background-color: var(--success-500) !important; }
.bg-success-light { background-color: var(--success-50) !important; }
.bg-danger { background-color: var(--danger-500) !important; }
.bg-danger-light { background-color: var(--danger-50) !important; }
.bg-warning { background-color: var(--warning-500) !important; }
.bg-warning-light { background-color: var(--warning-50) !important; }
.bg-purple { background-color: var(--purple-600) !important; }
.bg-purple-light { background-color: var(--purple-50) !important; }
.bg-emerald { background-color: var(--emerald-500) !important; }
.bg-emerald-light { background-color: var(--emerald-50) !important; }

/* Text colors */
.text-primary { color: var(--primary-600) !important; }
.text-success { color: var(--success-600) !important; }
.text-danger { color: var(--danger-600) !important; }
.text-warning { color: var(--warning-600) !important; }
.text-purple { color: var(--purple-600) !important; }
.text-emerald { color: var(--emerald-600) !important; }
.text-muted { color: var(--gray-500) !important; }

/* Border colors */
.border-primary { border-color: var(--primary-300) !important; }
.border-success { border-color: var(--success-300) !important; }
.border-danger { border-color: var(--danger-300) !important; }
.border-warning { border-color: var(--warning-300) !important; }
.border-purple { border-color: var(--purple-300) !important; }

/* ============================================
   CLASSES UTILITAIRES - BOUTONS
   ============================================ */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 10px 18px;
  font-size: var(--font-base);
  font-weight: 600;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all var(--transition-fast);
  border: none;
}

.btn-primary {
  background: var(--primary-600);
  color: white;
}
.btn-primary:hover { background: var(--primary-700); }

.btn-success {
  background: var(--success-500);
  color: white;
}
.btn-success:hover { background: var(--success-600); }

.btn-danger {
  background: var(--danger-500);
  color: white;
}
.btn-danger:hover { background: var(--danger-600); }

.btn-warning {
  background: var(--warning-500);
  color: white;
}
.btn-warning:hover { background: var(--warning-600); }

.btn-purple {
  background: var(--purple-600);
  color: white;
}
.btn-purple:hover { background: var(--purple-700); }

.btn-secondary {
  background: var(--gray-100);
  color: var(--gray-700);
  border: 1px solid var(--gray-300);
}
.btn-secondary:hover { background: var(--gray-200); }

.btn-ghost {
  background: transparent;
  color: var(--gray-600);
}
.btn-ghost:hover { background: var(--gray-100); }

/* Tailles de boutons */
.btn-sm { padding: 6px 12px; font-size: var(--font-sm); border-radius: var(--radius-sm); }
.btn-lg { padding: 12px 24px; font-size: var(--font-lg); border-radius: var(--radius-lg); }

/* ============================================
   CLASSES UTILITAIRES - TOGGLES & TABS
   ============================================ */

/* --- Tabs avec bordure inférieure --- */
.tab-active {
  border-bottom-color: var(--primary-600) !important;
  color: var(--primary-600) !important;
}
.tab-inactive {
  border-bottom-color: transparent !important;
  color: var(--gray-500) !important;
}
.tab-inactive:hover {
  color: var(--gray-700) !important;
}

/* --- Boutons toggle (style bouton) --- */
.toggle-active-primary {
  background: var(--primary-600) !important;
  color: white !important;
  border-color: var(--primary-600) !important;
}
.toggle-active-purple {
  background: var(--purple-600) !important;
  color: white !important;
  border-color: var(--purple-600) !important;
}
.toggle-active-emerald {
  background: var(--emerald-500) !important;
  color: white !important;
  border-color: var(--emerald-500) !important;
}
.toggle-active-success {
  background: var(--success-600) !important;
  color: white !important;
  border-color: var(--success-600) !important;
}
.toggle-active-info {
  background: var(--info-500) !important;
  color: white !important;
  border-color: var(--info-500) !important;
}
.toggle-active-warning {
  background: var(--warning-600) !important;
  color: white !important;
  border-color: var(--warning-600) !important;
}
.toggle-inactive {
  background: white !important;
  color: var(--gray-700) !important;
  border-color: var(--gray-300) !important;
}
.toggle-inactive:hover {
  background: var(--gray-50) !important;
  border-color: var(--gray-400) !important;
}

/* --- Filtres toggle (style pill/tag) --- */
.filter-active {
  background: var(--primary-100) !important;
  color: var(--primary-700) !important;
  border-color: var(--primary-300) !important;
}
.filter-inactive {
  background: var(--gray-100) !important;
  color: var(--gray-600) !important;
  border-color: var(--gray-200) !important;
}
.filter-inactive:hover {
  background: var(--gray-200) !important;
}

/* ============================================
   GLASSMORPHISM - Classes Utilitaires
   ============================================ */

/* --- Cartes Glass --- */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: var(--glass-bg-light);
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-lg);
}

.glass-card-solid {
  background: rgba(255, 255, 255, 0.9);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}

/* --- Boutons Glass --- */
.glass-button {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 10px 20px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-button:hover {
  background: var(--glass-bg-light);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3);
}

.glass-button-primary {
  background: var(--gradient-primary);
  border: none;
}

.glass-button-primary:hover {
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.4);
}

/* --- Inputs Glass --- */
.glass-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: white;
  font-size: var(--font-base);
  transition: all 0.3s ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
}

/* --- Badge Glass --- */
.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: var(--glass-bg);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: white;
}

.glass-badge-success {
  background: rgba(34, 197, 94, 0.3);
  border-color: rgba(34, 197, 94, 0.5);
}

.glass-badge-warning {
  background: rgba(251, 191, 36, 0.3);
  border-color: rgba(251, 191, 36, 0.5);
}

.glass-badge-danger {
  background: rgba(239, 68, 68, 0.3);
  border-color: rgba(239, 68, 68, 0.5);
}

/* ============================================
   GLASSMORPHISM - Animations
   ============================================ */

@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes fadeInScale {
  from {
    opacity: 0;
    transform: scale(0.95);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
  }
}

@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

@keyframes streakFire {
  0%, 100% {
    transform: scale(1);
    filter: brightness(1);
  }
  50% {
    transform: scale(1.1);
    filter: brightness(1.2);
  }
}

@keyframes badgeUnlock {
  0% {
    transform: scale(0) rotate(-180deg);
    opacity: 0;
  }
  50% {
    transform: scale(1.2) rotate(10deg);
  }
  100% {
    transform: scale(1) rotate(0);
    opacity: 1;
  }
}

@keyframes xpGain {
  0% {
    transform: translateY(0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translateY(-30px) scale(0.8);
    opacity: 0;
  }
}

/* Classes d'animation */
.animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

.animate-fadeInScale {
  animation: fadeInScale 0.3s ease forwards;
}

.animate-glow {
  animation: pulseGlow 2s infinite;
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

.animate-shimmer {
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.4), transparent);
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

.animate-streak {
  animation: streakFire 1s ease-in-out infinite;
}

.animate-badge-unlock {
  animation: badgeUnlock 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55) forwards;
}

/* Délais d'animation */
.delay-100 { animation-delay: 0.1s; }
.delay-200 { animation-delay: 0.2s; }
.delay-300 { animation-delay: 0.3s; }
.delay-400 { animation-delay: 0.4s; }
.delay-500 { animation-delay: 0.5s; }

/* ============================================
   ELEVE APP - Background & Layout
   ============================================ */

/* Fond dégradé animé pour l'interface élève */
.eleve-app-bg {
  background: var(--gradient-bg-eleve);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Header élève glassmorphism */
.eleve-header {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border-bottom: 1px solid var(--glass-border);
  padding: 20px 24px;
}

/* Avatar élève */
.eleve-avatar {
  width: 80px;
  height: 80px;
  background: var(--gradient-primary);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  border: 3px solid var(--glass-border-light);
  box-shadow: 0 8px 32px rgba(99, 102, 241, 0.3);
  animation: float 3s ease-in-out infinite;
  cursor: pointer;
  transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.eleve-avatar:hover {
  transform: scale(1.05);
  box-shadow: 0 12px 40px rgba(99, 102, 241, 0.5);
}

/* XP Bar */
.xp-bar-container {
  background: rgba(0, 0, 0, 0.3);
  border-radius: 10px;
  height: 12px;
  overflow: hidden;
  position: relative;
}

.xp-bar-fill {
  background: var(--xp-gradient);
  height: 100%;
  border-radius: 10px;
  transition: width 0.5s ease;
  position: relative;
}

.xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(90deg, transparent, rgba(255,255,255,0.3), transparent);
  animation: shimmer 2s infinite;
}

/* Streak indicator */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, #ef4444 0%, #f97316 100%);
  border-radius: 20px;
  font-weight: 700;
  color: white;
  font-size: var(--font-base);
  box-shadow: 0 4px 15px rgba(239, 68, 68, 0.4);
}

.streak-badge.active {
  animation: streakFire 1s ease-in-out infinite;
}

/* Widget élève */
.eleve-widget {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  padding: 20px;
  transition: all 0.3s ease;
}

.eleve-widget:hover {
  background: var(--glass-bg-light);
  transform: translateY(-4px);
  box-shadow: 0 20px 40px rgba(0, 0, 0, 0.2);
}

.eleve-widget-header {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  color: white;
  font-weight: 600;
  font-size: var(--font-lg);
}

.eleve-widget-icon {
  width: 36px;
  height: 36px;
  background: var(--gradient-primary);
  border-radius: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
}

/* Badges gamification */
.badge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 12px;
  background: rgba(255, 255, 255, 0.05);
  border-radius: 16px;
  transition: all 0.3s ease;
}

.badge-item:hover {
  background: rgba(255, 255, 255, 0.1);
  transform: scale(1.05);
}

.badge-icon {
  font-size: 32px;
  filter: drop-shadow(0 4px 8px rgba(0, 0, 0, 0.3));
}

.badge-item.locked .badge-icon {
  filter: grayscale(1) opacity(0.5);
}

.badge-item.unlocked .badge-icon {
  animation: float 2s ease-in-out infinite;
}

.badge-name {
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.8);
  text-align: center;
  font-weight: 500;
}

/* Progress ring */
.progress-ring {
  transform: rotate(-90deg);
}

.progress-ring-circle {
  transition: stroke-dashoffset 0.5s ease;
}

/* ============================================
   CLASSES UTILITAIRES - CARDS
   ============================================ */
.card {
  background: var(--bg-card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-default);
}

.card-header {
  padding: 16px 20px;
  border-bottom: 1px solid var(--border-default);
}

.card-body {
  padding: 20px;
}

/* ============================================
   CLASSES UTILITAIRES - BADGES
   ============================================ */
.badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-size: var(--font-sm);
  font-weight: 500;
  border-radius: var(--radius-full);
}

.badge-primary { background: var(--primary-100); color: var(--primary-700); }
.badge-success { background: var(--success-100); color: var(--success-700); }
.badge-danger { background: var(--danger-100); color: var(--danger-700); }
.badge-warning { background: var(--warning-100); color: var(--warning-700); }
.badge-purple { background: var(--purple-100); color: var(--purple-700); }
.badge-gray { background: var(--gray-100); color: var(--gray-700); }

/* ============================================
   CLASSES UTILITAIRES - LAYOUT & SPACING
   (Non purgées par Tailwind - safe pour les templates JS)
   ============================================ */
.flex-center       { display: flex; align-items: center; justify-content: center; }
.flex-between      { display: flex; align-items: center; justify-content: space-between; }
.flex-col          { display: flex; flex-direction: column; }
.flex-gap-6        { display: flex; align-items: center; gap: 6px; }
.flex-gap-8        { display: flex; align-items: center; gap: 8px; }
.flex-gap-10       { display: flex; align-items: center; gap: 10px; }
.flex-gap-12       { display: flex; align-items: center; gap: 12px; }
.flex-gap-16       { display: flex; align-items: center; gap: 16px; }
.flex-wrap-gap-8   { display: flex; flex-wrap: wrap; gap: 8px; }
.flex-wrap-gap-12  { display: flex; flex-wrap: wrap; gap: 12px; }
.p-12              { padding: 12px; }
.p-16              { padding: 16px; }
.p-20              { padding: 20px; }
.p-24              { padding: 24px; }
.px-16             { padding-left: 16px; padding-right: 16px; }
.py-12             { padding-top: 12px; padding-bottom: 12px; }
.mb-8              { margin-bottom: 8px; }
.mb-12             { margin-bottom: 12px; }
.mb-16             { margin-bottom: 16px; }
.mb-20             { margin-bottom: 20px; }
.mb-24             { margin-bottom: 24px; }
.mt-16             { margin-top: 16px; }
.gap-8             { gap: 8px; }
.gap-12            { gap: 12px; }
.gap-16            { gap: 16px; }
.text-center       { text-align: center; }
.text-right        { text-align: right; }
.font-bold         { font-weight: 700; }
.font-semi         { font-weight: 600; }
.text-sm           { font-size: var(--font-base); }
.text-xs           { font-size: var(--font-sm); }
.rounded-8         { border-radius: 8px; }
.rounded-12        { border-radius: 12px; }
.rounded-16        { border-radius: 16px; }
.rounded-full      { border-radius: 9999px; }
.w-full            { width: 100%; }
.max-h-90vh        { max-height: 90vh; }
.overflow-y-auto   { overflow-y: auto; }
.relative          { position: relative; }
.cursor-pointer    { cursor: pointer; }
.truncate          { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-badge        { width: 32px; height: 32px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: white; font-size: var(--font-lg); flex-shrink: 0; }
.icon-badge-info   { background: var(--info-500); }
.icon-badge-success { background: var(--success-500); }
.icon-badge-warning { background: var(--warning-500); }
.icon-badge-danger { background: var(--danger-500); }
.icon-badge-purple { background: var(--purple-500); }
.success-box       { background: linear-gradient(135deg, #dcfce7, #bbf7d0); padding: 14px 18px; border-radius: 8px; font-weight: bold; color: #166534; }
.info-box          { background: linear-gradient(135deg, #dbeafe, #bfdbfe); padding: 14px 18px; border-radius: 8px; color: #1e40af; }
.warning-box       { background: linear-gradient(135deg, #fef3c7, #fde68a); padding: 14px 18px; border-radius: 8px; color: #92400e; }
.danger-box        { background: linear-gradient(135deg, #fee2e2, #fecaca); padding: 14px 18px; border-radius: 8px; color: #991b1b; }

body.dark-mode .success-box { background: linear-gradient(135deg, #064e3b, #065f46); color: #6ee7b7; }
body.dark-mode .info-box    { background: linear-gradient(135deg, #1e3a5f, #1e40af); color: #93c5fd; }
body.dark-mode .warning-box { background: linear-gradient(135deg, #78350f, #92400e); color: #fcd34d; }
body.dark-mode .danger-box  { background: linear-gradient(135deg, #7f1d1d, #991b1b); color: #fca5a5; }

/* ============================================
   TRANSITIONS GLOBALES (Mode sombre fluide)
   ============================================ */
* {
  transition: background-color var(--transition-speed) ease,
              color var(--transition-speed) ease,
              border-color var(--transition-speed) ease;
}

/* ============================================
   TABLEAUX DE SIGNES MATHJAX - Pas de scrollbars
   ============================================ */
svg foreignObject {
  overflow: hidden !important;
}
svg foreignObject > div {
  overflow: hidden !important;
  background: transparent !important;
  background-color: transparent !important;
}

/* Désactiver transitions pendant le changement de thème */
body.theme-transitioning * {
  transition: none !important;
}

/* ============================================
   THEME SWITCHER (Clair / Auto / Sombre)
   ============================================ */
.theme-switcher {
  position: relative;
  display: flex;
  background: #e2e8f0;
  border-radius: 10px;
  padding: 3px;
  margin-bottom: 4px;
  overflow: hidden;
}
.theme-opt {
  flex: 1;
  padding: 6px 0;
  font-size: var(--font-base);
  background: none;
  border: none;
  cursor: pointer;
  z-index: var(--z-base);
  position: relative;
  border-radius: 8px;
  transition: color 0.25s;
  color: #64748b;
  line-height: 1;
}
.theme-opt.active { color: #1e293b; }
.theme-slider {
  position: absolute;
  top: 3px; left: 3px;
  width: calc(33.333% - 2px);
  height: calc(100% - 6px);
  background: white;
  border-radius: 8px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 0;
}
.theme-auto-label {
  text-align: center;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.02em;
}

/* Dark mode overrides */
body.dark-mode .theme-switcher { background: #334155; }
body.dark-mode .theme-opt { color: #94a3b8; }
body.dark-mode .theme-opt.active { color: #f1f5f9; }
body.dark-mode .theme-slider { background: #475569; box-shadow: 0 1px 4px rgba(0,0,0,0.3); }
body.dark-mode .theme-auto-label { color: #64748b; }

/* ============================================
   PARENT MODAL PREMIUM
   ============================================ */

/* Header gradient */
.parent-modal-header {
  position: relative;
  padding: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
  overflow: hidden;
}
.parent-modal-header::before {
  content: '';
  position: absolute;
  top: -50%; right: -20%;
  width: 300px; height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}
.parent-modal-header::after {
  content: '';
  position: absolute;
  bottom: -40%; left: -10%;
  width: 200px; height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.06) 0%, transparent 70%);
  border-radius: 50%;
}

.parent-header-top {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 18px 24px 10px 24px;
  position: relative;
  z-index: var(--z-base);
}
.parent-modal-header-avatar {
  width: 48px; height: 48px;
  border-radius: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-xl);
  color: white;
  box-shadow: 0 2px 8px rgba(0,0,0,0.15);
  flex-shrink: 0;
}
.parent-modal-header-info {
  flex: 1;
  min-width: 0;
}
.parent-modal-header-name {
  font-size: var(--font-xl);
  font-weight: 700;
  color: white;
  line-height: 1.2;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}
.parent-modal-header-sub {
  font-size: var(--font-sm);
  color: rgba(255,255,255,0.75);
  margin-top: 2px;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.parent-modal-close {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 32px; height: 32px;
  border-radius: 8px;
  font-size: var(--font-lg);
  cursor: pointer;
  transition: background 0.2s;
  flex-shrink: 0;
}
.parent-modal-close:hover { background: rgba(255,255,255,0.25); }

/* Header status badges */
.parent-header-status {
  font-size: var(--font-sm);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: 10px;
  white-space: nowrap;
}
.parent-header-status.active { background: rgba(34,197,94,0.25); color: #bbf7d0; }
.parent-header-status.pending { background: rgba(234,179,8,0.25); color: #fef08a; }
.parent-header-status.refused { background: rgba(239,68,68,0.25); color: #fca5a5; }
.parent-header-status.none { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.7); }

/* Stats bar */
.parent-header-stats {
  display: flex;
  gap: 0;
  padding: 12px 24px 14px 24px;
  position: relative;
  z-index: var(--z-base);
}
.parent-header-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  margin-right: 8px;
}
.parent-header-stat:last-child { margin-right: 0; }
.parent-header-stat-val {
  font-size: var(--font-lg);
  font-weight: 700;
  color: white;
}
.parent-header-stat-lbl {
  font-size: 9px;
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.parent-header-completude {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
}
.parent-header-completude-val {
  position: absolute;
  font-size: var(--font-xs);
  font-weight: 700;
  color: white;
}

/* Tab bar (pills) */
.parent-tab-bar {
  display: flex;
  gap: 6px;
  padding: 14px 24px 0 24px;
  flex-wrap: wrap;
}
.parent-tab-btn {
  padding: 7px 14px;
  border-radius: 8px;
  border: none;
  font-size: var(--font-sm);
  font-weight: 600;
  cursor: pointer;
  background: transparent;
  color: #64748b;
  transition: all 0.2s;
}
.parent-tab-btn:hover { background: #e2e8f0; color: #334155; }
.parent-tab-btn.active {
  color: white;
  background: #7c3aed;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
}

/* Sections */
.parent-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #7c3aed;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
}
.parent-section:nth-child(2) { border-left-color: #f59e0b; }
.parent-section:nth-child(3) { border-left-color: #10b981; }
.parent-section-title {
  font-size: var(--font-base);
  font-weight: 700;
  color: #374151;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f3f4f6;
}

/* Field label with URSSAF badge */
.parent-field-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 4px;
}
.parent-urssaf-badge {
  font-size: 8px;
  font-weight: 700;
  color: #3b82f6;
  background: #dbeafe;
  padding: 1px 5px;
  border-radius: 4px;
  letter-spacing: 0.05em;
}

/* Footer */
.parent-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid #e5e7eb;
  background: #f8fafc;
  flex-shrink: 0;
}
.parent-footer-btn {
  padding: 8px 16px;
  border-radius: 8px;
  font-size: var(--font-base);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
}
.parent-footer-btn-danger {
  background: #fef2f2;
  color: #dc2626;
}
.parent-footer-btn-danger:hover { background: #fee2e2; }
.parent-footer-btn-more {
  background: #f3f4f6;
  color: #6b7280;
  font-size: var(--font-lg);
  padding: 8px 12px;
  letter-spacing: 2px;
}
.parent-footer-btn-more:hover { background: #e5e7eb; }
.parent-footer-btn-cancel {
  background: transparent;
  color: #6b7280;
}
.parent-footer-btn-cancel:hover { background: #f3f4f6; }
.parent-footer-btn-save {
  background: linear-gradient(135deg, #7c3aed, #a855f7);
  color: white;
  box-shadow: 0 2px 8px rgba(124,58,237,0.3);
  padding: 8px 24px;
}
.parent-footer-btn-save:hover { box-shadow: 0 4px 12px rgba(124,58,237,0.4); transform: translateY(-1px); }
.parent-footer-btn-save:active { transform: scale(0.97); }

/* More actions menu */
.parent-more-actions-wrapper {
  position: relative;
  display: inline-block;
}
.parent-more-actions-menu {
  display: none;
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.12);
  min-width: 200px;
  z-index: var(--z-dropdown);
  overflow: hidden;
}
.parent-more-actions-menu.show { display: block; }
.parent-more-action-item {
  display: block;
  width: 100%;
  padding: 10px 16px;
  border: none;
  background: none;
  text-align: left;
  font-size: var(--font-base);
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
}
.parent-more-action-item:hover { background: #f3f4f6; }

/* ============================================
   PARENT MODAL - DARK MODE
   ============================================ */
body.dark-mode .parent-modal-header {
  background: linear-gradient(135deg, #5b21b6 0%, #7c3aed 50%, #6d28d9 100%);
}
body.dark-mode .parent-tab-btn { color: #94a3b8; }
body.dark-mode .parent-tab-btn:hover { background: #334155; color: #e2e8f0; }
body.dark-mode .parent-tab-btn.active { background: #7c3aed; color: white; }
body.dark-mode .parent-section {
  background: #1e293b;
  border-color: #334155;
}
body.dark-mode .parent-section:nth-child(2) { border-left-color: #d97706; }
body.dark-mode .parent-section:nth-child(3) { border-left-color: #059669; }
body.dark-mode .parent-section-title {
  color: #e2e8f0;
  border-bottom-color: #334155;
}
body.dark-mode .parent-field-label { color: #94a3b8; }
body.dark-mode .parent-urssaf-badge { background: #1e3a5f; color: #60a5fa; }
body.dark-mode .parent-modal-footer {
  background: #0f172a;
  border-top-color: #334155;
}
body.dark-mode .parent-footer-btn-danger { background: #450a0a; color: #f87171; }
body.dark-mode .parent-footer-btn-more { background: #334155; color: #94a3b8; }
body.dark-mode .parent-footer-btn-cancel { color: #94a3b8; }
body.dark-mode .parent-footer-btn-cancel:hover { background: #334155; }
body.dark-mode .parent-more-actions-menu {
  background: #1e293b;
  border-color: #334155;
}
body.dark-mode .parent-more-action-item { color: #e2e8f0; }
body.dark-mode .parent-more-action-item:hover { background: #334155; }

/* ============================================
   CARTES PARENTS V2 — Design moderne
   ============================================ */
.parent-card-v2 {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.parent-card-v2:hover {
  border-color: #c4b5fd;
  box-shadow: 0 4px 20px rgba(124,58,237,0.10);
  transform: translateY(-2px);
}
.parent-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.parent-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-lg);
  color: white;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.parent-card-identity {
  flex: 1;
  min-width: 0;
}
.parent-card-name {
  font-weight: 700;
  font-size: var(--font-lg);
  color: #1e1b4b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parent-card-sub {
  font-size: var(--font-sm);
  color: #7c3aed;
  font-weight: 500;
  margin-top: 1px;
}
.parent-status-badge {
  font-size: var(--font-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.parent-status-active { background: #d1fae5; color: #065f46; }
.parent-status-pending { background: #fef3c7; color: #92400e; }
.parent-status-refused { background: #fee2e2; color: #991b1b; }
.parent-status-none { background: #f3f4f6; color: #9ca3af; }

.parent-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  min-height: 24px;
}
.parent-card-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.parent-card-detail-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #f5f3ff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #7c3aed;
  flex-shrink: 0;
}
.parent-card-enfants {
  display: flex;
  flex-wrap: wrap;
  gap: 5px;
  margin-bottom: 0;
  padding-bottom: 0;
}
.parent-card-enfants + .parent-card-footer { margin-top: 14px; }
.parent-card-enfant-badge {
  font-size: var(--font-sm);
  font-weight: 500;
  padding: 3px 10px;
  border-radius: 6px;
  background: #f5f3ff;
  color: #5b21b6;
}
.parent-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.parent-card-completude {
  font-size: var(--font-sm);
  font-weight: 700;
  padding: 3px 10px;
  border-radius: 6px;
}
.parent-card-manquant {
  font-size: var(--font-sm);
  color: #dc2626;
}
.parent-card-complet {
  font-size: var(--font-sm);
  color: #16a34a;
  font-weight: 600;
}

/* Dark mode — Cards Parents */
body.dark-mode .parent-card-v2 { background: #1f2937; border-color: #374151; }
body.dark-mode .parent-card-v2:hover { border-color: #7c3aed; box-shadow: 0 4px 20px rgba(124,58,237,0.15); }
body.dark-mode .parent-card-name { color: #f3f4f6; }
body.dark-mode .parent-card-sub { color: #a78bfa; }
body.dark-mode .parent-card-detail { color: #9ca3af; }
body.dark-mode .parent-card-detail-icon { background: #2d2054; color: #a78bfa; }
body.dark-mode .parent-card-enfants { border-bottom-color: #374151; }
body.dark-mode .parent-card-enfant-badge { background: #2d2054; color: #c4b5fd; }
body.dark-mode .parent-card-footer { border-top-color: #374151; }
body.dark-mode .parent-status-active { background: #064e3b; color: #6ee7b7; }
body.dark-mode .parent-status-pending { background: #451a03; color: #fbbf24; }
body.dark-mode .parent-status-refused { background: #450a0a; color: #f87171; }
body.dark-mode .parent-status-none { background: #374151; color: #6b7280; }

/* ============================================
   BASE
   ============================================ */
body {
  background: #eff6ff;
  font-family: system-ui, -apple-system, sans-serif;
  margin: 0;
  padding: 0;
}

/* ============================================
   BLOCS DE CODE / ALGORITHMES
   ============================================ */
pre,
.algo-block {
  white-space: pre-wrap !important;
  word-wrap: break-word;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace;
  background: #f1f5f9;
  padding: 12px 16px;
  border-radius: 8px;
  margin: 12px 0;
  font-size: var(--font-base);
  line-height: 1.5;
  overflow-x: auto;
  border-left: 4px solid #3b82f6;
}

pre code,
.algo-block code {
  background: none;
  padding: 0;
}

.app { 
  min-height: 100vh; 
  display: flex; 
}

/* ============================================
   SIDEBAR
   ============================================ */
aside {
  width: 300px;
  min-width: 300px;
  flex-shrink: 0;
  background: #fff;
  box-shadow: 0 10px 30px rgba(0,0,0,.06);
  padding: 24px;
  border-right: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

.brand {
  font-size: var(--font-2xl);
  font-weight: 900;
  color: #1d4ed8;
  margin-bottom: 20px;
  flex-shrink: 0;
}

.nav {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  margin-right: -8px;
  padding-right: 8px;
  min-height: 0; /* Important pour le scroll dans flexbox */
}

/* Scrollbar discrète pour la nav */
.nav::-webkit-scrollbar {
  width: 4px;
}
.nav::-webkit-scrollbar-track {
  background: transparent;
}
.nav::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 4px;
}
.nav::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

.nav button { 
  display: block; 
  width: 100%; 
  text-align: left; 
  padding: 10px 12px; 
  border-radius: 10px; 
  border: none; 
  background: transparent; 
  cursor: pointer; 
}

.nav button.active { 
  background: #dbeafe; 
  color: #1d4ed8; 
  font-weight: 700; 
}

.nav button:hover {
  background: #f3f4f6;
}

/* En-têtes de section de la sidebar (Vague 3 — sidebar par profil) */
.nav-section-title {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  padding: 14px 12px 4px;
  user-select: none;
}
.nav-section-title:first-child { padding-top: 4px; }
body.dark-mode .nav-section-title { color: #64748b; }
body.eleve-mode .nav-section-title { display: none; }

/* ============================================
   MAIN CONTENT
   ============================================ */
main { 
  flex: 1; 
}

/* ============================================
   HEADER
   ============================================ */
.header { 
  display: grid; 
  grid-template-columns: auto 1fr auto; 
  align-items: center; 
  padding: 24px; 
  gap: 16px; 
  row-gap: 12px; 
}

.header .h1 { 
  grid-column: 1; 
  grid-row: 1; 
  font-size: var(--font-3xl); 
  font-weight: 900; 
  color: #1d4ed8; 
}

.header #toolbar { 
  grid-column: 2; 
  grid-row: 1; 
  display: flex; 
  gap: 8px; 
  align-items: center; 
  flex-wrap: wrap; 
}

.header > div:last-child { 
  grid-column: 3; 
  grid-row: 1; 
  white-space: nowrap; 
}

/* ============================================
   UI COMPONENTS
   ============================================ */
.card { 
  background: #fff; 
  border-radius: 16px; 
  box-shadow: 0 10px 30px rgba(0,0,0,.06); 
  border: 1px solid #e5e7eb; 
}

.grid { 
  display: grid; 
  gap: 16px; 
  padding: 0 24px; 
}

.stats { 
  grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); 
  padding: 24px; 
}

.stat { 
  padding: 18px; 
}

/* ============================================
   BOUTONS
   ============================================ */
.btn { 
  padding: 8px 12px; 
  border-radius: 10px; 
  border: 1px solid var(--blue); 
  background: #fff; 
  color: #1d4ed8; 
  font-weight: 700; 
  cursor: pointer; 
  height: 36px; 
  display: inline-flex; 
  align-items: center; 
  justify-content: center; 
  white-space: nowrap;
  transition: all 0.2s ease;
}

.btn.primary { 
  background: var(--blue); 
  color: #fff; 
  border-color: var(--blue); 
}

.btn.light { 
  background: #f3f4f6; 
  color: #111827; 
  border-color: #e5e7eb; 
}

.btn.danger { 
  background: #ef4444; 
  border-color: #ef4444; 
  color: #fff; 
}

.btn.success { 
  background: #10b981; 
  border-color: #10b981; 
  color: #fff; 
}

.btn:hover:not(:disabled) {
  transform: translateY(-1px);
  box-shadow: 0 4px 8px rgba(0,0,0,0.1);
}

.btn:active:not(:disabled) {
  transform: translateY(0);
}

.btn.primary:hover:not(:disabled) {
  background: #2563eb;
}

.btn.danger:hover:not(:disabled) {
  background: #dc2626;
}

/* ============================================
   FULLCALENDAR EVENTS (V6) - CORRIGÉ
   ============================================ */
/* Style global de la carte événement */
.fc-event { 
  border: none !important; 
  box-shadow: 0 1px 3px rgba(0,0,0,0.1) !important; 
  border-radius: 4px !important; 
  cursor: pointer !important; /* Force le curseur main */
  margin-bottom: 2px !important;
  font-family: ui-sans-serif, system-ui, sans-serif !important;
  text-decoration: none !important; /* Enlève soulignement éventuel */
}

.fc-event:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 6px rgba(0,0,0,0.1) !important;
  z-index: var(--z-base) !important;
}

/* --- COULEURS DE FOND --- */

/* 1. COURS (Par défaut) */
.fc-event.cours { 
  background-color: #ffffff !important; 
  border-left: 4px solid #3b82f6 !important; /* Barre Bleue */
}

/* Variante : Voiture */
.fc-event.cours.voiture { 
  background-color: #fef2f2 !important; /* Rouge très pâle pour lisibilité */
  border-left-color: #ef4444 !important; /* Barre Rouge */
}

/* Variante : Vélo */
.fc-event.cours.velo { 
  background-color: #eff6ff !important; /* Bleu très pâle */
  border-left-color: #3b82f6 !important; /* Barre Bleue */
}

/* 2. ÉVÉNEMENTS PERSO */
.fc-event.event {
  background-color: #f3f4f6 !important; /* Gris pâle */
  border-left: 4px solid #6b7280 !important;
}

.fc-event.event-rdv-medical { 
  background-color: #fffbeb !important; /* Jaune pâle */
  border-left-color: #f59e0b !important; 
} 

.fc-event.event-absence { 
  background-color: #f3f4f6 !important; 
  border-left-color: #9ca3af !important; 
  opacity: 0.7;
}

/* Force override FullCalendar text color defaults */
.fc-v-event .fc-event-main {
  color: #1f2937 !important;
}

/* --- 3. CONTENU INTERNE (Généré par planning-view.js) --- */
.fc-content-custom {
  padding: 4px 6px;
  display: flex;
  flex-direction: column;
  height: 100%;
  justify-content: flex-start;
}

.fc-time {
  font-size: 0.75rem; /* 12px */
  font-weight: 700;
  margin-bottom: 2px;
  opacity: 0.8;
}

.fc-title {
  font-size: 0.85rem; /* 13-14px */
  font-weight: 600;
  line-height: 1.2;
}

.fc-desc {
  font-size: 0.7rem; /* 11px */
  margin-top: 2px;
  opacity: 0.7;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* --- 4. DARK MODE FULLCALENDAR (complet) --- */
body.dark-mode .fc-event.cours { background: #1f2937 !important; color: #e5e7eb !important; }
body.dark-mode .fc-event.cours.voiture { background: #2d1b1b !important; }
body.dark-mode .fc-event.cours.velo { background: #1e293b !important; }
body.dark-mode .fc-event.event { background: #374151 !important; }
body.dark-mode .fc-content-custom { color: #e5e7eb !important; }
body.dark-mode .fc-time { color: #f3f4f6 !important; }
body.dark-mode .fc-title { color: #e5e7eb !important; }
body.dark-mode .fc-desc { color: #9ca3af !important; }
/* Grille et header */
body.dark-mode .fc { background: #111827; }
body.dark-mode .fc-scrollgrid { border-color: #374151 !important; }
body.dark-mode .fc-scrollgrid td, body.dark-mode .fc-scrollgrid th { border-color: #1f2937 !important; }
body.dark-mode .fc-col-header-cell { background: #1f2937 !important; }
body.dark-mode .fc-col-header-cell-cushion { color: #d1d5db !important; }
body.dark-mode .fc-timegrid-slot { border-color: #1f2937 !important; }
body.dark-mode .fc-timegrid-slot-label-cushion { color: #9ca3af !important; }
body.dark-mode .fc-daygrid-day-number { color: #d1d5db !important; }
body.dark-mode .fc-day-today { background: rgba(59,130,246,0.08) !important; }
body.dark-mode .fc-button { background: #374151 !important; border-color: #4b5563 !important; color: #d1d5db !important; }
body.dark-mode .fc-button:hover { background: #4b5563 !important; }
body.dark-mode .fc-button-active { background: #4f46e5 !important; border-color: #6366f1 !important; color: white !important; }
body.dark-mode .fc-toolbar-title { color: #f3f4f6 !important; }

/* ============================================
   MODALES (Design 2025 - Glassmorphism léger)
   ============================================ */
.modal-overlay {
  position: fixed; 
  inset: 0;
  background: rgba(15, 23, 42, 0.4); /* Bleu nuit transparent */
  -webkit-backdrop-filter: blur(4px);        /* Effet flou arrière-plan */
  backdrop-filter: blur(4px);        /* Effet flou arrière-plan */
  display: flex; 
  align-items: center;
  justify-content: center;
  z-index: var(--z-popover);
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.modal { 
  background: #fff; 
  border-radius: 16px; 
  width: 100%;
  max-width: 820px; 
  max-height: 90vh; 
  display: flex; 
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25); 
  transform: scale(1);
  animation: scaleIn 0.2s ease-out;
}

.modal-h { 
  padding: 20px 24px; 
  border-bottom: 1px solid #f1f5f9; 
  display: flex; 
  justify-content: space-between; 
  align-items: center;
  background: #fff;
  border-radius: 16px 16px 0 0;
}

.modal-b { 
  padding: 24px; 
  overflow-y: auto; 
  flex: 1; 
}

.modal-f {
  border-top: 1px solid #f1f5f9;
  padding: 16px 24px;
  background-color: #f8fafc;
  border-radius: 0 0 16px 16px;
  /* Layout flex défini dans le bloc consolidé plus bas (ligne ~3079) */
}

/* Bouton de fermeture (X) */
.btn-close {
  background: transparent;
  border: none;
  font-size: 1.2rem;
  color: #94a3b8;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
}
.btn-close:hover {
  background-color: #f1f5f9;
  color: #ef4444;
}

/* Animations */
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { transform: scale(0.95); opacity: 0; } to { transform: scale(1); opacity: 1; } }

/* ============================================
   MODALES — SYSTÈME UNIFIÉ DE HEADERS
   3 variantes : standard, colored, accent
   ============================================ */

/* Z-INDEX — Paliers modales */
.z-modal-base     { z-index: 50000 !important; }
.z-modal-email    { z-index: 60000 !important; }
.z-modal-critical { z-index: 70000 !important; }

/* BACKDROP unifié */
.om-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.5);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  animation: fadeIn 0.2s ease-out;
}

/* CONTAINER unifié */
.om-modal {
  background: #fff;
  border-radius: 16px;
  width: 100%;
  max-height: calc(100vh - 40px);
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 50px -12px rgba(0,0,0,0.25);
  animation: scaleIn 0.2s ease-out;
}

/* HEADER — Variante Standard (blanc, bordure fine) */
.om-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid #e5e7eb;
  background: #fff;
  border-radius: 16px 16px 0 0;
  flex-shrink: 0;
}

/* HEADER — Variante Colored (fond de couleur, texte blanc) */
.om-modal-header.colored {
  background: var(--header-color, #2563eb);
  border-bottom: none;
  color: #fff;
}
.om-modal-header.colored .om-modal-title { color: #fff; }
.om-modal-header.colored .om-modal-subtitle { color: rgba(255,255,255,0.8); }
.om-modal-header.colored .om-modal-close { color: rgba(255,255,255,0.7); }
.om-modal-header.colored .om-modal-close:hover { color: #fff; background: rgba(255,255,255,0.15); }

/* HEADER — Variante Accent (bande d'accent en haut) */
.om-modal-header.accent {
  border-top: 4px solid var(--header-color, #2563eb);
  padding-top: 14px;
}

/* Titre */
.om-modal-title {
  font-size: 1.125rem;
  font-weight: 600;
  color: #1f2937;
  display: flex;
  align-items: center;
  gap: 10px;
}

/* Sous-titre */
.om-modal-subtitle {
  font-size: 0.8125rem;
  color: #6b7280;
  margin-top: 2px;
}

/* Bouton Fermer unifié */
.om-modal-close {
  background: transparent;
  border: none;
  font-size: 1.5rem;
  line-height: 1;
  color: #9ca3af;
  cursor: pointer;
  padding: 6px;
  border-radius: 8px;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  flex-shrink: 0;
}
.om-modal-close:hover {
  background: #f3f4f6;
  color: #6b7280;
}

/* BODY */
.om-modal-body {
  padding: 20px;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

/* FOOTER */
.om-modal-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  padding: 14px 20px;
  border-top: 1px solid #e5e7eb;
  background: #f9fafb;
  border-radius: 0 0 16px 16px;
  flex-shrink: 0;
}

/* Badge de type dans les headers */
.om-modal-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: 0.75rem;
  font-weight: 600;
  background: rgba(59,130,246,0.1);
  color: #2563eb;
}
.om-modal-header.colored .om-modal-badge {
  background: rgba(255,255,255,0.2);
  color: #fff;
}

/* Dark mode */
body.dark-mode .om-modal { background: #1f2937; }
body.dark-mode .om-modal-header { background: #1f2937; border-color: #374151; }
body.dark-mode .om-modal-title { color: #f3f4f6; }
body.dark-mode .om-modal-subtitle { color: #9ca3af; }
body.dark-mode .om-modal-close { color: #9ca3af; }
body.dark-mode .om-modal-close:hover { background: #374151; color: #d1d5db; }
body.dark-mode .om-modal-body { background: #1f2937; }
body.dark-mode .om-modal-footer { background: #111827; border-color: #374151; }

/* ============================================
   PAGE HEADERS UNIFIÉS (om-page-header)
   ============================================ */
.om-page-header {
  border-radius: 16px;
  padding: 28px 32px 20px;
  margin: 0 0 24px;
  position: relative;
  overflow: visible;
  color: white;
}
.om-page-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.om-page-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 200px;
  height: 200px;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.om-page-header-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: relative;
  z-index: 1;
}
.om-page-header-title {
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.om-page-header-subtitle {
  font-size: 0.95rem;
  opacity: 0.85;
  font-weight: 500;
  margin-top: 4px;
}
.om-page-header-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  position: relative;
  z-index: 1;
}
.om-page-header-stats {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  position: relative;
  z-index: 1;
  flex-wrap: wrap;
}
.om-page-header-stat {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 10px;
  text-align: center;
  min-width: 80px;
  cursor: pointer;
  transition: background 0.2s;
}
.om-page-header-stat:hover {
  background: rgba(255,255,255,0.22);
}
.om-page-header-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
}
.om-page-header-stat-label {
  font-size: 0.8rem;
  opacity: 0.85;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
/* Boutons dans le header */
.om-page-header .btn-header {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 8px 16px;
  border-radius: 10px;
  font-weight: 600;
  font-size: 0.875rem;
  cursor: pointer;
  transition: all 0.2s;
  display: inline-flex;
  align-items: center;
  gap: 6px;
}
.om-page-header .btn-header:hover {
  background: rgba(255,255,255,0.25);
  transform: translateY(-1px);
}
.om-page-header .btn-header.primary-action {
  background: rgba(255,255,255,0.95);
  color: #1e293b;
  border: none;
  font-weight: 700;
}
.om-page-header .btn-header.primary-action:hover {
  background: #fff;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}
/* --- Variantes de couleur --- */
.om-ph-emerald { background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%); }
.om-ph-indigo  { background: linear-gradient(135deg, #4f46e5 0%, #6366f1 50%, #818cf8 100%); }
.om-ph-navy    { background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #3b82f6 100%); }
.om-ph-slate   { background: linear-gradient(135deg, #475569 0%, #64748b 50%, #94a3b8 100%); }
.om-ph-rose    { background: linear-gradient(135deg, #be185d 0%, #ec4899 50%, #f472b6 100%); }
.om-ph-violet  { background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%); }
.om-ph-marine  { background: linear-gradient(135deg, #1e3a5f 0%, #2563eb 50%, #60a5fa 100%); }
.om-ph-teal    { background: linear-gradient(135deg, #0d9488 0%, #14b8a6 50%, #5eead4 100%); }
.om-ph-amber   { background: linear-gradient(135deg, #b45309 0%, #d97706 50%, #fbbf24 100%); }
.om-ph-blue    { background: linear-gradient(135deg, #1d4ed8 0%, #2563eb 50%, #60a5fa 100%); }
/* Dark mode */
body.dark-mode .om-ph-emerald { background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%); }
body.dark-mode .om-ph-indigo  { background: linear-gradient(135deg, #312e81 0%, #4f46e5 50%, #6366f1 100%); }
body.dark-mode .om-ph-navy    { background: linear-gradient(135deg, #172554 0%, #1e3a5f 50%, #1e40af 100%); }
body.dark-mode .om-ph-slate   { background: linear-gradient(135deg, #1e293b 0%, #475569 50%, #64748b 100%); }
body.dark-mode .om-ph-rose    { background: linear-gradient(135deg, #831843 0%, #be185d 50%, #ec4899 100%); }
body.dark-mode .om-ph-violet  { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%); }
body.dark-mode .om-ph-marine  { background: linear-gradient(135deg, #172554 0%, #1e3a5f 50%, #2563eb 100%); }
body.dark-mode .om-ph-teal    { background: linear-gradient(135deg, #134e4a 0%, #0d9488 50%, #14b8a6 100%); }
body.dark-mode .om-ph-amber   { background: linear-gradient(135deg, #78350f 0%, #b45309 50%, #d97706 100%); }
body.dark-mode .om-ph-blue    { background: linear-gradient(135deg, #1e3a8a 0%, #1d4ed8 50%, #2563eb 100%); }
/* Responsive */
@media (max-width: 768px) {
  .om-page-header { padding: 20px 16px 16px; border-radius: 12px; }
  .om-page-header-top { flex-direction: column; gap: 10px; align-items: flex-start; }
  .om-page-header-title { font-size: 1.25rem; }
  .om-page-header-stats { gap: 8px; }
  .om-page-header-stat { padding: 6px 12px; min-width: 60px; }
  .om-page-header-stat-value { font-size: 1.2rem; }
  .om-page-header-actions { width: 100%; justify-content: flex-end; }
}

/* ============================================
   OM-STAT-CARD — Cartes KPI unifiées
   ============================================ */
.om-stats-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 16px;
  margin-bottom: 24px;
}
.om-stat-card {
  background: white;
  border-radius: 14px;
  padding: 20px 16px;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  transition: all 0.25s ease;
  position: relative;
  overflow: hidden;
}
.om-stat-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.08);
  transform: translateY(-2px);
}
.om-stat-card[data-clickable] { cursor: pointer; }
.om-stat-card[data-clickable].active {
  border-color: var(--primary-500, #3b82f6);
  box-shadow: 0 0 0 2px rgba(59,130,246,0.15), 0 4px 14px rgba(0,0,0,0.08);
}
/* Accent bar on left */
.om-stat-card::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 4px;
  background: var(--om-stat-accent, #3b82f6);
  border-radius: 14px 0 0 14px;
}
.om-stat-card-value {
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1.1;
  color: var(--om-stat-accent, #1e40af);
  margin-bottom: 4px;
}
.om-stat-card-label {
  font-size: 0.8rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #6b7280;
}
.om-stat-card-sub {
  font-size: 0.75rem;
  color: #9ca3af;
  margin-top: 4px;
  font-weight: 500;
}
/* Progress bar inside stat card */
.om-stat-card-progress {
  width: 100%;
  height: 4px;
  background: #f3f4f6;
  border-radius: 2px;
  margin-top: 8px;
  overflow: hidden;
}
.om-stat-card-progress-bar {
  height: 100%;
  border-radius: 2px;
  background: var(--om-stat-accent, #22c55e);
  transition: width 0.5s ease;
}
/* Color accents */
.om-stat-blue    { --om-stat-accent: #2563eb; }
.om-stat-green   { --om-stat-accent: #16a34a; }
.om-stat-red     { --om-stat-accent: #dc2626; }
.om-stat-purple  { --om-stat-accent: #7c3aed; }
.om-stat-amber   { --om-stat-accent: #d97706; }
.om-stat-indigo  { --om-stat-accent: #6366f1; }
.om-stat-gray    { --om-stat-accent: #6b7280; }
.om-stat-teal    { --om-stat-accent: #0d9488; }
/* Dark mode */
body.dark-mode .om-stat-card {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .om-stat-card:hover {
  box-shadow: 0 4px 14px rgba(0,0,0,0.3);
}
body.dark-mode .om-stat-card-label { color: #9ca3af; }
body.dark-mode .om-stat-card-sub { color: #6b7280; }
body.dark-mode .om-stat-card-progress { background: #374151; }
/* Responsive */
@media (max-width: 768px) {
  .om-stats-row { grid-template-columns: repeat(2, 1fr); gap: 10px; }
  .om-stat-card { padding: 14px 12px; }
  .om-stat-card-value { font-size: 1.4rem; }
}
@media (max-width: 480px) {
  .om-stats-row { grid-template-columns: 1fr 1fr; gap: 8px; }
}

/* ============================================
   FORMULAIRES
   ============================================ */
.field { 
  display: flex; 
  flex-direction: column; 
  margin-bottom: 10px; 
}

.field label { 
  font-size: var(--font-sm); 
  color: #6b7280; 
  margin-bottom: 4px; 
}

.input, select { 
  border: 1px solid #e5e7eb; 
  border-radius: 10px; 
  padding: 8px; 
}

.input:focus,
select:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.two { 
  display: grid; 
  grid-template-columns: 1fr 1fr; 
  gap: 10px; 
}

/* ============================================
   SUGGESTIONS AUTOCOMPLETE
   ============================================ */
.suggest { 
  position: absolute; 
  background: #fff; 
  border: 1px solid #e5e7eb; 
  border-radius: 10px; 
  width: 100%; 
  max-height: 220px;
  overflow: auto;
  z-index: var(--z-tooltip); 
}

.suggest div { 
  padding: 8px 10px; 
  cursor: pointer; 
}

.suggest div:hover { 
  background: #eff6ff; 
}

/* ============================================
   BARRE DE RECHERCHE (om-filter-bar)
   ============================================ */
.search-bar,
.om-filter-bar {
  display: flex;
  gap: 12px;
  align-items: center;
  margin-bottom: 20px;
  flex-wrap: wrap;
  padding: 14px 18px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.search-input {
  flex: 1;
  min-width: 200px;
}

/* ============================================
   TABLE DE DONNÉES (om-data-table)
   ============================================ */
.om-data-table-wrap {
  background: white;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  /* La table défile horizontalement DANS son cadre sur écran étroit
     (Règle N°0-nodebord) plutôt que de déborder la page. Sur desktop la
     scrollbar n'apparaît pas (la table tient). */
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}
.om-data-table {
  width: 100%;
  border-collapse: collapse;
}
.om-data-table thead tr {
  background: #f8fafc;
  border-bottom: 2px solid #e5e7eb;
}
.om-data-table thead th {
  padding: 12px 16px;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #64748b;
  text-align: left;
  white-space: nowrap;
}
.om-data-table thead th[data-sort] {
  cursor: pointer;
  transition: color 0.15s;
}
.om-data-table thead th[data-sort]:hover {
  color: #2563eb;
}
.om-data-table tbody tr {
  border-bottom: 1px solid #f1f5f9;
  transition: background 0.15s;
}
.om-data-table tbody tr:hover {
  background: #f8fafc;
}
.om-data-table tbody tr:last-child {
  border-bottom: none;
}
.om-data-table tbody td {
  padding: 12px 16px;
  font-size: 0.875rem;
  color: #374151;
  vertical-align: middle;
}
/* Dark mode */
body.dark-mode .om-filter-bar,
body.dark-mode .search-bar {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .om-data-table-wrap {
  background: #1f2937;
  border-color: #374151;
}
body.dark-mode .om-data-table thead tr {
  background: #111827;
  border-bottom-color: #374151;
}
body.dark-mode .om-data-table thead th { color: #9ca3af; }
body.dark-mode .om-data-table thead th[data-sort]:hover { color: #60a5fa; }
body.dark-mode .om-data-table tbody tr { border-bottom-color: #1f2937; }
body.dark-mode .om-data-table tbody tr:hover { background: #111827; }
body.dark-mode .om-data-table tbody td { color: #d1d5db; }
/* Responsive */
@media (max-width: 768px) {
  .search-bar, .om-filter-bar { padding: 10px 12px; gap: 8px; }
  .search-input { min-width: 150px; }
  .om-data-table-wrap { border-radius: 10px; overflow-x: auto; }
  .om-data-table thead th, .om-data-table tbody td { padding: 8px 10px; }
}

/* ============================================
   CARTES D'ENTITÉS (Élèves, Parents, etc.)
   ============================================ */
.entity-card {
  background: white;
  border-radius: 14px;
  padding: 18px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.05);
  border: 1px solid #e5e7eb;
  transition: all 0.2s ease;
  cursor: pointer;
  position: relative;
}
.entity-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,0.08);
  border-color: #a5b4fc;
  transform: translateY(-2px);
}

.entity-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}

.entity-title {
  font-size: var(--font-lg);
  font-weight: 700;
  color: #1e1b4b;
  margin-bottom: 2px;
  line-height: 1.3;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.entity-subtitle {
  font-size: var(--font-sm);
  color: #6b7280;
  line-height: 1.4;
}

.entity-info {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}

.entity-info-row {
  display: flex;
  align-items: center;
  font-size: var(--font-sm);
  color: #4b5563;
  line-height: 1.5;
}

.entity-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  border-radius: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  background: #eef2ff;
  color: #4f46e5;
  white-space: nowrap;
}

.entity-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  margin-top: 14px;
  border-top: 1px solid #f3f4f6;
}

/* Subtle action buttons — show on hover */
.entity-actions {
  display: flex;
  gap: 4px;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.entity-card:hover .entity-actions { opacity: 1; }
.entity-actions button {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  border: none;
  background: transparent;
  cursor: pointer;
  font-size: 14px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.entity-actions .btn-entity-edit:hover { background: #eef2ff; }
.entity-actions .btn-entity-del:hover { background: #fee2e2; }

/* ============================================
   GRILLE DE STATISTIQUES
   ============================================ */
.stats-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  padding: 0 24px;
}

.stat-item {
  text-align: center;
  padding: 16px 12px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
  transition: all 0.3s ease;
}

.stat-item:hover {
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.1);
  border-color: #3b82f6;
}

.stat-value {
  font-size: var(--font-3xl);
  font-weight: 800;
  color: #1e40af;
  line-height: 1;
  margin-bottom: 6px;
}

.stat-label {
  font-size: var(--font-sm);
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  font-weight: 600;
}

/* ============================================
   ÉTAT VIDE
   ============================================ */
.empty-state {
  text-align: center;
  padding: 60px 24px;
  color: #9ca3af;
}

.empty-state-icon {
  font-size: 64px;
  margin-bottom: 20px;
  opacity: 0.5;
}

/* ============================================
   LOADING SPINNER
   ============================================ */
.loading-spinner {
  border: 3px solid #f3f4f6;
  border-top: 3px solid #3b82f6;
  border-radius: 50%;
  width: 24px;
  height: 24px;
  animation: spin 1s linear infinite;
}

/* ============================================
   TOOLTIPS
   ============================================ */
[data-tooltip] {
  position: relative;
  cursor: help;
}

[data-tooltip]:hover::before {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  padding: 6px 12px;
  background: #1f2937;
  color: white;
  font-size: var(--font-sm);
  border-radius: 6px;
  white-space: nowrap;
  z-index: var(--z-modal);
  margin-bottom: 6px;
}

[data-tooltip]:hover::after {
  content: '';
  position: absolute;
  bottom: 100%;
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: #1f2937;
  z-index: var(--z-modal);
}

/* ============================================
   SCROLLBAR PERSONNALISÉE
   ============================================ */
::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}

::-webkit-scrollbar-track {
  background: #f1f5f9;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #cbd5e1;
  border-radius: 10px;
}

::-webkit-scrollbar-thumb:hover {
  background: #94a3b8;
}

/* ============================================
   ANIMATIONS
   ============================================ */
@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes spin {
  0% { transform: rotate(0deg); }
  100% { transform: rotate(360deg); }
}

.entity-card,
.stat-item {
  animation: fadeIn 0.3s ease-out;
}

/* ============================================
   MODE SOMBRE
   Activé via la classe .dark-mode sur <body> (toggle de l'app).
   ⚠️ Ne PAS enfermer ces règles dans @media (prefers-color-scheme: dark)
   sinon le toggle ne fonctionne pas sans l'OS aussi en dark.
   ============================================ */
body.dark-mode {
    background: #111827;
    color: #f9fafb;
}

body.dark-mode aside,
body.dark-mode .header,
body.dark-mode .card {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .modal {
    background-color: #1f2937 !important;
    color: #f9fafb !important;
}

body.dark-mode .modal-h,
body.dark-mode .modal-f {
    border-color: #374151 !important;
    background: #1f2937 !important;
}

body.dark-mode .input,
body.dark-mode input[type="text"],
body.dark-mode input[type="search"],
body.dark-mode input[type="email"],
body.dark-mode input[type="number"],
body.dark-mode input[type="date"],
body.dark-mode input[type="month"],
body.dark-mode input[type="tel"],
body.dark-mode input:not([type]),
body.dark-mode textarea,
body.dark-mode select {
    background: #374151 !important;
    color: #f9fafb !important;
    border-color: #4b5563 !important;
}

body.dark-mode .input:focus,
body.dark-mode input:focus,
body.dark-mode textarea:focus,
body.dark-mode select:focus {
    border-color: #60a5fa;
    box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder,
body.dark-mode .input::placeholder {
    color: #9ca3af !important;
}

body.dark-mode .btn.light {
    background-color: #4b5563 !important;
    color: #f9fafb !important;
    border-color: #6b7280 !important;
}

/* Cartes en mode sombre */
body.dark-mode .entity-card {
    background: #1f2937;
    border-color: #374151;
    box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}

body.dark-mode .entity-card:hover {
    box-shadow: 0 4px 12px rgba(99, 102, 241, 0.2);
    border-color: #6366f1;
}

body.dark-mode .entity-title {
    color: #e0e7ff;
}
body.dark-mode .entity-footer { border-top-color: #374151; }
body.dark-mode .entity-actions .btn-entity-edit:hover { background: #312e81; }
body.dark-mode .entity-actions .btn-entity-del:hover { background: #7f1d1d; }

body.dark-mode .entity-subtitle,
body.dark-mode .entity-info-row {
    color: #9ca3af;
}

body.dark-mode .stat-item {
    background: #1f2937;
    border-color: #374151;
}

body.dark-mode .stat-value {
    color: #60a5fa;
}

body.dark-mode .entity-badge {
    background: #374151;
    color: #60a5fa;
}

body.dark-mode .empty-state {
    color: #6b7280;
}

/* Scrollbar en mode sombre */
body.dark-mode ::-webkit-scrollbar-track {
    background: #1f2937;
}

body.dark-mode ::-webkit-scrollbar-thumb {
    background: #374151;
}

body.dark-mode ::-webkit-scrollbar-thumb:hover {
    background: #4b5563;
}

/* ============================================
   RESPONSIVE
   ============================================ */
@media (max-width: 768px) {
  .search-bar {
    flex-direction: column;
    align-items: stretch;
  }

  .search-input {
    width: 100%;
  }

  .entity-card {
    padding: 16px;
  }

  .entity-title {
    font-size: var(--font-lg);
  }

  .stats-grid {
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: 8px;
  }

  .stat-value {
    font-size: var(--font-2xl);
  }

  .grid {
    padding: 0 16px;
  }
  
  /* ✅ AMÉLIORATION : Modales responsive */
  .modal-f {
    flex-direction: column;
  }
  
  .modal-f .btn {
    width: 100%;
  }
}

/* ============================================
   PRINT
   ============================================ */
@media print {
  /* ========== FORCER TOUTES LES COULEURS À L'IMPRESSION ========== */
  * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Forcer les backgrounds Tailwind à s'imprimer */
  [class*="bg-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Forcer les gradients à s'imprimer */
  [class*="from-"],
  [class*="to-"],
  [class*="gradient"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .search-bar,
  .btn,
  aside {
    display: none !important;
  }

  .entity-card {
    break-inside: avoid;
    page-break-inside: avoid;
  }

  /* ========== SVG IMPRESSION EXERCICES ========== */

  /* Forcer l'affichage des SVG à l'impression */
  svg {
    display: block !important;
    visibility: visible !important;
    overflow: visible !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Préserver toutes les couleurs SVG */
  svg *,
  svg path,
  svg line,
  svg circle,
  svg rect,
  svg text,
  svg polygon,
  svg polyline {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
    stroke: inherit !important;
    fill: inherit !important;
  }

  /* Container des SVG correction */
  .svg-correction-wrapper,
  .print-svg-visible,
  div[class*="flex justify-center"] {
    display: flex !important;
    visibility: visible !important;
    justify-content: center !important;
    page-break-inside: avoid !important;
  }

  /* Fond vert des corrections */
  .bg-green-50 {
    background-color: #f0fdf4 !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Masquer les boutons lors de l'impression */
  button,
  .btn,
  [onclick*="toggle"],
  [onclick*="Modifier"],
  [onclick*="Supprimer"] {
    display: none !important;
  }

  /* ========== CERCLES TRIGONOMÉTRIQUES - IMPRESSION GRANDE TAILLE ========== */

  /* Conteneur des cercles trigo - page dédiée */
  .cercle-trigo-print {
    page-break-inside: avoid !important;
    page-break-before: always !important;
    margin: 0 !important;
    padding: 10px 0 !important;
    text-align: center !important;
    width: 100% !important;
    display: block !important;
    overflow: visible !important;
  }

  /* Premier cercle pas de saut avant */
  .cours-section:first-of-type .cercle-trigo-print {
    page-break-before: auto !important;
  }

  /* Forcer le conteneur flex à être block et centré */
  .cercle-trigo-print > .flex,
  .cercle-trigo-print > div.flex {
    display: block !important;
    width: 100% !important;
    text-align: center !important;
  }

  /* SVG cercle trigo - FORCER GRANDE TAILLE avec transform */
  .cercle-svg-print {
    width: 100% !important;
    height: auto !important;
    max-width: 180mm !important;
    min-height: 500px !important;
    display: block !important;
    margin: 0 auto !important;
    transform: scale(1) !important;
  }

  /* SVG cercle angles associés */
  .cercle-angles-associes-print {
    max-width: 180mm !important;
    min-height: 520px !important;
  }

  /* S'assurer que le cours trigo affiche tout */
  .cours-trigo {
    overflow: visible !important;
  }

  /* ========== FICHE TRIGO COMPACTE - FORMAT A4 ========== */
  .fiche-trigo-print {
    width: 100% !important;
    max-width: 210mm !important;
    margin: 0 auto !important;
    padding: 5mm !important;
    font-size: var(--font-xs) !important;
    page-break-inside: avoid !important;
  }

  .fiche-trigo-print * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Cercles côte à côte et centrés pour impression A4 */
  .fiche-trigo-print .flex.gap-2 {
    display: flex !important;
    gap: 3mm !important;
    justify-content: center !important;
    margin: 0 auto !important;
  }

  .fiche-trigo-print .flex-1 {
    flex: 0 0 auto !important;
  }

  /* Réduire encore les SVG pour A4 si nécessaire */
  .fiche-trigo-print svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Tableaux compacts */
  .fiche-trigo-print table {
    font-size: 9px !important;
  }

  .fiche-trigo-print th,
  .fiche-trigo-print td {
    padding: 1px 3px !important;
  }

  /* Éviter coupure des sections cours */
  .cours-section {
    page-break-inside: avoid !important;
  }

  /* ========== COURS 6EME ANGLES - IMPRESSION OPTIMISÉE ========== */

  /* Container principal du cours angles */
  .cours-6eme-angles {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Masquer complètement les boutons d'impression */
  .cours-6eme-angles .print\\:hidden,
  .cours-6eme-angles button {
    display: none !important;
    height: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    overflow: hidden !important;
  }

  /* En-tête compact pour impression */
  .cours-6eme-angles > div:first-of-type {
    margin-bottom: 12px !important;
    padding: 10px !important;
  }

  .cours-6eme-angles h1 {
    font-size: var(--font-xl) !important;
    margin-bottom: 2px !important;
  }

  /* Sections qui ne doivent pas être coupées */
  .cours-angles-section {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Saut de page avant la section 4 (complémentaires/supplémentaires) */
  .cours-angles-page-break {
    page-break-before: always !important;
    break-before: page !important;
    margin-top: 0 !important;
    padding-top: 0 !important;
  }

  /* Réduire les marges entre sections pour mieux utiliser l'espace */
  .cours-6eme-angles .mb-6 {
    margin-bottom: 10px !important;
  }

  .cours-6eme-angles .mb-4 {
    margin-bottom: 8px !important;
  }

  .cours-6eme-angles .gap-4 {
    gap: 8px !important;
  }

  .cours-6eme-angles .gap-3 {
    gap: 6px !important;
  }

  .cours-6eme-angles .gap-2 {
    gap: 4px !important;
  }

  /* Padding réduit pour les blocs */
  .cours-6eme-angles .p-5 {
    padding: 12px !important;
  }

  .cours-6eme-angles .p-4 {
    padding: 10px !important;
  }

  .cours-6eme-angles .p-3 {
    padding: 8px !important;
  }

  .cours-6eme-angles .p-2 {
    padding: 6px !important;
  }

  /* Texte légèrement plus petit pour tout tenir */
  .cours-6eme-angles .text-xl {
    font-size: var(--font-lg) !important;
  }

  .cours-6eme-angles .text-lg {
    font-size: var(--font-base) !important;
  }

  .cours-6eme-angles .text-sm {
    font-size: var(--font-sm) !important;
  }

  .cours-6eme-angles .text-xs {
    font-size: var(--font-xs) !important;
  }

  /* Garder les SVG bien visibles */
  .cours-6eme-angles svg {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Classification des angles - ajuster la grille pour impression */
  .cours-6eme-angles .grid-cols-5 {
    gap: 4px !important;
  }

  .cours-6eme-angles .grid-cols-5 > div {
    padding: 4px !important;
  }

  /* Section horloge - 4 colonnes compactes */
  .cours-6eme-angles .grid-cols-2.md\\:grid-cols-4 {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 6px !important;
  }

  /* Forcer les couleurs de fond */
  .cours-6eme-angles [class*="bg-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Éliminer la page vide en fin de document */
  .cours-6eme-angles {
    page-break-after: avoid !important;
  }

  /* Dernière section sans marge bottom */
  .cours-6eme-angles > .cours-angles-section:last-of-type {
    margin-bottom: 0 !important;
    padding-bottom: 0 !important;
  }

  /* Footer compact */
  .cours-6eme-angles > p:last-child {
    margin: 4px 0 0 0 !important;
    padding: 0 !important;
    page-break-after: avoid !important;
  }

  /* ========== COURS SUITES - FICHE 1 PAGE A4 ========== */

  /* Container principal suites - ULTRA COMPACT 1 PAGE */
  .fiche-suites-print {
    max-width: 100% !important;
    margin: 0 !important;
    padding: 2mm !important;
    font-size: 8px !important;
    line-height: 1.15 !important;
    max-height: 260mm !important;
    overflow: hidden !important;
  }

  /* Masquer les boutons */
  .fiche-suites-print .print\\:hidden,
  .fiche-suites-print button {
    display: none !important;
  }

  /* Header gradient - compact */
  .fiche-suites-print .bg-gradient-to-r {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    padding: 5px 8px !important;
    margin-bottom: 4px !important;
  }

  .fiche-suites-print .bg-gradient-to-r h3 {
    font-size: var(--font-base) !important;
    margin: 0 !important;
  }

  .fiche-suites-print .bg-gradient-to-r .text-sm {
    font-size: 8px !important;
  }

  .fiche-suites-print .bg-gradient-to-r p {
    font-size: 8px !important;
    margin-top: 1px !important;
  }

  /* Grilles */
  .fiche-suites-print .grid-cols-2 {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 4px !important;
  }

  .fiche-suites-print .grid-cols-3 {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
  }

  /* Cartes principales arithmétique/géométrique */
  .fiche-suites-print .bg-purple-50,
  .fiche-suites-print .bg-indigo-50 {
    padding: 4px !important;
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Badges des titres */
  .fiche-suites-print .rounded-full {
    padding: 2px 6px !important;
    font-size: 8px !important;
  }

  /* Formules principales u_{n+1} = ... */
  .fiche-suites-print .text-lg {
    font-size: var(--font-xs) !important;
  }

  /* Boîtes blanches internes */
  .fiche-suites-print .bg-white.rounded-lg {
    padding: 3px !important;
    margin-bottom: 3px !important;
  }

  /* Sous-sections avec border-left */
  .fiche-suites-print .border-l-4 {
    padding: 2px 4px !important;
  }

  .fiche-suites-print .border-l-4 .font-semibold,
  .fiche-suites-print .border-l-4 .font-bold {
    font-size: 7px !important;
  }

  .fiche-suites-print .border-l-4 .text-sm {
    font-size: 9px !important;
  }

  .fiche-suites-print .border-l-4 .text-xs {
    font-size: 7px !important;
  }

  /* Section formules centrales */
  .fiche-suites-print .from-blue-100 {
    padding: 4px !important;
    margin-bottom: 4px !important;
  }

  .fiche-suites-print .from-blue-100 .text-base {
    font-size: 9px !important;
  }

  /* Section sens de variation */
  .fiche-suites-print .bg-yellow-50 {
    padding: 4px !important;
    margin-bottom: 4px !important;
  }

  /* Section convergence/divergence */
  .fiche-suites-print .bg-green-50 {
    padding: 4px !important;
  }

  /* Graphiques */
  .fiche-suites-print .bg-gray-50 {
    padding: 3px !important;
  }

  .fiche-suites-print svg {
    max-height: 35px !important;
  }

  /* Marges générales ultra-réduites */
  .fiche-suites-print .mb-3 {
    margin-bottom: 4px !important;
  }

  .fiche-suites-print .mb-2 {
    margin-bottom: 3px !important;
  }

  .fiche-suites-print .mb-1 {
    margin-bottom: 2px !important;
  }

  .fiche-suites-print .mt-2 {
    margin-top: 3px !important;
  }

  .fiche-suites-print .gap-6 {
    gap: 12px !important;
  }

  .fiche-suites-print .gap-3 {
    gap: 4px !important;
  }

  .fiche-suites-print .gap-2 {
    gap: 3px !important;
  }

  .fiche-suites-print .space-y-2 > * + * {
    margin-top: 2px !important;
  }

  .fiche-suites-print .space-y-1 > * + * {
    margin-top: 1px !important;
  }

  /* Textes */
  .fiche-suites-print .text-base {
    font-size: 9px !important;
  }

  .fiche-suites-print .text-sm {
    font-size: 8px !important;
  }

  .fiche-suites-print .text-xs {
    font-size: 7px !important;
  }

  /* Préserver les couleurs */
  .fiche-suites-print .bg-green-50,
  .fiche-suites-print .bg-yellow-50,
  .fiche-suites-print .bg-blue-100,
  .fiche-suites-print .bg-white {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Éviter coupure de page */
  .fiche-suites-print {
    page-break-inside: avoid !important;
  }

  /* Graphiques */
  .fiche-suites-print .bg-gray-50 {
    padding: 6px !important;
  }

  .fiche-suites-print svg {
    max-height: 50px !important;
  }

  /* Marges générales réduites */
  .fiche-suites-print .mb-3 {
    margin-bottom: 6px !important;
  }

  .fiche-suites-print .mb-2 {
    margin-bottom: 4px !important;
  }

  .fiche-suites-print .mt-2 {
    margin-top: 4px !important;
  }

  .fiche-suites-print .gap-3 {
    gap: 6px !important;
  }

  .fiche-suites-print .gap-2 {
    gap: 4px !important;
  }

  .fiche-suites-print .space-y-2 > * + * {
    margin-top: 4px !important;
  }

  /* Textes */
  .fiche-suites-print .text-base {
    font-size: var(--font-sm) !important;
  }

  .fiche-suites-print .text-sm {
    font-size: var(--font-xs) !important;
  }

  .fiche-suites-print .text-xs {
    font-size: 8px !important;
  }

  /* Préserver les couleurs */
  .fiche-suites-print .bg-green-100,
  .fiche-suites-print .bg-blue-100,
  .fiche-suites-print .bg-orange-100,
  .fiche-suites-print .bg-red-100,
  .fiche-suites-print .bg-white {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  .fiche-suites-compact .text-base {
    font-size: var(--font-sm) !important;
  }

  .fiche-suites-compact .text-lg {
    font-size: var(--font-sm) !important;
  }

  /* Tableau compact */
  .fiche-suites-compact table {
    font-size: 8px !important;
  }

  .fiche-suites-compact table th,
  .fiche-suites-compact table td {
    padding: 1px 2px !important;
  }

  /* SVG graphiques */
  .fiche-suites-compact svg {
    max-height: 30px !important;
    width: auto !important;
  }

  /* Forcer les couleurs */
  .fiche-suites-compact [class*="bg-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Bordures visibles */
  .fiche-suites-compact [class*="border-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
  }

  /* Éviter saut de page */
  .fiche-suites-compact {
    page-break-inside: avoid !important;
    page-break-after: avoid !important;
  }

  /* Bordures fines pour impression */
  .fiche-suites-compact .border,
  .fiche-suites-compact .border-2 {
    border-width: 1px !important;
  }

  .fiche-suites-compact .rounded,
  .fiche-suites-compact .rounded-lg {
    border-radius: 3px !important;
  }

  /* ========== FICHES COURS CARTE MENTALE - STYLES GÉNÉRAUX ========== */

  /*
   * NOTE: Le scaling dynamique est géré par la fonction autoScaleContent()
   * dans pedagogie-unified.js qui calcule automatiquement le scale optimal
   * basé sur les dimensions A4 et le contenu réel.
   *
   * Ce CSS ne définit PAS de transform:scale() pour éviter les conflits.
   * Il définit uniquement les styles de base pour l'impression.
   */

  /* Container principal - PAS de transform ici (géré par JS) */
  .print-content,
  [class*="fiche-"][class*="-print"]:not(.fiche-suites-print):not(.fiche-suites-compact):not(.fiche-trigo-print),
  [class^="cours-6eme-"]:not(.cours-6eme-angles) {
    box-sizing: border-box;
    width: 100%;
    max-width: 100%;
  }

  /* Éviter le débordement des éléments enfants */
  .print-content *,
  [class*="fiche-"][class*="-print"] *,
  [class^="cours-6eme-"] * {
    box-sizing: border-box;
    max-width: 100%;
  }

  /* Préserver les couleurs */
  .print-content [class*="bg-"],
  [class*="fiche-"][class*="-print"] [class*="bg-"],
  [class^="cours-6eme-"] [class*="bg-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Éviter les coupures de page dans les sections */
  .print-content > div,
  [class*="fiche-"][class*="-print"] > div,
  [class^="cours-6eme-"] > div {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Préserver les couleurs des encadrés */
  .print-content [class*="bg-"],
  [class*="fiche-"][class*="-print"] [class*="bg-"],
  [class^="cours-6eme-"] [class*="bg-"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Éviter les coupures de page dans les sections */
  .print-content > div,
  [class*="fiche-"][class*="-print"] > div {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* ========== COURS LONGUEURS & AIRES - IMPRESSION ========== */

  .fiche-longueurs-print,
  .fiche-aires-print {
    width: 100% !important;
    max-width: 210mm !important;
    margin: 0 auto !important;
    padding: 5mm !important;
    font-size: 11px !important;
  }

  .fiche-longueurs-print *,
  .fiche-aires-print * {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Forcer les inline backgrounds (headers, badges) */
  .fiche-longueurs-print [style*="background"],
  .fiche-aires-print [style*="background"] {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  /* Badges Tailwind avec bg-* */
  .fiche-longueurs-print .bg-blue-600,
  .fiche-longueurs-print .bg-indigo-600,
  .fiche-longueurs-print .bg-green-600,
  .fiche-longueurs-print .bg-red-500,
  .fiche-aires-print .bg-orange-500,
  .fiche-aires-print .bg-yellow-600,
  .fiche-aires-print .bg-green-600,
  .fiche-aires-print .bg-red-500 {
    -webkit-print-color-adjust: exact !important;
    print-color-adjust: exact !important;
    color-adjust: exact !important;
  }

  .fiche-longueurs-print .bg-blue-600 { background-color: #2563eb !important; color: white !important; }
  .fiche-longueurs-print .bg-indigo-600 { background-color: #4f46e5 !important; color: white !important; }
  .fiche-longueurs-print .bg-green-600 { background-color: #16a34a !important; color: white !important; }
  .fiche-longueurs-print .bg-red-500 { background-color: #ef4444 !important; color: white !important; }
  .fiche-aires-print .bg-orange-500 { background-color: #f97316 !important; color: white !important; }
  .fiche-aires-print .bg-yellow-600 { background-color: #ca8a04 !important; color: white !important; }
  .fiche-aires-print .bg-green-600 { background-color: #16a34a !important; color: white !important; }
  .fiche-aires-print .bg-red-500 { background-color: #ef4444 !important; color: white !important; }
  .fiche-aires-print .bg-indigo-600 { background-color: #4f46e5 !important; color: white !important; }

  /* Fonds pastel des blocs */
  .fiche-longueurs-print .bg-blue-50 { background-color: #eff6ff !important; }
  .fiche-longueurs-print .bg-indigo-50 { background-color: #eef2ff !important; }
  .fiche-longueurs-print .bg-green-50 { background-color: #f0fdf4 !important; }
  .fiche-longueurs-print .bg-red-50 { background-color: #fef2f2 !important; }
  .fiche-longueurs-print .bg-yellow-50 { background-color: #fefce8 !important; }
  .fiche-longueurs-print .bg-yellow-100 { background-color: #fef9c3 !important; }
  .fiche-aires-print .bg-orange-50 { background-color: #fff7ed !important; }
  .fiche-aires-print .bg-yellow-50 { background-color: #fefce8 !important; }
  .fiche-aires-print .bg-green-50 { background-color: #f0fdf4 !important; }
  .fiche-aires-print .bg-red-50 { background-color: #fef2f2 !important; }
  .fiche-aires-print .bg-indigo-50 { background-color: #eef2ff !important; }

  /* Couleurs de texte */
  .fiche-longueurs-print .text-blue-700 { color: #1d4ed8 !important; }
  .fiche-longueurs-print .text-green-700 { color: #15803d !important; }
  .fiche-longueurs-print .text-red-700 { color: #b91c1c !important; }
  .fiche-longueurs-print .text-red-600 { color: #dc2626 !important; }
  .fiche-longueurs-print .text-yellow-800 { color: #854d0e !important; }
  .fiche-longueurs-print .text-yellow-700 { color: #a16207 !important; }
  .fiche-longueurs-print .text-indigo-700 { color: #4338ca !important; }
  .fiche-aires-print .text-orange-700 { color: #c2410c !important; }
  .fiche-aires-print .text-yellow-700 { color: #a16207 !important; }
  .fiche-aires-print .text-green-700 { color: #15803d !important; }
  .fiche-aires-print .text-red-700 { color: #b91c1c !important; }
  .fiche-aires-print .text-indigo-800 { color: #3730a3 !important; }
  .fiche-aires-print .text-indigo-700 { color: #4338ca !important; }

  /* Bordures colorées */
  .fiche-longueurs-print .border-blue-300 { border-color: #93c5fd !important; }
  .fiche-longueurs-print .border-indigo-300 { border-color: #a5b4fc !important; }
  .fiche-longueurs-print .border-green-400 { border-color: #4ade80 !important; }
  .fiche-longueurs-print .border-red-400 { border-color: #f87171 !important; }
  .fiche-longueurs-print .border-yellow-400 { border-color: #facc15 !important; }
  .fiche-aires-print .border-orange-300 { border-color: #fdba74 !important; }
  .fiche-aires-print .border-yellow-300 { border-color: #fde047 !important; }
  .fiche-aires-print .border-green-400 { border-color: #4ade80 !important; }
  .fiche-aires-print .border-red-400 { border-color: #f87171 !important; }
  .fiche-aires-print .border-indigo-300 { border-color: #a5b4fc !important; }

  /* Grilles */
  .fiche-longueurs-print .grid-cols-2,
  .fiche-aires-print .grid-cols-2 {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }

  .fiche-aires-print .grid-cols-4 {
    display: grid !important;
    grid-template-columns: 1fr 1fr 1fr 1fr !important;
    gap: 6px !important;
  }

  /* Éviter les coupures de page */
  .fiche-longueurs-print > div,
  .fiche-aires-print > div {
    page-break-inside: avoid !important;
    break-inside: avoid !important;
  }

  /* Masquer les boutons imprimer/email */
  .fiche-longueurs-print .no-print,
  .fiche-aires-print .no-print,
  .fiche-longueurs-print button,
  .fiche-aires-print button {
    display: none !important;
  }

  /* Forcer la page à ne pas réduire les SVG */
  @page {
    size: A4;
    margin: 10mm;
  }
}

/* ============================================
   BOUTONS MODALES HARMONISÉS (NOUVEAU)
   ============================================ */

/* Bouton Supprimer "Doux" (Fond rouge pâle, texte rouge) */
.btn-danger-soft {
  background-color: #fef2f2;
  color: #ef4444;
  border: 1px solid transparent;
  padding: 8px 12px; /* Assure un padding correct */
  border-radius: 10px;
  cursor: pointer;
  font-weight: 600;
}
.btn-danger-soft:hover {
  background-color: #fee2e2;
  color: #dc2626;
  border-color: #fca5a5;
}

/* Bouton Primaire (Bleu solide) */
.btn-primary {
  background: linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);
  border: none;
  color: white;
}
.btn-primary:hover {
  background: linear-gradient(135deg, #2563eb 0%, #1d4ed8 100%);
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.2);
}

/* Bouton Annuler spécifique pour la modale */
.btn-cancel-modal {
  background: transparent;
  border: 1px solid transparent;
  color: #6b7280;
}
.btn-cancel-modal:hover {
  background-color: #f3f4f6;
  color: #111827;
}

/* Correction FORCEE pour aligner les boutons (Gauche / Droite) */
.modal-f {
  display: flex !important;
  justify-content: space-between !important; /* Ecarte : Supprimer à gauche <-> Reste à droite */
  align-items: center !important;
  flex-direction: row !important; /* Force la ligne même si le responsive veut une colonne */
  gap: 10px;
}

       /* ====================================
   TOOLTIPS POUR LES BOUTONS DE DEVIS
   ==================================== */

.btn-with-tooltip {
    position: relative;
    cursor: pointer;
}

.btn-with-tooltip::after {
    content: attr(data-tooltip);
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-8px);
    background-color: #1f2937;
    color: white;
    padding: 6px 12px;
    border-radius: 6px;
    font-size: var(--font-sm);
    font-weight: 500;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: var(--z-modal);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
}

.btn-with-tooltip::before {
    content: '';
    position: absolute;
    bottom: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(-2px);
    border: 5px solid transparent;
    border-top-color: #1f2937;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
    z-index: var(--z-modal);
}

.btn-with-tooltip:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(-12px);
}

.btn-with-tooltip:hover::before {
    opacity: 1;
    transform: translateX(-50%) translateY(-6px);
}

.btn-with-tooltip:hover {
    transform: scale(1.1);
    transition: transform 0.2s ease;
}

/* ============================================
   ♿ ACCESSIBILITÉ - FOCUS VISIBLE
   ============================================ */

/* Style de focus visible pour navigation clavier */
.focus-visible-ring:focus {
  outline: none;
}

.focus-visible-ring:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Focus spécifique pour les boutons */
button:focus-visible,
.btn:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(59, 130, 246, 0.2);
}

/* Focus pour les inputs */
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.15);
}

/* Skip link pour accessibilité clavier (caché visuellement sauf au focus) */
.skip-link {
  position: absolute;
  top: -40px;
  left: 0;
  background: #3b82f6;
  color: white;
  padding: 8px 16px;
  z-index: var(--z-notification);
  text-decoration: none;
  font-weight: bold;
  border-radius: 0 0 8px 0;
  transition: top 0.3s;
}

.skip-link:focus {
  top: 0;
}

/* Animation subtile pour indiquer le focus */
@keyframes focus-pulse {
  0%, 100% { box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2); }
  50% { box-shadow: 0 0 0 5px rgba(59, 130, 246, 0.1); }
}

.btn:focus-visible {
  animation: focus-pulse 1.5s ease-in-out infinite;
}

/* Focus pour navigation sidebar */
aside .nav button:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: -2px;
  border-radius: 6px;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.25);
}

/* Focus pour liens cliquables */
a:focus-visible {
  outline: 2px solid #3b82f6;
  outline-offset: 2px;
  border-radius: 3px;
}

/* ============================================
   🧩 UTILITAIRES CSS (remplacement styles inline JS)
   ============================================ */

/* Layout */
.u-flex { display: flex; }
.u-flex-col { display: flex; flex-direction: column; }
.u-flex-center { display: flex; align-items: center; justify-content: center; }
.u-flex-between { display: flex; align-items: center; justify-content: space-between; }
.u-items-center { align-items: center; }
.u-gap-4 { gap: 4px; }
.u-gap-8 { gap: 8px; }
.u-gap-10 { gap: 10px; }
.u-gap-12 { gap: 12px; }
.u-gap-16 { gap: 16px; }

/* Spacing */
.u-mt-4 { margin-top: 4px; }
.u-mt-8 { margin-top: 8px; }
.u-mt-12 { margin-top: 12px; }
.u-mt-16 { margin-top: 16px; }
.u-mt-24 { margin-top: 24px; }
.u-mb-4 { margin-bottom: 4px; }
.u-mb-8 { margin-bottom: 8px; }
.u-mb-12 { margin-bottom: 12px; }
.u-mb-16 { margin-bottom: 16px; }
.u-p-8 { padding: 8px; }
.u-p-12 { padding: 12px; }
.u-p-16 { padding: 16px; }

/* Cards */
.u-card {
  background: white;
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  border: 1px solid var(--gray-200);
}
body.dark-mode .u-card {
  background: var(--gray-800);
  border-color: var(--gray-700);
}

/* Icon badge (32x32 rond avec icône) */
.u-icon-badge {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: var(--font-lg);
  flex-shrink: 0;
}

/* Text */
.u-text-sm { font-size: var(--font-sm); }
.u-text-base { font-size: var(--font-base); }
.u-text-lg { font-size: var(--font-lg); }
.u-text-bold { font-weight: 600; }
.u-text-muted { color: var(--gray-500); }
.u-text-center { text-align: center; }
.u-hidden { display: none; }
.u-w-full { width: 100%; }

/* Status colors */
.u-bg-success { background: #dcfce7; color: #166534; }
.u-bg-warning { background: #fef3c7; color: #92400e; }
.u-bg-danger { background: #fee2e2; color: #991b1b; }
.u-bg-info { background: #dbeafe; color: #1e40af; }

/* Form label (common inline pattern) */
.u-form-label {
  display: block;
  font-size: var(--font-sm);
  font-weight: var(--fw-semibold);
  margin-bottom: 6px;
}
.u-form-label--success { color: var(--emerald-800); }
.u-form-label--warning { color: var(--warning-800); }
.u-form-label--info { color: var(--info-700); }

/* Common layout helpers */
.u-stack { display: flex; flex-direction: column; }
.u-inline { display: flex; align-items: center; }
.u-wrap { flex-wrap: wrap; }
.u-shrink-0 { flex-shrink: 0; }
.u-overflow-auto { overflow-y: auto; }
.u-truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.u-relative { position: relative; }
.u-sticky { position: sticky; top: 0; }

/* Color helpers */
.u-text-danger { color: var(--danger-600); }
.u-text-success { color: var(--success-600); }
.u-text-warning { color: var(--warning-600); }
.u-text-info { color: var(--info-600); }

/* Display */
.u-block { display: block; }
.u-inline-block { display: inline-block; }
.u-none { display: none; }
.u-flex-wrap { display: flex; flex-wrap: wrap; }

/* Positioning */
.u-absolute { position: absolute; }
.u-fixed { position: fixed; }

/* Additional spacing */
.u-m-0 { margin: 0; }
.u-mx-auto { margin-left: auto; margin-right: auto; }
.u-my-8 { margin-top: 8px; margin-bottom: 8px; }
.u-my-12 { margin-top: 12px; margin-bottom: 12px; }
.u-my-16 { margin-top: 16px; margin-bottom: 16px; }
.u-mb-0 { margin-bottom: 0; }
.u-mb-24 { margin-bottom: 24px; }
.u-ml-auto { margin-left: auto; }
.u-mr-8 { margin-right: 8px; }
.u-p-0 { padding: 0; }
.u-p-4 { padding: 4px; }
.u-p-24 { padding: 24px; }
.u-px-8 { padding-left: 8px; padding-right: 8px; }
.u-px-12 { padding-left: 12px; padding-right: 12px; }
.u-px-16 { padding-left: 16px; padding-right: 16px; }
.u-py-4 { padding-top: 4px; padding-bottom: 4px; }
.u-py-8 { padding-top: 8px; padding-bottom: 8px; }
.u-py-12 { padding-top: 12px; padding-bottom: 12px; }

/* Sizing */
.u-w-auto { width: auto; }
.u-h-full { height: 100%; }
.u-min-w-0 { min-width: 0; }
.u-max-w-full { max-width: 100%; }

/* Borders */
.u-border { border: 1px solid var(--gray-200); }
.u-border-b { border-bottom: 1px solid var(--gray-200); }
.u-border-t { border-top: 1px solid var(--gray-200); }
.u-rounded { border-radius: 8px; }
.u-rounded-lg { border-radius: 12px; }
.u-rounded-xl { border-radius: 16px; }
.u-rounded-full { border-radius: 9999px; }

/* Colors */
.u-text-white { color: white; }
.u-text-gray-500 { color: #6b7280; }
.u-text-gray-700 { color: #374151; }
.u-text-green-600 { color: #16a34a; }
.u-text-red-600 { color: #dc2626; }
.u-text-blue-600 { color: #2563eb; }
.u-bg-white { background: white; }
.u-bg-gray-50 { background: #f9fafb; }
.u-bg-gray-100 { background: #f3f4f6; }

/* Typography */
.u-text-xs { font-size: var(--font-xs); }
.u-text-xl { font-size: var(--font-xl); }
.u-text-2xl { font-size: var(--font-2xl); }
.u-fw-500 { font-weight: 500; }
.u-fw-600 { font-weight: 600; }
.u-fw-700 { font-weight: 700; }
.u-italic { font-style: italic; }
.u-text-left { text-align: left; }
.u-text-right { text-align: right; }
.u-uppercase { text-transform: uppercase; }
.u-no-wrap { white-space: nowrap; }
.u-line-clamp-2 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

/* Cursors & interactions */
.u-pointer { cursor: pointer; }
.u-no-select { user-select: none; }
.u-transition { transition: all 0.2s ease; }
.u-opacity-50 { opacity: 0.5; }
.u-opacity-70 { opacity: 0.7; }

/* Overflow */
.u-overflow-hidden { overflow: hidden; }
.u-overflow-x-auto { overflow-x: auto; }

/* Shadows */
.u-shadow-sm { box-shadow: 0 1px 2px rgba(0,0,0,0.05); }
.u-shadow { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.u-shadow-lg { box-shadow: 0 4px 16px rgba(0,0,0,0.12); }

/* Dark mode overrides for new utilities */
body.dark-mode .u-bg-white { background: #1e293b; }
body.dark-mode .u-bg-gray-50 { background: #1e293b; }
body.dark-mode .u-bg-gray-100 { background: #334155; }
body.dark-mode .u-border { border-color: #475569; }
body.dark-mode .u-border-b { border-bottom-color: #475569; }
body.dark-mode .u-border-t { border-top-color: #475569; }
body.dark-mode .u-text-gray-700 { color: #e2e8f0; }

/* Form inputs variant */
.u-input-field {
  width: 100%;
  padding: 10px 14px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: var(--font-base);
  background: var(--gray-50);
  resize: vertical;
  box-sizing: border-box;
}

/* ============================================
   📱 AMÉLIORATIONS MOBILE
   ============================================ */

/* Modales responsives sur mobile */
@media (max-width: 768px) {
  .modal-overlay .modal {
    max-width: 95vw !important;
    width: 95vw !important;
    margin: 10px;
    max-height: 90vh;
    overflow-y: auto;
  }

  .modal-h {
    padding: 16px !important;
    position: sticky;
    top: 0;
    background: inherit;
    z-index: var(--z-base);
  }

  .modal-b {
    padding: 16px !important;
  }

  .modal-f {
    padding: 16px !important;
    position: sticky;
    bottom: 0;
    background: inherit;
    border-top: 1px solid #e5e7eb;
  }

  /* Formulaires en colonnes sur mobile */
  .modal .two,
  .modal .grid-cols-2 {
    display: flex !important;
    flex-direction: column !important;
    gap: 12px !important;
  }

  /* Tables scrollables horizontalement (exclure FullCalendar) */
  .card table:not(.fc table),
  table.w-full:not(.fc table) {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

/* Boutons tactiles - Taille minimum 44px (Apple HIG) */
@media (max-width: 768px) {
  .btn,
  button,
  .nav button,
  select,
  input[type="submit"],
  input[type="button"] {
    min-height: 44px !important;
    min-width: 44px;
    padding: 12px 16px !important;
    font-size: var(--font-lg) !important; /* Évite le zoom sur iOS */
  }

  /* Inputs plus grands sur mobile */
  .input,
  input[type="text"],
  input[type="email"],
  input[type="number"],
  input[type="date"],
  input[type="tel"],
  select,
  textarea {
    min-height: 44px !important;
    padding: 12px !important;
    font-size: var(--font-lg) !important; /* Évite le zoom automatique sur iOS */
  }

  /* Espacements tactiles */
  .nav button {
    margin-bottom: 4px;
  }

  /* Actions des tableaux */
  .btn.text-xs {
    min-height: 36px !important;
    padding: 8px 12px !important;
  }
}

/* Header & Planning responsive sur mobile */
@media (max-width: 768px) {
  .header {
    padding: 12px 16px;
    gap: 8px;
    grid-template-columns: 1fr;
  }

  .header .h1 {
    font-size: var(--font-xl);
  }

  .header #toolbar {
    grid-column: 1;
    gap: 4px;
  }

  .planning-nav {
    flex: 1;
  }

  #calTitle {
    min-width: 120px !important;
    font-size: var(--font-base) !important;
  }

  .hide-mobile {
    display: none !important;
  }
}

/* Petit écran (iPhone SE, etc.) */
@media (max-width: 375px) {
  .modal-overlay .modal {
    max-width: 100vw !important;
    width: 100vw !important;
    margin: 0;
    border-radius: 0;
    min-height: 100vh;
    min-height: 100dvh;
  }

  .header {
    padding: 12px !important;
    flex-direction: column;
    gap: 8px;
  }

  .header .h1 {
    font-size: var(--font-xl) !important;
  }

  /* Stats en colonne unique */
  .stats,
  .grid.stats {
    grid-template-columns: 1fr !important;
  }
}

/* ─── Tablette (max 1024px) ─── */
@media (max-width: 1024px) {
  /* Dashboard : cartes stats en 2 colonnes */
  .dash-stats-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  /* Alertes dashboard en colonne */
  .dash-alerts-row {
    flex-direction: column !important;
  }

  .dash-alerts-row > * {
    width: 100% !important;
  }
}

/* ─── Mobile (max 768px) ─── */
@media (max-width: 768px) {
  /* Dashboard : cartes stats en colonne unique */
  .dash-stats-grid {
    grid-template-columns: 1fr !important;
  }

  /* Cartes élèves/parents en colonne */
  .grid.grid-cols-2 {
    grid-template-columns: 1fr !important;
  }

  /* Factures : masquer colonnes secondaires */
  .factures-table .hide-mobile-col {
    display: none !important;
  }

  /* Espacement réduit sur mobile */
  #content {
    padding: 8px !important;
  }

  /* Graphiques : largeur 100% */
  .chart-container,
  canvas {
    max-width: 100% !important;
  }
}

/* Animation pour le spinner des boutons */
@keyframes btn-spin {
  to { transform: rotate(360deg); }
}

.animate-spin {
  animation: btn-spin 1s linear infinite;
  display: inline-block;
}

/* ============================================
   🔧 LOGGER - Styles pour console customisée
   ============================================ */

/* Badge de version dans le coin */
.app-version-badge {
  position: fixed;
  bottom: 10px;
  left: 10px;
  background: rgba(0,0,0,0.6);
  color: white;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: var(--font-xs);
  font-family: monospace;
  z-index: var(--z-notification);
  pointer-events: none;
}

/* ============================================
   📐 MATH - Styles pour affichage mathématique
   ============================================ */

/* Fractions inline avec barre horizontale */
.math-frac {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
  margin: 0 3px;
  line-height: 1.1;
  text-align: center;
}

/* Numérateur */
.math-frac .num,
.math-frac sup {
  border-bottom: 1.5px solid currentColor;
  padding: 0 3px 2px 3px;
  font-size: 0.9em;
  display: block;
}

/* Dénominateur */
.math-frac .den,
.math-frac sub {
  padding: 2px 3px 0 3px;
  font-size: 0.9em;
  display: block;
}

/* Ajustement pour les fractions dans les options QCM */
.qcm-option .math-frac {
  font-size: 0.95em;
}

/* ============================================
   QCM OPTIONS - TEXTE VISIBLE SUR FOND BLANC
   Corrige le problème de texte blanc hérité des modales glassmorphism
   ============================================ */
.qcm-option-btn,
.qcm-option,
.qcm-option-btn *,
.qcm-option * {
  color: #1f2937 !important; /* text-gray-800 - toujours foncé */
}

.qcm-option-text {
  color: #1f2937 !important;
}

/* Labels avec fond blanc dans les modales glass */
.glass-modal-body label.bg-white,
.glass-modal-body .bg-white,
.glass-modal label.bg-white,
.glass-modal .bg-white {
  color: #1f2937 !important;
}

/* Tous les inputs/labels dans les modales qui ont un fond clair */
.glass-modal-body label,
.glass-modal-body input[type="radio"] + span,
.glass-modal-body input[type="checkbox"] + span {
  color: inherit;
}

/* Override spécifique pour les éléments avec bg-white */
[class*="bg-white"] {
  color: #1f2937;
}

/* S'assurer que le texte dans les boutons QCM reste visible */
button.qcm-option-btn {
  color: #1f2937 !important;
}

button.qcm-option-btn:hover {
  color: #1f2937 !important;
}

/* Options de QCM génériques */
.option-text {
  color: #1f2937 !important;
}

.option-label {
  color: #6b7280 !important; /* gray-500 */
  font-family: monospace;
  margin-right: 0.5rem;
}

/* MathJax dans les options QCM - forcer texte foncé */
.option-btn mjx-container,
.option-btn .MathJax,
.option-btn mjx-math,
.qcm-option-btn mjx-container,
.qcm-option-btn .MathJax,
.qcm-option mjx-container,
.qcm-option .MathJax,
.mathjax-content mjx-container,
.mathjax-content mjx-container *,
.mathjax-content .MathJax,
.mathjax-content .MathJax *,
.exercice-enonce mjx-container,
.exercice-enonce mjx-container *,
.correction-content mjx-container,
.correction-content mjx-container *,
.enonce-content mjx-container,
.enonce-content mjx-container * {
  color: #1f2937 !important;
}

/* Code dans les options QCM - toujours lisible */
.option-btn pre,
.option-btn code,
.qcm-option-btn pre,
.qcm-option-btn code,
.qcm-option pre,
.qcm-option code {
  background: #e2e8f0 !important;
  color: #1e293b !important;
  padding: 2px 6px;
  border-radius: 4px;
  font-family: Consolas, Monaco, 'Courier New', monospace;
  font-size: 0.9em;
}

/* Éléments MathJax dans les conteneurs avec fond blanc */
.bg-white mjx-container,
.bg-white .MathJax,
[class*="bg-white"] mjx-container,
[class*="bg-white"] .MathJax,
[class*="bg-gray-"] mjx-container,
[class*="bg-gray-"] .MathJax {
  color: #1f2937 !important;
}

/* Feedbacks et textes dans les QCM avec fond coloré */
.qcm-container .bg-green-100,
.qcm-container .bg-red-100,
.glass-modal .bg-green-100,
.glass-modal .bg-red-100 {
  color: #1f2937;
}

.qcm-container .text-green-700,
.qcm-container .text-red-700,
.qcm-container .text-gray-700,
.glass-modal .text-green-700,
.glass-modal .text-red-700,
.glass-modal .text-gray-700 {
  color: inherit !important;
}

/* Forcer les couleurs Tailwind dans les modales glass */
.glass-modal [class*="text-green-"] {
  color: #15803d !important; /* green-700 */
}
.glass-modal [class*="text-red-"] {
  color: #b91c1c !important; /* red-700 */
}
.glass-modal [class*="text-gray-7"] {
  color: #374151 !important; /* gray-700 */
}
.glass-modal [class*="text-gray-5"] {
  color: #6b7280 !important; /* gray-500 */
}

/* Exposants bien visibles */
sup {
  font-size: 0.75em;
  vertical-align: super;
  line-height: 0;
}

/* QCM - Amélioration de l'affichage des formules */
.qcm-question {
  font-size: 1.1rem;
  line-height: 1.8;
}

/* QCM - Blocs de code (algorithmes) toujours lisibles */
.qcm-question pre,
.qcm-question code,
.qcm-container pre,
.qcm-container code,
.glass-modal pre,
.glass-modal code {
  background: #f1f5f9 !important;
  color: #1e293b !important;
  font-family: Consolas, Monaco, 'Courier New', monospace;
}

/* Mode sombre - s'assurer que le code reste lisible */
body.eleve-mode .qcm-question pre,
body.eleve-mode .qcm-question code,
body.eleve-mode .qcm-container pre,
body.eleve-mode .glass-modal pre {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

.qcm-question sup,
.qcm-answer sup {
  font-size: 0.7em;
  font-weight: 600;
}

/* Dark mode pour les maths */
.dark .math-frac .num,
.dark .math-frac sup {
  border-color: #e5e7eb;
}

/* ============================================
   EXERCICES MATHÉMATIQUES - STYLE MATHJAX
   ============================================ */

/* Conteneur d'exercice avec MathJax */
.exercice-card {
  font-family: 'Source Sans Pro', 'Segoe UI', system-ui, sans-serif;
  font-size: 1.05rem;
  line-height: 1.75;
}

/* Énoncé des exercices */
.exercice-card .text-gray-700 {
  font-size: 1.08rem;
  line-height: 1.85;
  color: #374151;
}

/* Correction des exercices */
.exercice-card details .bg-orange-50 {
  font-size: 1.05rem;
  line-height: 1.9;
}

/* Ajustement MathJax inline */
.exercice-card .MathJax {
  font-size: 1.1em !important;
}

/* Ajustement MathJax display (formules centrées) */
.exercice-card mjx-container[display="true"] {
  margin: 0.8em 0 !important;
  font-size: 1.15em !important;
}

/* Formules dans les fiches méthodes - CRITIQUE pour éviter superposition */
.formule-math {
  display: block !important;
  overflow-wrap: break-word;
  word-wrap: break-word;
  word-break: break-word;
  min-height: 2.5em;
  line-height: 2.2 !important;
  position: relative;
  overflow-x: auto;
  white-space: normal !important;
}

/* MathJax inline dans les formules : autoriser le retour à la ligne entre fragments */
.formule-math mjx-container {
  display: inline-block !important;
  margin: 0.2em 0.1em !important;
  max-width: 100%;
  vertical-align: middle;
  overflow-wrap: break-word;
}

/* Empêcher les \text{} MathJax de créer des blocs trop larges */
.formule-math mjx-container[jax="CHTML"] {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Méthodes - conteneur des formules */
[class^="methode-content-"] .formule-math {
  display: block !important;
  padding: 0.5em 0;
  min-height: 3em;
}

/* S'assurer que mjx-container ne se superpose pas */
mjx-container {
  position: relative !important;
}

/* Modale méthode */
#methode-modal-container .formule-math {
  display: block !important;
  min-height: 3em;
  padding: 0.5em 0;
}

/* Empêcher le débordement horizontal des longues formules MathJax inline
   dans la modale méthode — uniquement sur .exemple-solution et .visuel-content
   où l'on peut avoir des layouts flex avec SVG + texte (cas Chasles, etc.).
   On évite d'appliquer overflow-x ailleurs car MathJax peut générer un léger
   débordement (quelques px) qui déclenche inutilement une scrollbar. */
#methode-modal-overlay .exemple-solution,
#methode-modal-overlay .visuel-content {
  overflow-x: auto;
  max-width: 100%;
}

/* Pour les flex children qui contiennent du MathJax (exemple-solution avec SVG
   à gauche et texte à droite), permettre au texte de réduire en dessous de
   sa largeur intrinsèque MathJax pour activer correctement overflow-x:auto */
#methode-modal-overlay .exemple-solution > .flex > div {
  min-width: 0;
}

/* Style pour les boîtes de résultats */
.exercice-card mjx-mstyle[mathvariant="bold"] {
  color: #c2410c;
}

/* Puces et numérotation */
.exercice-card .correction-step {
  margin-bottom: 1rem;
  padding-left: 1rem;
  border-left: 3px solid #fb923c;
}

/* Titres des parties de correction */
.exercice-card strong {
  color: #c2410c;
  font-weight: 700;
}

/* Style des listes dans les exercices */
.exercice-card ol,
.exercice-card ul {
  margin-left: 1.5rem;
  margin-top: 0.5rem;
  margin-bottom: 0.5rem;
}

.exercice-card li {
  margin-bottom: 0.4rem;
}

/* Amélioration visuelle des calculs étape par étape */
.exercice-card .math-step {
  display: block;
  margin: 0.3rem 0;
  padding-left: 1rem;
}

/* Résultats encadrés MathJax - couleur orange */
.exercice-card mjx-mrow mjx-menclose {
  border-color: #ea580c !important;
}

/* Espacement après les formules display */
.exercice-card br + mjx-container[display="true"],
mjx-container[display="true"] + br {
  margin-top: 0.5rem;
}

/* Dark mode pour exercices */
.dark .exercice-card .text-gray-700 {
  color: #e5e7eb;
}

.dark .exercice-card strong {
  color: #fb923c;
}

.dark .exercice-card .bg-orange-50 {
  background: rgba(251, 146, 60, 0.1) !important;
}

.dark .exercice-card mjx-menclose {
  border-color: #fb923c !important;
}

/* Tableaux dans les exercices - réduction des marges */
.exercice-card table {
  margin: 8px 0 !important;
  display: table;
}

/* Réduire l'espace avant/après les tableaux dans les énoncés */
.exercice-card br + table,
.text-gray-600 br + table,
.text-gray-700 br + table {
  margin-top: 4px !important;
}

/* Classe text-gray-600/text-gray-700 : réduire les marges pour les tableaux */
.text-gray-600 table,
.text-gray-700 table {
  margin: 8px 0 !important;
}

/* Forcer les tableaux à ne pas avoir d'espaces blancs parasites */
.exercice-card table,
.text-gray-600 table,
.text-gray-700 table {
  border-spacing: 0;
  empty-cells: show;
}

/* Supprimer les marges ajoutées par MathJax avant les tableaux */
.exercice-card mjx-container + table,
.text-gray-600 mjx-container + table,
.text-gray-700 mjx-container + table {
  margin-top: 8px !important;
}

/* ============================================
   TABLEAUX LARGES (Traces d'algorithme, etc.)
   ============================================ */

/* Container scrollable pour tableaux larges */
.exercice-card .table-wrapper,
.correction-content .table-wrapper {
  overflow-x: auto;
  max-width: 100%;
  margin: 8px 0;
}

/* Tableaux de trace d'algorithme - optimisés */
.exercice-card table,
.correction-content table {
  border-collapse: collapse;
  font-size: 0.85rem;
  white-space: nowrap;
  width: auto;
  min-width: auto;
  max-width: 100%;
}

/* Cellules compactes pour tableaux larges */
.exercice-card table td,
.exercice-card table th,
.correction-content table td,
.correction-content table th {
  padding: 4px 8px;
  white-space: nowrap;
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Tables de vocabulaire / contenu long : override des contraintes */
.vocab-table td,
.vocab-table th {
  max-width: none !important;
  white-space: normal !important;
  overflow: visible !important;
  text-overflow: unset !important;
}
.vocab-table td:first-child {
  font-weight: normal !important;
  background-color: transparent !important;
  color: inherit !important;
  text-align: left !important;
}

/* En-têtes de tableau - style distinctif */
.exercice-card table th,
.correction-content table th {
  background: linear-gradient(135deg, #4f7df3 0%, #3b5de7 100%);
  color: white;
  font-weight: 600;
  text-align: center;
  padding: 6px 10px;
}

/* Lignes alternées pour lisibilité */
.exercice-card table tr:nth-child(even),
.correction-content table tr:nth-child(even) {
  background-color: #f8fafc;
}

/* Bordures subtiles */
.exercice-card table td,
.exercice-card table th,
.correction-content table td,
.correction-content table th {
  border: 1px solid #e2e8f0;
}

/* Première colonne (labels) - style distinct */
.exercice-card table td:first-child,
.correction-content table td:first-child {
  font-weight: 600;
  background-color: #f1f5f9;
  color: #475569;
  text-align: center;
  min-width: 50px;
}

/* Dark mode pour tableaux */
.dark .exercice-card table th,
.dark .correction-content table th {
  background: linear-gradient(135deg, #4f7df3 0%, #3b5de7 100%);
}

.dark .exercice-card table tr:nth-child(even),
.dark .correction-content table tr:nth-child(even) {
  background-color: rgba(255, 255, 255, 0.05);
}

.dark .exercice-card table td:first-child,
.dark .correction-content table td:first-child {
  background-color: rgba(255, 255, 255, 0.1);
  color: #cbd5e1;
}

.dark .exercice-card table td,
.dark .exercice-card table th,
.dark .correction-content table td,
.dark .correction-content table th {
  border-color: #475569;
}

/* ============================================
   AMÉLIORATION MISE EN FORME ÉNONCÉS
   ============================================ */

/* Énoncé des exercices - aération */
.exercice-enonce {
  line-height: 1.8;
}

/* Paragraphes dans l'énoncé */
.exercice-enonce p {
  margin-bottom: 0.5rem;
}

/* Transformer les <br> consécutifs en petit espace vertical */
.exercice-enonce br + br {
  display: block;
  content: "";
  margin-top: 0.3rem;
}

/* Réduire l'espace avant les tableaux */
.exercice-enonce table {
  margin-top: 0.25rem !important;
  margin-bottom: 0.25rem !important;
}

/* Supprimer les <br> juste avant les tableaux */
.exercice-enonce br + table,
.exercice-enonce br + br + table {
  margin-top: 0.1rem !important;
}

/* Masquer les paragraphes vides avant les tableaux */
.exercice-enonce p:empty {
  display: none;
}

/* Supprimer la marge des paragraphes qui précèdent un tableau */
.exercice-enonce p:has(+ table),
.exercice-enonce p.before-table,
.exercice-enonce .before-table {
  margin-bottom: 0 !important;
  padding-bottom: 0 !important;
}

/* Réduire l'espace des tableaux qui suivent un paragraphe */
.exercice-enonce p + table {
  margin-top: 0.5rem !important;
}

/* Tableau sans marge (classe spécifique) */
table.no-margin-table,
.exercice-enonce table.no-margin-table,
.exercice-card table.no-margin-table,
.text-gray-600 table.no-margin-table,
.text-gray-700 table.no-margin-table {
  margin: 0 !important;
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

/* Espacement des listes à puces dans les énoncés */
.exercice-enonce p[class*="ml-4"] {
  margin-top: 0.4rem;
  margin-bottom: 0.2rem;
}

/* Les formules MathJax display ne doivent pas créer trop d'espace */
.exercice-enonce mjx-container[display="true"] {
  margin: 0.5em 0 !important;
}

/* Override prose class margins for tables */
.prose table,
.prose > table,
.enonce-content table,
.enonce-content > table,
div.prose table,
div.enonce-content table {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Supprimer les marges excessives créées par prose */
.prose :where(table):not(:where([class~="not-prose"] *)) {
  margin-top: 0.5rem !important;
  margin-bottom: 0.5rem !important;
}

/* Forcer les tableaux directement après du texte à ne pas avoir de grande marge */
.enonce-content > table:first-child,
.prose > table:first-child {
  margin-top: 0.25rem !important;
}

/* URGENT FIX: Forcer les tableaux dans enonce-content à ne pas avoir d'espace */
.enonce-content table {
  display: table !important;
  margin-top: 8px !important;
  margin-bottom: 8px !important;
}

/* Supprimer tout espace avant/après les div qui contiennent des tables */
.enonce-content > div:has(table) {
  margin: 0 !important;
  padding: 0 !important;
}

.enonce-content div[style*="margin-top"] table {
  margin-top: 0 !important;
}

/* Espace minimal entre les éléments */
.exercice-enonce > * + * {
  margin-top: 0.4rem;
}

/* Container SVG dans l'énoncé - espace réduit */
.exercice-enonce + .mt-3,
.exercice-enonce + div[class*="flex justify-center"] {
  margin-top: 0.75rem !important;
}

/* ============================================
   TOOLTIPS ÉLÉGANTS
   ============================================ */
[data-tooltip] {
  position: relative;
}

[data-tooltip]::before,
[data-tooltip]::after {
  position: absolute;
  opacity: 0;
  visibility: hidden;
  transition: all 0.2s ease;
  pointer-events: none;
  z-index: var(--z-notification);
}

/* Bulle du tooltip */
[data-tooltip]::before {
  content: attr(data-tooltip);
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 8px 12px;
  background: linear-gradient(135deg, #1e293b 0%, #334155 100%);
  color: #fff;
  font-size: var(--font-sm);
  font-weight: 500;
  white-space: nowrap;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25), 0 2px 4px rgba(0, 0, 0, 0.1);
}

/* Flèche du tooltip */
[data-tooltip]::after {
  content: '';
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  border: 6px solid transparent;
  border-top-color: #334155;
}

/* Afficher au survol */
[data-tooltip]:hover::before,
[data-tooltip]:hover::after {
  opacity: 1;
  visibility: visible;
  transform: translateX(-50%) translateY(0);
}

/* Variante tooltip en bas */
[data-tooltip-bottom]::before {
  bottom: auto;
  top: calc(100% + 8px);
  transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-bottom]::after {
  bottom: auto;
  top: calc(100% + 2px);
  border-top-color: transparent;
  border-bottom-color: #334155;
  transform: translateX(-50%) translateY(-4px);
}

[data-tooltip-bottom]:hover::before,
[data-tooltip-bottom]:hover::after {
  transform: translateX(-50%) translateY(0);
}

/* ============================================
   BLOCS DE CODE PYTHON (QCM Suites)
   ============================================ */
.python-code-block,
code.python-code-block,
pre.python-code-block {
  background: #e2e8f0 !important;
  padding: 4px 8px !important;
  border-radius: 4px !important;
  font-family: 'Consolas', 'Monaco', 'Courier New', monospace !important;
  font-size: 0.9em !important;
  margin: 0 !important;
  white-space: nowrap !important;
  text-align: left !important;
  color: #1e293b !important;
  display: inline-block !important;
  line-height: 1.4;
}

/* Assurer que le code est lisible même dans les boutons colorés */
.qcm-option-suites .python-code-block,
button .python-code-block,
.border-green-500 .python-code-block,
.border-red-500 .python-code-block,
.bg-green-50 .python-code-block,
.bg-red-50 .python-code-block {
  background: #e2e8f0 !important;
  color: #1e293b !important;
}

/* ============================================
   PASS MODULE - FICHES DE COURS
   ============================================ */

/* Onglets QCM/Fiches */
.pass-chapitre-tabs {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0;
  margin-bottom: 1.5rem;
}

.pass-tab {
  padding: 0.75rem 1.5rem;
  border-radius: 0.5rem 0.5rem 0 0;
  font-weight: 600;
  transition: all 0.2s ease;
  border: none;
  cursor: pointer;
  position: relative;
  bottom: -2px;
}

.pass-tab:not(.active) {
  background: #f3f4f6;
  color: #6b7280;
}

.pass-tab:not(.active):hover {
  background: #e5e7eb;
  color: #374151;
}

.pass-tab.active {
  background: #0d9488;
  color: white;
  border-bottom: 2px solid #0d9488;
}

/* Grille de fiches */
.pass-fiches-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 1rem;
}

/* Cartes fiches */
.pass-fiche-card {
  background: white;
  border-radius: 0.75rem;
  padding: 1.25rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  cursor: pointer;
  transition: all 0.2s ease;
  border-left: 4px solid #4CAF50;
}

.pass-fiche-card:hover {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  transform: translateY(-2px);
}

.pass-fiche-icon {
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: white;
  font-size: 1.25rem;
}

/* Contenu des fiches */
.pass-fiche-body {
  background: white;
  border-radius: 0.75rem;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  padding: 2rem;
}

.pass-fiche-content {
  line-height: 1.8;
  color: #374151;
}

.pass-fiche-content h1,
.pass-fiche-content h2,
.pass-fiche-content h3,
.pass-fiche-content h4 {
  color: #1f2937;
  margin-top: 1.5rem;
  margin-bottom: 0.75rem;
  font-weight: 600;
}

.pass-fiche-content h2 {
  font-size: 1.5rem;
  border-bottom: 2px solid #e5e7eb;
  padding-bottom: 0.5rem;
}

.pass-fiche-content h3 {
  font-size: 1.25rem;
  color: #0d9488;
}

.pass-fiche-content p {
  margin-bottom: 1rem;
}

.pass-fiche-content ul,
.pass-fiche-content ol {
  margin-left: 1.5rem;
  margin-bottom: 1rem;
}

.pass-fiche-content li {
  margin-bottom: 0.5rem;
}

/* Box Formule (bleu/violet) */
.pass-formule-box {
  background: linear-gradient(135deg, #ede9fe 0%, #e0e7ff 100%);
  border: 2px solid #a78bfa;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.pass-formule-box::before {
  content: '📐 Formule';
  position: absolute;
  top: -12px;
  left: 16px;
  background: #8b5cf6;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
}

.pass-formule-box .formula {
  font-size: 1.1rem;
  text-align: center;
  padding: 0.5rem;
}

/* Box Définition (vert) */
.pass-definition-box {
  background: linear-gradient(135deg, #d1fae5 0%, #dcfce7 100%);
  border: 2px solid #34d399;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.pass-definition-box::before {
  content: '📖 Définition';
  position: absolute;
  top: -12px;
  left: 16px;
  background: #10b981;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
}

/* Box Exemple (bleu clair) */
.pass-exemple-box {
  background: linear-gradient(135deg, #e0f2fe 0%, #dbeafe 100%);
  border: 2px solid #60a5fa;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.pass-exemple-box::before {
  content: '💡 Exemple';
  position: absolute;
  top: -12px;
  left: 16px;
  background: #3b82f6;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
}

/* Box Attention (orange/jaune) */
.pass-attention-box {
  background: linear-gradient(135deg, #fef3c7 0%, #fef9c3 100%);
  border: 2px solid #fbbf24;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.pass-attention-box::before {
  content: '⚠️ Attention';
  position: absolute;
  top: -12px;
  left: 16px;
  background: #f59e0b;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
}

/* Box Propriété (rose) */
.pass-propriete-box {
  background: linear-gradient(135deg, #fce7f3 0%, #fbcfe8 100%);
  border: 2px solid #f472b6;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.pass-propriete-box::before {
  content: '✨ Propriété';
  position: absolute;
  top: -12px;
  left: 16px;
  background: #ec4899;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
}

/* Box Théorème (teal) */
.pass-theoreme-box {
  background: linear-gradient(135deg, #ccfbf1 0%, #cffafe 100%);
  border: 2px solid #2dd4bf;
  border-radius: 0.75rem;
  padding: 1.25rem;
  margin: 1.5rem 0;
  position: relative;
}

.pass-theoreme-box::before {
  content: '📜 Théorème';
  position: absolute;
  top: -12px;
  left: 16px;
  background: #14b8a6;
  color: white;
  font-size: 0.75rem;
  font-weight: 600;
  padding: 2px 10px;
  border-radius: 4px;
}

/* Espacement pour les labels des box */
.pass-formule-box,
.pass-definition-box,
.pass-exemple-box,
.pass-attention-box,
.pass-propriete-box,
.pass-theoreme-box {
  padding-top: 1.75rem;
}

/* Note: Les styles d'impression pour cercles trigo sont dans le bloc @media print principal (lignes 968-1016) */

/* ============================================
   FIGURES BAC - CENTRAGE
   ============================================ */

.figure-bac {
  text-align: center;
  margin: 12px 0;
}

.figure-bac svg {
  display: inline-block;
  max-width: 100%;
}

/* ============================================
   CORRECTION TYPE BAC - STYLE RÉDACTION
   ============================================ */

.correction-bac {
  line-height: 1.5;
  font-size: 0.95rem;
  overflow-x: auto;
  max-width: 100%;
}

.correction-bac p {
  margin: 0.1rem 0 !important;
  padding: 0 !important;
  overflow-x: auto;
  max-width: 100%;
  text-align: left;
}

/* MathJax responsive dans toutes les corrections */
.correction-bac mjx-container,
.correction-bac .MathJax {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Conteneur de correction général */
.correction-content {
  overflow-x: auto;
  max-width: 100%;
  line-height: 1.5;
}

.correction-content mjx-container,
.correction-content .MathJax {
  max-width: 100% !important;
  overflow-x: auto !important;
}

/* Compactage des lignes mathématiques séparées par <br> dans les corrections.
   Sans ces règles, le `prose` de Tailwind (et les marges par défaut de MathJax)
   font ressembler chaque <br> à un saut de paragraphe. */
.correction-content mjx-container,
.correction-content mjx-container[jax="CHTML"],
.correction-content mjx-container[jax="CHTML"][display="false"] {
  margin: 0 !important;
  padding: 0 !important;
}
.correction-content > p,
.correction-content p:not(.question-title):not(.formule):not(.conclusion) {
  margin: 0 !important;
  padding: 0 !important;
}
.correction-content {
  line-height: 1.5 !important;
}

.correction-bac .question-title {
  color: #1d4ed8;
  font-size: 1.05rem;
  margin-top: 0.6rem !important;
  margin-bottom: 0.2rem !important;
  padding-bottom: 0.2rem;
  border-bottom: 2px solid #dbeafe;
}

.correction-bac .formule {
  background: #f0f9ff;
  border-left: 4px solid #3b82f6;
  padding: 0.3rem 0.8rem !important;
  margin: 0.4rem 0;
  border-radius: 0 8px 8px 0;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
  text-align: left;
}

.correction-bac .formule .MathJax,
.correction-bac .formule mjx-container {
  max-width: 100%;
  overflow-x: auto;
}

.correction-bac .conclusion {
  background: none;
  border: none;
  border-radius: 0;
  padding: 0.2rem 0 !important;
  margin: 0.3rem 0 !important;
  text-align: left;
  font-weight: 500;
  overflow-x: auto;
  max-width: 100%;
  box-sizing: border-box;
}

.correction-bac .conclusion + p,
.correction-bac .conclusion + div {
  text-align: left;
}

.correction-bac .conclusion .MathJax,
.correction-bac .conclusion mjx-container {
  max-width: 100%;
  overflow-x: auto;
  display: inline-block;
}

.correction-bac hr {
  border: none;
  border-top: 1px dashed #cbd5e1;
  margin: 1rem 0;
}

/* Aide au calcul - style bac */
.aide-calcul {
  background: #f8f9fa;
  border: 1px solid #dee2e6;
  border-radius: 4px;
  padding: 12px 16px;
  margin: 15px 0;
  font-size: 0.95em;
}

.aide-calcul strong {
  color: #495057;
}

/* Dark mode pour correction bac */
.dark .correction-bac .question-title {
  color: #60a5fa;
  border-bottom-color: #1e3a5f;
}

.dark .correction-bac .formule {
  background: rgba(59, 130, 246, 0.1);
  border-left-color: #60a5fa;
}

.dark .correction-bac .conclusion {
  background: none;
  border: none;
}

.dark .correction-bac hr {
  border-top-color: #475569;
}

.dark .aide-calcul {
  background: #1e293b;
  border-color: #334155;
}

.dark .aide-calcul strong {
  color: #94a3b8;
}

/* ============================================
   GLASSMORPHISM - INTERFACE ÉLÈVE MODERNE
   ============================================ */

/* Variables Glassmorphism */
:root {
  /* Palette Bleu/Violet Glassmorphism */
  --glass-primary: rgba(99, 102, 241, 0.8);
  --glass-secondary: rgba(139, 92, 246, 0.8);
  --glass-accent: rgba(236, 72, 153, 0.8);

  /* Effets Glass */
  --glass-bg: rgba(255, 255, 255, 0.15);
  --glass-bg-light: rgba(255, 255, 255, 0.25);
  --glass-bg-dark: rgba(15, 23, 42, 0.3);
  --glass-border: rgba(255, 255, 255, 0.2);
  --glass-border-light: rgba(255, 255, 255, 0.3);
  --glass-blur: blur(20px);
  --glass-blur-light: blur(10px);
  --glass-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
  --glass-shadow-lg: 0 16px 48px rgba(0, 0, 0, 0.15);

  /* Gradients Glassmorphism */
  --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  --gradient-secondary: linear-gradient(135deg, #f093fb 0%, #f5576c 100%);
  --gradient-card: linear-gradient(135deg, rgba(255,255,255,0.1) 0%, rgba(255,255,255,0.05) 100%);
  --gradient-bg-eleve: linear-gradient(135deg, #1a1a2e 0%, #16213e 50%, #0f3460 100%);
  --gradient-header: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);

  /* Gamification Colors */
  --xp-gold: #fbbf24;
  --xp-gold-glow: rgba(251, 191, 36, 0.5);
  --streak-orange: #f97316;
  --level-purple: #a855f7;
  --badge-green: #22c55e;
}

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

/* Carte Glass principale */
.glass-card {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid var(--glass-border);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-card:hover {
  background: var(--glass-bg-light);
  transform: translateY(-2px);
  box-shadow: var(--glass-shadow-lg);
}

/* Carte Glass sombre (pour fonds clairs) */
.glass-card-dark {
  background: var(--glass-bg-dark);
  backdrop-filter: var(--glass-blur);
  -webkit-backdrop-filter: var(--glass-blur);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  box-shadow: var(--glass-shadow);
}

/* Bouton Glass */
.glass-button {
  background: var(--glass-bg);
  backdrop-filter: var(--glass-blur-light);
  -webkit-backdrop-filter: var(--glass-blur-light);
  border: 1px solid var(--glass-border);
  border-radius: 12px;
  padding: 12px 24px;
  color: white;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.glass-button:hover {
  background: rgba(255, 255, 255, 0.25);
  transform: translateY(-2px);
  box-shadow: 0 10px 40px rgba(99, 102, 241, 0.3);
}

.glass-button:active {
  transform: translateY(0);
}

/* Input Glass */
.glass-input {
  background: rgba(255, 255, 255, 0.1);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  padding: 12px 16px;
  color: white;
  font-size: var(--font-base);
  transition: all 0.3s ease;
}

.glass-input::placeholder {
  color: rgba(255, 255, 255, 0.5);
}

.glass-input:focus {
  outline: none;
  border-color: rgba(255, 255, 255, 0.4);
  background: rgba(255, 255, 255, 0.15);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.2);
}

/* Badge Glass */
.glass-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: rgba(255, 255, 255, 0.15);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 600;
  color: white;
}

/* ============================================
   FOND ANIMÉ ESPACE ÉLÈVE
   ============================================ */

.eleve-app-bg {
  background: linear-gradient(-45deg, #1a1a2e, #16213e, #0f3460, #1a1a2e);
  background-size: 400% 400%;
  animation: gradientShift 15s ease infinite;
  min-height: 100vh;
  position: relative;
  overflow: hidden;
}

@keyframes gradientShift {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

/* Particules flottantes */
.eleve-particles {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  overflow: hidden;
  z-index: 0;
}

.eleve-particle {
  position: absolute;
  background: radial-gradient(circle, rgba(255,255,255,0.3) 0%, transparent 70%);
  border-radius: 50%;
  animation: floatParticle 20s infinite;
}

@keyframes floatParticle {
  0%, 100% {
    transform: translateY(100vh) rotate(0deg);
    opacity: 0;
  }
  10% {
    opacity: 1;
  }
  90% {
    opacity: 1;
  }
  100% {
    transform: translateY(-100px) rotate(720deg);
    opacity: 0;
  }
}

/* ============================================
   ANIMATIONS GLASSMORPHISM
   ============================================ */

/* Fade In Up */
@keyframes fadeInUp {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.animate-fadeInUp {
  animation: fadeInUp 0.5s ease forwards;
}

/* Staggered animations */
.animate-fadeInUp-1 { animation: fadeInUp 0.5s ease 0.1s forwards; opacity: 0; }
.animate-fadeInUp-2 { animation: fadeInUp 0.5s ease 0.2s forwards; opacity: 0; }
.animate-fadeInUp-3 { animation: fadeInUp 0.5s ease 0.3s forwards; opacity: 0; }
.animate-fadeInUp-4 { animation: fadeInUp 0.5s ease 0.4s forwards; opacity: 0; }
.animate-fadeInUp-5 { animation: fadeInUp 0.5s ease 0.5s forwards; opacity: 0; }

/* Pulse Glow */
@keyframes pulseGlow {
  0%, 100% {
    box-shadow: 0 0 20px rgba(99, 102, 241, 0.4);
  }
  50% {
    box-shadow: 0 0 40px rgba(99, 102, 241, 0.8);
  }
}

.animate-glow {
  animation: pulseGlow 2s infinite;
}

/* Float */
@keyframes float {
  0%, 100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}

.animate-float {
  animation: float 3s ease-in-out infinite;
}

/* Bounce In */
@keyframes bounceIn {
  0% {
    opacity: 0;
    transform: scale(0.3);
  }
  50% {
    opacity: 1;
    transform: scale(1.05);
  }
  70% {
    transform: scale(0.9);
  }
  100% {
    transform: scale(1);
  }
}

.animate-bounceIn {
  animation: bounceIn 0.6s cubic-bezier(0.68, -0.55, 0.265, 1.55);
}

/* Shimmer effect */
@keyframes shimmer {
  0% {
    background-position: -200% 0;
  }
  100% {
    background-position: 200% 0;
  }
}

.animate-shimmer {
  background: linear-gradient(
    90deg,
    rgba(255, 255, 255, 0) 0%,
    rgba(255, 255, 255, 0.3) 50%,
    rgba(255, 255, 255, 0) 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Spin Slow */
@keyframes spinSlow {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

.animate-spin-slow {
  animation: spinSlow 10s linear infinite;
}

/* Scale Pulse */
@keyframes scalePulse {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.05); }
}

.animate-scale-pulse {
  animation: scalePulse 2s ease-in-out infinite;
}

/* ============================================
   GAMIFICATION - XP, NIVEAU, STREAK
   ============================================ */

/* Barre XP */
.xp-bar {
  height: 8px;
  background: rgba(255, 255, 255, 0.2);
  border-radius: 4px;
  overflow: hidden;
  position: relative;
}

.xp-bar-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--xp-gold), #fcd34d);
  border-radius: 4px;
  transition: width 0.5s ease;
  position: relative;
}

.xp-bar-fill::after {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(255, 255, 255, 0.4) 50%,
    transparent 100%
  );
  background-size: 200% 100%;
  animation: shimmer 2s infinite;
}

/* Badge Niveau */
.level-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: linear-gradient(135deg, var(--level-purple), #7c3aed);
  border-radius: 50%;
  font-weight: 800;
  font-size: var(--font-lg);
  color: white;
  box-shadow: 0 4px 15px rgba(168, 85, 247, 0.4);
}

/* Badge Streak */
.streak-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: linear-gradient(135deg, var(--streak-orange), #ea580c);
  border-radius: 20px;
  font-weight: 700;
  font-size: var(--font-base);
  color: white;
  box-shadow: 0 4px 15px rgba(249, 115, 22, 0.4);
}

.streak-badge .streak-fire {
  font-size: var(--font-xl);
  animation: float 1s ease-in-out infinite;
}

/* Avatar Container */
.avatar-container {
  width: 80px;
  height: 80px;
  background: rgba(255, 255, 255, 0.2);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border: 3px solid rgba(255, 255, 255, 0.3);
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-4xl);
  animation: float 3s ease-in-out infinite;
  cursor: pointer;
  transition: all 0.3s ease;
}

.avatar-container:hover {
  transform: scale(1.1);
  border-color: rgba(255, 255, 255, 0.6);
  box-shadow: 0 0 30px rgba(99, 102, 241, 0.5);
}

/* Badge de récompense */
.achievement-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 16px;
  background: rgba(255, 255, 255, 0.1);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 12px;
  font-size: var(--font-base);
  color: white;
  transition: all 0.3s ease;
}

.achievement-badge:hover {
  background: rgba(255, 255, 255, 0.2);
  transform: scale(1.05);
}

.achievement-badge.earned {
  background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(16, 185, 129, 0.3));
  border-color: rgba(34, 197, 94, 0.5);
}

.achievement-badge.locked {
  opacity: 0.5;
  filter: grayscale(100%);
}

.achievement-badge .badge-icon {
  font-size: var(--font-xl);
}

/* ============================================
   WIDGETS RÉORGANISABLES
   ============================================ */

.widget-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.widget-card {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 20px;
  transition: all 0.3s ease;
  cursor: grab;
}

.widget-card:active {
  cursor: grabbing;
}

.widget-card.sortable-ghost {
  opacity: 0.4;
  background: rgba(99, 102, 241, 0.2);
}

.widget-card.sortable-chosen {
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  transform: scale(1.02);
}

.widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
}

.widget-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-weight: 700;
  font-size: var(--font-lg);
  color: white;
}

.widget-icon {
  font-size: var(--font-xl);
}

.widget-drag-handle {
  color: rgba(255, 255, 255, 0.3);
  cursor: grab;
  padding: 4px;
}

.widget-drag-handle:hover {
  color: rgba(255, 255, 255, 0.6);
}

/* ============================================
   CARTES THÈMES PÉDAGOGIQUES GLASSMORPHISM
   ============================================ */

.theme-card-glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 20px;
  padding: 24px;
  cursor: pointer;
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  position: relative;
  overflow: hidden;
}

.theme-card-glass::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--theme-color, linear-gradient(90deg, #667eea, #764ba2));
  opacity: 0;
  transition: opacity 0.3s ease;
}

.theme-card-glass:hover {
  background: rgba(255, 255, 255, 0.12);
  transform: translateY(-4px) scale(1.02);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
  border-color: rgba(255, 255, 255, 0.2);
}

.theme-card-glass:hover::before {
  opacity: 1;
}

.theme-icon-glass {
  width: 60px;
  height: 60px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-3xl);
  margin-bottom: 16px;
}

.theme-progress {
  height: 6px;
  background: rgba(255, 255, 255, 0.1);
  border-radius: 3px;
  margin: 12px 0;
  overflow: hidden;
}

.theme-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, #22c55e, #10b981);
  border-radius: 3px;
  transition: width 0.5s ease;
}

.theme-stats-glass {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
  margin-top: 12px;
}

.theme-stat {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: var(--font-sm);
  color: rgba(255, 255, 255, 0.7);
}

.theme-badge-new {
  position: absolute;
  top: 12px;
  right: 12px;
  padding: 4px 10px;
  background: linear-gradient(135deg, #f43f5e, #e11d48);
  border-radius: 12px;
  font-size: var(--font-sm);
  font-weight: 700;
  color: white;
  animation: scalePulse 2s ease-in-out infinite;
}

/* ============================================
   MODALE GLASSMORPHISM
   ============================================ */

.glass-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.6);
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-top);
  padding: 20px;
  animation: fadeIn 0.2s ease-out;
}

.glass-modal {
  background: linear-gradient(135deg, rgba(30, 41, 59, 0.9), rgba(15, 23, 42, 0.95));
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 24px;
  width: 100%;
  max-width: 800px;
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 25px 80px rgba(0, 0, 0, 0.5);
  animation: slideUp 0.3s ease-out;
}

@keyframes slideUp {
  from {
    opacity: 0;
    transform: translateY(30px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.glass-modal-header {
  padding: 24px;
  background: var(--gradient-header);
  border-radius: 24px 24px 0 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.glass-modal-header h3 {
  color: white;
  font-size: 1.25rem;
  font-weight: 700;
  margin: 0;
}

.glass-modal-close {
  width: 36px;
  height: 36px;
  background: rgba(255, 255, 255, 0.2);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: var(--font-xl);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s ease;
}

.glass-modal-close:hover {
  background: rgba(255, 255, 255, 0.3);
  transform: scale(1.1);
}

.glass-modal-body {
  padding: 24px;
  flex: 1;
  overflow-y: auto;
  color: rgba(255, 255, 255, 0.9);
}

.glass-modal-footer {
  padding: 20px 24px;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  display: flex;
  justify-content: flex-end;
  gap: 12px;
}

/* ============================================
   UPLOAD ZONE GLASSMORPHISM
   ============================================ */

.glass-upload-zone {
  border: 2px dashed rgba(255, 255, 255, 0.3);
  border-radius: 16px;
  padding: 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.3s ease;
  background: rgba(255, 255, 255, 0.05);
}

.glass-upload-zone:hover {
  border-color: rgba(99, 102, 241, 0.6);
  background: rgba(99, 102, 241, 0.1);
}

.glass-upload-zone.dragover {
  border-color: #22c55e;
  background: rgba(34, 197, 94, 0.1);
  transform: scale(1.02);
}

.glass-upload-icon {
  font-size: 48px;
  margin-bottom: 16px;
}

.glass-upload-text {
  color: rgba(255, 255, 255, 0.8);
  font-size: var(--font-lg);
  font-weight: 500;
}

.glass-upload-hint {
  color: rgba(255, 255, 255, 0.5);
  font-size: var(--font-base);
  margin-top: 8px;
}

/* ============================================
   CONFETTI ANIMATION
   ============================================ */

.confetti-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: var(--z-top);
  overflow: hidden;
}

.confetti {
  position: absolute;
  width: 10px;
  height: 10px;
  animation: confettiFall 3s ease-out forwards;
}

@keyframes confettiFall {
  0% {
    transform: translateY(-100px) rotate(0deg);
    opacity: 1;
  }
  100% {
    transform: translateY(100vh) rotate(720deg);
    opacity: 0;
  }
}

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

@media (max-width: 768px) {
  .widget-grid {
    grid-template-columns: 1fr;
  }

  .avatar-container {
    width: 60px;
    height: 60px;
    font-size: var(--font-3xl);
  }

  .glass-modal {
    max-height: 95vh;
    border-radius: 20px 20px 0 0;
    margin-top: auto;
  }

  .glass-modal-header {
    border-radius: 20px 20px 0 0;
    padding: 20px;
  }

  .theme-card-glass {
    padding: 16px;
  }

  .theme-icon-glass {
    width: 48px;
    height: 48px;
    font-size: var(--font-2xl);
  }
}

/* ============================================
   OVERRIDE POUR ESPACE ÉLÈVE
   ============================================ */

/* Quand body a la classe eleve-mode */
body.eleve-mode {
  background: var(--gradient-bg-eleve);
}

/* Mode sombre dans la vue élève : override du gradient clair
   IMPORTANT : cette règle doit apparaître APRÈS body.eleve-mode pour la surcharger */
body.eleve-mode.dark-mode {
  background: #0f172a !important;
  color: #f1f5f9 !important;
}

body.eleve-mode .app {
  background: transparent;
}

body.eleve-mode aside {
  background: rgba(15, 23, 42, 0.8);
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
  border-right-color: rgba(255, 255, 255, 0.1);
}

body.eleve-mode aside .brand {
  color: white;
}

body.eleve-mode aside .nav button {
  color: rgba(255, 255, 255, 0.7);
}

body.eleve-mode aside .nav button.active {
  background: rgba(99, 102, 241, 0.3);
  color: white;
}

body.eleve-mode aside .nav button:hover {
  background: rgba(255, 255, 255, 0.1);
  color: white;
}

body.eleve-mode main {
  background: transparent;
}

body.eleve-mode .header .h1 {
  color: white;
}

/* Mode élève : texte blanc SAUF dans les conteneurs à fond blanc */
body.eleve-mode #content {
  color: white;
}

/* Override text-gray sur fond sombre en mode élève.
   IMPORTANT : ces règles doivent venir AVANT .bg-white * pour que
   .bg-white * (même spécificité, mais plus tard) les surcharge dans les cartes. */
body.eleve-mode #content .text-gray-500 { color: #94a3b8 !important; }
body.eleve-mode #content .text-gray-600 { color: #cbd5e1 !important; }
body.eleve-mode #content .text-gray-700 { color: #e2e8f0 !important; }
body.eleve-mode #content .text-gray-800 { color: #f1f5f9 !important; }
body.eleve-mode #content .text-gray-900 { color: #f8fafc !important; }

/* IMPORTANT: Forcer texte NOIR dans TOUS les éléments à fond blanc */
body.eleve-mode #content .bg-white,
body.eleve-mode #content .bg-white *,
body.eleve-mode #content .bg-white *::before,
body.eleve-mode #content .bg-white *::after {
  color: #1f2937 !important;
}

/* IMPORTANT : Forcer texte NOIR dans TOUS les fonds clairs Tailwind *-50 et *-100
   (corrections bg-green-50, indications bg-yellow-50, blocs Exemple bg-teal-50,
   blocs À retenir bg-amber-50, cartes fiches cours, etc.)
   En mode élève (LIGHT), la règle body.eleve-mode #content { color: white }
   cascade vers ces conteneurs et rend le texte invisible.
   Ces overrides rétablissent un texte lisible dans les corrections et blocs pédagogiques.
   NOTE : exclut body.dark-mode (en dark-mode les mêmes classes ont un fond sombre
   et doivent conserver du texte clair). */
body:not(.dark-mode).eleve-mode #content .bg-green-50,
body:not(.dark-mode).eleve-mode #content .bg-green-50 *,
body:not(.dark-mode).eleve-mode #content .bg-green-100,
body:not(.dark-mode).eleve-mode #content .bg-green-100 *,
body:not(.dark-mode).eleve-mode #content .bg-yellow-50,
body:not(.dark-mode).eleve-mode #content .bg-yellow-50 *,
body:not(.dark-mode).eleve-mode #content .bg-yellow-100,
body:not(.dark-mode).eleve-mode #content .bg-yellow-100 *,
body:not(.dark-mode).eleve-mode #content .bg-blue-50,
body:not(.dark-mode).eleve-mode #content .bg-blue-50 *,
body:not(.dark-mode).eleve-mode #content .bg-blue-100,
body:not(.dark-mode).eleve-mode #content .bg-blue-100 *,
body:not(.dark-mode).eleve-mode #content .bg-red-50,
body:not(.dark-mode).eleve-mode #content .bg-red-50 *,
body:not(.dark-mode).eleve-mode #content .bg-red-100,
body:not(.dark-mode).eleve-mode #content .bg-red-100 *,
body:not(.dark-mode).eleve-mode #content .bg-orange-50,
body:not(.dark-mode).eleve-mode #content .bg-orange-50 *,
body:not(.dark-mode).eleve-mode #content .bg-orange-100,
body:not(.dark-mode).eleve-mode #content .bg-orange-100 *,
body:not(.dark-mode).eleve-mode #content .bg-amber-50,
body:not(.dark-mode).eleve-mode #content .bg-amber-50 *,
body:not(.dark-mode).eleve-mode #content .bg-amber-100,
body:not(.dark-mode).eleve-mode #content .bg-amber-100 *,
body:not(.dark-mode).eleve-mode #content .bg-purple-50,
body:not(.dark-mode).eleve-mode #content .bg-purple-50 *,
body:not(.dark-mode).eleve-mode #content .bg-purple-100,
body:not(.dark-mode).eleve-mode #content .bg-purple-100 *,
body:not(.dark-mode).eleve-mode #content .bg-indigo-50,
body:not(.dark-mode).eleve-mode #content .bg-indigo-50 *,
body:not(.dark-mode).eleve-mode #content .bg-indigo-100,
body:not(.dark-mode).eleve-mode #content .bg-indigo-100 *,
body:not(.dark-mode).eleve-mode #content .bg-cyan-50,
body:not(.dark-mode).eleve-mode #content .bg-cyan-50 *,
body:not(.dark-mode).eleve-mode #content .bg-cyan-100,
body:not(.dark-mode).eleve-mode #content .bg-cyan-100 *,
body:not(.dark-mode).eleve-mode #content .bg-teal-50,
body:not(.dark-mode).eleve-mode #content .bg-teal-50 *,
body:not(.dark-mode).eleve-mode #content .bg-teal-100,
body:not(.dark-mode).eleve-mode #content .bg-teal-100 *,
body:not(.dark-mode).eleve-mode #content .bg-emerald-50,
body:not(.dark-mode).eleve-mode #content .bg-emerald-50 *,
body:not(.dark-mode).eleve-mode #content .bg-emerald-100,
body:not(.dark-mode).eleve-mode #content .bg-emerald-100 *,
body:not(.dark-mode).eleve-mode #content .bg-pink-50,
body:not(.dark-mode).eleve-mode #content .bg-pink-50 *,
body:not(.dark-mode).eleve-mode #content .bg-pink-100,
body:not(.dark-mode).eleve-mode #content .bg-pink-100 *,
body:not(.dark-mode).eleve-mode #content .bg-rose-50,
body:not(.dark-mode).eleve-mode #content .bg-rose-50 *,
body:not(.dark-mode).eleve-mode #content .bg-rose-100,
body:not(.dark-mode).eleve-mode #content .bg-rose-100 *,
body:not(.dark-mode).eleve-mode #content .bg-sky-50,
body:not(.dark-mode).eleve-mode #content .bg-sky-50 *,
body:not(.dark-mode).eleve-mode #content .bg-sky-100,
body:not(.dark-mode).eleve-mode #content .bg-sky-100 *,
body:not(.dark-mode).eleve-mode #content .bg-slate-50,
body:not(.dark-mode).eleve-mode #content .bg-slate-50 *,
body:not(.dark-mode).eleve-mode #content .bg-slate-100,
body:not(.dark-mode).eleve-mode #content .bg-slate-100 *,
body:not(.dark-mode).eleve-mode #content .bg-gray-50,
body:not(.dark-mode).eleve-mode #content .bg-gray-50 *,
body:not(.dark-mode).eleve-mode #content .bg-gray-100,
body:not(.dark-mode).eleve-mode #content .bg-gray-100 *,
body:not(.dark-mode).eleve-mode #content .bg-lime-50,
body:not(.dark-mode).eleve-mode #content .bg-lime-50 *,
body:not(.dark-mode).eleve-mode #content .bg-violet-50,
body:not(.dark-mode).eleve-mode #content .bg-violet-50 *,
body:not(.dark-mode).eleve-mode #content .bg-fuchsia-50,
body:not(.dark-mode).eleve-mode #content .bg-fuchsia-50 * {
  color: #1f2937 !important;
}

/* Restaurer les couleurs Tailwind typographiques sémantiques à l'intérieur de ces fonds clairs
   (ex: text-green-700 dans .bg-green-50 doit rester vert foncé, pas #1f2937).
   On privilégie les couleurs d'origine pour les titres/labels qui utilisent text-*-600/700/800. */
body:not(.dark-mode).eleve-mode #content .bg-green-50 .text-green-500,
body:not(.dark-mode).eleve-mode #content .bg-green-50 .text-green-600,
body:not(.dark-mode).eleve-mode #content .bg-green-50 .text-green-700,
body:not(.dark-mode).eleve-mode #content .bg-green-50 .text-green-800,
body:not(.dark-mode).eleve-mode #content .bg-green-100 .text-green-600,
body:not(.dark-mode).eleve-mode #content .bg-green-100 .text-green-700,
body:not(.dark-mode).eleve-mode #content .bg-green-100 .text-green-800 { color: #15803d !important; }
body:not(.dark-mode).eleve-mode #content .bg-yellow-50 .text-yellow-600,
body:not(.dark-mode).eleve-mode #content .bg-yellow-50 .text-yellow-700,
body:not(.dark-mode).eleve-mode #content .bg-yellow-50 .text-yellow-800,
body:not(.dark-mode).eleve-mode #content .bg-yellow-100 .text-yellow-700,
body:not(.dark-mode).eleve-mode #content .bg-yellow-100 .text-yellow-800 { color: #a16207 !important; }
body:not(.dark-mode).eleve-mode #content .bg-blue-50 .text-blue-600,
body:not(.dark-mode).eleve-mode #content .bg-blue-50 .text-blue-700,
body:not(.dark-mode).eleve-mode #content .bg-blue-50 .text-blue-800,
body:not(.dark-mode).eleve-mode #content .bg-blue-100 .text-blue-700,
body:not(.dark-mode).eleve-mode #content .bg-blue-100 .text-blue-800 { color: #1d4ed8 !important; }
body:not(.dark-mode).eleve-mode #content .bg-red-50 .text-red-600,
body:not(.dark-mode).eleve-mode #content .bg-red-50 .text-red-700,
body:not(.dark-mode).eleve-mode #content .bg-red-50 .text-red-800 { color: #b91c1c !important; }
body:not(.dark-mode).eleve-mode #content .bg-orange-50 .text-orange-600,
body:not(.dark-mode).eleve-mode #content .bg-orange-50 .text-orange-700 { color: #c2410c !important; }
body:not(.dark-mode).eleve-mode #content .bg-amber-50 .text-amber-600,
body:not(.dark-mode).eleve-mode #content .bg-amber-50 .text-amber-700,
body:not(.dark-mode).eleve-mode #content .bg-amber-50 .text-amber-800 { color: #b45309 !important; }
body:not(.dark-mode).eleve-mode #content .bg-purple-50 .text-purple-600,
body:not(.dark-mode).eleve-mode #content .bg-purple-50 .text-purple-700,
body:not(.dark-mode).eleve-mode #content .bg-purple-50 .text-purple-800 { color: #6b21a8 !important; }
body:not(.dark-mode).eleve-mode #content .bg-indigo-50 .text-indigo-600,
body:not(.dark-mode).eleve-mode #content .bg-indigo-50 .text-indigo-700,
body:not(.dark-mode).eleve-mode #content .bg-indigo-50 .text-indigo-800 { color: #3730a3 !important; }
body:not(.dark-mode).eleve-mode #content .bg-cyan-50 .text-cyan-600,
body:not(.dark-mode).eleve-mode #content .bg-cyan-50 .text-cyan-700,
body:not(.dark-mode).eleve-mode #content .bg-cyan-50 .text-cyan-800 { color: #0e7490 !important; }
body:not(.dark-mode).eleve-mode #content .bg-teal-50 .text-teal-600,
body:not(.dark-mode).eleve-mode #content .bg-teal-50 .text-teal-700,
body:not(.dark-mode).eleve-mode #content .bg-teal-50 .text-teal-800 { color: #0f766e !important; }
body:not(.dark-mode).eleve-mode #content .bg-pink-50 .text-pink-600,
body:not(.dark-mode).eleve-mode #content .bg-pink-50 .text-pink-700 { color: #be185d !important; }
body:not(.dark-mode).eleve-mode #content .bg-sky-50 .text-sky-600,
body:not(.dark-mode).eleve-mode #content .bg-sky-50 .text-sky-700 { color: #0369a1 !important; }

/* Exception : code blocks / pre dans ces fonds clairs gardent leur texte clair
   (les pre ont typiquement leur propre background sombre) */
body:not(.dark-mode).eleve-mode #content .bg-green-50 pre,
body:not(.dark-mode).eleve-mode #content .bg-green-50 pre *,
body:not(.dark-mode).eleve-mode #content .bg-yellow-50 pre,
body:not(.dark-mode).eleve-mode #content .bg-yellow-50 pre *,
body:not(.dark-mode).eleve-mode #content .bg-blue-50 pre,
body:not(.dark-mode).eleve-mode #content .bg-blue-50 pre *,
body:not(.dark-mode).eleve-mode #content .bg-red-50 pre,
body:not(.dark-mode).eleve-mode #content .bg-red-50 pre *,
body:not(.dark-mode).eleve-mode #content .bg-amber-50 pre,
body:not(.dark-mode).eleve-mode #content .bg-amber-50 pre * {
  color: #e2e8f0 !important;
}

/* EXCEPTION: Code blocks dans les QCM doivent garder du texte clair sur fond sombre */
body.eleve-mode #content .bg-white pre,
body.eleve-mode #content .bg-white pre *,
body.eleve-mode #content .bg-white pre code,
body.eleve-mode #content .bg-white .python-code,
body.eleve-mode #content .bg-white .python-code *,
body.eleve-mode #content .bg-white .algo-code,
body.eleve-mode #content .bg-white .algo-code *,
body.eleve-mode #content #quiz-options pre,
body.eleve-mode #content #quiz-options pre *,
body.eleve-mode #content #quiz-options code,
body.eleve-mode #content #options-container pre,
body.eleve-mode #content #options-container pre *,
body.eleve-mode #content #options-container code {
  color: #e2e8f0 !important;
}

/* Boutons d'option QCM - texte noir */
body.eleve-mode #content .option-btn,
body.eleve-mode #content .option-btn * {
  color: #1f2937 !important;
}

/* EXCEPTION: code blocks inside option-btn must keep light text */
body.eleve-mode #content .option-btn pre,
body.eleve-mode #content .option-btn pre *,
body.eleve-mode #content .option-btn code {
  color: #e2e8f0 !important;
}

/* Conteneur des options QCM */
body.eleve-mode #content #options-container,
body.eleve-mode #content #options-container * {
  color: #1f2937 !important;
}

/* EXCEPTION: code blocks inside options-container must keep light text */
body.eleve-mode #content #options-container pre,
body.eleve-mode #content #options-container pre *,
body.eleve-mode #content #options-container code {
  color: #e2e8f0 !important;
}

/* Garder les badges de lettre (A, B, C, D) avec leur style */
body.eleve-mode .option-btn .bg-gray-100 {
  color: #4b5563 !important; /* gray-600 */
}

/* ═══════════════════════════════════════════════════════════════
   FIX: Mode nuit élève (dark-mode + eleve-mode)
   En dark-mode, .bg-white a un fond SOMBRE (#1e293b).
   Les règles eleve-mode ci-dessus forcent du texte SOMBRE → invisible.
   On rétablit ici du texte CLAIR quand les deux modes sont actifs.
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode.eleve-mode #content .bg-white,
body.dark-mode.eleve-mode #content .bg-white *,
body.dark-mode.eleve-mode #content .bg-white *::before,
body.dark-mode.eleve-mode #content .bg-white *::after {
  color: #e2e8f0 !important;
}

body.dark-mode.eleve-mode #content .option-btn,
body.dark-mode.eleve-mode #content .option-btn * {
  color: #e2e8f0 !important;
}

body.dark-mode.eleve-mode #content #options-container,
body.dark-mode.eleve-mode #content #options-container * {
  color: #e2e8f0 !important;
}

/* En dark-mode + eleve-mode, les badges de lettre restent visibles */
body.dark-mode.eleve-mode .option-btn .bg-gray-100 {
  color: #94a3b8 !important;
  background-color: #334155 !important;
}

/* COURS & FICHES ÉLÈVE - Réinitialiser les couleurs dans les conteneurs */
/* Les cours et fiches ont des fonds clairs, donc le texte doit être sombre par défaut */
body.eleve-mode #content [class*="cours-"],
body.eleve-mode #content [class*="fiche-"],
body.eleve-mode #content .print-content,
body.eleve-mode #content .cours-content {
  color: #1f2937 !important;
}

/* MathJax dans les cours/fiches élève - hériter la couleur du parent */
body.eleve-mode #content [class*="cours-"] .MathJax,
body.eleve-mode #content [class*="cours-"] mjx-container,
body.eleve-mode #content [class*="cours-"] mjx-math,
body.eleve-mode #content [class*="fiche-"] .MathJax,
body.eleve-mode #content [class*="fiche-"] mjx-container,
body.eleve-mode #content [class*="fiche-"] mjx-math {
  color: inherit !important;
}

/* SVG foreignObject - les div à l'intérieur doivent aussi hériter */
body.eleve-mode #content [class*="cours-"] foreignObject div,
body.eleve-mode #content [class*="fiche-"] foreignObject div {
  color: inherit !important;
}

/* MathJax dans les SVG foreignObject des fiches - forcer couleur sombre */
body.eleve-mode #content [class*="fiche-"] foreignObject .MathJax,
body.eleve-mode #content [class*="fiche-"] foreignObject mjx-container,
body.eleve-mode #content [class*="fiche-"] foreignObject mjx-math {
  color: #1f2937 !important;
}

/* ============================================
   NOTIFICATIONS PROF
   ============================================ */

.notif-bell {
  position: relative;
  cursor: pointer;
  padding: 8px;
  border-radius: 50%;
  transition: all 0.2s ease;
}

.notif-bell:hover {
  background: rgba(99, 102, 241, 0.1);
}

.notif-badge {
  position: absolute;
  top: 0;
  right: 0;
  min-width: 18px;
  height: 18px;
  background: #ef4444;
  color: white;
  font-size: var(--font-sm);
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: scalePulse 2s ease-in-out infinite;
}

.notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 360px;
  max-height: 480px;
  background: white;
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  z-index: var(--z-modal);
  animation: slideUp 0.2s ease-out;
  display: flex;
  flex-direction: column;
}

.notif-header {
  padding: 16px;
  border-bottom: 1px solid #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.notif-header h4 {
  font-weight: 700;
  font-size: var(--font-lg);
  color: #1f2937;
  margin: 0;
}

.notif-list {
  flex: 1 1 auto;
  min-height: 0;
  overflow-y: auto;
}

.notif-footer {
  flex-shrink: 0;
}

.notif-item {
  padding: 14px 16px;
  border-bottom: 1px solid #f9fafb;
  display: flex;
  gap: 12px;
  cursor: pointer;
  transition: background 0.2s ease;
}

.notif-item:hover {
  background: #f9fafb;
}

.notif-item.unread {
  background: #eff6ff;
}

.notif-item.unread:hover {
  background: #dbeafe;
}

.notif-icon {
  width: 40px;
  height: 40px;
  background: #f3f4f6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-xl);
  flex-shrink: 0;
}

.notif-content {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-weight: 600;
  font-size: var(--font-base);
  color: #1f2937;
  margin-bottom: 2px;
}

.notif-body {
  font-size: var(--font-sm);
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.notif-time {
  font-size: var(--font-sm);
  color: #9ca3af;
  margin-top: 4px;
}

/* Dark mode notifications */
.dark .notif-dropdown {
  background: #1f2937;
  border-color: #374151;
}

.dark .notif-header {
  border-bottom-color: #374151;
}

.dark .notif-header h4 {
  color: #f3f4f6;
}

.dark .notif-item {
  border-bottom-color: #374151;
}

.dark .notif-item:hover {
  background: #374151;
}

.dark .notif-item.unread {
  background: rgba(59, 130, 246, 0.15);
}

.dark .notif-icon {
  background: #374151;
}

.dark .notif-title {
  color: #f3f4f6;
}

.dark .notif-body {
  color: #9ca3af;
}

/* ============================================
   NOTIFICATIONS ÉLÈVE (Glassmorphism)
   ============================================ */

.eleve-notif-bell {
  cursor: pointer;
  transition: transform 0.2s ease;
}

.eleve-notif-bell:hover {
  transform: scale(1.1);
}

.eleve-notif-count {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 18px;
  height: 18px;
  background: #ef4444;
  color: white;
  font-size: var(--font-xs);
  font-weight: 700;
  border-radius: 9px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  animation: pulse-glow 2s ease-in-out infinite;
}

.eleve-notif-dropdown {
  position: absolute;
  top: 100%;
  right: 0;
  width: 320px;
  max-height: 400px;
  background: rgba(30, 41, 59, 0.95);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  border: 1px solid rgba(255, 255, 255, 0.1);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.4);
  overflow: hidden;
  z-index: var(--z-modal);
  animation: slideUp 0.2s ease-out;
  margin-top: 8px;
}

.eleve-notif-item {
  padding: 12px 16px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  cursor: pointer;
  transition: background 0.2s ease;
}

.eleve-notif-item:hover {
  background: rgba(255, 255, 255, 0.05);
}

.eleve-notif-item.unread {
  background: rgba(99, 102, 241, 0.15);
}

.eleve-notif-item:last-child {
  border-bottom: none;
}

/* ============================================
   STYLES FACTURES - RECHERCHE ET TRI
   (Consolidé depuis factures-styles-addon.css)
   ============================================ */

/* Barre de recherche factures */
#search-factures {
  width: 100%;
  padding: 10px 15px;
  font-size: var(--font-base);
  border: 2px solid #e5e7eb;
  border-radius: 10px;
  transition: all 0.3s;
}

#search-factures:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

/* Suggestions d'autocomplétion factures */
#search-suggestions {
  position: absolute;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
  max-height: 200px;
  overflow-y: auto;
  z-index: var(--z-modal);
  margin-top: 2px;
  width: calc(100% - 8px);
}

.suggestion-item {
  padding: 10px 15px;
  cursor: pointer;
  transition: background 0.2s;
  border-bottom: 1px solid #f3f4f6;
}

.suggestion-item:last-child {
  border-bottom: none;
}

.suggestion-item:hover {
  background: #eff6ff;
  color: #1d4ed8;
}

/* Boutons de tri actifs */
.btn-active {
  background: #3b82f6;
  color: white;
  border-color: #2563eb;
  font-weight: 700;
}

.btn-active:hover {
  background: #2563eb;
}

/* Animation pour les lignes de facture */
.facture-row {
  animation: fadeIn 0.2s ease-out;
}

.facture-row:hover {
  background: #f9fafb;
}

/* Mode sombre - Factures */
body.dark-mode #search-factures {
  background: #374151;
  border-color: #4b5563;
  color: #f9fafb;
}

body.dark-mode #search-factures:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.2);
}

body.dark-mode #search-suggestions {
  background: #1f2937;
  border-color: #374151;
}

body.dark-mode .suggestion-item {
  border-bottom-color: #374151;
}

body.dark-mode .suggestion-item:hover {
  background: #374151;
  color: #60a5fa;
}

/* ============================================
   CARTES ELEVES V2 — Design moderne
   ============================================ */
.eleve-card-v2 {
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 14px;
  padding: 18px;
  cursor: pointer;
  transition: all 0.2s ease;
  position: relative;
}
.eleve-card-v2:hover {
  border-color: #a5b4fc;
  box-shadow: 0 4px 20px rgba(99,102,241,0.10);
  transform: translateY(-2px);
}
.eleve-card-top {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
}
.eleve-card-avatar {
  width: 42px;
  height: 42px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: var(--font-lg);
  color: white;
  flex-shrink: 0;
  letter-spacing: 0.5px;
}
.eleve-card-identity {
  flex: 1;
  min-width: 0;
}
.eleve-card-name {
  font-weight: 700;
  font-size: var(--font-lg);
  color: #1e1b4b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eleve-card-niveau {
  font-size: var(--font-sm);
  color: #6366f1;
  font-weight: 500;
  margin-top: 1px;
}
.eleve-status-badge {
  font-size: var(--font-xs);
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 6px;
  white-space: nowrap;
  flex-shrink: 0;
}
.eleve-status-active { background: #d1fae5; color: #065f46; }
.eleve-status-pending { background: #fef3c7; color: #92400e; }
.eleve-status-expired { background: #fee2e2; color: #991b1b; }
.eleve-status-none { background: #f3f4f6; color: #9ca3af; }

.eleve-card-details {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
  min-height: 24px;
}
.eleve-card-detail {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: var(--font-sm);
  color: #6b7280;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.eleve-card-detail-icon {
  width: 18px;
  height: 18px;
  border-radius: 5px;
  background: #f3f4f6;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 9px;
  font-weight: 700;
  color: #9ca3af;
  flex-shrink: 0;
}
.eleve-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: 12px;
  border-top: 1px solid #f3f4f6;
}
.eleve-card-stat {
  font-size: var(--font-sm);
  font-weight: 700;
  color: #6366f1;
  background: #eef2ff;
  padding: 3px 10px;
  border-radius: 6px;
}
.eleve-card-date {
  font-size: var(--font-sm);
  color: #9ca3af;
}

/* ============================================
   MODALE FICHE ELEVE V2 — Design Premium
   ============================================ */
.eleve-modal-v2 {
  max-width: 960px;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  border-radius: 20px;
  overflow: hidden;
  box-shadow: 0 25px 80px rgba(0,0,0,0.18), 0 0 0 1px rgba(0,0,0,0.04);
}

/* --- BANDEAU GRADIENT HEADER --- */
.eleve-modal-header {
  position: relative;
  padding: 0;
  flex-shrink: 0;
  background: linear-gradient(135deg, #4f46e5 0%, #7c3aed 50%, #6366f1 100%);
  overflow: hidden;
}
.eleve-modal-header::before {
  content: '';
  position: absolute;
  top: -50%;
  right: -20%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.1) 0%, transparent 70%);
  border-radius: 50%;
}
.eleve-modal-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -10%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  border-radius: 50%;
}
.eleve-header-top {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 24px 0 24px;
  position: relative;
  z-index: var(--z-base);
}
.eleve-modal-header-avatar {
  width: 56px;
  height: 56px;
  border-radius: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 800;
  font-size: var(--font-xl);
  color: white;
  flex-shrink: 0;
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
  border: 3px solid rgba(255,255,255,0.3);
}
.eleve-modal-header-info {
  flex: 1;
  min-width: 0;
}
.eleve-modal-header-name {
  font-size: var(--font-xl);
  font-weight: 800;
  color: white;
  line-height: 1.2;
}
.eleve-modal-header-sub {
  font-size: var(--font-base);
  color: rgba(255,255,255,0.75);
  font-weight: 500;
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 8px;
}
.eleve-header-niveau-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 10px;
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 700;
  background: rgba(255,255,255,0.2);
  color: white;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
}
.eleve-header-status {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 700;
}
.eleve-header-status.active { background: rgba(16,185,129,0.25); color: #a7f3d0; }
.eleve-header-status.pending { background: rgba(245,158,11,0.25); color: #fde68a; }
.eleve-header-status.none { background: rgba(255,255,255,0.15); color: rgba(255,255,255,0.6); }

.eleve-modal-close {
  width: 36px;
  height: 36px;
  border-radius: 12px;
  border: none;
  background: rgba(255,255,255,0.15);
  font-size: var(--font-lg);
  color: rgba(255,255,255,0.8);
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  position: relative;
  z-index: var(--z-base);
}
.eleve-modal-close:hover {
  background: rgba(255,255,255,0.25);
  color: white;
}

/* Barre de stats rapides */
.eleve-header-stats {
  display: flex;
  gap: 0;
  padding: 12px 24px 14px 24px;
  position: relative;
  z-index: var(--z-base);
}
.eleve-header-stat {
  flex: 1;
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 14px;
  border-radius: 10px;
  background: rgba(255,255,255,0.12);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  margin-right: 8px;
  transition: background 0.15s;
}
.eleve-header-stat:last-child { margin-right: 0; }
.eleve-header-stat:hover { background: rgba(255,255,255,0.18); }
.eleve-header-stat-icon {
  font-size: var(--font-lg);
  opacity: 0.9;
}
.eleve-header-stat-content {
  display: flex;
  flex-direction: column;
}
.eleve-header-stat-value {
  font-size: var(--font-lg);
  font-weight: 800;
  color: white;
  line-height: 1.1;
}
.eleve-header-stat-label {
  font-size: var(--font-xs);
  font-weight: 600;
  color: rgba(255,255,255,0.6);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* --- ONGLETS PILLS --- */
.eleve-tabs-bar {
  display: flex;
  gap: 4px;
  padding: 10px 20px;
  background: #f8fafc;
  border-bottom: 1px solid #e5e7eb;
  flex-shrink: 0;
  overflow-x: auto;
  scrollbar-width: none;
}
.eleve-tabs-bar::-webkit-scrollbar { display: none; }
.eleve-tab-btn {
  padding: 7px 14px;
  font-size: 12.5px;
  font-weight: 600;
  background: transparent;
  border: none;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
  color: #6b7280;
  transition: all 0.2s;
  position: relative;
}
.eleve-tab-btn:hover {
  color: #4f46e5;
  background: #eef2ff;
}
.eleve-tab-btn.active {
  color: white;
  background: #4f46e5;
  box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}
.eleve-tab-btn .tab-icon {
  margin-right: 5px;
  font-size: var(--font-base);
}
.eleve-tab-btn .tab-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  background: #ef4444;
  color: white;
  font-size: 9px;
  font-weight: 700;
  min-width: 16px;
  height: 16px;
  border-radius: 8px;
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0 4px;
  box-shadow: 0 1px 3px rgba(239,68,68,0.4);
}

/* Contenu modal scrollable */
.eleve-modal-body {
  flex: 1;
  overflow-y: auto;
  padding: 20px 24px;
  background: #f8fafc;
}

/* Footer contextuel */
.eleve-modal-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 24px;
  border-top: 1px solid #e5e7eb;
  background: white;
  flex-shrink: 0;
  gap: 12px;
}
.eleve-footer-left {
  display: flex;
  gap: 8px;
  align-items: center;
}
.eleve-footer-right {
  display: flex;
  gap: 8px;
  align-items: center;
}
.eleve-btn {
  padding: 8px 16px;
  border-radius: 10px;
  font-size: var(--font-base);
  font-weight: 600;
  border: none;
  cursor: pointer;
  transition: all 0.15s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.eleve-btn-primary {
  background: #4f46e5;
  color: white;
}
.eleve-btn-primary:hover { background: #4338ca; }
.eleve-btn-ghost {
  background: transparent;
  color: #6b7280;
}
.eleve-btn-ghost:hover { background: #f3f4f6; }
.eleve-btn-danger {
  background: transparent;
  color: #ef4444;
  font-size: var(--font-sm);
}
.eleve-btn-danger:hover { background: #fef2f2; }
.eleve-btn-soft {
  background: #eef2ff;
  color: #4f46e5;
}
.eleve-btn-soft:hover { background: #e0e7ff; }
/* Bouton Envoyer planning (footer fiche élève) */
.eleve-btn-planning {
  background: linear-gradient(135deg, #f59e0b, #d97706);
  color: white;
  padding: 8px 14px;
  font-weight: 600;
  font-size: 0.85rem;
  gap: 4px;
}
.eleve-btn-planning:hover { background: linear-gradient(135deg, #d97706, #b45309); filter: brightness(1.05); }

/* Bouton Plus d'actions */
.eleve-btn-more {
  background: #f3f4f6;
  color: #6b7280;
  padding: 8px 12px;
  position: relative;
  font-size: 0.8rem;
  gap: 4px;
}
.eleve-btn-more:hover { background: #e5e7eb; color: #374151; }

/* Dropdown Plus d'actions */
.eleve-more-menu {
  position: absolute;
  bottom: 100%;
  left: 0;
  margin-bottom: 6px;
  background: white;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  box-shadow: 0 10px 25px rgba(0,0,0,0.1);
  padding: 4px;
  z-index: var(--z-dropdown);
  min-width: 180px;
  display: none;
}
.eleve-more-menu.show { display: block; }
.eleve-more-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  font-size: var(--font-base);
  color: #374151;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  cursor: pointer;
  border-radius: 6px;
  transition: background 0.1s;
}
.eleve-more-item:hover { background: #f3f4f6; }
.eleve-more-item.danger { color: #ef4444; }
.eleve-more-item.danger:hover { background: #fef2f2; }

/* Section de la modale admin */
.eleve-section {
  background: white;
  border: 1px solid #e5e7eb;
  border-left: 4px solid #4f46e5;
  border-radius: 12px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  transition: box-shadow 0.2s;
}
.eleve-section:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.06); }
.eleve-section:nth-child(2) { border-left-color: #f59e0b; }
.eleve-section:nth-child(3) { border-left-color: #10b981; }
.eleve-section-title {
  font-size: var(--font-sm);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.8px;
  color: #4f46e5;
  margin-bottom: 16px;
  display: flex;
  align-items: center;
  gap: 8px;
  padding-bottom: 10px;
  border-bottom: 1px solid #f3f4f6;
}
.eleve-section:nth-child(2) .eleve-section-title { color: #d97706; }
.eleve-section:nth-child(3) .eleve-section-title { color: #059669; }

/* Modern input styling */
.eleve-section .input,
.eleve-section input[type="text"],
.eleve-section input[type="email"],
.eleve-section input[type="tel"],
.eleve-section select,
.eleve-section textarea {
  border: 1.5px solid #e5e7eb;
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 13.5px;
  transition: all 0.2s;
  background: #fafafa;
}
.eleve-section .input:focus,
.eleve-section input:focus,
.eleve-section select:focus,
.eleve-section textarea:focus {
  border-color: #4f46e5;
  background: white;
  box-shadow: 0 0 0 3px rgba(79,70,229,0.1);
  outline: none;
}
.eleve-section label {
  font-size: var(--font-sm);
  font-weight: 700;
  color: #6b7280;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Selecteur de niveau unifie */
.niveau-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.niveau-pill {
  padding: 7px 14px;
  border-radius: 20px;
  font-size: 12.5px;
  font-weight: 600;
  border: 1.5px solid #e5e7eb;
  background: #fafafa;
  color: #6b7280;
  cursor: pointer;
  transition: all 0.2s;
}
.niveau-pill:hover {
  border-color: #a5b4fc;
  color: #4f46e5;
  background: #eef2ff;
  transform: translateY(-1px);
}
.niveau-pill.selected {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(79,70,229,0.3);
  transform: translateY(-1px);
}
.filiere-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  padding: 12px;
  background: linear-gradient(135deg, #eef2ff, #e0e7ff);
  border-radius: 12px;
  border: 1px solid #c7d2fe;
}
.filiere-pill {
  padding: 6px 14px;
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 600;
  border: 1.5px solid #c7d2fe;
  background: white;
  color: #4f46e5;
  cursor: pointer;
  transition: all 0.2s;
}
.filiere-pill:hover {
  background: #e0e7ff;
  transform: translateY(-1px);
}
.filiere-pill.selected {
  background: linear-gradient(135deg, #4f46e5, #6366f1);
  color: white;
  border-color: transparent;
  box-shadow: 0 2px 8px rgba(79,70,229,0.3);
}

/* Collapsible section */
.eleve-collapse-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
}
.eleve-collapse-toggle .chevron {
  transition: transform 0.2s;
  font-size: var(--font-sm);
  color: #9ca3af;
}
.eleve-collapse-toggle.open .chevron {
  transform: rotate(180deg);
}
.eleve-collapse-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.eleve-collapse-body.open {
  max-height: 2000px;
}

/* Dark mode overrides — Cards */
body.dark-mode .eleve-card-v2 { background: #1f2937; border-color: #374151; }
body.dark-mode .eleve-card-v2:hover { border-color: #6366f1; box-shadow: 0 4px 20px rgba(99,102,241,0.15); }
body.dark-mode .eleve-card-name { color: #f3f4f6; }
body.dark-mode .eleve-card-detail { color: #9ca3af; }
body.dark-mode .eleve-card-detail-icon { background: #374151; color: #6b7280; }
body.dark-mode .eleve-card-footer { border-top-color: #374151; }
body.dark-mode .eleve-card-stat { background: #312e81; color: #a5b4fc; }
body.dark-mode .eleve-card-date { color: #6b7280; }

/* Dark mode overrides — Modal Premium */
body.dark-mode .eleve-modal-v2 { background: #111827; }
body.dark-mode .eleve-modal-header { background: linear-gradient(135deg, #312e81 0%, #4c1d95 50%, #1e1b4b 100%); }
body.dark-mode .eleve-modal-header-name { color: #f3f4f6; }
body.dark-mode .eleve-header-stat { background: rgba(255,255,255,0.08); }
body.dark-mode .eleve-header-stat:hover { background: rgba(255,255,255,0.12); }
body.dark-mode .eleve-tabs-bar { background: #1f2937; border-color: #374151; }
body.dark-mode .eleve-tab-btn { color: #6b7280; }
body.dark-mode .eleve-tab-btn:hover { color: #a5b4fc; background: #312e81; }
body.dark-mode .eleve-tab-btn.active { color: white; background: #4f46e5; }
body.dark-mode .eleve-modal-body { background: #111827; }
body.dark-mode .eleve-modal-footer { background: #1f2937; border-color: #374151; }
body.dark-mode .eleve-section { background: #1f2937; border-color: #374151; box-shadow: none; }
body.dark-mode .eleve-section-title { border-bottom-color: #374151; }
body.dark-mode .eleve-section .input,
body.dark-mode .eleve-section input,
body.dark-mode .eleve-section select,
body.dark-mode .eleve-section textarea { background: #111827; border-color: #374151; color: #e5e7eb; }
body.dark-mode .eleve-section .input:focus,
body.dark-mode .eleve-section input:focus,
body.dark-mode .eleve-section select:focus { border-color: #6366f1; box-shadow: 0 0 0 3px rgba(99,102,241,0.2); background: #1f2937; }
body.dark-mode .niveau-pill { background: #1f2937; border-color: #374151; color: #9ca3af; }
body.dark-mode .niveau-pill:hover { border-color: #6366f1; color: #a5b4fc; background: #312e81; }
body.dark-mode .niveau-pill.selected { background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; border-color: transparent; }
body.dark-mode .filiere-pills { background: linear-gradient(135deg, #1e1b4b, #312e81); border-color: #4338ca; }
body.dark-mode .filiere-pill { background: #1f2937; border-color: #4338ca; color: #a5b4fc; }
body.dark-mode .filiere-pill.selected { background: linear-gradient(135deg, #4f46e5, #6366f1); color: white; }
body.dark-mode .eleve-more-menu { background: #1f2937; border-color: #374151; }
body.dark-mode .eleve-more-item { color: #d1d5db; }
body.dark-mode .eleve-more-item:hover { background: #374151; }

/* Responsive - Factures */
@media (max-width: 768px) {
  #search-factures {
    font-size: var(--font-base);
    padding: 8px 12px;
  }
  
  .suggestion-item {
    padding: 8px 12px;
    font-size: var(--font-base);
  }
  
  .btn[id^="sort-"] {
    font-size: var(--font-sm);
    padding: 6px 10px;
  }
}

/* ============================================
   📊 DASHBOARD V2 - Style Premium
   ============================================ */

/* --- Header gradient --- */
.dash-header {
  background: linear-gradient(135deg, #1e40af 0%, #3b82f6 50%, #60a5fa 100%);
  border-radius: 16px;
  padding: 28px 32px 20px;
  margin: 0 24px 24px;
  position: relative;
  overflow: visible;
  color: white;
}
.dash-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.dash-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.dash-header-top {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  z-index: var(--z-base);
}
.dash-month-nav {
  display: flex;
  align-items: center;
  gap: 12px;
}
.dash-actions-area {
  position: absolute;
  right: 0;
  top: 50%;
  transform: translateY(-50%);
}
.dash-month-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.2s;
}
.dash-month-btn:hover { background: rgba(255,255,255,0.25); }
.dash-month-label {
  font-size: 1.5rem;
  font-weight: 700;
  text-transform: capitalize;
  min-width: 220px;
  text-align: center;
}
.dash-actions-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.25);
  color: white;
  padding: 8px 16px;
  border-radius: 10px;
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: background 0.2s;
  display: flex;
  align-items: center;
  gap: 6px;
}
.dash-actions-btn:hover { background: rgba(255,255,255,0.25); }
.dash-actions-menu {
  display: none;
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.18), 0 2px 8px rgba(0,0,0,0.08);
  min-width: 240px;
  padding: 6px;
  z-index: var(--z-modal-backdrop);
  border: 1px solid #e5e7eb;
}
.dash-actions-menu.show { display: block; }
.dash-actions-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--font-base);
  color: #374151;
  font-weight: 500;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
  white-space: nowrap;
}
.dash-actions-item:hover { background: #f3f4f6; }

/* --- Stat cards v2 --- */
.dash-stats {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  padding: 0 24px;
  margin-bottom: 24px;
}
.dash-stat-card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  display: flex;
  align-items: flex-start;
  gap: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
  transition: box-shadow 0.2s, transform 0.2s;
}
.dash-stat-card:hover {
  box-shadow: 0 4px 12px rgba(0,0,0,0.08);
  transform: translateY(-1px);
}
.dash-stat-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: var(--font-2xl);
  flex-shrink: 0;
}
.dash-stat-icon.blue { background: #dbeafe; }
.dash-stat-icon.green { background: #dcfce7; }
.dash-stat-icon.red { background: #fee2e2; }
.dash-stat-icon.purple { background: #ede9fe; }
.dash-stat-info { flex: 1; min-width: 0; }
.dash-stat-label {
  font-size: var(--font-base);
  color: #6b7280;
  font-weight: 500;
  margin-bottom: 4px;
}
.dash-stat-value {
  font-size: 1.6rem;
  font-weight: 800;
  color: #111827;
  line-height: 1.2;
}
.dash-stat-sub {
  font-size: var(--font-sm);
  color: #9ca3af;
  margin-top: 4px;
}

/* --- Alert cards v2 --- */
.dash-alerts {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
  padding: 0 24px;
  margin-bottom: 24px;
}
.dash-alert-card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  border-left: 4px solid;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border-top: 1px solid #e5e7eb;
  border-right: 1px solid #e5e7eb;
  border-bottom: 1px solid #e5e7eb;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  transition: box-shadow 0.2s;
}
.dash-alert-card:hover { box-shadow: 0 4px 12px rgba(0,0,0,0.08); }
.dash-alert-card.red { border-left-color: #ef4444; }
.dash-alert-card.blue { border-left-color: #3b82f6; }
.dash-alert-card.green { border-left-color: #22c55e; }
.dash-alert-card.purple { border-left-color: #8b5cf6; }
.dash-alert-card.gray { border-left-color: #d1d5db; }
.dash-alert-card.indigo { border-left-color: #6366f1; }
.dash-alert-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  margin-bottom: 8px;
}
.dash-alert-title {
  font-weight: 700;
  font-size: var(--font-lg);
}
.dash-alert-badge {
  font-size: var(--font-sm);
  font-weight: 700;
  padding: 2px 8px;
  border-radius: 999px;
}
.dash-alert-body {
  font-size: var(--font-base);
  color: #6b7280;
  margin-bottom: 4px;
}
.dash-alert-big {
  font-size: 1.5rem;
  font-weight: 800;
}
.dash-alert-action {
  margin-top: 12px;
  width: 100%;
  padding: 8px;
  border-radius: 10px;
  border: none;
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}

/* --- Charts section --- */
.dash-charts-section {
  padding: 0 24px;
  margin-bottom: 24px;
}
.dash-charts-section h3 {
  font-size: var(--font-lg);
  font-weight: 700;
  color: #1e40af;
  margin-bottom: 16px;
  padding-left: 4px;
}
.dash-charts-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.dash-chart-card {
  background: white;
  border-radius: 14px;
  padding: 20px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
  border: 1px solid #e5e7eb;
}
.dash-chart-card h4 {
  font-size: var(--font-base);
  font-weight: 700;
  color: #374151;
  margin-bottom: 12px;
}

/* --- Emails card (legacy) --- */
#dashboard-emails-card {
  padding: 0 24px;
  margin-bottom: 24px;
}

/* === Dashboard v3 - Welcome === */
.dash-welcome {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20px 28px;
  margin: 0 24px 16px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}
.dash-welcome-title {
  font-size: 1.35rem;
  font-weight: 700;
  color: #1f2937;
  margin: 0;
}
.dash-welcome-sub {
  font-size: 0.9rem;
  color: #6b7280;
  margin: 4px 0 0;
}
.dash-quick-actions {
  display: flex;
  gap: 8px;
}
.dash-quick-btn {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border: 1px solid #e5e7eb;
  border-radius: 10px;
  background: #f9fafb;
  color: #374151;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s;
  white-space: nowrap;
}
.dash-quick-btn:hover {
  background: #2563eb;
  color: white;
  border-color: #2563eb;
  box-shadow: 0 2px 8px rgba(37,99,235,0.25);
}
.dash-quick-btn span {
  font-size: 15px;
}

/* === Dashboard v3 - Cours du jour === */
.dash-today-card {
  margin: 0 24px 16px;
  background: white;
  border-radius: 14px;
  border: 1px solid #e5e7eb;
  box-shadow: 0 1px 3px rgba(0,0,0,0.04);
  overflow: hidden;
}
.dash-today-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 20px;
  background: linear-gradient(135deg, #eff6ff, #f0f9ff);
  border-bottom: 1px solid #e5e7eb;
}
.dash-today-title {
  font-size: 1rem;
  font-weight: 700;
  color: #1e40af;
}
.dash-today-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #2563eb;
  color: white;
  font-size: 13px;
  font-weight: 700;
}
.dash-today-list {
  padding: 8px 16px;
}
.dash-today-item {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 10px 8px;
  border-bottom: 1px solid #f3f4f6;
}
.dash-today-item:last-child {
  border-bottom: none;
}
.dash-today-time {
  font-size: 1rem;
  font-weight: 700;
  color: #2563eb;
  min-width: 50px;
  font-variant-numeric: tabular-nums;
}
.dash-today-detail {
  flex: 1;
  min-width: 0;
}
.dash-today-eleves {
  font-size: 0.92rem;
  font-weight: 600;
  color: #1f2937;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dash-eleve-link {
  color: #2563eb;
  text-decoration: none;
  cursor: pointer;
  transition: color 0.15s;
}
.dash-eleve-link:hover {
  color: #1d4ed8;
  text-decoration: underline;
}
body.dark-mode .dash-eleve-link { color: #60a5fa; }
body.dark-mode .dash-eleve-link:hover { color: #93c5fd; }
.dash-today-meta {
  font-size: 0.8rem;
  color: #9ca3af;
  margin-top: 2px;
}
.dash-today-empty {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 16px 8px;
  color: #9ca3af;
  font-size: 0.95rem;
}

/* ─── Pills d'action « Bilan » / « Exo » sur la ligne élève (style moderne) ─── */
.dash-today-actions {
  display: flex;
  gap: 8px;
  align-items: center;
  margin-left: auto;
  flex-shrink: 0;
}
.dash-pill-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  border-radius: 999px;
  border: none;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.01em;
  cursor: pointer;
  white-space: nowrap;
  transition: background 0.18s, color 0.18s, transform 0.12s, box-shadow 0.18s;
  font-family: inherit;
  position: relative;
  line-height: 1;
}
.dash-pill-btn:hover {
  transform: translateY(-1px);
}
.dash-pill-btn:active {
  transform: translateY(0);
  transition-duration: 50ms;
}
.dash-pill-btn .dash-pill-ico {
  font-size: 14px;
  line-height: 1;
}
.dash-pill-btn .dash-pill-label {
  font-size: 12.5px;
  line-height: 1;
  font-weight: 600;
}

/* Bilan — primary (indigo) */
.dash-pill-bilan {
  color: #ffffff;
  background: var(--primary-600);
  box-shadow: 0 1px 2px rgba(79,70,229,0.20), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.dash-pill-bilan:hover {
  background: var(--primary-700);
  box-shadow: 0 4px 12px rgba(79,70,229,0.30), inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Exo — warning (ambre) */
.dash-pill-exo {
  color: #ffffff;
  background: var(--warning-500);
  box-shadow: 0 1px 2px rgba(245,158,11,0.20), inset 0 0 0 1px rgba(255,255,255,0.06);
}
.dash-pill-exo:hover {
  background: var(--warning-600);
  box-shadow: 0 4px 12px rgba(245,158,11,0.30), inset 0 0 0 1px rgba(255,255,255,0.08);
}

/* Mode sombre — un peu moins lumineux pour ne pas crever l'écran */
body.dark-mode .dash-pill-bilan {
  background: var(--primary-500);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.dark-mode .dash-pill-bilan:hover {
  background: var(--primary-400);
}
body.dark-mode .dash-pill-exo {
  background: var(--warning-500);
  box-shadow: 0 1px 3px rgba(0,0,0,0.4);
}
body.dark-mode .dash-pill-exo:hover {
  background: var(--warning-400);
}

/* ════════════════════════════════════════════════════════════════
   MODALE BILAN RAPIDE — design moderne et épuré
   ════════════════════════════════════════════════════════════════ */
.bilan-rapide-overlay {
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, 0.55);
  -webkit-backdrop-filter: blur(2px);
  backdrop-filter: blur(2px);
  z-index: var(--z-modal, 1000);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  animation: bilanFadeIn 0.18s ease-out;
}
@keyframes bilanFadeIn {
  from { opacity: 0; }
  to { opacity: 1; }
}
.bilan-rapide-modal {
  background: #ffffff;
  border-radius: 16px;
  max-width: 920px;
  width: 100%;
  max-height: 92vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 60px rgba(15, 23, 42, 0.25), 0 4px 12px rgba(15, 23, 42, 0.08);
  overflow: hidden;
  animation: bilanSlideUp 0.22s cubic-bezier(.2,.9,.3,1.1);
}
@keyframes bilanSlideUp {
  from { opacity: 0; transform: translateY(8px) scale(0.985); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

/* ─── Header ─── */
.bilan-rapide-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 22px 28px 20px;
  border-bottom: 1px solid var(--gray-100);
  background: #ffffff;
}
.bilan-rapide-eyebrow {
  font-size: 11px;
  font-weight: 600;
  color: var(--primary-600);
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 4px;
}
.bilan-rapide-title {
  font-size: 22px;
  font-weight: 700;
  color: var(--gray-900);
  margin: 0;
  line-height: 1.2;
}
.bilan-rapide-subtitle {
  font-size: 13px;
  color: var(--gray-500);
  margin-top: 4px;
  text-transform: capitalize;
}
.bilan-rapide-close {
  flex-shrink: 0;
  width: 34px;
  height: 34px;
  border-radius: 10px;
  border: 1px solid var(--gray-200);
  background: var(--gray-50);
  color: var(--gray-500);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s, border-color 0.15s;
}
.bilan-rapide-close:hover {
  background: var(--gray-100);
  color: var(--gray-700);
  border-color: var(--gray-300);
}

/* ─── Body scrollable ─── */
.bilan-rapide-body {
  padding: 20px 24px;
  overflow-y: auto;
  flex: 1;
  background: var(--gray-50);
}

/* ─── Formulaire moderne ─── */
.bilan-form-modern {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bilan-section {
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  overflow: hidden;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.bilan-section:hover {
  border-color: var(--gray-300);
}
.bilan-section-header {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--gray-100);
  background: transparent;
  border-radius: 0;
  width: 100%;
  text-align: left;
}
.bilan-section-toggle {
  cursor: pointer;
  border: none;
  font: inherit;
}
.bilan-section-toggle:hover {
  background: var(--gray-50);
}
.bilan-section-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  flex-shrink: 0;
}
.bilan-section-dot[data-color="emerald"] { background: var(--emerald-500); }
.bilan-section-dot[data-color="warning"] { background: var(--warning-500); }
.bilan-section-dot[data-color="info"] { background: var(--info-500); }
.bilan-section-title {
  font-size: 14px;
  font-weight: 600;
  color: var(--gray-800);
  margin: 0;
  flex: 1;
}
.bilan-section-optional {
  font-size: 11px;
  font-weight: 400;
  color: var(--gray-400);
  margin-left: 4px;
}
.bilan-notes-chevron {
  color: var(--gray-400);
  font-size: 14px;
  transition: transform 0.2s;
  margin-left: auto;
}
.bilan-section-body {
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
}
.bilan-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.bilan-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-700);
  letter-spacing: 0.01em;
}
.bilan-input, .bilan-textarea {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  font-size: 14px;
  background: #ffffff;
  color: var(--gray-900);
  box-sizing: border-box;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
  font-family: inherit;
}
.bilan-input::placeholder, .bilan-textarea::placeholder {
  color: var(--gray-400);
}
.bilan-input:focus, .bilan-textarea:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.12);
  background: #ffffff;
}
.bilan-textarea {
  resize: vertical;
  min-height: 56px;
  line-height: 1.45;
}
.bilan-grid-2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
@media (max-width: 640px) {
  .bilan-grid-2 { grid-template-columns: 1fr; }
}

/* ─── Bloc items (exercices / fichiers / liens) ─── */
.bilan-items-block {
  margin-top: 4px;
  padding-top: 14px;
  border-top: 1px dashed var(--gray-200);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.bilan-items-block-label {
  font-size: 12px;
  font-weight: 600;
  color: var(--gray-600);
}
.bilan-add-row {
  display: flex;
  gap: 6px;
  flex-wrap: wrap;
}
.bilan-add-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 6px 12px;
  border-radius: 8px;
  border: 1px dashed var(--gray-300);
  background: transparent;
  color: var(--gray-600);
  font-size: 12px;
  font-weight: 500;
  cursor: pointer;
  transition: border-color 0.15s, color 0.15s, background 0.15s;
  font-family: inherit;
}
.bilan-add-chip:hover {
  border-color: var(--primary-400);
  background: var(--primary-50);
  color: var(--primary-700);
  border-style: solid;
}
.bilan-add-chip span {
  font-size: 13px;
  line-height: 1;
}

/* ─── Actionbar (footer collant des actions) ─── */
.bilan-actionbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px;
  padding: 14px 16px;
  background: #ffffff;
  border-radius: 12px;
  border: 1px solid var(--gray-200);
  margin-top: 4px;
}
.bilan-actionbar-status {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-size: 12px;
}
.bilan-email-status {
  color: var(--gray-600);
}
.bilan-save-status {
  color: var(--gray-400);
  font-style: italic;
}
.bilan-actionbar-buttons {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* ─── Boutons modernes ─── */
.bilan-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 9px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid transparent;
  transition: background 0.15s, border-color 0.15s, color 0.15s, transform 0.1s, box-shadow 0.15s;
  font-family: inherit;
  white-space: nowrap;
}
.bilan-btn:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 6px rgba(0,0,0,0.08);
}
.bilan-btn:active {
  transform: translateY(0);
  box-shadow: none;
}
.bilan-btn span {
  font-size: 14px;
  line-height: 1;
}
.bilan-btn:disabled {
  opacity: 0.6;
  cursor: not-allowed;
  transform: none;
  box-shadow: none;
}
.bilan-btn-ghost {
  color: var(--gray-700);
  background: #ffffff;
  border-color: var(--gray-200);
}
.bilan-btn-ghost:hover {
  background: var(--gray-50);
  border-color: var(--gray-300);
}
.bilan-btn-success {
  color: #ffffff;
  background: var(--emerald-500);
}
.bilan-btn-success:hover {
  background: var(--emerald-600);
}
.bilan-btn-primary {
  color: #ffffff;
  background: var(--primary-600);
}
.bilan-btn-primary:hover {
  background: var(--primary-700);
}

/* ─── Mode sombre ─── */
body.dark-mode .bilan-rapide-modal { background: #1f2937; }
body.dark-mode .bilan-rapide-header { background: #1f2937; border-color: #374151; }
body.dark-mode .bilan-rapide-title { color: #f3f4f6; }
body.dark-mode .bilan-rapide-subtitle { color: #9ca3af; }
body.dark-mode .bilan-rapide-close { background: #374151; border-color: #4b5563; color: #d1d5db; }
body.dark-mode .bilan-rapide-close:hover { background: #4b5563; color: #f3f4f6; }
body.dark-mode .bilan-rapide-body { background: #111827; }
body.dark-mode .bilan-section { background: #1f2937; border-color: #374151; }
body.dark-mode .bilan-section-header { border-color: #374151; }
body.dark-mode .bilan-section-title { color: #f3f4f6; }
body.dark-mode .bilan-label { color: #d1d5db; }
body.dark-mode .bilan-input, body.dark-mode .bilan-textarea {
  background: #111827; border-color: #374151; color: #f3f4f6;
}
body.dark-mode .bilan-input::placeholder, body.dark-mode .bilan-textarea::placeholder { color: #6b7280; }
body.dark-mode .bilan-add-chip { border-color: #4b5563; color: #9ca3af; }
body.dark-mode .bilan-add-chip:hover { background: rgba(99,102,241,0.15); color: var(--primary-300); border-color: var(--primary-500); }
body.dark-mode .bilan-actionbar { background: #1f2937; border-color: #374151; }
body.dark-mode .bilan-btn-ghost { background: #1f2937; border-color: #374151; color: #d1d5db; }
body.dark-mode .bilan-btn-ghost:hover { background: #374151; border-color: #4b5563; }

/* ─── Items individuels dans la modale ─── */
.bilan-item-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--gray-50);
  border: 1px solid var(--gray-200);
  border-radius: 8px;
  margin-bottom: 6px;
  font-size: 13px;
  transition: border-color 0.15s, background 0.15s;
}
.bilan-item-row:last-child { margin-bottom: 0; }
.bilan-item-row:hover {
  background: #ffffff;
  border-color: var(--gray-300);
}
.bilan-item-row[data-item-type="exercice_app"] { border-left: 3px solid var(--emerald-400); }
.bilan-item-row[data-item-type="fichier"] { border-left: 3px solid var(--info-400); }
.bilan-item-row[data-item-type="lien"] { border-left: 3px solid var(--purple-400); }
.bilan-item-icon {
  font-size: 14px;
  line-height: 1;
}
.bilan-item-title {
  flex: 1;
  font-weight: 500;
  color: var(--gray-800);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.bilan-item-due-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--gray-500);
  white-space: nowrap;
}
.bilan-item-due-ico { font-size: 12px; }
.bilan-item-due-date {
  border: 1px solid var(--gray-200);
  border-radius: 6px;
  padding: 3px 6px;
  font-size: 11px;
  background: #ffffff;
  color: var(--gray-700);
  font-family: inherit;
  cursor: pointer;
}
.bilan-item-due-date:focus {
  outline: none;
  border-color: var(--primary-400);
  box-shadow: 0 0 0 2px rgba(99,102,241,0.12);
}
.bilan-item-also-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  color: var(--warning-700);
  cursor: pointer;
  white-space: nowrap;
}
.bilan-item-also-wrap input { accent-color: var(--warning-500); cursor: pointer; }
.bilan-item-remove {
  background: none;
  border: none;
  cursor: pointer;
  color: var(--gray-400);
  padding: 4px;
  border-radius: 6px;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s, color 0.15s;
}
.bilan-item-remove:hover {
  background: var(--danger-50);
  color: var(--danger-500);
}
body.dark-mode .bilan-item-row { background: #111827; border-color: #374151; }
body.dark-mode .bilan-item-row:hover { background: #1f2937; border-color: #4b5563; }
body.dark-mode .bilan-item-title { color: #f3f4f6; }
body.dark-mode .bilan-item-due-date { background: #1f2937; border-color: #4b5563; color: #d1d5db; }

/* === Dashboard v3 - Tendances === */
.dash-trend {
  margin-left: 6px;
  font-variant-numeric: tabular-nums;
}

/* === Dashboard v3 - Alert card orange / teal === */
.dash-alert-card.orange { border-left-color: #f97316; }
.dash-alert-card.teal { border-left-color: #14b8a6; }

/* === Dashboard v3 - Alerts grille 4 colonnes === */
.dash-alerts {
  grid-template-columns: repeat(4, 1fr);
}

/* --- Responsive --- */
@media (max-width: 1024px) {
  .dash-stats { grid-template-columns: repeat(2, 1fr); }
  .dash-charts-grid { grid-template-columns: 1fr; }
  .dash-alerts { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 768px) {
  .dash-welcome { margin: 0 12px 12px; padding: 16px; flex-direction: column; gap: 12px; align-items: flex-start; }
  .dash-quick-actions { width: 100%; }
  .dash-quick-btn { flex: 1; justify-content: center; padding: 8px 10px; font-size: 12px; }
  .dash-today-card { margin: 0 12px 12px; }
  .dash-header { margin: 0 12px 16px; padding: 20px 16px 16px; border-radius: 12px; }
  .dash-header-top { flex-direction: column; gap: 12px; }
  .dash-actions-area { position: static; transform: none; }
  .dash-month-label { font-size: 1.2rem; min-width: auto; }
  .dash-stats { grid-template-columns: repeat(2, 1fr); padding: 0 12px; }
  .dash-alerts { grid-template-columns: 1fr; padding: 0 12px; }
  .dash-charts-section { padding: 0 12px; }
  .dash-charts-grid { grid-template-columns: 1fr; }
}

/* --- Dark mode dashboard v2 --- */
body.dark-mode .dash-header { background: linear-gradient(135deg, #1e3a5f 0%, #1e40af 50%, #2563eb 100%); }
body.dark-mode .dash-actions-menu { background: #1f2937; box-shadow: 0 8px 30px rgba(0,0,0,0.4); border-color: #374151; }
body.dark-mode .dash-actions-item { color: #d1d5db; }
body.dark-mode .dash-actions-item:hover { background: #374151; }
body.dark-mode .dash-stat-card { background: #1f2937; border-color: #374151; }
body.dark-mode .dash-stat-label { color: #9ca3af; }
body.dark-mode .dash-stat-value { color: #f3f4f6; }
body.dark-mode .dash-stat-sub { color: #6b7280; }
body.dark-mode .dash-stat-icon.blue { background: #1e3a5f; }
body.dark-mode .dash-stat-icon.green { background: #14532d; }
body.dark-mode .dash-stat-icon.red { background: #450a0a; }
body.dark-mode .dash-stat-icon.purple { background: #2e1065; }
body.dark-mode .dash-alert-card { background: #1f2937; border-top-color: #374151; border-right-color: #374151; border-bottom-color: #374151; }
body.dark-mode .dash-alert-body { color: #9ca3af; }
body.dark-mode .dash-chart-card { background: #1f2937; border-color: #374151; }
body.dark-mode .dash-chart-card h4 { color: #d1d5db; }
body.dark-mode .dash-charts-section h3 { color: #93c5fd; }
body.dark-mode .dash-welcome { background: #1f2937; border-color: #374151; }
body.dark-mode .dash-welcome-title { color: #f3f4f6; }
body.dark-mode .dash-welcome-sub { color: #9ca3af; }
body.dark-mode .dash-quick-btn { background: #374151; border-color: #4b5563; color: #d1d5db; }
body.dark-mode .dash-quick-btn:hover { background: #2563eb; color: white; border-color: #2563eb; }
body.dark-mode .dash-today-card { background: #1f2937; border-color: #374151; }
body.dark-mode .dash-today-header { background: linear-gradient(135deg, #1e3a5f, #172554); border-color: #374151; }
body.dark-mode .dash-today-title { color: #93c5fd; }
body.dark-mode .dash-today-item { border-color: #374151; }
body.dark-mode .dash-today-time { color: #60a5fa; }
body.dark-mode .dash-today-eleves { color: #e5e7eb; }
body.dark-mode .dash-today-meta { color: #6b7280; }
body.dark-mode .dash-today-empty { color: #6b7280; }
body.dark-mode .dash-alert-card.orange { border-left-color: #f97316; }
body.dark-mode .dash-alert-card.teal { border-left-color: #14b8a6; }

/* ============================================
   📅 PLANNING V2 - Toolbar Premium
   ============================================ */
.planning-header {
  background: linear-gradient(135deg, #059669 0%, #10b981 50%, #34d399 100%);
  border-radius: 16px;
  padding: 28px 32px 20px;
  margin: 0 24px 24px;
  position: relative;
  overflow: visible;
  color: white;
}
.planning-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.planning-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.planning-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: var(--z-base);
  gap: 12px;
}
.planning-nav-center {
  display: flex;
  align-items: center;
  gap: 14px;
}
.planning-nav-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.planning-nav-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.08); }
.planning-nav-btn:active { transform: scale(0.95); }
.planning-title {
  font-size: 1.3rem;
  font-weight: 700;
  text-transform: capitalize;
  min-width: 200px;
  text-align: center;
}
/* View pills */
.planning-views {
  display: flex;
  background: rgba(255,255,255,0.12);
  border-radius: 10px;
  padding: 3px;
  flex-shrink: 0;
}
.planning-view-btn {
  padding: 6px 14px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: rgba(255,255,255,0.75);
  font-size: var(--font-base);
  font-weight: 600;
  cursor: pointer;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}
.planning-view-btn:hover { color: white; background: rgba(255,255,255,0.1); transform: translateY(-1px); }
.planning-view-btn:active { transform: translateY(0); }
.planning-view-btn.active { background: white; color: #059669; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-weight: 700; }
/* Actions area (right) */
.planning-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
.planning-action-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.planning-action-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.planning-action-btn:active { transform: translateY(0); }
.planning-action-btn.primary-action {
  background: white;
  color: #059669;
  border-color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.planning-action-btn.primary-action:hover { background: #f0fdf4; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Responsive */
@media (max-width: 768px) {
  .planning-header { margin: 0 12px 16px; padding: 20px 16px 16px; border-radius: 12px; }
  .planning-header-top { flex-direction: column; gap: 10px; }
  .planning-views { position: static; }
  .planning-actions { position: static; flex-wrap: wrap; justify-content: center; }
  .planning-title { font-size: 1.1rem; min-width: auto; }
}

/* Barre Stats + Recherche */
.planning-stats-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 12px;
  padding-top: 10px;
  border-top: 1px solid rgba(255,255,255,0.25);
}
.planning-stats-badges {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
}
.planning-stat-badge {
  background: rgba(255,255,255,0.2);
  -webkit-backdrop-filter: blur(4px);
  backdrop-filter: blur(4px);
  color: #fff;
  padding: 4px 12px;
  border-radius: 20px;
  font-size: 0.82rem;
  white-space: nowrap;
}
.planning-stat-badge strong { font-weight: 700; }
.planning-search-wrap {
  position: relative;
  min-width: 200px;
  max-width: 280px;
}
.planning-search-input {
  width: 100%;
  padding: 5px 28px 5px 10px;
  border-radius: 20px;
  border: 1px solid rgba(255,255,255,0.35);
  background: rgba(255,255,255,0.2);
  color: #fff;
  font-size: 0.85rem;
  outline: none;
  transition: background 0.2s;
}
.planning-search-input::placeholder { color: rgba(255,255,255,0.65); }
.planning-search-input:focus { background: rgba(255,255,255,0.35); border-color: rgba(255,255,255,0.5); }
.planning-search-clear {
  position: absolute;
  right: 6px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  font-size: 0.9rem;
  padding: 2px 4px;
}
.planning-search-clear:hover { color: #fff; }

@media (max-width: 768px) {
  .planning-stats-bar { flex-direction: column; gap: 8px; }
  .planning-search-wrap { min-width: 100%; max-width: 100%; }
}

/* Dark mode */
body.dark-mode .planning-header { background: linear-gradient(135deg, #064e3b 0%, #059669 50%, #10b981 100%); }
body.dark-mode .planning-stat-badge { background: rgba(0,0,0,0.2); }
body.dark-mode .planning-search-input { background: rgba(0,0,0,0.2); border-color: rgba(255,255,255,0.2); }

/* ============================================
   FACTURES - Premium Header (Orange/Ambre)
   ============================================ */
.factures-header {
  background: linear-gradient(135deg, #d97706 0%, #f59e0b 50%, #fbbf24 100%);
  border-radius: 16px;
  padding: 28px 32px 20px;
  margin: 0 0 24px;
  position: relative;
  overflow: visible;
  color: white;
}
.factures-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.factures-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.factures-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  z-index: var(--z-base);
  gap: 12px;
}
.factures-nav-center {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1 1 auto;
  justify-content: center;
  min-width: 0;
}
.factures-nav-btn {
  background: rgba(255,255,255,0.15);
  border: none;
  color: white;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  cursor: pointer;
  font-size: var(--font-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 0.2s;
}
.factures-nav-btn:hover { background: rgba(255,255,255,0.25); transform: scale(1.08); }
.factures-nav-btn:active { transform: scale(0.95); }
.factures-title {
  font-size: 1.25rem;
  font-weight: 700;
  white-space: nowrap;
  text-align: center;
}
.factures-title input[type="month"] {
  font-size: inherit;
  font-weight: inherit;
  color: white;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 2px 4px;
  border-radius: 6px;
  text-align: center;
}
.factures-title input[type="month"]:focus { background: rgba(255,255,255,0.15); }
.factures-title input[type="month"]::-webkit-calendar-picker-indicator { filter: invert(1); }
.factures-title #select-cycle-year,
.factures-title #select-cycle-month {
  font-size: inherit;
  font-weight: inherit;
  color: white;
  border: none;
  background: transparent;
  cursor: pointer;
  outline: none;
  padding: 2px 6px;
  margin: 0 1px;
  border-radius: 6px;
  text-align: center;
  -webkit-appearance: none;
  appearance: none;
}
.factures-title #select-cycle-year:hover,
.factures-title #select-cycle-year:focus,
.factures-title #select-cycle-month:hover,
.factures-title #select-cycle-month:focus { background: rgba(255,255,255,0.15); }
.factures-title #select-cycle-year option,
.factures-title #select-cycle-month option { color: #1f2937; font-weight: 600; }
.factures-badge-status {
  padding: 4px 12px;
  border-radius: 20px;
  font-size: var(--font-sm);
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.factures-badge-status.clos { background: rgba(239,68,68,0.2); color: #fecaca; border: 1px solid rgba(239,68,68,0.3); }
.factures-badge-status.actif { background: rgba(255,255,255,0.2); color: white; border: 1px solid rgba(255,255,255,0.3); }
/* Actions area (left) */
.factures-left-area {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.factures-next-badges {
  display: flex;
  gap: 8px;
}
.factures-next-badge {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  padding: 4px 10px;
  border-radius: 8px;
  font-size: var(--font-sm);
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.factures-next-badge span { font-family: monospace; background: rgba(255,255,255,0.15); padding: 1px 6px; border-radius: 4px; }
/* Actions area (right) */
.factures-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.factures-action-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 7px 14px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
  position: relative;
}
.factures-action-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.factures-action-btn:active { transform: translateY(0); }
/* Dropdown menu for actions globales */
.factures-actions-menu {
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 220px;
  background: white;
  border-radius: 12px;
  box-shadow: 0 8px 30px rgba(0,0,0,0.15);
  border: 1px solid #e5e7eb;
  overflow: hidden;
  display: none;
  z-index: var(--z-modal-backdrop);
}
.factures-actions-menu.show { display: block; }
.factures-actions-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  font-size: var(--font-base);
  color: #374151;
  cursor: pointer;
  transition: background 0.15s;
  border: none;
  background: none;
  width: 100%;
  text-align: left;
}
.factures-actions-item:hover { background: #f3f4f6; }
.factures-actions-item.danger { color: #dc2626; }
.factures-actions-item.danger:hover { background: #fef2f2; }
.factures-actions-sep { height: 1px; background: #f3f4f6; margin: 4px 0; }

/* Responsive factures */
@media (max-width: 768px) {
  .factures-header { margin: 0; padding: 20px 16px 16px; border-radius: 12px; }
  .factures-header-top { flex-direction: column; gap: 10px; }
  .factures-left-area { position: static; flex-wrap: wrap; justify-content: center; }
  .factures-actions { position: static; flex-wrap: wrap; justify-content: center; }
  .factures-title { font-size: 1.2rem; min-width: auto; }
  .factures-next-badges { display: none; }
}

/* Dark mode factures */
body.dark-mode .factures-header { background: linear-gradient(135deg, #92400e 0%, #d97706 50%, #f59e0b 100%); }
body.dark-mode .factures-actions-menu { background: #1f2937; box-shadow: 0 8px 30px rgba(0,0,0,0.4); border-color: #374151; }
body.dark-mode .factures-actions-item { color: #d1d5db; }
body.dark-mode .factures-actions-item:hover { background: #374151; }

/* ============================================
   ÉLÈVES LISTE - Premium Header (Violet)
   ============================================ */
.eleves-header {
  background: linear-gradient(135deg, #7c3aed 0%, #a855f7 50%, #c084fc 100%);
  border-radius: 16px;
  padding: 28px 32px 20px;
  margin: 0 0 24px;
  position: relative;
  overflow: visible;
  color: white;
}
.eleves-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.eleves-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.eleves-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: var(--z-base);
}
.eleves-header-title {
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.eleves-header-stats {
  display: flex;
  gap: 12px;
  margin-top: 16px;
  position: relative;
  z-index: var(--z-base);
}
.eleves-header-stat {
  background: rgba(255,255,255,0.12);
  border: 1px solid rgba(255,255,255,0.15);
  padding: 8px 16px;
  border-radius: 10px;
  text-align: center;
  min-width: 80px;
}
.eleves-header-stat-value {
  font-size: 1.5rem;
  font-weight: 800;
}
.eleves-header-stat-label {
  font-size: var(--font-sm);
  opacity: 0.8;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}
.eleves-header-actions {
  display: flex;
  align-items: center;
  gap: 8px;
}
.eleves-action-btn {
  background: rgba(255,255,255,0.15);
  border: 1px solid rgba(255,255,255,0.2);
  color: white;
  padding: 8px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: var(--font-base);
  font-weight: 600;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.eleves-action-btn:hover { background: rgba(255,255,255,0.25); transform: translateY(-1px); box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.eleves-action-btn:active { transform: translateY(0); }
.eleves-action-btn.primary-action {
  background: white;
  color: #7c3aed;
  border-color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}
.eleves-action-btn.primary-action:hover { background: #faf5ff; transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0,0,0,0.15); }

/* Responsive élèves */
@media (max-width: 768px) {
  .eleves-header { padding: 20px 16px 16px; border-radius: 12px; }
  .eleves-header-top { flex-direction: column; gap: 10px; align-items: flex-start; }
  .eleves-header-stats { flex-wrap: wrap; gap: 8px; }
  .eleves-header-stat { min-width: 60px; padding: 6px 10px; }
  .eleves-header-actions { width: 100%; justify-content: center; }
}

/* Dark mode élèves */
body.dark-mode .eleves-header { background: linear-gradient(135deg, #4c1d95 0%, #7c3aed 50%, #a855f7 100%); }

/* ============================================
   PÉDAGOGIE - Premium Header (Cyan/Teal)
   ============================================ */
.pedagogie-header {
  background: linear-gradient(135deg, #0891b2 0%, #06b6d4 50%, #22d3ee 100%);
  border-radius: 16px;
  padding: 28px 32px 20px;
  margin: 0 0 24px;
  position: relative;
  overflow: visible;
  color: white;
}
.pedagogie-header::before {
  content: '';
  position: absolute;
  top: -40%;
  right: -10%;
  width: 300px;
  height: 300px;
  background: radial-gradient(circle, rgba(255,255,255,0.12) 0%, transparent 70%);
  pointer-events: none;
}
.pedagogie-header::after {
  content: '';
  position: absolute;
  bottom: -30%;
  left: -5%;
  width: 200px;
  height: 200px;
  background: radial-gradient(circle, rgba(255,255,255,0.08) 0%, transparent 70%);
  pointer-events: none;
}
.pedagogie-header-top {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  z-index: var(--z-base);
}
.pedagogie-header-title {
  font-size: 1.5rem;
  font-weight: 800;
  display: flex;
  align-items: center;
  gap: 10px;
}
.pedagogie-header-subtitle {
  font-size: var(--font-base);
  opacity: 0.8;
  font-weight: 500;
  margin-top: 4px;
}

/* Responsive pédagogie */
@media (max-width: 768px) {
  .pedagogie-header { padding: 20px 16px 16px; border-radius: 12px; }
  .pedagogie-header-top { flex-direction: column; gap: 10px; align-items: flex-start; }
}

/* Dark mode pédagogie */
body.dark-mode .pedagogie-header { background: linear-gradient(135deg, #164e63 0%, #0891b2 50%, #06b6d4 100%); }

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — CONTENU DES COURS (Tailwind overrides)
   Les cours utilisent des classes Tailwind mode clair (bg-*-50,
   bg-*-100, text-*-700, etc.) qui deviennent illisibles en dark.
   On override ici dans le conteneur #theme-content.
   ═══════════════════════════════════════════════════════════════ */

/* --- Fonds clairs → Fonds sombres --- */
body.dark-mode #content .bg-white,
body.dark-mode #theme-content .bg-white {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
body.dark-mode #content .bg-gray-50,
body.dark-mode #content .bg-gray-100,
body.dark-mode #theme-content .bg-gray-50,
body.dark-mode #theme-content .bg-gray-100 {
    background-color: #1e293b !important;
    color: #e2e8f0 !important;
}
body.dark-mode #content .bg-gray-200,
body.dark-mode #content .bg-gray-300,
body.dark-mode #theme-content .bg-gray-200,
body.dark-mode #theme-content .bg-gray-300 {
    background-color: #334155 !important;
    color: #e2e8f0 !important;
}
body.dark-mode #theme-content .bg-blue-50,
body.dark-mode #theme-content .bg-blue-100 {
    background-color: #172554 !important;
    color: #bfdbfe !important;
}
body.dark-mode #theme-content .bg-blue-200 {
    background-color: #1e3a5f !important;
    color: #bfdbfe !important;
}
body.dark-mode #theme-content .bg-green-50,
body.dark-mode #theme-content .bg-green-100 {
    background-color: #052e16 !important;
    color: #bbf7d0 !important;
}
body.dark-mode #theme-content .bg-green-200 {
    background-color: #064e3b !important;
    color: #bbf7d0 !important;
}
body.dark-mode #theme-content .bg-yellow-50,
body.dark-mode #theme-content .bg-yellow-100 {
    background-color: #422006 !important;
    color: #fef08a !important;
}
body.dark-mode #theme-content .bg-yellow-200 {
    background-color: #713f12 !important;
    color: #fef08a !important;
}
body.dark-mode #theme-content .bg-red-50,
body.dark-mode #theme-content .bg-red-100 {
    background-color: #450a0a !important;
    color: #fecaca !important;
}
body.dark-mode #theme-content .bg-red-200 {
    background-color: #7f1d1d !important;
    color: #fecaca !important;
}
body.dark-mode #theme-content .bg-pink-50,
body.dark-mode #theme-content .bg-pink-100 {
    background-color: #500724 !important;
    color: #fbcfe8 !important;
}
body.dark-mode #theme-content .bg-purple-50,
body.dark-mode #theme-content .bg-purple-100 {
    background-color: #3b0764 !important;
    color: #e9d5ff !important;
}
body.dark-mode #theme-content .bg-indigo-50,
body.dark-mode #theme-content .bg-indigo-100 {
    background-color: #1e1b4b !important;
    color: #c7d2fe !important;
}
body.dark-mode #theme-content .bg-indigo-200 {
    background-color: #312e81 !important;
    color: #c7d2fe !important;
}

/* --- Textes sombres → Textes clairs --- */
body.dark-mode #content .text-gray-500,
body.dark-mode #content .text-gray-600,
body.dark-mode #theme-content .text-gray-500,
body.dark-mode #theme-content .text-gray-600 {
    color: #9ca3af !important;
}
body.dark-mode #content .text-gray-700,
body.dark-mode #content .text-gray-800,
body.dark-mode #theme-content .text-gray-700,
body.dark-mode #theme-content .text-gray-800 {
    color: #d1d5db !important;
}
body.dark-mode #theme-content .text-blue-600,
body.dark-mode #theme-content .text-blue-700,
body.dark-mode #theme-content .text-blue-800 {
    color: #93c5fd !important;
}
body.dark-mode #theme-content .text-green-600,
body.dark-mode #theme-content .text-green-700,
body.dark-mode #theme-content .text-green-800 {
    color: #86efac !important;
}
body.dark-mode #theme-content .text-red-600,
body.dark-mode #theme-content .text-red-700,
body.dark-mode #theme-content .text-red-800 {
    color: #fca5a5 !important;
}
body.dark-mode #theme-content .text-yellow-600,
body.dark-mode #theme-content .text-yellow-700,
body.dark-mode #theme-content .text-yellow-800 {
    color: #fde047 !important;
}
body.dark-mode #theme-content .text-purple-600,
body.dark-mode #theme-content .text-purple-700,
body.dark-mode #theme-content .text-purple-800 {
    color: #c4b5fd !important;
}
body.dark-mode #theme-content .text-pink-600,
body.dark-mode #theme-content .text-pink-700,
body.dark-mode #theme-content .text-pink-800 {
    color: #f9a8d4 !important;
}
body.dark-mode #theme-content .text-indigo-600,
body.dark-mode #theme-content .text-indigo-700,
body.dark-mode #theme-content .text-indigo-800 {
    color: #a5b4fc !important;
}

/* --- Bordures --- */
body.dark-mode #theme-content .border-blue-400,
body.dark-mode #theme-content .border-blue-300,
body.dark-mode #theme-content .border-blue-200 {
    border-color: #1d4ed8 !important;
}
body.dark-mode #theme-content .border-green-400,
body.dark-mode #theme-content .border-green-300,
body.dark-mode #theme-content .border-green-200 {
    border-color: #15803d !important;
}
body.dark-mode #theme-content .border-yellow-400,
body.dark-mode #theme-content .border-yellow-300 {
    border-color: #a16207 !important;
}
body.dark-mode #theme-content .border-red-400,
body.dark-mode #theme-content .border-red-300 {
    border-color: #b91c1c !important;
}
body.dark-mode #theme-content .border-purple-400,
body.dark-mode #theme-content .border-purple-300 {
    border-color: #7e22ce !important;
}
body.dark-mode #theme-content .border-pink-400,
body.dark-mode #theme-content .border-pink-300 {
    border-color: #be185d !important;
}
body.dark-mode #theme-content .border-indigo-400,
body.dark-mode #theme-content .border-indigo-300 {
    border-color: #4338ca !important;
}
body.dark-mode #theme-content .border-gray-200,
body.dark-mode #theme-content .border-gray-300 {
    border-color: #4b5563 !important;
}

/* --- Bordures de tableaux globales en dark mode (exercices, bilan, corrections) --- */
body.dark-mode .border-gray-300,
body.dark-mode .border-gray-400 {
    border-color: #4b5563 !important;
}
body.dark-mode table.border-collapse td,
body.dark-mode table.border-collapse th {
    border-color: #4b5563 !important;
}
body.dark-mode .bg-gray-100 {
    background-color: #374151 !important;
}
body.dark-mode table .bg-gray-50 {
    background-color: #1f2937 !important;
}

/* --- Tableaux dans les cours --- */
body.dark-mode #theme-content table {
    color: #e2e8f0;
}
body.dark-mode #theme-content table td,
body.dark-mode #theme-content table th {
    border-color: #4b5563 !important;
}
body.dark-mode #theme-content table td.bg-green-100,
body.dark-mode #theme-content table th.bg-green-100 {
    background-color: #064e3b !important;
    color: #bbf7d0 !important;
}

/* --- Gradients dans les cours --- */
body.dark-mode #theme-content [class*="from-green-100"],
body.dark-mode #theme-content [class*="from-green-50"] {
    background: #052e16 !important;
    color: #bbf7d0 !important;
}
body.dark-mode #theme-content [class*="from-blue-100"],
body.dark-mode #theme-content [class*="from-blue-50"] {
    background: #172554 !important;
    color: #bfdbfe !important;
}
body.dark-mode #theme-content [class*="from-yellow-100"],
body.dark-mode #theme-content [class*="from-yellow-50"] {
    background: #422006 !important;
    color: #fef08a !important;
}
body.dark-mode #theme-content [class*="from-red-100"],
body.dark-mode #theme-content [class*="from-red-50"] {
    background: #450a0a !important;
    color: #fecaca !important;
}
body.dark-mode #theme-content [class*="from-purple-100"],
body.dark-mode #theme-content [class*="from-purple-50"] {
    background: #3b0764 !important;
    color: #e9d5ff !important;
}
body.dark-mode #theme-content [class*="from-pink-100"],
body.dark-mode #theme-content [class*="from-pink-50"] {
    background: #500724 !important;
    color: #fbcfe8 !important;
}
body.dark-mode #theme-content [class*="from-indigo-100"],
body.dark-mode #theme-content [class*="from-indigo-50"] {
    background: #1e1b4b !important;
    color: #c7d2fe !important;
}

/* --- Texte par défaut dans le contenu des cours --- */
body.dark-mode #theme-content {
    color: #e2e8f0;
}
body.dark-mode #theme-content p,
body.dark-mode #theme-content li,
body.dark-mode #theme-content span:not([class*="text-white"]):not([class*="bg-"]):not([class*="inline-block"]) {
    color: inherit;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — MATHJAX GLOBAL (toute l'app)
   Couvre : cours, QCM, exercices, bilan, corrections, méthodes
   MathJax CHTML utilise color, mais aussi des <svg> avec fill
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode mjx-container,
body.dark-mode mjx-container *,
body.dark-mode .MathJax,
body.dark-mode .MathJax *,
body.dark-mode mjx-math,
body.dark-mode mjx-math *,
body.dark-mode mjx-mi,
body.dark-mode mjx-mo,
body.dark-mode mjx-mn,
body.dark-mode mjx-mtext,
body.dark-mode mjx-mrow,
body.dark-mode mjx-mfrac,
body.dark-mode mjx-msqrt,
body.dark-mode mjx-msup,
body.dark-mode mjx-msub,
body.dark-mode mjx-mover,
body.dark-mode mjx-munder,
body.dark-mode mjx-mtd,
body.dark-mode mjx-c {
    color: #f1f5f9 !important;
    fill: #f1f5f9 !important;
}
/* SVG paths dans MathJax (racines, fractions, accolades, etc.) */
body.dark-mode mjx-container svg,
body.dark-mode mjx-container svg *,
body.dark-mode mjx-container path,
body.dark-mode mjx-container rect,
body.dark-mode mjx-container line {
    stroke: #f1f5f9 !important;
    fill: #f1f5f9 !important;
}
/* Ligne de fraction, barres de racines */
body.dark-mode mjx-container [style*="border"] {
    border-color: #f1f5f9 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — EXERCICES, ÉNONCÉS, CORRECTIONS (texte courant)
   IMPORTANT : on n'applique la couleur blanche globale qu'aux éléments
   SANS couleur inline — les couleurs sémantiques inline (sections Design
   System, labels de méthodes) sont adaptées séparément plus bas.
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode .exercice-enonce:not([style*="color"]),
body.dark-mode .enonce-content:not([style*="color"]),
body.dark-mode .correction-content:not([style*="color"]),
body.dark-mode .correction-bac:not([style*="color"]),
body.dark-mode .correction-bac p:not([style*="color"]),
body.dark-mode .correction-bac strong:not([style*="color"]),
body.dark-mode .correction-bac div:not([style*="color"]),
body.dark-mode .correction-section:not([style*="color"]),
body.dark-mode .correction-section p:not([style*="color"]) {
    color: #f1f5f9 !important;
}

/* Fonds d'exercices et corrections (bg-green-50, bg-gray-50) */
body.dark-mode .bg-green-50 {
    background-color: #0f2d22 !important;
    border-color: #065f46 !important;
}
body.dark-mode .bg-green-50 *,
body.dark-mode .bg-green-50 .text-green-700,
body.dark-mode .bg-green-50 .correction-content,
body.dark-mode .bg-green-50 .text-gray-700 {
    color: #d1fae5 !important;
}
body.dark-mode .bg-gray-50,
body.dark-mode .bg-gray-50 .text-gray-700 {
    color: #f1f5f9 !important;
}

/* Tableaux de signes/variations dans corrections en dark mode */
body.dark-mode .tableau-container,
body.dark-mode .tableau-container * {
    color: #f1f5f9 !important;
}
body.dark-mode .tableau-container td,
body.dark-mode .tableau-container th {
    color: #f1f5f9 !important;
    border-color: #4b5563 !important;
}

/* Tableaux SVG (MathJax) en dark mode : darken white cells, lighten grey strokes
   Les tableaux sont rendus par SVGComponents avec <rect fill="white"> hardcodé.
   Sans override, les cellules restent blanches en dark mode et le texte MathJax
   (qui hérite de body.dark-mode .bg-green-50 * { color:#d1fae5 }) devient
   un vert pâle invisible sur blanc.
   On cible à la fois les wrappers attendus (.tableau-mathjax/.tableau-container/
   .graph-svg-placeholder) ET, par sécurité, tout SVG rendu à l'intérieur d'une
   correction (.correction-content / .correction-bac / .enonce-content) — car
   certains pipelines de rendu omettent la classe wrapper. */
body.dark-mode .tableau-mathjax svg rect[fill="white"],
body.dark-mode .tableau-mathjax svg rect[fill="#fff"],
body.dark-mode .tableau-mathjax svg rect[fill="#FFFFFF"],
body.dark-mode .tableau-mathjax svg rect[fill="#ffffff"],
body.dark-mode .tableau-container svg rect[fill="white"],
body.dark-mode .tableau-container svg rect[fill="#fff"],
body.dark-mode .tableau-container svg rect[fill="#ffffff"],
body.dark-mode .graph-svg-placeholder svg rect[fill="white"],
body.dark-mode .graph-svg-placeholder svg rect[fill="#fff"],
body.dark-mode .graph-svg-placeholder svg rect[fill="#ffffff"],
body.dark-mode .correction-content svg rect[fill="white"],
body.dark-mode .correction-content svg rect[fill="#fff"],
body.dark-mode .correction-content svg rect[fill="#ffffff"],
body.dark-mode .correction-bac svg rect[fill="white"],
body.dark-mode .correction-bac svg rect[fill="#fff"],
body.dark-mode .correction-bac svg rect[fill="#ffffff"],
body.dark-mode .enonce-content svg rect[fill="white"],
body.dark-mode .enonce-content svg rect[fill="#fff"],
body.dark-mode .enonce-content svg rect[fill="#ffffff"],
/* Tous les cours (.cours-second-degre, .cours-suites, .cours-6eme-maths-*, etc.)
   et toutes les fiches (.fiche-XXX-print) sont couverts par ce pattern générique */
body.dark-mode [class*="cours-"] svg rect[fill="white"],
body.dark-mode [class*="cours-"] svg rect[fill="#fff"],
body.dark-mode [class*="cours-"] svg rect[fill="#ffffff"],
body.dark-mode [class*="fiche-"] svg rect[fill="white"],
body.dark-mode [class*="fiche-"] svg rect[fill="#fff"],
body.dark-mode [class*="fiche-"] svg rect[fill="#ffffff"] {
    fill: #1e293b !important;
}
body.dark-mode .tableau-mathjax svg line[stroke="#374151"],
body.dark-mode .tableau-mathjax svg rect[stroke="#374151"],
body.dark-mode .tableau-container svg line[stroke="#374151"],
body.dark-mode .tableau-container svg rect[stroke="#374151"],
body.dark-mode .correction-content svg line[stroke="#374151"],
body.dark-mode .correction-content svg rect[stroke="#374151"],
body.dark-mode .correction-bac svg line[stroke="#374151"],
body.dark-mode .correction-bac svg rect[stroke="#374151"],
body.dark-mode .enonce-content svg line[stroke="#374151"],
body.dark-mode .enonce-content svg rect[stroke="#374151"],
body.dark-mode [class*="cours-"] svg line[stroke="#374151"],
body.dark-mode [class*="cours-"] svg rect[stroke="#374151"],
body.dark-mode [class*="fiche-"] svg line[stroke="#374151"],
body.dark-mode [class*="fiche-"] svg rect[stroke="#374151"] {
    stroke: #94a3b8 !important;
}
/* Text MathJax inside tableau (foreignObject): force a lisible light color */
body.dark-mode .tableau-mathjax svg foreignObject,
body.dark-mode .tableau-mathjax svg foreignObject *,
body.dark-mode .tableau-container svg foreignObject,
body.dark-mode .tableau-container svg foreignObject *,
body.dark-mode .correction-content svg foreignObject,
body.dark-mode .correction-content svg foreignObject *,
body.dark-mode .correction-bac svg foreignObject,
body.dark-mode .correction-bac svg foreignObject *,
body.dark-mode .enonce-content svg foreignObject,
body.dark-mode .enonce-content svg foreignObject *,
body.dark-mode [class*="cours-"] svg foreignObject,
body.dark-mode [class*="cours-"] svg foreignObject *,
body.dark-mode [class*="fiche-"] svg foreignObject,
body.dark-mode [class*="fiche-"] svg foreignObject * {
    color: #e2e8f0 !important;
}
/* Les signes "+" et "−" (dans les tableaux) sont des <text> SVG avec fill="#22c55e" ou "#ef4444"
   → on les rend un peu plus lumineux en dark mode pour garder le contraste */
body.dark-mode .tableau-mathjax svg text[fill="#22c55e"],
body.dark-mode .tableau-container svg text[fill="#22c55e"],
body.dark-mode .correction-content svg text[fill="#22c55e"],
body.dark-mode .correction-bac svg text[fill="#22c55e"],
body.dark-mode .enonce-content svg text[fill="#22c55e"],
body.dark-mode [class*="cours-"] svg text[fill="#22c55e"],
body.dark-mode [class*="fiche-"] svg text[fill="#22c55e"] {
    fill: #4ade80 !important;  /* green-400, plus lumineux */
}
body.dark-mode .tableau-mathjax svg text[fill="#ef4444"],
body.dark-mode .tableau-container svg text[fill="#ef4444"],
body.dark-mode .correction-content svg text[fill="#ef4444"],
body.dark-mode .correction-bac svg text[fill="#ef4444"],
body.dark-mode .enonce-content svg text[fill="#ef4444"],
body.dark-mode [class*="cours-"] svg text[fill="#ef4444"],
body.dark-mode [class*="fiche-"] svg text[fill="#ef4444"] {
    fill: #f87171 !important;  /* red-400, plus lumineux */
}
/* "0" des tableaux de signes (text fill="#374151" = gris très foncé)
   → en dark mode il devient invisible sur fond sombre, on le rend clair */
body.dark-mode .tableau-mathjax svg text[fill="#374151"],
body.dark-mode .tableau-container svg text[fill="#374151"],
body.dark-mode .correction-content svg text[fill="#374151"],
body.dark-mode .correction-bac svg text[fill="#374151"],
body.dark-mode .enonce-content svg text[fill="#374151"],
body.dark-mode .graph-svg-placeholder svg text[fill="#374151"],
body.dark-mode [class*="cours-"] svg text[fill="#374151"],
body.dark-mode [class*="fiche-"] svg text[fill="#374151"] {
    fill: #cbd5e1 !important;  /* slate-300, gris clair */
}

/* SVG text dans les graphiques en dark mode */
body.dark-mode .graph-svg-placeholder svg text {
    fill: #e2e8f0 !important;
}

/* Aide au calcul et formules tableur dans exercices bac */
body.dark-mode .aide-calcul {
    background: #1f2937 !important;
    border-color: #4b5563 !important;
    color: #f1f5f9 !important;
}
body.dark-mode .formule-tableur {
    background: #1e3a5f !important;
    border-color: #2563eb !important;
}
body.dark-mode .formule-tableur code {
    color: #93c5fd !important;
}

/* Texte générique : tout text-gray-700 et text-green-700 en dark mode */
body.dark-mode .text-green-700 {
    color: #d1fae5 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — FIX GÉNÉRAL pour les styles inline dans les contenus
   exercices / corrections / sujets bac / stages.
   Objectif : les fonds clairs inline deviennent sombres, et les
   couleurs de texte sémantiques inline restent lisibles (adoucies).
   Scope : .correction-bac, .correction-content, .exercice-enonce,
   .enonce-content, .correction-section — c.-à-d. les conteneurs
   où le contenu élève est rendu.
   ═══════════════════════════════════════════════════════════════ */

/* -- 1. Fonds CLAIRS inline (style="background:#xxx") → fond sombre -- */
body.dark-mode .correction-bac [style*="background:#fff"],
body.dark-mode .correction-bac [style*="background: #fff"],
body.dark-mode .correction-bac [style*="background:white"],
body.dark-mode .correction-bac [style*="background: white"],
body.dark-mode .correction-bac [style*="background:#fafafa"],
body.dark-mode .correction-bac [style*="background:#f9f9f9"],
body.dark-mode .correction-bac [style*="background:#f8f9fa"],
body.dark-mode .correction-bac [style*="background:#f8fafc"],
body.dark-mode .correction-bac [style*="background:#f9fafb"],
body.dark-mode .correction-bac [style*="background:#f5f5f5"],
body.dark-mode .correction-bac [style*="background:#f3f4f6"],
body.dark-mode .correction-bac [style*="background:#f1f5f9"],
body.dark-mode .correction-bac [style*="background:#e2e8f0"],
body.dark-mode .correction-bac [style*="background:#f0f0f0"],
body.dark-mode .correction-bac [style*="background:#e0f2fe"],
body.dark-mode .correction-bac [style*="background:#dbeafe"],
body.dark-mode .correction-bac [style*="background:#eff6ff"],
body.dark-mode .correction-bac [style*="background:#f0f9ff"],
body.dark-mode .correction-bac [style*="background:#f0f7ff"],
body.dark-mode .correction-bac [style*="background:#ecfeff"],
body.dark-mode .correction-bac [style*="background:#dcfce7"],
body.dark-mode .correction-bac [style*="background:#f0fdf4"],
body.dark-mode .correction-bac [style*="background:#f0fdfa"],
body.dark-mode .correction-bac [style*="background:#ecfdf5"],
body.dark-mode .correction-bac [style*="background:#d1fae5"],
body.dark-mode .correction-bac [style*="background:#fef3c7"],
body.dark-mode .correction-bac [style*="background:#fffbeb"],
body.dark-mode .correction-bac [style*="background:#fde68a"],
body.dark-mode .correction-bac [style*="background:#fef9c3"],
body.dark-mode .correction-bac [style*="background:#fef2f2"],
body.dark-mode .correction-bac [style*="background:#fee2e2"],
body.dark-mode .correction-bac [style*="background:#fce7f3"],
body.dark-mode .correction-bac [style*="background:#fbcfe8"],
body.dark-mode .correction-bac [style*="background:#faf5ff"],
body.dark-mode .correction-bac [style*="background:#f3e8ff"],
body.dark-mode .correction-content [style*="background:#fff"],
body.dark-mode .correction-content [style*="background: #fff"],
body.dark-mode .correction-content [style*="background:white"],
body.dark-mode .correction-content [style*="background:#fafafa"],
body.dark-mode .correction-content [style*="background:#f8f9fa"],
body.dark-mode .correction-content [style*="background:#f8fafc"],
body.dark-mode .correction-content [style*="background:#f9fafb"],
body.dark-mode .correction-content [style*="background:#f0f9ff"],
body.dark-mode .correction-content [style*="background:#eff6ff"],
body.dark-mode .correction-content [style*="background:#e0f2fe"],
body.dark-mode .correction-content [style*="background:#fef3c7"],
body.dark-mode .correction-content [style*="background:#fffbeb"],
body.dark-mode .correction-content [style*="background:#dcfce7"],
body.dark-mode .correction-content [style*="background:#f0fdf4"],
body.dark-mode .enonce-content [style*="background:#fff"],
body.dark-mode .enonce-content [style*="background: #fff"],
body.dark-mode .enonce-content [style*="background:white"],
body.dark-mode .enonce-content [style*="background:#fafafa"],
body.dark-mode .enonce-content [style*="background:#f8f9fa"],
body.dark-mode .enonce-content [style*="background:#f9fafb"],
body.dark-mode .enonce-content [style*="background:#eff6ff"],
body.dark-mode .enonce-content [style*="background:#fef3c7"],
body.dark-mode .enonce-content [style*="background:#fffbeb"],
body.dark-mode .exercice-enonce [style*="background:#fff"],
body.dark-mode .exercice-enonce [style*="background:white"],
body.dark-mode .exercice-enonce [style*="background:#f8f9fa"],
body.dark-mode .exercice-enonce [style*="background:#f9fafb"],
body.dark-mode .exercice-enonce [style*="background:#fafafa"],
body.dark-mode .exercice-enonce [style*="background:#e0f2fe"],
body.dark-mode .exercice-enonce [style*="background:#eff6ff"],
body.dark-mode .exercice-enonce [style*="background:#fef3c7"],
body.dark-mode .exercice-enonce [style*="background:#fffbeb"] {
    background-color: #1e293b !important;
    color: #f1f5f9 !important;
}

/* -- 2. COULEURS sémantiques inline → version claire adaptée dark mode -- */
/* Bleus / cyans sombres → bleu clair */
body.dark-mode .correction-bac [style*="color:#0e7490"],
body.dark-mode .correction-bac [style*="color:#0891b2"],
body.dark-mode .correction-bac [style*="color:#0369a1"],
body.dark-mode .correction-bac [style*="color:#1d4ed8"],
body.dark-mode .correction-bac [style*="color:#1e40af"],
body.dark-mode .correction-bac [style*="color:#2563eb"],
body.dark-mode .correction-bac [style*="color:#3b82f6"],
body.dark-mode .correction-bac [style*="color:#1e90ff"],
body.dark-mode .correction-content [style*="color:#1d4ed8"],
body.dark-mode .correction-content [style*="color:#2563eb"],
body.dark-mode .correction-content [style*="color:#0369a1"],
body.dark-mode .enonce-content [style*="color:#1d4ed8"],
body.dark-mode .enonce-content [style*="color:#2563eb"] {
    color: #7dd3fc !important;
}

/* Verts / teals → vert clair */
body.dark-mode .correction-bac [style*="color:#0d9488"],
body.dark-mode .correction-bac [style*="color:#059669"],
body.dark-mode .correction-bac [style*="color:#16a34a"],
body.dark-mode .correction-bac [style*="color:#22c55e"],
body.dark-mode .correction-bac [style*="color:#166534"],
body.dark-mode .correction-bac [style*="color:#047857"],
body.dark-mode .correction-bac [style*="color:#15803d"],
body.dark-mode .correction-content [style*="color:#16a34a"],
body.dark-mode .correction-content [style*="color:#059669"],
body.dark-mode .correction-content [style*="color:#166534"],
body.dark-mode .enonce-content [style*="color:#16a34a"] {
    color: #86efac !important;
}

/* Ambres / oranges → jaune clair */
body.dark-mode .correction-bac [style*="color:#d97706"],
body.dark-mode .correction-bac [style*="color:#b45309"],
body.dark-mode .correction-bac [style*="color:#f59e0b"],
body.dark-mode .correction-bac [style*="color:#ca8a04"],
body.dark-mode .correction-bac [style*="color:#854d0e"],
body.dark-mode .correction-content [style*="color:#d97706"],
body.dark-mode .correction-content [style*="color:#b45309"] {
    color: #fcd34d !important;
}

/* Violets / purples → violet clair */
body.dark-mode .correction-bac [style*="color:#7c3aed"],
body.dark-mode .correction-bac [style*="color:#8b5cf6"],
body.dark-mode .correction-bac [style*="color:#a855f7"],
body.dark-mode .correction-bac [style*="color:#9333ea"],
body.dark-mode .correction-bac [style*="color:#6b21a8"],
body.dark-mode .correction-content [style*="color:#7c3aed"] {
    color: #c4b5fd !important;
}

/* Rouges → rouge clair */
body.dark-mode .correction-bac [style*="color:#dc2626"],
body.dark-mode .correction-bac [style*="color:#b91c1c"],
body.dark-mode .correction-bac [style*="color:#991b1b"],
body.dark-mode .correction-bac [style*="color:#ef4444"],
body.dark-mode .correction-bac [style*="color:#e11d48"],
body.dark-mode .correction-bac [style*="color:#be185d"],
body.dark-mode .correction-content [style*="color:#dc2626"],
body.dark-mode .enonce-content [style*="color:#dc2626"] {
    color: #fca5a5 !important;
}

/* Roses → rose clair */
body.dark-mode .correction-bac [style*="color:#ec4899"],
body.dark-mode .correction-bac [style*="color:#db2777"] {
    color: #f9a8d4 !important;
}

/* Gris sombres → gris clair */
body.dark-mode .correction-bac [style*="color:#374151"],
body.dark-mode .correction-bac [style*="color:#4b5563"],
body.dark-mode .correction-bac [style*="color:#6b7280"],
body.dark-mode .correction-bac [style*="color:#1f2937"],
body.dark-mode .correction-bac [style*="color:#1e293b"],
body.dark-mode .correction-bac [style*="color:#111827"],
body.dark-mode .correction-content [style*="color:#374151"],
body.dark-mode .correction-content [style*="color:#6b7280"] {
    color: #cbd5e1 !important;
}

/* -- 3. Classes Tailwind bg-*-50/100 (fonds ultra-clairs) → fond sombre -- */
body.dark-mode .correction-bac .bg-gray-50,
body.dark-mode .correction-bac .bg-blue-50,
body.dark-mode .correction-bac .bg-indigo-50,
body.dark-mode .correction-bac .bg-purple-50,
body.dark-mode .correction-bac .bg-pink-50,
body.dark-mode .correction-bac .bg-red-50,
body.dark-mode .correction-bac .bg-orange-50,
body.dark-mode .correction-bac .bg-amber-50,
body.dark-mode .correction-bac .bg-yellow-50,
body.dark-mode .correction-bac .bg-lime-50,
body.dark-mode .correction-bac .bg-emerald-50,
body.dark-mode .correction-bac .bg-teal-50,
body.dark-mode .correction-bac .bg-cyan-50,
body.dark-mode .correction-bac .bg-sky-50,
body.dark-mode .correction-bac .bg-slate-50,
body.dark-mode .correction-bac .bg-stone-50,
body.dark-mode .correction-bac .bg-zinc-50,
body.dark-mode .correction-bac .bg-neutral-50,
body.dark-mode .exercice-enonce .bg-gray-50,
body.dark-mode .exercice-enonce .bg-blue-50,
body.dark-mode .exercice-enonce .bg-yellow-50,
body.dark-mode .exercice-enonce .bg-amber-50,
body.dark-mode .enonce-content .bg-gray-50,
body.dark-mode .enonce-content .bg-blue-50 {
    background-color: #1e293b !important;
    color: #f1f5f9;
}

body.dark-mode .correction-bac .bg-gray-100,
body.dark-mode .correction-bac .bg-slate-100,
body.dark-mode .correction-bac .bg-blue-100,
body.dark-mode .correction-bac .bg-indigo-100,
body.dark-mode .correction-bac .bg-purple-100 {
    background-color: #334155 !important;
    color: #f1f5f9;
}

/* -- 4. Texte text-gray-700/800 dans les fonds clairs Tailwind → clair -- */
body.dark-mode .correction-bac .text-gray-700,
body.dark-mode .correction-bac .text-gray-800,
body.dark-mode .correction-bac .text-gray-900,
body.dark-mode .correction-bac .text-slate-700,
body.dark-mode .correction-bac .text-slate-800 {
    color: #e2e8f0 !important;
}

body.dark-mode .correction-bac .text-blue-700,
body.dark-mode .correction-bac .text-blue-800,
body.dark-mode .correction-bac .text-indigo-700 {
    color: #93c5fd !important;
}

body.dark-mode .correction-bac .text-purple-700,
body.dark-mode .correction-bac .text-purple-800 {
    color: #c4b5fd !important;
}

body.dark-mode .correction-bac .text-amber-700,
body.dark-mode .correction-bac .text-amber-800,
body.dark-mode .correction-bac .text-yellow-700,
body.dark-mode .correction-bac .text-yellow-800 {
    color: #fcd34d !important;
}

body.dark-mode .correction-bac .text-red-700,
body.dark-mode .correction-bac .text-red-800 {
    color: #fca5a5 !important;
}

/* -- 5. Bordures claires → bordures sombres -- */
body.dark-mode .correction-bac [style*="border:1px solid #e5e7eb"],
body.dark-mode .correction-bac [style*="border: 1px solid #e5e7eb"],
body.dark-mode .correction-bac [style*="border:1px solid #dee2e6"],
body.dark-mode .correction-bac [style*="border: 1px solid #dee2e6"],
body.dark-mode .correction-bac [style*="border:1px solid #d1d5db"],
body.dark-mode .correction-bac [style*="border:1px solid #cbd5e1"] {
    border-color: #475569 !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — EXCEPTION : Modales/conteneurs à fond CLAIR
   La modale exercice bilan a background:white même en dark mode.
   Le MathJax doit rester NOIR dedans, pas blanc.
   Ces règles DOIVENT être APRÈS les règles dark-mode globales
   pour les surcharger grâce à la spécificité.
   ═══════════════════════════════════════════════════════════════ */
body.dark-mode #exercice-modal-bilan mjx-container,
body.dark-mode #exercice-modal-bilan mjx-container *,
body.dark-mode #exercice-modal-bilan mjx-math,
body.dark-mode #exercice-modal-bilan mjx-math *,
body.dark-mode #exercice-modal-bilan mjx-mi,
body.dark-mode #exercice-modal-bilan mjx-mo,
body.dark-mode #exercice-modal-bilan mjx-mn,
body.dark-mode #exercice-modal-bilan mjx-mtext,
body.dark-mode #exercice-modal-bilan mjx-mrow,
body.dark-mode #exercice-modal-bilan mjx-mfrac,
body.dark-mode #exercice-modal-bilan mjx-msqrt,
body.dark-mode #exercice-modal-bilan mjx-msup,
body.dark-mode #exercice-modal-bilan mjx-msub,
body.dark-mode #exercice-modal-bilan mjx-mover,
body.dark-mode #exercice-modal-bilan mjx-munder,
body.dark-mode #exercice-modal-bilan mjx-mtd,
body.dark-mode #exercice-modal-bilan mjx-c,
body.dark-mode #exercice-modal-bilan .MathJax,
body.dark-mode #exercice-modal-bilan .MathJax * {
    color: #1f2937 !important;
    fill: #1f2937 !important;
}
body.dark-mode #exercice-modal-bilan mjx-container svg,
body.dark-mode #exercice-modal-bilan mjx-container svg *,
body.dark-mode #exercice-modal-bilan mjx-container path,
body.dark-mode #exercice-modal-bilan mjx-container rect,
body.dark-mode #exercice-modal-bilan mjx-container line {
    stroke: #1f2937 !important;
    fill: #1f2937 !important;
}
body.dark-mode #exercice-modal-bilan mjx-container [style*="border"] {
    border-color: #1f2937 !important;
}
body.dark-mode #exercice-modal-bilan .mathjax-content,
body.dark-mode #exercice-modal-bilan .exercice-enonce,
body.dark-mode #exercice-modal-bilan .correction-content {
    color: #1f2937 !important;
}

/* Même exception pour toute modale avec fond blanc superposée en dark mode */
body.dark-mode [style*="background:white"] mjx-container,
body.dark-mode [style*="background:white"] mjx-container *,
body.dark-mode [style*="background: white"] mjx-container,
body.dark-mode [style*="background: white"] mjx-container * {
    color: #1f2937 !important;
    fill: #1f2937 !important;
}

/* --- Texte des QCM en dark mode (questions, options, explications) --- */
body.dark-mode .qcm-question {
    color: #d1d5db !important;
}
body.dark-mode .qcm-option,
body.dark-mode .qcm-option span,
body.dark-mode .option-btn,
body.dark-mode .qcm-option-btn {
    color: #e2e8f0 !important;
}
body.dark-mode .qcm-option .text-gray-700,
body.dark-mode .qcm-option .text-gray-600 {
    color: #d1d5db !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — INLINE STYLE OVERRIDES
   Certains cours (1ère maths, etc.) utilisent des styles inline
   (style="background: white") au lieu de classes Tailwind.
   On utilise des sélecteurs d'attributs + !important.
   ═══════════════════════════════════════════════════════════════ */

/* Fonds blancs inline (avec et sans espace après :) */
body.dark-mode #theme-content [style*="background: white"],
body.dark-mode #theme-content [style*="background:white"],
body.dark-mode #theme-content [style*="background:#fff"],
body.dark-mode #theme-content [style*="background: #fff"],
body.dark-mode #theme-content [style*="background-color: white"],
body.dark-mode #theme-content [style*="background-color:white"],
body.dark-mode #theme-content [style*="background-color:#fff"],
body.dark-mode #theme-content [style*="background-color: #fff"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Fonds gris très clair inline (#f8fafc = slate-50) */
body.dark-mode #theme-content [style*="background: #f8fafc"],
body.dark-mode #theme-content [style*="background:#f8fafc"],
body.dark-mode #theme-content [style*="background-color: #f8fafc"],
body.dark-mode #theme-content [style*="background: #f1f5f9"],
body.dark-mode #theme-content [style*="background:#f1f5f9"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Gradients bleu clair inline */
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#eff6ff"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#dbeafe"] {
    background: linear-gradient(135deg, #172554 0%, #1e3a5f 100%) !important;
    color: #bfdbfe !important;
}

/* Gradients jaune/ambre clair inline */
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#fef3c7"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#fde68a"] {
    background: linear-gradient(135deg, #422006 0%, #713f12 100%) !important;
    color: #fef08a !important;
}

/* Gradients vert clair inline */
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#f0fdf4"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#dcfce7"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#ecfdf5"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#d1fae5"] {
    background: linear-gradient(135deg, #052e16 0%, #064e3b 100%) !important;
    color: #bbf7d0 !important;
}

/* Gradients rose/pink clair inline */
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#fce7f3"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#fbcfe8"] {
    background: linear-gradient(135deg, #500724 0%, #831843 100%) !important;
    color: #fbcfe8 !important;
}

/* Gradients violet clair inline */
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#faf5ff"],
body.dark-mode #theme-content [style*="background: linear-gradient"][style*="#f3e8ff"] {
    background: linear-gradient(135deg, #3b0764 0%, #581c87 100%) !important;
    color: #e9d5ff !important;
}

/* Fonds couleur pleine clairs inline */
body.dark-mode #theme-content [style*="background: #dcfce7"],
body.dark-mode #theme-content [style*="background:#dcfce7"] {
    background: #052e16 !important;
    color: #bbf7d0 !important;
}
body.dark-mode #theme-content [style*="background: #fef9c3"],
body.dark-mode #theme-content [style*="background:#fef9c3"] {
    background: #422006 !important;
    color: #fef08a !important;
}
body.dark-mode #theme-content [style*="background: #fee2e2"],
body.dark-mode #theme-content [style*="background:#fee2e2"] {
    background: #450a0a !important;
    color: #fecaca !important;
}

/* Fonds ambre/jaune clair inline (#fef3c7) */
body.dark-mode #theme-content [style*="background: #fef3c7"],
body.dark-mode #theme-content [style*="background:#fef3c7"] {
    background: #422006 !important;
    color: #fef08a !important;
}

/* Fonds bleu clair inline */
body.dark-mode #theme-content [style*="background: #eff6ff"],
body.dark-mode #theme-content [style*="background:#eff6ff"],
body.dark-mode #theme-content [style*="background: #dbeafe"],
body.dark-mode #theme-content [style*="background:#dbeafe"] {
    background: #172554 !important;
    color: #bfdbfe !important;
}

/* Fonds indigo clair inline (#eef2ff) */
body.dark-mode #theme-content [style*="background: #eef2ff"],
body.dark-mode #theme-content [style*="background:#eef2ff"] {
    background: #1e1b4b !important;
    color: #c7d2fe !important;
}

/* Fonds vert clair inline (#f0fdf4) */
body.dark-mode #theme-content [style*="background: #f0fdf4"],
body.dark-mode #theme-content [style*="background:#f0fdf4"] {
    background: #052e16 !important;
    color: #bbf7d0 !important;
}

/* Fonds teal/cyan clair inline */
body.dark-mode #theme-content [style*="background: #f0fdfa"],
body.dark-mode #theme-content [style*="background:#f0fdfa"],
body.dark-mode #theme-content [style*="background: #ccfbf1"],
body.dark-mode #theme-content [style*="background:#ccfbf1"],
body.dark-mode #theme-content [style*="background: #cffafe"],
body.dark-mode #theme-content [style*="background:#cffafe"] {
    background: #042f2e !important;
    color: #99f6e4 !important;
}

/* Fonds rouge/rose clair inline (#fef2f2) */
body.dark-mode #theme-content [style*="background: #fef2f2"],
body.dark-mode #theme-content [style*="background:#fef2f2"] {
    background: #450a0a !important;
    color: #fecaca !important;
}

/* Fonds violet clair inline (#f5f3ff) */
body.dark-mode #theme-content [style*="background: #f5f3ff"],
body.dark-mode #theme-content [style*="background:#f5f3ff"] {
    background: #3b0764 !important;
    color: #e9d5ff !important;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE OVERRIDES — Couleurs supplémentaires (2nde + 1ère)
   ═══════════════════════════════════════════════════════════════ */

/* --- Gris clairs --- */
body.dark-mode #theme-content [style*="background: #f9fafb"],
body.dark-mode #theme-content [style*="background:#f9fafb"],
body.dark-mode #theme-content [style*="background: #fafafa"],
body.dark-mode #theme-content [style*="background:#fafafa"],
body.dark-mode #theme-content [style*="background: #f1f5f9"],
body.dark-mode #theme-content [style*="background:#f1f5f9"],
body.dark-mode #theme-content [style*="background: #e2e8f0"],
body.dark-mode #theme-content [style*="background:#e2e8f0"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* --- Orange / Ambre clairs --- */
body.dark-mode #theme-content [style*="background: #fff7ed"],
body.dark-mode #theme-content [style*="background:#fff7ed"],
body.dark-mode #theme-content [style*="background: #ffedd5"],
body.dark-mode #theme-content [style*="background:#ffedd5"],
body.dark-mode #theme-content [style*="background: #fed7aa"],
body.dark-mode #theme-content [style*="background:#fed7aa"],
body.dark-mode #theme-content [style*="background: #fffbeb"],
body.dark-mode #theme-content [style*="background:#fffbeb"],
body.dark-mode #theme-content [style*="background: #fefce8"],
body.dark-mode #theme-content [style*="background:#fefce8"] {
    background: #422006 !important;
    color: #fef08a !important;
}

/* --- Cyan / Sky clairs --- */
body.dark-mode #theme-content [style*="background: #ecfeff"],
body.dark-mode #theme-content [style*="background:#ecfeff"],
body.dark-mode #theme-content [style*="background: #f0f9ff"],
body.dark-mode #theme-content [style*="background:#f0f9ff"],
body.dark-mode #theme-content [style*="background: #e0f2fe"],
body.dark-mode #theme-content [style*="background:#e0f2fe"],
body.dark-mode #theme-content [style*="background: #bae6fd"],
body.dark-mode #theme-content [style*="background:#bae6fd"] {
    background: #082f49 !important;
    color: #7dd3fc !important;
}

/* --- Rose / Fuchsia clairs --- */
body.dark-mode #theme-content [style*="background: #fdf4ff"],
body.dark-mode #theme-content [style*="background:#fdf4ff"],
body.dark-mode #theme-content [style*="background: #fae8ff"],
body.dark-mode #theme-content [style*="background:#fae8ff"],
body.dark-mode #theme-content [style*="background: #f5d0fe"],
body.dark-mode #theme-content [style*="background:#f5d0fe"],
body.dark-mode #theme-content [style*="background: #fdf2f8"],
body.dark-mode #theme-content [style*="background:#fdf2f8"],
body.dark-mode #theme-content [style*="background: #fce7f3"],
body.dark-mode #theme-content [style*="background:#fce7f3"] {
    background: #500724 !important;
    color: #fbcfe8 !important;
}

/* --- Indigo clairs --- */
body.dark-mode #theme-content [style*="background: #e0e7ff"],
body.dark-mode #theme-content [style*="background:#e0e7ff"],
body.dark-mode #theme-content [style*="background: #c7d2fe"],
body.dark-mode #theme-content [style*="background:#c7d2fe"],
body.dark-mode #theme-content [style*="background: #ede9fe"],
body.dark-mode #theme-content [style*="background:#ede9fe"] {
    background: #1e1b4b !important;
    color: #c7d2fe !important;
}

/* --- Vert émeraude clairs --- */
body.dark-mode #theme-content [style*="background: #ecfdf5"],
body.dark-mode #theme-content [style*="background:#ecfdf5"],
body.dark-mode #theme-content [style*="background: #d1fae5"],
body.dark-mode #theme-content [style*="background:#d1fae5"],
body.dark-mode #theme-content [style*="background: #bbf7d0"],
body.dark-mode #theme-content [style*="background:#bbf7d0"] {
    background: #052e16 !important;
    color: #bbf7d0 !important;
}

/* --- Gradients gris clair inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#f1f5f9"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#e2e8f0"] {
    background: linear-gradient(135deg, #1e293b 0%, #334155 100%) !important;
    color: #e2e8f0 !important;
}

/* --- Gradients orange/ambre inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fff7ed"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#ffedd5"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fed7aa"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fffbeb"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fefce8"] {
    background: linear-gradient(135deg, #422006 0%, #713f12 100%) !important;
    color: #fef08a !important;
}

/* --- Gradients cyan/sky inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#ecfeff"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#e0f2fe"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#bae6fd"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#f0f9ff"] {
    background: linear-gradient(135deg, #082f49 0%, #0c4a6e 100%) !important;
    color: #7dd3fc !important;
}

/* --- Gradients rose/fuchsia/pink inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fdf4ff"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fae8ff"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#f5d0fe"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fdf2f8"] {
    background: linear-gradient(135deg, #500724 0%, #831843 100%) !important;
    color: #fbcfe8 !important;
}

/* --- Gradients rouge clair inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fef2f2"][style*="#fecaca"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#fef2f2"][style*="#fee2e2"] {
    background: linear-gradient(135deg, #450a0a 0%, #7f1d1d 100%) !important;
    color: #fecaca !important;
}

/* --- Gradients indigo inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#e0e7ff"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#ede9fe"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#eef2ff"][style*="#e0e7ff"] {
    background: linear-gradient(135deg, #1e1b4b 0%, #312e81 100%) !important;
    color: #c7d2fe !important;
}

/* --- Gradients émeraude/teal inline --- */
body.dark-mode #theme-content [style*="linear-gradient"][style*="#ecfdf5"][style*="#f0fdf4"],
body.dark-mode #theme-content [style*="linear-gradient"][style*="#ccfbf1"][style*="#cffafe"] {
    background: linear-gradient(135deg, #052e16 0%, #042f2e 100%) !important;
    color: #99f6e4 !important;
}

/* ═══════════════════════════════════════════════════════════════
   INLINE OVERRIDES — background-color: variantes
   Certains cours utilisent background-color au lieu de background
   ═══════════════════════════════════════════════════════════════ */

body.dark-mode #theme-content [style*="background-color: #dcfce7"],
body.dark-mode #theme-content [style*="background-color:#dcfce7"] {
    background-color: #052e16 !important;
    color: #bbf7d0 !important;
}
body.dark-mode #theme-content [style*="background-color: #dbeafe"],
body.dark-mode #theme-content [style*="background-color:#dbeafe"] {
    background-color: #172554 !important;
    color: #bfdbfe !important;
}
body.dark-mode #theme-content [style*="background-color: #fdf2f8"],
body.dark-mode #theme-content [style*="background-color:#fdf2f8"] {
    background-color: #500724 !important;
    color: #fbcfe8 !important;
}
body.dark-mode #theme-content [style*="background-color: #fce7f3"],
body.dark-mode #theme-content [style*="background-color:#fce7f3"] {
    background-color: #500724 !important;
    color: #fbcfe8 !important;
}
body.dark-mode #theme-content [style*="background-color: #f3e8ff"],
body.dark-mode #theme-content [style*="background-color:#f3e8ff"] {
    background-color: #3b0764 !important;
    color: #e9d5ff !important;
}

/* Violet clair manquant (#f3e8ff via background:) */
body.dark-mode #theme-content [style*="background: #f3e8ff"],
body.dark-mode #theme-content [style*="background:#f3e8ff"] {
    background: #3b0764 !important;
    color: #e9d5ff !important;
}

/* Gris clair #f0f4f8 (custom) */
body.dark-mode #theme-content [style*="background: #f0f4f8"],
body.dark-mode #theme-content [style*="background:#f0f4f8"] {
    background: #1e293b !important;
    color: #e2e8f0 !important;
}

/* Semi-transparent blanc (dans 6ème) — rendre plus visible en dark */
body.dark-mode #theme-content [style*="background:rgba(255,255,255,0.2)"],
body.dark-mode #theme-content [style*="background: rgba(255,255,255,0.2)"] {
    background: rgba(255,255,255,0.08) !important;
}

/* ═══════════════════════════════════════════════════════════════
   DARK MODE — COMPOSANTS MANQUANTS (audit mars 2026)
   ═══════════════════════════════════════════════════════════════ */

/* --- Pass (fiches élève) --- */
body.dark-mode .pass-tab:not(.active) { background: #334155; color: #94a3b8; }
body.dark-mode .pass-tab:not(.active):hover { background: #475569; color: #e2e8f0; }
body.dark-mode .pass-fiche-card { background: #1e293b; border-color: #334155; color: #e2e8f0; }
body.dark-mode .pass-fiche-body { background: #1e293b; color: #e2e8f0; }

/* --- Aide au calcul (corrections bac) --- */
body.dark-mode .aide-calcul {
    background: #1e293b !important;
    border-color: #475569 !important;
    color: #e2e8f0 !important;
}
body.dark-mode .aide-calcul strong { color: #f1f5f9 !important; }

/* --- Utility backgrounds --- */
body.dark-mode .u-bg-success { background: #052e16; color: #bbf7d0; }
body.dark-mode .u-bg-warning { background: #422006; color: #fef08a; }
body.dark-mode .u-bg-danger  { background: #450a0a; color: #fecaca; }
body.dark-mode .u-bg-info    { background: #172554; color: #bfdbfe; }

/* --- Nav buttons hover --- */
body.dark-mode .nav button:hover { background: #334155; }

/* --- Boutons actions élève --- */
body.dark-mode .eleve-btn-planning { background: linear-gradient(135deg, #b45309, #92400e); }
body.dark-mode .eleve-btn-planning:hover { background: linear-gradient(135deg, #d97706, #b45309); }
body.dark-mode .eleve-btn-more { background: #334155; color: #94a3b8; }
body.dark-mode .eleve-btn-more:hover { background: #475569; color: #e2e8f0; }

/* --- Séparateur actions factures --- */
body.dark-mode .factures-actions-sep { background: #334155; }

/* ============================================
   NOTIFICATION FAMILLE - ZONE DANS MODALE COURS
   ============================================ */
.notif-famille-zone {
  transition: all 0.3s ease;
}
.notif-zone-ready {
  background: #eff6ff;
  border-color: #93c5fd;
}
.notif-zone-sent {
  background: #f0fdf4;
  border-color: #86efac;
}
.notif-zone-pending {
  background: #fefce8;
  border-color: #fde047;
}
.notif-famille-btn {
  background: #2563eb;
  color: #fff;
  border: none;
}
.notif-famille-btn:hover:not(:disabled) {
  background: #1d4ed8;
  transform: translateY(-1px);
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.3);
}
.notif-famille-btn:disabled {
  background: #94a3b8;
  cursor: not-allowed;
}

/* Pastille notification sur le planning */
.fc-event .notif-badge-planning {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  margin-left: 4px;
  vertical-align: middle;
}
.fc-event .notif-badge-sent { background: #22c55e; }
.fc-event .notif-badge-pending { background: #f59e0b; }

/* Statut visuel sur le planning */
.fc-event.cours-annule { opacity: 0.5; text-decoration: line-through; }
.fc-event.cours-reporte { opacity: 0.6; border-left: 3px solid #f97316 !important; }
.fc-event.cours-brouillon {
    opacity: 0.7;
    border-left: 3px solid #f59e0b !important;
    background-image: repeating-linear-gradient(
        -45deg,
        transparent,
        transparent 4px,
        rgba(245, 158, 11, 0.15) 4px,
        rgba(245, 158, 11, 0.15) 8px
    ) !important;
}
.fc-event.cours-brouillon::after {
    content: 'BROUILLON';
    position: absolute;
    top: 2px;
    right: 4px;
    font-size: 8px;
    font-weight: 700;
    color: #92400e;
    background: #fde68a;
    padding: 0px 4px;
    border-radius: 3px;
    line-height: 14px;
    letter-spacing: 0.5px;
}

/* Dark mode */
body.dark-mode .notif-zone-ready { background: #1e3a5f; border-color: #3b82f6; }
body.dark-mode .notif-zone-sent { background: #14532d; border-color: #22c55e; }
body.dark-mode .notif-zone-pending { background: #422006; border-color: #f59e0b; }
body.dark-mode .notif-famille-btn { background: #3b82f6; }
body.dark-mode .notif-famille-btn:hover:not(:disabled) { background: #2563eb; }

/* ========== Bouton Signaler une erreur (QCM) ========== */
.signal-erreur-btn { color: #9ca3af; }
.signal-erreur-btn:hover { color: #ef4444; }
body.dark-mode .signal-erreur-btn { color: #6b7280; }
body.dark-mode .signal-erreur-btn:hover { color: #f87171; }

/* Feedback QCM dark mode */
body.dark-mode .bg-green-100 { background: #064e3b !important; }
body.dark-mode .bg-red-100 { background: #450a0a !important; }
body.dark-mode .border-green-300 { border-color: #065f46 !important; }
body.dark-mode .border-red-300 { border-color: #7f1d1d !important; }
body.dark-mode .text-green-700 { color: #6ee7b7 !important; }
body.dark-mode .text-red-700 { color: #fca5a5 !important; }
body.dark-mode .text-gray-700 { color: #d1d5db !important; }

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  SAFARI-ONLY FIX (révocable, n'affecte ni Chrome ni Firefox)    ║
   ║                                                                  ║
   ║  Bug Safari/WebKit : un <svg> sans attribut `width`/`height`    ║
   ║  explicite, placé dans un conteneur `display:flex`, ne calcule  ║
   ║  pas correctement ses dimensions intrinsèques depuis le         ║
   ║  viewBox. Résultat : les SVG des tableaux MathJax (générés par  ║
   ║  svg-components.js) collapsent à 0 sur Safari et leurs          ║
   ║  <foreignObject> "s'échappent" du cadre.                        ║
   ║                                                                  ║
   ║  Fix : sur Safari uniquement (classe `.is-safari` posée par     ║
   ║  index.html), on convertit le wrapper flex en `display:block`   ║
   ║  centré par `text-align`. Le SVG retrouve son layout naturel    ║
   ║  (basé sur les dimensions du viewBox) et se centre via le       ║
   ║  `text-align: center` du parent.                                ║
   ║                                                                  ║
   ║  Limitation : ce fix règle la disposition du tableau (rect,    ║
   ║  lignes, "+", "-", "0" deviennent visibles). Si les LABELS      ║
   ║  MathJax restent invisibles à l'intérieur des <foreignObject>,  ║
   ║  c'est un bug séparé (CHTML + foreignObject sur Safari) qui    ║
   ║  nécessitera une autre approche.                                ║
   ║                                                                  ║
   ║  Pour révoquer : supprimer ce bloc + le bloc <script> dans      ║
   ║  index.html marqué "SAFARI-ONLY FIX". Aucun autre changement    ║
   ║  nécessaire.                                                    ║
   ╚══════════════════════════════════════════════════════════════════╝ */
html.is-safari .tableau-container,
html.is-safari .tableau-rendered {
  /* Filet de sécurité : si le SVG du tableau est plus large que le conteneur
     (ex : tableau de variations avec 5+ colonnes), permettre le scroll
     horizontal au lieu de tout casser. */
  overflow-x: auto;
}
/* IMPORTANT : pedagogie-v2-view.js retire la classe .tableau-container
   et la remplace par .tableau-rendered après injection du SVG (cf.
   ligne 3278 de pedagogie-v2-view.js). Sans cette extension, le fix
   Safari ne s'appliquait JAMAIS aux tableaux effectivement rendus. */
html.is-safari .tableau-container > .flex,
html.is-safari .tableau-rendered > .flex {
  display: block !important;
  text-align: center;
}
html.is-safari .tableau-container > .flex > svg,
html.is-safari .tableau-rendered > .flex > svg,
html.is-safari .tableau-container > svg,
html.is-safari .tableau-rendered > svg {
  display: inline-block;
  vertical-align: top;
  /* Forcer le respect de max-width:100% : l'SVG doit se redimensionner
     pour tenir dans le conteneur (Safari l'ignorait avec juste le style
     inline). Avec height:auto + viewBox, l'aspect ratio est préservé. */
  max-width: 100% !important;
  height: auto !important;
}

/* ╔══════════════════════════════════════════════════════════════════╗
   ║  FIX UNIVERSEL : cacher mjx-assistive-mml                       ║
   ║                                                                  ║
   ║  Problème observé sur Safari : MathJax 3 ajoute, à côté de       ║
   ║  chaque formule, un élément <mjx-assistive-mml> qui contient le ║
   ║  MathML brut (utile pour les lecteurs d'écran / accessibilité). ║
   ║  Cet élément est censé être visuellement invisible (clipping +  ║
   ║  dimensions 1×1px), mais sur Safari il devient visible comme   ║
   ║  un "pied gris" qui décale les formules.                        ║
   ║                                                                  ║
   ║  Fix : forcer le clipping via une règle CSS dans styles.css     ║
   ║  (chargée tôt). Chrome cache déjà natively ces éléments, donc  ║
   ║  cette règle est redondante mais inoffensive sur Chrome.        ║
   ║  L'accessibilité MathML reste préservée (lecteurs d'écran      ║
   ║  voient toujours le contenu, ils ignorent le clipping CSS).     ║
   ╚══════════════════════════════════════════════════════════════════╝ */
mjx-assistive-mml {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  border: 0 !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  -webkit-clip-path: inset(50%) !important;
  clip-path: inset(50%) !important;
  white-space: nowrap !important;
  user-select: none !important;
  pointer-events: none !important;
}

/* Note (2026-05-28) : tentative d'override de vertical-align retirée.
   Forcer une valeur uniforme (baseline ou -0.1em) marchait pour certaines
   formules mais en cassait d'autres car la hauteur effective de chaque
   mjx-container varie selon le contenu (exposants, fractions, etc.).
   MathJax CHTML calcule lui-même la bonne baseline pour chaque formule
   via sa configuration de fonte interne. On laisse donc ce calcul natif
   actif, sans override CSS. C'est ce que font Wikipédia et MathJax.org. */

/* --- Bug Safari #2 : `display:inline` sur mjx-container fait sauter à la
   ligne chaque `\(...\)` inline dans le texte. La règle existante
   `mjx-container { display: inline !important }` (injectée par
   pedagogie-unified.js) marche sur Chrome mais pas sur Safari, qui
   gère mal le `display:inline` sur les éléments custom non-HTML
   (mjx-math, mjx-mi, etc.) à l'intérieur de mjx-container.
   Sur Safari uniquement, on bascule en `inline-block` qui flue
   naturellement dans le texte sans forcer de retour à la ligne. */
html.is-safari mjx-container {
  display: inline-block !important;
  vertical-align: middle !important;
}
/* Conserver le display:block pour les formules display math `\[...\]` ou `$$...$$` */
html.is-safari mjx-container[display="true"] {
  display: block !important;
}

/* ─────────────────────────────────────────────────────────────────────
 * Responsive : SVG des cours s'adaptent à la largeur du parent.
 * Cible tous les SVG dans les wrappers de cours (.cours-XXX), à
 * l'exception des SVG en position absolue (qui ont un layout spécifique).
 * Sur grand écran : largeur intrinsèque préservée (max-width n'a pas d'effet).
 * Sur petit écran : SVG shrink jusqu'à la largeur du parent en gardant
 * son aspect ratio (height: auto + viewBox).
 * ───────────────────────────────────────────────────────────────────── */
[class^="cours-"] svg:not([style*="position:absolute"]),
[class*=" cours-"] svg:not([style*="position:absolute"]) {
  max-width: 100%;
  height: auto;
}

/* ─────────────────────────────────────────────────────────────────────
 * Anti-débordement MathJax — filet de sécurité pour les longues formules.
 * MathJax 3 rend `mjx-container` en inline-block et ne wrappe pas les
 * formules trop longues : sur petit écran, elles peuvent sortir de la
 * carte parent. On autorise un scroll horizontal sur les conteneurs de
 * contenu (cours, méthodes, exercices, corrections, QCM) en dernier
 * recours, et on force `max-width:100%` sur les formules en display math.
 * Idéalement, on casse manuellement les formules trop longues avec <br>.
 * ───────────────────────────────────────────────────────────────────── */
.correction-bac,
.method-solution,
.exemple-solution,
[class^="cours-"],
[class*=" cours-"],
.qcm-explication,
.tableau-container {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: visible;
}

/* Les formules en display math `$$...$$` ou `\\[...\\]` ne dépassent
 * jamais leur conteneur, et obtiennent un scroll horizontal si besoin. */
.correction-bac mjx-container[display="true"],
.method-solution mjx-container[display="true"],
.exemple-solution mjx-container[display="true"],
[class^="cours-"] mjx-container[display="true"],
[class*=" cours-"] mjx-container[display="true"] {
  max-width: 100%;
  overflow-x: auto;
  overflow-y: hidden;
}

/* ============================================
   JUSTIFICATION DU TEXTE PÉDAGOGIQUE (2026-06-05)
   Énoncés, corrigés, QCM, sujets bac et méthodes : prose
   justifiée. Les schémas, tableaux et encadrés centrés ne
   sont pas affectés (style inline / wrappers flex prioritaires).
   Phase test validée le 2026-06-05, généralisation à tous
   les conteneurs.
   ============================================ */

.exercice-enonce,
.enonce-content,
.enonce,
.devoir-enonce-preview,
.correction-content,
.correction-bac,
.correction-bac p,
.qcm-question,
.qcm-question-text,
.qcm-choice-text,
.question-text,
.exemple-enonce,
.exemple-solution,
.exemple-solution-suite {
  text-align: justify;
  -webkit-hyphens: auto;
  hyphens: auto;
}

/* Exceptions : restent alignés à gauche */
.correction-bac .formule,
.correction-bac .conclusion,
.correction-bac .question-title,
.aide-calcul,
.formule-tableur {
  text-align: left;
}

/* Cellules de tableaux : pas de césure automatique */
.exercice-enonce td, .exercice-enonce th,
.enonce-content td, .enonce-content th,
.enonce td, .enonce th,
.correction-content td, .correction-content th,
.correction-bac td, .correction-bac th {
  hyphens: none;
}

/* ═══════════════════════════════════════════════════════════════
   FIX AUDIT V1.1 (2026-06-11) — DARK MODE ÉLÈVE
   Deux causes d'illisibilité corrigées ici :
   1) Les modales élève sont montées directement sur <body> (hors #content) :
      les règles « body.dark-mode #content .bg-white → fond sombre » ne les
      couvraient pas, alors que les règles globales (mjx-container,
      .enonce-content, …) passent leur TEXTE en clair → blanc sur blanc.
   2) Les panneaux pastel en dégradé (bg-gradient-to-r from-*-50 : filtres
      exercices/QCM, bannière « Mode Quiz ») gardaient leur fond clair en
      dark mode pendant que leurs textes gris passaient en clair.
   ═══════════════════════════════════════════════════════════════ */

/* ── 1) Modales élève au niveau <body> : même traitement que #content ── */
body.dark-mode.eleve-mode > .fixed .bg-white {
  background-color: #1e293b !important;
  border-color: #334155 !important;
}
body.dark-mode.eleve-mode > .fixed .bg-gray-50,
body.dark-mode.eleve-mode > .fixed .bg-gray-100 {
  background-color: #0f172a !important;
  border-color: #334155 !important;
}
body.dark-mode.eleve-mode > .fixed .text-gray-800,
body.dark-mode.eleve-mode > .fixed .text-gray-700,
body.dark-mode.eleve-mode > .fixed .text-gray-900 {
  color: #e2e8f0 !important;
}
body.dark-mode.eleve-mode > .fixed .text-gray-600,
body.dark-mode.eleve-mode > .fixed .text-gray-500,
body.dark-mode.eleve-mode > .fixed .text-gray-400 {
  color: #94a3b8 !important;
}
body.dark-mode.eleve-mode > .fixed .border-b,
body.dark-mode.eleve-mode > .fixed .border-t,
body.dark-mode.eleve-mode > .fixed .border {
  border-color: #334155 !important;
}
/* Fonds pastel des sections d'énoncé/correction dans ces modales */
body.dark-mode.eleve-mode > .fixed .bg-orange-50 {
  background-color: #2d1a0f !important;
  border-color: #7c2d12 !important;
}
body.dark-mode.eleve-mode > .fixed .bg-green-50 {
  background-color: #0f2d22 !important;
  border-color: #065f46 !important;
}

/* ── 2) Panneaux pastel en dégradé : surface sombre en dark mode ── */
body.dark-mode #content .bg-gradient-to-r.from-gray-50,
body.dark-mode #content .bg-gradient-to-r.from-indigo-50,
body.dark-mode #content .bg-gradient-to-r.from-blue-50,
body.dark-mode #content .bg-gradient-to-r.from-yellow-50,
body.dark-mode #content .bg-gradient-to-r.from-red-50,
body.dark-mode #content .bg-gradient-to-r.from-purple-50,
body.dark-mode #content .bg-gradient-to-r.from-green-50,
body.dark-mode.eleve-mode > .fixed .bg-gradient-to-r.from-gray-50 {
  background: #1e293b !important;
  border-color: #334155 !important;
}
/* Textes gris de ces panneaux → variantes claires lisibles */
body.dark-mode #content .bg-gradient-to-r[class*="from-"] .text-gray-800,
body.dark-mode #content .bg-gradient-to-r[class*="from-"] .text-gray-700 {
  color: #e2e8f0 !important;
}
body.dark-mode #content .bg-gradient-to-r[class*="from-"] .text-gray-600,
body.dark-mode #content .bg-gradient-to-r[class*="from-"] .text-gray-500 {
  color: #94a3b8 !important;
}
/* Boutons/segments blancs internes (étoiles de difficulté, « Au moins un/Tous »,
   5/10/20 questions) : surface sombre + texte clair, bordures assorties */
body.dark-mode #content .bg-gradient-to-r[class*="from-"] .bg-white {
  background-color: #0f172a !important;
  border-color: #334155 !important;
  color: #e2e8f0 !important;
}
body.dark-mode #content .bg-gradient-to-r[class*="from-"] .border-gray-200 {
  border-color: #334155 !important;
}

/* ════════════════════════════════════════════════════════════════ */
/* Vague 5 — chantier 4 : garde-fous responsive mobile (Règle N°0-nodebord) */
/* ════════════════════════════════════════════════════════════════ */
@media (max-width: 640px) {
  /* Barre d'actions de sélection (Factures, Réglements…) : fixe et centrée,
     elle dépassait l'écran (même masquée en opacity:0). On la borne au
     viewport et on autorise le repli des boutons (et de leur rangée interne). */
  #selection-actions {
    max-width: 94vw;
    flex-wrap: wrap;
    justify-content: center;
    row-gap: 8px;
  }
  #selection-actions > div {
    flex-wrap: wrap;
    justify-content: center;
  }
  /* En-tête Factures : replier les groupes (navigation + actions) au lieu
     de déborder horizontalement. */
  .factures-header-top,
  .factures-nav-center,
  .factures-actions {
    flex-wrap: wrap;
  }
  .factures-nav-center {
    justify-content: center;
  }
}

/* ============================================
   Infobulles des actions de factures (survol)
   Remplace le title natif (lent/fade) par une bulle stylée immédiate.
   ============================================ */
.om-actions-cell button[data-tooltip] { position: relative; }

.om-actions-cell button[data-tooltip]:hover::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 7px);
  left: 50%;
  transform: translateX(-50%);
  background: #1e293b;
  color: #ffffff;
  font-size: 11px;
  font-weight: 600;
  line-height: 1.2;
  padding: 5px 9px;
  border-radius: 6px;
  white-space: nowrap;
  z-index: 60;
  pointer-events: none;
  box-shadow: 0 3px 10px rgba(0,0,0,0.22);
}

.om-actions-cell button[data-tooltip]:hover::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  border: 5px solid transparent;
  border-top-color: #1e293b;
  z-index: 60;
  pointer-events: none;
}