html{
  &.open{
    @media @screen-menu-responsive{
      .page:before{display: block}
      &, body{height: 100%;overflow-y: hidden;}
    }
  }
}
html {
  &.open-nav {
    overflow: hidden;
    height: 100%;
    .header {
      position: relative;
      z-index: none;
    }
    .second-menu {
      z-index: -1;
    }
    body {
      position: fixed;
      top: 0; left: 0; right: 0;
    }
  }
}
.page:before{position: absolute; background: rgba(0,0,0,0.5); width: 100%; height: 100%;z-index: 9; left: 0; top: 0; content: '';display: none}
// Auto complete Typeahead https://github.com/bassjobsen/typeahead.js-bootstrap-css
span.twitter-typeahead {width: 100%;
  @media @screen-menu-responsive{
    .form-control{margin-bottom: 0}
  }
  .tt-dropdown-menu {
    width: 100%;background-color: @white; .box-shadow(0px 2px 6px, @grey9d); margin-top: 1px; .border-radius(0 0 2px 2px);
    @media(min-width: @screen-lg){margin-top: 2px;}
    .tt-suggestion{cursor: pointer;margin: 0px; font-family: 'open_sanssemibold'; font-size: 14px; padding: 10px 15px; border-bottom: 1px solid @border-grey;
      &:last-child{border-bottom: none}
      p{margin: 0}
      &:hover{background: #efefef}
    }
  }
}
.header{
  &-logo{
    @media(min-width: 335px){
      img{max-width: 200px}
    }
  }
  &-bar{padding: 0;background: @white;
    @media @screen-menu-responsive {
      position: relative;
      z-index: 1030;
    }
  }
  &-content{overflow: hidden;
    @media @screen-menu-responsive{border-bottom: 2px solid @border-grey; width: 100%; display: flex; height: 50px; align-items: center;position: relative; z-index: 100;}
    .navbar-toggle{.navbar-vertical-align(0);padding: 0; float: none;color: @brand-primary;
      .icon-bar{background-color: @brand-primary;}
      @media @screen-menu-responsive{display: block}
    }
  }
  &-item{padding: 0 100px 0 15px;}
  &-nav{
    @media @screen-menu-responsive{
      width: 400px;
      /*height: calc((100%) - 50px * -1) !important;*/
      left: -400px;
      border: none;
      position: fixed;
      top: 50px;
      transition: left 0.15s ease;
      z-index: 99;
      font-size: 13px;
      padding-top: 0!important;
      background-color: @white;
      display: flex; 
      flex-direction: column;
      .icoCharte-carret-top, .icoCharte-angle-right{display: none}
    }
    @media(max-width: @screen-xs-max){width: 250px;left: -250px;
      & > .header-nav-content{overflow-y: auto;}
    }
    &.in{
      @media @screen-menu-responsive{left: 0;}
    }
    &-btn{font-size: 8px; line-height: 1;
      &.collapsed{
        .navbar-toggle{color: @black00;}
        .icon-bar{background-color: #000000;}
      }
      .text-menu{margin-top: 4px; display: block; line-height: 1}
    }
    ul{margin: 0; padding: 0}
    a{position: relative;
      @media @screen-menu-responsive{color: @navbar-default-link-color;}
      .sub-title{
        @media @screen-menu-responsive{display: none;}
      }
    }
    .navbar{
      &-open{
        @media @screen-menu-responsive{
          & > .nav > .header-nav-item > a{display: none}
        }
      }
      &-nav{width: 100%; display: block;
        @media @screen-menu-responsive{overflow: auto;
          .header-nav-item{position: static}
        }
        li{
          @media @screen-menu-responsive{width: 100%;}
          a{
            @media @screen-menu-responsive{padding-left: 20px;}
          }
        }
      }
    }
    .dropdown{
      .icoCharte-arrow{margin-left: 5px}
      &-menu{.box-shadow(none); padding: 0;background: @white;border: none;
        li{
          position: relative;
          a{padding: 10px 15px 10px 20px; display: block; white-space: normal; cursor: pointer;
            &.header-nav-item-generic{padding-left: 55px;min-height: 45px; line-height: 25px;}
            &:hover{color: @brand-primary; text-decoration: none;
              .header-nav-item-icon{
                path, circle, ellipse, image, line, polygon, polyline, rect, text, use{fill: @brand-primary;stroke: @brand-primary;}
              }
            }
          }
        }
        @media @screen-menu-responsive{left: -400px; width: 400px; transition: left 0.5s ease; display: block; top: 0; position: absolute; height: 100%; font-size: 13px;
          li.back, a.back{line-height: 20px; border-bottom: 1px solid @border-grey; padding: 10px 15px 10px 55px; position: relative; cursor: pointer;
            span{position: absolute; height: 100%; padding: 15px 20px; top: 0; left: 0;border-right: 1px solid @border-grey;}
            .icoCharte{display: table-cell; vertical-align: middle}
          }
        }
        @media(max-width: @screen-xs-max){width: 250px;left: -250px;}
      }
      &.open{
        & > .dropdown-menu{
          @media @screen-menu-responsive{left: 0; width: 400px; position: absolute;
            .dropdown-menu{left: -400px; width: 400px; position: absolute;}
            .open .dropdown-menu{left: 0; width: 400px}
          }
          @media(max-width: @screen-xs-max){left: 0; width: 250px; background: @white;
            .dropdown-menu{left: -250px; width: 250px;}
            .open .dropdown-menu{left: 0; width: 250px}
          }
        }
      }
    }
    &-content{
      @media @screen-menu-responsive{position: relative; z-index: 999; width: 100%; -ms-flex: 1 1 auto; flex: 1 1 auto;
        &.element-open{overflow-y: auto;}
      }
    }
    &-item{
      &-icon{position: absolute; top: 50%;left: 20px; width: 25px; height: 25px; line-height: 25px; margin-top: -12.5px;
        svg{vertical-align: middle; display: inline-block; line-height: 1.4}
        svg, path{max-width: 25px;max-height: 25px;}
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use{fill: @black33}
      }
      .icoCharte-carret{
        &-right{right: 10px; position: absolute;top: 18px;}
      }
    }
    &-client{
      @media @screen-menu-responsive{margin-left: auto}
      .icoCharte{
        vertical-align: sub;
        @media(min-width: @screen-lg){
          margin-right: 10px;
        }
      }
      a{
        font-family: 'open_sansbold';
        text-transform: uppercase;
        font-size: 14px;
        color: @brand-primary;
        &:hover{
          text-decoration: none;
          color: @brand-primary-hover;
        }
      }
    }
  }
  &-search{
    @media @screen-menu-responsive{background: @white; border-top: 1px solid @border-grey; position: relative; z-index: 1000;}
    &_content{
      @media @screen-menu-responsive{padding: 50px 15px 0;}
    }
    &-bar{
      &.dropdown-menu{
        @media @screen-menu-responsive{height: 100%;padding-top: 50px; z-index: 1000;
          .back{top: 67px; .opacity(0.6)}
          .input-group{width: 100%;
            &-btn{width: 100%; display: block; margin-top: 25px;
              .btn{width: 100%; display: block;}
            }
            .icoCharte-search{top: 0; left: 0;}
          }
          .form-control{padding-left: 23px}
        }
        .back{.opacity(0.6); cursor: pointer;position: absolute; right: 15px}
        .form-control{border-left: none; border-right: none; border-top: none;height: 25px;}
        .icoCharte-search{position: absolute;z-index: 3;}
      }
    }
  }
  .second-menu {
    @media @screen-menu-responsive {
      z-index: 90;
    }
  }
}

.menu-desktop(@menu-desktop);

.menu-desktop(@menu-desktop) when (@menu-desktop = true){
  @media(min-width: @screen-lg){
    .header{
      &-content, &-nav{display: flex}
      &-bar{position: relative; display: flex; width: 100%;border-bottom: 2px solid @border-grey; align-items: center}
      &-content{width: 230px}
      &-nav{padding-right: 16.66666667%; height: auto; -ms-flex: 1 1 auto; flex: 1 1 auto; display: flex; align-items: center;
        .icoCharte-carret-right{display: none}
        a{font-size: 14px;
          .sub-title{font-size: @font-size-small; color: @grey66}
        }
        &-btn{display: none}
        &-search{border-right: 1px solid @border-grey;
          li{position: static}
          a:hover{text-decoration: none}
        }
        .navbar{
          &-nav{
            & > .header-nav-item{border-left: 1px solid @border-grey;
              &.open, &.selected{
                & > .dropdown-toggle{color: @btn-hover-bg;}
                .icoCharte-carret-top{background-position: -70px -24px;}
              }
              & > a{padding: 15px}
            }
          }
        }
        .dropdown{
          &-menu{font-size: 14px;
            .header-nav-item-lang .dropdown-toggle{display: none}
          }
        }
        &-content{height: auto;
          & > .nav > .header-nav-item {
            & > a{color: #606067;
              .icoCharte-carret-top{margin-left: 10px}
            }
            &.menu{
              &-actu{
                & > .dropdown-menu .dropdown-menu{font-size: @font-size-small;
                  &_content{
                    .dropdown-menu{.content-columns(1; 0);}
                    .tools + li{break-inside: avoid-column; float: left}
                  }
                  li{margin-bottom: 5px}
                  a{font-size: @font-size-small; padding: 0 0 0 15px; color: @grey66;
                    .icoCharte-angle-right{margin-right: 5px}
                  }
                }
              }
              &-firme{
                & > .dropdown-menu .dropdown-menu{
                  &_content{padding-right: 405px;.content-columns(2; @grid-gutter-width);
                    .header-nav-item-lang{position: absolute; right: 0; top: 15px; width: 33.33333333%;}
                  }
                }
              }
            }
            & > .dropdown-menu{width: 100%; display: block;overflow: hidden;visibility: hidden;opacity: 0;z-index: -1;
              a{color: @black33;
                &:hover{color: @brand-primary}
              }
              .dropdown-menu{position: relative; display: block;.content-columns(1; 0); background: none;
                &_content{width: 1170px; margin: 0 auto;.content-columns(3; @grid-gutter-width);padding: 15px;
                  & > li{display: inline-block; width: 100%;
                    &.back{display: none}
                  }
                }
              }
            }
            &.open{position: static;
              & > .dropdown-menu{visibility: visible;opacity: 1; z-index: 99;.transition(all 0.3s linear); margin-top: -1px; border-top: 1px solid @border-grey}

            }
            &.hover .dropdown-menu{.transition(none);}
          }
        }
        &-client{position: absolute; right: 0; top: 0; line-height: 52px; font-size: 14px;
          .icoCharte{margin-right: 10px}
          a{
            font-family: 'open_sansbold';
            text-transform: uppercase;
            color: @brand-primary;
            &:hover{
              text-decoration: none;
              color: @brand-primary-hover;
            }
          }
        }
        &-menu{
          .back {display: none}
        }
      }
      &-search{cursor: pointer;
        &_content{padding: 7px 15px 0 45px;}
        &-bar{
          &.dropdown-menu{width: 66.666667%; top: inherit; left: 231px;border-right: 1px solid @border-grey;height: 100%; bottom: 2px; padding-top: 2px;
            form{padding-right: 40px;}
            .input-group{position: static}
            .back{top: 17px;}
            .btn-primary{height: 39px; line-height: 23px;}
            .input-group{
              &-btn{padding-left: 10px;}
              .icoCharte-search{top: 20px;left: 15px; }
            }
            .form-control{margin-top: 7px; padding-left: 0;}
          }
        }
      }
    }
    html{
      &.open{
        &Lg{
          .page{position: relative;
            &:before{display: block}
          }
        }
      }
    }
    // Auto complete Typeahead https://github.com/bassjobsen/typeahead.js-bootstrap-css
    span.twitter-typeahead {position: static!important;}
  }
}