@import "elements/variables";

@import "elements/introduction";
@import "elements/editorial-content";
@import "elements/other-articles";
@import "elements/newsletter";

.chiffres{
  margin-top: 20px;
  .content-tab{
    ul{
      padding-left: 0px;padding-bottom: 15px;
      li{overflow: visible;list-style: none; position: relative;
        @media(min-width: @screen-sm){padding-bottom: 0;}
        &:before{content:'• ';position: absolute;top: 0; left: 0;
          @media(min-width: @screen-sm){left: 20px;}
        }
        a{
          padding-left: 15px; display: inline-block;
        }
        &:hover{
          &:before{color: @brand-primary}
        }
      }
    }
  }
  .tab-accordion-mobile{
    margin-top: 20px;
    .title3{margin: 20px 0;}
    .btn-formules{font-size: 14px;font-family: 'open_sansregular'; display: block;text-transform: inherit; cursor: pointer;}
    li{
      &.collapsed .btn-formules{background: url('@{img}/btn_bonus_24.png') no-repeat 100% 50% transparent}
    }
  }
  @media(min-width: 768px){
    .tab-accordion{
      .navigation{
        overflow: hidden;padding-left: 0;margin-bottom: 0; padding-bottom: 15px; display: table; border-spacing: 15px;
        li{list-style: none;width: 20%;position: relative; display: table-cell; vertical-align: middle;background: @greyf0; padding: 52px 10px 10px;cursor: pointer;
          &:after{content: ''; position: absolute; bottom: -15px; .bgUrl('@{img}/arrow-grey-bottom.png', no-repeat);width: 30px; height: 15px; left: 0; right: 0; margin: 0 auto; display: block}
          figure{position: absolute; top: 0; left: 0; height: 52px}
          span{display: block;text-align: center;padding: 5px; background: none}
          &.collapsed:after{
            background: none;
          }
          &:hover{background-color: @greyf0;}
          &.active:after{
            .bgUrl('@{img}/arrow-grey-bottom.png', no-repeat);
          }
        }
      }
      .content-body{
        margin: 0 auto;padding: 0 15px;
        .content-tab{
          background-color: @greyf0;padding: 0;overflow: hidden;
          ul{
            overflow: hidden;position: relative;margin: 15px;
            .border{display: block;position: absolute;height: 100%;left: 50%;top: 0;border-right: 1px solid @greycc;}
            li{
              width: 49%;.position(20px, 9px);padding: 0 0 10px 20px;float: right;
              a{padding-right: 10px;}
              &.border-item{padding-right: 10px;float: left}
              &:hover, &.active{
                .position(20px, -57px);
              }
            }
          }
        }
      }
    }
  }
  @media(min-width: 992px){
    .tab-accordion{
      .navigation li{padding-top: 57px;
        figure {
          height: 57px
        }
      }
      .content-body{
        float: none;clear: both;
        .content-tab{
          ul{padding-bottom: 0;}
        }
      }
    }
  }
  @media(min-width: 1200px){
    .tab-accordion{
      .navigation li{padding-top: 71px;
        figure {
          height: 71px
        }
      }
    }
  }
}
.menu-formules, .tab-accordion-mobile, .filter-option{
  text-align: center;
  .btn-formules{
    font-size: 16px;font-family: 'open_sansbold';text-transform: uppercase;
    &:active, &:focus{
      background-color: transparent;
      .box-shadow(none);
    }
  }
  #subnavigation_formules, .navigation{
    padding: 0;
    clear: both;
    li, .chapter{
      display: block;
      overflow: hidden;
      text-align: left;
      list-style: none;
      padding-bottom: 15px;
      .bgUrl('@{img}/liseret/liseret_mobile.png', no-repeat);
      .position(center, bottom);
      .icon{
        float: right;
        .position(left, bottom);
        height: 15px;
      }
      a{
        color: @black1d;padding: 0;text-transform: uppercase;width: 80%;display: block;float: left;
        &:hover{color: @brand-primary;font-family: 'open_sansbold';}
      }
    }
  }
  .navigation{
    li{
      a{
        width: 100%;
        float: none
      }
    }
  }
}
.other-articles ul {
  @media (min-width: @screen-sm) {
    .content-columns(2; @grid-gutter-width);
  }
}