/* ═══════════════════════════════════════════════════════
   THÈMES — 2 thèmes actifs (21 avril 2026)
   • RPG (dark)   : Slate + Emerald, glows, rareté RPG
   • Light (clair): Stone/Ivory + Emerald darker, ombres subtiles
   Les variables surchargent public-shell.css via data-theme
   ═══════════════════════════════════════════════════════ */

[data-theme="rpg"] {
  --bg: #0b1220;
  --bg-card: #111a2e;
  --bg-subtle: #0f1728;
  --border: rgba(148,163,184,0.15);
  --border-accent: rgba(74,222,128,0.25);
  --teal: #4ade80;
  --teal-dim: rgba(74,222,128,0.10);
  --text: #f1f5f9;
  --text-2: #cbd5e1;
  --text-3: #94a3b8;
  --radius: 10px;
  /* Rareté RPG */
  --rarity-common: #94a3b8;
  --rarity-uncommon: #4ade80;
  --rarity-rare: #60a5fa;
  --rarity-epic: #c084fc;
  --rarity-legendary: #f59e0b;
  --rarity-danger: #f87171;
}
[data-theme="rpg"] body {
  font-family:'Inter',-apple-system,sans-serif;
  background:
    radial-gradient(ellipse 600px 400px at 20% 0%, rgba(74,222,128,0.06), transparent 70%),
    radial-gradient(ellipse 600px 400px at 80% 100%, rgba(96,165,250,0.05), transparent 70%),
    var(--bg);
  background-attachment:fixed;
}
[data-theme="rpg"] .nav { background:rgba(11,18,32,0.85); border-bottom:1px solid rgba(74,222,128,0.2); }
[data-theme="rpg"] .nav-logo { letter-spacing:0.01em; text-shadow:0 0 20px rgba(74,222,128,0.3); }
[data-theme="rpg"] .nav-cta { background:#4ade80; color:#0b1220; box-shadow:0 0 16px rgba(74,222,128,0.25); }
[data-theme="rpg"] .card {
  background:linear-gradient(180deg, rgba(30,41,59,0.6), rgba(17,26,46,0.8));
  backdrop-filter:blur(8px);
  border:1px solid rgba(74,222,128,0.15);
}
[data-theme="rpg"] .card:hover {
  border-color:rgba(74,222,128,0.4);
  box-shadow:0 0 24px rgba(74,222,128,0.1);
  transform:translateY(-2px);
}
[data-theme="rpg"] .btn-p {
  background:linear-gradient(135deg, #4ade80, #22c55e);
  color:#0b1220; font-weight:700; letter-spacing:0.02em;
  box-shadow:0 4px 14px rgba(74,222,128,0.3);
}
[data-theme="rpg"] .btn-p:hover { box-shadow:0 6px 20px rgba(74,222,128,0.45); transform:translateY(-1px); }
[data-theme="rpg"] .btn-s:hover { border-color:#4ade80; color:#4ade80; box-shadow:0 0 12px rgba(74,222,128,0.15); }
[data-theme="rpg"] .badge-pill { box-shadow:0 0 8px rgba(74,222,128,0.15); }
[data-theme="rpg"] .price-card.featured { box-shadow:0 0 28px rgba(74,222,128,0.18); }
[data-theme="rpg"] .price-badge { background:linear-gradient(135deg,#f59e0b,#f97316); color:#0b1220; }
[data-theme="rpg"] .section-label { color:#4ade80; text-shadow:0 0 8px rgba(74,222,128,0.3); }
[data-theme="rpg"] .stat-val { text-shadow:0 0 12px rgba(74,222,128,0.35); }
[data-theme="rpg"] .bottom-tab-bar { background:rgba(11,18,32,0.95); border-top-color:rgba(74,222,128,0.2); }
[data-theme="rpg"] .bottom-tab-bar a.active { color:#4ade80; }
[data-theme="rpg"] .accordion-item { background:rgba(17,26,46,0.6); }
[data-theme="rpg"] .form-input:focus,
[data-theme="rpg"] .form-textarea:focus,
[data-theme="rpg"] .form-select:focus { box-shadow:0 0 0 3px rgba(74,222,128,0.15); }

/* ── Auth card (login / register / reset-password) ── */
[data-theme="rpg"] .auth-card {
  background:linear-gradient(180deg, rgba(30,41,59,0.6), rgba(17,26,46,0.85));
  border:1px solid rgba(74,222,128,0.18);
  backdrop-filter:blur(8px);
  box-shadow:0 0 32px rgba(74,222,128,0.08);
}
[data-theme="rpg"] .auth-icon {
  background:linear-gradient(135deg, rgba(74,222,128,0.18), rgba(34,197,94,0.08));
  border:1px solid rgba(74,222,128,0.35);
  color:#4ade80;
  box-shadow:0 0 16px rgba(74,222,128,0.25);
}
[data-theme="rpg"] .auth-btn {
  background:linear-gradient(135deg, #4ade80, #22c55e);
  color:#0b1220; font-weight:700;
  box-shadow:0 4px 14px rgba(74,222,128,0.3);
}
[data-theme="rpg"] .auth-btn:hover { box-shadow:0 6px 20px rgba(74,222,128,0.45); transform:translateY(-1px); }
[data-theme="rpg"] .auth-form input:focus { box-shadow:0 0 0 3px rgba(74,222,128,0.15); border-color:#4ade80; }

/* ── Badges rareté RPG (réutilisables) ── */
.rarity-badge {
  display:inline-flex; align-items:center; gap:4px;
  padding:2px 8px; border-radius:4px;
  font-size:0.68rem; font-weight:700;
  text-transform:uppercase; letter-spacing:0.05em;
  border:1px solid;
}
.rarity-common { color:var(--rarity-common,#94a3b8); border-color:currentColor; background:rgba(148,163,184,0.08); }
.rarity-uncommon { color:var(--rarity-uncommon,#4ade80); border-color:currentColor; background:rgba(74,222,128,0.08); }
.rarity-rare { color:var(--rarity-rare,#60a5fa); border-color:currentColor; background:rgba(96,165,250,0.08); }
.rarity-epic { color:var(--rarity-epic,#c084fc); border-color:currentColor; background:rgba(192,132,252,0.08); }
.rarity-legendary { color:var(--rarity-legendary,#f59e0b); border-color:currentColor; background:rgba(245,158,11,0.08); }
.rarity-danger { color:var(--rarity-danger,#f87171); border-color:currentColor; background:rgba(248,113,113,0.08); }

/* ── XP bar utilitaire (app.html) ── */
.xp-bar {
  width:100%; height:6px; border-radius:999px;
  background:rgba(148,163,184,0.15); overflow:hidden; position:relative;
}
.xp-bar-fill {
  height:100%; border-radius:999px;
  background:linear-gradient(90deg, #4ade80, #22d3ee);
  box-shadow:0 0 12px rgba(74,222,128,0.4);
  transition:width 0.4s ease;
}

/* ═══════════════════════════════════════════════════════
   THÈME LIGHT (clair) — Stone/Ivory + Emerald
   ═══════════════════════════════════════════════════════ */
[data-theme="light"] {
  --bg: #fafaf9;
  --bg-card: #ffffff;
  --bg-subtle: #f5f5f4;
  --border: rgba(15,23,42,0.08);
  --border-accent: rgba(22,163,74,0.25);
  --teal: #16a34a;
  --teal-dim: rgba(22,163,74,0.08);
  --text: #0f172a;
  --text-2: #475569;
  --text-3: #64748b;
  --radius: 10px;
  --rarity-common: #64748b;
  --rarity-uncommon: #16a34a;
  --rarity-rare: #2563eb;
  --rarity-epic: #9333ea;
  --rarity-legendary: #d97706;
  --rarity-danger: #dc2626;
}
[data-theme="light"] body {
  font-family:'Inter',-apple-system,sans-serif;
  background:
    radial-gradient(ellipse 600px 400px at 20% 0%, rgba(22,163,74,0.05), transparent 70%),
    radial-gradient(ellipse 600px 400px at 80% 100%, rgba(37,99,235,0.04), transparent 70%),
    var(--bg);
  background-attachment:fixed;
  color:var(--text);
}
[data-theme="light"] .nav {
  background:rgba(255,255,255,0.85);
  border-bottom:1px solid var(--border);
  backdrop-filter:blur(12px);
}
[data-theme="light"] .nav-logo { color:var(--text); }
[data-theme="light"] .nav-links a { color:var(--text-2); }
[data-theme="light"] .nav-links a:hover,
[data-theme="light"] .nav-links a.active { color:var(--text); }
[data-theme="light"] .nav-cta {
  background:#16a34a; color:#ffffff;
  box-shadow:0 2px 8px rgba(22,163,74,0.25);
}
[data-theme="light"] .card {
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:0 1px 3px rgba(15,23,42,0.04);
}
[data-theme="light"] .card:hover {
  border-color:rgba(22,163,74,0.4);
  box-shadow:0 4px 16px rgba(22,163,74,0.08);
  transform:translateY(-2px);
}
[data-theme="light"] .btn-p {
  background:linear-gradient(135deg, #16a34a, #15803d);
  color:#ffffff; font-weight:700; letter-spacing:0.02em;
  box-shadow:0 2px 10px rgba(22,163,74,0.25);
}
[data-theme="light"] .btn-p:hover { box-shadow:0 4px 16px rgba(22,163,74,0.35); transform:translateY(-1px); }
[data-theme="light"] .btn-s { color:var(--text); border-color:var(--border); }
[data-theme="light"] .btn-s:hover { border-color:#16a34a; color:#16a34a; }
[data-theme="light"] .badge-pill { background:var(--teal-dim); color:var(--teal); border:1px solid var(--border-accent); }
[data-theme="light"] .price-card.featured { box-shadow:0 4px 24px rgba(22,163,74,0.15); }
[data-theme="light"] .price-badge { background:linear-gradient(135deg,#f59e0b,#f97316); color:#ffffff; }
[data-theme="light"] .section-label { color:#16a34a; }
[data-theme="light"] .stat-val { color:#16a34a; }
[data-theme="light"] .bottom-tab-bar {
  background:rgba(255,255,255,0.95);
  border-top:1px solid var(--border);
}
[data-theme="light"] .bottom-tab-bar a { color:var(--text-3); }
[data-theme="light"] .bottom-tab-bar a.active { color:#16a34a; }
[data-theme="light"] .accordion-item { background:#ffffff; border:1px solid var(--border); }
[data-theme="light"] .form-input,
[data-theme="light"] .form-textarea,
[data-theme="light"] .form-select {
  background:#ffffff; color:var(--text); border:1px solid var(--border);
}
[data-theme="light"] .form-input:focus,
[data-theme="light"] .form-textarea:focus,
[data-theme="light"] .form-select:focus {
  border-color:#16a34a;
  box-shadow:0 0 0 3px rgba(22,163,74,0.12);
}
[data-theme="light"] .auth-card {
  background:#ffffff;
  border:1px solid var(--border);
  box-shadow:0 4px 24px rgba(15,23,42,0.06);
}
[data-theme="light"] .auth-icon {
  background:linear-gradient(135deg, rgba(22,163,74,0.15), rgba(22,163,74,0.05));
  border:1px solid rgba(22,163,74,0.3);
  color:#16a34a;
}
[data-theme="light"] .auth-btn {
  background:linear-gradient(135deg, #16a34a, #15803d);
  color:#ffffff; font-weight:700;
  box-shadow:0 2px 10px rgba(22,163,74,0.25);
}
[data-theme="light"] .auth-btn:hover { box-shadow:0 4px 16px rgba(22,163,74,0.35); transform:translateY(-1px); }
[data-theme="light"] .auth-form input { background:#ffffff; color:var(--text); border:1px solid var(--border); }
[data-theme="light"] .auth-form input:focus { box-shadow:0 0 0 3px rgba(22,163,74,0.12); border-color:#16a34a; }
[data-theme="light"] .ft { border-top:1px solid var(--border); }
[data-theme="light"] .xp-bar { background:rgba(15,23,42,0.08); }
[data-theme="light"] .xp-bar-fill { background:linear-gradient(90deg, #16a34a, #22d3ee); box-shadow:0 0 8px rgba(22,163,74,0.3); }

/* ═══════════════════════════════════════════════════════
   SWITCHER THÈME (universel, top-right)
   ═══════════════════════════════════════════════════════ */
.theme-switcher {
  position:fixed; top:12px; right:12px; z-index:200;
  display:flex; gap:4px; padding:4px;
  background:var(--bg-card); border:1px solid var(--border);
  border-radius:999px; backdrop-filter:blur(12px);
  box-shadow:0 2px 12px rgba(0,0,0,0.15);
}
.theme-switcher button {
  width:32px; height:32px; border-radius:50%;
  border:none; cursor:pointer; background:transparent;
  color:var(--text-3); font-size:0.85rem;
  display:flex; align-items:center; justify-content:center;
  transition:all 0.15s;
}
.theme-switcher button:hover { color:var(--text); }
.theme-switcher button.active {
  background:var(--teal-dim); color:var(--teal);
  box-shadow:inset 0 0 0 1px var(--border-accent);
}
@media(max-width:768px) {
  .theme-switcher { top:auto; bottom:76px; right:12px; }
}