// SECTIONS — Club, Manifesto, Disciplines, Salle d'armes, Tournois, Galerie, Identité // ─────────────────────────────────────────────────────────────────── // Section-level responsive + interaction styles (single source of truth) // ─────────────────────────────────────────────────────────────────── const SectionsStyles = () => ( ); // ─────────────────────────────────────────────────────────────────── // PRE-HEADER BANNER — bandeau d'annonce ponctuel au-dessus de la nav. // Style éditorial : fond ink, eyebrow ember "À noter", filet ember en bas. // Toggle depuis l'admin (actualites.banner.enabled). // ─────────────────────────────────────────────────────────────────── const PreHeaderBanner = () => { const c = window.useContent('actualites') || {}; const b = c.banner || {}; const enabled = b.enabled && b.text; // Pousse la nav vers le bas pendant que le bandeau est affiché. React.useEffect(() => { document.documentElement.style.setProperty('--prebanner-h', enabled ? '38px' : '0px'); return () => document.documentElement.style.setProperty('--prebanner-h', '0px'); }, [enabled]); if (!enabled) return null; const isLink = !!b.href; const Tag = isLink ? 'a' : 'div'; const linkProps = isLink ? { href: b.href, target: /^https?:/.test(b.href) ? '_blank' : undefined, rel: /^https?:/.test(b.href) ? 'noopener noreferrer' : undefined, } : {}; return ( {b.eyebrow || 'À noter'} ); }; // ─────────────────────────────────────────────────────────────────── // ACTUALITÉS — section éditoriale juste après le hero. // SectionLabel numéroté + titre display + 1-N cartes en grille. // Click sur une carte → ouvre un modal détaillé (body HTML + galerie + liens). // ─────────────────────────────────────────────────────────────────── const Actualites = () => { const c = window.useContent('actualites') || {}; const items = (c.items || []).filter((it) => it && (it.title || it.desc)); const [openIdx, setOpenIdx] = React.useState(null); if (items.length === 0) return null; const layoutClass = items.length === 1 ? 'actu-1' : items.length === 2 ? 'actu-2' : 'actu-3'; const openItem = openIdx != null ? items[openIdx] : null; return (

{c.titleLine1 || 'Ce qui'}
{c.titleLine2 || 'se passe en ce moment.'}

{c.lede && (

{c.lede}

)}
{items.map((it, i) => ( setOpenIdx(i)} /> ))}
{openItem && ( setOpenIdx(null)} /> )}
); }; const ActuCard = ({ item, variant, onOpen }) => { const onKeyDown = (e) => { if (e.key === 'Enter' || e.key === ' ') { e.preventDefault(); onOpen(); } }; return ( ); }; // ─────────────────────────────────────────────────────────────────── // MODAL d'actualité — overlay détaillé au clic sur une carte. // Style aligné sur le legal-modal existant (même classes réutilisées // quand possible) pour rester cohérent avec la DA. // ─────────────────────────────────────────────────────────────────── const ActuModal = ({ item, onClose }) => { React.useEffect(() => { const prev = document.body.style.overflow; document.body.style.overflow = 'hidden'; const onKey = (e) => { if (e.key === 'Escape') onClose(); }; window.addEventListener('keydown', onKey); return () => { document.body.style.overflow = prev; window.removeEventListener('keydown', onKey); }; }, [onClose]); const gallery = Array.isArray(item.gallery) ? item.gallery.filter((g) => g && g.src) : []; const links = Array.isArray(item.links) ? item.links.filter((l) => l && l.href) : []; return (
e.target === e.currentTarget && onClose()} >
{item.image && (
{item.imageAlt
)} {!item.image && ( )}
{item.eyebrow &&
{item.eyebrow}
} {item.title && (

{item.title}

)} {item.desc &&

{item.desc}

} {item.bodyHtml && (
)} {gallery.length > 0 && (
{gallery.map((g, i) => (
{g.alt {g.caption &&
{g.caption}
}
))}
)} {links.length > 0 && (
{links.map((l, i) => ( {l.label || l.href} ))}
)}
); }; // ─────────────────────────────────────────────────────────────────── // MANIFESTO — treatise drawing right, large pull-quote left. // Editorial spread feel, alludes to historical sources. // ─────────────────────────────────────────────────────────────────── const Manifesto = () => { const c = window.useContent('rigueur') || {}; return (

