feat(landing): step 04 — remerciement automatique au client

Ajoute une 4e étape dans la section « Comment ça marche » qui
matérialise la fin heureuse du cycle : le client paye, Rubis envoie
automatiquement un mot court de remerciement (« Merci, paiement bien
reçu »).

Pourquoi c'est important côté pitch :
- Aligne le produit avec le principe brand « respectueux du client
  final » (cf. CLAUDE.md). On n'est pas qu'un outil de pression — on
  est aussi celui qui sait dire merci.
- Crée une attente positive de fin de cycle, qui s'enchaîne mieux
  vers le compteur de rubis (déplacé du step 03 vers 04 pour servir
  de récompense narrative à la boucle complète).

Modifs :
- En-tête : « Trois étapes → Quatre étapes » + ajustement du
  sous-titre.
- Step 03 : retitré « Vous validez. La machine fait le reste. »
  (le punchline « Et puis c'est tout » migre implicitement sur 04).
- Step 04 (nouveau) : email de remerciement + encart rubis.
- Nouveau ThankYouWidget : email card stylé Apple Mail (sender,
  sujet, corps, badge « Envoyé automatiquement ») en tokens rubis
  uniquement (pas de vert — interdit par brand).

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

apps/landing/src/components/sections/HowItWorks.tsx

@@ -7,10 +7,10 @@ export function HowItWorks() {
         <div className="text-center max-w-[640px] mx-auto mb-16">
           <Eyebrow>Comment ça marche</Eyebrow>
           <h2 className="mt-4 font-display font-bold text-ink leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px]">
-            Trois étapes. C'est tout.
+            Quatre étapes. C'est tout.
           </h2>
           <p className="mt-4 text-[17px] text-ink-2 leading-relaxed">
-            Vraiment. Parfois deux, si votre plan par défaut est bien réglé.
+            Vraiment. Parfois trois, si le client paye dès la première relance.
           </p>
         </div>
 
@@ -41,14 +41,29 @@ export function HowItWorks() {
 
         <Step
           num="03"
-          title="Et puis c'est tout."
+          title="Vous validez. La machine fait le reste."
+          body={
+            <p>
+              Pendant que vous travaillez, Rubis envoie les emails au moment prévu, suit qui a
+              ouvert, qui n'a pas répondu, et avant chaque relance vous demande discrètement par
+              email : « Cette facture a-t-elle été réglée ? ». Vous répondez en deux secondes.
+              La machine fait le reste.
+            </p>
+          }
+        >
+          <AssistantWidget />
+        </Step>
+
+        <Step
+          flip
+          num="04"
+          title="Le paiement tombe. Votre client est remercié."
           body={
             <>
               <p>
-                Sérieusement. Pendant que vous travaillez, Rubis envoie les emails au moment prévu,
-                suit qui a ouvert, qui n'a pas répondu, et avant chaque relance vous demande
-                discrètement par email : « Cette facture a-t-elle été réglée ? ». Vous répondez en
-                deux secondes. La machine fait le reste.
+                Quand vous validez « Payée », Rubis envoie automatiquement un mot court à votre
+                client : « Merci, paiement bien reçu ». C'est optionnel, configurable — mais
+                beaucoup l'activent. Parce qu'un client remercié est un client qui revient.
               </p>
               <div className="mt-5 inline-flex items-center gap-2 px-4 py-2.5 bg-rubis-glow border border-rubis/15 rounded-default text-[14px] text-rubis-deep font-medium">
                 <span aria-hidden className="size-[7px] bg-rubis rotate-45" />
@@ -58,7 +73,7 @@ export function HowItWorks() {
             </>
           }
         >
-          <AssistantWidget />
+          <ThankYouWidget />
         </Step>
       </div>
     </section>
@@ -184,6 +199,50 @@ function CalendarWidget() {
   );
 }
 
+/* ============== Widget 04 — Email de remerciement ============== */
+function ThankYouWidget() {
+  return (
+    <div className="w-full max-w-[420px] bg-white border border-line rounded-card overflow-hidden shadow-soft">
+      {/* En-tête expéditeur — mime un client mail (Apple Mail / Gmail). */}
+      <div className="flex items-start gap-3 p-5 border-b border-line">
+        <div
+          aria-hidden
+          className="size-10 rounded-full bg-rubis text-white flex items-center justify-center font-display font-bold text-[16px] shrink-0"
+        >
+          ◆
+        </div>
+        <div className="flex-1 min-w-0">
+          <div className="flex items-baseline justify-between gap-2">
+            <div className="font-semibold text-ink text-[14px] truncate">Studio Lumière</div>
+            <div className="text-[11px] text-ink-3 tabular-nums shrink-0">il y a 2 min</div>
+          </div>
+          <div className="text-[12.5px] text-ink-3 mt-0.5 truncate">
+            <span className="text-ink-3/80">À : </span>
+            client@boulangerie-paul.fr
+          </div>
+        </div>
+      </div>
+
+      {/* Sujet + corps de l'email */}
+      <div className="p-5 space-y-3">
+        <div className="font-display font-semibold text-ink text-[15.5px] leading-tight">
+          Merci, paiement bien reçu
+        </div>
+        <p className="text-[13.5px] text-ink-2 leading-relaxed">
+          Bonjour, nous confirmons la bonne réception de votre règlement de
+          {" "}
+          <span className="font-semibold text-ink tabular-nums">1 240,00 €</span>.
+          Belle journée — à très vite.
+        </p>
+        <div className="inline-flex items-center gap-1.5 px-2.5 py-1 bg-rubis-glow text-rubis-deep border border-rubis/15 rounded-full text-[11.5px] font-medium">
+          <span aria-hidden className="size-[6px] bg-rubis rotate-45" />
+          Envoyé automatiquement
+        </div>
+      </div>
+    </div>
+  );
+}
+
 /* ============== Widget 03 — Assistant (mini illustration) ============== */
 function AssistantWidget() {
   return (