@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");
@font-face {
  font-family: "Roboto";
  src: url("../webfonts/7d3671fc-8c26-459c-98e1-997c4f6c8c93.eot?#iefix");
  src:
    url("../webfonts/7d3671fc-8c26-459c-98e1-997c4f6c8c93.eot?#iefix") format("eot"),
    url("../webfonts/4fb89ed5-baf5-425f-aba4-46e8c2c3aabe.woff2") format("woff2"),
    url("../webfonts/2a004a53-ac5c-43b3-9eeb-9f74ae4c1609.woff") format("woff"),
    url("../webfonts/74d53f3b-1683-4d5a-a556-e13f6553cdf0.ttf") format("truetype"),
    url("../webfonts/3f5a5b87-e71e-4544-be0c-da4daa132710.svg#3f5a5b87-e71e-4544-be0c-da4daa132710") format("svg");
}

@font-face {
  font-family: "Bricolage Grotesque";
  src: url("../webfonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix");
  src:
    url("../webfonts/fbd7c0fb-f004-4e83-81d2-1d400413a873.eot?#iefix") format("eot"),
    url("../webfonts/6e7f04cb-3b30-43a5-b79d-25b4c1178700.woff2") format("woff2"),
    url("../webfonts/9aa32a81-1124-4c43-b3db-15bfb1f7aed2.woff") format("woff"),
    url("../webfonts/6faffbf4-f8e8-4817-b24b-a390e166be7e.ttf") format("truetype"),
    url("../webfonts/fc09de64-de25-425e-90dc-a0cae29b02c4.svg#fc09de64-de25-425e-90dc-a0cae29b02c4") format("svg");
}
: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;
}
* {
  font-family: "Roboto";
}
.h100 {
  height: 100%;
}
.d-flex {
  display: flex;
}
.flex-1 {
  flex: 1;
}
.gap-8 {
  gap: 8px;
}
.gap-20 {
  gap: 10px;
}
.xs-flex-col {
  flex-direction: column;
}
.justify-space-center {
  justify-content: center;
}
.align-item-center {
  align-items: center;
}

/* Wrapper for the toggle */
.toggle-wrapper {
  display: inline-block;
  position: relative;
  user-select: none;
}

/* Toggle switch container */
.toggle {
  display: inline-flex;
  align-items: center;
  cursor: pointer;
  position: relative;
}

/* Hide the actual checkbox */
.toggle-input {
  display: none;
}

/* The slider (visual part of the toggle) */
.toggle-slider {
  width: 90px;
  height: 30px;
  border-radius: 15px;
  background-color: #ccc;
  position: relative;
  transition: background-color 0.3s ease;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 10px;
  box-shadow: inset 0 0 5px rgba(0, 0, 0, 0.2);
}

.toggle-slider::before {
  content: "";
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background-color: white;
  position: absolute;
  top: 2px;
  left: 2px;
  transition: transform 0.3s ease;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
}

/* Slider color and position for "on" state */
.toggle-input:checked + .toggle-slider {
  background-color: #4caf50;
}

.toggle-input:checked + .toggle-slider::before {
  transform: translateX(50px);
}

/* Text inside the slider */
.toggle-text {
  font-size: 12px;
  font-weight: bold;
  color: white;
  position: absolute;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

.toggle-text-on {
  left: 10px;
  opacity: 0;
}

.toggle-text-off {
  right: 10px;
  opacity: 1;
}

/* Change text visibility based on toggle state */
.toggle-input:checked + .toggle-slider .toggle-text-on {
  opacity: 1;
}

.toggle-input:checked + .toggle-slider .toggle-text-off {
  opacity: 0;
}

form#MemberLoginForm_LoginForm {
  margin-top: 90px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 18px;
}
.mb-30 {
  margin-bottom: 30px;
}
/* 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;
  background-color: var(--neutral-extra-light);
}
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 */

