diff --git a/TESTING_CHECKLIST.md b/TESTING_CHECKLIST.md
new file mode 100644
index 0000000..27d7db1
--- /dev/null
+++ b/TESTING_CHECKLIST.md
@@ -0,0 +1,276 @@
+# Map Editor Plugin - Testing Checklist
+
+## Pre-Testing Setup
+
+1. [ ] Build the frontend: `npm run build`
+2. [ ] Ensure Kirby is running (PHP server)
+3. [ ] Log into Kirby Panel
+4. [ ] Navigate to the map page (e.g., `/panel/pages/map+carte`)
+
+## Phase 1: Multi-Mode Testing (Map Page)
+
+### Basic Marker Operations
+
+1. [ ] **View existing markers**
+   - Open map page in Panel
+   - Verify markers are loaded and displayed on map
+   - Verify markers appear in sidebar list
+
+2. [ ] **Create marker via button**
+   - Click "Add Marker" button in sidebar
+   - Verify marker appears at map center
+   - Verify marker appears in sidebar
+   - Check browser console for errors
+
+3. [ ] **Create marker via map click**
+   - Click anywhere on the map
+   - Verify marker appears at clicked location
+   - Verify marker appears in sidebar
+
+4. [ ] **Select marker**
+   - Click marker in sidebar
+   - Verify map centers on marker
+   - Verify marker is highlighted
+
+5. [ ] **Drag marker**
+   - Drag a marker to new position
+   - Verify position updates in real-time
+   - Reload page and verify position persisted
+
+6. [ ] **Edit marker**
+   - Click "Edit" button for a marker in sidebar
+   - Verify redirect to marker page in Panel
+   - Verify marker page loads correctly
+
+7. [ ] **Delete marker**
+   - Click "Delete" button for a marker
+   - Verify confirmation dialog appears
+   - Confirm deletion
+   - Verify marker removed from map and sidebar
+   - Reload page and verify deletion persisted
+
+### Map Data Persistence
+
+8. [ ] **Map view changes**
+   - Pan and zoom the map
+   - Reload the page
+   - Verify map returns to same view
+
+9. [ ] **Check YAML data**
+   - View the mapdata field source
+   - Verify it contains: background, center, zoom
+   - Verify it does NOT contain markers array
+
+### Edge Cases
+
+10. [ ] **Max markers limit**
+    - Create markers up to the limit (default 50)
+    - Verify "Add Marker" button becomes disabled
+    - Verify map clicks don't create new markers
+
+11. [ ] **Geocode search**
+    - Use the address search in sidebar
+    - Search for an address
+    - Verify map centers on result
+
+12. [ ] **Error handling**
+    - Open browser DevTools Network tab
+    - Try operations with network offline (simulate)
+    - Verify errors are logged to console
+
+## Phase 2: Single-Mode Testing (Marker Page)
+
+### Marker Page Structure
+
+1. [ ] **Create test marker**
+   - In map page sidebar, click "Add Marker"
+   - Click "Edit" to open the marker page
+
+2. [ ] **Content tab**
+   - Verify "Contenu" tab exists
+   - Edit title field
+   - Add blocks (heading, text, image, etc.)
+   - Save and verify content persists
+
+3. [ ] **Position tab**
+   - Switch to "Position" tab
+   - Verify latitude/longitude fields on left
+   - Verify map preview on right
+
+### Single-Mode Map Functionality
+
+4. [ ] **View marker position**
+   - Verify single marker appears on map
+   - Verify marker is at coordinates shown in fields
+
+5. [ ] **Drag marker in single mode**
+   - Drag the marker to a new position
+   - Check browser console for API call
+   - Reload page
+   - Verify new position persisted
+
+6. [ ] **Update coordinates via fields**
+   - Edit latitude field (e.g., 43.8)
+   - Edit longitude field (e.g., 4.3)
+   - Save the page
+   - Verify marker moved on map preview
+
+7. [ ] **Geocode search in single mode**
+   - Use address search (if available)
+   - Verify map centers on result
+   - Drag marker to searched location
+
+### Single-Mode Restrictions
+
+8. [ ] **No CRUD buttons**
+   - Verify no "Add Marker" button
+   - Verify no "Delete" button
+   - Verify no marker list sidebar
+
+9. [ ] **Map size**
+   - Verify map height is smaller (400px) than multi-mode
+
+## Phase 3: Integration Testing
+
+### Subpage Management
+
+1. [ ] **View markers as subpages**
+   - In map page, check sidebar "Marqueurs" section
+   - Verify all markers listed as subpages
+   - Verify ordering by num
+
+2. [ ] **Reorder markers**
+   - Drag markers in Panel pages section
+   - Verify order updates
+   - View map editor
+   - Verify sidebar reflects new order
+
+3. [ ] **Delete marker via Panel**
+   - Delete a marker subpage via Panel (not map editor)
+   - View map page
+   - Verify marker removed from map
+
+4. [ ] **Create marker manually**
+   - Create a new marker subpage via Panel
+   - Set template to "marker"
+   - Add title, latitude, longitude
+   - View map page
+   - Verify marker appears on map
+
+### Multi-Marker Performance
+
+5. [ ] **Create 10 markers**
+   - Create 10 markers via map
+   - Verify performance is acceptable
+   - Check load time
+
+6. [ ] **Create 50 markers** (optional stress test)
+   - Create markers up to limit
+   - Verify UI remains responsive
+   - Check browser memory usage
+
+## Phase 4: Security & API Testing
+
+### Authentication
+
+1. [ ] **Logged out access**
+   - Log out of Panel
+   - Try accessing API directly (e.g., via curl)
+   - Verify 401 Unauthorized response
+
+### CSRF Protection
+
+2. [ ] **Invalid CSRF token**
+   - Use browser DevTools to modify X-CSRF header
+   - Try creating/updating/deleting marker
+   - Verify 403 Forbidden response
+
+### Permissions
+
+3. [ ] **Create restricted user** (optional)
+   - Create user with limited permissions
+   - Log in as that user
+   - Try marker operations
+   - Verify permission checks work
+
+### API Responses
+
+4. [ ] **Check API responses**
+   - Open DevTools Network tab
+   - Perform marker operations
+   - Verify responses match expected format:
+     ```json
+     {
+       "status": "success",
+       "data": { ... }
+     }
+     ```
+
+5. [ ] **Test error responses**
+   - Try invalid coordinates (e.g., lat: 200)
+   - Verify 400 Bad Request response
+   - Verify error message is descriptive
+
+## Phase 5: Build & Deployment
+
+### Build Verification
+
+1. [ ] **Clean build**
+   - Run `npm run build`
+   - Verify no errors or warnings (except font warnings)
+   - Check dist folder created
+
+2. [ ] **Production test**
+   - Test on production server (if available)
+   - Verify all functionality works
+
+### Browser Compatibility
+
+3. [ ] **Test in Chrome**
+4. [ ] **Test in Firefox**
+5. [ ] **Test in Safari**
+6. [ ] **Test in Edge** (optional)
+
+## Common Issues & Solutions
+
+### Issue: Markers not loading
+- **Check**: Browser console for API errors
+- **Check**: Network tab for 401/403 errors
+- **Solution**: Verify user is logged in, CSRF token is valid
+
+### Issue: Drag doesn't update position
+- **Check**: Console for API errors
+- **Check**: Network tab for PATCH request
+- **Solution**: Verify page permissions, CSRF token
+
+### Issue: Redirect to Panel doesn't work
+- **Check**: Console for errors
+- **Check**: panelUrl in API response
+- **Solution**: Verify page ID format is correct
+
+### Issue: Single mode shows multiple markers
+- **Check**: MapEditor component mode prop
+- **Check**: Blueprint field configuration
+- **Solution**: Verify `mode: single` in blueprint
+
+## Test Results Summary
+
+Date: __________
+Tester: __________
+
+| Phase | Tests Passed | Tests Failed | Notes |
+|-------|-------------|--------------|-------|
+| Phase 1: Multi-Mode | __ / 12 | __ | |
+| Phase 2: Single-Mode | __ / 9 | __ | |
+| Phase 3: Integration | __ / 6 | __ | |
+| Phase 4: Security | __ / 5 | __ | |
+| Phase 5: Build | __ / 6 | __ | |
+| **Total** | __ / 38 | __ | |
+
+## Next Steps After Testing
+
+- [ ] Document any bugs found
+- [ ] Create GitHub issues for bugs
+- [ ] Update README with usage instructions
+- [ ] Add user documentation
+- [ ] Consider implementing suggested improvements
diff --git a/public/assets/svg/marker-pin.svg b/public/assets/svg/marker-pin.svg
deleted file mode 100644
index 6df71cc..0000000
--- a/public/assets/svg/marker-pin.svg
+++ /dev/null
@@ -1 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" width="24" height="24" fill="currentColor"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5a2.5 2.5 0 1 1 0-5 2.5 2.5 0 0 1 0 5z"/></svg>
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/1_un-folklore-abyssal/chapter.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/1_un-folklore-abyssal/chapitre.txt
similarity index 100%
rename from public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/1_un-folklore-abyssal/chapter.txt
rename to public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/1_un-folklore-abyssal/chapitre.txt
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/2_une-culture-fascinante/chapter.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/2_une-culture-fascinante/chapitre.txt
similarity index 100%
rename from public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/2_une-culture-fascinante/chapter.txt
rename to public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/2_une-culture-fascinante/chapitre.txt
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map-static.png b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map-static.png
deleted file mode 100644
index 2c4d8dd..0000000
Binary files a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map-static.png and /dev/null differ
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map-static.png.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map-static.png.txt
deleted file mode 100644
index 6fe1571..0000000
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map-static.png.txt
+++ /dev/null
@@ -1 +0,0 @@
-Uuid: fveqiuck5suwp14v
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map.txt
deleted file mode 100644
index 7fec40e..0000000
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/1_carte-test/map.txt
+++ /dev/null
@@ -1,24 +0,0 @@
-Title: Carte test
-
-----
-
-Tags: 
-
-----
-
-Text: 
-
-----
-
-Mapdata:
-
-background:
-  type: osm
-center:
-  lat: 48.868167700000015
-  lon: 2.3924468999999817
-zoom: 13
-
-----
-
-Uuid: qd3aqmiburbztsxq
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/chapter.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/chapitre.txt
similarity index 100%
rename from public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/chapter.txt
rename to public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/3_la-nouvelle-ere/chapitre.txt
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map-static.png b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map-static.png
deleted file mode 100644
index 61aad30..0000000
Binary files a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map-static.png and /dev/null differ
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map-static.png.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map-static.png.txt
deleted file mode 100644
index 1b092bc..0000000
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map-static.png.txt
+++ /dev/null
@@ -1 +0,0 @@
-Uuid: 9uhixxughhuqyphe
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map.txt
deleted file mode 100644
index c3cb097..0000000
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/4_test/map.txt
+++ /dev/null
@@ -1,24 +0,0 @@
-Title: test
-
-----
-
-Tags: 
-
-----
-
-Text: 
-
-----
-
-Mapdata:
-
-background:
-  type: osm
-center:
-  lat: 43.836699
-  lon: 4.360054
-zoom: 13
-
-----
-
-Uuid: o06wmgdr075lthky
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/geoformat.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/geoformat.txt
index b021f8c..163cd02 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/geoformat.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/1_plongez-dans-les-sources/geoformat.txt
@@ -10,7 +10,7 @@ Tags:
 
 ----
 
-Cover: 
+Cover: - file://15innylddvc2qann
 
 ----
 
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image
deleted file mode 100644
index 26754c9..0000000
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/.regenerate-map-image
+++ /dev/null
@@ -1 +0,0 @@
-1772115179
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
index 3de6739..d3d9d07 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/2_roadtrip-a-vos-risques-et-perils/1_marker-1769700434/marker.txt
@@ -2,11 +2,7 @@ Title: Nîmes
 
 ----
 
-Cover: 
-
-----
-
-Text: [{"content":{"text":"<p>Nisi nec morbi diam tortor quis interdum fusce quisque sit aliquam scelerisque a vivamus gravida id eros nisl tortor commodo amet mi quis tincidunt metus.</p><p>Congue proin urna eget quisque sem a fusce felis eros purus hendrerit facilisis hendrerit metus accumsan metus nec eu cursus elementum maecenas ut scelerisque sit.</p>"},"id":"1adbada8-6dee-4ab4-b33b-d914d4806b70","isHidden":false,"type":"text"}]
+Content: 
 
 ----
 
@@ -26,8 +22,4 @@ Markericonsize: 40
 
 ----
 
-Content: 
-
-----
-
 Uuid: lajqvh51bnvty5xr
\ No newline at end of file
diff --git a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
index 3648b80..b97c01d 100644
--- a/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
+++ b/public/content/1_cohesion-des-mondes/5_test-avec-geoformat/narrative.txt
@@ -25,13 +25,13 @@ Customcss:
 body {
   font-family: "DM Sans", sans-serif;
   text-align: left;
-  color: rgb(0, 0, 0);
+  color: black;
+  background: transparent;
 }
 
