/* Nuvrelay — mode sombre (html[data-theme="dark"]) et bouton clair / sombre.
   Les couleurs passent par les variables de base.css ; ici, les surfaces claires écrites en dur sont reprises une par une. */
:root[data-theme="dark"] {
  --ground: #0f0c17;
  --ground-2: #1a1626;
  --card: #171322;
  --card-2: #1f1a2d;
  --forest: #261f3a;
  --forest-2: #322a4b;
  --lime: #c8b5ff;
  --lime-2: #b39bff;
  --lime-soft: #251d3c;
  --ink: #f2eff9;
  --ink-2: #cfc9de;
  --muted: #a39cb8;
  --line: #2a2438;
  --line-2: #3a3350;
  --lilac: #2f2552;
  --sky: #1c2744;
  --mint: #16302a;
  --peach: #382519;
  --ok: #4ade80;
  --warn: #fbbf24;
  --warn-bg: #3a2c10;
  --ko: #f87171;
  --ko-bg: #3b1a1d;
  --info: #93b4ff;
  --violet: #8b5cff;
  --violet-2: #7c4dff;
  --wash: radial-gradient(60% 80% at 0% 0%, #241a3f 0%, transparent 60%), radial-gradient(55% 70% at 100% 100%, #2e1d14 0%, transparent 60%);
  --lift: 0 1px 2px rgba(0, 0, 0, .4), 0 14px 34px -18px rgba(0, 0, 0, .8);
  color-scheme: dark;
}

/* Passage doux d'un thème à l'autre (seulement au clic) */
:root.theme-anim *, :root.theme-anim *::before, :root.theme-anim *::after { transition: background-color .3s, border-color .3s, color .3s, fill .3s !important; }

/* Bouton clair / sombre */
.theme-btn { overflow: hidden; }
.theme-btn .i { grid-area: 1 / 1; transition: transform .45s cubic-bezier(.3, 1.4, .5, 1), opacity .25s; }
.theme-btn .i:last-child { transform: rotate(-90deg) scale(.4); opacity: 0; }
:root[data-theme="dark"] .theme-btn .i:first-child { transform: rotate(90deg) scale(.4); opacity: 0; }
:root[data-theme="dark"] .theme-btn .i:last-child { transform: none; opacity: 1; }
.site-actions .theme-btn { width: 40px; height: 40px; border-radius: 50%; }

/* ---- Actions principales : violet sur fond sombre */
:root[data-theme="dark"] :focus-visible { outline-color: var(--lime); }
:root[data-theme="dark"] .btn-forest,
:root[data-theme="dark"] .seg button[aria-pressed="true"],
:root[data-theme="dark"] .site-nav a[aria-current="page"],
:root[data-theme="dark"] .switch input:checked + span { background: var(--violet); color: #fff; }
:root[data-theme="dark"] .btn-forest:hover { background: var(--violet-2); }
:root[data-theme="dark"] .btn-line:hover, :root[data-theme="dark"] .icon-btn:hover { border-color: var(--muted); }
:root[data-theme="dark"] .btn-danger:hover { background: #4a1f23; }
:root[data-theme="dark"] .input:focus, :root[data-theme="dark"] .select:focus, :root[data-theme="dark"] .textarea:focus { border-color: var(--lime-2); box-shadow: 0 0 0 4px rgba(200, 181, 255, .14); }
:root[data-theme="dark"] .check input, :root[data-theme="dark"] .plan-pick input { accent-color: var(--violet); }
:root[data-theme="dark"] .toast { background: #2a2342; border: 1px solid var(--line-2); }
:root[data-theme="dark"] .modal::backdrop { background: rgba(0, 0, 0, .6); }

/* ---- Textes « encre foncée » posés sur des fonds devenus sombres */
:root[data-theme="dark"] .av, :root[data-theme="dark"] .kpi .k-head, :root[data-theme="dark"] .feed .dot,
:root[data-theme="dark"] .howto li::before, :root[data-theme="dark"] .msg-list button[aria-pressed="true"],
:root[data-theme="dark"] .vars button, :root[data-theme="dark"] .order .av, :root[data-theme="dark"] .msg-edit .var span,
:root[data-theme="dark"] .flow-alt a, :root[data-theme="dark"] .legal a, :root[data-theme="dark"] .vf-help a { color: var(--ink); }
:root[data-theme="dark"] .price-list .i { color: var(--lime); }
:root[data-theme="dark"] .vars button:hover { border-color: var(--lime-2); }

/* ---- Pastilles et encadrés teintés */
:root[data-theme="dark"] .badge.ok { background: rgba(74, 222, 128, .14); }
:root[data-theme="dark"] .badge.info { background: rgba(147, 180, 255, .14); }
:root[data-theme="dark"] .note.info { background: var(--lime-soft); color: var(--ink-2); }
:root[data-theme="dark"] .pv-ok { background: rgba(74, 222, 128, .1); border-color: rgba(74, 222, 128, .28); }
:root[data-theme="dark"] .pv-ok small { color: #86efac; }
:root[data-theme="dark"] .lk-refused, :root[data-theme="dark"] .lk.ko .lk-ic { background: var(--ko-bg); color: #fca5a5; }
:root[data-theme="dark"] .lk.ok .lk-ic { background: rgba(74, 222, 128, .14); color: #86efac; }
:root[data-theme="dark"] .pm-usdt { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
:root[data-theme="dark"] .pm-revolut { background: rgba(147, 180, 255, .14); color: #a5c0ff; }
:root[data-theme="dark"] .pm-bank { background: rgba(251, 191, 36, .14); color: #fcd34d; }
:root[data-theme="dark"] .fc-ico { background: rgba(52, 211, 153, .14); color: #6ee7b7; }
:root[data-theme="dark"] .fc-ico.p { background: rgba(251, 191, 36, .14); color: #fcd34d; }
:root[data-theme="dark"] .f-was .f-min { background: rgba(251, 146, 60, .16); color: #fdba74; }
:root[data-theme="dark"] .f-now .f-min { background: rgba(74, 222, 128, .14); color: #86efac; }
:root[data-theme="dark"] .kpi .k-ico, :root[data-theme="dark"] .kpi .delta { background: rgba(255, 255, 255, .08); }

/* ---- Surfaces claires écrites en dur */
:root[data-theme="dark"] .site-bar { background: rgba(23, 19, 34, .9); border-color: var(--line); }
:root[data-theme="dark"] .band li, :root[data-theme="dark"] .steps-v3 li, :root[data-theme="dark"] .float-chip { background: var(--card); border-color: var(--line); color: var(--ink); }
:root[data-theme="dark"] .renew.best, :root[data-theme="dark"] .co-plan:has(input:checked), :root[data-theme="dark"] .pm:has(input:checked) { background: var(--lime-soft); }
:root[data-theme="dark"] .price-card.featured { border-color: var(--violet); }
:root[data-theme="dark"] .bubble.out { background: #3a2d63; color: var(--ink); }
:root[data-theme="dark"] .otp input.f { background: var(--lime-soft); border-color: var(--violet); }
:root[data-theme="dark"] .otp.bad input { background: var(--ko-bg); }
:root[data-theme="dark"] .otp.good input { background: rgba(74, 222, 128, .12); color: #86efac; }
/* La marque garde son carré visible sur fond sombre (le QR code reste sur blanc pour être lisible) */
:root[data-theme="dark"] .site-bar .brand-mark rect, :root[data-theme="dark"] .side .brand-mark rect { fill: #2c2442; }
:root[data-theme="dark"] .band { background: var(--wash), var(--card); }
:root[data-theme="dark"] .hero-card { background: var(--wash), var(--card); }
:root[data-theme="dark"] .main { background: radial-gradient(50% 40% at 100% 0%, rgba(124, 77, 255, .14) 0%, transparent 70%), radial-gradient(40% 35% at 100% 100%, rgba(255, 154, 107, .07) 0%, transparent 70%); }
:root[data-theme="dark"] .banner.ko { color: #fecaca; }
:root[data-theme="dark"] .banner.warn { color: #fde68a; }
:root[data-theme="dark"] .banner.ok { background: rgba(74, 222, 128, .12); color: #bbf7d0; }