/* ## HEADER ############################################################# */
  .sectionHeader {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 1em auto 2em auto;
  }
    .sectionHeader:before {
      display: block;
      content: "";
      flex-basis: 50%;
      border-radius: var(--radius);
      align-items: stretch;
      background-image: url(../images/pictos/logo-philips-hue.png), url(../images/deco/bg-header.jpg);
      background-size: 20%, 100%;
      background-repeat: no-repeat, no-repeat;
      background-position: top 8% right 5%, center;
    }
    .sectionHeader-main {
      flex-basis: 50%;
      padding-left: 3.5%;
    }
      .sectionHeader-title {
        font-family: var(--font-title);
        font-size: 1em;
        font-weight: 700;
        text-transform: uppercase;
        line-height: 1;
        margin: 0 auto;
      }
        .sectionHeader-title-label {
          display: block;
          color: var(--dark);
          font-size: 1.85em;
          line-height: 1.2;
        }
      .sectionHeader-subtitle {
        margin: 1em auto 0 auto;
      }
        .sectionHeader-subtitle .btn {
          display: block;
          margin-top: 1em;
          max-width: 10em;
        }
/* ## MAIN ############################################################### */
  /* Appli */
    .blkAppli{
      background-color: var(--lightgrey);
      padding:1em;
    }
      .blkAppli-content{
        background-color: white;
        border-radius:var(--radius);
        padding:1.2em 4%;
      }
        .blkAppli .sectionTitle{
          padding-right:calc( 108px + 4%);
          margin-bottom:1.2em;
        }      
        .blkAppli-flexbox{
          display: flex;
          align-items: flex-start;
          justify-content: flex-start;
        }
          .blkAppli-main .dottedList{
            margin-top:1.5em;
          }
          .dottedList-item p{
            font-size:var(--font-size-text-sm) ;
            max-width:200px ;
          }
          .blkAppli-visuel{
            max-width:108px;
            margin:-4em 2% 0 6%;
          }
            .blkAppli-visuel a{
              display: table;
              margin:0.5em auto 0 auto;
            }

  /* Vidéo */
    .sectionVideo{
      margin: 1.6em 0 2.4em 0;
    }

  /* Gamme */		
    .gammeList{
      list-style-type: none;
      display: flex;
      align-items: stretch;
      justify-content: center;
      padding:0;
      margin:-0.8em 0 0 -0.8em;
    }
      .blkGamme{
        flex-basis:calc( ( 100% - ( 6 * 0.8em ) ) / 6);
        text-align:center;		
        padding:0.7em 1em 1.5em 1em;
        border:3px solid var(--lowgrey);
        border-radius: var(--radius);
        margin:0.8em 0 0 0.8em;
      }
      .blkGamme.zoneLink:hover{
        border:3px solid #000;
        color:#000;
        opacity: 1;
      }
        .ftlHTML .blkGamme-label{
          display:block;
          color:#353535;
          font-size:var(--font-size-text);
          font-weight:700;
          line-height:var(--line-height-sm);
          text-decoration:none;
          min-height:3.4em;
        }
        .ftlHTML .blkGamme-label:hover{
          color:#000;
        }
        .blkGamme-visuel{
          max-width:100px;
          margin:0 auto
        }
          .blkGamme-visuel svg{
            display: block;
            width:100%;
            height: auto;
            margin:0 auto
          }

  /* liste de blocs */
    .blksList{
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      margin:-1.2em 0 0 -1.2em;
    }

  /* Blocks Description */
    .blkDescription{
      flex-basis:calc( ( 100% - ( 3 * 1.2em ) ) / 3);
      text-align:center;
      line-height: var(--line-height-sm);
      margin:1.2em 0 0 1.2em;
    }
        .blkDescription-visuel img{
          display: block;
          width:100%;
          margin:0 auto;
        }
      .blkDescription-label{
        padding:0.8em 1.2em;
        text-align:center;
      }
        /*.blkDescription-label-header{
          min-height:3.75em;
        }*/
          .blkDescription-label-title{
            color:#353535;
            font-size:var(--font-size-text-sm)!important;
            font-weight: 700;
            margin:0;
          }
          .blkDescription-label-title a{
            color:inherit;
            text-decoration: none;
          }
          .blkDescription-label-subtitle{
            color:#005EAD;
            font-size:var(--font-size-text-sm)!important;
            font-weight: 700;
            margin:0;
          }
        .blkDescription-label-intro{
          flex-basis: 100%;
          color:#353535;
          font-size:var(--font-size-text-sm) !important;
          margin:0.8em 0 0 0;
        }

  /* Compatibilité */
    .sectionCompatible{
      display:flex;
      justify-content: center;
      align-items: center;
      text-align:center;
      margin:2em 0;
    }
      .sectionCompatible > p{
        white-space: nowrap;
        font-size:0.8em;
        color:#747474;
        margin:0;
      }
      .sectionCompatible > ul{
        list-style-type: none;
        text-align:center;
        padding:0;
        margin:0;
      }
        .sectionCompatible li{
          display:inline-block;
          margin:0.4em 0.4em 0.4em 0.4em;
        }
          .sectionCompatible img{
            height:2em;
          }      

/*    
**********************************************************
=== RESPONSIVE behaviour =================================
**********************************************************
*/

@media (max-width: 767px) {
  .sectionHeader {
    display: block;
  }
  .sectionHeader:before {
    width: 100%;
    height: 0;
    padding-top: 50%;
    margin-bottom: 1em;
  }
  .sectionHeader-main {
    padding-left: 0;
    text-align: center;
  }
  /**/
  .sectionCompatible {
    display: block;
  }
}

@media (max-width: 480px) {
  .sectionHeader-title-label {
    font-size: 1.5em;
  }
  .sectionHeader .btn{
    margin-left:auto;
    margin-right:auto;
  }
  /**/
  .blkAppli,
  .blkAppli-content{
    background-color: #FFF;
    padding:0;
  }
  .blkAppli .sectionTitle{
    padding-right:0;
  }      
  .blkAppli-flexbox{
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
  }
    .blkAppli-main{
      width:100%;
    }
      .blkAppli-main .dottedList{
        width:60%;
        margin-left: 0;
      }
    .blkAppli-visuel{
      width:40%;
      max-width:unset;
      margin:4em 0 0 -32%;
      padding:0 2% 0 0;
    }

      /**/
  .gammeList{
    flex-wrap: wrap;    
  }
    .blkGamme {
      flex-basis:calc( ( 100% - ( 3 * 0.8em ) ) / 3);
      padding: 0.6em 0.6em 1em 0.6em;
    }
    .blkGamme-visuel svg{
      width: 70%;;
    }
    .ftlHTML .blkGamme-label{
      font-size: var(--font-size-text-sm);
    }
  .blksList{
    margin-left:0;
  }
    .blkDescription{
      flex-basis: unset;
    }
}