/* Composant CTA — Figma « CTA » (01 · FONDATIONS & COMPOSANTS UI)
   Taille Desktop | Mobile × Type Primaire | Secondaire × État Défaut | Hover | Focus | Désactivé
   Hauteur fixe 60 px desktop / 52 px mobile (size/cta-*), padding horizontal 28 / 20, pilule, sans flèche. */

.cta {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: var(--cta-height);
  padding: 0 var(--cta-padding-x);
  border-radius: var(--radius-pill);
  font-size: var(--text-cta-size); line-height: var(--text-cta-lh); font-weight: var(--text-cta-weight);
  text-align: center; white-space: nowrap;
  border: var(--border-2) solid transparent;
  transition: background-color var(--transition), color var(--transition), border-color var(--transition), box-shadow var(--transition), transform var(--duration-press) var(--ease);
  cursor: pointer;
}

/* Primaire : fond rouge, texte blanc, bordure intérieure blanche 2 px ; au hover rouge et blanc s'inversent. */
.cta--primary {
  background: var(--brandt-red); color: var(--brandt-white);
  border-color: var(--brandt-white); /* bordure blanche 2 px au bord (visible sur fond rouge ou sombre) */
}
.cta--primary:hover { background: var(--brandt-white); color: var(--brandt-red); border-color: var(--brandt-red); }

/* Secondaire : transparent, texte et bordure carbone 2 px ; au hover le carbone passe au rouge. */
.cta--secondary { background: transparent; color: var(--brandt-carbon); border-color: var(--brandt-carbon); }
.cta--secondary:hover { color: var(--brandt-red); border-color: var(--brandt-red); }
.on-dark .cta--secondary, .on-photo .cta--secondary { color: var(--brandt-white); border-color: var(--brandt-white); }
.on-dark .cta--secondary:hover, .on-photo .cta--secondary:hover { color: var(--brandt-red); border-color: var(--brandt-red); background: var(--brandt-white); }

.cta:focus-visible { box-shadow: var(--focus-ring); }
.cta--primary:focus-visible { box-shadow: var(--focus-ring); }
.on-dark .cta:focus-visible, .on-photo .cta:focus-visible { box-shadow: var(--focus-ring-inverse); }

.cta:active { transform: scale(var(--press-scale)); }
.cta[disabled], .cta[aria-disabled="true"], .cta.is-disabled { opacity: var(--disabled-opacity); pointer-events: none; }

/* Pleine largeur (mobile : cartes, formulaires) */
.cta--block { display: flex; width: 100%; }
@media (min-width: 1024px) { .cta--block-mobile { display: inline-flex; width: auto; } }
@media (max-width: 1023px) { .cta--block-mobile { display: flex; width: 100%; } }

/* Bouton texte (lien d'action sans fond) — Figma « Bouton texte » */
.text-button {
  display: inline-flex; align-items: center; gap: var(--space-8);
  min-height: var(--size-target-44);
  font-size: var(--text-body-size); line-height: var(--text-body-lh); font-weight: var(--text-body-weight);
  color: var(--brandt-carbon); border-radius: var(--radius-12);
  transition: color var(--transition), transform var(--duration-press) var(--ease);
}
.text-button:hover { color: var(--brandt-red); }
.text-button:active { transform: scale(var(--press-scale)); }
.text-button[disabled], .text-button[aria-disabled="true"] { opacity: var(--disabled-opacity); pointer-events: none; }
.text-button--red { color: var(--brandt-red); }
.text-button--red:hover { color: var(--brandt-carbon); }