/* ═══ MARCEL — LA FAMILLE BOUTON (Lot 2, audit du 22/08/2026) ═══
   Cinq rôles, une seule grammaire. Décision Guillaume du 22/08 :
   le primaire est un fond DOUX + texte accent — jamais un aplat plein
   (règle d'or n°1 de la charte du 30/05) — et il est toujours premier,
   en bas à gauche des cartes ; Écarter et le destructif partent à
   droite. Chargé juste après _tokens.css. */

.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px);
  background: var(--surface);
  color: var(--text);
  font-family: var(--font);
  font-size: var(--fs-ui, 13px);
  font-weight: 500;
  line-height: 1.25;
  cursor: pointer;
  transition: background .12s, border-color .12s, color .12s;
}
.btn:hover { border-color: var(--accent); color: var(--accent); }
.btn:disabled, .btn[disabled] { opacity: .5; cursor: default; }
.btn:disabled:hover, .btn[disabled]:hover {
  border-color: var(--border); color: var(--text);
}

/* Primaire — l'action attendue de la carte. UN SEUL par carte. */
.btn-primary {
  background: var(--accent-light);
  color: var(--accent);
  border-color: var(--accent-light);
  font-weight: 600;
}
.btn-primary:hover { background: #dfe4f1; border-color: var(--accent); color: var(--accent); }

/* Secondaire — les autres actions positives (= la base). */
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border); }

/* Discret — Écarter, Annuler, Passer. */
.btn-quiet { background: none; border-color: transparent; color: var(--text-muted); }
.btn-quiet:hover { background: transparent; border-color: transparent; color: var(--text); }

/* Destructif — Supprimer, Corbeille. Jamais un aplat rouge par défaut. */
.btn-danger {
  background: var(--surface);
  color: var(--danger);
  border-color: var(--danger-light, #fee2e2);
}
.btn-danger:hover { background: var(--danger); color: #fff; border-color: var(--danger); }

/* Report — Plus tard, En to-do. La seule autre couleur admise. */
.btn-later {
  background: var(--yellow-light);
  color: var(--yellow);
  border-color: var(--yellow-light);
  font-weight: 600;
}
.btn-later:hover { border-color: var(--yellow); }

/* La rangée d'actions d'une carte (position canonique — Lot 3). */
.card-actions {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--sp-2, 8px);
  margin-top: var(--sp-3, 12px);
}
.card-actions .to-right { margin-left: auto; }