Treatment Laboratoire \u2014 Dermo-cosm\u00e9tique Alg\u00e9rienne<\/title>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Space+Grotesk:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.15.0\/dist\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.15.0\/dist\/ScrollTrigger.min.js\"><\/script>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.3.23\/dist\/lenis.min.js\"><\/script>\n\n <style>\n \/* \u2500\u2500 Reset \u2500\u2500 *\/\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --white: #FFFFFF;\n --black: #0A0A0A;\n --teal: #59C3B9;\n --teal-dark: #3FA89E;\n --teal-light: #59C3B920;\n --teal-bg: #EDF9F7;\n --gold: #C4A35A;\n --gold-light: #C4A35A15;\n --blue: #5A7BC4;\n --pink: #C45A7B;\n --purple: #7B5AC4;\n --green: #5AC47B;\n --orange: #C48A5A;\n --gray-50: #FAFAFA;\n --gray-100: #F5F5F5;\n --gray-200: #E5E5E5;\n --gray-300: #D4D4D4;\n --gray-400: #A0A0A0;\n --gray-600: #666666;\n --gray-800: #333333;\n\n --ff-serif: 'Playfair Display', Georgia, serif;\n --ff-sans: 'DM Sans', -apple-system, sans-serif;\n --ff-mono: 'Space Grotesk', monospace;\n }\n\n html { font-size: 16px; scroll-behavior: smooth; }\n\n body {\n font-family: var(--ff-sans);\n color: var(--black);\n background: var(--white);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n img { display: block; max-width: 100%; height: auto; }\n a { text-decoration: none; color: inherit; }\n button { border: none; background: none; cursor: pointer; font-family: inherit; }\n\n \/* \u2500\u2500 Marquee \u2500\u2500 *\/\n .marquee {\n background: var(--black);\n padding: 10px 0;\n overflow: hidden;\n white-space: nowrap;\n }\n\n .marquee-track {\n display: inline-flex;\n animation: marquee-scroll 30s linear infinite;\n }\n\n .marquee-item {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 400;\n letter-spacing: 0.15em;\n color: var(--white);\n padding: 0 40px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n }\n\n .marquee-item span.dot {\n width: 4px;\n height: 4px;\n background: var(--teal);\n border-radius: 50%;\n display: inline-block;\n }\n\n @keyframes marquee-scroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* \u2500\u2500 Nav \u2500\u2500 *\/\n .nav {\n position: fixed;\n top: 40px;\n left: 0;\n width: 100%;\n z-index: 100;\n padding: 24px 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: top 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;\n }\n .nav.scrolled {\n top: 0;\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(0,0,0,0.08);\n box-shadow: 0 1px 12px rgba(0,0,0,0.06);\n }\n\n .nav-brand {\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.3em;\n color: var(--black);\n }\n .nav-brand .logo-dark { display: none; }\n .nav-brand .logo-light { display: block; }\n .nav.scrolled .nav-brand .logo-dark { display: block; }\n .nav.scrolled .nav-brand .logo-light { display: none; }\n\n .nav-links {\n display: flex;\n gap: 32px;\n align-items: center;\n }\n\n .nav-links a {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 400;\n letter-spacing: 0.15em;\n color: rgba(255,255,255,0.8);\n transition: color 0.4s;\n }\n\n .nav-links a:hover { opacity: 0.6; }\n .nav.scrolled .nav-links a { color: var(--gray-600); }\n .nav.scrolled .nav-links a:hover { color: var(--black); opacity: 1; }\n .nav-link-diagnostic { display: inline-flex !important; align-items: center; gap: 8px; padding-left: 14px !important; border-left: 1px solid rgba(255,255,255,.18); }\n .nav.scrolled .nav-link-diagnostic { border-left-color: rgba(0,0,0,.12); }\n .nav-link-dot { width: 6px; height: 6px; border-radius: 50%; background: #59C3B9; box-shadow: 0 0 0 0 rgba(89,195,185,.55); animation: navDotPulse 2.4s ease-out infinite; }\n @keyframes navDotPulse { 0% { box-shadow: 0 0 0 0 rgba(89,195,185,.55); } 70% { box-shadow: 0 0 0 8px rgba(89,195,185,0); } 100% { box-shadow: 0 0 0 0 rgba(89,195,185,0); } }\n @media (prefers-reduced-motion: reduce) { .nav-link-dot { animation: none; } }\n\n \/* Mobile-only diagnostic FAB (Typology-style always-visible quiz CTA) *\/\n .diagnostic-fab { display: none; }\n @media (max-width: 900px) {\n .diagnostic-fab {\n display: inline-flex;\n position: fixed;\n left: 50%;\n bottom: calc(16px + env(safe-area-inset-bottom, 0px));\n transform: translateX(-50%);\n align-items: center;\n gap: 10px;\n padding: 14px 22px;\n min-height: 48px;\n background: #59C3B9;\n color: #fff;\n font-family: var(--ff-mono, 'Josefin Sans', sans-serif);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 999px;\n box-shadow: 0 12px 32px -8px rgba(0,0,0,.35), 0 4px 12px -4px rgba(89,195,185,.4);\n z-index: 50;\n -webkit-tap-highlight-color: transparent;\n transition: transform .18s ease, box-shadow .18s ease;\n will-change: transform;\n }\n .diagnostic-fab:active { transform: translateX(-50%) scale(0.96); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); }\n .diagnostic-fab-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: navDotPulse 2.4s ease-out infinite; }\n .diagnostic-fab-arrow { flex-shrink: 0; }\n }\n @media (prefers-reduced-motion: reduce) { .diagnostic-fab-dot { animation: none; } .diagnostic-fab { transition: none; } }\n\n .nav-cart {\n position: relative;\n color: rgba(255,255,255,0.8);\n transition: color 0.4s;\n }\n .nav.scrolled .nav-cart { color: var(--gray-600); }\n\n .nav-cart svg {\n width: 22px;\n height: 22px;\n stroke: rgba(255,255,255,0.8);\n transition: stroke 0.4s;\n fill: none;\n stroke-width: 1.5;\n }\n .nav.scrolled .nav-cart svg { stroke: var(--gray-600); }\n .nav.scrolled .nav-cart { color: var(--gray-600); }\n .nav.scrolled .nav-cart-count { background: var(--teal); color: var(--white); }\n\n .nav-cart-count {\n position: absolute;\n top: -6px;\n right: -8px;\n width: 16px;\n height: 16px;\n background: var(--teal);\n border-radius: 50%;\n font-size: 9px;\n font-weight: 600;\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* \u2500\u2500 Hero \u2500\u2500 *\/\n .hero {\n position: relative;\n height: 100vh;\n min-height: 700px;\n overflow: hidden;\n background: linear-gradient(180deg, #e9e9e9 0%, #d8d8d8 100%);\n }\n\n .hero-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center 18%;\n opacity: 1;\n }\n @media (max-width: 700px) { .hero-image { object-position: center 15%; } }\n\n \/* Round 8.1k: video hero pair \u2014 desktop landscape + mobile portrait reel.\n Show only one based on viewport. Both autoplay muted loop. *\/\n .hero-video { object-position: center top; } \/* show heads, not faces (Round 8.1k v2 \u2014 was cropping at the top) *\/\n .hero-video--mobile { display: none; }\n @media (max-width: 760px) {\n .hero-video--desktop { display: none; }\n .hero-video--mobile { display: block; object-position: center 8%; }\n }\n .hero--video .hero-overlay {\n pointer-events: none;\n background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.05) 50%, rgba(10,10,10,0.25) 100%);\n }\n\n .hero-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 180deg,\n rgba(10, 10, 10, 0.15) 0%,\n rgba(10, 10, 10, 0.05) 40%,\n rgba(10, 10, 10, 0.35) 100%\n );\n }\n\n .hero-brand {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -55%);\n text-align: center;\n mix-blend-mode: difference;\n pointer-events: none;\n z-index: 2;\n }\n\n .hero-brand-name {\n font-family: var(--ff-mono);\n font-size: 15vw;\n font-weight: 500;\n color: var(--white);\n letter-spacing: 0.05em;\n line-height: 0.85;\n opacity: 1;\n }\n\n .hero-brand-sub {\n font-family: var(--ff-mono);\n font-size: 1.5vw;\n font-weight: 300;\n color: var(--white);\n letter-spacing: 0.5em;\n margin-top: 16px;\n opacity: 0.9;\n }\n\n .hero-scroll-hint {\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n z-index: 10;\n }\n\n .hero-scroll-hint span {\n font-family: var(--ff-mono);\n font-size: 9px;\n letter-spacing: 0.3em;\n color: rgba(255,255,255,0.5);\n }\n\n .hero-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);\n animation: scroll-pulse 2s ease-in-out infinite;\n }\n\n @keyframes scroll-pulse {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n }\n\n \/* \u2500\u2500 Floating Product Card \u2500\u2500 *\/\n .hero-product-card {\n position: absolute;\n bottom: 60px;\n right: 60px;\n width: 350px;\n background: var(--white);\n border-radius: 20px;\n padding: 32px;\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);\n z-index: 10;\n }\n\n .hero-product-card-badge {\n position: absolute;\n top: 16px;\n left: 16px;\n background: var(--teal);\n color: var(--white);\n font-family: var(--ff-mono);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.1em;\n padding: 4px 10px;\n border-radius: 20px;\n }\n\n .hero-product-card img.hero-product-main {\n width: 140px;\n height: 180px;\n object-fit: contain;\n margin: 0 auto 20px;\n }\n\n .hero-product-card-name {\n font-family: var(--ff-sans);\n font-size: 16px;\n font-weight: 600;\n color: var(--black);\n text-align: center;\n }\n\n .hero-product-card-formula {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 400;\n color: var(--teal);\n text-align: center;\n margin-top: 6px;\n letter-spacing: 0.03em;\n }\n\n .hero-product-card-price {\n font-family: var(--ff-serif);\n font-size: 24px;\n font-weight: 600;\n color: var(--black);\n text-align: center;\n margin-top: 14px;\n }\n\n .hero-product-card-btn {\n display: block;\n width: 100%;\n margin-top: 16px;\n padding: 12px;\n background: var(--black);\n color: var(--white);\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-align: center;\n border-radius: 8px;\n transition: background 0.3s;\n }\n\n .hero-product-card-btn:hover { background: var(--gray-800); }\n\n .hero-product-thumbs {\n display: flex;\n gap: 10px;\n justify-content: center;\n margin-top: 16px;\n }\n\n .hero-product-thumb {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: var(--gray-100);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .hero-product-thumb.active { border-color: var(--teal); }\n\n .hero-product-thumb img {\n width: 30px;\n height: 38px;\n object-fit: contain;\n }\n\n \/* \u2500\u2500 Stats Bar \u2500\u2500 *\/\n .stats-bar {\n background: var(--white);\n border-bottom: 1px solid var(--gray-200);\n padding: 40px 48px;\n }\n\n .stats-bar-inner {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n max-width: 900px;\n margin: 0 auto;\n text-align: center;\n }\n\n .stat-item {\n padding: 0 20px;\n border-right: 1px solid var(--gray-200);\n }\n\n .stat-item:last-child { border-right: none; }\n\n .stat-number {\n font-family: var(--ff-serif);\n font-size: 36px;\n font-weight: 600;\n color: var(--black);\n }\n\n .stat-number .stat-suffix {\n font-size: 20px;\n color: var(--teal);\n font-weight: 500;\n }\n\n .stat-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 400;\n letter-spacing: 0.15em;\n color: var(--gray-400);\n margin-top: 6px;\n text-transform: uppercase;\n }\n\n \/* \u2500\u2500 Headline Section \u2500\u2500 *\/\n .headline-section {\n padding: 140px 48px;\n text-align: center;\n background: var(--white);\n }\n\n .headline-word {\n display: block;\n font-family: var(--ff-serif);\n font-size: clamp(36px, 4vw, 56px);\n line-height: 1.3;\n color: var(--black);\n }\n\n .headline-word--light {\n font-weight: 400;\n font-style: normal;\n }\n\n .headline-word--bold-italic {\n font-weight: 700;\n font-style: italic;\n color: var(--teal);\n }\n\n .headline-desc {\n font-family: var(--ff-sans);\n font-size: 15px;\n font-weight: 300;\n color: var(--gray-600);\n max-width: 420px;\n margin: 32px auto 0;\n line-height: 1.7;\n letter-spacing: 0.01em;\n }\n\n \/* \u2500\u2500 Products \u2500\u2500 *\/\n .products-section {\n padding: 100px 48px 120px;\n background: var(--gray-50);\n }\n\n .products-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 56px;\n }\n\n .products-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n }\n\n .products-subtitle {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-600);\n margin-top: 8px;\n }\n\n .products-link {\n font-family: var(--ff-mono);\n font-size: 12px;\n letter-spacing: 0.15em;\n color: var(--gray-400);\n transition: color 0.3s;\n }\n\n .products-link:hover { color: var(--teal); }\n\n .products-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n }\n\n .product-card {\n background: var(--white);\n border-radius: 16px;\n padding: 28px 20px 24px;\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .product-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .product-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);\n }\n\n .product-card:hover::after { transform: scaleX(1); }\n .product-card:hover .product-card-quick-add { opacity: 1; transform: translateY(0); }\n\n .product-card:nth-child(1)::after { background: var(--teal); }\n .product-card:nth-child(2)::after { background: var(--gold); }\n .product-card:nth-child(3)::after { background: var(--blue); }\n .product-card:nth-child(4)::after { background: var(--pink); }\n .product-card:nth-child(5)::after { background: var(--purple); }\n .product-card:nth-child(6)::after { background: var(--green); }\n .product-card:nth-child(7)::after { background: var(--orange); }\n\n .product-card-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n font-family: var(--ff-mono);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.05em;\n padding: 3px 8px;\n border-radius: 10px;\n background: var(--teal-bg);\n color: var(--teal);\n }\n\n \/* \u2500\u2500 Product card media (Typology hover-swap photo\u2192video) \u2500\u2500\n object-fit: contain \u2014 keeps the full packshot + full video frame visible.\n The shoot\/ packshots have soft gradient backdrops that read well at any size,\n and the application videos are close-up shots that look unnatural when cropped.\n Container has a soft cream background to fill any letterbox margins gracefully. *\/\n .product-card-media {\n position: relative;\n width: 100%;\n aspect-ratio: 1 \/ 1;\n max-height: 360px;\n margin: 0 auto 18px;\n overflow: hidden;\n transform: translateZ(0);\n background: #fafaf8;\n }\n \/* High-specificity selectors to beat the global product-card override at line ~1736 *\/\n .product-card .product-card-media img,\n .product-card .product-card-media video {\n position: absolute !important;\n inset: 0 !important;\n width: 100% !important;\n height: 100% !important;\n max-height: none !important;\n min-height: 0 !important;\n margin: 0 !important;\n object-fit: contain !important;\n object-position: center !important;\n transition: opacity .3s cubic-bezier(.4,0,.2,1);\n will-change: opacity;\n backface-visibility: hidden;\n }\n .product-card .product-card-media img { opacity: 1; z-index: 1; }\n .product-card .product-card-media video { opacity: 0; z-index: 2; pointer-events: none; }\n .product-card:hover .product-card-media video[src],\n .product-card:focus-within .product-card-media video[src],\n .product-card-media.is-playing video[src] { opacity: 1; }\n .product-card:hover .product-card-media:has(video[src]) img,\n .product-card:focus-within .product-card-media:has(video[src]) img,\n .product-card-media.is-playing:has(video[src]) img { opacity: 0; }\n @media (hover: none) { .product-card-media video[src] { opacity: 0; } .product-card-media.is-playing video[src] { opacity: 1; } }\n @media (prefers-reduced-motion: reduce) { .product-card-media img, .product-card-media video { transition: none; } .product-card-media video[src] { opacity: 0 !important; } .product-card-media:has(video[src]) img { opacity: 1 !important; } }\n\n \/* legacy class kept for any leftover markup using <img class=\"product-card-img\"> directly *\/\n .product-card-img {\n width: 100%;\n height: 280px;\n object-fit: contain;\n object-position: center;\n margin: 0 auto 18px;\n display: block;\n }\n\n .product-card-name {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--gray-600);\n margin-bottom: 4px;\n }\n .product-card-active {\n display: block;\n margin-top: 3px;\n color: var(--black);\n font-weight: 600;\n letter-spacing: 0.12em;\n }\n \/* \u2500\u2500 Trust strip (Typology pattern, 2026-04-22) \u2500\u2500 *\/\n .trust-strip { background: #fff; padding: 72px 24px; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }\n .trust-strip-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }\n .trust-pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }\n .trust-icon { width: 38px; height: 38px; fill: none; stroke: #000; stroke-width: 1.2; }\n .trust-label { font-family: var(--ff-mono, 'Josefin Sans', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #000; }\n .trust-text { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,.6); max-width: 240px; }\n @media (max-width: 800px) { .trust-strip { padding: 48px 20px; } .trust-strip-inner { grid-template-columns: 1fr; gap: 36px; } }\n\n .product-card-desc {\n font-family: var(--ff-sans);\n font-size: 12px;\n font-weight: 300;\n color: var(--gray-400);\n margin-bottom: 10px;\n line-height: 1.5;\n }\n\n .product-card-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin-top: auto;\n padding-top: 12px;\n }\n\n .product-card-price {\n font-family: var(--ff-serif);\n font-size: 18px;\n font-weight: 600;\n color: var(--black);\n }\n\n .product-card-quick-add {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.1em;\n color: var(--white);\n background: var(--black);\n padding: 8px 14px;\n border-radius: 6px;\n opacity: 0;\n transform: translateY(8px);\n transition: all 0.3s ease;\n }\n\n .product-card-quick-add:hover { background: var(--teal); }\n\n \/* \u2500\u2500 Values \/ Nos valeurs \u2500\u2500 *\/\n .values-section {\n padding: 80px 48px;\n background: var(--white);\n }\n\n .values-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .value-card {\n text-align: center;\n padding: 32px 20px;\n background: var(--gray-50);\n border-radius: 16px;\n transition: transform 0.3s, box-shadow 0.3s;\n }\n\n .value-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(0,0,0,0.06);\n }\n\n .value-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .value-icon svg {\n width: 32px;\n height: 32px;\n stroke: var(--teal);\n fill: none;\n stroke-width: 1.5;\n }\n\n .value-name {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--black);\n margin-bottom: 8px;\n }\n\n .value-desc {\n font-family: var(--ff-sans);\n font-size: 12px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 Clinical Results \u2500\u2500 *\/\n .clinical-section {\n background: var(--black);\n padding: 100px 48px;\n }\n\n .clinical-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--gold);\n text-align: center;\n margin-bottom: 16px;\n }\n\n .clinical-title {\n font-family: var(--ff-serif);\n font-size: clamp(24px, 2.5vw, 36px);\n font-weight: 500;\n color: var(--white);\n text-align: center;\n margin-bottom: 64px;\n }\n\n .clinical-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .clinical-stat {\n text-align: center;\n position: relative;\n }\n\n .clinical-stat::after {\n content: '';\n position: absolute;\n right: 0;\n top: 20%;\n height: 60%;\n width: 1px;\n background: rgba(255,255,255,0.1);\n }\n\n .clinical-stat:last-child::after { display: none; }\n\n .clinical-number {\n font-family: var(--ff-serif);\n font-size: clamp(40px, 4vw, 64px);\n font-weight: 700;\n color: var(--white);\n line-height: 1;\n }\n\n .clinical-number .accent {\n color: var(--gold);\n }\n\n .clinical-desc {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n margin-top: 12px;\n line-height: 1.5;\n }\n\n .clinical-footnote {\n font-family: var(--ff-mono);\n font-size: 10px;\n color: rgba(255,255,255,0.25);\n text-align: center;\n margin-top: 48px;\n letter-spacing: 0.05em;\n }\n\n \/* \u2500\u2500 Editorial Split \u2500\u2500 *\/\n .split-section {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 600px;\n }\n\n .split-image {\n position: relative;\n overflow: hidden;\n }\n\n .split-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n .split-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 80px 80px 80px 64px;\n background: var(--white);\n }\n\n .split-eyebrow {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.3em;\n color: var(--teal);\n margin-bottom: 20px;\n }\n\n .split-quote {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 2.5vw, 36px);\n font-weight: 400;\n font-style: italic;\n color: var(--black);\n line-height: 1.4;\n margin-bottom: 24px;\n }\n\n .split-desc {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.8;\n max-width: 400px;\n margin-bottom: 36px;\n }\n\n .split-link {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2em;\n color: var(--teal);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: gap 0.3s;\n }\n\n .split-link:hover { gap: 14px; }\n\n \/* \u2500\u2500 Ingredient Spotlight \u2500\u2500 *\/\n .ingredients-section {\n padding: 120px 48px;\n background: var(--white);\n }\n\n .ingredients-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n max-width: 1100px;\n margin: 0 auto;\n align-items: center;\n }\n\n .ingredients-visual {\n text-align: center;\n }\n\n .ingredients-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 16px;\n }\n\n .ingredients-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n margin-bottom: 24px;\n }\n\n .ingredients-bottle-wrap {\n padding: 32px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .ingredients-bottle {\n width: auto;\n height: clamp(280px, 32vw, 420px);\n max-height: 420px;\n max-width: 100%;\n object-fit: contain;\n display: block;\n margin: 0 auto;\n filter: drop-shadow(0 24px 56px rgba(0,0,0,0.14));\n }\n .ingredients-bottle-caption {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--gray-500);\n text-align: center;\n margin-top: 8px;\n }\n .ingredients-bottle-name {\n font-family: var(--ff-serif);\n font-size: 20px;\n color: var(--black);\n text-align: center;\n margin-top: 4px;\n }\n\n .ingredients-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n }\n\n .ingredient-card {\n padding: 24px;\n border-left: 3px solid;\n background: var(--gray-50);\n border-radius: 0 12px 12px 0;\n }\n\n .ingredient-card:nth-child(1) { border-left-color: var(--teal); }\n .ingredient-card:nth-child(2) { border-left-color: var(--gold); }\n .ingredient-card:nth-child(3) { border-left-color: var(--blue); }\n .ingredient-card:nth-child(4) { border-left-color: var(--pink); }\n\n .ingredient-name {\n font-family: var(--ff-mono);\n font-size: 13px;\n font-weight: 600;\n color: var(--black);\n margin-bottom: 4px;\n }\n\n .ingredient-concentration {\n font-family: var(--ff-serif);\n font-size: 22px;\n font-weight: 600;\n color: var(--teal);\n margin-bottom: 8px;\n }\n\n .ingredient-benefit {\n font-family: var(--ff-sans);\n font-size: 12px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.5;\n }\n\n \/* \u2500\u2500 Routine Builder \u2500\u2500 *\/\n .routine-section {\n padding: 100px 48px;\n background: var(--gray-50);\n }\n\n .routine-header {\n text-align: center;\n margin-bottom: 64px;\n }\n\n .routine-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 16px;\n }\n\n .routine-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n }\n\n .routine-steps {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 32px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .routine-step {\n background: var(--white);\n border-radius: 20px;\n padding: 36px 28px;\n text-align: center;\n position: relative;\n }\n\n .routine-step-number {\n font-family: var(--ff-serif);\n font-size: 48px;\n font-weight: 700;\n color: var(--gray-200);\n line-height: 1;\n margin-bottom: 20px;\n }\n\n .routine-step img {\n width: 100%;\n height: 200px;\n object-fit: contain;\n margin-bottom: 20px;\n }\n\n .routine-step-name {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--black);\n margin-bottom: 6px;\n }\n\n .routine-step-desc {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.6;\n margin-bottom: 12px;\n }\n\n .routine-step-price {\n font-family: var(--ff-serif);\n font-size: 16px;\n font-weight: 600;\n color: var(--teal);\n }\n\n .routine-total {\n text-align: center;\n margin-top: 48px;\n padding: 24px;\n background: var(--white);\n border-radius: 12px;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .routine-total-label {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.15em;\n color: var(--gray-600);\n }\n\n .routine-total-price {\n font-family: var(--ff-serif);\n font-size: 28px;\n font-weight: 700;\n color: var(--black);\n }\n\n .routine-total-price .da {\n font-size: 16px;\n color: var(--gray-400);\n font-weight: 400;\n }\n\n \/* \u2500\u2500 Skin Diagnostic CTA \u2500\u2500 *\/\n .diagnostic-section {\n background: var(--teal);\n padding: 80px 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .diagnostic-left {\n flex: 1;\n }\n\n .diagnostic-title {\n font-family: var(--ff-serif);\n font-size: clamp(24px, 2.5vw, 32px);\n font-weight: 600;\n color: var(--white);\n margin-bottom: 8px;\n }\n\n .diagnostic-subtitle {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: rgba(255,255,255,0.85);\n }\n\n .diagnostic-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 16px 32px;\n background: var(--white);\n color: var(--black);\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.15em;\n border-radius: 8px;\n transition: all 0.3s;\n }\n\n .diagnostic-btn:hover {\n background: var(--black);\n color: var(--white);\n }\n\n \/* \u2500\u2500 Testimonials \u2500\u2500 *\/\n .testimonials-section {\n padding: 100px 48px;\n background: var(--white);\n }\n\n .testimonials-header {\n text-align: center;\n margin-bottom: 56px;\n }\n\n .testimonials-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 16px;\n }\n\n .testimonials-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n }\n\n .testimonials-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .testimonial-card {\n background: var(--gray-50);\n border-radius: 16px;\n padding: 32px;\n position: relative;\n }\n\n .testimonial-stars {\n display: flex;\n gap: 3px;\n margin-bottom: 16px;\n }\n\n .testimonial-stars svg {\n width: 14px;\n height: 14px;\n fill: var(--gold);\n }\n\n .testimonial-text {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-800);\n line-height: 1.7;\n margin-bottom: 20px;\n font-style: italic;\n }\n\n .testimonial-author {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .testimonial-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--teal);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 600;\n color: var(--white);\n }\n\n .testimonial-name {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 600;\n color: var(--black);\n }\n\n .testimonial-badge {\n display: inline-block;\n font-family: var(--ff-mono);\n font-size: 9px;\n font-weight: 500;\n letter-spacing: 0.05em;\n padding: 2px 8px;\n border-radius: 10px;\n margin-top: 4px;\n }\n\n .testimonial-badge--oily {\n background: #E8F5E9;\n color: #388E3C;\n }\n\n .testimonial-badge--sensitive {\n background: #FFF3E0;\n color: #E65100;\n }\n\n .testimonial-badge--combination {\n background: #E3F2FD;\n color: #1565C0;\n }\n\n \/* \u2500\u2500 Instagram \u2500\u2500 *\/\n .instagram-section {\n padding: 80px 48px;\n background: var(--gray-50);\n }\n\n .instagram-header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .instagram-handle {\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.1em;\n color: var(--black);\n }\n\n .instagram-cta {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n margin-top: 6px;\n }\n\n .instagram-grid {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 6px;\n }\n\n .instagram-photo {\n aspect-ratio: 1;\n overflow: hidden;\n border-radius: 8px;\n cursor: pointer;\n position: relative;\n }\n\n .instagram-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s, filter 0.5s;\n }\n\n .instagram-photo:hover img {\n transform: scale(1.08);\n filter: brightness(0.85);\n }\n\n .instagram-photo::after {\n content: '';\n position: absolute;\n inset: 0;\n background: rgba(89, 195, 185, 0);\n transition: background 0.3s;\n }\n\n .instagram-photo:hover::after {\n background: rgba(89, 195, 185, 0.15);\n }\n\n \/* \u2500\u2500 Face Gallery \u2500\u2500 *\/\n .gallery-section {\n padding: 100px 48px;\n background: var(--white);\n text-align: center;\n }\n\n .gallery-frame {\n width: 70%;\n max-width: 800px;\n margin: 0 auto;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n }\n\n .gallery-frame img {\n width: 100%;\n display: block;\n }\n\n .gallery-quote {\n font-family: var(--ff-serif);\n font-size: clamp(18px, 2vw, 24px);\n font-weight: 400;\n font-style: italic;\n color: var(--gray-800);\n max-width: 600px;\n margin: 40px auto 0;\n line-height: 1.5;\n }\n\n .gallery-credit {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 400;\n letter-spacing: 0.3em;\n color: var(--gray-400);\n margin-top: 16px;\n }\n\n \/* \u2500\u2500 Newsletter \u2500\u2500 *\/\n .newsletter-section {\n padding: 80px 48px;\n background: var(--gray-50);\n text-align: center;\n }\n\n .newsletter-title {\n font-family: var(--ff-serif);\n font-size: clamp(24px, 2.5vw, 36px);\n font-weight: 500;\n color: var(--black);\n margin-bottom: 12px;\n }\n\n .newsletter-desc {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-600);\n margin-bottom: 32px;\n }\n\n .newsletter-form {\n display: flex;\n gap: 12px;\n max-width: 480px;\n margin: 0 auto;\n }\n\n .newsletter-input {\n flex: 1;\n padding: 14px 20px;\n border: 1px solid var(--gray-200);\n border-radius: 8px;\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--black);\n background: var(--white);\n outline: none;\n transition: border-color 0.3s;\n }\n\n .newsletter-input:focus { border-color: var(--teal); }\n\n .newsletter-input::placeholder {\n color: var(--gray-400);\n }\n\n .newsletter-btn {\n padding: 14px 28px;\n background: var(--black);\n color: var(--white);\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.15em;\n border-radius: 8px;\n transition: background 0.3s;\n white-space: nowrap;\n }\n\n .newsletter-btn:hover { background: var(--teal); }\n\n .newsletter-privacy {\n font-family: var(--ff-sans);\n font-size: 11px;\n font-weight: 300;\n color: var(--gray-400);\n margin-top: 16px;\n }\n\n \/* \u2500\u2500 Footer \u2500\u2500 *\/\n .footer {\n background: var(--black);\n padding: 80px 48px 40px;\n }\n\n .footer-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 48px;\n margin-bottom: 56px;\n }\n\n .footer-brand {\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.3em;\n color: var(--white);\n margin-bottom: 16px;\n }\n\n .footer-tagline {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n line-height: 1.7;\n max-width: 280px;\n margin-bottom: 24px;\n }\n\n .footer-certifications {\n display: flex;\n gap: 16px;\n }\n\n .footer-cert {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.12);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .footer-cert svg {\n width: 18px;\n height: 18px;\n stroke: var(--teal);\n fill: none;\n stroke-width: 1.5;\n }\n\n .footer-col-title {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--white);\n margin-bottom: 20px;\n }\n\n .footer-col a {\n display: block;\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n margin-bottom: 12px;\n transition: color 0.3s;\n }\n\n .footer-col a:hover { color: var(--teal); }\n\n .footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 24px;\n border-top: 1px solid rgba(255, 255, 255, 0.06);\n }\n\n .footer-copy {\n font-family: var(--ff-sans);\n font-size: 11px;\n font-weight: 300;\n color: var(--gray-400);\n }\n\n .footer-social {\n display: flex;\n gap: 20px;\n }\n\n .footer-social a {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n color: var(--gray-400);\n transition: color 0.3s;\n }\n\n .footer-social a:hover { color: var(--teal); }\n\n .footer-payment {\n display: flex;\n gap: 12px;\n align-items: center;\n margin-top: 16px;\n }\n\n .footer-payment span {\n font-family: var(--ff-mono);\n font-size: 10px;\n color: rgba(255,255,255,0.25);\n letter-spacing: 0.05em;\n }\n\n \/* \u2500\u2500 Animations \u2500\u2500 *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n }\n\n .reveal-up {\n opacity: 0;\n transform: translateY(60px);\n }\n\n .reveal-left {\n opacity: 0;\n transform: translateX(-40px);\n }\n\n .reveal-right {\n opacity: 0;\n transform: translateX(40px);\n }\n\n .reveal-scale {\n opacity: 0;\n transform: scale(0.92);\n }\n\n \/* \u2500\u2500 Counter Animation \u2500\u2500 *\/\n .counter-animated {\n display: inline-block;\n }\n\n \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n @media (max-width: 1200px) {\n .products-grid { grid-template-columns: repeat(3, 1fr); }\n }\n\n @media (max-width: 1024px) {\n .products-grid { grid-template-columns: repeat(2, 1fr); }\n .split-section { grid-template-columns: 1fr; }\n .split-content { padding: 60px 48px; }\n .ingredients-inner { grid-template-columns: 1fr; }\n .ingredients-visual { margin-bottom: 40px; }\n .clinical-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }\n .clinical-stat::after { display: none; }\n .values-grid { grid-template-columns: repeat(2, 1fr); }\n .routine-steps { grid-template-columns: 1fr; max-width: 400px; }\n .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }\n .instagram-grid { grid-template-columns: repeat(3, 1fr); }\n .footer-grid { grid-template-columns: 1fr 1fr; }\n .stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }\n .stat-item { border-right: none; padding: 12px 20px; }\n .hero-product-card { width: 300px; }\n .nav-links { display: none; }\n }\n\n @media (max-width: 640px) {\n .marquee-item { font-size: 10px; padding: 0 24px; }\n .nav { padding: 20px 24px; }\n .hero-brand-name { font-size: 20vw; }\n .hero-brand-sub { font-size: 2.5vw; }\n .hero-product-card {\n right: 16px;\n bottom: 24px;\n width: 260px;\n padding: 20px;\n }\n .hero-product-card img.hero-product-main { width: 100px; height: 130px; }\n .hero-scroll-hint { display: none; }\n .stats-bar { padding: 24px; }\n .stats-bar-inner { grid-template-columns: 1fr 1fr; gap: 16px; }\n .stat-number { font-size: 28px; }\n .headline-section { padding: 80px 24px; }\n .products-section { padding: 60px 24px 80px; }\n .products-grid { grid-template-columns: 1fr; gap: 20px; }\n .values-section { padding: 60px 24px; }\n .values-grid { grid-template-columns: 1fr 1fr; gap: 16px; }\n .clinical-section { padding: 60px 24px; }\n .clinical-grid { grid-template-columns: 1fr 1fr; gap: 24px; }\n .clinical-number { font-size: 36px; }\n .split-content { padding: 48px 24px; }\n .ingredients-section { padding: 80px 24px; }\n .ingredients-list { grid-template-columns: 1fr; }\n .routine-section { padding: 60px 24px; }\n .diagnostic-section {\n flex-direction: column;\n gap: 24px;\n text-align: center;\n padding: 48px 24px;\n }\n .diagnostic-btn { width: 100%; max-width: 320px; justify-content: center; min-height: 52px; -webkit-tap-highlight-color: transparent; }\n .diagnostic-btn:active { transform: scale(0.98); }\n .testimonials-section { padding: 60px 24px; }\n .instagram-section { padding: 60px 24px; }\n .instagram-grid { grid-template-columns: repeat(2, 1fr); }\n .gallery-section { padding: 60px 24px; }\n .gallery-frame { width: 100%; }\n .newsletter-section { padding: 60px 24px; }\n .newsletter-form { flex-direction: column; }\n .footer { padding: 48px 24px 32px; }\n .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n .footer-bottom { flex-direction: column; gap: 16px; }\n }\n \/* === GLOBAL-SIZE-FIX === *\/\n\/* Model\/lifestyle photos: constrain height *\/\n.hero-photo img, .showcase-photo img, .bento-item img, .closeup img, .face-break img, .face-photo img, .quote-photo img, [class*=\"gallery\"] img, [class*=\"editorial\"] img, [class*=\"split\"] img { max-height: 500px; object-fit: cover; }\n.bento-grid { grid-template-rows: minmax(200px, 280px) minmax(200px, 280px); }\n.closeup, .face-break, [class*=\"face-break\"] { max-height: 450px; }\n\/* Product bottles: enforce minimum size *\/\n.product-card-image img, .product-card img, [class*=\"product-card\"] img, .routine-step img { min-height: 200px !important; height: auto; width: auto; max-height: 300px; object-fit: contain; }\n.ingredients-bottle, img.ingredients-bottle { min-height: 0 !important; max-height: 480px !important; height: clamp(320px, 38vw, 480px) !important; width: auto !important; }\n\/* Product card containers: tighter *\/\n.product-card-image, [class*=\"product-card-img\"] { padding: 16px !important; aspect-ratio: 3\/4; display: flex; align-items: center; justify-content: center; }\n\n\/* ============================================================ *\/\n\/* ROUTINES PAR BESOIN \u2014 4 categories *\/\n\/* ============================================================ *\/\n.routine-subtitle { max-width: 620px; margin: 16px auto 0; text-align: center; font-size: 15px; line-height: 1.65; color: rgba(0,0,0,.58); letter-spacing: .01em; }\n.routine-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 64px 0 32px; align-items: start; }\n.routine-category { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.08); text-decoration: none; color: inherit; overflow: hidden; transition: border-color .35s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1); }\n.routine-category::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 0 var(--swatch); opacity: 0; transition: opacity .35s ease; }\n.routine-category:hover { border-color: rgba(0,0,0,.5); transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(0,0,0,.28); }\n.routine-category:hover::after { opacity: .08; box-shadow: 0 0 0 4px var(--swatch); }\n.routine-category:hover .routine-category-photo img { transform: scale(1.04); }\n.routine-category-photo { position: relative; aspect-ratio: 1\/1; background: #f5f5f2; overflow: hidden; transform: translateZ(0); }\n.routine-category-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); z-index: 1; will-change: opacity, transform; backface-visibility: hidden; display: block; }\n.routine-category-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s cubic-bezier(.4,0,.2,1); z-index: 2; pointer-events: none; will-change: opacity; backface-visibility: hidden; display: block; }\n.routine-category:hover .routine-category-photo video[src],\n.routine-category:focus-within .routine-category-photo video[src],\n.routine-category-photo.is-playing video[src] { opacity: 1; }\n.routine-category:hover .routine-category-photo:has(video[src]) img,\n.routine-category:focus-within .routine-category-photo:has(video[src]) img,\n.routine-category-photo.is-playing:has(video[src]) img { opacity: 0; }\n.routine-category-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(0,0,0,.28); position: relative; z-index: 0; }\n.routine-category-photo-placeholder svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.2; }\n.routine-category-photo-placeholder span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }\n.routine-category-photo:has(img),\n.routine-category-photo:has(video[src]) { background: #f5f5f2; }\n.routine-category-photo:has(img) .routine-category-photo-placeholder,\n.routine-category-photo:has(video[src]) .routine-category-photo-placeholder { display: none; }\n@media (hover: none) { .routine-category-photo video[src] { opacity: 0; } .routine-category-photo.is-playing video[src] { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .routine-category-photo img, .routine-category-photo video { transition: none; } .routine-category-photo video[src] { opacity: 0 !important; } .routine-category-photo:has(video[src]) img { opacity: 1 !important; } }\n.routine-category-swatch { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--swatch); z-index: 3; transform-origin: left; transform: scaleX(.85); transition: transform .45s cubic-bezier(.4,0,.2,1); }\n.routine-category:hover .routine-category-swatch { transform: scaleX(1); }\n.routine-category-body { padding: 26px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; gap: 0; background: #fff; }\n.routine-category-name { font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; color: #000; }\n.routine-category-desc { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,.6); margin-bottom: 18px; flex-grow: 1; }\n.routine-category-pack { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 8px; border-top: 1px solid rgba(0,0,0,.08); margin-bottom: 14px; }\n.routine-category-pack-label { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(0,0,0,.45); font-weight: 500; }\n.routine-category-pack-price { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .01em; color: #000; }\n.routine-category-cta { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #000; display: inline-flex; align-items: center; gap: 8px; transition: gap .3s cubic-bezier(.4,0,.2,1), color .25s; }\n.routine-category-cta::after { content: '\u2192'; transition: transform .35s cubic-bezier(.4,0,.2,1); display: inline-block; }\n.routine-category:hover .routine-category-cta { color: var(--swatch); }\n.routine-category:hover .routine-category-cta::after { transform: translateX(6px); }\n.routine-note { margin: 40px auto 0; max-width: 620px; text-align: center; font-size: 12px; color: rgba(0,0,0,.5); letter-spacing: .02em; }\n\n\n@media (max-width: 900px) {\n .routine-categories { grid-template-columns: repeat(2, 1fr); gap: 16px; }\n}\n@media (max-width: 560px) {\n .routine-categories { grid-template-columns: 1fr; }\n}\n\n\/* ============================================================ *\/\n\/* NOTRE HISTOIRE *\/\n\/* ============================================================ *\/\n.histoire-section { padding: 120px 48px; background: #fff; border-top: 1px solid rgba(0,0,0,.08); }\n.histoire-inner { max-width: 1240px; margin: 0 auto; }\n.histoire-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-bottom: 18px; }\n.histoire-title { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; max-width: 820px; margin-bottom: 64px; }\n.histoire-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }\n.histoire-text p { font-size: 16px; line-height: 1.75; color: rgba(0,0,0,.75); margin-bottom: 20px; }\n.histoire-text strong { font-weight: 600; color: #000; }\n.histoire-timeline { border-left: 1px solid rgba(0,0,0,.18); padding-left: 32px; }\n.histoire-milestone { margin-bottom: 32px; }\n.histoire-milestone:last-child { margin-bottom: 0; }\n.histoire-milestone-year { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: .02em; margin-bottom: 6px; }\n.histoire-milestone-text { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.62); }\n@media (max-width: 900px) {\n .histoire-section { padding: 80px 24px; }\n .histoire-grid { grid-template-columns: 1fr; gap: 48px; }\n .histoire-title { margin-bottom: 40px; }\n}\n\n\/* ============================================================ *\/\n\/* BLOG *\/\n\/* ============================================================ *\/\n.blog-section { padding: 120px 48px; background: #fff; }\n.blog-header { max-width: 1240px; margin: 0 auto 64px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; }\n.blog-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,0,0,.55); grid-column: 1 \/ -1; }\n.blog-title { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; margin: 12px 0 0; }\n.blog-view-all { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #000; text-decoration: none; white-space: nowrap; padding-bottom: 8px; border-bottom: 1px solid #000; }\n.blog-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }\n.blog-card { background: #fff; border: 1px solid rgba(0,0,0,.08); overflow: hidden; transition: border-color .25s ease, transform .35s ease; }\n.blog-card:hover { border-color: rgba(0,0,0,.35); transform: translateY(-3px); }\n.blog-card-img { aspect-ratio: 4\/3; background: #f5f5f2; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid rgba(0,0,0,.06); overflow: hidden; }\n.blog-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }\n.blog-card-img-placeholder { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 120px; color: rgba(0,0,0,.12); letter-spacing: -.02em; line-height: 1; }\n.blog-card-body { padding: 28px 26px 32px; }\n.blog-card-meta { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.48); margin-bottom: 14px; }\n.blog-card-title { font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.005em; margin-bottom: 12px; color: #000; }\n.blog-card-excerpt { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.62); margin-bottom: 20px; }\n.blog-card-cta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #000; }\n@media (max-width: 900px) {\n .blog-section { padding: 80px 24px; }\n .blog-header { grid-template-columns: 1fr; gap: 16px; }\n .blog-grid { grid-template-columns: 1fr; gap: 20px; }\n}\n\n\/* ============================================================ *\/\n\/* CONTACT (Typology-aligned: white, typography-forward) *\/\n\/* ============================================================ *\/\n.contact-section { padding: 120px 48px; background: #fff; color: #000; border-top: 1px solid rgba(0,0,0,.08); }\n.contact-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }\n.contact-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-bottom: 16px; }\n.contact-title { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 24px; color: #000; }\n.contact-desc { font-size: 15px; line-height: 1.7; color: rgba(0,0,0,.65); margin-bottom: 40px; max-width: 440px; }\n.contact-channels { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(0,0,0,.12); }\n.contact-channel { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.12); color: #000; text-decoration: none; transition: padding .25s ease; }\n.contact-channel:hover { padding-left: 8px; }\n.contact-channel-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.52); }\n.contact-channel-value { font-size: 15px; letter-spacing: .01em; }\n.contact-form { background: #fafaf8; padding: 40px 36px; border: 1px solid rgba(0,0,0,.08); }\n.contact-field { margin-bottom: 20px; }\n.contact-field label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(0,0,0,.62); margin-bottom: 8px; }\n.contact-field input, .contact-field select, .contact-field textarea { width: 100%; background: #fff; border: 1px solid rgba(0,0,0,.14); color: #000; padding: 14px 16px; font-family: inherit; font-size: 14px; letter-spacing: .01em; transition: border-color .2s ease; }\n.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: none; border-color: #000; }\n.contact-field textarea { resize: vertical; min-height: 120px; }\n.contact-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 20px) 18px, calc(100% - 14px) 18px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; }\n.contact-submit { width: 100%; margin-top: 12px; padding: 16px; background: #000; color: #fff; border: none; font-family: inherit; font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease; }\n.contact-submit:hover { background: #DD5C63; color: #fff; }\n.contact-note { font-size: 11px; color: rgba(0,0,0,.48); margin-top: 16px; letter-spacing: .02em; text-align: center; }\n@media (max-width: 900px) {\n .contact-section { padding: 80px 24px; }\n .contact-inner { grid-template-columns: 1fr; gap: 48px; }\n .contact-form { padding: 32px 24px; }\n}\n\n\/* ============================================================ *\/\n\/* SOCIAL STRIP (under Instagram grid) *\/\n\/* ============================================================ *\/\n.social-strip { display: flex; justify-content: center; gap: 12px; margin: 40px auto 0; flex-wrap: wrap; max-width: 720px; }\n.social-strip-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid rgba(0,0,0,.14); color: #000; text-decoration: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; transition: background .2s ease, color .2s ease, border-color .2s ease; }\n.social-strip-link:hover { background: #000; color: #fff; border-color: #000; }\n.social-strip-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }\n.instagram-handle { text-decoration: none; color: inherit; }\n.instagram-handle:hover { color: #DD5C63; }\n@media (max-width: 560px) {\n .social-strip { gap: 8px; }\n .social-strip-link { padding: 10px 14px; font-size: 11px; }\n}\n\n\/* ============================================================ *\/\n\/* ICON SWAP SYSTEM (Typology-style ready) *\/\n\/* Drop client-provided icons into .routine-category-icon-slot *\/\n\/* as <img decoding=\"async\" src=\"\"> and the SVG placeholder will be hidden. *\/\n\/* ============================================================ *\/\n.routine-category-icon-slot img + svg,\n.routine-category-icon-slot:has(img) svg { display: none; }\n<\/style>\n<\/head>\n\n<body>\n\n \n \n\n \n \n <a href=\"#\" class=\"diagnostic-fab\" data-quiz-trigger aria-label=\"Diagnostic peau en 2 minutes\">\n <span class=\"diagnostic-fab-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"diagnostic-fab-label\">DIAGNOSTIC<\/span>\n <svg class=\"diagnostic-fab-arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" width=\"14\" height=\"14\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n\n \n\n \n <section class=\"hero hero--video\">\n <video class=\"hero-image hero-video hero-video--desktop\" autoplay muted loop playsinline preload=\"auto\" disablepictureinpicture poster=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-white-scaled.png\">\n <source src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hero-desktop-v4-pose3.mp4\" type=\"video\/mp4\">\n <\/video>\n <video class=\"hero-image hero-video hero-video--mobile\" autoplay muted loop playsinline preload=\"auto\" disablepictureinpicture poster=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-white-scaled.png\">\n <source src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hero-mobile-v4-pose3.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"hero-overlay\"><\/div>\n\n <div class=\"hero-product-card reveal-up\">\n <span class=\"hero-product-card-badge\">BEST-SELLER<\/span>\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"Serum Equilibrant\" class=\"hero-product-main\">\n <div class=\"hero-product-card-name\">S\u00e9rum \u00c9quilibrant<\/div>\n <div class=\"hero-product-card-formula\">Niacinamide 5% + Zinc PCA<\/div>\n <div class=\"hero-product-card-price\">2,500 DA<\/div>\n <button class=\"hero-product-card-btn\">AJOUTER AU PANIER<\/button>\n <div class=\"hero-product-thumbs\">\n <div class=\"hero-product-thumb active\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"Serum Equilibrant\">\n <\/div>\n <div class=\"hero-product-thumb\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/vit-c.png\" alt=\"Serum Vitamine C\">\n <\/div>\n <div class=\"hero-product-thumb\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hydratant.png\" alt=\"Serum Hydratant\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-scroll-hint\">\n <span>D\u00c9FILER<\/span>\n <div class=\"hero-scroll-line\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"stats-bar\">\n <div class=\"stats-bar-inner\">\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"8\">0<\/span> <span class=\"stat-suffix\">soins<\/span><\/div>\n <div class=\"stat-label\">Une gamme compl\u00e8te<\/div>\n <\/div>\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"100\">0<\/span><span class=\"stat-suffix\">%<\/span><\/div>\n <div class=\"stat-label\">Routine pens\u00e9e pour respecter l’\u00e9quilibre de la peau<\/div>\n <\/div>\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"0\">0<\/span><\/div>\n <div class=\"stat-label\">Compromis entre efficacit\u00e9 et douceur<\/div>\n <\/div>\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"1\">0<\/span><\/div>\n <div class=\"stat-label\">Objectif : une peau saine, pas agress\u00e9e<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"headline-section\">\n <div class=\"headline-word headline-word--light reveal\">SIMPLE,<\/div>\n <div class=\"headline-word headline-word--light reveal\">RAPIDE,<\/div>\n <div class=\"headline-word headline-word--bold-italic reveal\">Efficace.<\/div>\n <p class=\"headline-desc reveal\">\n Des formulations dermo-cosm\u00e9tiques \n avec des concentrations actives test\u00e9es dermatologiquement.\n Sans compromis.\n <\/p>\n <\/section>\n\n \n \n <section class=\"products-section\" id=\"produits\">\n <div class=\"products-header\">\n <div>\n <h2 class=\"products-title reveal-left\">Nos produits<\/h2>\n <p class=\"products-subtitle reveal\">8 soins. 0 compromis. 1 objectif : une peau saine, pas agress\u00e9e.<\/p>\n <\/div>\n <a href=\"#\" class=\"products-link reveal\">TOUT VOIR →<\/a>\n <\/div>\n\n <div class=\"products-grid\">\n\n \n <div class=\"product-card reveal-up\" data-product=\"gel-moussant\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/gel.png\" alt=\"Gel Moussant Anti-Imperfections\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">GEL MOUSSANT <span class=\"product-card-active\">\u2014 ANTI-IMPERFECTIONS<\/span><\/div>\n <div class=\"product-card-desc\">Nettoie en profondeur tout en respectant l’\u00e9quilibre naturel. D\u00e9sobstrue les pores, laisse la peau fra\u00eeche et nette.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 450 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"serum-equilibrant\">\n <span class=\"product-card-badge\">BEST-SELLER<\/span>\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"S\u00e9rum \u00c9quilibrant\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">S\u00c9RUM \u00c9QUILIBRANT <span class=\"product-card-active\">\u2014 NIACINAMIDE 5% + ZINC PCA<\/span><\/div>\n <div class=\"product-card-desc\">R\u00e9gule la production de s\u00e9bum, r\u00e9duit visiblement les imperfections, resserre les pores et apaise les rougeurs.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 500 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"emulsion\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/emulsion.png\" alt=\"\u00c9mulsion Anti-Imperfection\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">\u00c9MULSION <span class=\"product-card-active\">\u2014 ANTI-IMPERFECTION<\/span><\/div>\n <div class=\"product-card-desc\">Soin l\u00e9ger qui hydrate sans alourdir. R\u00e9gule l’exc\u00e8s de s\u00e9bum, pr\u00e9vient les imperfections, fini mat doux et confortable.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 550 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"creme-cica\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/cica.png\" alt=\"Cr\u00e8me Cica\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">CR\u00c8ME CICA <span class=\"product-card-active\">\u2014 APAISE & R\u00c9PARE<\/span><\/div>\n <div class=\"product-card-desc\">Renforce la barri\u00e8re cutan\u00e9e, r\u00e9duit les rougeurs, calme l’inconfort. Hydratation intense pour les peaux fragilis\u00e9es.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 450 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"serum-hydratant\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hydratant.png\" alt=\"S\u00e9rum Hydratant\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">S\u00c9RUM HYDRATANT <span class=\"product-card-active\">\u2014 ACIDE HYALURONIQUE + TR\u00c9HALOSE<\/span><\/div>\n <div class=\"product-card-desc\">Hydratation intense et imm\u00e9diate. Repulpe, lisse et am\u00e9liore l’\u00e9lasticit\u00e9. Renforce la barri\u00e8re d’hydratation.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 500 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"creme-eclaircissante\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/eclaircissante.png\" alt=\"Cr\u00e8me \u00c9claircissante\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">CR\u00c8ME \u00c9CLAIRCISSANTE <span class=\"product-card-active\">\u2014 UNIFIE LE TEINT<\/span><\/div>\n <div class=\"product-card-desc\">R\u00e9duit l’apparence des taches et zones irr\u00e9guli\u00e8res. Hydrate en profondeur, r\u00e9v\u00e8le un teint lumineux et homog\u00e8ne.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 980 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"serum-eclaircissant\">\n <span class=\"product-card-badge\">NOUVEAU<\/span>\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/vit-c.png\" alt=\"S\u00e9rum \u00c9claircissant\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">S\u00c9RUM \u00c9CLAIRCISSANT <span class=\"product-card-active\">\u2014 VITAMINE C 10% STABLE<\/span><\/div>\n <div class=\"product-card-desc\">Antioxydant puissant \u00e0 la Vitamine C 10% Stable, Acide f\u00e9rulique, Centella Asiatica et Vitamine E. \u00c9clat et unification du teint, att\u00e9nue les taches pigmentaires.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 790 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"ecran-solaire\">\n <span class=\"product-card-badge\">2 TEINTES<\/span>\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/ecran-solaire-1.png\" alt=\"\u00c9cran Solaire SPF 50+ Toucher Sec\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">\u00c9CRAN SOLAIRE <span class=\"product-card-active\">\u2014 SPF 50+ TOUCHER SEC<\/span><\/div>\n <div class=\"product-card-desc\">Prot\u00e8ge la peau contre les effets nocifs des rayons UVA\/UVB avec un fini toucher sec. Teint\u00e9 ou Invisible.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 290 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <section class=\"routine-section\" id=\"routines\">\n <div class=\"routine-header\">\n <div class=\"routine-label reveal\">ROUTINES PAR BESOIN<\/div>\n <h2 class=\"routine-title reveal\">Trouvez la routine faite pour votre peau<\/h2>\n <p class=\"routine-subtitle reveal\">Quatre protocoles cibl\u00e9s. Chaque routine inclut un pack produits adapt\u00e9 \u00e0 votre pr\u00e9occupation.<\/p>\n <\/div>\n\n <div class=\"routine-categories\">\n <a href=\"\/routine-peau-seche\/\" class=\"routine-category reveal-up\" data-routine=\"peau-seche\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#589DD2;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"peau-seche\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/peau-seche.jpg\" alt=\"Pack Peau s\u00e8che \u2014 S\u00e9rum Hydratant + Cr\u00e8me Cica\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">Peau s\u00e8che<\/div>\n <div class=\"routine-category-desc\">Hydratation intense et barri\u00e8re cutan\u00e9e. Acide hyaluronique, c\u00e9ramides, cica.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">8 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">3 000 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/routine-taches-pigmentaires\/\" class=\"routine-category reveal-up\" data-routine=\"taches-pigmentaires\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#E2AD53;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"taches-pigmentaires\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/taches-pigmentaires.jpg\" alt=\"Pack Taches pigmentaires \u2014 S\u00e9rum \u00c9claircissant + \u00c9cran Solaire\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">Taches pigmentaires<\/div>\n <div class=\"routine-category-desc\">\u00c9clat et uniformit\u00e9. Vitamine C, r\u00e9tinol, \u00e9cran solaire SPF 50+.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">9 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">3 430 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/routine-anti-imperfections\/\" class=\"routine-category reveal-up\" data-routine=\"anti-imperfections\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#59C3B9;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"anti-imperfections\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/anti-imperfections.jpg\" alt=\"Pack Anti-imperfections \u2014 Gel Moussant + S\u00e9rum \u00c9quilibrant\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">Anti-imperfections<\/div>\n <div class=\"routine-category-desc\">\u00c9quilibre s\u00e9bum et purification. Niacinamide, zinc PCA, gel moussant.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">9 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">3 000 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/routine-serums\/\" class=\"routine-category reveal-up\" data-routine=\"serums\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#DD5C63;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"serums\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/serums.jpg\" alt=\"Pack S\u00e9rums \u2014 S\u00e9rum Hydratant + S\u00e9rum \u00c9claircissant\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">S\u00e9rums<\/div>\n <div class=\"routine-category-desc\">Les actifs \u00e0 leur concentration juste. \u00c9quilibrant, hydratant, \u00e9claircissant.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">23 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">10 000 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n <\/div>\n\n <p class=\"routine-note reveal\">49 packs au total \u00e0 travers les 4 routines. Cliquez une routine pour d\u00e9couvrir toutes ses compositions.<\/p>\n <\/section>\n\n \n <section class=\"values-section\">\n <div class=\"values-grid\">\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><polyline points=\"22 4 12 14.01 9 11.01\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">EFFICACIT\u00c9<\/div>\n <div class=\"value-desc\">Concentrations actives cliniquement prouv\u00e9es, pas de doses marketing<\/div>\n <\/div>\n\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">FORMULES PURES<\/div>\n <div class=\"value-desc\">Actifs concentr\u00e9s, rien de superflu. Que ce qui travaille pour votre peau<\/div>\n <\/div>\n\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><polyline points=\"9 22 9 12 15 12 15 22\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">FORMULATION<\/div>\n <div class=\"value-desc\">Con\u00e7u et fabriqu\u00e9 pour les votre peau<\/div>\n <\/div>\n\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">TEST\u00c9 DERMATO<\/div>\n <div class=\"value-desc\">Chaque formule test\u00e9e dermatologiquement, tol\u00e9rance optimale<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"clinical-section\" data-placeholder=\"clinical-data\">\n <div class=\"clinical-label reveal\">R\u00c9SULTATS CLINIQUES<\/div>\n <h2 class=\"clinical-title reveal\">Les chiffres parlent<\/h2>\n\n <div class=\"clinical-grid\">\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"counter-animated\" data-target=\"94\">0<\/span><span class=\"accent\">%<\/span><\/div>\n <div class=\"clinical-desc\">de satisfaction<br>apr\u00e8s 4 semaines<\/div>\n <\/div>\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"accent\">–<\/span><span class=\"counter-animated\" data-target=\"42\">0<\/span><span class=\"accent\">%<\/span><\/div>\n <div class=\"clinical-desc\">de s\u00e9bum en<br>exc\u00e9dent<\/div>\n <\/div>\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"accent\">+<\/span><span class=\"counter-animated\" data-target=\"56\">0<\/span><span class=\"accent\">%<\/span><\/div>\n <div class=\"clinical-desc\">d’hydratation<br>en 24h<\/div>\n <\/div>\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"counter-animated\" data-target=\"4\">0<\/span> <span class=\"accent\">sem.<\/span><\/div>\n <div class=\"clinical-desc\">pour des r\u00e9sultats<br>visibles<\/div>\n <\/div>\n <\/div>\n\n <p class=\"clinical-footnote reveal\">*Donn\u00e9es indicatives \u2014 \u00e9tude clinique en cours.<\/p>\n <\/section>\n\n \n <section class=\"split-section\">\n <div class=\"split-image\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-products-scaled.png\" alt=\"Treatment Laboratoire model with products\">\n <\/div>\n <div class=\"split-content\">\n <div class=\"split-eyebrow reveal\">NOTRE PHILOSOPHIE<\/div>\n <p class=\"split-quote reveal-left\">\n Chaque formule est une promesse de resultat.\n <\/p>\n <p class=\"split-desc reveal\">\n مكوّناتنا النشطة sont s\u00e9lectionn\u00e9s pour leur efficacit\u00e9 clinique,\n pas pour leur marketing. Des concentrations reelles,\n des resultats visibles des les premieres applications.\n Nous croyons que la beaute n’a pas besoin d’etre compliquee.\n <\/p>\n <a href=\"\/a-propos\/\" class=\"split-link reveal\">\n <span>DECOUVRIR NOTRE HISTOIRE<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"ingredients-section\">\n <div class=\"ingredients-section-header\">\n <div class=\"ingredients-label reveal\">ACTIFS CL\u00c9S<\/div>\n <h2 class=\"ingredients-title reveal\">La science derri\u00e8re la formule<\/h2>\n <\/div>\n <div class=\"ingredients-inner\">\n <div class=\"ingredients-visual\">\n <div class=\"ingredients-bottle-wrap\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"S\u00e9rum \u00c9quilibrant\" class=\"ingredients-bottle reveal-scale\">\n <\/div>\n <div class=\"ingredients-bottle-caption reveal\">Formule phare<\/div>\n <div class=\"ingredients-bottle-name reveal\">S\u00e9rum \u00c9quilibrant<\/div>\n <\/div>\n\n <div class=\"ingredients-list\">\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Niacinamide<\/div>\n <div class=\"ingredient-concentration\">5%<\/div>\n <div class=\"ingredient-benefit\">R\u00e9duit les pores, r\u00e9gule le s\u00e9bum et unifie le teint<\/div>\n <\/div>\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Zinc PCA<\/div>\n <div class=\"ingredient-concentration\">1%<\/div>\n <div class=\"ingredient-benefit\">Action anti-bact\u00e9rienne, contr\u00f4le la brillance<\/div>\n <\/div>\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Acide Hyaluronique<\/div>\n <div class=\"ingredient-concentration\">2%<\/div>\n <div class=\"ingredient-benefit\">Hydratation profonde, repulpe la peau<\/div>\n <\/div>\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Vitamine E<\/div>\n <div class=\"ingredient-concentration\">0.5%<\/div>\n <div class=\"ingredient-benefit\">Antioxydant puissant, prot\u00e8ge contre les radicaux libres<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"diagnostic-section\">\n <div class=\"diagnostic-left\">\n <h2 class=\"diagnostic-title\">Trouvez votre s\u00e9rum id\u00e9al<\/h2>\n <p class=\"diagnostic-subtitle\">R\u00e9pondez \u00e0 5 questions et d\u00e9couvrez la routine faite pour votre peau<\/p>\n <\/div>\n <a href=\"#\" class=\"diagnostic-btn\" data-quiz-trigger>\n DIAGNOSTIC PEAU →\n <\/a>\n <\/section>\n\n \n <section class=\"testimonials-section\" id=\"temoignages\">\n <div class=\"testimonials-header\">\n <div class=\"testimonials-label reveal\">AVIS CLIENTS<\/div>\n <h2 class=\"testimonials-title reveal\">Elles en parlent<\/h2>\n <\/div>\n\n <div class=\"testimonials-grid\">\n <div class=\"testimonial-card reveal-up\">\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\n \u00ab\u00a0Mon serum prefere, la diff\u00e9rence apr\u00e8s 3 semaines est incroyable. Moins de brillance, peau plus nette. Je recommande a toutes mes amies.\u00a0\u00bb\n <\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">S<\/div>\n <div>\n <div class=\"testimonial-name\">Sarah B.<\/div>\n <span class=\"testimonial-badge testimonial-badge--oily\">Peau grasse<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"testimonial-card reveal-up\">\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\n \u00ab\u00a0Enfin un produit algerien qui tient ses promesses. Le serum hydratant a transforme ma peau seche. Texture legere, absorption rapide.\u00a0\u00bb\n <\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">A<\/div>\n <div>\n <div class=\"testimonial-name\">Amina K.<\/div>\n <span class=\"testimonial-badge testimonial-badge--sensitive\">Peau sensible<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"testimonial-card reveal-up\">\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\n \u00ab\u00a0La cr\u00e8me CICA m\\’a sauv\u00e9e apr\u00e8s un peeling. Apaisement immediat, zero irritation. Le meilleur rapport qualit\u00e9-prix du march\u00e9 DZ.\u00a0\u00bb\n <\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">L<\/div>\n <div>\n <div class=\"testimonial-name\">Lina M.<\/div>\n <span class=\"testimonial-badge testimonial-badge--combination\">Peau mixte<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"instagram-section\">\n <div class=\"instagram-header\">\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-handle reveal\">@treatmentlaboratoire<\/a>\n <div class=\"instagram-cta reveal\">Rejoignez notre communaute sur Instagram, TikTok & Facebook<\/div>\n <\/div>\n\n <div class=\"instagram-grid\">\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-face-scaled.png\" alt=\"Instagram 1\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-closeup-scaled.png\" alt=\"Instagram 2\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/texture.png\" alt=\"Instagram 3\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/lifestyle-3-scaled.png\" alt=\"Instagram 4\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-casual-scaled.png\" alt=\"Instagram 5\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-dark-scaled.png\" alt=\"Instagram 6\">\n <\/a>\n <\/div>\n\n <div class=\"social-strip reveal\">\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"\/><\/svg>\n <span>Instagram<\/span>\n <\/a>\n <a href=\"https:\/\/www.tiktok.com\/@treatmentlabo\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 3v10.5a3 3 0 1 1-3-3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M9 3c0 3 2.5 5.5 6 5.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <span>TikTok<\/span>\n <\/a>\n <a href=\"https:\/\/www.facebook.com\/share\/16bM57euHk\/\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M14 9h3V6h-3a3 3 0 0 0-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <span>Facebook<\/span>\n <\/a>\n <a href=\"https:\/\/wa.me\/213540050932\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 21l1.6-4.3A8.5 8.5 0 1 1 8.5 21 8.5 8.5 0 0 1 3 21z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M9 10c0 3 2 5 5 5l1.5-1.5-2-1L12 13l-2-2 .5-1.5-1-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <span>WhatsApp<\/span>\n <\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"gallery-section\">\n <div class=\"gallery-frame reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-curly-scaled.png\" alt=\"Treatment Laboratoire model\">\n <\/div>\n <p class=\"gallery-quote reveal\">\n « La beaute n’a pas besoin d’etre compliquee.\n Elle a besoin d’etre honnete. »\n <\/p>\n <div class=\"gallery-credit reveal\">TREATMENT LABORATOIRE<\/div>\n <\/section>\n\n \n <section class=\"histoire-section\" id=\"histoire\">\n <div class=\"histoire-inner\">\n <div class=\"histoire-label reveal\">NOTRE HISTOIRE<\/div>\n <h2 class=\"histoire-title reveal\">Un laboratoire alg\u00e9rien, des formules sans d\u00e9tour.<\/h2>\n <div class=\"histoire-grid\">\n <div class=\"histoire-text reveal\">\n <p>\n Treatment Laboratoire est n\u00e9 d’une conviction simple : la peau\n alg\u00e9rienne m\u00e9rite des soins formul\u00e9s pour elle, avec des actifs\n dont la concentration est annonc\u00e9e et respect\u00e9e.\n <\/p>\n <p>\n Nous d\u00e9veloppons nos formules aux c\u00f4t\u00e9s de dermatologues,\n en gardant un cap clair : efficacit\u00e9, tol\u00e9rance, int\u00e9grit\u00e9.\n Chaque produit est test\u00e9 dermatologiquement avant sa sortie.\n <\/p>\n <p>\n <strong>Simple but effective.<\/strong>\n C’est plus qu’un slogan : c’est notre m\u00e9thode.\n <\/p>\n <\/div>\n <div class=\"histoire-timeline reveal-up\">\n <div class=\"histoire-milestone\">\n <div class=\"histoire-milestone-year\">Origine<\/div>\n <div class=\"histoire-milestone-text\">Un laboratoire ind\u00e9pendant, pens\u00e9 pour votre peau.<\/div>\n <\/div>\n <div class=\"histoire-milestone\">\n <div class=\"histoire-milestone-year\">M\u00e9thode<\/div>\n <div class=\"histoire-milestone-text\">Formulation propre, actifs cliniquement \u00e9prouv\u00e9s, z\u00e9ro marketing dilu\u00e9.<\/div>\n <\/div>\n <div class=\"histoire-milestone\">\n <div class=\"histoire-milestone-year\">Engagement<\/div>\n <div class=\"histoire-milestone-text\">Test\u00e9 dermatologiquement. Fabriqu\u00e9 en Alg\u00e9rie. Accessible partout.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"blog-section\" id=\"blog\">\n <div class=\"blog-header\">\n <div class=\"blog-label reveal\">JOURNAL<\/div>\n <h2 class=\"blog-title reveal\">Conseils skincare & science des actifs<\/h2>\n <a href=\"#\" class=\"blog-view-all reveal\">Tous les articles →<\/a>\n <\/div>\n\n <div class=\"blog-grid\">\n <a href=\"\/niacinamide-pourquoi-5-pourcent-suffit\/\" class=\"blog-card-link\" style=\"text-decoration:none;color:inherit;display:block;\"><article class=\"blog-card reveal-up\">\n <div class=\"blog-card-img\" style=\"--tone:#F8BFD3;\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/01-niacinamide.jpg\" alt=\"S\u00e9rum \u00c9quilibrant \u2014 Niacinamide 5% + Zinc PCA\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"blog-card-body\">\n <div class=\"blog-card-meta\">SCIENCE DES ACTIFS \u00b7 4 min<\/div>\n <h3 class=\"blog-card-title\">Niacinamide : pourquoi 5 % suffit.<\/h3>\n <p class=\"blog-card-excerpt\">La bonne dose, pas la dose marketing. Ce qu’il faut savoir avant d’acheter un s\u00e9rum.<\/p>\n <span class=\"blog-card-cta\">Lire l’article →<\/span>\n <\/div>\n <\/article><\/a>\n\n <a href=\"\/peau-seche-routine-barriere\/\" class=\"blog-card-link\" style=\"text-decoration:none;color:inherit;display:block;\"><article class=\"blog-card reveal-up\">\n <div class=\"blog-card-img\" style=\"--tone:#589DD2;\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/02-peau-seche.jpg\" alt=\"S\u00e9rum Hydratant + Cr\u00e8me Cica\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"blog-card-body\">\n <div class=\"blog-card-meta\">ROUTINE \u00b7 5 min<\/div>\n <h3 class=\"blog-card-title\">Peau s\u00e8che : la routine qui reconstruit la barri\u00e8re.<\/h3>\n <p class=\"blog-card-excerpt\">Acide hyaluronique, c\u00e9ramides, cica. Comment les encha\u00eener pour un vrai confort durable.<\/p>\n <span class=\"blog-card-cta\">Lire l’article →<\/span>\n <\/div>\n <\/article><\/a>\n\n <a href=\"\/taches-pigmentaires-vitamine-c-spf\/\" class=\"blog-card-link\" style=\"text-decoration:none;color:inherit;display:block;\"><article class=\"blog-card reveal-up\">\n <div class=\"blog-card-img\" style=\"--tone:#E2AD53;\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/03-vitamine-c-spf.jpg\" alt=\"S\u00e9rum \u00c9claircissant Vitamine C + \u00c9cran Solaire SPF 50+\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"blog-card-body\">\n <div class=\"blog-card-meta\">\u00c9CLAT \u00b7 3 min<\/div>\n <h3 class=\"blog-card-title\">Taches pigmentaires : le duo vitamine C + SPF.<\/h3>\n <p class=\"blog-card-excerpt\">Le geste non n\u00e9gociable pour estomper les taches et \u00e9viter qu’elles reviennent.<\/p>\n <span class=\"blog-card-cta\">Lire l’article →<\/span>\n <\/div>\n <\/article><\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"contact-section\" id=\"contact\">\n <div class=\"contact-inner\">\n <div class=\"contact-intro\">\n <div class=\"contact-label reveal\">CONTACT<\/div>\n <h2 class=\"contact-title reveal\">Une question ? \u00c9crivez-nous.<\/h2>\n <p class=\"contact-desc reveal\">\n Notre \u00e9quipe vous r\u00e9pond sous 48h ouvr\u00e9es.\n Pour le service commercial, les collaborations presse ou les demandes de revendeurs.\n <\/p>\n\n <div class=\"contact-channels reveal\">\n <a href=\"mailto:contact@dermatech-lab.com\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">Email<\/span>\n <span class=\"contact-channel-value\">contact@dermatech-lab.com<\/span>\n <\/a>\n <a href=\"tel:+213540050932\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">T\u00e9l\u00e9phone<\/span>\n <span class=\"contact-channel-value\">0540 050 932<\/span>\n <\/a>\n <a href=\"https:\/\/wa.me\/213540050932\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">WhatsApp<\/span>\n <span class=\"contact-channel-value\">D\u00e9marrer une discussion<\/span>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">Instagram<\/span>\n <span class=\"contact-channel-value\">@treatmentlaboratoire<\/span>\n <\/a>\n <a href=\"https:\/\/www.tiktok.com\/@treatmentlabo\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">TikTok<\/span>\n <span class=\"contact-channel-value\">@treatmentlabo<\/span>\n <\/a>\n <a href=\"https:\/\/www.facebook.com\/share\/16bM57euHk\/\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">Facebook<\/span>\n <span class=\"contact-channel-value\">Treatment Laboratoire<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <form class=\"contact-form reveal-up\" onsubmit=\"event.preventDefault();\">\n <div class=\"contact-field\">\n <label for=\"contact-name\">Nom complet<\/label>\n <input id=\"contact-name\" type=\"text\" required>\n <\/div>\n <div class=\"contact-field\">\n <label for=\"contact-email\">Email<\/label>\n <input id=\"contact-email\" type=\"email\" required>\n <\/div>\n <div class=\"contact-field\">\n <label for=\"contact-subject\">Sujet<\/label>\n <select id=\"contact-subject\">\n <option>Question produit<\/option>\n <option>Suivi de commande<\/option>\n <option>Devenir revendeur<\/option>\n <option>Presse & collaborations<\/option>\n <option>Autre<\/option>\n <\/select>\n <\/div>\n <div class=\"contact-field\">\n <label for=\"contact-message\">Message<\/label>\n <textarea id=\"contact-message\" rows=\"5\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"contact-submit\">ENVOYER LE MESSAGE<\/button>\n <p class=\"contact-note\">Vos donn\u00e9es restent confidentielles. Aucune cession \u00e0 des tiers.<\/p>\n <\/form>\n <\/div>\n <\/section>\n\n \n <section class=\"newsletter-section\">\n <h2 class=\"newsletter-title reveal\">Rejoignez la communaute Treatment<\/h2>\n <p class=\"newsletter-desc reveal\">Conseils skincare, offres exclusives et nouveautes en avant-premiere<\/p>\n <form class=\"newsletter-form reveal\">\n <input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre adresse email\" required>\n <button type=\"submit\" class=\"newsletter-btn\">S’INSCRIRE<\/button>\n <\/form>\n <p class=\"newsletter-privacy reveal\">En vous inscrivant, vous acceptez notre politique de confidentialite. Desabonnement possible a tout moment.<\/p>\n <\/section>\n\n \n <section class=\"trust-strip\" aria-label=\"Engagements Treatment Laboratoire\">\n <div class=\"trust-strip-inner\">\n <div class=\"trust-pillar reveal-up\">\n <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 2v8M5 7l7 4 7-4M5 7v10l7 4 7-4V7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <div class=\"trust-label\">FORMUL\u00c9 & FABRIQU\u00c9<\/div>\n <div class=\"trust-text\">\u00c0 Alger, dans nos laboratoires.<\/div>\n <\/div>\n <div class=\"trust-pillar reveal-up\">\n <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 2h6M10 2v4M14 2v4M8 6h8l-1 14H9L8 6z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M11 11v5M13 11v5\" stroke-linecap=\"round\"\/>\n <\/svg>\n <div class=\"trust-label\">TEST\u00c9 EN DERMATOLOGIE<\/div>\n <div class=\"trust-text\">Tol\u00e9rance valid\u00e9e sur peaux sensibles.<\/div>\n <\/div>\n <div class=\"trust-pillar reveal-up\">\n <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 2v20M2 12h20\" stroke-linecap=\"round\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <\/svg>\n <div class=\"trust-label\">RECOMMAND\u00c9 EN PHARMACIE<\/div>\n <div class=\"trust-text\">Disponible chez nos pharmacies partenaires.<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n\n <script>\n \/\/ \u2500\u2500 Lenis Smooth Scroll \u2500\u2500\n const lenis = new Lenis({\n duration: 1.2,\n easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n smoothWheel: true,\n });\n\n function raf(time) {\n lenis.raf(time);\n requestAnimationFrame(raf);\n }\n requestAnimationFrame(raf);\n\n lenis.on('scroll', ScrollTrigger.update);\n gsap.ticker.add((time) => lenis.raf(time * 1000));\n gsap.ticker.lagSmoothing(0);\n\n \/\/ \u2500\u2500 GSAP Animations \u2500\u2500\n gsap.registerPlugin(ScrollTrigger);\n\n \/\/ Nav scroll: transparent -> solid bg\n const nav = document.querySelector('.tl-nav');\n ScrollTrigger.create({\n start: 'top -100',\n onUpdate: function(self) {\n if (self.scroll() > 100) {\n nav.classList.add('scrolled');\n } else {\n nav.classList.remove('scrolled');\n }\n },\n });\n\n \/\/ Hero brand entrance\n gsap.from('.hero-brand-name', {\n opacity: 0,\n scale: 1.1,\n duration: 1.6,\n ease: 'power3.out',\n delay: 0.3,\n });\n\n gsap.from('.hero-brand-sub', {\n opacity: 0,\n y: 20,\n duration: 1,\n ease: 'power2.out',\n delay: 0.8,\n });\n\n \/\/ Hero product card\n gsap.from('.hero-product-card', {\n opacity: 0,\n y: 60,\n duration: 1,\n ease: 'power2.out',\n delay: 1.2,\n });\n\n \/\/ Scroll reveals \u2014 use gsap.to() since CSS starts at opacity:0\n const revealTypes = [\n { selector: '.reveal', to: { opacity: 1, y: 0 } },\n { selector: '.reveal-up', to: { opacity: 1, y: 0 } },\n { selector: '.reveal-left', to: { opacity: 1, x: 0 } },\n { selector: '.reveal-right', to: { opacity: 1, x: 0 } },\n { selector: '.reveal-scale', to: { opacity: 1, scale: 1 } },\n ];\n\n revealTypes.forEach(({ selector, to }) => {\n gsap.utils.toArray(selector).forEach((el) => {\n if (el.closest('.hero')) return;\n\n gsap.to(el, {\n ...to,\n duration: 1,\n ease: 'power2.out',\n scrollTrigger: {\n trigger: el,\n start: 'top 88%',\n toggleActions: 'play none none none',\n },\n });\n });\n });\n\n \/\/ Stagger product cards\n gsap.utils.toArray('.product-card').forEach((card, i) => {\n gsap.to(card, {\n opacity: 1, y: 0, x: 0,\n duration: 0.8,\n delay: i * 0.08,\n ease: 'power2.out',\n scrollTrigger: { trigger: card, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger value cards\n gsap.utils.toArray('.value-card').forEach((card, i) => {\n gsap.to(card, {\n opacity: 1, y: 0,\n duration: 0.7,\n delay: i * 0.1,\n ease: 'power2.out',\n scrollTrigger: { trigger: card, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger ingredient cards\n gsap.utils.toArray('.ingredient-card').forEach((item, i) => {\n gsap.to(item, {\n opacity: 1, x: 0,\n duration: 0.7,\n delay: i * 0.12,\n ease: 'power2.out',\n scrollTrigger: { trigger: item, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger routine steps\n gsap.utils.toArray('.routine-step').forEach((step, i) => {\n gsap.to(step, {\n opacity: 1, y: 0,\n duration: 0.8,\n delay: i * 0.15,\n ease: 'power2.out',\n scrollTrigger: { trigger: step, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger testimonial cards\n gsap.utils.toArray('.testimonial-card').forEach((card, i) => {\n gsap.to(card, {\n opacity: 1, y: 0,\n duration: 0.8,\n delay: i * 0.12,\n ease: 'power2.out',\n scrollTrigger: { trigger: card, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger instagram photos\n gsap.utils.toArray('.instagram-photo').forEach((photo, i) => {\n gsap.to(photo, {\n opacity: 1, scale: 1,\n duration: 0.6,\n delay: i * 0.08,\n ease: 'power2.out',\n scrollTrigger: { trigger: photo, start: 'top 92%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Parallax on hero image\n gsap.to('.hero-image', {\n yPercent: 15,\n ease: 'none',\n scrollTrigger: {\n trigger: '.hero',\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n },\n });\n\n \/\/ Split image parallax\n gsap.from('.split-image img', {\n scale: 1.15,\n ease: 'none',\n scrollTrigger: {\n trigger: '.split-section',\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n },\n });\n\n \/\/ Gallery frame parallax\n gsap.from('.gallery-frame img', {\n scale: 1.1,\n ease: 'none',\n scrollTrigger: {\n trigger: '.gallery-section',\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n },\n });\n\n \/\/ \u2500\u2500 Counter Animation \u2500\u2500\n function animateCounter(el) {\n const target = parseInt(el.getAttribute('data-target'), 10);\n const duration = 2000;\n const start = performance.now();\n\n function step(now) {\n const elapsed = now - start;\n const progress = Math.min(elapsed \/ duration, 1);\n const eased = 1 - Math.pow(1 - progress, 3);\n el.textContent = Math.round(target * eased);\n if (progress < 1) requestAnimationFrame(step);\n }\n\n requestAnimationFrame(step);\n }\n\n document.querySelectorAll('.counter-animated').forEach((el) => {\n ScrollTrigger.create({\n trigger: el,\n start: 'top 85%',\n once: true,\n onEnter: () => animateCounter(el),\n });\n });\n\n \/\/ \u2500\u2500 Hero Product Thumb Switching \u2500\u2500\n const thumbs = document.querySelectorAll('.hero-product-thumb');\n const heroMainImg = document.querySelector('.hero-product-main');\n const heroName = document.querySelector('.hero-product-card-name');\n const heroFormula = document.querySelector('.hero-product-card-formula');\n const heroPrice = document.querySelector('.hero-product-card-price');\n\n const heroProducts = [\n { img: 'https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png', name: 'Serum Equilibrant', formula: 'Niacinamide 5% + Zinc PCA', price: '2,500 DA' },\n { img: 'https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/vit-c.png', name: 'Serum Vitamine C', formula: 'Vitamine C 15% + Acide Ferulique', price: '2 500 DA' },\n { img: 'https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hydratant.png', name: 'Serum Hydratant', formula: 'Acide Hyaluronique + Tr\u00e9halose', price: '2,500 DA' },\n ];\n\n thumbs.forEach((thumb, i) => {\n thumb.addEventListener('click', () => {\n thumbs.forEach((t) => t.classList.remove('active'));\n thumb.classList.add('active');\n\n gsap.to(heroMainImg, {\n opacity: 0,\n y: -10,\n duration: 0.2,\n onComplete: () => {\n heroMainImg.src = heroProducts[i].img;\n heroName.textContent = heroProducts[i].name;\n heroFormula.textContent = heroProducts[i].formula;\n heroPrice.textContent = heroProducts[i].price;\n gsap.fromTo(heroMainImg, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.3 });\n },\n });\n });\n });\n <\/script>\n\n <script>\n \/* Routine card hover-reveal: photo \u2192 video on hover\/tap (Typology pattern, 2026-04-22)\n Optimizations: prefers-reduced-motion guard, IntersectionObserver pause, passive touch,\n active-card tracking (only one video plays at a time), defensive play() promise handling. *\/\n (function () {\n const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const cards = document.querySelectorAll('.routine-category');\n if (!cards.length) return;\n\n const isTouch = window.matchMedia('(hover: none)').matches;\n let active = null;\n\n const stopAll = (except) => {\n document.querySelectorAll('.routine-category-photo.is-playing').forEach(box => {\n if (box === except) return;\n const v = box.querySelector('video');\n if (v) v.pause();\n box.classList.remove('is-playing');\n });\n };\n\n const start = (box, video) => {\n if (reduced) return;\n stopAll(box);\n active = box;\n box.classList.add('is-playing');\n try { video.currentTime = 0; } catch (_) {}\n const p = video.play();\n if (p && p.catch) p.catch(() => { \/* autoplay refused, harmless *\/ });\n };\n\n const stop = (box, video) => {\n video.pause();\n box.classList.remove('is-playing');\n if (active === box) active = null;\n };\n\n cards.forEach(card => {\n const photoBox = card.querySelector('.routine-category-photo');\n const video = photoBox && photoBox.querySelector('video');\n if (!video || !video.getAttribute('src')) return;\n\n if (isTouch) {\n card.addEventListener('click', e => {\n if (!photoBox.classList.contains('is-playing')) {\n e.preventDefault();\n start(photoBox, video);\n }\n }, { passive: false });\n } else {\n card.addEventListener('mouseenter', () => start(photoBox, video));\n card.addEventListener('mouseleave', () => stop(photoBox, video));\n card.addEventListener('focusin', () => start(photoBox, video));\n card.addEventListener('focusout', () => stop(photoBox, video));\n }\n });\n\n \/* Pause any playing video when its card scrolls out of view (saves CPU + battery). *\/\n if ('IntersectionObserver' in window) {\n const io = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) return;\n const box = entry.target.querySelector('.routine-category-photo');\n const v = box && box.querySelector('video');\n if (v && box.classList.contains('is-playing')) stop(box, v);\n });\n }, { threshold: 0 });\n cards.forEach(card => io.observe(card));\n }\n\n \/* Pause when tab loses focus (prevents background decode). *\/\n document.addEventListener('visibilitychange', () => {\n if (document.hidden && active) {\n const v = active.querySelector('video');\n if (v) stop(active, v);\n }\n });\n })();\n\n \/* Product card hover-reveal (Typology pattern, 2026-04-27).\n Same algorithm as routine cards above, applied to .product-card \/ .product-card-media.\n Skips cards whose <video> has no src yet (videos still being processed in \/assets\/videos\/products\/). *\/\n (function () {\n const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const cards = document.querySelectorAll('.product-card');\n if (!cards.length) return;\n\n const isTouch = window.matchMedia('(hover: none)').matches;\n let active = null;\n\n const stopAll = (except) => {\n document.querySelectorAll('.product-card-media.is-playing').forEach(box => {\n if (box === except) return;\n const v = box.querySelector('video');\n if (v) v.pause();\n box.classList.remove('is-playing');\n });\n };\n\n const start = (box, video) => {\n if (reduced) return;\n stopAll(box);\n active = box;\n box.classList.add('is-playing');\n try { video.currentTime = 0; } catch (_) {}\n const p = video.play();\n if (p && p.catch) p.catch(() => {});\n };\n\n const stop = (box, video) => {\n video.pause();\n box.classList.remove('is-playing');\n if (active === box) active = null;\n };\n\n cards.forEach(card => {\n const mediaBox = card.querySelector('.product-card-media');\n const video = mediaBox && mediaBox.querySelector('video');\n if (!video || !video.getAttribute('src')) return;\n\n \/\/ Probe: if the source 404s, treat as no-video and skip wiring.\n video.addEventListener('error', () => video.removeAttribute('src'), { once: true });\n\n if (isTouch) {\n card.addEventListener('click', e => {\n const target = e.target;\n \/\/ don't intercept add-to-cart button taps\n if (target.closest('.product-card-quick-add')) return;\n if (!mediaBox.classList.contains('is-playing')) {\n e.preventDefault();\n start(mediaBox, video);\n }\n }, { passive: false });\n } else {\n card.addEventListener('mouseenter', () => start(mediaBox, video));\n card.addEventListener('mouseleave', () => stop(mediaBox, video));\n card.addEventListener('focusin', () => start(mediaBox, video));\n card.addEventListener('focusout', () => stop(mediaBox, video));\n }\n });\n\n if ('IntersectionObserver' in window) {\n const io = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) return;\n const box = entry.target.querySelector('.product-card-media');\n const v = box && box.querySelector('video');\n if (v && box.classList.contains('is-playing')) stop(box, v);\n });\n }, { threshold: 0 });\n cards.forEach(card => io.observe(card));\n }\n\n document.addEventListener('visibilitychange', () => {\n if (document.hidden && active) {\n const v = active.querySelector('video');\n if (v) stop(active, v);\n }\n });\n })();\n\n \/* Mobile diagnostic FAB: hide when the big in-page diagnostic section is on-screen\n (avoids two CTAs visible simultaneously). Also hide near footer to clear contact form. *\/\n (function () {\n const fab = document.querySelector('.diagnostic-fab');\n if (!fab || !('IntersectionObserver' in window)) return;\n const targets = document.querySelectorAll('.diagnostic-section, .footer, #contact');\n if (!targets.length) return;\n const visible = new Set();\n const io = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) visible.add(e.target); else visible.delete(e.target);\n });\n fab.style.opacity = visible.size ? '0' : '1';\n fab.style.pointerEvents = visible.size ? 'none' : 'auto';\n fab.style.transform = visible.size\n ? 'translate(-50%, 32px)'\n : 'translate(-50%, 0)';\n }, { threshold: 0.15 });\n targets.forEach(t => io.observe(t));\n fab.style.transition = 'opacity .25s ease, transform .25s ease';\n })();\n <\/script>\n\n<script>\n \/\/ Round 10.8 (2026-06-09) \u2014 Homepage product cards have no <a> wrapper;\n \/\/ image + name + price aren't clickable. Add a delegated click handler\n \/\/ navigating to \/produit\/<slug>\/ \u2014 EXCEPT for the AJOUTER button.\n (function () {\n var PRODUCT_SLUG = {\n 'gel-moussant': 'gel-moussant-anti-imperfections',\n 'serum-equilibrant': 'serum-equilibrant',\n 'emulsion': 'emulsion-anti-imperfection',\n 'creme-cica': 'cica-creme',\n 'serum-hydratant': 'serum-hydratant',\n 'creme-eclaircissante': 'creme-eclaircissante',\n 'serum-eclaircissant': 'serum-eclaircissant',\n 'ecran-solaire': 'ecran-solaire-spf-50'\n };\n document.querySelectorAll('.product-card[data-product]').forEach(function (card) {\n card.style.cursor = 'pointer';\n card.addEventListener('click', function (e) {\n if (e.target.closest('.product-card-quick-add, .product-card-bottom button')) return;\n var key = card.getAttribute('data-product');\n var slug = PRODUCT_SLUG[key] || key;\n if (!slug) return;\n var base = document.body.classList.contains('translatepress-ar') ? '\/ar\/' : '\/';\n window.location.href = base + 'produit\/' + slug + '\/';\n });\n card.setAttribute('tabindex', '0');\n card.setAttribute('role', 'link');\n card.addEventListener('keydown', function (e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n card.click();\n }\n });\n });\n })();\n<\/script>\n<script src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/quiz-4.js\"><\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Treatment Laboratoire \u2014 Dermo-cosm\u00e9tique Alg\u00e9rienne DIAGNOSTIC BEST-SELLER S\u00e9rum \u00c9quilibrant Niacinamide 5% + Zinc PCA 2,500 DA AJOUTER AU PANIER D\u00c9FILER<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-29095","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/pages\/29095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/comments?post=29095"}],"version-history":[{"count":0,"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/pages\/29095\/revisions"}],"wp:attachment":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/media?parent=29095"}],"curies":[{"name":"\u062f\u0628\u0644\u064a\u0648 \u0628\u064a","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}

