/*!
 * Vision CI — Light/Dark Mode System
 * Version : 1.0.0 (2026-05-09)
 * Auteur  : Christian Guidibi / Exosquelette
 *
 * Ce fichier doit être enqueued APRÈS style.css pour que ses tokens
 * surchargent les valeurs définies dans :root du theme principal.
 *
 * ═══════════════════════════════════════════════════════════════════
 * ARCHITECTURE
 * ═══════════════════════════════════════════════════════════════════
 *
 * - :root             → palette LIGHT (défaut)
 * - [data-theme="dark"] → palette DARK (l'utilisateur clique le toggle)
 *
 * Le bootstrap inline dans header.php applique data-theme AVANT le rendu
 * pour éviter le FOUC. La préférence persiste via localStorage.
 *
 * ═══════════════════════════════════════════════════════════════════
 * TOKENS PRINCIPAUX (à appliquer partout)
 * ═══════════════════════════════════════════════════════════════════ */

:root {
  /* ─── Surfaces ─────────────────────────────────────────────────── */
  --bg:             #FAF8F4;                  /* warm cream (vs #08111C dark) */
  --surface:        #FFFFFF;                  /* card / alt-section */
  --surface-soft:   rgba(13,30,46,0.03);      /* radar/inputs subtle bg */

  /* ─── Or (décoratif vs textuel) ─────────────────────────────────── */
  --gold:           #C8A96E;                  /* décoratif : bordures, fonds CTA */
  --gold-ink:       #8B7340;                  /* texte gold (passe AA 4.5:1) */
  --gold-dim:       rgba(139,115,64,0.10);
  --gold-line:      rgba(139,115,64,0.30);

  /* ─── Texte (encre navy) ─────────────────────────────────────────── */
  --white:          #0D1E2E;                  /* MISNOMER : c'est l'encre primaire */
  --ink:            #0D1E2E;                  /* alias sémantique */
  --off-white:      rgba(13,30,46,0.92);
  --body:           rgba(13,30,46,0.82);
  --muted:          rgba(13,30,46,0.55);
  --border:         rgba(13,30,46,0.12);

  /* ─── Couches navigationnelles ──────────────────────────────────── */
  --nav-bg:         rgba(250,248,244,0.92);   /* nav backdrop avec blur */
  --panel-bg:       rgba(255,255,255,0.99);   /* mobile slide-in panel */
  --dropdown-bg:    rgba(255,255,255,0.98);   /* outils dropdown */
  --shadow:         0 8px 24px rgba(13,30,46,0.08);

  /* ─── Diagnostique strip ────────────────────────────────────────── */
  --strip-grad:     linear-gradient(135deg, rgba(26,58,92,0.06) 0%, rgba(200,169,110,0.18) 100%);
  --radar-bg:       rgba(255,255,255,0.7);
  --radar-grid:     rgba(13,30,46,0.10);
  --radar-grid-soft:rgba(13,30,46,0.07);
  --radar-axis:     rgba(13,30,46,0.55);

  /* ─── Formulaires ───────────────────────────────────────────────── */
  --input-bg:       rgba(13,30,46,0.03);
  --input-border:   rgba(13,30,46,0.18);
  --input-text:     #0D1E2E;
  --input-placeholder: rgba(13,30,46,0.4);
  --autofill-bg:    #FFFFFF;
  --autofill-text:  #0D1E2E;

  /* ─── États ─────────────────────────────────────────────────────── */
  --error:          #C0392B;                  /* rouge readable sur cream */

  /* ─── Tokens préfixés (compat blog/archive/single) ──────────────── */
  --vci-bg:         #FAF8F4;
  --vci-surface:    #FFFFFF;
  --vci-gold:       #C8A96E;
  --vci-gold-ink:   #8B7340;
  --vci-gold-dim:   rgba(139,115,64,0.10);
  --vci-gold-line:  rgba(139,115,64,0.30);
  --vci-white:      #0D1E2E;
  --vci-off-white:  rgba(13,30,46,0.92);
  --vci-body:       rgba(13,30,46,0.82);
  --vci-muted:      rgba(13,30,46,0.55);
  --vci-border:     rgba(13,30,46,0.12);
}

