reglages cartes

public/assets/css/pagedjs-interface.css

@@ -193,13 +193,15 @@
 }
 
 .block-image.element-hovered,
-.geoformat-cover-image.element-hovered {
+.geoformat-cover-image.element-hovered,
+.block-carte.element-hovered {
   outline: 2px solid #0d996050 !important;
   cursor: pointer !important;
 }
 
 .block-image.element-selected,
-.geoformat-cover-image.element-selected {
+.geoformat-cover-image.element-selected,
+.block-carte.element-selected {
   outline: 2px dashed #0d9960 !important;
 }
 
@@ -217,6 +219,20 @@
   font-family: sans-serif;
 }
 
+.carte-hover-label {
+  position: absolute;
+  background: #0d9960;
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+  opacity: 0.3;
+  pointer-events: none;
+  z-index: 9999;
+  font-family: sans-serif;
+}
+
 /* Marks (to delete when merge in paged.js) */
 
 .pagedjs_marks-crop {

public/assets/svg/carte.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="currentColor"><path d="M2 5.5L9 2.5L15 5.5L22 2.5V18.5L15 21.5L9 18.5L2 21.5V5.5ZM15 19.261V7.058L9 4.058V16.261L15 19.261ZM17 19.261L21 17.594V5.739L17 7.406V19.261ZM7 16.261V4.406L3 6.073V17.928L7 16.261Z"/></svg>

src/App.vue

@@ -3,6 +3,7 @@ import PagedJsWrapper from './components/PagedJsWrapper.vue';
 import EditorPanel from './components/editor/EditorPanel.vue';
 import ElementPopup from './components/ElementPopup.vue';
 import ImagePopup from './components/ImagePopup.vue';
+import CartePopup from './components/CartePopup.vue';
 // import PagePopup from './components/PagePopup.vue'; // DISABLED: page template styling feature
 import PreviewLoader from './components/PreviewLoader.vue';
 import SaveButton from './components/SaveButton.vue';
@@ -25,6 +26,7 @@ const previewFrame1 = ref(null);
 const previewFrame2 = ref(null);
 const elementPopup = ref(null);
 const imagePopup = ref(null);
+const cartePopup = ref(null);
 // const pagePopup = ref(null); // DISABLED: page template styling feature
 const activeTab = ref('');
 
@@ -41,7 +43,8 @@ const {
   // handlePagePopupClose, // DISABLED: page template styling feature
   handleElementPopupClose,
   handleImagePopupClose,
-} = useIframeInteractions({ elementPopup, imagePopup });
+  handleCartePopupClose,
+} = useIframeInteractions({ elementPopup, imagePopup, cartePopup });
 
 // Setup preview renderer with double buffering
 const {
@@ -134,6 +137,11 @@ onMounted(async () => {
     ref="imagePopup"
     @close="handleImagePopupClose"
   />
+
+  <CartePopup
+    ref="cartePopup"
+    @close="handleCartePopupClose"
+  />
   <!-- DISABLED: page template styling feature
   <PagePopup
     ref="pagePopup"

src/components/CartePopup.vue

@@ -0,0 +1,357 @@
+<template>
+  <BasePopup
+    ref="basePopup"
+    id="carte-popup"
+    color-type="image"
+    :display-css="displayedCss"
+    :editable-css="editableCss"
+    :popup-width="440"
+    :popup-height="320"
+    :show-inheritance="false"
+    @close="handleClose"
+    @css-input="handleCssInput"
+  >
+    <template #header-left>
+      <span class="carte-label">{{ selector.replace('.block-carte.', '.') || '' }}</span>
+    </template>
+
+    <template #controls>
+
+      <!-- Largeur -->
+      <div
+        class="setting__section"
+        data-setting="width"
+        :class="{ 'setting-disabled': !widthEnabled }"
+        @click="onWidthSectionClick"
+      >
+        <div class="setting__header">
+          <input type="checkbox" id="carte-toggle-width" class="toggle-setting" :checked="widthEnabled" @change="onToggleWidth($event.target.checked)" /><label for="carte-toggle-width" aria-label="Activer le réglage de largeur" @click.stop></label>
+          <label class="label-with-tooltip" data-css="width">Largeur</label>
+        </div>
+        <div class="setting__body">
+          <InputWithUnit
+            v-model="widthModel"
+            :units="['%', 'px']"
+            :min="1"
+            :max="width.unit === 'px' ? 2000 : 200"
+            showRange
+          />
+        </div>
+        <p class="info-default">Valeur par défaut : {{ carteDefaults.width.value }}{{ carteDefaults.width.unit }}</p>
+      </div>
+
+      <!-- Hauteur -->
+      <div
+        class="setting__section"
+        data-setting="height"
+        :class="{ 'setting-disabled': !heightEnabled }"
+        @click="onHeightSectionClick"
+      >
+        <div class="setting__header">
+          <input type="checkbox" id="carte-toggle-height" class="toggle-setting" :checked="heightEnabled" @change="onToggleHeight($event.target.checked)" /><label for="carte-toggle-height" aria-label="Activer le réglage de hauteur" @click.stop></label>
+          <label class="label-with-tooltip" data-css="height">Hauteur</label>
+        </div>
+        <div class="setting__body">
+          <div class="field-checkbox" @click.stop>
+            <input type="checkbox" id="carte-height-auto" :checked="heightAuto" @change="onToggleHeightAuto(!heightAuto)" />
+            <label for="carte-height-auto">Auto</label>
+          </div>
+          <InputWithUnit
+            v-if="!heightAuto"
+            :model-value="{ value: heightPx.value, unit: heightPx.unit }"
+            @update:model-value="onHeightValueChange"
+            :units="['px']"
+            :min="1"
+            :max="800"
+            showRange
+          />
+        </div>
+        <p class="info-default">Valeur par défaut : {{ carteDefaults.height.auto ? 'auto' : carteDefaults.height.value + carteDefaults.height.unit }}</p>
+      </div>
+
+    </template>
+  </BasePopup>
+</template>
+
+<script setup>
+import { ref, reactive, computed, watch, nextTick } from 'vue';
+import InputWithUnit from './ui/InputWithUnit.vue';
+import BasePopup from './ui/BasePopup.vue';
+import { useStylesheetStore } from '../stores/stylesheet';
+import { useCarteDefaults } from '../composables/useCarteDefaults';
+import { CARTE_DEFAULTS } from '../utils/defaults';
+import { useCssUpdater } from '../composables/useCssUpdater';
+import { useDebounce } from '../composables/useDebounce';
+
+const emit = defineEmits(['close']);
+
+const stylesheetStore = useStylesheetStore();
+const carteDefaults = useCarteDefaults();
+const { updateStyle, removeProperty } = useCssUpdater();
+const { debouncedUpdate } = useDebounce(400);
+
+const basePopup = ref(null);
+const visible = computed(() => basePopup.value?.visible ?? false);
+const currentFigure = ref(null);
+
+const selector = ref('');
+
+// --- Width state ---
+const width = reactive({ value: 100, unit: '%' });
+const widthEnabled = ref(false);
+const widthCache = ref(null);
+
+// --- Height state ---
+const heightAuto = ref(true);
+const heightPx = reactive({ value: CARTE_DEFAULTS.height.value, unit: CARTE_DEFAULTS.height.unit });
+const heightEnabled = ref(false);
+const heightCache = ref(null);
+const measuredHeight = ref(null);
+
+const elementStates = new Map();
+let isUpdatingFromStore = false;
+
+// --- Models ---
+const widthModel = computed({
+  get: () => ({ value: width.value, unit: width.unit }),
+  set: (v) => { width.value = v.value; width.unit = v.unit; },
+});
+
+// --- Watchers ---
+watch(() => [width.value, width.unit], () => {
+  if (isUpdatingFromStore || !widthEnabled.value || !selector.value) return;
+  debouncedUpdate(() => {
+    stylesheetStore.updateProperty(selector.value, 'width', width.value, width.unit);
+    saveState();
+  });
+});
+
+watch(() => carteDefaults.width, (val) => {
+  if (!widthEnabled.value && widthCache.value === null) {
+    isUpdatingFromStore = true;
+    width.value = val.value; width.unit = val.unit;
+    nextTick(() => { isUpdatingFromStore = false; });
+  }
+}, { deep: true });
+
+watch(() => carteDefaults.height, (val) => {
+  if (!heightEnabled.value && heightCache.value === null) {
+    isUpdatingFromStore = true;
+    heightAuto.value = val.auto; heightPx.value = val.value; heightPx.unit = val.unit;
+    nextTick(() => { isUpdatingFromStore = false; });
+  }
+}, { deep: true });
+
+// --- Width toggle ---
+const onWidthSectionClick = () => { if (!widthEnabled.value) onToggleWidth(true); };
+
+const onToggleWidth = (enabled) => {
+  isUpdatingFromStore = true;
+  widthEnabled.value = enabled;
+  if (enabled) {
+    if (widthCache.value) { width.value = widthCache.value.value; width.unit = widthCache.value.unit; widthCache.value = null; }
+    stylesheetStore.updateProperty(selector.value, 'width', width.value, width.unit);
+  } else {
+    widthCache.value = { value: width.value, unit: width.unit };
+    removeProp('width');
+    width.value = carteDefaults.width.value; width.unit = carteDefaults.width.unit;
+  }
+  saveState();
+  nextTick(() => { isUpdatingFromStore = false; });
+};
+
+// --- Height toggle ---
+const onHeightSectionClick = () => { if (!heightEnabled.value) onToggleHeight(true); };
+
+const onToggleHeight = (enabled) => {
+  isUpdatingFromStore = true;
+  heightEnabled.value = enabled;
+  if (enabled) {
+    if (heightCache.value) {
+      heightAuto.value = heightCache.value.auto;
+      heightPx.value = heightCache.value.value; heightPx.unit = heightCache.value.unit;
+      heightCache.value = null;
+    }
+    applyHeight();
+    if (!heightAuto.value) updateStyle(`${selector.value} img`, 'height', '100%');
+  } else {
+    heightCache.value = { auto: heightAuto.value, value: heightPx.value, unit: heightPx.unit };
+    removeProp('height');
+    removeProperty(`${selector.value} img`, 'height');
+    heightAuto.value = carteDefaults.height.auto;
+    heightPx.value = carteDefaults.height.value; heightPx.unit = carteDefaults.height.unit;
+  }
+  saveState();
+  nextTick(() => { isUpdatingFromStore = false; });
+};
+
+const onToggleHeightAuto = (auto) => {
+  if (!heightEnabled.value) return;
+  isUpdatingFromStore = true;
+  if (!auto && heightAuto.value) {
+    if (measuredHeight.value === null) measuredHeight.value = getActualImageHeight();
+    heightPx.value = measuredHeight.value; heightPx.unit = 'px';
+  }
+  heightAuto.value = auto;
+  applyHeight();
+  if (!auto) { updateStyle(`${selector.value} img`, 'height', '100%'); }
+  else { removeProperty(`${selector.value} img`, 'height'); }
+  saveState();
+  nextTick(() => { isUpdatingFromStore = false; });
+};
+
+const onHeightValueChange = (v) => {
+  heightPx.value = v.value; heightPx.unit = v.unit;
+  if (isUpdatingFromStore || !heightEnabled.value || heightAuto.value || !selector.value) return;
+  measuredHeight.value = v.value;
+  debouncedUpdate(() => {
+    stylesheetStore.updateProperty(selector.value, 'height', heightPx.value, heightPx.unit);
+    saveState();
+  });
+};
+
+const getActualImageHeight = () => {
+  if (currentFigure.value) {
+    const img = currentFigure.value.querySelector('img');
+    if (img) { const h = Math.round(img.getBoundingClientRect().height); if (h > 0) return Math.min(h, 800); }
+    const figH = Math.round(currentFigure.value.getBoundingClientRect().height);
+    if (figH > 0) return Math.min(figH, 800);
+  }
+  return CARTE_DEFAULTS.height.value;
+};
+
+// --- CSS helpers ---
+const applyHeight = () => {
+  if (!selector.value) return;
+  if (heightAuto.value) { stylesheetStore.updateProperty(selector.value, 'height', 'auto'); }
+  else { stylesheetStore.updateProperty(selector.value, 'height', heightPx.value, heightPx.unit); }
+};
+
+const removeProp = (prop) => {
+  if (!selector.value) return;
+  const block = stylesheetStore.extractBlock(selector.value);
+  if (!block || !stylesheetStore.customCss.includes(block)) return;
+  const escaped = prop.replace(/[.*+?^${}()|[\]\\]/g, '\\$&');
+  const newBlock = block.replace(new RegExp(`[ \\t]*${escaped}\\s*:[^;]*;[ \\t]*\\n?`, 'g'), '');
+  const inner = newBlock.replace(/^[^{]*\{/, '').replace(/\}[^}]*$/, '');
+  if (!inner.trim()) { stylesheetStore.replaceInCustomCss(block, ''); }
+  else { stylesheetStore.replaceBlock(block, newBlock); }
+};
+
+// --- Displayed CSS ---
+const displayedCss = computed(() => {
+  if (!selector.value) return '';
+  const widthVal = `${width.value}${width.unit}`;
+  const defaultWidthVal = `${carteDefaults.width.value}${carteDefaults.width.unit}`;
+  const wComment = (!widthEnabled.value && widthVal === defaultWidthVal) ? ' /* hérité de .block-carte */' : '';
+
+  const heightVal = heightAuto.value ? 'auto' : `${heightPx.value}${heightPx.unit}`;
+  const defaultHeightVal = carteDefaults.height.auto ? 'auto' : `${carteDefaults.height.value}${carteDefaults.height.unit}`;
+  const hComment = (!heightEnabled.value && heightVal === defaultHeightVal) ? ' /* hérité de .block-carte */' : '';
+
+  return `${selector.value} {\n  width: ${widthVal};${wComment}\n  height: ${heightVal};${hComment}\n}`;
+});
+
+const editableCss = computed(() => {
+  return displayedCss.value.replace(/ \/\* hérité de \.block-carte \*\//g, '');
+});
+
+// --- CSS input ---
+const handleCssInput = (newCss) => {
+  isUpdatingFromStore = true;
+  const wm = newCss.match(/width\s*:\s*([\d.]+)(%|px)/i);
+  if (wm) { width.value = parseFloat(wm[1]); width.unit = wm[2]; }
+  const hm = newCss.match(/height\s*:\s*([^;]+)/i);
+  if (hm) {
+    const hVal = hm[1].trim();
+    if (hVal === 'auto') { heightAuto.value = true; }
+    else { const m = hVal.match(/([\d.]+)px/i); if (m) { heightAuto.value = false; heightPx.value = parseFloat(m[1]); heightPx.unit = 'px'; } }
+  }
+  const newBlock = `${selector.value} {\n  width: ${width.value}${width.unit};\n  height: ${heightAuto.value ? 'auto' : `${heightPx.value}${heightPx.unit}`};\n}\n`;
+  const oldBlock = stylesheetStore.extractBlock(selector.value) || '';
+  if (oldBlock) { stylesheetStore.replaceInCustomCss(oldBlock, newBlock); }
+  else { stylesheetStore.setCustomCss((stylesheetStore.customCss || '') + '\n' + newBlock); }
+  nextTick(() => { isUpdatingFromStore = false; });
+};
+
+// --- State persistence ---
+const saveState = () => {
+  if (!selector.value) return;
+  elementStates.set(selector.value, {
+    widthToggle: widthEnabled.value, widthCache: widthCache.value ? { ...widthCache.value } : null,
+    widthValue: { value: width.value, unit: width.unit },
+    heightToggle: heightEnabled.value, heightCache: heightCache.value ? { ...heightCache.value } : null,
+    heightAuto: heightAuto.value, heightValue: { value: heightPx.value, unit: heightPx.unit },
+  });
+};
+
+// --- Open ---
+const handleCarteClick = (figure, event) => {
+  const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-carte--'));
+  const sel = uniqueClass ? `.block-carte.${uniqueClass}` : '.block-carte';
+  if (!sel) return;
+
+  isUpdatingFromStore = true;
+  selector.value = sel;
+  currentFigure.value = figure;
+  measuredHeight.value = null;
+
+  const stored = elementStates.get(sel);
+  if (stored) {
+    widthEnabled.value = stored.widthToggle;
+    widthCache.value = stored.widthCache ? { ...stored.widthCache } : null;
+    width.value = stored.widthToggle ? stored.widthValue.value : (stored.widthCache ? stored.widthCache.value : carteDefaults.width.value);
+    width.unit = stored.widthToggle ? stored.widthValue.unit : (stored.widthCache ? stored.widthCache.unit : carteDefaults.width.unit);
+    heightEnabled.value = stored.heightToggle;
+    heightCache.value = stored.heightCache ? { ...stored.heightCache } : null;
+    heightAuto.value = stored.heightAuto;
+    heightPx.value = stored.heightToggle ? stored.heightValue.value : (stored.heightCache ? stored.heightCache.value : carteDefaults.height.value);
+    heightPx.unit = stored.heightToggle ? stored.heightValue.unit : (stored.heightCache ? stored.heightCache.unit : carteDefaults.height.unit);
+  } else {
+    widthEnabled.value = false; widthCache.value = null;
+    const wCss = stylesheetStore.extractValue(sel, 'width');
+    if (wCss && wCss.value !== undefined) {
+      width.value = wCss.value; width.unit = wCss.unit;
+      const isDefaultWidth = wCss.value === carteDefaults.width.value && wCss.unit === carteDefaults.width.unit;
+      if (!isDefaultWidth) widthEnabled.value = true;
+    } else { width.value = carteDefaults.width.value; width.unit = carteDefaults.width.unit; }
+
+    heightEnabled.value = false; heightCache.value = null;
+    const hCss = stylesheetStore.extractValue(sel, 'height');
+    const hStr = typeof hCss === 'string' ? hCss : null;
+    if (hStr === 'auto') { heightAuto.value = true; }
+    else if (hStr) {
+      const m = hStr.match(/([\d.]+)px/i);
+      if (m) { heightAuto.value = false; heightPx.value = parseFloat(m[1]); heightPx.unit = 'px'; heightEnabled.value = true; }
+      else { heightAuto.value = carteDefaults.height.auto; heightPx.value = carteDefaults.height.value; heightPx.unit = carteDefaults.height.unit; }
+    } else if (hCss && hCss.value !== undefined) {
+      heightAuto.value = false; heightPx.value = hCss.value; heightPx.unit = hCss.unit; heightEnabled.value = true;
+    } else { heightAuto.value = carteDefaults.height.auto; heightPx.value = carteDefaults.height.value; heightPx.unit = carteDefaults.height.unit; }
+  }
+
+  basePopup.value.open(event);
+  nextTick(() => { isUpdatingFromStore = false; });
+};
+
+// --- Close ---
+const handleClose = () => {
+  saveState();
+  selector.value = '';
+  currentFigure.value = null;
+  if (basePopup.value?.visible) basePopup.value.close();
+  emit('close');
+};
+
+defineExpose({ handleCarteClick, close: () => basePopup.value?.close(), visible });
+</script>
+
+<style scoped>
+.carte-label {
+  background: var(--color-600);
+  color: white;
+  padding: 0.25rem 0.5rem;
+  border-radius: 4px;
+  font-size: 0.875rem;
+  font-weight: 600;
+}
+</style>

src/components/PagedJsWrapper.vue

@@ -69,7 +69,7 @@
         :data-page-type="item.template"
       >
         <h4>{{ item.title }}</h4>
-        <figure v-if="item.image" class="block-carte">
+        <figure v-if="item.image" :class="['block-carte', getCarteBlockId(item.id) ? `block-carte--${getCarteBlockId(item.id)}` : '']">
           <img :src="item.image" alt="" />
         </figure>
         <div v-if="item.tags && item.tags.length" class="tags">
@@ -133,6 +133,10 @@ import {
 const narrativeStore = useNarrativeStore();
 
 const hasNarrativeData = computed(() => narrativeStore.data !== null);
+
+const getCarteBlockId = (itemId) => {
+  return (itemId || '').split('/').pop()?.replace(/[^a-z0-9]/gi, '').slice(0, 8) || '';
+};
 const flattenedContent = computed(() => narrativeStore.flattenedContent);
 
 // Filter out hidden blocks

src/components/editor/CarteSettings.vue

@@ -0,0 +1,138 @@
+<template>
+  <section class="panel-settings__container" id="settings__container_carte" data-color-type="image">
+
+    <div class="settings__header">
+      <div class="icon" v-html="carteIcon"></div>
+      <h2 class="title">Réglage des cartes par défaut</h2>
+    </div>
+
+    <div class="container">
+
+      <!-- Largeur -->
+      <div class="setting__section" data-setting="width">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="width">Largeur</label>
+        </div>
+        <div class="setting__body">
+          <InputWithUnit
+            v-model="width"
+            :units="['%', 'px']"
+            :min="1"
+            :max="width.unit === 'px' ? 2000 : 200"
+            showRange
+          />
+        </div>
+      </div>
+
+      <!-- Hauteur -->
+      <div class="setting__section" data-setting="height">
+        <div class="setting__header">
+          <label class="label-with-tooltip" data-css="height">Hauteur</label>
+        </div>
+        <div class="setting__body">
+          <div class="field-checkbox">
+            <input type="checkbox" id="carte-height-auto" :checked="heightAuto" @change="onHeightAutoChange(!heightAuto)" />
+            <label for="carte-height-auto">Auto</label>
+          </div>
+          <InputWithUnit
+            v-if="!heightAuto"
+            v-model="height"
+            :units="['px']"
+            :min="1"
+            :max="800"
+            showRange
+          />
+        </div>
+      </div>
+
+    </div>
+  </section>
+</template>
+
+<script setup>
+import { ref, watch, onMounted, nextTick } from 'vue';
+import carteIcon from '/assets/svg/carte.svg?raw';
+import { CARTE_DEFAULTS } from '../../utils/defaults';
+import InputWithUnit from '../ui/InputWithUnit.vue';
+import { useCssUpdater } from '../../composables/useCssUpdater';
+import { useCssSync } from '../../composables/useCssSync';
+import { useDebounce } from '../../composables/useDebounce';
+import { useCarteDefaults } from '../../composables/useCarteDefaults';
+
+const { updateStyle, removeProperty } = useCssUpdater();
+const { extractNumericValue, extractValue } = useCssSync();
+const { debouncedUpdate } = useDebounce(500);
+const carteDefaults = useCarteDefaults();
+
+const CARTE_SELECTOR = '.block-carte';
+
+// Width
+const width = ref({ ...CARTE_DEFAULTS.width });
+
+// Height
+const heightAuto = ref(CARTE_DEFAULTS.height.auto);
+const height = ref({ value: CARTE_DEFAULTS.height.value, unit: CARTE_DEFAULTS.height.unit });
+
+let isUpdatingFromStore = true;
+
+watch(width, (val) => {
+  if (isUpdatingFromStore) return;
+  carteDefaults.width = { value: val.value, unit: val.unit };
+  debouncedUpdate(() => {
+    updateStyle(CARTE_SELECTOR, 'width', `${val.value}${val.unit}`);
+  });
+}, { deep: true, immediate: true });
+
+const onHeightAutoChange = (auto) => {
+  if (isUpdatingFromStore) return;
+  heightAuto.value = auto;
+  const cssVal = auto ? 'auto' : `${height.value.value}${height.value.unit}`;
+  updateStyle(CARTE_SELECTOR, 'height', cssVal);
+  if (auto) {
+    removeProperty(`${CARTE_SELECTOR} img`, 'height');
+  } else {
+    updateStyle(`${CARTE_SELECTOR} img`, 'height', '100%');
+  }
+  carteDefaults.height = { auto, value: height.value.value, unit: height.value.unit };
+};
+
+watch(height, (val) => {
+  if (isUpdatingFromStore || heightAuto.value) return;
+  carteDefaults.height = { auto: false, value: val.value, unit: val.unit };
+  debouncedUpdate(() => {
+    updateStyle(CARTE_SELECTOR, 'height', `${val.value}${val.unit}`);
+    updateStyle(`${CARTE_SELECTOR} img`, 'height', '100%');
+  });
+}, { deep: true });
+
+const syncFromStore = () => {
+  isUpdatingFromStore = true;
+
+  if (carteDefaults._initialized) {
+    width.value = { value: carteDefaults.width.value, unit: carteDefaults.width.unit };
+    heightAuto.value = carteDefaults.height.auto;
+    height.value = { value: carteDefaults.height.value, unit: carteDefaults.height.unit };
+  } else {
+    const widthVal = extractNumericValue(CARTE_SELECTOR, 'width', ['%', 'px']);
+    if (widthVal) width.value = widthVal;
+
+    const heightVal = extractValue(CARTE_SELECTOR, 'height');
+    if (!heightVal || heightVal === 'auto') {
+      heightAuto.value = true;
+    } else {
+      const m = heightVal.match(/([\d.]+)px/i);
+      if (m) { heightAuto.value = false; height.value = { value: parseFloat(m[1]), unit: 'px' }; }
+    }
+
+    carteDefaults.width = { value: width.value.value, unit: width.value.unit };
+    carteDefaults.height = { auto: heightAuto.value, value: height.value.value, unit: height.value.unit };
+    carteDefaults._initialized = true;
+  }
+
+  nextTick(() => { isUpdatingFromStore = false; });
+};
+
+onMounted(() => {
+  syncFromStore();
+});
+</script>

src/components/editor/EditorPanel.vue

@@ -54,6 +54,7 @@
         <PageSettings />
         <TextSettings />
         <ImageSettings />
+        <CarteSettings />
       </div>
 
       <div v-else-if="activeTab === 'code'" class="tab-panel">
@@ -72,6 +73,7 @@ import { inject } from 'vue';
 import PageSettings from './PageSettings.vue';
 import TextSettings from './TextSettings.vue';
 import ImageSettings from './ImageSettings.vue';
+import CarteSettings from './CarteSettings.vue';
 import StylesheetViewer from '../StylesheetViewer.vue';
 
 const activeTab = inject('activeTab');

src/composables/useCarteDefaults.js

@@ -0,0 +1,13 @@
+import { reactive } from 'vue';
+import { CARTE_DEFAULTS } from '../utils/defaults';
+
+// Singleton reactive — CarteSettings writes here, CartePopup reads when toggle is disabled
+const defaults = reactive({
+  width: { ...CARTE_DEFAULTS.width },
+  height: { auto: CARTE_DEFAULTS.height.auto, value: CARTE_DEFAULTS.height.value, unit: CARTE_DEFAULTS.height.unit },
+  _initialized: false,
+});
+
+export function useCarteDefaults() {
+  return defaults;
+}

src/composables/useIframeInteractions.js

@@ -4,14 +4,16 @@ import { ref } from 'vue';
  * Composable for managing interactions with pages and elements in the iframe
  * Handles hover effects, labels, and click events for both pages and content elements
  */
-export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup // DISABLED: page template styling feature */ }) {
+export function useIframeInteractions({ elementPopup, imagePopup, cartePopup /*, pagePopup // DISABLED: page template styling feature */ }) {
   // DISABLED: page template styling feature
   // const hoveredPage = ref(null);
   // const selectedPages = ref([]); // Pages with active border (when popup is open)
-  const hoveredElement = ref(null); // Currently hovered content element
+  const hoveredElement = ref(null);
-  const hoveredFigure = ref(null); // Currently hovered block-image figure
+  const hoveredFigure = ref(null); // block-image or geoformat-cover-image
-  const selectedElement = ref(null); // Selected element (when popup is open)
+  const hoveredCarte = ref(null); // block-carte
-  const selectedFigure = ref(null); // Selected figure (when image popup is open)
+  const selectedElement = ref(null);
+  const selectedFigure = ref(null); // selected block-image
+  const selectedCarte = ref(null); // selected block-carte
   // const EDGE_THRESHOLD = 30; // px from edge to trigger hover // DISABLED: page template styling feature
 
   // Text elements that can trigger ElementPopup (excluding containers, images, etc.)
@@ -197,6 +199,42 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
     return null;
   };
 
+  // Find closest block-carte figure ancestor
+  const getCarteFigure = (element) => {
+    let current = element;
+    while (current && current.tagName !== 'BODY') {
+      if (current.tagName === 'FIGURE' && current.classList.contains('block-carte')) return current;
+      current = current.parentElement;
+    }
+    return null;
+  };
+
+  // Create and position carte label on hover
+  const createCarteLabel = (figure) => {
+    const doc = figure.ownerDocument;
+    const existing = doc.querySelector('.carte-hover-label');
+    if (existing) existing.remove();
+
+    const uniqueClass = Array.from(figure.classList).find(cls => cls.startsWith('block-carte--'));
+    const labelText = uniqueClass ? `.${uniqueClass}` : '.block-carte';
+
+    const rect = figure.getBoundingClientRect();
+    const scrollTop = doc.documentElement.scrollTop || doc.body.scrollTop;
+    const scrollLeft = doc.documentElement.scrollLeft || doc.body.scrollLeft;
+
+    const label = doc.createElement('div');
+    label.className = 'carte-hover-label';
+    label.textContent = labelText;
+    label.style.top = `${rect.top + scrollTop - 32}px`;
+    label.style.left = `${rect.left + scrollLeft}px`;
+    doc.body.appendChild(label);
+  };
+
+  const removeCarteLabel = (doc) => {
+    const label = doc.querySelector('.carte-hover-label');
+    if (label) label.remove();
+  };
+
   // Check if element is a content element (or find closest content parent)
   const getContentElement = (element) => {
     let current = element;
@@ -285,8 +323,22 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
       hoveredFigure.value = imageFigure;
     }
 
+    // Check for block-carte figure hover
+    const carteFigure = (!imageFigure) ? getCarteFigure(event.target) : null;
+    if (carteFigure !== hoveredCarte.value) {
+      if (hoveredCarte.value && hoveredCarte.value !== selectedCarte.value) {
+        hoveredCarte.value.classList.remove('element-hovered');
+      }
+      removeCarteLabel(doc);
+      if (carteFigure && carteFigure !== selectedCarte.value) {
+        carteFigure.classList.add('element-hovered');
+        createCarteLabel(carteFigure);
+      }
+      hoveredCarte.value = carteFigure;
+    }
+
     // Check for content element hover
-    const contentElement = imageFigure ? null : getContentElement(event.target);
+    const contentElement = (imageFigure || carteFigure) ? null : getContentElement(event.target);
 
     if (contentElement !== hoveredElement.value) {
       // Remove highlight from previous element (only if not selected)
@@ -347,6 +399,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
       clearSelectedElement();
       if (elementPopup.value.visible) elementPopup.value.close();
       imagePopup.value?.close();
+      cartePopup.value?.close();
       return;
     }
 
@@ -376,8 +429,31 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
       return;
     }
 
-    // Close image popup if open when clicking a text element
+    // Check if clicking a block-carte figure
+    const carteFigure = getCarteFigure(element);
+    if (carteFigure) {
+      clearSelectedElement();
+      if (elementPopup.value.visible) elementPopup.value.close();
       imagePopup.value?.close();
+      const doc2 = event.target.ownerDocument;
+      removeElementLabel(doc2);
+      removeCarteLabel(doc2);
+      if (cartePopup.value?.visible) {
+        if (selectedCarte.value) { selectedCarte.value.classList.remove('element-selected'); selectedCarte.value = null; }
+        cartePopup.value.close();
+        return;
+      }
+      carteFigure.classList.remove('element-hovered');
+      carteFigure.classList.add('element-selected');
+      hoveredCarte.value = null;
+      selectedCarte.value = carteFigure;
+      cartePopup.value?.handleCarteClick(carteFigure, event);
+      return;
+    }
+
+    // Close image and carte popups when clicking a text element
+    imagePopup.value?.close();
+    cartePopup.value?.close();
 
     // Only show ElementPopup for content elements, not divs
     const contentElement = getContentElement(element);
@@ -437,6 +513,13 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
     }
   };
 
+  const handleCartePopupClose = () => {
+    if (selectedCarte.value) {
+      selectedCarte.value.classList.remove('element-selected');
+      selectedCarte.value = null;
+    }
+  };
+
   return {
     // State
     // hoveredPage, // DISABLED: page template styling feature
@@ -449,6 +532,7 @@ export function useIframeInteractions({ elementPopup, imagePopup /*, pagePopup /
     // handlePagePopupClose, // DISABLED: page template styling feature
     handleElementPopupClose,
     handleImagePopupClose,
+    handleCartePopupClose,
     // Utilities
     // clearSelectedPages, // DISABLED: page template styling feature
     clearSelectedElement,

src/stores/stylesheet.js

@@ -5,7 +5,7 @@ import * as cssComments from '../utils/css-comments';
 import prettier from 'prettier/standalone';
 import parserPostcss from 'prettier/plugins/postcss';
 import { getCsrfToken } from '../utils/kirby-auth';
-import { PAGE_DEFAULTS, TEXT_DEFAULTS, IMAGE_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
+import { PAGE_DEFAULTS, TEXT_DEFAULTS, IMAGE_DEFAULTS, CARTE_DEFAULTS, HEADING_DEFAULTS, INLINE_DEFAULTS, PARAGRAPH_CLASS_DEFAULTS } from '../utils/defaults';
 
 export const useStylesheetStore = defineStore('stylesheet', () => {
   // Base state
@@ -268,7 +268,7 @@ export const useStylesheetStore = defineStore('stylesheet', () => {
     set('.geoformat-cover-image', 'height', 'auto');
     set('.geoformat-cover-image img', 'object-fit', 'cover');
     set('.geoformat-cover-image img', 'display', 'flex');
-    set('.block-carte', 'width', IMAGE_DEFAULTS.width.value, IMAGE_DEFAULTS.width.unit);
+    set('.block-carte', 'width', CARTE_DEFAULTS.width.value, CARTE_DEFAULTS.width.unit);
     set('.block-carte', 'height', 'auto');
     set('.block-carte img', 'object-fit', 'cover');
     set('.block-carte img', 'display', 'flex');

src/utils/defaults.js

@@ -131,6 +131,11 @@ export const IMAGE_DEFAULTS = Object.freeze({
   height: Object.freeze({ auto: true, value: 400, unit: 'px' }),
 });
 
+export const CARTE_DEFAULTS = Object.freeze({
+  width: Object.freeze({ value: 100, unit: '%' }),
+  height: Object.freeze({ auto: true, value: 400, unit: 'px' }),
+});
+
 export const INLINE_DEFAULTS = Object.freeze({
   em: Object.freeze({ fontStyle: 'italic' }),
   i: Object.freeze({ fontStyle: 'italic' }),