/* ═══════════════════════════════════════════════════════════════
   KREYOL IA — DESIGN SYSTEM
   Source unique de vérité pour tokens + primitives UI.
   À charger AVANT le <style> spécifique de chaque page :
   <link rel="stylesheet" href="/design-system.css">
   ═══════════════════════════════════════════════════════════════ */

:root {
  /* ── COULEURS DE BASE (extraites de index.html) ── */
  --kia-black:   #07080F;
  --kia-deep:    #0A0D1A;
  --kia-card:    #0D1120;
  --kia-card-2:  #111828;

  --kia-teal:      #00D4C8;
  --kia-teal-2:    #00E5D8;
  --kia-teal-dim:  rgba(0, 212, 200, 0.12);
  --kia-teal-mid:  rgba(0, 212, 200, 0.25);
  --kia-teal-line: rgba(0, 212, 200, 0.14);

  --kia-gold:      #E8931A;
  --kia-gold-2:    #FFAC40;
  --kia-gold-dim:  rgba(232, 147, 26, 0.12);
  --kia-gold-line: rgba(232, 147, 26, 0.14);

  --kia-green:   #00C87F;
  --kia-red:     #FF5A5F;   /* nouveau — manquant du code source, requis pour états d'erreur */

  --kia-text:    #E4EEF0;
  --kia-muted:   #5A7080;
  --kia-border:  rgba(0, 212, 200, 0.10);

  /* ── TYPOGRAPHIE ── */
  --kia-font-display: 'Rajdhani', sans-serif;   /* titres, nav, boutons */
  --kia-font-body:    'Outfit', sans-serif;     /* paragraphes, UI */
  --kia-font-mono:    'Space Mono', monospace;  /* data, code, prix */

  --kia-fs-xs:   0.72rem;
  --kia-fs-sm:   0.82rem;
  --kia-fs-base: 1rem;
  --kia-fs-md:   1.25rem;
  --kia-fs-lg:   1.6rem;
  --kia-fs-xl:   clamp(2rem, 5vw, 3.2rem);
  --kia-fs-hero: clamp(3.2rem, 8vw, 6.5rem);

  /* ── ESPACEMENT (échelle 4px) ── */
  --kia-space-1: 4px;
  --kia-space-2: 8px;
  --kia-space-3: 12px;
  --kia-space-4: 16px;
  --kia-space-5: 24px;
  --kia-space-6: 32px;
  --kia-space-7: 48px;
  --kia-space-8: 64px;

  /* ── RAYON / BORDURES ── */
  --kia-radius-sm:   6px;
  --kia-radius-md:   10px;
  --kia-radius-lg:   16px;
  --kia-radius-xl:   20px;
  --kia-radius-2xl:  28px;
  --kia-radius-pill: 100px;

  /* ── OMBRES ── */
  --kia-shadow-sm: 0 4px 16px rgba(0, 212, 200, 0.20);
  --kia-shadow-md: 0 8px 28px rgba(0, 212, 200, 0.35);
  --kia-shadow-gold: 0 4px 16px rgba(232, 147, 26, 0.30);

  /* ── TRANSITIONS ── */
  --kia-ease: cubic-bezier(0.23, 1, 0.32, 1);
  --kia-fast: 0.2s;
  --kia-med:  0.3s;
  --kia-slow: 0.5s;
  --kia-ease-spring: cubic-bezier(0.68, -0.55, 0.265, 1.55);

  /* ── LETTER-SPACING (import sélectif v13) ── */
  --kia-tracking-tight:  -0.025em;
  --kia-tracking-normal: 0;
  --kia-tracking-wide:   0.025em;
  --kia-tracking-wider:  0.05em;
  --kia-tracking-widest: 0.1em;

  /* ── LINE-HEIGHT (import sélectif v13) ── */
  --kia-leading-tight:  1.2;
  --kia-leading-snug:   1.375;
  --kia-leading-normal: 1.5;
  --kia-leading-relaxed: 1.625;

  /* ── Z-INDEX (échelle centralisée — évite les guerres de z-index) ── */
  --kia-z-base:     1;
  --kia-z-sticky:    10;
  --kia-z-nav:       100;
  --kia-z-overlay:   200;
  --kia-z-modal:     300;
  --kia-z-toast:     400;
  --kia-z-tooltip:   500;

  /* ── LAYOUT ── */
  --kia-container-max: 1280px;
  --kia-nav-height: 76px;
}

/* Breakpoints (documentés ici, à dupliquer dans les media queries —
   CSS ne permet pas var() dans @media, cf. commentaire d'usage plus bas) */
/* --kia-bp-sm: 480px  | --kia-bp-md: 640px | --kia-bp-lg: 860px | --kia-bp-xl: 1200px */

/* ═══ RESET ═══ */
*, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  background: var(--kia-black);
  color: var(--kia-text);
  font-family: var(--kia-font-body);
  font-weight: 300;
  overflow-x: hidden;
}

