/*
 * Onglet Parametres > Abonnement : l'etat, le selecteur de periodicite et les
 * deux cartes d'offre.
 *
 * Ces classes vivent ici et non en utilitaires Tailwind parce que `app.css` est
 * un Tailwind **compile** que le depot ne sait pas regenerer : une utilitaire
 * absente du fichier n'a aucun effet, et personne ne le voit avant l'ecran.
 * Tout ce qui suit s'ecrit donc avec les jetons de `tokens.css`.
 *
 * L'echelle d'espacement est celle de 8 px (0,5rem / 1rem / 1,5rem) : deux
 * cartes de meme largeur ne se lisent comme une grille que si leurs rythmes
 * interieurs sont les memes.
 */

.ui-abonnement {
  display: grid;
  gap: 1.5rem;
}

/* Cette feuille est chargee apres `app.css` : sans cette regle plus specifique,
   le `display: grid` ci-dessus battrait le `.hidden` de Tailwind et l'onglet
   resterait visible sous les quatre autres. Meme raison que `.ui-button.hidden`. */
.ui-abonnement.hidden {
  display: none;
}

.ui-abonnement__panne {
  padding: 0.75rem 1rem;
  border: 1px solid var(--ui-danger);
  border-radius: var(--ui-radius-md);
  background: var(--ui-danger-soft);
  color: var(--ui-text);
  font-size: 0.75rem;
  line-height: 1.5;
}

.ui-abonnement__panne-titre {
  font-weight: 680;
}

.ui-abonnement__etat {
  display: grid;
  gap: 0.5rem;
}

.ui-abonnement__entete {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.75rem;
}

.ui-abonnement__titre {
  color: var(--ui-text);
  font-size: 1.125rem;
  font-weight: 680;
  letter-spacing: -0.01em;
}

.ui-abonnement__phrase {
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ui-abonnement__actions {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  padding-top: 0.5rem;
}

/* La barre au-dessus des cartes : le choix de periodicite a gauche, la mention
   fiscale a droite quand la largeur le permet. */
.ui-abonnement__barre {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.ui-abonnement__mention {
  color: var(--ui-text-soft);
  font-size: 0.75rem;
  line-height: 1.5;
}

.ui-segmented {
  display: inline-flex;
  padding: 0.25rem;
  gap: 0.25rem;
  border: 1px solid var(--ui-border);
  border-radius: 999px;
  background: var(--ui-surface-muted);
}

.ui-segmented__option {
  display: inline-flex;
  min-height: 2.25rem;
  align-items: center;
  gap: 0.5rem;
  padding: 0.4rem 1rem;
  border-radius: 999px;
  color: var(--ui-text-muted);
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 640;
  transition:
    background-color var(--ui-duration-fast) var(--ui-easing),
    color var(--ui-duration-fast) var(--ui-easing);
}

.ui-segmented__option:hover {
  color: var(--ui-text);
}

.ui-segmented__option[aria-pressed="true"] {
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
  color: var(--ui-text);
}

.ui-segmented__option:focus-visible {
  outline: 3px solid rgb(41 77 74 / 18%);
  outline-offset: 2px;
}

/* La pastille « 2 mois offerts » prend le ton chaud de la marque, mais dans sa
   valeur sombre : l'accent (--ui-accent) sur fond clair ne passe pas le
   contraste d'un texte de cette taille. Il reste au bord de la carte. */
.ui-segmented__note {
  padding: 0.1rem 0.45rem;
  border-radius: 999px;
  background: var(--ui-accent-soft);
  color: var(--ui-warning);
  font-size: 0.6875rem;
  font-weight: 700;
  /* Sur un telephone, les deux options se partagent la largeur : sans ceci,
     « 2 mois offerts » passe a la ligne et fait grandir tout le controle. */
  white-space: nowrap;
}

/* Trois offres souscriptibles depuis le 02/10/2026 : trois colonnes quand la
   place le permet, sinon les cartes passent a la ligne a largeur egale. */
.ui-offres {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr));
  gap: 1rem;
}

