/* Nocturne — shared dark-theme tokens and generic component classes.
   Page-scoped opt-in: each public page that wants this theme links it via
   its own extra_head block, same pattern as the homepage. Never linked
   from base.html, so it never touches the dashboard/admin/auth-app pages,
   which keep the existing light sonevisa-theme.css overlay.
   Extracted from homepage-redesign.css so Phase-1 pages (Visa Discovery,
   Pricing, Sample Report, country landing pages) can reuse the same
   tokens/components without duplicating them. Page-specific structural
   classes (hero grid, floating collage, quiz card, testimonials, lead
   magnet, CTA band) stay in homepage-redesign.css, which links this file. */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --noc-bg: #161826;
  --noc-surface: #232532;
  --noc-text: #e9e9ed;
  --noc-text-muted: color-mix(in srgb, #e9e9ed 62%, transparent);
  --noc-accent: #9184d9;
  --noc-accent-dark: #796cbf;
  --noc-accent-2: #a7a1db;
  --noc-divider: color-mix(in srgb, #e9e9ed 16%, transparent);

  --noc-neutral-700: #595d6c;
  --noc-neutral-800: #3f424d;
  --noc-neutral-900: #292b31;

  --noc-accent-100: #f5f4ff;
  --noc-accent-300: #d2cefd;
  --noc-accent-800: #423a6a;
  --noc-accent-900: #2b2741;

  --noc-accent-2-800: #423e5d;
  --noc-accent-2-100: #f5f4ff;

  /* Deck-scale saturated ground for full-bleed CTA bands only. */
  --noc-section: #262a60;
  --noc-section-glow: #353b80;

  --noc-font: "Inter", system-ui, sans-serif;
  --noc-font-weight: 500;

  --noc-space-2: 5.6px;
  --noc-space-3: 8.4px;
  --noc-space-4: 11.2px;

  --noc-radius-sm: 4px;
  --noc-radius-md: 8px;
  --noc-radius-lg: 14px;

  --noc-shadow-sm: 0 0 0 1px var(--noc-neutral-800);
  --noc-shadow-md: 0 0 0 1px var(--noc-neutral-700), 0 6px 18px rgba(0,0,0,0.55);
  --noc-shadow-lg: 0 0 0 1px #9397ab, 0 16px 40px rgba(0,0,0,0.65);
}

/* ---- Page ground ----
   body.sv-hero-page is the homepage's own opt-in class (set before this
   file existed); body.noc-dark-page is the general-purpose one any other
   page opts into via {% block body_class %} to get the same dark <main>
   background + Inter type without also pulling in homepage-only markup. */
body.sv-hero-page main,
body.noc-dark-page main,
.noc-page {
  background: var(--noc-bg);
  font-family: var(--noc-font);
  color: var(--noc-text);
}
body.noc-dark-page { background: var(--noc-bg) !important; }
.noc-page h1, .noc-page h2, .noc-page h3, .noc-page h4,
body.noc-dark-page main h1, body.noc-dark-page main h2, body.noc-dark-page main h3, body.noc-dark-page main h4 {
  font-family: var(--noc-font) !important;
  font-weight: var(--noc-font-weight) !important;
  letter-spacing: -0.015em;
}
.noc-page a { color: var(--noc-accent); text-decoration: none; }
.noc-page a:hover { color: var(--noc-accent-300); }
.noc-page *, .noc-page *::before, .noc-page *::after { box-sizing: border-box; }
.noc-muted { color: color-mix(in srgb, var(--noc-text) 72%, transparent); }

.noc-wrap { max-width: 1180px; margin: 0 auto; padding-inline: clamp(20px, 5vw, 72px); }

/* ---- Buttons ---- */
.noc-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  cursor: pointer; text-decoration: none;
  font-family: var(--noc-font); font-weight: var(--noc-font-weight);
  font-size: 15px; line-height: 1.2; color: var(--noc-text);
  background: transparent; border: 1px solid transparent;
  padding: 12px 22px; border-radius: var(--noc-radius-md);
  transition: background .15s ease;
}
.noc-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.noc-btn-primary { color: var(--noc-accent); border-color: var(--noc-accent); }
.noc-btn-primary:hover { background: color-mix(in srgb, var(--noc-accent) 12%, transparent); color: var(--noc-accent); }
.noc-btn-secondary { border-color: var(--noc-divider); }
.noc-btn-secondary:hover { background: color-mix(in srgb, var(--noc-text) 7%, transparent); }
.noc-btn-ghost { color: var(--noc-accent); padding-inline: var(--noc-space-2); border: none; background: none; }
.noc-btn-ghost:hover { background: color-mix(in srgb, var(--noc-accent) 10%, transparent); color: var(--noc-accent); }
.noc-btn-block { width: 100%; justify-content: center; }
.noc-btn-sm { padding: 10px; font-size: 14px; }

