:root {
    --pagination-primary-color: #ff527b;
    --pagination-text-color: #555555;
}

/* Style général des éléments de la pagination */
.pagination-custom .page-link,
.pagination-custom .page-item.active .page-link,
.pagination-custom .page-item.active .span,
.pagination-custom .page-item.disabled .page-link {
    /* Coins très arrondis pour les "pilules" */
    border-radius: 10px !important;
    /* Définit une taille minimale pour que les boutons soient des carrés/rectangles réguliers */
    min-width: 45px;
    height: 45px;
    padding: 0; /* Réinitialise le padding pour centrer le texte */
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 4px; /* Espacement entre les boutons */
    border: 1px solid #dee2e6; /* Bordure par défaut pour les inactifs */
    color: var(--pagination-text-color);
    font-weight: bold;
}

/* Style du bouton actif (couleur rouge/rose pleine) */
.pagination-custom .page-item.active .page-link,
.pagination-custom .page-item.active span {
    background-color: var(--pagination-primary-color);
    border-color: var(--pagination-primary-color);
    color: #fff; /* Texte blanc */
}

/* Style des points de suspension (similaires à l'actif, mais désactivés) */
.pagination-custom .page-item.disabled.dots .page-link {
    background-color: var(--pagination-primary-color);
    border-color: var(--pagination-primary-color);
    color: #fff;
    opacity: 0.8; /* Légèrement moins opaque pour les différencier de l'actif */
}

/* Retrait de la bordure et de l'ombre au focus pour les liens inactifs */
.pagination-custom .page-link:focus,
.pagination-custom .page-link:hover {
    box-shadow: none;
    background-color: #f8f9fa;
    color: var(--pagination-text-color);
    border-color: #dee2e6;
}