// ============================================================
// MONARCH AVOCAT — Site (React, single-page artifact)
// ============================================================

const { useState, useEffect, useContext, createContext, Fragment, useRef } = React;

const HERO_IMG = "assets/hero.webp";
const CAL_LINK = "hugo-groslambert/diagnostic1h";
const CAL_ORIGIN = "https://cal.eu";
const CAL_EMBED_JS = "https://app.cal.eu/embed/embed.js";
const CAL_URL = `${CAL_ORIGIN}/${CAL_LINK}`;

// Charge le script d'embed Cal une seule fois et l'initialise (popup de réservation).
function useCalEmbed() {
  useEffect(() => {
    if (window.__monarchCalInit) return;
    window.__monarchCalInit = true;
    (function (C, A, L) {
      let p = function (a, ar) {a.q.push(ar);};
      let d = C.document;
      C.Cal = C.Cal || function () {
        let cal = C.Cal;let ar = arguments;
        if (!cal.loaded) {cal.ns = {};cal.q = cal.q || [];d.head.appendChild(d.createElement("script")).src = A;cal.loaded = true;}
        if (ar[0] === L) {
          const api = function () {p(api, arguments);};
          const namespace = ar[1];
          api.q = api.q || [];
          if (typeof namespace === "string") {cal.ns[namespace] = cal.ns[namespace] || api;p(cal.ns[namespace], ar);p(cal, ["initNamespace", namespace]);} else p(cal, ar);
          return;
        }
        p(cal, ar);
      };
    })(window, CAL_EMBED_JS, "init");
    try {
      window.Cal("init", { origin: CAL_ORIGIN });
      window.Cal("ui", { hideEventTypeDetails: false, layout: "month_view" });
    } catch (e) {}
  }, []);
}

// Ouvre la popup Cal ; repli sur l'ouverture d'onglet si le script n'est pas chargé.
function openCal(e) {
  if (window.Cal) {
    if (e) e.preventDefault();
    window.Cal("modal", { calLink: CAL_LINK, config: { layout: "month_view" } });
  }
  // sinon : le lien href s'ouvre normalement (repli)
}

const C = {
  blanc: "#FFFFFF",
  albatre: "#FAF9F6",
  encre: "#1B1D1C",
  ardoise: "#5B7C99",
  ardoiseFonce: "#3D5468",
  sauge: "#5C6F5C",
  saugeFonce: "#48584A",
  gris: "#737373",
  grisClair: "#9A9A95",
  trait: "#E4E1DA"
};

const FONTS = {
  serif: "'Fraunces', Georgia, serif",
  body: "'Archivo', system-ui, sans-serif",
  editorial: "'Spectral', Georgia, serif"
};

// ---------- i18n ----------
const LANGS = ["fr", "en", "es", "it"];
const LangContext = createContext({ lang: "fr", setLang: () => {} });

function useT() {
  const { lang } = useContext(LangContext);
  return (key) => {
    const T = window.MONARCH_TRANSLATIONS || {};
    const d = T[lang] || T.fr || {};
    return d[key] ?? (T.fr && T.fr[key]) ?? key;
  };
}

// Render translated HTML inline. tag defaults to span.
function TT({ k, tag = "span", style, className }) {
  const t = useT();
  return React.createElement(tag, {
    style,
    className,
    dangerouslySetInnerHTML: { __html: t(k) }
  });
}

// Inject Google Fonts + keyframes once
function useFonts() {
  useEffect(() => {
    const id = "monarch-fonts";
    if (document.getElementById(id)) return;
    const link = document.createElement("link");
    link.id = id;
    link.rel = "stylesheet";
    link.href =
    "https://fonts.googleapis.com/css2?family=Fraunces:opsz,wght@9..144,400;9..144,500;9..144,600&family=Spectral:wght@400;500&family=Archivo:wght@300;400;500;600&display=swap";
    document.head.appendChild(link);

    const style = document.createElement("style");
    style.textContent = `
      @keyframes monarchRise { from { opacity:0; transform:translateY(22px);} to {opacity:1; transform:translateY(0);} }
      @keyframes monarchFade { from { opacity:0;} to {opacity:1;} }
      html { scroll-behavior: smooth; box-sizing: border-box; }
      *, *::before, *::after { box-sizing: inherit; }
      body { margin: 0; overflow-x: hidden; }
      .monarch-article-body p { font-size: 18px; line-height: 1.78; color: #2c2e2d; margin: 0 0 22px; }
      .monarch-article-body h2 { font-family: 'Fraunces', Georgia, serif; font-size: 26px; font-weight: 500; letter-spacing: -0.01em; margin: 40px 0 14px; }
      .monarch-article-body h3 { font-family: 'Fraunces', Georgia, serif; font-size: 21px; font-weight: 500; margin: 32px 0 10px; }
      .monarch-article-body ul, .monarch-article-body ol { font-size: 18px; line-height: 1.78; color: #2c2e2d; padding-left: 22px; margin: 0 0 22px; }
      .monarch-article-body li { margin-bottom: 8px; }
      .monarch-article-body blockquote { font-family: 'Fraunces', Georgia, serif; font-size: 24px; line-height: 1.4; font-weight: 500; color: #3D5468; border-left: 2px solid #5B7C99; margin: 30px 0; padding: 4px 0 4px 26px; }
      .monarch-article-body a { color: #3D5468; text-decoration: underline; text-underline-offset: 3px; }
      .monarch-article-body img { width: 100%; height: auto; margin: 24px 0; }
      /* Template éditorial Publications */
      .monarch-article-tpl-body p { font-size: 18px; line-height: 1.8; color: #232524; margin: 0 0 24px; }
      .monarch-article-tpl-body h2 { color: #5C6F5C; font-size: clamp(24px,3vw,32px); margin: 48px 0 16px; }
      .monarch-article-tpl-body h3 { color: #5C6F5C; font-size: 22px; margin: 34px 0 10px; }
      .monarch-article-tpl-body blockquote { font-family: 'Fraunces', Georgia, serif; font-size: 21px; line-height: 1.5; font-weight: 500; color: #48584A; background: #F6F3EA; border-left: 3px solid #5C6F5C; margin: 32px 0; padding: 22px 26px; }
      .monarch-article-tpl-body blockquote p { font-family: 'Fraunces', Georgia, serif; font-size: 21px; color: #48584A; margin: 0; }
      .monarch-article-tpl-body a { color: #48584A; }
      .monarch-article-tpl-body ol { font-size: 18px; line-height: 1.8; color: #232524; padding-left: 24px; margin: 0 0 24px; }
      .monarch-article-tpl-body code { font-family: ui-monospace, monospace; font-size: 0.9em; background: #F6F3EA; padding: 2px 6px; border-radius: 3px; }
      .monarch-article-tpl-body strong { color: #1B1D1C; }
      @media (max-width: 900px) {
        .m-article-grid { grid-template-columns: 1fr !important; gap: 0 !important; }
        .m-article-toc { display: none !important; }
        .m-article-tpl > div { padding-left: 22px !important; padding-right: 22px !important; }
      }

      /* ----- Menu mobile ----- */
      .m-nav-toggle { display: none; }
      .m-nav-mobile { display: none; }
      .m-refrow-resp {}

      /* ======================= RESPONSIVE ======================= */
      @media (max-width: 880px) {
        .m-wrap { padding-left: 22px !important; padding-right: 22px !important; }

        /* header */
        .m-nav-desktop { display: none !important; }
        .m-nav-toggle { display: inline-flex !important; }
        .m-logo-sub { font-size: 8px !important; letter-spacing: 0.2em !important; }

        /* hero */
        .m-hero { padding-top: 96px !important; }
        .m-hero-grid { grid-template-columns: 1fr !important; min-height: 0 !important; }
        .m-hero-copy { padding: 6px 0 32px 0 !important; }
        .m-hero-copy h1 { font-size: clamp(38px, 11vw, 56px) !important; }
        .m-hero-img { display: none !important; }
        .m-hero-rule { display: none !important; }

        /* CTA bandeaux 1fr/auto */
        .m-2auto { grid-template-columns: 1fr !important; gap: 22px !important; }
        .m-2auto .m-cta-btn, .m-2auto .m-cta-btn > a, .m-2auto a.m-cta-btn { width: 100% !important; justify-content: center !important; }

        /* constat */
        .m-chaos { grid-template-columns: 1fr !important; gap: 30px !important; }

        /* méthode piliers */
        .m-pillar { grid-template-columns: 46px 1fr !important; gap: 16px !important; padding: 30px 0 !important; }

        /* process */
        .m-process-head { grid-template-columns: 1fr !important; gap: 14px !important; margin-bottom: 44px !important; }
        .m-process-steps { grid-template-columns: 1fr !important; gap: 4px !important; }
        .m-process-line { display: none !important; }
        .m-process-step { display: grid !important; grid-template-columns: 46px 1fr !important; gap: 16px; align-items: start; text-align: left !important; padding: 18px 0; border-bottom: 1px solid #E4E1DA; }
        .m-process-step > div:first-child { margin-bottom: 0 !important; justify-content: flex-start !important; }
        .m-process-step h3 { text-align: left !important; margin-top: 6px !important; margin-bottom: 0 !important; }
        .m-process-step p { display: none !important; }

        /* domaines */
        .m-domains { grid-template-columns: 1fr !important; }
        .m-domains > div { border-right: none !important; }

        /* doctrine */
        .m-doctrine { grid-template-columns: 1fr !important; gap: 26px !important; }

        /* profil */
        .m-profil { grid-template-columns: 1fr !important; gap: 40px !important; }
        .m-profil-aside { position: static !important; top: auto !important; }
        .m-profil-photo { max-width: 320px; }

        /* listes d'articles */
        .m-postrow { grid-template-columns: 1fr !important; gap: 8px !important; padding: 26px 0 !important; }
        .m-postrow-arrow { display: none !important; }
        .m-postrow-meta { display: flex !important; flex-direction: row !important; gap: 14px; align-items: center; }
        .m-postrow-meta span { margin-top: 0 !important; }

        /* livres blancs */
        .m-livre { grid-template-columns: 48px 1fr !important; gap: 16px !important; }
        .m-livre-btn { grid-column: 1 / -1 !important; width: 100% !important; }

        /* article */
        .m-article { padding-top: 110px !important; }
        .m-article > div, .m-legal > div { padding-left: 22px !important; padding-right: 22px !important; }
        .m-legal { padding-top: 112px !important; }

        /* sections : resserrer la hauteur */
        .m-sect { padding-top: 66px !important; padding-bottom: 66px !important; }
        .m-sect-lg { padding-top: 72px !important; padding-bottom: 72px !important; }
      }

      @media (max-width: 540px) {
        .m-wrap { padding-left: 18px !important; padding-right: 18px !important; }
        .m-wins { grid-template-columns: 1fr 1fr !important; gap: 22px 18px !important; }
        .m-blog-chips { gap: 8px !important; }
      }
      @media (max-width: 700px) {
        .m-refrow { grid-template-columns: 38px 1fr !important; gap: 14px !important; }
        .m-refrow-meta { display: none !important; }
        .m-refrow-ex { display: none !important; }
      }
    `;
    document.head.appendChild(style);
  }, []);
}

