/* ============================================================================
   JOOMA DESIGN SYSTEM — v1 (socle graphique officiel de la plateforme)
   ----------------------------------------------------------------------------
   RÈGLES :
   • Couche AU-DESSUS du Theme Engine (--jt-*) : les 8 thèmes restent maîtres
     des surfaces/textes. Le DS apporte : échelle d'espacements, rayons, ombres,
     typographie, mouvements, composants (.ds-*) et ACCENT PAR MODULE.
   • Aucune couleur en dur dans les modules : utiliser var(--ds-accent) pour
     l'accent métier, var(--jt-*) pour les surfaces/textes.
   • L'accent par module est posé par crudScreen (classe .ds-scope + variable
     --ds-accent sur le conteneur) : seule la couleur d'accent change d'un
     module à l'autre — tout le reste du DS est identique (philosophie JOOMA).
   ============================================================================ */

:root {
  /* ---- Palette JOOMA de référence (fallbacks si hors thème) ---- */
  --ds-blue: #1B6EF3;
  --ds-turquoise: #15C9C4;
  --ds-success: #22C55E;
  --ds-warning: #F59E0B;
  --ds-danger: #EF4444;

  /* ---- Espacements (échelle unique, base 4) ---- */
  --ds-sp-1: 4px; --ds-sp-2: 8px; --ds-sp-3: 12px; --ds-sp-4: 16px;
  --ds-sp-5: 20px; --ds-sp-6: 24px; --ds-sp-8: 32px; --ds-sp-10: 40px; --ds-sp-12: 48px;

  /* ---- Rayons ---- */
  --ds-r-sm: 8px; --ds-r-md: 12px; --ds-r-lg: 16px; --ds-r-xl: 22px; --ds-r-full: 999px;

  /* ---- Ombres (douces, premium) ---- */
  --ds-shadow-sm: 0 1px 3px rgba(16, 30, 54, .06);
  --ds-shadow-md: 0 6px 18px rgba(16, 30, 54, .08);
  --ds-shadow-lg: 0 16px 40px rgba(16, 30, 54, .12);
  --ds-shadow-float: 0 22px 60px rgba(16, 30, 54, .16);

  /* ---- Typographie (hiérarchie unique) ---- */
  --ds-font: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --ds-font-brand: 'Baloo 2', var(--ds-font);
  --ds-t-title: 800 clamp(19px, 2vw, 23px)/1.2 var(--ds-font);
  --ds-t-subtitle: 700 15px/1.35 var(--ds-font);
  --ds-t-body: 400 13.5px/1.55 var(--ds-font);
  --ds-t-caption: 500 12px/1.4 var(--ds-font);
  --ds-t-badge: 700 11.5px/1 var(--ds-font);

  /* ---- Mouvement (micro-interactions haut de gamme, jamais agressives) ---- */
  --ds-ease: cubic-bezier(.22, .8, .3, 1);
  --ds-dur-fast: .14s; --ds-dur: .2s; --ds-dur-slow: .32s;

  /* ---- Accent par défaut (bleu JOOMA) — surchargé par module via .ds-scope ---- */
  --ds-accent: var(--jt-accent, var(--ds-blue));
}

/* Dérivés d'accent calculés (clair / foncé / lavis) — se recalculent avec l'accent module. */
.ds-scope, .ncp-body {
  --ds-accent-2: color-mix(in srgb, var(--ds-accent) 78%, #ffffff);
  --ds-accent-3: color-mix(in srgb, var(--ds-accent) 78%, #000000);
  --ds-accent-soft: color-mix(in srgb, var(--ds-accent) 14%, transparent);
  --ds-accent-ring: color-mix(in srgb, var(--ds-accent) 32%, transparent);
}

/* Dans un module à accent DS : l'accent du Theme Engine suit l'accent module
   (« seule la couleur d'accent change ») — surfaces/textes restent au thème. */
.ds-scope.ds-accented {
  --jt-accent: var(--ds-accent);
  --jt-accent2: var(--ds-accent-2);
  --jt-accent3: var(--ds-accent-3);
  --jt-border-accent: var(--ds-accent-ring);
}

/* ============================== CARTES ============================== */
.ds-scope .card {
  border-radius: var(--ds-r-lg);
  box-shadow: var(--ds-shadow-sm);
  transition: transform var(--ds-dur) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), border-color var(--ds-dur) var(--ds-ease);
}
.ds-scope .card:hover { box-shadow: var(--ds-shadow-md); }
.ds-scope button.card:hover, .ds-scope .card.ds-lift:hover { transform: translateY(-2px); box-shadow: var(--ds-shadow-lg); }
.ds-card-kpi { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--ds-sp-3); }
.ds-card-ai { border: 1px solid var(--ds-accent-ring) !important; background: linear-gradient(135deg, var(--ds-accent-soft), transparent 60%) !important; }

