diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 17cab6e..616775b 100644
--- a/src/components/editor/PageSettings.vue
+++ b/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>
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index d8768ba..614b79d 100644
--- a/src/components/editor/TextSettings.vue
+++ b/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>
diff --git a/src/composables/useCssSync.js b/src/composables/useCssSync.js
index 96af721..3588635 100644
--- a/src/composables/useCssSync.js
+++ b/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;