diff --git a/public/assets/css/src/_forms-section.scss b/public/assets/css/src/_forms-section.scss
index a9cae5d..831b942 100644
--- a/public/assets/css/src/_forms-section.scss
+++ b/public/assets/css/src/_forms-section.scss
@@ -1,4 +1,4 @@
-.settings-section {
+.settings__container {
   margin: var(--space-m) 0;
 
   h2 {
@@ -17,11 +17,11 @@
   }
 }
 
-.settings-subsection:not(:last-child) {
+.setting__section:not(:last-child) {
   border-bottom: 1px solid var(--color-interface-100);
 }
 
-.settings-subsection {
+.setting__section {
   padding: var(--space-xs) 0;
 
   h3 {
diff --git a/public/assets/css/src/_settings-popup.scss b/public/assets/css/src/_settings-popup.scss
index 1cc55dc..3f304df 100644
--- a/public/assets/css/src/_settings-popup.scss
+++ b/public/assets/css/src/_settings-popup.scss
@@ -50,7 +50,7 @@
   background-color: var(--color-panel-bg);
 }
 
-.settings-subsection h4 {
+.setting__section h4 {
   margin: 0 0 0.5rem 0;
   font-size: 0.875rem;
   font-weight: 600;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index 5ef9aed..6c8c431 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -460,29 +460,29 @@ input[type=number] {
 .number-input .spinner-buttons button:hover svg path {
   fill: var(--color-interface-900);
 }
-.settings-section {
+.settings__container {
   margin: var(--space-m) 0;
 }
-.settings-section h2 {
+.settings__container h2 {
   margin-bottom: var(--space);
   font-weight: 600;
   font-size: 1.4rem;
   border-bottom: 1px solid var(--color-200);
   color: var(--color-800);
 }
-.settings-section .infos {
+.settings__container .infos {
   font-size: 0.8rem;
   color: var(--color-interface-400);
 }
 
-.settings-subsection:not(:last-child) {
+.setting__section:not(:last-child) {
   border-bottom: 1px solid var(--color-interface-100);
 }
 
-.settings-subsection {
+.setting__section {
   padding: var(--space-xs) 0;
 }
-.settings-subsection h3 {
+.setting__section h3 {
   margin-top: calc(var(--space-xs) * 1.5);
   margin-bottom: calc(var(--space-xs) * 2);
   font-size: 1rem;
@@ -590,7 +590,7 @@ input[type=number] {
   background-color: var(--color-panel-bg);
 }
 
-.settings-subsection h4 {
+.setting__section h4 {
   margin: 0 0 0.5rem 0;
   font-size: 0.875rem;
   font-weight: 600;
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 439820a..7b28034 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -17,7 +17,7 @@
 
     <template #controls>
       <!-- Font Family -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.font }" @click="onSubsectionClick('font')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.font }" @click="onSubsectionClick('font')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.font" @change="onToggleSetting('font', $event.target.checked)" />
         <div class="field field-font">
           <label class="label-with-tooltip" data-css="font-family">Police</label>
@@ -40,7 +40,7 @@
       </div>
 
       <!-- Font Size -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.fontSize }" @click="onSubsectionClick('fontSize')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.fontSize" @change="onToggleSetting('fontSize', $event.target.checked)" />
         <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
@@ -56,7 +56,7 @@
       </div>
 
       <!-- LineHeight -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.lineHeight }" @click="onSubsectionClick('lineHeight')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.lineHeight }" @click="onSubsectionClick('lineHeight')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.lineHeight" @change="onToggleSetting('lineHeight', $event.target.checked)" />
         <div class="field field-text-size">
           <label class="label-with-tooltip" data-css="line-height">Interlignage</label>
@@ -72,7 +72,7 @@
       </div>
 
       <!-- Text Alignment -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.textAlign }" @click="onSubsectionClick('textAlign')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.textAlign }" @click="onSubsectionClick('textAlign')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.textAlign" @change="onToggleSetting('textAlign', $event.target.checked)" />
         <div class="field">
           <label class="label-with-tooltip" data-css="text-align">Alignement</label>
@@ -86,7 +86,7 @@
       </div>
 
       <!-- Color -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.color }" @click="onSubsectionClick('color')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.color }" @click="onSubsectionClick('color')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.color" @change="onToggleSetting('color', $event.target.checked)" />
         <div class="field field-simple">
           <label class="label-with-tooltip" data-css="color">Couleur du texte</label>
@@ -103,7 +103,7 @@
       </div>
 
       <!-- Background -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.background }" @click="onSubsectionClick('background')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.background }" @click="onSubsectionClick('background')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.background" @change="onToggleSetting('background', $event.target.checked)" />
         <div class="field field-simple">
           <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
@@ -119,10 +119,10 @@
       </div>
 
       <!-- Bordure -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.border }" @click="onSubsectionClick('border')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.border }" @click="onSubsectionClick('border')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.border" @change="onToggleSetting('border', $event.target.checked)" />
         <div class="field field-border">
-          <div class="settings-subsection-header">
+          <div class="setting__section-header">
             <label class="label-with-tooltip" data-css="border">Bordure</label>
           </div>
           <div class="field-border__options">
@@ -164,9 +164,9 @@
       </div>
 
       <!-- Outer Margins -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.margin }" @click="onSubsectionClick('margin')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.margin }" @click="onSubsectionClick('margin')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.margin" @change="onToggleSetting('margin', $event.target.checked)" />
-        <div class="settings-subsection-header">
+        <div class="setting__section-header">
           <span class="label-with-tooltip" data-css="margin">Marges extérieures</span>
           <button
             type="button"
@@ -215,9 +215,9 @@
       </div>
 
       <!-- Inner Margins (Padding) -->
-      <div class="settings-subsection" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('padding')">
+      <div class="setting__section" :class="{ 'setting-disabled': !settingEnabled.padding }" @click="onSubsectionClick('padding')">
         <input type="checkbox" class="toggle-setting" :checked="settingEnabled.padding" @change="onToggleSetting('padding', $event.target.checked)" />
-        <div class="settings-subsection-header">
+        <div class="setting__section-header">
           <span class="label-with-tooltip" data-css="padding">Marges intérieures</span>
           <button
             type="button"
@@ -530,7 +530,7 @@ const elementCss = computed(() => {
   return stylesheetStore.extractBlock(selector.value) || '';
 });
 
-// Canonical property order matching the template settings-subsections
+// Canonical property order matching the template setting__sections
 const displayedCssOrder = [
   // font group
   { css: 'font-family', group: 'font', special: true,
@@ -1255,7 +1255,7 @@ defineExpose({ handleIframeClick, close, visible });
   font-size: 0.875rem;
 }
 
-.settings-subsection-header {
+.setting__section-header {
   display: flex;
   align-items: center;
   justify-content: space-between;
@@ -1277,7 +1277,7 @@ defineExpose({ handleIframeClick, close, visible });
 }
 
 .setting-disabled .field,
-.setting-disabled .settings-subsection-header {
+.setting-disabled .setting__section-header {
   opacity: 0.4;
   pointer-events: none;
 }
diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index fcaebae..5f26d1c 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -18,7 +18,7 @@
 
     <template #controls>
       <!-- Margins -->
-      <div class="settings-subsection">
+      <div class="setting__section">
         <h4>Marges</h4>
         <div class="margin-grid">
           <div
@@ -156,7 +156,7 @@
       </div>
 
       <!-- Background -->
-      <div class="settings-subsection">
+      <div class="setting__section">
         <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
           <label class="label-with-tooltip" data-css="background">Arrière-plan</label>
           <div class="input-with-color">
@@ -172,7 +172,7 @@
       </div>
 
       <!-- Patterns -->
-      <div class="settings-subsection">
+      <div class="setting__section">
         <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
           <label class="label-with-tooltip" data-css="background-image">Motifs</label>
           <select v-model="pattern" :disabled="inheritanceLocked">
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 23e3477..36adf38 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -1,12 +1,12 @@
 <template>
   <section
-    class="settings-section"
-    id="settings-section_page"
+    class="settings__container"
+    id="settings__container_page"
     data-color-type="page"
   >
     <h2>Réglage des pages</h2>
     <div class="container">
-      <div class="settings-subsection">
+      <div class="setting__section">
         <div class="field field-simple">
           <label for="page-format" class="label-with-tooltip" data-css="size"
             >Format d'impression</label
@@ -22,7 +22,7 @@
         </div>
       </div>
 
-      <div class="settings-subsection">
+      <div class="setting__section">
         <div
           class="field field-margin"
           :class="{ 'field--view-only': !isCustomFormat }"
@@ -68,7 +68,7 @@
         </div>
       </div>
 
-      <div class="settings-subsection margins">
+      <div class="setting__section margins">
         <h3>Marges</h3>
 
         <div class="field field-margin">
@@ -236,7 +236,7 @@
         </div>
       </div>
 
-      <div class="settings-subsection">
+      <div class="setting__section">
         <div class="field field-simple">
           <label
             for="background"
@@ -273,7 +273,7 @@
         </div>
       </div>
 
-      <div class="settings-subsection" title="Fonctionnalité à venir">
+      <div class="setting__section" title="Fonctionnalité à venir">
         <div class="field field-simple field--view-only">
           <label
             for="pattern"
@@ -290,7 +290,7 @@
         </div>
       </div>
 
-      <div class="settings-subsection">
+      <div class="setting__section">
         <div class="field checkbox-field">
           <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
           <label
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 5048bde..bc14a6d 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -1,5 +1,5 @@
 <template>
-  <section class="settings-section" id="settings-section_elem" data-color-type="elem">
+  <section class="settings__container" id="settings__container_elem" data-color-type="elem">
     <h2>Réglage du texte par défaut</h2>
     <div class="container"> 
   
@@ -9,7 +9,7 @@
     </p>
 
     <!-- Police -->
-    <div class="settings-subsection">
+    <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">
@@ -22,7 +22,7 @@
     </div>
 
     <!-- Taille du texte -->
-    <div class="settings-subsection">
+    <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
@@ -36,7 +36,7 @@
     </div>
 
     <!-- Interlignage -->
-    <div class="settings-subsection">
+    <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
@@ -50,7 +50,7 @@
     </div>
 
     <!-- Couleurs -->
-    <div class="settings-subsection">
+    <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">
diff --git a/src/components/ui/BasePopup.vue b/src/components/ui/BasePopup.vue
index b116790..da3c09b 100644
--- a/src/components/ui/BasePopup.vue
+++ b/src/components/ui/BasePopup.vue
@@ -17,7 +17,7 @@
         <slot name="controls" />
 
         <!-- Lock/Unlock Inheritance Button -->
-        <div v-if="showInheritance" class="settings-subsection">
+        <div v-if="showInheritance" class="setting__section">
           <button class="inheritance-btn" @click="$emit('toggle-inheritance')">
             <svg
               v-if="inheritanceLocked"