@charset "UTF-8";
/**************** GÉNÉRAL ***************/
body {
  font-family: "Roboto", sans-serif;
  margin: 0;
}

.main-container {
  width: 100%;
  min-width: 320px;
}

/* Mes mixins */
/*

/* Ceci est mon bloc header */
.header__logo {
  width: 180px;
  margin-top: 20px;
  margin-bottom: 20px;
  margin-left: calc(50% - 90px);
}

/* Ceci est mon bloc de recherche ville */
.caseville {
  border: 0;
  margin-bottom: 5px;
  color: black;
  font-weight: bold;
  width: 100%;
  height: 50px;
  box-shadow: 0px 0px 10px 0px rgb(130, 124, 124);
  background-color: #EAEAEA;
}
.caseville__point {
  color: #353535;
  text-align: center;
  padding-left: 50px;
}
.caseville__search {
  border: 1px #EAEAEA;
  background-color: #EAEAEA;
  padding: 15px;
  color: #353535;
}

/* Ceci est mon bloc introduction */
.blocintro {
  background-color: #F2F2F2;
  text-align: center;
  padding: 15px;
}
.blocintro__button {
  border: 0px;
  background: linear-gradient(#FF79DA, #9356DC);
  box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.3);
  border-radius: 50px;
  height: 55px;
  width: 15em;
  color: white;
  margin: 20px;
}
.blocintro__button:hover {
  opacity: 0.7;
  box-shadow: 0px 0px 10px 0px rgb(130, 124, 124);
}

/* Ceci est mon bloc fonctionnement */
.blocfonction {
  margin-left: 10px;
  margin-top: 40px;
}
.blocfonction h2 {
  margin-bottom: -30px;
}
.blocfonction__flex {
  display: flex;
  flex-direction: column;
  padding-bottom: 50px;
}
.blocfonction__flex__number {
  background-color: #9356DC;
  color: white;
  text-align: center;
  position: relative;
  top: 60px;
  left: -10px;
  border-radius: 50%;
  width: 30px;
  height: 25px;
  padding-top: 5px;
}
.blocfonction__flex__bordure {
  margin-right: 10px;
  margin-bottom: -30px;
  border-radius: 20px;
  background-color: #F2F2F2;
  padding: 20px;
  box-shadow: 0px 0px 10px 0px rgb(130, 124, 124);
  font-size: 1em;
}
.blocfonction__flex__bordure p {
  margin-top: 0px;
}
.blocfonction__flex__icone {
  margin-right: 10px;
  margin-left: 10px;
  padding-left: 20px;
  justify-items: center;
  color: gray;
}
p:hover .blocfonction__flex__icone {
  color: #9356DC;
}

/* Ceci est mon bloc restaurants */
.blocrestau {
  background-color: #F2F2F2;
  padding-left: 10px;
  padding-top: 10px;
  padding-bottom: 30px;
  margin-top: 40px;
}
.blocrestau h2 {
  margin-bottom: 10px;
}
.blocrestau__card {
  margin-top: 15px;
  margin-bottom: 20px;
  margin-right: 10px;
  border-radius: 20px;
  padding-bottom: 1px;
  background-color: white;
  filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}
.blocrestau__card img {
  object-fit: cover;
  height: 200px;
  width: 100%;
  border-top-right-radius: 20px;
  border-top-left-radius: 20px;
}
.blocrestau__card a {
  text-decoration: none;
  color: black;
}
.blocrestau__card--txt {
  font-size: 16px;
  padding-left: 10px;
  margin-top: 5px;
}
.blocrestau__card--txt .card-subtitle {
  margin-top: -15px;
  margin-bottom: 10px;
}
.blocrestau__card--txt .card-nouveau {
  position: absolute;
  top: 0px;
  right: 20px;
  background-color: #99E2D0;
  color: #008766;
  width: 20%;
  padding: 5px;
  text-align: center;
}

/* Ceci est mon boutton coeur */
.buttonheart {
  font-size: 30px;
  position: absolute;
  right: 20px;
  bottom: 20px;
  border: none;
  background-color: white;
  transition-property: all;
  transition-duration: 2s;
}
.buttonheart__solid {
  opacity: 0;
}
.buttonheart__solid:hover {
  opacity: 1;
  color: transparent;
  background-image: linear-gradient(#9356DC, #FF79DA);
  background-clip: text;
}

/* Ceci est mon bloc footer*/
.footer {
  background-color: #353535;
  color: white;
  padding: 15px;
}
.footer__h3 {
  font-family: Shrikhand;
  padding-bottom: 15px;
}
.footer__link {
  color: white;
  text-decoration: none;
}

/* Ceci est ma partie media queries */
@media (min-width: 768px) {
  .blocfonction {
    margin-left: 8%;
  }
  .blocfonction__flex {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 20px;
  }
  .blocfonction__flex__bordure {
    width: 80%;
    font-size: 0.7em;
  }
  .blocrestau__flex {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 30px;
    padding-left: 7%;
  }
  .blocrestau h2 {
    margin-left: 7%;
  }
  .blocrestau__card {
    width: 45%;
  }
  .footer {
    display: flex;
    flex-direction: row-reverse;
    gap: 10px;
  }
  .footer__h3 {
    margin-top: 12px;
  }
  .footer__textes {
    display: flex;
    gap: 20px;
  }
}
@media (min-width: 1024px) {
  .blocfonction {
    width: 92%;
    margin-left: 8%;
  }
  .blocfonction__flex {
    display: flex;
    flex-direction: row;
    gap: 20px;
    width: 100%;
  }
  .blocfonction__flex .contain {
    width: 30%;
  }
  .blocfonction__flex__bordure {
    width: 85%;
    font-size: 0.9em;
  }
}
@media (min-width: 1300px) {
  .blocfonction {
    width: 92%;
    margin-left: 8%;
  }
  .blocfonction__flex {
    display: flex;
    flex-direction: row;
    gap: 10px;
    width: 90%;
    justify-content: space-between;
  }
  .blocfonction__flex .contain {
    width: 30%;
  }
  .blocfonction__flex__number {
    top: 70px;
  }
  .blocfonction__flex__bordure {
    width: 100%;
    font-size: 1.3em;
  }
}

/*# sourceMappingURL=style.css.map */