// ---------- Small UI atoms ----------
function Eyebrow({ children, color }) {
  return (
    <span
      style={{
        fontSize: 12,
        letterSpacing: "0.22em",
        textTransform: "uppercase",
        color: color || C.ardoise,
        fontWeight: 600
      }}>
      {children}
    </span>);
}

function PrimaryBtn({ textKey, children, full, big, small, style }) {
  const t = useT();
  const [hover, setHover] = useState(false);
  const label = textKey ? t(textKey) : children;
  return (
    <a
      href={CAL_URL}
      target="_blank"
      rel="noopener noreferrer"
      className="m-cta-btn"
      data-cal-link={CAL_LINK}
      data-cal-origin={CAL_ORIGIN}
      data-cal-config='{"layout":"month_view"}'
      onClick={openCal}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      style={{
        display: "inline-flex",
        alignItems: "center",
        gap: 10,
        fontFamily: FONTS.body,
        fontSize: big ? 16 : small ? 13.5 : 15,
        fontWeight: 600,
        letterSpacing: "0.01em",
        padding: big ? "19px 38px" : small ? "12px 20px" : "17px 30px",
        borderRadius: 2,
        background: hover ? C.saugeFonce : C.sauge,
        color: "#fff",
        cursor: "pointer",
        textDecoration: "none",
        transform: hover ? "translateY(-2px)" : "none",
        boxShadow: hover ? "0 14px 30px -12px rgba(76,88,74,.6)" : "none",
        transition: "all .35s cubic-bezier(.2,.7,.3,1)",
        width: full ? "100%" : "auto",
        justifyContent: full ? "center" : "flex-start",
        ...style
      }}>
      {label}{" "}
      <span style={{ transform: hover ? "translateX(5px)" : "none", transition: "transform .35s" }}>→</span>
    </a>);
}

function MonarchSite() {
  useFonts();
  useCalEmbed();
  const [page, setPage] = useState("home");
  const [slug, setSlug] = useState(null);
  const lang = "fr";

  useEffect(() => { document.documentElement.setAttribute("lang", "fr"); }, []);

  const go = (p, s = null) => {setPage(p);setSlug(s);window.scrollTo({ top: 0 });};

  return (
    <LangContext.Provider value={{ lang, setLang: () => {} }}>
      <div style={{ fontFamily: FONTS.body, color: C.encre, background: C.blanc, fontSize: 17, lineHeight: 1.7 }}>
        <Header page={page} go={go} />
        {page === "home" && <Home />}
        {page === "profil" && <Profil go={go} />}
        {page === "blog" && <Encyclopedie go={go} slug={slug} />}
        {page === "encyclo" && <Encyclopedie go={go} slug={slug} />}
        {page === "simulateur" && <SimulatorPage />}
        {page === "article" && <Article slug={slug} go={go} />}
        {page === "legal" && <Legal go={go} />}
        <Footer go={go} />
      </div>
    </LangContext.Provider>);
}

// ---------- Header ----------
function Header({ page, go }) {
  const t = useT();
  const [scrolled, setScrolled] = useState(false);
  const [menuOpen, setMenuOpen] = useState(false);
  useEffect(() => {
    const onScroll = () => setScrolled(window.scrollY > 40);
    window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);
  useEffect(() => {
    document.body.style.overflow = menuOpen ? "hidden" : "";
    return () => { document.body.style.overflow = ""; };
  }, [menuOpen]);
  const solid = scrolled || page !== "home" || menuOpen;

  const NavLink = ({ to, hash, children }) =>
  <button
    onClick={() => {
      if (hash) {
        if (page !== "home") {
          go("home");
          setTimeout(() => {
            const el = document.getElementById(hash);
            if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
          }, 80);
        } else {
          const el = document.getElementById(hash);
          if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 80, behavior: "smooth" });
        }
      } else {
        go(to);
      }
    }}
    style={{
      fontFamily: FONTS.body,
      fontSize: 14.5,
      fontWeight: 500,
      color: C.encre,
      opacity: page === to ? 1 : 0.78,
      background: "none",
      border: "none",
      cursor: "pointer",
      padding: 0,
      borderBottom: page === to ? `1px solid ${C.encre}` : "1px solid transparent",
      paddingBottom: 2
    }}>
      {children}
    </button>;

  return (
    <header
      style={{
        position: "fixed",
        top: 0,
        left: 0,
        right: 0,
        zIndex: 50,
        background: solid ? "rgba(255,255,255,.92)" : "transparent",
        backdropFilter: solid ? "blur(12px)" : "none",
        WebkitBackdropFilter: solid ? "blur(12px)" : "none",
        boxShadow: solid ? `0 1px 0 ${C.trait}` : "none",
        padding: solid ? "14px 0" : "22px 0",
        transition: "all .4s"
      }}>
      <div
        style={{
          maxWidth: 1240,
          margin: "0 auto",
          padding: "0 32px",
          display: "flex",
          alignItems: "center",
          justifyContent: "space-between",
          gap: 24
        }}>
        <button
          onClick={() => go("home")}
          style={{ display: "flex", flexDirection: "column", lineHeight: 1, background: "none", border: "none", cursor: "pointer", textAlign: "left", padding: 0 }}>
          <span style={{ fontFamily: FONTS.serif, fontSize: 23, fontWeight: 600, letterSpacing: "0.04em", color: C.encre }}>MONARCH</span>
          <span className="m-logo-sub" style={{ fontSize: 9.5, letterSpacing: "0.28em", textTransform: "uppercase", color: C.gris, marginTop: 5 }}>{t("logo.sub")}</span>
        </button>
        <nav className="m-nav-desktop" style={{ display: "flex", alignItems: "center", gap: 28 }}>
          <NavLink to="home" hash="methode">{t("nav.method")}</NavLink>
          <NavLink to="simulateur">Les simulateurs</NavLink>
          <NavLink to="profil">{t("nav.lawyer")}</NavLink>
          <NavLink to="encyclo">{t("nav.journal")}</NavLink>
          <PrimaryBtn textKey="nav.cta" small />
        </nav>
        <button
          className="m-nav-toggle"
          aria-label="Menu"
          onClick={() => setMenuOpen((o) => !o)}
          style={{ display: "none", flexDirection: "column", justifyContent: "center", gap: 5, width: 42, height: 42, background: "none", border: "none", cursor: "pointer", padding: 8 }}>
          <span style={{ display: "block", height: 2, width: 24, background: C.encre, borderRadius: 2, transition: "transform .3s", transform: menuOpen ? "translateY(7px) rotate(45deg)" : "none" }} />
          <span style={{ display: "block", height: 2, width: 24, background: C.encre, borderRadius: 2, opacity: menuOpen ? 0 : 1, transition: "opacity .2s" }} />
          <span style={{ display: "block", height: 2, width: 24, background: C.encre, borderRadius: 2, transition: "transform .3s", transform: menuOpen ? "translateY(-7px) rotate(-45deg)" : "none" }} />
        </button>
      </div>

      {menuOpen &&
        <div style={{ borderTop: `1px solid ${C.trait}`, background: "#fff", padding: "14px 22px 26px", display: "flex", flexDirection: "column", gap: 4, animation: "monarchFade .25s both" }}>
          <MobileLink onClick={() => { setMenuOpen(false); go("home"); setTimeout(() => { const el = document.getElementById("methode"); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 70, behavior: "smooth" }); }, 90); }}>{t("nav.method")}</MobileLink>
          <MobileLink onClick={() => { setMenuOpen(false); go("simulateur"); }}>Les simulateurs</MobileLink>
          <MobileLink onClick={() => { setMenuOpen(false); go("profil"); }}>{t("nav.lawyer")}</MobileLink>
          <MobileLink onClick={() => { setMenuOpen(false); go("encyclo"); }}>{t("nav.journal")}</MobileLink>
          <div style={{ marginTop: 14 }}><PrimaryBtn textKey="nav.cta" full /></div>
        </div>
      }
    </header>);
}

