/* Boutique, collections, recherche */
.needs-band { background: linear-gradient(155deg, var(--leaf-deep) 0%, #4c6a3a 60%, var(--leaf) 130%); color: #fff; border-radius: var(--r-lg); padding: var(--space-6); margin-top: var(--space-5); box-shadow: var(--glow-band); }
.needs-band h2 { color: #fff; margin-bottom: var(--space-2); }
.needs-band p { color: rgba(255,255,255,.85); margin-bottom: var(--space-5); max-width: 52ch; }
.needs-band .needs { grid-template-columns: repeat(6, 1fr); }
.needs-band .need { background: #fff; border-color: #fff; min-height: 7.5rem; padding: var(--space-4); box-shadow: var(--glow-sm); }
.needs-band .need:hover, .needs-band .need[aria-pressed="true"] { background: var(--leaf-tint); border-color: var(--leaf-tint); box-shadow: var(--glow-lg); transform: translateY(-3px); }
.needs-band .need strong { font-size: var(--text-lg); }
.needs-band .need span { font-size: var(--text-xs); }
.needs-band .need .go { display: none; }
.filter-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); flex-wrap: wrap; margin: var(--space-6) 0 var(--space-5); }
.filter-bar .count { color: var(--ink-dim); font-size: var(--text-sm); }
.p-card[hidden] { display: none; }
.collections { display: grid; grid-template-columns: repeat(4, 1fr); gap: var(--space-4); }
.collection-card { display: flex; flex-direction: column; gap: var(--space-2); padding: var(--space-5); border: 1px solid var(--line); border-radius: var(--r-md); background: var(--surface-alt); text-decoration: none; color: var(--ink); box-shadow: var(--glow-xs); transition: border-color var(--dur), box-shadow var(--dur), transform var(--dur), background var(--dur); }
.collection-card:hover { border-color: var(--leaf); color: var(--ink); background: var(--surface); box-shadow: var(--glow); transform: translateY(-3px); }
.collection-card strong { font-family: var(--font-display); font-size: var(--text-xl); font-weight: 600; }
.collection-card span { color: var(--ink-dim); font-size: var(--text-sm); }
.collection-card .go { color: var(--leaf-deep); font-weight: 700; margin-top: auto; }
.search-form { display: flex; gap: var(--space-3); max-width: 44rem; }
.search-form .input { flex: 1; }
@media (max-width: 75em) { .needs-band .needs { grid-template-columns: repeat(3, 1fr); } .collections { grid-template-columns: 1fr 1fr; } }
@media (max-width: 40em) { .needs-band .needs { grid-template-columns: 1fr 1fr; } .needs-band { padding: var(--space-5) var(--space-4); } .collections { grid-template-columns: 1fr; } .search-form { flex-direction: column; } }

/* ==========================================================================
   Boutique refondue (demande David, 12/09/2026)
   Filtres en colonne a gauche sur grand ecran, en pastilles defilantes sur
   mobile. On entre tout de suite dans les produits.
   ========================================================================== */
.boutique-tete { padding: var(--space-4) 0 var(--space-5); }
.boutique-tete h1 { font-size: var(--text-3xl); }
.boutique-tete p { color: var(--ink-dim); margin-top: var(--space-2); max-width: 52ch; }

.boutique-layout {
  display: grid;
  grid-template-columns: 17rem minmax(0, 1fr);
  gap: var(--space-6);
  align-items: start;
  padding-bottom: var(--space-7);
}
.boutique-layout > * { min-width: 0; }

.boutique-filtres {
  position: sticky;
  top: 6rem;
  padding: var(--space-5);
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  background: var(--surface);
  box-shadow: var(--glow-xs);
}
.bf-entete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); margin-bottom: var(--space-4); }
.bf-entete h2 { font-size: var(--text-lg); margin: 0; }
.bf-groupe { border: 0; padding: 0; margin: 0 0 var(--space-5); }
.bf-groupe legend {
  padding: 0;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-3);
}
.bf-pastilles { display: flex; flex-wrap: wrap; gap: var(--space-2); }

