ajout des images bg sur les bords

web/themes/erabletheme/scss/global/_global.scss

@@ -28,7 +28,6 @@ body {
       z-index: 0;
     }
     #background {
-      display: none;
       z-index: -1;
     }
   }

web/themes/erabletheme/scss/partials/_background.scss

@@ -1,116 +1,65 @@
+//
+// Décors latéraux parallax v2.
+//
+// Un seul .decor-tile (= une "scène" verticale) défini ici puis cloné
+// par JS (cf. setupBackgroundTiles dans js/erabletheme.js) pour remplir
+// la hauteur de .layout-container. Si la page est plus courte que le
+// tile, l'overflow caché de #background tronque proprement.
+//
+// Positionnement vertical : `top` en % du tile, pour que les frises
+// soient repositionnées automatiquement dans chaque clone.
+// Ancrage horizontal : .decor-left { left: 0 } / .decor-right { right: 0 }
+// → bord gauche / droit du PNG collé au bord viewport.
+//
+
+$tile_height: 220vh;
+
 #background {
-  height: 98%;
+  position: absolute;
+  inset: 0;
   width: 100%;
   overflow: hidden;
-  position: absolute;
-  top: 0;
-  left: 0;
-  img {
-    position: absolute;
-    pointer-events: none;
-  }
-  > div {
+  z-index: -1;
+  pointer-events: none;
+
+  .decor-tile {
     position: relative;
-    height: 80vh;
-  }
-  #bg-top {
-    /* #bg-1 {
-      top: 5vh;
-      left: 0;
-    } */
-    #bg-3 {
-      top: 13vh;
-      left: -10vw;
-      width: 20vw;
-      z-index: 1;
-      @media screen and (min-width: $breakpoint_desktop) {
-        width: auto;
-        z-index: -1;
-      }
-      @media screen and (min-width: $breakpoint_desktop_large) {
-        width: 22vw;
-      }
-    }
-    #bg-2 {
-      top: 8vh;
-      left: -28vw;
-      @media screen and (min-width: $breakpoint_desktop) {
-        transform: rotate(1deg);
-      }
-      @media screen and (min-width: $breakpoint_desktop_large) {
-        left: -5vw;
-        top: 9vh;
-      }
-    }
-    #bg-5 {
-      width: 20vw;
-      top: 5vh;
-      right: -10vw;
-      z-index: 1;
-      @media screen and (min-width: $breakpoint_desktop) {
-        z-index: -1;
-      }
-      @media screen and (min-width: $breakpoint_desktop_large) {
-        width: 27vw;
-      }
-    }
-    /* #bg-4 {
-      top: 18vh;
-      right: -45vw;
-    } */
+    width: 100%;
+    height: $tile_height;
 
-  }
-  #bg-middle {
-    #bg-6 {
-      top: 5vh;
-      right: -5vw;
+    img {
+      position: absolute;
+      pointer-events: none;
+      // largeur auto pour préserver le ratio des PNG ; on contrôle la
+      // taille via height (en vh) pour rester proportionnel au viewport.
+      width: auto;
     }
-    #bg-7 {
-      width: 85vw;
-      top: 10vh;
-      right: 0vw;
-    }
-    /* #bg-8 {
-      width: 80vw;
-      top: 45vh;
-      left: -40vw;
-    } */
-    #bg-12 {
-      width: 105vw;
-      left: -5vw;
-      top: 30vh;
-    }
-  }
-  #bg-bottom {
-    bottom: 0;
-    position: absolute;
-    #bg-11 {
-      left: 0;
-      @media screen and (min-width: $breakpoint_desktop) {
-        left: 50vw;
-        bottom: 70vh;
-      }
-    }
-    #bg-10 {
-      width: 110vw;
-      left: 5vw;
-      bottom: 0;
-      @media screen and (min-width: $breakpoint_desktop) {
-        left: 0;
-        bottom: 20vh;
-      }
-    }
-    #bg-4 {
-      transform: scaleX(-1);
-      left: -45vw;
-      bottom: 5vh;
-      @media screen and (min-width: $breakpoint_tablet) {
-        bottom: 150vhvh;
 
-      }
-      @media screen and (min-width: $breakpoint_desktop) {
-        bottom: -8vh;
-      }
-    }
+    .decor-left  { left: 0; }
+    .decor-right { right: 0; }
+
+    // --- Frises gauches (6 répartiess sur la hauteur du tile) ---
+    .decor-left-1 { top: 2%;  height: 20vh; }
+    .decor-left-2 { top: 18%; height: 32vh; }
+    .decor-left-3 { top: 38%; height: 42vh; }
+    .decor-left-4 { top: 58%; height: 12vh; }
+    .decor-left-5 { top: 70%; height: 22vh; }
+    .decor-left_6,
+    .decor-left-6 { top: 88%; height: 10vh; }
+
+    // --- Frises droites (13 réparties sur la hauteur du tile) ---
+    .decor-right-1  { top: 1%;  height: 22vh; }
+    .decor-right-2  { top: 10%; height: 38vh; }
+    .decor-right-3  { top: 18%; height: 18vh; }
+    .decor-right-4  { top: 26%; height: 12vh; }
+    .decor-right-5  { top: 34%; height: 26vh; }
+    .decor-right-6  { top: 42%; height: 8vh;  }
+    .decor-right-7  { top: 48%; height: 10vh; }
+    .decor-right-8  { top: 55%; height: 8vh;  }
+    .decor-right-9  { top: 62%; height: 18vh; }
+    .decor-right-10 { top: 72%; height: 12vh; }
+    .decor-right-11 { top: 78%; height: 20vh; }
+    .decor-right-12 { top: 86%; height: 16vh; }
+    .decor-right-13 { top: 92%; height: 22vh; }
   }
 }