<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Preview Layout</title>
<link media="all" rel="stylesheet" href="../../css/plyr.css">
<link media="all" rel="stylesheet" href="../../css/swiper-bundle.min.css">
<link media="all" rel="stylesheet" href="../../css/styles.css">
<script>
window.APP = {
modules: {},
addModule: function(name, config) {
this.modules[name] = this.modules[name] || [];
this.modules[name].push(config);
},
DEBUG: 0,
CONFIG: {},
};
</script>
<style>
body {
margin: 25px !important;
}
</style>
</head>
<body style="background-color: " class="antialiased text-base font-sans ">
<script>
'use strict';
(function(hyva, undefined) {
function lifetimeToExpires(options, defaults) {
const lifetime = options.lifetime || defaults.lifetime;
if (lifetime) {
const date = new Date;
date.setTime(date.getTime() + lifetime * 1000);
return date;
}
return null;
}
function generateRandomString() {
const allowedCharacters = '0123456789abcdefghijklmnopqrstuvwxyzABCDEFGHIJKLMNOPQRSTUVWXYZ',
length = 16;
let formKey = '',
charactersLength = allowedCharacters.length;
for (let i = 0; i < length; i++) {
formKey += allowedCharacters[Math.round(Math.random() * (charactersLength - 1))]
}
return formKey;
}
const sessionCookieMarker = {
noLifetime: true
}
const cookieTempStorage = {};
const internalCookie = {
get(name) {
const v = document.cookie.match('(^|;) ?' + name + '=([^;]*)(;|$)');
return v ? v[2] : null;
},
set(name, value, days, skipSetDomain) {
let expires,
path,
domain,
secure,
samesite;
const defaultCookieConfig = {
expires: null,
path: '/',
domain: null,
secure: false,
lifetime: null,
samesite: 'lax'
};
const cookieConfig = window.COOKIE_CONFIG || {};
expires = days && days !== sessionCookieMarker ?
lifetimeToExpires({
lifetime: 24 * 60 * 60 * days,
expires: null
}, defaultCookieConfig) :
lifetimeToExpires(window.COOKIE_CONFIG, defaultCookieConfig) || defaultCookieConfig.expires;
path = cookieConfig.path || defaultCookieConfig.path;
domain = !skipSetDomain && (cookieConfig.domain || defaultCookieConfig.domain);
secure = cookieConfig.secure || defaultCookieConfig.secure;
samesite = cookieConfig.samesite || defaultCookieConfig.samesite;
document.cookie = name + "=" + encodeURIComponent(value) +
(expires && days !== sessionCookieMarker ? '; expires=' + expires.toGMTString() : '') +
(path ? '; path=' + path : '') +
(domain ? '; domain=' + domain : '') +
(secure ? '; secure' : '') +
(samesite ? '; samesite=' + samesite : 'lax');
},
isWebsiteAllowedToSaveCookie() {
const allowedCookies = this.get('user_allowed_save_cookie');
if (allowedCookies) {
const allowedWebsites = JSON.parse(unescape(allowedCookies));
return allowedWebsites[CURRENT_WEBSITE_ID] === 1;
}
return false;
},
getGroupByCookieName(name) {
const cookieConsentConfig = window.cookie_consent_config || {};
let group = null;
for (let prop in cookieConsentConfig) {
if (!cookieConsentConfig.hasOwnProperty(prop)) continue;
if (cookieConsentConfig[prop].includes(name)) {
group = prop;
break;
}
}
return group;
},
isCookieAllowed(name) {
const cookieGroup = this.getGroupByCookieName(name);
return cookieGroup ?
window.cookie_consent_groups[cookieGroup] :
this.isWebsiteAllowedToSaveCookie();
},
saveTempStorageCookies() {
for (const [name, data] of Object.entries(cookieTempStorage)) {
if (this.isCookieAllowed(name)) {
this.set(name, data['value'], data['days'], data['skipSetDomain']);
delete cookieTempStorage[name];
}
}
}
};
hyva.getCookie = (name) => {
const cookieConfig = window.COOKIE_CONFIG || {};
if (cookieConfig.cookie_restriction_enabled && !internalCookie.isCookieAllowed(name)) {
return cookieTempStorage[name] ? cookieTempStorage[name]['value'] : null;
}
return internalCookie.get(name);
}
hyva.setCookie = (name, value, days, skipSetDomain) => {
const cookieConfig = window.COOKIE_CONFIG || {};
if (cookieConfig.cookie_restriction_enabled && !internalCookie.isCookieAllowed(name)) {
cookieTempStorage[name] = {
value,
days,
skipSetDomain
};
return;
}
return internalCookie.set(name, value, days, skipSetDomain);
}
hyva.setSessionCookie = (name, value, skipSetDomain) => {
return hyva.setCookie(name, value, sessionCookieMarker, skipSetDomain)
}
hyva.getBrowserStorage = () => {
const browserStorage = window.localStorage || window.sessionStorage;
if (!browserStorage) {
console.warn('Browser Storage is unavailable');
return false;
}
try {
browserStorage.setItem('storage_test', '1');
browserStorage.removeItem('storage_test');
} catch (error) {
console.warn('Browser Storage is not accessible', error);
return false;
}
return browserStorage;
}
hyva.postForm = (postParams) => {
const form = document.createElement("form");
let data = postParams.data;
if (!postParams.skipUenc && !data.uenc) {
data.uenc = btoa(window.location.href);
}
form.method = "POST";
form.action = postParams.action;
Object.keys(postParams.data).map(key => {
const field = document.createElement("input");
field.type = 'hidden'
field.value = postParams.data[key];
field.name = key;
form.appendChild(field);
});
const form_key = document.createElement("input");
form_key.type = 'hidden';
form_key.value = hyva.getFormKey();
form_key.name = "form_key";
form.appendChild(form_key);
document.body.appendChild(form);
form.submit();
}
hyva.getFormKey = function() {
let formKey = hyva.getCookie('form_key');
if (!formKey) {
formKey = generateRandomString();
hyva.setCookie('form_key', formKey);
}
return formKey;
}
hyva.formatPrice = (value, showSign, options = {}) => {
const formatter = new Intl.NumberFormat(
'en-US',
Object.assign({
style: 'currency',
currency: 'EUR',
signDisplay: showSign ? 'always' : 'auto'
}, options)
);
return (typeof Intl.NumberFormat.prototype.formatToParts === 'function') ?
formatter.formatToParts(value).map(({
type,
value
}) => {
switch (type) {
case 'currency':
return '€' || value;
case 'minusSign':
return '- ';
case 'plusSign':
return '+ ';
default:
return value;
}
}).reduce((string, part) => string + part) :
formatter.format(value);
}
/**
* Internal string replacement function implementation, see hyva.str() for usage details.
*
* @param string str Template string with optional placeholders
* @param int nStart Offset for placeholders, 0 means %0 is replaced with args[0], 1 means %1 is replaced with args[0]
* @param array ...args Positional replacement arguments. Rest arguments support isn't at 97% yet, so Array.from(arguments).slice() is used instead.
*/
const formatStr = function(str, nStart) {
const args = Array.from(arguments).slice(2);
return str.replace(/(%+)([0-9]+)/g, (m, p, n) => {
const idx = parseInt(n) - nStart;
if (args[idx] === null || args[idx] === void 0) {
return m;
}
return p.length % 2 ?
p.slice(0, -1).replace('%%', '%') + args[idx] :
p.replace('%%', '%') + n;
})
}
/**
* Replace positional parameters like %1 in string with the rest argument in the matching position.
* The first rest argument replaces %1, the second %2 and so on.
*
* Example: hyva.str('%3 %2 %1', 'a', 'b', 'c') => "c b a"
*
* To insert a literal % symbol followed by a number, duplicate the %, for example %%2 is returned as %2.
*/
hyva.str = function(string) {
const args = Array.from(arguments);
args.splice(1, 0, 1);
return formatStr.apply(undefined, args);
}
/**
* Zero based version of hyva.str(): the first rest argument replaces %0, the second %1 and so on.
*
* Example: hyva.strf('%2 %1 %0', 'a', 'b', 'c') => "c b a"
*
* If in doubt whether to use hyva.str() or hyva.strf(), prefer hyva.str() because it is more similar to __()
* and it might be possible to reuse existing phrase translations with placeholders.
*/
hyva.strf = function() {
const args = Array.from(arguments);
args.splice(1, 0, 0);
return formatStr.apply(undefined, args);
}
/**
* Take a html string as `content` parameter and
* extract an element from the DOM to replace in
* the current page under the same selector,
* defined by `targetSelector`
*/
hyva.replaceDomElement = (targetSelector, content) => {
// Parse the content and extract the DOM node using the `targetSelector`
const parser = new DOMParser();
const doc = parser.parseFromString(content, 'text/html');
const contentNode = doc.querySelector(targetSelector);
// Bail if content can't be found
if (!contentNode) {
return;
}
hyva.activateScripts(contentNode)
// Replace the old DOM node with the new content
document.querySelector(targetSelector).replaceWith(contentNode);
// Reload customerSectionData and display cookie-messages if present
window.dispatchEvent(new CustomEvent("reload-customer-section-data"));
hyva.initMessages();
}
hyva.activateScripts = (contentNode) => {
// Extract all the script tags from the content.
// Script tags won't execute when inserted into a dom-element directly,
// therefore we need to inject them to the head of the document.
const tmpScripts = contentNode.getElementsByTagName('script');
if (tmpScripts.length > 0) {
// Push all script tags into an array
// (to prevent dom manipulation while iterating over dom nodes)
const scripts = [];
for (let i = 0; i < tmpScripts.length; i++) {
scripts.push(tmpScripts[i]);
}
// Iterate over all script tags and duplicate+inject each into the head
for (let i = 0; i < scripts.length; i++) {
let script = document.createElement('script');
script.innerHTML = scripts[i].innerHTML;
document.head.appendChild(script);
// Remove the original (non-executing) node from the content
scripts[i].parentNode.removeChild(scripts[i]);
}
}
return contentNode;
}
/**
* Return base64 encoded current URL that can be used by Magento to redirect the visitor back to the current page.
* The func hyva.getUenc handles additional encoding of +, / and = like \Magento\Framework\Url\Encoder::encode().
*/
const replace = {
['+']: '-',
['/']: '_',
['=']: ','
};
hyva.getUenc = () => btoa(window.location.href).replace(/[+/=]/g, match => replace[match]);
let currentTrap;
const focusableElements = (rootElement) => {
const selector = 'button, [href], input, select, textarea, details, [tabindex]:not([tabindex="-1"]';
return Array.from(rootElement.querySelectorAll(selector))
.filter(el => {
return el.style.display !== 'none' &&
!el.disabled &&
el.tabIndex !== -1 &&
(el.offsetWidth || el.offsetHeight || el.getClientRects().length)
})
}
const focusTrap = (e) => {
const isTabPressed = e.key === 'Tab' || e.keyCode === 9;
if (!isTabPressed) return;
const focusable = focusableElements(currentTrap)
const firstFocusableElement = focusable[0]
const lastFocusableElement = focusable[focusable.length - 1]
e.shiftKey ?
document.activeElement === firstFocusableElement && (lastFocusableElement.focus(), e.preventDefault()) :
document.activeElement === lastFocusableElement && (firstFocusableElement.focus(), e.preventDefault())
};
hyva.releaseFocus = (rootElement) => {
if (currentTrap && (!rootElement || rootElement === currentTrap)) {
currentTrap.removeEventListener('keydown', focusTrap)
currentTrap = null
}
}
hyva.trapFocus = (rootElement) => {
if (!rootElement) return;
hyva.releaseFocus()
currentTrap = rootElement
rootElement.addEventListener('keydown', focusTrap)
const firstElement = focusableElements(rootElement)[0]
firstElement && firstElement.focus()
}
hyva.alpineInitialized = (fn) => window.addEventListener('alpine:initialized', fn, {
once: true
})
window.addEventListener('alpine:initialized', () => {
console.log('Alpine.js initialized')
})
window.addEventListener('user-allowed-save-cookie', () => internalCookie.saveTempStorageCookies())
}(window.hyva = window.hyva || {}));
</script>
<header class="sticky top-0 left-0 right-0 z-40">
<header class="flex justify-evenly w-full h-10 py-1 bg-brand-200 text-amber-50 items-center">
<div class="hidden lg:flex lg:gap-2 ">
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class=" btn-icons btn btn-topheader btn-size-sm btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M3.42322 11.3023H7.59855C7.73678 8.49302 8.7069 5.79564 10.3734 3.54887C6.6214 4.26671 3.73464 7.42122 3.42322 11.3023ZM12 3.74171C10.2029 5.86705 9.14755 8.52214 8.99577 11.3023H15.0042C14.8525 8.52214 13.7971 5.86705 12 3.74171ZM15.0042 12.6977H8.99577C9.14755 15.4779 10.2029 18.133 12 20.2583C13.7971 18.133 14.8525 15.4779 15.0042 12.6977ZM10.3734 20.4511C8.7069 18.2044 7.73678 15.507 7.59855 12.6977H3.42322C3.73464 16.5788 6.6214 19.7333 10.3734 20.4511ZM13.6266 20.4511C17.3786 19.7333 20.2654 16.5788 20.5768 12.6977H16.4015C16.2632 15.507 15.2931 18.2044 13.6266 20.4511ZM20.5768 11.3023C20.2654 7.42122 17.3786 4.26671 13.6266 3.54887C15.2931 5.79564 16.2632 8.49302 16.4015 11.3023H20.5768ZM2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12Z" fill="currentColor" />
</svg>
France - FR
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Button item -->
<button type="button" class="dropdown-item ">
Espagne - ES
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Belgique - FR
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Belgique - NL
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Suisse - FR
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Maroc - FR
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
Portugal - PT
</button>
</div>
</div>
<button type="button" class=" btn btn-topheader btn-size-sm btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9 3.75H15C15.1381 3.75 15.25 3.86193 15.25 4V4.25H8.75V4C8.75 3.86193 8.86193 3.75 9 3.75ZM7.25 4V4.25H3C2.0335 4.25 1.25 5.0335 1.25 6V11.1802C1.25 11.8683 1.65061 12.4775 2.25 12.7616V19C2.25 19.9665 3.0335 20.75 4 20.75H20C20.9665 20.75 21.75 19.9665 21.75 19V12.7616C22.3494 12.4775 22.75 11.8683 22.75 11.1802V6C22.75 5.0335 21.9665 4.25 21 4.25H16.75V4C16.75 3.0335 15.9665 2.25 15 2.25H9C8.0335 2.25 7.25 3.0335 7.25 4ZM3 5.75H8H16H21C21.1381 5.75 21.25 5.86193 21.25 6V11.1802C21.25 11.2994 21.1659 11.402 21.049 11.4253L20.25 11.5851L13 12.8285V12.5C13 11.9477 12.5523 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5V12.8285L3.75 11.5851L2.95097 11.4253C2.83411 11.402 2.75 11.2994 2.75 11.1802V6C2.75 5.86193 2.86193 5.75 3 5.75ZM11 14.3321V15C11 15.5523 11.4477 16 12 16C12.5523 16 13 15.5523 13 15V14.3321L20.25 13.1149V19C20.25 19.1381 20.1381 19.25 20 19.25H4C3.86193 19.25 3.75 19.1381 3.75 19V13.1149L11 14.3321Z" fill="currentColor" />
</svg>
Nous Rejoindre
</button>
</div>
<div class="info-carousel flex items-center gap-6">
<button type="button" class=" btn btn-topheader btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M9.46967 12.5303C9.17678 12.2374 9.17678 11.7626 9.46967 11.4697L13.4697 7.46967C13.7626 7.17678 14.2374 7.17678 14.5303 7.46967C14.8232 7.76256 14.8232 8.23744 14.5303 8.53033L11.0607 12L14.5303 15.4697C14.8232 15.7626 14.8232 16.2374 14.5303 16.5303C14.2374 16.8232 13.7626 16.8232 13.4697 16.5303L9.46967 12.5303Z" fill="currentColor" />
</svg>
</button>
<div class="text-black text-xs font-medium text-center">Livraison offerte à partir de XX€ d’achat</div>
<button type="button" class=" btn btn-topheader btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M14.5303 11.4697C14.8232 11.7626 14.8232 12.2374 14.5303 12.5303L10.5303 16.5303C10.2374 16.8232 9.76256 16.8232 9.46967 16.5303C9.17678 16.2374 9.17678 15.7626 9.46967 15.4697L12.9393 12L9.46967 8.53033C9.17678 8.23744 9.17678 7.76256 9.46967 7.46967C9.76256 7.17678 10.2374 7.17678 10.5303 7.46967L14.5303 11.4697Z" fill="currentColor" />
</svg>
</button>
</div>
<div class="hidden lg:flex lg:gap-2">
<button type="button" class=" btn btn-topheader btn-size-sm btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 2.75C6.89137 2.75 2.75 6.89137 2.75 12C2.75 17.1086 6.89137 21.25 12 21.25C17.1086 21.25 21.25 17.1086 21.25 12C21.25 6.89137 17.1086 2.75 12 2.75ZM1.25 12C1.25 6.06294 6.06294 1.25 12 1.25C17.9371 1.25 22.75 6.06294 22.75 12C22.75 17.9371 17.9371 22.75 12 22.75C6.06294 22.75 1.25 17.9371 1.25 12ZM12.3004 7.77791C11.7767 7.68808 11.2381 7.78649 10.78 8.05572C10.3219 8.32495 9.97383 8.74762 9.7975 9.24887C9.66004 9.63961 9.23186 9.84494 8.84111 9.70749C8.45037 9.57004 8.24504 9.14185 8.3825 8.75111C8.67638 7.91569 9.25644 7.21124 10.0199 6.76252C10.7834 6.31381 11.6811 6.14978 12.554 6.2995C13.4268 6.44921 14.2185 6.90301 14.7888 7.58052C15.359 8.25785 15.6712 9.11509 15.67 10.0005C15.6698 11.3983 14.6312 12.3439 13.836 12.874C13.4155 13.1543 13.0004 13.3614 12.6933 13.4978C12.5182 13.5757 12.3405 13.6479 12.1594 13.7108L12.1581 13.7112C11.7651 13.8422 11.3395 13.6301 11.2085 13.2372C11.0776 12.8446 11.2895 12.4203 11.6817 12.2889L11.6846 12.2879C11.8201 12.2404 11.953 12.1854 12.0841 12.1271C12.3396 12.0136 12.6744 11.8456 13.004 11.626C13.7087 11.1562 14.17 10.6018 14.17 9.99999V9.99887C14.1708 9.46751 13.9835 8.95302 13.6413 8.54652C13.2991 8.14002 12.8241 7.86774 12.3004 7.77791ZM12 16.25C11.5858 16.25 11.25 16.5858 11.25 17C11.25 17.4142 11.5858 17.75 12 17.75H12.01C12.4242 17.75 12.76 17.4142 12.76 17C12.76 16.5858 12.4242 16.25 12.01 16.25H12Z" fill="currentColor" />
</svg>
Besoin d'aide
</button>
<div class="dropdown dropdown-size-sm" x-data="{show:false}">
<button type="button" x-ref="dropdownButton" @click="show = ! show" class=" btn-icons btn btn-dark btn-size-sm btn-icons">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12 3.75C8.55638 3.75 5.75 6.53739 5.75 9.92308C5.75 12.7655 7.35594 15.361 9.06325 17.3029C9.9074 18.263 10.7535 19.0373 11.3889 19.5713C11.6267 19.7713 11.8342 19.9369 12 20.0653C12.1658 19.9369 12.3733 19.7713 12.6111 19.5713C13.2465 19.0373 14.0926 18.263 14.9367 17.3029C16.6441 15.361 18.25 12.7655 18.25 9.92308C18.25 6.53739 15.4436 3.75 12 3.75ZM12 21C11.5731 21.6166 11.5729 21.6165 11.5726 21.6163L11.5704 21.6147L11.5651 21.6111L11.5471 21.5984C11.5318 21.5876 11.5101 21.5722 11.4824 21.5521C11.4269 21.5121 11.3473 21.4537 11.247 21.3779C11.0464 21.2263 10.7628 21.0046 10.4236 20.7195C9.74646 20.1502 8.8426 19.3236 7.93675 18.2933C6.14406 16.2544 4.25 13.3114 4.25 9.92308C4.25 5.69338 7.74362 2.25 12 2.25C16.2564 2.25 19.75 5.69338 19.75 9.92308C19.75 13.3114 17.8559 16.2544 16.0633 18.2933C15.1574 19.3236 14.2535 20.1502 13.5764 20.7195C13.2372 21.0046 12.9536 21.2263 12.753 21.3779C12.6527 21.4537 12.5731 21.5121 12.5176 21.5521C12.4899 21.5722 12.4682 21.5876 12.4529 21.5984L12.4349 21.6111L12.4296 21.6147L12.428 21.6159C12.4277 21.6161 12.4269 21.6166 12 21ZM12 21L12.4269 21.6166L12 21.9122L11.5726 21.6163L12 21ZM12 7.75C10.7574 7.75 9.75 8.75736 9.75 10C9.75 11.2426 10.7574 12.25 12 12.25C13.2426 12.25 14.25 11.2426 14.25 10C14.25 8.75736 13.2426 7.75 12 7.75ZM8.25 10C8.25 7.92893 9.92893 6.25 12 6.25C14.0711 6.25 15.75 7.92893 15.75 10C15.75 12.0711 14.0711 13.75 12 13.75C9.92893 13.75 8.25 12.0711 8.25 10Z" fill="currentColor" />
</svg>
Trouver un magasin
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M12.5303 14.5303C12.2374 14.8232 11.7626 14.8232 11.4697 14.5303L7.46967 10.5303C7.17678 10.2374 7.17678 9.76256 7.46967 9.46967C7.76256 9.17678 8.23744 9.17678 8.53033 9.46967L12 12.9393L15.4697 9.46967C15.7626 9.17678 16.2374 9.17678 16.5303 9.46967C16.8232 9.76256 16.8232 10.2374 16.5303 10.5303L12.5303 14.5303Z" fill="currentColor" />
</svg>
</button>
<div class="dropdown-content" x-show="show" x-anchor.bottom-start.offset.8="$refs.dropdownButton" x-transition.opacity x-transition:enter.duration.200ms x-cloak @click.outside="show = false">
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.67774 7.32342C6.0043 6.72211 6.28536 6.3513 6.6046 6.11834C6.90864 5.89648 7.31712 5.75 8 5.75C8.41421 5.75 8.75 5.41421 8.75 5C8.75 4.58579 8.41421 4.25 8 4.25C7.08288 4.25 6.34136 4.45352 5.7204 4.90666C5.12029 5.34457 4.70564 5.96472 4.33965 6.64443C4.32789 6.66625 4.31723 6.68865 4.30769 6.71154L1.80769 12.7115C1.78949 12.7552 1.77573 12.7996 1.7662 12.8443C1.43614 13.4912 1.25 14.2239 1.25 15C1.25 17.6234 3.37665 19.75 6 19.75C8.62335 19.75 10.75 17.6234 10.75 15C10.75 14.6685 10.8817 14.3505 11.1161 14.1161C11.3505 13.8817 11.6685 13.75 12 13.75C12.3315 13.75 12.6495 13.8817 12.8839 14.1161C13.1183 14.3505 13.25 14.6685 13.25 15C13.25 17.6234 15.3766 19.75 18 19.75C20.6234 19.75 22.75 17.6234 22.75 15C22.75 14.2239 22.5639 13.4912 22.2338 12.8443C22.2243 12.7996 22.2105 12.7552 22.1923 12.7115L19.6923 6.71154C19.6828 6.68865 19.6721 6.66625 19.6604 6.64443C19.2846 5.94667 18.8429 5.33349 18.2344 4.90111C17.6103 4.45767 16.876 4.25 16 4.25C15.5858 4.25 15.25 4.58579 15.25 5C15.25 5.41421 15.5858 5.75 16 5.75C16.624 5.75 17.0397 5.89233 17.3656 6.12389C17.701 6.36219 18.0044 6.7396 18.3223 7.32359L19.667 10.5507C19.1483 10.3563 18.5866 10.25 18 10.25C16.1393 10.25 14.5285 11.3199 13.7492 12.878C13.2588 12.4737 12.6409 12.25 12 12.25C11.3591 12.25 10.7412 12.4737 10.2508 12.878C9.47149 11.3199 7.86069 10.25 6 10.25C5.41344 10.25 4.85171 10.3563 4.33303 10.5507L5.67774 7.32342ZM6 11.75C7.79493 11.75 9.25 13.2051 9.25 15C9.25 16.7949 7.79493 18.25 6 18.25C4.20507 18.25 2.75 16.7949 2.75 15C2.75 13.2051 4.20507 11.75 6 11.75ZM14.75 15C14.75 13.2051 16.2051 11.75 18 11.75C19.7949 11.75 21.25 13.2051 21.25 15C21.25 16.7949 19.7949 18.25 18 18.25C16.2051 18.25 14.75 16.7949 14.75 15Z" fill="currentColor" />
</svg>
Trouver un opticien
</button>
<!-- Button item -->
<button type="button" class="dropdown-item ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.07434 4.96199C9.11549 3.95889 10.5276 3.39535 12 3.39535C13.4724 3.39535 14.8845 3.95889 15.9257 4.96199C16.9668 5.96509 17.5517 7.32559 17.5517 8.74419C17.5517 10.0124 17.2258 10.931 16.7554 11.6611C16.2761 12.4051 15.6269 12.9861 14.9157 13.5571C14.7838 13.663 14.6473 13.7702 14.5086 13.8792C13.9321 14.3322 13.3179 14.8148 12.8381 15.3541C12.2106 16.0595 11.7586 16.9124 11.7586 18.0465C11.7586 18.3825 11.6899 18.7151 11.5565 19.0255C11.4231 19.3358 11.2275 19.6178 10.9809 19.8554C10.7344 20.0929 10.4417 20.2814 10.1195 20.4099C9.7974 20.5385 9.45213 20.6047 9.10345 20.6047C8.75477 20.6047 8.4095 20.5385 8.08736 20.4099C7.76522 20.2814 7.47251 20.0929 7.22596 19.8554C6.9794 19.6178 6.78382 19.3358 6.65039 19.0255C6.51695 18.7151 6.44828 18.3825 6.44828 18.0465C6.44828 17.6612 6.12407 17.3488 5.72414 17.3488C5.32421 17.3488 5 17.6612 5 18.0465C5 18.5657 5.10614 19.0798 5.31236 19.5594C5.51857 20.0391 5.82083 20.4749 6.20187 20.8421C6.58291 21.2092 7.03527 21.5004 7.53313 21.6991C8.03098 21.8977 8.56457 22 9.10345 22C9.64232 22 10.1759 21.8977 10.6738 21.6991C11.1716 21.5004 11.624 21.2092 12.005 20.8421C12.3861 20.4749 12.6883 20.0391 12.8945 19.5594C13.1008 19.0798 13.2069 18.5657 13.2069 18.0465C13.2069 17.3201 13.4791 16.7778 13.9377 16.2622C14.3252 15.8267 14.8093 15.4454 15.3735 15.0011C15.5243 14.8823 15.681 14.759 15.8429 14.629C16.58 14.0371 17.379 13.3391 17.9859 12.397C18.6018 11.4411 19 10.2666 19 8.74419C19 6.95552 18.2625 5.24011 16.9497 3.97533C15.637 2.71055 13.8565 2 12 2C10.1435 2 8.36301 2.71055 7.05025 3.97533C5.7375 5.24011 5 6.95552 5 8.74419C5 9.1295 5.32421 9.44186 5.72414 9.44186C6.12407 9.44186 6.44828 9.1295 6.44828 8.74419C6.44828 7.32559 7.03319 5.96509 8.07434 4.96199ZM12 5.72093C11.1678 5.72093 10.3696 6.03945 9.78115 6.60642C9.19267 7.17339 8.86207 7.94237 8.86207 8.74419V9.67442C8.86207 10.0597 9.18628 10.3721 9.58621 10.3721C9.9063 10.3721 10.2133 10.4946 10.4396 10.7127C10.6659 10.9307 10.7931 11.2265 10.7931 11.5349C10.7931 11.8433 10.6659 12.139 10.4396 12.3571C10.2133 12.5752 9.9063 12.6977 9.58621 12.6977C9.18628 12.6977 8.86207 13.01 8.86207 13.3953C8.86207 13.7807 9.18628 14.093 9.58621 14.093C10.2904 14.093 10.9658 13.8235 11.4637 13.3438C11.9616 12.864 12.2414 12.2133 12.2414 11.5349C12.2414 10.8564 11.9616 10.2058 11.4637 9.72601C11.1405 9.41458 10.7425 9.19174 10.3103 9.07371V8.74419C10.3103 8.31244 10.4884 7.89837 10.8052 7.59308C11.1221 7.28779 11.5519 7.11628 12 7.11628C12.4481 7.11628 12.8779 7.28779 13.1948 7.59308C13.5116 7.89837 13.6897 8.31244 13.6897 8.74419C13.6897 9.1295 14.0139 9.44186 14.4138 9.44186C14.8137 9.44186 15.1379 9.1295 15.1379 8.74419C15.1379 7.94237 14.8073 7.17339 14.2189 6.60642C13.6304 6.03945 12.8322 5.72093 12 5.72093Z" fill="currentColor" />
</svg>
Trouver un acousticien
</button>
</div>
</div>
</div>
</header>
<div class="flex bg-white relative pt-3">
<div class="container flex py-0 justify-between">
<div class="flex items-center gap-4">
<span class="w-4/5 lg:w-auto lg:py-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 class="hidden lg:h-full lg:flex">
<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>
</span>
</div>
<div class="flex items-center gap-2">
<div x-data="{ openMainSearch: false }" @click="openMainSearch" class="flex items-center lg:bg-gray-100 lg:hover:bg-gray-200 rounded-full px-2 lg:px-6 py-2 cursor-pointer">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M11 3.75C6.99594 3.75 3.75 6.99594 3.75 11C3.75 15.0041 6.99594 18.25 11 18.25C15.0041 18.25 18.25 15.0041 18.25 11C18.25 6.99594 15.0041 3.75 11 3.75ZM2.25 11C2.25 6.16751 6.16751 2.25 11 2.25C15.8325 2.25 19.75 6.16751 19.75 11C19.75 13.1462 18.9773 15.112 17.6949 16.6342L21.5303 20.4697C21.8232 20.7626 21.8232 21.2374 21.5303 21.5303C21.2374 21.8232 20.7626 21.8232 20.4697 21.5303L16.6342 17.6949C15.112 18.9773 13.1462 19.75 11 19.75C6.16751 19.75 2.25 15.8325 2.25 11Z" fill="currentColor" />
</svg>
<span class="hidden lg:flex bg-transparent w-full focus:outline-none ml-2 border-0 p-0">
Rechercher un modèle, une marque, ...
</span>
</div>
<span class="hidden lg:flex p-2 cursor-pointer rounded-full hover:bg-gray-200"><svg class=" shrink-0" width="24" 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>
</span>
<span class="p-2 cursor-pointer rounded-full hover:bg-gray-200"><svg class=" shrink-0" width="24" 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>
<span class="p-2 cursor-pointer rounded-full hover:bg-gray-200"><svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.4 1.55C5.54164 1.36115 5.76393 1.25 6 1.25H18C18.2361 1.25 18.4584 1.36115 18.6 1.55L21.6 5.55C21.6974 5.67982 21.75 5.83772 21.75 6V20C21.75 20.7293 21.4603 21.4288 20.9445 21.9445C20.4288 22.4603 19.7293 22.75 19 22.75H5C4.27065 22.75 3.57118 22.4603 3.05546 21.9445C2.53973 21.4288 2.25 20.7293 2.25 20V6C2.25 5.83772 2.30263 5.67982 2.4 5.55L5.4 1.55ZM6.375 2.75L4.5 5.25H19.5L17.625 2.75H6.375ZM20.25 6.75H3.75V20C3.75 20.3315 3.8817 20.6495 4.11612 20.8839C4.35054 21.1183 4.66848 21.25 5 21.25H19C19.3315 21.25 19.6495 21.1183 19.8839 20.8839C20.1183 20.6495 20.25 20.3315 20.25 20V6.75ZM8 9.25C8.41421 9.25 8.75 9.58579 8.75 10C8.75 10.862 9.09241 11.6886 9.7019 12.2981C10.3114 12.9076 11.138 13.25 12 13.25C12.862 13.25 13.6886 12.9076 14.2981 12.2981C14.9076 11.6886 15.25 10.862 15.25 10C15.25 9.58579 15.5858 9.25 16 9.25C16.4142 9.25 16.75 9.58579 16.75 10C16.75 11.2598 16.2496 12.468 15.3588 13.3588C14.468 14.2496 13.2598 14.75 12 14.75C10.7402 14.75 9.53204 14.2496 8.64124 13.3588C7.75044 12.468 7.25 11.2598 7.25 10C7.25 9.58579 7.58579 9.25 8 9.25Z" fill="currentColor" />
</svg>
</span>
<span class="flex lg:hidden">
<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>
</span>
</div>
</div>
</div>
</header>
<main class="">
</main>
<footer class="bg-neutral-900">
<div class="bg-neutral-150 py-10 md:py-16">
<div class="container flex justify-center items-center gap-6 md:gap-10 flex-wrap">
<div class="flex items-center text-neutral-800 font-medium gap-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.1615L21.75 7.0365V16.9635L12 21.8385L2.25 16.9635V7.0365L7.65678 4.33311C7.66162 4.33062 7.66648 4.32819 7.67137 4.32582L12 2.1615ZM8 5.83855L4.67705 7.50002L12 11.1615L15.3229 9.50002L8 5.83855ZM17 8.6615L19.3229 7.50002L12 3.83855L9.67705 5.00002L17 8.6615ZM16.25 10.7135L12.75 12.4635V19.7865L20.25 16.0365V8.71355L17.75 9.96355V13C17.75 13.4142 17.4142 13.75 17 13.75C16.5858 13.75 16.25 13.4142 16.25 13V10.7135ZM11.25 12.4635L3.75 8.71355V16.0365L11.25 19.7865V12.4635Z" fill="currentColor" />
</svg>
Livraison et retour offerts en magasin
</div>
<div class="flex items-center text-neutral-800 font-medium gap-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="M0.25 6C0.25 5.58579 0.585786 5.25 1 5.25H15C15.4142 5.25 15.75 5.58579 15.75 6V9.25H18.5C18.7115 9.25 18.9133 9.33934 19.0554 9.49601L22.5554 13.3532C22.6806 13.4911 22.75 13.6708 22.75 13.8571V18C22.75 18.4142 22.4143 18.7499 22.0001 18.75L20.7362 18.7502C20.6118 19.8751 19.6581 20.75 18.5 20.75C17.3419 20.75 16.3882 19.8751 16.2638 18.7502L8.73624 18.7503C8.61176 19.8751 7.65805 20.75 6.5 20.75C5.34189 20.75 4.38813 19.875 4.26374 18.7501L3.9998 18.75C3.58558 18.7499 3.24989 18.414 3.25 17.9998C3.25011 17.5856 3.58599 17.2499 4.0002 17.25L4.62877 17.2502C4.85472 16.9126 5.16962 16.6395 5.53993 16.4645C5.76527 16.3581 6.01113 16.2879 6.26995 16.2616C6.34559 16.2539 6.42234 16.25 6.5 16.25C6.59344 16.25 6.68554 16.2557 6.77596 16.2667C7.01806 16.2963 7.24817 16.3644 7.46007 16.4645C7.83042 16.6395 8.14534 16.9126 8.3713 17.2503L14.25 17.25V6.75H1C0.585786 6.75 0.25 6.41421 0.25 6ZM15.75 17.2501L16.6287 17.2502C16.8315 16.9473 17.1058 16.6963 17.4275 16.5216C17.5341 16.4637 17.6458 16.4142 17.7618 16.3739C17.8542 16.3418 17.9492 16.3156 18.0465 16.2957C18.193 16.2657 18.3447 16.25 18.5 16.25C18.8417 16.25 19.1654 16.3261 19.4553 16.4623C19.8277 16.6371 20.1443 16.9111 20.3713 17.2502L21.25 17.2501V14.1467L18.1678 10.75H15.75V17.2501ZM1.25 9C1.25 8.58579 1.58579 8.25 2 8.25H4.5C4.91421 8.25 5.25 8.58579 5.25 9C5.25 9.41421 4.91421 9.75 4.5 9.75H2C1.58579 9.75 1.25 9.41421 1.25 9ZM2.25 12C2.25 11.5858 2.58579 11.25 3 11.25H4.5C4.91421 11.25 5.25 11.5858 5.25 12C5.25 12.4142 4.91421 12.75 4.5 12.75H3C2.58579 12.75 2.25 12.4142 2.25 12ZM3.25 15C3.25 14.5858 3.58579 14.25 4 14.25H4.5C4.91421 14.25 5.25 14.5858 5.25 15C5.25 15.4142 4.91421 15.75 4.5 15.75H4C3.58579 15.75 3.25 15.4142 3.25 15ZM5.75025 18.4806C5.75008 18.4871 5.75 18.4935 5.75 18.5C5.75 18.9142 6.08579 19.25 6.5 19.25C6.91421 19.25 7.25 18.9142 7.25 18.5C7.25 18.4917 7.24987 18.4834 7.2496 18.4751C7.24016 18.1855 7.06647 17.9373 6.81865 17.8209C6.73911 17.7835 6.65203 17.7597 6.56044 17.7524C6.5405 17.7508 6.52034 17.75 6.5 17.75C6.38626 17.75 6.27821 17.7754 6.18135 17.8209C5.93196 17.9381 5.75764 18.1886 5.75025 18.4806ZM17.7502 18.4806C17.7501 18.4871 17.75 18.4935 17.75 18.5C17.75 18.9142 18.0858 19.25 18.5 19.25C18.9142 19.25 19.25 18.9142 19.25 18.5C19.25 18.488 19.2497 18.4761 19.2492 18.4643C19.2362 18.1875 19.0732 17.95 18.8397 17.8311C18.8094 17.8157 18.7779 17.8024 18.7455 17.7911C18.705 17.7771 18.6629 17.7664 18.6196 17.7595C18.5806 17.7532 18.5407 17.75 18.5 17.75C18.3863 17.75 18.2782 17.7754 18.1814 17.8209C17.932 17.9381 17.7576 18.1886 17.7502 18.4806Z" fill="currentColor" />
</svg>
Expédition sous 24/48h
</div>
<div class="flex items-center text-neutral-800 font-medium gap-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.75 7V11H15.25V7C15.25 5.20507 13.7949 3.75 12 3.75C10.2051 3.75 8.75 5.20507 8.75 7ZM7.25 11V7C7.25 4.37665 9.37665 2.25 12 2.25C14.6234 2.25 16.75 4.37665 16.75 7V11H17.5C18.6046 11 19.5 11.8954 19.5 13V20C19.5 21.1046 18.6046 22 17.5 22H6.5C5.39543 22 4.5 21.1046 4.5 20V13C4.5 11.8954 5.39543 11 6.5 11H7.25ZM18 13C18 12.7239 17.7761 12.5 17.5 12.5H6.5C6.22386 12.5 6 12.7239 6 13V20C6 20.2761 6.22386 20.5 6.5 20.5H17.5C17.7761 20.5 18 20.2761 18 20V13ZM12 17.5C11.4477 17.5 11 17.0523 11 16.5C11 15.9477 11.4477 15.5 12 15.5C12.5523 15.5 13 15.9477 13 16.5C13 17.0523 12.5523 17.5 12 17.5Z" fill="currentColor" />
</svg>
Paiement 100% sécurisé
</div>
<div class="flex items-center text-neutral-800 font-medium gap-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>
<span>Service client gratuit au <a href="tel:0 800 34 34 34">0 800 34 34 34</a></span>
</div>
</div>
</div>
<div class="container">
<div class="flex justify-between lg:items-center flex-col lg:flex-row py-10 md:py-16 border-b border-b-neutral-600 gap-10">
<div>
<h2 class="text-light-white font-semibold text-lg mb-6">Suivez-nous sur les réseaux !</h2>
<div class="flex items-center gap-4 flex-wrap">
<a href="https://www.instagram.com/afflelou/" target="_blank" rel="noopenner noreferer" class=" 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="M19.952 15.2983C19.8206 18.2069 18.2011 19.8183 15.2994 19.952C14.4457 19.9909 14.1726 20 12 20C9.82743 20 9.55543 19.9909 8.70171 19.952C5.79429 19.8183 4.18171 18.2046 4.048 15.2983C4.00914 14.4457 4 14.1726 4 12C4 9.82743 4.00914 9.55543 4.048 8.70171C4.18171 5.79429 5.79543 4.18171 8.70171 4.04914C9.55543 4.00914 9.82743 4 12 4C14.1726 4 14.4457 4.00914 15.2994 4.04914C18.208 4.18286 19.8217 5.8 19.952 8.70171C19.9909 9.55543 20 9.82743 20 12C20 14.1726 19.9909 14.4457 19.952 15.2983ZM15.2331 5.488C14.3897 5.44914 14.136 5.44229 12 5.44229C9.864 5.44229 9.61143 5.45029 8.768 5.488C6.59771 5.58743 5.58743 6.61486 5.488 8.768C5.45029 9.61143 5.44114 9.864 5.44114 12C5.44114 14.136 5.45029 14.3886 5.488 15.2331C5.58743 17.3806 6.59314 18.4137 8.768 18.5131C9.61029 18.5509 9.864 18.56 12 18.56C14.1371 18.56 14.3897 18.552 15.2331 18.5131C17.4034 18.4149 18.4126 17.384 18.5131 15.2331C18.5509 14.3897 18.5589 14.136 18.5589 12C18.5589 9.864 18.5509 9.61143 18.5131 8.768C18.4126 6.616 17.4011 5.58743 15.2331 5.488ZM15.3108 7.73029C15.3108 8.26057 15.7405 8.69029 16.2708 8.69029C16.801 8.69029 17.2308 8.25943 17.2308 7.73029C17.2308 7.2 16.801 6.77029 16.2708 6.77029C15.7405 6.77029 15.3108 7.2 15.3108 7.73029ZM7.89136 12C7.89136 14.2697 9.73136 16.1086 11.9999 16.1086C14.2685 16.1086 16.1085 14.2686 16.1085 12C16.1085 9.73144 14.2685 7.89258 11.9999 7.89258C9.73136 7.89258 7.89136 9.73144 7.89136 12ZM11.9999 14.6663C10.5279 14.6663 9.33367 13.4731 9.33367 12C9.33367 10.5269 10.5279 9.33372 11.9999 9.33372C13.4719 9.33372 14.6662 10.5269 14.6662 12C14.6662 13.4731 13.4719 14.6663 11.9999 14.6663Z" fill="currentColor" />
</svg>
Instagram
</a>
<a href="https://www.tiktok.com/@afflelou" target="_blank" rel="noopenner noreferer" class=" 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="M17.6101 6.52749C16.6216 5.8832 15.9088 4.85187 15.686 3.65027C15.6382 3.39072 15.6115 3.12334 15.6115 2.84998H12.4572L12.4522 15.4909C12.3992 16.9065 11.234 18.0428 9.80597 18.0428C9.36187 18.0428 8.944 17.9319 8.57583 17.7381C7.73181 17.294 7.15426 16.4095 7.15426 15.3915C7.15426 13.9294 8.34389 12.7398 9.8055 12.7398C10.0784 12.7398 10.3403 12.7849 10.5879 12.8622V9.64216C10.3315 9.60719 10.071 9.58556 9.8055 9.58556C6.60431 9.58556 4 12.1899 4 15.3915C4 17.3557 4.98116 19.0939 6.47867 20.145C7.42164 20.8072 8.56893 21.197 9.80597 21.197C13.0072 21.197 15.6115 18.5927 15.6115 15.3915V8.98131C16.8485 9.86904 18.3644 10.3923 20 10.3923V7.23804C19.1192 7.23804 18.2986 6.97619 17.6101 6.52749Z" fill="currentColor" />
</svg>
TikTok
</a>
<a href="https://x.com/Afflelou" target="_blank" rel="noopenner noreferer" class=" 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="M13.5222 10.9238L19.4785 4H18.0671L12.8952 10.0118L8.76437 4H4L10.2466 13.0909L4 20.3516H5.41155L10.8732 14.0029L15.2356 20.3516H20L13.5222 10.9238ZM11.5889 13.171L10.956 12.2658L5.92015 5.06259H8.0882L12.1522 10.8758L12.7851 11.7811L18.0677 19.3373H15.8997L11.5889 13.171Z" fill="currentColor" />
</svg>
Twitter
</a>
<a href="https://www.facebook.com/alainafflelou" target="_blank" rel="noopenner noreferer" class=" 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="M22 12C22 6.476 17.524 2 12 2C6.476 2 2 6.476 2 12C2 16.688 5.228 20.624 9.584 21.704V15.056H7.52V12H9.584V10.684C9.584 7.28 11.124 5.704 14.464 5.704C15.096 5.704 16.192 5.828 16.636 5.952V8.72C16.4 8.696 15.992 8.684 15.48 8.684C13.84 8.684 13.208 9.304 13.208 10.92V12H16.476L15.916 15.056H13.212V21.928C18.164 21.328 22 17.112 22 12Z" fill="currentColor" />
</svg>
Facebook
</a>
</div>
</div>
<div class="lg:text-right">
<h2 class="text-light-white font-semibold text-lg mb-6">Changez de pays ou de langue</h2>
<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">
<!-- Link item -->
<a href="https://www.afflelou.com/" class="dropdown-item ">
France - FR
</a>
<!-- Link item -->
<a href="https://www.afflelou.es/" class="dropdown-item ">
Espagne - ES
</a>
<!-- Link item -->
<a href="https://www.afflelou.be/" class="dropdown-item ">
Belgique - FR
</a>
<!-- Link item -->
<a href="https://www.afflelou.be/nl-be" class="dropdown-item ">
Belgique - NL
</a>
<!-- Link item -->
<a href="https://www.afflelou.ch/" class="dropdown-item ">
Suisse - FR
</a>
<!-- Link item -->
<a href="https://www.afflelou.ma/" class="dropdown-item ">
Maroc - FR
</a>
<!-- Link item -->
<a href="https://www.afflelou.pt/" class="dropdown-item ">
Portugal - PT
</a>
</div>
</div>
</div>
</div>
</div>
<div class="container">
<div class="grid lg:grid-cols-2 border-b border-b-neutral-600 gap-x-4 py-10 md:py-16">
<div class="grid md:grid-cols-2 gap-x-4 gap-y-10 pb-10 md:pb-0">
<div class="inline-flex flex-col gap-6 text-light-white">
<h2 class="font-semibold">Aide et support</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center ">
<svg class=" shrink-0" width="24" 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>
<a href="#" class=" text-base link-light">
FAQ
</a>
</div>
<div class="inline-flex gap-2 items-center ml-8">
<a href="#" class=" text-base link-light">
Trouver un magasin
</a>
</div>
<div class="inline-flex gap-2 items-center ml-8">
<a href="#" class=" text-base link-light">
Suivre votre commande
</a>
</div>
<div class="inline-flex gap-2 items-center ml-8">
<a href="#" class=" text-base link-light">
Expédition et livraison
</a>
</div>
<div class="inline-flex gap-2 items-center ml-8">
<a href="#" class=" text-base link-light">
Retours
</a>
</div>
<div class="inline-flex gap-2 items-center ml-8">
<a href="#" class=" text-base link-light">
Paiement
</a>
</div>
</div>
</div>
<div class="inline-flex flex-col gap-6 text-light-white">
<h2 class="font-semibold">Service client</h2>
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center ">
<svg class=" shrink-0" width="24" 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.9496 4.00738C14.0848 3.5538 13.1124 3.3456 12.1377 3.40538C11.163 3.46516 10.2233 3.79063 9.42039 4.34649C9.1036 4.56583 8.66898 4.48682 8.44964 4.17002C8.23031 3.85322 8.30932 3.4186 8.62612 3.19927C9.63844 2.49839 10.8233 2.08802 12.0523 2.01265C13.2812 1.93728 14.5074 2.19978 15.5978 2.7717C16.6881 3.34361 17.6011 4.20311 18.2378 5.25701C18.8744 6.31091 19.2104 7.51899 19.2093 8.75025C19.2093 8.75004 19.2093 8.75046 19.2093 8.75025C19.2092 10.4071 18.7573 11.6419 18.0735 12.6413C17.8559 12.9593 17.4217 13.0407 17.1037 12.8231C16.7857 12.6055 16.7043 12.1713 16.9219 11.8533C17.4473 11.0854 17.814 10.125 17.814 8.74963C17.8148 7.7731 17.5484 6.81435 17.0434 5.9785C16.5385 5.14265 15.8144 4.46097 14.9496 4.00738ZM2.20434 2.20978C2.4768 1.93733 2.91855 1.93733 3.191 2.20978L7.236 6.25478C7.24313 6.26161 7.2501 6.26858 7.25691 6.27569L12.3144 11.3332C12.3222 11.3406 12.3298 11.3482 12.3372 11.356L15.3153 14.334C15.3189 14.3376 15.3225 14.3412 15.3261 14.3449L21.7957 20.8144C22.0681 21.0869 22.0681 21.5286 21.7957 21.8011C21.5232 22.0736 21.0815 22.0736 20.809 21.8011L14.7968 15.7889C14.0601 16.4747 13.6279 17.1173 13.6279 18.052C13.6279 18.5711 13.5256 19.0852 13.327 19.5649C13.1283 20.0445 12.8371 20.4804 12.47 20.8475C12.1028 21.2146 11.667 21.5058 11.1874 21.7045C10.7077 21.9032 10.1936 22.0054 9.67442 22.0054C9.15524 22.0054 8.64114 21.9032 8.16148 21.7045C7.68183 21.5058 7.246 21.2146 6.87888 20.8475C6.51176 20.4804 6.22055 20.0445 6.02187 19.5649C5.82319 19.0852 5.72093 18.5711 5.72093 18.052C5.72093 17.6666 6.03329 17.3543 6.4186 17.3543C6.80392 17.3543 7.11628 17.6666 7.11628 18.052C7.11628 18.3879 7.18245 18.7205 7.31101 19.0309C7.43957 19.3413 7.628 19.6233 7.86554 19.8608C8.10309 20.0984 8.38509 20.2868 8.69546 20.4154C9.00583 20.5439 9.33848 20.6101 9.67442 20.6101C10.0104 20.6101 10.343 20.5439 10.6534 20.4154C10.9637 20.2868 11.2458 20.0984 11.4833 19.8608C11.7208 19.6233 11.9093 19.3413 12.0378 19.0309C12.1664 18.7205 12.2326 18.3879 12.2326 18.052C12.2326 16.5784 12.9631 15.5965 13.8092 14.8013L11.9181 12.9102C11.7988 13.026 11.6681 13.1304 11.5273 13.2217C11.1144 13.4894 10.6331 13.6323 10.141 13.6333C9.75568 13.6341 9.44267 13.3224 9.44186 12.9371C9.44106 12.5518 9.75277 12.2388 10.1381 12.238C10.3618 12.2375 10.5805 12.1726 10.7682 12.0509C10.8265 12.0131 10.881 11.9704 10.9312 11.9233L7.15084 8.14294C7.12809 8.34222 7.11628 8.54464 7.11628 8.74963C7.11628 9.13494 6.80392 9.4473 6.4186 9.4473C6.03329 9.4473 5.72093 9.13494 5.72093 8.74963C5.72093 8.12706 5.80723 7.52533 5.96325 6.95535L2.20434 3.19645C1.93189 2.92399 1.93189 2.48224 2.20434 2.20978ZM11.7674 6.42404C11.7674 6.03873 12.0798 5.72637 12.4651 5.72637C13.2669 5.72637 14.0359 6.04489 14.6029 6.61186C15.1699 7.17883 15.4884 7.94781 15.4884 8.74963C15.4884 9.13494 15.176 9.4473 14.7907 9.4473C14.4054 9.4473 14.093 9.13494 14.093 8.74963C14.093 8.31788 13.9215 7.90381 13.6162 7.59852C13.3109 7.29323 12.8969 7.12172 12.4651 7.12172C12.0798 7.12172 11.7674 6.80936 11.7674 6.42404Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-light">
Sourds et malentendants
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.45003 9.5C4.45003 10.7252 4.85255 11.8614 5.54295 12.797C5.76865 13.1029 5.72984 13.5293 5.45261 13.7893L3.89565 15.25H7.21426H8.21072H12.1999C14.0842 15.25 15.7536 14.435 16.8587 13.1677C17.7297 12.168 18.25 10.8863 18.25 9.5C18.25 6.35589 15.5736 3.75 12.2 3.75H10.5C7.12645 3.75 4.45003 6.35589 4.45003 9.5ZM7.67403 16.75H2.00003C1.69232 16.75 1.41583 16.562 1.30263 16.2759C1.18942 15.9898 1.26247 15.6636 1.48688 15.453L3.96308 13.13C3.31982 12.0637 2.95003 10.8235 2.95003 9.5C2.95003 5.4644 6.36253 2.25 10.5 2.25H12.2C16.3375 2.25 19.75 5.4644 19.75 9.5C19.75 9.77136 19.7346 10.039 19.7046 10.3022C20.7251 11.4097 21.3499 12.8826 21.3499 14.5C21.3499 15.6085 21.0562 16.6503 20.542 17.5529L22.5204 19.46L23.8587 20.75H21.9999H13.5999C10.9048 20.75 8.59372 19.0955 7.67403 16.75ZM9.32741 16.75C10.1446 18.2347 11.7478 19.25 13.5999 19.25H20.1412L19.0587 18.2066L18.5915 17.7562L18.97 17.2291C19.5251 16.4562 19.8499 15.5159 19.8499 14.5C19.8499 13.652 19.6234 12.8555 19.2248 12.1653C18.874 13.0177 18.36 13.7892 17.721 14.4458C16.3385 15.8675 14.3701 16.75 12.1999 16.75H9.32741Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-light">
Live chat
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.55821 5.37143H19.4418C20.084 5.37143 20.6046 5.8831 20.6046 6.51429V7.05186L12.5877 12.0589L12.5861 12.0599C12.4103 12.1677 12.2073 12.2249 12 12.2249C11.7927 12.2249 11.5897 12.1677 11.4139 12.0599L11.4123 12.0589L3.39542 7.05186V6.51429C3.39542 5.8831 3.91602 5.37143 4.55821 5.37143ZM21.9999 7.417V6.51429C21.9999 5.12568 20.8546 4 19.4418 4H4.55821C3.1454 4 2.00009 5.12568 2.00009 6.51429V7.417C1.99997 7.42429 1.99997 7.43157 2.00009 7.43885V17.4857C2.00009 18.8743 3.1454 20 4.55821 20H19.4418C20.8546 20 21.9999 18.8743 21.9999 17.4857V7.43885C22 7.43157 22 7.42429 21.9999 7.417ZM20.6046 8.67676V17.4857C20.6046 18.1169 20.084 18.6286 19.4418 18.6286H4.55821C3.91602 18.6286 3.39542 18.1169 3.39542 17.4857V8.67676L10.6677 13.2188L10.6715 13.2211C11.0697 13.4663 11.5301 13.5964 12 13.5964C12.4699 13.5964 12.9303 13.4663 13.3285 13.2211L20.6046 8.67676Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-light">
E-mail au service client
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<svg class=" shrink-0" width="24" 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.15544 3.68525C7.94039 3.50031 7.66543 3.39987 7.3818 3.40266L7.3749 3.4027H4.57004C4.40787 3.40289 4.24752 3.43683 4.09918 3.50235C3.95075 3.56792 3.81759 3.66367 3.70819 3.78352C3.59879 3.90336 3.51554 4.04468 3.46375 4.19846C3.41248 4.35069 3.39314 4.51184 3.40692 4.67185C3.70295 7.45044 4.64886 10.1204 6.16815 12.4656L6.1715 12.4708C7.55193 14.6432 9.39372 16.485 11.5661 17.8654L11.5716 17.8689C13.906 19.3828 16.5626 20.3284 19.3284 20.6301C19.4887 20.6438 19.6501 20.6242 19.8024 20.5727C19.9566 20.5206 20.0982 20.4368 20.2182 20.3268C20.3381 20.2167 20.4337 20.0829 20.4989 19.9337C20.5641 19.7846 20.5975 19.6235 20.5968 19.4607V19.4579V16.6527C20.5968 16.6469 20.5969 16.6411 20.597 16.6353C20.6041 16.3487 20.5057 16.0694 20.3203 15.8507C20.1356 15.6326 19.8774 15.4899 19.5946 15.4493C18.6456 15.3239 17.7139 15.0916 16.8171 14.757L16.8155 14.7564C16.6063 14.6777 16.379 14.6607 16.1604 14.7073C15.9424 14.7538 15.7423 14.8617 15.5836 15.0182L15.5824 15.0194L14.3976 16.2041C14.1744 16.4274 13.8295 16.4739 13.5551 16.3179C11.1043 14.9244 9.07516 12.8952 7.68163 10.4445C7.52558 10.17 7.57214 9.82515 7.79538 9.60192L8.98137 8.41592C9.13784 8.25722 9.24569 8.05708 9.29218 7.8391C9.33879 7.62054 9.32177 7.39321 9.24314 7.18403L9.24255 7.18245C8.90791 6.28567 8.67567 5.35396 8.55024 4.40505C8.51001 4.1253 8.36977 3.86957 8.15544 3.68525ZM7.37172 2.00009C7.99438 1.99486 8.59782 2.21575 9.06999 2.62181C9.5431 3.02869 9.85212 3.59371 9.93945 4.21157L9.94036 4.21801C10.0518 5.06331 10.2586 5.89328 10.5566 6.69209L10.5561 6.69051C10.729 7.1507 10.7665 7.65083 10.6639 8.13165C10.5614 8.61247 10.3232 9.05381 9.97748 9.40339L9.97472 9.40618L9.17237 10.2085C10.3338 12.0846 11.9149 13.6657 13.791 14.8271L14.5961 14.022C14.9457 13.6763 15.387 13.4381 15.8679 13.3356C16.3484 13.2331 16.8481 13.2704 17.3081 13.4431C18.1067 13.7411 18.9364 13.9477 19.7815 14.0592L19.7878 14.06C20.4123 14.1481 20.9827 14.4627 21.3905 14.944C21.7962 15.4228 22.0127 16.0334 21.9994 16.6607V19.4564C22.0007 19.814 21.9273 20.168 21.7841 20.4956C21.6406 20.8237 21.4302 21.1182 21.1664 21.3603C20.9025 21.6024 20.591 21.7867 20.2518 21.9014C19.9126 22.0161 19.5532 22.0587 19.1965 22.0265L19.1839 22.0252C16.1986 21.7008 13.3309 20.681 10.8111 19.0475C8.467 17.5574 6.47942 15.5698 4.98932 13.2257C3.3501 10.6944 2.32997 7.81274 2.01151 4.81391L2.01044 4.80297C1.97831 4.44742 2.02056 4.08908 2.13451 3.75076C2.24846 3.41244 2.4316 3.10156 2.67228 2.8379C2.91296 2.57424 3.20591 2.36358 3.53246 2.21934C3.85902 2.07509 4.21203 2.00043 4.56903 2.00009H7.37172Z" fill="currentColor" />
</svg>
<a href="#" class=" text-base link-light">
0 800 34 34 34
</a>
</div>
<div class="ml-8">
<p class="text-xs font-medium mt-2 first:mt-0 text-neutral-300">Appel gratuit</p>
<p class="text-xs font-medium mt-2 first:mt-0 text-neutral-300">Du lundi au vendredi de 10h à 17h</p>
</div>
</div>
</div>
<div class="md:col-span-2">
<div class="flex gap-6 items-center text-light-white">
<svg xmlns="http://www.w3.org/2000/svg" width="102" height="109" viewBox="0 0 102 109" fill="none" class="">
<path d="M95.4674 78.9121L28.2133 103.391L0.702637 27.8105L76.2832 0.299805L100.762 67.5586C101.536 69.6824 101.468 72.0216 100.572 74.0969C99.6766 76.1721 98.0211 77.8262 95.9451 78.7201C95.7889 78.7871 95.6281 78.854 95.4674 78.9121Z" fill="#009EE3" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M0.702637 27.8096H81.154V108.243H9.20264C9.20264 108.243 7.76213 108.165 6.35477 107.618C4.69428 106.973 3.26725 105.841 2.26038 104.372C1.25352 102.902 0.713704 101.163 0.711567 99.3812C0.711567 75.3169 0.702637 51.799 0.702637 27.8096Z" fill="#E3000B" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M62.8796 11.1212L63.71 10.8176L63.8574 11.2328C63.8988 11.056 63.9832 10.8922 64.1032 10.7559C64.2231 10.6196 64.3749 10.5151 64.5449 10.4515C64.6828 10.3945 64.8315 10.3684 64.9805 10.375C65.1295 10.3816 65.2753 10.4207 65.4076 10.4897C65.54 10.5586 65.6556 10.6556 65.7464 10.774C65.8372 10.8923 65.901 11.0291 65.9334 11.1748L66.6209 13.0677L65.7905 13.3713L65.1967 11.7418C65.0539 11.3489 64.7949 11.2149 64.4824 11.3266C64.4059 11.3518 64.3359 11.3936 64.2775 11.4491C64.2191 11.5047 64.1737 11.5724 64.1447 11.6476C64.1157 11.7228 64.1037 11.8034 64.1096 11.8838C64.1155 11.9642 64.1391 12.0422 64.1788 12.1123L64.7726 13.7419L63.9422 14.0455L62.8796 11.1212ZM57.5232 11.873L58.4161 11.556L58.684 12.2927L57.8134 12.6097L57.5232 11.873ZM57.9295 12.9222L58.742 12.6231L59.809 15.5474L58.9786 15.8465L57.9295 12.9222ZM52.7573 13.6074L53.6502 13.2904L53.9181 14.0271L53.0252 14.344L52.7573 13.6074ZM53.1636 14.661L53.994 14.3574L55.0566 17.2683L54.2306 17.5675L53.1636 14.661ZM51.2595 16.1569L51.764 17.5409C51.7854 17.6653 51.8359 17.7829 51.9114 17.884C51.987 17.9851 52.0854 18.0669 52.1987 18.1226C52.3119 18.1784 52.4368 18.2065 52.563 18.2047C52.6892 18.203 52.8132 18.1713 52.9248 18.1124C53.1578 18.0347 53.3638 17.8922 53.5186 17.7016L53.2775 17.0364C53.1769 17.1506 53.0496 17.238 52.9069 17.2909C52.871 17.3099 52.831 17.32 52.7903 17.3203C52.7496 17.3207 52.7095 17.3113 52.6732 17.2929C52.6369 17.2746 52.6055 17.2478 52.5817 17.2148C52.5579 17.1818 52.5424 17.1436 52.5364 17.1034L52.0899 15.8533L52.7775 15.6033L52.5185 14.8934L51.831 15.1479L51.5587 14.3978L50.7282 14.7014L51.0006 15.447L50.6523 15.5765L50.9113 16.2819L51.2595 16.1569ZM47.1812 16.8181L48.0116 16.519L48.1634 16.9387C48.2125 16.7536 48.3073 16.5838 48.4392 16.445C48.571 16.3061 48.7356 16.2026 48.9179 16.144C49.1086 16.0814 49.3101 16.0586 49.5099 16.0769C49.7098 16.0953 49.9038 16.1544 50.0799 16.2506C50.256 16.3468 50.4105 16.4781 50.534 16.6364C50.6574 16.7947 50.747 16.9766 50.7974 17.1708C50.8845 17.3521 50.9333 17.5493 50.9408 17.7502C50.9483 17.9511 50.9143 18.1514 50.841 18.3387C50.7677 18.5259 50.6567 18.696 50.5147 18.8384C50.3728 18.9808 50.2031 19.0925 50.0161 19.1665C49.8417 19.234 49.6538 19.2594 49.4676 19.2408C49.2815 19.2222 49.1023 19.16 48.9447 19.0593L49.3911 20.3139L48.5652 20.6175L47.1812 16.8181ZM49.9581 17.4699C49.9339 17.3646 49.8875 17.2655 49.8221 17.1794C49.7567 17.0933 49.6737 17.0221 49.5787 16.9704C49.4837 16.9188 49.3788 16.8879 49.271 16.8799C49.1632 16.8718 49.0548 16.8868 48.9532 16.9237C48.8516 16.9607 48.759 17.0188 48.6815 17.0942C48.604 17.1697 48.5435 17.2607 48.5038 17.3613C48.4642 17.4619 48.4464 17.5698 48.4516 17.6778C48.4567 17.7858 48.4848 17.8915 48.5339 17.9878C48.5582 18.0932 48.6045 18.1922 48.6699 18.2783C48.7353 18.3645 48.8183 18.4357 48.9133 18.4873C49.0083 18.539 49.1132 18.5698 49.221 18.5779C49.3289 18.586 49.4372 18.571 49.5388 18.5341C49.6404 18.4971 49.733 18.439 49.8105 18.3635C49.888 18.2881 49.9485 18.1971 49.9882 18.0965C50.0278 17.9959 50.0456 17.888 50.0405 17.78C50.0353 17.672 50.0072 17.5663 49.9581 17.4699ZM42.8375 19.5762C42.7414 19.3117 42.6995 19.0307 42.714 18.7498C42.7285 18.4688 42.7993 18.1936 42.9221 17.9405C43.0449 17.6874 43.2173 17.4615 43.429 17.2762C43.6407 17.0909 43.8874 16.9499 44.1545 16.8617C44.4143 16.7569 44.6925 16.7057 44.9726 16.7111C45.2526 16.7164 45.5287 16.7783 45.7843 16.893C46.0398 17.0076 46.2696 17.1727 46.4598 17.3783C46.6501 17.5839 46.7968 17.8258 46.8913 18.0895C47.0676 18.6219 47.0299 19.202 46.7864 19.7072C46.5428 20.2124 46.1123 20.6031 45.5859 20.7967C45.0596 20.9903 44.4786 20.9717 43.9657 20.7448C43.4528 20.5178 43.0482 20.1004 42.8375 19.5806V19.5762ZM46.0162 18.4154C45.965 18.258 45.8827 18.1125 45.7742 17.9874C45.6657 17.8624 45.5332 17.7605 45.3846 17.6876C45.2359 17.6147 45.0742 17.5725 44.9089 17.5633C44.7436 17.5541 44.5782 17.5782 44.4224 17.6341C44.2679 17.6899 44.1262 17.7764 44.006 17.8883C43.8857 18.0002 43.7893 18.1353 43.7226 18.2854C43.6559 18.4356 43.6202 18.5976 43.6177 18.7619C43.6152 18.9262 43.6459 19.0892 43.7081 19.2413C43.7597 19.3983 43.8424 19.5434 43.9511 19.6679C44.0598 19.7925 44.1923 19.8939 44.3409 19.9664C44.4895 20.0388 44.6511 20.0807 44.8162 20.0896C44.9812 20.0985 45.1464 20.0742 45.3019 20.0182C45.4563 19.9629 45.5978 19.8768 45.718 19.7653C45.8383 19.6538 45.9346 19.5191 46.0014 19.3694C46.0681 19.2196 46.1039 19.0578 46.1064 18.8939C46.109 18.7299 46.0783 18.5672 46.0162 18.4154ZM55.0638 14.9733C55.056 15.1878 55.0915 15.4017 55.1684 15.6022C55.2385 15.8022 55.3481 15.9861 55.4905 16.143C55.633 16.2999 55.8055 16.4266 55.9978 16.5157C56.1901 16.6048 56.3983 16.6544 56.6102 16.6616C56.822 16.6688 57.0331 16.6334 57.231 16.5576C57.4616 16.485 57.672 16.3597 57.8456 16.1915C58.0193 16.0233 58.1512 15.8169 58.2311 15.5888L57.5703 15.2763C57.5202 15.4019 57.4448 15.5158 57.3488 15.6111C57.2528 15.7063 57.1382 15.7808 57.0122 15.8299C56.9093 15.8671 56.7997 15.8825 56.6904 15.8754C56.5812 15.8682 56.4746 15.8386 56.3773 15.7883C56.2801 15.738 56.1943 15.6681 56.1253 15.5831C56.0563 15.498 56.0056 15.3997 55.9765 15.2941C55.9338 15.1972 55.9107 15.0928 55.9088 14.9869C55.9068 14.881 55.9259 14.7757 55.9649 14.6773C56.004 14.5788 56.0622 14.4891 56.1362 14.4134C56.2103 14.3376 56.2986 14.2773 56.3961 14.236C56.5239 14.189 56.6607 14.1718 56.7961 14.1857C56.9315 14.1996 57.0619 14.2443 57.1774 14.3164L57.4855 13.5887C57.2824 13.4753 57.0559 13.4104 56.8236 13.3987C56.5913 13.3871 56.3595 13.4292 56.1461 13.5217C55.9427 13.5905 55.7554 13.6996 55.5952 13.8426C55.435 13.9855 55.3054 14.1594 55.2141 14.3537C55.1228 14.548 55.0717 14.7587 55.0638 14.9733ZM59.8152 13.26C59.8135 13.4685 59.854 13.6752 59.9343 13.8675L59.9388 13.8809C60.0598 14.1914 60.2724 14.4578 60.5484 14.6446C60.8243 14.8314 61.1506 14.9299 61.4838 14.927C61.817 14.9241 62.1415 14.8199 62.4142 14.6283C62.6868 14.4367 62.8947 14.1667 63.0104 13.8542L62.3853 13.6086C62.3287 13.7381 62.2459 13.8545 62.1422 13.9505C62.0385 14.0466 61.9161 14.1201 61.7826 14.1667C61.6174 14.2393 61.4309 14.2475 61.2599 14.1897C61.0889 14.1319 60.9457 14.0122 60.8585 13.8542L62.8943 13.113C62.872 13.0327 62.8496 12.9568 62.8273 12.8898C62.5237 12.0639 61.8005 11.4656 60.8272 11.8228C60.6315 11.8947 60.4524 12.0054 60.3007 12.1484C60.1489 12.2913 60.0277 12.4635 59.9443 12.6546C59.8608 12.8456 59.817 13.0516 59.8152 13.26ZM61.5663 12.5022C61.7238 12.5764 61.8462 12.709 61.9076 12.8719L60.6575 13.3273C60.6046 13.1602 60.6172 12.9792 60.6926 12.8209C60.768 12.6626 60.9007 12.5388 61.0638 12.4746C61.2285 12.4181 61.4087 12.4281 61.5663 12.5022ZM31.2583 30.8259C38.0176 33.1742 47.3977 32.8885 56.8536 29.4597C66.3096 26.0309 73.694 20.2448 77.3906 14.1105C72.3992 19.3474 64.9925 24.1335 56.0902 27.3524C47.1879 30.5714 38.4328 31.6563 31.2583 30.8259ZM64.2666 33.806L73.8475 30.3147L74.8699 33.1274L68.557 35.4222L69.2133 37.2303L74.9324 35.1454L75.8789 37.7527L70.1598 39.8332L70.8474 41.7217L77.2496 39.3912L78.2719 42.2039L68.6017 45.722L64.2666 33.806ZM53.6783 44.4094V44.4451H53.6694C54.1852 45.7527 55.0995 46.8649 56.2826 47.624C57.4657 48.383 58.8577 48.7506 60.2613 48.6745C61.665 48.5985 63.0091 48.0827 64.1032 47.2002C65.1974 46.3177 65.9861 45.1133 66.3577 43.7575L63.2325 42.8914C62.8307 44.021 62.3128 44.8737 61.0672 45.3201C59.384 45.9273 57.7009 44.9585 57.0491 43.1727V43.137C56.4196 41.4002 57.0803 39.5608 58.7456 38.9537C59.8974 38.5385 60.8797 38.7974 61.8708 39.4001L63.6566 36.574C62.0717 35.4802 60.1341 35.0338 57.6964 35.9267C56.8656 36.2056 56.0997 36.6493 55.4444 37.2312C54.7892 37.8131 54.258 38.5213 53.8829 39.3133C53.5077 40.1053 53.2963 40.9648 53.2611 41.8405C53.2259 42.7161 53.3679 43.5899 53.6783 44.4094ZM49.7958 39.0696L46.4773 40.2775L50.8139 52.1922L54.1324 50.9844L49.7958 39.0696ZM36.2784 43.9891L32.5862 45.3374L41.7876 55.5746L44.8503 54.463L45.3191 40.7031L41.6894 42.0202L41.7296 50.5475L36.2784 43.9891ZM21.7073 49.2934L27.3416 47.2442C29.1631 46.5834 30.5962 46.6013 31.6945 47.1236C32.182 47.3598 32.6154 47.6943 32.9673 48.1061C33.3192 48.518 33.5821 48.9982 33.7393 49.5166V49.5479C34.0528 50.3287 34.1133 51.1882 33.9123 52.0053C33.7112 52.8223 33.2587 53.5556 32.6187 54.1018L36.9761 57.227L33.1633 58.611L29.4488 55.8787L28.0023 56.4055L29.3149 60.0129L26.0111 61.2138L21.7073 49.2934ZM29.2747 53.0213C30.3998 52.6106 30.8462 51.8293 30.5293 50.9632V50.9274C30.1855 49.9943 29.3328 49.7622 28.2255 50.164L26.0647 50.9542L27.1049 53.8116L29.2747 53.0213ZM10.4204 53.4078L20.0058 49.9165L21.0282 52.7247L14.7109 55.024L15.3671 56.8277L21.0863 54.7472L22.0372 57.35L16.3181 59.435L17.0056 61.3235L23.4034 58.993L24.4257 61.8012L14.7555 65.3193L10.4204 53.4078ZM11.8864 62.1653V62.201C12.7748 64.6342 11.3774 66.7817 8.48437 67.8353C6.46103 68.6259 4.21796 68.6465 2.18041 67.8934L3.22065 65.036C4.63391 65.5448 6.17958 65.5496 7.59592 65.0494C8.4799 64.728 8.846 64.2503 8.65849 63.7368V63.7056C8.46651 63.21 7.9888 63.0806 6.23423 63.2949C3.77426 63.6029 1.74288 63.6297 0.702637 61.8707V57.8079C1.40017 56.791 2.41651 56.0354 3.59121 55.6604C5.3403 54.9461 7.286 54.8749 9.08262 55.4595L8.279 58.3927C7.04924 58.0254 5.73701 58.0394 4.51537 58.4329C3.71622 58.7365 3.44834 59.2053 3.60014 59.6294V59.6651C3.80104 60.2098 4.29661 60.2991 6.08243 60.0714C9.0469 59.6696 11.0738 59.933 11.8864 62.1653ZM23.3445 97.962C23.3445 92.158 27.0545 87.247 32.9165 87.247V87.238C38.7829 87.238 42.435 92.0687 42.435 97.9039V97.962C42.435 102.744 39.9616 106.891 35.8229 108.23H29.8851C25.7732 106.9 23.3445 102.797 23.3445 98.0245V97.962ZM32.9165 103.619C35.2158 103.619 36.6891 101.293 36.6891 98.0245V97.962C36.6891 94.6939 35.1265 92.3053 32.8585 92.3053C30.5905 92.3053 29.0904 94.6046 29.0904 97.9039V97.962C29.0904 101.261 30.6173 103.619 32.9165 103.619ZM17.6895 101.138C20.7521 98.9056 22.4621 97.218 22.4621 93.9187V93.8562C22.4621 89.9676 19.3681 87.2888 14.8723 87.2888C10.8542 87.2888 8.68443 88.8514 6.47448 91.7088L10.3363 94.9188C11.957 93.0615 13.0463 92.2668 14.4303 92.2668C15.8143 92.2668 16.7296 93.0615 16.7296 94.3607C16.7296 95.6599 15.9929 96.5707 14.0776 98.0708L6.3584 103.964V107.634C7.38246 108.036 8.47265 108.244 9.57288 108.246H22.6674V103.611H14.1535L17.6895 101.138ZM71.0458 104.278H61.0585L60.1121 100.237L70.827 87.5087H76.5997V100.009H79.2248V104.282H76.5997V108.3H71.0636L71.0458 104.278ZM71.0458 100.032V94.1118L66.1348 100.032H71.0458ZM54.4552 101.156C57.5224 98.9238 59.2278 97.2362 59.2278 93.9369V93.8789C59.2278 89.9902 56.1384 87.307 51.6381 87.307C47.62 87.307 45.4502 88.8696 43.2402 91.7269L47.1021 94.9414C48.7227 93.0842 49.8121 92.2895 51.1961 92.2895C52.5801 92.2895 53.4953 93.0842 53.4953 94.3789C53.4953 95.6736 52.7587 96.5889 50.8434 98.0934L43.1152 103.987V108.286H59.4377V103.63H50.9193L54.4552 101.156ZM32.9635 33.8532L32.4724 33.7818L32.7939 33.3978C32.8266 33.3644 32.8449 33.3195 32.8449 33.2728C32.8449 33.226 32.8266 33.1812 32.7939 33.1478C32.7597 33.1148 32.7141 33.0963 32.6666 33.0963C32.6192 33.0963 32.5735 33.1148 32.5394 33.1478L32.218 33.5317L32.0349 33.0183C32.0178 32.9737 31.984 32.9375 31.9406 32.9175C31.8973 32.8975 31.8478 32.8952 31.8028 32.9112C31.7593 32.9282 31.7242 32.9615 31.705 33.0041C31.6858 33.0466 31.684 33.095 31.7001 33.1389L31.8831 33.6523L31.3474 33.5585C31.3012 33.5507 31.2539 33.5613 31.2155 33.588C31.1771 33.6147 31.1507 33.6554 31.142 33.7014C31.1341 33.7481 31.1445 33.796 31.1711 33.8351C31.1978 33.8742 31.2385 33.9015 31.2849 33.9112L31.8206 34.005L31.4724 34.4202C31.45 34.4463 31.4357 34.4783 31.4311 34.5124C31.4265 34.5464 31.4318 34.5811 31.4464 34.6122C31.461 34.6433 31.4843 34.6696 31.5135 34.6878C31.5426 34.706 31.5764 34.7154 31.6108 34.7148C31.6362 34.7143 31.6613 34.7085 31.6843 34.6977C31.7074 34.687 31.728 34.6715 31.7447 34.6523L32.0974 34.2327L32.2671 34.6791C32.2792 34.7144 32.3021 34.7451 32.3325 34.7667C32.3629 34.7883 32.3994 34.7998 32.4367 34.7997C32.4558 34.8038 32.4756 34.8038 32.4948 34.7997C32.5171 34.7922 32.5376 34.7803 32.5552 34.7647C32.5727 34.749 32.587 34.73 32.597 34.7087C32.607 34.6874 32.6126 34.6644 32.6134 34.6409C32.6143 34.6174 32.6104 34.5939 32.6019 34.572L32.4323 34.1255L32.9234 34.2104H32.9546C33.002 34.2145 33.049 34.1997 33.0855 34.1691C33.1219 34.1385 33.1447 34.0948 33.1488 34.0474C33.153 34 33.1381 33.953 33.1076 33.9165C33.077 33.8801 33.0332 33.8573 32.9859 33.8532H32.9635ZM23.8323 41.6239L21.9973 36.5744L23.9394 35.869L25.7565 40.8693C26.2833 42.3069 27.2744 42.7891 28.462 42.356C29.6496 41.923 30.105 40.9452 29.596 39.5434L27.7521 34.4805L29.6942 33.7841L31.5068 38.7576C32.4801 41.4363 31.4577 43.2936 29.0826 44.1597C26.7074 45.0259 24.7743 44.2267 23.8278 41.6239H23.8323ZM16.5148 38.5681L14.5728 39.278L17.7872 48.1134L24.1403 45.8007L23.4974 44.0328L19.0909 45.6355L16.5148 38.5681ZM12.7838 39.9323L6.11816 42.3565L9.33265 51.1919L16.0607 48.7453L15.4312 47.0131L10.6363 48.7632L9.95769 46.9059L14.1231 45.388L13.4981 43.6602L9.32819 45.1737L8.67636 43.3834L13.4133 41.66L12.7838 39.9323ZM8.35913 40.6619L10.0021 40.0815L10.5244 37.751L8.88148 38.3314L8.35913 40.6619ZM72.1427 50.981L67.9505 52.5079L66.7183 49.1148L78.9735 44.6547L80.2057 48.0433L76.0135 49.5702L79.8664 60.1512L75.9956 61.5576L72.1427 50.981ZM55.4425 53.2193L51.8262 54.5318L56.9113 68.506L60.7464 67.113L57.956 59.4473L66.7155 64.9388L70.1086 63.7021L65.019 49.7324L61.1884 51.1254L63.876 58.5142L55.4425 53.2193ZM38.5125 59.3815L49.7498 55.292L50.9507 58.5824L43.544 61.279L44.3164 63.3952L51.0222 60.9531L52.1338 64.0069L45.4281 66.449L46.2317 68.6634L53.7366 65.9311L54.9376 69.2259L43.5976 73.3557L38.5125 59.3815ZM32.0691 61.7295L35.9623 60.3125L41.0472 74.2829L37.1539 75.7L32.0691 61.7295ZM19.6899 66.2328L23.5652 64.822L27.4136 75.3986L34.1819 72.9386L35.4141 76.3317L24.7751 80.2025L19.6899 66.2328ZM7.19727 78.7339V78.6937C6.83345 77.7322 6.66744 76.7072 6.70918 75.6801C6.75092 74.6529 6.99955 73.6448 7.44017 72.716C7.8808 71.7872 8.50435 70.9569 9.27349 70.2749C10.0426 69.5928 10.9415 69.073 11.9163 68.7466C14.7692 67.7108 17.0416 68.2377 18.9033 69.5056L16.8139 72.8228C15.6487 72.1129 14.5013 71.8093 13.1619 72.296C11.2064 73.0058 10.4341 75.1667 11.1752 77.207V77.2472C11.9386 79.3232 13.912 80.4751 15.8808 79.7697C17.3363 79.2384 17.9479 78.2473 18.4167 76.9257L22.0866 77.9392C21.4169 80.2161 20.1266 82.2118 17.0327 83.3413C16.0869 83.7015 15.0783 83.8677 14.067 83.8301C13.0556 83.7924 12.0622 83.5517 11.1458 83.1223C10.2294 82.6928 9.40873 82.0834 8.73269 81.3302C8.05666 80.5771 7.53904 79.6956 7.21066 78.7384L7.19727 78.7339ZM70.0806 78.7216H70.6743L71.1655 77.9537L70.5717 77.9492L70.0806 78.7216ZM54.5179 79.25H55.2768L57.3261 84.1387H56.46L55.9867 82.9645H53.7857L53.3035 84.1387H52.491L54.5179 79.25ZM55.6876 82.21L54.884 80.2679L54.0848 82.21H55.6876ZM37.9682 79.2835H36.2314V84.1231H37.9682C38.2928 84.1367 38.6168 84.0834 38.92 83.9668C39.2232 83.8501 39.4993 83.6724 39.7311 83.4448C39.963 83.2171 40.1456 82.9443 40.2678 82.6433C40.39 82.3422 40.4491 82.0193 40.4415 81.6944C40.4486 81.3705 40.389 81.0487 40.2664 80.7488C40.1438 80.449 39.9608 80.1775 39.7288 79.9514C39.4969 79.7253 39.2208 79.5493 38.9179 79.4344C38.615 79.3195 38.2917 79.2682 37.9682 79.2835ZM38.6033 83.2544C38.4013 83.3336 38.1849 83.3695 37.9682 83.3597L37.0485 83.3731V80.0738H37.9682C38.1853 80.0653 38.4019 80.1024 38.6039 80.1826C38.8059 80.2628 38.9889 80.3844 39.1411 80.5396C39.2933 80.6947 39.4114 80.88 39.4877 81.0835C39.564 81.287 39.597 81.5042 39.5843 81.7212C39.5971 81.9378 39.5641 82.1546 39.4877 82.3577C39.4113 82.5608 39.2931 82.7455 39.1407 82.9C38.9884 83.0544 38.8053 83.1752 38.6033 83.2544ZM44.8865 79.2889H41.4309V84.1419H44.9222V83.3785H42.2524V82.0748H44.5874V81.3114H42.2524V80.0524H44.8865V79.2889ZM47.8877 79.2889H48.7047V83.3651H51.1558V84.1419H47.8877V79.2889ZM51.9696 80.2354C52.0008 80.5971 51.8089 80.8114 51.4026 80.8873L51.4963 81.2489C52.1705 81.1953 52.5232 80.8694 52.5232 80.097V79.2889H51.6303V80.2354H51.9696ZM58.8807 79.2889H58.1262V84.1419H58.9298V80.6908L61.497 84.1419H62.1845V79.2889H61.3809V82.6463L58.8807 79.2889ZM63.3799 79.2889H64.1389L66.6345 82.6463V79.2889H67.4426V84.1419H66.7551L64.1835 80.6908V84.1419H63.3799V79.2889ZM72.0903 79.2889H68.6392V84.1419H72.126V83.3785H69.4562V82.0748H71.7911V81.3114H69.4562V80.0524H72.0903V79.2889ZM73.0947 79.2889H76.5503V80.0524H73.9162V81.3114H76.2512V82.0748H73.9162V83.3785H76.5816V84.1419H73.0947V79.2889Z" fill="white" />
</svg>
<div class="flex-col flex gap-2">
<h2 class="font-semibold">Élu service client de l’année 2024</h2>
<p class="text-xs">Catégorie Opticien (Étude BVA, Viséo CI, plus d’infos sur escda.fr)</p>
</div>
</div>
</div>
</div>
<div class="grid md:grid-cols-2 gap-x-4 gap-y-10 pt-10 md:pt-0 border-t border-t-neutral-600 md:border-none">
<script>
'use strict';
function accordion(expanded = false) {
return {
expanded: expanded,
isMobile: false,
init() {
this.checkExpand();
},
toggleExpanded() {
this.expanded = !this.isMobile || !this.expanded;
},
checkExpand() {
this.isMobile = window.innerWidth < 768;
}
};
}
</script>
<div x-data="accordion(true)" @resize.debounce.100.window="expanded = !isMobile;checkExpand()" class=" text-light-white">
<h2 class="font-semibold">
<button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text">
Afflelou opticien & acousticien
<div class="md:hidden transition-transform" :class="{ 'rotate-180': expanded }">
<svg class=" shrink-0" width="24" 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>
</div>
</button>
</h2>
<div x-cloak x-show="expanded || !isMobile" x-collapse class="pt-6">
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Qui sommes nous ?
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Notre histoire
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Notre démarche RSE
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Index égalité femmes hommes
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
La fondation Afflelou
</a>
</div>
</div>
</div>
</div>
<script>
'use strict';
function accordion(expanded = false) {
return {
expanded: expanded,
isMobile: false,
init() {
this.checkExpand();
},
toggleExpanded() {
this.expanded = !this.isMobile || !this.expanded;
},
checkExpand() {
this.isMobile = window.innerWidth < 768;
}
};
}
</script>
<div x-data="accordion(true)" @resize.debounce.100.window="expanded = !isMobile;checkExpand()" class=" text-light-white">
<h2 class="font-semibold">
<button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text">
Informations groupe
<div class="md:hidden transition-transform" :class="{ 'rotate-180': expanded }">
<svg class=" shrink-0" width="24" 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>
</div>
</button>
</h2>
<div x-cloak x-show="expanded || !isMobile" x-collapse class="pt-6">
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Affelou.net
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Informations financières
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Espace investisseur
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Nous rejoindre
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Devenez franchisés
</a>
</div>
</div>
</div>
</div>
<script>
'use strict';
function accordion(expanded = false) {
return {
expanded: expanded,
isMobile: false,
init() {
this.checkExpand();
},
toggleExpanded() {
this.expanded = !this.isMobile || !this.expanded;
},
checkExpand() {
this.isMobile = window.innerWidth < 768;
}
};
}
</script>
<div x-data="accordion(true)" @resize.debounce.100.window="expanded = !isMobile;checkExpand()" class=" text-light-white">
<h2 class="font-semibold">
<button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text">
Presse et publicité
<div class="md:hidden transition-transform" :class="{ 'rotate-180': expanded }">
<svg class=" shrink-0" width="24" 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>
</div>
</button>
</h2>
<div x-cloak x-show="expanded || !isMobile" x-collapse class="pt-6">
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Communiqués
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Dossier de presse produits
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Les chroniques optiques d’Alain Afflelou
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
La saga publicitaire
</a>
</div>
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Sponsoring sportif
</a>
</div>
</div>
</div>
</div>
<script>
'use strict';
function accordion(expanded = false) {
return {
expanded: expanded,
isMobile: false,
init() {
this.checkExpand();
},
toggleExpanded() {
this.expanded = !this.isMobile || !this.expanded;
},
checkExpand() {
this.isMobile = window.innerWidth < 768;
}
};
}
</script>
<div x-data="accordion(true)" @resize.debounce.100.window="expanded = !isMobile;checkExpand()" class=" text-light-white">
<h2 class="font-semibold">
<button type="button" @click="toggleExpanded()" class="flex justify-between items-center w-full md:cursor-text">
Autres enseignes
<div class="md:hidden transition-transform" :class="{ 'rotate-180': expanded }">
<svg class=" shrink-0" width="24" 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>
</div>
</button>
</h2>
<div x-cloak x-show="expanded || !isMobile" x-collapse class="pt-6">
<div class="inline-flex flex-col gap-4">
<div class="inline-flex gap-2 items-center ">
<a href="#" class=" text-base link-light">
Malentille
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container py-10 md:py-16 flex justify-center items-center gap-4 flex-wrap text-light-white">
<p class="text-sm font-medium">
Paiement 100 % sécurisé
</p>
<div class="flex items-center gap-2">
<svg class=" shrink-0" height="40" viewBox="0 0 70 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M24.5069 12.7781C31.4281 12.7781 35.7859 16.7089 36.2985 22.7954H24.3788V24.951H36.2985C35.7859 31.1642 31.4281 35.0951 24.5069 35.0951C17.4576 35.0951 12.7153 30.9106 12.7153 23.9366C12.7153 17.2161 17.2013 12.7781 24.5069 12.7781ZM57.8311 18.2305C57.8311 14.8849 55.2042 13.5388 52.3199 13.5388H38.2212V18.2305V22.9221H52.1917C54.9783 22.9221 57.8311 21.4393 57.8311 18.2305ZM57.8311 29.7694C57.8311 26.7013 55.1912 25.0778 52.3199 25.0778H38.2212V29.7694V34.461H52.1917C54.9783 34.461 57.8311 32.9782 57.8311 29.7694Z" fill="white" />
</svg>
<svg class=" shrink-0" height="40" viewBox="0 0 70 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.8333 34.3139C33.4501 36.3704 30.3588 37.6119 26.9808 37.6119C19.4435 37.6119 13.3333 31.4308 13.3333 23.806C13.3333 16.1811 19.4435 10 26.9808 10C30.3588 10 33.4501 11.2415 35.8333 13.2981C38.2164 11.2415 41.3078 10 44.6857 10C52.2231 10 58.3333 16.1811 58.3333 23.806C58.3333 31.4308 52.2231 37.6119 44.6857 37.6119C41.3078 37.6119 38.2164 36.3704 35.8333 34.3139Z" fill="white" fill-opacity="0.4" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.8333 34.3139C38.7677 31.7816 40.6284 28.0136 40.6284 23.806C40.6284 19.5983 38.7677 15.8303 35.8333 13.298C38.2164 11.2415 41.3077 10 44.6857 10C52.223 10 58.3332 16.1811 58.3332 23.806C58.3332 31.4308 52.223 37.6119 44.6857 37.6119C41.3077 37.6119 38.2164 36.3704 35.8333 34.3139Z" fill="white" fill-opacity="0.6" />
<path fill-rule="evenodd" clip-rule="evenodd" d="M35.8333 34.3138C38.7677 31.7815 40.6283 28.0136 40.6283 23.806C40.6283 19.5984 38.7677 15.8304 35.8333 13.2981C32.899 15.8304 31.0383 19.5984 31.0383 23.806C31.0383 28.0136 32.899 31.7815 35.8333 34.3138Z" fill="white" fill-opacity="0.2" />
</svg>
<svg class=" shrink-0" height="40" viewBox="0 0 70 48" fill="none" xmlns="http://www.w3.org/2000/svg">
<path fill-rule="evenodd" clip-rule="evenodd" d="M21.5838 32.5165H17.3431L14.1632 20.3847C14.0122 19.8267 13.6917 19.3333 13.2203 19.1008C12.0439 18.5165 10.7475 18.0514 9.33325 17.8169V17.3498H16.1646C17.1074 17.3498 17.8145 18.0514 17.9324 18.8663L19.5823 27.6173L23.8209 17.3498H27.9437L21.5838 32.5165ZM30.3007 32.5165H26.2957L29.5936 17.3498H33.5985L30.3007 32.5165ZM38.7799 21.5514C38.8978 20.7346 39.6049 20.2675 40.4299 20.2675C41.7262 20.1502 43.1384 20.3848 44.3169 20.9671L45.0241 17.7016C43.8455 17.2345 42.5491 17 41.3727 17C37.4856 17 34.6571 19.1008 34.6571 22.0165C34.6571 24.2346 36.6606 25.3992 38.0749 26.1008C39.6049 26.8004 40.1942 27.2675 40.0763 27.9671C40.0763 29.0165 38.8978 29.4836 37.7213 29.4836C36.3071 29.4836 34.8928 29.1338 33.5985 28.5494L32.8914 31.8169C34.3056 32.3992 35.8357 32.6338 37.2499 32.6338C41.6084 32.749 44.3169 30.6502 44.3169 27.5C44.3169 23.5329 38.7799 23.3004 38.7799 21.5514V21.5514ZM58.3333 32.5165L55.1533 17.3498H51.7376C51.0305 17.3498 50.3234 17.8169 50.0877 18.5165L44.1992 32.5165H48.322L49.1449 30.3004H54.2105L54.6819 32.5165H58.3333ZM52.3268 21.4342L53.5033 27.1502H50.2054L52.3268 21.4342Z" fill="white" />
</svg>
</div>
</div>
<div class="container px-0">
<div class="rounded-t-2xl px-4 lg:px-6 py-6 flex justify-center lg:justify-between items-center gap-8 bg-dark-50 text-light-white flex-wrap lg:flex-nowrap">
<div class="shrink-0">
Copyright Alain Afflelou 2024
</div>
<div class="flex justify-center lg:justify-end items-center gap-6 lg:gap-4 flex-wrap">
<a href="#" class="is-underlined text-xs link-light">
Politique de protection des données personnelles
</a>
<a href="#" class="is-underlined text-xs link-light">
Politique de cookies
</a>
<a href="#" class="is-underlined text-xs link-light">
Paramétrage des cookies
</a>
<a href="#" class="is-underlined text-xs link-light">
Mentions légales
</a>
<a href="#" class="is-underlined text-xs link-light">
CGV
</a>
<a href="#" class="is-underlined text-xs link-light">
Conditions de l’abonnement lentilles
</a>
<a href="#" class="is-underlined text-xs link-light">
Plan du site
</a>
</div>
</div>
</div>
</footer>
<script src="../../js/gsap.min.js" defer crossorigin></script>
<script src="../../js/scrollTrigger.min.js" defer crossorigin></script>
<script src="../../js/swiper-bundle.min.js" defer crossorigin></script>
<script type="module" src="../../js/anchor.min.js" defer crossorigin></script>
<script type="module" src="../../js/persist.min.js" defer crossorigin></script>
<script type="module" src="../../js/intersect.min.js" defer crossorigin></script>
<script type="module" src="../../js/plyr.min.js" defer crossorigin></script>
<script type="module" src="../../js/collapse.min.js" defer crossorigin></script>
<script type="module" src="../../js/alpine3.min.js" defer crossorigin></script>
<script>
(g => {
var h, a, k, p = "The Google Maps JavaScript API",
c = "google",
l = "importLibrary",
q = "__ib__",
m = document,
b = window;
b = b[c] || (b[c] = {});
var d = b.maps || (b.maps = {}),
r = new Set,
e = new URLSearchParams,
u = () => h || (h = new Promise(async (f, n) => {
await (a = m.createElement("script"));
e.set("libraries", [...r] + "");
for (k in g) e.set(k.replace(/[A-Z]/g, t => "_" + t[0].toLowerCase()), g[k]);
e.set("callback", c + ".maps." + q);
a.src = `https://maps.${c}apis.com/maps/api/js?` + e;
d[q] = f;
a.onerror = () => h = n(Error(p + " could not load."));
a.nonce = m.querySelector("script[nonce]")?.nonce || "";
m.head.append(a)
}));
d[l] ? console.warn(p + " only loads once. Ignoring:", g) : d[l] = (f, ...n) => r.add(f) && u().then(() => d[l](f, ...n))
})({
key: "AIzaSyAmlBHNWuFlAL7elylRqvhRn4MD7ko0sWs",
v: "weekly",
// Use the 'v' parameter to indicate the version to use (weekly, beta, alpha, etc.).
// Add other bootstrap parameters as needed, using camel case.
});
</script>
<script src="../../js/markerclusterer.min.js" defer crossorigin></script>
<script>
window.addEventListener('alpine:init', () => {
console.log('Alpine.js has been initialized');
Alpine.store('screen', {
isMobile: window.matchMedia('(max-width: 768px)').matches,
isTablet: window.matchMedia('(max-width: 1024px)').matches,
// Méthode d'initialisation pour mettre à jour `isMobile` en fonction de la taille de l'écran
init() {
const mobileMedia = window.matchMedia('(max-width: 768px)');
const tabletMedia = window.matchMedia('(max-width: 1024px)');
this.isMobile = mobileMedia.matches;
this.isTablet = tabletMedia.matches;
const updateScreen = (event, type) => {
if (type === 'mobile') this.isMobile = event.matches;
if (type === 'tablet') this.isTablet = event.matches;
};
[{
media: mobileMedia,
type: 'mobile'
},
{
media: tabletMedia,
type: 'tablet'
}
].forEach(({
media,
type
}) => {
if (typeof media.onchange !== 'object') {
media.addListener((e) => updateScreen(e, type));
} else {
media.addEventListener('change', (e) => updateScreen(e, type));
}
});
}
});
Alpine.store('filter', {
filters: [],
getFilter(type, value) {
return this.filters.some((filter) => filter.type === type && filter.value === value);
},
toggleFilter(type, value) {
const filterArray = this.filters.selected[type];
const index = filterArray.indexOf(value);
if (index === -1) {
filterArray.push(value);
} else {
filterArray.splice(index, 1);
}
this.applyFilters();
},
clearFilters() {
this.filters = [];
}
});
Alpine.store('asideBlocs', {
asides: [],
// Ajouter un nouvel aside au tableau
addAside(name, customProperties = {}) {
if (!this.asides.find(aside => aside.name === name)) {
this.asides.push({
name,
open: false,
...customProperties, // Ajoute des propriétés spécifiques
});
}
},
// Supprimer un aside par son nom
removeAside(name) {
this.asides = this.asides.filter(aside => aside.name !== name);
},
// Basculer l'état d'ouverture d'un aside
toggleAside(name) {
const aside = this.asides.find(aside => aside.name === name);
if (aside) {
aside.open = !aside.open;
document.body.classList.toggle('overflow-hidden', aside.open);
}
},
// Fermer un aside spécifique
closeAside(name) {
const aside = this.asides.find(aside => aside.name === name);
if (aside) {
aside.open = false;
document.body.classList.remove('overflow-hidden');
}
},
// Ouvrir un aside spécifique
openAside(name) {
const aside = this.asides.find(aside => aside.name === name);
if (aside) {
aside.open = true;
document.body.classList.add('overflow-hidden');
}
}
});
Alpine.store('locator', {
allStores: [], // Liste complète des magasins
countStore: "",
filteredStores: [], // Liste des magasins filtrés
filteredDistanceStores: null, //Liste des magasins trié par distance
selectedStore: null, // Magasin sélectionné
isAudio: false, // Type de magasin affiché (true = audio, false = optique)
loading: true, // État de chargement
mapCenter: null, // Centre lat et lng de la google map
mapInstance: null, // Instance de la google map. ( /!\ Toutes les fonctions ne sont pas disponible )
// Listes des filtres disponibles (extraites des données)
filterLists: {
audio: {
mutuals: [], // Liste des mutuelles optique disponibles
brands: [], // Liste des marques optique disponibles
types: [] // Contiendra ['optic', 'teleophtalmologie'] selon disponibilité
},
optic: {
mutuals: [], // Liste des mutuelles optique disponibles
brands: [], // Liste des marques optique disponibles
types: [] // Contiendra ['audio', 'teleophtalmologie'] selon disponibilité
}
},
// Modification des selectedFilters pour inclure les types
selectedFilters: {
audio: {
mutuals: [], // Mutuelles audio sélectionnées
brands: [], // Marques audio sélectionnées
types: [] // Les types sélectionnés
},
optic: {
mutuals: [], // Mutuelles audio sélectionnées
brands: [], // Marques audio sélectionnées
types: [] // Les types sélectionnés
},
search: ''
},
// Défault donnée des prises de rdv
defaultStepperState: {
steps: [{
id: 1,
title: 'Où',
completed: true
},
{
id: 2,
title: 'Quoi',
completed: false
},
{
id: 3,
title: 'Quand',
completed: false
},
{
id: 4,
title: 'Qui',
completed: false
}
],
completed: false,
currentStep: 2,
code_mur: null,
type: null,
data: []
},
// Initialisation avec persist
stepperData: Alpine.$persist(function() {
return {
...this.defaultStepperState
}
}).as('stepperData'),
// Getters
get currentFilterList() {
return this.filterLists[this.currentType];
},
get currentType() {
return this.isAudio ? 'audio' : 'optic';
},
get currentSelectedFilters() {
return this.selectedFilters[this.currentType];
},
async init() {
try {
// Détection du type depuis l'URL
try {
const pathname = window.location.pathname;
this.isAudio = pathname.includes('/acousticien');
} catch (error) {
console.error('Erreur lors de la détection du type depuis l\'URL:', error);
this.isAudio = false; // Défault value
}
await this.loadLibraries();
await this.loadStores();
this.extractFiltersFromStores();
this.applyFilters();
} finally {
this.loading = false;
}
},
async loadLibraries() {
const [geometry] = await Promise.all([
google.maps.importLibrary("geometry"),
]);
},
async loadStores() {
try {
const response = await fetch(`${window.location.origin}/js/json/getListv2.json`);
const data = await response.json();
if (data.success) {
this.countStore = data.data.totalCount ?? data.data.items.length;
this.allStores = data.data.items;
}
} catch (error) {
console.error('Erreur lors du chargement des magasins:', error);
this.allStores = [];
}
},
extractFiltersFromStores() {
const storesArray = Object.values(this.allStores);
// Pour les magasins Audio
const audioStores = storesArray.filter(store =>
store.locations.some(location => location.is_audio)
);
// Comptage pour les mutuelles audio
const audioMutualCounts = new Map();
audioStores.forEach(store => {
store.locations
.filter(location => location.is_audio)
.forEach(location => {
(location.mutuelles || []).forEach(mutual => {
audioMutualCounts.set(mutual, (audioMutualCounts.get(mutual) || 0) + 1);
});
});
});
// Comptage pour les marques audio
const audioBrandCounts = new Map();
audioStores.forEach(store => {
store.locations
.filter(location => location.is_audio)
.forEach(location => {
(location.brands || []).forEach(brand => {
audioBrandCounts.set(brand, (audioBrandCounts.get(brand) || 0) + 1);
});
});
});
// Pour les magasins Optique
const opticStores = storesArray.filter(store =>
store.locations.some(location => !location.is_audio)
);
// Comptage pour les mutuelles optique
const opticMutualCounts = new Map();
opticStores.forEach(store => {
store.locations
.filter(location => !location.is_audio)
.forEach(location => {
(location.mutuelles || []).forEach(mutual => {
opticMutualCounts.set(mutual, (opticMutualCounts.get(mutual) || 0) + 1);
});
});
});
// Comptage pour les marques optique
const opticBrandCounts = new Map();
opticStores.forEach(store => {
store.locations
.filter(location => !location.is_audio)
.forEach(location => {
(location.brands || []).forEach(brand => {
opticBrandCounts.set(brand, (opticBrandCounts.get(brand) || 0) + 1);
});
});
});
this.filterLists.audio = {
mutuals: Array.from(audioMutualCounts.entries())
.map(([id, count]) => ({
id,
label: id,
count
}))
.sort((a, b) => a.label.localeCompare(b.label)),
brands: Array.from(audioBrandCounts.entries())
.map(([id, count]) => ({
id,
label: id,
count
}))
.sort((a, b) => a.label.localeCompare(b.label)),
types: this.extractAvailableTypes(audioStores, true)
};
this.filterLists.optic = {
mutuals: Array.from(opticMutualCounts.entries())
.map(([id, count]) => ({
id,
label: id,
count
}))
.sort((a, b) => a.label.localeCompare(b.label)),
brands: Array.from(opticBrandCounts.entries())
.map(([id, count]) => ({
id,
label: id,
count
}))
.sort((a, b) => a.label.localeCompare(b.label)),
types: this.extractAvailableTypes(opticStores, false)
};
},
// Méthode pour extraire les types disponibles
extractAvailableTypes(stores, isAudio) {
const types = new Set();
const counts = {
[isAudio ? 'optic' : 'audio']: 0,
teleophtalmologie: 0
};
stores.forEach(store => {
// Vérifie si le magasin a l'autre type de service
const hasOtherService = store.locations.some(location =>
isAudio ? !location.is_audio : location.is_audio
);
if (hasOtherService) {
types.add(isAudio ? 'optic' : 'audio');
counts[isAudio ? 'optic' : 'audio']++;
}
// Vérifie si le magasin a la téléophtalmologie
const hasTelephtalmology = store.locations.some(location =>
location.attributes.teleophtalmologie?.value === "1"
);
if (hasTelephtalmology) {
types.add('teleophtalmologie');
counts.teleophtalmologie++;
}
});
// Retourne un tableau d'objets avec le type et son count
return Array.from(types).sort().map(type => ({
id: type,
label: type,
count: counts[type]
}));
},
// Dans toggleStoreType du store locator
toggleStoreType(isAudio) {
if (isAudio !== undefined) {
this.isAudio = isAudio;
} else {
this.isAudio = !this.isAudio;
}
// Mise à jour de l'URL
try {
const currentUrl = new URL(window.location.href);
const params = new URLSearchParams(currentUrl.search);
// Changer le pathname en gardant la même base
const newPathname = currentUrl.pathname.replace(
/(\/opticien|\/acousticien)/,
this.isAudio ? '/acousticien' : '/opticien'
);
// Construire la nouvelle URL avec les paramètres existants
const newUrl = `${currentUrl.origin}${newPathname}${params.toString() ? '?' + params.toString() : ''}`;
// Mettre à jour l'URL sans recharger la page
window.history.pushState({}, '', newUrl);
} catch (error) {
console.error('Erreur lors de la mise à jour de l\'URL:', error);
}
this.selectedStore = null;
this.clearFilters();
this.applyFilters();
},
updateFilter(category, value) {
const filters = this.selectedFilters[this.currentType][category];
const index = filters.indexOf(value.id || value);
if (index === -1) {
filters.push(value.id || value);
} else {
filters.splice(index, 1);
}
},
updateSearchTerm(term) {
this.filters.selected.search = term;
this.applyFilters();
},
clearFilters() {
this.selectedFilters[this.currentType].mutuals = [];
this.selectedFilters[this.currentType].brands = [];
this.selectedFilters[this.currentType].types = [];
this.selectedFilters.search = '';
this.applyFilters();
},
// Application des filtres modifiée
applyFilters() {
const searchTerm = this.selectedFilters.search?.toLowerCase() || '';
const selectedMutuals = this.selectedFilters[this.currentType].mutuals || [];
const selectedBrands = this.selectedFilters[this.currentType].brands || [];
const selectedTypes = this.selectedFilters[this.currentType].types || [];
const filteredStores = Object.values(this.allStores).filter(store => {
// 1. Vérification du service principal (toujours requis)
const hasMainService = store.locations.some(location =>
this.isAudio ? location.is_audio : !location.is_audio
);
if (!hasMainService) return false;
// 2. Vérification des types additionnels si sélectionnés
if (selectedTypes.length > 0) {
// Vérifie l'autre service si sélectionné
const otherServiceType = this.isAudio ? 'optic' : 'audio';
if (selectedTypes.includes(otherServiceType)) {
const hasOtherService = store.locations.some(location =>
this.isAudio ? !location.is_audio : location.is_audio
);
if (!hasOtherService) return false;
}
// Vérifie la téléophtalmologie si sélectionnée
if (selectedTypes.includes('teleophtalmologie')) {
const hasTelephtalmology = store.locations.some(location =>
location.attributes.teleophtalmologie?.value === "1"
);
if (!hasTelephtalmology) return false;
}
}
// Filtres existants inchangés
if (searchTerm && !this.matchesSearch(store, searchTerm)) return false;
// Filtre par mutuelles
if (selectedMutuals.length > 0) {
const storeMutuals = store.locations
.filter(location => this.isAudio ? location.is_audio : !location.is_audio)
.flatMap(location => location.mutuelles || []);
if (!selectedMutuals.some(mutualId => storeMutuals.includes(mutualId))) {
return false;
}
}
if (selectedBrands.length > 0) {
const storeBrands = store.locations
.filter(location => this.isAudio ? location.is_audio : !location.is_audio)
.flatMap(location => location.brands || []);
if (!selectedBrands.some(brandId => storeBrands.includes(brandId))) {
return false;
}
}
return true;
});
this.filteredStores = filteredStores;
this.updateDistances(filteredStores);
},
// Mise à jour de la méthode matchesSearch également si nécessaire
matchesSearch(store, searchTerm) {
return store.locations.some(location =>
location.name?.toLowerCase().includes(searchTerm) ||
store.city?.toLowerCase().includes(searchTerm) ||
store.zip?.toLowerCase().includes(searchTerm)
);
},
selectStore(store) {
this.selectedStore = store;
},
isFilterSelected(category, value) {
return this.selectedFilters[category].includes(value);
},
updateDistances(filteredStores) {
if (!this.mapInstance) return;
const center = this.mapInstance.getCenter();
const stores = Object.values(filteredStores || {});
// Créer de nouveaux objets avec les distances au lieu de modifier les existants
this.filteredDistanceStores = stores.map(store => {
const distance = google.maps.geometry.spherical.computeDistanceBetween(
center, {
lat: parseFloat(store.lat),
lng: parseFloat(store.lng)
}
);
// Retourner un nouvel objet au lieu de modifier l'original
return {
...store,
distance: (distance / 1000).toFixed(1) + ' km'
};
}).sort((a, b) => {
const distA = parseFloat(a.distance);
const distB = parseFloat(b.distance);
return distA - distB;
});
},
setMapCenter(lat, lng, zoom) {
if (!isNaN(lat) && !isNaN(lng)) {
this.mapInstance.panTo({
lat,
lng
})
}
if (zoom) {
this.mapInstance.setZoom(zoom)
}
},
goToStore(store) {
if (!this.mapInstance || !store) return;
const lat = parseFloat(store.lat);
const lng = parseFloat(store.lng);
if (isNaN(lat) || isNaN(lng)) return;
this.setMapCenter(lat, lng, 15)
this.selectStore(store);
},
// PARTIE: PRISE DE RENDEZ-VOUS
initStepper(store) {
this.stepperData = {
...this.defaultStepperState,
code_mur: store.mur_code,
type: this.isAudio,
data: [{
title: 'MAGASIN',
value: `${store.address}, ${store.zip} ${store.city}`
}]
};
},
updateStepperData(title, value, targetStep) {
if (!this.stepperData) return;
// Trouver l'index de la donnée existante
const currentIndex = this.stepperData.data.findIndex(item => item.title === title);
// Mise à jour ou ajout des données
if (currentIndex === -1) {
// Ajout d'une nouvelle entrée
this.stepperData.data.push({
title,
value
});
} else if (this.stepperData.data[currentIndex].value !== value) {
// Si la valeur change, on supprime les données suivantes
this.stepperData.data = this.stepperData.data.slice(0, currentIndex + 1);
this.stepperData.data[currentIndex] = {
title,
value
};
}
// Mise à jour du step et des états des étapes si nécessaire
if (targetStep) {
this.stepperData.currentStep = targetStep;
this.stepperData.steps = this.stepperData.steps.map(step => ({
...step,
completed: step.id < targetStep
}));
}
// Alpine.persist se charge automatiquement de la persistance
return this.stepperData;
},
completeStepperData(appointmentId) {
if (!this.stepperData) return;
// Marquer toutes les étapes comme complétées
this.stepperData.steps = this.stepperData.steps.map(step => ({
...step,
completed: true
}));
// Marquer le stepper comme complété et ajouter l'ID du rendez-vous
this.stepperData.completed = true;
this.stepperData.appointmentId = appointmentId;
},
goToStepperStep(targetStep) {
// Vérifier que l'étape cible est valide
if (!this.stepperData || targetStep < 1 || targetStep > 4) return;
// Si on retourne à l'étape 1, réinitialiser complètement
if (targetStep === 1) {
this.resetStepperData();
this.$store.asideBlocs.closeAside('storeLocatorAppointment');
return;
}
// Mettre à jour l'étape courante et l'état des étapes
this.stepperData.currentStep = targetStep;
this.stepperData.steps = this.stepperData.steps.map(step => ({
...step,
completed: step.id < targetStep
}));
},
resetStepperData() {
// Réinitialiser avec les valeurs par défaut
this.stepperData = Alpine.persist({
...this.defaultStepperState
}, 'stepperData');
}
});
});
</script>
</body>
</html>
{% extends '@layout' %}
{% block yield %}
<header class="sticky top-0 left-0 right-0 z-40">
{% block page_header %}
{% render "@pre-header" %}
{% render "@header-main" %}
{% endblock %}
</header>
<main class="{{ layout_wrapper_class is defined ? layout_wrapper_class : _target.meta.layout_wrapper_class }}">
{% block page_content %}
{{ yield }}
{% endblock %}
</main>
{% render "@footer-main" %}
{% endblock %}
/* No context defined. */
No notes defined.