{"id":29095,"date":"2026-05-10T02:41:20","date_gmt":"2026-05-10T01:41:20","guid":{"rendered":"https:\/\/treatment-lab.com\/face\/"},"modified":"2026-06-09T14:16:12","modified_gmt":"2026-06-09T13:16:12","slug":"accueil","status":"publish","type":"page","link":"https:\/\/treatment-lab.com\/ar\/","title":{"rendered":"\u0627\u0644\u0635\u0641\u062d\u0629 \u0627\u0644\u0631\u0626\u064a\u0633\u064a\u0629"},"content":{"rendered":"\n\n\n\n \n\n\n \n Treatment Laboratoire \u2014 Dermo-cosm\u00e9tique Alg\u00e9rienne<\/title>\n\n \n <link rel=\"preconnect\" href=\"https:\/\/fonts.googleapis.com\">\n <link rel=\"preconnect\" href=\"https:\/\/fonts.gstatic.com\" crossorigin>\n <link href=\"https:\/\/fonts.googleapis.com\/css2?family=Playfair+Display:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&family=DM+Sans:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&family=Space+Grotesk:wght@300;400;500;600;700&display=swap\" rel=\"stylesheet\">\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.15.0\/dist\/gsap.min.js\"><\/script>\n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/gsap@3.15.0\/dist\/ScrollTrigger.min.js\"><\/script>\n\n \n <script src=\"https:\/\/cdn.jsdelivr.net\/npm\/lenis@1.3.23\/dist\/lenis.min.js\"><\/script>\n\n <style>\n \/* \u2500\u2500 Reset \u2500\u2500 *\/\n *, *::before, *::after { margin: 0; padding: 0; box-sizing: border-box; }\n\n :root {\n --white: #FFFFFF;\n --black: #0A0A0A;\n --teal: #59C3B9;\n --teal-dark: #3FA89E;\n --teal-light: #59C3B920;\n --teal-bg: #EDF9F7;\n --gold: #C4A35A;\n --gold-light: #C4A35A15;\n --blue: #5A7BC4;\n --pink: #C45A7B;\n --purple: #7B5AC4;\n --green: #5AC47B;\n --orange: #C48A5A;\n --gray-50: #FAFAFA;\n --gray-100: #F5F5F5;\n --gray-200: #E5E5E5;\n --gray-300: #D4D4D4;\n --gray-400: #A0A0A0;\n --gray-600: #666666;\n --gray-800: #333333;\n\n --ff-serif: 'Playfair Display', Georgia, serif;\n --ff-sans: 'DM Sans', -apple-system, sans-serif;\n --ff-mono: 'Space Grotesk', monospace;\n }\n\n html { font-size: 16px; scroll-behavior: smooth; }\n\n body {\n font-family: var(--ff-sans);\n color: var(--black);\n background: var(--white);\n -webkit-font-smoothing: antialiased;\n -moz-osx-font-smoothing: grayscale;\n overflow-x: hidden;\n }\n\n img { display: block; max-width: 100%; height: auto; }\n a { text-decoration: none; color: inherit; }\n button { border: none; background: none; cursor: pointer; font-family: inherit; }\n\n \/* \u2500\u2500 Marquee \u2500\u2500 *\/\n .marquee {\n background: var(--black);\n padding: 10px 0;\n overflow: hidden;\n white-space: nowrap;\n }\n\n .marquee-track {\n display: inline-flex;\n animation: marquee-scroll 30s linear infinite;\n }\n\n .marquee-item {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 400;\n letter-spacing: 0.15em;\n color: var(--white);\n padding: 0 40px;\n display: inline-flex;\n align-items: center;\n gap: 12px;\n }\n\n .marquee-item span.dot {\n width: 4px;\n height: 4px;\n background: var(--teal);\n border-radius: 50%;\n display: inline-block;\n }\n\n @keyframes marquee-scroll {\n 0% { transform: translateX(0); }\n 100% { transform: translateX(-50%); }\n }\n\n \/* \u2500\u2500 Nav \u2500\u2500 *\/\n .nav {\n position: fixed;\n top: 40px;\n left: 0;\n width: 100%;\n z-index: 100;\n padding: 24px 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n background: transparent;\n border-bottom: 1px solid transparent;\n transition: top 0.4s ease, background 0.4s ease, border-color 0.4s ease, box-shadow 0.4s ease;\n }\n .nav.scrolled {\n top: 0;\n background: rgba(255,255,255,0.97);\n backdrop-filter: blur(16px);\n -webkit-backdrop-filter: blur(16px);\n border-bottom: 1px solid rgba(0,0,0,0.08);\n box-shadow: 0 1px 12px rgba(0,0,0,0.06);\n }\n\n .nav-brand {\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.3em;\n color: var(--black);\n }\n .nav-brand .logo-dark { display: none; }\n .nav-brand .logo-light { display: block; }\n .nav.scrolled .nav-brand .logo-dark { display: block; }\n .nav.scrolled .nav-brand .logo-light { display: none; }\n\n .nav-links {\n display: flex;\n gap: 32px;\n align-items: center;\n }\n\n .nav-links a {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 400;\n letter-spacing: 0.15em;\n color: rgba(255,255,255,0.8);\n transition: color 0.4s;\n }\n\n .nav-links a:hover { opacity: 0.6; }\n .nav.scrolled .nav-links a { color: var(--gray-600); }\n .nav.scrolled .nav-links a:hover { color: var(--black); opacity: 1; }\n .nav-link-diagnostic { display: inline-flex !important; align-items: center; gap: 8px; padding-left: 14px !important; border-left: 1px solid rgba(255,255,255,.18); }\n .nav.scrolled .nav-link-diagnostic { border-left-color: rgba(0,0,0,.12); }\n .nav-link-dot { width: 6px; height: 6px; border-radius: 50%; background: #59C3B9; box-shadow: 0 0 0 0 rgba(89,195,185,.55); animation: navDotPulse 2.4s ease-out infinite; }\n @keyframes navDotPulse { 0% { box-shadow: 0 0 0 0 rgba(89,195,185,.55); } 70% { box-shadow: 0 0 0 8px rgba(89,195,185,0); } 100% { box-shadow: 0 0 0 0 rgba(89,195,185,0); } }\n @media (prefers-reduced-motion: reduce) { .nav-link-dot { animation: none; } }\n\n \/* Mobile-only diagnostic FAB (Typology-style always-visible quiz CTA) *\/\n .diagnostic-fab { display: none; }\n @media (max-width: 900px) {\n .diagnostic-fab {\n display: inline-flex;\n position: fixed;\n left: 50%;\n bottom: calc(16px + env(safe-area-inset-bottom, 0px));\n transform: translateX(-50%);\n align-items: center;\n gap: 10px;\n padding: 14px 22px;\n min-height: 48px;\n background: #59C3B9;\n color: #fff;\n font-family: var(--ff-mono, 'Josefin Sans', sans-serif);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.18em;\n text-transform: uppercase;\n text-decoration: none;\n border-radius: 999px;\n box-shadow: 0 12px 32px -8px rgba(0,0,0,.35), 0 4px 12px -4px rgba(89,195,185,.4);\n z-index: 50;\n -webkit-tap-highlight-color: transparent;\n transition: transform .18s ease, box-shadow .18s ease;\n will-change: transform;\n }\n .diagnostic-fab:active { transform: translateX(-50%) scale(0.96); box-shadow: 0 6px 16px -4px rgba(0,0,0,.35); }\n .diagnostic-fab-dot { width: 6px; height: 6px; border-radius: 50%; background: #fff; box-shadow: 0 0 0 0 rgba(255,255,255,.6); animation: navDotPulse 2.4s ease-out infinite; }\n .diagnostic-fab-arrow { flex-shrink: 0; }\n }\n @media (prefers-reduced-motion: reduce) { .diagnostic-fab-dot { animation: none; } .diagnostic-fab { transition: none; } }\n\n .nav-cart {\n position: relative;\n color: rgba(255,255,255,0.8);\n transition: color 0.4s;\n }\n .nav.scrolled .nav-cart { color: var(--gray-600); }\n\n .nav-cart svg {\n width: 22px;\n height: 22px;\n stroke: rgba(255,255,255,0.8);\n transition: stroke 0.4s;\n fill: none;\n stroke-width: 1.5;\n }\n .nav.scrolled .nav-cart svg { stroke: var(--gray-600); }\n .nav.scrolled .nav-cart { color: var(--gray-600); }\n .nav.scrolled .nav-cart-count { background: var(--teal); color: var(--white); }\n\n .nav-cart-count {\n position: absolute;\n top: -6px;\n right: -8px;\n width: 16px;\n height: 16px;\n background: var(--teal);\n border-radius: 50%;\n font-size: 9px;\n font-weight: 600;\n color: var(--white);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n \/* \u2500\u2500 Hero \u2500\u2500 *\/\n .hero {\n position: relative;\n height: 100vh;\n min-height: 700px;\n overflow: hidden;\n background: linear-gradient(180deg, #e9e9e9 0%, #d8d8d8 100%);\n }\n\n .hero-image {\n position: absolute;\n inset: 0;\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center 18%;\n opacity: 1;\n }\n @media (max-width: 700px) { .hero-image { object-position: center 15%; } }\n\n \/* Round 8.1k: video hero pair \u2014 desktop landscape + mobile portrait reel.\n Show only one based on viewport. Both autoplay muted loop. *\/\n .hero-video { object-position: center top; } \/* show heads, not faces (Round 8.1k v2 \u2014 was cropping at the top) *\/\n .hero-video--mobile { display: none; }\n @media (max-width: 760px) {\n .hero-video--desktop { display: none; }\n .hero-video--mobile { display: block; object-position: center 8%; }\n }\n .hero--video .hero-overlay {\n pointer-events: none;\n background: linear-gradient(180deg, rgba(10,10,10,0.10) 0%, rgba(10,10,10,0.05) 50%, rgba(10,10,10,0.25) 100%);\n }\n\n .hero-overlay {\n position: absolute;\n inset: 0;\n background: linear-gradient(\n 180deg,\n rgba(10, 10, 10, 0.15) 0%,\n rgba(10, 10, 10, 0.05) 40%,\n rgba(10, 10, 10, 0.35) 100%\n );\n }\n\n .hero-brand {\n position: absolute;\n top: 50%;\n left: 50%;\n transform: translate(-50%, -55%);\n text-align: center;\n mix-blend-mode: difference;\n pointer-events: none;\n z-index: 2;\n }\n\n .hero-brand-name {\n font-family: var(--ff-mono);\n font-size: 15vw;\n font-weight: 500;\n color: var(--white);\n letter-spacing: 0.05em;\n line-height: 0.85;\n opacity: 1;\n }\n\n .hero-brand-sub {\n font-family: var(--ff-mono);\n font-size: 1.5vw;\n font-weight: 300;\n color: var(--white);\n letter-spacing: 0.5em;\n margin-top: 16px;\n opacity: 0.9;\n }\n\n .hero-scroll-hint {\n position: absolute;\n bottom: 32px;\n left: 50%;\n transform: translateX(-50%);\n display: flex;\n flex-direction: column;\n align-items: center;\n gap: 8px;\n z-index: 10;\n }\n\n .hero-scroll-hint span {\n font-family: var(--ff-mono);\n font-size: 9px;\n letter-spacing: 0.3em;\n color: rgba(255,255,255,0.5);\n }\n\n .hero-scroll-line {\n width: 1px;\n height: 40px;\n background: linear-gradient(to bottom, rgba(255,255,255,0.4), transparent);\n animation: scroll-pulse 2s ease-in-out infinite;\n }\n\n @keyframes scroll-pulse {\n 0%, 100% { opacity: 0.3; }\n 50% { opacity: 1; }\n }\n\n \/* \u2500\u2500 Floating Product Card \u2500\u2500 *\/\n .hero-product-card {\n position: absolute;\n bottom: 60px;\n right: 60px;\n width: 350px;\n background: var(--white);\n border-radius: 20px;\n padding: 32px;\n box-shadow: 0 24px 80px rgba(0, 0, 0, 0.2);\n z-index: 10;\n }\n\n .hero-product-card-badge {\n position: absolute;\n top: 16px;\n left: 16px;\n background: var(--teal);\n color: var(--white);\n font-family: var(--ff-mono);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.1em;\n padding: 4px 10px;\n border-radius: 20px;\n }\n\n .hero-product-card img.hero-product-main {\n width: 140px;\n height: 180px;\n object-fit: contain;\n margin: 0 auto 20px;\n }\n\n .hero-product-card-name {\n font-family: var(--ff-sans);\n font-size: 16px;\n font-weight: 600;\n color: var(--black);\n text-align: center;\n }\n\n .hero-product-card-formula {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 400;\n color: var(--teal);\n text-align: center;\n margin-top: 6px;\n letter-spacing: 0.03em;\n }\n\n .hero-product-card-price {\n font-family: var(--ff-serif);\n font-size: 24px;\n font-weight: 600;\n color: var(--black);\n text-align: center;\n margin-top: 14px;\n }\n\n .hero-product-card-btn {\n display: block;\n width: 100%;\n margin-top: 16px;\n padding: 12px;\n background: var(--black);\n color: var(--white);\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-align: center;\n border-radius: 8px;\n transition: background 0.3s;\n }\n\n .hero-product-card-btn:hover { background: var(--gray-800); }\n\n .hero-product-thumbs {\n display: flex;\n gap: 10px;\n justify-content: center;\n margin-top: 16px;\n }\n\n .hero-product-thumb {\n width: 52px;\n height: 52px;\n border-radius: 50%;\n background: var(--gray-100);\n display: flex;\n align-items: center;\n justify-content: center;\n cursor: pointer;\n border: 2px solid transparent;\n transition: border-color 0.3s;\n }\n\n .hero-product-thumb.active { border-color: var(--teal); }\n\n .hero-product-thumb img {\n width: 30px;\n height: 38px;\n object-fit: contain;\n }\n\n \/* \u2500\u2500 Stats Bar \u2500\u2500 *\/\n .stats-bar {\n background: var(--white);\n border-bottom: 1px solid var(--gray-200);\n padding: 40px 48px;\n }\n\n .stats-bar-inner {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n max-width: 900px;\n margin: 0 auto;\n text-align: center;\n }\n\n .stat-item {\n padding: 0 20px;\n border-right: 1px solid var(--gray-200);\n }\n\n .stat-item:last-child { border-right: none; }\n\n .stat-number {\n font-family: var(--ff-serif);\n font-size: 36px;\n font-weight: 600;\n color: var(--black);\n }\n\n .stat-number .stat-suffix {\n font-size: 20px;\n color: var(--teal);\n font-weight: 500;\n }\n\n .stat-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 400;\n letter-spacing: 0.15em;\n color: var(--gray-400);\n margin-top: 6px;\n text-transform: uppercase;\n }\n\n \/* \u2500\u2500 Headline Section \u2500\u2500 *\/\n .headline-section {\n padding: 140px 48px;\n text-align: center;\n background: var(--white);\n }\n\n .headline-word {\n display: block;\n font-family: var(--ff-serif);\n font-size: clamp(36px, 4vw, 56px);\n line-height: 1.3;\n color: var(--black);\n }\n\n .headline-word--light {\n font-weight: 400;\n font-style: normal;\n }\n\n .headline-word--bold-italic {\n font-weight: 700;\n font-style: italic;\n color: var(--teal);\n }\n\n .headline-desc {\n font-family: var(--ff-sans);\n font-size: 15px;\n font-weight: 300;\n color: var(--gray-600);\n max-width: 420px;\n margin: 32px auto 0;\n line-height: 1.7;\n letter-spacing: 0.01em;\n }\n\n \/* \u2500\u2500 Products \u2500\u2500 *\/\n .products-section {\n padding: 100px 48px 120px;\n background: var(--gray-50);\n }\n\n .products-header {\n display: flex;\n justify-content: space-between;\n align-items: baseline;\n margin-bottom: 56px;\n }\n\n .products-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n }\n\n .products-subtitle {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-600);\n margin-top: 8px;\n }\n\n .products-link {\n font-family: var(--ff-mono);\n font-size: 12px;\n letter-spacing: 0.15em;\n color: var(--gray-400);\n transition: color 0.3s;\n }\n\n .products-link:hover { color: var(--teal); }\n\n .products-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 28px;\n }\n\n .product-card {\n background: var(--white);\n border-radius: 16px;\n padding: 28px 20px 24px;\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94),\n box-shadow 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n cursor: pointer;\n position: relative;\n overflow: hidden;\n text-align: center;\n display: flex;\n flex-direction: column;\n align-items: center;\n }\n\n .product-card::after {\n content: '';\n position: absolute;\n bottom: 0;\n left: 0;\n width: 100%;\n height: 3px;\n transform: scaleX(0);\n transform-origin: left;\n transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);\n }\n\n .product-card:hover {\n transform: translateY(-8px);\n box-shadow: 0 20px 50px rgba(0, 0, 0, 0.08);\n }\n\n .product-card:hover::after { transform: scaleX(1); }\n .product-card:hover .product-card-quick-add { opacity: 1; transform: translateY(0); }\n\n .product-card:nth-child(1)::after { background: var(--teal); }\n .product-card:nth-child(2)::after { background: var(--gold); }\n .product-card:nth-child(3)::after { background: var(--blue); }\n .product-card:nth-child(4)::after { background: var(--pink); }\n .product-card:nth-child(5)::after { background: var(--purple); }\n .product-card:nth-child(6)::after { background: var(--green); }\n .product-card:nth-child(7)::after { background: var(--orange); }\n\n .product-card-badge {\n position: absolute;\n top: 12px;\n right: 12px;\n font-family: var(--ff-mono);\n font-size: 9px;\n font-weight: 600;\n letter-spacing: 0.05em;\n padding: 3px 8px;\n border-radius: 10px;\n background: var(--teal-bg);\n color: var(--teal);\n }\n\n \/* \u2500\u2500 Product card media (Typology hover-swap photo\u2192video) \u2500\u2500\n object-fit: contain \u2014 keeps the full packshot + full video frame visible.\n The shoot\/ packshots have soft gradient backdrops that read well at any size,\n and the application videos are close-up shots that look unnatural when cropped.\n Container has a soft cream background to fill any letterbox margins gracefully. *\/\n .product-card-media {\n position: relative;\n width: 100%;\n aspect-ratio: 1 \/ 1;\n max-height: 360px;\n margin: 0 auto 18px;\n overflow: hidden;\n transform: translateZ(0);\n background: #fafaf8;\n }\n \/* High-specificity selectors to beat the global product-card override at line ~1736 *\/\n .product-card .product-card-media img,\n .product-card .product-card-media video {\n position: absolute !important;\n inset: 0 !important;\n width: 100% !important;\n height: 100% !important;\n max-height: none !important;\n min-height: 0 !important;\n margin: 0 !important;\n object-fit: contain !important;\n object-position: center !important;\n transition: opacity .3s cubic-bezier(.4,0,.2,1);\n will-change: opacity;\n backface-visibility: hidden;\n }\n .product-card .product-card-media img { opacity: 1; z-index: 1; }\n .product-card .product-card-media video { opacity: 0; z-index: 2; pointer-events: none; }\n .product-card:hover .product-card-media video[src],\n .product-card:focus-within .product-card-media video[src],\n .product-card-media.is-playing video[src] { opacity: 1; }\n .product-card:hover .product-card-media:has(video[src]) img,\n .product-card:focus-within .product-card-media:has(video[src]) img,\n .product-card-media.is-playing:has(video[src]) img { opacity: 0; }\n @media (hover: none) { .product-card-media video[src] { opacity: 0; } .product-card-media.is-playing video[src] { opacity: 1; } }\n @media (prefers-reduced-motion: reduce) { .product-card-media img, .product-card-media video { transition: none; } .product-card-media video[src] { opacity: 0 !important; } .product-card-media:has(video[src]) img { opacity: 1 !important; } }\n\n \/* legacy class kept for any leftover markup using <img class=\"product-card-img\"> directly *\/\n .product-card-img {\n width: 100%;\n height: 280px;\n object-fit: contain;\n object-position: center;\n margin: 0 auto 18px;\n display: block;\n }\n\n .product-card-name {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--gray-600);\n margin-bottom: 4px;\n }\n .product-card-active {\n display: block;\n margin-top: 3px;\n color: var(--black);\n font-weight: 600;\n letter-spacing: 0.12em;\n }\n \/* \u2500\u2500 Trust strip (Typology pattern, 2026-04-22) \u2500\u2500 *\/\n .trust-strip { background: #fff; padding: 72px 24px; border-top: 1px solid rgba(0,0,0,.08); border-bottom: 1px solid rgba(0,0,0,.08); }\n .trust-strip-inner { max-width: 1200px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 56px; }\n .trust-pillar { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 14px; }\n .trust-icon { width: 38px; height: 38px; fill: none; stroke: #000; stroke-width: 1.2; }\n .trust-label { font-family: var(--ff-mono, 'Josefin Sans', sans-serif); font-size: 11px; font-weight: 600; letter-spacing: 0.18em; text-transform: uppercase; color: #000; }\n .trust-text { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,.6); max-width: 240px; }\n @media (max-width: 800px) { .trust-strip { padding: 48px 20px; } .trust-strip-inner { grid-template-columns: 1fr; gap: 36px; } }\n\n .product-card-desc {\n font-family: var(--ff-sans);\n font-size: 12px;\n font-weight: 300;\n color: var(--gray-400);\n margin-bottom: 10px;\n line-height: 1.5;\n }\n\n .product-card-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n width: 100%;\n margin-top: auto;\n padding-top: 12px;\n }\n\n .product-card-price {\n font-family: var(--ff-serif);\n font-size: 18px;\n font-weight: 600;\n color: var(--black);\n }\n\n .product-card-quick-add {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.1em;\n color: var(--white);\n background: var(--black);\n padding: 8px 14px;\n border-radius: 6px;\n opacity: 0;\n transform: translateY(8px);\n transition: all 0.3s ease;\n }\n\n .product-card-quick-add:hover { background: var(--teal); }\n\n \/* \u2500\u2500 Values \/ Nos valeurs \u2500\u2500 *\/\n .values-section {\n padding: 80px 48px;\n background: var(--white);\n }\n\n .values-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 24px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .value-card {\n text-align: center;\n padding: 32px 20px;\n background: var(--gray-50);\n border-radius: 16px;\n transition: transform 0.3s, box-shadow 0.3s;\n }\n\n .value-card:hover {\n transform: translateY(-4px);\n box-shadow: 0 12px 32px rgba(0,0,0,0.06);\n }\n\n .value-icon {\n width: 48px;\n height: 48px;\n margin: 0 auto 16px;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .value-icon svg {\n width: 32px;\n height: 32px;\n stroke: var(--teal);\n fill: none;\n stroke-width: 1.5;\n }\n\n .value-name {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--black);\n margin-bottom: 8px;\n }\n\n .value-desc {\n font-family: var(--ff-sans);\n font-size: 12px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.6;\n }\n\n \/* \u2500\u2500 Clinical Results \u2500\u2500 *\/\n .clinical-section {\n background: var(--black);\n padding: 100px 48px;\n }\n\n .clinical-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--gold);\n text-align: center;\n margin-bottom: 16px;\n }\n\n .clinical-title {\n font-family: var(--ff-serif);\n font-size: clamp(24px, 2.5vw, 36px);\n font-weight: 500;\n color: var(--white);\n text-align: center;\n margin-bottom: 64px;\n }\n\n .clinical-grid {\n display: grid;\n grid-template-columns: repeat(4, 1fr);\n gap: 32px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .clinical-stat {\n text-align: center;\n position: relative;\n }\n\n .clinical-stat::after {\n content: '';\n position: absolute;\n right: 0;\n top: 20%;\n height: 60%;\n width: 1px;\n background: rgba(255,255,255,0.1);\n }\n\n .clinical-stat:last-child::after { display: none; }\n\n .clinical-number {\n font-family: var(--ff-serif);\n font-size: clamp(40px, 4vw, 64px);\n font-weight: 700;\n color: var(--white);\n line-height: 1;\n }\n\n .clinical-number .accent {\n color: var(--gold);\n }\n\n .clinical-desc {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n margin-top: 12px;\n line-height: 1.5;\n }\n\n .clinical-footnote {\n font-family: var(--ff-mono);\n font-size: 10px;\n color: rgba(255,255,255,0.25);\n text-align: center;\n margin-top: 48px;\n letter-spacing: 0.05em;\n }\n\n \/* \u2500\u2500 Editorial Split \u2500\u2500 *\/\n .split-section {\n display: grid;\n grid-template-columns: 1fr 1fr;\n min-height: 600px;\n }\n\n .split-image {\n position: relative;\n overflow: hidden;\n }\n\n .split-image img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n object-position: center;\n }\n\n .split-content {\n display: flex;\n flex-direction: column;\n justify-content: center;\n padding: 80px 80px 80px 64px;\n background: var(--white);\n }\n\n .split-eyebrow {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.3em;\n color: var(--teal);\n margin-bottom: 20px;\n }\n\n .split-quote {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 2.5vw, 36px);\n font-weight: 400;\n font-style: italic;\n color: var(--black);\n line-height: 1.4;\n margin-bottom: 24px;\n }\n\n .split-desc {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.8;\n max-width: 400px;\n margin-bottom: 36px;\n }\n\n .split-link {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.2em;\n color: var(--teal);\n display: inline-flex;\n align-items: center;\n gap: 8px;\n transition: gap 0.3s;\n }\n\n .split-link:hover { gap: 14px; }\n\n \/* \u2500\u2500 Ingredient Spotlight \u2500\u2500 *\/\n .ingredients-section {\n padding: 120px 48px;\n background: var(--white);\n }\n\n .ingredients-inner {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 80px;\n max-width: 1100px;\n margin: 0 auto;\n align-items: center;\n }\n\n .ingredients-visual {\n text-align: center;\n }\n\n .ingredients-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 16px;\n }\n\n .ingredients-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n margin-bottom: 24px;\n }\n\n .ingredients-bottle-wrap {\n padding: 32px 0;\n display: flex;\n align-items: center;\n justify-content: center;\n }\n .ingredients-bottle {\n width: auto;\n height: clamp(280px, 32vw, 420px);\n max-height: 420px;\n max-width: 100%;\n object-fit: contain;\n display: block;\n margin: 0 auto;\n filter: drop-shadow(0 24px 56px rgba(0,0,0,0.14));\n }\n .ingredients-bottle-caption {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.15em;\n text-transform: uppercase;\n color: var(--gray-500);\n text-align: center;\n margin-top: 8px;\n }\n .ingredients-bottle-name {\n font-family: var(--ff-serif);\n font-size: 20px;\n color: var(--black);\n text-align: center;\n margin-top: 4px;\n }\n\n .ingredients-list {\n display: grid;\n grid-template-columns: 1fr 1fr;\n gap: 24px;\n }\n\n .ingredient-card {\n padding: 24px;\n border-left: 3px solid;\n background: var(--gray-50);\n border-radius: 0 12px 12px 0;\n }\n\n .ingredient-card:nth-child(1) { border-left-color: var(--teal); }\n .ingredient-card:nth-child(2) { border-left-color: var(--gold); }\n .ingredient-card:nth-child(3) { border-left-color: var(--blue); }\n .ingredient-card:nth-child(4) { border-left-color: var(--pink); }\n\n .ingredient-name {\n font-family: var(--ff-mono);\n font-size: 13px;\n font-weight: 600;\n color: var(--black);\n margin-bottom: 4px;\n }\n\n .ingredient-concentration {\n font-family: var(--ff-serif);\n font-size: 22px;\n font-weight: 600;\n color: var(--teal);\n margin-bottom: 8px;\n }\n\n .ingredient-benefit {\n font-family: var(--ff-sans);\n font-size: 12px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.5;\n }\n\n \/* \u2500\u2500 Routine Builder \u2500\u2500 *\/\n .routine-section {\n padding: 100px 48px;\n background: var(--gray-50);\n }\n\n .routine-header {\n text-align: center;\n margin-bottom: 64px;\n }\n\n .routine-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 16px;\n }\n\n .routine-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n }\n\n .routine-steps {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 32px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .routine-step {\n background: var(--white);\n border-radius: 20px;\n padding: 36px 28px;\n text-align: center;\n position: relative;\n }\n\n .routine-step-number {\n font-family: var(--ff-serif);\n font-size: 48px;\n font-weight: 700;\n color: var(--gray-200);\n line-height: 1;\n margin-bottom: 20px;\n }\n\n .routine-step img {\n width: 100%;\n height: 200px;\n object-fit: contain;\n margin-bottom: 20px;\n }\n\n .routine-step-name {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.1em;\n color: var(--black);\n margin-bottom: 6px;\n }\n\n .routine-step-desc {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-600);\n line-height: 1.6;\n margin-bottom: 12px;\n }\n\n .routine-step-price {\n font-family: var(--ff-serif);\n font-size: 16px;\n font-weight: 600;\n color: var(--teal);\n }\n\n .routine-total {\n text-align: center;\n margin-top: 48px;\n padding: 24px;\n background: var(--white);\n border-radius: 12px;\n max-width: 400px;\n margin-left: auto;\n margin-right: auto;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .routine-total-label {\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 500;\n letter-spacing: 0.15em;\n color: var(--gray-600);\n }\n\n .routine-total-price {\n font-family: var(--ff-serif);\n font-size: 28px;\n font-weight: 700;\n color: var(--black);\n }\n\n .routine-total-price .da {\n font-size: 16px;\n color: var(--gray-400);\n font-weight: 400;\n }\n\n \/* \u2500\u2500 Skin Diagnostic CTA \u2500\u2500 *\/\n .diagnostic-section {\n background: var(--teal);\n padding: 80px 48px;\n display: flex;\n justify-content: space-between;\n align-items: center;\n }\n\n .diagnostic-left {\n flex: 1;\n }\n\n .diagnostic-title {\n font-family: var(--ff-serif);\n font-size: clamp(24px, 2.5vw, 32px);\n font-weight: 600;\n color: var(--white);\n margin-bottom: 8px;\n }\n\n .diagnostic-subtitle {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: rgba(255,255,255,0.85);\n }\n\n .diagnostic-btn {\n display: inline-flex;\n align-items: center;\n gap: 10px;\n padding: 16px 32px;\n background: var(--white);\n color: var(--black);\n font-family: var(--ff-mono);\n font-size: 12px;\n font-weight: 600;\n letter-spacing: 0.15em;\n border-radius: 8px;\n transition: all 0.3s;\n }\n\n .diagnostic-btn:hover {\n background: var(--black);\n color: var(--white);\n }\n\n \/* \u2500\u2500 Testimonials \u2500\u2500 *\/\n .testimonials-section {\n padding: 100px 48px;\n background: var(--white);\n }\n\n .testimonials-header {\n text-align: center;\n margin-bottom: 56px;\n }\n\n .testimonials-label {\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 500;\n letter-spacing: 0.3em;\n text-transform: uppercase;\n color: var(--teal);\n margin-bottom: 16px;\n }\n\n .testimonials-title {\n font-family: var(--ff-serif);\n font-size: clamp(28px, 3vw, 40px);\n font-weight: 500;\n color: var(--black);\n }\n\n .testimonials-grid {\n display: grid;\n grid-template-columns: repeat(3, 1fr);\n gap: 28px;\n max-width: 1000px;\n margin: 0 auto;\n }\n\n .testimonial-card {\n background: var(--gray-50);\n border-radius: 16px;\n padding: 32px;\n position: relative;\n }\n\n .testimonial-stars {\n display: flex;\n gap: 3px;\n margin-bottom: 16px;\n }\n\n .testimonial-stars svg {\n width: 14px;\n height: 14px;\n fill: var(--gold);\n }\n\n .testimonial-text {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-800);\n line-height: 1.7;\n margin-bottom: 20px;\n font-style: italic;\n }\n\n .testimonial-author {\n display: flex;\n align-items: center;\n gap: 12px;\n }\n\n .testimonial-avatar {\n width: 40px;\n height: 40px;\n border-radius: 50%;\n background: var(--teal);\n display: flex;\n align-items: center;\n justify-content: center;\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 600;\n color: var(--white);\n }\n\n .testimonial-name {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 600;\n color: var(--black);\n }\n\n .testimonial-badge {\n display: inline-block;\n font-family: var(--ff-mono);\n font-size: 9px;\n font-weight: 500;\n letter-spacing: 0.05em;\n padding: 2px 8px;\n border-radius: 10px;\n margin-top: 4px;\n }\n\n .testimonial-badge--oily {\n background: #E8F5E9;\n color: #388E3C;\n }\n\n .testimonial-badge--sensitive {\n background: #FFF3E0;\n color: #E65100;\n }\n\n .testimonial-badge--combination {\n background: #E3F2FD;\n color: #1565C0;\n }\n\n \/* \u2500\u2500 Instagram \u2500\u2500 *\/\n .instagram-section {\n padding: 80px 48px;\n background: var(--gray-50);\n }\n\n .instagram-header {\n text-align: center;\n margin-bottom: 40px;\n }\n\n .instagram-handle {\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.1em;\n color: var(--black);\n }\n\n .instagram-cta {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n margin-top: 6px;\n }\n\n .instagram-grid {\n display: grid;\n grid-template-columns: repeat(6, 1fr);\n gap: 6px;\n }\n\n .instagram-photo {\n aspect-ratio: 1;\n overflow: hidden;\n border-radius: 8px;\n cursor: pointer;\n position: relative;\n }\n\n .instagram-photo img {\n width: 100%;\n height: 100%;\n object-fit: cover;\n transition: transform 0.5s, filter 0.5s;\n }\n\n .instagram-photo:hover img {\n transform: scale(1.08);\n filter: brightness(0.85);\n }\n\n .instagram-photo::after {\n content: '';\n position: absolute;\n inset: 0;\n background: rgba(89, 195, 185, 0);\n transition: background 0.3s;\n }\n\n .instagram-photo:hover::after {\n background: rgba(89, 195, 185, 0.15);\n }\n\n \/* \u2500\u2500 Face Gallery \u2500\u2500 *\/\n .gallery-section {\n padding: 100px 48px;\n background: var(--white);\n text-align: center;\n }\n\n .gallery-frame {\n width: 70%;\n max-width: 800px;\n margin: 0 auto;\n border-radius: 20px;\n overflow: hidden;\n position: relative;\n }\n\n .gallery-frame img {\n width: 100%;\n display: block;\n }\n\n .gallery-quote {\n font-family: var(--ff-serif);\n font-size: clamp(18px, 2vw, 24px);\n font-weight: 400;\n font-style: italic;\n color: var(--gray-800);\n max-width: 600px;\n margin: 40px auto 0;\n line-height: 1.5;\n }\n\n .gallery-credit {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 400;\n letter-spacing: 0.3em;\n color: var(--gray-400);\n margin-top: 16px;\n }\n\n \/* \u2500\u2500 Newsletter \u2500\u2500 *\/\n .newsletter-section {\n padding: 80px 48px;\n background: var(--gray-50);\n text-align: center;\n }\n\n .newsletter-title {\n font-family: var(--ff-serif);\n font-size: clamp(24px, 2.5vw, 36px);\n font-weight: 500;\n color: var(--black);\n margin-bottom: 12px;\n }\n\n .newsletter-desc {\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--gray-600);\n margin-bottom: 32px;\n }\n\n .newsletter-form {\n display: flex;\n gap: 12px;\n max-width: 480px;\n margin: 0 auto;\n }\n\n .newsletter-input {\n flex: 1;\n padding: 14px 20px;\n border: 1px solid var(--gray-200);\n border-radius: 8px;\n font-family: var(--ff-sans);\n font-size: 14px;\n font-weight: 300;\n color: var(--black);\n background: var(--white);\n outline: none;\n transition: border-color 0.3s;\n }\n\n .newsletter-input:focus { border-color: var(--teal); }\n\n .newsletter-input::placeholder {\n color: var(--gray-400);\n }\n\n .newsletter-btn {\n padding: 14px 28px;\n background: var(--black);\n color: var(--white);\n font-family: var(--ff-mono);\n font-size: 11px;\n font-weight: 600;\n letter-spacing: 0.15em;\n border-radius: 8px;\n transition: background 0.3s;\n white-space: nowrap;\n }\n\n .newsletter-btn:hover { background: var(--teal); }\n\n .newsletter-privacy {\n font-family: var(--ff-sans);\n font-size: 11px;\n font-weight: 300;\n color: var(--gray-400);\n margin-top: 16px;\n }\n\n \/* \u2500\u2500 Footer \u2500\u2500 *\/\n .footer {\n background: var(--black);\n padding: 80px 48px 40px;\n }\n\n .footer-grid {\n display: grid;\n grid-template-columns: 2fr 1fr 1fr 1fr;\n gap: 48px;\n margin-bottom: 56px;\n }\n\n .footer-brand {\n font-family: var(--ff-mono);\n font-size: 14px;\n font-weight: 500;\n letter-spacing: 0.3em;\n color: var(--white);\n margin-bottom: 16px;\n }\n\n .footer-tagline {\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n line-height: 1.7;\n max-width: 280px;\n margin-bottom: 24px;\n }\n\n .footer-certifications {\n display: flex;\n gap: 16px;\n }\n\n .footer-cert {\n width: 36px;\n height: 36px;\n border-radius: 50%;\n border: 1px solid rgba(255,255,255,0.12);\n display: flex;\n align-items: center;\n justify-content: center;\n }\n\n .footer-cert svg {\n width: 18px;\n height: 18px;\n stroke: var(--teal);\n fill: none;\n stroke-width: 1.5;\n }\n\n .footer-col-title {\n font-family: var(--ff-mono);\n font-size: 10px;\n font-weight: 500;\n letter-spacing: 0.25em;\n text-transform: uppercase;\n color: var(--white);\n margin-bottom: 20px;\n }\n\n .footer-col a {\n display: block;\n font-family: var(--ff-sans);\n font-size: 13px;\n font-weight: 300;\n color: var(--gray-400);\n margin-bottom: 12px;\n transition: color 0.3s;\n }\n\n .footer-col a:hover { color: var(--teal); }\n\n .footer-bottom {\n display: flex;\n justify-content: space-between;\n align-items: center;\n padding-top: 24px;\n border-top: 1px solid rgba(255, 255, 255, 0.06);\n }\n\n .footer-copy {\n font-family: var(--ff-sans);\n font-size: 11px;\n font-weight: 300;\n color: var(--gray-400);\n }\n\n .footer-social {\n display: flex;\n gap: 20px;\n }\n\n .footer-social a {\n font-family: var(--ff-mono);\n font-size: 11px;\n letter-spacing: 0.1em;\n color: var(--gray-400);\n transition: color 0.3s;\n }\n\n .footer-social a:hover { color: var(--teal); }\n\n .footer-payment {\n display: flex;\n gap: 12px;\n align-items: center;\n margin-top: 16px;\n }\n\n .footer-payment span {\n font-family: var(--ff-mono);\n font-size: 10px;\n color: rgba(255,255,255,0.25);\n letter-spacing: 0.05em;\n }\n\n \/* \u2500\u2500 Animations \u2500\u2500 *\/\n .reveal {\n opacity: 0;\n transform: translateY(40px);\n }\n\n .reveal-up {\n opacity: 0;\n transform: translateY(60px);\n }\n\n .reveal-left {\n opacity: 0;\n transform: translateX(-40px);\n }\n\n .reveal-right {\n opacity: 0;\n transform: translateX(40px);\n }\n\n .reveal-scale {\n opacity: 0;\n transform: scale(0.92);\n }\n\n \/* \u2500\u2500 Counter Animation \u2500\u2500 *\/\n .counter-animated {\n display: inline-block;\n }\n\n \/* \u2500\u2500 Responsive \u2500\u2500 *\/\n @media (max-width: 1200px) {\n .products-grid { grid-template-columns: repeat(3, 1fr); }\n }\n\n @media (max-width: 1024px) {\n .products-grid { grid-template-columns: repeat(2, 1fr); }\n .split-section { grid-template-columns: 1fr; }\n .split-content { padding: 60px 48px; }\n .ingredients-inner { grid-template-columns: 1fr; }\n .ingredients-visual { margin-bottom: 40px; }\n .clinical-grid { grid-template-columns: repeat(2, 1fr); gap: 40px; }\n .clinical-stat::after { display: none; }\n .values-grid { grid-template-columns: repeat(2, 1fr); }\n .routine-steps { grid-template-columns: 1fr; max-width: 400px; }\n .testimonials-grid { grid-template-columns: 1fr; max-width: 500px; margin: 0 auto; }\n .instagram-grid { grid-template-columns: repeat(3, 1fr); }\n .footer-grid { grid-template-columns: 1fr 1fr; }\n .stats-bar-inner { grid-template-columns: repeat(2, 1fr); gap: 24px; }\n .stat-item { border-right: none; padding: 12px 20px; }\n .hero-product-card { width: 300px; }\n .nav-links { display: none; }\n }\n\n @media (max-width: 640px) {\n .marquee-item { font-size: 10px; padding: 0 24px; }\n .nav { padding: 20px 24px; }\n .hero-brand-name { font-size: 20vw; }\n .hero-brand-sub { font-size: 2.5vw; }\n .hero-product-card {\n right: 16px;\n bottom: 24px;\n width: 260px;\n padding: 20px;\n }\n .hero-product-card img.hero-product-main { width: 100px; height: 130px; }\n .hero-scroll-hint { display: none; }\n .stats-bar { padding: 24px; }\n .stats-bar-inner { grid-template-columns: 1fr 1fr; gap: 16px; }\n .stat-number { font-size: 28px; }\n .headline-section { padding: 80px 24px; }\n .products-section { padding: 60px 24px 80px; }\n .products-grid { grid-template-columns: 1fr; gap: 20px; }\n .values-section { padding: 60px 24px; }\n .values-grid { grid-template-columns: 1fr 1fr; gap: 16px; }\n .clinical-section { padding: 60px 24px; }\n .clinical-grid { grid-template-columns: 1fr 1fr; gap: 24px; }\n .clinical-number { font-size: 36px; }\n .split-content { padding: 48px 24px; }\n .ingredients-section { padding: 80px 24px; }\n .ingredients-list { grid-template-columns: 1fr; }\n .routine-section { padding: 60px 24px; }\n .diagnostic-section {\n flex-direction: column;\n gap: 24px;\n text-align: center;\n padding: 48px 24px;\n }\n .diagnostic-btn { width: 100%; max-width: 320px; justify-content: center; min-height: 52px; -webkit-tap-highlight-color: transparent; }\n .diagnostic-btn:active { transform: scale(0.98); }\n .testimonials-section { padding: 60px 24px; }\n .instagram-section { padding: 60px 24px; }\n .instagram-grid { grid-template-columns: repeat(2, 1fr); }\n .gallery-section { padding: 60px 24px; }\n .gallery-frame { width: 100%; }\n .newsletter-section { padding: 60px 24px; }\n .newsletter-form { flex-direction: column; }\n .footer { padding: 48px 24px 32px; }\n .footer-grid { grid-template-columns: 1fr; gap: 32px; }\n .footer-bottom { flex-direction: column; gap: 16px; }\n }\n \/* === GLOBAL-SIZE-FIX === *\/\n\/* Model\/lifestyle photos: constrain height *\/\n.hero-photo img, .showcase-photo img, .bento-item img, .closeup img, .face-break img, .face-photo img, .quote-photo img, [class*=\"gallery\"] img, [class*=\"editorial\"] img, [class*=\"split\"] img { max-height: 500px; object-fit: cover; }\n.bento-grid { grid-template-rows: minmax(200px, 280px) minmax(200px, 280px); }\n.closeup, .face-break, [class*=\"face-break\"] { max-height: 450px; }\n\/* Product bottles: enforce minimum size *\/\n.product-card-image img, .product-card img, [class*=\"product-card\"] img, .routine-step img { min-height: 200px !important; height: auto; width: auto; max-height: 300px; object-fit: contain; }\n.ingredients-bottle, img.ingredients-bottle { min-height: 0 !important; max-height: 480px !important; height: clamp(320px, 38vw, 480px) !important; width: auto !important; }\n\/* Product card containers: tighter *\/\n.product-card-image, [class*=\"product-card-img\"] { padding: 16px !important; aspect-ratio: 3\/4; display: flex; align-items: center; justify-content: center; }\n\n\/* ============================================================ *\/\n\/* ROUTINES PAR BESOIN \u2014 4 categories *\/\n\/* ============================================================ *\/\n.routine-subtitle { max-width: 620px; margin: 16px auto 0; text-align: center; font-size: 15px; line-height: 1.65; color: rgba(0,0,0,.58); letter-spacing: .01em; }\n.routine-categories { display: grid; grid-template-columns: repeat(4, 1fr); gap: 20px; margin: 64px 0 32px; align-items: start; }\n.routine-category { position: relative; display: flex; flex-direction: column; background: #fff; border: 1px solid rgba(0,0,0,.08); text-decoration: none; color: inherit; overflow: hidden; transition: border-color .35s cubic-bezier(.4,0,.2,1), transform .5s cubic-bezier(.4,0,.2,1), box-shadow .5s cubic-bezier(.4,0,.2,1); }\n.routine-category::after { content: ''; position: absolute; inset: 0; pointer-events: none; box-shadow: 0 0 0 0 var(--swatch); opacity: 0; transition: opacity .35s ease; }\n.routine-category:hover { border-color: rgba(0,0,0,.5); transform: translateY(-6px); box-shadow: 0 28px 60px -28px rgba(0,0,0,.28); }\n.routine-category:hover::after { opacity: .08; box-shadow: 0 0 0 4px var(--swatch); }\n.routine-category:hover .routine-category-photo img { transform: scale(1.04); }\n.routine-category-photo { position: relative; aspect-ratio: 1\/1; background: #f5f5f2; overflow: hidden; transform: translateZ(0); }\n.routine-category-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; opacity: 1; transition: opacity .28s cubic-bezier(.4,0,.2,1), transform .8s cubic-bezier(.4,0,.2,1); z-index: 1; will-change: opacity, transform; backface-visibility: hidden; display: block; }\n.routine-category-photo video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; opacity: 0; transition: opacity .28s cubic-bezier(.4,0,.2,1); z-index: 2; pointer-events: none; will-change: opacity; backface-visibility: hidden; display: block; }\n.routine-category:hover .routine-category-photo video[src],\n.routine-category:focus-within .routine-category-photo video[src],\n.routine-category-photo.is-playing video[src] { opacity: 1; }\n.routine-category:hover .routine-category-photo:has(video[src]) img,\n.routine-category:focus-within .routine-category-photo:has(video[src]) img,\n.routine-category-photo.is-playing:has(video[src]) img { opacity: 0; }\n.routine-category-photo-placeholder { display: flex; flex-direction: column; align-items: center; gap: 6px; color: rgba(0,0,0,.28); position: relative; z-index: 0; }\n.routine-category-photo-placeholder svg { width: 38px; height: 38px; fill: none; stroke: currentColor; stroke-width: 1.2; }\n.routine-category-photo-placeholder span { font-size: 10px; letter-spacing: .14em; text-transform: uppercase; font-weight: 500; }\n.routine-category-photo:has(img),\n.routine-category-photo:has(video[src]) { background: #f5f5f2; }\n.routine-category-photo:has(img) .routine-category-photo-placeholder,\n.routine-category-photo:has(video[src]) .routine-category-photo-placeholder { display: none; }\n@media (hover: none) { .routine-category-photo video[src] { opacity: 0; } .routine-category-photo.is-playing video[src] { opacity: 1; } }\n@media (prefers-reduced-motion: reduce) { .routine-category-photo img, .routine-category-photo video { transition: none; } .routine-category-photo video[src] { opacity: 0 !important; } .routine-category-photo:has(video[src]) img { opacity: 1 !important; } }\n.routine-category-swatch { position: absolute; top: 0; left: 0; right: 0; height: 4px; background: var(--swatch); z-index: 3; transform-origin: left; transform: scaleX(.85); transition: transform .45s cubic-bezier(.4,0,.2,1); }\n.routine-category:hover .routine-category-swatch { transform: scaleX(1); }\n.routine-category-body { padding: 26px 22px 24px; display: flex; flex-direction: column; flex-grow: 1; gap: 0; background: #fff; }\n.routine-category-name { font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-size: 20px; letter-spacing: -.01em; line-height: 1.2; margin-bottom: 10px; color: #000; }\n.routine-category-desc { font-size: 13.5px; line-height: 1.55; color: rgba(0,0,0,.6); margin-bottom: 18px; flex-grow: 1; }\n.routine-category-pack { display: flex; justify-content: space-between; align-items: baseline; padding: 14px 0 8px; border-top: 1px solid rgba(0,0,0,.08); margin-bottom: 14px; }\n.routine-category-pack-label { font-size: 9.5px; letter-spacing: .16em; text-transform: uppercase; color: rgba(0,0,0,.45); font-weight: 500; }\n.routine-category-pack-price { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 15px; letter-spacing: .01em; color: #000; }\n.routine-category-cta { font-size: 10.5px; letter-spacing: .2em; text-transform: uppercase; font-weight: 600; color: #000; display: inline-flex; align-items: center; gap: 8px; transition: gap .3s cubic-bezier(.4,0,.2,1), color .25s; }\n.routine-category-cta::after { content: '\u2192'; transition: transform .35s cubic-bezier(.4,0,.2,1); display: inline-block; }\n.routine-category:hover .routine-category-cta { color: var(--swatch); }\n.routine-category:hover .routine-category-cta::after { transform: translateX(6px); }\n.routine-note { margin: 40px auto 0; max-width: 620px; text-align: center; font-size: 12px; color: rgba(0,0,0,.5); letter-spacing: .02em; }\n\n\n@media (max-width: 900px) {\n .routine-categories { grid-template-columns: repeat(2, 1fr); gap: 16px; }\n}\n@media (max-width: 560px) {\n .routine-categories { grid-template-columns: 1fr; }\n}\n\n\/* ============================================================ *\/\n\/* NOTRE HISTOIRE *\/\n\/* ============================================================ *\/\n.histoire-section { padding: 120px 48px; background: #fff; border-top: 1px solid rgba(0,0,0,.08); }\n.histoire-inner { max-width: 1240px; margin: 0 auto; }\n.histoire-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-bottom: 18px; }\n.histoire-title { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; max-width: 820px; margin-bottom: 64px; }\n.histoire-grid { display: grid; grid-template-columns: 1.3fr 1fr; gap: 72px; align-items: start; }\n.histoire-text p { font-size: 16px; line-height: 1.75; color: rgba(0,0,0,.75); margin-bottom: 20px; }\n.histoire-text strong { font-weight: 600; color: #000; }\n.histoire-timeline { border-left: 1px solid rgba(0,0,0,.18); padding-left: 32px; }\n.histoire-milestone { margin-bottom: 32px; }\n.histoire-milestone:last-child { margin-bottom: 0; }\n.histoire-milestone-year { font-family: 'Josefin Sans', sans-serif; font-weight: 600; font-size: 18px; letter-spacing: .02em; margin-bottom: 6px; }\n.histoire-milestone-text { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.62); }\n@media (max-width: 900px) {\n .histoire-section { padding: 80px 24px; }\n .histoire-grid { grid-template-columns: 1fr; gap: 48px; }\n .histoire-title { margin-bottom: 40px; }\n}\n\n\/* ============================================================ *\/\n\/* BLOG *\/\n\/* ============================================================ *\/\n.blog-section { padding: 120px 48px; background: #fff; }\n.blog-header { max-width: 1240px; margin: 0 auto 64px; display: grid; grid-template-columns: auto 1fr auto; gap: 32px; align-items: end; }\n.blog-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,0,0,.55); grid-column: 1 \/ -1; }\n.blog-title { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; margin: 12px 0 0; }\n.blog-view-all { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #000; text-decoration: none; white-space: nowrap; padding-bottom: 8px; border-bottom: 1px solid #000; }\n.blog-grid { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 32px; }\n.blog-card { background: #fff; border: 1px solid rgba(0,0,0,.08); overflow: hidden; transition: border-color .25s ease, transform .35s ease; }\n.blog-card:hover { border-color: rgba(0,0,0,.35); transform: translateY(-3px); }\n.blog-card-img { aspect-ratio: 4\/3; background: #f5f5f2; display: flex; align-items: center; justify-content: center; position: relative; border-bottom: 1px solid rgba(0,0,0,.06); overflow: hidden; }\n.blog-card-img img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: center; }\n.blog-card-img-placeholder { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: 120px; color: rgba(0,0,0,.12); letter-spacing: -.02em; line-height: 1; }\n.blog-card-body { padding: 28px 26px 32px; }\n.blog-card-meta { font-size: 10px; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.48); margin-bottom: 14px; }\n.blog-card-title { font-family: 'Josefin Sans', sans-serif; font-weight: 500; font-size: 20px; line-height: 1.3; letter-spacing: -.005em; margin-bottom: 12px; color: #000; }\n.blog-card-excerpt { font-size: 14px; line-height: 1.6; color: rgba(0,0,0,.62); margin-bottom: 20px; }\n.blog-card-cta { font-size: 12px; letter-spacing: .14em; text-transform: uppercase; font-weight: 600; color: #000; }\n@media (max-width: 900px) {\n .blog-section { padding: 80px 24px; }\n .blog-header { grid-template-columns: 1fr; gap: 16px; }\n .blog-grid { grid-template-columns: 1fr; gap: 20px; }\n}\n\n\/* ============================================================ *\/\n\/* CONTACT (Typology-aligned: white, typography-forward) *\/\n\/* ============================================================ *\/\n.contact-section { padding: 120px 48px; background: #fff; color: #000; border-top: 1px solid rgba(0,0,0,.08); }\n.contact-inner { max-width: 1240px; margin: 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 80px; align-items: start; }\n.contact-label { font-size: 11px; letter-spacing: .22em; text-transform: uppercase; color: rgba(0,0,0,.55); margin-bottom: 16px; }\n.contact-title { font-family: 'Josefin Sans', sans-serif; font-weight: 300; font-size: clamp(32px, 4vw, 52px); line-height: 1.12; letter-spacing: -.01em; margin-bottom: 24px; color: #000; }\n.contact-desc { font-size: 15px; line-height: 1.7; color: rgba(0,0,0,.65); margin-bottom: 40px; max-width: 440px; }\n.contact-channels { display: flex; flex-direction: column; gap: 0; border-top: 1px solid rgba(0,0,0,.12); }\n.contact-channel { display: flex; justify-content: space-between; align-items: center; padding: 20px 0; border-bottom: 1px solid rgba(0,0,0,.12); color: #000; text-decoration: none; transition: padding .25s ease; }\n.contact-channel:hover { padding-left: 8px; }\n.contact-channel-label { font-size: 11px; letter-spacing: .2em; text-transform: uppercase; color: rgba(0,0,0,.52); }\n.contact-channel-value { font-size: 15px; letter-spacing: .01em; }\n.contact-form { background: #fafaf8; padding: 40px 36px; border: 1px solid rgba(0,0,0,.08); }\n.contact-field { margin-bottom: 20px; }\n.contact-field label { display: block; font-size: 11px; letter-spacing: .18em; text-transform: uppercase; color: rgba(0,0,0,.62); margin-bottom: 8px; }\n.contact-field input, .contact-field select, .contact-field textarea { width: 100%; background: #fff; border: 1px solid rgba(0,0,0,.14); color: #000; padding: 14px 16px; font-family: inherit; font-size: 14px; letter-spacing: .01em; transition: border-color .2s ease; }\n.contact-field input:focus, .contact-field select:focus, .contact-field textarea:focus { outline: none; border-color: #000; }\n.contact-field textarea { resize: vertical; min-height: 120px; }\n.contact-field select { appearance: none; background-image: linear-gradient(45deg, transparent 50%, #000 50%), linear-gradient(135deg, #000 50%, transparent 50%); background-position: calc(100% - 20px) 18px, calc(100% - 14px) 18px; background-size: 6px 6px, 6px 6px; background-repeat: no-repeat; cursor: pointer; }\n.contact-submit { width: 100%; margin-top: 12px; padding: 16px; background: #000; color: #fff; border: none; font-family: inherit; font-weight: 600; font-size: 12px; letter-spacing: .18em; text-transform: uppercase; cursor: pointer; transition: background .2s ease, color .2s ease; }\n.contact-submit:hover { background: #DD5C63; color: #fff; }\n.contact-note { font-size: 11px; color: rgba(0,0,0,.48); margin-top: 16px; letter-spacing: .02em; text-align: center; }\n@media (max-width: 900px) {\n .contact-section { padding: 80px 24px; }\n .contact-inner { grid-template-columns: 1fr; gap: 48px; }\n .contact-form { padding: 32px 24px; }\n}\n\n\/* ============================================================ *\/\n\/* SOCIAL STRIP (under Instagram grid) *\/\n\/* ============================================================ *\/\n.social-strip { display: flex; justify-content: center; gap: 12px; margin: 40px auto 0; flex-wrap: wrap; max-width: 720px; }\n.social-strip-link { display: inline-flex; align-items: center; gap: 10px; padding: 12px 22px; border: 1px solid rgba(0,0,0,.14); color: #000; text-decoration: none; font-size: 13px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; transition: background .2s ease, color .2s ease, border-color .2s ease; }\n.social-strip-link:hover { background: #000; color: #fff; border-color: #000; }\n.social-strip-link svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.6; }\n.instagram-handle { text-decoration: none; color: inherit; }\n.instagram-handle:hover { color: #DD5C63; }\n@media (max-width: 560px) {\n .social-strip { gap: 8px; }\n .social-strip-link { padding: 10px 14px; font-size: 11px; }\n}\n\n\/* ============================================================ *\/\n\/* ICON SWAP SYSTEM (Typology-style ready) *\/\n\/* Drop client-provided icons into .routine-category-icon-slot *\/\n\/* as <img decoding=\"async\" src=\"\"> and the SVG placeholder will be hidden. *\/\n\/* ============================================================ *\/\n.routine-category-icon-slot img + svg,\n.routine-category-icon-slot:has(img) svg { display: none; }\n<\/style>\n<\/head>\n\n<body>\n\n \n \n\n \n \n <a href=\"#\" class=\"diagnostic-fab\" data-quiz-trigger aria-label=\"Diagnostic peau en 2 minutes\">\n <span class=\"diagnostic-fab-dot\" aria-hidden=\"true\"><\/span>\n <span class=\"diagnostic-fab-label\">DIAGNOSTIC<\/span>\n <svg class=\"diagnostic-fab-arrow\" viewBox=\"0 0 24 24\" aria-hidden=\"true\" width=\"14\" height=\"14\"><path d=\"M5 12h14M13 6l6 6-6 6\" stroke=\"currentColor\" stroke-width=\"2\" fill=\"none\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/a>\n\n \n\n \n <section class=\"hero hero--video\">\n <video class=\"hero-image hero-video hero-video--desktop\" autoplay muted loop playsinline preload=\"auto\" disablepictureinpicture poster=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-white-scaled.png\">\n <source src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hero-desktop-v4-pose3.mp4\" type=\"video\/mp4\">\n <\/video>\n <video class=\"hero-image hero-video hero-video--mobile\" autoplay muted loop playsinline preload=\"auto\" disablepictureinpicture poster=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-white-scaled.png\">\n <source src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hero-mobile-v4-pose3.mp4\" type=\"video\/mp4\">\n <\/video>\n <div class=\"hero-overlay\"><\/div>\n\n <div class=\"hero-product-card reveal-up\">\n <span class=\"hero-product-card-badge\">BEST-SELLER<\/span>\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"Serum Equilibrant\" class=\"hero-product-main\">\n <div class=\"hero-product-card-name\">S\u00e9rum \u00c9quilibrant<\/div>\n <div class=\"hero-product-card-formula\">Niacinamide 5% + Zinc PCA<\/div>\n <div class=\"hero-product-card-price\">2,500 DA<\/div>\n <button class=\"hero-product-card-btn\">AJOUTER AU PANIER<\/button>\n <div class=\"hero-product-thumbs\">\n <div class=\"hero-product-thumb active\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"Serum Equilibrant\">\n <\/div>\n <div class=\"hero-product-thumb\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/vit-c.png\" alt=\"Serum Vitamine C\">\n <\/div>\n <div class=\"hero-product-thumb\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hydratant.png\" alt=\"Serum Hydratant\">\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"hero-scroll-hint\">\n <span>D\u00c9FILER<\/span>\n <div class=\"hero-scroll-line\"><\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"stats-bar\">\n <div class=\"stats-bar-inner\">\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"8\">0<\/span> <span class=\"stat-suffix\">soins<\/span><\/div>\n <div class=\"stat-label\">Une gamme compl\u00e8te<\/div>\n <\/div>\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"100\">0<\/span><span class=\"stat-suffix\">%<\/span><\/div>\n <div class=\"stat-label\">Routine pens\u00e9e pour respecter l’\u00e9quilibre de la peau<\/div>\n <\/div>\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"0\">0<\/span><\/div>\n <div class=\"stat-label\">Compromis entre efficacit\u00e9 et douceur<\/div>\n <\/div>\n <div class=\"stat-item reveal\">\n <div class=\"stat-number\"><span class=\"counter-animated\" data-target=\"1\">0<\/span><\/div>\n <div class=\"stat-label\">Objectif : une peau saine, pas agress\u00e9e<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"headline-section\">\n <div class=\"headline-word headline-word--light reveal\">SIMPLE,<\/div>\n <div class=\"headline-word headline-word--light reveal\">RAPIDE,<\/div>\n <div class=\"headline-word headline-word--bold-italic reveal\">Efficace.<\/div>\n <p class=\"headline-desc reveal\">\n Des formulations dermo-cosm\u00e9tiques \n avec des concentrations actives test\u00e9es dermatologiquement.\n Sans compromis.\n <\/p>\n <\/section>\n\n \n \n <section class=\"products-section\" id=\"produits\">\n <div class=\"products-header\">\n <div>\n <h2 class=\"products-title reveal-left\">Nos produits<\/h2>\n <p class=\"products-subtitle reveal\">8 soins. 0 compromis. 1 objectif : une peau saine, pas agress\u00e9e.<\/p>\n <\/div>\n <a href=\"#\" class=\"products-link reveal\">TOUT VOIR →<\/a>\n <\/div>\n\n <div class=\"products-grid\">\n\n \n <div class=\"product-card reveal-up\" data-product=\"gel-moussant\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/gel.png\" alt=\"Gel Moussant Anti-Imperfections\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">GEL MOUSSANT <span class=\"product-card-active\">\u2014 ANTI-IMPERFECTIONS<\/span><\/div>\n <div class=\"product-card-desc\">Nettoie en profondeur tout en respectant l’\u00e9quilibre naturel. D\u00e9sobstrue les pores, laisse la peau fra\u00eeche et nette.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 450 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"serum-equilibrant\">\n <span class=\"product-card-badge\">BEST-SELLER<\/span>\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"S\u00e9rum \u00c9quilibrant\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">S\u00c9RUM \u00c9QUILIBRANT <span class=\"product-card-active\">\u2014 NIACINAMIDE 5% + ZINC PCA<\/span><\/div>\n <div class=\"product-card-desc\">R\u00e9gule la production de s\u00e9bum, r\u00e9duit visiblement les imperfections, resserre les pores et apaise les rougeurs.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 500 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"emulsion\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/emulsion.png\" alt=\"\u00c9mulsion Anti-Imperfection\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">\u00c9MULSION <span class=\"product-card-active\">\u2014 ANTI-IMPERFECTION<\/span><\/div>\n <div class=\"product-card-desc\">Soin l\u00e9ger qui hydrate sans alourdir. R\u00e9gule l’exc\u00e8s de s\u00e9bum, pr\u00e9vient les imperfections, fini mat doux et confortable.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 550 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"creme-cica\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/cica.png\" alt=\"Cr\u00e8me Cica\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">CR\u00c8ME CICA <span class=\"product-card-active\">\u2014 APAISE & R\u00c9PARE<\/span><\/div>\n <div class=\"product-card-desc\">Renforce la barri\u00e8re cutan\u00e9e, r\u00e9duit les rougeurs, calme l’inconfort. Hydratation intense pour les peaux fragilis\u00e9es.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 450 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"serum-hydratant\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hydratant.png\" alt=\"S\u00e9rum Hydratant\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">S\u00c9RUM HYDRATANT <span class=\"product-card-active\">\u2014 ACIDE HYALURONIQUE + TR\u00c9HALOSE<\/span><\/div>\n <div class=\"product-card-desc\">Hydratation intense et imm\u00e9diate. Repulpe, lisse et am\u00e9liore l’\u00e9lasticit\u00e9. Renforce la barri\u00e8re d’hydratation.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 500 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"creme-eclaircissante\">\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/eclaircissante.png\" alt=\"Cr\u00e8me \u00c9claircissante\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">CR\u00c8ME \u00c9CLAIRCISSANTE <span class=\"product-card-active\">\u2014 UNIFIE LE TEINT<\/span><\/div>\n <div class=\"product-card-desc\">R\u00e9duit l’apparence des taches et zones irr\u00e9guli\u00e8res. Hydrate en profondeur, r\u00e9v\u00e8le un teint lumineux et homog\u00e8ne.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">1 980 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"serum-eclaircissant\">\n <span class=\"product-card-badge\">NOUVEAU<\/span>\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/vit-c.png\" alt=\"S\u00e9rum \u00c9claircissant\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">S\u00c9RUM \u00c9CLAIRCISSANT <span class=\"product-card-active\">\u2014 VITAMINE C 10% STABLE<\/span><\/div>\n <div class=\"product-card-desc\">Antioxydant puissant \u00e0 la Vitamine C 10% Stable, Acide f\u00e9rulique, Centella Asiatica et Vitamine E. \u00c9clat et unification du teint, att\u00e9nue les taches pigmentaires.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 790 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n \n <div class=\"product-card reveal-up\" data-product=\"ecran-solaire\">\n <span class=\"product-card-badge\">2 TEINTES<\/span>\n <div class=\"product-card-media\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/ecran-solaire-1.png\" alt=\"\u00c9cran Solaire SPF 50+ Toucher Sec\" class=\"product-card-img\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"product-card-name\">\u00c9CRAN SOLAIRE <span class=\"product-card-active\">\u2014 SPF 50+ TOUCHER SEC<\/span><\/div>\n <div class=\"product-card-desc\">Prot\u00e8ge la peau contre les effets nocifs des rayons UVA\/UVB avec un fini toucher sec. Teint\u00e9 ou Invisible.<\/div>\n <div class=\"product-card-bottom\">\n <div class=\"product-card-price\">2 290 DA<\/div>\n <button class=\"product-card-quick-add\">AJOUTER<\/button>\n <\/div>\n <\/div>\n\n <\/div>\n <\/section>\n\n \n <section class=\"routine-section\" id=\"routines\">\n <div class=\"routine-header\">\n <div class=\"routine-label reveal\">ROUTINES PAR BESOIN<\/div>\n <h2 class=\"routine-title reveal\">Trouvez la routine faite pour votre peau<\/h2>\n <p class=\"routine-subtitle reveal\">Quatre protocoles cibl\u00e9s. Chaque routine inclut un pack produits adapt\u00e9 \u00e0 votre pr\u00e9occupation.<\/p>\n <\/div>\n\n <div class=\"routine-categories\">\n <a href=\"\/routine-peau-seche\/\" class=\"routine-category reveal-up\" data-routine=\"peau-seche\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#589DD2;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"peau-seche\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/peau-seche.jpg\" alt=\"Pack Peau s\u00e8che \u2014 S\u00e9rum Hydratant + Cr\u00e8me Cica\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">Peau s\u00e8che<\/div>\n <div class=\"routine-category-desc\">Hydratation intense et barri\u00e8re cutan\u00e9e. Acide hyaluronique, c\u00e9ramides, cica.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">8 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">3 000 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/routine-taches-pigmentaires\/\" class=\"routine-category reveal-up\" data-routine=\"taches-pigmentaires\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#E2AD53;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"taches-pigmentaires\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/taches-pigmentaires.jpg\" alt=\"Pack Taches pigmentaires \u2014 S\u00e9rum \u00c9claircissant + \u00c9cran Solaire\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">Taches pigmentaires<\/div>\n <div class=\"routine-category-desc\">\u00c9clat et uniformit\u00e9. Vitamine C, r\u00e9tinol, \u00e9cran solaire SPF 50+.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">9 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">3 430 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/routine-anti-imperfections\/\" class=\"routine-category reveal-up\" data-routine=\"anti-imperfections\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#59C3B9;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"anti-imperfections\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/anti-imperfections.jpg\" alt=\"Pack Anti-imperfections \u2014 Gel Moussant + S\u00e9rum \u00c9quilibrant\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">Anti-imperfections<\/div>\n <div class=\"routine-category-desc\">\u00c9quilibre s\u00e9bum et purification. Niacinamide, zinc PCA, gel moussant.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">9 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">3 000 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n\n <a href=\"\/routine-serums\/\" class=\"routine-category reveal-up\" data-routine=\"serums\">\n <div class=\"routine-category-swatch\" style=\"--swatch:#DD5C63;\"><\/div>\n <div class=\"routine-category-photo\" data-pack-key=\"serums\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/serums.jpg\" alt=\"Pack S\u00e9rums \u2014 S\u00e9rum Hydratant + S\u00e9rum \u00c9claircissant\" decoding=\"async\" loading=\"lazy\">\n <\/div>\n <div class=\"routine-category-body\">\n <div class=\"routine-category-name\">S\u00e9rums<\/div>\n <div class=\"routine-category-desc\">Les actifs \u00e0 leur concentration juste. \u00c9quilibrant, hydratant, \u00e9claircissant.<\/div>\n <div class=\"routine-category-pack\">\n <span class=\"routine-category-pack-label\">23 PACKS \u00b7 D\u00c8S<\/span>\n <span class=\"routine-category-pack-price\">10 000 DA<\/span>\n <\/div>\n <span class=\"routine-category-cta\">D\u00e9couvrir<\/span>\n <\/div>\n <\/a>\n <\/div>\n\n <p class=\"routine-note reveal\">49 packs au total \u00e0 travers les 4 routines. Cliquez une routine pour d\u00e9couvrir toutes ses compositions.<\/p>\n <\/section>\n\n \n <section class=\"values-section\">\n <div class=\"values-grid\">\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M22 11.08V12a10 10 0 1 1-5.93-9.14\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><polyline points=\"22 4 12 14.01 9 11.01\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">EFFICACIT\u00c9<\/div>\n <div class=\"value-desc\">Concentrations actives cliniquement prouv\u00e9es, pas de doses marketing<\/div>\n <\/div>\n\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 2L2 7l10 5 10-5-10-5z\"\/><path d=\"M2 17l10 5 10-5\"\/><path d=\"M2 12l10 5 10-5\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">FORMULES PURES<\/div>\n <div class=\"value-desc\">Actifs concentr\u00e9s, rien de superflu. Que ce qui travaille pour votre peau<\/div>\n <\/div>\n\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M3 9l9-7 9 7v11a2 2 0 0 1-2 2H5a2 2 0 0 1-2-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><polyline points=\"9 22 9 12 15 12 15 22\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">FORMULATION<\/div>\n <div class=\"value-desc\">Con\u00e7u et fabriqu\u00e9 pour les votre peau<\/div>\n <\/div>\n\n <div class=\"value-card reveal-up\">\n <div class=\"value-icon\">\n <svg viewBox=\"0 0 24 24\"><path d=\"M12 22s8-4 8-10V5l-8-3-8 3v7c0 6 8 10 8 10z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <\/div>\n <div class=\"value-name\">TEST\u00c9 DERMATO<\/div>\n <div class=\"value-desc\">Chaque formule test\u00e9e dermatologiquement, tol\u00e9rance optimale<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n <section class=\"clinical-section\" data-placeholder=\"clinical-data\">\n <div class=\"clinical-label reveal\">R\u00c9SULTATS CLINIQUES<\/div>\n <h2 class=\"clinical-title reveal\">Les chiffres parlent<\/h2>\n\n <div class=\"clinical-grid\">\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"counter-animated\" data-target=\"94\">0<\/span><span class=\"accent\">%<\/span><\/div>\n <div class=\"clinical-desc\">de satisfaction<br>apr\u00e8s 4 semaines<\/div>\n <\/div>\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"accent\">–<\/span><span class=\"counter-animated\" data-target=\"42\">0<\/span><span class=\"accent\">%<\/span><\/div>\n <div class=\"clinical-desc\">de s\u00e9bum en<br>exc\u00e9dent<\/div>\n <\/div>\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"accent\">+<\/span><span class=\"counter-animated\" data-target=\"56\">0<\/span><span class=\"accent\">%<\/span><\/div>\n <div class=\"clinical-desc\">d’hydratation<br>en 24h<\/div>\n <\/div>\n <div class=\"clinical-stat reveal-up\">\n <div class=\"clinical-number\"><span class=\"counter-animated\" data-target=\"4\">0<\/span> <span class=\"accent\">sem.<\/span><\/div>\n <div class=\"clinical-desc\">pour des r\u00e9sultats<br>visibles<\/div>\n <\/div>\n <\/div>\n\n <p class=\"clinical-footnote reveal\">*Donn\u00e9es indicatives \u2014 \u00e9tude clinique en cours.<\/p>\n <\/section>\n\n \n <section class=\"split-section\">\n <div class=\"split-image\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-products-scaled.png\" alt=\"Treatment Laboratoire model with products\">\n <\/div>\n <div class=\"split-content\">\n <div class=\"split-eyebrow reveal\">NOTRE PHILOSOPHIE<\/div>\n <p class=\"split-quote reveal-left\">\n Chaque formule est une promesse de resultat.\n <\/p>\n <p class=\"split-desc reveal\">\n مكوّناتنا النشطة sont s\u00e9lectionn\u00e9s pour leur efficacit\u00e9 clinique,\n pas pour leur marketing. Des concentrations reelles,\n des resultats visibles des les premieres applications.\n Nous croyons que la beaute n’a pas besoin d’etre compliquee.\n <\/p>\n <a href=\"\/a-propos\/\" class=\"split-link reveal\">\n <span>DECOUVRIR NOTRE HISTOIRE<\/span>\n <span>→<\/span>\n <\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"ingredients-section\">\n <div class=\"ingredients-section-header\">\n <div class=\"ingredients-label reveal\">ACTIFS CL\u00c9S<\/div>\n <h2 class=\"ingredients-title reveal\">La science derri\u00e8re la formule<\/h2>\n <\/div>\n <div class=\"ingredients-inner\">\n <div class=\"ingredients-visual\">\n <div class=\"ingredients-bottle-wrap\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png\" alt=\"S\u00e9rum \u00c9quilibrant\" class=\"ingredients-bottle reveal-scale\">\n <\/div>\n <div class=\"ingredients-bottle-caption reveal\">Formule phare<\/div>\n <div class=\"ingredients-bottle-name reveal\">S\u00e9rum \u00c9quilibrant<\/div>\n <\/div>\n\n <div class=\"ingredients-list\">\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Niacinamide<\/div>\n <div class=\"ingredient-concentration\">5%<\/div>\n <div class=\"ingredient-benefit\">R\u00e9duit les pores, r\u00e9gule le s\u00e9bum et unifie le teint<\/div>\n <\/div>\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Zinc PCA<\/div>\n <div class=\"ingredient-concentration\">1%<\/div>\n <div class=\"ingredient-benefit\">Action anti-bact\u00e9rienne, contr\u00f4le la brillance<\/div>\n <\/div>\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Acide Hyaluronique<\/div>\n <div class=\"ingredient-concentration\">2%<\/div>\n <div class=\"ingredient-benefit\">Hydratation profonde, repulpe la peau<\/div>\n <\/div>\n <div class=\"ingredient-card reveal-right\">\n <div class=\"ingredient-name\">Vitamine E<\/div>\n <div class=\"ingredient-concentration\">0.5%<\/div>\n <div class=\"ingredient-benefit\">Antioxydant puissant, prot\u00e8ge contre les radicaux libres<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"diagnostic-section\">\n <div class=\"diagnostic-left\">\n <h2 class=\"diagnostic-title\">Trouvez votre s\u00e9rum id\u00e9al<\/h2>\n <p class=\"diagnostic-subtitle\">R\u00e9pondez \u00e0 5 questions et d\u00e9couvrez la routine faite pour votre peau<\/p>\n <\/div>\n <a href=\"#\" class=\"diagnostic-btn\" data-quiz-trigger>\n DIAGNOSTIC PEAU →\n <\/a>\n <\/section>\n\n \n <section class=\"testimonials-section\" id=\"temoignages\">\n <div class=\"testimonials-header\">\n <div class=\"testimonials-label reveal\">AVIS CLIENTS<\/div>\n <h2 class=\"testimonials-title reveal\">Elles en parlent<\/h2>\n <\/div>\n\n <div class=\"testimonials-grid\">\n <div class=\"testimonial-card reveal-up\">\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\n \u00ab\u00a0Mon serum prefere, la diff\u00e9rence apr\u00e8s 3 semaines est incroyable. Moins de brillance, peau plus nette. Je recommande a toutes mes amies.\u00a0\u00bb\n <\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">S<\/div>\n <div>\n <div class=\"testimonial-name\">Sarah B.<\/div>\n <span class=\"testimonial-badge testimonial-badge--oily\">Peau grasse<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"testimonial-card reveal-up\">\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\n \u00ab\u00a0Enfin un produit algerien qui tient ses promesses. Le serum hydratant a transforme ma peau seche. Texture legere, absorption rapide.\u00a0\u00bb\n <\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">A<\/div>\n <div>\n <div class=\"testimonial-name\">Amina K.<\/div>\n <span class=\"testimonial-badge testimonial-badge--sensitive\">Peau sensible<\/span>\n <\/div>\n <\/div>\n <\/div>\n\n <div class=\"testimonial-card reveal-up\">\n <div class=\"testimonial-stars\">\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <svg viewBox=\"0 0 24 24\"><polygon points=\"12 2 15.09 8.26 22 9.27 17 14.14 18.18 21.02 12 17.77 5.82 21.02 7 14.14 2 9.27 8.91 8.26 12 2\"\/><\/svg>\n <\/div>\n <p class=\"testimonial-text\">\n \u00ab\u00a0La cr\u00e8me CICA m\\’a sauv\u00e9e apr\u00e8s un peeling. Apaisement immediat, zero irritation. Le meilleur rapport qualit\u00e9-prix du march\u00e9 DZ.\u00a0\u00bb\n <\/p>\n <div class=\"testimonial-author\">\n <div class=\"testimonial-avatar\">L<\/div>\n <div>\n <div class=\"testimonial-name\">Lina M.<\/div>\n <span class=\"testimonial-badge testimonial-badge--combination\">Peau mixte<\/span>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"instagram-section\">\n <div class=\"instagram-header\">\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-handle reveal\">@treatmentlaboratoire<\/a>\n <div class=\"instagram-cta reveal\">Rejoignez notre communaute sur Instagram, TikTok & Facebook<\/div>\n <\/div>\n\n <div class=\"instagram-grid\">\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-face-scaled.png\" alt=\"Instagram 1\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-closeup-scaled.png\" alt=\"Instagram 2\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/texture.png\" alt=\"Instagram 3\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/lifestyle-3-scaled.png\" alt=\"Instagram 4\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-casual-scaled.png\" alt=\"Instagram 5\">\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"instagram-photo reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-dark-scaled.png\" alt=\"Instagram 6\">\n <\/a>\n <\/div>\n\n <div class=\"social-strip reveal\">\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><rect x=\"3\" y=\"3\" width=\"18\" height=\"18\" rx=\"5\"\/><circle cx=\"12\" cy=\"12\" r=\"4\"\/><circle cx=\"17.5\" cy=\"6.5\" r=\".5\" fill=\"currentColor\"\/><\/svg>\n <span>Instagram<\/span>\n <\/a>\n <a href=\"https:\/\/www.tiktok.com\/@treatmentlabo\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M9 3v10.5a3 3 0 1 1-3-3\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M9 3c0 3 2.5 5.5 6 5.5\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <span>TikTok<\/span>\n <\/a>\n <a href=\"https:\/\/www.facebook.com\/share\/16bM57euHk\/\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M14 9h3V6h-3a3 3 0 0 0-3 3v2H8v3h3v7h3v-7h3l1-3h-4V9z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <span>Facebook<\/span>\n <\/a>\n <a href=\"https:\/\/wa.me\/213540050932\" target=\"_blank\" rel=\"noopener\" class=\"social-strip-link\">\n <svg viewBox=\"0 0 24 24\" aria-hidden=\"true\"><path d=\"M3 21l1.6-4.3A8.5 8.5 0 1 1 8.5 21 8.5 8.5 0 0 1 3 21z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><path d=\"M9 10c0 3 2 5 5 5l1.5-1.5-2-1L12 13l-2-2 .5-1.5-1-2z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/><\/svg>\n <span>WhatsApp<\/span>\n <\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"gallery-section\">\n <div class=\"gallery-frame reveal-scale\">\n <img decoding=\"async\" src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/model-curly-scaled.png\" alt=\"Treatment Laboratoire model\">\n <\/div>\n <p class=\"gallery-quote reveal\">\n « La beaute n’a pas besoin d’etre compliquee.\n Elle a besoin d’etre honnete. »\n <\/p>\n <div class=\"gallery-credit reveal\">TREATMENT LABORATOIRE<\/div>\n <\/section>\n\n \n <section class=\"histoire-section\" id=\"histoire\">\n <div class=\"histoire-inner\">\n <div class=\"histoire-label reveal\">NOTRE HISTOIRE<\/div>\n <h2 class=\"histoire-title reveal\">Un laboratoire alg\u00e9rien, des formules sans d\u00e9tour.<\/h2>\n <div class=\"histoire-grid\">\n <div class=\"histoire-text reveal\">\n <p>\n Treatment Laboratoire est n\u00e9 d’une conviction simple : la peau\n alg\u00e9rienne m\u00e9rite des soins formul\u00e9s pour elle, avec des actifs\n dont la concentration est annonc\u00e9e et respect\u00e9e.\n <\/p>\n <p>\n Nous d\u00e9veloppons nos formules aux c\u00f4t\u00e9s de dermatologues,\n en gardant un cap clair : efficacit\u00e9, tol\u00e9rance, int\u00e9grit\u00e9.\n Chaque produit est test\u00e9 dermatologiquement avant sa sortie.\n <\/p>\n <p>\n <strong>Simple but effective.<\/strong>\n C’est plus qu’un slogan : c’est notre m\u00e9thode.\n <\/p>\n <\/div>\n <div class=\"histoire-timeline reveal-up\">\n <div class=\"histoire-milestone\">\n <div class=\"histoire-milestone-year\">Origine<\/div>\n <div class=\"histoire-milestone-text\">Un laboratoire ind\u00e9pendant, pens\u00e9 pour votre peau.<\/div>\n <\/div>\n <div class=\"histoire-milestone\">\n <div class=\"histoire-milestone-year\">M\u00e9thode<\/div>\n <div class=\"histoire-milestone-text\">Formulation propre, actifs cliniquement \u00e9prouv\u00e9s, z\u00e9ro marketing dilu\u00e9.<\/div>\n <\/div>\n <div class=\"histoire-milestone\">\n <div class=\"histoire-milestone-year\">Engagement<\/div>\n <div class=\"histoire-milestone-text\">Test\u00e9 dermatologiquement. Fabriqu\u00e9 en Alg\u00e9rie. Accessible partout.<\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n <section class=\"blog-section\" id=\"blog\">\n <div class=\"blog-header\">\n <div class=\"blog-label reveal\">JOURNAL<\/div>\n <h2 class=\"blog-title reveal\">Conseils skincare & science des actifs<\/h2>\n <a href=\"#\" class=\"blog-view-all reveal\">Tous les articles →<\/a>\n <\/div>\n\n <div class=\"blog-grid\">\n <a href=\"\/niacinamide-pourquoi-5-pourcent-suffit\/\" class=\"blog-card-link\" style=\"text-decoration:none;color:inherit;display:block;\"><article class=\"blog-card reveal-up\">\n <div class=\"blog-card-img\" style=\"--tone:#F8BFD3;\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/01-niacinamide.jpg\" alt=\"S\u00e9rum \u00c9quilibrant \u2014 Niacinamide 5% + Zinc PCA\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"blog-card-body\">\n <div class=\"blog-card-meta\">SCIENCE DES ACTIFS \u00b7 4 min<\/div>\n <h3 class=\"blog-card-title\">Niacinamide : pourquoi 5 % suffit.<\/h3>\n <p class=\"blog-card-excerpt\">La bonne dose, pas la dose marketing. Ce qu’il faut savoir avant d’acheter un s\u00e9rum.<\/p>\n <span class=\"blog-card-cta\">Lire l’article →<\/span>\n <\/div>\n <\/article><\/a>\n\n <a href=\"\/peau-seche-routine-barriere\/\" class=\"blog-card-link\" style=\"text-decoration:none;color:inherit;display:block;\"><article class=\"blog-card reveal-up\">\n <div class=\"blog-card-img\" style=\"--tone:#589DD2;\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/02-peau-seche.jpg\" alt=\"S\u00e9rum Hydratant + Cr\u00e8me Cica\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"blog-card-body\">\n <div class=\"blog-card-meta\">ROUTINE \u00b7 5 min<\/div>\n <h3 class=\"blog-card-title\">Peau s\u00e8che : la routine qui reconstruit la barri\u00e8re.<\/h3>\n <p class=\"blog-card-excerpt\">Acide hyaluronique, c\u00e9ramides, cica. Comment les encha\u00eener pour un vrai confort durable.<\/p>\n <span class=\"blog-card-cta\">Lire l’article →<\/span>\n <\/div>\n <\/article><\/a>\n\n <a href=\"\/taches-pigmentaires-vitamine-c-spf\/\" class=\"blog-card-link\" style=\"text-decoration:none;color:inherit;display:block;\"><article class=\"blog-card reveal-up\">\n <div class=\"blog-card-img\" style=\"--tone:#E2AD53;\">\n <img src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/05\/03-vitamine-c-spf.jpg\" alt=\"S\u00e9rum \u00c9claircissant Vitamine C + \u00c9cran Solaire SPF 50+\" loading=\"lazy\" decoding=\"async\">\n <\/div>\n <div class=\"blog-card-body\">\n <div class=\"blog-card-meta\">\u00c9CLAT \u00b7 3 min<\/div>\n <h3 class=\"blog-card-title\">Taches pigmentaires : le duo vitamine C + SPF.<\/h3>\n <p class=\"blog-card-excerpt\">Le geste non n\u00e9gociable pour estomper les taches et \u00e9viter qu’elles reviennent.<\/p>\n <span class=\"blog-card-cta\">Lire l’article →<\/span>\n <\/div>\n <\/article><\/a>\n <\/div>\n <\/section>\n\n \n <section class=\"contact-section\" id=\"contact\">\n <div class=\"contact-inner\">\n <div class=\"contact-intro\">\n <div class=\"contact-label reveal\">CONTACT<\/div>\n <h2 class=\"contact-title reveal\">Une question ? \u00c9crivez-nous.<\/h2>\n <p class=\"contact-desc reveal\">\n Notre \u00e9quipe vous r\u00e9pond sous 48h ouvr\u00e9es.\n Pour le service commercial, les collaborations presse ou les demandes de revendeurs.\n <\/p>\n\n <div class=\"contact-channels reveal\">\n <a href=\"mailto:contact@dermatech-lab.com\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">Email<\/span>\n <span class=\"contact-channel-value\">contact@dermatech-lab.com<\/span>\n <\/a>\n <a href=\"tel:+213540050932\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">T\u00e9l\u00e9phone<\/span>\n <span class=\"contact-channel-value\">0540 050 932<\/span>\n <\/a>\n <a href=\"https:\/\/wa.me\/213540050932\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">WhatsApp<\/span>\n <span class=\"contact-channel-value\">D\u00e9marrer une discussion<\/span>\n <\/a>\n <a href=\"https:\/\/www.instagram.com\/treatmentlaboratoire\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">Instagram<\/span>\n <span class=\"contact-channel-value\">@treatmentlaboratoire<\/span>\n <\/a>\n <a href=\"https:\/\/www.tiktok.com\/@treatmentlabo\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">TikTok<\/span>\n <span class=\"contact-channel-value\">@treatmentlabo<\/span>\n <\/a>\n <a href=\"https:\/\/www.facebook.com\/share\/16bM57euHk\/\" target=\"_blank\" rel=\"noopener\" class=\"contact-channel\">\n <span class=\"contact-channel-label\">Facebook<\/span>\n <span class=\"contact-channel-value\">Treatment Laboratoire<\/span>\n <\/a>\n <\/div>\n <\/div>\n\n <form class=\"contact-form reveal-up\" onsubmit=\"event.preventDefault();\">\n <div class=\"contact-field\">\n <label for=\"contact-name\">Nom complet<\/label>\n <input id=\"contact-name\" type=\"text\" required>\n <\/div>\n <div class=\"contact-field\">\n <label for=\"contact-email\">Email<\/label>\n <input id=\"contact-email\" type=\"email\" required>\n <\/div>\n <div class=\"contact-field\">\n <label for=\"contact-subject\">Sujet<\/label>\n <select id=\"contact-subject\">\n <option>Question produit<\/option>\n <option>Suivi de commande<\/option>\n <option>Devenir revendeur<\/option>\n <option>Presse & collaborations<\/option>\n <option>Autre<\/option>\n <\/select>\n <\/div>\n <div class=\"contact-field\">\n <label for=\"contact-message\">Message<\/label>\n <textarea id=\"contact-message\" rows=\"5\" required><\/textarea>\n <\/div>\n <button type=\"submit\" class=\"contact-submit\">ENVOYER LE MESSAGE<\/button>\n <p class=\"contact-note\">Vos donn\u00e9es restent confidentielles. Aucune cession \u00e0 des tiers.<\/p>\n <\/form>\n <\/div>\n <\/section>\n\n \n <section class=\"newsletter-section\">\n <h2 class=\"newsletter-title reveal\">Rejoignez la communaute Treatment<\/h2>\n <p class=\"newsletter-desc reveal\">Conseils skincare, offres exclusives et nouveautes en avant-premiere<\/p>\n <form class=\"newsletter-form reveal\">\n <input type=\"email\" class=\"newsletter-input\" placeholder=\"Votre adresse email\" required>\n <button type=\"submit\" class=\"newsletter-btn\">S’INSCRIRE<\/button>\n <\/form>\n <p class=\"newsletter-privacy reveal\">En vous inscrivant, vous acceptez notre politique de confidentialite. Desabonnement possible a tout moment.<\/p>\n <\/section>\n\n \n <section class=\"trust-strip\" aria-label=\"Engagements Treatment Laboratoire\">\n <div class=\"trust-strip-inner\">\n <div class=\"trust-pillar reveal-up\">\n <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 2v8M5 7l7 4 7-4M5 7v10l7 4 7-4V7\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <\/svg>\n <div class=\"trust-label\">FORMUL\u00c9 & FABRIQU\u00c9<\/div>\n <div class=\"trust-text\">\u00c0 Alger, dans nos laboratoires.<\/div>\n <\/div>\n <div class=\"trust-pillar reveal-up\">\n <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M9 2h6M10 2v4M14 2v4M8 6h8l-1 14H9L8 6z\" stroke-linecap=\"round\" stroke-linejoin=\"round\"\/>\n <path d=\"M11 11v5M13 11v5\" stroke-linecap=\"round\"\/>\n <\/svg>\n <div class=\"trust-label\">TEST\u00c9 EN DERMATOLOGIE<\/div>\n <div class=\"trust-text\">Tol\u00e9rance valid\u00e9e sur peaux sensibles.<\/div>\n <\/div>\n <div class=\"trust-pillar reveal-up\">\n <svg class=\"trust-icon\" viewBox=\"0 0 24 24\" aria-hidden=\"true\">\n <path d=\"M12 2v20M2 12h20\" stroke-linecap=\"round\"\/>\n <circle cx=\"12\" cy=\"12\" r=\"10\"\/>\n <\/svg>\n <div class=\"trust-label\">RECOMMAND\u00c9 EN PHARMACIE<\/div>\n <div class=\"trust-text\">Disponible chez nos pharmacies partenaires.<\/div>\n <\/div>\n <\/div>\n <\/section>\n\n \n \n\n <script>\n \/\/ \u2500\u2500 Lenis Smooth Scroll \u2500\u2500\n const lenis = new Lenis({\n duration: 1.2,\n easing: (t) => Math.min(1, 1.001 - Math.pow(2, -10 * t)),\n smoothWheel: true,\n });\n\n function raf(time) {\n lenis.raf(time);\n requestAnimationFrame(raf);\n }\n requestAnimationFrame(raf);\n\n lenis.on('scroll', ScrollTrigger.update);\n gsap.ticker.add((time) => lenis.raf(time * 1000));\n gsap.ticker.lagSmoothing(0);\n\n \/\/ \u2500\u2500 GSAP Animations \u2500\u2500\n gsap.registerPlugin(ScrollTrigger);\n\n \/\/ Nav scroll: transparent -> solid bg\n const nav = document.querySelector('.tl-nav');\n ScrollTrigger.create({\n start: 'top -100',\n onUpdate: function(self) {\n if (self.scroll() > 100) {\n nav.classList.add('scrolled');\n } else {\n nav.classList.remove('scrolled');\n }\n },\n });\n\n \/\/ Hero brand entrance\n gsap.from('.hero-brand-name', {\n opacity: 0,\n scale: 1.1,\n duration: 1.6,\n ease: 'power3.out',\n delay: 0.3,\n });\n\n gsap.from('.hero-brand-sub', {\n opacity: 0,\n y: 20,\n duration: 1,\n ease: 'power2.out',\n delay: 0.8,\n });\n\n \/\/ Hero product card\n gsap.from('.hero-product-card', {\n opacity: 0,\n y: 60,\n duration: 1,\n ease: 'power2.out',\n delay: 1.2,\n });\n\n \/\/ Scroll reveals \u2014 use gsap.to() since CSS starts at opacity:0\n const revealTypes = [\n { selector: '.reveal', to: { opacity: 1, y: 0 } },\n { selector: '.reveal-up', to: { opacity: 1, y: 0 } },\n { selector: '.reveal-left', to: { opacity: 1, x: 0 } },\n { selector: '.reveal-right', to: { opacity: 1, x: 0 } },\n { selector: '.reveal-scale', to: { opacity: 1, scale: 1 } },\n ];\n\n revealTypes.forEach(({ selector, to }) => {\n gsap.utils.toArray(selector).forEach((el) => {\n if (el.closest('.hero')) return;\n\n gsap.to(el, {\n ...to,\n duration: 1,\n ease: 'power2.out',\n scrollTrigger: {\n trigger: el,\n start: 'top 88%',\n toggleActions: 'play none none none',\n },\n });\n });\n });\n\n \/\/ Stagger product cards\n gsap.utils.toArray('.product-card').forEach((card, i) => {\n gsap.to(card, {\n opacity: 1, y: 0, x: 0,\n duration: 0.8,\n delay: i * 0.08,\n ease: 'power2.out',\n scrollTrigger: { trigger: card, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger value cards\n gsap.utils.toArray('.value-card').forEach((card, i) => {\n gsap.to(card, {\n opacity: 1, y: 0,\n duration: 0.7,\n delay: i * 0.1,\n ease: 'power2.out',\n scrollTrigger: { trigger: card, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger ingredient cards\n gsap.utils.toArray('.ingredient-card').forEach((item, i) => {\n gsap.to(item, {\n opacity: 1, x: 0,\n duration: 0.7,\n delay: i * 0.12,\n ease: 'power2.out',\n scrollTrigger: { trigger: item, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger routine steps\n gsap.utils.toArray('.routine-step').forEach((step, i) => {\n gsap.to(step, {\n opacity: 1, y: 0,\n duration: 0.8,\n delay: i * 0.15,\n ease: 'power2.out',\n scrollTrigger: { trigger: step, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger testimonial cards\n gsap.utils.toArray('.testimonial-card').forEach((card, i) => {\n gsap.to(card, {\n opacity: 1, y: 0,\n duration: 0.8,\n delay: i * 0.12,\n ease: 'power2.out',\n scrollTrigger: { trigger: card, start: 'top 90%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Stagger instagram photos\n gsap.utils.toArray('.instagram-photo').forEach((photo, i) => {\n gsap.to(photo, {\n opacity: 1, scale: 1,\n duration: 0.6,\n delay: i * 0.08,\n ease: 'power2.out',\n scrollTrigger: { trigger: photo, start: 'top 92%', toggleActions: 'play none none none' },\n });\n });\n\n \/\/ Parallax on hero image\n gsap.to('.hero-image', {\n yPercent: 15,\n ease: 'none',\n scrollTrigger: {\n trigger: '.hero',\n start: 'top top',\n end: 'bottom top',\n scrub: true,\n },\n });\n\n \/\/ Split image parallax\n gsap.from('.split-image img', {\n scale: 1.15,\n ease: 'none',\n scrollTrigger: {\n trigger: '.split-section',\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n },\n });\n\n \/\/ Gallery frame parallax\n gsap.from('.gallery-frame img', {\n scale: 1.1,\n ease: 'none',\n scrollTrigger: {\n trigger: '.gallery-section',\n start: 'top bottom',\n end: 'bottom top',\n scrub: true,\n },\n });\n\n \/\/ \u2500\u2500 Counter Animation \u2500\u2500\n function animateCounter(el) {\n const target = parseInt(el.getAttribute('data-target'), 10);\n const duration = 2000;\n const start = performance.now();\n\n function step(now) {\n const elapsed = now - start;\n const progress = Math.min(elapsed \/ duration, 1);\n const eased = 1 - Math.pow(1 - progress, 3);\n el.textContent = Math.round(target * eased);\n if (progress < 1) requestAnimationFrame(step);\n }\n\n requestAnimationFrame(step);\n }\n\n document.querySelectorAll('.counter-animated').forEach((el) => {\n ScrollTrigger.create({\n trigger: el,\n start: 'top 85%',\n once: true,\n onEnter: () => animateCounter(el),\n });\n });\n\n \/\/ \u2500\u2500 Hero Product Thumb Switching \u2500\u2500\n const thumbs = document.querySelectorAll('.hero-product-thumb');\n const heroMainImg = document.querySelector('.hero-product-main');\n const heroName = document.querySelector('.hero-product-card-name');\n const heroFormula = document.querySelector('.hero-product-card-formula');\n const heroPrice = document.querySelector('.hero-product-card-price');\n\n const heroProducts = [\n { img: 'https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/equilibrant.png', name: 'Serum Equilibrant', formula: 'Niacinamide 5% + Zinc PCA', price: '2,500 DA' },\n { img: 'https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/vit-c.png', name: 'Serum Vitamine C', formula: 'Vitamine C 15% + Acide Ferulique', price: '2 500 DA' },\n { img: 'https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/hydratant.png', name: 'Serum Hydratant', formula: 'Acide Hyaluronique + Tr\u00e9halose', price: '2,500 DA' },\n ];\n\n thumbs.forEach((thumb, i) => {\n thumb.addEventListener('click', () => {\n thumbs.forEach((t) => t.classList.remove('active'));\n thumb.classList.add('active');\n\n gsap.to(heroMainImg, {\n opacity: 0,\n y: -10,\n duration: 0.2,\n onComplete: () => {\n heroMainImg.src = heroProducts[i].img;\n heroName.textContent = heroProducts[i].name;\n heroFormula.textContent = heroProducts[i].formula;\n heroPrice.textContent = heroProducts[i].price;\n gsap.fromTo(heroMainImg, { opacity: 0, y: 10 }, { opacity: 1, y: 0, duration: 0.3 });\n },\n });\n });\n });\n <\/script>\n\n <script>\n \/* Routine card hover-reveal: photo \u2192 video on hover\/tap (Typology pattern, 2026-04-22)\n Optimizations: prefers-reduced-motion guard, IntersectionObserver pause, passive touch,\n active-card tracking (only one video plays at a time), defensive play() promise handling. *\/\n (function () {\n const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const cards = document.querySelectorAll('.routine-category');\n if (!cards.length) return;\n\n const isTouch = window.matchMedia('(hover: none)').matches;\n let active = null;\n\n const stopAll = (except) => {\n document.querySelectorAll('.routine-category-photo.is-playing').forEach(box => {\n if (box === except) return;\n const v = box.querySelector('video');\n if (v) v.pause();\n box.classList.remove('is-playing');\n });\n };\n\n const start = (box, video) => {\n if (reduced) return;\n stopAll(box);\n active = box;\n box.classList.add('is-playing');\n try { video.currentTime = 0; } catch (_) {}\n const p = video.play();\n if (p && p.catch) p.catch(() => { \/* autoplay refused, harmless *\/ });\n };\n\n const stop = (box, video) => {\n video.pause();\n box.classList.remove('is-playing');\n if (active === box) active = null;\n };\n\n cards.forEach(card => {\n const photoBox = card.querySelector('.routine-category-photo');\n const video = photoBox && photoBox.querySelector('video');\n if (!video || !video.getAttribute('src')) return;\n\n if (isTouch) {\n card.addEventListener('click', e => {\n if (!photoBox.classList.contains('is-playing')) {\n e.preventDefault();\n start(photoBox, video);\n }\n }, { passive: false });\n } else {\n card.addEventListener('mouseenter', () => start(photoBox, video));\n card.addEventListener('mouseleave', () => stop(photoBox, video));\n card.addEventListener('focusin', () => start(photoBox, video));\n card.addEventListener('focusout', () => stop(photoBox, video));\n }\n });\n\n \/* Pause any playing video when its card scrolls out of view (saves CPU + battery). *\/\n if ('IntersectionObserver' in window) {\n const io = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) return;\n const box = entry.target.querySelector('.routine-category-photo');\n const v = box && box.querySelector('video');\n if (v && box.classList.contains('is-playing')) stop(box, v);\n });\n }, { threshold: 0 });\n cards.forEach(card => io.observe(card));\n }\n\n \/* Pause when tab loses focus (prevents background decode). *\/\n document.addEventListener('visibilitychange', () => {\n if (document.hidden && active) {\n const v = active.querySelector('video');\n if (v) stop(active, v);\n }\n });\n })();\n\n \/* Product card hover-reveal (Typology pattern, 2026-04-27).\n Same algorithm as routine cards above, applied to .product-card \/ .product-card-media.\n Skips cards whose <video> has no src yet (videos still being processed in \/assets\/videos\/products\/). *\/\n (function () {\n const reduced = window.matchMedia('(prefers-reduced-motion: reduce)').matches;\n const cards = document.querySelectorAll('.product-card');\n if (!cards.length) return;\n\n const isTouch = window.matchMedia('(hover: none)').matches;\n let active = null;\n\n const stopAll = (except) => {\n document.querySelectorAll('.product-card-media.is-playing').forEach(box => {\n if (box === except) return;\n const v = box.querySelector('video');\n if (v) v.pause();\n box.classList.remove('is-playing');\n });\n };\n\n const start = (box, video) => {\n if (reduced) return;\n stopAll(box);\n active = box;\n box.classList.add('is-playing');\n try { video.currentTime = 0; } catch (_) {}\n const p = video.play();\n if (p && p.catch) p.catch(() => {});\n };\n\n const stop = (box, video) => {\n video.pause();\n box.classList.remove('is-playing');\n if (active === box) active = null;\n };\n\n cards.forEach(card => {\n const mediaBox = card.querySelector('.product-card-media');\n const video = mediaBox && mediaBox.querySelector('video');\n if (!video || !video.getAttribute('src')) return;\n\n \/\/ Probe: if the source 404s, treat as no-video and skip wiring.\n video.addEventListener('error', () => video.removeAttribute('src'), { once: true });\n\n if (isTouch) {\n card.addEventListener('click', e => {\n const target = e.target;\n \/\/ don't intercept add-to-cart button taps\n if (target.closest('.product-card-quick-add')) return;\n if (!mediaBox.classList.contains('is-playing')) {\n e.preventDefault();\n start(mediaBox, video);\n }\n }, { passive: false });\n } else {\n card.addEventListener('mouseenter', () => start(mediaBox, video));\n card.addEventListener('mouseleave', () => stop(mediaBox, video));\n card.addEventListener('focusin', () => start(mediaBox, video));\n card.addEventListener('focusout', () => stop(mediaBox, video));\n }\n });\n\n if ('IntersectionObserver' in window) {\n const io = new IntersectionObserver(entries => {\n entries.forEach(entry => {\n if (entry.isIntersecting) return;\n const box = entry.target.querySelector('.product-card-media');\n const v = box && box.querySelector('video');\n if (v && box.classList.contains('is-playing')) stop(box, v);\n });\n }, { threshold: 0 });\n cards.forEach(card => io.observe(card));\n }\n\n document.addEventListener('visibilitychange', () => {\n if (document.hidden && active) {\n const v = active.querySelector('video');\n if (v) stop(active, v);\n }\n });\n })();\n\n \/* Mobile diagnostic FAB: hide when the big in-page diagnostic section is on-screen\n (avoids two CTAs visible simultaneously). Also hide near footer to clear contact form. *\/\n (function () {\n const fab = document.querySelector('.diagnostic-fab');\n if (!fab || !('IntersectionObserver' in window)) return;\n const targets = document.querySelectorAll('.diagnostic-section, .footer, #contact');\n if (!targets.length) return;\n const visible = new Set();\n const io = new IntersectionObserver(entries => {\n entries.forEach(e => {\n if (e.isIntersecting) visible.add(e.target); else visible.delete(e.target);\n });\n fab.style.opacity = visible.size ? '0' : '1';\n fab.style.pointerEvents = visible.size ? 'none' : 'auto';\n fab.style.transform = visible.size\n ? 'translate(-50%, 32px)'\n : 'translate(-50%, 0)';\n }, { threshold: 0.15 });\n targets.forEach(t => io.observe(t));\n fab.style.transition = 'opacity .25s ease, transform .25s ease';\n })();\n <\/script>\n\n<script>\n \/\/ Round 10.8 (2026-06-09) \u2014 Homepage product cards have no <a> wrapper;\n \/\/ image + name + price aren't clickable. Add a delegated click handler\n \/\/ navigating to \/produit\/<slug>\/ \u2014 EXCEPT for the AJOUTER button.\n (function () {\n var PRODUCT_SLUG = {\n 'gel-moussant': 'gel-moussant-anti-imperfections',\n 'serum-equilibrant': 'serum-equilibrant',\n 'emulsion': 'emulsion-anti-imperfection',\n 'creme-cica': 'cica-creme',\n 'serum-hydratant': 'serum-hydratant',\n 'creme-eclaircissante': 'creme-eclaircissante',\n 'serum-eclaircissant': 'serum-eclaircissant',\n 'ecran-solaire': 'ecran-solaire-spf-50'\n };\n document.querySelectorAll('.product-card[data-product]').forEach(function (card) {\n card.style.cursor = 'pointer';\n card.addEventListener('click', function (e) {\n if (e.target.closest('.product-card-quick-add, .product-card-bottom button')) return;\n var key = card.getAttribute('data-product');\n var slug = PRODUCT_SLUG[key] || key;\n if (!slug) return;\n var base = document.body.classList.contains('translatepress-ar') ? '\/ar\/' : '\/';\n window.location.href = base + 'produit\/' + slug + '\/';\n });\n card.setAttribute('tabindex', '0');\n card.setAttribute('role', 'link');\n card.addEventListener('keydown', function (e) {\n if (e.key === 'Enter' || e.key === ' ') {\n e.preventDefault();\n card.click();\n }\n });\n });\n })();\n<\/script>\n<script src=\"https:\/\/treatment-lab.com\/wp-content\/uploads\/2026\/06\/quiz-4.js\"><\/script>\n<\/body>\n<\/html>\n\n","protected":false},"excerpt":{"rendered":"<p>Treatment Laboratoire \u2014 Dermo-cosm\u00e9tique Alg\u00e9rienne DIAGNOSTIC BEST-SELLER S\u00e9rum \u00c9quilibrant Niacinamide 5% + Zinc PCA 2,500 DA AJOUTER AU PANIER D\u00c9FILER<\/p>","protected":false},"author":1,"featured_media":0,"parent":0,"menu_order":0,"comment_status":"closed","ping_status":"closed","template":"elementor_canvas","meta":{"_monsterinsights_skip_tracking":false,"_monsterinsights_sitenote_active":false,"_monsterinsights_sitenote_note":"","_monsterinsights_sitenote_category":0,"footnotes":""},"class_list":["post-29095","page","type-page","status-publish","hentry"],"_links":{"self":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/pages\/29095","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/comments?post=29095"}],"version-history":[{"count":0,"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/pages\/29095\/revisions"}],"wp:attachment":[{"href":"https:\/\/treatment-lab.com\/ar\/wp-json\/wp\/v2\/media?parent=29095"}],"curies":[{"name":"\u062f\u0628\u0644\u064a\u0648 \u0628\u064a","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}