const DS = window.MarieZammutoDesignSystem_95ae33 || {};
const { Button, Badge, SectionTitle, ServiceCard, TestimonialCard, FAQAccordion, StepItem, BlobCharacter, SiteFooter } = DS;

const DecoCtx = React.createContext(true);
const SEC = { padding: "var(--section-pad-y) var(--section-pad-x)", position: "relative", overflow: "hidden" };
const SEC_TIGHT = { padding: "clamp(40px,6vw,64px) var(--section-pad-x)", position: "relative", overflow: "hidden" };
const WRAP = { maxWidth: "var(--content-max)", margin: "0 auto", position: "relative" };
const CARD = { background: "var(--creme-carte)", borderRadius: "var(--radius-md)", boxShadow: "var(--shadow-card)" };

function Deco({ src, w, style, className }) {
  const on = React.useContext(DecoCtx);
  if (!on) return null;
  return <img src={src} width={w} alt="" aria-hidden="true" className={className}
    style={{ position: "absolute", pointerEvents: "none", ...style }} />;
}

function SoleilVivant({ w = 92, style }) {
  const on = React.useContext(DecoCtx);
  const ref = React.useRef(null);
  const [off, setOff] = React.useState({ x: 1.5, y: 1.5 });
  React.useEffect(() => {
    const onMove = (e) => {
      const el = ref.current;
      if (!el) return;
      const r = el.getBoundingClientRect();
      const dx = e.clientX - (r.left + r.width / 2), dy = e.clientY - (r.top + r.height / 2);
      const d = Math.hypot(dx, dy) || 1, m = Math.min(3, d / 60);
      setOff({ x: dx / d * m, y: dy / d * m });
    };
    window.addEventListener("mousemove", onMove);
    return () => window.removeEventListener("mousemove", onMove);
  }, []);
  if (!on) return null;
  const rayons = [[106.5, 81.6, 117.6, 86.2], [81.6, 106.5, 86.2, 117.6], [46.4, 106.5, 41.8, 117.6],
    [21.5, 81.6, 10.4, 86.2], [21.5, 46.4, 10.4, 41.8], [46.4, 21.5, 41.8, 10.4],
    [81.6, 21.5, 86.2, 10.4], [106.5, 46.4, 117.6, 41.8]];
  return (
    <svg ref={ref} viewBox="0 0 128 128" width={w} height={w} fill="none" aria-hidden="true"
      style={{ position: "absolute", pointerEvents: "none", ...style }}>
      {rayons.map(([x1, y1, x2, y2], i) => (
        <line key={i} x1={x1} y1={y1} x2={x2} y2={y2} stroke="var(--soleil-hex)" strokeWidth="9" strokeLinecap="round" />
      ))}
      <circle cx="64" cy="64" r="36" fill="var(--soleil-hex)" />
      <circle cx="51" cy="60" r="10" fill="#FFFFFF" />
      <circle cx="77" cy="60" r="10" fill="#FFFFFF" />
      <circle cx={51 + off.x} cy={60 + off.y} r="4.5" fill="#1A0B12" />
      <circle cx={77 + off.x} cy={60 + off.y} r="4.5" fill="#1A0B12" />
      <path d="M56 80 Q64 87 72 80" stroke="var(--prune)" strokeWidth="4" fill="none" strokeLinecap="round" />
    </svg>
  );
}

