fix: initialize margin fields from stylesheet detailed values

Fixes margin/padding field initialization when CSS contains 4-value shorthand (e.g., margin: 0mm 0mm 24mm 0mm). Now properly populates both simple and detailed fields, and auto-opens detailed editor when values differ.

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

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

src/components/editor/TextSettings.vue

@@ -87,6 +87,7 @@
     <!-- Marges extérieures -->
     <div class="settings-subsection">
       <MarginEditor
+        ref="marginOuterEditor"
         id="margin-outer"
         label="Marges extérieures"
         v-model:simple="marginOuter"
@@ -98,6 +99,7 @@
     <!-- Marges intérieures -->
     <div class="settings-subsection">
       <MarginEditor
+        ref="marginInnerEditor"
         id="margin-inner"
         label="Marges intérieures"
         v-model:simple="marginInner"
@@ -155,6 +157,9 @@ const marginInnerDetailed = ref({
   left: { value: 0, unit: 'mm' }
 });
 
+const marginOuterEditor = ref(null);
+const marginInnerEditor = ref(null);
+
 let isUpdatingFromStore = false;
 
 // Watchers for body styles
@@ -237,8 +242,36 @@ const syncFromStore = () => {
   if (margins) {
     if (margins.simple) {
       marginOuter.value = margins.simple;
+      // Sync detailed from simple
+      marginOuterDetailed.value = {
+        top: { ...margins.simple },
+        right: { ...margins.simple },
+        bottom: { ...margins.simple },
+        left: { ...margins.simple }
+      };
     } else if (margins.detailed) {
       marginOuterDetailed.value = margins.detailed;
+      // Check if all values are the same to set simple value
+      const allSame =
+        margins.detailed.top.value === margins.detailed.right.value &&
+        margins.detailed.top.value === margins.detailed.bottom.value &&
+        margins.detailed.top.value === margins.detailed.left.value &&
+        margins.detailed.top.unit === margins.detailed.right.unit &&
+        margins.detailed.top.unit === margins.detailed.bottom.unit &&
+        margins.detailed.top.unit === margins.detailed.left.unit;
+
+      if (allSame) {
+        marginOuter.value = margins.detailed.top;
+      } else {
+        // Values are different, open the detailed editor and use first value for simple
+        marginOuter.value = margins.detailed.top;
+        // Open detailed view after mount
+        setTimeout(() => {
+          if (marginOuterEditor.value) {
+            marginOuterEditor.value.expanded = true;
+          }
+        }, 0);
+      }
     }
   }
 
@@ -247,8 +280,36 @@ const syncFromStore = () => {
   if (padding) {
     if (padding.simple) {
       marginInner.value = padding.simple;
+      // Sync detailed from simple
+      marginInnerDetailed.value = {
+        top: { ...padding.simple },
+        right: { ...padding.simple },
+        bottom: { ...padding.simple },
+        left: { ...padding.simple }
+      };
     } else if (padding.detailed) {
       marginInnerDetailed.value = padding.detailed;
+      // Check if all values are the same to set simple value
+      const allSame =
+        padding.detailed.top.value === padding.detailed.right.value &&
+        padding.detailed.top.value === padding.detailed.bottom.value &&
+        padding.detailed.top.value === padding.detailed.left.value &&
+        padding.detailed.top.unit === padding.detailed.right.unit &&
+        padding.detailed.top.unit === padding.detailed.bottom.unit &&
+        padding.detailed.top.unit === padding.detailed.left.unit;
+
+      if (allSame) {
+        marginInner.value = padding.detailed.top;
+      } else {
+        // Values are different, open the detailed editor and use first value for simple
+        marginInner.value = padding.detailed.top;
+        // Open detailed view after mount
+        setTimeout(() => {
+          if (marginInnerEditor.value) {
+            marginInnerEditor.value.expanded = true;
+          }
+        }, 0);
+      }
     }
   }