/* ── Bascule Mensuel / Annuel des pages prix (FR, EN, ES) ──────────────
   Annuel : prix mensuel barré, équivalent mensuel en gros, total facturé par an
   écrit juste dessous. Les deux versions sont dans le HTML ;
   html[data-billing="annual"] (posé dans la page, vue par défaut) choisit
   laquelle s'affiche. */

.billing-toggle {
  display: flex; align-items: center; gap: 4px;
  width: fit-content;
  margin: 8px auto 12px;
  padding: 4px;
  background: #fff;
  border: 1px solid rgba(74, 30, 107, 0.18);
  border-radius: 100px;
}
.billing-toggle button {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0;
  padding: 9px 18px;
  border-radius: 100px;
  font-family: 'Inter', sans-serif;
  font-size: 14px; font-weight: 600;
  color: #4A1E6B;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}
.billing-toggle button:hover:not([aria-pressed="true"]) { background: rgba(74, 30, 107, 0.08); }
.billing-toggle button[aria-pressed="true"] { background: #4A1E6B; color: #F4EDDB; }
.billing-toggle button:focus-visible { outline: 2px solid #4A1E6B; outline-offset: 2px; }
.billing-toggle .billing-save {
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.02em;
  padding: 3px 8px; border-radius: 100px;
  background: #F2DFA0; color: #2A1206;
}

/* Une seule des deux versions visible à la fois */
.bill-y { display: none !important; }
html[data-billing="annual"] .bill-m { display: none !important; }
html[data-billing="annual"] .plan-price.bill-y { display: flex !important; }
html[data-billing="annual"] .price-was.bill-y,
html[data-billing="annual"] .price-cta-note.bill-y,
html[data-billing="annual"] .price-billed.bill-y,
html[data-billing="annual"] .billing-intro.bill-y { display: block !important; }
html[data-billing="annual"] span.bill-y { display: inline !important; }

/* Ligne « prix barré + mois offerts » au-dessus du prix annuel */
.price-was {
  font-family: 'Inter', sans-serif;
  font-size: 15px; font-weight: 500;
  color: #5E4A6E;
  margin: -6px 0 8px;
  min-height: 22px;
  line-height: 22px;
}
.price-was s { text-decoration-thickness: 1.5px; margin-right: 8px; }
.price-was .price-save {
  display: inline-block;
  font-size: 11px; font-weight: 700;
  letter-spacing: 0.04em; text-transform: uppercase;
  padding: 2px 9px; border-radius: 100px;
  background: #F2DFA0; color: #2A1206;
  line-height: 18px; vertical-align: 1px;
}
.price-billed {
  font-family: 'Inter', sans-serif;
  font-size: 13px; font-weight: 600;
  color: #5E4A6E;
  margin: 8px 0 0;
  min-height: 18px;
}
.plan-hero .price-billed,
.plan-elite .price-billed { color: rgba(244, 237, 219, 0.85); }
.plan-entreprise .price-billed { color: transparent; }
.plan-hero .price-was,
.plan-elite .price-was { color: rgba(244, 237, 219, 0.85); }

@media (max-width: 480px) {
  .billing-toggle button { padding: 8px 13px; font-size: 13px; gap: 6px; }
  .billing-toggle .billing-save { font-size: 10px; padding: 2px 6px; }
}