-/*
 p {
   text-align: right;
-  font-size: 49px;
+  font-size: 14px;
   margin: 0mm;
   font-weight: 300;
   font-family: Arial;
@@ -41,7 +41,6 @@ p {
   padding-bottom: 0mm;
   padding-left: 0mm;
 }
-*/
 
 h1 {
   font-family: DM Sans;
diff --git a/public/content/1_cohesion-des-mondes/project.txt b/public/content/1_cohesion-des-mondes/projet.txt
similarity index 100%
rename from public/content/1_cohesion-des-mondes/project.txt
rename to public/content/1_cohesion-des-mondes/projet.txt
diff --git a/public/kirby/panel/dist.zip b/public/kirby/panel/dist.zip
deleted file mode 100644
index 45a436f..0000000
Binary files a/public/kirby/panel/dist.zip and /dev/null differ
diff --git a/public/site/blueprints/blocks/map.yml b/public/site/blueprints/blocks/map.yml
index bdb8d78..640308b 100644
--- a/public/site/blueprints/blocks/map.yml
+++ b/public/site/blueprints/blocks/map.yml
@@ -1,8 +1,8 @@
 name: Carte
 icon: map
 fields:
-  map:
+  map: 
     label: Choisir la carte
     type: pages
-    query: page.children.filterBy('intendedTemplate', 'map')
-    multiple: false
+    query: page.parent.parent.children.filterBy('intendedTemplate', 'map')
+    multiple: false
\ No newline at end of file
diff --git a/public/site/blueprints/fields/blueprint.yml b/public/site/blueprints/fields/blueprint.yml
deleted file mode 100644
index 1feb794..0000000
--- a/public/site/blueprints/fields/blueprint.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-type: headline
-label: Page "{{ page.blueprint.title }}"
diff --git a/public/site/blueprints/pages/chapitre.yml b/public/site/blueprints/pages/chapitre.yml
new file mode 100644
index 0000000..c630786
--- /dev/null
+++ b/public/site/blueprints/pages/chapitre.yml
@@ -0,0 +1,38 @@
+title: Chapitre
+
+columns:
+  main:
+    width: 2/3
+    sections:
+      fields:
+        type: fields
+        fields:
+          text: 
+            label: Contenu
+            type: blocks
+            fieldsets: 
+              text:
+                label: Texte
+                type: group
+                fieldsets:
+                  - heading
+                  - text
+                  - list
+                  - quote
+              media:
+                label: Medias
+                type: group
+                fieldsets:
+                  - map
+                  - image
+                  - video
+
+  sidebar:
+    width: 1/3
+    sections:
+      files:
+        label: Fichiers
+        type: files
+
+
+
diff --git a/public/site/blueprints/pages/chapter.yml b/public/site/blueprints/pages/chapter.yml
deleted file mode 100644
index dfb9cb4..0000000
--- a/public/site/blueprints/pages/chapter.yml
+++ /dev/null
@@ -1,41 +0,0 @@
-title: Chapitre
-
-tabs:
-  contentTab:
-    label: Contenu
-    columns:
-      main:
-        width: 2/3
-        sections:
-          fields:
-            type: fields
-            fields:
-              blueprint: fields/blueprint
-              text:
-                label: Contenu
-                type: blocks
-                fieldsets:
-                  text:
-                    label: Texte
-                    type: group
-                    fieldsets:
-                      - heading
-                      - text
-                      - list
-                      - quote
-                  media:
-                    label: Medias
-                    type: group
-                    fieldsets:
-                      - map
-                      - image
-                      - video
-      sidebar:
-        width: 1/3
-        sections:
-          maps:
-            label: Cartes
-            type: pages
-            template: map
-
-  files: tabs/files
diff --git a/public/site/blueprints/pages/geoformat.yml b/public/site/blueprints/pages/geoformat.yml
index 3104955..1fca6dc 100644
--- a/public/site/blueprints/pages/geoformat.yml
+++ b/public/site/blueprints/pages/geoformat.yml
@@ -1,44 +1,38 @@
 title: Géoformat
 
-tabs:
-  contentTab:
-    columns:
-      main:
-        width: 2/3
-        sections:
-          fields:
-            type: fields
-            fields:
-              blueprint: fields/blueprint
-              subtitle:
-                label: Sous-titre
-                type: text
-                width: 1/2
-              tags:
-                label: Mots-clés
-                type: tags
-                width: 1/2
-              cover:
-                label: Media de couverture
-                type: files
-                query: page.coverFiles
-                text: "{{ file.coverLabel }}"
-                multiple: false
-                width: 1/2
-              text:
-                label: Chapeau
-                type: writer
-          chapters:
-            label: Chapitres
-            type: pages
-            template: chapter
-      sidebar:
-        width: 1/3
-        sections:
-          maps:
-            label: Cartes
-            type: pages
-            template: map
-            help: Créez des cartes ici avant de pouvoir les ajouter dans un bloc ou en couverture.
+columns:
+  main:
+    width: 2/3
+    sections:
+      fields:
+        type: fields
+        fields:
+          subtitle: 
+            label: Sous-titre
+            type: text
+            width: 1/2
+          tags: 
+            label: Mots-clés
+            type: tags
+            width: 1/2
+          cover: 
+            label: Media de couverture
+            type: files
+            multiple: false
+            width: 1/2
+          text: 
+            label: Chapeau
+            type: writer
+      pages:
+        label: Chapitres
+        type: pages
+        template: chapitre
+  sidebar:
+    width: 1/3
+    sections:
+      files:
+        label: Fichiers
+        type: files
+
+
 
-  filesTab: tabs/files
diff --git a/public/site/blueprints/pages/map.yml b/public/site/blueprints/pages/map.yml
index 0349133..65d6662 100644
--- a/public/site/blueprints/pages/map.yml
+++ b/public/site/blueprints/pages/map.yml
@@ -7,26 +7,21 @@ columns:
       fields:
         type: fields
         fields:
-          blueprint: fields/blueprint
+          tags:
+            label: Mots-clés
+            type: tags
+          text:
+            label: Présentation de la carte
+            type: writer
           mapdata:
             label: Carte
             type: map-editor
             defaultCenter: [43.836699, 4.360054]
             defaultZoom: 13
             maxMarkers: 50
-          intro:
-            label: Présentation de la carte
-            type: writer
   sidebar:
     width: 1/3
     sections:
-      tagsSection:
-        type: fields
-        fields:
-          emptyField:
-            type: gap
-          secondEmptyField:
-            type: gap
-          tags:
-            label: Mots-clés
-            type: tags
+      files:
+        label: Fichiers
+        type: files
diff --git a/public/site/blueprints/pages/narrative.yml b/public/site/blueprints/pages/narrative.yml
index 23dc680..ee1cdee 100644
--- a/public/site/blueprints/pages/narrative.yml
+++ b/public/site/blueprints/pages/narrative.yml
@@ -1,51 +1,44 @@
-title: Récit
+title: Narrative
 
-tabs:
-  contentTab:
-    label: Contenu
-    columns:
-      main:
-        width: 2/3
-        sections:
-          fields:
-            type: fields
-            fields:
-              blueprint: fields/blueprint
-              author:
-                label: Auteur·ice(s)
-                type: text
-                width: 1/2
-              cover:
-                label: Image de couverture
-                type: files
-                query: page.coverFiles
-                text: "{{ file.coverLabel }}"
-                multiple: false
-                width: 1/2
-              introduction:
-                label: Introduction
-                type: writer
-          parts:
-            label: Parties
-            type: pages
-            template:
-              - map
-              - geoformat
-            info: "{{ page.blueprint.title }}"
-      sidebar:
-        width: 1/3
-        sections:
-          files:
-            label: Fichiers
+columns:
+  main:
+    width: 2/3
+    sections:
+      fields:
+        type: fields
+        fields:
+          blueprint:
+            type: headline
+            label: Page "{{ page.intendedTemplate }}"
+          author:
+            label: Auteur·ice(s)
+            type: text
+            width: 1/2
+          cover:
+            label: Image de couverture
             type: files
-  CSSTab:
-    label: CSS
-    icon: brush
-    fields:
-      customCss:
-        label: Custom CSS
-        type: code-editor
-        language: css
-        help: Custom CSS styling for this narrative's print view
-        theme: monokai
-        size: large
+            multiple: false
+            width: 1/2
+          introduction:
+            label: Introduction
+            type: writer
+          customCss:
+            label: Custom CSS
+            type: code-editor
+            language: css
+            help: Custom CSS styling for this narrative's print view
+            theme: monokai
+            size: large
+      pages:
+        label: Pages
+        type: pages
+        template:
+          - map
+          - geoformat
+        info: "{{ page.intendedTemplate }}"
+  sidebar:
+    width: 1/3
+    sections:
+      files:
+        label: Fichiers
+        type: files
diff --git a/public/site/blueprints/pages/project.yml b/public/site/blueprints/pages/projet.yml
similarity index 93%
rename from public/site/blueprints/pages/project.yml
rename to public/site/blueprints/pages/projet.yml
index 32de087..fbcac36 100644
--- a/public/site/blueprints/pages/project.yml
+++ b/public/site/blueprints/pages/projet.yml
@@ -7,7 +7,6 @@ columns:
       fields:
         type: fields
         fields:
-          blueprint: fields/blueprint
           subtitle:
             label: Sous-titre
             type: text
diff --git a/public/site/blueprints/site.yml b/public/site/blueprints/site.yml
index 8c1294f..915996f 100644
--- a/public/site/blueprints/site.yml
+++ b/public/site/blueprints/site.yml
@@ -13,7 +13,7 @@ tabs:
             label: Projets
             type: pages
             templates:
-              - project
+              - projet
       secondary: 
         width: 1/2
         sections:
diff --git a/public/site/blueprints/tabs/files.yml b/public/site/blueprints/tabs/files.yml
deleted file mode 100644
index be2f551..0000000
--- a/public/site/blueprints/tabs/files.yml
+++ /dev/null
@@ -1,15 +0,0 @@
-label: Fichiers
-icon: attachment
-columns:
-  - width: 1/4
-    fields:
-      manageFilesInfo:
-        label: false
-        type: info
-        text: À droite, tous les fichiers que stocke la page. Pensez à supprimer les fichiers inutilisés éviter de surcharger inutilement le serveur.
-
-  - width: 3/4
-    sections:
-      filesSection:
-        label: Fichiers
-        type: files
diff --git a/public/site/plugins/cover-files/index.php b/public/site/plugins/cover-files/index.php
deleted file mode 100644
index f17a27e..0000000
--- a/public/site/plugins/cover-files/index.php
+++ /dev/null
@@ -1,19 +0,0 @@
-<?php
-
-Kirby::plugin('geoproject/cover-files', [
-    'pageMethods' => [
-        'coverFiles' => function () {
-            return $this->files()->add(
-                $this->children()->filterBy('intendedTemplate', 'map')->files()
-            );
-        }
-    ],
-    'fileMethods' => [
-        'coverLabel' => function () {
-            if ($this->parent()->intendedTemplate()->name() === 'map') {
-                return 'Carte "' . $this->parent()->title() . '"';
-            }
-            return $this->filename();
-        }
-    ]
-]);
diff --git a/public/site/plugins/virtual-print-page/index.php b/public/site/plugins/virtual-print-page/index.php
index 0bea7cf..9240cea 100644
--- a/public/site/plugins/virtual-print-page/index.php
+++ b/public/site/plugins/virtual-print-page/index.php
@@ -3,7 +3,7 @@
  * Virtual Print Page Plugin
  *
  * Creates a virtual /print page for each narrative
- * Allows access to print editor via /project/narrative/print
+ * Allows access to print editor via /projet/narrative/print
  */
 
 use Kirby\Cms\Page;
diff --git a/public/site/templates/narrative.json.php b/public/site/templates/narrative.json.php
index e4ab738..3da5296 100644
--- a/public/site/templates/narrative.json.php
+++ b/public/site/templates/narrative.json.php
@@ -1,7 +1,7 @@
 <?php
 /**
  * JSON template to expose narrative data
- * Accessible via /project/narrative.json or /project/narrative?format=json
+ * Accessible via /projet/narrative.json or /projet/narrative?format=json
  */
 
 header('Content-Type: application/json; charset=utf-8');
@@ -106,14 +106,9 @@ function parseBlocks($blocksField, $page) {
                 break;
 
             case 'map':
-                $mapPage = $block->map()->toPages()->first();
-                if ($mapPage) {
-                    $blockData['content'] = parseMap($mapPage);
-                } else {
-                    $blockData['content'] = [
-                        'map' => $block->map()->value()
-                    ];
-                }
+                $blockData['content'] = [
+                    'map' => $block->map()->value()
+                ];
                 break;
 
             default:
@@ -127,53 +122,31 @@ function parseBlocks($blocksField, $page) {
 }
 
 /**
- * Parse a chapter
+ * Parse un chapitre
  */
-function parseChapter($chapter) {
+function parseChapitre($chapitre) {
     return [
-        'id' => $chapter->id(),
-        'uuid' => $chapter->uuid()->toString(),
-        'template' => 'chapter',
-        'title' => $chapter->title()->value(),
-        'slug' => $chapter->slug(),
-        'blocks' => parseBlocks($chapter->text(), $chapter)
+        'id' => $chapitre->id(),
+        'uuid' => $chapitre->uuid()->toString(),
+        'template' => 'chapitre',
+        'title' => $chapitre->title()->value(),
+        'slug' => $chapitre->slug(),
+        'blocks' => parseBlocks($chapitre->text(), $chapitre)
     ];
 }
 
 /**
- * Parse a marker
+ * Parse une carte
  */
-function parseMarker($marker) {
+function parseCarte($carte) {
     return [
-        'title'    => $marker->title()->value(),
-        'cover'    => resolveFileUrl($marker->cover(), $marker),
-        'icon'     => $marker->markerIcon()->toFile() ? $marker->markerIcon()->toFile()->url() : null,
-        'iconSize' => $marker->markerIconSize()->value() ?? 40,
-        'blocks'   => parseBlocks($marker->text(), $marker)
-    ];
-}
-
-/**
- * Parse a map
- */
-function parseMap($map) {
-    $markers = [];
-    foreach ($map->children()->listed() as $child) {
-        if ($child->intendedTemplate()->name() === 'marker') {
-            $markers[] = parseMarker($child);
-        }
-    }
-    $staticImage = $map->file('map-static.png');
-    return [
-        'id'       => $map->id(),
-        'uuid'     => $map->uuid()->toString(),
+        'id' => $carte->id(),
+        'uuid' => $carte->uuid()->toString(),
         'template' => 'carte',
-        'title'    => $map->title()->value(),
-        'slug'     => $map->slug(),
-        'tags'     => $map->tags()->isNotEmpty() ? $map->tags()->split() : [],
-        'image'    => $staticImage ? $staticImage->url() : null,
-        'intro'    => resolveImagesInHtml($map->text()->value(), $map),
-        'markers'  => $markers
+        'title' => $carte->title()->value(),
+        'slug' => $carte->slug(),
+        'tags' => $carte->tags()->isNotEmpty() ? $carte->tags()->split() : [],
+        'text' => resolveImagesInHtml($carte->text()->value(), $carte)
     ];
 }
 
@@ -181,13 +154,10 @@ function parseMap($map) {
  * Parse un geoformat
  */
 function parseGeoformat($geoformat) {
-    $children = [];
+    $chapitres = [];
     foreach ($geoformat->children()->listed() as $child) {
-        $template = $child->intendedTemplate()->name();
-        if ($template === 'chapter') {
-            $children[] = parseChapter($child);
-        } elseif ($template === 'map') {
-            $children[] = parseMap($child);
+        if ($child->intendedTemplate()->name() === 'chapitre') {
+            $chapitres[] = parseChapitre($child);
         }
     }
 
@@ -201,7 +171,7 @@ function parseGeoformat($geoformat) {
         'tags' => $geoformat->tags()->isNotEmpty() ? $geoformat->tags()->split() : [],
         'cover' => resolveFileUrl($geoformat->cover(), $geoformat),
         'text' => resolveImagesInHtml($geoformat->text()->value(), $geoformat),
-        'children' => $children
+        'children' => $chapitres
     ];
 }
 
@@ -227,8 +197,8 @@ foreach ($page->children()->listed() as $child) {
 
     if ($template === 'geoformat') {
         $data['children'][] = parseGeoformat($child);
-    } elseif ($template === 'map') {
-        $data['children'][] = parseMap($child);
+    } elseif ($template === 'carte') {
+        $data['children'][] = parseCarte($child);
     }
 }
 
diff --git a/public/site/templates/print.php b/public/site/templates/print.php
index ab8e7e3..3d9870c 100644
--- a/public/site/templates/print.php
+++ b/public/site/templates/print.php
@@ -1,7 +1,7 @@
 <?php
 /**
  * Template for Vue.js print editor
- * Route: /project/narrative/print
+ * Route: /projet/narrative/print
  *
  * This template loads the Vue app and passes the parent narrative JSON URL
  */
diff --git a/src/components/ElementPopup.vue b/src/components/ElementPopup.vue
index 1b7c329..7baae2b 100644
--- a/src/components/ElementPopup.vue
+++ b/src/components/ElementPopup.vue
@@ -1,192 +1,277 @@
 <template>
-  <BasePopup
-    ref="basePopup"
+  <div
+    v-if="visible"
     id="element-popup"
-    :display-css="displayedCss"
-    :editable-css="elementCss"
-    :popup-width="800"
-    :popup-height="600"
-    @close="close"
-    @css-input="handleCssInput"
-    @toggle-inheritance="toggleInheritance"
+    class="settings-popup"
+    :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
-    <template #header-left>
-      <span class="element-label">{{ selector || '' }}</span>
-      <span class="instance-count">{{ elementInstanceCount }} instances</span>
-    </template>
+    <div class="popup-header">
+      <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>
 
-    <template #controls>
-      <!-- Font Family -->
-      <div class="settings-subsection">
-        <div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
-          <label class="label-with-tooltip" data-css="font-family">Police</label>
-          <div class="field-with-option">
-            <select v-model="fontFamily" :disabled="inheritanceLocked">
-              <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
+    <div class="popup-body">
+      <!-- Left: Controls -->
+      <div class="popup-controls">
+        <!-- Font Family -->
+        <div class="settings-subsection">
+          <div class="field field-font" :class="{ 'field--view-only': inheritanceLocked }">
+            <label class="label-with-tooltip" data-css="font-family">Police</label>
+            <div class="field-with-option">
+              <select v-model="fontFamily.value" :disabled="inheritanceLocked">
+                <option v-for="f in fonts" :key="f" :value="f">{{ f }}</option>
+              </select>
+              <div class="field-checkbox">
+                <input type="checkbox" v-model="fontStyle.italic" :disabled="inheritanceLocked" />
+                <label class="label-with-tooltip" data-css="font-style">Italique</label>
+              </div>
+            </div>
+          </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>
+            <UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
+          </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">
+              <NumberInput
+                v-model="fontSize.value"
+                :min="0"
+                :step="1"
+                :disabled="inheritanceLocked"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: fontSize.unit === 'px' }"
+                  :disabled="inheritanceLocked"
+                  @click="updateFontSizeUnit('px')"
+                >
+                  px
+                </button>
+                <!-- <button
+                  type="button"
+                  :class="{ active: fontSize.unit === 'em' }"
+                  :disabled="inheritanceLocked"
+                  @click="updateFontSizeUnit('em')"
+                >
+                  em
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: fontSize.unit === 'rem' }"
+                  :disabled="inheritanceLocked"
+                  @click="updateFontSizeUnit('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 class="field-checkbox">
-              <input type="checkbox" v-model="italic" :disabled="inheritanceLocked" />
-              <label class="label-with-tooltip" data-css="font-style">Italique</label>
-            </div>
           </div>
         </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>
-          <UnitToggle v-model="fontWeightString" :units="weights" :disabled="inheritanceLocked" />
-        </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">
-            <NumberInput
-              v-model="fontSize.value"
-              :min="0"
-              :step="1"
-              :disabled="inheritanceLocked"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: fontSize.unit === 'px' }"
+        <!-- Color -->
+        <div class="settings-subsection">
+          <div class="field field-simple" :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"
-                @click="updateUnitPropUnit(fontSize, 'px')"
-              >
-                px
-              </button>
+                data-coloris
+              />
             </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" :disabled="inheritanceLocked">
-            <option value="left">Gauche</option>
-            <option value="center">Centre</option>
-            <option value="right">Droite</option>
-            <option value="justify">Justifié</option>
-          </select>
+        <!-- Background -->
+        <div class="settings-subsection">
+          <div class="field field-simple" :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">
+              <NumberInput
+                v-model="marginOuter.value"
+                :min="0"
+                :step="1"
+                :disabled="inheritanceLocked"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: marginOuter.unit === 'mm' }"
+                  :disabled="inheritanceLocked"
+                  @click="updateMarginOuterUnit('mm')"
+                >
+                  mm
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: marginOuter.unit === 'px' }"
+                  :disabled="inheritanceLocked"
+                  @click="updateMarginOuterUnit('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">
+              <NumberInput
+                v-model="paddingInner.value"
+                :min="0"
+                :step="1"
+                :disabled="inheritanceLocked"
+              />
+              <div class="unit-toggle">
+                <button
+                  type="button"
+                  :class="{ active: paddingInner.unit === 'mm' }"
+                  :disabled="inheritanceLocked"
+                  @click="updatePaddingInnerUnit('mm')"
+                >
+                  mm
+                </button>
+                <button
+                  type="button"
+                  :class="{ active: paddingInner.unit === 'px' }"
+                  :disabled="inheritanceLocked"
+                  @click="updatePaddingInnerUnit('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>
       </div>
 
-      <!-- Color -->
-      <div class="settings-subsection">
-        <div class="field field-simple" :class="{ 'field--view-only': inheritanceLocked }">
-          <label class="label-with-tooltip" data-css="color">Couleur</label>
-          <div class="input-with-color">
+      <!-- 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
-              ref="colorInput"
-              type="text"
-              v-model="color"
-              :disabled="inheritanceLocked"
-              data-coloris
-            />
-          </div>
-        </div>
-      </div>
-
-      <!-- Background -->
-      <div class="settings-subsection">
-        <div class="field field-simple" :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"
-              :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">
-            <NumberInput
-              v-model="marginOuter.value"
-              :min="0"
-              :step="1"
+              type="checkbox"
+              v-model="isEditable"
               :disabled="inheritanceLocked"
             />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: marginOuter.unit === 'mm' }"