.pastille {
  min-height: var(--tap-sm);
  padding: 0 var(--space-4);
  border-radius: var(--r-pill);
  border: 1px solid var(--line-strong);
  background: var(--surface);
  font-size: var(--text-sm);
  font-weight: 600;
  color: var(--ink);
  white-space: nowrap;
  transition: border-color var(--dur) var(--ease), background-color var(--dur) var(--ease), color var(--dur) var(--ease);
}
.pastille:hover { border-color: var(--leaf); background: var(--leaf-tint); }
.pastille[aria-pressed="true"] {
  background: var(--leaf-deep);
  border-color: var(--leaf-deep);
  color: #fff;
}

.bf-collections { padding-top: var(--space-4); border-top: 1px solid var(--line); }
.bf-titre { font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-2); }
.bf-collections a {
  display: flex; align-items: center; min-height: var(--tap-sm);
  font-size: var(--text-sm); font-weight: 600; color: var(--leaf-deep); text-decoration: none;
}
.bf-collections a:hover { text-decoration: underline; }

.bf-barre {
  display: flex; align-items: center; justify-content: space-between;
  gap: var(--space-4); flex-wrap: wrap;
  padding-bottom: var(--space-4);
  border-bottom: 1px solid var(--line);
  margin-bottom: var(--space-5);
}
.bf-compte { font-weight: 700; margin: 0; }
.bf-tri { display: flex; align-items: center; gap: var(--space-2); }
.bf-tri label { font-size: var(--text-sm); color: var(--ink-dim); }
.bf-tri select { min-height: var(--tap-sm); max-width: 16rem; }

.bf-actifs { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); margin-bottom: var(--space-4); }
.bf-actifs-titre { font-size: var(--text-sm); color: var(--ink-dim); }
.bf-actif {
  display: inline-flex; align-items: center; gap: var(--space-2);
  min-height: var(--tap-sm); padding: 0 var(--space-3);
  border-radius: var(--r-pill); border: 1px solid var(--leaf);
  background: var(--leaf-tint); color: var(--leaf-deep);
  font-size: var(--text-sm); font-weight: 600;
}
.bf-actif span[aria-hidden] { font-size: var(--text-lg); line-height: 1; }
.bf-actif:hover { background: var(--surface); }

.bf-reassure {
  margin-top: var(--space-7);
  padding-top: var(--space-5);
  border-top: 1px solid var(--line);
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 15rem), 1fr));
  gap: var(--space-4);
}

/* ---------------------------------------------------------------- mobile */
@media (max-width: 62em) {
  .boutique-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
  .boutique-filtres {
    position: static;
    padding: var(--space-4) 0;
    border: 0;
    border-block: 1px solid var(--line);
    border-radius: 0;
    box-shadow: none;
  }
  .bf-groupe { margin-bottom: var(--space-4); }
  /* les pastilles defilent horizontalement, sans couper la derniere */
  .bf-pastilles {
    flex-wrap: nowrap;
    overflow-x: auto;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    padding-bottom: var(--space-2);
    margin-inline: calc(var(--gutter) * -1);
    padding-inline: var(--gutter);
    scrollbar-width: thin;
  }
  .bf-pastilles .pastille { scroll-snap-align: start; flex: none; }
  .bf-collections { display: none; }
  .bf-barre { margin-bottom: var(--space-4); }
}

/* Sur grand écran tous les filtres sont visibles : le bouton ne sert qu'au mobile,
   où l'on veut voir les produits sans dérouler trois groupes. */
.bf-plus { display: none; }
@media (max-width: 62em) {
  .bf-plus {
    display: inline-flex; align-items: center; gap: var(--space-2);
    min-height: var(--tap-sm); padding: 0 var(--space-4);
    border-radius: var(--r-pill); border: 1px dashed var(--line-strong);
    background: var(--surface); font-size: var(--text-sm); font-weight: 600; color: var(--leaf-deep);
  }
  .bf-plus::after { content: "+"; font-size: var(--text-lg); line-height: 1; }
  .bf-plus[aria-expanded="true"]::after { content: "−"; }
  .bf-avances[hidden] { display: none; }
  .bf-avances { margin-top: var(--space-4); }
}

/* Mobile : on resserre tout ce qui precede les produits pour qu'ils
   apparaissent des le premier ecran. */
