/* ==========================================================================
   BOUTONS
   ==========================================================================
   Quatre variantes : primaire, secondaire, fantôme, danger.
   Deux tailles : normale et petite.
   Un état : chargement.

   Usage : <button class="bouton bouton--primaire">Enregistrer</button>
   ========================================================================== */

.bouton {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: var(--cible-tactile);
  padding: var(--space-2) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  /* Le libellé ne se coupe pas en deux lignes. */
  white-space: nowrap;
  transition: background-color var(--transition), border-color var(--transition),
    color var(--transition);
}

.bouton:disabled,
.bouton[aria-disabled="true"] {
  opacity: 0.5;
  cursor: not-allowed;
}

/* ---- Primaire : l'action principale. Une seule par écran. -------------- */
.bouton--primaire {
  background-color: var(--accent);
  color: var(--on-accent);
}

.bouton--primaire:hover:not(:disabled) {
  background-color: var(--accent-hover);
  color: var(--on-accent);
}

/* ---- Secondaire : les actions courantes. ------------------------------- */
.bouton--secondaire {
  background-color: var(--surface);
  border-color: var(--border-strong);
  color: var(--text);
}

.bouton--secondaire:hover:not(:disabled) {
  background-color: var(--surface-2);
  color: var(--text);
}

/* ---- Fantôme : les actions discrètes (annuler, modifier). -------------- */
.bouton--fantome {
  background-color: transparent;
  color: var(--text-muted);
}

.bouton--fantome:hover:not(:disabled) {
  background-color: var(--surface-2);
  color: var(--text);
}

/* ---- Danger : les actions destructrices. Toujours avec confirmation. --- */
.bouton--danger {
  background-color: transparent;
  border-color: var(--danger);
  color: var(--danger);
}

.bouton--danger:hover:not(:disabled) {
  background-color: var(--danger-soft);
  color: var(--danger);
}

/* ---- Taille petite : dans une liste, un fil de discussion. ------------- */
.bouton--petit {
  min-height: 32px;
  padding: var(--space-1) var(--space-3);
  font-size: var(--text-xs);
}

.bouton--petit .icone {
  width: 14px;
  height: 14px;
}

/* ---- Bouton qui n'est qu'une icône : il garde une cible tactile pleine. */
.bouton--icone {
  padding: var(--space-2);
  width: var(--cible-tactile);
}

/* ---- Pleine largeur : formulaire de connexion, mobile. ---------------- */
.bouton--pleine-largeur {
  width: 100%;
}

/* --------------------------------------------------------------------------
   État de chargement
   --------------------------------------------------------------------------
   On ajoute l'attribut data-chargement="true" : le libellé s'efface et une
   roue tourne à sa place. Le bouton garde sa taille, donc la page ne saute
   pas. L'attribut aria-busy prévient les lecteurs d'écran.
   -------------------------------------------------------------------------- */
.bouton[data-chargement="true"] {
  position: relative;
  color: transparent;
  pointer-events: none;
}

.bouton[data-chargement="true"] .icone {
  visibility: hidden;
}

.bouton[data-chargement="true"]::after {
  content: "";
  position: absolute;
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-radius: var(--radius-full);
  /* Le cercle est ouvert en haut : c'est ce qui rend la rotation visible. */
  border-top-color: transparent;
  animation: bouton-rotation 600ms linear infinite;
}

/* La roue reprend la couleur du texte de chaque variante. */
.bouton--primaire[data-chargement="true"]::after { border-color: var(--on-accent); border-top-color: transparent; }
.bouton--secondaire[data-chargement="true"]::after { border-color: var(--text-muted); border-top-color: transparent; }
.bouton--fantome[data-chargement="true"]::after { border-color: var(--text-muted); border-top-color: transparent; }
.bouton--danger[data-chargement="true"]::after { border-color: var(--danger); border-top-color: transparent; }

@keyframes bouton-rotation {
  to { transform: rotate(360deg); }
}

/* --------------------------------------------------------------------------
   Groupe de boutons alignés
   -------------------------------------------------------------------------- */
.boutons {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
}

/* Sur un écran étroit, les boutons d'un formulaire prennent toute la largeur. */
@media (max-width: 480px) {
  .boutons--empiles-mobile {
    flex-direction: column;
  }

  .boutons--empiles-mobile .bouton {
    width: 100%;
  }
}