-                :disabled="inheritanceLocked"
-                @click="updateUnitPropUnit(marginOuter, 'mm')"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: marginOuter.unit === 'px' }"
-                :disabled="inheritanceLocked"
-                @click="updateUnitPropUnit(marginOuter, 'px')"
-              >
-                px
-              </button>
-            </div>
-          </div>
+            <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>
-
-      <!-- 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">
-            <NumberInput
-              v-model="paddingInner.value"
-              :min="0"
-              :step="1"
-              :disabled="inheritanceLocked"
-            />
-            <div class="unit-toggle">
-              <button
-                type="button"
-                :class="{ active: paddingInner.unit === 'mm' }"
-                :disabled="inheritanceLocked"
-                @click="updateUnitPropUnit(paddingInner, 'mm')"
-              >
-                mm
-              </button>
-              <button
-                type="button"
-                :class="{ active: paddingInner.unit === 'px' }"
-                :disabled="inheritanceLocked"
-                @click="updateUnitPropUnit(paddingInner, 'px')"
-              >
-                px
-              </button>
-            </div>
-          </div>
-        </div>
-      </div>
-    </template>
-  </BasePopup>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, reactive, computed, watch, nextTick } from 'vue';
+import { ref, computed, watch, nextTick } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import { usePopupPosition } from '../composables/usePopupPosition';
 import { useDebounce } from '../composables/useDebounce';
 import NumberInput from './ui/NumberInput.vue';
 import UnitToggle from './ui/UnitToggle.vue';
-import BasePopup from './ui/BasePopup.vue';
 import { convertUnit } from '../utils/unit-conversion';
+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();
 
@@ -196,74 +281,76 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
-const basePopup = ref(null);
+const POPUP_WIDTH = 800;
+const POPUP_HEIGHT = 600;
 
-const visible = computed(() => basePopup.value?.visible ?? false);
-const inheritanceLocked = computed(() => basePopup.value?.inheritanceLocked ?? true);
+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 elementInstanceCount = ref(0);
+const elementInstanceCount = ref(0); // Count of similar elements
+const isEditable = ref(false);
+const inheritanceLocked = ref(true);
 const colorInput = ref(null);
 const backgroundInput = ref(null);
 
 let isUpdatingFromStore = false;
 const { debouncedUpdate } = useDebounce(500);
 
-// Style properties — flat refs for simple values, reactive for value+unit
-const fontFamily = ref('Alegreya Sans');
-const italic = ref(false);
-const fontWeight = ref(400);
-const textAlign = ref('left');
-const color = ref('rgb(0, 0, 0)');
-const background = ref('transparent');
-const fontSize = reactive({ value: 23, unit: 'px' });
-const marginOuter = reactive({ value: 0, unit: 'mm' });
-const paddingInner = reactive({ value: 0, unit: 'mm' });
+// 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' });
 
 // Constants
 const fonts = ['Alegreya Sans', 'Alegreya', 'Arial', 'Georgia', 'Times New Roman'];
 const weights = ['200', '300', '400', '600', '800'];
 
+// Computed to adapt fontWeight for UnitToggle
 const fontWeightString = computed({
-  get: () => String(fontWeight.value),
-  set: (val) => { fontWeight.value = parseInt(val); }
+  get: () => String(fontWeight.value.value),
+  set: (val) => {
+    fontWeight.value.value = parseInt(val);
+  }
 });
 
