Page de tarification avec toggle mensuel/annuel et cards comparatives.
Le knob glisse avec un cubic-bezier elastique et le fond passe en violet. Le feedback immediat confirme le changement de periode et incite a choisir l'annuel.
transition: all 0.3s cubic-bezier(0.68, -0.55, 0.27, 1.55) Explorer Boutons →Les cartes "montent" avec une ombre profonde au survol. L'utilisateur percoit immediatement quel plan il explore, ce qui facilite la comparaison et la decision.
transform: translateY(-12px) + box-shadow: 0 30px 60px Explorer Hover & Interactions →La carte recommandee est legerement plus grande que les autres, creant un ancrage visuel naturel. La bordure violet guide le choix sans forcer — le plan "Pro" attire l'oeil en premier.
transform: scale(1.05) + border-color: var(--primary) Explorer Cartes →L'animation pulse attire l'attention sur l'economie realisee. Un pattern psychologique efficace pour inciter le choix annuel en rendant la promotion visible en permanence.
animation: pulse 2s infinite + transform: scale(1.05) Explorer Utilitaires →Le max-height anime cree une transition fluide qui evite le "saut" brutal. L'icone + tourne de 45deg, confirmant visuellement l'etat ouvert/ferme de chaque question.
max-height: 0 to 200px + transition: all 0.3s ease Explorer Transitions →L'explosion de confettis recompense visuellement le clic sur "Start Free Trial". Ce micro-moment de joie reduit l'anxiete de conversion et cree un souvenir positif.
animation: confettiFall 3s ease-out forwards (JS DOM) Explorer Atmosphere →Le gradient radial violet derriere le titre cree une profondeur visuelle et met en valeur le texte "transparent pricing". L'effet est subtil mais donne un aspect premium.
radial-gradient(circle, rgba(99,102,241,0.15), transparent) Explorer Backgrounds →