<div class="hidden lg:flex">
<div class="flex h-full" x-data="{ showOpticMenu: false }">
<div class="h-full flex items-center" @mouseenter="showOpticMenu = true" @mouseleave="showOpticMenu = false">
<span class="hover:bg-neutral-100 h-full flex items-center px-4 font-medium">Optique</span>
<div x-cloak class="menu-container bg-neutral-100 w-full absolute top-full left-0" :class="showOpticMenu ? 'flex' : 'hidden'">
<div class="flex container">
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Meilleures ventes</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Meilleures ventes
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Meilleures ventes</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Magic</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Magic
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Magic</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Lunettes de soleil</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Lunettes de soleil
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Lunettes de soleil</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Lunettes de vue</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Lunettes de vue
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Lunettes de vue</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Lentilles</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Lentilles
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Lentilles</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Offres</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Offres
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Offres</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Services</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Services
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Services</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex h-full" x-data="{ showAudioMenu: false }">
<div class="h-full flex items-center" @mouseenter="showAudioMenu = true" @mouseleave="showAudioMenu = false">
<span class="hover:bg-neutral-100 h-full flex items-center px-4 font-medium text-audio-700">Audition</span>
<div x-cloak class="menu-container bg-neutral-100 w-full absolute top-full left-0" :class="showAudioMenu ? 'flex' : 'hidden'">
<div class="flex container">
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Meilleures ventes</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Meilleures ventes
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Meilleures ventes</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Appareils auditifs</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Appareils auditifs
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Appareils auditifs</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Notre catalogue</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Notre catalogue
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Notre catalogue</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>L'audition</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
L'audition
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>L'audition</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Offres</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Offres
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Offres</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>J'ai ouï dire</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
J'ai ouï dire
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>J'ai ouï dire</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="flex lg:hidden" x-data="{ showMobileMenu: false }">
<span @click="showMobileMenu = true"><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.25 6C3.25 5.58579 3.58579 5.25 4 5.25H20C20.4142 5.25 20.75 5.58579 20.75 6C20.75 6.41421 20.4142 6.75 20 6.75H4C3.58579 6.75 3.25 6.41421 3.25 6ZM3.25 12C3.25 11.5858 3.58579 11.25 4 11.25H20C20.4142 11.25 20.75 11.5858 20.75 12C20.75 12.4142 20.4142 12.75 20 12.75H4C3.58579 12.75 3.25 12.4142 3.25 12ZM3.25 18C3.25 17.5858 3.58579 17.25 4 17.25H20C20.4142 17.25 20.75 17.5858 20.75 18C20.75 18.4142 20.4142 18.75 20 18.75H4C3.58579 18.75 3.25 18.4142 3.25 18Z" fill="currentColor" />
</svg>
</span>
<div x-cloak x-show="showMobileMenu" @click.outside="showMobileMenu = false" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="absolute h-screen w-screen left-0 top-0 flex flex-col bg-white z-10">
<div class="h-full overflow-y-scroll ">
<div class="flex justify-between items-center px-6 py-4">
<span class="w-1/2">
<svg xmlns="http://www.w3.org/2000/svg" width="266" height="73" viewBox="0 0 266 73" fill="none" class="w-full">
<path fill-rule="evenodd" clip-rule="evenodd" d="M218.782 15.8C218.782 5.1 223.284 0 230.687 0C238.089 0 242.591 5.2 242.591 15.8C242.591 26.4 238.089 31.6 230.687 31.6C223.284 31.6 218.782 26.4 218.782 15.8ZM225.585 15.8C225.585 22.7 227.085 27 230.687 27C234.288 27 235.789 22.7 235.789 15.8C235.789 8.9 234.288 4.6 230.687 4.6C227.085 4.6 225.585 8.9 225.585 15.8Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M15.7059 0.5L0 31H6.90259L10.2038 24.2H19.1072V31H25.5096V0.5H15.7059ZM18.707 6.4H19.0071V19.6H12.4047L18.707 6.4Z" fill="black" />
<path d="M29.2109 31.1V0.5H35.6133V26H45.1169V31.1H29.2109Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M46.3174 31L54.8206 0.5H63.1237L71.4268 31H64.7243L63.0237 24.2H54.3204L52.6198 31H46.3174ZM58.522 6.4L55.6209 19.6H61.7232L58.622 6.4H58.522Z" fill="black" />
<path d="M79.2298 0.5H72.8274V31H79.2298V0.5Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M82.8311 0.5V31.1H88.8333V8.7H88.9333L97.2365 31.1L106.903 31.1L110.204 24.4H119.107V31.2H125.51V0.600006H115.706L105.64 20.1482V0.5H99.6374V21.7L91.4343 0.5H82.8311ZM119.107 19.6H112.505L118.807 6.40001H119.107V19.6Z" fill="black" />
<path d="M128.448 0.600006V31.1H134.851V17.8H143.254V13.1H134.851V5.20001H144.254V0.600006H128.448Z" fill="black" />
<path d="M146.855 31.1V0.600006H162.761V5.20001H153.258V13.1H161.661V17.8H153.258V31.1H146.855Z" fill="black" />
<path d="M165.062 0.600006V31.1H180.968V26H171.464V0.600006H165.062Z" fill="black" />
<path d="M183.469 31.1V0.600006H200.175V5.30001H189.871V12.8H198.675V17.5H189.871V26.4H200.475V31.1H183.469Z" fill="black" />
<path d="M203.076 0.600006V31.1H218.982V26H209.379V0.600006H203.076Z" fill="black" />
<path d="M266 22.2C266 26.7 263.399 31.5 255.696 31.5C248.694 31.5 245.292 27.9 245.292 22.2V0.600006H251.695V21.8C251.695 25.5 253.295 27 255.596 27C258.397 27 259.598 25.1 259.598 21.8V0.600006H266V22.2Z" fill="black" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M202.346 58.4649C202.809 58.0756 203.137 57.8001 203.431 57.8001C203.631 57.8001 203.731 57.9001 203.731 58.2001C203.831 58.3001 203.831 58.5001 203.831 58.6001C203.831 59.5001 202.231 61.0001 201.231 61.3001C201.05 61.3362 200.883 61.3852 200.719 61.4332C200.429 61.5183 200.15 61.6001 199.831 61.6001C199.031 61.6001 198.231 61.1001 197.231 59.5001C197.231 59.4001 197.131 59.4001 197.131 59.4001L197.031 59.5001C196.531 60.4001 194.931 61.8001 193.331 61.8001C192.031 61.8001 190.731 60.7001 190.331 57.3001V56.5001C188.931 57.7001 188.031 58.2001 188.031 58.2001C188.031 58.4291 188.052 58.7001 188.074 58.9938C188.101 59.3414 188.131 59.7207 188.131 60.1001C188.131 61.1001 187.931 62.0001 187.131 62.0001C187.081 62.0001 187.006 61.9751 186.931 61.9501C186.856 61.9251 186.781 61.9001 186.731 61.9001C185.431 61.5001 184.531 60.3001 184.531 59.5001C184.531 59.2001 184.631 59.0001 184.831 58.8001C185.531 58.1001 186.131 57.8001 186.331 57.7001C185.631 56.0001 184.331 53.3001 183.531 53.3001C183.164 53.2543 183.028 53.9855 182.826 55.08C182.586 56.3737 182.252 58.1749 181.331 59.8001C180.731 60.8001 180.031 61.3001 179.231 61.3001C178.131 61.3001 176.931 60.2001 176.131 58.3001C176.131 58.3001 176.031 58.3001 176.031 58.4001C176.007 58.4237 175.916 58.576 175.784 58.7986C175.355 59.5176 174.489 60.971 174.031 61.2001C173.831 61.3001 173.531 61.4001 173.231 61.4001C172.031 61.4001 170.031 60.4001 169.731 58.5001C169.731 58.5001 169.631 57.6001 169.531 55.3001C169.518 55.1387 169.51 54.9896 169.503 54.852C169.453 53.8821 169.432 53.4877 168.031 53.4001V53.5001C168.331 54.2001 168.631 55.1001 168.631 56.2001C168.631 57.4001 168.331 58.7001 167.331 60.0001C166.431 61.2001 165.231 61.9001 163.931 61.9001C162.531 61.9001 161.131 61.1001 159.831 59.5001C159.754 59.4619 159.693 59.4237 159.64 59.3911C159.554 59.3383 159.492 59.3001 159.431 59.3001C159.331 59.3001 159.231 59.4001 159.131 59.5001C159.031 59.7001 157.531 61.6001 155.531 61.6001C154.931 61.6001 154.331 61.4001 153.731 61.0001C151.731 59.8001 151.331 57.7001 151.331 56.0001C151.331 55.3001 151.431 54.6001 151.531 54.1001C151.531 54.1001 151.631 54.0001 151.631 53.9001L147.131 55.4001C147.131 55.4001 147.031 55.9001 147.031 56.7001C147.031 58.3001 147.331 61.1001 148.831 63.7001C148.931 63.8001 148.931 64.0001 148.931 64.1001C148.931 64.5001 148.631 64.9001 148.231 64.9001C148.131 64.9001 148.031 64.9001 147.931 64.8001C147.031 64.3001 146.431 62.8001 146.431 62.8001C145.231 59.9001 145.131 56.8001 145.131 55.9001V55.7001L139.031 57.5001C139.031 57.5001 137.831 63.4001 136.631 63.5001C136.031 63.5001 135.331 63.1001 135.331 61.3001V61.0001C135.347 60.8837 135.358 60.77 135.37 60.6518C135.428 60.059 135.497 59.3508 136.331 57.6001C136.599 56.973 136.922 56.2925 137.265 55.5664C138.073 53.8609 138.999 51.9043 139.631 49.8001C139.684 49.64 139.746 49.4425 139.82 49.2101C140.296 47.7 141.238 44.7131 143.231 40.9001C143.291 40.8001 143.347 40.6881 143.404 40.5729C143.635 40.1121 143.891 39.6001 144.531 39.6001C144.831 39.6001 145.331 39.8001 145.931 40.3001C145.931 40.3001 146.531 40.7001 146.731 41.6001C146.767 41.6838 146.805 41.7661 146.846 41.852C147.143 42.4837 147.531 43.3068 147.531 46.3001C147.531 48.0001 147.431 50.2001 147.131 53.5001C147.288 53.4476 147.693 53.2988 148.238 53.0988C149.769 52.5363 152.403 51.5689 153.731 51.2001C153.831 51.1001 153.831 51.1001 153.931 51.1001C153.988 51.0426 154.013 51.0182 154.042 51.0078C154.064 51.0001 154.088 51.0001 154.131 51.0001H154.331C154.531 50.9001 154.631 50.9001 154.831 50.9001C156.331 50.9001 157.631 52.3001 157.731 52.7001C157.631 53.1001 157.331 53.6001 157.331 53.6001V53.7001C157.331 53.7001 156.431 52.6001 155.731 52.6001C155.031 52.7001 153.031 53.7001 153.031 56.7001C153.031 59.6001 154.831 59.9001 155.231 59.9001C155.631 59.9001 158.131 59.4001 159.931 54.2001C160.031 54.0001 160.231 53.9001 160.431 53.9001C160.631 53.9001 160.831 54.0001 161.031 54.1001C161.093 54.1418 161.156 54.1792 161.216 54.215C161.443 54.3506 161.631 54.4627 161.631 54.7001C161.631 54.9001 161.531 55.1001 161.431 55.3001C161.423 55.3243 161.413 55.3518 161.403 55.3824C161.284 55.73 161.031 56.4728 161.031 57.3001C161.031 58.3001 161.431 59.5001 162.831 60.1001C163.031 60.2001 163.231 60.2001 163.431 60.2001C165.131 60.2001 166.031 58.0001 166.431 56.9001C166.531 56.6001 166.631 56.0001 166.631 55.5001C166.631 54.1001 166.131 52.6001 164.631 52.6001C164.031 52.6001 163.231 52.8001 162.231 53.4001C161.731 52.8001 161.431 52.3001 161.431 52.3001C161.431 52.1001 162.231 51.0001 163.831 51.0001C164.631 51.0001 165.631 51.3001 166.731 52.0001C167.131 51.9001 167.531 51.9001 168.031 51.9001C169.431 51.9001 171.131 52.3001 171.131 54.5001V56.6001C171.131 58.5001 171.231 59.9001 172.531 60.2001H172.631C173.231 60.2001 174.531 59.1001 175.831 53.8001C175.831 53.7635 175.817 53.6867 175.8 53.5893C175.771 53.4207 175.731 53.1903 175.731 53.0001C175.731 52.6001 175.831 52.3001 176.231 52.2001H176.531C177.131 52.2001 177.431 52.6001 177.431 54.1001V54.5001C177.431 56.4001 177.631 59.7001 179.231 59.7001C180.098 59.7001 181.058 55.5219 181.395 54.0545C181.408 53.999 181.42 53.9474 181.431 53.9001C181.46 53.8037 181.489 53.6998 181.521 53.5908C181.814 52.5696 182.237 51.1001 183.231 51.1001C183.531 51.1001 183.931 51.2001 184.331 51.6001C186.131 53.2001 187.231 55.2001 187.631 56.5001C188.531 55.9001 190.231 54.6001 191.131 52.9001C191.231 52.3001 191.431 51.6001 191.731 50.9001L193.331 46.1001C193.431 45.8001 193.731 45.3001 194.131 45.3001C194.181 45.3001 194.206 45.3251 194.231 45.3501C194.256 45.3751 194.281 45.4001 194.331 45.4001C194.401 45.4472 194.483 45.4888 194.567 45.5314C194.839 45.6694 195.131 45.8179 195.131 46.2001C195.131 46.2501 195.106 46.3001 195.081 46.3501C195.056 46.4001 195.031 46.4501 195.031 46.5001C194.831 47.2001 194.231 49.0001 194.031 49.4001C194.65 49.3313 195.222 49.2624 195.727 49.2018C196.688 49.0861 197.403 49.0001 197.731 49.0001C198.231 49.0001 198.831 49.1001 198.831 49.4001C198.831 49.4415 198.848 49.5173 198.868 49.606C198.896 49.7315 198.931 49.8829 198.931 50.0001C198.931 50.2001 198.831 50.5001 198.431 50.5001L193.531 50.8001C193.331 51.0001 192.031 54.8001 191.931 56.6001V57.5001C191.931 58.7001 192.131 60.0001 193.031 60.0001C193.431 60.0001 194.231 59.6001 195.231 58.6001C195.271 58.5469 195.312 58.4923 195.354 58.4365C195.947 57.6524 196.737 56.607 196.831 55.3001C196.842 55.1651 196.852 55.0251 196.862 54.8828C196.942 53.7604 197.032 52.5001 197.831 52.5001C197.881 52.5001 197.931 52.5251 197.981 52.5501C198.031 52.5751 198.081 52.6001 198.131 52.6001C199.031 52.9001 199.331 53.7001 199.331 54.3001C199.331 54.5001 199.331 54.7001 199.231 54.9001C199.031 55.4001 198.431 57.1001 198.431 58.1001C198.431 58.2173 198.465 58.3344 198.493 58.4315C198.514 58.5001 198.531 58.5587 198.531 58.6001C198.731 59.2001 199.231 59.8001 199.931 59.8001C200.231 59.8001 200.631 59.7001 201.131 59.4001C201.627 59.0695 202.02 58.739 202.346 58.4649ZM139.631 55.5001L145.431 53.9001C145.831 51.6001 145.831 48.9001 145.831 46.8001C145.831 45.4319 145.766 44.3876 145.741 43.9799C145.734 43.881 145.731 43.8196 145.731 43.8001V43.7001C145.731 43.7001 145.631 43.7001 145.631 43.8001C142.331 49.0001 140.431 53.0001 139.631 55.5001Z" fill="#C70C0F" />
<path d="M50.2306 51.4001C50.4306 51.4001 50.6306 51.4001 50.8306 51.5001C52.1306 51.9001 53.1306 53.7001 53.0306 55.7001C53.0306 56.6001 52.8306 57.6001 52.4306 58.6001C51.5306 60.7001 50.6306 61.9001 49.5306 61.9001C48.9306 61.9001 48.2306 61.5001 47.5306 60.6001C47.4731 60.5426 47.4486 60.5182 47.4382 60.4888C47.4306 60.467 47.4306 60.4426 47.4306 60.4001C47.4306 60.2001 47.6306 60.0001 47.8306 60.0001C47.9306 60.0001 48.0306 60.0001 48.1306 60.1001C48.1306 60.2001 48.3306 60.3001 48.6306 60.3001C49.1306 60.3001 50.0306 59.9001 50.6306 57.9001C51.0306 56.5001 51.2306 55.3001 51.2306 54.4001C51.2306 53.4001 51.0306 52.9001 50.8306 52.8001H50.6306C49.8306 52.8001 48.3306 54.3001 47.2306 56.3001C46.0306 58.4001 45.7306 59.3001 45.5306 61.0001C45.4306 62.7001 44.8306 65.9001 44.0306 68.6001C43.9419 68.9168 43.8613 69.211 43.7866 69.4833C43.2719 71.3611 43.0419 72.2001 42.4306 72.2001H42.2306C41.7306 72.0001 41.3306 70.8001 41.3306 69.7001V69.1001C41.4227 68.5934 41.9181 66.8557 42.4745 64.9039C43.1258 62.619 43.8609 60.0405 44.1306 58.8001C44.4306 57.3001 44.7306 55.7001 44.7306 54.6001C44.7306 54.0001 44.6306 53.6001 44.5306 53.6001H44.4306C44.0306 53.6001 43.0306 55.3001 42.3306 56.8001L42.3136 56.8369C41.6952 58.1774 39.7936 62.3001 35.8306 62.3001C35.1306 62.3001 34.2306 62.2001 33.3306 61.8001C30.1306 60.5001 28.8306 57.7001 28.8306 54.6001C28.8306 52.0001 29.8306 49.1001 31.3306 47.0001C31.9306 46.1001 32.7306 45.8001 33.3306 45.8001C33.6306 45.8001 33.8306 45.9001 34.0306 46.0001C34.1306 46.1001 34.2306 46.2001 34.2306 46.3001C34.2306 46.6091 33.9632 46.9181 33.5937 47.3452C33.3653 47.6091 33.0979 47.9182 32.8306 48.3001C32.2306 49.1001 30.6306 51.9001 30.6306 54.9001C30.6306 56.4001 31.0306 58.1001 32.2306 59.6001C32.9306 60.5001 33.8306 60.9001 34.7306 60.9001C36.7306 61.0001 39.0306 59.1001 40.3306 56.2001C41.0306 54.6001 41.6306 51.7001 41.6306 49.0001C41.6306 45.8001 40.9306 42.8001 38.7306 41.7001C38.4306 41.6001 38.0306 41.5001 37.7306 41.5001C36.0306 41.5001 34.1306 43.3001 34.1306 43.5001C34.1025 43.5282 34.0823 43.5799 34.0589 43.6398C33.999 43.7932 33.9183 44.0001 33.6306 44.0001C33.4306 44.0001 33.1306 44.0001 32.8306 43.7001C32.8063 43.688 32.7806 43.6758 32.7541 43.6634C32.5622 43.5729 32.3306 43.4637 32.3306 43.2001C32.3306 43.0537 32.3842 42.9609 32.4521 42.8432C32.477 42.8001 32.5038 42.7537 32.5306 42.7001C33.1306 41.4001 35.1306 40.2001 37.2306 40.2001C40.2306 40.2001 43.5306 42.8001 43.5306 51.2001V52.8001L43.6306 52.7001C43.6816 52.649 43.7653 52.5197 43.8717 52.3553C44.1816 51.8763 44.6838 51.1001 45.1306 51.1001H45.2306C45.7306 51.2001 46.2306 52.2001 46.2306 53.4001V53.9001C46.2306 54.1668 46.275 54.3445 46.3046 54.4631C46.3195 54.5223 46.3306 54.5668 46.3306 54.6001C47.3306 53.2001 48.7306 51.4001 50.2306 51.4001Z" fill="#C70C0F" />
<path d="M61.8304 48.2001H61.3304C60.4304 48.1001 59.8304 47.7001 59.8304 47.2001V47.0001C59.9304 46.6001 60.2304 46.5001 60.5304 46.5001C60.7304 46.5001 61.1304 46.6001 61.4304 46.7001C62.1304 46.8001 62.7304 47.2001 62.7304 47.6001C62.6304 48.0001 62.4304 48.2001 61.8304 48.2001Z" fill="#C70C0F" />
<path d="M77.8305 49.7786C77.7377 49.7537 77.6377 49.7269 77.5305 49.7001C76.6305 49.4001 76.0305 48.9001 75.9305 48.2001C75.9305 48.1001 75.9305 48.0001 76.0305 47.9001C76.1305 47.6001 76.3305 47.5001 76.6305 47.5001C76.9234 47.5001 77.1626 47.6073 77.4659 47.7432C77.577 47.7929 77.6966 47.8465 77.8305 47.9001C78.6305 48.3001 79.1305 48.7001 79.1305 49.2001V49.4001C79.0305 49.7001 78.8305 49.9001 78.4305 49.9001C78.2841 49.9001 78.0841 49.8465 77.8305 49.7786Z" fill="#C70C0F" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M100.531 61.6001C97.6306 59.7001 97.2306 58.4001 97.0306 57.5001C96.9496 57.2569 96.905 56.8967 96.8555 56.4968C96.7219 55.4168 96.5523 54.046 95.5306 53.9001H95.4306C94.1306 53.9001 92.9306 56.8001 92.8306 57.1001C92.8306 57.2001 92.7306 57.2001 92.7306 57.2001C92.7306 57.2001 92.6306 57.1001 92.6306 57.0001C92.6306 56.8001 92.2306 55.4001 91.8306 54.7001C91.5306 54.3001 91.3306 54.1001 91.0306 54.1001C90.3156 54.1001 89.6427 55.4101 88.8474 56.9588C88.4192 57.7924 87.9555 58.6953 87.4306 59.5001C86.6306 60.7001 85.9306 61.0001 85.4306 61.0001C84.7041 61.0001 84.1425 60.4228 83.8208 60.092C83.7961 60.0666 83.7727 60.0426 83.7509 60.0204L83.7306 60.0001C84.6306 59.2001 85.9306 56.4001 85.9306 54.4001C85.9306 53.4001 85.6306 52.6001 84.7306 52.4001H84.4306C82.7306 52.4001 81.8306 56.1001 81.8306 58.1001C81.8306 58.4001 81.8306 58.6001 81.9306 58.8001C81.9306 58.8001 80.8306 59.9001 79.5306 59.9001C79.3306 59.9001 79.1306 59.9001 78.9306 59.8001C77.7306 59.4001 77.4306 57.4001 77.4306 56.4001V55.9001C77.4461 55.8692 77.4639 55.8359 77.4831 55.8002C77.5877 55.605 77.7306 55.3382 77.7306 55.0001C77.7306 54.7001 77.5306 54.3001 77.0306 53.9001C76.6306 53.6001 76.3306 53.5001 76.1306 53.5001C75.7306 53.5001 75.6306 54.0001 75.6306 54.2001V54.3001C75.6306 54.5001 75.4307 55.6996 75.3307 56.2997C73.7307 59.6997 72.2306 60.4001 71.3306 60.4001C71.0306 60.4001 70.7306 60.3001 70.5306 60.2001C70.1306 60.0001 69.0306 59.1001 69.0306 57.3001C69.0306 56.8001 69.1306 56.3001 69.3306 55.6001C69.8306 53.8001 70.6306 53.2001 71.4306 53.2001C72.1306 53.2001 72.7306 53.7001 73.1306 54.2001C73.2306 54.3001 73.3306 54.3001 73.3306 54.3001C73.6306 54.3001 73.8306 54.0001 73.8306 53.6001C73.8306 53.4001 73.7306 53.2001 73.6306 53.1001C72.7306 52.0001 71.8306 51.6001 71.0306 51.6001C69.6306 51.6001 68.5306 52.9001 68.1306 54.1001C68.1073 54.17 68.0813 54.2454 68.0535 54.3258C67.8428 54.9359 67.5306 55.8399 67.5306 56.9001C67.5306 58.1001 67.9306 59.5001 69.2306 60.9001C70.1306 61.9001 71.0306 62.2001 71.7306 62.2001C73.3306 62.2001 74.8306 60.5001 76.2306 58.8001C77.4306 60.9001 78.6306 61.5001 79.8306 61.5001C80.8298 61.5001 81.7465 61.0876 82.5806 60.7121C82.6648 60.6743 82.7481 60.6368 82.8306 60.6001C84.1306 62.0001 85.1306 62.5001 86.0306 62.5001C87.2994 62.5001 88.0919 61.5476 88.5941 60.944L88.6306 60.9001C89.6956 59.4802 90.6818 57.3515 90.9602 56.7505C90.9954 56.6745 91.0194 56.6226 91.0306 56.6001C91.1306 56.5001 91.1306 56.4001 91.1306 56.4001L91.3306 56.6001C91.4977 56.9343 91.8044 58.6644 92.0174 59.8662L92.0186 59.8725C92.0601 60.1067 92.098 60.3207 92.1306 60.5001C92.2306 61.7001 92.5306 62.0001 93.2306 62.0001C93.6306 62.0001 93.6306 61.6001 93.6306 61.1001C93.6306 60.8615 93.6079 60.6229 93.5841 60.3734C93.558 60.1001 93.5306 59.8138 93.5306 59.5001V59.3001C93.5306 58.1001 94.6306 56.7001 94.7306 56.6001H94.8306C94.8306 56.6001 94.9306 56.6001 94.9306 56.7001C96.4306 60.9001 99.1306 62.1001 99.9306 62.3001C99.9806 62.3001 100.031 62.3251 100.081 62.3501C100.131 62.3751 100.181 62.4001 100.231 62.4001C100.531 62.4001 100.631 62.2001 100.631 62.0001C100.731 61.9001 100.631 61.7001 100.531 61.6001ZM84.5306 54.6001C84.5306 55.0001 84.3306 55.8001 84.0306 56.4001C83.7306 57.1001 83.3306 57.6001 83.2306 57.6001C83.2306 57.6001 83.1306 57.5001 83.1306 57.3001C83.1306 56.9001 83.3306 56.1001 83.6306 55.5001C83.9306 54.9001 84.2306 54.3001 84.4306 54.3001C84.4306 54.3501 84.4556 54.4001 84.4806 54.4501C84.5056 54.5001 84.5306 54.5501 84.5306 54.6001Z" fill="#C70C0F" />
<path d="M66.9304 58.1001C66.637 58.1001 66.3092 58.3756 65.8459 58.7648C65.5197 59.039 65.1263 59.3695 64.6304 59.7001C64.1304 60.0001 63.7304 60.1001 63.4304 60.1001C62.6304 60.1001 62.2304 59.5001 62.0304 58.9001C62.0304 58.8587 62.0133 58.8001 61.9932 58.7315C61.9648 58.6344 61.9304 58.5172 61.9304 58.4001C61.9304 57.4001 62.5304 55.7001 62.7304 55.2001C62.8304 55.0001 62.8304 54.8001 62.8304 54.6001C62.8304 54.0001 62.5304 53.2001 61.6304 52.9001C61.5804 52.9001 61.5304 52.8751 61.4804 52.8501C61.4304 52.8251 61.3804 52.8001 61.3304 52.8001C60.5317 52.8001 60.4418 54.0604 60.3618 55.1828C60.3517 55.3248 60.3417 55.4653 60.3304 55.6001C60.2371 56.907 59.4466 57.9524 58.8538 58.7365C58.8117 58.7923 58.7703 58.8469 58.7304 58.9001C57.7304 59.9001 56.9304 60.3001 56.5304 60.3001C55.6304 60.3001 55.4304 59.0001 55.4304 57.8001V56.9001C55.5304 55.1001 56.8304 51.3001 57.0304 51.0001L61.9304 50.7001C62.3304 50.7001 62.4304 50.4001 62.4304 50.2001C62.4304 50.0829 62.3961 49.9315 62.3677 49.806C62.3476 49.7173 62.3304 49.6415 62.3304 49.6001C62.3304 49.3001 61.7304 49.2001 61.1304 49.2001C60.8025 49.2001 60.0875 49.2861 59.1263 49.4018C58.622 49.4624 58.0499 49.5313 57.4304 49.6001C57.6304 49.2001 58.2304 47.4001 58.4304 46.7001C58.4304 46.6501 58.4554 46.6001 58.4804 46.5501C58.5054 46.5001 58.5304 46.4501 58.5304 46.4001C58.5304 46.0179 58.2383 45.8694 57.9667 45.7314C57.8829 45.6888 57.8011 45.6472 57.7304 45.6001C57.6804 45.6001 57.6554 45.5751 57.6304 45.5501C57.6054 45.5251 57.5804 45.5001 57.5304 45.5001C57.1304 45.5001 56.8304 46.0001 56.7304 46.3001L55.1304 51.1001C54.3304 53.5001 53.8304 55.0001 53.8304 57.3001C54.2304 60.7001 55.5304 61.8001 56.8304 61.8001C58.4304 61.8001 60.0304 60.4001 60.5304 59.5001L60.6304 59.4001C60.6304 59.4001 60.7304 59.4001 60.7304 59.5001C61.7304 61.1001 62.5304 61.6001 63.3304 61.6001C63.6502 61.6001 63.929 61.5183 64.2192 61.4332C64.3828 61.3852 64.5502 61.3361 64.7304 61.3001C65.7304 61.0001 67.3304 59.5001 67.3304 58.6001C67.3304 58.5001 67.3304 58.3001 67.2304 58.2001C67.2304 58.2001 67.1304 58.1001 66.9304 58.1001Z" fill="#C70C0F" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M121.531 53.2001C122.731 53.0001 123.731 52.9001 124.031 52.9001C124.431 52.9001 124.831 53.0001 124.731 53.4001V53.8001C124.731 54.0001 124.731 54.2001 124.431 54.2001L121.131 54.4001C121.031 54.6001 120.131 57.2001 120.031 58.4001V59.0001C120.031 59.8001 120.131 60.7001 120.731 60.7001C120.931 60.7001 121.231 60.6001 121.531 60.4001C121.963 60.1599 122.257 59.8967 122.49 59.6879C122.742 59.4621 122.923 59.3001 123.131 59.3001C123.231 59.3001 123.331 59.4001 123.431 59.5001C123.531 59.6001 123.531 59.7001 123.531 59.8001C123.531 60.4001 122.431 61.4001 121.731 61.6001C121.531 61.7001 121.231 61.7001 121.031 61.7001C120.231 61.7001 119.531 61.1001 119.131 59.5001C119.099 59.5508 119.066 59.6048 119.031 59.6614C118.515 60.4967 117.648 61.9001 116.431 61.9001C115.731 61.9001 115.131 61.5001 114.331 60.6001C113.331 61.1001 112.231 61.4001 112.231 61.4001C112.231 61.4001 111.731 61.3001 111.731 60.7001C111.731 60.6001 111.731 60.4001 111.831 60.3001C111.831 60.3001 112.931 60.0001 113.731 59.3001V58.8001C113.731 57.4001 114.331 54.9001 115.531 54.9001H115.731C116.331 55.1001 116.531 55.6001 116.531 56.3001C116.531 57.7001 115.631 59.6001 115.031 60.1001C115.111 60.1536 115.198 60.2287 115.293 60.3099C115.552 60.532 115.864 60.8001 116.231 60.8001C116.531 60.8001 116.731 60.7001 117.031 60.5001C117.831 59.7001 118.831 58.4001 119.231 57.5001C119.321 56.5934 119.576 55.7689 119.921 54.654L119.922 54.6504L120.031 54.3001C120.631 52.6001 121.131 51.0001 121.131 51.0001C121.131 50.7001 121.431 50.4001 121.631 50.4001H121.731C121.789 50.4584 121.856 50.5083 121.921 50.5571C122.08 50.6755 122.231 50.7876 122.231 51.0001V51.2001C122.031 51.7001 121.631 52.9001 121.531 53.2001ZM115.453 57.1778C115.542 56.889 115.631 56.6001 115.631 56.4001C115.631 56.3501 115.606 56.3251 115.581 56.3001C115.556 56.2751 115.531 56.2501 115.531 56.2001C115.431 56.2001 115.231 56.6001 115.031 57.0001C114.997 57.1334 114.953 57.2778 114.908 57.4223C114.819 57.7111 114.731 58.0001 114.731 58.2001C114.731 58.3001 114.831 58.4001 114.831 58.4001C114.931 58.4001 115.131 58.0001 115.331 57.6001C115.364 57.4667 115.408 57.3223 115.453 57.1778Z" fill="#C70C0F" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M236.931 61.3001C234.18 59.4978 233.768 58.2354 233.477 57.3422C233.462 57.2937 233.446 57.2464 233.431 57.2001C233.35 56.957 233.305 56.5972 233.256 56.1974C233.122 55.1174 232.952 53.7461 231.931 53.6001H231.831C230.531 53.6001 229.331 56.5001 229.231 56.8001C229.231 56.9001 229.131 56.9001 229.131 56.9001C229.131 56.9001 229.031 56.8001 229.031 56.7001C229.031 56.5001 228.631 55.1001 228.231 54.4001C227.931 54.0001 227.731 53.8001 227.431 53.8001C226.716 53.8001 226.043 55.1101 225.247 56.6588L225.247 56.66C224.819 57.4933 224.355 58.3957 223.831 59.2001C223.031 60.4001 222.331 60.7001 221.831 60.7001C221.104 60.7001 220.543 60.1228 220.221 59.792C220.188 59.7586 220.158 59.7277 220.131 59.7001C221.031 59.0001 222.331 56.1001 222.331 54.1001C222.331 53.1001 222.031 52.3001 221.131 52.1001H220.831C219.131 52.1001 218.231 55.8001 218.231 57.8001C218.231 58.1001 218.231 58.3001 218.331 58.5001C218.331 58.5001 217.231 59.6001 215.931 59.6001C215.731 59.6001 215.531 59.6001 215.331 59.5001C214.131 59.1001 213.831 57.1001 213.831 56.1001V55.6001C213.931 55.4001 214.031 55.1001 214.031 54.7001C214.031 54.3001 213.831 53.9001 213.331 53.6001C212.931 53.3001 212.631 53.2001 212.431 53.2001C211.931 53.2001 211.931 53.7001 211.931 53.9001V54.0001C211.931 54.2001 211.731 55.4001 211.631 55.9001C210.031 59.3001 208.531 60.0001 207.631 60.0001C207.331 60.0001 207.031 59.9001 206.831 59.8001C206.431 59.6001 205.331 58.7001 205.331 56.9001C205.331 56.4001 205.431 55.9001 205.631 55.2001C206.131 53.4001 206.931 52.8001 207.731 52.8001C208.431 52.8001 209.031 53.2001 209.431 53.8001C209.531 53.9001 209.631 53.9001 209.631 53.9001C209.931 53.9001 210.131 53.6001 210.131 53.2001C210.131 53.0001 210.031 52.8001 209.931 52.7001C209.031 51.6001 208.131 51.2001 207.331 51.2001C205.931 51.2001 204.831 52.5001 204.431 53.7001C204.407 53.77 204.381 53.8453 204.354 53.9257C204.143 54.5358 203.831 55.4399 203.831 56.5001C203.831 57.7001 204.231 59.1001 205.531 60.5001C206.431 61.5001 207.231 61.8001 208.031 61.8001C209.641 61.8001 210.982 60.2748 212.394 58.669C212.473 58.5796 212.552 58.4898 212.631 58.4001C213.831 60.5001 215.031 61.1001 216.231 61.2001C217.23 61.2001 218.147 60.7876 218.981 60.4121C219.065 60.3743 219.148 60.3368 219.231 60.3001C220.431 61.8001 221.531 62.3001 222.431 62.3001C223.699 62.3001 224.492 61.3476 224.994 60.744L225.031 60.7001C226.096 59.2799 227.082 57.1508 227.36 56.5502C227.396 56.4741 227.419 56.4226 227.431 56.4001C227.431 56.3001 227.531 56.2001 227.531 56.2001C227.531 56.2001 227.631 56.2001 227.731 56.4001C227.898 56.7343 228.204 58.4645 228.417 59.6663L228.486 60.0523C228.502 60.1405 228.517 60.2234 228.531 60.3001C228.631 61.5001 228.931 61.8001 229.631 61.8001C230.031 61.8001 230.031 61.4001 230.031 60.9001C230.031 60.6615 230.008 60.4229 229.984 60.1734C229.958 59.9003 229.931 59.6136 229.931 59.3001V59.1001C229.931 57.9001 231.031 56.5001 231.131 56.4001C231.188 56.3427 231.213 56.3182 231.242 56.3078C231.264 56.3001 231.288 56.3001 231.331 56.3001C231.331 56.3001 231.431 56.3001 231.431 56.4001C232.931 60.6001 235.631 61.8001 236.431 62.0001C236.481 62.0001 236.531 62.0251 236.581 62.0501C236.631 62.0751 236.681 62.1001 236.731 62.1001C237.031 62.1001 237.131 61.9001 237.131 61.7001C237.231 61.5001 237.131 61.4001 236.931 61.3001ZM220.931 54.3001C220.931 54.7001 220.731 55.5001 220.431 56.1001C220.131 56.7001 219.831 57.3001 219.631 57.3001C219.631 57.3001 219.531 57.2001 219.531 57.0001C219.531 56.6001 219.731 55.8001 220.031 55.2001C220.331 54.6001 220.631 54.0001 220.831 54.0001C220.931 54.0001 220.931 54.1001 220.931 54.3001Z" fill="#C70C0F" />
<path d="M214.33 49.4785C214.238 49.4536 214.138 49.4269 214.031 49.4001C213.131 49.1001 212.531 48.6001 212.331 47.9001C212.331 47.8501 212.356 47.8001 212.381 47.7501C212.406 47.7001 212.431 47.6501 212.431 47.6001C212.531 47.3001 212.731 47.2001 213.031 47.2001C213.324 47.2001 213.563 47.3073 213.866 47.4432C213.977 47.4928 214.097 47.5466 214.231 47.6001C215.031 48.0001 215.531 48.4001 215.531 48.9001V49.1001C215.531 49.4001 215.331 49.6001 214.931 49.6001C214.784 49.6001 214.584 49.5464 214.33 49.4785Z" fill="#C70C0F" />
<path d="M200.73 47.9001H201.23C201.83 47.9001 202.03 47.7001 202.03 47.3001V47.2001C202.03 46.8001 201.43 46.4001 200.73 46.3001C200.43 46.2001 200.031 46.2001 199.831 46.2001C199.531 46.2001 199.23 46.3001 199.13 46.7001V46.9001C199.23 47.4001 199.83 47.8001 200.73 47.9001Z" fill="#C70C0F" />
</svg>
</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</div>
<div class="py-6 px-4 bg-neutral-150">
<button type="button" class="shadow-find-store btn bg-white text-neutral-800 btn-size-md w-full btn-icons">
<span class="bg-black text-white p-1 rounded-full">
<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>
</span>
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>
<div x-data="{ selected: 'optique' }" class="flex flex-col">
<div class="bg-neutral-100 flex items-center px-4 font-medium m-6 py-2 rounded-full justify-between text-center">
<button @click="selected = 'optique'" :class="selected === 'optique' ? 'bg-white' : ''" class="w-1/2 py-3 rounded-full transition-all duration-300">
Optique
</button>
<button @click="selected = 'audio'" :class="selected === 'audio' ? 'bg-white text-audio-700' : ''" class="w-1/2 py-3 rounded-full transition-all duration-300">
Audition
</button>
</div>
<div x-show="selected === 'optique'" x-cloak class="menu-container flex w-full pb-4 mb-4 border-b border-neutral-200">
<div class="flex flex-col w-full">
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Meilleures ventes</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Meilleures ventes
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Meilleures ventes</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Magic</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Magic
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Magic</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Lunettes de soleil</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Lunettes de soleil
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Lunettes de soleil</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Lunettes de vue</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Lunettes de vue
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Lunettes de vue</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Lentilles</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Lentilles
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Lentilles</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Offres</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Offres
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Offres</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-neutral-800">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold ">
<span>Services</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold ">
Services
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold ">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Services</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-dark-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
<div x-show="selected === 'audio'" x-cloak class="menu-container flex w-full pb-4 mb-4 border-b border-neutral-200">
<div class="flex flex-col w-full">
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Meilleures ventes</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Meilleures ventes
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Meilleures ventes</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés homme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Homme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Appareils auditifs</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Appareils auditifs
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Appareils auditifs</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Magic clips</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
sun
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Polarized
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Nightdrive
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tous les clips
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Forme de monture</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M44.9999 8.814C44.9999 8.6029 44.9506 8.43045 44.7252 8.33976C44.6461 8.30855 44.573 8.22232 44.5327 8.14353C44.4386 7.96216 44.358 7.77336 44.2909 7.58009C44.0849 6.97503 43.9042 6.36105 43.6818 5.76194C43.5251 5.34271 43.2221 5.04092 42.7981 4.86253C42.11 4.57263 41.3845 4.421 40.6561 4.28274C40.2471 4.20543 39.8336 4.15191 39.4186 4.12367C38.6304 4.07164 37.8423 4.02704 37.0541 4.01366C36.2092 3.99879 35.3643 4.01812 34.5194 4.03298C34.1224 4.04042 33.7253 4.06272 33.3297 4.09691C32.7177 4.14894 32.1072 4.20841 31.4982 4.27679C31.01 4.3318 30.5234 4.39572 30.0487 4.53249C29.789 4.60683 29.5248 4.66926 29.2606 4.73319C28.4575 4.92942 27.8037 5.36204 27.2708 5.98345C26.9692 6.33429 26.6811 6.69703 26.3736 7.04193C26.1139 7.3348 25.7945 7.53847 25.3854 7.55036C25.0735 7.55928 24.76 7.55185 24.448 7.55185C23.8524 7.55185 23.2568 7.55482 22.6612 7.55036C22.4343 7.54887 22.2149 7.47603 22.0328 7.34223C21.9313 7.26641 21.8402 7.1787 21.7581 7.08207C21.4297 6.70744 21.1118 6.32091 20.7774 5.95074C20.5863 5.73964 20.3908 5.51962 20.1594 5.35906C19.7504 5.07511 19.3041 4.85361 18.813 4.73319C18.3487 4.61872 17.889 4.476 17.4202 4.38978C16.8858 4.29166 16.3455 4.22327 15.8036 4.17421C15.0244 4.10286 14.2437 4.04339 13.4615 4.01366C12.757 3.9869 12.0494 4.00771 11.3433 4.00771V4.00028H11.2836C10.2119 4.01366 9.13859 3.95717 8.06979 4.11475C7.17714 4.24706 6.29046 4.39275 5.43961 4.70197C4.99179 4.8655 4.61861 5.12417 4.42157 5.57165C4.27379 5.90912 4.1469 6.2555 4.02749 6.60486C3.87523 7.05383 3.74387 7.50874 3.59609 7.95919C3.5528 8.09298 3.46771 8.21935 3.32441 8.25354C3.11991 8.30409 3.06318 8.44383 3.04676 8.62371C3.02885 8.82887 3.00049 9.03551 3.00049 9.24215C3.00049 10.0539 3.01094 10.8656 3.0184 11.6773C3.01989 11.8111 3.07363 11.9017 3.21246 11.9359C3.34083 11.9686 3.44532 12.0623 3.4901 12.1857C3.60355 12.4786 3.717 12.7744 3.79611 13.0777C3.93941 13.6292 4.04391 14.1912 4.19019 14.7427C4.32752 15.2541 4.49023 15.7596 4.65443 16.265C4.75892 16.5876 4.87983 16.9058 5.00672 17.2194C5.12166 17.5034 5.24107 17.7888 5.38736 18.0579C5.51275 18.2868 5.67247 18.4979 5.82921 18.709C6.14119 19.1283 6.54273 19.436 7.0428 19.598C7.31895 19.6872 7.61153 19.7289 7.89365 19.8002C8.53105 19.9623 9.18188 20.0128 9.83569 20.053C10.3805 20.0857 10.9269 20.1065 11.4687 20.157C12.1181 20.218 12.7674 20.215 13.4167 20.1749C14.0019 20.1407 14.587 20.1243 15.1707 20.0901C15.5767 20.0663 15.9827 20.044 16.3858 19.9935C16.8411 19.937 17.2949 19.8523 17.7143 19.6605C17.974 19.5416 18.2368 19.4078 18.4577 19.2308C19.0175 18.7819 19.4444 18.2155 19.8041 17.5941C20.2923 16.7526 20.7192 15.8815 21.064 14.9731C21.4088 14.0648 21.7238 13.1446 22.0522 12.2303C22.2283 11.7427 22.4209 11.261 22.7508 10.8507C23.0687 10.4552 23.4733 10.1921 23.9927 10.1847C24.7361 10.1743 25.2526 10.5682 25.5795 11.1986C25.9318 11.8794 26.1587 12.6124 26.4065 13.3363C26.611 13.9369 26.7916 14.548 27.0364 15.1322C27.3544 15.8859 27.7081 16.6248 28.0798 17.3532C28.4291 18.0401 28.8665 18.6689 29.477 19.1654C29.8905 19.5029 30.3756 19.7437 30.8951 19.8701C31.5967 20.044 32.3132 20.0946 33.0297 20.1422C33.4745 20.1719 33.9209 20.2046 34.3657 20.2284C34.6628 20.2447 34.9613 20.267 35.2584 20.2566C35.9226 20.2328 36.5854 20.1942 37.2496 20.1526C37.89 20.1124 38.5304 20.1213 39.1678 20.0173C39.7634 19.9192 40.3635 19.8552 40.9412 19.6709C41.377 19.5326 41.7801 19.3171 42.0503 18.9439C42.4234 18.4266 42.7847 17.8959 43.0265 17.2997C43.1743 16.934 43.34 16.5742 43.4579 16.1981C43.6445 15.602 43.8072 14.9969 43.961 14.3919C44.1311 13.7229 44.2535 13.042 44.5192 12.4012C44.5804 12.2556 44.6566 12.1292 44.8043 12.0608C44.8924 12.0207 44.9432 11.9612 44.9491 11.8571C44.9596 11.6654 44.9939 11.4736 44.9954 11.2833C45.0029 10.4597 44.9999 9.6376 44.9999 8.814ZM20.7714 12.4072C20.4415 13.7333 20.0146 15.0281 19.4772 16.2858C19.1832 16.9727 18.813 17.6149 18.2815 18.1501C17.9233 18.5113 17.4964 18.7774 17.0127 18.9291C16.7306 19.0183 16.4321 19.0525 16.138 19.103C15.9618 19.1327 15.7842 19.1521 15.6066 19.1625C15.1677 19.1907 14.7274 19.219 14.2885 19.2353C13.6332 19.2606 12.9779 19.2814 12.3226 19.2963C11.5061 19.3141 10.6955 19.2383 9.88943 19.1194C9.41922 19.0495 8.94752 18.9737 8.48627 18.8592C7.86529 18.7046 7.33836 18.3745 6.92039 17.884L6.49347 17.2551C6.14268 16.5757 5.95311 15.8443 5.79488 15.104C5.59784 14.1703 5.45901 13.2293 5.36348 12.2808C5.34258 12.0712 5.36049 11.8586 5.35303 11.6475C5.33959 11.3071 5.31571 10.9666 5.30078 10.6277C5.28586 10.317 5.26197 10.0048 5.26794 9.69409C5.28436 8.77089 5.37542 7.85512 5.60381 6.95571C5.78592 6.24064 6.19343 5.73221 6.91293 5.48097C7.32343 5.33676 7.74438 5.255 8.17279 5.19851C9.20427 5.06174 10.2402 5.03052 11.2792 5.04984C11.7165 5.04984 12.1554 5.03052 12.5913 5.0543C13.5839 5.10485 14.5796 5.1658 15.5722 5.24905C16.4127 5.32041 17.2471 5.4438 18.0651 5.65788C18.9369 5.88682 19.625 6.37443 20.1699 7.0791C20.5042 7.51171 20.8028 7.96811 20.9923 8.48397C21.1103 8.80508 21.1655 9.14106 21.1804 9.48447C21.2222 10.485 21.0103 11.4483 20.7714 12.4072ZM42.8071 9.08011C42.8086 9.08903 42.8116 9.09646 42.813 9.10538C42.8116 9.1143 42.8086 9.12322 42.8071 9.13214C42.8026 9.12173 42.7996 9.11133 42.7981 9.09943C42.7981 9.09349 42.8041 9.08754 42.8071 9.08011ZM42.8056 9.315C42.8101 9.33581 42.8145 9.35514 42.816 9.37595C42.8145 9.3923 42.8116 9.40865 42.8056 9.42352C42.8026 9.40568 42.7996 9.38784 42.7951 9.36852C42.7981 9.35216 42.8026 9.33432 42.8056 9.315ZM42.6623 12.9617C42.6623 12.9602 42.6608 12.9736 42.6578 12.987C42.6563 12.9706 42.6548 12.9528 42.6548 12.9364C42.6563 12.9201 42.6593 12.9052 42.6623 12.8889V12.9617ZM42.7802 11.9017C42.7757 12.0207 42.4936 13.6634 42.3682 14.4023C42.2145 15.3136 42.0115 16.216 41.6487 17.0737C41.589 17.215 41.5427 17.3607 41.4771 17.4989C41.4502 17.5554 41.1681 17.875 41.1502 17.8988C40.771 18.3894 40.2769 18.712 39.6888 18.9008C38.9872 19.1238 38.2602 19.1937 37.5318 19.2368C36.8884 19.2754 36.2421 19.2903 35.5972 19.3141C34.6135 19.3513 33.6328 19.2665 32.652 19.213C32.1983 19.1863 31.7489 19.1253 31.3041 19.0346C30.3906 18.8518 29.7353 18.3136 29.2218 17.5688C28.7829 16.931 28.4814 16.2264 28.2186 15.5039C27.7708 14.2804 27.3872 13.039 27.1095 11.765C26.9692 11.1227 26.8513 10.4775 26.8289 9.81748C26.805 9.10984 26.9991 8.4587 27.3588 7.85364C27.6813 7.30953 28.0619 6.8115 28.5456 6.39525C28.9919 6.01021 29.5203 5.79167 30.0831 5.64598C30.7966 5.46164 31.5235 5.35758 32.2535 5.2877C32.97 5.21932 33.688 5.17472 34.4045 5.12566C35.4912 5.04984 36.5794 5.04538 37.6676 5.08255C38.5095 5.11079 39.3514 5.17175 40.1844 5.31446C40.5919 5.38434 40.9889 5.48691 41.3666 5.65936C41.8622 5.88682 42.1667 6.27929 42.3399 6.78326C42.4996 7.24857 42.5847 7.72876 42.6444 8.21637C42.6772 8.48545 42.7175 8.75305 42.7504 9.02213C42.7593 9.09497 42.7608 9.17079 42.7638 9.24364C42.7772 9.68368 42.7892 10.1237 42.8026 10.5638C42.8026 10.5831 42.8071 10.6024 42.8086 10.6217C42.8116 10.6009 42.8145 10.5786 42.816 10.5563L42.8295 9.67922C42.831 9.6599 42.8325 9.64057 42.8369 9.62124C42.8414 9.63908 42.8444 9.65692 42.8459 9.67625C42.8235 10.4196 42.8056 11.1599 42.7802 11.9017Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Carrée
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M38.1693 4H31.4359L26.6727 8.814V8.89858L26.6363 8.93579L26.6462 9.27409C26.5735 9.45339 26.5305 9.64284 26.514 9.83567C26.5107 9.86612 26.4744 9.89318 26.4545 9.92363C26.4016 9.81199 26.395 9.71388 26.3785 9.61916C26.3686 9.55826 26.3487 9.46354 26.3124 9.45001C26.2826 9.43986 26.2529 9.43648 26.2198 9.43648C26.1769 9.43309 26.1339 9.44662 26.0975 9.47369C25.9223 9.6496 25.7009 9.67329 25.4794 9.67329C24.9736 9.67667 24.4646 9.67667 23.9589 9.67667C23.4531 9.67667 22.9441 9.67667 22.4383 9.67329C22.2168 9.67329 21.9987 9.64622 21.8202 9.47369C21.7838 9.44662 21.7408 9.43309 21.6946 9.43648C21.6648 9.43648 21.6351 9.43986 21.6053 9.45001C21.569 9.46354 21.5491 9.55826 21.5392 9.61577C21.5194 9.71388 21.5161 9.81199 21.5028 9.91009L21.4467 9.92363C21.4268 9.87288 21.3971 9.82552 21.3905 9.77139C21.3772 9.66652 21.3574 9.56165 21.331 9.46016V8.91549L16.571 4.10149H9.83434L5.07108 8.91549V9.37896H3.13735C3.06463 9.37896 3.00513 9.43986 3.00513 9.51428V11.1212C3.00513 11.1956 3.06463 11.2565 3.13735 11.2565H5.07108V15.7255L9.83434 20.5429H16.571L21.3343 15.7255V13.8614C21.4467 13.7092 21.5723 13.5637 21.6615 13.398C21.926 12.9176 22.1111 12.3932 22.2069 11.8486C22.2532 11.5813 22.2863 11.3107 22.3061 11.04C22.3193 10.8641 22.1937 10.6916 22.0615 10.6544C21.84 10.5968 21.8202 10.5596 21.9028 10.3228C22.5904 10.3702 23.2746 10.3939 23.9622 10.3939C24.6497 10.3939 25.3373 10.3702 26.0215 10.3228C26.0942 10.5258 26.0678 10.6104 25.9289 10.6476C25.6777 10.7186 25.5951 10.8066 25.6182 11.0705C25.6447 11.3851 25.6876 11.6963 25.7504 12.0076C25.8562 12.5252 26.0446 13.0225 26.3124 13.4792C26.4182 13.6618 26.557 13.8276 26.6793 14.0035V15.6206L31.4393 20.438H38.1759L42.9392 15.624V11.2565H44.8729C44.9456 11.2565 45.0051 11.1956 45.0051 11.1212V9.51428C45.0051 9.43986 44.9456 9.37896 44.8729 9.37896H42.9392V8.814L38.1693 4ZM31.9781 19.0882L27.9949 15.059V9.37896L31.9781 5.3532H37.6272L41.6104 9.37896V15.059L37.6272 19.0882H31.9781ZM10.3764 19.1897L6.39329 15.1639V9.48045L10.3764 5.45469H16.0256L20.0087 9.48045V15.1605L16.0256 19.1897H10.3764Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Octogonale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.0944 8.57711C25.6052 8.57711 26.1717 9.33018 26.1717 9.33018C26.3605 9.70672 26.3605 10.0833 26.1717 10.4598C25.9828 10.6481 25.9828 11.0246 25.9828 11.4011C27.6824 19.8732 35.0472 19.8732 35.0472 19.8732C42.9785 20.2498 43.7339 11.7777 43.7339 10.6481C43.9228 9.51845 44.3004 9.51845 44.6781 9.33018C45.0558 9.14191 45.4335 9.14191 46 9.14191V7.25923C41.6567 5.37654 38.4464 5 35.2361 5C30.8927 5 27.4936 7.25923 27.3047 7.25923H26.927C26.3605 7.07096 25.6052 6.88269 25.0386 6.88269H22.9614C22.3948 6.88269 21.6395 7.07096 21.073 7.25923H20.6953C20.3176 7.07096 17.1073 5 12.7639 5C9.55365 5 6.34335 5.56481 2 7.25923V9.14191C2.37768 9.14191 2.94421 9.14191 3.32189 9.33018C3.69957 9.51845 4.07725 9.70672 4.26609 10.6481C4.26609 11.7777 5.02146 20.2498 12.9528 19.8732C12.9528 19.8732 20.3176 19.8732 22.0172 11.4011C22.0172 11.0246 22.0172 10.8363 21.8283 10.6481V9.51845C21.8283 9.33018 22.3948 8.57711 24.0944 8.57711ZM35.4249 19.3084C29.0043 19.4967 26.927 13.2838 27.1159 11.0246C27.1159 9.89499 27.4936 8.95365 28.2489 8.20057C28.2489 8.20057 30.515 5.37654 35.2361 5.56481C39.9571 5.75308 42.2232 7.63576 42.6009 9.70672C42.9785 11.7777 42.6009 19.1202 35.4249 19.3084ZM5.2103 9.70672C5.58798 7.63576 7.85408 5.94134 12.5751 5.56481C17.2961 5.37654 19.5622 8.20057 19.5622 8.20057C20.3176 8.95365 20.6953 9.89499 20.6953 11.0246C20.8841 13.0956 18.8069 19.3084 12.3863 19.3084C5.39914 19.1202 5.02146 11.7777 5.2103 9.70672Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ovale
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M26.2727 8.75V9.82391C26.0752 10.0031 26.0752 10.1813 26.0752 10.5386C27.8536 18.5887 35.5607 18.5887 35.5607 18.5887C43.8614 18.947 44.6513 10.8969 44.6513 9.82391C44.8499 8.9282 45.2448 8.75 45.6398 8.5718C46.0348 8.39265 45.605 8.39265 46 8.39265V6.60405C40.8837 5.40002 39.1186 5.40002 35.7582 5.40002C31.2129 5.40002 27.8536 6.42491 27.4586 6.60405H27.0636C26.4701 6.42491 25.6802 6.24577 25.0867 6.24577H22.9133C22.3198 6.24577 21.5299 6.42491 20.9364 6.60405H20.5414C20.3439 6.60405 16.786 5.40002 12.2428 5.40002C8.8814 5.40002 7.11628 5.40002 2 6.60405V8.39265C2.59349 8.39265 1.96521 8.39265 2.36019 8.5718C2.75516 8.75094 3.15014 8.75094 3.34865 9.82391C3.34865 10.8969 4.1386 18.9461 12.4393 18.5887C12.4393 18.5887 20.1464 18.5887 21.9248 10.5386C21.9248 10.1813 21.9248 9.82391 21.7273 9.64477C21.6301 9.48015 21.5791 9.29571 21.5791 9.10828C21.5791 8.92085 21.6301 8.73641 21.7273 8.5718C21.7273 8.5718 22.3208 7.85522 23.9007 7.85522C25.6802 7.85522 26.2727 8.57085 26.2727 8.75ZM4.53358 8.92914C4.92958 6.9614 7.30047 6.42491 12.2428 6.24577C17.1831 6.06662 19.554 7.49788 19.554 7.49788C20.3449 8.21445 20.7409 9.10828 20.7409 10.1813C20.9374 12.3281 18.764 18.2304 12.0443 18.0522C4.5346 17.8731 4.1386 10.8959 4.53358 8.92914ZM36.1542 18.0522C29.4345 18.0522 27.2611 12.149 27.4586 10.1813C27.4586 9.10828 27.8536 8.21351 28.6446 7.49788C28.6446 7.49788 31.0154 6.06662 35.9557 6.24577C40.897 6.60405 43.2689 6.9614 43.6639 8.92914C43.8614 10.8969 43.4674 17.8731 36.1542 18.0522Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pantos
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5 11.0276C26.03 10.8388 26.4124 11.9719 27.3687 14.8046C29.8549 20.659 35.4009 20.8478 39.2258 18.9593C43.0507 17.0708 44.7719 9.70568 44.7719 9.70568C45.1544 8.95028 45.5369 8.38373 45.9194 7.81718C45.9194 7.81718 46.3019 6.11753 46.4931 4.79558C46.6844 3.47364 42.8595 3.85134 37.6959 3.85134C32.5323 3.85134 26.03 7.81718 25.6475 8.19488C25.265 8.38373 24.8825 8.38373 24.5 8.38373C24.1175 8.38373 23.735 8.38373 23.3525 8.19488C22.7788 8.00603 16.2765 3.85134 11.3041 3.85134C6.14051 3.85134 2.31562 3.66249 2.50687 4.79558C2.69811 5.92868 3.0806 7.81718 3.0806 7.81718C3.65433 8.38373 4.03682 9.13913 4.22807 9.70568C4.22807 9.70568 5.94927 17.0708 9.77416 18.9593C13.5991 20.8478 19.1452 20.659 21.6313 14.8046C22.5876 11.9719 22.97 10.8388 24.5 11.0276ZM35.0185 19.5259C29.0899 19.5259 27.1774 13.8604 26.9862 11.0276C26.7949 8.19488 30.6198 6.68408 30.6198 6.68408C34.4447 5.17328 38.4609 5.73983 39.9908 5.92868C41.9033 6.30638 43.4332 7.25063 43.4332 8.19488C43.6245 12.7273 40.5645 19.5259 35.0185 19.5259ZM5.56678 8.00603C5.56678 7.06178 7.09674 6.11753 9.00918 5.73983C10.3479 5.55098 14.5553 4.98443 18.3802 6.49523C18.3802 6.49523 22.2051 8.00603 22.0138 10.8388C21.8226 13.6715 19.9101 19.337 13.9815 19.337C8.24421 19.5259 5.18429 12.7273 5.56678 8.00603Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Papillon
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M42.4915 16.9375C41.1752 19.802 34.9701 20.3391 31.2094 18.1907C27.6368 15.8633 25.1923 9.41824 25.7564 8.34406C27.2607 4.40541 34.406 4.9425 34.406 4.9425C34.406 4.9425 38.3547 4.9425 40.7991 6.1957C44.1838 7.62794 43.8077 14.073 42.4915 16.9375ZM6.20085 6.01667C8.6453 4.76347 12.7821 4.9425 12.7821 4.9425C12.7821 4.9425 19.9274 4.22638 21.4316 8.34406C21.9957 9.41824 19.7393 16.0423 15.9786 18.1907C12.2179 20.3391 6.01282 19.802 4.69658 16.9375C3.38034 14.073 3.19231 7.62794 6.20085 6.01667ZM26.3205 5.12153C26.5085 5.12153 26.5085 5.30055 26.5085 5.30055V5.47958C26.1325 6.01667 25.5684 6.73279 25.3803 7.26988C25.3803 7.44891 25.1923 7.44891 25.0043 7.44891H22.3718C22.1838 7.44891 21.9957 7.44891 21.9957 7.26988C21.6197 6.73279 21.0556 5.83764 20.8675 5.47958V5.12153H26.3205ZM23.688 9.23921C24.2521 9.23921 24.8162 9.59727 25.0043 10.1344C25.3803 11.2085 27.6368 16.7585 30.8333 18.5488C34.0299 20.3391 40.047 21.0552 43.0556 17.4746C44.7479 15.5052 44.3718 11.9247 44.3718 11.9247L45.5 11.3876V9.59727L44.1838 9.06018C43.8077 7.26988 42.6795 5.83764 40.9872 4.9425C38.3547 3.68929 32.5256 4.04735 32.5256 4.04735H14.4744C14.4744 4.04735 8.83333 3.86832 6.01282 4.9425C4.32051 5.65861 3.19231 7.26988 2.81624 9.06018L1.5 9.59727V11.3876L2.81624 12.1037C2.81624 12.1037 2.62821 15.5052 4.13248 17.6536C7.14103 21.0552 13.1581 20.5181 16.3547 18.7278C19.5513 16.9375 21.8077 11.3876 22.1838 10.3134C22.3718 9.59727 22.9359 9.23921 23.688 9.23921Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Pilot
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.4418 7.9924C24.5808 7.9924 25.1503 8.56498 24.7707 9.51927C24.391 10.4736 26.0995 16.0085 28.7571 18.2988C31.9843 20.9709 38.8182 19.6348 40.7165 18.2988C43.3741 16.5811 43.7538 11.0462 43.7538 10.0919C43.7538 9.32841 44.1335 8.75583 44.8928 8.37411C45.2724 8.18326 45.4623 7.61068 45.2725 7.22896C45.2725 6.84724 44.5131 6.84724 42.0453 6.27466C34.6419 4.1752 29.8961 5.51122 25.9096 6.84724C24.2012 6.27466 22.113 6.27466 20.4045 6.84724C16.7977 5.32036 12.052 3.98434 4.64853 6.0838C2.37055 6.65638 1.61123 6.65638 1.4214 7.0381C1.23156 7.41982 1.4214 7.9924 1.80106 8.18326C2.56038 8.56498 2.94005 9.13755 2.94005 9.90099C2.94005 10.8553 3.50954 16.3902 5.97735 18.108C8.0655 19.444 14.7096 20.78 17.9367 18.108C20.5944 15.8176 22.3029 10.2827 21.9232 9.32841C21.5435 8.37411 22.3029 7.9924 23.4418 7.9924ZM39.1978 18.108C36.1605 19.0623 30.6554 19.444 28.3775 16.1994C26.4791 13.3365 25.9096 9.51927 26.2893 9.13755C26.2893 9.13755 28.5673 5.89294 34.8317 5.89294C41.0962 5.89294 42.8046 7.41982 42.8046 9.71013C42.8046 12.0005 42.425 17.1537 39.1978 18.108ZM4.07904 9.71013C4.07904 7.41982 5.78752 5.70208 12.052 5.89294C18.3164 5.89294 20.5944 9.13755 20.5944 9.13755C20.974 9.71013 20.4045 13.3365 18.5062 16.1994C16.4181 19.6348 10.913 19.0623 7.68583 18.108C4.4587 17.1537 4.07904 12.0005 4.07904 9.71013Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Rectangle
</a>
</div>
<div class="inline-flex gap-2 items-center">
<svg class=" shrink-0" width="48" height="24" viewBox="0 0 48 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M23.9056 8.43653C26.927 8.62097 27.1159 9.17429 27.3047 9.72761C27.3047 10.2809 27.1159 10.8342 27.6824 10.6498C27.6824 11.7564 27.8712 12.6786 28.0601 13.7853C29.1931 18.0274 34.4807 20.9784 40.5236 18.5807C44.6781 16.9208 45.2446 13.232 45.4335 11.0187C45.6223 11.0187 46 10.8342 46 10.4654V9.91205C46 9.72761 45.8112 9.35873 45.4335 9.35873H45.2446C44.4893 6.22325 41.8455 3.82553 35.2361 4.00997C28.6266 4.19441 28.0601 9.17429 28.0601 9.17429L27.6824 8.43653C27.4936 7.69877 25.2275 7.14545 23.9056 7.32989C22.5837 7.32989 20.3176 7.69877 20.1288 8.43653L19.9399 9.17429C19.9399 9.17429 19.5622 4.19441 12.7639 4.00997C5.96567 3.82553 3.32189 6.22325 2.75536 9.35873H2.56652C2.37768 9.35873 2 9.54317 2 9.91205V10.4654C2 10.6498 2.18884 11.0187 2.56652 11.0187C2.56652 13.0475 3.13305 16.7363 7.4764 18.5807C13.3305 20.9784 18.8069 18.0274 19.9399 13.7853C20.1288 12.6786 20.1288 11.7564 20.3176 10.6498C20.8841 10.8342 20.6953 10.2809 20.6953 9.72761C20.6953 9.17429 20.8841 8.43653 23.9056 8.43653ZM44.3004 12.3098C43.1674 17.4741 39.2017 19.134 34.4807 18.3963C29.5708 17.6585 26.927 11.0187 29.382 7.69877C31.8369 4.37885 36.9356 4.93217 36.9356 4.93217C41.279 4.74773 45.4335 7.14545 44.3004 12.3098ZM11.0644 4.93217C11.0644 4.93217 16.3519 4.19441 18.618 7.69877C20.8841 11.2031 18.2403 17.6585 13.5193 18.3963C8.79828 19.134 4.64378 17.2896 3.69957 12.3098C2.75536 7.32989 6.72103 4.74773 11.0644 4.93217Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-audio">
Ronde
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les formes
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Et aussi</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Tendance Magic 2024
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Le concept Magic
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Notre catalogue</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Notre catalogue
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Notre catalogue</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-sun.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-sun.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>L'audition</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
L'audition
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>L'audition</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>Offres</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
Offres
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>Offres</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden lg:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-category-men.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-category-men.png) no-repeat center /cover"></div>
</div>
<div class="hidden xl:flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer ml-6">
<div class="hidden xl:block w-[260px] h-[353px] cursor-pointer">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-glasses.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-glasses.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
<div x-data="{ open: false }" class="group inline-flex flex-col px-6 py-4 cursor-default
lg:hover:border-b hover:border-audio-700">
<h2 @click="open=true" class="flex lg:hidden justify-between font-semibold text-audio-700">
<span>J'ai ouï dire</span>
<span class="lg:hidden"><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>
</span>
</h2>
<h2 class="hidden lg:flex justify-between font-semibold text-audio-700">
J'ai ouï dire
</h2>
<div x-show="open" x-transition:enter="transition ease-out duration-500" x-transition:enter-start="opacity-0 transform translate-x-full" x-transition:enter-end="opacity-100 transform translate-x-0" x-transition:leave="transition ease-in duration-500" x-transition:leave-start="opacity-100 transform translate-x-0" x-transition:leave-end="opacity-0 transform -translate-x-full" class="w-full h-screen lg:hidden absolute top-0 left-0 gap-x-4 lg:py-4 flex-col bg-white overflow-y-scroll z-10">
<h2 class="flex items-center justify-between border-b border-neutral-200 p-4 mb-6 font-semibold text-audio-700">
<span @click="open=false" class="lg:hidden"><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>
</span>
<span>J'ai ouï dire</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2"><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.99469 7.9047C8.70179 7.6118 8.22692 7.6118 7.93403 7.9047C7.64113 8.19759 7.64113 8.67246 7.93403 8.96536L10.9392 11.9706L7.93403 14.9758C7.64114 15.2687 7.64114 15.7435 7.93403 16.0364C8.22693 16.3293 8.7018 16.3293 8.99469 16.0364L11.9999 13.0312L15.0051 16.0364C15.298 16.3293 15.7729 16.3293 16.0658 16.0364C16.3586 15.7435 16.3586 15.2687 16.0658 14.9758L13.0606 11.9706L16.0658 8.96536C16.3587 8.67246 16.3587 8.19759 16.0658 7.9047C15.7729 7.6118 15.298 7.6118 15.0051 7.9047L11.9999 10.9099L8.99469 7.9047Z" fill="currentColor" />
</svg>
</span>
</h2>
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
<div class="w-full hidden lg:absolute lg:top-full lg:left-0 gap-x-4 py-4 lg:group-hover:flex flex-col bg-white">
<div class="container flex flex-col lg:flex-row gap-y-8 lg:gap-y-0 justify-between">
<div class="flex flex-col lg:flex-row pl-6 w-full">
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Genre</h2>
<div class="inline-flex flex-col gap-4">
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-woman.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Femme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-man.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Homme
</a>
</div>
<div class="lg:w-36 flex items-center border-t first:border-t-0 border-neutral-200 pt-4 first:pt-0 px-2">
<img src="/img/menu/best-seller-mini-child.png" alt="meilleurs ventes femme" class="w-12 h-12 rounded-full mr-4" />
<a href="#" class=" text-base link-audio">
Enfant
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir tout
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
<div class="flex flex-col mt-6 first:lg-0 lg:mt-0 lg:mx-12 first:ml-0 last:mr-0 pb-6 border-b lg:border-b-0 border-neutral-200 ">
<h2 class="font-semibold mb-8 text-neutral-600">Catégorie</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Magic
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Solaire
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Vue
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Lentilles
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-audio">
Sport
</a>
</div>
<div class="inline-flex gap-2 items-center">
<a href="#" class=" text-base link-trailing-icon link-audio">
Voir toutes les catégories
<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="M19.5336 11.473C19.6039 11.5441 19.657 11.6258 19.6931 11.7129L19.5336 11.473ZM19.5299 11.4693L15.5303 7.46967C15.2374 7.17678 14.7626 7.17678 14.4697 7.46967C14.1768 7.76256 14.1768 8.23744 14.4697 8.53033L17.1893 11.25H5C4.58579 11.25 4.25 11.5858 4.25 12C4.25 12.4142 4.58579 12.75 5 12.75H17.1893L14.4697 15.4697C14.1768 15.7626 14.1768 16.2374 14.4697 16.5303C14.7626 16.8232 15.2374 16.8232 15.5303 16.5303L19.5303 12.5303C19.6022 12.4584 19.6565 12.3755 19.6931 12.2871C19.7298 12.1987 19.75 12.1017 19.75 12C19.75 11.8983 19.7298 11.8013 19.6931 11.7129" fill="currentColor" />
</svg>
</a>
</div>
</div>
</div>
</div>
<div class="flex flex-col lg:flex-row lg:justify-center gap-6 cursor-pointer lg:ml-8">
<div class="hidden lg:block w-[260px] h-[353px]">
<div class="w-[260px] h-[325px]">
<img src="/img/menu/push-magic.png" alt="Image nouveautés femme" class="rounded-lg" />
</div>
<div class="flex justify-center ">
<a href="#" class="text-sm">Nouveautés Femme</a>
</div>
</div>
<div class="lg:hidden w-full h-52 rounded-lg" style="background: url(/img/menu/push-magic.png) no-repeat center /cover"></div>
</div>
</div>
<div class="container mt-12 flex">
<button type="button" class=" btn btn-audio-subtle 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="M8 1.25C8.41421 1.25 8.75 1.58579 8.75 2V3.25H15.25V2C15.25 1.58579 15.5858 1.25 16 1.25C16.4142 1.25 16.75 1.58579 16.75 2V3.25H20C21.5188 3.25 22.75 4.48122 22.75 6V20C22.75 21.5188 21.5188 22.75 20 22.75H4C2.48122 22.75 1.25 21.5188 1.25 20V6C1.25 4.48122 2.48122 3.25 4 3.25H7.25V2C7.25 1.58579 7.58579 1.25 8 1.25ZM7.25 4.75H4C3.30964 4.75 2.75 5.30964 2.75 6V8.25H21.25V6C21.25 5.30964 20.6904 4.75 20 4.75H16.75V6C16.75 6.41421 16.4142 6.75 16 6.75C15.5858 6.75 15.25 6.41421 15.25 6V4.75H8.75V6C8.75 6.41421 8.41421 6.75 8 6.75C7.58579 6.75 7.25 6.41421 7.25 6V4.75ZM21.25 9.75H2.75V20C2.75 20.6904 3.30964 21.25 4 21.25H20C20.6904 21.25 21.25 20.6904 21.25 20V9.75ZM12 14.5C12.5523 14.5 13 14.0523 13 13.5C13 12.9477 12.5523 12.5 12 12.5C11.4477 12.5 11 12.9477 11 13.5C11 14.0523 11.4477 14.5 12 14.5ZM8 17.5C8 18.0523 7.55228 18.5 7 18.5C6.44772 18.5 6 18.0523 6 17.5C6 16.9477 6.44772 16.5 7 16.5C7.55228 16.5 8 16.9477 8 17.5ZM12 18.5C12.5523 18.5 13 18.0523 13 17.5C13 16.9477 12.5523 16.5 12 16.5C11.4477 16.5 11 16.9477 11 17.5C11 18.0523 11.4477 18.5 12 18.5ZM17 14.5C17.5523 14.5 18 14.0523 18 13.5C18 12.9477 17.5523 12.5 17 12.5C16.4477 12.5 16 12.9477 16 13.5C16 14.0523 16.4477 14.5 17 14.5ZM17 18.5C17.5523 18.5 18 18.0523 18 17.5C18 16.9477 17.5523 16.5 17 16.5C16.4477 16.5 16 16.9477 16 17.5C16 18.0523 16.4477 18.5 17 18.5Z" fill="currentColor" />
</svg>
Prendre un rendez-vous
</button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="px-6 my-6">
<div class="bg-neutral-100 my-4 rounded-md p-4">
<div class="flex gap-4 items-center mb-4">
<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.75C14.3472 3.75 16.25 5.65279 16.25 8C16.25 10.3472 14.3472 12.25 12 12.25C9.65279 12.25 7.75 10.3472 7.75 8C7.75 5.65279 9.65279 3.75 12 3.75ZM15.1254 12.8272C16.7051 11.8024 17.75 10.0232 17.75 8C17.75 4.82436 15.1756 2.25 12 2.25C8.82436 2.25 6.25 4.82436 6.25 8C6.25 10.0232 7.29494 11.8024 8.87458 12.8272C7.73658 13.2624 6.69098 13.9347 5.81282 14.8128C4.17187 16.4538 3.25 18.6794 3.25 21C3.25 21.4142 3.58579 21.75 4 21.75C4.41421 21.75 4.75 21.4142 4.75 21C4.75 19.0772 5.51384 17.2331 6.87348 15.8735C8.23311 14.5138 10.0772 13.75 12 13.75C13.9228 13.75 15.7669 14.5138 17.1265 15.8735C18.4862 17.2331 19.25 19.0772 19.25 21C19.25 21.4142 19.5858 21.75 20 21.75C20.4142 21.75 20.75 21.4142 20.75 21C20.75 18.6794 19.8281 16.4538 18.1872 14.8128C17.309 13.9347 16.2634 13.2624 15.1254 12.8272Z" fill="currentColor" />
</svg>
<span class="text-lg">Mon compte</span>
</div>
<div class="flex flex-col mb-4 pb-4 border-b border-neutral-300">
<span class="font-semibold mb-2">Connectez-vous à votre compte ALAIN AFFLELOU.</span>
<span class="mb-2 text-sm">Connectez-vous pour bénéficier d'une expérience personnalisée et accéder à vos offres et avantages.</span>
<button type="button" class="w-fit btn btn-dark btn-size-sm">
Se connecter
</button>
</div>
<div class="flex flex-col">
<span class="font-semibold mb-2">Vous n'avez pas encore de compte ALAIN AFFLELOU ? Créez-en un maintenant :</span>
<ul class="mb-2 text-sm list-disc">
Vous pourrez bénéficier :
<li class="ml-6">d’offres privilégiés,</li>
<li class="ml-6">de nos services en ligne (prise de rendez-vous, abonnement lentilles, etc),</li>
<li class="ml-6">d’invitations à nos événements</li>
<li class="ml-6">et bien plus encore !</li>
</ul>
<button type="button" class="w-fit btn btn-dark-subtle btn-size-sm">
Se connecter
</button>
</div>
</div>
<div class="flex flex-col gap-4 text-sm underline">
<span class="flex items-center gap-x-2">
<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.4907 20.5806C12.4538 20.603 12.4158 20.6259 12.3786 20.6477C12.1434 20.785 11.8519 20.7838 11.6176 20.645L11.5062 20.5774C11.4366 20.5345 11.3359 20.4717 11.2087 20.3901C10.9544 20.227 10.5934 19.9884 10.1613 19.6831C9.2984 19.0734 8.14487 18.193 6.98812 17.1121C4.71943 14.9921 2.25 11.9278 2.25 8.51266C2.25 5.58716 4.58441 3.25 7.5 3.25C9.03842 3.25 10.3421 4.16053 11.1962 4.9489C11.5116 5.24006 11.7824 5.53002 12 5.78205C12.2176 5.53002 12.4884 5.24006 12.8038 4.9489C13.6579 4.16053 14.9616 3.25 16.5 3.25C19.4142 3.25 21.75 5.58579 21.75 8.5C21.75 11.9589 19.283 15.0258 17.0112 17.1406C15.8539 18.218 14.6998 19.0918 13.8365 19.6958C13.4042 19.9983 13.043 20.2343 12.7885 20.3956C12.6612 20.4762 12.5604 20.5382 12.4907 20.5806ZM3.75 8.51266C3.75 11.2516 5.78075 13.9309 8.01225 16.0161C9.10559 17.0378 10.2022 17.8753 11.0268 18.458C11.4296 18.7425 11.7658 18.9651 12.0029 19.1175C12.2398 18.9672 12.5751 18.7476 12.9766 18.4667C13.8007 17.8902 14.8966 17.0598 15.9892 16.0427C18.2172 13.9686 20.25 11.2855 20.25 8.5C20.25 6.41421 18.5858 4.75 16.5 4.75C15.5384 4.75 14.5921 5.33947 13.8212 6.0511C13.4488 6.3949 13.1457 6.74102 12.9356 7.00175C12.8311 7.13154 12.7508 7.23868 12.6977 7.31179C12.6712 7.34831 12.6515 7.37623 12.6391 7.39411L12.626 7.41317L12.624 7.41603C12.4849 7.62448 12.2506 7.75 12 7.75C11.7496 7.75 11.5153 7.62451 11.3762 7.41634L11.374 7.41317L11.3609 7.39411C11.3485 7.37623 11.3288 7.34831 11.3023 7.31179C11.2492 7.23868 11.1689 7.13154 11.0644 7.00175C10.8543 6.74102 10.5512 6.3949 10.1788 6.0511C9.72644 5.63355 9.21372 5.25805 8.67296 5.01901C8.29212 4.85066 7.89737 4.75 7.5 4.75C5.41559 4.75 3.75 6.41284 3.75 8.51266Z" fill="currentColor" />
</svg>
Liste d'envies
</span>
<span class="flex items-center gap-x-2">
<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
</span>
<span class="flex items-center gap-x-2">
<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
</span>
</div>
</div>
<div class="flex flex-col p-6 bg-neutral-800 text-white mb-20">
<span class="font-semibold mb-2">Changer de pays ou de langue</span>
<span class="text-sm mb-2">Votre panier sera vidé si vous changez de pays.</span>
<div class="w-fit">
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class=" btn-icons btn btn-light-ghost 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>
</div>
</div>
</div>
</div>
</div>
<div class="hidden lg:flex">
<div class="flex h-full" x-data="{ showOpticMenu: false }">
<div class="h-full flex items-center" @mouseenter="showOpticMenu = true" @mouseleave="showOpticMenu = false">
<span class="hover:bg-neutral-100 h-full flex items-center px-4 font-medium">Optique</span>
<div x-cloak class="menu-container bg-neutral-100 w-full absolute top-full left-0"
:class="showOpticMenu ? 'flex' : 'hidden'"
>
<div class="flex container">
{% for links in opticLinks %}
{% render "@header-links" with {
title: links.title,
secondaryLinks: links.secondaryLinks,
color: links.color
} %}
{% endfor %}
</div>
</div>
</div>
</div>
<div class="flex h-full" x-data="{ showAudioMenu: false }">
<div class="h-full flex items-center" @mouseenter="showAudioMenu = true" @mouseleave="showAudioMenu = false">
<span class="hover:bg-neutral-100 h-full flex items-center px-4 font-medium text-audio-700">Audition</span>
<div x-cloak class="menu-container bg-neutral-100 w-full absolute top-full left-0"
:class="showAudioMenu ? 'flex' : 'hidden'"
>
<div class="flex container">
{% for links in AudioLinks %}
{% render "@header-links" with {
title: links.title,
secondaryLinks: links.secondaryLinks,
color: links.color
} %}
{% endfor %}
</div>
</div>
</div>
</div>
</div>
<div class="flex lg:hidden" x-data="{ showMobileMenu: false }">
<span @click="showMobileMenu = true">{% render "@icons-library--burger-menu" %}</span>
<div x-cloak x-show="showMobileMenu"
@click.outside="showMobileMenu = false"
x-transition:enter="transition ease-out duration-500"
x-transition:enter-start="opacity-0 transform translate-x-full"
x-transition:enter-end="opacity-100 transform translate-x-0"
x-transition:leave="transition ease-in duration-500"
x-transition:leave-start="opacity-100 transform translate-x-0"
x-transition:leave-end="opacity-0 transform -translate-x-full"
class="absolute h-screen w-screen left-0 top-0 flex flex-col bg-white z-10">
<div class="h-full overflow-y-scroll ">
<div class="flex justify-between items-center px-6 py-4">
<span class="w-1/2">
{% render "@logos-brand--afflelou-full" with {logoClass:'w-full'} %}
</span>
<span @click="showMobileMenu = false" class="rounded-full bg-black/5 p-2">{% render "@icons-library--close-outline" %}</span>
</div>
<div class="py-6 px-4 bg-neutral-150">
<button type="button" class="shadow-find-store btn bg-white text-neutral-800 btn-size-md w-full btn-icons">
<span class="bg-black text-white p-1 rounded-full">
{% render "@icons-library--map-outline" %}
</span>
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>
<div x-data="{ selected: 'optique' }" class="flex flex-col">
<div class="bg-neutral-100 flex items-center px-4 font-medium m-6 py-2 rounded-full justify-between text-center">
<button
@click="selected = 'optique'"
:class="selected === 'optique' ? 'bg-white' : ''"
class="w-1/2 py-3 rounded-full transition-all duration-300"
>
Optique
</button>
<button
@click="selected = 'audio'"
:class="selected === 'audio' ? 'bg-white text-audio-700' : ''"
class="w-1/2 py-3 rounded-full transition-all duration-300"
>
Audition
</button>
</div>
<div x-show="selected === 'optique'" x-cloak class="menu-container flex w-full pb-4 mb-4 border-b border-neutral-200">
<div class="flex flex-col w-full">
{% for links in opticLinks %}
{% render "@header-links" with {
title: links.title,
secondaryLinks: links.secondaryLinks,
color: links.color
} %}
{% endfor %}
</div>
</div>
<div x-show="selected === 'audio'" x-cloak class="menu-container flex w-full pb-4 mb-4 border-b border-neutral-200">
<div class="flex flex-col w-full">
{% for links in AudioLinks %}
{% render "@header-links" with {
title: links.title,
secondaryLinks: links.secondaryLinks,
color: links.color
} %}
{% endfor %}
</div>
</div>
</div>
<div class="px-6 my-6">
<div class="bg-neutral-100 my-4 rounded-md p-4">
<div class="flex gap-4 items-center mb-4">
{% render "@icons-library--user-outline" %}
<span class="text-lg">Mon compte</span>
</div>
<div class="flex flex-col mb-4 pb-4 border-b border-neutral-300">
<span class="font-semibold mb-2">Connectez-vous à votre compte ALAIN AFFLELOU.</span>
<span class="mb-2 text-sm">Connectez-vous pour bénéficier d'une expérience personnalisée et accéder à vos offres et avantages.</span>
{% render "@template-button" with {color: "dark",size:"sm",label:"Se connecter",button_class:"w-fit"} %}
</div>
<div class="flex flex-col">
<span class="font-semibold mb-2">Vous n'avez pas encore de compte ALAIN AFFLELOU ? Créez-en un maintenant :</span>
<ul class="mb-2 text-sm list-disc">
Vous pourrez bénéficier :
<li class="ml-6">d’offres privilégiés,</li>
<li class="ml-6">de nos services en ligne (prise de rendez-vous, abonnement lentilles, etc),</li>
<li class="ml-6">d’invitations à nos événements</li>
<li class="ml-6">et bien plus encore !</li>
</ul>
{% render "@template-button" with {color: "dark-subtle",size:"sm",label:"Se connecter",button_class:"w-fit"} %}
</div>
</div>
<div class="flex flex-col gap-4 text-sm underline">
<span class="flex items-center gap-x-2">
{% render "@icons-library--like-outline" %}
Liste d'envies
</span>
<span class="flex items-center gap-x-2">
{% render "@icons-library--help" %}
Besoin d'aide
</span>
<span class="flex items-center gap-x-2">
{% render "@icons-library--business" %}
Nous rejoindre
</span>
</div>
</div>
<div class="flex flex-col p-6 bg-neutral-800 text-white mb-20">
<span class="font-semibold mb-2">Changer de pays ou de langue</span>
<span class="text-sm mb-2">Votre panier sera vidé si vous changez de pays.</span>
<div class="w-fit">
{% render "@template-dropdown" with {
color: "light-ghost",
size: "sm",
type: "leading-icon",
label: "France - FR",
icon: {
name: "library--world"
},
items:[
{
label: 'Espagne - ES',
type: 'classic'
},
{
label: 'Belgique - FR',
type: 'classic'
},
{
label: 'Belgique - NL',
type: 'classic'
},
{
label: 'Suisse - FR',
type: 'classic'
},
{
label: 'Maroc - FR',
type: 'classic'
},
{
label: 'Portugal - PT',
type: 'classic'
}
]
} %}
</div>
</div>
</div>
</div>
</div>
{
"opticLinks": [
{
"title": "Meilleures ventes",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
},
"secondPush": {
"label": "Nouveautés Homme",
"image": {
"src": "/img/menu/push-category-men.png",
"alt": "Image nouveautés homme"
},
"link": "#"
}
}
]
},
{
"title": "Magic",
"secondaryLinks": [
{
"title": "Magic clips",
"links": [
{
"label": "sun",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Polarized",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Nightdrive",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tous les clips",
"type": "trailing-icon"
}
]
},
{
"title": "Forme de monture",
"links": [
{
"label": "Carrée",
"icon": {
"name": "afflelou--carre"
}
},
{
"label": "Octogonale",
"icon": {
"name": "afflelou--octogonale"
}
},
{
"label": "Ovale",
"icon": {
"name": "afflelou--ovale"
}
},
{
"label": "Pantos",
"icon": {
"name": "afflelou--pantos"
}
},
{
"label": "Papillon",
"icon": {
"name": "afflelou--papillon"
}
},
{
"label": "Pilot",
"icon": {
"name": "afflelou--pilot"
}
},
{
"label": "Rectangle",
"icon": {
"name": "afflelou--rectangulaire"
}
},
{
"label": "Ronde",
"icon": {
"name": "afflelou--ronde"
}
},
{
"label": "Voir toutes les formes",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
},
{
"title": "Genre",
"links": [
{
"label": "Femme"
},
{
"label": "Homme"
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Et aussi",
"links": [
{
"label": "Magic Sport"
},
{
"label": "Tendance Magic 2024"
},
{
"label": "Le concept Magic"
}
]
}
]
},
{
"title": "Lunettes de soleil",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-sun.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"title": "Lunettes de vue",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"title": "Lentilles",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"title": "Offres",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
},
"secondPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-category-men.png",
"alt": "Image nouveautés femme"
},
"link": "#"
},
"thirdPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-glasses.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"title": "Services",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
}
],
"AudioLinks": [
{
"color": "audio",
"title": "Meilleures ventes",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
},
"secondPush": {
"label": "Nouveautés Homme",
"image": {
"src": "/img/menu/push-category-men.png",
"alt": "Image nouveautés homme"
},
"link": "#"
}
}
]
},
{
"color": "audio",
"title": "Appareils auditifs",
"secondaryLinks": [
{
"title": "Magic clips",
"links": [
{
"label": "sun",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Polarized",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Nightdrive",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tous les clips",
"type": "trailing-icon"
}
]
},
{
"title": "Forme de monture",
"links": [
{
"label": "Carrée",
"icon": {
"name": "afflelou--carre"
}
},
{
"label": "Octogonale",
"icon": {
"name": "afflelou--octogonale"
}
},
{
"label": "Ovale",
"icon": {
"name": "afflelou--ovale"
}
},
{
"label": "Pantos",
"icon": {
"name": "afflelou--pantos"
}
},
{
"label": "Papillon",
"icon": {
"name": "afflelou--papillon"
}
},
{
"label": "Pilot",
"icon": {
"name": "afflelou--pilot"
}
},
{
"label": "Rectangle",
"icon": {
"name": "afflelou--rectangulaire"
}
},
{
"label": "Ronde",
"icon": {
"name": "afflelou--ronde"
}
},
{
"label": "Voir toutes les formes",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
},
{
"title": "Genre",
"links": [
{
"label": "Femme"
},
{
"label": "Homme"
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Et aussi",
"links": [
{
"label": "Magic Sport"
},
{
"label": "Tendance Magic 2024"
},
{
"label": "Le concept Magic"
}
]
}
]
},
{
"color": "audio",
"title": "Notre catalogue",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-sun.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"color": "audio",
"title": "L'audition",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"color": "audio",
"title": "Offres",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
},
"secondPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-category-men.png",
"alt": "Image nouveautés femme"
},
"link": "#"
},
"thirdPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-glasses.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
},
{
"color": "audio",
"title": "J'ai ouï dire",
"secondaryLinks": [
{
"title": "Genre",
"links": [
{
"label": "Femme",
"image": {
"src": "/img/menu/best-seller-mini-woman.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Homme",
"image": {
"src": "/img/menu/best-seller-mini-man.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Enfant",
"image": {
"src": "/img/menu/best-seller-mini-child.png",
"alt": "meilleurs ventes femme"
}
},
{
"label": "Voir tout",
"type": "trailing-icon"
}
]
},
{
"title": "Catégorie",
"links": [
{
"label": "Magic"
},
{
"label": "Solaire"
},
{
"label": "Vue"
},
{
"label": "Lentilles"
},
{
"label": "Sport"
},
{
"label": "Voir toutes les catégories",
"type": "trailing-icon"
}
],
"firstPush": {
"label": "Nouveautés Femme",
"image": {
"src": "/img/menu/push-magic.png",
"alt": "Image nouveautés femme"
},
"link": "#"
}
}
]
}
]
}
No notes defined.