fix: remplacer couleurs emerald/green fluo par couleurs brand dans les paramètres

Co-authored-by: Copilot <223556219+Copilot@users.noreply.github.com>

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

@@ -183,8 +183,8 @@ export default function DataSettingsPage() {
     },
     {
       icon: Upload,
-      iconColor: 'text-emerald-600 dark:text-emerald-400',
-      iconBg: 'bg-emerald-500/10 dark:bg-emerald-500/20',
+      iconColor: 'text-primary/80 dark:text-primary',
+      iconBg: 'bg-primary/10 dark:bg-primary/20',
       title: t('dataManagement.import.title'),
       description: t('dataManagement.import.description'),
       loading: isImporting,

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

@@ -233,7 +233,7 @@ export function GeneralSettingsClient({ initialSettings }: GeneralSettingsClient
               className={cn(
                 'shrink-0 px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-wider border',
                 hasAiConsent
-                  ? 'bg-emerald-500/10 text-emerald-700 dark:text-emerald-400 border-emerald-500/20'
+                  ? 'bg-primary/10 text-primary/80 dark:text-primary border-primary/20'
                   : 'bg-concrete/10 text-concrete border-border'
               )}
             >

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

@@ -127,7 +127,7 @@ export default function IntegrationsPage() {
 
   const StatusBadge = ({ connected }: { connected: boolean }) =>
     connected ? (
-      <span className="flex items-center gap-1.5 text-[11px] font-semibold text-emerald-600 dark:text-emerald-400 bg-emerald-50 dark:bg-emerald-950/30 border border-emerald-200 dark:border-emerald-800/40 rounded-full px-2.5 py-1">
+      <span className="flex items-center gap-1.5 text-[11px] font-semibold text-primary/80 dark:text-primary bg-primary/10 border border-primary/30 rounded-full px-2.5 py-1">
         <Check size={11} /> Connecté
       </span>
     ) : (

memento-note/components/mcp/mcp-settings-panel.tsx

@@ -231,7 +231,7 @@ export function McpSettingsPanel({ initialKeys, serverStatus }: McpSettingsPanel
                   onClick={() => handleCopy(showRawKey!)}
                   className="shrink-0 p-2.5 rounded-xl border border-border hover:bg-paper dark:hover:bg-white/10 transition-colors"
                 >
-                  {copied ? <Check className="h-4 w-4 text-emerald-500" /> : <Copy className="h-4 w-4 text-concrete" />}
+                  {copied ? <Check className="h-4 w-4 text-primary" /> : <Copy className="h-4 w-4 text-concrete" />}
                 </button>
               </div>
             </div>
@@ -304,7 +304,7 @@ function KeyCard({ keyInfo, onRevoke, onDelete, isPending }: { keyInfo: McpKeyIn
           <span className={cn(
             'text-[9px] font-bold uppercase tracking-widest px-2 py-0.5 rounded-lg',
             keyInfo.active
-              ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400'
+              ? 'bg-primary/10 text-primary/80 dark:text-primary'
               : 'bg-concrete/10 text-concrete'
           )}>
             {keyInfo.active ? t('mcpSettings.apiKeys.active') : t('mcpSettings.apiKeys.revoked')}
@@ -403,7 +403,7 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
   return (
     <div className="bg-white/40 dark:bg-white/5 border border-border rounded-2xl overflow-hidden">
       <div className="flex items-center gap-5 p-6 border-b border-border/40">
-        <div className="p-3 bg-emerald-500/10 rounded-2xl text-emerald-600 dark:text-emerald-400 border border-emerald-500/20">
+        <div className="p-3 bg-primary/10 rounded-2xl text-primary/80 dark:text-primary border border-primary/20">
           <ExternalLink size={18} />
         </div>
         <div>
@@ -436,7 +436,7 @@ function ConfigInstructions({ serverStatus }: { serverStatus: McpServerStatus })
                     onClick={() => handleCopySnippet(cfg.snippet)}
                     className="absolute top-3 right-3 p-1.5 rounded-lg border border-border bg-paper dark:bg-black/30 hover:bg-white dark:hover:bg-black/50 transition-colors"
                   >
-                    {copied ? <Check className="h-3 w-3 text-emerald-500" /> : <Copy className="h-3 w-3 text-concrete" />}
+                    {copied ? <Check className="h-3 w-3 text-primary" /> : <Copy className="h-3 w-3 text-concrete" />}
                   </button>
                 </div>
               </div>

memento-note/components/settings/SettingInput.tsx

@@ -79,7 +79,7 @@ export function SettingInput({
           <Loader2 className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 animate-spin text-gray-500" />
         )}
         {isSaved && !isLoading && (
-          <Check className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-green-500" />
+          <Check className="absolute right-3 top-1/2 -translate-y-1/2 h-4 w-4 text-primary" />
         )}
       </div>
     </div>

memento-note/components/settings/SettingToggle.tsx

@@ -60,7 +60,7 @@ export function SettingToggle({
       </div>
       <div className="flex items-center gap-2">
         {isLoading && <Loader2 className="h-4 w-4 animate-spin text-gray-500" />}
-        {!isLoading && !error && checked && <Check className="h-4 w-4 text-green-500" />}
+        {!isLoading && !error && checked && <Check className="h-4 w-4 text-primary" />}
         {!isLoading && !error && !checked && <X className="h-4 w-4 text-gray-400" />}
         <Switch
           checked={checked}

memento-note/components/settings/billing-history.tsx

@@ -72,7 +72,7 @@ export function BillingHistory() {
   const getStatusBadge = (status: string | null) => {
     const s = status?.toLowerCase();
     if (s === 'paid') {
-      return 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20';
+      return 'bg-primary/10 text-primary/80 dark:text-primary border border-primary/20';
     }
     if (s === 'open' || s === 'pending') {
       return 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20';

memento-note/components/settings/billing-plans.tsx

@@ -321,8 +321,8 @@ export function BillingPlans() {
     >
       {/* Success Banner */}
       {successBanner && (
-        <div className="flex items-start gap-3 rounded-xl border border-emerald-500/30 bg-emerald-500/10 p-4">
-          <CheckCircle2 className="h-5 w-5 text-emerald-600 dark:text-emerald-400 shrink-0 mt-0.5" />
+        <div className="flex items-start gap-3 rounded-xl border border-primary/30 bg-primary/10 p-4">
+          <CheckCircle2 className="h-5 w-5 text-primary/80 dark:text-primary shrink-0 mt-0.5" />
           <div className="flex-1 min-w-0">
             <p className="text-sm font-semibold text-foreground">{t('billing.checkoutSuccessTitle') || 'Abonnement activé !'}</p>
             <p className="text-xs text-muted-foreground mt-0.5">{successBanner}</p>
@@ -351,7 +351,7 @@ export function BillingPlans() {
                 <span className={cn(
                   'px-3 py-1 rounded-full text-[10px] font-bold uppercase tracking-widest',
                   status?.status === 'active' || status?.status === 'ACTIVE'
-                    ? 'bg-emerald-500/10 text-emerald-600 dark:text-emerald-400 border border-emerald-500/20'
+                    ? 'bg-primary/10 text-primary/80 dark:text-primary border border-primary/20'
                     : 'bg-amber-500/10 text-amber-600 dark:text-amber-400 border border-amber-500/20'
                 )}>
                   {status?.status ? t(`billing.${status.status.toLowerCase()}`) || status.status : t('billing.active')}
@@ -545,7 +545,7 @@ export function BillingPlans() {
                 )}
               >
                 {t('billing.annual')}
-                <span className="ms-1 text-emerald-600 dark:text-emerald-400">{t('billing.save')} ~17%</span>
+                <span className="ms-1 text-primary/80 dark:text-primary">{t('billing.save')} ~17%</span>
               </button>
             </div>
           )}

memento-note/components/settings/usage-breakdown.tsx

@@ -25,7 +25,7 @@ const FEATURE_LABEL_KEYS: Record<string, string> = {
 function UsageBar({ used, limit, isUnlimited }: { used: number; limit: number; isUnlimited: boolean }) {
   const pct = isUnlimited ? 0 : Math.min(100, limit > 0 ? (used / limit) * 100 : 0);
   const color =
-    pct >= 90 ? 'bg-rose-500' : pct >= 70 ? 'bg-amber-500' : 'bg-emerald-500';
+    pct >= 90 ? 'bg-rose-500' : pct >= 70 ? 'bg-amber-500' : 'bg-primary';
 
   return (
     <div className="h-1.5 w-full rounded-full bg-foreground/10 overflow-hidden">
@@ -82,7 +82,7 @@ export function UsageBreakdown() {
                   <span className="text-xs text-muted-foreground">{label}</span>
                   <span className="text-xs font-medium text-foreground tabular-nums">
                     {isUnlimited ? (
-                      <span className="text-emerald-600 dark:text-emerald-400">{t('billing.unlimited')}</span>
+                      <span className="text-primary/80 dark:text-primary">{t('billing.unlimited')}</span>
                     ) : (
                       `${quota.used} / ${quota.limit}`
                     )}