Transform beforeafter block into generic image+text block

- Add toggle (isBeforeAfter) to switch between modes
- Mode simple: single image + text (2 columns layout)
- Mode comparison: before/after slider + text (2 columns layout)
- Remove "1/2, 1/2" layout from report blueprint (keep only "1/1")
- Update Vue component with 2-column grid preview
- Update PHP snippet to handle both modes
- Rename block to "Image avec texte"

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

site/plugins/beforeafter/src/components/BeforeAfterBlock.vue

@@ -1,27 +1,51 @@
 <template>
-  <div @click="$emit('open')" class="beforeafter-preview">
-    <div v-if="hasImages" class="beforeafter-preview__images">
-      <img
-        v-if="imageAfterUrl"
-        :src="imageAfterUrl"
-        class="beforeafter-preview__image beforeafter-preview__image--after"
-        alt="Après"
-      />
-      <img
-        v-if="imageBeforeUrl"
-        :src="imageBeforeUrl"
-        class="beforeafter-preview__image beforeafter-preview__image--before"
-        alt="Avant"
-      />
-      <div v-if="imageBeforeUrl && imageAfterUrl" class="beforeafter-preview__divider"></div>
-    </div>
+  <div @click="$emit('open')" class="imagetext-preview">
+    <div class="imagetext-preview__container">
+      <!-- Zone image / slider -->
+      <div class="imagetext-preview__media">
+        <!-- Mode avant/après -->
+        <div v-if="isBeforeAfter && (imageBeforeUrl || imageAfterUrl)" class="imagetext-preview__slider">
+          <img
+            v-if="imageAfterUrl"
+            :src="imageAfterUrl"
+            class="imagetext-preview__image imagetext-preview__image--after"
+            alt="Après"
+          />
+          <img
+            v-if="imageBeforeUrl"
+            :src="imageBeforeUrl"
+            class="imagetext-preview__image imagetext-preview__image--before"
+            alt="Avant"
+          />
+          <div v-if="imageBeforeUrl && imageAfterUrl" class="imagetext-preview__divider"></div>
+        </div>
 
-    <p v-if="content.caption" class="beforeafter-preview__caption">
-      {{ content.caption }}
-    </p>
+        <!-- Mode simple -->
+        <img
+          v-else-if="!isBeforeAfter && imageUrl"
+          :src="imageUrl"
+          class="imagetext-preview__single-image"
+          alt="Image"
+        />
 
-    <div v-if="!hasImages" class="beforeafter-preview__empty">
-      Cliquer pour ajouter des images
+        <!-- Placeholder si pas d'image -->
+        <div v-else class="imagetext-preview__empty-media">
+          Aucune image
+        </div>
+
+        <!-- Légende -->
+        <p v-if="content.caption" class="imagetext-preview__caption">
+          {{ content.caption }}
+        </p>
+      </div>
+
+      <!-- Zone texte -->
+      <div class="imagetext-preview__text">
+        <div v-if="content.text" v-html="content.text"></div>
+        <div v-else class="imagetext-preview__empty-text">
+          Aucun texte
+        </div>
+      </div>
     </div>
   </div>
 </template>
@@ -33,8 +57,22 @@ const props = defineProps({
   content: Object
 });
 
+// Attention: les clés sont en minuscules dans Kirby
+const isBeforeAfter = computed(() => {
+  return props.content?.isbeforeafter === true || props.content?.isbeforeafter === "true";
+});
+
+// Mode simple : une seule image
+const imageUrl = computed(() => {
+  if (!props.content?.image || !props.content.image.length) {
+    return null;
+  }
+  const file = props.content.image[0];
+  return file?.url || null;
+});
+
+// Mode avant/après : deux images
 const imageBeforeUrl = computed(() => {
-  // Attention: la clé est en minuscules dans Kirby
   if (!props.content?.imagebefore || !props.content.imagebefore.length) {
     return null;
   }
@@ -43,35 +81,47 @@ const imageBeforeUrl = computed(() => {
 });
 
 const imageAfterUrl = computed(() => {
-  // Attention: la clé est en minuscules dans Kirby
   if (!props.content?.imageafter || !props.content.imageafter.length) {
     return null;
   }
   const file = props.content.imageafter[0];
   return file?.url || null;
 });
-
-const hasImages = computed(() => {
-  return imageBeforeUrl.value || imageAfterUrl.value;
-});
 </script>
 
 <style scoped>
-.beforeafter-preview {
+.imagetext-preview {
   cursor: pointer;
   border-radius: var(--rounded);
   overflow: hidden;
   background: var(--color-background);
+  border: 1px solid var(--color-gray-300);
 }
 
-.beforeafter-preview__images {
+.imagetext-preview__container {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 1rem;
+  padding: 1rem;
+}
+
+/* Zone média (image ou slider) */
+.imagetext-preview__media {
+  display: flex;
+  flex-direction: column;
+  gap: 0.5rem;
+}
+
+.imagetext-preview__slider {
   position: relative;
   width: 100%;
   height: 200px;
   background: var(--color-gray-200);
+  border-radius: var(--rounded-sm);
+  overflow: hidden;
 }
 
-.beforeafter-preview__image {
+.imagetext-preview__image {
   position: absolute;
   top: 0;
   left: 0;
@@ -80,11 +130,11 @@ const hasImages = computed(() => {
   object-fit: cover;
 }
 
-.beforeafter-preview__image--before {
+.imagetext-preview__image--before {
   clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
 }
 
-.beforeafter-preview__divider {
+.imagetext-preview__divider {
   position: absolute;
   left: 50%;
   top: 0;
@@ -95,23 +145,47 @@ const hasImages = computed(() => {
   transform: translateX(-1px);
 }
 
-.beforeafter-preview__caption {
-  padding: 0.75rem;
-  font-size: var(--text-sm);
-  color: var(--color-gray-600);
-  font-style: italic;
-  background: var(--color-background);
-  margin: 0;
+.imagetext-preview__single-image {
+  width: 100%;
+  height: 200px;
+  object-fit: cover;
+  border-radius: var(--rounded-sm);
+  background: var(--color-gray-200);
 }
 
-.beforeafter-preview__empty {
-  padding: 3rem 1rem;
-  text-align: center;
+.imagetext-preview__empty-media {
+  width: 100%;
+  height: 200px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  background: var(--color-gray-200);
+  border-radius: var(--rounded-sm);
   color: var(--color-gray-500);
   font-size: var(--text-sm);
 }
 
-.beforeafter-preview:hover .beforeafter-preview__images {
-  opacity: 0.9;
+.imagetext-preview__caption {
+  font-size: var(--text-sm);
+  color: var(--color-gray-600);
+  font-style: italic;
+  margin: 0;
+  padding: 0 0.25rem;
+}
+
+/* Zone texte */
+.imagetext-preview__text {
+  font-size: var(--text-sm);
+  color: var(--color-gray-700);
+  line-height: 1.5;
+}
+
+.imagetext-preview__empty-text {
+  color: var(--color-gray-500);
+  font-style: italic;
+}
+
+.imagetext-preview:hover {
+  border-color: var(--color-gray-400);
 }
 </style>