/* Tarifs : bascules mensuel / annuel et formules / tranches, en CSS pur (pages publiques et aperçu du portail). Variables --accent, --accent-ink, --line, --bg, --ink, --ink-soft de la page. */
/* ---- Tarifs : bascules mensuel / annuel et formules / tranches (en CSS, sans script) ---- */
.pricing-toggle { display: inline-flex; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px; gap: 2px; margin: 0 10px 14px 0; background: var(--bg); }
.pricing-toggle input, label.offer > input[type="radio"] { position: absolute; opacity: 0; width: 1px !important; height: 1px !important; }   /* masqués : sans largeur, ils élargissaient la page sur mobile */
.pricing-toggle label { padding: 6px 16px; border-radius: 999px; cursor: pointer; font-weight: 600; font-size: .9rem; }
.pricing-toggle label em { font-style: normal; font-size: .76rem; opacity: .85; }
.pricing-toggle input:checked + label { background: var(--accent); color: var(--accent-ink); }
.pricing-toggle input:focus-visible + label { outline: 3px solid var(--accent); outline-offset: 2px; }
.pricing .py, .picker .py { display: none; }
.pricing:has(input[id$="-by"]:checked) .pm, .picker:has(#pk-by:checked) .pm { display: none; }
.pricing:has(input[id$="-by"]:checked) p.py, .pricing:has(input[id$="-by"]:checked) a.py, .picker:has(#pk-by:checked) .py { display: block; }
.pricing:has(input[id$="-by"]:checked) a.py { display: inline-flex; }
.pricing:has(input[id$="-mp"]:checked) .plan-tier, .pricing:has(input[id$="-mt"]:checked) .plan-plan,
.picker:has(#pk-mp:checked) .offer-tier, .picker:has(#pk-mt:checked) .offer-plan { display: none; }
.plan .save, .offer .save { display: inline-block; background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); font-size: .74rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.plan .eb-was, .picker .eb-was { text-decoration: line-through; opacity: .6; font-weight: 400; font-size: .78em; margin-left: 4px; }
.plan h3 .eb-flag, .picker .offer strong .eb-flag { display: inline-block; vertical-align: middle; margin-left: 8px; background: var(--accent); color: var(--accent-ink, #fff); font-size: .68rem; font-weight: 700; padding: 1px 8px; border-radius: 999px; }
.plan-ai, .offer .lim.ai { font-size: .84rem; color: var(--accent, #b5502e); margin: 0 0 6px; line-height: 1.35; }
.plan-limit, .offer .lim { font-size: .86rem; font-weight: 600; color: var(--ink-soft); margin: 0 0 6px; }
.picker .op { display: block; font-weight: 600; color: var(--ink); }
.picker .op small { display: block; color: var(--ink-soft); font-size: .78rem; font-weight: 400; }
.picker .op.py { display: none; }
.picker .lim.py { display: none; }
.picker:has(#pk-by:checked) .op.py, .picker:has(#pk-by:checked) .lim.py { display: block; }
.picker:has(#pk-by:checked) .lim.pm { display: none; }