/* ============================================================
   TARIFS — SMS BOOST Design System
   Tokens : css/ds-tokens.css | boutons partages :
   css/ds-components.css. Les deux sont scopes sur .sb-ds,
   classe portee par le conteneur .sb-tarifs.

   Les sections sortent du .container du theme pour permettre
   le fond pleine largeur du hero (voir tarifs.php).

   Deux tokens sont renommes dans ds-tokens.css pour ne pas
   entrer en collision avec design-system.css :
   --text-muted -> --sb-text-muted, --border-default -> --sb-border.
   ============================================================ */

.sb-tarifs {
    font-family: var(--font-sans);
    color: var(--text-body);
    background: var(--surface-page);
}

/* :not(.sb-btn) — sinon cette regle l'emporterait sur les skins
   de bouton et repeindrait leur texte en bleu. */
.sb-tarifs a:not(.sb-btn) {
    color: var(--text-link);
    text-decoration: none;
}

.sb-tarifs a:not(.sb-btn):hover {
    color: var(--blue-700);
    text-decoration: underline;
}

.sb-tarifs .sb-wrap {
    max-width: var(--container-max);
    margin: 0 auto;
    padding-left: 40px;
    padding-right: 40px;
}

.sb-tarifs .sb-section {
    padding-top: 96px;
}

.sb-tarifs .sb-section--last {
    padding-bottom: 96px;
}

.sb-tarifs .sb-head {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 60ch;
}

.sb-tarifs .sb-head__eyebrow {
    font: var(--font-eyebrow);
    text-transform: uppercase;
    letter-spacing: .08em;
    color: var(--color-primary);
}

.sb-tarifs .sb-head h2 {
    margin: 0;
    font: var(--font-h1);
    color: var(--text-strong);
    letter-spacing: -.02em;
}

/* ============================================================
   Hero
   ============================================================ */
.sb-tarifs__hero {
    background: var(--gradient-hero);
    padding: 72px 0 108px;
}

.sb-tarifs__hero-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.sb-tarifs__badge {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 7px 14px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .22);
    font: var(--font-label);
    color: var(--white);
}

.sb-tarifs__badge i {
    color: var(--color-accent-soft);
}

.sb-tarifs__hero h1 {
    margin: 0;
    font: var(--font-display-md);
    color: var(--white);
    letter-spacing: -.02em;
    max-width: 26ch;
    text-wrap: pretty;
}

.sb-tarifs__hero h1 span {
    color: var(--color-accent-soft);
}

.sb-tarifs__lede {
    margin: 0;
    font: var(--font-body-lg);
    color: rgba(255, 255, 255, .78);
    max-width: 56ch;
    text-wrap: pretty;
}

/* Bascule HT / TTC */
.sb-tarifs__toggle {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 6px;
    padding: 5px;
    border-radius: var(--radius-full);
    background: rgba(255, 255, 255, .10);
    border: 1px solid rgba(255, 255, 255, .18);
}

.sb-tarifs__toggle button {
    padding: 8px 18px;
    border: none;
    cursor: pointer;
    border-radius: var(--radius-full);
    font: var(--font-body);
    font-size: 14px;
    font-weight: var(--weight-semibold);
    transition: var(--transition-base);
    background: transparent;
    color: rgba(255, 255, 255, .75);
}

.sb-tarifs__toggle button:hover {
    color: var(--white);
}

.sb-tarifs__toggle button[aria-pressed="true"] {
    background: var(--white);
    color: var(--slate-900);
}

.sb-tarifs__toggle button:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

/* ============================================================
   Cartes de paliers — remontees sur le hero
   ============================================================ */
.sb-tarifs__plans {
    max-width: var(--container-max);
    margin: -72px auto 0;
    padding: 0 40px;
    position: relative;
    z-index: 5;
}

.sb-tarifs__grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    align-items: start;
}

/* Grilles a 4 paliers et plus : on repasse sur 4 colonnes */
.sb-tarifs__grid--4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.sb-tarifs__plan {
    border-radius: var(--radius-xl);
    border: 1px solid var(--sb-border);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    padding: 30px 28px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    position: relative;
    transition: var(--transition-base);
}

