@import url("https://fonts.googleapis.com/css2?family=Hind:wght@300;500&family=Raleway:ital,wght@0,300;0,500;0,700;1,300;1,500;1,700&display=swap");



:root {
  --neutral-light: #dee3e6;
  --neutral-extra-light: #f1f4f6;
  --neutral: #807d7d;
  --neutral-dark: #505050;
  --white: #ffffff;
  --primary-light: #e9f7be;
  --primary-extralight: #f7fbea;
  --primary-dark: #0f2d00;
  --primary: #82bc00;
  --error-light: #e05a42;
  --error-extralight: #ffd4cc;
  --error-dark: #c7341a;
  --error: #c7341a;
  --info-light: #76bcf8;
  --info-extralight: #d0effd;
  --info-dark: #013252;
  --info: #2196f3;
  --warning-light: #ffbe58;
  --warning-extralight: #fff2de;
  --warning-dark: #ff9800;
  --warning: #ff9800;
  --success-light: #e9f7be;
  --success-extralight: #f7fbea;
  --success-dark: #0f2d00;
  --success: #82bc00;
}
form#MemberLoginForm_LoginForm {
  margin-top: 90px;
}
/* These are the default styles for the Simple theme */
body {
  font-size: 20px; /* This overrides the browsers default font size */
  line-height: 26px; /* If you change the font-size make sure you change the line-height value as well - the usual ratio is around 1.5 (font-size x 1.5 = line-height) */
  color: var(--primary-dark);
  font-family: "Roboto", "Raleway", sans-serif;
}
body a {
  text-decoration: none;
} /* this removes the underline from all links */
body a:link {
  color: inherit;
} /* this sets the highlight color when links are tapped on Safari (browser) on iPhone */

.AnimationPage .main #mainContent,
.RecipesPage .main #mainContent,
.MagazinePage .main #mainContent,
.RestaurantPage .main #mainContent,
.Qualite .main {
  padding-top: 80px;
}
.RestaurantPage .main #mainContent {
  padding-top: 100px;
}

/* HEADERS */
h1,
h2,
.section.feedInsta .sectionTitle h2,
h3,
h4,
h5,
h6 {
  font-family: "Bricolage Grotesque"; /* This references one of the custom @font-face fonts - the other fonts that are referenced are fallbacks for browsers that don't support @fontface */
  font-weight: normal;
  margin-bottom: 10px;
  color: var(--primary);
}

h1 {
  font-size: 36px;
  line-height: 45px;
  margin: 0 0 25px 0;
  padding-bottom: 5px;
}
h2,
.section.feedInsta .sectionTitle h2 {
  font-size: 30px;
  line-height: 35px;
  font-family: "Roboto", "Raleway", Times, serif;
}
.typography h3 {
  font-size: 22px;
  line-height: 30px;
  margin-bottom: 10px;
}
.typography h4 {
  font-size: 18px;
  line-height: 25px;
  margin-bottom: 5px;
}
.typography h5 {
  font-size: 16px;
  line-height: 20px;
  margin-bottom: 5px;
}
.typography h6 {
  font-size: 14px;
  line-height: 20px;
  font-weight: bold;
  margin-bottom: 5px;
}

/* PARAGRAGHS */
.typography p {
  font-size: 20px;
  line-height: 26px;
  margin: 0 0 20px;
}
.typography .intro {
  font-family: "Roboto", "Raleway", Times, serif;
  font-size: 22px;
  line-height: 32px;
  margin-bottom: 20px;
}
.typography em {
  font-style: italic;
}

::selection,
::-moz-selection {
  /* Applies style to highlighted portion of a page */
  background: var(--primary-dark);
  color: var(--white);
  text-shadow: none;
}

/* LINKS */
.typography a,
.typography a.intro {
  color: inherit;
  text-decoration: none;
}
.typography a:hover {
  color: inherit;
  border-bottom: 1px dashed inherit;
}
.typography a:focus {
}

/* LIST STYLES
-------------------------------------------- */
.typography ul,
.typography ol,
.typography dl {
  margin: 0 0 20px 25px;
}

.typography li {
  margin-bottom: 5px;
}

/* TABLE STYLES
-------------------------------------------- */
.typography table {
  border-collapse: collapse; /* borders are collapsed into a single border when possible */
  border: 1px solid var(--neutral-extra-light);
  border-spacing: 0; /* The border-spacing property sets the distance between the borders of adjacent cells - acts as a backup to border-collapse: collapse */
  margin: 0 0 10px;
  text-align: left;
}
.typography table tr:nth-child(even) {
  background-color: #ededed;
}
.typography table tr.even,
.typography table th,
.typography thead td {
  background-color: var(--neutral-light);
}
.typography table td,
.typography table th {
  padding: 2px 5px;
  border: 1px solid var(--neutral-light);
  vertical-align: top;
}
.typography table th {
  font-weight: bold;
}