/* ---- Tags ---- */
.noc-tag {
  display: inline-flex; align-items: center; font-size: 11px; letter-spacing: 0.02em;
  padding: 3px 10px; border-radius: 6px;
}
.noc-tag-outline { border: 1px solid var(--noc-accent); color: var(--noc-accent); }
.noc-tag-accent { background: var(--noc-accent-800); color: var(--noc-accent-100); }
.noc-tag-accent-2 { background: var(--noc-accent-2-800); color: var(--noc-accent-2-100); }

/* ---- Cards ---- */
.noc-card {
  background: var(--noc-surface); border-radius: var(--noc-radius-md);
  padding: 22px; box-shadow: var(--noc-shadow-sm);
}
.noc-card-title { font-family: var(--noc-font); font-weight: var(--noc-font-weight); font-size: 17px; margin: 0 0 6px; }
.noc-card-body { margin: 0; font-size: 13px; opacity: 0.8; }
.noc-icon-tile {
  width: 38px; height: 38px; border-radius: var(--noc-radius-md);
  background: var(--noc-accent-800); display: flex; align-items: center; justify-content: center;
  margin-bottom: 14px;
}

/* ---- Fields ---- */
.noc-field label {
  display: block; font-size: 12px; margin-bottom: 5px;
  color: color-mix(in srgb, var(--noc-text) 70%, transparent);
}
.noc-input {
  width: 100%; min-height: 38px; padding: 8px 10px; font: inherit; font-size: 14px;
  color: var(--noc-text); background: var(--noc-bg);
  border: 1px solid var(--noc-divider); border-radius: var(--noc-radius-md);
}
.noc-input:hover { border-color: color-mix(in srgb, var(--noc-text) 45%, transparent); }
.noc-input:focus-visible { outline: 2px solid var(--noc-accent); outline-offset: 0; border-color: var(--noc-accent); }

/* ---- Generic sections/grids (reused across Pricing, landing pages, etc.) ---- */
.noc-section { padding: 96px 0; }
.noc-section-head { text-align: center; max-width: 620px; margin: 0 auto 40px; }
.noc-section-head h2 { font-size: clamp(26px, 3vw, 34px); margin: 0 0 10px; }
.noc-section-head p { font-size: 15px; color: color-mix(in srgb, var(--noc-text) 72%, transparent); margin: 0; }
.noc-grid-3 { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 18px; }
.noc-grid-4 { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 20px; }
.noc-grid-8 { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 18px; }

/* ---- Final CTA band (reused wherever a page ends with a full-bleed CTA) ---- */
.noc-cta-band {
  background: radial-gradient(900px 420px at 85% -40%, color-mix(in srgb, var(--noc-section-glow) 70%, transparent), transparent 64%), var(--noc-section);
  padding: 88px clamp(20px, 5vw, 72px); text-align: center;
}
.noc-cta-band h2 { font-size: clamp(26px, 3.2vw, 36px); margin: 0 0 12px; color: var(--noc-text); }
.noc-cta-band p { font-size: 15.5px; color: color-mix(in srgb, var(--noc-text) 82%, transparent); margin: 0 0 28px; }
.noc-cta-band .noc-btn-secondary { background: var(--noc-text); color: var(--noc-section); border-color: var(--noc-text); padding: 13px 26px; }
.noc-cta-band .noc-btn-secondary:hover { background: color-mix(in srgb, var(--noc-text) 90%, transparent); }

