/* ==========================================================================
   O-Run — Catalogue
   Chargée après main.css : complète la colonne de filtres sur ordinateur et
   la transforme en panneau (feuille montante) sur téléphone.
   Toutes les couleurs passent par les jetons de main.css pour suivre le
   thème sombre (data-theme="dark"). Seule exception : le voile du panneau,
   qui doit assombrir dans les deux thèmes — défini ici comme un jeton local.
   ========================================================================== */

:root {
  --sheet-scrim: rgba(14, 15, 13, .52);
  --sheet-max-h: 86vh;
}

/* 1. Grille de page ------------------------------------------------------ */
.catalog {
  display: grid;
  grid-template-columns: 262px minmax(0, 1fr);
  gap: 2.4rem;
  align-items: start;
  padding: 2.2rem 0 4.5rem;
}
/* Le panneau est placé APRÈS la grille dans le document (articles d'abord
   sur téléphone) ; sur ordinateur on le remet visuellement à gauche. */
.filters       { grid-column: 1; grid-row: 1; }
.catalog__main { grid-column: 2; grid-row: 1; min-width: 0; }

/* 2. Barre d'actions ----------------------------------------------------- */
.catalog__bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
  margin-bottom: 1.4rem;
}
.catalog__tools { display: flex; align-items: center; gap: .6rem; }
.catalog__sort  { display: flex; align-items: center; gap: .5rem; margin: 0; }
.catalog__sort select { width: auto; min-width: 200px; }
.catalog__filter { display: none; }           /* bouton réservé au téléphone */
.catalog__filter-icon { display: inline-flex; }
.catalog__badge {
  display: inline-grid; place-items: center;
  min-width: 19px; height: 19px; padding: 0 .3rem;
  border-radius: 100px; background: var(--ink); color: var(--paper);
  font-size: .7rem; font-weight: 700; line-height: 1;
}

/* 3. Colonne de filtres (ordinateur) ------------------------------------- */
.filters__box { padding: 1.3rem 1.2rem; }
.filters__group { padding-bottom: 1.1rem; margin-bottom: 1.1rem; }
.filters__group h4 {
  font-size: .74rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted); margin-bottom: .6rem;
}
.filters__list a { padding: .38rem .55rem; gap: .8rem; align-items: center; }
.filters__count {
  font-size: .76rem; font-variant-numeric: tabular-nums; color: var(--muted);
  background: var(--surface-2); border-radius: 100px; padding: 0 .45rem; flex: none;
}
.filters__list a.is-active .filters__count { background: transparent; color: inherit; }
.filters__list--scroll { max-height: 232px; overflow-y: auto; padding-right: .2rem; }
.filters__chips a { transition: background .15s, color .15s, border-color .15s; }
.filters__apply { margin-top: .7rem; }

/* Catégorie consultée, en tête du panneau. */
.filters__now {
  display: flex; flex-direction: column; gap: .15rem;
  background: var(--surface-2); border-radius: var(--radius);
  padding: .7rem .85rem; margin-bottom: 1.1rem;
}
.filters__now-label {
  font-size: .68rem; font-weight: 700; letter-spacing: .13em;
  text-transform: uppercase; color: var(--muted);
}
.filters__now strong { font-family: var(--display); font-size: 1.05rem; }
.filters__now .linky { font-size: .8rem; color: var(--ink-3); margin-top: .2rem; align-self: flex-start; }

/* En-tête, pied et voile : uniquement en mode panneau. */
.filters__head,
.filters__foot,
.filters__active,
.filters__backdrop { display: none; }

/* 4. Tablette : on garde la colonne, simplement plus étroite -------------- */
@media (min-width: 901px) and (max-width: 1080px) {
  .catalog { grid-template-columns: 226px minmax(0, 1fr); gap: 1.6rem; }
  .filters__box { display: block; padding: 1.1rem 1rem; }
  .filters__group {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 1.1rem; margin-bottom: 1.1rem;
  }
  .filters__group:last-of-type { border: 0; margin-bottom: 0; padding-bottom: 0; }
}

