@charset "UTF-8";
@font-face {
  font-family: 'Shrikhand-Regular';
  src: url(../policies/Shrikhand/Shrikhand-Regular.ttf);
}

@font-face {
  font-family: 'Roboto-Regular';
  src: url(../policies/Roboto/Roboto-Regular.ttf);
}

@font-face {
  font-family: 'Roboto-Light';
  src: url(../policies/Roboto/Roboto-Light.ttf);
}

@font-face {
  font-family: 'Roboto-Bold';
  src: url(../policies/Roboto/Roboto-Bold.ttf);
}

@font-face {
  font-family: 'Roboto-Black';
  src: url(../policies/Roboto/Roboto-Black.ttf);
}

@font-face {
  font-family: 'Roboto-Thin';
  src: url(../policies/Roboto/Roboto-Thin.ttf);
}

/* DANS CE PROJET, 1REM EST EGALE A 10 PX */
/* ----------- KEYFRAMES --------- */
@-webkit-keyframes transitionIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}
@keyframes transitionIn {
  from {
    opacity: 0;
    -webkit-transform: translateY(2rem);
            transform: translateY(2rem);
  }
  to {
    opacity: 1;
    -webkit-transform: translateY(0rem);
            transform: translateY(0rem);
  }
}

@-webkit-keyframes Jaime {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  34% {
    -webkit-transform: scale(0.34);
            transform: scale(0.34);
  }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  80% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@keyframes Jaime {
  0% {
    -webkit-transform: scale(0);
            transform: scale(0);
  }
  34% {
    -webkit-transform: scale(0.34);
            transform: scale(0.34);
  }
  50% {
    -webkit-transform: scale(0.5);
            transform: scale(0.5);
  }
  70% {
    -webkit-transform: scale(0.8);
            transform: scale(0.8);
  }
  80% {
    -webkit-transform: scale(0.4);
            transform: scale(0.4);
  }
  90% {
    -webkit-transform: scale(0.9);
            transform: scale(0.9);
  }
  100% {
    -webkit-transform: scale(1);
            transform: scale(1);
  }
}

@-webkit-keyframes animRotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

@keyframes animRotate {
  from {
    -webkit-transform: rotate(0deg);
            transform: rotate(0deg);
  }
  to {
    -webkit-transform: rotate(360deg);
            transform: rotate(360deg);
  }
}

/* BASE */
html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  margin: 0;
}