{c.titleLine1}
{c.titleLine2}

{c.body}

{/* Right column — treatise drawing, sober frame */}
{c.imageAlt}
); }; // ─────────────────────────────────────────────────────────────────── // CLUB — full-width with split image and intro // ─────────────────────────────────────────────────────────────────── const Club = () => { const c = window.useContent('club') || {}; const pillars = c.pillars || []; return (

{c.titleLine1}
{c.titleLine2}
{c.titleLine3}

{c.body}

{/* Pillars */}
{pillars.map((p, i) => (
{p.n}
{p.title}.

{p.body}

))}
); }; // ─────────────────────────────────────────────────────────────────── // ENCADREMENT — 3 instructeurs, hiérarchie visuelle scannable. // Format : eyebrow (spécialité) · nom display · accroche punch · bio courte. // Pas de portrait pseudo-photo (cf. retours UX : faisait "club qui n'assume pas"). // ─────────────────────────────────────────────────────────────────── const Encadrement = () => { const c = window.useContent('profs') || {}; const people = c.items || []; return (

{c.titleLine1}
{c.titleLine2}

{c.lede}

{people.map((p, i) => (
{`Portrait
{p.eyebrow}

{p.name}

{p.featured && p.punch && p.punch.includes(' · ') ? ( <> {p.punch.split(' · ')[0]} {' · ' + p.punch.split(' · ').slice(1).join(' · ')} ) : p.punch}

{p.body}

{p.link && p.link.href && ( {p.link.label} )}
))}
); }; // ─────────────────────────────────────────────────────────────────── // DISCIPLINES — 4 large interactive cards in a row // Hover expands to reveal details about the weapon system // ─────────────────────────────────────────────────────────────────── const Disciplines = () => { const content = window.useContent('disciplines') || {}; const disciplines = content.items || []; const [active, setActive] = React.useState(() => disciplines[0]?.id); // Si le contenu change (fetch admin / seed → KV), recale l'état actif // sur le premier item si l'ancien ID n'existe plus. React.useEffect(() => { if (disciplines.length === 0) return; if (!disciplines.find((d) => d.id === active)) { setActive(disciplines[0].id); } }, [disciplines, active]); return (

{content.titleLine1}
{content.titleLine2}

{content.lede}

{/* Wrapper qui héberge la strip + l'indice "swipe" visible uniquement en mobile (où la strip devient un carousel à scroll horizontal). */}
{/* Card row — full bleed. Grid template suit le nombre d'items (édition CMS). */}
{disciplines.map((d) => { const isActive = active === d.id; return (
setActive(d.id)} onClick={() => setActive(d.id)} onFocus={() => setActive(d.id)} tabIndex={0} role="button" aria-pressed={isActive} > {d.name}
); }; // ─────────────────────────────────────────────────────────────────── // NOUS REJOINDRE — créneaux + lieu + essai gratuit + adhésion en un bloc // ─────────────────────────────────────────────────────────────────── const Salle = () => { const c = window.useContent('rejoindre') || {}; const slots = c.slots || []; const headers = c.scheduleHeaders || ['Jour', 'Horaire', 'Discipline', 'Niveau']; const p1 = c.pillar1 || {}; const p2 = c.pillar2 || {}; const venue = c.venue || {}; return (

{c.titleLine1}
{c.titleLine2}

{/* ─── Lieu + contact direct. Réutilise le pattern .tournois-facts (label eyebrow ember + value, grid 200/1fr, bords parch-line) pour rester aligné graphiquement avec le reste du site. L'eyebrow "Pratique" délimite ce bloc des horaires en dessous. ─── */} {(venue.name || venue.contactEmail) && (
{c.venueEyebrow || 'Pratique'}
    {venue.name && (
  • {venue.eyebrow || 'Lieu'} {venue.name} {venue.address && ( <>
    {venue.address} )}
    • )} {(venue.contactEmail || venue.contactPhone) && (
  • {venue.contactEyebrow || 'Contact'} {venue.contactEmail && ( {venue.contactEmail} )} {venue.contactPhone && ( {venue.contactPhone} )}
    • )}
)} {/* ─── Horaires — l'eyebrow "Créneaux" sert de marqueur visuel pour séparer ce bloc des infos Lieu/Contact au-dessus (qui partagent le même langage de lignes horizontales). ─── */}
{c.scheduleEyebrow || 'Créneaux hebdomadaires'}
{headers.map((h, i) => (
{h}
))}
{slots.map((s, i) => ( ))}
{/* ─── 2 piliers texte : viens essayer · continuer ensuite. Volontairement collé à la note débutant pour grouper visuellement "créneaux → recommandation → viens essayer". ─── */}
{p1.eyebrow}

{(p1.bodyHtml || []).map((para, i) => (

))} {/* Carte OSM — Gymnase Robert Pras */} {p1.cta && p1.cta.href && ( {p1.cta.label} )}

{p2.eyebrow}

{(p2.bodyHtml || []).map((para, i) => (

))} {p2.cta && p2.cta.href && ( {p2.cta.label} )}

); }; const SlotRow = ({ slot }) => (
{slot.day}
{slot.time}
{slot.disc}
{slot.lvl}
); // ─────────────────────────────────────────────────────────────────── // FAQ — questions fréquentes des prospects (âge, niveau, matériel, danger) // Réponses bâties uniquement sur les infos déjà présentes sur le site. // ─────────────────────────────────────────────────────────────────── const Faq = () => { const c = window.useContent('faq') || {}; const items = c.items || []; const [open, setOpen] = React.useState(0); return (

{c.titleLine1}
{c.titleLine2}

{c.ledeHtml ? (

) : (

{c.lede}

)}
    {items.map((it, i) => { const isOpen = open === i; return (
    • ); })}
); }; // ─────────────────────────────────────────────────────────────────── // TOURNOIS — bloc court : photo + intro + facts + 2 liens externes // ─────────────────────────────────────────────────────────────────── const Tournois = () => { const c = window.useContent('tournois') || {}; const facts = c.facts || []; const ctas = c.ctas || []; return (
{c.photoOverlayEyebrow}
{c.photoOverlayTitle}

{c.titleLine1} {' '} {c.titleLine2}

{c.body}

    {facts.map((f, i) => (
  • {f.label} {f.value}
    • ))}
{ctas.map((cta, i) => ( {cta.label} ))}
); }; // ─────────────────────────────────────────────────────────────────── // GALERIE — masonry-ish grid with real photos // ─────────────────────────────────────────────────────────────────── const Galerie = () => { const c = window.useContent('galerie') || {}; const tiles = c.tiles || []; return (

{c.titleLine1}
{c.titleLine2}

{c.facebookHref && ( {c.facebookLabel || 'Voir sur Facebook'} )}
{tiles.map((t, i) => (
{t.cap}
 ))}
); }; // ─────────────────────────────────────────────────────────────────── // PARTENAIRES — hommage aux gens qui rendent le club possible : // FFAMHE (la fédération qui structure tout l'AMHE en France) et // les ateliers / boutiques qui fournissent le matériel sérieux. // ─────────────────────────────────────────────────────────────────── const Partenaires = () => { const c = window.useContent('partenaires') || {}; const partners = c.items || []; return (

{c.titleLine1}
{c.titleLine2}

{partners.map((p, i) => ( ))}
); }; Object.assign(window, { SectionsStyles, PreHeaderBanner, Actualites, Manifesto, Club, Encadrement, Disciplines, Salle, Faq, Tournois, Galerie, Partenaires, });