fix(ui): tarifs publics unifiés et prix annuel lisible

La page tarifs reprend la barre du site public. En annuel, Pro affiche
8,25 € par mois (99 € l’année), plus le 99 € comme gros chiffre.

Co-authored-by: Cursor <cursoragent@cursor.com>

memento-note/components/landing-page.tsx

@@ -2,44 +2,27 @@
 
 import { motion, AnimatePresence } from 'motion/react'
 import {
-  ArrowRight, Menu, X, Check, BrainCircuit,
-  Network, GraduationCap, Bot, KeyRound, Globe, ChevronDown
+  ArrowRight, Check, BrainCircuit,
+  Network, GraduationCap, Bot, KeyRound
 } from 'lucide-react'
 import Link from 'next/link'
 import Image from 'next/image'
 import { useLanguage } from '@/lib/i18n'
-import type { SupportedLanguage } from '@/lib/i18n/load-translations'
 import { SUBSCRIPTION_TRIAL_DAYS } from '@/lib/billing/trial-constants'
-import { useEffect, useRef, useState, type ReactNode } from 'react'
+import { useEffect, useState, type ReactNode } from 'react'
 import { useQuery } from '@tanstack/react-query'
+import { PublicSiteChrome } from '@/components/public-site-chrome'
+import {
+  DEFAULT_PRICES,
+  annualDiscountPercent,
+} from '@/lib/billing/price-catalog'
 
 const ECHO_LINES = ['echo0', 'echo1', 'echo2'] as const
 