main {
  font-family: 'Roboto-Regular', sans-serif;
  font-size: 1.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

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

/* --------------- LE HEADER ------------ */
header nav h1 {
  font-family: 'Shrikhand-Regular', sans-serif;
  font-size: 2.6rem;
  margin-top: 2rem;
  margin-bottom: 1rem;
  letter-spacing: 0.1rem;
  letter-spacing: 0.1rem;
  text-align: center;
}

header .localisation {
  -webkit-box-shadow: inset 0px 3px 7px -3px #969696;
          box-shadow: inset 0px 3px 7px -3px #969696;
  background-color: #EAEAEA;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin-bottom: 0rem;
}

header .localisation span {
  margin-left: 1.5rem;
}

header .presentation {
  background-color: #F6F6F6;
  margin-bottom: 3rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  text-align: center;
  padding-bottom: 5rem;
}

header .presentation .hero__titre {
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 2.5rem;
  max-width: 25rem;
  padding-top: 1rem;
}

header .presentation .hero__texte {
  margin-top: -0.5rem;
  font-family: 'Roboto-Light', sans-serif;
  font-size: 1.8rem;
}

header .presentation a {
  background-color: #9356dc;
  background: linear-gradient(353deg, #9356dc 0%, #ff79da 100%);
  text-decoration: none;
  color: white;
  font-size: 1.6rem;
  padding: 1.3rem;
  border-radius: 50px;
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  font-family: 'Roboto-Regular', sans-serif;
  -webkit-transition: background-color 600ms;
  transition: background-color 600ms;
}

header .presentation a:hover {
  background: #bc95e9;
  -webkit-box-shadow: rgba(50, 50, 93, 0.6) 0px 13px 27px -5px, rgba(0, 0, 0, 0.6) 0px 8px 16px -8px;
          box-shadow: rgba(50, 50, 93, 0.6) 0px 13px 27px -5px, rgba(0, 0, 0, 0.6) 0px 8px 16px -8px;
  -webkit-transition: background-color 700ms;
  transition: background-color 700ms;
}

header .fonctionnement {
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 4rem;
  margin-top: -1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

header .fonctionnement__titre {
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 2.5rem;
}

header .fonctionnement__etapes {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
}

header .fonctionnement__etapes__etape {
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
          box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  background-color: #F6F6F6;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-radius: 2rem;
}

header .fonctionnement__etapes__etape .numero {
  color: white;
  border-radius: 300px;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background: #9356DC;
  margin-right: 2rem;
  position: relative;
  right: 3%;
}

header .fonctionnement__etapes__etape i {
  margin-right: 2rem;
  font-size: 1.8rem;
  color: #7E7E7E;
  -webkit-transition: color 150ms ease-out;
  transition: color 150ms ease-out;
}

header .fonctionnement__etapes__etape .texte {
  font-size: 1.8rem;
  font-family: 'Roboto-Bold', sans-serif;
}

header .fonctionnement__etapes__etape-3 {
  -webkit-box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
          box-shadow: rgba(0, 0, 0, 0.15) 0px 5px 15px 0px;
  background-color: #F5EDFF;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  margin-bottom: 3rem;
  padding-top: 2.5rem;
  padding-bottom: 2.5rem;
  border-radius: 2rem;
}

header .fonctionnement__etapes__etape-3 .numero {
  color: white;
  border-radius: 300px;
  padding: 0.5rem 1rem 0.5rem 1rem;
  background: #9356DC;
  margin-right: 2rem;
  position: relative;
  right: 3%;
}

header .fonctionnement__etapes__etape-3 i {
  margin-right: 2rem;
  font-size: 1.8rem;
  color: #9356DC;
}

header .fonctionnement__etapes__etape-3 .texte {
  font-size: 1.8rem;
  font-family: 'Roboto-Bold', sans-serif;
}

/* -------------- SECTION RESTAURANTS ------------------- */
.photo1 {
  background-image: url(../MaquettesOhmyfood/images/restaurants/jay-wennington-N_Y88TWmGwA-unsplash.jpg);
}

.photo3 {
  background-image: url(../MaquettesOhmyfood/images/restaurants/toa-heftiba-DQKerTsQwi0-unsplash.jpg);
}

.photo4 {
  background-image: url(../MaquettesOhmyfood/images/restaurants/louis-hansel-shotsoflouis-qNBGVyOCY8Q-unsplash.jpg);
}

#restaurants {
  padding-top: 3rem;
  background-color: #F6F6F6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -ms-flex-item-align: start;
      align-self: flex-start;
  width: 100%;
  padding-bottom: 3rem;
  margin-bottom: -2rem;
}

#restaurants h2 {
  margin-left: 5%;
  font-size: 2.5rem;
  margin-bottom: 6.5rem;
}

#restaurants .restaurant {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 5%;
  height: 33rem;
  width: 90%;
  margin-top: -4rem;
}

#restaurants .restaurant__photo {
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  height: 70%;
  width: 100%;
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
  border-radius: 1.5rem 1.5rem 0rem 0rem;
}

#restaurants .restaurant__photo .nouveau {
  background-color: #99E2D0;
  color: #269E81;
  padding-top: 0.5rem;
  padding-bottom: 0.5rem;
  padding-left: 1rem;
  padding-right: 1rem;
  border-radius: 0.3rem;
  margin-left: 75%;
  position: relative;
  top: 7.5%;
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 1.4rem;
  text-align: center;
}

#restaurants .restaurant .photo2 {
  background-image: url(../MaquettesOhmyfood/images/restaurants/stil-u2Lp8tXIcjw-unsplash.jpg);
}

#restaurants .restaurant__texte {
  -webkit-box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
          box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
  background-color: white;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 1.5rem;
  border-radius: 0rem 0rem 1.5rem 1.5rem;
}

#restaurants .restaurant__texte__titre {
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 2rem;
  margin-bottom: 0.3rem;
}