@media (max-width: 62em) {
  .boutique-tete { padding: var(--space-3) 0 var(--space-4); }
  .boutique-tete h1 { font-size: var(--text-2xl); }
  .boutique-tete p { font-size: var(--text-sm); }
  .boutique-filtres { padding: var(--space-3) 0; }
  .bf-entete { margin-bottom: var(--space-3); }
  .bf-entete h2 { font-size: var(--text-base); font-family: var(--font-text); }
  .bf-groupe { margin-bottom: var(--space-3); }
  .bf-groupe legend { margin-bottom: var(--space-2); }
  .bf-barre { padding-bottom: var(--space-3); margin-bottom: var(--space-3); }
  .bf-barre { flex-wrap: nowrap; }
  .bf-tri label { display: none; }
  .bf-tri select { max-width: 12rem; }
}

/* ---------------------------------------------- filtre prix : barre reglable */
.bf-label {
  display: block;
  font-size: var(--text-xs); font-weight: 700; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-dim); margin-bottom: var(--space-2);
}
.bf-groupe select { width: 100%; min-height: var(--tap-sm); }

.bf-prix-valeur { font-weight: 700; color: var(--ink); margin-bottom: var(--space-2); }

/* Une seule zone : la piste decorative et les deux curseurs sont centres
   verticalement dessus. La hauteur de la piste interne des curseurs vaut celle
   du curseur, ce qui centre la pastille sans calcul de marge fragile. */
.bf-prix-zone { position: relative; height: 2.4rem; }
.bf-prix-piste {
  position: absolute;
  inset-inline: .8rem;      /* on laisse la place aux pastilles aux extremites */
  top: 50%;
  transform: translateY(-50%);
  height: .4rem;
  border-radius: var(--r-pill);
  background: color-mix(in srgb, var(--leaf-light) 45%, var(--paper));
}
.bf-prix-piste span {
  position: absolute;
  top: 0; bottom: 0;
  border-radius: var(--r-pill);
  background: linear-gradient(90deg, var(--leaf-deep), var(--leaf));
}

.bf-prix-zone input[type="range"] {
  position: absolute;
  inset-inline: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 1.6rem;
  margin: 0;
  padding: 0;
  background: transparent;
  appearance: none;
  -webkit-appearance: none;
  pointer-events: none;      /* la piste ne capte rien, seule la pastille repond */
  touch-action: none;        /* un glissement ne fait plus defiler la page */
}
.bf-prix-zone input[type="range"]:focus { outline: none; }

.bf-prix-zone input[type="range"]::-webkit-slider-runnable-track {
  height: 1.6rem; background: transparent; border: 0;
}
.bf-prix-zone input[type="range"]::-moz-range-track {
  height: 1.6rem; background: transparent; border: 0;
}
.bf-prix-zone input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  pointer-events: auto;
  touch-action: none;
  width: 1.6rem; height: 1.6rem;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--leaf-deep);
  box-shadow: var(--glow-sm);
  cursor: pointer;
}
.bf-prix-zone input[type="range"]::-moz-range-thumb {
  pointer-events: auto;
  touch-action: none;
  width: 1.6rem; height: 1.6rem;
  box-sizing: border-box;
  border-radius: 50%;
  border: 3px solid var(--surface);
  background: var(--leaf-deep);
  box-shadow: var(--glow-sm);
  cursor: pointer;
}
.bf-prix-zone input[type="range"]:focus-visible::-webkit-slider-thumb { box-shadow: var(--focus); }
.bf-prix-zone input[type="range"]:focus-visible::-moz-range-thumb { box-shadow: var(--focus); }
/* le curseur du haut passe devant quand les deux se rejoignent */
.bf-prix-zone input[data-prix-max] { z-index: 2; }

.bf-prix-bornes {
  display: flex; justify-content: space-between;
  font-size: var(--text-sm); color: var(--ink-dim);
  margin-top: var(--space-1);
}

/* La colonne de resultats ne doit jamais faire varier la hauteur de la page
   pendant un reglage : on lui donne un plancher stable. */
@media (min-width: 62.01em) {
  .boutique-resultats { min-height: 40rem; }
}