/** * Jet Smart Filters — customisations Hydropure */ /* ============================================================================= * Color Image List : layout adaptatif sur desktop * - Items alignés à gauche, largeur capée (pas de stretch sur peu d'items) * - Si items <= max/ligne → 1 ligne ; sinon 2 lignes max * - Image 50px max desktop / 35px max sur écrans plus petits * - Pas de vide entre image et texte * ============================================================================= */ @media (min-width: 1025px) { /* Container : grid avec colonnes capées entre 180-240px, alignées à gauche. --hp-jsf-cols posé par main.js (cols = items si <= max/ligne, sinon ceil(items/2)) */ .jet-color-image-list-wrapper > fieldset { display: grid !important; grid-template-columns: repeat(var(--hp-jsf-cols, 5), minmax(180px, 240px)) !important; justify-content: start !important; gap: 12px !important; } .jet-color-image-list-wrapper .jet-color-image-list__row { width: auto !important; max-width: none !important; margin: 0 !important; padding: 0 !important; flex: none !important; } } /* === Layout interne de l'item : image + label sans grand vide ============== */ .jet-color-image-list-wrapper .jet-color-image-list__button { display: flex !important; align-items: center !important; justify-content: flex-start !important; gap: 10px !important; } .jet-color-image-list-wrapper .jet-color-image-list__decorator, [class*="elementor-element"] .jet-color-image-list__decorator, .jet-color-image-list-wrapper .jet-color-image-list__image { flex: 0 0 auto !important; margin: 0 !important; } .jet-color-image-list-wrapper .jet-color-image-list__label { flex: 1 1 auto; text-align: left !important; } /* === Image : taille capée et responsive =================================== Override aussi le wrapper .jet-color-image-list__image qui peut avoir une width fixe via Elementor (ex: .elementor-element-XXX .jet-color-image-list__image { width: 80px }) */ .jet-color-image-list-wrapper .jet-color-image-list__image, [class*="elementor-element"] .jet-color-image-list__image { width: 50px !important; max-width: 50px !important; flex: 0 0 50px !important; } .jet-color-image-list-wrapper .jet-color-image-list__image img { width: 100% !important; max-width: 50px !important; height: auto !important; display: block; } @media (max-width: 1024px) { .jet-color-image-list-wrapper .jet-color-image-list__image, [class*="elementor-element"] .jet-color-image-list__image { width: 35px !important; max-width: 35px !important; flex: 0 0 35px !important; } .jet-color-image-list-wrapper .jet-color-image-list__image img { max-width: 35px !important; } } /* ============================================================================= * Pagination Jet Smart Filters — pastilles 36×36 + flèche SVG * ============================================================================= */ .jet-filters-pagination { display: flex !important; justify-content: center !important; align-items: center !important; gap: 8px !important; } .jet-filters-pagination__item { display: flex !important; width: 36px !important; height: 36px !important; padding: 7.2px !important; box-sizing: border-box !important; justify-content: center !important; align-items: center !important; gap: 9px !important; border-radius: 100px !important; border: 1px solid var(--border-default, #E6E6E5) !important; background: var(--background-components-form, #FFF) !important; text-decoration: none !important; transition: border-color 0.15s ease, color 0.15s ease; } .jet-filters-pagination__item .jet-filters-pagination__link { color: var(--text-icons-general-paragraph, #45474A); leading-trim: both; text-edge: cap; font-family: Figtree, sans-serif; font-size: 15px; font-style: normal; font-weight: 500; line-height: 140%; letter-spacing: -0.3px; background: none !important; padding: 0 !important; margin: 0 !important; } .jet-filters-pagination__item.jet-filters-pagination__current { border-color: var(--border-border-primary, #1B2D6B) !important; } .jet-filters-pagination__item.jet-filters-pagination__current .jet-filters-pagination__link { color: var(--text-icons-contextual-primary, #1B2D6B); } /* Flèches prev/next : on cache le caractère "🡺" et on affiche le SVG via background */ .jet-filters-pagination__item.prev-next .jet-filters-pagination__link { font-size: 0 !important; line-height: 0 !important; color: transparent !important; width: 12px; height: 12px; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9.09525 6.1875H0V5.0625H9.09525L4.82306 0.790313L5.625 0L11.25 5.625L5.625 11.25L4.82306 10.4597L9.09525 6.1875Z' fill='%2300151F'/%3E%3C/svg%3E") !important; background-repeat: no-repeat; background-position: center; background-size: 12px 12px; } .jet-filters-pagination__item.prev-next.prev .jet-filters-pagination__link { transform: rotate(180deg); } /* Hover : même rendu que l'état actif (border + texte/flèche en bleu primaire) */ .jet-filters-pagination__item:hover { border-color: var(--border-border-primary, #1B2D6B) !important; } .jet-filters-pagination__item:hover .jet-filters-pagination__link { color: var(--text-icons-contextual-primary, #1B2D6B); } .jet-filters-pagination__item.prev-next:hover .jet-filters-pagination__link { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none'%3E%3Cpath d='M9.09525 6.1875H0V5.0625H9.09525L4.82306 0.790313L5.625 0L11.25 5.625L5.625 11.25L4.82306 10.4597L9.09525 6.1875Z' fill='%231B2D6B'/%3E%3C/svg%3E") !important; } /* ============================================================================= * Widget de tri Jet Smart Filters (jet-sorting-select) * On retire l'apparence native du