header-top-bar

<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>