/* ============================================================
   PS — Boutons partagés (.ps-btn + variantes)
   Utilisé par tous les patterns (hero, services, CTA…).
   Tokens : assets/css/tokens.css (--ps-*)
   Variantes : --primary (rouge), --dark (noir), --secondary (blanc bordé).
   Modifieur : --sm (14px, padding réduit).
   ============================================================ */

.ps-btn {
  display: inline-flex;
  align-items: center;
  gap: var(--ps-spacing-10);
  padding: var(--ps-spacing-19) var(--ps-spacing-33);
  font-family: var(--ps-font-family-brand);
  font-weight: var(--ps-font-weight-medium);
  font-size: var(--ps-font-size-16);
  line-height: 1;
  text-transform: uppercase;
  text-decoration: none;
  border: 1px solid transparent;
  border-radius: var(--ps-radius-button-pill);
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.ps-btn__icon {
  flex-shrink: 0;
}

/* Primaire — rouge (CTA hero) */
.ps-btn--primary {
  background-color: var(--ps-color-action-primary);
  border-color: var(--ps-color-action-primary);
  color: var(--ps-color-action-primary-fg);
}
.ps-btn--primary:hover,
.ps-btn--primary:focus-visible {
  background-color: var(--ps-color-action-primary-hover);
  border-color: var(--ps-color-action-primary-hover);
}

/* Dark — noir plein (CTA carte mise en avant) */
.ps-btn--dark {
  background-color: var(--ps-color-black);
  border-color: var(--ps-color-black);
  color: var(--ps-color-white);
}
.ps-btn--dark:hover,
.ps-btn--dark:focus-visible {
  background-color: var(--ps-color-neutral-900);
  border-color: var(--ps-color-neutral-900);
}

/* Secondary — blanc bordé noir (CTA cartes secondaires) */
.ps-btn--secondary {
  background-color: var(--ps-color-white);
  border-color: var(--ps-color-black);
  color: var(--ps-color-black);
}
.ps-btn--secondary:hover,
.ps-btn--secondary:focus-visible {
  background-color: var(--ps-color-black);
  border-color: var(--ps-color-black);
  color: var(--ps-color-white);
}

/* Outline light — transparent bordé blanc (CTA secondaire sur fond sombre) */
.ps-btn--outline-light {
  background-color: transparent;
  border-color: var(--ps-color-white);
  color: var(--ps-color-white);
}
.ps-btn--outline-light:hover,
.ps-btn--outline-light:focus-visible {
  background-color: var(--ps-color-white);
  border-color: var(--ps-color-white);
  color: var(--ps-color-black);
}

/* Taille réduite (cartes) */
.ps-btn--sm {
  padding: var(--ps-spacing-19) var(--ps-spacing-32);
  font-size: var(--ps-font-size-14);
}