
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</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, diplôme reconnu en France par équivalence, j'ai exercé en cabinet privé, dont deux ans au Sénégal entre 2023 et 2025, 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="bleu">Diplôme reconnu en France</Badge>
                <Badge tone="soleil">Enfants & ados</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)" }}>Trois podcasts enregistrés pour la BBC</div>
                  <div style={{ fontSize: "var(--text-small)", color: "var(--text-soft)" }}>Le retard de langage et de parole chez l'enfant, l'apparition du bégaiement, et vivre avec le bégaiement en société.</div>
                </div>
                {SPOTIFY && <Button variant="secondary" href={SPOTIFY} target="_blank" rel="noreferrer" style={{ position: "relative" }}>Écouter<FlecheExterne /></Button>}
              </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" }}>
              {[["Instagram", INSTAGRAM], ["TikTok", TIKTOK], ["Facebook", FACEBOOK], ["Spotify", SPOTIFY], ["YouTube", YOUTUBE]]
                .map(([nom, href]) => (
                  <Button key={nom} variant="secondary" {...(href ? { href, target: "_blank", rel: "noreferrer" } : {})} style={{ position: "relative" }}>{nom}{href ? <FlecheExterne /> : null}</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 }, { kind: "spotify", href: SPOTIFY || undefined }, { kind: "youtube", href: YOUTUBE || undefined }]} />
      </div>
    </DecoCtx.Provider>
  );
}

window.Template = Template;
