/* ═══════════════════════════════════════════════════════════════
   tokens.css — Harmony Violet Design System · Solyn
   ─────────────────────────────────────────────────────────────
   Primary    : #9D7CF4  (Violet Harmony)
   Secondary  : #B99EF8  (Lavande Claire)
   Background : #0C0B14  (Noir Violet)
   Surface    : #16132A  (Surface Douce)
   Text       : #EAE6F8  (Blanc Lavande)
   ═══════════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap');

:root {

  /* Force le navigateur à rendre tous les contrôles natifs en dark mode */
  color-scheme: dark;

  /* ══ PALETTE HARMONY VIOLET ════════════════════════════════════ */

  --bg:          #0C0B14;   /* fond global — Noir Violet */
  --bg-soft:     #110F1E;   /* fond sidebar */

  /* Surfaces — hiérarchie de profondeur, violet subtil */
  --surface:     #16132A;   /* surface 1 — violet doux */
  --surface-2:   #1D1A35;   /* surface 2 — modales, popovers */
  --surface-3:   #231F3F;   /* surface 3 — champs, inputs */

  /* Bordures violet très doux */
  --border:      rgba(157,124,244,0.12);   /* subtle */
  --border-soft: rgba(157,124,244,0.06);   /* très subtle */
  --border-hi:   rgba(157,124,244,0.28);   /* hover / focus */

  /* ══ DEPTH SYSTEM — Ombres portées ═══════════════════════════ */

  --shadow-card:    0 1px 3px rgba(0,0,0,.50), 0 1px 12px rgba(0,0,0,.35);
  --shadow-card-hover: 0 4px 20px rgba(157,124,244,.20), 0 1px 3px rgba(0,0,0,.40);
  --shadow-modal:   0 8px 32px rgba(0,0,0,.70), 0 2px 8px rgba(157,124,244,.15);
  --shadow-sidebar: 2px 0 20px rgba(0,0,0,.40);

  /* ══ TEXTE — lavande douce ═══════════════════════════════════ */
  --text:        #EAE6F8;   /* titre, label fort — Blanc Lavande */
  --text-2:      #A89EC8;   /* texte secondaire — Lavande Muted */
  --text-3:      #6A628A;   /* placeholder, hint */
  --text-4:      #3D3660;   /* texte désactivé */

  /* ══ ACCENT — Harmony Violet ══════════════════════════════════ */

  --accent:      #9D7CF4;
  --accent-hi:   #B99EF8;
  --accent-lo:   #7C5CE4;
  --accent-rgb:  157,124,244;           /* usage : rgba(var(--accent-rgb), 0.15) */
  --accent-soft: rgba(157,124,244,0.10);
  --accent-med:  rgba(157,124,244,0.16);
  --accent-ring: rgba(157,124,244,0.28);

  /* Couleurs sémantiques conservées */
  --gold:        #FFD700;
  --green:       #10b981;
  --blue:        #3b82f6;
  --amber:       #f59e0b;
  --red:         #ef4444;
  --cyan:        #38bdf8;
  --cyan-hi:     #7dd3fc;
  --yellow:      #facc15;

  /* États sémantiques (ok / danger / warn) */
  --ok:          #22c55e;
  --ok-soft:     rgba(34,197,94,0.12);
  --danger:      #ef4444;
  --danger-soft: rgba(239,68,68,0.12);
  --warn:        #f59e0b;

  /* ══ RADIUS — standardisé ══════════════════════════════════════ */
  --r-xs:        4px;
  --r-sm:        6px;
  --r:           8px;
  --r-md:        10px;
  --r-lg:        12px;
  --r-xl:        16px;
  --r-pill:      999px;

  /* Alias compatibilité */
  --radius-sm:   var(--r-sm);
  --radius:      var(--r);
  --radius-lg:   var(--r-lg);

  /* ══ TYPOGRAPHIE ════════════════════════════════════════════════ */
  --font:        'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --font-mono:   'JetBrains Mono', ui-monospace, 'Cascadia Code', monospace;
  --line-height: 1.5;

  /* ══ LAYOUT ═════════════════════════════════════════════════════ */
  --sidebar-w:   240px;
  --preview-w:   340px;
  --header-h:    64px;

  /* ══ MOTION ══════════════════════════════════════════════════════ */
  --ease:        cubic-bezier(0.2, 0.8, 0.2, 1);
  --t-fast:      0.12s var(--ease);
  --t-base:      0.20s var(--ease);

  /* ══ OMBRES ══════════════════════════════════════════════════════ */
  --shadow:      0 4px 16px rgba(0,0,0,0.55);
  --shadow-lg:   0 8px 32px rgba(0,0,0,0.65);
  --shadow-glow: 0 0 24px rgba(157,124,244,0.30);

  /* ══ COMPOSANTS — sidebar ═══════════════════════════════════════ */
  --nav-text:       #A89EC8;   /* texte sidebar — lavande muted */
  --nav-text-hover: #EAE6F8;   /* survol */
  --nav-icon-color: #6A628A;   /* icône — violet doux */

  /* ══ LEGACY ALIASES (compatibilité economy.html / landing.html) ══ */
  --s1:    var(--surface);
  --s2:    var(--surface-2);
  --s3:    var(--surface-3);
  --text2: var(--text-2);
  --text3: var(--text-3);
  --aclo:  var(--accent-soft);
  --border2: var(--border-hi);
  --border-2: var(--border-hi);
  --accent-lo: var(--accent-soft);
  --accent-md: var(--accent-med);
  --bg-2:  var(--surface-2);
  --bg-3:  var(--surface-3);

  /* ── Alias sans tiret (typos historiques dans style.css) ── */
  --accent2:  var(--accent-hi);
  --accent-2: var(--accent-hi);   /* alias avec tiret — utilisé dans dropdowns topbar */
  --border3:  var(--border-hi);
  --surface2: var(--surface-2);

  /* ── Alias manquants post-nettoyage ── */
  --surface-1:      var(--surface);
  --text-dim:       var(--text-3);
  --text-mid:       var(--text-2);
  --accent-3:       #A89EC8;
  --nav-icon-hover: var(--accent-hi);

  /* ══ Z-INDEX — échelle sémantique ═══════════════════════════ */
  --z-base:     1;
  --z-raised:   50;
  --z-dropdown: 100;
  --z-sticky:   200;
  --z-overlay:  500;
  --z-modal:    1100;
  --z-popover:  1200;
  --z-toast:    9999;

  /* ══ TYPOGRAPHIE — échelle tokenisée ════════════════════════ */
  --fs-xs:    10px;
  --fs-sm:    11px;
  --fs-sm2:   11.5px;
  --fs-base:  13px;
  --fs-base2: 13.5px;
  --fs-md:    14px;
  --fs-lg:    15px;
  --fs-xl:    16px;
  --fs-2xl:   18px;
  --fs-3xl:   22px;
  --fs-hero:  clamp(32px, 4.5vw, 54px);
  --fs-display: clamp(42px, 6vw, 68px);

  /* ══ SPACING — échelle tokenisée ════════════════════════════ */
  --space-1:   4px;
  --space-2:   8px;
  --space-3:   12px;
  --space-4:   16px;
  --space-5:   20px;
  --space-6:   24px;
  --space-8:   32px;
  --space-10:  40px;
  --space-12:  48px;
  --space-16:  64px;

  /* ══ COULEURS ÉTENDUES ══════════════════════════════════════ */
  --accent-xl:   #c4b5fd;   /* violet très clair — texte sur sombre */
  --accent-text: #e8e0ff;   /* blanc-violet — sections dark */

  /* Couleurs Discord natives */
  --discord-bg:      #313338;
  --discord-sidebar: #2B2D31;
  --discord-green:   #57F287;
  --discord-yellow:  #FEE75C;
  --discord-text:    #DBDEE1;
  --discord-text-2:  #96989D;
  --discord-border:  rgba(255,255,255,0.08);
}

