fix: integrate deepseek, resolve silent google api errors, fix google cloud keys

wordly.art---traduction-de-documents-2/src/components/Dashboard.tsx

@@ -0,0 +1,721 @@
+import React, { useState } from 'react';
+import { 
+  FileText, 
+  User, 
+  LogOut, 
+  Globe, 
+  Upload, 
+  Download, 
+  Zap, 
+  Activity, 
+  ChevronDown, 
+  Moon, 
+  CheckCircle2,
+  Clock,
+  Presentation,
+  ArrowRight,
+  Crown,
+  Layers,
+  Book,
+  Key,
+  FileCode,
+  MessageSquare,
+  Layout,
+  Database,
+  Cpu,
+  Eraser,
+  Save,
+  Library,
+  Wrench,
+  HardHat,
+  Monitor,
+  Scale,
+  Stethoscope,
+  BarChart3,
+  Megaphone,
+  Car
+} from 'lucide-react';
+import { motion } from 'motion/react';
+import { useTranslation } from 'react-i18next';
+
+type View = 'translate' | 'profile' | 'context' | 'glossary' | 'api-keys';
+
+export const Dashboard: React.FC<{ onLogout: () => void }> = ({ onLogout }) => {
+  const { t } = useTranslation();
+  const [currentView, setCurrentView] = useState<View>('translate');
+  const [profileTab, setProfileTab] = useState<'account' | 'subscription' | 'preferences'>('account');
+
+  return (
+    <div className="flex h-screen bg-brand-bg text-brand-dark font-sans">
+      {/* Sidebar */}
+      <aside className="w-72 border-r border-black/5 bg-white flex flex-col shadow-editorial">
+        <div className="p-8">
+          <div className="flex items-center gap-4 group cursor-pointer" onClick={() => setCurrentView('translate')}>
+            <div className="w-10 h-10 bg-brand-dark rounded-xl flex items-center justify-center text-white font-bold text-2xl shadow-lg transition-transform group-hover:rotate-12">
+              W
+            </div>
+            <span className="text-xl font-black tracking-tighter uppercase">Office Translator</span>
+          </div>
+        </div>
+
+        <nav className="flex-1 px-4 space-y-1 mt-4">
+          <button 
+            onClick={() => setCurrentView('translate')}
+            className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'translate' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
+          >
+            <FileText size={18} />
+            Traduire
+          </button>
+          <button 
+            onClick={() => setCurrentView('profile')}
+            className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'profile' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
+          >
+            <User size={18} />
+            Mon Profil
+          </button>
+          <button 
+            onClick={() => setCurrentView('context')}
+            className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'context' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
+          >
+            <Book size={18} />
+            Contexte
+          </button>
+          <button 
+            onClick={() => setCurrentView('api-keys')}
+            className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'api-keys' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
+          >
+            <Key size={18} />
+            Clés API
+          </button>
+          <button 
+            onClick={() => setCurrentView('glossary')}
+            className={`w-full flex items-center gap-4 px-6 py-4 rounded-2xl text-[11px] font-black uppercase tracking-[0.2em] transition-all ${currentView === 'glossary' ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/40 hover:bg-brand-muted hover:text-brand-dark'}`}
+          >
+            <Library size={18} />
+            Glossaires
+          </button>
+        </nav>
+
+        <div className="p-6 border-t border-black/5">
+          <div className="flex items-center justify-between group p-4 rounded-2xl hover:bg-brand-muted/50 transition-all">
+            <div className="flex items-center gap-3 overflow-hidden">
+              <div className="w-10 h-10 bg-brand-dark rounded-xl flex items-center justify-center text-white text-[11px] font-bold shadow-sm transition-transform group-hover:rotate-6">SR</div>
+              <div className="overflow-hidden">
+                <p className="text-[11px] font-black uppercase tracking-tight truncate">Sepehr Ramezani</p>
+                <p className="text-[9px] text-brand-dark/40 font-bold truncate">sepehr1151@gmail.com</p>
+                <div className="flex items-center gap-2 mt-1">
+                  <span className="accent-pill !px-1.5 !py-0 text-[7px] uppercase tracking-widest bg-brand-accent/10 border-brand-accent/20">pro</span>
+                  <button className="text-brand-dark/20 hover:text-brand-dark transition-colors"><Moon size={10} /></button>
+                </div>
+              </div>
+            </div>
+            <button 
+              onClick={onLogout}
+              className="p-2 text-brand-dark/20 hover:text-red-500 transition-colors"
+              title="Déconnexion"
+            >
+              <LogOut size={16} />
+            </button>
+          </div>
+        </div>
+      </aside>
+
+      {/* Main Content */}
+      <main className="flex-1 flex flex-col overflow-hidden">
+        {/* Topbar */}
+        <header className="h-20 border-b border-black/5 bg-white/50 backdrop-blur-md px-12 flex items-center justify-between">
+          <span className="text-[10px] font-bold uppercase tracking-[0.4em] text-brand-dark/30">Interface de traduction</span>
+          <div className="flex items-center gap-6">
+            <button className="p-3 text-brand-dark/30 hover:text-brand-dark transition-colors bg-brand-muted rounded-xl"><Moon size={18} /></button>
+            <div className="h-6 w-[1px] bg-black/10"></div>
+            <div className="flex items-center gap-4">
+                <div className="text-right">
+                    <p className="text-[10px] font-black uppercase leading-none">Premium Access</p>
+                    <p className="text-[9px] text-brand-accent font-bold uppercase tracking-widest mt-1">Status: Active</p>
+                </div>
+                <div className="w-10 h-10 rounded-xl bg-brand-dark flex items-center justify-center text-white text-xs font-black">SR</div>
+            </div>
+          </div>
+        </header>
+
+        {/* View Content */}
+        <div className="flex-1 overflow-y-auto p-16">
+          {currentView === 'translate' && <TranslateView />}
+          {currentView === 'profile' && <ProfileView tab={profileTab} setTab={setProfileTab} />}
+          {currentView === 'context' && <ContextView />}
+          {currentView === 'api-keys' && <ApiKeysView />}
+          {currentView === 'glossary' && <GlossaryMainView />}
+        </div>
+      </main>
+    </div>
+  );
+};
+
+const TranslateView = () => {
+  const [file, setFile] = useState<File | null>(null);
+  const [status, setStatus] = useState<'idle' | 'uploading' | 'translating' | 'done'>('idle');
+  const [progress, setProgress] = useState(0);
+
+  const handleStart = () => {
+    setStatus('uploading');
+    let p = 0;
+    const interval = setInterval(() => {
+      p += 5;
+      setProgress(p);
+      if (p >= 25) setStatus('translating');
+      if (p >= 100) {
+        clearInterval(interval);
+        setStatus('done');
+      }
+    }, 150);
+  };
+
+  if (status !== 'idle') {
+    return <StatusOverlay status={status} progress={progress} onReset={() => setStatus('idle')} />;
+  }
+
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit">Nouveau projet</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Traduire un document</h1>
+        <p className="text-brand-dark/40 font-medium">Importez un fichier et choisissez la langue cible</p>
+      </div>
+
+      <div className="grid lg:grid-cols-12 gap-12">
+        <div className="lg:col-span-8">
+          <div className="bg-white border-2 border-dashed border-brand-accent/20 rounded-[40px] p-20 flex flex-col items-center justify-center text-center group cursor-pointer hover:border-brand-accent transition-all shadow-editorial">
+            <div className="w-20 h-20 bg-brand-muted rounded-3xl flex items-center justify-center text-brand-accent group-hover:scale-110 group-hover:bg-brand-dark group-hover:text-white transition-all mb-8 shadow-sm">
+              <Upload size={32} />
+            </div>
+            <h3 className="text-2xl font-black uppercase tracking-tight mb-4 text-brand-dark">Glissez-déposez ici</h3>
+            <p className="text-sm text-brand-dark/40 mb-12 font-medium">Fichiers DOCX, XLSX, PPTX ou PDF supportés</p>
+            <div className="flex flex-wrap justify-center gap-4">
+              {['Word', 'Excel', 'Slides', 'PDF'].map(f => (
+                <span key={f} className="flex items-center gap-3 px-4 py-2 bg-brand-muted rounded-xl text-[10px] font-black uppercase tracking-widest text-brand-dark/60 border border-transparent hover:border-brand-accent/30 transition-all">
+                  <FileText size={12} className="text-brand-accent"/> {f}
+                </span>
+              ))}
+            </div>
+          </div>
+        </div>
+
+        <div className="lg:col-span-4 space-y-8">
+          <div className="editorial-card p-10 bg-white border-none">
+            <h4 className="text-[10px] font-black uppercase tracking-[0.3em] mb-10 text-brand-dark/30 border-b border-black/5 pb-6">Configuration</h4>
+            
+            <div className="space-y-8">
+              <div>
+                <label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-3">Langue source</label>
+                <div className="w-full p-4 bg-brand-muted rounded-2xl border border-transparent flex items-center justify-between cursor-pointer hover:border-brand-accent/20 transition-all">
+                  <span className="text-[11px] font-black uppercase tracking-widest">Auto-détection</span>
+                  <ChevronDown size={16} className="text-brand-accent" />
+                </div>
+              </div>
+              
+              <div>
+                <label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-3">Langue cible</label>
+                <div className="w-full p-4 bg-brand-muted rounded-2xl border border-brand-accent/30 flex items-center justify-between cursor-pointer hover:border-brand-accent transition-all ring-2 ring-brand-accent/5">
+                  <span className="text-[11px] font-black uppercase tracking-widest text-brand-dark">Français</span>
+                  <ChevronDown size={16} className="text-brand-accent" />
+                </div>
+              </div>
+
+              <div>
+                <label className="text-[9px] font-black text-brand-dark/40 uppercase tracking-[0.2em] block mb-6">Moteur de traduction</label>
+                <div className="space-y-4">
+                  <div className="p-5 border-2 border-brand-accent bg-brand-accent/5 rounded-2xl flex items-start gap-4">
+                    <div className="w-5 h-5 rounded-full border-2 border-brand-accent bg-white flex items-center justify-center mt-0.5 shrink-0">
+                        <div className="w-2.5 h-2.5 bg-brand-accent rounded-full" />
+                    </div>
+                    <div>
+                      <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark mb-1 leading-none">Intelligence Visuelle</p>
+                      <p className="text-[9px] text-brand-dark/50 font-bold uppercase tracking-widest leading-relaxed">Maintien strict du formatage</p>
+                    </div>
+                  </div>
+                  
+                  <div className="p-5 border border-black/5 bg-brand-muted/30 rounded-2xl flex items-start gap-4 grayscale opacity-40">
+                    <div className="w-5 h-5 rounded-full border-2 border-black/10 bg-white mt-0.5 shrink-0" />
+                    <div>
+                      <div className="flex items-center gap-2 mb-1">
+                        <p className="text-[11px] font-black uppercase tracking-tight text-brand-dark leading-none">GPT-4o Enhanced</p>
+                        <span className="text-[8px] bg-brand-dark text-white px-2 py-0.5 rounded-full font-black uppercase tracking-widest">pro</span>
+                      </div>
+                      <p className="text-[9px] text-brand-dark/50 font-bold uppercase tracking-widest">Traduction créative contextualisée</p>
+                    </div>
+                  </div>
+                </div>
+              </div>
+
+              <button 
+                onClick={handleStart}
+                className="premium-button w-full py-6 text-[11px] uppercase tracking-[0.3em] flex items-center justify-center gap-3 !rounded-2xl"
+              >
+                Lancer la traduction <ArrowRight size={18} className="text-brand-accent" />
+              </button>
+            </div>
+          </div>
+          
+          <div className="flex justify-between px-6 text-[9px] font-black uppercase tracking-[0.2em] text-brand-dark/20">
+            <span className="flex items-center gap-2">✓ Rétention zéro</span>
+            <span className="flex items-center gap-2">🕒 Privacy auto</span>
+          </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const StatusOverlay = ({ status, progress, onReset }: { status: string, progress: number, onReset: () => void }) => {
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit italic">Traitement en cours</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Analyse IA Active</h1>
+        <p className="text-brand-dark/40 font-medium">Votre mise en page est en cours de préservation</p>
+      </div>
+
+      <div className="grid lg:grid-cols-12 gap-12">
+        <div className="lg:col-span-8">
+          <div className="editorial-card p-16 h-full border-none shadow-editorial bg-white">
+             {status === 'done' ? (
+                <div className="h-full flex flex-col">
+                  <div className="p-8 bg-brand-accent/5 border border-brand-accent/10 rounded-[32px] flex items-center justify-between mb-16 shadow-inner">
+                    <div className="flex items-center gap-6">
+                      <div className="w-14 h-14 bg-brand-accent rounded-full flex items-center justify-center text-white shadow-xl">
+                        <CheckCircle2 size={28} />
+                      </div>
+                      <div>
+                        <p className="text-[13px] font-black uppercase tracking-[0.1em] text-brand-dark">Traduction terminée</p>
+                        <p className="text-[10px] text-brand-dark/40 font-bold uppercase mt-1 tracking-widest">super_complex_translated.pptx</p>
+                      </div>
+                    </div>
+                    <span className="px-5 py-2 bg-white rounded-full text-[9px] font-black uppercase tracking-widest text-brand-accent border border-brand-accent/20 shadow-sm">✓ Qualité Maître</span>
+                  </div>
+
+                  <div className="flex-1 flex flex-col items-center justify-center py-20 bg-brand-muted/20 rounded-[40px] border border-black/5">
+                    <button className="premium-button px-24 py-6 text-xl !rounded-full flex items-center gap-6 mb-8 group">
+                      <Download size={28} className="group-hover:translate-y-1 transition-transform" />
+                      Télécharger
+                    </button>
+                    <button 
+                      onClick={onReset}
+                      className="text-[10px] font-black uppercase tracking-[0.3em] text-brand-dark/20 hover:text-brand-dark transition-colors"
+                    >
+                      + Nouvelle traduction
+                    </button>
+                  </div>
+                </div>
+             ) : (
+                <>
+                  <div className="flex items-center gap-6 mb-20">
+                    <div className="w-16 h-16 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent border border-brand-accent/10 animate-pulse">
+                      <Activity size={32} />
+                    </div>
+                    <div>
+                      <h3 className="text-2xl font-black uppercase tracking-tight mb-2">Moteur contextuel actif</h3>
+                      <p className="text-[10px] text-brand-dark/30 font-black uppercase tracking-widest">super_complex_document.docx</p>
+                    </div>
+                  </div>
+
+                  {/* Progress Line */}
+                  <div className="relative h-2 bg-brand-muted rounded-full mb-24">
+                    <div className="absolute top-1/2 left-0 w-full -translate-y-1/2 flex justify-between px-2">
+                       {[Upload, Activity, Globe, Zap, CheckCircle2].map((Icon, i) => (
+                         <div key={i} className={`w-12 h-12 rounded-2xl border-4 border-white shadow-xl flex items-center justify-center z-10 transition-all duration-500 ${progress > (i * 25) ? 'bg-brand-dark text-white scale-110' : 'bg-brand-muted text-brand-dark/20'}`}>
+                           <Icon size={18} />
+                         </div>
+                       ))}
+                    </div>
+                    <motion.div 
+                      className="absolute top-0 left-0 h-full bg-brand-accent shadow-[0_0_20px_rgba(197,161,122,0.4)]"
+                      animate={{ width: `${progress}%` }}
+                    />
+                  </div>
+
+                  <div className="flex justify-between items-end mb-8">
+                    <span className="text-[10px] font-black text-brand-dark/30 uppercase tracking-[0.3em]">{status === 'uploading' ? 'Phase 1: Initialisation' : 'Phase 2: Reconstruction Contextuelle'}</span>
+                    <span className="text-7xl font-black text-brand-dark">{progress}%</span>
+                  </div>
+
+                  <div className="grid grid-cols-4 gap-6 pt-12 border-t border-black/5">
+                    {[
+                      { label: 'segments', val: progress + '%', icon: <FileText size={18}/> },
+                      { label: 'précision', val: '99.9%', icon: <Zap size={18} /> },
+                      { label: 'vitesse', val: 'Turbo', icon: <Clock size={18} /> },
+                      { label: 'temps', val: '0:01', icon: <Activity size={18} /> }
+                    ].map((s, i) => (
+                      <div key={i} className="p-6 bg-brand-muted/30 rounded-3xl text-center border border-transparent hover:border-brand-accent/10 transition-all">
+                        <div className="text-brand-accent flex justify-center mb-4">{s.icon}</div>
+                        <p className="text-[12px] font-black text-brand-dark mb-1 uppercase tracking-tight">{s.val}</p>
+                        <p className="text-[8px] font-black text-brand-dark/30 uppercase tracking-[0.2em]">{s.label}</p>
+                      </div>
+                    ))}
+                  </div>
+                </>
+             )}
+          </div>
+        </div>
+
+        <div className="lg:col-span-4">
+           <div className="editorial-card p-10 bg-white border-none shadow-editorial h-full">
+             <h4 className="text-[10px] font-black uppercase tracking-[0.4em] mb-12 flex items-center gap-3 text-brand-dark/30">
+               <div className="w-2 h-2 bg-brand-accent rounded-full animate-ping" />
+               Moniteur IA
+             </h4>
+
+             <div className="p-6 bg-brand-muted rounded-[32px] mb-10 flex items-center gap-5 border border-black/5">
+               <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-brand-accent shadow-sm">
+                 <Presentation size={24} />
+               </div>
+               <div className="overflow-hidden">
+                 <p className="text-[11px] font-black uppercase tracking-tight truncate">super_complex_translated.pptx</p>
+                 <p className="text-[9px] text-brand-dark/40 font-bold uppercase tracking-widest mt-1">89.1 KB • PowerPoint</p>
+               </div>
+             </div>
+
+             <div className="space-y-8 mb-16 px-2">
+               <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30">
+                 <span>Source</span>
+                 <span className="text-brand-dark">AUTO</span>
+               </div>
+               <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30">
+                 <span>Cible</span>
+                 <span className="text-brand-accent">FRANÇAIS</span>
+               </div>
+               <div className="flex justify-between items-center text-[10px] font-black uppercase tracking-[0.4em] text-brand-dark/30">
+                 <span>Algorithme</span>
+                 <span className="text-brand-dark">NEURAL V4</span>
+               </div>
+             </div>
+
+             <div className="pt-10 border-t border-black/10">
+               <div className="flex justify-between text-[10px] font-black uppercase tracking-[0.4em] mb-4">
+                 <span className="text-brand-dark/30">Intégrité Layout</span>
+                 <span className="text-brand-accent">100% SECURE</span>
+               </div>
+               <div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5">
+                 <motion.div animate={{ width: progress + '%' }} className="h-full bg-brand-accent rounded-full" />
+               </div>
+             </div>
+
+             <button className="w-full mt-16 py-5 border border-red-50 text-red-500 rounded-2xl text-[10px] font-black uppercase tracking-[0.3em] flex items-center justify-center gap-3 hover:bg-red-50 transition-all">
+               ⟳ Annuler le processus
+             </button>
+           </div>
+        </div>
+      </div>
+    </div>
+  );
+};
+
+const ProfileView = ({ tab, setTab }: { tab: string; setTab: (t: any) => void }) => {
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit">Compte utilisateur</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Mon Profil</h1>
+        <p className="text-brand-dark/40 font-medium">Gérez votre compte et vos préférences de traduction.</p>
+      </div>
+
+      <div className="flex gap-2 p-2 bg-brand-muted rounded-2xl mb-12 w-fit border border-black/5">
+        {['account', 'subscription', 'preferences'].map((t) => (
+          <button 
+            key={t}
+            onClick={() => setTab(t)}
+            className={`px-10 py-3 rounded-xl text-[11px] font-black uppercase tracking-widest transition-all ${tab === t ? 'bg-brand-dark text-white shadow-xl' : 'text-brand-dark/30 hover:text-brand-dark'}`}
+          >
+            {t === 'account' ? 'Compte' : t === 'subscription' ? 'Abonnement' : 'Préférences'}
+          </button>
+        ))}
+      </div>
+
+      {tab === 'account' && (
+        <div className="editorial-card p-12 flex items-center gap-10 bg-white border-none shadow-editorial">
+          <div className="w-24 h-24 bg-brand-dark rounded-[32px] flex items-center justify-center text-white text-4xl font-black shadow-2xl">SR</div>
+          <div className="flex-1">
+            <div className="flex items-center gap-4 mb-3">
+              <h2 className="text-3xl font-black uppercase tracking-tight">Sepehr Ramezani</h2>
+              <span className="accent-pill !px-3 !py-1 text-[9px]">Gérant</span>
+            </div>
+            <p className="text-[11px] font-bold uppercase tracking-widest text-brand-dark/40 mb-3 flex items-center gap-2">
+                <Globe size={12} className="text-brand-accent"/> sepehr1151@gmail.com
+            </p>
+            <p className="text-[9px] text-brand-dark/20 font-black uppercase tracking-widest">Membre d'élite depuis le 10 mai 2026</p>
+          </div>
+          <button className="px-8 py-3 border border-black/10 rounded-xl text-[10px] font-black uppercase tracking-widest hover:bg-brand-muted transition-all">Modifier</button>
+        </div>
+      )}
+
+      {tab === 'subscription' && (
+        <div className="space-y-8">
+           <div className="editorial-card p-12 flex items-center justify-between bg-brand-dark text-white border-none shadow-2xl">
+              <div className="flex items-center gap-8">
+                <div className="w-16 h-16 bg-white/10 backdrop-blur-xl rounded-2xl flex items-center justify-center text-brand-accent border border-white/10">
+                  <Crown size={28} />
+                </div>
+                <div>
+                  <div className="flex items-center gap-3">
+                    <h3 className="text-2xl font-black uppercase tracking-tight">Forfait Pro</h3>
+                    <span className="px-3 py-1 bg-white/10 rounded-full text-[9px] font-black uppercase tracking-widest text-white border border-white/10">Actif</span>
+                  </div>
+                  <p className="text-white/40 text-[10px] font-black uppercase tracking-widest mt-1">Facturation mensuelle • 19 €/mois</p>
+                </div>
+              </div>
+              <button className="px-10 py-4 bg-white text-brand-dark rounded-xl font-black text-[10px] uppercase tracking-widest shadow-xl hover:scale-105 transition-all">Changer de forfait</button>
+           </div>
+
+           <div className="editorial-card p-12 bg-white border-none shadow-editorial">
+              <div className="flex justify-between items-center mb-12">
+                <div className="flex items-center gap-4 text-brand-accent">
+                  <Activity size={20} />
+                  <span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Métriques d'utilisation</span>
+                </div>
+                <span className="text-[9px] font-black text-brand-dark/20 uppercase tracking-widest border-b border-black/10 pb-1">Reset prévu le 1 juin 2026</span>
+              </div>
+
+              <div className="space-y-16">
+                 <div>
+                    <div className="flex justify-between text-[10px] font-black uppercase tracking-widest mb-4">
+                      <span className="flex items-center gap-3 text-brand-dark/40"><FileText size={16} className="text-brand-accent"/> Documents</span>
+                      <span className="text-brand-dark font-black">5 / 200</span>
+                    </div>
+                    <div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5 border border-black/5">
+                       <div className="h-full bg-brand-accent rounded-full shadow-[0_0_10px_rgba(197,161,122,0.5)]" style={{ width: '2.5%' }} />
+                    </div>
+                 </div>
+                 
+                 <div>
+                    <div className="flex justify-between text-[10px] font-black uppercase tracking-widest mb-4">
+                      <span className="flex items-center gap-3 text-brand-dark/40"><Layers size={16} className="text-brand-accent"/> Pages</span>
+                      <span className="text-brand-dark font-black">13 / 200</span>
+                    </div>
+                    <div className="h-2 bg-brand-muted rounded-full overflow-hidden p-0.5 border border-black/5">
+                       <div className="h-full bg-brand-accent rounded-full shadow-[0_0_10px_rgba(197,161,122,0.5)]" style={{ width: '6.5%' }} />
+                    </div>
+                 </div>
+              </div>
+
+              <div className="mt-16 p-8 bg-brand-muted rounded-[32px] border border-black/5 flex items-center justify-between group">
+                <div className="flex items-center gap-6 text-brand-dark">
+                  <div className="w-12 h-12 bg-white rounded-2xl flex items-center justify-center text-brand-accent shadow-sm group-hover:rotate-12 transition-transform">
+                    <Zap size={24} />
+                  </div>
+                  <p className="text-[11px] font-black uppercase tracking-tight max-w-[200px] leading-relaxed">Passez au niveau supérieur pour des documents illimités.</p>
+                </div>
+                <button className="px-8 py-3 bg-brand-dark text-white rounded-xl text-[9px] font-black uppercase tracking-widest shadow-lg hover:bg-brand-accent transition-all">Voir les offres</button>
+              </div>
+           </div>
+
+           <div className="editorial-card p-12 bg-white border-none shadow-editorial">
+             <div className="flex items-center gap-4 text-brand-accent mb-12">
+               <CheckCircle2 size={20} />
+               <span className="text-[11px] font-black uppercase tracking-[0.3em] text-brand-dark">Inclus dans votre forfait</span>
+             </div>
+             <div className="grid md:grid-cols-2 gap-y-6 gap-x-12">
+               {[
+                 "200 documents / mois",
+                 "Jusqu'à 200 pages par document",
+                 "Traduction IA Essentielle (DeepSeek V3.2)",
+                 "Google Traduction + DeepL",
+                 "Fichiers jusqu'à 25 Mo",
+                 "Glossaires personnalisés",
+                 "Support prioritaire",
+                 "Historique 90 jours"
+               ].map((feature, i) => (
+                 <div key={i} className="flex items-center gap-3">
+                   <div className="w-5 h-5 rounded-full border border-brand-accent/30 flex items-center justify-center bg-brand-accent/5">
+                     <CheckCircle2 size={12} className="text-brand-accent" />
+                   </div>
+                   <span className="text-[10px] font-bold uppercase tracking-tight text-brand-dark/60">{feature}</span>
+                 </div>
+               ))}
+             </div>
+           </div>
+        </div>
+      )}
+
+      {tab === 'preferences' && (
+        <div className="space-y-8">
+           <div className="editorial-card p-12 bg-white border-none shadow-editorial">
+             <div className="flex items-center gap-5 mb-12">
+               <div className="w-12 h-12 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent">
+                 <Globe size={24} />
+               </div>
+               <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark">Langue de l'interface</h3>
+             </div>
+             <div className="grid grid-cols-2 md:grid-cols-4 lg:grid-cols-5 gap-4">
+                {['English', 'Français', 'Español', 'Deutsch', 'Português', 'Italiano', 'Nederlands', 'Русский', '日本語', '한국어'].map((l) => (
+                  <button key={l} className={`px-6 py-4 rounded-2xl text-[10px] font-black uppercase tracking-widest border transition-all ${l === 'Français' ? 'bg-brand-dark border-brand-dark text-white shadow-xl' : 'bg-white border-black/5 text-brand-dark/30 hover:border-brand-accent/30 hover:text-brand-dark'}`}>
+                    {l}
+                  </button>
+                ))}
+             </div>
+             <p className="mt-12 text-[9px] text-brand-dark/20 font-black uppercase tracking-widest italic border-t border-black/5 pt-6">La langue est détectée automatiquement selon votre navigateur.</p>
+           </div>
+
+           <div className="editorial-card p-12 bg-white border-none shadow-editorial flex items-center justify-between">
+              <div className="flex items-center gap-6">
+                <div className="w-14 h-14 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent">
+                    <FileText size={28} />
+                </div>
+                <div>
+                  <h3 className="text-2xl font-black uppercase tracking-tight text-brand-dark">Cible par défaut</h3>
+                  <p className="text-brand-dark/30 text-[10px] font-black uppercase tracking-widest mt-2 leading-relaxed">Pré-sélection automatique lors de l'import.</p>
+                </div>
+              </div>
+              <div className="flex gap-4">
+                 <div className="px-8 py-4 bg-brand-muted rounded-2xl text-[10px] font-black uppercase tracking-widest flex items-center gap-5 border border-black/5">
+                   Français <ChevronDown size={14} className="text-brand-accent" />
+                 </div>
+                 <button className="premium-button px-10 py-4 text-[10px] uppercase tracking-widest !rounded-2xl">Enregistrer</button>
+              </div>
+           </div>
+        </div>
+      )}
+    </div>
+  );
+};
+
+const ContextView = () => {
+  return (
+    <div className="max-w-5xl mx-auto">
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit italic">Personnalisation IA</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Contexte & Glossaire</h1>
+        <p className="text-brand-dark/40 font-medium max-w-2xl">Améliorez la qualité de traduction avec des instructions et un vocabulaire spécifiques à votre domaine.</p>
+      </div>
+
+      <div className="space-y-12">
+        {/* Professional Glossaries */}
+        <section className="editorial-card p-12 bg-white 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">Glossaires professionnels</h3>
+          </div>
+          <p className="text-sm text-brand-dark/40 mb-12 font-medium">Chargez un glossaire complet avec instructions et terminologie spécialisée</p>
+
+          <div className="grid grid-cols-2 md:grid-cols-4 gap-6">
+            {[
+              { id: 'hvac', label: 'HVAC / Génie climatique', desc: 'Thermique, ventilation, climatisation', icon: <Wrench size={24} /> },
+              { id: 'btp', label: 'BTP / Construction', desc: 'Gros œuvre, second œuvre, normes', icon: <HardHat size={24} /> },
+              { id: 'it', label: 'IT / Logiciel', desc: 'Développement, infrastructure, DevOps', icon: <Monitor size={24} /> },
+              { id: 'legal', label: 'Juridique / Contrats', desc: 'Droit des affaires, contentieux', icon: <Scale size={24} /> },
+              { id: 'medical', label: 'Médical / Santé', desc: 'Pharmacologie, chirurgie, diagnostic', icon: <Stethoscope size={24} /> },
+              { id: 'finance', label: 'Finance / Comptabilité', desc: 'IFRS, bilans, fiscalité', icon: <BarChart3 size={24} /> },
+              { id: 'marketing', label: 'Marketing / Publicité', desc: 'Digital, branding, analytics', icon: <Megaphone size={24} /> },
+              { id: 'auto', label: 'Automobile', desc: 'Motorisation, ADAS, homologation', icon: <Car size={24} /> },
+            ].map((p) => (
+              <button key={p.id} className="p-6 bg-brand-muted hover:bg-brand-dark group transition-all rounded-[32px] text-center border border-black/5 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">
+                  {p.icon}
+                </div>
+                <h4 className="text-[11px] font-black uppercase tracking-tight text-brand-dark group-hover:text-white mb-2">{p.label}</h4>
+                <p className="text-[8px] text-brand-dark/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-12 bg-white 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">Instructions de contexte</h3>
+          </div>
+          <p className="text-sm text-brand-dark/40 mb-10 font-medium">Instructions que l'IA suivra pendant la traduction</p>
+          <textarea 
+            className="w-full h-48 p-8 bg-brand-muted rounded-[32px] border border-black/5 text-sm focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none"
+            placeholder="Ex : Vous traduisez des documents techniques HVAC. Utilisez une terminologie d'ingénierie précise..."
+          />
+          <div className="flex justify-end mt-6 gap-4">
+             <button className="px-8 py-3 bg-brand-muted text-brand-dark/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark transition-all">Effacer</button>
+             <button className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3"><Save size={14}/> Enregistrer</button>
+          </div>
+        </section>
+
+        {/* Technical Glossary */}
+        <section className="editorial-card p-12 bg-white 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">Glossaire technique</h3>
+          </div>
+          <p className="text-sm text-brand-dark/40 mb-10 font-medium">Format : source=cible (un par ligne). Les glossaires chargés via preset sont modifiables.</p>
+          <textarea 
+            className="w-full h-64 p-8 bg-brand-muted rounded-[32px] border border-black/5 text-sm font-mono focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none"
+            defaultValue={`pression statique=static pressure\nrécupérateur de chaleur=heat recovery unit`}
+          />
+          <div className="flex justify-between items-center mt-6">
+             <span className="text-[9px] text-brand-dark/20 font-black uppercase tracking-widest">2 termes définis</span>
+             <div className="flex gap-4">
+               <button className="px-8 py-3 bg-brand-muted text-brand-dark/40 rounded-xl text-[9px] font-black uppercase tracking-widest hover:text-brand-dark transition-all">Importer CSV</button>
+               <button className="premium-button px-10 py-3 text-[9px] uppercase tracking-widest !rounded-xl flex items-center gap-3"><Save size={14}/> Appliquer</button>
+             </div>
+          </div>
+        </section>
+      </div>
+    </div>
+  );
+};
+
+const ApiKeysView = () => {
+  return (
+    <div className="max-w-4xl mx-auto">
+      <div className="mb-12">
+        <span className="accent-pill mb-4 block w-fit">Accès API</span>
+        <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Clés API</h1>
+        <p className="text-brand-dark/40 font-medium">Intégrez Office Translator directement dans vos outils.</p>
+      </div>
+
+      <div className="editorial-card p-12 bg-white border-none shadow-editorial">
+         <div className="flex items-center justify-between p-8 bg-brand-muted rounded-3xl border border-black/5">
+           <div>
+             <p className="text-[9px] text-brand-dark/40 font-black uppercase tracking-[0.3em] mb-2">Clé de production</p>
+             <p className="text-sm font-mono text-brand-dark">sk_live_************************************</p>
+           </div>
+           <div className="flex gap-3">
+             <button className="p-3 bg-white rounded-xl text-brand-dark/40 hover:text-brand-dark border border-black/5 transition-all"><Clock size={16}/></button>
+             <button className="px-6 py-3 bg-brand-dark text-white rounded-xl text-[9px] font-black uppercase tracking-widest">Révéler</button>
+           </div>
+         </div>
+      </div>
+    </div>
+  );
+};
+
+const GlossaryMainView = () => {
+  return (
+    <div className="max-w-6xl mx-auto">
+      <div className="flex justify-between items-end mb-12">
+        <div>
+          <span className="accent-pill mb-4 block w-fit">Bibliothèque</span>
+          <h1 className="text-5xl font-black uppercase tracking-tighter mb-4 leading-none">Mes Glossaires</h1>
+          <p className="text-brand-dark/40 font-medium">Gérez vos listes de terminologies personnalisées.</p>
+        </div>
+        <button className="premium-button px-10 py-4 text-[11px] uppercase tracking-widest !rounded-2xl">+ Nouveau glossaire</button>
+      </div>
+
+      <div className="grid md:grid-cols-2 lg:grid-cols-3 gap-8">
+        {[
+          { name: 'Technique HVAC', count: 124, date: '12 Mai 2026', type: 'Ingénierie' },
+          { name: 'Marketing Digital', count: 45, date: '10 Mai 2026', type: 'Communication' },
+          { name: 'Contrats Vente', count: 89, date: '08 Mai 2026', type: 'Juridique' },
+        ].map((g, i) => (
+          <div key={i} className="editorial-card p-8 bg-white border-none shadow-editorial group hover:-translate-y-2 transition-all">
+             <div className="flex justify-between items-start mb-10">
+               <div className="w-12 h-12 bg-brand-muted rounded-2xl flex items-center justify-center text-brand-accent group-hover:bg-brand-dark group-hover:text-white transition-all">
+                 <Library size={24} />
+               </div>
+               <span className="text-[8px] bg-brand-accent/10 text-brand-accent px-3 py-1 rounded-full font-black uppercase tracking-widest">{g.type}</span>
+             </div>
+             <h3 className="text-2xl font-black uppercase tracking-tight mb-2 text-brand-dark">{g.name}</h3>
+             <div className="flex justify-between items-center pt-8 border-t border-black/5">
+                <span className="text-[9px] text-brand-dark/30 font-black uppercase tracking-widest">{g.count} termes</span>
+                <span className="text-[9px] text-brand-dark/30 font-black uppercase tracking-widest">{g.date}</span>
+             </div>
+          </div>
+        ))}
+      </div>
+    </div>
+  );
+};