/* pagination.css : Styles de structure et d'apparence communs */
/* ------------------------------------------- */
/* 1. RÉGLAGES DU CONTENEUR DE PAGINATION */
/* ------------------------------------------- */
.pagination-control {
  display: flex;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  margin: 0 auto;
  padding: 0 0;
  gap: var(--space-sm);
  flex-wrap: wrap;
  width: fit-content;
  max-width: 100%;
  align-self: flex-start !important;
}
/* ------------------------------------------- */
/* 2. BOUTONS PRÉCÉDENT/SUIVANT (Forme Pilule) */
/* ------------------------------------------- */
.page-btn.pag-prev,
.page-btn.pag-next,
.page-btn:last-child {
  display: inline-flex;
  align-items: center;
  font-weight: normal;
  justify-content: center;
  white-space: nowrap;
  width: fit-content;
  padding: 0 calc(10 / 16 * 1rem);
  border-radius: var(--radius-pill);
  font-size: var(--font-size-pagination-btn);
  height: calc(28.8 / 16 * 1rem); /* 1.8rem */
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
}
/* Icônes pour Précédent/Suivant */
.pag-prev::before {
  content: "◀";
  margin-right: var(--space-xs);
  font-size: 0.95em;
  vertical-align: middle;
}
.pag-next::after {
  content: "▶";
  margin-left: var(--space-xs);
  font-size: 0.95em;
  vertical-align: middle;
}
/* ------------------------------------------- */
/* 3. BOUTONS NUMÉROTÉS (Forme Circulaire) */
/* ------------------------------------------- */
.page-btn.page-num {
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: var(--fw-bold);
  font-size: var(--font-size-pagination-num);
  width: calc(32 / 16 * 1rem); /* 2rem */
  height: calc(32 / 16 * 1rem); /* 2rem */
  line-height: var(--pagination-btn-height);
  border-radius: var(--radius-pill);
  flex-shrink: 0;
  flex-grow: 0;
}
/* ------------------------------------------- */
/* 3.5 CONTENEUR DE RONDELLES */
/* ------------------------------------------- */
.page-num-group {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: var(--space-sm);
  flex-shrink: 0;
  flex-grow: 0;
  flex-basis: auto;
  align-self: center;
}
/* ------------------------------------------- */
/* 4. BOUTON ACTIF */
/* ------------------------------------------- */
.page-btn.page-num.active {
  cursor: default;
  filter: none;
  box-shadow: none;
  background-color: #ffffff;
  color: #000000;
  border: black solid 2px;
  border-radius: var(--radius-pill);
}
/* --- Points de suspension --- */
/* 1. Apparence grisée pour les boutons inactifs */
.page-btn.disabled {
  opacity: 0.4;
  cursor: not-allowed;
  pointer-events: none;
  filter: grayscale(100%);
}
/* 2. Réduction de l'espace vertical sous la pagination */
.pagination-control {
  margin-bottom: var(--space-xs) !important;
  padding-bottom: 0 !important;
}
/* === MEDIA QUERY POUR ÉCRAN ÉTROIT === */
@media (max-width: calc(620 / 16 * 1rem)) {
  /* 38.75rem */
  .pagination-control {
    flex-direction: row;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-sm);
    width: 100%;
    max-width: 100%;
    padding: var(--space-sm) 0;
  }
  .pagination-control > .page-btn:not(.page-num),
  .pagination-control > .page-num-group {
    align-items: center;
    flex-shrink: 0;
    margin: var(--space-xs) 0;
  }
  .page-btn.page-num {
    margin: 0;
  }
}
/* dark mode */
html[data-theme="dark"] .page-btn.page-num.active {
  background-color: #b1b1b1;
  color: #000000;
  border: black solid 2px;
}
html[data-theme="dark"] .page-btn.disabled {
  opacity: .7;
}