feat: rewrite all dashboard views with editorial design

Translate page: editorial dropzone (rounded-[40px]), config panel,
progress stepper, download button, Momento promo banner.
Profile page: pill tabs, dark subscription card, usage bars, language grid.
Context page: preset grid (rounded-[32px]), instruction/glossary textareas.
API keys page: editorial-card with production key display.
Glossaries page: editorial-card grid with hover lift.
Pricing page: 5-column grid, colored headers, plan badges.

All pages use editorial design system: accent-pill, editorial-card,
premium-button, brand colors, dark mode support.

Co-Authored-By: Claude Opus 4.7 <noreply@anthropic.com>

frontend/src/app/dashboard/context/page.tsx

@@ -1,25 +1,26 @@
 'use client';
 
 import { useState, useEffect } from 'react';
-import { Card, CardContent, CardDescription, CardHeader, CardTitle } from '@/components/ui/card';
-import { Button } from '@/components/ui/button';
-import { Textarea } from '@/components/ui/textarea';
+import {
+  Zap, Save, Brain, BookOpen, Trash2, Crown, Loader2,
+  Wrench, HardHat, Monitor, Scale, Stethoscope, BarChart3,
+  Megaphone, Car, MessageSquare, Database,
+} from 'lucide-react';
 import { useTranslationStore } from '@/lib/store';
 import { API_BASE } from '@/lib/config';
 import { useI18n } from '@/lib/i18n';
