<section class="container my-16">
<div class="container mx-auto px-4">
<!-- Grid container pour le layout principal -->
<div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-3 gap-0 lg:gap-x-16 xl:gap-0 lg:relative">
<!-- Colonne gauche: Images et description -->
<div class="xl:col-span-2 order-1 xl:pr-32 pb-8">
<div x-data="initCarouselcarousel1776892744()" x-init="init()" class="relative w-full max-w-7xl mx-auto">
<div x-ref="swiperContainer" id="carousel-1776892744" class="swiper lg:h-full">
<div class="swiper-wrapper lg:!flex lg:!transform-none lg:flex-wrap lg:gap-4">
<div data-hash="index-carousel-1776892744-0" style="display: block;" x-cloak x-show="isVisible(0)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-full ">
<img src="/img/productsSlider/products2.png" alt="Lunettes vue face" class="w-full h-full object-cover aspect-square">
<div class="absolute bottom-4 hidden lg:flex gap-2 w-full justify-center">
<button type="button" class=" btn btn-light 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="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
Essai virtuel
</button>
<button type="button" class=" btn btn-light 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="M7.79381 4.59345C8.73854 2.70412 10.1824 1.25 12 1.25C13.2857 1.25 14.391 1.98838 15.2432 3.05936C16.0299 4.04789 16.6567 5.38171 17.086 6.91367C17.6391 7.06875 18.1634 7.24872 18.6531 7.45112C20.4578 8.19701 21.9203 9.30335 22.4949 10.7177C22.6507 11.1015 22.466 11.539 22.0823 11.6949C21.6985 11.8507 21.261 11.666 21.1051 11.2823C20.7527 10.4147 19.7342 9.52099 18.0802 8.83738C16.4549 8.16567 14.3362 7.75 12 7.75C10.621 7.75 9.31935 7.89477 8.15083 8.15084C7.89477 9.31935 7.75 10.621 7.75 12C7.75 13.379 7.89477 14.6807 8.15084 15.8492C9.31935 16.1052 10.621 16.25 12 16.25C13.9192 16.25 15.6883 15.9698 17.1575 15.499L14.8653 14.3811C14.493 14.1995 14.3383 13.7506 14.5199 13.3783C14.7015 13.006 15.1504 12.8513 15.5227 13.0329L19.3367 14.8929C19.709 15.0745 19.8637 15.5234 19.6821 15.8957L17.8221 19.7097C17.6405 20.082 17.1916 20.2367 16.8193 20.0551C16.447 19.8735 16.2923 19.4246 16.4739 19.0523L17.491 16.9667C15.8784 17.4677 13.9967 17.75 12 17.75C10.8172 17.75 9.67441 17.6509 8.60397 17.4659C8.76325 17.9227 8.9414 18.3476 9.13544 18.7357C10.0005 20.4656 11.0566 21.25 12 21.25C12.2392 21.25 12.4787 21.2021 12.7181 21.105C13.102 20.9493 13.5393 21.1343 13.695 21.5181C13.8507 21.902 13.6657 22.3393 13.2819 22.495C12.8753 22.6599 12.4448 22.75 12 22.75C10.1824 22.75 8.73854 21.2959 7.79381 19.4066C7.44755 18.7141 7.15134 17.9337 6.91372 17.0863C6.06628 16.8487 5.28593 16.5525 4.59345 16.2062C2.70412 15.2615 1.25 13.8176 1.25 12C1.25 10.1824 2.70412 8.73854 4.59345 7.79381C5.28593 7.44755 6.06628 7.15134 6.91372 6.91372C7.15134 6.06628 7.44755 5.28593 7.79381 4.59345ZM8.60397 6.53414C9.67441 6.34914 10.8172 6.25 12 6.25C13.1838 6.25 14.3264 6.34926 15.396 6.53412C15.0334 5.49372 14.5772 4.63131 14.0695 3.99339C13.3825 3.13012 12.6663 2.75 12 2.75C11.0566 2.75 10.0005 3.53438 9.13544 5.2643C8.9414 5.65236 8.76325 6.07729 8.60397 6.53414ZM6.53414 8.60397C6.07729 8.76325 5.65236 8.9414 5.2643 9.13544C3.53438 10.0005 2.75 11.0566 2.75 12C2.75 12.9434 3.53438 13.9995 5.2643 14.8646C5.65236 15.0586 6.07729 15.2367 6.53414 15.396C6.34914 14.3256 6.25 13.1828 6.25 12C6.25 10.8172 6.34914 9.67441 6.53414 8.60397Z" fill="currentColor" />
</svg>
Vue 3D
</button>
</div>
</div>
<div data-hash="index-carousel-1776892744-1" style="display: block;" x-cloak x-show="isVisible(1)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-2" style="display: block;" x-cloak x-show="isVisible(2)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_1.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-3" style="" x-cloak x-show="isVisible(3)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_2.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-4" style="" x-cloak x-show="isVisible(4)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_3.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-5" style="" x-cloak x-show="isVisible(5)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-full ">
<img src="/img/productSolaire/img_4.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-6" style="" x-cloak x-show="isVisible(6)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-full ">
<img src="/img/productSolaire/img_1.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-7" style="" x-cloak x-show="isVisible(7)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_2.png" alt="Lunettes vue côté" class="w-full h-full object-cover aspect-square">
</div>
<div data-hash="index-carousel-1776892744-8" style="" x-cloak x-show="isVisible(8)" x-transition:enter="transition-opacity duration-500" x-transition:enter-start="opacity-0" x-transition:enter-end="opacity-100" x-transition:leave="transition-opacity duration-300" x-transition:leave-start="opacity-100" x-transition:leave-end="opacity-0" class="swiper-slide relative overflow-hidden lg:!mr-0 lg:!w-[calc(50%_-_8px)] ">
<img src="/img/productSolaire/img_3.png" alt="Lunettes vue angle" class="w-full h-full object-cover aspect-square">
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-1776892744 swiper-pagination lg:hidden swiper-light"></div>
</div>
<div x-ref="pdpButtonProductGallerie" class="hidden lg:flex gap-2 w-full justify-center mt-4">
<button type="button" x-show="visibleItems < maxItems" @click="showMore" class=" btn btn-dark-ghost ">
Voir plus
</button>
<button type="button" x-show="visibleItems > 3" @click="showLess" class=" btn btn-dark-ghost ">
Voir moins
</button>
</div>
</div>
<script>
function initCarouselcarousel1776892744() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1,
"tablet": 1,
"desktop": 1
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
componentId: 'carousel-1776892744',
visibleItems: 3,
maxItems: 9,
showMore() {
this.visibleItems = Math.min(this.visibleItems + 3, this.maxItems);
this.scrollToLastVisible();
},
showLess() {
this.visibleItems = Math.max(3, this.visibleItems - 3);
this.scrollToLastVisible();
},
scrollToLastVisible() {
// Attendre que le DOM soit mis à jour
setTimeout(() => {
const lastVisibleItem = document.querySelector(`[data-hash="index-${this.componentId}-${this.visibleItems - 1}"]`);
if (lastVisibleItem) {
lastVisibleItem.scrollIntoView({
behavior: 'smooth',
block: "end"
});
}
}, 100);
},
isVisible(index) {
return this.$store.screen.isTablet || index < this.visibleItems;
},
init() {
this.$watch('$store.screen.isTablet', (isTablet) => {
if (isTablet && !this.swiper) {
this.initSwiper();
} else if (!isTablet && this.swiper) {
this.swiper.destroy(true, true);
this.swiper = null;
}
});
if (this.$store.screen.isTablet) {
this.initSwiper();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
}
}
});
},
};
}
</script>
</div>
<!-- Colonne droite: Fiche produit sticky -->
<div class="relative row-span-2 xl:col-span-1 order-2 pb-14 lg:pb-0">
<div class="md:sticky md:top-36 space-y-12">
<div class="space-y-4">
<div class="flex items-center justify-between">
<div class="text-neutral-500 uppercase font-semibold text-xxs">Nouveauté - Alain Afflelou</div>
<div class="text-xs font-medium flex items-center gap-2 text-green-700 before:bg-green-700 before:rounded-full before:w-2 before:h-2">En stock</div>
</div>
<div>
<h1 class="text-4xl font-medium text-neutral-800">Caractères Optimiste</h1>
</div>
<div>
<div class="uppercase text-neutral-500 text-xxs">Prix web</div>
<div class="flex gap-2 font-medium items-baseline">
<div class="text-neutral-800 text-2xl">99,00 €</div>
<div class="text-neutral-500 text-sm">143,00 €</div>
<div class="text-green-700 text-sm">30 % de réduction</div>
</div>
</div>
</div>
<div class="border-t border-b border-neutral-300">
<div x-data x-init="$store.asideBlocs.addAside('pdpColor')" @click="$store.asideBlocs.toggleAside('pdpColor')" class="py-6 border-b border-neutral-300 flex items-center gap-4">
<div class="aspect-square border border-neutral-200 w-14 h-14 rounded">
<img src="/img/productSolaire/img_8.png" class="w-14 h-14 border border-neutral-200 rounded" />
</div>
<div>
<div class="text-neutral-900 font-semibold">Vert</div>
<div class="text-neutral-500 font-medium">Voir les 2 couleurs disponibles</div>
</div>
<svg class="ml-auto self-start shrink-0" width="24" 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>
</div>
<div class="py-6">
<div class="flex items-center justify-between">
<div class="font-semibold">Taille</div>
<div class="flex items-center gap-2 font-medium text-xs text-dark-80">
<label class="cursor-pointer">
<input class="sr-only peer" type="radio" name="selectable">
<span class="btn btn-dark-ghost btn-size-sm peer-checked:bg-white peer-checked:btn-dark-subtle">55</span>
</label>
<label class="cursor-pointer">
<input class="sr-only peer" type="radio" name="selectable">
<span class="btn btn-dark-ghost btn-size-sm peer-checked:bg-white peer-checked:btn-dark-subtle">58</span>
</label>
</div>
</div>
</div>
</div>
<div class="space-y-6">
<!-- Promotion -->
<div class="bg-gray-50 p-6 rounded-lg flex items-center gap-4 border border-neutral-300">
<svg width="90" height="40" viewBox="0 0 90 40" fill="none" xmlns="http://www.w3.org/2000/svg" class="min-w-[90px]">
<path fill-rule="evenodd" clip-rule="evenodd" d="M68.6493 1.2807C67.74 0.42496 66.0074 0.218301 64.2719 0.0407496H64.269L64.2299 0.0393526C63.8358 0.0252678 63.4441 0.0112702 63.0499 0C62.1577 0.037839 61.3316 0.0902314 60.5399 0.244499C60.0379 0.375482 59.5351 0.506465 59.0324 0.637449C58.5297 0.768427 58.027 0.899405 57.525 1.03038C57.466 1.04681 57.3944 1.06739 57.3164 1.08982C56.9661 1.19056 56.4861 1.32859 56.4321 1.29526C56.4172 1.28706 56.3979 1.23703 56.3694 1.16286C56.2665 0.894774 56.0423 0.311247 55.4626 0.247409C55.2674 0.227033 55.0752 0.259051 54.9519 0.320176C54.6306 0.474442 54.4356 0.788796 54.3208 1.21085C54.301 1.28628 54.2886 1.37255 54.2763 1.4593C54.2476 1.66043 54.2185 1.86416 54.0942 1.94143C53.5105 2.21792 52.9261 2.49441 52.3417 2.7709C51.7571 3.04744 51.1726 3.32398 50.5888 3.60052C50.1753 3.80565 49.8559 3.9517 49.5733 4.08096C48.9776 4.35339 48.5449 4.55125 47.7375 5.07043C47.6812 5.10682 47.6063 5.15235 47.5179 5.20603C46.7659 5.66317 45.0411 6.71153 45.5058 7.74826C45.9361 8.70005 46.7192 8.31293 47.3502 7.94618C48.3048 7.38532 49.0132 7.05559 49.7558 6.70993C50.3543 6.43132 50.9751 6.14236 51.7649 5.71369C51.8145 5.68687 51.9101 5.63205 52.0328 5.56163C52.5494 5.26523 53.5478 4.69245 53.6267 4.76771C53.55 5.46364 53.472 6.15956 53.3939 6.85583C53.3113 7.59231 53.2287 8.32917 53.1476 9.06679C53.0788 9.96329 53.0099 10.8598 52.9382 11.7563C52.919 12.1269 52.9025 12.4976 52.8859 12.8682C52.8777 13.0535 52.8694 13.2388 52.8608 13.4241C52.8754 14.0844 52.8568 14.7511 52.8383 15.4126C52.8134 16.3053 52.7887 17.1887 52.8464 18.0346C52.9382 19.4173 53.073 20.8842 53.991 21.5885C54.3753 21.8797 55.3162 21.836 55.6261 21.6409C55.8642 21.4925 56.0764 21.2597 56.1998 20.9599C56.567 20.0721 56.5096 17.6912 56.0248 17.3099C55.8254 17.0859 55.6586 17.1643 55.5456 17.2174C55.4913 17.243 55.4494 17.2627 55.4223 17.24C55.3587 17.1888 55.3437 16.7915 55.3313 16.4604C55.3274 16.3589 55.3238 16.2635 55.3192 16.1863C55.2445 14.9289 55.3305 13.2582 55.385 12.2773C55.4258 11.5794 55.4766 10.9606 55.5201 10.4313C55.5379 10.2144 55.5545 10.0126 55.5686 9.82649C55.5869 9.62545 55.6057 9.41872 55.6246 9.21075C55.73 8.04869 55.8389 6.84817 55.89 6.38896C55.9474 5.84757 56.2141 4.10116 56.2801 3.97891C56.334 3.87442 57.3207 3.59766 57.8068 3.46131C57.8893 3.43814 57.9575 3.41903 58.0041 3.4055C59.7912 2.89904 61.5152 2.52648 63.6408 2.41005C64.3293 2.37512 65.5369 2.37803 66.257 2.57887C66.4436 2.64564 66.5762 2.69646 66.7054 2.74597C66.8521 2.80221 66.9944 2.85676 67.2065 2.93107C67.8719 3.1028 68.6694 3.09988 68.9562 2.76515C69.0252 2.68947 69.1055 2.50028 69.1227 2.36348C69.1845 1.78152 68.957 1.56863 68.6671 1.29731L68.6493 1.2807ZM80.4994 13.4008C80.7949 13.5726 81.0272 13.9393 81.1161 14.2799L81.1219 14.2857C81.2768 14.9027 81.2079 16.2503 81.0215 17.0537C81.0009 17.2167 80.9817 17.3805 80.9626 17.5446C80.9444 17.7 80.9262 17.8557 80.9067 18.0113C80.8286 18.4824 80.7505 18.9528 80.6724 19.4232C80.5956 19.8857 80.5188 20.3482 80.442 20.8114C80.3937 21.0127 80.3558 21.236 80.3173 21.4631C80.2071 22.1127 80.0917 22.7926 79.7134 23.073C79.3893 23.3146 79.0048 23.204 78.6378 23.0817C78.2074 22.9391 77.9578 22.7966 77.8001 22.4473C77.6021 22.0048 78.0554 19.7577 78.1873 19.2048C78.2418 18.966 78.4197 18.0259 78.3996 17.8338C78.3938 17.8221 78.3852 17.8134 78.3824 17.8018C78.3565 17.7988 78.3307 17.796 78.3078 17.7931C77.8368 18.2876 77.4198 18.9261 76.9973 19.5729C76.3059 20.6316 75.6 21.7125 74.6188 22.2202C73.7411 22.6742 72.4273 22.3338 72.0055 21.5915C71.5265 20.7474 72.2637 17.7464 72.5333 16.6666C72.5475 16.6095 72.5639 16.5466 72.5814 16.4794C72.7128 15.9748 72.907 15.2288 72.6969 14.8795C72.3245 14.8672 71.7869 15.6762 71.4778 16.1414C71.4202 16.2281 71.3706 16.3028 71.3314 16.3581C71.0511 16.7519 70.7956 17.1579 70.5435 17.5586C69.8359 18.6832 69.1539 19.7671 68.0182 20.4301C67.3843 20.8027 66.2398 21.0152 65.5571 20.366C65.2873 20.1128 65.0636 19.7636 64.9603 19.3706C64.9399 19.2607 64.9186 19.1516 64.8975 19.043C64.88 18.9531 64.8625 18.8636 64.8456 18.774C64.8226 18.771 64.7968 18.7681 64.771 18.7651C64.4833 19.0517 64.1115 19.288 63.7636 19.5091C63.7369 19.5261 63.7103 19.543 63.6839 19.5598L63.6506 19.5814C62.611 20.253 61.5352 20.948 60.1813 21.2073C58.4659 21.5391 57.1751 20.6193 56.7993 19.4114C56.4264 18.2035 56.8366 16.1863 57.2353 14.9435C58.3339 11.5176 60.1641 9.33458 62.3959 7.37569C62.4719 7.30916 62.5463 7.24258 62.6199 7.17669C63.3322 6.53912 63.973 5.96554 65.3562 6.12119C65.8898 6.1823 66.3086 6.30747 66.6643 6.51703C67.172 6.81684 67.6625 7.36114 67.5765 8.15866C67.5564 8.31875 67.4876 8.46138 67.4187 8.55742C67.3011 8.72334 67.1548 8.81066 67.0171 8.87469C66.5551 9.08303 66.0725 8.83901 65.6495 8.62513C65.3161 8.45654 65.0197 8.30668 64.7997 8.4119C64.4784 8.56325 63.8474 8.97947 63.5863 9.19196C62.089 10.4144 61.0993 11.765 60.0867 13.5754C59.5072 14.6087 58.7242 16.1659 58.9307 17.7028C59.0024 18.2355 59.1801 18.9806 59.9031 18.9486C61.4091 18.8788 63.3052 17.662 64.2088 16.786C64.4239 16.5929 64.6412 16.401 64.858 16.2095C64.991 16.0921 65.1239 15.9748 65.2558 15.8575C65.2873 15.7226 65.318 15.5878 65.3487 15.453C65.3796 15.3171 65.4106 15.1812 65.4422 15.0454C65.6545 14.4195 65.864 13.7966 66.0734 13.1709C66.1226 13.0347 66.1718 12.8983 66.2211 12.7618C67.0731 10.4014 67.9367 8.00906 69.0566 5.97565C69.9144 4.41843 70.8409 2.75643 72.5965 2.33438C72.9981 2.26742 73.3309 2.38386 73.5575 2.5061C74.8253 3.21049 74.1713 5.67876 73.6607 7.00312C72.6941 9.51795 71.4835 11.9338 70.0406 13.9015C69.6505 14.4341 69.2373 14.9493 68.79 15.415C68.6815 15.5066 68.5732 15.5999 68.4644 15.6934C68.3658 15.7782 68.267 15.8633 68.1674 15.9476C68.0354 16.1311 67.7142 17.2079 67.6798 17.5049C67.6884 17.5195 67.6998 17.5369 67.7142 17.5515L67.732 17.5535C67.7517 17.5557 67.7711 17.5579 67.7888 17.5602C68.3095 16.9758 68.7391 16.3185 69.1636 15.669C69.9061 14.533 70.6331 13.4208 71.8047 12.7634C72.02 12.6411 72.2552 12.5101 72.6338 12.3966C73.2993 12.2045 74.1197 12.4112 74.5643 12.7663C75.5311 13.5406 75.0319 16.035 74.6418 17.5195C74.4553 18.2209 74.3234 19.0272 74.5643 18.9835C74.6221 18.9727 75.0006 18.481 75.3356 18.0458C75.4498 17.8974 75.559 17.7556 75.6487 17.6417C76.2195 16.8791 76.7932 16.1194 77.3669 15.3597C77.4712 15.2194 77.5722 15.0754 77.6732 14.9314C77.9138 14.5883 78.1541 14.2458 78.437 13.9567C78.8212 13.5667 79.636 12.906 80.4994 13.4008ZM69.9106 9.39066C69.8019 9.65508 69.6938 9.91787 69.5845 10.1758H69.5817C69.5197 10.3234 69.4538 10.4739 69.3866 10.6272C69.0869 11.3112 68.7624 12.0518 68.6523 12.8507C68.6594 12.858 68.6658 12.866 68.6723 12.874C68.6787 12.882 68.6852 12.89 68.6923 12.8973C68.7154 12.8973 68.7411 12.9002 68.764 12.9031C69.7079 11.7608 70.3396 10.1948 70.957 8.66403C71.1089 8.28741 71.26 7.91294 71.4146 7.54742C71.4294 7.51274 71.4506 7.46479 71.4763 7.40659C71.6752 6.95677 72.145 5.89396 72.0256 5.60016C72.0028 5.56524 71.9797 5.56815 71.9424 5.5827C71.0638 6.58663 70.4781 8.01076 69.9106 9.39066ZM81.0731 10.2398C80.901 10.1437 80.6543 10.0768 80.2269 10.0623C79.7995 10.0506 79.2687 10.3213 79.0107 10.8248C78.4111 11.9891 79.2574 13.1214 80.5424 12.9846C81.8361 12.8449 82.1889 10.8452 81.0731 10.2398ZM88.7868 14.6466C88.4797 14.4836 88.0954 14.3817 87.579 14.3381L87.5819 14.3351C87.1889 14.3003 86.9307 14.3264 86.555 14.4254C85.8478 14.6125 85.3185 15.1877 84.8379 15.7099C84.7726 15.7808 84.7083 15.8507 84.6445 15.9186C84.6186 15.9156 84.5957 15.9127 84.5699 15.9099C84.4558 15.6968 84.4302 15.4892 84.4055 15.2892C84.3682 14.9865 84.333 14.701 83.9962 14.4399C83.4512 14.015 82.6222 14.1983 82.3438 14.6117C82.2321 14.7834 82.1574 15.1094 82.1201 15.3568C82.0577 15.7671 82.0295 16.1984 82.0023 16.6135C81.9696 17.1141 81.9383 17.5911 81.8505 17.9793C81.8266 18.0855 81.8028 18.1913 81.7791 18.2966C81.5933 19.1241 81.4133 19.9253 81.1792 20.692L81.1524 20.7768C81.0581 21.0746 80.9638 21.3726 80.8694 21.673C80.8105 21.7714 80.7156 21.8303 80.6181 21.8908C80.5023 21.9628 80.3828 22.0369 80.3158 22.1824C80.0376 22.782 80.1896 23.3088 80.4564 23.5854C80.617 23.7483 80.9125 23.891 81.2366 23.9288C82.2149 24.0394 82.5304 23.431 82.8775 22.7616C82.9832 22.5593 83.0889 22.3562 83.1948 22.1528C83.9452 20.7114 84.7049 19.2522 85.5394 17.9182C85.5758 17.8605 85.6131 17.7996 85.6515 17.7369C85.9581 17.2355 86.338 16.6142 86.9422 16.5676C87.1143 16.5763 87.2319 16.6287 87.3151 16.6753C87.8229 16.9635 87.7368 17.8658 87.5102 18.608C87.4367 18.8504 87.3347 19.1554 87.2186 19.5027C86.6276 21.2699 85.6703 24.1327 86.2337 25.4219C86.6841 26.4523 88.5141 27.0402 89.3805 26.0478C89.7764 25.5967 89.7104 24.6855 89.2199 24.4119C89.0795 24.3331 88.8384 24.3416 88.6519 24.3481C88.5906 24.3503 88.5352 24.3523 88.4912 24.3508C88.2505 23.9558 88.6981 22.6648 88.9131 22.0448C88.9389 21.9705 88.9613 21.9058 88.9788 21.8534C89.7104 19.6559 90.9467 15.8079 88.7868 14.6466ZM21.2003 2.91942C20.1189 2.40132 18.085 2.63127 16.9147 2.86703H16.9176C16.2944 2.9935 15.6203 3.20141 15.3706 3.27844C15.3617 3.28118 15.3533 3.28376 15.3455 3.28616C15.1162 3.35312 13.8482 3.84793 13.1311 4.21759C12.6259 4.51827 12.1216 4.8208 11.6177 5.12309C11.2289 5.35631 10.8404 5.5894 10.4518 5.82137C10.3957 5.85613 10.327 5.89959 10.2522 5.94688C9.94518 6.14116 9.53593 6.40009 9.47364 6.38605C9.45801 6.38239 9.43495 6.34333 9.40044 6.28487C9.27028 6.06437 8.97729 5.56804 8.30613 5.65547C8.11394 5.68167 7.88732 5.77189 7.78405 5.86504C7.52014 6.10371 7.41688 6.46173 7.42261 6.89833C7.42349 6.97891 7.43523 7.06748 7.44697 7.15607C7.47341 7.35548 7.49986 7.55501 7.40254 7.66384C6.43009 8.52541 5.46051 9.38697 4.49093 10.2485C3.70631 10.9672 3.02202 11.7798 2.34186 12.5874C2.10196 12.8722 1.86258 13.1565 1.61949 13.4358C1.57578 13.4859 1.51719 13.5495 1.44817 13.6246C0.851394 14.2732 -0.524338 15.7684 0.211031 16.6346C0.882276 17.4292 1.53057 16.8384 2.03257 16.3057C2.38329 15.9343 2.73197 15.5617 3.08059 15.1893C4.1035 14.0964 5.12588 13.0041 6.19773 11.9426C6.23383 11.9064 6.30033 11.8373 6.38613 11.748C6.79127 11.3264 7.62676 10.4571 7.72382 10.5076C7.83185 11.1521 7.94048 11.7973 8.04916 12.4427C8.17999 13.2197 8.3109 13.9972 8.44096 14.7747C8.52953 15.2139 8.61881 15.6524 8.70809 16.0908C8.79809 16.5328 8.8881 16.9748 8.97737 17.4176C9.0492 17.7172 9.12015 18.0177 9.19119 18.3187C9.24782 18.5586 9.30451 18.7987 9.36177 19.0389C9.55755 19.6708 9.72305 20.3181 9.88723 20.9603C10.1079 21.8235 10.3262 22.6773 10.6125 23.4717C11.0829 24.7758 11.8029 26.3038 12.6893 26.5426C13.5126 26.7609 13.9744 26.4582 14.2182 26.1816C14.4076 25.9691 14.5997 25.6578 14.637 25.3375C14.7747 24.1937 14.0289 22.2377 13.5355 21.8331C13.2633 21.6133 13.0943 21.7693 12.9837 21.8713C12.9347 21.9166 12.8971 21.9513 12.8672 21.9378C12.7934 21.9048 12.6802 21.5537 12.5823 21.2498C12.5508 21.152 12.5208 21.059 12.4942 20.9832C12.1193 19.9224 11.7949 18.4838 11.5746 17.507C11.5489 17.3928 11.5245 17.285 11.5017 17.1848C11.3237 16.4027 11.1839 15.7157 11.0683 15.1477C11.0424 15.0202 11.0177 14.8987 10.994 14.7834C10.7502 13.4795 10.4719 11.9571 10.3801 11.4215C10.2883 10.8831 10.0273 9.14539 10.056 9.00859C10.0821 8.88658 11.0681 8.27396 11.4579 8.03181C11.4958 8.00822 11.5281 7.98814 11.5534 7.97238C13.1311 6.97983 14.6743 6.16775 16.6852 5.45464C17.3364 5.22469 18.5067 4.85793 19.2526 4.8463C19.4434 4.85816 19.582 4.86882 19.7156 4.8791C19.8772 4.89153 20.0315 4.9034 20.2623 4.91615C20.9479 4.88996 21.7139 4.66584 21.9002 4.26125C21.9434 4.16811 21.9719 3.96436 21.9491 3.82755C21.8486 3.2396 21.5705 3.09697 21.2003 2.91942ZM37.7397 16.8855C37.7947 17.3665 37.8497 17.8476 37.904 18.3286V18.3316C37.9123 18.5401 37.937 18.7677 37.9622 18.999C38.0333 19.6521 38.1076 20.3356 37.8237 20.7096C37.577 21.0356 37.1783 21.0356 36.791 21.0239C36.3378 21.0065 36.0596 20.9395 35.8129 20.6485C35.5002 20.2788 35.3195 17.9939 35.2964 17.4263C35.2851 17.1789 35.1589 16.2329 35.1243 16.0495L35.0985 16.0234L35.0956 16.0237C35.0708 16.0265 35.0461 16.0293 35.0239 16.035C34.7061 16.6435 34.4804 17.3748 34.2518 18.1154C33.878 19.3266 33.4965 20.5625 32.6919 21.3266C31.9746 22.0106 30.6179 22.0543 30.0097 21.4604C29.4062 20.8711 29.2612 18.3717 29.1825 17.0148C29.1714 16.8238 29.1616 16.6554 29.1521 16.5182C29.1148 16.0059 28.9886 14.9551 28.8249 14.8445C28.5566 14.8474 28.0881 16.1793 27.9369 16.6092L27.93 16.6287C27.765 17.0967 27.631 17.572 27.4987 18.0415C27.139 19.318 26.7916 20.5507 25.8647 21.4721C25.2392 22.095 24.4963 22.6131 23.4809 22.1067C23.151 21.9437 22.8412 21.6642 22.6375 21.3179C22.5894 21.2204 22.5397 21.1296 22.4897 21.0384C22.4471 20.9607 22.4043 20.8827 22.3622 20.7998C22.3448 20.7736 22.3077 20.7881 22.2903 20.8144C22.0764 21.1964 21.7377 21.5842 21.449 21.9149L21.4441 21.9204C20.6209 22.8664 19.6972 23.891 18.4552 24.5313C16.8975 25.3346 15.5004 24.7205 14.8091 23.6639C14.1178 22.6074 13.9601 20.5552 14.0031 19.2484C14.1207 15.645 15.2797 13.0312 16.886 10.5221C16.9389 10.4391 16.9903 10.3566 17.0411 10.2749C17.5504 9.4566 18.0075 8.72231 19.3846 8.47884C19.9152 8.38569 20.3512 8.39152 20.75 8.49048C21.3208 8.6331 21.9434 9.02314 22.0782 9.80902C22.104 9.97203 22.0723 10.1292 22.035 10.2398C21.9663 10.4319 21.8516 10.56 21.7367 10.656C21.3508 10.9889 20.8189 10.891 20.3532 10.8052C19.9881 10.738 19.6636 10.6782 19.4821 10.8394C19.2153 11.0752 18.7247 11.6544 18.5298 11.9338C17.4253 13.5318 16.8459 15.1065 16.3697 17.1324C16.0972 18.2879 15.7731 20.0023 16.3926 21.4227C16.6078 21.9145 16.9835 22.5811 17.6662 22.3425C19.0949 21.8505 20.5836 20.1507 21.2089 19.0504C21.3339 18.8522 21.4524 18.6533 21.5709 18.4544C21.6891 18.256 21.8072 18.0576 21.9319 17.8599C21.9247 17.7221 21.9268 17.5554 21.9289 17.3864C21.9311 17.2163 21.9333 17.044 21.926 16.8966C21.9222 16.4017 21.9469 16.037 21.973 15.6504C21.9858 15.4617 21.9989 15.2679 22.0092 15.0511C22.0159 14.9527 22.0224 14.8542 22.029 14.7557C22.2001 12.2017 22.3738 9.60639 22.8986 7.29709C23.2973 5.55651 23.7304 3.69949 25.2996 2.79717C25.6666 2.61963 26.0196 2.63708 26.2691 2.69239C27.6833 3.00965 27.7292 5.56232 27.603 6.98274C27.3678 9.66931 26.8686 12.3297 26.0196 14.6291C25.793 15.252 25.5348 15.8603 25.2335 16.4338C25.1607 16.546 25.0872 16.6583 25.0137 16.7705C24.9366 16.8882 24.8595 17.0059 24.7833 17.1235C24.7057 17.336 24.6914 18.4625 24.7401 18.7564C24.7487 18.7623 24.7566 18.7681 24.7645 18.7739C24.7724 18.7798 24.7803 18.7856 24.7889 18.7914C24.8118 18.7885 24.8378 18.7856 24.8606 18.7798C25.2014 18.0713 25.434 17.3176 25.6638 16.5726C26.0649 15.2731 26.4577 14.0001 27.4022 13.0399C27.5743 12.8623 27.7636 12.6702 28.0992 12.4548C28.6874 12.0794 29.5278 12.0473 30.0556 12.2627C31.1973 12.7314 31.4009 15.2695 31.4325 16.8064C31.4468 17.5339 31.5099 18.3403 31.7453 18.2646C31.8519 18.2327 32.0576 17.6689 32.2435 17.1593C32.3126 16.9698 32.379 16.7877 32.4366 16.6433C32.7779 15.7497 33.1193 14.8562 33.4606 13.9654C33.5231 13.7994 33.5813 13.6307 33.6395 13.4623C33.776 13.0668 33.9121 12.6724 34.1032 12.3151C34.3642 11.829 34.9666 10.9646 35.9334 11.1974C36.2661 11.276 36.5902 11.5642 36.7681 11.8669C37.0893 12.4141 37.3905 13.7297 37.4307 14.5535C37.4538 14.7037 37.4782 14.8539 37.5027 15.0044C37.5298 15.1718 37.5571 15.3396 37.5827 15.5082C37.6346 15.9673 37.6871 16.4264 37.7397 16.8855ZM24.3429 13.4183C24.3551 13.4161 24.3673 13.4139 24.3787 13.4125V13.4095C25.0142 12.0734 25.2497 10.4041 25.4799 8.77227C25.5375 8.36358 25.5949 7.95724 25.658 7.55906C25.6635 7.52512 25.6712 7.47986 25.6805 7.42571C25.7594 6.96449 25.9488 5.85805 25.7614 5.60016C25.7327 5.57397 25.7098 5.58853 25.6754 5.6118C25.3052 6.28126 25.1189 7.14283 24.9495 7.9258C24.8064 8.5853 24.6956 9.232 24.5773 9.92235C24.5463 10.1034 24.5148 10.2875 24.482 10.4756C24.3299 11.34 24.2066 12.3792 24.2582 13.3892C24.2726 13.4008 24.2898 13.4125 24.307 13.4241C24.3185 13.4226 24.3307 13.4205 24.3429 13.4183ZM35.5402 8.01555C35.3451 7.98352 35.0509 7.93519 34.7113 8.0626V8.06553C34.3642 8.19359 33.9024 8.5778 33.7905 9.13374C33.5352 10.4232 34.6568 11.2731 35.853 10.7754C37.0607 10.2776 36.8197 8.21979 35.5431 8.01604L35.5402 8.01555ZM44.2349 10.0564C43.8965 9.98367 43.5494 9.97493 43.0388 10.0797V10.0884C42.6544 10.1641 42.3647 10.2835 42.0318 10.4843C41.3935 10.8668 41.0415 11.5631 40.7178 12.2035C40.6794 12.2795 40.6414 12.3548 40.6033 12.4286C40.6008 12.4332 40.5985 12.4381 40.5961 12.4429C40.5822 12.4715 40.5689 12.4989 40.5345 12.4665C40.456 12.3531 40.3975 12.2198 40.337 12.0817C40.1938 11.7554 40.0387 11.4018 39.5793 11.2178C38.9395 10.9617 38.1679 11.407 38.0159 11.8843C37.9556 12.0765 37.9786 12.417 38.0101 12.6673C38.0611 13.0854 38.1547 13.5085 38.2482 13.9309C38.3441 14.3643 38.4398 14.797 38.4893 15.2229C38.601 16.1805 38.6039 17.112 38.5897 18.0172C38.5811 18.3606 38.5725 18.704 38.561 19.0476C38.531 19.1573 38.4567 19.2399 38.3805 19.3247C38.2888 19.4267 38.1943 19.5319 38.1708 19.6909C38.0646 20.3457 38.3572 20.8114 38.6901 20.9977C38.888 21.1083 39.215 21.1637 39.5363 21.1083C40.5033 20.937 40.6399 20.2706 40.7916 19.5305L40.7927 19.5249C40.8261 19.3601 40.8595 19.1949 40.8929 19.0294C41.2267 17.3765 41.5665 15.694 42.0175 14.1198C42.1867 13.5289 42.4909 12.6382 42.9929 12.4257C43.1593 12.385 43.2883 12.3995 43.3801 12.4228C43.9137 12.5451 44.0456 13.3601 44.0829 14.2216C44.0962 14.516 44.0796 14.981 44.0598 15.5379C44.0112 16.9027 43.9429 18.8197 44.2464 20.1304C44.3439 20.5437 44.5275 20.8871 44.7255 21.1257C45.4368 21.9902 47.4248 22.1213 47.9354 20.8405C48.1591 20.2788 47.878 19.4347 47.3301 19.3095C47.1761 19.2748 46.9486 19.3502 46.7715 19.4088C46.7112 19.4288 46.6567 19.4469 46.613 19.458C46.2896 19.1644 46.3414 17.9171 46.3699 17.2301C46.375 17.1067 46.3794 17.0013 46.3807 16.9228C46.3839 16.7444 46.3887 16.5533 46.3938 16.3526C46.4389 14.5728 46.5029 12.0423 45.6033 10.9646C45.2161 10.4989 44.7972 10.1758 44.2349 10.0564ZM80.883 29.3915C79.3231 29.2486 77.7684 28.9719 76.2095 28.6945C75.1969 28.5143 74.1825 28.3338 73.1637 28.1894C70.7368 27.8458 68.2872 27.5548 65.8259 27.3162C60.8632 26.8358 55.8347 26.5972 50.806 26.5826C41.0758 26.5565 31.2452 27.3219 22.4875 30.1687C20.1611 30.9254 18.1244 28.6929 20.4422 28.0409C27.6939 25.9976 35.5797 25.1215 43.474 24.8508C51.7555 24.5655 60.1088 24.9497 68.2383 25.9015C70.5217 26.1694 72.7879 26.4865 75.031 26.8534C75.3474 26.9051 75.6678 26.9561 75.9906 27.0075L75.991 27.0076C77.922 27.3151 79.9384 27.6362 81.6833 28.1922C82.8135 28.5532 81.9873 29.4934 80.883 29.3915ZM25.8011 39.7643C25.4225 39.607 25.1184 39.3743 24.8918 39.0628C24.6652 38.7543 24.5447 38.3817 24.5333 37.948H26.2285C26.2545 38.1925 26.3377 38.3817 26.4811 38.5098C26.6245 38.6379 26.811 38.7047 27.0404 38.7047C27.2699 38.7047 27.4621 38.6494 27.5998 38.5389C27.7375 38.4282 27.8034 38.2769 27.8034 38.079C27.8034 37.916 27.7489 37.7791 27.6399 37.6714C27.5309 37.5638 27.399 37.4765 27.2384 37.4067C27.0806 37.3367 26.854 37.2582 26.5614 37.1708C26.1396 37.037 25.7925 36.9059 25.5258 36.7721C25.259 36.6411 25.0295 36.4461 24.8373 36.187C24.6451 35.928 24.5476 35.5903 24.5476 35.1742C24.5476 34.557 24.7685 34.0709 25.2102 33.7217C25.652 33.3724 26.2258 33.1977 26.9343 33.1977C27.6428 33.1977 28.2366 33.3724 28.6783 33.7217C29.1201 34.0709 29.3553 34.56 29.387 35.1829H27.6629C27.6514 34.9674 27.574 34.7986 27.4305 34.6764C27.2871 34.5541 27.1035 34.493 26.8798 34.493C26.6876 34.493 26.5327 34.5453 26.4151 34.6501C26.2974 34.7549 26.2373 34.9034 26.2373 35.0984C26.2373 35.3138 26.3377 35.4798 26.5356 35.599C26.7335 35.7184 27.0462 35.8493 27.4678 35.9861C27.8895 36.1318 28.2337 36.2714 28.4976 36.4024C28.7615 36.5333 28.991 36.7284 29.1832 36.9787C29.3754 37.2319 29.4729 37.555 29.4729 37.9539C29.4729 38.3526 29.3782 38.6757 29.1889 38.9842C28.9996 39.2927 28.7242 39.5401 28.3628 39.7234C28.0014 39.9069 27.5768 39.9971 27.0863 39.9971C26.5958 39.9971 26.1798 39.9185 25.8011 39.7614V39.7643ZM33.7156 39.5635C33.2021 39.2723 32.7948 38.8678 32.4936 38.3467C32.1923 37.8258 32.0404 37.2407 32.0404 36.5916C32.0404 35.9426 32.1923 35.3604 32.4936 34.8423C32.7948 34.3241 33.2021 33.9224 33.7156 33.6314C34.229 33.3404 34.7912 33.1977 35.4081 33.1977C36.0248 33.1977 36.587 33.3433 37.1005 33.6314C37.6139 33.9196 38.0184 34.3241 38.3138 34.8423C38.6093 35.3604 38.7556 35.9426 38.7556 36.5916C38.7556 37.2407 38.6064 37.8258 38.3081 38.3467C38.0098 38.8678 37.6053 39.2723 37.0947 39.5635C36.5841 39.8545 36.0219 40 35.4081 40C34.7941 40 34.229 39.8545 33.7156 39.5635ZM36.6616 37.9946C36.9742 37.6423 37.132 37.1738 37.132 36.5946C37.132 36.0153 36.9742 35.5409 36.6616 35.1886C36.3489 34.8393 35.93 34.6647 35.4081 34.6647C34.8859 34.6647 34.4585 34.8393 34.1458 35.1857C33.8332 35.5322 33.6754 36.0037 33.6754 36.5946C33.6754 37.1854 33.8332 37.6482 34.1458 38.0004C34.4585 38.3497 34.8802 38.5243 35.4081 38.5243C35.9359 38.5243 36.3489 38.3467 36.6616 37.9946ZM45.198 38.6839H43.1098V33.2933H41.5148V39.9327H45.198V38.6839ZM49.4549 38.7596L49.0619 39.9327H47.3923L49.7589 33.2933H51.6062L53.9728 39.9327H52.2862L51.8931 38.7596H49.4549ZM51.4858 37.511L50.674 35.0806L49.8737 37.511H51.4858ZM58.1487 39.93V33.2908H56.5538V39.93H58.1487ZM64.5033 39.9327L63.1408 37.4266H62.7593V39.9327H61.1643V33.2933H63.8407C64.357 33.2933 64.7959 33.3836 65.1602 33.5669C65.5246 33.7503 65.7942 34.0006 65.9749 34.3179C66.1556 34.6381 66.2446 34.9903 66.2446 35.3833C66.2446 35.8257 66.1212 36.2187 65.8774 36.565C65.6307 36.9114 65.2692 37.1587 64.7901 37.3042L66.2991 39.9356H64.5004L64.5033 39.9327ZM62.7621 36.2798H63.7518C64.0443 36.2798 64.2623 36.207 64.4086 36.0615C64.5549 35.9159 64.6266 35.7122 64.6266 35.4473C64.6266 35.1824 64.5549 34.9962 64.4086 34.8507C64.2623 34.705 64.0443 34.6323 63.7518 34.6323H62.7621V36.2768V36.2798ZM70.7135 35.9354V34.5936H73.1287V33.2983H69.1185V39.9376H73.1287V38.6423H70.7135V37.1841H72.8476V35.9354H70.7135Z" fill="black" />
</svg>
<p class="text-sm font-semibold">Profitez d'une deuxième paire de lunettes de soleil, pour 1€ de plus !</p>
</div>
<!-- Boutons d'action -->
<div class="space-y-4">
<button type="button" class="w-full btn btn-dark btn-size-lg 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="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>
Ajouter au panier
</button>
<button type="button" class="w-full btn btn-dark-subtle 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 rendez-vous
</button>
</div>
</div>
<div x-data="initCarouselcarousel565225617()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 ">
<h2 class="text-3xl font-semibold text-base md:text-xl">Compléter avec...</h2>
<div class="flex items-center justify-center space-x-4 ">
<div class=" hidden sm:flex flex space-x-2">
<button type="button" class="carousel-button-prev-carousel-565225617 before:border-none btn btn-dark-subtle 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>
<button type="button" class="carousel-button-next-carousel-565225617 before:border-none btn btn-dark-subtle 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>
</div>
<div x-ref="swiperContainer" id="carousel-565225617" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-565225617-0">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productSolaire/img_5.png" alt="Pochette Verte" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 ">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
</div>
</a>
<div class="px-2">
<div class="flex justify-between items-end py-2">
<h3 class="font-semibold text-neutral-800 pt-0.5">Pochette Verte</h3>
<div class="flex flex-col text-right">
<span class="text-[9px] text-neutral-500 leading-[0] uppercase">PRIX WEB</span>
<span class="font-semibold text-neutral-800">
9,00 €
</span>
</div>
</div>
<div class="flex justify-center">
<button type="button" class=" btn btn-dark-ghost btn-size-sm">
Ajouter au panier
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-565225617-1">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productSolaire/img_6.png" alt="Chainette Verte" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 ">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
</div>
</a>
<div class="px-2">
<div class="flex justify-between items-end py-2">
<h3 class="font-semibold text-neutral-800 pt-0.5">Chainette Verte</h3>
<div class="flex flex-col text-right">
<span class="text-[9px] text-neutral-500 leading-[0] uppercase">PRIX WEB</span>
<span class="font-semibold text-neutral-800">
12,50 €
</span>
</div>
</div>
<div class="flex justify-center">
<button type="button" class=" btn btn-dark-ghost btn-size-sm">
Ajouter au panier
</button>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-565225617-2">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productSolaire/img_7.png" alt="Chainette Jaune" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 ">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
</div>
</a>
<div class="px-2">
<div class="flex justify-between items-end py-2">
<h3 class="font-semibold text-neutral-800 pt-0.5">Chainette Jaune</h3>
<div class="flex flex-col text-right">
<span class="text-[9px] text-neutral-500 leading-[0] uppercase">PRIX WEB</span>
<span class="font-semibold text-neutral-800">
12,50 €
</span>
</div>
</div>
<div class="flex justify-center">
<button type="button" class=" btn btn-dark-ghost btn-size-sm">
Ajouter au panier
</button>
</div>
</div>
</div>
</div>
</div>
<div class="flex sm:hidden mt-6">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class="mx-auto btn btn-dark-subtle ">
Voir toute la collection
</a>
</div>
</div>
</div>
<script>
function initCarouselcarousel565225617() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 2,
"tablet": 2,
"desktop": 2
},
"spaceBetween": 30,
"showPagination": false,
"showNavigation": true,
"showNavigationMobile": false
},
componentId: 'carousel-565225617',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</div>
</div>
<!-- Colonne gauche: infos -->
<div class="order-3 xl:col-span-2 lg:pr-6 xl:pr-32 pt-6">
<div class="text-neutral-900">
<section class="space-y-4 my-6">
<h2 class="font-semibold md:text-xl">Description</h2>
<p class="text-sm md:text-base">Précieuse, un modèle conçu en acétate aux lignes épaisses et structurées, associé à une forme carrée oversize pour une allure très mode. Ce modèle est disponible en plusieurs coloris.</p>
</section>
<button x-data x-init="$store.asideBlocs.addAside('pdpProductInfo')" @click="$store.asideBlocs.toggleAside('pdpProductInfo')" class="w-full py-6 flex justify-between items-center border-t font-medium md:text-xl"><span>Information produit</span>
<svg class=" shrink-0" width="24" 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>
<button x-data x-init="$store.asideBlocs.addAside('pdpDeliveryReturn')" @click="$store.asideBlocs.toggleAside('pdpDeliveryReturn')" class="w-full py-6 flex justify-between items-center border-t font-medium md:text-xl">
<span>Livraison et retours</span>
<svg class=" shrink-0" width="24" 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>
</div>
</div>
</section>
<section class="container my-16">
<div class="grid grid-cols-1 lg:grid-cols-3 gap-4">
<div class="w-full lg:col-span-2">
<div class="relative bg-neutral-150 rounded-lg flex flex-wrap items-end lg:justify-between overflow-hidden">
<div class="sm:w-1/2 p-8 md:p-20 text-neutral-800 z-10 md:pr-0">
<h2 class="text-3xl md:text-4xl">
Rendez-vous opticien en visio
</h2>
<p class="mt-4 text-xl">
Découvrez notre service gratuit visio-conférence pour qu'un conseiller vous aide dans votre choix de monture.
</p>
<div class="mt-8">
<a href="#" class=" btn btn-dark-subtle ">
Je découvre
</a>
</div>
</div>
<img src="/img/textImage/textimg1.png" alt="Alt" class="w-full sm:w-1/2 ">
</div>
</div>
<div class="w-full lg:col-span-1">
<div x-data="initCarouselcarousel246977677()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 absolute top-6 md:top-10 left-6 md:left-10 right-6 md:right-10 z-10 ">
<div class="flex items-center justify-center space-x-4 justify-between w-full ">
<div x-ref="pagination" class="swiper-pagination-carousel-246977677 swiper-pagination mt-0 !w-auto " :class="sliderTheme === 'dark' ? 'swiper-dark' : 'swiper-light'"></div>
<div class=" flex space-x-2">
<button type="button" :class="sliderTheme === 'dark' ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-prev-carousel-246977677 before:border-none btn btn-dark-subtle 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>
<button type="button" :class="sliderTheme === 'dark' ? 'btn-light-subtle' : 'btn-dark-subtle'" class="carousel-button-next-carousel-246977677 before:border-none btn btn-dark-subtle 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>
</div>
<div x-ref="swiperContainer" id="carousel-246977677" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246977677-0">
<div class="flex flex-col justify-between gap-12 min-h-80 p-6 md:p-10 rounded-lg
bg-neutral-800
text-white ">
<div class="pt-10"></div>
<div>
<p class="text-xs text-light-50 mt-2">On vous aide</p>
<h3 class="text-xl mb-3">Comment choisir sa monture idéale ?</h3>
<p>Trouvez des lunettes adaptées à la forme de votre visage.</p>
</div>
<a href="https://www.afflelou.com/" class="self-baseline btn btn-light-subtle ">
Démarrer le scan
</a>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-246977677-1">
<div class="flex flex-col justify-between gap-12 min-h-80 p-6 md:p-10 rounded-lg
bg-neutral-800
text-white ">
<div class="pt-10"></div>
<div>
<p class="text-xs text-light-50 mt-2">On vous aide</p>
<h3 class="text-xl mb-3">Comment choisir sa monture idéale ?</h3>
<p>Trouvez des lunettes adaptées à la forme de votre visage.</p>
</div>
<a href="https://www.afflelou.com/" class="self-baseline btn btn-light-subtle ">
Démarrer le scan
</a>
</div>
</div>
</div>
</div>
</div>
<script>
function initCarouselcarousel246977677() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1,
"tablet": 1,
"desktop": 1
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": true
},
componentId: 'carousel-246977677',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</div>
</div>
</section>
<section class="container my-16">
<div x-data="initCarouselcarousel331045753()" x-init="init()" class="relative w-full h-full mx-auto">
<div class="flex justify-between items-center mb-8 ">
<h2 class="text-3xl font-semibold ">La collection MAGIC</h2>
<div class="flex items-center justify-center space-x-4 ">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class="hidden sm:inline-flex mx-auto btn btn-dark-subtle ">
Voir toute la collection
</a>
<div class=" hidden sm:flex flex space-x-2">
<button type="button" class="carousel-button-prev-carousel-331045753 before:border-none btn btn-dark-subtle 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>
<button type="button" class="carousel-button-next-carousel-331045753 before:border-none btn btn-dark-subtle 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>
</div>
<div x-ref="swiperContainer" id="carousel-331045753" class="swiper md:h-full">
<div class="swiper-wrapper ">
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-331045753-0">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct1.png" alt="MAGIC 262" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct1.png" alt="MAGIC 262 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="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>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 262</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>
<p class="text-xs text-neutral-500 pt-2">3 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
199,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-331045753-1">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct2.png" alt="Enola" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct2.png" alt="Enola - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="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>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Enola</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC</p>
<p class="text-xs text-neutral-500 pt-2">5 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-331045753-2">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct3.png" alt="MAGIC 222" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct3.png" alt="MAGIC 222 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="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>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 222</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>
<p class="text-xs text-neutral-500 pt-2">2 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
179,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-331045753-3">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct1.png" alt="Enola" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct1.png" alt="Enola - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="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>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">Enola</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC</p>
<p class="text-xs text-neutral-500 pt-2">5 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
109,00 €
</p>
</div>
</div>
</div>
</div>
</div>
<div class="swiper-slide !transform-none " data-theme="light" data-hash="index-carousel-331045753-4">
<div class="flex flex-col space-y-4 ">
<a href="#" class="block relative aspect-square overflow-hidden bg-gray-100 rounded-lg group hover:after:!h-0 noAbsolute">
<div class="relative w-full h-full">
<img src="/img/productsSlider/magicProduct2.png" alt="MAGIC 222" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 group-hover:opacity-0 ">
<img src="/img/productsSlider/hoverMagicProduct2.png" alt="MAGIC 222 - Vue alternative" class="w-full h-full object-cover transition-all duration-300 absolute inset-0 opacity-0 group-hover:opacity-100">
</div>
<div class="absolute bottom-4 right-1/2 flex space-x-4 translate-x-2/4 duration-300 z-20">
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="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>
</button>
<button type="button" class="group-hover:!btn-dark-ghost btn btn-light-ghost 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="M6.5 4.25C3.87665 4.25 1.75 6.37665 1.75 9V15C1.75 17.6234 3.87665 19.75 6.5 19.75H12.5C14.7589 19.75 16.6495 18.1732 17.1312 16.0603L19.8501 17.1478C20.9996 17.6076 22.25 16.7611 22.25 15.523V12V8.47706C22.25 7.239 20.9996 6.39242 19.8501 6.85223L17.1312 7.93976C16.6495 5.82679 14.7589 4.25 12.5 4.25H6.5ZM17.25 9.5078L20.4072 8.24494C20.5714 8.17925 20.75 8.30019 20.75 8.47706V12V15.523C20.75 15.6999 20.5714 15.8208 20.4072 15.7551L17.25 14.4923V9.5078ZM15.75 9.33854V14.6615V15C15.75 16.7949 14.2949 18.25 12.5 18.25H6.5C4.70507 18.25 3.25 16.7949 3.25 15V9C3.25 7.20507 4.70507 5.75 6.5 5.75H12.5C14.2949 5.75 15.75 7.20507 15.75 9V9.33854Z" fill="currentColor" />
</svg>
</button>
</div>
</a>
<div class="px-2">
<p class="text-xxs font-semibold text-neutral-500">ALAIN AFFLELOU</p>
<h3 class="font-semibold text-neutral-800 pt-0.5">MAGIC 222</h3>
<p class="text-xs text-neutral-500 pt-1">Lunettes de vue MAGIC + 2 clips inclus</p>
<p class="text-xs text-neutral-500 pt-2">2 couleurs disponibles</p>
<div class="pt-3">
<p class="text-[9px] text-neutral-500">PRIX WEB</p>
<div class="flex items-center gap-2">
<p class="font-semibold text-neutral-800">
179,00 €
</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-ref="pagination" class="swiper-pagination-carousel-331045753 swiper-pagination swiper-light"></div>
<div class="flex sm:hidden mt-6">
<a href="https://www.afflelou.com/" target="_blank" rel="noopenner noreferer" class="mx-auto btn btn-dark-subtle ">
Voir toute la collection
</a>
</div>
</div>
</div>
<script>
function initCarouselcarousel331045753() {
return {
swiper: null,
options: {
"color": "dark",
"slidesPerView": {
"mobile": 1.2,
"tablet": 2.2,
"desktop": 3
},
"spaceBetween": 30,
"showPagination": true,
"showNavigation": true,
"showNavigationMobile": false
},
componentId: 'carousel-331045753',
init() {
this.initSwiper();
if (typeof this.customFunction === 'function') {
this.customFunction();
}
},
initSwiper() {
this.swiper = new Swiper(this.$refs.swiperContainer, {
slidesPerView: this.options.slidesPerView.mobile,
spaceBetween: this.options.spaceBetween,
pagination: this.options.showPagination ? {
el: '.swiper-pagination-' + this.componentId,
clickable: true,
bulletClass: 'bullet',
bulletActiveClass: 'active',
} : false,
navigation: this.options.showNavigation ? {
nextEl: '.carousel-button-next-' + this.componentId,
prevEl: '.carousel-button-prev-' + this.componentId
} : false,
hashNavigation: {
watchState: true,
},
breakpoints: {
640: {
slidesPerView: this.options.slidesPerView.tablet
},
1024: {
slidesPerView: this.options.slidesPerView.desktop
}
},
on: {
slideChange: () => this.updateSliderTheme(),
},
});
this.updateSliderTheme();
},
updateSliderTheme() {
const activeSlide = this.swiper.slides[this.swiper.activeIndex];
const theme = activeSlide.getAttribute('data-slider-theme');
this.sliderTheme = theme || 'light';
},
customFunction() {
// Custom function can be defined here and overridden outside.
}
};
}
</script>
</section>
<section class="container my-16">
{% render "@pdp-product" %}
</section>
<section class="container my-16">
{% render "@block-push" %}
</section>
<section class="container my-16">
{% render "@carousel" %}
</section>
/* No context defined. */
No notes defined.