/* WYSIWYG EDITOR ALIGNMENT CLASSES 
-------------------------------------------- */
.typography .left {
  text-align: left;
}
.typography .center {
  text-align: center;
}
.typography .right {
  text-align: right;
}

/* IMAGES 
-------------------------------------------- */

.typography .captionImage {
  width: 100%;
  margin-top: 5px;
}
.typography .captionImage img {
  margin: 0;
}
.typography .captionImage.left {
  float: left;
  margin: 5px 30px 20px 0px;
}
.typography .captionImage.right {
  float: right;
  margin: 5px 0 20px 30px;
}
.typography .captionImage.left[style],
.typography .captionImage.right[style] {
  max-width: 50%; /* Overides core width to make responsive */
}
.typography .captionImage.left img,
.typography .captionImage.right img {
  float: none;
  max-width: none;
  width: 100%;
}
.typography .captionImage.left img {
  margin-right: -10px;
}
.typography .captionImage.right img {
  margin-left: -10px;
}
.typography .captionImage.right p {
  margin-left: -10px;
  text-align: left;
  margin-left: -10px;
}
.typography .captionImage.leftAlone {
  float: none;
  margin: 0 20px 20px 0px;
}
.typography .captionImage.center {
  margin: 0 auto 20px;
}
.typography .captionImage p {
  clear: both;
  margin: 5px 0;
  font-style: italic;
  color: inherit;
}

/* BLOCKQUOTES
-------------------------------------------- */
.typography blockquote {
  background: transparent url(../images/blockquote.png) no-repeat 0px 6px;
  font-family:
    "Roboto",
    "Raleway" Times,
    serif;
  color: inherit;
  display: block;
  font-style: italic;
  margin: 0 0 20px;
  float: right;
  text-indent: 30px;
  width: 50%;
  margin-left: 5%;
  clear: both;
}
.typography blockquote p {
  font-size: 17px;
  line-height: 25px;
}
.typography pre {
  background: inherit;
  border: 1px solid inherit;
  font-family: "Roboto", monospace;
  margin: 0 0 20px 0;
  padding: 15px;
  clear: both;
}

/*  OVERWRITE BOOTSTRAP */
a {
  color: inherit;
  text-decoration: none;
  background-color: transparent;
}
a:hover {
  color: inherit;
  text-decoration: underline;
}
.socials a:hover {
  color: inherit;
  text-decoration: none;
}
.gap-2 {
  gap: 10px;
}
.scrollXContainer {
  width: 100%;
  overflow-x: scroll;
  overflow-y: hidden;
}
.scrollXContainer::-webkit-scrollbar {
  opacity: 0;
}
.scrollYContainer {
  width: 100%;
  overflow-y: scroll;
  overflow-x: hidden;
}
.scrollYContainer::-webkit-scrollbar {
  opacity: 0;
}
.dropdown-item {
  &.active {
    background-color: var(--primary);
  }
}
.btn {
  width: fit-content;
  min-width: 114px;
  border-radius: 50px;
  min-height: 44px;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
  padding: 0 20px;
  &:focus {
    box-shadow: none;
  }
  &:focus-visible {
    outline: none;
  }
}
.btn span {
  line-height: 44px;
  cursor: pointer;
}
/* primary */
.btn.primary {
  border: 1px solid var(--primary);
  background-color: var(--primary);
  color: var(--white);
  z-index: 100;
}
.btn.primary svg {
  fill: white;
}
.btn.primary:hover {
  background-color: var(--primary-extralight);
  color: var(--primary-dark);
}
.btn.primary:hover svg {
  fill: var(--primary-dark);
}
/* outlined */
.btn.primary.outlined {
  border: 1px solid white;
  background-color: white;
  color: var(--primary);
  z-index: 100;
  padding: 0 6px;
}
.btn.primary.outlined svg {
  fill: var(--primary);
}
.btn.primary.outlined:hover {
  background-color: var(--primary-extralight);
  color: var(--primary-dark);
}
.btn.primary.outlined:hover svg {
  fill: var(--primary-dark);
}
/* neutral */
.btn.neutral {
  border: 1px solid var(--neutral);
  background-color: var(--neutral);
  color: var(--white);
}
.btnWeek {
  border: none;
  background-color: transparent;
  color: var(--primary);
  text-decoration: underline;
  &:disabled {
    color: var(--neutral);
    pointer-events: none;
  }
}
.btn.neutral svg {
  fill: white;
}
.btn.neutral:hover {
  background-color: var(--neutral-extralight);
  color: var(--neutral-dark);
}
.btn.neutral:hover svg {
  fill: var(--neutral-dark);
}