-import { Save, Loader2, Brain, BookOpen, Sparkles, Trash2, Zap, Crown, Lock } from 'lucide-react';
 import Link from 'next/link';
 import { cn } from '@/lib/utils';
 
 const PRESETS = [
-  { key: 'hvac', icon: '🔧', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation' },
-  { key: 'construction', icon: '🏗️', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes' },
-  { key: 'it', icon: '💻', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps' },
-  { key: 'legal', icon: '⚖️', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux' },
-  { key: 'medical', icon: '🏥', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic' },
-  { key: 'finance', icon: '📊', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité' },
-  { key: 'marketing', icon: '📢', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics' },
-  { key: 'automotive', icon: '🚗', title: 'Automobile', desc: 'Motorisation, ADAS, homologation' },
+  { key: 'hvac', title: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: Wrench },
+  { key: 'construction', title: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: HardHat },
+  { key: 'it', title: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: Monitor },
+  { key: 'legal', title: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: Scale },
+  { key: 'medical', title: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: Stethoscope },
+  { key: 'finance', title: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: BarChart3 },
+  { key: 'marketing', title: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: Megaphone },
+  { key: 'automotive', title: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: Car },
 ];
 
 export default function ContextGlossaryPage() {
@@ -88,107 +89,137 @@ export default function ContextGlossaryPage() {
   if (!isPro) {
     return (
       <div className="flex flex-col items-center justify-center min-h-[60vh] gap-6 p-6">
-        <div className="flex items-center justify-center w-20 h-20 rounded-2xl bg-violet-100 dark:bg-violet-900/30">
-          <Crown className="w-10 h-10 text-violet-600 dark:text-violet-400" />
+        <div className="w-20 h-20 bg-brand-dark dark:bg-white/10 rounded-[32px] flex items-center justify-center text-brand-accent shadow-2xl">
+          <Crown className="w-10 h-10" />
         </div>
         <div className="text-center space-y-2 max-w-md">
-          <h1 className="text-2xl font-bold text-foreground">{t('context.proTitle')}</h1>
-          <p className="text-muted-foreground">
-            {t('context.proDesc')}
-          </p>
+          <h1 className="text-3xl font-black uppercase tracking-tighter text-brand-dark dark:text-white">{t('context.proTitle')}</h1>
+          <p className="text-brand-dark/40 dark:text-white/40 font-medium">{t('context.proDesc')}</p>
         </div>
-        <Button asChild size="lg">
-          <Link href="/pricing">
-            <Crown className="w-4 h-4 me-2" /> {t('context.viewPlans')}
-          </Link>
-        </Button>
+        <Link href="/pricing">
+          <button className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl flex items-center gap-2">
+            <Crown size={14} /> {t('context.viewPlans')}
+          </button>
+        </Link>
       </div>
     );
   }
 
   return (
-    <div className="flex flex-col gap-6 p-6 lg:p-8 max-w-3xl">
-      <div>
-        <h1 className="text-2xl font-bold text-foreground">{t('context.title')}</h1>
-        <p className="text-sm text-muted-foreground mt-1">
-          {t('context.subtitle')}
-        </p>
+    <div className="max-w-5xl mx-auto w-full p-6 lg:p-8">
+      {/* ── Editorial Header ───────────────────────────────────── */}
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit italic">{t('context.presets.title')}</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none text-brand-dark dark:text-white">
+          {t('context.title')}
+        </h1>
+        <p className="text-brand-dark/40 dark:text-white/40 font-medium max-w-2xl">{t('context.subtitle')}</p>
       </div>
 
-      {/* Presets */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base flex items-center gap-2">
-            <Zap className="w-4 h-4 text-accent" /> {t('context.presets.title')}
-          </CardTitle>
-          <CardDescription>{t('context.presets.desc')}</CardDescription>
-        </CardHeader>
-        <CardContent>
-          <div className="grid grid-cols-2 sm:grid-cols-4 gap-2">
-            {PRESETS.map(p => (
-              <button
-                key={p.key}
-                onClick={() => handleApplyPreset(p.key)}
-                className="flex flex-col items-center gap-1 p-3 rounded-xl border border-border text-center transition-colors hover:border-primary/40 hover:bg-primary/5"
-              >
-                <span className="text-2xl">{p.icon}</span>
-                <span className="text-xs font-medium text-foreground leading-tight">{p.title}</span>
-                <span className="text-[10px] text-muted-foreground leading-tight">{p.desc}</span>
-              </button>
-            ))}
+      <div className="space-y-12">
+        {/* ── Professional Presets ──────────────────────────────── */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+          <div className="flex items-center gap-4 mb-8 text-brand-accent">
+            <Zap size={20} />
+            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+              {t('context.presets.title')}
+            </h3>
           </div>
-        </CardContent>
-      </Card>
+          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-12 font-medium">{t('context.presets.desc')}</p>
 
-      {/* System Prompt */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base flex items-center gap-2">
-            <Brain className="w-4 h-4 text-primary" /> {t('context.instructions.title')}
-          </CardTitle>
-          <CardDescription>{t('context.instructions.desc')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <Textarea
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {PRESETS.map((p) => {
+              const Icon = p.icon;
+              return (
+                <button
+                  key={p.key}
+                  onClick={() => handleApplyPreset(p.key)}
+                  className="p-6 bg-brand-muted dark:bg-white/5 hover:bg-brand-dark dark:hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 dark:border-white/10 hover:shadow-2xl hover:-translate-y-1"
+                >
+                  <div className="flex justify-center mb-4 text-brand-dark group-hover:text-brand-accent group-hover:scale-125 transition-all">
+                    <Icon size={24} />
+                  </div>
+                  <h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark dark:text-white group-hover:text-white mb-2">
+                    {p.title}
+                  </h4>
+                  <p className="text-[8px] text-brand-dark/30 dark:text-white/30 group-hover:text-white/40 font-bold uppercase tracking-widest leading-relaxed">
+                    {p.desc}
+                  </p>
+                </button>
+              );
+            })}
+          </div>
+        </section>
+
+        {/* ── Context Instructions ──────────────────────────────── */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+          <div className="flex items-center gap-4 mb-8 text-brand-accent">
+            <MessageSquare size={20} />
+            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+              {t('context.instructions.title')}
+            </h3>
+          </div>
+          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.instructions.desc')}</p>
+          <textarea
             value={localSettings.systemPrompt}
             onChange={e => setLocalSettings({ ...localSettings, systemPrompt: e.target.value })}
             placeholder={t('context.instructions.placeholder')}
-            className="min-h-[140px] resize-y"
+            className="w-full h-48 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
           />
-        </CardContent>
-      </Card>
+          <div className="flex justify-end mt-6 gap-4">
+            <button
+              onClick={handleClear}
+              className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all"
+            >
+              <Trash2 size={12} className="inline mr-2" />{t('context.clearAll')}
+            </button>
+            <button
+              onClick={handleSave}
+              disabled={isSaving}
+              className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
+            >
+              {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+              {isSaving ? t('context.saving') : t('context.save')}
+            </button>
+          </div>
+        </section>
 
-      {/* Glossary */}
-      <Card>
-        <CardHeader className="pb-3">
-          <CardTitle className="text-base flex items-center gap-2">
-            <BookOpen className="w-4 h-4 text-emerald-500" /> {t('context.glossary.title')}
-          </CardTitle>
-          <CardDescription>{t('context.glossary.desc')}</CardDescription>
-        </CardHeader>
-        <CardContent className="space-y-3">
-          <Textarea
+        {/* ── Technical Glossary ────────────────────────────────── */}
+        <section className="editorial-card p-10 lg:p-12 bg-white dark:bg-[#141414] border-none shadow-editorial">
+          <div className="flex items-center gap-4 mb-8 text-brand-accent">
+            <Database size={20} />
+            <h3 className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark dark:text-white">
+              {t('context.glossary.title')}
+            </h3>
+          </div>
+          <p className="text-sm text-brand-dark/40 dark:text-white/40 mb-10 font-medium">{t('context.glossary.desc')}</p>
+          <textarea
             value={localSettings.glossary}
             onChange={e => setLocalSettings({ ...localSettings, glossary: e.target.value })}
             placeholder={"pression statique=static pressure\nrécupérateur de chaleur=heat recovery unit"}
-            className="min-h-[250px] resize-y font-mono text-sm"
+            className="w-full h-64 p-8 bg-brand-muted dark:bg-white/5 rounded-[32px] border border-black/5 dark:border-white/10 text-sm font-mono focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
           />
-          {localSettings.glossary && (
-            <p className="text-xs text-muted-foreground">
-              {localSettings.glossary.split('\n').filter(l => l.includes('=')).length} {t('context.glossary.terms')}
-            </p>
-          )}
-        </CardContent>
-      </Card>
-
-      {/* Actions */}
-      <div className="flex gap-3 justify-end">
-        <Button variant="ghost" onClick={handleClear} className="text-destructive hover:text-destructive/80 hover:bg-destructive/10">
-          <Trash2 className="me-1.5 h-4 w-4" /> {t('context.clearAll')}
-        </Button>
-        <Button onClick={handleSave} disabled={isSaving}>
-          {isSaving ? <><Loader2 className="me-1.5 h-4 w-4 animate-spin" />{t('context.saving')}</> : <><Save className="me-1.5 h-4 w-4" />{t('context.save')}</>}
-        </Button>
+          <div className="flex flex-col sm:flex-row justify-between items-start sm:items-center mt-6 gap-4">
+            <span className="text-[9px] text-brand-dark/20 dark:text-white/20 font-black uppercase tracking-widest">
+              {localSettings.glossary
+                ? `${localSettings.glossary.split('\n').filter(l => l.includes('=')).length} ${t('context.glossary.terms')}`
+                : `0 ${t('context.glossary.terms')}`}
+            </span>
+            <div className="flex gap-4">
+              <button className="px-8 py-3 bg-brand-muted dark:bg-white/5 text-brand-dark/40 dark:text-white/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark dark:hover:text-white transition-all">
+                {t('context.clearAll')}
+              </button>
+              <button
+                onClick={handleSave}
+                disabled={isSaving}
+                className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3 disabled:opacity-50"
+              >
+                {isSaving ? <Loader2 size={14} className="animate-spin" /> : <Save size={14} />}
+                {isSaving ? t('context.saving') : t('context.save')}
+              </button>
+            </div>
+          </div>
+        </section>
       </div>
     </div>
   );