import React, {createContext, useContext, useEffect, useRef, useState} from 'react'; import content from './content.json'; const {site, services, formats, reviews, faqs, clients, cities, gallery}=content; const media=content.media as Record; type Navigation={path:string;location:string;preview:boolean;go:(to:string)=>void}; const RouterContext=createContext({path:'/',location:'/',preview:false,go:()=>{}}); const useRouter=()=>useContext(RouterContext); const normalize=(p:string)=>p==='/'?'/':`/${p.replace(/^\/+|\/+$/g,'')}/`; const readLocation=()=>typeof window==='undefined'?'/':(window as any).__PREVIEW__?(window.location.hash.startsWith('#!')?window.location.hash.slice(2):'/'):window.location.pathname+window.location.search+window.location.hash; function Link({to,children,className='',onClick,...rest}:any){ const {go,preview}=useRouter();return {if(e.button===0&&!e.metaKey&&!e.ctrlKey&&!e.shiftKey&&!e.altKey){e.preventDefault();go(to);onClick?.();}}}>{children}; } function Icon({name='arrow',size=20,className=''}:{name?:string;size?:number;className?:string}){ const paths:Record={ arrow:<>, diagonal:<>, down:<>, play:, close:, plus:, phone:, mail:<>, location:<>, check:, image:<>, menu:<>, pause:<>, star: };return ; } function Button({to,children,variant='',className='',arrow=true,...rest}:any){return to?{children}{arrow&&}:} function Eyebrow({children,className=''}:any){return

{children}

} function Logo({footer=false}:{footer?:boolean}){return {site.logoSrc? Stéphane Picard Magic

:<>sp.STÉPHANE PICARDMAGIC}} function Photo({id,className='',eager=false,caption=false,position}:{id:string;className?:string;eager?:boolean;caption?:boolean;position?:string}){ const m=media[id]||media.corporate;const [failed,setFailed]=useState(false); useEffect(()=>setFailed(false),[id]); return

{!failed&& {m.alt}

setFailed(true)}/>} {failed&&

{m.alt}Photo du site d’origine · connexion nécessaire

} {caption&&{m.credit}}

; } function Header(){ const {path,location}=useRouter();const [menu,setMenu]=useState(false);const [dropdown,setDropdown]=useState(false);const menuButton=useRef(null);const header=useRef(null); useEffect(()=>{setMenu(false);setDropdown(false);},[location]); useEffect(()=>{ if(!menu)return; const before=document.body.style.overflow;document.body.style.overflow='hidden'; const blocked=Array.from(document.querySelectorAll('main,.site-footer')).map(el=>({el,was:el.inert})); blocked.forEach(({el})=>{el.inert=true;}); const trap=(e:KeyboardEvent)=>{ if(e.key!=='Tab')return; const items=Array.from(header.current?.querySelectorAll('a[href],button:not([disabled])')||[]).filter(el=>el.getClientRects().length>0&&!el.classList.contains('skip-link')); const first=items[0],last=items[items.length-1]; if(e.shiftKey&&document.activeElement===first){e.preventDefault();last?.focus();} else if(!e.shiftKey&&document.activeElement===last){e.preventDefault();first?.focus();} }; const desktop=window.matchMedia('(min-width:901px)'); const resize=()=>{if(desktop.matches)setMenu(false);}; document.addEventListener('keydown',trap);desktop.addEventListener('change',resize); return()=>{document.body.style.overflow=before;blocked.forEach(({el,was})=>{el.inert=was;});document.removeEventListener('keydown',trap);desktop.removeEventListener('change',resize);}; },[menu]); useEffect(()=>{const f=(e:KeyboardEvent)=>{if(e.key==='Escape'){setMenu(false);setDropdown(false);menuButton.current?.focus();}};window.addEventListener('keydown',f);return()=>window.removeEventListener('keydown',f);},[]); const active=(p:string)=>path===p?'active':''; return

{if(menu&&(e.target as HTMLElement).closest('a[href]'))setMenu(false);}} className={`site-header ${menu?'menu-is-open':''}`}>{e.preventDefault();document.getElementById('main')?.focus();}}>Aller au contenu

