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/AITab.tsx

@@ -0,0 +1,152 @@
+import React from 'react';
+import { Sparkles, Edit3, MessageCircle, Languages, Tag, History, FlaskConical } from 'lucide-react';
+import { motion } from 'motion/react';
+
+const AISettingCard = ({ icon, title, description, defaultChecked = false }: any) => (
+  <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-6 flex items-center justify-between group hover:shadow-xl hover:shadow-accent/5 transition-all duration-300">
+    <div className="flex items-center gap-5">
+      <div className="p-3 bg-paper dark:bg-accent/10 rounded-2xl text-accent group-hover:bg-accent group-hover:text-white group-hover:scale-110 transition-all duration-300 border border-accent/20">
+        {icon}
+      </div>
+      <div className="space-y-1">
+        <h4 className="text-[13px] font-bold text-ink">{title}</h4>
+        <p className="text-[10px] text-muted-ink leading-relaxed pr-4 line-clamp-2">{description}</p>
+      </div>
+    </div>
+    <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
+      <input type="checkbox" className="sr-only peer" defaultChecked={defaultChecked} />
+      <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-accent"></div>
+    </label>
+  </div>
+);
+
+export const AITab: React.FC = () => {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }} 
+      animate={{ opacity: 1, y: 0 }} 
+      className="space-y-16 pb-20"
+    >
+      <div className="space-y-10">
+        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-muted-ink opacity-60">Configurez vos fonctionnalités IA et préférences</h3>
+        
+        <div className="space-y-6">
+          <h4 className="text-sm font-bold text-ink border-b border-border/40 pb-4">Fonctionnalités IA</h4>
+          <div className="grid grid-cols-1 md:grid-cols-2 gap-5">
+            <AISettingCard 
+              icon={<Edit3 size={18} />}
+              title="Suggestions de titre"
+              description="Suggérer des titres pour les notes sans titre après 50+ mots"
+              defaultChecked
+            />
+            <AISettingCard 
+              icon={<Sparkles size={18} />}
+              title="IA Note"
+              description="Active le bouton de chat IA et les outils d'amélioration du texte"
+              defaultChecked
+            />
+            <AISettingCard 
+              icon={<MessageCircle size={18} />}
+              title="💡 J'ai remarqué quelque chose..."
+              description="Aperçu quotidien de vos notes"
+              defaultChecked
+            />
+            <AISettingCard 
+              icon={<Languages size={18} />}
+              title="Détection de langue"
+              description="Détecte automatiquement la langue de vos notes"
+              defaultChecked
+            />
+            <AISettingCard 
+              icon={<Tag size={18} />}
+              title="Suggestion des labels"
+              description="Suggère et applique des étiquettes automatiquement à vos notes"
+              defaultChecked
+            />
+            <AISettingCard 
+              icon={<History size={18} />}
+              title="Historique des notes"
+              description="Active les snapshots de versions et la restauration depuis History"
+              defaultChecked
+            />
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8 pt-6">
+          {/* Fréquence */}
+          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
+            <div className="space-y-1.5 text-left text-accent">
+              <h4 className="text-sm font-bold">Fréquence</h4>
+              <p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">Fréquence d'analyse des connexions</p>
+            </div>
+            <div className="space-y-6">
+              <label className="flex items-center gap-4 cursor-pointer group">
+                <input type="radio" name="freq" className="sr-only peer" defaultChecked />
+                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-accent flex items-center justify-center p-0.5 transition-all">
+                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-accent" />
+                </div>
+                <span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">Quotidienne</span>
+              </label>
+              <label className="flex items-center gap-4 cursor-pointer group">
+                <input type="radio" name="freq" className="sr-only peer" />
+                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-accent flex items-center justify-center p-0.5 transition-all">
+                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-accent" />
+                </div>
+                <span className="text-sm font-medium text-ink group-hover:opacity-70 transition-opacity">Hebdomadaire</span>
+              </label>
+            </div>
+          </div>
+
+          {/* Mode d'historique */}
+          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-10">
+            <div className="space-y-1.5 text-left text-accent">
+              <h4 className="text-sm font-bold">Mode d'historique</h4>
+              <p className="text-[10px] opacity-60 uppercase tracking-wider font-semibold">Gestion des snapshots</p>
+            </div>
+            <div className="space-y-6">
+              <label className="flex items-center gap-4 cursor-pointer group">
+                <input type="radio" name="hist" className="sr-only peer" defaultChecked />
+                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-accent flex items-center justify-center p-0.5 transition-all">
+                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-accent" />
+                </div>
+                <div className="space-y-0.5">
+                  <p className="text-sm font-bold text-ink">Manuel (bouton commit)</p>
+                  <p className="text-[10px] text-muted-ink">Créer des snapshots manuellement</p>
+                </div>
+              </label>
+              <label className="flex items-center gap-4 cursor-pointer group">
+                <input type="radio" name="hist" className="sr-only peer" />
+                <div className="w-5 h-5 rounded-full border-2 border-border peer-checked:border-accent flex items-center justify-center p-0.5 transition-all">
+                  <div className="w-full h-full rounded-full bg-transparent peer-checked:bg-accent" />
+                </div>
+                <div className="space-y-0.5">
+                  <p className="text-sm font-bold text-ink">Automatique (intelligent)</p>
+                  <p className="text-[10px] text-muted-ink">Snapshots automatiques avec détection</p>
+                </div>
+              </label>
+            </div>
+          </div>
+        </div>
+
+        {/* Mode Démo */}
+        <div className="bg-ochre/5 dark:bg-ochre/10 border border-ochre/20 rounded-2xl p-8 flex items-center justify-between group transition-all duration-300 hover:bg-ochre/10">
+          <div className="flex items-center gap-6">
+            <div className="p-3 bg-paper dark:bg-ochre/20 rounded-2xl text-ochre border border-ochre/30">
+              <FlaskConical size={20} />
+            </div>
+            <div className="space-y-1.5 text-left">
+              <h4 className="text-sm font-bold text-ink flex items-center gap-3">
+                🧪 Mode Démo
+              </h4>
+              <p className="text-[11px] text-muted-ink leading-relaxed font-medium">Accélère Memory Echo pour les tests. Les connexions apparaissent instantanément.</p>
+            </div>
+          </div>
+          <label className="relative inline-flex items-center cursor-pointer shrink-0 ml-4">
+            <input type="checkbox" className="sr-only peer" />
+            <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-ochre"></div>
+          </label>
+        </div>
+      </div>
+    </motion.div>
+  );
+};

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

