feat(landing): section "Mode automatique bientôt" + FAQ + pricing

Annonce la connexion bancaire auto sur la landing pendant la fenêtre
KYC Powens. Trois touches cohérentes pour préparer le marché aux
plans Pro / Business :

- Nouvelle section AutoBanking entre Gamification et Legal : badge
  "Bientôt disponible", h2 « Plus jamais besoin de répondre "C'est
  payé" », 4 bénéfices clés (détection temps réel via Powens AISP,
  toutes banques françaises, mode validation ou auto-pilote, lecture
  seule), badge "Inclus sur Pro et Business", mention DSP2 / AISP
  ACPR pour la conformité. Mock visuel d'email "Garage Lemoine a
  payé F2026-0013 · 4 189,40 €" avec halo glow rubis, récap
  client/facture/montant + check-list "facture payée · relances
  annulées · remerciement envoyé · +1 rubis".
- FAQ : enrichit la 1re question (paiement hors plateforme) avec
  une teaser vers la section AutoBanking, et ajoute une nouvelle
  question dédiée « La connexion bancaire, c'est sécurisé ? Vous
  pouvez bouger mon argent ? » avec réponse explicite sur le statut
  AISP (lecture seule, DSP2, révocation 1 clic).
- Pricing : ajoute une feature dans la liste des inclus Pro avec
  mention "à venir" pour la détection bancaire automatique.

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

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

