/* helpers */
  [id] {
    scroll-margin-top: 60px;
    scroll-behavior: smooth;
  }         
  .zoneLink {
    position: relative;
  }
  .zoneLink a::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0);
  }
  .imgFluid {
    display: block;
    max-width: 100%;
    margin: 0 auto;
    height: auto;
  }
/* PAGE  */
  .broeco {
    font-size: 20px;
    margin: 0 auto 2px auto;
    background-color: var(--pb-color-lightgrey);
    color: #323232;
  }
    .broeco-limits{
      max-width: 1200px;
      margin: 0 auto;
    }
      .broeco-inner {
        width:calc(100% - 2.4em);
        max-width:1152px;
        margin:0 auto;
      }
      .broeco-section{
        padding:2.4em 0 0 0;
      }
      .broeco-section--avtg{
        padding:2.4em 0;
      }
      .broeco-section--how{
        background-color: #008393;
        color: #FFF;
        padding:2.4em 0;
      }



/* SUR HEADER*/
  .broeco-surHeader{
    background-color: #0d2ea0;
    height:62px;
    padding:12px 0;
  }
    .broeco-surHeader img{
      height:38px;
      width:auto;
    }
/* HEADER */
  .broeco-headerSection{
    background-color: #ddded9;
  }
    .broeco-header {
      background: #fff url(https://static.fnac-static.com/multimedia/fnacdirect/publi/Guides/high-tech/brother-ecopro/bg-header.jpg) no-repeat bottom center;
      background-size: cover;
    }
    .broeco-header-inner {
      padding:4% 6% 14% 8%;
    }
      .broeco-header-blk {
        max-width:420px;
        background-color: #008393;
        border-radius: 0 0 20px 0;
        color:#FFF;
        line-height: 1.3;
        padding:1.2em;
      }
        .broeco-header-title,
        .broeco-header-intro {
          display: inline;
          font-size: 0.9em;
          margin: 0;
        }
        .broeco-header-title{
          font-weight: 700;
        }
        .broeco-header-title strong{
          font-size: calc((26/18) * 1em);
        }
/* NAV */
  .broeco-navSection {
    background-color: #fff;
  }
    .broeco-navSection .broeco-inner{
      display: flex;
      align-items: center;
      justify-content: center;
    }
    .broeco-navSection-icon{
      height: 34px;
      margin-top:-15px;
      margin-right:30px;
    }
      .broeco-nav {
        list-style-type: none;
        text-align: center;
        padding: 1em 0;
        margin: 0;
      }
        .broeco-nav-item {
          display: inline-block;
          text-align: center;
          padding: 0;
          margin: 0 1em;
          font-size: 0.9em;
          color: #323232;
        }
          .broeco-nav-item-label {
            display: inline-block;
            color: #323232;
            padding:0 0.3em;
            text-decoration: none;  
            border-bottom: 1px solid #FFF;
          }
          .broeco-nav-item-label:hover,
          .broeco-nav-item-label:focus {
            text-decoration: none;  
            color:#008393;
            border-bottom-color:#008393 ;
          }
