#callWidget {
    position: fixed;
    bottom: 20px; /* Distance du bas */
    right: 20px; /* Distance de la droite */
    z-index: 1000; /* Assurez-vous qu'il reste au-dessus des autres éléments */
	display: none;
}

#callWidget img {
    width: 50px; /* Taille de l'icône, ajustez selon vos besoins */
    height: auto; /* Garde le ratio de l'image */
    transition: transform 0.3s ease;

    /* Style supplémentaire pour l'effet de survol */
}

#callWidget img:hover {
    transform: scale(1.1); /* Effet de zoom au survol */
}

#callWidget #closeWidget {
    position: absolute;
    top: -30px; /* Déplacer légèrement au-dessus de l'icône */
    right: -30px; /* Déplacer légèrement à droite de l'icône */
    border: none;
    background-color: transparent;
    cursor: pointer;
    color: #000; /* Couleur de la croix */
    font-size: 16px; /* Taille de la croix */
}

label {
    display: block;
    margin-bottom: 5px;
    color: #999; /* Couleur du texte */
    font-size: 0.9em; /* Taille de la police */
}

/* Style supplémentaire pour cacher l'élément */
.hidden {
    display: none;
}

/* Styles généraux pour la popup */
#messagePopup {
    /* Styles existants... */
    background-color: #fff; /* Fond blanc */
    border-radius: 10px; /* Coins arrondis pour un look moderne */
    box-shadow: 0 10px 25px rgba(0,0,0,0.2); /* Ombre portée pour une apparence en relief */
    padding: 25px; /* Espace intérieur */
    font-family: Arial, sans-serif; /* Police de caractères */
    color: #333; /* Couleur du texte */
}

/* Styles pour le titre de la popup */
#messagePopup h2 {
    color: #333; /* Couleur du titre */
    font-size: 1.5em; /* Taille du titre */
    margin-top: 0;
    margin-bottom: 20px; /* Espace après le titre */
}

/* Styles pour les champs de saisie et le textarea */
#messagePopup input[type="text"],
#messagePopup input[type="tel"],
#messagePopup input[type="email"],
#messagePopup textarea {
    width: 100%; /* Largeur complète */
    padding: 10px; /* Padding confortable */
    margin-bottom: 15px; /* Espace entre les champs */
    border: 1px solid #ddd; /* Bordure subtile */
    border-radius: 5px; /* Coins légèrement arrondis */
    box-sizing: border-box; /* Box-sizing pour gérer correctement la largeur */
}

/* Styles pour les boutons */
#messagePopup {
    position: fixed;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: white;
    z-index: 1001; /* Assurez-vous qu'elle est au-dessus des autres éléments */
    width: 80%; /* Largeur par défaut */
    max-width: 500px; /* Largeur maximale pour les grands écrans */
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    border-radius: 10px; /* Coins arrondis */
    padding: 25px;
    display: none; /* Caché par défaut */
    overflow: auto; /* Permet le défilement si le contenu est trop grand */
}

#messagePopup button[type="submit"] {
    background-color: #4CAF50; /* Couleur verte pour le bouton d'envoi */
    color: white; /* Texte blanc pour une meilleure lisibilité */
    border: none; /* Pas de bordure */
    padding: 10px 15px; /* Padding pour augmenter la taille du bouton */
    border-radius: 5px; /* Coins légèrement arrondis */
    cursor: pointer; /* Curseur en forme de pointeur pour indiquer qu'il s'agit d'un bouton */
    margin-right: 10px; /* Espace à droite du bouton */
}

#messagePopup button[type="submit"]:hover {
    background-color: #3e8e41; /* Couleur légèrement plus foncée au survol pour un effet interactif */
}


#messagePopup button[type="button"] {
    background-color: #f44336; /* Couleur rouge pour le bouton de fermeture */
	color: white; /* Texte blanc pour une meilleure lisibilité */
    border: none; /* Pas de bordure */
    padding: 10px 15px; /* Padding pour augmenter la taille du bouton */
    border-radius: 5px; /* Coins légèrement arrondis */
    cursor: pointer; /* Curseur en forme de pointeur pour indiquer qu'il s'agit d'un bouton */
    margin-right: 10px; /* Espace à droite du bouton */
}

#messagePopup button:hover {
    opacity: 0.9; /* Légère transparence au survol */
}

/* Style pour le label de la date */
label {
    margin-bottom: 5px;
    color: #666; /* Couleur du texte */
}

/* Adaptations pour les petits écrans */
@media (max-width: 600px) {
    #messagePopup {
        width: 95%; /* Largeur plus grande pour les petits écrans */
        max-height: 90%; /* Hauteur maximale pour éviter de dépasser l'écran */
    }
}

#messagePopup .call-button {
    display: block; /* Les boutons s'affichent maintenant en bloc (verticalement) */
    width: 100%; /* Les boutons prennent toute la largeur disponible */
    padding: 15px; /* Augmentez le padding pour un meilleur toucher */
    border: none;
    border-radius: 5px;
    margin-bottom: 10px; /* Espace entre les boutons */
    cursor: pointer;
    transition: background-color 0.3s ease;
    color: white; /* Texte blanc pour un meilleur contraste */
    font-size: 1em; /* Taille de la police appropriée */
    text-align: left; /* Alignement du texte à gauche */
}

#messagePopup .call-button i {
    margin-right: 10px; /* Espace entre l'icône et le texte */
    font-size: 1.2em; /* Rendre les icônes un peu plus grandes */
}

#messagePopup .phone-button {
    background-color: #4CAF50; /* Couleur pour le bouton d'appel téléphonique */
}

#messagePopup .whatsapp-button {
    background-color: #25D366; /* Couleur WhatsApp */
}

#messagePopup .skype-button {
    background-color: #00aff0; /* Couleur Skype */
}

#messagePopup .call-button:hover {
    opacity: 0.8; /* Effet de survol subtil */
}