); } return (

); } // ── Eyebrow chip ──────────────────────────────────────────── function Eyebrow({ children, variant = 'sage', size = 'md' }) { const themes = { sage: { bg: TC.sageSoft, fg: TC.sageDeep, dot: TC.sage }, light: { bg: 'rgba(255,255,255,0.12)', fg: TC.white, dot: TC.white }, outline:{ bg: 'transparent', fg: TC.sageDeep, dot: TC.sage, border: TC.sageHair }, gold: { bg: 'rgba(200,164,92,0.12)', fg: '#8a6a2a', dot: TC.gold }, }; const t = themes[variant]; const h = size === 'sm' ? 26 : 30; return (

{children}

); } // ── Responsive device hook (real breakpoint, no design-canvas) ── // < 768px → 'mobile', otherwise 'desktop'. Every component already // branches its layout on this string, so swapping the two static // design-review artboards for one live-resize hook makes the exact // same markup genuinely responsive. function useDevice() { const get = () => (typeof window !== 'undefined' && window.innerWidth < 768 ? 'mobile' : 'desktop'); const [device, setDevice] = React.useState(get); React.useEffect(() => { const onResize = () => setDevice(get()); window.addEventListener('resize', onResize); return () => window.removeEventListener('resize', onResize); }, []); return device; } // ── Buttons ───────────────────────────────────────────────── function BtnPrimary({ children, size = 'md', dark = false, fullWidth = false, icon = true, style, ...rest }) { const h = size === 'lg' ? 54 : size === 'sm' ? 42 : 48; const px = size === 'lg' ? 26 : size === 'sm' ? 18 : 22; const fs = size === 'lg' ? 15.5 : size === 'sm' ? 14 : 15; return ( ); } function BtnGhost({ children, size = 'md', dark = false, fullWidth = false, style, ...rest }) { const h = size === 'lg' ? 54 : size === 'sm' ? 42 : 48; const px = size === 'lg' ? 26 : size === 'sm' ? 18 : 22; const fs = size === 'lg' ? 15.5 : size === 'sm' ? 14 : 15; return ( ); } // ── Small thin-line icons (only geometric primitives) ─────── function IconDot({ size = 22, color = TC.sage, ring = TC.sageSoft }) { return (

); } function IconCheck({ size = 18, color = TC.sage }) { return ( ); } function StarRow({ color = TC.gold, size = 13 }) { return (

{[0,1,2,3,4].map((i) => ( ))}

); } // Tiny abstract icon for benefit/formation cards. Themes are sage-toned // geometric compositions — circles, leaves, abstract shapes. No real // illustration. function ThemeMark({ theme = 'leaf', size = 56, color = TC.sage, bg = TC.sageSoft }) { const shapes = { // online: monitor frame online: ( ), // holistic: three overlapping circles (trinity) holistic: ( ), // accompagnement: two circles linked (hands) accompagnement: ( ), // reconversion: arrow loop reconversion: ( ), // leaf leaf: ( ), // drop (sophrologie - breath) drop: ( ), // bowl (nutrition) bowl: ( ), // wave (frequences) wave: ( ), // book (modules) book: ( ), // iris (iridologie) — concentric circles / eye iris: ( ), }; return (

); } // ── WhatsApp floating button ──────────────────────────────── // Floating CTA — sits bottom-right of the viewport at all times, // including while scrolling (position: fixed). function WhatsAppFAB({ size = 56, absolute = false, bottom = 24, right = 24 }) { return (

Une question ? Écrivez-nous

); } // Real photo (the hero asset) with object-position to crop into different // framings. For sections where we want richer imagery without more assets, // this lets one source carry the page tastefully. function LifestyleImg({ pos = 'center', radius = 18, height = '100%', filter = 'none', children, style = {} }) { return (

{children}

); } // Styled placeholder tile — warm sage gradient, monospace caption. // Used for formation cards / supporting imagery where we don't yet have // a real photo. Looks intentional, not broken. function PhotoPlaceholder({ caption, tone = 'sage', radius = 18, height = '100%', tall = false }) { const tones = { sage: { bg: `linear-gradient(135deg, ${TC.sageMist} 0%, ${TC.sageSoft} 100%)`, fg: TC.sageDeep, ring: 'rgba(90,145,105,0.18)' }, warm: { bg: `linear-gradient(135deg, #f5ede0 0%, #ead9c2 100%)`, fg: '#8a6a2a', ring: 'rgba(200,164,92,0.22)' }, ink: { bg: `linear-gradient(135deg, #2a3530 0%, #1a221e 100%)`, fg: 'rgba(255,255,255,0.85)', ring: 'rgba(255,255,255,0.12)' }, cream: { bg: `linear-gradient(135deg, #fbf9f3 0%, #efeadd 100%)`, fg: TC.sageDeep, ring: 'rgba(0,0,0,0.06)' }, }; const t = tones[tone]; return (

{/* subtle diagonal grain */}

{caption}

); } // ── Desktop container ────────────────────────────────────── // Single source of truth for the site's desktop content width. max-width // caps the *whole* box (gutter included) and centers it, so every section // — header, hero, cards, CTAs, footer — resolves to the same visible left // and right edge on wide screens. Never binds below 1280px, so this is // safe to apply unconditionally without touching mobile layout. const TC_CONTAINER = 1280; function containerBox(padX = 24) { return { maxWidth: TC_CONTAINER, margin: '0 auto', width: '100%', paddingLeft: padX, paddingRight: padX }; } // ── Section container ────────────────────────────────────── // Common vertical rhythm + optional eyebrow + section title. function Section({ tone = 'white', children, padY, padX, style = {}, id }) { const bg = { white: TC.white, off: TC.off, sage: TC.sageDeep, ink: '#1c2520', cream: '#faf7f1', }[tone]; return (

{children}

); } function SectionHead({ eyebrow, title, sub, align = 'left', dark = false, maxWidth = 720 }) { const fg = dark ? TC.white : TC.ink; const fgSub = dark ? 'rgba(255,255,255,0.72)' : TC.ink2; return (

{eyebrow && (

{eyebrow}

)} {title && (

{title}

)} {sub && (

{sub}

)}

); } Object.assign(window, { TC, fontSans, fontSerif, fontMono, ASSET, TCLogo, Eyebrow, BtnPrimary, BtnGhost, IconDot, IconCheck, StarRow, ThemeMark, LifestyleImg, PhotoPlaceholder, WhatsAppFAB, Section, SectionHead, useDevice, TC_CONTAINER, containerBox, });