/*- Alexander Gantchev, voici ma feuille CSS pour le menu Sidenav, crée le 10 janvier 2025 */

/* Style général */
body {
  font-family: Arial, sans-serif;
  margin: 0;
  padding: 0;
}

/* Bouton pour ouvrir le menu */
.openbtn {
  font-size: 20px;
  padding: 10px 15px;
  display: none;
  background-color: transparent;
  color: black;
  border: none;
  cursor: pointer;
  position: absolute;
  top: 20px;
  left: 20px;
}

/* Sidenav menu */
.sidenav {
  height: 100%; /* Hauteur complète */
  width: 0; /* Masqué par défaut */
  position: fixed;
  top: 0;
  left: 0;
  background-color: orange;
  transition:  0.5s ease;
  padding-top: 60px;
}

/* Liste des éléments dans le menu */
.sidenav ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  display: none;
  text-align: center;
}

.sidenav ul li {
  padding: 8px 16px;
}
.sidenav.active ul {
  display: block;
}

.sidenav ul li a {
  text-decoration: none;
  font-size: 25px;
  color: white;
  display: block;
  transition: 0.3s;
}

/* Bouton de fermeture */
.sidenav .closebtn {
  position: absolute;
  top: 0;
  
  right: 25px;
  font-size: 36px;
  color: black;
  cursor: pointer;
  font-size: 90px;
}

/* Activer le menu en pleine largeur (100% de la page) */
.sidenav.active {
  width: 100%; /* Menu occupe toute la largeur de la page */
}

hr {
  width: 120px;
}
@media (max-width: 1300px) {
  .openbtn {
    display: block;
    font-size: 50px;
    position: fixed;
  }
  .sidenav {
    z-index: 200;
  }
  .sidenav ul a img {
    width: 700px;
    height: auto;
  }
  .sidenav a:hover {
    transform: scale(1.03); /* Agrandit le bouton à 110% de sa taille */
    transition: all 0.5s ease;
  }
  .sidenav a,
  .sidenav #imageAccueilNav {
    transition: all 0.5s ease-out;
  }

  .sidenav a img:hover {
    transform: scale(1.1);
    transition: all 0.5s ease;
    
  }
}