/* Conteneur principal du Trombinoscope2 */
.trombinoscope-container {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 20px; /* Espace entre les entrées */
}

/* Chaque entrée du Trombinoscope2 */
.trombi-entry {
    border: 1px solid #ddd;
    padding: 15px;
    width: 300px; /* Largeur fixe initiale pour chaque entrée */
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1); /* Ombre subtile */
    border-radius: 10px; /* Coins arrondis */
    overflow: hidden;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative; /* Pour le positionnement absolu des infos */
}

/* La photo de profil */
.trombi-photo img {
    width: 100%; /* Pleine largeur de l'entrée */
    height: auto;
    border-radius: 50%; /* Rend l'image ronde */
    max-width: 150px; /* Taille maximale pour la photo */
}

/* Informations de l'utilisateur */
.trombi-info {
    text-align: center;
    position: absolute; /* Position absolue pour superposer sur l'image */
    width: 100%; /* Pleine largeur de l'entrée */
    bottom: 0; /* Aligné en bas de l'entrée */
    left: 0;
    background-color: rgba(0, 0, 0, 0.7); /* Fond semi-transparent */
    color: white;
    visibility: hidden; /* Masqué par défaut */
    opacity: 0;
    transition: visibility 0s, opacity 0.5s linear; /* Transition douce */
    padding: 10px; /* Padding pour le texte */
    box-sizing: border-box; /* Assurez-vous que le padding est inclus dans la largeur */
    max-height: 200px; /* Hauteur maximale pour la description */
    overflow-y: auto; /* Permet le défilement vertical si nécessaire */
}

.trombi-entry:hover .trombi-info {
    visibility: visible; /* Affiche les infos au survol */
    opacity: 1;
}

.trombi-info h3, .trombi-info p {
    margin: 40px;
	color: white;/* Espacement */
}

/* Responsive design */
@media (max-width: 768px) {
    .trombi-entry {
        width: 100%; /* Pleine largeur sur les petits écrans */
    }
}

@media (max-width: 480px) {
    .trombinoscope-container {
        gap: 10px; /* Espace réduit entre les entrées */
    }

    .trombi-info p {
        height: auto; /* Hauteur auto pour s'adapter aux petits écrans */
    }
}