/* ============================================================
   COMPONENTS — Boutons
   Envie Couture
   ============================================================ */

/* ---- Boutons ---------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .5rem;
  font-weight: 600;
  font-size: var(--fs-sm);
  letter-spacing: .02em;
  padding: .75rem 1.75rem;
  border-radius: var(--radius);
  transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
  cursor: pointer;
}

.btn:hover  { transform: translateY(-2px); }
.btn:active { transform: translateY(0); }

.btn--primary {
  background: var(--color-accent);
  color: var(--color-white);
}
.btn--primary:hover {
  background: var(--color-accent-d);
  box-shadow: var(--shadow-md);
}

.btn--outline {
  border: 1.5px solid var(--color-accent);
  color: var(--color-accent);
}
.btn--outline:hover {
  background: var(--color-accent);
  color: var(--color-white);
}

.btn--ghost {
  color: var(--color-text);
  border: 1.5px solid var(--color-border);
}
.btn--ghost:hover { border-color: var(--color-text); }

.btn--lg {
  padding: 1rem 2.25rem;
  font-size: var(--fs-base);
}

@media (max-width: 480px) {
  .btn { justify-content: center; }
}