feat(notes): liens internes, onglet Réseau, living blocks et consentement IA

Rend les liens entre notes visibles et persistants (sync NoteLink au save, auto-save, graphe réseau rafraîchi), ajoute living blocks, Memory Echo, recherche globale, consentement IA explicite et consolide les prototypes design en architectural-grid.

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

architectural-grid/src/components/settings/BillingTab.tsx

@@ -0,0 +1,203 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { Check, Shield, Zap, Crown, CreditCard, ArrowRight, Activity, Clock } from 'lucide-react';
+
+export const BillingTab: React.FC = () => {
+  const plans = [
+    {
+      id: 'free',
+      name: 'Plan Basic',
+      price: 'Gratuit',
+      period: '',
+      description: 'Pour découvrir la magie de Momento.',
+      features: [
+        '100 Notes max',
+        '3 Carnets',
+        '50 crédits IA (Lifetime)',
+        'Recherche sémantique',
+        'Historique 7 jours'
+      ],
+      current: true,
+      buttonText: 'Plan Actuel',
+      buttonClass: 'bg-paper text-concrete cursor-default'
+    },
+    {
+      id: 'pro',
+      name: 'Plan Pro',
+      price: '9,90€',
+      period: '/mois',
+      description: 'Pour les consultants et créateurs exigeants.',
+      features: [
+        'Notes illimitées',
+        'BYOK (OpenAI/Anthropic)',
+        '200 recherches sémantiques',
+        'Agents (12 runs/mois)',
+        'Historique 30 jours',
+        'Support Email'
+      ],
+      current: false,
+      popular: true,
+      buttonText: 'Passer au Plan Pro',
+      buttonClass: 'bg-accent text-white shadow-xl shadow-accent/20 hover:scale-[1.02] active:scale-95'
+    },
+    {
+      id: 'business',
+      name: 'Plan Business',
+      price: '29,90€',
+      period: '/mois',
+      description: 'Pour les équipes et chefs de produit.',
+      features: [
+        '10 Collaborateurs inclus',
+        'BYOK (13 fournisseurs)',
+        '1000 recherches sémantiques',
+        'Agents (60 runs/mois)',
+        'Brainstorm illimité',
+        'Accès API'
+      ],
+      current: false,
+      buttonText: 'Choisir Plan Business',
+      buttonClass: 'bg-ink text-white shadow-xl shadow-ink/20 hover:scale-[1.02] active:scale-95'
+    }
+  ];
+
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }} 
+      animate={{ opacity: 1, y: 0 }} 
+      exit={{ opacity: 0, y: -10 }}
+      className="space-y-12"
+    >
+      <div className="space-y-2">
+        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Gérer votre abonnement et votre facturation</h3>
+      </div>
+
+      {/* Usage Overview */}
+      <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+        <div className="bg-white/40 dark:bg-white/5 border border-border rounded-3xl p-8 space-y-6">
+          <div className="flex items-center gap-4">
+            <div className="p-2 bg-accent/10 text-accent rounded-xl">
+              <Activity size={20} />
+            </div>
+            <div>
+              <h4 className="text-sm font-bold text-ink">Utilisation actuelle</h4>
+              <p className="text-[10px] text-concrete uppercase tracking-widest">Période en cours</p>
+            </div>
+          </div>
+          
+          <div className="space-y-4">
+            <div className="space-y-2">
+              <div className="flex justify-between text-[11px] font-medium text-concrete uppercase tracking-wider">
+                <span>Crédits IA</span>
+                <span>1 / 50 utilisés</span>
+              </div>
+              <div className="h-2 w-full bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
+                <div className="h-full bg-accent w-[2%] rounded-full" />
+              </div>
+            </div>
+            
+            <div className="space-y-2">
+              <div className="flex justify-between text-[11px] font-medium text-concrete uppercase tracking-wider">
+                <span>Notes & Carnets</span>
+                <span>12 / 100 notes</span>
+              </div>
+              <div className="h-2 w-full bg-slate-100 dark:bg-white/5 rounded-full overflow-hidden">
+                <div className="h-full bg-ochre w-[12%] rounded-full" />
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <div className="bg-white/40 dark:bg-white/5 border border-border rounded-3xl p-8 space-y-6">
+          <div className="flex items-center gap-4">
+            <div className="p-2 bg-paper dark:bg-white/10 text-concrete rounded-xl">
+              <Clock size={20} />
+            </div>
+            <div>
+              <h4 className="text-sm font-bold text-ink">Facturation</h4>
+              <p className="text-[10px] text-concrete uppercase tracking-widest">Renouvellement</p>
+            </div>
+          </div>
+          
+          <div className="space-y-2">
+            <p className="text-xs text-concrete font-light">Votre plan gratuit n'expire jamais. Passez à la vitesse supérieure pour débloquer toute la puissance de Momento.</p>
+            <div className="pt-4 flex items-center justify-between border-t border-border/40 mt-4">
+              <span className="text-[11px] font-bold text-ink uppercase tracking-widest">Plan Actuel</span>
+              <span className="text-[11px] font-bold text-accent uppercase tracking-widest">GRATUIT</span>
+            </div>
+          </div>
+        </div>
+      </div>
+
+      {/* Plan Selection */}
+      <div className="grid grid-cols-1 lg:grid-cols-3 gap-8">
+        {plans.map((plan) => (
+          <div 
+            key={plan.id}
+            className={`relative p-8 rounded-[40px] border transition-all duration-500 overflow-hidden group flex flex-col
+              ${plan.popular 
+                ? 'bg-white dark:bg-paper border-accent shadow-2xl shadow-accent/10 scale-105 z-10' 
+                : 'bg-white/40 dark:bg-white/5 border-border hover:border-concrete/30'}`}
+          >
+            {plan.popular && (
+              <div className="absolute top-0 right-0 py-1.5 px-6 bg-accent text-white text-[9px] font-bold uppercase tracking-widest rounded-bl-2xl">
+                Recommandé
+              </div>
+            )}
+            
+            <div className="mb-8 space-y-2">
+              <h4 className="text-xl font-serif font-bold text-ink">{plan.name}</h4>
+              <div className="flex items-baseline gap-1">
+                <span className="text-4xl font-serif font-bold text-ink">{plan.price}</span>
+                <span className="text-concrete text-xs font-light italic">{plan.period}</span>
+              </div>
+              <p className="text-xs text-concrete font-light leading-relaxed pr-4">{plan.description}</p>
+            </div>
+
+            <div className="space-y-4 mb-10 flex-1">
+              {plan.features.map((feature, i) => (
+                <div key={i} className="flex items-start gap-3">
+                  <div className={`mt-1 p-0.5 rounded-full ${plan.popular ? 'bg-accent/10 text-accent' : 'bg-concrete/10 text-concrete'}`}>
+                    <Check size={10} />
+                  </div>
+                  <span className="text-xs font-light text-ink/80">{feature}</span>
+                </div>
+              ))}
+            </div>
+
+            <button 
+              className={`w-full py-4 rounded-2xl text-[10px] font-bold uppercase tracking-[0.2em] transition-all duration-300 ${plan.buttonClass}`}
+            >
+              <div className="flex items-center justify-center gap-2">
+                {plan.buttonText}
+                {!plan.current && <ArrowRight size={14} />}
+              </div>
+            </button>
+          </div>
+        ))}
+      </div>
+
+      {/* Footer Info */}
+      <div className="bg-slate-50 dark:bg-black/20 rounded-[32px] p-8 border border-border/40 flex flex-col md:flex-row items-center justify-between gap-8">
+        <div className="flex items-center gap-4">
+          <div className="p-3 bg-white dark:bg-paper rounded-2xl shadow-sm border border-border">
+            <Shield size={24} className="text-accent" />
+          </div>
+          <div>
+            <h5 className="text-sm font-bold text-ink">Transactions sécurisées</h5>
+            <p className="text-xs text-concrete font-light">Paiement via Stripe. Annulez à tout moment, sans engagement.</p>
+          </div>
+        </div>
+        <div className="flex items-center gap-6">
+          <div className="flex items-center gap-2">
+            <Zap size={16} className="text-ochre" />
+            <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Activation instantanée</span>
+          </div>
+          <div className="flex items-center gap-2">
+            <Crown size={16} className="text-amber-500" />
+            <span className="text-[10px] font-bold uppercase tracking-widest text-concrete">Garantie satisfait</span>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};