::selection,
::-moz-selection {
  /* Applies style to highlighted portion of a page */
  background: var(--primary-dark);
  color: var(--white);
  text-shadow: none;
}
/* 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);
}
/* 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: Courier, 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;
}
.link {
  text-decoration: underline;
  cursor: pointer;
  &.delete {
    color: var(--error);
  }
  &.primary {
    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;
  &.icon {
    min-width: unset;
    min-height: unset;
    padding: 0px;
    width: 35px;
    height: 35px;
    border-radius: 3px;
  }
  &[aria-expanded="true"] {
    border: 1px solid var(--primary);
    background-color: var(--primary);
    color: var(--white);
  }

  &[aria-expanded="false"] {
    border: 1px solid var(--neutral);
    background-color: var(--neutral);
    color: var(--white);
  }
}
.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);
}
/* neutral */
.btn.neutral {
  border: 1px solid var(--neutral);
  background-color: var(--neutral);
  color: var(--white);
}
.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);
}

/* dark */
.btn.dark {
  border: 1px solid var(--primary-dark);
  background-color: var(--primary-dark);
  color: var(--white);
}
.btn.dark svg {
  fill: white;
}
.btn.dark:hover {
  background-color: var(--primary-extralight);
  color: var(--primary-dark);
}
.btn.dark:hover svg {
  fill: var(--primary-dark);
}

/* close */
#closeModalButton {
  width: 40px;
  height: 40px;
  color: black;
  background-color: white;
  position: absolute;
  top: 10px;
  right: 14px;
}

.header {
  position: fixed;
  z-index: 1000;
  background-color: var(--white);
  width: 100%;
  border-bottom: 1px solid var(--neutral-light);
  height: fit-content;
}
.header.isOpen {
  border-bottom: 5px solid var(--primary);
}
.headerContent {
  height: 80px;
}
.headerLogo {
  height: 80px;
  width: 180px;
  display: flex;
  align-items: center;
}
.headerLogo img {
  height: 100%;
  width: 100%;
  object-fit: contain;
}
nav {
  padding-right: 20px;
  &.primary {
    .link {
      &.active {
        color: var(--primary);
      }
    }
  }
}
#lang{
  position: absolute;
  top: 5px;
  right: 5px;
  border-radius: 4px;
  border-color: var(--primary);
  font-size: 22px;
  font-family: 'Roboto';
}
.header .langs .lang span {
  margin: 0 auto;
  line-height: 32px;
}
.header .langs .lang {
  width: 34px;
  height: 34px;
  border-radius: 3px;
  cursor: pointer;
}
.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;
}
#banner {
  padding-top: 87px;
  width: 100%;
  height: 600px;
  position: relative;
  .bg {
    position: absolute;
    height: 100%;
    width: 100%;
    top: 0;
    left: 0;
    background-image: url(https://sportsteam.eldora.ch/themes/simple/images/AdobeStock_694656028-min.jpeg);
    background-size: cover;
    background-repeat: no-repeat;
    background-position: center;
    background-color: var(--primary-light);
  }
  .content {
    position: absolute;
    text-align: center;
    width: 90%;
    max-width: 800px;
    height: 250px;
    background-color: white;
    border-radius: 8px;
    padding: 25px;
    display: flex;
    align-items: center;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
  }
}
div#mainBlock {
  padding-top: 80px;
}
#homeEl {
  padding: 0 20px;
}
#mainForm {
  .avis {
    height: auto;
    flex-direction: column-reverse;
    background-color: white;
    .texte {
      min-height: 100%;
      width: 100%;
      display: flex;
      justify-content: space-around;
      padding: 20px;
    }
    .bg {
      height: 200px;
      width: 100%;
      background-color: var(--primary);
      display: flex;
      .img {
        width: 100%;
        height: 100%;
        background-image: url(../images/AdobeStock_664505007-min.jpeg);
        background-position: center;
        background-size: cover;
        opacity: 90%;
      }
    }
    .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);
    }
  }
}
section {
  &.intro {
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px;
    border: 1px solid var(--primary);
    border-radius: 8px;
  }
  &.process {
    display: flex;
    flex-direction: column;
    margin: 40px 0;
    .lign1 {
      display: flex;
      flex-direction: column-reverse;
      gap: 10px;
      .visual {
        height: 200px;
        background-image: url(../images/AdobeStock_157429674-min.jpeg);
        background-position: center;
        background-size: cover;
        border-radius: 8px;
      }
      #sliderTenue {
        width: 100%;
        .visual {
          background-size: 85%;
          background-repeat: no-repeat;
          background-color: white;
          &.cycle {
            background-image: url(../images/maillot-cycle.png);
          }
          &.run {
            background-image: url(../images/maillot-run.png);
          }
        }
      }
      &#mission {
        .visual {
          background-image: url(../images/AdobeStock_664505007-min.jpeg);
        }
      }
      &#ambianceAttitude {
        .visual {
          background-image: url(../images/AdobeStock_339148329-min.jpeg);
        }
      }
      &#valeurs {
        .visual {
          background-image: url(../images/AdobeStock_223598035-min.jpeg);
        }
      }
      &#tenue {
        .visual {
          &.cycle {
            background-image: url(../images/maillot-cycle.png);
          }
          &.run {
            background-image: url(../images/maillot-run.png);
          }
        }
      }
      &.reverse {
        flex-direction: column;
      }
    }
    .lign2 {
      background-color: white;
      margin: 14px 0;
      padding: 14px;
      border-radius: 8px;
    }
  }
}
#formSearch {
  display: flex;
  align-items: center;
  justify-content: center;
}
input[type="text"].search {
  width: 50dvw;
  box-sizing: border-box;
  border: 1px solid var(--primary-dark);
  border-radius: 35px;
  font-size: 16px;
  background-color: var(--dark);
  background-image: url(../images/search.svg);
  background-position: 24px 16px;
  background-repeat: no-repeat;
  padding: 12px 20px 12px 55px;
  margin-bottom: 20px;
  color: var(--white);
}
input[type="text"].search::placeholder {
  color: var(--dark-extra-light);
  opacity: 1; /* Firefox */
}
input[type="text"].search::placeholder:hover,
input[type="text"].search:hover {
  color: var(--primary);
}