#restaurants .restaurant__texte__localisation {
  font-size: 2rem;
}

#restaurants .restaurant .fa-solid {
  color: #9356dc;
  z-index: 3;
  position: relative;
  bottom: 9.25rem;
  left: 65%;
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
  -webkit-transform: scale(0);
          transform: scale(0);
}

#restaurants .restaurant i {
  position: relative;
  bottom: 6.25rem;
  margin-left: 87%;
  font-size: 3rem;
  max-width: 3rem;
  z-index: 2;
}

#restaurants .restaurant i:hover + .fa-solid {
  left: 0%;
  margin-left: 87%;
  -webkit-animation: Jaime 1000ms;
          animation: Jaime 1000ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

footer {
  background-color: #353535;
  color: white;
  width: 100%;
  margin-left: 0rem;
  padding-top: 2.5rem;
  padding-bottom: 2rem;
}

footer .marque {
  font-family: 'Shrikhand-Regular', sans-serif;
  margin-left: 2.5rem;
  font-size: 1.8rem;
}

footer .marque:hover {
  cursor: pointer;
}

footer ul {
  list-style-type: none;
  margin-left: -1.5rem;
}

footer ul .footer-important {
  font-family: 'Roboto-Bold', sans-serif;
}

footer ul li {
  margin-bottom: 0.5rem;
  text-align: justify;
  font-size: 1.6rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
}

footer ul li:hover {
  cursor: pointer;
}

footer ul li i {
  font-size: 1.3rem;
  margin-right: 2rem;
  max-width: 0.5rem;
}

/* ---------------- STYLE PAGE RESTAURANT ----------- */
/* LA BASE */
html {
  font-size: 62.5%;
}

body {
  min-height: 100vh;
  margin: 0;
}

.main-pageRestaurant {
  background-color: #F6F6F6;
  font-family: 'Roboto-Regular', sans-serif;
  font-size: 1.6rem;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  z-index: 1;
}

/* LA SECTION "HEADER" */
header {
  width: 100%;
}

header nav.navRestaurants {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
}

header nav.navRestaurants i {
  color: black;
  position: relative;
  right: 8rem;
  top: 0.5rem;
  font-size: 2.1rem;
}

header nav.navRestaurants h1 {
  margin-left: -1.5rem;
}

header .photo-laPaletteDuGout {
  z-index: -1;
  min-width: 100%;
  height: 25rem;
  background-image: url(../MaquettesOhmyfood/images/restaurants/jay-wennington-N_Y88TWmGwA-unsplash.jpg);
  background-size: 120%;
  background-position: -2rem 0rem;
  background-repeat: no-repeat;
}

header .photo-laNoteEnchantee {
  z-index: -1;
  min-width: 100%;
  height: 25rem;
  background-size: 110%;
  background-position: 0rem -12rem;
  background-repeat: no-repeat;
  background-image: url(../MaquettesOhmyfood/images/restaurants/stil-u2Lp8tXIcjw-unsplash.jpg);
}

header .photo-aLaFrançaise {
  z-index: -1;
  min-width: 100%;
  height: 25rem;
  background-size: 110%;
  background-position: 0rem 0rem;
  background-repeat: no-repeat;
  background-image: url(../MaquettesOhmyfood/images/restaurants/toa-heftiba-DQKerTsQwi0-unsplash.jpg);
}

header .photo-leDeliceDesSens {
  z-index: -1;
  min-width: 100%;
  height: 25rem;
  background-size: 110%;
  background-position: -1rem 0rem;
  background-repeat: no-repeat;
  background-image: url(../MaquettesOhmyfood/images/restaurants/louis-hansel-shotsoflouis-qNBGVyOCY8Q-unsplash.jpg);
}

/* LA SECTION "MENU" */
.menu {
  width: 100%;
  background-color: #F6F6F6;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding-top: 2rem;
  border-radius: 3rem 3rem 0px 0px;
  position: relative;
  bottom: 2rem;
}

.menu__nom {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-left: 5%;
  margin-right: 5%;
  font-family: 'Shrikhand-Regular', sans-serif;
  font-size: 2.5rem;
  margin-bottom: 2rem;
}

