:root {
  --primary-color: #f9a826;
  --secondary-color: #f7d078;
  --background-color: #fcf4e2;
  --select-color: #b67d22;
  --text-color1: #333333;
  --text-color2: #ffffff;
  --accent-color: #d32f2f;
  --accent-color2: #2fbad3;
}

/*nav bar laterale*/
main {
  display: flex;
}

#navigation2 {
  position: fixed;
  bottom: 0;
  left: 0;
  width: 20vw;
  height: 82vh;
  border-radius: 0 3vw 0 0;
  background: linear-gradient(to left, var(--primary-color), var(--secondary-color));
  transition: all 0.5s ease;
  z-index: 0;
}

#navigation2 .cont-btn-2 {
  list-style-type: none;
  margin-top: 6vh;
  background-color: var(--back-color);
  font-size: 3.75vh;
  padding-inline-start: 0px;
}

#navigation2 .cont-btn-2 li {
  padding: 0.25vh 1vw;
  width: 18vw;
  margin: 0.75vh 0;
  transition: 0.5s;
  cursor: pointer;
}

#navigation2 .cont-btn-2 li:hover {
  color: var(--font-color);
  background-color: var(--select-color);
  width: 18vw;
  transition: 0.5s;
  cursor: pointer;
  color: var(--accent-color2);
}

/*fin nav bar laterale*/


/*presentation produit*/
#presentation_produit_id {
  margin-left: 20vw;
  padding: 0.5vh 0.5vw;
  width: 78vw;
}

#presentation_produit_id div {
  display: none;
  padding: 0.5vh 0.5vw;
  width: 75vw;

}

#presentation_produit_id div.active {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(23vw, 1fr))
}

.produit {
  width: 23vw;
  margin: 1vh 1vw;
  padding: 0.5vh 0.5vw;
  background: rgba(252, 253, 199, 0.425);
  border-radius: 2vw;
  box-shadow: 0 4px 3vh rgba(0, 0, 0, 0.1);
  backdrop-filter: blur(0.46vw);
  -webkit-backdrop-filter: blur(0.46vw);
  border: 0.1vw solid rgba(253, 237, 199, 0.36);
}

.produit h2 {
  text-align: center;
  font-size: 5vh;
  margin: 2vh 0;
}

.produit h3 {
  text-align: center;
  font-size: 3.5vh;
  margin: 2vh 0;
}

.produit img {
  width: 22vw;
  height: 18vw;
  margin: 0.5vh 0.5vw;
  border-radius: 2vw;
}

.produit p {
  text-align: center;
  font-size: 2.5vh;
  margin: 2vh 0;
}

.produit svg {
  align-items: center;
  width: 2vw;
  height: 2vh;
  fill: var(--text-color1) !important;
}

#presentation_produit_id div.active h1 {
  font-size: 5.5vh;
  margin: 30vh auto;
}

/*fin presentation produit*/