fixed title overflow measurement when font is loaded

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

@@ -49,6 +49,18 @@ function initTitles() {
     txt.classList.add("is-ready");
     measureOverflow(txt);
   }
+  // La police Epilogue (variable, font-display: block) arrive APRÈS le
+  // premier rendu. Au rechargement, les images sortent du cache instantanément
+  // et la mesure ci-dessus se fait avec les métriques de la police de
+  // substitution : elle conclut « pas de débordement » et plus rien ne la
+  // relance quand la vraie police charge (symptôme : le titre chevauche le
+  // texte sous l'image). On re-mesure tout une fois les polices prêtes —
+  // measureOverflow est idempotent, il écrase juste l'attribut.
+  if (document.fonts && document.fonts.ready) {
+    document.fonts.ready.then(() => {
+      for (const txt of titles) measureOverflow(txt);
+    });
+  }
 }
 
 /**
@@ -93,9 +105,12 @@ function measureOverflow(h2) {
     }
   };
 
-  if (img.complete && img.naturalWidth) {
+  // Toujours mesurer immédiatement : hors écran, une image lazy ne déclenche
+  // jamais 'load', mais sa boîte de layout existe dès le départ (attributs
+  // width/height de Drupal → aspect-ratio). Les re-mesures ultérieures
+  // (load réel ci-dessous, fonts.ready dans initTitles) écrasent l'attribut.
   measure();
-  } else {
+  if (!img.complete || !img.naturalWidth) {
     img.addEventListener('load', measure, { once: true });
   }
 }