.Error {
  margin-top: 67px;
  display: flex;
  min-height: calc(100dvh - 300px);
  flex-direction: column;
  align-items: center;
  justify-content: center;

  h1 {
    font-size: 130px;
    line-height: 135px;
  }
}
.header {
  position: fixed;
  z-index: 1000;
  background-color: var(--white);
  width: 100%;
  border-bottom: 1px solid var(--neutral-light);
  height: fit-content;
}
.multiNav {
  width: 100%;
  .arrow {
    margin: 0 6px;
    font-size: 12px;
    display: none;
  }
  .level2.dropdown {
    background-color: var(--primary);
    button {
      &.btn {
        &.primary {
          &.outlined {
            width: 100%;
            justify-content: space-between;
            background-color: var(--primary);
            border: none;
            color: white;
          }
        }
      }
    }
    .dropdown-menu.show {
      width: 100%;
    }
  }
  .level3.dropdown {
    background-color: var(--primary);
    button {
      &.btn {
        &.primary {
          &.outlined {
            width: 100%;
            justify-content: space-between;
            background-color: var(--primary);
            border: none;
            color: white;
          }
        }
      }
    }
    .dropdown-menu.show {
      width: 100%;
    }
  }
}

.header.isOpen {
  border-bottom: 5px solid var(--primary);
}
.headerContent {
  height: 80px;
}
.headerLogo {
  height: 80px;
  width: 100px;
  display: flex;
  align-items: center;
}
.headerLogo img {
  height: auto;
  width: 100%;
}
.header .langs .lang span {
  margin: 0 auto;
  line-height: 32px;
}
.header .langs .lang {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
  align-items: center;
  justify-content: center;
}
.header .langs .lang.unSelected {
  border: 1px solid var(--white);
  background-color: var(--white);
}
.header .langs .lang.selected {
  border: 1px solid var(--primary);
  background-color: var(--primary-extralight);
}
.header .iconsMenu .isClosed svg.bi-list {
  height: 44px;
  width: 44px;
  color: var(--primary);
  display: none;
}
.header .iconsMenu .isOpen svg.bi-x-lg {
  height: 30px;
  width: 30px;
  color: var(--primary-dark);
  display: none;
}
.header.isOpen .iconsMenu .isOpen svg.bi-x-lg,
.header.isClosed .iconsMenu .isClosed svg.bi-list {
  display: block;
  cursor: pointer;
}
.header .headerNavigation {
  display: flex;
  transition: all;
  overflow: hidden;
  transition: height 0.3s ease;
  height: 0;
  opacity: 0;
}
.header.isClosed .headerNavigation {
  height: 0;
  opacity: 0;
}

.header.isOpen .headerNavigation {
  height: calc(100vh - 90px);
  opacity: 1;
}
.headerNavigation nav.navigation.mainNav {
  display: flex;
  flex-direction: column;
  justify-content: space-evenly;
  flex: 1;
}

.headerNavigation nav.navigation.mainNav ul.list li.listItem a.link {
  font-size: 20px;
  height: 60px;
  border-bottom: 1px solid var(--primary-light);
}
.headerNavigation nav.navigation.mainNav ul.list li.listItem.link a.link:hover {
  text-decoration: none;
  font-size: 21px;
  color: var(--primary);
  border-bottom: 2px solid var(--primary);
}

