/* =============================
   theme-toggle.css
   Bouton clair / sombre ultra-contemporain, robuste & mini
   ============================= */

/* UA Color Scheme */
:root { color-scheme: light dark; }

/* Variables globales */
:root {
  --toggle-size: 2.25rem;
  --toggle-size-sm: 1.65rem;
  --accent: var(--color-accent, #ff6600);
  --bg-light: var(--color-bg-light, #fff);
  --bg-dark:  var(--color-bg-dark, #000);
  --fg-light: var(--color-text-light, #111);
  --fg-dark:  var(--color-text-dark, #fff);
  --ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Alias dynamiques par thème */
body.light-mode {
  --toggle-bg: var(--bg-light);
  --toggle-fg: var(--fg-light);
}
body.dark-mode {
  --toggle-bg: var(--bg-dark);
  --toggle-fg: var(--fg-dark);
}

/* Container + fallback responsive */
.theme-toggle-container {
  container-type: inline-size;
  position: fixed;
  bottom: 0.7rem;
  left: 0.7rem;
  z-index: 2024;
  display: flex;
  align-items: center;
  padding: 0;
}

/* Mobile fallback */
@media (max-width: 600px) {
  .theme-toggle-container {
    bottom: 0.4rem;
    left: 0.4rem;
  }
  #theme-toggle {
    width: var(--toggle-size-sm);
    height: var(--toggle-size-sm);
    font-size: 1.08rem;
  }
}

/* Bouton glassmorphique mini */
#theme-toggle {
  width: var(--toggle-size);
  height: var(--toggle-size);
  background: var(--toggle-bg, #111);
  color: var(--toggle-fg, #fff);
  border: 1.5px solid var(--accent);
  border-radius: 50%;
  font-size: 1.18rem;
  display: grid;
  place-content: center;
  cursor: pointer;
  position: relative;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  background-clip: padding-box;
  box-shadow: 0 2px 10px rgba(0,0,0,0.14);
  transition:
    transform 0.2s var(--ease),
    background 0.3s,
    color 0.3s,
    box-shadow 0.3s;
  outline: none;
  user-select: none;
}

/* Font fallback moderne */
@supports (font-variation-settings: normal) {
  #theme-toggle {
    font-family: 'Inter var', 'Inter', sans-serif;
  }
}

/* Icône dynamique */
#theme-toggle[data-theme="dark"]::before { content: "🌙"; }
#theme-toggle[data-theme="light"]::before { content: "☀️"; }

/* Animation survol : desktop only */
@media (hover: hover) and (pointer: fine) {
  #theme-toggle:hover {
    transform: scale(1.14) rotate(9deg);
    box-shadow: 0 5px 22px rgba(0,0,0,0.21);
    background: linear-gradient(135deg, var(--toggle-bg) 72%, var(--accent) 100%);
    color: #fff;
  }
  #theme-toggle:active {
    transform: scale(0.94);
  }
}

/* Accessibilité */
#theme-toggle:focus-visible {
  outline: 2px dashed var(--accent);
  outline-offset: 2.5px;
  box-shadow: 0 0 0 2px rgba(255,102,0,0.17);
}

/* Fallback si pas de blur */
@supports not (backdrop-filter: blur(1px)) {
  #theme-toggle {
    background: rgba(255,102,0,0.09);
    box-shadow: 0 2px 8px rgba(255, 102, 0, 0.14);
  }
}