/* ═══════════════════════════════════════════════════════════════════
   DARK MODE — surcharge complète quand l'utilisateur clique le toggle
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="dark"] {
  --bg:             #08111C;
  --surface:        #0D1E2E;
  --surface-soft:   rgba(255,255,255,0.03);

  --gold:           #C8A96E;
  --gold-ink:       #C8A96E;                  /* en dark, gold-ink = gold */
  --gold-dim:       rgba(200,169,110,0.12);
  --gold-line:      rgba(200,169,110,0.25);

  --white:          #FFFFFF;
  --ink:            #FFFFFF;
  --off-white:      rgba(255,255,255,0.92);
  --body:           rgba(255,255,255,0.75);
  --muted:          rgba(255,255,255,0.5);
  --border:         rgba(255,255,255,0.07);

  --nav-bg:         rgba(8,17,28,0.96);
  --panel-bg:       rgba(8,17,28,0.99);
  --dropdown-bg:    rgba(8,17,28,0.98);
  --shadow:         0 8px 24px rgba(0,0,0,0.3);

  --strip-grad:     linear-gradient(135deg, rgba(26,58,92,0.8) 0%, rgba(200,169,110,0.08) 100%);
  --radar-bg:       rgba(8,17,28,0.6);
  --radar-grid:     rgba(255,255,255,0.10);
  --radar-grid-soft:rgba(255,255,255,0.07);
  --radar-axis:     rgba(255,255,255,0.5);

  --input-bg:       rgba(255,255,255,0.03);
  --input-border:   rgba(255,255,255,0.15);
  --input-text:     #FFFFFF;
  --input-placeholder: rgba(255,255,255,0.3);
  --autofill-bg:    #0D1E2E;
  --autofill-text:  #FFFFFF;

  --error:          #e07070;

  --vci-bg:         #08111C;
  --vci-surface:    #0D1E2E;
  --vci-gold:       #C8A96E;
  --vci-gold-ink:   #C8A96E;
  --vci-gold-dim:   rgba(200,169,110,0.12);
  --vci-gold-line:  rgba(200,169,110,0.25);
  --vci-white:      #FFFFFF;
  --vci-off-white:  rgba(255,255,255,0.92);
  --vci-body:       rgba(255,255,255,0.75);
  --vci-muted:      rgba(255,255,255,0.5);
  --vci-border:     rgba(255,255,255,0.07);
}

/* ═══════════════════════════════════════════════════════════════════
   TRANSITIONS GLOBALES — bascule fluide sans flicker
   ═══════════════════════════════════════════════════════════════════ */
body, nav, footer, .s, .s-alt, .svc, .phase, .diag-strip,
.radar-preview, .vci-success, .vci-blog-main, .vci-single-post,
.vci-post-card, .nav-tools-menu, .mobile-menu-panel,
.f-in, .f-sel, .f-ta {
  transition: background-color 0.25s ease, color 0.25s ease, border-color 0.25s ease;
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; }
}

/* ═══════════════════════════════════════════════════════════════════
   OVERRIDES SURGICAUX — éléments avec couleurs en dur dans templates
   ═══════════════════════════════════════════════════════════════════
   Ces sélecteurs gagnent par spécificité [data-theme="..."] (0,2,0) >
   le sélecteur original (0,1,0) dans les <style> inline des templates.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Homepage : home-fr.php / home-en.php ──────────────────────── */
[data-theme="light"] .diag-strip,
:root .diag-strip {
  background: var(--strip-grad);
}
[data-theme="light"] .radar-preview,
:root .radar-preview {
  background: var(--radar-bg);
}
[data-theme="light"] .diag-link,
:root .diag-link {
  border-bottom-color: var(--border);
}
[data-theme="light"] .vci-success,
:root .vci-success {
  background: var(--gold-dim);
}
[data-theme="light"] .vci-success-note,
:root .vci-success-note {
  color: var(--gold-ink);
  border-top-color: var(--gold-line);
}
[data-theme="light"] .sit-dot,
:root .sit-dot {
  background: var(--gold-line);
}
[data-theme="light"] .vision-block,
:root .vision-block {
  border-left-color: var(--gold-line);
}

