.accueil-marcheurs {
  width: 100%;
  height: fit-content;
}

/* -----------------------------------marcheurs top---------------------------------------------  */

.marcheurs-top-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
}

.marcheurs-top-banner {
  width: 100%;
  height: 50vh;
  background-image: url(../img/DSC_0114.jpg);
  background-repeat: no-repeat;
  background-size: cover;
  background-position: center 30%;

}

.marcheurs-top-title {
  font-family: "Medula One", system-ui;
  font-size: 75px;
  background-color: #643c2b;
  color: white;
  padding: 1rem 2rem;
  text-align: center;
  border-radius: 15px;
  transform: translateY(-50%);
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/*------------------------------------------------- marcheurs-list----------------------------------- */

.marcheurs-list-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}

.products-list {
  /* background-color: red; */
  width: 80%;
  height: fit-content;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  padding: 1rem;
  gap: 1rem;
}

.marcheurs-list-presentation {
  width: 90%;
  height: fit-content;
  margin-bottom: 2rem;
  display: flex;
  align-items: center;
  position: relative;
}

.marcheurs-list-presentation-text {
  width: 50%;
  /* border: 2px solid #643c2b; */
  height: fit-content;
  padding: 2rem;
  border-radius: 25px;
  background-color: #ffffffef;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  box-shadow: rgba(0, 0, 0, 0.15) 1.95px 1.95px 2.6px;
  position: absolute;
}

.marcheurs-list-presentation-img {
  width: 50%;
}

.marcheurs-list-title {
  font-size: 55px;
  font-family: "Medula One", system-ui;
  margin: 1rem ;
  border-top: #643c2b 3px solid;
  border-bottom: #643c2b 3px solid;
  text-align: center;
  
}

.product-item {
  border-radius: 15px;
  width: 300px;
  height: 300px;
  transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
  overflow: hidden;
}

.product-item:hover {
  transform: translateY(-5px);
  box-shadow: rgba(50, 50, 93, 0.25) 0px 50px 100px -20px,
    rgba(0, 0, 0, 0.3) 0px 30px 60px -30px;
}

.product-item a {
  width: 100%;
  height: 100%;
  text-decoration: none;
  color: black;
  position: relative;
}

.image-container {
  border-radius: 15px;

  width: 100%;
  height: 100%;
  overflow: hidden;
  position: relative;
}

.product-item-img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top;
  border-radius: 15px;
}

.infos-container {
  position: absolute;
  bottom: 0;
  width: 100%;
  padding: 1rem;
  color: white;
  background-color: #643c2b8f;
}

.product-description {
  /* display: none; */
  opacity: 0;
  transition: opacity 0.5s ease-in-out;
}

.product-item:hover .product-description {
  opacity: 1;
  /* display: block; */
}

.marcheurs-list-gallerie {
  width: 90%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-around;
margin: 1rem 0;

}

.marcheurs-list-gallerie p{
 width: 80%;
 margin: 1rem 0;

}

.marcheurs-list-gallerie-block {
  height: fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}

.marcheurs-list-gallerie-block a{
 color: black;
 text-decoration: none;
}

h4 {
  font-size: 11px;
text-decoration: none;
color: black;
text-align: center;
}

.marcheurs-list-gallerie-photo {
height: 45vh;

}

/* ---------------marcheurs reservation --------------------*/
.marcheurs-reservation-container {
  width: 100%;
  height: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 2rem;
}

.marcheurs-reservation {
  width: 90%;
  height: fit-content;
  padding: 1rem 2rem;
  border: 2px solid #643c2b;
  border-radius: 25px;
  margin-bottom: 2rem;
}

.marcheurs-reservation-title {
  font-family: "Medula One", system-ui;
  font-size: 45px;
  margin-bottom: 1rem;
  text-align: center;

}

.marcheurs-reservation-link {
  display: flex;
  justify-content: space-around;
  align-items: center;
  gap: 1rem;
}

.marcheurs-reservation-infos {
  width: 100%;
}

.marcheurs-reservation-button {
  background-color: #643c2b;
  color: #ffffff;
  padding: 1rem 2rem;
  border-radius: 25px;
  text-decoration: none;
  transition: box-shadow 0.5s ease-in-out;
  width: fit-content;
  height: fit-content;
  white-space: nowrap;
}

.marcheurs-reservation-button:hover {
  box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
}

/* Responsive */
@media (max-width: 862px) {
  /* -----------------------------------marcheurs top---------------------------------------------  */
  .marcheurs-top-banner {
    width: 100%;
    height: 50vh;
    background-image: url(../img/IMG_0787\ .jpg);
    background-repeat: no-repeat;
    background-size: cover;
    background-position: top;
  }

  .marcheurs-top-title {
    width: 90%;
    font-size: 45px;
    transform: translateY(0);
    margin-top: 1rem;
  }

  .marcheurs-top-presentation {
    width: 90%;
  }

  .marcheurs-reservation-link {
    flex-direction: column;
  }

  .marcheurs-list-presentation {
    flex-direction: column;
    position: static;
  }

  .marcheurs-list-presentation-text {
    width: 100%;
    transform: translate(0,0);
    position: static;
    background-image: linear-gradient(rgba(255, 255, 255, 0.7), rgba(255, 255, 255, 0.7)), url(../img/combination-makeup-textures.png);
    background-repeat: no-repeat;
    background-size: cover;
    
  }



  .marcheurs-list-presentation-img-2 {
    display: none;
  }

  .marcheurs-list-title {
font-size: 35px;
  }


  .marcheurs-list-presentation-img {
    width: 90%;
    margin-top: 1rem;
  }

  .product-item {
    border-radius: 15px;
    width: 200px;
    height: 200px;
    transition: box-shadow 0.5s ease-in-out, transform 0.5s ease-in-out;
    overflow: hidden;
  }




.marcheurs-list-gallerie {
  width: 90%;
  height: fit-content;
  display: flex;
  flex-wrap: wrap;
  gap: 1rem;
  justify-content: space-around;
margin: 1rem 0;

}



.marcheurs-list-gallerie p{
 text-align: center;

}

.marcheurs-list-gallerie-block {
  height: fit-content;
  width: fit-content;
  display: flex;
  flex-direction: column;
  align-items: center;

  gap: 1rem;
}



.marcheurs-list-gallerie-block h3{
 text-align: center;
}

.marcheurs-list-gallerie-photo {
height: 45vh;
max-width: 100%;

}
}