/**
 * LA CROQUETTERIE - Faceted Search Styles
 * Version: 2.1.0 - CSS complet corrigé
 * Intègre tous les styles de theme.css + facets.tpl
 */

/* ============================================================================
   VARIABLES CSS
   ============================================================================ */
:root {
  --lc-filter-primary: #5f6d2f;
  --lc-filter-primary-light: #a7bc44;
  --lc-filter-primary-hover: #4a5625;
  --lc-filter-secondary: #b8965d;
  --lc-filter-text: #333;
  --lc-filter-text-light: #555;
  --lc-filter-text-muted: #888;
  --lc-filter-border: #e8e8e8;
  --lc-filter-bg: #ffffff;
  --lc-filter-header-bg: #d9ceb5;
  --lc-filter-header-text: #414142;
}

/* ============================================================================
   1. RESET CONTENEUR PARENT
   ============================================================================ */
#left-column,
.col-left,
#search_filters_wrapper {
  flex-shrink: 0 !important;
}

/* ============================================================================
   2. CONTAINER PRINCIPAL
   ============================================================================ */
#search_filters {
  background: #fafafa !important;
  border: 1px solid #ddd !important;
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  width: 100% !important;
  min-width: 320px !important;
  max-width: none !important;
  text-align: left !important;
  direction: ltr !important;
  flex-shrink: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

#search_filters * {
  box-sizing: border-box !important;
}

/* ============================================================================
   3. HEADER DU FILTRE
   ============================================================================ */
#search_filters .lc-filter-header {
  padding: 12px 16px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  width: 100% !important;
  text-align: left !important;
  gap: 6px !important;
  margin: 0 !important;
}

#search_filters .lc-filter-title {
  font-size: 15px !important;
  font-weight: 700 !important;
  color: #000 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  white-space: nowrap !important;
  flex: 0 0 auto !important;
  min-width: fit-content !important;
  visibility: visible !important;
  opacity: 1 !important;
  line-height: 1.3 !important;
}

#search_filters .lc-filter-title::before {
  content: "☰" !important;
  font-size: 18px !important;
  flex-shrink: 0 !important;
}

#search_filters .lc-filter-count {
  font-size: 13px !important;
  color: #666 !important;
  font-weight: 400 !important;
  white-space: nowrap !important;
  flex-shrink: 0 !important;
}

/* Header mobile */
#search_filters .lc-filter-mobile-header {
  display: none;
  align-items: center;
  justify-content: space-between;
  padding: 15px 20px;
  background: var(--lc-filter-primary-light);
  color: #fff;
}

#search_filters .lc-filter-mobile-title {
  font-family: 'Fuse V.2 Printed', sans-serif;
  font-weight: 700;
  font-size: 18px;
  text-transform: uppercase;
}

/* ============================================================================
   4. SECTION TRI
   ============================================================================ */
#search_filters .lc-sort-section {
  padding: 10px 16px !important;
  border-bottom: 1px solid #e0e0e0 !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  width: 100% !important;
  text-align: left !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin: 0 !important;
}

#search_filters .lc-sort-label {
  font-size: 14px !important;
  color: #000 !important;
  font-weight: 500 !important;
  visibility: visible !important;
  opacity: 1 !important;
  display: inline !important;
}

#search_filters .lc-sort-select {
  border: 1px solid #ddd !important;
  background: #fff !important;
  font-size: 14px !important;
  color: #555 !important;
  cursor: pointer !important;
  padding: 6px 28px 6px 10px !important;
  font-weight: 400 !important;
  border-radius: 4px !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 8px center !important;
  min-width: 120px !important;
  max-width: 180px !important;
}

#search_filters .lc-sort-select:hover {
  border-color: #a7bc44 !important;
}

#search_filters .lc-sort-select:focus {
  outline: none !important;
  border-color: #a7bc44 !important;
  box-shadow: 0 0 0 2px rgba(167, 188, 68, 0.2) !important;
}

/* ============================================================================
   5. SECTIONS FACETS
   ============================================================================ */
#search_filters .facets {
  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

#search_filters .facet {
  border-bottom: 1px solid #e0e0e0 !important;
  clear: both !important;
  float: none !important;
  width: 100% !important;
  position: relative !important;
  margin: 0 !important;
}

