/* button.css — boutons d'action (primaire, secondaire, fantôme), tous états. */
.btn{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 48px;
  padding: 0 var(--space-6);
  font-family: var(--font-sans);
  font-size: var(--fs-small);
  font-weight: 600;
  letter-spacing: var(--ls-wide);
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  white-space: nowrap;
  transition: background-color var(--duration) var(--ease),
              border-color var(--duration) var(--ease),
              color var(--duration) var(--ease),
              opacity var(--duration) var(--ease);
}

.btn--primary{
  background: var(--color-ink);
  color: var(--color-white);
  border-color: var(--color-ink);
}
.btn--primary:hover{ background: #34302A; border-color: #34302A; }
.btn--primary:active{ background: var(--color-ink); opacity: .85; }
.btn--primary:disabled{ background: var(--color-gray-300); border-color: var(--color-gray-300); color: var(--color-ink-faint); cursor: not-allowed; }

.btn--accent{
  background: var(--color-accent);
  color: var(--color-white);
  border-color: var(--color-accent);
}
.btn--accent:hover{ background: var(--color-accent-dark); border-color: var(--color-accent-dark); }
.btn--accent:disabled{ background: var(--color-gray-300); border-color: var(--color-gray-300); color: var(--color-ink-faint); cursor: not-allowed; }

.btn--secondary{
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-ink);
}
.btn--secondary:hover{ background: var(--color-ink); color: var(--color-white); }

.btn--ghost{
  background: transparent;
  color: var(--color-ink);
  border-color: transparent;
  text-decoration: underline;
  text-underline-offset: 4px;
  text-transform: none;
  letter-spacing: normal;
  font-weight: 500;
  padding-inline: var(--space-2);
  min-height: 44px;
}
.btn--ghost:hover{ color: var(--color-accent-text); }

.btn--full{ width: 100%; }

.btn--sm{ min-height: 40px; padding-inline: var(--space-4); font-size: var(--fs-micro); }

.btn:focus-visible{ outline: 2px solid var(--color-ink); outline-offset: 3px; }