/* ═══════════════════════════════════════════════════════
   SENVIRTUEL v2 — Overrides Thème Clair
   Ce fichier corrige les éléments avec couleurs hardcodées
   qui ne passent pas par les variables CSS de tokens.css
═══════════════════════════════════════════════════════ */

/* ── html + body ── */
html.light-theme { background: var(--bg); }

/* ── Skeleton loaders ── */
html.light-theme .db-skeleton {
  background: linear-gradient(
    90deg,
    #e2e8f0 25%,
    #f1f5f9 50%,
    #e2e8f0 75%
  );
  background-size: 400px 100%;
}

/* ── Overlay global (drawer / panier) ── */
html.light-theme #overlay {
  background: rgba(15,17,35,0.45);
}

/* ── Formulaires : inputs, textareas, selects ── */
html.light-theme input,
html.light-theme textarea,
html.light-theme select,
html.light-theme .db-input,
html.light-theme .db-textarea,
html.light-theme .db-select {
  background: var(--surface);
  color: var(--txt-1);
  border-color: var(--border-2);
}
html.light-theme input::placeholder,
html.light-theme textarea::placeholder { color: var(--txt-3); }
html.light-theme input:focus,
html.light-theme textarea:focus,
html.light-theme select:focus,
html.light-theme .db-input:focus,
html.light-theme .db-textarea:focus {
  border-color: var(--primary);
  box-shadow: 0 0 0 3px var(--primary-soft);
}

