defaults values reglages script

public/assets/css/stylesheet.print.css

@@ -31,20 +31,7 @@ figure, img{
 }
 
 
-/* h1{
-  font-size: 38px;
-  background: rgba(255, 255, 255, 0.521);
-  padding-top: 10px;
-  padding-left: 20px;
-  padding-bottom: 10px;
-  padding-right: 20px;
-  margin-left: 0px;
-  margin-right: 0px;
-  margin-bottom: 0px;
-  margin-top: 60px;
-} */
-
-p.author{
+/* p.author{
     font-size: 24px;
     font-weight: bold;
       background: rgba(255, 255, 255, 0.521);
@@ -59,7 +46,7 @@ p.author{
   padding: 10px 20px;
   margin: 0;
     margin-top: 60px;
-}
+} */
 .figure-backgroung-cover img{
   width: 100%;
   height: 100%;
@@ -77,7 +64,7 @@ p.author{
   break-before: right;
 }
 
-
+/* 
 h2{
   font-size: 38px;
   margin-top: 36px;
@@ -85,7 +72,7 @@ h2{
   padding: 20px;
   break-after: avoid;
 }
-
+ */
 
 
 
@@ -94,36 +81,36 @@ h2{
 ─────────────────────────────────────────── */
 
 
-h3{
+/* h3{
   margin-top: 30px;
   break-after: avoid;
-}
+} */
 
 
 /* ───────────────────────────────────────────
    CARTES
 ─────────────────────────────────────────── */
 
-h4{
+/* h4{
   break-after: avoid;
     margin-top: 30px;
     text-decoration: underline;
 
-}
+} */
 
 
 /* ───────────────────────────────────────────
    MARKERS
 ─────────────────────────────────────────── */
 
-
+/* 
 h5{
   display: flex;
   align-items: center;
 }
 .marker-title img{
   width: 40px;
-}
+} */
 
 
 

src/components/ElementPopup.vue

@@ -433,6 +433,8 @@ const getInstanceCount = (sel) => {
 
 const open = (element, event, count = null) => {
   elementInstanceCount.value = count !== null ? count : getInstanceCount(getSelectorFromElement(element));
+  marginLocked.value = false;
+  paddingLocked.value = false;
   openSettings(element, event, {
     getSelectorFromElement,
     getInstanceCount,

src/composables/useElementSettings.js

@@ -234,6 +234,35 @@ 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);
+      }
+    }
+    preToggleSnapshots.delete(key);
+  };
+
   // --- Toggle actions ---
   const onSubsectionClick = (group) => {
     if (settingEnabled[group]) return;
@@ -244,6 +273,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
     settingEnabled[group] = enabled;
     isUpdatingFromStore = true;
     if (enabled) {
+      savePreToggleSnapshot(group);
       restoreFromCache(group);
       applyAllEnabledGroups();
     } else {
@@ -254,6 +284,7 @@ export function useElementSettings({ margin, padding, basePopup }) {
       } else {
         removeProps(settingGroups[group]);
       }
+      restorePreToggleSnapshot(group);
     }
     saveElementState();
     nextTick(() => { isUpdatingFromStore = false; });
@@ -349,15 +380,13 @@ export function useElementSettings({ margin, padding, basePopup }) {
       const comment = isTextDefault ? ' /* valeur par défaut */' : '';
       lines.push(`  ${entry.css}: ${val};${comment}`);
     }
-    const showMargin = settingEnabled.margin || ['top', 'right', 'bottom', 'left'].some(s => hasInCss(`margin-${s}`));
-    if (showMargin) {
-      for (const side of ['top', 'right', 'bottom', 'left']) {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      if (settingEnabled.margin || hasInCss(`margin-${side}`)) {
         lines.push(`  margin-${side}: ${margin[side].value}${margin[side].unit};`);
       }
     }
-    const showPadding = settingEnabled.padding || ['top', 'right', 'bottom', 'left'].some(s => hasInCss(`padding-${s}`));
-    if (showPadding) {
-      for (const side of ['top', 'right', 'bottom', 'left']) {
+    for (const side of ['top', 'right', 'bottom', 'left']) {
+      if (settingEnabled.padding || hasInCss(`padding-${side}`)) {
         lines.push(`  padding-${side}: ${padding[side].value}${padding[side].unit};`);
       }
     }

src/stores/stylesheet.js

@@ -196,17 +196,41 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     set('p', 'line-height', TEXT_DEFAULTS.lineHeight.value, TEXT_DEFAULTS.lineHeight.unit);
 
     // Heading defaults (h1, h2, ...)
+    // Unit props: { value, unit } objects mapped to a CSS property
+    const unitPropsMap = {
+      fontSize: 'font-size',
+      lineHeight: 'line-height',
+      borderWidth: 'border-width',
+      textDecorationThickness: 'text-decoration-thickness',
+      textUnderlineOffset: 'text-underline-offset',
+    };
+    // String props: plain string values mapped to a CSS property
+    const stringPropsMap = {
+      background: 'background',
+      color: 'color',
+      fontFamily: 'font-family',
+      textAlign: 'text-align',
+      borderStyle: 'border-style',
+      borderColor: 'border-color',
+      textDecorationLine: 'text-decoration-line',
+      textDecorationStyle: 'text-decoration-style',
+      textDecorationColor: 'text-decoration-color',
+    };
+    // Spacing props: objects with top/right/bottom/left sides
+    const spacingProps = ['padding', 'margin'];
+
     for (const [tag, props] of Object.entries(HEADING_DEFAULTS)) {
-      if (props.fontSize) set(tag, 'font-size', props.fontSize.value, props.fontSize.unit);
-      if (props.background) set(tag, 'background', props.background);
-      if (props.padding) {
-        for (const side of ['top', 'right', 'bottom', 'left']) {
-          if (props.padding[side]) set(tag, `padding-${side}`, props.padding[side].value, props.padding[side].unit);
-        }
+      for (const [key, cssProp] of Object.entries(unitPropsMap)) {
+        if (props[key]) set(tag, cssProp, props[key].value, props[key].unit);
       }
-      if (props.margin) {
-        for (const side of ['top', 'right', 'bottom', 'left']) {
-          if (props.margin[side]) set(tag, `margin-${side}`, props.margin[side].value, props.margin[side].unit);
+      for (const [key, cssProp] of Object.entries(stringPropsMap)) {
+        if (props[key]) set(tag, cssProp, props[key]);
+      }
+      for (const prop of spacingProps) {
+        if (props[prop]) {
+          for (const side of ['top', 'right', 'bottom', 'left']) {
+            if (props[prop][side]) set(tag, `${prop}-${side}`, props[prop][side].value, props[prop][side].unit);
+          }
         }
       }
     }

src/utils/defaults.js

@@ -56,6 +56,7 @@ export const HEADING_DEFAULTS = Object.freeze({
     }),
     margin: Object.freeze({
       top: Object.freeze({ value: 60, unit: 'px' }),
+      bottom: Object.freeze({ value: 30, unit: 'px' }),
     }),
   }),
 });