#search_filters .facet:last-child {
  border-bottom: none !important;
}

/* ============================================================================
   6. TITRE DE FACET
   ============================================================================ */
#search_filters .lc-facet-title {
  padding: 12px 16px !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  cursor: pointer !important;
  transition: background 0.2s !important;
  user-select: none !important;
  background: #fafafa !important;
  width: 100% !important;
  text-align: left !important;
  float: none !important;
  gap: 6px !important;
  margin: 0 !important;
}

#search_filters .lc-facet-title:hover {
  background: #f9f9f9 !important;
}

#search_filters .lc-facet-title-text {
  font-size: 14px !important;
  font-weight: 500 !important;
  color: #000 !important;
  margin: 0 !important;
  text-align: left !important;
  flex: 1 1 auto !important;
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
  min-width: 0 !important;
  display: inline !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  line-height: 1.3 !important;
  padding: 0 !important;
  text-indent: 0 !important;
}

#search_filters .lc-facet-title-right {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}

#search_filters .lc-facet-badge {
  background: #b8965d !important;
  color: #fff !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  padding: 4px 9px !important;
  border-radius: 50% !important;
  min-width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

#search_filters .lc-facet-arrow {
  font-size: 18px !important;
  color: #666 !important;
  transition: transform 0.3s !important;
  line-height: 1 !important;
  flex-shrink: 0 !important;
}

#search_filters .facet.is-open .lc-facet-arrow {
  transform: rotate(180deg) !important;
}

/* ============================================================================
   7. CORPS DE FACET
   ============================================================================ */
#search_filters .lc-facet-body {
  padding: 8px 16px 16px !important;
  display: none !important;
  width: 100% !important;
  text-align: left !important;
  clear: both !important;
  margin: 0 !important;
}

#search_filters .facet.is-open .lc-facet-body {
  display: block !important;
}

/* ============================================================================
   8. CHECKBOXES ET LABELS
   ============================================================================ */
#search_filters .facet-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

#search_filters .facet-list li {
  margin: 0;
}

#search_filters .facet-label {
  display: flex !important;
  align-items: center !important;
  gap: 10px !important;
  padding: 8px 0 !important;
  cursor: pointer !important;
  font-size: 14px !important;
  color: #333 !important;
  transition: color 0.2s !important;
  margin: 0 !important;
  width: 100% !important;
  text-align: left !important;
  float: none !important;
  white-space: nowrap !important;
  text-decoration: none !important;
}

#search_filters .facet-label:hover {
  color: #5f6d2f !important;
}

#search_filters .facet-label input[type="checkbox"],
#search_filters .facet-label input[type="radio"] {
  width: 18px !important;
  height: 18px !important;
  margin: 0 !important;
  cursor: pointer !important;
  accent-color: #5f6d2f !important;
  flex-shrink: 0 !important;
}

#search_filters .facet-label.active {
  color: #5f6d2f !important;
  font-weight: 600 !important;
}

/* Checkbox custom */
#search_filters .lc-checkbox {
  flex: 0 0 auto;
  width: 20px;
  height: 20px;
  border: 2px solid #ccc;
  border-radius: 4px;
  margin-right: 12px;
  margin-top: 1px;
  background: #fff;
  position: relative;
  transition: all 0.2s;
}

#search_filters .lc-checkbox.checked {
  background-color: var(--lc-filter-primary-light);
  border-color: var(--lc-filter-primary-light);
}

#search_filters .lc-checkbox.checked::after {
  content: '';
  position: absolute;
  top: 3px;
  left: 6px;
  width: 5px;
  height: 9px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}

#search_filters .lc-filter-text {
  flex: 1;
  line-height: 1.4;
}

#search_filters .facet-label.active .lc-filter-text {
  font-weight: 700;
}

#search_filters .magnitude {
  color: #999 !important;
  font-size: 13px !important;
  margin-left: 4px !important;
}

/* ============================================================================
   9. BOUTONS D'ACTION
   ============================================================================ */

/* Bouton "Effacer les filtres" (desktop + mobile, dans le scroll) */
#search_filters .lc-filter-actions {
  padding: 12px 16px !important;
  border-top: 1px solid #e0e0e0 !important;
  width: 100% !important;
  margin: 0 !important;
}