/* ── Scrollbar ── */
html.light-theme ::-webkit-scrollbar-thumb { background: #cbd5e1; }
html.light-theme ::-webkit-scrollbar-thumb:hover { background: #94a3b8; }

/* ── Card produit : fond explicite ── */
html.light-theme .product-card {
  background: var(--surface);
  border-color: var(--border);
}
html.light-theme .product-card:hover {
  border-color: var(--primary);
}

/* ── Modal backdrop ── */
html.light-theme .db-modal-backdrop {
  background: rgba(15,17,35,0.5);
}
html.light-theme .db-modal {
  background: var(--surface);
  border-color: var(--db-border);
}
html.light-theme .db-modal-header {
  border-bottom-color: var(--db-border);
}
html.light-theme .db-modal-footer {
  border-top-color: var(--db-border);
}

/* ── Dashboard layout ── */
html.light-theme .db-wrap,
html.light-theme .db-login-wrap {
  background: var(--db-bg);
}
html.light-theme .db-sidebar {
  background: var(--db-surface);
  border-right-color: var(--db-border);
}
html.light-theme .db-topbar {
  background: rgba(255,255,255,0.92);
  border-bottom-color: var(--db-border);
}
html.light-theme .db-acc-sidebar {
  background: var(--db-surface);
  border-right-color: var(--db-border);
}
html.light-theme .db-acc-layout {
  background: var(--db-bg);
}

/* ── Dashboard cards et stats ── */
html.light-theme .db-card,
html.light-theme .db-stat,
html.light-theme .db-sub-card {
  background: var(--db-surface);
  border-color: var(--db-border);
  box-shadow: var(--db-shadow);
}
html.light-theme .db-card-header {
  border-bottom-color: var(--db-border);
}

/* ── Dashboard table ── */
html.light-theme .db-table-wrap { border-color: var(--db-border); }
html.light-theme .db-table thead tr { background: var(--db-elevated); }
html.light-theme .db-table th { color: var(--db-txt-3); border-bottom-color: var(--db-border); }
html.light-theme .db-table td { border-bottom-color: var(--db-border); color: var(--db-txt-1); }
html.light-theme .db-table tr:hover td { background: var(--db-elevated); }

/* ── Dashboard nav links ── */
html.light-theme .db-nav-link {
  color: var(--db-txt-2);
}
html.light-theme .db-nav-link:hover,
html.light-theme .db-nav-link.active {
  background: var(--primary-soft);
  color: var(--primary);
}
html.light-theme .db-divider { border-color: var(--db-border); }

/* ── Dashboard login card ── */
html.light-theme .db-login-card {
  background: var(--db-surface);
  border-color: var(--db-border);
  box-shadow: var(--db-shadow);
}

/* ── Dashboard blobs décoratifs ── */
html.light-theme .db-blob { opacity: 0.04; }

/* ── Dashboard badges ── */
html.light-theme .db-badge-default {
  background: rgba(0,0,0,0.06);
  color: var(--db-txt-2);
}

/* ── Toolbar / select / search du dashboard ── */
html.light-theme .db-toolbar {
  border-color: var(--db-border);
  background: var(--db-surface);
}
html.light-theme .db-search { background: var(--db-elevated); border-color: var(--db-border); }
html.light-theme .db-search input { background: transparent; color: var(--db-txt-1); }
html.light-theme .db-select { background: var(--db-elevated); border-color: var(--db-border); color: var(--db-txt-1); }

/* ── Identifiants (credentials block) ── */
html.light-theme .db-cred-block { background: var(--db-elevated); border-color: var(--db-border); }
html.light-theme .db-cred-row { border-bottom-color: var(--db-border); }
html.light-theme .db-cred-label { color: var(--db-txt-3); }
html.light-theme .db-cred-val { color: var(--db-txt-1); }

/* ── Profile card (sidebar compte) ── */
html.light-theme .db-acc-profile-card {
  background: var(--db-elevated);
  border-color: var(--db-border);
}
html.light-theme .db-acc-name { color: var(--db-txt-1); }
html.light-theme .db-acc-email { color: var(--db-txt-3); }

/* ── Barre de progression abonnements ── */
html.light-theme .db-progress { background: var(--db-border); }

/* ── Bouton achat (cyan sur fond clair) ── */
html.light-theme .btn-accent { color: #0f1123; }

/* ── Promo bar : reste sombre (cohérent avec la marque) ── */
html.light-theme #sv-promo-bar {
  background: linear-gradient(90deg, #1a1060, #2d1e80) !important;
}

/* ── Bouton toggle thème ── */
#themeToggleBtn {
  transition: background var(--dur-fast), color var(--dur-fast), border-color var(--dur-fast);
}
html.light-theme #themeToggleBtn {
  color: var(--txt-2);
}

/* ══════════════════════════════════════════════════════
   HOMEPAGE — HERO SECTION
   Architecture : image sur .sv-hero-bg, overlay sur ::before.
   En thème clair : overlay lumineux, image reste visible.
══════════════════════════════════════════════════════ */
html.light-theme .sv-hero-bg::before {
  background:
    radial-gradient(ellipse 80% 50% at 50% -10%, rgba(99,102,241,0.14) 0%, transparent 70%),
    radial-gradient(ellipse 50% 30% at 80% 60%, rgba(34,211,238,0.08) 0%, transparent 60%),
    linear-gradient(135deg, rgba(244,246,251,0.72) 0%, rgba(238,240,249,0.68) 100%);
}

/* ── Flash deal : overlay sombre réduit, texte blanc encore lisible ── */
html.light-theme .sv-flash-bg::before {
  background: linear-gradient(135deg, rgba(15,17,35,0.72) 0%, rgba(15,10,40,0.65) 60%, rgba(15,17,35,0.70) 100%);
}

/* ── Hero : bordure section categories (blanc → visible sur fond clair) ── */
html.light-theme .sv-cat-card {
  border-color: rgba(0,0,0,0.08);
}

/* ── Review cards : légère ombre sur fond clair ── */
html.light-theme .review-card {
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}

/* ══════════════════════════════════════════════════════
   SPINNERS — bordures blanches invisibles sur fond clair
══════════════════════════════════════════════════════ */

/* Spinner dans les boutons (components.css ligne 85) */
html.light-theme .btn .spinner {
  border-color: rgba(15,17,35,0.18) !important;
  border-top-color: currentColor !important;
}

/* Spinner standalone inline (auth.js / account.js) —
   la classe sv-spinner-inline est ajoutée dans les JS */
html.light-theme .sv-spinner-inline {
  border-color: rgba(15,17,35,0.15) !important;
  border-top-color: var(--primary) !important;
}

/* ══════════════════════════════════════════════════════
   CARTES PRODUIT — bordures & wishlist
══════════════════════════════════════════════════════ */

/* Bordure hover : rgba(255,255,255,0.12) → visible */
html.light-theme .product-card:hover {
  border-color: var(--primary) !important;
  box-shadow: 0 8px 32px rgba(99,102,241,0.18) !important;
}

/* Bouton wishlist (♡) : fond semi-blanc invisible */
html.light-theme .product-card-wishlist {
  background: rgba(255,255,255,0.88) !important;
  border-color: var(--border-2) !important;
  color: var(--txt-3) !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10) !important;
}
html.light-theme .product-card-wishlist:hover,
html.light-theme .product-card-wishlist.active {
  color: var(--danger) !important;
  background: #fff !important;
}

/* ══════════════════════════════════════════════════════
   NOTIFICATIONS D'ACHAT (social proof toasts)
══════════════════════════════════════════════════════ */
html.light-theme .sv-pnotif {
  background: #ffffff;
  border-color: rgba(0,0,0,0.10);
  box-shadow: 0 4px 24px rgba(0,0,0,0.10);
}
html.light-theme .sv-pnotif-name { color: var(--txt-1); }
html.light-theme .sv-pnotif-time { color: var(--txt-3); }