.image-link {
    position: relative; /* Permet d'utiliser les coordonnées absolues pour le positionnement */
}

.image-link::after {
    content: attr(title); /* Utilise le texte de l'attribut title comme contenu de l'infobulle */
    position: absolute; /* Positionnement absolu par rapport à l'élément parent */
    bottom: 100%; /* Positionne l'infobulle au-dessus de l'image */
    left: 50%; /* Positionne l'infobulle au centre de l'image */
    transform: translateX(-50%); /* Centre l'infobulle horizontalement */
    padding: 5px; /* Ajoute un espacement autour du texte */
    background-color: #ffffff; /* Couleur de fond du cadre blanc */
    color: #000000; /* Couleur du texte */
    font-size: 14px; /* Taille de police du texte */
    white-space: nowrap; /* Empêche le retour à la ligne du texte */
    opacity: 0; /* Masque l'infobulle par défaut */
    transition: opacity 0.3s ease-in; /* Ajoute une transition d'opacité fluide */
}

.image-link:hover::after {
    opacity: 1; /* Affiche l'infobulle lorsque survolée */
}