/* ─── SVG Radar (homepage) — texte et grille ────────────────────── */
[data-theme="light"] .radar-svg-wrap svg text,
:root .radar-svg-wrap svg text {
  fill: var(--radar-axis) !important;
}
[data-theme="light"] .radar-svg-wrap svg line,
:root .radar-svg-wrap svg line {
  stroke: var(--radar-grid) !important;
}
[data-theme="light"] .radar-svg-wrap svg circle[fill="none"],
:root .radar-svg-wrap svg circle[fill="none"] {
  stroke: var(--radar-grid-soft) !important;
}

/* ─── Formulaires (.f-in, .f-sel, .f-ta dans style.css) ──────────── */
[data-theme="light"] .f-in,
[data-theme="light"] .f-sel,
[data-theme="light"] .f-ta,
:root .f-in,
:root .f-sel,
:root .f-ta {
  background: var(--input-bg) !important;
  border-color: var(--border);
  border-bottom-color: var(--input-border);
  color: var(--input-text) !important;
}
[data-theme="light"] .f-in::placeholder,
[data-theme="light"] .f-ta::placeholder,
:root .f-in::placeholder,
:root .f-ta::placeholder {
  color: var(--input-placeholder) !important;
}
[data-theme="light"] .f-in:-webkit-autofill,
[data-theme="light"] .f-in:-webkit-autofill:hover,
[data-theme="light"] .f-in:-webkit-autofill:focus,
:root .f-in:-webkit-autofill,
:root .f-in:-webkit-autofill:hover,
:root .f-in:-webkit-autofill:focus {
  -webkit-text-fill-color: var(--autofill-text) !important;
  -webkit-box-shadow: 0 0 0 1000px var(--autofill-bg) inset !important;
}
[data-theme="light"] .f-sel option,
:root .f-sel option {
  background: var(--surface);
  color: var(--ink);
}

/* ─── Hero CTA secondaire (.cta-s) ──────────────────────────────── */
[data-theme="light"] .cta-s,
:root .cta-s {
  border-color: var(--input-border);
  color: var(--ink) !important;
}
[data-theme="light"] .cta-s:hover,
:root .cta-s:hover {
  border-color: var(--gold-ink);
}

/* ─── Erreur formulaire (était #e07070 hardcodé) ────────────────── */
[data-theme="light"] .vci-form-error,
:root .vci-form-error {
  color: var(--error) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DIAGNOSTIC IA — page-diagnostic-ia.php (#vci-diag)
   Surcharge complète quand light mode actif
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] #vci-diag,
:root #vci-diag {
  background: var(--bg) !important;
  background-image: radial-gradient(ellipse at 15% 60%, rgba(200,169,110,0.10) 0%, transparent 55%) !important;
  color: var(--body) !important;
}
[data-theme="light"] .dg-prog-bar,
:root .dg-prog-bar { background: var(--border) !important; }

[data-theme="light"] .dg-logo,
:root .dg-logo { color: var(--ink) !important; }
[data-theme="light"] .dg-logo-dot,
:root .dg-logo-dot { color: var(--gold-ink) !important; }
[data-theme="light"] .dg-tag,
:root .dg-tag { color: var(--gold-ink) !important; }
[data-theme="light"] .dg-h1,
[data-theme="light"] .dg-h2,
:root .dg-h1,
:root .dg-h2 { color: var(--ink) !important; }
[data-theme="light"] .dg-h1 em,
:root .dg-h1 em { color: var(--gold-ink) !important; }

[data-theme="light"] .dg-q-num,
[data-theme="light"] .dg-q-max,
[data-theme="light"] .dg-section-lbl,
[data-theme="light"] .dg-subtask-lbl,
:root .dg-q-num,
:root .dg-q-max,
:root .dg-section-lbl,
:root .dg-subtask-lbl { color: var(--gold-ink) !important; }

