cinqcinqdev-seo 0.1.10 → 0.1.12

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

@@ -10,24 +10,69 @@ const bucket = config?.storageBucket || "site";
 const pageId = route.params.id;
 const CMS_COMPONENTS = useAdminSections();
 const { vueApp } = useNuxtApp();
-const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || type;
+const resolveSection = (type) => vueApp.component(`Sections${type}`) || vueApp.component(type) || null;
 const { data: page } = await useAsyncData(`admin-edit-${pageId}`, async () => {
   const { data } = await supabase.from(table).select("*").eq("id", pageId).maybeSingle();
   return data;
 });
-useHead({ title: computed(() => page.value?.title ? `${page.value.title} \u2014 Editor` : "Editor") });
-const isLeftOpen = ref(true);
-const isRightOpen = ref(true);
+useHead({ title: computed(() => page.value?.title ? `${page.value.title} \u2014 \xC9diteur` : "\xC9diteur \u2014 Admin") });
+const isLeftSidebarOpen = ref(true);
+const isRightSidebarOpen = ref(true);
 const viewMode = ref("structure");
 const selectedBlockIndex = ref(null);
-const selectedFieldGroup = ref("design");
+const editingLabelIndex = ref(null);
 const isSaving = ref(false);
 const isUploading = ref(false);
 const showAddModal = ref(false);
-const editingLabelIndex = ref(null);
+const selectedFieldGroup = ref("design");
+const rightPanelMode = ref("seo");
+const savedSnapshot = ref(JSON.stringify(page.value?.content ?? []));
+const readableVal = (v) => {
+  if (v === void 0 || v === null || v === "") return "(vide)";
+  if (typeof v === "object" && !Array.isArray(v) && ("fr" in v || "en" in v)) return v.fr || v.en || "(vide)";
+  if (Array.isArray(v)) return `${v.length} \xE9l\xE9ment(s)`;
+  return String(v);
+};
+const blockDiffs = computed(() => {
+  const _track = JSON.stringify(page.value?.content);
+  if (!page.value?.content) return /* @__PURE__ */ new Map();
+  const original = JSON.parse(savedSnapshot.value);
+  const result = /* @__PURE__ */ new Map();
+  page.value.content.forEach((block, i) => {
+    if (i >= original.length) {
+      result.set(i, [{ field: "section", old: "(nouveau)", new: block.type }]);
+      return;
+    }
+    const origBlock = original[i];
+    if (JSON.stringify(block) === JSON.stringify(origBlock)) return;
+    const changes = [];
+    const allFields = /* @__PURE__ */ new Set([...Object.keys(block.props || {}), ...Object.keys(origBlock.props || {})]);
+    for (const field of allFields) {
+      const curr = block.props?.[field];
+      const orig = origBlock.props?.[field];
+      if (JSON.stringify(curr) === JSON.stringify(orig)) continue;
+      if (Array.isArray(curr) || Array.isArray(orig)) {
+        const c = curr || [];
+        const o = orig || [];
+        if (c.length !== o.length) {
+          changes.push({ field, old: `${o.length} \xE9l\xE9ment(s)`, new: `${c.length} \xE9l\xE9ment(s)` });
+        } else {
+          const changed = c.filter((item, idx) => JSON.stringify(item) !== JSON.stringify(o[idx])).length;
+          if (changed > 0) changes.push({ field, old: `${o.length} \xE9l\xE9ment(s)`, new: `${changed} modifi\xE9(s)` });
+        }
+        continue;
+      }
+      changes.push({ field, old: readableVal(orig), new: readableVal(curr) });
+    }
+    if (changes.length) result.set(i, changes);
+  });
+  return result;
+});
+const dirtyBlocks = computed(() => new Set(blockDiffs.value.keys()));
+const showDiff = ref(false);
 const editingLang = ref("fr");
 const LANGS = ["fr", "ar", "en"];
