@font-face {
  font-family: "Roboto";
  src: url("https://fonts.googleapis.com/css2?family=Roboto:wght@100;400;700&display=swap")}
 
body,
html {
  font-family: Roboto, sans-serif;
  margin: 0;
}
.acceuil {
  z-index: 1;
}

/*--------spinner---------*/
.spinner {
  background-color: rgba(255, 255, 255, 0.9);
  width: 100%;
  height: 100%;
  position: fixed;
  z-index: 1;
  animation: opacity_reverse 1s 1s linear both;
}

@keyframes opacity_reverse {
  0% {
    opacity: 1;
  }
  100% {
    opacity: 0;
    z-index: -1;
  }
}

.spinner_text {
  color: #ff79da;
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 63px;
  left: 25px;
  right: 0;
  bottom: 0;
}

.spinner_custom {
  border-top: 10px solid #99e2d0;
  border-bottom: 10px solid #9356dc;
  border-radius: 50%;
  width: 100px;
  height: 100px;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  animation: spin 3s linear;
}

@keyframes spin {
  0% {
    tranform: rotate(0deg);
  }
  100% {
    transform: rotate(360deg);
  }
}

/*--------------header-----------*/
.header {
  padding: 10px;
}

.header-logo {
  font-family: shrikhand;
  text-align: center;
}

/*------------------header-restaurants---------------------*/
.fas.fa-arrow-left {
  width: 19%;
  font-size: larger;
  margin-top: 16px;
  margin-left: 18px;
  color: #353535;
  margin-right: 66px;
  position: absolute;
}

.header--block {
  object-fit: cover;
  width: 100%;
  height: 252px;
}

/*---------------------navigation-acceuil-------------------*/
.navigation_map {
  background-color: #eaeaea;
  display: flex;
  justify-content: center;
  font-size: 1.1rem;
  padding: 20px;
  box-shadow: inset 0px 3px #c8c4c4;
}

.text-map {
  font-weight: bold;
  margin-left: 10px;
}

h2 {
  font-weight: bold;
}

.navigation_search {
  text-align: center;
  padding: 20px;
  padding-bottom: 60px;
  background-color: #f6f6f6;
}

