// CGP variant — partenaires Conseillers en Gestion de Patrimoine.
// Reuses the same visual DNA as the artist landing (white/black/signal red,
// Bricolage Grotesque + Instrument Serif + JetBrains Mono) but reframes
// every section for a B2B audience: serious, rassurant, focus fiscal + rémunération.

const C_T = {
  bg: '#fafaf7',
  bgLift: '#f1ede4',
  fg: '#0a0a0a',
  sub: 'rgba(10,10,10,0.6)',
  accent: 'oklch(0.55 0.21 25)',
  accentFg: '#fafaf7',
  rule: 'rgba(10,10,10,0.14)',
  ruleStrong: '#0a0a0a',
  display: '"Bricolage Grotesque", "Helvetica Neue", system-ui, sans-serif',
  serif: '"Instrument Serif", "Times New Roman", serif',
  sans: '"Bricolage Grotesque", system-ui, sans-serif',
  mono: '"JetBrains Mono", ui-monospace, monospace',
};

// Reuse the same dynamic styles for hover/transition consistency.
function CDynamicStyles() {
  const id = 'hfa-cgp-dynamic-styles';
  React.useEffect(() => {
    if (document.getElementById(id)) return;
    const el = document.createElement('style');
    el.id = id;
    el.textContent = `
      .hfa-link { position: relative; transition: color .25s cubic-bezier(.2,.6,.2,1); }
      .hfa-link::after {
        content: ''; position: absolute; left: 0; right: 0; bottom: -4px;
        height: 1px; background: currentColor;
        transform: scaleX(0); transform-origin: left center;
        transition: transform .35s cubic-bezier(.2,.6,.2,1);
      }
      .hfa-link:hover { color: ${C_T.accent}; }
      .hfa-link:hover::after { transform: scaleX(1); }

      .hfa-cta {
        transition: transform .35s cubic-bezier(.2,.6,.2,1),
                    box-shadow .35s cubic-bezier(.2,.6,.2,1),
                    background-color .25s ease;
      }
      .hfa-cta .hfa-arrow { display: inline-block; transition: transform .35s cubic-bezier(.2,.6,.2,1); }
      .hfa-cta:hover { box-shadow: 0 12px 28px -10px oklch(0.55 0.21 25 / 0.55); transform: translateY(-1px); }
      .hfa-cta:hover .hfa-arrow { transform: translate(3px, -3px); }

      .hfa-card {
        transition: transform .45s cubic-bezier(.2,.6,.2,1),
                    box-shadow .45s cubic-bezier(.2,.6,.2,1);
      }
      .hfa-card:hover { transform: translateY(-3px); box-shadow: 0 22px 50px -28px rgba(10,10,10,0.18); }

      .hfa-step { transition: background-color .35s ease, color .35s ease; }
      .hfa-step:hover { background: rgba(10,10,10,0.03); }
      .hfa-step:hover .hfa-step-n { color: ${C_T.accent}; }

      .hfa-faq button { cursor: pointer; transition: color .25s ease; }
      .hfa-faq button:hover { color: ${C_T.accent}; }

      .hfa-input { transition: border-color .25s ease, box-shadow .25s ease; }
      .hfa-input:hover { border-color: rgba(10,10,10,0.45); }
      .hfa-input:focus {
        outline: none; border-color: ${C_T.accent};
        box-shadow: 0 0 0 3px oklch(0.55 0.21 25 / 0.18);
      }
    `;
    document.head.appendChild(el);
  }, []);
  return null;
}

function CLabel({ children, accent, light, style }) {
  const color = accent ? C_T.accent : light ? 'rgba(250,250,247,0.55)' : C_T.sub;
  return (
    <span data-mono-label style={{
      fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.2em',
      textTransform: 'uppercase', color, ...style,
    }}>{children}</span>
  );
}

function CTopbar() {
  return (
    <div className="hfa-topbar" style={{
      background: C_T.fg, color: C_T.bg, padding: '12px 48px',
      display: 'flex', justifyContent: 'space-between',
      fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', fontWeight: 600,
    }}>
      <span>● Programme partenaires CGP — accès anticipé 2026</span>
      <span>FR · CGI Art. 238 bis &amp; 238 bis AB</span>
    </div>
  );
}

function CHeader() {
  return (
    <header style={{ padding: '24px 48px', display: 'flex', alignItems: 'center', justifyContent: 'space-between' }}>
      <div style={{ display: 'flex', alignItems: 'baseline', gap: 14 }}>
        <a href="index.html" style={{ display: 'flex', alignItems: 'baseline', gap: 14, textDecoration: 'none' }}>
          <span style={{ fontFamily: C_T.display, fontWeight: 800, fontSize: 26, color: C_T.fg, letterSpacing: '-0.04em' }}>HUMANS</span>
          <span style={{ fontFamily: C_T.serif, fontSize: 26, fontStyle: 'italic', color: C_T.accent, letterSpacing: '-0.02em' }}>for</span>
          <span style={{ fontFamily: C_T.display, fontWeight: 800, fontSize: 26, color: C_T.fg, letterSpacing: '-0.04em' }}>ART</span>
        </a>
        <span className="hfa-tagline" style={{
          fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase',
          color: C_T.sub, marginLeft: 18, maxWidth: 260, lineHeight: 1.4,
        }}>
          / Programme partenaires — Conseillers en gestion de patrimoine
        </span>
      </div>
      <nav style={{ display: 'flex', gap: 28, fontFamily: C_T.sans, fontSize: 14, color: C_T.fg, fontWeight: 500, alignItems: 'center' }}>
        <a href="#mecanique" className="hfa-link" style={{ color: 'inherit', textDecoration: 'none' }}>Mécanique</a>
        <a href="#fiscal" className="hfa-link" style={{ color: 'inherit', textDecoration: 'none' }}>Cadre fiscal</a>
        <a href="#remuneration" className="hfa-link" style={{ color: 'inherit', textDecoration: 'none' }}>Rémunération</a>
        <a href="#parcours" className="hfa-link" style={{ color: 'inherit', textDecoration: 'none' }}>Parcours</a>
        <a href="index.html" className="hfa-link" style={{ color: C_T.sub, textDecoration: 'none', fontStyle: 'italic', fontFamily: C_T.serif, fontSize: 15 }}>↗ Espace artistes</a>
        <a href="#contact" className="hfa-cta" style={{
          color: C_T.accentFg, background: C_T.accent, padding: '10px 18px',
          textDecoration: 'none', fontWeight: 700, borderRadius: 999,
          display: 'inline-flex', alignItems: 'center', gap: 6, lineHeight: 1,
        }}>Devenir partenaire <span className="hfa-arrow">↗</span></a>
      </nav>
    </header>
  );
}

