refactor: extract shared patterns from popup/settings components

- Create useColoris composable (shared Coloris init across 4 files)
- Create useLinkedSpacing composable (linked margin/padding logic from TextSettings)
- Create BasePopup component (shared popup shell, CSS editor, inheritance button)
- Add watchProp helper in ElementPopup (12 watchers → 12 compact lines)
- Use extractSpacing for @page margin parsing in PagePopup and PageSettings

Co-Authored-By: Claude Opus 4.6 <noreply@anthropic.com>

src/components/ui/BasePopup.vue

@@ -0,0 +1,156 @@
+<template>
+  <div
+    v-if="visible"
+    class="settings-popup"
+    :style="{ top: position.y + 'px', left: position.x + 'px' }"
+  >
+    <div class="popup-header">
+      <div class="header-left">
+        <slot name="header-left" />
+      </div>
+      <button class="close-btn" @click="$emit('close')">×</button>
+    </div>
+
+    <div class="popup-body">
+      <!-- Left: Controls -->
+      <div class="popup-controls">
+        <slot name="controls" />
+
+        <!-- Lock/Unlock Inheritance Button -->
+        <div class="settings-subsection">
+          <button class="inheritance-btn" @click="$emit('toggle-inheritance')">
+            <svg
+              v-if="inheritanceLocked"
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
+              ></path>
+            </svg>
+            <svg
+              v-else
+              xmlns="http://www.w3.org/2000/svg"
+              viewBox="0 0 24 24"
+              fill="currentColor"
+            >
+              <path
+                d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
+              ></path>
+            </svg>
+            <span>{{
+              inheritanceLocked
+                ? "Déverrouiller l'héritage"
+                : "Verrouiller l'héritage"
+            }}</span>
+          </button>
+        </div>
+      </div>
+
+      <!-- Right: CSS Editor -->
+      <div class="popup-css">
+        <div class="css-header">
+          <span>CSS</span>
+          <label
+            class="toggle"
+            :class="{ 'field--view-only': inheritanceLocked }"
+          >
+            <span class="toggle-label">Mode édition</span>
+            <input
+              type="checkbox"
+              v-model="isEditable"
+              :disabled="inheritanceLocked"
+            />
+            <span class="toggle-switch"></span>
+          </label>
+        </div>
+        <pre
+          v-if="!isEditable"
+          class="readonly"
+        ><code class="hljs language-css" v-html="highlightedCss"></code></pre>
+        <textarea
+          v-else
+          :value="editableCss"
+          @input="handleCssInput"
+          :disabled="inheritanceLocked"
+          spellcheck="false"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed, watch } from 'vue';
+import { useStylesheetStore } from '../../stores/stylesheet';
+import { usePopupPosition } from '../../composables/usePopupPosition';
+import { initColoris } from '../../composables/useColoris';
+import hljs from 'highlight.js/lib/core';
+import css from 'highlight.js/lib/languages/css';
+import 'highlight.js/styles/atom-one-dark.css';
+
+hljs.registerLanguage('css', css);
+
+const stylesheetStore = useStylesheetStore();
+
+const props = defineProps({
+  displayCss: { type: String, default: '' },
+  editableCss: { type: String, default: '' },
+  popupWidth: { type: Number, default: 800 },
+  popupHeight: { type: Number, default: 600 },
+});
+
+const emit = defineEmits(['close', 'css-input', 'toggle-inheritance']);
+
+const visible = ref(false);
+const position = ref({ x: 0, y: 0 });
+const isEditable = ref(false);
+const inheritanceLocked = ref(true);
+
+const { calculatePosition } = usePopupPosition(props.popupWidth, props.popupHeight);
+
+const highlightedCss = computed(() => {
+  if (!props.displayCss) return '';
+  return hljs.highlight(props.displayCss, { language: 'css' }).value;
+});
+
+let cssDebounceTimer = null;
+
+const handleCssInput = (event) => {
+  const newCss = event.target.value;
+
+  if (cssDebounceTimer) {
+    clearTimeout(cssDebounceTimer);
+  }
+
+  cssDebounceTimer = setTimeout(() => {
+    emit('css-input', newCss);
+  }, 500);
+};
+
+// Watch isEditable to format when exiting edit mode
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatCustomCss();
+  }
+});
+
+const open = (event) => {
+  position.value = calculatePosition(event);
+  visible.value = true;
+
+  // Initialize Coloris after opening
+  setTimeout(() => initColoris(), 0);
+};
+
+const close = () => {
+  visible.value = false;
+  isEditable.value = false;
+  emit('close');
+};
+
+defineExpose({ visible, position, isEditable, inheritanceLocked, open, close, calculatePosition });
+</script>