@@ -0,0 +1,192 @@
+import { CheckCircle2, ShieldCheck, Sparkles, Building2 } from "lucide-react";
+
+/**
+ * Section "Mode automatique — bientôt" : annonce la connexion bancaire
+ * en lecture seule via Powens (AISP). Désactivée par défaut sur l'app
+ * en attendant l'agrément KYC Powens prod. La landing communique
+ * pendant la fenêtre.
+ *
+ * Style : carte cream avec accent rubis, illustration mock à droite,
+ * 4 bénéfices clés, note conformité DSP2 / lecture seule.
+ */
+export function AutoBanking() {
+  return (
+    <section id="auto-banking" className="bg-cream">
+      <div className="max-w-[1180px] mx-auto px-5 sm:px-8 py-20 lg:py-28">
+        <div className="grid lg:grid-cols-[1fr_1fr] gap-10 lg:gap-16 items-center">
+          {/* Colonne texte */}
+          <div>
+            <span className="inline-flex items-center gap-1.5 text-[11px] uppercase tracking-[0.16em] font-semibold text-rubis bg-rubis-glow border border-rubis/15 px-3 py-1.5 rounded-full">
+              <Sparkles size={12} aria-hidden="true" />
+              Bientôt disponible
+            </span>
+
+            <h2 className="mt-5 font-display font-bold text-ink leading-[1.1] tracking-[-0.025em] text-[34px] sm:text-[44px] lg:text-[48px]">
+              Plus jamais besoin de répondre{" "}
+              <em className="text-rubis">«&nbsp;C'est payé&nbsp;»</em>.
+            </h2>
+
+            <p className="mt-5 text-[17px] text-ink-2 leading-relaxed max-w-[520px]">
+              Connectez votre compte bancaire en lecture seule. Rubis détecte
+              automatiquement les virements de vos clients, marque les
+              factures payées et envoie le mot de remerciement. Vous ne
+              répondez plus à rien.
+            </p>
+
+            <ul className="mt-7 space-y-3.5">
+              <Benefit>
+                <b className="text-ink">Détection en temps réel</b> via Powens
+                (agréé AISP par l'ACPR).
+              </Benefit>
+              <Benefit>
+                <b className="text-ink">Toutes les banques françaises</b> —
+                pro ou perso, neo ou traditionnelles.
+              </Benefit>
+              <Benefit>
+                <b className="text-ink">Mode validation ou auto-pilote</b>{" "}
+                — vous choisissez si Rubis attend votre OK ou marque
+                payée tout seul.
+              </Benefit>
+              <Benefit>
+                <b className="text-ink">Lecture seule.</b> Aucun déplacement
+                de fonds possible, jamais. Révocable en un clic.
+              </Benefit>
+            </ul>
+
+            <div className="mt-8 flex flex-wrap items-center gap-3">
+              <span className="inline-flex items-center gap-2 text-[14px] text-ink-2 bg-white border border-line rounded-default px-4 py-2.5">
+                <Building2 size={16} className="text-rubis" aria-hidden="true" />
+                Inclus sur les plans{" "}
+                <b className="text-ink">Pro</b> et{" "}
+                <b className="text-ink">Business</b>
+              </span>
+            </div>
+
+            <p className="mt-5 inline-flex items-center gap-2 text-[12.5px] text-ink-3">
+              <ShieldCheck size={14} aria-hidden="true" />
+              Conformité DSP2 · agrément AISP en cours de finalisation
+            </p>
+          </div>
+
+          {/* Colonne illustration : email "Paiement détecté" */}
+          <div className="lg:justify-self-end w-full max-w-[460px]">
+            <DetectedPaymentMock />
+          </div>
+        </div>
+      </div>
+    </section>
+  );
+}
+
+function Benefit({ children }: { children: React.ReactNode }) {
+  return (
+    <li className="flex gap-3 text-[15.5px] leading-relaxed text-ink-2">
+      <CheckCircle2
+        size={20}
+        strokeWidth={2.4}
+        className="text-rubis flex-shrink-0 mt-0.5"
+        aria-hidden="true"
+      />
+      <span>{children}</span>
+    </li>
+  );
+}
+
+/**
+ * Mock d'email "Paiement détecté" — illustre le résultat concret de la
+ * feature. Reprend les codes du ThankYouWidget de HowItWorks pour la
+ * cohérence visuelle (carte blanche, en-tête expéditeur avec gem ◆,
+ * badge rubis-glow).
+ */
+function DetectedPaymentMock() {
+  return (
+    <div className="relative">
+      <div className="absolute -inset-4 bg-rubis-glow/40 blur-2xl rounded-card opacity-60" aria-hidden="true" />
+      <div className="relative bg-white border border-line rounded-card overflow-hidden shadow-card">
+        {/* En-tête expéditeur */}
+        <div className="flex items-start gap-3 p-5 border-b border-line bg-cream-2/40">
+          <div
+            aria-hidden="true"
+            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">
+                Rubis sur l'ongle
+              </div>
+              <div className="text-[11px] text-ink-3 tabular-nums shrink-0">
+                il y a 1 min
+              </div>
+            </div>
+            <div className="text-[12.5px] text-ink-3 mt-0.5 truncate">
+              <span className="text-ink-3/80">À : </span>
+              vous@votre-tpe.fr
+            </div>
+          </div>
+        </div>
+
+        {/* Corps */}
+        <div className="p-5">
+          <div className="text-center mb-4">
+            <div className="inline-flex size-12 items-center justify-center rounded-full bg-rubis-glow text-rubis-deep mb-3">
+              <CheckCircle2 size={26} strokeWidth={2.5} aria-hidden="true" />
+            </div>
+            <div className="font-display font-bold text-ink text-[18px] leading-tight">
+              Garage Lemoine a payé{" "}
+              <span className="text-rubis">F2026-0013</span>
+            </div>
+            <p className="mt-2 text-[12.5px] text-ink-3 leading-relaxed">
+              Détecté automatiquement sur votre compte Pro
+            </p>
+          </div>
+
+          {/* Récap mini */}
+          <div className="bg-cream-2/60 border border-line rounded-default px-4 py-3 space-y-2 text-[13px]">
+            <div className="flex justify-between">
+              <span className="text-ink-3">Client</span>
+              <span className="text-ink font-medium">Garage Lemoine</span>
+            </div>
+            <div className="flex justify-between">
+              <span className="text-ink-3">Facture</span>
+              <span className="text-ink font-mono text-[12px]">F2026-0013</span>
+            </div>
+            <div className="flex justify-between items-center pt-1 border-t border-line">
+              <span className="text-ink-3">Montant</span>
+              <span className="font-display font-extrabold text-rubis text-[20px] tabular-nums">
+                4&nbsp;189,40 €
+              </span>
+            </div>
+          </div>
+
+          {/* Footer actions auto */}
+          <div className="mt-4 space-y-2">
+            {[
+              "Facture marquée payée",
+              "Relances annulées",
+              "Remerciement envoyé au client",
+            ].map((action) => (
+              <div
+                key={action}
+                className="flex items-center gap-2 text-[12.5px] text-ink-2"
+              >
+                <CheckCircle2
+                  size={14}
+                  className="text-rubis shrink-0"
+                  aria-hidden="true"
+                />
+                {action}
+              </div>
+            ))}
+          </div>
+
+          <div className="mt-5 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">
+            <Sparkles size={11} aria-hidden="true" />
+            +1 rubis · vous n'avez rien eu à faire
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+}

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

@@ -10,6 +10,28 @@ const FAQS: Array<{ q: string; a: React.ReactNode }> = [
         cliquez "Oui" en 3 secondes, le plan s'arrête. Vous cliquez "Non" (ou ne répondez pas),
         la relance part comme prévu. Vous configurez la cadence et le timing de ces
         vérifications dans vos plans.
+        <br />
+        <br />
+        <b>Bientôt</b>, vous pourrez aussi connecter votre compte bancaire en lecture seule :
+        Rubis détectera les virements entrants automatiquement et marquera la facture payée
+        sans vous demander. Voir la section <a href="#auto-banking" className="text-rubis underline underline-offset-2 hover:no-underline">Mode automatique</a> ci-dessus.
+      </>
+    ),
+  },
+  {
+    q: "La connexion bancaire, c'est sécurisé ? Vous pouvez bouger mon argent ?",
+    a: (
+      <>
+        <b>Non, et c'est techniquement impossible.</b> La connexion bancaire passe par{" "}
+        <b>Powens</b>, prestataire AISP agréé par l'ACPR (Autorité de Contrôle Prudentiel et
+        de Résolution). Le statut AISP, défini par la <abbr title="Directive sur les Services de Paiement 2">DSP2</abbr>{" "}
+        européenne, autorise <b>uniquement la lecture</b> des comptes et transactions —{" "}
+        <i>jamais</i> d'initiation de paiement ou de déplacement de fonds.
+        <br />
+        <br />
+        Concrètement : Rubis lit la liste de vos virements entrants pour matcher avec vos
+        factures. Aucune action sortante possible. Vous révoquez l'accès en un clic depuis
+        vos Paramètres, et Powens reçoit l'ordre immédiat de couper la lecture.
       </>
     ),
   },

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