function FlecheExterne() {
  return (
    <svg className="mz-fleche-ext" viewBox="0 0 14 14" width="13" height="13" aria-hidden="true">
      <path d="M4 10 L10 4 M5.5 4 H10 V8.5" stroke="currentColor" strokeWidth="1.9" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function Check() {
  return (
    <svg viewBox="0 0 20 20" width="20" height="20" aria-hidden="true" style={{ flex: "0 0 auto", marginTop: 2 }}>
      <circle cx="10" cy="10" r="10" fill="var(--rose)" />
      <path d="M6 10.5 l2.7 2.7 L14.5 7" stroke="var(--prune)" strokeWidth="2.2" fill="none" strokeLinecap="round" strokeLinejoin="round" />
    </svg>
  );
}

function StatCard({ num, suffix, label }) {
  const [hov, setHov] = React.useState(false);
  return (
    <div onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{
        ...CARD, padding: "22px 20px 20px", display: "flex", flexDirection: "column", gap: 6,
        boxShadow: hov ? "var(--shadow-lift)" : "var(--shadow-card)", transform: hov ? "var(--lift)" : "none",
        transition: "transform var(--dur) var(--ease-bounce),box-shadow var(--dur) var(--ease-out)"
      }}>
      <span style={{ fontFamily: "var(--font-display)", fontWeight: "var(--weight-display)", fontSize: "clamp(2.25rem,4vw,3rem)", lineHeight: 1, color: "var(--prune)" }}>
        {num}<span style={{ fontSize: "0.55em" }}>{suffix}</span>
      </span>
      <span style={{ fontSize: "var(--text-small)", lineHeight: 1.45, color: "var(--text-soft)", textWrap: "pretty" }}>{label}</span>
    </div>
  );
}

function ScreenFrame({ children, width = "min(420px,100%)" }) {
  const dots = ["#FF5F57", "#FEBC2E", "#28C840"];
  return (
    <div style={{ width, background: "var(--creme-carte)", border: "2px solid #CFC7B8", borderRadius: "var(--radius-lg)", boxShadow: "var(--shadow-card)", overflow: "hidden" }}>
      <div style={{ display: "flex", alignItems: "center", gap: 7, padding: "10px 14px", borderBottom: "2px solid #E4DCCC" }}>
        {dots.map((c) => <span key={c} style={{ width: 11, height: 11, borderRadius: "50%", background: c }}></span>)}
        <span style={{ flex: 1, height: 8, borderRadius: 999, background: "#EFE7D8", marginLeft: 10 }}></span>
      </div>
      {children}
    </div>
  );
}

function CouverturePanel() {
  return (
    <div style={{ ...CARD, borderRadius: "var(--radius-lg)", padding: "clamp(24px,4vw,36px)", position: "relative", overflow: "hidden" }}>
      <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(220px,1fr))", gap: "clamp(20px,3vw,32px)", position: "relative" }}>
        {ZONES.map((z) => (
          <div key={z.zone} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Badge tone={z.tone} style={{ whiteSpace: "nowrap", alignSelf: "flex-start" }}>{z.zone}</Badge>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 8 }}>
              {z.pays.map((p) => (
                <li key={p} style={{ display: "flex", gap: 10, alignItems: "center", fontWeight: "var(--weight-bold)", fontSize: "var(--text-body-size)" }}>
                  <span style={{ width: 9, height: 9, borderRadius: "50%", background: "var(--prune)", flex: "0 0 auto" }}></span>{p}
                </li>
              ))}
            </ul>
          </div>
        ))}
      </div>
      <div style={{ display: "flex", alignItems: "flex-end", justifyContent: "space-between", gap: 20, flexWrap: "wrap", marginTop: 28 }}>
        <p style={{ margin: 0, fontSize: "var(--text-small)", color: "var(--text-soft)", maxWidth: "46ch", textWrap: "pretty" }}>
          Les séances s'organisent selon votre fuseau horaire — tôt le matin ou en fin de journée, comme il vous arrange.
        </p>
        <BlobCharacter variant="colline" color="sauge" size={170} style={{ marginBottom: -34, marginRight: -10 }} />
      </div>
    </div>
  );
}

function SelecteurDuree({ valeur, onChange }) {
  return (
    <select aria-label="Durée de séance" value={valeur} onChange={(e) => onChange(Number(e.target.value))}
      style={{
        appearance: "none", WebkitAppearance: "none",
        fontFamily: "var(--font-body)", fontWeight: "var(--weight-bold)", fontSize: "0.75rem",
        textTransform: "none", letterSpacing: "normal", lineHeight: 1,
        color: "var(--prune)",
        backgroundColor: "rgba(255,255,255,.6)",
        backgroundImage: "url(data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2010%206%27%3E%3Cpath%20d=%27M1%201l4%204%204-4%27%20stroke=%27%236B2138%27%20stroke-width=%272%27%20fill=%27none%27%20stroke-linecap=%27round%27%20stroke-linejoin=%27round%27/%3E%3C/svg%3E)",
        backgroundRepeat: "no-repeat",
        backgroundPosition: "right 8px center",
        backgroundSize: "10px 7px",
        border: "2px solid rgba(107,33,56,.22)", borderRadius: "var(--radius-pill)",
        padding: "4px 24px 4px 10px", cursor: "pointer", flex: "0 0 auto"
      }}>
      {DUREES.map((d) => <option key={d.min} value={d.min}>{d.label}</option>)}
    </select>
  );
}

