/* =========================================================
   CATALOGUE (filtres, résultats, pagination)
   ========================================================= */

/* ---------- Catalogue ---------- */
.catalog { display: grid; gap: var(--space-3); align-items: start; }
.catalog__toggle { display: none; justify-self: start; }
.js .catalog__toggle { display: inline-flex; }

.filters {
  display: grid;
  gap: var(--space-3);
  padding: var(--space-3);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-l);
}
@media (max-width: 1023px) {
  .js .filters:not(.is-open) { display: none; }
}
.filters__head { display: flex; align-items: baseline; justify-content: space-between; }
.filters__head h2 { font-size: var(--fs-h4); font-family: var(--font-body); font-weight: 600; letter-spacing: 0; }
.filters__reset { font-size: var(--fs-sm); color: var(--c-muted); }
.filters__group { display: grid; gap: .5rem; border: 0; padding: 0; min-width: 0; }
.filters__group > label, .filters__group legend {
  font-size: var(--fs-xs); font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--c-muted);
  padding: 0; margin-bottom: .5rem;
}
/* Avec JavaScript, les filtres s'appliquent tout seuls */
.js .filters__submit { display: none; }
@media (max-width: 1023px) {
  /* Sur mobile, le bouton referme le panneau de filtres */
  .js .filters__submit { display: inline-flex; }
}

.catalog__results { min-width: 0; transition: opacity .25s var(--ease); }
.catalog__results.is-loading { opacity: .45; pointer-events: none; }

.results-bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--space-2); margin-bottom: var(--space-3); }
.results-bar__count { color: var(--c-muted); }
.results-bar__count strong { color: var(--c-text); font-size: var(--fs-lg); }
.results-bar__sort { display: flex; align-items: center; gap: .6rem; font-size: var(--fs-sm); color: var(--c-muted); }
.results-bar__sort select { width: auto; min-height: 42px; }

.offers-grid--catalog { grid-template-columns: repeat(auto-fill, minmax(min(100%, 260px), 1fr)); }

.pagination { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin-top: var(--space-4); }
.pagination__link {
  display: grid; place-items: center;
  min-width: 44px; height: 44px; padding-inline: .5rem;
  border-radius: 50%;
  text-decoration: none;
  font-weight: 600;
  border: 1.5px solid var(--c-line);
  transition: background-color var(--dur) var(--ease), border-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pagination__link:hover { border-color: var(--c-primary); }
.pagination__link[aria-current="page"] { background: var(--c-primary); border-color: var(--c-primary); color: #fff; }
.icon--flip { transform: scaleX(-1); }

@media (min-width: 1024px) {
  .catalog { grid-template-columns: 290px 1fr; gap: var(--space-4); }
  .js .catalog__toggle { display: none; }
  .filters { position: sticky; top: calc(var(--header-h) + var(--space-2)); max-height: calc(100vh - var(--header-h) - 2rem); overflow-y: auto; }
}