.btn-arep{
    background-color: #2b2d83;
    color: #ffffff;
    border-radius: 5px solid #2b2d83;
}
.btn-arep:hover{
    background-color: #ffd700;
    color: #2b2d83;
    border-radius: 5px solid #2b2d83;
}

.btn-arep-p{
    background-color: #2b2d83;
    color: #ffffff;
    border-radius: 5px solid #2b2d83;
}
.btn-arep-p:hover{
    background-color: #4447e2;
    color: #ffffff;
}
                        
/* Animation de zoom au survol */
.article-card-container {
    margin-right: 40px;
}
.article-card {
    width: 700px;
    min-height: 400px;
    /*width: 100%;  S'adapte au conteneur 
    max-width: 400px;  Taille fixe sur grands écrans */
    border-radius: 10px; /* Coins arrondis */
    overflow: hidden; /* Cache ce qui dépasse */
    box-shadow: 0px 4px 8px rgba(0, 0, 0, 0.1); /* Ombre douce */
    transition: transform 0.3s ease-in-out;
}

.article-card:hover {
    transform: scale(1.05);
}

/* Gestion des images */
.article-img-box {
    padding: 0px;
}

.article-img {
    /*width: 100%;*/
    height: 250px;
    object-fit: cover;
    border-radius: 8px;
}
.article-description {
    max-height: 5em;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Animation d’apparition en zoom */
.hidden {
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.8s ease-out, transform 0.8s ease-out;
}

.visible {
    opacity: 1;
    transform: scale(1);
}

/* Responsive Design */
@media (max-width: 768px) {
    .article-card {
        max-width: 100%; /* Prend toute la largeur */
        box-shadow: none; /* Réduction de l'ombre pour plus de légèreté */
        margin: 0px;
    }
    .article-img-box {
        margin-bottom: 50px;
        height: 250px;
    }
    .article-img {
        /*height: 250px; /* Réduction de la hauteur */
        /*margin: 5px; /* Réduction de la marge */
    }
}

@media (max-width: 480px) {
    *{
        margin: 0px;
        padding: 0px;
    }
    .article-img-box {
        margin-bottom: 50px;
        height: 200px;
    }
    .article-img {
        /*height: 200px; /* Hauteur ajustée */
    }
    
    
}
