Bouton de Thème

<div class="theme-toggle">
  <button id="theme-toggle-btn" class="theme-btn" aria-label="Basculer le thème">
    <i class='bx bx-sun' id="sun-icon"></i>
    <i class='bx bx-moon' id="moon-icon"></i>
  </button>
</div>

/* Bouton de thème glassmorphism */
.theme-toggle {
  display: flex;
  align-items: center;
}

.theme-btn {
  background: #334155;
  border: 1px solid #475569;
  border-radius: 50%;
  padding: 12px;
  color: #f8fafc;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
  width: 48px;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: center;
}

body[data-theme="light"] .theme-btn {
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #0f172a;
}

.theme-btn:hover {
  background: #475569;
  border-color: #6366f1;
  transform: scale(1.1) rotate(180deg);
  box-shadow: 0 8px 25px rgba(99, 102, 241, 0.2);
}

body[data-theme="light"] .theme-btn:hover {
  background: #e2e8f0;
  border-color: #6366f1;
}

/* Icônes de thème */
#sun-icon {
  display: none;
  font-size: 1.2rem;
}

#moon-icon {
  display: block;
  font-size: 1.2rem;
}

body[data-theme="light"] #sun-icon {
  display: block;
}

body[data-theme="light"] #moon-icon {
  display: none;
}

// Gestionnaire de thème
class ThemeManager {
  constructor() {
    this.currentTheme = 'dark';
    this.init();
  }

  init() {
    this.loadSavedTheme();
    this.setupThemeToggle();
  }

  setupThemeToggle() {
    const themeBtn = document.getElementById('theme-toggle-btn');
    if (themeBtn) {
      themeBtn.addEventListener('click', () => this.toggleTheme());
    }
  }

  loadSavedTheme() {
    const savedTheme = localStorage.getItem('extrizy-theme');
    if (savedTheme) {
      this.setTheme(savedTheme);
    } else {
      this.setTheme('dark');
    }
  }

  setTheme(theme) {
    this.currentTheme = theme;
    document.body.setAttribute('data-theme', theme);
    localStorage.setItem('extrizy-theme', theme);
    this.updateThemeIcons();
  }

  toggleTheme() {
    const newTheme = this.currentTheme === 'dark' ? 'light' : 'dark';
    this.setTheme(newTheme);
  }

  updateThemeIcons() {
    const sunIcon = document.getElementById('sun-icon');
    const moonIcon = document.getElementById('moon-icon');
    
    if (sunIcon && moonIcon) {
      if (this.currentTheme === 'dark') {
        sunIcon.style.display = 'none';
        moonIcon.style.display = 'block';
      } else {
        sunIcon.style.display = 'block';
        moonIcon.style.display = 'none';
      }
    }
  }
}

// Initialiser le gestionnaire de thème
document.addEventListener('DOMContentLoaded', function() {
  new ThemeManager();
});