cinqcinqdev-seo 0.1.31 → 0.1.33

package/dist/runtime/pages/admin/editor/[id].vue

@@ -405,14 +405,14 @@ const savePage = async () => {
     <input type="file" ref="fileInput" class="hidden" accept="image/*" @change="handleFileUpload" />
 
     <!-- ── Top Bar ── -->
-    <header class="h-12 bg-background/80 backdrop-blur-md border-b px-6 flex items-center justify-between z-[60] shrink-0">
+    <header class="h-12 bg-white/80 backdrop-blur-md border-b px-6 flex items-center justify-between z-[60] shrink-0">
       <div class="flex items-center gap-4">
-        <NuxtLink :to="basePath" class="text-mgray-400 hover:text-black transition-colors">←</NuxtLink>
-        <div class="flex gap-1 bg-mgray-100 p-1 rounded-md">
-          <button @click="isLeftSidebarOpen = !isLeftSidebarOpen" :class="['p-1.5 rounded transition-all', isLeftSidebarOpen ? 'bg-background shadow-sm text-primary' : 'text-mgray-400']" title="Structure">
+        <NuxtLink :to="basePath" class="text-gray-400 hover:text-black transition-colors">←</NuxtLink>
+        <div class="flex gap-1 bg-gray-100 p-1 rounded-md">
+          <button @click="isLeftSidebarOpen = !isLeftSidebarOpen" :class="['p-1.5 rounded transition-all', isLeftSidebarOpen ? 'bg-white shadow-sm text-[#3d35ff]' : 'text-gray-400']" title="Structure">
             <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M4 6h16M4 12h10M4 18h16"/></svg>
           </button>
-          <button @click="isRightSidebarOpen = !isRightSidebarOpen" :class="['p-1.5 rounded transition-all', isRightSidebarOpen ? 'bg-background shadow-sm text-primary' : 'text-mgray-400']" title="Propriétés">
+          <button @click="isRightSidebarOpen = !isRightSidebarOpen" :class="['p-1.5 rounded transition-all', isRightSidebarOpen ? 'bg-white shadow-sm text-[#3d35ff]' : 'text-gray-400']" title="Propriétés">
             <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M12 6h8M12 12h8M12 18h8M4 6h.01M4 12h.01M4 18h.01"/></svg>
           </button>
         </div>
@@ -420,23 +420,23 @@ const savePage = async () => {
       </div>
 
       <div class="flex items-center gap-4">
-        <div class="flex bg-mgray-100 p-1 rounded-full scale-90">
-          <button @click="viewMode = 'structure'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest', viewMode === 'structure' ? 'bg-background text-black' : 'text-mgray-400']">Structure</button>
-          <button @click="viewMode = 'seo'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest', viewMode === 'seo' ? 'bg-background text-black' : 'text-mgray-400']">Audit SEO</button>
+        <div class="flex bg-gray-100 p-1 rounded-full scale-90">
+          <button @click="viewMode = 'structure'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest', viewMode === 'structure' ? 'bg-white text-black' : 'text-gray-400']">Structure</button>
+          <button @click="viewMode = 'seo'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase tracking-widest', viewMode === 'seo' ? 'bg-white text-black' : 'text-gray-400']">Audit SEO</button>
         </div>
-        <NuxtLink v-if="page?.slug" :to="pageViewUrl" target="_blank" class="flex items-center gap-1.5 px-4 py-2 rounded-full text-[9px] font-black uppercase tracking-widest border border-mgray-200 text-mgray-500 hover:border-primary hover:text-primary transition-all">
+        <NuxtLink v-if="page?.slug" :to="pageViewUrl" target="_blank" class="flex items-center gap-1.5 px-4 py-2 rounded-full text-[9px] font-black uppercase tracking-widest border border-gray-200 text-gray-500 hover:border-[#3d35ff] hover:text-[#3d35ff] transition-all">
           <svg class="w-3 h-3" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M10 6H6a2 2 0 00-2 2v10a2 2 0 002 2h10a2 2 0 002-2v-4M14 4h6m0 0v6m0-6L10 14"/></svg>
           Voir la page
         </NuxtLink>
         <button @click="togglePublished"
           :class="[
   'flex items-center gap-1.5 px-4 py-2 rounded-full text-[9px] font-black uppercase tracking-widest border transition-all active:scale-95',
-  page?.status === 'published' ? 'bg-green-50 border-green-200 text-green-600 hover:bg-green-100' : 'bg-mgray-50 border-mgray-200 text-mgray-400 hover:border-mgray-300'
+  page?.status === 'published' ? 'bg-green-50 border-green-200 text-green-600 hover:bg-green-100' : 'bg-gray-50 border-gray-200 text-gray-400 hover:border-gray-300'
 ]">
-          <span :class="['w-1.5 h-1.5 rounded-full', page?.status === 'published' ? 'bg-green-500' : 'bg-mgray-300']"></span>
+          <span :class="['w-1.5 h-1.5 rounded-full', page?.status === 'published' ? 'bg-green-500' : 'bg-gray-300']"></span>
           {{ page?.status === "published" ? "Publi\xE9" : "Brouillon" }}
         </button>
-        <button @click="savePage" class="relative bg-primary text-white px-5 py-2 rounded-full text-[9px] font-black uppercase tracking-widest shadow-lg active:scale-95 transition-all">
+        <button @click="savePage" class="relative bg-[#3d35ff] text-white px-5 py-2 rounded-full text-[9px] font-black uppercase tracking-widest shadow-lg active:scale-95 transition-all">
           {{ isSaving ? "Enregistrement..." : "Mettre \xE0 jour" }}
           <span v-if="!isSaving && dirtyBlocks.size > 0"
             class="absolute -top-1.5 -right-1.5 w-4 h-4 bg-amber-400 text-white rounded-full text-[7px] font-black flex items-center justify-center">
@@ -449,10 +449,10 @@ const savePage = async () => {
     <div class="flex flex-1 overflow-hidden relative">
 
       <!-- ── Left Sidebar: Structure / SEO Tree ── -->
-      <aside :class="['bg-background border-r z-50 transition-all duration-300 overflow-hidden flex flex-col', isLeftSidebarOpen ? 'w-64' : 'w-0']">
+      <aside :class="['bg-white border-r z-50 transition-all duration-300 overflow-hidden flex flex-col', isLeftSidebarOpen ? 'w-64' : 'w-0']">
         <div class="p-6 w-64 h-full flex flex-col">
           <div v-if="viewMode === 'structure'" class="flex-1 space-y-2 overflow-y-auto">
-            <h3 class="text-[9px] font-black text-mgray-300 uppercase mb-4 italic tracking-widest">Arborescence</h3>
+            <h3 class="text-[9px] font-black text-gray-300 uppercase mb-4 italic tracking-widest">Arborescence</h3>
             <div v-if="page?.content_locked" class="p-4 rounded-xl bg-amber-50 border border-amber-100 text-amber-600 text-[8px] font-black uppercase tracking-widest text-center">
               Page verrouillée<br/><span class="font-normal normal-case opacity-60 text-[7px]">Seul le SEO est éditable</span>
             </div>
@@ -460,7 +460,7 @@ const savePage = async () => {
               <div v-for="(block, index) in page.content" :key="index" @click="selectedBlockIndex = index"
                 :class="[
   'p-3 rounded-xl border-2 transition-all cursor-pointer group flex items-center justify-between gap-2',
-  selectedBlockIndex === index ? 'border-primary bg-blue-50/50 text-primary' : dirtyBlocks.has(index) ? 'border-amber-300 bg-amber-50 text-amber-700' : 'border-mgray-50 bg-mgray-50 text-mgray-500'
+  selectedBlockIndex === index ? 'border-[#3d35ff] bg-blue-50/50 text-[#3d35ff]' : dirtyBlocks.has(index) ? 'border-amber-300 bg-amber-50 text-amber-700' : 'border-gray-50 bg-gray-50 text-gray-500'
 ]">
                 <input
                   v-if="editingLabelIndex === index"
@@ -485,14 +485,14 @@ const savePage = async () => {
                   </div>
                 </div>
               </div>
-              <button @click="showAddModal = true" class="w-full py-3 border-2 border-dashed border-mgray-100 rounded-xl text-[9px] font-black text-mgray-400 hover:border-primary transition-all">+ SECTION</button>
+              <button @click="showAddModal = true" class="w-full py-3 border-2 border-dashed border-gray-100 rounded-xl text-[9px] font-black text-gray-400 hover:border-[#3d35ff] transition-all">+ SECTION</button>
             </template>
           </div>
 
           <div v-else class="flex-1 overflow-y-auto">
-            <h3 class="text-[9px] font-black text-primary uppercase mb-6 italic tracking-widest">Hiérarchie Hn</h3>
+            <h3 class="text-[9px] font-black text-[#3d35ff] uppercase mb-6 italic tracking-widest">Hiérarchie Hn</h3>
             <div v-for="(node, nIdx) in seoTree" :key="nIdx"
-              class="mb-2 p-2 rounded border-l-2 bg-mgray-50/50 cursor-pointer hover:bg-blue-50/50"
+              class="mb-2 p-2 rounded border-l-2 bg-gray-50/50 cursor-pointer hover:bg-blue-50/50"
               :style="{ marginLeft: `${tagDepth(node.tag) * 14}px`, borderColor: tagColor(node.tag) }"
               @click="selectedBlockIndex = node.blockIndex">
               <span class="text-[7px] font-black uppercase block" :style="{ color: tagColor(node.tag) }">{{ node.tag }}</span>
@@ -504,26 +504,26 @@ const savePage = async () => {
 
       <!-- ── Preview ── -->
       <main class="flex-1 overflow-y-auto p-4 md:p-10 bg-[#F5F5F7]">
-        <div class="max-w-4xl mx-auto bg-background shadow-2xl rounded-[40px] overflow-hidden min-h-screen border border-black/5">
+        <div class="max-w-4xl mx-auto bg-white shadow-2xl rounded-[40px] overflow-hidden min-h-screen border border-black/5">
           <div v-for="(block, index) in page.content" :key="index" @click="selectedBlockIndex = index"
-            class="relative cursor-pointer" :class="{ 'ring-4 ring-primary ring-inset z-10': selectedBlockIndex === index }">
+            class="relative cursor-pointer" :class="{ 'ring-4 ring-[#3d35ff] ring-inset z-10': selectedBlockIndex === index }">
             <component :is="resolveSection(block.type)" v-bind="resolvePropsForPreview(block.props)" />
           </div>
         </div>
       </main>
 
       <!-- ── Right Panel: Props / SEO ── -->
-      <aside :class="['bg-background border-l z-50 transition-all duration-300 overflow-y-auto', isRightSidebarOpen ? 'w-80' : 'w-0']">
+      <aside :class="['bg-white border-l z-50 transition-all duration-300 overflow-y-auto', isRightSidebarOpen ? 'w-80' : 'w-0']">
         <div class="p-6 w-80">
 
           <!-- Mode tabs + lang switcher -->
           <div class="flex items-center justify-between mb-5 border-b pb-4">
-            <div class="flex gap-0.5 bg-mgray-100 p-0.5 rounded-lg">
+            <div class="flex gap-0.5 bg-gray-100 p-0.5 rounded-lg">
               <button @click="rightPanelMode = 'block'"
                 :disabled="selectedBlockIndex === null || page?.content_locked"
                 :class="[
   'px-2.5 py-1 text-[7px] font-black uppercase rounded-md transition-all',
-  rightPanelMode === 'block' ? 'bg-background shadow text-primary' : 'text-mgray-400',
+  rightPanelMode === 'block' ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400',
   selectedBlockIndex === null || page?.content_locked ? 'opacity-30 cursor-not-allowed' : ''
 ]">
                 Bloc
@@ -531,16 +531,16 @@ const savePage = async () => {
               <button @click="rightPanelMode = 'seo'"
                 :class="[
   'px-2.5 py-1 text-[7px] font-black uppercase rounded-md transition-all',
-  rightPanelMode === 'seo' ? 'bg-background shadow text-primary' : 'text-mgray-400'
+  rightPanelMode === 'seo' ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400'
 ]">
                 SEO
               </button>
             </div>
-            <div class="flex gap-0.5 bg-mgray-100 p-0.5 rounded-lg">
+            <div class="flex gap-0.5 bg-gray-100 p-0.5 rounded-lg">
               <button v-for="lang in LANGS" :key="lang" @click="editingLang = lang"
                 :class="[
   'px-2 py-1 text-[7px] font-black uppercase rounded-md transition-all',
-  editingLang === lang ? 'bg-background shadow text-primary' : 'text-mgray-400'
+  editingLang === lang ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400'
 ]">
                 {{ langLabel(lang) }}
               </button>
@@ -551,7 +551,7 @@ const savePage = async () => {
           <div v-if="rightPanelMode === 'block' && selectedBlockIndex !== null">
 
             <!-- Diff -->
-            <div v-if="blockDiffs.has(selectedBlockIndex)" class="mb-5 rounded-2xl overflow-hidden border border-amber-200 bg-background">
+            <div v-if="blockDiffs.has(selectedBlockIndex)" class="mb-5 rounded-2xl overflow-hidden border border-amber-200 bg-white">
               <button @click="showDiff = !showDiff"
                 class="w-full flex items-center justify-between px-4 py-3 bg-amber-50 hover:bg-amber-100 transition-colors">
                 <span class="flex items-center gap-2 text-[10px] font-black text-amber-700 uppercase tracking-wider">
@@ -562,7 +562,7 @@ const savePage = async () => {
               </button>
               <div v-if="showDiff" class="divide-y divide-gray-50">
                 <div v-for="change in blockDiffs.get(selectedBlockIndex)" :key="change.field" class="px-4 py-3">
-                  <p class="text-[9px] font-black uppercase tracking-widest text-mgray-400 mb-2">{{ change.field }}</p>
+                  <p class="text-[9px] font-black uppercase tracking-widest text-gray-400 mb-2">{{ change.field }}</p>
                   <div class="flex items-start gap-2 mb-1.5">
                     <span class="w-1 self-stretch rounded-full bg-red-300 shrink-0"></span>
                     <p class="text-[11px] text-red-500 line-through leading-snug break-words min-w-0">{{ change.old }}</p>
@@ -578,40 +578,40 @@ const savePage = async () => {
             <!-- AI Generate -->
             <div v-if="aiEnabled" class="mb-5">
               <div v-if="!showAiPrompt && !isGenerating">
-                <button @click="showAiPrompt = true" class="w-full py-2.5 rounded-xl border-2 border-dashed border-primary-300 text-primary text-[8px] font-black uppercase tracking-widest hover:border-primary hover:bg-primary-50 transition-all">
+                <button @click="showAiPrompt = true" class="w-full py-2.5 rounded-xl border-2 border-dashed border-[#3d35ff]/30 text-[#3d35ff] text-[8px] font-black uppercase tracking-widest hover:border-[#3d35ff] hover:bg-[#3d35ff]/5 transition-all">
                   ✦ Générer avec l'IA
                 </button>
               </div>
-              <div v-else-if="isGenerating" class="py-2.5 rounded-xl bg-primary-50 border border-primary-200 text-center text-[8px] font-black uppercase tracking-widest text-primary animate-pulse">
+              <div v-else-if="isGenerating" class="py-2.5 rounded-xl bg-[#3d35ff]/5 border border-[#3d35ff]/20 text-center text-[8px] font-black uppercase tracking-widest text-[#3d35ff] animate-pulse">
                 Génération en cours...
               </div>
-              <div v-else class="p-3 bg-primary-50 rounded-2xl border border-primary-200 space-y-2">
-                <label class="text-[8px] font-black uppercase text-primary-600 tracking-widest block">Décrivez votre contenu</label>
-                <textarea v-model="aiPromptText" rows="2" placeholder="Ex: service de création de sites web pour PME..." class="w-full bg-background rounded-xl p-2.5 text-[10px] outline-none ring-1 ring-primary-200 focus:ring-primary resize-none"></textarea>
+              <div v-else class="p-3 bg-[#3d35ff]/5 rounded-2xl border border-[#3d35ff]/20 space-y-2">
+                <label class="text-[8px] font-black uppercase text-[#3d35ff]/60 tracking-widest block">Décrivez votre contenu</label>
+                <textarea v-model="aiPromptText" rows="2" placeholder="Ex: service de création de sites web pour PME..." class="w-full bg-white rounded-xl p-2.5 text-[10px] outline-none ring-1 ring-[#3d35ff]/20 focus:ring-[#3d35ff] resize-none"></textarea>
                 <div class="flex gap-2">
                   <button @click="showAiPrompt = false;
-  aiPromptText = ''" class="flex-1 py-2 rounded-xl border border-mgray-200 text-[8px] font-black uppercase text-mgray-400 hover:border-mgray-300 transition-all">Annuler</button>
-                  <button @click="generateWithAI" :disabled="!aiPromptText.trim()" class="flex-1 py-2 rounded-xl bg-primary text-white text-[8px] font-black uppercase tracking-widest disabled:opacity-40 transition-all active:scale-95">✦ Générer</button>
+  aiPromptText = ''" class="flex-1 py-2 rounded-xl border border-gray-200 text-[8px] font-black uppercase text-gray-400 hover:border-gray-300 transition-all">Annuler</button>
+                  <button @click="generateWithAI" :disabled="!aiPromptText.trim()" class="flex-1 py-2 rounded-xl bg-[#3d35ff] text-white text-[8px] font-black uppercase tracking-widest disabled:opacity-40 transition-all active:scale-95">✦ Générer</button>
                 </div>
               </div>
             </div>
 
             <!-- Anchor ID -->
-            <div class="mb-6 pb-6 border-b border-mgray-50">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">ID / Ancre</label>
-              <div class="flex items-center bg-mgray-50 rounded-xl ring-1 ring-gray-100 focus-within:ring-primary overflow-hidden">
-                <span class="text-[9px] font-mono text-mgray-300 pl-3 pr-1 shrink-0">#</span>
+            <div class="mb-6 pb-6 border-b border-gray-50">
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">ID / Ancre</label>
+              <div class="flex items-center bg-gray-50 rounded-xl ring-1 ring-gray-100 focus-within:ring-[#3d35ff] overflow-hidden">
+                <span class="text-[9px] font-mono text-gray-300 pl-3 pr-1 shrink-0">#</span>
                 <input v-model="page.content[selectedBlockIndex].id" class="flex-1 bg-transparent p-3 text-[10px] font-mono outline-none" placeholder="mon-ancre" />
               </div>
             </div>
 
             <!-- Group tabs -->
-            <div v-if="selectedCMSConfig?.groups" class="flex gap-1 bg-mgray-100 p-1 rounded-xl mb-6">
+            <div v-if="selectedCMSConfig?.groups" class="flex gap-1 bg-gray-100 p-1 rounded-xl mb-6">
               <button v-for="group in selectedCMSConfig.groups" :key="group.key"
                 @click="selectedFieldGroup = group.key"
                 :class="[
   'flex-1 py-2 text-[8px] font-black uppercase tracking-widest rounded-lg transition-all',
-  selectedFieldGroup === group.key ? 'bg-background shadow text-primary' : 'text-mgray-400 hover:text-mgray-600'
+  selectedFieldGroup === group.key ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400 hover:text-gray-600'
 ]">
                 {{ group.label }}
               </button>
@@ -619,7 +619,7 @@ const savePage = async () => {
 
             <!-- Fields -->
             <div v-for="(field, name) in visibleFields" :key="name" class="mb-6">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">{{ field.label }}</label>
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">{{ field.label }}</label>
 
               <!-- Image -->
               <div v-if="field.type === 'image'" class="space-y-2">
@@ -628,10 +628,10 @@ const savePage = async () => {
                   <button @click="page.content[selectedBlockIndex].props[name] = ''" class="absolute inset-0 bg-black/60 text-white text-[8px] font-black opacity-0 group-hover:opacity-100 transition-opacity">SUPPRIMER</button>
                 </div>
                 <div class="flex gap-2">
-                  <button @click="triggerUpload(page.content[selectedBlockIndex].props, name)" class="flex-1 py-2.5 bg-mgray-50 border-2 border-dashed rounded-xl text-[9px] font-black hover:bg-mgray-100 transition-all" :disabled="isUploading">
+                  <button @click="triggerUpload(page.content[selectedBlockIndex].props, name)" class="flex-1 py-2.5 bg-gray-50 border-2 border-dashed rounded-xl text-[9px] font-black hover:bg-gray-100 transition-all" :disabled="isUploading">
                     {{ isUploading ? "ENVOI..." : "\u2191 UPLOAD" }}
                   </button>
-                  <button @click="openGallery(page.content[selectedBlockIndex].props, name)" class="flex-1 py-2.5 bg-mgray-50 border-2 border-dashed rounded-xl text-[9px] font-black hover:bg-mgray-100 transition-all">
+                  <button @click="openGallery(page.content[selectedBlockIndex].props, name)" class="flex-1 py-2.5 bg-gray-50 border-2 border-dashed rounded-xl text-[9px] font-black hover:bg-gray-100 transition-all">
                     ⊞ GALERIE
                   </button>
                 </div>
@@ -640,26 +640,26 @@ const savePage = async () => {
               <!-- Text i18n -->
               <template v-else-if="field.type === 'text'">
                 <div v-if="field.i18n" class="relative">
-                  <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-primary-400">{{ langLabel(editingLang) }}</span>
-                  <input :value="getI18nProp(name, editingLang)" @input="setI18nProp(name, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" />
+                  <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-[#3d35ff]/40">{{ langLabel(editingLang) }}</span>
+                  <input :value="getI18nProp(name, editingLang)" @input="setI18nProp(name, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
                 </div>
                 <input v-else :value="page.content[selectedBlockIndex].props[name]" @input="page.content[selectedBlockIndex].props[name] = $event.target.value;
-  trigger()" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" />
+  trigger()" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
               </template>
 
               <!-- Textarea i18n -->
               <template v-else-if="field.type === 'textarea'">
                 <div v-if="field.i18n" class="relative">
-                  <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-primary-400">{{ langLabel(editingLang) }}</span>
-                  <textarea :value="getI18nProp(name, editingLang)" @input="setI18nProp(name, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" rows="3" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-primary"></textarea>
+                  <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-[#3d35ff]/40">{{ langLabel(editingLang) }}</span>
+                  <textarea :value="getI18nProp(name, editingLang)" @input="setI18nProp(name, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" rows="3" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]"></textarea>
                 </div>
                 <textarea v-else :value="page.content[selectedBlockIndex].props[name]" @input="page.content[selectedBlockIndex].props[name] = $event.target.value;
-  trigger()" rows="3" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100"></textarea>
+  trigger()" rows="3" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100"></textarea>
               </template>
 
               <!-- Select -->
               <select v-else-if="field.type === 'select'" :value="page.content[selectedBlockIndex].props[name]" @change="page.content[selectedBlockIndex].props[name] = $event.target.value;
-  trigger()" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold ring-1 ring-gray-100 outline-none">
+  trigger()" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold ring-1 ring-gray-100 outline-none">
                 <option v-for="opt in field.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
               </select>
 
@@ -670,7 +670,7 @@ const savePage = async () => {
   trigger()"
                   :class="[
   'p-2.5 rounded-xl border-2 text-center transition-all',
-  page.content[selectedBlockIndex].props[name] === opt.value ? 'border-primary bg-blue-50/50 text-primary' : 'border-mgray-100 text-mgray-400 hover:border-mgray-200'
+  page.content[selectedBlockIndex].props[name] === opt.value ? 'border-[#3d35ff] bg-blue-50/50 text-[#3d35ff]' : 'border-gray-100 text-gray-400 hover:border-gray-200'
 ]">
                   <span class="text-base block mb-1">{{ opt.icon }}</span>
                   <span class="text-[7px] font-black uppercase tracking-wide block leading-tight">{{ opt.label }}</span>
@@ -678,7 +678,7 @@ const savePage = async () => {
               </div>
 
               <!-- Color -->
-              <div v-else-if="field.type === 'color'" class="flex gap-2 bg-mgray-50 p-2 rounded-xl ring-1 ring-gray-100">
+              <div v-else-if="field.type === 'color'" class="flex gap-2 bg-gray-50 p-2 rounded-xl ring-1 ring-gray-100">
                 <button v-for="c in ['#3d35ff', '#ffffff', '#000000', '#F9F9FB']" :key="c" @click="page.content[selectedBlockIndex].props[name] = c;
   trigger()" class="w-5 h-5 rounded-full border border-black/5" :style="{ background: c }"></button>
                 <input :value="page.content[selectedBlockIndex].props[name]" @input="page.content[selectedBlockIndex].props[name] = $event.target.value;
@@ -687,7 +687,7 @@ const savePage = async () => {
 
               <!-- List -->
               <div v-else-if="field.type === 'list'" class="space-y-4">
-                <div v-for="(item, idx) in page.content[selectedBlockIndex].props[name] || []" :key="idx" class="p-4 bg-mgray-50 rounded-2xl relative border">
+                <div v-for="(item, idx) in page.content[selectedBlockIndex].props[name] || []" :key="idx" class="p-4 bg-gray-50 rounded-2xl relative border">
                   <button @click="page.content[selectedBlockIndex].props[name].splice(idx, 1);
   trigger()" class="absolute top-2 right-2 text-red-400 text-[8px]">✕</button>
                   <div v-for="(subField, subName) in field.itemFields" :key="subName" class="mb-2">
@@ -695,16 +695,16 @@ const savePage = async () => {
                     <div v-if="subField.type === 'image'" class="mt-1 space-y-1.5">
                       <img v-if="item[subName]" :src="item[subName]" class="w-full h-16 rounded-lg border object-cover" />
                       <div class="flex gap-1.5">
-                        <button @click="triggerUpload(item, subName)" class="flex-1 text-[8px] font-black uppercase bg-background px-2 py-1.5 rounded-lg shadow-sm border">↑ Upload</button>
-                        <button @click="openGallery(item, subName)" class="flex-1 text-[8px] font-black uppercase bg-background px-2 py-1.5 rounded-lg shadow-sm border">⊞ Galerie</button>
+                        <button @click="triggerUpload(item, subName)" class="flex-1 text-[8px] font-black uppercase bg-white px-2 py-1.5 rounded-lg shadow-sm border">↑ Upload</button>
+                        <button @click="openGallery(item, subName)" class="flex-1 text-[8px] font-black uppercase bg-white px-2 py-1.5 rounded-lg shadow-sm border">⊞ Galerie</button>
                       </div>
                     </div>
                     <select v-else-if="subField.type === 'select'" :value="item[subName]" @change="item[subName] = $event.target.value;
-  trigger()" class="w-full bg-background rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm border">
+  trigger()" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm border">
                       <option v-for="opt in subField.options" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
                     </select>
                     <template v-else-if="subField.i18n">
-                      <input :value="getI18nVal(item[subName], editingLang)" @input="setI18nVal(item, subName, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" :placeholder="langLabel(editingLang)" class="w-full bg-background rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
+                      <input :value="getI18nVal(item[subName], editingLang)" @input="setI18nVal(item, subName, editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" :placeholder="langLabel(editingLang)" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
                     </template>
                     <div v-else-if="subField.type === 'stringlist'" class="space-y-1 mt-1">
                       <div v-for="(feat, fi) in item[subName] || []" :key="fi" class="flex gap-1 items-center">
@@ -713,33 +713,33 @@ const savePage = async () => {
                           @input="setI18nVal(item[subName], fi, editingLang, $event.target.value)"
                           :dir="editingLang === 'ar' ? 'rtl' : 'ltr'"
                           :placeholder="langLabel(editingLang)"
-                          class="flex-1 bg-background rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
+                          class="flex-1 bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
                         <button @click="item[subName].splice(fi, 1);
   trigger()" class="text-red-400 text-[8px] px-1 shrink-0">✕</button>
                       </div>
                       <button @click="if (!item[subName]) item[subName] = [];
   item[subName].push({ fr: '', ar: '', en: '' });
-  trigger()" class="w-full py-1.5 border border-dashed rounded-lg text-[8px] font-black text-mgray-400 hover:border-mgray-400 transition">+ Fonctionnalité</button>
+  trigger()" class="w-full py-1.5 border border-dashed rounded-lg text-[8px] font-black text-gray-400 hover:border-gray-400 transition">+ Fonctionnalité</button>
                     </div>
                     <input v-else :value="item[subName]" @input="item[subName] = $event.target.value;
-  trigger()" class="w-full bg-background rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
+  trigger()" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
                   </div>
                 </div>
                 <button @click="if (!page.content[selectedBlockIndex].props[name]) page.content[selectedBlockIndex].props[name] = [];
   page.content[selectedBlockIndex].props[name].push({});
-  trigger()" class="w-full py-2 border-2 border-dashed rounded-xl text-[8px] font-black text-mgray-400">+ AJOUTER</button>
+  trigger()" class="w-full py-2 border-2 border-dashed rounded-xl text-[8px] font-black text-gray-400">+ AJOUTER</button>
               </div>
             </div>
           </div>
 
           <!-- ── SEO CONFIG PANEL ── -->
           <div v-else-if="rightPanelMode === 'seo'">
-            <h3 class="text-[9px] font-black text-mgray-300 uppercase mb-4 italic tracking-widest">Config SEO</h3>
+            <h3 class="text-[9px] font-black text-gray-300 uppercase mb-4 italic tracking-widest">Config SEO</h3>
 
             <!-- AI Audit -->
             <div v-if="aiEnabled" class="mb-6">
               <button @click="runSeoAudit" :disabled="isAuditing"
-                class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-primary-100 text-primary hover:bg-primary hover:text-white transition-all disabled:opacity-50">
+                class="w-full flex items-center justify-center gap-2 py-2.5 rounded-xl text-[10px] font-black uppercase tracking-widest bg-[#3d35ff]/10 text-[#3d35ff] hover:bg-[#3d35ff] hover:text-white transition-all disabled:opacity-50">
                 <svg v-if="isAuditing" class="w-3.5 h-3.5 animate-spin" fill="none" viewBox="0 0 24 24"><circle class="opacity-25" cx="12" cy="12" r="10" stroke="currentColor" stroke-width="4"/><path class="opacity-75" fill="currentColor" d="M4 12a8 8 0 018-8v8z"/></svg>
                 <svg v-else class="w-3.5 h-3.5" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M9.663 17h4.673M12 3v1m6.364 1.636l-.707.707M21 12h-1M4 12H3m3.343-5.657l-.707-.707m2.828 9.9a5 5 0 117.072 0l-.548.547A3.374 3.374 0 0014 18.469V19a2 2 0 11-4 0v-.531c0-.895-.356-1.754-.988-2.386l-.548-.547z"/></svg>
                 {{ isAuditing ? "Analyse..." : "Audit IA" }}
@@ -748,7 +748,7 @@ const savePage = async () => {
 
             <!-- Audit results -->
             <div v-if="aiEnabled && seoAudit" class="mb-6 space-y-3">
-              <div class="flex items-center gap-3 p-3 bg-mgray-50 rounded-xl">
+              <div class="flex items-center gap-3 p-3 bg-gray-50 rounded-xl">
                 <div :class="[
   'w-11 h-11 rounded-xl flex items-center justify-center text-sm font-black shrink-0',
   seoAudit.score >= 75 ? 'bg-green-100 text-green-700' : seoAudit.score >= 50 ? 'bg-amber-100 text-amber-700' : 'bg-red-100 text-red-600'
@@ -756,15 +756,15 @@ const savePage = async () => {
                   {{ seoAudit.score }}
                 </div>
                 <div>
-                  <p class="text-[9px] font-black uppercase tracking-widest text-mgray-400">Score SEO</p>
+                  <p class="text-[9px] font-black uppercase tracking-widest text-gray-400">Score SEO</p>
                   <p :class="['text-[11px] font-black', seoAudit.score >= 75 ? 'text-green-600' : seoAudit.score >= 50 ? 'text-amber-600' : 'text-red-500']">
                     {{ seoAudit.score >= 75 ? "Bon" : seoAudit.score >= 50 ? "\xC0 am\xE9liorer" : "Insuffisant" }}
                   </p>
                 </div>
-                <button @click="applySeoAudit" class="ml-auto px-3 py-1.5 bg-primary text-white rounded-lg text-[9px] font-black uppercase tracking-wide hover:brightness-90 transition shrink-0">Appliquer</button>
+                <button @click="applySeoAudit" class="ml-auto px-3 py-1.5 bg-[#3d35ff] text-white rounded-lg text-[9px] font-black uppercase tracking-wide hover:bg-[#2f28cc] transition shrink-0">Appliquer</button>
               </div>
               <div v-if="seoAudit.issues?.length" class="space-y-1.5">
-                <p class="text-[8px] font-black uppercase tracking-widest text-mgray-400">Problèmes</p>
+                <p class="text-[8px] font-black uppercase tracking-widest text-gray-400">Problèmes</p>
                 <div v-for="(issue, i) in seoAudit.issues" :key="i"
                   :class="[
   'flex items-start gap-2 p-2.5 rounded-lg text-[10px]',
@@ -775,89 +775,89 @@ const savePage = async () => {
                 </div>
               </div>
               <div v-if="seoAudit.suggestions?.length" class="space-y-1.5">
-                <p class="text-[8px] font-black uppercase tracking-widest text-mgray-400">Recommandations</p>
-                <div v-for="(tip, i) in seoAudit.suggestions" :key="i" class="flex items-start gap-2 p-2.5 bg-primary-50 rounded-lg text-[10px] text-primary">
+                <p class="text-[8px] font-black uppercase tracking-widest text-gray-400">Recommandations</p>
+                <div v-for="(tip, i) in seoAudit.suggestions" :key="i" class="flex items-start gap-2 p-2.5 bg-[#3d35ff]/5 rounded-lg text-[10px] text-[#3d35ff]">
                   <span class="shrink-0 font-black mt-0.5">→</span>{{ tip }}
                 </div>
               </div>
               <div v-if="seoAudit.keywords?.length">
-                <p class="text-[8px] font-black uppercase tracking-widest text-mgray-400 mb-1.5">Mots-clés suggérés</p>
+                <p class="text-[8px] font-black uppercase tracking-widest text-gray-400 mb-1.5">Mots-clés suggérés</p>
                 <div class="flex flex-wrap gap-1">
-                  <span v-for="kw in seoAudit.keywords" :key="kw" class="px-2 py-1 bg-mgray-100 text-mgray-600 rounded-lg text-[9px] font-semibold">{{ kw }}</span>
+                  <span v-for="kw in seoAudit.keywords" :key="kw" class="px-2 py-1 bg-gray-100 text-gray-600 rounded-lg text-[9px] font-semibold">{{ kw }}</span>
                 </div>
               </div>
-              <div class="border-t border-mgray-100 pt-3">
-                <p class="text-[8px] font-black uppercase tracking-widest text-mgray-400 mb-1">Meta title suggéré</p>
-                <p class="text-[10px] text-mgray-700 bg-mgray-50 rounded-lg p-2">{{ seoAudit.meta_title?.fr }}</p>
-                <p class="text-[8px] font-black uppercase tracking-widest text-mgray-400 mb-1 mt-2">Meta description suggérée</p>
-                <p class="text-[10px] text-mgray-500 bg-mgray-50 rounded-lg p-2">{{ seoAudit.meta_description?.fr }}</p>
+              <div class="border-t border-gray-100 pt-3">
+                <p class="text-[8px] font-black uppercase tracking-widest text-gray-400 mb-1">Meta title suggéré</p>
+                <p class="text-[10px] text-gray-700 bg-gray-50 rounded-lg p-2">{{ seoAudit.meta_title?.fr }}</p>
+                <p class="text-[8px] font-black uppercase tracking-widest text-gray-400 mb-1 mt-2">Meta description suggérée</p>
+                <p class="text-[10px] text-gray-500 bg-gray-50 rounded-lg p-2">{{ seoAudit.meta_description?.fr }}</p>
               </div>
             </div>
 
-            <div class="border-t border-mgray-100 pt-4 mb-5"></div>
+            <div class="border-t border-gray-100 pt-4 mb-5"></div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">Type de page</label>
-              <select v-model="page.type" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary">
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">Type de page</label>
+              <select v-model="page.type" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]">
                 <option v-for="opt in pageTypeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
               </select>
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">Titre de la page</label>
-              <input v-model="page.title" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" placeholder="Nom interne de la page" />
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">Titre de la page</label>
+              <input v-model="page.title" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" placeholder="Nom interne de la page" />
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">URL (Slug)</label>
-              <div class="flex items-center bg-mgray-50 rounded-xl ring-1 ring-gray-100 focus-within:ring-primary overflow-hidden">
-                <span class="text-[9px] font-mono text-mgray-300 pl-3 pr-1 shrink-0">/</span>
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">URL (Slug)</label>
+              <div class="flex items-center bg-gray-50 rounded-xl ring-1 ring-gray-100 focus-within:ring-[#3d35ff] overflow-hidden">
+                <span class="text-[9px] font-mono text-gray-300 pl-3 pr-1 shrink-0">/</span>
                 <input v-model="page.slug" class="flex-1 bg-transparent p-3 text-[10px] font-mono outline-none" placeholder="mon-url" />
               </div>
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">Meta Title</label>
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">Meta Title</label>
               <div class="relative">
-                <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-primary-400">{{ langLabel(editingLang) }}</span>
-                <input :value="getSeoI18n('meta_title', editingLang)" @input="setSeoI18n('meta_title', editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" placeholder="Title de la page..." class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" />
+                <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-[#3d35ff]/40">{{ langLabel(editingLang) }}</span>
+                <input :value="getSeoI18n('meta_title', editingLang)" @input="setSeoI18n('meta_title', editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" placeholder="Title de la page..." class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
               </div>
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">Meta Description</label>
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">Meta Description</label>
               <div class="relative">
-                <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-primary-400">{{ langLabel(editingLang) }}</span>
-                <textarea :value="getSeoI18n('meta_description', editingLang)" @input="setSeoI18n('meta_description', editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" rows="4" placeholder="Description courte de la page..." class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-primary"></textarea>
+                <span class="absolute -top-1 right-0 text-[6px] font-black uppercase text-[#3d35ff]/40">{{ langLabel(editingLang) }}</span>
+                <textarea :value="getSeoI18n('meta_description', editingLang)" @input="setSeoI18n('meta_description', editingLang, $event.target.value)" :dir="editingLang === 'ar' ? 'rtl' : 'ltr'" rows="4" placeholder="Description courte de la page..." class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]"></textarea>
               </div>
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">OG Title <span class="text-mgray-300 normal-case font-medium">(défaut: meta title)</span></label>
-              <input :value="page?.seo_config?.og_title ?? ''" @input="updateSeoField('og_title', $event.target.value)" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" />
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">OG Title <span class="text-gray-300 normal-case font-medium">(défaut: meta title)</span></label>
+              <input :value="page?.seo_config?.og_title ?? ''" @input="updateSeoField('og_title', $event.target.value)" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">OG Description</label>
-              <textarea :value="page?.seo_config?.og_description ?? ''" @input="updateSeoField('og_description', $event.target.value)" rows="3" class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-primary"></textarea>
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">OG Description</label>
+              <textarea :value="page?.seo_config?.og_description ?? ''" @input="updateSeoField('og_description', $event.target.value)" rows="3" class="w-full bg-gray-50 rounded-xl p-3 text-[10px] outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]"></textarea>
             </div>
 
             <div class="mb-5">
-              <label class="text-[8px] font-black uppercase text-mgray-400 mb-2 block tracking-widest">OG Image (URL)</label>
-              <input :value="page?.seo_config?.og_image ?? ''" @input="updateSeoField('og_image', $event.target.value)" placeholder="https://..." class="w-full bg-mgray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" />
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">OG Image (URL)</label>
+              <input :value="page?.seo_config?.og_image ?? ''" @input="updateSeoField('og_image', $event.target.value)" placeholder="https://..." class="w-full bg-gray-50 rounded-xl p-3 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
             </div>
 
-            <div class="flex items-center justify-between p-3 bg-mgray-50 rounded-xl ring-1 ring-gray-100">
-              <label class="text-[8px] font-black uppercase text-mgray-400 tracking-widest">No Index</label>
+            <div class="flex items-center justify-between p-3 bg-gray-50 rounded-xl ring-1 ring-gray-100">
+              <label class="text-[8px] font-black uppercase text-gray-400 tracking-widest">No Index</label>
               <button @click="updateSeoField('no_index', !page?.seo_config?.no_index)"
-                :class="['w-9 h-5 rounded-full transition-colors relative', page?.seo_config?.no_index ? 'bg-primary' : 'bg-mgray-200']">
-                <span :class="['absolute top-0.5 w-4 h-4 bg-background rounded-full shadow transition-transform', page?.seo_config?.no_index ? 'translate-x-4' : 'translate-x-0.5']"></span>
+                :class="['w-9 h-5 rounded-full transition-colors relative', page?.seo_config?.no_index ? 'bg-[#3d35ff]' : 'bg-gray-200']">
+                <span :class="['absolute top-0.5 w-4 h-4 bg-white rounded-full shadow transition-transform', page?.seo_config?.no_index ? 'translate-x-4' : 'translate-x-0.5']"></span>
               </button>
             </div>
           </div>
 
           <!-- Empty state -->
-          <div v-else class="text-center py-12 text-mgray-300">
+          <div v-else class="text-center py-12 text-gray-300">
             <p class="text-[9px] font-black uppercase tracking-widest">Sélectionnez un bloc</p>
             <p class="text-[8px] mt-2 opacity-60">ou passez en mode SEO →</p>
           </div>
@@ -868,21 +868,21 @@ const savePage = async () => {
 
     <!-- ── Gallery Modal ── -->
     <div v-if="showGallery" class="fixed inset-0 bg-black/90 backdrop-blur-xl z-[110] flex items-center justify-center p-6" @click.self="showGallery = false">
-      <div class="bg-background max-w-4xl w-full rounded-[32px] flex flex-col overflow-hidden shadow-2xl" style="max-height:85vh" @click.stop>
+      <div class="bg-white max-w-4xl w-full rounded-[32px] flex flex-col overflow-hidden shadow-2xl" style="max-height:85vh" @click.stop>
         <div class="flex items-center gap-4 px-8 py-5 border-b shrink-0">
-          <h2 class="text-[11px] font-black uppercase tracking-[0.4em] text-primary shrink-0">Galerie</h2>
+          <h2 class="text-[11px] font-black uppercase tracking-[0.4em] text-[#3d35ff] shrink-0">Galerie</h2>
           <div class="flex-1 relative">
-            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-mgray-300 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/></svg>
-            <input v-model="gallerySearch" type="text" placeholder="Rechercher une image..." class="w-full bg-mgray-50 rounded-xl pl-9 pr-4 py-2 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-primary" />
+            <svg class="absolute left-3 top-1/2 -translate-y-1/2 w-3.5 h-3.5 text-gray-300 pointer-events-none" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M21 21l-4.35-4.35M17 11A6 6 0 115 11a6 6 0 0112 0z"/></svg>
+            <input v-model="gallerySearch" type="text" placeholder="Rechercher une image..." class="w-full bg-gray-50 rounded-xl pl-9 pr-4 py-2 text-[10px] font-bold outline-none ring-1 ring-gray-100 focus:ring-[#3d35ff]" />
           </div>
-          <button @click="showGallery = false" class="text-mgray-400 hover:text-black transition-colors text-lg leading-none shrink-0">✕</button>
+          <button @click="showGallery = false" class="text-gray-400 hover:text-black transition-colors text-lg leading-none shrink-0">✕</button>
         </div>
         <div class="flex-1 overflow-y-auto p-6">
-          <div v-if="isLoadingGallery" class="flex items-center justify-center py-20 text-mgray-300 text-[9px] font-black uppercase tracking-widest">Chargement...</div>
-          <div v-else-if="filteredGallery.length === 0" class="flex items-center justify-center py-20 text-mgray-300 text-[9px] font-black uppercase tracking-widest">Aucune image trouvée</div>
+          <div v-if="isLoadingGallery" class="flex items-center justify-center py-20 text-gray-300 text-[9px] font-black uppercase tracking-widest">Chargement...</div>
+          <div v-else-if="filteredGallery.length === 0" class="flex items-center justify-center py-20 text-gray-300 text-[9px] font-black uppercase tracking-widest">Aucune image trouvée</div>
           <div v-else class="grid grid-cols-3 sm:grid-cols-4 md:grid-cols-5 gap-3">
             <button v-for="img in filteredGallery" :key="img.url" @click="selectGalleryImage(img.url)"
-              class="group relative aspect-square rounded-xl overflow-hidden border-2 border-transparent hover:border-primary transition-all focus:outline-none">
+              class="group relative aspect-square rounded-xl overflow-hidden border-2 border-transparent hover:border-[#3d35ff] transition-all focus:outline-none">
               <img :src="img.url" :alt="img.name" class="w-full h-full object-cover group-hover:scale-105 transition-transform duration-300" />
               <div class="absolute bottom-0 inset-x-0 bg-black/60 px-2 py-1 translate-y-full group-hover:translate-y-0 transition-transform duration-200">
                 <p class="text-white text-[7px] font-bold truncate">{{ img.name }}</p>
@@ -895,16 +895,16 @@ const savePage = async () => {
 
     <!-- ── Add Section Modal ── -->
     <div v-if="showAddModal" class="fixed inset-0 bg-black/95 backdrop-blur-xl z-[100] flex items-center justify-center p-6" @click.self="showAddModal = false">
-      <div class="bg-background max-w-4xl w-full rounded-[40px] p-12 shadow-2xl overflow-y-auto max-h-[85vh]">
-        <h2 class="text-[12px] font-black uppercase text-center mb-12 tracking-[0.4em] italic text-primary">Nouvelle Section</h2>
+      <div class="bg-white max-w-4xl w-full rounded-[40px] p-12 shadow-2xl overflow-y-auto max-h-[85vh]">
+        <h2 class="text-[12px] font-black uppercase text-center mb-12 tracking-[0.4em] italic text-[#3d35ff]">Nouvelle Section</h2>
         <div class="grid grid-cols-2 md:grid-cols-4 gap-8">
           <button v-for="(conf, type) in CMS_COMPONENTS" :key="type"
             @click="page.content.push({ type, props: JSON.parse(JSON.stringify(adminSettings.applyPresets(type, conf.defaultProps))) });
   showAddModal = false;
   selectedBlockIndex = page.content.length - 1"
-            class="flex flex-col items-center gap-6 p-8 border-2 border-mgray-50 rounded-[40px] hover:border-primary transition-all group active:scale-95">
+            class="flex flex-col items-center gap-6 p-8 border-2 border-gray-50 rounded-[40px] hover:border-[#3d35ff] transition-all group active:scale-95">
             <span class="text-6xl group-hover:scale-110 transition-transform">{{ conf.icon }}</span>
-            <span class="text-[10px] font-black uppercase tracking-widest text-mgray">{{ conf.label }}</span>
+            <span class="text-[10px] font-black uppercase tracking-widest text-gray-900">{{ conf.label }}</span>
           </button>
         </div>
       </div>