@@ -0,0 +1,164 @@
+import React from 'react';
+import { Palette, Type, LayoutGrid, Maximize } from 'lucide-react';
+import { motion } from 'motion/react';
+
+const AppearanceSelect = ({ icon, title, description, options, defaultValue }: any) => (
+  <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl p-8 space-y-8 group transition-all duration-300 hover:shadow-xl hover:shadow-slate/5">
+    <div className="flex items-center gap-5">
+      <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border group-hover:scale-110 transition-transform duration-300">
+        {icon}
+      </div>
+      <div className="space-y-0.5 text-left">
+        <h4 className="text-base font-bold text-ink">{title}</h4>
+        <p className="text-[11px] text-concrete leading-tight">{description}</p>
+      </div>
+    </div>
+    
+    <div className="relative group/select">
+      <select 
+        defaultValue={defaultValue}
+        className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-4 text-sm outline-none focus:ring-1 ring-slate/20 appearance-none cursor-pointer text-ink font-bold transition-all hover:bg-white dark:hover:bg-black/60"
+      >
+        {options.map((opt: string) => (
+          <option key={opt}>{opt}</option>
+        ))}
+      </select>
+      <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none text-concrete group-hover/select:text-slate transition-colors">
+        <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+          <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+        </svg>
+      </div>
+    </div>
+  </div>
+);
+
+interface AppearanceTabProps {
+  accentColor: string;
+  onAccentColorChange: (color: string) => void;
+}
+
+const PRESET_COLORS = [
+  { name: 'Ochre Swiss', value: '#A47148' },
+  { name: 'Alpine Moss', value: '#4E594A' },
+  { name: 'Terracotta', value: '#B1523E' },
+  { name: 'Slate Steel', value: '#4A5568' },
+  { name: 'Midnight', value: '#1E293B' },
+  { name: 'Sage Leaf', value: '#7C8363' },
+  { name: 'Bordeaux', value: '#722F37' },
+  { name: 'Carbon', value: '#262626' },
+];
+
+export const AppearanceTab: React.FC<AppearanceTabProps> = ({ accentColor, onAccentColorChange }) => {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }} 
+      animate={{ opacity: 1, y: 0 }} 
+      className="space-y-16 pb-20"
+    >
+      <div className="space-y-10">
+        <h3 className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Personnaliser l'apparence de l'application</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-8">
+          {/* Accent Color Section */}
+          <div className="md:col-span-2 bg-white/40 dark:bg-white/5 border border-border rounded-3xl p-10 space-y-8 group transition-all duration-300 hover:shadow-xl hover:shadow-accent/5">
+            <div className="flex items-center justify-between">
+              <div className="flex items-center gap-5">
+                <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-accent border border-border group-hover:scale-110 transition-transform duration-300 shadow-sm">
+                  <Palette size={20} />
+                </div>
+                <div className="space-y-0.5 text-left">
+                  <h4 className="text-base font-bold text-ink">Couleur d'accentuation</h4>
+                  <p className="text-[11px] text-concrete leading-tight">Définissez la couleur principale de votre espace de travail</p>
+                </div>
+              </div>
+
+              <div className="flex items-center gap-3 bg-slate-50 dark:bg-black/20 px-4 py-2 rounded-xl border border-border/40">
+                <div className="w-4 h-4 rounded-full border border-border/60" style={{ backgroundColor: accentColor }} />
+                <span className="text-xs font-mono font-medium text-concrete uppercase tracking-widest">{accentColor}</span>
+              </div>
+            </div>
+
+            <div className="flex flex-wrap gap-4">
+              {PRESET_COLORS.map((color) => (
+                <button
+                  key={color.value}
+                  onClick={() => onAccentColorChange(color.value)}
+                  className={`relative w-12 h-12 rounded-2xl transition-all duration-300 hover:scale-110 flex items-center justify-center p-1 border-2 ${
+                    accentColor.toLowerCase() === color.value.toLowerCase() 
+                      ? 'border-accent shadow-lg shadow-accent/20' 
+                      : 'border-transparent hover:border-concrete/20'
+                  }`}
+                  title={color.name}
+                >
+                  <div 
+                    className="w-full h-full rounded-xl shadow-inner" 
+                    style={{ backgroundColor: color.value }} 
+                  />
+                  {accentColor.toLowerCase() === color.value.toLowerCase() && (
+                    <motion.div 
+                      layoutId="color-check"
+                      className="absolute inset-0 flex items-center justify-center text-white mix-blend-difference"
+                    >
+                      <Palette size={14} />
+                    </motion.div>
+                  )}
+                </button>
+              ))}
+              
+              <div className="h-12 w-px bg-border/40 mx-2" />
+
+              <div className="relative group/custom">
+                <input 
+                  type="color"
+                  value={accentColor}
+                  onChange={(e) => onAccentColorChange(e.target.value)}
+                  className="w-12 h-12 rounded-2xl cursor-pointer opacity-0 absolute inset-0 z-10"
+                />
+                <div className="w-12 h-12 rounded-2xl border-2 border-dashed border-concrete/30 flex items-center justify-center text-concrete transition-all group-hover/custom:border-accent group-hover/custom:text-accent">
+                   <Maximize size={16} />
+                </div>
+                <p className="absolute -bottom-6 left-1/2 -translate-x-1/2 text-[8px] font-bold uppercase tracking-widest opacity-0 group-hover/custom:opacity-40 whitespace-nowrap transition-opacity">Personnaliser</p>
+              </div>
+            </div>
+          </div>
+
+          <AppearanceSelect 
+            icon={<Palette size={20} />}
+            title="Thème"
+            description="Sélectionner le mode visuel"
+            options={['Clair', 'Sombre', 'Système']}
+            defaultValue="Clair"
+          />
+          <AppearanceSelect 
+            icon={<Type size={20} />}
+            title="Taille de la police"
+            description="Ajustez la lisibilité globale de l'interface"
+            options={['Petite', 'Moyenne', 'Grande']}
+            defaultValue="Moyenne"
+          />
+          <AppearanceSelect 
+            icon={<Type size={20} />}
+            title="Famille de polices"
+            description="La typographie définit l'âme de l'application"
+            options={['Inter', 'JetBrains Mono', 'Public Sans', 'Outfit']}
+            defaultValue="JetBrains Mono"
+          />
+          <AppearanceSelect 
+            icon={<LayoutGrid size={20} />}
+            title="Affichage des notes"
+            description="Gestion visuelle de la grille de composition"
+            options={['Cartes (grille)', 'Liste', 'Tableau']}
+            defaultValue="Cartes (grille)"
+          />
+          <AppearanceSelect 
+            icon={<Maximize size={20} />}
+            title="Taille des notes"
+            description="Structure de la mise en page des éléments"
+            options={['Taille uniforme', 'Variable (Masonry)']}
+            defaultValue="Taille uniforme"
+          />
+        </div>
+      </div>
+    </motion.div>
+  );
+};

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>
+  );
+};

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