.headerNavigation nav.navigation.mainNav ul.list li.listItem.current {
  color: var(--primary);
}
.headerNavigation nav.navigation.mainNav ul.list li.listItem.current a.link {
  border-bottom: 1px solid var(--primary);
}
.headerNavigation nav.navigation.mainNav ul.list li.listItem.current a.link:hover {
  text-decoration: none;
}
.mapContainer {
  #map {
    height: 180px;
    filter: sepia(0.1) saturate(0.6) brightness(1.05) grayscale(0.4);
  }
  .adress {
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 20px;
    justify-content: center;
    align-items: center;
    text-align: center;
    h3 {
      font-family: "Bricolage Grotesque";
    }
  }
}
.contactlist.d-flex {
  padding: 20px;
  background-color: var(--neutral-extra-light);
  .content {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;

    gap: 5dvw;
    h2 {
      font-family: "Bricolage Grotesque";
    }
    .contactitem {
      /* flex: 1; */
      min-width: 215px;
      h3 {
        font-family: "Bricolage Grotesque";
        margin-bottom: 10px;
      }
      .mail {
        color: var(--primary);
      }
    }
  }
}
.openningHours {
  flex-direction: column;
  justify-content: center;
  padding: 20px;
  gap: 5dvw;
  background-color: var(--primary-extralight);
  h2 {
    font-family: "Bricolage Grotesque";
    margin-bottom: 10px;
  }
  .text {
    display: flex;
    flex-direction: column;
    gap: 8px;
  }
}
.footer {
  background-color: var(--primary);
  color: var(--white);
  padding: 20px 0;
  .adress {
    min-width: 170px;
  }
}
.footer strong {
  font-size: 16px;
  font-family: "Bricolage Grotesque";
}
.footer .info {
  padding: 0 20px 20px 20px;
  display: flex;
  flex-direction: column;
  gap: 15px;
}
.footerLogo {
  padding: 60px;
  border-top: 1px solid var(--white);
}
.footerLogo img.logoImage {
  width: 100%;
  height: auto;
}
.socials {
  position: relative;
  bottom: 0;
  margin-top: 30px;
  height: 44px;
  gap: 4px;
  .social-icon {
    height: 44px;
    width: 44px;
    fill: var(--neutral);
  }
  #facebookIcon.social-icon g g circle.cls-2,
  #instaIcon.social-icon g g path.cls-1,
  #youtubeIcon.social-icon g path.cls-1 {
    fill: var(--neutral);
  }
  #facebookIcon.social-icon:hover g g circle.cls-2,
  #instaIcon.social-icon:hover g g path.cls-1,
  #youtubeIcon.social-icon:hover g path.cls-1,
  #linkedinIcon.social-icon:hover path {
    fill: var(--primary);
  }
}
.feedInsta .sectionTitle .socials {
  margin-top: 0;
}
.noMobile .socials {
  position: unset;
  bottom: unset;
  margin-top: unset;
  gap: 5px;
}

