PageSourceSearch

https://www.garnier.fr/

html garnier.fr collected 2026-09-25 19:23:46 UTC 345,501 bytes, 3,779 lines download raw bytes

1
2
3
4<!DOCTYPE html>
5<!--[if lt IE 7]>      <html class="no-js lt-ie9 lt-ie8 lt-ie7"> <![endif]-->
6<!--[if IE 7]>         <html class="no-js lt-ie9 lt-ie8"> <![endif]-->
7<!--[if IE 8]>         <html class="no-js lt-ie9"> <![endif]-->
8<!--[if gt IE 8]><!-->
9<html class="no-js" lang="fr-FR">
10<!--<![endif]-->
11<head>
12    
13
14    <link href="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/ico/favicon---new_garnier_logo.png?rev=bd94ac66255746b799d26324d2baccd6" rel="shortcut icon" />
15
16
17<!-- OneTrust Cookies Consent Notice start -->
18    
18<script async src="https://cdn.cookielaw.org/scripttemplates/otSDKStub.js"  type="text/javascript" charset="UTF-8" data-domain-script="dc10abe9-5fd2-4ad7-9f97-1ffba6f5be53" ></script>
18
19    
20<! OneTrust Cookies Consent Notice end >
21
22    <meta name="viewport" content="width=device-width, initial-scale=1" charset="utf-8" />
23    <link rel="stylesheet" type="text/css" defer href="/themes/garnier/bundle.css?v=12.6.0-release00000005">
24    
24<script type="text/javascript" defer fetchpriority="high" src="/themes/Garnier/bundle.js?v=12.6.0-release00000005"></script>
24
25        <link rel="stylesheet" type="text/css" href="/themes/garnier/gothamfonts.css" />
26        <link href="https://www.garnier.fr" rel="canonical" />
27    
28    
29<script type="application/ld+json">
30       {"@context":"http://schema.org/","@type":"Organization","url":"https://www.garnier.fr","description":"Découvrez nos soins pour la peau, pour les cheveux, colorations, coiffure et nos produits pour homme par Garnier. Explorez les produits les mieux notés pour trouver vos soins de la peau et vos routines capillaires personnalisés.","name":"Garnier","sameAs":["https://www.instagram.com/garnierfr/","https://www.facebook.com/GarnierFR/","https://www.youtube.com/user/garnierFR"],"address":{"@type":"PostalAddress","streetAddress":"30 RUE D'ALSACE","addressLocality":"LEVALLOIS-PERRET","postalCode":"92300","addressCountry":"FRANCE"},"contactPoint":{"@type":"ContactPoint","telephone":" ","contactType":"customer support","areaServed":"","availablelanguage":""},"parentOrganization":{"@type":"Organization"}}
31</script>
31
32
33<script type="application/ld+json">
34    {
35"@context" : "http://schema.org",
36"@type" : "Organization",
37"name" : "GARNIER FR",
38"url" : "https://www.garnier.fr",
39"description" : "Découvrez nos soins pour la peau, pour les cheveux, colorations, coiffure et nos produits pour homme par Garnier. Explorez les produits les mieux notés pour trouver vos soins de la peau et vos routines capillaires personnalisés.",
40"telephone" : " ",
41"logo" : "",
42"address": {
43"@type" : "PostalAddress",
44"streetAddress" : "30 RUE D'ALSACE",
45"addressLocality" : "LEVALLOIS-PERRET",
46"postalCode" : "92300",
47"addressCountry" : "FRANCE",
48"sameAs" : 
49	["https://www.facebook.com/GarnierFR/",
50		"https://twitter.com/garnierfr?lang=fr"]}
51	}
52</script>
52
53
54
55
56        <title>Soin du cheveu, Colorations, Produits pour la peau - Garnier</title>
57
58
59
60<meta  Name="Custom Metadata" Content="Custom Metadata complet">
61
62
63
64
65
66
67<meta property="og:type"  content="homepage"><meta property="og:site_name"  content="garnier"><meta property="og:image"  content="https://www.garnier.fr/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/211406_garnier_sharing.jpg?rev=e950a0bba0c241eb9a2af80dcf63f492"><meta property="og:title"  content="Soin du cheveu, Colorations, Produits pour la peau - Garnier"><meta property="og:url"  content="https://www.garnier.fr/"><meta property="og:description"  content="Découvrez les meilleurs produits de soins capillaires, de coiffure, de coloration et de soin de la peau pour hommes et femmes de Garnier pour vos propres routines de soins capillaires et de la peau.">
68
69
70<meta  name="description" content="Découvrez nos ingrédients naturels et trouvez votre routine personnalisée avec Skin Coach. Une technologie sur mesure pour des recommandations adaptées.">
71
72
73<meta property="twitter:site"  content="This is the Twitter Site"><meta  name="twitter:image" content="https://www.garnier.fr/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/211406_garnier_sharing.jpg?rev=e950a0bba0c241eb9a2af80dcf63f492"><meta  name="twitter:description" content="Découvrez les meilleurs produits de soins capillaires, de coiffure, de coloration et de soin de la peau pour hommes et femmes de Garnier pour vos propres routines de soins capillaires et de la peau."><meta  name="twitter:title" content="Soin du cheveu, Colorations, Produits pour la peau - Garnier"><meta  name="twitter:card" content="app">
74
75    <meta name="viewport" content="width=device-width, initial-scale=1" />
76<link rel="preconnect" crossorigin="anonymous" href="https://www.googletagmanager.com/gtm.js?id=GTM-WQB4X5" as="script">
77        
77<script type="text/plain" class="optanon-category-2">
78            if (window.eventBus) {
79    window.eventBus.$emit('optanonCategory2', true);
80            
81            }
82        </script>
82
83        
83<script type="text/plain" class="optanon-category-3">
84            if (window.eventBus) {
85            window.eventBus.$emit('optanonCategory3', true);
86            
87            }
88        </script>
88
89        
89<script type="text/plain" class="optanon-category-4">
90            if (window.eventBus) {
91                window.eventBus.$emit('optanonCategory4', true);
92                
93            }
94        </script>
94
95    
95<script type="text/javascript">
96        var dataLayer = window["dataLayer"] || [];
97        dataLayer.push({"brand":"GAR","language":"fr","country":"fr","geoIPLocation":"","siteTypeLevel":"main","pageCategory":"homepage","uiLoggedStatus":"not logged","masterVersion":"3.2","breadCrumb":"home","factory":"WSF","website_type":"NON-DTC","product_category":""});
98    </script>
98
99    
99<script type="application/json" id="refapp-global-tagging-configuration">
100        {
101            "globalVars":   {
102            "[page category]": "homepage"
103                            }
104        }
105    </script>
105
106    <!-- Google Tag Manager -->
107    <link rel="dns-prefetch" href="https://www.googletagmanager.com">
108    <link rel="dns-prefetch" href="https://www.google-analytics.com">
109        
109<script type="text/javascript">
vendor: 375 bytes, lines 109-114
109
110        (function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
111        new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
112        j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
113        'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
114        })(window,document,'script','dataLayer',  '
114GTM-WQB4X5
vendor: 13 bytes, lines 114-115
114');
115        
115</script>
115
116    <!-- End Google Tag Manager -->
117    <!--Jebbit Quiz Tagging Script-->
118    
118<script type="text/javascript">
119        setTimeout(function () {
120            function iFramePush(message) {
121                try {
122                    if (typeof message.data['event'] != 'undefined')
123                        dataLayer.push(message.data);
124                } catch (e) { }
125            }
126            window.addEventListener("message", iFramePush, false);
127        }, 5000);
128    </script>
128
129    <!--End Jebbit Quiz Tagging Script-->
130        
130<script crossorigin="anonymous" src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.7.16/vue.runtime.min.js"></script>
vendor: 2 bytes, line 130
130
131<script src="/Refapp-build/refapp-user-redirect/widget-vue2/refapp-user-redirect.umd.js?v=1.0.0.3"></script>
131
132
133    
134    
135
136
137<script type="application/ld+json">
138
139
140{
141  "@context": "https://schema.org",
142  "@type": "WebSite",
143  "url":"https://www.garnier.fr/",
144  "potentialAction": {
145    "@type": "SearchAction",
146    "target": {
147      "@type": "EntryPoint",
148      "urlTemplate":"https://www.garnier.fr//search-page/search?query={search_term_string}"
149    },
150    "query-input": "required name=search_term_string"
151  }
152}
153</script>
153
154
155</head>
156<body class="default-device wireframe-images bodyclass gotham-fonts">
157
158    
158<script>document.querySelector('html').classList.remove('no-js')</script>
158
159    <div style="display: none"><?xml version="1.0" encoding="utf-8" ?>
160<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
161    <symbol viewBox="0 0 300 300" id="account" xmlns="http://www.w3.org/2000/svg">
162        <path class="aacls-1" d="M237.39 210.37a307.06 307.06 0 00-55.22-35.72 1.74 1.74 0 01-1-1.56v-14.85a59.65 59.65 0 10-63.19 0v14.85a1.74 1.74 0 01-1 1.56 307.07 307.07 0 00-55.22 35.72 19.07 19.07 0 00-6.94 14.72v26.7h189.51v-26.7a19.07 19.07 0 00-6.94-14.72z" />
163    </symbol>
164    <symbol viewBox="0 0 300 300" id="arrow-down" xmlns="http://www.w3.org/2000/svg">
165        <path class="abcls-1" d="M150.79 192.57L86.53 130l20.29-20.84 43.41 42.27 42.28-43.41 20.83 20.29z" />
166    </symbol>
167    <symbol viewBox="0 0 300 300" id="arrow-next" xmlns="http://www.w3.org/2000/svg">
168        <path class="acst0" d="M102.4 298.8l-48.8-47.5 99-101.7-101.7-99L98.4 1.8l150.5 146.5z" />
169    </symbol>
170    <symbol viewBox="0 0 300 300" id="arrow-previous" xmlns="http://www.w3.org/2000/svg">
171        <path class="adst0" d="M197.3 298.3l48.6-47.4-98.6-101.3 101.3-98.7-47.4-48.6-149.9 146z" />
172    </symbol>
173    <symbol viewBox="0 0 272.93 295" id="arrow-reset" xmlns="http://www.w3.org/2000/svg">
174        <path class="aecls-1" d="M235.34 229.03a119.3 119.3 0 11-7-169.53l-20.48 21.72 65.08 2.72-8.51-63.84-17.22 18.89a147.35 147.35 0 10-99.56 256h5.53a146.29 146.29 0 00102.64-46.95 14 14 0 00-20.5-19z" />
175    </symbol>
176    <svg viewBox="0 0 16 16" id="arrow-right" fill="none" xmlns="http://www.w3.org/2000/svg">
177        <path d="M6 12L10 8L6 4" stroke="currentColor" stroke-width="2"/>
178    </svg>
179    <symbol viewBox="0 0 300 300" id="arrow-slider-next" xmlns="http://www.w3.org/2000/svg">
180        <path class="afcls-1" d="M115.45 81.31l70.41 68.56-68.56 70.41" />
181    </symbol>
182    <symbol viewBox="0 0 300 300" id="arrow-slider-previous" xmlns="http://www.w3.org/2000/svg">
183        <path class="agcls-1" d="M185.86 81.31l-70.41 68.56 68.56 70.41" />
184    </symbol>
185    <svg width="30" height="30" id="arrow-top-rounded" viewBox="0 0 30 30" fill="none" xmlns="http://www.w3.org/2000/svg">
186      <path d="M22.5 18.75L15 11.25L7.5 18.75" stroke="#156031" stroke-width="2.5"/>
187    </svg>
188
189    <symbol viewBox="0 0 300 300" id="arrows-updown" xmlns="http://www.w3.org/2000/svg">
190        <path d="M75 50.9l75 75-21.4 21.4-38.4-38.4v139H59.8v-139l-38.4 38.4L0 125.9zm150 197l75-75-21.4-21.5-38.4 38.5v-139h-30.4v139l-38.4-38.5-21.4 21.5z" />
191    </symbol>
192    <symbol fill="none" viewBox="0 0 201 98" id="back-arrow-quiz" xmlns="http://www.w3.org/2000/svg">
193        <path d="M47.5 1L1 48.5 47.5 97 59 86 30.5 57h170V40.5h-170l28.5-28L47.5 1z" fill="#CBCBCB" stroke="#CBCBCB" />
194    </symbol>
195    <symbol viewBox="0 0 20 20" id="before-after" xmlns="http://www.w3.org/2000/svg">
196        <path d="M10.909 0v20H9.091V0zM8.182 0v1.818H1.488v16.364h6.694V20H0V0zM20 18.182V20h-1.818v-1.818zm-2.727 0V20h-1.818v-1.818zm-2.728 0V20h-2.727v-1.818zM20 14.545v1.819h-1.818v-1.819zm0-3.636v1.818h-1.818v-1.818zm0-3.636v1.818h-1.818V7.273zm0-3.637v1.819h-1.818V3.636zM14.545 0v1.818h-2.727V0zm2.728 0v1.818h-1.818V0zM20 0v1.818h-1.818V0z" data-name="00_Global-Guidelines/Icons/02_20px-Med-Icon/Before-After" />
197    </symbol>
198    <symbol viewBox="0 0 300 300" id="burger" xmlns="http://www.w3.org/2000/svg">
199        <path class="alcls-1" d="M45 85.3h210v27.54H45zm0 51.63h210v27.54H45zm0 51.64h210v27.54H45z" />
200    </symbol>
201    <symbol viewBox="0 0 300 300" id="cart" xmlns="http://www.w3.org/2000/svg">
202        <path class="amcls-1" d="M222.57 49.15l-5.18 27.91L31 78l23.21 104.43 143.61.21-6.46 34.82H65.86v17.41h17.7a14.51 14.51 0 1028.43 0h47a14.51 14.51 0 1028.43 0h17.7l35.49-168.31H269V49.15z" />
203    </symbol>
204    <symbol viewBox="0 0 300 300" id="chat" xmlns="http://www.w3.org/2000/svg">
205        <path class="ancls-1" d="M211.82 63H87.68a42.42 42.42 0 00-42.43 42.43V144a42.39 42.39 0 0040.4 42.32V234a2.37 2.37 0 004 1.77l54-49.42c.51-.46-.27.82-.27.15h68.51a42.42 42.42 0 0042.36-42.5v-38.61A42.42 42.42 0 00211.82 63z" />
206    </symbol>
207    <symbol viewBox="0 0 300 300" id="chat-with-dots" xmlns="http://www.w3.org/2000/svg">
208        <path d="M211.9 63.6H88.4c-23.3 0-42.2 18.9-42.2 42.2v38.4c0 22.5 17.7 41 40.2 42.1v47.3c0 1.3 1 2.4 2.4 2.4.6 0 1.2-.2 1.6-.6l53.6-49.1c.5-.4-.3.8-.3.1h68.1c23.3 0 42.1-18.9 42.1-42.2v-38.4c.1-23.3-18.8-42.1-42-42.2z" />
209        <circle cx="108" cy="126.2" r="11.2" fill="#fff" />
210        <circle cx="156.7" cy="126.2" r="11.2" fill="#fff" />
211        <circle cx="205.4" cy="126.2" r="11.2" fill="#fff" />
212    </symbol>
213    <symbol viewBox="0 0 15 15" id="close" xmlns="http://www.w3.org/2000/svg">
214        <path class="apst0" d="M.4 1.1l13.5 13.5 1-1L1.4.1l-1 1z" />
215        <path class="apst0" d="M14.9 1.1L1.4 14.6l-1-1L13.9.1l1 1z" />
216    </symbol>
217    <symbol viewBox="0 0 80 48" id="email" xmlns="http://www.w3.org/2000/svg">
218        <path class="aqcls-1" d="M74 0H6a6 6 0 00-6 6v36a6 6 0 006 6h68a6 6 0 006-6V6a6 6 0 00-6-6zm1.78 42.88L57.5 26.69 76 12.59V42a1.88 1.88 0 01-.22.88zM4 42V12.49l18 13.77-18 16A1.79 1.79 0 014 42zm21.3-13.27l10.52 8a7.94 7.94 0 004.24 1.55 8 8 0 004.25-1.55l10-7.59L71.01 44H8.06zM6 4h68a2 2 0 012 2v1.57L42 33.24a4.4 4.4 0 01-2 .84 4.44 4.44 0 01-2-.84L4 7.46V6a2 2 0 012-2z" />
219    </symbol>
220    <symbol viewBox="0 0 300 300" id="facebook" xmlns="http://www.w3.org/2000/svg">
221        <path class="arcls-1" d="M51.78 52.23v196.83h196.83V52.23zM183 109.64h-15.77c-5.05 0-8.83 2.07-8.83 7.29V126H183l-2 24.6h-22.6v65.61h-24.6v-65.57h-16.4V126h16.4v-15.73c0-16.58 8.73-25.24 28.38-25.24H183z" />
222    </symbol>
223    <symbol viewBox="0 0 300 300" id="google" xmlns="http://www.w3.org/2000/svg">
224        <path class="ascls-1" d="M51.68 52.23v196.83h196.83V52.23zm71.08 136.69a38.28 38.28 0 110-76.55 36.7 36.7 0 0125.65 10l-10.39 10a21.57 21.57 0 00-15.25-5.9 24.17 24.17 0 000 48.34c15.15 0 20.83-10.88 21.71-16.51h-21.72v-13.12h36.14a34.43 34.43 0 01.61 6.34c-.01 21.86-14.66 37.4-36.75 37.4zm92.94-32.8h-16.4v16.4h-10.93v-16.4H172v-10.94h16.4v-16.4h10.9v16.4h16.4z" />
225    </symbol>
226    <symbol viewBox="0 0 300 300" id="home" xmlns="http://www.w3.org/2000/svg">
227        <path class="atcls-1" d="M149.48 51.52l-84.04 68.76v129.88h168.08V120.28l-84.04-68.76z" />
228        <path class="atcls-1" d="M233.52 251.66H65.44a1.5 1.5 0 01-1.5-1.5V120.28a1.5 1.5 0 01.55-1.16l84-68.76a1.5 1.5 0 011.9 0l84 68.76a1.5 1.5 0 01.55 1.16v129.88a1.5 1.5 0 01-1.42 1.5zm-166.58-3H232V121l-82.52-67.54L66.94 121z" />
229    </symbol>
230    <symbol viewBox="0 0 49 49" id="info" xmlns="http://www.w3.org/2000/svg">
231        <path class="aucls-1" d="M24.5 4A20.5 20.5 0 114 24.5 20.53 20.53 0 0124.5 4m0-4A24.5 24.5 0 1049 24.5 24.5 24.5 0 0024.5 0z" />
232        <path class="aucls-1" d="M20.07 35.63h.3c.26 0 .52-.06.78-.11a11.31 11.31 0 005.29-3.08 13.47 13.47 0 001.58-1.94c.11-.16-.05-.5-.08-.75-.23.06-.52 0-.68.2-.58.55-1.11 1.16-1.69 1.72a6 6 0 01-1.21.92c-.51.28-.87 0-.8-.57a4.9 4.9 0 01.29-1.06c.73-1.9 1.49-3.78 2.2-5.68a33.75 33.75 0 001.26-3.88 2 2 0 00-1.81-2.62 6.26 6.26 0 00-1.93.08c-2.66.53-4.52 2.26-6.15 4.29a.62.62 0 00-.17.33.93.93 0 00.15.59.57.57 0 00.55 0 11.52 11.52 0 00.93-.92c.59-.58 1.16-1.17 1.77-1.71.32-.27.75-.53 1.15-.21s.14.74 0 1.11c-.91 2.21-1.88 4.41-2.74 6.65a26.83 26.83 0 00-1.23 4.1c-.39 1.63.47 2.54 2.24 2.54zm6.87-23.53a3 3 0 00-3 2.9 2.36 2.36 0 002.55 2.41 3 3 0 003.01-2.91 2.37 2.37 0 00-2.56-2.4z" />
233        <path class="aucls-1" d="M20.07 35.63c-1.77 0-2.63-.91-2.29-2.57a26.83 26.83 0 011.23-4.1c.86-2.24 1.83-4.44 2.74-6.65.15-.37.42-.79 0-1.11s-.83-.06-1.15.21c-.61.54-1.18 1.13-1.77 1.71a11.52 11.52 0 01-.93.92.57.57 0 01-.55 0 .93.93 0 01-.15-.59.62.62 0 01.17-.33c1.63-2 3.49-3.76 6.15-4.29a6.26 6.26 0 011.98-.05 2 2 0 011.85 2.58 33.75 33.75 0 01-1.26 3.88c-.71 1.9-1.47 3.78-2.2 5.68a4.9 4.9 0 00-.29 1.06c-.07.58.29.85.8.57a6 6 0 001.21-.92c.58-.56 1.11-1.17 1.69-1.72.16-.15.45-.14.68-.2 0 .25.19.59.08.75a13.47 13.47 0 01-1.58 1.95 11.31 11.31 0 01-5.33 3.09c-.26 0-.52.08-.78.11zm6.87-23.53a2.37 2.37 0 012.56 2.4 3 3 0 01-3.08 2.87 2.36 2.36 0 01-2.55-2.41 3 3 0 013.07-2.86z" />
234    </symbol>
235    <symbol viewBox="0 0 300 300" id="instagram" xmlns="http://www.w3.org/2000/svg">
236        <path class="avcls-1" d="M172.07 150.64a21.87 21.87 0 11-21.87-21.87 21.87 21.87 0 0121.87 21.87zm31.54-26.51c.31 6.91.38 9 .38 26.51s-.07 19.59-.38 26.51c-.82 17.63-9.1 26.09-26.89 26.89-6.92.31-9 .39-26.52.39s-19.6-.07-26.51-.38c-17.83-.81-26.09-9.28-26.89-26.89-.32-6.93-.39-9-.39-26.52s.07-19.59.39-26.51c.81-17.65 9.1-26.09 26.89-26.89 6.92-.32 9-.39 26.51-.39s19.6.07 26.51.38c17.78.77 26.08 9.26 26.9 26.91zm-19.72 26.51a33.69 33.69 0 10-33.69 33.69 33.69 33.69 0 0033.68-33.69zm9.2-35a7.87 7.87 0 10-7.87 7.87 7.88 7.88 0 007.87-7.89zm55.52-63.4v196.82H51.78V52.23zm-32.8 98.41c0-17.81-.07-20.05-.39-27-1.07-23.8-14.31-37.07-38.16-38.16-7-.33-9.23-.4-27.06-.4s-20 .07-27 .39C99.31 86.52 86.08 99.74 85 123.59c-.32 7-.39 9.24-.39 27.06s.07 20.05.39 27c1.1 23.83 14.32 37.08 38.17 38.17 7 .32 9.23.39 27 .39s20.05-.07 27.06-.39c23.8-1.09 37.09-14.31 38.16-38.17.34-6.96.41-9.19.41-27.01z" />
237    </symbol>
238    <symbol viewBox="0 0 100 100" preserveAspectRatio="xMidYMid" class="awlds-ripple" style="background:0 0" id="loading-animation" xmlns="http://www.w3.org/2000/svg">
239        <circle cx="50" cy="50" r="40" fill="none" stroke="#eef7db" stroke-width="3">
240            <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1.2" keySplines="0 0.2 0.8 1" begin="-0.6s" repeatCount="indef
240inite" />
241            <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1.2" keySplines="0.2 0 0.8 1" begin="-0.6s" repeatCount="indefinite" />
242        </circle>
243        <circle cx="50" cy="50" r="25.953" fill="none" stroke="#B4C832" stroke-width="3">
244            <animate attributeName="r" calcMode="spline" values="0;40" keyTimes="0;1" dur="1.2" keySplines="0 0.2 0.8 1" begin="0s" repeatCount="indefinite" />
245            <animate attributeName="opacity" calcMode="spline" values="1;0" keyTimes="0;1" dur="1.2" keySplines="0.2 0 0.8 1" begin="0s" repeatCount="indefinite" />
246        </circle>
247    </symbol>
248    <symbol viewBox="0 0 300 300" id="location" xmlns="http://www.w3.org/2000/svg">
249        <path class="axcls-1" d="M202.67 77.74a61.43 61.43 0 00-52.56-30.18c-44 0-72.44 46.17-55 85.58 17.4 40.13 36.93 79.9 55 119.67l29.83-65c9.23-19.89 21.31-40.84 27.34-62.15 4.63-15.96 4.27-32.66-4.61-47.92zM150.12 136a29.83 29.83 0 1129.83-29.83A29.83 29.83 0 01150.12 136z" />
250    </symbol>
251    <symbol viewBox="0 0 15 15" id="minus" xmlns="http://www.w3.org/2000/svg">
252        <path class="ayst0" d="M17.2 8H-1.9V6.6h19.1V8z" />
253    </symbol>
254    <symbol viewBox="0 0 300 300" id="pinterest" xmlns="http://www.w3.org/2000/svg">
255        <path class="azcls-1" d="M51.78 52.23v196.83h196.83V52.23zm98.41 164a65.54 65.54 0 01-19.43-2.93c2.67-4.35 6.67-11.5 8.15-17.21l4.09-15.56c2.14 4.08 8.39 7.53 15 7.53 19.79 0 34-18.2 34-40.81 0-21.68-17.69-37.89-40.45-37.89-28.31 0-43.35 19-43.35 39.7 0 9.63 5.13 21.6 13.32 25.42 1.24.57 1.9.32 2.2-.88l1.82-7.44a2 2 0 00-.46-1.89c-2.71-3.28-4.88-9.33-4.88-15 0-14.48 11-28.47 29.62-28.47 16.12 0 27.4 11 27.4 26.7 0 17.75-9 30-20.63 30-6.45 0-11.27-5.32-9.72-11.86 1.85-7.8 5.44-16.21 5.44-21.85 0-5-2.71-9.24-8.3-9.24-6.59 0-11.88 6.82-11.88 15.94a23.71 23.71 0 002 9.74s-6.5 27.5-7.69 32.62c-1.32 5.67-.8 13.63-.23 18.81a65.61 65.61 0 1123.93 4.52z" />
256    </symbol>
257    <symbol viewBox="0 0 15 15" id="plus" xmlns="http://www.w3.org/2000/svg">
258        <path class="bast0" d="M7-2.2v19.1h1.4V-2.2H7z" />
259        <path class="bast0" d="M17.2 8H-1.9V6.6h19.1V8z" />
260    </symbol>
261    <symbol fill="none" viewBox="0 0 24 24" id="arrowhead-previous" xmlns="http://www.w3.org/2000/svg">
262        <path d="M15 6l-6 6 6 6" stroke="#21362C" stroke-width="2"/>
263    </symbol>
264    <symbol fill="none" viewBox="0 0 24 24" id="arrowhead-next" xmlns="http://www.w3.org/2000/svg">
265        <path d="M9 18l6-6-6-6" stroke="#21362C" stroke-width="2"/>
266    </symbol>
267    <symbol fill="none" viewBox="0 0 18 18" id="arrowhead-S-right" xmlns="http://www.w3.org/2000/svg">
268        <path d="M6.75 13.5l4.5-4.5-4.5-4.5" stroke="currentColor" stroke-width="2"/>
269    </symbol>
270    <symbol viewBox="0 0 126 135" id="rounded-arrow-quiz" xmlns="http://www.w3.org/2000/svg">
271        <path d="M17.636 76h-16.5c-2 20 18 56.5 61.5 57.5s61-39.5 62-55-3-49-37-64c-27.2-12-51.666-1.667-60.5 5V1h-16l-2 46.5 48.5 2.5V33h-18.5c8.8-8 23.667-8 30-7 36 5.6 41.334 37.333 39.5 52.5-4 16-20.2 46.1-53 38.5-32.8-7.6-39-30.5-38-41z"/>
272    </symbol>
273    <symbol viewBox="0 0 300 300" id="search" xmlns="http://www.w3.org/2000/svg">
274        <path class="bccls-1" d="M244.92 225.37l-46.61-46.61a79.54 79.54 0 10-22.5 20.83L223.25 247zM77.72 132.2a56.6 56.6 0 1156.6 56.6 56.66 56.66 0 01-56.6-56.6z" />
275    </symbol>
276    <symbol viewBox="0 0 300 300" id="share" xmlns="http://www.w3.org/2000/svg">
277        <circle cx="151" cy="150.5" r="99" />
278        <path fill="#fff" d="M176.6 172.2c-5.1 0-10.1 1.7-14.1 4.9L129.9 159c1.6-4.7 1.6-9.8 0-14.6l34.3-19.2c10.7 6.9 24.9 3.8 31.8-6.9 6.9-10.7 3.8-24.9-6.9-31.8-10.7-6.9-24.9-3.8-31.8 6.9-2.4 3.7-3.7 8.1-3.6 12.5 0 3.4.7 6.8 2.3 9.8l-33 18.4c-9.7-8.2-24.2-7.1-32.4 2.6s-7.1 24.2 2.6 32.4c8.6 7.3 21.3 7.3 29.8 0l32.2 17.8c-1 2.6-1.5 5.4-1.5 8.1-.1 12.7 10.1 23.1 22.8 23.2 12.7.1 23.1-10.1 23.2-22.8s-10.1-23.1-22.8-23.2c-.2.1-.2.1-.3 0z" />
279    </symbol>
280    <symbol viewBox="0 0 155.139 155.139" id="sign-in-facebook" xmlns="http://www.w3.org/2000/svg">
281        <path d="M89.584 155.139V84.378h23.742l3.562-27.585H89.584V39.184c0-7.984 2.208-13.425 13.67-13.425l14.595-.006V1.08C115.325.752 106.661 0 96.577 0 75.52 0 61.104 12.853 61.104 36.452v20.341H37.29v27.585h23.814v70.761h28.48z" fill="#fff" />
282    </symbol>
283    <symbol viewBox="0 0 300 300" id="star" xmlns="http://www.w3.org/2000/svg">
284        <path class="bfcls-1" d="M83.59 252l66.65-48.32L216.76 252l-25.38-78.33 66.48-48.25h-82.19l-25.43-78.25-25.41 78.25H42.48l66.54 48.25L83.59 252z" />
285    </symbol>
286    <symbol viewBox="0 0 29 21.96" id="tryon-camera" xmlns="http://www.w3.org/2000/svg">
287        <path class="bgcls-1" d="M21.78 4l-2.34-4H9.56L7.22 4H0v18h29V4zM28 21H1V5h6.79l2.34-4h8.74l2.34 4H28z" />
288        <path class="bgcls-1" d="M14.5 9.55a2.5 2.5 0 11-2.5 2.5 2.5 2.5 0 012.5-2.5m0-1a3.5 3.5 0 103.5 3.5 3.5 3.5 0 00-3.5-3.5z" />
289        <path class="bgcls-1" d="M14.5 5.52A6.5 6.5 0 118 12a6.51 6.51 0 016.5-6.5m0-1A7.5 7.5 0 1022 12a7.5 7.5 0 00-7.5-7.5z" />
290    </symbol>
291    <symbol viewBox="0 0 22.4 19" id="tryon-reload" xmlns="http://www.w3.org/2000/svg">
292        <path class="bhcls-1" d="M12.4 0A9.57 9.57 0 003 8.3L.82 5.22 0 5.79l3.11 4.5 4.5-3.11-.56-.82-3 2.14a8.56 8.56 0 018.4-7.5c4.94 0 9 3.57 9 8.5s-4 8.5-9 8.5a9 9 0 01-5.88-2.21l-.58.82A9.89 9.89 0 0012.45 19c5.49 0 10-4 10-9.5S17.9 0 12.4 0z" />
293    </symbol>
294    <symbol viewBox="0 0 29 25" id="tryon-upload" xmlns="http://www.w3.org/2000/svg">
295        <path class="bicls-1" d="M18.37 13.16L14.5 9.29l-3.87 3.87.71.71L14 11.21V25h1V11.21l2.66 2.66.71-.71z" />
296        <path class="bicls-1" d="M29 0H0v18h10.63v-1H1V1h27v16h-9.63v1H29V0z" />
297    </symbol>
298    <symbol viewBox="0 0 300 300" id="twitter" xmlns="http://www.w3.org/2000/svg">
299        <path class="bjcls-1" d="M50.78 52.23v196.83h196.83V52.23zM205.47 128c1.71 37.87-26.53 80.09-76.52 80.09A76.16 76.16 0 0187.68 196a54.17 54.17 0 0039.86-11.15 26.94 26.94 0 01-25.14-18.7 27.07 27.07 0 0012.15-.46A27 27 0 0193 138.93a26.78 26.78 0 0012.19 3.37 27 27 0 01-8.33-35.95 76.44 76.44 0 0055.49 28.13 26.94 26.94 0 0145.88-24.55 53.87 53.87 0 0017.1-6.53 27 27 0 01-11.83 14.89 54 54 0 0015.46-4.24A55 55 0 01205.47 128z" />
300    </symbol>
301    <symbol viewBox="0 0 107 59" id="up-arrow" xmlns="http://www.w3.org/2000/svg">
302        <path d="M107.4 54.9L53.9.3.4 54.9 4 58.6 53.9 7.7l49.9 50.9z" />
303    </symbol>
304    <symbol viewBox="0 0 300 300" id="video" xmlns="http://www.w3.org/2000/svg">
305        <path class="blcls-1" d="M126.93 113.88v79.35l66.13-39.67-66.13-39.68z" />
306        <path class="blcls-1" d="M150.07 47.75a102.5 102.5 0 10102.5 102.5 102.5 102.5 0 00-102.5-102.5zm0 181.85a79.35 79.35 0 1179.35-79.35 79.35 79.35 0 01-79.35 79.35z" />
307    </symbol>
308    <symbol viewBox="0 0 20 20" id="video-pdp" xmlns="http://www.w3.org/2000/svg">
309        <path d="M10 0A10 10 0 110 10 10 10 0 0110 0zm0 2.259A7.741 7.741 0 1017.741 10 7.741 7.741 0 0010 2.259zM7.8 6.4l6.4 3.9-6.4 3.9z" data-name="00_Global-Guidelines/Icons/02_20px-Med-Icon/Video" />
310    </symbol>
311    <symbol viewBox="0 0 300 300" id="youtube" xmlns="http://www.w3.org/2000/svg">
312        <path class="bncls-1" d="M164.68 168.31c-2.36 0-4.39 1.51-5.88 3.32V156.1h-6.68v48.22h6.68v-2.72a7.58 7.58 0 006.28 3.18c4.4 0 6-3.42 6-7.82v-19.74c.04-4.82-1.56-8.91-6.4-8.91zm-.36 27.69a4.07 4.07 0 01-.57 2.45c-.73 1-2.3.91-3.39.37l-1.57-1.25v-22.18l1.37-1.08a2.75 2.75 0 013.45.58 4.45 4.45 0 01.71 2.73zM142 126v-17.34c0-2.05.94-3.56 2.9-3.56 2.13 0 3 1.47 3 3.56V126c0 2-1 3.53-2.9 3.53s-3-1.53-3-3.53zm-15.16 37.07h-7.71v41.23h-7.45v-41.19H104v-7h22.87zm12.16 5.68h6.62v35.58H139v-3.93a14.42 14.42 0 01-3.81 3.31c-3.57 2-8.46 2-8.46-5.22v-29.74h6.61V196c0 1.44.34 2.39 1.76 2.39s3.08-1.66 3.89-2.67zM50.78 52.23v196.83h196.83V52.23zM161 98.32h6.95v28.63c0 1.51.36 2.52 1.85 2.52s3.24-1.74 4.08-2.8V98.32h6.95v37.36h-6.95v-4.13c-3 3.58-5.93 4.67-8 4.67-3.72 0-4.85-3-4.85-6.67V98.32zM145.07 98a9.75 9.75 0 0110 10v18.31c0 6.27-4.4 10-10 10-6.73 0-10.18-3.42-10.18-10V108c0-6 4.11-10 10.18-10zM116.9 85l5.4 20.24 5-20.24h7.95l-9.1 3
3120.1v20.54h-7.82v-20.51L109 85zm69.65 130.5c-14.23 1-60.5 1-74.71 0-15.4-1-17.2-10.39-17.31-34.81.11-24.46 1.93-33.76 17.31-34.81 14.21-1 60.48-1 74.71 0 15.4 1 17.2 10.39 17.31 34.81-.11 24.49-1.92 33.78-17.31 34.84zm-.39-47.67c-6 0-10 4.28-10 10.46v16c0 6.41 3.23 11 9.55 11 7 0 9.91-4.15 9.91-11v-2.67h-6.81v2.47c0 3.1-.16 5-3 5s-2.89-2.31-2.89-5v-6.71h12.65v-9.05c0-6.44-3.06-10.47-9.4-10.47zm2.6 14h-5.84v-3.6c0-2.44.51-4.17 3-4.17s2.89 1.76 2.89 4.17z" />
313    </symbol>
314    <symbol viewBox="0 0 300 300" id="zoom-minus" xmlns="http://www.w3.org/2000/svg">
315        <path class="bocls-1" d="M245.21 226l-46.83-46.83a79.92 79.92 0 10-22.61 20.93l47.67 47.67zm-168-93.61a56.87 56.87 0 1156.87 56.87 56.93 56.93 0 01-56.86-56.89z" />
316        <path class="bocls-1" d="M106.28 142.92v-14.98h59.91v14.98z" />
317    </symbol>
318    <symbol viewBox="0 0 300 300" id="zoom-plus" xmlns="http://www.w3.org/2000/svg">
319        <path class="bpcls-1" d="M245.21 226l-46.83-46.83a79.92 79.92 0 10-22.61 20.93l47.67 47.67zm-168-93.61a56.87 56.87 0 1156.87 56.87 56.93 56.93 0 01-56.86-56.89z" />
320        <path class="bpcls-1" d="M166.19 127.94h-22.47v-22.47h-14.97v22.47h-22.47v14.97h22.47v22.47h14.97v-22.47h22.47v-14.97z" />
321    </symbol>
322    <symbol viewBox="0 0 40 40" id="co2" xmlns="http://www.w3.org/2000/svg">
323        <g fill="none" fill-rule="evenodd">
324            <circle stroke="#969696" fill="#FFF" cx="20" cy="20" r="19.5" />
325            <path d="M10.954 16.745c1.133 0 2.056.626 2.67 1.809h3.043c-.745-2.96-3.043-4.803-5.729-4.803a5.674 5.674 0 00-4.19 1.776A6.09 6.09 0 005 19.873c0 1.776.55 3.264 1.634 4.465 1.099 1.244 2.653 1.94 4.272 1.911 2.767 0 4.952-1.776 5.712-4.701H13.56c-.614 1.116-1.57 1.725-2.654 1.725-1.585 0-3.01-1.472-3.01-3.383a3.213 3.213 0 01.897-2.244 2.937 2.937 0 012.161-.901M23.775 13.75a6.214 6.214 0 00-4.427 1.762 6.111 6.111 0 00-1.848 4.36c0 1.781.58 3.273 1.727 4.477a6.052 6.052 0 004.531 1.9 6.193 6.193 0 004.48-1.882 6.226 6.226 0 001.761-4.443c-.028-3.398-2.798-6.145-6.224-6.173m-.017 9.513c-1.676 0-3.198-1.458-3.198-3.357a3.15 3.15 0 011.583-2.752 3.203 3.203 0 013.195 0 3.15 3.15 0 011.583 2.752c0 1.967-1.42 3.357-3.163 3.357M35 21.274c0-1.003-.787-1.69-2.083-1.69-1.264 0-2.075.833-2.084 2.16h1.473c0-.04-.008-.09-.008-.13 0-.526.242-.825.61-.825.36 0 .578.235.578.639 0 .81-.87 1.764-2.62 2.767v1.222h4.118V24.13H32.9c1.397-.874 2.1-1.925 2.1-2.856" fill="#969696" fill-rule="nonzero" />
326        </g>
327    </symbol>
328    <symbol viewBox="0 0 40 40" id="picto-water" xmlns="http://www.w3.org/2000/svg">
329        <g fill="none" fill-rule="evenodd">
330            <circle stroke="#969696" fill="#FFF" cx="20" cy="20" r="19.5" />
331            <path d="M20.412 7.7a.542.542 0 00-.838 0c-1.78 2.346-8.434 11.516-8.434 15.836.025 4.958 3.982 8.964 8.854 8.964 4.872 0 8.83-4.006 8.854-8.964 0-4.32-6.653-13.49-8.435-15.836m2.32 21.622a.774.774 0 01-.337.051.89.89 0 01-.787-.462c-.153-.396.04-.834.45-1.025 3.319-1.231 3.036-4.924 2.98-4.976a.75.75 0 01.371-.695.915.915 0 01.847-.052c.272.123.45.369.47.645.224 1.641-.45 5.18-3.994 6.514" fill="#969696" fill-rule="nonzero" />
332        </g>
333    </symbol>
334    <symbol viewBox="0 0 40 40" id="picto-tryon" xmlns="http://www.w3.org/2000/svg">
335        <path fill="#004532" d="M0 0h40v40H0z" />
336        <path d="M25.7 0c-.1.2-.2.4-.3.5-.8 1.1-1.8 2.2-2.8 3.2C24 4.2 34 7.6 36.5 17.8c2.4 10.1-4.3 15.8-4.6 16.1-.3.3-.8.2-1.1-.1-.3-.3-.2-.8.1-1.1 3.1-2.9 4.7-7.1 4.5-11.3-.7 2.8-1.7 5.4-3.1 7.9-1.1 1.9-2.5 3.6-4.2 5.1V40h-1.6v-4.5c-1.9 1.2-4.2 1.9-6.5 1.9h.4c.1.1.1.2.1.4v1.6c0 .3-.2.6-.5.6s-.5-.3-.5-.6v-1.6c0-.1 0-.3.1-.4-2-.1-4-.6-5.7-1.7V40h-1.6v-5.5c-4.6-3.9-7-11-7.5-16.1C1.6 21.7.6 25 1.7 28.1c1.9 5 5.5 4 5.7 3.9.3-.1.6 0 .9.2.2.2.3.5.3.8-.1.3-.3.5-.6.6-.5.1-1 .2-1.5.2-1.8 0-4.7-1-6.4-5.1 0-.1-.1-.3-.1-.6v-2.9-2.3c0-2.2 2.4-4.9 5.6-7.6 1-.9 2.5-2 4.3-3.3 4.5-3.4 11.2-8.3 13.7-12h2.1zM0 34c.1.1.1.2.2.3.1.2 2.8 4.4 10 4 .4 0 .8.3.8.8s-.3.8-.7.9h-.9c-5 0-9-2.7-9.4-3.5v-1.2V34zm40-4v4c-1 1.9-2.3 3.6-3.9 4.9-.1 0-.2.1-.3.1-.3 0-.5-.1-.7-.4-.2-.4-.1-.9.2-1.1 2.3-1.9 3.9-4.6 4.7-7.5zM21.6 4.8c-.4.3-.7.6-1.1 1v1.3c0 .3-.2.6-.5.6s-.5-.3-.5-.6v-.4c-2.7 2.4-5.6 4.6-8.5 6.8-1.7 1.3-3.2 2.4-4.2 3.3l-.4.4C6.6 23.1 10.6 36 20 36c10.1 0 14.4-13.7 14.4-19.3C31.4 8 21.7 5 21.6 4.8zM20 32.4c.3 0 .5.3.5.6v1.6c0 .3-.2.6-.5.6s-.5-.3-.5-.6V33c0-.3.2-.6.5-.6zm1.3-5.4c.2 0 .5.1.6.3 0 0 .7.6 1 .9.1.1.1.1.2.1.4.1.9.1.9.3 0 .3 0 .5-.9.6-.1 1-1.7 1.8-3.1 1.8s-3-.8-3.1-1.9c-.9-.1-.9-.3-.9-.6 0-.2.4-.1.9-.3.1 0 .1 0 .1-.1l1.1-.9c.2
336-.1.5-.2.7-.3.4 0 .8.1 1.2.4.4-.2.8-.3 1.3-.3zm-1.2 1.4H20c-.1 0-.4.1-.5.1-.1 0-.1.1-.3.1-.2.1-.3.1-.5.1l-.1.1c0 .2.6.1 1.4.1.8 0 1.4.1 1.3-.1 0-.1 0-.1-.1-.1-.2 0-.3-.1-.5-.1-.1 0-.2-.1-.3-.1-.2-.1-.3-.1-.5-.1h.2zM19 23.2c.4.4.7.6 1 .6.4 0 .7-.2 1.1-.6.2-.2.6-.2.8 0s.2.6 0 .8c-.4.5-.9.7-1.3.9v1.3c0 .3-.2.6-.5.6s-.5-.3-.5-.6v-1.3c-.5-.1-.9-.5-1.4-.9-.2-.2-.2-.6 0-.8.2-.3.5-.2.8 0zm1-4c.3 0 .5.3.5.6v1.6c0 .3-.2.6-.5.6s-.5-.3-.5-.6v-1.6c0-.3.2-.6.5-.6zM13.1 14c1.4 0 2.6.7 3.7 1.9.2.2.2.5 0 .7-.2.2-.5.2-.6 0-.6-.7-1.3-1.2-2-1.4.3.3.5.7.5 1.2 0 .9-.8 1.6-1.7 1.6-.9 0-1.7-.7-1.7-1.6 0-.4.1-.8.4-1-.2.1-.3.2-.5.4l-.1.1-.3.3c-.2.2-.4.4-.6.5-.6.4-1.3.4-2 .2-.2-.1-.4-.4-.3-.6.1-.3.3-.4.6-.3.5 0 1-.1 1.4-.3.1-.1.2-.1.3-.3l.1-.1.3-.3c.7-.7 1.4-1 2.5-1zm13.8 0c1.1 0 1.8.3 2.5 1l.3.3.1.1.3.3c.4.2.9.3 1.3.1.2-.1.5.1.6.3.1.3 0 .5-.3.6-.7.3-1.4.2-2-.2-.2-.1-.4-.3-.6-.5-.1 0-.3-.3-.3-.3l-.1-.1c-.2-.1-.3-.3-.5-.4.2.3.4.6.4 1 0 .9-.8 1.6-1.7 1.6-.9 0-1.7-.7-1.7-1.6 0-.5.2-.9.5-1.2-.7.2-1.4.7-2 1.4-.2.2-.5.2-.6 0-.2-.2-.2-.5 0-.7 1.1-1 2.4-1.7 3.8-1.7zm-6.9.4c.3 0 .5.3.5.6v1.6c0 .3-.2.6-.5.6s-.5-.3-.5-.6V15c0-.3.2-.6.5-.6zM31 0c4 2.5 7.2 6.4 9 11v5C38.2 9 34.2 3.5 28.8.7c-.3-.2-.6-.4-.8-.7h3zM20 9.6c.3 0 .5.3.5.6v1.6c0 .3-.2.6-.5.6s-.5-.3-.5-.6v-1.6c0-.3.2-.6.5-.6zM12 0C8.4 3.5 4.4 6.5 0 9v-.4-1.3C3.4 5.1 6.6 2.6 9.7 0H12zm8 0c.3 0 .5.3.5.6v1.6c0 .3-.2.6-.5.6s-.5-.3-.5-.6V.6c0-.3.2-.6.5-.6z"
337              fill="#fff" />
338        <path opacity=".5" fill="#004532" d="M20 0h20v40H20z" />
339    </symbol>
340    <symbol viewBox="0 0 30 25" id="picto-camera" xmlns="http://www.w3.org/2000/svg">
341        <path d="M15.15 2a1.62 1.62 0 011.281.64l2.021 2.619h4.045c1.377 0 2.5 1.148 2.503 2.56v12.446c0 1.416-1.123 2.568-2.503 2.568H2.503C1.123 22.833 0 21.681 0 20.265V7.822c0-1.416 1.123-2.568 2.503-2.568h4.046l2.026-2.616c.306-.399.77-.633 1.271-.638zM12.5 8a6 6 0 100 12 6 6 0 000-12zm0 2a4 4 0 110 8 4 4 0 010-8z" fill-rule="evenodd" />
342    </symbol>
343    <symbol viewBox="0 0 15 20" id="picto-upload" xmlns="http://www.w3.org/2000/svg">
344        <path d="M15 14v1.2H0V14h15zM7.497 2L12.3 7.486H8.869v5.485h-2.74V7.486H2.7L7.497 2z" fill-rule="evenodd" />
345    </symbol>
346    <symbol fill="none" viewBox="0 0 25 25" id="warning-icon" xmlns="http://www.w3.org/2000/svg">
347        <path d="M12.5 25C19.404 25 25 19.404 25 12.5S19.404 0 12.5 0 0 5.596 0 12.5 5.596 25 12.5 25z" fill="#DF733D"/>
348        <path d="M11.92 14.192h1.344l.752-7.072V6.8h-2.848v.32l.752 7.072zM11.296 18h2.592v-2.56h-2.592V18z" fill="#fff"/>
349    </symbol>
350    <symbol fill="none" viewBox="0 0 18 16" id="filters" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M5 0c1.306 0 2.417.835 2.83 2H18v2H7.83a3.001 3.001 0 01-5.66 0H0V2h2.17A3.001 3.001 0 015 0zm0 4a1 1 0 100-2 1 1 0 000 2zm8 12a3.001 3.001 0 01-2.83-2H0v-2h10.17a3.001 3.001 0 015.66 0H18v2h-2.17A3.001 3.001 0 0113 16zm0-4a1 1 0 100 2 1 1 0 000-2z" fill="#21362C"/></symbol>
351
352    <symbol fill="none" viewBox="0 0 24 24" id="info-revamp" xmlns="http://www.w3.org/2000/svg"><path d="M11.063 6.668h1.88v1.87h-1.88v-1.87zm0 3.56h1.78v7.44h-1.73l-.05-7.44z" fill="#000"/><path fill-rule="evenodd" clip-rule="evenodd" d="M11.063 10.228l.05 7.44h1.73v-7.44h-1.78zm0-3.56v1.87h1.88v-1.87h-1.88z" fill="#21362C"/><path fill-rule="evenodd" clip-rule="evenodd" d="M12 1.668c-5.799 0-10.5 4.701-10.5 10.5s4.701 10.5 10.5 10.5 10.5-4.701 10.5-10.5-4.701-10.5-10.5-10.5zM.5 12.168C.5 5.817 5.649.668 12 .668s11.5 5.149 11.5 11.5-5.149 11.5-11.5 11.5S.5 18.519.5 12.168z" fill="#21362C"/></symbol>
353    <symbol fill="none" viewBox="0 0 16 17" id="arrow-right-breadcrumb" xmlns="http://www.w3.org/2000/svg"><path d="M5.53 13.166l5-5-5-5" stroke="#21362C"/></symbol>
354
355</svg>
356
357<svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 22 22" fill="none" id="newchat">
358  <path d="M6 16.135H7V15.5324L6.46733 15.2509L6 16.135ZM6 20H5V21H6V20ZM6.58333 20V21H6.97803L7.26633 20.7304L6.58333 20ZM9.79167 17V16H9.39697L9.10867 16.2696L9.79167 17ZM3 9.5C3 5.91015 5.91015 3 9.5 3V1C4.80558 1 1 4.80558 1 9.5H3ZM6.46733 15.2509C4.40308 14.1597 3 11.9929 3 9.5H1C1 12.7632 2.83911 15.5952 5.53267 17.019L6.46733 15.2509ZM5 16.135V20H7V16.135H5ZM6 21H6.58333V19H6V21ZM7.26633 20.7304L10.4747 17.7304L9.10867 16.2696L5.90034 19.2696L7.26633 20.7304ZM12.5 16H9.79167V18H12.5V16ZM19 9.5C19 13.0899 16.0899 16 12.5 16V18C17.1944 18 21 14.1944 21 9.5H19ZM12.5 3C16.0899 3 19 5.91015 19 9.5H21C21 4.80558 17.1944 1 12.5 1V3ZM9.5 3H12.5V1H9.5V3Z" fill="white"/>
359</svg>
360<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" id="newsearch">
361  <circle cx="10.875" cy="10.875" r="7.875" stroke="white" stroke-width="2"/>
362  <path d="M16.5 16.5L21 21" stroke="white" stroke-width="2" stroke-linejoin="round"/>
363</svg>
364<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20" viewBox="0 0 20 20" fill="none" id="newaccount">
365  <g clip-path="url(#clip0_77070_5919)">
366    <path d="M10 11C12.7614 11 15 8.76142 15 6C15 3.23858 12.7614 1 10 1C7.23858 1 5 3.23858 5 6C5 8.76142 7.23858 11 10 11Z" stroke="white" stroke-width="2" stroke-miterlimit="10"/>
367    <rect x="2" y="14" width="15.9973" height="22" rx="4" stroke="white" stroke-width="2"/>
368  </g>
369  <defs>
370    <clipPath id="clip0_77070_5919">
371      <rect width="20" height="20" fill="white"/>
372    </clipPath>
373  </defs>
374</svg>
375
376<svg width="30px" height="30px" viewBox="0 0 30 30" version="1.1" id="downarrow" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
377    <g stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
378        <g id="27-New-Atoms-down" transform="translate(-50.000000, -234.000000)">
379            <g id="New-Arrow/Down" transform="translate(50.000000, 234.000000)">
380                <rect id="frame-30-down" x="0" y="0" width="30" height="30"></rect>
381                <path d="M9.66893667,24.6083133 C10.1911855,25.1305622 11.033
3811786,25.1305622 11.5554275,24.6083133 L20.4123419,15.7513989 C20.8280094,15.3357314 20.8280094,14.6642686 20.4123419,14.2486011 L11.5554275,5.39168665 C11.0331786,4.86943778 10.1911855,4.86943778 9.66893667,5.39168665 C9.1466878,5.91393552 9.1466878,6.75592859 9.66893667,7.27817746 L17.3854301,15.0053291 L9.65827853,22.7324807 C9.1466878,23.2440714 9.1466878,24.0967226 9.66893667,24.6083133 Z"  class="svg-mobile-res" id="🔹-Icon-Color-Down" fill="#005c43" transform="translate(15.000000, 15.000000) rotate(-270.000000) translate(-15.000000, -15.000000) "></path>
382            </g>
383        </g>
384    </g>
385</svg>
386<svg class="icon" aria-hidden="true" width="30px" height="30px" viewBox="0 0 30 30" version="1.1" id="NewArrowleft"  xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
387    <g id="Find-Your-Match" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
388        <g id="27-New-Atoms-left" transform="translate(-170.000000, -234.000000)">
389            <g id="New-Arrow/left" transform="translate(170.000000, 234.000000)">
390                <rect id="frame-30-left" x="0" y="0" width="30" height="30"></rect>
391                <path d="M9.66893667,24.6083133 C10.1911855,25.1305622 11.0331786,25.1305622 11.5554275,24.6083133 L20.4123419,15.7513989 C20.8280094,15.3357314 20.8280094,14.6642686 20.4123419,14.2486011 L11.5554275,5.39168665 C11.0331786,4.86943778 10.1911855,4.86943778 9.66893667,5.39168665 C9.1466878,5.91393552 9.1466878,6.75592859 9.66893667,7.27817746 L17.3854301,15.0053291 L9.65827853,22.7324807 C9.1466878,23.2440714 9.1466878,24.0967226 9.66893667,24.6083133 Z" id="🔹-Icon-Color-Left"
392                fill="#005c43" transform="translate(15.000000, 15.000000) scale(-1, 1) translate(-15.000000, -15.000000) "></path>
393            </g>
394        </g>
395    </g>
396</svg>
397
398
399<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="new-arrowdown">
400<path d="M20 8L12 16L4 8" stroke="black" stroke-width="2"/>
401</svg>
402<svg width="16" height="16" viewBox="0 0 16 16" id="new-chat-with-dots" fill="none" xmlns="http://www.w3.org/2000/svg">
403<path d="M3.66667 11.4233H4.16667V11.122L3.90033 10.9813L3.66667 11.4233ZM3.66667 14H3.16667V14.5H3.66667V14ZM4.05555 14V14.5H4.2529L4.39705 14.3652L4.05555 14ZM6.19443 12V11.5H5.99708L5.85293 11.6348L6.19443 12ZM1.5 7C1.5 4.51472 3.51472 2.5 6 2.5V1.5C2.96243 1.5 0.5 3.96243 0.5 7H1.5ZM3.90033 10.9813C2.47172 10.2261 1.5 8.72613 1.5 7H0.5C0.5 9.11126 1.68974 10.9439 3.433 11.8653L3.90033 10.9813ZM3.16667 11.4233V14H4.16667V11.4233H3.16667ZM3.66667 14.5H4.05555V13.5H3.66667V14.5ZM4.39705 14.3652L6.53593 12.3652L5.85293 11.6348L3.71406 13.6348L4.39705 14.3652ZM9 11.5H6.19443V12.5H9V11.5ZM13.5 7C13.5 9.48528 11.4853 11.5 9 11.5V12.5C12.0376 12.5 14.5 10.0376 14.5 7H13.5ZM9 2.5C11.4853 2.5 13.5 4.51472 13.5 7H14.5C14.5 3.96243 12.0376 1.5 9 1.5V2.5ZM6 2.5H9V1.5H6V2.5Z" fill="#21362C"/>
404<rect x="5" y="7" width="1" height="1" fill="#21362C"/>
405<rect x="7" y="7" width="1" height="1" fill="#21362C"/>
406<rect x="9" y="7" width="1" height="1" fill="#21362C"/>
407</svg>
408<svg width="16" height="16" viewBox="0 0 16 16" fill="none" id="new-search-arrow-next" xmlns="http://www.w3.org/2000/svg">
409  <path d="M5.5293 13L10.5293 8L5.5293 3" stroke-width="2"/>
410  </svg>
411<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="new-arrowup">
412    <path d="M20 16L12 8L4 16" stroke="#21362C" stroke-width="2"/>
413</svg>
414<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="pin">
415    <path d="M19 10.3636C19 16.0909 12 21 12 21C12 21 5 16.0909 5 10.3636C5 8.41068 5.7375 6.53771 7.05025 5.15676C8.36301 3.77581 10.1435 3 12 3C13.8565 3 15.637 3.77581 16.9497 5.15676C18.2625 6.53771 19 8.41068 19 10.3636Z" stroke="#21362C" stroke-width="2" stroke-linecap="round" stroke-linejoin="bevel" />
416    <path d="M12 12C13.1046 12 14 11.1046 14 10C14 8.89543 13.1046 8 12 8C10.8954 8 10 8.89543 10 10C10 11.1046 10.8954 12 12 12Z" stroke="#21362C" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
417</svg>
418<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="goback-arrow">
419  <path d="M15 6L9 12L15 18" stroke="#156031" stroke-width="2"/>
420</svg>
421
422<svg
423          width="56"
424          height="56"
425          viewBox="0 0 56 56"
426          fill="none"
427          xmlns="http://www.w3.org/2000/svg" id="qrplayicon">
428              <path
429                d="M52 28C52 41.2491 41.2602 52 28 52C14.7398 52 4 41.2491 4 28C4 14.7509 14.7398 4 28 4C41.2602 4 52 14.7398 52 28ZM24.5762 19.8476V36.1524L36.71 28L24.5762 19.8476Z"
430                fill="white"
431              />
432          <defs>
433            <filter
434              id="filter0_d_78516_480"
435              x="0"
436              y="0"
437              width="56"
438              height="56"
439              filterUnits="userSpaceOnUse"
440              color-interpolation-filters="sRGB"
441            >
442              <feFlood flood-opacity="0" result="BackgroundImageFix" />
443              <feColorMatrix
444                in="SourceAlpha"
445                type="matrix"
446                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 127 0"
447                result="hardAlpha"
448              />
449              <feOffset />
450              <feGaussianBlur stdDeviation="2" />
451              <feComposite in2="hardAlpha" operator="out" />
452              <feColorMatrix
453                type="matrix"
454                values="0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0 0.2 0"
455              />
456              <feBlend
457                mode="normal"
458                in2="BackgroundImageFix"
459                result="effect1_dropShadow_78516_480"
460              />
461              <feBlend
462                mode="normal"
463                in="SourceGraphic"
464                in2="effect1_dropShadow_78516_480"
465                result="shape"
466              />
467            </filter>
468            <clipPath id="clip0_78516_480">
469              <rect width="56" height="56" fill="white" />
470            </clipPath>
471          </defs>
472        </svg>
473<svg width="10" height="11" viewBox="0 0 10 11" xmlns="http://www.w3.org/2000/svg" id="qrstar">
474  <path d="M2.11211 9.64399C2.05753 9.82077 2.12342 10.0125 2.27512 10.1185C2.42682 10.2244 2.62956 10.2201 2.77669 10.1079L5.00284 8.4109L7.22434 10.1077C7.37139 10.22 7.57416 10.2244 7.72597 10.1186C7.87777 10.0128 7.9438 9.82105 7.88931 9.64422L7.03064 6.85764L9.27281 5.1465C9.4179 5.03578 9.47622 4.84487 9.41778 4.67197C9.35934 4.49907 9.19715 4.38268 9.01465 4.38268H6.26488L5.40966 1.61556C5.35455 1.43725 5.18968 1.31565 5.00305 1.31567C4.81642 1.31569 4.65158 1.43732 4.59651 1.61565L3.74198 4.38268H0.986328C0.803785 4.38268 0.641577 4.49911 0.583165 4.67205C0.524753 4.845 0.583151 5.03593 0.728312 5.14661L2.97239 6.85767L2.11211 9.64399Z" stroke-width="0.851075" stroke-linejoin="round"/>
475</svg>
476
477
478<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" id="searchicon">
479    <circle cx="10.875" cy="10.875" r="7.875" stroke="#21362C" stroke-width="2" />
480    <path d="M16.5 16.5L21 21" stroke="#21362C" stroke-width="2" stroke-linejoin="round" />
481</svg>
482
483
484<svg id="closeicon"
485          width=" 24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
486    <path d="M19 5L5 19" stroke="#21362C" stroke-width="2" stroke-linejoin="round" />
487    <path d="M5 5L19 19" stroke="#21362C" stroke-width="2" stroke-linejoin="round" />
488</svg>
489</div>
490    
491    <!-- Google Tag Manager (noscript) -->
492    <noscript>
493    <iframe src="https://www.googletagmanager.com/ns.html?id=GTM-WQB4X5"
494            height="0" width="0" title="Tag manager" style="display:none;visibility:hidden"></iframe>
495    </noscript>
496    <!-- End Google Tag Manager (noscript) -->
497
498    <!-- #wrapper -->
499    <div id="wrapper">
500        <div id="main-container" key="main_container_key">
501            <!-- #header -->
502            <div id="header" class="main clearfix">
503
504
505
506<div data-qr-page-section="hide-on-qr">
507    <ul id="jump-to-content" prefix="jump-to-content" tabindex="-1" slot="skiplinks" class="jump-to-content">
508    <li><a href="#sidebar-toggle" rel="nofollow">Retour Menu</a></li>
509    <li><a href="#content" rel="nofollow">Allez au contenu</a></li>
510    <li><a href="#footer" rel="nofollow">Bas de page</a></li>
511</ul>
512
513    <header v-cloak id="new-main__header" class="new-header" role="banner">
514        <newheadernavigation :new-header="true">
515            
516
517
518            <div v-cloak slot="navbar" slot-scope="props" class="navbar navbar-default nav-center navbar-fixed-top">
519                <input type="checkbox" name="nav-toggle" id="nav-toggle" tabindex="-1" aria-hidden="true">
520                <label for="nav-toggle">Toggle nav</label>
521                <span id="wordbreak"></span>
522                <div class="site-header__wrapper">
523                    
524<newhamburger title="Menu"
525              aria-label-close-text="menu button collapsed"
526              aria-label-expanded-text="menu button expanded">
527</newhamburger>
528
529                    <input type="hidden" id="hdnFlag" value="True" />
530
531
532    <nav id="fourLevelMenuNavi" class="four-level-menu__container hidefourLevelMenu closedMenu" aria-hidden="true" tabindex="-1" inert>
533        <four-level-hamburger-menu>
534            <template slot="fourlevelmenu" slot-scope="props">
535                <ul>
536
537    <li class="levelOneMenu" :class="[0 === props.slotProps.clickActiveLevelOne ? 'isActiveLevelone':'']">
538        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelOne(0)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;soins visage::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;soins visage&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins visage&quot;,&quot;step&quot;:&quot;1/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
539            <span class="list_title">
540                SOINS VISAGE
541            </span>
542            
543
544
545<div class="arrowContainer">
546    <span class="menu-rig-arrow">
547        <div class="svg-container">
548            <svg width="24" height="24"
549                 viewBox="0 0 24 24" fill="none"
550                 xmlns="http://www.w3.org/2000/svg">
551                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
552                      stroke="#000" stroke-width="1.6"
553                      stroke-linecap="square"></path>
554            </svg>
555        </div>
556    </span>
557    <span class="menu-opened-arrow">
558        <div class="svg-container">
559            <svg width="24" height="24"
560                 viewBox="0 0 24 24" fill="none"
561                 xmlns="http://www.w3.org/2000/svg">
562                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
563                      stroke="#000" stroke-width="2"
564                      stroke-linecap="square"></path>
565            </svg>
566        </div>
567    </span>
568</div>
569
570        </button>
571
572        <div class="level-two__wrapper" id="level-two__wrapper_0">
573            <div class="level-two__topper">
574                <button class="level-two__topper-back" tabindex="0" aria-label="Back to main menu" v-on:click="props.slotProps.backtoLOneMenu()" v-on:keydown.enter="props.slotProps.backtoLOneMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLOneMenu()">
575                    <div class="svg-container">
576                        <svg width="24" height="24" viewBox="0 0 24 24"
577                             fill="none" xmlns="http://www.w3.org/2000/svg">
578                            <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
579                                  stroke="#000" stroke-width="1.6"
580                                  stroke-linecap="square" />
581                        </svg>
582                    </div>
583                </button>
584                <div class="level-two__topper_title">
585                    SOINS VISAGE
586                </div>
587            </div>
588            <div class="level-two__wrapper-scrollable">
589                <div class="level-two-menu">
590                        <ul>
591
592    <li class="levelTwoMenu" :class="[0 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
593        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(0)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;type de produit::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;type de produit&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
594            <!-- conditional for new badge -->
595            <span class="list_title">
596                TYPE DE PRODUIT
597            </span>
598
599
600
601
602
603<div class="arrowContainer">
604    <span class="menu-rig-arrow">
605        <div class="svg-container">
606            <svg width="24" height="24"
607                 viewBox="0 0 24 24" fill="none"
608                 xmlns="http://www.w3.org/2000/svg">
609                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
610                      stroke="#000" stroke-width="1.6"
611                      stroke-linecap="square"></path>
612            </svg>
613        </div>
614    </span>
615    <span class="menu-opened-arrow">
616        <div class="svg-container">
617            <svg width="24" height="24"
618                 viewBox="0 0 24 24" fill="none"
619                 xmlns="http://www.w3.org/2000/svg">
620                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
621                      stroke="#000" stroke-width="2"
622                      stroke-linecap="square"></path>
623            </svg>
624        </div>
625    </span>
626</div>
627
628        </button>
629
630            <div class="level-three__wrapper" id="level-three__wrapper_0">
631                <div class="level-three__topper">
632                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
633                        <div class="svg-container">
634                            <svg width="24" height="24"
635                                 viewBox="0 0 24 24" fill="none"
636                                 xmlns="http://www.w3.org/2000/svg">
637                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
638                                      stroke="#000" stroke-width="1.6"
639                                      stroke-linecap="square" />
640                            </svg>
641                        </div>
642                    </button>
643                    <div class="level-two__topper_title">
644                        TYPE DE PRODUIT
645                    </div>
646                </div>
647
648                    <div class="level-three-image_container-xs">
649                        <picture>
650                        <source media="(max-width:767px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/vitamin-c-nav.png?rev=-1&amp;cx=0&amp;cy=0&amp;cw=414&amp;ch=208&amp;hash=A8F6D538F10CF43A761AEBBE0D6D159C" />
651                        <source media="(max-width:1023px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/vitamin-c-nav.png?rev=-1&amp;cx=0&amp;cy=0&amp;cw=800&amp;ch=308&amp;hash=894EB7CDEC3697D3AE4DF56E01343754" />
652                        <img class="level-image_wrapper lazyload" data-src="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/vitamin-c-nav.png?rev=-1&amp;cx=0&amp;cy=0&amp;cw=360&amp;ch=600&amp;hash=2C970F2C316CF8346AA71FD2DA302BC5" alt="" />
653                        <a href="https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet" target=""
654                               class="level-image_wrapper-link menu-tag" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nouveau! sorbet vitamin c::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nouveau! sorbet vitamin c&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
655                            </a>
656                        </picture>
657                            <a class="levelFourLink menu-tag" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;event_detail&quot;:&quot;image&quot;}"
658                               href="https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet"
659                               target="" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nouveau! sorbet vitamin c::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nouveau! sorbet vitamin c&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
660                                <span class="ctaLinkText">
661                                    Nouveau! Sorbet Vitamin C
662                                </span>
663                            </a>
664                    </div>
665
666                <div class="level-three__wrapper_scrollerable">
667                        <ul>
668
669    <li class="levethreeList">
670                <div class="mainSub__link levelFourMainMenu ">
671                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/demaquillant"
672                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::solution micellaire&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::solution micellaire&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;solution micellaire::https://www.garnier.fr/tous-les-produits-soin-du-visage/demaquillant&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;solution micellaire&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/demaquillant&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::solution micellaire&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
673                        Solution Micellaire
674                    </a>
675                </div>
676    </li>
677
678    <li class="levethreeList">
679                <div class="mainSub__link levelFourMainMenu ">
680                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/nettoyant-visage"
681                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::gel nettoyant visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::gel nettoyant visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;gel nettoyant visage::https://www.garnier.fr/tous-les-produits-soin-du-visage/nettoyant-visage&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;gel nettoyant visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/nettoyant-visage&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::gel nettoyant visage&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
682                        Gel Nettoyant Visage
683                    </a>
684                </div>
685    </li>
686
687    <li class="levethreeList">
688                <div class="mainSub__link levelFourMainMenu ">
689                    <a href="https://www.garnier.fr/search-page/search?query=serum"
690                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::s&#233;rum visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::s&#233;rum visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;s&#233;rum visage::https://www.garnier.fr/search-page/search?query=serum&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;s&#233;rum visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/search-page/search?query=serum&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::s&#233;rum visage&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
691                        S&#233;rum Visage
692                    </a>
693                </div>
694    </li>
695
696    <li class="levethreeList">
697                <div class="mainSub__link levelFourMainMenu ">
698                    <a href="https://www.garnier.fr/tous-les-produits-solaire/protection-visage"
699                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::protection solaire visage spf&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::protection solaire visage spf&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;protection solaire visage spf::https://www.garnier.fr/tous-les-produits-solaire/protection-visage&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;protection solaire visage spf&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/protection-visage&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::protection solaire visage spf&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
700                        Protection Solaire Visage SPF
701                    </a>
702                </div>
703    </li>
704
705    <li class="levethreeList">
706                <div class="mainSub__link levelFourMainMenu ">
707                    <a href="https://www.garnier.fr/search-page/search?query=pimple+patch"
708                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::pimples patchs&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::pimples patchs&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;pimples patchs::https://www.garnier.fr/search-page/search?query=pimple+patch&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;pimples patchs&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/search-page/search?query=pimple+patch&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::pimples patchs&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
709                        Pimples Patchs
710                    </a>
711                </div>
712    </li>
713
714    <li class="levethreeList">
715                <div class="mainSub__link levelFourMainMenu ">
716                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/masques"
717                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::masques visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::masques visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;masques visage::https://www.garnier.fr/tous-les-produits-soin-du-visage/masques&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;masques visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/masques&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::masques visage&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
718                        Masques Visage
719                    </a>
720                </div>
721    </li>
722
723    <li class="levethreeList">
724                <div class="mainSub__link levelFourMainMenu ">
725                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/soins-hydratants-visage"
726                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::cr&#232;me&amp;lotion hydratante visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::cr&#232;me&amp;lotion hydratante visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;cr&#232;me&amp;lotion hydratante visage::https://www.garnier.fr/tous-les-produits-soin-du-visage/soins-hydratants-visage&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;cr&#232;me&amp;lotion hydratante visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/soins-hydratants-visage&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::cr&#232;me&amp;lotion hydratante visage&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
727                        Cr&#232;me&amp;Lotion Hydratante Visage
728                    </a>
729                </div>
730    </li>
731
732    <li class="levethreeList">
733                <div class="mainSub__link levelFourMainMenu ">
734                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/soins-booster-d-eclat"
735                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::soins booster d&#39;&#233;clat&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::soins booster d&#39;&#233;clat&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;soins booster d&#39;&#233;clat::https://www.garnier.fr/tous-les-produits-soin-du-visage/soins-booster-d-eclat&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;soins booster d&#39;&#233;clat&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/soins-booster-d-eclat&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::soins booster d&#39;&#233;clat&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
736                        Soins Booster d&#39;&#201;clat
737                    </a>
738                </div>
739    </li>
740
741    <li class="levethreeList">
742                <div class="mainSub__link levelFourMainMenu ">
743                    <a href="https://www.garnier.fr/search-page/search?query=yeux"
744                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;
744soins visage::type de produit::soin des yeux&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::soin des yeux&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;soin des yeux::https://www.garnier.fr/search-page/search?query=yeux&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;soin des yeux&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/search-page/search?query=yeux&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::soin des yeux&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
745                        Soin des yeux
746                    </a>
747                </div>
748    </li>
749                        </ul>
750
751
752                </div>
753
754
755                    <div class="level-four__wrapper">
756                        <div class="level-four-image_container">
757                            <picture class="level-four-image_container--img">
758                            <source media="(max-width:767px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/vitamin-c-nav.png?rev=-1&amp;cx=0&amp;cy=0&amp;cw=414&amp;ch=208&amp;hash=A8F6D538F10CF43A761AEBBE0D6D159C" />
759                            <source media="(max-width:1023px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/vitamin-c-nav.png?rev=-1&amp;cx=0&amp;cy=0&amp;cw=800&amp;ch=308&amp;hash=894EB7CDEC3697D3AE4DF56E01343754" />
760                            <img class="level-image_wrapper lazyload" data-src="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/vitamin-c-nav.png?rev=-1&amp;cx=0&amp;cy=0&amp;cw=360&amp;ch=600&amp;hash=2C970F2C316CF8346AA71FD2DA302BC5" alt="" />
761                            <a href="https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet" target=""
762                               class="level-image_wrapper-link menu-tag" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nouveau! sorbet vitamin c::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nouveau! sorbet vitamin c&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
763                            </a>
764                            </picture>
765                                <a class="levelFourLink menu-tag" style="--ctaTextColor : #000000;"
766                                   href="https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet"
767                                   target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nouveau! sorbet vitamin c::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nouveau! sorbet vitamin c&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de produit::nouveau! sorbet vitamin c&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
768                                    <span class="ctaLinkText">
769                                        Nouveau! Sorbet Vitamin C
770                                    </span>
771                                </a>
772                        </div>
773                    </div>
774            </div>
775    </li>
776
777    <li class="levelTwoMenu" :class="[1 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
778        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(1)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nos gammes::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nos gammes&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
779            <!-- conditional for new badge -->
780            <span class="list_title">
781                NOS GAMMES
782            </span>
783
784
785
786
787
788<div class="arrowContainer">
789    <span class="menu-rig-arrow">
790        <div class="svg-container">
791            <svg width="24" height="24"
792                 viewBox="0 0 24 24" fill="none"
793                 xmlns="http://www.w3.org/2000/svg">
794                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
795                      stroke="#000" stroke-width="1.6"
796                      stroke-linecap="square"></path>
797            </svg>
798        </div>
799    </span>
800    <span class="menu-opened-arrow">
801        <div class="svg-container">
802            <svg width="24" height="24"
803                 viewBox="0 0 24 24" fill="none"
804                 xmlns="http://www.w3.org/2000/svg">
805                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
806                      stroke="#000" stroke-width="2"
807                      stroke-linecap="square"></path>
808            </svg>
809        </div>
810    </span>
811</div>
812
813        </button>
814
815            <div class="level-three__wrapper" id="level-three__wrapper_1">
816                <div class="level-three__topper">
817                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
818                        <div class="svg-container">
819                            <svg width="24" height="24"
820                                 viewBox="0 0 24 24" fill="none"
821                                 xmlns="http://www.w3.org/2000/svg">
822                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
823                                      stroke="#000" stroke-width="1.6"
824                                      stroke-linecap="square" />
825                            </svg>
826                        </div>
827                    </button>
828                    <div class="level-two__topper_title">
829                        NOS GAMMES
830                    </div>
831                </div>
832
833
834                <div class="level-three__wrapper_scrollerable">
835                        <ul>
836
837    <li class="levethreeList">
838                <div class="mainSub__link levelFourMainMenu ">
839                    <a href="https://www.garnier.fr/nos-marques/soin-du-visage/micellaire"
840                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::nettoyer &amp; d&#233;maquiller&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::nettoyer &amp; d&#233;maquiller&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nettoyer &amp; d&#233;maquiller::https://www.garnier.fr/nos-marques/soin-du-visage/micellaire&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nettoyer &amp; d&#233;maquiller&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/micellaire&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::nettoyer &amp; d&#233;maquiller&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
841                        Nettoyer &amp; D&#233;maquiller
842                    </a>
843                </div>
844    </li>
845
846    <li class="levethreeList">
847                <div class="mainSub__link levelFourMainMenu ">
848                    <a href="https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c"
849                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::vitamine c : booste l&#39;&#233;clat&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::vitamine c : booste l&#39;&#233;clat&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;vitamine c : booste l&#39;&#233;clat::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;vitamine c : booste l&#39;&#233;clat&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::vitamine c : booste l&#39;&#233;clat&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
850                        Vitamine C : Booste l&#39;&#233;clat
851                    </a>
852                </div>
853    </li>
854
855    <li class="levethreeList">
856                <div class="mainSub__link levelFourMainMenu ">
857                    <a href="https://www.garnier.fr/nos-marques/soin-du-visage/pure-active"
858                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::salicylique: anti-imperfection&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::salicylique: anti-imperfection&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;salicylique: anti-imperfection::https://www.garnier.fr/nos-marques/soin-du-visage/pure-active&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;salicylique: anti-imperfection&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/pure-active&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::salicylique: anti-imperfection&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
859                        Salicylique: Anti-Imperfection
860                    </a>
861                </div>
862    </li>
863
864    <li class="levethreeList">
865                <div class="mainSub__link levelFourMainMenu ">
866                    <a href="https://www.garnier.fr/search-page/search?query=hyaluron"
867                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::hyaluron : hydrate &amp; repulpe&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::hyaluron : hydrate &amp; repulpe&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;hyaluron : hydrate &amp; repulpe::https://www.garnier.fr/search-page/search?query=hyaluron&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;hyaluron : hydrate &amp; repulpe&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/search-page/search?query=hyaluron&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::hyaluron : hydrate &amp; repulpe&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
868                        Hyaluron : Hydrate &amp; Repulpe
869                    </a>
870                </div>
871    </li>
872
873    <li class="levethreeList">
874                <div class="mainSub__link levelFourMainMenu ">
875                    <a href="https://www.garnier.fr/nos-marques/soin-du-visage/pure-active"
876                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::charbon : anti-points noirs&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::charbon : anti-points noirs&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;charbon : anti-points noirs::https://www.garnier.fr/nos-marques/soin-du-visage/pure-active&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;charbon : anti-points noirs&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/pure-active&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::charbon : anti-points noirs&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
877                        Charbon : Anti-Points Noirs
878                    </a>
879                </div>
880    </li>
881
882    <li class="levethreeList">
883                <div class="mainSub__link levelFourMainMenu ">
884                    <a href="https://www.garnier.fr/nos-marques/soin-du-visage/skinactive"
885                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::masques tissus&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::masques tissus&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;masques tissus::https://www.garnier.fr/nos-marques/soin-du-visage/skinactive&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;masques tissus&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/skinactive&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::masques tissus&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
886                        Masques tissus
887                    </a>
888                </div>
889    </li>
890
891    <li class="levethreeList">
892                <div class="mainSub__link levelFourMainMenu ">
893                    <a href="https://www.garnier.fr/nos-marques/soin-du-visage/bb-creme"
894                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::nos gammes::bb cr&#232;mes&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::nos gammes::bb cr&#232;mes&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;bb cr&#232;mes::https://www.garnier.fr/nos-marques/soin-du-visage/bb-creme&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;bb cr&#232;mes&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/bb-creme&quot;,&quot;breadCrumb&quot;:&quot;soins visage::nos gammes::bb cr&#232;mes&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
895                        BB cr&#232;mes
896                    </a>
897                </div>
898    </li>
899                        </ul>
900
901
902                </div>
903
904
905            </div>
906    </li>
907
908    <li class="levelTwoMenu" :class="[2 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
909        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(2)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;type de peau::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;type de peau&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
910            <!-- conditional for new badge -->
911            <span class="list_title">
912                TYPE DE PEAU
913            </span>
914
915
916
917
918
919<div class="arrowContainer">
920    <span class="menu-rig-arrow">
921        <div class="svg-container">
922            <svg width="24" height="24"
923                 viewBox="0 0 24 24" fill="none"
924                 xmlns="http://www.w3.org/2000/svg">
925                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
926                      stroke="#000" stroke-width="1.6"
927                      stroke-linecap="square"></path>
928            </svg>
929        </div>
930    </span>
931    <span class="menu-opened-arrow">
932        <div class="svg-container">
933            <svg width="24" height="24"
934                 viewBox="0 0 24 24" fill="none"
935                 xmlns="http://www.w3.org/2000/svg">
936                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
937                      stroke="#000" stroke-width="2"
938                      stroke-linecap="square"></path>
939            </svg>
940        </div>
941    </span>
942</div>
943
944        </button>
945
946            <div class="level-three__wrapper" id="level-three__wrapper_2">
947                <div class="level-three__topper">
948                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
949                        <div class="svg-container">
950                            <svg width="24" height="24"
951                                 viewBox="0 0 24 24" fill="none"
952                                 xmlns="http://www.w3.org/2000/svg">
953                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
954                                      stroke="#000" stroke-width="1.6"
955                                      stroke-linecap="square" />
956                            </svg>
957                        </div>
958                    </button>
959                    <div class="level-two__topper_title">
960                        TYPE DE PEAU
961                    </div>
962                </div>
963
964
965                <div class="level-three__wrapper_scrollerable">
966                        <ul>
967
968    <li class="levethreeList">
969                <div class="mainSub__link levelFourMainMenu ">
970                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-normales"
971                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de peau::peaux normales&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de peau::peaux normales&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;peaux normales::https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-normales&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;peaux normales&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-normales&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau::peaux normales&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
972                        Peaux Normales
973                    </a>
974                </div>
975    </li>
976
977    <li class="levethreeList">
978                <div class="mainSub__link levelFourMainMenu ">
979                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-sensibles"
980                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de peau::peaux sensibles&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de peau::peaux sensibles&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;peaux sensibles::https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-sensibles&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;peaux sensibles&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-sensibles&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau::peaux sensibles&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
981                        Peaux Sensibles
982                    </a>
983                </div>
984    </li>
985
986    <li class="levethreeList">
987                <div class="mainSub__link levelFourMainMenu ">
988                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-seches"
989                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de peau::peaux s&#232;ches&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de peau::peaux s&#232;ches&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;peaux s&#232;ches::https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-seches&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;peaux s&#232;ches&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-seches&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau::peaux s&#232;ches&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
990                        Peaux S&#232;ches
991                    </a>
992                </div>
993    </li>
994
995    <li class="levethreeList">
996                <div class="mainSub__link levelFourMainMenu ">
997                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-grasses"
998                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de peau::peaux grasses&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de peau::peaux grasses&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;peaux grasses::https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-grasses&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;peaux grasses&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-grasses&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau::peaux grasses&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
999                        Peaux Grasses
1000                    </a>
1001                </div>
1002    </li>
1003
1004    <li class="levethreeList">
1005                <div class="mainSub__link levelFourMainMenu ">
1006                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-mixtes"
1007                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de peau::peaux mixtes&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de peau::peaux mixtes&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;peaux mixtes::https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-mixtes&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;peaux mixtes&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/peaux-mixtes&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau::peaux mixtes&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1008                        Peaux Mixtes
1009                    </a>
1010                </div>
1011    </li>
1012
1013    <li class="levethreeList">
1014                <div class="mainSub__link levelFourMainMenu ">
1015                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-visage/peau-terne"
1016                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::type de peau::peau terne&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::type de peau::peau terne&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;peau terne::https://www.garnier.fr/tous-les-produits-soin-du-visage/peau-terne&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;peau terne&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage/peau-terne&quot;,&quot;breadCrumb&quot;:&quot;soins visage::type de peau::peau terne&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1017                        Peau Terne
1018                    </a>
1019                </div>
1020    </li>
1021                        </ul>
1022
1023
1024                </div>
1025
1026
1027            </div>
1028    </li>
1029                        </ul>
1030
1031                            <div>
1032                                <span class="mainShort__link">
1033                                    <a href='https://www.garnier.fr/magazine?filters=soin-de-la-peau' target=""
1034                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::d&#233;couvrez tous nos conseils pour le visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::d&#233;couvrez tous nos conseils pour le visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrez tous nos conseils pour le visage::https://www.garnier.fr/magazine?filters=soin-de-la-peau&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrez tous nos conseils pour le visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/magazine?filters=soin-de-la-peau&quot;,&quot;breadCrumb&quot;:&quot;soins visage::d&#233;couvrez tous nos conseils pour le visage&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1035                                        D&#233;couvrez tous nos conseils pour le visage
1036                                    </a>
1037                                </span>
1038                            </div>
1039                            <div>
1040                                <span class="mainShort__link">
1041                                    <a href='https://www.garnier.fr/tous-les-produits-soin-du-visage' target=""
1042                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::tous les produits soin du visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::tous les produits soin du visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;tous les produits soin du visage::https://www.garnier.fr/tous-les-produits-soin-du-visage&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;tous les produits soin du visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-visage&quot;,&quot;breadCrumb&quot;:&quot;soins visage::tous les produits soin du visage&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1043                                        Tous les produits soin du visage
1044                                    </a>
1045                                </span>
1046                            </div>
1047
1048                </div>
1049
1050                    <div class="level-two-image_container">
1051                        <picture>
1052                        <source media="(max-width:767px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/newdmi_garnier_skincoachai_websitepush_herobanner07_intl_oct25.jpg?rev=5bcdf308762b49168786fe466b3a808e&amp;cx=0&amp;cy=0&amp;cw=414&amp;ch=344&amp;hash=0733C483EC22C7300626FFA473900CA0" />
1053                        <source media="(max-width:1023px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/newdmi_garnier_skincoachai_websitepush_herobanner07_intl_oct25.jpg?rev=5bcdf308762b49168786fe466b3a808e&amp;
1053cx=0&amp;cy=0&amp;cw=800&amp;ch=482&amp;hash=076D71BD0C85906523EE48DC7F57D7F4" />
1054                        <img class="level-image_wrapper lazyload" data-src="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/newdmi_garnier_skincoachai_websitepush_herobanner07_intl_oct25.jpg?rev=5bcdf308762b49168786fe466b3a808e&amp;cx=0&amp;cy=0&amp;cw=360&amp;ch=324&amp;hash=A02127576385ED1B5534150273716AD4" alt="newdmi_garnier_skincoachai_websitepush_herobanner07_intl_oct25" />
1055                                <a href="https://www.garnier.fr/skin-coach" target=""
1056                                   class="level-image_wrapper-link menu-tag" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;skin coach: diagnostic personnalis&#233;::https://www.garnier.fr/skin-coach&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;skin coach: diagnostic personnalis&#233;&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/skin-coach&quot;,&quot;breadCrumb&quot;:&quot;soins visage::skin coach: diagnostic personnalis&#233;&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
1057                                </a>
1058                        </picture>
1059
1060                            <a class="level-two-image_link menu-tag"
1061                               href="https://www.garnier.fr/skin-coach"
1062                               target="" style="--ctaTextColor : #000000;"
1063                               v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins visage::&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins visage::&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;skin coach: diagnostic personnalis&#233;::https://www.garnier.fr/skin-coach&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;skin coach: diagnostic personnalis&#233;&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/skin-coach&quot;,&quot;breadCrumb&quot;:&quot;soins visage::skin coach: diagnostic personnalis&#233;&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
1064                                <span class="ctaLinkText">
1065                                    Skin Coach: Diagnostic Personnalis&#233;
1066                                </span>
1067                                <div class="svg-container">
1068                                    <svg width="24" height="24"
1069                                         viewBox="0 0 24 24" fill="none"
1070                                         xmlns="http://www.w3.org/2000/svg">
1071                                        <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1072                                              stroke="#000000" stroke-width="1.6"
1073                                              stroke-linecap="square"></path>
1074                                    </svg>
1075                                </div>
1076                            </a>
1077                    </div>
1078
1079            </div>
1080        </div>
1081    </li>
1082
1083
1084    <li class="levelOneMenu" :class="[1 === props.slotProps.clickActiveLevelOne ? 'isActiveLevelone':'']">
1085        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelOne(1)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;soins cheveux&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux&quot;,&quot;step&quot;:&quot;1/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1086            <span class="list_title">
1087                SOINS CHEVEUX
1088            </span>
1089            
1090
1091
1092<div class="arrowContainer">
1093    <span class="menu-rig-arrow">
1094        <div class="svg-container">
1095            <svg width="24" height="24"
1096                 viewBox="0 0 24 24" fill="none"
1097                 xmlns="http://www.w3.org/2000/svg">
1098                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1099                      stroke="#000" stroke-width="1.6"
1100                      stroke-linecap="square"></path>
1101            </svg>
1102        </div>
1103    </span>
1104    <span class="menu-opened-arrow">
1105        <div class="svg-container">
1106            <svg width="24" height="24"
1107                 viewBox="0 0 24 24" fill="none"
1108                 xmlns="http://www.w3.org/2000/svg">
1109                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1110                      stroke="#000" stroke-width="2"
1111                      stroke-linecap="square"></path>
1112            </svg>
1113        </div>
1114    </span>
1115</div>
1116
1117        </button>
1118
1119        <div class="level-two__wrapper" id="level-two__wrapper_1">
1120            <div class="level-two__topper">
1121                <button class="level-two__topper-back" tabindex="0" aria-label="Back to main menu" v-on:click="props.slotProps.backtoLOneMenu()" v-on:keydown.enter="props.slotProps.backtoLOneMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLOneMenu()">
1122                    <div class="svg-container">
1123                        <svg width="24" height="24" viewBox="0 0 24 24"
1124                             fill="none" xmlns="http://www.w3.org/2000/svg">
1125                            <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1126                                  stroke="#000" stroke-width="1.6"
1127                                  stroke-linecap="square" />
1128                        </svg>
1129                    </div>
1130                </button>
1131                <div class="level-two__topper_title">
1132                    SOINS CHEVEUX
1133                </div>
1134            </div>
1135            <div class="level-two__wrapper-scrollable">
1136                <div class="level-two-menu">
1137                        <ul>
1138
1139    <li class="levelTwoMenu" :class="[0 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1140        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(0)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;type de produit::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;type de produit&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1141            <!-- conditional for new badge -->
1142            <span class="list_title">
1143                TYPE DE PRODUIT
1144            </span>
1145
1146
1147
1148
1149
1150<div class="arrowContainer">
1151    <span class="menu-rig-arrow">
1152        <div class="svg-container">
1153            <svg width="24" height="24"
1154                 viewBox="0 0 24 24" fill="none"
1155                 xmlns="http://www.w3.org/2000/svg">
1156                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1157                      stroke="#000" stroke-width="1.6"
1158                      stroke-linecap="square"></path>
1159            </svg>
1160        </div>
1161    </span>
1162    <span class="menu-opened-arrow">
1163        <div class="svg-container">
1164            <svg width="24" height="24"
1165                 viewBox="0 0 24 24" fill="none"
1166                 xmlns="http://www.w3.org/2000/svg">
1167                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1168                      stroke="#000" stroke-width="2"
1169                      stroke-linecap="square"></path>
1170            </svg>
1171        </div>
1172    </span>
1173</div>
1174
1175        </button>
1176
1177            <div class="level-three__wrapper" id="level-three__wrapper_0">
1178                <div class="level-three__topper">
1179                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1180                        <div class="svg-container">
1181                            <svg width="24" height="24"
1182                                 viewBox="0 0 24 24" fill="none"
1183                                 xmlns="http://www.w3.org/2000/svg">
1184                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1185                                      stroke="#000" stroke-width="1.6"
1186                                      stroke-linecap="square" />
1187                            </svg>
1188                        </div>
1189                    </button>
1190                    <div class="level-two__topper_title">
1191                        TYPE DE PRODUIT
1192                    </div>
1193                </div>
1194
1195
1196                <div class="level-three__wrapper_scrollerable">
1197                        <ul>
1198
1199    <li class="levethreeList">
1200                <div class="mainSub__link levelFourMainMenu ">
1201                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/shampooing"
1202                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::shampooing&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::shampooing&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;shampooing::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/shampooing&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;shampooing&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/shampooing&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::shampooing&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1203                        Shampooing
1204                    </a>
1205                </div>
1206    </li>
1207
1208    <li class="levethreeList">
1209                <div class="mainSub__link levelFourMainMenu ">
1210                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/apres-shampooing"
1211                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::apr&#232;s-shampooing&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::apr&#232;s-shampooing&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;apr&#232;s-shampooing::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/apres-shampooing&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;apr&#232;s-shampooing&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/apres-shampooing&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::apr&#232;s-shampooing&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1212                        Apr&#232;s-Shampooing
1213                    </a>
1214                </div>
1215    </li>
1216
1217    <li class="levethreeList">
1218                <div class="mainSub__link levelFourMainMenu ">
1219                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/soin-sans-rincage"
1220                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::soin sans rin&#231;age&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::soin sans rin&#231;age&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;soin sans rin&#231;age::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/soin-sans-rincage&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;soin sans rin&#231;age&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/soin-sans-rincage&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::soin sans rin&#231;age&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1221                        Soin Sans Rin&#231;age
1222                    </a>
1223                </div>
1224    </li>
1225
1226    <li class="levethreeList">
1227                <div class="mainSub__link levelFourMainMenu ">
1228                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/masque-cheveux"
1229                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::masque cheveux&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::masque cheveux&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;masque cheveux::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/masque-cheveux&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;masque cheveux&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/masque-cheveux&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::masque cheveux&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1230                        Masque Cheveux
1231                    </a>
1232                </div>
1233    </li>
1234
1235    <li class="levethreeList">
1236                <div class="mainSub__link levelFourMainMenu ">
1237                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/huile-pour-cheveux"
1238                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::s&#233;rum &amp; huile cheveux&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::s&#233;rum &amp; huile cheveux&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;s&#233;rum &amp; huile cheveux::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/huile-pour-cheveux&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;s&#233;rum &amp; huile cheveux&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/huile-pour-cheveux&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::s&#233;rum &amp; huile cheveux&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1239                        S&#233;rum &amp; Huile Cheveux
1240                    </a>
1241                </div>
1242    </li>
1243
1244    <li class="levethreeList">
1245                <div class="mainSub__link levelFourMainMenu ">
1246                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/eco-recharge-shampooing"
1247                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::&#233;co-recharge&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::&#233;co-recharge&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;&#233;co-recharge::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/eco-recharge-shampooing&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;&#233;co-recharge&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/eco-recharge-shampooing&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::&#233;co-recharge&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1248                        &#201;co-Recharge
1249                    </a>
1250                </div>
1251    </li>
1252
1253    <li class="levethreeList">
1254                <div class="mainSub__link levelFourMainMenu ">
1255                    <a href="https://www.garnier.fr/tous-les-produits-soin-du-cheveu/shampooing-solide"
1256                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de produit::shampoing solide&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de produit::shampoing solide&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;shampoing solide::https://www.garnier.fr/tous-les-produits-soin-du-cheveu/shampooing-solide&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;shampoing solide&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu/shampooing-solide&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de produit::shampoing solide&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1257                        Shampoing Solide
1258                    </a>
1259                </div>
1260    </li>
1261                        </ul>
1262
1263
1264                </div>
1265
1266
1267            </div>
1268    </li>
1269
1270    <li class="levelTwoMenu" :class="[1 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1271        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(1)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;type de cheveux::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;type de cheveux&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1272            <!-- conditional for new badge -->
1273            <span class="list_title">
1274                TYPE DE CHEVEUX
1275            </span>
1276
1277
1278
1279
1280
1281<div class="arrowContainer">
1282    <span class="menu-rig-arrow">
1283        <div class="svg-container">
1284            <svg width="24" height="24"
1285                 viewBox="0 0 24 24" fill="none"
1286                 xmlns="http://www.w3.org/2000/svg">
1287                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1288                      stroke="#000" stroke-width="1.6"
1289                      stroke-linecap="square"></path>
1290            </svg>
1291        </div>
1292    </span>
1293    <span class="menu-opened-arrow">
1294        <div class="svg-container">
1295            <svg width="24" height="24"
1296                 viewBox="0 0 24 24" fill="none"
1297                 xmlns="http://www.w3.org/2000/svg">
1298                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1299                      stroke="#000" stroke-width="2"
1300                      stroke-linecap="square"></path>
1301            </svg>
1302        </div>
1303    </span>
1304</div>
1305
1306        </button>
1307
1308            <div class="level-three__wrapper" id="level-three__wrapper_1">
1309                <div class="level-three__topper">
1310                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1311                        <div class="svg-container">
1312                            <svg width="24" height="24"
1313                                 viewBox="0 0 24 24" fill="none"
1314                                 xmlns="http://www.w3.org/2000/svg">
1315                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1316                                      stroke="#000" stroke-width="1.6"
1317                                      stroke-linecap="square" />
1318                            </svg>
1319                        </div>
1320                    </button>
1321                    <div class="level-two__topper_title">
1322                        TYPE DE CHEVEUX
1323                    </div>
1324                </div>
1325
1326
1327                <div class="level-three__wrapper_scrollerable">
1328                        <ul>
1329
1330    <li class="levethreeList">
1331                <div class="mainSub__link levelFourMainMenu ">
1332                    <a href="https://www.garnier.fr/nos-marques/cheveux/fructis/methodeboucles"
1333                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::boucl&#233;s/ondul&#233;s/fris&#233;/cr&#233;pus&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::boucl&#233;s/ondul&#233;s/fris&#233;/cr&#233;pus&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;boucl&#233;s/ondul&#233;s/fris&#233;/cr&#233;pus::https://www.garnier.fr/nos-marques/cheveux/fructis/methodeboucles&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;boucl&#233;s/ondul&#233;s/fris&#233;/cr&#233;pus&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux/fructis/methodeboucles&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::boucl&#233;s/ondul&#233;s/fris&#233;/cr&#233;pus&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1334                        Boucl&#233;s/Ondul&#233;s/Fris&#233;/Cr&#233;pus
1335                    </a>
1336                </div>
1337    </li>
1338
1339    <li class="levethreeList">
1340                <div class="mainSub__link levelFourMainMenu ">
1341                    <a href="https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-secs"
1342                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::secs &amp; d&#233;shydrat&#233;s&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::secs &amp; d&#233;shydrat&#233;s&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;secs &amp; d&#233;shydrat&#233;s::https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-secs&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;secs &amp; d&#233;shydrat&#233;s&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-secs&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::secs &amp; d&#233;shydrat&#233;s&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1343                        Secs &amp; D&#233;shydrat&#233;s
1344                    </a>
1345                </div>
1346    </li>
1347
1348    <li class="levethreeList">
1349                <div class="mainSub__link levelFourMainMenu ">
1350                    <a href="https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-fragiles-ou-cassants"
1351                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::ab&#238;m&#233;s / cassants&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::ab&#238;m&#233;s / cassants&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;ab&#238;m&#233;s / cassants::https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-fragiles-ou-cassants&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;ab&#238;m&#233;s / cassants&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-fragiles-ou-cassants&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::ab&#238;m&#233;s / cassants&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1352                        Ab&#238;m&#233;s / Cassants
1353                    </a>
1354                </div>
1355    </li>
1356
1357    <li class="levethreeList">
1358                <div class="mainSub__link levelFourMainMenu ">
1359                    <a href="https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-gras"
1360                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::gras&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::gras&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;gras::https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-gras&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;gras&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-gras&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::gras&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1361                        Gras
1362                    </a>
1363                </div>
1364    </li>
1365
1366    <li class="levethreeList">
1367                <div class="mainSub__link levelFourMainMenu ">
1368                    <a href="https://www.garnier.fr/nos-marques/cheveux?filters=demeler-les-cheveux-des-enfants"
1369                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::cuir chevelu sensible &amp; enfant&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::cuir chevelu sensible &amp; enfant&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;cuir chevelu sensible &amp; enfant::https://www.garnier.fr/nos-marques/cheveux?filters=demeler-les-cheveux-des-enfants&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;cuir chevelu sensible &amp; enfant&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux?filters=demeler-les-cheveux-des-enfants&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::cuir chevelu sensible &amp; enfant&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1370                        Cuir Chevelu Sensible &amp; Enfant
1371                    </a>
1372                </div>
1373    </li>
1374
1375    <li class="levethreeList">
1376                <div class="mainSub__link levelFourMainMenu ">
1377                    <a href="https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-colores-ou-meches"
1378                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::blond / color&#233;s&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::blond / color&#233;s&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;blond / color&#233;s::https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-colores-ou-meches&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;blond / color&#233;s&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux?filters=cheveux-colores-ou-meches&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::blond / color&#233;s&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1379                        Blond / Color&#233;s
1380                    </a>
1381                </div>
1382    </li>
1383
1384    <li class="levethreeList">
1385                <div class="mainSub__link levelFourMainMenu ">
1386                    <a href="https://www.garnier.fr/nos-marques/cheveux?filters=anti-pelliculaire"
1387                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::type de cheveux::pellicules&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::type de cheveux::pellicules&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;pellicules::https://www.garnier.fr/nos-marques/cheveux?filters=anti-pelliculaire&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;pellicules&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux?filters=anti-pelliculaire&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::type de cheveux::pellicules&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1388                        Pellicules
1389                    </a>
1390                </div>
1391    </li>
1392                        </ul>
1393
1394
1395                </div>
1396
1397
1398            </div>
1399    </li>
1400
1401    <li class="levelTwoMenu" :class="[2 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1402        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(2)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nos gammes::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nos gammes&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::nos gammes&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1403            <!-- conditional for new badge -->
1404            <span class="list_title">
1405                NOS GAMMES
1406            </span>
1407
1408
1409
1410
1411
1412<div class="arrowContainer">
1413    <span class="menu-rig-arrow">
1414        <div class="svg-container">
1415            <svg width="24" height="24"
1416                 viewBox="0 0 24 24" fill="none"
1417                 xmlns="http://www.w3.org/2000/svg">
1418                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1419                      stroke="#000" stroke-width="1.6"
1420                      stroke-linecap="square"></path>
1421            </svg>
1422        </div>
1423    </span>
1424    <span class="menu-opened-arrow">
1425        <div class="svg-container">
1426            <svg width="24" height="24"
1427                 viewBox="0 0 24 24" fill="none"
1428                 xmlns="http://www.w3.org/2000/svg">
1429                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1430                      stroke="#000" stroke-width="2"
1431                      stroke-linecap="square"></path>
1432            </svg>
1433        </div>
1434    </span>
1435</div>
1436
1437        </button>
1438
1439            <div class="level-three__wrapper" id="level-three__wrapper_2">
1440                <div class="level-three__topper">
1441                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1442                        <div class="svg-container">
1443                            <svg width="24" height="24"
1444                                 viewBox="0 0 24 24" fill="none"
1445                                 xmlns="http://www.w3.org/2000/svg">
1446                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1447                                      stroke="#000" stroke-width="1.6"
1448                                      stroke-linecap="square" />
1449                            </svg>
1450                        </div>
1451                    </button>
1452                    <div class="level-two__topper_title">
1453                        NOS GAMMES
1454                    </div>
1455                </div>
1456
1457
1458                <div class="level-three__wrapper_scrollerable">
1459                        <ul>
1460
1461    <li class="levethreeList">
1462                <div class="mainSub__link levelFourMainMenu ">
1463                    <a href="https://www.garnier.fr/nos-marques/cheveux/ultra-doux"
1464                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::nos gammes::ultra doux&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::nos gammes::ultra doux&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;ultra doux::https://www.garnier.fr/nos-marques/cheveux/ultra-doux&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;ultra doux&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux/ultra-doux&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::nos gammes::ultra doux&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1465                        Ultra Doux
1466                    </a>
1467                </div>
1468    </li>
1469
1470    <li class="levethreeList">
1471                <div class="mainSub__link levelFourMainMenu ">
1472                    <a href="https://www.garnier.fr/nos-marques/cheveux/fructis"
1473                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::nos gammes::fructis &quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::nos gammes::fructis &quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;fructis ::https://www.garnier.fr/nos-marques/cheveux/fructis&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;fructis &quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux/fructis&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::nos gammes::fructis &quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1474                        Fructis 
1475                    </a>
1476                </div>
1477    </li>
1478
1479    <li class="levethreeList">
1480                <div class="mainSub__link levelFourMainMenu ">
1481                    <a href="https://www.garnier.fr/nos-marques/cheveux/fructis/hair-food"
1482                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::nos gammes::hair food&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::nos gammes::hair food&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;hair food::https://www.garnier.fr/nos-marques/cheveux/fructis/hair-food&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;hair food&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux/fructis/hair-food&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::nos gammes::hair food&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1483                        Hair Food
1484                    </a>
1485                </div>
1486    </li>
1487                        </ul>
1488
1489
1490                        <div class="mainSub__link">
1491                            <a href="https://www.garnier.fr/soins-des-cheveux" target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir nos gammes::https://www.garnier.fr/soins-des-cheveux&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir nos gammes&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/soins-des-cheveux&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1492                                D&#201;COUVRIR NOS GAMMES
1493                            </a>
1494                        </div>
1495                </div>
1496
1497
1498            </div>
1499    </li>
1500
1501    <li class="levelTwoMenu" :class="[3 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1502        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(3)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;ingr&#233;dients::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;ingr&#233;dients&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::ingr&#233;dients&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1503            <!-- conditional for new badge -->
1504            <span class="list_title">
1505                INGR&#201;DIENTS
1506            </span>
1507
1508
1509
1510
1511
1512<div class="arrowContainer">
1513    <span class="menu-rig-arrow">
1514        <div class="svg-container">
1515            <svg width="24" height="24"
1516                 viewBox="0 0 24 24" fill="none"
1517                 xmlns="http://www.w3.org/2000/svg">
1518                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1519                      stroke="#000" stroke-width="1.6"
1520                      stroke-linecap="square"></path>
1521            </svg>
1522        </div>
1523    </span>
1524    <span class="menu-opened-arrow">
1525        <div class="svg-container">
1526            <svg width="24" height="24"
1527                 viewBox="0 0 24 24" fill="none"
1528                 xmlns="http://www.w3.org/2000/svg">
1529                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1530                      stroke="#000" stroke-width="2"
1531                      stroke-linecap="square"></path>
1532            </svg>
1533        </div>
1534    </span>
1535</div>
1536
1537        </button>
1538
1539            <div class="level-three__wrapper" id="level-three__wrapper_3">
1540                <div class="level-three__topper">
1541                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1542                        <div class="svg-container">
1543                            <svg width="24" height="24"
1544                                 viewBox="0 0 24 24" fill="none"
1545                                 xmlns="http://www.w3.org/2000/svg">
1546                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1547                                      stroke="#000" stroke-width="1.6"
1548                                      stroke-linecap="square" />
1549                            </svg>
1550                        </div>
1551                    </button>
1552                    <div class="level-two__topper_title">
1553                        INGR&#201;DIENTS
1554                    </div>
1555                </div>
1556
1557
1558                <div class="level-three__wrapper_scrollerable">
1559                        <ul>
1560
1561    <li class="levethreeList">
1562                <div class="mainSub__link levelFourMainMenu ">
1563                    <a href="https://www.garnier.fr/nos-marques/cheveux/fructis/gamme-keratineliss"
1564                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::ingr&#233;dients::k&#233;ratine&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::ingr&#233;dients::k&#233;ratine&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;k&#233;ratine::https://www.garnier.fr/nos-marques/cheveux/fructis/gamme-keratineliss&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;k&#233;ratine&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux/fructis/gamme-keratineliss&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::ingr&#233;dients::k&#233;ratine&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1565                        K&#233;ratine
1566                    </a>
1567                </div>
1568    </li>
1569
1570    <li class="levethreeList">
1571                <div class="mainSub__link levelFourMainMenu ">
1572                    <a href="https://www.garnier.fr/au-coeur-de-l-ingredient/argan"
1573                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::ingr&#233;dients::huile d&#39;argan&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::ingr&#233;dients::huile d&#39;argan&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;huile d&#39;argan::https://www.garnier.fr/au-coeur-de-l-ingredient/argan&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;huile d&#39;argan&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/argan&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::ingr&#233;dients::huile d&#39;argan&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1574                        Huile d&#39;Argan
1575                    </a>
1576                </div>
1577    </li>
1578
1579    <li class="levethreeList">
1580                <div class="mainSub__link levelFourMainMenu ">
1581                    <a href="https://www.garnier.fr/au-coeur-de-l-ingredient/avocat"
1582                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::ingr&#233;dients::huile d&#39;avocat&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::ingr&#233;dients::huile d&#39;avocat&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;huile d&#39;avocat::https://www.garnier.fr/au-coeur-de-l-ingredient/avocat&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;huile d&#39;avocat&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/avocat&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::ingr&#233;dients::huile d&#39;avocat&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1583                        Huile d&#39;Avocat
1584                    </a>
1585                </div>
1586    </li>
1587
1588    <li class="levethreeList">
1589                <div class="mainSub__link levelFourMainMenu ">
1590                    <a href="https://www.garnier.fr/au-coeur-de-l-ingredient/miel"
1591                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::ingr&#233;dients::miel&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::ingr&#233;dients::miel&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;miel::https://www.garnier.fr/au-coeur-de-l-ingredient/miel&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;miel&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/miel&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::ingr&#233;dients::miel&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1592                        Miel
1593                    </a>
1594                </div>
1595    </li>
1596                        </ul>
1597
1598
1599                        <div class="mainSub__link">
1600                            <a href="https://www.garnier.fr/au-coeur-de-l-ingredient" target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::ingr&#233;dients::d&#233;couvrir ingr&#233;dients&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::ingr&#233;dients::d&#233;couvrir ingr&#233;dients&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir ingr&#233;dients::https://www.garnier.fr/au-coeur-de-l-ingredient&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir ingr&#233;dients&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::ingr&#233;dients::d&#233;couvrir ingr&#233;dients&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1601                                D&#201;COUVRIR INGR&#201;DIENTS
1602                            </a>
1603                        </div>
1604                </div>
1605
1606
1607            </div>
1608    </li>
1609                        </ul>
1610
1611                            <div>
1612                                <span class="mainShort__link">
1613                                    <a href='https://www.garnier.fr/magazine?filters=soin-des-cheveux' target=""
1614                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::tous nos conseils sur les soins cheveux&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::tous nos conseils sur les soins cheveux&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;tous nos conseils sur les soins cheveux::https://www.garnier.fr/magazine?filters=soin-des-cheveux&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;tous nos conseils sur les soins cheveux&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/magazine?filters=soin-des-cheveux&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::tous nos conseils sur les soins cheveux&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1615                                        Tous nos conseils sur les soins cheveux
1616                                    </a>
1617                                </span>
1618                            </div>
1619                            <div>
1620                                <span class="mainShort__link">
1621                                    <a href='https://www.garnier.fr/tous-les-produits-soin-du-cheveu' target=""
1622                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;soins cheveux::voir tous les produits soins cheveux&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;soins cheveux::voir tous les produits soins cheveux&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;voir tous les produits soins cheveux::https://www.garnier.fr/tous-les-produits-soin-du-cheveu&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;voir tous les produits soins cheveux&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-soin-du-cheveu&quot;,&quot;breadCrumb&quot;:&quot;soins cheveux::voir tous les produits soins cheveux&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1623                                        Voir Tous Les Produits Soins Cheveux
1624                                    </a>
1625                                </span>
1626                            </div>
1627
1628                </div>
1629
1630
1631            </div>
1632        </div>
1633    </li>
1634
1635
1636    <li class="levelOneMenu" :class="[2 === props.slotProps.clickActiveLevelOne ? 'isActiveLevelone':'']">
1637        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelOne(2)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;coloration::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;coloration&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;coloration&quot;,&quot;step&quot;:&quot;1/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1638            <span class="list_title">
1639                COLORATION
1640            </span>
1641            
1642
1643
1644<div class="arrowContainer">
1645    <span class="menu-rig-arrow">
1646        <div class="svg-container">
1647            <svg width="24" height="24"
1648                 viewBox="0 0 24 24" fill="none"
1649                 xmlns="http://www.w3.org/2000/svg">
1650                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1651                      stroke="#000" stroke-width="1.6"
1652                      stroke-linecap="square"></path>
1653            </svg>
1654        </div>
1655    </span>
1656    <span class="menu-opened-arrow">
1657        <div class="svg-container">
1658            <svg width="24" height="24"
1659                 viewBox="0 0 24 24" fill="none"
1660                 xmlns="http://www.w3.org/2000/svg">
1661                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1662                      stroke="#000" stroke-width="2"
1663                      stroke-linecap="square"></path>
1664            </svg>
1665        </div>
1666    </span>
1667</div>
1668
1669        </button>
1670
1671        <div class="level-two__wrapper" id="level-two__wrapper_2">
1672            <div class="level-two__topper">
1673                <button class="level-two__topper-back" tabindex="0" aria-label="Back to main menu" v-on:click="props.slotProps.backtoLOneMenu()" v-on:keydown.enter="props.slotProps.backtoLOneMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLOneMenu()">
1674                    <div class="svg-container">
1675                        <svg width="24" height="24" viewBox="0 0 24 24"
1676                             fill="none" xmlns="http://www.w3.org/2000/svg">
1677                            <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1678                                  stroke="#000" stroke-width="1.6"
1679                                  stroke-linecap="square" />
1680                        </svg>
1681                    </div>
1682                </button>
1683                <div class="level-two__topper_title">
1684                    COLORATION
1685                </div>
1686            </div>
1687            <div class="level-two__wrapper-scrollable">
1688                <div class="level-two-menu">
1689                        <ul>
1690
1691    <li class="levelTwoMenu" :class="[0 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1692        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(0)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;couleur::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;couleur&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1693            <!-- conditional for new badge -->
1694            <span class="list_title">
1695                COULEUR
1696            </span>
1697
1698
1699
1700
1701
1702<div class="arrowContainer">
1703    <span class="menu-rig-arrow">
1704        <div class="svg-container">
1705            <svg width="24" height="24"
1706                 viewBox="0 0 24 24" fill="none"
1707                 xmlns="http://www.w3.org/2000/svg">
1708                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1709                      stroke="#000" stroke-width="1.6"
1710                      stroke-linecap="square"></path>
1711            </svg>
1712        </div>
1713    </span>
1714    <span class="menu-opened-arrow">
1715        <div class="svg-container">
1716            <svg width="24" height="24"
1717                 viewBox="0 0 24 24" fill="none"
1718                 xmlns="http://www.w3.org/2000/svg">
1719                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1720                      stroke="#000" stroke-width="2"
1721                      stroke-linecap="square"></path>
1722            </svg>
1723        </div>
1724    </span>
1725</div>
1726
1727        </button>
1728
1729            <div class="level-three__wrapper" id="level-three__wrapper_0">
1730                <div class="level-three__topper">
1731                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1732                        <div class="svg-container">
1733                            <svg width="24" height="24"
1734                                 viewBox="0 0 24 24" fill="none"
1735                                 xmlns="http://www.w3.org/2000/svg">
1736                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1737                                      stroke="#000" stroke-width="1.6"
1738                                      stroke-linecap="square" />
1739                            </svg>
1740                        </div>
1741                    </button>
1742                    <div class="level-two__topper_title">
1743                        COULEUR
1744                    </div>
1745                </div>
1746
1747
1748                <div class="level-three__wrapper_scrollerable">
1749                        <ul>
1750
1751    <li class="levethreeList">
1752                <div class="mainSub__link levelFourMainMenu ">
1753                    <a href="https://www.garnier.fr/colorations/coloration-blonde"
1754                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::couleur::blond&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::couleur::blond&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;blond::https://www.garnier.fr/colorations/coloration-blonde&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;blond&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-blonde&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur::blond&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1755                        Blond
1756                    </a>
1757                </div>
1758    </li>
1759
1760    <li class="levethreeList">
1761                <div class="mainSub__link levelFourMainMenu ">
1762                    <a href="https://www.garnier.fr/colorations/coloration-noire"
1763                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::couleur::noir&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::couleur::noir&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;noir::https://www.garnier.fr/colorations/coloration-noire&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;noir&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-noire&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur::noir&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1764                        Noir
1765                    </a>
1766                </div>
1767    </li>
1768
1769    <li class="levethreeList">
1770                <div class="mainSub__link levelFourMainMenu ">
1771                    <a href="https://www.garnier.fr/colorations/coloration-brune"
1772                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::couleur::brun&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::couleur::brun&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;brun::https://www.garnier.fr/colorations/coloration-brune&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;brun&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-brune&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur::brun&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1773                        Brun
1774                    </a>
1775                </div>
1776    </li>
1777
1778    <li class="levethreeList">
1779                <div class="mainSub__link levelFourMainMenu ">
1780                    <a href="https://www.garnier.fr/colorations/coloration-chatain"
1781                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::couleur::ch&#226;tain&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::couleur::ch&#226;tain&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;ch&#226;tain::https://www.garnier.fr/colorations/coloration-chatain&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;ch&#226;tain&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-chatain&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur::ch&#226;tain&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1782                        Ch&#226;tain
1783                    </a>
1784                </div>
1785    </li>
1786
1787    <li class="levethreeList">
1788                <div class="mainSub__link levelFourMainMenu ">
1789                    <a href="https://www.garnier.fr/colorations/coloration-couleurs"
1790                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::couleur::couleurs&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::couleur::couleurs&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;couleurs::https://www.garnier.fr/colorations/coloration-couleurs&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;couleurs&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-couleurs&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur::couleurs&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1791                        Couleurs
1792                    </a>
1793                </div>
1794    </li>
1795
1796    <li class="levethreeList">
1797                <div class="mainSub__link levelFourMainMenu ">
1798                    <a href="https://www.garnier.fr/colorations/coloration-rouge"
1799                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::couleur::rouge&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::couleur::rouge&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;rouge::https://www.garnier.fr/colorations/coloration-rouge&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;rouge&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-rouge&quot;,&quot;breadCrumb&quot;:&quot;coloration::couleur::rouge&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1800                        Rouge
1801                    </a>
1802                </div>
1803    </li>
1804                        </ul>
1805
1806
1807                </div>
1808
1809
1810            </div>
1811    </li>
1812
1813    <li class="levelTwoMenu" :class="[1 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1814        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(1)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;type de coloration::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;type de coloration&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;coloration::type de coloration&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1815            <!-- conditional for new badge -->
1816            <span class="list_title">
1817                TYPE DE COLORATION
1818            </span>
1819
1820
1821
1822
1823
1824<div class="arrowContainer">
1825    <span class="menu-rig-arrow">
1826        <div class="svg-container">
1827            <svg width="24" height="24"
1828                 viewBox="0 0 24 24" fill="none"
1829                 xmlns="http://www.w3.org/2000/svg">
1830                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1831                      stroke="#000" stroke-width="1.6"
1832                      stroke-linecap="square"></path>
1833            </svg>
1834        </div>
1835    </span>
1836    <span class="menu-opened-arrow">
1837        <div class="svg-container">
1838            <svg width="24" height="24"
1839                 viewBox="0 0 24 24" fill="none"
1840                 xmlns="http://www.w3.org/2000/svg">
1841                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1842                      stroke="#000" stroke-width="2"
1843                      stroke-linecap="square"></path>
1844            </svg>
1845        </div>
1846    </span>
1847</div>
1848
1849        </button>
1850
1851            <div class="level-three__wrapper" id="level-three__wrapper_1">
1852                <div class="level-three__topper">
1853                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1854                        <div class="svg-container">
1855                            <svg width="24" height="24"
1856                                 viewBox="0 0 24 24" fill="none"
1857                                 xmlns="http://www.w3.org/2000/svg">
1858                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1859                                      stroke="#000" stroke-width="1.6"
1860                                      stroke-linecap="square" />
1861                            </svg>
1862                        </div>
1863                    </button>
1864                    <div class="level-two__topper_title">
1865                        TYPE DE COLORATION
1866                    </div>
1867                </div>
1868
1869
1870                <div class="level-three__wrapper_scrollerable">
1871                        <ul>
1872
1873    <li class="levethreeList">
1874                <div class="mainSub__link levelFourMainMenu ">
1875                    <a href="https://www.garnier.fr/colorations/coloration-intense"
1876                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::type de coloration::coloration permanente&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::type de coloration::coloration permanente&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;coloration permanente::https://www.garnier.fr/colorations/coloration-intense&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;coloration permanente&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/coloration-intense&quot;,&quot;breadCrumb&quot;:&quot;coloration::type de coloration::coloration permanente&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1877                        Coloration Permanente
1878                    </a>
1879                </div>
1880    </li>
1881
1882    <li class="levethreeList">
1883                <div class="mainSub__link levelFourMainMenu ">
1884                    <a href="https://www.garnier.fr/colorations/sans-ammoniaque"
1885                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::type de coloration::coloration sans ammoniaque&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::type de coloration::coloration sans ammoniaque&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;coloration sans ammoniaque::https://www.garnier.fr/colorations/sans-ammoniaque&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;coloration sans ammoniaque&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/sans-ammoniaque&quot;,&quot;breadCrumb&quot;:&quot;coloration::type de coloration::coloration sans ammoniaque&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1886                        Coloration Sans Ammoniaque
1887                    </a>
1888                </div>
1889    </li>
1890
1891    <li class="levethreeList">
1892                <div class="mainSub__link levelFourMainMenu ">
1893                    <a href="https://www.garnier.fr/nos-marques/coloration/color-shampoo-retouch"
1894                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::type de coloration::retouche racines&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::type de coloration::retouche racines&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;retouche racines::https://www.garnier.fr/nos-marques/coloration/color-shampoo-retouch&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;retouche racines&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/color-shampoo-retouch&quot;,&quot;breadCrumb&quot;:&quot;coloration::type de coloration::retouche racines&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1895                        Retouche Racines
1896                    </a>
1897                </div>
1898    </li>
1899
1900    <li class="levethreeList">
1901                <div class="mainSub__link levelFourMainMenu ">
1902                    <a href="https://www.garnier.fr/colorations/decoloration-and-eclaircissants"
1903                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::type de coloration::d&#233;coloration&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::type de coloration::d&#233;coloration&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;coloration::https://www.garnier.fr/colorations/decoloration-and-eclaircissants&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;coloration&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations/decoloration-and-eclaircissants&quot;,&quot;breadCrumb&quot;:&quot;coloration::type de coloration::d&#233;coloration&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1904                        D&#233;coloration
1905                    </a>
1906                </div>
1907    </li>
1908                        </ul>
1909
1910
1911                </div>
1912
1913
1914            </div>
1915    </li>
1916
1917    <li class="levelTwoMenu" :class="[2 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
1918        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(2)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nos gammes::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nos gammes&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
1919            <!-- conditional for new badge -->
1920            <span class="list_title">
1921                NOS GAMMES
1922            </span>
1923
1924
1925
1926
1927
1928<div class="arrowContainer">
1929    <span class="menu-rig-arrow">
1930        <div class="svg-container">
1931            <svg width="24" height="24"
1932                 viewBox="0 0 24 24" fill="none"
1933                 xmlns="http://www.w3.org/2000/svg">
1934                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1935                      stroke="#000" stroke-width="1.6"
1936                      stroke-linecap="square"></path>
1937            </svg>
1938        </div>
1939    </span>
1940    <span class="menu-opened-arrow">
1941        <div class="svg-container">
1942            <svg width="24" height="24"
1943                 viewBox="0 0 24 24" fill="none"
1944                 xmlns="http://www.w3.org/2000/svg">
1945                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
1946                      stroke="#000" stroke-width="2"
1947                      stroke-linecap="square"></path>
1948            </svg>
1949        </div>
1950    </span>
1951</div>
1952
1953        </button>
1954
1955            <div class="level-three__wrapper" id="level-three__wrapper_2">
1956                <div class="level-three__topper">
1957                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
1958                        <div class="svg-container">
1959                            <svg width="24" height="24"
1960                                 viewBox="0 0 24 24" fill="none"
1961                                 xmlns="http://www.w3.org/2000/svg">
1962                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
1963                                      stroke="#000" stroke-width="1.6"
1964                                      stroke-linecap="square" />
1965                            </svg>
1966                        </div>
1967                    </button>
1968                    <div class="level-two__topper_title">
1969                        NOS GAMMES
1970                    </div>
1971                </div>
1972
1973
1974                <div class="level-three__wrapper_scrollerable">
1975                        <ul>
1976
1977    <li class="levethreeList">
1978                <div class="mainSub__link levelFourMainMenu ">
1979                    <a href="https://www.garnier.fr/nos-marques/coloration/olia"
1980                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::olia&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::olia&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;olia::https://www.garnier.fr/nos-marques/coloration/olia&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;olia&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/olia&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::olia&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1981                        Olia
1982                    </a>
1983                </div>
1984    </li>
1985
1986    <li class="levethreeList">
1987                <div class="mainSub__link levelFourMainMenu ">
1988                    <a href="https://www.garnier.fr/nos-marques/coloration/good"
1989                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::good&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::good&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;good::https://www.garnier.fr/nos-marques/coloration/good&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;good&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/good&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::good&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1990                        Good
1991                    </a>
1992                </div>
1993    </li>
1994
1995    <li class="levethreeList">
1996                <div class="mainSub__link levelFourMainMenu ">
1997                    <a href="https://www.garnier.fr/nos-marques/coloration/belle-color"
1998                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::belle color&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::belle color&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;belle color::https://www.garnier.fr/nos-marques/coloration/belle-color&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;belle color&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/belle-color&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::belle color&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
1999                        Belle Color
2000                    </a>
2001                </div>
2002    </li>
2003
2004    <li class="levethreeList">
2005                <div class="mainSub__link levelFourMainMenu ">
2006                    <a href="https://www.garnier.fr/nos-marques/coloration/color-sensation"
2007                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::color sensation&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::color sensation&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;color sensation::https://www.garnier.fr/nos-marques/coloration/color-sensation&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;color sensation&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/color-sensation&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::color sensation&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2008                        Color Sensation
2009                    </a>
2010                </div>
2011    </li>
2012
2013    <li class="levethreeList">
2014                <div class="mainSub__link levelFourMainMenu ">
2015                    <a href="https://www.garnier.fr/nos-marques/coloration/color-shampoo-retouch"
2016                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::color shampoo retouch&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::color shampoo retouch&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;color shampoo retouch::https://www.garnier.fr/nos-marques/coloration/color-shampoo-retouch&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;color shampoo retouch&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/color-shampoo-retouch&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::color shampoo retouch&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2017                        Color Shampoo Retouch
2018                    </a>
2019                </div>
2020    </li>
2021
2022    <li class="levethreeList">
2023                <div class="mainSub__link levelFourMainMenu ">
2024                    <a href="https://www.garnier.fr/nos-marques/coloration/100-pourcent-ultra-blond"
2025                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::100% blond&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::100% blond&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;100% blond::https://www.garnier.fr/nos-marques/coloration/100-pourcent-ultra-blond&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;100% blond&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/coloration/100-pourcent-ultra-blond&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::100% blond&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2026                        100% Blond
2027                    </a>
2028                </div>
2029    </li>
2030                        </ul>
2031
2032
2033                        <div class="mainSub__link">
2034                            <a href="https://www.garnier.fr/nos-colorations" target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir nos gammes::https://www.garnier.fr/nos-colorations&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir nos gammes&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-colorations&quot;,&quot;breadCrumb&quot;:&quot;coloration::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2035                                D&#201;COUVRIR NOS GAMMES
2036                            </a>
2037                        </div>
2038                </div>
2039
2040
2041            </div>
2042    </li>
2043                        </ul>
2044
2045                            <div>
2046                                <span class="mainShort__link">
2047                                    <a href='https://www.garnier.fr/magazine?filters=colorations' target=""
2048                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::d&#233;couvrez tous nos conseils sur la coloration&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::d&#233;couvrez tous nos conseils sur la coloration&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrez tous nos conseils sur la coloration::https://www.garnier.fr/magazine?filters=colorations&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrez tous nos conseils sur la coloration&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/magazine?filters=colorations&quot;,&quot;breadCrumb&quot;:&quot;coloration::d&#233;couvrez tous nos conseils sur la coloration&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2049                                        D&#233;couvrez tous nos conseils sur la coloration
2050                                    </a>
2051                                </span>
2052                            </div>
2053                            <div>
2054                                <span class="mainShort__link">
2055                                    <a href='https://www.garnier.fr/colorations' target=""
2056                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::d&#233;couvrez toutes nos colorations&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::d&#233;couvrez toutes nos colorations&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrez toutes nos colorations::https://www.garnier.fr/colorations&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrez toutes nos colorations&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/colorations&quot;,&quot;breadCrumb&quot;:&quot;coloration::d&#233;couvrez toutes nos colorations&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2057                                        D&#233;couvrez toutes nos colorations
2058                                    </a>
2059                                </span>
2060                            </div>
2061
2062                </div>
2063
2064                    <div class="level-two-image_container">
2065                        <picture>
2066                        <source media="(max-width:767px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/newdmi_garnier_vto_websitepush_herocarousel_mariajose_intl_mar26-(1).jpg?rev=3aae378069e048d4b51542197560f0c6&amp;cx=0&amp;cy=0&amp;cw=414&amp;ch=344&amp;hash=B2492524E91550F20C84E34ECB6A67B9" />
2067                        <source media="(max-width:1023px)" srcset="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/newdmi_garnier_vto_websitepush_herocarousel_mariajose_intl_mar26-(1).jpg?rev=3aae378069e048d4b51542197560f0c6&amp;cx=0&amp;cy=0&amp;cw=800&amp;ch=482&amp;hash=C0F7DCF0C218937B99A7B1BD7100FD68" />
2068                        <img class="level-image_wrapper lazyload" data-src="/-/media/project/loreal/brand-sites/garnier/master/dmi/main-navigation-revamp-2026/newdmi_garnier_vto_websitepush_herocarousel_mariajose_intl_mar26-(1).jpg?rev=3aae378069e048d4b51542197560f0c6&amp;cx=0&amp;cy=0&amp;cw=360&amp;ch=324&amp;hash=A26C3B75869389AE84875DE60056C9FD" alt="newdmi_garnier_vto_websitepush_herocarousel_mariajose_intl_mar26 (1)" />
2069                                <a href="https://www.garnier.fr/outils-et-services/test-virtuel" target=""
2070                                   class="level-image_wrapper-link menu-tag" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;essai virtuel: trouvez la nuance id&#233;ale !::https://www.garnier.fr/outils-et-services/test-virtuel&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;essai virtuel: trouvez la nuance id&#233;ale !&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/outils-et-services/test-virtuel&quot;,&quot;breadCrumb&quot;:&quot;coloration::essai virtuel: trouvez la nuance id&#233;ale !&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
2071                                </a>
2072                        </picture>
2073
2074                            <a class="level-two-image_link menu-tag"
2075                               href="https://www.garnier.fr/outils-et-services/test-virtuel"
2076                               target="" style="--ctaTextColor : #FFFFFF;"
2077                               v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;coloration::&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;coloration::&quot;,&quot;event_detail&quot;:&quot;image&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;essai virtuel: trouvez la nuance id&#233;ale !::https://www.garnier.fr/outils-et-services/test-virtuel&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;essai virtuel: trouvez la nuance id&#233;ale !&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/outils-et-services/test-virtuel&quot;,&quot;breadCrumb&quot;:&quot;coloration::essai virtuel: trouvez la nuance id&#233;ale !&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;image&quot;}">
2078                                <span class="ctaLinkText">
2079                                    Essai Virtuel: Trouvez la nuance id&#233;ale !
2080                                </span>
2081                                <div class="svg-container">
2082                                    <svg width="24" height="24"
2083                                         viewBox="0 0 24 24" fill="none"
2084                                         xmlns="http://www.w3.org/2000/svg">
2085                                        <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2086                                              stroke="#FFFFFF" stroke-width="1.6"
2087                                              stroke-linecap="square"></path>
2088                                    </svg>
2089                                </div>
2090                            </a>
2091                    </div>
2092
2093            </div>
2094        </div>
2095    </li>
2096
2097
2098    <li class="levelOneMenu" :class="[3 === props.slotProps.clickActiveLevelOne ? 'isActiveLevelone':'']">
2099        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelOne(3)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;solaire::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;solaire&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;solaire&quot;,&quot;step&quot;:&quot;1/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
2100            <span class="list_title">
2101                SOLAIRE
2102            </span>
2103            
2104
2105
2106<div class="arrowContainer">
2107    <span class="menu-rig-arrow">
2108        <div class="svg-container">
2109            <svg width="24" height="24"
2110                 viewBox="0 0 24 24" fill="none"
2111                 xmlns="http://www.w3.org/2000/svg">
2112                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2113                      stroke="#000" stroke-width="1.6"
2114                      stroke-linecap="square"></path>
2115            </svg>
2116        </div>
2117    </span>
2118    <span class="menu-opened-arrow">
2119        <div class="svg-container">
2120            <svg width="24" height="24"
2121                 viewBox="0 0 24 24" fill="none"
2122                 xmlns="http://www.w3.org/2000/svg">
2123                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
2124                      stroke="#000" stroke-width="2"
2125                      stroke-linecap="square"></path>
2126            </svg>
2127        </div>
2128    </span>
2129</div>
2130
2131        </button>
2132
2133        <div class="level-two__wrapper" id="level-two__wrapper_3">
2134            <div class="level-two__topper">
2135                <button class="level-two__topper-back" tabindex="0" aria-label="Back to main menu" v-on:click="props.slotProps.backtoLOneMenu()" v-on:keydown.enter="props.slotProps.backtoLOneMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLOneMenu()">
2136                    <div class="svg-container">
2137                        <svg width="24" height="24" viewBox="0 0 24 24"
2138                             fill="none" xmlns="http://www.w3.org/2000/svg">
2139                            <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2140                                  stroke="#000" stroke-width="1.6"
2141                                  stroke-linecap="square" />
2142                        </svg>
2143                    </div>
2144                </button>
2145                <div class="level-two__topper_title">
2146                    SOLAIRE
2147                </div>
2148            </div>
2149            <div class="level-two__wrapper-scrollable">
2150                <div class="level-two-menu">
2151                        <ul>
2152
2153    <li class="levelTwoMenu" :class="[0 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
2154        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(0)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;type d&#39;usage solaire::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;type d&#39;usage solaire&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;solaire::type d&#39;usage solaire&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
2155            <!-- conditional for new badge -->
2156            <span class="list_title">
2157                TYPE D&#39;USAGE SOLAIRE
2158            </span>
2159
2160
2161
2162
2163
2164<div class="arrowContainer">
2165    <span class="menu-rig-arrow">
2166        <div class="svg-container">
2167            <svg width="24" height="24"
2168                 viewBox="0 0 24 24" fill="none"
2169                 xmlns="http://www.w3.org/2000/svg">
2170                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2171                      stroke="#000" stroke-width="1.6"
2172                      stroke-linecap="square"></path>
2173            </svg>
2174        </div>
2175    </span>
2176    <span class="menu-opened-arrow">
2177        <div class="svg-container">
2178            <svg width="24" height="24"
2179                 viewBox="0 0 24 24" fill="none"
2180                 xmlns="http://www.w3.org/2000/svg">
2181                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
2182                      stroke="#000" stroke-width="2"
2183                      stroke-linecap="square"></path>
2184            </svg>
2185        </div>
2186    </span>
2187</div>
2188
2189        </button>
2190
2191            <div class="level-three__wrapper" id="level-three__wrapper_0">
2192                <div class="level-three__topper">
2193                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
2194                        <div class="svg-container">
2195                            <svg width="24" height="24"
2196                                 viewBox="0 0 24 24" fill="none"
2197                                 xmlns="http://www.w3.org/2000/svg">
2198                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2199                                      stroke="#000" stroke-width="1.6"
2200                                      stroke-linecap="square" />
2201                            </svg>
2202                        </div>
2203                    </button>
2204                    <div class="level-two__topper_title">
2205                        TYPE D&#39;USAGE SOLAIRE
2206                    </div>
2207                </div>
2208
2209
2210                <div class="level-three__wrapper_scrollerable">
2211                        <ul>
2212
2213    <li class="levethreeList">
2214                <div class="mainSub__link levelFourMainMenu ">
2215                    <a href="https://www.garnier.fr/tous-les-produits-solaire/creme-solaire"
2216                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire corps&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire corps&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;protection solaire corps::https://www.garnier.fr/tous-les-produits-solaire/creme-solaire&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;protection solaire corps&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/creme-solaire&quot;,&quot;breadCrumb&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire corps&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2217                        Protection Solaire Corps
2218                    </a>
2219                </div>
2220    </li>
2221
2222    <li class="levethreeList">
2223                <div class="mainSub__link levelFourMainMenu ">
2224                    <a href="https://www.garnier.fr/tous-les-produits-solaire/creme-solaire-visage"
2225                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire visage&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire visage&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;protection solaire visage::https://www.garnier.fr/tous-les-produits-solaire/creme-solaire-visage&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;protection solaire visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/creme-solaire-visage&quot;,&quot;breadCrumb&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire visage&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2226                        Protection Solaire Visage
2227                    </a>
2228                </div>
2229    </li>
2230
2231    <li class="levethreeList">
2232                <div class="mainSub__link levelFourMainMenu ">
2233                    <a href="https://www.garnier.fr/tous-les-produits-solaire/creme-solaire-enfant-bebe"
2234                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire enfants&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire enfants&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;protection solaire enfants::https://www.garnier.fr/tous-les-produits-solaire/creme-solaire-enfant-bebe&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;protection solaire enfants&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/creme-solaire-enfant-bebe&quot;,&quot;breadCrumb&quot;:&quot;solaire::type d&#39;usage solaire::protection solaire enfants&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2235                        Protection Solaire Enfants
2236                    </a>
2237                </div>
2238    </li>
2239
2240    <li class="levethreeList">
2241                <div class="mainSub__link levelFourMainMenu ">
2242                    <a href="https://www.garnier.fr/tous-les-produits-solaire/apres-soleil"
2243                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::type d&#39;usage solaire::apr&#232;s-soleil&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::type d&#39;usage solaire::apr&#232;s-soleil&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;apr&#232;s-soleil::https://www.garnier.fr/tous-les-produits-solaire/apres-soleil&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;apr&#232;s-soleil&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/apres-soleil&quot;,&quot;breadCrumb&quot;:&quot;solaire::type d&#39;usage solaire::apr&#232;s-soleil&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2244                        Apr&#232;s-Soleil
2245                    </a>
2246                </div>
2247    </li>
2248
2249    <li class="levethreeList">
2250                <div class="mainSub__link levelFourMainMenu ">
2251                    <a href="https://www.garnier.fr/tous-les-produits-solaire/autobronzants"
2252                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::type d&#39;usage solaire::autobronzant&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::type d&#39;usage solaire::autobronzant&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;autobronzant::https://www.garnier.fr/tous-les-produits-solaire/autobronzants&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;autobronzant&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/autobronzants&quot;,&quot;breadCrumb&quot;:&quot;solaire::type d&#39;usage solaire::autobronzant&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2253                        Autobronzant
2254                    </a>
2255                </div>
2256    </li>
2257                        </ul>
2258
2259
2260                </div>
2261
2262
2263            </div>
2264    </li>
2265
2266    <li class="levelTwoMenu" :class="[1 === props.slotProps.clickActiveLevelTwo ? 'isActiveLevelTwo':'']">
2267        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelTwo(1)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nos gammes::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nos gammes&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
2268            <!-- conditional for new badge -->
2269            <span class="list_title">
2270                NOS GAMMES
2271            </span>
2272
2273
2274
2275
2276
2277<div class="arrowContainer">
2278    <span class="menu-rig-arrow">
2279        <div class="svg-container">
2280            <svg width="24" height="24"
2281                 viewBox="0 0 24 24" fill="none"
2282                 xmlns="http://www.w3.org/2000/svg">
2283                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2284                      stroke="#000" stroke-width="1.6"
2285                      stroke-linecap="square"></path>
2286            </svg>
2287        </div>
2288    </span>
2289    <span class="menu-opened-arrow">
2290        <div class="svg-container">
2291            <svg width="24" height="24"
2292                 viewBox="0 0 24 24" fill="none"
2293                 xmlns="http://www.w3.org/2000/svg">
2294                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
2295                      stroke="#000" stroke-width="2"
2296                      stroke-linecap="square"></path>
2297            </svg>
2298        </div>
2299    </span>
2300</div>
2301
2302        </button>
2303
2304            <div class="level-three__wrapper" id="level-three__wrapper_1">
2305                <div class="level-three__topper">
2306                    <button class="level-two__topper-back" tabindex="0" aria-label="Back to previous menu" v-on:click="props.slotProps.backtoLTwoMenu()" v-on:keydown.enter="props.slotProps.backtoLTwoMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLTwoMenu()">
2307                        <div class="svg-container">
2308                            <svg width="24" height="24"
2309                                 viewBox="0 0 24 24" fill="none"
2310                                 xmlns="http://www.w3.org/2000/svg">
2311                                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2312                                      stroke="#000" stroke-width="1.6"
2313                                      stroke-linecap="square" />
2314                            </svg>
2315                        </div>
2316                    </button>
2317                    <div class="level-two__topper_title">
2318                        NOS GAMMES
2319                    </div>
2320                </div>
2321
2322
2323                <div class="level-three__wrapper_scrollerable">
2324                        <ul>
2325
2326    <li class="levethreeList">
2327                <div class="mainSub__link levelFourMainMenu ">
2328                    <a href="https://www.garnier.fr/super-uv"
2329                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::nos gammes::super uv &quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::super uv &quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;super uv ::https://www.garnier.fr/super-uv&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;super uv &quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/super-uv&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::super uv &quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2330                        Super UV 
2331                    </a>
2332                </div>
2333    </li>
2334
2335    <li class="levethreeList">
2336                <div class="mainSub__link levelFourMainMenu ">
2337                    <a href="https://www.garnier.fr/sensitive-expert-plus-adultes"
2338                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::nos gammes::senstive expert +&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::senstive expert +&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;senstive expert +::https://www.garnier.fr/sensitive-expert-plus-adultes&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;senstive expert +&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/sensitive-expert-plus-adultes&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::senstive expert +&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2339                        Senstive Expert +
2340                    </a>
2341                </div>
2342    </li>
2343
2344    <li class="levethreeList">
2345                <div class="mainSub__link levelFourMainMenu ">
2346                    <a href="https://www.garnier.fr/sensitive-expert-plus-enfants"
2347                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;
2347solaire::nos gammes::senstive expert + enfants&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::senstive expert + enfants&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;senstive expert + enfants::https://www.garnier.fr/sensitive-expert-plus-enfants&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;senstive expert + enfants&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/sensitive-expert-plus-enfants&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::senstive expert + enfants&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2348                        Senstive Expert + Enfants
2349                    </a>
2350                </div>
2351    </li>
2352
2353    <li class="levethreeList">
2354                <div class="mainSub__link levelFourMainMenu ">
2355                    <a href="https://www.garnier.fr/ideal-bronze"
2356                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::nos gammes::ideal bronze&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::ideal bronze&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;ideal bronze::https://www.garnier.fr/ideal-bronze&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;ideal bronze&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/ideal-bronze&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::ideal bronze&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2357                        Ideal Bronze
2358                    </a>
2359                </div>
2360    </li>
2361
2362    <li class="levethreeList">
2363                <div class="mainSub__link levelFourMainMenu ">
2364                    <a href="https://www.garnier.fr/natural-bronzer"
2365                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::nos gammes::autobronzant&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::autobronzant&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;autobronzant::https://www.garnier.fr/natural-bronzer&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;autobronzant&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/natural-bronzer&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::autobronzant&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2366                        Autobronzant
2367                    </a>
2368                </div>
2369    </li>
2370
2371    <li class="levethreeList">
2372                <div class="mainSub__link levelFourMainMenu ">
2373                    <a href="https://www.garnier.fr/tous-les-produits-solaire/apres-soleil"
2374                       target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::nos gammes::apr&#232;s-soleil&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::apr&#232;s-soleil&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;apr&#232;s-soleil::https://www.garnier.fr/tous-les-produits-solaire/apres-soleil&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;apr&#232;s-soleil&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/tous-les-produits-solaire/apres-soleil&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::apr&#232;s-soleil&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2375                        Apr&#232;s-Soleil
2376                    </a>
2377                </div>
2378    </li>
2379                        </ul>
2380
2381
2382                        <div class="mainSub__link">
2383                            <a href="https://www.garnier.fr/solaires" target="" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir nos gammes::https://www.garnier.fr/solaires&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir nos gammes&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/solaires&quot;,&quot;breadCrumb&quot;:&quot;solaire::nos gammes::d&#233;couvrir nos gammes&quot;,&quot;step&quot;:&quot;3/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2384                                D&#201;COUVRIR NOS GAMMES
2385                            </a>
2386                        </div>
2387                </div>
2388
2389
2390            </div>
2391    </li>
2392                        </ul>
2393
2394                            <div>
2395                                <span class="mainShort__link">
2396                                    <a href='https://www.garnier.fr/solaires' target=""
2397                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;solaire::voir tous les produits solaires&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;solaire::voir tous les produits solaires&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;voir tous les produits solaires::https://www.garnier.fr/solaires&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;voir tous les produits solaires&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/solaires&quot;,&quot;breadCrumb&quot;:&quot;solaire::voir tous les produits solaires&quot;,&quot;step&quot;:&quot;2/3&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2398                                        Voir Tous Les Produits Solaires
2399                                    </a>
2400                                </span>
2401                            </div>
2402
2403                </div>
2404
2405
2406            </div>
2407        </div>
2408    </li>
2409
2410
2411    <li class="levelOneMenu" :class="[4 === props.slotProps.clickActiveLevelOne ? 'isActiveLevelone':'']">
2412        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelOne(4)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;services &amp; diagnostics::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;services &amp; diagnostics&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;services &amp; diagnostics&quot;,&quot;step&quot;:&quot;1/2&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
2413            <span class="list_title">
2414                SERVICES &amp; DIAGNOSTICS
2415            </span>
2416            
2417
2418
2419<div class="arrowContainer">
2420    <span class="menu-rig-arrow">
2421        <div class="svg-container">
2422            <svg width="24" height="24"
2423                 viewBox="0 0 24 24" fill="none"
2424                 xmlns="http://www.w3.org/2000/svg">
2425                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2426                      stroke="#000" stroke-width="1.6"
2427                      stroke-linecap="square"></path>
2428            </svg>
2429        </div>
2430    </span>
2431    <span class="menu-opened-arrow">
2432        <div class="svg-container">
2433            <svg width="24" height="24"
2434                 viewBox="0 0 24 24" fill="none"
2435                 xmlns="http://www.w3.org/2000/svg">
2436                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
2437                      stroke="#000" stroke-width="2"
2438                      stroke-linecap="square"></path>
2439            </svg>
2440        </div>
2441    </span>
2442</div>
2443
2444        </button>
2445
2446        <div class="level-two__wrapper" id="level-two__wrapper_4">
2447            <div class="level-two__topper">
2448                <button class="level-two__topper-back" tabindex="0" aria-label="Back to main menu" v-on:click="props.slotProps.backtoLOneMenu()" v-on:keydown.enter="props.slotProps.backtoLOneMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLOneMenu()">
2449                    <div class="svg-container">
2450                        <svg width="24" height="24" viewBox="0 0 24 24"
2451                             fill="none" xmlns="http://www.w3.org/2000/svg">
2452                            <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2453                                  stroke="#000" stroke-width="1.6"
2454                                  stroke-linecap="square" />
2455                        </svg>
2456                    </div>
2457                </button>
2458                <div class="level-two__topper_title">
2459                    SERVICES &amp; DIAGNOSTICS
2460                </div>
2461            </div>
2462            <div class="level-two__wrapper-scrollable">
2463                <div class="level-two-menu">
2464
2465                            <div>
2466                                <span class="mainShort__link">
2467                                    <a href='https://www.garnier.fr/outils-et-services/test-virtuel' target=""
2468                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;services &amp; diagnostics::essai virtuel coloration&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;services &amp; diagnostics::essai virtuel coloration&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;essai virtuel coloration::https://www.garnier.fr/outils-et-services/test-virtuel&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;essai virtuel coloration&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/outils-et-services/test-virtuel&quot;,&quot;breadCrumb&quot;:&quot;services &amp; diagnostics::essai virtuel coloration&quot;,&quot;step&quot;:&quot;2/2&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2469                                        Essai Virtuel Coloration
2470                                    </a>
2471                                </span>
2472                            </div>
2473                            <div>
2474                                <span class="mainShort__link">
2475                                    <a href='https://www.garnier.fr/skin-coach' target=""
2476                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;services &amp; diagnostics::diagnostic de peau&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;services &amp; diagnostics::diagnostic de peau&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;diagnostic de peau::https://www.garnier.fr/skin-coach&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;diagnostic de peau&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/skin-coach&quot;,&quot;breadCrumb&quot;:&quot;services &amp; diagnostics::diagnostic de peau&quot;,&quot;step&quot;:&quot;2/2&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2477                                        Diagnostic de Peau
2478                                    </a>
2479                                </span>
2480                            </div>
2481
2482                </div>
2483
2484
2485            </div>
2486        </div>
2487    </li>
2488
2489
2490    <li class="levelOneMenu" :class="[5 === props.slotProps.clickActiveLevelOne ? 'isActiveLevelone':'']">
2491        <button class="levelList__Button  menu-tag" v-on:click="props.slotProps.triggermenuLevelOne(5)" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;nos engagements::undefined&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;nos engagements&quot;,&quot;link_url&quot;:&quot;undefined&quot;,&quot;breadCrumb&quot;:&quot;nos engagements&quot;,&quot;step&quot;:&quot;1/2&quot;,&quot;event_detail&quot;:&quot;regular&quot;}">
2492            <span class="list_title">
2493                NOS ENGAGEMENTS
2494            </span>
2495            
2496
2497
2498<div class="arrowContainer">
2499    <span class="menu-rig-arrow">
2500        <div class="svg-container">
2501            <svg width="24" height="24"
2502                 viewBox="0 0 24 24" fill="none"
2503                 xmlns="http://www.w3.org/2000/svg">
2504                <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2505                      stroke="#000" stroke-width="1.6"
2506                      stroke-linecap="square"></path>
2507            </svg>
2508        </div>
2509    </span>
2510    <span class="menu-opened-arrow">
2511        <div class="svg-container">
2512            <svg width="24" height="24"
2513                 viewBox="0 0 24 24" fill="none"
2514                 xmlns="http://www.w3.org/2000/svg">
2515                <path d="M7 7L17 17M17 17L17 7M17 17L7 17"
2516                      stroke="#000" stroke-width="2"
2517                      stroke-linecap="square"></path>
2518            </svg>
2519        </div>
2520    </span>
2521</div>
2522
2523        </button>
2524
2525        <div class="level-two__wrapper" id="level-two__wrapper_5">
2526            <div class="level-two__topper">
2527                <button class="level-two__topper-back" tabindex="0" aria-label="Back to main menu" v-on:click="props.slotProps.backtoLOneMenu()" v-on:keydown.enter="props.slotProps.backtoLOneMenu()" v-on:keydown.space.prevent="props.slotProps.backtoLOneMenu()">
2528                    <div class="svg-container">
2529                        <svg width="24" height="24" viewBox="0 0 24 24"
2530                             fill="none" xmlns="http://www.w3.org/2000/svg">
2531                            <path d="M10.0697 6.34315L15.7266 12L10.0697 17.6569"
2532                                  stroke="#000" stroke-width="1.6"
2533                                  stroke-linecap="square" />
2534                        </svg>
2535                    </div>
2536                </button>
2537                <div class="level-two__topper_title">
2538                    NOS ENGAGEMENTS
2539                </div>
2540            </div>
2541            <div class="level-two__wrapper-scrollable">
2542                <div class="level-two-menu">
2543
2544                            <div>
2545                                <span class="mainShort__link">
2546                                    <a href='https://www.garnier.fr/ensemble-prenons-soin-des-forets-francaises' target=""
2547                                       v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::burger menu&quot;,&quot;eventLabel&quot;:&quot;nos engagements::garnier x wwf france&quot;,&quot;click_area&quot;:&quot;burger menu&quot;,&quot;breadcrumb&quot;:&quot;nos engagements::garnier x wwf france&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" data-menuitem="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;module_progression&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;[MenuPageCategory]&quot;,&quot;eventLabel&quot;:&quot;garnier x wwf france::https://www.garnier.fr/ensemble-prenons-soin-des-forets-francaises&quot;,&quot;eventAction&quot;:&quot;module_progression&quot;,&quot;module_name&quot;:&quot;main menu navigation&quot;,&quot;cta_name&quot;:&quot;garnier x wwf france&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/ensemble-prenons-soin-des-forets-francaises&quot;,&quot;breadCrumb&quot;:&quot;nos engagements::garnier x wwf france&quot;,&quot;step&quot;:&quot;2/2&quot;,&quot;event_detail&quot;:&quot;regular&quot;}" class="menu-tag">
2548                                        Garnier x WWF France
2549                                    </a>
2550                                </span>
2551                            </div>
2552
2553                </div>
2554
2555
2556            </div>
2557        </div>
2558    </li>
2559
2560                </ul>
2561            </template>
2562            <overlay slot="sidebarOverlay"></overlay>
2563            <template slot="exploreMenu" slot-scope="props">
2564                <div class="explore-navi">
2565                            <div class="explore-navi-title">Explorer</div>
2566    <ul class="footer-navigation">
2567    <li class="levelOneMenu">
2568        <a href="https://www.garnier.fr/au-coeur-de-l-ingredient"
2569           target=""
2570           class="menu-tag "
2571           v-tag="{}"
2572           data-menuitem="{}">
2573            Au coeur de l&#39;ingr&#233;dient
2574        </a>
2575    </li>
2576    <li class="levelOneMenu">
2577        <a href="https://www.garnier.fr/garnier-x-gisele-bundchen"
2578           target=""
2579           class="menu-tag "
2580           v-tag="{}"
2581           data-menuitem="{}">
2582            Garnier x Gisele B&#252;ndchen
2583        </a>
2584    </li>
2585    <li class="levelOneMenu">
2586        <a href="https://www.garnier.fr/magazine"
2587           target=""
2588           class="menu-tag "
2589           v-tag="{}"
2590           data-menuitem="{}">
2591            Notre magazine
2592        </a>
2593    </li>
2594    </ul>
2595
2596                </div>
2597            </template>
2598            <template slot="languageSelector">
2599                
2600            </template>
2601        </four-level-hamburger-menu>
2602    </nav>
2603                    
2604
2605        <component is="style">
2606
2607            :root {
2608            --active-color: #ffffff;
2609            --hover-color: #005c43;
2610            --text-color: #21362C;
2611            --gradient-color: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, #fff 100%);;
2612            --nav-color: #f3f2ef;
2613            }
2614
2615        </component>
2616            <div class="new-header__logo-wrapper"><a href="/" aria-label="Garnier (aller &#224; l&#39;accueil)" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;logo_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select&quot;,&quot;eventLabel&quot;:&quot;logo&quot;}">
2617                <img src="/-/media/project/loreal/brand-sites/garnier/emea/garnier-logo-new-menu.png?rev=f528f7b9934847be8e598a1e7f6e395a" alt="Garnier" id="headerlogoimagesrc" class="new-header__logo-image" width="1298" height="595">
2618                    </a></div>
2619
2620                    <ul class="new-header__icons-wrapper">
2621
2622                        
2623
2624                        
2625
2626                        
2627<search inline-template :request-parameters='{&quot;filtersettingsitemid&quot;:&quot;1c5e65f2-9950-4fb9-876b-018894a99fe8&quot;,&quot;filterpageitemid&quot;:&quot;b748db56-9f59-4b5f-a961-4754a5d1af77&quot;,&quot;searchwithsuggestions&quot;:true,&quot;formactionlink&quot;:&quot;/search-page/search&quot;}'>
2628    <li class="new-header__icon-item search">
2629        <div class="click-overlay" @click="overlayClick" v-if="isActive"></div>
2630        <search-input
2631            form-action="/search-page/search"
2632            placeholder="Rechercher"
2633            title="Search (suggested results are available after the field when at least 3 characters are typed)"
2634            >
2635        </search-input>
2636        <suggested-search
2637                          :aria-labels="{
2638                                'closeButton': 'Close the suggested search results subpanel',
2639                                'viewAll': 'View all search results'
2640                            }"
2641                          loading-text='Chargement…'
2642                          view-all-text='View all'
2643                          no-results-text='Aucune produit correspondant &#224; votre recherche. Veuillez r&#233;essayer avec une autre orthographe.'>
2644        </suggested-search>
2645    </li>
2646</search>
2647
2648
2649                    </ul>
2650                </div>
2651            </div>
2652        </newheadernavigation>
2653    </header>
2654    
2655</div>
2656
2657
2658<div data-qr-page-section="show-on-qr" hidden>
2659    <go-backbutton btn-text='Retour' back-url="" analytics-data='{"event":"uaevent","event_name":"body_button_click","event_category":"homepage","event_action":"select::retour","event_label":"retour::[destination_url]","cta_name":"retour","link_url":"[destination_url]","module_name":"retour"}'>
2660    </go-backbutton>
2661</div>
2662            </div>
2663            <!-- /#header -->
2664            <!-- #content -->
2665            <main role="main" class="main clearfix">
2666                <div id="content">
2667                    
2668
2669
2670
2671
2672                    <div id="search-content">
2673                        
2674                        
2675
2676                        
2677  <skindr-embed script-url="https://dsf-cdn.loreal.io/dropper.js" :skindr-tagging="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;site_load_service&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;analysis::skindr::skin&quot;,&quot;eventAction&quot;:&quot;homepage::select::skindr&quot;,&quot;eventLabel&quot;:&quot;load::skindr&quot;,&quot;service_name&quot;:&quot;skindr&quot;,&quot;service_category&quot;:&quot;diagnose&quot;,&quot;cta_name&quot;:&quot;[Token3]&quot;}">
2678      <template>
2679        <dsf-app tenant="lorealsa" application="skindrv2" customer="garnier" country="fra" environment="production"
2680          touchpoint="web" type="std" loadingbg="" loadingmsg=""
2681          switch_ecom="true" switch_autostart="false" csrftoken="">
2682        </dsf-app>
2683      </template>
2684  </skindr-embed>
2685
2686
2687
2688
2689
2690<hosted-video :initial-value="[{&quot;Title&quot;:&quot;Garnier x Gisele - The Signature&quot;,&quot;TitleLength&quot;:32,&quot;SubTitle&quot;:&quot;D&#233;couvrez notre nouvelle Ambassadrice de Marque&quot;,&quot;SubTitleLength&quot;:47,&quot;Video&quot;:&quot;&quot;,&quot;MobileVideo&quot;:&quot;&quot;,&quot;DesktopImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/master/dmi/ambassador2026/carrousel-garnier-website2.jpg?rev=7fe7c1e5c4b141099d8797e668450c04&amp;
2690cx=0.26&amp;cy=0.28&amp;cw=1920&amp;ch=720&amp;hash=244DA8426BDF3B2A7AFEA5894CD9038B&quot;,&quot;MobileImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/master/dmi/ambassador2026/carrousel-garnier-website2.jpg?rev=7fe7c1e5c4b141099d8797e668450c04&amp;cx=0.26&amp;cy=0.28&amp;cw=414&amp;ch=450&amp;hash=0CACCB566F5E2F97C221D3177769289C&quot;,&quot;TabletImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/master/dmi/ambassador2026/carrousel-garnier-website2.jpg?rev=7fe7c1e5c4b141099d8797e668450c04&amp;cx=0.26&amp;cy=0.28&amp;cw=800&amp;ch=288&amp;hash=B0832812388D90FF0245D8AF0D1B6C5B&quot;,&quot;IsDesktopImage&quot;:&quot;1&quot;,&quot;IsMobileImage&quot;:&quot;1&quot;,&quot;CalltoActionUrl&quot;:&quot;/garnier-x-gisele-bundchen&quot;,&quot;CalltoActionText&quot;:&quot;En savoir plus&quot;,&quot;BackgroundColor&quot;:&quot;#ffffff&quot;,&quot;TitleColor&quot;:&quot;#000000&quot;,&quot;Alt&quot;:&quot;&quot;,&quot;CtaTagging&quot;:{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;slider_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventAction&quot;:&quot;select::slider navigation&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventLabel&quot;:&quot;en savoir plus::https://www.garnier.fr/garnier-x-gisele-bundchen&quot;,&quot;cta_name&quot;:&quot;en savoir plus&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/garnier-x-gisele-bundchen&quot;,&quot;module_name&quot;:&quot;garnier x gisele - the signature&quot;}},{&quot;Title&quot;:&quot;NOUVELLE R&#201;VOLUTION CR&#200;ME SORBET !&quot;,&quot;TitleLength&quot;:34,&quot;SubTitle&quot;:&quot;LA CR&#200;ME QUI VA VOUS FAIRE FONDRE ! Texture 6x plus l&#233;g&#232;re*, hydrate** et booste l&#39;&#233;clat*** pendant 48H.&quot;,&quot;SubTitleLength&quot;:104,&quot;Video&quot;:&quot;&quot;,&quot;MobileVideo&quot;:&quot;&quot;,&quot;DesktopImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/image/1.jpg?rev=48ffd85c16d3493298993f184491942a&amp;cx=0.16&amp;cy=0.51&amp;cw=1920&amp;ch=720&amp;hash=A85F5A2EE719FE5AB73D9C773E79D1F9&quot;,&quot;MobileImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/image/1.jpg?rev=48ffd85c16d3493298993f184491942a&amp;cx=0.16&amp;cy=0.51&amp;cw=414&amp;ch=450&amp;hash=148AB6BCE0792EECCE9998967FF7F799&quot;,&quot;TabletImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/image/1.jpg?rev=48ffd85c16d3493298993f184491942a&amp;cx=0.16&amp;cy=0.51&amp;cw=800&amp;ch=288&amp;hash=60DD3D26EC4AF1194334C33C5A4A9C5F&quot;,&quot;IsDesktopImage&quot;:&quot;1&quot;,&quot;IsMobileImage&quot;:&quot;1&quot;,&quot;CalltoActionUrl&quot;:&quot;/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;CalltoActionText&quot;:&quot;D&#201;COUVRIR&quot;,&quot;BackgroundColor&quot;:&quot;#F5E5A0&quot;,&quot;TitleColor&quot;:&quot;#21362C&quot;,&quot;Alt&quot;:&quot;&quot;,&quot;CtaTagging&quot;:{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;slider_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventAction&quot;:&quot;select::slider navigation&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/creme-sorbet&quot;,&quot;module_name&quot;:&quot;nouvelle r&#233;volution cr&#232;me sorbet !&quot;}},{&quot;Title&quot;:&quot;NOUVEAU: K&#201;RATINE LISS &amp; DIAMOND LISS !&quot;,&quot;TitleLength&quot;:39,&quot;SubTitle&quot;:&quot;La routine 3 produits pour des cheveux\r\nparfaitement lisses et brillants durablement. &quot;,&quot;SubTitleLength&quot;:86,&quot;Video&quot;:&quot;&quot;,&quot;MobileVideo&quot;:&quot;&quot;,&quot;DesktopImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/methode-boucles---naza/fr28598-maj-methode-boucles-statics_liss-1920x720-1.jpg?rev=9a5e38b46cc249f2ab69f5fd9053981f&amp;
2690cx=0.6&amp;cy=0.44&amp;cw=1920&amp;ch=720&amp;hash=819C5C4CD5EEF94DAB044936DCD09C4B&quot;,&quot;MobileImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/methode-boucles---naza/fr28598-maj-methode-boucles-statics_liss-1920x720-1.jpg?rev=9a5e38b46cc249f2ab69f5fd9053981f&amp;cx=0.6&amp;cy=0.44&amp;cw=414&amp;ch=450&amp;hash=163B4FB6FB431FC82383A739227A6D06&quot;,&quot;TabletImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/methode-boucles---naza/fr28598-maj-methode-boucles-statics_liss-1920x720-1.jpg?rev=9a5e38b46cc249f2ab69f5fd9053981f&amp;cx=0.6&amp;cy=0.44&amp;cw=800&amp;ch=288&amp;hash=5B364026770C19A4CF481392F7E748DF&quot;,&quot;IsDesktopImage&quot;:&quot;1&quot;,&quot;IsMobileImage&quot;:&quot;1&quot;,&quot;CalltoActionUrl&quot;:&quot;/nos-marques/cheveux/fructis/gamme-keratineliss&quot;,&quot;CalltoActionText&quot;:&quot;D&#233;couvrir&quot;,&quot;BackgroundColor&quot;:&quot;#F19D49&quot;,&quot;TitleColor&quot;:&quot;#21362C&quot;,&quot;Alt&quot;:&quot;FR28598 MAJ METHODE BOUCLES STATICS_LISS 1920X720&quot;,&quot;CtaTagging&quot;:{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;slider_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventAction&quot;:&quot;select::slider navigation&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir::https://www.garnier.fr/nos-marques/cheveux/fructis/gamme-keratineliss&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/cheveux/fructis/gamme-keratineliss&quot;,&quot;module_name&quot;:&quot;nouveau: k&#233;ratine liss &amp; diamond liss !&quot;}},{&quot;Title&quot;:&quot;LA NOUVELLE G&#201;N&#201;RATION DE BB CR&#200;ME !&quot;,&quot;TitleLength&quot;:36,&quot;SubTitle&quot;:&quot;TON SOIN QUI FAIT TON TEINT ! La WonderTint unifie, prot&#232;ge* (SPF50+) et booste l&#39;&#233;clat** de ton visage.&quot;,&quot;SubTitleLength&quot;:104,&quot;Video&quot;:&quot;&quot;,&quot;MobileVideo&quot;:&quot;&quot;,&quot;DesktopImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/image/3.jpg?rev=2d89744d424f4ddd9c47a48a3b0cb365&amp;cx=0.18&amp;cy=0.47&amp;cw=1920&amp;ch=720&amp;hash=5217D17944D605F00DA70243CE3FB757&quot;,&quot;MobileImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/image/3.jpg?rev=2d89744d424f4ddd9c47a48a3b0cb365&amp;cx=0.18&amp;cy=0.47&amp;cw=414&amp;ch=450&amp;hash=13C14A30A8DC67D246A762E8F7A90D5C&quot;,&quot;TabletImage&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/hosted-video-carousel/image/3.jpg?rev=2d89744d424f4ddd9c47a48a3b0cb365&amp;cx=0.18&amp;cy=0.47&amp;cw=800&amp;ch=288&amp;hash=DCB6FA2AD5E09DE0710A778F39885811&quot;,&quot;IsDesktopImage&quot;:&quot;1&quot;,&quot;IsMobileImage&quot;:&quot;1&quot;,&quot;CalltoActionUrl&quot;:&quot;/nos-marques/soin-du-visage/vitamine-c/wondertint-medium&quot;,&quot;CalltoActionText&quot;:&quot;D&#201;COUVRIR&quot;,&quot;BackgroundColor&quot;:&quot;#F19D49&quot;,&quot;TitleColor&quot;:&quot;#21362C&quot;,&quot;Alt&quot;:&quot;&quot;,&quot;CtaTagging&quot;:{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;slider_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventAction&quot;:&quot;select::slider navigation&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrir::https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/wondertint-medium&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrir&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/nos-marques/soin-du-visage/vitamine-c/wondertint-medium&quot;,&quot;module_name&quot;:&quot;la nouvelle g&#233;n&#233;ration de bb cr&#232;me !&quot;}}]" :aria-lable-texts='{"play":"play","pause":"pause","previousslide":"Slide précédente","nextslide":"Slide suivante","slide":"Slide","trueval":"true","falseval":"false"}' :timer1="0" :timer2="4">
2691
2692
2693</hosted-video>
2694
2695
2696
2697
2698
2699<service-module :initial-data="{&quot;Title&quot;:&quot;NOS OUTILS ET SERVICES&quot;,&quot;Services&quot;:[{&quot;Title&quot;:&quot;Skin Coach AI&quot;,&quot;Description&quot;:&quot;Prenez un selfie pour scanner votre visage et obtenez une routine personnalis&#233;e en fonction de votre type de peau et de vos besoins&quot;,&quot;MediaSrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/service-module/newhomepageservicespushpng.mp4?rev=3070b0d9e1ff44d79d70c14d1de1121b&quot;,&quot;MediaTitle&quot;:&quot;NEWHomePageServicesPushpng&quot;,&quot;CtaLink&quot;:{&quot;Anchor&quot;:&quot;&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;skin coach&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;&quot;,&quot;Url&quot;:&quot;/skin-coach&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;9ceb4461-4a4b-4003-9f06-99f9b2e62b9d&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;IsVideo&quot;:true,&quot;TaggingData&quot;:{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;site_load_service&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;::modiface::&quot;,&quot;eventAction&quot;:&quot;homepage::select::&quot;,&quot;eventLabel&quot;:&quot;load::&quot;,&quot;service_name&quot;:&quot;&quot;,&quot;service_category&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;skin coach&quot;,&quot;product_info&quot;:&quot;none&quot;}},{&quot;Title&quot;:&quot;Test Virtuel&quot;,&quot;Description&quot;:&quot;Essayer une nouvelle teinte n&#39;a jamais &#233;t&#233; aussi simple ? Amusez-vous &#224; changer de couleur de cheveux gr&#226;ce &#224; notre outil d&#39;essai virtuel.&quot;,&quot;MediaSrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/service-module/servicemodule_vto-animated-banner_392x490.mp4?rev=1b00a9660a104cf0afea78e8299895c8&quot;,&quot;MediaTitle&quot;:&quot;ServiceModule_vto-animated-banner_392x490&quot;,&quot;CtaLink&quot;:{&quot;Anchor&quot;:&quot;&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;Test Virtuel&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;&quot;,&quot;Url&quot;:&quot;/outils-et-services/test-virtuel&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;7133bb99-4bf2-44af-ae58-afb12e2b96da&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;IsVideo&quot;:true,&quot;TaggingData&quot;:{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;site_load_service&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;::modiface::&quot;,&quot;eventAction&quot;:&quot;homepage::select::&quot;,&quot;eventLabel&quot;:&quot;load::&quot;,&quot;service_name&quot;:&quot;&quot;,&quot;service_category&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;test virtuel&quot;,&quot;product_info&quot;:&quot;none&quot;}}],&quot;AllServicesSrc&quot;:&quot;&quot;,&quot;AllServicesText&quot;:&quot;&quot;,&quot;FullGreenCTA&quot;:false,&quot;FullCTA&quot;:false,&quot;TaggingData&quot;:null}" :navigation-label='{"carouselbuttonnext":"Slide suivante","carouselbuttonprev":"Slide précédente"}'>
2700</service-module>
2701
2702
2703
2704    <brand-cube :initial-value="{&quot;Datasource&quot;:{&quot;brandcubetitle&quot;:&quot;Nos cat&#233;gories&quot;,&quot;aspectratio&quot;:&quot;1by1&quot;,&quot;defaultcubecount&quot;:&quot;12&quot;,&quot;isTitle&quot;:true},&quot;Items&quot;:[{&quot;imagetitle&quot;:&quot;VISAGE&quot;,&quot;imagesrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/brandcube/categories/visage.jpg?rev=e79ea2eb3eff4e7ea1c8eed95bff899a&quot;,&quot;link&quot;:{&quot;Anchor&quot;:&quot;Soins du Visage&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;Soins du Visage&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;Soins du Visage&quot;,&quot;Url&quot;:&quot;/soins-du-visage&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;
2704da93de67-cb1c-40bf-b4b8-63d6d177bb09&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;taggingdata&quot;:&quot;{\&quot;event\&quot;:\&quot;uaevent\&quot;,\&quot;event_name\&quot;:\&quot;body_button_click\&quot;,\&quot;ecommerce\&quot;:\&quot;undefined\&quot;,\&quot;eventCategory\&quot;:\&quot;homepage\&quot;,\&quot;eventAction\&quot;:\&quot;select::nos cat&#233;gories\&quot;,\&quot;eventLabel\&quot;:\&quot;soins du visage::https://www.garnier.fr/soins-du-visage\&quot;,\&quot;cta_name\&quot;:\&quot;soins du visage\&quot;,\&quot;link_url\&quot;:\&quot;https://www.garnier.fr/soins-du-visage\&quot;,\&quot;module_name\&quot;:\&quot;nos cat&#233;gories\&quot;}&quot;},{&quot;imagetitle&quot;:&quot;CORPS&quot;,&quot;imagesrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/brandcube/categories/corps.jpg?rev=bd7580ddea164497ae4674d7eb817630&quot;,&quot;link&quot;:{&quot;Anchor&quot;:&quot;Corps&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;Corps&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;Corps&quot;,&quot;Url&quot;:&quot;/soins-du-corps&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;eb449ee0-be23-4bc2-adc4-08498b5f1496&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;taggingdata&quot;:&quot;{\&quot;event\&quot;:\&quot;uaevent\&quot;,\&quot;event_name\&quot;:\&quot;body_button_click\&quot;,\&quot;ecommerce\&quot;:\&quot;undefined\&quot;,\&quot;eventCategory\&quot;:\&quot;homepage\&quot;,\&quot;eventAction\&quot;:\&quot;select::nos cat&#233;gories\&quot;,\&quot;eventLabel\&quot;:\&quot;corps::https://www.garnier.fr/soins-du-corps\&quot;,\&quot;cta_name\&quot;:\&quot;corps\&quot;,\&quot;link_url\&quot;:\&quot;https://www.garnier.fr/soins-du-corps\&quot;,\&quot;module_name\&quot;:\&quot;nos cat&#233;gories\&quot;}&quot;},{&quot;imagetitle&quot;:&quot;SOLAIRES&quot;,&quot;imagesrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/brandcube/categories/solaires.jpg?rev=1deb5972f80644f0bafe94a4b94d56bd&quot;,&quot;link&quot;:{&quot;Anchor&quot;:&quot;Solaires&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;Solaires&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;Solaires&quot;,&quot;Url&quot;:&quot;/solaires&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;5b0e137d-3997-44e7-9d0e-0d7160bff63a&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;taggingdata&quot;:&quot;{\&quot;event\&quot;:\&quot;uaevent\&quot;,\&quot;event_name\&quot;:\&quot;body_button_click\&quot;,\&quot;ecommerce\&quot;:\&quot;undefined\&quot;,\&quot;eventCategory\&quot;:\&quot;homepage\&quot;,\&quot;eventAction\&quot;:\&quot;select::nos cat&#233;gories\&quot;,\&quot;eventLabel\&quot;:\&quot;solaires::https://www.garnier.fr/solaires\&quot;,\&quot;cta_name\&quot;:\&quot;solaires\&quot;,\&quot;link_url\&quot;:\&quot;https://www.garnier.fr/solaires\&quot;,\&quot;module_name\&quot;:\&quot;nos cat&#233;gories\&quot;}&quot;},{&quot;imagetitle&quot;:&quot;&quot;,&quot;imagesrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/brandcube/categories/methodeboucle-2.png?rev=8f229debfcfc43859cd9500d0318dc24&quot;,&quot;link&quot;:{&quot;Anchor&quot;:&quot;Cheveux&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;Cheveux&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;Cheveux&quot;,&quot;Url&quot;:&quot;/soins-des-cheveux&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;aa886533-16c5-4a87-893c-8097d8970c38&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;taggingdata&quot;:&quot;{\&quot;event\&quot;:\&quot;uaevent\&quot;,\&quot;event_name\&quot;:\&quot;body_button_click\&quot;,\&quot;ecommerce\&quot;:\&quot;undefined\&quot;,\&quot;eventCategory\&quot;:\&quot;homepage\&quot;,\&quot;eventAction\&quot;:\&quot;select::nos cat&#233;gories\&quot;,\&quot;eventLabel\&quot;:\&quot;cheveux::https://www.garnier.fr/soins-des-cheveux\&quot;,\&quot;cta_name\&quot;:\&quot;cheveux\&quot;,\&quot;link_url\&quot;:\&quot;https://www.garnier.fr/soins-des-cheveux\&quot;,\&quot;module_name\&quot;:\&quot;nos cat&#233;gories\&quot;}&quot;},{&quot;imagetitle&quot;:&quot;&quot;,&quot;imagesrc&quot;:&quot;/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/home/brandcube/categories/creaitech_2026-09-04_17-15-15_06a9ae08-3c7f-7755-8000-c774be5499a5.png?rev=736adb28b8a14ddf93477b0e5d689747&quot;,&quot;link&quot;:{&quot;Anchor&quot;:&quot;Colorations&quot;,&quot;Class&quot;:&quot;&quot;,&quot;Text&quot;:&quot;Colorations&quot;,&quot;Query&quot;:&quot;&quot;,&quot;Title&quot;:&quot;Colorations&quot;,&quot;Url&quot;:&quot;/nos-colorations&quot;,&quot;Target&quot;:&quot;&quot;,&quot;TargetId&quot;:&quot;02412d8f-ebc5-443f-807f-2d97b41c9167&quot;,&quot;Type&quot;:4,&quot;Style&quot;:&quot;&quot;},&quot;taggingdata&quot;:&quot;{\&quot;event\&quot;:\&quot;uaevent\&quot;,\&quot;event_name\&quot;:\&quot;body_button_click\&quot;,\&quot;ecommerce\&quot;:\&quot;undefined\&quot;,\&quot;eventCategory\&quot;:\&quot;homepage\&quot;,\&quot;eventAction\&quot;:\&quot;select::nos cat&#233;gories\&quot;,\&quot;eventLabel\&quot;:\&quot;colorations::https://www.garnier.fr/nos-colorations\&quot;,\&quot;cta_name\&quot;:\&quot;colorations\&quot;,\&quot;link_url\&quot;:\&quot;https://www.garnier.fr/nos-colorations\&quot;,\&quot;module_name\&quot;:\&quot;nos cat&#233;gories\&quot;}&quot;}]}"
2705                show-more-text="voir plus"
2706                show-less-text="voir moins"
2707                :cta-tagging ="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::nos cat&#233;gories&quot;,&quot;eventLabel&quot;:&quot;[cta_name]&quot;,&quot;cta_name&quot;:&quot;[cta_name]&quot;,&quot;module_name&quot;:&quot;nos cat&#233;gories&quot;}">
2708    </brand-cube>
2709
2710
2711    <div class="container">
2712            <ingredients-grid v-cloak find-all-link="/au-coeur-de-l-ingredient" find-all-label="D&#233;couvrez tous les ingr&#233;dients" :navigation-label='{"carouselbuttonnext":"Slide suivante","carouselbuttonprev":"Slide précédente"}'
2713                              :analytics="{
2714                                  slider: {&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:{&quot;moduleName&quot;:&quot;find your ingredients&quot;,&quot;nextAction&quot;:&quot;next&quot;,&quot;previousAction&quot;:&quot;previous&quot;},&quot;eventLabel&quot;:{&quot;moduleName&quot;:&quot;find your ingredients&quot;,&quot;nextAction&quot;:&quot;next&quot;,&quot;previousAction&quot;:&quot;previous&quot;}},
2715                                  findAllButton:  {&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::d&#233;couvrez nos ingr&#233;dients naturels&quot;,&quot;eventLabel&quot;:&quot;d&#233;couvrez tous les ingr&#233;dients::https://www.garnier.fr/au-coeur-de-l-ingredient&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;cta_name&quot;:&quot;d&#233;couvrez tous les ingr&#233;dients&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient&quot;,&quot;module_name&quot;:&quot;d&#233;couvrez nos ingr&#233;dients naturels&quot;} }">
2716
2717                <div slot="title">
2718                    <h2 class="ingredients__title"  >D&#201;COUVREZ NOS INGR&#201;DIENTS NATURELS</h2>
2719                </div>
2720
2721                <div slot="sub-title">
2722                    <p class="ingredients__subtitle">Choisissez votre ingrédient dans la mosaïque ou via la barre de recherche</p>
2723                </div>
2724
2725                    <type-ahead slot="type-ahead" placeholder='Rechercher un ingr&#233;dient'
2726                                results='r&#233;sultats'
2727                                no-result='Aucun r&#233;sultat'
2728                                :analytics='{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;find_your_ingredients&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::find your ingredients&quot;,&quot;method&quot;:&quot;autocompletion&quot;,&quot;module_name&quot;:&quot;d&#233;couvrez nos ingr&#233;dients naturels&quot;}'
2729                                :ingredients='[{&quot;ingredient&quot;:&quot;Cire d&#39;abeille&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/abeille&quot;},{&quot;ingredient&quot;:&quot;Acides alpha-hydroxyl&#233;s&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/acide-glycolique&quot;},{&quot;ingredient&quot;:&quot;Hydroxyanisole butyl&#233;&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/acide-salicylique&quot;},{&quot;ingredient&quot;:&quot;Acides poly-hydroxyl&#233;s&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/acides-poly-hydroxyles&quot;},{&quot;ingredient&quot;:&quot;Argile / Kaolin&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/argile-kaolin&quot;},{&quot;ingredient&quot;:&quot;C&#233;ramide&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/ceramides&quot;},{&quot;ingredient&quot;:&quot;Charbon&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/charbon&quot;},{&quot;ingredient&quot;:&quot;Micelle&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/micelles&quot;},{&quot;ingredient&quot;:&quot;Niacinamide&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/niacinamide&quot;},{&quot;ingredient&quot;:&quot;Probiotiques&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/probiotiques&quot;},{&quot;ingredient&quot;:&quot;Acide Hyaluronique&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/acide-hyaluronique&quot;},{&quot;ingredient&quot;:&quot;Aloe Vera&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/aloe-vera&quot;},{&quot;ingredient&quot;:&quot;Antioxydants&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/antioxydants&quot;},{&quot;ingredient&quot;:&quot;Argan&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/argan&quot;},{&quot;ingredient&quot;:&quot;Avocat&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/avocat&quot;},{&quot;ingredient&quot;:&quot;Om&#233;ga 6 / Beurre de karit&#233;&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/beurre-de-karite&quot;},{&quot;ingredient&quot;:&quot;Miel&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/miel&quot;},{&quot;ingredient&quot;:&quot;Vitamine Cg&quot;,&quot;url&quot;:&quot;/au-coeur-de-l-ingredient/vitamine-cg&quot;}]'
2730                                ingredient-list-label='Ingredient'>
2731                    </type-ahead>
2732
2733                    <li slot="ingredient--1" class="ingredients__tile">
2734                        <div class="tile__content" v-clickextension="'img'" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::find your ingredients&quot;,&quot;eventLabel&quot;:&quot;acide hyaluronique::https://www.garnier.fr/au-coeur-de-l-ingredient/acide-hyaluronique&quot;,&quot;cta_name&quot;:&quot;acide hyaluronique&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/acide-hyaluronique&quot;,&quot;module_name&quot;:&quot;find your ingredients&quot;}">
2735                            <img v-on:click.stop data-src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/au-coeur-de-l-ingredient/ingredients/4048-gar-hyaluronicacidlp_02_contentblock_stills.jpg?rev=6085796e2b83480d97f50e9324ee73dd" alt="" class="tile__image lazyload">
2736                            <a class="tile__name" href="https://www.garnier.fr/au-coeur-de-l-ingredient/acide-hyaluronique">
2737                                Acide Hyaluronique
2738                            </a>
2739                        </div>
2740                    </li>
2741                    <li slot="ingredient--2" class="ingredients__tile">
2742                        <div class="tile__content" v-clickextension="'img'" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::find your ingredients&quot;,&quot;eventLabel&quot;:&quot;acides alpha-hydroxyl&#233;s::https://www.garnier.fr/au-coeur-de-l-ingredient/acide-glycolique&quot;,&quot;cta_name&quot;:&quot;acides alpha-hydroxyl&#233;s&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/acide-glycolique&quot;,&quot;module_name&quot;:&quot;find your ingredients&quot;}">
2743                            <img v-on:click.stop data-src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/au-coeur-de-l-ingredient/ingredients/dmi_ingredientlp_02_aha_stills_intl_mar2023.png?rev=aa8025b3ca374408b7b53842c6ba3f4f" alt="" class="tile__image lazyload">
2744                            <a class="tile__name" href="https://www.garnier.fr/au-coeur-de-l-ingredient/acide-glycolique">
2745                                Acides alpha-hydroxyl&#233;s
2746                            </a>
2747                        </div>
2748                    </li>
2749                    <li slot="ingredient--3" class="ingredients__tile">
2750                        <div class="tile__content" v-clickextension="'img'" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::find your ingredients&quot;,&quot;eventLabel&quot;:&quot;acides poly-hydroxyl&#233;s::https://www.garnier.fr/au-coeur-de-l-ingredient/acides-poly-hydroxyles&quot;,&quot;cta_name&quot;:&quot;acides poly-hydroxyl&#233;s&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/acides-poly-hydroxyles&quot;,&quot;module_name&quot;:&quot;find your ingredients&quot;}">
2751                            <img v-on:click.stop data-src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/au-coeur-de-l-ingredient/ingredients/dmi_ingredientlp_02_pha_stills_intl_mar2023.png?rev=92b1a23070aa4fbd8fafd0f02ce3c69d" alt="" class="tile__image lazyload">
2752                            <a class="tile__name" href="https://www.garnier.fr/au-coeur-de-l-ingredient/acides-poly-hydroxyles">
2753                                Acides poly-hydroxyl&#233;s
2754                            </a>
2755                        </div>
2756                    </li>
2757                    <li slot="ingredient--4" class="ingredients__tile">
2758                        <div class="tile__content" v-clickextension="'img'" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;homepage&quot;,&quot;eventAction&quot;:&quot;select::find your ingredients&quot;,&quot;eventLabel&quot;:&quot;aloe vera::https://www.garnier.fr/au-coeur-de-l-ingredient/aloe-vera&quot;,&quot;cta_name&quot;:&quot;aloe vera&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/au-coeur-de-l-ingredient/aloe-vera&quot;,&quot;module_name&quot;:&quot;find your ingredients&quot;}">
2759                            <img v-on:click.stop data-src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/au-coeur-de-l-ingredient/ingredients/dmi_ingredientlp_02_aloevera_stills_intl_mar2023.png?rev=f4cf8e002252453b9645e7693932b8d3" alt="" class="tile__image lazyload">
2760                            <a class="tile__name" href="https://www.garnier.fr/au-coeur-de-l-ingredient/aloe-vera">
2761                                Aloe Vera
2762                            </a>
2763                        </div>
2764                    </li>
2765            </ingredients-grid>
2766    </div>
2767
2768
2769
2770<section class="articles-group-v2"
2771         aria-labelledby="articles-group-v2-headline">
2772
2773    <div class="articles-group-v2__container">
2774
2775        <div class="articles-group-v2__intro">
2776
2777                <h2 class="articles-group-v2__headline"
2778                    id="articles-group-v2-headline">
2779                    Nos Articles et Conseils
2780                </h2>
2781
2782
2783                <a class="articles-group-v2__cta articles-group-v2__cta--intro "
2784                   href="https://www.garnier.fr/maga
2784zine"
2785                   v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;tous nos conseils&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/magazine&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2786                    Tous Nos Conseils
2787                </a>
2788
2789        </div>
2790
2791            <div class="articles-group-v2__carousel"
2792                 data-items-length="3">
2793
2794                <carousel class="articles-group-v2__carousel-host"
2795                          :per-page-custom="[
2796                                    [0, 1.15],
2797                                    [768, 1.36],
2798                                    [1440, 2.36]
2799                               ]"
2800                          :loop="false"
2801                          :pagination-enable="true"
2802                          pagination-type="static"
2803                          :counter-enabled="false"
2804                          :navigation-enabled="true"
2805                          :navigation-label='{"carouselbuttonnext":"Slide suivante","carouselbuttonprev":"Slide précédente"}'
2806                          :autoplay="false"
2807                          :article-steps="true">
2808
2809                        <slide class="articles-group-v2__slide-host">
2810
2811                            <a class="articles-group-v2__card" href="https://www.garnier.fr/conseils/creme-solaire-skincare" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;pourquoi ins&#233;rer une protection solaire dans sa routine beaut&#233; ?&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/conseils/creme-solaire-skincare&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2812
2813                                        <div class="articles-group-v2__card-media"
2814                                             href="https://www.garnier.fr/conseils/creme-solaire-skincare"
2815                                             v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;pourquoi ins&#233;rer une protection solaire dans sa routine beaut&#233; ?&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/conseils/creme-solaire-skincare&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2816
2817                                            <img class="articles-group-v2__card-image"
2818                                                 src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/conseils/creme-solaire-skincare/visuel_article_group_1.jpg?rev=cb2d52d7a2404ab786c06f117ed595aa"
2819                                                 alt=""
2820                                                 loading="lazy"
2821                                                 decoding="async" />
2822
2823                                        </div>
2824
2825                                <div class="articles-group-v2__card-body">
2826
2827                                        <p class="articles-group-v2__card-category">
2828                                            
2829                                        </p>
2830
2831                                        <h3 class="articles-group-v2__card-title">
2832                                            Pourquoi ins&#233;rer une protection solaire dans sa routine beaut&#233; ?
2833                                        </h3>
2834
2835                                        <p class="articles-group-v2__card-excerpt">
2836                                            <p>Découvrez pourquoi l'intégration de la crème solaire dans la routine de soins quotidiens est une étape clé pour maintenir une peau saine et protégée tout au long de la journée.</p>
2837                                        </p>
2838
2839                                    <p class="articles-group-v2__card-link">
2840                                        <span>LIRE LA SUITE</span>
2841                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2842                                            <path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" />
2843                                        </svg>
2844                                    </p>
2845
2846                                </div>
2847
2848                            </a>
2849
2850                        </slide>
2851                        <slide class="articles-group-v2__slide-host">
2852
2853                            <a class="articles-group-v2__card" href="https://www.garnier.fr/conseils/bienfaits-vitamine-c-peau" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;vitamine c : ses impacts positifs sur la peau et le visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/conseils/bienfaits-vitamine-c-peau&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2854
2855                                        <div class="articles-group-v2__card-media"
2856                                             href="https://www.garnier.fr/conseils/bienfaits-vitamine-c-peau"
2857                                             v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;vitamine c : ses impacts positifs sur la peau et le visage&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/conseils/bienfaits-vitamine-c-peau&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2858
2859                                            <img class="articles-group-v2__card-image"
2860                                                 src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/conseils/bienfaits-vitamine-c-peau/visuel_article_group_2.png?rev=1feb5d379a2649139748f85fc02fd53f"
2861                                                 alt=""
2862                                                 loading="lazy"
2863                                                 decoding="async" />
2864
2865                                        </div>
2866
2867                                <div class="articles-group-v2__card-body">
2868
2869                                        <p class="articles-group-v2__card-category">
2870                                            
2871                                        </p>
2872
2873                                        <h3 class="articles-group-v2__card-title">
2874                                            Vitamine C : ses impacts positifs sur la peau et le visage
2875                                        </h3>
2876
2877                                        <p class="articles-group-v2__card-excerpt">
2878                                            <p>Quel est l'intérêt de la Vitamine C pour la peau ? Vous trouverez toutes les réponses à vos questions juste ici !</p>
2879                                        </p>
2880
2881                                    <p class="articles-group-v2__card-link">
2882                                        <span>LIRE LA SUITE</span>
2883                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2884                                            <path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" />
2885                                        </svg>
2886                                    </p>
2887
2888                                </div>
2889
2890                            </a>
2891
2892                        </slide>
2893                        <slide class="articles-group-v2__slide-host">
2894
2895                            <a class="articles-group-v2__card" href="https://www.garnier.fr/conseils/soins-jour-nuit-difference" v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;s&#233;rum de jour et s&#233;rum de nuit : quelles diff&#233;rences ?&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/conseils/soins-jour-nuit-difference&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2896
2897                                        <div class="articles-group-v2__card-media"
2898                                             href="https://www.garnier.fr/conseils/soins-jour-nuit-difference"
2899                                             v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;s&#233;rum de jour et s&#233;rum de nuit : quelles diff&#233;rences ?&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/conseils/soins-jour-nuit-difference&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2900
2901                                            <img class="articles-group-v2__card-image"
2902                                                 src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/conseils/soins-jour-nuit-difference/visuel_article_16_creme_jour_nuit.jpg?rev=9e904d6e34b9495a84e51b24e13d6d17"
2903                                                 alt=""
2904                                                 loading="lazy"
2905                                                 decoding="async" />
2906
2907                                        </div>
2908
2909                                <div class="articles-group-v2__card-body">
2910
2911                                        <p class="articles-group-v2__card-category">
2912                                            
2913                                        </p>
2914
2915                                        <h3 class="articles-group-v2__card-title">
2916                                            S&#233;rum de jour et s&#233;rum de nuit : quelles diff&#233;rences ?
2917                                        </h3>
2918
2919                                        <p class="articles-group-v2__card-excerpt">
2920                                            <p>Vous voulez comprendre les différences entre ces deux produits de votre routine quotidienne ? C'est par ici !</p>
2921                                        </p>
2922
2923                                    <p class="articles-group-v2__card-link">
2924                                        <span>LIRE LA SUITE</span>
2925                                        <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">
2926                                            <path d="M9 18L15 12L9 6" stroke="black" stroke-width="2" />
2927                                        </svg>
2928                                    </p>
2929
2930                                </div>
2931
2932                            </a>
2933
2934                        </slide>
2935
2936                </carousel>
2937
2938            </div>
2939
2940            <a class="articles-group-v2__cta articles-group-v2__cta--footer "
2941               href="https://www.garnier.fr/magazine"
2942               v-tag="{&quot;event&quot;:&quot;uaevent&quot;,&quot;event_name&quot;:&quot;body_button_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;&quot;,&quot;eventAction&quot;:&quot;&quot;,&quot;eventLabel&quot;:&quot;&quot;,&quot;cta_name&quot;:&quot;tous nos conseils&quot;,&quot;link_url&quot;:&quot;https://www.garnier.fr/magazine&quot;,&quot;module_name&quot;:&quot;nos articles et conseils&quot;}">
2943                Tous Nos Conseils
2944            </a>
2945
2946    </div>
2947</section>
2948
2949
2950<link href="/-/media/files/vtopopup-css/vtopopup.css?rev=-1" rel="stylesheet" type="text/css" />        
2950<script>
2951        window.addEventListener("load", doStuff);
2952        window.dataLayer = window.dataLayer || [];
2953        function doStuff() {
2954            document.getElementById('garnier-popup').addEventListener('click', function () {
2955                this.classList.add('garnier-popup-close');
2956
2957                const cookiename = 'vto_popup';
2958                let value = "200";
2959                var now = new Date();
2960                console.log(now.getDate());
2961                var expire = new Date();
2962                expire.setFullYear(now.getFullYear());
2963                expire.setMonth(now.getMonth());
2964                expire.setDate(now.getDate() + 6);
2965                expire.setHours(0);
2966                expire.setMinutes(0);
2967                document.cookie = cookiename + "=" + value + "; expires=" + expire.toString() + "; path=/; SameSite=Strict";
2968                localStorage.setItem('vto_popup_enable', false);
2969            });
2970        }
2971        function getCookie(cookieName) {
2972            var name = cookieName + '=';
2973            var ca = document.cookie.split(';');
2974            for (var i = 0; i < ca.length; i++) {
2975                var c = ca[i];
2976                while (c.charAt(0) == ' ') {
2977                    c = c.substring(1);
2978                }
2979                if (c.indexOf(name) == 0) {
2980                    return c.substring(name.length, c.length);
2981                }
2982            }
2983            return '';
2984        }
2985
2986        function displayEvent() {
2987            let obj = {
2988                event: 'nievent',
2989                ecommerce: 'undefined',
2990                eventCategory: 'homepage',
2991                eventAction: 'display::TROUVEZ VOTRE ROUTINE !',
2992                eventLabel: 'J&#39;OBTIENS MA ROUTINE GRATUITEMENT::/skin-coach'
2993            };
2994            dataLayer.push(obj);
2995        }
2996
2997        function selectEvent() {
2998            let obj = {
2999                event: 'uaevent',
3000                ecommerce: 'undefined',
3001                eventCategory: 'homepage',
3002                eventAction: 'select::TROUVEZ VOTRE ROUTINE !',
3003                eventLabel: 'J&#39;OBTIENS MA ROUTINE GRATUITEMENT::/skin-coach'
3004            };
3005            dataLayer.push(obj);
3006        }
3007
3008        function focusPopupCloseButton() {
3009            const closeButton = document.querySelector('#garnier-popup .garnier-close-popup');
3010            if (closeButton) {
3011                closeButton.focus();
3012            }
3013        }
3014
3015        const sessionTimer = getCookie('vto_popup');
3016        if (sessionTimer == "") {
3017            localStorage.setItem('vto_popup_enable', true);
3018        }
3019
3020        let scrolled;
3021        document.addEventListener('scroll', function(e) {
3022            if (!scrolled) {
3023                if (window.pageYOffset || document.documentElement.scrollTop === 10) {
3024                    if(sessionTimer == "" && localStorage.getItem('vto_popup_enable') == "true" ) {
3025                        const popup = document.querySelector("#garnier-popup");
3026                        if (popup) {
3027                            popup.classList.remove('garnier-popup-close');
3028                        }
3029                        focusPopupCloseButton();
3030                        displayEvent();
3031                    }
3032                    scrolled = true;
3033                }
3034            }
3035        });
3036        document.addEventListener('keydown', function(e) {
3037          if (e.keyCode == 27) {
3038            document.querySelector('#garnier-popup').click();
3039          }
3040        });
3041        </script>
3041
3042        <div id="garnier-popup" class="garnier-popup-close">
3043            <div class="garnier-popup-background">
3044                <div class="garnier-popup-wrapper" role="dialog" aria-modal="true" aria-labelledby="garnier-popup-title">
3045                    <div class="garnier-popup-box">
3046
3047                        <button tabindex="0" class="garnier-close-popup" type="button" aria-label="Fermer">
3048                            <span class="garnier-close-popup-ln one"></span>
3049                            <span class="garnier-close-popup-ln two"></span>
3050                        </button>
3051
3052                        <div class="garnier-popup-box-image-holder">
3053                            <img class="garnier-popup-box-image" src="/-/media/project/loreal/brand-sites/garnier/emea/fr/fr-fr/page-popup/newhomepagepopuppng.png?rev=9fc718d4358541b59d0f78f7ad3f22c7" alt="">
3054                        </div>
3055
3056                        <div class="garnier-popup-box-content">
3057                            <h2 id="garnier-popup-title" class="garnier-popup-box-content-title">TROUVEZ VOTRE ROUTINE !</h2>
3058                            <p id="garnier-popup-desc" class="garnier-popup-box-content-subtitle">En 2 minutes, d&#233;couvrez votre routine personnalis&#233;e avec Skin Coach : une routine sur mesure, une technologie puissante et facile &#224; utiliser, et des recommandations de produits personnalis&#233;es.</p>
3059                            <div class="garnier-popup-box-content-btn">
3060                                <a tabindex="1" onclick="selectEvent()" href="/skin-coach" class="btn btn--primary" aria-label="TROUVEZ VOTRE ROUTINE !">J&#39;OBTIENS MA ROUTINE GRATUITEMENT</a>
3061                            </div>
3062
3063                        </div>
3064
3065
3066                    </div>
3067
3068                </div>
3069
3070            </div>
3071
3072        </div>
3073
3074
3075<div id="b4832f19005240ea90e64c0ed77f4fbb"></div>
3076
3077<div class="container text-component-main  " v-bg-color="'#FFFFFF'">
3078
3079<div class="text-component text-component--center  no-cta ">
3080<h2 class="text-component__header"  style="color:">D&#201;COUVREZ NOTRE COMMUNAUT&#201;</h2>
3081            <p class="text-component__description" style="color:">Mentionnez @garnierfr dans vos photos pour avoir une chance d'être mis en avant</p>
3082
3083</div>
3084</div>
3085<script type="text/javascript">
3086    document.addEventListener('DOMContentLoaded', function () {
3087        if (document.querySelectorAll(".text-component ul,ol").length > 0) {
3088            document.querySelectorAll('.text-component ul,ol').forEach(function (data, index) {
3089                document.querySelectorAll(".text-component ul,ol")[index].parentElement.parentElement.classList.add("text-left");
3090            })
3091        }
3092
3093        if (document.querySelectorAll(".text-checkmark").length > 0) {
3094            document.querySelectorAll('.text-checkmark').forEach(function (data, index) {
3095                if (document.querySelectorAll(".text-checkmark")[index].previousElementSibling != null && document.querySelectorAll(".text-checkmark")[index].previousElementSibling.tagName == 'P') {
3096                    document.querySelectorAll(".text-checkmark")[index].parentElement.previousElementSibling.classList.add("text-desc");
3097                }
3098
3099            });
3100        }
3101    });
3102</script>
3102
3103
3104<div class="component plain-html">
3105    <div class="component-content">
3106<!---
3107Insert this snippet in your website to display the widget using the
3108configuration set on adalong.
3109 
3110Use the data-collections attribute on #adalong-widget to override the fallback.
3111The value must be a stringified array with the collection ids.
3112 
3113Get more informations on https://www.npmjs.com/package/@adalong/widget/v/5.8.0
3114-->
3115<div class="container">
3116     <div id="adalong-widget" data-collections='["62a8937ff8206523afd98df2"]'></div>
3117</div>
3118<script>
3119window.addEventListener('load' , ()=>{
3120const tag = document.createElement('script');
3121const head = document.getElementsByTagName('head')[0];
3122const linktag = document.createElement('link');
3123tag.src = "https://cdn.jsdelivr.net/npm/@adalong/widget@5/dist/adalongWidget.js"
3124const adalongWidget = new AdalongWidget('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYyMGZiZTAwY2UyN2Q2MTZhNzcwZmMwZiJ9.PwjLn5UpbsVPa73QcmY9SWhOzd46mpY24EU4YbQCtEk');
3125adalongWidget.load('#adalong-widget');
3126});
3127 
3128 
3129</script>
3129    </div>
3130</div>
3131<div class="component plain-html">
3132    <div class="component-content">
3133<!--- 
3134Insert this snippet in your website to display the widget using the
3135configuration set on adalong.
3136
3137Use the data-collections attribute on #adalong-widget to override the fallback.
3138The value must be a stringified array with the collection ids.
3139
3140Get more informations on https://www.npmjs.com/package/@adalong/widget/v/5.8.0
3141-->
3142<div class="container">
3143<div id="adalong-widget1" data-collections='["62bdb39cf82065359bfa78a0"]'></div>
3144</div>
3145<script defer src="https://cdn.jsdelivr.net/npm/@adalong/widget@5/dist/adalongWidget.js" onload="const adalongWidget = new AdalongWidget('eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjYyMGZiZTAwY2UyN2Q2MTZhNzcwZmMwZiJ9.PwjLn5UpbsVPa73QcmY9SWhOzd46mpY24EU4YbQCtEk');
3146adalongWidget.load('#adalong-widget1')">
3147</script>
3147    </div>
3148</div>
3149<div class="component plain-html">
3150    <div class="component-content">
3151<div class="ingredients__find-all" style="margin-top: 20px"><a href="/galerie-photos" class="btn btn--primary ingredients__find-all">Explorer la galerie</a></div>    </div>
3152</div>
3153
3154    
3154<script type="application/json" id="{7695D34A-04B4-4916-88D9-58F090886EC3}">
3155        {"click":[{"target":"continue","payload":null},{"target":"change-country","payload":null}],"close-redirect-popup":[{"target":"ra-user-redirect-modal","payload":null}]}
3156    </script>
3156
3157        <div id="refapp-user-redirect-popup-example" data-nosnippet>
3158            <refapp-user-redirect v-bind="{
3159  &quot;title&quot;: &quot;You’re Visiting from a Different Region&quot;,
3160  &quot;description&quot;: &quot;Would you like to switch to your local site for a better experience — including localized content, currency, and shipping options?&quot;,
3161  &quot;redirectLabel&quot;: &quot;Redirect user&quot;,
3162  &quot;continueLabel&quot;: &quot;Continue&quot;,
3163  &quot;image&quot;: {
3164    &quot;src&quot;: &quot;https://www.garnier.fr/-/media/project/loreal/brand-sites/garnier/master/dmi/vitamin-c.png?rev=-1&quot;
3165  },
3166  &quot;defaultCountryCode&quot;: &quot;us&quot;,
3167  &quot;btnBgColor&quot;: &quot;&quot;,
3168  &quot;btnTextColor&quot;: &quot;&quot;,
3169  &quot;countries&quot;: [
3170    {
3171      &quot;name&quot;: &quot;Argentina&quot;,
3172      &quot;url&quot;: &quot;https://www.garnier.com.ar:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3173      &quot;countryCodes&quot;: [
3174        &quot;ar&quot;
3175      ]
3176    },
3177    {
3178      &quot;name&quot;: &quot;Australia&quot;,
3179      &quot;url&quot;: &quot;https://www.garnier.com.au:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3180      &quot;countryCodes&quot;: [
3181        &quot;au&quot;
3182      ]
3183    },
3184    {
3185      &quot;name&quot;: &quot;Belgium&quot;,
3186      &quot;url&quot;: &quot;https://www.garnier-be.com:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3187      &quot;countryCodes&quot;: [
3188        &quot;be&quot;
3189      ]
3190    },
3191    {
3192      &quot;name&quot;: &quot;Brazil&quot;,
3193      &quot;url&quot;: &quot;https://www.garnier.com.br:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3194      &quot;countryCodes&quot;: [
3195        &quot;br&quot;
3196      ]
3197    },
3198    {
3199      &quot;name&quot;: &quot;Bulgaria&quot;,
3200      &quot;url&quot;: &quot;https://www.garnier.bg:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3201      &quot;countryCodes&quot;: [
3202        &quot;bg&quot;
3203      ]
3204    },
3205    {
3206      &quot;name&quot;: &quot;Canada&quot;,
3207      &quot;url&quot;: &quot;https://www.garnier.ca:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3208      &quot;countryCodes&quot;: [
3209        &quot;ca&quot;
3210      ]
3211    },
3212    {
3213      &quot;name&quot;: &quot;Central America&quot;,
3214      &quot;url&quot;: &quot;https://www.garnier-centroamerica.com:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3215      &quot;countryCodes&quot;: [
3216        &quot;pa&quot;
3217      ]
3218    },
3219    {
3220      &quot;name&quot;: &quot;Chile&quot;,
3221      &quot;url&quot;: &quot;https://www.garnier.cl:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3222      &quot;countryCodes&quot;: [
3223        &quot;cl&quot;
3224      ]
3225    },
3226    {
3227      &quot;name&quot;: &quot;Colombia&quot;,
3228      &quot;url&quot;: &quot;https://www.garnier.com.co:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3229      &quot;countryCodes&quot;: [
3230        &quot;co&quot;
3231      ]
3232    },
3233    {
3234      &quot;name&quot;: &quot;Croatia&quot;,
3235      &quot;url&quot;: &quot;https://www.garnier.hr:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3236      &quot;countryCodes&quot;: [
3237        &quot;hr&quot;
3238      ]
3239    },
3240    {
3241      &quot;name&quot;: &quot;Czech Republic&quot;,
3242      &quot;url&quot;: &quot;https://www.garnier.cz:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3243      &quot;countryCodes&quot;: [
3244        &quot;cz&quot;
3245      ]
3246    },
3247    {
3248      &quot;name&quot;: &quot;Denmark&quot;,
3249      &quot;url&quot;: &quot;https://www.garnier.dk:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3250      &quot;countryCodes&quot;: [
3251        &quot;dk&quot;
3252      ]
3253    },
3254    {
3255      &quot;name&quot;: &quot;Finland&quot;,
3256      &quot;url&quot;: &quot;https://www.garnier.fi:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3257      &quot;countryCodes&quot;: [
3258        &quot;fi&quot;
3259      ]
3260    },
3261    {
3262      &quot;name&quot;: &quot;France&quot;,
3263      &quot;url&quot;: &quot;https://www.garnier.fr:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3264      &quot;countryCodes&quot;: [
3265        &quot;fr&quot;
3266      ]
3267    },
3268    {
3269      &quot;name&quot;: &quot;Germany&quot;,
3270      &quot;url&quot;: &quot;https://www.garnier.de:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3271      &quot;countryCodes&quot;: [
3272        &quot;de&quot;
3273      ]
3274    },
3275    {
3276      &quot;name&quot;: &quot;Greece&quot;,
3277      &quot;url&quot;: &quot;https://www.garnier.gr:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3278      &quot;countryCodes&quot;: [
3279        &quot;gr&quot;
3280      ]
3281    },
3282    {
3283      &quot;name&quot;: &quot;Hungary&quot;,
3284      &quot;url&quot;: &quot;
3284https://www.garnier.hu:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3285      &quot;countryCodes&quot;: [
3286        &quot;hu&quot;
3287      ]
3288    },
3289    {
3290      &quot;name&quot;: &quot;India&quot;,
3291      &quot;url&quot;: &quot;https://www.garnier.in:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3292      &quot;countryCodes&quot;: [
3293        &quot;in&quot;
3294      ]
3295    },
3296    {
3297      &quot;name&quot;: &quot;Indonesia&quot;,
3298      &quot;url&quot;: &quot;https://www.garnier.co.id:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3299      &quot;countryCodes&quot;: [
3300        &quot;id&quot;
3301      ]
3302    },
3303    {
3304      &quot;name&quot;: &quot;Israel&quot;,
3305      &quot;url&quot;: &quot;https://www.garnier.co.il:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3306      &quot;countryCodes&quot;: [
3307        &quot;is&quot;
3308      ]
3309    },
3310    {
3311      &quot;name&quot;: &quot;Italy&quot;,
3312      &quot;url&quot;: &quot;https://www.garnier.it:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3313      &quot;countryCodes&quot;: [
3314        &quot;it&quot;
3315      ]
3316    },
3317    {
3318      &quot;name&quot;: &quot;Malaysia&quot;,
3319      &quot;url&quot;: &quot;https://www.garnier.com.my:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3320      &quot;countryCodes&quot;: [
3321        &quot;my&quot;
3322      ]
3323    },
3324    {
3325      &quot;name&quot;: &quot;Mexico&quot;,
3326      &quot;url&quot;: &quot;https://www.garnier.com.mx:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3327      &quot;countryCodes&quot;: [
3328        &quot;mx&quot;
3329      ]
3330    },
3331    {
3332      &quot;name&quot;: &quot;Middle East&quot;,
3333      &quot;url&quot;: &quot;https://www.garnierarabia.com:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3334      &quot;countryCodes&quot;: [
3335        &quot;middle east&quot;
3336      ]
3337    },
3338    {
3339      &quot;name&quot;: &quot;Netherlands&quot;,
3340      &quot;url&quot;: &quot;https://www.garniernederland.nl:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3341      &quot;countryCodes&quot;: [
3342        &quot;nl&quot;
3343      ]
3344    },
3345    {
3346      &quot;name&quot;: &quot;Norway&quot;,
3347      &quot;url&quot;: &quot;https://www.garnier.no:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3348      &quot;countryCodes&quot;: [
3349        &quot;no&quot;
3350      ]
3351    },
3352    {
3353      &quot;name&quot;: &quot;Peru&quot;,
3354      &quot;url&quot;: &quot;https://www.garnier.com.pe:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3355      &quot;countryCodes&quot;: [
3356        &quot;pe&quot;
3357      ]
3358    },
3359    {
3360      &quot;name&quot;: &quot;Philippines&quot;,
3361      &quot;url&quot;: &quot;https://www.garnier.com.ph:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3362      &quot;countryCodes&quot;: [
3363        &quot;ph&quot;
3364      ]
3365    },
3366    {
3367      &quot;name&quot;: &quot;Poland&quot;,
3368      &quot;url&quot;: &quot;https://www.garnier.pl:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3369      &quot;countryCodes&quot;: [
3370        &quot;pl&quot;
3371      ]
3372    },
3373    {
3374      &quot;name&quot;: &quot;Portugal&quot;,
3375      &quot;url&quot;: &quot;https://www.garnier.pt:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3376      &quot;countryCodes&quot;: [
3377        &quot;pt&quot;
3378      ]
3379    },
3380    {
3381      &quot;name&quot;: &quot;Romania&quot;,
3382      &quot;url&quot;: &quot;https://www.garnier.ro:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3383      &quot;countryCodes&quot;: [
3384        &quot;ro&quot;
3385      ]
3386    },
3387    {
3388      &quot;name&quot;: &quot;Russia&quot;,
3389      &quot;url&quot;: &quot;https://www.garnier.ru:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3390      &quot;countryCodes&quot;: [
3391        &quot;ru&quot;
3392      ]
3393    },
3394    {
3395      &quot;name&quot;: &quot;
3395Serbia&quot;,
3396      &quot;url&quot;: &quot;https://www.garnier.rs:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3397      &quot;countryCodes&quot;: [
3398        &quot;rs&quot;
3399      ]
3400    },
3401    {
3402      &quot;name&quot;: &quot;Singapore&quot;,
3403      &quot;url&quot;: &quot;https://www.garnier.com.sg:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3404      &quot;countryCodes&quot;: [
3405        &quot;sy&quot;
3406      ]
3407    },
3408    {
3409      &quot;name&quot;: &quot;Slovakia&quot;,
3410      &quot;url&quot;: &quot;https://www.garnier.sk:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3411      &quot;countryCodes&quot;: [
3412        &quot;sk&quot;
3413      ]
3414    },
3415    {
3416      &quot;name&quot;: &quot;Slovenia&quot;,
3417      &quot;url&quot;: &quot;https://www.garnier.si:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3418      &quot;countryCodes&quot;: [
3419        &quot;sl&quot;
3420      ]
3421    },
3422    {
3423      &quot;name&quot;: &quot;South Africa&quot;,
3424      &quot;url&quot;: &quot;https://africa.garnier.com:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3425      &quot;countryCodes&quot;: [
3426        &quot;sa&quot;
3427      ]
3428    },
3429    {
3430      &quot;name&quot;: &quot;Spain&quot;,
3431      &quot;url&quot;: &quot;https://www.garnier.es:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3432      &quot;countryCodes&quot;: [
3433        &quot;es&quot;
3434      ]
3435    },
3436    {
3437      &quot;name&quot;: &quot;Sweden&quot;,
3438      &quot;url&quot;: &quot;https://www.garnier.se:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3439      &quot;countryCodes&quot;: [
3440        &quot;se&quot;
3441      ]
3442    },
3443    {
3444      &quot;name&quot;: &quot;Switzerland&quot;,
3445      &quot;url&quot;: &quot;https://www.garnier.ch:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3446      &quot;countryCodes&quot;: [
3447        &quot;ch&quot;
3448      ]
3449    },
3450    {
3451      &quot;name&quot;: &quot;Thailand&quot;,
3452      &quot;url&quot;: &quot;https://www.garnier.co.th:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3453      &quot;countryCodes&quot;: [
3454        &quot;th&quot;
3455      ]
3456    },
3457    {
3458      &quot;name&quot;: &quot;Turkey&quot;,
3459      &quot;url&quot;: &quot;https://www.garnier.com.tr:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3460      &quot;countryCodes&quot;: [
3461        &quot;tu&quot;
3462      ]
3463    },
3464    {
3465      &quot;name&quot;: &quot;Ukraine&quot;,
3466      &quot;url&quot;: &quot;https://www.garnier.ua:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3467      &quot;countryCodes&quot;: [
3468        &quot;ua&quot;
3469      ]
3470    },
3471    {
3472      &quot;name&quot;: &quot;United Kingdom&quot;,
3473      &quot;url&quot;: &quot;https://www.garnier.co.uk:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3474      &quot;countryCodes&quot;: [
3475        &quot;uk&quot;
3476      ]
3477    },
3478    {
3479      &quot;name&quot;: &quot;United States&quot;,
3480      &quot;url&quot;: &quot;https://www.garnierusa.com:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3481      &quot;countryCodes&quot;: [
3482        &quot;us&quot;
3483      ]
3484    },
3485    {
3486      &quot;name&quot;: &quot;Uruguay&quot;,
3487      &quot;url&quot;: &quot;https://www.garnier.com.uy:443/?utm_campaign=geo-ip-redirect&amp;utm_source=FR&amp;utm_medium=referral&amp;geoip-redirect=true&quot;,
3488      &quot;countryCodes&quot;: [
3489        &quot;uy&quot;
3490      ]
3491    }
3492  ],
3493  &quot;cookieExpiration&quot;: &quot;d&quot;,
3494  &quot;closeBtnAriaLabel&quot;: &quot;Close&quot;,
3495  &quot;taggingId&quot;: &quot;{7695D34A-04B4-4916-88D9-58F090886EC3}&quot;
3496}" style="z-index: 10">
3497                    <div role="dialog" aria-modal="true" tabindex="-1" style="display:none;">
3498        <h2>You’re Visiting from a Different Region</h2>
3499        <p>Would you like to switch to your local site for a better experience — including localized content, currency, and shipping options?</p>
3500        <ul>
3501                <li>
3502                    <a href="https://www.garnier.com.ar:443/">Argentina</a>
3503                </li>
3504                <li>
3505                    <a href="https://www.garnier.com.au:443/">Australia</a>
3506                </li>
3507                <li>
3508                    <a href="https://www.garnier-be.com:443/">Belgium</a>
3509                </li>
3510                <li>
3511                    <a href="https://www.garnier.com.br:443/">Brazil</a>
3512                </li>
3513                <li>
3514                    <a href="https://www.garnier.bg:443/">Bulgaria</a>
3515                </li>
3516                <li>
3517                    <a href="https://www.garnier.ca:443/">Canada</a>
3518                </li>
3519                <li>
3520                    <a href="https://www.garnier-centroamerica.com:443/">Central America</a>
3521                </li>
3522                <li>
3523                    <a href="https://www.garnier.cl:443/">Chile</a>
3524                </li>
3525                <li>
3526                    <a href="https://www.garnier.com.co:443/">Colombia</a>
3527                </li>
3528                <li>
3529                    <a href="https://www.garnier.hr:443/">Croatia</a>
3530                </li>
3531                <li>
3532                    <a href="https://www.garnier.cz:443/">Czech Republic</a>
3533                </li>
3534                <li>
3535                    <a href="https://www.garnier.dk:443/">Denmark</a>
3536                </li>
3537                <li>
3538                    <a href="https://www.garnier.fi:443/">Finland</a>
3539                </li>
3540                <li>
3541                    <a href="https://www.garnier.fr:443/">France</a>
3542                </li>
3543                <li>
3544                    <a href="https://www.garnier.de:443/">Germany</a>
3545                </li>
3546                <li>
3547                    <a href="https://www.garnier.gr:443/">Greece</a>
3548                </li>
3549                <li>
3550                    <a href="https://www.garnier.hu:443/">Hungary</a>
3551                </li>
3552                <li>
3553                    <a href="https://www.garnier.in:443/">India</a>
3554                </li>
3555                <li>
3556                    <a href="https://www.garnier.co.id:443/">Indonesia</a>
3557                </li>
3558                <li>
3559                    <a href="https://www.garnier.co.il:443/">Israel</a>
3560                </li>
3561                <li>
3562                    <a href="https://www.garnier.it:443/">Italy</a>
3563                </li>
3564                <li>
3565                    <a href="https://www.garnier.com.my:443/">Malaysia</a>
3566                </li>
3567                <li>
3568                    <a href="https://www.garnier.com.mx:443/">Mexico</a>
3569                </li>
3570                <li>
3571                    <a href="https://www.garnierarabia.com:443/">Middle East</a>
3572                </li>
3573                <li>
3574                    <a href="https://www.garniernederland.nl:443/">Netherlands</a>
3575                </li>
3576                <li>
3577                    <a href="https://www.garnier.no:443/">Norway</a>
3578                </li>
3579                <li>
3580                    <a href="https://www.garnier.com.pe:443/">Peru</a>
3581                </li>
3582                <li>
3583                    <a href="https://www.garnier.com.ph:443/">Philippines</a>
3584                </li>
3585                <li>
3586                    <a href="https://www.garnier.pl:443/">Poland</a>
3587                </li>
3588                <li>
3589                    <a href="https://www.garnier.pt:443/">Portugal</a>
3590                </li>
3591                <li>
3592                    <a href="https://www.garnier.ro:443/">Romania</a>
3593                </li>
3594                <li>
3595                    <a href="https://www.garnier.ru:443/">Russia</a>
3596                </li>
3597                <li>
3598                    <a href="https://www.garnier.rs:443/">Serbia</a>
3599                </li>
3600                <li>
3601                    <a href="https://www.garnier.com.sg:443/">Singapore</a>
3602                </li>
3603                <li>
3604                    <a href="https://www.garnier.sk:443/">Slovakia</a>
3605                </li>
3606                <li>
3607                    <a href="https://www.garnier.si:443/">Slovenia</a>
3608                </li>
3609                <li>
3610                    <a href="https://africa.garnier.com:443/">South Africa</a>
3611                </li>
3612                <li>
3613                    <a href="https://www.garnier.es:443/">Spain</a>
3614                </li>
3615                <li>
3616                    <a href="https://www.garnier.se:443/">Sweden</a>
3617                </li>
3618                <li>
3619                    <a href="https://www.garnier.ch:443/">Switzerland</a>
3620                </li>
3621                <li>
3622                    <a href="https://www.garnier.co.th:443/">Thailand</a>
3623                </li>
3624                <li>
3625                    <a href="https://www.garnier.com.tr:443/">Turkey</a>
3626                </li>
3627                <li>
3628                    <a href="https://www.garnier.ua:443/">Ukraine</a>
3629                </li>
3630                <li>
3631                    <a href="https://www.garnier.co.uk:443/">United Kingdom</a>
3632                </li>
3633                <li>
3634                    <a href="https://www.garnierusa.com:443/">United States</a>
3635                </li>
3636                <li>
3637                    <a href="https://www.garnier.com.uy:443/">Uruguay</a>
3638                </li>
3639        </ul>
3640    </div>
3641
3642            </refapp-user-redirect>
3643        </div>
3644
3645                    </div>
3646                    
3647                    
3648                    
3649                    
3650                    <div id="ratings_reviews" class="scroll-target">
3651                        
3652                    </div>
3653                </div>
3654            </main>
3655            <!-- /#content -->
3656            <!-- #footer -->
3657
3658
3659
3660<div data-qr-page-section="hide-on-qr">
3661    <footer class="footer" id="footer" role="contentinfo">
3662        <div class="container">
3663            <div class="row">
3664                <div class="footer-wrapper">
3665                    <img data-srcset="/themes/garnier/Images/assets/g-logo.png?c=1686900594940" alt="" class="footer-garnier-logo lazyload" />
3666                    <div class="col-xs-12 col-sm-4 footer-col footer-website-links">
3667                        
3668
3669
3670<p class="heading is-6">Liens du site</p>
3671<ul class="footer-navigation footer-website-links-list">
3672
3673
3674            <li>
3675<a v-tag="{&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::footer&quot;,&quot;eventLabel&quot;:&quot;website links::terms of service&quot;,&quot;click_area&quot;:&quot;footer&quot;,&quot;breadcrumb&quot;:&quot;website links::terms of service&quot;}" data-variantfieldname="Link" href="/cgu" data-variantitemid="{69AC6843-0144-495A-BBFE-5F16469189FA}">CGU</a>            </li>
3676            <li>
3677<a v-tag="{&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::footer&quot;,&quot;eventLabel&quot;:&quot;website links::privacy policy&quot;,&quot;click_area&quot;:&quot;footer&quot;,&quot;breadcrumb&quot;:&quot;website links::privacy policy&quot;}" data-variantfieldname="Link" href="/politique-de-protection-des-donnees-personnelles" data-variantitemid="{07DEB878-AF17-4300-A191-411B3F223223}">Politique de protection des données personnelles</a>            </li>
3678            <li>
3679<a v-tag="{&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::footer&quot;,&quot;eventLabel&quot;:&quot;website links::conditions generales des avis en lignes&quot;,&quot;click_area&quot;:&quot;footer&quot;,&quot;breadcrumb&quot;:&quot;website links::conditions generales des avis en lignes&quot;}" data-variantfieldname="Link" href="/conditions-generales-des-avis-en-ligne" data-variantitemid="{EEA23AFA-2971-4053-9299-434A3A77A209}">Conditions générales des avis en ligne</a>            </li>
3680            <li>
3681<a v-tag="{&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::footer&quot;,&quot;eventLabel&quot;:&quot;website links::cookie settings&quot;,&quot;click_area&quot;:&quot;footer&quot;,&quot;breadcrumb&quot;:&quot;website links::cookie settings&quot;}" data-variantfieldname="Link" onclick="javascript:Optanon.ToggleInfoDisplay();" href="#" data-variantitemid="{FD1E31D9-DD69-4FB4-96D4-00B954CDF27E}">Gestion des cookies</a>            </li>
3682            <li>
3683<a v-tag="{&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::footer&quot;,&quot;eventLabel&quot;:&quot;website links::accessibilite&quot;,&quot;click_area&quot;:&quot;footer&quot;,&quot;breadcrumb&quot;:&quot;website links::accessibilite&quot;}" data-variantfieldname="Link" href="/accessibilite" data-variantitemid="{7925513E-DC33-4FC9-882E-F1F5DE44DA37}">Accessibilité : partiellement conforme</a>            </li>
3684    </ul>
3685
3686 <country-drop-down class="component col-xs-12 col-sm-12 footer-country-selector">
3687    <div v-onselect-changeurl>
3688        <div class="country_selector">
3689            <div class="form-item form-item--select">
3690                <div class="form-item__select-wrapper">
3691
3692                        <label for="country selector">Pays</label>
3693                        <select id="country selector" name="country selector" title="country selector">
3694                            <option disabled="disabled" selected="selected">
3695                                <p class="heading is-3">Pays</p>
3696                                                            </option>
3697<option value=" http://www.garnier.com.au/  ">Australia</option><option value=" http://www.garnier.com.br/ ">Brazil</option><option value=" https://www.garnier.ca/en-ca ">Canada</option><option value=" http://www.garnier.hr/ ">Croatia</option><option value=" https://www.garnier.fr/ ">France</option><option value=" http://www.garnier.de/ ">Germany</option><option value=" https://www.garnier.gr/ ">Greece</option><option value=" http://www.garnier.hu/ ">Hungary</option><option value=" https://www.garnier.in ">India</option><option value=" http://www.garnier.it/ ">Italy</option><option value=" http://www.garnier.com.mx/ ">Mexico</option><option value=" https://www.garniernederland.nl/  ">Netherlands</option><option value=" https://www.garnier.pl/ ">Poland</option><option value=" https://www.garnier.pt/  ">Portugal</option><option value=" https://www.garnier.ro/ ">Romania</option><option value=" http://www.garnier.com.ru/ ">Russia</option><option value=" http://www.garnier.es/ ">Spain</option><option value=" https://www.garnier.com.tr/ ">Turkey</option><option value=" http://www.garnier.co.uk/ ">United Kingdom</option><option value=" http://www.garnierusa.com/ ">United States - English</option><option value=" https://www.garnierusa.com/ ">USA</option>                        </select>
3698                        <svg aria-hidden="true" class="icon is-large" id="country-arrow"><use xmlns:xlink="http://www.w3.org/1999/xlink" xlink:href="#new-arrowdown"></use></svg>
3699                </div>
3700            </div>
3701        </div>
3702    </div>
3703 </country-drop-down>
3704
3705
3706<p class="footer-website-links-copyright field-phrase">&#169;2019 Garnier LLC</p>
3707                    </div>
3708                    <div class="col-xs-12 col-sm-4 footer-col footer-customer-service">
3709                        
3710<div class="component link-list footer-customer-service--social">
3711
3712    <p class="heading is-6">
3712Rejoignez-nous sur</p>
3713        <ul class="footer-navigation footer-social-media-links-list">
3714                    <li class="">
3715<a v-tag="{&quot;event&quot;:&quot;socialint&quot;,&quot;event_name&quot;:&quot;social_interaction&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;socialNetwork&quot;:&quot;instagram&quot;,&quot;socialAction&quot;:&quot;follow&quot;,&quot;socialTarget&quot;:&quot;https://www.instagram.com/garnierfr/&quot;,&quot;social_network&quot;:&quot;instagram&quot;,&quot;social_action&quot;:&quot;follow&quot;}" target="_blank" title="Follow us on Instagram" rel="noopener noreferrer" href="https://www.instagram.com/garnierfr/"><img class="lazyload" data-src="/themes/Garnier/Images/assets/Instagram.svg" alt="Instagram"></a>
3716                    </li>
3717                    <li class="">
3718<a v-tag="{&quot;event&quot;:&quot;socialint&quot;,&quot;event_name&quot;:&quot;social_interaction&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;socialNetwork&quot;:&quot;facebook&quot;,&quot;socialAction&quot;:&quot;share&quot;,&quot;socialTarget&quot;:&quot;https://www.facebook.com/garnierfr/&quot;,&quot;social_network&quot;:&quot;facebook&quot;,&quot;social_action&quot;:&quot;share&quot;}" target="_blank" title="Nous suivre sur Facebook" rel="noopener noreferrer" href="https://www.facebook.com/GarnierFR/"><img class="lazyload" data-src="/themes/Garnier/Images/assets/Facebook.svg" alt="facebook"></a>
3719                    </li>
3720                    <li class="">
3721<a v-tag="{&quot;event&quot;:&quot;socialint&quot;,&quot;event_name&quot;:&quot;social_interaction&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;socialNetwork&quot;:&quot;youtube&quot;,&quot;socialAction&quot;:&quot;follow&quot;,&quot;socialTarget&quot;:&quot;https://www.youtube.com/user/garnierfr&quot;,&quot;social_network&quot;:&quot;youtube&quot;,&quot;social_action&quot;:&quot;follow&quot;}" target="_blank" title="Follow us on YouTube" rel="noopener noreferrer" href="https://www.youtube.com/user/garnierFR"><img class="lazyload" data-src="/themes/Garnier/Images/assets/Youtube.svg" alt=""></a>
3722                    </li>
3723
3724    </ul>
3725</div>
3726
3727                    </div>
3728                    <div class="col-xs-12 col-sm-4 footer-col footer-mailing-list">
3729                        
3730<div class="component link-list footer-customer-service--nav">
3731
3732    <p class="heading is-6">Service consommateur</p>
3733        <ul class="footer-navigation">
3734                    <li class="">
3735<a v-tag="{&quot;event_name&quot;:&quot;menu_click&quot;,&quot;ecommerce&quot;:&quot;undefined&quot;,&quot;eventCategory&quot;:&quot;main menu navigation&quot;,&quot;eventAction&quot;:&quot;select::footer&quot;,&quot;eventLabel&quot;:&quot;customer service::contactez-nous&quot;,&quot;click_area&quot;:&quot;footer&quot;,&quot;breadcrumb&quot;:&quot;customer service::contactez-nous&quot;}" data-variantfieldname="Link" href="/contactiframe" data-variantitemid="{6FA3D127-AB82-4A38-83EE-E66DF69C468F}">Contactez-nous</a>
3736                    </li>
3737                    <li class="">
3738<a data-variantfieldname="Link" href="https://accessibilite-sites.loreal.fr/login.php?token=N1pBeFNuZmlIZ3JRalJjY09ZbHhKUT09" data-variantitemid="{6EC1C7FE-82AB-4A88-A879-05BC6AB26F75}">Espace sourds et malentendants</a>
3739                    </li>
3740
3741    </ul>
3742</div>
3743
3744                    </div>
3745                </div>
3746                <div class="col-xs-12 col-sm-12" id="legaltext">
3747                    
3748                </div>
3749            </div>
3750        </div>
3751    </footer>
3752</div>
3753
3754    <component is="script" id="data-iopscript" data-iopscript='{"lang":"fr", "mode":"modal",  "noLink":false,"regex":"(?:,|:|•|●|;)+","gtmEnabled":true }' 
3755               src="https://inside-our-products.wsf-e-loreal.com/files/widgets.bundle.js"
3756               charset="utf-8" async></component>
3757
3758            <!-- /#footer -->
3759            <scroll-to-top :scroll-to-top-label='{"scroll":"Revenir en haut de la page"}'></scroll-to-top>
3760        </div>
3761    </div>
3762    <!-- /#wrapper -->
3763    
3764
3765<script defer src="/Refapp-build/foundation-layer/scripts/RefApp.foundation-layer.CM.js"></script>
3765
3766
3767
3768
3769    <!-- Sales Force Script Block -->
3770    
3770<script type="text/javascript">
3771        if (typeof _etmc !== "undefined" && _etmc) {
3772        }
3773    </script>
3773
3774
3775    
3776    
3777    
3778</body>
3779</html>

Line numbers count LF bytes from the start of the resource, as the search results do. Vendor segments are library code the classifier recognised; they are stored but not indexed. Bytes are shown as Latin1 characters, one per byte.