/* Palier correspondant au volume choisi dans le simulateur */
.sb-tarifs__plan.is-active {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-brand);
}

.sb-tarifs__flag {
    position: absolute;
    top: -13px;
    left: 28px;
    padding: 5px 14px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: var(--white);
    font: var(--font-caption);
    font-weight: var(--weight-bold);
    text-transform: uppercase;
    letter-spacing: .06em;
}

.sb-tarifs__plan-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}

.sb-tarifs__tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    border-radius: var(--radius-lg);
    font-size: 18px;
}

.sb-tarifs__tile--sky {
    background: var(--tile-sky-bg);
    color: var(--tile-sky-fg);
}

.sb-tarifs__tile--blue {
    background: var(--tile-blue-bg);
    color: var(--tile-blue-fg);
}

.sb-tarifs__tile--green {
    background: var(--tile-green-bg);
    color: var(--tile-green-fg);
}

.sb-tarifs__tile--amber {
    background: var(--tile-amber-bg);
    color: var(--tile-amber-fg);
}

.sb-tarifs__tile--violet {
    background: var(--tile-violet-bg);
    color: var(--tile-violet-fg);
}

.sb-tarifs__range {
    font: var(--font-caption);
    color: var(--sb-text-muted);
}

.sb-tarifs__plan-price {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.sb-tarifs__plan-price h2 {
    margin: 0;
    font: var(--font-h2);
    color: var(--text-strong);
}

.sb-tarifs__amount {
    display: flex;
    align-items: baseline;
    gap: 8px;
}

.sb-tarifs__amount strong {
    font: var(--font-display-md);
    color: var(--text-strong);
    white-space: nowrap;
    flex: none;
}

.sb-tarifs__plan--featured .sb-tarifs__amount strong {
    color: var(--color-primary);
}

.sb-tarifs__unit,
.sb-tarifs__pack {
    font: var(--font-caption);
    color: var(--sb-text-muted);
}

.sb-tarifs__perks {
    display: flex;
    flex-direction: column;
    gap: 11px;
    padding-top: 18px;
    border-top: 1px solid var(--sb-border);
    margin: 0;
    list-style: none;
}

.sb-tarifs__perks li {
    display: flex;
    gap: 10px;
    font: var(--font-body);
    font-size: 14px;
    color: var(--text-body);
}

.sb-tarifs__perks i {
    color: var(--green-600);
    margin-top: 3px;
}

/* La carte reste alignee meme si un palier a moins d'avantages */
.sb-tarifs__plan .sb-btn {
    margin-top: auto;
}

/* ============================================================
   Bandeau "tous les forfaits incluent"
   ============================================================ */
.sb-tarifs__included {
    margin-top: 20px;
    border-radius: var(--radius-xl);
    background: var(--gradient-cta);
    border: 1px solid var(--blue-200);
    padding: 22px 28px;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
}

.sb-tarifs__included > strong {
    font: var(--font-body);
    font-weight: var(--weight-semibold);
    color: var(--slate-800);
}

.sb-tarifs__included-list {
    display: flex;
    flex-wrap: wrap;
    gap: 26px;
}

.sb-tarifs__included-list span {
    display: flex;
    align-items: center;
    gap: 9px;
    font: var(--font-body);
    font-size: 14px;
    color: var(--slate-700);
}

.sb-tarifs__included-list i {
    color: var(--color-primary);
}

/* ============================================================
   Simulateur
   ============================================================ */
.sb-tarifs__card {
    margin-top: 32px;
    border-radius: var(--radius-2xl);
    border: 1px solid var(--sb-border);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    padding: 32px;
}

.sb-tarifs__sim {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 320px;
    gap: 48px;
    align-items: center;
}

.sb-tarifs__sim-left {
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.sb-tarifs__sim-legend {
    font: var(--font-label);
    color: var(--text-strong);
}

.sb-tarifs__volumes {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

.sb-tarifs__volumes button {
    padding: 10px 18px;
    border-radius: var(--radius-full);
    cursor: pointer;
    font: var(--font-body);
    font-weight: var(--weight-semibold);
    transition: var(--transition-base);
    background: var(--white);
    color: var(--text-body);
    border: 1px solid var(--sb-border);
}

.sb-tarifs__volumes button:hover {
    border-color: var(--border-strong);
}

.sb-tarifs__volumes button[aria-pressed="true"] {
    background: var(--color-primary);
    color: var(--text-on-brand);
    border-color: var(--color-primary);
}

.sb-tarifs__volumes button:focus-visible {
    outline: none;
    box-shadow: var(--ring-focus);
}

.sb-tarifs__figures {
    display: flex;
    flex-wrap: wrap;
    gap: 32px;
    padding-top: 18px;
    border-top: 1px solid var(--sb-border);
}

.sb-tarifs__figure {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.sb-tarifs__figure strong {
    font: var(--font-h2);
    color: var(--text-strong);
}

.sb-tarifs__figure--brand strong {
    color: var(--color-primary);
}

.sb-tarifs__figure span {
    font: var(--font-caption);
    color: var(--sb-text-muted);
}

.sb-tarifs__sim-aside {
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding: 24px;
    border-radius: var(--radius-xl);
    background: var(--gradient-cta);
}

.sb-tarifs__sim-aside strong {
    font: var(--font-body);
    font-weight: var(--weight-semibold);
    color: var(--slate-800);
}

.sb-tarifs__sim-aside span {
    font: var(--font-caption);
    color: var(--slate-600);
}

/* ============================================================
   FAQ
   ============================================================ */
.sb-tarifs__faq {
    display: grid;
    grid-template-columns: minmax(0, .8fr) minmax(0, 1.2fr);
    gap: 48px;
    align-items: start;
}

.sb-tarifs__faq-intro p {
    margin: 0;
    font: var(--font-body);
    color: var(--text-body);
}

.sb-tarifs__faq-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.sb-tarifs__faq-item {
    border-radius: var(--radius-xl);
    border: 1px solid var(--sb-border);
    background: var(--surface-card);
    box-shadow: var(--shadow-sm);
    padding: 20px;
}

.sb-tarifs__faq-item h3 {
    margin: 0 0 8px;
    font: var(--font-h3);
    color: var(--text-strong);
}

.sb-tarifs__faq-item p {
    margin: 0;
    font: var(--font-body);
    font-size: 14px;
    color: var(--text-body);
}

/* ============================================================
   CTA final
   ============================================================ */
.sb-tarifs__cta {
    border-radius: var(--radius-2xl);
    background: var(--gradient-cta);
    border: 1px solid var(--blue-200);
    padding: 56px 40px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 18px;
    text-align: center;
}

.sb-tarifs__cta h2 {
    margin: 0;
    font: var(--font-h1);
    color: var(--text-strong);
    letter-spacing: -.02em;
}

.sb-tarifs__cta p {
    margin: 0;
    font: var(--font-body-lg);
    color: var(--slate-600);
    max-width: 52ch;
}

.sb-tarifs__cta-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 14px;
    justify-content: center;
    margin-top: 6px;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 991.98px) {
    .sb-tarifs__grid,
    .sb-tarifs__grid--4 {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .sb-tarifs__sim {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .sb-tarifs__faq {
        grid-template-columns: minmax(0, 1fr);
        gap: 28px;
    }

    .sb-tarifs .sb-section {
        padding-top: 64px;
    }

    .sb-tarifs .sb-section--last {
        padding-bottom: 64px;
    }
}

@media (max-width: 639.98px) {
    .sb-tarifs .sb-wrap,
    .sb-tarifs__plans {
        padding-left: 20px;
        padding-right: 20px;
    }

    .sb-tarifs__hero {
        padding: 48px 0 92px;
    }

    .sb-tarifs__grid,
    .sb-tarifs__grid--4 {
        grid-template-columns: minmax(0, 1fr);
    }

    .sb-tarifs__included {
        flex-direction: column;
        align-items: flex-start;
    }

    .sb-tarifs__included-list {
        gap: 12px 20px;
    }

    .sb-tarifs__card {
        padding: 22px;
    }

    .sb-tarifs__cta {
        padding: 40px 22px;
    }
}