/* MultiValue+ — variante SOMBRE du profil créateur ({slug}.zic.fi).

   Chargée par public/artist_public_stub.html SEULEMENT, après
   landing-multivalue.css (composant) et landing-multivalue-popup.css
   (coquille .zmvp). Elle ne vise que la popup du « + » du profil : la
   coquille, le simulateur qu'elle contient (.zmv, zmv_part « main ») et les
   surcouches du composant (feuille #zmv-overlay à panneaux, toast, racine
   .zmv-layer). Le thème CLAIR du profil garde le rendu des landings, inchangé.

   Règles du fichier :
   - TOUS les sélecteurs commencent par :root[data-pp-theme="dark"] (attribut
     résolu posé sur <html> par le script anti-FOUC de base.html, puis par
     public-profile-theme-toggle.js : la bascule Auto / Clair / Sombre
     s'applique en direct, sans rechargement) — modèle de
     landing-multiticket.css (§ 5) ;
   - couleurs lues des jetons --pp-* de public-profile-theme.css, toujours
     avec une valeur de repli (= valeur sombre de ce fichier) ;
   - d'abord les jetons (--zmvp-* de la popup, --zmv-* du composant), puis
     seulement les couleurs CLAIRES écrites en dur dans les deux feuilles.
     Préfixe = +2 de spécificité : quand une règle de base est surchargée,
     ses variantes d'état (aria-checked, data-status, data-kind, data-state,
     aria-busy, :hover) le sont aussi, sinon elles perdraient ;
   - contraste du texte ≥ 4,5:1 (calculé sur --pp-card #1a0e2e, --pp-card-light
     #231340 et --pp-card-lighter #2d1a4f) : encre --pp-text, texte secondaire
     --pp-text-muted (≥ 6,5:1), verts / ambres / rouges ÉCLAIRCIS pour le texte
     (#4ade80, #fbbf24, #fca5a5 ≥ 9:1) ; les fonds pleins vert / ambre / rouge
     gardent leur teinte sous un texte blanc. Carte de valeur : même vert,
     dégradé assombri (#15803d → #166534, blanc ≥ 5:1), pastilles et formule
     sur voile noir au lieu d'un voile blanc (blanc ≥ 7:1). */

/* ─── Jetons : popup (.zmvp) ─────────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmvp {
  --zmvp-ink: var(--pp-text, #fafafb);
  --zmvp-muted: var(--pp-text-muted, rgba(250, 250, 251, 0.62));
  --zmvp-green-dark: #4ade80;
  --zmvp-line: var(--pp-border, rgba(168, 85, 247, 0.18));
  --zmvp-scrim: var(--pp-scrim, rgba(4, 2, 8, 0.82));
  --zmvp-surface: linear-gradient(
    165deg,
    var(--pp-card, #1a0e2e) 0%,
    var(--pp-bg-soft, #140924) 55%,
    var(--pp-bg, #0b0419) 100%
  );
  --zmvp-shadow: 0 30px 80px -30px var(--pp-shadow, rgba(0, 0, 0, 0.55));
  --zmvp-glow: rgba(22, 163, 74, 0.2);
  --zmvp-head-bg: var(--pp-overlay, rgba(255, 255, 255, 0.06));
  --zmvp-badge-bg: rgba(74, 222, 128, 0.14);
  --zmvp-badge-ring: rgba(74, 222, 128, 0.32);
  --zmvp-close-bg: var(--pp-card-light, #231340);
  --zmvp-close-hover: var(--pp-card-lighter, #2d1a4f);
  --zmvp-close-line: var(--pp-border-strong, rgba(168, 85, 247, 0.4));
  --zmvp-scrollbar: var(--pp-overlay-border, rgba(255, 255, 255, 0.12));
  color-scheme: dark;
}

/* ─── Jetons : composant (.zmv, satellite, surcouches) ───────────────────── */

