// Chrome: Nav + Footer + reusable bits const { useState, useEffect, useRef } = React; const NAV_ITEMS = [ { id: 'home', label: 'Accueil' }, { id: 'domaines', label: 'Les 7 expertises' }, { id: 'performance', label: 'Performance' }, { id: 'continu', label: 'Continu' }, { id: 'amenagement', label: 'Aménagement' }, { id: 'equipement', label: 'Équipement' }, { id: 'competences', label: 'Compétences' }, { id: 'outils', label: 'Automatisation', isNew: true }, { id: 'apropos', label: 'À propos' }]; function Nav({ route, navigate }) { const [open, setOpen] = useState(false); const [hidden, setHidden] = useState(false); const lastY = useRef(0); useEffect(() => { function onScroll() { const y = window.scrollY; setHidden(y > 200 && y > lastY.current); lastY.current = y; } window.addEventListener('scroll', onScroll, { passive: true }); return () => window.removeEventListener('scroll', onScroll); }, []); useEffect(() => { setOpen(false); }, [route]); useEffect(() => { function onKey(e) { if (e.key === 'Escape') setOpen(false); } document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, []); useEffect(() => { const t = setTimeout(() => { document.querySelectorAll('.auto-scroll-hint').forEach(el => el.remove()); function makeHint(isDark) { const c = isDark ? 'rgba(255,255,255,0.7)' : 'rgba(6,6,26,0.55)'; const h = document.createElement('div'); h.className = 'auto-scroll-hint scroll-hint-inner'; h.style.cssText = 'position:absolute;bottom:22px;left:50%;transform:translateX(-50%);display:flex;flex-direction:column;align-items:center;gap:3px;z-index:20;pointer-events:none'; h.innerHTML = `SCROLL`; return h; } // Pages secondaires : main > section (toutes sauf celles qui ont déjà un hint) const main = document.querySelector('main'); if (main) { Array.from(main.querySelectorAll(':scope > section')).forEach(section => { if (section.querySelector('.scroll-hint-inner')) return; const rgb = getComputedStyle(section).backgroundColor.match(/\d+/g); const isDark = section.querySelector('.bg-stars-light,.bg-grid-light') || (rgb && (rgb[0]*299 + rgb[1]*587 + rgb[2]*114)/1000 < 128); if (getComputedStyle(section).position === 'static') section.style.position = 'relative'; section.appendChild(makeHint(isDark)); }); } // Page home : hints gérés par V4Home (body portal, position:fixed) }, 500); return () => clearTimeout(t); }, [route]); function go(id) { setOpen(false); navigate(id); } const EXP = [ { id: 'performance', num: '01', label: 'Performance', kpi: '+22% TRS' }, { id: 'continu', num: '02', label: 'Amélioration continue', kpi: '+12 idées/mois' }, { id: 'amenagement', num: '03', label: 'Aménagement', kpi: '−45% trajets' }, { id: 'equipement', num: '04', label: 'Équipement', kpi: '−30% arrêts' }, { id: 'competences', num: '05', label: 'Compétences', kpi: '×2 polyvalence' }, { id: 'diagnostic', num: '06', label: 'Diagnostic flash', kpi: 'J+0 restitution' }, { id: 'outils', num: '07', label: 'Automatisation', kpi: 'Déployé & en prod' }, ]; const OUTILS_NAV = [ { id: 'cadulis', label: 'Cadulis', color: '#2563eb' }, { id: 'kizeo', label: 'Kizeo', color: '#ea580c' }, { id: 'skello', label: 'SKELLO', color: '#7c3aed' }, { id: 'ebp', label: 'EBP', color: '#1e40af' }, { id: 'pennylane', label: 'Pennylane', color: '#16a34a' }, ]; const SECT_NAV = [ { id: 'plasturgie', label: 'Plasturgie' }, { id: 'usinage', label: 'Usinage' }, { id: 'menuiserie', label: 'Menuiserie' }, ]; const PRIMARY = [ { id: 'home', label: 'Accueil', sub: 'Page principale du site' }, { id: 'domaines', label: 'Les 7 expertises', sub: 'Performance · Lean · Digital' }, { id: 'logiciels', label: 'Nos outils numériques', sub: '5 outils déployés en production' }, { id: 'secteurs', label: 'Nos secteurs', sub: 'Plasturgie · Usinage · Menuiserie' }, { id: 'apropos', label: 'À propos', sub: 'Benoît Tenailleau — 25 ans terrain' }, ]; return ( <> {/* ── Barre nav ── */} {/* ── Mega-menu overlay ── */} {open && (
{/* ── Colonne gauche : nav primaire ── */}
NAVIGATION
{PRIMARY.map((item, i) => ( ))}
{/* CTA + statut */}
Vendée · Pays de la Loire · 1ère visite gratuite
{/* ── Colonne droite : sous-navigation ── */}
{/* 7 expertises */}
LES 7 EXPERTISES
{EXP.map((e, i) => ( ))}
{/* Outils */}
NOS OUTILS NUMÉRIQUES
{OUTILS_NAV.map(t => ( ))}
{/* Secteurs */}
NOS SECTEURS
{SECT_NAV.map(s => ( ))}
)} ); } function Footer({ navigate }) { return ( ); } // === Reveal-on-scroll helper === function useReveal() { const ref = useRef(null); useEffect(() => { const el = ref.current; if (!el) return; const io = new IntersectionObserver((entries) => { entries.forEach((e) => { if (e.isIntersecting) { e.target.classList.add('is-in'); io.unobserve(e.target); } }); }, { threshold: 0.12, rootMargin: '0px 0px -40px 0px' }); io.observe(el); return () => io.disconnect(); }, []); return ref; } function Reveal({ children, className = '', stagger, ...rest }) { const ref = useReveal(); const cls = stagger ? 'reveal-stagger' : 'reveal'; return
{children}
; } // === Card mouse-follow effect (cyberscope-y glow) === function MagCard({ children, className = '', ...rest }) { const ref = useRef(null); function onMove(e) { const r = ref.current.getBoundingClientRect(); ref.current.style.setProperty('--mx', (e.clientX - r.left) / r.width * 100 + '%'); ref.current.style.setProperty('--my', (e.clientY - r.top) / r.height * 100 + '%'); } return
{children}
; } // Eyebrow tag with bracket markers function Eyebrow({ children, dot = true }) { return ( {dot && } {children} ); } // Scroll indicator — animated chevron, absolute at bottom of hero sections function ScrollHint({ dark = false }) { const c = dark ? 'rgba(255,255,255,0.32)' : 'rgba(6,6,26,0.28)'; return (
SCROLL
); } // CTA banner reused on every page function CTABanner({ navigate }) { return (
NOUS CONTACTER

