diff --git a/frontend/src/app/dashboard/glossaries/page.tsx b/frontend/src/app/dashboard/glossaries/page.tsx
index 0cfd4cb..9471817 100644
--- a/frontend/src/app/dashboard/glossaries/page.tsx
+++ b/frontend/src/app/dashboard/glossaries/page.tsx
@@ -295,24 +295,24 @@ export default function GlossariesPage() {
           <h1 className="text-4xl md:text-5xl mb-3 leading-tight text-brand-dark dark:text-white font-serif font-medium tracking-tight">
             {renderTitle(t('glossaries.title') || "Glossaires & Contexte")}
           </h1>
-          <p className="text-brand-dark/80 dark:text-white/50 text-sm font-light leading-relaxed">
+          <p className="text-[#555555] dark:text-white/60 text-sm font-light leading-relaxed">
             {t('glossaries.description') || "Gérez vos glossaires et instructions de contexte pour des traductions plus précises."}
           </p>
         </div>
       </div>
 
       {/* ── Bandeau usage ──────────────────────────────────── */}
-      <div className="mb-8 flex items-center gap-3 p-4 rounded-xl bg-brand-accent/8 dark:bg-brand-accent/10 border border-brand-accent/25">
-        <div className="w-7 h-7 rounded-full bg-brand-accent text-white flex items-center justify-center shrink-0">
+      <div className="mb-8 flex items-center gap-3 p-4 rounded-xl bg-[#F5F0EA] dark:bg-brand-accent/10 border border-[#D4B896] dark:border-brand-accent/20">
+        <div className="w-7 h-7 rounded-full bg-[#8B6F47] text-white flex items-center justify-center shrink-0">
           <Info size={13} />
         </div>
-        <p className="text-[11px] text-brand-dark/85 dark:text-white/70 font-medium leading-relaxed flex-1">
-          <strong className="font-bold text-brand-dark dark:text-white">Pour utiliser un glossaire dans une traduction :</strong>{' '}
-          cliquez sur <span className="font-bold text-brand-accent">« Utiliser »</span> sur la carte souhaitée. Vous serez redirigé sur la page Traduire avec ce glossaire déjà sélectionné.
+        <p className="text-[11px] text-[#2D2D2D] dark:text-white/70 font-medium leading-relaxed flex-1">
+          <strong className="font-bold text-[#1A1A1A] dark:text-white">Pour utiliser un glossaire dans une traduction :</strong>{' '}
+          cliquez sur <span className="font-bold text-[#7A5C35] dark:text-brand-accent">« Utiliser »</span> sur la carte souhaitée. Vous serez redirigé sur la page Traduire avec ce glossaire déjà sélectionné.
         </p>
         <Link
           href="/dashboard/translate"
-          className="shrink-0 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-accent hover:underline whitespace-nowrap"
+          className="shrink-0 flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-[#7A5C35] dark:text-brand-accent hover:underline whitespace-nowrap"
         >
           Aller traduire <ArrowRight size={11} />
         </Link>
@@ -326,7 +326,7 @@ export default function GlossariesPage() {
             "pb-4 px-6 text-xs uppercase tracking-widest font-bold border-b-2 transition-all cursor-pointer",
             activeTab === 'glossaries'
               ? "border-brand-accent text-brand-dark dark:text-white"
-              : "border-transparent text-brand-dark/60 dark:text-white/40 hover:text-brand-dark dark:hover:text-white/70"
+              : "border-transparent text-[#555555] dark:text-white/40 hover:text-[#1A1A1A] dark:hover:text-white/80"
           )}
         >
           {t('glossaries.tabs.glossaries') || "Glossaires terminologiques"}