[data-theme="light"] .dg-opt-btn,
[data-theme="light"] .dg-type-card,
:root .dg-opt-btn,
:root .dg-type-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--body) !important;
}
[data-theme="light"] .dg-opt-btn.sel,
:root .dg-opt-btn.sel {
  background: var(--gold-dim) !important;
  border-color: var(--gold-ink) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .dg-radio,
:root .dg-radio { border-color: var(--border) !important; }
[data-theme="light"] .dg-opt-btn.sel .dg-radio,
:root .dg-opt-btn.sel .dg-radio {
  border-color: var(--gold-ink) !important;
  background: var(--gold-ink) !important;
}

[data-theme="light"] .dg-other-in,
[data-theme="light"] .dg-modal-in,
:root .dg-other-in,
:root .dg-modal-in {
  background: var(--surface) !important;
  border-color: var(--gold-line) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .dg-modal-in::placeholder,
:root .dg-modal-in::placeholder { color: var(--muted) !important; }

[data-theme="light"] .dg-subtask,
[data-theme="light"] .dg-vision-panel,
[data-theme="light"] .dg-invite,
:root .dg-subtask,
:root .dg-vision-panel,
:root .dg-invite {
  background: var(--gold-dim) !important;
  border-color: var(--gold-line) !important;
}
[data-theme="light"] .dg-subtask-q,
:root .dg-subtask-q { color: var(--body) !important; }

[data-theme="light"] .dg-btn-back,
[data-theme="light"] .dg-action-btn,
[data-theme="light"] .dg-vision-btn,
:root .dg-btn-back,
:root .dg-action-btn,
:root .dg-vision-btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .dg-btn-back:hover,
[data-theme="light"] .dg-action-btn:hover,
:root .dg-btn-back:hover,
:root .dg-action-btn:hover {
  border-color: var(--gold-ink) !important;
  color: var(--ink) !important;
}

[data-theme="light"] .dg-res-header,
[data-theme="light"] .dg-axe-card,
[data-theme="light"] .dg-section,
:root .dg-res-header,
:root .dg-axe-card,
:root .dg-section {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .dg-section-text,
:root .dg-section-text { color: var(--body) !important; }
[data-theme="light"] .dg-axe-pct,
:root .dg-axe-pct { color: var(--ink) !important; }
[data-theme="light"] .dg-axe-bar-bg,
:root .dg-axe-bar-bg { background: var(--border) !important; }

[data-theme="light"] .dg-score-badge,
:root .dg-score-badge {
  color: var(--gold-ink) !important;
  background: var(--gold-dim) !important;
  border-color: var(--gold-line) !important;
}
[data-theme="light"] .dg-tag2,
:root .dg-tag2 {
  background: var(--gold-dim) !important;
  border-color: var(--gold-line) !important;
  color: var(--gold-ink) !important;
}

[data-theme="light"] .dg-modal-box,
:root .dg-modal-box {
  background: var(--surface) !important;
  border-color: var(--gold-line) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .dg-modal-title,
:root .dg-modal-title { color: var(--ink) !important; }
[data-theme="light"] .dg-modal-p,
[data-theme="light"] .dg-modal-check-lbl,
:root .dg-modal-p,
:root .dg-modal-check-lbl { color: var(--body) !important; }

/* ═══════════════════════════════════════════════════════════════════
   ROI IA — page-roi-ia.php (#vci-roi)
   Calibré sur les classes réelles : roi-card, roi-rate-btn, roi-act-row,
   roi-in, roi-kpi*, roi-modal*, roi-act-btn*
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] #vci-roi,
:root #vci-roi {
  background: var(--bg) !important;
  background-image: radial-gradient(ellipse at 10% 50%, rgba(200,169,110,0.08) 0%, transparent 60%),
                    radial-gradient(ellipse at 90% 10%, rgba(200,169,110,0.06) 0%, transparent 50%) !important;
  color: var(--body) !important;
}

[data-theme="light"] .roi-logo,
:root .roi-logo { color: var(--gold-ink) !important; }
[data-theme="light"] .roi-logo-sub,
[data-theme="light"] .roi-subtitle,
[data-theme="light"] .roi-kpi-lbl,
[data-theme="light"] .roi-in-unit,
[data-theme="light"] .roi-card-sub,
:root .roi-logo-sub,
:root .roi-subtitle,
:root .roi-kpi-lbl,
:root .roi-in-unit,
:root .roi-card-sub { color: var(--muted) !important; }

[data-theme="light"] .roi-title,
:root .roi-title { color: var(--ink) !important; }
[data-theme="light"] .roi-title em,
[data-theme="light"] .roi-card-lbl,
[data-theme="light"] .roi-kpi-num-main,
[data-theme="light"] .roi-kpi-lbl-main,
[data-theme="light"] .roi-sent-msg,
:root .roi-title em,
:root .roi-card-lbl,
:root .roi-kpi-num-main,
:root .roi-kpi-lbl-main,
:root .roi-sent-msg { color: var(--gold-ink) !important; }

[data-theme="light"] .roi-card,
:root .roi-card {
  background: var(--surface) !important;
  border-color: var(--border) !important;
}

[data-theme="light"] .roi-rate-btn,
[data-theme="light"] .roi-act-row,
:root .roi-rate-btn,
:root .roi-act-row {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--body) !important;
}
[data-theme="light"] .roi-rate-btn:hover,
:root .roi-rate-btn:hover {
  border-color: var(--gold-ink) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .roi-rate-btn.on,
[data-theme="light"] .roi-act-row.on,
:root .roi-rate-btn.on,
:root .roi-act-row.on {
  border-color: var(--gold-ink) !important;
  background: var(--gold-dim) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .roi-rate-dot,
:root .roi-rate-dot { border-color: var(--muted) !important; }
[data-theme="light"] .roi-rate-btn.on .roi-rate-dot,
:root .roi-rate-btn.on .roi-rate-dot {
  background: var(--gold-ink) !important;
  border-color: var(--gold-ink) !important;
}
[data-theme="light"] .roi-act-lbl,
:root .roi-act-lbl { color: var(--ink) !important; }

[data-theme="light"] .roi-in,
:root .roi-in {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .roi-in.on,
:root .roi-in.on {
  border-color: var(--gold-ink) !important;
  background: var(--gold-dim) !important;
  color: var(--gold-ink) !important;
}

[data-theme="light"] .roi-kpi-row,
:root .roi-kpi-row {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
}
[data-theme="light"] .roi-kpi-main,
:root .roi-kpi-main { background: var(--gold-dim) !important; }
[data-theme="light"] .roi-kpi-div,
:root .roi-kpi-div { background: var(--border) !important; }
[data-theme="light"] .roi-kpi-num,
:root .roi-kpi-num { color: var(--ink) !important; }

[data-theme="light"] .roi-note,
[data-theme="light"] .roi-empty,
:root .roi-note,
:root .roi-empty {
  background: var(--surface-soft) !important;
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .roi-cta-text,
:root .roi-cta-text { color: var(--body) !important; }

[data-theme="light"] .roi-act-btn-print,
[data-theme="light"] .roi-act-btn-email,
:root .roi-act-btn-print,
:root .roi-act-btn-email {
  border-color: var(--gold-line) !important;
  color: var(--gold-ink) !important;
}
[data-theme="light"] .roi-act-btn-print:hover,
[data-theme="light"] .roi-act-btn-email:hover,
:root .roi-act-btn-print:hover,
:root .roi-act-btn-email:hover {
  background: var(--gold-dim) !important;
  border-color: var(--gold-ink) !important;
}
[data-theme="light"] .roi-act-btn-restart,
:root .roi-act-btn-restart {
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .roi-act-btn-restart:hover,
:root .roi-act-btn-restart:hover {
  border-color: var(--input-border) !important;
  color: var(--ink) !important;
}

/* Modal */
[data-theme="light"] .roi-modal-bg,
:root .roi-modal-bg { background: rgba(13,30,46,0.4) !important; }
[data-theme="light"] .roi-modal,
:root .roi-modal {
  background: var(--surface) !important;
  border-color: var(--gold-line) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .roi-modal-close,
:root .roi-modal-close { color: var(--muted) !important; }
[data-theme="light"] .roi-modal-close:hover,
:root .roi-modal-close:hover { color: var(--ink) !important; }
[data-theme="light"] .roi-modal-title,
:root .roi-modal-title { color: var(--ink) !important; }
[data-theme="light"] .roi-modal-p,
:root .roi-modal-p { color: var(--body) !important; }
[data-theme="light"] .roi-modal input[type="email"],
:root .roi-modal input[type="email"] {
  background: var(--input-bg) !important;
  border-color: var(--input-border) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .roi-modal input[type="email"]:focus,
:root .roi-modal input[type="email"]:focus { border-color: var(--gold-ink) !important; }
[data-theme="light"] .roi-modal-check label,
:root .roi-modal-check label { color: var(--body) !important; }
[data-theme="light"] .roi-modal-cancel,
:root .roi-modal-cancel {
  border-color: var(--border) !important;
  color: var(--muted) !important;
}
[data-theme="light"] .roi-modal-cancel:hover,
:root .roi-modal-cancel:hover {
  border-color: var(--input-border) !important;
  color: var(--ink) !important;
}
/* Modal send button : navy fixe sur or peu importe le thème */
[data-theme="light"] .roi-modal-send,
:root .roi-modal-send {
  background: var(--gold) !important;
  color: #08111C !important;
}

/* ═══════════════════════════════════════════════════════════════════
   DASHBOARD DIAGNOSTICS — page-dashboard-diagnostics.php (admin only)
   Classes réelles : .dashboard-container, .dashboard-header, .tab-button,
   .btn, .badge, .pagination, .bar, .donut, .modal, .tooltip
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] body.page-template-page-dashboard-diagnostics,
[data-theme="light"] .dashboard-container,
:root body.page-template-page-dashboard-diagnostics,
:root .dashboard-container {
  background-color: var(--bg) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .dashboard-header,
:root .dashboard-header {
  background: linear-gradient(135deg, var(--surface) 0%, var(--bg) 100%) !important;
  border-bottom-color: var(--gold-ink) !important;
}
[data-theme="light"] .dashboard-logo,
:root .dashboard-logo { color: var(--ink) !important; }
[data-theme="light"] .dashboard-logo span,
:root .dashboard-logo span { color: var(--gold-ink) !important; }
[data-theme="light"] .dashboard-header h1,
:root .dashboard-header h1 { color: var(--gold-ink) !important; }
[data-theme="light"] .dashboard-header p,
:root .dashboard-header p { color: var(--muted) !important; }

[data-theme="light"] .tabs,
:root .tabs { border-bottom-color: var(--gold-line) !important; }
[data-theme="light"] .tab-button,
:root .tab-button { color: var(--muted) !important; }
[data-theme="light"] .tab-button:hover,
[data-theme="light"] .tab-button.active,
:root .tab-button:hover,
:root .tab-button.active { color: var(--gold-ink) !important; }
[data-theme="light"] .tab-button.active,
:root .tab-button.active { border-bottom-color: var(--gold-ink) !important; }

[data-theme="light"] .btn,
:root .btn {
  background: var(--surface) !important;
  border-color: var(--border) !important;
  color: var(--ink) !important;
}
[data-theme="light"] .badge,
:root .badge {
  background: var(--gold-dim) !important;
  color: var(--gold-ink) !important;
}
[data-theme="light"] .modal,
:root .modal {
  background: var(--surface) !important;
  border-color: var(--gold-line) !important;
  box-shadow: var(--shadow) !important;
}
[data-theme="light"] .tooltip,
:root .tooltip {
  background: var(--ink) !important;
  color: var(--bg) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   THEME TOGGLE — bouton sun/moon dans la nav
   ═══════════════════════════════════════════════════════════════════ */

.theme-toggle {
  margin-left: 1rem;
  padding: 0;
  width: 44px;
  height: 44px;
  background: none;
  border: none;
  border-left: 1px solid var(--border);
  cursor: pointer;
  color: var(--muted);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: color 0.2s;
  flex-shrink: 0;
}
.theme-toggle:hover { color: var(--gold-ink); }
.theme-toggle:focus-visible {
  outline: 2px solid var(--gold-ink);
  outline-offset: 2px;
}
.theme-toggle svg {
  width: 18px;
  height: 18px;
  display: block;
}
.theme-icon-sun,
.theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }
:not([data-theme="dark"]) .theme-icon-moon,
[data-theme="light"] .theme-icon-moon { display: block; }

/* Variante mobile : compacte, à l'intérieur de la nav mobile */
.theme-toggle-mobile {
  background: none;
  border: 1px solid var(--border);
  border-radius: 4px;
  cursor: pointer;
  color: var(--muted);
  width: 32px;
  height: 32px;
  padding: 0;
  display: none;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: 0.5rem;
}
.theme-toggle-mobile:hover { color: var(--gold-ink); }
.theme-toggle-mobile svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 768px) { .theme-toggle-mobile { display: flex; } }

/* ═══════════════════════════════════════════════════════════════════
   FOOTER — surcharger les rgba en dur
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .f-links a,
:root .f-links a { color: var(--muted); }
[data-theme="light"] .f-links a:hover,
:root .f-links a:hover { color: var(--ink); }

/* ═══════════════════════════════════════════════════════════════════
   AJUSTEMENTS SPÉCIFIQUES LIGHT MODE
   ═══════════════════════════════════════════════════════════════════ */

/* Le hero-bg-line (ligne or verticale) doit rester visible en light */
[data-theme="light"] .hero-bg-line,
:root .hero-bg-line {
  background: linear-gradient(180deg, transparent, var(--gold-line) 30%, var(--gold-line) 70%, transparent);
  opacity: 0.7;
}

/* Le hero CTA primaire : texte navy lisible sur fond or */
[data-theme="light"] .cta-p,
[data-theme="light"] .diag-btn,
[data-theme="light"] .f-submit,
:root .cta-p,
:root .diag-btn,
:root .f-submit {
  color: #08111C !important;        /* navy ink fixe sur or, indép. du thème */
}

/* Hero divider et footer line restent gold */
[data-theme="light"] .hero-divider,
:root .hero-divider { background: var(--gold-ink); }

/* svc-grid : le séparateur 1px utilise --border, déjà tokénisé. */
/* phase-grid : idem. */
/* Tout le reste hérite des tokens redéfinis dans :root. */

/* ═══════════════════════════════════════════════════════════════════
   COOKIE BANNER — défini dans functions.php avec inline styles
   Ces inline styles ont specificity (1,0,0,0) — on doit utiliser !important
   ═══════════════════════════════════════════════════════════════════ */

[data-theme="light"] #vci-cookie-banner,
:root #vci-cookie-banner {
  background: var(--panel-bg) !important;
  border-top-color: var(--gold-line) !important;
  box-shadow: 0 -4px 16px rgba(13,30,46,0.06);
}
[data-theme="light"] #vci-cookie-banner p,
:root #vci-cookie-banner p {
  color: var(--body) !important;
}
[data-theme="light"] #vci-cookie-banner a,
:root #vci-cookie-banner a {
  color: var(--gold-ink) !important;
  border-bottom-color: var(--gold-line) !important;
}
[data-theme="light"] #vci-cookie-decline,
:root #vci-cookie-decline {
  color: var(--muted) !important;
  border-color: var(--border) !important;
  background: transparent !important;
}
[data-theme="light"] #vci-cookie-accept,
:root #vci-cookie-accept {
  color: var(--gold-ink) !important;
  background: var(--gold-dim) !important;
  border-color: var(--gold-line) !important;
}

