Agis comme un développeur web expert en HTML et CSS, spécialisé dans Systeme.io.

Je veux créer un bouton WhatsApp flottant professionnel, avec une bulle de contact animée qui apparaît au survol de la souris.

Le résultat doit respecter précisément les caractéristiques suivantes.

1. Bouton WhatsApp

• Bouton rond de 48 × 48 px, fixé en bas à droite de l'écran, à 24 px des bords.

• Fond vert WhatsApp #25D366.

• Bordure blanche de 3 px.

• Icône WhatsApp blanche en SVG, centrée, de 27 × 27 px.

• Ombre légère.

• Au survol, le bouton s'agrandit légèrement (scale 1.08).

• Le bouton reste fixe pendant le défilement de la page.

2. Bulle de contact animée

Lorsque le visiteur survole le bouton WhatsApp, une bulle horizontale apparaît immédiatement à sa gauche.

Cette bulle doit contenir, dans cet ordre :

• À gauche : un titre en gras « Une question ? », en blanc, taille 14 px.

• Juste en dessous : un sous-titre personnalisable, en blanc, taille 12 px.

• À droite : une photo de profil ronde de 46 × 46 px.

Design de la bulle :

• Fond de la couleur de ma charte graphique.

• Forme de pilule avec des coins arrondis de 35 px.

• Espacement de 12 px entre le texte et la photo.

• Ombre douce.

• La bulle doit se placer derrière le bouton WhatsApp, avec un léger chevauchement.

• Aucun triangle, aucune flèche, aucun cadre supplémentaire.

Animation :

• La bulle est totalement invisible au départ.

• Au survol du bouton, elle apparaît progressivement avec un léger glissement horizontal.

• Durée de l'animation : 0,25 seconde.

• Lorsque la souris quitte le bouton, elle disparaît en douceur.

• Elle doit également pouvoir apparaître lorsque le bouton reçoit le focus au clavier.

3. Version mobile

Sur les écrans de moins de 768 px :

• Masquer complètement la bulle de contact.

• Conserver uniquement le bouton WhatsApp.

• Positionner le bouton à 15 px du bas et de la droite.

4. Fonctionnement

Au clic sur le bouton, ouvrir WhatsApp dans un nouvel onglet avec mon numéro et un message prérempli.

Le bouton doit fonctionner sur ordinateur et smartphone.

5. Mes informations à personnaliser

• Couleur de ma charte : [CODE COULEUR HEX]

• Numéro WhatsApp international : [NUMÉRO SANS + NI ESPACES]

• Titre de la bulle : [TITRE]

• Sous-titre : [SOUS-TITRE]

• URL publique de ma photo : [URL PHOTO]

• Message WhatsApp prérempli : [MESSAGE]

6. Contraintes techniques

• Utiliser uniquement HTML et CSS.

• Intégrer directement l'icône WhatsApp en SVG.

• Ne pas utiliser de plugin ou de bibliothèque externe.

• Utiliser des classes CSS préfixées par cp-wa- pour éviter les conflits avec Systeme.io.

• Utiliser position: fixed et z-index: 99999.

• Le code doit être autonome, responsive et compatible avec Systeme.io.

• Vérifier que l'icône SVG représente correctement WhatsApp.

• Ne pas modifier le design des autres éléments de la page.

7. Résultat attendu

Donne-moi un seul bloc de code HTML complet, contenant le CSS et le HTML, prêt à copier-coller dans le code de suivi du pied de page de Systeme.io.

Ne me propose pas plusieurs designs. Respecte exactement les dimensions, les couleurs, la disposition et les animations décrites.

Explique ensuite en trois étapes simples comment installer le code dans Systeme.io.