
<section class="hero"><div class="shell hero-grid"><div class="hero-copy"><p class="eyebrow">Une meilleure façon de recevoir vos demandes</p><h1>Des formulaires<br>qui <em>mènent quelque part.</em></h1><p class="hero-intro">Rédac offre à votre site une façon claire et rassurante de permettre aux gens de vous joindre, tout en aidant votre équipe à recevoir les renseignements utiles.</p><div class="hero-actions"><a class="button" href="#fonctionnement">Voir comment ça fonctionne</a><a class="text-link" href="#integration">Voir la mise en place</a></div><p class="hero-note">Pour les équipes qui veulent un chemin clair du premier message à une réponse utile.</p></div><div class="hero-connection" aria-hidden="true"><div class="connection-orbit connection-orbit-one"></div><div class="connection-orbit connection-orbit-two"></div><p class="connection-caption connection-caption-top"><span></span>Intention du visiteur</p><div class="connection-card"><span class="connection-label">NOUVELLE DEMANDE</span><strong>Une bonne raison<br>d’échanger.</strong><div class="connection-lines"><span></span><span></span><span></span></div></div><div class="connection-route"><span></span><b></b></div><div class="team-card"><span class="team-card-icon team-card-icon-route" aria-hidden="true"></span><div><small>ACHEMINÉE VERS</small><strong>Votre équipe</strong></div></div><p class="connection-caption connection-caption-bottom"><span></span>Conversation utile</p></div></div></section>

<div class="proof-bar"><div class="shell proof-items"><span>S’intègre à vos sites autorisés</span><span>Des détails clairs, moins de pourriel</span><span>Toujours prêt, sans entretien</span><span>Votre équipe avisée</span></div></div>

<section class="section value-section" id="pourquoi-redac"><div class="shell section-heading split-heading"><p class="eyebrow">Une couche ciblée</p><div><h2>Faites de chaque contact<br>une expérience réfléchie.</h2><p>Rédac offre à votre équipe une façon simple et fiable de recevoir les demandes du site, sans imposer aux visiteurs une expérience de formulaire générique. Il reste fiable en arrière-plan, sans mises à jour ni entretien continu pour votre équipe.</p></div></div><div class="shell value-grid"><article class="value-card"><span class="card-number">01</span><span class="value-icon value-icon-route" aria-hidden="true"></span><h3>Gardez l’expérience sur votre site.</h3><p>Allez à la rencontre des visiteurs là où ils comprennent déjà pourquoi ils veulent vous joindre.</p></article><article class="value-card"><span class="card-number">02</span><span class="value-icon value-icon-check" aria-hidden="true"></span><h3>Obtenez les détails utiles.</h3><p>Choisissez les questions qui aident votre équipe à amorcer une conversation utile, sans en demander trop.</p></article><article class="value-card"><span class="card-number">03</span><span class="value-icon value-icon-send" aria-hidden="true"></span><h3>Envoyez chaque demande aux bonnes personnes.</h3><p>Conservez chaque message et assurez-vous que votre équipe peut agir rapidement.</p></article></div></section>

<section class="section workflow-section" id="fonctionnement"><div class="shell workflow-layout"><div class="workflow-intro"><p class="eyebrow">Fonctionnement</p><h2>Un parcours court.<br>Des suivis <em>clairs.</em></h2><p>Du premier message à la réponse de votre équipe, chaque étape a un rôle clair.</p><a class="text-link" href="#fiabilite">Voir la protection</a></div><ol class="workflow-steps"><li><span class="step-index">01</span><div><h3>Personnalisez-le.</h3><p>Choisissez les questions, la langue et le site où votre formulaire doit apparaître.</p></div></li><li><span class="step-index">02</span><div><h3>Gardez-le utile.</h3><p>Aidez les gens à fournir des renseignements complets, réduisez le pourriel et gardez le formulaire sur le bon site.</p></div></li><li><span class="step-index">03</span><div><h3>Conservez chaque demande.</h3><p>Chaque message est gardé avec les renseignements dont votre équipe a besoin pour faire un suivi attentif.</p></div></li><li><span class="step-index">04</span><div><h3>Avisez les bonnes personnes.</h3><p>Prévenez votre équipe par courriel ou connectez le message aux outils qu’elle utilise déjà.</p></div></li></ol></div></section>

