feat: add rem unit option to margins in PageSettings and TextSettings

Adds 'rem' as an available unit for margin inputs in both components. Updates useCssSync composable to parse rem values from CSS.

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

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

src/components/editor/PageSettings.vue

@@ -66,6 +66,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.top.unit === 'rem' }"
+              @click="margins.top.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
@@ -94,6 +101,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.bottom.unit === 'rem' }"
+              @click="margins.bottom.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
@@ -122,6 +136,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.left.unit === 'rem' }"
+              @click="margins.left.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>
@@ -150,6 +171,13 @@
             >
               px
             </button>
+            <button
+              type="button"
+              :class="{ active: margins.right.unit === 'rem' }"
+              @click="margins.right.unit = 'rem'"
+            >
+              rem
+            </button>
           </div>
         </div>
       </div>

src/components/editor/TextSettings.vue

@@ -92,6 +92,7 @@
         label="Marges extérieures"
         v-model:simple="marginOuter"
         v-model:detailed="marginOuterDetailed"
+        :units="['mm', 'px', 'rem']"
         @change="handleMarginOuterChange"
       />
     </div>
@@ -104,6 +105,7 @@
         label="Marges intérieures"
         v-model:simple="marginInner"
         v-model:detailed="marginInnerDetailed"
+        :units="['mm', 'px', 'rem']"
         @change="handleMarginInnerChange"
       />
     </div>

src/composables/useCssSync.js

@@ -38,7 +38,7 @@ export function useCssSync() {
    * Extract margin/padding shorthand (handles 1 or 4 values)
    * Returns { simple: { value, unit } } or { detailed: { top, right, bottom, left } }
    */
-  const extractSpacing = (selector, property, allowedUnits = ['mm', 'px']) => {
+  const extractSpacing = (selector, property, allowedUnits = ['mm', 'px', 'rem']) => {
     const block = store.extractBlock(selector);
     if (!block) return null;