.pricing-main {
  margin-top: 32px;
}

@media (max-width: 620px) {
  .pricing-main {
    margin-top: 24px;
  }
}

/*
 * Corrections d'aspect du 21/08/2026.
 *
 * Les trois cartes ont la même hauteur, imposée par la plus haute — celle de
 * Pro, qui porte un encadré supplémentaire. Une surcharge tardive avait
 * remplacé le `margin-top:auto` du bouton par une marge fixe : le contenu se
 * tassait en haut et laissait quatre cents pixels de blanc sous les deux
 * premières cartes. Le pied de carte reprend l'ancrage.
 */
.pricing-card-foot {
  margin-top: auto;
  padding-top: 26px;
}

.pricing-card-foot .pricing-cta {
  margin-top: 0;
}

/*
 * L'incitation à l'annuel appartient au bouton « Annuel ».
 *
 * Posée à côté du sélecteur, elle annonçait deux mois offerts pendant que
 * l'offre mensuelle était sélectionnée — une remise sur ce qu'on ne regardait
 * pas.
 */
.pricing-toggle button {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.pricing-toggle-gain {
  padding: 4px 8px;
  border-radius: 999px;
  color: #0755df;
  background: #eaf2ff;
  font-size: .68rem;
  font-weight: 850;
  letter-spacing: 0;
}

/*
 * Sur le bouton actif, la pastille garde un fond plein : blanche sur bleu,
 * un voile translucide n'atteignait que 3,8:1 pour un texte de onze pixels.
 */
.pricing-toggle button.is-active .pricing-toggle-gain {
  color: #0750d8;
  background: #fff;
}

/*
 * La carte recommandée doit se voir comme telle. Elle était la plus pâle des
 * trois, entre une carte blanche et une carte sombre : l'œil allait aux deux
 * extrêmes, et l'offre mise en avant se lisait en dernier.
 */
/*
 * La carte recommandée se distingue par sa bordure et son ombre, jamais par
 * un décalage vertical : les trois cartes s'alignent bloc par bloc, et la
 * relever la sortirait de cet alignement.
 */
.pricing-card.is-plus {
  border-color: #4a8cff;
  z-index: 1;
  box-shadow:
    0 0 0 1px rgba(74, 140, 255, .55),
    0 26px 70px rgba(17, 53, 108, .16);
}


@media (prefers-reduced-motion: reduce) {
  .pricing-card.is-plus,
  .pricing-card.is-plus:hover {
    transform: none;
  }
}

/*
 * Les encadrés de quota se distinguaient à peine du fond de leur carte.
 *
 * Écrit via la carte comme tout ce qui vise ces listes : `.pricing-card ul`
 * l'emporte sur la classe seule pour les marges, le rembourrage et les gaps,
 * et n'avoir qu'une seule forme de sélecteur évite d'avoir à se rappeler
 * lesquelles des propriétés tombent dans le piège.
 */
.pricing-card .pricing-quotas {
  border-color: #d7e5fb;
  background: #f2f7ff;
}

@media (max-width: 620px) {
  .pricing-toggle button {
    flex-direction: column;
    gap: 3px;
    padding-block: 7px;
  }
}

/*
 * Le quota des entraînements à venir était répété sur les trois lignes, et
 * chacune passait donc sur deux lignes : l'encadré pesait 274 px et imposait
 * aux deux autres cartes une hauteur qu'elles n'avaient pas de quoi remplir.
 * Il est énoncé une fois.
 */
.pricing-upcoming-note {
  margin: 13px 0 0;
  color: #a9bee2;
  font-size: .78rem;
  line-height: 1.4;
}

/*
 * Les marges des deux listes, et le mou placé une seule fois.
 *
 * `.pricing-card ul { margin: 0 }` l'emporte en spécificité (0-2-1) sur toutes
 * les règles écrites en `.pricing-quotas` ou `.pricing-features` (0-1-0) : les
 * marges annoncées plus haut dans la feuille n'ont jamais eu d'effet, et les
 * deux listes se touchaient. Il faut donc passer par la carte.
 *
 * Le mou va sous l'encadré de quotas plutôt que sous les fonctions : les trois
 * cartes ont la hauteur de la plus fournie, et les deux premières ont de quoi
 * flotter. Placé là, il sépare ce qu'on achète — le prix et le volume — de ce
 * qu'on obtient — les fonctions et le bouton.
 */
.pricing-card .pricing-features {
  margin: 26px 0 0;
}

/*
 * Les trois cartes s'alignent bloc par bloc.
 *
 * Chacune répartissait sa hauteur pour son propre compte : le prix, les
 * quotas et les fonctions commençaient à trois hauteurs différentes, et l'œil
 * ne pouvait comparer deux offres qu'en les cherchant. Les cartes deviennent
 * des sous-grilles de la grille des tarifs : chaque bloc occupe la même ligne
 * dans les trois, donc la même hauteur.
 *
 * La ligne des entraînements à venir reste vide dans les deux premières
 * cartes — c'est le prix de l'alignement, et il se lit comme une absence, ce
 * qu'il est.
 */
.pricing-grid {
  grid-template-rows: repeat(9, auto);
}

.pricing-card {
  display: grid;
  grid-row: span 9;
  grid-template-rows: subgrid;
  align-content: start;
}

.pricing-card-top { grid-row: 1; }
.pricing-intent { grid-row: 2; }
.pricing-price { grid-row: 3; }
.pricing-price-note { grid-row: 4; }
.pricing-card h3 { grid-row: 5; }
.pricing-card-copy { grid-row: 6; }
.pricing-card .pricing-quotas { grid-row: 7; margin: 22px 0 0; }
.pricing-card .pricing-features { grid-row: 8; }
.pricing-card-foot { grid-row: 9; margin-top: 0; }

/* Tous les chiffres de quota à la même taille, sur les trois cartes. */
.pricing-quotas li.is-headline strong,
.pricing-card .pricing-quotas strong {
  font-size: 1.7rem;
}

/*
 * Les bulles de quota respirent.
 *
 * Elles n'avaient aucun rembourrage : `.pricing-card ul { padding: 0 }`
 * l'emporte en spécificité (0-2-1) sur le `padding: 18px` écrit en
 * `.pricing-quotas` (0-1-0) — le même défaut que sur les marges. La bordure
 * collait donc au texte, et l'encadré paraissait tassé.
 */
.pricing-card .pricing-quotas {
  /*
   * Rembourrage vertical généreux, horizontal mesuré : la carte ne fait que
   * 381 px, et chaque pixel pris sur les côtés est repris au texte, qui passe
   * alors sur une ligne de plus. L'aération se gagne en hauteur.
   */
  padding: 22px 16px;
  border-radius: 20px;
  row-gap: 18px;
}

.pricing-card .pricing-quotas li {
  column-gap: 12px;
  align-items: center;
}

.pricing-card .pricing-quotas span {
  line-height: 1.45;
}

@media (max-width: 1080px) {
  .pricing-card .pricing-quotas {
    padding: 18px 13px;
    row-gap: 14px;
  }
}

/*
 * Un peu de largeur reprise sur les bords de la carte.
 *
 * Le rembourrage des bulles se paie sur la largeur du texte, qui passe alors
 * sur une ligne de plus. La carte en avait 42 px de chaque côté : trente-quatre
 * suffisent, et rendent trente-deux pixels aux libellés.
 */
.pricing-card {
  padding: clamp(24px, 3.2vw, 34px);
}