@import "elements/variables";

@import "elements/banner-lead";
@import "elements/tab-bar";
@import "elements/widgets";
@import "elements/menu-contextuel";
.page{
  a.btn-primary{
    &:hover, &:focus{color: @white}
  }
}
.banner-lead{position: relative;
  @media (max-width: @screen-xs-max) {
    padding-top: 0;
  }
  &.bg{padding-bottom: 0; padding-top: 0;}
  &-bg{
    &-container{position: static}
    &-text{padding-top: 25px; padding-bottom: 25px; margin: 0;
      @media(min-width: @screen-sm){position: static;}
      & + .banner-lead-form{
        @media(min-width: @screen-sm){padding-top: 25px; padding-bottom: 25px;}
      }
      .banner-lead-text-content{position: relative;}
    }
  }
  &.media-bottom{
    &_left, &_right{
      @media(min-width: @screen-sm){padding-bottom: 0}
    }
  }
  &.night{
    h1, h2, p, a{color: @white;}
    .modal-body{
      p, a{color: inherit;}
    }
    a{
      path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white;}
      &:hover, &:focus{color: @brand-primary-hover;
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @brand-primary-hover;}
      }
    }
    .btn{
      &-revert{color: @brand-primary;
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @brand-primary;}
        &:hover, &:focus{color: @greyeb;
          path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @greyeb;}
        }
      }
      &-primary{
        &:hover, &:focus{color: @white;
          path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white;}
        }
      }
    }
  }
  form{
    .btn{width: 100%;}
  }
  &-text{
    .media-bottom_left &, .media-bottom_right &{padding-bottom: 25px;}
    &-frame{background: rgba(0,0,0,0.5); padding: 15px;}
    &-center{float: none; margin-left: auto; margin-right: auto;}
  }
  &-form{
    &-content{
      .btn-primary{
        &, &:hover{
          path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white;}
        }
      }
      form.ajax .loader{
        position: inherit;
        left: 0;
        right: 0;
        margin: 0 auto;
      }
      @media(max-width: @screen-xs-max){padding: 0;}
    }
    & > .row > .pull-right > .bg{.box-shadow2(0 1px 4px 0 rgba(0,0,0,0.13), 0 1px 3px 0 rgba(0,0,0,0.22));}
    .bg{background: @white;}
    .title{margin-top: 0; padding: 15px 30px; background: @brand-primary-hover; font-family: 'noto_serifregular'; font-weight: bold; text-align: center;color: @white;
      @media(max-width: @screen-xs-max){position: relative; margin-bottom: 20px;
        &:before {
          width: 0;
          height: 0;
          content: '';
          display: block;
          border-left: 20px solid transparent;
          border-right: 20px solid transparent;
          border-top: 20px solid @brand-primary-hover;
          position: absolute;
          top: 100%;
          left: 0;
          right: 0;
          margin: 0 auto;
        }
      }
    }
    .chapo{padding: 0 30px; text-align: center;
      .night &{color: @text-color}
    }
    form{padding: 0 30px;}
  }
  &-hangs{font-size: 18px;margin-top: 1.5rem;
    p{position: relative; display: inline; width: auto;
      .banner-lead.text-left &{display: inline-block;}
    }
    &-picto{width: 25px; height: 25px; line-height: 25px; display: inline-block; position: absolute; left: 0; top: 1px;
      img, svg{max-height: 25px; display: inline-block; vertical-align: middle}
      path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{
        .night &{fill: @white;}
      }
      & + span{padding-left: 35px; display: inline;
        .banner-lead.text-left &{display: inline-block;}
      }
    }
  }
  &-label{font-size: @font-size-small; .border-radius(1px); text-transform: uppercase;
    span{border: 1px solid @text-color; text-align: center; display: inline-block; padding: 10px 15px;
      .night &{border-color: @white}
    }
  }
  &-btn{margin-top: 1.5rem;
    &-both{margin-top: 0; display: flex; align-items: center; flex-wrap: wrap;margin-left: -15px; margin-right: -15px;
      .text-center &{justify-content: center}
      .text-right &{justify-content: flex-end}
      .banner-lead-btn-item{margin: 15px 15px 0;}
    }
    a{text-decoration: underline; position: relative;
      & > span{position: relative; display: inline-block}
      &:hover{
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @brand-primary;}
      }
      path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @text-color;}
      &.btn{text-decoration: none}
    }
    .btn-primary{margin: 0; position: relative;
      &, &:hover{
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white;}
      }
    }
    .btn-revert{color: @brand-primary; background: @greyeb; border-color: @greyeb;
      path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @brand-primary;}
      &:hover, &:focus{color: @greyeb; background: @brand-primary-hover; border-color: @brand-primary-hover;
        path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @greyeb;}
      }
    }
  }
  &-btn, &-responsive{
    &-picto{
      &, .page .btn-primary:hover &, .page .btn-primary &, .page .btn-revert &, .page .btn-primary:focus &{width: 24px; height: 24px; display: block; position: absolute; left: 0; top: 50%; margin-top: -14px;}
      img, svg{max-height: 24px; display: inline-block; vertical-align: middle}
      & + span{padding-left: 30px; display: block}
    }
  }
  &-responsive{
    &-btn{display: inline-block;position: relative;}
    &-content{
      .btn-primary{
        &, &:hover{
          path, circle, ellipse, image, line, polygon, polyline, rect, text, use, svg{fill: @white;}
        }
      }
    }
  }
}
.second-menu{
  &-title{
    img, svg{position: absolute; top: 20px; max-width: 25px; max-height: 25px;
      @media(max-width: @screen-md-max){left: 0;}
      @media(min-width: @screen-lg){left: 15px;}
      path, circle, ellipse, image, line, polygon, polyline, rect, text, use, &{fill: @white; max-width: 25px; max-height: 25px; vertical-align: middle;}
    }
  }
  & > .dropdown-menu.owl-carousel.owl-loaded{
    @media(max-width: @screen-md-max){display: block;border-top: 1px solid rgba(255,255,255,0.6); z-index: 1;margin-top: -1px;
      .owl-nav{display: none}
    }
  }
  .dropdown-menu{border: none; margin: 0 auto; padding: 0;
    @media(max-width: @screen-md-max){width: 100%;position: relative;
      &.owl-loaded{display: none;}
    }
    @media(min-width: @screen-lg){min-width: 200px;position: absolute;background: rgba(52, 152, 219 ,0.85);}
    li{
      @media(max-width: @screen-md-max){background: none}
      @media(min-width: @screen-lg){background: rgba(255,255,255,0.2);border-bottom: 1px solid rgba(219,219,219,0.3); text-align: left; display: block;
        &.last{border: none}
        a{white-space: normal;
          &:hover{text-decoration: none;
            @media(min-width: @screen-lg){background: rgba(52, 152, 219 ,0.4);}
          }
        }
      }
      a{color: @white;}
    }
    .owl-stage{
      &-outer{background: rgba(255,255,255,0.1)}
    }
    &.open .arrow-up:after{border-bottom-color: rgba(52, 152, 219 ,1)}
  }
  .owl{
    &-stage{
      @media(max-width: @screen-md-max){padding: 0 15px}
    }
    &-item{
      .dropdown{
        .dropdown-title{position: relative;z-index: 1002;padding: 20px 40px 20px 15px}
        &.open{
          @media(min-width: @screen-lg){
            .dropdown-menu{display: none}
          }
          .dropdown-title{
            @media(max-width: @screen-md-max){font-family: 'open_sansbold';}
          }
          a{font-family: 'open_sansregular'}
          .arrow-up{
            &:before, &:after, &-border:before, &-border:after{bottom: -2px; left: 0; right: 0; margin: 0 auto; border: solid transparent; content: " "; height: 0; width: 0; position: absolute; pointer-events: none;}
            &:before, &:after{z-index: 1}
            &:before{border-color: rgba(194, 225, 245, 0);border-bottom-color: rgba(255,255,255,1); border-width: 8px; margin: 0 auto}
            &:after{border-color: rgba(136, 183, 213, 0); border-width:  7px; margin: 0 auto; border-bottom-color: @brand-primary}
            &-border{
              &:before, &:after{z-index: 1002;}
              &:after{border-color: rgba(136, 183, 213, 0); border-width: 7px; margin: 0 auto;border-bottom-color: rgba(255,255,255,0.1)}
              &:before{border-color: rgba(194, 225, 245, 0); border-width: 8px; margin: 0 auto}
            }
          }
        }
        .icoCharte-select{position: absolute; top: 50%; right: 15px; margin-top: -3px;
          @media(max-width: @screen-md-max){right: 20px;}
        }
        @media(max-width: @screen-md-max){position: static}
      }
      @media(min-width: @screen-lg){
        &:hover{
          &, .open{
            .dropdown-menu{display: block};
          }
        }
      }
      .second-menu-title-picto{
        @media(max-width: @screen-md-max){padding: 20px 15px 20px 40px;}
        @media(min-width: @screen-lg){padding: 20px 15px 20px 55px;}
      }
    }
  }
}