diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
index e070ad9..b732d56 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
@@ -19,7 +19,7 @@ Customcss:
 @page {
   size: A4;
   margin: 50mm 15mm 26mm 15mm;
-  background: rgb(227, 33, 33);
+  background: rgba(255, 255, 255, 1);
 }
 
 body {
@@ -35,10 +35,10 @@ p {
   font-weight: 300;
   font-family: Arial;
   font-style: italic;
-  padding-top: 0mm;
-  padding-right: 0mm;
-  padding-bottom: 0mm;
-  padding-left: 0mm;
+  padding-top: 20mm;
+  padding-right: 20mm;
+  padding-bottom: 20mm;
+  padding-left: 20mm;
 }
 
 h1 {
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index cd3eee9..72b17f8 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -56,7 +56,7 @@
                   type="button"
                   :class="{ active: fontSize.unit === 'px' }"
                   :disabled="inheritanceLocked"
-                  @click="updateFontSizeUnit('px')"
+                  @click="fontSize.unit = 'px'"
                 >
                   px
                 </button>
@@ -64,7 +64,7 @@
                   type="button"
                   :class="{ active: fontSize.unit === 'em' }"
                   :disabled="inheritanceLocked"
-                  @click="updateFontSizeUnit('em')"
+                  @click="fontSize.unit = 'em'"
                 >
                   em
                 </button>
@@ -72,7 +72,7 @@
                   type="button"
                   :class="{ active: fontSize.unit === 'rem' }"
                   :disabled="inheritanceLocked"
-                  @click="updateFontSizeUnit('rem')"
+                  @click="fontSize.unit = 'rem'"
                 >
                   rem
                 </button>
@@ -142,7 +142,7 @@
                   type="button"
                   :class="{ active: marginOuter.unit === 'mm' }"
                   :disabled="inheritanceLocked"
-                  @click="updateMarginOuterUnit('mm')"
+                  @click="marginOuter.unit = 'mm'"
                 >
                   mm
                 </button>
@@ -150,7 +150,7 @@
                   type="button"
                   :class="{ active: marginOuter.unit === 'px' }"
                   :disabled="inheritanceLocked"
-                  @click="updateMarginOuterUnit('px')"
+                  @click="marginOuter.unit = 'px'"
                 >
                   px
                 </button>
@@ -175,7 +175,7 @@
                   type="button"
                   :class="{ active: paddingInner.unit === 'mm' }"
                   :disabled="inheritanceLocked"
-                  @click="updatePaddingInnerUnit('mm')"
+                  @click="paddingInner.unit = 'mm'"
                 >
                   mm
                 </button>
@@ -183,7 +183,7 @@
                   type="button"
                   :class="{ active: paddingInner.unit === 'px' }"
                   :disabled="inheritanceLocked"
-                  @click="updatePaddingInnerUnit('px')"
+                  @click="paddingInner.unit = 'px'"
                 >
                   px
                 </button>
@@ -264,7 +264,6 @@ import { usePopupPosition } from '../composables/usePopupPosition';
 import { useDebounce } from '../composables/useDebounce';
 import NumberInput from './ui/NumberInput.vue';
 import UnitToggle from './ui/UnitToggle.vue';
-import { convertUnit } from '../utils/unit-conversion';
 import Coloris from '@melloware/coloris';
 import '@melloware/coloris/dist/coloris.css';
 import hljs from 'highlight.js/lib/core';
@@ -326,21 +325,6 @@ const immediateUpdate = (callback) => {
   callback();
 };
 
-const updateFontSizeUnit = (newUnit) => {
-  fontSize.value.value = convertUnit(fontSize.value.value, fontSize.value.unit, newUnit);
-  fontSize.value.unit = newUnit;
-};
-
-const updateMarginOuterUnit = (newUnit) => {
-  marginOuter.value.value = convertUnit(marginOuter.value.value, marginOuter.value.unit, newUnit);
-  marginOuter.value.unit = newUnit;
-};
-
-const updatePaddingInnerUnit = (newUnit) => {
-  paddingInner.value.value = convertUnit(paddingInner.value.value, paddingInner.value.unit, newUnit);
-  paddingInner.value.unit = newUnit;
-};
-
 const getSelectorFromElement = (element) => {
   // Try to build a meaningful selector
   if (element.id) {
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index caefbc8..3517ddb 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -66,21 +66,21 @@
             <button
               type="button"
               :class="{ active: margins.top.unit === 'mm' }"
-              @click="updateMarginUnit('top', 'mm')"
+              @click="margins.top.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
               :class="{ active: margins.top.unit === 'px' }"
-              @click="updateMarginUnit('top', 'px')"
+              @click="margins.top.unit = 'px'"
             >
               px
             </button>
             <button
               type="button"
               :class="{ active: margins.top.unit === 'rem' }"
-              @click="updateMarginUnit('top', 'rem')"
+              @click="margins.top.unit = 'rem'"
             >
               rem
             </button>
@@ -107,21 +107,21 @@
             <button
               type="button"
               :class="{ active: margins.bottom.unit === 'mm' }"
-              @click="updateMarginUnit('bottom', 'mm')"
+              @click="margins.bottom.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
               :class="{ active: margins.bottom.unit === 'px' }"
-              @click="updateMarginUnit('bottom', 'px')"
+              @click="margins.bottom.unit = 'px'"
             >
               px
             </button>
             <button
               type="button"
               :class="{ active: margins.bottom.unit === 'rem' }"
-              @click="updateMarginUnit('bottom', 'rem')"
+              @click="margins.bottom.unit = 'rem'"
             >
               rem
             </button>
@@ -148,21 +148,21 @@
             <button
               type="button"
               :class="{ active: margins.left.unit === 'mm' }"
-              @click="updateMarginUnit('left', 'mm')"
+              @click="margins.left.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
               :class="{ active: margins.left.unit === 'px' }"
-              @click="updateMarginUnit('left', 'px')"
+              @click="margins.left.unit = 'px'"
             >
               px
             </button>
             <button
               type="button"
               :class="{ active: margins.left.unit === 'rem' }"
-              @click="updateMarginUnit('left', 'rem')"
+              @click="margins.left.unit = 'rem'"
             >
               rem
             </button>
@@ -189,21 +189,21 @@
             <button
               type="button"
               :class="{ active: margins.right.unit === 'mm' }"
-              @click="updateMarginUnit('right', 'mm')"
+              @click="margins.right.unit = 'mm'"
             >
               mm
             </button>
             <button
               type="button"
               :class="{ active: margins.right.unit === 'px' }"
-              @click="updateMarginUnit('right', 'px')"
+              @click="margins.right.unit = 'px'"
             >
               px
             </button>
             <button
               type="button"
               :class="{ active: margins.right.unit === 'rem' }"
-              @click="updateMarginUnit('right', 'rem')"
+              @click="margins.right.unit = 'rem'"
             >
               rem
             </button>
@@ -295,7 +295,6 @@ import { useStylesheetStore } from '../../stores/stylesheet';
 import { useDebounce } from '../../composables/useDebounce';
 import Coloris from '@melloware/coloris';
 import NumberInput from '../ui/NumberInput.vue';
-import { convertUnit } from '../../utils/unit-conversion';
 import '@melloware/coloris/dist/coloris.css';
 
 const stylesheetStore = useStylesheetStore();
@@ -325,12 +324,6 @@ const margins = ref({
   right: { value: 20, unit: 'mm' },
 });
 
-const updateMarginUnit = (side, newUnit) => {
-  const m = margins.value[side];
-  m.value = convertUnit(m.value, m.unit, newUnit);
-  m.unit = newUnit;
-};
-
 const background = ref({
   value: '',
   format: 'hex',
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 92d4775..de0152e 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -64,7 +64,6 @@
         <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
         <div class="input-with-color">
           <input
-            ref="colorInput"
             id="text-color"
             type="text"
             v-model="color"
@@ -81,7 +80,6 @@
         <label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
         <div class="input-with-color">
           <input
-            ref="backgroundInput"
             id="text-background"
             type="text"
             v-model="background"
@@ -379,7 +377,6 @@ import NumberInput from '../ui/NumberInput.vue';
 import { useCssUpdater } from '../../composables/useCssUpdater';
 import { useCssSync } from '../../composables/useCssSync';
 import { useDebounce } from '../../composables/useDebounce';
-import { convertUnit } from '../../utils/unit-conversion';
 
 const { updateStyle, setMargin, setDetailedMargins, setPadding, setDetailedPadding } = useCssUpdater();
 const { extractValue, extractNumericValue, extractSpacing } = useCssSync();
@@ -403,8 +400,6 @@ const fontSize = ref({ value: 16, unit: 'px' });
 const alignment = ref('left');
 const color = ref('rgb(0, 0, 0)');
 const background = ref('transparent');
-const colorInput = ref(null);
-const backgroundInput = ref(null);
 
 const marginOuterDetailed = ref({
   top: { value: 0, unit: 'mm' },
@@ -440,24 +435,20 @@ const prevMarginInner = ref({
 
 let isUpdatingFromStore = false;
 
-// Update margin outer unit for all sides with conversion
-const updateMarginOuterUnit = (newUnit) => {
-  const sides = ['top', 'right', 'bottom', 'left'];
-  sides.forEach((side) => {
-    const s = marginOuterDetailed.value[side];
-    s.value = convertUnit(s.value, s.unit, newUnit);
-    s.unit = newUnit;
-  });
+// Update margin outer unit for all sides
+const updateMarginOuterUnit = (unit) => {
+  marginOuterDetailed.value.top.unit = unit;
+  marginOuterDetailed.value.right.unit = unit;
+  marginOuterDetailed.value.bottom.unit = unit;
+  marginOuterDetailed.value.left.unit = unit;
 };
 
-// Update margin inner unit for all sides with conversion
-const updateMarginInnerUnit = (newUnit) => {
-  const sides = ['top', 'right', 'bottom', 'left'];
-  sides.forEach((side) => {
-    const s = marginInnerDetailed.value[side];
-    s.value = convertUnit(s.value, s.unit, newUnit);
-    s.unit = newUnit;
-  });
+// Update margin inner unit for all sides
+const updateMarginInnerUnit = (unit) => {
+  marginInnerDetailed.value.top.unit = unit;
+  marginInnerDetailed.value.right.unit = unit;
+  marginInnerDetailed.value.bottom.unit = unit;
+  marginInnerDetailed.value.left.unit = unit;
 };
 
 // Watchers for body styles
@@ -748,14 +739,6 @@ const syncFromStore = () => {
   isUpdatingFromStore = false;
 };
 
-const updateColorisButtons = () => {
-  [colorInput.value, backgroundInput.value].forEach((input) => {
-    if (input) {
-      input.dispatchEvent(new Event('input', { bubbles: true }));
-    }
-  });
-};
-
 onMounted(() => {
   Coloris.init();
   Coloris({
@@ -766,7 +749,6 @@ onMounted(() => {
     swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent']
   });
   syncFromStore();
-  setTimeout(updateColorisButtons, 100);
 });
 </script>
 
diff --git a/src/components/ui/InputWithUnit.vue b/src/components/ui/InputWithUnit.vue
index 25b4a9f..a87ae90 100644
--- a/src/components/ui/InputWithUnit.vue
+++ b/src/components/ui/InputWithUnit.vue
@@ -29,7 +29,6 @@
 <script setup>
 import NumberInput from './NumberInput.vue';
 import UnitToggle from './UnitToggle.vue';
-import { convertUnit } from '../../utils/unit-conversion';
 
 const props = defineProps({
   modelValue: {
@@ -65,8 +64,7 @@ const updateValue = (value) => {
   emit('update:modelValue', { ...props.modelValue, value });
 };
 
-const updateUnit = (newUnit) => {
-  const converted = convertUnit(props.modelValue.value, props.modelValue.unit, newUnit);
-  emit('update:modelValue', { value: converted, unit: newUnit });
+const updateUnit = (unit) => {
+  emit('update:modelValue', { ...props.modelValue, unit });
 };
 </script>
diff --git a/src/utils/unit-conversion.js b/src/utils/unit-conversion.js
deleted file mode 100644
index a9a6cd4..0000000
--- a/src/utils/unit-conversion.js
+++ /dev/null
@@ -1,29 +0,0 @@
-const PX_PER_MM = 3.7795275591;
-const PX_PER_REM = 16;
-const PX_PER_EM = 16;
-
-const toPx = {
-  px: (v) => v,
-  mm: (v) => v * PX_PER_MM,
-  rem: (v) => v * PX_PER_REM,
-  em: (v) => v * PX_PER_EM,
-};
-
-const fromPx = {
-  px: (v) => v,
-  mm: (v) => v / PX_PER_MM,
-  rem: (v) => v / PX_PER_REM,
-  em: (v) => v / PX_PER_EM,
-};
-
-export function convertUnit(value, fromUnit, toUnit) {
-  if (fromUnit === toUnit) return value;
-
-  const converterTo = toPx[fromUnit];
-  const converterFrom = fromPx[toUnit];
-
-  if (!converterTo || !converterFrom) return value;
-
-  const px = converterTo(value);
-  return Math.round(converterFrom(px) * 100) / 100;
-}