/* buttons.css — boutons sobres, capitales legerement espacees (brand.md §5).
   Parti pris "sobre & premium" : aplats unis (pas de degrade metallique ni de reflet anime),
   typographie discrete, survols retenus. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  min-height: 48px;
  padding: var(--space-md) var(--space-xl);
  font-size: var(--font-size-overline);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  transition: background-color var(--transition-base) var(--easing-standard),
              color var(--transition-base) var(--easing-standard),
              border-color var(--transition-base) var(--easing-standard),
              box-shadow var(--transition-base) var(--easing-standard);
  white-space: nowrap;
}

/* CTA principal : aplat noir sobre, sans lisere clinquant */
.btn--primary {
  background: var(--color-black);
  color: var(--color-white);
}

.btn--primary:hover,
.btn--primary:focus-visible {
  background: var(--color-charcoal);
}

/* CTA "or" : aplat dore uni (aucun degrade ni reflet), texte sombre, survol legerement assombri */
.btn--gold {
  background: var(--color-gold);
  color: var(--color-black);
  border-color: var(--color-gold);
}

.btn--gold:hover,
.btn--gold:focus-visible {
  background: var(--color-gold-dark);
  border-color: var(--color-gold-dark);
  color: var(--color-white);
}

/* Bouton "verre" pour fond photo : bordure fine, remplissage doux au survol */
.btn--glass {
  background: rgba(255, 255, 255, 0.08);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-color: rgba(255, 255, 255, 0.55);
  color: var(--color-white);
}

.btn--glass:hover,
.btn--glass:focus-visible {
  background: rgba(255, 255, 255, 0.16);
  border-color: var(--color-white);
}

.btn--secondary {
  background: var(--color-beige);
  color: var(--color-black);
}

.btn--secondary:hover,
.btn--secondary:focus-visible {
  background: var(--color-border);
}

/* Bouton contour : trait fin, remplissage sobre au survol */
.btn--outline {
  background: transparent;
  border-color: var(--color-charcoal);
  color: var(--color-black);
}

.btn--outline:hover,
.btn--outline:focus-visible {
  background: var(--color-black);
  border-color: var(--color-black);
  color: var(--color-white);
}

.section--dark .btn--outline {
  border-color: rgba(255, 255, 255, 0.45);
  color: var(--color-white);
}

.section--dark .btn--outline:hover,
.section--dark .btn--outline:focus-visible {
  background: var(--color-white);
  border-color: var(--color-white);
  color: var(--color-black);
}

.btn--block {
  display: flex;
  width: 100%;
}

.btn--link {
  min-height: 0;
  padding: 0;
  border: none;
  background: none;
  text-transform: none;
  letter-spacing: normal;
  font-weight: var(--font-weight-medium);
  color: var(--color-gold-dark);
  text-underline-offset: 3px;
}

.btn--link:hover,
.btn--link:focus-visible {
  text-decoration: underline;
}