/* ==========================================================================
   Filtres partagés : archive produits (.archive-filters) + map stages (.lfs-map)
   Classe commune .lfs-filters sur le conteneur. Tokens (--color-*, --gap-*, --filter-height...)
   définis par la page hôte (archive-products.css / map-stages.css).
   Ici : composants desktop + états. Restent dans chaque page : mise en page de la ligne de filtres,
   panneau mobile (breakpoints et structure propres), filtres spécifiques (période / tri archive,
   recherche de lieu map).
   ========================================================================== */

.lfs-filters .filter-item { position: relative; max-width: 100%; }

/* ----- Pastille ----- */
.lfs-filters .filter-btn {
  display: flex; align-items: center; gap: 2px var(--gap-s);
  height: var(--filter-height); width: fit-content;
  padding: 1px 12px 0;
  line-height: 1.1;
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--color-text);
  border: 1px solid var(--color-gray-2);
  border-radius: 1000px;
  background: #fff;
  cursor: pointer;
  transition: var(--transition);
}
.lfs-filters .filter-btn:hover { border-color: var(--color-primary-op3); }
.lfs-filters .filter-label { font-weight: 500; transition: var(--transition); }
.lfs-filters .filter-btn .filter-icon,
.lfs-filters .filter-btn .icon-chevron { color: var(--color-gray); }
/* survol : bordure + icône orange légère ; focus / dropdown ouvert : bordure + icône orange */
.lfs-filters .filter-btn:hover .filter-icon { color: var(--color-primary-op3); }
.lfs-filters .filter-btn:is(:focus, :focus-within),
.lfs-filters .filter-item.active > .filter-btn { border-color: var(--color-primary); }
.lfs-filters .filter-btn:is(:focus, :focus-within) .filter-icon,
.lfs-filters .filter-item.active > .filter-btn .filter-icon { color: var(--color-primary); }
.lfs-filters .filter-count {
  min-width: 20px; height: 20px; padding: 0 5px;
  display: flex; align-items: center; justify-content: center;
  font-size: var(--font-size-xs); line-height: 0;
  border-radius: 1000px;
  background: var(--color-gray-light);
  transition: var(--transition);
}

/* ----- Dropdown ----- */
.lfs-filters .filter-dropdown {
  position: absolute; z-index: 10;
  top: calc(100% + var(--gap-s)); left: 0;
  min-width: 280px;
  display: flex; flex-direction: column;
  background: #fff;
  border: 1px solid var(--color-gray-light);
  border-radius: var(--radius);
  box-shadow: var(--box-shadow-hover);
  visibility: hidden; opacity: 0; transform: translateY(10px);
  user-select: none;
  transition: var(--transition);
}
.lfs-filters .filter-item.active > .filter-dropdown { visibility: visible; opacity: 1; transform: none; user-select: auto; }
.lfs-filters .filter-item.active .icon-chevron { transform: rotate(180deg); }
.lfs-filters .filter-dropdown label { user-select: none; -webkit-user-select: none; }
.lfs-filters .filter-dropdown__label {
  margin: var(--gap-s) var(--gap-s) 0;
  font-size: var(--font-size-sm); font-weight: 500;
  color: var(--color-gray);
  text-transform: uppercase; letter-spacing: .025em;
}