.menu__nom .fa-solid {
  color: #9356dc;
  position: absolute;
  z-index: 2;
  left: 80%;
  -webkit-transform: scale(0);
          transform: scale(0);
  -webkit-transform-origin: center bottom;
          transform-origin: center bottom;
}

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

.menu__nom i {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  position: absolute;
  left: 87.5%;
  z-index: 1;
}

.menu__nom i:hover {
  cursor: pointer;
}

.menu__nom i:hover + .fa-solid {
  -webkit-transform: scale(1);
          transform: scale(1);
  left: 87.5%;
  -webkit-animation: Jaime 1000ms;
          animation: Jaime 1000ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.menu__section {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  margin-left: 5%;
  margin-right: 5%;
  margin-bottom: 2.5rem;
}

.menu__section__nom {
  text-transform: uppercase;
  font-family: 'Roboto-Light', sans-serif;
  margin-bottom: 1rem;
  font-size: 1.8rem;
}

.menu__section .sousligne {
  background-color: #99E2D0;
  width: 4.5rem;
  height: 0.3rem;
  margin-top: -0.5rem;
  margin-bottom: 2rem;
}

.menu__section__choix {
  background-color: white;
  border-radius: 1rem 1rem 1rem 1rem;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-pack: justify;
      -ms-flex-pack: justify;
          justify-content: space-between;
  margin-bottom: 1rem;
  font-size: 1.8rem;
  -webkit-transform-origin: top center;
          transform-origin: top center;
  opacity: 0;
  -webkit-transform: translateY(2rem);
          transform: translateY(2rem);
  -webkit-animation: transitionIn 800ms;
          animation: transitionIn 800ms;
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  overflow: hidden;
}

.menu__section__choix:hover > .animSelection {
  -webkit-transform: translateX(0%);
          transform: translateX(0%);
  -webkit-transition: -webkit-transform 450ms;
  transition: -webkit-transform 450ms;
  transition: transform 450ms;
  transition: transform 450ms, -webkit-transform 450ms;
}

.menu__section__choix:hover > .animSelection > i {
  -webkit-animation: animRotate 450ms;
          animation: animRotate 450ms;
}

.menu__section__choix:hover > .prix {
  -webkit-transition: margin-left 450ms, -webkit-transform 450ms;
  transition: margin-left 450ms, -webkit-transform 450ms;
  transition: transform 450ms, margin-left 450ms;
  transition: transform 450ms, margin-left 450ms, -webkit-transform 450ms;
}

.menu__section__choix:hover > .choix-texte > .choix__soustitre {
  max-width: 20rem;
}

.menu__section__choix:hover > .choix-texte > .choix__titre {
  max-width: 20rem;
  -webkit-transition: max-width 450ms;
  transition: max-width 450ms;
}

.menu__section__choix:nth-last-child(3) {
  -webkit-animation-delay: 200ms;
          animation-delay: 200ms;
}

.menu__section__choix:nth-last-child(2) {
  -webkit-animation-delay: 400ms;
          animation-delay: 400ms;
}

.menu__section__choix:nth-last-child(1) {
  -webkit-animation-delay: 600ms;
          animation-delay: 600ms;
}

.menu__section__choix .choix-texte {
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  padding: 1rem;
  width: 30rem;
  text-overflow: ellipsis;
}

.menu__section__choix .choix-texte .choix__titre {
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 1.7rem;
  margin-bottom: 0.1rem;
  max-width: 25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: max-width 450ms;
  transition: max-width 450ms;
}

.menu__section__choix .choix-texte .choix__soustitre {
  font-size: 1.4rem;
  max-width: 25rem;
  width: 25rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-transition: max-width 450ms;
  transition: max-width 450ms;
}

.menu__section__choix .prix {
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 1.3rem;
  color: #353535;
  padding-right: 0;
  margin-right: 1rem;
  padding-top: 3.4rem;
  width: 3rem;
  margin-left: 10%;
  -webkit-transition: margin-left 450ms, -webkit-transform 450ms;
  transition: margin-left 450ms, -webkit-transform 450ms;
  transition: transform 450ms, margin-left 450ms;
  transition: transform 450ms, margin-left 450ms, -webkit-transform 450ms;
}

.menu__section__choix .animSelection {
  background-color: #99E2D0;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  border-radius: 0rem 1rem 1rem 0rem;
  width: 15%;
  -webkit-transform-origin: right;
          transform-origin: right;
  -webkit-transform: translateX(100%);
          transform: translateX(100%);
  -webkit-transition: -webkit-transform 450ms;
  transition: -webkit-transform 450ms;
  transition: transform 450ms;
  transition: transform 450ms, -webkit-transform 450ms;
}

.menu__section__choix .animSelection i {
  color: white;
  font-size: 2rem;
  padding-left: 2.5rem;
  padding-right: 2.5rem;
}

.menu .commander {
  -ms-flex-item-align: center;
      -ms-grid-row-align: center;
      align-self: center;
  font-family: 'Roboto-Bold', sans-serif;
  font-size: 1.8rem;
  padding-top: 1.5rem;
  padding-bottom: 1.5rem;
  padding-left: 4.5rem;
  padding-right: 4.5rem;
  border-radius: 3rem;
  color: white;
  background: #9356dc;
  background: linear-gradient(353deg, #9356dc 0%, #ff79da 100%);
  -webkit-box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
          box-shadow: rgba(50, 50, 93, 0.25) 0px 13px 27px -5px, rgba(0, 0, 0, 0.3) 0px 8px 16px -8px;
  margin-bottom: 3rem;
  -webkit-transition: background-color 700ms;
  transition: background-color 700ms;
}

.menu .commander:hover {
  background: #bc95e9;
  -webkit-box-shadow: rgba(50, 50, 93, 0.6) 0px 13px 27px -5px, rgba(0, 0, 0, 0.6) 0px 8px 16px -8px;
          box-shadow: rgba(50, 50, 93, 0.6) 0px 13px 27px -5px, rgba(0, 0, 0, 0.6) 0px 8px 16px -8px;
  -webkit-transition: background-color 700ms;
  transition: background-color 700ms;
  cursor: pointer;
}

/* ---------------------- PRELOADER ------------------- */
@-webkit-keyframes preloaderOh {
  0% {
    -webkit-transform: translateX(-5000%) translateY(100%) scale(2);
            transform: translateX(-5000%) translateY(100%) scale(2);
    opacity: 1;
  }
  70% {
    -webkit-transform: translateX(100%) translateY(100%) scale(2.5);
            transform: translateX(100%) translateY(100%) scale(2.5);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) translateY(100%) scale(2);
            transform: translateX(0%) translateY(100%) scale(2);
    opacity: 1;
  }
  85% {
    -webkit-transform: translateY(100%) translateX(0%) scale(2);
            transform: translateY(100%) translateX(0%) scale(2);
    opacity: 1;
  }
  90% {
    -webkit-transform: translateY(100%) translateX(0%) scale(2);
            transform: translateY(100%) translateX(0%) scale(2);
    opacity: 1;
  }
  95% {
    -webkit-transform: translateY(100%) translateX(0%) scale(2);
            transform: translateY(100%) translateX(0%) scale(2);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(0%) translateY(100%) scale(2);
            transform: translateX(0%) translateY(100%) scale(2);
    opacity: 0;
  }
}
@keyframes preloaderOh {
  0% {
    -webkit-transform: translateX(-5000%) translateY(100%) scale(2);
            transform: translateX(-5000%) translateY(100%) scale(2);
    opacity: 1;
  }
  70% {
    -webkit-transform: translateX(100%) translateY(100%) scale(2.5);
            transform: translateX(100%) translateY(100%) scale(2.5);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) translateY(100%) scale(2);
            transform: translateX(0%) translateY(100%) scale(2);
    opacity: 1;
  }
  85% {
    -webkit-transform: translateY(100%) translateX(0%) scale(2);
            transform: translateY(100%) translateX(0%) scale(2);
    opacity: 1;
  }
  90% {
    -webkit-transform: translateY(100%) translateX(0%) scale(2);
            transform: translateY(100%) translateX(0%) scale(2);
    opacity: 1;
  }
  95% {
    -webkit-transform: translateY(100%) translateX(0%) scale(2);
            transform: translateY(100%) translateX(0%) scale(2);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(0%) translateY(100%) scale(2);
            transform: translateX(0%) translateY(100%) scale(2);
    opacity: 0;
  }
}