@@ -337,7 +337,7 @@ export default function GlossariesPage() {
             "pb-4 px-6 text-xs uppercase tracking-widest font-bold border-b-2 transition-all cursor-pointer",
             activeTab === 'context'
               ? "border-brand-accent text-brand-dark dark:text-white"
-              : "border-transparent text-brand-dark/60 dark:text-white/40 hover:text-brand-dark dark:hover:text-white/70"
+              : "border-transparent text-[#555555] dark:text-white/40 hover:text-[#1A1A1A] dark:hover:text-white/80"
           )}
         >
           {t('glossaries.tabs.context') || "Consignes de contexte (IA)"}
@@ -366,21 +366,21 @@ export default function GlossariesPage() {
                   {t('glossaries.status.active')}
                 </span>
               ) : (
-                <span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-brand-dark/30 dark:text-white/30 bg-brand-muted dark:bg-white/5 px-3 py-1 rounded-full border border-black/5 dark:border-white/5">
+                <span className="flex items-center gap-1.5 text-[10px] font-bold uppercase tracking-wider text-[#555555] dark:text-white/30 bg-[#EBEBEB] dark:bg-white/5 px-3 py-1 rounded-full border border-[#CCCCCC] dark:border-white/5">
                   {t('glossaries.status.inactive')}
                 </span>
               )}
             </div>
 
             {/* Explanation box */}
-            <div className="mb-5 p-3.5 rounded-xl bg-brand-muted/40 dark:bg-white/[0.03] border border-black/5 dark:border-white/5">
-              <p className="text-[11px] text-brand-dark/60 dark:text-white/50 font-light leading-relaxed">
-                <strong className="font-bold text-brand-dark/80 dark:text-white/80">{t('glossaries.instructions.whatForBold')}</strong> {t('glossaries.instructions.whatForDesc')}
+            <div className="mb-5 p-3.5 rounded-xl bg-[#F5F3EF] dark:bg-white/[0.03] border border-[#D9D6D0] dark:border-white/5">
+              <p className="text-[11px] text-[#3D3D3D] dark:text-white/50 font-medium leading-relaxed">
+                <strong className="font-bold text-[#1A1A1A] dark:text-white/80">{t('glossaries.instructions.whatForBold')}</strong> {t('glossaries.instructions.whatForDesc')}
               </p>
-              <p className="text-[11px] text-brand-accent/80 dark:text-brand-accent/70 font-medium mt-2 italic">
+              <p className="text-[11px] text-[#6B4F2A] dark:text-brand-accent/70 font-medium mt-2 italic">
                 {t('glossaries.instructions.example')}
               </p>
-              <p className="text-[10px] text-brand-accent font-bold mt-2.5 flex items-center gap-1.5 border-t border-black/5 dark:border-white/5 pt-2">
+              <p className="text-[10px] text-[#6B4F2A] dark:text-brand-accent font-bold mt-2.5 flex items-center gap-1.5 border-t border-[#D9D6D0] dark:border-white/5 pt-2">
                 <Info size={11} />
                 Remarque : Ces consignes s'appliquent automatiquement à toutes vos traductions réalisées en mode Pro LLM.
               </p>
