/* =====================================================================
   RAGEFIT — INDUSTRIAL / RAGE UI
   Béton, grain, typo massive, arêtes dures, motif "hazard".
   Ça doit sentir le mec à bout de nerfs qui DOIT cliquer.
   Palette tenue : violet haute tension + magenta "rage" + cyan = OK.
   (Toujours : pas de vert/jaune/orange. Le rouge devient un magenta cru.)
   Tokens pilotés par [data-theme] → ajout d'un thème = nouveau bloc.
   ===================================================================== */

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

/* ─── THÈME : rage (défaut) ────────────────────────────────────────── */
:root,
[data-theme="dark-abyss"] {
  --bg:           #0a0a0e;
  --bg-2:         #121118;
  --panel:        #15131c;
  --panel-2:      #1c1926;

  --line:         rgba(255,255,255,0.10);
  --line-2:       rgba(255,255,255,0.18);

  --ink:          #f3f2f7;
  --ink-2:        rgba(243,242,247,0.62);
  --ink-3:        rgba(243,242,247,0.34);

  --primary:      #8b3dff;   /* violet haute tension */
  --primary-lt:   #b07bff;
  --primary-dk:   #5a17c4;
  --primary-bg:   rgba(139,61,255,0.16);

  --rage:         #ff2e7e;   /* magenta "rage" (remplace le rouge) */
  --rage-bg:      rgba(255,46,126,0.14);
  --cool:         #1fe3d6;   /* cyan = réussite */
  --cool-bg:      rgba(31,227,214,0.12);

  /* arêtes dures : peu de radius */
  --r-sm:         4px;
  --r:            7px;
  --r-lg:         10px;

  --hard:         4px 4px 0 0 var(--primary);
  --hard-rage:    4px 4px 0 0 var(--rage);
  --hard-sm:      3px 3px 0 0 rgba(0,0,0,0.6);
  --glow:         0 0 0 1px var(--primary), 0 0 24px rgba(139,61,255,0.35);

  --header-bg:    rgba(10,10,14,0.92);
}

/* ─── THÈME : midnight-violet (« Amethyst ») ───────────────────────── */
[data-theme="midnight-violet"] {
  --bg:           #07060f;
  --bg-2:         #0e0a1c;
  --panel:        #130d24;
  --panel-2:      #1a1230;
  --line:         rgba(255,255,255,0.10);
  --line-2:       rgba(255,255,255,0.20);
  --ink:          #f4f0ff;
  --ink-2:        rgba(244,240,255,0.64);
  --ink-3:        rgba(244,240,255,0.36);
  --primary:      #b16cff;
  --primary-lt:   #d0aaff;
  --primary-dk:   #6b2fd0;
  --primary-bg:   rgba(177,108,255,0.18);
  --rage:         #ff3d9a;
  --rage-bg:      rgba(255,61,154,0.16);
  --cool:         #38bdf8;
  --cool-bg:      rgba(56,189,248,0.12);
  --hard:         4px 4px 0 0 var(--primary);
  --hard-rage:    4px 4px 0 0 var(--rage);
  --hard-sm:      3px 3px 0 0 rgba(0,0,0,0.6);
  --glow:         0 0 0 1px var(--primary), 0 0 24px rgba(177,108,255,0.40);
  --header-bg:    rgba(7,6,15,0.92);
}

/* ─── SKIN : Sang-froid (débloqué niv. 10) — bleu glacial ──────────── */
[data-theme="cold"] {
  --bg:#05080f; --bg-2:#0a1020; --panel:#0d1526; --panel-2:#122036;
  --line:rgba(255,255,255,0.10); --line-2:rgba(120,180,255,0.28);
  --ink:#eaf2ff; --ink-2:rgba(234,242,255,0.64); --ink-3:rgba(234,242,255,0.38);
  --primary:#3b82f6; --primary-lt:#7dabff; --primary-dk:#1e40af; --primary-bg:rgba(59,130,246,0.16);
  --rage:#22d3ee; --rage-bg:rgba(34,211,238,0.14); --cool:#5eead4; --cool-bg:rgba(94,234,212,0.12);
  --hard:4px 4px 0 0 var(--primary); --hard-rage:4px 4px 0 0 var(--rage); --hard-sm:3px 3px 0 0 rgba(0,0,0,0.6);
  --glow:0 0 0 1px var(--primary),0 0 24px rgba(59,130,246,0.4); --header-bg:rgba(5,8,15,0.92);
}
/* ─── SKIN : Onyx (niv. 16) — noir mat + argent ────────────────────── */
[data-theme="onyx"] {
  --bg:#0b0b0d; --bg-2:#141417; --panel:#181819; --panel-2:#202023;
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,255,255,0.24);
  --ink:#f4f4f6; --ink-2:rgba(244,244,246,0.62); --ink-3:rgba(244,244,246,0.34);
  --primary:#c0c4cc; --primary-lt:#e6e8ee; --primary-dk:#73777f; --primary-bg:rgba(192,196,204,0.14);
  --rage:#e0457b; --rage-bg:rgba(224,69,123,0.14); --cool:#8fb3ff; --cool-bg:rgba(143,179,255,0.12);
  --hard:4px 4px 0 0 var(--primary); --hard-rage:4px 4px 0 0 var(--rage); --hard-sm:3px 3px 0 0 rgba(0,0,0,0.7);
  --glow:0 0 0 1px var(--primary),0 0 22px rgba(192,196,204,0.3); --header-bg:rgba(11,11,13,0.93);
}
/* ─── SKIN : Forge (niv. 19) — acier chauffé violet/magenta ────────── */
[data-theme="forge"] {
  --bg:#0d0a08; --bg-2:#1a1310; --panel:#1f1814; --panel-2:#28201a;
  --line:rgba(255,255,255,0.10); --line-2:rgba(255,170,120,0.26);
  --ink:#fbeee6; --ink-2:rgba(251,238,230,0.64); --ink-3:rgba(251,238,230,0.36);
  --primary:#a855f7; --primary-lt:#c99bff; --primary-dk:#7e22ce; --primary-bg:rgba(168,85,247,0.16);
  --rage:#ff2e7e; --rage-bg:rgba(255,46,126,0.16); --cool:#f0abfc; --cool-bg:rgba(240,171,252,0.12);
  --hard:4px 4px 0 0 var(--primary); --hard-rage:4px 4px 0 0 var(--rage); --hard-sm:3px 3px 0 0 rgba(0,0,0,0.7);
  --glow:0 0 0 1px var(--primary),0 0 26px rgba(168,85,247,0.42); --header-bg:rgba(13,10,8,0.93);
}
/* ─── SKIN : Doré (niv. 24 — max) — or sur noir, prestige ──────────── */
[data-theme="gold"] {
  --bg:#0c0a06; --bg-2:#17130a; --panel:#1c170d; --panel-2:#241d10;
  --line:rgba(255,255,255,0.10); --line-2:rgba(212,175,55,0.34);
  --ink:#fff8e6; --ink-2:rgba(255,248,230,0.66); --ink-3:rgba(255,248,230,0.4);
  --primary:#d4af37; --primary-lt:#f0d77a; --primary-dk:#9a7d1e; --primary-bg:rgba(212,175,55,0.16);
  --rage:#ff5c8a; --rage-bg:rgba(255,92,138,0.14); --cool:#7fd1ff; --cool-bg:rgba(127,209,255,0.12);
  --hard:4px 4px 0 0 var(--primary); --hard-rage:4px 4px 0 0 var(--rage); --hard-sm:3px 3px 0 0 rgba(0,0,0,0.7);
  --glow:0 0 0 1px var(--primary),0 0 28px rgba(212,175,55,0.45); --header-bg:rgba(12,10,6,0.94);
}