-// Style property descriptors
-const styleProps = [
-  { css: 'font-family', get: () => fontFamily.value, set: v => fontFamily.value = v.replace(/['"]/g, ''), debounce: false },
-  { css: 'font-style', get: () => italic.value ? 'italic' : 'normal', set: v => italic.value = v === 'italic', debounce: false },
-  { css: 'font-weight', get: () => fontWeight.value, set: v => fontWeight.value = parseInt(v), debounce: false },
-  { css: 'text-align', get: () => textAlign.value, set: v => textAlign.value = v, debounce: false },
-  { css: 'color', get: () => color.value, set: v => color.value = v, debounce: true },
-  { css: 'background', get: () => background.value, set: v => background.value = v, debounce: true },
-];
-
-const unitProps = [
-  { css: 'font-size', ref: fontSize, debounce: true },
-  { css: 'margin', ref: marginOuter, debounce: true },
-  { css: 'padding', ref: paddingInner, debounce: true },
-];
-
-// Generic update: push a single property to the stylesheet store
-const updateProp = (cssProp, value, unit) => {
-  if (!selector.value) return;
-  stylesheetStore.updateProperty(selector.value, cssProp, value, unit);
+const immediateUpdate = (callback) => {
+  callback();
 };
 
-const updateUnitPropUnit = (prop, newUnit) => {
-  prop.value = convertUnit(prop.value, prop.unit, newUnit);
-  prop.unit = newUnit;
+const updateFontSizeUnit = (newUnit) => {
+  fontSize.value.value = convertUnit(fontSize.value.value, fontSize.value.unit, newUnit);
+  fontSize.value.unit = newUnit;
+};
+
+const updateMarginOuterUnit = (newUnit) => {
+  marginOuter.value.value = convertUnit(marginOuter.value.value, marginOuter.value.unit, newUnit);
+  marginOuter.value.unit = newUnit;
+};
+
+const updatePaddingInnerUnit = (newUnit) => {
+  paddingInner.value.value = convertUnit(paddingInner.value.value, paddingInner.value.unit, newUnit);
+  paddingInner.value.unit = newUnit;
 };
 
 const getSelectorFromElement = (element) => {
+  // Try to build a meaningful selector
   if (element.id) {
     return `#${element.id}`;
   }
 
+  // Get tag name
   const tagName = element.tagName.toLowerCase();
 
+  // Get first class if available (filter out state classes)
   const classes = Array.from(element.classList).filter(
     (cls) => !['element-hovered', 'element-selected', 'page-hovered', 'page-selected'].includes(cls)
   );
@@ -274,37 +361,63 @@ const getSelectorFromElement = (element) => {
   return tagName;
 };
 
-const getInstanceCount = (sel) => {
+const getInstanceCount = (selector) => {
   if (!props.iframeRef || !props.iframeRef.contentDocument) return 0;
 
   try {
-    return props.iframeRef.contentDocument.querySelectorAll(sel).length;
+    const elements = props.iframeRef.contentDocument.querySelectorAll(selector);
+    return elements.length;
   } catch (e) {
     return 0;
   }
 };
 
+const selectorTag = computed(() => {
+  return selector.value || '';
+});
+
+const instanceCount = computed(() => {
+  return elementInstanceCount.value;
+});
+
 const elementCss = computed(() => {
   if (!selector.value) return '';
   return stylesheetStore.extractBlock(selector.value) || '';
 });
 
+// Generate a preview CSS block from current field values
 const generatePreviewCss = () => {
   if (!selector.value) return '';
 
   const properties = [];
 
-  for (const prop of styleProps) {
-    const val = prop.get();
-    if (val && (prop.css !== 'font-style' || val === 'italic')) {
-      properties.push(`  ${prop.css}: ${val};`);
-    }
+  // Include all properties with their current values
+  if (fontFamily.value.value) {
+    properties.push(`  font-family: ${fontFamily.value.value};`);
   }
-
-  for (const prop of unitProps) {
-    if (prop.ref.value !== undefined && prop.ref.value !== null) {
-      properties.push(`  ${prop.css}: ${prop.ref.value}${prop.ref.unit};`);
-    }
+  if (fontStyle.value.italic) {
+    properties.push(`  font-style: italic;`);
+  }
+  if (fontWeight.value.value) {
+    properties.push(`  font-weight: ${fontWeight.value.value};`);
+  }
+  if (fontSize.value.value) {
+    properties.push(`  font-size: ${fontSize.value.value}${fontSize.value.unit};`);
+  }
+  if (textAlign.value.value) {
+    properties.push(`  text-align: ${textAlign.value.value};`);
+  }
+  if (color.value.value) {
+    properties.push(`  color: ${color.value.value};`);
+  }
+  if (background.value.value) {
+    properties.push(`  background: ${background.value.value};`);
+  }
+  if (marginOuter.value.value !== undefined && marginOuter.value.value !== null) {
+    properties.push(`  margin: ${marginOuter.value.value}${marginOuter.value.unit};`);
+  }
+  if (paddingInner.value.value !== undefined && paddingInner.value.value !== null) {
+    properties.push(`  padding: ${paddingInner.value.value}${paddingInner.value.unit};`);
   }
 
   if (properties.length === 0) return '';
@@ -315,10 +428,12 @@ const generatePreviewCss = () => {
 const displayedCss = computed(() => {
   if (!selector.value) return '';
 
+  // If unlocked, show the actual CSS block from stylesheet
   if (!inheritanceLocked.value) {
     return elementCss.value || generatePreviewCss();
   }
 
+  // If locked, show commented preview of what would be applied
   const preview = generatePreviewCss();
   if (!preview) return '';
 
@@ -327,53 +442,186 @@ const displayedCss = computed(() => {
          ' */';
 });
 
+// Remove the element-specific CSS block to restore inheritance
+const removeElementBlock = () => {
+  if (!selector.value) return;
+
+  const block = stylesheetStore.extractBlock(selector.value);
+  if (block) {
+    // Escape special regex characters in selector
+    const escaped = selector.value.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+    // Remove the block and any surrounding whitespace
+    stylesheetStore.replaceInCustomCss(
+      new RegExp(`\\n?${escaped}\\s*\\{[^}]*\\}\\n?`),
+      '\n'
+    );
+  }
+};
+
+const highlightedCss = computed(() => {
+  if (!displayedCss.value) return '';
+  return hljs.highlight(displayedCss.value, { language: 'css' }).value;
+});
+
+// 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);
+};
+
+// Apply all current field values to create/update the CSS block
 const applyAllStyles = () => {
   if (!selector.value) return;
-  for (const prop of styleProps) {
-    updateProp(prop.css, prop.get());
-  }
-  for (const prop of unitProps) {
-    updateProp(prop.css, prop.ref.value, prop.ref.unit);
-  }
+
+  updateFontFamily();
+  updateFontStyle();
+  updateFontWeight();
+  updateFontSize();
+  updateTextAlign();
+  updateColor();
+  updateBackground();
+  updateMarginOuter();
+  updatePaddingInner();
 };
 
-// Watchers — simple props
-for (const prop of styleProps) {
-  watch(prop.get, () => {
-    if (isUpdatingFromStore) return;
-    const fn = () => updateProp(prop.css, prop.get());
-    prop.debounce ? debouncedUpdate(fn) : fn();
-  });
-}
+// Watch for changes
+watch(() => fontFamily.value.value, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateFontFamily);
+});
 
-// Watchers — unit props (watch both value and unit)
-for (const prop of unitProps) {
-  watch(() => prop.ref.value, () => {
-    if (isUpdatingFromStore) return;
-    const fn = () => updateProp(prop.css, prop.ref.value, prop.ref.unit);
-    prop.debounce ? debouncedUpdate(fn) : fn();
-  });
-  watch(() => prop.ref.unit, () => {
-    if (isUpdatingFromStore) return;
-    updateProp(prop.css, prop.ref.value, prop.ref.unit);
-  });
-}
+watch(() => fontStyle.value.italic, () => {
+  if (isUpdatingFromStore) return;
+  immediateUpdate(updateFontStyle);
+});
 
-const handleCssInput = (newCss) => {
-  const oldBlock = elementCss.value;
-  if (oldBlock) {
-    stylesheetStore.replaceInCustomCss(oldBlock, newCss);
+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) => {
+  const newCss = event.target.value;
+
+  if (cssDebounceTimer) {
+    clearTimeout(cssDebounceTimer);
   }
+
+  cssDebounceTimer = setTimeout(() => {
+    const oldBlock = elementCss.value;
+    if (oldBlock) {
+      stylesheetStore.replaceInCustomCss(oldBlock, newCss);
+    }
+  }, 500);
 };
 
+// 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.formatCustomCss();
+  }
+});
+
 // Watch stylesheet changes to sync values
 watch(
   () => stylesheetStore.customCss,
   () => {
-    if (basePopup.value?.visible && !isUpdatingFromStore) {
+    if (visible.value && !isUpdatingFromStore) {
       isUpdatingFromStore = true;
       loadValuesFromStylesheet();
-      nextTick(() => { isUpdatingFromStore = false; });
+      nextTick(() => {
+        isUpdatingFromStore = false;
+      });
     }
   }
 );
@@ -382,10 +630,13 @@ watch(
 watch(
   () => stylesheetStore.isEditing,
   (isEditing, wasEditing) => {
-    if (basePopup.value?.visible && wasEditing && !isEditing && !isUpdatingFromStore) {
+    // When exiting edit mode, reload values
+    if (visible.value && wasEditing && !isEditing && !isUpdatingFromStore) {
       isUpdatingFromStore = true;
       loadValuesFromStylesheet();
-      nextTick(() => { isUpdatingFromStore = false; });
+      nextTick(() => {
+        isUpdatingFromStore = false;
+      });
     }
   }
 );
@@ -394,22 +645,67 @@ const loadValuesFromStylesheet = () => {
   if (!selector.value) return;
 
   try {
-    // Simple props
-    for (const prop of styleProps) {
-      const data = stylesheetStore.extractValue(selector.value, prop.css);
-      if (data) {
-        const value = typeof data === 'string' ? data : data.value;
-        prop.set(value);
-      }
+    // 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, '');
     }
 
-    // Unit props
-    for (const prop of unitProps) {
-      const data = stylesheetStore.extractValue(selector.value, prop.css);
-      if (data && data.value !== undefined) {
-        prop.ref.value = data.value;
-        prop.ref.unit = data.unit;
-      }
+    // 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);
@@ -417,24 +713,75 @@ const loadValuesFromStylesheet = () => {
 };
 
 const open = (element, event, count = null) => {
+  // Block all watchers during initialization
   isUpdatingFromStore = true;
 
   selectedElement.value = element;
   selector.value = getSelectorFromElement(element);
+  position.value = calculatePosition(event);
 
+  // Store instance count if provided, otherwise calculate it
   elementInstanceCount.value = count !== null ? count : getInstanceCount(selector.value);
 
+  // Detect inheritance state from CSS block state
   const blockState = stylesheetStore.getBlockState(selector.value);
-  basePopup.value.inheritanceLocked = blockState !== 'active';
 
+  if (blockState === 'active') {
+    // Block exists and is active (not commented) → unlocked
+    inheritanceLocked.value = false;
+  } else if (blockState === 'commented') {
+    // Block exists but is commented → locked with custom values
+    inheritanceLocked.value = true;
+  } else {
+    // No block → locked with inherited values
+    inheritanceLocked.value = true;
+  }
+
+  // Load values from stylesheet (includes commented blocks)
   loadValuesFromStylesheet();
-  basePopup.value.open(event);
 
-  nextTick(() => { isUpdatingFromStore = false; });
+  visible.value = true;
+
+  // Re-enable watchers after initialization (use nextTick to ensure watchers see the flag)
+  nextTick(() => {
+    isUpdatingFromStore = false;
+  });
+
+  // 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 = () => {
-  basePopup.value?.close();
+  visible.value = false;
+  isEditable.value = false;
   selector.value = '';
   selectedElement.value = null;
   emit('close');
@@ -448,7 +795,8 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
     return;
   }
 
-  if (basePopup.value?.visible) {
+  // If popup is already open, just close it instead of opening a new one
+  if (visible.value) {
     close();
     return;
   }
@@ -459,49 +807,67 @@ const handleIframeClick = (event, targetElement = null, elementCount = null) =>
 const toggleInheritance = () => {
   const blockState = stylesheetStore.getBlockState(selector.value);
 
-  if (basePopup.value.inheritanceLocked && blockState === 'commented') {
+  if (inheritanceLocked.value && blockState === 'commented') {
+    // Case 1: Locked with commented block → Uncomment to unlock
     stylesheetStore.uncommentCssBlock(selector.value);
-    basePopup.value.inheritanceLocked = false;
-  } else if (basePopup.value.inheritanceLocked && blockState === 'none') {
+    inheritanceLocked.value = false;
+  } else if (inheritanceLocked.value && blockState === 'none') {
+    // Case 2: Locked with no custom CSS → Capture computed values and create block
     if (selectedElement.value && props.iframeRef && props.iframeRef.contentWindow) {
-      const cs = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
+      const computed = props.iframeRef.contentWindow.getComputedStyle(selectedElement.value);
 
+      // Update fields with computed values before creating the block
       isUpdatingFromStore = true;
 
-      fontFamily.value = cs.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
-      italic.value = cs.fontStyle === 'italic';
-      fontWeight.value = parseInt(cs.fontWeight);
+      // Font family
+      fontFamily.value.value = computed.fontFamily.replace(/['"]/g, '').split(',')[0].trim();
 
-      const fontSizeMatch = cs.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
+      // Font style
+      fontStyle.value.italic = computed.fontStyle === 'italic';
+
+      // Font weight
+      fontWeight.value.value = parseInt(computed.fontWeight);
+
+      // Font size
+      const fontSizeMatch = computed.fontSize.match(/([\d.]+)(px|rem|em|pt)/);
       if (fontSizeMatch) {
-        fontSize.value = parseFloat(fontSizeMatch[1]);
-        fontSize.unit = fontSizeMatch[2];
+        fontSize.value.value = parseFloat(fontSizeMatch[1]);
+        fontSize.value.unit = fontSizeMatch[2];
       }
 
-      textAlign.value = cs.textAlign;
-      color.value = cs.color;
-      background.value = cs.backgroundColor;
+      // Text align
+      textAlign.value.value = computed.textAlign;
 
-      const marginMatch = cs.marginTop.match(/([\d.]+)(px|mm|pt)/);
+      // Color
+      color.value.value = computed.color;
+
+      // Background
+      background.value.value = computed.backgroundColor;
+
+      // Margin (take the top margin)
+      const marginMatch = computed.marginTop.match(/([\d.]+)(px|mm|pt)/);
       if (marginMatch) {
-        marginOuter.value = parseFloat(marginMatch[1]);
-        marginOuter.unit = marginMatch[2];
+        marginOuter.value.value = parseFloat(marginMatch[1]);
+        marginOuter.value.unit = marginMatch[2];
       }
 
-      const paddingMatch = cs.paddingTop.match(/([\d.]+)(px|mm|pt)/);
+      // Padding (take the top padding)
+      const paddingMatch = computed.paddingTop.match(/([\d.]+)(px|mm|pt)/);
       if (paddingMatch) {
-        paddingInner.value = parseFloat(paddingMatch[1]);
-        paddingInner.unit = paddingMatch[2];
+        paddingInner.value.value = parseFloat(paddingMatch[1]);
+        paddingInner.value.unit = paddingMatch[2];
       }
 
       isUpdatingFromStore = false;
     }
 
+    // Now create the block with captured values
     applyAllStyles();
-    basePopup.value.inheritanceLocked = false;
-  } else if (!basePopup.value.inheritanceLocked && blockState === 'active') {
+    inheritanceLocked.value = false;
+  } else if (!inheritanceLocked.value && blockState === 'active') {
+    // Case 3: Unlocked with active block → Comment to lock
     stylesheetStore.commentCssBlock(selector.value);
-    basePopup.value.inheritanceLocked = true;
+    inheritanceLocked.value = true;
   }
 };
 
diff --git a/src/components/PagePopup.vue b/src/components/PagePopup.vue
index fcaebae..8c78480 100644
--- a/src/components/PagePopup.vue
+++ b/src/components/PagePopup.vue
@@ -1,202 +1,301 @@
 <template>
-  <BasePopup
-    ref="basePopup"
+  <div
+    v-if="visible"
     id="page-popup"
-    :display-css="displayedCss"
-    :editable-css="pageCss"
-    :popup-width="550"
-    :popup-height="600"
-    @close="close"
-    @css-input="handleCssInput"
-    @toggle-inheritance="toggleInheritance"
+    class="settings-popup"
+    :style="{ top: position.y + 'px', left: position.x + 'px' }"
   >
-    <template #header-left>
-      <span class="page-label">@page</span>
-      <span class="page-name">{{ templateName || 'default' }}</span>
-      <span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
-    </template>
+    <div class="popup-header">
+      <div class="header-left">
+        <span class="page-label">@page</span>
+        <span class="page-name">{{ templateName || 'default' }}</span>
+        <span class="page-count">{{ pageCount }} page{{ pageCount > 1 ? 's' : '' }}</span>
+      </div>
+      <button class="close-btn" @click="close">×</button>
+    </div>
 
-    <template #controls>
-      <!-- Margins -->
-      <div class="settings-subsection">
-        <h4>Marges</h4>
-        <div class="margin-grid">
-          <div
-            class="field"
-            :class="{ 'field--view-only': inheritanceLocked }"
-          >
-            <label class="label-with-tooltip" data-css="margin-top">Haut</label>
-            <div class="input-with-unit">
-              <NumberInput
-                v-model="margins.top.value"
-                :min="0"
-                :step="1"
-                :disabled="inheritanceLocked"
-              />
-              <div class="unit-toggle">
-                <button
-                  type="button"
-                  :class="{ active: margins.top.unit === 'mm' }"
+    <div class="popup-body">
+      <!-- Left: Controls -->
+      <div class="popup-controls">
+        <!-- Margins -->
+        <div class="settings-subsection">
+          <h4>Marges</h4>
+          <div class="margin-grid">
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-top">Haut</label>
+              <div class="input-with-unit">
+                <NumberInput
+                  v-model="margins.top.value"
+                  :min="0"
+                  :step="1"
                   :disabled="inheritanceLocked"
-                  @click="margins.top.unit = 'mm'"
-                >
-                  mm
-                </button>
-                <button
-                  type="button"
-                  :class="{ active: margins.top.unit === 'px' }"
-                  :disabled="inheritanceLocked"
-                  @click="margins.top.unit = 'px'"
-                >
-                  px
-                </button>
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.top.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.top.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <!-- <button
+                    type="button"
+                    :class="{ active: margins.top.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.top.unit = 'rem'"
+                  >
+                    rem
+                  </button> -->
+                </div>
               </div>
             </div>
-          </div>
 
-          <div
-            class="field"
-            :class="{ 'field--view-only': inheritanceLocked }"
-          >
-            <label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
-            <div class="input-with-unit">
-              <NumberInput
-                v-model="margins.bottom.value"
-                :min="0"
-                :step="1"
-                :disabled="inheritanceLocked"
-              />
-              <div class="unit-toggle">
-                <button
-                  type="button"
-                  :class="{ active: margins.bottom.unit === 'mm' }"
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-bottom">Bas</label>
+              <div class="input-with-unit">
+                <NumberInput
+                  v-model="margins.bottom.value"
+                  :min="0"
+                  :step="1"
                   :disabled="inheritanceLocked"
-                  @click="margins.bottom.unit = 'mm'"
-                >
-                  mm
-                </button>
-                <button
-                  type="button"
-                  :class="{ active: margins.bottom.unit === 'px' }"
-                  :disabled="inheritanceLocked"
-                  @click="margins.bottom.unit = 'px'"
-                >
-                  px
-                </button>
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.bottom.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.bottom.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <!-- <button
+                    type="button"
+                    :class="{ active: margins.bottom.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.bottom.unit = 'rem'"
+                  >
+                    rem
+                  </button> -->
+                </div>
               </div>
             </div>
-          </div>
 
-          <div
-            class="field"
-            :class="{ 'field--view-only': inheritanceLocked }"
-          >
-            <label class="label-with-tooltip" data-css="margin-left">Gauche</label>
-            <div class="input-with-unit">
-              <NumberInput
-                v-model="margins.left.value"
-                :min="0"
-                :step="1"
-                :disabled="inheritanceLocked"
-              />
-              <div class="unit-toggle">
-                <button
-                  type="button"
-                  :class="{ active: margins.left.unit === 'mm' }"
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-left">Gauche</label>
+              <div class="input-with-unit">
+                <NumberInput
+                  v-model="margins.left.value"
+                  :min="0"
+                  :step="1"
                   :disabled="inheritanceLocked"
-                  @click="margins.left.unit = 'mm'"
-                >
-                  mm
-                </button>
-                <button
-                  type="button"
-                  :class="{ active: margins.left.unit === 'px' }"
-                  :disabled="inheritanceLocked"
-                  @click="margins.left.unit = 'px'"
-                >
-                  px
-                </button>
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.left.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.left.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <!-- <button
+                    type="button"
+                    :class="{ active: margins.left.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.left.unit = 'rem'"
+                  >
+                    rem
+                  </button> -->
+                </div>
               </div>
             </div>
-          </div>
 
-          <div
-            class="field"
-            :class="{ 'field--view-only': inheritanceLocked }"
-          >
-            <label class="label-with-tooltip" data-css="margin-right">Droite</label>
-            <div class="input-with-unit">
-              <NumberInput
-                v-model="margins.right.value"
-                :min="0"
-                :step="1"
-                :disabled="inheritanceLocked"
-              />
-              <div class="unit-toggle">
-                <button
-                  type="button"
-                  :class="{ active: margins.right.unit === 'mm' }"
+            <div
+              class="field"
+              :class="{ 'field--view-only': inheritanceLocked }"
+            >
+              <label class="label-with-tooltip" data-css="margin-right">Droite</label>
+              <div class="input-with-unit">
+                <NumberInput
+                  v-model="margins.right.value"
+                  :min="0"
+                  :step="1"
                   :disabled="inheritanceLocked"
-                  @click="margins.right.unit = 'mm'"
-                >
-                  mm
-                </button>
-                <button
-                  type="button"
-                  :class="{ active: margins.right.unit === 'px' }"
-                  :disabled="inheritanceLocked"
-                  @click="margins.right.unit = 'px'"
-                >
-                  px
-                </button>
+                />
+                <div class="unit-toggle">
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'mm' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.right.unit = 'mm'"
+                  >
+                    mm
+                  </button>
+                  <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'px' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.right.unit = 'px'"
+                  >
+                    px
+                  </button>
+                  <!-- <button
+                    type="button"
+                    :class="{ active: margins.right.unit === 'rem' }"
+                    :disabled="inheritanceLocked"
+                    @click="margins.right.unit = 'rem'"
+                  >
+                    rem
+                  </button> -->
+                </div>
               </div>
             </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="backgroundColorInput"
+                type="text"
+                v-model="background.value"
+                :disabled="inheritanceLocked"
+                data-coloris
+              />
+            </div>
+          </div>
+        </div>
+
+        <!-- Patterns -->
+        <div class="settings-subsection">
+          <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>
+              <option value="grid">Grille</option>
+            </select>
+          </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>
       </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">
+      <!-- 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
-              ref="backgroundColorInput"
-              type="text"
-              v-model="background.value"
+              type="checkbox"
+              v-model="isEditable"
               :disabled="inheritanceLocked"
-              data-coloris
             />
-          </div>
+            <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="pageCss"
+          @input="handleCssInput"
+          :disabled="inheritanceLocked"
+          spellcheck="false"
+        ></textarea>
       </div>
-
-      <!-- Patterns -->
-      <div class="settings-subsection">
-        <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>
-            <option value="grid">Grille</option>
-          </select>
-        </div>
-      </div>
-    </template>
-  </BasePopup>
+    </div>
+  </div>
 </template>
 
 <script setup>
-import { ref, computed, watch } from 'vue';
+import { ref, computed, watch, onMounted } from 'vue';
 import { useStylesheetStore } from '../stores/stylesheet';
+import { usePopupPosition } from '../composables/usePopupPosition';
 import { useDebounce } from '../composables/useDebounce';
-import { useCssSync } from '../composables/useCssSync';
 import NumberInput from './ui/NumberInput.vue';
-import BasePopup from './ui/BasePopup.vue';
+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();
-const { extractSpacing } = useCssSync();
 
 const props = defineProps({
   iframeRef: Object,
@@ -204,14 +303,13 @@ const props = defineProps({
 
 const emit = defineEmits(['close']);
 
-const basePopup = ref(null);
-
-const visible = computed(() => basePopup.value?.visible ?? false);
-const inheritanceLocked = computed(() => basePopup.value?.inheritanceLocked ?? true);
-
+const visible = ref(false);
+const position = ref({ x: 0, y: 0 });
 const selectedPageElement = ref(null);
 const pageCount = ref(0);
 const templateName = ref('');
+const isEditable = ref(false);
+const inheritanceLocked = ref(true);
 const backgroundColorInput = ref(null);
 
 let isUpdatingFromStore = false;
@@ -235,6 +333,11 @@ const immediateUpdate = (callback) => {
   callback();
 };
 
+const POPUP_WIDTH = 550;
+const POPUP_HEIGHT = 600;
+
+const { calculatePosition } = usePopupPosition(POPUP_WIDTH, POPUP_HEIGHT);
+
 // Get the selector for the current template's @page rule
 const getTemplateSelector = () => {
   return templateName.value ? `@page ${templateName.value}` : '@page';
@@ -246,8 +349,10 @@ const getOrCreateTemplateBlock = () => {
   let block = stylesheetStore.extractBlock(selector);
 
   if (!block && templateName.value) {
+    // Create new block with current values from @page
     const baseBlock = stylesheetStore.extractBlock('@page');
     if (baseBlock) {
+      // Insert the new template block after @page
       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 newBlock = `\n@page ${templateName.value} {\n  margin: ${marginValue};${background.value.value ? `\n  background: ${background.value.value};` : ''}\n}\n`;
 
@@ -270,6 +375,7 @@ const removeTemplateBlock = () => {
   const block = stylesheetStore.extractBlock(selector);
 
   if (block) {
+    // Remove the block and any surrounding whitespace
     stylesheetStore.replaceInCustomCss(
       new RegExp(`\\n?${selector.replace(/[.*+?^${}()|[\]\\]/g, '\\$&')}\\s*\\{[^}]*\\}\\n?`),
       '\n'
@@ -278,6 +384,7 @@ const removeTemplateBlock = () => {
 };
 
 const updateMargins = (force = false) => {
+  // Only update if inheritance is unlocked (unless forced)
   if (!force && inheritanceLocked.value) return;
 
   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}`;
@@ -285,6 +392,8 @@ const updateMargins = (force = false) => {
   const currentBlock = getOrCreateTemplateBlock();
   if (!currentBlock) return;
 
+  const selector = getTemplateSelector();
+
   if (currentBlock.includes('margin:')) {
     const updatedBlock = currentBlock.replace(
       /(margin:\s*)[^;]+/,
@@ -307,6 +416,7 @@ const updateMargins = (force = false) => {
 };
 
 const updateBackground = (force = false) => {
+  // Only update if inheritance is unlocked (unless forced)
   if (!force && inheritanceLocked.value) return;
   if (!background.value.value) return;
 
@@ -381,27 +491,37 @@ const loadValuesFromStylesheet = () => {
   try {
     isUpdatingFromStore = true;
 
-    // Use extractSpacing from useCssSync
-    const spacing = extractSpacing('@page', 'margin');
-    if (spacing?.detailed) {
-      margins.value.top = spacing.detailed.top;
-      margins.value.right = spacing.detailed.right;
-      margins.value.bottom = spacing.detailed.bottom;
-      margins.value.left = spacing.detailed.left;
-    } else if (spacing?.simple) {
-      margins.value.top = { ...spacing.simple };
-      margins.value.right = { ...spacing.simple };
-      margins.value.bottom = { ...spacing.simple };
-      margins.value.left = { ...spacing.simple };
+    // Extract values from @page block (same logic as PageSettings)
+    const pageBlock = stylesheetStore.extractBlock('@page');
+    if (!pageBlock) return;
+
+    // Parse margins with regex (top right bottom left)
+    const marginMatch = pageBlock.match(
+      /margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
+    );
+    if (marginMatch) {
+      margins.value.top = {
+        value: parseFloat(marginMatch[1]),
+        unit: marginMatch[2],
+      };
+      margins.value.right = {
+        value: parseFloat(marginMatch[3]),
+        unit: marginMatch[4],
+      };
+      margins.value.bottom = {
+        value: parseFloat(marginMatch[5]),
+        unit: marginMatch[6],
+      };
+      margins.value.left = {
+        value: parseFloat(marginMatch[7]),
+        unit: marginMatch[8],
+      };
     }
 
     // Extract background
-    const pageBlock = stylesheetStore.extractBlock('@page');
-    if (pageBlock) {
-      const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
-      if (bgMatch) {
-        background.value.value = bgMatch[1].trim();
-      }
+    const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
+    if (bgMatch) {
+      background.value.value = bgMatch[1].trim();
     }
   } catch (error) {
     console.error('Error loading values from stylesheet:', error);
@@ -413,61 +533,100 @@ const loadValuesFromStylesheet = () => {
 const open = (pageElement, event, count = 1) => {
   selectedPageElement.value = pageElement;
   pageCount.value = count;
+  position.value = calculatePosition(event);
 
   // Extract template name from data-page-type attribute
   templateName.value = pageElement.getAttribute('data-page-type') || '';
 
   // Read inheritance state from page element's data attribute
-  basePopup.value.inheritanceLocked = pageElement.dataset.inheritanceUnlocked !== 'true';
+  inheritanceLocked.value = pageElement.dataset.inheritanceUnlocked !== 'true';
 
   // Load values from stylesheet (@page block)
   loadValuesFromStylesheet();
 
-  // Open popup (sets visible, position, inits Coloris)
-  basePopup.value.open(event);
+  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 = () => {
   selectedPageElement.value = null;
-  basePopup.value?.close();
+  visible.value = false;
+  isEditable.value = false;
   emit('close');
 };
 
 const toggleInheritance = () => {
-  const wasLocked = basePopup.value.inheritanceLocked;
-  basePopup.value.inheritanceLocked = !wasLocked;
+  const wasLocked = inheritanceLocked.value;
+  inheritanceLocked.value = !inheritanceLocked.value;
 
+  // Store the inheritance state in the page element's data attribute
   if (selectedPageElement.value) {
-    if (basePopup.value.inheritanceLocked) {
+    if (inheritanceLocked.value) {
       delete selectedPageElement.value.dataset.inheritanceUnlocked;
     } else {
       selectedPageElement.value.dataset.inheritanceUnlocked = 'true';
     }
   }
 
-  if (basePopup.value.inheritanceLocked && !wasLocked) {
+  if (inheritanceLocked.value && !wasLocked) {
+    // Re-locking: remove the template-specific block
     removeTemplateBlock();
-  } else if (!basePopup.value.inheritanceLocked && wasLocked) {
+  } else if (!inheritanceLocked.value && wasLocked) {
+    // Unlocking: apply all current field values to create the CSS block
     applyAllStyles();
   }
 };
 
 const pageCss = computed(() => {
-  if (!basePopup.value?.inheritanceLocked && templateName.value) {
+  // Show template-specific block if unlocked and exists, otherwise show @page
+  if (!inheritanceLocked.value && templateName.value) {
     const templateBlock = stylesheetStore.extractBlock(`@page ${templateName.value}`);
     if (templateBlock) return templateBlock;
   }
   return stylesheetStore.extractBlock('@page') || '';
 });
 
+// Generate a preview CSS block from current field values
 const generatePreviewCss = () => {
   if (!templateName.value) return '';
 
   const properties = [];
 
+  // Always include margin with current values
   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}`;
   properties.push(`  margin: ${marginValue};`);
 
+  // Include background if it has a value
   if (background.value.value) {
     properties.push(`  background: ${background.value.value};`);
   }
@@ -478,11 +637,14 @@ const generatePreviewCss = () => {
 };
 
 const displayedCss = computed(() => {
-  if (!basePopup.value?.inheritanceLocked) {
+  // If unlocked, show the actual CSS block from stylesheet
+  if (!inheritanceLocked.value) {
     return pageCss.value;
   }
 
+  // If locked, show commented preview of what would be applied
   if (!templateName.value) {
+    // For base @page, just show it normally
     return pageCss.value;
   }
 
@@ -494,18 +656,47 @@ const displayedCss = computed(() => {
          ' */';
 });
 
-const handleCssInput = (newCss) => {
-  const oldBlock = pageCss.value;
-  if (oldBlock) {
-    stylesheetStore.replaceInCustomCss(oldBlock, newCss);
+const highlightedCss = computed(() => {
+  if (!displayedCss.value) return '';
+  return hljs.highlight(displayedCss.value, { language: 'css' }).value;
+});
+
+let cssDebounceTimer = null;
+
+const handleCssInput = (event) => {
+  const newCss = event.target.value;
+
+  if (cssDebounceTimer) {
+    clearTimeout(cssDebounceTimer);
   }
+
+  cssDebounceTimer = setTimeout(() => {
+    // Get the actual CSS block (not the commented preview)
+    const oldBlock = pageCss.value;
+    if (oldBlock) {
+      stylesheetStore.replaceInCustomCss(
+        oldBlock,
+        newCss
+      );
+    }
+  }, 500);
 };
 
+// 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.formatCustomCss();
+  }
+});
+
 // Watch stylesheet changes to sync values
 watch(
   () => stylesheetStore.content,
   () => {
-    if (basePopup.value?.visible && !stylesheetStore.isEditing) {
+    if (visible.value && !stylesheetStore.isEditing) {
       loadValuesFromStylesheet();
     }
   }
diff --git a/src/components/PagedJsWrapper.vue b/src/components/PagedJsWrapper.vue
index 24c82d3..a87fc54 100644
--- a/src/components/PagedJsWrapper.vue
+++ b/src/components/PagedJsWrapper.vue
@@ -40,10 +40,10 @@
         <div v-if="item.text" class="chapeau" v-html="item.text"></div>
       </section>
 
-      <!-- Chapter -->
+      <!-- Chapitre -->
       <section
-        v-else-if="item.template === 'chapter'"
-        class="chapter"
+        v-else-if="item.template === 'chapitre'"
+        class="chapitre"
         :data-page-type="item.template"
       >
         <h3>{{ item.title }}</h3>
@@ -63,40 +63,11 @@
         class="carte"
         :data-page-type="item.template"
       >
-        <h4>{{ item.title }}</h4>
-        <img v-if="item.image" :src="item.image" class="carte-image" alt="" />
+        <h2>{{ item.title }}</h2>
         <div v-if="item.tags && item.tags.length" class="tags">
           <span v-for="tag in item.tags" :key="tag" class="tag">{{ tag }}</span>
         </div>
-        <div v-if="item.intro" class="intro" v-html="item.intro"></div>
-        <div v-if="item.markers && item.markers.length" class="markers">
-          <div v-for="(marker, idx) in item.markers" :key="idx" class="marker">
-            <h5 class="marker-title">
-              <img
-                v-if="marker.icon"
-                :src="marker.icon"
-                class="marker-icon"
-                alt=""
-              />
-              <img
-                v-else
-                src="/assets/svg/marker-pin.svg"
-                class="marker-icon"
-                alt=""
-              />
-              {{ marker.title }}
-            </h5>
-            <img v-if="marker.cover" :src="marker.cover" class="marker-cover" alt="" />
-            <template v-if="marker.blocks">
-              <component
-                v-for="block in visibleBlocks(marker.blocks)"
-                :key="block.id"
-                :is="getBlockComponent(block.type)"
-                :content="block.content"
-              />
-            </template>
-          </div>
-        </div>
+        <div v-if="item.text" class="carte-content" v-html="item.text"></div>
       </section>
     </template>
   </template>
@@ -145,7 +116,7 @@ const getBlockComponent = (type) => {
 /* Base print styles for content sections */
 .narrative-cover,
 .geoformat,
-.chapter,
+.chapitre,
 .carte {
   break-before: page;
 }
@@ -215,34 +186,9 @@ const getBlockComponent = (type) => {
 }
 
 .block-map {
-  break-before: page;
-}
-
-.carte-image {
-  max-width: 100%;
-  height: auto;
-}
-
-.marker {
-  margin-top: 1.5rem;
-}
-
-.marker-title {
-  display: flex;
-  align-items: center;
-  gap: 0.5rem;
-}
-
-.marker-icon {
-  width: 24px;
-  height: 24px;
-  flex-shrink: 0;
-  object-fit: contain;
-}
-
-.marker-cover {
-  max-width: 100%;
-  height: auto;
-  margin: 0.5rem 0;
+  background: #f5f5f5;
+  padding: 2rem;
+  text-align: center;
+  border: 1px dashed #ccc;
 }
 </style>
diff --git a/src/components/blocks/MapBlock.vue b/src/components/blocks/MapBlock.vue
index e8ce9b9..92f6041 100644
--- a/src/components/blocks/MapBlock.vue
+++ b/src/components/blocks/MapBlock.vue
@@ -1,80 +1,14 @@
 <template>
-  <div
-    v-if="content.template === 'carte'"
-    class="block-map"
-    :data-slug="content.slug"
-  >
-    <h4>{{ content.title }}</h4>
-    <img v-if="content.image" :src="content.image" class="carte-image" alt="" />
-    <div v-if="content.tags && content.tags.length" class="tags">
-      <span v-for="tag in content.tags" :key="tag" class="tag">{{ tag }}</span>
-    </div>
-    <div v-if="content.intro" class="intro" v-html="content.intro"></div>
-    <div v-if="content.markers && content.markers.length" class="markers">
-      <div v-for="(marker, idx) in content.markers" :key="idx" class="marker">
-        <h5 class="marker-title">
-          <img
-            v-if="marker.icon"
-            :src="marker.icon"
-            class="marker-icon"
-            alt=""
-          />
-          <img
-            v-else
-            src="/assets/svg/marker-pin.svg"
-            class="marker-icon"
-            alt=""
-          />
-          {{ marker.title }}
-        </h5>
-        <img
-          v-if="marker.cover"
-          :src="marker.cover"
-          class="marker-cover"
-          alt=""
-        />
-        <template v-if="marker.blocks">
-          <component
-            v-for="block in visibleBlocks(marker.blocks)"
-            :key="block.id"
-            :is="getBlockComponent(block.type)"
-            :content="block.content"
-          />
-        </template>
-      </div>
-    </div>
-  </div>
-  <div v-else class="block-map">
+  <div class="block-map">
     <p class="map-placeholder">[Carte: {{ content.map }}]</p>
   </div>
 </template>
 
 <script setup>
-import TextBlock from './TextBlock.vue';
-import HeadingBlock from './HeadingBlock.vue';
-import ImageBlock from './ImageBlock.vue';
-import ListBlock from './ListBlock.vue';
-import QuoteBlock from './QuoteBlock.vue';
-
 defineProps({
   content: {
     type: Object,
-    required: true,
-  },
+    required: true
+  }
 });
-
-const visibleBlocks = (blocks) => {
-  return blocks.filter((block) => !block.isHidden);
-};
-
-const getBlockComponent = (type) => {
-  const components = {
-    text: TextBlock,
-    heading: HeadingBlock,
-    image: ImageBlock,
-    list: ListBlock,
-    quote: QuoteBlock,
-  };
-  return components[type] || TextBlock;
-};
 </script>
diff --git a/src/components/editor/PageSettings.vue b/src/components/editor/PageSettings.vue
index 23e3477..c90c04c 100644
--- a/src/components/editor/PageSettings.vue
+++ b/src/components/editor/PageSettings.vue
@@ -319,14 +319,13 @@
 import { ref, computed, watch, onMounted, inject } from 'vue';
 import { useStylesheetStore } from '../../stores/stylesheet';
 import { useDebounce } from '../../composables/useDebounce';
-import { useCssSync } from '../../composables/useCssSync';
-import { initColoris } from '../../composables/useColoris';
+import Coloris from '@melloware/coloris';
 import NumberInput from '../ui/NumberInput.vue';
 import { convertUnit } from '../../utils/unit-conversion';
+import '@melloware/coloris/dist/coloris.css';
 
 const stylesheetStore = useStylesheetStore();
 const { debouncedUpdate } = useDebounce(500);
-const { extractSpacing } = useCssSync();
 const backgroundColorInput = ref(null);
 const activeTab = inject('activeTab', ref('document'));
 
@@ -622,17 +621,26 @@ const syncFromStore = () => {
       }
     }
 
-    const spacing = extractSpacing('@page', 'margin');
-    if (spacing?.detailed) {
-      margins.value.top = spacing.detailed.top;
-      margins.value.right = spacing.detailed.right;
-      margins.value.bottom = spacing.detailed.bottom;
-      margins.value.left = spacing.detailed.left;
-    } else if (spacing?.simple) {
-      margins.value.top = { ...spacing.simple };
-      margins.value.right = { ...spacing.simple };
-      margins.value.bottom = { ...spacing.simple };
-      margins.value.left = { ...spacing.simple };
+    const marginMatch = pageBlock.match(
+      /margin:\s*([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)\s+([0-9.]+)([a-z]+)/i
+    );
+    if (marginMatch) {
+      margins.value.top = {
+        value: parseFloat(marginMatch[1]),
+        unit: marginMatch[2],
+      };
+      margins.value.right = {
+        value: parseFloat(marginMatch[3]),
+        unit: marginMatch[4],
+      };
+      margins.value.bottom = {
+        value: parseFloat(marginMatch[5]),
+        unit: marginMatch[6],
+      };
+      margins.value.left = {
+        value: parseFloat(marginMatch[7]),
+        unit: marginMatch[8],
+      };
     }
 
     const bgMatch = pageBlock.match(/background:\s*([^;]+)/);
@@ -697,7 +705,34 @@ watch(activeTab, (newTab, oldTab) => {
 onMounted(() => {
   syncFromStore();
 
-  initColoris();
+  // Initialize Coloris
+  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',
+    ],
+  });
 
   // Initialize button color if value exists
   if (background.value.value) {
diff --git a/src/components/editor/TextSettings.vue b/src/components/editor/TextSettings.vue
index e7da376..bc6dde1 100644
--- a/src/components/editor/TextSettings.vue
+++ b/src/components/editor/TextSettings.vue
@@ -372,14 +372,14 @@
 
 <script setup>
 import { ref, watch, onMounted } from 'vue';
-import { initColoris } from '../../composables/useColoris';
+import Coloris from '@melloware/coloris';
 import UnitToggle from '../ui/UnitToggle.vue';
 import InputWithUnit from '../ui/InputWithUnit.vue';
 import NumberInput from '../ui/NumberInput.vue';
 import { useCssUpdater } from '../../composables/useCssUpdater';
 import { useCssSync } from '../../composables/useCssSync';
 import { useDebounce } from '../../composables/useDebounce';
-import { useLinkedSpacing } from '../../composables/useLinkedSpacing';
+import { convertUnit } from '../../utils/unit-conversion';
 
 const { updateStyle, setMargin, setDetailedMargins, setPadding, setDetailedPadding } = useCssUpdater();
 const { extractValue, extractNumericValue, extractSpacing } = useCssSync();
@@ -406,39 +406,59 @@ const background = ref('transparent');
 const colorInput = ref(null);
 const backgroundInput = ref(null);
 
+const marginOuterDetailed = ref({
+  top: { value: 0, unit: 'mm' },
+  right: { value: 0, unit: 'mm' },
+  bottom: { value: 24, unit: 'mm' },
+  left: { value: 0, unit: 'mm' }
+});
+
+const marginInnerDetailed = ref({
+  top: { value: 0, unit: 'mm' },
+  right: { value: 0, unit: 'mm' },
+  bottom: { value: 0, unit: 'mm' },
+  left: { value: 0, unit: 'mm' }
+});
+
+const marginOuterLinked = ref(false);
+const marginInnerLinked = ref(false);
+
+// Track previous values to detect which one changed
+const prevMarginOuter = ref({
+  top: 0,
+  right: 0,
+  bottom: 24,
+  left: 0
+});
+
+const prevMarginInner = ref({
+  top: 0,
+  right: 0,
+  bottom: 0,
+  left: 0
+});
+
 let isUpdatingFromStore = false;
 
-const {
-  sides: marginOuterDetailed,
-  linked: marginOuterLinked,
-  updateUnit: updateMarginOuterUnit,
-  setFromSpacing: setMarginOuterFromSpacing,
-} = useLinkedSpacing({
-  initialValues: {
-    top: { value: 0, unit: 'mm' },
-    right: { value: 0, unit: 'mm' },
-    bottom: { value: 24, unit: 'mm' },
-    left: { value: 0, unit: 'mm' },
-  },
-  isUpdatingFromStore: () => isUpdatingFromStore,
-  debouncedUpdate,
-  onUpdate: (s) => {
-    setDetailedMargins('p', s.top, s.right, s.bottom, s.left);
-  },
-});
+// Update margin outer unit for all sides with conversion
+const updateMarginOuterUnit = (newUnit) => {
+  const sides = ['top', 'right', 'bottom', 'left'];
+  sides.forEach((side) => {
+    const s = marginOuterDetailed.value[side];
+    s.value = convertUnit(s.value, s.unit, newUnit);
+    s.unit = newUnit;
+  });
+};
 
-const {
-  sides: marginInnerDetailed,
-  linked: marginInnerLinked,
-  updateUnit: updateMarginInnerUnit,
-  setFromSpacing: setMarginInnerFromSpacing,
-} = useLinkedSpacing({
-  isUpdatingFromStore: () => isUpdatingFromStore,
-  debouncedUpdate,
-  onUpdate: (s) => {
-    setDetailedPadding('p', s.top, s.right, s.bottom, s.left);
-  },
-});
+// Update margin inner unit for all sides with conversion
+const updateMarginInnerUnit = (newUnit) => {
+  const sides = ['top', 'right', 'bottom', 'left'];
+  sides.forEach((side) => {
+    const s = marginInnerDetailed.value[side];
+    s.value = convertUnit(s.value, s.unit, newUnit);
+    s.unit = newUnit;
+  });
+};
 
 // Watchers for body styles
 watch(font, (val) => {
@@ -479,6 +499,160 @@ watch(fontSize, (val) => {
   });
 }, { deep: true });
 
+// Watch when link is toggled
+watch(marginOuterLinked, (isLinked) => {
+  if (isLinked) {
+    // When linking, sync all to the first non-zero value or top value
+    const current = marginOuterDetailed.value;
+    const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
+
+    isUpdatingFromStore = true;
+    marginOuterDetailed.value.top.value = syncValue;
+    marginOuterDetailed.value.bottom.value = syncValue;
+    marginOuterDetailed.value.left.value = syncValue;
+    marginOuterDetailed.value.right.value = syncValue;
+
+    prevMarginOuter.value.top = syncValue;
+    prevMarginOuter.value.bottom = syncValue;
+    prevMarginOuter.value.left = syncValue;
+    prevMarginOuter.value.right = syncValue;
+    isUpdatingFromStore = false;
+  }
+});
+
+watch(marginInnerLinked, (isLinked) => {
+  if (isLinked) {
+    // When linking, sync all to the first non-zero value or top value
+    const current = marginInnerDetailed.value;
+    const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
+
+    isUpdatingFromStore = true;
+    marginInnerDetailed.value.top.value = syncValue;
+    marginInnerDetailed.value.bottom.value = syncValue;
+    marginInnerDetailed.value.left.value = syncValue;
+    marginInnerDetailed.value.right.value = syncValue;
+
+    prevMarginInner.value.top = syncValue;
+    prevMarginInner.value.bottom = syncValue;
+    prevMarginInner.value.left = syncValue;
+    prevMarginInner.value.right = syncValue;
+    isUpdatingFromStore = false;
+  }
+});
+
+// Watch margin outer values
+watch(() => [
+  marginOuterDetailed.value.top.value,
+  marginOuterDetailed.value.bottom.value,
+  marginOuterDetailed.value.left.value,
+  marginOuterDetailed.value.right.value,
+], () => {
+  if (isUpdatingFromStore) return;
+
+  // If linked, sync all values to the one that changed
+  if (marginOuterLinked.value) {
+    const current = {
+      top: marginOuterDetailed.value.top.value,
+      bottom: marginOuterDetailed.value.bottom.value,
+      left: marginOuterDetailed.value.left.value,
+      right: marginOuterDetailed.value.right.value,
+    };
+
+    // Find which value actually changed by comparing with previous
+    let changedValue = null;
+    if (current.top !== prevMarginOuter.value.top) changedValue = current.top;
+    else if (current.bottom !== prevMarginOuter.value.bottom) changedValue = current.bottom;
+    else if (current.left !== prevMarginOuter.value.left) changedValue = current.left;
+    else if (current.right !== prevMarginOuter.value.right) changedValue = current.right;
+
+    if (changedValue !== null) {
+      isUpdatingFromStore = true;
+      marginOuterDetailed.value.top.value = changedValue;
+      marginOuterDetailed.value.bottom.value = changedValue;
+      marginOuterDetailed.value.left.value = changedValue;
+      marginOuterDetailed.value.right.value = changedValue;
+
+      // Update previous values
+      prevMarginOuter.value.top = changedValue;
+      prevMarginOuter.value.bottom = changedValue;
+      prevMarginOuter.value.left = changedValue;
+      prevMarginOuter.value.right = changedValue;
+      isUpdatingFromStore = false;
+    }
+  } else {
+    // Update previous values even when not linked
+    prevMarginOuter.value.top = marginOuterDetailed.value.top.value;
+    prevMarginOuter.value.bottom = marginOuterDetailed.value.bottom.value;
+    prevMarginOuter.value.left = marginOuterDetailed.value.left.value;
+    prevMarginOuter.value.right = marginOuterDetailed.value.right.value;
+  }
+
+  debouncedUpdate(() => {
+    setDetailedMargins('p',
+      marginOuterDetailed.value.top,
+      marginOuterDetailed.value.right,
+      marginOuterDetailed.value.bottom,
+      marginOuterDetailed.value.left
+    );
+  });
+});
+
+// Watch margin inner values
+watch(() => [
+  marginInnerDetailed.value.top.value,
+  marginInnerDetailed.value.bottom.value,
+  marginInnerDetailed.value.left.value,
+  marginInnerDetailed.value.right.value,
+], () => {
+  if (isUpdatingFromStore) return;
+
+  // If linked, sync all values to the one that changed
+  if (marginInnerLinked.value) {
+    const current = {
+      top: marginInnerDetailed.value.top.value,
+      bottom: marginInnerDetailed.value.bottom.value,
+      left: marginInnerDetailed.value.left.value,
+      right: marginInnerDetailed.value.right.value,
+    };
+
+    // Find which value actually changed by comparing with previous
+    let changedValue = null;
+    if (current.top !== prevMarginInner.value.top) changedValue = current.top;
+    else if (current.bottom !== prevMarginInner.value.bottom) changedValue = current.bottom;
+    else if (current.left !== prevMarginInner.value.left) changedValue = current.left;
+    else if (current.right !== prevMarginInner.value.right) changedValue = current.right;
+
+    if (changedValue !== null) {
+      isUpdatingFromStore = true;
+      marginInnerDetailed.value.top.value = changedValue;
+      marginInnerDetailed.value.bottom.value = changedValue;
+      marginInnerDetailed.value.left.value = changedValue;
+      marginInnerDetailed.value.right.value = changedValue;
+
+      // Update previous values
+      prevMarginInner.value.top = changedValue;
+      prevMarginInner.value.bottom = changedValue;
+      prevMarginInner.value.left = changedValue;
+      prevMarginInner.value.right = changedValue;
+      isUpdatingFromStore = false;
+    }
+  } else {
+    // Update previous values even when not linked
+    prevMarginInner.value.top = marginInnerDetailed.value.top.value;
+    prevMarginInner.value.bottom = marginInnerDetailed.value.bottom.value;
+    prevMarginInner.value.left = marginInnerDetailed.value.left.value;
+    prevMarginInner.value.right = marginInnerDetailed.value.right.value;
+  }
+
+  debouncedUpdate(() => {
+    setDetailedPadding('p',
+      marginInnerDetailed.value.top,
+      marginInnerDetailed.value.right,
+      marginInnerDetailed.value.bottom,
+      marginInnerDetailed.value.left
+    );
+  });
+});
 
 // Sync from store
 const syncFromStore = () => {
@@ -506,11 +680,70 @@ const syncFromStore = () => {
 
   // Margins
   const margins = extractSpacing('p', 'margin');
-  if (margins) setMarginOuterFromSpacing(margins);
+  if (margins) {
+    if (margins.simple) {
+      // All margins are the same
+      marginOuterDetailed.value = {
+        top: { ...margins.simple },
+        right: { ...margins.simple },
+        bottom: { ...margins.simple },
+        left: { ...margins.simple }
+      };
+      marginOuterLinked.value = true;
+    } else if (margins.detailed) {
+      marginOuterDetailed.value = margins.detailed;
+      // Check if all values are the same
+      const allSame =
+        margins.detailed.top.value === margins.detailed.right.value &&
+        margins.detailed.top.value === margins.detailed.bottom.value &&
+        margins.detailed.top.value === margins.detailed.left.value &&
+        margins.detailed.top.unit === margins.detailed.right.unit &&
+        margins.detailed.top.unit === margins.detailed.bottom.unit &&
+        margins.detailed.top.unit === margins.detailed.left.unit;
+      marginOuterLinked.value = allSame;
+    }
+  }
 
   // Padding
   const padding = extractSpacing('p', 'padding');
-  if (padding) setMarginInnerFromSpacing(padding);
+  if (padding) {
+    if (padding.simple) {
+      // All paddings are the same
+      marginInnerDetailed.value = {
+        top: { ...padding.simple },
+        right: { ...padding.simple },
+        bottom: { ...padding.simple },
+        left: { ...padding.simple }
+      };
+      marginInnerLinked.value = true;
+    } else if (padding.detailed) {
+      marginInnerDetailed.value = padding.detailed;
+      // Check if all values are the same
+      const allSame =
+        padding.detailed.top.value === padding.detailed.right.value &&
+        padding.detailed.top.value === padding.detailed.bottom.value &&
+        padding.detailed.top.value === padding.detailed.left.value &&
+        padding.detailed.top.unit === padding.detailed.right.unit &&
+        padding.detailed.top.unit === padding.detailed.bottom.unit &&
+        padding.detailed.top.unit === padding.detailed.left.unit;
+      marginInnerLinked.value = allSame;
+    }
+  }
+
+  // Update previous values to match current state
+  prevMarginOuter.value = {
+    top: marginOuterDetailed.value.top.value,
+    right: marginOuterDetailed.value.right.value,
+    bottom: marginOuterDetailed.value.bottom.value,
+    left: marginOuterDetailed.value.left.value
+  };
+
+  prevMarginInner.value = {
+    top: marginInnerDetailed.value.top.value,
+    right: marginInnerDetailed.value.right.value,
+    bottom: marginInnerDetailed.value.bottom.value,
+    left: marginInnerDetailed.value.left.value
+  };
 
   isUpdatingFromStore = false;
 };
@@ -524,9 +757,13 @@ const updateColorisButtons = () => {
 };
 
 onMounted(() => {
-  initColoris({
+  Coloris.init();
+  Coloris({
+    themeMode: 'dark',
+    alpha: true,
     format: 'auto',
-    swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent'],
+    formatToggle: true,
+    swatches: ['#000000', '#FFFFFF', '#FF0000', '#00FF00', '#0000FF', 'transparent']
   });
   syncFromStore();
   setTimeout(updateColorisButtons, 100);
diff --git a/src/components/ui/BasePopup.vue b/src/components/ui/BasePopup.vue
deleted file mode 100644
index 5ca07c0..0000000
--- a/src/components/ui/BasePopup.vue
+++ /dev/null
@@ -1,156 +0,0 @@
-<template>
-  <div
-    v-if="visible"
-    class="settings-popup"
-    :style="{ top: position.y + 'px', left: position.x + 'px' }"
-  >
-    <div class="popup-header">
-      <div class="header-left">
-        <slot name="header-left" />
-      </div>
-      <button class="close-btn" @click="$emit('close')">×</button>
-    </div>
-
-    <div class="popup-body">
-      <!-- Left: Controls -->
-      <div class="popup-controls">
-        <slot name="controls" />
-
-        <!-- Lock/Unlock Inheritance Button -->
-        <div class="settings-subsection">
-          <button class="inheritance-btn" @click="$emit('toggle-inheritance')">
-            <svg
-              v-if="inheritanceLocked"
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M19 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9V10ZM5 12V20H19V12H5ZM11 14H13V18H11V14ZM17 10V9C17 6.23858 14.7614 4 12 4C9.23858 4 7 6.23858 7 9V10H17Z"
-              ></path>
-            </svg>
-            <svg
-              v-else
-              xmlns="http://www.w3.org/2000/svg"
-              viewBox="0 0 24 24"
-              fill="currentColor"
-            >
-              <path
-                d="M7 10H20C20.5523 10 21 10.4477 21 11V21C21 21.5523 20.5523 22 20 22H4C3.44772 22 3 21.5523 3 21V11C3 10.4477 3.44772 10 4 10H5V9C5 5.13401 8.13401 2 12 2C14.7405 2 17.1131 3.5748 18.2624 5.86882L16.4731 6.76344C15.6522 5.12486 13.9575 4 12 4C9.23858 4 7 6.23858 7 9V10ZM5 12V20H19V12H5ZM10 15H14V17H10V15Z"
-              ></path>
-            </svg>
-            <span>{{
-              inheritanceLocked
-                ? "Déverrouiller l'héritage"
-                : "Verrouiller l'héritage"
-            }}</span>
-          </button>
-        </div>
-      </div>
-
-      <!-- Right: CSS Editor -->
-      <div class="popup-css">
-        <div class="css-header">
-          <span>CSS</span>
-          <label
-            class="toggle"
-            :class="{ 'field--view-only': inheritanceLocked }"
-          >
-            <span class="toggle-label">Mode édition</span>
-            <input
-              type="checkbox"
-              v-model="isEditable"
-              :disabled="inheritanceLocked"
-            />
-            <span class="toggle-switch"></span>
-          </label>
-        </div>
-        <pre
-          v-if="!isEditable"
-          class="readonly"
-        ><code class="hljs language-css" v-html="highlightedCss"></code></pre>
-        <textarea
-          v-else
-          :value="editableCss"
-          @input="handleCssInput"
-          :disabled="inheritanceLocked"
-          spellcheck="false"
-        ></textarea>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script setup>
-import { ref, computed, watch } from 'vue';
-import { useStylesheetStore } from '../../stores/stylesheet';
-import { usePopupPosition } from '../../composables/usePopupPosition';
-import { initColoris } from '../../composables/useColoris';
-import hljs from 'highlight.js/lib/core';
-import css from 'highlight.js/lib/languages/css';
-import 'highlight.js/styles/atom-one-dark.css';
-
-hljs.registerLanguage('css', css);
-
-const stylesheetStore = useStylesheetStore();
-
-const props = defineProps({
-  displayCss: { type: String, default: '' },
-  editableCss: { type: String, default: '' },
-  popupWidth: { type: Number, default: 800 },
-  popupHeight: { type: Number, default: 600 },
-});
-
-const emit = defineEmits(['close', 'css-input', 'toggle-inheritance']);
-
-const visible = ref(false);
-const position = ref({ x: 0, y: 0 });
-const isEditable = ref(false);
-const inheritanceLocked = ref(true);
-
-const { calculatePosition } = usePopupPosition(props.popupWidth, props.popupHeight);
-
-const highlightedCss = computed(() => {
-  if (!props.displayCss) return '';
-  return hljs.highlight(props.displayCss, { language: 'css' }).value;
-});
-
-let cssDebounceTimer = null;
-
-const handleCssInput = (event) => {
-  const newCss = event.target.value;
-
-  if (cssDebounceTimer) {
-    clearTimeout(cssDebounceTimer);
-  }
-
-  cssDebounceTimer = setTimeout(() => {
-    emit('css-input', newCss);
-  }, 500);
-};
-
-// Watch isEditable to format when exiting edit mode
-watch(isEditable, async (newValue, oldValue) => {
-  stylesheetStore.isEditing = newValue;
-
-  if (oldValue && !newValue) {
-    await stylesheetStore.formatCustomCss();
-  }
-});
-
-const open = (event) => {
-  position.value = calculatePosition(event);
-  visible.value = true;
-
-  // Initialize Coloris after opening
-  setTimeout(() => initColoris(), 0);
-};
-
-const close = () => {
-  visible.value = false;
-  isEditable.value = false;
-  emit('close');
-};
-
-defineExpose({ visible, position, isEditable, inheritanceLocked, open, close, calculatePosition });
-</script>
diff --git a/src/composables/useColoris.js b/src/composables/useColoris.js
deleted file mode 100644
index c589d4d..0000000
--- a/src/composables/useColoris.js
+++ /dev/null
@@ -1,34 +0,0 @@
-import Coloris from '@melloware/coloris';
-import '@melloware/coloris/dist/coloris.css';
-
-const defaultConfig = {
-  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',
-  ],
-};
-
-export function initColoris(overrides = {}) {
-  Coloris.init();
-  Coloris({ ...defaultConfig, ...overrides });
-}
diff --git a/src/composables/useLinkedSpacing.js b/src/composables/useLinkedSpacing.js
deleted file mode 100644
index 6affe41..0000000
--- a/src/composables/useLinkedSpacing.js
+++ /dev/null
@@ -1,146 +0,0 @@
-import { ref, watch } from 'vue';
-import { convertUnit } from '../utils/unit-conversion';
-
-/**
- * Composable for managing linked/unlinked spacing (margin/padding) with 4 sides.
- * @param {Object} options
- * @param {string} options.defaultUnit - Default unit for all sides (default: 'mm')
- * @param {Object} options.initialValues - Initial values for sides { top, right, bottom, left } each { value, unit }
- * @param {Function} options.onUpdate - Callback called with the detailed sides when values change
- * @param {Function} options.isUpdatingFromStore - Function that returns whether we're syncing from store
- * @param {Function} options.debouncedUpdate - Debounced update function
- */
-export function useLinkedSpacing({ defaultUnit = 'mm', initialValues, onUpdate, isUpdatingFromStore, debouncedUpdate }) {
-  const sides = ref(initialValues || {
-    top: { value: 0, unit: defaultUnit },
-    right: { value: 0, unit: defaultUnit },
-    bottom: { value: 0, unit: defaultUnit },
-    left: { value: 0, unit: defaultUnit },
-  });
-
-  const linked = ref(false);
-
-  const prevValues = ref({
-    top: sides.value.top.value,
-    right: sides.value.right.value,
-    bottom: sides.value.bottom.value,
-    left: sides.value.left.value,
-  });
-
-  const updateUnit = (newUnit) => {
-    const sideNames = ['top', 'right', 'bottom', 'left'];
-    sideNames.forEach((side) => {
-      const s = sides.value[side];
-      s.value = convertUnit(s.value, s.unit, newUnit);
-      s.unit = newUnit;
-    });
-  };
-
-  // When link is toggled on, sync all sides to first non-zero value
-  watch(linked, (isLinked) => {
-    if (!isLinked) return;
-
-    const current = sides.value;
-    const syncValue = current.top.value || current.bottom.value || current.left.value || current.right.value;
-
-    sides.value.top.value = syncValue;
-    sides.value.bottom.value = syncValue;
-    sides.value.left.value = syncValue;
-    sides.value.right.value = syncValue;
-
-    prevValues.value.top = syncValue;
-    prevValues.value.bottom = syncValue;
-    prevValues.value.left = syncValue;
-    prevValues.value.right = syncValue;
-  });
-
-  // Watch side values for linked sync + update callback
-  watch(() => [
-    sides.value.top.value,
-    sides.value.bottom.value,
-    sides.value.left.value,
-    sides.value.right.value,
-  ], () => {
-    if (isUpdatingFromStore()) return;
-
-    if (linked.value) {
-      const current = {
-        top: sides.value.top.value,
-        bottom: sides.value.bottom.value,
-        left: sides.value.left.value,
-        right: sides.value.right.value,
-      };
-
-      let changedValue = null;
-      if (current.top !== prevValues.value.top) changedValue = current.top;
-      else if (current.bottom !== prevValues.value.bottom) changedValue = current.bottom;
-      else if (current.left !== prevValues.value.left) changedValue = current.left;
-      else if (current.right !== prevValues.value.right) changedValue = current.right;
-
-      if (changedValue !== null) {
-        sides.value.top.value = changedValue;
-        sides.value.bottom.value = changedValue;
-        sides.value.left.value = changedValue;
-        sides.value.right.value = changedValue;
-
-        prevValues.value.top = changedValue;
-        prevValues.value.bottom = changedValue;
-        prevValues.value.left = changedValue;
-        prevValues.value.right = changedValue;
-      }
-    } else {
-      prevValues.value.top = sides.value.top.value;
-      prevValues.value.bottom = sides.value.bottom.value;
-      prevValues.value.left = sides.value.left.value;
-      prevValues.value.right = sides.value.right.value;
-    }
-
-    if (onUpdate) {
-      debouncedUpdate(() => {
-        onUpdate(sides.value);
-      });
-    }
-  });
-
-  /**
-   * Set all sides from extracted spacing data (from syncFromStore).
-   * Also updates prevValues and optionally sets linked state.
-   */
-  const setFromSpacing = (spacing) => {
-    if (spacing.simple) {
-      sides.value = {
-        top: { ...spacing.simple },
-        right: { ...spacing.simple },
-        bottom: { ...spacing.simple },
-        left: { ...spacing.simple },
-      };
-      linked.value = true;
-    } else if (spacing.detailed) {
-      sides.value = spacing.detailed;
-      const d = spacing.detailed;
-      const allSame =
-        d.top.value === d.right.value &&
-        d.top.value === d.bottom.value &&
-        d.top.value === d.left.value &&
-        d.top.unit === d.right.unit &&
-        d.top.unit === d.bottom.unit &&
-        d.top.unit === d.left.unit;
-      linked.value = allSame;
-    }
-
-    prevValues.value = {
-      top: sides.value.top.value,
-      right: sides.value.right.value,
-      bottom: sides.value.bottom.value,
-      left: sides.value.left.value,
-    };
-  };
-
-  return {
-    sides,
-    linked,
-    updateUnit,
-    prevValues,
-    setFromSpacing,
-  };
-}
diff --git a/src/stores/narrative.js b/src/stores/narrative.js
index 0a5fb12..766010b 100644
--- a/src/stores/narrative.js
+++ b/src/stores/narrative.js
@@ -48,10 +48,10 @@ export const useNarrativeStore = defineStore('narrative', () => {
           if (child.children && child.children.length > 0) {
             flattenChildren(child.children, depth + 1);
           }
-        } else if (child.template === 'chapter') {
+        } else if (child.template === 'chapitre') {
           items.push({
             id: child.id,
-            template: 'chapter',
+            template: 'chapitre',
             title: child.title,
             blocks: child.blocks,
           });
@@ -61,9 +61,7 @@ export const useNarrativeStore = defineStore('narrative', () => {
             template: 'carte',
             title: child.title,
             tags: child.tags,
-            image: child.image,
-            intro: child.intro,
-            markers: child.markers,
+            text: child.text,
           });
         }
       }