/** * Boutons flottants — Je m'inscris en bas, WhatsApp + Top au-dessus. */ :root { --fab-edge: 24px; --fab-gap: 12px; --fab-wa-size: 56px; --fab-inscrire-h: 48px; --fab-formations-bar: calc(4.75rem + env(safe-area-inset-bottom, 0px)); } /* --- Je m'inscris (directement sous ) --- */ .formation-float-inscrire { position: fixed; right: 28px; bottom: 28px; z-index: 10050; display: inline-flex !important; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.95rem 1.5rem; font-size: 1.05rem; font-weight: 800; text-decoration: none; color: #fff !important; background: linear-gradient(135deg, #0fa0d2 0%, #0075dc 55%, #0d2c54 100%) !important; border: none; border-radius: 999px; box-shadow: 0 12px 32px rgba(15, 160, 210, 0.45); opacity: 1 !important; visibility: visible !important; pointer-events: auto !important; transform: none !important; white-space: nowrap; } .formation-float-inscrire:hover, .formation-float-inscrire:focus { color: #fff !important; text-decoration: none; box-shadow: 0 14px 36px rgba(15, 160, 210, 0.55); } /* Mobile formations : barre pleine largeur */ @media (max-width: 767px) { body.page-formations .formation-float-inscrire { left: 0; right: 0; bottom: 0; width: 100%; max-width: 100%; border-radius: 0; padding: 1rem 1.25rem calc(1rem + env(safe-area-inset-bottom, 0px)); box-shadow: 0 -6px 24px rgba(13, 44, 84, 0.18); } body.page-formations .whatsapp-float-btn { left: var(--fab-edge); right: auto; bottom: var(--fab-formations-bar); } body.page-formations .scrollToTop.active { bottom: var(--fab-formations-bar) !important; right: var(--fab-edge); } body.page-formations .package-section.package-details { padding-bottom: calc(var(--fab-formations-bar) + var(--fab-wa-size) + 1.25rem); } } @media (min-width: 768px) { body.page-formations .package-section.package-details { padding-bottom: 2rem; } } /* --- WhatsApp --- */ .whatsapp-float-btn { position: fixed; bottom: var(--fab-edge); right: var(--fab-edge); width: var(--fab-wa-size); height: var(--fab-wa-size); background: #25d366; border-radius: 50%; display: flex; align-items: center; justify-content: center; box-shadow: 0 4px 16px rgba(37, 211, 102, 0.45); z-index: 10040; text-decoration: none; transition: transform 0.2s ease, box-shadow 0.2s ease; animation: pulse-wa 2s infinite; } .whatsapp-float-btn:hover { transform: scale(1.08); box-shadow: 0 6px 22px rgba(37, 211, 102, 0.65); } @keyframes pulse-wa { 0% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0.45); } 70% { box-shadow: 0 0 0 12px rgba(37, 211, 102, 0); } 100% { box-shadow: 0 0 0 0 rgba(37, 211, 102, 0); } } /* Desktop formations : WhatsApp + Top au-dessus de Je m'inscris */ @media (min-width: 768px) { body.page-formations .whatsapp-float-btn { bottom: calc(28px + var(--fab-inscrire-h) + var(--fab-gap)); right: 28px; } body.page-formations .scrollToTop.active { bottom: calc(28px + var(--fab-inscrire-h) + var(--fab-gap) + var(--fab-wa-size) + var(--fab-gap)) !important; right: 28px; transform: translateY(0); } } /* --- Scroll to top --- */ .scrollToTop { z-index: 10030; right: var(--fab-edge); min-width: 46px; } .scrollToTop.active { bottom: calc(var(--fab-edge) + var(--fab-wa-size) + var(--fab-gap)) !important; transform: translateY(0); } @media (max-width: 767px) { body:not(.page-formations) .scrollToTop.active { bottom: calc(var(--fab-edge) + var(--fab-wa-size) + var(--fab-gap)) !important; } }