/* ══ CLASSES UTILITAIRES PARTAGÉES ════════════════════════════════════ */

/* ── Bouton de base ── */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  height: 36px;
  padding: 0 14px;
  font-family: var(--font);
  font-size: 13.5px;
  font-weight: 600;
  border-radius: var(--r);
  border: none;
  cursor: pointer;
  transition: background var(--t-fast), box-shadow var(--t-fast), color var(--t-fast), opacity var(--t-fast);
  white-space: nowrap;
  text-decoration: none;
}
.btn:disabled { opacity: 0.45; cursor: not-allowed; }

.btn-primary   { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hi); box-shadow: var(--shadow-glow); }

.btn-secondary { background: var(--surface-2); color: var(--text); border: 1px solid var(--border-hi); }
.btn-secondary:hover:not(:disabled) { background: var(--surface-3); border-color: var(--accent); }

.btn-ghost     { background: transparent; color: var(--text-2); }
.btn-ghost:hover:not(:disabled) { background: var(--surface-2); color: var(--text); }

.btn-danger    { background: rgba(239,68,68,0.12); color: var(--red); border: 1px solid rgba(239,68,68,0.25); }
.btn-danger:hover:not(:disabled) { background: rgba(239,68,68,0.20); }

.btn-sm  { height: 30px; font-size: 12.5px; padding: 0 10px; }
.btn-lg  { height: 42px; font-size: 14.5px; padding: 0 20px; }

/* ── Carte de base ── */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--r);
  padding: 20px;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
}
.card:hover { border-color: var(--border-hi); }