@@ -11,6 +11,10 @@ const FEATURES = [
     "Vos clients voient votre nom et répondent directement à votre email. Aucune mention de Rubis.",
   ],
   ["Plans personnalisables", "avec variables et tonalités sur-mesure."],
+  [
+    "Détection bancaire automatique",
+    "à venir : connectez votre banque (lecture seule, AISP), Rubis marque les factures payées tout seul.",
+  ],
   ["Stats détaillées", "+ export CSV pour vos comptables."],
   ["Support prioritaire.", "Réponse sous 4 h ouvrées, par un humain en France."],
   ["App mobile et desktop,", "hébergement français."],

apps/landing/src/pages/index.astro

@@ -15,6 +15,7 @@ import { Stats } from "../components/sections/Stats";
 import { Promise as PromiseSection } from "../components/sections/Promise";
 import { HowItWorks } from "../components/sections/HowItWorks";
 import { Gamification } from "../components/sections/Gamification";
+import { AutoBanking } from "../components/sections/AutoBanking";
 import { Legal } from "../components/sections/Legal";
 import { Pricing } from "../components/sections/Pricing";
 import { FAQ } from "../components/sections/FAQ";
@@ -49,6 +50,7 @@ const jsonLd = {
   <PromiseSection />
   <HowItWorks />
   <Gamification />
+  <AutoBanking />
   <Legal />
   <Pricing />
   <FAQ />