/* Mode nuit des pages du blog — mêmes teintes neutres que la page d'accueil.
   Le mode clair reste celui d'origine. */

body { transition: background-color .2s ease, color .2s ease; }

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b0b0b;
  --surface: #141414;
  --ink: #ededed;
  --text: #d4d4d4;
  --muted: #a1a1a1;
  --faint: #6b6b6b;
  --border: #262626;
  --border-strong: #363636;

  /* variables lues par les scripts des démos (valeurs claires en repli dans le JS) */
  --nn-bar-top: #ededed;
  --nn-bar: #4a4a4a;
  --nn-track: #1c1c1c;
  --nn-status: #a1a1a1;
  --nn-muted: #6b6b6b;
  --cw-query: #ededed;
  --cw-ring: #141414;
  --fm-point: rgba(237, 237, 237, 0.8);
  --fm-hist: #8a8a8a;
  --fm-axis: #333333;
  --fm-arrow: #ededed;
}

html[data-theme="dark"] body {
  background: var(--bg);
  color: var(--text);
}

html[data-theme="dark"] h1,
html[data-theme="dark"] h2,
html[data-theme="dark"] h3,
html[data-theme="dark"] strong { color: var(--ink); }

html[data-theme="dark"] a { color: var(--ink); text-decoration-color: var(--faint); text-underline-offset: 2px; }
html[data-theme="dark"] a:hover { text-decoration-color: var(--ink); }

html[data-theme="dark"] input[type=range] { accent-color: #cfcfcf; }

html[data-theme="dark"] button:not(.theme-toggle) {
  background: var(--surface);
  color: var(--ink);
  border: 1px solid var(--border-strong);
  border-radius: 6px;
}

html[data-theme="dark"] select {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border-strong);
}

/* --- Projections : boutons F, F_r, F_g, F_b --- */
html[data-theme="dark"] button.proj-btn { background: transparent; border-color: var(--border-strong); color: var(--text); }
html[data-theme="dark"] button.proj-btn.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* --- Rétropropagation : zone de dessin inversée (les pixels lus restent noir sur blanc) --- */
html[data-theme="dark"] #draw-canvas,
html[data-theme="dark"] #preview-canvas {
  filter: invert(0.957); /* blanc → #0b0b0b, le fond de la page */
  border-color: var(--border-strong) !important;
}

/* --- Naive Bayes --- */
html[data-theme="dark"] pre.pseudocode { background: var(--surface); border-color: var(--border); color: var(--text); }
html[data-theme="dark"] table.data-table thead th { border-bottom-color: var(--border-strong); }
html[data-theme="dark"] table.data-table tbody td { border-bottom-color: var(--border); }
html[data-theme="dark"] .nb-widget { background: var(--surface); border-color: var(--border); box-shadow: none; }
html[data-theme="dark"] #continuousWidget { background: transparent; }
html[data-theme="dark"] .nb-control label,
html[data-theme="dark"] .nb-group-caption,
html[data-theme="dark"] .nb-legend { color: var(--muted); }
html[data-theme="dark"] .nb-group-caption strong,
html[data-theme="dark"] .nb-prediction-text,
html[data-theme="dark"] .cw-square-label { color: var(--ink); }
html[data-theme="dark"] .nb-control select { background: var(--bg); }
html[data-theme="dark"] .nb-bars { border-bottom-color: var(--border); }
html[data-theme="dark"] .nb-prediction-bar { background: #1c1c1c; }
html[data-theme="dark"] .cw-canvas { background: var(--surface); }
html[data-theme="dark"] .cw-square--best { box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.08); }

/* --- Flow matching --- */
html[data-theme="dark"] #app,
html[data-theme="dark"] #histApp,
html[data-theme="dark"] #marginalApp { background: var(--surface); color: var(--text); }
html[data-theme="dark"] #cv,
html[data-theme="dark"] #cvMarginal { background: var(--bg); }
html[data-theme="dark"] .axisLabelX,
html[data-theme="dark"] .axisLabelY { color: var(--text); }
html[data-theme="dark"] #histApp .caption,
html[data-theme="dark"] #marginalApp .caption,
html[data-theme="dark"] .mono { color: var(--muted); }
html[data-theme="dark"] #playBtn { background: var(--ink); color: var(--bg); border: none; border-radius: 50%; }
html[data-theme="dark"] #tBadge { background: rgba(20, 20, 20, .85); color: var(--ink); border-color: var(--border); }