function CHero() {
  return (
    <section style={{ padding: '40px 48px 80px', position: 'relative' }}>
      <CLabel>Now showing / N°02 — programme CGP</CLabel>
      <div style={{ marginTop: 24 }}>
        <h1 style={{
          fontFamily: C_T.display, fontWeight: 800, fontSize: 184, lineHeight: 0.86,
          margin: 0, color: C_T.fg, letterSpacing: '-0.06em',
        }}>
          L&rsquo;ART
        </h1>
        <h1 className="hfa-hero-line2" style={{
          fontFamily: C_T.display, fontWeight: 800, fontSize: 184, lineHeight: 0.86,
          margin: '-4px 0 0', color: C_T.fg, letterSpacing: '-0.06em',
          display: 'flex', alignItems: 'baseline', gap: 24, whiteSpace: 'nowrap', flexWrap: 'wrap',
        }}>
          <span>COMME</span>
          <span style={{
            background: C_T.accent, color: C_T.accentFg,
            fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400,
            padding: '0 22px', letterSpacing: '-0.03em',
            display: 'inline-block', lineHeight: 0.95,
          }}>actif.</span>
        </h1>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 64, marginTop: 64, alignItems: 'end' }}>
        <p style={{ fontFamily: C_T.sans, fontSize: 22, lineHeight: 1.45, color: C_T.fg, fontWeight: 400, margin: 0, maxWidth: 720 }}>
          Pour vos clients dirigeants, HumansForArt transforme une dépense fiscale en <strong>actif patrimonial liquide et valorisé</strong>.
          Un mécanisme légal, automatisé, traçable&nbsp;: <strong>22,4&nbsp;% d&rsquo;économie</strong> sur l&rsquo;acquisition d&rsquo;une œuvre, un actif au bilan, et pour votre cabinet une commission d&rsquo;apport <strong>fixe et transparente de 4,5&nbsp;% HT</strong>.
        </p>
        <div>
          <a href="#contact" className="hfa-cta hfa-cta-hero" style={{
            background: C_T.accent, color: C_T.accentFg, padding: '24px 32px', fontSize: 16,
            letterSpacing: '0.06em', textTransform: 'uppercase', textDecoration: 'none', fontWeight: 700,
            fontFamily: C_T.sans, display: 'flex', justifyContent: 'space-between', alignItems: 'center',
            borderRadius: 999, gap: 12,
          }}>
            <span>Ouvrir un accès partenaire</span>
            <span className="hfa-arrow" style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 24 }}>↗</span>
          </a>
          <a href="#mecanique" className="hfa-link" style={{
            display: 'flex', alignItems: 'center', justifyContent: 'space-between',
            marginTop: 14, padding: '20px 4px',
            fontFamily: C_T.sans, fontSize: 14, color: C_T.fg, textDecoration: 'none',
            borderBottom: `1px solid ${C_T.rule}`,
          }}>
            <span>↓ Comprendre le dispositif en 90 sec.</span>
            <span style={{ fontFamily: C_T.mono, color: C_T.sub }}>5 min de lecture</span>
          </a>
        </div>
      </div>

      {/* Hero ticket : 4 chiffres-clés du dossier type 13 500 € */}
      <div className="hfa-hero-ticket" style={{
        marginTop: 56, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)',
        border: `1px solid ${C_T.rule}`, background: C_T.bg,
      }}>
        {[
          { k: 'Pack Mécène', v: '13 500 €', sub: 'Base œuvre 10 000 € · 135 %' },
          { k: 'Coût net client', v: '7 762,50 €', sub: 'IS 25 % · − 22,4 % vs marché' },
          { k: 'Commission cabinet', v: '607,50 €', sub: '4,5 % HT · à la validation' },
          { k: 'Cadre légal', v: 'CGI 238', sub: 'Art. 238 bis & 238 bis AB', highlight: true },
        ].map((c, i) => (
          <div key={i} style={{
            padding: '24px 28px', borderRight: i < 3 ? `1px solid ${C_T.rule}` : 'none',
            background: c.highlight ? C_T.fg : 'transparent',
            color: c.highlight ? C_T.bg : C_T.fg,
          }}>
            <span style={{
              fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
              color: c.highlight ? 'rgba(250,250,247,0.55)' : C_T.sub,
            }}>{c.k}</span>
            <div style={{
              fontFamily: C_T.display, fontWeight: 800, fontSize: 36,
              color: c.highlight ? C_T.accent : C_T.fg,
              letterSpacing: '-0.03em', marginTop: 8, lineHeight: 1, whiteSpace: 'nowrap',
            }}>{c.v}</div>
            <span style={{
              fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 13,
              color: c.highlight ? 'rgba(250,250,247,0.7)' : C_T.sub,
              marginTop: 6, display: 'block',
            }}>{c.sub}</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// Marquee with reassurance keywords specific to CGP context.
function CMarquee() {
  const items = ['Cadre CGI', 'CERFA automatisé', 'Stripe sécurisé', 'Actif au bilan', 'Plus-value possible', '22,4 % d\'économie'];
  const styleId = 'hfa-cgp-marquee-anim';
  React.useEffect(() => {
    if (document.getElementById(styleId)) return;
    const s = document.createElement('style');
    s.id = styleId;
    s.textContent = `@keyframes hfa-cgp-marquee { from { transform: translateX(0); } to { transform: translateX(-50%); } }`;
    document.head.appendChild(s);
  }, []);
  const seq = items.concat(items);
  return (
    <div style={{
      borderTop: `2px solid ${C_T.accent}`, borderBottom: `2px solid ${C_T.accent}`,
      padding: '24px 0', overflow: 'hidden', whiteSpace: 'nowrap',
      background: C_T.bgLift, position: 'relative',
    }}>
      <div className="hfa-marquee-content" style={{
        display: 'inline-flex', gap: 56, fontFamily: C_T.display, fontWeight: 800,
        fontSize: 56, color: C_T.fg, alignItems: 'center', letterSpacing: '-0.04em',
        animation: 'hfa-cgp-marquee 38s linear infinite', willChange: 'transform',
      }}>
        {seq.concat(seq).map((it, i) => (
          <span key={i} style={{ display: 'inline-flex', alignItems: 'center', gap: 56 }}>
            <span style={{ textTransform: 'uppercase' }}>{it}</span>
            <span style={{ color: C_T.accent, fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400 }}>✦</span>
          </span>
        ))}
      </div>
    </div>
  );
}

// 4-pillar section — same asymmetric layout as artist landing (1 hero + 3 stacked).
function CMechanics() {
  const { CGP_COPY } = window.CgpShared;
  const p = CGP_COPY.pillars;
  return (
    <section id="mecanique" style={{ padding: '120px 48px' }}>
      <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 32, marginBottom: 64 }}>
        <CLabel>§ 01 — Mécanique tripartite</CLabel>
        <h2 style={{
          fontFamily: C_T.display, fontWeight: 800, fontSize: 112, lineHeight: 0.88, margin: 0,
          color: C_T.fg, letterSpacing: '-0.05em',
        }}>
          Le dispositif, <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400, color: C_T.accent }}>en clair.</span>
        </h2>
      </div>

      <div style={{ display: 'grid', gridTemplateColumns: '7fr 5fr', gap: 16 }}>
        <article className="hfa-card hfa-pillar-hero" style={{
          background: C_T.accent, color: C_T.accentFg,
          padding: '48px 44px', display: 'flex', flexDirection: 'column',
          justifyContent: 'space-between', minHeight: 520, position: 'relative',
        }}>
          <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'flex-start' }}>
            <span className="hfa-pillar-num" style={{ fontFamily: C_T.display, fontWeight: 800, fontSize: 160, lineHeight: 0.85, letterSpacing: '-0.07em' }}>{p[0].n}</span>
            <span className="hfa-glyph hfa-pillar-glyph" style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 96, lineHeight: 1 }}>↗</span>
          </div>
          <div>
            <h3 style={{ fontFamily: C_T.display, fontWeight: 800, fontSize: 64, lineHeight: 0.95, margin: '0 0 18px', letterSpacing: '-0.04em' }}>{p[0].t}</h3>
            <p style={{ fontFamily: C_T.sans, fontSize: 18, lineHeight: 1.5, margin: 0, color: 'rgba(255,255,255,0.92)', maxWidth: 480 }}>{p[0].b}</p>
          </div>
        </article>

        <div style={{ display: 'flex', flexDirection: 'column', gap: 16 }}>
          {p.slice(1).map((card, i) => (
            <article key={card.n} className="hfa-card hfa-pillar-row" style={{
              flex: 1, background: i === 1 ? C_T.fg : C_T.bgLift,
              color: i === 1 ? C_T.bg : C_T.fg,
              padding: '28px 30px', display: 'grid',
              gridTemplateColumns: '64px 1fr 32px', gap: 20, alignItems: 'baseline',
            }}>
              <span style={{ fontFamily: C_T.display, fontWeight: 800, fontSize: 56, lineHeight: 1, letterSpacing: '-0.06em', color: i === 1 ? C_T.accent : C_T.fg }}>{card.n}</span>
              <div>
                <h3 style={{ fontFamily: C_T.display, fontWeight: 700, fontSize: 24, lineHeight: 1.1, margin: '0 0 8px', letterSpacing: '-0.02em' }}>{card.t}</h3>
                <p style={{ fontFamily: C_T.sans, fontSize: 14, lineHeight: 1.5, margin: 0, color: i === 1 ? 'rgba(250,250,247,0.7)' : C_T.sub }}>{card.b}</p>
              </div>
              <span className="hfa-glyph" style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 24, color: i === 1 ? C_T.accent : C_T.sub, textAlign: 'right' }}>↗</span>
            </article>
          ))}
        </div>
      </div>
    </section>
  );
}

