/* Responsive */
@media (max-width: 768px) {
	  html, body {
    overflow-x: hidden;
    width: 100%;
  }

  /* Sécurité : s'assurer qu'aucun élément ne dépasse */
  .container,
  .snap-scroll-container,
  .snap-section,
  .description-panel,
  .left-panel,
  .right-panel {
    max-width: 100%;
    overflow-x: hidden;
  }
    body {
        font-size: 1rem;
    }
    .container {
        width: 100%;
        padding: 10px;
    }
    nav ul {
        flex-direction: column;
        gap: 10px;
    }
      .description-panel {
          width: 80%;
        }
        .left-panel,  .right-panel,  .description-panel  {
          height: 50%;
          top: auto;
  bottom: 0;
  
}
	.bg-image-desktop,
.bg-image-mobile {
  pointer-events: none; /* Empêche de bloquer les clics */
}
.text-overlay {
  bottom: 6rem!important;;

	}
	body {
  font-size: 0.8rem;
}
	.description-btn {
  position: absolute;
  top: 4rem;
  left: var(--margin);
  z-index: 100;
  cursor: pointer;
}

@media (max-width: 768px) {
    .two-column {
      flex-direction: column; 
    }
  
    .two-column .image-block,
    .two-column .text-block {
      width: 100%;  
      flex: none;  
      margin: 0 0 1em 0; 
    }
  }
  
  @media (max-width: 768px) {
    .bg-image-desktop {
        opacity: 0;
        z-index: 0;
    }
    .bg-image-mobile {
        opacity: 1;
        z-index: 1;
    }
   
    .left-panel, .right-panel {

        width: 100%;
        height: 50%;

   
}
  }