fix(ui): thème, textes et lisibilité restants de la revue

Les boutons suivent la couleur d’apparence, les libellés trop petits ou trop techniques sont clarifiés, et le catalogue des fournisseurs se met à jour tout seul.

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

memento-note/app/(public)/pricing/page.tsx

@@ -1,19 +1,28 @@
 'use client'
 
-import { motion } from 'motion/react'
-import { Shield } from 'lucide-react'
-import { useRouter } from 'next/navigation'
+import { Check } from 'lucide-react'
+import Link from 'next/link'
+import { useState } from 'react'
+import { useQuery } from '@tanstack/react-query'
 import { useLanguage } from '@/lib/i18n'
 import { SUBSCRIPTION_TRIAL_DAYS } from '@/lib/billing/trial-constants'
-import { useState } from 'react'
 
 export default function PricingPage() {
   const { t } = useLanguage()
-  const router = useRouter()
   const [billingInterval, setBillingInterval] = useState<'monthly' | 'annual'>('monthly')
   const trialDays = SUBSCRIPTION_TRIAL_DAYS
+  const { data: byokCatalog } = useQuery({
+    queryKey: ['public', 'byok-catalog'],
+    queryFn: async () => {
+      const res = await fetch('/api/public/byok-catalog')
+      if (!res.ok) throw new Error('catalog')
+      return res.json() as Promise<{ providers: { id: string }[] }>
+    },
+    staleTime: 60_000,
+  })
+  const providerCount = byokCatalog?.providers.length || '…'
 
-  const PLANS = [
+  const plans = [
     { key: 'basic', popular: false, hasTrial: false, price: t('landing.pricing.basicPrice'), period: '' },
     {
       key: 'pro',
@@ -39,88 +48,113 @@ export default function PricingPage() {
   ]
 
   return (
-    <main className="min-h-screen bg-paper">
-      <section className="py-32 px-8">
-        <div className="max-w-7xl mx-auto">
-          <div className="text-center mb-12">
-            <span className="text-[11px] font-bold uppercase tracking-[0.3em] text-ochre mb-4 block">{t('landing.pricing.label')}</span>
-            <h2 className="text-4xl md:text-5xl font-serif tracking-tight text-ink mb-6">{t('landing.pricing.title')}</h2>
-            <p className="text-concrete font-light max-w-xl mx-auto mb-12">{t('landing.pricing.desc')}</p>
+    <main className="min-h-screen bg-[#0B0A09] text-[#F4F1EA] font-[family-name:var(--font-manrope)] selection:bg-[#D4A373]/40 selection:text-white">
+      <nav className="sticky top-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">
+            <span className="font-serif text-xl font-bold leading-none">M</span>
+          </div>
+          <span className="font-serif text-xl font-medium tracking-tight">Memento</span>
+        </Link>
+        <div className="flex items-center gap-2 sm:gap-3">
+          <Link href="/login" className="text-[13px] text-white/75 hover:text-white transition-colors px-2">
+            {t('landing.nav.login')}
+          </Link>
+          <Link
+            href="/register"
+            className="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>
+        </div>
+      </nav>
 
-            <div className="flex items-center justify-center gap-10 mb-8">
-              <button onClick={() => setBillingInterval('monthly')} className={`group relative py-2 px-1 transition-all ${billingInterval === 'monthly' ? 'text-ink' : 'text-concrete/40 hover:text-concrete'}`}>
-                <span className="text-xs font-black uppercase tracking-[0.2em]">{t('landing.pricing.monthly')}</span>
-                {billingInterval === 'monthly' && (
-                  <motion.div layoutId="interval-active-pricing" className="absolute -inset-x-1 -inset-y-0.5 border border-ochre/60" transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }} />
-                )}
+      <section className="px-5 sm:px-8 py-28">
+        <div className="max-w-6xl mx-auto">
+          <div className="text-center mb-12">
+            <span className="text-[11px] font-bold uppercase tracking-[0.3em] text-[#D4A373] mb-4 block">
+              {t('landing.pricing.label')}
+            </span>
+            <h1 className="font-serif text-3xl sm:text-5xl tracking-tight mb-4">{t('landing.pricing.title')}</h1>
+            <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]">
+              <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'}`}
+              >
+                {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'}`}
+              >
+                {t('landing.pricing.annual')}
+                <span className="absolute -top-3 -right-1 text-[10px] text-[#D4A373] whitespace-nowrap">
+                  {t('landing.pricing.savePercent')}
+                </span>
               </button>
-              <div className="relative">
-                <button onClick={() => setBillingInterval('annual')} className={`group relative py-2 px-1 transition-all ${billingInterval === 'annual' ? 'text-ink' : 'text-concrete/40 hover:text-concrete'}`}>
-                  <span className="text-xs font-black uppercase tracking-[0.2em]">{t('landing.pricing.annual')}</span>
-                  {billingInterval === 'annual' && (
-                    <motion.div layoutId="interval-active-pricing" className="absolute -inset-x-1 -inset-y-0.5 border border-ochre/60" transition={{ type: 'spring', bounce: 0.2, duration: 0.6 }} />
-                  )}
-                </button>
-                <div className="absolute -top-6 left-1/2 -translate-x-1/2 whitespace-nowrap">
-                  <span className="text-[9px] font-bold text-ochre uppercase tracking-widest italic animate-pulse">
-                    {t('landing.pricing.savePercent')}
-                  </span>
-                </div>
-              </div>
             </div>
           </div>
-
-          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-6 items-stretch">
-            {PLANS.map((plan) => (
-              <div key={plan.key} className={`relative p-8 rounded-[32px] border flex flex-col transition-all duration-300 hover:shadow-2xl hover:shadow-ink/5 ${plan.popular ? 'bg-ink text-paper border-ink ring-4 ring-ochre/20' : 'bg-white border-border text-ink'}`}>
+          <div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-3">
+            {plans.map((plan) => (
+              <div
+                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]'
+                }`}
+              >
                 {plan.popular && (
-                  <div className="absolute -top-4 left-1/2 -translate-x-1/2 px-4 py-1 bg-ochre text-ink text-[10px] font-bold uppercase tracking-widest rounded-full">
+                  <span className="text-[10px] font-bold uppercase tracking-widest text-[#D4A373] mb-3">
                     {t('landing.pricing.popular')}
-                  </div>
+                  </span>
                 )}
-                <div className="mb-8">
-                  <h4 className="text-[11px] font-bold uppercase tracking-widest mb-2 opacity-60">{t(`landing.pricing.${plan.key}.name`)}</h4>
-                  <div className="flex items-baseline gap-1 mb-4">
-                    <span className="text-4xl font-serif font-medium">{plan.price}</span>
-                    {plan.period && <span className="text-xs opacity-60">{plan.period}</span>}
-                  </div>
-                  {plan.hasTrial && (
-                    <p className={`text-[11px] font-semibold mb-3 ${plan.popular ? 'text-ochre' : 'text-brand-accent'}`}>
-                      {t('landing.pricing.trialBadge', { days: trialDays })}
-                    </p>
-                  )}
-                  <p className="text-sm font-light leading-relaxed opacity-80">{t(`landing.pricing.${plan.key}.desc`)}</p>
+                <h2 className="text-[13px] font-medium tracking-wide text-white/80 mb-2">
+                  {t(`landing.pricing.${plan.key}.name`)}
+                </h2>
+                <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>}
                 </div>
-                <div className="flex-1 space-y-4 mb-10">
+                {plan.hasTrial && (
+                  <p className="text-[11px] font-semibold text-[#D4A373] 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>
+                <ul className="space-y-2.5 mb-8 flex-1">
                   {plan.hasTrial && (
-                    <div className="flex items-start gap-3">
-                      <div className={`mt-1 rounded-full p-0.5 ${plan.popular ? 'bg-ochre text-ink' : 'bg-brand-accent/10 text-brand-accent'}`}>
-                        <Shield size={10} fill="currentColor" />
-                      </div>
-                      <span className="text-xs font-medium">{t('landing.pricing.trialFeature', { days: trialDays })}</span>
-                    </div>
+                    <li className="flex gap-2 text-xs text-[#D4A373]/90">
+                      <Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
+                      {t('landing.pricing.trialFeature', { days: trialDays })}
+                    </li>
                   )}
-                  {[0, 1, 2, 3, 4, 5].map(j => {
-                    const feat = t(`landing.pricing.${plan.key}.feature${j}`)
-                    if (!feat || feat === `landing.pricing.${plan.key}.feature${j}`) return null
+                  {[0, 1, 2, 3, 4, 5].map((j) => {
+                    const feat = t(`landing.pricing.${plan.key}.feature${j}`, { count: providerCount })
+                    if (!feat || feat.startsWith('landing.')) return null
                     return (
-                      <div key={j} className="flex items-start gap-3">
-                        <div className={`mt-1 rounded-full p-0.5 ${plan.popular ? 'bg-ochre text-ink' : 'bg-brand-accent/10 text-brand-accent'}`}>
-                          <Shield size={10} fill="currentColor" />
-                        </div>
-                        <span className="text-xs font-light">{feat}</span>
-                      </div>
+                      <li key={j} className="flex gap-2 text-sm text-white/80">
+                        <Check size={12} className="text-[#D4A373] mt-0.5 shrink-0" />
+                        {feat}
+                      </li>
                     )
                   })}
-                </div>
-                <button
-                  onClick={() => router.push('/register')}
-                  className={`w-full py-4 rounded-2xl text-xs font-bold uppercase tracking-widest transition-all ${plan.popular ? 'bg-ochre text-ink hover:opacity-90' : 'bg-ink text-paper hover:bg-ink/90'}`}
+                </ul>
+                <Link
+                  href="/register"
+                  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'
+                  }`}
                 >
                   {plan.hasTrial
                     ? t('landing.pricing.trialCta', { days: trialDays })
                     : t(`landing.pricing.${plan.key}.cta`)}
-                </button>
+                </Link>
               </div>
             ))}
           </div>

memento-note/app/(public)/privacy/page.tsx

@@ -368,11 +368,11 @@ export default async function PrivacyPage({
           {locale === 'fr' ? 'Confidentialité' : 'Privacy'}
         </p>
         <h1 className="font-serif text-4xl sm:text-5xl tracking-tight mb-4">{doc.title}</h1>
-        <p className="text-sm text-white/40 mb-3">{doc.lastUpdated}</p>
+        <p className="text-sm text-white/70 mb-3">{doc.lastUpdated}</p>
         <p className="text-white/65 leading-relaxed text-lg mb-12">{doc.intro}</p>
 
         <nav aria-label="Sommaire" className="mb-12 p-5 rounded-xl bg-white/[0.03] border border-white/[0.06]">
-          <p className="text-[11px] uppercase tracking-[0.2em] text-white/40 mb-3">
+          <p className="text-[13px] font-medium tracking-wide text-white/70 mb-3">
             {locale === 'fr' ? 'Sommaire' : 'Contents'}
           </p>
           <ul className="space-y-1.5 text-sm">