/* START HOMEPAGE SECTION  */

.menuList {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: 10px;
}
.menuList .menuCardHome,
.menuCardBtn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: start;
  gap: 15px;
  width: 90dvw;
  height: 90dvw;
  border: none;
  background-color: var(--white);
  border-radius: 10px;
  padding: 20px;
}

.menuList .menuCardHome {
  border: 1px solid var(--neutral-extra-light);
  padding: 10px;
  .top {
    width: 100%;
    .lastEdit {
      text-align: end;
      margin-bottom: 0;
    }
    .status {
      display: flex;
      gap: 4px;
      align-items: center;
      border-radius: 4px;
      padding: 2px 4px;
      width: 100%;
      justify-content: end;
      gap: 4px;
      .statu {
        padding: 2px 6px;
        border-radius: 20px;
        min-width: 100px;
        display: flex;
        justify-content: center;
        &.on {
          background-color: var(--success-extralight);
        }
        &.off {
          background-color: var(--neutral-light);
        }
        .round {
          width: 10px;
          height: 10px;
          border-radius: 10px;
          font-size: 14px;
          &.on {
            background-color: var(--success);
          }
          &.off {
            background-color: var(--neutral);
          }
        }
        span {
          font-size: 14px;
          text-align: center;
          &.on {
            color: var(--success);
          }
          &.off {
            color: var(--neutral);
          }
        }
      }
    }
  }
}

.menuCardHome h3 {
  text-transform: uppercase;
  font-size: 18px;
  font-family: "Bricolage Grotesque";
}

.menuCardHome .content,
.menuCardBtn .content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-around;
  width: 100%;
  flex: 1;
  gap: 6px;
  color: var(--dark);
  text-align: center;
  p {
    margin-bottom: 0;
  }
}
.menuCardBtn .content i {
  font-size: 90px;
}
.menuCardHome .content p,
.menuCardBtn .content p,
.menuCardHome p {
  font-size: 16px;
  color: var(--dark);
}

