@charset "utf-8";
/* CSS Document */
/* Styles généraux pour la barre de recherche */
.search-bar {
    display: flex;
    flex-wrap: wrap; /* Permet aux éléments de passer à la ligne si nécessaire */
    gap: 10px; /* Espacement entre les champs */
    margin-bottom: 20px;
    justify-content: center; /* Centre les éléments horizontalement */
}

.search-bar input,
.search-bar select,
.search-bar button {
    padding: 10px;
    font-size: 1em;
    border: 1px solid #ccc;
    border-radius: 5px;
    flex: 1; /* Occupe tout l'espace disponible */
    min-width: 150px; /* Largeur minimale pour éviter un rétrécissement excessif */
    box-sizing: border-box; /* Inclut le padding dans la largeur */
}

.search-bar button {
    background-color: #28a745;
    color: white;
    border: none;
    cursor: pointer;
    transition: background-color 0.3s ease;
    flex: 1; /* Le bouton occupe autant d'espace que les autres champs */
}

.search-bar button:hover {
    background-color: #218838;
}

/* Media Queries pour les petits écrans */
@media (max-width: 768px) {
    .search-bar {
        flex-direction: column; /* Les champs sont empilés verticalement */
        align-items: stretch; /* Étire les champs sur toute la largeur */
    }

    .search-bar input,
    .search-bar select,
    .search-bar button {
        width: 100%; /* Chaque champ occupe toute la largeur */
        flex: none; /* Désactive la flexibilité */
    }
}

/* Media Queries pour les très petits écrans */
@media (max-width: 480px) {
    .search-bar input,
    .search-bar select,
    .search-bar button {
        font-size: 0.9em; /* Réduit la taille du texte */
        padding: 8px; /* Réduit le padding */
    }
}