ajouté cesures sur titres variables

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

@@ -4,6 +4,7 @@ import '../scss/main.scss'
 import "splitting/dist/splitting.css";
 import "splitting/dist/splitting-cells.css";
 import Splitting from "splitting";
+import { hyphenateSync } from "hyphen/fr";
 
 // import Content from './vuejs/Content.vue'
 
@@ -79,7 +80,9 @@ import Splitting from "splitting";
       for (const txt of titles) {
         const splitted = Splitting({ target: txt, by: 'chars' });
         for (const word of splitted[0].words) {
-          styleWordChars(Array.from(word.getElementsByClassName('char')));
+          const chars = Array.from(word.getElementsByClassName('char'));
+          styleWordChars(chars);
+          hyphenateWord(chars);
         }
       }
     }
@@ -175,6 +178,37 @@ import Splitting from "splitting";
       }
     }
 
+    /**
+     * Insère des césures logicielles (U+00AD) aux points de coupure valides.
+     *
+     * Comme chaque lettre est un span (display:inline) sans « run » de texte
+     * continu, `hyphens: auto` est inopérant : on calcule donc les points de
+     * césure (motifs FR) et on insère un soft hyphen — en nœud texte, entre les
+     * lettres concernées — qui n'autorise une coupure (avec tiret) qu'à ces
+     * endroits. Les mots trop longs coupent proprement au lieu de casser
+     * n'importe où.
+     */
+    function hyphenateWord(chars) {
+      if (chars.length < 5) return;
+      const SOFT = '\u00AD';
+      const text = chars.map((c) => c.textContent).join('');
+      const hyphenated = hyphenateSync(text);
+      if (!hyphenated.includes(SOFT)) return;
+
+      let letter = 0;
+      for (const ch of hyphenated) {
+        if (ch === SOFT) {
+          const target = chars[letter];
+          if (letter > 0 && target && target.parentNode) {
+            target.parentNode.insertBefore(document.createTextNode(SOFT), target);
+          }
+        }
+        else {
+          letter++;
+        }
+      }
+    }
+
     function initBurgerMenu() {
       let header_right = document.getElementById('burger-btn');
       header_right.parentElement.addEventListener('click', function(e){

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

@@ -13,6 +13,18 @@ body{
   // background-color: green;
 }
 
+// Splitting met .word ET .char en inline-block :
+// - inline-block sur .char crée une opportunité de coupure entre CHAQUE lettre ;
+// - inline-block sur .word (dimensionné en max-content) empêche tout retour à la
+//   ligne interne, donc les soft hyphens ne peuvent jamais couper le mot.
+// On repasse les deux en inline : le mot redevient un flux de texte qui ne coupe
+// qu'aux césures logicielles (U+00AD) insérées par le JS.
+// Spécificité (0,2,1) pour battre `.splitting .word/.char` de Splitting.
+.splitting span.word,
+.splitting span.char{
+  display: inline;
+}
+
 $header_height: 50px;
 
 //  _                             _
@@ -179,29 +191,27 @@ header[role="banner"]{
 
 div.layout.layout--twocol-section--50-50{
   flex-wrap: nowrap;
-  column-gap: 1em;
+  column-gap: 2%;
   div.layout__region{
+    max-width: 49%;
+    flex: 1 0 50%;
     .views-row{
       // border: 1px solid red;
       // box-sizing: border-box;
-      margin-bottom: 1.5em;
+      margin-bottom: 2em;
+      max-width: 100%;
       article.node-type-projet{
         >header{
           >h2{
             margin: 0;
             font-size: 5em;
+            font-weight: 200;
             text-transform:lowercase;
+            // margin-left: -0.04em;
             filter: drop-shadow(0 0 5px #fff) drop-shadow(0 0 15px #fff);
             span.word{
-              hyphens: auto;
-
-              // $bgcolor:rgba(255,255,255,0.8);
-              // // background-color: $bgcolor;
-              // border-radius: 0.8em;
-              // box-shadow: 0 0 20px #fff;
-
               span.char{
-                letter-spacing:-0.2em;
+                letter-spacing:-0.1em;
               }
             }
             // span.whitespace{

web/themes/custom/leshed/package-lock.json

@@ -10,6 +10,7 @@
       "dependencies": {
         "axios": "^1.7.2",
         "gsap": "^3.14.1",
+        "hyphen": "^1.14.1",
         "splitting": "^1.1.0",
         "vue": "^3.4.29"
       },
@@ -1697,6 +1698,12 @@
         "node": ">= 6"
       }
     },
+    "node_modules/hyphen": {
+      "version": "1.14.1",
+      "resolved": "https://registry.npmjs.org/hyphen/-/hyphen-1.14.1.tgz",
+      "integrity": "sha512-kvL8xYl5QMTh+LwohVN72ciOxC0OEV79IPdJSTwEXok9y9QHebXGdFgrED4sWfiax/ODx++CAMk3hMy4XPJPOw==",
+      "license": "ISC"
+    },
     "node_modules/immutable": {
       "version": "5.1.9",
       "resolved": "https://registry.npmjs.org/immutable/-/immutable-5.1.9.tgz",

web/themes/custom/leshed/package.json

@@ -11,6 +11,7 @@
   "dependencies": {
     "axios": "^1.7.2",
     "gsap": "^3.14.1",
+    "hyphen": "^1.14.1",
     "splitting": "^1.1.0",
     "vue": "^3.4.29"
   },