-const i18n0 = (fr = "") => ({ fr, ar: "", en: "" });
+const langLabel = (l) => l === "ar" ? "\u0639" : l.toUpperCase();
 const resolveI18nForPreview = (val) => {
   if (!val || typeof val !== "object" || Array.isArray(val)) return val ?? "";
   if ("fr" in val || "en" in val || "ar" in val) {
@@ -39,75 +84,172 @@ const resolvePropsForPreview = (props) => {
   if (!props) return {};
   return Object.fromEntries(
     Object.entries(props).map(([k, v]) => {
-      if (Array.isArray(v)) return [k, v.map(
-        (item) => typeof item === "object" && item ? resolvePropsForPreview(item) : item
-      )];
+      if (Array.isArray(v)) return [k, v.map((item) => typeof item === "object" && item ? resolvePropsForPreview(item) : item)];
       return [k, resolveI18nForPreview(v)];
     })
   );
 };
-const getI18nVal = (val, lang) => {
+const getI18nProp = (fieldName, lang) => {
+  const val = page.value?.content[selectedBlockIndex.value]?.props[fieldName];
   if (!val) return "";
   if (typeof val === "string") return lang === "fr" ? val : "";
   return val[lang] || "";
 };
-const setI18nVal = (obj, key, lang, value) => {
-  const current = obj[key];
-  const out = { fr: "", ar: "", en: "" };
-  if (typeof current === "string") out.fr = current;
-  else if (current && typeof current === "object") Object.assign(out, current);
-  out[lang] = value;
-  obj[key] = out;
+const setI18nProp = (fieldName, lang, newValue) => {
+  const props = page.value?.content[selectedBlockIndex.value]?.props;
+  if (!props) return;
+  const current = props[fieldName];
+  const obj = { fr: "", ar: "", en: "" };
+  if (typeof current === "string") {
+    obj.fr = current;
+  } else if (current && typeof current === "object") {
+    Object.assign(obj, current);
+  }
+  obj[lang] = newValue;
+  props[fieldName] = obj;
 };
-const getBlockI18n = (fieldName, lang) => {
-  const val = page.value?.content[selectedBlockIndex.value]?.props[fieldName];
+const getI18nVal = (val, lang) => {
   if (!val) return "";
   if (typeof val === "string") return lang === "fr" ? val : "";
   return val[lang] || "";
 };
-const setBlockI18n = (fieldName, lang, value) => {
-  const props = page.value?.content[selectedBlockIndex.value]?.props;
-  if (!props) return;
-  const current = props[fieldName];
-  const out = { fr: "", ar: "", en: "" };
-  if (typeof current === "string") out.fr = current;
-  else if (current && typeof current === "object") Object.assign(out, current);
-  out[lang] = value;
-  props[fieldName] = out;
+const setI18nVal = (obj, key, lang, newValue) => {
+  const current = obj[key];
+  const i18nObj = { fr: "", ar: "", en: "" };
+  if (typeof current === "string") {
+    i18nObj.fr = current;
+  } else if (current && typeof current === "object") {
+    Object.assign(i18nObj, current);
+  }
+  i18nObj[lang] = newValue;
+  obj[key] = i18nObj;
 };
+const tagDepth = (tag) => {
+  const n = parseInt(tag.replace("h", ""));
+  return isNaN(n) ? 0 : n - 1;
+};
+const tagColor = (tag) => ({ h1: "#3d35ff", h2: "#6b63ff", h3: "#aaa", h4: "#ccc" })[tag] ?? "#ddd";
+const seoTree = computed(() => {
+  if (!page.value?.content) return [];
+  const tree = [];
+  page.value.content.forEach((block, bIdx) => {
+    const titleText = resolveI18nForPreview(block.props.title);
+    if (block.props.titleTag && titleText) tree.push({ tag: block.props.titleTag, text: titleText, blockIndex: bIdx });
+    if (block.props.items) {
+      block.props.items.forEach((item) => {
+        const text = resolveI18nForPreview(item.title || item.question || item.name);
+        const tag = item.titleTag || block.props.itemTag;
+        if (text && tag) tree.push({ tag, text, blockIndex: bIdx });
+      });
+    }
+  });
+  return tree;
+});
 const selectedCMSConfig = computed(
   () => selectedBlockIndex.value !== null ? CMS_COMPONENTS[page.value?.content[selectedBlockIndex.value]?.type] : null
 );
 const visibleFields = computed(() => {
-  const config2 = selectedCMSConfig.value;
-  if (!config2?.fields) return {};
-  if (!config2.groups) return config2.fields;
+  const cfg = selectedCMSConfig.value;
+  if (!cfg?.fields) return {};
+  if (!cfg.groups) return cfg.fields;
   return Object.fromEntries(
-    Object.entries(config2.fields).filter(([, f]) => f.group === selectedFieldGroup.value)
+    Object.entries(cfg.fields).filter(([, f]) => f.group === selectedFieldGroup.value)
   );
 });
-watch(selectedBlockIndex, () => {
+watch(selectedBlockIndex, (newVal) => {
   selectedFieldGroup.value = selectedCMSConfig.value?.groups?.[0]?.key ?? "design";
+  rightPanelMode.value = newVal !== null && !page.value?.content_locked ? "block" : "seo";
+  showDiff.value = newVal !== null && blockDiffs.value.has(newVal);
 });
-const moveBlock = (index, dir) => {
-  const newIdx = dir === "up" ? index - 1 : index + 1;
-  if (newIdx < 0 || newIdx >= page.value.content.length) return;
-  const content = [...page.value.content];
-  const item = content.splice(index, 1)[0];
-  content.splice(newIdx, 0, item);
-  page.value.content = content;
-  selectedBlockIndex.value = newIdx;
+const isGenerating = ref(false);
+const showAiPrompt = ref(false);
+const aiPromptText = ref("");
+const generateWithAI = async () => {
+  if (!selectedCMSConfig.value || selectedBlockIndex.value === null || !aiPromptText.value.trim()) return;
+  isGenerating.value = true;
+  showAiPrompt.value = false;
+  const fields = Object.entries(selectedCMSConfig.value.fields).filter(([, f]) => (f.type === "text" || f.type === "textarea") && f.i18n).map(([name, f]) => ({ name, label: f.label }));
+  const currentProps = page.value.content[selectedBlockIndex.value].props;
+  const itemFieldsConfig = selectedCMSConfig.value.fields.items?.itemFields ? Object.entries(selectedCMSConfig.value.fields.items.itemFields).filter(([, f]) => f.type === "text" || f.type === "textarea" || f.type === "stringlist").map(([name, f]) => ({ name, label: f.label, i18n: !!f.i18n, type: f.type })) : [];
+  try {
+    const result = await $fetch("/api/admin-cms/ai/generate", {
+      method: "POST",
+      body: {
+        sectionType: page.value.content[selectedBlockIndex.value].type,
+        sectionLabel: selectedCMSConfig.value.label,
+        fields,
+        currentProps,
+        prompt: aiPromptText.value,
+        itemFieldsConfig
+      }
+    });
+    const props = page.value.content[selectedBlockIndex.value].props;
+    for (const [fieldName, value] of Object.entries(result)) {
+      if (fieldName === "items" && Array.isArray(value)) {
+        if (!Array.isArray(props.items)) props.items = [];
+        value.forEach((aiItem, idx) => {
+          if (!props.items[idx]) props.items[idx] = {};
+          for (const [itemField, val] of Object.entries(aiItem)) {
+            if (Array.isArray(val)) {
+              props.items[idx][itemField] = val.map((v) => {
+                if (typeof v === "object" && v !== null) return { fr: "", ar: "", en: "", ...v };
+                return { fr: String(v), ar: "", en: "" };
+              });
+            } else if (typeof val === "object" && val !== null && ("fr" in val || "ar" in val || "en" in val)) {
+              const base = { fr: "", ar: "", en: "" };
+              const current = props.items[idx][itemField];
+              if (typeof current === "object" && current) Object.assign(base, current);
+              props.items[idx][itemField] = { ...base, ...val };
+            } else if (typeof val === "string" && val !== "...") {
+              props.items[idx][itemField] = val;
+            }
+          }
+        });
+      } else if (props[fieldName] !== void 0 && typeof value === "object" && !Array.isArray(value)) {
+        const base = { fr: "", ar: "", en: "" };
+        const current = props[fieldName];
+        if (typeof current === "object" && current) Object.assign(base, current);
+        props[fieldName] = { ...base, ...value };
+      }
+    }
+  } catch (err) {
+    console.error(err);
+    alert("Erreur IA. V\xE9rifiez la cl\xE9 OPENROUTER_API_KEY dans .env");
+  } finally {
+    isGenerating.value = false;
+    aiPromptText.value = "";
+  }
 };
-const removeBlock = (index) => {
-  if (!confirm("Delete this section?")) return;
-  page.value.content.splice(index, 1);
-  selectedBlockIndex.value = null;
+const seoAudit = ref(null);
+const isAuditing = ref(false);
+const runSeoAudit = async () => {
+  if (!page.value) return;
+  isAuditing.value = true;
+  seoAudit.value = null;
+  try {
+    const result = await $fetch("/api/admin-cms/ai/seo-audit", {
+      method: "POST",
+      body: { pageTitle: page.value.title, pageType: page.value.type, content: page.value.content, seoConfig: page.value.seo_config }
+    });
+    seoAudit.value = result;
+  } catch (err) {
+    console.error(err);
+  } finally {
+    isAuditing.value = false;
+  }
 };
-const addSection = (type) => {
-  const conf = CMS_COMPONENTS[type];
-  page.value.content.push({ type, props: JSON.parse(JSON.stringify(conf.defaultProps)) });
-  showAddModal.value = false;
-  selectedBlockIndex.value = page.value.content.length - 1;
+const applySeoAudit = () => {
+  if (!seoAudit.value || !page.value) return;
+  const mt = seoAudit.value.meta_title || {};
+  const md = seoAudit.value.meta_description || {};
+  page.value = {
+    ...page.value,
+    seo_config: {
+      ...page.value.seo_config || {},
+      meta_title: { fr: mt.fr || "", ar: mt.ar || "", en: mt.en || "" },
+      meta_description: { fr: md.fr || "", ar: md.ar || "", en: md.en || "" }
+    }
+  };
 };
 const fileInput = ref(null);
 let activeUploadTarget = null;
@@ -120,40 +262,72 @@ const handleFileUpload = async (event) => {
   if (!file || !activeUploadTarget) return;
   isUploading.value = true;
   try {
-    const ext = file.name.split(".").pop();
-    const path = `uploads/${Date.now()}-${Math.random().toString(36).substring(7)}.${ext}`;
-    const { error: uploadError } = await supabase.storage.from(bucket).upload(path, file);
+    const fileExt = file.name.split(".").pop();
+    const fileName = `${Date.now()}-${Math.random().toString(36).substring(7)}.${fileExt}`;
+    const filePath = `uploads/${fileName}`;
+    const { error: uploadError } = await supabase.storage.from(bucket).upload(filePath, file);
     if (uploadError) throw uploadError;
-    const { data } = supabase.storage.from(bucket).getPublicUrl(path);
+    const { data } = supabase.storage.from(bucket).getPublicUrl(filePath);
     activeUploadTarget.obj[activeUploadTarget.key] = data.publicUrl;
   } catch (err) {
+    alert(`Erreur upload : V\xE9rifiez le bucket '${bucket}' sur Supabase.`);
     console.error(err);
-    alert(`Upload error. Make sure the "${bucket}" bucket exists in Supabase.`);
   } finally {
     isUploading.value = false;
     activeUploadTarget = null;
     if (fileInput.value) fileInput.value.value = "";
   }
 };
-const tagOptions = [
-  { value: "h1", label: "H1" },
-  { value: "h2", label: "H2" },
-  { value: "h3", label: "H3" },
-  { value: "h4", label: "H4" },
-  { value: "div", label: "DIV" }
-];
-const pageTypeOptions = computed(
-  () => config?.pageTypes?.map((t) => ({ value: t.id, label: t.label })) || []
-);
-const typeUrlPrefixes = {
-  service_page: "/service/",
-  landing_page: "/",
-  page: "/"
-};
-const pageViewUrl = computed(() => {
-  const prefix = typeUrlPrefixes[page.value?.type] ?? "/";
-  return `${prefix}${page.value?.slug ?? ""}`;
+const showGallery = ref(false);
+const galleryImages = ref([]);
+const isLoadingGallery = ref(false);
+const gallerySearch = ref("");
+const filteredGallery = computed(() => {
+  const q = gallerySearch.value.trim().toLowerCase();
+  if (!q) return galleryImages.value;
+  return galleryImages.value.filter((img) => img.name.toLowerCase().includes(q));
 });
+const listBucketRecursive = async (bkt, prefix = "") => {
+  const { data, error } = await supabase.storage.from(bkt).list(prefix || void 0, { limit: 500 });
+  if (error || !data) return [];
+  const files = [];
+  const folderPromises = [];
+  for (const f of data) {
+    if (f.name === ".emptyFolderPlaceholder") continue;
+    const fullPath = prefix ? `${prefix}/${f.name}` : f.name;
+    if (/\.\w{2,5}$/.test(f.name)) {
+      files.push({ name: f.name, url: supabase.storage.from(bkt).getPublicUrl(fullPath).data.publicUrl });
+    } else {
+      folderPromises.push(listBucketRecursive(bkt, fullPath));
+    }
+  }
+  const nested = (await Promise.all(folderPromises)).flat();
+  return [...files, ...nested];
+};
+const openGallery = async (targetObj, key) => {
+  activeUploadTarget = { obj: targetObj, key };
+  showGallery.value = true;
+  gallerySearch.value = "";
+  isLoadingGallery.value = true;
+  galleryImages.value = await listBucketRecursive(bucket);
+  isLoadingGallery.value = false;
+};
+const selectGalleryImage = (url) => {
+  if (activeUploadTarget) {
+    activeUploadTarget.obj[activeUploadTarget.key] = url;
+    activeUploadTarget = null;
+  }
+  showGallery.value = false;
+};
+const moveBlock = (index, dir) => {
+  const newIdx = dir === "up" ? index - 1 : index + 1;
+  if (newIdx < 0 || newIdx >= page.value.content.length) return;
+  const content = [...page.value.content];
+  const item = content.splice(index, 1)[0];
+  content.splice(newIdx, 0, item);
+  page.value.content = content;
+  selectedBlockIndex.value = newIdx;
+};
 const getSeoI18n = (field, lang) => {
   const val = page.value?.seo_config?.[field];
   if (!val) return "";
@@ -164,29 +338,36 @@ const setSeoI18n = (field, lang, value) => {
   if (!page.value) return;
   if (!page.value.seo_config) page.value.seo_config = {};
   const current = page.value.seo_config[field];
-  const out = { fr: "", ar: "", en: "" };
-  if (typeof current === "string") out.fr = current;
-  else if (current && typeof current === "object") Object.assign(out, current);
-  out[lang] = value;
-  page.value.seo_config[field] = out;
+  const obj = { fr: "", ar: "", en: "" };
+  if (typeof current === "string") {
+    obj.fr = current;
+  } else if (current && typeof current === "object") {
+    Object.assign(obj, current);
+  }
+  obj[lang] = value;
+  page.value.seo_config[field] = obj;
 };
-const tagDepth = (tag) => Math.max(0, parseInt(tag.replace("h", "")) - 1) || 0;
-const tagColor = (tag) => ({ h1: "#3d35ff", h2: "#6b63ff", h3: "#aaa", h4: "#ccc" })[tag] ?? "#ddd";
-const seoTree = computed(() => {
-  if (!page.value?.content) return [];
-  const tree = [];
-  page.value.content.forEach((block, bIdx) => {
-    const titleText = resolveI18nForPreview(block.props.title);
-    if (block.props.titleTag && titleText) tree.push({ tag: block.props.titleTag, text: titleText, blockIndex: bIdx });
-    if (block.props.items) {
-      block.props.items.forEach((item) => {
-        const text = resolveI18nForPreview(item.title || item.question || item.name);
-        const tag = item.titleTag || block.props.itemTag;
-        if (text && tag) tree.push({ tag, text, blockIndex: bIdx });
-      });
-    }
-  });
-  return tree;
+const updateSeoField = (field, value) => {
+  if (!page.value) return;
+  if (!page.value.seo_config) page.value.seo_config = {};
+  page.value.seo_config[field] = value;
+};
+const pageTypeOptions = computed(() => {
+  const types = config?.pageTypes || [];
+  if (types.length) return types.map((t) => ({ value: t.id, label: t.label }));
+  return [
+    { value: "landing_page", label: "Landing Page" },
+    { value: "service_page", label: "Page de Service" },
+    { value: "about_page", label: "Page \xC0 Propos" },
+    { value: "product_page", label: "Page Produit" },
+    { value: "blog_article", label: "Article de Blog" },
+    { value: "portfolio_item", label: "Projet Portfolio" }
+  ];
+});
+const pageViewUrl = computed(() => {
+  const type = page.value?.type;
+  const prefix = type === "service_page" ? "/service/" : "/";
+  return `${prefix}${page.value?.slug ?? ""}`;
 });
 const togglePublished = async () => {
   page.value.status = page.value.status === "published" ? "draft" : "published";
@@ -203,88 +384,103 @@ const savePage = async () => {
     type: page.value.type
   }).eq("id", pageId);
   isSaving.value = false;
-  if (error) alert("Save error: " + error.message);
+  if (error) alert("Erreur lors de la sauvegarde : " + error.message);
+  else savedSnapshot.value = JSON.stringify(page.value?.content ?? []);
 };
 </script>
 
 <template>
-  <div v-if="page" data-admin-cms class="h-screen flex flex-col bg-[#EBEBEF] overflow-hidden font-sans">
+  <div v-if="page" class="h-screen flex flex-col bg-[#EBEBEF] overflow-hidden font-sans">
+
     <input type="file" ref="fileInput" class="hidden" accept="image/*" @change="handleFileUpload" />
 
-    <!-- Top bar -->
+    <!-- ── Top Bar ── -->
     <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="/admin" class="text-gray-400 hover:text-black transition-colors text-lg">←</NuxtLink>
+        <NuxtLink to="/admin" class="text-gray-400 hover:text-black transition-colors">←</NuxtLink>
         <div class="flex gap-1 bg-gray-100 p-1 rounded-md">
-          <button @click="isLeftOpen = !isLeftOpen" :class="['p-1.5 rounded transition-all', isLeftOpen ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400']" title="Structure">
+          <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="isRightOpen = !isRightOpen" :class="['p-1.5 rounded transition-all', isRightOpen ? 'bg-white shadow-sm text-blue-600' : 'text-gray-400']" title="Properties">
+          <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>
+        <div v-if="page?.content_locked" class="px-2 py-1 bg-amber-50 border border-amber-200 rounded-full text-[8px] font-black uppercase tracking-widest text-amber-600">SEO Only</div>
       </div>
 
-      <div class="flex items-center gap-3">
-        <div class="flex bg-gray-100 p-1 rounded-full">
-          <button @click="viewMode = 'structure'" :class="['px-3 py-1 rounded-full text-[8px] font-black uppercase', 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', viewMode === 'seo' ? 'bg-white text-black' : 'text-gray-400']">SEO Audit</button>
+      <div class="flex items-center gap-4">
+        <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 border border-gray-200 text-gray-500 hover:border-blue-500 hover:text-blue-500 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>
-          View
+          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 border transition-all',
-  page?.status === 'published' ? 'bg-green-50 border-green-200 text-green-600' : 'bg-gray-50 border-gray-200 text-gray-400'
+        <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-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-gray-300']"></span>
-          {{ page?.status === "published" ? "Published" : "Draft" }}
+          {{ page?.status === "published" ? "Publi\xE9" : "Brouillon" }}
         </button>
-        <button @click="savePage" class="bg-blue-600 text-white px-5 py-2 rounded-full text-[9px] font-black uppercase shadow-lg active:scale-95 transition-all">
-          {{ isSaving ? "Saving..." : "Save" }}
+        <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">
+            {{ dirtyBlocks.size }}
+          </span>
         </button>
       </div>
     </header>
 
     <div class="flex flex-1 overflow-hidden relative">
 
-      <!-- Left sidebar: structure / SEO tree -->
-      <aside :class="['bg-white border-r z-50 transition-all duration-300 overflow-hidden flex flex-col', isLeftOpen ? 'w-64' : 'w-0']">
+      <!-- ── Left Sidebar: Structure / SEO Tree ── -->
+      <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-gray-300 uppercase mb-4 tracking-widest">Sections</h3>
-            <div v-for="(block, index) in page.content" :key="index" @click="selectedBlockIndex = index"
-              :class="[
+            <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>
+            <template v-else>
+              <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-blue-500 bg-blue-50/50 text-blue-600' : 'border-gray-100 bg-gray-50 text-gray-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"
-                :value="block.label || ''"
-                @input="block.label = $event.target.value"
-                @blur="editingLabelIndex = null"
-                @keydown.enter="editingLabelIndex = null"
-                @click.stop
-                class="flex-1 min-w-0 text-[9px] font-black uppercase bg-transparent outline-none border-b border-current"
-                :placeholder="block.type" autofocus
-              />
-              <span v-else class="flex-1 min-w-0 text-[9px] font-black uppercase truncate" @dblclick.stop="editingLabelIndex = index">
-                {{ block.label || block.type }}
-              </span>
-              <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity shrink-0 text-xs">
-                <button @click.stop="editingLabelIndex = index" title="Rename">✎</button>
-                <button @click.stop="moveBlock(index, 'up')">↑</button>
-                <button @click.stop="moveBlock(index, 'down')">↓</button>
-                <button @click.stop="removeBlock(index)" class="text-red-400">✕</button>
+                <input
+                  v-if="editingLabelIndex === index"
+                  :value="block.label || ''"
+                  @input="block.label = $event.target.value"
+                  @blur="editingLabelIndex = null"
+                  @keydown.enter="editingLabelIndex = null"
+                  @click.stop
+                  class="flex-1 min-w-0 text-[9px] font-black uppercase bg-transparent outline-none border-b border-current"
+                  :placeholder="block.type"
+                  autofocus
+                />
+                <span v-else class="flex-1 min-w-0 text-[9px] font-black uppercase truncate" @dblclick.stop="editingLabelIndex = index">
+                  {{ block.label || block.type }}
+                </span>
+                <div class="flex items-center gap-1 shrink-0">
+                  <span v-if="dirtyBlocks.has(index) && selectedBlockIndex !== index" class="w-1.5 h-1.5 rounded-full bg-amber-400 shrink-0"></span>
+                  <div class="flex gap-1 opacity-0 group-hover:opacity-100 transition-opacity">
+                    <button @click.stop="editingLabelIndex = index" title="Renommer">✎</button>
+                    <button @click.stop="moveBlock(index, 'up')">↑</button>
+                    <button @click.stop="page.content.splice(index, 1)" class="text-red-400">✕</button>
+                  </div>
+                </div>
               </div>
-            </div>
-            <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-blue-500 hover:text-blue-500 transition-all">
-              + ADD 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-blue-600 uppercase mb-6 tracking-widest">Heading Hierarchy</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-gray-50/50 cursor-pointer hover:bg-blue-50/50"
               :style="{ marginLeft: `${tagDepth(node.tag) * 14}px`, borderColor: tagColor(node.tag) }"
@@ -296,229 +492,405 @@ const savePage = async () => {
         </div>
       </aside>
 
-      <!-- Preview: data-admin-preview opts this area out of the admin font
-           so section components inherit the host project's own font stack -->
-      <main data-admin-preview class="flex-1 overflow-y-auto p-4 md:p-10 bg-[#F5F5F7]">
-        <div class="max-w-4xl mx-auto bg-white shadow-2xl rounded-[32px] overflow-hidden min-h-screen border border-black/5">
+      <!-- ── Preview ── -->
+      <main class="flex-1 overflow-y-auto p-4 md:p-10 bg-[#F5F5F7]">
+        <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-blue-500 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 v-if="!page.content.length" class="p-20 text-center text-gray-300 italic text-sm">
-            Empty page — add a section to get started.
-          </div>
         </div>
       </main>
 
-      <!-- Right sidebar: field editor + SEO -->
-      <aside :class="['bg-white border-l z-50 transition-all duration-300 overflow-hidden flex flex-col', isRightOpen ? 'w-80' : 'w-0']">
-        <div class="p-6 w-80 h-full overflow-y-auto flex flex-col gap-6">
-
-          <!-- Block field editor -->
-          <div v-if="selectedBlockIndex !== null && selectedCMSConfig">
-            <div class="flex items-center justify-between mb-4">
-              <h2 class="text-[10px] font-black uppercase text-gray-400 tracking-widest">
-                {{ selectedCMSConfig.label }}
-              </h2>
-              <!-- Lang switcher -->
-              <div class="flex gap-1">
-                <button v-for="lang in LANGS" :key="lang" @click="editingLang = lang"
-                  :class="['text-[8px] font-black px-2 py-1 rounded transition-all', editingLang === lang ? 'bg-black text-white' : 'text-gray-400 hover:text-black']">
-                  {{ lang === "ar" ? "\u0639" : lang.toUpperCase() }}
+      <!-- ── Right Panel: Props / SEO ── -->
+      <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-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-white shadow text-[#3d35ff]' : 'text-gray-400',
+  selectedBlockIndex === null || page?.content_locked ? 'opacity-30 cursor-not-allowed' : ''
+]">
+                Bloc
+              </button>
+              <button @click="rightPanelMode = 'seo'"
+                :class="[
+  'px-2.5 py-1 text-[7px] font-black uppercase rounded-md transition-all',
+  rightPanelMode === 'seo' ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400'
+]">
+                SEO
+              </button>
+            </div>
+            <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-white shadow text-[#3d35ff]' : 'text-gray-400'
+]">
+                {{ langLabel(lang) }}
+              </button>
+            </div>
+          </div>
+
+          <!-- ── BLOCK CONFIG PANEL ── -->
+          <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-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">
+                  <span class="w-2 h-2 rounded-full bg-amber-400 shrink-0"></span>
+                  {{ blockDiffs.get(selectedBlockIndex).length }} champ{{ blockDiffs.get(selectedBlockIndex).length > 1 ? "s" : "" }} modifié{{ blockDiffs.get(selectedBlockIndex).length > 1 ? "s" : "" }}
+                </span>
+                <svg :class="['w-3.5 h-3.5 text-amber-500 transition-transform', showDiff ? 'rotate-180' : '']" fill="none" stroke="currentColor" viewBox="0 0 24 24"><path stroke-linecap="round" stroke-linejoin="round" stroke-width="2.5" d="M19 9l-7 7-7-7"/></svg>
+              </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-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>
+                  </div>
+                  <div class="flex items-start gap-2">
+                    <span class="w-1 self-stretch rounded-full bg-green-400 shrink-0"></span>
+                    <p class="text-[11px] text-green-700 font-semibold leading-snug break-words min-w-0">{{ change.new }}</p>
+                  </div>
+                </div>
+              </div>
+            </div>
+
+            <!-- AI Generate -->
+            <div 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-[#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-[#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-[#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-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-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 mb-6 flex-wrap">
-              <button v-for="group in selectedCMSConfig.groups" :key="group.key" @click="selectedFieldGroup = group.key"
+            <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="[
-  'px-3 py-1.5 rounded-full text-[8px] font-black uppercase tracking-widest transition-all',
-  selectedFieldGroup === group.key ? 'bg-black text-white' : 'bg-gray-100 text-gray-500 hover:bg-gray-200'
+  'flex-1 py-2 text-[8px] font-black uppercase tracking-widest rounded-lg transition-all',
+  selectedFieldGroup === group.key ? 'bg-white shadow text-[#3d35ff]' : 'text-gray-400 hover:text-gray-600'
 ]">
                 {{ group.label }}
               </button>
             </div>
 
             <!-- Fields -->
-            <div v-for="(field, name) in visibleFields" :key="String(name)" class="mb-5">
-              <label class="text-[8px] font-black uppercase text-gray-400 block mb-2">{{ field.label }}</label>
-
-              <!-- i18n text -->
-              <template v-if="field.i18n">
-                <input v-if="field.type === 'text'"
-                  :value="getBlockI18n(String(name), editingLang)"
-                  @input="setBlockI18n(String(name), editingLang, $event.target.value)"
-                  class="w-full border-b py-2 text-xs font-bold outline-none focus:border-black transition-colors"
-                />
-                <textarea v-else-if="field.type === 'textarea'"
-                  :value="getBlockI18n(String(name), editingLang)"
-                  @input="setBlockI18n(String(name), editingLang, $event.target.value)"
-                  class="w-full bg-gray-50 p-3 text-xs rounded-xl outline-none focus:ring-1 focus:ring-black resize-none" rows="3"
-                />
-              </template>
-
-              <!-- Plain text -->
-              <input v-else-if="field.type === 'text'"
-                v-model="page.content[selectedBlockIndex].props[String(name)]"
-                class="w-full border-b py-2 text-xs font-bold outline-none focus:border-black transition-colors"
-              />
-
-              <!-- Textarea -->
-              <textarea v-else-if="field.type === 'textarea'"
-                v-model="page.content[selectedBlockIndex].props[String(name)]"
-                class="w-full bg-gray-50 p-3 text-xs rounded-xl outline-none focus:ring-1 focus:ring-black resize-none" rows="3"
-              />
-
-              <!-- Color -->
-              <div v-else-if="field.type === 'color'" class="space-y-2">
-                <input v-model="page.content[selectedBlockIndex].props[String(name)]" type="color" class="h-8 w-16 rounded cursor-pointer border border-gray-200" />
-                <input v-model="page.content[selectedBlockIndex].props[String(name)]" class="w-full bg-gray-50 p-2 text-[9px] font-mono rounded-lg outline-none" placeholder="#ffffff" />
-              </div>
+            <div v-for="(field, name) in visibleFields" :key="name" class="mb-6">
+              <label class="text-[8px] font-black uppercase text-gray-400 mb-2 block tracking-widest">{{ field.label }}</label>
 
               <!-- Image -->
-              <div v-else-if="field.type === 'image'"
-                @click="triggerUpload(page.content[selectedBlockIndex].props, String(name))"
-                class="relative h-24 border-2 border-dashed rounded-xl flex items-center justify-center overflow-hidden cursor-pointer hover:border-blue-400 transition-colors">
-                <img v-if="page.content[selectedBlockIndex].props[String(name)]" :src="page.content[selectedBlockIndex].props[String(name)]" class="w-full h-full object-cover" />
-                <div v-else class="text-center">
-                  <div class="text-[8px] font-black text-gray-300 uppercase">Click to upload</div>
-                  <div v-if="isUploading" class="text-[8px] text-blue-500 mt-1">Uploading...</div>
+              <div v-if="field.type === 'image'" class="space-y-2">
+                <div v-if="page.content[selectedBlockIndex].props[name]" class="group relative h-28 rounded-xl overflow-hidden border">
+                  <img :src="page.content[selectedBlockIndex].props[name]" class="w-full h-full object-cover" />
+                  <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-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-gray-50 border-2 border-dashed rounded-xl text-[9px] font-black hover:bg-gray-100 transition-all">
+                    ⊞ GALERIE
+                  </button>
                 </div>
               </div>
 
-              <!-- Boolean select -->
-              <select v-else-if="field.type === 'boolean' || field.type === 'select' && field.options?.length"
-                v-model="page.content[selectedBlockIndex].props[String(name)]"
-                class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none focus:ring-1 focus:ring-black">
-                <option v-for="opt in field.options" :key="String(opt.value)" :value="opt.value">{{ opt.label }}</option>
+              <!-- 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-[#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 v-model="page.content[selectedBlockIndex].props[name]" 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-[#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 v-model="page.content[selectedBlockIndex].props[name]" 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'" v-model="page.content[selectedBlockIndex].props[name]" 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>
 
-              <!-- Cards (button group) -->
-              <div v-else-if="field.type === 'cards'" class="flex flex-wrap gap-1">
-                <button v-for="opt in field.options" :key="String(opt.value)"
-                  @click="page.content[selectedBlockIndex].props[String(name)] = opt.value"
+              <!-- Cards -->
+              <div v-else-if="field.type === 'cards'" class="grid grid-cols-3 gap-2">
+                <button v-for="opt in field.options" :key="opt.value"
+                  @click="page.content[selectedBlockIndex].props[name] = opt.value"
                   :class="[
-  'flex flex-col items-center gap-1 p-2 rounded-lg border-2 transition-all text-[7px] font-black uppercase',
-  page.content[selectedBlockIndex].props[String(name)] === opt.value ? 'border-black bg-black text-white' : 'border-gray-100 hover:border-gray-300'
+  'p-2.5 rounded-xl border-2 text-center transition-all',
+  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-xs">{{ opt.icon }}</span>
-                  <span>{{ opt.label }}</span>
+                  <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>
                 </button>
               </div>
 
-              <!-- List of items -->
-              <div v-else-if="field.type === 'list'" class="space-y-3">
-                <div v-for="(item, itemIdx) in page.content[selectedBlockIndex].props[String(name)]" :key="itemIdx"
-                  class="border border-gray-100 rounded-xl p-3 space-y-2">
-                  <div class="flex justify-between items-center mb-2">
-                    <span class="text-[7px] font-black uppercase text-gray-400">Item {{ itemIdx + 1 }}</span>
-                    <button @click="page.content[selectedBlockIndex].props[String(name)].splice(itemIdx, 1)" class="text-red-400 text-xs">✕</button>
-                  </div>
-                  <template v-for="(subField, subKey) in field.itemFields" :key="String(subKey)">
-                    <label class="text-[7px] font-black uppercase text-gray-400 block">{{ subField.label }}</label>
-                    <template v-if="subField.i18n">
-                      <input v-if="subField.type === 'text'"
-                        :value="getI18nVal(item[String(subKey)], editingLang)"
-                        @input="setI18nVal(item, String(subKey), editingLang, $event.target.value)"
-                        class="w-full border-b py-1 text-xs outline-none focus:border-black"
-                      />
-                      <textarea v-else-if="subField.type === 'textarea'"
-                        :value="getI18nVal(item[String(subKey)], editingLang)"
-                        @input="setI18nVal(item, String(subKey), editingLang, $event.target.value)"
-                        class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none resize-none" rows="2"
-                      />
+              <!-- Color -->
+              <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" class="w-5 h-5 rounded-full border border-black/5" :style="{ background: c }"></button>
+                <input v-model="page.content[selectedBlockIndex].props[name]" class="flex-1 bg-transparent text-[9px] font-mono outline-none" />
+              </div>
+
+              <!-- 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-gray-50 rounded-2xl relative border">
+                  <button @click="page.content[selectedBlockIndex].props[name].splice(idx, 1)" 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">
+                    <label class="text-[7px] font-black uppercase opacity-30">{{ subField.label }}</label>
+                    <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-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'" v-model="item[subName]" 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-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
                     </template>
-                    <input v-else-if="subField.type === 'text'" v-model="item[String(subKey)]" class="w-full border-b py-1 text-xs outline-none focus:border-black" />
-                    <textarea v-else-if="subField.type === 'textarea'" v-model="item[String(subKey)]" class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none resize-none" rows="2" />
-                    <div v-else-if="subField.type === 'image'"
-                      @click="triggerUpload(item, String(subKey))"
-                      class="h-16 border-2 border-dashed rounded-lg flex items-center justify-center overflow-hidden cursor-pointer hover:border-blue-400 transition-colors">
-                      <img v-if="item[String(subKey)]" :src="item[String(subKey)]" class="w-full h-full object-cover" />
-                      <span v-else class="text-[7px] font-black text-gray-300 uppercase">Upload</span>
+                    <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">
+                        <input
+                          :value="getI18nVal(feat, editingLang)"
+                          @input="setI18nVal(item[subName], fi, editingLang, $event.target.value)"
+                          :dir="editingLang === 'ar' ? 'rtl' : 'ltr'"
+                          :placeholder="langLabel(editingLang)"
+                          class="flex-1 bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
+                        <button @click="item[subName].splice(fi, 1)" 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: '' })" 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>
-                  </template>
+                    <input v-else v-model="item[subName]" class="w-full bg-white rounded-lg p-2 text-[10px] font-bold outline-none shadow-sm" />
+                  </div>
                 </div>
-                <button
-                  @click="page.content[selectedBlockIndex].props[String(name)].push(
-  Object.fromEntries(Object.keys(field.itemFields || {}).map((k) => [k, field.itemFields?.[k]?.i18n ? { fr: '', ar: '', en: '' } : '']))
-)"
-                  class="w-full py-2 border-2 border-dashed border-gray-100 rounded-xl text-[8px] font-black text-gray-400 hover:border-blue-500 transition-all">
-                  + Add item
-                </button>
+                <button @click="if (!page.content[selectedBlockIndex].props[name]) page.content[selectedBlockIndex].props[name] = [];
+  page.content[selectedBlockIndex].props[name].push({})" class="w-full py-2 border-2 border-dashed rounded-xl text-[8px] font-black text-gray-400">+ AJOUTER</button>
               </div>
             </div>
           </div>
 
-          <!-- SEO panel -->
-          <div class="border-t pt-6">
-            <h2 class="text-[10px] font-black uppercase text-gray-400 tracking-widest mb-4">SEO</h2>
-            <div class="space-y-4">
-              <!-- Page meta -->
-              <div>
-                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Page Title</label>
-                <input v-model="page.title" class="w-full border-b py-2 text-xs font-bold outline-none focus:border-black" />
+          <!-- ── SEO CONFIG PANEL ── -->
+          <div v-else-if="rightPanelMode === 'seo'">
+            <h3 class="text-[9px] font-black text-gray-300 uppercase mb-4 italic tracking-widest">Config SEO</h3>
+
+            <!-- AI Audit -->
+            <div 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-[#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" }}
+              </button>
+            </div>
+
+            <!-- Audit results -->
+            <div v-if="seoAudit" class="mb-6 space-y-3">
+              <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'
+]">
+                  {{ seoAudit.score }}
+                </div>
+                <div>
+                  <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-[#3d35ff] text-white rounded-lg text-[9px] font-black uppercase tracking-wide hover:bg-[#2f28cc] transition shrink-0">Appliquer</button>
               </div>
-              <div>
-                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Slug</label>
-                <input v-model="page.slug" class="w-full border-b py-2 text-xs font-mono outline-none focus:border-black" />
+              <div v-if="seoAudit.issues?.length" class="space-y-1.5">
+                <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]',
+  issue.level === 'error' ? 'bg-red-50 text-red-700' : issue.level === 'warning' ? 'bg-amber-50 text-amber-700' : 'bg-blue-50 text-blue-700'
+]">
+                  <span class="shrink-0 mt-0.5 font-black">{{ issue.level === "error" ? "\u2715" : issue.level === "warning" ? "!" : "i" }}</span>
+                  {{ issue.message }}
+                </div>
               </div>
-              <div>
-                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Page Type</label>
-                <select v-model="page.type" class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none">
-                  <option v-for="opt in pageTypeOptions" :key="opt.value" :value="opt.value">{{ opt.label }}</option>
-                </select>
+              <div v-if="seoAudit.suggestions?.length" class="space-y-1.5">
+                <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>
-
-              <!-- i18n SEO fields -->
-              <div class="flex gap-1 mt-4 mb-2">
-                <button v-for="lang in LANGS" :key="lang" @click="editingLang = lang"
-                  :class="['text-[8px] font-black px-2 py-1 rounded transition-all', editingLang === lang ? 'bg-black text-white' : 'text-gray-400 hover:text-black']">
-                  {{ lang === "ar" ? "\u0639" : lang.toUpperCase() }}
-                </button>
+              <div v-if="seoAudit.keywords?.length">
+                <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-gray-100 text-gray-600 rounded-lg text-[9px] font-semibold">{{ kw }}</span>
+                </div>
               </div>
-              <div>
-                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Meta Title</label>
-                <input
-                  :value="getSeoI18n('meta_title', editingLang)"
-                  @input="setSeoI18n('meta_title', editingLang, $event.target.value)"
-                  class="w-full border-b py-2 text-xs outline-none focus:border-black"
-                />
+              <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>
-                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">Meta Description</label>
-                <textarea
-                  :value="getSeoI18n('meta_description', editingLang)"
-                  @input="setSeoI18n('meta_description', editingLang, $event.target.value)"
-                  class="w-full bg-gray-50 p-2 text-xs rounded-lg outline-none resize-none" rows="3"
-                />
+            </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-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-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-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>
-                <label class="text-[8px] font-black uppercase text-gray-400 block mb-1">OG Image URL</label>
-                <input v-model="page.seo_config.og_image" class="w-full border-b py-2 text-xs font-mono outline-none focus:border-black" />
+            </div>
+
+            <div class="mb-5">
+              <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-[#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-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-[#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-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-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-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-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-[#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-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>
+
         </div>
       </aside>
     </div>
 
-    <!-- Add section modal -->
-    <div v-if="showAddModal" class="fixed inset-0 bg-black/90 backdrop-blur-xl z-[100] flex items-center justify-center p-6" @click.self="showAddModal = false">
-      <div class="bg-white max-w-xl w-full rounded-[32px] p-10 shadow-2xl">
-        <h3 class="text-[10px] font-black uppercase tracking-widest mb-6 text-gray-400">Add Section</h3>
-        <div class="grid grid-cols-3 gap-4">
-          <button v-for="(conf, type) in CMS_COMPONENTS" :key="String(type)" @click="addSection(String(type))"
-            class="flex flex-col items-center gap-2 p-5 border-2 border-gray-100 rounded-[24px] hover:border-black transition-all group">
-            <span class="text-2xl">{{ conf.icon || "\u{1F4E6}" }}</span>
-            <span class="text-[7px] font-black uppercase tracking-widest text-gray-600 group-hover:text-black text-center">{{ conf.label }}</span>
+    <!-- ── 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-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-[#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-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-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-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-[#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>
+              </div>
+            </button>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <!-- ── 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-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(conf.defaultProps)) });
+  showAddModal = false;
+  selectedBlockIndex = page.content.length - 1"
+            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-gray-900">{{ conf.label }}</span>
           </button>
         </div>
       </div>
     </div>
-  </div>
 
-  <div v-else class="h-screen flex items-center justify-center text-gray-400">
-    Loading...
   </div>
 </template>
+
+<style scoped>
+::-webkit-scrollbar{width:3px}::-webkit-scrollbar-thumb{background:#3d35ff;border-radius:10px}
+</style>