@media (max-width: 720px) {
  .ui-offres {
    grid-template-columns: 1fr;
  }

  .ui-abonnement__barre {
    align-items: flex-start;
  }

  .ui-segmented {
    width: 100%;
  }

  .ui-segmented__option {
    flex: 1;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.4rem 0.5rem;
  }
}

.ui-offre {
  display: flex;
  flex-direction: column;
  gap: 1rem;
  padding: 1.5rem;
  border: 1px solid var(--ui-border);
  border-radius: var(--ui-radius-lg);
  background: var(--ui-surface);
  box-shadow: var(--ui-shadow-xs);
}

.ui-offre--recommandee {
  border-color: var(--ui-accent);
  box-shadow: var(--ui-shadow-sm);
}

.ui-offre--courante {
  border-color: var(--ui-success);
}

/* `?offre=pro` : la page Tarifs designe une offre. Une mise en avant, pas un
   choix — un halo, jamais un second bord qui concurrencerait « Recommandé ». */
.ui-offre--demandee {
  box-shadow: 0 0 0 3px var(--ui-primary-soft);
}

.ui-offre__entete {
  display: flex;
  min-height: 1.75rem;
  align-items: center;
  justify-content: space-between;
  gap: 0.5rem;
}

.ui-offre__nom {
  color: var(--ui-text);
  font-size: 1rem;
  font-weight: 680;
}

.ui-offre__accroche {
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.ui-offre__tarif {
  display: grid;
  gap: 0.25rem;
}

.ui-offre__prix {
  display: flex;
  align-items: baseline;
  gap: 0.4rem;
}

.ui-offre__montant {
  color: var(--ui-text);
  font-size: 1.75rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ui-offre__unite {
  color: var(--ui-text-muted);
  font-size: 0.8125rem;
  font-weight: 620;
}

.ui-offre__equivalent {
  color: var(--ui-text-soft);
  font-size: 0.75rem;
}

.ui-offre__equivalent.hidden {
  display: none;
}

.ui-offre__utilisateurs {
  color: var(--ui-text-muted);
  font-size: 0.75rem;
  font-weight: 620;
}

.ui-offre__inclus {
  display: grid;
  gap: 0.5rem;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ui-offre__inclus li {
  position: relative;
  padding-left: 1.5rem;
  color: var(--ui-text);
  font-size: 0.8125rem;
  line-height: 1.45;
}

/* La coche est dessinee, pas ecrite : un caractere « ✓ » change de chasse et de
   hauteur d'une police systeme a l'autre, et les puces cessent d'etre alignees. */
.ui-offre__inclus li::before {
  content: "";
  position: absolute;
  top: 0.2rem;
  left: 0.25rem;
  width: 0.3rem;
  height: 0.6rem;
  border: solid var(--ui-primary);
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

/* `margin-top: auto` aligne les boutons des deux cartes sur la meme ligne, quel
   que soit le nombre de fonctions listees au-dessus. */
.ui-offre__action {
  margin-top: auto;
}

.ui-offre__action:empty {
  display: none;
}

.ui-offre__form .ui-button {
  width: 100%;
}

.ui-abonnement__actions .ui-offre__form .ui-button {
  width: auto;
}

/* Le bloc « Utilisateurs » (lot B2, 02/10/2026) : les places de l'offre et le
   formulaire des utilisateurs supplementaires, sous les cartes. */
.ui-abonnement__utilisateurs {
  display: grid;
  gap: 0.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--ui-border);
}

.ui-abonnement__sous-titre {
  color: var(--ui-text);
  font-size: 0.9375rem;
  font-weight: 680;
}

.ui-abonnement__utilisateurs-form {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 0.75rem;
  max-width: 28rem;
}

.ui-abonnement__utilisateurs-form .ui-field {
  flex: 1 1 12rem;
}