{menu&&}

; } function Dialog({children,onClose,title,wide=false,onKeyDown}:any){ const ref=useRef(null); useEffect(()=>{const el=ref.current;if(!el)return;const focus=document.activeElement as HTMLElement;const overflow=document.body.style.overflow;document.body.style.overflow='hidden';el.showModal();return()=>{el.close();document.body.style.overflow=overflow;focus?.focus?.();};},[]); return ; } function Trailer({onClose}:any){return } function SectionHeading({label,title,children,link,linkText='En savoir plus'}:any){return

{label}

{title}

{children?

{children}

:link?{linkText}:null}

} function Hero({openTrailer}:{openTrailer:()=>void}){return

MAGICIEN PROFESSIONNELLYON & AILLEURS

Stéphane Picard.

Close-up & spectacles. Des émotions bien réelles.

LA MAGIE SE VIT.AU PLUS PRÈS DE VOUS

L’émerveillement au cœur
de vos événements.

MARIAGES · ENTREPRISES · ANNIVERSAIRES

La suite se découvre ici

} function ClientStrip(){return

Ils m’ont fait confiance

musée des
ConfluencesSOCIÉTÉ
GÉNÉRALEBiMPL’APPARTFITNESSBuffalo Grill

} function ServiceCards({all=false}:{all?:boolean}){return
{services.slice(0,all?6:3).map((s,i)=>
0{i+1}
{s.title}
{s.short}
{s.tags.slice(0,2).join(' · ')})}
} function ServicesSection(){return
Chaque occasion
a sa magie.} link="/prestations/" linkText="Toutes les prestations"/>
Et aussi{services.slice(3).map(s=>{s.title})}
} function FormatsSection(){const [selected,setSelected]=useState(0);const f=formats[selected];return
De près.
Ou tous ensemble.}>
Au fil des conversations ou le temps d’un spectacle, la magie s’adapte à votre événement. Et jamais l’inverse.
{f.caption}
{formats.map((format,i)=>)}
{f.head}
{f.intro}
{f.text}
{f.points.map(p=>{p})}
} function AboutSection(){return
Stéphane PicardMagicien, avant tout passionné.
QUI SUIS-JE ?
Un peu de mystère.
Beaucoup d’humain.
Ce qui me plaît dans la magie ? Ce qu’elle provoque chez les gens.
Les regards qui se croisent, les rires, cette seconde où l’on cherche encore une explication. C’est pour ces moments-là que je pratique la magie.
Ma formation en psychologie nourrit une approche attentive et interactive. Avec une place essentielle pour l’humour — et pour vous.
Découvrir mon parcours
✳Prix du meilleur close-upDIAVOL · 2021
} function ReviewSection({all=false}:{all?:boolean}){const [index,setIndex]=useState(0);const r=reviews[index];return
ILS L’ONT VÉCU
Leurs mots.
Mes plus beaux
souvenirs.
Les avis clients
★★★★★
« {r.quote} »
{r.name.slice(0,1)}{r.name}{r.context}
{reviews.map((_,i)=>
} function GalleryStrip({openImage}:{openImage:(i:number)=>void}){return
Les images restent.
Les émotions aussi.} link="/galerie/" linkText="La galerie"/>
{[1,0,2].map((idx,i)=>)}
} function ProcessSection(){const steps=[['On échange','Votre date, vos invités, vos envies. Tout commence par une conversation.'],['Je vous propose','Un format adapté à votre événement et un devis personnalisé.'],['On réserve','Le devis validé et l’acompte réglé, la date est confirmée.'],['Vous profitez','Le jour J, partagez ce moment avec vos invités. Je m’occupe de la magie.']];return
La magie, oui.
Les complications, non.}/>
{steps.map(([title,text],i)=>
0{i+1}
{title}
{text}
)}
} function FAQList({items=faqs}:any){return
{items.map((f:any,i:number)=>
{f.q}
{f.a}
)}
} function FAQSection(){return
AVANT DE SE LANCER
Vous vous
demandez peut-être…
Quelques réponses pour préparer votre événement en toute simplicité.
Toutes les questions
} function ContactCTA(){return
LA PROCHAINE BELLE OCCASION
Et si on parlait
de votre événement ?
Une date, une idée, une envie de surprendre.
Racontez-moi ce que vous imaginez.
{site.phone}À Lyon, en France et en Suisse,
selon votre projet.
} function Footer(){return
L’émerveillement au cœur
de vos événements.
À DÉCOUVRIR
Qui suis-je ?GalerieAvis clientsFAQ
VOS ÉVÉNEMENTS
{services.map(s=>{s.title})}
PRENONS CONTACT
{site.phone}{site.email}Lyon · Auvergne-Rhône-AlpesParlons de votre événement
LYON & ALENTOURS{cities.map(c=>{c.name})}
© {new Date().getFullYear()} Stéphane Picard Magic
Mentions légalesConfidentialitéConditions
Aperçu · formulaire non connecté
} function PageTitle({eyebrow,title,children,breadcrumb=true}:any){return
{breadcrumb&&Accueil / {eyebrow}}{eyebrow}
{title}
{children&&
{children}
}
} function ServicePage({service:s}:any){return <>
Prestations / {s.title}{s.eyebrow}
{s.headline}
{s.intro}
{s.tags.map((tag:string)=>{tag})}
UNE PRESTATION QUI VOUS RESSEMBLE
{s.storyTitle}
{s.story}
{s.moments.map((m:any,i:number)=>
0{i+1}
{m.title}
{m.text}
)}
LES DÉTAILS QUI COMPTENT
Bien préparer
votre événement.
} function FormatPage({format:f}:any){return <>
Prestations / {f.title}{f.caption}
{f.title}.
{f.head}
{f.intro}
De la magie.
Et du lien.
{f.text}
{f.points.map((p:string)=>{p})}
} function AboutPage(){return <>Stéphane Picard.
La magie, côté humain.}>
Une passion devenue métier. Et toujours la même envie : partager ce moment où l’impossible devient possible.
LE PARCOURS
Curieux de tout.
Passionné de magie.
La magie entre dans ma vie à 17 ans, juste avant mes études de psychologie. Elle ne m’a plus quitté depuis. Au fil des livres, des rencontres et des heures de travail, un loisir devient une véritable manière de m’exprimer.
J’aime une magie soignée, jusque dans ses détails : le rythme, les mots, le choix d’un objet. Le secret d’un tour n’en est qu’une petite partie. Ce qui m’intéresse surtout, c’est l’échange avec les spectateurs.
En 2021, mon numéro musical mêlant magie visuelle et humour reçoit le prix du meilleur close-up au concours régional DIAVOL.
ProximitéUne magie qui fait participer.HumourUne place pour le rire.CréativitéDes effets qui me ressemblent.ÉcouteUne prestation pensée pour vous.
} function GalleryPage({openImage}:{openImage:(i:number)=>void}){const [filter,setFilter]=useState('Tout');const categories=['Tout','Mariages','Entreprises','Événements privés','Spectacles'];return <>La magie se vit.
Ces instants se gardent.}>
Des événements, des rencontres et des réactions spontanées. Un aperçu de mon univers, en images.
{categories.map(c=>)}
{gallery.filter(g=>filter==='Tout'||g.category===filter).length} photographies
{gallery.map((g,i)=>(filter==='Tout'||filter===g.category)&&)}
Photographies issues du site de Stéphane Picard. Leur affichage nécessite une connexion Internet dans cet aperçu.
} function GalleryDialog({index,setIndex,onClose}:any){const g=gallery[index];return {if(e.key==='ArrowRight'){e.preventDefault();setIndex((index+1)%gallery.length);}if(e.key==='ArrowLeft'){e.preventDefault();setIndex((index+gallery.length-1)%gallery.length);}}}>
{g.category}
{g.caption}
{index+1} / {gallery.length}
} function ContactForm(){ const {location}=useRouter();const params=new URLSearchParams(location.split('?')[1]?.split('#')[0]||'');const preset=params.get('evenement')||'';const [sent,setSent]=useState(false);const [summary,setSummary]=useState>({});const form=useRef(null);const message=useRef(null); useEffect(()=>{setSent(false);setSummary({});if(form.current){const field=form.current.elements.namedItem('evenement') as HTMLSelectElement;if(field)field.value=preset;}},[preset]); return
{e.preventDefault();const data=new FormData(e.currentTarget);setSummary({nom:String(data.get('nom')||''),evenement:String(data.get('evenement')||''),date:String(data.get('date')||''),lieu:String(data.get('lieu')||'')});setSent(true);setTimeout(()=>message.current?.focus(),20);}}>
Votre événement commence ici.
Quelques détails pour imaginer la suite ensemble.
Version de présentation. Aucun message ne sera envoyé ni enregistré.
Votre nom *Votre adresse e-mail *Téléphone facultatifType d’événement *Date envisagéeLieu de l’événementParlez-moi de votre projet *</label></div><button className="button form-button" type="submit">Vérifier ma demande <Icon name="diagonal" size={18}/></button>{sent&&<div className="form-success" ref={message} tabIndex={-1} role="status"><Icon name="check" size={22}/><div><strong>Les champs sont bien remplis, {summary.nom}.</strong><p>Ceci est uniquement un aperçu. Rien n’a été envoyé, enregistré ou réservé.</p><button type="button" className="text-link" onClick={()=>{setSent(false);form.current?.querySelector('input')?.focus();}}>Continuer à modifier</button></div></div>}</form>; } function ContactPage(){return <section className="wrap contact-page"><div className="contact-page-copy"><Link to="/" className="breadcrumb">Accueil <span>/</span> Contact</Link><Eyebrow>FAISONS CONNAISSANCE</Eyebrow><h1>Un événement.<br/>Une rencontre.<br/><em>De la magie.</em></h1><p>Vous avez une idée précise ou simplement envie de surprendre vos invités ? Parlons-en.</p><div className="contact-details"><a href={site.phoneHref}><span><Icon name="phone" size={19}/></span><div>Un appel, tout simplement<strong>{site.phone}</strong></div><Icon name="diagonal" size={17}/></a><a href={`mailto:${site.email}`}><span><Icon name="mail" size={19}/></span><div>Ou quelques mots<strong>{site.email}</strong></div><Icon name="diagonal" size={17}/></a></div><div className="contact-location"><Icon name="location" size={20}/><p>Basé à Lyon.<br/><span>Déplacements en France et en Suisse, selon le projet.</span></p></div></div><ContactForm/></section>} function FAQPage(){const [query,setQuery]=useState('');const results=faqs.filter(f=>`${f.q} ${f.a}`.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'').includes(query.toLowerCase().normalize('NFD').replace(/[\u0300-\u036f]/g,'')));return <><PageTitle eyebrow="VOS QUESTIONS" title={<>Tout simplement,<br/>avant la magie.</>}><p>Formats, organisation, réservation : les réponses aux questions que vous vous posez.</p></PageTitle><section className="wrap faq-page"><label className="faq-search">Rechercher une question<input type="search" value={query} onChange={e=>setQuery(e.target.value)} placeholder="Un lieu, un budget, un format…"/></label><FAQList items={results}/>{!results.length&&<p className="empty-state" role="status">Aucune réponse ne correspond à cette recherche. Essayez « spectacle », « budget » ou contactez-moi.</p>}</section><ContactCTA/></>} function ReviewsPage(){return <><PageTitle eyebrow="AVIS CLIENTS" title={<>Ils m’ont confié<br/>un moment important.</>}><p>Quelques mots laissés après un mariage, une soirée d’entreprise ou un spectacle privé.</p></PageTitle><ReviewSection all/><div className="wrap review-list">{reviews.map(r=><article key={r.name}><div className="review-stars">★★★★★</div><blockquote>« {r.quote} »</blockquote><strong>{r.name}</strong><span>{r.context}</span></article>)}</div><ClientStrip/><ContactCTA/></>} function CityPage({city}:any){return <><PageTitle eyebrow={`MAGICIEN À ${city.name.toUpperCase()}`} title={<>La magie à {city.name}.<br/>Tout près de vous.</>}><p>Basé à Lyon, je me déplace à {city.name} pour vos mariages, événements d’entreprise, anniversaires et fêtes privées. Le format se prépare selon votre lieu et vos invités.</p><Button to="/contact/">Parlons de votre projet</Button></PageTitle><div className="wrap city-photo"><Photo id="corporate" eager/></div><ServicesSection/><FormatsSection/><FAQSection/><ContactCTA/></>} const legalTitles:Record<string,string>={'/mentions-legales/':'Mentions légales','/politique-de-confidentialite/':'Politique de confidentialité','/conditions-generales-de-prestation/':'Conditions de prestation','/politique-de-cookies/':'Politique de cookies'}; function LegalPage({path}:{path:string}){return <><PageTitle eyebrow="INFORMATIONS" title={legalTitles[path]}/><article className="wrap legal-copy"><div className="legal-draft">Document de travail — à compléter et valider avant publication.</div>{path==='/politique-de-confidentialite/'||path==='/politique-de-cookies/'?<><h2>À propos de cet aperçu</h2><p>Le formulaire de cette version est déconnecté. Les valeurs saisies ne sont pas envoyées à un serveur et ne sont pas enregistrées dans un stockage persistant par l’application.</p><p>L’aperçu ne contient ni outil d’analyse d’audience ni pixel publicitaire. Les photographies sont chargées depuis le site d’origine et les polices depuis Google Fonts : ces chargements impliquent des connexions à ces services. Le lecteur vidéo n’est pas connecté.</p><h2>Avant la mise en ligne</h2><p>Les photographies devront être hébergées localement. Le traitement des futurs messages, leur conservation, les prestataires et les coordonnées de contact devront être documentés avant toute activation du formulaire.</p></>:path==='/mentions-legales/'?<><h2>Éditeur du site</h2><p>Stéphane Picard Magic<br/>{site.email}<br/>{site.phone}</p><h2>Informations à confirmer</h2><p>Statut professionnel, identification légale, adresse, responsable de publication, crédits photographiques et informations sur l’hébergeur final. Cet aperçu ne constitue pas une version prête à publier de ces mentions.</p></>:<><h2>Réservation et prestation</h2><p>Le devis définit la prestation retenue et ses modalités. Les conditions définitives doivent reprendre les engagements validés par Stéphane, notamment en matière de réservation, règlement, report et annulation.</p><p>Les conditions contractuelles détaillées ne sont pas inventées pour cette maquette. Elles devront être fournies ou validées avant publication.</p></>}</article></>} export function pageMeta(path:string){if(path==='/prestations/close-up/')path='/prestations/magicien-close-up-lyon/';const service=services.find(s=>s.path===path);const format=formats.find(f=>f.path===path);const city=cities.find(c=>path===`/magicien-${c.slug}/`);const titles:Record<string,string>={'/':'Magicien professionnel à Lyon','/prestations/':'Prestations de magie','/qui-suis-je/':'Qui suis-je ?','/galerie/':'Galerie','/avis-clients/':'Avis clients','/faq/':'Questions fréquentes','/contact/':'Parlons de votre événement',...legalTitles};return {title:`${service?.title||format?.title||(city?`Magicien à ${city.name}`:titles[path]||'Page introuvable')} — Stéphane Picard`,description:service?.intro||format?.intro||'Stéphane Picard, magicien professionnel à Lyon. Close-up et spectacles pour mariages, entreprises, anniversaires et événements privés.'};} export default function App({initialPath='/'}:{initialPath?:string}){ const [location,setLocation]=useState(initialPath);const [trailer,setTrailer]=useState(false);const [lightbox,setLightbox]=useState<number|null>(null);const preview=typeof window!=='undefined'&&!!(window as any).__PREVIEW__;let path=normalize(location.split(/[?#]/)[0]);if(path==='/prestations/close-up/')path='/prestations/magicien-close-up-lyon/'; const go=(to:string)=>{window.history.pushState({},'',preview?`#!${to}`:to);setLocation(to);const anchor=to.split('#')[1];setTimeout(()=>{if(anchor){document.getElementById(anchor)?.scrollIntoView({behavior:window.matchMedia('(prefers-reduced-motion: reduce)').matches?'auto':'smooth'});}else{window.scrollTo({top:0,behavior:'instant' as ScrollBehavior});document.getElementById('main')?.focus({preventScroll:true});}},30);}; useEffect(()=>{setLocation(readLocation());const change=()=>{setLocation(readLocation());setTimeout(()=>window.scrollTo({top:0,behavior:'instant' as ScrollBehavior}),0);};window.addEventListener('popstate',change);window.addEventListener('hashchange',change);return()=>{window.removeEventListener('popstate',change);window.removeEventListener('hashchange',change);};},[]); useEffect(()=>{setTrailer(false);setLightbox(null);document.title=pageMeta(path).title;},[path]); const service=services.find(s=>s.path===path);const format=formats.find(f=>f.path===path);const city=cities.find(c=>path===`/magicien-${c.slug}/`); let page:React.ReactNode; if(path==='/')page=<><Hero openTrailer={()=>setTrailer(true)}/><ClientStrip/><ServicesSection/><FormatsSection/><AboutSection/><ReviewSection/><GalleryStrip openImage={setLightbox}/><ProcessSection/><FAQSection/><ContactCTA/></>; else if(service)page=<ServicePage service={service}/>; else if(format)page=<FormatPage format={format}/>; else if(city)page=<CityPage city={city}/>; else if(path==='/prestations/')page=<><PageTitle eyebrow="LES PRESTATIONS" title={<>Votre événement.<br/>Sa touche de magie.</>}><p>Du mariage à la soirée d’entreprise, une magie adaptée à vos invités et à l’ambiance que vous souhaitez créer.</p></PageTitle><section className="wrap all-services-section"><ServiceCards all/></section><FormatsSection/><ContactCTA/></>; else if(path==='/qui-suis-je/')page=<AboutPage/>; else if(path==='/galerie/')page=<GalleryPage openImage={setLightbox}/>; else if(path==='/avis-clients/')page=<ReviewsPage/>; else if(path==='/faq/')page=<FAQPage/>; else if(path==='/contact/')page=<ContactPage/>; else if(legalTitles[path])page=<LegalPage path={path}/>; else page=<section className="not-found wrap"><Eyebrow>PAGE 404</Eyebrow><h1>Disparue.<br/>Mais pas par magie.</h1><p>Cette page n’existe pas, ou son adresse a changé.</p><Button to="/">Revenir à l’accueil</Button></section>; return <RouterContext.Provider value={{path,location,preview,go}}><Header/><main id="main" tabIndex={-1}>{page}</main><Footer/>{trailer&&<Trailer onClose={()=>setTrailer(false)}/>} {lightbox!==null&&<GalleryDialog index={lightbox} setIndex={setLightbox} onClose={()=>setLightbox(null)}/>}</RouterContext.Provider>; } </article></body></html>

{title}

Stéphane Picard.

{s.title}

{f.head}

Un peu de mystère.Beaucoup d’humain.

Leurs mots.Mes plus beauxsouvenirs.

{title}

Vous vousdemandez peut-être…

Et si on parlaitde votre événement ?

{title}

{s.headline}

{s.storyTitle}

{m.title}

Bien préparervotre événement.

{f.title}.{f.head}

De la magie.Et du lien.

Curieux de tout.Passionné de magie.

Votre événement commence ici.

Un peu de mystère.
Beaucoup d’humain.

Leurs mots.
Mes plus beaux
souvenirs.

Vous vous
demandez peut-être…

Et si on parlait
de votre événement ?

Bien préparer
votre événement.

{f.title}.
{f.head}

De la magie.
Et du lien.

Curieux de tout.
Passionné de magie.