/* section  base */
.section {
  flex-direction: column;
  justify-content: space-between;
  gap: 20px;
  align-items: center;
  margin: 120px 0;
  .filters {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 20px;
    .days {
      .select {
        width: 100%;
      }
    }
    .filterListB {
      display: flex;
      flex-direction: column;
      gap: 4px;
      .btn {
        width: 100%;
      }
    }
  }
}
.section.feedInsta {
  margin-bottom: 0;
  overflow-x: hidden;
}
.section .sectionTitle {
  justify-content: space-between;
  align-items: center;
  width: 100%;
  flex-direction: column;
}
.section .sectionTitle h2,
.section .sectionTitle div h2,
.section.feedInsta .sectionTitle h2 {
  line-height: 45px;
  text-align: center;
}
.section .labels {
  margin-right: 20px;
}
.section .labels .label {
  height: 70px;
  width: 70px;
  gap: 10px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.section .labels .label img {
  height: 70px;
  width: auto;
}

.sectionContent,
.kitchen,
.advice,
.survey {
  width: 100%;
  background-color: var(--neutral-extra-light);
  padding: 20px;
  border-radius: 4px;
  overflow-y: hidden;
  display: flex;
  align-items: center;
  flex-direction: column;
}

.sectionContent {
  .d-flex {
    flex-direction: column;
    width: 100%;
    overflow: hidden;
    gap: 20px;
    .card {
      padding: 12px;
      display: flex;
      flex-direction: column;
      gap: 8px;
      justify-content: space-between;
      border-color: white;
      &:hover {
        border-width: 2px;
        border-color: var(--primary);
        background-color: var(--primary-extralight);
      }
      .visual {
        height: 300px;
        width: 300px;
        border-radius: 50%;
        overflow: hidden;
        margin: 0 auto;
        img {
          height: 100%;
          width: 100%;
          object-fit: cover;
        }
      }
      .title {
        text-align: center;
      }
      .info {
        text-align: center;
      }
      a {
        margin: 0 auto;
      }
    }
  }
}
.kitchen::-webkit-scrollbar,
.advice::-webkit-scrollbar {
  opacity: 0;
}
.kitchenRecipe,
.adviceArticle {
  justify-content: space-evenly;
  gap: 20px;
  width: fit-content;
  flex-direction: column;
}
.kitchen .cardRecipe,
.advice .cardArticle {
  width: unset;
  height: unset;
  border: none;
}
.kitchen .cardRecipe .avatar,
.advice .cardArticle .avatar {
  height: 245px;
}
.kitchen .cardRecipe .avatar .avatarImg,
.advice .cardArticle .avatar .avatarImg {
  height: 100%;
  overflow: hidden;
  display: flex;
  justify-content: center;
}
.kitchen .cardRecipe .avatar .avatarImg img,
.advice .cardArticle .avatar .avatarImg img {
  height: 100%;
  width: auto;
  object-fit: cover;
}
.kitchen .cardRecipe .recipe,
.advice .cardArticle .article,
.recipeList .cardRecipe .recipe {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
}
.recipeList .cardRecipe .recipe .recipeTitle,
.kitchen .kitchenRecipe .recipe .recipeTitle,
.advice .cardArticle .article .articleTitle {
  text-align: center;
  width: 100%;
  font-size: 18px;
  color: var(--primary);
}
.actuality,
.animationMain,
.eldoraApp,
.pulpeMain,
.customSection {
  display: flex;
  flex-direction: column;
  gap: 25px;
}
.magazineList .pulpeMain {
  margin: 0 0 50px 0;
}
.actualityVisuel,
.animationMainVisuel,
.eldoraAppVisuel,
.pulpeMainVisuel,
.customVisuel {
  width: calc(100vw - 8px);
  height: calc(100vw - 8px);
  border-radius: 4px;
  overflow: hidden;
  background-color: var(--neutral-light);
  position: relative;
}
.pulpeMain .pulpeMainVisuel {
  .visuelBG {
    background-color: white;
  }
}
.pulpeMain .pulpeMainVisuel {
  .visuelImg {
    padding: 0;
    img {
      width: 100%;
      height: 100%;
      margin: 0 auto;
      object-fit: cover;
      object-position: center;
    }
  }
}
.animationMainVisuel,
.eldoraAppVisuel,
.customVisuel {
  height: 600px;
}
.visuelBG {
  width: 100%;
  height: 100%;
  background-image: url(../images/base-food-bg-aplat-white.png);
  opacity: 50%;
  background-size: cover;
  background-repeat: no-repeat;
  position: absolute;
  top: 0;
  left: 0;
}
.visuelImg {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  padding: 20px;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-radius: 4px;
}
.visuelImg img {
  width: 100%;
  height: auto;
  margin: 0 auto;
}
.animationMainVisuel .visuelImg,
.eldoraAppVisuel .visuelImg,
.customVisuel .visuelImg {
  width: 360px;
  height: 560px;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  position: relative;
}
.customVisuel .visuelImg {
  width: 100%;
  height: 100%;
  padding: 0;
}
.eldoraAppVisuel .visuelAnimation,
.customVisuel .visuelAnimation {
  top: 53px;
  left: 74px;
  height: 468px;
  width: 215px;
  z-index: 100;
}
.eldoraAppVisuel.takeandpay .visuelAnimation,
.customVisuel .visuelAnimation {
  top: 50%;
  left: 50%;
  height: 225px;
  width: 400px;
  z-index: 100;
  transform: translate(-50%, -50%);
}
.eldoraAppVisuel.takeandpay .visuelAnimation iframe {
  width: 100%;
  height: 100%;
}
.animationMainVisuel .visuelImg img,
.eldoraAppVisuel .visuelImg img,
.customVisuel .visuelImg img {
  width: auto;
  height: 100%;
}
.obj-fit-contain .customVisuel .visuelImg img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}
.actualityTexts,
.animationMainTexts,
.eldoraAppTexts,
.pulpeMainTexts,
.customTexts {
  flex-direction: column;
  width: calc(100vw - 8px);
  height: calc(100vw - 8px);
  text-align: center;
  gap: 25px;
  height: fit-content;
  p{
    a{
      color: var(--primary);
      text-decoration: underline;
      font-weight: bold;
    }
  }
}
.animationMainTexts,
.eldoraAppTexts,
.pulpeMainTexts,
.customTexts {
  gap: unset;
}
.pulpeMainTexts {
  .btn {
    margin: 0 auto;
  }
}
.eldoraAppTexts,
.customTexts {
  align-items: center;
  gap: 20px;
}
.select {
  border-color: var(--primary);
  border-radius: 50px;
  height: 44px;
  padding: 0 20px;
  background: url(../images/chevron-down.svg) no-repeat;
  background-position: calc(100% - 10px) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 30px !important;
  min-width: 120px;
}
fieldset#catType {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: normal;
  justify-content: center;
  padding: 4px;
}
fieldset#allergenType {
  display: flex;
  flex-direction: column;
  gap: 8px;
  align-items: normal;
  justify-content: center;
  padding: 4px;
}

/* slider */
#sliderPromo {
  margin-top: 100px;
  .slideCustom {
    width: 100%;
    padding: 8px;
    background-color: var(--neutral-extra-light);
    border-radius: 6px;
    margin: 4px 10px;
    .slideCustomVisuel {
      width: 100%;
      height: 360px;
      border-radius: 4px;
      overflow: hidden;
      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        object-fit: cover;
        margin: 0 auto;
      }
    }
    .slidecustomTexts {
      width: 100%;
      flex-direction: column;
      padding: 14px 0;
      h3 {
        margin: 0;
      }
      p {
        margin: 0;
        font-size: 0.9rem;
        line-height: 0.95rem;
      }
      a {
        color: var(--primary);
      }
    }
  }
}
.slick-track {
  display: flex;
  gap: 8px;
}
button.slick-prev.slick-arrow {
  position: absolute;
  z-index: 10;
  left: -54px;
  top: 50%;
  color: var(--primary);
  border: none;
  border-radius: 44px;
  height: 44px;
  width: 44px;
  transform: translate(0, -50%);
  svg {
    transform: rotate(180deg);
  }
}

