/* Offcanvas sidebar - Version Gauche */
.offcanvas-side {
  position: fixed;
  top: 0;
  left: -100%; /* Changé de right à left */
  width: 80%;
  max-width: 300px;
  height: 100vh;
  background: #121b30;
  z-index: 999;
  transition: left 0.3s ease-out; /* Changé de right à left */
  overflow-y: auto;
  box-shadow: 2px 0 5px rgba(0,0,0,0.1); /* Ombre inversée */
}

body.offcanvas-open .offcanvas-side {
  left: 0; /* Changé de right à left */
  right: auto;
}

/* Overlay */
.offcanvas-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background: rgba(0,0,0,0.5);
  z-index: 998;
  display: none;
}

body.offcanvas-open .offcanvas-overlay {
  display: block;
}

/* Bouton de fermeture */
.offcanvas-close {
  position: absolute;
  top: 10px;
  right: 10px; /* Maintenu à droite dans le panneau */
  font-size: 1.5rem;
  background: none;
  border: none;
  cursor: pointer;
  z-index: 1000;
  color: #FFF;
}

/* Bouton toggle (burger) */
.offcanvas-toggle {
  display: block;
  cursor: pointer;
  padding: 10px;
}

/* Responsive - Masquer sur desktop si nécessaire */
@media (min-width: 992px) {
  .offcanvas-toggle, .offcanvas-side {
    display: none;
  }
  
  .offcanvas-side {
    position: relative;
    left: 0;
    width: auto;
    height: auto;
    box-shadow: none;
  }
  
  .offcanvas-overlay {
    display: none !important;
  }
}

/* Animation d'entrée optionnelle */
@keyframes slideInLeft {
  from { transform: translateX(-100%); }
  to { transform: translateX(0); }
}

body.offcanvas-open .offcanvas-side {
  animation: slideInLeft 0.3s forwards;
  overflow: hidden;
}




@media (max-width: 992px) {
  nav .desktop {
    display: none;
  }
}