/* Page Tarifs — Crosstensor (refonte .ct-ui) */

/* ---- Contrôle segmenté générique (radios stylés en pilule) --------------
   Utilisé deux fois sur cette page : profil visiteur (pro/particulier) et
   fréquence de facturation (mensuel/annuel). Construit à partir de
   primitives déjà cataloguées (fieldset + input radio natifs), aucun bloc
   du catalogue ne correspond à ce composant — voir ECARTS.md. Sous le
   seuil des deux pages (docs/regles/contraintes-techniques.md) : reste en
   CSS local à cette page tant qu'un second usage ailleurs sur le site ne
   le justifie pas. */
.ct-segmented {
  display: inline-flex;
  gap: 3px;
  padding: 3px;
  border: 1px solid var(--ct-color-border-strong);
  border-radius: var(--ct-radius-pill);
  margin: 0;
}
.ct-segmented__option {
  position: relative;
  margin: 0;
}
.ct-segmented__option input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.ct-segmented__option span {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 0 var(--ct-space-lg);
  border-radius: var(--ct-radius-pill);
  font-size: var(--ct-font-size-sm);
  font-weight: var(--ct-font-weight-medium);
  color: var(--ct-color-text-light);
  transition: background-color var(--ct-transition-fast), color var(--ct-transition-fast);
}
.ct-segmented__option input:checked + span {
  background-color: var(--ct-color-secondary);
  color: var(--ct-color-on-secondary);
}
.ct-segmented__option input:focus-visible + span {
  outline: var(--ct-focus-width) solid var(--ct-color-secondary);
  outline-offset: var(--ct-focus-offset);
}
@media (prefers-reduced-motion: reduce) {
  .ct-segmented__option span { transition: none; }
}

/* Variante compacte : à l'intérieur de la carte de prix, à côté d'un
   montant déjà grand — la même cible tactile 44px serait disproportionnée. */
.ct-segmented--sm .ct-segmented__option span {
  min-height: 32px;
  padding: 0 var(--ct-space-md);
  font-size: var(--ct-font-size-xs);
}

/* Sélecteur de profil visiteur, au-dessus de la carte de prix */
.ct-cfg-profile {
  display: flex;
  justify-content: center;
  margin-bottom: var(--ct-space-lg);
}
/* Posé directement sur le fond sombre du hero (contrairement à la variante
   période, déjà dans la carte blanche) : fond clair pour ressortir plutôt
   que de se fondre dans le fond sombre (demande directe). Le texte non
   sélectionné (--ct-color-text-light) reste inchangé, déjà lisible sur
   fond blanc — seul le fond et la bordure du conteneur changent. */
.ct-cfg-profile .ct-segmented {
  background-color: var(--ct-color-bg-alt);
  border-color: transparent;
}

/* Fréquence de facturation, dans la carte, au-dessus du prix */
.ct-pricing-configurator__price-col {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--ct-space-sm);
}
.ct-cfg-period { margin: 0; }