/* ------------------------------------------------------------
   buttons.css — principal / secondaire / tertiaire (lot 01)
   Référence : handoffs/01-composants/screenshots/02-boutons.png
   ------------------------------------------------------------ */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 52px;
  padding: 0 20px;
  border-radius: var(--r-xl);
  border: 0;
  font-family: var(--font-text);
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  cursor: pointer;
  text-decoration: none;
  transition: background .15s ease-out, border-color .15s ease-out, transform .15s ease-out;
}

.btn:active { transform: scale(.98); }

.btn-primary {
  background: var(--accent);
  color: var(--on-accent);
}
.btn-primary:active { background: var(--accent-pressed); }

.btn-secondary {
  background: transparent;
  color: var(--ink);
  border: 1.5px solid var(--ink);
}
.btn-secondary:active { background: var(--surface-2); }

.btn-tertiary {
  background: transparent;
  color: var(--accent);
  padding: 0 8px;
  height: 44px;
}
.btn-tertiary:active { background: var(--tint); }

.btn[disabled], .btn[aria-disabled="true"] {
  cursor: not-allowed;
  transform: none;
}
.btn-primary[disabled] {
  background: var(--disabled-bg);
  color: var(--disabled-fg);
  box-shadow: 0 0 0 1px var(--line);
}
.btn-secondary[disabled] {
  border-color: var(--line);
  color: var(--disabled-fg);
}
.btn-tertiary[disabled] { color: var(--disabled-fg); }

/* Supprimer : jamais un aplat rouge plein, pour ne pas paraître plus
   engageant que « Annuler » (lot 05). */
.btn-danger-soft { background: var(--error-bg); color: var(--error); }
.btn-tertiary.btn-danger-text { color: var(--error); }

/* Chargement : le libellé change, le bouton reste inerte (aria-busy). */
.btn[aria-busy="true"] { cursor: progress; }
.btn .btn-spinner {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: btn-spin .9s linear infinite;
  flex: none;
}

@media (prefers-reduced-motion: reduce) {
  .btn .btn-spinner { animation-duration: .001ms; }
}

@keyframes btn-spin {
  to { transform: rotate(360deg); }
}