refactor: implement Pinia store for stylesheet management

- Add Pinia state management
- Create centralized stylesheet store with utility methods
- Extract CSS parsing utilities to src/utils/css-parsing.js
- Refactor ElementPopup to manage state independently via store
- Simplify App.vue by removing prop drilling
- Fix iframe rendering with srcdoc instead of document.write
- Improve API: updateProperty uses object parameter for clarity

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

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

src/components/ElementPopup.vue

@@ -10,15 +10,15 @@
     </div>
     <div class="popup-body">
       <div class="popup-controls">
-        <div class="control" v-if="currentFontSize !== null">
+        <div class="control" v-if="fontSizeData">
           <label>font-size</label>
           <input
             type="number"
             step="0.1"
-            :value="currentFontSize"
-            @input="$emit('update:fontSize', parseFloat($event.target.value))"
+            :value="fontSizeData.value"
+            @input="updateFontSize(parseFloat($event.target.value))"
           />
-          <span>{{ fontSizeUnit }}</span>
+          <span>{{ fontSizeData.unit }}</span>
         </div>
         <p v-else class="no-styles">Aucun style éditable</p>
       </div>
@@ -31,27 +31,47 @@
 
 <script setup>
 import { computed } from 'vue';
+import { useStylesheetStore } from '../stores/stylesheet';
 import hljs from 'highlight.js/lib/core';
 import css from 'highlight.js/lib/languages/css';
 import 'highlight.js/styles/github.css';
 
 hljs.registerLanguage('css', css);
 
+const stylesheetStore = useStylesheetStore();
+
 const props = defineProps({
   visible: Boolean,
   position: Object,
-  selector: String,
-  elementCss: String,
-  currentFontSize: Number,
-  fontSizeUnit: String
+  selector: String
 });
 
-defineEmits(['close', 'update:fontSize']);
+defineEmits(['close']);
+
+const elementCss = computed(() => {
+  if (!props.selector) return '';
+  return stylesheetStore.extractBlock(props.selector);
+});
+
+const fontSizeData = computed(() => {
+  if (!props.selector) return null;
+  return stylesheetStore.extractValue(props.selector, 'font-size');
+});
 
 const highlightedCss = computed(() => {
-  if (!props.elementCss) return '<span class="no-css">Aucun style défini</span>';
-  return hljs.highlight(props.elementCss, { language: 'css' }).value;
+  if (!elementCss.value) return '<span class="no-css">Aucun style défini</span>';
+  return hljs.highlight(elementCss.value, { language: 'css' }).value;
 });
+
+const updateFontSize = (value) => {
+  if (!fontSizeData.value) return;
+  stylesheetStore.updateProperty(
+    props.selector,
+    'font-size',
+    value,
+    fontSizeData.value.unit
+  );
+};
 </script>
 
 <style scoped>