#search_filters .lc-btn-clear-filters {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  width: 100% !important;
  padding: 10px 16px !important;
  background: transparent !important;
  color: #d9534f !important;
  border: 1.5px solid #d9534f !important;
  border-radius: 6px !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: all 0.2s ease !important;
  text-align: center !important;
  line-height: 1.3 !important;
}

#search_filters .lc-btn-clear-filters:hover {
  background: #d9534f !important;
  color: #fff !important;
}

/* Bloc lien d'aide */
#search_filters .lc-actions {
  padding: 16px 16px !important;
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  border-top: 1px solid #e0e0e0 !important;
  width: 100% !important;
  text-align: left !important;
  margin: 0 !important;
}

#search_filters .lc-btn-help {
  background: #5f6d2f !important;
  color: #fff !important;
  padding: 12px 14px !important;
  text-align: left !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: none !important;
  cursor: pointer !important;
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  transition: background 0.2s !important;
  text-decoration: none !important;
  width: 100% !important;
  line-height: 1.3 !important;
  margin: 0 !important;
  border-radius: 6px !important;
}

#search_filters .lc-btn-help:hover {
  background: #4a5625 !important;
}

#search_filters .lc-btn-help::after {
  content: "›" !important;
  font-size: 26px !important;
  font-weight: 300 !important;
}

#search_filters .lc-btn-clear {
  background: transparent !important;
  color: #b8965d !important;
  padding: 10px 14px !important;
  text-align: center !important;
  font-size: 13px !important;
  font-weight: 600 !important;
  border: 1px solid #b8965d !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
  margin: 0 !important;
}

#search_filters .lc-btn-clear:hover {
  background: #b8965d !important;
  color: #fff !important;
}

/* ============================================================================
   10. FOOTER STICKY MOBILE
   ============================================================================ */
/* Footer caché par défaut (créé par JS sur mobile) */
.lc-filter-footer {
  display: none;
}

.lc-filter-footer .lc-btn-reset {
  flex: 0 0 auto;
  padding: 10px 16px;
  background: #fff;
  color: #d9534f;
  text-decoration: none;
  border-radius: 6px;
  border: 1.5px solid #d9534f;
  font-size: 13px;
  font-weight: 600;
  text-align: center;
  transition: all 0.2s ease;
  white-space: nowrap;
}

.lc-filter-footer .lc-btn-reset:hover {
  background: #d9534f;
  color: #fff;
}

.lc-filter-footer .lc-btn-validate {
  flex: 1;
  padding: 12px 20px;
  background: #a7bc44;
  color: #fff;
  border: none;
  border-radius: 6px;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  transition: background-color 0.2s;
  text-align: center;
}

.lc-filter-footer .lc-btn-validate:hover {
  background: #8fa33a;
}

/* ============================================================================
   11. DROPDOWN SELECT
   ============================================================================ */
#search_filters .select-like {
  display: block !important;
  position: relative !important;
}

#search_filters .js-search-select {
  width: 100% !important;
  padding: 14px 16px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  font-size: 16px !important;
  cursor: pointer !important;
  background: #fff !important;
}

/* ============================================================================
   12. ÉLÉMENTS MOBILE - CACHÉS PAR DÉFAUT
   ============================================================================ */
.filter-toggle-btn {
  display: none !important;
}

.filter-close-btn,
#search_filters .filter-close-btn {
  display: none !important;
}

.filter-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  background: rgba(0, 0, 0, 0.5) !important;
  z-index: 999 !important;
  opacity: 0 !important;
  visibility: hidden !important;
  transition: opacity 0.3s ease, visibility 0.3s ease !important;
}

.filter-overlay.active {
  display: block !important;
  opacity: 1 !important;
  visibility: visible !important;
}


/* ============================================================================
   13. DESKTOP - AMÉLIORATION VISUELLE DU FILTRE SIDEBAR (min-width: 960px)
   ============================================================================ */
