/* ============================================================
   NounoursTV — Design System partagé
   Dark / Light mode avec toggle
   ============================================================ */

/* ── Variables ── */
:root {
  --ntv-accent:      #3b82f6;
  --ntv-accent-h:    221;
  --ntv-red:         #e05c5c;
  --ntv-gold:        #f59e0b;
  --ntv-purple:      #8b5cf6;
  --ntv-green:       #10b981;
  --ntv-radius:      10px;
  --ntv-radius-lg:   16px;
  --ntv-radius-xl:   22px;
  --ntv-transition:  .18s cubic-bezier(.4,0,.2,1);
  --ntv-font:        'Inter', system-ui, -apple-system, sans-serif;
  --ntv-shadow:      0 4px 24px rgba(0,0,0,.12);
  --ntv-shadow-lg:   0 12px 48px rgba(0,0,0,.22);
}

/* ── DARK MODE (défaut) ── */
[data-theme="dark"], :root {
  --bg:        #0f0f13;
  --bg2:       #18181f;
  --bg3:       #22222c;
  --border:    rgba(255,255,255,.08);
  --border2:   rgba(255,255,255,.14);
  --text:      #f1f1f5;
  --text2:     rgba(255,255,255,.55);
  --text3:     rgba(255,255,255,.32);
  --card-bg:   #1c1c24;
  --card-hover:#242430;
  --input-bg:  #232330;
  --scrollbar: rgba(255,255,255,.12);
  --topbar-bg: rgba(15,15,19,.92);
  --sidebar-bg:#141418;
  --overlay:   rgba(0,0,0,.75);
}

/* ── LIGHT MODE ── */
[data-theme="light"] {
  --bg:        #f4f4f8;
  --bg2:       #ffffff;
  --bg3:       #eeeef4;
  --border:    rgba(0,0,0,.08);
  --border2:   rgba(0,0,0,.14);
  --text:      #111118;
  --text2:     rgba(0,0,0,.55);
  --text3:     rgba(0,0,0,.35);
  --card-bg:   #ffffff;
  --card-hover:#f0f0f7;
  --input-bg:  #ededf4;
  --scrollbar: rgba(0,0,0,.12);
  --topbar-bg: rgba(244,244,248,.92);
  --sidebar-bg:#ebebf2;
  --overlay:   rgba(0,0,0,.55);
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; scroll-behavior: smooth; }
body {
  font-family: var(--ntv-font);
  background: var(--bg);
  color: var(--text);
  min-height: 100vh;
  transition: background var(--ntv-transition), color var(--ntv-transition);
}
a { color: inherit; text-decoration: none; }
button { font-family: inherit; }
img { display: block; max-width: 100%; }
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scrollbar); border-radius: 3px; }

