.avatar-hover-tooltip {
    position: absolute;
    background: #4e5e83;               
    color: #fff;                     
    padding: 6px 12px;               
    border-radius: 6px;              
    pointer-events: none;            
    font-size: 13px;
    font-weight: 500;
    display: block;                  /* toujours block pour transition */
    z-index: 9999;
    white-space: nowrap;
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
    opacity: 0;                      /* invisible par défaut */
    transform: translateX(-50%) translateY(5px); /* léger décalage vers le bas */
    transition: opacity 0.4s ease, transform 0.4s ease; /* transition douce */
    text-align: center;
}

.avatar-hover-tooltip.show {
    opacity: 1;                      /* visible */
    transform: translateX(-50%) translateY(0); /* remonte doucement à sa position */
}

/* Flèche en haut */
.avatar-hover-tooltip::after {
    content: "";
    position: absolute;
    bottom: 100%;                   
    left: 50%;
    transform: translateX(-50%);
    border-width: 5px;
    border-style: solid;
    border-color: transparent transparent #222 transparent; 
}