function CataloguePanel({ showPrice }) {
  const [open, setOpen] = React.useState(showPrice);
  React.useEffect(() => setOpen(showPrice), [showPrice]);
  const [duree, setDuree] = React.useState(45);
  const cadre = React.useRef(null);
  const hDepart = React.useRef(null);
  const basculer = (v) => {
    hDepart.current = cadre.current ? cadre.current.getBoundingClientRect().height : null;
    setOpen(v);
  };
  React.useLayoutEffect(() => {
    const el = cadre.current;
    if (!el || hDepart.current == null) return;
    const depart = hDepart.current;
    hDepart.current = null;
    el.style.height = "";
    const arrivee = el.getBoundingClientRect().height;
    if (Math.abs(arrivee - depart) < 1) return;
    el.style.height = depart + "px";
    void el.offsetHeight;
    el.style.height = arrivee + "px";
    const id = setTimeout(() => { el.style.height = ""; }, 400);
    return () => { clearTimeout(id); el.style.height = ""; };
  }, [open]);
  const groupes = ["Bilans", "Prises en charge", "Stages & formations"];
  return (
    <div ref={cadre} className="mz-resize" style={{ ...CARD, borderRadius: "var(--radius-lg)", padding: "var(--card-pad)", marginTop: 26 }}>
      <div style={{ display: "flex", gap: 16, alignItems: "center", justifyContent: "space-between", flexWrap: "wrap", marginBottom: 18 }}>
        <h3 style={{ fontFamily: "var(--font-display)", fontWeight: "var(--weight-heading)", fontSize: "var(--text-h3)", textTransform: "uppercase", letterSpacing: "var(--tracking-caps)", margin: 0 }}>Tous les services</h3>
        {!open
          ? <Button variant="secondary" onClick={() => basculer(true)} style={{ padding: "11px 20px", fontSize: "var(--text-small)" }}>Voir les tarifs</Button>
          : <Button variant="secondary" onClick={() => basculer(false)} style={{ padding: "11px 20px", fontSize: "var(--text-small)" }}>Masquer les tarifs</Button>}
      </div>
      <div className="cols3" style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(240px,1fr))", gap: "clamp(18px,3vw,32px)" }}>
        {groupes.map((g) => (
          <div key={g} style={{ display: "flex", flexDirection: "column", gap: 12 }}>
            <Badge tone="bleu" style={{ display: "flex", alignItems: "center", justifyContent: "space-between",
              gap: 8, minHeight: 38, paddingRight: g === "Prises en charge" ? 5 : 14 }}>
              {g}
              {g === "Prises en charge" && <SelecteurDuree valeur={duree} onChange={setDuree} />}
            </Badge>
            <ul style={{ listStyle: "none", margin: 0, padding: 0, display: "flex", flexDirection: "column", gap: 10 }}>
              {SERVICES.filter((s) => s.groupe === g).map((s, i) => {
                const duree_lue = s.tarifs ? DUREES.find((d) => d.min === duree).label : s.duration;
                const tarif = s.tarifs ? s.tarifs[duree] : s.price;
                return (
                  <li key={i} style={{ display: "flex", flexDirection: "column", gap: 2, paddingBottom: 10, borderBottom: "2px solid var(--border-soft)" }}>
                    <span style={{ fontWeight: "var(--weight-bold)", fontSize: "var(--text-body-size)" }}>{s.name}</span>
                    <span style={{ fontSize: "var(--text-small)", color: "var(--text-soft)" }}>
                      {duree_lue}{open ? ` · ${tarif}` : ""}
                    </span>
                  </li>
                );
              })}
            </ul>
            {open && MENTIONS[g] && (
              <p style={{ margin: "2px 0 0", fontSize: "var(--text-small)", color: "var(--text-soft)", lineHeight: "var(--leading-body)", textWrap: "pretty", whiteSpace: "pre-line" }}>{MENTIONS[g]}</p>
            )}
          </div>
        ))}
      </div>
    </div>
  );
}