@-webkit-keyframes preloaderMy {
  0% {
    -webkit-transform: translateX(5000%) translateY(0%) scale(2);
            transform: translateX(5000%) translateY(0%) scale(2);
    opacity: 1;
  }
  70% {
    -webkit-transform: translateX(-100%) translateY(0%) scale(2.5);
            transform: translateX(-100%) translateY(0%) scale(2.5);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) translateY(0%) scale(2);
            transform: translateX(0%) translateY(0%) scale(2);
    opacity: 1;
  }
  85% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 1;
  }
  90% {
    -webkit-transform: translateX(0%) translateY(0%) scale(2);
            transform: translateX(0%) translateY(0%) scale(2);
    opacity: 1;
  }
  95% {
    -webkit-transform: translateX(0%) translateY(0%) scale(2);
            transform: translateX(0%) translateY(0%) scale(2);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%);
    opacity: 0;
  }
}

@keyframes preloaderMy {
  0% {
    -webkit-transform: translateX(5000%) translateY(0%) scale(2);
            transform: translateX(5000%) translateY(0%) scale(2);
    opacity: 1;
  }
  70% {
    -webkit-transform: translateX(-100%) translateY(0%) scale(2.5);
            transform: translateX(-100%) translateY(0%) scale(2.5);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateX(0%) translateY(0%) scale(2);
            transform: translateX(0%) translateY(0%) scale(2);
    opacity: 1;
  }
  85% {
    -webkit-transform: scale(2);
            transform: scale(2);
    opacity: 1;
  }
  90% {
    -webkit-transform: translateX(0%) translateY(0%) scale(2);
            transform: translateX(0%) translateY(0%) scale(2);
    opacity: 1;
  }
  95% {
    -webkit-transform: translateX(0%) translateY(0%) scale(2);
            transform: translateX(0%) translateY(0%) scale(2);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateX(0%) translateY(0%);
            transform: translateX(0%) translateY(0%);
    opacity: 0;
  }
}