function MobileLink({ children, onClick }) {
  return (
    <button onClick={onClick} style={{ fontFamily: FONTS.body, fontSize: 18, fontWeight: 500, color: "#1B1D1C", background: "none", border: "none", textAlign: "left", padding: "14px 2px", borderBottom: "1px solid #EFEDE8", cursor: "pointer" }}>
      {children}
    </button>);
}

// ---------- HOME ----------
function Home() {
  return (
    <main>
      <Hero />
      <Chaos />
      <ConstatCta />
      <Pivot />
      <HeroCta />
      <Method />
      <Process />
      <Domains />
      <Doctrine />
      <FinalCta />
    </main>);
}

function Wrap({ children, style, className }) {
  return <div className={"m-wrap" + (className ? " " + className : "")} style={{ maxWidth: 1240, margin: "0 auto", padding: "0 32px", ...style }}>{children}</div>;
}

// ---------- SIMULATEURS (page dédiée) ----------
function SimulatorPage() {
  const groups = [
    { cat: "Trésorerie & rémunération", items: [
      { id: "extraction", label: "Sortir la trésorerie", comp: "HoldingDiagnostic" },
      { id: "remu", label: "Coût réel de la rémunération", comp: "RemunerationFrictionSimulator" },
      { id: "fees", label: "Honoraires entre sociétés", comp: "ManagementFeesSimulator" },
      { id: "capi", label: "Faire fructifier mes placements", comp: "FinancialCapitalizationSimulator" },
      { id: "temps", label: "Le levier du temps (intérêts composés)", comp: "CompoundInterestSimulator" }
    ] },
    { cat: "Vendre l'entreprise", items: [
      { id: "titresAbat", label: "Vendre mes titres", comp: "AdvancedSecuritiesSimulator" },
      { id: "fondsEI", label: "Vendre mon fonds (en nom propre)", comp: "SoleProprietorshipSaleSimulator" },
      { id: "fonds", label: "Vendre mon fonds (en société)", comp: "AssetSaleSimulator" },
      { id: "dmto", label: "Frais d'enregistrement de l'acheteur", comp: "TransferTaxSimulator" },
      { id: "apport", label: "Reporter l'impôt (apport-cession)", comp: "ApportCessionSimulator" },
      { id: "obo", label: "Me verser du cash (OBO)", comp: "OBOSimulator" },
      { id: "lboDette", label: "Racheter une entreprise (LBO)", comp: "CorporateBuyoutDebtSimulator" }
    ] },
    { cat: "Transmettre à ma famille", items: [
      { id: "dmtg", label: "Droits de donation & succession", comp: "DMTGSimulator" },
      { id: "dutreil", label: "Transmettre mon entreprise (Dutreil)", comp: "DutreilSimulator" },
      { id: "fbo", label: "Transmettre à un enfant repreneur", comp: "FamilyBuyOutSimulator" }
    ] },
    { cat: "Mon patrimoine", items: [
      { id: "immoDicho", label: "Revendre un bien immobilier", comp: "RealEstateDichotomySimulator" },
      { id: "oboImmo", label: "Rendre liquide un bien (OBO)", comp: "PersonalRealEstateOBOSimulator" },
      { id: "immoDette", label: "Acheter un bien locatif à crédit", comp: "RealEstateDebtSimulator" },
      { id: "matrimonial", label: "Protéger l'entreprise (mariage)", comp: "MatrimonialStressTest" }
    ] }
  ];
  const all = groups.flatMap((g) => g.items);
  const [sim, setSim] = useState("extraction");
  const active = all.find((t) => t.id === sim) || all[0];
  const Comp = typeof window !== "undefined" ? window[active.comp] : null;

  return (
    <main style={{ paddingTop: 88 }}>
      <div>
      <section style={{ background: C.albatre, borderBottom: `1px solid ${C.trait}`, padding: "40px 0 36px" }}>
        <div style={{ maxWidth: 1240, margin: "0 auto", padding: "0 32px" }}>
          <span style={{ fontFamily: FONTS.body, fontSize: 11.5, letterSpacing: "0.2em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>Les outils du cabinet</span>
          <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(30px,3.8vw,48px)", fontWeight: 500, lineHeight: 1.06, letterSpacing: "-0.015em", margin: "12px 0 4px" }}>Simulateurs d'ingénierie patrimoniale</h1>
          <p style={{ fontFamily: FONTS.body, fontSize: 16, color: C.gris, maxWidth: "34em", margin: "10px 0 30px" }}>Choisissez la problématique qui vous concerne. Chaque simulation est indicative et ouvre la voie à un échange sur-mesure.</p>
          <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(230px, 1fr))", gap: 26 }}>
            {groups.map((g) => (
              <div key={g.cat}>
                <div style={{ fontFamily: FONTS.body, fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: C.grisClair, fontWeight: 600, marginBottom: 12, paddingBottom: 8, borderBottom: `1px solid ${C.trait}` }}>{g.cat}</div>
                <div style={{ display: "flex", flexDirection: "column", gap: 8 }}>
                  {g.items.map((it) => {
                    const on = it.id === sim;
                    return (
                      <button key={it.id} onClick={() => { setSim(it.id); window.scrollTo({ top: 0 }); }}
                        style={{ textAlign: "left", fontFamily: FONTS.body, fontSize: 14.5, fontWeight: on ? 600 : 500, color: on ? "#fff" : C.encre, background: on ? C.encre : C.blanc, border: `1px solid ${on ? C.encre : C.trait}`, padding: "12px 14px", cursor: "pointer", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 8, transition: "all .2s" }}>
                        <span>{it.label}</span>
                        <span style={{ opacity: on ? 1 : 0.35 }}>→</span>
                      </button>);
                  })}
                </div>
              </div>
            ))}
          </div>
        </div>
      </section>
      {typeof Comp === "function" ? React.createElement(Comp) : null}
      </div>
    </main>);
}

// ---------- ENCYCLOPÉDIE (page dédiée) ----------
function Encyclopedie({ go, slug }) {
  if (typeof window === "undefined" || typeof window.EncyclopediePage !== "function") {
    return <main style={{ paddingTop: 140, paddingBottom: 120 }}><Wrap><p style={{ color: C.gris }}>Chargement de l'encyclopédie…</p></Wrap></main>;
  }
  return React.createElement(window.EncyclopediePage, { go, slug });
}

// ---------- LIVRES BLANCS (page dédiée) ----------
function LivresPage() {
  const livres = (typeof window !== "undefined" && window.MONARCH_LIVRES) || [];
  const [gate, setGate] = useState(null); // livre en attente de déblocage
  const Modal = window.MSC && window.MSC.LeadModal;

  const download = (livre) => {
    if (window.MSC) { window.MSC.leadCapture({ email: window.MSC.getLeadEmail() || "" }, "livre:" + livre.slug); }
    const a = document.createElement("a");
    a.href = livre.fichier; a.download = ""; a.target = "_blank"; a.rel = "noopener";
    document.body.appendChild(a); a.click(); a.remove();
  };
  const request = (livre) => {
    const has = window.MSC && window.MSC.getLeadEmail();
    if (has) { download(livre); } else { setGate(livre); }
  };

  return (
    <main style={{ paddingTop: 150, paddingBottom: 90 }}>
      {Modal && gate &&
        <Modal open={true} source={"livre:" + gate.slug}
          title="Recevez ce livre blanc" subtitle="Indiquez votre adresse e-mail pour télécharger ce document."
          cta="Télécharger le livre blanc" onClose={() => setGate(null)} onUnlock={() => { const l = gate; setGate(null); download(l); }} />}
      <Wrap>
        <Eyebrow>Ressources · Livres blancs</Eyebrow>
        <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(34px,4.4vw,58px)", fontWeight: 500, lineHeight: 1.06, letterSpacing: "-0.015em", maxWidth: "15em", margin: "16px 0 0" }}>
          Des guides de fond pour décider en connaissance de cause.
        </h1>
        <p style={{ fontFamily: FONTS.body, fontSize: 19, color: C.gris, maxWidth: "34em", marginTop: 22 }}>
          Téléchargez gratuitement nos analyses, en échange de votre adresse e-mail.
        </p>
        <div style={{ marginTop: 56, borderTop: `1px solid ${C.trait}` }}>
          {livres.map((l) => <LivreRow key={l.slug} livre={l} onGet={() => request(l)} />)}
          {livres.length === 0 && <p style={{ color: C.grisClair, padding: "40px 0", fontStyle: "italic" }}>Les premiers livres blancs arrivent bientôt.</p>}
        </div>
      </Wrap>
    </main>);
}

function LivreRow({ livre, onGet }) {
  const [hover, setHover] = useState(false);
  return (
    <div onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)} className="m-livre"
      style={{ display: "grid", gridTemplateColumns: "64px 1fr auto", gap: 28, alignItems: "center", padding: "30px 0", borderBottom: `1px solid ${C.trait}`, background: hover ? C.albatre : "transparent", transition: "background .3s" }}>
      <svg viewBox="0 0 48 60" width="48" height="60" aria-hidden="true">
        <rect x="6" y="4" width="36" height="52" fill="none" stroke={C.encre} strokeWidth="1.2" />
        <line x1="13" y1="16" x2="35" y2="16" stroke={C.ardoise} strokeWidth="1" />
        <line x1="13" y1="24" x2="35" y2="24" stroke={C.trait} strokeWidth="1" />
        <line x1="13" y1="31" x2="35" y2="31" stroke={C.trait} strokeWidth="1" />
        <line x1="13" y1="38" x2="28" y2="38" stroke={C.trait} strokeWidth="1" />
      </svg>
      <div>
        <span style={{ fontSize: 11, letterSpacing: "0.16em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>Livre blanc</span>
        <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,2.3vw,28px)", fontWeight: 500, lineHeight: 1.18, margin: "8px 0 8px", color: hover ? C.ardoiseFonce : C.encre, transition: "color .3s" }}>{livre.titre}</h2>
        <p style={{ fontFamily: FONTS.body, fontSize: 15, color: C.gris, lineHeight: 1.6, margin: 0, maxWidth: "44em" }}>{livre.sousTitre}</p>
      </div>
      <button onClick={onGet} className="m-livre-btn"
        style={{ fontFamily: FONTS.body, fontSize: 14.5, fontWeight: 600, color: "#fff", background: C.sauge, border: "none", borderRadius: 2, padding: "14px 22px", cursor: "pointer", whiteSpace: "nowrap" }}>
        Télécharger →
      </button>
    </div>);
}

