Pre Header

<header class="flex justify-evenly w-full h-10 py-1 bg-brand-200 text-amber-50 items-center">
    <div class="hidden lg:flex lg:gap-2 ">
        <div class="dropdown  dropdown-size-sm" x-data="{show:false}">
            <button type="button" x-ref="dropdownButton" @click="show = ! show" class=" btn-icons  btn btn-topheader btn-size-sm btn-icons">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M3.42322 11.3023H7.59855C7.73678 8.49302 8.7069 5.79564 10.3734 3.54887C6.6214 4.26671 3.73464 7.42122 3.42322 11.3023ZM12 3.74171C10.2029 5.86705 9.14755 8.52214 8.99577 11.3023H15.0042C14.8525 8.52214 13.7971 5.86705 12 3.74171ZM15.0042 12.6977H8.99577C9.14755 15.4779 10.2029 18.133 12 20.2583C13.7971 18.133 14.8525 15.4779 15.0042 12.6977ZM10.3734 20.4511C8.7069 18.2044 7.73678 15.507 7.59855 12.6977H3.42322C3.73464 16.5788 6.6214 19.7333 10.3734 20.4511ZM13.6266 20.4511C17.3786 19.7333 20.2654 16.5788 20.5768 12.6977H16.4015C16.2632 15.507 15.2931 18.2044 13.6266 20.4511ZM20.5768 11.3023C20.2654 7.42122 17.3786 4.26671 13.6266 3.54887C15.2931 5.79564 16.2632 8.49302 16.4015 11.3023H20.5768ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor" />
                </svg>
                France - FR

                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                </svg>

            </button>

            <div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    Espagne - ES
                </button>
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    Belgique - FR
                </button>
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    Belgique - NL
                </button>
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    Suisse - FR
                </button>
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    Maroc - FR
                </button>
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    Portugal - PT
                </button>
            </div>

        </div>
        <button type="button" class=" btn btn-topheader btn-size-sm btn-icons">
            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.75H15C15.1381 3.75 15.25 3.86193 15.25 4V4.25H8.75V4C8.75 3.86193 8.86193 3.75 9 3.75ZM7.25 4V4.25H3C2.0335 4.25 1.25 5.0335 1.25 6V11.1802C1.25 11.8683 1.65061 12.4775 2.25 12.7616V19C2.25 19.9665 3.0335 20.75 4 20.75H20C20.9665 20.75 21.75 19.9665 21.75 19V12.7616C22.3494 12.4775 22.75 11.8683 22.75 11.1802V6C22.75 5.0335 21.9665 4.25 21 4.25H16.75V4C16.75 3.0335 15.9665 2.25 15 2.25H9C8.0335 2.25 7.25 3.0335 7.25 4ZM3 5.75H8H16H21C21.1381 5.75 21.25 5.86193 21.25 6V11.1802C21.25 11.2994 21.1659 11.402 21.049 11.4253L20.25 11.5851L13 12.8285V12.5C13 11.9477 12.5523 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5V12.8285L3.75 11.5851L2.95097 11.4253C2.83411 11.402 2.75 11.2994 2.75 11.1802V6C2.75 5.86193 2.86193 5.75 3 5.75ZM11 14.3321V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14.3321L20.25 13.1149V19C20.25 19.1381 20.1381 19.25 20 19.25H4C3.86193 19.25 3.75 19.1381 3.75 19V13.1149L11 14.3321Z" fill="currentColor" />
            </svg>
            Nous Rejoindre

        </button>
    </div>
    <div class="info-carousel flex items-center gap-6">
        <button type="button" class=" btn btn-topheader btn-size-sm btn-only-icon">
            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
            </svg>

        </button>
        <div class="text-black text-xs font-medium text-center">Livraison offerte à partir de XX€ d’achat</div>
        <button type="button" class=" btn btn-topheader btn-size-sm btn-only-icon">
            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
            </svg>

        </button>
    </div>
    <div class="hidden lg:flex lg:gap-2">
        <button type="button" class=" btn btn-topheader btn-size-sm btn-icons">
            <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                <path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12.3004 7.77791C11.7767 7.68808 11.2381 7.78649 10.78 8.05572C10.3219 8.32495 9.97383 8.74762 9.7975 9.24887C9.66004 9.63961 9.23186 9.84494 8.84111 9.70749C8.45037 9.57004 8.24504 9.14185 8.3825 8.75111C8.67638 7.91569 9.25644 7.21124 10.0199 6.76252C10.7834 6.31381 11.6811 6.14978 12.554 6.2995C13.4268 6.44921 14.2185 6.90301 14.7888 7.58052C15.359 8.25785 15.6712 9.11509 15.67 10.0005C15.6698 11.3983 14.6312 12.3439 13.836 12.874C13.4155 13.1543 13.0004 13.3614 12.6933 13.4978C12.5182 13.5757 12.3405 13.6479 12.1594 13.7108L12.1581 13.7112C11.7651 13.8422 11.3395 13.6301 11.2085 13.2372C11.0776 12.8446 11.2895 12.4203 11.6817 12.2889L11.6846 12.2879C11.8201 12.2404 11.953 12.1854 12.0841 12.1271C12.3396 12.0136 12.6744 11.8456 13.004 11.626C13.7087 11.1562 14.17 10.6018 14.17 9.99999V9.99887C14.1708 9.46751 13.9835 8.95302 13.6413 8.54652C13.2991 8.14002 12.8241 7.86774 12.3004 7.77791ZM12 16.25C11.5858 16.25 11.25 16.5858 11.25 17C11.25 17.4142 11.5858 17.75 12 17.75H12.01C12.4242 17.75 12.76 17.4142 12.76 17C12.76 16.5858 12.4242 16.25 12.01 16.25H12Z" fill="currentColor" />
            </svg>
            Besoin d'aide

        </button>
        <div class="dropdown  dropdown-size-sm" x-data="{show:false}">
            <button type="button" x-ref="dropdownButton" @click="show = ! show" class=" btn-icons  btn btn-dark btn-size-sm btn-icons">
                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C8.55638 3.75 5.75 6.53739 5.75 9.92308C5.75 12.7655 7.35594 15.361 9.06325 17.3029C9.9074 18.263 10.7535 19.0373 11.3889 19.5713C11.6267 19.7713 11.8342 19.9369 12 20.0653C12.1658 19.9369 12.3733 19.7713 12.6111 19.5713C13.2465 19.0373 14.0926 18.263 14.9367 17.3029C16.6441 15.361 18.25 12.7655 18.25 9.92308C18.25 6.53739 15.4436 3.75 12 3.75ZM12 21C11.5731 21.6166 11.5729 21.6165 11.5726 21.6163L11.5704 21.6147L11.5651 21.6111L11.5471 21.5984C11.5318 21.5876 11.5101 21.5722 11.4824 21.5521C11.4269 21.5121 11.3473 21.4537 11.247 21.3779C11.0464 21.2263 10.7628 21.0046 10.4236 20.7195C9.74646 20.1502 8.8426 19.3236 7.93675 18.2933C6.14406 16.2544 4.25 13.3114 4.25 9.92308C4.25 5.69338 7.74362 2.25 12 2.25C16.2564 2.25 19.75 5.69338 19.75 9.92308C19.75 13.3114 17.8559 16.2544 16.0633 18.2933C15.1574 19.3236 14.2535 20.1502 13.5764 20.7195C13.2372 21.0046 12.9536 21.2263 12.753 21.3779C12.6527 21.4537 12.5731 21.5121 12.5176 21.5521C12.4899 21.5722 12.4682 21.5876 12.4529 21.5984L12.4349 21.6111L12.4296 21.6147L12.428 21.6159C12.4277 21.6161 12.4269 21.6166 12 21ZM12 21L12.4269 21.6166L12 21.9122L11.5726 21.6163L12 21ZM12 7.75C10.7574 7.75 9.75 8.75736 9.75 10C9.75 11.2426 10.7574 12.25 12 12.25C13.2426 12.25 14.25 11.2426 14.25 10C14.25 8.75736 13.2426 7.75 12 7.75ZM8.25 10C8.25 7.92893 9.92893 6.25 12 6.25C14.0711 6.25 15.75 7.92893 15.75 10C15.75 12.0711 14.0711 13.75 12 13.75C9.92893 13.75 8.25 12.0711 8.25 10Z" fill="currentColor" />
                </svg>
                Trouver un magasin

                <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                    <path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
                </svg>

            </button>

            <div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M5.67774 7.32342C6.0043 6.72211 6.28536 6.3513 6.6046 6.11834C6.90864 5.89648 7.31712 5.75 8 5.75C8.41421 5.75 8.75 5.41421 8.75 5C8.75 4.58579 8.41421 4.25 8 4.25C7.08288 4.25 6.34136 4.45352 5.7204 4.90666C5.12029 5.34457 4.70564 5.96472 4.33965 6.64443C4.32789 6.66625 4.31723 6.68865 4.30769 6.71154L1.80769 12.7115C1.78949 12.7552 1.77573 12.7996 1.7662 12.8443C1.43614 13.4912 1.25 14.2239 1.25 15C1.25 17.6234 3.37665 19.75 6 19.75C8.62335 19.75 10.75 17.6234 10.75 15C10.75 14.6685 10.8817 14.3505 11.1161 14.1161C11.3505 13.8817 11.6685 13.75 12 13.75C12.3315 13.75 12.6495 13.8817 12.8839 14.1161C13.1183 14.3505 13.25 14.6685 13.25 15C13.25 17.6234 15.3766 19.75 18 19.75C20.6234 19.75 22.75 17.6234 22.75 15C22.75 14.2239 22.5639 13.4912 22.2338 12.8443C22.2243 12.7996 22.2105 12.7552 22.1923 12.7115L19.6923 6.71154C19.6828 6.68865 19.6721 6.66625 19.6604 6.64443C19.2846 5.94667 18.8429 5.33349 18.2344 4.90111C17.6103 4.45767 16.876 4.25 16 4.25C15.5858 4.25 15.25 4.58579 15.25 5C15.25 5.41421 15.5858 5.75 16 5.75C16.624 5.75 17.0397 5.89233 17.3656 6.12389C17.701 6.36219 18.0044 6.7396 18.3223 7.32359L19.667 10.5507C19.1483 10.3563 18.5866 10.25 18 10.25C16.1393 10.25 14.5285 11.3199 13.7492 12.878C13.2588 12.4737 12.6409 12.25 12 12.25C11.3591 12.25 10.7412 12.4737 10.2508 12.878C9.47149 11.3199 7.86069 10.25 6 10.25C5.41344 10.25 4.85171 10.3563 4.33303 10.5507L5.67774 7.32342ZM6 11.75C7.79493 11.75 9.25 13.2051 9.25 15C9.25 16.7949 7.79493 18.25 6 18.25C4.20507 18.25 2.75 16.7949 2.75 15C2.75 13.2051 4.20507 11.75 6 11.75ZM14.75 15C14.75 13.2051 16.2051 11.75 18 11.75C19.7949 11.75 21.25 13.2051 21.25 15C21.25 16.7949 19.7949 18.25 18 18.25C16.2051 18.25 14.75 16.7949 14.75 15Z" fill="currentColor" />
                    </svg>
                    Trouver un opticien
                </button>
                <!-- Button item -->
                <button type="button" class="dropdown-item ">
                    <svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
                        <path fill-rule="evenodd" clip-rule="evenodd" d="M8.07434 4.96199C9.11549 3.95889 10.5276 3.39535 12 3.39535C13.4724 3.39535 14.8845 3.95889 15.9257 4.96199C16.9668 5.96509 17.5517 7.32559 17.5517 8.74419C17.5517 10.0124 17.2258 10.931 16.7554 11.6611C16.2761 12.4051 15.6269 12.9861 14.9157 13.5571C14.7838 13.663 14.6473 13.7702 14.5086 13.8792C13.9321 14.3322 13.3179 14.8148 12.8381 15.3541C12.2106 16.0595 11.7586 16.9124 11.7586 18.0465C11.7586 18.3825 11.6899 18.7151 11.5565 19.0255C11.4231 19.3358 11.2275 19.6178 10.9809 19.8554C10.7344 20.0929 10.4417 20.2814 10.1195 20.4099C9.7974 20.5385 9.45213 20.6047 9.10345 20.6047C8.75477 20.6047 8.4095 20.5385 8.08736 20.4099C7.76522 20.2814 7.47251 20.0929 7.22596 19.8554C6.9794 19.6178 6.78382 19.3358 6.65039 19.0255C6.51695 18.7151 6.44828 18.3825 6.44828 18.0465C6.44828 17.6612 6.12407 17.3488 5.72414 17.3488C5.32421 17.3488 5 17.6612 5 18.0465C5 18.5657 5.10614 19.0798 5.31236 19.5594C5.51857 20.0391 5.82083 20.4749 6.20187 20.8421C6.58291 21.2092 7.03527 21.5004 7.53313 21.6991C8.03098 21.8977 8.56457 22 9.10345 22C9.64232 22 10.1759 21.8977 10.6738 21.6991C11.1716 21.5004 11.624 21.2092 12.005 20.8421C12.3861 20.4749 12.6883 20.0391 12.8945 19.5594C13.1008 19.0798 13.2069 18.5657 13.2069 18.0465C13.2069 17.3201 13.4791 16.7778 13.9377 16.2622C14.3252 15.8267 14.8093 15.4454 15.3735 15.0011C15.5243 14.8823 15.681 14.759 15.8429 14.629C16.58 14.0371 17.379 13.3391 17.9859 12.397C18.6018 11.4411 19 10.2666 19 8.74419C19 6.95552 18.2625 5.24011 16.9497 3.97533C15.637 2.71055 13.8565 2 12 2C10.1435 2 8.36301 2.71055 7.05025 3.97533C5.7375 5.24011 5 6.95552 5 8.74419C5 9.1295 5.32421 9.44186 5.72414 9.44186C6.12407 9.44186 6.44828 9.1295 6.44828 8.74419C6.44828 7.32559 7.03319 5.96509 8.07434 4.96199ZM12 5.72093C11.1678 5.72093 10.3696 6.03945 9.78115 6.60642C9.19267 7.17339 8.86207 7.94237 8.86207 8.74419V9.67442C8.86207 10.0597 9.18628 10.3721 9.58621 10.3721C9.9063 10.3721 10.2133 10.4946 10.4396 10.7127C10.6659 10.9307 10.7931 11.2265 10.7931 11.5349C10.7931 11.8433 10.6659 12.139 10.4396 12.3571C10.2133 12.5752 9.9063 12.6977 9.58621 12.6977C9.18628 12.6977 8.86207 13.01 8.86207 13.3953C8.86207 13.7807 9.18628 14.093 9.58621 14.093C10.2904 14.093 10.9658 13.8235 11.4637 13.3438C11.9616 12.864 12.2414 12.2133 12.2414 11.5349C12.2414 10.8564 11.9616 10.2058 11.4637 9.72601C11.1405 9.41458 10.7425 9.19174 10.3103 9.07371V8.74419C10.3103 8.31244 10.4884 7.89837 10.8052 7.59308C11.1221 7.28779 11.5519 7.11628 12 7.11628C12.4481 7.11628 12.8779 7.28779 13.1948 7.59308C13.5116 7.89837 13.6897 8.31244 13.6897 8.74419C13.6897 9.1295 14.0139 9.44186 14.4138 9.44186C14.8137 9.44186 15.1379 9.1295 15.1379 8.74419C15.1379 7.94237 14.8073 7.17339 14.2189 6.60642C13.6304 6.03945 12.8322 5.72093 12 5.72093Z" fill="currentColor" />
                    </svg>
                    Trouver un acousticien
                </button>
            </div>

        </div>
    </div>
</header>