@-webkit-keyframes preloaderFood {
  0% {
    -webkit-transform: translateY(-5000%) scale(2);
            transform: translateY(-5000%) scale(2);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(-50%) scale(2);
            transform: translateY(-50%) scale(2);
    opacity: 1;
  }
  85% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 1;
  }
  90% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 1;
  }
  95% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
}

@keyframes preloaderFood {
  0% {
    -webkit-transform: translateY(-5000%) scale(2);
            transform: translateY(-5000%) scale(2);
    opacity: 1;
  }
  70% {
    -webkit-transform: scale(2.5);
            transform: scale(2.5);
    opacity: 1;
  }
  75% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 1;
  }
  80% {
    -webkit-transform: translateY(-50%) scale(2);
            transform: translateY(-50%) scale(2);
    opacity: 1;
  }
  85% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 1;
  }
  90% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 1;
  }
  95% {
    -webkit-transform: translateY(-100%) scale(2);
            transform: translateY(-100%) scale(2);
    opacity: 0.5;
  }
  100% {
    -webkit-transform: translateY(-100%);
            transform: translateY(-100%);
    opacity: 0;
  }
}

@-webkit-keyframes preloader {
  from {
    visibility: visible;
  }
  to {
    visibility: hidden;
  }
}

@keyframes preloader {
  from {
    visibility: visible;
  }
  to {
    visibility: hidden;
  }
}

.preloader {
  visibility: hidden;
  background: #F6F6F6;
  height: 100vh;
  width: 100%;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-orient: vertical;
  -webkit-box-direction: normal;
      -ms-flex-direction: column;
          flex-direction: column;
  -webkit-box-align: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
      -ms-flex-pack: center;
          justify-content: center;
  position: fixed;
  z-index: 3;
  -webkit-animation: preloader 3000ms;
          animation: preloader 3000ms;
}