@@ -0,0 +1,82 @@
+import React from 'react';
+import { Globe, Bell } from 'lucide-react';
+import { motion } from 'motion/react';
+
+export const GeneralTab: React.FC = () => {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }} 
+      animate={{ opacity: 1, y: 0 }} 
+      className="space-y-12"
+    >
+      <div className="space-y-4">
+        <h3 className="text-[10px] font-bold uppercase tracking-[0.3em] text-concrete">Paramètres généraux de l'application</h3>
+        
+        <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
+          {/* Langue */}
+          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
+                <Globe size={18} />
+              </div>
+              <div className="space-y-0.5">
+                <h4 className="text-base font-bold text-ink">Langue</h4>
+                <p className="text-[11px] text-concrete">Sélectionner une langue</p>
+              </div>
+            </div>
+            
+            <div className="relative group">
+              <select className="w-full bg-white/50 dark:bg-black/40 border border-border rounded-xl px-5 py-3.5 text-sm outline-none focus:ring-1 ring-accent/20 appearance-none cursor-pointer transition-all hover:bg-white dark:hover:bg-black/60 text-ink font-medium">
+                <option>Français</option>
+                <option>English</option>
+                <option>Español</option>
+              </select>
+              <div className="absolute right-5 top-1/2 -translate-y-1/2 pointer-events-none opacity-40 text-concrete">
+                <svg width="10" height="6" viewBox="0 0 10 6" fill="none" xmlns="http://www.w3.org/2000/svg">
+                  <path d="M1 1L5 5L9 1" stroke="currentColor" strokeWidth="1.5" strokeLinecap="round" strokeLinejoin="round"/>
+                </svg>
+              </div>
+            </div>
+          </div>
+
+          {/* Notifications */}
+          <div className="bg-white/40 dark:bg-white/5 border border-border rounded-xl p-8 space-y-6">
+            <div className="flex items-center gap-5">
+              <div className="p-3 bg-paper dark:bg-white/10 rounded-2xl text-slate border border-border">
+                <Bell size={18} />
+              </div>
+              <div className="space-y-0.5">
+                <h4 className="text-base font-bold text-ink">Notifications</h4>
+                <p className="text-[11px] text-concrete">Gérez vos préférences de notifications</p>
+              </div>
+            </div>
+            
+            <div className="space-y-6 divide-y divide-border/40 text-left">
+              <div className="flex items-center justify-between pt-0">
+                <div className="space-y-1">
+                  <p className="text-xs font-bold text-ink">Notifications par email</p>
+                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications importantes par email</p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" className="sr-only peer" />
+                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
+                </label>
+              </div>
+              
+              <div className="flex items-center justify-between pt-6">
+                <div className="space-y-1">
+                  <p className="text-xs font-bold text-ink">Notifications bureau</p>
+                  <p className="text-[10px] text-concrete leading-relaxed">Recevoir des notifications dans votre navigateur</p>
+                </div>
+                <label className="relative inline-flex items-center cursor-pointer">
+                  <input type="checkbox" className="sr-only peer" defaultChecked />
+                  <div className="w-11 h-6 bg-gray-200 dark:bg-white/10 rounded-full peer peer-checked:after:translate-x-[20px] peer-checked:after:border-white after:content-[''] after:absolute after:top-[4px] after:left-[4px] after:bg-white after:rounded-full after:h-4 after:w-4 after:transition-all duration-300 ease-in-out peer-checked:bg-slate"></div>
+                </label>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};

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

