body { padding-top:80px; }

  /* Hero compact catégorie */
  .cat-hero {
    position:relative; height:42vh; min-height:340px; overflow:hidden;
    background:var(--ink) center/cover no-repeat;
    background-image:url('https://images.unsplash.com/photo-1571115177098-24ec42ed204d?auto=format&fit=crop&w=2400&q=85');
  }
  .cat-hero::after {
    content:""; position:absolute; inset:0;
    background:linear-gradient(180deg, rgba(43,37,34,0.35) 0%, rgba(43,37,34,0.25) 50%, rgba(43,37,34,0.55) 100%);
  }
  .cat-hero-content {
    position:relative; z-index:2; height:100%;
    max-width:var(--container); margin:0 auto; padding:0 1.5rem;
    display:flex; flex-direction:column; justify-content:center; align-items:flex-start;
    color:var(--ivory);
  }
  .cat-hero-content .eyebrow { color:var(--gold-light); margin:0 0 .75rem; }
  .cat-hero-content h1 {
    font-family:var(--serif); font-weight:300; font-size:clamp(2.5rem, 5vw, 4rem);
    line-height:1.05; letter-spacing:-.01em; margin:0 0 1rem; color:var(--ivory);
  }
  .cat-hero-content p { max-width:48ch; font-size:1.0625rem; font-weight:300; opacity:.92; margin:0; }

  /* Breadcrumb */
  .breadcrumb {
    padding:1.5rem 0; font-family:var(--sans); font-size:.75rem;
    letter-spacing:.08em; color:var(--ink-muted);
  }
  .breadcrumb a { color:var(--ink-soft); text-decoration:none; transition:color 250ms; }
  .breadcrumb a:hover { color:var(--gold-deep); }
  .breadcrumb span { margin:0 .5rem; color:var(--ink-muted); }

  /* Layout listing */
  .listing { display:grid; grid-template-columns:260px 1fr; gap:3.5rem; align-items:start; }

  /* Filters sticky */
  .filters { position:sticky; top:100px; }
  .filters h3 {
    font-family:var(--serif); font-weight:500; font-size:1.2rem;
    letter-spacing:0; text-transform:none; color:var(--ink);
    margin:0 0 1.25rem; padding-bottom:.75rem; border-bottom:1px solid var(--line);
    display:flex; justify-content:space-between; align-items:baseline;
  }
  .filters h3 small {
    font-family:var(--serif); font-style:italic; font-weight:400; font-size:1.2rem;
    letter-spacing:0; text-transform:none; color:var(--gold-deep); cursor:pointer;
  }
  .filter-group { margin-bottom:2rem; }
  .filter-group h4 {
    font-family:var(--serif); font-weight:400; font-style:italic; font-size:1.0625rem;
    color:var(--ink); margin:0 0 .75rem;
  }
  .filter-group ul { list-style:none; padding:0; margin:0; }
  .filter-group li { margin-bottom:.55rem; }
  .filter-group label {
    display:flex; align-items:center; gap:.6rem; cursor:pointer;
    font-family:var(--sans); font-size:.875rem; color:var(--ink-soft);
    transition: color 250ms;
  }
  .filter-group label:hover { color:var(--ink); }
  .filter-group input[type="checkbox"] { display:none; }
  .filter-group label .box {
    width:16px; height:16px; border:1px solid var(--border-strong); background:var(--white);
    display:inline-flex; align-items:center; justify-content:center;
    transition: background 250ms, border-color 250ms; flex-shrink:0;
  }
  .filter-group label .box::after {
    content:""; width:8px; height:8px; background:var(--gold);
    opacity:0; transition:opacity 200ms;
  }
  .filter-group input:checked + label .box { border-color:var(--gold); }
  .filter-group input:checked + label .box::after { opacity:1; }
  .filter-group label .count { margin-left:auto; font-size:.75rem; color:var(--ink-muted); }
  .filter-group .chips { display:flex; flex-wrap:wrap; gap:.4rem; }
  .filter-group .chips label {
    padding:.4rem .85rem; border:1px solid var(--border-strong); background:var(--white);
    font-size:.75rem; letter-spacing:.04em;
    transition: all 250ms;
  }
  .filter-group .chips label .box, .filter-group .chips label .count { display:none; }
  .filter-group .chips input:checked + label { background:var(--ink); color:var(--ivory); border-color:var(--ink); }

  /* Range slider */
  .range-wrap { padding:.5rem 0; }
  .range-vals {
    display:flex; justify-content:space-between; font-family:var(--serif);
    font-weight:500; font-size:.95rem; color:var(--gold-deep); margin-bottom:.5rem;
  }
  .range-slider {
    position:relative; height:2px; background:var(--border-strong);
  }
  .range-slider .track { position:absolute; top:0; bottom:0; background:var(--gold); }
  .range-slider .dot {
    position:absolute; top:50%; transform:translate(-50%,-50%);
    width:14px; height:14px; border-radius:50%; background:var(--ivory);
    border:2px solid var(--gold-deep); cursor:pointer;
  }

  /* Listing head : count + sort + view */
  .listing-head {
    display:flex; justify-content:space-between; align-items:center;
    padding-bottom:1.25rem; margin-bottom:2rem; border-bottom:1px solid var(--line);
    flex-wrap:wrap; gap:1rem;
  }
  .listing-head .count { font-family:var(--serif); font-style:italic; font-size:1.2rem; color:var(--ink-soft); }
  .listing-head .sort {
    display:flex; align-items:center; gap:.75rem;
    font-family:var(--sans); font-size:.75rem; color:var(--ink-soft);
  }
  .listing-head .sort select {
    background:transparent; border:none; border-bottom:1px solid var(--ink);
    font-family:var(--sans); font-size:.8125rem; padding:.4rem .25rem;
    cursor:pointer; color:var(--ink); letter-spacing:.04em;
  }
  .listing-head .sort select:focus { outline:none; border-bottom-color:var(--gold); }

  /* Cards grid 3 col */
  .listing .grid-products { grid-template-columns:repeat(3, 1fr); }
  @media (max-width:1024px) {
    .listing { grid-template-columns:1fr; gap:2rem; }
    .filters { position:static; }
    .listing .grid-products { grid-template-columns:repeat(2, 1fr); }
  }
  @media (max-width:640px) {
    .listing .grid-products { grid-template-columns:1fr; }
  }

  /* Pagination */
  .pagination {
    display:flex; justify-content:center; align-items:center; gap:.5rem;
    margin-top:4rem;
  }
  .pagination a, .pagination span {
    width:42px; height:42px; display:inline-flex; align-items:center; justify-content:center;
    font-family:var(--sans); font-size:.875rem; color:var(--ink); text-decoration:none;
    border:1px solid transparent; transition: all 250ms var(--ease-elegant);
  }
  .pagination a:hover { border-color:var(--gold); color:var(--gold-deep); }
  .pagination .is-active { background:var(--ink); color:var(--ivory); border-color:var(--ink); }
  .pagination .dots { border:none; }
  .pagination .arrow {
    border:1px solid var(--border-strong); padding:0 .75rem; width:auto;
    font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  }
  .pagination .arrow:hover { background:var(--ink); color:var(--ivory); border-color:var(--ink); }