//
// 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 {
  position: absolute;
  inset: 0;
  width: 100%;
  overflow: hidden;
  z-index: -1;
  pointer-events: none;

  .decor-tile {
    position: relative;
    width: 100%;
    height: $tile_height;

    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;
    }

    .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; }
  }
}