/* Pagination */
/* Container de pagination */
.pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    flex-wrap: wrap;
    margin: 0;
    padding: 1rem 0;
}

/* Éléments de pagination (li) */
.pagination li {
    list-style: none;
    margin: 0;
}

/* Liens et spans de pagination */
.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    font-size: 0.9375rem;
    font-weight: 600;
    text-decoration: none;
    border-radius: 8px;
    transition: all 0.2s ease;
    border: 2px solid transparent;
}

/* Les couleurs passent par les variables (lot « composants », 24/10/2026) : surfaces et gris des --admin-*, qui ont leur
   valeur sombre (mode_sombre.css), bleu des boutons pour la page courante, Précédent et Suivant (texte blanc à 4,5:1
   dans les deux thèmes). */
.pagination a {
    background: var(--admin-surface);
    color: var(--admin-text);
    border-color: var(--admin-border);
}

.pagination a:hover {
    background: color-mix(in srgb, var(--primary) 7%, var(--admin-surface));
    border-color: var(--primary);
    color: var(--pastille-principale-texte);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--primary) 20%, transparent);
}

/* Page active/courante */
.pagination .current,
.pagination span.current {
    background: var(--bouton-primaire);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-primaire);
    box-shadow: 0 4px 8px color-mix(in srgb, var(--bouton-primaire) 30%, transparent);
    margin: 0 2px;
}

/* Boutons Précédent/Suivant */
.pagination .previous a,
.pagination .next a {
    background: var(--bouton-primaire);
    color: var(--encre-sur-primaire);
    border-color: var(--bouton-primaire);
    font-weight: 700;
}

.pagination .previous a:hover,
.pagination .next a:hover {
    background: var(--primary-dark);
    border-color: var(--primary-dark);
    color: var(--encre-sur-primaire);
    box-shadow: 0 6px 12px color-mix(in srgb, var(--bouton-primaire) 40%, transparent);
    transform: translateY(-3px);
}

/* État disabled pour Précédent/Suivant */
.pagination .disabled span {
    background: var(--admin-surface-strong);
    color: var(--admin-text-faint);
    border-color: var(--admin-border);
    cursor: not-allowed;
    opacity: 0.6;
}

/* Points de suspension (...) */
.pagination .disabled a {
    background: transparent;
    color: var(--admin-text-faint);
    border-color: transparent;
    cursor: default;
    pointer-events: none;
}

/* Style pour les numéros éloignés de la page courante */
.pagination a[rel="first"],
.pagination a[rel="last"] {
    background: var(--admin-surface-inset);
    border-color: var(--admin-border);
}

.pagination a[rel="first"]:hover,
.pagination a[rel="last"]:hover {
    background: color-mix(in srgb, var(--primary) 7%, var(--admin-surface));
    border-color: var(--primary);
}

/* Icônes dans la pagination (si utilisées) */
.pagination .material-symbols-outlined {
    font-size: 20px;
}

/* Responsive pagination */
@media (max-width: 768px) {
    .pagination {
        gap: 6px;
    }
    
    .pagination a,
    .pagination span {
        min-width: 36px;
        height: 36px;
        padding: 0 10px;
        font-size: 0.875rem;
    }
    
    /* Masquer certains numéros sur mobile pour gagner de l'espace */
    .pagination li:not(.previous):not(.next):not(.current):nth-child(n+6):nth-last-child(n+6) {
        display: none;
    }
}

/* Animation au chargement */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.pagination {
    animation: fadeInUp 0.4s ease;
}

/* Style alternatif compact pour la pagination */
.pagination-compact {
    gap: 4px;
}

.pagination-compact a,
.pagination-compact span {
    min-width: 32px;
    height: 32px;
    padding: 0 8px;
    font-size: 0.875rem;
    border-radius: 6px;
}