Une question ?
Un projet ?

); } // ====== Modal carte — overlay plein écran ====== function CardModal({ id, onClose, navigate }) { const data = window.SERVICE_PAGES && window.SERVICE_PAGES[id]; const svc = window.SERVICES && window.SERVICES.find(s => s.id === id); const ref = useRef(null); // Fermer à Escape useEffect(() => { function onKey(e) { if (e.key === 'Escape') onClose(); } document.addEventListener('keydown', onKey); return () => document.removeEventListener('keydown', onKey); }, []); if (!data) return null; return (
{/* Boutons fermer + en savoir plus */}
{navigate && id !== 'domaines' && ( )}
{/* En-tête */}
{svc ? svc.num : ''}

{svc ? svc.title : id}

{svc && (
{svc.chips.map(c => ( {c} ))}
)}
{/* Intro */}

{data.intro}

{/* Piliers */} {data.pillars && (
{data.pillars.map((p, i) => (
{p.num}
{p.title}
{p.desc}
))}
)} {/* Stats */} {data.ctas && (
{data.ctas.map((c, i) => (
{c.value} {c.label}
))}
{data.pdfUrl && ( e.currentTarget.style.background = 'rgba(94,76,255,0.12)'} onMouseLeave={(e) => e.currentTarget.style.background = 'rgba(94,76,255,0.05)'}> ↓ Flyer PDF )}
Vendée · Pays de la Loire
)}
); } function FlashDiagPopup({ navigate }) { const [phase, setPhase] = useState('in'); useEffect(() => { if (sessionStorage.getItem('fdp-shown')) { setPhase('gone'); return; } sessionStorage.setItem('fdp-shown', '1'); const t1 = setTimeout(() => setPhase('out'), 2600); const t2 = setTimeout(() => setPhase('gone'), 3200); return () => { clearTimeout(t1); clearTimeout(t2); }; }, []); if (phase === 'gone') return null; const dismiss = () => { setPhase('out'); setTimeout(() => setPhase('gone'), 600); }; return (
e.stopPropagation()} style={{ maxWidth:480, width:'100%', borderRadius:18, background:'linear-gradient(135deg, var(--deep) 0%, var(--electric) 100%)', padding:'24px 26px 20px', position:'relative', overflow:'hidden', boxShadow:'0 28px 70px rgba(16,30,142,0.45)', }}>
OFFRE DÉCOUVERTE
Visite Flash Diag offerte
{[['⏱','1-2h sur site'],['💬','Restitution le jour même'],['✓','Zéro engagement']].map(([icon,t],i) => (
{icon}
{t}
))}
); } Object.assign(window, { Nav, Footer, useReveal, Reveal, MagCard, Eyebrow, CTABanner, NAV_ITEMS, CardModal, ScrollHint, FlashDiagPopup }); // CSS animation for ScrollHint (function () { var s = document.createElement('style'); s.textContent = '@keyframes scrollBounce{0%,100%{transform:translateY(0);opacity:0.45}50%{transform:translateY(5px);opacity:1}}'; document.head.appendChild(s); })(); // ====== Magnetic button effect (Cyberscope-style) ====== (function () { const SELECTORS = '.btn-primary, .nav-cta, .btn-electric'; const STRENGTH = 0.28; const RADIUS = 90; function applyMagnetic(btn) { if (btn._mag) return; btn._mag = true; btn.style.transition = 'transform 400ms cubic-bezier(0.2, 0.7, 0.2, 1)'; btn.addEventListener('mousemove', function (e) { const r = btn.getBoundingClientRect(); const cx = r.left + r.width / 2; const cy = r.top + r.height / 2; const dx = e.clientX - cx; const dy = e.clientY - cy; const dist = Math.sqrt(dx * dx + dy * dy); if (dist < RADIUS) { const pull = (1 - dist / RADIUS) * STRENGTH; btn.style.transform = `translate(${dx * pull}px, ${dy * pull}px)`; } }); btn.addEventListener('mouseleave', function () { btn.style.transform = ''; }); } function scan() { document.querySelectorAll(SELECTORS).forEach(applyMagnetic); } // Apply after React renders const mo = new MutationObserver(scan); document.addEventListener('DOMContentLoaded', function () { scan(); mo.observe(document.body, { childList: true, subtree: true }); }); // Safety net if DOM already ready if (document.readyState !== 'loading') { scan(); mo.observe(document.body, { childList: true, subtree: true }); } })();