/* ── Boutons globaux ── */

.btn-primary,
.btn-outline {
  font-family: var(--font-display);
  text-transform: uppercase;
  text-decoration: none;
  border-radius: var(--radius-md);
  white-space: nowrap;
  display: inline-block;
  transition: background-color 0.2s, color 0.2s;
  cursor: pointer;
}

/* Bouton rempli — ex: Header */
.btn-primary {
  font-size: 30px;
  padding: 8px 24px;
  background-color: var(--color-blue);
  color: var(--color-bg);
  border: 1px solid var(--color-blue);
}

.btn-primary:hover {
  background-color: var(--color-bg);
  color: var(--color-blue);
  text-decoration: none;
}

/* Bouton contour — ex: Hero, CTA secondaire */
.btn-outline {
  font-size: 35px;
  padding: 10px 32px;
  background-color: transparent;
  color: var(--color-blue);
  border: 1px solid var(--color-blue);
}

.btn-outline:hover {
  background-color: var(--color-blue);
  color: var(--color-bg);
  text-decoration: none;
}