.preloader__oh, .preloader__my, .preloader__food, .preloader__ohmyfood {
  font-size: 5rem;
  font-family: 'shrikhand-Regular', sans-serif;
  text-align: center;
  -webkit-transform: scale(2);
          transform: scale(2);
}

.preloader__oh {
  opacity: 0;
  -webkit-transform: translateY(100%);
          transform: translateY(100%);
  -webkit-animation: preloaderOh;
          animation: preloaderOh;
  -webkit-animation-duration: 1900ms;
          animation-duration: 1900ms;
  -webkit-animation-timing-function: cubic-bezier(0.69, 0.8, 0.69, 0.8);
          animation-timing-function: cubic-bezier(0.69, 0.8, 0.69, 0.8);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
}

.preloader__my {
  -webkit-transform: translateY(0%);
          transform: translateY(0%);
  opacity: 0;
  -webkit-animation: preloaderMy;
          animation: preloaderMy;
  -webkit-animation-duration: 1900ms;
          animation-duration: 1900ms;
  -webkit-animation-timing-function: cubic-bezier(0.69, 0.8, 0.69, 0.8);
          animation-timing-function: cubic-bezier(0.69, 0.8, 0.69, 0.8);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 450ms;
          animation-delay: 450ms;
}

.preloader__food {
  opacity: 0;
  -webkit-transform: translateY(-100%);
          transform: translateY(-100%);
  -webkit-animation: preloaderFood;
          animation: preloaderFood;
  -webkit-animation-duration: 1900ms;
          animation-duration: 1900ms;
  -webkit-animation-timing-function: cubic-bezier(0.69, 0.8, 0.69, 0.8);
          animation-timing-function: cubic-bezier(0.69, 0.8, 0.69, 0.8);
  -webkit-animation-fill-mode: forwards;
          animation-fill-mode: forwards;
  -webkit-animation-delay: 900ms;
          animation-delay: 900ms;
}

/* --------------------- RESPONSIVE DESIGN DESKTOP ---------------- */
@media (min-width: 768px) {
  /* BASES DU RESPONSIVE */
  body {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: center;
        -ms-flex-pack: center;
            justify-content: center;
  }
  main {
    width: 90%;
    margin-top: 2.5%;
    margin-bottom: 5%;
    -webkit-box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
            box-shadow: rgba(0, 0, 0, 0.35) 0px 5px 15px;
    border-radius: 30px;
  }
  footer {
    border-radius: 0px 0px 30px 30px;
  }
  /* RUBRIQUE "FONCTIONNEMENT" */
  header .fonctionnement {
    margin-bottom: 5rem;
  }
  header .fonctionnement__titre {
    text-align: center;
    margin-bottom: 5rem;
    font-size: 3.5rem;
  }
  header .fonctionnement__etapes {
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    width: 100%;
  }
  header .fonctionnement__etapes__etape {
    padding-right: 3rem;
    margin-right: 1rem;
  }
  header .fonctionnement__etapes__etape-3 {
    padding-right: 3rem;
  }
  #restaurants {
    display: -ms-grid;
    display: grid;
    -ms-grid-columns: 50% 50%;
        grid-template-columns: 50% 50%;
    -ms-grid-rows: 15% 40% 40%;
        grid-template-rows: 15% 40% 40%;
        grid-template-areas: "titre titre"
 "restaurant1 restaurant2"
 "restaurant3 restaurant4";
  }
  #restaurants h2 {
    -ms-grid-row: 1;
    -ms-grid-column: 1;
    -ms-grid-column-span: 2;
    grid-area: titre;
    text-align: center;
    font-size: 3.5rem;
    -webkit-transform: translateX(-2.75%);
            transform: translateX(-2.75%);
  }
  #restaurants .restaurant {
    height: 50rem;
  }
  #restaurants .restaurant i {
    margin-left: 92%;
  }
  #restaurants .restaurant i:hover + .fa-solid {
    margin-left: 92%;
  }
  #restaurants .restaurant1 {
    -ms-grid-row: 2;
    -ms-grid-column: 1;
    grid-area: restaurant1;
    margin-bottom: 10rem;
  }
  #restaurants .restaurant2 {
    -ms-grid-row: 2;
    -ms-grid-column: 2;
    grid-area: restaurant2;
    margin-bottom: 10rem;
  }
  #restaurants .restaurant3 {
    -ms-grid-row: 3;
    -ms-grid-column: 1;
    grid-area: restaurant3;
  }
  #restaurants .restaurant4 {
    -ms-grid-row: 3;
    -ms-grid-column: 2;
    grid-area: restaurant4;
  }
  /* LES PAGES "RESTAURANTS" */
  .photo-laPaletteDuGout {
    min-height: 35rem;
  }
  .photo-laNoteEnchantee {
    min-height: 35rem;
  }
  .photo-aLaFrançaise {
    min-height: 35rem;
  }
  .photo-leDeliceDesSens {
    min-height: 35rem;
  }
  .menu__section__choix:hover > .choix-texte > .choix__soustitre {
    max-width: 20rem;
  }
  .menu__section__choix:hover > .choix-texte > .choix__titre {
    max-width: 20rem;
    -webkit-transition: max-width 450ms;
    transition: max-width 450ms;
  }
  .menu__section__choix .prix {
    margin-left: 75%;
    font-size: 1.7rem;
    padding-top: 3rem;
  }
  .menu__section__choix .choix-texte {
    text-overflow: unset;
  }
  .menu__section__choix .choix-texte .choix__titre {
    overflow: visible;
    text-overflow: unset;
  }
  .menu__section__choix .choix-texte .choix__soustitre {
    overflow: visible;
    text-overflow: unset;
  }
}

