/* ── Pagination élidée des listes (composant global) ──────────────
   Lot vignettes et onglets, mockup validé le 28/09 : plus de vert ; la
   page courante en encre inversée, qui suit le thème ; « Page X sur N »
   sous 700 px. Jetons du registre : les deux thèmes sans surcharge.
   Chargée par les quatre listes et /recherche/. */
.tr-pagination {
  display: flex; align-items: center; justify-content: center; gap: 18px;
  margin-top: 64px;
  font-family: var(--ard-sans);
}
.tr-page-list {
  display: flex; align-items: center; gap: 4px;
  margin: 0; padding: 0; list-style: none;
}
.tr-page-list .tr-page-btn {
  display: grid; place-items: center;
  min-width: 42px; height: 42px; padding: 0 6px; border-radius: 999px;
  font-size: 15px; font-weight: 500; font-variant-numeric: tabular-nums;
  color: var(--ard-ink-2); text-decoration: none;
  transition: background-color var(--ard-tr), color var(--ard-tr);
}
.tr-page-list a.tr-page-btn:hover { background: var(--ard-bg-3); color: var(--ard-ink); }
.tr-page-list .tr-page-btn.active {
  background: var(--ard-ink); color: var(--ard-bg);
  font-weight: 700; cursor: default;
}
.tr-page-list .tr-page-ellipsis { min-width: 24px; color: var(--ard-ink-3); }

.tr-page-prev, .tr-page-next {
  display: inline-flex; align-items: center; gap: 8px;
  height: 42px; padding: 0 18px;
  border: 1px solid var(--ard-rule-strong); border-radius: 999px;
  font-size: 14px; font-weight: 600; color: var(--ard-ink); text-decoration: none;
  transition: border-color var(--ard-tr);
}
.tr-page-prev svg, .tr-page-next svg { flex: none; width: 16px; height: 16px; }
a.tr-page-prev:hover, a.tr-page-next:hover { border-color: var(--ard-ink); }
/* Inerte : il ne sert qu'à tenir la place de Précédent ou de Suivant. */
.tr-page-prev.is-off, .tr-page-next.is-off { opacity: .4; }

.tr-page-of {
  display: none; margin: 0;
  font-size: 14px; font-variant-numeric: tabular-nums; color: var(--ard-ink-2);
}
.tr-page-of b { color: var(--ard-ink); }
.tr-page-foot {
  margin: 16px 0 0; text-align: center;
  font-family: var(--ard-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--ard-ink-3);
}
.tr-pagination a:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* Tablette : les numéros éloignés de la page courante s'effacent. */
@media (max-width: 1023px) {
  .tr-page-list li:has(> .tr-page-far) { display: none; }
}
/* Mobile : « Page X sur N » entre deux boutons ronds. */
@media (max-width: 699px) {
  .tr-pagination { gap: 14px; margin-top: 40px; }
  .tr-page-list, .tr-page-foot, .tr-page-lbl { display: none; }
  .tr-page-of { display: block; }
  .tr-page-prev, .tr-page-next { width: 44px; height: 44px; padding: 0; justify-content: center; }
}
@media (prefers-reduced-motion: reduce) {
  .tr-page-list .tr-page-btn, .tr-page-prev, .tr-page-next { transition: none; }
}