<!doctype html>
<html lang="fr">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Écrire pour le web à l'ère de l'IA</title>
<meta name="description" content="fr-redacteurs.com forme les rédacteurs et rédactrices web à écrire des textes clairs, utiles et distincts de la production automatisée, à l'heure des IA génératives.">
<meta name="theme-color" content="#14181F">
<meta property="og:title" content="fr-redacteurs.com — Écrire pour le web à l'ère de l'IA">
<meta property="og:description" content="Méthode, exemples corrigés et outils pour rédiger des textes web que des humains ont envie de lire.">
<meta property="og:type" content="website">
<link rel="icon" href="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 32 32'%3E%3Crect width='32' height='32' rx='7' fill='%2314181F'/%3E%3Cpath d='M9 22 21 10M21 10h-6M21 10v6' stroke='%23C23B3B' stroke-width='2.4' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Fraunces:ital,opsz,wght@0,9..144,400;0,9..144,500;0,9..144,600;0,9..144,700;1,9..144,500&family=Public+Sans:wght@400;500;600;700;800&family=JetBrains+Mono:wght@400;500&display=swap" rel="stylesheet">
<!-- htmx 2.x — https://htmx.org/docs/ -->
<script src="https://unpkg.com/htmx.org@2.0.4" defer></script>
<style>
/* ============================================================
1) TOKENS — palette « encre & correction »
============================================================ */
:root{
--ink: #14181F; /* encre — fonds sombres, texte principal */
--ink-70: #14181Fb3;
--ink-40: #14181F66;
--paper: #ECE7DA; /* papier — fonds clairs */
--paper-2: #F7F4EC; /* papier clair — cartes sur fond papier */
--paper-line: #D9D2C0; /* filets, séparateurs */
--red: #C23B3B; /* rouge correcteur — accent, ins/del, CTA */
--red-dark: #9B2E2E;
--green: #3F7A5C; /* vert validation — succès, tampon "bon à publier" */
--gold: #B8923F; /* or feutre — citations, mise en valeur */
--on-ink: #ECE7DA;
--on-paper: #14181F;
--font-display: "Fraunces", Georgia, serif;
--font-body: "Public Sans", -apple-system, BlinkMacSystemFont, sans-serif;
--font-mono: "JetBrains Mono", ui-monospace, Menlo, monospace;
--fs-900: clamp(2.1rem, 1.55rem + 2.4vw, 3.75rem);
--fs-800: clamp(1.65rem, 1.35rem + 1.3vw, 2.5rem);
--fs-600: clamp(1.2rem, 1.08rem + 0.5vw, 1.4rem);
--fs-400: 1rem;
--fs-300: 0.875rem;
--space-1: 0.5rem;
--space-2: 1rem;
--space-3: 1.5rem;
--space-4: 2.25rem;
--space-5: 3.5rem;
--space-6: 5.5rem;
--radius: 0.5rem;
--ease: cubic-bezier(.25,.8,.35,1);
--max: 72rem;
}
@media (prefers-reduced-motion: reduce){
*, *::before, *::after{ animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; }
}
/* ============================================================
2) RESET SOBRE
============================================================ */
*,*::before,*::after{ box-sizing: border-box; }
html{ scroll-behavior: smooth; }
body{
margin:0;
font-family: var(--font-body);
font-size: var(--fs-400);
line-height: 1.6;
color: var(--on-ink);
background: var(--ink);
-webkit-font-smoothing: antialiased;
}
img, svg{ max-width:100%; display:block; }
h1,h2,h3,p,ul,ol,dl,figure,blockquote{ margin: 0; }
ul{ list-style: none; padding:0; }
a{ color: inherit; }
button{ font: inherit; color: inherit; background:none; border:0; cursor:pointer; }
input, textarea{ font: inherit; color: inherit; }
:focus-visible{ outline: 3px solid var(--gold); outline-offset: 3px; }
.sr-only{
position:absolute; width:1px; height:1px; padding:0; margin:-1px;
overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}
.skip-link{
position:absolute; left:1rem; top:-4rem;
background:var(--red); color:#fff; padding:.75rem 1.25rem;
border-radius: var(--radius); z-index:100; transition: top .2s var(--ease);
font-weight:600;
}
.skip-link:focus{ top: 1rem; }
/* les blocs "source" servant uniquement de réservoir pour htmx hx-select */
.source-only{ display:none; }
/* ============================================================
3) MISE EN PAGE — flex, mobile first
============================================================ */
.wrap{
width:100%;
max-width: var(--max);
margin-inline:auto;
padding-inline: var(--space-2);
}
@media (min-width: 40rem){ .wrap{ padding-inline: var(--space-4); } }
.section{ padding-block: var(--space-5); }
.section--paper{ background: var(--paper); color: var(--on-paper); }
.section--ink{ background: var(--ink); color: var(--on-ink); }
.eyebrow{
display:inline-flex; align-items:center; gap:.5em;
font-family: var(--font-mono); font-size: var(--fs-300);
letter-spacing:.06em; text-transform:uppercase;
color: var(--red);
}
.eyebrow::before{ content:""; width:1.4em; height:2px; background: var(--red); display:inline-block; }
h1{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-900); line-height:1.05; }
h2{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-800); line-height:1.1; }
h3{ font-family: var(--font-display); font-weight:600; font-size: var(--fs-600); line-height:1.25; }
del{ color: var(--red); text-decoration-thickness: 2px; opacity:.75; }
ins{ color: var(--green); text-decoration: none; font-style:normal; }
.section--ink ins{ color: #7fd3ac; }
.btn{
display:inline-flex; align-items:center; justify-content:center; gap:.5em;
padding: .85em 1.4em; border-radius: var(--radius);
font-weight:700; font-size: var(--fs-300); letter-spacing:.01em;
transition: transform .15s var(--ease), background-color .15s var(--ease);
white-space: nowrap;
}
.btn:hover{ transform: translateY(-2px); }
.btn--primary{ background: var(--red); color:#fff; }
.btn--primary:hover{ background: var(--red-dark); }
.btn--ghost{ background: transparent; border: 1.5px solid currentColor; }
.btn--sm{ padding:.55em 1em; font-size:.8rem; }
.btn[disabled]{ opacity:.6; cursor:progress; transform:none; }
/* --- en-tête --- */
header.site{
position: sticky; top:0; z-index:50;
background: color-mix(in srgb, var(--ink) 92%, transparent);
backdrop-filter: blur(8px);
border-bottom: 1px solid #ffffff1a;
}
header.site .bar{
display:flex; align-items:center; justify-content:space-between;
padding-block: var(--space-2);
}
.logo{
display:flex; align-items:center; gap:.6rem;
font-family: var(--font-display); font-weight:700; font-size:1.15rem;
text-decoration:none;
}
.logo .mark{ width:2rem; height:2rem; background:var(--red); border-radius:6px; display:grid; place-items:center; }
.logo .mark svg{ width:1.1rem; height:1.1rem; }
.nav-toggle{ display:inline-flex; padding:.4rem; }
.nav-toggle svg{ width:1.5rem; height:1.5rem; }
nav.primary{
position:absolute; inset-inline:0; top:100%;
background: var(--ink); border-bottom:1px solid #ffffff1a;
padding: var(--space-2);
display:none;
}
nav.primary.is-open{ display:block; }
nav.primary ul{ display:flex; flex-direction:column; gap:.25rem; }
nav.primary a{
display:block; padding:.75rem .5rem; text-decoration:none; font-weight:600;
border-radius: var(--radius);
}
nav.primary a:hover{ background:#ffffff12; }
.cta-header{ display:none; }
@media (min-width: 56rem){
.nav-toggle{ display:none; }
nav.primary{
display:block; position:static; background:none; border:0; padding:0; width:auto;
}
nav.primary ul{ flex-direction:row; align-items:center; gap:1.75rem; }
nav.primary a{ padding:.25rem 0; font-weight:500; }
.cta-header{ display:inline-flex; }
}
/* --- héro --- */
.hero{ padding-block: var(--space-6) var(--space-5); overflow:hidden; }
.hero .wrap{ display:flex; flex-direction:column; gap: var(--space-3); align-items:flex-start; }
.hero p.lede{ max-width:38ch; font-size:1.1rem; color: color-mix(in srgb, var(--on-ink) 78%, transparent); }
.hero .cta-row{ display:flex; flex-wrap:wrap; gap:1rem; margin-top:.5rem; }
.hero .squiggle{ width:11rem; height:auto; color:var(--red); margin-top:-.5rem; }
.stats{
display:flex; flex-wrap:wrap; gap: var(--space-4);
margin-top: var(--space-4); padding-top: var(--space-4);
border-top:1px solid #ffffff1f;
width:100%;
}
.stat b{ display:block; font-family:var(--font-display); font-size:2rem; color: var(--red); }
.stat span{ font-size: var(--fs-300); color: color-mix(in srgb, var(--on-ink) 65%, transparent); }
/* --- piliers --- */
.piliers-grid{ display:flex; flex-wrap:wrap; gap: var(--space-3); margin-top: var(--space-4); }
.pilier{
container-type: inline-size;
flex: 1 1 15rem;
background: var(--paper-2);
border:1px solid var(--paper-line);
border-radius: var(--radius);
padding: var(--space-3);
display:flex; flex-direction:column; gap:.75rem;
}
.pilier .num{ font-family:var(--font-mono); font-size:var(--fs-300); color:var(--red); }
.pilier svg{ width:1.75rem; height:1.75rem; color:var(--red); }
@container (min-width: 14rem){
.pilier h3{ font-size: 1.3rem; }
}
/* --- démo avant / après --- */
.demo{ display:flex; flex-direction:column; gap: var(--space-3); }
.demo-controls{ display:flex; flex-wrap:wrap; gap:.75rem; align-items:center; }
.demo-controls .htmx-indicator{ opacity:0; font-family:var(--font-mono); font-size:var(--fs-300); }
.demo-controls.htmx-request .htmx-indicator{ opacity:1; }
.demo-panel{
background: var(--ink);
color: var(--on-ink);
border-radius: var(--radius);
padding: var(--space-3);
min-height: 11rem;
border: 1px solid #ffffff22;
}
.demo-panel .tag{
display:inline-block; font-family:var(--font-mono); font-size:.75rem;
padding:.2rem .6rem; border-radius:999px; margin-bottom:.75rem;
}
.tag--ia{ background:#ffffff1a; color:#e8b4b4; }
.tag--humaine{ background:#ffffff1a; color:#9fdcc0; }
.demo-panel p{ font-size:1.05rem; }
.demo-panel ul{ margin-top:1rem; display:flex; flex-direction:column; gap:.35rem; font-size:var(--fs-300); font-family:var(--font-mono); color: color-mix(in srgb, var(--on-ink) 75%, transparent); }
/* transition douce lors du swap htmx */
::view-transition-old(demo), ::view-transition-new(demo){ animation-duration:0.25s; }
/* --- outil de lisibilité --- */
.outil{
background: var(--paper-2); border:1px solid var(--paper-line);
border-radius: var(--radius); padding: var(--space-3);
display:flex; flex-direction:column; gap: var(--space-2);
}
.outil label{ font-weight:700; }
.outil input[type="text"]{
width:100%; padding:.85rem 1rem; border-radius: var(--radius);
border:1.5px solid var(--paper-line); background:#fff;
}
.outil-jauge{ height:6px; border-radius:999px; background:var(--paper-line); overflow:hidden; }
.outil-jauge > span{ display:block; height:100%; width:0%; background:var(--green); transition:width .2s var(--ease), background-color .2s var(--ease); }
.outil-retour{ font-family:var(--font-mono); font-size:var(--fs-300); }
/* --- témoignages --- */
.temoignages{
display:flex; gap: var(--space-3); overflow-x:auto; padding-block:.5rem 1rem;
scroll-snap-type:x mandatory; -webkit-overflow-scrolling:touch;
}
.temoignages blockquote{
scroll-snap-align:start; flex:0 0 min(85%, 22rem);
background: var(--ink); border:1px solid #ffffff22; border-radius: var(--radius);
padding: var(--space-3); display:flex; flex-direction:column; gap:1rem;
}
.temoignages blockquote p{ font-family: var(--font-display); font-style:italic; font-size:1.1rem; }
.temoignages figcaption{ font-size:var(--fs-300); color: color-mix(in srgb, var(--on-ink) 70%, transparent); }
.temoignages figcaption b{ color:var(--on-ink); display:block; }
@media (min-width: 56rem){
.temoignages{ overflow:visible; flex-wrap:wrap; }
.temoignages blockquote{ flex:1 1 16rem; }
}
/* --- FAQ --- */
.faq{ display:flex; flex-direction:column; gap:.75rem; max-width:44rem; margin-top: var(--space-3); }
.faq details{
background: var(--paper-2); border:1px solid var(--paper-line); border-radius: var(--radius);
padding: var(--space-2) var(--space-3);
}
.faq summary{
cursor:pointer; font-weight:700; display:flex; justify-content:space-between; gap:1rem;
list-style:none;
}
.faq summary::-webkit-details-marker{ display:none; }
.faq summary::after{ content:"+"; font-family:var(--font-mono); font-size:1.3rem; color:var(--red); }
.faq details[open] summary::after{ content:"–"; }
.faq p{ margin-top:.75rem; color: color-mix(in srgb, var(--on-paper) 75%, transparent); }
.astuce-zone{ margin-top: var(--space-3); }
.astuce-carte{
background: color-mix(in srgb, var(--gold) 14%, var(--paper-2));
border:1px dashed var(--gold); border-radius: var(--radius); padding: var(--space-3);
}
/* --- inscription --- */
.inscription .wrap{ display:flex; flex-direction:column; gap: var(--space-4); }
.inscription-grid{ display:flex; flex-direction:column; gap: var(--space-4); }
.avantages{ display:flex; flex-direction:column; gap:.9rem; }
.avantages li{ display:flex; gap:.75rem; align-items:flex-start; }
.avantages svg{ width:1.25rem; height:1.25rem; flex-shrink:0; color: var(--green); margin-top:.2rem; }
form.inscription-form{
display:flex; flex-direction:column; gap:1rem;
background: var(--paper-2); color: var(--on-paper);
border-radius: var(--radius); padding: var(--space-4);
border:1px solid var(--paper-line);
}
.champ{ display:flex; flex-direction:column; gap:.4rem; }
.champ label{ font-weight:700; font-size:var(--fs-300); }
.champ input{
padding:.85rem 1rem; border-radius: var(--radius); border:1.5px solid var(--paper-line);
background:#fff;
}
.champ:has(input:invalid:not(:placeholder-shown)) input{ border-color: var(--red); }
.champ:has(input:invalid:not(:placeholder-shown)) .champ-erreur{ display:block; }
.champ-erreur{ display:none; color:var(--red); font-size:.8rem; font-family:var(--font-mono); }
.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }
.form-note{ font-size:var(--fs-300); font-family:var(--font-mono); min-height:1.2em; }
.form-note[data-state="ok"]{ color: var(--green); }
.form-note[data-state="err"]{ color: var(--red); }
@media (min-width: 56rem){
.inscription-grid{ flex-direction:row; align-items:flex-start; }
.inscription-grid > *{ flex:1 1 0; }
}
/* --- pied de page --- */
footer.site{ border-top:1px solid #ffffff1a; padding-block: var(--space-4); }
footer.site .wrap{
display:flex; flex-direction:column; gap: var(--space-3);
}
footer.site nav ul{ display:flex; flex-wrap:wrap; gap:1rem 1.5rem; }
footer.site nav a{ text-decoration:none; font-size:var(--fs-300); color: color-mix(in srgb, var(--on-ink) 75%, transparent); }
footer.site nav a:hover{ color: var(--on-ink); }
footer.site .bas{
display:flex; flex-direction:column; gap:.5rem;
font-size:.8rem; color: color-mix(in srgb, var(--on-ink) 55%, transparent);
padding-top: var(--space-3); border-top:1px solid #ffffff14;
}
@media (min-width: 40rem){
footer.site .bas{ flex-direction:row; justify-content:space-between; }
}
</style>
</head>
<body>
<a class="skip-link" href="#contenu">Aller au contenu principal</a>
<header class="site">
<div class="wrap bar">
<a class="logo" href="#accueil">
<span class="mark" aria-hidden="true">
<svg viewbox="0 0 24 24" fill="none" stroke="#fff" stroke-width="2.4" stroke-linecap="round" stroke-linejoin="round"><path d="M6 18 17 7M17 7h-5M17 7v5"/></svg>
</span>
fr-rédacteurs
</a>
<button class="nav-toggle" type="button" aria-controls="menu-principal" aria-expanded="false" id="nav-toggle-btn">
<span class="sr-only">Ouvrir le menu</span>
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 7h16M4 12h16M4 17h16"/></svg>
</button>
<nav class="primary" id="menu-principal" aria-label="Navigation principale">
<ul>
<li><a href="#methode">Méthode</a></li>
<li><a href="#demo">Démo</a></li>
<li><a href="#outil">Outil</a></li>
<li><a href="#faq">FAQ</a></li>
</ul>
</nav>
<a class="btn btn--primary cta-header" href="#inscription">Rejoindre</a>
</div>
</header>
<main id="contenu">
<!-- ============ HÉRO ============ -->
<section class="hero section--ink" id="accueil">
<div class="wrap">
<p class="eyebrow">Rédaction web édition 2026</p>
<h1>Écrire pour le web,<br><del>plus vite</del> <ins>plus juste</ins>.</h1>
<svg class="squiggle" viewbox="0 0 220 24" aria-hidden="true"><path d="M2 18c20-20 40 14 60-2s40-14 60 2 40-14 60 2" fill="none" stroke="currentColor" stroke-width="3" stroke-linecap="round"/></svg>
<p class="lede">Les IA génératives produisent des textes en quelques secondes. fr-redacteurs forme des rédactrices et rédacteurs capables d'en faire des textes pour que des humains les lisent, comprennent et retiennent.</p>
<div class="cta-row">
<a class="btn btn--primary" href="#methode">Découvrir la méthode</a>
<a class="btn btn--ghost" href="#demo">Voir un exemple corrigé</a>
</div>
<dl class="stats">
<div class="stat"><b>4</b><span>piliers d'écriture enseignés</span></div>
<div class="stat"><b>—32%</b><span>de longueur moyenne après révision*</span></div>
<div class="stat"><b>8 s</b><span>temps moyen avant qu'un lecteur décide de rester</span></div>
</dl>
<p class="sr-only">*Chiffres internes fr-rédacteurs, atelier de révision éditoriale 2026.</p>
</div>
</section>
<!-- ============ DÉMO AVANT / APRÈS (HTMX) ============ -->
<section class="section section--paper" id="demo">
<div class="wrap demo">
<p class="eyebrow">Signature · l'atelier de révision</p>
<h2>Le même sujet, deux résultats</h2>
<p class="lede" style="color:inherit; max-width:46ch;">Un brouillon généré par IA et sa version publiable, éditée par un rédacteur formé à la méthode. Cliquez pour comparer : le contenu est rechargé en direct.</p>
<div class="demo-controls" hx-target="#zone-resultat" hx-swap="innerHTML transition:true" hx-indicator="#demo-indic">
<button type="button" class="btn btn--ghost" hx-get="" hx-select="#etat-ia">Brouillon généré par IA</button>
<button type="button" class="btn btn--primary" hx-get="" hx-select="#etat-humain">Version publiable</button>
<span class="htmx-indicator" id="demo-indic">Chargement…</span>
</div>
<div class="demo-panel" id="zone-resultat" aria-live="polite">
<span class="tag tag--humaine">Version publiable</span>
<p>Un bon texte web se lit en huit secondes avant de convaincre. Allez droit au but : un message par paragraphe, une preuve par argument, un verbe d'action par titre.</p>
<ul>
<li>− 32 % de mots</li>
<li>+ 1 exemple concret ajouté</li>
<li>Titre reformulé pour répondre à la question du lecteur</li>
</ul>
</div>
</div>
</section>
<!-- réservoirs invisibles utilisés par hx-select : jamais affichés directement -->
<div class="source-only" id="etat-ia">
<span class="tag tag--ia">Brouillon généré par IA</span>
<p>Dans le monde d'aujourd'hui, il est important de comprendre que la rédaction web est un sujet complexe qui mérite d'être exploré en profondeur, car de nombreux facteurs entrent en jeu et il convient de les analyser un par un afin d'obtenir une vision globale et complète du sujet.</p>
<ul>
<li>58 mots, aucune information vérifiable</li>
<li>Tournure de phrase “<em>Dans le monde d'aujourd'hui</em>” beaucoup trop associée à l’IA générative version 2024.</li>
<li>0 exemple concret</li>
<li>Titre absent de la question du lecteur</li>
</ul>
</div>
<div class="source-only" id="etat-humain">
<span class="tag tag--humaine">Version publiable</span>
<p>Un bon texte web se lit en huit secondes avant de convaincre. Allez droit au but : un message par paragraphe, une preuve par argument, un verbe d'action par titre.</p>
<ul>
<li>− 32 % de mots</li>
<li>+ 1 exemple concret ajouté</li>
<li>Titre reformulé pour répondre à la question du lecteur</li>
</ul>
</div>
<!-- ============ MÉTHODE ============ -->
<section class="section section--paper" id="methode">
<div class="wrap">
<p class="eyebrow">La méthode</p>
<h2>Quatre piliers, un seul objectif : être lu</h2>
<div class="piliers-grid">
<article class="pilier">
<span class="num">01</span>
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 12h16M4 6h10M4 18h6"/></svg>
<h3>Clarté avant tout</h3>
<p>Une idée par phrase, un message par paragraphe. Ce qui ne se comprend pas en une lecture se réécrit.</p>
</article>
<article class="pilier">
<span class="num">02</span>
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M4 6h16M4 12h10M4 18h13"/></svg>
<h3>Structure logique et formattée</h3>
<p>Titres qui répondent à une question, listes, gras utile. La majorité des lecteurs parcourent avant de lire.</p>
</article>
<article class="pilier">
<span class="num">03</span>
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><circle cx="12" cy="12" r="8"/><path d="M9 12l2 2 4-4"/></svg>
<h3>Expérience et expertise humaines</h3>
<p>Un exemple vécu, un chiffre sourcé, un point de vue assumé : une IA peut générer ces éléments isolés, mais pas (encore) les articuler de façon homogène afin de les revendiquer de manière sourcée récurrente (critère E-E-A-T pour Google).</p>
</article>
<article class="pilier">
<span class="num">04</span>
<svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round"><path d="M6 18 18 6M18 6h-6M18 6v6"/></svg>
<h3>Révision assistée, jamais déléguée</h3>
<p>L'IA propose une base. La décision finale : le mot juste, le ton, la conclusion, reste humaine.</p>
</article>
</div>
</div>
</section>
<!-- ============ POURQUOI ============ -->
<section class="section section--ink">
<div class="wrap" style="max-width:44rem;">
<p class="eyebrow">Pourquoi ça compte en 2026</p>
<h2>Le texte générique ne convainc personne</h2>
<p class="lede" style="max-width:none;">Plus un type de contenu se répand, plus les textes qui se ressemblent perdent de valeur aux yeux des lecteurs et des moteurs de recherche comme des assistants IA, qui privilégient de plus en plus les sources qui apportent une information vérifiable et un point de vue reconnaissable. Écrire distinctement redevient un avantage, pas un supplément d'âme.</p>
</div>
</section>
<!-- ============ OUTIL DE LISIBILITÉ (vanilla JS) ============ -->
<section class="section section--paper" id="outil">
<div class="wrap">
<p class="eyebrow">Outil gratuit</p>
<h2>Testez la longueur d'un titre</h2>
<p class="lede" style="color:inherit; max-width:46ch; margin-bottom:1.5rem;">Un titre trop long est tronqué dans les résultats de recherche et dans les réponses des assistants IA. Visez la zone verte.</p>
<div class="outil">
<label for="titre-test">Votre titre</label>
<input type="text" id="titre-test" name="titre-test" maxlength="90" autocomplete="off" placeholder="Ex. : Comment écrire un titre efficace pour le web">
<div class="outil-jauge"><span id="jauge-barre"></span></div>
<p class="outil-retour" id="jauge-retour" aria-live="polite">0 caractère : commencez à écrire pour voir le résultat.</p>
</div>
</div>
</section>
<!-- ============ TÉMOIGNAGES ============ -->
<section class="section section--ink">
<div class="wrap">
<p class="eyebrow">Ce qu'en disent nos rédacteurs</p>
<h2>Trois retours d'atelier</h2>
<div class="temoignages" style="margin-top:2rem;">
<blockquote>
<p>« On m'a appris à couper. Mon premier jet fait deux fois la taille de ce que je publie, et c'est très bien ainsi. »</p>
<figcaption><b>Inès M.</b>Rédactrice indépendante, e-commerce</figcaption>
</blockquote>
<blockquote>
<p>« La méthode m'a donné un vocabulaire pour expliquer à mes clients pourquoi un texte généré tel quel ne suffit pas. »</p>
<figcaption><b>Karim D.</b>Consultant contenu B2B</figcaption>
</blockquote>
<blockquote>
<p>« J'utilise l'IA pour le brouillon et la méthode pour tout le reste. Le gain de temps ne sert à rien sans la révision. »</p>
<figcaption><b>Léa B.</b>Responsable éditoriale, secteur associatif</figcaption>
</blockquote>
</div>
</div>
</section>
<!-- ============ FAQ (HTMX pour l'astuce bonus) ============ -->
<section class="section section--paper" id="faq">
<div class="wrap">
<p class="eyebrow">Questions fréquentes</p>
<h2>Avant de vous inscrire</h2>
<div class="faq">
<details>
<summary>Faut-il arrêter d'utiliser l'IA pour écrire ?</summary>
<p>Non. La méthode part du principe qu'un brouillon assisté par IA est un point de départ courant. L'enjeu est de savoir quoi en garder, quoi couper et quoi vérifier avant publication.</p>
</details>
<details>
<summary>La formation convient-elle aux grands débutants ?</summary>
<p>Oui. Les quatre piliers sont enseignés sans prérequis technique, avec des exemples corrigés en direct comme celui présenté plus haut.</p>
</details>
<details>
<summary>Peut-on suivre la formation à son rythme ?</summary>
<p>Oui, les ateliers sont accessibles en continu et les exercices peuvent être repris à tout moment depuis votre espace personnel.</p>
</details>
</div>
<div class="astuce-zone">
<button type="button" class="btn btn--ghost btn--sm" id="btn-astuce"
hx-get="" hx-select="#astuce-bonus" hx-target="#astuce-zone-cible" hx-swap="innerHTML transition:true">
Recevoir une astuce bonus
</button>
<div id="astuce-zone-cible" style="margin-top:1rem;"></div>
</div>
<div class="source-only" id="astuce-bonus">
<div class="astuce-carte">
<p><strong>Astuce :</strong> relisez toujours votre texte à voix haute. Une phrase qu'on peine à prononcer se lit tout aussi mal, qu'elle vienne d'une IA ou de vous.</p>
</div>
</div>
</div>
</section>
<!-- ============ INSCRIPTION ============ -->
<section class="section section--ink inscription" id="inscription">
<div class="wrap">
<div class="inscription-grid">
<div>
<p class="eyebrow">Rejoindre fr-redacteurs</p>
<h2>Recevez la méthode complète</h2>
<ul class="avantages" style="margin-top:1.5rem;">
<li><svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Les quatre piliers détaillés, avec exercices corrigés.</span></li>
<li><svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Un exemple avant/après commenté chaque semaine.</span></li>
<li><svg viewbox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M20 6 9 17l-5-5"/></svg><span>Accès à l'outil de lisibilité complet et aux ateliers en direct.</span></li>
</ul>
</div>
<form class="inscription-form" id="form-inscription" novalidate
hx-post="/api/inscription" hx-target="#form-note" hx-swap="outerHTML" hx-disabled-elt="#btn-inscription">
<div class="champ">
<label for="email">Adresse e-mail</label>
<input type="email" id="email" name="email" required placeholder="vous@exemple.fr" autocomplete="email">
<p class="champ-erreur">Entrez une adresse e-mail valide.</p>
</div>
<!-- piège anti-spam, laissé vide par les visiteurs -->
<div class="hp" aria-hidden="true">
<label for="site-web">Site web</label>
<input type="text" id="site-web" name="site-web" tabindex="-1" autocomplete="off">
</div>
<button type="submit" class="btn btn--primary" id="btn-inscription">S'inscrire gratuitement</button>
<p class="form-note" id="form-note" role="status"></p>
</form>
</div>
</div>
</section>
</main>
<footer class="site section--ink">
<div class="wrap">
<nav aria-label="Liens du pied de page">
<ul>
<li><a href="#methode">Méthode</a></li>
<li><a href="#demo">Démo</a></li>
<li><a href="#outil">Outil de lisibilité</a></li>
<li><a href="#faq">FAQ</a></li>
<li><a href="#inscription">Rejoindre</a></li>
</ul>
</nav>
<div class="bas">
<p>© 2012 - <span id="an"></span> fr-redacteurs.com rédaction web à l'ère de l'IA.</p>
<p>Merci pour votre attention</p>
</div>
</div>
</footer>
<script>
(() => {
"use strict";
/* ---- 1. Menu mobile ---- */
const navToggleBtn = document.getElementById("nav-toggle-btn");
const menu = document.getElementById("menu-principal");
navToggleBtn.addEventListener("click", () => {
const isOpen = menu.classList.toggle("is-open");
navToggleBtn.setAttribute("aria-expanded", String(isOpen));
});
menu.querySelectorAll("a").forEach((link) => {
link.addEventListener("click", () => {
menu.classList.remove("is-open");
navToggleBtn.setAttribute("aria-expanded", "false");
});
});
/* ---- 2. Outil de lisibilité du titre ---- */
const champTitre = document.getElementById("titre-test");
const jaugeBarre = document.getElementById("jauge-barre");
const jaugeRetour = document.getElementById("jauge-retour");
const evaluerTitre = (texte) => {
const n = texte.length;
let pourcentage = Math.min((n / 70) * 100, 100);
let couleur = "var(--green)";
let message = `${n} caractère${n > 1 ? "s" : ""} — longueur idéale pour la recherche et les assistants IA.`;
if (n === 0) {
message = "0 caractère — commencez à écrire pour voir le résultat.";
} else if (n > 70 && n <= 80) {
couleur = "var(--gold)";
message = `${n} caractères — un peu long, risque de troncature partielle.`;
} else if (n > 80) {
couleur = "var(--red)";
message = `${n} caractères — trop long, le titre sera coupé. Raccourcissez.`;
}
jaugeBarre.style.width = pourcentage + "%";
jaugeBarre.style.backgroundColor = couleur;
jaugeRetour.textContent = message;
};
champTitre.addEventListener("input", (e) => evaluerTitre(e.target.value));
/* ---- 3. htmx : nettoyer les blocs "source-only" après un swap ---- */
document.body.addEventListener("htmx:afterSwap", (evt) => {
evt.detail.target.querySelectorAll(".source-only").forEach((el) => {
el.classList.remove("source-only");
});
});
/* ---- 4. Formulaire d'inscription : validation + retour accessible ---- */
const formInscription = document.getElementById("form-inscription");
const noteForm = document.getElementById("form-note");
const champEmail = document.getElementById("email");
formInscription.addEventListener("submit", (e) => {
// le piège anti-spam est rempli -> on bloque silencieusement
if (formInscription.querySelector("#site-web").value !== "") {
e.preventDefault();
return;
}
if (!champEmail.checkValidity()) {
e.preventDefault();
noteForm.textContent = "Entrez une adresse e-mail valide avant d'envoyer le formulaire.";
noteForm.dataset.state = "err";
champEmail.focus();
}
// si le champ est valide, la requête hx-post se poursuit normalement.
// en l'absence de backend actif, on informe la personne plutôt que de laisser échouer silencieusement.
});
document.body.addEventListener("htmx:responseError", (evt) => {
if (evt.target.closest("#form-inscription")) {
noteForm.textContent = "Impossible d'envoyer le formulaire pour le moment. Réessayez dans un instant.";
noteForm.dataset.state = "err";
}
});
/* ---- 5. Année courante ---- */
document.getElementById("an").textContent = new Date().getFullYear();
})();
</script>
</body>
</html>