[data-theme="dark"] #vci-cookie-banner {
  background: rgba(13,30,46,0.97) !important;
  border-top-color: rgba(200,169,110,0.28) !important;
  box-shadow: none;
}
[data-theme="dark"] #vci-cookie-banner p {
  color: rgba(255,255,255,0.62) !important;
}

/* ═══════════════════════════════════════════════════════════════════
   PAGES JURIDIQUES — page-confidentialite.php / page-privacy-policy-en.php
   Surcouches mineures (les fonds gold tintés fonctionnent dans les 2 modes
   mais on les normalise pour cohérence)
   ═══════════════════════════════════════════════════════════════════ */
[data-theme="light"] .pc-highlight,
:root .pc-highlight { background: var(--gold-dim); }
[data-theme="light"] .note-juridique,
:root .note-juridique { background: var(--gold-dim); }

/* ═══════════════════════════════════════════════════════════════════
   ACCESSIBILITY FIX v1.1 (2026-05-09)
   ═══════════════════════════════════════════════════════════════════
   Le diagnostic IA construit ses éléments en JavaScript avec inline
   style="color:#fff" / "color:rgba(255,255,255,X)" / "color:#C8A96E".
   Spécificité inline (1,0,0) > sélecteurs de classe simples.
   Solution : !important author CSS bat l'inline non-important.
   ═══════════════════════════════════════════════════════════════════ */