.menuCardHome:hover,
.menuCardHome:hover h3 {
  background-color: var(--primary-extralight);
  color: var(--primary);
  cursor: pointer;
  font-family: "Bricolage Grotesque";
}
.menuCardBtn {
  border: 3px solid var(--primary);
}
.menuCardBtn,
.menuCardBtn .content,
.menuCardBtn {
  background-color: var(--primary-dark);
  color: var(--primary);
  cursor: pointer;
  transition: border ease 100ms;
  font-family: "Bricolage Grotesque";
}
.menuCardBtn {
  &:hover {
    background-color: var(--primary-dark);
    background-color: var(--white);
    color: var(--primary);
    cursor: pointer;
    .content {
      background-color: transparent;
      color: var(--primary);
    }
    .h3 {
      background-color: transparent;
      color: var(--primary);
    }
  }
}

.menuCardBtn:hover h3 {
  color: var(--primary) !important;
}
.menuCardHome,
.menuCardHome:hover {
  cursor: auto;
}
.menuCardHome.show {
  display: flex !important;
}
.menuCardHome.hide {
  display: none !important;
}
#creationOffreModal {
  position: absolute;
  width: 99dvw;
  height: 100dvh;
  top: 0;
  left: 0;
}
#creationOffreModal .backgroundModal {
  width: 100dvw;
  height: 100dvh;
  position: relative;
  top: 0;
  left: 0;
  background-color: black;
  opacity: 30%;
}
.modal-content {
  position: absolute;
  top: 0;
  left: 0;
  width: 100dvw;
  min-height: 100dvh;
  padding: 10px;
  padding-top: 44px;
  background-color: var(--neutral-extra-light);
  display: flex;
  flex-direction: column;
  gap: 30px;
  .toggle-slider {
    width: 108px;
  }
}
.modal-content form {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 10px;
  flex: 1;
  padding: 0 14px;
}
.modal-content form label {
  color: var(--dark);
}
.modal-content form input,
.modal-content form select {
  color: var(--dark);
}
.modal-content form .formEmail,
.modal-content form .formSelect {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: space-between;
}
.select#existingOffers {
  min-width: 224px;
}
.modal-content form .formEmail div,
.modal-content form .formTitle,
.modal-content form .formSelect div {
  display: flex;
  flex-direction: column;
  min-width: 200px;
  width: 48%;
  gap: 4px;
}
.modal-content form .formSelect div.formcheckbox div#existingOffersBloc {
  flex-direction: row;
  gap: 10px;
}
input#existingOffer {
  margin: 0;
}
.modal-content form .formEmail div label,
.modal-content form .formEmail div label {
  width: 100%;
}
.modal-content form input[type="submit"],
input#MemberLoginForm_LoginForm_action_dologin {
  background-color: var(--primary);
  color: var(--dark-extra-light);
  border: var(--primary);
  min-width: 160px;
  text-align: center;
  border-radius: 30px;
  height: 44px;
  line-height: 44px;
  margin: 20px 0;
}
/* END HOMEPAGE SECTION  */

/* menu eldorade  */
.filter-container {
  margin-bottom: 2px;
  grid-row-gap: 28px;
  row-gap: 28px;
  .column {
    margin-bottom: -2px;
    .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;
        }
        h3 {
          font-size: 2.25rem;
        }
        h4 {
          font-weight: 400;
        }
      }
      .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;
        }
      }
      .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: 80%;
          width: 80%;
          top: 50%;
          left: 50%;
          transform: translate(-50%, -50%);
          background-color: var(--white);
          display: flex;
          flex-direction: column;
          padding: 44px 20px 20px 20px;
          .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 1fr 1fr;
            grid-template-columns: 1fr 1fr 1fr;
            grid-gap: 16px 32px;
            gap: 16px 32px;
            &.overscroll-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__body__info {
              text-align: left;
              .menu-nutrition-infos-popup__body__subtitle {
                margin-bottom: 1.5rem;
              }
              .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: 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__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);
          }
        }
      }
    }
  }
}
@keyframes growNutritionScoreStatsBar {
  0% {
    width: 0;
  }
  100% {
    width: 90%;
  }
}
.show .nutrition-score-stats--bar-container {
  animation-play-state: running !important;
}