@media (max-width: 1600px) {
  .menu .prix {
    margin-left: 74%;
  }
}

@media (max-width: 1440px) {
  .menu .prix {
    margin-left: 69%;
  }
}

@media (max-width: 1300px) {
  .menu .prix {
    margin-left: 69%;
  }
}

@media (max-width: 1250px) {
  .menu .prix {
    margin-left: 67%;
  }
}

@media (max-width: 1200px) {
  .menu .prix {
    margin-left: 65%;
  }
}

@media (max-width: 1150px) {
  .menu .prix {
    margin-left: 63%;
  }
}

@media (max-width: 1100px) {
  .menu .prix {
    margin-left: 61%;
  }
}

@media (max-width: 1024px) {
  .menu .prix {
    margin-left: 60%;
  }
}

@media (max-width: 967px) {
  .menu .prix {
    margin-left: 55%;
  }
}

@media (max-width: 810px) {
  .menu .prix {
    margin-left: 50%;
  }
}

@media (max-width: 768px) {
  .menu .prix {
    margin-left: 45%;
  }
}

@media (min-width: 768px) {
  #restaurants .restaurant i {
    margin-left: 85%;
  }
  #restaurants .restaurant i:hover + .fa-solid {
    margin-left: 85%;
  }
  #restaurants .restaurant .nouveau {
    margin-left: 69%;
    top: 5%;
  }
  footer {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
        -ms-flex-direction: row;
            flex-direction: row;
    -webkit-box-pack: justify;
        -ms-flex-pack: justify;
            justify-content: space-between;
    -webkit-box-align: center;
        -ms-flex-align: center;
            align-items: center;
  }
  footer ul {
    display: -webkit-box;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-pack: space-evenly;
        -ms-flex-pack: space-evenly;
            justify-content: space-evenly;
    position: relative;
    right: 2%;
  }
  footer ul li {
    font-size: 1.2rem;
    margin-right: 2rem;
  }
}

@media (max-width: 420px) {
  .menu .prix {
    margin-left: 10%;
  }
  #restaurants .restaurant .nouveau {
    margin-left: 74%;
    top: 7%;
  }
}

@media (max-width: 350px) {
  .menu .prix {
    margin-left: -5%;
  }
  #restaurants .restaurant .nouveau {
    margin-left: 70%;
  }
}

@media (min-width: 1368px) {
  #restaurants .restaurant .nouveau {
    margin-left: 82.5%;
    font-size: 1.7rem;
  }
}

@media (min-width: 810px) {
  #restaurants .restaurant i {
    margin-left: 87%;
  }
  #restaurants .restaurant i:hover + .fa-solid {
    margin-left: 87%;
  }
}
/*# sourceMappingURL=main.css.map */