/* ── THEME — light & dark mode ────────────────────────────────
   Aucune valeur hex/rgba ici. Tout référence tokens.css via var().
   ─────────────────────────────────────────────────────────── */

/* ── View Transitions — circular reveal ── */
::view-transition-old(root),
::view-transition-new(root) {
  animation: none;
  mix-blend-mode: normal;
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — REMAPPAGE DES TOKENS SÉMANTIQUES
   Les primitives rôle-based de tokens.css sont mappées
   sur les tokens sémantiques utilisés dans tout le CSS.
   ══════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  /* Surfaces */
  --mj-cream: var(--mj-surface-base);
  --mj-paper: var(--mj-surface-default);
  --mj-paper-warm: var(--mj-surface-warm);
  --mj-lavender-tint: var(--mj-surface-overlay);

  /* Surfaces d'élévation */
  --mj-surface-deep: var(--mj-surface-bedrock);
  --mj-surface-sub: var(--mj-surface-sunken);
  --mj-surface-raised: var(--mj-surface-raised);
  --mj-surface-raised-hover: var(--mj-surface-raised-hover);
  --mj-surface-elevated: var(--mj-surface-float);
  --mj-surface-elevated-hover: var(--mj-surface-float-hover);

  /* Texte */
  --mj-ink: var(--mj-fg-primary);
  --mj-ink-55: var(--mj-fg-55);
  --mj-ink-25: var(--mj-fg-25);
  --mj-ink-18: var(--mj-fg-18);
  --mj-ink-12: var(--mj-fg-12);
  --mj-ink-10: var(--mj-fg-10);
  --mj-ink-08: var(--mj-fg-08);
  --mj-ink-06: var(--mj-fg-06);
  --mj-ink-04: var(--mj-fg-04);

  /* Neutres */
  --mj-graphite: var(--mj-fg-secondary);
  --mj-mute: var(--mj-fg-tertiary);
  --mj-divider: var(--mj-surface-line);

  /* Action / Gold */
  --mj-gold: var(--mj-action-default);
  --mj-gold-hover: var(--mj-action-hover);
  --mj-gold-tint: var(--mj-action-tint);

  /* Brand / Aubergine */
  --mj-aubergine: var(--mj-brand-default);
  --mj-aubergine-92: var(--mj-brand-92);
  --mj-aubergine-50: var(--mj-brand-50);
  --mj-aubergine-25: var(--mj-brand-32);
  --mj-aubergine-20: var(--mj-brand-26);
  --mj-aubergine-18: var(--mj-brand-22);
  --mj-aubergine-12: var(--mj-brand-16);
  --mj-aubergine-10: var(--mj-brand-13);
  --mj-aubergine-08: var(--mj-brand-10);
  --mj-aubergine-06: var(--mj-brand-08);
  --mj-aubergine-04: var(--mj-brand-05);
  --mj-aubergine-03: var(--mj-brand-04);

  /* Sémantique — composants */
  --mj-heading-dark: var(--mj-brand-emphasis);
  --mj-toggle-bg-dark: var(--mj-brand-emphasis);
  --mj-toggle-bg-dark-hover: var(--mj-brand-subtle);
  --mj-btn-primary-dark: var(--mj-cta-default);
  --mj-btn-primary-dark-hover: var(--mj-cta-hover);
}

/* ══════════════════════════════════════════════════════════════
   DARK MODE — OVERRIDES COMPOSANTS
   Aucun hex ici — exclusivement var().
   ══════════════════════════════════════════════════════════════ */

/* Typographie — titres (10:1) */
[data-theme="dark"] .display,
[data-theme="dark"] .hero-title-stack .hero-line,
[data-theme="dark"] .detail-hero-title,
[data-theme="dark"] .service-card h3,
[data-theme="dark"] .subservice-card h3,
[data-theme="dark"] .testimonial-title,
[data-theme="dark"] .faq-item h3,
[data-theme="dark"] .contact-info h2,
[data-theme="dark"] .modal h3,
[data-theme="dark"] .mobile-sheet a,
[data-theme="dark"] .pricing-card h3 {
  color: var(--mj-heading-dark);
}

[data-theme="dark"] .eyebrow--sage {
  color: var(--mj-mute);
}

/* ── Hiérarchie des surfaces ── */

[data-theme="dark"] .partner,
[data-theme="dark"] .pricing-card,
[data-theme="dark"] .subservice-card {
  background: var(--mj-surface-sub);
  border-color: var(--mj-ink-06);
}

