/* ═══════════════════════════════════════════════════════════
   DANC·R — Dark mode (html.theme-dark)
   Charger après styles.css et styles-v3.css
   ═══════════════════════════════════════════════════════════ */

html.theme-dark {
  color-scheme: dark;

  --page-bg: #09090b;
  --surface: #111113;
  --surface-raised: #18181b;
  --border: #27272a;
  --border-strong: #3f3f46;

  --text-primary: #fafafa;
  --text-secondary: #d4d4d8;
  --text-muted: #a1a1aa;
  --text-faint: #71717a;

  --header-bg: rgba(9, 9, 11, 0.72);
  --header-bg-scrolled: rgba(9, 9, 11, 0.92);
  --mask-fill: #09090b;

  --orange: #f5a84a;
  --violet: #c486f5;
  --blue: #6ed4ff;
}

html.theme-dark body {
  background: var(--page-bg);
  color: var(--text-primary);
}

html.theme-dark ::selection {
  background: var(--text-primary);
  color: var(--page-bg);
}

/* ── Typographie ── */
html.theme-dark .section-eyebrow {
  color: var(--text-muted);
}

html.theme-dark .section-title,
html.theme-dark .hero-title,
html.theme-dark .stack-card-title,
html.theme-dark .hh__title,
html.theme-dark .hh__pole-title {
  color: var(--text-primary);
}

html.theme-dark .section-title .text-muted {
  color: var(--text-muted);
}

html.theme-dark .section-lead,
html.theme-dark .hero-subtitle,
html.theme-dark .stack-card-list li,
html.theme-dark .hh__sub,
html.theme-dark .hh__pole-sub {
  color: var(--text-secondary);
}

html.theme-dark .hh {
  --hh-bg: var(--page-bg);
  --hh-ink: var(--text-primary);
  --hh-muted: var(--text-secondary);
  background: var(--hh-bg);
  color: var(--hh-ink);
}

html.theme-dark .hh__center-label {
  background: var(--surface-raised);
  color: var(--text-primary);
  border: 1px solid var(--border);
}

html.theme-dark .hh__shots img {
  border-color: var(--border);
  box-shadow:
    0 10px 24px rgba(0, 0, 0, 0.45),
    0 4px 12px rgba(0, 0, 0, 0.25);
}

html.theme-dark .hh__center img {
  filter: drop-shadow(0 30px 50px rgba(240, 138, 60, 0.22));
}

html.theme-dark .stack-card-cta {
  color: var(--text-primary);
}

html.theme-dark .stack-card[data-audience="ecole"] .stack-card-cta {
  color: var(--blue);
}

html.theme-dark .stack-card[data-audience="prof"] .stack-card-cta {
  color: var(--violet);
}

html.theme-dark .stack-card[data-audience="eleve"] .stack-card-cta {
  color: var(--orange);
}

html.theme-dark .main-nav a {
  color: var(--text-secondary);
}

html.theme-dark .main-nav a:hover {
  color: var(--text-primary);
}

html.theme-dark .nav-dropdown__trigger {
  color: var(--text-secondary);
}

html.theme-dark .nav-dropdown__trigger:hover,
html.theme-dark .site-header.is-mega-open .nav-dropdown__trigger {
  color: var(--text-primary);
}

html.theme-dark .nav-mega {
  background: var(--header-bg);
  border-color: var(--border);
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.4);
}

html.theme-dark .nav-mega__head {
  color: var(--text-muted);
  border-bottom-color: var(--border);
}

html.theme-dark .nav-mega__link {
  color: var(--text-primary);
}

html.theme-dark .nav-mega__link--disabled,
html.theme-dark span.nav-mega__link--disabled {
  color: var(--text-muted);
}

html.theme-dark .nav-mega__link--disabled:hover,
html.theme-dark span.nav-mega__link--disabled:hover {
  color: var(--text-muted);
}

html.theme-dark .site-header.is-menu-open .main-nav {
  border-top-color: var(--border);
}

/* ── Header ── */
html.theme-dark .header-bar {
  background: var(--header-bg);
  border-color: var(--border);
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.35);
}

html.theme-dark .site-header.scrolled .header-bar,
html.theme-dark .site-header.is-mega-open .header-bar {
  background: var(--header-bg-scrolled);
  border-color: var(--border);
}

html.theme-dark.phone-mask-active .header-bar {
  background: rgba(9, 9, 11, 0.96);
}

html.theme-dark .menu-toggle span {
  background: var(--text-primary);
}

/* ── Boutons ── */
html.theme-dark .btn-primary {
  background: var(--text-primary);
  color: var(--page-bg);
}

html.theme-dark .btn-primary:hover {
  background: #e4e4e7;
}

html.theme-dark .btn-ghost {
  color: var(--text-primary);
  border-color: var(--border-strong);
}

html.theme-dark .btn-ghost:hover {
  border-color: var(--text-muted);
  background: rgba(255, 255, 255, 0.04);
}