button.slick-next.slick-arrow {
  position: absolute;
  z-index: 10;
  right: -54px;
  top: 50%;
  color: var(--primary);
  border: none;
  border-radius: 44px;
  height: 44px;
  width: 44px;
  transform: translate(0, -50%);
}
/* slider */

/* START subNav */
.subNav {
  position: absolute;
  top: 97px;
  left: 0;
  background-color: white;
  z-index: 1;
  height: fit-content;
  width: 100%;
  padding: 0 10px;
  font-size: 14px;
  display: flex;
  align-items: center;
  .navList {
    display: flex;
    gap: 10px;
    text-decoration: underline;
  }
}
/* END subNav */

/* hero banner */

.heroBanner {
  position: relative;
  width: 100%;
  height: calc(100dvh - 80px); /* Hauteur de la fenêtre visible */
  overflow: hidden;
  top: 80px;
}

/* Style pour la vidéo de fond */
.videoBackground,
.imgBackground {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  z-index: -1;
}

/* Style pour le fond semi-transparent */
.overlay {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Opacité faible */
  z-index: 0;
}

/* Style pour le bloc de texte */
.heroBanner .textBlock {
  position: absolute;
  color: var(--white);
  text-align: center;
  width: 100%;
  margin: auto;
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  right: 0;
  text-align: center;
  height: calc(100% - 110px);
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
}

/* Style pour le titre */
.heroBanner .textBlock .title {
  font-size: 24px;
  margin-bottom: 20px;
  color: var(--white);
}

/* Style pour le sous-titre */
.heroBanner .textBlock h3 {
  font-size: 30px;
  font-weight: bold;
  color: var(--primary);
}
.arrowBlock {
  height: 44px;
  width: 44px;
  border: 1px solid var(--white);
  border-radius: 44px;
  color: var(--white);
  position: absolute;
  bottom: 30px;
  left: 50%;
  transform: translate(-50%, 0);
  display: flex;
  justify-content: center;
  align-items: center;
  animation: floatArrow 2s infinite;
  cursor: pointer;
}
@keyframes floatArrow {
  0%,
  100% {
    transform: translateY(0);
  }
  50% {
    transform: translateY(-10px);
  }
}
#mainContent {
  padding: 5px;
  width: 100%;
  margin: 0 auto;
  &.magazine {
    padding-top: 80px;
  }
}