/* ─── SKIN PREMIUM : Abysses — bleus océaniques texturés, fond animé ── */
[data-theme="abysses"] {
  --bg:#04060f; --bg-2:#071326; --panel:#0a1a30; --panel-2:#0f2440;
  --line:rgba(120,200,255,0.12); --line-2:rgba(120,200,255,0.30);
  --ink:#eaf6ff; --ink-2:rgba(234,246,255,0.66); --ink-3:rgba(234,246,255,0.4);
  --primary:#2f7df6; --primary-lt:#7db8ff; --primary-dk:#10408f; --primary-bg:rgba(47,125,246,0.18);
  --rage:#2dd4bf; --rage-bg:rgba(45,212,191,0.14); --cool:#67e8f9; --cool-bg:rgba(103,232,249,0.12);
  --hard:4px 4px 0 0 var(--primary); --hard-rage:4px 4px 0 0 var(--rage); --hard-sm:3px 3px 0 0 rgba(0,0,0,0.6);
  --glow:0 0 0 1px var(--primary),0 0 26px rgba(47,125,246,0.45); --header-bg:rgba(4,6,15,0.88);
}
/* ─── SKIN PREMIUM : Cosmos — violets néon profonds, fond animé ─────── */
[data-theme="cosmos"] {
  --bg:#070414; --bg-2:#120a2a; --panel:#170d33; --panel-2:#1f1244;
  --line:rgba(200,150,255,0.12); --line-2:rgba(200,150,255,0.30);
  --ink:#f5edff; --ink-2:rgba(245,237,255,0.66); --ink-3:rgba(245,237,255,0.4);
  --primary:#a855f7; --primary-lt:#d0a3ff; --primary-dk:#6b21d6; --primary-bg:rgba(168,85,247,0.20);
  --rage:#e879f9; --rage-bg:rgba(232,121,249,0.14); --cool:#818cf8; --cool-bg:rgba(129,140,248,0.12);
  --hard:4px 4px 0 0 var(--primary); --hard-rage:4px 4px 0 0 var(--rage); --hard-sm:3px 3px 0 0 rgba(0,0,0,0.6);
  --glow:0 0 0 1px var(--primary),0 0 30px rgba(168,85,247,0.5); --header-bg:rgba(7,4,20,0.9);
}

/* Fond ANIMÉ pour les skins premium (blobs dérivants) */
body::after {
  content: ''; position: fixed; inset: -20%; z-index: 0; pointer-events: none;
  opacity: 0; transition: opacity .6s ease;
}
[data-theme="abysses"] body::after, [data-theme="cosmos"] body::after {
  opacity: 1;
  background:
    radial-gradient(38% 30% at 20% 25%, var(--primary-bg), transparent 70%),
    radial-gradient(34% 26% at 82% 30%, var(--rage-bg), transparent 70%),
    radial-gradient(40% 32% at 50% 88%, var(--cool-bg), transparent 72%);
  filter: blur(28px);
  animation: drift 22s ease-in-out infinite alternate;
}
@keyframes drift {
  0%   { transform: translate(0,0) scale(1); }
  50%  { transform: translate(4%, -3%) scale(1.12); }
  100% { transform: translate(-3%, 4%) scale(1.05); }
}
@media (prefers-reduced-motion: reduce) { body::after { animation: none; } }

/* ─── Reset / base ─────────────────────────────────────────────────── */
* { margin: 0; padding: 0; box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }

body {
  font-family: 'Inter', system-ui, sans-serif;
  color: var(--ink);
  background: var(--bg);
  background-image:
    radial-gradient(60% 40% at 50% -8%, rgba(139,61,255,0.16), transparent 70%),
    radial-gradient(50% 30% at 100% 100%, rgba(255,46,126,0.08), transparent 70%);
  background-attachment: fixed;
  min-height: 100vh;
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Grain : texture béton par-dessus tout */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 1; pointer-events: none;
  opacity: 0.5; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.5'/%3E%3C/svg%3E");
}
/* tout le contenu au-dessus du grain */
.top-chrome, main, .bottom-nav, .modal-overlay, .toast-wrap { position: relative; z-index: 2; }