function Hero() {
  const t = useT();
  return (
    <section className="m-hero" style={{ paddingTop: 120, position: "relative", overflow: "hidden" }}>
      <Wrap>
        <div
          className="m-hero-grid"
          style={{
            display: "grid",
            gridTemplateColumns: "1fr 1.04fr",
            alignItems: "end",
            minHeight: "calc(100vh - 120px)"
          }}>
          <div className="m-hero-copy" style={{ padding: "40px 44px 90px 0" }}>
            <div style={{ animation: "monarchRise .8s .1s both" }}>
              <Eyebrow>{t("hero.eyebrow")}</Eyebrow>
            </div>
            <h1
              style={{
                fontFamily: FONTS.serif,
                lineHeight: 1.08,
                letterSpacing: "-0.015em",
                margin: "24px 0 0",
                animation: "monarchRise .9s .25s both",
                fontSize: "65px",
                color: "rgb(17, 17, 17)",
                fontWeight: "400"
              }}>
              {t("hero.h1.l1")}
              <br />
              <span style={{ color: C.ardoiseFonce, fontWeight: 600 }}>{t("hero.h1.l2")}</span>
              <br />
              <span style={{ color: "rgb(17, 17, 17)", fontWeight: "400" }}>{t("hero.h1.l3_italic")}</span>
            </h1>
            <p
              style={{
                fontSize: 20,
                lineHeight: 1.6,
                fontWeight: 300,
                color: "#3a3d3b",
                maxWidth: "30em",
                margin: "30px 0 40px",
                animation: "monarchRise .9s .45s both"
              }}>{t("hero.body")}</p>
            <div style={{ display: "flex", alignItems: "center", gap: 24, flexWrap: "wrap", animation: "monarchRise .9s .6s both" }}>
              <PrimaryBtn textKey="hero.btn" />
              <a href="#methode" style={{ fontWeight: 500, color: C.ardoiseFonce, textDecoration: "none", borderBottom: `1px solid transparent` }}>
                {t("hero.seemethod")} →
              </a>
            </div>
            <div style={{ marginTop: 26, fontSize: 13.5, color: C.gris, display: "flex", alignItems: "center", gap: 10, animation: "monarchRise .9s .75s both" }}>
              <span style={{ width: 6, height: 6, borderRadius: "50%", background: C.sauge }} /> {t("hero.subnote")}
            </div>
          </div>
          <div
            className="m-hero-img"
            style={{
              position: "relative",
              alignSelf: "stretch",
              minHeight: "calc(100vh - 120px)",
              display: "flex",
              alignItems: "flex-end",
              justifyContent: "center",
              overflow: "visible",
              animation: "monarchFade 1.4s .4s both"
            }}>
            <div
              className="m-hero-rule"
              style={{
                position: "absolute",
                left: -40,
                top: "8%",
                bottom: 0,
                width: 1,
                background: `linear-gradient(to bottom, transparent, ${C.trait} 30%, ${C.trait} 80%, transparent)`
              }} />
            <img
              src={HERO_IMG}
              alt={t("hero.alt")}
              style={{ height: "100%", maxHeight: "94vh", width: "auto", maxWidth: "100%", objectFit: "contain", objectPosition: "bottom" }} />
          </div>
        </div>
      </Wrap>
    </section>);
}

function ConstatCta() {
  return (
    <section style={{ background: C.blanc, padding: "0" }}>
      <Wrap style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 24, padding: "48px 0", borderBottom: `1px solid ${C.trait}` }}>
        <TT
          tag="p"
          k="constatcta.text"
          style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,1.9vw,26px)", fontWeight: 500, lineHeight: 1.32, letterSpacing: "-0.01em", margin: 0, maxWidth: "30em" }} />
        <PrimaryBtn textKey="constatcta.btn" />
      </Wrap>
    </section>);
}

function HeroCta() {
  const t = useT();
  return (
    <section style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}` }}>
      <Wrap style={{ display: "flex", flexDirection: "column", alignItems: "center", textAlign: "center", gap: 22, padding: "48px 0" }}>
        <div>
          <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{t("herocta.eyebrow")}</span>
          <p style={{ fontFamily: FONTS.serif, fontSize: "clamp(22px,2.2vw,28px)", fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.01em", margin: "12px auto 0", maxWidth: "26em" }}>
            {t("herocta.text")}
          </p>
        </div>
        <PrimaryBtn textKey="herocta.btn" />
      </Wrap>
    </section>);
}

function Chaos() {
  const t = useT();
  const keys = ["chaos.item1", "chaos.item2", "chaos.item3", "chaos.item4"];
  return (
    <section className="m-sect-lg" style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}`, padding: "110px 0" }}>
      <Wrap className="m-chaos" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 80, alignItems: "start" }}>
        <div>
          <Eyebrow>{t("chaos.eyebrow")}</Eyebrow>
          <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", margin: "8px 0 0" }}>
            {t("chaos.title")}
          </h2>
          <p style={{ color: C.gris, marginTop: 18, maxWidth: "30em" }}>{t("chaos.sub")}</p>
        </div>
        <div style={{ marginTop: 14 }}>
          {keys.map((k, i) =>
          <div key={k} style={{ padding: "22px 0", borderBottom: i < 3 ? `1px solid ${C.trait}` : "none", display: "flex", gap: 18, alignItems: "flex-start" }}>
              <span style={{ fontFamily: FONTS.serif, fontSize: 15, color: C.grisClair, minWidth: 28 }}>{String(i + 1).padStart(2, "0")}</span>
              <TT tag="p" k={k} style={{ fontSize: 16.5, lineHeight: 1.6, margin: 0 }} />
            </div>
          )}
        </div>
      </Wrap>
    </section>);
}

function Pivot() {
  const t = useT();
  return (
    <section style={{ textAlign: "center", padding: "120px 0" }}>
      <Wrap>
        <Eyebrow>{t("pivot.eyebrow")}</Eyebrow>
        <TT
          tag="p"
          k="pivot.text"
          style={{ fontFamily: FONTS.serif, fontSize: "clamp(26px,3vw,40px)", lineHeight: 1.32, fontWeight: 500, letterSpacing: "-0.015em", maxWidth: "20em", margin: "26px auto 0" }} />
      </Wrap>
    </section>);
}