/* Respecte les préférences de mouvement réduit — obligatoire pour l'accessibilité */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ═══ FOCUS VISIBLE — jamais de outline:none sans remplacement ═══ */
:focus-visible {
  outline: 2px solid var(--kia-teal);
  outline-offset: 3px;
  border-radius: 4px;
}
:focus:not(:focus-visible) { outline: none; }

/* ═══ SKIP LINK — requis sur chaque page avant tout autre contenu ═══ */
.kia-skip-link {
  position: absolute;
  top: -100px;
  left: var(--kia-space-4);
  z-index: var(--kia-z-toast);
  background: var(--kia-teal);
  color: var(--kia-black);
  padding: var(--kia-space-3) var(--kia-space-5);
  border-radius: var(--kia-radius-sm);
  font-weight: 600;
  text-decoration: none;
  transition: top var(--kia-fast);
}
.kia-skip-link:focus { top: var(--kia-space-4); }

/* ═══ TYPOGRAPHIE UTILITAIRE ═══ */
.kia-h1, .kia-h2, .kia-h3 {
  font-family: var(--kia-font-display);
  font-weight: 700;
  line-height: 1.05;
  letter-spacing: 0.02em;
}
.kia-h1 { font-size: var(--kia-fs-hero); }
.kia-h2 { font-size: var(--kia-fs-xl); }
.kia-h3 { font-size: var(--kia-fs-lg); }
.kia-text-teal { color: var(--kia-teal); text-shadow: 0 0 20px rgba(0, 212, 200, 0.5); }
.kia-text-gold { color: var(--kia-gold); text-shadow: 0 0 20px rgba(232, 147, 26, 0.5); }
.kia-text-muted { color: var(--kia-muted); }

/* ═══ BOUTONS — 3 variantes couvrant tous les usages trouvés dans le code ═══ */
.kia-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--kia-space-2);
  padding: 14px 30px;
  border: none;
  border-radius: var(--kia-radius-sm);
  font-family: var(--kia-font-body);
  font-size: var(--kia-fs-sm);
  font-weight: 600;
  letter-spacing: 0.04em;
  cursor: pointer;
  text-decoration: none;
  transition: transform var(--kia-fast), box-shadow var(--kia-fast), opacity var(--kia-fast);
  min-height: 44px; /* zone tactile min. — WCAG 2.5.5 */
}
.kia-btn:hover { transform: translateY(-2px); }
.kia-btn:active { transform: translateY(0); }
.kia-btn:disabled,
.kia-btn[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
  transform: none !important;
  pointer-events: none;
}

.kia-btn--primary {
  background: linear-gradient(135deg, var(--kia-teal), #009990);
  color: var(--kia-black);
  box-shadow: var(--kia-shadow-sm);
}
.kia-btn--primary:hover { box-shadow: var(--kia-shadow-md); }

.kia-btn--secondary {
  background: transparent;
  color: var(--kia-teal);
  border: 1px solid rgba(0, 212, 200, 0.35);
}
.kia-btn--secondary:hover { background: var(--kia-teal-dim); border-color: var(--kia-teal); }

.kia-btn--ghost {
  background: transparent;
  color: var(--kia-muted);
  padding: var(--kia-space-2) var(--kia-space-4);
}
.kia-btn--ghost:hover { color: var(--kia-teal); }

/* Spinner de chargement pour boutons — état "loading" cohérent partout */
.kia-btn[data-loading="true"] { color: transparent !important; pointer-events: none; position: relative; }
.kia-btn[data-loading="true"]::after {
  content: "";
  position: absolute;
  width: 16px; height: 16px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
  color: var(--kia-black);
  animation: kia-spin 0.7s linear infinite;
}
@keyframes kia-spin { to { transform: rotate(360deg); } }

/* ═══ CHAMPS DE FORMULAIRE ═══ */
.kia-field { display: flex; flex-direction: column; gap: var(--kia-space-2); margin-bottom: var(--kia-space-4); }
.kia-label { font-size: var(--kia-fs-sm); color: var(--kia-muted); font-weight: 500; }
.kia-input, .kia-textarea, .kia-select {
  background: var(--kia-card);
  border: 1px solid var(--kia-border);
  border-radius: var(--kia-radius-sm);
  color: var(--kia-text);
  padding: 12px 16px;
  font-family: var(--kia-font-body);
  font-size: var(--kia-fs-base);
  transition: border-color var(--kia-fast);
}
.kia-input:focus, .kia-textarea:focus, .kia-select:focus { border-color: var(--kia-teal); }
.kia-input[aria-invalid="true"] { border-color: var(--kia-red); }
.kia-field-error { color: var(--kia-red); font-size: var(--kia-fs-xs); }

/* ═══ CARTES ═══ */
.kia-card {
  background: var(--kia-card);
  border: 1px solid var(--kia-border);
  border-radius: var(--kia-radius-lg);
  padding: var(--kia-space-6);
}

/* ═══ ÉTATS VIDES / CHARGEMENT — pattern unique réutilisable ═══ */
.kia-empty-state, .kia-loading-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: var(--kia-space-3);
  padding: var(--kia-space-8) var(--kia-space-5);
  color: var(--kia-muted);
}
.kia-empty-state svg, .kia-loading-state svg { opacity: 0.4; }

