/* ==========================================================================
   SMARTFONE – Mobile Faceted Filters (Clean / Premium / iOS-like)
   ========================================================================== */

   @media (max-width: 991px) {

    /* =========================================================
       1. BOUTON FILTRER – STICKY BOTTOM (CTA)
       ========================================================= */
  
    #js-product-list-top .filter-button {
      position: fixed;
      bottom: 16px;
      left: 50%;
      transform: translateX(-50%);
      z-index: 1040;
      width: calc(100% - 32px);
      max-width: 420px;
    }
  
    #search_filter_toggler {
      width: 100%;
      background: #1f6bff;
      color: #fff !important;
      border: none;
      border-radius: 14px;
      padding: 16px;
      font-size: 15px;
      font-weight: 700;
      text-transform: uppercase;
      letter-spacing: .4px;
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 10px;
      box-shadow: 0 10px 25px rgba(0,0,0,.25);
      -webkit-tap-highlight-color: transparent;
    }
  
    #search_filter_toggler:active {
      transform: scale(.97);
      background: #000;
    }
  
    #search_filter_toggler svg {
      filter: brightness(10);
    }
  
    /* =========================================================
       2. OVERLAY + BOTTOM SHEET
       ========================================================= */
  
    #search_filters_wrapper {
      display: none;
      position: fixed !important;
      top: 0 !important;
      left: 0 !important;
      right: 0 !important;
      bottom: 0 !important;
      width: 100% !important;
      height: 100% !important;
      margin: 0 !important;
      padding: 0 !important;
      z-index: 1050;
      background: rgba(0,0,0,.35);
      box-sizing: border-box;
    }
  
    #search_filters_wrapper.open {
      display: block !important;
    }
  
    #search_filters_wrapper > #search_filters {
      position: absolute !important;
      bottom: 0 !important;
      left: 0 !important;
      right: 0 !important;
      width: 100% !important;
      margin: 0 !important;
      box-sizing: border-box;
      background: #fff;
      border-radius: 20px 20px 0 0;
      max-height: 90vh;
      overflow-y: auto;
      overflow-x: hidden;
      padding: 0 20px 120px;
      animation: slideUp .3s ease-out;
      -webkit-overflow-scrolling: touch;
    }
  
    @keyframes slideUp {
      from { transform: translateY(100%); }
      to   { transform: translateY(0); }
    }
  
    /* =========================================================
       3. HEADER FILTRES
       ========================================================= */
  
    #search_filter_controls {
      position: sticky;
      top: 0;
      background: #fff;
      padding: 18px 0;
      border-bottom: 1px solid #eee;
      display: flex !important;
      align-items: center;
      justify-content: space-between;
      z-index: 10;
      box-sizing: border-box;
    }
  
    #search_filter_controls::before {
      content: "Filtres";
      font-size: 17px;
      font-weight: 700;
      color: #111;
    }

    #search_filters_wrapper section.facet:first-child .title {
      padding-top: 70px;
    }
  
    #search_filter_controls .ok {
      background: #1f6bff;
      color: #fff;
      border: none;
      border-radius: 12px;
      padding: 10px 18px;
      font-size: 13px;
      font-weight: 600;
      text-transform: uppercase;
    }
  
    #search_filter_controls .ok:active {
      background: #1f6bff;
    }
  
    #search_filter_controls .ok i {
      display: none;
    }
  
    /* =========================================================
       4. SECTIONS & TITRES
       ========================================================= */
  
    #search_filters_wrapper section.facet {
      margin-bottom: 12px;
    }
  
    #search_filters_wrapper .title {
      padding: 14px 0;
      border-bottom: 1px solid #f2f2f2;
      cursor: pointer;
    }
  
    #search_filters_wrapper .facet-title,
    #search_filters_wrapper .title .h6 {
      font-size: 14px;
      font-weight: 700;
      color: #111;
      text-transform: uppercase;
      letter-spacing: .3px;
      margin: 0;
    }
  
    /* =========================================================
       5. ITEMS / CHECKBOXES
       ========================================================= */
  
    #search_filters_wrapper *,
    #search_filters_wrapper *::before,
    #search_filters_wrapper *::after {
      box-sizing: border-box;
    }
  
    #search_filters_wrapper ul {
      list-style: none;
      padding: 0;
      margin: 0;
      width: 100%;
    }
  
    #search_filters_wrapper ul li {
      border-bottom: 1px solid #fafafa;
      width: 100%;
    }
  
    #search_filters_wrapper .facet-label {
      display: flex;
      align-items: center;
      padding: 12px 0;
      font-size: 14px;
      color: #333;
      width: 100%;
      cursor: pointer;
    }
  
    #search_filters_wrapper .facet-label.active {
      font-weight: 600;
      color: #111;
    }
  
    #search_filters_wrapper .custom-checkbox {
      flex-shrink: 0;
      display: flex;
      align-items: center;
    }
  
    #search_filters_wrapper .custom-checkbox span {
      flex-shrink: 0;
      width: 20px;
      height: 20px;
      border-radius: 6px;
      border: 1.5px solid #ccc;
      display: flex;
      align-items: center;
      justify-content: center;
      margin-right: 12px;
      transition: all .15s ease;
    }
  
    #search_filters_wrapper .facet-label.active .custom-checkbox span {
      background: #111;
      border-color: #111;
    }
  
    #search_filters_wrapper .facet-label.active i {
      color: #fff;
      font-size: 14px;
    }
  
    #search_filters_wrapper .facet-label a.search-link {
      flex: 1;
      min-width: 0;
      color: #333;
      text-decoration: none;
    }
  
    .magnitude {
      font-size: 12px;
      color: #999;
      margin-left: 4px;
    }
  
    /* =========================================================
       6. SLIDER PRIX
       ========================================================= */
  
    .faceted-slider {
      padding: 16px 4px 24px;
    }
  
    /* =========================================================
       7. FILTRES ACTIFS
       ========================================================= */
  
    #js-active-search-filters {
      padding: 8px 0;
    }
  
    #js-active-search-filters ul {
      display: flex;
      flex-wrap: wrap;
      gap: 8px;
      list-style: none;
      padding: 0;
      margin: 0;
    }
  
    #js-active-search-filters .filter-block {
      background: #f3f3f3;
      border-radius: 20px;
      padding: 6px 12px;
      font-size: 12px;
      color: #333;
      display: flex;
      align-items: center;
      gap: 6px;
    }
  
    #js-active-search-filters .close {
      font-size: 14px;
      color: #777;
    }
  
    /* =========================================================
       8. CLEAR ALL
       ========================================================= */
  
    .clear-all-wrapper {
      margin-top: 16px;
      padding-top: 16px;
      border-top: 1px solid #eee;
    }
  
    .clear-all-wrapper .btn {
      width: 100%;
      border-radius: 12px;
      padding: 14px;
      font-size: 13px;
      background: #f5f5f5;
      color: #555;
      border: none;
    }
  
    /* =========================================================
       9. SAFE AREA LISTING
       ========================================================= */
  
    #js-product-list {
      padding-bottom: 130px;
    }
  
    /* =========================================================
       10. HIDE DESKTOP ELEMENTS
       ========================================================= */
  
    #search_filters > .h6.hidden-sm-down,
    #search_filters > h4.hidden-sm-down,
    #_desktop_search_filters_clear_all {
      display: none !important;
    }
  
  }
  
  /* DESKTOP : untouched */
  @media (min-width: 992px) {}