/* MAIN  */
  /* * Titres * */
    .broeco-sectionTitle {
      color: inherit;
      text-align: center;
      font-size: 1.6em;
      font-weight: 700;
      line-height:1.2;
      padding: 0;
      margin-top:0;
      margin-right:auto;
      margin-bottom:0.75em;
      margin-left:auto;
    }      
    .broeco-subsectionTitle{
      text-align: left;
      font-size: 1.05em;
      font-weight: 700;
      line-height:1.2;
      margin-top: calc((32 / 21) * 1em);
      margin-right:auto;
      margin-bottom: calc((16 / 21) * 1em);
      margin-left:auto;
    }
    .broeco-subsectionTitle:first-child{
      margin-top: 0;
    }
    @media (max-width: 480px) { 
      .broeco-sectionTitle {   
        font-size: 1.2em;       
        text-align: left;
      }
    }
  /* * What * */
    .broeco-whatisit{
      display: flex;
      align-items: center;
      justify-content: center;
      margin:0 auto;
    }
      .broeco-whatisit > div:nth-child(1){
        margin:0.75em;
      }
      .broeco-whatisit > div:nth-child(2){
        max-width: 520px;
        background-color: #008393;
        color:#FFF;
        padding:1.2em;
        border-radius:0 0 20px 0 ;
      }
        .broeco-whatisit img{
          display: block;
          width:auto;
          margin:0.75em 0.5em;
        }
        .broeco-whatisit img[src*="logo-ecopro"]{
          height:3em;
        }
        .broeco-whatisit img[src*="logo-brother"]{
          height:2.7em;
        }
        .broeco-whatisit h3{
          font-size:0.85em ;
          font-weight: 700;
          margin:0 0 1em 0;
        }
        .broeco-whatisit p{
          font-size:0.85em ;
          margin:0;
        }
        @media screen and (max-width: 480px){
          .broeco-whatisit{
            display: block;
          }
          .broeco-whatisit img{
            display: inline-block;
            margin:0.5em;
          }
        }    
  /* * Reassurance * */
    .broeco-reassurance{
        max-width:1360px;
        display:flex;
        flex-direction: row;
        flex-wrap: wrap;
        justify-content:center;
        list-style-type:none;
        padding:0 ;
        margin:0 auto;
      }
        .broeco-reassurance-item{
          flex-basis: 29%;
          line-height:1.3 ;
          padding:0 0.6em;
          margin:2em 0 0 0;
        }  
          .broeco-reassurance-item-title{
            font-size: 1em;
            margin:0 0 0.4em 0;
          }
            .broeco-reassurance-item-title-icon{
              display: block;
              width: 3em;
              height: 3em;
              margin: 0 auto 0.6em auto;
            }
            .broeco-reassurance-item-title-label{
              display: block;
              text-align: center;
              font-size: 0.75em;
              line-height: 1.2;
              /*min-height:2.5em;*/
              font-weight: 700;
            }
          .broeco-reassurance-item-desc{
            font-size: 0.75em;
            line-height:1.3;
            margin:0;
          }  
      @media screen and (max-width: 960px){
        .broeco-reassurance-item{
          flex-basis: 33%;
        }    
      }
      @media screen and (max-width: 768px){
          .broeco-reassurance-item-title{
            display: flex;
            justify-content: flex-start;
            align-items: center;
            margin:0 0 0.6em 0;
          }
            .broeco-reassurance-item-title-icon {
              width: 1.6em;
              height: 1.6em;
              margin:0 0.8em 0 0;
            }
            .broeco-reassurance-item-title-label{
              flex-basis: calc(100% - 3.2em);
              text-align: left;
              margin:0 auto;
            }
      }
      @media screen and (max-width: 480px){
        .broeco-reassurance{
          width: calc(100% - 2.4em);
          display: block;
          padding:0;
        } 
        .broeco-reassurance-item{
          padding:0;
        }
        .broeco-reassurance-item:not(:last-child){
          margin-bottom:1.2em;
        }
        .broeco-reassurance-item-title-label,
        .broeco-reassurance-item-desc{
            min-height: unset;
            font-size: 0.9em;
        }
      }

  /* * How * */
    .broeco-how{
        display: flex;
        align-items: center;
        justify-content: center;
        margin:0 auto;
      }
        .broeco-how > div:nth-child(1){
          flex-basis:45%;
        }
          .broeco-how iframe{
            width: 100%;
            aspect-ratio:16/9;
          }
        .broeco-how > div:nth-child(2){
          flex-basis:50%;
          padding:1% 3% 1% 3%;
        }  
          .broeco-how ol{
            padding-left: 1em;
          }    
            .broeco-how li{
              font-size: 0.85em;
              margin-top: 0.8em;
            }
      @media screen and (max-width: 768px){
        .broeco-how{
          display: block;
        }
          .broeco-how > div:nth-child(n){
            padding:0;
          }
          .broeco-how > div:nth-child(n){
            padding:0.8em;
          }            
      }

  /* * Tablist Recap Offres  * */
    .broeco-tabSection [role='tablist'] {
        display: flex;
        align-items: stretch;
        justify-content: center;
        flex-wrap: nowrap;
        overflow-x: auto;
        scroll-behavior: smooth;
        scroll-snap-type: x mandatory;
        padding-left: 0.6em;
        padding-right:0.6em;
        margin-bottom:1em;
        margin-left:-1.2em;
        margin-right:-1.2em;
      }
        .broeco-tabSection [role='tab'] {
          flex-basis: calc((100% - 2.4em) / 3);
          min-width: 9em;
          max-width:14em;
          background-color: #FFF;
          color:#757575;
          border: 1px solid #757575;
          box-shadow: none;
          border-radius:9000px;
          padding:0.625em 1.2em 0.5625em 1.2em;
          font-size: 0.8em;
          font-family: inherit;
          line-height: 1.307692;
          position: relative;
          cursor: pointer;
          margin-left: 0.6em;
          margin-right: 0.6em;
        }
        .broeco-tabSection [role='tab']:hover {
          background-color: #232323;
          color:#FFF;
          border-color: #232323;
        }
        .broeco-tabSection [role='tab'][aria-selected='true'] {
          background-color: #008393;
          color:#FFF;
          border-color: #008393;
        }
        .broeco-tabSection [role='tab'][aria-disabled='true'] {
          opacity: 0.65;
          font-weight: normal;
          cursor: not-allowed;
        }
      .broeco-tabSection [role='tabpanel'] {
        /*background-color: #F2F2F2;*/
        border:none;
        padding:0.6em 0 0 0;
      } 
      @media screen and (max-width: 480px){

        .broeco-tabSection [role='tablist'] {
          justify-content: flex-start;
        }
      }
  /* * Tarifs * */ 
    .formulesList{
        display: flex;
        align-items: flex-end;
        justify-content: center;
        flex-wrap: wrap;
        list-style-type: none;
        padding:0;
        margin:-1.2em 0 0 -1.2em;
      }
        .formulesList-item{
          text-align: center;
          margin:1.2em 0 0 1.2em;
          flex-basis:calc( (100% - (4 * 1.2em)) / 4) ;
          min-width: 140px;
          max-width: 230px;
        }
      .blkFormule{
        border-radius: 8px;
        box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
        text-align: center;
      }
        .blkFormule-nom{
          display: block;        
          border-radius: 8px 8px 0 0;
          background-color: #FFF;
          color:#141414;
          font-size: 0.85em;
          font-weight: 700;
          line-height: 1;
          padding:1.25em 1em 0.8125em 1em;
        }
          .blkFormule-nom strong{
            display:table;
            border-radius:8px;
            padding:0.625em 1.2em 0.5625em 1.2em;
            background-color: #008393;
            color: #FFF;
            font-size: 0.8125em;
            font-style: normal;
            font-weight: 400;
            text-align: left;
            margin:-1em 0 1.2em -0.8em;
          }
        .blkFormule-pricer{
          display: block;
          border-radius: 0 0 8px 8px;
          background-color: #757575;
          color:#FFF;
          padding:0.4em 0.5em ;
        }
          .blkFormule-prix{
            display: block;
            font-size: 1.5em;
            font-weight: 700;
            line-height: 1;
          }
            .blkFormule-prix em{
              font-style: normal;
              font-size:0.5em ;
              font-weight: 400;
            }
        .blkFormule-nbrPages{
            display: block;
          font-size: 0.8em;
          line-height: 1.2;
          padding:0.5em 0 0 0;
        }
      .formulesList-item > strong{
        font-size: 0.8em;
      }

  /* * Liste de blocs *  */
    .broeco-blkList{
      display: flex;
      align-items: stretch;
      justify-content: center;
      list-style-type:none;
      padding:0;  
      margin: -1.2em 0 0 -1.2em;    
    }
    .broeco-blkList--lineOf2,
    .broeco-blkList--lineOf3,
    .broeco-blkList--lineOf4{
      flex-wrap: wrap;
    }
      .broeco-blkList-item{
        text-align: center;
        margin:1.2em 0 0 1.2em;
        flex-basis: calc( 100% / 3 );
      }
      .broeco-blkList--lineOf2 .broeco-blkList-item{
        flex-basis: calc( (100% - ( 2 * 1.2em )) / 2 );
      }
      .broeco-blkList--lineOf3 .broeco-blkList-item{
        flex-basis: calc( (100% - ( 3 * 1.2em )) / 3 );
      }
      .broeco-blkList--lineOf4 .broeco-blkList-item{
        flex-basis: calc( (100% - ( 4 * 1.2em )) / 4 );
      }
        .broeco-blkList-item p,
        .broeco-blkList-item dt,
        .broeco-blkList-item dd,
        .broeco-blkList-item li{
          font-size: 0.85em;
          line-height: 1.3;
        }
        .broeco-blkList-item p{
          font-weight: 700;
          margin:1em ;
        }
        .broeco-blkList-item a,
        .broeco-blkList-item a:hover {
          color:inherit;
          text-decoration: none;
        }
        .broeco-blkList-item .imgFluid{
          max-width: 200px;
        }
      @media screen and (max-width: 768px) {
        .broeco-blkList--lineOf2 .broeco-blkList-item,
        .broeco-blkList--lineOf3 .broeco-blkList-item,
        .broeco-blkList--lineOf4 .broeco-blkList-item{
          flex-basis: calc( (100% - ( 2 * 1.2em )) / 2 );
        }
      }            
      @media screen and (max-width: 480px) {
        .broeco-blkList--lineOf2 .broeco-blkList-item,
        .broeco-blkList--lineOf3 .broeco-blkList-item,
        .broeco-blkList--lineOf4 .broeco-blkList-item{
          flex-basis: calc( (100% - ( 1 * 1.2em )) / 1 );
        }
      }
  /* * links * */  
    .pb-globalLink{
      text-align: center;
      margin: 0.8em auto 0 auto;
    }
      .pb-globalLink .pb-pillBtn {
        margin: 0.8em  0.8em 0  0.8em ;
        min-width: 19em;
      }  
    #faq a,
    .broeco-ml a{
      color:#000;
      text-decoration: underline;
    } 
    #faq a:hover,
    .broeco-ml a:hover{
      color:#000;
      text-decoration: none;
    }  
  /**/  

  /**/  
    #faq p{
      font-size: 0.75em;
    }  
  /**/  
    .broeco-ml{
      padding:2.4em 0;
    }
    .broeco-ml p{
      font-size: 0.65em;
      margin: 0;
    }
    .broeco-ml p + p{
      margin-top:1em
    }
/* RESPONSIVE */  
  @media (max-width: 1200px) {
    .broeco {
      font-size: calc(16px + (20 - 16) * ((100vw - 480px) / (1200 - 480)));
    }
  }
  @media (max-width: 768px) {
    .broeco-navSection-icon{
      display: none;
    }

  }
  @media (max-width: 480px) {
    .broeco {
      font-size: 16px;
    }
      .formulesList-item{
        flex-basis:calc(100% - 1.2em) ;
      }
  }