@font-face {
  font-family: breakLight;
  src: url(font/Break-Light.ttf);
}
* {
  margin: 0;
  padding: 0;
  text-decoration: none;
  list-style: none;
}

.baniere{
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0;
  max-width: 100vw;
  max-height: auto;
}

#img-1 {
width: 15vw;
height: auto;
}
#img-2 {
  width: 85vw;
  height: auto;

  }

.menu a {
  /* a tout seul influera sur tout les autre manière de a, donc penser à virer la ligne color si je veux faire des trucs un peu particulier */
  color: whitesmoke;
}
.menu {
  font-family: breakLight;
  font-size: 1.3em;
  margin-top:1vh;
  padding: 0% 33%;
  display: flex;
  align-items: center;
  justify-content: center;
  max-width: 100vw;
}

.menu li {
  justify-content: space-evenly;
  white-space: nowrap;
  margin: auto 2%;
  padding: 2%;
}
.menu li:hover > .submenu {
  display: block;
}
.titreMenu {
  padding: 1.2vh;
  display: inline-block;
  transition: transform 0.3s ease;
}
.titreMenu:hover {
  border: rgb(255, 88, 27) solid 1px;
  border-radius: 5px;
  transform: scale(1.15);
}
.submenu {
  margin-top: 0.8%;
  z-index: 20;
  display: none; /* Masquer tous les sous-menus par défaut */
  position: absolute;
  text-align: left;
  padding-left: 1%;
  border-radius: 10px;
  background: linear-gradient(to bottom, rgba(255, 88, 27, 1) 0%, rgba(235, 6, 6, 0.7) 100%);
}

.submenu a {
  color: whitesmoke;
  padding: 5% 7% ;
}
.submenu a:hover {
  background-color: rgb(36, 36, 38, 0.3);
  border-radius: 5px;
}
.submenu li {
  padding-right: 10%;
  padding: 1vh 1vw; 
  width: 100%;
  display: block;
  transform: translateX(-17%);
}