{ if (step === 1) trackEvent("form_start"); }}>

— Candidature confidentielle

Faire une demande
confidentielle.

Réponse sous 48 heures — chaque profil est lu personnellement.

Ce formulaire est réservé aux personnes sincèrement engagées dans une démarche de mariage. Toutes les candidatures ne sont pas retenues — chaque dossier est lu personnellement.

Les informations transmises restent strictement confidentielles.
Aucun profil n'est public.

{stepLabels.map((label, i) => (

i + 1 ? "is-done" : ""}`}>

{step > i + 1 ? "✓" : i + 1}

{label} {i < stepLabels.length - 1 &&

}

))}

{/* ÉTAPE 1 — IDENTITÉ */} {step === 1 && ( <>

Étape 1 — Identité

Vous êtes setR("gender", v)} error={errors.gender} />

Prénom {errors.firstName && {errors.firstName}}

Nom {errors.lastName && {errors.lastName}}

Email {errors.email && {errors.email}}

Téléphone

setR("phone", e.target.value.replace(/[^\d\s]/g, ""))} placeholder={form.phoneCode === "+33" || form.phoneCode === "+212" ? "6 12 34 56 78" : "Numéro local"} style={{ flex: 1 }} maxLength={(PHONE_RULES[form.phoneCode]?.max || 15) + 4} />

{errors.phone ? {errors.phone} : {(PHONE_RULES[form.phoneCode] || { hint: "Numéro local sans l'indicatif pays" }).hint} }

Âge {errors.age && {errors.age}}

Ville / région de résidence {errors.city && {errors.city}}

Origine familiale / région {errors.origin && {errors.origin}}

)} {/* ÉTAPE 2 — DÉMARCHE */} {step === 2 && ( <>

Étape 2 — Démarche

Êtes-vous actuellement dans une démarche sérieuse de mariage ? setR("intent", v)} error={errors.intent} />

Dans quel délai souhaitez-vous idéalement vous marier si vous rencontrez la bonne personne ? setR("timeline", v)} error={errors.timeline} />

Est-ce important pour vous que la personne partage des valeurs et une culture proches ? setR("valuesImportance", v)} error={errors.valuesImportance} />

Décrivez en quelques mots ce que vous recherchez

<span style={{ fontSize: "11px", color: "var(--ink-faint)", marginTop: "5px", display: "block", letterSpacing: "0.03em" }}>
                {form.seeking.length < 10 ? `Minimum 10 caractères (${form.seeking.length}/10)` : ""}
              </span>
              {errors.seeking && <span className="tt-field__err tt-field__err--block">{errors.seeking}</span>}
            </div>
          </>
        )}

{/* ÉTAPE 3 — FILTRAGE (hommes uniquement) */}
        {step === 3 && form.gender === "Un homme" && (
          <>
            <div className="tt-form__step-title">Étape 3 — Engagement</div>

<div className="tt-field tt-field--full">
              <label>Êtes-vous prêt à investir dans un accompagnement sérieux si celui-ci vous correspond ?</label>
              <RadioGroup name="readyToInvest" options={["Oui", "Je souhaite en savoir plus", "Non"]} value={form.readyToInvest} onChange={v => setR("readyToInvest", v)} error={errors.readyToInvest} />
            </div>

{form.readyToInvest !== "Non" && (
              <div className="tt-field tt-field--full">
                <label>Quel budget seriez-vous prêt à consacrer à une démarche sérieuse ?</label>
                <RadioGroup name="budget" options={["Moins de 500€", "500 à 1 000€", "1 000 à 3 000€", "+ 3 000€"]} value={form.budget} onChange={v => setR("budget", v)} error={errors.budget} />
              </div>
            )}
          </>
        )}

{/* ÉTAPE VALIDATION */}
        {((step === 3 && form.gender !== "Un homme") || (step === 4 && form.gender === "Un homme")) && (
          <>
            <div className="tt-form__step-title">Étape {form.gender === "Un homme" ? 4 : 3} — Validation</div>

{form.gender !== "Un homme" && (
              <div className="tt-field tt-field--full">
                <label>Seriez-vous intéressée par un accompagnement privé et personnalisé dans votre démarche ?</label>
                <RadioGroup
                  name="accompagnementInterest"
                  options={[
                    "Oui, cela pourrait m'intéresser",
                    "Peut-être, j'aimerais en savoir plus",
                    "Non, uniquement les mises en relation.",
                  ]}
                  value={form.accompagnementInterest}
                  onChange={v => setR("accompagnementInterest", v)}
                  error={errors.accompagnementInterest}
                />
                <p style={{ fontSize: "14px", color: "var(--ink-faint)", marginTop: "12px", lineHeight: "1.7" }}>
                  Cet accompagnement peut inclure : suivi personnalisé, préparation avant mises en relation, conseils et accompagnement humain discret.
                </p>
              </div>
            )}

<div className="tt-field tt-field--full">
              <label>Seriez-vous disponible pour un échange confidentiel ?</label>
              <RadioGroup name="available" options={["Oui", "Non", "À organiser"]} value={form.available} onChange={v => setR("available", v)} error={errors.available} />
            </div>

<div className="tt-field tt-field--full">
              <div className="tt-checkboxes">
                <label className={`tt-checkbox ${form.confirmSerious ? "is-on" : ""}`}>
                  <input type="checkbox" checked={form.confirmSerious} onChange={setC("confirmSerious")} />
                  <span className="tt-checkbox__box" />
                  <span>Je confirme que ma démarche est sérieuse</span>
                </label>
                {errors.confirmSerious && <span className="tt-field__err tt-field__err--block">{errors.confirmSerious}</span>}

<label className={`tt-checkbox ${form.confirmContact ? "is-on" : ""}`}>
                  <input type="checkbox" checked={form.confirmContact} onChange={setC("confirmContact")} />
                  <span className="tt-checkbox__box" />
                  <span>J'accepte que mes informations soient utilisées par DAR TISLIT dans le cadre de ma candidature et des mises en relation proposées.</span>
                </label>
                {errors.confirmContact && <span className="tt-field__err tt-field__err--block">{errors.confirmContact}</span>}
              </div>
            </div>
          </>
        )}

</div>{/* end tt-form__step-content */}

<div className="tt-form__foot tt-form__foot--nav">
          <div>
            {step > 1 && (
              <button type="button" className="tt-btn tt-btn--ghost" onClick={prev}>
                ← Précédent
              </button>
            )}
          </div>
          <div className="tt-form__legal">
            <TislitMark size={12} color="var(--gold)" strokeWidth={1.2} />
            <span>Données confidentielles — jamais partagées.</span>
          </div>
          {step < totalSteps ? (
            <button type="button" className="tt-btn tt-btn--primary" onClick={next}>
              <span>Continuer</span>
              <ArrowRight />
            </button>
          ) : (
            <button type="button" className="tt-btn tt-btn--primary" onClick={submit} disabled={sending}>
              <span>{sending ? "Envoi en cours…" : "Envoyer ma candidature"}</span>
              {!sending && <ArrowRight />}
            </button>
          )}
        </div>

</form>
    </section>
  );
}

// ============== CTA FINAL ==============
function CTAFinalSection() {
  return (
    <section className="tt-section tt-quote tt-cta-final">
      <Reveal><Divider /></Reveal>
      <Reveal delay={150} as="h2" className="tt-quote__text" style={{ fontStyle: "normal", fontWeight: 400 }}>
        Prêt(e) à avancer dans une <em style={{ fontStyle: "italic", color: "var(--accent)" }}>démarche sérieuse ?</em>
      </Reveal>
      <Reveal delay={280}>
        <p style={{ fontFamily: "var(--display-font)", fontStyle: "italic", fontSize: "clamp(17px,1.5vw,20px)", color: "var(--ink-soft)", maxWidth: "48ch", margin: "0 auto 40px", textAlign: "center" }}>
          Si vous recherchez une rencontre sincère, discrète et alignée avec vos valeurs, vous pouvez déposer une demande confidentielle.
        </p>
      </Reveal>
      <Reveal delay={400}>
        <div className="tt-hero__ctas" style={{ justifyContent: "center" }}>
          <a href="#candidature" className="tt-btn tt-btn--primary" onClick={() => trackEvent("click_hero_cta")}>
            <span>Faire une demande confidentielle</span>
            <ArrowRight />
          </a>
          <a href="#fonctionnement" className="tt-btn tt-btn--text" onClick={() => trackEvent("click_secondary_cta")}>
            Comprendre le fonctionnement
          </a>
        </div>
      </Reveal>
    </section>
  );
}

// ============== FOOTER ==============
function Footer() {
  return (
    <footer className="tt-footer">
      <div className="tt-footer__top">
        <div className="tt-footer__brand">
          <TislitMark size={26} color="var(--gold)" strokeWidth={1} />
          <div className="tt-footer__word">DAR TISLIT</div>
          <div className="tt-footer__tag">Service privé de mise en relation sérieuse</div>
          <p className="tt-footer__desc">
            Une démarche sérieuse, humaine et discrète pour les personnes recherchant une relation orientée mariage.
          </p>
          <a href="mailto:contact@dartislit.com" className="tt-footer__email">contact@dartislit.com</a>
        </div>
        <div className="tt-footer__cols">
          <div>
            <div className="tt-footer__h">Navigation</div>
            <a href="#">Accueil</a>
            <a href="#fonctionnement">Comment ça fonctionne</a>
            <a href="#confidentialite">Confidentialité</a>
            <a href="#faq">FAQ</a>
            <a href="#candidature">Nous contacter</a>
          </div>
          <div>
            <div className="tt-footer__h">Légal</div>
            <a href="/mentions-legales">Mentions légales</a>
            <a href="/politique-confidentialite">Confidentialité</a>
            <a href="/conditions-generales">CGU</a>
          </div>
          <div className="tt-footer__col--resources">
            <div className="tt-footer__h">Ressources</div>
            <a href="/a-propos">À propos</a>
            <a href="/mariage-chleuh-france">Mariage chleuh en France</a>
            <a href="/rencontre-mariage-serieux">Relation sérieuse orientée mariage</a>
            <a href="/trouver-mari-marocain-serieux">Compatibilité culturelle</a>
          </div>
        </div>
      </div>
      <div className="tt-footer__bot">
        <span>© 2026 DAR TISLIT. Tous droits réservés.</span>
        <span className="tt-footer__note">Aucun profil public. Chaque échange reste strictement confidentiel.</span>
      </div>
    </footer>
  );
}

// ============== APP ROOT ==============
function App() {
  const [tweaks, setTweak] = window.useTweaks
    ? window.useTweaks(TWEAK_DEFAULTS)
    : [TWEAK_DEFAULTS, () => {}];

useEffect(() => {
    const r = document.documentElement;
    if (tweaks.accentLead === "gold") {
      r.style.setProperty("--accent", "var(--gold)");
      r.style.setProperty("--accent-soft", "var(--gold-soft)");
    } else {
      r.style.setProperty("--accent", "var(--terracotta)");
      r.style.setProperty("--accent-soft", "var(--terracotta-soft)");
    }
    r.style.setProperty("--display-font", `"${tweaks.displayFont}", Georgia, serif`);
    r.style.setProperty("--ivory", tweaks.bodyTone === "ivory" ? "#FAFAF8" : "#F4EFE7");
  }, [tweaks]);

useEffect(() => {
    const hash = window.location.hash;
    if (!hash) return;
    const id = hash.slice(1);
    let attempts = 0;
    const tryScroll = () => {
      const el = document.getElementById(id);
      if (el) {
        el.scrollIntoView({ behavior: "smooth", block: "start" });
      } else if (attempts++ < 50) {
        requestAnimationFrame(tryScroll);
      }
    };
    tryScroll();
  }, []);

return (
    <div className="tt-app" data-motif={tweaks.showMotif ? "on" : "off"}>
      <Header />
      <main>
        <Hero variant={tweaks.heroVariant} />
        <EmotionBlock />
        <ProblemSection />
        <SolutionSection />
        <HowItWorksSection />
        <ConfidentialiteSection />
        <ValuesSection />
        <RareteSection />
        <TrustSection />
        <FAQSection />
        <ApplicationSection />
        <CTAFinalSection />
      </main>
      <Footer />
    </div>
  );
}

// ============== STICKY MOBILE CTA ==============
function StickyMobileCTA() {
  const [visible, setVisible] = useState(false);

useEffect(() => {
    // Apparaît après le hero, disparaît quand le formulaire est visible
    const hero = document.querySelector(".tt-hero");
    const form = document.getElementById("candidature");
    if (!hero || !form) return;

const onScroll = () => {
      const heroBottom = hero.getBoundingClientRect().bottom;
      const formTop   = form.getBoundingClientRect().top;
      const winH      = window.innerHeight;
      // Visible : on a dépassé le hero ET le formulaire n'est pas encore visible
      setVisible(heroBottom < 0 && formTop > winH * 0.5);
    };

window.addEventListener("scroll", onScroll, { passive: true });
    return () => window.removeEventListener("scroll", onScroll);
  }, []);

const scrollToForm = () => {
    const el = document.getElementById("candidature");
    if (el) el.scrollIntoView({ behavior: "smooth", block: "start" });
  };

return (
    <button
      className={`tt-sticky-cta${visible ? " tt-sticky-cta--visible" : ""}`}
      onClick={scrollToForm}
      aria-label="Déposer ma candidature"
    >
      <span>Déposer ma candidature</span>
      <svg width="14" height="14" viewBox="0 0 16 16" fill="none" aria-hidden="true">
        <path d="M3 8h10M9 4l4 4-4 4" stroke="currentColor" strokeWidth="1.4" strokeLinecap="round" strokeLinejoin="round"/>
      </svg>
    </button>
  );
}

// ============== WHATSAPP WIDGET ==============
function WhatsAppWidget() {
  const [visible, setVisible] = useState(false);
  const [hovered, setHovered] = useState(false);

useEffect(() => {
    const t = setTimeout(() => setVisible(true), 3000);
    return () => clearTimeout(t);
  }, []);

const url = "https://wa.me/33695456438?text=Bonjour%2C%20je%20souhaite%20en%20savoir%20plus%20sur%20le%20service%20DAR%20TISLIT.";

return (
    <a
      href={url}
      target="_blank"
      rel="noopener noreferrer"
      aria-label="Nous contacter sur WhatsApp"
      className={`tt-wa${visible ? " tt-wa--visible" : ""}${hovered ? " tt-wa--open" : ""}`}
      onMouseEnter={() => setHovered(true)}
      onMouseLeave={() => setHovered(false)}
    >
      <span className="tt-wa__label">Échanger sur WhatsApp</span>
      <span className="tt-wa__icon">
        <svg width="22" height="22" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg" aria-hidden="true">
          <path d="M12 2C6.477 2 2 6.477 2 12c0 1.89.525 3.656 1.438 5.168L2 22l4.978-1.42A9.953 9.953 0 0 0 12 22c5.523 0 10-4.477 10-10S17.523 2 12 2Z" stroke="currentColor" strokeWidth="1.4" strokeLinejoin="round"/>
          <path d="M8.5 9.5c.167-.5.667-1.5 1.5-1.5.4 0 .667.167.833.5l1 2c.167.333.083.667-.083.917l-.583.666c.333.584 1.083 1.584 2.333 2.334l.667-.584c.25-.166.583-.25.916-.083l2 1c.334.167.5.417.5.834 0 .833-1 1.583-1.5 1.583C13 17.167 7 11.167 8.5 9.5Z" stroke="currentColor" strokeWidth="1.3" strokeLinecap="round" strokeLinejoin="round"/>
        </svg>
      </span>
    </a>
  );
}

ReactDOM.createRoot(document.getElementById("root")).render(
  <>
    <App />
    <StickyMobileCTA />
    <WhatsAppWidget />
  </>
);

{p.title}

{s.title}

{p.t}

{v.title}