<div x-data class="fixed right-0 z-40 inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open" class="fixed inset-0 w-full h-full bg-dark-40 backdrop-blur-xl"></div>
<div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open" class="h-full relative bg-light-white overflow-hidden w-screen md:max-w-screen-sm flex flex-col" @click.outside="$store.asideBlocs.closeAside('filter')">
<div class="p-4 md:px-10 md:py-6 font-medium text-2xl flex justify-between items-center">
Filtrer
<button type="button" @click="$store.asideBlocs.closeAside('filter')" class="max-md:btn-size-sm btn btn-dark-ghost btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="px-4 md:px-10 overflow-auto flex-1 border-t border-b border-neutral-200">
<div x-cloak="" x-show="$store.filter.filters && $store.filter.filters.length > 0" class="text-neutral-800" x-collapse>
<div class="py-6 border-b border-neutral-200 flex flex-col gap-4">
<div class="flex justify-between items-center">
<div class="text-neutral-800 text-xl font-semibold">Filtres appliqués (<span x-text="$store.filter.filters.length"></span>)</div>
<a class="is-underlined text-lg" href="#" @click="$store.filter.clearFilters()">Tout effacer</a>
</div>
<div class="flex gap-2 flex-wrap">
<template x-if="$store.filter.filters && $store.filter.filters.length > 0">
<template x-for="filter in $store.filter.filters">
<button @click="$store.filter.toggleFilter(filter.type,filter.value)" class="btn btn-size-sm btn-icons btn-dark-subtle">
<span x-text="filter.type +' : '+ filter.value"></span>
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</button>
</template>
</template>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Genre
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('genre', 'Mixte')" @click="$store.filter.toggleFilter('genre', 'Mixte')" type="checkbox">
<span>Mixte (50)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('genre', 'Homme')" @click="$store.filter.toggleFilter('genre', 'Homme')" type="checkbox">
<span>Homme (65)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('genre', 'Femme')" @click="$store.filter.toggleFilter('genre', 'Femme')" type="checkbox">
<span>Femme (62)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('genre', 'Enfant')" @click="$store.filter.toggleFilter('genre', 'Enfant')" type="checkbox">
<span>Enfant (15)</span>
</label>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Marque
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div x-data="searchableCheckboxes(JSON.parse('\u005B\u007B\u0022label\u0022\u003A\u0022Afflelou\u0022,\u0022count\u0022\u003A214\u007D,\u007B\u0022label\u0022\u003A\u0022Bash\u0022,\u0022count\u0022\u003A28\u007D,\u007B\u0022label\u0022\u003A\u0022Boss\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Burberry\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Caract\u00E8res\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Cosmo\u0020Connected\u0022,\u0022count\u0022\u003A1\u007D,\u007B\u0022label\u0022\u003A\u0022Carrera\u0022,\u0022count\u0022\u003A21\u007D,\u007B\u0022label\u0022\u003A\u0022Chlo\u00E9\u0022,\u0022count\u0022\u003A13\u007D,\u007B\u0022label\u0022\u003A\u0022David\u0020Beckham\u0022,\u0022count\u0022\u003A48\u007D,\u007B\u0022label\u0022\u003A\u0022Demetz\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Dior\u0022,\u0022count\u0022\u003A48\u007D,\u007B\u0022label\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u0022,\u0022count\u0022\u003A48\u007D,\u007B\u0022label\u0022\u003A\u0022Gigi\u0020Studios\u0022,\u0022count\u0022\u003A8\u007D,\u007B\u0022label\u0022\u003A\u0022Gucci\u0022,\u0022count\u0022\u003A9\u007D,\u007B\u0022label\u0022\u003A\u0022Guess\u0022,\u0022count\u0022\u003A12\u007D,\u007B\u0022label\u0022\u003A\u0022Isabel\u0020Marant\u0022,\u0022count\u0022\u003A2\u007D,\u007B\u0022label\u0022\u003A\u0022Julbo\u0022,\u0022count\u0022\u003A10\u007D,\u007B\u0022label\u0022\u003A\u0022Lacoste\u0022,\u0022count\u0022\u003A78\u007D,\u007B\u0022label\u0022\u003A\u0022Lancel\u0022,\u0022count\u0022\u003A78\u007D,\u007B\u0022label\u0022\u003A\u0022Liu\u0020Jo\u0022,\u0022count\u0022\u003A78\u007D,\u007B\u0022label\u0022\u003A\u0022Longchamp\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Marc\u0020Jacobs\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Nike\u0022,\u0022count\u0022\u003A6\u007D,\u007B\u0022label\u0022\u003A\u0022Oakley\u0022,\u0022count\u0022\u003A6\u007D,\u007B\u0022label\u0022\u003A\u0022Persol\u0022,\u0022count\u0022\u003A12\u007D,\u007B\u0022label\u0022\u003A\u0022Polaroid\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Police\u0022,\u0022count\u0022\u003A8\u007D,\u007B\u0022label\u0022\u003A\u0022Prada\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Ray\u002DBan\u0022,\u0022count\u0022\u003A9\u007D,\u007B\u0022label\u0022\u003A\u0022Ray\u002DBan\u0020Junior\u0022,\u0022count\u0022\u003A13\u007D,\u007B\u0022label\u0022\u003A\u0022Roxy\u0022,\u0022count\u0022\u003A7\u007D,\u007B\u0022label\u0022\u003A\u0022Saint\u0020Laurent\u0022,\u0022count\u0022\u003A23\u007D,\u007B\u0022label\u0022\u003A\u0022Swarovski\u0022,\u0022count\u0022\u003A15\u007D,\u007B\u0022label\u0022\u003A\u0022Versace\u0022,\u0022count\u0022\u003A7\u007D,\u007B\u0022label\u0022\u003A\u0022Victoria\u0020Beckham\u0022,\u0022count\u0022\u003A2\u007D,\u007B\u0022label\u0022\u003A\u0022Victoria\u0027s\u0020Secret\u0022,\u0022count\u0022\u003A1\u007D\u005D'))" class="flex flex-col gap-4 md:gap-6">
<label class="relative">
<input x-model="search" type="text" placeholder="Rechercher" class="w-full leading-icon">
<svg class=" shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
</svg>
</label>
<div x-ref="items" class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<template x-for="item in items" :key="item.label">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('marque', item.label)" @click="$store.filter.toggleFilter('marque', item.label)" type="checkbox">
<span x-text="item.label + ' (' + (item.count || '0') + ')'"> (1)</span>
</label>
</template>
</div>
</div>
<script>
console.log(JSON.parse('\u005B\u007B\u0022label\u0022\u003A\u0022Afflelou\u0022,\u0022count\u0022\u003A214\u007D,\u007B\u0022label\u0022\u003A\u0022Bash\u0022,\u0022count\u0022\u003A28\u007D,\u007B\u0022label\u0022\u003A\u0022Boss\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Burberry\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Caract\u00E8res\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Cosmo\u0020Connected\u0022,\u0022count\u0022\u003A1\u007D,\u007B\u0022label\u0022\u003A\u0022Carrera\u0022,\u0022count\u0022\u003A21\u007D,\u007B\u0022label\u0022\u003A\u0022Chlo\u00E9\u0022,\u0022count\u0022\u003A13\u007D,\u007B\u0022label\u0022\u003A\u0022David\u0020Beckham\u0022,\u0022count\u0022\u003A48\u007D,\u007B\u0022label\u0022\u003A\u0022Demetz\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Dior\u0022,\u0022count\u0022\u003A48\u007D,\u007B\u0022label\u0022\u003A\u0022Dolce\u0020\u0026\u0020Gabbana\u0022,\u0022count\u0022\u003A48\u007D,\u007B\u0022label\u0022\u003A\u0022Gigi\u0020Studios\u0022,\u0022count\u0022\u003A8\u007D,\u007B\u0022label\u0022\u003A\u0022Gucci\u0022,\u0022count\u0022\u003A9\u007D,\u007B\u0022label\u0022\u003A\u0022Guess\u0022,\u0022count\u0022\u003A12\u007D,\u007B\u0022label\u0022\u003A\u0022Isabel\u0020Marant\u0022,\u0022count\u0022\u003A2\u007D,\u007B\u0022label\u0022\u003A\u0022Julbo\u0022,\u0022count\u0022\u003A10\u007D,\u007B\u0022label\u0022\u003A\u0022Lacoste\u0022,\u0022count\u0022\u003A78\u007D,\u007B\u0022label\u0022\u003A\u0022Lancel\u0022,\u0022count\u0022\u003A78\u007D,\u007B\u0022label\u0022\u003A\u0022Liu\u0020Jo\u0022,\u0022count\u0022\u003A78\u007D,\u007B\u0022label\u0022\u003A\u0022Longchamp\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Marc\u0020Jacobs\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Nike\u0022,\u0022count\u0022\u003A6\u007D,\u007B\u0022label\u0022\u003A\u0022Oakley\u0022,\u0022count\u0022\u003A6\u007D,\u007B\u0022label\u0022\u003A\u0022Persol\u0022,\u0022count\u0022\u003A12\u007D,\u007B\u0022label\u0022\u003A\u0022Polaroid\u0022,\u0022count\u0022\u003A18\u007D,\u007B\u0022label\u0022\u003A\u0022Police\u0022,\u0022count\u0022\u003A8\u007D,\u007B\u0022label\u0022\u003A\u0022Prada\u0022,\u0022count\u0022\u003A68\u007D,\u007B\u0022label\u0022\u003A\u0022Ray\u002DBan\u0022,\u0022count\u0022\u003A9\u007D,\u007B\u0022label\u0022\u003A\u0022Ray\u002DBan\u0020Junior\u0022,\u0022count\u0022\u003A13\u007D,\u007B\u0022label\u0022\u003A\u0022Roxy\u0022,\u0022count\u0022\u003A7\u007D,\u007B\u0022label\u0022\u003A\u0022Saint\u0020Laurent\u0022,\u0022count\u0022\u003A23\u007D,\u007B\u0022label\u0022\u003A\u0022Swarovski\u0022,\u0022count\u0022\u003A15\u007D,\u007B\u0022label\u0022\u003A\u0022Versace\u0022,\u0022count\u0022\u003A7\u007D,\u007B\u0022label\u0022\u003A\u0022Victoria\u0020Beckham\u0022,\u0022count\u0022\u003A2\u007D,\u007B\u0022label\u0022\u003A\u0022Victoria\u0027s\u0020Secret\u0022,\u0022count\u0022\u003A1\u007D\u005D'))
function searchableCheckboxes(items) {
return {
search: '',
allItems: items,
searchItems: [],
get items() {
if (this.search === '') {
return this.allItems;
}
return this.allItems.filter((item) => {
return item.label
.replace(/ /g, '')
.toLowerCase()
.includes(this.search.replace(/ /g, '').toLowerCase());
});
},
}
}
</script>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Forme
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 pb-4 md:pb-3">
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Carrée')" @click="$store.filter.toggleFilter('forme', 'Carrée')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Carrée</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Octogonale')" @click="$store.filter.toggleFilter('forme', 'Octogonale')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Octogonale</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Ovale')" @click="$store.filter.toggleFilter('forme', 'Ovale')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Ovale</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Pantos')" @click="$store.filter.toggleFilter('forme', 'Pantos')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Pantos</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Papillon')" @click="$store.filter.toggleFilter('forme', 'Papillon')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Papillon</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Pilot')" @click="$store.filter.toggleFilter('forme', 'Pilot')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Pilot</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Rectangulaire')" @click="$store.filter.toggleFilter('forme', 'Rectangulaire')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Rectangulaire</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none group rounded-md inline-flex flex-col cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-4 font-medium text-neutral-500 gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<input :checked="$store.filter.getFilter('forme', 'Ronde')" @click="$store.filter.toggleFilter('forme', 'Ronde')" class="sr-only peer" type="checkbox" name="forme">
<span class="peer-checked:text-neutral-800">Ronde</span>
<div class="peer-checked:block hidden absolute top-0 right-0 peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-md absolute inset-0 peer-checked:border-neutral-800 group-hover:border-neutral-800 border border-neutral-300"></span>
</label>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Prix
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="pb-4 md:pb-3">
<div x-data="rangeSlider" x-init="init(0, 1000, 200, 800)">
<div class="relative select-none touch-none mx-6 my-3 md:mx-0 h-0.5 bg-neutral-300" x-ref="slider">
<div class="absolute bg-dark-black h-full w-full" :style="'width:' + getWidth() + '; left:' + getMinPos()"></div>
<div class="absolute -ml-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full border-2 border-dark-black bg-light-white w-6 h-6 z-30 hover:bg-neutral-200" @touchstart="dragFrom=true" @mousedown="dragFrom=true" :style="'left:' + getFromPos()"></div>
<div class="absolute -ml-2 top-1/2 -translate-y-1/2 cursor-pointer rounded-full border-2 border-dark-black bg-light-white w-6 h-6 z-30 hover:bg-neutral-200" @touchstart="dragTo=true" @mousedown="dragTo=true" :style="'left:' + getToPos()"></div>
</div>
<div class="pt-2 flex justify-between select-none mt-2">
<label class="flex gap-1 justify-center items-center py-2 px-3 border border-neutral-300 cursor-text focus-within:ring-4 focus-within:ring-blue-200 rounded-md">
<div x-data="{value:from}" class="relative h-full">
<input class="text-center border-0 p-0 w-full absolute top-0 left-0 bg-transparent focus:border-none focus:ring-0" x-model="value" type="text" name="from" x-effect="value=Math.min(from, to)" @keyup.enter="triggerChange(value,'from')" @blur="triggerChange(value,'from')">
<span class="invisible block w-auto overflow-auto text-nowrap min-w-6 h-full" x-text="value"></span>
</div>
<span>€</span>
</label>
<label class="flex gap-1 justify-center items-center py-2 px-3 border border-neutral-300 cursor-text focus-within:ring-4 focus-within:ring-blue-200 rounded-md">
<div x-data="{value:to}" class="relative h-full">
<input class="text-center border-0 p-0 w-full absolute top-0 left-0 bg-transparent focus:border-none focus:ring-0" x-model="value" type="text" name="from" x-effect="value=Math.max(from, to)" @keyup.enter="triggerChange(value,'to')" @blur="triggerChange(value,'to')">
<span class="invisible block w-auto overflow-auto text-nowrap min-w-6 h-full" x-text="value"></span>
</div>
<span>€</span>
</label>
</div>
</div>
<script>
function rangeSlider() {
return {
// slider start value
min: 0,
// slider end value
max: 100,
// range start
from: 10,
// range end
to: 80,
// flag if mouse is clicked or screen is touched
dragFrom: false,
dragTo: false,
// call on x-init
init: function(min, max, from, to) {
// register mouse/touche move events to window
window.addEventListener("mousemove", (e) => {
this.drag(e)
});
window.addEventListener("touchmove", (e) => {
this.drag(e)
});
window.addEventListener("mouseup", this.dragEnd.bind(this));
window.addEventListener("touchend", this.dragEnd.bind(this));
// set values
this.min = min || this.min;
this.max = max || this.max;
this.from = from || this.from;
this.to = to || this.to;
},
triggerChange(value, type = 'from') {
value = parseInt(value);
if (isNaN(value)) {
const {
from,
to
} = this;
this.from = this.to = 0;
this.from = from;
this.to = to;
return;
}
if (this.from > this.to && value < this.max && value > this.min) {
this[type === 'to' ? 'from' : 'to'] = this[type];
this[type] = value;
return;
}
if (type === 'to') {
this.to = 0;
this.to = Math.min(this.max, value < this.from ? this.from : value);
if (value < this.from) {
this.from = value < this.min ? this.min : value;
}
} else {
this.from = 0;
this.from = Math.max(this.min, value > this.to ? this.to : value);
if (value > this.to) {
this.to = value > this.max ? this.max : value;
}
}
return value;
},
getFromPos: function() {
// return relative slider position for 'from' value
return ((this.from - this.min) / (this.max - this.min) * 100) + '%'
},
getToPos: function() {
// return relative slider position for 'to' value
return ((this.to - this.min) / (this.max - this.min) * 100) + '%'
},
getWidth: function() {
// return relative width between 'from' and 'to' value
return ((Math.max(this.to, this.from) - Math.min(this.to, this.from)) / (this.max - this.min) * 100) + '%'
},
getMinPos: function() {
// return the smallest of 'from' or 'to' value
if (this.from < this.to) {
return this.getFromPos();
}
return this.getToPos();
},
drag: function($event) {
if (!this.dragFrom && !this.dragTo) {
return;
}
// get touch/mouse x-coordinate
let x;
const rect = this.$refs.slider.getBoundingClientRect();
if ($event.type === 'touchmove') {
x = $event.changedTouches[0].clientX - rect.left + this.$refs.slider.offsetLeft;
} else {
x = $event.clientX - rect.left + this.$refs.slider.offsetLeft; //x position within the element.
}
// calculate the value relative to the mouse/touch x-position on the document
let pos = Math.round((this.max - this.min) * (x - this.$refs.slider.offsetLeft) / this.$refs.slider.clientWidth) + this.min;
//console.log($event);
// stay in range
pos = pos > this.max ? this.max : pos;
pos = pos < this.min ? this.min : pos;
if (this.dragFrom) {
this.from = pos;
}
if (this.dragTo) {
this.to = pos;
}
},
dragEnd: function() {
this.dragFrom = false;
this.dragTo = false;
}
}
}
</script>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Couleur
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-2 md:grid-cols-3 gap-2 md:gap-4 pb-4 md:pb-3">
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #F5F5DC"></span>
<input :checked="$store.filter.getFilter('couleur', 'Beige')" @click="$store.filter.toggleFilter('couleur', 'Beige')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Beige</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #000000"></span>
<input :checked="$store.filter.getFilter('couleur', 'Noir')" @click="$store.filter.toggleFilter('couleur', 'Noir')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Noir</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #000080"></span>
<input :checked="$store.filter.getFilter('couleur', 'Bleu marine')" @click="$store.filter.toggleFilter('couleur', 'Bleu marine')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Bleu marine</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #A52A2A"></span>
<input :checked="$store.filter.getFilter('couleur', 'Marron')" @click="$store.filter.toggleFilter('couleur', 'Marron')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Marron</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FFD700"></span>
<input :checked="$store.filter.getFilter('couleur', 'Dorée')" @click="$store.filter.toggleFilter('couleur', 'Dorée')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Dorée</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #808080"></span>
<input :checked="$store.filter.getFilter('couleur', 'Gris')" @click="$store.filter.toggleFilter('couleur', 'Gris')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Gris</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #008000"></span>
<input :checked="$store.filter.getFilter('couleur', 'Vert')" @click="$store.filter.toggleFilter('couleur', 'Vert')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Vert</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FFA500"></span>
<input :checked="$store.filter.getFilter('couleur', 'Orange')" @click="$store.filter.toggleFilter('couleur', 'Orange')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Orange</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FFC0CB"></span>
<input :checked="$store.filter.getFilter('couleur', 'Rose')" @click="$store.filter.toggleFilter('couleur', 'Rose')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Rose</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #800080"></span>
<input :checked="$store.filter.getFilter('couleur', 'Violet')" @click="$store.filter.toggleFilter('couleur', 'Violet')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Violet</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FF0000"></span>
<input :checked="$store.filter.getFilter('couleur', 'Rouge')" @click="$store.filter.toggleFilter('couleur', 'Rouge')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Rouge</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-image:linear-gradient(90deg,#DA9D33 35%, #9B591F 65%); "></span>
<input :checked="$store.filter.getFilter('couleur', 'Écaille')" @click="$store.filter.toggleFilter('couleur', 'Écaille')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Écaille</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #40E0D0"></span>
<input :checked="$store.filter.getFilter('couleur', 'Turquoise')" @click="$store.filter.toggleFilter('couleur', 'Turquoise')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Turquoise</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FFFFFF"></span>
<input :checked="$store.filter.getFilter('couleur', 'Blanc')" @click="$store.filter.toggleFilter('couleur', 'Blanc')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Blanc</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
<label class="relative select-none rounded-full cursor-pointer transition-colors hover:bg-neutral-150 hover:text-neutral-800 bg-light-white p-2 font-medium text-neutral-500 inline-flex gap-2 items-center">
<span class="block min-w-5 w-5 h-5 rounded-full border border-dark-20" style="background-color: #FFFF00"></span>
<input :checked="$store.filter.getFilter('couleur', 'Jaune')" @click="$store.filter.toggleFilter('couleur', 'Jaune')" class="sr-only peer" type="checkbox" name="couleur">
<span class="peer-checked:text-neutral-800">Jaune</span>
<div class="peer-checked:visible invisible ml-auto peer-checked:text-neutral-800">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</div>
<span class="rounded-full absolute inset-0 peer-checked:border-neutral-800 border border-neutral-300"></span>
</label>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Matière
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('matiere', 'Combiné')" @click="$store.filter.toggleFilter('matiere', 'Combiné')" type="checkbox">
<span>Combiné (234)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('matiere', 'Métal')" @click="$store.filter.toggleFilter('matiere', 'Métal')" type="checkbox">
<span>Métal (284)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('matiere', 'Plastique')" @click="$store.filter.toggleFilter('matiere', 'Plastique')" type="checkbox">
<span>Plastique (78)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('matiere', 'Titane')" @click="$store.filter.toggleFilter('matiere', 'Titane')" type="checkbox">
<span>Titane (12)</span>
</label>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Traitement du verre
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('traitement', 'Anti-reflet')" @click="$store.filter.toggleFilter('traitement', 'Anti-reflet')" type="checkbox">
<span>Anti-reflet (245)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('traitement', 'Miroitée')" @click="$store.filter.toggleFilter('traitement', 'Miroitée')" type="checkbox">
<span>Miroitée (45)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('traitement', 'Photochromiques')" @click="$store.filter.toggleFilter('traitement', 'Photochromiques')" type="checkbox">
<span>Photochromiques (23)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('traitement', 'Polarisé')" @click="$store.filter.toggleFilter('traitement', 'Polarisé')" type="checkbox">
<span>Polarisé (124)</span>
</label>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Type de teinte
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-1 md:grid-cols-2 gap-4 md:gap-6 pb-4 md:pb-3">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('teinte', 'Dégradé')" @click="$store.filter.toggleFilter('teinte', 'Dégradé')" type="checkbox">
<span>Dégradé (120)</span>
</label>
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('teinte', 'Teinté uniformément')" @click="$store.filter.toggleFilter('teinte', 'Teinté uniformément')" type="checkbox">
<span>Teinté uniformément (345)</span>
</label>
</div>
</div>
</div>
<div x-data="{ expanded: false }" class="border-b border-neutral-200 md:pb-3 text-neutral-800 text-neutral-800">
<h2 class="font-medium py-4 md:pt-6 md:pb-3 text-base md:text-xl">
<button type="button" @click="expanded = !expanded " class="flex justify-between items-center w-full ">
<span class="flex flex-wrap gap-3">
Collection
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</span>
</button>
</h2>
<div x-cloak x-show="expanded" x-collapse class=" ">
<div class="grid grid-cols-1 gap-4 md:gap-6 pb-4 md:pb-3">
<label class="selection-control-label selection-control-size-md">
<input :checked="$store.filter.getFilter('collection', 'Collection Tchin Tchin Solaire')" @click="$store.filter.toggleFilter('collection', 'Collection Tchin Tchin Solaire')" type="checkbox">
<span>Collection Tchin Tchin Solaire (93)</span>
</label>
</div>
</div>
</div>
</div>
<div class="p-2 md:px-10 md:py-6">
<template x-if="$store.filter.filters && $store.filter.filters.length > 0">
<div class="flex items-center justify-between">
<button type="button" @click="$store.filter.clearFilters()" class="max-md:btn-size-md btn btn-dark-ghost btn-size-lg">
Tout effacer
</button>
<a href="#" class="max-md:btn-size-md btn btn-dark btn-size-lg">
Voir les 600 produits
</a>
</div>
</template>
<template x-if="$store.filter.filters.length == 0">
<a href="#" class="w-full max-md:btn-size-md btn btn-dark btn-size-lg">
Voir les 600 produits
</a>
</template>
</div>
</div>
</div>
{% embed "@side-panel" with panel|merge({sidePanelButton:panel.sidePanelButton|merge({label:(panel.sidePanelButton.label is defined ? panel.sidePanelButton.label|format(product_quantity|default('600')))})}) %}
{% block content %}
<div x-cloak=""
x-show="$store.filter.filters && $store.filter.filters.length > 0" class="text-neutral-800"
x-collapse
>
<div class="py-6 border-b border-neutral-200 flex flex-col gap-4">
<div class="flex justify-between items-center">
<div class="text-neutral-800 text-xl font-semibold">Filtres appliqués (<span x-text="$store.filter.filters.length"></span>)</div>
<a class="is-underlined text-lg" href="#" @click="$store.filter.clearFilters()">Tout effacer</a>
</div>
<div class="flex gap-2 flex-wrap">
<template x-if="$store.filter.filters && $store.filter.filters.length > 0">
<template x-for="filter in $store.filter.filters">
<button @click="$store.filter.toggleFilter(filter.type,filter.value)" class="btn btn-size-sm btn-icons btn-dark-subtle">
<span x-text="filter.type +' : '+ filter.value"></span>
{% render "@icons-library--close-outline" %}
</button>
</template>
</template>
</div>
</div>
</div>
{% for filter in filters %}
{% render "@filter-" ~ filter.type with filter.content %}
{% endfor %}
{% endblock %}
{% block panel_button %}
<template x-if="$store.filter.filters && $store.filter.filters.length > 0">
<div class="flex items-center justify-between">
{% render "@template-button" with {
button_attribute: '@click="$store.filter.clearFilters()"',
label:'Tout effacer',mobile_size:'md',size:'lg',color:'dark-ghost'} %}
{% render "@template-button" with panel.sidePanelButton|merge({
label:(panel.sidePanelButton.label is defined ? panel.sidePanelButton.label|format(product_quantity|default('600'))),
mobile_size:'md',size:'lg',color: colorType|default('dark')
}) %}
</div>
</template>
<template x-if="$store.filter.filters.length == 0">
{{ parent() }}
</template>
{% endblock %}
{% endembed %}
{
"accordion": {
"accordion_title_class": "font-medium pt-6 pb-3 text-xl",
"accordion_content_class": " ",
"accordion_border_class": "pt-3",
"border": true,
"chevronIcon": {
"size": "32"
}
},
"panel": {
"title": "Filtrer",
"sidePanelButton": {
"label": "Voir les %s produits",
"href": "#"
},
"showValue": "$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open",
"closeButtonAlpineClick": "$store.asideBlocs.closeAside('filter')"
},
"filters": [
{
"type": "checkboxes",
"content": {
"title": "Genre",
"name": "genre",
"checkboxes": [
{
"label": "Mixte",
"count": 50
},
{
"label": "Homme",
"count": 65
},
{
"label": "Femme",
"count": 62
},
{
"label": "Enfant",
"count": 15
}
]
}
},
{
"type": "searchable-checkboxes",
"content": {
"title": "Marque",
"name": "marque",
"checkboxes": [
{
"label": "Afflelou",
"count": 214
},
{
"label": "Bash",
"count": 28
},
{
"label": "Boss",
"count": 18
},
{
"label": "Burberry",
"count": 68
},
{
"label": "Caractères",
"count": 68
},
{
"label": "Cosmo Connected",
"count": 1
},
{
"label": "Carrera",
"count": 21
},
{
"label": "Chloé",
"count": 13
},
{
"label": "David Beckham",
"count": 48
},
{
"label": "Demetz",
"count": 18
},
{
"label": "Dior",
"count": 48
},
{
"label": "Dolce & Gabbana",
"count": 48
},
{
"label": "Gigi Studios",
"count": 8
},
{
"label": "Gucci",
"count": 9
},
{
"label": "Guess",
"count": 12
},
{
"label": "Isabel Marant",
"count": 2
},
{
"label": "Julbo",
"count": 10
},
{
"label": "Lacoste",
"count": 78
},
{
"label": "Lancel",
"count": 78
},
{
"label": "Liu Jo",
"count": 78
},
{
"label": "Longchamp",
"count": 68
},
{
"label": "Marc Jacobs",
"count": 18
},
{
"label": "Nike",
"count": 6
},
{
"label": "Oakley",
"count": 6
},
{
"label": "Persol",
"count": 12
},
{
"label": "Polaroid",
"count": 18
},
{
"label": "Police",
"count": 8
},
{
"label": "Prada",
"count": 68
},
{
"label": "Ray-Ban",
"count": 9
},
{
"label": "Ray-Ban Junior",
"count": 13
},
{
"label": "Roxy",
"count": 7
},
{
"label": "Saint Laurent",
"count": 23
},
{
"label": "Swarovski",
"count": 15
},
{
"label": "Versace",
"count": 7
},
{
"label": "Victoria Beckham",
"count": 2
},
{
"label": "Victoria's Secret",
"count": 1
}
]
}
},
{
"type": "frames",
"content": {
"title": "Forme",
"name": "forme",
"frames": [
{
"label": "Carrée",
"type": "carre"
},
{
"label": "Octogonale",
"type": "octogonale"
},
{
"label": "Ovale",
"type": "ovale"
},
{
"label": "Pantos",
"type": "pantos"
},
{
"label": "Papillon",
"type": "papillon"
},
{
"label": "Pilot",
"type": "pilot"
},
{
"label": "Rectangulaire",
"type": "rectangulaire"
},
{
"label": "Ronde",
"type": "ronde"
}
]
}
},
{
"type": "price",
"content": {
"title": "Prix"
}
},
{
"type": "colors",
"content": {
"title": "Couleur",
"name": "couleur",
"colors": [
{
"label": "Beige",
"hex": "#F5F5DC"
},
{
"label": "Noir",
"hex": "#000000"
},
{
"label": "Bleu marine",
"hex": "#000080"
},
{
"label": "Marron",
"hex": "#A52A2A"
},
{
"label": "Dorée",
"hex": "#FFD700"
},
{
"label": "Gris",
"hex": "#808080"
},
{
"label": "Vert",
"hex": "#008000"
},
{
"label": "Orange",
"hex": "#FFA500"
},
{
"label": "Rose",
"hex": "#FFC0CB"
},
{
"label": "Violet",
"hex": "#800080"
},
{
"label": "Rouge",
"hex": "#FF0000"
},
{
"label": "Écaille",
"gradient": {
"from": "#DA9D33",
"to": "#9B591F"
}
},
{
"label": "Turquoise",
"hex": "#40E0D0"
},
{
"label": "Blanc",
"hex": "#FFFFFF"
},
{
"label": "Jaune",
"hex": "#FFFF00"
}
]
}
},
{
"type": "checkboxes",
"content": {
"title": "Matière",
"name": "matiere",
"checkboxes": [
{
"label": "Combiné",
"count": 234
},
{
"label": "Métal",
"count": 284
},
{
"label": "Plastique",
"count": 78
},
{
"label": "Titane",
"count": 12
}
]
}
},
{
"type": "checkboxes",
"content": {
"title": "Traitement du verre",
"name": "traitement",
"checkboxes": [
{
"label": "Anti-reflet",
"count": 245
},
{
"label": "Miroitée",
"count": 45
},
{
"label": "Photochromiques",
"count": 23
},
{
"label": "Polarisé",
"count": 124
}
]
}
},
{
"type": "checkboxes",
"content": {
"title": "Type de teinte",
"name": "teinte",
"checkboxes": [
{
"label": "Dégradé",
"count": 120
},
{
"label": "Teinté uniformément",
"count": 345
}
]
}
},
{
"type": "checkboxes",
"content": {
"title": "Collection",
"name": "collection",
"checkboxes": [
{
"label": "Collection Tchin Tchin Solaire",
"count": 93
}
]
}
}
]
}
No notes defined.