/* =============================================================================
   BUTTONS.CSS – Styles de boutons globaux (Nettoyé le 2025-07-09)
   -----------------------------------------------------------------------------
   • Conventions Bootstrap-like : .btn-primary, .btn-outline, .btn-secondary…
   • Utilisation exclusive des variables CSS (pas de couleurs codées en dur)
   • Compatible dark mode, focus visible, hover & responsive
   ============================================================================ */

/* ---------------------------------------------------------------------------
   0 · VARIABLES DÉRIVÉES (définies ici pour buttons.css)
   ------------------------------------------------------------------------ */
:root {
  --primary-dark: color-mix(in srgb, var(--primary) 80%, black 20%);
  --secondary-dark: color-mix(in srgb, var(--secondary) 80%, black 20%);
  --accent: #A78BFA;       /* purple-400 pour Light Mode */
  --toggle-text: #F3E8FF;  /* violet-50 pour Light Mode */
}

html.dark {
  --accent: #60A5FA;       /* sky-400 pour Dark Mode */
  --toggle-text: #1E3A8A;  /* indigo-900 pour Dark Mode */
}

/* ---------------------------------------------------------------------------
   1 · BASE BUTTON
   ------------------------------------------------------------------------ */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.375rem;
  padding: 0.55em 1.2em;
  font: 600 1rem/1.25 Inter, Arial, sans-serif;
  border-radius: 8px;
  border: 2px solid transparent;
  background: transparent;
  color: var(--text-color);
  text-decoration: none;
  cursor: pointer;
  transition: background 0.2s, color 0.2s, box-shadow 0.2s, transform 0.15s;
  box-shadow: 0 2px 8px rgb(0 0 0 / 0.06);
}

.btn:hover,
.btn:focus {
  transform: translateY(-1px) scale(1.03);
  box-shadow: 0 4px 16px rgb(0 0 0 / 0.10);
}

/* Focus visible unifié pour tous les boutons */
.btn:focus-visible,
.btn-theme-toggle:focus-visible {
  outline: 2px solid var(--primary-dark);
  outline-offset: 3px;
}

/* ---------------------------------------------------------------------------
   2 · VARIANTES COULEUR
   ------------------------------------------------------------------------ */
.btn-primary {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary);
}
.btn-primary:hover,
.btn-primary:focus {
  background: var(--primary-dark);
  border-color: var(--primary-dark);
}

.btn-outline {
  background: transparent;
  color: var(--primary);
  border-color: var(--primary);
}
.btn-outline:hover,
.btn-outline:focus {
  background: var(--primary);
  color: #fff;
  border-color: var(--primary-dark);
}

.btn-secondary {
  background: var(--secondary);
  color: #fff;
  border-color: var(--secondary);
}
.btn-secondary:hover,
.btn-secondary:focus {
  background: var(--secondary-dark);
  border-color: var(--secondary-dark);
}

.btn-danger {
  background: var(--danger);
  color: #fff;
  border-color: var(--danger);
}
.btn-danger:hover,
.btn-danger:focus {
  background: color-mix(in srgb, var(--danger) 80%, black 20%);
  border-color: color-mix(in srgb, var(--danger) 80%, black 20%);
}

.btn-success {
  background: var(--success);
  color: #fff;
  border-color: var(--success);
}
.btn-success:hover,
.btn-success:focus {
  background: color-mix(in srgb, var(--success) 80%, black 20%);
  border-color: color-mix(in srgb, var(--success) 80%, black 20%);
}

.btn-warning {
  background: var(--warning);
  color: #000;
  border-color: var(--warning);
}
.btn-warning:hover,
.btn-warning:focus {
  background: color-mix(in srgb, var(--warning) 80%, black 20%);
  border-color: color-mix(in srgb, var(--warning) 80%, black 20%);
}

.btn-info {
  background: var(--info);
  color: #fff;
  border-color: var(--info);
}
.btn-info:hover,
.btn-info:focus {
  background: color-mix(in srgb, var(--info) 80%, black 20%);
  border-color: color-mix(in srgb, var(--info) 80%, black 20%);
}

.btn-accent {
  background: var(--accent);
  color: #fff;
  border-color: var(--accent);
}
.btn-accent:hover,
.btn-accent:focus {
  background: color-mix(in srgb, var(--accent) 80%, black 20%);
  border-color: color-mix(in srgb, var(--accent) 80%, black 20%);
}

/* =============================================================================
   2.1 · TOGGLE THEME BUTTON
   ============================================================================ */
.btn-theme-toggle {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: none;
  padding: 0;
  cursor: pointer;
  text-decoration: none;
}

.toggle-switch {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0 8px;        /* espace intérieur */
  min-width: 80px;        /* adapté au texte “Dark”/“Light” */
  height: 28px;
  background: var(--accent);
  border-radius: 999px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  transition: background 0.3s, color 0.3s;
}

/* ========== Ajustement du padding pour le texte ========== */
.toggle-switch {
  /* on garde le padding horizontal de base (8px) */
  padding: 0 8px;
  /* on pousse le texte vers la droite en light mode */
  /* circle = 24px, margin interne 2px => total 26px */
  padding-left: calc(8px + 26px);
}

html.dark .toggle-switch {
  /* en dark mode, on pousse le texte vers la gauche */
  padding-left: 8px;
  padding-right: calc(8px + 26px);
}

.theme-label {
  flex: 1;                   /* occupe l’espace restant */
  text-align: center;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--toggle-text);
  user-select: none;
}

.toggle-circle {
  width: 24px;
  height: 24px;
  background: #fff;
  border-radius: 50%;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: left 0.3s;
  box-shadow: 0 1px 4px rgba(0,0,0,0.3);
}

html.dark .toggle-circle {
  left: calc(100% - 26px);  /* 100% - (diamètre + 2px padding) */
}

/* ---------------------------------------------------------------------------
   3 · ÉTATS & MODIFIERS
   ------------------------------------------------------------------------ */
.btn-disabled,
.btn[disabled] {
  background: #e5e5e5 !important;
  color: #999 !important;
  border-color: #ddd !important;
  cursor: not-allowed;
  opacity: 0.65;
  pointer-events: none;
  box-shadow: none !important;
  transform: none !important;
}

.btn-sm {
  font-size: 0.875rem;
  padding: 0.4em 1em;
}

.btn-lg {
  font-size: 1.125rem;
  padding: 0.7em 1.6em;
}

/* ---------------------------------------------------------------------------
   4 · DARK THEME (variantes spécifiques)
   ------------------------------------------------------------------------ */
html.dark .btn-outline {
  color: var(--primary);
  border-color: var(--primary);
}

html.dark .btn-primary,
html.dark .btn-secondary {
  color: #fff;
}