.button,
.command {
  cursor: pointer;
  border: 0;
  color: white;
  border-radius: 30px;
  font-size: 1em;
  box-shadow: 0px 6px 6px 2px rgba(0, 0, 0, 0.2);
  padding: 20px 20px;
  margin: 10px 38px;
  font-weight: bold;
  display: inline-table;
  transition-duration: 0.25s;
  background-image: linear-gradient(to bottom right, #e671da 32%, #b862db 100%);
}

.button:hover,
.command:hover {
  box-shadow: 6px 6px 6px 2px rgba(0, 0, 0, 0.5);
  filter: brightness(110%);
}

/*-------------------------navigation-restaurant--------------*/
.menu_deroulant {
  background-color: #f6f6f6;
  border-radius: 45px 45px 0 0;
  margin-top: -68px;
  position: relative;
  z-index: 0;
  width: 100%;
}

.menu_deroulant-entete {
  display: flex;
  margin-top: 24px;
}

.menu_deroulant-title {
  font-family: Shrikhand, "cursive";
  margin: 6px 27px 5px 22px;
}

.menu_deroulant-heart {
  color: #7e7e7e;
  display: flex;
  justify-content: flex-end;
  font-size: x-large;
  padding-top: 35px;
  padding-left: 62px;
}

h4 {
  margin-left: 25px;
  border-bottom: 3px solid #99e2d0;
  display: inline-block;
  margin-top: 30px;
  padding-bottom: 9px;
  font-weight: 400;
  font-size: 16px;
  width: 45px;
}

.menu_deroulant-card {
  background-color: #fff;
  border-radius: 11px;
  width: 80%;
  display: flex;
  justify-content: start;
  margin-bottom: 15px;
  box-shadow: 0px 6px 6px -2px rgba(0, 0, 0, 0.2);
  margin-left: 22px;
  padding-top: 10px;
  padding-left: 10px;
  padding-right: 20px;
  overflow: hidden;
  cursor: pointer;
}

.compo_description,
.compo {
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
  margin-top: 5px;
}

.menu_deroulant-card-compo {
  width: 95%;
  text-overflow: ellipsis;
  overflow: hidden;
  white-space: nowrap;
}

.menu_deroulant-card-price {
  font-weight: bolder;
  display: flex;
  align-items: flex-end;
  width: 5%;
  padding-bottom: 12px;
}

.menu_deroulant-card-validation {
  background-color: #99e2d0;
  margin: -17px -254px -8px 22px;
  width: 30%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 11px;
  transition: margin-right 0.2s ease-in-out;
}

.menu_deroulant-card:hover .menu_deroulant-card-validation {
  margin-right: -20px;
}

.fa-check {
  display: flex;
  background-color: #f6f6f6;
  align-items:center;
  color: #99e2d0;
  border-radius: 20px;
  width: 25px;
  height: 25px;
  transform: rotate(-360deg);
  transition-duration: 0.7s;
}

.fa-check.fas::before {
  padding-top: 2px;
  padding-left: 5px;
}

.menu_deroulant-card:hover .fa-check {
  transform: rotate(0);
}

.menu_deroulant-command {
  padding-top: 50px;
  padding-bottom: 70px;
  text-align: center;
}

h5 {
  font-family: Shrikhand, "cursive";
  padding-left: 25px;
  padding-top: 10px;
}

.menu_deroulant-card {
  animation: slideup 2s forwards;
  opacity: 0;
}
.card1 {
  animation-delay: 0s;
}
.card2 {
  animation-delay: 0.3s;
}
.card3 {
  animation-delay: 0.6s;
}
.card4 {
  animation-delay: 0.9s;
}

@keyframes slideup {
  0% {
    transform: translatey(-10px);
    opacity: 0%;
  }
  50% {
    opacity: 0.7;
  }
  100% {
    transform: translatey(-2px);
    opacity: 1;
  }
}
/*--------------acceuil------------*/

.filtres {
  padding-left: 10px;
  padding-top: 20px;
  padding-right: 10px;
  padding-bottom: 30px;
}

.filtre_box,
.restaurant_box {
  max-width: 1280px;
  margin: auto;
  position: relative;
}

.filtres_title {
  margin-left: 10px;
}

.filtres_step {
  padding-left: 20px;
}

ol {
  counter-reset: filtres_step;
}

figure {
  margin: 0px;
}

.filtres_icons {
  list-style-type: none;
  counter-increment: filtres_step;
  padding: 30px 20px 30px 0px;
  margin: 16px 12px 16px 0px;
  border-radius: 16px;
  background-color: #f6f6f6;
  box-shadow: 0px 6px 6px -2px rgba(0, 0, 0, 0.2);
}

.filtres_icons:before {
  content: counter(filtres_step);
  padding: 5px 5px 5px 11px;
  margin-right: 8px;
  margin-left: -11px;
  background: #9356dc;
  border-radius: 60px;
  font-size: 0.8em;
  color: white;
}

span {
  font-weight: bold;
}

.icon {
  margin-right: 16px;
  padding-left: 7px;
  color: #7e7e7e;
}

.filtres_icons:hover {
  background-color: #f5edff;
}

.restaurants {
  padding-left: 20px;
  padding-top: 20px;
  padding-right: 5px;
  padding-bottom: 50px;
  background-color: #f6f6f6;
}

.cartes {
  display: flex;
  flex-direction: column;
  margin-right: 20px;
}

.carte1,
.carte2,
.carte3,
.carte4 {
  background-color: #fff;
  border-radius: 20px;
  box-shadow: 0px 26px 58px -22px rgba(0, 0, 0, 0.48);
  overflow: hidden;
  position: relative;
  margin-top: 20px;
}

h3 {
  margin-top: 10px;
  margin-bottom: 0px;
}

a {
  text-decoration: none;
  color: inherit;
}

.carte {
  object-fit: cover;
  width: 100%;
  border-radius: 20px 20px 0 0;
  height: 200px;
}

.foot {
  display: flex;
  flex-wrap: wrap;
}

.foot_argument {
  margin-left: 15px;
  width: 70%;
}

.ville {
  margin-top: 5px;
}

.nouveau {
  position: absolute;
  padding: 10px;
  background-color: #99e2d0;
  right: 18px;
  margin-top: 10px;
  color: #1a463b;
}

/*----------------heart-----------------*/
.far.fa-heart {
  font-size: 1.5rem;
  position: absolute;
  right: 25px;
  bottom: 25px;
  opacity: 1;
}

.fa-heart::before {
  content: "\f004";
}

.fas.heart-animation {
  font-size: 1.5rem;
  position: absolute;
  right: 25px;
  bottom: 25px;
  background: linear-gradient(#e671da, #b862db);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}

.heart-animation:hover {
  opacity: 1;
  transition: 0.3s ease-in-out;
}

.menu_deroulant .far.fa-heart {
  font-size: 1.5rem;
  position: absolute;
  right: 25px;
  top: 30px;
  opacity: 1;
}

.menu_deroulant .fas.fa-heart {
  font-size: 1.5rem;
  position: absolute;
  right: 25px;
  top: 30px;
  background: linear-gradient(#ff79da, #9356dc);
  background-clip: border-box;
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  opacity: 0;
}

.menu_deroulant .heart-animation:hover {
  opacity: 1;
  transition: 0.3s ease-in-out;
}

/*------------------footer-commun---------*/
.footer {
  background-color: #353535;
  padding-top: 20px;
  padding-bottom: 10px;
}

.footer_logo {
  padding-left: 20px;
  color: white;
  font-family: Shrikhand, "cursive";
  font-size: larger;
}

.footer_link {
  text-decoration: none;
  color: white;
}

.footer_title {
  list-style: none;
  padding-left: 20px;
}

.footer_li1,
.footer_li2 {
  font-size: 1.1em;
  padding-bottom: 10px;
}

.footer_li1 {
  font-weight: bold;
}

@media screen and (min-width: 990px) {
  .filtres {
    flex: 2;
    display: flex;
  }

  .filtres_box {
    width: 100%;
  }

  .filtres_icons {
    margin-top: 60px;
    margin-bottom: 60px;
  }

  .restaurants {
    flex: auto;
    display: flex;
    flex-direction: column;
    background-color: white;
    width: 44%;
  }

  .restaurants_box {
    margin-left: 30px;
  }

  #blocks {
    display: flex;
    flex-direction: row-reverse;
  }

  .cartes {
    display: flex;
    flex-direction: initial;
    margin-right: 0px;
    flex-wrap: wrap;
    margin-top: 30px;
  }
  .carte1,
  .carte2,
  .carte3,
  .carte4 {
    display: flex;
    flex-direction: column;
    width: 46%;
    margin: 10px;
    height: 193px;
  }
  .carte {
    height: 124px;
  }
  /****responsive fiche menu*******/
  .menu {
    display: flex;
    justify-content: center;
  }
  .menu_deroulant-part {
    display: flex;
    flex-direction: column;
    width: 40%;
  }

  .menu_deroulant-entete {
    margin-left: 30px;
    font-size: larger;
  }
  .heart {
    margin-right: 40px;
  }
  .footer {
    padding-left: 40px;
  }
}