<header x-data="searchComponent()" class="relative ">
<div x-data="stickyHeader" class="absolute top-0 w-full hover:bg-white md:border-b border-black/04 z-30" :class="{
'!fixed bg-white shadow-md': isSticky || isMobileMenuOpen,
'-translate-y-full': !isSticky && !scrollingUp && !isMobileMenuOpen && lastScrollPosition > 0
}">
<a class="action skip sr-only focus:not-sr-only focus:absolute focus:z-40 focus:bg-white contentarea" href="#contentarea">
<span>Skip to Content</span>
</a>
<div class="md:container transition-all duration-300" :class="[
isMobileMenuOpen ? 'fixed inset-0 bg-white z-50 flex flex-col md:relative md:inset-auto' : '',
isSticky && !isMobileMenuOpen ? 'md:flex md:flex-wrap md:items-center md:justify-between' : 'flex flex-col'
]">
<div class="order-1 transition-all duration-300 w-full xl:w-auto px-4 py-4 flex items-center justify-between border-b border-black/04 md:border-none" :class="isSticky ? 'md:order-1 md:flex-none md:justify-between md:h-12 xl:h-auto md:items-center md:p-0' : 'md:pt-2.5 md:pb-[26px] lg:pt-4 md:px-0'" role="group" aria-label="Navigation principale">
<div class="flex items-center gap-6">
<button type="button" class="md:hidden" aria-label="Menu principal" :aria-expanded="isMobileMenuOpen" aria-controls="mobile-menu" @click="isMobileMenuOpen = !isMobileMenuOpen">
<template x-if="!isMobileMenuOpen">
<span aria-hidden="true"><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="M3.75 6.75h16.5M3.75 12h16.5m-16.5 5.25h16.5" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg></span>
</template>
<template x-if="isMobileMenuOpen">
<span aria-hidden="true"><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></span>
</template>
</button>
<a href="#" class="text-xl font-light tracking-wider shrink-0" aria-label="Go to Home page">
<span aria-hidden="true">
<svg aria-label="Logo Etat Pur" xmlns="http://www.w3.org/2000/svg" width="155" height="32" viewBox="0 0 155 32" fill="none" class="h-6 md:h-8 w-full transition-all duration-300">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9277 14.7376L1.59218 14.7376L1.62618 14.4742C1.89981 12.3389 2.87057 10.6 4.51204 9.30595C6.14698 8.01588 8.00793 7.36158 10.0439 7.36158C12.1371 7.36158 13.9272 7.99909 15.3638 9.25608C16.7987 10.5131 17.6514 12.2692 17.8987 14.4777L17.9277 14.7376ZM10.0436 6.13477C7.35703 6.13477 5.0022 7.04092 3.04394 8.82841C1.09117 10.6129 0.100525 12.9765 0.100525 15.8536C0.100525 18.7044 1.0773 21.0349 3.00391 22.7811C4.9334 24.53 7.22074 25.4166 9.80133 25.4166C12.0233 25.4166 13.9418 24.9044 15.504 23.8939C16.9953 22.9297 18.1217 21.5283 18.8563 19.7245L17.6009 19.4449C16.2017 22.6197 13.5792 24.2282 9.80133 24.2282C7.65341 24.2282 5.72706 23.4667 4.07565 21.9646C2.42266 20.4598 1.5704 18.444 1.54241 15.9714L1.53979 15.7341L19.3823 15.7341V15.2747C19.2772 12.5786 18.3462 10.3535 16.6139 8.66929C14.8848 6.98754 12.6744 6.13477 10.0436 6.13477Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4551 0L12.4504 0.112169C12.4177 0.930185 12.1032 1.60992 11.5139 2.13196C10.8898 2.68361 10.0963 2.96366 9.15615 2.96366C8.23931 2.96366 7.45878 2.68435 6.83527 2.13246C6.2449 1.61091 5.92957 0.930682 5.89695 0.112169L5.89297 0L4.4823 0L4.48548 0.119879C4.51996 1.28982 4.95809 2.24538 5.78927 2.96117C6.65784 3.71029 7.7903 4.09008 9.15615 4.09008C10.5223 4.09008 11.6545 3.71029 12.5233 2.96117C13.3542 2.24587 13.7931 1.29007 13.8276 0.119879L13.8311 0L12.4551 0Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7163 23.8157C31.4392 23.8157 30.3911 23.42 29.6032 22.6397C28.8183 21.8609 28.4205 20.7971 28.4205 19.4757V7.38985L35.8315 7.38985V6.23422L28.4205 6.23422V0L26.9295 0V6.23422H22.596V7.38985H26.9295V19.5914C26.9295 21.3256 27.4498 22.695 28.4755 23.6638C29.503 24.6332 30.8894 25.1248 32.5953 25.1248C33.9861 25.1248 35.3393 24.6715 36.6191 23.7777L36.0707 22.6731C35.0423 23.4316 33.9154 23.8157 32.7163 23.8157Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.5129 15.4838C58.5129 17.9566 57.6643 19.9994 55.9897 21.5548C54.317 23.1088 52.3142 23.8969 50.0378 23.8969C47.6544 23.8969 45.6247 23.1216 44.0057 21.5927C42.3854 20.0626 41.5642 18.0075 41.5642 15.4838C41.5642 12.9869 42.392 10.9385 44.0253 9.39462C45.6596 7.85248 47.6823 7.07038 50.0378 7.07038C52.2873 7.07038 54.2818 7.8585 55.9684 9.41242C57.6567 10.9688 58.5129 13.0117 58.5129 15.4838ZM54.6378 6.99099C53.1935 6.22894 51.579 5.84277 49.8374 5.84277C47.161 5.84277 44.8483 6.74866 42.9633 8.53413C41.0796 10.3186 40.1246 12.6564 40.1246 15.4835C40.1246 18.3363 41.0731 20.6813 42.9427 22.4533C44.8144 24.2257 47.1336 25.1246 49.8374 25.1246C51.5811 25.1246 53.1967 24.7447 54.6391 23.9959C56.0784 23.2476 57.2284 22.1861 58.058 20.842L58.5126 20.1042V24.7001H59.9907V6.30612H58.5126V10.9025L58.058 10.1642C57.2271 8.8178 56.0773 7.75053 54.6378 6.99099Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M75.3698 23.8157C74.0926 23.8157 73.0445 23.42 72.2567 22.6397C71.4717 21.8609 71.0734 20.7971 71.0734 19.4757V7.38985L78.4845 7.38985V6.23422L71.0734 6.23422V0L69.5828 0V6.23422H65.2498V7.38985H69.5828V19.5914C69.5828 21.3256 70.1029 22.695 71.1291 23.6638C72.1559 24.6332 73.5423 25.1248 75.2483 25.1248C76.6396 25.1248 77.9929 24.6715 79.2729 23.7777L78.7242 22.6731C77.6961 23.4316 76.5689 23.8157 75.3698 23.8157Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M95.2733 9.14817C96.9592 7.58183 98.9546 6.78717 101.204 6.78717C103.561 6.78717 105.584 7.57552 107.217 9.13024C108.851 10.6865 109.679 12.7512 109.679 15.2678C109.679 17.8107 108.858 19.8824 107.237 21.4253C105.618 22.9671 103.588 23.7484 101.204 23.7484C98.927 23.7484 96.9242 22.9537 95.2527 21.3874C93.5776 19.82 92.7289 17.7611 92.7289 15.2678C92.7289 12.7769 93.5846 10.7175 95.2733 9.14817ZM92.7283 19.8355L93.184 20.5935C94.0141 21.9745 95.1708 23.0632 96.6229 23.8303C97.4617 24.2723 98.3576 24.5845 99.2988 24.7735C99.4454 24.779 99.5929 24.7628 99.7401 24.7871C101.184 25.0259 103.222 24.8354 103.573 24.7871C104.03 24.7242 104.818 24.4398 104.818 24.4398C106.103 23.9942 107.267 23.2789 108.299 22.294C110.169 20.5079 111.117 18.1439 111.117 15.2683C111.117 12.4191 110.168 10.0621 108.298 8.26289C106.427 6.46315 104.121 5.55078 101.444 5.55078C99.702 5.55078 98.0793 5.94003 96.6224 6.70867C95.1708 7.47404 94.0141 8.56272 93.184 9.94365L92.7283 10.7014V6.01758H91.2506V31.2598H92.7283V19.8355Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M120.664 22.1287C119.523 20.8404 118.944 19.1339 118.944 17.0577V6.13477H117.545V17.3334C117.545 19.7565 118.232 21.7315 119.59 23.2048C120.943 24.6722 122.763 25.4166 125.002 25.4166C126.72 25.4166 128.25 25.023 129.548 24.2466C130.844 23.4716 131.872 22.3688 132.603 20.9687L133.051 20.1096V24.9425H134.489V6.13477H133.051V15.5588C133.051 18.1605 132.333 20.2528 130.916 21.7779C129.496 23.3073 127.584 24.0824 125.236 24.0824C123.352 24.0824 121.814 23.4252 120.664 22.1287Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.476 7.42411C147.009 8.3795 145.584 9.70143 144.848 11.6395L144.8 6.28987H143.254V24.8323H144.8V17.1356C144.8 14.4233 145.604 12.1172 147.187 10.2807C148.785 8.428 151.006 7.48878 153.792 7.48878C154.193 7.48878 154.521 7.50267 154.784 7.53097L154.939 6.20701C154.611 6.15876 154.226 6.13477 153.792 6.13477C151.368 6.13477 149.504 6.75468 148.476 7.42411Z" fill="black" />
</svg>
</span>
</a>
</div>
<div class="hidden md:flex items-center flex-1 mx-12 transition-all duration-300" :class="isSticky ? 'xl:!hidden justify-end mr-6 gap-6' : 'justify-center gap-6 lg:gap-10'">
<form action="#" method="GET" role="search" class="search-form flex items-center flex-1 max-w-md relative border-b border-black/16 group hover:border-neutral-800/64 focus-within:border-black" @click.prevent="openSearchLayer" @keypress="openSearchLayer" :class="isSticky ? 'border-none flex-none' : ''">
<label for="search" class="sr-only">Recherche</label>
<input type="text" id="search" name="q" placeholder="Quel est votre besoin/problème de peau ?" class="w-full p-2 pr-8 bg-transparent border-0 text-body-sm hover:text-dark/72 focus:text-dark focus:outline-none focus:ring-transparent" x-model="searchQuery" :class="isSticky ? 'md:hidden' : ''">
<button type="button" class="absolute right-0 flex items-center justify-center pr-2 focus:outline-none focus:ring-2 focus:ring-neutral-800" :class="isSticky ? '!relative' : 'absolute'">
<span class="sr-only">Lancer la recherche</span>
<span aria-hidden="true">
<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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </span>
</button>
</form>
<button id="search-openSearchLayer" class="sr-only" tabindex="-1" aria-hidden="true">Retour recherche</button>
<a href="#" class="flex items-center gap-2 group" aria-label="Trouver un point de vente">
<span aria-hidden="true">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" 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="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />
</svg> </span>
<span class="header-submenu-group md:hidden lg:block" :class="isSticky ? 'lg:hidden' : ''">
Trouver un point de vente
</span>
</a>
</div>
<div class="flex items-center gap-x-6" :class="{'xl:!hidden': isSticky}">
<a href="#" type="button" @click="openSearchLayer" aria-label="Rechercher" class="order-1 md:hidden btn btn-dark btn-simple btn-size-lg 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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</a>
<a href="#" type="button" aria-label="Panier" class="order-3 md:order-2 btn btn-dark btn-simple btn-size-lg 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="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</a>
<a href="#" type="button" aria-label="Compte" class="order-2 md:order-3 btn btn-dark btn-simple btn-size-lg 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="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</a>
</div>
</div>
<nav x-data="{
activeSubmenu: null,
isSubmenuOpen: false,
init() {
this.$watch('$store.screen.isMobile', (value) => {
if (!value) {
this.activeSubmenu = null;
this.isSubmenuOpen = false;
}
});
},
handleMouseEnter(label) {
if (!this.$store.screen.isMobile) {
this.activeSubmenu = label;
this.isSubmenuOpen = true;
}
},
handleMouseLeave() {
if (!this.$store.screen.isMobile) {
this.activeSubmenu = null;
this.isSubmenuOpen = false;
}
}
}" class="max-md:overflow-y-scroll order-2 transition-all duration-300 md:flex-1 px-3 pt-0.5 pb-4 max-md:py-6 max-md:px-4" :class="[
isMobileMenuOpen ? 'flex-1' : 'md:block',
isSticky ? 'md:pb-2.5 xl:py-[27px]' : 'xl:pb-6'
]" x-show="isMobileMenuOpen || !$store.screen.isMobile" x-transition:enter="transform 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="transform transition ease-out duration-300" x-transition:leave-start="opacity-100 translate-y-0" x-transition:leave-end="opacity-0 translate-y-2" id="mobile-menu" :aria-hidden="!isMobileMenuOpen" aria-label="Menu principal">
<ul class="md:relative flex md:gap-8 flex-col md:flex-row md:items-center transition-all duration-300 justify-center" :class="{'md:justify-center': isSticky}">
<li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('NOS PRODUITS')" @mouseleave.debounce.100ms="handleMouseLeave()">
<button @click="
activeSubmenu = activeSubmenu === 'NOS PRODUITS' ? null : 'NOS PRODUITS';
isSubmenuOpen = activeSubmenu !== null;
" class="flex items-center gap-2 header-menu font-bold" :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === 'NOS PRODUITS'}">
NOS PRODUITS
<span class="transition-transform duration-300 md:rotate-90" :class="{'md:!-rotate-90': activeSubmenu === 'NOS PRODUITS'}">
<svg class="w-5 h-5 md:w-4 md:h-4 transition-transform shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </span>
</button>
<div x-show="activeSubmenu === 'NOS PRODUITS'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" x-transition:enter-end="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave-end="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" class="bg-white absolute md:fixed inset-x-0 w-full h-full md:h-auto max-md:overflow-y-scroll origin-top block max-md:top-[57px] pb-[65px] md:pb-auto z-50 md:mt-3 md:border-t md:border-neutral-50" :class="isSticky ? 'md:mt-[14px] xl:mt-[31px]' : 'md:mt-5 xl:mt-7'" @click.away="if (!$store.screen.isMobile) { activeSubmenu = null; isSubmenuOpen = false; }">
<div class="inline-flex md:block w-full flex-col justify-start items-start px-4 py-6 md:p-6 gap-6 md:py-8">
<div class="md:hidden w-full after:bg-neutral-975 after:h-0.5 after:w-full after:relative after:bottom-[5px] after:block">
<button @click="activeSubmenu = null" class="md:hidden inline-flex w-full items-center justify-start gap-3 py-3 cursor-pointer">
<span class="mr-2">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.22431C12.0732 5.5172 12.0732 5.99208 11.7803 6.28497L8.06066 10.0046L11.7803 13.7243C12.0732 14.0172 12.0732 14.4921 11.7803 14.785C11.4874 15.0779 11.0126 15.0779 10.7197 14.785L6.46967 10.535C6.17678 10.2421 6.17678 9.7672 6.46967 9.47431L10.7197 5.22431C11.0126 4.93142 11.4874 4.93142 11.7803 5.22431Z" fill="currentColor" />
</svg> </span>
<h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">NOS PRODUITS</h2>
</button>
</div>
<div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8" x-data="{ sectionCount: 4 }">
<div class="lg:col-start-3 col-span-4" :class="{
'lg:col-span-3': sectionCount < 4,
'sm:col-span-6 lg:col-span-2': sectionCount >= 4
}">
<h3 class="text-body-lg font-bold min-h-[30px]">Sélection</h3>
<ul class="relative">
<div>
<li class="py-1">
<a href="#" class="header-submenu">
Best Sellers
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Duo & Kits
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Nouveautés
</a>
</li>
</div>
</ul>
</div>
<div class=" col-span-4" :class="{
'lg:col-span-3': sectionCount < 4,
'sm:col-span-6 lg:col-span-2': sectionCount >= 4
}">
<h3 class="text-body-lg font-bold min-h-[30px]">Nos gammes</h3>
<ul class="relative">
<div>
<li class="py-1">
<a href="#" class="header-submenu">
Nettoyants
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Actifs
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Hydratants
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Corps
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Solaires
</a>
</li>
<li class="py-1">
<a href="#" class="header-link">
Voir plus
</a>
</li>
</div>
</ul>
</div>
<div class=" col-span-4" :class="{
'lg:col-span-3': sectionCount < 4,
'sm:col-span-6 lg:col-span-2': sectionCount >= 4
}">
<h3 class="text-body-lg font-bold min-h-[30px]">Actifs purs</h3>
<ul class="relative">
<div>
<li class="py-1">
<a href="#" class="header-submenu">
Acide Hyaluronique
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Vitamine C
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Retinol
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Acide Salicylique
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Niacinamide
</a>
</li>
<li class="py-1">
<a href="#" class="header-link">
Voir plus
</a>
</li>
</div>
</ul>
</div>
<div class=" col-span-4" :class="{
'lg:col-span-3': sectionCount < 4,
'sm:col-span-6 lg:col-span-2': sectionCount >= 4
}">
<h3 class="text-body-lg font-bold min-h-[30px]">Vos préoccupations</h3>
<ul class="relative">
<div>
<li class="py-1">
<a href="#" class="header-submenu">
Signes de l'âge
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Boutons & imperfections
</a>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('DIAGNOSTIQUE')" @mouseleave.debounce.100ms="handleMouseLeave()">
<a href="#" class="flex items-center gap-2 header-menu font-bold">
DIAGNOSTIQUE
</a>
</li>
<li aria-hidden="true" class="hidden md:block w-5 rotate-90 border-t border-black"></li>
<li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('NOS SERVICES')" @mouseleave.debounce.100ms="handleMouseLeave()">
<button @click="
activeSubmenu = activeSubmenu === 'NOS SERVICES' ? null : 'NOS SERVICES';
isSubmenuOpen = activeSubmenu !== null;
" class="flex items-center gap-2 header-menu " :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === 'NOS SERVICES'}">
NOS SERVICES
<span class="transition-transform duration-300 md:rotate-90" :class="{'md:!-rotate-90': activeSubmenu === 'NOS SERVICES'}">
<svg class="w-5 h-5 md:w-4 md:h-4 transition-transform shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </span>
</button>
<div x-show="activeSubmenu === 'NOS SERVICES'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" x-transition:enter-end="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave-end="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" class="bg-white absolute md:fixed inset-x-0 w-full h-full md:h-auto max-md:overflow-y-scroll origin-top block max-md:top-[57px] pb-[65px] md:pb-auto z-50 md:mt-3 md:border-t md:border-neutral-50" :class="isSticky ? 'md:mt-[14px] xl:mt-[31px]' : 'md:mt-5 xl:mt-7'" @click.away="if (!$store.screen.isMobile) { activeSubmenu = null; isSubmenuOpen = false; }">
<div class="inline-flex md:block w-full flex-col justify-start items-start px-4 py-6 md:p-6 gap-6 md:py-8">
<div class="md:hidden w-full after:bg-neutral-975 after:h-0.5 after:w-full after:relative after:bottom-[5px] after:block">
<button @click="activeSubmenu = null" class="md:hidden inline-flex w-full items-center justify-start gap-3 py-3 cursor-pointer">
<span class="mr-2">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.22431C12.0732 5.5172 12.0732 5.99208 11.7803 6.28497L8.06066 10.0046L11.7803 13.7243C12.0732 14.0172 12.0732 14.4921 11.7803 14.785C11.4874 15.0779 11.0126 15.0779 10.7197 14.785L6.46967 10.535C6.17678 10.2421 6.17678 9.7672 6.46967 9.47431L10.7197 5.22431C11.0126 4.93142 11.4874 4.93142 11.7803 5.22431Z" fill="currentColor" />
</svg> </span>
<h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">NOS SERVICES</h2>
</button>
</div>
<div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8" x-data="{ sectionCount: 1 }">
<div class="lg:col-start-3 col-span-4" :class="{
'lg:col-span-3': sectionCount < 4,
'sm:col-span-6 lg:col-span-2': sectionCount >= 4
}">
<h3 class="text-body-lg font-bold min-h-[30px]">Nos services</h3>
<ul class="relative">
<div>
<li class="py-1">
<a href="#" class="header-submenu">
SKINOBS : Analyser ma peau
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
SKINCOACH : Contacter un coach
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
ASKNAOS : Décrypter nos formules
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
POINTS DE VENTE : Où nous trouver ?
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
FAQ : Consulter les questions fréquentes
</a>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</li>
<li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('SKINPEDIA')" @mouseleave.debounce.100ms="handleMouseLeave()">
<a href="#" class="flex items-center gap-2 header-menu ">
SKINPEDIA
</a>
</li>
<li class="py-3 md:py-1 group" @mouseenter.debounce.100ms="handleMouseEnter('LA MARQUE')" @mouseleave.debounce.100ms="handleMouseLeave()">
<button @click="
activeSubmenu = activeSubmenu === 'LA MARQUE' ? null : 'LA MARQUE';
isSubmenuOpen = activeSubmenu !== null;
" class="flex items-center gap-2 header-menu " :class="{'justify-between w-full': $store.screen.isMobile, 'header-menu-open': activeSubmenu === 'LA MARQUE'}">
LA MARQUE
<span class="transition-transform duration-300 md:rotate-90" :class="{'md:!-rotate-90': activeSubmenu === 'LA MARQUE'}">
<svg class="w-5 h-5 md:w-4 md:h-4 transition-transform shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </span>
</button>
<div x-show="activeSubmenu === 'LA MARQUE'" x-transition:enter="transition ease-out duration-300" x-transition:enter-start="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" x-transition:enter-end="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave="transition ease-in duration-200" x-transition:leave-start="opacity-100 transform translate-x-0 md:translate-y-0" x-transition:leave-end="opacity-0 transform translate-x-full md:translate-x-0 md:-translate-y-2" class="bg-white absolute md:fixed inset-x-0 w-full h-full md:h-auto max-md:overflow-y-scroll origin-top block max-md:top-[57px] pb-[65px] md:pb-auto z-50 md:mt-3 md:border-t md:border-neutral-50" :class="isSticky ? 'md:mt-[14px] xl:mt-[31px]' : 'md:mt-5 xl:mt-7'" @click.away="if (!$store.screen.isMobile) { activeSubmenu = null; isSubmenuOpen = false; }">
<div class="inline-flex md:block w-full flex-col justify-start items-start px-4 py-6 md:p-6 gap-6 md:py-8">
<div class="md:hidden w-full after:bg-neutral-975 after:h-0.5 after:w-full after:relative after:bottom-[5px] after:block">
<button @click="activeSubmenu = null" class="md:hidden inline-flex w-full items-center justify-start gap-3 py-3 cursor-pointer">
<span class="mr-2">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11.7803 5.22431C12.0732 5.5172 12.0732 5.99208 11.7803 6.28497L8.06066 10.0046L11.7803 13.7243C12.0732 14.0172 12.0732 14.4921 11.7803 14.785C11.4874 15.0779 11.0126 15.0779 10.7197 14.785L6.46967 10.535C6.17678 10.2421 6.17678 9.7672 6.46967 9.47431L10.7197 5.22431C11.0126 4.93142 11.4874 4.93142 11.7803 5.22431Z" fill="currentColor" />
</svg> </span>
<h2 class="text-base-small leading-[18px] font-bold text-neutral-975 uppercase ">LA MARQUE</h2>
</button>
</div>
<div class="grid-layout w-full justify-center gap-y-6 xl:gap-y-8" x-data="{ sectionCount: 1 }">
<div class="lg:col-start-3 col-span-4" :class="{
'lg:col-span-3': sectionCount < 4,
'sm:col-span-6 lg:col-span-2': sectionCount >= 4
}">
<ul class="relative">
<div>
<li class="py-1">
<a href="#" class="header-submenu">
Découvrez Etat Pur
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Etat Pur, une marque Naos
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
L’écobiologie, qu’est-ce que c’est ?
</a>
</li>
<li class="py-1">
<a href="#" class="header-submenu">
Notre Science de l’âge
</a>
</li>
</div>
</ul>
</div>
</div>
</div>
</div>
</li>
</ul>
<div class="md:hidden border-t border-neutral-975 py-6 mt-6">
<ul class="flex flex-col">
<li class="py-2">
<a href="#" class="flex items-center gap-2 group" aria-label="Nos points de vente">
<span aria-hidden="true">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" 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="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />
</svg> </span>
<span class="header-submenu-group md:hidden lg:block">
Nos points de vente
</span>
</a>
</li>
<li class="py-2">
<a href="#" class="flex items-center gap-2 group">
<span aria-hidden="true">
<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="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </span>
<span class="header-submenu-group">Mon compte</span>
</a>
</li>
</ul>
</div>
<div class="absolute bottom-0 right-0 left-0 md:hidden h-32 w-screen bg-gradient-to-b from-transparent to-white z-40 pointer-events-none"></div>
</nav>
<div x-show="isSticky && !isMobileMenuOpen" class="hidden xl:flex items-center gap-6 transition-opacity duration-300 w-full lg:w-auto order-3" role="group" aria-label="Actions utilisateur">
<form action="#" method="GET" role="search" class="search-form flex items-center flex-1 max-w-md relative border-b border-black/16 group hover:border-neutral-800/64 focus-within:border-black" @click.prevent="openSearchLayer" @keypress="openSearchLayer" :class="isSticky ? 'border-none' : ''">
<label for="search" class="sr-only">Recherche</label>
<input type="text" id="search" name="q" placeholder="Quel est votre besoin/problème de peau ?" class="w-full p-2 pr-8 bg-transparent border-0 text-body-sm hover:text-dark/72 focus:text-dark focus:outline-none focus:ring-transparent" x-model="searchQuery" :class="isSticky ? 'hidden' : ''">
<button type="button" class="absolute right-0 flex items-center justify-center pr-2 focus:outline-none focus:ring-2 focus:ring-neutral-800">
<span class="sr-only">Lancer la recherche</span>
<span aria-hidden="true">
<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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </span>
</button>
</form>
<button id="search-openSearchLayer" class="sr-only" tabindex="-1" aria-hidden="true">Retour recherche</button>
<a href="#" class="flex items-center gap-2 group" aria-label="Trouver un point de vente">
<span aria-hidden="true">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" 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="M15 10.5a3 3 0 1 1-6 0 3 3 0 0 1 6 0Z" fill="none" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M19.5 10.5c0 7.142-7.5 11.25-7.5 11.25S4.5 17.642 4.5 10.5a7.5 7.5 0 1 1 15 0Z" fill="none" />
</svg> </span>
<span class="header-submenu-group md:hidden lg:block" :class="isSticky ? 'lg:hidden' : ''">
Trouver un point de vente
</span>
</a>
<div class="flex items-center gap-6">
<a href="#" type="button" aria-label="Label text" class=" btn btn-dark btn-simple btn-size-lg 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="M15.75 6a3.75 3.75 0 1 1-7.5 0 3.75 3.75 0 0 1 7.5 0ZM4.501 20.118a7.5 7.5 0 0 1 14.998 0A17.933 17.933 0 0 1 12 21.75c-2.676 0-5.216-.584-7.499-1.632Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</a>
<a href="#" class="rounded-full">
<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="M15.75 10.5V6a3.75 3.75 0 1 0-7.5 0v4.5m11.356-1.993 1.263 12c.07.665-.45 1.243-1.119 1.243H4.25a1.125 1.125 0 0 1-1.12-1.243l1.264-12A1.125 1.125 0 0 1 5.513 7.5h12.974c.576 0 1.059.435 1.119 1.007ZM8.625 10.5a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Zm7.5 0a.375.375 0 1 1-.75 0 .375.375 0 0 1 .75 0Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </a>
</div>
</div>
</div>
</div>
<div id="searchLayer" class="fixed inset-x-0 top-0 max-h-full bg-white overflow-y-auto z-50 shadow-32" x-show="isLayerOpen" x-cloak x-transition:enter="transition ease-out duration-200" x-transition:enter-start="opacity-0 transform -translate-y-4" x-transition:enter-end="opacity-100 transform translate-y-0" x-transition:leave="transition ease-in duration-150" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" @keydown.escape.window="closeSearchLayer()" @click.outside="closeSearchLayer()" @mousedown.stop="layerHasFocus = true">
<div class="transition-all duration-300 flex flex-col border-b border-neutral-50">
<div class="md:container md:w-full flex items-center flex-wrap md:justify-between p-4 md:px-0 md:py-2.5 lg:pt-4 lg:pb-6">
<div class="order-1 max-md:w-1/2 justify-items-start max-md:h-10 max-md:border-b border-black/04">
<a href="#" class="text-xl font-light tracking-wider shrink-0" aria-label="Go to Home page">
<span aria-hidden="true">
<svg aria-label="Logo Etat Pur" xmlns="http://www.w3.org/2000/svg" width="155" height="32" viewBox="0 0 155 32" fill="none" class="h-6 md:h-8 transition-all duration-300">
<path fill-rule="evenodd" clip-rule="evenodd" d="M17.9277 14.7376L1.59218 14.7376L1.62618 14.4742C1.89981 12.3389 2.87057 10.6 4.51204 9.30595C6.14698 8.01588 8.00793 7.36158 10.0439 7.36158C12.1371 7.36158 13.9272 7.99909 15.3638 9.25608C16.7987 10.5131 17.6514 12.2692 17.8987 14.4777L17.9277 14.7376ZM10.0436 6.13477C7.35703 6.13477 5.0022 7.04092 3.04394 8.82841C1.09117 10.6129 0.100525 12.9765 0.100525 15.8536C0.100525 18.7044 1.0773 21.0349 3.00391 22.7811C4.9334 24.53 7.22074 25.4166 9.80133 25.4166C12.0233 25.4166 13.9418 24.9044 15.504 23.8939C16.9953 22.9297 18.1217 21.5283 18.8563 19.7245L17.6009 19.4449C16.2017 22.6197 13.5792 24.2282 9.80133 24.2282C7.65341 24.2282 5.72706 23.4667 4.07565 21.9646C2.42266 20.4598 1.5704 18.444 1.54241 15.9714L1.53979 15.7341L19.3823 15.7341V15.2747C19.2772 12.5786 18.3462 10.3535 16.6139 8.66929C14.8848 6.98754 12.6744 6.13477 10.0436 6.13477Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.4551 0L12.4504 0.112169C12.4177 0.930185 12.1032 1.60992 11.5139 2.13196C10.8898 2.68361 10.0963 2.96366 9.15615 2.96366C8.23931 2.96366 7.45878 2.68435 6.83527 2.13246C6.2449 1.61091 5.92957 0.930682 5.89695 0.112169L5.89297 0L4.4823 0L4.48548 0.119879C4.51996 1.28982 4.95809 2.24538 5.78927 2.96117C6.65784 3.71029 7.7903 4.09008 9.15615 4.09008C10.5223 4.09008 11.6545 3.71029 12.5233 2.96117C13.3542 2.24587 13.7931 1.29007 13.8276 0.119879L13.8311 0L12.4551 0Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M32.7163 23.8157C31.4392 23.8157 30.3911 23.42 29.6032 22.6397C28.8183 21.8609 28.4205 20.7971 28.4205 19.4757V7.38985L35.8315 7.38985V6.23422L28.4205 6.23422V0L26.9295 0V6.23422H22.596V7.38985H26.9295V19.5914C26.9295 21.3256 27.4498 22.695 28.4755 23.6638C29.503 24.6332 30.8894 25.1248 32.5953 25.1248C33.9861 25.1248 35.3393 24.6715 36.6191 23.7777L36.0707 22.6731C35.0423 23.4316 33.9154 23.8157 32.7163 23.8157Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M58.5129 15.4838C58.5129 17.9566 57.6643 19.9994 55.9897 21.5548C54.317 23.1088 52.3142 23.8969 50.0378 23.8969C47.6544 23.8969 45.6247 23.1216 44.0057 21.5927C42.3854 20.0626 41.5642 18.0075 41.5642 15.4838C41.5642 12.9869 42.392 10.9385 44.0253 9.39462C45.6596 7.85248 47.6823 7.07038 50.0378 7.07038C52.2873 7.07038 54.2818 7.8585 55.9684 9.41242C57.6567 10.9688 58.5129 13.0117 58.5129 15.4838ZM54.6378 6.99099C53.1935 6.22894 51.579 5.84277 49.8374 5.84277C47.161 5.84277 44.8483 6.74866 42.9633 8.53413C41.0796 10.3186 40.1246 12.6564 40.1246 15.4835C40.1246 18.3363 41.0731 20.6813 42.9427 22.4533C44.8144 24.2257 47.1336 25.1246 49.8374 25.1246C51.5811 25.1246 53.1967 24.7447 54.6391 23.9959C56.0784 23.2476 57.2284 22.1861 58.058 20.842L58.5126 20.1042V24.7001H59.9907V6.30612H58.5126V10.9025L58.058 10.1642C57.2271 8.8178 56.0773 7.75053 54.6378 6.99099Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M75.3698 23.8157C74.0926 23.8157 73.0445 23.42 72.2567 22.6397C71.4717 21.8609 71.0734 20.7971 71.0734 19.4757V7.38985L78.4845 7.38985V6.23422L71.0734 6.23422V0L69.5828 0V6.23422H65.2498V7.38985H69.5828V19.5914C69.5828 21.3256 70.1029 22.695 71.1291 23.6638C72.1559 24.6332 73.5423 25.1248 75.2483 25.1248C76.6396 25.1248 77.9929 24.6715 79.2729 23.7777L78.7242 22.6731C77.6961 23.4316 76.5689 23.8157 75.3698 23.8157Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M95.2733 9.14817C96.9592 7.58183 98.9546 6.78717 101.204 6.78717C103.561 6.78717 105.584 7.57552 107.217 9.13024C108.851 10.6865 109.679 12.7512 109.679 15.2678C109.679 17.8107 108.858 19.8824 107.237 21.4253C105.618 22.9671 103.588 23.7484 101.204 23.7484C98.927 23.7484 96.9242 22.9537 95.2527 21.3874C93.5776 19.82 92.7289 17.7611 92.7289 15.2678C92.7289 12.7769 93.5846 10.7175 95.2733 9.14817ZM92.7283 19.8355L93.184 20.5935C94.0141 21.9745 95.1708 23.0632 96.6229 23.8303C97.4617 24.2723 98.3576 24.5845 99.2988 24.7735C99.4454 24.779 99.5929 24.7628 99.7401 24.7871C101.184 25.0259 103.222 24.8354 103.573 24.7871C104.03 24.7242 104.818 24.4398 104.818 24.4398C106.103 23.9942 107.267 23.2789 108.299 22.294C110.169 20.5079 111.117 18.1439 111.117 15.2683C111.117 12.4191 110.168 10.0621 108.298 8.26289C106.427 6.46315 104.121 5.55078 101.444 5.55078C99.702 5.55078 98.0793 5.94003 96.6224 6.70867C95.1708 7.47404 94.0141 8.56272 93.184 9.94365L92.7283 10.7014V6.01758H91.2506V31.2598H92.7283V19.8355Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M120.664 22.1287C119.523 20.8404 118.944 19.1339 118.944 17.0577V6.13477H117.545V17.3334C117.545 19.7565 118.232 21.7315 119.59 23.2048C120.943 24.6722 122.763 25.4166 125.002 25.4166C126.72 25.4166 128.25 25.023 129.548 24.2466C130.844 23.4716 131.872 22.3688 132.603 20.9687L133.051 20.1096V24.9425H134.489V6.13477H133.051V15.5588C133.051 18.1605 132.333 20.2528 130.916 21.7779C129.496 23.3073 127.584 24.0824 125.236 24.0824C123.352 24.0824 121.814 23.4252 120.664 22.1287Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M148.476 7.42411C147.009 8.3795 145.584 9.70143 144.848 11.6395L144.8 6.28987H143.254V24.8323H144.8V17.1356C144.8 14.4233 145.604 12.1172 147.187 10.2807C148.785 8.428 151.006 7.48878 153.792 7.48878C154.193 7.48878 154.521 7.50267 154.784 7.53097L154.939 6.20701C154.611 6.15876 154.226 6.13477 153.792 6.13477C151.368 6.13477 149.504 6.75468 148.476 7.42411Z" fill="black" />
</svg>
</span>
</a>
</div>
<div class="order-4 md:order-2 flex items-center flex-1 max-md:mt-6 max-md:mx-6 md:mx-12 transition-all duration-300 justify-center gap-6 lg:gap-10">
<form action="#" method="GET" role="search" class="search-form flex items-center flex-1 max-w-md relative border-b border-black/16 group hover:border-neutral-800/64 focus-within:border-black">
<label for="searchLayerInput" class="sr-only">Re
cherche</label>
<input type="text" id="searchLayerInput" name="q" autocomplete="off" autocorrect="off" autocapitalize="off" placeholder="Quel est votre besoin/problème de peau ?" class="w-full p-2 pr-8 bg-transparent border-0 text-body-sm hover:text-dark/72 focus:text-dark focus:outline-none focus:ring-transparent" x-model="searchQuery" @keypress.debounce.300ms="handleSearchQueryChange()" @focus="openSearchLayer()">
<button type="button" class="absolute right-10 flex items-center justify-center" x-show="searchQuery.length > 0" @click.stop.prevent="resetSearch(); $event.target.closest('form').querySelector('input').focus()">
<span class="sr-only">Effacer la recherche</span>
<svg width="13" height="14" viewBox="0 0 13 14" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M6.57187 13.4C10.1065 13.4 12.9719 10.5346 12.9719 7.00001C12.9719 3.46538 10.1065 0.600006 6.57187 0.600006C3.03725 0.600006 0.171875 3.46538 0.171875 7.00001C0.171875 10.5346 3.03725 13.4 6.57187 13.4ZM5.19614 4.77574C4.96182 4.54143 4.58193 4.54143 4.34761 4.77574C4.1133 5.01006 4.1133 5.38996 4.34761 5.62427L5.72335 7.00001L4.34761 8.37574C4.1133 8.61006 4.1133 8.98995 4.34761 9.22427C4.58193 9.45858 4.96182 9.45858 5.19614 9.22427L6.57187 7.84853L7.94761 9.22427C8.18192 9.45858 8.56182 9.45858 8.79614 9.22427C9.03045 8.98995 9.03045 8.61006 8.79614 8.37574L7.4204 7.00001L8.79614 5.62427C9.03045 5.38996 9.03045 5.01006 8.79614 4.77574C8.56182 4.54143 8.18192 4.54143 7.94761 4.77574L6.57187 6.15148L5.19614 4.77574Z" fill="#0F172A" />
</svg>
</button>
<button type="submit" class="absolute right-0 flex items-center justify-center pr-2 focus:outline-none focus:ring-2 focus:ring-neutral-800">
<span class="sr-only">Lancer la recherche</span>
<span aria-hidden="true">
<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="m21 21-5.197-5.197m0 0A7.5 7.5 0 1 0 5.196 5.196a7.5 7.5 0 0 0 10.607 10.607Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> </span>
</button>
</form>
</div>
<div class="order-3 max-md:w-1/2 justify-items-end text-right max-md:h-10 max-md:border-b border-black/04">
<button type="button" @click="closeSearchLayer()" class="!gap-2 btn btn-dark btn-simple btn-size-sm btn-icons">
Fermer
<svg width="16" height="16" viewBox="0 0 16 16" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M4 12L12 4M4 4L12 12" stroke="currentColor" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
</svg>
</button>
</div>
</div>
</div>
<div class="search-results adjusted-marg-y-sm">
<div x-show="isLoading" class="col-span-full text-center">
<p class="container h5-base">Recherche en cours...</p>
</div>
<div x-show="searchQuery.length < 3" class="col-span-full text-center">
<p class="container h5-base">Commencez à taper pour rechercher des produits</p>
</div>
<div x-show="searchQuery.length >= 3 && !isLoading && results.length === 0" class="flex flex-col gap-4 2xl:gap-6 3xl:gap-10">
<p class="container h5-base">
Désolé, nous n’avons aucun résultats pour “<span class="font-bold" x-text="searchQuery"></span>“
</p>
<section class="flex flex-col gap-3 py-6 2xl:py-8 3xl:py-18">
<div class="container text-body-lg font-bold text-black/64">
<h3>Des suggestions...</h3>
</div>
<div class="overflow-auto">
<div class="container flex gap-3 2xl:gap-4 3xl:gap-5">
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<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.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<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.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<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.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<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.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0 flex md:hidden lg:flex">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<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.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a>
</div>
</div>
</section>
</div>
<section x-show="searchQuery.length >= 3 && !isLoading && results.length > 0" class="flex flex-col gap-3">
<div class="container text-click-sm font-bold">
<h3 x-text="results.length + ' résultats possibles pour “' + searchQuery + '“'"></h3>
</div>
<div class="overflow-auto">
<div class="container flex md:flex-wrap gap-y-6 gap-x-3 2xl:gap-x-4 3xl:gap-x-5">
<template x-for="result in results" :key="result.id">
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[249px] 3xl:w-[322px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<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.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> </template>
</div>
<div class="container mt-16">
<div class="flex items-center justify-between">
<h4 class="h4">Blog</h4>
<a href="#" class="underline decoration-1">24 résultats</a>
</div>
<section class="max-md:pe-0 adjusted-marg-y-md flex flex-col gap-3" x-data="initSlider" x-init="calcPageSize(); $nextTick(function() { calcActive() })" @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel">
<div class="flex md:grid grid-cols-3 gutter-quarter overflow-auto js_slides snap" @scroll.debounce="calcActive">
<a id="slide-0" aria-labelledby="tab-0" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-1" aria-labelledby="tab-1" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Vieillissement de la peau du visage : nos astuces à partir de 40 ans
</div>
</a> <a id="slide-2" aria-labelledby="tab-2" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-3" aria-labelledby="tab-3" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-4" aria-labelledby="tab-4" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-5" aria-labelledby="tab-5" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-6" aria-labelledby="tab-6" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-7" aria-labelledby="tab-7" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-8" aria-labelledby="tab-8" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-9" aria-labelledby="tab-9" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-10" aria-labelledby="tab-10" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-11" aria-labelledby="tab-11" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<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 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a>
</div>
<div class="flex items-center justify-center py-6 mt-3 md:hidden">
<div role="tablist" aria-label="Navigation du slider" class="flex flex-wrap justify-center gap-3">
<template x-for="(index, i) in Math.ceil(itemCount / pageSize)" :key="i">
<button class="shrink-0 block h-1 bg-black rounded-full shadow cursor-pointer transition-all duration-300 ease-in-out" role="tab" :id="'tab-' + (index-1)" :aria-controls="'slide-' + (index-1)" :aria-selected="Math.floor(active/pageSize) === index-1" :tabindex="Math.floor(active/pageSize) === index-1 ? 0 : -1" :class="{
'bg-opacity-100 w-22': Math.floor(active/pageSize) === index-1,
'bg-opacity-40 w-6': Math.floor(active/pageSize) !== index-1
}" @click="scrollTo((index-1)*pageSize);">
<span class="sr-only" x-text="'Aller au groupe de slides ' + index"></span>
</button>
</template>
</div>
</div>
</section>
<script>
'use strict';
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
</div>
</div>
</section>
</div>
</div>
</header>
<script>
function stickyHeader() {
return {
isSticky: false,
isMobileMenuOpen: false,
lastScrollPosition: 0,
scrollingUp: true,
scrollThreshold: 100,
scrollDebounce: false,
stickyChangeTimer: null,
init() {
this.$watch('isMobileMenuOpen', value => {
if (value) {
this.isSticky = false;
document.body.style.position = 'fixed'
document.body.style.top = `-${window.scrollY}px`
document.body.style.width = '100%'
} else {
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
document.body.style.width = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
});
window.addEventListener('scroll', () => {
if (this.scrollDebounce) return;
this.scrollDebounce = true;
setTimeout(() => {
this.scrollDebounce = false;
}, 50);
const currentScroll = window.scrollY;
const wasScrollingUp = this.scrollingUp;
this.scrollingUp = currentScroll < this.lastScrollPosition;
if (this.scrollingUp && !wasScrollingUp && currentScroll > this.scrollThreshold) {
if (this.stickyChangeTimer) {
clearTimeout(this.stickyChangeTimer);
}
this.isSticky = true;
this.stickyChangeTimer = setTimeout(() => {
if (!this.scrollingUp || window.scrollY < this.scrollThreshold) {
this.isSticky = false;
}
}, 100);
} else if (!this.scrollingUp || currentScroll < this.scrollThreshold) {
if (this.stickyChangeTimer) {
clearTimeout(this.stickyChangeTimer);
}
this.stickyChangeTimer = setTimeout(() => {
this.isSticky = false;
}, 100);
}
this.lastScrollPosition = currentScroll;
}, {
passive: true
});
}
}
}
function searchComponent() {
return {
searchQuery: '',
results: [],
isLoading: false,
isLayerOpen: false,
layerHasFocus: false,
isClosing: false,
handleSearchQueryChange() {
console.log("handleSearchQueryChange")
if (this.searchQuery.length < 3) {
this.results = [];
return;
}
this.fetchResults(this.searchQuery);
},
async fetchResults() {
try {
this.isLoading = true;
await new Promise(resolve => setTimeout(resolve, Math.random() * 300 + 500));
const mockProducts = [{
id: 1
}, {
id: 2
}, {
id: 3
}, {
id: 4
}, {
id: 5
}, {
id: 6
}, {
id: 7
}, {
id: 8
}, {
id: 9
}];
if (this.searchQuery === 'notfound') {
this.results = [];
return;
}
this.results = mockProducts
} catch (error) {
console.error('Erreur lors de la recherche:', error);
this.results = [];
} finally {
this.isLoading = false;
}
},
openSearchLayer() {
this.isLayerOpen = true;
this.layerHasFocus = true;
this.isClosing = false;
document.body.classList.add('overflow-hidden');
this.$nextTick(() => {
document.getElementById('searchLayerInput').focus();
});
if (this.searchQuery.length >= 3) {
this.fetchResults(this.searchQuery);
}
},
closeSearchLayer() {
if (this.isClosing) return;
this.isClosing = true;
this.isLayerOpen = false;
this.layerHasFocus = false;
document.body.classList.remove('overflow-hidden');
this.$nextTick(() => {
requestAnimationFrame(() => {
this.isClosing = false;
document.getElementById('search-openSearchLayer').focus()
});
});
},
resetSearch() {
this.searchQuery = '';
this.results = [];
this.$nextTick(() => {
document.getElementById('searchLayerInput').focus();
});
}
}
}
</script>
<header x-data="searchComponent()" class="relative {% if isHomepage == false and isAbsolute == true %}pt-[57px] md:pt-[118px] lg:pt-[124px] xl:pt-[132px] 3xl:pt-[140px]{% endif %}">
<div x-data="stickyHeader"
class="{% if isAbsolute == true %}absolute{% endif %} top-0 w-full hover:bg-white md:border-b border-black/04 z-30"
:class="{
'!fixed bg-white shadow-md': isSticky || isMobileMenuOpen,
'-translate-y-full': !isSticky && !scrollingUp && !isMobileMenuOpen && lastScrollPosition > 0
}"
>
<a class="action skip sr-only focus:not-sr-only focus:absolute focus:z-40 focus:bg-white contentarea"
href="#contentarea">
<span>Skip to Content</span>
</a>
<div class="md:container transition-all duration-300"
:class="[
isMobileMenuOpen ? 'fixed inset-0 bg-white z-50 flex flex-col md:relative md:inset-auto' : '',
isSticky && !isMobileMenuOpen ? 'md:flex md:flex-wrap md:items-center md:justify-between' : 'flex flex-col'
]">
{% render "@header-top-bar" with {isCheckout: isCheckout} %}
{% if isCheckout == false %}
{% render "@header-navigation" %}
{% endif %}
{% render "@header-sticky-actions" %}
</div>
</div>
{% render "@search-layer" %}
</header>
<script>
function stickyHeader() {
return {
isSticky: false,
isMobileMenuOpen: false,
lastScrollPosition: 0,
scrollingUp: true,
scrollThreshold: 100,
scrollDebounce: false,
stickyChangeTimer: null,
init() {
this.$watch('isMobileMenuOpen', value => {
if (value) {
this.isSticky = false;
document.body.style.position = 'fixed'
document.body.style.top = `-${window.scrollY}px`
document.body.style.width = '100%'
} else {
const scrollY = document.body.style.top
document.body.style.position = ''
document.body.style.top = ''
document.body.style.width = ''
window.scrollTo(0, parseInt(scrollY || '0') * -1)
}
});
window.addEventListener('scroll', () => {
if (this.scrollDebounce) return;
this.scrollDebounce = true;
setTimeout(() => {
this.scrollDebounce = false;
}, 50);
const currentScroll = window.scrollY;
const wasScrollingUp = this.scrollingUp;
this.scrollingUp = currentScroll < this.lastScrollPosition;
if (this.scrollingUp && !wasScrollingUp && currentScroll > this.scrollThreshold) {
if (this.stickyChangeTimer) {
clearTimeout(this.stickyChangeTimer);
}
this.isSticky = true;
this.stickyChangeTimer = setTimeout(() => {
if (!this.scrollingUp || window.scrollY < this.scrollThreshold) {
this.isSticky = false;
}
}, 100);
} else if (!this.scrollingUp || currentScroll < this.scrollThreshold) {
if (this.stickyChangeTimer) {
clearTimeout(this.stickyChangeTimer);
}
this.stickyChangeTimer = setTimeout(() => {
this.isSticky = false;
}, 100);
}
this.lastScrollPosition = currentScroll;
}, {passive: true});
}
}
}
function searchComponent() {
return {
searchQuery: '',
results: [],
isLoading: false,
isLayerOpen: false,
layerHasFocus: false,
isClosing: false,
handleSearchQueryChange() {
console.log("handleSearchQueryChange")
if (this.searchQuery.length < 3) {
this.results = [];
return;
}
this.fetchResults(this.searchQuery);
},
async fetchResults() {
try {
this.isLoading = true;
await new Promise(resolve => setTimeout(resolve, Math.random() * 300 + 500));
const mockProducts = [{id:1}, {id:2}, {id:3}, {id:4}, {id:5}, {id:6}, {id:7}, {id:8}, {id:9}];
if (this.searchQuery === 'notfound') {
this.results = [];
return;
}
this.results = mockProducts
} catch (error) {
console.error('Erreur lors de la recherche:', error);
this.results = [];
} finally {
this.isLoading = false;
}
},
openSearchLayer() {
this.isLayerOpen = true;
this.layerHasFocus = true;
this.isClosing = false;
document.body.classList.add('overflow-hidden');
this.$nextTick(() => {
document.getElementById('searchLayerInput').focus();
});
if (this.searchQuery.length >= 3) {
this.fetchResults(this.searchQuery);
}
},
closeSearchLayer() {
if (this.isClosing) return;
this.isClosing = true;
this.isLayerOpen = false;
this.layerHasFocus = false;
document.body.classList.remove('overflow-hidden');
this.$nextTick(() => {
requestAnimationFrame(() => {
this.isClosing = false;
document.getElementById('search-openSearchLayer').focus()
});
});
},
resetSearch() {
this.searchQuery = '';
this.results = [];
this.$nextTick(() => {
document.getElementById('searchLayerInput').focus();
});
}
}
}
</script>
{
"isAbsolute": true,
"isCheckout": false
}
No notes defined.