// js/page-shared.jsx — Editorial layout for the inner pages // Distinct rhythm from the home page: 2-col with sticky "dossier" sidebar, // Roman-numeral chapters, drop caps, gold rules, marginalia. // // Exports: Breadcrumb, EditorialMasthead, EditorialLayout, Chapter, // EditorialList, TimelineChapters, SessionFlowVertical, // EditorialBenefits, PracticalSidebar, EditorialCTA, GoldRuleDivider // ─── Helper : split a title around an italic word ───────────────────────── function renderItalic(title, italicWord, italicColor = 'var(--eq-gold)') { if (!italicWord || !title.includes(italicWord)) return title; const [before, ...rest] = title.split(italicWord); return ( <> {before} {italicWord} {rest.join(italicWord)} ); } // ─── SmartNav : NavBar desktop ou MobileNav selon taille écran ─────────── function SmartNav({ current }) { const [isMobile, setIsMobile] = React.useState( () => typeof window !== 'undefined' && window.innerWidth < 820 ); React.useEffect(() => { const mq = window.matchMedia('(max-width: 819px)'); const handler = (e) => setIsMobile(e.matches); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, []); return isMobile ? : ; } // ─── Breadcrumb : Accueil › Accompagnements › ────────────────────── function Breadcrumb({ trail }) { return ( ); } // ─── Editorial masthead : eyebrow + huge italic-anchored title + lede ───── function EditorialMasthead({ eyebrow, title, italicWord, lede, monogram = true }) { return (
{eyebrow && (
{eyebrow}
)}

{renderItalic(title, italicWord)}

{lede && (

{lede}

)}
{monogram && (
Equilys · Dossier
)}
); } // ─── Layout : 2-column with sticky right "dossier" rail ─────────────────── function EditorialLayout({ children, sidebar }) { const [isMobile, setIsMobile] = React.useState( () => typeof window !== 'undefined' && window.innerWidth < 820 ); React.useEffect(() => { const mq = window.matchMedia('(max-width: 819px)'); const handler = (e) => setIsMobile(e.matches); mq.addEventListener('change', handler); return () => mq.removeEventListener('change', handler); }, []); return (
{children}
{!isMobile && ( )} {isMobile && (
{sidebar}
)}
); } // ─── Chapter : Roman numeral + title + body ─────────────────────────────── function Chapter({ numeral, kicker, title, italicWord, children, last = false }) { return (
{numeral}. {kicker && ( {kicker} )}

{renderItalic(title, italicWord)}

{children}
); } // ─── Body paragraph with optional drop cap (via CSS ::first-letter) ─────── function Lede({ children, dropCap = false }) { return (

{children}

); } // ─── Editorial list : hanging-number prose ──────────────────────────────── // `body` is optional — when absent, only the numbered title shows. function EditorialList({ items }) { return (
    {items.map((it, i) => (
  1. {String(i + 1).padStart(2, '0')}
    {it.title}
    {it.body && (

    {it.body}

    )}
    2. ))}
); } // ─── Timeline chapters : 3 movements, typographic only ──────────────────── // ─── Timeline chapters : typographic chapters (no week column) ──────────── // Each chapter accepts either body+bullets, or a `sections` array of // { body, bullets } pairs for multi-paragraph chapters. function TimelineChapters({ chapters }) { return (
{chapters.map((ch, i) => { const sections = ch.sections || [{ body: ch.body, bullets: ch.bullets }]; return (
{ch.kicker}

{ch.title}

{sections.map((sec, j) => (
0 ? 24 : 0, paddingTop: j > 0 ? 24 : 0, borderTop: j > 0 ? '1px dashed var(--eq-line-soft)' : 'none' }}> {sec.body && (

{sec.body}

)} {sec.bullets && (
    {sec.bullets.map((b, k) => (
  • {b}
    • ))}
)}
))}
); })}
); } // ─── Session flow, vertical : time → step ───────────────────────────────── function SessionFlowVertical({ steps }) { return (
{steps.map((s, i) => (
{s.time}

{s.title}

{s.body}

))}
); } // ─── Benefits : 2-col prose with gold tick ──────────────────────────────── function EditorialBenefits({ items }) { return (
{items.map((it, i) => (

{it.title}

{it.body}

))}
); } // ─── Sticky "dossier" sidebar : cream card with key facts + CTA ─────────── function PracticalSidebar({ reference, facts, ctaLabel, ctaHref = '#', secondaryCtaLabel, secondaryCtaHref = '#', footnote }) { return (
{/* Letterhead strip */}
Dossier · réf.
{reference}
{/* Facts list */}
{facts.map((f, i) => (
{f.label} {f.value}
))}
{/* CTA block */}
{ctaLabel && ( {ctaLabel} )} {secondaryCtaLabel && ( {secondaryCtaLabel} )} {footnote && (
{footnote}
)}
); } // ─── Closing CTA : typographic, not card-based ──────────────────────────── function EditorialCTA({ title, italicWord, body, primaryCta, primaryHref = '#', secondaryCta, secondaryHref = '#' }) { return (
Prochaine étape

{renderItalic(title, italicWord)}

{body && (

{body}

)}
{primaryCta && ( )} {secondaryCta && ( )}
); } Object.assign(window, { Breadcrumb, EditorialMasthead, EditorialLayout, Chapter, Lede, EditorialList, TimelineChapters, SessionFlowVertical, EditorialBenefits, PracticalSidebar, EditorialCTA });