<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 grid-layout adjusted-marg-y-sm">
{% render "@pdp-ingredients" %}
{% render "@pdp-just_dose" %}
<section class="sm:col-start-2 col-span-10 flex flex-col gap-1">
{% for accordion in accordions %}
{% embed "@accordion" with {
expanded: accordion.expanded,
title: accordion.title,
accordion_title_class: accordion.accordion_title_class,
accordion_class: accordion.accordion_class ~ " bg-brand-100",
color: 'dark',
width: '32',
height: '32'
} %}
{% block content %}
<div class="flex flex-col gap-4">
{% if accordion.content.preContent %}
<p class="text-body-base">{{ accordion.content.preContent }}</p>
{% endif %}
{% if accordion.content.content %}
<div class="relative">
<div class="flex {% if accordion.content.content.direction == 'row' %}flex-row snap-x snap-mandatory overflow-x-auto md:grid md:grid-cols-3 gap-2{% else %}flex-col {% endif %} {% if accordion.content.content.type != "asidePanel" %} gap-4 {% else %} gap-1 {% endif %}">
{% for item in accordion.content.content.item %}
{% if accordion.content.content.type == "card" %}
<div class="bg-white {% if accordion.content.content.direction == 'col' %}flex flex-col md:flex-row gap-2 md:gap-8 p-4 md:p-8{% else %}flex-none w-52 md:w-auto{% endif %} md:w-full snap-start">
{% if item.header.type == "image" %}
<div class="flex items-center {% if accordion.content.content.direction == 'row' %}justify-center{% endif%} rounded-sm {{ item.header.image_wrapper_class }}"
style="background-color: {{ item.header.background }}">
<img src="{{ item.header.value }}" alt="{{ item.main.title }}"
class="aspect-square" style="min-width: {{ item.header.size }}px; height: {{ item.header.size }}px">
</div>
{% endif %}
<div class="flex flex-col gap-2 p-4">
<h3 class="text-body-lg font-bold">{{ item.main.title }}</h3>
<p class="text-body-sm text-black/64">{{ item.main.content }}</p>
{% if item.main.link %}
<div class="mt-2">
<span class="text-body-sm text-black/64">Pour en savoir plus, </span>
{% if item.main.link.openDrawer == false %}
{% render "@template-link" with {
label: item.main.link.text,
url: item.main.link.url,
isExternal: item.main.link.isExternal,
type: "uno",
size: "medium"
} %}
{% else %}
{% render "@template-link" with {
label: item.main.link.text,
url: false,
isExternal: item.main.link.isExternal,
type: "uno",
size: "medium",
link_attribute: ('x-data x-init="$store.asideBlocs.addAside(\'' ~ item.main.link.url ~ '\')" @click="$store.asideBlocs.toggleAside(\'' ~ item.main.link.url ~ '\')"')|replace({"\'": "'"}),
} %}
{% endif %}
</div>
{% endif %}
</div>
</div>
{% elseif accordion.content.content.type == "asidePanel" %}
<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('{{ item.asideName }}')"
@click="$store.asideBlocs.toggleAside('{{ item.asideName }}')"
>
{{ item.label }}
{% render "@icons-heroicons--chevron-right-mini" with {
iconClass: "w-8 h-8"
} %}
</button>
{% elseif accordion.content.content.type == "text" %}
<div class="h-full py-6 {% if not loop.last %}border-b border-black-16{% endif %}">
<h4 class="text-body-lg font-bold">{{ item.question }}</h4>
<p class="text-body-sm">{{ item.answer }}</p>
</div>
{% endif %}
{% endfor %}
</div>
</div>
{% endif %}
{% if accordion.content.afterContent %}
<div class="flex flex-col gap-1">
{% if accordion.content.afterContent.title %}
<h4 class="font-bold {% if descriptionItalic == true %}text-body-sm italic{% else%}text-body-base{% endif %}">{{ accordion.content.afterContent.title }}</h4>
{% endif %}
{% if accordion.content.afterContent.description %}
{% for desc in accordion.content.afterContent.description %}
<p class="{% if descriptionItalic == true %}text-body-sm italic{% else%}text-body-base{% endif %} links-uno [&>a]:underline {% if not loop.last %}mb-5{% endif %}">{{ desc }}</p>
{% endfor %}
{% endif %}
{% if accordion.content.afterContent.link %}
{% if accordion.content.afterContent.link.type == "link" %}
{% render "@template-link" with {
type: accordion.content.afterContent.link.color,
label: accordion.content.afterContent.link.label,
href: accordion.content.afterContent.link.href
} %}
{% else %}
{% render "@template-button" with {
href: accordion.content.afterContent.link.href,
label: accordion.content.afterContent.link.label,
color: accordion.content.afterContent.link.color,
type: accordion.content.afterContent.link.button_type,
button_class: 'justify-center'
} %}
{% endif %}
{% endif %}
</div>
{% endif %}
</div>
{% endblock %}
{% endembed %}
{% endfor %}
</section>
</div>
{
"accordions": [
{
"title": "Conseils d'utilisation",
"expanded": false,
"accordion_title_class": "h6",
"accordion_class": "px-4",
"content": {
"preContent": "Une application facile pour une efficacité ciblée ! Simplicité et performance en un seul geste.",
"content": {
"direction": "row",
"type": "card",
"item": [
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/when.png",
"size": 112,
"background": "#B4D7DD",
"image_wrapper_class": "py-2"
},
"main": {
"title": "Quand ?",
"content": "Le soir uniquement, avant votre soin hydratant (ne pas les mélanger). Jusqu'à amélioration de la problématique."
}
},
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/where.png",
"size": 112,
"background": "#B4D7DD",
"image_wrapper_class": "py-2"
},
"main": {
"title": "Où ?",
"content": "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."
}
},
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/how.png",
"size": 112,
"background": "#B4D7DD",
"image_wrapper_class": "py-2"
},
"main": {
"title": "Comment ?",
"content": "Le soir uniquement, avant votre soin hydratant (ne pas les mélanger). Jusqu'à amélioration de la problématique."
}
}
]
},
"afterContent": {
"title": "Précaution d'utilisation",
"description": [
"Pour adultes et adolescents. Un léger picotement est possible à l'application.",
"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."
],
"descriptionItalic": true
}
}
},
{
"title": "Les bienfaits pour votre peau",
"expanded": false,
"accordion_title_class": "h6",
"accordion_class": "px-4",
"content": {
"preContent": false,
"content": {
"direction": "col",
"type": "card",
"item": [
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/img.png",
"size": 88,
"background": "#fff"
},
"main": {
"title": "Diminue les imperfections par exfoliation",
"content": "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."
}
},
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/img_1.png",
"size": 88,
"background": "#fff"
},
"main": {
"title": "Purifie",
"content": "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."
}
},
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/img_2.png",
"size": 88,
"background": "#fff"
},
"main": {
"title": "Concentration optimale et action ciblée",
"content": "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."
}
}
]
},
"afterContent": {
"title": false,
"description": false
}
}
},
{
"title": "Ingredients",
"expanded": false,
"accordion_title_class": "h6",
"accordion_class": "px-4",
"content": {
"preContent": "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.",
"content": {
"direction": "col",
"type": "asidePanel",
"item": [
{
"label": "AQUA/WATER/EAU",
"asideName": "ingredients"
},
{
"label": "PROPANEDIOL",
"asideName": "ingredients"
},
{
"label": "SALICYLIC ACID",
"asideName": "ingredients"
},
{
"label": "ALCOHOL",
"asideName": "ingredients"
},
{
"label": "SODIUM CITRATE",
"asideName": "ingredients"
},
{
"label": "XANTHAN GUM",
"asideName": "ingredients"
}
]
},
"afterContent": {
"titre": false,
"description": [
"Ces informations proviennent du service Ask.NAOS, pour en savoir plus, <a href=\"#\">cliquez-ici</a>"
],
"link": {
"type": "link",
"label": "Voir la liste INCI",
"color": "uno",
"href": "#"
}
}
}
},
{
"title": "Expertise scientifique",
"expanded": false,
"accordion_title_class": "h6",
"accordion_class": "px-4",
"content": {
"preContent": false,
"content": {
"direction": "col",
"type": "card",
"item": [
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/img_3.png",
"size": 88,
"background": "#fff"
},
"main": {
"title": "Ecobiology",
"content": "This product is part of the NAOS AGEING SCIENCE research program, that applies ecobiology to skin aging.",
"link": {
"openDrawer": false,
"text": "cliquez-ici",
"url": "#",
"isExternal": false
}
}
},
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/img_4.png",
"size": 88,
"background": "#fff"
},
"main": {
"title": "In-Skin patent",
"content": "IN-SKINTM patent improves skin’s permeability, boosting molecule diffusion into the skin to act exactly where needed."
}
},
{
"header": {
"type": "image",
"value": "/img/pdp_accordions/img_5.png",
"size": 88,
"background": "#fff"
},
"main": {
"title": "Juste dose",
"content": "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.",
"link": {
"openDrawer": true,
"text": "cliquez-ici",
"url": "justDose",
"isExternal": false
}
}
}
]
},
"afterContent": {
"title": false,
"description": false
}
}
},
{
"title": "FAQ",
"expanded": false,
"accordion_title_class": "h6",
"accordion_class": "px-4",
"content": {
"preContent": false,
"content": {
"direction": "col",
"type": "text",
"item": [
{
"question": "Que signifie SPF ? Quel indice de protection solaire choisir ?",
"answer": "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 !"
},
{
"question": "À quelle fréquence mettre de la crème solaire ?",
"answer": "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..."
},
{
"question": "Quels gestes pour bien protéger ma peau ?",
"answer": "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."
},
{
"question": "Ma peau est sensible, puis-je utiliser le Fluide minéral protecteur SPF 30 ?",
"answer": "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."
},
{
"question": "Quelle est la particularité d'un Soin Pur ?",
"answer": "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."
},
{
"question": "Comment les Soins Purs peuvent-ils être efficaces sans aucun actif ?",
"answer": "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."
}
]
},
"afterContent": {
"title": false,
"description": false,
"link": {
"type": "button",
"label": "Voir toute la FAQ",
"button_type": "outline",
"color": "dark",
"href": "#"
}
}
}
}
]
}
No notes defined.