-const LANDING_LANGS: { code: SupportedLanguage; labelKey: string }[] = [
-  { code: 'fr', labelKey: 'languages.fr' },
-  { code: 'en', labelKey: 'languages.en' },
-  { code: 'es', labelKey: 'languages.es' },
-  { code: 'de', labelKey: 'languages.de' },
-  { code: 'it', labelKey: 'languages.it' },
-  { code: 'pt', labelKey: 'languages.pt' },
-  { code: 'nl', labelKey: 'languages.nl' },
-  { code: 'pl', labelKey: 'languages.pl' },
-  { code: 'ru', labelKey: 'languages.ru' },
-  { code: 'zh', labelKey: 'languages.zh' },
-  { code: 'ja', labelKey: 'languages.ja' },
-  { code: 'ko', labelKey: 'languages.ko' },
-  { code: 'ar', labelKey: 'languages.ar' },
-  { code: 'fa', labelKey: 'languages.fa' },
-  { code: 'hi', labelKey: 'languages.hi' },
-]
-
 export function LandingPage() {
-  const { t, language, setLanguage } = useLanguage()
+  const { t } = useLanguage()
   const [billingInterval, setBillingInterval] = useState<'monthly' | 'annual'>('monthly')
-  const [menuOpen, setMenuOpen] = useState(false)
-  const [langOpen, setLangOpen] = useState(false)
   const [echoIndex, setEchoIndex] = useState(0)
-  const langRef = useRef<HTMLDivElement>(null)
   const { data: byokCatalog } = useQuery({
     queryKey: ['public', 'byok-catalog'],
     queryFn: async () => {
@@ -51,36 +34,16 @@ export function LandingPage() {
   })
   const byokProviders = byokCatalog?.providers ?? []
 
-  useEffect(() => {
-    if (!langOpen) return
-    const onPointer = (e: MouseEvent) => {
-      if (langRef.current && !langRef.current.contains(e.target as Node)) setLangOpen(false)
-    }
-    const onKey = (e: KeyboardEvent) => {
-      if (e.key === 'Escape') setLangOpen(false)
-    }
-    document.addEventListener('mousedown', onPointer)
-    document.addEventListener('keydown', onKey)
-    return () => {
-      document.removeEventListener('mousedown', onPointer)
-      document.removeEventListener('keydown', onKey)
-    }
-  }, [langOpen])
   useEffect(() => {
     const id = setInterval(() => setEchoIndex((i) => (i + 1) % ECHO_LINES.length), 3200)
     return () => clearInterval(id)
   }, [])
 
-  useEffect(() => {
-    const root = document.querySelector<HTMLElement>('[data-public-scroll-root]')
-    if (!root) return
-    const prev = root.style.overflow
-    if (menuOpen) root.style.overflow = 'hidden'
-    else root.style.overflow = prev || ''
-    return () => { root.style.overflow = prev }
-  }, [menuOpen])
-
   const trialDays = SUBSCRIPTION_TRIAL_DAYS
+  const annualSavePercent = annualDiscountPercent(
+    DEFAULT_PRICES.PRO.month.amount,
+    DEFAULT_PRICES.PRO.year.amount,
+  )
   const PLANS = [
     { key: 'basic', popular: false, hasTrial: false, price: t('landing.pricing.basicPrice'), period: '' },
     {
@@ -106,13 +69,6 @@ export function LandingPage() {
     },
   ]
 
-  const NAV = [
-    { href: '#product', label: t('landing.nav.secondBrain') },
-    { href: '#echo', label: t('landing.nav.echo') },
-    { href: '#agents', label: t('landing.nav.agents') },
-    { href: '#pricing', label: t('landing.nav.pricing') },
-  ]
-
   const scrollPublicHash = (hash: string) => {
     const id = hash.replace(/^#/, '')
     const target = document.getElementById(id)
@@ -130,138 +86,7 @@ export function LandingPage() {
   }, [])
 
   return (
-    <div className="min-h-screen bg-[#0B0A09] text-[#F4F1EA] font-[family-name:var(--font-manrope)] selection:bg-[#D4A373]/40 selection:text-white">
-      {/* Nav */}
-      <nav className="fixed top-0 left-0 right-0 z-[100] px-5 sm:px-8 py-4 flex items-center justify-between bg-[#0B0A09]/70 backdrop-blur-xl border-b border-white/[0.06]">
-        <Link href="/" className="flex items-center gap-2.5 group">
-          <div className="w-9 h-9 bg-[#F4F1EA] text-[#0B0A09] flex items-center justify-center rounded-lg transition-transform group-hover:scale-105">
-            <span className="font-serif text-xl font-bold leading-none">M</span>
-          </div>
-          <span className="font-serif text-xl font-medium tracking-tight text-[#F4F1EA]">Memento</span>
-        </Link>
-        <div className="hidden lg:flex items-center gap-8">
-          {NAV.map((l) => (
-            <a
-              key={l.href}
-              href={l.href}
-              onClick={(event) => {
-                event.preventDefault()
-                scrollPublicHash(l.href)
-                window.history.replaceState(null, '', l.href)
-              }}
-              className="text-[13px] text-white/75 hover:text-white transition-colors"
-            >
-              {l.label}
-            </a>
-          ))}
-        </div>
-        <div className="flex items-center gap-2 sm:gap-3">
-          {/* Language switcher */}
-          <div ref={langRef} className="relative">
-            <button
-              type="button"
-              onClick={() => setLangOpen((o) => !o)}
-              aria-expanded={langOpen}
-              aria-haspopup="listbox"
-              aria-label={t('landing.nav.language')}
-              className="inline-flex items-center gap-1.5 px-3 py-2 rounded-full border border-white/15 text-[12px] text-white/70 hover:text-white hover:border-white/30 transition-colors"
-            >
-              <Globe size={14} />
-              <span className="uppercase font-semibold tracking-wide">{language}</span>
-              <ChevronDown size={12} className={`opacity-60 transition-transform ${langOpen ? 'rotate-180' : ''}`} />
-            </button>
-            <AnimatePresence>
-              {langOpen && (
-                <motion.ul
-                  role="listbox"
-                  initial={{ opacity: 0, y: 6 }}
-                  animate={{ opacity: 1, y: 0 }}
-                  exit={{ opacity: 0, y: 6 }}
-                  transition={{ duration: 0.15 }}
-                  className="absolute end-0 mt-2 w-48 max-h-72 overflow-y-auto rounded-2xl border border-white/10 bg-[#141210] shadow-2xl py-1.5 z-[110]"
-                >
-                  {LANDING_LANGS.map((lang) => (
-                    <li key={lang.code} role="option" aria-selected={language === lang.code}>
-                      <button
-                        type="button"
-                        onClick={() => {
-                          setLanguage(lang.code)
-                          setLangOpen(false)
-                        }}
-                        className={`w-full text-start px-4 py-2.5 text-[13px] transition-colors ${
-                          language === lang.code
-                            ? 'bg-[#D4A373]/15 text-[#D4A373]'
-                            : 'text-white/70 hover:bg-white/5 hover:text-white'
-                        }`}
-                      >
-                        {t(lang.labelKey)}
-                      </button>
-                    </li>
-                  ))}
-                </motion.ul>
-              )}
-            </AnimatePresence>
-          </div>
-
-          <Link href="/login" className="hidden sm:inline text-[13px] text-white/75 hover:text-white transition-colors px-2">
-            {t('landing.nav.login')}
-          </Link>
-          <Link
-            href="/register"
-            className="hidden sm:inline-flex items-center gap-2 px-5 py-2.5 rounded-full bg-[#F4F1EA] text-[#0B0A09] text-[13px] font-semibold hover:bg-white transition-colors"
-          >
-            {t('landing.nav.cta')}
-          </Link>
-          <button
-            type="button"
-            aria-label={menuOpen ? t('landing.nav.closeMenu') : t('landing.nav.openMenu')}
-            onClick={() => setMenuOpen((o) => !o)}
-            className="lg:hidden w-10 h-10 rounded-full border border-white/15 flex items-center justify-center text-white/80"
-          >
-            {menuOpen ? <X size={18} /> : <Menu size={18} />}
-          </button>
-        </div>
-      </nav>
-
-      <AnimatePresence>
-        {menuOpen && (
-          <motion.div
-            initial={{ opacity: 0 }}
-            animate={{ opacity: 1 }}
-            exit={{ opacity: 0 }}
-            className="fixed inset-0 z-[99] bg-[#0B0A09] pt-24 px-8 lg:hidden"
-          >
-            <div className="flex flex-col gap-1">
-              {NAV.map((l) => (
-                <a
-                  key={l.href}
-                  href={l.href}
-                  onClick={(event) => {
-                    event.preventDefault()
-                    setMenuOpen(false)
-                    scrollPublicHash(l.href)
-                    window.history.replaceState(null, '', l.href)
-                  }}
-                  className="py-4 text-3xl font-serif border-b border-white/10"
-                >
-                  {l.label}
-                </a>
-              ))}
-              <Link
-                href="/login"
-                onClick={() => setMenuOpen(false)}
-                className="mt-10 py-4 text-2xl font-serif text-white/80 text-center border-b border-white/10"
-              >
-                {t('landing.nav.login')}
-              </Link>
-              <Link href="/register" onClick={() => setMenuOpen(false)} className="mt-4 py-4 rounded-2xl bg-[#F4F1EA] text-[#0B0A09] text-center font-semibold">
-                {t('landing.nav.cta')}
-              </Link>
-            </div>
-          </motion.div>
-        )}
-      </AnimatePresence>
-
+    <PublicSiteChrome currentPage="home" onHashNavigate={scrollPublicHash}>
       {/* ── HERO ── */}
       <section className="relative min-h-[100dvh] flex flex-col justify-center pt-28 pb-16 px-5 sm:px-8 overflow-hidden">
         {/* Atmosphere — warm, not purple neon */}
@@ -524,23 +349,23 @@ export function LandingPage() {
         <div className="max-w-6xl mx-auto">
           <div className="text-center mb-12">
             <h2 className="font-serif text-3xl sm:text-5xl tracking-tight mb-4">{t('landing.pricing.title')}</h2>
-            <p className="text-white/70 mb-8">{t('landing.pricing.desc')}</p>
-            <div className="inline-flex p-1 rounded-full border border-white/10 bg-white/[0.03]">
+            <p className="text-white/80 mb-8">{t('landing.pricing.desc')}</p>
+            <div className="inline-flex p-1 rounded-full border border-white/15 bg-white/[0.04]">
               <button
                 type="button"
                 onClick={() => setBillingInterval('monthly')}
-                className={`px-5 py-2 rounded-full text-[12px] font-semibold transition-all ${billingInterval === 'monthly' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/70'}`}
+                className={`px-5 py-2 rounded-full text-[13px] font-semibold transition-all ${billingInterval === 'monthly' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/80'}`}
               >
                 {t('landing.pricing.monthly')}
               </button>
               <button
                 type="button"
                 onClick={() => setBillingInterval('annual')}
-                className={`px-5 py-2 rounded-full text-[12px] font-semibold transition-all relative ${billingInterval === 'annual' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/70'}`}
+                className={`px-5 py-2 rounded-full text-[13px] font-semibold transition-all relative ${billingInterval === 'annual' ? 'bg-[#F4F1EA] text-[#0B0A09]' : 'text-white/80'}`}
               >
                 {t('landing.pricing.annual')}
-                <span className="absolute -top-3 -right-1 text-[10px] text-[#D4A373] whitespace-nowrap">
-                  {t('landing.pricing.savePercent')}
+                <span className="absolute -top-3 -right-1 text-[11px] text-[#E8C39A] whitespace-nowrap">
+                  {t('landing.pricing.savePercent', { percent: annualSavePercent })}
                 </span>
               </button>
             </div>
@@ -551,32 +376,32 @@ export function LandingPage() {
                 key={plan.key}
                 className={`rounded-2xl border p-6 flex flex-col ${
                   plan.popular
-                    ? 'border-[#D4A373]/50 bg-[#D4A373]/10'
-                    : 'border-white/[0.08] bg-white/[0.02]'
+                    ? 'border-[#D4A373]/60 bg-[#D4A373]/12'
+                    : 'border-white/[0.12] bg-white/[0.04]'
                 }`}
               >
                 {plan.popular && (
-                  <span className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373] mb-3">
+                  <span className="text-[11px] font-bold uppercase tracking-widest text-[#E8C39A] mb-3">
                     {t('landing.pricing.popular')}
                   </span>
                 )}
-                <h4 className="text-[13px] font-medium tracking-wide text-white/80 mb-2">
+                <h4 className="text-[14px] font-medium tracking-wide text-[#F4F1EA] mb-2">
                   {t(`landing.pricing.${plan.key}.name`)}
                 </h4>
                 <div className="flex items-baseline gap-1 mb-2">
                   <span className="text-3xl font-serif">{plan.price}</span>
-                  {plan.period && <span className="text-sm text-white/70">{plan.period}</span>}
+                  {plan.period && <span className="text-sm text-white/80">{plan.period}</span>}
                 </div>
                 {plan.hasTrial && (
-                  <p className="text-[11px] font-semibold text-[#D4A373] mb-3">
+                  <p className="text-[12px] font-semibold text-[#E8C39A] mb-3">
                     {t('landing.pricing.trialBadge', { days: trialDays })}
                   </p>
                 )}
-                <p className="text-sm text-white/70 mb-6">{t(`landing.pricing.${plan.key}.desc`)}</p>
+                <p className="text-sm text-white/80 mb-6">{t(`landing.pricing.${plan.key}.desc`)}</p>
                 <ul className="space-y-2.5 mb-8 flex-1">
                   {plan.hasTrial && (
-                    <li className="flex gap-2 text-xs text-[#D4A373]/90">
-                      <Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
+                    <li className="flex gap-2 text-xs text-[#E8C39A]">
+                      <Check size={12} className="text-[#E8C39A] mt-0.5 shrink-0" />
                       {t('landing.pricing.trialFeature', { days: trialDays })}
                     </li>
                   )}
@@ -586,8 +411,8 @@ export function LandingPage() {
                     })
                     if (!feat || feat.startsWith('landing.')) return null
                     return (
-                      <li key={j} className="flex gap-2 text-sm text-white/80">
-                        <Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
+                      <li key={j} className="flex gap-2 text-sm text-[#F4F1EA]/90">
+                        <Check size={12} className="text-[#E8C39A] mt-0.5 shrink-0" />
                         {feat}
                       </li>
                     )
@@ -598,7 +423,7 @@ export function LandingPage() {
                   className={`py-3 rounded-xl text-center text-[13px] font-semibold transition-colors ${
                     plan.popular
                       ? 'bg-[#F4F1EA] text-[#0B0A09] hover:bg-white'
-                      : 'bg-white/10 text-white hover:bg-white/15'
+                      : 'bg-white/15 text-white hover:bg-white/20'
                   }`}
                 >
                   {plan.hasTrial
@@ -633,48 +458,7 @@ export function LandingPage() {
         </div>
       </section>
 
-      <footer className="px-5 sm:px-8 py-14 border-t border-white/[0.06]">
-        <div className="max-w-6xl mx-auto flex flex-col md:flex-row justify-between gap-10">
-          <div className="max-w-xs">
-            <div className="flex items-center gap-2 mb-3">
-              <div className="w-7 h-7 bg-[#F4F1EA] text-[#0B0A09] flex items-center justify-center rounded-md">
-                <span className="font-serif font-bold text-sm">M</span>
-              </div>
-              <span className="font-serif text-lg">Memento</span>
-            </div>
-            <p className="text-sm text-white/60">{t('landing.footer.desc')}</p>
-          </div>
-          <div className="grid grid-cols-3 gap-10 text-sm">
-            {(['product', 'community', 'legal'] as const).map((section) => (
-              <div key={section}>
-                <p className="text-[13px] font-medium tracking-wide text-white/70 mb-3">
-                  {t(`landing.footer.${section}.title`)}
-                </p>
-                <ul className="space-y-2 text-white/70">
-                  {[0, 1, 2].map((j) => {
-                    const label = t(`landing.footer.${section}.link${j}`)
-                    const href = t(`landing.footer.${section}.link${j}Href`)
-                    if (!label || label.startsWith('landing.')) return null
-                    return (
-                      <li key={j}>
-                        {href.startsWith('/') ? (
-                          <Link href={href} className="hover:text-white transition-colors">{label}</Link>
-                        ) : (
-                          <a href={href} className="hover:text-white transition-colors">{label}</a>
-                        )}
-                      </li>
-                    )
-                  })}
-                </ul>
-              </div>
-            ))}
-          </div>
-        </div>
-        <p className="max-w-6xl mx-auto mt-12 pt-8 border-t border-white/[0.06] text-[13px] text-white/70 tracking-wide">
-          © 2026 Memento. {t('landing.footer.rights')}
-        </p>
-      </footer>
-    </div>
+    </PublicSiteChrome>
   )
 }