/* =============================================
   Block: Tableau de prix (modulo/pricing)
   Variables posées par PHP (vides = valeurs ci-dessous) :
   --_min largeur mini d'une carte · --_gap espacement · --_rows rangées
   partagées · --_nf fonctionnalités · --_bw bordure · --_r coins
   --_sh ombre · --_bg/--_tx cartes · --_bd bordures · --_ac couleur de
   l'offre mise en avant · --_bt texte du badge · --_ib « inclus partout »
   --_btn/--_btntx boutons · --_yes/--_no coches · --_tg bascule
   ============================================= */

.mt-price {
    --_line: var(--_bd, color-mix(in srgb, var(--mb-c-text) 14%, transparent));
    --_acc:  var(--_ac, var(--mb-c-accent));
    --_btnc: var(--_btn, var(--_acc));
    --_pad:  1.5rem;
    container-type: inline-size;
    color: var(--_tx, inherit);
}
.mt-price *, .mt-price *::before, .mt-price *::after { box-sizing: border-box; }
.mt-price [hidden] { display: none !important; }
.mt-price .screen-reader-text {
    position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px;
    overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ─── Bascule des périodes ─── */
.mt-price__periods { display: flex; justify-content: center; margin: 0 0 1.75rem; }
.mt-price__periods--left { justify-content: flex-start; }
.mt-price__switch {
    display: inline-flex;
    flex-wrap: wrap;
    gap: .25rem;
    padding: .3rem;
    border-radius: 999px;
    background: var(--_tg, color-mix(in srgb, var(--_acc) 14%, var(--mb-c-surface)));
}
.mt-price__period {
    margin: 0;
    padding: .55rem 1.15rem;
    border: 0;
    border-radius: 999px;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 600;
    line-height: 1.2;
    cursor: pointer;
}
.mt-price__period[aria-checked="true"] { background: var(--mb-c-text); color: var(--mb-c-surface); }
.mt-price__period:focus-visible { outline: 2px solid var(--_acc); outline-offset: 2px; }
.mt-price__save { margin-left: .3rem; font-size: .78em; font-weight: 500; opacity: .85; }

/* ─── Grille : rangées partagées entre les cartes (subgrid) ─── */
.mt-price__grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--_min, 240px)), 1fr));
    column-gap: var(--_gap, 24px);
    row-gap: 0;
}
.mt-price__grid:has(.mt-price__badge) { padding-top: .9rem; }

.mt-price__card {
    position: relative;
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--_rows, 9);
    row-gap: 0;
    min-width: 0;
    margin: 0 0 var(--_gap, 24px);
    padding: var(--_pad);
    background: var(--_bg, var(--mb-c-surface));
    border: var(--_bw, 1px) solid var(--_line);
    border-radius: var(--_r, var(--mb-r, 16px));
    box-shadow: var(--_sh, none);
}
@supports not (grid-template-rows: subgrid) {
    .mt-price__card { display: flex; flex-direction: column; }
    .mt-price__cta { margin-top: auto; }
}
.mt-price__card.is-featured {
    border-color: var(--_acc);
    border-width: max(var(--_bw, 1px), 2px);
}

/* ─── En-tête de carte ─── */
.mt-price__top { min-height: 0; }
.mt-price__badge {
    position: absolute;
    top: 0;
    left: var(--_pad);
    transform: translateY(-50%);
    padding: .3rem .8rem;
    border-radius: 999px;
    background: var(--_acc);
    color: var(--_bt, var(--mb-c-on-accent));
    font-size: .75rem;
    font-weight: 700;
    line-height: 1.2;
    white-space: nowrap;
}
.mt-price__eyebrow {
    margin: 0 0 .35rem;
    color: var(--_acc);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
}
.mt-price__name { margin: 0 0 .3rem; font-size: 1.3rem; line-height: 1.25; }
.mt-price__sub  { margin: 0 0 .9rem; color: var(--mb-c-muted); font-size: .9rem; }
.mt-price__sub:empty { margin: 0; }

