/* ===================================================================
 * CSS pour l'Animation de Chargement (Spinner)
 * =================================================================== */

.btn-plus2 .btn-load-more-articles .spinner-loader {
    border: 3px solid rgba(153, 4, 51, 0.3); /* Couleur et épaisseur du cercle gris */
    border-top-color: #D30546;
}

.btn-plus3 .btn-load-more-articles .spinner-loader {
    border: 3px solid rgba(0, 133, 105, 0.3); /* Couleur et épaisseur du cercle gris */
    border-top-color: #00C39B;
}

/* Conteneur de base du spinner */
.btn-load-more-articles .spinner-loader {
    display: inline-block;
    width: 1em; /* Taille du cercle */
    height: 1em;
    border: 3px solid rgba(255, 255, 255, 0.3); /* Couleur et épaisseur du cercle gris */
    border-top-color: #ffffff; /* Couleur de la partie qui tourne (Blanc) */
    border-radius: 50%; /* Rendre le cercle */
    animation: spin 1s ease-in-out infinite; /* Lancer l'animation */
    margin: 0 5px; /* Petit espace autour du spinner */
    vertical-align: middle; /* Alignement vertical */
}

/* Le bouton pendant le chargement */
.btn-load-more-articles:disabled {
    cursor: not-allowed;
    opacity: 0.8;
}

/* Définition de l'animation de rotation */
@keyframes spin {
    to { transform: rotate(360deg); }
}