/* ═══════════════════════════════════════════════════════════════
   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;
}

/* ═══ KIA-NAV — écran anti-FOUCE ═══
   <kia-nav> charge son JS en module (différé) : entre le premier paint et
   l'hydratation du Web Component, le navigateur affiche le contenu brut
   du light DOM (les <a> et <kia-nav-group> tels quels — non stylés, non
   groupés). C'est ce flash de liens soulignés en vrac qu'on corrige ici.
   On garde volontairement ce contenu dans le DOM (crawlable, et visible
   si le JS est bloqué) mais on l'habille pendant l'attente au lieu de le
   laisser brut. */
kia-nav {
  display: block;
  min-height: var(--kia-nav-height);
  background: var(--kia-black);
}
kia-nav:not(:defined) {
  overflow: hidden;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 0 clamp(20px, 5vw, 64px);
}
kia-nav:not(:defined) kia-nav-group {
  display: none;
}
kia-nav:not(:defined) > a {
  color: var(--kia-teal);
  text-decoration: none;
  font-family: var(--kia-font-body);
  font-size: 14px;
  white-space: nowrap;
}

/* 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; }