/* ════════════════════════════════════════════════════════════════
   Variables CSS — à surcharger au besoin
   ════════════════════════════════════════════════════════════════ */
:root {
  --ep-green:     #128C7E;
  --ep-green2:    #075E54;
  --ep-gold:      #F4A724;
  --ep-dark:      #0f172a;
  --ep-gray:      #64748b;
  --ep-light-bg:  #f8fafc;
  --ep-border:    #e2e8f0;
  --ep-radius:    .75rem;
  --ep-shadow:    0 4px 24px rgba(0,0,0,.07);
  --ep-font:      'Inter', 'Outfit', system-ui, sans-serif;
}

/* ════════════════════════ VITRINE — Catalogue ════════════════════ */

.catalogue-page { max-width: 1200px; margin: 0 auto; padding: 2rem 1.5rem; }
.catalogue-header { margin-bottom: 2rem; }
.catalogue-header h1 { font-size: 2rem; font-weight: 800; color: var(--ep-dark); margin: 0 0 .5rem; }

/* Filtres */
.filters-bar { display: flex; flex-wrap: wrap; gap: .75rem; margin-bottom: 2rem;
  background: #fff; border: 1px solid var(--ep-border); border-radius: var(--ep-radius); padding: 1rem; }
.filter-chip { padding: .4rem 1rem; border: 1px solid var(--ep-border); border-radius: 999px;
  font-size: .85rem; font-weight: 500; cursor: pointer; transition: all .2s; background: #fff; }
.filter-chip:hover, .filter-chip--active { background: var(--ep-green); color: #fff; border-color: var(--ep-green); }

/* Grille produits */
.products-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 1.5rem; }

/* Tri */
.sort-bar { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1rem; }
.sort-bar__count { color: var(--ep-gray); font-size: .9rem; }
.sort-select { padding: .4rem .75rem; border: 1px solid var(--ep-border); border-radius: .5rem; font-size: .85rem; }

/* Pagination */
.pagination { display: flex; justify-content: center; gap: .5rem; margin-top: 3rem; }
.page-btn { padding: .5rem .9rem; border: 1px solid var(--ep-border); border-radius: .5rem;
  font-size: .85rem; text-decoration: none; color: var(--ep-gray); transition: all .2s; }
.page-btn:hover, .page-btn--active { background: var(--ep-green); color: #fff; border-color: var(--ep-green); }

@media (max-width: 640px) { .products-grid { grid-template-columns: repeat(2, 1fr); gap: 1rem; } }