diff --git a/src/composables/useElementSettings.js b/src/composables/useElementSettings.js
index 162256a..a32e61c 100644
--- a/src/composables/useElementSettings.js
+++ b/src/composables/useElementSettings.js
@@ -236,33 +236,30 @@ export function useElementSettings({ margin, padding, basePopup }) {
     }
   };
 
-  // --- Pre-toggle CSS snapshot ---
-  // Saves the CSS values for a group before toggle ON, restores them on toggle OFF
-  const preToggleSnapshots = new Map(); // key: `${selector}::${group}` → { cssProp: extractedValue }
-
-  const savePreToggleSnapshot = (group) => {
-    const key = `${selector.value}::${group}`;
-    const cssProps = settingGroups[group];
-    const snapshot = {};
-    for (const cssProp of cssProps) {
-      const val = stylesheetStore.extractValue(selector.value, cssProp);
-      if (val) snapshot[cssProp] = val;
-    }
-    preToggleSnapshots.set(key, snapshot);
-  };
-
-  const restorePreToggleSnapshot = (group) => {
-    const key = `${selector.value}::${group}`;
-    const snapshot = preToggleSnapshots.get(key);
-    if (!snapshot) return;
-    for (const [cssProp, val] of Object.entries(snapshot)) {
-      if (typeof val === 'object' && 'value' in val) {
-        updateProp(cssProp, val.value, val.unit);
-      } else {
-        updateProp(cssProp, val);
+  // --- Reset refs to inherited/default values when toggle is turned off ---
+  const resetRefsToDefaults = (group) => {
+    if (group === 'font') {
+      fontFamily.value = textDefaults.fontFamily;
+      italic.value = ELEMENT_DEFAULTS.italic;
+      bold.value = ELEMENT_DEFAULTS.bold;
+      // Re-apply inline defaults if applicable
+      const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
+      if (inlineDefaults) {
+        if (inlineDefaults.fontStyle === 'italic') italic.value = true;
+        if (inlineDefaults.fontWeight === 'bold') bold.value = true;
       }
+    } else if (group === 'fontSize') {
+      fontSize.value = textDefaults.fontSize.value;
+      fontSize.unit = textDefaults.fontSize.unit;
+    } else if (group === 'lineHeight') {
+      lineHeight.value = textDefaults.lineHeight.value;
+      lineHeight.unit = textDefaults.lineHeight.unit;
+    } else if (group === 'color') {
+      color.value = textDefaults.color;
+      // Re-apply inline default color if applicable
+      const inlineDefaults = INLINE_DEFAULTS[currentTag.value];
+      if (inlineDefaults?.color) color.value = inlineDefaults.color;
     }
-    preToggleSnapshots.delete(key);
   };
 
   // --- Toggle actions ---
@@ -275,7 +272,6 @@ export function useElementSettings({ margin, padding, basePopup }) {
     settingEnabled[group] = enabled;
     isUpdatingFromStore = true;
     if (enabled) {
-      savePreToggleSnapshot(group);
       restoreFromCache(group);
       applyAllEnabledGroups();
     } else {
@@ -286,7 +282,8 @@ export function useElementSettings({ margin, padding, basePopup }) {
       } else {
         removeProps(settingGroups[group]);
       }
-      restorePreToggleSnapshot(group);
+      // Reset refs to defaults so displayedCss shows inherited values
+      resetRefsToDefaults(group);
     }
     saveElementState();
     nextTick(() => { isUpdatingFromStore = false; });
@@ -353,10 +350,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
   const INDEPENDENT_TAGS = new Set(['li', 'ul', 'ol', 'dt', 'dd', 'dl', 'table', 'tr', 'td', 'th', 'caption', 'figure', 'figcaption', 'pre', 'blockquote']);
   const isIndependentElement = computed(() => INDEPENDENT_TAGS.has(currentTag.value));
 
-  // Check if the current selector has a CSS property in the store
+  // Check if the current selector has a CSS property in the store (active CSS only, not commented)
   const hasInCss = (cssProp) => {
     if (!selector.value) return false;
-    return !!stylesheetStore.extractValue(selector.value, cssProp);
+    return !!stylesheetStore.extractValue(selector.value, cssProp, false);
   };
 
   const displayedCss = computed(() => {
@@ -364,9 +361,10 @@ export function useElementSettings({ margin, padding, basePopup }) {
     const lines = [];
     for (const entry of displayedCssOrder) {
       if (entry.skip && entry.skip()) continue;
+      const groupEnabled = settingEnabled[entry.group];
       // For inline elements, skip special groups (TextSettings defaults) when toggle is OFF
       // Exception: keep if the current tag has an inline default for this CSS property
-      if (entry.special && isInlineElement.value && !settingEnabled[entry.group]) {
+      if (entry.special && isInlineElement.value && !groupEnabled) {
         const tagDefaults = INLINE_DEFAULTS[currentTag.value];
         const cssToDefaultKey = { 'color': 'color', 'font-family': 'fontFamily' };
         const defaultKey = cssToDefaultKey[entry.css];
@@ -374,18 +372,26 @@ export function useElementSettings({ margin, padding, basePopup }) {
       }
       const val = entry.getValue();
       if (val === null || val === undefined) continue;
-      // Show "valeur par défaut" only if the value actually matches the TextSettings default
-      let isTextDefault = false;
-      if (entry.special && !settingEnabled[entry.group]) {
-        const textDefaultValues = {
-          'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
-          'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
-          'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
-          'color': textDefaults.color,
-        };
-        isTextDefault = val === textDefaultValues[entry.css];
+
+      // Determine inheritance comment for disabled groups
+      let comment = '';
+      if (!groupEnabled) {
+        if (entry.special) {
+          // Special groups: show "hérité de la page" when value matches page-level default
+          const textDefaultValues = {
+            'font-family': textDefaults.fontFamily === 'sans-serif' ? 'sans-serif' : `"${textDefaults.fontFamily}"`,
+            'font-size': `${textDefaults.fontSize.value}${textDefaults.fontSize.unit}`,
+            'line-height': `${textDefaults.lineHeight.value}${textDefaults.lineHeight.unit}`,
+            'color': textDefaults.color,
+          };
+          if (val === textDefaultValues[entry.css]) {
+            comment = ' /* hérité de la page */';
+          }
+        } else if (hasInCss(entry.css)) {
+          // Non-special groups: show comment when CSS exists but toggle is off
+          comment = ' /* hérité de la page */';
+        }
       }
-      const comment = isTextDefault ? ' /* valeur par défaut */' : '';
       lines.push(`  ${entry.css}: ${val};${comment}`);
     }
     for (const side of ['top', 'right', 'bottom', 'left']) {
@@ -402,7 +408,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
   });
 
   const editableFullCss = computed(() => {
-    return displayedCss.value.replace(/ \/\* valeur par défaut \*\//g, '');
+    return displayedCss.value.replace(/ \/\* (?:valeur par défaut|hérité de la page) \*\//g, '');
   });
 
   // --- CSS parsing & sync ---