.mt-price__taglist { display: flex; flex-wrap: wrap; gap: .4rem; margin: 0 0 1rem; padding: 0; list-style: none; }
.mt-price__taglist li {
    margin: 0;
    padding: .2rem .65rem;
    border: 1px solid color-mix(in srgb, var(--mb-c-text) 35%, transparent);
    border-radius: 999px;
    font-size: .75rem;
    line-height: 1.4;
}

/* ─── Prix ─── */
.mt-price__price { margin: .25rem 0 .2rem; }
.mt-price__amount {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0 .3rem;
    margin: 0;
    font-size: clamp(26px, calc(26px + 10 * ((100vw - 360px) / 840)), 36px); /* fluide : 36 px sur ordinateur → 26 px sur téléphone */
    font-weight: 700;
    line-height: 1.1;
}
.mt-price--price-normal .mt-price__amount { font-size: clamp(22px, calc(22px + 6 * ((100vw - 360px) / 840)), 28px); } /* 28 → 22 px */
.mt-price--price-xl .mt-price__amount { font-size: clamp(32px, calc(32px + 16 * ((100vw - 360px) / 840)), 48px); } /* 48 → 32 px */
.mt-price__val { white-space: nowrap; }
.mt-price__cur { font-size: .6em; }
.mt-price__text { font-size: .8em; }
.mt-price__suffix { color: var(--mb-c-muted); font-size: .95rem; font-weight: 400; }
.mt-price__old { margin-right: .2rem; color: var(--mb-c-muted); font-size: .5em; font-weight: 400; }
.mt-price__meta {
    display: flex;
    flex-direction: column;
    gap: .15rem;
    margin: 0 0 .9rem;
    color: var(--mb-c-muted);
    font-size: .85rem;
}
.mt-price__meta:has(> :not([hidden])) { margin-bottom: 1.1rem; }
.mt-price__saving { color: var(--mb-c-success); font-weight: 600; }

/* ─── Bouton ─── */
.mt-price__cta { margin: 0 0 1.25rem; }
.mt-price__cta:empty { margin: 0; }
.mt-price__btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    min-height: 2.75rem;
    padding: .65rem 1.25rem;
    border: 2px solid var(--_btnc);
    border-radius: 999px;
    background: transparent;
    color: var(--_btnc);
    font-weight: 600;
    line-height: 1.2;
    text-align: center;
    text-decoration: none;
    transition: background-color .15s, color .15s, filter .15s;
}
.mt-price__btn:hover,
.mt-price__btn:focus-visible { background: color-mix(in srgb, var(--_btnc) 10%, transparent); color: var(--_btnc); }
.mt-price--btn-fill .mt-price__btn,
.mt-price__card.is-featured .mt-price__btn { background: var(--_btnc); color: var(--_btntx, var(--mb-c-on-accent)); }
.mt-price--btn-fill .mt-price__btn:hover,
.mt-price__card.is-featured .mt-price__btn:hover,
.mt-price--btn-fill .mt-price__btn:focus-visible,
.mt-price__card.is-featured .mt-price__btn:focus-visible { background: var(--_btnc); color: var(--_btntx, var(--mb-c-on-accent)); filter: brightness(.92); }
.mt-price__btn:focus-visible { outline: 2px solid var(--_btnc); outline-offset: 2px; }

/* ─── Fonctionnalités : une rangée partagée par ligne ─── */
.mt-price__features {
    display: grid;
    grid-template-rows: subgrid;
    grid-row: span var(--_nf, 1);
    row-gap: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}
.mt-price--no-hide .mt-price__features { display: block; } /* ✗ retirées : liste compacte */
.mt-price__feat {
    position: relative;
    display: flex;
    align-items: flex-start;
    gap: .6rem;
    margin: 0;
    padding: .35rem 0;
    font-size: .95rem;
    line-height: 1.45;
}
.mt-price__ico { flex: none; width: 1.15em; height: 1.15em; margin-top: .15em; }
.mt-price__feat.is-yes .mt-price__ico { color: var(--_yes, var(--mb-c-success)); }
.mt-price__feat.is-no { color: color-mix(in srgb, currentColor 72%, transparent); } /* 72 % : contraste ≥ 4,5 sur fond clair */
.mt-price__feat.is-no .mt-price__ico { color: var(--_no, var(--mb-c-muted)); }
.mt-price__feat.is-none { padding-left: calc(1.15em + .6rem); }
.mt-price__ftext { min-width: 0; }
.mt-price__group {
    margin: 0;
    padding: .9rem 0 .25rem;
    color: var(--mb-c-muted);
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .06em;
    text-transform: uppercase;
}
.mt-price__features > :first-child.mt-price__group { padding-top: 0; }

