/* ============================================================
   PAGINATION HTML (serveur)  —  composant .rdv-pagination
   Rendu : templates/front/fragment/_pagination.html.twig

   Langage v2 : numéros = carrés bordés sage 0.7px, Lexend Deca 13/300
   (pagination continent.css) ; flèches = chevrons sans bordure (flèches
   des carrousels v2). Contraste AA : le sage #9f9a7c sert aux bordures
   (décoratif) ; texte, icônes et fond actif utilisent le sage foncé du
   thème #615d48 (.color-sage-dark) → 5.6:1 sur le beige #efece9 et 6.6:1
   en blanc sur fond actif (#9f9a7c ne donne que 2.4:1 / 2.8:1).

   Classes propres (pas .pagination / .page-item, déjà stylées par
   continent.css) et scopées sous .rdv-pagination pour passer devant
   Bootstrap (ul, a:hover) sur les pages qui le chargent. Aucune
   dépendance à base.css / Bootstrap.
============================================================ */
.rdv-pagination {
  --rdv-pg-border: #9f9a7c;
  --rdv-pg-ink: #615d48;
  --rdv-pg-on-ink: #ffffff;
  --rdv-pg-size: 44px;          /* cible tactile minimale */

  box-sizing: border-box;
  display: block;
  width: 100%;                  /* requis par container-type (sinon largeur 0 en flex) */
  padding: 20px 0 0;            /* = .section-more qu'il remplace */
  container: rdv-pagination / inline-size;
}

.rdv-pagination .rdv-pagination__list {
  display: flex;
  flex-wrap: wrap;              /* filet : jamais de scroll horizontal, même < 320px */
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.rdv-pagination .rdv-pagination__item {
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Ellipse propre à la fenêtre compacte : masquée en largeur étendue. */
.rdv-pagination .rdv-pagination__item--compact { display: none; }

.rdv-pagination .rdv-pagination__link {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--rdv-pg-size);
  height: var(--rdv-pg-size);
  padding: 0 12px;
  border: 0.7px solid var(--rdv-pg-border);
  border-radius: 0;
  background-color: transparent;
  color: var(--rdv-pg-ink);
  font-family: 'Lexend Deca', sans-serif;
  font-size: 13px;
  font-style: normal;
  font-weight: 300;
  line-height: 16px;
  text-align: center;
  text-decoration: none;
  font-variant-numeric: tabular-nums;   /* « 1 » et « 8 » de même largeur */
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}

.rdv-pagination .rdv-pagination__link--current {
  background-color: var(--rdv-pg-ink);
  border-color: var(--rdv-pg-ink);
  color: var(--rdv-pg-on-ink);
  font-weight: 400;
}

.rdv-pagination .rdv-pagination__link--arrow {
  width: var(--rdv-pg-size);
  padding: 0;
  border-color: transparent;
}
.rdv-pagination .rdv-pagination__icon {
  display: block;
  width: 20px;
  height: 20px;
  flex-shrink: 0;
}

/* Flèche inerte (1re / dernière page) : même gabarit que l'active pour que
   les numéros ne bougent pas d'une page à l'autre. */
.rdv-pagination .rdv-pagination__link.is-disabled {
  opacity: .3;
  cursor: default;
}

/* Survol = état actif (comme continent.css), seulement sur les appareils à
   pointeur : évite l'état collé après un tap tactile. */
@media (hover: hover) {
  .rdv-pagination a.rdv-pagination__link:hover {
    background-color: var(--rdv-pg-ink);
    border-color: var(--rdv-pg-ink);
    color: var(--rdv-pg-on-ink);
    text-decoration: none;
  }
}

/* Focus clavier : contour sage foncé (≥ 3:1 sur le beige), décalé pour rester
   visible sur une case pleine ; z-index pour passer au-dessus des voisines. */
.rdv-pagination a.rdv-pagination__link:focus-visible {
  position: relative;
  z-index: 1;
  outline: 2px solid var(--rdv-pg-ink);
  outline-offset: 2px;
}

.rdv-pagination .rdv-pagination__item--ellipsis {
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: var(--rdv-pg-size);
  color: var(--rdv-pg-ink);
  font-family: 'Lexend Deca', sans-serif;
  font-size: 13px;
  font-weight: 300;
  line-height: 16px;
  user-select: none;
}

/* Texte réservé aux lecteurs d'écran (« Page », « Page suivante »…). */
.rdv-pagination .rdv-pagination__sr {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .rdv-pagination .rdv-pagination__link { transition: none; }
}

/* ============================================================
   Fenêtre compacte (< 480px de large) : 1 … c … N + flèches.
   Pire cas = 5 cibles de 44px + 2 ellipses de 18px = 256px → tient dans
   260px (écran 320px − gouttières 30px). Pas d'espacement entre les
   éléments (les flèches sans bordure et les ellipses aèrent déjà) sauf
   entre deux numéros contigus (1 2 / N-1 N), pour ne pas coller leurs bordures.
============================================================ */
@container rdv-pagination (max-width: 479.98px) {
  .rdv-pagination .rdv-pagination__list { column-gap: 0; }
  .rdv-pagination .rdv-pagination__item--extended { display: none; }
  .rdv-pagination .rdv-pagination__item--compact { display: flex; }
  .rdv-pagination .rdv-pagination__item--number + .rdv-pagination__item--number { margin-inline-start: 4px; }
}

/* Navigateurs sans container queries (iOS < 16) : même bascule à la largeur
   d'écran équivalente (480px de contenu + gouttières 30px). */
@supports not (container-type: inline-size) {
  @media (max-width: 539.98px) {
    .rdv-pagination .rdv-pagination__list { column-gap: 0; }
    .rdv-pagination .rdv-pagination__item--extended { display: none; }
    .rdv-pagination .rdv-pagination__item--compact { display: flex; }
    .rdv-pagination .rdv-pagination__item--number + .rdv-pagination__item--number { margin-inline-start: 4px; }
  }
}

/* ============================================================
   Desktop (≥769px) : même espacement que .section-more
============================================================ */
@media (min-width: 769px) {
  .rdv-pagination { padding: 40px 0; }
}