/**
 * PlayAwale — La pagination d'une liste
 * -----------------------------------------------------------------------------
 * La barre des pages sous « Mes parties » et sous les dernières parties de
 * « Revoir des parties » — voir inc/partials/pagination.php. Des pastilles de
 * sable, la page courante en foncé.
 *
 * @package   PlayAwale
 * @version   2.0
 * @author    Nicolas Lion — Développeur web — https://nlion.fr
 * @copyright 2026 Nicolas Lion
 */

.pagination {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-xs);

  margin-top: var(--space-lg);
}

.pagination__pages {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: var(--space-2xs);

  margin: 0;
  padding: 0;
  list-style: none;
}

.pagination__link,
.pagination__step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3em;

  min-width: 2.6rem;
  height: 2.6rem;
  padding: 0 0.7em;

  font-family: var(--font-body);
  font-size: var(--font-size-sm);
  font-weight: 700;
  color: var(--color-text);
  text-decoration: none;

  background-color: var(--color-surface);
  background-image: var(--gradient-surface-raised);
  border-radius: var(--radius-full);
  box-shadow: var(--shadow-sm);
}

.pagination__step {
  padding: 0 1em;
}

.pagination__link:hover,
.pagination__step:hover {
  background-color: var(--color-brand-amber-light);
}

.pagination__link:focus-visible,
.pagination__step:focus-visible {
  outline: 3px solid var(--color-focus-ring);
  outline-offset: 2px;
}

.pagination__link.is-current {
  color: var(--color-brand-cream);
  background: var(--color-brand-dark);
  box-shadow: none;
}

.pagination__icon {
  width: 0.9em;
  height: 0.9em;
}

.pagination__icon--prev {
  transform: rotate(180deg);
}

.pagination__gap {
  padding: 0 0.2em;
  color: var(--color-text-muted);
}