@media (min-width: 960px) {
  
  /* Container filtre - style card */
  body#category #search_filters,
  body.category #search_filters {
    background: #fff !important;
    border: none !important;
    border-radius: 10px !important;
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.07) !important;
    overflow: hidden !important;
  }
  
  /* ---- HEADER DESKTOP ---- */
  body#category #search_filters .lc-filter-header,
  body.category #search_filters .lc-filter-header {
    background: #a7bc44 !important;
    color: #fff !important;
    padding: 14px 18px !important;
    border-bottom: none !important;
  }
  
  body#category #search_filters .lc-filter-title,
  body.category #search_filters .lc-filter-title {
    color: #fff !important;
    font-size: 15px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Icône filtre en SVG blanc */
  body#category #search_filters .lc-filter-title::before,
  body.category #search_filters .lc-filter-title::before {
    content: '' !important;
    display: inline-block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolygon points='22 3 2 3 10 12.46 10 19 14 21 14 12.46 22 3'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    font-size: 0 !important;
    flex-shrink: 0 !important;
    vertical-align: middle !important;
  }
  
  body#category #search_filters .lc-filter-count,
  body.category #search_filters .lc-filter-count {
    color: rgba(255,255,255,0.85) !important;
    font-size: 13px !important;
    font-weight: 400 !important;
  }
  
  /* ---- SECTION TRI DESKTOP ---- */
  body#category #search_filters .lc-sort-section,
  body.category #search_filters .lc-sort-section {
    background: #f9fafb !important;
    padding: 10px 18px !important;
    border-bottom: 1px solid #eee !important;
  }
  
  body#category #search_filters .lc-sort-label,
  body.category #search_filters .lc-sort-label {
    font-size: 13px !important;
    color: #666 !important;
  }
  
  /* ---- TITRES FACETTES DESKTOP ---- */
  body#category #search_filters .lc-facet-title,
  body.category #search_filters .lc-facet-title {
    padding: 13px 18px !important;
    background: #fff !important;
    transition: background 0.15s ease !important;
    border-bottom: 1px solid #f0f0f0 !important;
  }
  
  body#category #search_filters .facet:last-child .lc-facet-title,
  body.category #search_filters .facet:last-child .lc-facet-title {
    border-bottom: none !important;
  }
  
  body#category #search_filters .lc-facet-title:hover,
  body.category #search_filters .lc-facet-title:hover {
    background: #fafbfc !important;
  }
  
  body#category #search_filters .lc-facet-title-text,
  body.category #search_filters .lc-facet-title-text {
    font-size: 13.5px !important;
    font-weight: 600 !important;
    color: #333 !important;
  }
  
  /* Chevron SVG desktop */
  body#category #search_filters .lc-facet-arrow,
  body.category #search_filters .lc-facet-arrow {
    font-size: 0 !important;
    width: 18px !important;
    height: 18px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transition: transform 0.25s ease !important;
  }
  
  body#category #search_filters .facet.is-open .lc-facet-arrow,
  body.category #search_filters .facet.is-open .lc-facet-arrow {
    transform: rotate(180deg) !important;
  }
  
  /* Badge compteur */
  body#category #search_filters .lc-facet-badge,
  body.category #search_filters .lc-facet-badge {
    background: #a7bc44 !important;
    color: #fff !important;
    font-size: 11px !important;
    padding: 2px 7px !important;
    border-radius: 10px !important;
    font-weight: 600 !important;
    min-width: auto !important;
    height: auto !important;
    line-height: 1.4 !important;
  }
  
  /* ---- CORPS FACETTES DESKTOP ---- */
  body#category #search_filters .lc-facet-body,
  body.category #search_filters .lc-facet-body {
    padding: 8px 18px 14px !important;
    background: #fafbfc !important;
  }
  
  /* Labels - style card léger */
  body#category #search_filters .facet-label,
  body.category #search_filters .facet-label {
    padding: 7px 10px !important;
    margin: 3px 0 !important;
    border-radius: 6px !important;
    background: #fff !important;
    border: 1px solid #eee !important;
    transition: all 0.15s ease !important;
    white-space: normal !important;
  }
  
  body#category #search_filters .facet-label:hover,
  body.category #search_filters .facet-label:hover {
    border-color: #a7bc44 !important;
    background: #f8fdf0 !important;
  }
  
  body#category #search_filters .facet-label.active,
  body.category #search_filters .facet-label.active {
    background: #f0f5e0 !important;
    border-color: #a7bc44 !important;
    color: #5a6a24 !important;
  }
  
  /* Checkbox custom desktop */
  body#category #search_filters .lc-checkbox,
  body.category #search_filters .lc-checkbox {
    width: 18px !important;
    height: 18px !important;
    border-radius: 4px !important;
    border: 2px solid #ccc !important;
  }
  
  body#category #search_filters .lc-checkbox.checked,
  body.category #search_filters .lc-checkbox.checked {
    background-color: #a7bc44 !important;
    border-color: #a7bc44 !important;
  }
  
  /* ---- BOUTON EFFACER DESKTOP ---- */
  body#category #search_filters .lc-filter-actions,
  body.category #search_filters .lc-filter-actions {
    padding: 12px 18px !important;
    border-top: 1px solid #eee !important;
    background: #fafbfc !important;
  }
  
  body#category #search_filters .lc-btn-clear-filters,
  body.category #search_filters .lc-btn-clear-filters {
    border: 1.5px solid #c9302c !important;
    color: #c9302c !important;
    font-size: 12.5px !important;
    padding: 8px 14px !important;
    border-radius: 6px !important;
    background: #fff !important;
  }
  
  body#category #search_filters .lc-btn-clear-filters:hover,
  body.category #search_filters .lc-btn-clear-filters:hover {
    background: #c9302c !important;
    color: #fff !important;
  }

  /* ---- BOUTON AIDE DESKTOP ---- */
  body#category #search_filters .lc-actions,
  body.category #search_filters .lc-actions {
    padding: 14px 18px !important;
    background: #f9fafb !important;
    border-top: 1px solid #eee !important;
  }
  
  body#category #search_filters .lc-btn-help,
  body.category #search_filters .lc-btn-help {
    border-radius: 8px !important;
    font-size: 12.5px !important;
    padding: 12px 14px !important;
  }
  
  body#category #search_filters .lc-btn-clear,
  body.category #search_filters .lc-btn-clear {
    background: #fff !important;
    border: 1px solid #a7bc44 !important;
    color: #a7bc44 !important;
    padding: 10px 16px !important;
    border-radius: 6px !important;
    font-weight: 600 !important;
    transition: all 0.2s ease !important;
  }
  
  body#category #search_filters .lc-btn-clear:hover,
  body.category #search_filters .lc-btn-clear:hover {
    background: #a7bc44 !important;
    color: #fff !important;
  }
  
  /* ---- CACHER ÉLÉMENTS MOBILES ---- */
  .filter-toggle-btn,
  .filter-close-btn,
  #search_filters .filter-close-btn,
  .filter-overlay {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
  }
  
  #search_filters .lc-filter-mobile-header {
    display: none !important;
  }
  
  .lc-filter-footer,
  #search_filters .lc-filter-footer {
    display: none !important;
  }
}


