/* Effet « fireworks » pour boutons CTA — classe .cta-fx (voir cta-fx.js).
   CC-CTA-FX-02 : moteur Web Animations API (spec cta-bubbles) — le CSS ne
   porte que le rendu des étincelles, la couche body et le flottement survol. */

.cta-fx { position: relative; overflow: visible; }

/* conteneur des étincelles de survol, DANS le bouton */
.pw__sparks {
  position: absolute; inset: 0;
  pointer-events: none; overflow: visible; z-index: 2;
}

/* couche de gerbe (clic) — fixée au body : survit aux re-rendus DOM.
   CC-CTA-FX-02b : AU-DESSUS de tout (la modale print est à 10000 — la gerbe
   passait derrière l'overlay ouvert par le clic lui-même) */
.pw__burst {
  position: fixed; inset: 0; z-index: 100000;
  pointer-events: none; overflow: visible;
}

/* l'étincelle : point lumineux coloré par --pc (palette --c1..--c9) */
.pw__spark {
  position: absolute; left: 0; top: 0; width: 3px; height: 3px; border-radius: var(--radius-circle);
  background: var(--pc, var(--surface)); opacity: 0; pointer-events: none; will-change: transform, opacity;
  box-shadow: 0 0 5px 1px color-mix(in srgb, var(--pc, var(--surface)) 50%, transparent),
              0 0 2px 0 color-mix(in srgb, var(--pc, var(--surface)) 80%, transparent);
}

/* survol : le bouton FLOTTE + léger éclat (spec pw-cta-float 2.6s) */
.cta-fx.is-hover {
  animation: pw-cta-float 2.6s ease-in-out infinite;
  filter: brightness(1.025) saturate(1.03);
  box-shadow: var(--shadow-cta-hover);
}
@keyframes pw-cta-float {
  0%, 100% { transform: none; }
  50% { transform: translateY(-3px) scale(1.02); }
}

/* accessibilité (spec) : reduced-motion neutralise le flottement CSS
   uniquement — les particules JS restent */
@media (prefers-reduced-motion: reduce) {
  .cta-fx.is-hover { animation: none; }
}

/* #1154 : chrome CTA marque (sheen + violet + pilule) — une source.
   Padding, largeur, hover et ombre restent locaux.
   Frontières : /share (.sh-cta*) et topnav (.topnav-export). */
.login-btn,
.iv-btn,
.print-modal-btn--primary,
.ob-form button.ob-next,
.ob-form button.ob-submit,
.ob-form button[type="submit"],
.pbtn-primary,
.pd-acc-invite,
.pr-pay-submit {
  background: var(--cta-sheen), var(--colo-fresh);
  color: var(--surface);
  border-radius: var(--radius-full);
}