/* SATIEN v2 — Components */ const { useState, useEffect, useRef } = React; /* ─── Reveal hooks ─── */ function useReveal() { useEffect(() => { const els = document.querySelectorAll('[data-reveal], [data-reveal-words]'); const io = new IntersectionObserver((entries) => { entries.forEach((e) => {if (e.isIntersecting) {e.target.classList.add('in');io.unobserve(e.target);}}); }, { threshold: 0.12, rootMargin: '0px 0px -8% 0px' }); els.forEach((el) => io.observe(el)); return () => io.disconnect(); }, []); } /* ─── Cap SVG (placeholder cap rendered as SVG) ─── */ function CapSVG({ tone = 'cream' }) { const fill = tone === 'dark' ? '#1B1812' : '#2A2520'; const brim = tone === 'dark' ? '#0F0D09' : '#1B1812'; return ( {/* shadow */} {/* crown */} {/* crown highlight */} {/* liner peek */} {/* brim */} {/* button */} ); } /* ─── Nav ─── */ function Nav() { const [scrolled, setScrolled] = useState(false); const { cartUrl, cartCount, openCart } = useShopifyProduct(); useEffect(() => { const onScroll = () => setScrolled(window.scrollY > 24); window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); // Swaps the CTA once the product section itself is on screen — no point // telling someone already there to go "order", and by then they're the // ones who'd actually want the cart. const [inProductSection, setInProductSection] = useState(false); useEffect(() => { const el = document.getElementById('produit'); if (!el) return; const io = new IntersectionObserver(([entry]) => setInProductSection(entry.isIntersecting), { threshold: 0.15 }); io.observe(el); return () => io.disconnect(); }, []); const showCart = inProductSection && cartCount > 0; return ( ); } /* ─── Cart drawer (desktop) ─── */ function CloseIcon() { return ( ); } const CART_PERKS_GOAL_AMOUNT = 50; // Real value of the free-shipping + wash-bag perks — shared with the // product page's "2 Soyeux" pack picker so both stay in sync. const CART_SHIPPING_VALUE = 3.99; const CART_WASHBAG_VALUE = 10.99; function CartDrawer() { const { cartOpen, closeCart, cartLines, cartSubtotal, cartUrl, updateCartLine, removeCartLine, cartLoading, cartError, formatPrice, washBagVariantId, } = useShopifyProduct(); // The wash bag always sorts after the real products, regardless of // where the cart API happens to place it (observed first, not last). const sortedCartLines = washBagVariantId ? [...cartLines].sort((a, b) => (a.variantId === washBagVariantId ? 1 : 0) - (b.variantId === washBagVariantId ? 1 : 0)) : cartLines; // Free shipping + wash bag kick in at 50€ spent, however that's reached — // the "2 Soyeux" pack, separate adds, or any mix of quantities. const subtotalAmount = cartSubtotal ? parseFloat(cartSubtotal.amount) : 0; const subtotalCurrency = cartSubtotal ? cartSubtotal.currencyCode : 'EUR'; const perksUnlocked = subtotalAmount >= CART_PERKS_GOAL_AMOUNT; const perksRemainingAmount = Math.max(0, CART_PERKS_GOAL_AMOUNT - subtotalAmount); const perksRemainingLabel = formatPrice(perksRemainingAmount, subtotalCurrency); const perksProgressPct = Math.min(100, (subtotalAmount / CART_PERKS_GOAL_AMOUNT) * 100); const shippingValueLabel = formatPrice(CART_SHIPPING_VALUE, subtotalCurrency); const washBagValueLabel = formatPrice(CART_WASHBAG_VALUE, subtotalCurrency); useEffect(() => { if (!cartOpen) return; const onKey = (e) => { if (e.key === 'Escape') closeCart(); }; document.addEventListener('keydown', onKey); const prevOverflow = document.body.style.overflow; document.body.style.overflow = 'hidden'; return () => { document.removeEventListener('keydown', onKey); document.body.style.overflow = prevOverflow; }; }, [cartOpen]); const changeQty = (line, next) => { if (next < 1) removeCartLine(line.lineId); else updateCartLine(line.lineId, next); }; return ( <>
); } /* ─── Hero ─── */ function Hero() { const { product, selectedVariant, loading, formatPrice } = useShopifyProduct(); const priceNode = (selectedVariant && selectedVariant.price) || (product && product.priceRange && product.priceRange.minVariantPrice); const priceLabel = loading ? '···' : priceNode ? formatPrice(priceNode.amount, priceNode.currencyCode) : '29,99€'; return (
pour tes cheveux, pas contre eux

La soie directement dans toutes tes casquettes.

DÉCOUVRIR LE SOYEUX · {priceLabel}
Voir la démo Livraison offerte dès 50€ S'adapte à la plupart des casquettes Garantie 14 jours
); } /* ─── Marquee ─── */ function Marquee() { const items = [ 'Nike', 'Adidas', 'New Era', 'Vans', 'Carhartt', 'Von Dutch', 'Ralph Lauren', '47 Brand', 'Snapback', 'Dad hat', 'Trucker']; const seg = {items.map((it, i) => {it} )} ; return (
{seg}{seg}{seg}{seg}{seg}{seg}
); } /* ─── Phrase choc ─── */ function Choc() { return (
le constat

Tes casquettes abîment tes cheveux.

Coton brut, polyester râpeux, mailles serrées — la doublure intérieure d'une casquette est tout sauf douce pour la fibre capillaire. On l'a remplacée par de la soie mulberry naturelle.

); } /* ─── Produit (présentation) ─── */ // Two photos per silk color: the product shot, then a lifestyle/benefits // visual. The color switch (product-visual-alt) always jumps to the other // color's first photo; the dots below step through a color's own photos. // The benefits visual has its own mobile variant (bigger type, fewer items — // the desktop one is unreadable once shrunk to phone width). const PRODUCT_MAIN_BY_COLOR = { noir: 'produit-1', blanc: 'produit-2' }; function colorSwatchHex(colorName) { const c = (colorName || '').toLowerCase(); if (c.includes('noir') || c.includes('black')) return '#161310'; if (c.includes('blanc') || c.includes('white')) return '#F8F2E4'; return '#C9A24A'; } function productImages(colorName) { const c = (colorName || '').toLowerCase(); const main = (c.includes('noir') || c.includes('black')) ? PRODUCT_MAIN_BY_COLOR.noir : (c.includes('blanc') || c.includes('white')) ? PRODUCT_MAIN_BY_COLOR.blanc : PRODUCT_MAIN_BY_COLOR.noir; return [main, main + '-2']; } // Descriptive alt text for a product image id (e.g. "produit-1", // "produit-2-2") — for screen readers and image search, since // otherwise ships alt="" on every photo. function productImageAlt(id) { // Exact match on the base id is the product shot; anything else is that // color's "-2" suffixed companion slide (the shared "why silk" graphic). // Checking endsWith('-2') instead would misfire on "produit-2" itself. const isMainPhoto = id === PRODUCT_MAIN_BY_COLOR.noir || id === PRODUCT_MAIN_BY_COLOR.blanc; const color = id.startsWith(PRODUCT_MAIN_BY_COLOR.blanc) ? 'blanc' : 'noir'; return isMainPhoto ? `Le Soyeux, doublure amovible en soie mulberry, coloris ${color}` : 'Pourquoi la soie change tout — bienfaits du Soyeux pour tes cheveux'; } function CheckIcon() { return ( ); } function TruckIcon() { return ( ); } function GiftIcon() { return ( ); } function SecurePaymentIcon() { return ( ); } function MailIcon() { return ( ); } /* Real France outline (Wikimedia Commons, public domain, no departments) — traced path, not a redrawn approximation. */ function FranceMapIcon() { return ( ); } function FeatherIcon() { return ( ); } // Purchase-critical questions pulled from the main FAQ (defined in // components-2.jsx, available by the time Product() renders) and answered // again right next to the CTA, mirroring their FAQS[i] indices so edits // made in the main FAQ section stay in sync here. const MINI_FAQ_INDICES = [0, 1, 2, 4]; function Product() { const { product, loading, error, variants, selectedVariant, selectedVariantId, setSelectedVariantId, variantColor, addToCart, cartUrl, cartCount, cartLoading, cartError, openCart, formatPrice, } = useShopifyProduct(); const [justAdded, setJustAdded] = useState(false); const { isMobile } = useContent(); const currentColor = selectedVariant ? variantColor(selectedVariant) : null; const otherVariant = variants.find((v) => v.id !== selectedVariantId); const otherColor = otherVariant ? variantColor(otherVariant) : null; const baseImages = productImages(currentColor); // The other color's photo is always slide 2, ahead of the "why silk" // slide shared by both colors. On mobile there's no alt-color thumbnail // (removed — too cramped next to the carousel) so this slide is the only // way to peek at it; on desktop the thumbnail jumps straight to it too. const currentImages = otherColor ? [baseImages[0], productImages(otherColor)[0], baseImages[1]] : baseImages; const [slideIndex, setSlideIndex] = useState(0); const [controlsShown, setControlsShown] = useState(false); useEffect(() => { setSlideIndex(0); }, [currentColor]); const currentImageId = currentImages[slideIndex]; const allImageIds = [productImages('noir'), productImages('blanc')].flat(); const goToSlide = (i) => setSlideIndex(((i % currentImages.length) + currentImages.length) % currentImages.length); const nextSlide = () => goToSlide(slideIndex + 1); const prevSlide = () => goToSlide(slideIndex - 1); // The small floating thumbnail toggles between the two color photos // (slide 0 ↔ slide 1): it shows whichever color ISN'T on screen, so it // always offers a way back. It disappears on slide 2 ("why silk"), which // isn't color-specific. const altThumbColor = slideIndex === 0 ? otherColor : slideIndex === 1 ? currentColor : null; const altThumbTargetSlide = slideIndex === 0 ? 1 : 0; // Touch swipe between photos — a horizontal drag past the threshold steps // the slide; anything shorter (or more vertical, i.e. a page scroll) is // left alone so scrolling past the product image still works. const touchRef = useRef(null); const onTouchStart = (e) => { const t = e.touches[0]; touchRef.current = { x: t.clientX, y: t.clientY }; }; const onTouchEnd = (e) => { const start = touchRef.current; touchRef.current = null; if (!start) return; const t = e.changedTouches[0]; const dx = t.clientX - start.x, dy = t.clientY - start.y; if (Math.abs(dx) > 40 && Math.abs(dx) > Math.abs(dy) * 1.5) { if (dx < 0) nextSlide(); else prevSlide(); } }; const priceNode = (selectedVariant && selectedVariant.price) || (product && product.priceRange && product.priceRange.minVariantPrice); const priceLabel = loading ? '···' : priceNode ? formatPrice(priceNode.amount, priceNode.currencyCode) : '29,99€'; const outOfStock = !!selectedVariant && !selectedVariant.availableForSale; const lowStock = !!selectedVariant && selectedVariant.availableForSale && typeof selectedVariant.quantityAvailable === 'number' && selectedVariant.quantityAvailable > 0 && selectedVariant.quantityAvailable <= 5; const stockClass = outOfStock ? 'is-out' : lowStock ? 'is-low' : ''; const [qty, setQty] = useState(1); useEffect(() => { setQty(1); }, [selectedVariantId]); const maxQty = (selectedVariant && typeof selectedVariant.quantityAvailable === 'number' && selectedVariant.quantityAvailable > 0) ? selectedVariant.quantityAvailable : 99; const unitAmount = priceNode ? parseFloat(priceNode.amount) : null; const hasUnitAmount = !loading && unitAmount != null && !Number.isNaN(unitAmount); const ctaPriceLabel = hasUnitAmount ? formatPrice(unitAmount * qty, priceNode.currencyCode) : priceLabel; const pack2PriceLabel = hasUnitAmount ? formatPrice(unitAmount * 2, priceNode.currencyCode) : priceLabel; // The 2-pack lets each unit be a different color — defaults to one of // each so the picker starts on a useful mix rather than two of the same. const [packColor1, setPackColor1] = useState(null); const [packColor2, setPackColor2] = useState(null); useEffect(() => { if (variants.length >= 2 && !packColor1 && !packColor2) { setPackColor1(variantColor(variants[0])); setPackColor2(variantColor(variants[1])); } }, [variants]); const packVariant1 = variants.find((v) => variantColor(v) === packColor1) || selectedVariant; const packVariant2 = variants.find((v) => variantColor(v) === packColor2) || selectedVariant; const packLines = (packVariant1 && packVariant2) ? ( packVariant1.id === packVariant2.id ? [{ variantId: packVariant1.id, quantity: 2 }] : [{ variantId: packVariant1.id, quantity: 1 }, { variantId: packVariant2.id, quantity: 1 }] ) : null; // The wash bag itself is NOT added here — useShopifyProduct auto-adds it // to the cart (as its own real-priced line) whenever the subtotal crosses // the same 50€ threshold the cart drawer's perks banner uses, regardless // of how the cart got there. Adding it here too would just race that // effect for no benefit. // Real value of the 2-pack perks (free shipping + wash bag) — shown // struck through next to each OFFERT pill, not a fabricated product // discount. const shippingValue = CART_SHIPPING_VALUE; const washBagValue = CART_WASHBAG_VALUE; const packSavingsAmount = shippingValue + washBagValue; const packSavingsLabel = priceNode ? formatPrice(packSavingsAmount, priceNode.currencyCode) : `${packSavingsAmount}€`; const shippingValueLabel = priceNode ? formatPrice(shippingValue, priceNode.currencyCode) : `${shippingValue}€`; const washBagValueLabel = priceNode ? formatPrice(washBagValue, priceNode.currencyCode) : `${washBagValue}€`; const [openFaq, setOpenFaq] = useState(-1); // Sticky mobile buy bar: shown once the real CTA button has scrolled // above the viewport, so there's always a way to buy within thumb reach. const ctaRef = useRef(null); const [showStickyBar, setShowStickyBar] = useState(false); useEffect(() => { const el = ctaRef.current; if (!el) return; const io = new IntersectionObserver(([entry]) => { setShowStickyBar(!entry.isIntersecting && entry.boundingClientRect.top < 0); }, { threshold: 0 }); io.observe(el); return () => io.disconnect(); }, []); return (
— 01
{isMobile &&
Le Soyeux · objet

Un seul accessoire, pour toutes tes casquettes.

}
currentImages.length > 1 && setControlsShown((v) => !v)} onTouchStart={onTouchStart} onTouchEnd={onTouchEnd}> {allImageIds.map((id) =>
)} {currentImages.length > 1 && <>
{currentImages.map((id, i) => )}
} {otherVariant && altThumbColor && }
{!isMobile && <> Le Soyeux · objet

Un seul accessoire, pour toutes tes casquettes.

}

