feat(translate): refonte du design de la page de traduction et du sélecteur de moteurs (Etapes 1-3)

frontend/src/app/dashboard/translate/ProviderSelector.tsx

@@ -1,5 +1,6 @@
 'use client';
 
+import { useState, useEffect } from 'react';
 import { Loader2, CheckCircle2, Lock, Sparkles } from 'lucide-react';
 import { cn } from '@/lib/utils';
 import { useI18n } from '@/lib/i18n';
@@ -13,6 +14,82 @@ interface ProviderSelectorProps {
   isPro: boolean;
 }
 
+interface CardTheme {
+  badge: string;
+  subBadge: string;
+  accentClass: string;
+  glowClass: string;
+  descriptionOverride: string;
+}
+
+const LLM_THEMES: Record<string, CardTheme> = {
+  deepseek: {
+    badge: 'Essentielle',
+    subBadge: 'Technique & Éco',
+    accentClass: 'border-cyan-500/30 text-cyan-600 dark:text-cyan-400 bg-cyan-500/5',
+    glowClass: 'from-cyan-500/10 dark:from-cyan-500/5 to-transparent',
+    descriptionOverride: 'Traduction ultra-précise et économique, idéale pour les documents techniques et le code.'
+  },
+  openai: {
+    badge: 'Premium',
+    subBadge: 'Haute Fidélité',
+    accentClass: 'border-emerald-500/30 text-emerald-600 dark:text-emerald-400 bg-emerald-500/5',
+    glowClass: 'from-emerald-500/10 dark:from-emerald-500/5 to-transparent',
+    descriptionOverride: 'Le standard mondial de l\'IA. Cohérence textuelle maximale et respect strict du style.'
+  },
+  minimax: {
+    badge: 'Avancée',
+    subBadge: 'Performance',
+    accentClass: 'border-indigo-500/30 text-indigo-600 dark:text-indigo-400 bg-indigo-500/5',
+    glowClass: 'from-indigo-500/10 dark:from-indigo-500/5 to-transparent',
+    descriptionOverride: 'Vitesse d\'exécution incroyable et excellente compréhension des structures complexes.'
+  },
+  openrouter: {
+    badge: 'Express',
+    subBadge: 'Multi-Modèles',
+    accentClass: 'border-purple-500/30 text-purple-600 dark:text-purple-400 bg-purple-500/5',
+    glowClass: 'from-purple-500/10 dark:from-purple-500/5 to-transparent',
+    descriptionOverride: 'Accès unifié aux meilleurs modèles open-source optimisés pour la traduction.'
+  },
+  openrouter_premium: {
+    badge: 'Ultra',
+    subBadge: 'Maximum Context',
+    accentClass: 'border-rose-500/30 text-rose-600 dark:text-rose-400 bg-rose-500/5',
+    glowClass: 'from-rose-500/10 dark:from-rose-500/5 to-transparent',
+    descriptionOverride: 'Traduction assistée par les modèles de pointe (GPT-4o, Claude 3.5 Sonnet) pour documents longs.'
+  },
+  zai: {
+    badge: 'Spécialisée',
+    subBadge: 'Finance & Droit',
+    accentClass: 'border-amber-500/30 text-amber-600 dark:text-amber-400 bg-amber-500/5',
+    glowClass: 'from-amber-500/10 dark:from-amber-500/5 to-transparent',
+    descriptionOverride: 'Modèle affiné pour les terminologies métiers exigeantes (juridique, finance).'
+  }
+};
+
+const DEFAULT_LLM_THEME: CardTheme = {
+  badge: 'Moderne',
+  subBadge: 'Raisonnement IA',
+  accentClass: 'border-brand-accent/30 text-brand-accent bg-brand-accent/5',
+  glowClass: 'from-brand-accent/10 to-transparent',
+  descriptionOverride: 'Traduction par grand modèle linguistique (LLM) avec analyse sémantique avancée.'
+};
+
+const CLASSIC_THEMES: Record<string, { labelOverride?: string; descriptionOverride?: string }> = {
+  google: {
+    labelOverride: 'Google Traduction',
+    descriptionOverride: 'Traduction ultra-rapide couvrant plus de 130 langues. Recommandé pour les flux généraux.'
+  },
+  deepl: {
+    labelOverride: 'DeepL Pro',
+    descriptionOverride: 'Traduction haute précision réputée pour sa fluidité et ses formulations naturelles.'
+  },
+  google_cloud: {
+    labelOverride: 'Google Cloud API',
+    descriptionOverride: 'Moteur cloud professionnel optimisé pour le traitement de gros volumes de documents.'
+  }
+};
+
 export function ProviderSelector({
   provider,
   onProviderChange,
@@ -21,29 +98,91 @@ export function ProviderSelector({
   isPro,
 }: ProviderSelectorProps) {
   const { t } = useI18n();
+  const [activeTab, setActiveTab] = useState<'classic' | 'llm'>('classic');
+
+  // Filter providers
+  const classicProviders = availableProviders.filter((p) => p.mode === 'classic');
+  const llmProviders = availableProviders.filter((p) => p.mode === 'llm');
+
+  // Initialize and synchronize activeTab based on current provider
+  useEffect(() => {
+    if (provider) {
+      const selected = availableProviders.find((p) => p.id === provider);
+      if (selected) {
+        setActiveTab(selected.mode);
+      }
+    }
+  }, [provider, availableProviders]);
 
   if (isLoadingProviders) {
     return (
-      <div className="flex items-center gap-2 text-sm text-muted-foreground">
-        <Loader2 className="size-4 animate-spin" />
-        <span>{t('dashboard.translate.provider.loading')}</span>
+      <div className="flex items-center gap-2 text-sm text-brand-dark/50 dark:text-white/40 py-4">
+        <Loader2 className="size-4 animate-spin text-brand-accent" />
+        <span>{t('dashboard.translate.provider.loading') || 'Chargement des moteurs...'}</span>
       </div>
     );
   }
 
   if (availableProviders.length === 0) {
     return (
-      <p className="rounded-xl border border-amber-200 bg-amber-50 px-4 py-3 text-sm text-amber-700 dark:border-amber-800/50 dark:bg-amber-950/30 dark:text-amber-400">
-        {t('dashboard.translate.provider.noneConfigured')}
+      <p className="rounded-xl border border-amber-200 bg-amber-50/50 px-4 py-3 text-xs text-amber-700 dark:border-amber-900/30 dark:bg-amber-950/20 dark:text-amber-400 font-light">
+        {t('dashboard.translate.provider.noneConfigured') || 'Aucun fournisseur configuré'}
       </p>
     );
   }
 
-  const classicProviders = availableProviders.filter((p) => p.mode === 'classic');
-  const llmProviders = availableProviders.filter((p) => p.mode === 'llm');
-
-  const renderCard = (p: AvailableProvider, locked: boolean) => {
+  const renderClassicCard = (p: AvailableProvider) => {
     const isSelected = provider === p.id;
+    const meta = CLASSIC_THEMES[p.id];
+    const label = meta?.labelOverride || p.label;
+    const description = meta?.descriptionOverride || p.description;
+
+    return (
+      <button
+        key={p.id}
+        type="button"
+        onClick={() => onProviderChange(p.id)}
+        className={cn(
+          'relative overflow-hidden w-full text-start rounded-2xl border p-4 transition-all duration-300 active:scale-[0.99] flex items-start gap-3.5',
+          isSelected
+            ? 'border-brand-accent bg-brand-muted/20 dark:bg-zinc-800/40 ring-1 ring-brand-accent/20'
+            : 'border-brand-dark/10 dark:border-white/10 bg-white dark:bg-[#141414] hover:border-brand-accent/30 dark:hover:border-brand-accent/30 hover:scale-[1.005]'
+        )}
+      >
+        {/* Radio Indicator */}
+        <div className={cn(
+          'mt-0.5 flex size-4 shrink-0 items-center justify-center rounded-full border transition-colors',
+          isSelected ? 'border-brand-accent bg-brand-accent' : 'border-brand-dark/20 dark:border-white/20'
+        )}>
+          {isSelected && <div className="size-1.5 rounded-full bg-white" />}
+        </div>
+
+        {/* Content */}
+        <div className="flex-1 min-w-0 flex flex-col gap-0.5">
+          <span className={cn(
+            'text-xs font-semibold leading-tight tracking-tight',
+            isSelected ? 'text-brand-dark dark:text-white' : 'text-brand-dark/80 dark:text-white/80'
+          )}>
+            {label}
+          </span>
+          <span className="text-[11px] text-brand-dark/50 dark:text-white/50 leading-relaxed font-light">
+            {description}
+          </span>
+        </div>
+
+        {/* Selected badge */}
+        {isSelected && (
+          <CheckCircle2 className="size-4 shrink-0 text-brand-accent" />
+        )}
+      </button>
+    );
+  };
+
+  const renderLlmCard = (p: AvailableProvider, locked: boolean) => {
+    const isSelected = provider === p.id;
+    const theme = LLM_THEMES[p.id] || DEFAULT_LLM_THEME;
+    const description = theme.descriptionOverride || p.description;
+
     return (
       <button
         key={p.id}
@@ -51,88 +190,151 @@ export function ProviderSelector({
         disabled={locked}
         onClick={() => !locked && onProviderChange(p.id)}
         className={cn(
-          'flex w-full items-center gap-3 rounded-xl border px-4 py-3 text-start transition-all duration-150',
+          'group relative overflow-hidden w-full text-start rounded-2xl border p-4 transition-all duration-300 flex flex-col gap-2.5',
           isSelected
-            ? 'border-primary bg-primary/8 ring-1 ring-primary/30'
+            ? 'border-brand-accent bg-gradient-to-br from-brand-muted/30 via-white to-brand-accent/[0.03] dark:via-[#141414] dark:to-brand-accent/[0.05] ring-1 ring-brand-accent/20 scale-[1.01]'
             : locked
-            ? 'cursor-not-allowed border-border/40 bg-muted/20 opacity-60'
-            : 'border-border/60 bg-background hover:border-primary/40 hover:bg-muted/30 active:scale-[0.99]'
+            ? 'cursor-not-allowed border-brand-dark/5 dark:border-white/5 bg-brand-dark/[0.01] dark:bg-white/[0.01] opacity-50'
+            : 'border-brand-dark/10 dark:border-white/10 bg-white dark:bg-[#141414] hover:border-brand-accent/30 dark:hover:border-brand-accent/30 hover:scale-[1.005]'
         )}
       >
-        {/* Selection indicator */}
+        {/* Glow effect when selected or hovered */}
         <div className={cn(
-          'flex size-5 shrink-0 items-center justify-center rounded-full border-2 transition-colors',
-          isSelected ? 'border-primary bg-primary' : 'border-border/60'
-        )}>
-          {isSelected && <div className="size-2 rounded-full bg-primary-foreground" />}
-        </div>
+          'absolute inset-0 bg-gradient-to-r opacity-0 transition-opacity duration-300 pointer-events-none',
+          theme.glowClass,
+          isSelected ? 'opacity-100' : 'group-hover:opacity-40'
+        )} />
 
-        {/* Label + description */}
-        <div className="flex flex-1 flex-col gap-0.5 min-w-0">
+        {/* Top line with label and category badge */}
+        <div className="relative flex items-center justify-between gap-2 z-10">
           <span className={cn(
-            'text-sm font-medium leading-tight',
-            isSelected ? 'text-primary' : locked ? 'text-muted-foreground' : 'text-foreground'
+            'text-xs font-semibold tracking-tight',
+            isSelected ? 'text-brand-dark dark:text-white' : locked ? 'text-brand-dark/40 dark:text-white/40' : 'text-brand-dark/80 dark:text-white/80'
           )}>
             {p.label}
           </span>
-          <span className="text-xs text-muted-foreground leading-snug">
-            {p.description}
+          <span className={cn(
+            'text-[9px] font-bold uppercase tracking-wider px-2 py-0.5 rounded-full border',
+            theme.accentClass
+          )}>
+            {theme.badge}
           </span>
-          {p.mode === 'llm' && p.model && (
-            <span className="mt-0.5 text-[10px] font-mono text-muted-foreground/70">
-              {t('dashboard.translate.provider.modelTitle')} {p.model}
+        </div>
+
+        {/* Middle description */}
+        <div className="relative z-10 flex flex-col gap-1">
+          <span className="text-[9px] font-bold tracking-widest text-brand-dark/40 dark:text-white/30 uppercase">
+            {theme.subBadge}
+          </span>
+          <p className="text-[11px] text-brand-dark/65 dark:text-white/60 leading-relaxed font-light">
+            {description}
+          </p>
+        </div>
+
+        {/* Bottom meta & status */}
+        <div className="relative z-10 flex items-center justify-between mt-1 pt-2 border-t border-brand-dark/5 dark:border-white/5">
+          <span className="text-[9px] font-mono text-brand-dark/40 dark:text-white/40 tracking-tight">
+            {p.model || 'model-default'}
+          </span>
+          
+          {locked ? (
+            <span className="flex items-center gap-1 text-[9px] font-bold text-brand-dark/45 dark:text-white/45 uppercase tracking-widest">
+              <Lock className="size-3 text-brand-dark/40 dark:text-white/40" /> PRO
+            </span>
+          ) : isSelected ? (
+            <span className="flex items-center gap-1 text-[9px] font-bold text-brand-accent uppercase tracking-widest">
+              <CheckCircle2 className="size-3 text-brand-accent" /> ACTIF
+            </span>
+          ) : (
+            <span className="text-[9px] text-brand-dark/35 dark:text-white/35 uppercase tracking-widest group-hover:text-brand-accent transition-colors font-medium">
+              Sélectionner
             </span>
           )}
         </div>
-
-        {/* Right badge */}
-        {locked ? (
-          <Lock className="size-4 shrink-0 text-muted-foreground/50" />
-        ) : isSelected ? (
-          <CheckCircle2 className="size-5 shrink-0 text-primary" />
-        ) : null}
       </button>
     );
   };
 
   return (
-    <div className="flex flex-col gap-3">
-      <p className="text-sm font-medium text-foreground">
-        {t('dashboard.translate.provider.sectionTitle')}
-      </p>
+    <div className="flex flex-col gap-4">
+      {/* Title */}
+      <div className="flex items-center justify-between">
+        <label className="text-[10px] font-bold uppercase tracking-[0.2em] text-brand-dark/40 dark:text-white/45">
+          {t('dashboard.translate.provider.sectionTitle') || 'Moteur de Traduction'}
+        </label>
+      </div>
 
-      {/* Classic providers */}
-      {classicProviders.length > 0 && (
-        <div className="flex flex-col gap-2">
-          {classicProviders.map((p) => renderCard(p, false))}
-        </div>
-      )}
-
-      {/* LLM providers — Pro only */}
-      {llmProviders.length > 0 && (
-        <div className="flex flex-col gap-2">
-          <div className="flex items-center gap-2">
-            <div className="h-px flex-1 bg-border/50" />
-            <span className="flex items-center gap-1 text-[10px] font-semibold uppercase tracking-wider text-muted-foreground">
-              <Sparkles className="size-3" />
-              {t('dashboard.translate.provider.llmDivider')}
-              {!isPro && (
-                <span className="ms-1 rounded bg-primary/10 px-1 py-0.5 text-primary">
-                  {t('dashboard.translate.provider.llmDividerPro')}
-                </span>
-              )}
-            </span>
-            <div className="h-px flex-1 bg-border/50" />
-          </div>
-          {llmProviders.map((p) => renderCard(p, !isPro))}
-          {!isPro && (
-            <p className="text-xs text-muted-foreground text-center">
-              <a href="/pricing" className="text-primary hover:underline font-medium">
-                {t('dashboard.translate.provider.upgrade')}
-              </a>{' '}
-              {t('dashboard.translate.provider.upgradeSuffix')}
-            </p>
+      {/* Tabs Container */}
+      <div className="grid grid-cols-2 p-1 bg-brand-muted/70 dark:bg-zinc-800/40 rounded-xl border border-brand-dark/5 dark:border-white/5">
+        <button
+          type="button"
+          onClick={() => setActiveTab('classic')}
+          className={cn(
+            'py-2 text-xs font-semibold rounded-lg transition-all duration-200',
+            activeTab === 'classic'
+              ? 'bg-white dark:bg-zinc-900 text-brand-dark dark:text-white shadow-sm'
+              : 'text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white'
           )}
+        >
+          {t('dashboard.translate.provider.tabStandard') || 'Standard'}
+        </button>
+        <button
+          type="button"
+          onClick={() => setActiveTab('llm')}
+          className={cn(
+            'py-2 text-xs font-semibold rounded-lg transition-all duration-200 flex items-center justify-center gap-1.5',
+            activeTab === 'llm'
+              ? 'bg-white dark:bg-zinc-900 text-brand-dark dark:text-white shadow-sm'
+              : 'text-brand-dark/50 dark:text-white/40 hover:text-brand-dark dark:hover:text-white'
+          )}
+        >
+          <Sparkles className={cn("size-3", activeTab === 'llm' ? 'text-brand-accent' : 'text-brand-dark/35 dark:text-white/30')} />
+          {t('dashboard.translate.provider.tabLLM') || 'Multi-Modèles IA'}
+          {!isPro && <Lock className="size-2.5 opacity-60 ml-0.5" />}
+        </button>
+      </div>
+
+      {/* Active Tab List */}
+      <div className="space-y-3">
+        {activeTab === 'classic' ? (
+          classicProviders.length > 0 ? (
+            <div className="grid grid-cols-1 gap-2.5">
+              {classicProviders.map((p) => renderClassicCard(p))}
+            </div>
+          ) : (
+            <p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-6 border border-dashed border-brand-dark/10 dark:border-white/10 rounded-2xl font-light">
+              Aucun traducteur standard disponible.
+            </p>
+          )
+        ) : (
+          llmProviders.length > 0 ? (
+            <div className="grid grid-cols-1 gap-3">
+              {llmProviders.map((p) => renderLlmCard(p, !isPro))}
+            </div>
+          ) : (
+            <p className="text-xs text-brand-dark/40 dark:text-white/30 text-center py-6 border border-dashed border-brand-dark/10 dark:border-white/10 rounded-2xl font-light">
+              Aucun modèle IA configuré.
+            </p>
+          )
+        )}
+      </div>
+
+      {/* Pro upgrade banner when llm is active and user is not pro */}
+      {!isPro && activeTab === 'llm' && (
+        <div className="p-4 rounded-2xl border border-brand-accent/20 bg-brand-accent/[0.02] dark:bg-brand-accent/[0.01] text-center flex flex-col items-center gap-2">
+          <Sparkles className="size-4 text-brand-accent animate-pulse" />
+          <span className="text-xs font-semibold text-brand-dark dark:text-white">
+            {t('dashboard.translate.provider.llmDivider') || 'Intelligence Artificielle Active'}
+          </span>
+          <p className="text-[10.5px] text-brand-dark/50 dark:text-white/50 leading-relaxed max-w-[280px] font-light">
+            Débloquez la traduction contextuelle haut de gamme pour des documents entiers tout en préservant le ton exact.
+          </p>
+          <a
+            href="/pricing"
+            className="mt-1 w-full inline-flex items-center justify-center py-2 px-3 rounded-xl bg-brand-dark dark:bg-white text-white dark:text-brand-dark text-xs font-medium hover:opacity-95 active:scale-[0.98] transition-all shadow-sm"
+          >
+            {t('dashboard.translate.provider.upgrade') || 'Passer Pro'}
+          </a>
         </div>
       )}
     </div>