/* Pagination (Figma « Pagination », 01) — listes produits : 9 par page desktop, 6 mobile. Masquée s'il n'y a qu'une page.
   Desktop : résumé « Page x sur n » à gauche (Legend, carbon-muted), contrôles à droite, pastilles 40, gouttière 4.
   Mobile : résumé au-dessus, contrôles 36 px centrés. Page courante remplie carbone, texte blanc.
   Cible tactile étendue à 44 px par la gouttière (pseudo-élément). nav aria-label="Pagination", aria-current="page". */

.pagination { display: flex; flex-direction: column; align-items: center; gap: var(--space-12); margin-top: var(--space-32); }
@media (min-width: 1024px) {
  .pagination { flex-direction: row; justify-content: space-between; margin-top: var(--space-48); }
}
.pagination__summary { font-size: var(--text-legend-size); line-height: var(--text-legend-lh); color: var(--brandt-carbon-muted); }
.pagination__list { display: flex; align-items: center; gap: var(--space-4); }
.pagination__ellipsis { display: inline-flex; align-items: center; justify-content: center; width: var(--size-icon-24); font-size: var(--text-body-size); color: var(--brandt-carbon-muted); }

.pagination__item {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: var(--size-pastille-36); height: var(--size-pastille-36); border-radius: 50%;
  font-size: var(--text-body-size); font-weight: var(--text-body-weight); color: var(--brandt-carbon);
  transition: background-color var(--transition), color var(--transition);
}
@media (min-width: 1024px) { .pagination__item { width: var(--size-pastille-40); height: var(--size-pastille-40); } }
.pagination__item::after { content: ""; position: absolute; inset: calc((100% - var(--size-target-44)) / 2); } /* zone cliquable 44 px */
.pagination__item:hover { background: var(--brandt-light); }
.pagination__item[aria-current="page"] { background: var(--brandt-carbon); color: var(--brandt-white); }
.pagination__item:focus-visible { box-shadow: var(--focus-ring); }

.pagination__arrow { box-shadow: inset 0 0 0 var(--border-1) var(--brandt-line); }
.pagination__arrow svg { width: var(--size-icon-14); height: var(--size-icon-14); }
@media (min-width: 1024px) { .pagination__arrow svg { width: var(--size-icon-16); height: var(--size-icon-16); } }
.pagination__arrow:hover { background: var(--brandt-carbon); color: var(--brandt-white); }
.pagination__arrow[aria-disabled="true"] { opacity: var(--disabled-opacity); pointer-events: none; }