.rd-field-error { margin-top: 6px; font-size: 0.82rem; color: #ff8a7a; }

/* ---- Auth / narrow-form pages (login, register, password flows, etc.) ---- */
.noc-split-panel { display: grid; grid-template-columns: minmax(0, 0.85fr) minmax(0, 1.15fr); gap: 48px; align-items: start; }
.noc-form-grid-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 20px; }

@media (max-width: 860px) {
  .noc-hide-mobile { display: none; }
  .noc-split-panel { grid-template-columns: 1fr; }
  .noc-form-grid-2 { grid-template-columns: 1fr; }
}

/* ---- Long-form legal/article copy (Terms, Privacy, blog posts, etc.) ---- */
.noc-prose { color: color-mix(in srgb, var(--noc-text) 82%, transparent); font-size: 15px; line-height: 1.75; }
.noc-prose h2 { color: var(--noc-text); font-family: var(--noc-font) !important; font-weight: 700 !important; font-size: 21px; margin: 32px 0 12px; }
.noc-prose h2:first-of-type { margin-top: 8px; }
.noc-prose p { margin: 0 0 14px; }
.noc-prose a { color: var(--noc-accent); }
.noc-prose strong { color: var(--noc-text); }
.noc-prose hr { border: none; border-top: 1px solid var(--noc-divider); margin: 28px 0; }
.noc-prose ul, .noc-prose ol { margin: 0 0 14px; padding-left: 22px; }
.noc-prose li { margin-bottom: 6px; }
.noc-prose img { max-width: 100%; height: auto; border-radius: var(--noc-radius-md); margin: 16px 0; }
.noc-prose blockquote { border-left: 3px solid var(--noc-accent); padding-left: 16px; margin: 16px 0; color: color-mix(in srgb, var(--noc-text) 68%, transparent); font-style: italic; }
.noc-prose code { background: rgba(255,255,255,0.08); padding: 2px 6px; border-radius: 4px; font-size: 0.9em; }
.noc-prose h3 { color: var(--noc-text); font-family: var(--noc-font) !important; font-weight: 700 !important; font-size: 18px; margin: 24px 0 10px; }

