feat: refactor popups with shared positioning and CSS tooltips

- 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>

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>