Un liner en pure soie mulberry 6A, certifiée Oeko-Tex. S'installe en quelques secondes sous la bande intérieure de n'importe quelle casquette.

  • Moins de transpiration sous la casquette
  • Coiffure protégée, même après plusieurs heures
  • Invisible une fois la casquette portée
  • Se retire et se lave à la main en un geste
Précommande

Sois parmi les 1000 premiers à porter Le Soyeux.

Premier lot fabriqué en quantité limitée — 700 noir, 300 blanc.

{priceLabel}
5/5 · 3 avis vérifiés {variants.length > 0 &&
Coloris
{variants.map((v) => { const color = variantColor(v); const active = v.id === selectedVariantId; const unavailable = !v.availableForSale; return ( ); })}
} {!loading && selectedVariant && {outOfStock ? Rupture de stock : lowStock ? <>Plus que {selectedVariant.quantityAvailable} en stock : En stock} } {error &&

Impossible de charger les données Shopify ({error}). Prix indicatif affiché.

} {cartError &&

{cartError}

} {!outOfStock &&
{maxQty >= 2 && variants.length >= 2 &&
2 Soyeux = livraison + filet offerts
{qty === 2 &&
{[ { label: 'Soyeux 1', value: packColor1, set: setPackColor1 }, { label: 'Soyeux 2', value: packColor2, set: setPackColor2 }, ].map((slot, i) => (
{slot.label}
{variants.map((v) => { const color = variantColor(v); return ( ); })}
))}
}
Livraison offerte {shippingValueLabel} Offert
Filet de lavage pour soie {washBagValueLabel} Offert
}
}
{cartCount > 0 && { e.preventDefault(); openCart(); }}> Voir le panier ({cartCount}) }