/* Bulle d'aide « ? » */
.mt-price__help {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.1rem;
    height: 1.1rem;
    margin-left: .15rem;
    vertical-align: .1em;
    border: 1px solid currentColor;
    border-radius: 50%;
    font-size: .7rem;
    font-weight: 700;
    opacity: .6;
    cursor: help;
}
.mt-price__help:hover, .mt-price__help:focus-visible { opacity: 1; }
.mt-price__help::after {
    content: attr(data-tip);
    position: absolute;
    left: 0;
    right: 0;
    bottom: calc(100% + 4px);
    z-index: 5;
    padding: .5rem .7rem;
    border-radius: 8px;
    background: var(--mb-c-tip-bg);
    color: var(--mb-c-tip-text);
    font-size: .8rem;
    font-weight: 400;
    line-height: 1.4;
    opacity: 0;
    visibility: hidden;
    pointer-events: none;
    transition: opacity .15s;
}
.mt-price__help:hover::after, .mt-price__help:focus-visible::after { opacity: 1; visibility: visible; }

.mt-price__foot { margin: .75rem 0 0; color: var(--mb-c-muted); font-size: .8rem; }
.mt-price__foot:empty { margin: 0; }

/* « Voir toutes les fonctionnalités » (activé par view.js) */
.mt-price.has-more:not(.is-expanded) .is-extra { display: none; }
.mt-price__more-wrap { margin: 0 0 var(--_gap, 24px); text-align: center; }
.mt-price__more {
    padding: .4rem .2rem;
    border: 0;
    background: none;
    color: var(--_acc);
    font: inherit;
    font-weight: 600;
    text-decoration: underline;
    text-underline-offset: .2em;
    cursor: pointer;
}

/* ─── Case « Inclus dans toutes les offres » ─── */
.mt-price__card--included {
    display: flex;
    flex-direction: column;
    background: var(--_ib, var(--mb-c-surface-alt));
    border-color: transparent;
}
.mt-price__inc-title { margin: 0 0 .9rem; font-size: 1rem; line-height: 1.3; }
.mt-price__inc-list { margin: 0; padding: 0; list-style: none; }
.mt-price__inc-note { margin: auto 0 0; padding-top: 1rem; color: var(--mb-c-muted); font-size: .75rem; }

/* ─── Alignement centré ─── */
.mt-price--align-center .mt-price__card:not(.mt-price__card--included) > :not(.mt-price__features) { text-align: center; }
.mt-price--align-center .mt-price__badge { left: 50%; transform: translate(-50%, -50%); }
.mt-price--align-center .mt-price__taglist,
.mt-price--align-center .mt-price__amount { justify-content: center; }

/* ─── Mobile (selon la largeur du bloc, pas de l'écran) ─── */
@container (max-width: 599px) {
    .mt-price { --_pad: 1.25rem; }
    .mt-price--mobile-stack .mt-price__grid { grid-template-columns: minmax(0, 1fr); }
    .mt-price.is-featured-first .mt-price__card.is-featured { order: -1; }
    .mt-price__card--included { order: 1; }

    .mt-price--mobile-scroll .mt-price__grid {
        grid-template-columns: none;
        grid-auto-flow: column;
        grid-auto-columns: 85%;
        overflow-x: auto;
        overscroll-behavior-x: contain;
        scroll-snap-type: x mandatory;
        scroll-padding-inline: 0;
        padding-top: .9rem;
        scrollbar-width: thin;
    }
    .mt-price--mobile-scroll .mt-price__card { scroll-snap-align: start; }
    .mt-price--mobile-scroll .mt-price__card--included { order: 0; }
}