<section class="section reliability-section" id="fiabilite"><div class="shell reliability-panel"><div class="reliability-intro"><p class="eyebrow">Fiable par conception</p><h2>La protection soutient<br>la <em>conversation.</em></h2><p>Les visiteurs doivent pouvoir vous joindre facilement. Votre équipe devrait être protégée du bruit en cours de route, et les données des messages sont chiffrées lorsqu’elles sont stockées.</p></div><div class="reliability-list"><article><span class="security-glyph security-glyph-origin" aria-hidden="true"></span><div><h3>Seulement sur vos sites autorisés</h3><p>Votre formulaire apparaît seulement là où vous l’attendez, pour que les gens joignent la bonne équipe au bon endroit.</p></div></article><article><span class="security-glyph security-glyph-rate" aria-hidden="true"></span><div><h3>Des détails clairs, moins de répétitions</h3><p>Des indications utiles rendent les messages plus faciles à comprendre et réduisent les demandes répétées.</p></div></article><article><span class="security-glyph security-glyph-turnstile" aria-hidden="true"></span><div><h3>Protection contre le pourriel avec Cloudflare Turnstile</h3><p>Lorsqu’elle est activée, Cloudflare Turnstile ajoute une courte vérification pour aider à bloquer le pourriel avant l’envoi d’une demande.</p></div></article></div></div></section>

<section class="section audience-section" id="pour-vous"><div class="shell section-heading split-heading"><p class="eyebrow">Pour les personnes qui répondent</p><div><h2>Utile aux équipes<br>qui font grandir l’entreprise.</h2><p>Rédac rend le contact sur votre site plus fiable pour les personnes responsables de la prochaine conversation.</p></div></div><div class="shell audience-grid"><article><span>Équipes marketing</span><h3>Des conversations plus utiles.</h3><p>Donnez aux visiteurs une prochaine étape claire et à votre équipe les renseignements nécessaires pour bien répondre.</p></article><article><span>Agences</span><h3>Un parcours fiable pour les sites clients.</h3><p>Offrez à chaque client une expérience de contact réfléchie qui mène à la bonne équipe.</p></article><article><span>Développeurs</span><h3>Un formulaire qui s’intègre à votre site.</h3><p>Gardez la mise en place près de votre site, sans construire et entretenir un système de formulaires à partir de zéro.</p></article></div></section>

<section class="section integration-section" id="integration"><div class="shell integration-layout"><div><p class="eyebrow">Aperçu de l’intégration</p><h2>Deux éléments.<br>Une connexion claire.</h2><p>Cet exemple est illustratif et utilise des espaces réservés. Le chargeur lit les métadonnées de votre formulaire, obtient un jeton de courte durée, puis affiche les champs configurés dans le point de montage. Remplacez les espaces réservés avec les valeurs de votre formulaire Rédac — ne réutilisez jamais les valeurs d’un autre environnement.</p><ul class="integration-notes"><li>L’id du point de montage est <code>redac-form</code>.</li><li>Définissez la langue de la page avec <code>data-language</code>.</li><li>Gardez l’identifiant et la somme de contrôle propres à l’environnement.</li></ul></div><div class="code-card"><div class="code-card-bar"><span>embed.html</span><span>configuration illustrative</span></div><pre><code><span class="code-tag">&lt;div</span> <span class="code-attribute">id</span>=<span class="code-string">"redac-form"</span>
  <span class="code-attribute">data-theme</span>=<span class="code-string">"auto"</span>
  <span class="code-attribute">data-language</span>=<span class="code-string">"fr"</span><span class="code-tag">&gt;&lt;/div&gt;</span>

<span class="code-tag">&lt;script</span>
  <span class="code-attribute">src</span>=<span class="code-string">"https://assets.example.com/form/v1/embed/embed.js"</span>
  <span class="code-attribute">data-form-id</span>=<span class="code-string">"&lt;votre-id-formulaire&gt;"</span>
  <span class="code-attribute">data-checksum</span>=<span class="code-string">"&lt;votre-somme-de-controle&gt;"</span><span class="code-tag">&gt;</span>
<span class="code-tag">&lt;/script&gt;</span></code></pre></div></div></section>

<section class="contact-plan" id="contact-plan"><div class="shell contact-panel"><div><p class="eyebrow">Prochaine étape</p><h2>Préparez la conversation<br>avant de l’ouvrir.</h2></div><div><p>Un formulaire de contact propulsé par Rédac prendra place ici lorsque le parcours public sera prêt. En attendant, cette page présente honnêtement le parcours du produit; elle n’est ni une inscription ni un point de contact.</p><div class="contact-actions"><a class="button" href="#integration">Revoir l’intégration</a></div></div></div></section>
