From 0df5d7c6e90ad3091f42bf5036b2661d7428f835 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 16:52:00 +0100
Subject: [PATCH 1/8] feat: improve code editor formatting behavior
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Disable auto-formatting while in editing mode
- Format CSS only when exiting editing mode
- Auto-disable editing mode when switching tabs

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/StylesheetViewer.vue | 20 +++++++++++++++++++-
 src/stores/stylesheet.js            |  6 ++++--
 2 files changed, 23 insertions(+), 3 deletions(-)

diff --git a/src/components/StylesheetViewer.vue b/src/components/StylesheetViewer.vue
index e8bc63d..4cd72d6 100644
--- a/src/components/StylesheetViewer.vue
+++ b/src/components/StylesheetViewer.vue
@@ -24,7 +24,7 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, inject } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
@@ -33,6 +33,7 @@ import 'highlight.js/styles/atom-one-dark.css';
 hljs.registerLanguage('css', css);
 
 const stylesheetStore = useStylesheetStore();
+const activeTab = inject('activeTab');
 const isEditable = ref(false);
 let debounceTimer = null;
 
@@ -52,6 +53,23 @@ const handleInput = (event) => {
     stylesheetStore.content = newContent;
   }, 500);
 };
+
+// Sync editing mode with store
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
+});
+
+// Disable editing mode when changing tabs
+watch(activeTab, (newTab) => {
+  if (newTab !== 'code' && isEditable.value) {
+    isEditable.value = false;
+  }
+});
 </script>
 
 <style scoped>
diff --git a/src/stores/stylesheet.js b/src/stores/stylesheet.js
index d1b3408..d2475e9 100644
--- a/src/stores/stylesheet.js
+++ b/src/stores/stylesheet.js
@@ -6,6 +6,7 @@ import parserPostcss from 'prettier/plugins/postcss';
 
 export const useStylesheetStore = defineStore('stylesheet', () => {
   const content = ref('');
+  const isEditing = ref(false);
   let formatTimer = null;
   let isFormatting = false;
 
@@ -30,9 +31,9 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     }
   };
 
