/* ==========================================================================
   Button (.btn) — Atom de base pour les actions interactives

   Copie de la bibliothèque dev-project-suite, adaptée au style « Encre,
   signature vermillon » (projet/design/) : pastilles de 99 px, gras 700,
   aucune ombre ni translation au survol, aucune couleur d'accent — l'action
   principale et l'action destructive sont toutes deux à l'encre pleine.

   Structure BEM :
   - .btn                    → Bloc racine (bouton), 44 px de haut
   - .btn__icon              → Élément icône (SVG en currentColor, trait 2 px)
   - .btn__label             → Élément texte/label
   - .btn--primary           → Encre pleine, filet 2 px (Continuer, Enregistrer, Supprimer)
   - .btn--secondary         → Surface, filet encre 1,5 px (Aujourd'hui, Voir)
   - .btn--quiet             → Surface, filet line 1,5 px (Annuler, Retour)
   - .btn--danger            → Alias de primary : pas de rouge dans le style
   - .btn--ghost             → Sans fond ni filet
   - .btn--link              → Texte souligné, gras, sans fond (Tout marquer comme vu)
   - .btn--sm                → 36 px (segments, petites actions)
   - .btn--md                → 48 px (barre du bas, actions de feuille)
   - .btn--lg                → 52 px (action principale d'un écran)
   - .btn--block             → Pleine largeur
   - .btn--with-icon         → Modificateur avec icône
   - [disabled]              → État désactivé
   - [aria-pressed="true"]   → Bouton bascule enfoncé (encre pleine)

   Usage :
   <button class="btn btn--primary btn--lg">Créer le planning</button>
   <button class="btn btn--quiet btn--md">Annuler</button>
   ========================================================================== */

/* --------------------------------------------------------------------------
   BASE — Bouton fondamental
   -------------------------------------------------------------------------- */

.btn {
  /* Layout */
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);

  /* Box model */
  box-sizing: border-box;
  min-height: var(--tap-min);
  padding: 0 14px;
  border: var(--border-control) solid transparent;
  border-radius: var(--radius-full);

  /* Typography */
  font-family: var(--font-body);
  font-size: var(--font-size-md);
  font-weight: var(--font-weight-bold);
  line-height: 1.2;
  text-decoration: none;
  white-space: nowrap;

  /* Visual */
  background-color: transparent;
  color: var(--color-text);
  cursor: pointer;
  transition: background-color var(--transition-fast), border-color var(--transition-fast), color var(--transition-fast);

  /* Defensive */
  min-width: 0;
  max-width: 100%;
}

/* --------------------------------------------------------------------------
   VARIANTES
   -------------------------------------------------------------------------- */

/* Primary (action principale) — et danger : la suppression se confirme dans
   la feuille, son bouton est à l'encre comme toute action principale */
.btn--primary,
.btn--danger {
  background-color: var(--color-primary);
  color: var(--color-text-inverse);
  border: var(--border-strong) solid var(--color-primary);
}

.btn--primary:hover,
.btn--danger:hover {
  background-color: var(--color-primary-hover);
  border-color: var(--color-primary-hover);
}

/* Secondary (contour encre) */
.btn--secondary {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border-strong);
}

/* Quiet (contour discret) */
.btn--quiet {
  background-color: var(--color-surface);
  color: var(--color-text);
  border-color: var(--color-border);
}

.btn--secondary:hover,
.btn--quiet:hover,
.btn--ghost:hover {
  background-color: var(--color-surface-hover);
}

.btn--quiet:hover {
  border-color: var(--color-border-hover);
}

/* Ghost (sans fond) */
.btn--ghost {
  border-color: transparent;
}

/* Link (action tertiaire) */
.btn--link {
  padding: 0 10px;
  border-color: transparent;
  font-size: 0.875rem; /* 14 px dans les maquettes */
  text-decoration: underline;
  text-underline-offset: 3px;
}

.btn--link:hover {
  text-decoration-thickness: 2px;
}

/* --------------------------------------------------------------------------
   TAILLES
   -------------------------------------------------------------------------- */

.btn--sm {
  min-height: var(--control-height-sm);
  padding: 0 14px;
  font-size: 0.875rem;
}

.btn--md {
  min-height: var(--control-height);
  padding: 0 16px;
}

.btn--lg {
  min-height: var(--control-height-lg);
  padding: 0 20px;
  font-size: var(--font-size-base);
}

.btn--block {
  display: flex;
  width: 100%;
}

/* --------------------------------------------------------------------------
   AVEC ICÔNE
   -------------------------------------------------------------------------- */

.btn--with-icon .btn__icon,
.btn__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}

.btn__icon svg {
  width: 16px;
  height: 16px;
}

/* --------------------------------------------------------------------------
   ÉTATS
   -------------------------------------------------------------------------- */

/* Focus visible (accessibilité WCAG) : anneau encre, décalé pour rester
   lisible sur un bouton déjà à l'encre */
.btn:focus-visible {
  outline: var(--focus-ring-width) solid var(--color-focus);
  outline-offset: var(--focus-ring-offset);
}

.btn[disabled],
.btn--disabled {
  opacity: 0.5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Bouton bascule enfoncé (segments Mois / Année, Clair / Sombre / Système) */
.btn[aria-pressed="true"] {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: var(--color-text-inverse);
}

.btn[data-tooltip] {
  position: relative;
}