//owl-carousel LESS
.breadcrumb(@breadcrumb) when (@breadcrumb = true) {
  .breadcrumb{margin-bottom: 5px;
    .lt-ie8 &{margin-left: 0}
    li{font-size: @font-size-small;
      &.active{.open-sans-bold}
      span{display: none;
        .lt-ie8 &{padding: 0 5px; display: inline-block}
      }
    }
    a{color: #d4c7c1}
  }
}


.map(@block) when (@block = true){
  .map{background-color: @greyef; padding-top: @rules-fos!important; padding-bottom: @rules-fos!important; margin-bottom: @rules-fos;
    h2{text-transform: uppercase;margin-bottom: @rules-fos}
    &-link{background-color: @white;  padding-top: @rules-fos!important; padding-bottom: @rules-fos!important;
      .input-group{width: 100%;
        .lt-ie8 &{padding: 0 15px; width: 85%;
          .ico{top: 5px; position: relative}
        }
        .form-control{border-right: none;
          .lt-ie8 &{width: 80%}
        }
        &-btn{cursor: pointer; width: 21px;border-top: 1px solid @input-border; border-bottom: 1px solid @input-border; border-right: 1px solid @input-border; padding-right: 5px; height: 32px;}
      }
    }
    &-france{
      .ico-pins{position: absolute; cursor: pointer;
        &.actif, &.hover{background-position: -323px -130px;}
      }
    }
    &-belgique{
      .ico-pins{position: absolute; cursor: pointer;
        &.actif, &.hover{background-position: -323px -130px;}
      }
    }
    &-luxembourg{
      .ico-pins{position: absolute; cursor: pointer;
        &.actif, &.hover{background-position: -323px -130px;}
      }
    }
    &-agences{display: none; margin-top: @rules-fos;overflow: hidden;
      .ico, .map-content{display: inline-block; vertical-align: top}
      .ico-pins{margin-right: 10px;}
      strong{font-size: @font-size-extramedium}
      a{text-decoration: none}
      &.actif, &.hover{display: block}
      &.not-found{font-weight: bold;}
    }
    &-schedule{display: block; margin-top: 10px}
  }
}

.client(@block) when (@block = true){
  .client{
    &-intro{margin-bottom: @rules-fos}
    &-admin{position: relative;
      form{background-color: @brand-primary; padding: @rules-fos 15px @rules-fos;color: @white;}
      a{color: @white!important}
      .form{
        &-control{border-color: @white!important; text-transform: none!important;}
        &-link{font-size: @font-size-small; margin-bottom: 15px; padding-right: 35px;
          @media(min-width: 768px){text-align: left; margin-bottom: 0}
        }
        &-group{margin-bottom: 0; margin-top: 15px;
          @media(min-width: 768px){margin-top: 10px}
          @media(min-width: 992px){padding-right: 20px;}
          &.input-error{
            .ico-error{display: none!important;}
          }
          .error{display: none!important;}
        }
        &-btn{margin-bottom: 0;
          .btn{font-size: @font-size-mobile;}
        }
      }
    }
    &-title{font-size: 20px; .open-sans-semi-bold; text-transform: uppercase; text-align: center;
      @media(min-width: 768px){text-align: left; font-size: 18px; margin-bottom: 0}
      .ico{margin-right: 10px}
    }
  }
}

.advice(@block) when (@block = true){
  .advice{margin: @rules-fos 0;
    .lt-ie8 &{padding: 0 15px!important; width: 47%!important;}
    &:nth-child(even){
      .advice-title{background-color: @greyef; color: @green;
        @media(min-width: 992px){background-color: @green; color: @white; }
      }
    }
    &-container{border: 1px solid @greyef; position: relative;
      .img-univers{position: absolute; bottom: 0; right: 0}
    }
    &-content{font-size: @font-size-base; padding: 0 10px 0 10px;}
    &-title{background-color: @green; color: @white; font-size: @font-size-extramedium; text-transform: uppercase; .open-sans-bold; padding-left: @rules-fos*2}
    @media(min-width: 992px){
      &.even{
        .advice-title{background-color: @greyef; color: @green}
      }
    }
  }
}

.form(@block) when (@block = true){
  .form{
    &-title{font-size: @font-size-extramedium; text-transform: uppercase}
    &-group{overflow: hidden;
      label{font-size: 14px; font-weight: normal; line-height: 32px; margin-bottom: 0;}
      .error{color: @red; font-size: @font-size-extrasmall;}
      &.input-error{position: relative;
        .ico-error{position: absolute; right: 0; top: 40px;
          @media(min-width: 768px){top: 9px}
        }
      }
    }
    &-textarea{
      label, .form-control{width: 100%!important;}
      .error{top: inherit!important; bottom: 15px!important;}
    }
    &-check{
      label{display: block;
        @media(min-width: 768px){display: inline-block}
      }
      .error{width: 100%!important; float: none!important;}
    }
    &-mentions{font-size: 12px!important;}
    &-control{
      .lt-ie8 &{padding-top: 0!important; padding-bottom: 0!important; line-height: 32px}
      &-error{border-color: @red;}
    }
    &-contact{margin-top: @rules-fos;
      p{font-size: 14px}
      &-text{font-size: @font-size-extramedium!important;}
      &.show{.noTransition; height: auto!important;}
      .invalid-form .error{color: @red}
      &-content{
        .form{
          &-adress{margin-bottom: 0!important;
            .form-control{float: right;margin-bottom: 40px;
              .lt-ie8 &{margin-right: 28px}
            }
            &.input-error{padding-right: 0;
              label{
                @media(min-width: 768px){width: 39%;}
                @media(min-width: 992px){width: 29%;}
              }
            }
            .error-address{padding-right: 20px;position: relative;overflow: hidden;
              .error-input{width: 100%!important;
                .lt-ie8 &{width: 86%!important;}
              }
              .form-control{margin-bottom: 15px;}
              .ico-error{top: 9px;}
            }
          }
          &-group{padding-right: 20px;position: relative;
            @media(min-width: 768px){margin-bottom: 5px;}
            label{
              @media(min-width: 768px){width: 40%;display: block; float: left}
              @media(min-width: 992px){width: 30%;}
            }
            .error-input{
              @media(min-width: 768px){width: 60%;float: left;position: relative;}
              @media(min-width: 992px){width: 70%;}
              .lt-ie8 &{width: 60%!important;}
              .form-control{width: 100%!important;
                .lt-ie8 &{width: 100%!important;}
              }
            }
            .ico-error{right: 0px;
              @media(min-width: 768px){right: -20px;}
            }
            .error{position: absolute;left: 0;bottom: 0;
              @media(min-width: 768px){ top: 33px; bottom: inherit}
            }
          }
          &-control{margin-bottom: 15px;
            @media(min-width: 768px){width: 60%;margin-bottom: 30px!important;}
            @media(min-width: 992px){width: 70%;}
            .lt-ie8 &{padding-top: 0; padding-bottom: 0; display: block; width: 60%!important;}
            &.email{text-transform: inherit}
          }
          &-check{margin-top: @rules-fos;margin-bottom: @rules-fos;
            label{margin-right: @rules-fos;width: auto!important;}
            .error{left: 0; bottom: 0; top: inherit}
          }
        }
        .btn{font-size: @font-size-extramedium;}
        .checkBox, .checkRadio{cursor:pointer; display: inline-block;margin-bottom: 15px;
          input{display:none;}
          span{display:inline-block;vertical-align:middle;}
          .text{margin-left: 5px}
        }
        .checkRadio{
          &.check span{background-position: -99px -65px}
        }

        .checkBox{
          &-label{float: none!important;}
          &.check span{background-position:-158px -63px}
        }
      }
    }
    &-valid{color: @green; .open-sans-semi-bold; font-style: italic; margin-top: 25px; margin-bottom: 25px}
    &-step{
      &-content{
        a{text-decoration: none}
        .ico-checkradio{margin-right: 10px}
        .collapsed{
          .ico{background-position: -79px -65px}
        }
        .client{margin-bottom: 10px;display: block}
      }
      &-text{margin-bottom: 10px; font-size: 14px}
      .error-input{position: relative;
        @media(min-width: 768px){width: 40%; float: none!important; display: inline-block; margin-left: @rules-fos;vertical-align: middle;
          .lt-ie8 &{display: inline;}
        }
        @media(min-width: 992px){width: 30%}
        .form-control{width: 100%!important;margin-left: 0!important;}
        .ico-error{right: -20px; top: 9px;}
      }
      .form-group{padding-right: 10px; overflow: visible}
      .form-control{
        &#siretNum{
          @media(min-width: 768px){width: 40%; float: none!important; display: inline-block; margin-left: @rules-fos;vertical-align: middle;
          }
          @media(min-width: 992px){width: 30%}
        }
      }
    }
  }
}

