.container {
    width: 100%;
    margin: 0 auto; /* Centre le conteneur horizontalement */
    background-color: #fff; /* Couleur de fond du conteneur */
    padding: 20px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.1); /* Ombre légère pour un effet de profondeur */
}

div.search {
    margin: 5px;
    padding: 10px;
    padding: 10px 0;
    margin: 0 auto;
}

.category {
    margin: 5px;
    padding: 10px;
    border-bottom: 1px solid #ddd; /* Bordure infÃ©rieure pour sÃ©parer les catÃ©gories */
    padding: 10px 0;
    margin: 0 auto;
    letter-spacing: 0.8px;
    line-height: 1em;
    text-align: justify;

}

.category:last-child {
    border-bottom: none; /* Supprime la bordure infÃ©rieure de la derniÃ¨re catÃ©gorie */
}

/* Style du nom de la catégorie */
.category-name {
    font-weight: bold;
    color: #ffffff;
    letter-spacing: 0.8px;
    line-height: 1em;
    text-align: justify;
}

/* Style du nombre d'articles ou de la description */
.article-count {
    color: #dedede;
}

input {
  padding: 8px;
  margin-bottom: 15px;
  border: 1px solid #ccc;
  border-radius: 4px;
}

button.search {
    color: #fff;
    text-decoration: none;
    padding: 10px;
    border-radius: 5px;
    background-color: #555;
    transition: background-color 0.3s ease, transform 1.5s ease; 
}

button.search:hover {
    background-color: #4CAF50; 
    color: #fff;
}

@media screen and (max-width: 480px) {
    
        .category {
            max-width: 100%;
        }
    
        div.search {
            max-width: 100%;
        }
}

@media screen and (min-width: 480px) {
        
        .category {
            max-width: 90%;
        }
    
        div.search {
            max-width: 90%;
        }
}