[data-theme="dark"] .service-card {
  background: var(--mj-surface-raised);
  border-color: var(--mj-ink-10);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.09),
    inset 0 0 0 1px rgba(255, 255, 255, 0.04),
    -20px 0 40px -12px rgba(0, 0, 0, 0.45),
    20px 0 40px -12px rgba(0, 0, 0, 0.45);
}

[data-theme="dark"] .service-card:hover {
  background: var(--mj-surface-raised-hover);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.12),
    inset 0 0 0 1px rgba(255, 255, 255, 0.06),
    -24px 0 48px -12px rgba(0, 0, 0, 0.55),
    24px 0 48px -12px rgba(0, 0, 0, 0.55),
    0 8px 24px var(--mj-aubergine-12),
    0 20px 48px var(--mj-aubergine-08);
}
[data-theme="dark"] .detail-hero {
  background: var(--mj-surface-raised);
}
[data-theme="dark"] .modal {
}

[data-theme="dark"] .nav-pill {
  background: var(--mj-surface-elevated);
  box-shadow:
    0 1px 4px var(--mj-ink-08),
    0 4px 16px rgba(0, 0, 0, 0.4);
}

/* ── Toggle ── */
[data-theme="dark"] .theme-toggle {
  background: none;
  color: var(--mj-btn-primary-dark);
}
[data-theme="dark"] .theme-toggle:hover {
  background: var(--mj-gold-22);
}

/* ── Nav active ── */
[data-theme="dark"] .nav-pill a.active,
[data-theme="dark"] .nav-pill a.active:hover {
  color: var(--mj-cream);
}

/* ── Boutons ── */
[data-theme="dark"] .btn-primary {
  background: var(--mj-btn-primary-dark);
  color: var(--mj-cream);
}
[data-theme="dark"] .btn-primary:hover {
  background: var(--mj-btn-primary-dark-hover);
  color: var(--mj-cream);
}

[data-theme="dark"] .btn-ghost {
  border-color: var(--mj-btn-primary-dark);
  color: var(--mj-btn-primary-dark);
}
[data-theme="dark"] .btn-ghost:hover {
  background: var(--mj-cta-subtle);
}

/* ── Service cards ── */
[data-theme="dark"] .service-card-icon {
  background: var(--mj-aubergine-50);
}
[data-theme="dark"] .service-card-foot {
  color: var(--mj-btn-primary-dark);
}
[data-theme="dark"] .icon-btn {
  border-color: var(--mj-btn-primary-dark);
  color: var(--mj-btn-primary-dark);
}
[data-theme="dark"] .icon-btn:hover,
[data-theme="dark"] .service-card:hover .icon-btn {
  background: var(--mj-btn-primary-dark);
  color: var(--mj-cream);
}

/* ── Carousel testimonials ── */
[data-theme="dark"] .testimonial-arrow {
  background: var(--mj-surface-elevated);
  border-color: var(--mj-ink-18);
  color: var(--mj-ink);
}
[data-theme="dark"] .testimonial-arrow:hover {
  background: var(--mj-ink);
  color: var(--mj-cream);
  border-color: transparent;
}
[data-theme="dark"] .testimonial-dots button {
  background: var(--mj-ink-25);
}
[data-theme="dark"] .testimonial-dots button.active {
  background: var(--mj-ink);
}

/* ── Chips tarifs ── */
[data-theme="dark"] .chip {
  border-color: var(--mj-ink-18);
  color: var(--mj-ink);
}
[data-theme="dark"] .chip:hover {
  background: var(--mj-ink-08);
}
[data-theme="dark"] .chip.active {
  background: var(--mj-aubergine);
  border-color: var(--mj-aubergine);
  color: var(--mj-cream);
}

/* ── Bordures ── */
[data-theme="dark"] .partner {
  border-color: var(--mj-ink-12);
}
[data-theme="dark"] .faq-item {
  border-bottom-color: var(--mj-ink-10);
}

/* ── Footer ── */
[data-theme="dark"] .footer {
  background: var(--mj-surface-deep);
}

/* ── Images ── */
[data-theme="dark"] img {
  filter: brightness(0.85) saturate(0.9);
  transition: filter 300ms var(--easing);
}
[data-theme="dark"] .partner img {
  filter: brightness(0.9) contrast(0.95);
  mix-blend-mode: luminosity;
}
[data-theme="dark"] .engagement-photo {
  filter: brightness(0.7);
}
[data-theme="dark"] .plate {
  filter: brightness(0.75);
}
[data-theme="dark"] .detail-hero-photo {
  filter: brightness(0.8);
}