.note {
    position: relative;
    cursor: pointer;
    color: inherit; /* Le numéro de la note garde la couleur du texte environnant */
    text-decoration: dotted; /* Optionnel : souligne pour indiquer qu'on peut interagir */
}

.note::after {
    content: attr(data-note);
    display: none;
    position: absolute;
    background-color: #666666; /* Fond gris */
    color: white; /* Texte blanc */
    padding: 10px 12px; /* Ajout de marge intérieure pour plus de lisibilité */
    border-radius: 5px; /* Coins légèrement arrondis */
    font-size: 0.85em; /* Taille du texte ajustée */
    width: 400px; /* Largeur légèrement augmentée */
    left: 50%;
    transform: translateX(-50%);
    top: 100%;
    margin-bottom: 8px;
    white-space: normal;
    text-align: left;
    z-index: 10;
    box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.3); /* Ombre pour améliorer la visibilité */
}

.note:hover::after {
    display: block;
}

.posture {
    float: left;
    margin-right: 20px;
    max-width: 100%; /* Assure que l'image ne dépasse pas son conteneur */
    height: auto;
}

@media (max-width: 768px) { 
    .posture {
        float: none; /* Désactive le flottement sur mobile */
        display: block;
        margin: 0 auto 20px auto; /* Centre l’image et ajoute une marge en bas */
    }
}

.image-left {
    float: left; /* Permet à l'image de flotter à gauche */
    margin-right: 20px; /* Espace entre l'image et le texte */
    margin-bottom: 10px; /* Espace entre l'image et le texte en dessous */
}

.image-container {
    overflow: hidden; /* Permet de contenir les images flottantes à l'intérieur du conteneur */
}