#annuaire-web-app {
margin-top: 25px;
}
#annuaire-web-app input,
#annuaire-web-app select {
padding: 8px;
font-size: 1em;
margin-right: 10px;
margin-bottom: 15px;
max-width: 400px;
width: 100%;
box-sizing: border-box;
}
#annuaire-results {
display: flex;
flex-wrap: wrap;
gap: 20px;
}
.annuaire-card {
    flex: 1 1 calc(33% - 40px); /* Pour 3 colonnes, ajustez le 33% et le 40px (gap * 2) selon vos besoins */
    min-width: 280px; /* Largeur minimale pour éviter des boîtes trop petites */
    border: 1px solid #ccc;
    padding: 15px;
    box-sizing: border-box; /* Inclut le padding et la bordure dans la largeur/hauteur */
    display: flex; /* La box elle-même devient un conteneur flex */
    flex-direction: column; /* Les éléments internes s'empilent verticalement */
    justify-content: space-between; /* Distribue l'espace pour pousser le dernier élément en bas */
    align-items: flex-start; /* Alignement horizontal des éléments */

}
.annuaire-card img {
    max-width: 100%;
    height: auto;
    display: block;
    margin-bottom: 20px;
}
.annuaire-card h3 {
    margin: 0 0 5px;
    font-size: 1em;
    margin-bottom: 20px;
}
.annuaire-card div {
    font-size: 0.8em;
    margin: 0 0 5px;
}
.annuaire-card .langues {
	align-self: flex-end;
   margin: auto 0 0 0; /* Pousse cet élément vers le bas de la box */
    padding: 0px;
    width: 100%; /* S'étale sur toute la largeur disponible */
display: flex;
flex-wrap: wrap;
gap: 2px;
}

.annuaire-card hr { width: 100%; border: 1px dashed #ccc; margin: 0px, padding: 0px; }
.annuaire-list {display: flex; flex-wrap: wrap; gap: 1rem; padding: 0; margin: 0; list-style: none; } 
.annuaire-item { width: 300px; border: 1px solid #ccc; overflow: hidden; box-shadow: 0 0 8px rgba(0,0,0,0.05); background: white; } 
.annuaire-item img { max-width: 100%; height: auto; display: block; margin-bottom: 0.5rem; } 
.annuaire-item h3 { margin-top: 0; } 
.annuaire-item .annuaire-description { color: #333; }
.taxonomy-tag, .annuaire-card strong {    
	font-size: 0.8em;
                display: inline-block; 
                margin: 2px; 
            }
.taxonomy-tag {    
				padding: 3px 8px; 
                cursor: pointer; 
                transition: all 0.2s ease; 
                border: 1px solid #ddd;
            }
.annuaire-card strong {    
				padding: 3px 0px; 
	font-style: normal;
            }
.taxonomy-tag:hover { 
                background: #e0e0e0; 
                transform: translateY(-1px); 
                box-shadow: 0 2px 2px rgba(0,0,0,0.1);
            }
.clickable-tag {  border-color: #2196f3; }
.clickable-tag:hover { background: #bbdefb; }
.clickable-langue {  border-color: #9c27b0; }
.clickable-langue:hover { background: #e1bee7; }
.clickable-categorie { border-color: #4caf50; }
.clickable-categorie:hover { background: #c8e6c9; }