<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 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"
>
{% render "@header-search-bar" with {
form_attribute:(":class=\"isSticky ? 'border-none' : ''\"")|replace({'\"': '"'}),
input_attribute:(":class=\"isSticky ? 'hidden' : ''\"")|replace({'\"': '"'})
} %}
{% render "@header-store-locator" with {
class: "shrink-0 transition-all duration-300",
span_attribute:(":class=\"isSticky ? 'lg:hidden' : ''\"")|replace({'\"': '"'})
} %}
<div class="flex items-center gap-6">
{% render "@template-button" with {
color: 'dark',
href: '#',
type: 'simple',
icon_type: 'only-icon',
icon: {
name: 'heroicons--user-outline',
}
} %}
<a href="#" class="rounded-full">
{% render "@icons-heroicons--shopping-bag-outline" with {
class: "w-5 h-5"
} %}
</a>
</div>
</div>
/* No context defined. */
No notes defined.