// Fiscal section: the heart of the pitch — two articles, 5-year amortization table.
function CFiscal() {
  const years = [
    { y: 'Année 1', inv: '13 500 €', mec: '− 4 050 €', amo: '− 337,50 €', cum: '− 4 387,50 €' },
    { y: 'Année 2', inv: '—', mec: '—', amo: '− 337,50 €', cum: '− 4 725,00 €' },
    { y: 'Année 3', inv: '—', mec: '—', amo: '− 337,50 €', cum: '− 5 062,50 €' },
    { y: 'Année 4', inv: '—', mec: '—', amo: '− 337,50 €', cum: '− 5 400,00 €' },
    { y: 'Année 5', inv: '—', mec: '—', amo: '− 337,50 €', cum: '− 5 737,50 €' },
    { y: 'TOTAL', inv: '13 500 €', mec: '− 4 050 €', amo: '− 1 687,50 €', cum: '− 5 737,50 €', total: true },
  ];
  return (
    <section id="fiscal" style={{ padding: '120px 48px', background: C_T.fg, color: C_T.bg }}>
      <div className="hfa-fiscal-head" style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 32, marginBottom: 64, alignItems: 'end' }}>
        <div>
          <CLabel light>§ 02 — Stratégie fiscale à double détente</CLabel>
          <h2 className="hfa-fiscal-title" style={{
            fontFamily: C_T.display, fontWeight: 800, fontSize: 88, lineHeight: 0.92, margin: '20px 0 0',
            letterSpacing: '-0.05em',
          }}>
            Deux articles du <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400, background: C_T.accent, color: C_T.accentFg, padding: '0 14px', display: 'inline-block', lineHeight: 1 }}>CGI.</span>
          </h2>
        </div>
        <p style={{ fontFamily: C_T.sans, fontSize: 18, lineHeight: 1.55, color: 'rgba(250,250,247,0.78)', maxWidth: 540, margin: 0 }}>
          Deux mécanismes légaux <strong style={{ color: C_T.bg }}>cumulables</strong> sur un seul Pack&nbsp;: une réduction d&rsquo;IS immédiate sur le don, puis l&rsquo;amortissement de l&rsquo;exemplaire conservé. Sécurisé, traçable, validable par tout expert-comptable.
        </p>
      </div>

      {/* Two-card comparison — symmetric, with matching big-number anatomy */}
      <div className="hfa-articles-grid" style={{
        display: 'grid', gridTemplateColumns: '1fr 1fr', gap: 0,
        border: '1px solid rgba(250,250,247,0.18)', position: 'relative',
      }}>
        {[
          {
            tag: 'Art. 238 bis',
            title: 'Réduction d\'IS immédiate',
            num: '60',
            unit: '%',
            metricLine: 'de la valeur du don remis au Fonds',
            body: 'Le second exemplaire du Pack est remis en don au Fonds de Dotation HumansForArt — qui émet un reçu CERFA. Votre client bénéficie d\'une réduction d\'IS directe de 60 % de la valeur du don, soit l\'équivalent de 50 % du montant du Pack.',
            ts: ['Année 1', 'Imputation immédiate sur l\'IS'],
            cap: 'Plafond : 20 000 € ou 0,5 % du CA HT — le plus élevé.',
          },
          {
            tag: 'Art. 238 bis AB',
            title: 'Amortissement comptable',
            num: '5',
            unit: 'ans',
            metricLine: 'd\'amortissement par fractions égales',
            body: 'Le premier exemplaire reste à l\'actif du bilan, exposé dans un lieu accessible aux salariés et au public. Son prix de revient est déduit du résultat imposable par fractions égales sur cinq exercices — soit une économie d\'IS récurrente.',
            ts: ['Années 1 → 5', 'Économie d\'IS étalée'],
            cap: 'Œuvre exposée dans un lieu accessible aux salariés.',
          },
        ].map((c, i) => (
          <article key={i} className="hfa-article-card" style={{
            background: 'transparent',
            padding: '40px 36px',
            borderRight: i === 0 ? '1px solid rgba(250,250,247,0.18)' : 'none',
            display: 'flex', flexDirection: 'column', gap: 0,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 12, flexWrap: 'wrap' }}>
              <CLabel accent>// {c.tag}</CLabel>
              <span style={{ fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.16em', textTransform: 'uppercase', color: 'rgba(250,250,247,0.55)' }}>
                {c.ts[0]}
              </span>
            </div>

            <h3 className="hfa-article-title" style={{
              fontFamily: C_T.display, fontWeight: 800, fontSize: 32, lineHeight: 1.1,
              letterSpacing: '-0.03em', margin: '16px 0 28px', color: C_T.bg,
            }}>{c.title}</h3>

            {/* Matching big-number anatomy: digits + small unit on the same baseline */}
            <div className="hfa-article-num" style={{
              display: 'flex', alignItems: 'baseline', gap: 10, marginBottom: 8,
              whiteSpace: 'nowrap',
            }}>
              <span style={{
                fontFamily: C_T.display, fontWeight: 800,
                fontSize: 'clamp(72px, 11vw, 132px)',
                lineHeight: 0.85,
                color: C_T.accent, letterSpacing: '-0.06em',
              }}>{c.num}</span>
              <span style={{
                fontFamily: C_T.serif, fontStyle: 'italic',
                fontSize: 'clamp(28px, 4vw, 44px)',
                color: C_T.accent, lineHeight: 1,
              }}>{c.unit}</span>
            </div>
            <p style={{
              fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 17, lineHeight: 1.4,
              color: 'rgba(250,250,247,0.78)', margin: '0 0 28px',
            }}>{c.metricLine}</p>

            <p style={{
              fontFamily: C_T.sans, fontSize: 15, lineHeight: 1.6, margin: '0 0 24px',
              color: 'rgba(250,250,247,0.88)',
            }}>{c.body}</p>

            <div style={{
              marginTop: 'auto', paddingTop: 18,
              borderTop: '1px solid rgba(250,250,247,0.18)',
              display: 'flex', justifyContent: 'space-between', gap: 16, alignItems: 'baseline',
              fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.14em', textTransform: 'uppercase',
              color: 'rgba(250,250,247,0.6)', flexWrap: 'wrap',
            }}>
              <span>↳ {c.cap}</span>
              <span style={{ color: C_T.accent, fontWeight: 600 }}>{c.ts[1]}</span>
            </div>
          </article>
        ))}
        {/* Decorative center "+" badge — visual cue that these stack */}
        <span aria-hidden="true" className="hfa-articles-plus" style={{
          position: 'absolute', top: '50%', left: '50%',
          transform: 'translate(-50%, -50%)',
          width: 56, height: 56, borderRadius: '50%',
          background: C_T.accent, color: C_T.accentFg,
          display: 'flex', alignItems: 'center', justifyContent: 'center',
          fontFamily: C_T.display, fontWeight: 800, fontSize: 32, lineHeight: 1,
          boxShadow: '0 0 0 6px ' + C_T.fg,
        }}>+</span>
      </div>

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

      {/* Amortization table */}
      <div style={{ marginTop: 0 }}>
        <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 18, flexWrap: 'wrap', gap: 12 }}>
          <CLabel light>↳ Projection · panier d&rsquo;œuvres 10 000 € · IS 25 %</CLabel>
          <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 16, color: 'rgba(250,250,247,0.7)' }}>
            Pack Mécène 13 500 € · valeur marché 10 000 €
          </span>
        </div>
        <div className="hfa-fiscal-table" style={{
          border: `1px solid rgba(250,250,247,0.18)`, background: 'rgba(250,250,247,0.02)',
        }}>
          <table style={{
            width: '100%', borderCollapse: 'collapse', fontFamily: C_T.sans,
            color: C_T.bg, tableLayout: 'fixed',
          }}>
            <colgroup>
              <col style={{ width: '14%' }} />
              <col style={{ width: '20%' }} />
              <col style={{ width: '22%' }} />
              <col style={{ width: '22%' }} />
              <col style={{ width: '22%' }} />
            </colgroup>
            <thead>
              <tr>
                {['Étape', 'Investissement', 'Réduc. mécénat', 'Éco. IS amort.', 'Gain cumulé'].map((h, i) => (
                  <th key={i} style={{
                    textAlign: i === 0 ? 'left' : 'right',
                    padding: '16px 14px',
                    fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.16em',
                    textTransform: 'uppercase', fontWeight: 600,
                    color: 'rgba(250,250,247,0.55)',
                    borderBottom: `1px solid rgba(250,250,247,0.18)`,
                  }}>{h}</th>
                ))}
              </tr>
            </thead>
            <tbody>
              {years.map((r, i) => (
                <tr key={i} style={{
                  background: r.total ? 'rgba(250,250,247,0.04)' : 'transparent',
                }}>
                  <td style={{
                    padding: '14px', fontFamily: r.total ? C_T.display : C_T.sans,
                    fontWeight: r.total ? 700 : 500, fontSize: r.total ? 15 : 14,
                    letterSpacing: r.total ? '-0.01em' : 'normal',
                    color: r.total ? C_T.accent : C_T.bg,
                    borderTop: i > 0 ? `1px solid rgba(250,250,247,0.10)` : 'none',
                  }}>{r.y}</td>
                  {[r.inv, r.mec, r.amo, r.cum].map((cell, j) => (
                    <td key={j} style={{
                      padding: '14px', textAlign: 'right',
                      fontFamily: C_T.mono, fontSize: 13,
                      color: r.total && j === 3 ? C_T.accent : (cell === '—' ? 'rgba(250,250,247,0.35)' : C_T.bg),
                      fontWeight: r.total ? 600 : 400,
                      borderTop: i > 0 ? `1px solid rgba(250,250,247,0.10)` : 'none',
                      whiteSpace: 'nowrap',
                    }}>{cell}</td>
                  ))}
                </tr>
              ))}
            </tbody>
          </table>
        </div>

        {/* Bilan patrimonial — résultat final */}
        <div className="hfa-fiscal-foot" style={{
          marginTop: 16, display: 'grid', gridTemplateColumns: '1.3fr 1fr 1fr', gap: 0,
          border: `1px solid rgba(250,250,247,0.18)`,
        }}>
          {[
            { k: 'Coût net final', v: '7 762,50 €', s: 'Après gain fiscal cumulé', accent: true },
            { k: 'Valeur de l\'actif', v: '10 000 €', s: 'À l\'actif du bilan' },
            { k: 'Économie', v: '−22,4 %', s: '2 237,50 € vs achat classique' },
          ].map((c, i) => (
            <div key={i} style={{
              padding: '24px 24px',
              borderRight: i < 2 ? `1px solid rgba(250,250,247,0.18)` : 'none',
              background: c.accent ? 'rgba(250,250,247,0.02)' : 'transparent',
            }}>
              <span style={{
                fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.18em', textTransform: 'uppercase',
                color: 'rgba(250,250,247,0.55)',
              }}>{c.k}</span>
              <div style={{
                fontFamily: C_T.display, fontWeight: 800, fontSize: 48,
                color: c.accent ? C_T.accent : C_T.bg,
                letterSpacing: '-0.04em', marginTop: 8, lineHeight: 1, whiteSpace: 'nowrap',
              }}>{c.v}</div>
              <span style={{
                fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 14,
                color: 'rgba(250,250,247,0.7)', marginTop: 6, display: 'block',
              }}>{c.s}</span>
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Compensation section — focus on transparent 4.5% commission, highlight the optimum case.
function CRemuneration() {
  return (
    <section id="remuneration" style={{ padding: '120px 48px', background: C_T.bgLift }}>
      <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 64, marginBottom: 56, alignItems: 'end' }}>
        <div>
          <CLabel accent>§ 03 — Rémunération du cabinet</CLabel>
          <h2 style={{
            fontFamily: C_T.display, fontWeight: 800, fontSize: 96, lineHeight: 0.9, margin: '20px 0 0',
            color: C_T.fg, letterSpacing: '-0.05em',
          }}>
            Un partage<br /><span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400, color: C_T.accent }}>50 / 50.</span>
          </h2>
        </div>
        <p style={{ fontFamily: C_T.sans, fontSize: 20, lineHeight: 1.45, color: C_T.fg, margin: 0, maxWidth: 560 }}>
          HumansForArt facture <strong>9&nbsp;% HT</strong> sur le Pack Mécène.
          Cette commission unique est <strong>partagée à 50 / 50</strong> avec votre cabinet — soit <strong>4,5&nbsp;% HT</strong> sur l&rsquo;intégralité du dossier, versés à la validation du paiement client. Pas d&rsquo;abonnement, pas de frais d&rsquo;ouverture, pas de seuil minimum.
        </p>
      </div>

      {/* Three scenarios — Standard / Cible / Plafond optimisé */}
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {[
          {
            tag: 'Dossier d\'entrée',
            sub: 'Œuvre 5 000 € · Pack 6 750 €',
            pack: '6 750 €',
            com: '303,75 €',
            client: '− 1 119 €',
            note: 'Pour un premier dossier de découverte.',
          },
          {
            tag: 'Dossier type',
            sub: 'Œuvre 10 000 € · Pack 13 500 €',
            pack: '13 500 €',
            com: '607,50 €',
            client: '− 2 237,50 €',
            note: 'Le scénario de référence présenté ci-dessus.',
            highlight: true,
          },
          {
            tag: 'Plafond optimisé',
            sub: 'Pack 66 666 € · valeur marché ≈ 49 383 €',
            pack: '66 666 €',
            com: '3 000 €',
            client: 'Plafond saturé',
            note: 'Sature les 20 000 € de réduction d\'impôt mécénat en un dossier.',
          },
        ].map((t, i) => (
          <article key={i} className="hfa-card hfa-tier-card" style={{
            background: t.highlight ? C_T.fg : C_T.bg,
            color: t.highlight ? C_T.bg : C_T.fg,
            border: `1px solid ${t.highlight ? C_T.fg : C_T.rule}`,
            padding: '36px 32px', display: 'flex', flexDirection: 'column',
            position: 'relative', minHeight: 480,
          }}>
            <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline' }}>
              <span style={{ fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: C_T.accent, fontWeight: 700 }}>// {t.tag}</span>
            </div>
            <span style={{
              fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 16,
              color: t.highlight ? 'rgba(250,250,247,0.7)' : C_T.sub, marginTop: 6,
            }}>{t.sub}</span>

            <div style={{ marginTop: 36 }}>
              <span style={{
                fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.2em', textTransform: 'uppercase',
                color: t.highlight ? 'rgba(250,250,247,0.55)' : C_T.sub,
              }}>Commission cabinet (4,5 % HT)</span>
              <div className="hfa-num-lg" style={{
                fontFamily: C_T.display, fontWeight: 800, fontSize: 72,
                color: C_T.accent, letterSpacing: '-0.05em', lineHeight: 0.95, marginTop: 8,
                whiteSpace: 'nowrap',
              }}>{t.com}</div>
            </div>

            <div style={{ marginTop: 'auto', paddingTop: 28 }}>
              {[
                ['Pack Mécène facturé', t.pack],
                ['Économie pour le client', t.client],
              ].map(([k, v], j) => (
                <div key={j} style={{
                  display: 'flex', justifyContent: 'space-between',
                  padding: '14px 0',
                  borderTop: `1px solid ${t.highlight ? 'rgba(250,250,247,0.18)' : C_T.rule}`,
                  fontFamily: C_T.sans, fontSize: 14,
                }}>
                  <span style={{ opacity: t.highlight ? 0.75 : 0.85 }}>{k}</span>
                  <span style={{ fontFamily: C_T.mono, fontSize: 13, letterSpacing: '0.02em' }}>{v}</span>
                </div>
              ))}
              <p style={{
                fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 14,
                color: t.highlight ? 'rgba(250,250,247,0.7)' : C_T.sub,
                margin: '14px 0 0', lineHeight: 1.5,
              }}>{t.note}</p>
            </div>
          </article>
        ))}
      </div>

      {/* Footnote — plafond légal */}
      <div style={{
        marginTop: 24, padding: '24px 28px', background: C_T.bg,
        border: `1px solid ${C_T.rule}`,
        display: 'grid', gridTemplateColumns: '1fr auto', gap: 32, alignItems: 'center',
      }} className="hfa-com-foot">
        <p style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 17, lineHeight: 1.4, color: C_T.fg, margin: 0, maxWidth: 760 }}>
          Le plafond légal du mécénat est de <strong style={{ fontStyle: 'normal' }}>20 000 € de réduction d&rsquo;impôt</strong> ou 0,5 % du CA HT, le plus élevé. Saturé en un seul dossier optimisé, vous générez <strong style={{ fontStyle: 'normal', color: C_T.accent }}>3 000 € HT</strong> de chiffre d&rsquo;affaires sur une opération unique.
        </p>
        <div className="hfa-com-foot-side" style={{ textAlign: 'right', borderLeft: `1px solid ${C_T.rule}`, paddingLeft: 32 }}>
          <CLabel>Source</CLabel>
          <div style={{ fontFamily: C_T.display, fontWeight: 700, fontSize: 18, color: C_T.fg, letterSpacing: '-0.02em', marginTop: 4 }}>
            CGI Art. 238 bis
          </div>
        </div>
      </div>
    </section>
  );
}