/* ============================================================================
   14. MOBILE (max-width: 959px)
   ============================================================================ */
@media (max-width: 959px) {
  
  /* Structure générale mobile */
  .block-category-with-facets {
    padding-bottom: 0 !important;
  }
  
  body#category #wrapper,
  body.category #wrapper {
    display: block !important;
    padding-top: 0 !important;
    margin-top: 0 !important;
  }
  
  body#category #content-wrapper,
  body.category #content-wrapper {
    width: 100% !important;
    display: block !important;
    float: none !important;
    margin-left: 0 !important;
  }
  
  /* Colonne filtre - Drawer coulissant (spécificité élevée) */
  html body#category #left-column,
  html body.category #left-column,
  body#category #left-column,
  body.category #left-column {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 85% !important;
    max-width: 320px !important;
    height: 100vh !important;
    height: 100dvh !important;
    z-index: 1000 !important;
    background: #fff !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.15) !important;
    transform: translateX(-100%) !important;
    transition: transform 0.3s ease !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    padding: 0 !important;
    box-sizing: border-box !important;
    float: none !important;
    margin-left: 0 !important;
  }
  
  /* État ouvert du drawer (spécificité élevée) */
  html body#category.filter-open #left-column,
  html body.category.filter-open #left-column,
  html body#category #left-column.drawer-open,
  html body.category #left-column.drawer-open,
  body#category.filter-open #left-column,
  body.category.filter-open #left-column,
  body#category #left-column.drawer-open,
  body.category #left-column.drawer-open {
    transform: translateX(0) !important;
  }
  
  /* Bloquer le scroll du body quand drawer ouvert */
  body#category.filter-open,
  body.category.filter-open {
    overflow: hidden !important;
  }
  
  /* Force overflow visible pour que sticky fonctionne */
  #content-wrapper {
    overflow: visible !important;
  }
  
  /* Cacher le bouton quand le menu mobile est ouvert */
  .main-nav-open .filter-toggle-btn,
  body.main-nav-open .filter-toggle-btn {
    display: none !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  
  /* Bouton toggle pour ouvrir le drawer */
  .filter-toggle-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    width: calc(100% - 32px) !important;
    margin: 10px 16px 15px 16px !important;
    padding: 11px 14px 12px !important;
    background-color: #d9ceb5 !important;
    border: 1px solid #d9ceb5 !important;
    color: #414141 !important;
    font-family: "Fuse V.2 Printed", sans-serif !important;
    font-weight: 700 !important;
    font-size: 1rem !important;
    line-height: 1.5 !important;
    text-decoration: none !important;
    border-radius: 2px !important;
    cursor: pointer !important;
    transition: .3s !important;
    transition-property: background-color, border-color, color !important;
    position: -webkit-sticky !important;
    position: sticky !important;
    top: 70px !important;
    z-index: 100 !important;
    box-shadow: 0 2px 8px rgba(0,0,0,0.15) !important;
  }
  
  .filter-toggle-btn:hover,
  .filter-toggle-btn:focus {
    background-color: #414141 !important;
    border-color: #414141 !important;
    color: #fff !important;
  }
  
  .filter-toggle-btn .filter-icon {
    font-size: 1em !important;
    line-height: 1 !important;
  }
  
  .filter-toggle-btn .filter-badge {
    position: absolute;
    top: -8px;
    right: -8px;
    background: #d72652;
    color: #fff;
    font-size: 12px;
    font-weight: 700;
    min-width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    border-radius: 50%;
    font-family: 'Open Sans', sans-serif;
  }
  
  /* Bouton fermer - maintenant dans le header mobile, plus de position fixed */
  /* Les styles sont définis dans la section header mobile ci-dessus */
  
  /* Afficher le bouton fermer quand drawer est ouvert */
  body.filter-open .filter-close-btn,
  body.filter-open #search_filters .filter-close-btn,
  #left-column.drawer-open .filter-close-btn,
  #search_filters.drawer-open .filter-close-btn {
    display: flex !important;
  }
  
  /* Overlay */
  .filter-overlay {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    background: rgba(0, 0, 0, 0.5) !important;
    z-index: 999 !important;
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    transition: opacity 0.3s ease, visibility 0.3s ease !important;
  }
  
  .filter-overlay.active,
  body.filter-open .filter-overlay {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
  }
  
  /* Style du filtre dans le drawer */
  /* Reset le div.wrapper injecté par le thème */
  #left-column > .wrapper,
  #left-column > div.wrapper {
    display: flex !important;
    flex-direction: column !important;
    height: 100% !important;
    overflow: hidden !important;
    padding: 0 !important;
  }
  
  #search_filters_wrapper,
  #left-column #search_filters_wrapper {
    flex: 1 1 auto !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior: contain !important;
    min-height: 0 !important;
    padding: 0 !important;
  }
  
  #search_filters {
    background: #fff !important;
    border: none !important;
    box-shadow: none !important;
    min-width: auto !important;
    width: 100% !important;
    padding: 0 !important;
  }
  
  /* ---- HEADER MOBILE ---- */
  #search_filters .lc-filter-mobile-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    padding: 16px 20px !important;
    background: #a7bc44 !important;
    color: #fff !important;
    margin: 0 !important;
    width: 100% !important;
  }
  
  #search_filters .lc-filter-mobile-title {
    font-family: 'Fuse V.2 Printed', sans-serif !important;
    font-weight: 700 !important;
    font-size: 17px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
  }
  
  /* Bouton fermer : croix SVG propre */
  #search_filters .filter-close-btn,
  .filter-close-btn {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 32px !important;
    height: 32px !important;
    border: none !important;
    border-radius: 50% !important;
    background: rgba(255,255,255,0.2) !important;
    color: #fff !important;
    cursor: pointer !important;
    padding: 0 !important;
    margin: 0 !important;
    transition: background 0.2s !important;
    position: static !important;
    font-size: 0 !important;
  }
  
  #search_filters .filter-close-btn:hover {
    background: rgba(255,255,255,0.35) !important;
  }
  
  #search_filters .filter-close-btn::before {
    content: '' !important;
    display: block !important;
    width: 16px !important;
    height: 16px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round'%3E%3Cline x1='18' y1='6' x2='6' y2='18'/%3E%3Cline x1='6' y1='6' x2='18' y2='18'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
  }
  
  #search_filters .lc-filter-header {
    display: none !important;
  }
  
  /* ---- SECTION TRI MOBILE ---- */
  #search_filters .lc-sort-section {
    padding: 12px 20px !important;
    border-bottom: 1px solid #eee !important;
    background: #fafafa !important;
  }
  
  /* ---- FLÈCHES CHEVRON SVG ---- */
  #search_filters .lc-facet-arrow {
    font-size: 0 !important;
    width: 20px !important;
    height: 20px !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 24 24' fill='none' stroke='%23999' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-size: contain !important;
    transition: transform 0.3s ease !important;
    flex-shrink: 0 !important;
  }
  
  #search_filters .facet.is-open .lc-facet-arrow {
    transform: rotate(180deg) !important;
  }
  
  /* ---- TITRES FACETTES ---- */
  #search_filters .lc-facet-title {
    padding: 14px 20px !important;
    background: transparent !important;
  }
  
  #search_filters .lc-facet-title:active {
    background: #f8f8f8 !important;
  }
  
  #search_filters .lc-facet-title-text {
    font-size: 15px !important;
    font-weight: 500 !important;
    color: #333 !important;
  }
  
  /* ---- CORPS FACETTES ---- */
  #search_filters .lc-facet-body {
    padding: 0 20px 16px !important;
  }
  
  /* ---- LABELS / CHECKBOXES ---- */
  #search_filters .facet-label {
    padding: 11px 0 !important;
    font-size: 14px !important;
    border: none !important;
    background: transparent !important;
    margin: 0 !important;
    border-radius: 0 !important;
    border-bottom: 1px solid #f2f2f2 !important;
    white-space: normal !important;
  }
  
  #search_filters .facet-label:last-child,
  #search_filters .facet-list li:last-child .facet-label {
    border-bottom: none !important;
  }
  
  #search_filters .facet-label input[type="checkbox"],
  #search_filters .facet-label input[type="radio"] {
    width: 20px !important;
    height: 20px !important;
  }
  
  /* ---- CHECKBOX CUSTOM MOBILE ---- */
  #search_filters .lc-checkbox {
    width: 22px !important;
    height: 22px !important;
    border: 2px solid #ccc !important;
    border-radius: 5px !important;
  }
  
  #search_filters .lc-checkbox.checked {
    border-color: #a7bc44 !important;
    background: #a7bc44 !important;
  }
  
  /* ---- BOUTON AIDE ---- */
  #search_filters .lc-actions {
    padding: 20px 20px 24px !important;
    margin-top: 0 !important;
    border-top: 1px solid #eee !important;
  }
  
  #search_filters .lc-btn-help {
    padding: 14px 18px !important;
    font-size: 13px !important;
    border-radius: 8px !important;
  }
  
  /* ---- FOOTER (créé par JS) ---- */
  .lc-filter-footer {
    display: flex !important;
    flex-shrink: 0 !important;
    background: #fff !important;
    padding: 12px 16px !important;
    gap: 10px !important;
    border-top: 1px solid #e0e0e0 !important;
    box-shadow: 0 -4px 16px rgba(0,0,0,0.06) !important;
    box-sizing: border-box !important;
    align-items: center !important;
    width: 100% !important;
  }
  
  /* Sur mobile, masquer le bouton effacer inline (on a celui du footer) */
  #search_filters .lc-filter-actions {
    display: none !important;
  }
  
  /* FORCER UNE SEULE COLONNE */
  #search_filters .facets,
  #left-column .facets,
  .block-categories,
  #search_filters ul,
  #left-column #search_filters ul {
    display: block !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    columns: 1 !important;
    column-count: 1 !important;
  }
  
  #search_filters .facet,
  #left-column .facet,
  #search_filters .facets > li,
  #left-column .facets > li,
  #search_filters .facets > section,
  #left-column .facets > section {
    width: 100% !important;
    max-width: 100% !important;
    flex: 0 0 100% !important;
    float: none !important;
    clear: both !important;
    display: block !important;
    break-inside: avoid !important;
    page-break-inside: avoid !important;
  }
  
  /* Override spécifique ps_facetedsearch */
  #left-column .block-facets,
  #left-column #search_filters_wrapper,
  #search_filters_wrapper {
    width: 100% !important;
    max-width: 100% !important;
  }
  
  #left-column .facet .collapse,
  #left-column .facet .facet-dropdown,
  #search_filters .facet .collapse,
  #search_filters .facet .facet-dropdown {
    width: 100% !important;
  }
  
  /* Labels facettes en colonne unique */
  #search_filters .facet ul,
  #left-column .facet ul {
    display: block !important;
    width: 100% !important;
    columns: 1 !important;
  }
  
  /* Styles pour module ps_facetedsearch standard */
  #left-column .block-facet,
  #left-column section.facet {
    border-bottom: 1px solid #e8e8e8 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  
  #left-column .facet-title,
  #left-column .block-facet .title {
    padding: 16px 0 !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #333 !important;
    cursor: pointer !important;
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    width: 100% !important;
  }
  
  #left-column .facet-title::after,
  #left-column .block-facet .title::after {
    content: "" !important;
    width: 8px !important;
    height: 8px !important;
    border-right: 2px solid #999 !important;
    border-bottom: 2px solid #999 !important;
    transform: rotate(45deg) !important;
    transition: transform 0.3s ease !important;
  }
  
  #left-column .facet.active .facet-title::after,
  #left-column .facet[aria-expanded="true"] .facet-title::after {
    transform: rotate(-135deg) !important;
  }
  
  #left-column .facet ul.collapse,
  #left-column .facet .facet-dropdown {
    padding: 0 0 16px 0 !important;
    margin: 0 !important;
    list-style: none !important;
  }
  
  #left-column .facet ul li,
  #left-column .facet-label {
    padding: 10px 0 !important;
    border-bottom: 1px solid #f5f5f5 !important;
  }
  
  #left-column .facet ul li:last-child,
  #left-column .facet-label:last-child {
    border-bottom: none !important;
  }
  
  #left-column .facet .custom-checkbox,
  #left-column .facet .custom-radio {
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
  }
  
  #left-column .facet .custom-checkbox input,
  #left-column .facet .custom-radio input {
    width: 18px !important;
    height: 18px !important;
    margin: 0 !important;
  }
  
  #left-column .facet .custom-checkbox span,
  #left-column .facet-label span {
    font-size: 14px !important;
    color: #555 !important;
  }
  
  /* Loader pendant le chargement AJAX */
  #search_filters.is-loading {
    position: relative;
  }
  
  #search_filters.is-loading::after {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(255,255,255,0.8);
    z-index: 100;
  }
  
  #search_filters.is-loading::before {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    width: 40px;
    height: 40px;
    margin: -20px 0 0 -20px;
    border: 3px solid #eee;
    border-top-color: #a7bc44;
    border-radius: 50%;
    z-index: 101;
    animation: lc-filter-spin 0.8s linear infinite;
  }
  
  @keyframes lc-filter-spin {
    to { transform: rotate(360deg); }
  }
}

/* Très petits écrans - drawer pleine largeur */
@media (max-width: 480px) {
  body#category #left-column,
  body.category #left-column {
    width: 100% !important;
    max-width: 100% !important;
  }
}

/* =====================================================
   DÉVERROUILLAGE RESPONSIVE BOOTSTRAP – DESKTOP
   ===================================================== */
@media (min-width: 960px) {

  /* Autoriser la colonne à se comprimer */
  #left-column {
    min-width: 0 !important;
  }

  /* AUTORISER LE FILTRE À SUIVRE LA LARGEUR DU BOOTSTRAP */
  #search_filters {
    min-width: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
    flex-shrink: 1 !important;
  }

  /* Sécurité wrapper */
  #search_filters_wrapper {
    min-width: 0 !important;
    flex-shrink: 1 !important;
  }
}