/* menu eldorade  */
.filter-container {
  margin-bottom: 2px;
  grid-row-gap: 28px;
  row-gap: 28px;
  .column {
    margin-bottom: -2px;
    .tagEtag {
      position: absolute;
      min-width: 80px;
      display: flex;
      align-items: center;
      justify-content: center;
      background-color: var(--neutral);
      color: white;
      border-radius: 3px;
      height: 24px;
      font-size: 14px;
      top: 5px;
      right: 20px;
      padding: 0 4px;
    }
    .menu {
      height: 100%;
      text-align: center;
      padding: 25px 20px;
      color: #000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 100%;
      border-radius: 6px;
      background: white;
      text-align: center;
      padding: 25px 20px;
      color: #000;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      .menu-info {
        position: relative;
        flex-grow: 1;
        .menu-icon {
          height: 2.5rem;
          margin-bottom: 0.5rem;
          overflow: hidden;
          display: flex;
          align-items: center;
          justify-content: center;
        }
        h3 {
          font-size: 2.25rem;
        }
        h4 {
          font-weight: 400;
        }
        p {
          margin: 0;
          .origins {
            color: var(--neutral);
          }
        }
      }
      .text-muted {
        display: block;
        color: #717173;
        font-size: 100%;
        font-weight: 400;
      }
      .menu-list {
        padding-left: 0;
        margin: 20px -20px -20px;
        list-style: none;
        .menu-list-item {
          padding: 20px 12px;
          border-top: 2px solid #efefef;
          font-size: 0.875rem;
          margin-bottom: 0;
          .nutrition-score-stats {
            position: relative;
            max-width: 140px;
            margin: 0 auto;
            .nutrition-score-stats--bar-container {
              position: absolute;
              display: block;
              top: 4px;
              right: 5%;
              bottom: 4px;
              left: 5%;
              -webkit-animation-play-state: running;
              animation-play-state: running;
              &.nutrition-score-stats--bar-container--animated {
                .nutrition-score-stats--bar {
                  display: block;
                  background: linear-gradient(90deg, #2fa149, #ebec2c 50%, #f50d24);
                  height: 100%;
                  width: var(--percentage);
                  background-size: 200px;
                }
              }
            }
            svg:not(:root) {
              overflow: hidden;
            }
            .nutrition-score-stats--overlay-svg {
              z-index: 1;
              display: flow-root;
              position: relative;
              -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
              filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
            }
          }
        }
      }
      .menu-nutrition-infos-popup {
        display: none;
        .modalBg {
          width: 100vw;
          height: 100vh;
          background-color: var(--neutral-dark);
          opacity: 60%;
          position: absolute;
          top: 0;
          left: 0;
        }
        .mainPopup {
          position: absolute;
          height: 100%;
          width: 100%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: var(--white);
          display: flex;
          flex-direction: column;
          padding: 44px 20px 20px 20px;
          overflow-y: scroll;
          overflow-y: scroll;
          scrollbar-width: thin;
          scrollbar-color: var(--primary) var(--primary-light);
          &::-webkit-scrollbar {
            width: 3px;
          }
          &::-webkit-scrollbar-track {
            background: var(--primary-light); /* Couleur du fond de la scrollbar */
          }
          .menu-nutrition-infos-popup__header {
            display: flex;
            flex-wrap: wrap;
            .menu-nutrition-infos-popup__header__title {
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
            .menu-nutrition-infos-popup__header__icons {
              display: flex;
              margin-left: auto;
              gap: 8px;
              margin-right: 20px;
            }
          }
          .menu-nutrition-infos-popup__body {
            display: -ms-grid;
            display: grid;
            -ms-grid-columns: 1fr;
            grid-template-columns: 1fr;
            grid-gap: 16px 32px;
            gap: 16px 32px;

            .menu-nutrition-infos-popup__body__info {
              text-align: left;
              .menu-nutrition-infos-popup__body__subtitle {
                margin-bottom: 1.5rem;
              }
              p{
                .origins{
                  color: var(--neutral);
                }
              }
              .nutrition-score-stats {
                position: relative;
                max-width: 220px;
                .nutrition-score-stats--bar-container {
                  position: absolute;
                  display: block;
                  top: 4px;
                  right: 5%;
                  bottom: 4px;
                  left: 5%;
                  &.nutrition-score-stats--bar-container--animated {
                    -webkit-animation: growNutritionScoreStatsBar 0.5s ease 0.5s 1 both paused;
                    animation: growNutritionScoreStatsBar 0.5s ease 0.5s 1 both paused;
                    .nutrition-score-stats--bar {
                      display: block;
                      background: linear-gradient(90deg, #2fa149, #ebec2c 50%, #f50d24);
                      height: 100%;
                      width: var(--percentage);
                      background-size: 315px;
                    }
                  }
                }
                svg:not(:root) {
                  overflow: hidden;
                }
                .nutrition-score-stats--overlay-svg {
                  z-index: 1;
                  display: flow-root;
                  position: relative;
                  -webkit-filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
                  filter: drop-shadow(3px 3px 3px rgba(0, 0, 0, 0.2));
                }
              }
            }
            .menu-nutrition-infos-popup__body__co2 {
              text-align: left;
              p {
                font-size: 0.8rem;
                line-height: 1rem;
                span {
                  color: var(--primary);
                }
              }
              font-size: 0.8rem;
              a {
                color: var(--primary);
                text-decoration: underline;
              }
            }
            .menu-nutrition-infos-popup__body__nutrition {
              flex-grow: 0;
              flex-shrink: 0;
              .menu-nutrition-infos-popup__body__subtitle {
                margin-bottom: 1.5rem;
              }
              .menu-nutrition-infos-popup__body__nutrition__table {
                display: flex;
                border-bottom: 1px solid #000;
                padding-bottom: 0.2rem;
                margin-bottom: 0.3rem;
                font-size: 0.8rem;
                justify-content: space-between;
                &:first-child {
                  flex-grow: 1;
                  font-weight: 700;
                  word-break: break-all;
                  margin-right: 0.5rem;
                }
                &:nth-child(2) {
                  white-space: nowrap;
                }
                &:nth-child(3) {
                  white-space: nowrap;
                }
              }
            }
            .menu-nutrition-infos-popup__body__allergens {
              flex-grow: 0;
              flex-shrink: 0;
              /* overflow-x: hidden; */
              .menu-nutrition-infos-popup__body__subtitle {
                margin-bottom: 1.5rem;
              }
              .menu-nutrition-infos-popup__body__allergens__icons {
                display: flex;
                flex-direction: row;
                flex-wrap: wrap;
                margin-right: -8px;
                page-break-inside: avoid;
                -webkit-column-break-inside: avoid;
                break-inside: avoid;
                .menu-nutrition-infos-popup__body__allergens__icons__icon {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  text-align: center;
                  width: 72px;
                  border-radius: 100%;
                  margin-right: 8px;
                  margin-bottom: 8px;
                  img {
                    -o-object-fit: contain;
                    object-fit: contain;
                    width: 100%;
                    height: 72px;
                    margin-bottom: 0.5rem;
                  }
                  div {
                    text-align: center;
                    white-space: nowrap;
                    text-overflow: ellipsis;
                    font-size: 0.8rem;
                    overflow: hidden;
                  }
                }
              }
            }
            .menu-nutrition-infos-popup__body__clause {
              align-items: end;
              display: flex;
              p {
                font-size: 12px;
                line-height: 16px;
                text-align: left;
              }
            }
          }
          .closeModal {
            position: fixed;
            height: 28px;
            width: 28px;
            top: 8px;
            right: 8px;
            background-color: var(--white);
            border-radius: 30px;
            /* padding: 4px; */
            display: flex;
          }
        }

        &.show {
          opacity: 1;
          pointer-events: auto;
          display: block;
          .nutrition-score-stats--bar-container {
            -webkit-animation-play-state: running;
            animation-play-state: running;
          }
        }
      }
      .menu-nutrition-infos-icon {
        border: 2px solid #8abd24;
        width: 20px;
        height: 20px;
        display: flex;
        border-radius: 100%;
        flex-direction: row;
        justify-content: center;
        color: #8abd24;
        font-weight: 700;
        box-shadow: 1px 2px 1px rgba(0, 0, 0, 0.16078);
        font-family: sans-serif;
        font-size: 1rem;
        line-height: 1rem;
        position: absolute;
        top: 5px;
        left: 20px;
      }
    }
    &.green-menu-item-teaser {
      .menu {
        border: 2px solid #82bc00;
        border-radius: 6px;
        background: rgba(130, 188, 0, 0.07);
        .menu-list {
          .menu-list-item {
            border-color: rgba(112, 163, 0, 0.19);
          }
        }
      }
    }
  }
}

/* formulaire wishdish  */
/* diseable */
.select {
  border-color: var(--primary);
  border-radius: 50px;
  height: 44px;
  padding: 0 20px;
  background: url(../images/chevron-down.svg) no-repeat;
  background-position: calc(100% - 10px) center !important;
  -moz-appearance: none !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  padding-right: 30px !important;
  min-width: 120px;
}
:focus-visible {
  outline: var(--primary) auto 1px;
}
.btn.diseable {
  border: 1px solid var(--neutral-extralight);
  background-color: var(--neutral-extra-light);
  color: var(--neutral-light);
  cursor: none;
  pointer-events: none;
}
.checkboxes {
  align-items: center;
  gap: 14px;
}
.checkboxes input[type="checkbox"] {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  outline: none;
}
.checkboxes input[type="checkbox"]:checked {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  border: 1px solid var(--primary);
  background-color: var(--primary);
  outline: none;
}
.form-control,
textarea {
  display: block;
  width: 100%;
  height: calc(1.5em + 0.75rem + 2px);
  padding: 0.375rem 0.75rem;
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--neutral-dark);
  background-color: var(--neutral-extra-light);
  background-clip: padding-box;
  border: none;
  border-radius: 0.25rem;
  transition:
    border-color 0.15s ease-in-out,
    box-shadow 0.15s ease-in-out;
}
textarea {
  min-height: 100px;
}
input.btn.btn-default {
  background-color: var(--primary);
  color: var(--white);
}
#mainForm {
  height: auto;
  padding-top: 90px;
}
#mainForm .avis {
  height: auto;
  flex-direction: column-reverse;
}
#mainForm .avis .texte {
  min-height: 100%;
  width: 100%;
  display: flex;
  justify-content: space-around;
  padding: 20px;
}
#mainForm .avis .bg {
  height: 200px;
  width: 100%;
  background-color: var(--primary);
  display: flex;
}
#mainForm .avis .bg .img {
  width: 100%;
  height: 100%;
  background-image: url(../images/kartofel.jpg);
  background-position-y: center;
  background-position-x: right;
  background-size: cover;
  opacity: 90%;
}
/* formulaire wishdish */

/* Grid img */
.GridImg {
  width: 100%;
  display: flex;
  flex-direction: column-reverse;
  .GridItem {
    width: 100%;
    height: 400px;
    img {
      width: 100%;
      height: 100%;
      object-fit: cover;
      object-position: center;
      max-width: 100%;
    }
  }
}
/* Grid img */

@keyframes growNutritionScoreStatsBar {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}
.show .nutrition-score-stats--bar-container {
  animation-play-state: running !important;
}