html.theme-dark .btn-link {
  color: var(--text-primary);
}

html.theme-dark .pill {
  background: rgba(255, 255, 255, 0.06);
  border-color: var(--border);
  color: var(--text-primary);
}

html.theme-dark .theme-toggle {
  color: var(--text-secondary);
  border-color: var(--border);
  background: rgba(255, 255, 255, 0.04);
}

html.theme-dark .theme-toggle:hover {
  color: var(--text-primary);
  border-color: var(--border-strong);
  background: rgba(255, 255, 255, 0.08);
}

/* ── Hero ── */
html.theme-dark .hero {
  background: #000000;
}

html.theme-dark .hero-bg {
  background-color: #000000;
}

html.theme-dark .hero-video {
  opacity: 0;
}

html.theme-dark .hero-video.is-ready {
  opacity: 1;
  transition: opacity 0.45s ease;
}

@media (prefers-reduced-motion: reduce) {
  html.theme-dark .hero-video {
    opacity: 1;
  }
}

html.theme-dark .hero-video-scrim {
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.08) 0%,
    rgba(0, 0, 0, 0.22) 42%,
    rgba(0, 0, 0, 0.52) 68%,
    rgba(0, 0, 0, 0.78) 82%,
    #000000 100%
  );
}

html.theme-dark .scroll-indicator {
  color: var(--text-muted);
}

html.theme-dark .scroll-line {
  background: linear-gradient(to bottom, transparent, var(--text-muted), transparent);
}

/* ── Masque smartphone ── */
html.theme-dark .phone-mask-side,
html.theme-dark .phone-mask-frame {
  background: transparent;
  border-color: var(--mask-fill);
}

html.theme-dark .phone-mask-frame {
  border-color: var(--mask-fill);
}

/* ── Sections ── */
html.theme-dark .v3,
html.theme-dark .benefits {
  background: var(--page-bg);
}

html.theme-dark .stack-card {
  background: var(--surface-raised);
  border-color: var(--border);
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.2),
    0 24px 48px -20px rgba(0, 0, 0, 0.45);
}

html.theme-dark .stack-card-index {
  color: var(--text-primary);
}

html.theme-dark .stack-card-media {
  background: rgba(0, 0, 0, 0.25);
  border-color: var(--border);
}

html.theme-dark .media-placeholder-name,
html.theme-dark .media-placeholder-hint {
  color: var(--text-muted);
}

/* ── Waitlist (bandeau mis en valeur) ── */
html.theme-dark .waitlist {
  background: linear-gradient(165deg, #18181b 0%, #111113 50%, #09090b 100%);
  border-top: 1px solid var(--border);
}

html.theme-dark .waitlist .section-eyebrow {
  color: var(--text-muted);
}

html.theme-dark .waitlist .section-title {
  color: var(--text-primary);
}

html.theme-dark .waitlist .section-lead {
  color: var(--text-secondary);
}

html.theme-dark .form-row {
  background: rgba(0, 0, 0, 0.35);
  border-color: var(--border-strong);
}

html.theme-dark .form-row:focus-within {
  border-color: var(--blue);
  background: rgba(0, 0, 0, 0.5);
}

html.theme-dark .waitlist .btn-primary {
  background: var(--text-primary);
  color: var(--page-bg);
}

html.theme-dark .waitlist .btn-primary:hover {
  background: #e4e4e7;
}

/* ── CTA triple (#rejoins-nous) ── */
html.theme-dark .triple-cta {
  background: linear-gradient(165deg, #09090b 0%, #0a0a0a 45%, #111113 100%);
  border-top: 1px solid var(--border);
}

html.theme-dark .triple-cta__card {
  background: rgba(0, 0, 0, 0.45);
}

html.theme-dark .triple-cta__strip {
  background: rgba(0, 0, 0, 0.4);
  border-color: var(--border-strong);
}

/* ── Footer ── */
html.theme-dark .site-footer {
  background: #000;
}

/* ── Divers ── */
html.theme-dark .problem-card,
html.theme-dark .pillar {
  background: var(--surface-raised);
  border-color: var(--border);
}

html.theme-dark .logos-row {
  border-color: var(--border);
}

html.theme-dark .partner-logo {
  color: var(--text-muted);
}

html.theme-dark .partner-logo:hover {
  color: var(--text-primary);
}

html.theme-dark .legal-page__title,
html.theme-dark .legal-page__section h2,
html.theme-dark .legal-page__section h3 {
  color: var(--text-primary);
}

html.theme-dark .legal-page__section p,
html.theme-dark .legal-page__section ul,
html.theme-dark .legal-page__section ol {
  color: var(--text-secondary);
}

html.theme-dark .legal-page__section a {
  color: var(--text-primary);
}

html.theme-dark .legal-page__section a:hover {
  color: var(--orange);
}

html.theme-dark .legal-page__updated {
  color: var(--text-muted);
}

html.theme-dark .legal-page__section code {
  background: var(--surface-raised);
  color: var(--text-secondary);
}