@@ -0,0 +1,92 @@
+import React from 'react';
+import { motion } from 'motion/react';
+import { User, Mail, Shield, LogOut, Camera, Bell } from 'lucide-react';
+
+interface ProfileTabProps {
+  onLogout: () => void;
+}
+
+export const ProfileTab: React.FC<ProfileTabProps> = ({ onLogout }) => {
+  return (
+    <motion.div 
+      initial={{ opacity: 0, y: 10 }} 
+      animate={{ opacity: 1, y: 0 }} 
+      exit={{ opacity: 0, y: -10 }}
+      className="space-y-12 max-w-2xl"
+    >
+      <div className="space-y-8">
+        <div className="flex items-center gap-8">
+          <div className="relative group">
+            <div className="w-24 h-24 rounded-[32px] bg-accent/10 border-2 border-accent/20 flex items-center justify-center text-accent overflow-hidden">
+               <User size={40} />
+            </div>
+            <button className="absolute -bottom-2 -right-2 p-2 bg-ink text-white rounded-xl shadow-lg border border-border opacity-0 group-hover:opacity-100 transition-all hover:scale-110">
+              <Camera size={14} />
+            </button>
+          </div>
+          <div className="space-y-1">
+            <h3 className="text-2xl font-serif font-bold text-ink">Sepehr</h3>
+            <p className="text-sm text-concrete font-light">Membre Pro depuis Mai 2024</p>
+          </div>
+        </div>
+
+        <div className="grid grid-cols-1 gap-6">
+          <div className="space-y-4">
+            <h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-concrete opacity-60">Informations personnelles</h4>
+            <div className="space-y-3">
+              <div className="p-4 bg-white/40 dark:bg-white/5 border border-border rounded-2xl flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <Mail size={18} className="text-concrete" />
+                  <div>
+                    <p className="text-[10px] uppercase font-bold text-concrete tracking-widest">Email</p>
+                    <p className="text-sm text-ink">sepehr1151@gmail.com</p>
+                  </div>
+                </div>
+                <button className="text-[10px] font-bold text-accent uppercase tracking-widest hover:underline">Modifier</button>
+              </div>
+
+              <div className="p-4 bg-white/40 dark:bg-white/5 border border-border rounded-2xl flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <Shield size={18} className="text-concrete" />
+                  <div>
+                    <p className="text-[10px] uppercase font-bold text-concrete tracking-widest">Sécurité</p>
+                    <p className="text-sm text-ink">Authentification à deux facteurs</p>
+                  </div>
+                </div>
+                <button className="text-[10px] font-bold text-accent uppercase tracking-widest hover:underline">Activer</button>
+              </div>
+            </div>
+          </div>
+
+          <div className="space-y-4">
+            <h4 className="text-[10px] font-bold uppercase tracking-[0.2em] text-concrete opacity-60">Préférences de compte</h4>
+            <div className="space-y-3">
+               <div className="p-4 bg-white/40 dark:bg-white/5 border border-border rounded-2xl flex items-center justify-between">
+                <div className="flex items-center gap-4">
+                  <Bell size={18} className="text-concrete" />
+                  <div>
+                    <p className="text-sm text-ink">Notification push</p>
+                    <p className="text-[10px] text-concrete font-light pr-4">Recevez des alertes pour vos rappels et activités IA.</p>
+                  </div>
+                </div>
+                <div className="w-10 h-5 bg-accent rounded-full relative p-1 cursor-pointer">
+                  <div className="absolute right-1 top-1 w-3 h-3 bg-white rounded-full" />
+                </div>
+              </div>
+            </div>
+          </div>
+
+          <div className="pt-8 border-t border-border/40">
+            <button 
+              onClick={onLogout}
+              className="flex items-center gap-3 px-6 py-3 bg-rose-50 dark:bg-rose-500/10 text-rose-600 rounded-xl font-bold uppercase tracking-widest text-[10px] hover:bg-rose-100 transition-colors"
+            >
+              <LogOut size={16} />
+              Déconnexion
+            </button>
+          </div>
+        </div>
+      </div>
+    </motion.div>
+  );
+};

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