/* 5. Téléphone ----------------------------------------------------------- */
@media (max-width: 900px) {
  .catalog { display: block; padding: 1.2rem 0 3.5rem; }
  .catalog__main, .filters { display: block; }

  /* Barre collante sous l'en-tête : nombre d'articles, bouton, tri. */
  .catalog__bar {
    position: sticky; top: calc(var(--header-h) - 1px); z-index: 30;
    isolation: isolate;
    flex-direction: column; align-items: stretch; gap: .5rem;
    padding: .6rem 0 .7rem; margin-bottom: 1rem;
  }
  .catalog__bar::before {
    content: ""; position: absolute; inset: 0 -1.25rem; z-index: -1;
    background: var(--paper); border-bottom: 1px solid var(--line-soft);
  }
  .catalog__count { margin: 0; }
  .catalog__tools > * { flex: 1 1 0; min-width: 0; }
  .catalog__filter { display: inline-flex; }
  .catalog__sort select { width: 100%; min-width: 0; }

  /* Repli sans JavaScript : le panneau reste un bloc en fin de page, atteint
     par l'ancre « Filtrer ». Rien n'est jamais inaccessible. */
  .filters { position: static; margin-top: 2.4rem; scroll-margin-top: calc(var(--header-h) + 5rem); }
  .filters__active { display: block; }
  .filters__active .chips { margin-bottom: 1.1rem; }
  /* Le titre « Filtrer » sert aussi de repère au bloc rejoint par l'ancre. */
  .filters__head {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem; margin-bottom: .8rem;
  }
  .filters__head h2 { margin: 0; font-size: 1.35rem; }
  .filters__close { display: none; }         /* sans JS, rien à fermer */

  /* --- Avec JavaScript : feuille qui monte depuis le bas ---------------- */
  .has-filter-js .filters {
    position: fixed; inset: auto 0 0 0; z-index: 120; margin: 0;
    visibility: hidden;
    transform: translateY(100%);
    transition: transform .3s var(--ease), visibility .3s var(--ease);
  }
  .has-filter-js.filters-open .filters { visibility: visible; transform: none; }

  .has-filter-js .filters__panel {
    display: flex; flex-direction: column;
    max-height: var(--sheet-max-h);
    background: var(--surface);
    border-top: 1px solid var(--line);
    border-radius: var(--radius-xl) var(--radius-xl) 0 0;
    box-shadow: var(--shadow-l);
    overflow: hidden;
  }
  .has-filter-js .filters__head {
    padding: 1rem 1.2rem .8rem; margin: 0;
    border-bottom: 1px solid var(--line-soft); flex: none;
  }
  .has-filter-js .filters__close {
    display: grid; place-items: center;
    border: 0; background: var(--surface-2); color: var(--ink);
    width: 38px; height: 38px; border-radius: 50%; flex: none;
    font-size: 1.5rem; line-height: 1; cursor: pointer;
  }
  .has-filter-js .filters__close:hover { background: var(--line-soft); }

  .has-filter-js .filters__scroll {
    flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch;
    padding: 1rem 1.2rem 1.4rem; overscroll-behavior: contain;
  }
  .has-filter-js .filters__box {
    background: none; border: 0; border-radius: 0; padding: 0;
    display: block;
  }
  .has-filter-js .filters__group {
    border-bottom: 1px solid var(--line-soft);
    padding-bottom: 1.2rem; margin-bottom: 1.2rem;
  }
  .has-filter-js .filters__group:last-of-type { border: 0; margin-bottom: 0; padding-bottom: 0; }
  /* Cibles plus larges au doigt. */
  .has-filter-js .filters__list a { padding: .62rem .6rem; font-size: .95rem; }
  .has-filter-js .filters__chips a { padding: .5rem 1rem; font-size: .9rem; }
  .has-filter-js .filters__list--scroll { max-height: 300px; }
  .has-filter-js .filters__price input { padding: .7rem .8rem; font-size: .95rem; }

  .has-filter-js .filters__foot {
    display: flex; align-items: center; gap: .6rem; flex: none;
    padding: .85rem 1.2rem calc(.85rem + env(safe-area-inset-bottom));
    border-top: 1px solid var(--line);
    background: var(--surface);
  }
  .has-filter-js .filters__foot > * { flex: 1 1 auto; }
  .has-filter-js .filters__foot .btn { padding: .8rem 1rem; font-size: .9rem; }

  .has-filter-js .filters__backdrop {
    display: block; position: fixed; inset: 0; z-index: 110;
    background: var(--sheet-scrim);
    opacity: 0; visibility: hidden;
    transition: opacity .3s var(--ease), visibility .3s var(--ease);
  }
  .has-filter-js.filters-open .filters__backdrop { opacity: 1; visibility: visible; }
}

/* Blocage du défilement pendant l'ouverture. */
.filters-open, .filters-open body { overflow: hidden; }

@media (max-width: 560px) {
  .catalog__sort select { font-size: .88rem; padding-left: .7rem; }
  .catalog__filter { padding-inline: .8rem; }
}

@media (prefers-reduced-motion: reduce) {
  .filters, .filters__backdrop { transition: none; }
}