/* ---- Variables light (défaut) ---- */
:root {
  --bg: #f8f9fc;
  --surface: #ffffff;
  --surface2: #f1f3f8;
  --border: #e2e6ef;
  --accent: #4f6fd0;
  --accent2: #7c5cbf;
  --text: #1a1d27;
  --muted: #6b7280;
  --glow: rgba(79, 111, 208, 0.10);
  --header-bg: rgba(248,249,252,0.85);
  --grid-line: rgba(79,111,208,0.04);
  --card-shadow: rgba(0,0,0,0.06);
  --orb-opacity: 0.12;
}

/* ---- Variables dark ---- */
[data-theme="dark"] {
  --bg: #0d0f14;
  --surface: #13161e;
  --surface2: #1a1e2a;
  --border: #1e2330;
  --accent: #7c9ef0;
  --accent2: #a78bfa;
  --text: #e2e8f0;
  --muted: #64748b;
  --glow: rgba(124, 158, 240, 0.15);
  --header-bg: rgba(13,15,20,0.85);
  --grid-line: rgba(124,158,240,0.025);
  --card-shadow: rgba(0,0,0,0.4);
  --orb-opacity: 0.22;
}

/* ---- Toggle button ---- */
.theme-toggle {
  background: none;
  border: 1px solid var(--border);
  border-radius: 50px;
  padding: 0.35rem 0.75rem;
  cursor: pointer;
  color: var(--muted);
  font-size: 0.82rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  transition: border-color 0.2s, color 0.2s;
}
.theme-toggle:hover { border-color: var(--accent); color: var(--accent); }
.theme-toggle .icon-sun  { display: none; }
.theme-toggle .icon-moon { display: inline; }
[data-theme="dark"] .theme-toggle .icon-sun  { display: inline; }
[data-theme="dark"] .theme-toggle .icon-moon { display: none; }