// ============================================================
// Monarch — Simulateurs : DMTG (escalier successoral) ·
// Plus-value immobilière des particuliers (sablier / double échelle)
// Requiert window.MSC (simcore.jsx) et window.__mscShared (simulators2.jsx).
// Visuels SVG « blueprint » explicitement demandés (escalier, frise).
// ============================================================

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

  // tranches du barème DMTG en ligne directe
  const TR = [
    [0, 8072, 0.05], [8072, 12109, 0.10], [12109, 15932, 0.15],
    [15932, 552324, 0.20], [552324, 902838, 0.30], [902838, 1805677, 0.40], [1805677, Infinity, 0.45]
  ];
  function breakdown(base) {
    let reste = Math.max(0, base);
    return TR.map(([lo, hi, taux]) => {
      const span = hi - lo;
      const amount = Math.min(Math.max(0, base - lo), span);
      const tax = amount * taux;
      return { taux, amount, tax, reached: base > lo };
    });
  }

  // Liens de parenté : abattement + barème applicable
  const LIENS = [
    { id: "enfant", label: "Enfant", abat: 100000, bareme: "direct" },
    { id: "petitenfant", label: "Petit-enfant", abat: 31865, bareme: "direct" },
    { id: "arriere", label: "Arrière-petit-enfant", abat: 5310, bareme: "direct" },
    { id: "epoux", label: "Époux", abat: 80724, bareme: "direct", exoSucc: true },
    { id: "pacs", label: "Partenaire de Pacs", abat: 80724, bareme: "direct", exoSucc: true },
    { id: "ascendant", label: "Ascendant", abat: 100000, bareme: "direct" },
    { id: "frere", label: "Frère ou sœur", abat: 15932, bareme: "frere" },
    { id: "neveu", label: "Neveu ou nièce", abat: 7967, bareme: "flat55" },
    { id: "autre", label: "Autre situation", abat: 1594, bareme: "flat60" }
  ];
  function baremeFrere(base) { return Math.min(Math.max(0, base), 24430) * 0.35 + Math.max(0, base - 24430) * 0.45; }
  function taxForLien(bareme, base) {
    if (bareme === "frere") return baremeFrere(base);
    if (bareme === "flat55") return Math.max(0, base) * 0.55;
    if (bareme === "flat60") return Math.max(0, base) * 0.60;
    return dmtg(base);
  }

  // =====================================================
  // 1. DMTG — Droits de mutation à titre gratuit
  // =====================================================
  function DMTGSimulator() {
    useEffect(injectCore, []);
    const { ParamRecap } = shared();
    const [valeur, setValeur] = useState(3000000);
    const [enfants, setEnfants] = useState(2);
    const [lien, setLien] = useState("enfant");
    const [horizon, setHorizon] = useState("donation");
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const V = Math.max(0, Number(valeur) || 0);
    const n = Math.max(1, Number(enfants) || 1);
    const L = LIENS.find((x) => x.id === lien) || LIENS[0];
    const perChild = V / n;
    const exonere = horizon === "succession" && L.exoSucc;
    // abattement légal selon le lien (1 abattement par bénéficiaire)
    const base = exonere ? 0 : Math.max(0, perChild - L.abat);
    const taxPer = exonere ? 0 : taxForLien(L.bareme, base);
    const activeBase = base;
    const activeTax = taxPer * n;
    const net = V - activeTax;
    const tauxMoyen = perChild > 0 ? (taxPer / perChild) * 100 : 0;
    const isDirect = L.bareme === "direct";

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

    return (
      <Shell eyebrow="Transmission familiale · Droits de mutation à titre gratuit"
        title="Droits de mutation à titre gratuit : ce que le barème impose à vos bénéficiaires."
        intro="Sélectionnez le lien de parenté : l'abattement légal et le barème s'appliquent automatiquement. Mesurez la ponction et l'effet de l'anticipation.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Calculer les droits">
            <div><Label>Patrimoine / entreprise à transmettre</Label><MoneyInput value={valeur} onChange={setValeur} min={100000} max={30000000} step={100000} /></div>
            <div><Label>Nombre de bénéficiaires</Label><IntInput value={enfants} onChange={setEnfants} min={1} max={8} /></div>
            <div>
              <Label>Lien de parenté du bénéficiaire</Label>
              <select value={lien} onChange={(e) => setLien(e.target.value)}
                style={{ width: "100%", fontFamily: BODY, fontSize: 15, color: C.encre, background: C.blanc, border: `1px solid ${C.trait}`, borderRadius: 2, padding: "13px 14px", outline: "none", cursor: "pointer", appearance: "auto" }}>
                {LIENS.map((o) => <option key={o.id} value={o.id}>{o.label}</option>)}
              </select>
              <p style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, marginTop: 10, lineHeight: 1.5 }}>Abattement légal : <b style={{ color: C.encre }}>{fmt(L.abat)}</b> par bénéficiaire{L.exoSucc ? " · succession totalement exonérée" : ""}.</p>
            </div>
            <div>
              <Label>Horizon de transmission</Label>
              <Toggle full options={[{ id: "donation", label: "Anticipée (donation)" }, { id: "succession", label: "Au décès (succession)" }]} value={horizon} onChange={setHorizon} />
            </div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Patrimoine", fmt(V)], ["Bénéficiaires", String(n)], ["Lien", L.label], ["Abattement", fmt(L.abat)], ["Part nette taxable", fmt(activeBase)]]} onEdit={() => setDone(false)} />

            {exonere ?
              <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}>Transmission exonérée</Eyebrow>
                <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, margin: "10px 0 8px", letterSpacing: "-0.01em" }}>Aucun droit de succession entre {L.label.toLowerCase()}</h3>
                <p style={{ fontFamily: BODY, fontSize: 15, color: "#2c2e2d", lineHeight: 1.6, margin: 0, maxWidth: "44em" }}>Depuis la loi TEPA, le conjoint survivant et le partenaire de Pacs sont totalement exonérés de droits de succession. L'enjeu se déplace alors vers la transmission à la génération suivante et la protection du conjoint (quotité disponible, démembrement croisé écarté).</p>
              </div>
              : isDirect ?
              <TaxStaircase reveal={reveal} base={activeBase} perChildTax={taxPer} n={n} />
              :
              <div className={"msc-soft" + (reveal ? " on" : "")} style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
                <Eyebrow>Barème applicable · {L.label}</Eyebrow>
                <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 16px" }}>{L.bareme === "frere" ? "35 % puis 45 % au-delà de 24 430 €" : L.bareme === "flat55" ? "Taux unique de 55 %" : "Taux unique de 60 %"}</h3>
                <div style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris, marginBottom: 6 }}>Droits par bénéficiaire (taux moyen {tauxMoyen.toFixed(1).replace(".", ",")} %)</div>
                <CountEuro value={taxPer} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(28px,3.8vw,44px)", fontWeight: 500, color: C.encre, letterSpacing: "-0.01em" }} />
              </div>}

            <div className={"msc-soft" + (reveal ? " on" : "")} style={{ transitionDelay: ".2s", marginTop: 22, background: C.encre, color: "#fff", padding: "clamp(26px,4vw,42px)" }}>
              <Eyebrow color={C.sauge}>Affichage choc</Eyebrow>
              <p style={{ fontFamily: SERIF, fontSize: "clamp(22px,3vw,34px)", fontWeight: 500, lineHeight: 1.3, letterSpacing: "-0.015em", margin: "12px 0 0", color: "#fff" }}>
                La charge fiscale imposée à vos héritiers s'élève à <span style={{ color: C.sauge }}>{fmt(activeTax)}</span>.
              </p>
              <p style={{ fontFamily: BODY, fontSize: 15, color: "#cfd2cf", lineHeight: 1.7, margin: "14px 0 0", maxWidth: "44em" }}>
                Sans anticipation, c'est l'outil de travail ou le patrimoine immobilier lui-même qui devra être liquidé pour honorer cette dette envers l'État. Net transmis : <b style={{ color: "#fff" }}>{fmt(net)}</b>.
              </p>
              {horizon === "donation" &&
                <p style={{ fontFamily: BODY, fontSize: 14, color: C.sauge, fontWeight: 600, margin: "16px 0 0" }}>
                  L'anticipation par donation permet de renouveler l'abattement de {fmt(L.abat)} tous les 15 ans : fractionner la transmission réduit mécaniquement les droits.
                </p>}
            </div>

            <Doctrine open={reveal} eyebrow="À retenir" title="Donner tout en gardant la direction de l'entreprise" accent={C.sauge}>
              <p style={{ margin: 0 }}>Pour réduire cette pression, la pratique courante préconise le démembrement (donation avec réserve d'usufruit). Nous l'écartons quasi-systématiquement : elle vous ampute de votre qualité pleine et entière d'associé sur les titres transmis et fragilise votre pouvoir de décision. Notre architecture repose sur une <b style={{ color: "#fff" }}>holding familiale</b> et l'émission de <b style={{ color: "#fff" }}>parts de préférence</b> : la valeur économique glisse vers la génération suivante pour purger les DMTG, tandis que votre <b style={{ color: "#fff" }}>pouvoir de décision reste verrouillé</b> via un droit de vote renforcé — dans le respect de la prohibition des clauses léonines (un droit minimal restant attaché à chaque catégorie de titres).</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["Donner de son vivant réduit fortement les droits (abattements renouvelés tous les 15 ans).", "Avec des parts de préférence, vous transmettez sans perdre la direction.", "Anticiper évite à vos héritiers d'avoir à vendre pour payer l'impôt."]}
              contre={["Donner est irrévocable : le patrimoine sort de votre main.", "Le barème grimpe vite (jusqu'à 45 % en ligne directe, plus pour les autres).", "Mise en place technique (statuts, pactes) à préparer avec un professionnel."]} />

            <CTAEmail note="Modélisation d'une transmission sous parts de préférence lors du premier rendez-vous." />
          </div>}
      </Shell>);
  }

  // Escalier SVG : 7 marches = tranches du barème, hauteur ∝ taux
  function TaxStaircase({ reveal, base, perChildTax, n }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 250); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const cells = breakdown(base);
    const x0 = 40, x1 = 700, yb = 250, top = 30;
    const W = (x1 - x0) / TR.length;
    const H = (rate) => (yb - top) * (rate / 0.45);
    return (
      <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>L'escalier du barème · part taxable par enfant</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>La ponction grimpe par tranches, de 5 % à 45 %</h3>
        <svg viewBox="0 0 720 290" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }} role="img" aria-label="Escalier du barème DMTG">
          <defs>
            <pattern id="dmtgHatch" width="7" height="7" patternTransform="rotate(45)" patternUnits="userSpaceOnUse">
              <line x1="0" y1="0" x2="0" y2="7" stroke={C.ardoise} strokeWidth="0.9" opacity="0.55" />
            </pattern>
          </defs>
          <line x1={x0} y1={yb} x2={x1} y2={yb} stroke={C.trait} strokeWidth="1" />
          {cells.map((c, i) => {
            const x = x0 + i * W, h = H(c.taux), used = c.amount > 0;
            return (
              <g key={i}>
                <rect x={x + 3} y={on ? (yb - h) : yb} width={W - 6} height={on ? h : 0}
                  fill={used ? "url(#dmtgHatch)" : "transparent"} stroke={used ? C.ardoise : C.trait} strokeWidth="1"
                  style={{ transition: "y .7s cubic-bezier(.2,.7,.3,1), height .7s cubic-bezier(.2,.7,.3,1)", transitionDelay: (i * 90) + "ms" }} />
                <text x={x + W / 2} y={yb + 18} fontFamily="'Archivo',sans-serif" fontSize="11" fontWeight={used ? 700 : 400} fill={used ? C.encre : C.grisC} textAnchor="middle">{Math.round(c.taux * 100)} %</text>
                {used && c.tax > 0 &&
                  <text x={x + W / 2} y={yb - h - 8} fontFamily="'Archivo',sans-serif" fontSize="10.5" fill={C.ardoiseF} textAnchor="middle" className={"msc-soft" + (on ? " on" : "")} style={{ transitionDelay: (i * 90 + 500) + "ms" }}>{fmt(c.tax)}</text>}
              </g>);
          })}
        </svg>
        <div style={{ display: "flex", justifyContent: "space-between", flexWrap: "wrap", gap: 12, marginTop: 16, paddingTop: 16, borderTop: `1px solid ${C.trait}` }}>
          <span style={{ fontFamily: BODY, fontSize: 13.5, color: C.gris }}>Droits par enfant</span>
          <CountEuro value={perChildTax} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(22px,2.8vw,32px)", fontWeight: 500, color: C.encre, letterSpacing: "-0.01em" }} />
        </div>
      </div>);
  }

  // =====================================================
  // 2. PLUS-VALUE IMMOBILIÈRE DES PARTICULIERS — le sablier
  // =====================================================
  function abatIR(d) { if (d <= 5) return 0; if (d >= 22) return 1; return (d - 5) * 0.06; }
  function abatPS(d) { if (d <= 5) return 0; if (d >= 30) return 1; if (d <= 21) return (d - 5) * 0.0165; if (d === 22) return 0.28; return 0.28 + (d - 22) * 0.09; }
  function surtaxe(pvi) {
    if (pvi <= 50000) return 0;
    const r = pvi <= 100000 ? 0.02 : pvi <= 150000 ? 0.03 : pvi <= 200000 ? 0.04 : pvi <= 250000 ? 0.05 : 0.06;
    return pvi * r;
  }

  function PrivateRealEstateGainSimulator() {
    useEffect(injectCore, []);
    const { ParamRecap } = shared();
    const [achat, setAchat] = useState(300000);
    const [cession, setCession] = useState(500000);
    const [duree, setDuree] = useState(10);
    const [done, setDone] = useState(false);
    const [busy, setBusy] = useState(false);
    const reveal = useReveal(done, 250);

    const P = Math.max(0, Number(achat) || 0);
    const R = Math.max(0, Number(cession) || 0);
    const D = Math.max(0, Math.min(30, Number(duree) || 0));
    const acqMajore = P * 1.075 * (D > 5 ? 1.15 : 1);
    const pv = Math.max(0, R - acqMajore);
    const baseIR = pv * (1 - abatIR(D));
    const basePS = pv * (1 - abatPS(D));
    const ir = baseIR * 0.19;
    const ps = basePS * 0.172;
    const sur = surtaxe(baseIR);
    const total = ir + ps + sur;
    const net = R - total;

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

    return (
      <Shell eyebrow="Patrimoine du dirigeant · Plus-value immobilière (particulier)"
        title="Revendre un bien : combien part en impôt selon la durée."
        intro="Calculez l'impôt réel d'une revente à votre nom — l'impôt sur le revenu disparaît après 22 ans, les prélèvements sociaux après 30 ans.">
        {!done &&
          <InputsCard onCompute={go} computing={busy} label="Calculer la plus-value nette">
            <div><Label>Prix d'acquisition</Label><MoneyInput value={achat} onChange={setAchat} min={10000} max={10000000} step={10000} /></div>
            <div><Label>Prix de cession estimé</Label><MoneyInput value={cession} onChange={setCession} min={10000} max={20000000} step={10000} /></div>
            <div style={{ gridColumn: "1 / -1" }}>
              <Label>Durée de détention</Label>
              <div style={{ fontFamily: SERIF, fontSize: 30, fontWeight: 500, color: C.encre }}>{D} ans</div>
              <input type="range" min="0" max="30" step="1" value={D} onChange={(e) => setDuree(Number(e.target.value))} style={{ width: "100%", marginTop: 8, accentColor: C.sauge }} />
            </div>
          </InputsCard>}

        {done &&
          <div style={{ marginTop: 36 }}>
            <ParamRecap items={[["Acquisition", fmt(P)], ["Cession", fmt(R)], ["Détention", D + " ans"], ["PV brute", fmt(pv)]]} onEdit={() => setDone(false)} />

            <TaxTimeline reveal={reveal} duree={D} abIR={abatIR(D)} abPS={abatPS(D)} />

            <div className="msc-grid2" style={{ marginTop: 22 }}>
              <div style={{ border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
                <Eyebrow>Détail de la ponction</Eyebrow>
                <div style={{ marginTop: 16, display: "flex", flexDirection: "column", gap: 12 }}>
                  <LineItem label="Impôt sur le revenu (19 %)" sub={`abattement ${Math.round(abatIR(D) * 100)} %`} value={ir} reveal={reveal} />
                  <LineItem label="Prélèvements sociaux (17,2 %)" sub={`abattement ${Math.round(abatPS(D) * 100)} %`} value={ps} reveal={reveal} />
                  <LineItem label="Surtaxe plus-value élevée" sub={baseIR > 50000 ? "PV imposable > 50 000 €" : "non applicable"} value={sur} reveal={reveal} />
                  <div style={{ borderTop: `1px solid ${C.trait}`, paddingTop: 12, marginTop: 4 }}>
                    <LineItem label="Total prélevé par l'État" value={total} reveal={reveal} strong />
                  </div>
                </div>
              </div>
              <div style={{ background: C.encre, color: "#fff", padding: "clamp(22px,3vw,32px)", display: "flex", flexDirection: "column", justifyContent: "center" }}>
                <div style={{ fontFamily: BODY, fontSize: 12.5, color: "#9ea7a0", marginBottom: 6 }}>Liquidités nettes récupérées (année {D})</div>
                <CountEuro value={net} run={reveal} style={{ fontFamily: SERIF, fontSize: "clamp(32px,4.6vw,56px)", fontWeight: 500, color: "#fff", letterSpacing: "-0.01em", lineHeight: 1 }} />
                <div style={{ fontFamily: BODY, fontSize: 13, color: C.sauge, fontWeight: 600, marginTop: 10 }}>{pct(net, R)} % du prix de cession</div>
              </div>
            </div>

            <Doctrine open={reveal} eyebrow="L'alerte coût d'opportunité" title="Le piège de l'attente et le coût de l'immobilité" accent={C.ardoise}>
              <p style={{ margin: 0 }}>L'obsession de l'exonération totale (attendre 30 ans) fige votre patrimoine : pendant des décennies, votre capital est immobilisé et ne produit aucun effet de levier. L'ingénierie Monarch s'affranchit de cette passivité : via un <b style={{ color: "#fff" }}>OBO immobilier (vente à soi-même)</b>, votre holding ou votre SCI à l'IS rachète le bien aujourd'hui. Vous purgez l'impôt, mais vous encaissez immédiatement des liquidités sur votre compte personnel — prêtes à être réinvesties ou à sécuriser votre train de vie — tout en conservant le contrôle de l'actif.</p>
            </Doctrine>

            <ProsCons open={reveal}
              pour={["L'impôt sur la plus-value disparaît après 22 ans (revenu) et 30 ans (social).", "Aucune société à gérer : détention simple à votre nom.", "Régime favorable pour la résidence détenue longtemps."]}
              contre={["Attendre l'exonération bloque le capital pendant des décennies.", "Avant ces délais, l'impôt reste élevé (jusqu'à 36,2 % + surtaxe).", "Capital qui dort = pas d'effet de levier ni de revenus réinvestis."]} />

            <CTAEmail note="Simulation d'un OBO immobilier (vente à soi-même) lors du premier rendez-vous." />
          </div>}
      </Shell>);
  }

  function LineItem({ label, sub, value, reveal, strong }) {
    return (
      <div style={{ display: "flex", justifyContent: "space-between", alignItems: "baseline", gap: 16 }}>
        <span>
          <span style={{ fontFamily: BODY, fontSize: strong ? 14 : 13.5, color: strong ? C.encre : C.gris, fontWeight: strong ? 700 : 500 }}>{label}</span>
          {sub && <span style={{ fontFamily: BODY, fontSize: 12, color: C.grisC, marginLeft: 8 }}>· {sub}</span>}
        </span>
        <CountEuro value={value} run={reveal} style={{ fontFamily: SERIF, fontSize: strong ? "clamp(20px,2.4vw,26px)" : 18, fontWeight: 500, color: strong ? "#a23b3b" : C.encre, letterSpacing: "-0.01em", whiteSpace: "nowrap" }} />
      </div>);
  }

  // Frise SVG : IR s'éteint à 22 ans, PS à 30 ans
  function TaxTimeline({ reveal, duree, abIR, abPS }) {
    const [on, setOn] = useState(false);
    useEffect(() => { if (reveal) { const id = setTimeout(() => setOn(true), 200); return () => clearTimeout(id); } else setOn(false); }, [reveal]);
    const x0 = 40, x1 = 700, W = x1 - x0;
    const X = (yr) => x0 + W * (yr / 30);
    const cur = X(duree);
    const bar = (y, end, frac, label, color) => {
      const full = X(end) - x0;
      const taxable = full * frac; // largeur restant taxable (proportionnel à la fraction non abattue)
      return (
        <g>
          <rect x={x0} y={y} width={full} height={20} fill="none" stroke={C.trait} strokeWidth="1" />
          <rect x={x0} y={y} width={on ? taxable : full} height={20} fill={color} opacity="0.85" style={{ transition: "width 1s cubic-bezier(.2,.7,.3,1)" }} />
          <text x={x0} y={y - 7} fontFamily="'Archivo',sans-serif" fontSize="11" fontWeight="600" fill={C.encre}>{label}</text>
          <text x={X(end)} y={y + 33} fontFamily="'Archivo',sans-serif" fontSize="10" fill={C.grisC} textAnchor="middle">exonéré an {end}</text>
        </g>);
    };
    return (
      <div style={{ marginTop: 16, border: `1px solid ${C.trait}`, background: C.blanc, padding: "clamp(22px,3vw,32px)" }}>
        <Eyebrow>Le calendrier de l'abattement · double échelle</Eyebrow>
        <h3 style={{ fontFamily: SERIF, fontSize: "clamp(20px,2.4vw,28px)", fontWeight: 500, letterSpacing: "-0.01em", margin: "10px 0 18px" }}>Deux compteurs désynchronisés</h3>
        <svg viewBox="0 0 720 170" style={{ width: "100%", height: "auto", display: "block", overflow: "visible" }} role="img" aria-label="Frise des abattements">
          {[0, 5, 10, 15, 22, 30].map((yr) =>
            <g key={yr}>
              <line x1={X(yr)} y1="20" x2={X(yr)} y2="132" stroke={C.trait} strokeWidth={yr === 0 ? 1 : 0.5} strokeDasharray={yr === 22 || yr === 30 ? "3 3" : undefined} />
              <text x={X(yr)} y="150" fontFamily="'Archivo',sans-serif" fontSize="10.5" fill={C.grisC} textAnchor="middle">an {yr}</text>
            </g>)}
          {bar(40, 22, 1 - abIR, "Impôt sur le revenu (19 %)", C.ardoise)}
          {bar(92, 30, 1 - abPS, "Prélèvements sociaux (17,2 %)", C.saugeF)}
          <line x1={cur} y1="14" x2={cur} y2="138" stroke={C.encre} strokeWidth="1.6" className={"msc-line" + (on ? " on" : "")} style={{ strokeDasharray: 130, strokeDashoffset: on ? 0 : 130 }} />
          <circle cx={cur} cy="14" r="3.5" fill={C.encre} />
          <text x={cur} y="9" fontFamily="'Archivo',sans-serif" fontSize="10.5" fontWeight="700" fill={C.encre} textAnchor="middle">vente an {duree}</text>
        </svg>
        <p style={{ fontFamily: BODY, fontSize: 12.5, color: C.grisC, lineHeight: 1.6, margin: "14px 0 0" }}>La part colorée représente la fraction de plus-value encore imposable à la date de vente : l'IR disparaît à 22 ans, les prélèvements sociaux ne s'effacent qu'à 30 ans.</p>
      </div>);
  }

  window.DMTGSimulator = DMTGSimulator;
  window.PrivateRealEstateGainSimulator = PrivateRealEstateGainSimulator;
})();