/* ─── Texte blanc inline dans les boutons type / option ────────────── */
[data-theme="light"] .dg-type-card span,
[data-theme="light"] .dg-opt-btn span,
[data-theme="light"] .dg-type-card div,
[data-theme="light"] .dg-opt-btn div {
  color: var(--ink) !important;
}

/* ─── Catch-all : tout texte inline blanc dans #vci-diag ───────────── */
/* Sauf .dg-score-badge dont le blanc sur niveau.color est sémantique  */
[data-theme="light"] #vci-diag span[style*="color:#fff"],
[data-theme="light"] #vci-diag span[style*="color: #fff"],
[data-theme="light"] #vci-diag div[style*="color:#fff"]:not(.dg-score-badge),
[data-theme="light"] #vci-diag div[style*="color: #fff"]:not(.dg-score-badge),
[data-theme="light"] #vci-diag p[style*="color:#fff"] {
  color: var(--ink) !important;
}

/* ─── Texte rgba(255,255,255,X) inline → body color en light ────────── */
[data-theme="light"] #vci-diag span[style*="color:rgba(255,255,255"],
[data-theme="light"] #vci-diag div[style*="color:rgba(255,255,255"],
[data-theme="light"] #vci-diag p[style*="color:rgba(255,255,255"],
[data-theme="light"] #vci-diag label[style*="color:rgba(255,255,255"] {
  color: var(--body) !important;
}

