// ============================================================
// Monarch — <HoldingDiagnostic /> : simulateur d'extraction de trésorerie
// Composant React autonome. Exposé sur window.HoldingDiagnostic.
// Chargé AVANT monarch.jsx pour que Home puisse le rendre.
// ============================================================

(function () {
  const { useState, useEffect, useRef } = React;

  // ----- Design tokens (cohérents avec le site) -----
  const C = {
    blanc: "#FFFFFF", albatre: "#FAF9F6", encre: "#1B1D1C",
    ardoise: "#5B7C99", ardoiseF: "#3D5468",
    sauge: "#5C6F5C", saugeF: "#48584A",
    gris: "#737373", grisC: "#9A9A95", trait: "#E4E1DA"
  };
  const SERIF = "'Fraunces', Georgia, serif";
  const BODY = "'Archivo', system-ui, sans-serif";
  const CAL_LINK = "hugo-groslambert/diagnostic1h";
  const CAL_ORIGIN = "https://cal.eu";

  // =====================================================
  //  MOTEUR FISCAL — fonctions pures, faciles à maintenir
  //  (taux à ajuster ici si la loi de finances change)
  // =====================================================
  const TAUX = {
    IS_BAS: 0.15, IS_HAUT: 0.25, IS_SEUIL: 42500,
    FLAT_TAX: 0.314,            // PFU : 12,8 % IR + 18,6 % PS
    TMI: 0.30,                  // tranche marginale estimée
    CHARGES_SAS: 0.80,          // cotisations ≈ 80 % du net (assimilé salarié)
    CHARGES_SARL: 0.45,         // cotisations ≈ 45 % du net (TNS)
    QUOTE_PART: 0.05            // mère-fille : quote-part de frais et charges
  };

  // IS progressif : 15 % jusqu'à 42 500 €, 25 % au-delà
  function calculateIS(base) {
    const bas = Math.min(Math.max(base, 0), TAUX.IS_SEUIL);
    const haut = Math.max(0, base - TAUX.IS_SEUIL);
    return bas * TAUX.IS_BAS + haut * TAUX.IS_HAUT;
  }

  function calculateFlatTax(montant) {
    return montant * TAUX.FLAT_TAX;
  }

  // Voie rémunération : enveloppe brute -> charges sociales -> IR.
  // (La rémunération étant déductible de l'IS, elle n'est pas frappée d'IS.)
  function calculateRemuneration(enveloppe, forme) {
    const ratio = forme === "SAS" ? TAUX.CHARGES_SAS : TAUX.CHARGES_SARL;
    const netImposable = enveloppe / (1 + ratio);
    const social = enveloppe - netImposable;
    const ir = netImposable * TAUX.TMI;
    const net = netImposable - ir;
    return { brut: enveloppe, social, netImposable, ir, net };
  }

  // Voie dividendes (sans holding) : IS puis flat tax.
  function calculateDividende(brut) {
    const is = calculateIS(brut);
    const distribuable = brut - is;
    const flat = calculateFlatTax(distribuable);
    const net = distribuable - flat;
    return { brut, is, distribuable, flat, net };
  }

  // Ingénierie de groupe : IS à l'exploitation puis remontée mère-fille.
  // Friction = quote-part 5 % imposée à l'IS de la holding (15 % ici, quote-part faible).
  function calculateHolding(brut) {
    const is = calculateIS(brut);
    const distribuable = brut - is;
    const friction = distribuable * TAUX.QUOTE_PART * TAUX.IS_BAS; // ≈ 0,75 %
    const conserve = distribuable - friction;
    return { brut, is, distribuable, friction, conserve };
  }

  // ----- helpers format -----
  const euro0 = new Intl.NumberFormat("fr-FR", { style: "currency", currency: "EUR", maximumFractionDigits: 0 });
  const fmt = (n) => euro0.format(Math.round(n));
  const pct = (n, base) => base > 0 ? Math.round((n / base) * 100) : 0;

  // ----- CountUp (rAF) -----
  function useCountUp(target, run, duration) {
    const [val, setVal] = useState(0);
    const ref = useRef();
    useEffect(() => {
      if (!run) { setVal(0); return; }
      const d = duration || 1100;
      let raf, start;
      const ease = (t) => 1 - Math.pow(1 - t, 3);
      const tick = (ts) => {
        if (!start) start = ts;
        const p = Math.min(1, (ts - start) / d);
        setVal(target * ease(p));
        if (p < 1) raf = requestAnimationFrame(tick);
      };
      raf = requestAnimationFrame(tick);
      ref.current = raf;
      return () => cancelAnimationFrame(raf);
    }, [target, run, duration]);
    return val;
  }

  function CountEuro({ value, run, style }) {
    const v = useCountUp(value, run);
    return <span style={style}>{fmt(v)}</span>;
  }

  // ----- styles injectés (hachures + responsive) -----
  function injectStyles() {
    if (document.getElementById("hd-styles")) return;
    const s = document.createElement("style");
    s.id = "hd-styles";
    s.textContent = `
      .hd-bar { position: relative; height: 14px; border-radius: 2px; overflow: hidden; background: ${C.albatre}; border: 1px solid ${C.trait}; display: flex; }
      .hd-seg { height: 100%; width: 0; transition: width 1.1s cubic-bezier(.2,.7,.3,1); }
      .hd-seg-keep { background: ${C.ardoiseF}; }
      .hd-seg-keep-good { background: ${C.saugeF}; }
      .hd-seg-loss { background-color: rgba(91,124,153,.10); background-image: repeating-linear-gradient(135deg, rgba(91,124,153,.42) 0, rgba(91,124,153,.42) 1.5px, transparent 1.5px, transparent 6px); }
      .hd-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; align-items: stretch; }
      .hd-panel { animation: hdRise .7s both; }
      @keyframes hdRise { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: none; } }
      .hd-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 26px 36px; }
      .hd-curve { stroke-dasharray: 2600; stroke-dashoffset: 2600; transition: stroke-dashoffset 1.8s cubic-bezier(.4,0,.2,1); }
      .hd-curve.on { stroke-dashoffset: 0; }
      .hd-line { stroke-dasharray: 680; stroke-dashoffset: 680; transition: stroke-dashoffset 1s ease; }
      .hd-line.on { stroke-dashoffset: 0; }
      .hd-soft { opacity: 0; transition: opacity .8s ease; }
      .hd-soft.on { opacity: 1; }
      @media (max-width: 820px) {
        .hd-grid2 { grid-template-columns: 1fr !important; }
        .hd-inputs { grid-template-columns: 1fr !important; gap: 22px !important; }
        .hd-recap { gap: 10px !important; }
      }
    `;
    document.head.appendChild(s);
  }

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

  function SegBar({ segments, run, base }) {
    const [w, setW] = useState(false);
    useEffect(() => { if (run) { const id = setTimeout(() => setW(true), 60); return () => clearTimeout(id); } else setW(false); }, [run]);
    return (
      <div className="hd-bar">
        {segments.map((s, i) =>
          <div
            key={i}
            className={"hd-seg " + (s.keep ? (s.good ? "hd-seg-keep-good" : "hd-seg-keep") : "hd-seg-loss")}
            style={{ width: w ? pct(s.value, base) + "%" : 0, transitionDelay: (i * 90) + "ms" }}
            title={s.label} />
        )}
      </div>);
  }

  function WaterLine({ label, value, kind }) {
    const color = kind === "keep" ? C.encre : C.gris;
    return (
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "7px 0", borderBottom: `1px solid ${C.trait}` }}>
        <span style={{ fontFamily: BODY, fontSize: 13.5, color: kind === "loss" ? C.gris : C.encre, fontWeight: kind === "keep" ? 600 : 400, display: "inline-flex", alignItems: "center", gap: 8 }}>
          {kind === "loss" && <span style={{ width: 10, height: 10, borderRadius: 2, backgroundImage: "repeating-linear-gradient(135deg, rgba(91,124,153,.55) 0, rgba(91,124,153,.55) 1.5px, transparent 1.5px, transparent 5px)", border: `1px solid ${C.trait}` }} />}
          {label}
        </span>
        <span style={{ fontFamily: BODY, fontSize: 13.5, color, fontWeight: kind === "keep" ? 700 : 500, fontVariantNumeric: "tabular-nums" }}>
          {kind === "loss" ? "– " : ""}{fmt(value)}
        </span>
      </div>);
  }

  // =====================================================
  //  COMPOSANT PRINCIPAL
  // =====================================================
  function HoldingDiagnostic() {
    useEffect(injectStyles, []);
    const [step, setStep] = useState("input"); // input | loading | results
    const [montant, setMontant] = useState(150000);
    const [forme, setForme] = useState("SAS");
    const [objectif, setObjectif] = useState("immobilier");
    const [hasHolding, setHasHolding] = useState(false);
    const [revealB, setRevealB] = useState(false);
    const [horizon, setHorizon] = useState("now"); // now | 10y

    const ANNUITY10 = (Math.pow(1.04, 10) - 1) / 0.04; // capitalisation d'une annuité 10 ans @ 4 %
    const proj = (v) => horizon === "10y" ? v * ANNUITY10 : v;
    const capacite = (v) => v / 0.20; // capacité d'acquisition, apport 20 %

    const bookCal = (e) => {
      if (window.Cal) { if (e) e.preventDefault(); window.Cal("modal", { calLink: CAL_LINK, config: { layout: "month_view" } }); }
    };

    const brut = Math.max(0, Number(montant) || 0);
    const remu = calculateRemuneration(brut, forme);
    const div = calculateDividende(brut);
    const holding = calculateHolding(brut);
    const bestPropre = Math.max(remu.net, div.net);
    const gain = holding.conserve - bestPropre;

    const lancer = () => {
      setStep("loading"); setRevealB(false);
      setTimeout(() => {
        setStep("results");
        setTimeout(() => setRevealB(true), 950);
      }, 1000);
    };
    const reset = () => { setStep("input"); setRevealB(false); };

    const objectifs = [
      { id: "immobilier", label: "Construire un parc immobilier hors de portée de l'imposition personnelle" },
      { id: "liquidites", label: "Sécuriser des liquidités pour mon train de vie sans détruire la société" },
      { id: "transmission", label: "Préparer la transmission à mes enfants sans céder mon pouvoir" },
      { id: "diversification", label: "Réinvestir dans une nouvelle activité (diversification)" }
    ];

    return (
      <section id="simulateur" style={{ background: C.blanc, padding: "48px 0 96px" }}>
        <div className="m-wrap" style={{ maxWidth: 1240, margin: "0 auto", padding: "0 32px" }}>

          <div style={{ maxWidth: "46em" }}>
            <Eyebrow>Simulateur · Extraction de trésorerie</Eyebrow>
            <h2 style={{ fontFamily: SERIF, fontSize: "clamp(28px,3.6vw,46px)", fontWeight: 500, lineHeight: 1.08, letterSpacing: "-0.015em", margin: "16px 0 0" }}>
              Combien vous coûte la sortie de votre trésorerie.
            </h2>
            <p style={{ fontFamily: BODY, fontSize: 18, color: C.gris, lineHeight: 1.6, marginTop: 18, maxWidth: "34em" }}>
              Comparez en un instant l'impôt d'une distribution à votre nom face à un transfert vers votre holding.
            </p>
          </div>

          {/* ---------- ÉTAPE 1 : INPUTS ---------- */}
          {step !== "results" &&
            <div style={{ marginTop: 44, border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(24px,4vw,44px)", position: "relative", opacity: step === "loading" ? 0.55 : 1, transition: "opacity .4s" }}>
              <div className="hd-inputs">
                <div>
                  <label style={{ fontFamily: BODY, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600, display: "block", marginBottom: 10 }}>Trésorerie à arbitrer</label>
                  <div style={{ display: "flex", alignItems: "baseline", gap: 8, borderBottom: `2px solid ${C.encre}`, paddingBottom: 8 }}>
                    <input
                      type="text" inputMode="numeric" value={montant === "" ? "" : Number(montant).toLocaleString("fr-FR")}
                      onChange={(e) => { const n = e.target.value.replace(/[^\d]/g, ""); setMontant(n === "" ? "" : Number(n)); }}
                      style={{ fontFamily: SERIF, fontSize: "clamp(30px,4vw,46px)", fontWeight: 500, color: C.encre, border: "none", background: "transparent", outline: "none", width: "100%", padding: 0 }} />
                    <span style={{ fontFamily: SERIF, fontSize: "clamp(24px,3vw,38px)", color: C.ardoiseF }}>€</span>
                  </div>
                  <input type="range" min="20000" max="1000000" step="10000" value={brut}
                    onChange={(e) => setMontant(Number(e.target.value))}
                    style={{ width: "100%", marginTop: 16, accentColor: C.sauge }} />
                </div>

                <div>
                  <label style={{ fontFamily: BODY, fontSize: 12, letterSpacing: "0.12em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600, display: "block", marginBottom: 10 }}>Forme de la société d'exploitation</label>
                  <Toggle options={[{ id: "SAS", label: "SAS" }, { id: "SARL", label: "SARL" }]} value={forme} onChange={setForme} C={C} />
                  <p style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, marginTop: 10, lineHeight: 1.5 }}>
                    {forme === "SAS" ? "Assimilé salarié — cotisations élevées (~80 % du net)." : "Travailleur non salarié — cotisations modérées (~45 % du net)."}
                  </p>
                </div>
              </div>

              {forme === "SARL" &&
                <div style={{ marginTop: 24, padding: "14px 18px", borderLeft: `3px solid ${C.ardoise}`, background: C.blanc, display: "flex", gap: 12, alignItems: "flex-start" }}>
                  <span style={{ fontFamily: SERIF, color: C.ardoise, fontSize: 18, lineHeight: 1 }}>!</span>
                  <p style={{ fontFamily: BODY, fontSize: 13, color: C.gris, lineHeight: 1.6, margin: 0 }}>
                    <b style={{ color: C.encre }}>Alerte SARL (gérance majoritaire).</b> La quote-part des dividendes dépassant 10 % du capital et des comptes courants subit les charges sociales. Ce frottement est intégré à notre calcul.
                  </p>
                </div>
              }

              <div style={{ marginTop: 30, display: "flex", alignItems: "center", gap: 20, flexWrap: "wrap" }}>
                <button onClick={lancer} disabled={step === "loading" || !brut}
                  style={{ fontFamily: BODY, fontSize: 15.5, fontWeight: 600, color: "#fff", background: C.sauge, border: "none", borderRadius: 2, padding: "16px 30px", cursor: step === "loading" ? "default" : "pointer", display: "inline-flex", alignItems: "center", gap: 10, opacity: brut ? 1 : 0.5 }}>
                  {step === "loading" ? "Analyse en cours…" : "Voir le disponible à investir"}
                  {step !== "loading" && <span>→</span>}
                </button>
                {step === "loading" && <span style={{ fontFamily: BODY, fontSize: 13, color: C.gris }}>Analyse des voies d'extraction…</span>}
              </div>
            </div>
          }

          {/* ---------- ÉTAPE 2 : RÉSULTATS ---------- */}
          {step === "results" &&
            <div style={{ marginTop: 44 }}>
              <ParamRecap montant={brut} forme={forme} objectif={objectif} hasHolding={hasHolding} onEdit={reset} C={C} BODY={BODY} fmt={fmt} />
              <div style={{ display: "flex", justifyContent: "space-between", alignItems: "center", gap: 16, flexWrap: "wrap", marginBottom: 20 }}>
                <span style={{ fontFamily: BODY, fontSize: 13, color: C.gris }}>{horizon === "10y" ? "Même arbitrage répété chaque année, capitalisé à 4 %/an." : "Arbitrage d'une année."}</span>
                <HSegment value={horizon} onChange={setHorizon} C={C} BODY={BODY}
                  options={[{ id: "now", label: "Vision immédiate" }, { id: "10y", label: "Projection sur 10 ans" }]} />
              </div>
              <div className="hd-grid2">

                {/* BLOC A — nom propre */}
                <div className="hd-panel" style={{ border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,34px)", display: "flex", flexDirection: "column" }}>
                  <Eyebrow color={C.ardoise}>Extraction en nom propre</Eyebrow>
                  <h3 style={{ fontFamily: SERIF, fontSize: 23, fontWeight: 500, margin: "10px 0 4px", letterSpacing: "-0.01em" }}>Le frottement fiscal</h3>
                  <p style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris, margin: "0 0 24px", lineHeight: 1.5 }}>Deux voies de distribution classiques. Les deux subissent une destruction de valeur massive au profit de la fiscalité personnelle.</p>

                  {/* Voie rémunération */}
                  <Voie
                    titre="Voie rémunération"
                    netLabel="Net à investir"
                    net={remu.net} base={brut} run={step === "results"}
                    segments={[
                      { keep: true, value: remu.net, label: "Net" },
                      { value: remu.social, label: "Charges sociales" },
                      { value: remu.ir, label: "IR" }
                    ]}
                    lines={[
                      { label: forme === "SAS" ? "Charges sociales (≈80 %)" : "Charges sociales (≈45 %)", value: remu.social, kind: "loss" },
                      { label: "Impôt sur le revenu (TMI 30 %)", value: remu.ir, kind: "loss" },
                      { label: "Net à investir", value: remu.net, kind: "keep" }
                    ]}
                    C={C} SERIF={SERIF} BODY={BODY} pct={pct} />

                  <div style={{ height: 22 }} />

                  {/* Voie dividendes */}
                  <Voie
                    titre="Voie dividendes"
                    netLabel="Net à investir"
                    net={div.net} base={brut} run={step === "results"}
                    segments={[
                      { keep: true, value: div.net, label: "Net" },
                      { value: div.is, label: "IS" },
                      { value: div.flat, label: "Flat tax" }
                    ]}
                    lines={[
                      { label: "Impôt sur les sociétés (15 % / 25 %)", value: div.is, kind: "loss" },
                      { label: "Flat tax / PFU (31,4 %)", value: div.flat, kind: "loss" },
                      { label: "Net à investir", value: div.net, kind: "keep" }
                    ]}
                    C={C} SERIF={SERIF} BODY={BODY} pct={pct} />
                </div>

                {/* BLOC B — groupe */}
                <div className="hd-panel" style={{ border: `1px solid ${C.saugeF}`, background: C.encre, color: "#fff", padding: "clamp(22px,3vw,34px)", display: "flex", flexDirection: "column", opacity: revealB ? 1 : 0, transform: revealB ? "none" : "translateY(16px)", transition: "opacity .7s, transform .7s" }}>
                  <Eyebrow color={C.sauge}>Ingénierie de Groupe</Eyebrow>
                  <h3 style={{ fontFamily: SERIF, fontSize: 23, fontWeight: 500, margin: "10px 0 4px", letterSpacing: "-0.01em", color: "#fff" }}>La doctrine Monarch</h3>
                  <p style={{ fontFamily: BODY, fontSize: 13.5, color: "#b9bbb8", margin: "0 0 24px", lineHeight: 1.5 }}>
                    La trésorerie remonte vers la holding via le régime mère-fille — préservant ainsi l'intégrité de votre matière première.
                  </p>

                  <div style={{ fontFamily: BODY, fontSize: 12.5, color: "#9ea7a0", letterSpacing: "0.16em", textTransform: "uppercase", fontWeight: 600 }}>Remontée mère-fille</div>
                  <div style={{ margin: "14px 0 18px" }}>
                    <SegBar run={revealB} base={brut} segments={[
                      { keep: true, good: true, value: holding.conserve, label: "Conservé" },
                      { value: holding.is, label: "IS exploitation" },
                      { value: holding.friction, label: "Quote-part 5 %" }
                    ]} />
                  </div>

                  <div style={{ borderTop: "1px solid rgba(255,255,255,.14)" }}>
                    <DarkLine label="IS à l'exploitation (15 % / 25 %)" value={holding.is} kind="loss" C={C} BODY={BODY} />
                    <DarkLine label="Friction mère-fille (quote-part 5 %)" value={holding.friction} kind="loss" C={C} BODY={BODY} />
                    <DarkLine label="Capital conservé dans le groupe" value={holding.conserve} kind="keep" C={C} BODY={BODY} />
                  </div>

                  <div style={{ marginTop: 22 }}>
                    <div style={{ fontFamily: BODY, fontSize: 12.5, color: "#9ea7a0", letterSpacing: "0.04em", marginBottom: 6 }}>{horizon === "10y" ? "Patrimoine constitué sur 10 ans (réinvesti à 4 %/an)" : "Matière première sécurisée pour réinvestissement"}</div>
                    <CountEuro value={proj(holding.conserve)} run={revealB}
                      style={{ fontFamily: SERIF, fontSize: "clamp(38px,5vw,60px)", fontWeight: 500, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1 }} />
                    <span style={{ fontFamily: BODY, fontSize: 15, color: C.sauge, fontWeight: 600, marginLeft: 12 }}>{horizon === "10y" ? fmt(holding.conserve) + " / an" : pct(holding.conserve, brut) + " % conservés"}</span>
                  </div>
                </div>
              </div>

              {/* ---- Impact selon l'objectif ---- */}
              <ObjectiveImpact objectif="immobilier" bestPropre={bestPropre} holding={holding} reveal={revealB} capacite={capacite} C={C} SERIF={SERIF} BODY={BODY} fmt={fmt} />

              {/* Bandeau de synthèse */}
              <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)", display: "flex", alignItems: "center", justifyContent: "space-between", gap: 30, flexWrap: "wrap", opacity: revealB ? 1 : 0, transition: "opacity .6s .2s" }}>
                <div style={{ maxWidth: "32em" }}>
                  <div style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris, lineHeight: 1.5 }}>{horizon === "10y" ? "Projetée sur 10 ans (réinvestissement à 4 %/an), la perte de l'inaction face à la meilleure voie en nom propre atteint\u00a0:" : "À objectif identique, l'architecture de Groupe conserve, par rapport à la meilleure voie en nom propre\u00a0:"}</div>
                </div>
                <div style={{ textAlign: "right" }}>
                  <CountEuro value={proj(gain) > 0 ? proj(gain) : 0} run={revealB}
                    style={{ fontFamily: SERIF, fontSize: "clamp(30px,4vw,48px)", fontWeight: 500, color: C.saugeF, letterSpacing: "-0.01em" }} />
                  <div style={{ fontFamily: BODY, fontSize: 13, color: C.gris, marginTop: 2 }}>{horizon === "10y" ? "de patrimoine amputé par l'inaction" : "de capital supplémentaire préservé"}</div>
                </div>
              </div>

              {horizon === "10y" &&
                <GrowthCurveBlueprint pPropre={bestPropre} pGroupe={holding.conserve} reveal={revealB} C={C} SERIF={SERIF} BODY={BODY} fmt={fmt} />
              }

              <div style={{ marginTop: 22 }}>
                <div style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600, marginBottom: 12 }}>En toute transparence</div>
                <div style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: 22 }} className="hd-grid2">
                  <div style={{ background: C.albatre, border: `1px solid ${C.trait}`, padding: "clamp(20px,3vw,28px)" }}>
                    <div style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.16em", textTransform: "uppercase", color: C.saugeF, fontWeight: 600, marginBottom: 14 }}>Avantages</div>
                    {["La trésorerie passe d'une société à l'autre presque sans impôt (≈ 1,25 %).", "Le capital reste mobilisable pour investir (immobilier, autre société…).", "Vous évitez l'impôt de 31,4 % d'une distribution personnelle."].map((t, i) =>
                      <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", marginBottom: 12 }}><span style={{ color: C.saugeF, fontWeight: 700, marginTop: 3, fontSize: 13 }}>—</span><span style={{ fontFamily: BODY, fontSize: 14, color: "#2c2e2d", lineHeight: 1.55 }}>{t}</span></div>)}
                  </div>
                  <div style={{ background: C.blanc, border: `1px solid ${C.trait}`, padding: "clamp(20px,3vw,28px)" }}>
                    <div style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.16em", textTransform: "uppercase", color: "#a23b3b", fontWeight: 600, marginBottom: 14 }}>Inconvénients & limites</div>
                    {["L'argent reste dans la holding : le sortir pour vous coûtera l'impôt à ce moment-là.", "Il faut créer et gérer une holding (frais de compta, juridique).", "L'avantage ne joue que si vous réinvestissez, pas pour un usage perso immédiat."].map((t, i) =>
                      <div key={i} style={{ display: "flex", gap: 10, alignItems: "flex-start", marginBottom: 12 }}><span style={{ color: "#a23b3b", fontWeight: 700, marginTop: 3, fontSize: 13 }}>—</span><span style={{ fontFamily: BODY, fontSize: 14, color: "#2c2e2d", lineHeight: 1.55 }}>{t}</span></div>)}
                  </div>
                </div>
              </div>

              <button onClick={reset} style={{ marginTop: 20, fontFamily: BODY, fontSize: 14, fontWeight: 600, color: C.ardoiseF, background: "none", border: "none", cursor: "pointer", padding: 0 }}>↺ Modifier les paramètres</button>

              {/* ---------- ÉTAPE 3 : RENDEZ-VOUS ---------- */}
              <div style={{ marginTop: 40, background: C.encre, color: "#fff", padding: "clamp(30px,5vw,60px)" }}>
                <div style={{ maxWidth: "44em" }}>
                  <span style={{ fontFamily: BODY, fontSize: 12, letterSpacing: "0.22em", textTransform: "uppercase", color: C.sauge, fontWeight: 600 }}>Passer à l'action</span>
                  <h3 style={{ fontFamily: SERIF, fontSize: "clamp(24px,3vw,38px)", fontWeight: 500, lineHeight: 1.18, letterSpacing: "-0.015em", margin: "16px 0 0", color: "#fff" }}>
                    Appliquons ces leviers à votre situation réelle.
                  </h3>
                  <p style={{ fontFamily: BODY, fontSize: 16, color: "#b9bbb8", lineHeight: 1.65, marginTop: 18 }}>
                    Cette simulation est une moyenne. Votre schéma, lui, se construit sur-mesure — à partir de vos chiffres et de vos objectifs.
                  </p>
                  <div style={{ marginTop: 28 }}>
                    <a href={"https://cal.eu/" + CAL_LINK} onClick={bookCal}
                      data-cal-link={CAL_LINK} data-cal-origin={CAL_ORIGIN} data-cal-config='{"layout":"month_view"}'
                      target="_blank" rel="noopener noreferrer"
                      style={{ display: "inline-flex", alignItems: "center", gap: 10, fontFamily: BODY, fontSize: 16, fontWeight: 600, color: "#fff", background: C.sauge, border: "none", borderRadius: 2, padding: "17px 32px", textDecoration: "none", cursor: "pointer" }}>
                      Réserver mon 1er rendez-vous offert <span>→</span>
                    </a>
                  </div>
                  <p style={{ fontFamily: BODY, fontSize: 13, color: "#8a8c89", marginTop: 18 }}>Sans engagement · Confidentiel</p>
                  <p style={{ fontFamily: BODY, fontSize: 12, color: "#7f827f", marginTop: 14 }}>
                    Simulation indicative à visée pédagogique — ne constitue pas une consultation juridique ou fiscale.
                  </p>
                </div>
              </div>
            </div>
          }
        </div>
      </section>);
  }

  // ----- sous-composants -----
  function Toggle({ options, value, onChange, C }) {
    return (
      <div style={{ display: "inline-flex", border: `1px solid ${C.trait}`, borderRadius: 2, overflow: "hidden", background: C.blanc, width: "100%" }}>
        {options.map((o) => {
          const on = o.id === value;
          return (
            <button key={o.id} onClick={() => onChange(o.id)}
              style={{ flex: 1, fontFamily: BODY, fontSize: 14, fontWeight: 600, padding: "13px 10px", cursor: "pointer", border: "none", background: on ? C.encre : "transparent", color: on ? "#fff" : C.encre, transition: "background .25s" }}>
              {o.label}
            </button>);
        })}
      </div>);
  }

  function Voie({ titre, netLabel, net, base, run, segments, lines, C, SERIF, BODY, pct }) {
    return (
      <div>
        <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", marginBottom: 10 }}>
          <span style={{ fontFamily: BODY, fontSize: 12.5, color: C.ardoise, letterSpacing: "0.14em", textTransform: "uppercase", fontWeight: 600 }}>{titre}</span>
          <span style={{ fontFamily: BODY, fontSize: 13, color: C.gris, fontWeight: 600 }}>{pct(net, base)} % net</span>
        </div>
        <SegBar run={run} base={base} segments={segments} />
        <div style={{ marginTop: 14 }}>
          {lines.map((l, i) => <WaterLine key={i} {...l} />)}
        </div>
        <div style={{ marginTop: 12, display: "flex", alignItems: "baseline", gap: 10 }}>
          <span style={{ fontFamily: BODY, fontSize: 12.5, color: C.gris }}>{netLabel}</span>
          <CountEuro value={net} run={run} style={{ fontFamily: SERIF, fontSize: "clamp(26px,3.4vw,36px)", fontWeight: 500, color: C.encre, letterSpacing: "-0.01em" }} />
        </div>
      </div>);
  }

  function DarkLine({ label, value, kind, C, BODY }) {
    return (
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", padding: "8px 0", borderBottom: "1px solid rgba(255,255,255,.12)" }}>
        <span style={{ fontFamily: BODY, fontSize: 13.5, color: kind === "keep" ? "#fff" : "#9ea7a0", fontWeight: kind === "keep" ? 600 : 400, display: "inline-flex", alignItems: "center", gap: 8 }}>
          {kind === "loss" && <span style={{ width: 10, height: 10, borderRadius: 2, backgroundImage: "repeating-linear-gradient(135deg, rgba(255,255,255,.4) 0, rgba(255,255,255,.4) 1.5px, transparent 1.5px, transparent 5px)" }} />}
          {label}
        </span>
        <span style={{ fontFamily: BODY, fontSize: 13.5, color: kind === "keep" ? C.sauge : "#9ea7a0", fontWeight: kind === "keep" ? 700 : 500, fontVariantNumeric: "tabular-nums" }}>
          {kind === "loss" ? "– " : ""}{fmt(value)}
        </span>
      </div>);
  }

  // Segment de bascule (horizon)
  function HSegment({ options, value, onChange, C, BODY }) {
    return (
      <div style={{ display: "inline-flex", border: `1px solid ${C.trait}`, borderRadius: 999, overflow: "hidden", background: C.albatre }}>
        {options.map((o) => {
          const on = o.id === value;
          return (
            <button key={o.id} onClick={() => onChange(o.id)}
              style={{ fontFamily: BODY, fontSize: 13, fontWeight: 600, padding: "9px 16px", cursor: "pointer", border: "none", background: on ? C.encre : "transparent", color: on ? "#fff" : C.gris, transition: "background .25s, color .25s" }}>
              {o.label}
            </button>);
        })}
      </div>);
  }

  // Bloc d'impact adapté à l'objectif visé
  function ObjectiveImpact({ objectif, bestPropre, holding, reveal, capacite, C, SERIF, BODY, fmt }) {
    const wrap = (children) => (
      <div style={{ marginTop: 22, opacity: reveal ? 1 : 0, transform: reveal ? "none" : "translateY(12px)", transition: "opacity .6s .15s, transform .6s .15s" }}>{children}</div>);
    const eyebrow = (txt, color) => <span style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: color || C.ardoise, fontWeight: 600 }}>{txt}</span>;

    // --- IMMOBILIER : capacité d'acquisition (apport 20 %) ---
    if (objectif === "immobilier") {
      const capPropre = capacite(bestPropre);
      const capGroupe = capacite(holding.conserve);
      const mult = bestPropre > 0 ? capGroupe / capPropre : 0;
      return wrap(
        <div style={{ border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)" }}>
          {eyebrow("Effet de levier bancaire · apport 20 %")}
          <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 6px" }}>Votre capacité d'acquisition immobilière</h3>
          <p style={{ fontFamily: BODY, fontSize: 14, color: C.gris, lineHeight: 1.6, margin: "0 0 22px", maxWidth: "40em" }}>
            Un dirigeant n'achète pas comptant : il transforme son net en apport. Avec un financement classique (20 % d'apport), chaque euro conservé en pilote cinq.
          </p>
          <div className="hd-grid2">
            <div style={{ background: C.blanc, border: `1px solid ${C.trait}`, padding: "20px 22px" }}>
              <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.ardoise, fontWeight: 600, letterSpacing: "0.04em" }}>En nom propre (meilleure voie)</div>
              <div style={{ fontFamily: SERIF, fontSize: "clamp(26px,3.4vw,38px)", fontWeight: 500, color: C.encre, marginTop: 8 }}>{fmt(capPropre)}</div>
              <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.gris, marginTop: 4 }}>apport {fmt(bestPropre)}</div>
            </div>
            <div style={{ background: C.encre, padding: "20px 22px" }}>
              <div style={{ fontFamily: BODY, fontSize: 12.5, color: C.sauge, fontWeight: 600, letterSpacing: "0.04em" }}>Via l'architecture de Groupe</div>
              <div style={{ fontFamily: SERIF, fontSize: "clamp(26px,3.4vw,38px)", fontWeight: 500, color: "#fff", marginTop: 8 }}>{fmt(capGroupe)}</div>
              <div style={{ fontFamily: BODY, fontSize: 12.5, color: "#9ea7a0", marginTop: 4 }}>apport {fmt(holding.conserve)}</div>
            </div>
          </div>
          <p style={{ fontFamily: BODY, fontSize: 14, color: C.encre, lineHeight: 1.55, margin: "18px 0 0" }}>
            Soit un actif <b style={{ color: C.saugeF }}>≈ {mult.toFixed(1).replace(".", ",")}× plus grand</b> — à effort d'épargne identique. Ne pas structurer, c'est se priver de la moitié de son parc.
          </p>
        </div>);
    }

    // --- TRANSMISSION : souveraineté / droits de vote ---
    if (objectif === "transmission") {
      return wrap(
        <div style={{ border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)" }}>
          {eyebrow("Le nerf de la guerre · pouvoir décisionnaire")}
          <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 6px" }}>Transmettre la valeur sans céder le contrôle</h3>
          <p style={{ fontFamily: BODY, fontSize: 14, color: C.gris, lineHeight: 1.6, margin: "0 0 22px", maxWidth: "42em" }}>
            La transmission n'est pas qu'une affaire de fiscalité : c'est d'abord une affaire de droits de vote.
          </p>
          <div className="hd-grid2">
            <div style={{ background: C.blanc, border: `1px solid ${C.trait}`, padding: "22px 24px" }}>
              <div style={{ fontFamily: BODY, fontSize: 12, color: C.ardoise, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>Démembrement classique</div>
              <div style={{ fontFamily: SERIF, fontSize: "clamp(22px,2.8vw,30px)", fontWeight: 500, color: C.encre, margin: "10px 0 4px" }}>Pouvoir partagé</div>
              <div style={{ marginTop: 12, marginBottom: 14, height: 10, borderRadius: 2, background: C.albatre, border: `1px solid ${C.trait}`, overflow: "hidden" }}>
                <div style={{ height: "100%", width: reveal ? "55%" : 0, transition: "width 1s .2s", backgroundImage: "repeating-linear-gradient(135deg, rgba(91,124,153,.5) 0, rgba(91,124,153,.5) 1.5px, transparent 1.5px, transparent 6px)", backgroundColor: "rgba(91,124,153,.12)" }} />
              </div>
              <p style={{ fontFamily: BODY, fontSize: 13, color: C.gris, lineHeight: 1.6, margin: 0 }}>
                La méthode classique transmet la nue-propriété : vous perdez votre qualité pleine d'associé sur les titres cédés et partagez les décisions stratégiques avec les nu-propriétaires.
              </p>
            </div>
            <div style={{ background: C.encre, padding: "22px 24px" }}>
              <div style={{ fontFamily: BODY, fontSize: 12, color: C.sauge, fontWeight: 600, letterSpacing: "0.06em", textTransform: "uppercase" }}>Parts de préférence · Monarch</div>
              <div style={{ fontFamily: SERIF, fontSize: "clamp(26px,3.4vw,38px)", fontWeight: 500, color: "#fff", margin: "8px 0 2px", lineHeight: 1.05 }}>Contrôle verrouillé</div>
              <div style={{ fontFamily: BODY, fontSize: 13, color: C.sauge, fontWeight: 600, marginBottom: 12 }}>majorité de décision conservée</div>
              <div style={{ marginBottom: 14, height: 10, borderRadius: 2, background: "rgba(255,255,255,.08)", overflow: "hidden" }}>
                <div style={{ height: "100%", width: reveal ? "92%" : 0, transition: "width 1.1s .3s", background: C.sauge }} />
              </div>
              <p style={{ fontFamily: BODY, fontSize: 13, color: "#cfd2cf", lineHeight: 1.6, margin: 0 }}>
                Vous transmettez l'essentiel de la valeur économique à vos héritiers tout en conservant, via des parts de préférence à droit de vote renforcé, <b style={{ color: "#fff" }}>la direction du groupe</b> — dans le respect de la prohibition des clauses léonines. Le patrimoine se transmet, le pouvoir de décision reste.
              </p>
            </div>
          </div>
        </div>);
    }

    // --- LIQUIDITÉS : levier société civile (prêt à l'associé) ---
    if (objectif === "liquidites") {
      return wrap(
        <div style={{ background: C.encre, padding: "clamp(24px,4vw,36px)" }}>
          {eyebrow("Le levier de la société civile", C.sauge)}
          <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 10px", color: "#fff" }}>Du train de vie sans détruire la société</h3>
          <p style={{ fontFamily: BODY, fontSize: 15, color: "#cfd2cf", lineHeight: 1.7, margin: 0, maxWidth: "44em" }}>
            La trésorerie remonte en franchise d'impôt vers la holding, puis vous est prêtée via une <b style={{ color: "#fff" }}>société civile patrimoniale (SCP)</b>. Vous disposez de liquidités nettes, et les intérêts remboursés capitalisent au sein de votre propre structure au lieu d'être définitivement détruits par l'impôt.
          </p>
        </div>);
    }

    // --- DIVERSIFICATION : réinvestir via le groupe ---
    return wrap(
      <div style={{ border: `1px solid ${C.trait}`, background: C.albatre, padding: "clamp(22px,3vw,32px)" }}>
        {eyebrow("Réinvestir via le groupe")}
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 10px" }}>Une force de frappe intacte pour votre prochaine activité</h3>
        <p style={{ fontFamily: BODY, fontSize: 15, color: C.gris, lineHeight: 1.7, margin: 0, maxWidth: "44em" }}>
          Capitalisée dans la holding, votre trésorerie finance votre nouvelle activité sans réimposition à l'entrée : l'IS déjà acquitté n'est pas dupliqué. Vous réinvestissez <b style={{ color: C.encre }}>{fmt(holding.conserve)}</b> là où le nom propre ne laisserait que <b style={{ color: C.encre }}>{fmt(bestPropre)}</b> — la différence, c'est votre marge de manœuvre stratégique.
        </p>
      </div>);
  }

  // Rappel des paramètres dans l'écran de résultats
  function ParamRecap({ montant, forme, objectif, hasHolding, onEdit, C, BODY, fmt }) {
    const items = [
      { k: "Trésorerie", v: fmt(montant) },
      { k: "Forme", v: forme }
    ];
    return (
      <div style={{ display: "flex", alignItems: "center", justifyContent: "space-between", gap: 16, flexWrap: "wrap", border: `1px solid ${C.trait}`, background: C.albatre, padding: "14px 18px", marginBottom: 16 }}>
        <div className="hd-recap" style={{ display: "flex", flexWrap: "wrap", gap: 26 }}>
          {items.map((it) =>
            <div key={it.k} style={{ display: "flex", flexDirection: "column", gap: 3 }}>
              <span style={{ fontFamily: BODY, fontSize: 10.5, letterSpacing: "0.16em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>{it.k}</span>
              <span style={{ fontFamily: BODY, fontSize: 15, color: C.encre, fontWeight: 600 }}>{it.v}</span>
            </div>
          )}
        </div>
        <button onClick={onEdit} style={{ fontFamily: BODY, fontSize: 13, fontWeight: 600, color: C.ardoiseF, background: "none", border: "none", cursor: "pointer", padding: 0, whiteSpace: "nowrap" }}>↺ Modifier</button>
      </div>);
  }

  // Courbe de capitalisation — SVG « plan d'architecte »
  function GrowthCurveBlueprint({ pPropre, pGroupe, reveal, C, SERIF, BODY, 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 af = (k) => (Math.pow(1.04, k) - 1) / 0.04;
    const yrs = [1, 2, 3, 4, 5, 6, 7, 8, 9, 10];
    const vP = yrs.map((k) => pPropre * af(k));
    const vG = yrs.map((k) => pGroupe * af(k));
    const maxV = vG[9] || 1;
    const X = (k) => x0 + (x1 - x0) * ((k - 1) / 9);
    const Y = (v) => yb - (yb - yt) * (v / maxV);
    const toPath = (arr) => arr.map((v, i) => `${i === 0 ? "M" : "L"} ${X(i + 1).toFixed(1)} ${Y(v).toFixed(1)}`).join(" ");
    const area = [
      ...vG.map((v, i) => `${X(i + 1).toFixed(1)},${Y(v).toFixed(1)}`),
      ...vP.map((v, i) => `${X(10 - i).toFixed(1)},${Y(vP[9 - i]).toFixed(1)}`)
    ].join(" ");
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <span style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>Projection de capitalisation · 10 ans @ 4 %/an</span>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>L'effet composé de la déperdition</h3>
        <svg viewBox="0 0 740 290" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }} role="img" aria-label="Courbe de capitalisation sur 10 ans">
          <defs>
            <pattern id="hdHatch" 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>
          {/* axe X */}
          <line x1={x0} y1={yb} x2={x1} y2={yb} stroke={C.trait} strokeWidth="1" />
          {[1, 5, 10].map((k) =>
            <text key={k} x={X(k)} y={yb + 20} fontFamily="'Archivo',sans-serif" fontSize="11" fill={C.grisC} textAnchor="middle" letterSpacing="0.08em">AN {k}</text>
          )}
          {/* zone de différence */}
          <polygon className={"hd-soft" + (on ? " on" : "")} style={{ transitionDelay: "1.6s" }} points={area} fill="url(#hdHatch)" />
          {/* tracé nom propre */}
          <path className={"hd-curve" + (on ? " on" : "")} d={toPath(vP)} fill="none" stroke={C.ardoise} strokeWidth="1.6" strokeDasharray={on ? "5 4" : "2600"} opacity="0.55" />
          {/* tracé groupe */}
          <path className={"hd-curve" + (on ? " on" : "")} style={{ transitionDelay: ".15s" }} d={toPath(vG)} fill="none" stroke={C.encre} strokeWidth="2.2" />
          {/* points & labels de fin */}
          <circle className={"hd-soft" + (on ? " on" : "")} style={{ transitionDelay: "1.7s" }} cx={X(10)} cy={Y(vG[9])} r="3.5" fill={C.saugeF} />
          <circle className={"hd-soft" + (on ? " on" : "")} style={{ transitionDelay: "1.7s" }} cx={X(10)} cy={Y(vP[9])} r="3" fill={C.ardoise} />
        </svg>
        <div style={{ display: "flex", gap: 26, flexWrap: "wrap", marginTop: 16 }}>
          <Legend swatch={<span style={{ width: 16, height: 0, borderTop: `2px dashed ${C.ardoise}`, opacity: 0.6, display: "inline-block" }} />} label="Nom propre" value={fmt(vP[9])} C={C} BODY={BODY} />
          <Legend swatch={<span style={{ width: 16, height: 0, borderTop: `2px solid ${C.encre}`, display: "inline-block" }} />} label="Architecture de Groupe" value={fmt(vG[9])} C={C} BODY={BODY} strong />
        </div>
      </div>);
  }

  function Legend({ swatch, label, value, C, BODY, strong }) {
    return (
      <div style={{ display: "flex", alignItems: "center", gap: 10 }}>
        {swatch}
        <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, fontVariantNumeric: "tabular-nums" }}>{value}</span>
      </div>);
  }

  // Schéma d'architecture — SVG relationnel statique, style plan d'architecte
  function ArchitectureFlowchart({ reveal, C, SERIF, BODY }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 200); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const onc = on ? " on" : "";
    const box = (x, y, w, h, l2, l1) => (
      <g>
        <rect x={x} y={y} width={w} height={h} fill={C.albatre} stroke={C.encre} strokeWidth="1" />
        {l1 ?
          <g>
            <text x={x + w / 2} y={y + h / 2 - 7} fontFamily="'Archivo',sans-serif" fontSize="12.5" fontWeight="600" letterSpacing="0.1em" fill={C.encre} textAnchor="middle">{l2}</text>
            <text x={x + w / 2} y={y + h / 2 + 11} fontFamily="'Archivo',sans-serif" fontSize="12.5" fontWeight="600" letterSpacing="0.1em" fill={C.encre} textAnchor="middle">{l1}</text>
          </g>
          :
          <text x={x + w / 2} y={y + h / 2 + 4} fontFamily="'Archivo',sans-serif" fontSize="12.5" fontWeight="600" letterSpacing="0.1em" fill={C.encre} textAnchor="middle">{l2}</text>
        }
      </g>);
    const flow = (d, delay, opts) => (
      <path className={"hd-line" + onc} style={{ transitionDelay: delay + "s" }} d={d} fill="none"
        stroke={(opts && opts.color) || C.encre} strokeWidth={(opts && opts.w) || 1} markerEnd="url(#hdArrow)" strokeDasharray={opts && opts.dash ? "4 4" : undefined} />);
    const lbl = (x, y, txt, delay, color) => (
      <text className={"hd-soft" + onc} style={{ transitionDelay: delay + "s" }} x={x} y={y} fontFamily="'Archivo',sans-serif" fontSize="10.5" letterSpacing="0.06em" fill={color || C.gris} textAnchor="middle">{txt}</text>);
    return (
      <div style={{ marginTop: 22, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <span style={{ fontFamily: BODY, fontSize: 11.5, letterSpacing: "0.18em", textTransform: "uppercase", color: C.ardoise, fontWeight: 600 }}>Le schéma cible · plan d'architecte</span>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>Votre architecture de souveraineté</h3>
        <svg viewBox="0 0 760 560" style={{ width: "100%", height: "auto", display: "block" }} role="img" aria-label="Schéma de l'architecture de groupe">
          <defs>
            <marker id="hdArrow" viewBox="0 0 10 10" refX="9" refY="5" markerWidth="7" markerHeight="7" orient="auto-start-reverse">
              <path d="M0,0 L10,5 L0,10" fill="none" stroke={C.encre} strokeWidth="1.2" />
            </marker>
          </defs>

          {/* flux : exploitation -> holding */}
          {flow("M 150 452 C 150 380, 300 360, 338 318", 0.1)}
          {lbl(205, 392, "Remontée mère-fille", 0.5, C.saugeF)}
          {/* flux : holding -> SCP */}
          {flow("M 432 318 C 520 360, 600 392, 612 452", 0.8)}
          {lbl(575, 392, "Prêt à l'associé", 1.2, C.ardoise)}
          {/* flux : holding -> héritiers (actions ordinaires) */}
          {flow("M 348 246 C 300 180, 230 140, 178 100", 1.5, { dash: true, color: C.ardoise })}
          {lbl(232, 168, "Actions ordinaires (valeur)", 1.9, C.ardoise)}
          {/* flux : holding -> dirigeant (actions de préférence) */}
          {flow("M 432 246 C 500 180, 560 140, 588 100", 2.1, { w: 2 })}
          {lbl(548, 175, "Actions de préférence — contrôle absolu", 2.5, C.encre)}

          {/* boîtes */}
          {box(60, 40, 230, 60, "HÉRITIERS", "BÉNÉFICIAIRES")}
          {box(470, 40, 230, 60, "LE DIRIGEANT")}
          {box(270, 248, 220, 72, "HOLDING", "ANIMATRICE")}
          {box(30, 452, 240, 60, "SOCIÉTÉ", "D'EXPLOITATION")}
          {box(500, 452, 230, 60, "SOCIÉTÉ CIVILE", "PATRIMONIALE")}

          {/* cadenas + mention de souveraineté sous le dirigeant */}
          <g className={"hd-soft" + onc} style={{ transitionDelay: "2.6s" }}>
            <rect x={577} y={106} width={16} height={11} fill="none" stroke={C.encre} strokeWidth="1" />
            <path d={`M 580 106 L 580 101 A 5 5 0 0 1 590 101 L 590 106`} fill="none" stroke={C.encre} strokeWidth="1" />
            <text x={585} y={135} fontFamily="'Archivo',sans-serif" fontSize="10.5" letterSpacing="0.04em" fill={C.encre} textAnchor="middle">Contrôle décisionnel verrouillé</text>
            <text x={585} y={149} fontFamily="'Archivo',sans-serif" fontSize="10.5" letterSpacing="0.04em" fill={C.encre} textAnchor="middle">(parts de préférence · vote renforcé)</text>
          </g>
        </svg>
        <p style={{ fontFamily: BODY, fontSize: 13, color: C.gris, lineHeight: 1.6, margin: "16px 0 0", maxWidth: "44em" }}>
          La valeur économique descend vers vos bénéficiaires, le pouvoir reste verrouillé entre vos mains. C'est précisément ce que l'ingénierie des parts de préférence permet — et qu'un simple arbitrage fiscal ne saura jamais offrir.
        </p>
      </div>);
  }

  window.HoldingDiagnostic = HoldingDiagnostic;
})();