.articles {
    display: flex;
    flex-direction: column;
    gap: 50px;
    padding: 5% 10% 5% 10%;
}
.articles h1 {
    font-family: Roboto-Medium;
    font-size: 40px;
}
.articles .category {
    display: flex;
    flex-wrap: wrap;
    gap: 40px;
}
.articles .article {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: 10px;
    height: 466px;
    width: 300px;
    background: #e8e8e8;
    border: 1px solid #e8e8e8;

    padding-bottom: 10px;
}
.articles .article img {
    width: 100%;
    height: 250px;
    object-fit: cover;
}
.articles .article a {
    background-color: var(--color-main);
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    font-size: 16px;
    margin-inline: 20px;
    text-align: center;
    text-decoration: none;
}
.articles .article a:hover {
    opacity: 0.8;
}

.articles .article .divider {
    display: flex;
    justify-content: space-evenly;
}
.articles .article .info {
    display: flex;
    flex-direction: column;
    min-height: 150px;
}

.articles .article .info .txt-holder {
    display: flex;
    flex-direction: column;
    padding: 20px;
}
.articles .article .info .txt-holder .name {
    font-size: 27px;
    font-family: "Roboto-Medium";
    color: var(--color-main);

    display: -webkit-box; /* Utilise un conteneur flexible de type boîte */
    -webkit-box-orient: vertical; /* Orientation verticale */
    -webkit-line-clamp: 2; /* Limite à 2 lignes */
    overflow: hidden; /* Cache le texte qui déborde */
    text-overflow: ellipsis; /* Ajoute "..." à la fin du texte coupé */
    max-width: 100%; /* Ajuste la largeur du texte */
    line-height: 1.5; /

}
.articles .article .info .txt-holder .desc {
    height: 25px;
    /* Largeur de la div */
    display: inline-block;
    /* Permet au texte de s'étendre autant que possible */
    overflow: hidden;
    /* Cache le texte dépassant de la div */
    text-overflow: ellipsis;
    /* Affiche "..." pour indiquer que le texte est coupé */
    white-space: nowrap;
}
@media (max-width: 767px) {
    /* Styles spécifiques aux téléphones */
    h1 {
        text-align: center;
    }
    .category {
        display: flex;
        align-items: center;
        justify-content: center;
    }
}