algo de debordement adapatif des très longs titres sur images

web/themes/custom/leshed/assets/js/titles.js

@@ -45,6 +45,56 @@ function initTitles() {
       hyphenateWord(chars);
     }
     txt.classList.add("is-ready");
+    measureOverflow(txt);
+  }
+}
+
+/**
+ * Mesure le débordement du titre sous l'image et pose data-overflow-lines.
+ *
+ * Si le titre déborde de N lignes sous l'image, l'attribut data-overflow-lines
+ * permet au CSS d'augmenter max-height de N lignes pour absorber le débordement.
+ */
+function measureOverflow(h2) {
+  const article = h2.closest('article.has-image');
+  if (!article) return;
+
+  const img = article.querySelector('header .field_images img');
+  if (!img) return;
+
+  const measure = () => {
+    const lineHeight = parseFloat(getComputedStyle(h2).lineHeight);
+    if (!lineHeight) return;
+
+    // Hauteur réelle de l'image rendue (width:100%, height:auto).
+    let imgHeight;
+    if (img.naturalWidth && img.complete) {
+      imgHeight = img.clientWidth * (img.naturalHeight / img.naturalWidth);
+    } else {
+      imgHeight = img.clientHeight;
+    }
+    if (!imgHeight) return;
+
+    // scrollHeight = hauteur totale du titre sans le max-height.
+    h2.style.maxHeight = 'none';
+    const titleHeight = h2.scrollHeight;
+    h2.style.maxHeight = '';
+
+    // Lignes du titre qui dépassent sous l'image.
+    // 1 ligne est déjà dans le flux (max-height: 1em par défaut).
+    const overflowPx = titleHeight - imgHeight;
+    if (overflowPx <= 0) return;
+
+    const overflowLines = Math.ceil(overflowPx / lineHeight);
+    if (overflowLines > 0) {
+      h2.setAttribute('data-overflow-lines', overflowLines);
+    }
+  };
+
+  if (img.complete && img.naturalWidth) {
+    measure();
+  } else {
+    img.addEventListener('load', measure, { once: true });
   }
 }
 

web/themes/custom/leshed/assets/scss/main.scss

@@ -307,6 +307,14 @@ $variable-title-selectors: (
         // text-shadow: 0 0 10px #fff;
         // box-shadow: 0 0 15px #f00;
         // filter: drop-shadow(0 0 5px #fff);
+
+        // Si le titre déborde de N lignes sous l'image, on remet N lignes
+        // supplémentaires dans le flux avant l'image pour absorber le débordement.
+        @for $i from 1 through 10 {
+          &[data-overflow-lines="#{$i}"] {
+            max-height: #{$i}em;
+          }
+        }
       }
       div.field_images{
         position:relative;