/*
 * Page /tarifs (App/Views/vitrine/tarifs.php), chargée après site.css et hero.css.
 * Formules en grille 2 × 2 dès 768 px (une colonne en dessous), cartes aérées. Ne modifie que la grille
 * et le rythme des cartes ; la bascule mensuel / annuel (CSS pur, site.css) et les contenus sont inchangés.
 */
.sx .sx-plans { grid-template-columns: minmax(0, 1fr); gap: 1.4rem; }
.sx .sx-plan { padding: 2rem 1.3rem 1.5rem; }
.sx-plan .sx-price-amount { white-space: nowrap; }
@media (min-width: 768px) {
    .sx .sx-plans { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.8rem; }
    .sx .sx-plan { padding: 2.4rem 2rem 2rem; }
    .sx-plan h3 { font-size: var(--sx-fs-32); }
    .sx-plan-aud { min-height: 0; font-size: var(--sx-fs-16); }
    .sx-plan .sx-price { padding: 1.1rem 0; margin-bottom: 1.3rem; }
    .sx-plan .sx-price-amount { font-size: var(--sx-fs-32); }
    .sx-plan .sx-check { font-size: var(--sx-fs-16); margin-bottom: 1.3rem; }
    .sx-plan .sx-check li + li { margin-top: .15rem; }
    .sx-plan-meta { margin-bottom: 1.6rem; }
}
@media (min-width: 1100px) {
    .sx .sx-plan { padding: 2.6rem 2.4rem 2.2rem; }
    .sx-plan .sx-price-amount { font-size: var(--sx-fs-32); }
    .sx-plan .sx-price-amount small { display: inline; margin: 0 0 0 .35rem; }
}

/* Mobile : liste des fonctionnalités repliée après 5 lignes (case à cocher, sans JavaScript). Dès 768 px tout est visible. */
.sx-more-t { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); }
.sx-more-l { display: none; }
@media (max-width: 767.98px) {
    .sx-plan .sx-more-t ~ .sx-check li:nth-child(n+6) { display: none; }
    .sx-plan .sx-more-t:checked ~ .sx-check li:nth-child(n+6) { display: flex; }
    .sx-more-l { display: inline-flex; align-items: center; min-height: 44px; margin: -.4rem 0 1rem; padding: 0 .2rem; color: var(--sx-action); font-weight: 600; font-size: var(--sx-fs-16); cursor: pointer; }
    .sx-more-l:hover { text-decoration: underline; }
    .sx-more-t:focus-visible ~ .sx-more-l { outline: 3px solid var(--sx-action); outline-offset: 2px; border-radius: var(--sx-r-sm); }
    .sx-more-off { display: none; }
    .sx-more-t:checked ~ .sx-more-l .sx-more-on { display: none; }
    .sx-more-t:checked ~ .sx-more-l .sx-more-off { display: inline; }
}