/* Pagination style pour correspondre à l'exemple rouge */
.pager {
  margin-top: -17px;
}

.pager__items {
  display: inline-flex;
  list-style: none;
  margin: 0;
  padding: 0;
  align-items: center;
  gap: 0;
  height: 24px;
  border: none;
  padding-left: 0;
  padding-top: 0;
  padding-bottom: 0;
  background: url(../images/bg_tbl_search_footer.png) repeat-x transparent;
  width: 690px;
}

.pager__item {
  display: inline-block;
  margin: 0;
  padding: 0;
  height: 24px;
  line-height: 24px;
}

.pager__item a:focus{
  color: #fff !important;
}

/* Numéros de page */
.pager__link {
  display: inline-block;
  padding: 0 8px;
  margin: 0;
  text-decoration: none;
  background-color: transparent; /* Rouge */
  color: #fff;
  font-size: 11px;
  font-family: Arial, sans-serif;
  line-height: 24px;
  height: 24px;
  transition: none;
  font-weight: normal;
}

/* Page courante (active) - plus claire */
.pager__item--active .pager__link,
.pager__link--active {
  background-color: transparent; /* Rose clair pour la page active */
  color: #721c24; /* Texte rouge foncé */
  font-weight: normal;
  cursor: default;
}

/* Survol des liens */
.pager__link:hover:not(.pager__link--active) {
  background-color: transparent; /* Rouge légèrement plus foncé au survol */
  color: #fff;
  text-decoration: none;
  border-bottom-color: transparent;
}

/* Liens de navigation (première, précédent, suivant, dernier) */

.pager__item--first{
  margin-left: 5px;
}

.pager__item--first a,
.pager__item--previous a,
.pager__item--next a,
.pager__item--last a {
  line-height: 24px;
  height: 24px;
  margin: 0;
  text-decoration: none;
  font-size: 11px;
  font-family: Arial, sans-serif;
  line-height: 24px;
  color: #fff;
  border: 1px solid orange;
  padding: 0 0.6em 0.1em 0.6em;
  background: url(../images/bg_pager.png) repeat-x transparent;
  text-decoration: none;
  margin-right: 4px;
}

/* Survol des liens de navigation */
.pager__items .pager__item--first a:hover,
.pager__items .pager__item--previous a:hover,
.pager__items .pager__item--next a:hover,
.pager__items .pager__item--last a:hover {
  background-color: #c82333 !important;
  color: #fff !important;
  border-bottom-color: orange !important;
}

/* Responsive */
@media (max-width: 768px) {
  .pager__items {
    flex-wrap: wrap;
    justify-content: center;
  }

  /* Masquer les liens première/dernière sur mobile */
  .pager__item--first,
  .pager__item--last {
    display: none;
  }
}

/* Classes utilitaires */
.visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  overflow: hidden !important;
  clip: rect(1px, 1px, 1px, 1px) !important;
  clip-path: inset(50%) !important;
  border: 0 !important;
  margin: -1px !important;
  padding: 0 !important;
}