feat: apply field values when unlocking inheritance

- Unlocking now creates CSS block with current field values
- Locking removes CSS block to restore general styles
- Show commented CSS preview when inheritance is locked
- Preview displays what would be applied if unlocked

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>

src/components/PagePopup.vue

@@ -383,9 +383,9 @@ const removeTemplateBlock = () => {
   }
 };
 
-const updateMargins = () => {
-  // Only update if inheritance is unlocked
-  if (inheritanceLocked.value) return;
+const updateMargins = (force = false) => {
+  // Only update if inheritance is unlocked (unless forced)
+  if (!force && inheritanceLocked.value) return;
 
   const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
 
@@ -415,9 +415,9 @@ const updateMargins = () => {
   }
 };
 
-const updateBackground = () => {
-  // Only update if inheritance is unlocked
-  if (inheritanceLocked.value) return;
+const updateBackground = (force = false) => {
+  // Only update if inheritance is unlocked (unless forced)
+  if (!force && inheritanceLocked.value) return;
   if (!background.value.value) return;
 
   const currentBlock = getOrCreateTemplateBlock();
@@ -444,6 +444,12 @@ const updateBackground = () => {
   }
 };
 
+// Apply all current field values to create/update the CSS block
+const applyAllStyles = () => {
+  updateMargins(true);
+  updateBackground(true);
+};
+
 // Watch margin values (number inputs) with debounce
 watch(
   () => [
@@ -594,10 +600,11 @@ const toggleInheritance = () => {
 
   if (inheritanceLocked.value && !wasLocked) {
     // Re-locking: remove the template-specific block
-    // Fields keep their values, but preview returns to @page defaults
     removeTemplateBlock();
+  } else if (!inheritanceLocked.value && wasLocked) {
+    // Unlocking: apply all current field values to create the CSS block
+    applyAllStyles();
   }
-  // When unlocking: fields already have values, block will be created on first edit
 };
 
 const pageCss = computed(() => {
@@ -609,9 +616,47 @@ const pageCss = computed(() => {
   return stylesheetStore.extractBlock('@page') || '';
 });
 
+// Generate a preview CSS block from current field values
+const generatePreviewCss = () => {
+  if (!templateName.value) return '';
+
+  const properties = [];
+
+  const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
+  properties.push(`  margin: ${marginValue};`);
+
+  if (background.value.value) {
+    properties.push(`  background: ${background.value.value};`);
+  }
+
+  if (properties.length === 0) return '';
+
+  return `@page ${templateName.value} {\n${properties.join('\n')}\n}`;
+};
+
+const displayedCss = computed(() => {
+  // If unlocked, show the actual CSS block from stylesheet
+  if (!inheritanceLocked.value) {
+    return pageCss.value;
+  }
+
+  // If locked, show commented preview of what would be applied
+  if (!templateName.value) {
+    // For base @page, just show it normally
+    return pageCss.value;
+  }
+
+  const preview = generatePreviewCss();
+  if (!preview) return pageCss.value;
+
+  return '/* Héritage verrouillé - déverrouiller pour appliquer */\n/* ' +
+         preview.split('\n').join('\n   ') +
+         ' */';
+});
+
 const highlightedCss = computed(() => {
-  if (!pageCss.value) return '';
-  return hljs.highlight(pageCss.value, { language: 'css' }).value;
+  if (!displayedCss.value) return '';
+  return hljs.highlight(displayedCss.value, { language: 'css' }).value;
 });
 
 let cssDebounceTimer = null;
@@ -624,6 +669,7 @@ const handleCssInput = (event) => {
   }
 
   cssDebounceTimer = setTimeout(() => {
+    // Get the actual CSS block (not the commented preview)
     const oldBlock = pageCss.value;
     if (oldBlock) {
       stylesheetStore.content = stylesheetStore.content.replace(