/* ===== DARK MODE ===== */

*, *::before, *::after {
  transition: background-color 0.35s ease, color 0.15s ease, border-color 0.35s ease;
}

html.dark-mode {
  --bg:    #181614;
  --black: #E8DFD0;
}

/* Navbar : reste toujours sombre, texte toujours clair */
html.dark-mode .navbar {
  background-color: #1F1F1F;
}
html.dark-mode .navbar p:not(.item-live),
html.dark-mode .navbar a,
html.dark-mode .nav-back,
html.dark-mode .nav-breadcrumb {
  color: #E8DFD0;
}
html.dark-mode .theme-toggle {
  color: #E8DFD0;
}

/* Overlay de verrouillage : texte et icône toujours clairs */
html.dark-mode .card-lock {
  background-color: rgba(24, 22, 20, 0.82);
}
html.dark-mode .lock-icon,
html.dark-mode .lock-title,
html.dark-mode .lock-sub {
  color: #E8DFD0;
}

/* Bulle BOB : fond sombre, texte clair */
html.dark-mode .bob-bubble {
  background-color: #1F1F1F;
  color: #E8DFD0;
}
html.dark-mode .bob-arrow {
  border-top-color: #1F1F1F;
}

/* Curseur typewriter */
html.dark-mode .type-cursor {
  background-color: #E8DFD0;
}

/* Blocs citation — restent toujours sombres */
html.dark-mode .axe-quote {
  background-color: #1F1F1F;
}
html.dark-mode .axe-quote p,
html.dark-mode .axe-quote cite {
  color: #E8DFD0;
}

/* Footer axe-nav — même traitement que le header */
html.dark-mode .axe-nav {
  background-color: #1F1F1F;
}
html.dark-mode .axe-nav a {
  color: #E8DFD0;
}

/* Section titre sombre (axe-header--dark) — reste noire */
html.dark-mode .axe-header--dark {
  background-color: #181614;
}
html.dark-mode .axe-header--dark h1,
html.dark-mode .axe-header--dark .axe-sep {
  color: #E8DFD0;
}

/* Blocs de réponse/conclusion — texte reste beige */
html.dark-mode .axe-conclusion .axe-text {
  color: #E8DFD0;
}

/* ===== TOGGLE BUTTON ===== */
.theme-toggle {
  position: relative;
  width: 44px;
  height: 24px;
  border-radius: 12px;
  background: rgba(255, 255, 255, 0.2);
  border: 1px solid rgba(255, 255, 255, 0.2);
  cursor: pointer;
  padding: 0;
  flex-shrink: 0;
  transition: background 0.35s ease, border-color 0.35s ease !important;
}

html.dark-mode .theme-toggle {
  background: rgba(255, 255, 255, 0.15);
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #E8DFD0;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.35s cubic-bezier(0.34, 1.4, 0.64, 1) !important;
  color: #1F1F1F;
}

html.dark-mode .toggle-thumb {
  transform: translateX(20px);
}

.toggle-thumb svg {
  width: 10px;
  height: 10px;
  display: block;
}

/* Icône selon le mode */
.toggle-thumb .icon-dark  { display: block; }
.toggle-thumb .icon-light { display: none;  }

html.dark-mode .toggle-thumb .icon-dark  { display: none;  }
html.dark-mode .toggle-thumb .icon-light { display: block; }