/* 1. Conteneur principal fixe qui couvre tout l'écran */
#site-background {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: -1; /* Place le décor derrière le site */
  display: flex;
  justify-content: space-between;
  pointer-events: none; /* Laisse passer les clics vers la boutique */
}

/* 2. Zone centrale (Image de fond statique) */
.bg-center {
  width: 100%;
  max-width: 1140px; /* S'aligne sur la grille PrestaShop */
  height: 100%;
  background: url('../img/fond-central.jpg') center top no-repeat;
  background-size: cover;
}

/* 3. Bandeaux latéraux (Animations gauche/droite) */
.bg-side {
  flex: 1;
  height: 100%;
}

.bg-left {
  background: url('../img/anim-gauche.gif') center top repeat-y;
}

.bg-right {
  background: url('../img/anim-droite.gif') center top repeat-y;
}

/* 4. Rendre la boutique transparente pour laisser voir le fond */
body, #main, #wrapper, .header-banner, .footer-container {
  background-color: transparent !important;
}

/* 5. DÉTECTION DU FORMAT (Horizontal vs Vertical) */

/* Écran Vertical / Smartphones (Portrait) */
@media (orientation: portrait) {
  .bg-side {
    display: none; /* Masque les bandes animées sur écran vertical */
  }
  .bg-center {
    max-width: 100vw;
  }
}

/* Écran Ultra-Large / 4K (Landscape) */
@media (orientation: landscape) and (min-width: 1600px) {
  .bg-center {
    max-width: 1440px; /* Élargit le centre sur très grand écran */
  }
}