/* ---- Data tables (tools, comparators) ---- */
.noc-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.noc-table th { text-align: left; padding: 10px 14px; font-size: 11px; text-transform: uppercase; letter-spacing: 0.04em; color: color-mix(in srgb, var(--noc-text) 55%, transparent); border-bottom: 1px solid var(--noc-divider); }
.noc-table td { padding: 12px 14px; border-bottom: 1px solid var(--noc-divider); color: var(--noc-text-muted); vertical-align: top; }
.noc-table tr:last-child td { border-bottom: none; }
.noc-status-badge { display: inline-flex; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.noc-status-badge--ok { background: rgba(20,184,122,0.16); color: #6ee7b7; }
.noc-status-badge--info { background: rgba(56,189,248,0.14); color: #7dd3fc; }
.noc-status-badge--warn { background: rgba(239,68,68,0.14); color: #ff8a7a; }

/* ---- Legacy-Tailwind safety net ----
   The calculator pages (visacalculator/*) render heavy JS that injects
   Tailwind utility classes at runtime (badges, table rows) which can't be
   swapped for .noc-* classes without rewriting the JS. Scoped to
   body.noc-dark-page only, so it never reaches dashboard/admin or any
   light-themed page — a blanket retint for raw Tailwind color utilities
   that slip through on any Nocturne page, calculators included. */
body.noc-dark-page .bg-white { background-color: var(--noc-surface) !important; }
body.noc-dark-page .text-gray-800, body.noc-dark-page .text-gray-900, body.noc-dark-page .text-gray-700 { color: var(--noc-text) !important; }
body.noc-dark-page .text-gray-600, body.noc-dark-page .text-gray-500 { color: var(--noc-text-muted) !important; }

/* ---- Nav dropdown / mobile menu on Nocturne pages ----
   sonevisa-theme.css (loaded before this file) force-darkens the "Outils
   d'evaluation" dropdown and mobile menu links to #374151 assuming their
   panel keeps the homepage's plain white background — true on the
   homepage itself (sv-hero-page only), but on any calculator/tool page
   the .bg-white rule two lines up ALSO fires (those pages carry
   noc-dark-page too), darkening the panel to --noc-surface underneath
   that now-unreadable dark-on-dark text. Same selector shape so this
   wins on source order at equal specificity, restoring light text and
   darkening the mobile panel to match. */
body.noc-dark-page nav div[x-show] a:not(.sv-nav-cta) { color: var(--noc-text) !important; }
body.noc-dark-page nav div[x-show] a:not(.sv-nav-cta):hover { color: #fff !important; background-color: rgba(255,255,255,0.08) !important; }
body.noc-dark-page nav div[x-show] svg { color: var(--noc-text-muted) !important; }
body.noc-dark-page nav div[x-show]#mobile-menu { background: var(--noc-surface) !important; }
body.noc-dark-page .bg-gray-50 { background-color: rgba(255,255,255,0.04) !important; }
body.noc-dark-page .bg-gray-100 { background-color: rgba(255,255,255,0.07) !important; }
body.noc-dark-page .bg-gray-200 { background-color: rgba(255,255,255,0.1) !important; }
body.noc-dark-page .hover\:bg-gray-100:hover, body.noc-dark-page .hover\:bg-gray-300:hover { background-color: rgba(255,255,255,0.1) !important; }
body.noc-dark-page .border-gray-100, body.noc-dark-page .border-gray-200, body.noc-dark-page .border-gray-300 { border-color: var(--noc-divider) !important; }
body.noc-dark-page .bg-blue-50, body.noc-dark-page .bg-gray-50\/50 { background-color: rgba(145,132,217,0.1) !important; }
body.noc-dark-page .border-blue-100, body.noc-dark-page .border-blue-200 { border-color: rgba(145,132,217,0.25) !important; }
body.noc-dark-page .text-blue-800, body.noc-dark-page .text-blue-700, body.noc-dark-page .text-blue-600,
body.noc-dark-page .text-blue-900\/90 { color: var(--noc-accent) !important; }
body.noc-dark-page .bg-blue-600 { background-color: var(--noc-accent) !important; }
body.noc-dark-page .hover\:bg-blue-700:hover { background-color: var(--noc-accent-dark) !important; }
body.noc-dark-page .bg-green-100 { background-color: rgba(20,184,122,0.16) !important; }
body.noc-dark-page .text-green-800 { color: #6ee7b7 !important; }
body.noc-dark-page .bg-red-100 { background-color: rgba(239,68,68,0.14) !important; }
body.noc-dark-page .text-red-800, body.noc-dark-page .text-red-600, body.noc-dark-page .text-red-500 { color: #ff8a7a !important; }
body.noc-dark-page .bg-yellow-50, body.noc-dark-page .bg-yellow-100 { background-color: rgba(251,191,36,0.14) !important; }
body.noc-dark-page .text-yellow-800, body.noc-dark-page .text-yellow-700 { color: #fbbf24 !important; }
body.noc-dark-page main select, body.noc-dark-page main input[type="text"],
body.noc-dark-page main input[type="number"], body.noc-dark-page main input[type="email"],
body.noc-dark-page main .form-select, body.noc-dark-page main .form-input {
  background-color: var(--noc-bg) !important;
  color: var(--noc-text) !important;
  border-color: var(--noc-divider) !important;
}
body.noc-dark-page .bg-green-600 { background-color: #1a9c63 !important; }
body.noc-dark-page .hover\:bg-green-700:hover { background-color: #157a4e !important; }
body.noc-dark-page .hover\:bg-gray-100:hover { background-color: rgba(255,255,255,0.08) !important; }
body.noc-dark-page .bg-gray-300, body.noc-dark-page .hover\:bg-gray-300:hover { background-color: rgba(255,255,255,0.1) !important; }
.noc-prose .noc-prose-meta { font-size: 13px; color: color-mix(in srgb, var(--noc-text) 55%, transparent); }