/**
 * Phase 1 - Vérification Application Design System
 * S'assurer que toutes les classes et variables sont correctement utilisées
 */

/* === Vérification Variables CSS === */
:root {
  /* S'assurer que toutes les variables du design system sont disponibles */
  --spacing-xs: var(--spacing-2, 0.5rem);
  --spacing-sm: var(--spacing-4, 1rem);
  --spacing-md: var(--spacing-6, 1.5rem);
  --spacing-lg: var(--spacing-8, 2rem);
  --spacing-xl: var(--spacing-12, 3rem);
  --spacing-2xl: var(--spacing-16, 4rem);
  
  /* Élévations */
  --elevation-0: none;
  --elevation-1: 0 1px 2px rgba(0, 0, 0, 0.04);
  --elevation-2: 0 2px 4px rgba(0, 0, 0, 0.06);
  --elevation-3: 0 4px 8px rgba(0, 0, 0, 0.08);
  --elevation-4: 0 8px 16px rgba(0, 0, 0, 0.1);
  --elevation-5: 0 16px 32px rgba(0, 0, 0, 0.12);
  
  /* Border Radius */
  --radius-sm: 4px;
  --radius-md: 8px;
  --radius-lg: 12px;
  --radius-xl: 16px;
  --radius-full: 9999px;
  
  /* Transitions */
  --transition-fast: 0.15s ease-out;
  --transition-base: 0.2s ease-out;
  --transition-slow: 0.3s ease-out;
  --animation-easing: cubic-bezier(0.4, 0, 0.2, 1);
}

/* === Application Élévations === */
.card,
.kpi-card-enhanced,
.feature-card,
.project-card,
.action-card,
.agenda-part-enhanced {
  box-shadow: var(--elevation-2);
}

.card:hover,
.kpi-card-enhanced:hover,
.feature-card:hover,
.project-card:hover,
.action-card:hover,
.agenda-part-enhanced:hover {
  box-shadow: var(--elevation-4);
}

.slide-navigation {
  box-shadow: var(--elevation-2);
}

/* === Application Border Radius === */
.card,
.kpi-card-enhanced,
.feature-card,
.project-card,
.action-card,
.agenda-part-enhanced,
.timeline-content-enhanced {
  border-radius: var(--radius-md);
}

.kpi-primary-card,
.cta-hero-enhanced {
  border-radius: var(--radius-lg);
}

.badge,
.value-badge,
.value-badge-small {
  border-radius: var(--radius-full);
}

/* === Application Transitions === */
.card,
button,
a,
.badge,
.icon-wrapper {
  transition-duration: var(--transition-base);
  transition-timing-function: var(--animation-easing);
}

/* === Vérification Classes Utilitaires === */
/* S'assurer que les classes du design system sont disponibles */

/* Container */
.container {
  max-width: 1280px;
  margin: 0 auto;
  padding: 0 var(--spacing-lg);
}

/* Grid */
.grid {
  display: grid;
  gap: var(--spacing-md);
}

.grid-cols-1 { grid-template-columns: repeat(1, 1fr); }
.grid-cols-2 { grid-template-columns: repeat(2, 1fr); }
.grid-cols-3 { grid-template-columns: repeat(3, 1fr); }
.grid-cols-4 { grid-template-columns: repeat(4, 1fr); }

/* Flex */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--spacing-2); }
.gap-4 { gap: var(--spacing-4); }
.gap-6 { gap: var(--spacing-6); }

/* === Harmonisation Typographie === */
h1, h2, h3, h4, h5, h6 {
  font-family: 'Montserrat', var(--font-family-base, sans-serif);
  font-weight: var(--font-weight-bold, 700);
  line-height: 1.2;
  margin: var(--spacing-md) 0 var(--spacing-sm);
}

h1 { font-size: var(--font-size-4xl, 2.25rem); }
h2 { font-size: var(--font-size-3xl, 1.875rem); }
h3 { font-size: var(--font-size-2xl, 1.5rem); }
h4 { font-size: var(--font-size-xl, 1.25rem); }

p {
  font-size: var(--font-size-base, 1rem);
  line-height: 1.6;
  margin: 0 0 var(--spacing-sm);
}

/* === Vérification Couleurs === */
/* S'assurer que les couleurs SOMEF sont utilisées partout */

.text-primary {
  color: var(--somef-primary, #d22741);
}

.text-secondary {
  color: var(--somef-secondary, #2b3c45);
}

.bg-primary {
  background-color: var(--somef-primary, #d22741);
}

.bg-secondary {
  background-color: var(--somef-secondary, #2b3c45);
}

.border-primary {
  border-color: var(--somef-primary, #d22741);
}

/* === Responsive Utilities === */
@media (max-width: 768px) {
  .container {
    padding: 0 var(--spacing-md);
  }
  
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
}