/* ── Topbar ── */
.ntv-topbar {
  position: sticky; top: 0; z-index: 100;
  background: var(--topbar-bg);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid var(--border);
  display: flex; align-items: center; gap: 0;
  height: 58px; padding: 0 20px;
}
.ntv-logo {
  display: flex; align-items: center; gap: 10px;
  font-size: 1.15rem; font-weight: 800; letter-spacing: -.5px;
  color: var(--text); text-decoration: none; flex-shrink: 0;
}
.ntv-logo-icon {
  width: 36px; height: 36px; border-radius: 10px;
  background: linear-gradient(135deg, var(--ntv-accent), var(--ntv-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: 1.1rem; flex-shrink: 0;
}
.ntv-nav {
  display: flex; align-items: center; gap: 2px;
  margin-left: 24px; flex: 1;
}
.ntv-nav-link {
  padding: 6px 14px; border-radius: 8px;
  font-size: .85rem; font-weight: 500;
  color: var(--text2); transition: var(--ntv-transition);
  white-space: nowrap;
}
.ntv-nav-link:hover { background: var(--bg3); color: var(--text); }
.ntv-nav-link.active { background: var(--bg3); color: var(--text); font-weight: 700; }
.ntv-topbar-right {
  display: flex; align-items: center; gap: 10px; margin-left: auto; flex-shrink: 0;
}

/* ── Toggle dark/light ── */
.ntv-theme-toggle {
  width: 38px; height: 22px; border-radius: 11px;
  background: var(--bg3); border: 1px solid var(--border2);
  cursor: pointer; position: relative; transition: var(--ntv-transition);
  flex-shrink: 0;
}
.ntv-theme-toggle::after {
  content: ''; position: absolute;
  top: 2px; left: 2px;
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--ntv-accent);
  transition: transform var(--ntv-transition);
}
[data-theme="light"] .ntv-theme-toggle::after { transform: translateX(16px); }
.ntv-theme-icon { font-size: .9rem; line-height: 1; }

/* ── Avatar / user ── */
.ntv-user-btn {
  display: flex; align-items: center; gap: 8px;
  padding: 5px 12px 5px 5px; border-radius: 20px;
  background: var(--bg3); border: 1px solid var(--border2);
  cursor: pointer; font-size: .82rem; font-weight: 600;
  color: var(--text); transition: var(--ntv-transition);
}
.ntv-user-btn:hover { background: var(--card-hover); }
.ntv-avatar {
  width: 26px; height: 26px; border-radius: 50%;
  background: linear-gradient(135deg, var(--ntv-accent), var(--ntv-purple));
  display: flex; align-items: center; justify-content: center;
  font-size: .75rem; font-weight: 700; color: #fff; flex-shrink: 0;
  overflow: hidden;
}
.ntv-avatar img { width: 100%; height: 100%; object-fit: cover; }

/* ── Pill badge abonnement ── */
.ntv-sub-badge {
  font-size: .65rem; font-weight: 700; padding: 2px 8px;
  border-radius: 10px; letter-spacing: .3px;
}
.ntv-sub-badge.none     { background: var(--bg3); color: var(--text3); }
.ntv-sub-badge.decripte { background: rgba(59,130,246,.18); color: #60a5fa; border: 1px solid rgba(59,130,246,.3); }
.ntv-sub-badge.decripteplus { background: rgba(245,158,11,.18); color: #fbbf24; border: 1px solid rgba(245,158,11,.3); }
.ntv-sub-badge.decripte18   { background: rgba(224,92,92,.18); color: #f87171; border: 1px solid rgba(224,92,92,.3); }

/* ── Conteneur principal ── */
.ntv-main { min-height: calc(100vh - 58px); }
.ntv-container { max-width: 1440px; margin: 0 auto; padding: 0 20px; }

/* ── Cards génériques ── */
.ntv-card {
  background: var(--card-bg); border: 1px solid var(--border);
  border-radius: var(--ntv-radius-lg); overflow: hidden;
  transition: transform var(--ntv-transition), box-shadow var(--ntv-transition), border-color var(--ntv-transition);
}
.ntv-card:hover { border-color: var(--border2); box-shadow: var(--ntv-shadow); }
.ntv-card.clickable { cursor: pointer; }
.ntv-card.clickable:hover { transform: translateY(-3px); box-shadow: var(--ntv-shadow-lg); }

/* ── Buttons ── */
.ntv-btn {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 20px; border-radius: var(--ntv-radius);
  font-size: .85rem; font-weight: 700; cursor: pointer;
  border: none; transition: var(--ntv-transition); white-space: nowrap;
}
.ntv-btn-primary { background: var(--ntv-accent); color: #fff; }
.ntv-btn-primary:hover { opacity: .88; transform: translateY(-1px); }
.ntv-btn-white { background: #fff; color: #000; }
.ntv-btn-white:hover { background: #e8e8e8; }
.ntv-btn-ghost { background: rgba(255,255,255,.15); color: #fff; border: 1px solid rgba(255,255,255,.25); }
.ntv-btn-ghost:hover { background: rgba(255,255,255,.22); }
.ntv-btn-outline { background: transparent; color: var(--text); border: 1px solid var(--border2); }
.ntv-btn-outline:hover { background: var(--bg3); }
.ntv-btn-danger { background: rgba(224,92,92,.15); color: #f87171; border: 1px solid rgba(224,92,92,.3); }
.ntv-btn-sm { padding: 5px 12px; font-size: .78rem; border-radius: 7px; }
.ntv-btn-lg { padding: 13px 28px; font-size: .95rem; border-radius: 12px; }
.ntv-btn-pill { border-radius: 50px; }

/* ── Footer ── */
.ntv-footer {
  border-top: 1px solid var(--border);
  padding: 20px; text-align: center;
  color: var(--text3); font-size: .78rem;
  margin-top: 40px;
}

/* ── Theme init script (inline, avant render) ── */