@@ -0,0 +1,61 @@
+import React from 'react';
+import { Settings, Sparkles, Palette, User, Database, Code, Info, CreditCard, Menu } from 'lucide-react';
+import { motion } from 'motion/react';
+import { SettingsTab } from '../../types';
+
+interface SettingsHeaderProps {
+  activeTab: SettingsTab;
+  setActiveTab: (tab: SettingsTab) => void;
+  onOpenSidebar?: () => void;
+}
+
+export const SettingsHeader: React.FC<SettingsHeaderProps> = ({ activeTab, setActiveTab, onOpenSidebar }) => {
+  const tabs = [
+    { id: 'general', label: 'Paramètres généraux', icon: <Settings size={14} /> },
+    { id: 'ai', label: 'Paramètres IA', icon: <Sparkles size={14} /> },
+    { id: 'billing', label: 'Facturation', icon: <CreditCard size={14} /> },
+    { id: 'appearance', label: 'Apparence', icon: <Palette size={14} /> },
+    { id: 'profile', label: 'Profil', icon: <User size={14} /> },
+    { id: 'data', label: 'Gestion des données', icon: <Database size={14} /> },
+    { id: 'mcp', label: 'Paramètres MCP', icon: <Code size={14} /> },
+    { id: 'about', label: 'À propos', icon: <Info size={14} /> },
+  ];
+
+  return (
+    <header className="px-6 sm:px-12 pt-12 sm:pt-20 pb-16 space-y-12 relative">
+      <div className="flex items-center gap-4">
+        <button 
+          onClick={onOpenSidebar}
+          className="lg:hidden p-2 -ml-2 text-ink hover:bg-black/5 rounded-lg transition-colors"
+        >
+          <Menu size={20} />
+        </button>
+        <div className="space-y-4">
+          <h1 className="text-4xl sm:text-[64px] font-serif text-ink tracking-tight leading-none italic font-medium">Paramètres</h1>
+          <p className="text-[10px] font-bold uppercase tracking-[0.4em] text-concrete opacity-60">Configuration & Préférences</p>
+        </div>
+      </div>
+
+      <nav className="flex items-center gap-1 border-b border-border/40 pb-px overflow-x-auto no-scrollbar">
+        {tabs.map((tab) => (
+          <button
+            key={tab.id}
+            onClick={() => setActiveTab(tab.id as SettingsTab)}
+            className={`flex items-center gap-2.5 px-6 py-5 text-[10px] font-bold uppercase tracking-[0.18em] transition-all relative whitespace-nowrap
+              ${activeTab === tab.id ? 'text-ink' : 'text-concrete hover:text-ink/60'}`}
+          >
+            <span className={activeTab === tab.id ? 'text-ink' : 'text-concrete'}>{tab.icon}</span>
+            {tab.label}
+            {activeTab === tab.id && (
+              <motion.div 
+                layoutId="activeSettingsTabLine" 
+                className="absolute bottom-0 left-0 right-0 h-0.5 bg-ink" 
+                transition={{ type: 'spring', bounce: 0.1, duration: 0.8 }}
+              />
+            )}
+          </button>
+        ))}
+      </nav>
+    </header>
+  );
+};