ajout des images bg sur les bords

web/themes/erabletheme/js/erabletheme.js

@@ -422,33 +422,55 @@
       }
 
       //
-      // set bg middle placement
+      // Décors latéraux parallax v2.
+      // Cloner le .decor-tile autant de fois que nécessaire pour couvrir
+      // la hauteur de .layout-container, puis instancier Rellax sur tous
+      // les .bgImg (originaux + clones). Au resize, on détruit/recompute.
       //
-      let pageHeight = document.querySelector('.layout-container').offsetHeight;
-      toggleBgMiddle(pageHeight)
+      const bgRoot = document.getElementById('background');
+      let rellax = null;
 
-      window.addEventListener('resize', () => {
-        pageHeight = document.querySelector('.layout-container').offsetHeight;
-        toggleBgMiddle(pageHeight);
-      })
+      function setupBackgroundTiles() {
+        if (!bgRoot) return;
+        const original = bgRoot.querySelector('.decor-tile:not([data-tile-clone])');
+        if (!original) return;
 
-      function toggleBgMiddle(pageHeight) {
-        const bgMiddle = document.querySelector('#bg-middle');
-        const bgOnze = document.querySelector('#bg-11');
-        if (pageHeight < 2500) {
-          bgMiddle.style.display = 'none';
-          bgOnze.style.display = 'none';
-        } else {
-          bgMiddle.style.display = 'block';
-          bgOnze.style.display = 'block';
+        // Nettoyage des clones précédents (cas resize).
+        bgRoot.querySelectorAll('.decor-tile[data-tile-clone]').forEach(n => n.remove());
+
+        const layout = document.querySelector('.layout-container');
+        const pageHeight = layout ? layout.offsetHeight : window.innerHeight;
+        const tileHeight = original.getBoundingClientRect().height;
+        if (tileHeight <= 0) return;
+
+        const tileCount = Math.max(1, Math.ceil(pageHeight / tileHeight));
+        for (let i = 1; i < tileCount; i++) {
+          const clone = original.cloneNode(true);
+          clone.dataset.tileClone = 'true';
+          clone.dataset.tileIndex = String(i);
+          // .decor-once : formes pensées pour le haut du 1er tile
+          // (coupées en haut) — on les enlève des clones.
+          clone.querySelectorAll('.decor-once').forEach(n => n.remove());
+          bgRoot.appendChild(clone);
         }
       }
 
-      //
-      // bg parallax animation
-      //
-      var rellax = new Rellax('.bgImg', {
-        wrapper: 'body',
+      function initRellax() {
+        if (rellax) { try { rellax.destroy(); } catch (e) { /* noop */ } }
+        rellax = new Rellax('.bgImg', { wrapper: 'body' });
+      }
+
+      setupBackgroundTiles();
+      initRellax();
+
+      // Resize debouncé : recalcule le nombre de tiles, repart Rellax propre.
+      let bgResizeTimer = null;
+      window.addEventListener('resize', () => {
+        clearTimeout(bgResizeTimer);
+        bgResizeTimer = setTimeout(() => {
+          setupBackgroundTiles();
+          initRellax();
+        }, 200);
       });
 
       // footnotes