/* ============================== BOUTONS ============================== */
.ds-scope .btn, .ds-btn {
  border-radius: var(--ds-r-md);
  font: 600 13.5px/1 var(--ds-font);
  transition: transform var(--ds-dur-fast) var(--ds-ease), box-shadow var(--ds-dur) var(--ds-ease), filter var(--ds-dur-fast) var(--ds-ease), background var(--ds-dur-fast) var(--ds-ease);
}
.ds-scope .btn:active { transform: scale(.97); }
.ds-scope .btn.primary { background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-3)); border: none; color: #fff; box-shadow: 0 8px 22px var(--ds-accent-ring); }
.ds-scope .btn.primary:hover { filter: brightness(1.06); transform: translateY(-1px); }
.ds-btn-danger { background: var(--ds-danger) !important; color: #fff !important; border: none !important; }
.ds-btn-success { background: var(--ds-success) !important; color: #fff !important; border: none !important; }
.ds-fab { position: fixed; right: 22px; bottom: 22px; width: 54px; height: 54px; border-radius: 50%; border: none; cursor: pointer; display: grid; place-items: center; background: linear-gradient(135deg, var(--ds-accent), var(--ds-accent-3)); color: #fff; box-shadow: var(--ds-shadow-float); z-index: 50; transition: transform var(--ds-dur) var(--ds-ease); }
.ds-fab:hover { transform: translateY(-3px) scale(1.04); }

/* ============================== BADGES / GÉLULES ============================== */
.ds-badge { display: inline-flex; align-items: center; gap: 6px; padding: 3px 11px; border-radius: var(--ds-r-full); font: var(--ds-t-badge); }
.ds-badge-accent { background: var(--ds-accent-soft); color: var(--ds-accent); }

/* ============================== FOCUS & ACCESSIBILITÉ ============================== */
.ds-scope :is(button, a, input, select, textarea):focus-visible { outline: 2px solid var(--ds-accent); outline-offset: 2px; border-radius: var(--ds-r-sm); }

/* ============================== TABLES (respiration) ============================== */
.ds-scope table.grid td { padding-top: 11px; padding-bottom: 11px; }
.ds-scope table.grid tr { transition: background var(--ds-dur-fast) var(--ds-ease); }

/* ============================== SQUELETTES DE CHARGEMENT ============================== */
.ds-skel { border-radius: var(--ds-r-sm); background: linear-gradient(90deg, var(--jt-card2, #eef2f7) 25%, color-mix(in srgb, var(--jt-card2, #eef2f7) 50%, #fff) 45%, var(--jt-card2, #eef2f7) 65%); background-size: 220% 100%; animation: dsSkel 1.2s var(--ds-ease) infinite; }
@keyframes dsSkel { from { background-position: 130% 0; } to { background-position: -30% 0; } }

/* ============================== APPARITIONS DOUCES ============================== */
.ds-scope .card, .ds-scope table.grid tr { animation: dsIn var(--ds-dur-slow) var(--ds-ease) both; }
@keyframes dsIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .ds-scope * { animation: none !important; transition: none !important; } }

/* ============================== LEIA (identité : lavande + turquoise, vivante, discrète) ============================== */
.ds-leia { --leia-a: #8B7CF8; --leia-b: var(--ds-turquoise); }
.ds-leia-dot { width: 28px; height: 28px; border-radius: 50%; display: grid; place-items: center; color: #fff; background: linear-gradient(135deg, var(--leia-a, #8B7CF8), var(--leia-b, #15C9C4)); box-shadow: 0 0 0 0 rgba(139, 124, 248, .35); animation: dsLeiaBreath 3.6s var(--ds-ease) infinite; }
@keyframes dsLeiaBreath { 0%, 100% { box-shadow: 0 0 0 0 rgba(139, 124, 248, .30); } 50% { box-shadow: 0 0 0 7px rgba(139, 124, 248, 0); } }

/* ============================================================================
   ACCENTS OFFICIELS PAR MODULE (le reste du DS ne change JAMAIS)
   Posés automatiquement par crudScreen via DS_MODULE_ACCENT (app.js).
   Coaching #8B7CF8 · Santé #22C55E · Immo #0F6B91 · Association #F59E0B
   Delivery #FF6B6B · Beauté #E879F9 · Entrepreneurs #4F46E5
   ============================================================================ */