/* ============================================================================
 * darkmode.css — minimal.
 *
 * En light : aucune règle dark active (poids quasi nul, perf SEO préservée).
 * En dark  : DarkReader (lazy-loaded) gère TOUTES les couleurs du document.
 *            Ce fichier ne contient qu'un fallback anti-flash (fond sombre
 *            posé immédiatement avant le chargement de DarkReader) et les
 *            styles du bouton toggle.
 * ============================================================================ */

/* ---------- Bouton toggle (toujours visible) ---------- */
.darkmode-toggle-wrap {
  display: inline-flex;
  align-items: center;
  margin-left: 12px;
}
.darkmode-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 4px;
  cursor: pointer;
  line-height: 1;
}
.darkmode-toggle:focus { outline: 2px solid #24b9d7; outline-offset: 2px; }
.darkmode-toggle-track {
  position: relative;
  display: inline-block;
  width: 44px;
  height: 22px;
  border-radius: 22px;
  background: #d6d8db;
  transition: background 0.2s ease;
}
.darkmode-toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 2px rgba(0,0,0,0.25);
  transition: transform 0.2s ease, background 0.2s ease;
}
.darkmode-toggle-icon {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  line-height: 1;
  pointer-events: none;
}
.darkmode-toggle-icon--sun  { left: 4px; color: #f5a623; }
.darkmode-toggle-icon--moon { right: 4px; color: #6c757d; }
.darkmode-toggle[aria-pressed="true"] .darkmode-toggle-track { background: #4dd0e8; }
.darkmode-toggle[aria-pressed="true"] .darkmode-toggle-thumb { transform: translateX(22px); background: #232730; }
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}

/* ============================================================================
 * Fallback anti-flash : si .theme-dark est posé par l'inline displayHeader
 * AVANT que DarkReader ne soit chargé, on évite le flash blanc en posant
 * un fond/texte sombres provisoires. DarkReader prend ensuite le relais et
 * surcharge proprement chaque composant.
 * ============================================================================ */
html.theme-dark,
html.theme-dark body {
  background-color: #1a1d21;
  color: #e8eaed;
}