Expédition prévue fin novembre 2026. Email de confirmation dès l'envoi.

Remboursement possible à tout moment avant l'expédition, sans condition.

Marque française
100% soie de mûrier, 19 momme
Certifié Oeko-Tex Standard 100 Certifié Oeko-Tex
{MINI_FAQ_INDICES.map((i) => (

{FAQS[i].a}

))}
Paiement sécurisé Visa, Mastercard, PayPal
Livraison rapide Expédié sous 24h, en France
Service client support@boutiquesoyeux.fr
{showStickyBar &&
Le Soyeux {ctaPriceLabel}
}
); } /* ─── Bénéfices ─── */ const BENEFITS = [ { n: '01', title: 'Moins de frisottis', p: 'Surface de soie anti-friction. La fibre glisse au lieu de s\'accrocher.', icon: '1' }, { n: '02', title: 'Moins de casse', p: 'Protège la fibre capillaire des micro-frottements répétés.', icon: '2' }, { n: '03', title: 'Cheveux hydratés', p: 'La soie n\'absorbe pas l\'hydratation naturelle reste là où elle doit.', icon: '3' }, { n: '04', title: 'Coiffure préservée', p: 'La soie glisse, ne plaque pas. Tu retires la casquette, ta coiffure reste.', icon: '4' }]; function Benefits() { return (
— 02
— les bienfaits

Quatre choses que tes cheveux
vont remarquer.

La soie mulberry 6A a une particularité simple : elle ne tire pas, ne chauffe pas, n'absorbe pas. Tout l'inverse d'une doublure de casquette standard.

{BENEFITS.map((b, i) =>
{b.icon}

{b.title}

{b.p}

)}
); } /* ─── How it works ─── */ const STEPS = [ { n: '01', title: 'Prends ton Soyeux.', p: 'Souple, léger, déjà prêt. Une seule taille — elle s\'adapte à la plupart des casquettes.', tone: '' }, { n: '02', title: 'Insère-le dans ta casquette.', p: 'Le bord glisse sous la sudette, en un geste — et se retire tout aussi simplement.', tone: 'dark' }, { n: '03', title: 'Remets ta casquette.', p: 'Invisible de l\'extérieur, doux pour tes cheveux. Tu le retires, tu le laves, tu recommences.', tone: '' }]; function HowItWorks() { return (
— 03
— méthode

Quelques secondes. Vraiment.

Pas d'outils, pas de notice, pas de couture — zéro effort, zéro trace sur ta casquette.

{STEPS.map((s, i) =>
— {s.n}
{s.tone === 'dark' ?
:
}

{s.title}

{s.p}

)}
); } window.useReveal = useReveal; window.CapSVG = CapSVG; window.Nav = Nav; window.Hero = Hero; window.Marquee = Marquee; window.Choc = Choc; window.Product = Product; window.Benefits = Benefits; window.HowItWorks = HowItWorks;