/* ── Input de base ── */
.input {
  height: 38px;
  padding: 0 12px;
  background: var(--surface-3);
  border: 1px solid var(--border);
  border-radius: var(--r);
  color: var(--text);
  font-family: var(--font);
  font-size: 13.5px;
  outline: none;
  transition: border-color var(--t-fast), box-shadow var(--t-fast);
  width: 100%;
}
.input::placeholder { color: var(--text-3); }
.input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-ring); }

/* ── Badge ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 8px;
  border-radius: var(--r-sm);
  font-size: 11.5px;
  font-weight: 600;
}
.badge-accent  { background: var(--accent-soft); color: var(--accent-hi); }
.badge-green   { background: rgba(16,185,129,.12); color: #10b981; }
.badge-red     { background: rgba(239,68,68,.12);  color: #ef4444; }
.badge-amber   { background: rgba(245,158,11,.12); color: #f59e0b; }

/* ── Icône SVG sidebar ── */
.nav-item svg {
  width:  18px;
  height: 18px;
  flex-shrink: 0;
  color: var(--nav-icon-color);
  transition: color var(--t-fast);
}
.nav-item:hover svg,
.nav-item.active svg {
  color: var(--nav-icon-hover);
}

/* ══ SKELETON LOADER SYSTEM ════════════════════════════════════════════ */

@keyframes sk-shimmer {
  0%   { background-position: -400px 0; }
  100% { background-position:  400px 0; }
}

.sk {
  display: inline-block;
  border-radius: var(--r-sm);
  background: linear-gradient(
    90deg,
    var(--surface-2) 25%,
    var(--surface-3) 50%,
    var(--surface-2) 75%
  );
  background-size: 400px 100%;
  animation: sk-shimmer 1.4s ease-in-out infinite;
  pointer-events: none;
  user-select: none;
}
.sk-text   { height: 14px; width: 100%; border-radius: var(--r-sm); }
.sk-text-sm{ height: 11px; width: 60%;  border-radius: var(--r-sm); }
.sk-rect   { height: 36px; width: 100%; border-radius: var(--r); }
.sk-rect-lg{ height: 80px; width: 100%; border-radius: var(--r); }
.sk-circle { border-radius: 50%; }

.sk-group { display: flex; flex-direction: column; gap: 8px; }
.sk-row    { display: flex; gap: 10px; align-items: center; }

/* ══ MICRO-INTERACTIONS ════════════════════════════════════════════════ */

@keyframes spin { to { transform: rotate(360deg); } }
.saving-spinner {
  display: inline-block;
  width: 14px; height: 14px;
  border: 2px solid var(--border-hi);
  border-top-color: var(--accent);
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
  vertical-align: middle;
  margin-right: 6px;
}

@keyframes pageSlideIn {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0);   }
}
.page-enter {
  animation: pageSlideIn 0.22s var(--ease) forwards;
}

.btn.loading {
  pointer-events: none;
  opacity: 0.7;
  position: relative;
}
.btn.loading::after {
  content: '';
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  width: 12px; height: 12px;
  border: 2px solid rgba(255,255,255,0.3);
  border-top-color: #fff;
  border-radius: 50%;
  animation: spin 0.65s linear infinite;
}

@keyframes toastIn {
  from { opacity: 0; transform: translateX(16px); }
  to   { opacity: 1; transform: translateX(0); }
}

.card-hover {
  transition: transform var(--t-base), box-shadow var(--t-base), border-color var(--t-fast);
}
.card-hover:hover {
  transform: translateY(-2px);
  box-shadow: var(--shadow-lg);
  border-color: var(--border-hi);
}

.save-feedback {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  font-weight: 500;
  padding: 4px 10px;
  border-radius: var(--r-sm);
  transition: opacity var(--t-base);
}
.save-feedback.ok     { color: var(--green); background: rgba(16,185,129,.10); }
.save-feedback.err    { color: var(--red);   background: rgba(239,68,68,.10);  }
.save-feedback.hidden { opacity: 0; pointer-events: none; }

/* ══ MOTION — prefers-reduced-motion global ═══════════════════════════════ */
@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;
  }
}

/* ══ SELECT & DROPDOWN — DEEP VIOLET FIX ════════════════════════════════
   Couleurs hex directes — violet sur fond sombre.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── 1. Native <select> ── */
select {
  background-color: #16132A !important;
  color: #EAE6F8 !important;
  border-color: rgba(157,124,244,.18) !important;
  color-scheme: dark !important;
}
select:focus {
  background-color: #16132A !important;
  color: #EAE6F8 !important;
}

/* ── 2. <option> & <optgroup> ── */
select option,
select optgroup {
  background-color: #0C0B14 !important;
  color: #EAE6F8 !important;
}
select option:checked {
  background-color: #1D1A35 !important;
  color: #B99EF8 !important;
}

/* ── 3. Selects dans formulaires ── */
.form-field select,
.field select {
  appearance: none;
  -webkit-appearance: none;
  background-color: #16132A !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%239D7CF4' stroke-width='2' stroke-linecap='ro