// Steps section — what a CGP partner does, in 6 stages.
function CSteps() {
  const { CGP_COPY } = window.CgpShared;
  const invFg = C_T.bg, invBg = C_T.fg;
  return (
    <section id="parcours" style={{ padding: '120px 48px', background: invBg, color: invFg }}>
      <div style={{ display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', marginBottom: 48, gap: 32 }}>
        <h2 style={{
          fontFamily: C_T.display, fontWeight: 800, fontSize: 104, lineHeight: 0.9, margin: 0,
          letterSpacing: '-0.05em', color: invFg,
        }}>
          Le <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400, background: C_T.accent, color: C_T.accentFg, padding: '0 16px', display: 'inline-block', lineHeight: 1 }}>parcours.</span>
        </h2>
        <span style={{ fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase', color: 'rgba(250,250,247,0.55)' }}>
          § 04 · 06 étapes partenaire
        </span>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: '1fr', gap: 0, borderTop: `2px solid ${invFg}` }}>
        {CGP_COPY.steps.map((s) => (
          <div key={s.n} className="hfa-row hfa-step" style={{
            display: 'grid', gridTemplateColumns: '120px 320px 1fr 80px',
            padding: '28px 0', borderBottom: '1px solid rgba(250,250,247,0.16)',
            alignItems: 'baseline', gap: 24,
          }}>
            <span className="hfa-step-n" style={{ fontFamily: C_T.display, fontWeight: 800, fontSize: 64, lineHeight: 1, color: C_T.accent, letterSpacing: '-0.05em' }}>{s.n}</span>
            <span className="hfa-step-t" style={{ fontFamily: C_T.display, fontWeight: 700, fontSize: 32, color: invFg, letterSpacing: '-0.03em' }}>{s.t}</span>
            <span className="hfa-step-b" style={{ fontFamily: C_T.sans, fontSize: 16, lineHeight: 1.5, color: 'rgba(250,250,247,0.7)' }}>{s.b}</span>
            <span className="hfa-arrow hfa-step-arrow" style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 40, color: C_T.accent, textAlign: 'right' }}>→</span>
          </div>
        ))}
      </div>
    </section>
  );
}

