diff --git a/public/assets/css/src/_forms-section.scss b/public/assets/css/src/_forms-section.scss
index 2290d07..6a2c0c9 100644
--- a/public/assets/css/src/_forms-section.scss
+++ b/public/assets/css/src/_forms-section.scss
@@ -1,10 +1,8 @@
 .settings-section {
 
-  margin-top: 3em;
+  margin: var(--space-m) 0;
 
 
-  // .cons
-
 
 
   h2 {
@@ -12,21 +10,10 @@
 
     font-weight: 600;
     font-size: 1.4rem;
-    // border-radius: var(--border-radius);
-    // height: var(--input-h);
-    // padding: 0 1ch;
-    // display: flex;
-    // align-items: center;
-
-    // color: var(--color-interface-050);
-    // background-color: var(--color-800);
-    // display: inline-block;
 
     border-bottom: 1px solid var(--color-200);
     color: var(--color-800);
 
-//   border-bottom: 2px solid currentColor;
-//   margin-bottom: 2rem;
   }
 
   .infos{
diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss
index f687355..88eb181 100644
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@@ -5,7 +5,9 @@ input[type="number"] {
   border: 1px solid var(--color-interface-200);
   background-color: var(--color-interface-100);
   font-family: var(--sans-serif);
+  color: var(--color-txt);
   font-size: 1rem;
+  padding-left: 0.5ch;
   // min-width: var(--input-w);
   // width: 100%;
   // padding: 0 1ch;
@@ -85,10 +87,22 @@ input[type="number"] {
     label{
       font-weight: 400;
       margin-left: 0.75ch;
+      color: var(--color-txt);
     }
   }
 }
 
+.field-text-size{
+  input[type="number"]{ 
+    width: var(--input-w-small);
+    padding-left: 0.75ch;
+  }
+  input[type="range"]{
+    flex-grow: 2;
+    flex-shrink: 2;
+  }
+}
+
 .field-margin, .field-size{
   display: inline-grid;
   width: calc(50% - 1ch);
@@ -196,9 +210,13 @@ input[type="number"] {
     top: 0;
 
     button{
-      height: calc(var(--input-h)*0.6);
+      height: calc(var(--input-h)*0.5);
       cursor: pointer;
       padding: 0;
+      svg{
+        width: 10px;
+        height: auto;
+      }
       svg path{
           fill: var(--color-interface-600);
       }
@@ -210,8 +228,9 @@ input[type="number"] {
     }
     .spinner-down{
       svg{
-        position: relative;
-        top: -2px;
+      
+        // position: relative;
+        // top: -2px;
       }
     }
     
diff --git a/public/assets/css/src/_reset.scss b/public/assets/css/src/_reset.scss
index ed3fb95..8617ad6 100644
--- a/public/assets/css/src/_reset.scss
+++ b/public/assets/css/src/_reset.scss
@@ -25,3 +25,7 @@ button {
   background-color: transparent;
   border: none;
 }
+
+img {
+  width: 100%;
+}
diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss
index c550470..a9667b8 100644
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@@ -9,7 +9,7 @@
 
 
 
-  --color-txt: var(--color-interface-800);
+  --color-txt: var(--color-interface-900);
   --color-panel-bg: var(--color-interface-050);
   
   --color-page-highlight: #ff8a50;
@@ -20,6 +20,8 @@
   --space-xs: 0.5rem;
   --space-s: 1rem;
   --space: 1.5rem;
+  --space-m: 2rem;
+  --space-big: 3em;
 
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
 
@@ -34,4 +36,5 @@
   font-size: 14px;
 
   --panel-w: 540px;
+  --panel-nav-h: 60px;
 }
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index fe1ccf4..e2e29e2 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -216,10 +216,14 @@ button {
   border: none;
 }
 
+img {
+  width: 100%;
+}
+
 :root {
   --color-browngray-050: #f5f3f0;
   --color-browngray-200: #d0c4ba;
-  --color-txt: var(--color-interface-800);
+  --color-txt: var(--color-interface-900);
   --color-panel-bg: var(--color-interface-050);
   --color-page-highlight: #ff8a50;
   --color-purple: #7136ff;
@@ -227,6 +231,8 @@ button {
   --space-xs: 0.5rem;
   --space-s: 1rem;
   --space: 1.5rem;
+  --space-m: 2rem;
+  --space-big: 3em;
   --curve: cubic-bezier(0.86, 0, 0.07, 1);
   --sans-serif: "DM Sans", sans-serif;
   --mono: "Inconsolata", monospace;
@@ -236,6 +242,7 @@ button {
   --label-w: 18ch;
   font-size: 14px;
   --panel-w: 540px;
+  --panel-nav-h: 60px;
 }
 
 body {
@@ -269,7 +276,9 @@ input[type=number] {
   border: 1px solid var(--color-interface-200);
   background-color: var(--color-interface-100);
   font-family: var(--sans-serif);
+  color: var(--color-txt);
   font-size: 1rem;
+  padding-left: 0.5ch;
 }
 
 .field {
@@ -329,6 +338,16 @@ input[type=number] {
 .field-font .field-checkbox label {
   font-weight: 400;
   margin-left: 0.75ch;
+  color: var(--color-txt);
+}
+
+.field-text-size input[type=number] {
+  width: var(--input-w-small);
+  padding-left: 0.75ch;
+}
+.field-text-size input[type=range] {
+  flex-grow: 2;
+  flex-shrink: 2;
 }
 
 .field-margin, .field-size {
@@ -417,23 +436,22 @@ input[type=number] {
   top: 0;
 }
 .number-input .spinner-buttons button {
-  height: calc(var(--input-h) * 0.6);
+  height: calc(var(--input-h) * 0.5);
   cursor: pointer;
   padding: 0;
 }
+.number-input .spinner-buttons button svg {
+  width: 10px;
+  height: auto;
+}
 .number-input .spinner-buttons button svg path {
   fill: var(--color-interface-600);
 }
 .number-input .spinner-buttons button:hover svg path {
   fill: var(--color-interface-900);
 }
-.number-input .spinner-buttons .spinner-down svg {
-  position: relative;
-  top: -2px;
-}
-
 .settings-section {
-  margin-top: 3em;
+  margin: var(--space-m) 0;
 }
 .settings-section h2 {
   margin-bottom: var(--space);
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index 81ee1c8..76638ff 100644
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["src/_fonts.scss","style.css","src/_colors.scss","src/_reset.scss","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_forms-section.scss","src/_buttons.scss","src/_settings-popup.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/public/assets/css/stylesheet.css b/public/assets/css/stylesheet.css
index d6f0264..5f10ef0 100644
--- a/public/assets/css/stylesheet.css
+++ b/public/assets/css/stylesheet.css
@@ -24,5 +24,13 @@ h2 {
 
 p {
   font-size: 1rem;
-  margin: 0mm 0mm 24mm 0mm;
+  margin: 0mm 0mm 10mm 0mm;
+}
+
+img {
+  width: 100%;
+}
+
+li p {
+  margin-bottom: 0;
 }
diff --git a/public/vendor/composer/autoload_psr4.php b/public/vendor/composer/autoload_psr4.php
index b44265d..c9abc16 100644
--- a/public/vendor/composer/autoload_psr4.php
+++ b/public/vendor/composer/autoload_psr4.php
@@ -16,7 +16,7 @@ return array(
     'PHPMailer\\PHPMailer\\' => array($vendorDir . '/phpmailer/phpmailer/src'),
     'League\\ColorExtractor\\' => array($vendorDir . '/league/color-extractor/src'),
     'Laminas\\Escaper\\' => array($vendorDir . '/laminas/laminas-escaper/src'),
-    'Kirby\\' => array($vendorDir . '/getkirby/composer-installer/src', $baseDir . '/kirby/src'),
+    'Kirby\\' => array($baseDir . '/kirby/src', $vendorDir . '/getkirby/composer-installer/src'),
     'Composer\\Semver\\' => array($vendorDir . '/composer/semver/src'),
     'Base32\\' => array($vendorDir . '/christian-riesen/base32/src'),
 );
diff --git a/public/vendor/composer/autoload_static.php b/public/vendor/composer/autoload_static.php
index 9ee9663..50a3b38 100644
--- a/public/vendor/composer/autoload_static.php
+++ b/public/vendor/composer/autoload_static.php
@@ -96,8 +96,8 @@ class ComposerStaticInit0b7fb803e22a45eb87e24172337208aa
         ),
         'Kirby\\' => 
         array (
-            0 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
-            1 => __DIR__ . '/../..' . '/kirby/src',
+            0 => __DIR__ . '/../..' . '/kirby/src',
+            1 => __DIR__ . '/..' . '/getkirby/composer-installer/src',
         ),
         'Composer\\Semver\\' => 
         array (
diff --git a/public/vendor/composer/installed.php b/public/vendor/composer/installed.php
index b182cad..22de123 100644
--- a/public/vendor/composer/installed.php
+++ b/public/vendor/composer/installed.php
@@ -1,9 +1,9 @@
 <?php return array(
     'root' => array(
         'name' => 'getkirby/plainkit',
-        'pretty_version' => '5.1.4',
-        'version' => '5.1.4.0',
-        'reference' => null,
+        'pretty_version' => 'dev-main',
+        'version' => 'dev-main',
+        'reference' => '76274fff04c54514230ad2bb0aca362139618411',
         'type' => 'project',
         'install_path' => __DIR__ . '/../../',
         'aliases' => array(),
@@ -65,9 +65,9 @@
             'dev_requirement' => false,
         ),
         'getkirby/plainkit' => array(
-            'pretty_version' => '5.1.4',
-            'version' => '5.1.4.0',
-            'reference' => null,
+            'pretty_version' => 'dev-main',
+            'version' => 'dev-main',
+            'reference' => '76274fff04c54514230ad2bb0aca362139618411',
             'type' => 'project',
             'install_path' => __DIR__ . '/../../',
             'aliases' => array(),
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 56ba45f..a49dbb0 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -274,6 +274,7 @@
 import { ref, computed, watch } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import { usePopupPosition } from '../composables/usePopupPosition';
+import { useDebounce } from '../composables/useDebounce';
 import NumberInput from './ui/NumberInput.vue';
 import Coloris from '@melloware/coloris';
 import '@melloware/coloris/dist/coloris.css';
@@ -307,7 +308,7 @@ const colorInput = ref(null);
 const backgroundInput = ref(null);
 
 let isUpdatingFromStore = false;
-let updateTimer = null;
+const { debouncedUpdate } = useDebounce(500);
 
 // Style properties
 const fontFamily = ref({ value: 'Alegreya Sans' });
@@ -320,11 +321,6 @@ const background = ref({ value: 'transparent' });
 const marginOuter = ref({ value: 0, unit: 'mm' });
 const paddingInner = ref({ value: 0, unit: 'mm' });
 
-const debouncedUpdate = (callback) => {
-  clearTimeout(updateTimer);
-  updateTimer = setTimeout(callback, 1000);
-};
-
 const immediateUpdate = (callback) => {
   callback();
 };
@@ -373,9 +369,81 @@ const elementCss = computed(() => {
   return stylesheetStore.extractBlock(selector.value) || '';
 });
 
+// Generate a preview CSS block from current field values
+const generatePreviewCss = () => {
+  if (!selector.value) return '';
+
+  const properties = [];
+
+  if (fontFamily.value.value) {
+    properties.push(`  font-family: ${fontFamily.value.value};`);
+  }
+  if (fontStyle.value.italic) {
+    properties.push(`  font-style: italic;`);
+  }
+  if (fontWeight.value.value) {
+    properties.push(`  font-weight: ${fontWeight.value.value};`);
+  }
+  if (fontSize.value.value) {
+    properties.push(`  font-size: ${fontSize.value.value}${fontSize.value.unit};`);
+  }
+  if (textAlign.value.value) {
+    properties.push(`  text-align: ${textAlign.value.value};`);
+  }
+  if (color.value.value && color.value.value !== 'rgb(0, 0, 0)') {
+    properties.push(`  color: ${color.value.value};`);
+  }
+  if (background.value.value && background.value.value !== 'transparent') {
+    properties.push(`  background: ${background.value.value};`);
+  }
+  if (marginOuter.value.value) {
+    properties.push(`  margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
+  }
+  if (paddingInner.value.value) {
+    properties.push(`  padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
+  }
+
+  if (properties.length === 0) return '';
+
+  return `${selector.value} {\n${properties.join('\n')}\n}`;
+};
+
+const displayedCss = computed(() => {
+  if (!selector.value) return '';
+
+  // If unlocked, show the actual CSS block from stylesheet
+  if (!inheritanceLocked.value) {
+    return elementCss.value || generatePreviewCss();
+  }
+
+  // If locked, show commented preview of what would be applied
+  const preview = generatePreviewCss();
+  if (!preview) return '';
+
+  return '/* Héritage verrouillé - déverrouiller pour appliquer */\n/* ' +
+         preview.split('\n').join('\n   ') +
+         ' */';
+});
+
+// Remove the element-specific CSS block to restore inheritance
+const removeElementBlock = () => {
+  if (!selector.value) return;
+
+  const block = stylesheetStore.extractBlock(selector.value);
+  if (block) {
+    // Escape special regex characters in selector
+    const escaped = selector.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // Remove the block and any surrounding whitespace
+    stylesheetStore.content = stylesheetStore.content.replace(
+      new RegExp(`\\n?${escaped}\\s*\\{[^}]*\\}\\n?`),
+      '\n'
+    );
+  }
+};
+
 const highlightedCss = computed(() => {
-  if (!elementCss.value) return '';
-  return hljs.highlight(elementCss.value, { language: 'css' }).value;
+  if (!displayedCss.value) return '';
+  return hljs.highlight(displayedCss.value, { language: 'css' }).value;
 });
 
 // Update functions for each property
@@ -424,6 +492,21 @@ const updatePaddingInner = () => {
   stylesheetStore.updateProperty(selector.value, 'padding', paddingInner.value.value, paddingInner.value.unit);
 };
 
+// Apply all current field values to create/update the CSS block
+const applyAllStyles = () => {
+  if (!selector.value) return;
+
+  updateFontFamily();
+  updateFontStyle();
+  updateFontWeight();
+  updateFontSize();
+  updateTextAlign();
+  updateColor();
+  updateBackground();
+  updateMarginOuter();
+  updatePaddingInner();
+};
+
 // Watch for changes
 watch(() => fontFamily.value.value, () => {
   if (isUpdatingFromStore) return;
@@ -605,6 +688,9 @@ const open = (element, event, count = null) => {
   // Store instance count if provided, otherwise calculate it
   elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
 
+  // Read inheritance state from element's data attribute
+  inheritanceLocked.value = element.dataset.inheritanceUnlocked !== 'true';
+
   // Load values from stylesheet
   loadValuesFromStylesheet();
 
@@ -668,8 +754,25 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
 };
 
 const toggleInheritance = () => {
+  const wasLocked = inheritanceLocked.value;
   inheritanceLocked.value = !inheritanceLocked.value;
-  // TODO: Implement CSS priority logic when unlocked
+
+  // Store the inheritance state in the element's data attribute
+  if (selectedElement.value) {
+    if (inheritanceLocked.value) {
+      delete selectedElement.value.dataset.inheritanceUnlocked;
+    } else {
+      selectedElement.value.dataset.inheritanceUnlocked = 'true';
+    }
+  }
+
+  if (inheritanceLocked.value && !wasLocked) {
+    // Re-locking: remove the element-specific CSS block to restore inheritance
+    removeElementBlock();
+  } else if (!inheritanceLocked.value && wasLocked) {
+    // Unlocking: apply all current field values to create the CSS block
+    applyAllStyles();
+  }
 };
 
 defineExpose({ handleIframeClick, close, visible });
diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index 0b309be..d82b8ef 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -285,6 +285,7 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import { usePopupPosition } from '../composables/usePopupPosition';
+import { useDebounce } from '../composables/useDebounce';
 import NumberInput from './ui/NumberInput.vue';
 import Coloris from '@melloware/coloris';
 import '@melloware/coloris/dist/coloris.css';
@@ -312,7 +313,7 @@ const inheritanceLocked = ref(true);
 const backgroundColorInput = ref(null);
 
 let isUpdatingFromStore = false;
-let updateTimer = null;
+const { debouncedUpdate } = useDebounce(500);
 
 const margins = ref({
   top: { value: 0, unit: 'mm' },
@@ -328,11 +329,6 @@ const background = ref({
 
 const pattern = ref('');
 
-const debouncedUpdate = (callback) => {
-  clearTimeout(updateTimer);
-  updateTimer = setTimeout(callback, 1000);
-};
-
 const immediateUpdate = (callback) => {
   callback();
 };
@@ -387,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}`;
 
@@ -419,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();
@@ -448,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(
   () => [
@@ -536,8 +538,8 @@ const open = (pageElement, event, count = 1) => {
   // Extract template name from data-page-type attribute
   templateName.value = pageElement.getAttribute('data-page-type') || '';
 
-  // Reset inheritance state when opening
-  inheritanceLocked.value = true;
+  // Read inheritance state from page element's data attribute
+  inheritanceLocked.value = pageElement.dataset.inheritanceUnlocked !== 'true';
 
   // Load values from stylesheet (@page block)
   loadValuesFromStylesheet();
@@ -587,12 +589,22 @@ const toggleInheritance = () => {
   const wasLocked = inheritanceLocked.value;
   inheritanceLocked.value = !inheritanceLocked.value;
 
+  // Store the inheritance state in the page element's data attribute
+  if (selectedPageElement.value) {
+    if (inheritanceLocked.value) {
+      delete selectedPageElement.value.dataset.inheritanceUnlocked;
+    } else {
+      selectedPageElement.value.dataset.inheritanceUnlocked = 'true';
+    }
+  }
+
   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(() => {
@@ -604,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;
@@ -619,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(
diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index e209215..e539dd2 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -119,11 +119,11 @@ nav {
   position: relative;
   left: calc(var(--panel-w)*-1);
 
-  padding: 4rem 0;
 
   background-color: var(--color-panel-bg);
   box-shadow: -5px 0px 12px;
 
+
   transition: left 0.3s var(--curve);
 }
 
@@ -132,10 +132,10 @@ nav {
 }
 
 .tab-panel {
-  height: 100%;
+  height: calc(100% - var(--panel-nav-h)*2);
   overflow-y: auto;
   overflow-x: hidden;
   padding: 0 2em;
-  // padding-left: 1em;
+  margin-top: var(--panel-nav-h);
 }
 </style>
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index b0a2fe7..d21a5a5 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -288,16 +288,17 @@
 <script setup>
 import { ref, computed, watch, onMounted, inject } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
+import { useDebounce } from '../../composables/useDebounce';
 import Coloris from '@melloware/coloris';
 import NumberInput from '../ui/NumberInput.vue';
 import '@melloware/coloris/dist/coloris.css';
 
 const stylesheetStore = useStylesheetStore();
+const { debouncedUpdate } = useDebounce(500);
 const backgroundColorInput = ref(null);
 const activeTab = inject('activeTab', ref('document'));
 
 let isUpdatingFromStore = false;
-let updateTimer = null;
 
 const pageFormat = ref('A4');
 
@@ -328,11 +329,6 @@ const pattern = ref('');
 const pageNumbers = ref(false);
 const runningTitle = ref(false);
 
-const debouncedUpdate = (callback) => {
-  clearTimeout(updateTimer);
-  updateTimer = setTimeout(callback, 1000);
-};
-
 const immediateUpdate = (callback) => {
   callback();
 };
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 1a193e9..6dfaf8a 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -34,7 +34,7 @@
 
     <!-- Taille du texte -->
     <div class="settings-subsection">
-      <div class="field">
+      <div class="field field-text-size">
         <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
         <InputWithUnit
           v-model="fontSize"
@@ -130,9 +130,11 @@ import InputWithUnit from '../ui/InputWithUnit.vue';
 import MarginEditor from '../ui/MarginEditor.vue';
 import { useCssUpdater } from '../../composables/useCssUpdater';
 import { useCssSync } from '../../composables/useCssSync';
+import { useDebounce } from '../../composables/useDebounce';
 
 const { updateStyle, setMargin, setDetailedMargins, setPadding, setDetailedPadding } = useCssUpdater();
 const { extractValue, extractNumericValue, extractSpacing } = useCssSync();
+const { debouncedUpdate } = useDebounce(500);
 
 // Constants
 const fonts = ['Alegreya Sans', 'Arial', 'Georgia', 'Helvetica', 'Times New Roman'];
@@ -203,26 +205,32 @@ watch(weight, (val) => {
 
 watch(fontSize, (val) => {
   if (isUpdatingFromStore) return;
-  updateStyle('p', 'font-size', `${val.value}${val.unit}`);
+  debouncedUpdate(() => {
+    updateStyle('p', 'font-size', `${val.value}${val.unit}`);
+  });
 }, { deep: true });
 
 // Margin/Padding handlers
 const handleMarginOuterChange = ({ type, simple, detailed }) => {
   if (isUpdatingFromStore) return;
-  if (type === 'simple') {
-    setMargin('p', simple.value, simple.unit);
-  } else {
-    setDetailedMargins('p', detailed.top, detailed.right, detailed.bottom, detailed.left);
-  }
+  debouncedUpdate(() => {
+    if (type === 'simple') {
+      setMargin('p', simple.value, simple.unit);
+    } else {
+      setDetailedMargins('p', detailed.top, detailed.right, detailed.bottom, detailed.left);
+    }
+  });
 };
 
 const handleMarginInnerChange = ({ type, simple, detailed }) => {
   if (isUpdatingFromStore) return;
-  if (type === 'simple') {
-    setPadding('p', simple.value, simple.unit);
-  } else {
-    setDetailedPadding('p', detailed.top, detailed.right, detailed.bottom, detailed.left);
-  }
+  debouncedUpdate(() => {
+    if (type === 'simple') {
+      setPadding('p', simple.value, simple.unit);
+    } else {
+      setDetailedPadding('p', detailed.top, detailed.right, detailed.bottom, detailed.left);
+    }
+  });
 };
 
 // Sync from store
diff --git a/src/composables/useDebounce.js b/src/composables/useDebounce.js
new file mode 100644
index 0000000..f4d1ff3
--- /dev/null
+++ b/src/composables/useDebounce.js
@@ -0,0 +1,15 @@
+/**
+ * Composable for debounced updates
+ * @param {number} delay - Debounce delay in milliseconds (default: 500ms)
+ * @returns {Function} debouncedUpdate function
+ */
+export function useDebounce(delay = 500) {
+  let timer = null;
+
+  const debouncedUpdate = (callback) => {
+    clearTimeout(timer);
+    timer = setTimeout(callback, delay);
+  };
+
+  return { debouncedUpdate };
+}
diff --git a/src/utils/css-parsing.js b/src/utils/css-parsing.js
index 08edd4c..96e3c85 100644
--- a/src/utils/css-parsing.js
+++ b/src/utils/css-parsing.js
@@ -16,20 +16,32 @@ const extractCssValue = (css, selector, property) => {
 
 const updateCssValue = ({ css, selector, property, value, unit }) => {
   const escaped = selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const formattedValue = unit === '' || unit === undefined ? value : `${value}${unit}`;
 
-  if (unit === '') {
-    const regex = new RegExp(
-      `(${escaped}\\s*{[^}]*${property}:\\s*)[^;]+`,
-      'gi'
-    );
-    return css.replace(regex, `$1${value}`);
+  // Check if selector exists
+  const selectorRegex = new RegExp(`${escaped}\\s*{([^}]*)}`, 'i');
+  const selectorMatch = css.match(selectorRegex);
+
+  if (!selectorMatch) {
+    // Selector doesn't exist, create it
+    return css + `\n${selector} {\n  ${property}: ${formattedValue};\n}\n`;
   }
 
-  const regex = new RegExp(
-    `(${escaped}\\s*{[^}]*${property}:\\s*)[\\d.]+(px|rem|em|mm|cm|in)`,
-    'gi'
-  );
-  return css.replace(regex, `$1${value}${unit}`);
+  const blockContent = selectorMatch[1];
+
+  // Check if property exists in the block
+  const propertyRegex = new RegExp(`(${property}\\s*:\\s*)([^;]+)(;?)`, 'i');
+  const propertyMatch = blockContent.match(propertyRegex);
+
+  if (!propertyMatch) {
+    // Property doesn't exist, add it to the block
+    const newBlockContent = blockContent.trimEnd() + `\n  ${property}: ${formattedValue};`;
+    return css.replace(selectorRegex, `${selector} {${newBlockContent}}`);
+  }
+
+  // Property exists, replace the entire value
+  const newBlockContent = blockContent.replace(propertyRegex, `$1${formattedValue}$3`);
+  return css.replace(selectorRegex, `${selector} {${newBlockContent}}`);
 };
 
 const cssParsingUtils = { extractCssBlock, extractCssValue, updateCssValue };