/**
 * DESIGN SYSTEM CYBERCONNECT V3.0
 * Refonte - Cahier des charges Section 4.4
 * Appliqué uniformément sur toutes les pages
 */

/* ==================== VARIABLES CSS ==================== */
:root {
  /* PALETTE DE COULEURS */
  --primary-color: #4F46E5;        /* Indigo */
  --secondary-color: #7C3AED;      /* Purple */
  --background-dark: #0F172A;      /* Dark Slate */
  --background-light: #F8FAFC;     /* Light Gray */
  --text-dark: #1E293B;            /* Slate 800 */
  --text-light: #64748B;           /* Slate 500 */
  --border-color: #E2E8F0;         /* Slate 200 */
  
  /* COULEURS POUR VISIBILITÉ SUR FOND NOIR */
  --text-white: #FFFFFF;           /* Blanc pur */
  --text-gray-light: #E2E8F0;      /* Gris très clair */
  --text-gray: #CBD5E0;            /* Gris clair */
  
  /* GRADIENTS */
  --gradient-main: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%);
  --gradient-hover: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%);
  
  /* TYPOGRAPHIE */
  --font-heading: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
  
  /* ESPACEMENTS */
  --spacing-xs: 0.25rem;   /* 4px */
  --spacing-sm: 0.5rem;    /* 8px */
  --spacing-md: 1rem;      /* 16px */
  --spacing-lg: 1.5rem;    /* 24px */
  --spacing-xl: 2rem;      /* 32px */
  --spacing-2xl: 3rem;     /* 48px */
  --spacing-3xl: 4rem;     /* 64px */
  
  /* BORDER RADIUS */
  --radius-sm: 0.25rem;    /* 4px */
  --radius-md: 0.5rem;     /* 8px */
  --radius-lg: 0.75rem;    /* 12px */
  --radius-xl: 1rem;       /* 16px */
  
  /* SHADOWS */
  --shadow-sm: 0 1px 2px 0 rgba(0, 0, 0, 0.05);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.1);
  --shadow-xl: 0 20px 25px -5px rgba(0, 0, 0, 0.1);
}

/* ==================== VISIBILITÉ GLOBALE (FOND NOIR) ==================== */
/* Force la visibilité du texte sur fond noir pour tous les éléments */
body {
  color: var(--text-white) !important;
  background-color: var(--background-dark);
}

h1, h2, h3, h4, h5, h6 {
  color: var(--text-white) !important;
}

p, span, div, li, td, th {
  color: var(--text-gray-light);
}

a {
  color: var(--text-white);
}

/* CARDS ET CONTAINERS - Texte visible */
.card, .glass-card, .feature-card, .program-card {
  color: var(--text-white) !important;
}

.card p, .glass-card p, .feature-card p, .program-card p {
  color: var(--text-gray-light) !important;
}

/* ==================== TYPOGRAPHIE ==================== */
h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color: var(--text-dark);
  line-height: 1.2;
  margin-top: 0;
}

h1 {
  font-size: clamp(2.5rem, 5vw, 4rem);
  margin-bottom: var(--spacing-xl);
}

h2 {
  font-size: clamp(2rem, 4vw, 3rem);
  margin-bottom: var(--spacing-lg);
}

h3 {
  font-size: clamp(1.5rem, 3vw, 2rem);
  margin-bottom: var(--spacing-md);
}

p {
  font-family: var(--font-body);
  font-size: clamp(1rem, 2vw, 1.125rem);
  line-height: 1.75;
  color: var(--text-light);
  margin-bottom: var(--spacing-md);
}

/* ==================== BOUTONS ==================== */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-sm);
  padding: var(--spacing-md) var(--spacing-xl);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 600;
  text-decoration: none;
  border: none;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.btn-primary {
  background: var(--gradient-main);
  color: white;
  box-shadow: var(--shadow-md);
}

.btn-primary:hover {
  background: var(--gradient-hover);
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
}

.btn-secondary {
  background: white;
  color: var(--primary-color);
  border: 2px solid var(--primary-color);
}

.btn-secondary:hover {
  background: var(--primary-color);
  color: white;
  transform: translateY(-2px);
}

.btn-large {
  padding: var(--spacing-lg) var(--spacing-2xl);
  font-size: 1.125rem;
}

.btn-small {
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: 0.875rem;
}

/* ==================== CONTENEURS ==================== */
.container {
  max-width: 80rem;
  margin: 0 auto;
  padding-left: var(--spacing-lg);
  padding-right: var(--spacing-lg);
}

.section {
  padding-top: var(--spacing-3xl);
  padding-bottom: var(--spacing-3xl);
}

.section-dark {
  background: var(--background-dark);
  color: white;
}

.section-light {
  background: var(--background-light);
}

/* ==================== CARTES ==================== */
.card {
  background: white;
  border-radius: var(--radius-lg);
  padding: var(--spacing-xl);
  box-shadow: var(--shadow-md);
  transition: all 0.3s ease;
}

.card:hover {
  box-shadow: var(--shadow-xl);
  transform: translateY(-4px);
}

.card-header {
  font-size: 1.25rem;
  font-weight: 700;
  color: var(--text-dark);
  margin-bottom: var(--spacing-md);
}

.card-body {
  color: var(--text-light);
}

/* ==================== GRILLES ==================== */
.grid {
  display: grid;
  gap: var(--spacing-lg);
}

.grid-cols-2 {
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
}

.grid-cols-3 {
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
}

.grid-cols-4 {
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
}

/* ==================== UTILITAIRES ==================== */
.text-center { text-align: center; }
.text-left { text-align: left; }
.text-right { text-align: right; }

.mt-0 { margin-top: 0; }
.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-md); }
.mt-3 { margin-top: var(--spacing-lg); }
.mt-4 { margin-top: var(--spacing-xl); }

.mb-0 { margin-bottom: 0; }
.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-md); }
.mb-3 { margin-bottom: var(--spacing-lg); }
.mb-4 { margin-bottom: var(--spacing-xl); }

.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-center { justify-content: center; }
.justify-between { justify-content: space-between; }
.gap-2 { gap: var(--spacing-md); }
.gap-3 { gap: var(--spacing-lg); }

/* ==================== RESPONSIVE ==================== */
@media (max-width: 768px) {
  :root {
    --spacing-3xl: 2rem;
    --spacing-2xl: 1.5rem;
  }
  
  .container {
    padding-left: var(--spacing-md);
    padding-right: var(--spacing-md);
  }
  
  .section {
    padding-top: var(--spacing-2xl);
    padding-bottom: var(--spacing-2xl);
  }
  
  .grid-cols-2,
  .grid-cols-3,
  .grid-cols-4 {
    grid-template-columns: 1fr;
  }
  
  /* BOUTONS RESPONSIVE */
  .btn {
    width: 100%;
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: 0.875rem;
  }
  
  .btn-large {
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: 1rem;
  }
  
  /* CARTES RESPONSIVE */
  .card {
    padding: var(--spacing-md);
  }
  
  /* HEADER RESPONSIVE */
  header nav {
    flex-wrap: wrap;
    gap: 0.5rem;
    font-size: 0.75rem;
  }
  
  header .flex.items-center.gap-3 {
    width: 100%;
    justify-content: space-between;
    margin-top: 0.5rem;
  }
}

@media (max-width: 480px) {
  h1 {
    font-size: 2rem;
  }
  
  h2 {
    font-size: 1.5rem;
  }
  
  h3 {
    font-size: 1.25rem;
  }
  
  p {
    font-size: 0.875rem;
  }
}