function ReelCard({ r }) {
  const [hov, setHov] = React.useState(false);
  return (
    <a href={INSTAGRAM} target="_blank" rel="noreferrer"
      onMouseEnter={() => setHov(true)} onMouseLeave={() => setHov(false)}
      style={{ textDecoration: "none", color: "var(--prune)", display: "flex", flexDirection: "column", gap: 12, transform: hov ? "var(--lift)" : "none", transition: "transform var(--dur) var(--ease-bounce)" }}>
      <div style={{ position: "relative", aspectRatio: "3 / 4", borderRadius: "var(--radius-lg)", background: `var(--${r.color})`, boxShadow: hov ? "var(--shadow-lift)" : "var(--shadow-card)", display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden" }}>
        <BlobCharacter variant={r.blob.variant} color={r.blob.color} size={r.blob.size} style={{ marginBottom: -10 }} />
        <span style={{ position: "absolute", top: "50%", left: "50%", transform: "translate(-50%,-50%)", width: 54, height: 54, borderRadius: "50%", background: "var(--creme-carte)", boxShadow: "var(--shadow-card)", display: "grid", placeItems: "center" }}>
          <svg viewBox="0 0 16 16" width="17" height="17" aria-hidden="true"><path d="M4.5 2.5 13 8 4.5 13.5 Z" fill="var(--prune)" /></svg>
        </span>
      </div>
      <span style={{ fontWeight: "var(--weight-bold)", fontSize: "var(--text-small)", lineHeight: 1.4, textWrap: "pretty" }}>{r.label}</span>
    </a>
  );
}

function FooterColline() {
  return (
    <svg viewBox="0 0 1440 200" style={{ display: "block", width: "100%", height: "auto", background: "var(--creme)" }} aria-hidden="true">
      <path d="M40 200 A170 170 0 0 1 380 200 Z" fill="#7E2E47" />
      <path d="M320 200 A150 150 0 0 1 620 200 Z" fill="#5E1D31" />
      <path d="M470 70 a16 16 0 0 1 2 -32 a22 22 0 0 1 42 -6 a19 19 0 0 1 26 18 a13 13 0 0 1 -3 20 Z" fill="#8A4A5E" opacity=".55" />
      <circle cx="820" cy="70" r="26" fill="#F3CD79" opacity=".9" />
      <path d="M1050 200 V120 a70 70 0 0 1 140 0 V200 Z" fill="#7E2E47" />
      <circle cx="1095" cy="124" r="15" fill="#FFFFFF" /><circle cx="1145" cy="124" r="15" fill="#FFFFFF" />
      <circle cx="1097" cy="126" r="6.5" fill="#1A0B12" /><circle cx="1147" cy="126" r="6.5" fill="#1A0B12" />
      <path d="M1108 154 Q1120 162 1132 154" stroke="#FFB8B8" strokeWidth="4" fill="none" strokeLinecap="round" />
      <path d="M1240 200 A85 85 0 0 1 1410 200 Z" fill="#7E2E47" />
      <rect x="0" y="196" width="1440" height="4" fill="var(--prune)" />
    </svg>
  );
}

function Template({ onBook, showPrice = false, deco = true }) {
  return (
    <DecoCtx.Provider value={deco}>
      <div id="haut" data-screen-label="Site Marie Zammuto"
        style={{ background: "var(--creme)", color: "var(--prune)", fontFamily: "var(--font-body)", fontWeight: "var(--weight-body)", fontSize: "var(--text-body-size)", overflow: "hidden" }}>

        {/* ── 01 · HERO ── */}
        <header data-label="01 · Hero" style={{ padding: "clamp(120px,16vw,180px) var(--section-pad-x) 0", position: "relative", overflow: "hidden" }}>
          <Deco src="assets/illustrations/nuage-blanc.svg" w={180} style={{ top: 104, left: "5%" }} />
          <Deco src="assets/illustrations/nuage-blanc.svg" w={120} style={{ top: 170, right: "8%" }} />
          <div style={{ maxWidth: 920, margin: "0 auto", textAlign: "center", position: "relative" }}>
            <Badge tone="bleu">100 % en ligne · de chez vous</Badge>
            <div style={{ height: 18 }}></div>
            <SectionTitle as="h1" highlight="grandir" underline="rose">Des mots pour grandir, un rendez-vous à la fois</SectionTitle>
            <p style={{ fontSize: "var(--text-lead)", lineHeight: "var(--leading-body)", maxWidth: 560, margin: "20px auto 28px", textWrap: "pretty" }}>
              Orthophonie pour votre enfant, dans le confort de votre salon. Des séances ludiques, des progrès concrets — et zéro salle d'attente.
            </p>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", flexWrap: "wrap" }}>
              <Button size="lg" onClick={onBook}>Prendre rendez-vous</Button>
              <Button variant="secondary" size="lg" href="#services">Découvrir les services</Button>
            </div>
            <p style={{ fontSize: "var(--text-small)", color: "var(--text-soft)", marginTop: 14 }}>Appel découverte gratuit de 15 minutes · Factures pour vos démarches</p>
          </div>
          <div style={{ display: "flex", justifyContent: "center", alignItems: "flex-end", gap: "clamp(16px,4vw,48px)", marginTop: 44, marginBottom: -6 }}>
            <BlobCharacter variant="colline" color="sauge" size={200} style={{ marginBottom: -10 }} />
            <BlobCharacter variant="arche" color="rose" size={130} style={{ marginBottom: -14 }} />
            <BlobCharacter variant="demi-cercle" color="bleu" size={170} style={{ marginBottom: -8 }} />
            {deco && <BlobCharacter variant="arbre" color="sauge" size={110} style={{ marginBottom: -8 }} />}
          </div>
          <div style={{ borderBottom: "3px solid var(--creme-ombre)" }}></div>
        </header>

        {/* ── 02 · EFFICACITÉ ── */}
        <section id="efficacite" data-label="02 · Efficacité" style={SEC}>
          <div style={WRAP}>
            <div className="cols2" style={{ display: "grid", gridTemplateColumns: "1fr 1fr", gap: "clamp(24px,5vw,64px)", alignItems: "center" }}>
              <div>
                <SectionTitle align="left" kicker="En ligne, vraiment ?" highlight="ça fonctionne" underline="bleu">La télépratique, ça fonctionne !</SectionTitle>
                <p style={{ lineHeight: "var(--leading-body)", margin: "18px 0 0", textWrap: "pretty" }}>
                  Les études<a href={ETUDE_URL} style={{ textDecoration: "none", fontWeight: "var(--weight-bold)" }}>*</a> sont claires : en orthophonie, les séances en ligne donnent des résultats équivalents à ceux en cabinet. Et votre enfant progresse là où il vit — chez vous, avec vous.
                </p>
                <div style={{ display: "flex", flexDirection: "column", gap: 10, marginTop: 18 }}>
                  {AVANTAGES.map((a, i) => (
                    <div key={i} style={{ display: "flex", gap: 12, alignItems: "flex-start" }}>
                      <Check /><span style={{ lineHeight: 1.5 }}>{a}</span>
                    </div>
                  ))}
                </div>
              </div>
              <div style={{ position: "relative", display: "flex", justifyContent: "center" }}>
                <ScreenFrame>
                  <div style={{ background: "var(--bleu)", width: "100%", aspectRatio: "4/3", display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden", position: "relative" }}>
                    <Deco src="assets/illustrations/nuage-blanc.svg" w={100} style={{ top: 24, right: 30 }} />
                    <Deco src="assets/illustrations/soleil.svg" w={70} style={{ top: 20, left: 40 }} />
                    <BlobCharacter variant="arche" color="prune" size={150} style={{ marginBottom: -16 }} />
                  </div>
                </ScreenFrame>
                <Deco src="assets/doodles/fleche-boucle.svg" w={160} style={{ bottom: -30, left: -12, transform: "rotate(12deg)" }} className="deco-fleche" />
              </div>
            </div>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(200px,1fr))", gap: 18, marginTop: "clamp(36px,5vw,56px)" }}>
              {STATS.filter((s) => !s.masque).map((s, i) => <StatCard key={i} {...s} />)}
            </div>
            <p style={{ fontSize: "var(--text-small)", color: "var(--text-soft)", marginTop: 14 }}>
              <a href={ETUDE_URL} style={{ fontWeight: "var(--weight-bold)", color: "var(--prune)", textDecoration: "underline", textDecorationColor: "var(--rose)", textUnderlineOffset: 3 }}>* Sources : Cochrane (2020), ASHA, INSERM.</a>
            </p>
          </div>
        </section>

        {/* ── 03 · SERVICES ── */}
        <section id="services" data-label="03 · Services" style={SEC}>
          <Deco src="assets/illustrations/nuage-blanc.svg" w={260} style={{ top: 10, right: -60 }} />
          <div style={WRAP}>
            <SectionTitle kicker="Mes services" highlight="point de départ" underline="rose">Choisissez votre point de départ</SectionTitle>
            <p style={{ textAlign: "center", color: "var(--text-soft)", margin: "14px auto 40px", maxWidth: 520, lineHeight: "var(--leading-body)" }}>
              Chaque suivi commence par un appel gratuit.
            </p>
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(250px,1fr))", gap: 22, alignItems: "stretch" }}>
              {SERVICES_PHARES.map((s) => (
                <ServiceCard key={s.key} title={s.title} age={s.age} color={s.color} price={s.price}
                  description={s.description} revealLabel="Voir le tarif" ctaLabel="Prendre rendez-vous" onCta={onBook}
                  icon={<BlobCharacter variant={s.blob.variant} color={s.blob.color} size={s.blob.size} />} />
              ))}
            </div>
            <CataloguePanel showPrice={showPrice} />
          </div>
        </section>

        {/* ── 04 · MÉTHODE ── */}
        <section id="methode" data-label="04 · Méthode" style={SEC_TIGHT}>
          <Deco src="assets/illustrations/nuage-blanc.svg" w={230} style={{ bottom: 30, left: "4%" }} />
          <div style={WRAP}>
            <SectionTitle highlight="ça se passe" underline="soleil">Comment ça se passe ?</SectionTitle>
            <div className="mz-steps" style={{ display: "grid", gridTemplateColumns: "1fr auto 1fr auto 1fr", gap: "clamp(10px,1.6vw,22px)", alignItems: "start", justifyItems: "center", marginTop: 44 }}>
              {STEPS.map((s, i) => (
                <React.Fragment key={s.n}>
                  <StepItem number={s.n} color={s.color} title={s.title} style={{ maxWidth: 280, minWidth: 0 }}>{s.desc}</StepItem>
                  {i < STEPS.length - 1 && (
                    deco
                      ? <img className="deco-fleche" src="assets/doodles/fleche-courbe.svg" alt="" aria-hidden="true"
                          style={i === 0
                            ? { width: "clamp(40px,6vw,84px)", height: "auto", marginTop: 8 }
                            : { width: "clamp(40px,6vw,84px)", height: "auto", marginTop: 44, transform: "scaleY(-1) rotate(-8deg)" }} />
                      : <span></span>
                  )}
                </React.Fragment>
              ))}
            </div>
            <p style={{ textAlign: "center", fontSize: "var(--text-small)", color: "var(--text-soft)", marginTop: 30 }}>Aucun engagement avant l'appel découverte.</p>
          </div>
        </section>

        {/* ── 05 · COUVERTURE ── */}
        <section id="couverture" data-label="05 · Couverture" style={SEC}>
          <div style={WRAP}>
            <SectionTitle highlight="frontière" underline="bleu">Le langage n'a pas de frontière</SectionTitle>
            <p style={{ textAlign: "center", margin: "14px auto 34px", maxWidth: 560, lineHeight: "var(--leading-body)", textWrap: "pretty" }}>
              Des familles francophones me suivent depuis 14 pays. Rejoignez-les, où que vous viviez.
            </p>
            <CouverturePanel />
          </div>
        </section>

        {/* ── 06 · À PROPOS ── */}
        <section id="apropos" data-label="06 · À propos" style={SEC}>
          <div className="cols2" style={{ ...WRAP, display: "grid", gridTemplateColumns: "minmax(240px,340px) 1fr", gap: "clamp(28px,5vw,64px)", alignItems: "center" }}>
            <div style={{ position: "relative" }}>
              <div style={{ backgroundColor: "var(--rose)", backgroundImage: "url('/assets/photos/marie-plage.jpg')", backgroundSize: "cover", backgroundPosition: "center", borderRadius: "var(--radius-lg)", aspectRatio: "3/3.4", display: "flex", alignItems: "flex-end", justifyContent: "center", overflow: "hidden", boxShadow: "var(--shadow-card)", position: "relative" }}>
                <BlobCharacter variant="demi-cercle" color="rose" size={210} style={{ marginBottom: -12 }} />
                <SoleilVivant w={92} style={{ top: 14, right: 14 }} />
              </div>
            </div>
            <div>
              <SectionTitle align="left" kicker="À propos" highlight="Marie" underline="rose">Je m'appelle Marie</SectionTitle>
              <p style={{ lineHeight: "var(--leading-body)", margin: "18px 0 0", textWrap: "pretty" }}>
                Orthophoniste diplômée de l'Université libre de Bruxelles, j'ai d'abord exercé en cabinet avant de transposer ma pratique entièrement en ligne. Mon approche : des séances qui ressemblent à du jeu, des parents outillés, et beaucoup de plaisir, parce qu'un enfant qui s'amuse est un enfant qui apprend.
              </p>
              <div style={{ display: "flex", gap: 10, flexWrap: "wrap", margin: "18px 0 0" }}>
                <Badge tone="sauge">Orthophoniste diplômée</Badge>
                <Badge tone="soleil">Enfants & ados</Badge>
                <Badge tone="bleu">100 % en ligne</Badge>
              </div>
              <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(140px,1fr))", gap: 14, marginTop: 22 }}>
                {[["Exerce depuis", "2021"], ["En ligne depuis", "2025"], ["Formations suivies", "12+"]].map(([k, v]) => (
                  <div key={k} style={{ ...CARD, padding: "16px 18px" }}>
                    <div style={{ fontSize: "0.8125rem", color: "var(--text-soft)", textTransform: "uppercase", letterSpacing: "var(--tracking-badge)", fontWeight: "var(--weight-bold)" }}>{k}</div>
                    <div style={{ fontFamily: "var(--font-display)", fontWeight: "var(--weight-display)", fontSize: "1.75rem", lineHeight: 1.1 }}>{v}</div>
                  </div>
                ))}
              </div>
              <div style={{ marginTop: 22, background: "var(--creme-carte)", borderRadius: "var(--radius-md)", padding: "18px 20px", boxShadow: "var(--shadow-card)", display: "flex", alignItems: "center", gap: 16, flexWrap: "wrap" }}>
                <div style={{ flex: 1, minWidth: 200 }}>
                  <div style={{ fontWeight: "var(--weight-bold)" }}>Des idées de jeux chaque semaine</div>
                  <div style={{ fontSize: "var(--text-small)", color: "var(--text-soft)" }}>Suivez-moi sur Instagram : trucs, jeux et vrais conseils d'ortho.</div>
                </div>
                <Button variant="secondary" href={INSTAGRAM} target="_blank" rel="noreferrer">@orthophonie.avec.marie</Button>
              </div>
            </div>
          </div>
        </section>

        {/* ── 07 · TÉMOIGNAGES ── */}
        <section id="temoignages" data-label="07 · Témoignages" style={SEC_TIGHT}>
          <Deco src="assets/illustrations/nuage-blanc.svg" w={280} style={{ top: -20, right: -70 }} />
          <div style={WRAP}>
            <SectionTitle highlight="parlent" underline="bleu">Ils en parlent mieux que moi</SectionTitle>
            {/* En attente de vrais avis
            <div style={{ display: "flex", justifyContent: "center", marginTop: 16 }}>
              <Badge tone="creme">80+ avis · 4,9 / 5</Badge>
            </div>
            */}
            <div style={{ display: "grid", gridTemplateColumns: "repeat(auto-fit,minmax(260px,1fr))", gap: 22, marginTop: 34 }}>
              {TESTIMONIALS.map((t, i) => (
                <TestimonialCard key={i} quote={t.quote} author={t.author} detail={t.detail} accent={t.accent} />
              ))}
            </div>
          </div>
        </section>

        {/* ── 08 · FAQ ── */}
        <section id="faq" data-label="08 · FAQ" style={SEC_TIGHT}>
          <Deco src="assets/illustrations/nuage-blanc.svg" w={200} style={{ top: 40, left: -50 }} />
          <Deco src="assets/illustrations/blob-arche-bleu.svg" w={110} style={{ bottom: -34, right: "4%" }} />
          <div style={{ maxWidth: "var(--content-narrow)", margin: "0 auto", position: "relative" }}>
            <SectionTitle highlight="questions" underline="rose">Vos questions</SectionTitle>
            <div style={{ marginTop: 28 }}>
              <FAQAccordion items={FAQS} defaultOpen={0} style={{ maxWidth: "none" }} />
            </div>
            <div style={{ display: "flex", gap: 16, alignItems: "center", justifyContent: "center", flexWrap: "wrap", marginTop: 30 }}>
              <span style={{ fontSize: "var(--text-small)", color: "var(--text-soft)" }}>Votre question n'est pas là ?</span>
              <Button variant="secondary" onClick={onBook}>Réserver l'appel gratuit</Button>
            </div>
          </div>
        </section>

        {/* ── 09 · RÉSEAUX ── */}
        <section id="reseaux" data-label="09 · Réseaux" style={SEC_TIGHT}>
          <div style={WRAP}>
            <SectionTitle highlight="format court" underline="soleil">De la pédagogie au format court</SectionTitle>
            <p style={{ textAlign: "center", color: "var(--text-soft)", margin: "14px auto 34px" }}>Une nouvelle vidéo chaque semaine.</p>
            <div className="mz-reels" style={{ display: "grid", gridTemplateColumns: "repeat(4,minmax(0,1fr))", gap: 22 }}>
              {REELS.map((r, i) => <ReelCard key={i} r={r} />)}
            </div>
            <div style={{ display: "flex", gap: 14, justifyContent: "center", marginTop: 32, flexWrap: "wrap" }}>
              <Button variant="secondary" href={INSTAGRAM} target="_blank" rel="noreferrer" style={{ position: "relative" }}>Instagram<FlecheExterne /></Button>
              <Button variant="secondary" href={TIKTOK} target="_blank" rel="noreferrer" style={{ position: "relative" }}>TikTok<FlecheExterne /></Button>
              <Button variant="secondary" href={FACEBOOK} target="_blank" rel="noreferrer" style={{ position: "relative" }}>Facebook<FlecheExterne /></Button>
            </div>
          </div>
        </section>

        {/* ── 10 · CTA FINAL ── */}
        <section data-label="10 · CTA final" style={{ padding: "var(--section-pad-y) var(--section-pad-x) clamp(80px,12vw,140px)", position: "relative", overflow: "hidden" }}>
          <Deco src="assets/illustrations/nuage-blanc.svg" w={240} style={{ bottom: 20, right: "6%" }} />
          <Deco src="assets/illustrations/nuage-blanc.svg" w={160} style={{ top: 30, left: "8%" }} />
          <div style={{ maxWidth: 640, margin: "0 auto", textAlign: "center", position: "relative" }}>
            <div style={{ display: "flex", justifyContent: "center", gap: 24, alignItems: "flex-end", marginBottom: 8 }}>
              <BlobCharacter variant="arche" color="bleu" size={84} />
              <BlobCharacter variant="soleil" color="soleil" size={72} />
              <BlobCharacter variant="arche" color="rose" size={84} />
            </div>
            <SectionTitle highlight="commence" underline="soleil">On commence ?</SectionTitle>
            <p style={{ lineHeight: "var(--leading-body)", margin: "16px auto 26px", maxWidth: 460, textWrap: "pretty" }}>
              Le premier pas est gratuit : 15 minutes en visio pour me parler de votre enfant, sans engagement.
            </p>
            <Button size="lg" onClick={onBook}>Prendre rendez-vous</Button>
            <p style={{ fontSize: "var(--text-small)", color: "var(--text-soft)", marginTop: 14 }}>Réponse en 48 h · Places limitées</p>
          </div>
        </section>

        <FooterColline />
        <SiteFooter
          tagline="Orthophoniste diplômée — séances en ligne pour enfants et adolescents, où que vous soyez."
          links={[{ label: "Services", href: "#services" }, { label: "Parcours", href: "#methode" }, { label: "À propos", href: "#apropos" }, { label: "FAQ", href: "#faq" }]}
          socials={[{ kind: "instagram", href: INSTAGRAM }, { kind: "tiktok", href: TIKTOK }, { kind: "facebook", href: FACEBOOK }]} />
      </div>
    </DecoCtx.Provider>
  );
}

window.Template = Template;