// Other benefits — 3 short cards (engagement, marque employeur, ancrage local)
function CBenefits() {
  const items = [
    { tag: '01', t: 'Engagement citoyen', b: 'Soutien direct à la création française et enrichissement du patrimoine de la cité, par un dispositif traçable et reconnu.' },
    { tag: '02', t: 'Marque employeur', b: 'Embellissement des bureaux, stimulation de la créativité des équipes, narratif fort en communication interne et RSE.' },
    { tag: '03', t: 'Ancrage local', b: 'Parrainage d\'œuvres exposées en lieux publics — mairies, écoles, hôpitaux. Un ancrage territorial concret.' },
  ];
  return (
    <section style={{ padding: '120px 48px', borderTop: `1px solid ${C_T.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 32, marginBottom: 56, alignItems: 'baseline' }}>
        <CLabel>§ 05 — Au-delà du chiffre</CLabel>
        <h2 style={{
          fontFamily: C_T.display, fontWeight: 800, fontSize: 88, lineHeight: 0.92, margin: 0,
          color: C_T.fg, letterSpacing: '-0.04em',
        }}>
          Trois bénéfices <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400, color: C_T.accent }}>d&rsquo;image</span> pour vos clients dirigeants.
        </h2>
      </div>
      <div style={{ display: 'grid', gridTemplateColumns: 'repeat(3, 1fr)', gap: 16 }}>
        {items.map((it, i) => (
          <article key={i} className="hfa-card" style={{
            background: C_T.bgLift, padding: '36px 32px',
            display: 'flex', flexDirection: 'column', gap: 16, minHeight: 280,
            border: `1px solid ${C_T.rule}`,
          }}>
            <span style={{
              fontFamily: C_T.display, fontWeight: 800, fontSize: 56, lineHeight: 0.9,
              color: C_T.fg, letterSpacing: '-0.06em',
            }}>{it.tag}</span>
            <h3 style={{
              fontFamily: C_T.display, fontWeight: 700, fontSize: 24, lineHeight: 1.1,
              margin: 0, letterSpacing: '-0.02em', color: C_T.fg,
            }}>{it.t}</h3>
            <p style={{ fontFamily: C_T.sans, fontSize: 14, lineHeight: 1.55, margin: 0, color: C_T.sub }}>
              {it.b}
            </p>
          </article>
        ))}
      </div>
    </section>
  );
}

// Trust strip — 4 reassurance pillars (CERFA, conformité, Stripe, focus)
function CTrust() {
  const items = [
    { k: 'Zéro frais acheteur', v: 'Inclus', s: 'Aucune commission facturée au client. Frais de livraison inclus dans le Pack.' },
    { k: 'Conformité', v: 'CERFA auto', s: 'Émission automatique du reçu CERFA et des contrats de mécénat par la plateforme.' },
    { k: 'Paiement', v: 'Stripe', s: 'Infrastructure de paiement sécurisée, conformité RGPD, traçabilité bancaire complète.' },
    { k: 'Périmètre', v: 'Édition ≤ 30', s: 'Focus sur les arts de la série — photo, sérigraphie, gravure, art digital. Logistique simplifiée.' },
  ];
  return (
    <section style={{ padding: '80px 48px', background: C_T.bgLift, borderTop: `2px solid ${C_T.fg}`, borderBottom: `2px solid ${C_T.fg}` }}>
      <CLabel>§ 06 — Sécurité opérationnelle</CLabel>
      <div style={{
        marginTop: 24, display: 'grid', gridTemplateColumns: 'repeat(4, 1fr)', gap: 0,
        border: `1px solid ${C_T.rule}`, background: C_T.bg,
      }} className="hfa-trust-grid">
        {items.map((c, i) => (
          <div key={i} style={{
            padding: '28px 28px',
            borderRight: i < 3 ? `1px solid ${C_T.rule}` : 'none',
          }}>
            <CLabel>{c.k}</CLabel>
            <div style={{
              fontFamily: C_T.display, fontWeight: 800, fontSize: 36,
              color: C_T.accent, letterSpacing: '-0.03em', marginTop: 8, lineHeight: 1,
            }}>{c.v}</div>
            <p style={{
              fontFamily: C_T.sans, fontSize: 13, lineHeight: 1.5,
              color: C_T.sub, margin: '10px 0 0',
            }}>{c.s}</p>
          </div>
        ))}
      </div>
    </section>
  );
}

// FAQ — same accordion as artist landing
function CFAQ() {
  const { CGP_COPY } = window.CgpShared;
  const [open, setOpen] = React.useState(0);
  return (
    <section style={{ padding: '120px 48px', borderTop: `1px solid ${C_T.rule}` }}>
      <div style={{ display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 64 }}>
        <div>
          <CLabel accent>// Questions partenaires</CLabel>
          <h2 style={{
            fontFamily: C_T.display, fontWeight: 800, fontSize: 88, lineHeight: 0.92, margin: '20px 0 0',
            color: C_T.fg, letterSpacing: '-0.04em',
          }}>
            Vous demandez. <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400, color: C_T.accent }}>On répond.</span>
          </h2>
        </div>
        <div style={{ borderTop: `2px solid ${C_T.fg}` }}>
          {CGP_COPY.faq.map((it, i) => (
            <div key={i} className="hfa-faq" style={{ borderBottom: `1px solid ${C_T.rule}` }}>
              <button
                onClick={() => setOpen(open === i ? -1 : i)}
                style={{
                  width: '100%', textAlign: 'left', background: 'transparent', border: 'none', cursor: 'pointer',
                  padding: '24px 0', display: 'flex', justifyContent: 'space-between', alignItems: 'baseline', gap: 24,
                  color: 'inherit',
                }}
              >
                <span style={{ fontFamily: C_T.display, fontWeight: 600, fontSize: 20, color: C_T.fg, letterSpacing: '-0.02em', lineHeight: 1.3 }}>
                  <span style={{ fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.14em', color: C_T.accent, marginRight: 14, fontWeight: 400 }}>
                    {String(i + 1).padStart(2, '0')}
                  </span>
                  {it.q}
                </span>
                <span style={{
                  fontFamily: C_T.display, fontWeight: 400, fontSize: 32, color: C_T.accent,
                  transform: open === i ? 'rotate(45deg)' : 'rotate(0deg)', transition: 'transform 200ms',
                }}>+</span>
              </button>
              {open === i && (
                <p style={{ fontFamily: C_T.sans, fontSize: 16, lineHeight: 1.65, color: C_T.sub, margin: 0, padding: '0 0 24px 36px', maxWidth: 720 }}>
                  {it.a}
                </p>
              )}
            </div>
          ))}
        </div>
      </div>
    </section>
  );
}

// Contact section — direct line only. Showcases Aymeric's coordinates prominently.
function CContact() {
  return (
    <section id="contact" style={{ padding: '140px 48px', background: C_T.accent, color: C_T.accentFg }}>
      <div style={{ maxWidth: 1040, margin: '0 auto' }}>
        <span style={{ fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.2em', textTransform: 'uppercase', color: 'rgba(250,250,247,0.75)' }}>
          // Ouvrir un accès partenaire
        </span>
        <h2 style={{
          fontFamily: C_T.display, fontWeight: 800, fontSize: 112, lineHeight: 0.92,
          margin: '20px 0 32px', color: C_T.accentFg, letterSpacing: '-0.05em',
        }}>
          Parlons<br /><span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontWeight: 400 }}>directement.</span>
        </h2>
        <p style={{ fontFamily: C_T.sans, fontSize: 20, lineHeight: 1.5, color: 'rgba(250,250,247,0.92)', maxWidth: 640, margin: '0 0 56px' }}>
          Un dossier client en tête, ou simplement envie de comprendre la mécanique en profondeur ?
          Appelez ou écrivez — Aymeric vous répond sous 48 h ouvrées.
        </p>

        {/* Direct contact card — full width, hero treatment */}
        <div className="hfa-contact-card" style={{
          background: C_T.fg, color: C_T.bg, padding: '48px 56px',
          display: 'grid', gridTemplateColumns: '5fr 7fr', gap: 56, alignItems: 'center',
        }}>
          <div>
            <span style={{
              fontFamily: C_T.mono, fontSize: 10, letterSpacing: '0.22em', textTransform: 'uppercase',
              color: 'rgba(250,250,247,0.55)', display: 'block', marginBottom: 18,
            }}>Contact direct partenariats</span>
            <div style={{
              fontFamily: C_T.display, fontWeight: 800, fontSize: 36, lineHeight: 1.05,
              color: C_T.bg, letterSpacing: '-0.02em',
            }}>Aymeric<br />Delahaye-Conte</div>
            <div style={{
              fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 18,
              color: 'rgba(250,250,247,0.6)', marginTop: 10,
            }}>Responsable réseau partenaires CGP</div>
          </div>

          <div style={{ display: 'flex', flexDirection: 'column', gap: 4 }}>
            <a href="tel:+33619885848" className="hfa-contact-line" style={{
              fontFamily: C_T.display, fontWeight: 800, fontSize: 48,
              color: C_T.accent, letterSpacing: '-0.02em', textDecoration: 'none',
              display: 'flex', alignItems: 'baseline', gap: 14, lineHeight: 1.1,
              padding: '20px 0', borderBottom: '1px solid rgba(250,250,247,0.18)',
            }}>
              <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 26, color: C_T.accent }}>↗</span>
              <span>+33 6 19 88 58 48</span>
            </a>
            <a href="mailto:partenaires@humansforart.com" className="hfa-contact-line" style={{
              fontFamily: C_T.mono, fontSize: 18, letterSpacing: '0.02em',
              color: 'rgba(250,250,247,0.92)', textDecoration: 'none',
              display: 'flex', alignItems: 'baseline', gap: 14,
              padding: '20px 0',
            }}>
              <span style={{ fontFamily: C_T.serif, fontStyle: 'italic', fontSize: 22, color: C_T.accent }}>↗</span>
              <span>partenaires@humansforart.com</span>
            </a>
          </div>
        </div>

        <p style={{
          fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.18em', textTransform: 'uppercase',
          color: 'rgba(250,250,247,0.6)', marginTop: 28, lineHeight: 1.7, textAlign: 'center',
        }}>
          ↳ Échange confidentiel · Réponse sous 48 h ouvrées · Paris
        </p>
      </div>
    </section>
  );
}

function CFooter() {
  return (
    <footer style={{
      padding: '32px 48px', background: C_T.fg, color: 'rgba(250,250,247,0.65)',
      fontFamily: C_T.mono, fontSize: 11, letterSpacing: '0.14em', textTransform: 'uppercase',
      display: 'flex', justifyContent: 'space-between',
    }}>
      <span>HumansForArt SAS · Fonds de Dotation HumansForArt</span>
      <span>partenaires@humansforart.com · +33 6 19 88 58 48 · Paris · 2026</span>
    </footer>
  );
}

function CgpLanding() {
  return (
    <div className="hfa-root" style={{
      background: C_T.bg, color: C_T.fg, fontFamily: C_T.sans,
      width: '100%', maxWidth: 1280, margin: '0 auto',
    }}>
      <CDynamicStyles />
      <CTopbar />
      <CHeader />
      <CHero />
      <CMarquee />
      <CMechanics />
      <CFiscal />
      <CRemuneration />
      <CSteps />
      <CBenefits />
      <CTrust />
      <CFAQ />
      <CContact />
      <CFooter />
    </div>
  );
}

window.CgpLanding = CgpLanding;