// ============================================================
// Monarch — Simulateurs : Apport-cession · Family Buy-Out · Stress test matrimonial
// Requiert window.MSC (simcore.jsx) et window.__mscShared (simulators2.jsx).
// ============================================================

(function () {
  const { useState, useEffect } = React;
  const M = window.MSC;
  const { C, SERIF, BODY, fmt, pct, CountEuro, injectCore, useReveal,
    Eyebrow, Label, MoneyInput, IntInput, Toggle, Shell, InputsCard, Doctrine, Alert, CTAEmail, Gauge, ProsCons } = M;
  function shared() { return window.__mscShared; }

  // =====================================================
  // 6. APPORT-CESSION (150-0 B ter)
  // =====================================================
  function ApportCessionSimulator() {
    useEffect(injectCore, []);
    const { ParamRecap, Synth } = shared();
    const [valeur, setValeur] = useState(5000000);
    const [horizon, setHorizon] = useState(10);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const V = Math.max(0, Number(valeur) || 0);
    const H = Math.max(1, Math.min(25, Number(horizon) || 1));
    const direct = V * (1 - 0.314);
    const apport = V;
    const g = Math.pow(1.05, H);
    const directFV = direct * g;
    const apportFV = apport * g;
    const fosse = apportFV - directFV;

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Cession & report · Apport-cession (art. 150-0 B ter)"
        title="Reporter l'impôt, c'est capitaliser sur la totalité de votre cession."
        intro="Comparez le capital réellement réinvesti après une vente directe et après un apport-cession en report d'imposition.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Projeter le report">
            <div><Label>Valeur de cession des titres</Label><MoneyInput value={valeur} onChange={setValeur} min={200000} max={30000000} step={100000} /></div>
            <div>
              <Label>Horizon de réinvestissement</Label>
              <div style={{ fontFamily: SERIF, fontSize: 34, fontWeight: 500, color: C.encre }}>{H} ans</div>
              <input type="range" min="1" max="20" step="1" value={H} onChange={(e) => setHorizon(Number(e.target.value))} style={{ width: "100%", marginTop: 10, accentColor: C.sauge }} />
            </div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Cession", fmt(V)], ["Horizon", H + " ans"], ["Rendement", "5 %/an"]]} onEdit={() => setDone(false)} />

            <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
              <Eyebrow>Étape 1 · le capital de départ</Eyebrow>
              <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>Ce qui reste à réinvestir</h3>
              <div style={{ marginBottom: 22 }}>
                <CapBar label="Vente en direct" sub={`Flat tax 31,4 % acquittée immédiatement`} value={direct} base={V} run={reveal} color={C.encre} segments={[{ value: direct, keep: true }, { value: V - direct }]} />
              </div>
              <CapBar label="Apport-cession via holding" sub="Impôt en report — capital intact" value={apport} base={V} run={reveal} color={C.saugeF} good segments={[{ value: apport, keep: true, good: true }]} />
            </div>

            <ProjChart reveal={reveal} a={direct} b={apport} H={H} fmt={fmt} />

            <Synth reveal={reveal} value={fosse} label="Le « fossé de capitalisation » à terme" sub={`En purgeant l'impôt aujourd'hui, vous renoncez à ce patrimoine supplémentaire à ${H} ans (rendement 5 %/an).`} />

            <Alert open={reveal} title="Le piège du réinvestissement">
              <p style={{ margin: 0 }}>Le report d'imposition (150-0 B ter) n'est pas un chèque en blanc. L'administration impose le réinvestissement d'au moins <b>60 % du produit de cession</b> dans des activités économiques sous <b>24 mois</b>. Le cabinet structure votre holding pour respecter ces quotas (private equity, immobilier éligible) et éviter l'exigibilité immédiate de l'impôt.</p>
            </Alert>

            <ProsCons open={reveal}
              pour={["Vous réinvestissez la totalité du prix de vente, sans impôt immédiat.", "Le capital travaille en entier dès le départ.", "Outil puissant pour enchaîner vers un nouveau projet économique."]}
              contre={["Obligation de réinvestir 60 % du prix sous 24 mois, sinon l'impôt devient dû.", "Vos réinvestissements sont encadrés (activités éligibles).", "L'impôt est reporté, pas effacé : il reste un suivi dans le temps."]} />

            <CTAEmail />
          </div>}
      </Shell>);
  }

  function CapBar({ label, sub, value, base, run, color, good, segments }) {
    return (
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10, flexWrap: "wrap", gap: 8 }}>
          <span style={{ fontFamily: BODY, fontSize: 13, color: good ? C.sauge : C.ardoise, letterSpacing: "0.1em", textTransform: "uppercase", fontWeight: 600 }}>{label}</span>
          <CountEuro value={value} run={run} style={{ fontFamily: SERIF, fontSize: "clamp(22px,2.6vw,30px)", fontWeight: 500, color: color, letterSpacing: "-0.01em" }} />
        </div>
        <Gauge run={run} base={base} segments={segments} height={18} />
        <div style={{ fontFamily: BODY, fontSize: 13, color: C.gris, marginTop: 8 }}>{sub}</div>
      </div>);
  }

  function ProjChart({ reveal, a, b, H, fmt }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 250); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const x0 = 46, x1 = 694, yb = 250, yt = 26;
    const pts = (P) => { const arr = []; for (let k = 0; k <= H; k++) arr.push(P * Math.pow(1.05, k)); return arr; };
    const va = pts(a), vb = pts(b), maxV = vb[H] || 1;
    const X = (k) => x0 + (x1 - x0) * (k / H);
    const Y = (v) => yb - (yb - yt) * (v / maxV);
    const path = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"} ${X(i).toFixed(1)} ${Y(v).toFixed(1)}`).join(" ");
    const area = [...vb.map((v, i) => `${X(i).toFixed(1)},${Y(v).toFixed(1)}`), ...va.map((v, i) => `${X(H - i).toFixed(1)},${Y(va[H - i]).toFixed(1)}`)].join(" ");
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>Étape 2 · la projection</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>L'écart se creuse, année après année</h3>
        <svg viewBox="0 0 740 290" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }} role="img" aria-label="Projection apport-cession">
          <defs><pattern id="acHatch" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse"><line x1="0" y1="0" x2="0" y2="7" stroke={C.ardoise} strokeWidth="0.8" opacity="0.5" /></pattern></defs>
          <line x1={x0} y1={yb} x2={x1} y2={yb} stroke={C.trait} strokeWidth="1" />
          {[0, Math.round(H / 2), H].map((k) => <text key={k} x={X(k)} y={yb + 20} fontFamily="'Archivo',sans-serif" fontSize="11" fill={C.grisC} textAnchor="middle">AN {k}</text>)}
          <polygon className={"msc-soft" + (on ? " on" : "")} style={{ transitionDelay: "1.6s" }} points={area} fill="url(#acHatch)" />
          <path className={"msc-line" + (on ? " on" : "")} style={{ strokeDasharray: 2600, strokeDashoffset: on ? 0 : 2600 }} d={path(va)} fill="none" stroke={C.ardoise} strokeWidth="1.6" strokeDasharray={on ? "5 4" : 2600} opacity="0.55" />
          <path className={"msc-line" + (on ? " on" : "")} style={{ strokeDasharray: 2600, strokeDashoffset: on ? 0 : 2600, transitionDelay: ".15s" }} d={path(vb)} fill="none" stroke={C.encre} strokeWidth="2.2" />
        </svg>
        <div style={{ display: "flex", gap: 26, flexWrap: "wrap", marginTop: 16 }}>
          <Leg dash label="Vente directe" value={fmt(va[H])} />
          <Leg label="Apport-cession" value={fmt(vb[H])} strong />
        </div>
      </div>);
  }
  function Leg({ dash, label, value, strong }) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        <span style={{ width: 16, height: 0, borderTop: `2px ${dash ? "dashed" : "solid"} ${dash ? C.ardoise : C.encre}`, opacity: dash ? 0.6 : 1, display: "inline-block" }} />
        <span style={{ fontFamily: BODY, fontSize: 13, color: C.gris }}>{label}</span>
        <span style={{ fontFamily: BODY, fontSize: 14, color: strong ? C.saugeF : C.encre, fontWeight: 700 }}>{value}</span>
      </div>);
  }

  // =====================================================
  // 7. FAMILY BUY-OUT
  // =====================================================
  function FamilyBuyOutSimulator() {
    useEffect(injectCore, []);
    const { ParamRecap, Panel, Defs, Box, Flow, Lbl } = shared();
    const [valeur, setValeur] = useState(2000000);
    const [besoin, setBesoin] = useState(1000000);
    const [nbEnfants, setNbEnfants] = useState(2);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const V = Math.max(0, Number(valeur) || 0);
    const L = Math.min(Math.max(0, Number(besoin) || 0), V);
    const donation = V - L;
    const n = Math.max(1, Number(nbEnfants) || 1);
    // Le repreneur reçoit toute l'entreprise ; chaque autre enfant a droit à une part égale en valeur => soulte
    const partEgale = V / n;
    const soulte = partEgale * (n - 1); // dû par le repreneur aux co-héritiers
    const soulteParEnfant = n > 1 ? partEgale : 0;

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Transmission & cash-out · Family Buy-Out"
        title="Transmettre à vos enfants tout en sécurisant votre capital retraite."
        intro="Une part des titres est donnée (Pacte Dutreil), l'autre rachetée par une holding familiale qui s'endette.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Modéliser l'opération">
            <div><Label>Valeur de l'entreprise</Label><MoneyInput value={valeur} onChange={setValeur} min={200000} max={20000000} step={100000} /></div>
            <div><Label>Besoin en liquidités des parents</Label><MoneyInput value={besoin} onChange={setBesoin} min={0} max={V} step={50000} /></div>
            <div style={{ gridColumn: "1 / -1" }}><Label>Nombre d'enfants (dont 1 repreneur)</Label><IntInput value={nbEnfants} onChange={setNbEnfants} min={1} max={8} /></div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Entreprise", fmt(V)], ["Cash-out parents", fmt(L)], ["Donné (Dutreil)", fmt(donation)]]} onEdit={() => setDone(false)} />

            <div className="msc-grid2" style={{ marginTop: 22 }}>
              <Panel tone="dark" eyebrow="Côté parents" title="Votre liberté financière">
                <CountEuro value={L} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(30px,4.4vw,52px)", fontWeight: 500, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1 }} />
                <div style={{ fontFamily: BODY, fontSize: 13.5, color: C.sauge, fontWeight: 600, marginTop: 10 }}>encaissés pour votre capital retraite</div>
              </Panel>
              <Panel tone="light" eyebrow="Côté héritiers" title="Le contrôle sécurisé">
                <p style={{ fontFamily: BODY, fontSize: 15, color: "#2c2e2d", lineHeight: 1.65, margin: 0 }}>
                  L'enfant prend la main sur l'entreprise. La dette de la holding est remboursée par les <b>dividendes de l'exploitation</b>, remontés sans frottement notable (régime mère-fille).
                </p>
              </Panel>
            </div>

            <FBOMechanism reveal={reveal} />

            {n > 1 &&
              <SoulteBlock reveal={reveal} soulte={soulte} soulteParEnfant={soulteParEnfant} n={n} partEgale={partEgale} />}

            <Doctrine open={reveal} eyebrow="La doctrine du cabinet" title="Donner et vendre, sans fragiliser la gouvernance" accent={C.sauge}>
              <p style={{ margin: 0 }}>L'opération combine donation en pleine propriété (Dutreil) et rachat par holding. Le cabinet calibre la répartition et la gouvernance (parts de préférence à droit de vote renforcé) pour organiser la reprise au bon rythme — dans le respect de la prohibition des clauses léonines, chaque associé conservant un droit minimal aux résultats et au vote.</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["Vous transmettez à l'enfant repreneur tout en touchant des liquidités.", "L'impôt de transmission est allégé (Pacte Dutreil).", "La dette est remboursée par les bénéfices de l'entreprise."]}
              contre={["La soulte due aux autres enfants peut peser lourd sur le repreneur.", "L'entreprise doit générer assez de bénéfices pour rembourser la dette.", "Montage familial à équilibrer avec soin pour éviter les tensions."]} />

            <CTAEmail />
          </div>}
      </Shell>);
  }

  // Mécanisme du Family Buy-Out
  function FBOMechanism({ reveal }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 250); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const step = (n, t, d) => (
      <div style={{ display: "grid", gridTemplateColumns: "34px 1fr", gap: 14, alignItems: "start" }}>
        <span style={{ fontFamily: SERIF, fontSize: 20, color: C.ardoise, lineHeight: 1.2 }}>{n}</span>
        <div>
          <div style={{ fontFamily: BODY, fontSize: 14.5, fontWeight: 600, color: C.encre, marginBottom: 3 }}>{t}</div>
          <div style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris, lineHeight: 1.6 }}>{d}</div>
        </div>
      </div>);
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>Le dispositif · donation-cession à holding</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 24px" }}>Comment fonctionne le Family Buy-Out</h3>
        <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit, minmax(240px,1fr))", gap: 22 }}>
          {step("1", "Donation aux enfants", "Les parents donnent les titres aux enfants (souvent sous Pacte Dutreil pour l'abattement de 75 %), parfois en s'acquittant des droits de donation.")}
          {step("2", "Apport à une holding de reprise", "L'enfant repreneur apporte ses titres à une holding qu'il contrôle. Les co-héritiers peuvent y apporter les leurs ou recevoir une soulte.")}
          {step("3", "Endettement de la holding", "La holding contracte un emprunt pour financer le cash-out des parents et/ou la soulte due aux autres enfants.")}
          {step("4", "Remboursement par les dividendes", "La société d'exploitation remonte ses dividendes à la holding (régime mère-fille) pour rembourser la dette, sans frottement notable.")}
        </div>
      </div>);
  }

  // Démonstration de la soulte + son inconvénient
  function SoulteBlock({ reveal, soulte, soulteParEnfant, n, partEgale }) {
    return (
      <div className={"msc-soft" + (reveal ? " on" : "")} style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>L'équilibre entre héritiers · la soulte</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 12px" }}>Un seul enfant reprend — les autres reçoivent une soulte</h3>
        <p style={{ fontFamily: BODY, fontSize: 14.5, color: "#2c2e2d", lineHeight: 1.65, margin: "0 0 20px", maxWidth: "46em" }}>
          Pour respecter l'égalité entre les {n} enfants, le repreneur (ou la holding) verse une <b>soulte</b> aux {n - 1} autres : une compensation financière égale à la valeur de leur part théorique.
        </p>
        <div className="msc-grid2" style={{ alignItems: "stretch" }}>
          <div style={{ background: "#fff", border: `1px solid ${C.trait}`, padding: "20px 22px" }}>
            <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.gris, marginBottom: 6 }}>Soulte totale à financer</div>
            <CountEuro value={soulte} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(26px,3.4vw,38px)", fontWeight: 500, color: C.encre, letterSpacing: "-0.01em" }} />
            <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, marginTop: 6 }}>soit {fmt(soulteParEnfant)} par enfant non-repreneur ({n - 1} × )</div>
          </div>
          <div style={{ background: C.encre, color: "#fff", padding: "20px 22px" }}>
            <div style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "#d98b8b", fontWeight: 600, marginBottom: 8 }}>L'inconvénient</div>
            <p style={{ fontFamily: BODY, fontSize: 14, color: "#cfd2cf", lineHeight: 1.65, margin: 0 }}>
              La soulte est une <b style={{ color: "#fff" }}>dette personnelle lourde</b> pour le repreneur : financée par emprunt, elle l'oblige à se verser des dividendes fortement fiscalisés pour la rembourser, fragilisant sa trésorerie au moment même où il prend les rênes. Mal calibrée, elle peut <b style={{ color: "#fff" }}>asphyxier l'entreprise</b> et créer des tensions entre héritiers.
            </p>
          </div>
        </div>
        <p style={{ fontFamily: BODY, fontSize: 13, color: C.gris, lineHeight: 1.6, margin: "16px 0 0", maxWidth: "46em" }}>
          La réponse Monarch : loger la soulte dans la holding de reprise (et non sur la tête du repreneur), l'adosser aux dividendes remontés en franchise, et calibrer son montant via une valorisation rigoureuse pour préserver l'équilibre familial sans étrangler l'exploitation.
        </p>
      </div>);
  }

  // =====================================================
  // 8. STRESS TEST MATRIMONIAL
  // =====================================================
  function MatrimonialStressTest() {
    useEffect(injectCore, []);
    const { ParamRecap } = shared();
    const [valo, setValo] = useState(3000000);
    const [creation, setCreation] = useState("apres");
    const [regime, setRegime] = useState("communaute");
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const S = Math.max(0, Number(valo) || 0);
    const highRisk = regime === "communaute" && creation === "apres";
    const midRisk = regime === "communaute" && creation === "avant";
    const exposed = highRisk ? S / 2 : 0;

    const go = () => { setBusy(true); setDone(false); setTimeout(() => { setBusy(false); setDone(true); }, 700); };

    return (
      <Shell eyebrow="Bouclier du dirigeant · Risque matrimonial"
        title="Votre entreprise est-elle protégée en cas de divorce ?"
        intro="Selon votre régime matrimonial, un divorce peut vous obliger à racheter la moitié de votre entreprise. Mesurez le risque, puis protégez-la.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Lancer le stress test">
            <div><Label>Valorisation de la société</Label><MoneyInput value={valo} onChange={setValo} min={200000} max={30000000} step={100000} /></div>
            <div style={{ display: "flex", flexDirection: "column", gap: 16 }}>
              <div><Label>Création de la société</Label><Toggle full options={[{ id: "avant", label: "Avant le mariage" }, { id: "apres", label: "Après le mariage" }]} value={creation} onChange={setCreation} /></div>
              <div><Label>Régime matrimonial</Label><Toggle full options={[{ id: "communaute", label: "Communauté légale" }, { id: "separation", label: "Séparation de biens" }]} value={regime} onChange={setRegime} /></div>
            </div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Valorisation", fmt(S)], ["Création", creation === "avant" ? "Avant mariage" : "Après mariage"], ["Régime", regime === "communaute" ? "Communauté légale" : "Séparation de biens"]]} onEdit={() => setDone(false)} />

            {highRisk &&
              <div className={"msc-soft" + (reveal ? " on" : "")} style={{ marginTop: 16, background: C.encre, color: "#fff", padding: "clamp(26px,4vw,44px)", borderLeft: `3px solid #a23b3b` }}>
                <div style={{ display: "flex", alignItems: "center", gap: 12, marginBottom: 12 }}>
                  <span className="msc-pulse" style={{ display: "inline-flex", alignItems: "center", justifyContent: "center", width: 20, height: 20, border: "1px solid #fff", fontFamily: SERIF, fontSize: 13 }}>!</span>
                  <Eyebrow color="#d98b8b">Exposition élevée</Eyebrow>
                </div>
                <p style={{ fontFamily: BODY, fontSize: "clamp(17px,2.2vw,21px)", lineHeight: 1.5, color: "#fff", margin: "0 0 6px", maxWidth: "30em" }}>En cas de séparation, votre conjoint est légitimement en droit d'exiger la moitié de la valeur de votre société, soit</p>
                <CountEuro value={exposed} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(34px,5vw,60px)", fontWeight: 500, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1 }} />
                <p style={{ fontFamily: BODY, fontSize: 14.5, color: "#cfd2cf", lineHeight: 1.7, margin: "16px 0 0", maxWidth: "42em" }}>Ce besoin soudain de liquidité force fréquemment la mise en liquidation de l'entreprise ou l'entrée forcée d'investisseurs extérieurs.</p>
              </div>}

            {midRisk &&
              <Alert open={reveal} title="Exposition indirecte — la récompense due à la communauté">
                <p style={{ margin: 0 }}>Les titres créés avant le mariage restent des biens propres, mais la communauté peut réclamer une <b>récompense</b> si elle a financé le développement de la société ou si la plus-value provient de votre activité pendant le mariage. L'exposition est réelle, quoique indirecte.</p>
              </Alert>}

            {regime === "separation" &&
              <div className={"msc-soft" + (reveal ? " on" : "")} style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)" }}>
                <Eyebrow color={C.sauge}>Exposition maîtrisée</Eyebrow>
                <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,26px)", fontWeight: 500, margin: "10px 0 8px", letterSpacing: "-0.01em" }}>La muraille est déjà posée</h3>
                <p style={{ fontFamily: BODY, fontSize: 15, color: "#2c2e2d", lineHeight: 1.65, margin: 0, maxWidth: "44em" }}>Sous séparation de biens, vos titres demeurent vos biens propres : l'outil de travail est, par principe, hors d'atteinte du partage. Reste à verrouiller les angles morts (logement familial, comptes courants, donations entre époux).</p>
              </div>}

            <ShieldDoctrine reveal={reveal} breached={highRisk} />

            <ProsCons open={reveal}
              pour={["Connaître votre exposition réelle avant qu'il ne soit trop tard.", "Des aménagements simples peuvent mettre l'entreprise hors de portée du partage.", "La protection se met en place à froid, en quelques actes."]}
              contre={["Changer de régime matrimonial a un coût et demande l'accord du conjoint.", "Certains aménagements ont des délais (homologation éventuelle).", "Aucune protection rétroactive : mieux vaut agir tôt."]} />

            <CTAEmail />
          </div>}
      </Shell>);
  }

  function ShieldDoctrine({ reveal, breached }) {
    return (
      <Doctrine open={reveal} eyebrow="La solution Monarch" title="L'ingénierie patrimoniale commence à la maison" accent={C.sauge}>
        <div style={{ display: "flex", gap: 22, alignItems: "flex-start", flexWrap: "wrap" }}>
          <svg viewBox="0 0 80 96" width="72" height="86" aria-hidden="true" style={{ flex: "0 0 auto" }}>
            <path className={"msc-line" + (reveal ? " on" : "")} style={{ strokeDasharray: 320, strokeDashoffset: reveal ? 0 : 320, transitionDelay: ".3s" }} d="M40 6 L72 18 L72 46 C72 70 58 84 40 90 C22 84 8 70 8 46 L8 18 Z" fill="none" stroke={C.sauge} strokeWidth="1.6" />
            <line x1="40" y1="40" x2="40" y2="58" stroke={C.sauge} strokeWidth="1.4" />
            <rect x="33" y="50" width="14" height="12" fill="none" stroke={C.sauge} strokeWidth="1.4" />
          </svg>
          <p style={{ margin: 0, flex: "1 1 280px" }}>L'aménagement de votre régime matrimonial — <b style={{ color: "#fff" }}>clause de préciput, exclusion des biens professionnels, société d'acquêts limitée</b> — érige une muraille étanche entre votre vie privée et votre souveraineté professionnelle. Le cabinet rédige sur-mesure ces aménagements pour que jamais un événement familial ne menace l'outil de travail.</p>
        </div>
      </Doctrine>);
  }

  window.ApportCessionSimulator = ApportCessionSimulator;
  window.FamilyBuyOutSimulator = FamilyBuyOutSimulator;
  window.MatrimonialStressTest = MatrimonialStressTest;
})();