.texte {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
    margin: 2px; /* Espacement autour des bulles */
}

.texte span {
    display: inline-block; 
    padding: 20px 20px; /* Espace interne pour donner la forme de bulle */
    margin: 23px; /* Espacement entre les bulles */
    margin-top: 5%;
    border-radius: 15px; /* Coins arrondis pour l'effet bulle */
    background-color: white; 
    border: 1px solid #ddd; /* Bordure discrète pour définir la bulle */
    color: rgb(0, 0, 0);
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère pour les bulles */    
    max-width: 1000px;
}

.download-btn {
    padding: 10px 20px; /* Espace interne pour donner la forme de bulle */
    border-radius: 15px; /* Coins arrondis pour l'effet bulle */
    background-color: #011e31; /* Couleur de fond */
    border: 1px solid #ddd; /* Bordure discrète pour définir la bulle */
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Ombre légère pour les bulles */
    color: white; /* Couleur du texte */
    text-decoration: none; /* Supprime la décoration de lien */
    float: right; /* Flotte à droite */
    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease; /* Animation fluide sur le survol */
    margin-top: 2%;
}

.download-btn:hover {
    background-color: #50898b;
    color: black;
    padding: 11px 23px; /* Espace interne pour donner la forme de bulle */
    transition: background-color 0.3s ease, color 0.3s ease, padding 0.3s ease; /* Animation fluide sur le survol */
}

#mot-bulle {
    display: flex; /* Utilise Flexbox pour aligner les éléments */
    justify-content: center; /* Centre les éléments horizontalement */
    align-items: center; /* Centre les éléments verticalement */
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
    margin: 2px; /* Espacement autour des bulles */
    padding: 20px; /* Espacement interne des bulles */
    text-align: center;
}

.img_profil {
    margin-top: 1.5%; 
    margin-bottom: 4%;
    display: flex; /* Utilise Flexbox pour aligner les images */
    justify-content: center; /* Centre les images */
    /*gerer si les images dépassent la taille de l'écran*/
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne suivante si nécessaire */
}

.img_profil img {
    margin: 30px;
    width: 200px; /* Taille par défaut des images */
    transition: transform 0.4s ease; /* Animation fluide sur le survol */
    border-radius: 15px; /* Coins arrondis */
}

.img_profil img:hover {
    transform: scale(1.2); /* Agrandit l'image de 20% au survol */
}