/* ─── Or inline #C8A96E illisible sur cream → bascule gold-ink ──────── */
[data-theme="light"] #vci-diag span[style*="color:#C8A96E"],
[data-theme="light"] #vci-diag div[style*="color:#C8A96E"],
[data-theme="light"] #vci-diag a[style*="color:#C8A96E"],
[data-theme="light"] #vci-diag p[style*="color:#C8A96E"] {
  color: var(--gold-ink) !important;
}
[data-theme="light"] #vci-diag a[style*="color:rgba(200,169,110"],
[data-theme="light"] #vci-diag span[style*="color:rgba(200,169,110"],
[data-theme="light"] #vci-diag div[style*="color:rgba(200,169,110"] {
  color: var(--gold-ink) !important;
}

/* ─── Couleur de fond inline rgba(255,255,255,X) → input-bg en light ── */
[data-theme="light"] #vci-diag [style*="background:rgba(255,255,255"],
[data-theme="light"] #vci-diag [style*="background: rgba(255,255,255"] {
  background: var(--input-bg) !important;
}
/* Exception : score badge garde son fond niveau.color (sémantique) */
[data-theme="light"] #vci-diag .dg-score-badge[style*="background"] {
  /* la couleur sémantique du niveau (vert/orange/rouge) doit s'appliquer */
}

