/* ============================================
   THEME SYSTEM - Light / Dark
   Loaded after each page's inline <style>
   so it can override the :root variables.
   ============================================ */

/* Dark mode - via toggle (user picked) */
:root.dark {
  --white: #161616;
  --bg: #0c0c0c;

  --text: #f3f3f3;
  --text-muted: #b0b0b0;
  --text-light: #7a7a7a;

  --border: #2a2a2a;

  --green-light: #0f3a2e;
  --green-mid: #2a6852;
  --purple-light: #2a2658;
  --amber-light: #3a2a10;
  --coral-light: #3a1f15;
  --red-light: #3a1515;

  --nav-bg: rgba(12, 12, 12, 0.85);
}

/* Dark mode - via system preference (only if user didn't pick) */
@media (prefers-color-scheme: dark) {
  :root:not(.light) {
    --white: #161616;
    --bg: #0c0c0c;

    --text: #f3f3f3;
    --text-muted: #b0b0b0;
    --text-light: #7a7a7a;

    --border: #2a2a2a;

    --green-light: #0f3a2e;
    --green-mid: #2a6852;
    --purple-light: #2a2658;
    --amber-light: #3a2a10;
    --coral-light: #3a1f15;
    --red-light: #3a1515;

    --nav-bg: rgba(12, 12, 12, 0.85);
  }
}

/* Smooth transitions on theme change */
body, nav, section, .product-card, .testi-card, .cat-card,
.get-card, .bonus-card, .faq-list details, .inc-card, details,
.sticky-cta, .cta-section {
  transition: background-color .3s ease, color .3s ease, border-color .3s ease;
}

/* Hard-coded text colors that don't follow variables */
:root.dark .section-header h2,
:root.dark h1,
:root.dark h2 { color: var(--text); }

:root.dark .section-desc,
:root.dark p,
:root.dark .testi-quote,
:root.dark .faq-answer,
:root.dark .product-desc,
:root.dark .cat-card p,
:root.dark .get-content p,
:root.dark .bonus-card p,
:root.dark .inc-content p,
:root.dark .cat-list li { color: var(--text-muted); }

:root.dark .testi-name,
:root.dark .product-name,
:root.dark .inc-content h3,
:root.dark .cat-card h3,
:root.dark .get-content h3,
:root.dark .bonus-card h3 { color: var(--text); }

:root.dark .testi-role,
:root.dark .product-prompts,
:root.dark .stat-label,
:root.dark .product-price-original { color: var(--text-light); }

:root.dark .hero-note { color: var(--text-light); }

/* Hero gradient overlays - dim them slightly in dark */
:root.dark .hero::before {
  background: radial-gradient(ellipse 80% 50% at 50% -20%, rgba(29,158,117,0.08) 0%, transparent 60%),
              radial-gradient(ellipse 60% 40% at 80% 60%, rgba(83,74,183,0.08) 0%, transparent 50%) !important;
}
:root.dark .hero::after { opacity: 0.08; }

/* Card backgrounds (cards that were hard-coded white) */
:root.dark .product-card,
:root.dark .testi-card,
:root.dark .cat-card,
:root.dark .get-card,
:root.dark .inc-card,
:root.dark .bonus-card,
:root.dark .faq-list details {
  background: var(--white);
  border-color: var(--border);
}

:root.dark .product-card.featured {
  background: linear-gradient(180deg, var(--green-light) 0%, var(--white) 30%);
}

/* Sticky CTA */
:root.dark .sticky-cta {
  background: #161616;
  border-top-color: var(--border);
}
:root.dark .sticky-name { color: var(--text-muted); }
:root.dark .sticky-price { color: var(--text); }

/* Footer */
:root.dark footer {
  background: #0a0a0a;
  border-top-color: var(--border);
}
:root.dark footer p { color: var(--text-light); }

/* 404 page specifics */
:root.dark .error-title { color: var(--text); }
:root.dark .error-desc { color: var(--text-muted); }