:root[data-pp-theme="dark"] .zmv,
:root[data-pp-theme="dark"] .zmv-part,
:root[data-pp-theme="dark"] .zmv-layer {
  --zmv-ink: var(--pp-text, #fafafb);
  --zmv-muted: var(--pp-text-muted, rgba(250, 250, 251, 0.62));
  --zmv-line: var(--pp-border, rgba(168, 85, 247, 0.18));
  --zmv-soft: var(--pp-card-light, #231340);
  --zmv-track: var(--pp-overlay-strong, rgba(255, 255, 255, 0.12));
  /* Éteint (réseau non valorisé, valeurs « — ») : 4,7:1 sur --pp-card-light. */
  --zmv-off: #8a82a0;
  /* Surfaces et encres propres au thème sombre. */
  --zmvd-card: var(--pp-card, #1a0e2e);
  --zmvd-raised: var(--pp-card-lighter, #2d1a4f);
  --zmvd-green-ink: #4ade80;
  --zmvd-amber-ink: #fbbf24;
  --zmvd-danger-ink: #fca5a5;
  color-scheme: dark;
}

/* ─── Popup : carte, en-tête, corps ──────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmvp-badge > .zh-chip-ic {
  box-shadow: 0 8px 18px -8px var(--pp-shadow, rgba(0, 0, 0, 0.55));
}
/* La section prend la surface de la carte (aucun fond propre dans la popup). */
:root[data-pp-theme="dark"] .zmvp-body > .zmv {
  background: none;
  color: var(--zmv-ink);
}
/* Bord de la carte sur le voile sombre ; plein écran (≤ 700 px) : aucun bord. */
@media (min-width: 701px) {
  :root[data-pp-theme="dark"] .zmvp-card {
    border: 1px solid var(--pp-border, rgba(168, 85, 247, 0.18));
  }
}

/* ─── Coque de la section (hors popup) et en-tête ────────────────────────── */

:root[data-pp-theme="dark"] .zmv {
  background: linear-gradient(165deg, var(--pp-bg-soft, #140924) 0%, var(--pp-bg, #0b0419) 100%);
}
:root[data-pp-theme="dark"] .zmv-kicker {
  color: var(--zmvd-green-ink);
}

/* ─── Bandeaux ───────────────────────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-banner {
  background: var(--zmvd-card);
}
:root[data-pp-theme="dark"] .zmv-banner[data-kind="info"] {
  background: rgba(139, 92, 246, 0.16);
  border-color: rgba(167, 139, 250, 0.42);
  color: #ddd6fe;
}
:root[data-pp-theme="dark"] .zmv-banner[data-kind="warn"] {
  background: rgba(245, 158, 11, 0.12);
  border-color: rgba(251, 191, 36, 0.42);
  color: #fde68a;
}
:root[data-pp-theme="dark"] .zmv-banner[data-kind="success"] {
  background: rgba(22, 163, 74, 0.16);
  border-color: rgba(74, 222, 128, 0.42);
  color: #bbf7d0;
}
:root[data-pp-theme="dark"] .zmv-banner--account[data-kind="success"] {
  border-left-color: var(--zmv-green);
}

/* ─── Cartes ─────────────────────────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-card,
:root[data-pp-theme="dark"] .zmv-perk {
  background: var(--zmvd-card);
}
:root[data-pp-theme="dark"] .zmv-card--sim {
  box-shadow: 0 18px 44px -30px var(--pp-shadow, rgba(0, 0, 0, 0.55));
}

/* ─── Chips réseau ───────────────────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-chip {
  background: var(--zmv-soft);
}
/* Coché : couleur du réseau + liseré clair (TikTok #111 se fondrait). */
:root[data-pp-theme="dark"] .zmv-chip[aria-checked="true"] {
  border-color: var(--zmv-c);
  background: var(--zmv-c);
  color: #fff;
  box-shadow: 0 0 0 1px var(--pp-overlay-border, rgba(255, 255, 255, 0.12));
}
:root[data-pp-theme="dark"] .zmv-chip[aria-disabled="true"] {
  background: var(--pp-overlay, rgba(255, 255, 255, 0.06));
}

/* ─── Curseurs : piste (jeton --zmv-track), poignée, anneau de focus ─────── */

:root[data-pp-theme="dark"] .zmv-range::-webkit-slider-thumb {
  border-color: var(--pp-text, #fafafb);
  box-shadow: 0 2px 8px var(--pp-shadow, rgba(0, 0, 0, 0.55));
}
:root[data-pp-theme="dark"] .zmv-range::-moz-range-thumb {
  border-color: var(--pp-text, #fafafb);
  box-shadow: 0 2px 8px var(--pp-shadow, rgba(0, 0, 0, 0.55));
}
/* Une règle par moteur : un pseudo-élément inconnu invalide toute la liste. */
:root[data-pp-theme="dark"] .zmv-range:disabled::-webkit-slider-thumb {
  box-shadow: none;
}
:root[data-pp-theme="dark"] .zmv-range:disabled::-moz-range-thumb {
  box-shadow: none;
}
:root[data-pp-theme="dark"] .zmv-range:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 2px var(--zmvd-card), 0 0 0 5px var(--zmv-ink);
}
:root[data-pp-theme="dark"] .zmv-range:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 2px var(--zmvd-card), 0 0 0 5px var(--zmv-ink);
}

/* ─── Carte de valeur (verte) ────────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-value {
  background: linear-gradient(150deg, var(--zmv-green-dark), #166534);
}
:root[data-pp-theme="dark"] .zmv[data-state="error"] .zmv-value {
  border-color: var(--pp-border-strong, rgba(168, 85, 247, 0.4));
  background: linear-gradient(150deg, #4b4562, #352f4a);
}
:root[data-pp-theme="dark"] .zmv-value-label,
:root[data-pp-theme="dark"] .zmv-unit {
  color: #fff;
}
:root[data-pp-theme="dark"] .zmv-monthly,
:root[data-pp-theme="dark"] .zmv-badge {
  background: rgba(0, 0, 0, 0.22);
}
:root[data-pp-theme="dark"] .zmv-formula {
  background: rgba(0, 0, 0, 0.2);
}

/* ─── « Connecte tes réseaux » ───────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-net {
  background: var(--zmvd-raised);
}
:root[data-pp-theme="dark"] .zmv-net-ico {
  box-shadow: inset 0 0 0 1px var(--pp-overlay-border, rgba(255, 255, 255, 0.12));
}
:root[data-pp-theme="dark"] .zmv-net-meta {
  color: var(--zmvd-green-ink);
}
/* Bouton de ligne : fond de la ligne, texte à l'encre ; la couleur du réseau
   reste sur la bordure, éclaircie (TikTok #111, LinkedIn #0A66C2 illisibles
   sur fond sombre) — repli sans color-mix : bordure violette du profil. */
:root[data-pp-theme="dark"] .zmv-net-btn {
  background: transparent;
}
:root[data-pp-theme="dark"] .zmv-net[data-status="not_connected"] .zmv-net-btn {
  border-color: var(--pp-border-strong, rgba(168, 85, 247, 0.4));
  border-color: color-mix(in srgb, var(--zmv-c) 60%, #fff);
  color: var(--zmv-ink);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="connected"],
:root[data-pp-theme="dark"] .zmv-net[data-status="computing"] {
  border-color: var(--zmv-c);
  border-color: color-mix(in srgb, var(--zmv-c) 70%, #fff);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="connected"] .zmv-net-btn,
:root[data-pp-theme="dark"] .zmv-net[data-status="estimated"] .zmv-net-btn {
  border-color: var(--zmv-green-dark);
  background: var(--zmv-green-dark);
  color: #fff;
}
:root[data-pp-theme="dark"] .zmv-net[data-status="estimated"] .zmv-net-meta,
:root[data-pp-theme="dark"] .zmv-net[data-status="not_valued"] .zmv-net-meta {
  color: var(--zmv-muted);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="computing"] .zmv-net-btn {
  border-color: transparent;
  background: rgba(74, 222, 128, 0.14);
  color: var(--zmvd-green-ink);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="pending"],
:root[data-pp-theme="dark"] .zmv-net[data-status="revoked"] {
  border-color: rgba(251, 191, 36, 0.45);
  background: rgba(245, 158, 11, 0.08);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="pending"] .zmv-net-meta,
:root[data-pp-theme="dark"] .zmv-net[data-status="revoked"] .zmv-net-meta {
  color: var(--zmvd-amber-ink);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="pending"] .zmv-net-btn {
  border-color: var(--zmv-amber);
  background: var(--zmv-amber);
  color: #fff;
}
:root[data-pp-theme="dark"] .zmv-net[data-status="revoked"] .zmv-net-btn {
  border-color: var(--zmvd-amber-ink);
  background: transparent;
  color: var(--zmvd-amber-ink);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="not_valued"] {
  background: var(--zmv-soft);
}
:root[data-pp-theme="dark"] .zmv-net[data-status="not_valued"] .zmv-net-btn {
  border-color: var(--zmv-line);
  background: var(--pp-overlay, rgba(255, 255, 255, 0.06));
  color: var(--zmv-muted);
}

/* Liens d'action et pieds de liste (vert éclairci pour le texte). */
:root[data-pp-theme="dark"] .zmv-link,
:root[data-pp-theme="dark"] .zmv-connected-foot,
:root[data-pp-theme="dark"] .zmv-detail,
:root[data-pp-theme="dark"] .zmv-scale-link {
  color: var(--zmvd-green-ink);
}

/* ─── Boutons ────────────────────────────────────────────────────────────── */

/* Fond blanc des boutons neutres (fantôme, et .zmv-btn nu) : l'encre devient
   claire, le fond suit. Rouge / vert / blanc (ce dernier vit sur la carte
   verte) gardent le leur. */
:root[data-pp-theme="dark"] .zmv-btn:not(.zmv-btn--red):not(.zmv-btn--green):not(.zmv-btn--white) {
  background: var(--zmvd-raised);
}

/* ─── Partage, barème public ─────────────────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-scale-off {
  border-color: rgba(251, 191, 36, 0.42);
  background: rgba(245, 158, 11, 0.12);
  color: #fde68a;
}
:root[data-pp-theme="dark"] .zmv-scale-badge {
  background: var(--pp-overlay-strong, rgba(255, 255, 255, 0.12));
}
/* Pastille du réseau : liseré clair (TikTok #111 sur fond sombre). */
:root[data-pp-theme="dark"] .zmv-scale-dot {
  box-shadow: 0 0 0 1px var(--pp-overlay-border, rgba(255, 255, 255, 0.12));
}
:root[data-pp-theme="dark"] .zmv-scale-formula {
  border-color: rgba(74, 222, 128, 0.3);
  background: rgba(22, 163, 74, 0.12);
  color: #bbf7d0;
}

/* ─── « Et ton pote » (satellite ; absent de la popup, couvert par sûreté) ─ */

:root[data-pp-theme="dark"] .zmv-input::placeholder {
  color: var(--pp-text-muted, rgba(250, 250, 251, 0.62));
}
:root[data-pp-theme="dark"] .zmv-input[aria-invalid="true"] {
  border-color: #f87171;
  background: rgba(239, 68, 68, 0.1);
}
:root[data-pp-theme="dark"] .zmv-friend-err,
:root[data-pp-theme="dark"] .zmv-friend-result[data-state="error"] .zmv-friend-label {
  color: var(--zmvd-danger-ink);
}
:root[data-pp-theme="dark"] .zmv-friend-result[data-state="reading"] .zmv-friend-amount {
  background: linear-gradient(
    90deg,
    var(--pp-overlay, rgba(255, 255, 255, 0.06)) 25%,
    var(--pp-overlay-strong, rgba(255, 255, 255, 0.12)) 50%,
    var(--pp-overlay, rgba(255, 255, 255, 0.06)) 75%
  );
  background-size: 200% 100%;
}
:root[data-pp-theme="dark"] .zmv-friend-result[data-state="reading"] .zmv-friend-label {
  color: var(--zmvd-green-ink);
}
:root[data-pp-theme="dark"] .zmv-friend-result[data-state="done"] {
  background: linear-gradient(150deg, var(--zmv-green-dark), #166534);
  color: #fff;
}
:root[data-pp-theme="dark"] .zmv-friend-result[data-state="error"] {
  border-color: rgba(248, 113, 113, 0.42);
  background: rgba(239, 68, 68, 0.08);
}

/* ─── Feuille à panneaux (#zmv-overlay) ──────────────────────────────────── */

:root[data-pp-theme="dark"] .zmv-overlay {
  background: var(--pp-scrim, rgba(4, 2, 8, 0.82));
}
:root[data-pp-theme="dark"] .zmv-sheet {
  border: 1px solid var(--pp-border, rgba(168, 85, 247, 0.18));
  background: var(--zmvd-card);
  box-shadow: 0 30px 80px -30px var(--pp-shadow, rgba(0, 0, 0, 0.55));
}
/* Choix de la Page / chaîne */
:root[data-pp-theme="dark"] .zmv-page {
  background: var(--zmvd-raised);
}
:root[data-pp-theme="dark"] .zmv-page[aria-busy="true"] {
  border-color: var(--zmv-green);
  background: rgba(22, 163, 74, 0.16);
}
:root[data-pp-theme="dark"] .zmv-page[aria-busy="true"]::after,
:root[data-pp-theme="dark"] .zmv-page-mono {
  color: var(--zmvd-green-ink);
}
:root[data-pp-theme="dark"] .zmv-page-mono {
  background: rgba(74, 222, 128, 0.14);
}
/* Bluesky : erreur du formulaire */
:root[data-pp-theme="dark"] .zmv-form-err {
  background: rgba(239, 68, 68, 0.12);
  color: var(--zmvd-danger-ink);
}

/* ─── Toast ──────────────────────────────────────────────────────────────── */

/* Le violet nuit des landings se fond dans le profil sombre : fond relevé et
   bord ; succès et erreur gardent leur fond plein (blanc ≥ 5:1). */
:root[data-pp-theme="dark"] .zmv-toast {
  border: 1px solid var(--pp-border-strong, rgba(168, 85, 247, 0.4));
  box-shadow: 0 18px 44px -18px var(--pp-shadow, rgba(0, 0, 0, 0.55));
}
:root[data-pp-theme="dark"] .zmv-toast:not([data-kind="success"]):not([data-kind="error"]) {
  background: var(--pp-card-lighter, #2d1a4f);
}

/* ─── Survol (pointeurs qui survolent seulement) ─────────────────────────── */

@media (hover: hover) {
  :root[data-pp-theme="dark"] .zmv-net[data-status="not_connected"] .zmv-net-btn:hover {
    border-color: var(--zmv-c);
    background: var(--zmv-c);
    color: #fff;
  }
  :root[data-pp-theme="dark"] .zmv-net[data-status="revoked"] .zmv-net-btn:hover {
    border-color: var(--zmv-amber);
    background: var(--zmv-amber);
    color: #fff;
  }
  :root[data-pp-theme="dark"] .zmv-net[data-status="pending"] .zmv-net-btn:hover {
    border-color: #92400e;
    background: #92400e;
  }
  :root[data-pp-theme="dark"] .zmv-banner-btn:hover,
  :root[data-pp-theme="dark"] .zmv-banner-link:hover {
    background: var(--pp-overlay-strong, rgba(255, 255, 255, 0.12));
  }
  :root[data-pp-theme="dark"] .zmv-banner-close:hover,
  :root[data-pp-theme="dark"] .zmv-sheet-close:hover {
    background: var(--pp-overlay-strong, rgba(255, 255, 255, 0.12));
    color: var(--zmv-ink);
  }
  :root[data-pp-theme="dark"] .zmv-page:not(:disabled):hover,
  :root[data-pp-theme="dark"] .zmv-share-link:hover {
    border-color: var(--zmv-green);
    background: rgba(22, 163, 74, 0.16);
  }
}