mobile calendrier event display fix; Hyphenation words with dash fix

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

@@ -90,6 +90,7 @@ function processTitle(txt) {
     const chars = Array.from(word.getElementsByClassName('char'));
     styleWordChars(chars);
     hyphenateWord(chars);
+    breakAfterHyphens(chars);
   }
   txt.classList.add('is-ready');
 }
@@ -304,4 +305,22 @@ function hyphenateWord(chars) {
   }
 }
 
+/**
+ * Autorise la coupure après un trait d'union (« text-to-speech »).
+ *
+ * Le « - » est isolé dans son span .char : l'opportunité de coupure qu'il
+ * porte normalement ne passe pas dans le flux entre les spans, et le mot
+ * entier ne coupe jamais. Comme pour les césures, on pose un point de coupure
+ * entre les spans : un <wbr>. (Un espace sans chasse U+200B à la place est
+ * ignoré par Firefox après un « - » : mesuré sur /projets, aucune coupure.)
+ */
+function breakAfterHyphens(chars) {
+  for (let i = 0; i < chars.length - 1; i++) {
+    const c = chars[i];
+    if (/^[-‐]$/.test(c.textContent) && c.parentNode) {
+      c.parentNode.insertBefore(document.createElement('wbr'), c.nextSibling);
+    }
+  }
+}
+
 initTitles();

web/themes/custom/leshed/assets/scss/partials/abstracts/_event-calendrier.scss

@@ -2,41 +2,30 @@
 @use "../abstracts/variables" as *;
 @use "fluid" as *;
 @use "../abstracts/event-date-time" as *;
+@use "../abstracts/breakpoints" as *;
 
 @mixin event_calendar(){
       // @include evenementListe();
     border-top: 1px solid #ccc;
     padding: 2em 0 1em 0;
 
-
-    display: flex;
-    flex-direction: row;
-    gap: 1em;
     header{
-      flex:0 1 auto;
-      // width: 5em;
-      padding:0 1em 0 0;
-
       .field_dates{
         @include event-date-time(5em);
-        flex-direction: column;
-        align-items: center;
-        gap: 0.6em;
         span.date-sep{
           display: block;
           width: 1em;
           height: 0;
           overflow: visible;
-          transform-origin: center;
+          // transform-origin: center;
-          transform: rotate(90deg) translateX(0.1em);
+          transform: translateX(0.1em);
-          line-height: 0;
+          // line-height: 0;
           padding: 0;
         }
       }
     }
 
     section.content{
-      flex:1 1 auto;
       h2.node-title{
         font-size: 3em;
       }
@@ -59,21 +48,66 @@
     }
 
     section.last-cel{
-      flex:0 1 auto;
       .field_images{
         a{
           display: block;
-          width: 12em;
+          width: 100%;
           height: 12em;
           overflow: hidden;
           img{
             width: 100%;
             height: 100%;
+            object-fit:cover;
+            object-position: center;
+          }
+        }
+      }
+    }
+
+    @media #{$desktop-et-tablette}{
+      &{
+        display: flex;
+        flex-direction: row;
+        gap: 1em;
+
+        header{
+          flex:0 1 auto;
+          // width: 5em;
+          padding:0 1em 0 0;
+
+          .field_dates{
+            flex-direction: column;
+            align-items: center;
+            gap: 0.6em;
+            span.date-sep{
+              transform-origin: center;
+              transform: rotate(90deg) translateX(0.1em);
+              line-height: 0;
+              padding: 0;
+            }
+          }
+
+        }
+
+        section.content{
+          flex:1 1 auto;
+        }
+
+        section.last-cel{
+          flex:0 1 auto;
+          .field_images{
+            a{
+              width: 12em;
+              height: 12em;
+              img{
                 object-fit:contain;
                 object-position: top right;
               }
             }
           }
         }
+      }
+    }
+
 
 }