// Theme & shared building blocks for the Vue360 site (V4 direction) // Couleurs marque (tirées du logo): #0049e7 (bleu), #48d2b1 (aqua), #8d82f4 (mauve), #e19ffb (rose), + jaune #ffb84d const v4Theme = { bg: '#fdf8f0', bg2: '#f5ede0', surface: '#ffffff', ink: '#0a1840', inkSoft: '#3a4868', muted: '#6b7794', blue: '#0049e7', teal: '#48d2b1', purple: '#8d82f4', pink: '#e19ffb', warm: '#ffb84d', border: 'rgba(10,24,64,0.1)', fontDisplay: '"Bricolage Grotesque", "Inter", system-ui, sans-serif', fontBody: '"Inter", system-ui, sans-serif', }; // ── Adaptation mobile et tablette ───────────────────────────────────────── // Les pages sont stylées en ligne pour le bureau; ces règles les réajustent // sur petits écrans (les !important l'emportent sur les styles en ligne). if (typeof document !== 'undefined' && !document.getElementById('v4-responsive')) { const css = document.createElement('style'); css.id = 'v4-responsive'; css.textContent = ` html,body{overflow-x:hidden} #root img,#root svg,#root video{max-width:100%} .v4-burger,.v4-mnav{display:none} @media (max-width:1100px){ .v4-nav{gap:18px!important;font-size:13px!important} #root [style*="grid-template-columns: repeat(3"],#root [style*="grid-template-columns: repeat(4"], #root [style*="grid-template-columns: 2fr 1fr 1fr 1fr"],#root [style*="grid-template-columns: 1fr 1fr 1fr"]{ grid-template-columns:repeat(2,minmax(0,1fr))!important} } @media (max-width:900px){ .v4-nav,.v4-cta{display:none!important} .v4-burger{display:inline-flex} .v4-mnav.open{display:flex} #root section[style*="56px"],#root footer[style*="56px"],#root header [style*="56px"], #root nav[style*="56px"],#root div[style*="padding: 0px 56px"], #root div[style*="max-width: 1440px"][style*="56px"]{padding-left:20px!important;padding-right:20px!important} #root section[style*="padding: 120px"],#root section[style*="padding: 140px"]{padding-top:64px!important;padding-bottom:64px!important} #root section[style*="padding: 80px"],#root footer[style*="padding: 80px"]{padding-top:48px!important} #root [style*="grid-template-columns"]:not([style*="8px 1fr"]):not([style*="44px 1fr"]){ grid-template-columns:minmax(0,1fr)!important;gap:20px!important} #root [style*="position: sticky"]:not(header){position:static!important} #root [style*="display: flex"]:not([style*="flex-direction: column"]):not(header *):not(button){flex-wrap:wrap} #root h1{font-size:clamp(34px,10vw,52px)!important;letter-spacing:-1px!important;line-height:1.08!important} #root h1 *,#root h2 *{white-space:normal!important} #root h2{font-size:clamp(28px,8vw,40px)!important;letter-spacing:-0.8px!important;line-height:1.12!important} #root h3{font-size:clamp(20px,5.5vw,26px)!important} #root [style*="font-size: 64px"],#root [style*="font-size: 72px"],#root [style*="font-size: 80px"], #root [style*="font-size: 88px"],#root [style*="font-size: 96px"],#root [style*="font-size: 104px"], #root [style*="font-size: 128px"]{font-size:clamp(36px,11vw,52px)!important;letter-spacing:-1px!important} #root p[style*="font-size: 20px"],#root p[style*="font-size: 19px"]{font-size:17px!important} #root div[style*="padding: 56px 64px"],#root div[style*="padding: 48px;"],#root div[style*="padding: 40px 48px"], #root div[style*="padding: 52px 56px"],#root div[style*="padding: 36px;"],#root div[style*="padding: 40px;"], #root div[style*="padding: 32px;"]{padding:24px!important} #root [style*="max-width: 1440px"]{max-width:100%!important} .v4-hide-mobile{display:none!important} .v4-ski-layer{left:50%!important;right:auto!important;width:1533px!important;max-width:none!important;transform:translateX(-48%)} .v4-ski-lead{background:rgba(10,24,64,0.6);padding:16px 18px;border-radius:16px;backdrop-filter:blur(6px)} } `; document.head.appendChild(css); if (!document.querySelector('meta[name="viewport"]')) { const m = document.createElement('meta'); m.name = 'viewport'; m.content = 'width=device-width,initial-scale=1'; document.head.appendChild(m); } } // Préfixe de chemin pour les pages en sous-dossier (ex. tour-virtuel-360/hotels/). // Une page en sous-dossier définit window.V4_BASE = '../../' avant de charger ce fichier. const v4Base = () => (typeof window !== 'undefined' && window.V4_BASE) || ''; const v4Href = (h) => (/^(https?:|mailto:|tel:|#)/.test(h) ? h : v4Base() + h); const V4LogoMark = ({size = 38} = {}) => ( Vue360 ue360 ); const V4Nav = ({active}) => { const [open, setOpen] = React.useState(false); const items = [ ['tour-virtuel-360/index.html','Tours virtuels 360°','tours'], ['services-fiche-google.html','Visibilité locale','fiche'], ['services-site-web.html','Sites web','site'], ['services-avis.html','Système d\'avis','avis'], ['ressources.html','Ressources','ressources'], ]; const link = (href,label,key) => ( {label} ); return (
Demande de services →
); }; const V4Footer = () => ( ); // Petit hero réutilisable pour pages internes const V4PageHero = ({eyebrow, title, gradient, subtitle, accent = v4Theme.teal}) => (
{eyebrow}