.panel(@panel) when (@panel = true){
  .panel{margin-top: @rules-fos!important; .noBoxShadow;
    &-heading{padding: 0;
      a{display: block;text-decoration: none; margin-bottom: 0}
    }
    &-title{text-align: left; text-transform: uppercase;}
    &-group{margin-bottom: 0}
    &-collapse{
      ul{margin-bottom: 10px}
    }
  }
}

.panel-content(@panel-content) when (@panel-content = true){
  .content{
    .panel {
      &-title {
        font-size: @font-size-large
      }
      &-body {
        font-size: @font-size-base;
      }
      &-content {
        margin-bottom: @rules-fos;
        overflow: hidden;
        figure img{
          @media(min-width: 768px){margin: 0}
        }
        &-subtitle {
          font-size: 14px
        }
        &-title {
          margin-bottom: 15px;
          & ~ .panel-content-title {
            margin-top: @rules-fos
          }
        }
      }
    }
  }
}

.product-list(@product-list) when (@product-list = true){
  .product-list{background-color: @greyef;padding-top: 15px!important; padding-bottom: 15px!important; position: relative;margin-bottom: 23px;
    @media(min-width: 768px){text-align: center;}
    &-box{background-color: transparent;margin-bottom: 0; margin-top: @rules-fos; padding-bottom: 0!important;
      .row{
        @media(min-width: 768px){display: block; text-align: center}
      }
      .product-list-img{
        @media(min-width: 768px){width: auto; max-width: 25%}
      }
      .product-list-content{font-size: @font-size-extramedium!important; color: @black; text-align: center; .open-sans-semi-bold}
    }
    p{font-size: @font-size-medium}
    &-title{font-size: @font-size-large!important; .open-sans-semi-bold; text-transform: uppercase; margin-bottom: @rules-fos}
    &-img{margin-bottom: 10px!important;
      &-title{.open-sans-semi-bold}
      @media(min-width: 768px){
        display: inline-block;float: none; vertical-align: middle;
        &.col-sm-2{width: 15.9%!important;}
        &.col-sm-3{width: 24%!important}
        &.col-sm-4{width: 32%!important}
        &.col-xs-6{width: 24%}
        &.clear{clear: none!important;}
      }
      &.clear{clear: left}
    }
    &-text{margin-top: @rules-fos; margin-bottom: @rules-fos; text-align: center;font-size: @font-size-medium!important; .open-sans-semi-bold;
      .btn{font-size: 15px!important; padding: 6px 10px}
      @media(min-width: 768px){margin-bottom: 0}
    }
    &-five{
      @media(min-width: 768px){width: 19.6%!important;}
    }
    .ico-arrow-grey{position: absolute; bottom: -23px; left: 0; right: 0; display: block; margin: 0 auto;
      .lt-ie8 &{left: 460px!important;
        @media(min-width: 1200px){
          left: 546px!important;
        }
      }
    }
  }
}