/* Section tag overrides (inlined styles) */
:root.dark .tag-red { color: #ff8a8a !important; }

/* ============================================
   NAV — make the top bar follow the theme
   The inline <style> on each page hard-codes a
   white blurred background. Override it here so
   the nav reads as dark in dark mode.
   ============================================ */
:root.dark nav {
  background: var(--nav-bg) !important;
  border-bottom-color: rgba(255, 255, 255, 0.06) !important;
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.4);
}
:root.dark nav.scrolled {
  box-shadow: 0 4px 30px rgba(0, 0, 0, 0.5) !important;
}
:root.dark .nav-links a { color: var(--text-muted); }
:root.dark .nav-links a:hover,
:root.dark .nav-links a.active { color: var(--green-mid); }

/* Make the active-link underline + hover tint visible on the dark bar */
:root.dark .nav-links a::after { background: var(--green-mid); }

/* ============================================
   NAV — common to all pages
   Active link always has a visible marker so the
   current page (including Accueil on /) is obvious.
   ============================================ */
.nav-links a {
  position: relative;
  padding: 6px 2px;
  color: var(--text-muted);
  text-decoration: none;
  font-weight: 500;
  font-size: 14px;
  transition: color .2s ease;
}
.nav-links a:hover { color: var(--green); }
.nav-links a.active { color: var(--green); font-weight: 600; }

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--green);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .25s ease;
}
.nav-links a:hover::after,
.nav-links a.active::after { transform: scaleX(1); }

/* ============================================
   THEME TOGGLE BUTTON
   Bigger, colored, with a subtle ring — so the
   user can always find it.
   ============================================ */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 44px;
  border-radius: 12px;
  border: 1.5px solid var(--border);
  background: var(--white);
  color: var(--text);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
  transition: transform .2s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
}
.theme-toggle:hover {
  transform: translateY(-1px);
  border-color: var(--green);
  box-shadow: 0 4px 14px rgba(29, 158, 117, 0.25);
}
.theme-toggle:active { transform: translateY(0); }

.theme-toggle svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  fill: none;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  transition: transform .35s ease, opacity .25s ease;
}
.theme-toggle .icon-sun { display: none; }
.theme-toggle .icon-moon { display: block; }
:root.dark .theme-toggle .icon-sun { display: block; }
:root.dark .theme-toggle .icon-moon { display: none; }
:root.dark .theme-toggle {
  background: #1f1f1f;
  border-color: #333;
  color: #FFD86B;
}
:root.dark .theme-toggle:hover {
  border-color: #FFD86B;
  box-shadow: 0 4px 14px rgba(255, 216, 107, 0.25);
}

/* Spin the icon on toggle for a tiny bit of feedback */
.theme-toggle.is-spinning svg { transform: rotate(180deg); }

/* Nav layout fix - keep toggle + CTA aligned */
.nav-actions {
  display: flex;
  align-items: center;
  gap: 12px;
}

/* ============================================
   NAV CTA — "Voir les packs"
   Pill shape, gradient, shimmer, arrow.
   ============================================ */
.nav-cta {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: linear-gradient(135deg, var(--green) 0%, var(--green-dark) 100%);
  color: #fff !important;
  padding: 11px 20px;
  border-radius: 999px;
  font-size: 14px;
  font-weight: 700;
  text-decoration: none;
  letter-spacing: .01em;
  box-shadow: 0 4px 14px rgba(29, 158, 117, .35);
  transition: transform .2s ease, box-shadow .2s ease, filter .2s ease;
  overflow: hidden;
}
.nav-cta::before {
  content: '';
  position: absolute;
  inset: 0;
  background: linear-gradient(120deg, transparent 30%, rgba(255,255,255,.25) 50%, transparent 70%);
  transform: translateX(-100%);
  transition: transform .6s ease;
}
.nav-cta:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 22px rgba(29, 158, 117, .45);
  filter: brightness(1.05);
}
.nav-cta:hover::before { transform: translateX(100%); }
.nav-cta .arrow {
  display: inline-block;
  transition: transform .2s ease;
}
.nav-cta:hover .arrow { transform: translateX(3px); }

:root.dark .nav-cta {
  box-shadow: 0 4px 14px rgba(29, 158, 117, .45);
}