{title}{' '} {gradient && ( {gradient} )}

{subtitle && (

{subtitle}

)}
); const V4Button = ({children, primary, href = '#', style={}}) => ( {children} ); // Section CTA finale réutilisable const V4FinalCTA = ({title, gradientPart, body}) => (
✓ Appel gratuit · Sans engagement

{title}{' '} {gradientPart && {gradientPart}}

{body || "15 minutes au téléphone. On regarde votre fiche Google, on identifie ce qui manque, on vous donne un plan. Gratuit, sans engagement."}

Réserver mon appel découverte →
); // "À partir de" : affichage de prix consistant const V4PriceBadge = ({price, note = 'tout inclus', accent = v4Theme.blue}) => (
À partir de
{price}$
{note}
); // Champ « Nom du commerce » avec suggestions Google (Places Autocomplete via /api/places-autocomplete). // Ajoute au formulaire les champs cachés place_id, adresse et session_token. const v4NewSession = () => (window.crypto && crypto.randomUUID ? crypto.randomUUID() : String(Date.now()) + Math.random().toString(36).slice(2)); const V4PlaceInput = ({label='Nom du commerce', name='commerce', required, placeholder, span, onPick}) => { const [val, setVal] = React.useState(''); const [items, setItems] = React.useState([]); const [open, setOpen] = React.useState(false); const [active, setActive] = React.useState(-1); const [picked, setPicked] = React.useState(null); const tok = React.useRef(v4NewSession()); const timer = React.useRef(null); const search = (q) => { clearTimeout(timer.current); if (q.trim().length < 3) { setItems([]); setOpen(false); return; } timer.current = setTimeout(async () => { try { const r = await fetch(v4Href('api/places-autocomplete'), {method:'POST', headers:{'Content-Type':'application/json'}, body:JSON.stringify({input:q, sessionToken:tok.current})}); const j = await r.json(); setItems(j.suggestions || []); setOpen((j.suggestions || []).length > 0); setActive(-1); } catch (_) { setItems([]); setOpen(false); } }, 250); }; const choose = (it) => { setVal(it.main); setPicked(it); setOpen(false); setItems([]); if (onPick) onPick(it); }; const onKey = (e) => { if (!open) return; if (e.key === 'ArrowDown') { e.preventDefault(); setActive(a => Math.min(a + 1, items.length - 1)); } else if (e.key === 'ArrowUp') { e.preventDefault(); setActive(a => Math.max(a - 1, 0)); } else if (e.key === 'Enter' && active >= 0) { e.preventDefault(); choose(items[active]); } else if (e.key === 'Escape') setOpen(false); }; return ( ); }; window.V4PlaceInput = V4PlaceInput; window.v4Theme = v4Theme; window.v4Href = v4Href; window.V4LogoMark = V4LogoMark; window.V4Nav = V4Nav; window.V4Footer = V4Footer; window.V4PageHero = V4PageHero; window.V4Button = V4Button; window.V4FinalCTA = V4FinalCTA; window.V4PriceBadge = V4PriceBadge;