.bloc-img-text(@bloc) when (@bloc = true){
  .bloc-img-text{margin-bottom: 10px; overflow: hidden;
    @media(min-width: 768px){
      figure{margin-bottom: 0}
    }
    &-title{margin-bottom: 15px}
    &-content{
      .bloc-img-text{margin-bottom: 0;
        &-title{font-size: 14px; color: @text-color!important; .open-sans-bold;}
      }
    }
  }
}

.product-box(@block) when (@block = true){
  .product-box{margin-bottom: @rules-fos*2;
    @media(min-width: 768px){display: inline-block;float: none!important; width: 49%; vertical-align: middle;
      .lt-ie8 &{display: inline!important;}
    }
    @media(min-width: 992px){width: 33%}
    &-title{font-family: @font-family-base;font-size: @font-size-h3;
      a{text-decoration: none}
    }
    &-picto{padding-right: 0}
    .btn-black{font-size: @font-size-medium; padding: 6px 12px}
  }
}

.tooltip(@tooltip) when (@tooltip = true){
  .tooltip{font-size: @font-size-medium;}
}

.edito(@edito) when (@edito = true){
  .edito{
    &-content{margin-bottom: 30px;font-size: 14px;
      h2{margin-bottom: 15px;
        & ~ h2{margin-top: 30px}
      }
      hr{border-color: #561c00}
      table{margin: 0 auto}
      .table {
        tr:nth-child(2n+0) > th, tr:nth-child(2n+0) > td {background-color: @greyef;}
        tr{
          td, th{border-top: 1px solid #DDD!important;}
        }
      }
      .mentions{font-size: 10px}
      .bloc-img-text{margin-left: -15px; margin-right: -15px}
      .h2{margin-bottom: 15px;
        & ~ .h2{margin-top: 30px}
      }
      ul, ol {margin-bottom: 10px}
      h3{margin-top: 10px;margin-bottom: 15px;
        & ~ h3{margin-top: @rules-fos}
      }
      .h3{margin-top: 10px;margin-bottom: 15px;
        & ~ .h3{margin-top: @rules-fos}
      }
      p{padding: 0}
      .pdf-link{font-size: @font-size-small; text-decoration: none; color: @text-color;
        &:hover{text-decoration: underline; color: @text-color!important;}
      }
      &-intro{margin-bottom: 30px}
      a{text-decoration: underline;color: @green;
        &:hover{color: @text-color}
      }
      .img-picto{
        @media(min-width: 768px){width: auto; padding: 0 15px 0 0; float: left;
          .lt-ie8 &{width: 80px; margin-right: 10px}
        }
      }
    }
    .btn{font-size: @font-size-large; text-decoration: none; color: @white}
  }
}

.headband(@headband) when (@headband = true){
  .headband{margin-bottom: 10px}
  .title-page{
    @media(min-width: 570px){position: relative;}
    &-text{.open-sans-semi-bold;text-transform: uppercase; font-size: 30px!important;
      @media(min-width: 570px){position: absolute;left: 0; right: 0;margin: 0 auto;padding-top: 2%;padding-bottom: 2%;.opacity(0.8);min-width: 400px;
      }
      span {text-transform: none;}
    }
  }
}

//owl-carousel LESS
.owl-carousel(@owl-carousel) when (@owl-carousel = true) {
  .owl {
    &-controls{margin-top: 0!important;}
    &-carousel {padding: 0;
      @media(min-width: 768px){padding: 0 15px}
      figure a, figure{margin-bottom: 0!important;}
    }
    &-page {
      .lt-ie8 &{display: inline!important;}
      span {
        width: 16px !important;
        height: 16px !important;
        background: url('@{images}/sprite_fos.svg') no-repeat -22px -154px transparent !important;
        opacity: 1 !important;
        filter: none!important;
        .no-svg &{background: url('@{images}/sprite_fos.png') no-repeat -22px -154px transparent !important;}
      }
      &.active, &:hover {
        span {
          background-position: 0 -154px !important;
        }
      }
    }
    &-prev, &-next {background-color: transparent !important;position: absolute;top: 45%;opacity: 1 !important;;filter: none!important; padding: 0!important; margin: 0!important;}
    &-prev {
      left: 20px
    }
    &-next {
      right: 20px
    }
  }
}

.owl-home(@owl-home) when (@owl-home = true){
  .owl-home{margin-bottom: @rules-fos;
    .owl-controls{border-top: 1px solid @brown56;
      @media(min-width: 768px){border-color: transparent}
    }
  }
}

//owl-carousel LESS
.modal(@modal) when (@modal = true) {
  .modal {font-size: @font-size-medium;overflow: hidden;
    &-open{overflow: initial;}
    &-header {background-color: @greyef;height: 35px;}
    &-content {.border-radius(0px)}
    &-title {text-transform: uppercase;line-height: 35px}
    .close {.opacity(1);line-height: normal;margin: 0 10px 0 0;position: absolute;right: 0;top: 3px;padding: 0;
      .lt-ie7 &{background-color: @greyef; border: none}
    }
    @media(max-width: 768px){
      .embed-responsive{position: relative;display: block;padding: 0;overflow: hidden;
        .embed-responsive-item{border: 0 none;bottom: 0;height: 100%;left: 0;position: absolute;top: 0;width: 100%;}
        &.embed-responsive-16by9{padding-bottom: 56.25%;}
      }
    }
    &-parent-ie6{position: absolute;width: 100%;text-align: center;
      .modal{
        &-dialog{top: 10px!important; bottom: inherit!important;margin: 0 auto!important;}
        &-text{font-size: @font-size-medium;}
        &-body{
          .media{
            &-ie6{display: block;width: 100%;margin:20px 0}
            &-img{float: left}
            &-text{font-size: @font-size-medium;}
            &-title{
              text-transform: uppercase;font-size: @font-size-extramedium;.open-sans-semi-bold;margin-bottom: 5px;
              span{text-transform: none;font-style: italic;font-family: @font-family-base;font-size: @font-size-base}
            }
            &-content{text-align: left}
          }
        }
      }
    }
  }
  @media(min-width: 768px){
    .modal{
      &-dialog{margin: 15% auto;width: 685px}
    }
  }
}