button { font-family: inherit; cursor: pointer; border: none; background: none; color: inherit; }
::selection { background: var(--rage); color: #fff; }

.app { max-width: 540px; margin: 0 auto; padding: 0 16px; }
main.app { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }

/* Motif "hazard" réutilisable (bande de chantier) */
.hazard {
  background-image: repeating-linear-gradient(-45deg,
    var(--primary) 0 10px, transparent 10px 20px);
}

/* ─── Top Chrome (header + XP bar) ────────────────────────────────── */
.top-chrome {
  position: sticky; top: 0; z-index: 40;
  backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}

/* Barre marque — compacte */
.app-header {
  background: var(--header-bg);
  padding: 8px 16px;
  border-bottom: 1px solid var(--line);
}
.app-header .app { padding: 0; }

.header-inner {
  display: grid;
  grid-template-columns: 44px 1fr 44px;
  align-items: center;
}

/* Burger */
.btn-burger {
  width: 44px; height: 44px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 5px; border-radius: var(--r-sm);
  transition: background .15s ease;
}
.btn-burger:active { background: var(--primary-bg); }
.btn-burger span {
  display: block; height: 2px; border-radius: 1px; background: var(--ink);
  transition: transform .3s cubic-bezier(.22,1,.36,1), opacity .2s ease, width .25s ease;
}
.btn-burger span:nth-child(1) { width: 22px; }
.btn-burger span:nth-child(2) { width: 14px; }
.btn-burger span:nth-child(3) { width: 22px; }
.btn-burger.open span:nth-child(1) { width: 20px; transform: translateY(7px) rotate(45deg); }
.btn-burger.open span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.btn-burger.open span:nth-child(3) { width: 20px; transform: translateY(-7px) rotate(-45deg); }

/* Marque centrée */
.brand { display: flex; align-items: center; justify-content: center; }
.brand-name {
  font-family: 'Anton', sans-serif; font-weight: 400; font-size: 22px;
  letter-spacing: 0.07em; text-transform: uppercase; line-height: 1;
  background: linear-gradient(100deg, var(--primary-lt) 0%, var(--ink) 48%, var(--rage) 100%);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}

/* Profil */
.btn-profile {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 2px solid var(--line-2);
  color: var(--ink-2); position: relative; justify-self: end;
  transition: border-color .2s ease, background .2s ease, transform .15s ease;
}
.btn-profile:active { transform: scale(.88); }
.btn-profile .profile-svg { width: 18px; height: 18px; }
.btn-profile .profile-initial {
  display: none; font-family: 'Anton', sans-serif; font-size: 16px;
  letter-spacing: 0; line-height: 1; color: #fff;
}
.btn-profile:not(.authed)::after {
  content: '+'; position: absolute; bottom: -2px; right: -2px;
  width: 15px; height: 15px; border-radius: 50%;
  background: var(--rage); border: 2px solid var(--bg);
  font-size: 9px; font-weight: 900; color: #fff;
  display: grid; place-items: center; line-height: 1;
}
.btn-profile.authed {
  background: linear-gradient(135deg, var(--primary), var(--rage));
  border: 2px solid #000;
  box-shadow: 0 0 0 2px var(--primary), 0 0 16px rgba(139,61,255,0.4);
}
.btn-profile.authed .profile-svg { display: none; }
.btn-profile.authed .profile-initial { display: block; }
.btn-profile.authed::after { display: none; }

/* ─── Drawer ──────────────────────────────────────────────────────── */
.drawer-overlay {
  position: fixed; inset: 0; z-index: 100;
  background: rgba(0,0,0,0.62);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; pointer-events: none;
  transition: opacity .28s ease;
}
.drawer-overlay.open { opacity: 1; pointer-events: all; }

.drawer {
  position: absolute; top: 0; left: 0; bottom: 0;
  width: min(88vw, 320px);
  background: var(--bg);
  border-right: 2px solid var(--line-2);
  box-shadow: 6px 0 40px rgba(0,0,0,0.55);
  display: flex; flex-direction: column;
  transform: translateX(-100%);
  transition: transform .3s cubic-bezier(.22,1,.36,1);
  overflow: hidden;
}
.drawer-overlay.open .drawer { transform: translateX(0); }

.drawer-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 14px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(135deg, rgba(139,61,255,0.12), rgba(255,46,126,0.06));
}
.dh-brand { display: flex; align-items: center; gap: 10px; }
.dh-logo { font-size: 22px; line-height: 1; }
.dh-name {
  font-family: 'Anton', sans-serif; font-size: 20px; font-weight: 400;
  letter-spacing: 0.07em; text-transform: uppercase;
  background: linear-gradient(100deg, var(--primary-lt), var(--rage));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.drawer-close {
  width: 34px; height: 34px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 1px solid var(--line-2);
  color: var(--ink-2); flex: none;
  transition: background .15s, transform .15s;
}
.drawer-close:active { background: var(--rage); color: #fff; transform: scale(.88); }

.drawer-user {
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.du-guest {
  display: flex; align-items: center; gap: 12px;
}
.du-guest-icon {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--panel); border: 2px dashed var(--line-2);
  font-size: 18px; flex: none;
}
.du-guest-text { flex: 1; }
.du-guest-text strong { display: block; font-size: 13px; font-weight: 800; color: var(--ink); }
.du-guest-text span { font-size: 11px; color: var(--ink-3); }
.du-register-btn {
  padding: 7px 14px; border-radius: 20px;
  background: linear-gradient(135deg, var(--primary), var(--rage));
  border: 2px solid #000; box-shadow: var(--hard-sm);
  font-size: 12px; font-weight: 900; color: #fff;
  white-space: nowrap; flex: none;
  transition: transform .1s ease;
}
.du-register-btn:active { transform: scale(.93); }

.du-connected {
  display: flex; align-items: center; gap: 12px;
}
.du-avatar {
  width: 40px; height: 40px; border-radius: 50%;
  display: grid; place-items: center;
  background: linear-gradient(135deg, var(--primary), var(--rage));
  border: 2px solid #000;
  font-family: 'Anton', sans-serif; font-size: 18px; color: #fff;
  flex: none;
}
.du-info { flex: 1; overflow: hidden; }
.du-info strong { display: block; font-size: 13px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.du-info span { font-size: 11px; color: var(--ink-3); }
.du-logout-btn {
  padding: 6px 12px; border-radius: 6px;
  background: var(--panel); border: 1px solid var(--line-2);
  font-size: 11px; color: var(--ink-3); flex: none;
  transition: background .15s;
}
.du-logout-btn:active { background: #c0392b; color: #fff; }

.drawer-nav {
  flex: 1; overflow-y: auto; padding: 8px 0;
}
.drawer-item {
  display: flex; align-items: center; gap: 14px;
  width: 100%; padding: 14px 18px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  transition: background .15s ease;
  position: relative;
}
.drawer-item:last-child { border-bottom: none; }
.drawer-item:hover, .drawer-item:focus { background: var(--primary-bg); }
.drawer-item.active { background: rgba(139,61,255,0.1); }
.drawer-item.active::before {
  content: ''; position: absolute; left: 0; top: 0; bottom: 0;
  width: 3px; background: var(--primary); border-radius: 0 2px 2px 0;
}
.di-ico { font-size: 22px; flex: none; width: 30px; text-align: center; }
.di-body { flex: 1; }
.di-label { font-size: 14px; font-weight: 800; color: var(--ink); line-height: 1.15; }
.di-desc { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.di-arr { color: var(--ink-3); font-size: 20px; font-weight: 300; flex: none; }
.drawer-item--settings .di-label { color: var(--ink-3); }

.drawer-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--line);
}
.drawer-version { font-size: 10px; color: var(--ink-3); text-align: center; text-transform: uppercase; letter-spacing: 0.06em; }

/* Barre XP — mise en valeur gamification */
.xp-bar {
  background: linear-gradient(135deg, rgba(139,61,255,0.13) 0%, rgba(255,46,126,0.07) 100%),
              var(--panel);
  border-bottom: 2px solid var(--primary);
  box-shadow: 0 2px 18px rgba(139,61,255,0.18);
  padding: 10px 16px 11px;
}
.xp-bar .app { padding: 0; }

.progress-bar-wrap { cursor: pointer; }
.progress-top { display: flex; align-items: center; justify-content: space-between; margin-bottom: 8px; }
.rank-chip { display: flex; align-items: center; gap: 10px; }
.rank-emoji { font-size: 24px; }
.rank-meta .rank-belt { font-size: 14px; font-weight: 800; line-height: 1.05; text-transform: uppercase; letter-spacing: 0.02em; }
.rank-meta .rank-title { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 1px; }
.karma-num { font-family: 'Anton', sans-serif; font-size: 22px; color: var(--primary-lt); letter-spacing: 0.02em; line-height: 1; text-align: right; }
.karma-num small { display: block; color: var(--ink-3); font-weight: 700; font-family: 'Inter'; font-size: 9px; text-transform: uppercase; letter-spacing: 0.06em; }

.gauge { height: 10px; background: #000; border: 2px solid var(--line-2); overflow: hidden; position: relative; border-radius: 2px; }
.gauge-fill {
  height: 100%; width: 0;
  background: var(--primary);
  background-image: repeating-linear-gradient(-45deg, rgba(255,255,255,0.18) 0 6px, transparent 6px 12px);
  box-shadow: 0 0 14px var(--primary);
  transition: width 0.7s cubic-bezier(.22,1,.36,1);
}
.karma-remain { margin-top: 5px; font-size: 10px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; }
.karma-remain b { color: var(--rage); }

/* ─── Cards / sections ─────────────────────────────────────────────── */
.card {
  background: var(--panel);
  border: 2px solid var(--line-2);
  border-radius: var(--r-lg);
  box-shadow: var(--hard-sm);
  padding: 16px;
}
.section { margin-top: 18px; }
.section-title {
  font-size: 11px; font-weight: 800; color: var(--ink-2); margin: 4px 0 11px;
  text-transform: uppercase; letter-spacing: 0.12em;
  display: flex; align-items: center; gap: 9px;
}
.section-title::before { content: ''; width: 16px; height: 10px; flex: none; border: 1px solid var(--primary); }
.section-title::after { content: ''; flex: 1; height: 2px; background: var(--line); }

.screen { display: none; padding-top: 18px; animation: slide .28s ease; }
.screen.active { display: block; }
@keyframes slide { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

/* ─── Sélecteurs dépliables (personne / crise) ─────────────────────── */
.selector-head {
  width: 100%; display: flex; align-items: center; gap: 12px;
  padding: 13px 14px; border-radius: var(--r);
  background: var(--panel); border: 2px solid var(--line-2);
  box-shadow: var(--hard-sm); text-align: left;
  transition: transform .1s ease, box-shadow .1s ease;
}
.selector-head:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 rgba(0,0,0,0.6); }
.sel-emoji { font-size: 24px; flex: none; }
.sel-name { flex: 1; font-size: 15px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.01em; }
.sel-caret { color: var(--primary-lt); font-size: 13px; }
.selector-panel { margin-top: 10px; }
.selector-panel.hidden { display: none; }

.chip-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 9px; }
.chip {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 11px 12px; border-radius: var(--r);
  background: var(--bg-2); border: 2px solid var(--line);
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.chip:active { transform: translate(2px,2px); }
.chip.selected { border-color: var(--primary); background: var(--primary-bg); box-shadow: var(--glow); }
.chip-emoji { font-size: 19px; flex: none; }
.chip-label { font-size: 13px; font-weight: 700; }

.add-chip {
  width: 100%; padding: 11px; border-radius: var(--r);
  background: transparent; border: 2px dashed var(--line-2);
  color: var(--primary-lt); font-weight: 800; font-size: 12px;
  text-transform: uppercase; letter-spacing: 0.05em;
  transition: background .15s ease, border-color .15s ease;
}
.add-chip:hover { background: var(--primary-bg); border-color: var(--primary); }

/* Catégories (grille) */
.cat-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 9px; margin-bottom: 9px; }
.cat-btn {
  display: flex; align-items: center; gap: 9px; text-align: left;
  padding: 12px; border-radius: var(--r);
  background: var(--bg-2); border: 2px solid var(--line);
  transition: transform .1s ease, border-color .15s ease, background .15s ease;
}
.cat-btn:active { transform: translate(2px,2px); }
.cat-btn.selected { border-color: var(--primary); background: var(--primary-bg); box-shadow: var(--glow); }
.cat-emoji { font-size: 21px; flex: none; }
.cat-label { font-size: 13px; font-weight: 700; }

/* ─── Slider de gravité ────────────────────────────────────────────── */
.gravity-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; }
.gravity-head > span:first-child { font-weight: 800; font-size: 12px; text-transform: uppercase; letter-spacing: 0.08em; }
.gravity-label { font-family: 'Anton', sans-serif; font-size: 16px; color: var(--rage); text-transform: uppercase; letter-spacing: 0.02em; }
input[type="range"].gravity {
  -webkit-appearance: none; appearance: none; width: 100%; height: 10px; border-radius: 0;
  background: #000; border: 2px solid var(--line-2);
  outline: none;
}
input[type="range"].gravity::-webkit-slider-thumb {
  -webkit-appearance: none; width: 24px; height: 24px; border-radius: 3px;
  background: var(--rage); border: 2px solid #000; box-shadow: var(--hard-sm); cursor: grab;
}
input[type="range"].gravity::-moz-range-thumb {
  width: 24px; height: 24px; border-radius: 3px;
  background: var(--rage); border: 2px solid #000; cursor: grab;
}

/* ─── Boutons ──────────────────────────────────────────────────────── */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 16px; border-radius: var(--r);
  font-weight: 900; font-size: 14px; letter-spacing: 0.06em; text-transform: uppercase;
  border: 2px solid #000;
  transition: transform .08s ease, box-shadow .08s ease, background .15s ease;
}
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--hard); }
.btn-primary:active { transform: translate(4px,4px); box-shadow: 0 0 0 0 var(--primary); }
.btn-ghost { background: var(--panel-2); color: var(--ink); box-shadow: var(--hard-sm); }
.btn-ghost:active { transform: translate(3px,3px); box-shadow: 0 0 0 0 #000; }
.btn:disabled { opacity: .4; pointer-events: none; }
#btn-generate { font-family: 'Anton', sans-serif; font-weight: 400; font-size: 19px; letter-spacing: 0.04em; padding: 18px; }

/* ─── RAGE PUMP ────────────────────────────────────────────────────── */
.pump-wrap { text-align: center; padding: 22px 0 8px; }
.pump-btn {
  position: relative; width: 234px; height: 234px; border-radius: 50%;
  margin: 10px auto 0; display: grid; place-items: center;
  background: radial-gradient(circle at 50% 36%, var(--rage), #7a0d3a 72%, #240712);
  border: 3px solid #000;
  box-shadow: var(--hard-rage), 0 0 50px rgba(255,46,126,0.4), inset 0 2px 12px rgba(255,255,255,0.25);
  user-select: none; touch-action: none;
  transition: transform .1s ease;
}
.pump-btn:active { transform: translate(3px,3px); }
.pump-btn.charging { animation: pump-shake .2s linear infinite; }
@keyframes pump-shake {
  0%,100% { transform: translate(0,0); } 25% { transform: translate(-2px,1px); }
  50% { transform: translate(2px,-1px); } 75% { transform: translate(-1px,-2px); }
}
.pump-ring {
  position: absolute; inset: -12px; border-radius: 50%;
  background: conic-gradient(var(--cool) calc(var(--charge,0) * 1%), transparent 0);
  -webkit-mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
          mask: radial-gradient(farthest-side, transparent calc(100% - 10px), #000 calc(100% - 9px));
  transition: background .08s linear;
}
.pump-label { font-family: 'Anton', sans-serif; font-size: 34px; letter-spacing: 0.05em; line-height: 0.95; text-shadow: 2px 2px 0 #000; }
.pump-sub { font-size: 11px; color: rgba(255,255,255,0.85); margin-top: 6px; padding: 0 26px; text-transform: uppercase; letter-spacing: 0.03em; }
.pump-hint { margin-top: 18px; font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }

/* ─── Onde de choc + distorsion (Rage premium) ─────────────────────── */
.shockwave {
  position: fixed; left: 50%; top: 46%; width: 14px; height: 14px; border-radius: 50%;
  border: 4px solid var(--rage); transform: translate(-50%, -50%) scale(1);
  z-index: 78; pointer-events: none;
  box-shadow: 0 0 30px var(--rage);
  animation: shock 0.72s cubic-bezier(.2,.7,.3,1) forwards;
}
@keyframes shock {
  0%   { transform: translate(-50%,-50%) scale(1); opacity: 0.9; }
  100% { transform: translate(-50%,-50%) scale(46); opacity: 0; border-width: 1px; }
}
body.screen-jolt { animation: jolt 0.42s steps(2, end); }
@keyframes jolt {
  0%,100% { filter: none; }
  20% { filter: hue-rotate(-25deg) saturate(1.6) contrast(1.25); }
  50% { filter: hue-rotate(20deg) saturate(1.3) contrast(1.15); }
  80% { filter: saturate(1.2); }
}

/* ─── Modal ────────────────────────────────────────────────────────── */
.modal-overlay {
  position: fixed; inset: 0; z-index: 80; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(4,4,8,0.86); backdrop-filter: blur(6px);
}
.modal-overlay.open { display: flex; animation: fade .2s ease; }
@keyframes fade { from { opacity: 0; } to { opacity: 1; } }
.modal {
  width: 100%; max-width: 440px; text-align: center;
  background: var(--bg-2);
  border: 3px solid var(--line-2); border-radius: var(--r-lg);
  box-shadow: 8px 8px 0 0 #000, var(--glow); padding: 26px 22px;
  max-height: 88vh; overflow-y: auto;
}
.challenge-emoji { font-size: 56px; line-height: 1; }
.challenge-cat { margin-top: 10px; font-size: 11px; font-weight: 800; color: var(--primary-lt); text-transform: uppercase; letter-spacing: 0.06em; }
.challenge-reason { margin-top: 10px; font-size: 15px; color: var(--ink-2); font-style: italic; }
.challenge-qty { font-family: 'Anton', sans-serif; margin: 16px 0 2px; font-size: 76px; line-height: 0.9; color: var(--rage); text-shadow: 3px 3px 0 #000; }
.challenge-ex { font-size: 17px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.challenge-karma { margin-top: 12px; font-size: 12px; color: var(--cool); font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.modal-actions { display: flex; gap: 10px; margin-top: 22px; }
.modal-actions .btn { width: auto; flex: 1; }
.timer { font-family: 'Anton', sans-serif; font-size: 84px; line-height: 1; color: var(--ink); text-shadow: 3px 3px 0 #000; }

/* ─── Journal ──────────────────────────────────────────────────────── */
.journal-item { display: flex; align-items: center; gap: 12px; padding: 11px 2px; border-bottom: 2px solid var(--line); }
.journal-item:last-child { border-bottom: none; }
.journal-emoji { font-size: 21px; flex: none; width: 40px; height: 40px; border-radius: var(--r-sm); display: grid; place-items: center; background: var(--bg-2); border: 2px solid var(--line); }
.journal-main { flex: 1; min-width: 0; }
.journal-line1 { font-size: 13.5px; font-weight: 700; }
.journal-line2 { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.journal-karma { font-family: 'Anton', sans-serif; font-size: 15px; color: var(--cool); flex: none; }
.empty { text-align: center; color: var(--ink-3); padding: 38px 10px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.empty .big { font-size: 42px; display: block; margin-bottom: 10px; }

.stat-row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.stat { text-align: center; padding: 12px 4px; border: 2px solid var(--line); border-radius: var(--r-sm); background: var(--bg-2); }
.stat-val { font-family: 'Anton', sans-serif; font-size: 26px; color: var(--ink); }
.stat-key { font-size: 9.5px; color: var(--ink-3); margin-top: 2px; text-transform: uppercase; letter-spacing: 0.05em; }

/* ─── Badges / hauts faits ─────────────────────────────────────────── */
.badges-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 11px; }
.badge { text-align: center; opacity: .42; cursor: pointer; transition: opacity .2s ease, transform .1s ease; }
.badge.earned { opacity: 1; }
.badge:active { transform: translateY(1px); }
.badge-ico {
  width: 54px; height: 54px; margin: 0 auto 6px; border-radius: var(--r-sm);
  display: grid; place-items: center; font-size: 26px;
  background: var(--bg-2); border: 2px solid var(--line); filter: grayscale(1);
}
.badge.earned .badge-ico { background: var(--primary-bg); border-color: var(--primary); box-shadow: var(--hard-sm); filter: none; }
.badge-name { font-size: 9px; color: var(--ink-3); line-height: 1.2; text-transform: uppercase; letter-spacing: 0.02em; }
.badge.earned .badge-name { color: var(--ink-2); }

/* Tooltip d'objectif (au clic) */
.badge-tip {
  position: fixed; z-index: 95; max-width: 240px; display: none;
  background: var(--bg-2); border: 2px solid var(--primary); border-radius: var(--r);
  box-shadow: 5px 5px 0 0 #000; padding: 12px 14px; text-align: left;
  animation: fade .15s ease;
}
.badge-tip.open { display: block; }
.badge-tip .bt-name { font-weight: 900; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; }
.badge-tip .bt-name .bt-emoji { margin-right: 6px; }
.badge-tip .bt-desc { font-size: 12px; color: var(--ink-2); margin-top: 5px; }
.badge-tip .bt-prog { margin-top: 9px; font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; }
.badge-tip .bt-prog.done { color: var(--cool); }
.badge-tip .bt-prog.todo { color: var(--rage); }
.badge-tip .bt-bar { height: 6px; background: #000; border: 1px solid var(--line-2); margin-top: 6px; }
.badge-tip .bt-bar i { display: block; height: 100%; background: var(--primary); }

/* ─── Niveaux (modale dédiée) ──────────────────────────────────────── */
.levels-list { display: flex; flex-direction: column; gap: 8px; text-align: left; }
.level-row {
  display: flex; align-items: center; gap: 12px; padding: 11px 12px;
  border: 2px solid var(--line); border-radius: var(--r); background: var(--bg);
}
.level-row.reached { border-color: var(--line-2); }
.level-row.current { border-color: var(--primary); background: var(--primary-bg); box-shadow: var(--glow); }
.level-row.locked { opacity: .5; }
.level-emoji { font-size: 24px; flex: none; width: 30px; text-align: center; }
.level-main { flex: 1; min-width: 0; }
.level-belt { font-size: 13px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.level-title { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.03em; }
.level-unlock { font-size: 10px; color: var(--primary-lt); margin-top: 3px; text-transform: uppercase; letter-spacing: 0.03em; }
.level-karma { font-family: 'Anton', sans-serif; font-size: 15px; color: var(--ink-2); flex: none; }
.level-row.locked .level-karma::after { content: ' 🔒'; font-family: 'Inter'; font-size: 12px; }
.modal-head { font-family: 'Anton', sans-serif; font-size: 24px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 16px; }

/* ─── Réglages ─────────────────────────────────────────────────────── */
.setting-row { display: flex; align-items: center; justify-content: space-between; padding: 13px 2px; border-bottom: 2px solid var(--line); gap: 12px; }
.setting-row:last-child { border-bottom: none; }
.setting-label { font-size: 13.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.setting-desc { font-size: 10.5px; color: var(--ink-3); margin-top: 2px; }
.seg { display: inline-flex; background: #000; border: 2px solid var(--line-2); border-radius: var(--r-sm); padding: 2px; gap: 2px; }
.seg button { padding: 7px 13px; border-radius: 3px; font-size: 12px; font-weight: 800; color: var(--ink-2); text-transform: uppercase; letter-spacing: 0.03em; }
.seg button.on { background: var(--primary); color: #fff; }
.danger-link { color: var(--rage); font-size: 12px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.04em; }

.manage-row { display: flex; align-items: center; gap: 10px; padding: 9px 2px; border-bottom: 2px solid var(--line); }
.manage-row:last-child { border-bottom: none; }
.manage-emoji { font-size: 20px; flex: none; }
.manage-name { flex: 1; font-size: 13.5px; font-weight: 700; }
.star { font-size: 18px; color: var(--ink-3); flex: none; width: 30px; }
.star.on { color: var(--rage); }
.icon-btn { font-size: 16px; padding: 4px 6px; border-radius: var(--r-sm); opacity: .8; }
.icon-btn:hover { opacity: 1; background: var(--panel-2); }

.editor-title { font-family: 'Anton', sans-serif; font-size: 22px; text-transform: uppercase; letter-spacing: 0.03em; margin-bottom: 16px; }
.editor-row { display: flex; gap: 10px; margin-bottom: 8px; }
.editor-emoji, .editor-name {
  padding: 13px; border-radius: var(--r); background: #000;
  border: 2px solid var(--line-2); color: var(--ink); font-size: 16px; font-family: inherit; outline: none;
  transition: border-color .15s ease;
}
.editor-emoji { width: 66px; text-align: center; font-size: 24px; }
.editor-name { flex: 1; }
.editor-emoji:focus, .editor-name:focus { border-color: var(--primary); }

/* ─── Nemesis (lien de couple) ─────────────────────────────────────── */
.nemesis-banner {
  background: var(--rage-bg); border: 2px solid var(--rage); border-radius: var(--r);
  padding: 11px 13px; margin-bottom: 12px; font-size: 13px; line-height: 1.4;
}
.nemesis-banner b { color: var(--ink); }
.nemesis-code {
  font-family: 'Anton', sans-serif; font-size: 38px; letter-spacing: 0.18em;
  color: var(--primary-lt); text-align: center; margin: 8px 0; text-shadow: 2px 2px 0 #000;
}
.duel { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.duel-side { flex: 1; text-align: center; }
.duel-name { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; }
.duel-val { font-family: 'Anton', sans-serif; font-size: 46px; line-height: 1; color: var(--ink); text-shadow: 2px 2px 0 #000; }
.duel-vs { font-family: 'Anton', sans-serif; font-size: 20px; color: var(--rage); flex: none; }
.duel-lead { text-align: center; margin-top: 10px; font-weight: 800; font-size: 13px; text-transform: uppercase; letter-spacing: 0.03em; color: var(--primary-lt); }

/* ─── Bilan (analytics premium) ────────────────────────────────────── */
.bilan-hero { text-align: center; padding: 8px 0 14px; }
.bilan-kg { font-family: 'Anton', sans-serif; font-size: 64px; line-height: 0.9; color: var(--rage); text-shadow: 3px 3px 0 #000; }
.bilan-sub { font-size: 11px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 4px; }
.bilan-facts { display: flex; flex-direction: column; gap: 9px; }
.bilan-fact { background: var(--bg-2); border: 2px solid var(--line); border-radius: var(--r); padding: 11px 13px; font-size: 13px; text-align: left; }
.bilan-fact b { color: var(--ink); }

/* ─── Premium ──────────────────────────────────────────────────────── */
.pro-badge {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 4px;
  background: linear-gradient(135deg, var(--primary), var(--rage)); color: #fff;
  font-size: 8.5px; font-weight: 900; letter-spacing: 0.08em; vertical-align: middle;
  border: 1px solid #000;
}
.challenge-target { margin-top: 8px; font-size: 12px; font-weight: 800; color: var(--rage); text-transform: uppercase; letter-spacing: 0.04em; }

/* ─── Skins (grille de thèmes débloquables) ────────────────────────── */
.skin-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 9px; }
.skin {
  display: flex; flex-direction: column; align-items: center; gap: 5px;
  padding: 12px 6px; border-radius: var(--r); background: var(--bg-2);
  border: 2px solid var(--line); transition: border-color .15s ease, transform .1s ease;
}
.skin:active { transform: translate(2px,2px); }
.skin.on { border-color: var(--primary); background: var(--primary-bg); box-shadow: var(--glow); }
.skin.locked { opacity: .55; }
.skin-dot {
  width: 30px; height: 30px; border-radius: 50%; border: 2px solid #000;
  /* aperçu : dégradé issu des tokens du thème ciblé */
  background: linear-gradient(135deg, var(--primary), var(--rage));
}
.skin-dot[data-theme="cold"]  { background: linear-gradient(135deg, #3b82f6, #22d3ee); }
.skin-dot[data-theme="onyx"]  { background: linear-gradient(135deg, #c0c4cc, #e0457b); }
.skin-dot[data-theme="forge"] { background: linear-gradient(135deg, #a855f7, #ff2e7e); }
.skin-dot[data-theme="gold"]  { background: linear-gradient(135deg, #d4af37, #fff8e6); }
.skin-dot[data-theme="midnight-violet"] { background: linear-gradient(135deg, #b16cff, #38bdf8); }
.skin-name { font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.02em; }
.skin-sub { font-size: 9px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.02em; }
.skin.on .skin-sub { color: var(--primary-lt); }

/* ─── Auth (login / register) ──────────────────────────────────────── */
.auth-input {
  display: block; width: 100%; margin-bottom: 10px; padding: 13px;
  border-radius: var(--r); background: #000; border: 2px solid var(--line-2);
  color: var(--ink); font-size: 15px; font-family: inherit; outline: none;
  transition: border-color .15s ease;
}
.auth-input:focus { border-color: var(--primary); }
.auth-err {
  background: var(--rage-bg); border: 2px solid var(--rage); color: var(--ink);
  border-radius: var(--r); padding: 10px 12px; margin-bottom: 12px;
  font-size: 12.5px; font-weight: 600; text-align: left;
}
.auth-switch { margin-top: 14px; font-size: 12px; color: var(--primary-lt); font-weight: 700; cursor: pointer; text-transform: uppercase; letter-spacing: 0.03em; }

/* ─── Onboarding ───────────────────────────────────────────────────── */
.modal.onboarding { text-align: center; }
.onb-logo {
  width: 84px; height: 84px; margin: 0 auto 14px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 44px;
  background: var(--primary); border: 3px solid #000; box-shadow: var(--hard-sm); transform: rotate(-3deg);
}
.onb-title { font-family: 'Anton', sans-serif; font-size: 36px; text-transform: uppercase; letter-spacing: 0.04em; }
.onb-tag { color: var(--ink-2); font-size: 13px; margin-top: 6px; text-transform: uppercase; letter-spacing: 0.03em; }
.onb-steps { list-style: none; text-align: left; margin: 22px 0; display: flex; flex-direction: column; gap: 14px; }
.onb-steps li { display: flex; gap: 12px; align-items: flex-start; font-size: 13.5px; color: var(--ink-2); line-height: 1.4; }
.onb-steps li span { font-size: 22px; flex: none; }
.onb-steps li b { color: var(--ink); }
.onb-tone { display: flex; align-items: center; justify-content: space-between; margin: 8px 0 22px; font-size: 12px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.03em; }

.onb-step { display: none; }
.onb-step.active { display: block; animation: onb-in .32s cubic-bezier(.22,1,.36,1); }
@keyframes onb-in { from { opacity: 0; transform: translateX(18px); } to { opacity: 1; transform: none; } }

.onb-q {
  font-family: 'Anton', sans-serif; font-size: 26px; font-weight: 400;
  text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 6px;
}
.onb-q-sub { color: var(--ink-3); font-size: 12px; text-transform: uppercase; letter-spacing: 0.04em; margin-bottom: 22px; }

.onb-people {
  display: flex; flex-direction: column; gap: 10px; margin-bottom: 24px;
}
.onb-person-btn {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 16px; border-radius: var(--r);
  background: var(--panel); border: 2px solid var(--line-2);
  text-align: left; width: 100%;
  transition: border-color .18s ease, background .18s ease, transform .12s ease;
}
.onb-person-btn:active { transform: scale(.97); }
.onb-person-btn.selected {
  border-color: var(--primary);
  background: rgba(139,61,255,0.1);
  box-shadow: 0 0 0 2px var(--primary);
}
.onb-person-emoji { font-size: 28px; flex: none; }
.onb-person-name { font-size: 15px; font-weight: 800; flex: 1; }
.onb-person-check { font-size: 18px; opacity: 0; transition: opacity .15s; }
.onb-person-btn.selected .onb-person-check { opacity: 1; }

/* ─── Toast ────────────────────────────────────────────────────────── */
.toast-wrap { position: fixed; left: 0; right: 0; bottom: 108px; z-index: 90; display: flex; flex-direction: column; align-items: center; gap: 8px; pointer-events: none; }
.toast {
  max-width: 440px; width: calc(100% - 32px);
  background: var(--primary); color: #fff;
  border: 2px solid #000; border-radius: var(--r); padding: 12px 15px; box-shadow: var(--hard-sm);
  font-size: 12.5px; font-weight: 600; animation: toast-in .35s cubic-bezier(.22,1,.36,1);
}
.toast b { display: block; font-weight: 900; margin-bottom: 2px; text-transform: uppercase; letter-spacing: 0.03em; }
@keyframes toast-in { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }

/* ─── Bottom nav ───────────────────────────────────────────────────── */
.bottom-nav {
  position: fixed; bottom: 0; left: 0; right: 0; z-index: 50;
  background: var(--header-bg);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  border-top: 2px solid var(--line-2);
}
.bottom-nav .app { display: flex; justify-content: space-around; padding: 8px 16px calc(8px + env(safe-area-inset-bottom)); }
.nav-btn { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 6px 12px; border-radius: var(--r-sm); color: var(--ink-3); font-size: 9.5px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em; transition: color .15s ease; }
.nav-btn .nav-ico { font-size: 20px; }
.nav-btn.active { color: var(--primary-lt); }
.nav-btn.active .nav-ico { filter: drop-shadow(0 0 6px var(--primary)); }

/* ─── Sections repliables (réglages) ───────────────────────────────── */
.section-toggle {
  width: 100%; display: flex; align-items: center; gap: 9px;
  padding: 12px 13px; border-radius: var(--r);
  background: var(--panel); border: 2px solid var(--line-2);
  box-shadow: var(--hard-sm); text-align: left;
  transition: transform .1s ease, box-shadow .1s ease, border-color .15s ease;
}
.section-toggle:active { transform: translate(2px,2px); box-shadow: 1px 1px 0 0 rgba(0,0,0,0.6); }
.section-toggle::before { content: ''; width: 16px; height: 10px; flex: none; border: 1px solid var(--primary); }
/* bloc texte + description */
.section-toggle .st-body { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.section-toggle .st-text { font-size: 11px; font-weight: 800; color: var(--ink); text-transform: uppercase; letter-spacing: 0.1em; }
.section-toggle .st-desc { font-size: 10px; color: var(--ink-3); font-weight: 500; text-transform: none; letter-spacing: 0.01em; line-height: 1.3; }
.section-toggle .st-lock { display: none; font-size: 13px; }
.section-toggle .collapse-caret { color: var(--primary-lt); font-size: 13px; transition: transform .25s ease; flex: none; }
.section.open .section-toggle { border-color: var(--primary); }
.section.open .section-toggle .collapse-caret { transform: rotate(180deg); }

/* Corps repliable : animation de hauteur fluide (grid 0fr → 1fr) */
.collapse-body { display: grid; grid-template-rows: 0fr; transition: grid-template-rows .28s cubic-bezier(.22,1,.36,1); }
.section.open .collapse-body { grid-template-rows: 1fr; }
.collapse-inner { overflow: hidden; min-height: 0; }
.collapse-inner > .card { margin-top: 10px; }

/* ─── Section Premium (mise en avant) ──────────────────────────────── */
.section-toggle--premium {
  background: linear-gradient(135deg, rgba(139,61,255,0.18), rgba(255,46,126,0.12));
  border-color: var(--primary);
  box-shadow: var(--hard), 0 0 16px rgba(139,61,255,0.22);
  color: var(--ink);
}
.section-toggle--premium::before { display: none; }
.section-toggle--premium .collapse-caret { color: var(--primary-lt); }
.section-toggle--premium .st-desc { color: var(--primary-lt); opacity: .75; }
#section-premium.open .section-toggle--premium { box-shadow: var(--hard), 0 0 24px rgba(139,61,255,0.35); }
/* état actif : teinte cool/cyan */
#section-premium.premium-active .section-toggle--premium {
  background: linear-gradient(135deg, rgba(31,227,214,0.14), rgba(139,61,255,0.14));
  border-color: var(--cool);
  box-shadow: 4px 4px 0 0 var(--cool), 0 0 14px rgba(31,227,214,0.22);
}
#section-premium.premium-active .section-toggle--premium .collapse-caret { color: var(--cool); }

/* ─── Gating premium : fonctions verrouillées ──────────────────────── */
/* toggle d'une section collapsible locked */
.section.pro-locked .section-toggle {
  opacity: .5; cursor: not-allowed;
  border-style: dashed;
}
.section.pro-locked .section-toggle .st-lock { display: inline; }
.section.pro-locked .section-toggle .collapse-caret { display: none; }

/* section-title inline (ex. "Programme ciblé") */
.section[data-pro].pro-locked > .section-title { opacity: .5; }

/* selector-head premium verrouillé (Programme ciblé) */
.section[data-pro].pro-locked > .selector-head {
  position: relative; opacity: .5; cursor: not-allowed;
  border-style: dashed;
  pointer-events: none;           /* le click est capturé en JS sur #target-head */
}
.section[data-pro].pro-locked > .selector-head .sel-caret { visibility: hidden; }
.section[data-pro].pro-locked > .selector-head::after {
  content: '🔒'; position: absolute; right: 14px;
  top: 50%; transform: translateY(-50%); font-size: 16px;
  pointer-events: none;
}
/* réactive le pointer sur le wrapper pour catcher le toast */
.section[data-pro].pro-locked { pointer-events: auto; }
.section[data-pro].pro-locked > .selector-head { pointer-events: auto; opacity: .5; }

#bilan-card .setting-desc { opacity: .9; }

/* ─── Bouton "C'est fait" avec compte à rebours ────────────────────── */
.done-btn { position: relative; gap: 6px; transition: background .3s ease, transform .08s ease, box-shadow .08s ease; }
.done-btn .done-label { flex: 1; }
.done-btn .done-cd {
  font-family: 'Anton', sans-serif; font-size: 16px; line-height: 1;
  background: rgba(0,0,0,0.28); border-radius: 4px; padding: 2px 7px;
  min-width: 28px; text-align: center; letter-spacing: 0;
}
.done-btn:disabled { opacity: .55; pointer-events: none; }
.done-btn.unlocked { animation: reward-pop .35s cubic-bezier(.18,1.5,.4,1); }

/* ─── Modale Premium (upsell) ──────────────────────────────────────── */
.modal--premium { text-align: left; }
.pm-header {
  text-align: center; padding-bottom: 18px;
  border-bottom: 2px solid var(--line-2); margin-bottom: 18px;
}
.pm-badge {
  width: 64px; height: 64px; margin: 0 auto 12px; border-radius: var(--r);
  display: grid; place-items: center; font-size: 32px;
  background: linear-gradient(135deg, var(--primary), var(--rage));
  border: 3px solid #000; box-shadow: var(--hard-sm);
  animation: reward-pop .5s cubic-bezier(.18,1.5,.4,1) both;
}
.pm-title {
  font-family: 'Anton', sans-serif; font-size: 28px; text-transform: uppercase;
  letter-spacing: 0.04em; line-height: 1;
  background: linear-gradient(90deg, var(--primary-lt), var(--rage));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent;
  background-clip: text;
}
.pm-sub { font-size: 12px; color: var(--ink-3); margin-top: 6px; text-transform: uppercase; letter-spacing: 0.05em; }
.pm-features { list-style: none; display: flex; flex-direction: column; gap: 13px; margin-bottom: 22px; }
.pm-features li {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 11px 12px; border-radius: var(--r);
  background: var(--bg); border: 2px solid var(--line);
  font-size: 12.5px; line-height: 1.4; color: var(--ink-2);
}
.pm-features li b { color: var(--ink); display: block; margin-bottom: 2px; font-size: 13px; text-transform: uppercase; letter-spacing: 0.02em; }
.pm-ico { font-size: 22px; flex: none; width: 28px; text-align: center; margin-top: 1px; }

/* ─── Modale de récompense (après « C'est fait ») ──────────────────── */
.reward { text-align: center; }
.reward-burst {
  font-size: 60px; line-height: 1; display: inline-block;
  animation: reward-pop .55s cubic-bezier(.18,1.5,.4,1) both;
}
@keyframes reward-pop {
  0% { transform: scale(0) rotate(-25deg); opacity: 0; }
  60% { transform: scale(1.25) rotate(8deg); opacity: 1; }
  100% { transform: scale(1) rotate(0); }
}
.reward-title {
  font-family: 'Anton', sans-serif; font-size: 26px; text-transform: uppercase;
  letter-spacing: 0.04em; margin-top: 8px; color: var(--ink);
}
.reward-karma {
  font-family: 'Anton', sans-serif; font-size: 54px; line-height: 1;
  color: var(--cool); text-shadow: 3px 3px 0 #000; margin: 6px 0 4px;
}
.reward-karma small { font-family: 'Inter'; font-size: 14px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 800; }
.reward-rank {
  display: flex; align-items: center; justify-content: center; gap: 11px;
  margin: 16px 0 10px; padding: 12px; border-radius: var(--r);
  background: var(--bg-2); border: 2px solid var(--line); text-align: left;
}
.reward-rank-emoji { font-size: 30px; flex: none; }
.reward-belt { font-size: 14px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.02em; }
.reward-rank-title { font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.04em; }
.reward .gauge { height: 12px; }
.reward-remain { margin-top: 7px; font-size: 10.5px; color: var(--ink-3); text-transform: uppercase; letter-spacing: 0.05em; font-weight: 700; }
.reward-remain b { color: var(--rage); }
.reward-levelup {
  margin-top: 14px; padding: 11px; border-radius: var(--r);
  background: linear-gradient(135deg, var(--primary-bg), var(--rage-bg));
  border: 2px solid var(--primary); box-shadow: var(--glow);
  font-family: 'Anton', sans-serif; font-size: 17px; text-transform: uppercase; letter-spacing: 0.03em;
  animation: reward-pop .5s .25s cubic-bezier(.18,1.5,.4,1) both;
}
.reward-cta {
  margin-top: 16px; padding: 14px; border-radius: var(--r);
  background: var(--rage-bg); border: 2px solid var(--rage); text-align: left;
}
.reward-cta-title { font-size: 12.5px; font-weight: 900; text-transform: uppercase; letter-spacing: 0.03em; }
.reward-cta-desc { font-size: 12px; color: var(--ink-2); margin: 5px 0 11px; line-height: 1.4; }

.hidden { display: none !important; }