/* ----- Liste (cases / radios) ----- */
.lfs-filters .filter-list {
  margin: 0; padding: var(--gap-s);
  max-height: var(--filter-dropdown-height); overflow-y: auto;
  list-style: none;
  display: flex; flex-direction: column; gap: var(--gap-xs);
  scrollbar-width: thin; scrollbar-color: var(--color-secondary) transparent;
}
.lfs-filters .filter-list::-webkit-scrollbar { width: 4px; }
.lfs-filters .filter-list::-webkit-scrollbar-track { background: transparent; }
.lfs-filters .filter-list::-webkit-scrollbar-thumb { background: var(--color-secondary); border-radius: 1000px; }
.lfs-filters .filter-list li { position: relative; display: flex; flex-direction: column; } /* colonne : sous-listes (période) */
.lfs-filters .filter-list label {
  display: flex; justify-content: space-between; align-items: center; gap: var(--gap-s);
  margin: 0; padding: var(--gap-s) 12px;
  font-size: var(--font-size-sm) !important; font-weight: 400;
  color: #000;
  border: 1px solid transparent; border-radius: var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.lfs-filters .filter-list label:hover { background: var(--color-primary-op1); }
.lfs-filters .filter-list label .icon { color: var(--color-primary); opacity: 0; }
.lfs-filters .filter-list input {
  position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
  overflow: hidden; clip: rect(0, 0, 0, 0); border: 0;
}
.lfs-filters .filter-list input:checked + label {
  color: var(--color-primary); font-weight: 500;
  border-color: var(--color-primary); background: var(--color-primary-op1);
}
.lfs-filters .filter-list input:checked + label .icon { opacity: 1; }
.lfs-filters .filter-list input:focus-visible + label { outline: var(--outline); box-shadow: 0 0 0 4px var(--color-primary-op1); }
.lfs-filters .filter-list input:disabled + label {
  opacity: .5;
  color: #999;
  background: var(--color-gray-light-3);
  cursor: not-allowed;
}
.lfs-filters .filter-list input:disabled + label .icon { display: none; }
.lfs-filters .filter-list input:disabled + label .icon.icon-disabled { display: inline-block; opacity: 1; }

/* ----- Période : saisons > mois > semaines (saisons masquées : .no-seasonal-levels) ----- */
.lfs-filters .filter-list .icon-disabled { display: none; }
.lfs-filters .filter-period .filter-list-seasonal > li > label { background: var(--color-gray-light); font-weight: 500; }
.lfs-filters .filter-period .filter-list.filter-list-monthly {
  display: flex; flex-direction: column; gap: var(--gap-xs);
  height: auto; max-height: inherit; overflow-y: clip;
  padding: var(--gap-xs) 0 0 var(--padding);
}
.lfs-filters .filter-period .filter-list-monthly > li > label { font-size: 13px !important; }
.lfs-filters .filter-period .filter-list-monthly > li > label > .icon-chevron {
  position: absolute; top: 50%; right: 13px;
  transform: translateY(-50%);
  color: currentColor !important; opacity: .6 !important;
}
/* semaines : visibles si le mois est coché ou épinglé (été) */
.lfs-filters .filter-period .filter-list-monthly > li .filter-list-weeks { display: none; }
.lfs-filters .filter-period .filter-list-monthly > li > input:checked ~ label > .icon-chevron { display: none; }
.lfs-filters .filter-period .filter-list-monthly > li > input:checked ~ .filter-list-weeks { display: grid; }
.lfs-filters .filter-period .filter-list-monthly > li[data-month-pin="true"] > label { background: var(--color-primary-op1); font-weight: 500; }
.lfs-filters .filter-period .filter-list-monthly > li[data-month-pin="true"] .icon-chevron {
  top: 10px; transform: none !important;
  color: var(--color-primary) !important; opacity: .8 !important;
}
.lfs-filters .filter-period .filter-list-monthly > li[data-month-pin="true"] .filter-list-weeks { display: grid; }
.lfs-filters .filter-period .filter-list.filter-list-weeks {
  grid-template-columns: repeat(2, 1fr); gap: var(--gap-xs);
  height: auto; max-height: inherit; overflow-y: clip;
  padding: var(--gap-xs) 0 0 var(--padding);
}
.lfs-filters .filter-period .filter-list-weeks label {
  padding: 6px var(--gap-s) !important;
  font-size: 12px !important; font-weight: 500;
  background: var(--color-gray-light-2);
}
.lfs-filters .filter-period .no-seasonal-levels > li > :is(input, label) { display: none; }
.lfs-filters .filter-period .no-seasonal-levels .filter-list.filter-list-monthly { padding: 0; }
.lfs-filters .filter-period .no-seasonal-levels .filter-list-monthly li[data-month-num="0"] { display: none; }

/* ----- Effacer (bas de dropdown) ----- */
.lfs-filters .filter-dropdown .filter-btn-clear {
  display: none; justify-content: center; align-items: center;
  width: 100%; height: 43px; padding: 0 var(--gap-s);
  font-size: var(--font-size-xs); font-weight: 500;
  color: var(--color-error);
  background: var(--color-gray-light-2);
  border: 0; border-top: 1px solid var(--color-gray-2);
  border-radius: 0 0 var(--radius) var(--radius);
  cursor: pointer;
  transition: var(--transition);
}
.lfs-filters .filter-dropdown .filter-btn-clear:hover { background: var(--color-gray-light); color: var(--color-error-2); }

/* ----- Filtre actif ----- */
.lfs-filters .filter-item.filtering > .filter-btn {
  color: var(--color-primary);
  border-color: var(--color-primary);
  background: var(--color-primary-op1);
}
.lfs-filters .filter-item.filtering > .filter-btn :is(.icon, .filter-label) { color: var(--color-primary); }
.lfs-filters .filter-item.filtering > .filter-btn .filter-count { background: var(--color-primary); color: #fff; }
.lfs-filters .filter-item.filtering .filter-dropdown .filter-btn-clear { display: flex; }

/* ----- Âge (grille) ----- */
.lfs-filters .filter-age .filter-dropdown { min-width: 0; }
.lfs-filters .filter-age .filter-list { display: grid; grid-template-columns: repeat(4, 42px); max-height: none; }
.lfs-filters .filter-age .filter-list label {
  width: 42px; height: 42px; padding: 0;
  justify-content: center;
  border-color: var(--color-gray-2);
}
.lfs-filters .filter-age .filter-list label .icon { display: none; }

/* ----- Recherche (texte : archive / lieu : map) ----- */
.lfs-filters .filter-search .filter-btn { cursor: text; }
.lfs-filters .filter-search input {
  width: 180px; max-width: 100%;
  padding: 0; border: 0; outline: 0;
  font: inherit; font-size: var(--font-size-sm); font-weight: 500; line-height: 1.5;
  color: var(--color-text);
  background: transparent;
}
.lfs-filters .filter-search input::placeholder { color: var(--color-gray-3); }
.lfs-filters .filter-search input::-webkit-search-cancel-button { display: none; }
.lfs-filters .filter-search input:is(:focus, :focus-visible) { outline: none; box-shadow: none; }
/* croix : <button> (map) ou <svg class="icon"> (archive : spécificité > .icon de la page) */
.lfs-filters .filter-search .filter-cross {
  display: none; align-items: center; justify-content: center;
  width: 20px; height: 20px; padding: 3px;
  color: var(--color-error-2);
  background: var(--color-error-light);
  border: 0; border-radius: 50%;
  cursor: pointer;
}
.lfs-filters .filter-search .filter-cross .icon { width: 14px; height: 14px; }
.lfs-filters .filter-search .filter-cross:hover { color: #fff; background: var(--color-error); }
.lfs-filters .filter-search:is(.filtering, .has-value) .filter-cross { display: flex; }
.lfs-filters .filter-search.filtering .filter-icon { display: none; } /* archive : la croix remplace la loupe */
.lfs-filters .filter-search.filtering .filter-count { display: flex; }

/* ----- Prix ----- */
.lfs-filters .filter-price .filter-btn { cursor: inherit; background: var(--color-gray-light-2); }
.lfs-filters .filter-price .filter-btn:has(input[type="range"]:focus-visible) { outline: var(--outline); box-shadow: 0 0 0 4px var(--color-primary-op1); }
.lfs-filters .filter-price .filter-icon { display: none; }
.lfs-filters .filter-price .filter-label { margin: 0; font-weight: 500; cursor: inherit; }
.lfs-filters .filter-price input[type="range"] {
  -webkit-appearance: none;
  width: 96px; height: 5px;
  margin: 0; padding: 0;
  font: inherit;
  outline: none;
  border-radius: 5px;
  accent-color: var(--color-primary);
  background-color: var(--color-gray-2);
  cursor: pointer;
}
.lfs-filters .filter-price-amount { min-width: 50px; font-weight: 700; color: var(--color-primary); white-space: nowrap; }
.lfs-filters .filter-price-amount span { font-weight: 700; color: var(--color-primary); }
.lfs-filters .filter-price-amount.amount-min { display: none; }

/* ----- Contact (téléphone / e-mail) ----- */
.lfs-filters .filter-contact { display: flex; gap: var(--gap-s); }
.lfs-filters .filter-contact .filter-btn { justify-content: center; font-weight: 700; text-decoration: none; border-width: 2px; }
.lfs-filters .filter-contact .filter-btn-phone { color: #fff; background: var(--color-primary); border-color: var(--color-primary); }
.lfs-filters .filter-contact .filter-btn-phone:hover { background: var(--color-primary-hover); border-color: var(--color-primary-hover); }
.lfs-filters .filter-contact .filter-btn-email { color: var(--color-primary); background: #fff; border-color: var(--color-primary); }
.lfs-filters .filter-contact .filter-btn-email:hover { background: var(--color-primary-op1); }

/* ----- Réinitialiser (affichage piloté par la page : .is-filtering / .filtering) ----- */
.lfs-filters .filter-reset { display: none; }
.lfs-filters .filter-reset .filter-btn { gap: 4px; padding: 0; color: var(--color-error); background: transparent; border: 0; }
.lfs-filters .filter-reset .filter-btn:hover { color: var(--color-error-2); }
.lfs-filters .filter-reset .filter-btn .icon { width: 14px; height: 14px; }
.lfs-filters .filter-reset .filter-count { color: #fff; background: var(--color-error); }
.lfs-filters .filter-reset .filter-btn:hover .filter-count { background: var(--color-error-2); }