@@ -393,13 +393,13 @@ export default function GlossariesPage() {
               className="w-full h-40 p-4 bg-brand-muted/30 dark:bg-white/[0.02] rounded-xl border border-black/5 dark:border-white/10 text-xs focus:ring-2 focus:ring-brand-accent/20 focus:border-brand-accent/30 transition-all outline-none resize-y"
             />
             <div className="flex justify-between items-center mt-4">
-              <p className="text-[10px] text-brand-dark/30 dark:text-white/25 font-light">
+              <p className="text-[10px] text-[#777777] dark:text-white/25 font-light">
                 {systemPrompt.length > 0 ? t('glossaries.instructions.charCount', { count: systemPrompt.length }) : t('glossaries.instructions.emptyHint')}
               </p>
               <div className="flex gap-3">
                 <button
                   onClick={handleClearPrompt}
-                  className="px-5 py-2.5 bg-brand-muted dark:bg-white/5 text-brand-dark/50 dark:text-white/40 rounded-lg text-xs font-bold uppercase tracking-wider hover:text-brand-dark dark:hover:text-white transition-all cursor-pointer"
+                  className="px-5 py-2.5 bg-[#EBEBEB] dark:bg-white/5 text-[#444444] dark:text-white/40 rounded-lg text-xs font-bold uppercase tracking-wider hover:text-[#1A1A1A] dark:hover:text-white transition-all cursor-pointer"
                 >
                   <Trash2 size={12} className="inline mr-1.5" />{t('glossaries.instructions.clearAll')}
                 </button>
@@ -427,7 +427,7 @@ export default function GlossariesPage() {
                   <h2 className="text-lg font-serif font-medium text-brand-dark dark:text-white tracking-tight">
                     {t('glossaries.grid.title')} <span className="italic">{t('glossaries.grid.titleHighlight')}</span>
                   </h2>
-                  <p className="text-[11px] text-brand-dark/45 dark:text-white/40 font-light mt-1">
+                  <p className="text-[11px] text-[#555555] dark:text-white/40 font-light mt-1">
                     {glossaries.length > 0
                       ? t('glossaries.grid.countWithAction', { count: glossaries.length, plural: glossaries.length > 1 ? 's' : '' })
                       : t('glossaries.grid.emptyAction')}
@@ -435,7 +435,7 @@ export default function GlossariesPage() {
                 </div>
                 <div className="flex items-center gap-3 shrink-0">
                   {currentTargetInfo && (
-                    <span className="flex items-center gap-1.5 text-[10px] font-bold text-brand-dark/50 dark:text-white/40 bg-brand-muted dark:bg-white/5 border border-black/5 dark:border-white/5 px-3 py-1.5 rounded-full">
+                    <span className="flex items-center gap-1.5 text-[10px] font-bold text-[#444444] dark:text-white/40 bg-[#EBEBEB] dark:bg-white/5 border border-[#CCCCCC] dark:border-white/5 px-3 py-1.5 rounded-full">
                       <span>{t('glossaries.grid.activeTranslation')}</span>
                       <span>{currentTargetInfo.flag} {currentTargetInfo.label}</span>
                     </span>
@@ -463,7 +463,7 @@ export default function GlossariesPage() {
                     <Library size={24} />
                   </div>
                   <p className="text-base font-serif font-medium text-brand-dark dark:text-white mb-1">{t('glossaries.empty')}</p>
-                  <p className="text-xs text-brand-dark/40 dark:text-white/40 font-light mb-5">{t('glossaries.emptyDesc')}</p>
+                  <p className="text-xs text-[#555555] dark:text-white/40 font-light mb-5">{t('glossaries.emptyDesc')}</p>
                   <button
                     onClick={() => setCreateDialogOpen(true)}
                     className="premium-button px-6 py-2.5 text-[11px] uppercase tracking-widest !rounded-lg inline-flex items-center gap-2 cursor-pointer font-bold"
@@ -519,22 +519,22 @@ export default function GlossariesPage() {
                               <h3 className="text-sm font-serif font-semibold text-brand-dark dark:text-white tracking-tight leading-snug line-clamp-2 group-hover:text-brand-accent transition-colors">
                                 {glossary.name}
                               </h3>
-                              <p className="text-[11px] text-brand-dark/65 dark:text-white/50 font-medium flex items-center gap-1 mt-0.5">
+                              <p className="text-[11px] text-[#555555] dark:text-white/50 font-medium flex items-center gap-1 mt-0.5">
                                 <span>{srcInfo?.flag ?? '🌐'}</span>
                                 <span>{srcInfo?.label ?? glossary.source_language}</span>
-                                <span className="text-brand-accent font-bold">→</span>
+                                <span className="text-[#7A5C35] dark:text-brand-accent font-bold">→</span>
                                 <span>{tgtInfo?.flag ?? '🌐'}</span>
                                 <span>{tgtInfo?.label ?? glossary.target_language}</span>
                               </p>
                             </div>
                           </div>
 
-                          <div className="flex justify-between items-center pb-4 text-xs text-brand-dark/60 dark:text-white/40">
-                            <span className="flex items-center gap-1 font-semibold text-brand-dark/75 dark:text-white/65">
-                              <Hash size={12} className="text-brand-accent" />
+                          <div className="flex justify-between items-center pb-4">
+                            <span className="flex items-center gap-1 text-xs font-semibold text-[#333333] dark:text-white/65">
+                              <Hash size={12} className="text-[#8B6F47] dark:text-brand-accent" />
                               {termCount} {t('glossaries.defineTerms') || "termes"}
                             </span>
-                            <span className="flex items-center gap-1 font-mono text-[9px] text-brand-dark/55 dark:text-white/40">
+                            <span className="flex items-center gap-1 font-mono text-[9px] text-[#666666] dark:text-white/40">
                               <Calendar size={11} />
                               {new Date(glossary.created_at).toLocaleDateString()}
                             </span>
@@ -544,13 +544,13 @@ export default function GlossariesPage() {
                         <div className="flex gap-2 pt-4 border-t border-black/5 dark:border-white/10 mt-auto shrink-0 w-full">
                           <Link
                             href={`/dashboard/glossaries/${glossary.id}`}
-                            className="flex-none px-3 py-2 rounded-lg bg-brand-muted dark:bg-white/5 hover:bg-brand-accent/10 text-brand-dark/75 dark:text-white/50 hover:text-brand-accent text-[10px] font-bold uppercase tracking-wider transition-all border border-black/8 dark:border-white/10"
+                            className="flex-none px-3 py-2 rounded-lg bg-[#EBEBEB] dark:bg-white/5 hover:bg-[#E0D9D1] text-[#333333] dark:text-white/50 hover:text-[#1A1A1A] text-[10px] font-bold uppercase tracking-wider transition-all border border-[#CCCCCC] dark:border-white/10"
                           >
                             Éditer
                           </Link>
                           <Link
                             href={`/dashboard/translate?glossaryId=${glossary.id}`}
-                            className="flex-1 text-center py-2 rounded-lg bg-brand-accent hover:bg-brand-accent/90 text-white text-[10px] font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-1.5"
+                            className="flex-1 text-center py-2 rounded-lg bg-[#1A1A1A] hover:bg-[#333333] text-white text-[10px] font-bold uppercase tracking-wider transition-all flex items-center justify-center gap-1.5"
                           >
                             Utiliser <ArrowRight size={11} />
                           </Link>
@@ -567,7 +567,7 @@ export default function GlossariesPage() {
               <div className="flex justify-center">
                 <button
                   onClick={() => setShowCreateSection(true)}
-                  className="flex items-center gap-2 px-6 py-3 rounded-xl border border-dashed border-brand-accent/40 text-brand-accent text-xs font-bold uppercase tracking-widest hover:bg-brand-accent/5 transition-all cursor-pointer"
+                  className="flex items-center gap-2 px-6 py-3 rounded-xl border-2 border-dashed border-[#999999] text-[#333333] dark:text-white/60 dark:border-white/20 text-xs font-bold uppercase tracking-widest hover:border-[#555555] hover:text-[#1A1A1A] dark:hover:text-white transition-all cursor-pointer"
                 >
                   <Plus size={14} />
                   Ajouter un glossaire
@@ -595,7 +595,7 @@ export default function GlossariesPage() {
                     </button>
                   )}
                 </div>
-                <p className="text-xs text-brand-dark/50 dark:text-white/40 font-light">
+                <p className="text-xs text-[#555555] dark:text-white/40 font-light">
                   Choisissez un modèle professionnel, importez un fichier CSV ou créez manuellement.
                 </p>
               </div>