function Method() {
  const t = useT();
  const pillars = [
  { n: "01", tKey: "method.p1.t", bKey: "method.p1.b" },
  { n: "02", tKey: "method.p2.t", bKey: "method.p2.b" },
  { n: "03", tKey: "method.p3.t", bKey: "method.p3.b" }];

  return (
    <section style={{ background: C.encre, color: "#fff", padding: "110px 0" }}>
      <Wrap>
        <Eyebrow color={C.sauge}>{t("method.eyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: FONTS.serif, color: "#fff", fontSize: "clamp(28px,3.4vw,46px)", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "18px 0 0", maxWidth: "14em" }}>
          {t("method.title")}
        </h2>
        <p style={{ color: "#b9bbb8", fontSize: 18, maxWidth: "32em", marginTop: 22 }}>{t("method.sub")}</p>
        <div style={{ marginTop: 70 }}>
          {pillars.map((p, i) =>
          <div key={p.n} className="m-pillar" style={{ display: "grid", gridTemplateColumns: "90px 1fr", gap: 30, padding: "42px 0", borderTop: "1px solid rgba(255,255,255,.13)", borderBottom: i === 2 ? "1px solid rgba(255,255,255,.13)" : "none", alignItems: "start" }}>
              <div style={{ fontFamily: FONTS.serif, fontSize: 34, color: C.sauge, lineHeight: 1 }}>{p.n}</div>
              <div>
                <h3 style={{ fontFamily: FONTS.serif, fontSize: 25, color: "#fff", fontWeight: 500, marginBottom: 14, marginTop: 0 }}>{t(p.tKey)}</h3>
                <TT tag="p" k={p.bKey} style={{ color: "#b9bbb8", fontSize: 16.5, maxWidth: "40em", margin: 0 }} />
              </div>
            </div>
          )}
        </div>
      </Wrap>
    </section>);
}

function Process() {
  const t = useT();
  const steps = [
  { n: "01", tKey: "process.s1.t", bKey: "process.s1.b" },
  { n: "02", tKey: "process.s2.t", bKey: "process.s2.b" },
  { n: "03", tKey: "process.s3.t", bKey: "process.s3.b" },
  { n: "04", tKey: "process.s4.t", bKey: "process.s4.b" },
  { n: "05", tKey: "process.s5.t", bKey: "process.s5.b" }];

  return (
    <section id="methode" className="m-sect-lg" style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}`, padding: "110px 0" }}>
      <Wrap>
        <div className="m-process-head" style={{ display: "grid", gridTemplateColumns: "0.9fr 1.1fr", gap: 70, alignItems: "end", marginBottom: 70 }}>
          <div>
            <Eyebrow>{t("process.eyebrow")}</Eyebrow>
            <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", margin: "14px 0 0", maxWidth: "14em" }}>
              {t("process.title")}
            </h2>
          </div>
          <p style={{ color: C.gris, fontSize: 17, lineHeight: 1.7, margin: 0, maxWidth: "34em", justifySelf: "end" }}>{t("process.sub")}</p>
        </div>
        <div style={{ position: "relative" }}>
          <div className="m-process-line" style={{ position: "absolute", top: 22, left: "6%", right: "6%", height: 1, background: `linear-gradient(to right, transparent, ${C.trait} 8%, ${C.trait} 92%, transparent)` }} />
          <div className="m-process-steps" style={{ display: "grid", gridTemplateColumns: "repeat(5, 1fr)", gap: 28, position: "relative" }}>
            {steps.map((s) =>
            <div key={s.n} className="m-process-step" style={{ position: "relative" }}>
                <div style={{ display: "flex", justifyContent: "center", marginBottom: 22 }}>
                  <span style={{ width: 44, height: 44, borderRadius: "50%", background: C.albatre, border: `1px solid ${C.ardoise}`, color: C.ardoiseFonce, fontFamily: FONTS.serif, fontSize: 17, fontWeight: 500, display: "flex", alignItems: "center", justifyContent: "center" }}>{s.n}</span>
                </div>
                <h3 style={{ fontFamily: FONTS.serif, fontSize: 20, fontWeight: 500, margin: "0 0 12px", letterSpacing: "-0.01em", textAlign: "center" }}>{t(s.tKey)}</h3>
                <p style={{ fontSize: 14.5, color: C.gris, lineHeight: 1.6, margin: 0, textAlign: "center" }}>{t(s.bKey)}</p>
              </div>
            )}
          </div>
        </div>
        <div style={{ marginTop: 56, display: "flex", alignItems: "center", justifyContent: "space-between", gap: 40, flexWrap: "wrap", padding: "36px 0 0", borderTop: `1px solid ${C.trait}` }}>
          <p style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,1.9vw,26px)", color: C.encre, fontWeight: 500, lineHeight: 1.35, margin: 0, maxWidth: "24em", letterSpacing: "-0.01em" }}>
            {t("process.ctaText")}
          </p>
          <PrimaryBtn textKey="process.ctaBtn" />
        </div>
      </Wrap>
    </section>);
}

function Domains() {
  const t = useT();
  const ds = [
  { nKey: "domains.d1.n", tKey: "domains.d1.t", bKey: "domains.d1.b" },
  { nKey: "domains.d2.n", tKey: "domains.d2.t", bKey: "domains.d2.b" },
  { nKey: "domains.d3.n", tKey: "domains.d3.t", bKey: "domains.d3.b" }];

  return (
    <section id="domaines" className="m-sect-lg" style={{ padding: "110px 0" }}>
      <Wrap>
        <Eyebrow>{t("domains.eyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.4vw,44px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", marginTop: 16, maxWidth: "16em" }}>
          {t("domains.title")}
        </h2>
        <div className="m-domains" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", marginTop: 60, borderTop: `1px solid ${C.trait}` }}>
          {ds.map((d, i) =>
          <div key={d.nKey} style={{ padding: "42px 38px 50px", borderBottom: `1px solid ${C.trait}`, borderRight: i < 2 ? `1px solid ${C.trait}` : "none", display: "flex", flexDirection: "column" }}>
              <span style={{ fontSize: 12, letterSpacing: "0.2em", color: C.ardoise, fontWeight: 600 }}>{t(d.nKey)}</span>
              <h3 style={{ fontFamily: FONTS.serif, fontSize: 23, fontWeight: 500, margin: "20px 0 14px" }}>{t(d.tKey)}</h3>
              <p style={{ fontSize: 15.5, color: C.gris, lineHeight: 1.62, margin: 0, flex: 1 }}>{t(d.bKey)}</p>
              <a href={CAL_URL} target="_blank" rel="noopener noreferrer" data-cal-link={CAL_LINK} data-cal-origin={CAL_ORIGIN} data-cal-config='{"layout":"month_view"}' onClick={openCal} style={{ marginTop: 26, fontSize: 14, fontWeight: 600, color: C.ardoiseFonce, textDecoration: "none", letterSpacing: "0.02em", display: "inline-flex", alignItems: "center", gap: 8, alignSelf: "flex-start", borderBottom: `1px solid ${C.ardoise}33`, paddingBottom: 3 }}>
                {t("domains.discuss")} <span aria-hidden="true">→</span>
              </a>
            </div>
          )}
        </div>
        <div className="m-2auto" style={{ marginTop: 56, padding: "36px 38px", background: C.albatre, border: `1px solid ${C.trait}`, display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center" }}>
          <div>
            <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{t("domains.cta.eyebrow")}</span>
            <p style={{ fontFamily: FONTS.serif, fontSize: "clamp(20px,2vw,26px)", fontWeight: 500, lineHeight: 1.3, margin: "10px 0 0", letterSpacing: "-0.01em", maxWidth: "32em" }}>
              {t("domains.cta.text")}
            </p>
          </div>
          <PrimaryBtn textKey="domains.cta.btn" />
        </div>
      </Wrap>
    </section>);
}

function Doctrine() {
  const t = useT();
  return (
    <section className="m-sect" style={{ background: C.albatre, borderTop: `1px solid ${C.trait}`, padding: "80px 0" }}>
      <Wrap className="m-doctrine" style={{ display: "grid", gridTemplateColumns: "0.85fr 1.15fr", gap: 70, alignItems: "center" }}>
        <div style={{ fontWeight: "400", fontFamily: "Archivo" }}>
          <Eyebrow>{t("doctrine.eyebrow")}</Eyebrow>
          <p style={{ color: C.gris, marginTop: 18, fontWeight: "400" }}>{t("doctrine.sub")}</p>
        </div>
        <div>
          <blockquote style={{ fontFamily: FONTS.serif, fontSize: "clamp(24px,2.7vw,34px)", lineHeight: 1.4, fontWeight: 500, letterSpacing: "-0.01em", margin: 0 }}>
            <span style={{ color: C.ardoise, fontSize: "1.3em", lineHeight: 0 }}>«&nbsp;</span>
            {t("doctrine.quote")}
            <span style={{ color: C.ardoise, fontSize: "1.3em", lineHeight: 0 }}>&nbsp;»</span>
          </blockquote>
          <div style={{ marginTop: 24, fontSize: 14, color: C.gris, letterSpacing: "0.04em" }}>{t("doctrine.attr")}</div>
        </div>
      </Wrap>
    </section>);
}

function FinalCta({ titleKey, textKey }) {
  const t = useT();
  return (
    <section id="contact" className="m-sect-lg" style={{ background: C.encre, color: "#fff", textAlign: "center", padding: "130px 0" }}>
      <Wrap>
        <Eyebrow color={C.sauge}>{t("finalcta.eyebrow")}</Eyebrow>
        <h2 style={{ fontFamily: FONTS.serif, color: "#fff", fontSize: "clamp(32px,4.2vw,58px)", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "22px auto 0", maxWidth: "16em" }}>
          {t(titleKey || "finalcta.title")}
        </h2>
        <p style={{ color: "#b9bbb8", fontSize: 19, maxWidth: "34em", margin: "26px auto 42px" }}>
          {t(textKey || "finalcta.text")}
        </p>
        <PrimaryBtn big textKey="finalcta.btn" />
        <div style={{ marginTop: 24, fontSize: 13.5, color: "#8a8c89" }}>{t("finalcta.subnote")}</div>
      </Wrap>
    </section>);
}

// ---------- PROFIL ----------
function Profil({ go }) {
  const t = useT();
  return (
    <main>
      <section style={{ paddingTop: 140, paddingBottom: 30 }}>
        <Wrap>
          <Eyebrow>{t("profil.eyebrow")}</Eyebrow>
          <div className="m-profil" style={{ display: "grid", gridTemplateColumns: "1fr 1.4fr", gap: 70, alignItems: "start", marginTop: 36 }}>
            <aside className="m-profil-aside" style={{ position: "sticky", top: 110 }}>
              <figure className="m-profil-photo" style={{ margin: "0 0 28px", position: "relative" }}>
                <div style={{ position: "absolute", inset: "12px -12px -12px 12px", background: C.albatre, border: `1px solid ${C.trait}`, zIndex: 0 }} />
                <img
                  src="assets/hugo.jpg"
                  alt="Portrait de Hugo Groslambert"
                  style={{ position: "relative", display: "block", width: "100%", height: "auto", aspectRatio: "4 / 5", objectFit: "cover", objectPosition: "center top", filter: "grayscale(15%) contrast(1.02)", zIndex: 1 }} />
              </figure>
              <div style={{ fontFamily: FONTS.serif, fontSize: 34, fontWeight: 600, lineHeight: 1.1 }}>{t("profil.name1")}<br />{t("profil.name2")}</div>
              <div style={{ color: C.ardoise, fontWeight: 600, marginTop: 10, fontSize: 15, letterSpacing: "0.03em" }}>{t("profil.role")}</div>
              <TT
                tag="div"
                k="profil.bar"
                style={{ marginTop: 26, fontSize: 14.5, color: C.gris, lineHeight: 1.9, borderTop: `1px solid ${C.trait}`, paddingTop: 22 }} />
              <div style={{ marginTop: 30 }}><PrimaryBtn full small textKey="profil.cta" /></div>
            </aside>
            <div>
              <TT
                tag="p"
                k="profil.intro"
                style={{ fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", marginBottom: 22, marginTop: 0, fontWeight: 400 }} />
              <TT tag="p" k="profil.p1" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <TT tag="p" k="profil.p2" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />

              <div className="m-wins" style={{ display: "grid", gridTemplateColumns: "repeat(3,1fr)", gap: 40, margin: "50px 0", padding: "42px 0", borderTop: `1px solid ${C.trait}`, borderBottom: `1px solid ${C.trait}` }}>
                <Win v={t("profil.win1.v")} l={t("profil.win1.l")} />
                <Win v={t("profil.win2.v")} l={t("profil.win2.l")} />
                <Win v={<>{t("profil.win3.v")}<span style={{ fontSize: ".5em" }}> {t("profil.win3.unit")}</span></>} l={t("profil.win3.l")} />
              </div>

              <div className="m-2auto" style={{ display: "grid", gridTemplateColumns: "1fr auto", gap: 40, alignItems: "center", background: C.albatre, border: `1px solid ${C.trait}`, padding: "32px 38px", margin: "0 0 56px" }}>
                <div>
                  <span style={{ fontSize: 11, letterSpacing: "0.22em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{t("profil.midcta.eyebrow")}</span>
                  <p style={{ fontFamily: FONTS.serif, fontSize: 22, fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.01em", margin: "10px 0 0", maxWidth: "22em" }}>
                    {t("profil.midcta.text")}
                  </p>
                </div>
                <PrimaryBtn textKey="profil.midcta.btn" />
              </div>

              <ProseH>{t("profil.h1")}</ProseH>
              <TT tag="p" k="profil.b1" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <ProseH>{t("profil.h2")}</ProseH>
              <TT tag="p" k="profil.b2" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <ProseH>{t("profil.h3")}</ProseH>
              <TT tag="p" k="profil.b3" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
              <ProseH>{t("profil.h4")}</ProseH>
              <TT tag="p" k="profil.b4" style={{ marginBottom: 22, marginTop: 0, fontSize: 18, lineHeight: 1.72, color: "#2c2e2d", fontWeight: 400 }} />
            </div>
          </div>
        </Wrap>
      </section>
      <FinalCta titleKey="profil.finalcta.title" textKey="profil.finalcta.text" />
    </main>);
}

function ProseH({ children }) {
  return <h3 style={{ fontFamily: FONTS.serif, fontSize: 24, fontWeight: 500, margin: "42px 0 16px" }}>{children}</h3>;
}

function Win({ v, l }) {
  return (
    <div>
      <div style={{ fontFamily: FONTS.serif, fontSize: 42, fontWeight: 500, color: C.ardoiseFonce, lineHeight: 1 }}>{v}</div>
      <div style={{ fontSize: 14, color: C.gris, marginTop: 10, lineHeight: 1.5 }}>{l}</div>
    </div>);
}

// ---------- BLOG ----------
// minutes de lecture (~200 mots/min) à partir du HTML
function readingTime(html) {
  const text = (html || "").replace(/<[^>]+>/g, " ").replace(/\s+/g, " ").trim();
  const words = text ? text.split(" ").length : 0;
  return Math.max(1, Math.round(words / 200));
}

function allCategories() {
  const defined = (window.MONARCH_CATEGORIES || []).slice();
  const used = [];
  (window.MONARCH_POSTS || []).forEach((p) => { if (p.cat && !used.includes(p.cat)) used.push(p.cat); });
  // catégories définies d'abord (dans l'ordre), puis toute catégorie utilisée non listée
  used.forEach((c) => { if (!defined.includes(c)) defined.push(c); });
  return defined.filter((c) => used.includes(c)); // ne garder que celles ayant au moins 1 article
}

function Blog({ go }) {
  const t = useT();
  const all = (window.MONARCH_POSTS || []).slice();
  const cats = allCategories();
  const [query, setQuery] = useState("");

  const q = query.trim().toLowerCase();
  const match = (p) => {
    if (!q) return true;
    const hay = `${p.title} ${p.excerpt} ${p.cat} ${(p.body || "").replace(/<[^>]+>/g, " ")}`.toLowerCase();
    return hay.includes(q);
  };
  const matched = all.filter(match);
  const num = (n) => String(n).padStart(2, "0");

  // entrées par thème (ordre des catégories = ordre du « livre »)
  const chapters = cats.map((c) => ({
    cat: c,
    entries: matched.filter((p) => p.cat === c).sort((a, b) => (a.iso || "").localeCompare(b.iso || ""))
  })).filter((ch) => ch.entries.length > 0);

  return (
    <main>
      <section style={{ paddingTop: 140, paddingBottom: 30 }}>
        <Wrap>
          <Eyebrow>{t("blog.eyebrow")}</Eyebrow>
          <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(36px,4.6vw,62px)", fontWeight: 500, lineHeight: 1.06, letterSpacing: "-0.018em", maxWidth: "13em", marginTop: 16 }}>
            {t("blog.h1")}
          </h1>
          <p style={{ fontSize: 19, color: C.gris, maxWidth: "36em", marginTop: 22, lineHeight: 1.6 }}>{t("blog.sub")}</p>

          {all.length === 0 ?
            <p style={{ marginTop: 60, paddingTop: 40, borderTop: `1px solid ${C.trait}`, color: C.grisClair, fontStyle: "italic" }}>{t("blog.empty")}</p> :
            <React.Fragment>
              <div style={{ position: "relative", maxWidth: 460, marginTop: 44 }}>
                <span style={{ position: "absolute", left: 16, top: "50%", transform: "translateY(-50%)", color: C.grisClair, fontSize: 16 }}>⌕</span>
                <input value={query} onChange={(e) => setQuery(e.target.value)} placeholder={t("blog.search")}
                  style={{ width: "100%", fontFamily: FONTS.body, fontSize: 15, color: C.encre, background: "#fff", border: `1px solid ${C.trait}`, borderRadius: 2, padding: "13px 16px 13px 40px", outline: "none" }} />
              </div>

              {chapters.length === 0 ?
                <p style={{ marginTop: 44, paddingTop: 36, borderTop: `1px solid ${C.trait}`, color: C.grisClair, fontStyle: "italic" }}>{t("blog.noresult")}</p> :
                <div style={{ marginTop: 56 }}>
                  {chapters.map((ch, ci) =>
                    <section key={ch.cat} style={{ marginBottom: 8, borderTop: `1px solid ${C.encre}`, paddingTop: 26, marginTop: ci ? 48 : 0 }}>
                      <div style={{ display: "grid", gridTemplateColumns: "auto 1fr", gap: 18, alignItems: "baseline", marginBottom: 18 }}>
                        <span style={{ fontFamily: FONTS.serif, fontSize: "clamp(28px,3.6vw,40px)", fontWeight: 500, color: C.sauge, lineHeight: 1 }}>{num(ci + 1)}</span>
                        <div>
                          <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(22px,2.6vw,30px)", fontWeight: 500, letterSpacing: "-0.01em", margin: 0 }}>{ch.cat}</h2>
                          <span style={{ fontFamily: FONTS.body, fontSize: 13, color: C.grisClair }}>{ch.entries.length} {ch.entries.length > 1 ? "références" : "référence"}</span>
                        </div>
                      </div>
                      <div style={{ borderTop: `1px solid ${C.trait}` }}>
                        {ch.entries.map((p, ei) =>
                          <RefRow key={p.slug} num={num(ci + 1) + "." + (ei + 1)} post={p} onOpen={() => go("article", p.slug)} />
                        )}
                      </div>
                    </section>
                  )}
                </div>
              }
            </React.Fragment>
          }
        </Wrap>
      </section>
    </main>);
}

function RefRow({ num, post, onOpen }) {
  const [hover, setHover] = useState(false);
  const mins = readingTime(post.body);
  return (
    <div onClick={onOpen} onMouseEnter={() => setHover(true)} onMouseLeave={() => setHover(false)}
      className="m-refrow"
      style={{ display: "grid", gridTemplateColumns: "62px 1fr auto", gap: 22, alignItems: "center", padding: "22px 16px 22px 0", paddingLeft: 16, borderBottom: `1px solid ${C.trait}`, cursor: "pointer", background: hover ? C.albatre : "transparent", transition: "background .25s" }}>
      <span style={{ fontFamily: FONTS.serif, fontSize: 16, color: C.grisClair, letterSpacing: "0.02em" }}>{num}</span>
      <div>
        <h3 style={{ fontFamily: FONTS.serif, fontSize: "clamp(18px,2vw,23px)", fontWeight: 500, lineHeight: 1.25, margin: 0, color: hover ? C.sauge : C.encre, transition: "color .25s" }}>{post.title}</h3>
        {post.excerpt && <p className="m-refrow-ex" style={{ fontFamily: FONTS.body, fontSize: 14.5, color: C.gris, lineHeight: 1.55, margin: "6px 0 0", maxWidth: "46em" }}>{post.excerpt}</p>}
      </div>
      <span className="m-refrow-meta" style={{ fontFamily: FONTS.body, fontSize: 13, color: C.grisClair, whiteSpace: "nowrap", display: "flex", alignItems: "center", gap: 14 }}>
        {mins} min
        <span style={{ fontSize: 18, color: hover ? C.sauge : C.grisClair, transition: "all .25s", transform: hover ? "translateX(4px)" : "none" }}>→</span>
      </span>
    </div>);
}

function PostRow({ post, onOpen, t }) {
  const [hover, setHover] = useState(false);
  const mins = readingTime(post.body);
  return (
    <div
      onClick={onOpen}
      onMouseEnter={() => setHover(true)}
      onMouseLeave={() => setHover(false)}
      className="m-postrow"
      style={{ display: "grid", gridTemplateColumns: "160px 1fr 40px", gap: 40, padding: "38px 0", borderBottom: `1px solid ${C.trait}`, alignItems: "center", background: hover ? C.albatre : "transparent", transition: "background .3s", cursor: "pointer" }}>
      <div className="m-postrow-meta" style={{ fontSize: 13, color: C.grisClair, letterSpacing: "0.04em" }}>
        {post.date}
        <span style={{ display: "block", marginTop: 6, color: C.grisClair }}>{mins} {t ? t("blog.minread") : "min"}</span>
      </div>
      <div>
        <span style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600, display: "block", marginBottom: 8 }}>{post.cat}</span>
        <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(22px,2.4vw,30px)", fontWeight: 500, lineHeight: 1.18, color: hover ? C.ardoiseFonce : C.encre, transition: "color .3s", margin: "0 0 10px" }}>{post.title}</h2>
        {post.excerpt && <p style={{ fontSize: 15.5, color: C.gris, lineHeight: 1.6, margin: 0, maxWidth: "44em" }}>{post.excerpt}</p>}
      </div>
      <div className="m-postrow-arrow" style={{ fontSize: 22, color: hover ? C.ardoise : C.grisClair, transition: "all .3s", textAlign: "right", transform: hover ? "translateX(6px)" : "none" }}>→</div>
    </div>);
}

// ---------- ARTICLE (template éditorial) ----------
const ARTICLE_VERT = "#5C6F5C"; // vert sauge (palette du site)
const ARTICLE_IVOIRE = "#F6F3EA"; // ivoire

function slugifyHeading(s) {
  return (s || "").toLowerCase().normalize("NFD").replace(/[\u0300-\u036f]/g, "").replace(/[^a-z0-9]+/g, "-").replace(/^-+|-+$/g, "").slice(0, 60);
}

function Article({ slug, go }) {
  const t = useT();
  const posts = window.MONARCH_POSTS || [];
  const post = posts.find((p) => p.slug === slug);
  const related = post ? posts.filter((p) => p.slug !== post.slug && p.cat === post.cat).sort((a, b) => (b.iso || "").localeCompare(a.iso || "")).slice(0, 3) : [];

  const bodyRef = useRef(null);
  const [toc, setToc] = useState([]);
  const [activeId, setActiveId] = useState("");
  const [openFaq, setOpenFaq] = useState(0);

  // Construire le sommaire à partir des <h2> du corps + scroll-spy
  useEffect(() => {
    if (!post || !bodyRef.current) return;
    const hs = Array.from(bodyRef.current.querySelectorAll("h2"));
    const items = hs.map((h, i) => {
      const id = h.id || (slugifyHeading(h.textContent) || "section-" + i);
      h.id = id;
      h.style.scrollMarginTop = "100px";
      return { id, text: h.textContent };
    });
    setToc(items);
    if (!items.length) return;
    const obs = new IntersectionObserver((entries) => {
      entries.forEach((e) => { if (e.isIntersecting) setActiveId(e.target.id); });
    }, { rootMargin: "-90px 0px -65% 0px", threshold: 0 });
    hs.forEach((h) => obs.observe(h));
    return () => obs.disconnect();
  }, [post]);

  // JSON-LD (Article + FAQPage)
  useEffect(() => {
    if (!post) return;
    const faq = Array.isArray(post.faq) ? post.faq : [];
    const graph = [{
      "@type": "Article",
      "headline": post.title,
      "datePublished": post.iso || undefined,
      "articleSection": post.cat || undefined,
      "author": { "@type": "Person", "name": "Hugo Groslambert" },
      "publisher": { "@type": "Organization", "name": "Monarch Avocat" }
    }];
    if (faq.length) graph.push({
      "@type": "FAQPage",
      "mainEntity": faq.map((f) => ({ "@type": "Question", "name": f.q, "acceptedAnswer": { "@type": "Answer", "text": f.a } }))
    });
    const el = document.createElement("script");
    el.type = "application/ld+json";
    el.id = "monarch-article-jsonld";
    el.textContent = JSON.stringify({ "@context": "https://schema.org", "@graph": graph });
    document.getElementById("monarch-article-jsonld") && document.getElementById("monarch-article-jsonld").remove();
    document.head.appendChild(el);
    return () => { el.remove(); };
  }, [post]);

  if (!post) {
    return (
      <main>
        <section style={{ paddingTop: 160, paddingBottom: 120 }}>
          <Wrap>
            <p style={{ color: C.gris }}>Article introuvable.</p>
            <button onClick={() => go("blog")} style={{ marginTop: 16, color: C.ardoiseFonce, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body, fontSize: 15, fontWeight: 600, padding: 0 }}>← {t("blog.back")}</button>
          </Wrap>
        </section>
      </main>);
  }

  const essentiel = post.essentiel ? (Array.isArray(post.essentiel) ? post.essentiel : [post.essentiel]) : [];
  const faq = Array.isArray(post.faq) ? post.faq : [];

  return (
    <main>
      <article className="m-article m-article-tpl" style={{ paddingTop: 132, paddingBottom: 40 }}>
        <div style={{ maxWidth: 1180, margin: "0 auto", padding: "0 32px" }}>
          <button onClick={() => go("blog")} style={{ color: ARTICLE_VERT, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body, fontSize: 14, fontWeight: 600, padding: 0, letterSpacing: "0.02em", marginBottom: 30, display: "inline-flex", alignItems: "center", gap: 8 }}>← {t("blog.back")}</button>

          {/* Header */}
          <header style={{ maxWidth: 800 }}>
            <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: ARTICLE_VERT, fontWeight: 700, display: "block" }}>{post.cat}</span>
            <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(34px,4.6vw,60px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.018em", margin: "16px 0 20px", color: ARTICLE_VERT }}>{post.title}</h1>
            <div style={{ fontSize: 14, color: C.gris, letterSpacing: "0.03em", display: "flex", gap: 14, alignItems: "center", flexWrap: "wrap" }}>
              <span>{post.date}</span>
              <span style={{ width: 3, height: 3, borderRadius: "50%", background: C.grisClair }} />
              <span>{readingTime(post.body)} {t("blog.minread")}</span>
            </div>
          </header>

          {post.cover &&
            <img src={post.cover} alt="" style={{ width: "100%", height: "auto", objectFit: "cover", margin: "32px 0 0", aspectRatio: "16 / 7", borderRadius: 2 }} />
          }

          {/* Corps : ToC sticky + article */}
          <div className="m-article-grid" style={{ display: "grid", gridTemplateColumns: "230px minmax(0,1fr)", gap: 56, marginTop: 44, alignItems: "start" }}>
            {/* Sommaire sticky */}
            <aside className="m-article-toc" style={{ position: "sticky", top: 100 }}>
              {toc.length > 0 &&
                <nav style={{ borderLeft: `1px solid ${C.trait}`, paddingLeft: 18 }}>
                  <div style={{ fontSize: 11, letterSpacing: "0.18em", textTransform: "uppercase", color: C.grisClair, fontWeight: 600, marginBottom: 14 }}>Sommaire</div>
                  <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 11 }}>
                    {toc.map((it) => {
                      const on = activeId === it.id;
                      return (
                        <li key={it.id}>
                          <a href={"#" + it.id} onClick={(e) => { e.preventDefault(); const el = document.getElementById(it.id); if (el) window.scrollTo({ top: el.getBoundingClientRect().top + window.scrollY - 90, behavior: "smooth" }); }}
                            style={{ fontFamily: FONTS.body, fontSize: 13.5, lineHeight: 1.45, textDecoration: "none", color: on ? ARTICLE_VERT : C.gris, fontWeight: on ? 600 : 500, transition: "color .2s", display: "block" }}>
                            {it.text}
                          </a>
                        </li>);
                    })}
                  </ul>
                </nav>}
            </aside>

            {/* Colonne de lecture */}
            <div style={{ maxWidth: 720 }}>
              {/* L'essentiel */}
              {essentiel.length > 0 &&
                <section aria-label="L'essentiel" style={{ background: ARTICLE_IVOIRE, border: `1px solid ${C.trait}`, borderLeft: `3px solid ${ARTICLE_VERT}`, padding: "24px 28px", marginBottom: 40 }}>
                  <div style={{ fontSize: 11.5, letterSpacing: "0.2em", textTransform: "uppercase", color: ARTICLE_VERT, fontWeight: 700, marginBottom: 12 }}>L'essentiel</div>
                  <ul style={{ margin: 0, padding: 0, listStyle: "none", display: "flex", flexDirection: "column", gap: 10 }}>
                    {essentiel.map((e, i) =>
                      <li key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start", fontFamily: FONTS.body, fontSize: 15.5, lineHeight: 1.6, color: "#2c2e2d" }}>
                        <span style={{ color: ARTICLE_VERT, fontWeight: 700, marginTop: 1 }}>—</span><span dangerouslySetInnerHTML={{ __html: e }} />
                      </li>)}
                  </ul>
                </section>}

              <div ref={bodyRef} className="monarch-article-body monarch-article-tpl-body" dangerouslySetInnerHTML={{ __html: post.body || "" }} />

              {/* FAQ */}
              {faq.length > 0 &&
                <section aria-label="Questions fréquentes" style={{ marginTop: 56 }}>
                  <h2 style={{ fontFamily: FONTS.serif, fontSize: "clamp(24px,3vw,32px)", fontWeight: 500, color: ARTICLE_VERT, letterSpacing: "-0.01em", margin: "0 0 22px" }}>Questions fréquentes</h2>
                  <div style={{ borderTop: `1px solid ${C.trait}` }}>
                    {faq.map((f, i) => {
                      const open = openFaq === i;
                      return (
                        <div key={i} style={{ borderBottom: `1px solid ${C.trait}` }}>
                          <button onClick={() => setOpenFaq(open ? -1 : i)} aria-expanded={open}
                            style={{ width: "100%", textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 18, padding: "20px 0", background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.serif, fontSize: 18, fontWeight: 500, color: C.encre }}>
                            <span>{f.q}</span>
                            <span style={{ flexShrink: 0, color: ARTICLE_VERT, fontSize: 22, transition: "transform .25s", transform: open ? "rotate(45deg)" : "none" }}>+</span>
                          </button>
                          {open &&
                            <div style={{ fontFamily: FONTS.body, fontSize: 15.5, lineHeight: 1.7, color: "#2c2e2d", padding: "0 0 22px", maxWidth: "44em" }} dangerouslySetInnerHTML={{ __html: f.a }} />}
                        </div>);
                    })}
                  </div>
                </section>}

              {/* CTA */}
              <section style={{ marginTop: 56, paddingTop: 32, borderTop: `1px solid ${C.trait}`, display: "flex", flexWrap: "wrap", alignItems: "center", justifyContent: "space-between", gap: 18 }}>
                <p style={{ fontFamily: FONTS.serif, fontSize: 19, fontWeight: 500, lineHeight: 1.35, letterSpacing: "-0.01em", color: C.encre, margin: 0, maxWidth: "20em" }}>
                  Une question sur votre situation ?
                </p>
                <a href={CAL_URL} target="_blank" rel="noopener noreferrer" data-cal-link={CAL_LINK} data-cal-origin={CAL_ORIGIN} data-cal-config='{"layout":"month_view"}'
                  style={{ display: "inline-flex", alignItems: "center", gap: 8, fontFamily: FONTS.body, fontSize: 14, fontWeight: 600, color: "#fff", background: C.sauge, padding: "12px 22px", borderRadius: 2, textDecoration: "none", whiteSpace: "nowrap" }}>
                  {t("nav.cta")} <span>→</span>
                </a>
              </section>

              {related.length > 0 &&
                <div style={{ marginTop: 64 }}>
                  <span style={{ fontSize: 12, letterSpacing: "0.2em", textTransform: "uppercase", color: ARTICLE_VERT, fontWeight: 700 }}>{t("blog.related")}</span>
                  <div style={{ marginTop: 18, borderTop: `1px solid ${C.trait}` }}>
                    {related.map((r) =>
                      <button key={r.slug} onClick={() => go("article", r.slug)}
                        style={{ width: "100%", textAlign: "left", display: "flex", justifyContent: "space-between", alignItems: "center", gap: 24, padding: "20px 0", borderBottom: `1px solid ${C.trait}`, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body }}>
                        <span>
                          <span style={{ fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: ARTICLE_VERT, fontWeight: 600, display: "block", marginBottom: 6 }}>{r.cat}</span>
                          <span style={{ fontFamily: FONTS.serif, fontSize: 19, fontWeight: 500, color: C.encre, lineHeight: 1.25 }}>{r.title}</span>
                        </span>
                        <span style={{ color: C.grisClair, fontSize: 20, flexShrink: 0 }}>→</span>
                      </button>)}
                  </div>
                </div>}
            </div>
          </div>
        </div>
      </article>
    </main>);
}

// ---------- LÉGAL ----------
function Legal({ go }) {
  const t = useT();
  const H = ({ children }) => <h2 style={{ fontFamily: FONTS.serif, fontSize: 22, fontWeight: 500, margin: "40px 0 12px", letterSpacing: "-0.01em" }}>{children}</h2>;
  const P = ({ children }) => <p style={{ fontSize: 15.5, lineHeight: 1.75, color: "#2c2e2d", margin: "0 0 14px" }}>{children}</p>;
  const Ph = ({ children }) => <span style={{ color: C.grisClair }}>{children}</span>;
  return (
    <main>
      <section className="m-legal" style={{ paddingTop: 140, paddingBottom: 90 }}>
        <div style={{ maxWidth: 760, margin: "0 auto", padding: "0 32px" }}>
          <Eyebrow>{t("legal.eyebrow")}</Eyebrow>
          <h1 style={{ fontFamily: FONTS.serif, fontSize: "clamp(34px,4.2vw,52px)", fontWeight: 500, lineHeight: 1.1, letterSpacing: "-0.015em", margin: "16px 0 8px" }}>{t("legal.h1")}</h1>

          <H>Éditeur du site</H>
          <P>Le présent site est édité par <strong>Hugo Groslambert</strong>, avocat inscrit au Barreau de Toulouse.<br />
            Téléphone : +33 6 69 56 99 18 — Courriel : contact@monarch-avocat.fr<br />
            Directeur de la publication : Hugo Groslambert.</P>

          <H>Profession et règles applicables</H>
          <P>Avocat au Barreau de Toulouse, Maître Hugo Groslambert est soumis aux règles de la profession d'avocat : la loi n° 71-1130 du 31 décembre 1971, le décret n° 91-1197 du 27 novembre 1991, le Règlement Intérieur National (RIN) du Conseil National des Barreaux et le règlement intérieur du Barreau de Toulouse.<br />
            Le titre d'avocat est un titre professionnel français protégé. La structure relève de l'<strong>Ordre des Avocats du Barreau de Toulouse</strong>.</P>

          <H>Médiation de la consommation</H>
          <P>Conformément aux articles L.611-1 et suivants du Code de la consommation, le client consommateur peut recourir gratuitement au médiateur de la consommation de la profession d'avocat.</P>

          <H>Hébergement</H>
          <P>Le site est hébergé par <strong>Hostinger International Ltd.</strong>, 61 Lordou Vironos Street, 6023 Larnaca, Chypre — <Ph>www.hostinger.fr</Ph>.</P>

          <H>Propriété intellectuelle</H>
          <P>L'ensemble des contenus (textes, articles, identité visuelle, photographies) est protégé par le droit d'auteur et reste la propriété de l'éditeur, sauf mention contraire. Toute reproduction ou réutilisation sans autorisation est interdite.</P>

          <H>Données personnelles (RGPD)</H>
          <P>Les informations transmises via le formulaire de prise de rendez-vous ou par courriel sont utilisées uniquement pour répondre à votre demande et ne sont pas cédées à des tiers. Conformément au RGPD et à la loi « Informatique et Libertés », vous disposez d'un droit d'accès, de rectification, d'effacement et d'opposition sur vos données, en écrivant à contact@monarch-avocat.fr. Réclamation possible auprès de la CNIL (www.cnil.fr).</P>

          <H>Confidentialité</H>
          <P>Les échanges avec un avocat sont couverts par le secret professionnel. Les informations diffusées sur ce site ont une vocation générale et d'information ; elles ne constituent pas une consultation juridique et ne sauraient engager la responsabilité de l'éditeur.</P>

          <button onClick={() => go("home")} style={{ marginTop: 36, color: C.ardoiseFonce, background: "none", border: "none", cursor: "pointer", fontFamily: FONTS.body, fontSize: 15, fontWeight: 600, padding: 0 }}>← Retour à l'accueil</button>
        </div>
      </section>
    </main>);
}

// ---------- Footer ----------
function Footer({ go }) {
  const t = useT();
  return (
    <footer style={{ background: C.encre, color: "#8a8c89", borderTop: "1px solid rgba(255,255,255,.1)", padding: "50px 0 40px" }}>
      <Wrap style={{ display: "flex", justifyContent: "space-between", alignItems: "flex-start", flexWrap: "wrap", gap: 30 }}>
        <div>
          <div style={{ fontFamily: "Fraunces", fontSize: 20, color: "#fff", fontWeight: 600, letterSpacing: "0.04em" }}>MONARCH</div>
          <div style={{ fontSize: 9.5, letterSpacing: "0.25em", textTransform: "uppercase", color: "#8a8c89", marginTop: 6 }}>{t("footer.sub")}</div>
          <div style={{ marginTop: 18, fontSize: 13, display: "flex", gap: 20 }}>
            <button onClick={() => go("home")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.home")}</button>
            <button onClick={() => go("profil")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.lawyer")}</button>
            <button onClick={() => go("encyclo")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.journal")}</button>
            <button onClick={() => go("legal")} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>{t("footer.nav.legal")}</button>
            <button onClick={() => { if (window.monarchCookiesOpen) window.monarchCookiesOpen(); }} style={{ color: "#b9bbb8", background: "none", border: "none", cursor: "pointer", padding: 0, fontFamily: "inherit", fontSize: "inherit" }}>Gérer les cookies</button>
          </div>
        </div>
        <TT tag="div" k="footer.legal" style={{ fontSize: 12.5, lineHeight: 1.8, maxWidth: "30em", textAlign: "right" }} />
      </Wrap>
    </footer>);
}

// ---------- Mount ----------
// Charge les contenus édités dans l'admin (posts.json / livres.json / encyclopedie.json),
// puis monte le site. En l'absence de ces fichiers, on garde les valeurs des fichiers .js.
(function () {
  const tryLoad = (url, key, isArray) =>
    fetch(url, { cache: "no-store" })
      .then((r) => (r.ok ? r.json() : null))
      .then((data) => {
        if (!data) return;
        if (isArray) { if (Array.isArray(data) && data.length) window[key] = data; }
        else if (data && typeof data === "object" && (data.entries || data.modules)) window[key] = data;
      })
      .catch(() => {});
  Promise.all([
    tryLoad("posts.json", "MONARCH_POSTS", true),
    tryLoad("livres.json", "MONARCH_LIVRES", true),
    tryLoad("encyclopedie.json", "MONARCH_ENCYCLO", false)
  ]).then(() => {
    ReactDOM.createRoot(document.getElementById("root")).render(<MonarchSite />);
  });
})();