/* ================================================================================================================================== */
/* ================================================================================================================================== */

/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* =================================================== BODY * POLICE * @KEYFRAMES =================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */

body {
  margin: 0;
}

/* =========================================================== POLICE =============================================================== */

@font-face {
  font-family: "roboto";
  src: url("./fonts/Roboto/Roboto-Light.ttf") format("truetype");
}
@font-face {
  font-family: "robotomregular";
  src: url("./fonts/Roboto/Roboto-Regular.ttf") format("truetype");
}
@font-face {
  font-family: "robotobold";
  src: url("./fonts/Roboto/Roboto-Medium.ttf") format("truetype");
}
@font-face {
  font-family: "Shrikhand";
  src: url("./fonts/Shrikhand/Shrikhand-Regular.ttf") format("truetype");
}

p,
.p_footer2 {
  font-family: "roboto", sans-serif;
}

h1,
h2,
.span_plat_section1_menufr {
  font-family: "robotobold", sans-serif;
}

h3,
h4 {
  font-family: "robotoregular", sans-serif;
}

.h2_section1_menufr {
  font-family: "Shrikhand", sans-serif;
}

/* ========================================================== KEYFRAMES ============================================================= */

@keyframes animplat {
  from {
    opacity: 0;
    transform: translateY(20px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes glissement {
  from {
    margin-right: -60px;
  }

  to {
    margin-right: 0%;
  }
}

@keyframes rotation {
  from {
    transform: rotate(180deg);
  }

  to {
    transform: rotate(0deg);
  }
}

/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ============================================================== NAV =============================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */

.div_logo_nav_menufr {
  width: 100%;
  display: flex;
  align-items: center;
  margin-top: 20px;
  margin-bottom: 10px;
  background-color: white;
}

.div_icone_nav_menufr {
  width: 10%;
  text-align: center;
  position: absolute;
}

.logo_nav_menufr {
  width: 200px;
  margin-left: auto;
  margin-right: auto;
}

.fleche_header {
  color: black;
}

/* ======================================================= NAV "NOTE ENCHANTEE" ===================================================== */

.header_enchantee {
  z-index: 1;
  position: sticky;
}

.div_logo_nav_menuenchantee {
  width: 100%;
  display: flex;
  align-items: center;
  padding-top: 20px;
  padding-bottom: 20px;
  background-color: white;
}

/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ============================================================= PHOTO ============================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */

.img_img {
  width: 100%;
  position: absolute;
}

/* ====================================================== PHOTO "NOTE ENCHANTEE" ==================================================== */

.img_img_enchantee {
  width: 100%;
  position: absolute;
  top: -24px;
}

/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ============================================================ SECTION 1 =========================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */

.section1_menufr {
  position: relative;
  background-color: #f5f3f3;
  top: 165px;
  border-radius: 35px 35px 0 0;
  padding-bottom: 75px;
}

.div_titre_menufr {
  display: flex;
  padding-top: 8px;
  align-items: center;
  font-size: 1.2em;
  width: 90%;
  margin: auto;
}

.div_block_menufr {
  width: 90%;
  margin: auto;
}

.h2_section1_menufr {
  width: 90%;
}

.h3_section1_menufr {
  width: 50px;
  padding-bottom: 5px;
  border-bottom: 3px solid #54d7b3a6;
}

.div_plat_section1_menufr {
  box-shadow: 00 0 11px #d7d7d7;
  background-color: white;
  border-radius: 15px;
  width: 100%;
  display: flex;
  align-items: end;
  margin-bottom: 16px;
  justify-content: space-between;
  height: 65px;
  overflow: hidden;
}

.p_plat_section1_menufr {
  margin-top: 0px !important;
}

.h4_plat_section1_menufr,
.p_plat_section1_menufr {
  margin-left: 15px !important;
}

.h4_plat_section1_menufr,
.p_plat_section1_menufr,
.span_plat_section1_menufr {
  margin: 8px;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  margin-right: 20px;
}

.div_block3_menufr,
.div_block2_menufr {
  padding-top: 8px;
}

.div_plat_entree {
  overflow: hidden;
}

/* ====================================================== ANIMATION DES PLATS ======================================================= */

.div_anim_entree_1 {
  animation: animplat 1s linear both;
}
.div_anim_entree_2 {
  animation: animplat 1s linear 0.25s both;
}
.div_anim_entree_3 {
  animation: animplat 1s linear 0.5s both;
}
.div_anim_entree_4 {
  animation: animplat 1s linear 0.75s both;
}

.div_anim_plat_1 {
  animation: animplat 1s linear 0.75s both;
}
.div_anim_plat_2 {
  animation: animplat 1s linear 1s both;
}
.div_anim_plat_3 {
  animation: animplat 1s linear 1.25s both;
}

.div_anim_dessert_1 {
  animation: animplat 1s linear 1.5s both;
}
.div_anim_dessert_2 {
  animation: animplat 1s linear 1.75s both;
}
.div_anim_dessert_3 {
  animation: animplat 1s linear 2s both;
}
/* =============================================== ANIMATION DES PLATS "NOTE ENCHANTEE" ============================================= */

.div_anim_plat_1_nte {
  animation: animplat 1s linear 1s both;
}
.div_anim_plat_2_nte {
  animation: animplat 1s linear 1.25s both;
}
.div_anim_plat_3_nte {
  animation: animplat 1s linear 1.5s both;
}

.div_anim_dessert_1_nte {
  animation: animplat 1s linear 1.75s both;
}
.div_anim_dessert_2_nte {
  animation: animplat 1s linear 2s both;
}
.div_anim_dessert_3_nte {
  animation: animplat 1s linear 2.25s both;
}

/* =============================================== ANIMATION BOUTTON VALIDEE DES PLATS  ============================================= */

.div_prix_anim {
  display: flex;
  height: 100%;
  margin-right: -64px;
  transition: margin-right ease 0.2s;
}

.div_prix {
  margin: auto;
  margin-bottom: 8px;
}

.div_anim {
  padding: 24px;
  background-color: #99e2d0;
  border-radius: 0 15px 15px 0;
}

.valid_icon {
  color: white;
  transform: rotate(180deg);
}

.div_plat_section1_menufr:hover .div_prix_anim {
  margin-right: 0px;
}

.div_plat_section1_menufr:hover .valid_icon {
  animation-duration: 0.2s;
  animation-name: rotation;
  animation-fill-mode: forwards;
}

/* ======================================================= BOUTON COMMANDER ========================================================= */

.div_btn_menu {
  width: 175px;
  text-align: center;
  border-radius: 50px;
  margin: auto;
  background: linear-gradient(#ff79da, #9356dc);
  margin-top: 50px;
}

.btn_menu {
  color: white;
  border: 0;
  font-size: 1em;
}

.div_btn_menu:hover {
  background: linear-gradient(#ff79daad, #9356dccf);
  box-shadow: 1px 7px 10px #cbcbcbc7;
}
/* ================================================================================================================================== */
/* ================================================================================================================================== */
/* ============================================================ FOOTER ============================================================== */
/* ================================================================================================================================== */
/* ================================================================================================================================== */

footer {
  margin-top: 165px;
}

/* ============================================================== END =============================================================== */
/* ================================================================================================================================== */