diff --git a/public/assets/css/src/_colors.scss b/public/assets/css/src/_colors.scss
index 41c7892..3bd46fd 100644
--- a/public/assets/css/src/_colors.scss
+++ b/public/assets/css/src/_colors.scss
@@ -91,7 +91,7 @@
 }
 
 
-[data-color-type="text"]{
+[data-color-type="elem"]{
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
   --color-200: #dacfff;
diff --git a/public/assets/css/src/_panel-settings.scss b/public/assets/css/src/_panel-settings.scss
deleted file mode 100644
index c1c2208..0000000
--- a/public/assets/css/src/_panel-settings.scss
+++ /dev/null
@@ -1,71 +0,0 @@
-.panel-settings__container{
-    // margin-top: var(--space-m);
-    margin-bottom: var(--space-s);
-
-      border: 1px solid var(--color-300);
-           border-radius: var(--border-radius);
-           padding: var(--space-s);
-
-    .settings__header{
-        display: flex;
-        align-items: center;
-        gap: var(--space-xs);
-           margin-bottom: var(--space-s);
-        //      border: 1px solid var(--color-300);
-        //    border-radius: var(--border-radius);
-        //    padding: 2px 1ch;
-
-
-        .icon{
-            position: relative;
-            top: 2px;
-            svg{
-                width: 20px;
-                height: 20px;
-                fill: var(--color-600);
-            }
-        }
-        .title{
- font-size: 1.2rem;
- color: var(--color-600);
-        }
-       
-    }
-
-
-    .setting__section{
-        .setting__header{
-            color: var(--color-600);
-        }
-    }
-
-    .setting__section[data-setting="format"]{
-        border-bottom: none;
-        padding-bottom: var(--space-xs);
-
-    }
-
-    .setting__section[data-setting="dimensions"]{
-        border-top: none;
-        padding-top: 0;
-        .setting__header{
-            display: none;
-        }
-        .setting__body{
-            grid-column: 2;
-            width: 0;
-            display: flex;
-             gap: var(--space-s);
-             .field-size-page{
-                display: flex;
-                align-items: center;
-                justify-content: space-between;
-                gap: var(--space-xs);
-
-             }
-        }
-
-        .field-size-page:first-of-type .unit-toggle{ display: none; }
-
-    }
-}
\ No newline at end of file
diff --git a/public/assets/css/src/_setting__section.scss b/public/assets/css/src/_setting__section.scss
index e1486b5..a176db4 100644
--- a/public/assets/css/src/_setting__section.scss
+++ b/public/assets/css/src/_setting__section.scss
@@ -32,11 +32,6 @@
 
 }
 
-.setting-disabled .setting__body {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
 
 .setting__section[data-setting="font"] {
     .setting__body{
diff --git a/public/assets/css/src/_variables.scss b/public/assets/css/src/_variables.scss
index 9156d46..4d01e0b 100644
--- a/public/assets/css/src/_variables.scss
+++ b/public/assets/css/src/_variables.scss
@@ -31,6 +31,6 @@
   --label-w: 18ch;
   font-size: 14px;
 
-  --panel-w: 560px;
+  --panel-w: 540px;
   --panel-nav-h: 60px;
 }
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 460ee98..b19eb98 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -176,7 +176,7 @@
   --color-900: #d96a30;
 }
 
-[data-color-type=text] {
+[data-color-type=elem] {
   --color-050: #f4f0ff;
   --color-100: #e7e1ff;
   --color-200: #dacfff;
@@ -241,7 +241,7 @@ img {
   --input-w-small: 45px;
   --label-w: 18ch;
   font-size: 14px;
-  --panel-w: 560px;
+  --panel-w: 540px;
   --panel-nav-h: 60px;
 }
 
@@ -269,61 +269,6 @@ h2 {
   string-set: title content(text);
 }
 
-.panel-settings__container {
-  margin-bottom: var(--space-s);
-  border: 1px solid var(--color-300);
-  border-radius: var(--border-radius);
-  padding: var(--space-s);
-}
-.panel-settings__container .settings__header {
-  display: flex;
-  align-items: center;
-  gap: var(--space-xs);
-  margin-bottom: var(--space-s);
-}
-.panel-settings__container .settings__header .icon {
-  position: relative;
-  top: 2px;
-}
-.panel-settings__container .settings__header .icon svg {
-  width: 20px;
-  height: 20px;
-  fill: var(--color-600);
-}
-.panel-settings__container .settings__header .title {
-  font-size: 1.2rem;
-  color: var(--color-600);
-}
-.panel-settings__container .setting__section .setting__header {
-  color: var(--color-600);
-}
-.panel-settings__container .setting__section[data-setting=format] {
-  border-bottom: none;
-  padding-bottom: var(--space-xs);
-}
-.panel-settings__container .setting__section[data-setting=dimensions] {
-  border-top: none;
-  padding-top: 0;
-}
-.panel-settings__container .setting__section[data-setting=dimensions] .setting__header {
-  display: none;
-}
-.panel-settings__container .setting__section[data-setting=dimensions] .setting__body {
-  grid-column: 2;
-  width: 0;
-  display: flex;
-  gap: var(--space-s);
-}
-.panel-settings__container .setting__section[data-setting=dimensions] .setting__body .field-size-page {
-  display: flex;
-  align-items: center;
-  justify-content: space-between;
-  gap: var(--space-xs);
-}
-.panel-settings__container .setting__section[data-setting=dimensions] .field-size-page:first-of-type .unit-toggle {
-  display: none;
-}
-
 select,
 input[type=text],
 input[type=number] {
@@ -763,11 +708,6 @@ input[type=number] {
   padding-top: 4px;
 }
 
-.setting-disabled .setting__body {
-  opacity: 0.4;
-  pointer-events: none;
-}
-
 .setting__section[data-setting=font] .setting__body {
   display: grid;
   grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index a80dcae..fbbe6e6 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/_panel-settings.scss","src/_forms.scss","src/_buttons.scss","src/_toggle-setting.scss","src/_settings-popup.scss","src/_setting__section.scss","src/_global.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/_buttons.scss","src/_toggle-setting.scss","src/_settings-popup.scss","src/_setting__section.scss","src/_global.scss"],"names":[],"mappings":"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","file":"style.css"}
\ No newline at end of file
diff --git a/public/assets/css/style.scss b/public/assets/css/style.scss
index 9bc0477..c3f3ceb 100644
--- a/public/assets/css/style.scss
+++ b/public/assets/css/style.scss
@@ -4,8 +4,8 @@
 @use "src/_variables.scss" as *;
 @use "src/_text.scss" as *;
 @use "src/_print-styles.scss" as *;
-@use "src/_panel-settings.scss" as *;
 @use "src/_forms.scss" as *;
+@use "src/_forms-section.scss" as *;
 @use "src/_buttons.scss" as *;
 @use "src/_toggle-setting.scss" as *;
 @use "src/_settings-popup.scss" as *;
diff --git a/public/assets/svg/book.svg b/public/assets/svg/book.svg
deleted file mode 100644
index 4165e2c..0000000
--- a/public/assets/svg/book.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 93 93" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g id="Artboard1" transform="matrix(1,0,0,1,-4,-16)">
-        <rect x="4" y="16" width="93" height="93" style="fill:none;"/>
-        <g transform="matrix(1,0,0,1,0.497582,12.49946)">
-            <path d="M48.766,20.68C46.766,19.864 44.453,19.2 41.918,18.727C39.164,18.215 36.145,17.93 32.961,17.93C28.543,17.93 24.41,18.481 20.871,19.438C17.528,20.344 14.731,21.606 12.739,23.098L12.739,73.036C19.61,70.622 25.661,69.431 31.505,69.337C37.294,69.243 42.852,70.227 48.77,72.157L48.77,20.672L48.766,20.68ZM87.258,73.024L87.262,23.102C85.274,21.606 82.477,20.344 79.129,19.442C75.59,18.481 71.457,17.934 67.039,17.934C63.856,17.934 60.836,18.215 58.082,18.731C55.547,19.204 53.234,19.868 51.234,20.684L51.234,72.168C57.234,70.219 62.875,69.227 68.695,69.32C74.547,69.414 80.554,70.605 87.261,73.023L87.258,73.024ZM10.274,27.958L10.274,74.798C10.274,75.478 10.825,76.032 11.508,76.032C11.7,76.032 11.876,75.989 12.04,75.915C19.294,73.22 25.556,71.9 31.548,71.806C37.555,71.708 43.329,72.841 49.603,75.048C49.876,75.142 50.157,75.138 50.411,75.048C56.767,72.829 62.63,71.689 68.665,71.782C74.712,71.88 80.954,73.216 88.063,75.947C88.696,76.189 89.407,75.872 89.649,75.239C89.704,75.095 89.731,74.947 89.731,74.802L89.739,74.802L89.731,27.958C90.387,28.228 91.02,28.513 91.622,28.813C92.454,29.228 93.212,29.665 93.887,30.122L93.887,82.071C89.176,79.54 81.664,77.856 73.973,77.122C64.86,76.255 55.399,76.712 50.004,78.677C44.61,76.712 35.152,76.255 26.035,77.122C18.34,77.856 10.832,79.54 6.121,82.071L6.117,30.118C6.793,29.665 7.547,29.227 8.383,28.809C8.985,28.509 9.617,28.224 10.274,27.954L10.274,27.958Z"/>
-        </g>
-    </g>
-</svg>
diff --git a/public/assets/svg/text.svg b/public/assets/svg/text.svg
deleted file mode 100644
index 363f37d..0000000
--- a/public/assets/svg/text.svg
+++ /dev/null
@@ -1,10 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
-<svg width="100%" height="100%" viewBox="0 0 29 29" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xml:space="preserve" xmlns:serif="http://www.serif.com/" style="fill-rule:evenodd;clip-rule:evenodd;stroke-linejoin:round;stroke-miterlimit:2;">
-    <g id="Artboard1" transform="matrix(1,0,0,1,-1,-1)">
-        <rect x="1" y="1" width="29" height="29" style="fill:none;"/>
-        <g transform="matrix(1,0,0,1,-0.5,-0.5)">
-            <path d="M5,2C3.344,2 2,3.344 2,5L2,27C2,28.656 3.344,30 5,30L27,30C28.656,30 30,28.656 30,27L30,5C30,3.344 28.656,2 27,2L5,2ZM8,8L18,8C18.552,8 19,8.448 19,9L19,11C19,11.552 18.552,12 18,12C17.448,12 17,11.552 17,11L17,10L14,10L14,22L15,22C15.552,22 16,22.448 16,23C16,23.552 15.552,24 15,24L11,24C10.448,24 10,23.552 10,23C10,22.448 10.448,22 11,22L12,22L12,10L9,10L9,11C9,11.552 8.552,12 8,12C7.448,12 7,11.552 7,11L7,9C7,8.448 7.448,8 8,8ZM18,14L24,14C24.552,14 25,14.448 25,15L25,17C25,17.552 24.552,18 24,18C23.448,18 23,17.552 23,17L23,16L22,16L22,22C22.552,22 23,22.448 23,23C23,23.552 22.552,24 22,24L20,24C19.448,24 19,23.552 19,23C19,22.448 19.448,22 20,22L20,16L19,16L19,17C19,17.552 18.552,18 18,18C17.448,18 17,17.552 17,17L17,15C17,14.448 17.448,14 18,14Z"/>
-        </g>
-    </g>
-</svg>
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index bc81722..187fa79 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -415,5 +415,48 @@ defineExpose({ handleIframeClick, close: handleClose, visible });
 
 
 
+/* Toggle setting checkbox */
+/* .toggle-setting {
+  cursor: pointer;
+  accent-color: var(--color-purple, #7c3aed);
+  flex-shrink: 0;
+} */
 
+/* Disabled state: grey out body but keep header interactive */
+/* Clicking anywhere on the section enables it */
+/* .setting-disabled {
+  cursor: pointer;
+}
+
+.setting-disabled .setting__body {
+  opacity: 0.4;
+  pointer-events: none;
+}
+
+.lock-toggle {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: none;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  cursor: pointer;
+  padding: 2px 4px;
+  color: var(--color-text-muted, #999);
+  transition: color 0.15s, border-color 0.15s;
+}
+
+.lock-toggle:hover:not(:disabled) {
+  color: var(--color-text, #333);
+  border-color: var(--color-border, #ccc);
+}
+
+.lock-toggle.locked {
+  color: var(--color-purple, #7c3aed);
+}
+
+.lock-toggle:disabled {
+  opacity: 0.4;
+  cursor: not-allowed;
+} */
 </style>
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 59783e9..36adf38 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -1,151 +1,249 @@
 <template>
   <section
-    class="panel-settings__container"
+    class="settings__container"
     id="settings__container_page"
     data-color-type="page"
   >
-
-    <div class="settings__header">
-      <div class="icon" v-html="bookIcon"></div>
-      <h2 class="title">Réglage des pages</h2>
-    </div>
-    
+    <h2>Réglage des pages</h2>
     <div class="container">
-
-      <!-- Format d'impression -->
-      <div class="setting__section" data-setting="format">
-        <div class="setting__header">
-          <label class="label-with-tooltip" data-css="size">Format d'impression</label>
-        </div>
-        <div class="setting__body">
+      <div class="setting__section">
+        <div class="field field-simple">
+          <label for="page-format" class="label-with-tooltip" data-css="size"
+            >Format d'impression</label
+          >
           <select id="page-format" v-model="pageFormat">
             <option value="A4">A4</option>
             <option value="A5">A5</option>
+            <!-- <option value="A3">A3</option>
+          <option value="letter">Letter</option>
+          <option value="legal">Legal</option> -->
             <option value="custom">Personnalisé</option>
           </select>
         </div>
       </div>
 
-      <!-- Dimensions -->
-      <div class="setting__section" data-setting="dimensions" :class="{ 'setting-disabled': !isCustomFormat }">
-        <div class="setting__header">
-          <label class="label-with-tooltip" data-css="width / height">Dimensions</label>
-        </div>
-        <div class="setting__body">
-          <div class="field-size-page">
-            <label for="page-width" class="label-with-tooltip" data-css="width">Largeur</label>
-            <div class="input-with-unit">
-              <NumberInput
-                id="page-width"
-                :modelValue="customWidth"
-                @update:modelValue="(v) => (customWidth = v)"
-                :min="50"
-                :step="1"
-                :disabled="!isCustomFormat"
-              />
-              <div class="unit-toggle">
-                <button type="button" class="active">mm</button>
-              </div>
+      <div class="setting__section">
+        <div
+          class="field field-margin"
+          :class="{ 'field--view-only': !isCustomFormat }"
+        >
+          <label for="page-width" class="label-with-tooltip" data-css="width"
+            >Largeur</label
+          >
+          <div class="input-with-unit">
+            <NumberInput
+              id="page-width"
+              :modelValue="customWidth"
+              @update:modelValue="(v) => (customWidth = v)"
+              :min="50"
+              :step="1"
+              :disabled="!isCustomFormat"
+            />
+            <div class="unit-toggle">
+              <button type="button" class="active">mm</button>
             </div>
           </div>
-          <div class="field-size-page">
-            <label for="page-height" class="label-with-tooltip" data-css="height">Hauteur</label>
-            <div class="input-with-unit">
-              <NumberInput
-                id="page-height"
-                :modelValue="customHeight"
-                @update:modelValue="(v) => (customHeight = v)"
-                :min="50"
-                :step="1"
-                :disabled="!isCustomFormat"
-              />
-              <div class="unit-toggle">
-                <button type="button" class="active">mm</button>
-              </div>
+        </div>
+
+        <div
+          class="field field-margin"
+          :class="{ 'field--view-only': !isCustomFormat }"
+        >
+          <label for="page-height" class="label-with-tooltip" data-css="height"
+            >Hauteur</label
+          >
+          <div class="input-with-unit">
+            <NumberInput
+              id="page-height"
+              :modelValue="customHeight"
+              @update:modelValue="(v) => (customHeight = v)"
+              :min="50"
+              :step="1"
+              :disabled="!isCustomFormat"
+            />
+            <div class="unit-toggle">
+              <button type="button" class="active">mm</button>
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Marges -->
-      <div class="setting__section" data-setting="margin">
-        <div class="setting__header">
-          <label class="label-with-tooltip" data-css="margin">Marges</label>
+      <div class="setting__section margins">
+        <h3>Marges</h3>
+
+        <div class="field field-margin">
+          <label
+            for="margin-top"
+            class="label-with-tooltip"
+            data-css="margin-top"
+            >Haut</label
+          >
+          <div class="input-with-unit">
+            <NumberInput
+              id="margin-top"
+              :modelValue="margins.top.value"
+              :min="0"
+              :step="1"
+              @update:modelValue="(value) => (margins.top.value = value)"
+            />
+            <div class="unit-toggle">
+              <button
+                type="button"
+                :class="{ active: margins.top.unit === 'mm' }"
+                @click="updateMarginUnit('top', 'mm')"
+              >
+                mm
+              </button>
+              <button
+                type="button"
+                :class="{ active: margins.top.unit === 'px' }"
+                @click="updateMarginUnit('top', 'px')"
+              >
+                px
+              </button>
+              <!-- <button
+              type="button"
+              :class="{ active: margins.top.unit === 'rem' }"
+              @click="updateMarginUnit('top', 'rem')"
+            >
+              rem
+            </button> -->
+            </div>
+          </div>
         </div>
-        <div class="setting__body">
-          <div class="field field-margin">
-            <label for="margin-top" class="label-with-tooltip" data-css="margin-top">Haut</label>
-            <div class="input-with-unit">
-              <NumberInput
-                id="margin-top"
-                :modelValue="margins.top.value"
-                :min="0"
-                :step="1"
-                @update:modelValue="(value) => (margins.top.value = value)"
-              />
-              <div class="unit-toggle">
-                <button type="button" :class="{ active: margins.top.unit === 'mm' }" @click="updateMarginUnit('top', 'mm')">mm</button>
-                <button type="button" :class="{ active: margins.top.unit === 'px' }" @click="updateMarginUnit('top', 'px')">px</button>
-              </div>
+
+        <div class="field field-margin">
+          <label
+            for="margin-bottom"
+            class="label-with-tooltip"
+            data-css="margin-bottom"
+            >Bas</label
+          >
+          <div class="input-with-unit">
+            <NumberInput
+              id="margin-bottom"
+              :modelValue="margins.bottom.value"
+              :min="0"
+              :step="1"
+              @update:modelValue="(value) => (margins.bottom.value = value)"
+            />
+            <div class="unit-toggle">
+              <button
+                type="button"
+                :class="{ active: margins.bottom.unit === 'mm' }"
+                @click="updateMarginUnit('bottom', 'mm')"
+              >
+                mm
+              </button>
+              <button
+                type="button"
+                :class="{ active: margins.bottom.unit === 'px' }"
+                @click="updateMarginUnit('bottom', 'px')"
+              >
+                px
+              </button>
+              <!-- <button
+              type="button"
+              :class="{ active: margins.bottom.unit === 'rem' }"
+              @click="updateMarginUnit('bottom', 'rem')"
+            >
+              rem
+            </button> -->
             </div>
           </div>
-          <div class="field field-margin">
-            <label for="margin-bottom" class="label-with-tooltip" data-css="margin-bottom">Bas</label>
-            <div class="input-with-unit">
-              <NumberInput
-                id="margin-bottom"
-                :modelValue="margins.bottom.value"
-                :min="0"
-                :step="1"
-                @update:modelValue="(value) => (margins.bottom.value = value)"
-              />
-              <div class="unit-toggle">
-                <button type="button" :class="{ active: margins.bottom.unit === 'mm' }" @click="updateMarginUnit('bottom', 'mm')">mm</button>
-                <button type="button" :class="{ active: margins.bottom.unit === 'px' }" @click="updateMarginUnit('bottom', 'px')">px</button>
-              </div>
+        </div>
+
+        <div class="field field-margin">
+          <label
+            for="margin-left"
+            class="label-with-tooltip"
+            data-css="margin-left"
+            >Gauche</label
+          >
+          <div class="input-with-unit">
+            <NumberInput
+              id="margin-left"
+              :modelValue="margins.left.value"
+              :min="0"
+              :step="1"
+              @update:modelValue="(value) => (margins.left.value = value)"
+            />
+            <div class="unit-toggle">
+              <button
+                type="button"
+                :class="{ active: margins.left.unit === 'mm' }"
+                @click="updateMarginUnit('left', 'mm')"
+              >
+                mm
+              </button>
+              <button
+                type="button"
+                :class="{ active: margins.left.unit === 'px' }"
+                @click="updateMarginUnit('left', 'px')"
+              >
+                px
+              </button>
+              <!-- <button
+              type="button"
+              :class="{ active: margins.left.unit === 'rem' }"
+              @click="updateMarginUnit('left', 'rem')"
+            >
+              rem
+            </button> -->
             </div>
           </div>
-          <div class="field field-margin">
-            <label for="margin-left" class="label-with-tooltip" data-css="margin-left">Gauche</label>
-            <div class="input-with-unit">
-              <NumberInput
-                id="margin-left"
-                :modelValue="margins.left.value"
-                :min="0"
-                :step="1"
-                @update:modelValue="(value) => (margins.left.value = value)"
-              />
-              <div class="unit-toggle">
-                <button type="button" :class="{ active: margins.left.unit === 'mm' }" @click="updateMarginUnit('left', 'mm')">mm</button>
-                <button type="button" :class="{ active: margins.left.unit === 'px' }" @click="updateMarginUnit('left', 'px')">px</button>
-              </div>
-            </div>
-          </div>
-          <div class="field field-margin">
-            <label for="margin-right" class="label-with-tooltip" data-css="margin-right">Droite</label>
-            <div class="input-with-unit">
-              <NumberInput
-                id="margin-right"
-                :modelValue="margins.right.value"
-                :min="0"
-                :step="1"
-                @update:modelValue="(value) => (margins.right.value = value)"
-              />
-              <div class="unit-toggle">
-                <button type="button" :class="{ active: margins.right.unit === 'mm' }" @click="updateMarginUnit('right', 'mm')">mm</button>
-                <button type="button" :class="{ active: margins.right.unit === 'px' }" @click="updateMarginUnit('right', 'px')">px</button>
-              </div>
+        </div>
+
+        <div class="field field-margin">
+          <label
+            for="margin-right"
+            class="label-with-tooltip"
+            data-css="margin-right"
+            >Droite</label
+          >
+          <div class="input-with-unit">
+            <NumberInput
+              id="margin-right"
+              :modelValue="margins.right.value"
+              :min="0"
+              :step="1"
+              @update:modelValue="(value) => (margins.right.value = value)"
+            />
+            <div class="unit-toggle">
+              <button
+                type="button"
+                :class="{ active: margins.right.unit === 'mm' }"
+                @click="updateMarginUnit('right', 'mm')"
+              >
+                mm
+              </button>
+              <button
+                type="button"
+                :class="{ active: margins.right.unit === 'px' }"
+                @click="updateMarginUnit('right', 'px')"
+              >
+                px
+              </button>
+              <!-- <button
+              type="button"
+              :class="{ active: margins.right.unit === 'rem' }"
+              @click="updateMarginUnit('right', 'rem')"
+            >
+              rem
+            </button> -->
             </div>
           </div>
         </div>
       </div>
 
-      <!-- Arrière-plan -->
-      <div class="setting__section" data-setting="background">
-        <div class="setting__header">
-          <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
-        </div>
-        <div class="setting__body">
+      <div class="setting__section">
+        <div class="field field-simple">
+          <label
+            for="background"
+            class="label-with-tooltip"
+            data-css="background"
+            >Arrière-plan</label
+          >
           <div class="input-with-color">
             <input
               ref="backgroundColorInput"
@@ -154,16 +252,35 @@
               v-model="background.value"
               data-coloris
             />
+            <!-- Temporarily commented out
+          <div class="unit-toggle">
+            <button
+              type="button"
+              :class="{ active: background.format === 'rgb' }"
+              @click="background.format = 'rgb'"
+            >
+              rgb
+            </button>
+            <button
+              type="button"
+              :class="{ active: background.format === 'hex' }"
+              @click="background.format = 'hex'"
+            >
+              hex
+            </button>
           </div>
+          --></div>
         </div>
       </div>
 
-      <!-- Motif -->
-      <div class="setting__section setting-disabled" data-setting="pattern" title="Fonctionnalité à venir">
-        <div class="setting__header">
-          <label class="label-with-tooltip" data-css="background-image">Motif</label>
-        </div>
-        <div class="setting__body">
+      <div class="setting__section" title="Fonctionnalité à venir">
+        <div class="field field-simple field--view-only">
+          <label
+            for="pattern"
+            class="label-with-tooltip"
+            data-css="background-image"
+            >Motif</label
+          >
           <select id="pattern" v-model="pattern" disabled>
             <option value="">Choisissez</option>
             <option value="dots">Points</option>
@@ -173,30 +290,33 @@
         </div>
       </div>
 
-      <!-- Options -->
-      <div class="setting__section" data-setting="options">
-        <div class="setting__header">
-          <label>Options</label>
+      <div class="setting__section">
+        <div class="field checkbox-field">
+          <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
+          <label
+            for="page-numbers"
+            class="label-with-tooltip"
+            data-css="@bottom-left/right"
+            >Numéro de page</label
+          >
         </div>
-        <div class="setting__body">
-          <div class="field-checkbox">
-            <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
-            <label for="page-numbers" class="label-with-tooltip" data-css="@bottom-left/right">Numéro de page</label>
-          </div>
-          <div class="field-checkbox">
-            <input id="running-title" type="checkbox" v-model="runningTitle" />
-            <label for="running-title" class="label-with-tooltip" data-css="string-set">Titre courant</label>
-          </div>
+
+        <div class="field checkbox-field">
+          <input id="running-title" type="checkbox" v-model="runningTitle" />
+          <label
+            for="running-title"
+            class="label-with-tooltip"
+            data-css="string-set"
+            >Titre courant</label
+          >
         </div>
       </div>
-
     </div>
   </section>
 </template>
 
 <script setup>
 import { ref, computed, watch, onMounted, inject } from 'vue';
-import bookIcon from '/assets/svg/book.svg?raw';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { useDebounce } from '../../composables/useDebounce';
 import { useCssSync } from '../../composables/useCssSync';
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index ef02dc1..bc14a6d 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -1,34 +1,30 @@
 <template>
-  <section class="panel-settings__container" id="settings__container_elem" data-color-type="text">
-
-
-    <div class="settings__header">
-      <div class="icon" v-html="textIcon"></div>
-      <h2 class="title">Réglage du texte par défaut</h2>
-    </div>
-    
-
+  <section class="settings__container" id="settings__container_elem" data-color-type="elem">
+    <h2>Réglage du texte par défaut</h2>
     <div class="container"> 
+  
+    <p class="infos">
+      Ces réglages s'appliquent à l'ensemble des éléments du document. Vous
+      pouvez modifier ensuite les éléments indépendamment.
+    </p>
 
     <!-- Police -->
-    <div class="setting__section" data-setting="font">
-      <div class="setting__header">
-        <label class="label-with-tooltip" data-css="font-family">Police</label>
-      </div>
-      <div class="setting__body">
-        <select id="text-font" v-model="font">
-          <option value="sans-serif">Police système (sans-serif)</option>
-          <option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
-        </select>
+    <div class="setting__section">
+      <div class="field field-font">
+        <label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
+        <div class="field-font__options">
+          <select id="text-font" v-model="font">
+            <option value="sans-serif">Police système (sans-serif)</option>
+            <option v-for="f in projectFonts" :key="f.name" :value="f.name" :style="{ fontFamily: `'${f.name}', ${f.category}` }">{{ f.name }}</option>
+          </select>
+        </div>
       </div>
     </div>
 
     <!-- Taille du texte -->
-    <div class="setting__section" data-setting="fontSize">
-      <div class="setting__header">
-        <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
-      </div>
-      <div class="setting__body">
+    <div class="setting__section">
+      <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"
           :units="['px']"
@@ -40,11 +36,9 @@
     </div>
 
     <!-- Interlignage -->
-    <div class="setting__section" data-setting="lineHeight">
-      <div class="setting__header">
-        <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
-      </div>
-      <div class="setting__body">
+    <div class="setting__section">
+      <div class="field field-text-size">
+        <label for="text-lineheight-range" class="label-with-tooltip" data-css="line-height">Interlignage</label>
         <InputWithUnit
           v-model="lineHeight"
           :units="['px']"
@@ -55,18 +49,17 @@
       </div>
     </div>
 
-    <!-- Couleur -->
-    <div class="setting__section" data-setting="color">
-      <div class="setting__header">
-        <label class="label-with-tooltip" data-css="color">Couleur</label>
-      </div>
-      <div class="setting__body">
+    <!-- Couleurs -->
+    <div class="setting__section">
+      <div class="field field-simple">
+        <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"
+            class="color-input"
             data-coloris
           />
         </div>
@@ -80,7 +73,6 @@
 
 <script setup>
 import { ref, watch, onMounted, nextTick } from 'vue';
-import textIcon from '/assets/svg/text.svg?raw';
 import { initColoris } from '../../composables/useColoris';
 import InputWithUnit from '../ui/InputWithUnit.vue';
 import { useCssUpdater } from '../../composables/useCssUpdater';
diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js
index c98b775..7f454e9 100644
--- a/src/composables/useElementSettings.js
+++ b/src/composables/useElementSettings.js
@@ -372,17 +372,12 @@ export function useElementSettings({ margin, padding, basePopup }) {
 
       if (hasAnyProp) {
         for (const prop of styleProps) {
-          if (prop.group !== group) continue;
-          if (prop.css in parsed) {
-            if (prop.css === 'font-family') {
-              const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, '');
-              fontFamily.value = firstFont;
-            } else {
-              prop.set(parsed[prop.css]);
-            }
+          if (prop.group !== group || !(prop.css in parsed)) continue;
+          if (prop.css === 'font-family') {
+            const firstFont = parsed[prop.css].split(',')[0].trim().replace(/['"]/g, '');
+            fontFamily.value = firstFont;
           } else {
-            // Property removed from CSS: reset to default
-            prop.set('normal');
+            prop.set(parsed[prop.css]);
           }
         }
         for (const prop of unitProps) {