/* ==========================================================================
   Les Savons de Jadis — front v2 — pages/categorie.css
   Propre aux listes de produits : page d'une catégorie et résultats de recherche.
   La grille et la carte produit sont dans socle.css.
   Sommaire : 1. Rangée de catégories  2. Barre de filtres et de tri  3. État de la liste, liste vide
   4. Feuille « Filtrer et trier » (< 900 px)
   ========================================================================== */

/* LISTE DE PRODUITS --------------------------------------------------------- */
.liste { padding-top: var(--e-4); }
.liste__intro { max-width: 70ch; color: var(--texte-moyen); }
.liste__rayons { display: flex; flex-wrap: wrap; gap: var(--e-2); margin-top: var(--e-4); }
.puce-lien { display: inline-flex; align-items: center; min-height: var(--cible); padding: 0 var(--e-4); border: 1px solid var(--trait-champ); border-radius: var(--r-pilule); background: var(--blanc); font-size: .9375rem; font-weight: 500; white-space: nowrap; transition: border-color var(--d-2) ease, background-color var(--d-2) ease; }
.puce-lien:hover { border-color: var(--texte); }
.puce-lien:focus-visible { border-radius: var(--r-pilule); }
.puce-lien__nb { margin-left: var(--e-2); font-size: var(--fs-xs); font-weight: 500; color: var(--texte-moyen); font-variant-numeric: tabular-nums; }
.puce-lien[aria-current] .puce-lien__nb { color: inherit; }
.puce-lien[aria-current="true"], .puce-lien[aria-current="page"], .puce-lien[aria-pressed="true"] { background: var(--vert-rosee); border-color: var(--vert-fonce); color: var(--vert-profond); font-weight: 600; }
/* Barre de filtres : légère, au-dessus de la grille (trois réglages seulement, une colonne prendrait la place d'un produit) */
.liste__barre { margin-top: var(--e-5); padding-block: var(--e-4); border-block: 1px solid var(--trait); }
.liste__ouvrir { display: none; }
.filtres { display: flex; flex-wrap: wrap; align-items: end; gap: var(--e-4) var(--e-6); }
.filtres__tete, .filtres__pied { display: none; }
.filtres__groupe { min-width: 0; margin: 0; padding: 0; border: 0; }
.filtres__groupe--fin { margin-left: auto; }
.filtres__nom { display: block; float: none; width: auto; margin-bottom: var(--e-2); padding: 0; font-size: var(--fs-sm); font-weight: 600; color: var(--texte-moyen); }
.filtres__puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.filtres__prix { display: flex; align-items: end; gap: var(--e-3); font-size: .9375rem; color: var(--texte-moyen); }
.filtres__borne { display: grid; gap: 2px; }
.filtres__borne label { font-size: var(--fs-xs); font-weight: 500; }
.filtres__saisie { display: flex; align-items: center; gap: var(--e-1); }
.filtres__prix input { width: 76px; height: var(--cible); padding: 0 var(--e-2); border: 1.5px solid var(--trait-champ); border-radius: var(--r-sm); background: var(--blanc); font-size: 1rem; text-align: center; font-variant-numeric: tabular-nums; }
.filtres__prix input:hover { border-color: var(--vert-fonce); }
.filtres__prix input:focus-visible { border-radius: var(--r-sm); outline-offset: 2px; }
.filtres .tri select { min-width: 190px; }
.liste__etat { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-2) var(--e-3); min-height: 60px; padding-block: var(--e-2); }
.liste__compte { margin-right: var(--e-2); font-weight: 600; font-variant-numeric: tabular-nums; }
.filtre-actif { display: inline-flex; align-items: center; gap: var(--e-1); min-height: var(--cible); padding: 0 var(--e-2) 0 var(--e-4); border-radius: var(--r-pilule); background: var(--vert-brume); color: var(--vert-profond); font-size: var(--fs-sm); font-weight: 500; transition: background-color var(--d-2) ease; }
.filtre-actif:hover { background: var(--vert-rosee); }
.filtre-actif:focus-visible { border-radius: var(--r-pilule); }
.filtre-actif .ico { width: 18px; height: 18px; }
.liste__effacer { min-height: var(--cible); font-size: var(--fs-sm); }
/* Peu de résultats : les autres catégories sont proposées sous la grille */
.liste__suite { margin-top: var(--e-6); padding-top: var(--e-5); border-top: 1px solid var(--trait); }
.liste__suite-titre { font-size: var(--fs-lg); }
.liste__suite .liste__rayons { flex-wrap: wrap; margin: var(--e-3) 0 0; padding: 0; overflow: visible; }
/* La grille garde la hauteur d'une rangée : pas de saut quand un filtre vide la liste */
.liste__grille { min-height: 420px; }
.liste__vide { display: grid; justify-items: center; gap: var(--e-3); min-height: 420px; align-content: center; padding: var(--e-6) var(--e-4); text-align: center; border: 1px dashed var(--trait-champ); border-radius: var(--r-lg); }
.liste__vide[hidden] { display: none; }
.liste__vide-ico { display: grid; place-items: center; width: 72px; height: 72px; border-radius: var(--r-galet-b); background: var(--vert-brume); color: var(--vert-fonce); }
.liste__vide-titre { font-family: var(--font-titre); font-weight: 700; font-size: var(--fs-lg); overflow-wrap: anywhere; }
.liste__vide p { color: var(--texte-moyen); max-width: 52ch; }
.liste__vide .liste__vide-titre { color: var(--texte); }
.liste__vide .liste__rayons { justify-content: center; margin-top: var(--e-2); }
.filtres-rideau { display: none; }
@media (max-width: 899px) {
  .liste__rayons { flex-wrap: nowrap; margin-inline: calc(-1 * var(--gouttiere)); padding: 2px var(--gouttiere); overflow-x: auto; scrollbar-width: none; }
  .liste__rayons::-webkit-scrollbar { display: none; }
  .liste__vide .liste__rayons { flex-wrap: wrap; margin-inline: 0; padding: 0; overflow: visible; }
  .liste__barre { display: flex; align-items: center; justify-content: space-between; gap: var(--e-3); padding-block: var(--e-3); }
  .liste__ouvrir { display: inline-flex; }
  .liste__etat { min-height: 0; }
  /* Les mêmes réglages, dans une feuille qui monte du bas */
  .filtres-rideau { display: block; position: fixed; inset: 0; z-index: var(--z-rideau); background: rgba(45, 42, 37, .5); opacity: 0; visibility: hidden; transition: opacity var(--d-3) ease, visibility 0s linear var(--d-3); }
  .filtres-rideau.est-ouvert { opacity: 1; visibility: visible; transition-delay: 0s; }
  .filtres { position: fixed; left: 0; right: 0; bottom: 0; z-index: var(--z-tiroir); flex-direction: column; flex-wrap: nowrap; align-items: stretch; gap: var(--e-5); max-width: 640px; max-height: 88dvh; margin-inline: auto; padding: 0 var(--e-4); overflow-y: auto; overscroll-behavior: contain; background: var(--blanc); border-radius: var(--r-lg) var(--r-lg) 0 0; transform: translateY(100%); visibility: hidden; transition: transform var(--d-3) var(--ease-tiroir), visibility 0s linear var(--d-3); }
  .filtres.est-ouvert { transform: none; visibility: visible; transition-delay: 0s; }
  .filtres__tete { display: flex; align-items: center; justify-content: space-between; position: sticky; top: 0; z-index: 1; margin-inline: calc(-1 * var(--e-4)); padding: var(--e-3) var(--e-2) var(--e-2) var(--e-4); background: var(--blanc); border-bottom: 1px solid var(--trait); }
  .filtres__titre { font-size: var(--fs-lg); }
  .filtres__groupe--fin { margin-left: 0; }
  .filtres .tri { align-items: stretch; flex-direction: column; gap: var(--e-2); }
  .filtres .tri label { font-weight: 600; }
  .filtres .tri select { width: 100%; height: 48px; }
  .filtres__pied .btn { padding-inline: var(--e-4); white-space: nowrap; font-size: .9375rem; }
  .filtres__pied { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--e-2); position: sticky; bottom: 0; margin-inline: calc(-1 * var(--e-4)); padding: var(--e-3) var(--e-4) calc(var(--e-3) + env(safe-area-inset-bottom, 0px)); background: var(--blanc); border-top: 1px solid var(--trait); }
}
@media (prefers-reduced-motion: reduce) { .filtres, .filtres-rideau { transition: none !important; } }
.liste .bon-a-savoir { margin-top: var(--e-7); }

/* Page de résultats de la recherche : catégories et pages correspondantes, au-dessus de la grille */
.recherche-liens { display: grid; gap: var(--e-4); margin-top: var(--e-4); padding-bottom: var(--e-4); }
.recherche-liens__titre { font-family: var(--font-texte); font-size: var(--fs-sm); font-weight: 600; color: var(--texte-moyen); }
.recherche-liens .liste__rayons { margin-top: var(--e-2); }
.recherche-liens .puce-lien .ico { width: 14px; height: 14px; }
@media (min-width: 768px) { .recherche-liens { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
#recherche-vide .btn { margin-top: var(--e-4); }