<div class="container">
<nav class="flex items-center min-h-10" aria-label="Fil d'ariane">
<ol class="flex items-center gap-1 flex-wrap text-body-xs text-black/40">
<li>
<a href="#" class="
link-sm
link-neutral
">
Accueil
</a>
</li>
<li aria-hidden="true" class="text-neutral-500">
•
</li>
<li>
<a href="#" class="
link-sm
link-neutral
">
Actifs
</a>
</li>
<li aria-hidden="true" class="text-neutral-500">
•
</li>
<li>
<span class="font-bold text-black tracking-[0.3px]" aria-current="page">Acide salicylique 2%</span>
</li>
</ol>
</nav>
</div>
<div class="sm:container">
<div class="grid-layout gap-y-6 adjusted-marg-b-sm">
<div class="col-span-4 sm:col-span-6 lg:col-span-7">
<section id="gallery" class="relative flex flex-col xl:flex-row gap-2" x-data="initGallery()" x-bind="eventListeners">
<div x-show="itemCount > 0" class="max-sm:container max-sm:pe-0 relative w-full order-2 xl:order-1 xl:max-w-40" :class="itemCount < 2 ? 'max-xl:hidden' : ''">
<div x-show="!isStart && showThumbnailArrows" class="absolute top-4 left-1/2 -translate-x-1/2 z-10 hidden xl:block">
<button type="button" @click="prevItem" :class="{'opacity-0 cursor-default': isStart, 'opacity-100': !isStart}" " :tabindex=" isStart ? '-1' : '0'"
aria-label=" Voir le slide précédent" class=" btn btn-dark btn-subtle btn-border btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M1.5 8.51855L9 1.01855M9 1.01855L16.5 8.51855M9 1.01855V19.0186" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="flex gap-2 overflow-hidden w-full h-auto xl:flex-col xl:flex-1 max-h-none xl:max-h-[var(--gallery-main-height)]" x-show="images.length > 0" x-ref="thumbnailContainer" x-bind="galleryBody">
<template x-for="(image, index) in images" :key="index">
<button @click="activeItem = index" class="js_thumbs_slide shrink-0 focus:outline-none transition-colors relative overflow-hidden group xl:flex-none aspect-[5/6]" :class="{
'opacity-56': activeItem === index
}" :ref="activeItem === index ? 'activeThumb' : null" x-init="$watch('activeItem', () => scrollToActiveThumb())">
<div class="relative w-full h-full">
<img width="79" height="89" :src="image.thumb" :alt="image.caption" loading="lazy" class="object-cover xl:w-full h-full">
<div class="absolute inset-0 group-hover:ring-4 group-hover:ring-inset group-hover:ring-brand-600" :class="{
'ring-4 ring-inset ring-brand-600 pointer-events-none': activeItem === index
}"></div>
</div>
</button>
</template>
</div>
<div x-show="!isEnd && showThumbnailArrows" class="absolute bottom-4 left-1/2 -translate-x-1/2 z-10 hidden xl:block">
<button type="button" @click="nextItem" :class="{'opacity-0 cursor-default': isEnd, 'opacity-100': !isEnd}" :tabindex="isEnd ? '-1' : '0'" aria-label="Voir le slide suivant" class=" btn btn-dark btn-subtle btn-border btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 18 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M16.5 11.5L9 19M9 19L1.5 11.5M9 19L9 1" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="w-full order-1 xl:order-2 aspect-[5/6]">
<div class="relative overflow-hidden bg-white" aria-live="polite" aria-atomic="true" x-bind="galleryBody" x-ref="galleryDialog" :class="{
'z-50 fixed inset-0 w-screen max-w-[min(1280px,(100%_-_2rem))] max-h-[min(1024px,(100%_-_2rem))] m-auto': fullscreen,
'relative aspect-[5/6]': !fullscreen
}" :role="fullscreen ? 'dialog' : false" :aria-modal="fullscreen" @keyup.arrow-right="nextItem" @keyup.arrow-left="prevItem" @resize.debounce.100.window="syncHeight">
<div class="relative h-full" x-ref="track">
<div class="flex transition-transform duration-300 ease-out h-full" :style="{ transform: `translateX(-${activeItem * 100}%)` }">
<template x-for="(image, index) in images" :key="index">
<div class="flex-shrink-0 w-full h-full relative">
<div x-show="index === 0" class="absolute z-10 top-4 left-4 bg-black text-white px-3 py-1 rounded-full text-body-sm font-semibold">
NEW
</div>
<template x-if="image.type === 'video' && activeVideo">
<iframe class="absolute inset-0 w-full h-full" frameborder="0" x-data="getVideoData(image)" :src="src" :allow="allow"></iframe>
</template>
<picture>
<source :srcset="fullscreen ? image.full : image.img" media="(min-width: 768px)" />
<img x-show="!activeVideo || image.type !== 'video'" :src="fullscreen ? image.full : image.img" :alt="image.caption || 'Example Product'" class="w-full h-full object-cover" draggable="false">
</picture>
</div>
</template>
</div>
<div class="absolute inset-x-0 bottom-0 flex justify-between items-center p-4 z-10 pointer-events-none" x-show="images.length > 1">
<div class="flex items-center h-full pointer-events-auto">
<button type="button" @click="prevItem" :class="{'opacity-0 cursor-default': isStart, 'opacity-100': !isStart}" " :tabindex=" isStart ? '-1' : '0'"
aria-label=" Voir le slide précédent" class=" btn btn-dark btn-subtle btn-border btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 19.5L3 12M3 12L10.5 4.5M3 12H21" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="flex items-center h-full pointer-events-auto">
<button type="button" @click="nextItem" :class="{'opacity-0 cursor-default': isEnd, 'opacity-100': !isEnd}" :tabindex="isEnd ? '-1' : '0'" aria-label="Voir le slide suivant" class=" btn btn-dark btn-subtle btn-border btn-size-md btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
</div>
<div class="absolute top-2 right-2 flex gap-2">
</div>
</div>
</div>
</div>
</section>
<script>
function initGallery() {
return {
activeItem: 0,
activeVideo: false,
itemIsVideo: false,
itemCount: 0,
fullscreen: false,
isSlider: true,
loop: false,
isStart: true,
isEnd: false,
showMagnifier: true,
showMagnifierButton: false,
showThumbnailArrows: true,
images: [],
init() {
this.images = [{
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/medias/domain11863/media100412/123660-vfjeta2bf0.jpg",
"caption": "Product Image 1",
"isMain": true,
"type": "image"
}, {
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170896-8y6yfqhab9-whr.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170896-8y6yfqhab9-whr.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170896-8y6yfqhab9-whr.jpg",
"caption": "Product Image 2",
"type": "image"
}, {
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170902-xfskbhyvfk-whr.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170902-xfskbhyvfk-whr.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170902-xfskbhyvfk-whr.jpg",
"caption": "Product Image 3",
"type": "image"
}, {
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170911-8qrywi7jhs-whr.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170911-8qrywi7jhs-whr.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170911-8qrywi7jhs-whr.jpg",
"caption": "Product Image 4",
"type": "image"
}, {
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170905-wfespq6p4o-whr.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170905-wfespq6p4o-whr.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170905-wfespq6p4o-whr.jpg",
"caption": "Product Image 5",
"type": "image"
}, {
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170917-vu19eil2ph-whr.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170917-vu19eil2ph-whr.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170917-vu19eil2ph-whr.jpg",
"caption": "Product Image 3",
"type": "image"
}, {
"thumb": "https://naos.dam-broadcast.com/cdn-cgi/image/width=160,height=192,fit=crop/pm_11863_170_170890-o9smqupcyh-whr.jpg",
"img": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170890-o9smqupcyh-whr.jpg",
"full": "https://naos.dam-broadcast.com/cdn-cgi/image/width=1280,height=1536,fit=crop/pm_11863_170_170890-o9smqupcyh-whr.jpg",
"caption": "Product Image 4",
"type": "image"
}];
this.itemCount = this.images.length;
this.initActive();
this.$nextTick(() => {
this.syncHeight();
})
this.$watch('activeItem', (item) => {
this.itemIsVideo = this.images[item].type === 'video';
this.activeVideo = this.itemIsVideo && false;
this.isStart = this.activeItem === 0;
this.isEnd = this.activeItem === (this.itemCount - 1);
});
this.$watch('fullscreen', (open) => {
document.body.style.overflow = open ? "hidden" : "";
});
},
initActive() {
let active = this.images.findIndex(function(image) {
return image.isMain === true
});
if (active === -1) {
active = 0;
}
this.setActive(active);
},
toggleFullscreen() {
this.fullscreen = !this.fullscreen;
},
toggleMagnifier() {
this.showMagnifier = !this.showMagnifier;
},
nextItem() {
if (this.isEnd && !this.loop) return;
this.activeItem = this.isEnd ? 0 : this.activeItem + 1;
},
prevItem() {
if (this.isStart && !this.loop) return;
this.activeItem = this.isStart ? this.itemCount - 1 : this.activeItem - 1;
},
resetGallery() {
this.images = this.initialImages;
this.itemCount = this.images.length;
this.initActive();
this.calcIsSlider();
this.$nextTick(() => {
this.scrollTo(this.active);
});
},
setActive(index) {
if (index < 0) return;
if (index === this.itemCount) return;
this.active = index;
this.activeVideoType = false;
if (window.youtubePlayer) {
window.youtubePlayer.stopVideo();
}
if (this.vimeoPlayer) {
this.vimeoPlayer.contentWindow.postMessage(JSON.stringify({
"method": "pause"
}), "*");
}
if (this.images[index].type === 'video' && this.autoplayVideo) {
this.activateVideo();
}
},
activateVideo() {
const videoData = this.getVideoData();
if (!videoData) {
return
}
this.activeVideoType = videoData.type;
if (videoData.type === "youtube") {
if (!window.youtubePlayer) {
this.initYoutubeAPI(videoData);
} else {
window.youtubePlayer.loadVideoById(videoData.id);
}
} else if (videoData.type === "vimeo") {
this.initVimeoVideo(videoData);
}
},
getVideoData() {
const videoUrl = this.images[this.active] && this.images[this.active].videoUrl;
if (!videoUrl) {
return
}
let id,
type,
youtubeRegex,
vimeoRegex,
useYoutubeNoCookie = false;
if (videoUrl.match(/youtube\.com|youtu\.be|youtube-nocookie.com/)) {
id = videoUrl.replace(/^\/(embed\/|v\/)?/, '').replace(/\/.*/, '');
type = 'youtube';
youtubeRegex = /^.*(?:(?:youtu\.be\/|v\/|vi\/|u\/\w\/|embed\/)|(?:(?:watch)?\?v(?:i)?=|\&v(?:i)?=))([^#\&\?]*).*/;
id = videoUrl.match(youtubeRegex)[1];
if (videoUrl.match(/youtube-nocookie.com/)) {
useYoutubeNoCookie = true;
}
} else if (videoUrl.match(/vimeo\.com/)) {
type = 'vimeo';
vimeoRegex = new RegExp(['https?:\\/\\/(?:www\\.|player\\.)?vimeo.com\\/(?:channels\\/(?:\\w+\\/)',
'?|groups\\/([^\\/]*)\\/videos\\/|album\\/(\\d+)\\/video\\/|video\\/|)(\\d+)(?:$|\\/|\\?)'
].join(''));
id = videoUrl.match(vimeoRegex)[3];
}
return id ? {
id: id,
type: type,
useYoutubeNoCookie: useYoutubeNoCookie
} : false;
},
initYoutubeAPI(videoData) {
if (document.getElementById('loadYoutubeAPI')) {
return;
}
const params = {
"autoplay": true
};
const loadYoutubeAPI = document.createElement('script');
loadYoutubeAPI.src = 'https://www.youtube.com/iframe_api';
loadYoutubeAPI.id = 'loadYoutubeAPI';
const firstScriptTag = document.getElementsByTagName('script')[0];
firstScriptTag.parentNode.insertBefore(loadYoutubeAPI, firstScriptTag);
const host = (videoData.useYoutubeNoCookie) ?
'https://www.youtube-nocookie.com' :
'https://www.youtube.com';
if (!this.relatedVideos) {
params.rel = 0;
}
const fireYoutubeAPI = document.createElement('script');
fireYoutubeAPI.innerHTML = `function onYouTubeIframeAPIReady() {
window.youtubePlayer = new YT.Player('youtube-player', {
host: '${host}',
videoId: '${videoData.id}',
playerVars: ${JSON.stringify(params)},
});
}`;
firstScriptTag.parentNode.insertBefore(fireYoutubeAPI, firstScriptTag);
},
initVimeoVideo(videoData) {
let additionalParams = '&autoplay=1';
let src = '';
const timestamp = new Date().getTime();
const vimeoContainer = document.getElementById("vimeo-player");
const videoId = videoData.id;
if (!vimeoContainer || !videoId) return;
if (this.loopVideo) {
additionalParams += '&loop=1';
}
src = 'https://player.vimeo.com/video/' +
videoId + '?api=1&player_id=vimeo' +
videoId +
timestamp +
additionalParams;
vimeoContainer.innerHTML =
`<iframe id="${'vimeo' + videoId + timestamp}"
src="${src}"
width="640" height="360"
webkitallowfullscreen
mozallowfullscreen
allowfullscreen
referrerPolicy="origin"
allow="autoplay"
class="object-center w-full h-full object-fit"
></iframe>`;
this.vimeoPlayer = vimeoContainer.childNodes[0];
},
closeFullScreen(setFocusTo = this.$refs.galleryFullscreenBtn) {
this.fullscreen = false;
hyva.releaseFocus(this.$root);
this.$nextTick(() => {
this.calcPageSize();
setFocusTo && setFocusTo.focus()
});
},
touchStartX: null,
touchStartY: null,
galleryBody: {
['@touchstart.passive'](event) {
if (event.touches.length > 1) return;
this.touchStartX = event.touches[0].clientX;
this.touchStartY = event.touches[0].clientY;
},
['@touchend.passive'](event) {
if (!this.touchStartX || !this.touchStartY) return;
const touchEndX = event.changedTouches[0].clientX;
const touchEndY = event.changedTouches[0].clientY;
const diffX = this.touchStartX - touchEndX;
const diffY = this.touchStartY - touchEndY;
if (Math.abs(diffX) > Math.abs(diffY)) {
if (Math.abs(diffX) > 50) {
if (diffX > 0) {
this.nextItem();
} else {
this.prevItem();
}
}
}
this.touchStartX = null;
this.touchStartY = null;
}
},
eventListeners: {
['@keydown.window.escape']() {
if (!this.fullscreen) return;
this.closeFullScreen()
},
['@reset-gallery.window'](event) {
this.resetGallery();
},
['@keyup.arrow-right.window']() {
if (!this.fullscreen) return;
this.nextItem();
},
['@keyup.arrow-left.window']() {
if (!this.fullscreen) return;
this.prevItem();
},
},
scrollToActiveThumb() {
this.$nextTick(() => {
const container = this.$refs.thumbnailContainer;
const activeThumb = container.querySelector(`button:nth-child(${this.activeItem + 1})`);
if (activeThumb && container) {
const isVertical = window.innerWidth >= 1024 && true;
if (isVertical) {
const containerHeight = container.offsetHeight;
const thumbHeight = activeThumb.offsetHeight;
const thumbTop = activeThumb.offsetTop;
container.scrollTo({
top: (thumbTop + thumbHeight) - ((containerHeight - thumbHeight) / 2),
behavior: 'smooth'
});
} else {
const containerWidth = container.offsetWidth;
const thumbWidth = activeThumb.offsetWidth;
const thumbLeft = activeThumb.offsetLeft;
container.scrollTo({
left: (thumbLeft + thumbWidth) - ((containerWidth - thumbWidth) / 2),
behavior: 'smooth'
});
}
}
});
},
syncHeight() {
const galleryHeight = this.$refs.galleryDialog.offsetHeight;
const thumbnailContainerHeight = this.$refs.thumbnailContainer.scrollHeight;
if (galleryHeight > 0) {
document.documentElement.style.setProperty('--gallery-main-height', `${galleryHeight}px`);
}
this.showThumbnailArrows = thumbnailContainerHeight >= galleryHeight;
}
}
}
</script>
</div>
<div class="col-span-4 sm:col-span-6 lg:col-span-5">
<div class="max-sm:container sticky top-0 flex flex-col gap-4">
<div class="flex flex-col gap-1">
<h1 class="h4 font-bold">Acide salicylique 2%</h1>
<p class="h6 text-black/64">Surexposition (soleil ou pollution)</p>
</div>
<div class="text-body-sm flex flex-row gap-2 items-center">
<div class="flex flex-row gap-1">
<svg class="text-black shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="16" height="16" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</div>
<a href="#" class="
underline
link-sm
link-uno
">
4.3/5
</a>
|
<a href="#" class="
underline
link-sm
link-uno
">
256 avis
</a>
</div>
<p class="text-body-base text-black/64">Véritable soin SOS, l'Acide salicylique 2% est le BHA le plus connu. Grâce à ses propriétés purifiantes et exfoliantes, il combat et prévient efficacement le retour des imperfections locales, affine le grain de peau et désobstrue les pores. Vos boutons et points noirs sont ainsi visiblement réduits.</p>
<div class="flex flex-col gap-2">
<div class="flex justify-between">
<div class="h4">16.9€</div>
<div class="text-body-base text-black/72 self-center">15ml</div>
</div>
<button type="button" class="w-full justify-center text-brand-700 btn btn-dark btn-solid btn-size-lg">
Ajouter au panier
</button>
<div class="bg-neutral-50 flex flex-col gap-2 px-4 py-2">
<p class="text-body-base flex flex-row gap-2 items-center">
<svg class="text-black/56 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M14 5L8 1.5L2 5M14 5L8 8.5M14 5V11L8 14.5M2 5L8 8.5M2 5V11L8 14.5M8 8.5V14.5" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> Livraison estimée entre <strong class="font-bold">3 à 5 jours</strong>
</p>
<div aria-hidden="true" class="w-full bg-black/16 h-px"></div>
<div class="flex flex-row justify-between items-center gap-2">
<svg class="text-black/56 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 16 16" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M5.5 12.5C5.5 13.0523 5.05228 13.5 4.5 13.5C3.94772 13.5 3.5 13.0523 3.5 12.5M5.5 12.5C5.5 11.9477 5.05228 11.5 4.5 11.5C3.94772 11.5 3.5 11.9477 3.5 12.5M5.5 12.5H9.5M3.5 12.5H2.25C1.83579 12.5 1.5 12.1642 1.5 11.75V9.5003M13 12.5C13 13.0523 12.5523 13.5 12 13.5C11.4477 13.5 11 13.0523 11 12.5M13 12.5C13 11.9477 12.5523 11.5 12 11.5C11.4477 11.5 11 11.9477 11 12.5M13 12.5L13.75 12.5C14.1642 12.5 14.5024 12.1638 14.477 11.7504C14.3369 9.47865 13.5648 7.37792 12.3344 5.62189C12.0929 5.27728 11.7019 5.07183 11.2818 5.04877H9.5M11 12.5H9.5M9.5 5.04877V4.40986C9.5 4.03153 9.21832 3.71147 8.84201 3.67242C7.74356 3.55843 6.6286 3.5 5.5 3.5C4.3714 3.5 3.25644 3.55843 2.15799 3.67242C1.78168 3.71147 1.5 4.03153 1.5 4.40986V9.5003M9.5 5.04877V9.5003M9.5 12.5V9.5003M9.5 9.5003H1.5" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<div class="h-2 w-full bg-neutral-100 rounded-full overflow-hidden">
<div class="h-full bg-brand-700 rounded-full" style="width: 48.2%" role="progressbar" aria-valuenow="48.2" aria-valuemin="0" aria-valuemax="100" aria-label="Progression vers la livraison gratuite" aria-valuetext="48.2% complété - 24.1€ sur 50€">
</div>
</div>
<svg class="text-brand-700 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</div>
<p class="text-body-base">Plus que <strong class="font-bold">24.1€</strong> pour la livraison offerte</p>
</div>
<div class="grid grid-cols-3 gap-4 py-4">
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M4.75541 10.0589C5.82748 6.0579 9.94 3.68353 13.941 4.75559C15.262 5.10955 16.4038 5.79374 17.3036 6.69528L19.2067 8.59835H16.023C15.6088 8.59835 15.273 8.93414 15.273 9.34835C15.273 9.76256 15.6088 10.0984 16.023 10.0984H21.0156C21.2145 10.0984 21.4053 10.0193 21.546 9.87864C21.6866 9.73797 21.7656 9.54717 21.7656 9.34824V4.35575C21.7656 3.94153 21.4298 3.60575 21.0156 3.60575C20.6014 3.60575 20.2656 3.94153 20.2656 4.35575V7.53591L18.3653 5.63561C17.2841 4.55253 15.9116 3.73071 14.3292 3.3067C9.52803 2.02023 4.593 4.86947 3.30653 9.67067C3.19932 10.0708 3.43676 10.482 3.83686 10.5892C4.23696 10.6964 4.64821 10.459 4.75541 10.0589ZM20.1629 13.4108C19.7628 13.3036 19.3515 13.5411 19.2443 13.9412C18.1722 17.9422 14.0597 20.3165 10.0587 19.2445C8.73774 18.8905 7.59594 18.2063 6.69609 17.3048L4.7942 15.4017H7.97702C8.39123 15.4017 8.72702 15.0659 8.72702 14.6517C8.72702 14.2375 8.39123 13.9017 7.97702 13.9017L2.98438 13.9017C2.57016 13.9017 2.23438 14.2375 2.23438 14.6517V19.6443C2.23438 20.0585 2.57016 20.3943 2.98438 20.3943C3.39859 20.3943 3.73438 20.0585 3.73438 19.6443V16.4632L5.63444 18.3645C6.71564 19.4477 8.08796 20.2693 9.67048 20.6934C14.4717 21.9798 19.4067 19.1306 20.6932 14.3294C20.8004 13.9293 20.563 13.5181 20.1629 13.4108Z" fill="currentColor" />
</svg>
<p class="text-body-sm">Retour gratuit sous 30 jours</p>
</div>
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M2.25 8.25H21.75M2.25 9H21.75M5.25 14.25H11.25M5.25 16.5H8.25M4.5 19.5H19.5C20.7426 19.5 21.75 18.4926 21.75 17.25V6.75C21.75 5.50736 20.7426 4.5 19.5 4.5H4.5C3.25736 4.5 2.25 5.50736 2.25 6.75V17.25C2.25 18.4926 3.25736 19.5 4.5 19.5Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<p class="text-body-sm">Paiement sécurisé</p>
</div>
<div class="flex flex-col gap-1 items-center text-center text-brand-700">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M21 11.25V19.5C21 20.3284 20.3284 21 19.5 21H5.25C4.42157 21 3.75 20.3284 3.75 19.5V11.25M12 4.875C12 3.42525 10.8247 2.25 9.375 2.25C7.92525 2.25 6.75 3.42525 6.75 4.875C6.75 6.32475 7.92525 7.5 9.375 7.5C10.1095 7.5 12 7.5 12 7.5M12 4.875C12 5.59024 12 7.5 12 7.5M12 4.875C12 3.42525 13.1753 2.25 14.625 2.25C16.0747 2.25 17.25 3.42525 17.25 4.875C17.25 6.32475 16.0747 7.5 14.625 7.5C13.8905 7.5 12 7.5 12 7.5M12 7.5V21M3.375 11.25H21.375C21.9963 11.25 22.5 10.7463 22.5 10.125V8.625C22.5 8.00368 21.9963 7.5 21.375 7.5H3.375C2.75368 7.5 2.25 8.00368 2.25 8.625V10.125C2.25 10.7463 2.75368 11.25 3.375 11.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<p class="text-body-sm">3 échantillons offert*</p>
</div>
</div>
<div class="flex flex-row justify-between items-center gap-2 sm:gap-4 border-y border-dark/16 px-4 py-2">
<div class="flex flex-row justify-start items-center gap-2">
<img src="/img/favMyNaos.png" alt="MyNAOS" class="w-5 h-5 mr-1">
<span class="h6">MyNAOS</span>
</div>
<div class="flex flex-row justify-end items-center gap-2">
<span class="justify-items-end text-body-base font-bold">+59 points de fidélité</span>
<svg class="text-brand-700 shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="m11.25 11.25.041-.02a.75.75 0 0 1 1.063.852l-.708 2.836a.75.75 0 0 0 1.063.853l.041-.021M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0Zm-9-3.75h.008v.008H12V8.25Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<section class="flex flex-col gap-3 py-6 2xl:py-8 3xl:py-18">
<div class="container text-body-lg font-bold text-black/64">
<h3>Associez votre produit</h3>
</div>
<div class="overflow-auto">
<div class="container flex gap-3 2xl:gap-4 3xl:gap-5">
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0 flex md:hidden lg:flex">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<div class="container py-6">
<section class="relative" x-data="initSlider" x-init="if ($store.screen.isMobile) { calcPageSize(); $nextTick(function() { calcActive() }) }" @resize.window.debounce="if ($store.screen.isMobile) { calcPageSize(); $nextTick(() => calcActive()) }" role="group" aria-roledescription="Carousel" aria-label="Hero Product Slider">
<div :class="{
'relative w-full overflow-x-hidden': $store.screen.isMobile,
}">
<div :class="{
'relative flex flex-nowrap w-full overflow-auto js_slides snap': $store.screen.isMobile,
'grid grid-cols-2 gap-6': !$store.screen.isMobile
}" @scroll.debounce="$store.screen.isMobile && calcActive" aria-label="Slides">
<div :class="{
'js_slide flex-shrink-0 w-full': $store.screen.isMobile
}" aria-roledescription="slide" id="slide-0" aria-labelledby="tab-0" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (1) + ' of ' + 2" :aria-hidden="active !== 0">
<div class="@container group h-full
">
<div class="relative h-full
flex items-center ">
<picture class="absolute inset-0 w-full h-full
">
<source srcset="/img/diagnostic/desktop-1.png" media="(min-width: 769px)" />
<img src="/img/diagnostic/mobile-1.png" alt="Analyser votre peau" class="object-cover w-full h-full " loading="lazy" />
</picture>
<div class="absolute inset-0
bg-black/04 mix-blend-overlay "></div>
<section class="relative flex items-center min-h-62 md:min-h-[346px] 2xl:min-h-88 3xl:min-h-100 adjusted-marg-y-sm
w-1/2 ">
<article class="
relative flex gap-3 w-full
flex-col adjusted-marg-l-sm border-l-8 border-naos ">
<div class="flex flex-col gap-1.5
">
<h2 class="h2 [&>span]:font-normal text-black">
Analyser votre peau
</h2>
<p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-black">
Scannez votre peau et découvrez votre routine personalisée.
</p>
</div>
<div class="flex items-center gap-4">
<a href="#" type="button" class="w-max btn btn-dark btn-outline btn-size-lg">
Essayer le SkinObserver
</a>
</div>
</article>
</section>
</div>
</div>
</div>
<div :class="{
'js_slide flex-shrink-0 w-full': $store.screen.isMobile
}" aria-roledescription="slide" id="slide-1" aria-labelledby="tab-1" role="tabpanel" tabindex="0" :aria-label="'Slide ' + (2) + ' of ' + 2" :aria-hidden="active !== 1">
<div class="@container group h-full
">
<div class="relative h-full
flex items-center ">
<picture class="absolute inset-0 w-full h-full
">
<source srcset="/img/banner_cta/img_2.png" media="(min-width: 769px)" />
<img src="/img/banner_cta/img_2.png" alt="Banner Image" class="object-cover w-full h-full " loading="lazy" />
</picture>
<div class="absolute inset-0
bg-black/04 mix-blend-overlay "></div>
<section class="relative flex items-center min-h-62 md:min-h-[346px] 2xl:min-h-88 3xl:min-h-100 adjusted-marg-y-sm
adjusted-marg-x-sm
w-1/2 ">
<article class="
relative flex gap-3 w-full
flex-col ">
<div class="flex flex-col gap-1.5
">
<p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-dark">
Skin Coach
</p>
<h2 class="h2 [&>span]:font-normal text-dark">
Des conseils personnalisés et gratuits
</h2>
<a href="#" class="
link-medium
link-dark
link-icon
font-bold items-center
">
<svg class=" shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">30 min</span>
</a>
</div>
<div class="flex items-center gap-4">
<a href="#" type="button" class="w-max btn btn-dark btn-outline btn-size-lg">
Prendre rdv
</a>
</div>
</article>
</section>
</div>
</div>
</div>
</div>
<div class="block md:hidden absolute bottom-6 lg:bottom-8 3xl:bottom-10 w-full z-10">
<div class="md:container relative">
<div class="absolute left-1/2 transform -translate-x-1/2 h-full w-full flex justify-center items-center">
<div class="flex items-center ">
<div role="tablist" aria-label="Navigation du slider" class="flex flex-wrap justify-center gap-3">
<template x-for="(index, i) in Math.ceil(itemCount / pageSize)" :key="i">
<button class="shrink-0 block h-1 bg-black rounded-full shadow cursor-pointer transition-all duration-300 ease-in-out" role="tab" :id="'tab-' + (index-1)" :aria-controls="'slide-' + (index-1)" :aria-selected="Math.floor(active/pageSize) === index-1" :tabindex="Math.floor(active/pageSize) === index-1 ? 0 : -1" :class="{
'bg-opacity-100 w-22': Math.floor(active/pageSize) === index-1,
'bg-opacity-40 w-6': Math.floor(active/pageSize) !== index-1
}" @click="scrollTo((index-1)*pageSize);">
<span class="sr-only" x-text="'Aller au groupe de slides ' + index"></span>
</button>
</template>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<script>
'use strict';
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
<section class="container max-md:pe-0 py-6 flex flex-col gap-3" x-data="initInstagramSlider" x-init="calcPageSize(); $nextTick(function() { calcActive() })" @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel">
<h2 class="font-bold text-body-lg text-black/56">#Instapur</h2>
<div class="gutter-quarter flex md:grid grid-cols-6 overflow-auto js_slides snap" @scroll.debounce="calcActive">
<div id="slide-0" aria-labelledby="tab-0" role="tabpanel" class="w-[42%] aspect-[3/4] md:w-auto shrink-0 js_slide">
<img class="object-cover w-full h-full" src="/img/instagram/post-1.png" alt="">
</div>
<div id="slide-1" aria-labelledby="tab-1" role="tabpanel" class="w-[42%] aspect-[3/4] md:w-auto shrink-0 js_slide">
<img class="object-cover w-full h-full" src="/img/instagram/post-2.png" alt="">
</div>
<div id="slide-2" aria-labelledby="tab-2" role="tabpanel" class="w-[42%] aspect-[3/4] md:w-auto shrink-0 js_slide">
<img class="object-cover w-full h-full" src="/img/instagram/post-3.png" alt="">
</div>
<div id="slide-3" aria-labelledby="tab-3" role="tabpanel" class="w-[42%] aspect-[3/4] md:w-auto shrink-0 js_slide">
<img class="object-cover w-full h-full" src="/img/instagram/post-4.png" alt="">
</div>
<div id="slide-4" aria-labelledby="tab-4" role="tabpanel" class="w-[42%] aspect-[3/4] md:w-auto shrink-0 js_slide">
<img class="object-cover w-full h-full" src="/img/instagram/post-5.png" alt="">
</div>
<div id="slide-5" aria-labelledby="tab-5" role="tabpanel" class="w-[42%] aspect-[3/4] md:w-auto shrink-0 js_slide">
<img class="object-cover w-full h-full" src="/img/instagram/post-6.png" alt="">
</div>
</div>
<div class="flex items-center justify-center py-6 mt-3 md:hidden">
<div role="tablist" aria-label="Navigation du slider" class="flex flex-wrap justify-center gap-3">
<template x-for="(index, i) in Math.ceil(itemCount / pageSize)" :key="i">
<button class="shrink-0 block h-1 bg-black rounded-full shadow cursor-pointer transition-all duration-300 ease-in-out" role="tab" :id="'tab-' + (index-1)" :aria-controls="'slide-' + (index-1)" :aria-selected="Math.floor(active/pageSize) === index-1" :tabindex="Math.floor(active/pageSize) === index-1 ? 0 : -1" :class="{
'bg-opacity-100 w-22': Math.floor(active/pageSize) === index-1,
'bg-opacity-40 w-6': Math.floor(active/pageSize) !== index-1
}" @click="scrollTo((index-1)*pageSize);">
<span class="sr-only" x-text="'Aller au groupe de slides ' + index"></span>
</button>
</template>
</div>
</div>
</section>
<script>
'use strict';
function initInstagramSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
<div class="container max-md:pe-0 grid-layout items-center py-6">
<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'ingredients')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
<div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'ingredients')?.open" @click.outside="$store.asideBlocs.closeAside('ingredients')">
<div class="font-medium h4 flex justify-between items-center mb-4">
<span></span>
<button type="button" @click="$store.asideBlocs.closeAside('ingredients')" aria-label="Label text" class=" btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="overflow-auto flex-1">
<section class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<h2 class="h4">Exemple de titre</h2>
<h3 class="h5 text-black/64">Sous titre</h3>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-body-lg font-bold">Sous sous titre</h4>
<div class="text-body-base space-y-2.5">
<p>Vous trouverez dans le tableau ci-dessous les tarifs et délais d’expédition de votre commande, en France métropolitaine, Corse et Monaco, selon le mode de livraison que vous avez choisi.</p>
<p>Domicile 6,00€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>Point relais 4,50€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>A titre d’exemple, si vous avez passé commande le lundi avant 12h, et choisi l’envoi à domicile, vous recevrez votre colis le mercredi, soit dans un délai de 48h.</p>
</div>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-body-lg font-bold">Sous sous titre</h4>
<div class="text-body-base">
<p>Vous trouverez dans le tableau ci-dessous les tarifs et délais d’expédition de votre commande, en France métropolitaine, Corse et Monaco, selon le mode de livraison que vous avez choisi.</p>
<p>Domicile 6,00€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>Point relais 4,50€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>A titre d’exemple, si vous avez passé commande le lundi avant 12h, et choisi l’envoi à domicile, vous recevrez votre colis le mercredi, soit dans un délai de 48h.</p>
</div>
</div>
</section>
</div>
</div>
</div>
<section class="w-full flex flex-col gap-3 sm:col-start-2 col-span-10">
<h2 class="text-body-lg font-bold text-black/56">Résultats cliniques</h2>
<div class="relative">
<div class="flex flex-row gap-4 overflow-x-auto snap-x snap-mandatory scrollbar-width">
<div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
<div class="absolute inset-0 z-0 bg-white/92 group-hover:bg-white/100"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex-1 flex flex-col justify-center">
<div class="h1">+46%</div>
<div class="h5">d'éclat<sup class="ml-1 text-body-xs">(1)</sup></div>
</div>
<div class="text-body-xs flex flex-row gap-1 w-max">
<sup class="leading-loose">(1)</sup>
<button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
en savoir +
<svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
<div class="absolute inset-0 z-0 bg-white/84 group-hover:bg-white/92"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex-1 flex flex-col justify-center">
<div class="h1">+35%</div>
<div class="h5">de fermeté<sup class="ml-1 text-body-xs">(1)</sup></div>
</div>
<div class="text-body-xs flex flex-row gap-1 w-max">
<sup class="leading-loose">(1)</sup>
<button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
en savoir +
<svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
<div class="absolute inset-0 z-0 bg-white/76 group-hover:bg-white/84"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex-1 flex flex-col justify-center">
<div class="h1">+20%</div>
<div class="h5">d'éclat<sup class="ml-1 text-body-xs">(1)</sup></div>
</div>
<div class="text-body-xs flex flex-row gap-1 w-max">
<sup class="leading-loose">(1)</sup>
<button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
en savoir +
<svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
</svg>
</button>
</div>
</div>
</div>
<div class="relative group snap-start snap-always bg-brand-500 w-full min-h-40 md:min-w-60 md:min-h-56 py-4 px-6 flex flex-col">
<div class="absolute inset-0 z-0 bg-white/68 group-hover:bg-white/76"></div>
<div class="relative z-10 flex flex-col h-full">
<div class="flex-1 flex flex-col justify-center">
<div class="h1">+60%</div>
<div class="h5">d'éclat<sup class="ml-1 text-body-xs">(1)</sup></div>
</div>
<div class="text-body-xs flex flex-row gap-1 w-max">
<sup class="leading-loose">(1)</sup>
<button type="button" class="flex gap-1 font-bold group" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
en savoir +
<svg class="group-hover:scale-x-90 shrink-0" width="16" height="16" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M13.5 4.5 21 12m0 0-7.5 7.5M21 12H3" stroke="currentColor" stroke-width="1.5" fill="none"></path>
</svg>
</button>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="container grid-layout adjusted-marg-y-sm">
<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'ingredients')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
<div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'ingredients')?.open" @click.outside="$store.asideBlocs.closeAside('ingredients')">
<div class="font-medium h4 flex justify-between items-center mb-4">
<span></span>
<button type="button" @click="$store.asideBlocs.closeAside('ingredients')" aria-label="Label text" class=" btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="overflow-auto flex-1">
<section class="flex flex-col gap-4">
<div class="flex flex-col gap-2">
<h2 class="h4">Exemple de titre</h2>
<h3 class="h5 text-black/64">Sous titre</h3>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-body-lg font-bold">Sous sous titre</h4>
<div class="text-body-base space-y-2.5">
<p>Vous trouverez dans le tableau ci-dessous les tarifs et délais d’expédition de votre commande, en France métropolitaine, Corse et Monaco, selon le mode de livraison que vous avez choisi.</p>
<p>Domicile 6,00€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>Point relais 4,50€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>A titre d’exemple, si vous avez passé commande le lundi avant 12h, et choisi l’envoi à domicile, vous recevrez votre colis le mercredi, soit dans un délai de 48h.</p>
</div>
</div>
<div class="flex flex-col gap-2">
<h4 class="text-body-lg font-bold">Sous sous titre</h4>
<div class="text-body-base">
<p>Vous trouverez dans le tableau ci-dessous les tarifs et délais d’expédition de votre commande, en France métropolitaine, Corse et Monaco, selon le mode de livraison que vous avez choisi.</p>
<p>Domicile 6,00€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>Point relais 4,50€ (livraison offerte dès 50€ d'achat) 3 jours ouvrables</p>
<p>A titre d’exemple, si vous avez passé commande le lundi avant 12h, et choisi l’envoi à domicile, vous recevrez votre colis le mercredi, soit dans un délai de 48h.</p>
</div>
</div>
</section>
</div>
</div>
</div>
<div x-data class="fixed right-0 z-40 inset-y-0 lg:inset-y-0 max-w-full">
<div x-cloak x-transition.opacity x-show="$store.asideBlocs.asides.find(aside => aside.name === 'justDose')?.open" class="fixed inset-0 w-full h-full bg-black/40"></div>
<div x-cloak x-transition:enter="transition ease-out duration-300" x-transition:enter-start="translate-x-full" x-transition:enter-end="translate-x-0" x-transition:leave="transition ease-in duration-300" x-transition:leave-start="translate-x-0" x-transition:leave-end="translate-x-full" class="relative bg-white overflow-hidden h-full lg:h-full w-screen md:w-[372px] 2xl:w-[368px] 3xl:w-[508px] flex flex-col lg:rounded-t-none p-8" x-show="$store.asideBlocs.asides.find(aside => aside.name === 'justDose')?.open" @click.outside="$store.asideBlocs.closeAside('justDose')">
<div class="font-medium h4 flex justify-between items-center mb-4">
<span></span>
<button type="button" @click="$store.asideBlocs.closeAside('justDose')" aria-label="Label text" class=" btn btn-neutral btn-outline btn-size-sm btn-only-icon">
<svg class=" shrink-0" width="24" height="24" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M6 18 18 6M6 6l12 12" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
</button>
</div>
<div class="overflow-auto flex-1">
<article class="flex flex-col gap-4">
<header class="flex flex-col gap-2">
<div class="w-20 h-20">
<img src="/img/pdp_accordions/img_5.png" alt="Rightly dosed logo" class="w-full h-full object-contain">
</div>
<h1 class="h4">Juste dose</h1>
</header>
<div>
<section class="flex flex-col gap-4 py-6 border-t border-black/16">
<header class="text-body-lg">
<div class="flex font-bold">
<h2>Loden</h2>, <span>1995</span>
</div>
<p>Clinical test on 10 volunteers aged 25 to 53.</p>
</header>
<div class="text-body-base">
<h3 class="inline-block font-bold">Protocol:</h3>
<p class="inline">0.5 and 2% salicylic acid applied on the arm, then stripping tests (at 6h after the application) to assess the keratolytic effect. The stripping test is realised with transparent adhesive tape, then the transmission of light through the tape is measured with a digital light measuring instrument. The transmission values are converted into absorbance.</p>
</div>
<div class="text-body-base">
<h3 class="inline-block font-bold">Results:</h3>
<p class="inline">Exposing the arm to 2% salicylic acid for 6 hours significantly increased the amount of tissue found on the adhesive tape (p<0.05) (increase of 37% in absorbance value). No significant increase was observed with 0.5% salicylic acid.</p>
</div>
</section>
<section class="flex flex-col gap-4 py-6 border-t border-black/16">
<header class="text-body-lg">
<div class="flex font-bold">
<h2>Zander</h2>, <span>1992</span>
</div>
<p>Clinical study on 180 volunteers with acne, aged 12 to 22 years.</p>
</header>
<div class="text-body-base">
<h3 class="inline-block font-bold">Protocol:</h3>
<p class="inline">application during 12 weeks on face. Evaluation by clinical counting of inflammatory lesions, opens comedones, closes comedones, and total lesions.</p>
</div>
<div class="text-body-base">
<h3 class="inline-block font-bold">Results:</h3>
<p class="inline">At each evaluation (weeks 4,6,8,10,12), 2% salicylic acid was found to be superior to the vehicle for the reduction of inflammatory lesions and open comedones. Excellent or good responses in inflammatory lesion reduction were achieved in 86% of patients treated with 2% salicylic acid, vs 11% with the vehicle control. At final evaluation (12weeks) : 2% salicylic acid produces a greater reduction form baseline in all evaluated parameters: +184% in reduction of total lesions counting, +187% in reduction of inflammatory lesions, + 154% in reduction of open comedones, and + 149% in reduction of closes comedones.</p>
</div>
</section>
</div>
</article>
</div>
</div>
</div>
<section class="sm:col-start-2 col-span-10 flex flex-col gap-1">
<div x-data="{ expanded: false, highlightOnOpen: false }" class="px-4 bg-brand-100 accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-0">
<div class="h6">
<button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full py-3" :aria-expanded="expanded" aria-controls="accordion-content-0">
<span class="flex flex-wrap gap-2 transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
Conseils d'utilisation
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
</div>
<div x-cloak x-show="expanded" x-collapse id="accordion-content-0" class="">
<div class="pt-2 pb-4">
<div class="pb-3">
<div class="flex flex-col gap-4">
<p class="text-body-base">Une application facile pour une efficacité ciblée ! Simplicité et performance en un seul geste.</p>
<div class="relative">
<div class="flex flex-row snap-x snap-mandatory overflow-x-auto md:grid md:grid-cols-3 gap-2 gap-4 ">
<div class="bg-white flex-none w-52 md:w-auto md:w-full snap-start">
<div class="flex items-center justify-center rounded-sm py-2" style="background-color: #B4D7DD">
<img src="/img/pdp_accordions/when.png" alt="Quand ?" class="aspect-square" style="min-width: 112px; height: 112px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Quand ?</h3>
<p class="text-body-sm text-black/64">Le soir uniquement, avant votre soin hydratant (ne pas les mélanger). Jusqu'à amélioration de la problématique.</p>
</div>
</div>
<div class="bg-white flex-none w-52 md:w-auto md:w-full snap-start">
<div class="flex items-center justify-center rounded-sm py-2" style="background-color: #B4D7DD">
<img src="/img/pdp_accordions/where.png" alt="Où ?" class="aspect-square" style="min-width: 112px; height: 112px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Où ?</h3>
<p class="text-body-sm text-black/64">1 goutte directement sur les zones du visage concernées par les imperfections, en évitant le contour des yeux, ou sur le corps (dos, décolleté...), sur une peau propre et sèche.</p>
</div>
</div>
<div class="bg-white flex-none w-52 md:w-auto md:w-full snap-start">
<div class="flex items-center justify-center rounded-sm py-2" style="background-color: #B4D7DD">
<img src="/img/pdp_accordions/how.png" alt="Comment ?" class="aspect-square" style="min-width: 112px; height: 112px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Comment ?</h3>
<p class="text-body-sm text-black/64">Le soir uniquement, avant votre soin hydratant (ne pas les mélanger). Jusqu'à amélioration de la problématique.</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-1">
<h4 class="font-bold text-body-base">Précaution d'utilisation</h4>
<p class="text-body-base links-uno [&>a]:underline mb-5">Pour adultes et adolescents. Un léger picotement est possible à l'application.</p>
<p class="text-body-base links-uno [&>a]:underline ">Il est recommandé de ne pas combiner l'Acide salicylique 2% avec d'autres produits contenant des AHA ou BHA, du Rétinol ou tous traitements kératolytiques médicamenteux.</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-data="{ expanded: false, highlightOnOpen: false }" class="px-4 bg-brand-100 accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-1">
<div class="h6">
<button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full py-3" :aria-expanded="expanded" aria-controls="accordion-content-1">
<span class="flex flex-wrap gap-2 transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
Les bienfaits pour votre peau
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
</div>
<div x-cloak x-show="expanded" x-collapse id="accordion-content-1" class="">
<div class="pt-2 pb-4">
<div class="pb-3">
<div class="flex flex-col gap-4">
<div class="relative">
<div class="flex flex-col gap-4 ">
<div class="bg-white flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 md:w-full snap-start">
<div class="flex items-center rounded-sm " style="background-color: #fff">
<img src="/img/pdp_accordions/img.png" alt="Diminue les imperfections par exfoliation" class="aspect-square" style="min-width: 88px; height: 88px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Diminue les imperfections par exfoliation</h3>
<p class="text-body-sm text-black/64">Grâce à son action kératolytique, il élimine les cellules mortes et polluées accumulées à la surface de la peau, désincruste les impuretés et affine le grain de peau. Le grain de peau est plus net, plus régulier, les imperfections sont visiblement réduites.</p>
</div>
</div>
<div class="bg-white flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 md:w-full snap-start">
<div class="flex items-center rounded-sm " style="background-color: #fff">
<img src="/img/pdp_accordions/img_1.png" alt="Purifie" class="aspect-square" style="min-width: 88px; height: 88px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Purifie</h3>
<p class="text-body-sm text-black/64">Grâce à son action kératolytique, il élimine les cellules mortes et polluées accumulées à la surface de la peau, désincruste les impuretés et affine le grain de peau. Le grain de peau est plus net, plus régulier, les imperfections sont visiblement réduites.</p>
</div>
</div>
<div class="bg-white flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 md:w-full snap-start">
<div class="flex items-center rounded-sm " style="background-color: #fff">
<img src="/img/pdp_accordions/img_2.png" alt="Concentration optimale et action ciblée" class="aspect-square" style="min-width: 88px; height: 88px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Concentration optimale et action ciblée</h3>
<p class="text-body-sm text-black/64">Pour vous garantir la meilleure efficacité et la plus grande tolérance, l'Acide salicylique est concentré à 2%, dose optimale scientifiquement prouvée. Notre système de diffusion InSkin®, brevet pro-pénétrant, entraîne la molécule là où la peau en a besoin pour une action ultra-ciblée et des résultats rapides.</p>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div x-data="{ expanded: false, highlightOnOpen: false }" class="px-4 bg-brand-100 accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-2">
<div class="h6">
<button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full py-3" :aria-expanded="expanded" aria-controls="accordion-content-2">
<span class="flex flex-wrap gap-2 transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
Ingredients
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
</div>
<div x-cloak x-show="expanded" x-collapse id="accordion-content-2" class="">
<div class="pt-2 pb-4">
<div class="pb-3">
<div class="flex flex-col gap-4">
<p class="text-body-base">Seulement 1% des ingrédients autorisés dans le domaine cosmétique sont utilisés dans la formulation de nos produits. Nous avons choisi uniquement les meilleurs pour votre peau.</p>
<div class="relative">
<div class="flex flex-col gap-1 ">
<button class="inline-flex justify-between items-center bg-brand-200 text-brand-700 text-body-base font-bold h-11 pl-4 pr-1 py-2" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
AQUA/WATER/EAU
<svg class="w-8 h-8 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </button>
<button class="inline-flex justify-between items-center bg-brand-200 text-brand-700 text-body-base font-bold h-11 pl-4 pr-1 py-2" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
PROPANEDIOL
<svg class="w-8 h-8 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </button>
<button class="inline-flex justify-between items-center bg-brand-200 text-brand-700 text-body-base font-bold h-11 pl-4 pr-1 py-2" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
SALICYLIC ACID
<svg class="w-8 h-8 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </button>
<button class="inline-flex justify-between items-center bg-brand-200 text-brand-700 text-body-base font-bold h-11 pl-4 pr-1 py-2" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
ALCOHOL
<svg class="w-8 h-8 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </button>
<button class="inline-flex justify-between items-center bg-brand-200 text-brand-700 text-body-base font-bold h-11 pl-4 pr-1 py-2" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
SODIUM CITRATE
<svg class="w-8 h-8 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </button>
<button class="inline-flex justify-between items-center bg-brand-200 text-brand-700 text-body-base font-bold h-11 pl-4 pr-1 py-2" x-data x-init="$store.asideBlocs.addAside('ingredients')" @click="$store.asideBlocs.toggleAside('ingredients')">
XANTHAN GUM
<svg class="w-8 h-8 shrink-0" width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M8.21967 5.21967C8.51256 4.92678 8.98744 4.92678 9.28033 5.21967L13.5303 9.46967C13.8232 9.76256 13.8232 10.2374 13.5303 10.5303L9.28033 14.7803C8.98744 15.0732 8.51256 15.0732 8.21967 14.7803C7.92678 14.4874 7.92678 14.0126 8.21967 13.7197L11.9393 10L8.21967 6.28033C7.92678 5.98744 7.92678 5.51256 8.21967 5.21967Z" fill="currentColor" />
</svg> </button>
</div>
</div>
<div class="flex flex-col gap-1">
<p class="text-body-base links-uno [&>a]:underline ">Ces informations proviennent du service Ask.NAOS, pour en savoir plus, <a href="#">cliquez-ici</a></p>
<a href="#" class="
link-base
link-uno
">
Voir la liste INCI
</a>
</div>
</div>
</div>
</div>
</div>
</div>
<div x-data="{ expanded: false, highlightOnOpen: false }" class="px-4 bg-brand-100 accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-3">
<div class="h6">
<button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full py-3" :aria-expanded="expanded" aria-controls="accordion-content-3">
<span class="flex flex-wrap gap-2 transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
Expertise scientifique
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
</div>
<div x-cloak x-show="expanded" x-collapse id="accordion-content-3" class="">
<div class="pt-2 pb-4">
<div class="pb-3">
<div class="flex flex-col gap-4">
<div class="relative">
<div class="flex flex-col gap-4 ">
<div class="bg-white flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 md:w-full snap-start">
<div class="flex items-center rounded-sm " style="background-color: #fff">
<img src="/img/pdp_accordions/img_3.png" alt="Ecobiology" class="aspect-square" style="min-width: 88px; height: 88px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Ecobiology</h3>
<p class="text-body-sm text-black/64">This product is part of the NAOS AGEING SCIENCE research program, that applies ecobiology to skin aging.</p>
<div class="mt-2">
<span class="text-body-sm text-black/64">Pour en savoir plus, </span>
<a href="#" class="
link-medium
link-uno
">
cliquez-ici
</a>
</div>
</div>
</div>
<div class="bg-white flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 md:w-full snap-start">
<div class="flex items-center rounded-sm " style="background-color: #fff">
<img src="/img/pdp_accordions/img_4.png" alt="In-Skin patent" class="aspect-square" style="min-width: 88px; height: 88px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">In-Skin patent</h3>
<p class="text-body-sm text-black/64">IN-SKINTM patent improves skin’s permeability, boosting molecule diffusion into the skin to act exactly where needed.</p>
</div>
</div>
<div class="bg-white flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8 md:w-full snap-start">
<div class="flex items-center rounded-sm " style="background-color: #fff">
<img src="/img/pdp_accordions/img_5.png" alt="Juste dose" class="aspect-square" style="min-width: 88px; height: 88px">
</div>
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">Juste dose</h3>
<p class="text-body-sm text-black/64">Salicylic Acid’s blemish-limiting action (comedolytic and keratolytic action) has been documented in the scientific literature for effective doses of 2%. It is also Europe’s maximum regulated dose for leave-on cosmetic products.</p>
<div class="mt-2">
<span class="text-body-sm text-black/64">Pour en savoir plus, </span>
<a href="#" x-data x-init="$store.asideBlocs.addAside('justDose')" @click="$store.asideBlocs.toggleAside('justDose')" class="
link-medium
link-uno
">
cliquez-ici
</a>
</div>
</div>
</div>
</div>
</div>
<div class="flex flex-col gap-1">
</div>
</div>
</div>
</div>
</div>
</div>
<div x-data="{ expanded: false, highlightOnOpen: false }" class="px-4 bg-brand-100 accordion-black transition-all duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'border-t border-brand-500' : ''" id="accordion-4">
<div class="h6">
<button type="button" @click="expanded = !expanded" class="accordion-button flex justify-between items-center w-full py-3" :aria-expanded="expanded" aria-controls="accordion-content-4">
<span class="flex flex-wrap gap-2 transition-colors duration-300 ease-in-out" :class="highlightOnOpen && expanded ? 'text-brand-500' : ''">
FAQ
</span>
<span :class="expanded ? 'rotate-180' : ''" class="transform transition-transform duration-300" aria-hidden="true">
<svg class=" shrink-0" width="32" height="32" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" fill="currentColor" />
</svg> </span>
</button>
</div>
<div x-cloak x-show="expanded" x-collapse id="accordion-content-4" class="">
<div class="pt-2 pb-4">
<div class="pb-3">
<div class="flex flex-col gap-4">
<div class="relative">
<div class="flex flex-col gap-4 ">
<div class="h-full py-6 border-b border-black-16">
<h4 class="text-body-lg font-bold">Que signifie SPF ? Quel indice de protection solaire choisir ?</h4>
<p class="text-body-sm">Le SPF (facteur de protection solaire) désigne le niveau de protection contre les UV offert par un produit solaire. Plus le facteur de protection est élevé, meilleure est la photoprotection. Ce qui est sûr c'est que toutes les peaux ont besoin d'être protégées du soleil. Pour les peaux claires (taches de rousseur, cheveux blonds, roux…) et sensibles, l'indice SPF 50 s'impose pour garder une peau en bonne santé. Il doit être renouvelé régulièrement, après une baignade, s'être essuyé ou avoir transpiré. Pour les peaux intermédiaires et les types méditerranéens (teint mat, cheveux chatains ou bruns), choisir un SPF de 30 au minimum, surtout au début de l'exposition solaire, pour éviter les coups de soleil. Pour les peaux brunes, métissées ou noires, un SPF 30 permet de protégrer la peau contre les UV. Dans tous les cas, en cas de forte chaleur, passer à l'indice supérieur !</p>
</div>
<div class="h-full py-6 border-b border-black-16">
<h4 class="text-body-lg font-bold">À quelle fréquence mettre de la crème solaire ?</h4>
<p class="text-body-sm">Avant de parler de fréquence, nous préférons insister sur la quantité de produit appliqué. Il est essentiel de bien appliquer la protection solaire en quantité suffisante avant chaque exposition. Réduire la quantité de produit diminue nettement le niveau de protection. Il faut ensuite renouveler l’application après avoir transpiré, nagé ou s'être essuyé, ou en cas d’exposition prolongée. Attention, le ressenti face au soleil peut-être trompeur et un soleil même faible a un effet rapide sur la peau...</p>
</div>
<div class="h-full py-6 border-b border-black-16">
<h4 class="text-body-lg font-bold">Quels gestes pour bien protéger ma peau ?</h4>
<p class="text-body-sm">Salicylic Acid’s blemish-limiting action (comedolytic and keratolytic action) has been documented in the scientific literature for effective doses of 2%. It is also Europe’s maximum regulated dose for leave-on cosmetic products.</p>
</div>
<div class="h-full py-6 border-b border-black-16">
<h4 class="text-body-lg font-bold">Ma peau est sensible, puis-je utiliser le Fluide minéral protecteur SPF 30 ?</h4>
<p class="text-body-sm">Absolument, notre Fluide minéral protecteur SPF 30 a été formulé pour être très respectueux de la peau du visage et testé sur peaux sensibles. Donc aucune crainte, et penser à bien renouveler l'application après avoir transpiré, nagé ou s'être essuyé, ou en cas d’exposition prolongée.</p>
</div>
<div class="h-full py-6 border-b border-black-16">
<h4 class="text-body-lg font-bold">Quelle est la particularité d'un Soin Pur ?</h4>
<p class="text-body-sm">Un Soin Pur est un produit qui ne contient pas de principe actif pour nettoyer ou hydrater la peau chaque jour sans l’agresser inutilement. Les peaux saines, sans problématique particulière, n’ont pas besoin d’actifs superflus qui risquent de surtraiter la peau.</p>
</div>
<div class="h-full py-6 ">
<h4 class="text-body-lg font-bold">Comment les Soins Purs peuvent-ils être efficaces sans aucun actif ?</h4>
<p class="text-body-sm">Un Soin Pur est un produit qui ne contient pas de principe actif pour prendre soin de sa peau au quotidien sans l’agresser inutilement. Les Actifs Purs, à l’inverse, sont des produits à l’action ciblée qui traitent les problèmes de peau quand c’est nécessaire (1 actif, 1 problématique). Les peaux saines, sans problématique particulière, n’ont pas besoin d’Actif Pur.</p>
</div>
</div>
</div>
<div class="flex flex-col gap-1">
<a href="#" type="button" class="justify-center btn btn-dark btn-outline btn-size-lg">
Voir toute la FAQ
</a>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
</div>
<div class="@container group h-full
sm:container py-6">
<div class="relative h-full
grid-layout items-center justify-center ">
<picture class="absolute inset-0 w-full h-full
sm:col-start-2 sm:col-span-10 ">
<source srcset="/img/diagnostic/desktop-2.png" media="(min-width: 769px)" />
<img src="/img/diagnostic/mobile-2.png" alt="Excepteur sint occaecat cupidatat" class="object-cover w-full h-full " loading="lazy" />
</picture>
<div class="absolute inset-0
sm:col-start-2 sm:col-span-10 bg-black/08 mix-blend-overlay "></div>
<section class="relative flex items-center min-h-62 md:min-h-[346px] 2xl:min-h-88 3xl:min-h-100 adjusted-marg-y-sm
adjusted-marg-x-sm
col-span-4 sm:col-start-2 sm:col-span-10
justify-center
">
<article class="
relative flex gap-3 w-full
flex-col ">
<div class="flex flex-col gap-1.5
text-center items-center ">
<h2 class="h2 [&>span]:font-normal text-white">
Excepteur sint occaecat cupidatat
</h2>
<p class="h6-base [&>span]:md:font-semibold [&>span]:md:uppercase text-white">
Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris.
</p>
<a href="#" class="
link-medium
link-light
link-icon
font-bold items-center
">
<svg class=" shrink-0" width="20" height="20" stroke="currentColor" stroke-width="1.5" viewBox="0 0 21 20" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M10.5 5V10H14.25M18 10C18 14.1421 14.6421 17.5 10.5 17.5C6.35786 17.5 3 14.1421 3 10C3 5.85786 6.35786 2.5 10.5 2.5C14.6421 2.5 18 5.85786 18 10Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg>
<span class="">30 minutes</span>
</a>
</div>
<div class="flex justify-center items-center gap-4">
<a href="#" type="button" class="w-max btn btn-light btn-outline btn-size-lg">
CTA Primaire
</a>
</div>
</article>
</section>
</div>
</div>
<div class="container grid-layout adjusted-marg-y-sm">
<div class="sm:col-start-3 col-span-8 w-full flex flex-col gap-3 ">
<h2 class="text-body-lg font-bold text-black/56 px-4 md:px-O">
Nos engagements
</h2>
<div class="flex flex-row p-4 gap-x-4">
<div class="flex flex-col gap-4 items-center flex-1">
<div class="flex flex-col items-center gap-1 w-full">
<div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
<img src="/img/icon-text/image-icon-france.png" alt="logo france" width="72" height="72" class="w-10 lg:w-[72px]">
</div>
<div class="text-center text-body-sm text-black">
Made in France
</div>
</div>
</div>
<div class="flex flex-col gap-4 items-center flex-1">
<div class="flex flex-col items-center gap-1 w-full">
<div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
<img src="/img/icon-text/image-icon-phone-responsive.png" alt="logo responsive" width="72" height="72" class="w-10 lg:w-[72px]">
</div>
<div class="text-center text-body-sm text-black">
Flawless formulation
</div>
</div>
</div>
<div class="flex flex-col gap-4 items-center flex-1">
<div class="flex flex-col items-center gap-1 w-full">
<div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
<img src="/img/icon-text/image-icon-40-years-exp.png" alt="+40 ans d'expertise" width="72" height="72" class="w-10 lg:w-[72px]">
</div>
<div class="text-center text-body-sm text-black">
+40 ans d'expertise
</div>
</div>
</div>
<div class="flex flex-col gap-4 items-center flex-1">
<div class="flex flex-col items-center gap-1 w-full">
<div class="bg-brand-100 rounded-full aspect-square flex items-center justify-center w-[72px] lg:w-[120px]">
<img src="/img/icon-text/image-icon-naos-logo.png" alt="Naos logo" width="72" height="72" class="w-10 lg:w-[72px]">
</div>
<div class="text-center text-body-sm text-black">
Ecobiologie
</div>
</div>
</div>
</div>
</div>
</div>
<section class="flex flex-col gap-3 py-6 2xl:py-8 3xl:py-18">
<div class="container text-body-lg font-bold text-black/64">
<h3>Associez votre produit</h3>
</div>
<div class="overflow-auto">
<div class="container flex gap-3 2xl:gap-4 3xl:gap-5">
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0 flex md:hidden lg:flex">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<section class="flex flex-col gap-3 py-6 2xl:py-8 3xl:py-18">
<div class="container text-body-lg font-bold text-black/64">
<h3>Associez votre produit</h3>
</div>
<div class="overflow-auto">
<div class="container flex gap-3 2xl:gap-4 3xl:gap-5">
<a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a> <a href="#" class="relative group flex flex-col justify-between overflow-hidden h-full w-[150px] md:w-[177px] 2xl:w-[250px] 3xl:w-[321px] shrink-0 flex md:hidden lg:flex">
<div class="relative aspect-square bg-gray-100">
<img src="/img/product/img-2.png" alt="Nom du produit sur 2 lignes maximum sinon tronquée" class="w-full h-full object-cover aspect-[5/6]">
<div class="hidden group-hover:md:flex w-full justify-center absolute z-10 bottom-2.5">
<button type="button" class="flex btn btn-dark btn-solid btn-size-sm">
Ajouter au Panier
</button>
</div>
</div>
<div class="flex flex-col justify-between">
<div class="flex flex-col justify-between gap-2 py-2">
<div class="flex flex-col gap-1">
<h3 class="text-body-base group-hover:text-brand-700 font-bold line-clamp-2">Nom du produit sur 2 lignes maximum sinon tronquée</h3>
<p class="text-body-sm line-clamp-2">Descriptif gamme ou actifs sur 2 lignes maximum </p>
</div>
<div class="flex items-center space-x-0.5">
<svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path fill-rule="evenodd" clip-rule="evenodd" d="M10.7881 3.213C11.2364 2.13505 12.7635 2.13505 13.2118 3.213L15.2938 8.21871L20.6979 8.65196C21.8616 8.74525 22.3335 10.1975 21.4469 10.957L17.3295 14.484L18.5874 19.7575C18.8583 20.8931 17.6229 21.7906 16.6266 21.1821L11.9999 18.3561L7.37329 21.1821C6.37697 21.7906 5.14158 20.8931 5.41246 19.7575L6.67038 14.484L2.55303 10.957C1.66639 10.1975 2.13826 8.74525 3.302 8.65196L8.70609 8.21871L10.7881 3.213Z" fill="currentColor" />
</svg> <svg class="text-black shrink-0" width="12" height="12" stroke="currentColor" stroke-width="1.5" viewBox="0 0 24 24" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
<path d="M11.4807 3.50102C11.6729 3.03905 12.3273 3.03905 12.5195 3.50102L14.6454 8.61248C14.7264 8.80724 14.9096 8.94031 15.1199 8.95716L20.6381 9.39956C21.1369 9.43954 21.3391 10.062 20.9591 10.3875L16.7548 13.9889C16.5946 14.1261 16.5246 14.3414 16.5736 14.5466L17.858 19.9315C17.9741 20.4182 17.4447 20.8028 17.0177 20.542L12.2933 17.6564C12.1133 17.5465 11.8869 17.5465 11.7069 17.6564L6.98251 20.542C6.55551 20.8028 6.02606 20.4182 6.14215 19.9315L7.42664 14.5466C7.47558 14.3414 7.40562 14.1261 7.24543 13.9889L3.04111 10.3875C2.66112 10.062 2.86335 9.43954 3.36209 9.39956L8.88034 8.95716C9.0906 8.94031 9.27375 8.80724 9.35476 8.61248L11.4807 3.50102Z" stroke="currentColor" stroke-width="1.5" fill="none" />
</svg> <span class="text-body-sm">4.5 | 128 avis</span>
</div>
<div class="h6">30,60€</div>
<div class="uppercase text-body-xxs text-black/56 tracking-widest font-bold">
BEST SELLER
</div>
</div>
</div>
</a>
</div>
</div>
</section>
<section class="container bg-neutral-50 max-md:pe-0 adjusted-marg-y-md flex flex-col gap-3" x-data="initSlider" x-init="calcPageSize(); $nextTick(function() { calcActive() })" @resize.window.debounce="calcPageSize(); $nextTick(() => calcActive())" role="group" aria-roledescription="Carousel">
<h2 class="font-bold text-body-lg text-black/56">Mieux connaître sa peau</h2>
<div class="flex md:grid grid-cols-3 gutter-quarter overflow-auto js_slides snap" @scroll.debounce="calcActive">
<a id="slide-0" aria-labelledby="tab-0" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-1" aria-labelledby="tab-1" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-2.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Vieillissement de la peau du visage : nos astuces à partir de 40 ans
</div>
</a> <a id="slide-2" aria-labelledby="tab-2" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-3" aria-labelledby="tab-3" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-4" aria-labelledby="tab-4" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-5" aria-labelledby="tab-5" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-6" aria-labelledby="tab-6" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-7" aria-labelledby="tab-7" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-8" aria-labelledby="tab-8" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-9" aria-labelledby="tab-9" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-10" aria-labelledby="tab-10" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a> <a id="slide-11" aria-labelledby="tab-11" role="tabpanel" href="" class="bg-white hover:text-brand-700 transition-colors shrink-0 w-[85%] md:w-auto js_slide">
<div class="aspect-[3/2]">
<img class="w-full h-full object-cover" src="/img/blog/thumbnail-1.png" alt="">
</div>
<div class="p-4 h5 after:h-2 after:w-10 after:bg-brand after:block after:mt-5">
Gluconate de zinc : bienfaits et pouvoir matifiant
</div>
</a>
</div>
<div class="flex items-center justify-center py-6 mt-3 md:hidden">
<div role="tablist" aria-label="Navigation du slider" class="flex flex-wrap justify-center gap-3">
<template x-for="(index, i) in Math.ceil(itemCount / pageSize)" :key="i">
<button class="shrink-0 block h-1 bg-black rounded-full shadow cursor-pointer transition-all duration-300 ease-in-out" role="tab" :id="'tab-' + (index-1)" :aria-controls="'slide-' + (index-1)" :aria-selected="Math.floor(active/pageSize) === index-1" :tabindex="Math.floor(active/pageSize) === index-1 ? 0 : -1" :class="{
'bg-opacity-100 w-22': Math.floor(active/pageSize) === index-1,
'bg-opacity-40 w-6': Math.floor(active/pageSize) !== index-1
}" @click="scrollTo((index-1)*pageSize);">
<span class="sr-only" x-text="'Aller au groupe de slides ' + index"></span>
</button>
</template>
</div>
</div>
</section>
<script>
'use strict';
function initSlider() {
return {
active: 0,
itemCount: 0,
getSlider() {
return this.$root.querySelector('.js_slides');
},
pageSize: 4,
pageFillers: 0,
calcPageSize() {
const slider = this.getSlider();
if (slider) {
this.itemCount = slider.querySelectorAll('.js_slide').length;
this.pageSize = Math.round(slider.clientWidth / slider.querySelector('.js_slide').clientWidth);
this.pageFillers = (
this.pageSize * Math.ceil(this.itemCount / this.pageSize)
) - this.itemCount;
}
},
calcActive() {
const slider = this.getSlider();
if (slider) {
const sliderItems = this.itemCount + this.pageFillers;
const calculatedActiveSlide = slider.scrollLeft / (slider.scrollWidth / sliderItems);
this.active = Math.round(calculatedActiveSlide / this.pageSize) * this.pageSize;
}
},
scrollPrevious() {
this.scrollTo(this.active - this.pageSize);
},
scrollNext() {
this.scrollTo(this.active + this.pageSize);
},
scrollTo(idx) {
const slider = this.getSlider();
if (slider) {
const slideWidth = slider.scrollWidth / (this.itemCount + this.pageFillers);
slider.scrollLeft = Math.floor(slideWidth) * idx;
this.active = idx;
}
},
}
}
</script>
<div class="container">
{% render "@breadcrumbs" with {
links: [
{
label: 'Actifs',
href: '#'
},
{
label: 'Acide salicylique 2%',
href: '#'
}
]
} %}
</div>
<div class="sm:container">
<div class="grid-layout gap-y-6 adjusted-marg-b-sm">
{# Row #}
<div class="col-span-4 sm:col-span-6 lg:col-span-7">
{% render "@pdp-gallery_product" %}
</div>
<div class="col-span-4 sm:col-span-6 lg:col-span-5">
{% if isSpanishWebsite %}
{% render "@pdp-product-info--spanish" %}
{% else %}
{% render "@pdp-product-info" %}
{% endif %}
</div>
</div>
</div>
{% render "@product-selection" %}
{% render "@slider--mobile-only" %}
{% render "@instagram" %}
{% render "@clinical-results" %}
{% render "@pdp-accordions" %}
{% render "@banner" %}
{% render "@pdp-our-commitments" %}
{% render "@product-selection" %}
{% render "@product-selection" %}
{% render "@blog-posts" %}
/* No context defined. */
No notes defined.