/* ANNONCES */
                                              
/* Barre de recherche */
.search-bar {
    margin-bottom: 30px;
    border-radius: 10px;
    width: 400px;
    height: 30px; 
    padding-left: 20px;
    border: 1px solid #ddd;
  }
  /* Barre de recherche */
  
/* Conteneur des filtres */
.filtres-container {
  display: flex;
  gap: 15px;
  align-items: center;
  justify-content: center;
  margin: 20px 0;
  flex-wrap: wrap;
  margin-bottom: 60px ;

}

/* Dropdown */
.dropdown {
  border-radius: 8px;
  width: 180px;
  height: 40px;
  padding: 0 10px;
  
  border: 1px solid #ccc;
  background-color: #fff;
  font-size: 14px;
  color: #333;
  box-shadow: 0 2px 5px rgba(0,0,0,0.05);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.dropdown:hover {
  border-color: #888;
}

/* Bouton "Filtrer" */
.btn-filtrer {
  background-color: #1A8917;
  color: white;
  border: none;
  padding: 10px 16px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 14px;
  height: 40px;
  transition: background-color 0.2s;
}

.btn-filtrer:hover {
  background-color: #166f13;
}

  
  /* Grille des annonces */
  .grid {
    display: grid;                          /* Pour que ce soit en grille */
    grid-template-columns: repeat(3, 1fr);  /* 3 images sur chaque ligne */
    gap: 50px;                              /* Espacement */
  }
  
  /* Limiter la taille des images */
  .grid img {
    width: 100%;
    max-width: 300px;
    height: 200px; /* Fixed height for consistency */
    border-radius: 20px;
    border: 2px solid #000000;
    object-position: center; /* Centers the image within the container */
  }
  
  .grid figure {
    background-color: #f8f8f8;
    border-radius: 15px;
    padding: 10px;
    text-align: center;
    width: 100%;
    max-width: 320px; /* Consistent width for the figure container */
    margin: 0 auto;
  }
  
  figcaption {
    margin-top: 5px;
    max-width: 310px;  /*10px de plus que les images */
  }

  /* Espace entre le titre et la description */
  figcaption h3 {
    margin-bottom: 10px;
  }
  
  /* Espacement des sections */
  .faq-section {
    margin-bottom: 40px;
    padding: 20px;
  }

/* Annonces responsives sur téléphone */

@media screen and (max-width: 768px) {  /* Résolution minimale pour les téléphones */
  .grid {
    grid-template-columns: 1fr; /* 1 annonce par ligne sur mobile */
    gap: 30px; /* Espacement réduit */
  }
  
  .grid figure {
    max-width: 100%; /* Largeur adaptée au conteneur */
  }
  
  .grid img {
    max-width: 100%; /* Images adaptées au conteneur */
  }
  
  figcaption {
    max-width: 100%; /* Texte adapté au conteneur */
  }
  
  /* Ajustement des filtres sur mobile */
  .dropdown {
    width: 100%;
    max-width: 300px;
  }
}
                                                 /* ANNONCES */