<div class="container search-results-page" x-data="{ tab: 1 }">
<nav class="flex items-center min-h-10" aria-label="Fil d'ariane">
<ol class="flex items-center gap-1 flex-wrap text-body-xs text-black/40">
<li>
<a href="#" class="
link-sm
link-neutral
">
Accueil
</a>
</li>
<li aria-hidden="true" class="text-neutral-500">
•
</li>
<li>
<span class="font-bold text-black tracking-[0.3px]" aria-current="page">Résultats de votre recherche</span>
</li>
</ol>
</nav>
<div class="w-full flex flex-col mb-8 gap-y-2">
<h1 class="h3">Résultats de recherche "My search"</h1>
<span>51 résultats</span>
</div>
<div class="tab-wrapper tab-wrapper-lg flex items-start flex-row shadow-[inset_0_-1px_0_0] shadow-black/16">
<a href="#" class="tab-item" :class="{ 'current-tab': tab === 1 }" @click.prevent="tab = 1">
<span class="text-click-lg">Produits (12)</span>
</a>
<a href="#" class="tab-item" :class="{ 'current-tab': tab === 2 }" @click.prevent="tab = 2">
<span class="text-click-lg">Blog (12)</span>
</a>
<a href="#" class="tab-item" :class="{ 'current-tab': tab === 3 }" @click.prevent="tab = 3">
<span class="text-click-lg">FAQ (12)</span>
</a>
</div>
<div class="py-6 products" x-show="tab === 1" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2">
<div class="grid-layout gap-y-8 gap-x-3 md:gap-10">
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE LAIT DEMAQUILLANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE LAIT DEMAQUILLANT</h3>
<p class="text-body-sm truncate">Nettoie - Apaise • <span class="text-black/56">200ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">0 avis</span>
</div>
<div class="h6">14,90€</div>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE MASQUE PURIFIANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE MASQUE PURIFIANT</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">50ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <span class="text-body-sm">5 | 2 avis</span>
</div>
<div class="h6">16,90€</div>
</div>
<button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
<span class="md:hidden">Indisponible</span>
<span class="max-md:hidden">Victime de son succès</span>
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
BEST SELLER
</div>
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="Gel nettoyant purifiant" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">Gel nettoyant purifiant</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">200ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.7 | 39 avis</span>
</div>
<div class="h6">14,90€</div>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE LAIT DEMAQUILLANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE LAIT DEMAQUILLANT</h3>
<p class="text-body-sm truncate">Nettoie - Apaise • <span class="text-black/56">200ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">0 avis</span>
</div>
<div class="h6">14,90€</div>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE MASQUE PURIFIANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE MASQUE PURIFIANT</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">50ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <span class="text-body-sm">5 | 2 avis</span>
</div>
<div class="h6">16,90€</div>
</div>
<button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
<span class="md:hidden">Indisponible</span>
<span class="max-md:hidden">Victime de son succès</span>
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE MASQUE PURIFIANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE MASQUE PURIFIANT</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">50ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <span class="text-body-sm">5 | 2 avis</span>
</div>
<div class="h6">16,90€</div>
</div>
<button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
<span class="md:hidden">Indisponible</span>
<span class="max-md:hidden">Victime de son succès</span>
</button>
</div>
</a>
</div>
</div>
<div class="py-8 md:py-10">
<div class="grid-layout gap-y-8 gap-x-3 md:gap-10">
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE LAIT DEMAQUILLANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE LAIT DEMAQUILLANT</h3>
<p class="text-body-sm truncate">Nettoie - Apaise • <span class="text-black/56">200ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">0 avis</span>
</div>
<div class="h6">14,90€</div>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE MASQUE PURIFIANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE MASQUE PURIFIANT</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">50ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <span class="text-body-sm">5 | 2 avis</span>
</div>
<div class="h6">16,90€</div>
</div>
<button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
<span class="md:hidden">Indisponible</span>
<span class="max-md:hidden">Victime de son succès</span>
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
BEST SELLER
</div>
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="Gel nettoyant purifiant" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">Gel nettoyant purifiant</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">200ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.7 | 39 avis</span>
</div>
<div class="h6">14,90€</div>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE LAIT DEMAQUILLANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE LAIT DEMAQUILLANT</h3>
<p class="text-body-sm truncate">Nettoie - Apaise • <span class="text-black/56">200ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">0 avis</span>
</div>
<div class="h6">14,90€</div>
</div>
<button type="button" class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE MASQUE PURIFIANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE MASQUE PURIFIANT</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">50ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <span class="text-body-sm">5 | 2 avis</span>
</div>
<div class="h6">16,90€</div>
</div>
<button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
<span class="md:hidden">Indisponible</span>
<span class="max-md:hidden">Victime de son succès</span>
</button>
</div>
</a>
</div>
<div class="overflow-hidden h-full col-span-2 md:col-span-6 lg:col-span-4">
<a href="#" class="relative group flex flex-col justify-between">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img.png" alt="LE MASQUE PURIFIANT" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden md:flex absolute z-10 bottom-2.5 right-2.5">
<button type="button" aria-label="Ajouter au Panier" class=" btn btn-dark btn-solid btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 20 21" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.0212 8.57397V4.82397C13.0212 3.09808 11.6221 1.69897 9.89624 1.69897C8.17035 1.69897 6.77124 3.09808 6.77124 4.82397V8.57397M10 10.0457V12.5457M10 12.5457V15.0457M10 12.5457H12.5M10 12.5457H7.5M16.2346 6.91333L17.2872 16.9133C17.3455 17.4669 16.9115 17.949 16.3549 17.949H3.4376C2.88101 17.949 2.44698 17.4669 2.50525 16.9133L3.55788 6.91333C3.60811 6.4362 4.01046 6.07397 4.49023 6.07397H15.3022C15.782 6.07397 16.1844 6.4362 16.2346 6.91333ZM7.08374 8.57397C7.08374 8.74656 6.94383 8.88647 6.77124 8.88647C6.59865 8.88647 6.45874 8.74656 6.45874 8.57397C6.45874 8.40139 6.59865 8.26147 6.77124 8.26147C6.94383 8.26147 7.08374 8.40139 7.08374 8.57397ZM13.3337 8.57397C13.3337 8.74656 13.1938 8.88647 13.0212 8.88647C12.8486 8.88647 12.7087 8.74656 12.7087 8.57397C12.7087 8.40139 12.8486 8.26147 13.0212 8.26147C13.1938 8.26147 13.3337 8.40139 13.3337 8.57397Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-1 py-2">
<div class="flex flex-col ">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-1">LE MASQUE PURIFIANT</h3>
<p class="text-body-sm truncate">Peau normale à grasse • <span class="text-black/56">50ml</span></p>
</div>
<div class="flex items-center space-x-1">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <span class="text-body-sm">5 | 2 avis</span>
</div>
<div class="h6">16,90€</div>
</div>
<button type="button" disabled class="w-full justify-center btn btn-dark btn-solid btn-size-lg">
<span class="md:hidden">Indisponible</span>
<span class="max-md:hidden">Victime de son succès</span>
</button>
</div>
</a>
</div>
</div>
</div>
</div>
<div class="py-6 blog-posts" x-show="tab === 2" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2">
<section class="flex flex-col gap-y-6 adjusted-marg-b-xs">
<div class="grid grid-cols-2 md:grid-cols-3 gutter-quarter gap-y-2">
<a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-2.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Vieillissement de la peau du visage : nos astuces à partir de 40 ans
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a href="" class="bg-white hover:text-brand-700 transition-colors w-auto">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h6 after:h-2 after:w-10 after:bg-brand after:block after:mt-2">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a>
</div>
<div class="flex justify-center">
<div x-data="pagination()" class="flex items-center gap-2 ">
<button @click="goToPage(currentPage - 1)" :disabled="currentPage === 1" :class="[
size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
]" class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </button>
<template x-for="page in totalPages" :key="page">
<button @click="goToPage(page)" x-text="page" :class="[
currentPage === page ? 'bg-brand-500' : '',
size === 'small' ? 'min-h-8 min-w-8 py-1.5 rounded text-click-xs' : '',
size === 'medium' ? 'min-h-10 min-w-10 py-2 rounded text-click-sm' : '',
size === 'large' ? 'min-h-12 min-w-12 py-3 rounded-lg text-click-base' : ''
]" class="transition-all inline-flex justify-center items-center hover:bg-brand-200"></button>
</template>
<button @click="goToPage(currentPage + 1)" :disabled="currentPage === totalPages" :class="[
size === 'small' ? 'min-h-8 px-2 py-1.5 rounded' : '',
size === 'medium' ? 'min-h-10 px-4 py-2 rounded' : '',
size === 'large' ? 'min-h-12 px-6 py-3 rounded-lg' : ''
]" class="bg-white inline-flex justify-center items-center hover:bg-neutral-25 hover:text-neutral-900">
<svg class=" shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </button>
</div>
<script>
function pagination() {
return {
currentPage: 1,
totalPages: 3,
size: 'small',
goToPage(page) {
if (page >= 1 && page <= this.totalPages) {
this.currentPage = page;
}
}
}
}
</script>
</div>
</section>
</div>
<div class="py-6 faq-posts" x-show="tab === 3" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 -translate-y-2" x-transition:enter-end="opacity-100 translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 -translate-y-2">
FAQ
</div>
<div x-data class="fixed right-0 z-40 inset-y-0 lg: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-black/40"></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" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'filter')?.open" @click.outside="$store.asideBlocs.closeAside('filter')">
<div class="font-medium h3 flex justify-between items-center mb-6">
<span>Filtrer</span>
<button type="button" @click="$store.asideBlocs.closeAside('filter')" aria-label="Label text" class=" btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<h5 class="text-body-base text-brand-800 font-semibold">Préoccupations</h5>
<div class="overflow-auto pt-2 pb-4">
<ul class="flex flex-col gap-2">
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-1" class="w-5 h-5 border-2 border-black">
<label for="filter-1" class="text-body-base">
Boutons et imperfections (2)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 bg-neutral-50">
<input type="checkbox" id="filter-2" class="w-5 h-5 border-2 border-black" checked>
<label for="filter-2" class="text-body-base">
Hypersensibilité & rougeurs (1)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-3" class="w-5 h-5 border-2 border-black">
<label for="filter-3" class="text-body-base">
Perte d’éclat & tâches (6)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-4" class="w-5 h-5 border-2 border-black">
<label for="filter-4" class="text-body-base">
Sécheresse & stress urbain (4)
</label>
</li>
<li class="flex items-center gap-3 px-3 py-2 ">
<input type="checkbox" id="filter-5" class="w-5 h-5 border-2 border-black">
<label for="filter-5" class="text-body-base">
Signes de l’âge (3)
</label>
</li>
</ul>
</div>
<div class="">
<button type="button" class=" btn btn-dark btn-outline btn-size-lg">
Appliquer les filtres
</button>
</div>
</div>
</div>
</div>
<div class="container search-results-page" x-data="{ tab: 1 }">
{% render "@breadcrumbs" with {
home_label: 'Accueil',
home_href: '#',
separator_text: '•',
use_icon: false,
icon_path: "heroicons--chevron-down-mini",
container_classes: 'text-body-xs text-black/40',
links: [
{
label: 'Résultats de votre recherche',
href: '#'
},
]
} %}
<div class="w-full flex flex-col mb-8 gap-y-2">
<h1 class="h3">Résultats de recherche "My search"</h1>
<span>51 résultats</span>
</div>
<div class="tab-wrapper tab-wrapper-lg flex items-start flex-row shadow-[inset_0_-1px_0_0] shadow-black/16">
<a href="#" class="tab-item" :class="{ 'current-tab': tab === 1 }" @click.prevent="tab = 1">
<span class="text-click-lg">Produits (12)</span>
</a>
<a href="#" class="tab-item" :class="{ 'current-tab': tab === 2 }" @click.prevent="tab = 2">
<span class="text-click-lg">Blog (12)</span>
</a>
<a href="#" class="tab-item" :class="{ 'current-tab': tab === 3 }" @click.prevent="tab = 3">
<span class="text-click-lg">FAQ (12)</span>
</a>
</div>
<div class="py-6 products"
x-show="tab === 1"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2">
{% render "@products-grid--great" %}
<div class="py-8 md:py-10">
{% render "@products-grid--great" %}
</div>
</div>
<div class="py-6 blog-posts"
x-show="tab === 2"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2">
{% render "@blog-posts--search-results" %}
</div>
<div class="py-6 faq-posts"
x-show="tab === 3"
x-transition:enter="transition ease-out duration-300"
x-transition:enter-start="opacity-0 -translate-y-2"
x-transition:enter-end="opacity-100 translate-y-0"
x-transition:leave="transition ease-in duration-200"
x-transition:leave-start="opacity-100 translate-y-0"
x-transition:leave-end="opacity-0 -translate-y-2">
FAQ
</div>
{# Drawer Filtre #}
{% render "@filter" %}
</div>
/* No context defined. */
No notes defined.