/* Menu mobile */

@media (max-width: 991px) {
  body {
    &:has(.menu.open) {
      overflow: hidden;
      max-height: 100vh;

      main.dis_none, footer.dis_none {
          display: none !important;
      }
    }
  }

  .header {
    .header__main {
      .topmenu {
        display: none !important;
      }

      .wrapper__menu_main {
        padding: 5px 0;
      }

      &:has(.menu.open) {
        .header__logo {
          img {
            z-index: 2;
            position: relative;
          }

          &:after {
            content: '';
            opacity: 1;
            background: var(--dark-blue);
            width: 150vw;
            height: 105px;
            position: absolute;
            top: -7px;
            left: -50vw;
            z-index: 1;
            transform: translateX(0);
            pointer-events: none;
          }
        }

        .menu_mobile {
          z-index: 9999999999;
          position: relative;
          width: 50px;
          height: 50px;
          pointer-events: all;

          .menu__toggle {
            opacity: 0;
          }

          &:before,
          &:after {
            content: "";
            position: absolute;
            top: 25px;
            left: 0;
            display: inline-block;
            width: 35px;
            height: 3px;
            background: var(--white);
            z-index: 99999999999999999999999999999999;
            border-radius: var(--border-radius);
            pointer-events: all;
          }

          &:before {
            transform: rotate(45deg);
          }

          &:after {
            transform: rotate(-45deg);
          }
        }
      }

      .menu {
        flex-direction: column;
        left: 0;
        padding-bottom: 24px;
        position: fixed;
        overflow: auto;
        transition: transform 0.3s ease;
        width: 100%;
        z-index: 9;
        top: 0;
        transform: translateX(100%);

        &.open {
          display: flex;
          width: 100vw;
          height: 100vh;
          padding-bottom: 0px;
          transform: translateX(0px);
          padding-top: 99px;
          overflow: hidden !important;

          &:has(> .menu__main > li.sub-menu-open) {
            background: var(--dark-blue);

            .menu__main {
              justify-content: flex-start;
            }
          }
        }

        .menu__main {
          background: var(--dark-blue);
          margin: 0;
          padding: 150px 12px 120px 12px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: 100vh;
          overflow-x: hidden;
          overflow-y: scroll;

          &:has(.menu-search) {
            .menu-search {

              margin: 0px;

              form {
                input[type="text"] {
                  min-height: 40px;
                }
              }
            }
          }

          li {
            list-style: none;
            position: relative;
            z-index: 1;

            &:before,
            &:marker {
              display: none;
            }

            &>a {
              img {
                display: none;
              }
            }
          }

          &>.menu-item {
            transition: var(--transition);

            &:not(:last-child) {
              margin-bottom: 20px;
            }

            &.menu-item-has-children {
              scroll-margin-top: 120px;

              &>a {
                display: flex;
                justify-content: space-between;
                align-items: center;

                &:after {
                  content: "";
                  background-image: url(../img/triangle.svg);
                  width: 12px;
                  height: 12px;
                  display: inline-block;
                  background-size: cover;
                  background-repeat: no-repeat;
                  transform: rotate(90deg);
                  transition: var(--transition);
                }

                span {
                  margin-right: 20px;
                }
              }

              &.sub-menu-open {
                border: 0px;
                margin-bottom: 0 !important;

                &>.sub-menu {
                  max-height: unset;
                  opacity: 1;
                  transform: translateY(0px);
                  padding: 20px 0 20px 0;
                  margin: 15px 0;
                  border-bottom: 1px solid var(--light-blue);
                  position: relative;
                  overflow: visible;

                  &:after {
                    content: "";
                    background: var(--light-blue);
                    width: 130vw;
                    height: 101%;
                    position: absolute;
                    top: 0;
                    left: -60px;
                    z-index: 0;
                  }

                  &>li {
                    &:not(:last-child) {
                      border-bottom: 1px solid var(--dark-blue);
                      padding-bottom: 15px;
                      margin-bottom: 15px;
                    }

                    &>a {
                      display: flex;
                      flex-direction: column;

                      span {
                        color: var(--white);

                        &:not(.desc) {
                          font-weight: var(--bold);
                          padding-bottom: 10px;
                        }
                      }
                    }
                  }
                }

                &>a {
                  &:after {
                    transform: rotate(-90deg);
                  }
                }
              }
            }

            &>a {
              color: var(--white);
              font-size: 24px;
              font-weight: var(--bold);

              span {
                color: var(--white);
              }
            }

            &>.sub-menu {
              max-height: 0;
              opacity: 0;
              transition:
                transform 0.3s ease,
                opacity 0.3s ease;
              transform: translateY(30px);
              overflow: hidden;

              &>.menu-item {

                &.img_left,
                &.img_right {
                  display: none;
                }

                &>.sub-menu {
                  padding: 0;

                  &>.menu-item {
                    &:first-child {
                      padding-top: 10px;
                    }

                    &:not(:last-child) {
                      padding-bottom: 10px;
                    }

                    &>a {
                      span {
                        color: var(--white);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .menu__toggle {
        display: block;
        cursor: pointer;
        width: 50px;
        height: 50px;
        filter: invert(1);
      }
    }
  }
}

/* Menu */

.header {
  position: fixed;
  transition: var(--transition);
  z-index: 1000;
  width: 100%;

  &.home {
    &:not(.scrolling) {
      .header__logo {
        img {
          filter: brightness(0) invert(1);
        }
      }
    }
  }

  &.scrolling {
    background: var(--dark-blue);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.1);
    backdrop-filter: blur(5px);

    .topmenu {
      background-color: var(--dark) !important;
    }

    .menu {
      .menu__main {
        &>.menu-item {
          &>.sub-menu {
            top: 115px !important;
            border-radius: 0 0 16px 16px !important;
          }
        }

        .menu-item {
          &>a {
            &:not(:hover) {
              color: var(--white) !important;
            }
          }
        }
      }
    }
  }

  @media (min-width: 992px) {
    &:not(.home) {
      .menu {
        .menu__main {
          li:not(.img_left, .img_right) {

            a,
            a span {
              &:not(:hover) {
                color: var(--white);
              }
            }
          }
        }
      }
    }
  }

  .header__main {
    align-items: center;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s;
    width: 100%;
    flex-direction: column;

    .topmenu {
      display: flex;
      width: 100vw;
      background-color: var(--dark-blue);
      height: 40px;

      .container {
        display: flex;
        justify-content: end;
      }

      .top__menu {
        display: flex;
        align-items: center;
        margin: 0;
        padding: 0;

        &>li {
          border-right: 1px solid var(--white);

          &:hover {

            &>a,
            &>a span {
              color: var(--gold);
            }
          }

          &:not(:first-child) {
            padding: 0px 25px;
          }

          &:first-child {
            padding-right: 25px;
          }

          &:last-child {
            margin-right: 25px;
          }

          &::marker,
          &:before {
            content: "";
            max-height: 0px !important;
            font-size: 0px !important;
            display: none !important;
            display: none !important;
            font-size: 0px !important;
            max-height: 0px !important;
          }

          &>a {
            color: var(--white);
            font-size: 14px;
            line-height: 18px;
            font-weight: var(--medium);
          }

          &.menu-item-has-children {
            &>a {
              display: flex;
              justify-content: space-between;
              align-items: center;
              position: relative;

              &:after {
                content: "";
                background-image: url(../img/chevron_down.svg);
                width: 12px;
                height: 6px;
                display: inline-block;
                background-size: contain;
                background-repeat: no-repeat;
                transition: var(--transition);
                margin-left: 5px;
              }
            }

            &>.sub-menu {

              &>li {
                list-style: none;
                position: relative;
                z-index: 1;

                &:before,
                &:marker {
                  display: none;
                }

                &:hover,
                &.current-lang {
                  &>a {
                    color: var(--gold);

                    span {
                      color: var(--gold);
                    }
                  }
                }
              }
            }

            &:hover,
            &.current-lang {
              &>a {
                color: var(--gold);

                span {
                  color: var(--gold);
                }

                &:after {
                  transform: rotate(-180deg);
                  filter: brightness(0) saturate(100%) invert(46%) sepia(99%) saturate(387%) hue-rotate(5deg) brightness(95%) contrast(101%);
                }
              }
            }
          }

          &.pll-parent-menu-item {
            position: relative;

            &>a {
              padding: 8px !important;
            }

            .sub-menu {
              opacity: 0;
              max-height: 0;
            }

            &:hover {
              overflow: visible;

              .sub-menu {
                opacity: 1;
                max-height: fit-content;
              }
            }

            .sub-menu {
              width: fit-content;
              padding: 3px 3px 3px 4px;
              border-radius: var(--border-radius);
              position: absolute;
              top: 2px;
              right: 47px;
              background: var(--white);

              &>li {
                &>a {
                  font-size: 14px;
                  color: var(--dark);
                  font-weight: var(--bold);
                }
              }
            }
          }
        }
      }
    }

    .wrapper__menu_main {
      display: flex;
      width: 100%;
      justify-content: space-between;
      align-items: center;
    }

    &.container {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header__logo {
        align-self: center;
        display: block;
        position: relative;
        width: 200px;
        z-index: 9999;

        @media (min-width: 992px) and (max-width: 1399px) {
          width: 160px;
        }

        img {
          transition: all 0.3s;
        }

        @media (min-width: 992px) {
          &:hover {
            img {
              opacity: 0.7;
            }
          }
        }
      }
    }

    @media (min-width: 992px) {
      .menu {
        flex-direction: row;
        overflow: visible;
        gap: 24px;
        margin-top: 0;
        padding: 0 16px;
        height: 48px;
        display: flex;
        position: static;

        @media (max-width: 1199px) {
          padding: 0 !important;
        }

        &.open i {
          transform: rotate(180deg);
        }

        &.open .sub-menu {
          border-color: var(--light-blue);
          max-height: 500px;
        }

        .menu__main {
          position: static;
          display: flex;
          margin: 0;
          padding: 0;
          align-items: center;
          order: -1;
          overflow: visible;

          li {
            list-style: none;
          }

          &>li {
            @media (min-width: 1200px) {
              &:not(:last-child) {
                &>a {
                  border-right: 1px solid var(--white);
                }
              }
            }

            &:first-child {
              &>a {
                padding-left: 0px !important;
              }
            }

            &:last-child {
              &:hover {
                &>a {
                  background: var(--dark-red);

                  &:after {
                    right: -3px;
                  }
                }
              }

              &>a {
                margin-left: 10px !important;
                display: flex;
                gap: 5px;
                align-items: center;
                position: relative;

                @media (min-width: 1200px) {
                  margin-left: 25px !important;
                }

                &:after {
                  content: url(../img/chevron_down.svg);
                  display: inline-block;
                  transform: rotate(-90deg);
                  width: 8px;
                  height: 15px;
                  position: relative;
                  transition: var(--transition);
                  right: 0px;
                }
              }
            }

            &:before {
              display: none;
            }
          }

          &>.menu-item {
            overflow: hidden;
            height: fit-content;
            padding: 30px 0;
            width: auto;
            position: unset;
            cursor: pointer;

            &:hover {
              overflow: visible;

              .sub-menu {
                opacity: 1;
                max-height: unset;
                visibility: visible;
              }

              &:not(.adherer) {
                &>a {
                  color: var(--gold);

                  span {
                    color: var(--gold);
                  }

                  &:after {
                    transform: rotate(-180deg);
                    filter: brightness(0) saturate(100%) invert(46%) sepia(99%) saturate(387%) hue-rotate(5deg) brightness(95%) contrast(101%);
                  }
                }
              }
            }

            &>a {
              padding: 0 25px;
              align-items: center;
              transition: all 0.3s;
              color: #fff;
              font-family: var(--main-font);
              font-size: 14px;
              line-height: 18px;
              font-weight: var(--medium);

              @media (min-width: 992px) and (max-width: 1199px) {
                padding: 0 10px;
              }

              span {
                transition: var(--transition);
              }
            }

            &.adherer {
              &>a {
                padding: 7px 25px;
                background: var(--red);
              }
            }

            &.menu-item-has-children {
              &>a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;

                &:after {
                  content: "";
                  background-image: url(../img/chevron_down.svg);
                  width: 12px;
                  height: 6px;
                  display: inline-block;
                  background-size: contain;
                  background-repeat: no-repeat;
                  transition: var(--transition);
                  margin-left: 5px;
                }
              }
            }

            /**********************A supprimer **********************/

            &>.sub-menu {
              visibility: hidden;
              max-height: 0;
              opacity: 0;
              margin: 0;
              padding: 0;
              position: absolute;
              overflow: hidden;
              background-color: var(--white);
              top: 100%;
              display: grid;
              padding: 32px;
              grid-template-columns: repeat(2, minmax(auto, 328px));
              width: max-content;
              border-radius: var(--border-radius);
              box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.16);
              left: 50%;
              transform: translateX(-50%);

              @media (min-width: 992px) {
                gap: 47px 30px;
              }

              @media (min-width: 1200px) {
                grid-template-columns: repeat(3, minmax(auto, 328px));
                gap: 30px;
              }

              &:has(> .img_left) {
                @media (min-width: 992px) {
                  grid-template-columns: 230px repeat(2, minmax(auto, 250px));
                }

                @media (min-width: 1200px) {
                  grid-template-columns: 270px repeat(2, minmax(auto, 328px));
                }
              }

              &:has(> .img_right) {
                @media (min-width: 992px) {
                  grid-template-columns: repeat(2, minmax(auto, 250px)) 230px;
                }

                @media (min-width: 1200px) {
                  grid-template-columns: repeat(2, minmax(auto, 328px)) 270px;
                }
              }

              &.four_col {
                grid-template-columns: repeat(4, minmax(auto, 190px));

                &:has(> .img_left, > .img_right) {
                  @media (min-width: 992px) {
                    grid-template-columns: 230px repeat(3, minmax(auto, 160px));
                  }

                  @media (min-width: 1200px) {
                    grid-template-columns: 200px repeat(4, minmax(auto, 190px));
                  }

                  @media (min-width: 1400px) {
                    grid-template-columns: 270px repeat(4, minmax(auto, 190px));
                  }
                }
              }

              &>.menu-item {
                &:not(:has(> .sub-menu)) {
                  &:hover {
                    a {
                      color: var(--red) !important;

                      span {
                        color: var(--red) !important;
                      }
                    }
                  }
                }

                &>a {
                  display: flex;
                  flex-direction: column;
                  gap: 12px;
                  transition: var(--transition);

                  &:has(+ .sub-menu) {
                    span {
                      &:not(.desc) {
                        border-bottom: 1px solid var(--dark-grey);
                        padding-bottom: 12px;
                      }
                    }
                  }

                  span {
                    color: var(--dark-blue);
                    transition: var(--transition);
                    margin-left: 50px;

                    &:not(.desc) {
                      font-weight: var(--bold);
                      margin-left: 50px;

                      &:has(+ .desc) {
                        border-bottom: 1px solid var(--dark-grey);
                        padding-bottom: 12px;
                      }
                    }
                  }

                  img {
                    width: 35px;
                    height: 35px;
                    object-fit: contain;
                    position: absolute;
                  }
                }

                &:has(> .sub-menu) {
                  &>.sub-menu {
                    padding: 12px 0 0 0;

                    &>li {
                      display: flex;
                      align-items: center;
                      transition: var(--transition);

                      &:not(:last-child) {
                        margin-bottom: 16px;
                      }

                      &>a {
                        color: var(--dark-blue);
                        transition: var(--transition);

                        span {
                          color: var(--dark-blue);
                          transition: var(--transition);
                        }
                      }

                      &:hover {
                        a {
                          color: var(--azur);

                          span {
                            color: var(--azur);
                          }
                        }
                      }
                    }
                  }
                }

                &.img_left {
                  left: -50px;
                  grid-row: span 2;
                }

                &.img_right {
                  grid-row: 1 / 3;
                  grid-column: 3;
                }

                &.img_left,
                &.img_right {
                  height: calc(100% + 68px);
                  position: relative;
                  top: -34px;
                  width: 280px;
                  background-repeat: no-repeat;
                  background-size: cover;
                  display: flex;
                  align-items: end;
                  padding: 40px;
                  border: 0px;
                  z-index: 1;
                  background-position: right;
                  pointer-events: none;

                  @media (min-width: 1200px) {
                    width: 250px;
                  }

                  @media (min-width: 1400px) {
                    width: 320px;
                  }

                  &:after {
                    content: "";
                    background: linear-gradient(0deg,
                        rgba(0, 20, 60, 1) 0%,
                        rgba(0, 20, 60, 0) 100%);
                    position: absolute;
                    top: 0;
                    left: 0;
                    width: 100%;
                    height: 100%;
                    z-index: 0;
                  }

                  &>a {
                    font-family: var(--title-font);
                    color: var(--white);
                    font-size: 36px;
                    line-height: 44px;
                    font-style: normal;
                    z-index: 2;

                    &>span {
                      color: var(--white);
                    }
                  }
                }
              }
            }
          }
        }
      }

      .menu_mobile,
      .menu__toggle {
        display: none;
      }
    }
  }

  .menu-search {
    display: flex;
    flex-direction: row-reverse;
    margin-left: 10px;
    cursor: pointer;

    * {
      pointer-events: all;
    }
  }

  .search {
    width: 100%;
    opacity: 1;
    transition: var(--transition);
    height: fit-content;
    margin: auto;

    form {
      display: flex;
      align-items: center;

      input[type="text"] {
        background: var(--white) !important;
        height: 30px !important;
        padding: 0px 15px !important;
        font-size: 14px !important;
        font-family: var(--main-font) !important;

        &:focus,
        &:focus-visible {
          border: 0px !important;
          outline: 1px solid var(--blue) !important;
        }
      }
    }

    button[type="submit"] {
      margin: 0 !important;
      border-radius: 50px !important;
      transform: scale(-1, 1) !important;
      display: grid !important;
      place-items: center !important;
      height: 32px !important;
      border: 0px !important;
      width: 32px !important;
      margin-left: -35px !important;
      background: transparent;

      img {
        width: 100%;
        height: 100%;
        transform: rotate(90deg);
      }
    }

    .togglesearch {
      background-color: var(--blue);
      padding: 7px 8px 1px 8px;
      border-radius: 50px;
      transform: translateX(0px) scale(-1, 1);
      display: grid;
      place-items: center;
      width: fit-content;
      max-height: 32px;
      pointer-events: all;
      z-index: 10;
      cursor: pointer;

      img {
        filter: brightness(200);
      }
    }
  }
}

@media (min-width: 992px) {
  @keyframes fadeInFromTop {
    from {
      opacity: 0;
      transform: translateX(-50%) translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateX(-50%) translateY(0);
    }
  }

  .menu .menu__main>.menu-item:hover>.sub-menu {
    animation: fadeInFromTop 0.3s ease-out;
  }
}

@media (min-width: 992px) {
  @keyframes fadeInFromTopMenu {
    from {
      opacity: 0;
      transform: translateX(0) translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateX(0) translateY(0);
    }
  }

  .topmenu .top__menu>li:hover>.sub-menu {
    animation: fadeInFromTopMenu 0.3s ease-out;
  }
}
/* Masquer le choix des langues (Polylang) dans le top menu */
#menu-item-2181 { display: none !important; }