-  // Watch content and format after 500ms of inactivity
+  // Watch content and format after 500ms of inactivity (only when not editing)
   watch(content, () => {
-    if (isFormatting) return;
+    if (isFormatting || isEditing.value) return;
 
     clearTimeout(formatTimer);
     formatTimer = setTimeout(() => {
@@ -65,6 +66,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
 
   return {
     content,
+    isEditing,
     loadStylesheet,
     updateProperty,
     extractValue,

From 2068e9a1f9e5b9dd77ab1ea3dcf0ed6c471e24c4 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 16:55:39 +0100
Subject: [PATCH 2/8] feat: add close button to editor panel
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Adds a close button in the top-right corner of the editor panel with double arrow icon. The button closes the panel when clicked.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/editor/EditorPanel.vue | 39 +++++++++++++++++++++++++++
 1 file changed, 39 insertions(+)

diff --git a/src/components/editor/EditorPanel.vue b/src/components/editor/EditorPanel.vue
index 62f75a7..eb2c255 100644
--- a/src/components/editor/EditorPanel.vue
+++ b/src/components/editor/EditorPanel.vue
@@ -27,6 +27,18 @@
       </button>
     </nav>
 
+    <button
+      v-if="activeTab.length > 0"
+      type="button"
+      class="close-button"
+      @click="activeTab = ''"
+      title="Fermer le panneau"
+    >
+      <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor">
+        <path d="M4.83582 12L11.0429 18.2071L12.4571 16.7929L7.66424 12L12.4571 7.20712L11.0429 5.79291L4.83582 12ZM10.4857 12L16.6928 18.2071L18.107 16.7929L13.3141 12L18.107 7.20712L16.6928 5.79291L10.4857 12Z"></path>
+      </svg>
+    </button>
+
     <div class="tab-content" :class="{ open: activeTab.length > 0 }">
       <div v-if="activeTab === 'document'" class="tab-panel">
         <PageSettings />
@@ -74,6 +86,33 @@ nav {
   z-index: 2;
 }
 
+.close-button {
+  position: absolute;
+  top: 1rem;
+  right: 1rem;
+  z-index: 2;
+
+  width: 2rem;
+  height: 2rem;
+  padding: 0.25rem;
+
+  background: transparent;
+  border: none;
+  cursor: pointer;
+
+  color: var(--color-browngray-300);
+  transition: color 0.2s ease;
+
+  &:hover {
+    color: var(--color-browngray-100);
+  }
+
+  svg {
+    width: 100%;
+    height: 100%;
+  }
+}
+
 .tab-content {
   flex: 1;
   overflow: hidden;

From 7ae711957abf6d08ca11853f5121ecef97ad6512 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:32:39 +0100
Subject: [PATCH 3/8] feat: add page template interaction with PagePopup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Implements page edge hover detection and click handling:
- Hover near page edges (30px threshold) shows light outline
- Click on page edge opens PagePopup for template customization
- PagePopup component similar to ElementPopup but for @page rules
- Both popups coordinate to show only one at a time

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/App.vue                  |  91 +++++++++++++++++--
 src/components/PagePopup.vue | 163 +++++++++++++++++++++++++++++++++++
 2 files changed, 247 insertions(+), 7 deletions(-)
 create mode 100644 src/components/PagePopup.vue

diff --git a/src/App.vue b/src/App.vue
index 1b8746a..2df8f57 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -2,6 +2,7 @@
 import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
+import PagePopup from './components/PagePopup.vue';
 import PreviewLoader from './components/PreviewLoader.vue';
 import { onMounted, ref, watch, computed, provide } from 'vue';
 import { useStylesheetStore } from './stores/stylesheet';
@@ -11,10 +12,15 @@ const stylesheetStore = useStylesheetStore();
 const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
+const pagePopup = ref(null);
 const activeTab = ref('');
 
 provide('activeTab', activeTab);
 
+// Page interaction state
+const hoveredPage = ref(null);
+const EDGE_THRESHOLD = 30; // px from edge to trigger hover
+
 let savedScrollPercentage = 0;
 const currentFrameIndex = ref(1); // 1 or 2, which iframe is currently visible
 const isTransitioning = ref(false);
@@ -25,6 +31,77 @@ const activeFrame = computed(() => {
     : previewFrame2.value;
 });
 
+// Check if mouse position is near the edges of a page element
+const isNearPageEdge = (pageElement, mouseX, mouseY) => {
+  const rect = pageElement.getBoundingClientRect();
+
+  const nearLeft = mouseX >= rect.left && mouseX <= rect.left + EDGE_THRESHOLD;
+  const nearRight = mouseX >= rect.right - EDGE_THRESHOLD && mouseX <= rect.right;
+  const nearTop = mouseY >= rect.top && mouseY <= rect.top + EDGE_THRESHOLD;
+  const nearBottom = mouseY >= rect.bottom - EDGE_THRESHOLD && mouseY <= rect.bottom;
+
+  const inHorizontalRange = mouseY >= rect.top && mouseY <= rect.bottom;
+  const inVerticalRange = mouseX >= rect.left && mouseX <= rect.right;
+
+  return (
+    (nearLeft && inHorizontalRange) ||
+    (nearRight && inHorizontalRange) ||
+    (nearTop && inVerticalRange) ||
+    (nearBottom && inVerticalRange)
+  );
+};
+
+// Handle mouse movement in iframe
+const handleIframeMouseMove = (event) => {
+  const pages = event.target.ownerDocument.querySelectorAll('.pagedjs_page');
+  let foundPage = null;
+
+  for (const page of pages) {
+    if (isNearPageEdge(page, event.clientX, event.clientY)) {
+      foundPage = page;
+      break;
+    }
+  }
+
+  // Update hover state
+  if (foundPage !== hoveredPage.value) {
+    // Remove highlight from previous page
+    if (hoveredPage.value) {
+      hoveredPage.value.style.outline = '';
+    }
+
+    // Add highlight to new page
+    if (foundPage) {
+      foundPage.style.outline = '2px solid rgba(97, 175, 239, 0.3)';
+    }
+
+    hoveredPage.value = foundPage;
+  }
+};
+
+// Handle click in iframe
+const handleIframeClick = (event) => {
+  const element = event.target;
+
+  // Check if clicking near a page edge
+  if (hoveredPage.value) {
+    event.stopPropagation();
+    pagePopup.value.open(hoveredPage.value);
+    elementPopup.value.close();
+    return;
+  }
+
+  // Otherwise handle as element click
+  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
+    elementPopup.value.close();
+    pagePopup.value.close();
+    return;
+  }
+
+  elementPopup.value.handleIframeClick(event);
+  pagePopup.value.close();
+};
+
 const renderPreview = async (shouldReloadFromFile = false) => {
   if (isTransitioning.value) return;
   isTransitioning.value = true;
@@ -73,10 +150,9 @@ const renderPreview = async (shouldReloadFromFile = false) => {
   `;
 
   hiddenFrame.onload = () => {
-    hiddenFrame.contentDocument.addEventListener(
-      'click',
-      elementPopup.value.handleIframeClick
-    );
+    // Add event listeners for page and element interactions
+    hiddenFrame.contentDocument.addEventListener('mousemove', handleIframeMouseMove);
+    hiddenFrame.contentDocument.addEventListener('click', handleIframeClick);
 
     // Close Coloris when clicking in the iframe
     hiddenFrame.contentDocument.addEventListener('click', () => {
@@ -151,6 +227,7 @@ onMounted(() => renderPreview(true));
   <PreviewLoader :isLoading="isTransitioning" :shifted="activeTab.length > 0" />
 
   <ElementPopup ref="elementPopup" :iframeRef="activeFrame" />
+  <PagePopup ref="pagePopup" :iframeRef="activeFrame" />
 </template>
 
 <style>
@@ -168,9 +245,9 @@ onMounted(() => renderPreview(true));
 }
 
 .preview-frame.shifted {
-  margin-left: 19rem;
-  transform: scale(0.7) translateY(-30vh);
-  height: 142vh;
+  margin-left: 17.55rem;
+  transform: scale(0.65) translateY(-40vh);
+  height: 155vh;
 }
 
 .preview-frame:nth-of-type(1) {
diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
new file mode 100644
index 0000000..579016a
--- /dev/null
+++ b/src/components/PagePopup.vue
@@ -0,0 +1,163 @@
+<template>
+  <div
+    v-if="visible"
+    id="page-popup"
+    :style="{ top: position.y + 'px', left: position.x + 'px' }"
+  >
+    <div class="popup-header">
+      <span>{{ pageSelector }}</span>
+      <button class="close-btn" @click="close">×</button>
+    </div>
+    <div class="popup-body">
+      <div class="popup-controls">
+        <p class="info">Gabarit de page</p>
+        <!-- Additional page-specific controls will be added here later -->
+      </div>
+      <div class="popup-css">
+        <textarea
+          :value="pageCss"
+          @input="handleCssInput"
+          spellcheck="false"
+        ></textarea>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script setup>
+import { ref, computed } from 'vue';
+import { useStylesheetStore } from '../stores/stylesheet';
+
+const stylesheetStore = useStylesheetStore();
+
+const props = defineProps({
+  iframeRef: Object,
+});
+
+const visible = ref(false);
+const position = ref({ x: 0, y: 0 });
+const pageSelector = ref('@page');
+const selectedPageElement = ref(null);
+
+const calculatePosition = (pageElement) => {
+  const rect = pageElement.getBoundingClientRect();
+  const iframeRect = props.iframeRef.getBoundingClientRect();
+  return {
+    x: iframeRect.left + rect.left + 20,
+    y: iframeRect.top + rect.top + 20,
+  };
+};
+
+const open = (pageElement) => {
+  selectedPageElement.value = pageElement;
+  pageSelector.value = '@page';
+  position.value = calculatePosition(pageElement);
+
+  // Add border to the selected page
+  pageElement.style.outline = '2px solid #61afef';
+
+  visible.value = true;
+};
+
+const close = () => {
+  // Remove border from the selected page
+  if (selectedPageElement.value) {
+    selectedPageElement.value.style.outline = '';
+    selectedPageElement.value = null;
+  }
+  visible.value = false;
+};
+
+const pageCss = computed(() => {
+  return stylesheetStore.extractBlock('@page') || '';
+});
+
+let cssDebounceTimer = null;
+
+const handleCssInput = (event) => {
+  const newCss = event.target.value;
+
+  if (cssDebounceTimer) {
+    clearTimeout(cssDebounceTimer);
+  }
+
+  cssDebounceTimer = setTimeout(() => {
+    const oldBlock = pageCss.value;
+    if (oldBlock) {
+      stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
+    }
+  }, 500);
+};
+
+defineExpose({ open, close, visible });
+</script>
+
+<style scoped>
+#page-popup {
+  position: fixed;
+  background: white;
+  border-radius: 4px;
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  z-index: 10000;
+  min-width: 400px;
+  max-width: 500px;
+}
+
+.popup-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  border-bottom: 1px solid #eee;
+  font-size: 0.875rem;
+  font-weight: bold;
+  background: #f5f5f5;
+}
+
+.close-btn {
+  background: none;
+  border: none;
+  cursor: pointer;
+  font-size: 1.25rem;
+  line-height: 1;
+  padding: 0;
+}
+
+.popup-body {
+  display: flex;
+  gap: 1px;
+  background: #eee;
+}
+
+.popup-controls {
+  flex: 1;
+  padding: 0.75rem;
+  background: white;
+}
+
+.popup-css {
+  flex: 1;
+  background: #1e1e1e;
+  display: flex;
+}
+
+.popup-css textarea {
+  width: 100%;
+  height: 200px;
+  background: #1e1e1e;
+  color: #abb2bf;
+  border: none;
+  padding: 0.75rem;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.4;
+  resize: none;
+  outline: none;
+}
+
+.info {
+  font-size: 0.875rem;
+  color: #666;
+  margin: 0 0 0.5rem 0;
+}
+</style>

From 9c5e4a88d9816569d1c60a22988ae84f0b4e8c8a Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:39:51 +0100
Subject: [PATCH 4/8] refactor: redesign PagePopup with full controls interface
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Complete redesign matching the mockup:
- Left panel: margin controls (4 fields), background picker, patterns dropdown
- Right panel: CSS editor with edit mode toggle
- Header with @page label, template name, and page count
- "Déverrouiller l'héritage" button for CSS priority control
- Styled with existing component patterns

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 452 ++++++++++++++++++++++++++++++++---
 1 file changed, 425 insertions(+), 27 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index 579016a..2e4247e 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -5,16 +5,175 @@
     :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
     <div class="popup-header">
-      <span>{{ pageSelector }}</span>
+      <div class="header-left">
+        <span class="page-label">@page</span>
+        <span class="page-name">geoformat</span>
+        <span class="page-count">6 pages</span>
+      </div>
       <button class="close-btn" @click="close">×</button>
     </div>
+
     <div class="popup-body">
+      <!-- Left: Controls -->
       <div class="popup-controls">
-        <p class="info">Gabarit de page</p>
-        <!-- Additional page-specific controls will be added here later -->
+        <!-- Margins -->
+        <div class="control-section">
+          <h4>Marges</h4>
+          <div class="margin-grid">
+            <div class="margin-field">
+              <label>Haut</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.top.value"
+                  min="0"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'mm' }"
+                    @click="margins.top.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'px' }"
+                    @click="margins.top.unit = 'px'"
+                  >
+                    px
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="margin-field">
+              <label>Bas</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.bottom.value"
+                  min="0"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'mm' }"
+                    @click="margins.bottom.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'px' }"
+                    @click="margins.bottom.unit = 'px'"
+                  >
+                    px
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="margin-field">
+              <label>Gauche</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.left.value"
+                  min="0"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'mm' }"
+                    @click="margins.left.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'px' }"
+                    @click="margins.left.unit = 'px'"
+                  >
+                    px
+                  </button>
+                </div>
+              </div>
+            </div>
+
+            <div class="margin-field">
+              <label>Droite</label>
+              <div class="input-with-unit">
+                <input
+                  type="number"
+                  v-model.number="margins.right.value"
+                  min="0"
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'mm' }"
+                    @click="margins.right.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'px' }"
+                    @click="margins.right.unit = 'px'"
+                  >
+                    px
+                  </button>
+                </div>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Background -->
+        <div class="control-section">
+          <label>Arrière-plan</label>
+          <div class="input-with-color">
+            <input
+              type="text"
+              v-model="background"
+              data-coloris
+            />
+          </div>
+        </div>
+
+        <!-- Patterns -->
+        <div class="control-section">
+          <label>Motifs</label>
+          <select v-model="pattern">
+            <option value="">Choisissez</option>
+            <option value="dots">Points</option>
+            <option value="lines">Lignes</option>
+            <option value="grid">Grille</option>
+          </select>
+        </div>
+
+        <!-- Unlock Inheritance Button -->
+        <div class="control-section">
+          <button class="unlock-btn" @click="toggleInheritance">
+            Déverrouiller l'héritage
+          </button>
+        </div>
       </div>
+
+      <!-- Right: CSS Editor -->
       <div class="popup-css">
+        <div class="css-header">
+          <span>CSS</span>
+          <label class="toggle">
+            <span class="toggle-label">Mode édition</span>
+            <input type="checkbox" v-model="isEditable" />
+            <span class="toggle-switch"></span>
+          </label>
+        </div>
+        <pre v-if="!isEditable" class="readonly"><code>{{ pageCss }}</code></pre>
         <textarea
+          v-else
           :value="pageCss"
           @input="handleCssInput"
           spellcheck="false"
@@ -25,8 +184,9 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import Coloris from '@melloware/coloris';
 
 const stylesheetStore = useStylesheetStore();
 
@@ -36,8 +196,19 @@ const props = defineProps({
 
 const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
-const pageSelector = ref('@page');
 const selectedPageElement = ref(null);
+const isEditable = ref(false);
+const inheritanceUnlocked = ref(false);
+
+const margins = ref({
+  top: { value: 6, unit: 'mm' },
+  bottom: { value: 7, unit: 'mm' },
+  left: { value: 6, unit: 'mm' },
+  right: { value: 7, unit: 'mm' },
+});
+
+const background = ref('transparent');
+const pattern = ref('');
 
 const calculatePosition = (pageElement) => {
   const rect = pageElement.getBoundingClientRect();
@@ -50,13 +221,23 @@ const calculatePosition = (pageElement) => {
 
 const open = (pageElement) => {
   selectedPageElement.value = pageElement;
-  pageSelector.value = '@page';
   position.value = calculatePosition(pageElement);
 
   // Add border to the selected page
   pageElement.style.outline = '2px solid #61afef';
 
   visible.value = true;
+
+  // Initialize Coloris after opening
+  setTimeout(() => {
+    Coloris.init();
+    Coloris({
+      themeMode: 'light',
+      alpha: true,
+      format: 'auto',
+      formatToggle: true,
+    });
+  }, 0);
 };
 
 const close = () => {
@@ -66,6 +247,12 @@ const close = () => {
     selectedPageElement.value = null;
   }
   visible.value = false;
+  isEditable.value = false;
+};
+
+const toggleInheritance = () => {
+  inheritanceUnlocked.value = !inheritanceUnlocked.value;
+  // TODO: Implement inheritance unlock logic
 };
 
 const pageCss = computed(() => {
@@ -89,6 +276,20 @@ const handleCssInput = (event) => {
   }, 500);
 };
 
+// Watch for margin changes
+watch(
+  margins,
+  (newMargins) => {
+    // TODO: Update @page margins in stylesheet
+  },
+  { deep: true }
+);
+
+// Watch for background changes
+watch(background, (newBackground) => {
+  // TODO: Update @page background in stylesheet
+});
+
 defineExpose({ open, close, visible });
 </script>
 
@@ -96,68 +297,265 @@ defineExpose({ open, close, visible });
 #page-popup {
   position: fixed;
   background: white;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   z-index: 10000;
-  min-width: 400px;
-  max-width: 500px;
+  width: 800px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
 }
 
 .popup-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid #eee;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f9f9f9;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.page-label {
+  background: #ff8a50;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.page-name {
+  font-weight: 600;
+  font-size: 0.875rem;
+}
+
+.page-count {
+  color: #ff8a50;
   font-size: 0.875rem;
-  font-weight: bold;
-  background: #f5f5f5;
 }
 
 .close-btn {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   line-height: 1;
   padding: 0;
+  color: #666;
 }
 
 .popup-body {
   display: flex;
-  gap: 1px;
-  background: #eee;
+  flex: 1;
+  overflow: hidden;
 }
 
 .popup-controls {
   flex: 1;
-  padding: 0.75rem;
+  padding: 1rem;
+  overflow-y: auto;
   background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.control-section h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.control-section label {
+  display: block;
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+  color: #666;
+}
+
+.control-section select {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.875rem;
+}
+
+.margin-grid {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 0.75rem;
+}
+
+.margin-field label {
+  display: block;
+  font-size: 0.75rem;
+  margin-bottom: 0.25rem;
+  color: #666;
+}
+
+.input-with-unit {
+  display: flex;
+  gap: 0.25rem;
+  align-items: center;
+}
+
+.input-with-unit input[type='number'] {
+  flex: 1;
+  padding: 0.375rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.875rem;
+}
+
+.input-with-color {
+  width: 100%;
+}
+
+.input-with-color input {
+  width: 100%;
+  padding: 0.5rem;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  font-size: 0.875rem;
+}
+
+.unit-toggle {
+  display: flex;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  overflow: hidden;
+}
+
+.unit-toggle button {
+  padding: 0.375rem 0.5rem;
+  border: none;
+  background: white;
+  cursor: pointer;
+  font-size: 0.75rem;
+  transition: background 0.2s;
+}
+
+.unit-toggle button:not(:last-child) {
+  border-right: 1px solid #ddd;
+}
+
+.unit-toggle button.active {
+  background: #007bff;
+  color: white;
+}
+
+.unlock-btn {
+  width: 100%;
+  padding: 0.5rem;
+  background: transparent;
+  border: 1px solid #ddd;
+  border-radius: 4px;
+  cursor: pointer;
+  font-size: 0.875rem;
+  transition: background 0.2s;
+}
+
+.unlock-btn:hover {
+  background: #f5f5f5;
 }
 
 .popup-css {
   flex: 1;
-  background: #1e1e1e;
+  background: #f5f5f5;
   display: flex;
+  flex-direction: column;
+  border-left: 1px solid #e0e0e0;
+}
+
+.css-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #e8e8e8;
+  border-bottom: 1px solid #d0d0d0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: #666;
+}
+
+.toggle input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 18px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle input[type='checkbox']:checked + .toggle-switch {
+  background: #61afef;
+}
+
+.toggle input[type='checkbox']:checked + .toggle-switch::after {
+  transform: translateX(18px);
+}
+
+.readonly {
+  flex: 1;
+  margin: 0;
+  padding: 0.75rem;
+  background: #1e1e1e;
+  color: #abb2bf;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-y: auto;
+  white-space: pre-wrap;
 }
 
 .popup-css textarea {
+  flex: 1;
   width: 100%;
-  height: 200px;
   background: #1e1e1e;
   color: #abb2bf;
   border: none;
   padding: 0.75rem;
   font-family: 'Courier New', Courier, monospace;
   font-size: 0.75rem;
-  line-height: 1.4;
+  line-height: 1.5;
   resize: none;
   outline: none;
 }
-
-.info {
-  font-size: 0.875rem;
-  color: #666;
-  margin: 0 0 0.5rem 0;
-}
 </style>

From 9d36a22d0c5404317d06f02f9bb068392a9f36cd Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:43:58 +0100
Subject: [PATCH 5/8] fix: implement functional controls in PagePopup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add rem unit option to all margin controls
- Implement proper margin and background updates with debouncing
- Integrate Coloris properly like PageSettings
- Add highlight.js syntax highlighting for readonly CSS
- Add Prettier formatting when exiting edit mode
- Use global unit toggle styles instead of custom
- Sync isEditing state with stylesheet store

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 213 ++++++++++++++++++++++++++++-------
 1 file changed, 172 insertions(+), 41 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index 2e4247e..5c7dd2a 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -43,6 +43,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'rem' }"
+                    @click="margins.top.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -70,6 +77,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'rem' }"
+                    @click="margins.bottom.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -97,6 +111,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'rem' }"
+                    @click="margins.left.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -124,6 +145,13 @@
                   >
                     px
                   </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'rem' }"
+                    @click="margins.right.unit = 'rem'"
+                  >
+                    rem
+                  </button>
                 </div>
               </div>
             </div>
@@ -135,8 +163,9 @@
           <label>Arrière-plan</label>
           <div class="input-with-color">
             <input
+              ref="backgroundColorInput"
               type="text"
-              v-model="background"
+              v-model="background.value"
               data-coloris
             />
           </div>
@@ -171,7 +200,7 @@
             <span class="toggle-switch"></span>
           </label>
         </div>
-        <pre v-if="!isEditable" class="readonly"><code>{{ pageCss }}</code></pre>
+        <pre v-if="!isEditable" class="readonly"><code class="hljs language-css" v-html="highlightedCss"></code></pre>
         <textarea
           v-else
           :value="pageCss"
@@ -187,6 +216,12 @@
 import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
 import Coloris from '@melloware/coloris';
+import '@melloware/coloris/dist/coloris.css';
+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();
 
@@ -199,6 +234,10 @@ const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
 const isEditable = ref(false);
 const inheritanceUnlocked = ref(false);
+const backgroundColorInput = ref(null);
+
+let isUpdatingFromStore = false;
+let updateTimer = null;
 
 const margins = ref({
   top: { value: 6, unit: 'mm' },
@@ -207,9 +246,22 @@ const margins = ref({
   right: { value: 7, unit: 'mm' },
 });
 
-const background = ref('transparent');
+const background = ref({
+  value: '',
+  format: 'hex',
+});
+
 const pattern = ref('');
 
+const debouncedUpdate = (callback) => {
+  clearTimeout(updateTimer);
+  updateTimer = setTimeout(callback, 1000);
+};
+
+const immediateUpdate = (callback) => {
+  callback();
+};
+
 const calculatePosition = (pageElement) => {
   const rect = pageElement.getBoundingClientRect();
   const iframeRect = props.iframeRef.getBoundingClientRect();
@@ -219,6 +271,87 @@ const calculatePosition = (pageElement) => {
   };
 };
 
+const updateMargins = () => {
+  const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
+
+  const currentBlock = stylesheetStore.extractBlock('@page');
+  if (!currentBlock) return;
+
+  const updatedBlock = currentBlock.replace(
+    /(margin:\s*)[^;]+/,
+    `$1${marginValue}`
+  );
+
+  stylesheetStore.content = stylesheetStore.content.replace(
+    currentBlock,
+    updatedBlock
+  );
+};
+
+const updateBackground = () => {
+  if (!background.value.value) return;
+
+  const currentBlock = stylesheetStore.extractBlock('@page');
+  if (!currentBlock) return;
+
+  if (currentBlock.includes('background:')) {
+    const updatedBlock = currentBlock.replace(
+      /(background:\s*)[^;]+/,
+      `$1${background.value.value}`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  } else {
+    const updatedBlock = currentBlock.replace(
+      /(\s*})$/,
+      `  background: ${background.value.value};\n$1`
+    );
+    stylesheetStore.content = stylesheetStore.content.replace(
+      currentBlock,
+      updatedBlock
+    );
+  }
+};
+
+// Watch margin values (number inputs) with debounce
+watch(
+  () => [
+    margins.value.top.value,
+    margins.value.bottom.value,
+    margins.value.left.value,
+    margins.value.right.value,
+  ],
+  () => {
+    if (isUpdatingFromStore) return;
+    debouncedUpdate(updateMargins);
+  }
+);
+
+// Watch margin units (button clicks) without debounce
+watch(
+  () => [
+    margins.value.top.unit,
+    margins.value.bottom.unit,
+    margins.value.left.unit,
+    margins.value.right.unit,
+  ],
+  () => {
+    if (isUpdatingFromStore) return;
+    immediateUpdate(updateMargins);
+  }
+);
+
+// Watch background value with debounce
+watch(
+  () => background.value.value,
+  () => {
+    if (isUpdatingFromStore) return;
+    debouncedUpdate(updateBackground);
+  }
+);
+
 const open = (pageElement) => {
   selectedPageElement.value = pageElement;
   position.value = calculatePosition(pageElement);
@@ -232,10 +365,30 @@ const open = (pageElement) => {
   setTimeout(() => {
     Coloris.init();
     Coloris({
-      themeMode: 'light',
-      alpha: true,
-      format: 'auto',
+      el: '[data-coloris]',
+      theme: 'pill',
+      themeMode: 'dark',
       formatToggle: true,
+      alpha: true,
+      closeButton: true,
+      closeLabel: 'Fermer',
+      clearButton: true,
+      clearLabel: 'Effacer',
+      swatchesOnly: false,
+      inline: false,
+      wrap: true,
+      swatches: [
+        '#264653',
+        '#2a9d8f',
+        '#e9c46a',
+        '#f4a261',
+        '#e76f51',
+        '#d62828',
+        '#023e8a',
+        '#0077b6',
+        '#ffffff',
+        '#000000',
+      ],
     });
   }, 0);
 };
@@ -259,6 +412,11 @@ const pageCss = computed(() => {
   return stylesheetStore.extractBlock('@page') || '';
 });
 
+const highlightedCss = computed(() => {
+  if (!pageCss.value) return '';
+  return hljs.highlight(pageCss.value, { language: 'css' }).value;
+});
+
 let cssDebounceTimer = null;
 
 const handleCssInput = (event) => {
@@ -276,18 +434,14 @@ const handleCssInput = (event) => {
   }, 500);
 };
 
-// Watch for margin changes
-watch(
-  margins,
-  (newMargins) => {
-    // TODO: Update @page margins in stylesheet
-  },
-  { deep: true }
-);
+// Watch isEditable to format when exiting edit mode
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
 
-// Watch for background changes
-watch(background, (newBackground) => {
-  // TODO: Update @page background in stylesheet
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
 });
 
 defineExpose({ open, close, visible });
@@ -426,30 +580,7 @@ defineExpose({ open, close, visible });
   font-size: 0.875rem;
 }
 
-.unit-toggle {
-  display: flex;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  overflow: hidden;
-}
-
-.unit-toggle button {
-  padding: 0.375rem 0.5rem;
-  border: none;
-  background: white;
-  cursor: pointer;
-  font-size: 0.75rem;
-  transition: background 0.2s;
-}
-
-.unit-toggle button:not(:last-child) {
-  border-right: 1px solid #ddd;
-}
-
-.unit-toggle button.active {
-  background: #007bff;
-  color: white;
-}
+/* Unit toggle styles are inherited from global styles */
 
 .unlock-btn {
   width: 100%;

From 33fdf6c94fc6bd2832708949347da7be209fb6e1 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:46:38 +0100
Subject: [PATCH 6/8] refactor: use global form classes in PagePopup
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace custom classes with global .field and .settings-subsection classes to ensure proper styling from _forms.scss.

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 100 ++++++++++-------------------------
 1 file changed, 28 insertions(+), 72 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index 5c7dd2a..af73cd8 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -17,10 +17,10 @@
       <!-- Left: Controls -->
       <div class="popup-controls">
         <!-- Margins -->
-        <div class="control-section">
+        <div class="settings-subsection">
           <h4>Marges</h4>
           <div class="margin-grid">
-            <div class="margin-field">
+            <div class="field">
               <label>Haut</label>
               <div class="input-with-unit">
                 <input
@@ -54,7 +54,7 @@
               </div>
             </div>
 
-            <div class="margin-field">
+            <div class="field">
               <label>Bas</label>
               <div class="input-with-unit">
                 <input
@@ -88,7 +88,7 @@
               </div>
             </div>
 
-            <div class="margin-field">
+            <div class="field">
               <label>Gauche</label>
               <div class="input-with-unit">
                 <input
@@ -122,7 +122,7 @@
               </div>
             </div>
 
-            <div class="margin-field">
+            <div class="field">
               <label>Droite</label>
               <div class="input-with-unit">
                 <input
@@ -159,31 +159,35 @@
         </div>
 
         <!-- Background -->
-        <div class="control-section">
-          <label>Arrière-plan</label>
-          <div class="input-with-color">
-            <input
-              ref="backgroundColorInput"
-              type="text"
-              v-model="background.value"
-              data-coloris
-            />
+        <div class="settings-subsection">
+          <div class="field">
+            <label>Arrière-plan</label>
+            <div class="input-with-color">
+              <input
+                ref="backgroundColorInput"
+                type="text"
+                v-model="background.value"
+                data-coloris
+              />
+            </div>
           </div>
         </div>
 
         <!-- Patterns -->
-        <div class="control-section">
-          <label>Motifs</label>
-          <select v-model="pattern">
-            <option value="">Choisissez</option>
-            <option value="dots">Points</option>
-            <option value="lines">Lignes</option>
-            <option value="grid">Grille</option>
-          </select>
+        <div class="settings-subsection">
+          <div class="field">
+            <label>Motifs</label>
+            <select v-model="pattern">
+              <option value="">Choisissez</option>
+              <option value="dots">Points</option>
+              <option value="lines">Lignes</option>
+              <option value="grid">Grille</option>
+            </select>
+          </div>
         </div>
 
         <!-- Unlock Inheritance Button -->
-        <div class="control-section">
+        <div class="settings-subsection">
           <button class="unlock-btn" @click="toggleInheritance">
             Déverrouiller l'héritage
           </button>
@@ -520,66 +524,18 @@ defineExpose({ open, close, visible });
   gap: 1rem;
 }
 
-.control-section h4 {
+.settings-subsection h4 {
   margin: 0 0 0.5rem 0;
   font-size: 0.875rem;
   font-weight: 600;
 }
 
-.control-section label {
-  display: block;
-  font-size: 0.75rem;
-  margin-bottom: 0.25rem;
-  color: #666;
-}
-
-.control-section select {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
 .margin-grid {
   display: grid;
   grid-template-columns: 1fr 1fr;
   gap: 0.75rem;
 }
 
-.margin-field label {
-  display: block;
-  font-size: 0.75rem;
-  margin-bottom: 0.25rem;
-  color: #666;
-}
-
-.input-with-unit {
-  display: flex;
-  gap: 0.25rem;
-  align-items: center;
-}
-
-.input-with-unit input[type='number'] {
-  flex: 1;
-  padding: 0.375rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
-.input-with-color {
-  width: 100%;
-}
-
-.input-with-color input {
-  width: 100%;
-  padding: 0.5rem;
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  font-size: 0.875rem;
-}
-
 /* Unit toggle styles are inherited from global styles */
 
 .unlock-btn {

From 25ef4685c1b19f8331a3095475f45a8bec9fc583 Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 17:51:09 +0100
Subject: [PATCH 7/8] feat: implement functional lock/unlock inheritance button
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Toggle between locked/unlocked states
- Dynamic text: "Déverrouiller l'héritage" / "Verrouiller l'héritage"
- Show appropriate lock/unlock icon based on state
- Style as simple text button with icon (matching design)

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 src/components/PagePopup.vue | 41 ++++++++++++++++++++++++------------
 1 file changed, 27 insertions(+), 14 deletions(-)

diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index af73cd8..ffbb152 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -186,10 +186,16 @@
           </div>
         </div>
 
-        <!-- Unlock Inheritance Button -->
+        <!-- Lock/Unlock Inheritance Button -->
         <div class="settings-subsection">
-          <button class="unlock-btn" @click="toggleInheritance">
-            Déverrouiller l'héritage
+          <button class="inheritance-btn" @click="toggleInheritance">
+            <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>
@@ -237,7 +243,7 @@ const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
 const isEditable = ref(false);
-const inheritanceUnlocked = ref(false);
+const inheritanceLocked = ref(true);
 const backgroundColorInput = ref(null);
 
 let isUpdatingFromStore = false;
@@ -408,8 +414,8 @@ const close = () => {
 };
 
 const toggleInheritance = () => {
-  inheritanceUnlocked.value = !inheritanceUnlocked.value;
-  // TODO: Implement inheritance unlock logic
+  inheritanceLocked.value = !inheritanceLocked.value;
+  // TODO: Implement CSS priority logic when unlocked
 };
 
 const pageCss = computed(() => {
@@ -538,19 +544,26 @@ defineExpose({ open, close, visible });
 
 /* Unit toggle styles are inherited from global styles */
 
-.unlock-btn {
-  width: 100%;
-  padding: 0.5rem;
+.inheritance-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
   background: transparent;
-  border: 1px solid #ddd;
-  border-radius: 4px;
+  border: none;
   cursor: pointer;
   font-size: 0.875rem;
-  transition: background 0.2s;
+  color: #666;
+  transition: color 0.2s;
 }
 
-.unlock-btn:hover {
-  background: #f5f5f5;
+.inheritance-btn:hover {
+  color: #333;
+}
+
+.inheritance-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .popup-css {

From cf1dadb1b38dd13613a8bfd7859ec588d1b570af Mon Sep 17 00:00:00 2001
From: isUnknown <adrien.payet@outlook.com>
Date: Fri, 5 Dec 2025 18:21:54 +0100
Subject: [PATCH 8/8] feat: refactor popups with shared positioning and CSS
 tooltips
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- Add usePopupPosition composable for smart popup positioning
  (bottom-right → bottom-left → top-right → top-left fallback)
- Refactor ElementPopup with complete controls matching mockup
- Add stylesheet sync: popups initialize from and watch store changes
- Add click-to-close behavior: clicking another element closes popup
- Add CSS property tooltips on all form labels (editor panel + popups)
  with dotted underline and monospace code tooltip on hover
- Add field--view-only class and disabled attribute on locked fields

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
---
 public/assets/css/src/_forms.scss      |  35 +
 public/assets/css/style.css            |  32 +
 public/assets/css/style.css.map        |   2 +-
 src/App.vue                            |   2 +-
 src/components/ElementPopup.vue        | 916 ++++++++++++++++++++++---
 src/components/PagePopup.vue           | 212 +++++-
 src/components/editor/PageSettings.vue |  62 +-
 src/components/editor/TextSettings.vue |  16 +-
 src/components/ui/MarginEditor.vue     |   8 +-
 src/composables/usePopupPosition.js    |  52 ++
 10 files changed, 1178 insertions(+), 159 deletions(-)
 create mode 100644 src/composables/usePopupPosition.js

diff --git a/public/assets/css/src/_forms.scss b/public/assets/css/src/_forms.scss
index 585a9ca..75f67da 100644
--- a/public/assets/css/src/_forms.scss
+++ b/public/assets/css/src/_forms.scss
@@ -8,6 +8,41 @@ input[type="number"] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+
+  &::after {
+    content: attr(data-css);
+    position: absolute;
+    bottom: 100%;
+    left: 0;
+    margin-bottom: 4px;
+    padding: 0.25rem 0.5rem;
+    background: var(--color-browngray-700);
+    color: var(--color-browngray-100);
+    font-family: "Courier New", Courier, monospace;
+    font-size: 0.75rem;
+    border-radius: 4px;
+    white-space: nowrap;
+    opacity: 0;
+    visibility: hidden;
+    transition:
+      opacity 0.15s ease,
+      visibility 0.15s ease;
+    z-index: 10;
+  }
+
+  &:hover::after {
+    opacity: 1;
+    visibility: visible;
+  }
+}
+
 .settings-section {
   h2 {
     border-bottom: 1px solid #000;
diff --git a/public/assets/css/style.css b/public/assets/css/style.css
index a7c9ce8..4be3450 100644
--- a/public/assets/css/style.css
+++ b/public/assets/css/style.css
@@ -80,6 +80,38 @@ input[type=number] {
   opacity: 0.3;
 }
 
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  -webkit-text-decoration: underline dotted;
+          text-decoration: underline dotted;
+  text-decoration-color: var(--color-browngray-200);
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700);
+  color: var(--color-browngray-100);
+  font-family: "Courier New", Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
 .settings-section h2 {
   border-bottom: 1px solid #000;
   margin-bottom: var(--space-xs);
diff --git a/public/assets/css/style.css.map b/public/assets/css/style.css.map
index 5e35a94..6140ba4 100644
--- a/public/assets/css/style.css.map
+++ b/public/assets/css/style.css.map
@@ -1 +1 @@
-{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADyBF;;AEnCA;;;;;;;;;;;;;EAaE,uBAAA;AFsCF;;AGnDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHsDF;AGpDA;EACE,8BAAA;OAAA,kBAAA;AHsDF;;AGnDA;EACE;IACE,sBAAA;EHsDF;AACF;AGpDA;EACE,+BAAA;AHsDF;;AIrEA;;;EAGE,4CAAA;AJwEF;;AIrEA;EACE,YAAA;AJwEF;;AIpEE;EACE,6BAAA;EACA,8BAAA;AJuEJ;AIrEE;EACE,mDAAA;AJuEJ;AIpEE;EACE,0BAAA;AJsEJ;AIpEI;EACE,8BAAA;AJsEN;AInEI;EACE,aAAA;AJqEN;AInEM;;EAEE,UAAA;AJqER;AIlEM;EACE,oCAAA;AJoER;AIjEM;EACE,aAAA;EACA,WAAA;AJmER;AIjEQ;EACE,aAAA;EACA,WAAA;AJmEV;AI/DM;EACE,UAAA;AJiER;AIhEQ;EACE,aAAA;AJkEV;AIjEU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJmEZ;AIhEU;EACE,oBAAA;EACA,WAAA;AJkEZ;AI5DI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ8DN;AI5DM;EACE,WAAA;AJ8DR;AI5DM;EACE,UAAA;AJ8DR;AI5DQ;EACE,UAAA;AJ8DV;AI1DU;EACE,UAAA;AJ4DZ;;AKlJA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALoJF;AKlJE;EACE,sBAAA;EACA,WAAA;ALoJJ;AKhJI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALkJN","file":"style.css"}
\ No newline at end of file
+{"version":3,"sources":["src/_reset.scss","style.css","src/_variables.scss","src/_text.scss","src/_print-styles.scss","src/_forms.scss","src/_buttons.scss"],"names":[],"mappings":"AAAA;;EAEE,UAAA;EACA,SAAA;ACCF;;ADEA;;;;;;EAME,SAAA;ACCF;;ADEA;;EAEE,YAAA;EACA,aAAA;EAEA,mCAAA;ACAF;;ADGA;EACE,6BAAA;EACA,YAAA;ACAF;;ACzBA;EACE,yBAAA;EACA,8BAAA;EACA,8BAAA;EACA,8BAAA;EAEA,uBAAA;EAEA,kBAAA;EAEA,uCAAA;ADyBF;;AEnCA;;;;;;;;;;;;;EAaE,uBAAA;AFsCF;;AGnDA,yBAAA;AACA;EACE,QAAA;EACA,2BAAA;AHsDF;AGpDA;EACE,8BAAA;OAAA,kBAAA;AHsDF;;AGnDA;EACE;IACE,sBAAA;EHsDF;AACF;AGpDA;EACE,+BAAA;AHsDF;;AIrEA;;;EAGE,4CAAA;AJwEF;;AIrEA;EACE,YAAA;AJwEF;;AIrEA,2BAAA;AACA;EACE,yCAAA;UAAA,iCAAA;EACA,iDAAA;EACA,0BAAA;EACA,YAAA;EACA,kBAAA;AJwEF;AItEE;EACE,uBAAA;EACA,kBAAA;EACA,YAAA;EACA,OAAA;EACA,kBAAA;EACA,uBAAA;EACA,sCAAA;EACA,iCAAA;EACA,8CAAA;EACA,kBAAA;EACA,kBAAA;EACA,mBAAA;EACA,UAAA;EACA,kBAAA;EACA,qDACE;EAEF,WAAA;AJsEJ;AInEE;EACE,UAAA;EACA,mBAAA;AJqEJ;;AIhEE;EACE,6BAAA;EACA,8BAAA;AJmEJ;AIjEE;EACE,mDAAA;AJmEJ;AIhEE;EACE,0BAAA;AJkEJ;AIhEI;EACE,8BAAA;AJkEN;AI/DI;EACE,aAAA;AJiEN;AI/DM;;EAEE,UAAA;AJiER;AI9DM;EACE,oCAAA;AJgER;AI7DM;EACE,aAAA;EACA,WAAA;AJ+DR;AI7DQ;EACE,aAAA;EACA,WAAA;AJ+DV;AI3DM;EACE,UAAA;AJ6DR;AI5DQ;EACE,aAAA;AJ8DV;AI7DU;EACE,kBAAA;EACA,eAAA;EACA,cAAA;EACA,SAAA;EACA,WAAA;EACA,eAAA;AJ+DZ;AI5DU;EACE,oBAAA;EACA,WAAA;AJ8DZ;AIxDI;EACE,aAAA;EACA,eAAA;EACA,wBAAA;AJ0DN;AIxDM;EACE,WAAA;AJ0DR;AIxDM;EACE,UAAA;AJ0DR;AIxDQ;EACE,UAAA;AJ0DV;AItDU;EACE,UAAA;AJwDZ;;AKjLA;EACE,eAAA;EAEA,4CAAA;EACA,iCAAA;EACA,uCAAA;EACA,mCAAA;EACA,sBAAA;ALmLF;AKjLE;EACE,sBAAA;EACA,WAAA;ALmLJ;AK/KI;EACE,sBAAA;EACA,WAAA;EACA,YAAA;ALiLN","file":"style.css"}
\ No newline at end of file
diff --git a/src/App.vue b/src/App.vue
index 2df8f57..59bee17 100644
--- a/src/App.vue
+++ b/src/App.vue
@@ -86,7 +86,7 @@ const handleIframeClick = (event) => {
   // Check if clicking near a page edge
   if (hoveredPage.value) {
     event.stopPropagation();
-    pagePopup.value.open(hoveredPage.value);
+    pagePopup.value.open(hoveredPage.value, event);
     elementPopup.value.close();
     return;
   }
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 75712ae..b383d12 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -5,27 +5,263 @@
     :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
     <div class="popup-header">
-      <span>{{ selector }}</span>
+      <div class="header-left">
+        <span class="element-label">{{ selectorTag }}</span>
+        <span class="instance-count">{{ instanceCount }} instances</span>
+      </div>
       <button class="close-btn" @click="close">×</button>
     </div>
+
     <div class="popup-body">
+      <!-- Left: Controls -->
       <div class="popup-controls">
-        <div class="control" v-if="fontSizeData">
-          <label>font-size</label>
-          <input
-            type="number"
-            step="0.1"
-            :value="fontSizeData.value"
-            @input="updateFontSize(parseFloat($event.target.value))"
-          />
-          <span>{{ fontSizeData.unit }}</span>
+        <!-- Font Family -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="font-family">Police</label>
+            <select v-model="fontFamily.value" :disabled="inheritanceLocked">
+              <option value="Alegreya Sans">Alegreya Sans</option>
+              <option value="Alegreya">Alegreya</option>
+              <option value="Arial">Arial</option>
+              <option value="Georgia">Georgia</option>
+              <option value="Times New Roman">Times New Roman</option>
+            </select>
+            <label class="checkbox-inline label-with-tooltip" data-css="font-style">
+              <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
+              <span>Italique</span>
+            </label>
+          </div>
+        </div>
+
+        <!-- Font Weight -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
+            <div class="button-group">
+              <button
+                v-for="weight in [200, 300, 400, 600, 800]"
+                :key="weight"
+                type="button"
+                :class="{ active: fontWeight.value === weight }"
+                :disabled="inheritanceLocked"
+                @click="fontWeight.value = weight"
+              >
+                {{ weight }}
+              </button>
+            </div>
+          </div>
+        </div>
+
+        <!-- Font Size -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="font-size">Taille du texte</label>
+            <div class="input-with-unit">
+              <input
+                type="number"
+                v-model.number="fontSize.value"
+                min="0"
+                :disabled="inheritanceLocked"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: fontSize.unit === 'px' }"
+                  :disabled="inheritanceLocked"
+                  @click="fontSize.unit = 'px'"
+                >
+                  px
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: fontSize.unit === 'em' }"
+                  :disabled="inheritanceLocked"
+                  @click="fontSize.unit = 'em'"
+                >
+                  em
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: fontSize.unit === 'rem' }"
+                  :disabled="inheritanceLocked"
+                  @click="fontSize.unit = 'rem'"
+                >
+                  rem
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Text Alignment -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="text-align">Alignement</label>
+            <select v-model="textAlign.value" :disabled="inheritanceLocked">
+              <option value="left">Gauche</option>
+              <option value="center">Centre</option>
+              <option value="right">Droite</option>
+              <option value="justify">Justifié</option>
+            </select>
+          </div>
+        </div>
+
+        <!-- Color -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="color">Couleur</label>
+            <div class="input-with-color">
+              <input
+                ref="colorInput"
+                type="text"
+                v-model="color.value"
+                :disabled="inheritanceLocked"
+                data-coloris
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Background -->
+        <div class="settings-subsection">
+          <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">
+              <input
+                ref="backgroundInput"
+                type="text"
+                v-model="background.value"
+                :disabled="inheritanceLocked"
+                data-coloris
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Outer Margins -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="margin">Marges extérieures</label>
+            <div class="input-with-unit">
+              <input
+                type="number"
+                v-model.number="marginOuter.value"
+                min="0"
+                :disabled="inheritanceLocked"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: marginOuter.unit === 'mm' }"
+                  :disabled="inheritanceLocked"
+                  @click="marginOuter.unit = 'mm'"
+                >
+                  mm
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: marginOuter.unit === 'px' }"
+                  :disabled="inheritanceLocked"
+                  @click="marginOuter.unit = 'px'"
+                >
+                  px
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Inner Margins (Padding) -->
+        <div class="settings-subsection">
+          <div class="field" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="padding">Marges intérieures</label>
+            <div class="input-with-unit">
+              <input
+                type="number"
+                v-model.number="paddingInner.value"
+                min="0"
+                :disabled="inheritanceLocked"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: paddingInner.unit === 'mm' }"
+                  :disabled="inheritanceLocked"
+                  @click="paddingInner.unit = 'mm'"
+                >
+                  mm
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: paddingInner.unit === 'px' }"
+                  :disabled="inheritanceLocked"
+                  @click="paddingInner.unit = 'px'"
+                >
+                  px
+                </button>
+              </div>
+            </div>
+          </div>
+        </div>
+
+        <!-- Lock/Unlock Inheritance Button -->
+        <div class="settings-subsection">
+          <button class="inheritance-btn" @click="toggleInheritance">
+            <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>
-        <p v-else class="no-styles">Aucun style éditable</p>
       </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="elementCss"
           @input="handleCssInput"
+          :disabled="inheritanceLocked"
           spellcheck="false"
         ></textarea>
       </div>
@@ -34,8 +270,16 @@
 </template>
 
 <script setup>
-import { ref, computed } from 'vue';
+import { ref, computed, watch } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import { usePopupPosition } from '../composables/usePopupPosition';
+import Coloris from '@melloware/coloris';
+import '@melloware/coloris/dist/coloris.css';
+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();
 
@@ -43,64 +287,197 @@ const props = defineProps({
   iframeRef: Object,
 });
 
+const POPUP_WIDTH = 800;
+const POPUP_HEIGHT = 600;
+
+const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
+
 const visible = ref(false);
 const position = ref({ x: 0, y: 0 });
 const selector = ref('');
+const selectedElement = ref(null);
+const isEditable = ref(false);
+const inheritanceLocked = ref(true);
+const colorInput = ref(null);
+const backgroundInput = ref(null);
+
+let isUpdatingFromStore = false;
+let updateTimer = null;
+
+// Style properties
+const fontFamily = ref({ value: 'Alegreya Sans' });
+const fontStyle = ref({ italic: false });
+const fontWeight = ref({ value: 400 });
+const fontSize = ref({ value: 23, unit: 'px' });
+const textAlign = ref({ value: 'left' });
+const color = ref({ value: 'rgb(0, 0, 0)' });
+const background = ref({ value: 'transparent' });
+const marginOuter = ref({ value: 0, unit: 'mm' });
+const paddingInner = ref({ value: 0, unit: 'mm' });
+
+const debouncedUpdate = (callback) => {
+  clearTimeout(updateTimer);
+  updateTimer = setTimeout(callback, 1000);
+};
+
+const immediateUpdate = (callback) => {
+  callback();
+};
 
 const getSelectorFromElement = (element) => {
-  return element.id ? `#${element.id}` : `.${element.className.split(' ')[0]}`;
-};
-
-const calculatePosition = (element) => {
-  const rect = element.getBoundingClientRect();
-  const iframeRect = props.iframeRef.getBoundingClientRect();
-  return {
-    x: iframeRect.left + rect.left,
-    y: iframeRect.top + rect.bottom + 5,
-  };
-};
-
-const open = (element) => {
-  selector.value = getSelectorFromElement(element);
-  position.value = calculatePosition(element);
-  visible.value = true;
-};
-
-const close = () => {
-  visible.value = false;
-};
-
-const handleIframeClick = (event) => {
-  const element = event.target;
-
-  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
-    close();
-    return;
+  // Try to build a meaningful selector
+  if (element.id) {
+    return `#${element.id}`;
   }
 
-  open(element);
+  // Get tag name
+  const tagName = element.tagName.toLowerCase();
+
+  // Get first class if available
+  const classes = Array.from(element.classList);
+  if (classes.length > 0) {
+    return `${tagName}.${classes[0]}`;
+  }
+
+  return tagName;
 };
 
+const getInstanceCount = (selector) => {
+  if (!props.iframeRef || !props.iframeRef.contentDocument) return 0;
+
+  try {
+    const elements = props.iframeRef.contentDocument.querySelectorAll(selector);
+    return elements.length;
+  } catch (e) {
+    return 0;
+  }
+};
+
+const selectorTag = computed(() => {
+  return selector.value || '';
+});
+
+const instanceCount = computed(() => {
+  return getInstanceCount(selector.value);
+});
+
 const elementCss = computed(() => {
   if (!selector.value) return '';
-  return stylesheetStore.extractBlock(selector.value);
+  return stylesheetStore.extractBlock(selector.value) || '';
 });
 
-const fontSizeData = computed(() => {
-  if (!selector.value) return null;
-  return stylesheetStore.extractValue(selector.value, 'font-size');
+const highlightedCss = computed(() => {
+  if (!elementCss.value) return '';
+  return hljs.highlight(elementCss.value, { language: 'css' }).value;
 });
 
-const updateFontSize = (value) => {
-  if (!fontSizeData.value) return;
-  stylesheetStore.updateProperty(
-    selector.value,
-    'font-size',
-    value,
-    fontSizeData.value.unit
-  );
+// Update functions for each property
+const updateFontFamily = () => {
+  if (!selector.value || !fontFamily.value.value) return;
+  stylesheetStore.updateProperty(selector.value, 'font-family', fontFamily.value.value);
 };
 
+const updateFontStyle = () => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, 'font-style', fontStyle.value.italic ? 'italic' : 'normal');
+};
+
+const updateFontWeight = () => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, 'font-weight', fontWeight.value.value);
+};
+
+const updateFontSize = () => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, 'font-size', fontSize.value.value, fontSize.value.unit);
+};
+
+const updateTextAlign = () => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, 'text-align', textAlign.value.value);
+};
+
+const updateColor = () => {
+  if (!selector.value || !color.value.value) return;
+  stylesheetStore.updateProperty(selector.value, 'color', color.value.value);
+};
+
+const updateBackground = () => {
+  if (!selector.value || !background.value.value) return;
+  stylesheetStore.updateProperty(selector.value, 'background', background.value.value);
+};
+
+const updateMarginOuter = () => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, 'margin', marginOuter.value.value, marginOuter.value.unit);
+};
+
+const updatePaddingInner = () => {
+  if (!selector.value) return;
+  stylesheetStore.updateProperty(selector.value, 'padding', paddingInner.value.value, paddingInner.value.unit);
+};
+
+// Watch for changes
+watch(() => fontFamily.value.value, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateFontFamily);
+});
+
+watch(() => fontStyle.value.italic, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateFontStyle);
+});
+
+watch(() => fontWeight.value.value, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateFontWeight);
+});
+
+watch(() => fontSize.value.value, () => {
+  if (isUpdatingFromStore) return;
+  debouncedUpdate(updateFontSize);
+});
+
+watch(() => fontSize.value.unit, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateFontSize);
+});
+
+watch(() => textAlign.value.value, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateTextAlign);
+});
+
+watch(() => color.value.value, () => {
+  if (isUpdatingFromStore) return;
+  debouncedUpdate(updateColor);
+});
+
+watch(() => background.value.value, () => {
+  if (isUpdatingFromStore) return;
+  debouncedUpdate(updateBackground);
+});
+
+watch(() => marginOuter.value.value, () => {
+  if (isUpdatingFromStore) return;
+  debouncedUpdate(updateMarginOuter);
+});
+
+watch(() => marginOuter.value.unit, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateMarginOuter);
+});
+
+watch(() => paddingInner.value.value, () => {
+  if (isUpdatingFromStore) return;
+  debouncedUpdate(updatePaddingInner);
+});
+
+watch(() => paddingInner.value.unit, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updatePaddingInner);
+});
+
 let cssDebounceTimer = null;
 
 const handleCssInput = (event) => {
@@ -112,107 +489,438 @@ const handleCssInput = (event) => {
 
   cssDebounceTimer = setTimeout(() => {
     const oldBlock = elementCss.value;
-    stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
+    if (oldBlock) {
+      stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
+    }
   }, 500);
 };
 
-defineExpose({ handleIframeClick });
+// Watch isEditable to format when exiting edit mode
+watch(isEditable, async (newValue, oldValue) => {
+  stylesheetStore.isEditing = newValue;
+
+  // Format when exiting editing mode
+  if (oldValue && !newValue) {
+    await stylesheetStore.formatContent();
+  }
+});
+
+// Watch stylesheet changes to sync values
+watch(
+  () => stylesheetStore.content,
+  () => {
+    if (visible.value && !stylesheetStore.isEditing) {
+      loadValuesFromStylesheet();
+    }
+  }
+);
+
+const loadValuesFromStylesheet = () => {
+  if (!selector.value) return;
+
+  try {
+    isUpdatingFromStore = true;
+
+    // Extract font-family
+    const fontFamilyData = stylesheetStore.extractValue(selector.value, 'font-family');
+    if (fontFamilyData) {
+      const value = typeof fontFamilyData === 'string' ? fontFamilyData : fontFamilyData.value;
+      fontFamily.value.value = value.replace(/['"]/g, '');
+    }
+
+    // Extract font-style
+    const fontStyleData = stylesheetStore.extractValue(selector.value, 'font-style');
+    if (fontStyleData) {
+      const value = typeof fontStyleData === 'string' ? fontStyleData : fontStyleData.value;
+      fontStyle.value.italic = value === 'italic';
+    }
+
+    // Extract font-weight
+    const fontWeightData = stylesheetStore.extractValue(selector.value, 'font-weight');
+    if (fontWeightData) {
+      const value = typeof fontWeightData === 'string' ? fontWeightData : fontWeightData.value;
+      fontWeight.value.value = parseInt(value);
+    }
+
+    // Extract font-size
+    const fontSizeData = stylesheetStore.extractValue(selector.value, 'font-size');
+    if (fontSizeData && fontSizeData.value !== undefined) {
+      fontSize.value.value = fontSizeData.value;
+      fontSize.value.unit = fontSizeData.unit;
+    }
+
+    // Extract text-align
+    const textAlignData = stylesheetStore.extractValue(selector.value, 'text-align');
+    if (textAlignData) {
+      const value = typeof textAlignData === 'string' ? textAlignData : textAlignData.value;
+      textAlign.value.value = value;
+    }
+
+    // Extract color
+    const colorData = stylesheetStore.extractValue(selector.value, 'color');
+    if (colorData) {
+      const value = typeof colorData === 'string' ? colorData : colorData.value;
+      color.value.value = value;
+    }
+
+    // Extract background
+    const backgroundData = stylesheetStore.extractValue(selector.value, 'background');
+    if (backgroundData) {
+      const value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
+      background.value.value = value;
+    }
+
+    // Extract margin
+    const marginData = stylesheetStore.extractValue(selector.value, 'margin');
+    if (marginData && marginData.value !== undefined) {
+      marginOuter.value.value = marginData.value;
+      marginOuter.value.unit = marginData.unit;
+    }
+
+    // Extract padding
+    const paddingData = stylesheetStore.extractValue(selector.value, 'padding');
+    if (paddingData && paddingData.value !== undefined) {
+      paddingInner.value.value = paddingData.value;
+      paddingInner.value.unit = paddingData.unit;
+    }
+  } catch (error) {
+    console.error('Error loading values from stylesheet:', error);
+  } finally {
+    isUpdatingFromStore = false;
+  }
+};
+
+const open = (element, event) => {
+  selectedElement.value = element;
+  selector.value = getSelectorFromElement(element);
+  position.value = calculatePosition(event);
+
+  // Load values from stylesheet
+  loadValuesFromStylesheet();
+
+  visible.value = true;
+
+  // Initialize Coloris after opening
+  setTimeout(() => {
+    Coloris.init();
+    Coloris({
+      el: '[data-coloris]',
+      theme: 'pill',
+      themeMode: 'dark',
+      formatToggle: true,
+      alpha: true,
+      closeButton: true,
+      closeLabel: 'Fermer',
+      clearButton: true,
+      clearLabel: 'Effacer',
+      swatchesOnly: false,
+      inline: false,
+      wrap: true,
+      swatches: [
+        '#264653',
+        '#2a9d8f',
+        '#e9c46a',
+        '#f4a261',
+        '#e76f51',
+        '#d62828',
+        '#023e8a',
+        '#0077b6',
+        '#ffffff',
+        '#000000',
+      ],
+    });
+  }, 0);
+};
+
+const close = () => {
+  visible.value = false;
+  isEditable.value = false;
+  selector.value = '';
+  selectedElement.value = null;
+};
+
+const handleIframeClick = (event) => {
+  const element = event.target;
+
+  if (element.tagName === 'BODY' || element.tagName === 'HTML') {
+    close();
+    return;
+  }
+
+  // If popup is already open, just close it instead of opening a new one
+  if (visible.value) {
+    close();
+    return;
+  }
+
+  open(element, event);
+};
+
+const toggleInheritance = () => {
+  inheritanceLocked.value = !inheritanceLocked.value;
+  // TODO: Implement CSS priority logic when unlocked
+};
+
+defineExpose({ handleIframeClick, close, visible });
 </script>
 
 <style scoped>
 #element-popup {
   position: fixed;
   background: white;
-  border-radius: 4px;
-  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
+  border-radius: 8px;
+  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.2);
   z-index: 10000;
-  min-width: 400px;
-  max-width: 500px;
+  width: 800px;
+  max-height: 600px;
+  display: flex;
+  flex-direction: column;
 }
 
 .popup-header {
   display: flex;
   justify-content: space-between;
   align-items: center;
-  padding: 0.5rem 0.75rem;
-  border-bottom: 1px solid #eee;
+  padding: 0.75rem 1rem;
+  border-bottom: 1px solid #e0e0e0;
+  background: #f9f9f9;
+}
+
+.header-left {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+}
+
+.element-label {
+  background: #ff8a50;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.instance-count {
+  color: #ff8a50;
   font-size: 0.875rem;
-  font-weight: bold;
-  background: #f5f5f5;
 }
 
 .close-btn {
   background: none;
   border: none;
   cursor: pointer;
-  font-size: 1.25rem;
+  font-size: 1.5rem;
   line-height: 1;
   padding: 0;
+  color: #666;
 }
 
 .popup-body {
   display: flex;
-  gap: 1px;
-  background: #eee;
+  flex: 1;
+  overflow: hidden;
 }
 
 .popup-controls {
   flex: 1;
-  padding: 0.75rem;
+  padding: 1rem;
+  overflow-y: auto;
   background: white;
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+}
+
+.settings-subsection h4 {
+  margin: 0 0 0.5rem 0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.button-group {
+  display: flex;
+  gap: 0.25rem;
+}
+
+.button-group button {
+  padding: 0.25rem 0.5rem;
+  font-size: 0.75rem;
+  border: 1px solid #ddd;
+  background: white;
+  cursor: pointer;
+  transition: all 0.2s;
+}
+
+.button-group button.active {
+  background: #61afef;
+  color: white;
+  border-color: #61afef;
+}
+
+.button-group button:disabled {
+  opacity: 0.5;
+  cursor: not-allowed;
+}
+
+.checkbox-inline {
+  display: inline-flex;
+  align-items: center;
+  gap: 0.25rem;
+  margin-left: 1rem;
+  font-size: 0.875rem;
+  cursor: pointer;
+}
+
+.checkbox-inline input[type="checkbox"] {
+  margin: 0;
+  cursor: pointer;
+}
+
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700, #3d3d3d);
+  color: var(--color-browngray-100, #f5f5f5);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
+
+.inheritance-btn {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  padding: 0;
+  background: transparent;
+  border: none;
+  cursor: pointer;
+  font-size: 0.875rem;
+  color: #666;
+  transition: color 0.2s;
+}
+
+.inheritance-btn:hover {
+  color: #333;
+}
+
+.inheritance-btn svg {
+  width: 1.25rem;
+  height: 1.25rem;
 }
 
 .popup-css {
   flex: 1;
-  background: #1e1e1e;
+  background: #f5f5f5;
   display: flex;
+  flex-direction: column;
+  border-left: 1px solid #e0e0e0;
+}
+
+.css-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0.5rem 0.75rem;
+  background: #e8e8e8;
+  border-bottom: 1px solid #d0d0d0;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+
+.toggle {
+  display: flex;
+  align-items: center;
+  gap: 0.5rem;
+  cursor: pointer;
+  font-size: 0.75rem;
+  font-weight: normal;
+  color: #666;
+}
+
+.toggle input[type='checkbox'] {
+  position: absolute;
+  opacity: 0;
+  width: 0;
+  height: 0;
+}
+
+.toggle-switch {
+  position: relative;
+  display: inline-block;
+  width: 36px;
+  height: 18px;
+  background: #ccc;
+  border-radius: 18px;
+  transition: background 0.2s ease;
+}
+
+.toggle-switch::after {
+  content: '';
+  position: absolute;
+  top: 2px;
+  left: 2px;
+  width: 14px;
+  height: 14px;
+  background: white;
+  border-radius: 50%;
+  transition: transform 0.2s ease;
+}
+
+.toggle input[type='checkbox']:checked + .toggle-switch {
+  background: #61afef;
+}
+
+.toggle input[type='checkbox']:checked + .toggle-switch::after {
+  transform: translateX(18px);
+}
+
+.readonly {
+  flex: 1;
+  margin: 0;
+  padding: 0.75rem;
+  background: #1e1e1e;
+  color: #abb2bf;
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  line-height: 1.5;
+  overflow-y: auto;
+  white-space: pre-wrap;
 }
 
 .popup-css textarea {
+  flex: 1;
   width: 100%;
-  height: 200px;
   background: #1e1e1e;
   color: #abb2bf;
   border: none;
   padding: 0.75rem;
   font-family: 'Courier New', Courier, monospace;
   font-size: 0.75rem;
-  line-height: 1.4;
+  line-height: 1.5;
   resize: none;
   outline: none;
 }
-
-.control {
-  margin-bottom: 0.5rem;
-}
-
-.control label {
-  display: block;
-  font-size: 0.75rem;
-  margin-bottom: 0.25rem;
-  color: #666;
-}
-
-.control input {
-  width: 60px;
-  padding: 0.25rem;
-  font-size: 0.875rem;
-}
-
-.control span {
-  font-size: 0.75rem;
-  color: #666;
-  margin-left: 0.25rem;
-}
-
-.no-styles {
-  font-size: 0.75rem;
-  color: #999;
-  margin: 0;
-}
-
-.no-css {
-  color: #666;
-  font-style: italic;
-}
 </style>
diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index ffbb152..804ab50 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -20,18 +20,23 @@
         <div class="settings-subsection">
           <h4>Marges</h4>
           <div class="margin-grid">
-            <div class="field">
-              <label>Haut</label>
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-top">Haut</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.top.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.top.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.top.unit = 'mm'"
                   >
                     mm
@@ -39,6 +44,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.top.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.top.unit = 'px'"
                   >
                     px
@@ -46,6 +52,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.top.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.top.unit = 'rem'"
                   >
                     rem
@@ -54,18 +61,23 @@
               </div>
             </div>
 
-            <div class="field">
-              <label>Bas</label>
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.bottom.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.bottom.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.bottom.unit = 'mm'"
                   >
                     mm
@@ -73,6 +85,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.bottom.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.bottom.unit = 'px'"
                   >
                     px
@@ -80,6 +93,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.bottom.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.bottom.unit = 'rem'"
                   >
                     rem
@@ -88,18 +102,23 @@
               </div>
             </div>
 
-            <div class="field">
-              <label>Gauche</label>
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-left">Gauche</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.left.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.left.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.left.unit = 'mm'"
                   >
                     mm
@@ -107,6 +126,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.left.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.left.unit = 'px'"
                   >
                     px
@@ -114,6 +134,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.left.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.left.unit = 'rem'"
                   >
                     rem
@@ -122,18 +143,23 @@
               </div>
             </div>
 
-            <div class="field">
-              <label>Droite</label>
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-right">Droite</label>
               <div class="input-with-unit">
                 <input
                   type="number"
                   v-model.number="margins.right.value"
                   min="0"
+                  :disabled="inheritanceLocked"
                 />
                 <div class="unit-toggle">
                   <button
                     type="button"
                     :class="{ active: margins.right.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.right.unit = 'mm'"
                   >
                     mm
@@ -141,6 +167,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.right.unit === 'px' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.right.unit = 'px'"
                   >
                     px
@@ -148,6 +175,7 @@
                   <button
                     type="button"
                     :class="{ active: margins.right.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
                     @click="margins.right.unit = 'rem'"
                   >
                     rem
@@ -160,13 +188,14 @@
 
         <!-- Background -->
         <div class="settings-subsection">
-          <div class="field">
-            <label>Arrière-plan</label>
+          <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">
               <input
                 ref="backgroundColorInput"
                 type="text"
                 v-model="background.value"
+                :disabled="inheritanceLocked"
                 data-coloris
               />
             </div>
@@ -175,9 +204,9 @@
 
         <!-- Patterns -->
         <div class="settings-subsection">
-          <div class="field">
-            <label>Motifs</label>
-            <select v-model="pattern">
+          <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">
               <option value="">Choisissez</option>
               <option value="dots">Points</option>
               <option value="lines">Lignes</option>
@@ -189,13 +218,31 @@
         <!-- Lock/Unlock Inheritance Button -->
         <div class="settings-subsection">
           <button class="inheritance-btn" @click="toggleInheritance">
-            <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
+              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
+              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>
+            <span>{{
+              inheritanceLocked
+                ? "Déverrouiller l'héritage"
+                : "Verrouiller l'héritage"
+            }}</span>
           </button>
         </div>
       </div>
@@ -204,17 +251,28 @@
       <div class="popup-css">
         <div class="css-header">
           <span>CSS</span>
-          <label class="toggle">
+          <label
+            class="toggle"
+            :class="{ 'field--view-only': inheritanceLocked }"
+          >
             <span class="toggle-label">Mode édition</span>
-            <input type="checkbox" v-model="isEditable" />
+            <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>
+        <pre
+          v-if="!isEditable"
+          class="readonly"
+        ><code class="hljs language-css" v-html="highlightedCss"></code></pre>
         <textarea
           v-else
           :value="pageCss"
           @input="handleCssInput"
+          :disabled="inheritanceLocked"
           spellcheck="false"
         ></textarea>
       </div>
@@ -225,6 +283,7 @@
 <script setup>
 import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import { usePopupPosition } from '../composables/usePopupPosition';
 import Coloris from '@melloware/coloris';
 import '@melloware/coloris/dist/coloris.css';
 import hljs from 'highlight.js/lib/core';
@@ -272,14 +331,10 @@ const immediateUpdate = (callback) => {
   callback();
 };
 
-const calculatePosition = (pageElement) => {
-  const rect = pageElement.getBoundingClientRect();
-  const iframeRect = props.iframeRef.getBoundingClientRect();
-  return {
-    x: iframeRect.left + rect.left + 20,
-    y: iframeRect.top + rect.top + 20,
-  };
-};
+const POPUP_WIDTH = 550;
+const POPUP_HEIGHT = 600;
+
+const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
 
 const updateMargins = () => {
   const marginValue = `${margins.value.top.value}${margins.value.top.unit} ${margins.value.right.value}${margins.value.right.unit} ${margins.value.bottom.value}${margins.value.bottom.unit} ${margins.value.left.value}${margins.value.left.unit}`;
@@ -362,13 +417,61 @@ watch(
   }
 );
 
-const open = (pageElement) => {
+const loadValuesFromStylesheet = () => {
+  try {
+    isUpdatingFromStore = true;
+
+    // Extract margin from @page
+    const marginData = stylesheetStore.extractValue('@page', 'margin');
+    if (marginData) {
+      // Parse margin shorthand (top right bottom left)
+      const marginStr = typeof marginData === 'string' ? marginData : marginData.value;
+      const marginValues = marginStr.split(' ');
+
+      if (marginValues.length === 4) {
+        // Parse each margin value
+        const parseMargin = (value) => {
+          const match = value.match(/^([\d.]+)(\w+)$/);
+          if (match) {
+            return { value: parseFloat(match[1]), unit: match[2] };
+          }
+          return { value: 0, unit: 'mm' };
+        };
+
+        const top = parseMargin(marginValues[0]);
+        const right = parseMargin(marginValues[1]);
+        const bottom = parseMargin(marginValues[2]);
+        const left = parseMargin(marginValues[3]);
+
+        margins.value.top = top;
+        margins.value.right = right;
+        margins.value.bottom = bottom;
+        margins.value.left = left;
+      }
+    }
+
+    // Extract background from @page
+    const backgroundData = stylesheetStore.extractValue('@page', 'background');
+    if (backgroundData) {
+      background.value.value = typeof backgroundData === 'string' ? backgroundData : backgroundData.value;
+    }
+  } catch (error) {
+    console.error('Error loading values from stylesheet:', error);
+  } finally {
+    isUpdatingFromStore = false;
+  }
+};
+
+const open = (pageElement, event) => {
   selectedPageElement.value = pageElement;
-  position.value = calculatePosition(pageElement);
+  position.value = calculatePosition(event);
 
   // Add border to the selected page
   pageElement.style.outline = '2px solid #61afef';
 
+  // Load values from stylesheet
+  loadValuesFromStylesheet();
+
   visible.value = true;
 
   // Initialize Coloris after opening
@@ -439,7 +542,10 @@ const handleCssInput = (event) => {
   cssDebounceTimer = setTimeout(() => {
     const oldBlock = pageCss.value;
     if (oldBlock) {
-      stylesheetStore.content = stylesheetStore.content.replace(oldBlock, newCss);
+      stylesheetStore.content = stylesheetStore.content.replace(
+        oldBlock,
+        newCss
+      );
     }
   }, 500);
 };
@@ -454,6 +560,16 @@ watch(isEditable, async (newValue, oldValue) => {
   }
 });
 
+// Watch stylesheet changes to sync values
+watch(
+  () => stylesheetStore.content,
+  () => {
+    if (visible.value && !stylesheetStore.isEditing) {
+      loadValuesFromStylesheet();
+    }
+  }
+);
+
 defineExpose({ open, close, visible });
 </script>
 
@@ -542,7 +658,37 @@ defineExpose({ open, close, visible });
   gap: 0.75rem;
 }
 
-/* Unit toggle styles are inherited from global styles */
+/* Label with CSS tooltip */
+.label-with-tooltip {
+  text-decoration: underline dotted;
+  text-underline-offset: 2px;
+  cursor: help;
+  position: relative;
+}
+
+.label-with-tooltip::after {
+  content: attr(data-css);
+  position: absolute;
+  bottom: 100%;
+  left: 0;
+  margin-bottom: 4px;
+  padding: 0.25rem 0.5rem;
+  background: var(--color-browngray-700, #3d3d3d);
+  color: var(--color-browngray-100, #f5f5f5);
+  font-family: 'Courier New', Courier, monospace;
+  font-size: 0.75rem;
+  border-radius: 4px;
+  white-space: nowrap;
+  opacity: 0;
+  visibility: hidden;
+  transition: opacity 0.15s ease, visibility 0.15s ease;
+  z-index: 10;
+}
+
+.label-with-tooltip:hover::after {
+  opacity: 1;
+  visibility: visible;
+}
 
 .inheritance-btn {
   display: flex;
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 616775b..06f417d 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -4,7 +4,9 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="page-format">Format d'impression</label>
+        <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>
@@ -17,7 +19,9 @@
 
     <div class="settings-subsection">
       <div class="field field--view-only">
-        <label for="page-width">Largeur</label>
+        <label for="page-width" class="label-with-tooltip" data-css="width"
+          >Largeur</label
+        >
         <input
           id="page-width"
           type="number"
@@ -28,7 +32,9 @@
       </div>
 
       <div class="field field--view-only">
-        <label for="page-height">Hauteur</label>
+        <label for="page-height" class="label-with-tooltip" data-css="height"
+          >Hauteur</label
+        >
         <input
           id="page-height"
           type="number"
@@ -43,7 +49,9 @@
       <h3>Marges</h3>
 
       <div class="field">
-        <label for="margin-top">Haut</label>
+        <label for="margin-top" class="label-with-tooltip" data-css="margin-top"
+          >Haut</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-top"
@@ -78,7 +86,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-bottom">Bas</label>
+        <label
+          for="margin-bottom"
+          class="label-with-tooltip"
+          data-css="margin-bottom"
+          >Bas</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-bottom"
@@ -113,7 +126,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-left">Gauche</label>
+        <label
+          for="margin-left"
+          class="label-with-tooltip"
+          data-css="margin-left"
+          >Gauche</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-left"
@@ -148,7 +166,12 @@
       </div>
 
       <div class="field">
-        <label for="margin-right">Droite</label>
+        <label
+          for="margin-right"
+          class="label-with-tooltip"
+          data-css="margin-right"
+          >Droite</label
+        >
         <div class="input-with-unit">
           <input
             id="margin-right"
@@ -185,7 +208,9 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="background">Arrière-plan</label>
+        <label for="background" class="label-with-tooltip" data-css="background"
+          >Arrière-plan</label
+        >
         <div class="input-with-color">
           <input
             ref="backgroundColorInput"
@@ -218,7 +243,12 @@
 
     <div class="settings-subsection">
       <div class="field">
-        <label for="pattern">Motif</label>
+        <label
+          for="pattern"
+          class="label-with-tooltip"
+          data-css="background-image"
+          >Motif</label
+        >
         <select id="pattern" v-model="pattern">
           <option value="">Choisissez</option>
           <option value="dots">Points</option>
@@ -231,12 +261,22 @@
     <div class="settings-subsection">
       <div class="field checkbox-field">
         <input id="page-numbers" type="checkbox" v-model="pageNumbers" />
-        <label for="page-numbers">Numéro de page</label>
+        <label
+          for="page-numbers"
+          class="label-with-tooltip"
+          data-css="@bottom-left/right"
+          >Numéro de page</label
+        >
       </div>
 
       <div class="field checkbox-field">
         <input id="running-title" type="checkbox" v-model="runningTitle" />
-        <label for="running-title">Titre courant</label>
+        <label
+          for="running-title"
+          class="label-with-tooltip"
+          data-css="string-set"
+          >Titre courant</label
+        >
       </div>
     </div>
   </section>
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index 614b79d..2a870ca 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -9,14 +9,14 @@
     <!-- Police -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-font">Police</label>
+        <label for="text-font" class="label-with-tooltip" data-css="font-family">Police</label>
         <div class="field-with-option">
           <select id="text-font" v-model="font">
             <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
           </select>
           <div class="field-checkbox">
             <input id="text-italic" type="checkbox" v-model="italic" />
-            <label for="text-italic">Italique</label>
+            <label for="text-italic" class="label-with-tooltip" data-css="font-style">Italique</label>
           </div>
         </div>
       </div>
@@ -25,7 +25,7 @@
     <!-- Graisse -->
     <div class="settings-subsection">
       <div class="field">
-        <label>Graisse</label>
+        <label class="label-with-tooltip" data-css="font-weight">Graisse</label>
         <UnitToggle v-model="weight" :units="weights" />
       </div>
     </div>
@@ -33,7 +33,7 @@
     <!-- Taille du texte -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-size-range">Taille du texte</label>
+        <label for="text-size-range" class="label-with-tooltip" data-css="font-size">Taille du texte</label>
         <InputWithUnit
           v-model="fontSize"
           :units="['px', 'em', 'rem']"
@@ -47,7 +47,7 @@
     <!-- Alignement -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-alignment">Alignement</label>
+        <label for="text-alignment" class="label-with-tooltip" data-css="text-align">Alignement</label>
         <select id="text-alignment" v-model="alignment">
           <option v-for="a in alignments" :key="a.value" :value="a.value">
             {{ a.label }}
@@ -59,7 +59,7 @@
     <!-- Couleurs -->
     <div class="settings-subsection">
       <div class="field">
-        <label for="text-color">Couleur</label>
+        <label for="text-color" class="label-with-tooltip" data-css="color">Couleur</label>
         <div class="input-with-color">
           <input
             id="text-color"
@@ -71,7 +71,7 @@
         </div>
       </div>
       <div class="field">
-        <label for="text-background">Arrière-plan</label>
+        <label for="text-background" class="label-with-tooltip" data-css="background">Arrière-plan</label>
         <div class="input-with-color">
           <input
             id="text-background"
@@ -90,6 +90,7 @@
         ref="marginOuterEditor"
         id="margin-outer"
         label="Marges extérieures"
+        cssProperty="margin"
         v-model:simple="marginOuter"
         v-model:detailed="marginOuterDetailed"
         :units="['mm', 'px', 'rem']"
@@ -103,6 +104,7 @@
         ref="marginInnerEditor"
         id="margin-inner"
         label="Marges intérieures"
+        cssProperty="padding"
         v-model:simple="marginInner"
         v-model:detailed="marginInnerDetailed"
         :units="['mm', 'px', 'rem']"
diff --git a/src/components/ui/MarginEditor.vue b/src/components/ui/MarginEditor.vue
index 1802640..5557e97 100644
--- a/src/components/ui/MarginEditor.vue
+++ b/src/components/ui/MarginEditor.vue
@@ -1,7 +1,7 @@
 <template>
   <div class="margin-editor">
     <div class="field">
-      <label :for="id">{{ label }}</label>
+      <label :for="id" class="label-with-tooltip" :data-css="cssProperty">{{ label }}</label>
       <div class="input-with-unit">
         <input
           :id="id"
@@ -29,7 +29,7 @@
 
     <div v-if="expanded" class="subsection collapsed-section">
       <div v-for="side in sides" :key="side.key" class="field">
-        <label :for="`${id}-${side.key}`">{{ side.label }}</label>
+        <label :for="`${id}-${side.key}`" class="label-with-tooltip" :data-css="`${cssProperty}-${side.key}`">{{ side.label }}</label>
         <div class="input-with-unit">
           <input
             :id="`${id}-${side.key}`"
@@ -62,6 +62,10 @@ const props = defineProps({
     type: String,
     required: true
   },
+  cssProperty: {
+    type: String,
+    default: 'margin'
+  },
   simple: {
     type: Object,
     required: true,
diff --git a/src/composables/usePopupPosition.js b/src/composables/usePopupPosition.js
new file mode 100644
index 0000000..c74e814
--- /dev/null
+++ b/src/composables/usePopupPosition.js
@@ -0,0 +1,52 @@
+export function usePopupPosition(popupWidth, popupHeight) {
+  const OFFSET = 10; // Distance from cursor
+
+  const calculatePosition = (event) => {
+    // Get cursor position relative to viewport
+    const cursorX = event.clientX;
+    const cursorY = event.clientY;
+
+    const viewportWidth = window.innerWidth;
+    const viewportHeight = window.innerHeight;
+
+    let x, y;
+
+    // Try bottom-right
+    if (
+      cursorX + OFFSET + popupWidth <= viewportWidth &&
+      cursorY + OFFSET + popupHeight <= viewportHeight
+    ) {
+      x = cursorX + OFFSET;
+      y = cursorY + OFFSET;
+    }
+    // Try bottom-left
+    else if (
+      cursorX - OFFSET - popupWidth >= 0 &&
+      cursorY + OFFSET + popupHeight <= viewportHeight
+    ) {
+      x = cursorX - OFFSET - popupWidth;
+      y = cursorY + OFFSET;
+    }
+    // Try top-right
+    else if (
+      cursorX + OFFSET + popupWidth <= viewportWidth &&
+      cursorY - OFFSET - popupHeight >= 0
+    ) {
+      x = cursorX + OFFSET;
+      y = cursorY - OFFSET - popupHeight;
+    }
+    // Try top-left (fallback)
+    else {
+      x = cursorX - OFFSET - popupWidth;
+      y = cursorY - OFFSET - popupHeight;
+
+      // Ensure it doesn't go off-screen
+      x = Math.max(10, x);
+      y = Math.max(10, y);
+    }
+
+    return { x, y };
+  };
+
+  return { calculatePosition };
+}