.kia-skeleton {
  background: linear-gradient(90deg, var(--kia-card) 25%, var(--kia-card-2) 50%, var(--kia-card) 75%);
  background-size: 200% 100%;
  animation: kia-skeleton-shine 1.4s ease-in-out infinite;
  border-radius: var(--kia-radius-sm);
}
@keyframes kia-skeleton-shine { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .kia-skeleton { animation: none; opacity: 0.6; }
}

/* ═══ TOAST / NOTIFICATION — pattern unique pour tous les messages d'erreur/succès ═══ */
.kia-toast {
  position: fixed;
  bottom: var(--kia-space-5);
  right: var(--kia-space-5);
  z-index: var(--kia-z-toast);
  background: var(--kia-card-2);
  border: 1px solid var(--kia-border);
  border-left: 3px solid var(--kia-teal);
  border-radius: var(--kia-radius-md);
  padding: var(--kia-space-4) var(--kia-space-5);
  max-width: 360px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
}
.kia-toast[data-variant="error"] { border-left-color: var(--kia-red); }
.kia-toast[data-variant="success"] { border-left-color: var(--kia-green); }

/* ═══ VISUALLY HIDDEN (pour texte lu par lecteur d'écran seulement) ═══ */
.kia-sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* ═══ CONTAINER ═══ */
.kia-container {
  max-width: var(--kia-container-max);
  margin-inline: auto;
  padding-inline: var(--kia-space-6);
}
@media (max-width: 640px) {
  .kia-container { padding-inline: var(--kia-space-4); }
}

/* ═══════════════════════════════════════════════════════════════
   ANIMATIONS (import sélectif depuis v13 design-system-v2 — P2)
   14 keyframes de mouvement, agnostiques de couleur/police, recolorés
   sur la palette officielle #00D4C8. Respectent déjà
   prefers-reduced-motion via la règle globale ci-dessus.
   ═══════════════════════════════════════════════════════════════ */

@keyframes kiaSlideUpFade   { from { opacity: 0; transform: translateY(40px); } to { opacity: 1; transform: translateY(0); } }
@keyframes kiaSlideDownFade { from { opacity: 1; transform: translateY(0); } to { opacity: 0; transform: translateY(40px); } }
@keyframes kiaSlideInLeft   { from { opacity: 0; transform: translateX(-60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kiaSlideInRight  { from { opacity: 0; transform: translateX(60px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kiaFadeIn        { from { opacity: 0; } to { opacity: 1; } }
@keyframes kiaFloat         { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-20px); } }
@keyframes kiaGlowPulse     { 0%, 100% { box-shadow: 0 0 20px rgba(0, 212, 200, 0.3); } 50% { box-shadow: 0 0 40px rgba(0, 212, 200, 0.6); } }
@keyframes kiaShake         { 0%, 100% { transform: translateX(0); } 10%, 30%, 50%, 70%, 90% { transform: translateX(-3px); } 20%, 40%, 60%, 80% { transform: translateX(3px); } }
@keyframes kiaCheckBounce   { 0% { transform: scale(0) rotate(-45deg); opacity: 0; } 50% { transform: scale(1.2) rotate(0deg); } 100% { transform: scale(1) rotate(0deg); opacity: 1; } }
@keyframes kiaSpin          { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes kiaGradientShift { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } }
@keyframes kiaBlobMorph     { 0%, 100% { border-radius: 60% 40% 30% 70% / 60% 30% 70% 40%; } 50% { border-radius: 30% 60% 70% 40% / 30% 70% 40% 60%; } }
@keyframes kiaSlideIconRight{ from { opacity: 0; transform: translateX(-8px); } to { opacity: 1; transform: translateX(0); } }
@keyframes kiaScalePop      { 0% { transform: scale(0); opacity: 0; } 50% { transform: scale(1.1); } 100% { transform: scale(1); opacity: 1; } }

/* ── Utilitaires ── */
.kia-anim-slideUpFade    { animation: kiaSlideUpFade    var(--kia-med) var(--kia-ease) both; }
.kia-anim-slideInLeft    { animation: kiaSlideInLeft    var(--kia-med) var(--kia-ease) both; }
.kia-anim-slideInRight   { animation: kiaSlideInRight   var(--kia-med) var(--kia-ease) both; }
.kia-anim-fadeIn         { animation: kiaFadeIn         var(--kia-med) var(--kia-ease) both; }
.kia-anim-float          { animation: kiaFloat          3s ease-in-out infinite; }
.kia-anim-glowPulse      { animation: kiaGlowPulse      2.4s ease-in-out infinite; }
.kia-anim-shake          { animation: kiaShake          0.5s var(--kia-ease); }
.kia-anim-checkBounce    { animation: kiaCheckBounce    0.5s var(--kia-ease-spring) both; }
.kia-anim-spin           { animation: kiaSpin           1s linear infinite; }
.kia-anim-scalePop       { animation: kiaScalePop       0.4s var(--kia-ease-spring) both; }