/* ─── Border-color inline blanc → input-border en light ─────────────── */
[data-theme="light"] #vci-diag [style*="border-color:rgba(255,255,255"],
[data-theme="light"] #vci-diag [style*="border-color: rgba(255,255,255"] {
  border-color: var(--input-border) !important;
}

/* ─── Même traitement pour ROI IA (#vci-roi inline) ─────────────────── */
[data-theme="light"] #vci-roi span[style*="color:#fff"],
[data-theme="light"] #vci-roi div[style*="color:#fff"],
[data-theme="light"] #vci-roi p[style*="color:#fff"] {
  color: var(--ink) !important;
}
[data-theme="light"] #vci-roi span[style*="color:rgba(255,255,255"],
[data-theme="light"] #vci-roi div[style*="color:rgba(255,255,255"],
[data-theme="light"] #vci-roi p[style*="color:rgba(255,255,255"] {
  color: var(--body) !important;
}
[data-theme="light"] #vci-roi span[style*="color:#C8A96E"],
[data-theme="light"] #vci-roi div[style*="color:#C8A96E"] {
  color: var(--gold-ink) !important;
}

/* ─── Formulaires homepage : focus state visible en light ───────────── */
[data-theme="light"] .f-in:focus,
[data-theme="light"] .f-sel:focus,
[data-theme="light"] .f-ta:focus {
  border-color: var(--gold-line) !important;
  border-bottom-color: var(--gold-ink) !important;
  outline: none;
}

/* ─── Modal close button (X) en light ───────────────────────────────── */
[data-theme="light"] .dg-modal-close {
  color: var(--muted) !important;
}
[data-theme="light"] .dg-modal-close:hover {
  color: var(--ink) !important;
}