design: apply Architectural Minimalist style to all Settings pages

- settings/layout: serif h1 title + uppercase tracking subtitle, matching Agents page
- SettingsNav: uppercase tracking-wider tabs with foreground underline on active
- All settings pages (general, ai, appearance, profile, mcp, about, data):
  remove duplicate h1 (now in layout header), replace with uppercase section label
- notes.ts: decouple history guards from global userAISettings
- note-document-info-panel: add 'Save version' button with loading feedback

memento-note/app/(main)/settings/about/page.tsx

@@ -11,10 +11,9 @@ export default function AboutSettingsPage() {
 
   return (
     <div className="space-y-8">
-      <div>
+      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('about.title')}</h1>
+        {t('about.description')}
-        <p className="text-muted-foreground mt-1">{t('about.description')}</p>
+      </p>
-      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {/* App info */}

memento-note/app/(main)/settings/ai/ai-settings-header.tsx

@@ -6,9 +6,8 @@ export function AISettingsHeader() {
   const { t } = useLanguage()
 
   return (
-    <div>
+    <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-      <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('aiSettings.title')}</h1>
+      {t('aiSettings.description')}
-      <p className="text-muted-foreground mt-1">{t('aiSettings.description')}</p>
+    </p>
-    </div>
   )
 }

memento-note/app/(main)/settings/appearance/appearance-settings-client.tsx

@@ -163,10 +163,10 @@ export function AppearanceSettingsClient({
 
   return (
     <div className="space-y-8">
-      <div>
+      {/* Section label — architectural style */}
-        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('appearance.title')}</h1>
+      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-        <p className="text-muted-foreground mt-1">{t('appearance.description')}</p>
+        {t('appearance.description') || "Personnalisez l'interface"}
-      </div>
+      </p>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         <SelectCard

memento-note/app/(main)/settings/data/page.tsx

@@ -118,11 +118,10 @@ export default function DataSettingsPage() {
   }
 
   return (
-    <div className="max-w-4xl mx-auto space-y-8 p-6">
+    <div className="space-y-8">
-      <div className="space-y-1">
+      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-        <h1 className="text-3xl font-bold tracking-tight text-foreground">{t('dataManagement.title')}</h1>
+        {t('dataManagement.toolsDescription')}
-        <p className="text-muted-foreground">{t('dataManagement.toolsDescription')}</p>
+      </p>
-      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {/* Export card */}

memento-note/app/(main)/settings/general/general-settings-client.tsx

@@ -50,11 +50,9 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
 
   return (
     <div className="space-y-8">
-      {/* Page title */}
+      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-      <div>
+        {t('generalSettings.description')}
-        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('generalSettings.title')}</h1>
+      </p>
-        <p className="text-muted-foreground mt-1">{t('generalSettings.description')}</p>
-      </div>
 
       {/* 2-column card grid */}
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">

memento-note/app/(main)/settings/layout.tsx

@@ -9,17 +9,29 @@ export default function SettingsLayout({
 }) {
     return (
         <div className="flex flex-col h-full">
-            {/* Horizontal Tab Navigation */}
+            {/* Architectural header — matches Agents page */}
-            <header className="flex items-center gap-1 px-8 bg-background border-b border-border shrink-0">
+            <header className="flex flex-col px-12 pt-10 pb-0 border-b border-border/40 shrink-0">
-                <SettingsNav />
+                <div className="flex items-end justify-between mb-6">
+                    <div>
+                        <h1 className="font-memento-serif text-4xl font-medium tracking-tight text-foreground leading-tight">
+                            Paramètres
+                        </h1>
+                        <p className="text-[11px] text-muted-foreground uppercase tracking-[0.2em] font-bold mt-2">
+                            Configuration &amp; Préférences
+                        </p>
+                    </div>
+                </div>
+                {/* Tab nav flush to the border-bottom of header */}
+                <SettingsNav className="-mb-px" />
             </header>
 
             {/* Page Content */}
             <div className="flex-1 overflow-y-auto">
-                <div className="max-w-5xl mx-auto px-8 py-8 space-y-8">
+                <div className="max-w-5xl mx-auto px-12 py-10 space-y-8">
                     {children}
                 </div>
             </div>
         </div>
     )
 }
+

memento-note/app/(main)/settings/mcp/page.tsx

@@ -14,10 +14,9 @@ export default async function McpSettingsPage() {
 
   return (
     <div className="space-y-8">
-      <div>
+      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-        <h1 className="text-2xl font-bold tracking-tight text-foreground">Paramètres MCP</h1>
+        Gérez vos clés API et serveurs MCP connectés.
-        <p className="text-muted-foreground mt-1">Gérez vos clés API et serveurs MCP connectés.</p>
+      </p>
-      </div>
       <McpSettingsPanel initialKeys={keys} serverStatus={serverStatus} />
     </div>
   )

memento-note/app/(main)/settings/profile/profile-form.tsx

@@ -13,10 +13,9 @@ export function ProfileForm({ user, userAISettings }: { user: any; userAISetting
 
   return (
     <div className="space-y-8">
-      <div>
+      <p className="text-[11px] font-bold uppercase tracking-[0.2em] text-muted-foreground">
-        <h1 className="text-2xl font-bold tracking-tight text-foreground">{t('profile.title')}</h1>
+        {t('profile.description')}
-        <p className="text-muted-foreground mt-1">{t('profile.description')}</p>
+      </p>
-      </div>
 
       <div className="grid grid-cols-1 md:grid-cols-2 gap-6">
         {/* Profile info card */}

memento-note/components/settings/SettingsNav.tsx

@@ -34,16 +34,16 @@ export function SettingsNav({ className }: SettingsNavProps) {
   const isActive = (href: string) => pathname === href || pathname.startsWith(href + '/')
 
   return (
-    <nav className={cn('flex items-center gap-1', className)}>
+    <nav className={cn('flex items-center gap-6 border-b border-border/40', className)}>
       {sections.map((section) => (
         <Link
           key={section.id}
           href={section.href}
           className={cn(
-            'flex items-center gap-2 px-3 py-3 text-sm font-medium border-b-2 transition-colors whitespace-nowrap',
+            'flex items-center gap-2 pb-3 pt-4 text-xs font-semibold uppercase tracking-wider transition-colors whitespace-nowrap border-b-2',
             isActive(section.href)
-              ? 'border-primary text-primary'
+              ? 'border-primary text-foreground'
-              : 'border-transparent text-muted-foreground hover:text-foreground hover:border-border'
+              : 'border-transparent text-muted-foreground hover:text-foreground'
           )}
         >
           {section.icon}