/* Définitions de base pour le layout split-screen */
#leftSide, #leftSideDetail {
  position: fixed;
  top: 0;
  left: 0;
  width: 50%;
  height: 100vh;
  overflow-y: auto;
}

#rightSide, #rightSideDetail {
  position: absolute;
  top: 0;
  left: 50%;
  width: 50%;
  height: 100vh;
  overflow-y: auto;
  background: #fff;
}

/* Effet de livre ouvert avec ombre */
#leftSide::after, #leftSideDetail::after {
  content: '';
  position: absolute;
  top: 0;
  right: 0;
  height: 100%;
  width: 30px;
  background: linear-gradient(to right, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  z-index: 10;
  pointer-events: none;
}

#rightSide::before, #rightSideDetail::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  height: 100%;
  width: 30px;
  background: linear-gradient(to left, rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0));
  z-index: 10;
  pointer-events: none;
}

/* Correctifs pour la responsivité */
@media (max-width: 768px) {
  #leftSide, #leftSideDetail {
    position: relative !important;
    height: 100vh !important;
    width: 100% !important;
    max-height: 500px !important;
    overflow: hidden !important;
  }
  
  #rightSide, #rightSideDetail {
    position: relative !important;
    width: 100% !important;
    left: 0 !important;
    height: auto !important;
    min-height: 50vh;
  }
  
  #leftSide::after, #leftSideDetail::after,
  #rightSide::before, #rightSideDetail::before {
    display: none;
  }
  
  footer {
    position: relative !important;
    margin-bottom: 70px !important;
  }
}

/* Section pour permettre le scroll naturel sur desktop */
@media (min-width: 1024px) {
  #rightSide {
    height: auto !important;
    min-height: 100vh;
  }
}