body {
  .c-header_wrap.-desktop {
    display: none;
  }

  .grid {
    display: grid;
  }

  header.c-header {
    background: linear-gradient(
        to bottom,
        rgba(0, 0, 0, 0.75) 0%,
        rgba(0, 0, 0, 0.3) 50%,
        rgba(0, 0, 0, 0) 100%
      );

    .header-logo {
      margin-top: 10px;

      img {
        max-width: 180px;
      }

      img.is-scrolling {
        display: none;
      }
    }
  }

  .c-nav_wrap-top-wrapper {
    background: rgba(13, 39, 63, .75);

    .c-social-top {
      display: grid;
      align-content: center;

      .c-social_list {
        grid-auto-flow: column;
        align-content: center;
        margin: 0;
        padding: 0;
        list-style-type: none;
    

        img {
          max-height: 15px;
        }

        .c-btn {
          padding: 0;
        }

        .c-social_item {
          display: grid;

          a {
            display: grid;
            align-content: center;
            align-self: center;
          }
        }
      }
    }
  }

  .c-header_wrap.-desktop {
    .c-nav_wrap-top {
      justify-content: end;
      grid-auto-flow: column;
      padding: 8px 0;
    }

    .c-nav_wrap {
      grid-template-columns: auto 1fr;;
    }

    .c-lang {
      display: grid;
      grid-auto-flow: column;
      margin: 0;
      padding: 0;
      padding-right: 15px;
      margin-left: 15px;
      margin-right: 15px;
      border-right: 1px solid white;
      list-style-type: none;

      > li a {
        color: white;
        text-decoration: none;
        font-size: 13px;
      }

      > li:first-child::after {
        content: unset;
      }

      > li.current {
        display: none;
      }
    };

    .menu-desktop-secondary-menu-container,
    .menu-menu-secondaire-desktop-container,
    .menu-menu-secondaire-desktop-en-container {
      .menu {
        display: grid;
        grid-auto-flow: column;
        margin: 0;
        padding: 0;
        list-style-type: none;
        column-gap: 20px;

        > li a {
          color: white;
          text-decoration: none;
          font-size: 13px;
        }
        
        > li:hover > a,
        > li.current_page_item > a {
          color: #E29E64;
        }
      }
    }

    .menu-desktop-menu-principal-container,
    .menu-menu-principal-desktop-container,
    .menu-menu-principal-desktop-en-container {

      .menu {
        display: grid;
        grid-auto-flow: column;
        justify-content: end;
        margin: 0;
        padding: 0;
        margin-top: 30px;
        list-style-type: none;
        column-gap: 30px;

        li {
          .sub-menu {
            display: none;
            pointer-events: none;
            position: absolute;
            background: black;
            padding: 10px;
            list-style-type: none;
            opacity: 0;
            visibility: hidden;
            transition: all ease .3s;
            background-color: transparent;
            padding-left: 0;

            > li {
              display: grid;
              justify-content: start;
              margin-top: 6px;
            }

            > li a::after {
              content: "";
              display: block;
              width: 0;
              height: 1px;
              background: white;
              transition: all ease .3s;
            }

            > li.current_page_item a::after,
            > li:hover a::after {
              width: 100%;
            }

            > li > a {
              color: white;
              text-decoration: none;
              font-size: 14px;
            }
          }
        }

        li.menu-item-has-children {
          cursor: pointer;
        }

        li.menu-item-has-children::after {
          content: "";
          display: inline-block;
          width: 15px;
          height: 15px;
          background-image: url('../images/chevronnav.svg');
          background-repeat: no-repeat;
          background-size: 10px;
          background-position: center;
          margin-left: 5px;
          position: relative;
          top: 2px;
        }

        li:hover .sub-menu {
          display: block;
          opacity: 1;
          visibility: visible;
          pointer-events: all;
        }

        > li > a {
          color: white;
          text-decoration: none;
          font-size: 14px;
          text-transform: uppercase;
        }

        > li:not(:has(.sub-menu))::after {
          content: "";
          display: block;
          width: 0;
          height: 1px;
          background: white;
          transition: all ease .3s;
        }

        > li:not(:has(.sub-menu)):hover::after {
          width: 100%;
        }
      }
    }
  }

  .c-nav_primary-desktop {
    display: grid;
    grid-auto-flow: column;
    justify-content: end;
    column-gap: 30px;

    .c-header_actions {
      justify-self: end;
      position: relative;
      margin: 15px 0;
    }
  }

  .c-nav_wrappper {
    transition: all ease .3s;
  }
}

body.is-scrolled {
  .c-nav_wrappper {
    background-color: #304960;
  }
  .c-header_wrap.-desktop {
    .header-logo {
      display: grid;
      align-content: center;
      margin-top: 0;

      img:not(.is-scrolling) {
        display: none;
      }

      img.is-scrolling {
        display: block;
      }
    }

    .menu-desktop-menu-principal-container,
    .menu-menu-principal-desktop-container,
    .menu-menu-secondaire-desktop-en-container{
      .menu {
        li {
          .sub-menu {
            background-color: #304960;
            padding-left: 15px;
          }
        }
      }
    }
  }
}



@media (min-width: 1024px) {
  body {
    .c-header {
      padding-top: 0;
    }

    .c-header_wrap.-mobile {
      display: none;
    }

    .c-header_wrap.-desktop {
      display: grid;
      justify-content: unset;
    }
  }
}


@media (min-width: 1024px) and (max-width: 1379px) {
  .c-header_wrap.-desktop {
    .o-container {
      padding: 0 3vw;
    }

    .menu-desktop-menu-principal-container, 
    .menu-menu-principal-desktop-container,
    .menu-menu-principal-desktop-en-container {
      .menu {
        >li>a {
          font-size: 11px !important;
        }
      }
    }

    .header-logo {
      img {
        max-width: 130px;
      }
    }
  }
}