/* ## HEADER ############################################################# */
  .sectionHeader {
      display: flex;
      justify-content: flex-start;
      padding: 0;
      margin: 1em auto 2em auto;
    }
      .sectionHeader:before {
        display: block;
        content:"";
        flex-basis:44.7%;
        border-radius: var(--radius);
        align-items: stretch;
        background-image: url(../images/deco/bg-header-desktop.jpg) ;
        background-size:100%;
        background-repeat:no-repeat;
        background-position: center;
      }
      .sectionHeader-main{
        flex-basis:55.3%;
        padding-left:1.2em;
      }
        .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: 2em;
            line-height: 1.1;
          }
        .sectionHeader-subtitle {
          margin:1em auto 0 auto;
        }
          .sectionHeader-subtitle p {
            font-size:1em;
          }
/* ## MAIN ############################################################### */
  /* ## Intro ## */
    .blkIntro{
      padding:1.8em;
      background-color: #FFF;
      border: 1px solid var(--midgrey);
      border-radius: var(--radius);
    }
      .blkIntro-header{
        display: flex;
        align-items: center;
        justify-content: flex-start;
      }
        .blkIntro .sectionTitle{
          margin:0 ;
        }
        .blkIntro-header img{
          width:5.5em;
          height:auto;
          margin-right:1.1em;
        }
  /* ## boutons ## */
    .pillBtn--ia{
      color: #000 !important;   
      border-color:  var(--dark);
      background-color:transparent !important;
      margin-top:1em;
    } 
    .zoneLink:hover .pillBtn--ia,
    .pillBtn--ia:hover{
      color: #FFF !important;   
      background-color: var(--dark) !important;
    }      
  /* ## Tab ## */
    /* Tab "anchorList" style #*/
      .anchorListStyle[role='tablist'] { 
        width:100%;
        align-items: center;
        justify-content: center;
        border-bottom:1px solid var(--lowgrey) ;
        margin:2.5em auto 0 auto;
      }          
        .anchorListStyle[role='tablist'] > [role='tab'] {
          display: block;
          flex-basis: 33.3333%;
          font-size: 1em;
          text-align: center;
          padding:0 2px;
          white-space: unset;
          line-height: 1.2;
          margin:0 ;
          position: relative;
        }  
          .anchorListStyle[role='tablist'] > [role='tab']:after{
            display: block;
            content: "";
            width:2px;
            height:0.8em;
            background-color: var(--lowgrey);
            position:absolute;
            bottom:calc(0.5em + 4px);
            right:-1px;
          }
          .anchorListStyle[role='tablist'] > [role='tab']:last-child:after{
            display: none;
          }
          .anchorListStyle[role='tablist'] > [role='tab'] .anchorListStyle-anchor{  
            display: flex;
            justify-content: center;
            align-items: center;
            color: var(--dark)!important;
            font-family: var(--font-title);
            font-weight: 700;
            text-align: center;
            text-transform: uppercase;
            text-decoration: none !important;
            line-height:0.8em;
            white-space: nowrap;
            padding:0.5em 1.5em;
            border-bottom: 4px solid #FFF;
            opacity: 0.6;
          }  
          .anchorListStyle[role='tablist'] > [role='tab'] .anchorListStyle-anchor:before,
          .anchorListStyle[role='tablist'] > [role='tab'] .anchorListStyle-anchor:after{
            visibility: hidden;
            display: inline-block;
            content:"";
            background-image:  url(../images/pictos/icon-ia-stars.svg);
            background-repeat: no-repeat;
            background-position: center ;
            background-size:contain;
            height:1.3em;
            width:2em;
          }     
          .anchorListStyle[role='tablist'] > [role='tab']:hover .anchorListStyle-anchor,
          .anchorListStyle[role='tablist'] > [role='tab']:active .anchorListStyle-anchor,
          .anchorListStyle[role='tablist'] > [role='tab']:focus .anchorListStyle-anchor,
          .anchorListStyle[role='tablist'] > [role='tab'][aria-selected='true'] .anchorListStyle-anchor {
            opacity: 1;
          } 
          .anchorListStyle[role='tablist'] > [role='tab']:hover .anchorListStyle-anchor{
            color:#000;
          }
          .anchorListStyle[role='tablist'] > [role='tab'][aria-selected='true'] .anchorListStyle-anchor{
            color: black !important;
            border-bottom-color:black;
          }   
            .anchorListStyle[role='tablist'] > [role='tab'][aria-selected='true'] .anchorListStyle-anchor:before{
              visibility: visible;
            }

        .anchorListStyle[role='tablist'] ~ [role='tabpanel'] {
          padding:2.25em 0 0 0;
          margin: 0 0 3.6em 0;
        }

    /* blk fonctionnalité content  */
      .blkFonction{
        display: flex;
        flex-direction: row;
        padding:2.25em 1.7em 2.25em 2.25em;
      }
      .blkFonction.reverse{
        flex-direction: row-reverse;
      }
      .blkWithDeco + .blkFonction{
        margin-top:2.25em;
      }
      .blkFonction--colored{
        background: linear-gradient(320.42deg, #FF7BF9 5.05%, #FF7DED 13.81%, #FF82D0 28.4%, #FF8B9F 48.83%, #FF985C 72.18%, #FFA808 99.42%, #FFAA00 102.33%) !important;
        border-radius: var(--radius);
      }
      .blkFonction--colored .sectionTitle,
      .blkFonction--colored p{
        color:#000 !important;
      }
        .blkFonction:not(.blkFonction--noVisuel) .blkFonction-main{
          width: 75%;
          padding-right:4%;
        }
        .blkFonction.blkFonction--wVisuelH .blkFonction-main{
          width:58%;
        }
          .blkFonction .sectionTitle{
            margin:0;
          }
            .blkFonction .sectionTitle + p{
              font-weight: 800;
            }
            .blkFonction  p{
              color:var(--dark);
            }
          .featuredIn{
            font-weight: 800;
            color: var(--dark);
            margin:0.75em 0 0 0 !important;
          }   
            .featuredIn img{     
              width: 1.25em;
              height: 1.25em;
              vertical-align: text-top;
            }
        .blkFonction-visuel{
          width: 30%;
        }
        .blkFonction.blkFonction--wVisuelH .blkFonction-visuel{
          width:42%;
          padding-top:2em;
        }        
          .blkFonction-visuel img,
          .blkFonction-visuel video{
            display: block;
            max-width:220px;
            max-height:20em;
            margin-left:auto;
            margin-right:auto;
          }
          .blkFonction--wVisuelH .blkFonction-visuel img,
          .blkFonction--wVisuelH .blkFonction-visuel video{
            max-width: 100%;
          }
          .blkFonction-visuel .brdRadius{
            border-radius: 24px;
          }
  /* ## bloc avec decoration ## */    
    .blkWithDeco{
      display: flex;
      align-items:stretch ;
      justify-content: flex-start;
    }
    .blkWithDeco--mag{
      margin-top: 3em;
    }
    .blkWithDeco.reverse{
      flex-direction: row-reverse;
    }
      .blkWithDeco-deco{
        flex-basis: 40%;
        position: relative;
      }
        .blkWithDeco-deco img{
          width: 100%;
          height: 100%;
          object-fit: cover;
          border-radius: var(--radius);
        }
        .blkWithDeco-deco img.wTxt{
          object-position: right center;
        }
      .blkWithDeco-main{
        flex-basis: 60%; 
      }
      .blkWithDeco:not(.reverse) .blkWithDeco-main{
        padding-left:1.25em;
      }
      .blkWithDeco.reverse .blkWithDeco-main{
        padding-right:1.25em;
      }
        .blkWithDeco .sectionTitle{
          margin:0;
        }

  /* ## blocs selection ## */
    .sectionSelection{
      background: linear-gradient(320.42deg, #FF7BF9 5.05%, #FF7DED 13.81%, #FF82D0 28.4%, #FF8B9F 48.83%, #FF985C 72.18%, #FFA808 99.42%, #FFAA00 102.33%);
      padding:1.6em 1.2em 1.2em 1.2em;
    }
      .sectionSelection .sectionTitle{
        color:#FFF;
      }
    .listeBlks{
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      list-style-type: none;
      padding: 0;
      margin:-0.8em 0 0 -0.8em;
      overflow: hidden;
    }
      .listeBlks > .blk{
        flex-basis:calc( 50% - 0.8em);
        display: block;
        margin:0.8em 0 0 0.8em;
      }
      .blk--selection{
        border: 2px solid #FFF;
        background-color: #FFF;
        border-radius:var(--radius);
        padding:0.8em 1.2em;
        text-align: center;
        position: relative;
      }
      .blk--selection.zoneLink:hover { 
        border: 2px solid var(--dark);
        opacity: 1;
      }
        .blk--selection-content{
          max-width:276px ;
          margin-left: auto;
          margin-right: auto;
        }
          .blk--selection .imgFluid{
            max-width: 70%;
          }
          .blk--selection-title,
          .blk--selection-title:hover,
          .blk--selection-title:focus,
          .blk--selection-title:active{
            display: block;
            text-decoration: none !important;
            margin:1em auto;
          }
            .blk--selection-gamme {
              display: block;
              font-size: 0.7em;
              color: val(--softgrey) !important;
            }
            .blk--selection-produit {
              display: block;
              font-family: var(--font-title);
              font-size: 1em;
              color:var(--dark) !important;
            }
      .blk--selection.wPicto:before{
        display: block;
        content:"";
        background-image:  url(../images/pictos/icon-ia-stars.svg);
        background-repeat: no-repeat;
        background-position: top left;
        background-size: 100%;
        height:1.7em;
        width:1.6em;
        position: absolute;
        top:0.8em;
        left:1.2em;
      }         
      
  /* bloc Plus Simple */
    .blkAsavoir{
      background-color: #FFF;
      background-image:url('../images/pictos/icon-bulb-ia.svg');
      border: 1px solid var(--midgrey);
      border-radius: var(--radius);
      margin:3em 0;
    } 
  /**/


  /* Edito */
  .blkEdito:nth-child(n+2){
    margin-top:1.8em;
  }
    .blkEdito .blkWithDeco-deco{
      flex-basis: 60%;
      min-height: 8.4em;
    }
    .blkEdito .blkWithDeco-main{
      flex-basis: 40%;      
      display: flex;
      align-items: center;
      justify-content: flex-start;
    }
      .blkEdito a{
        display: block;
        color:inherit;
        text-decoration: none;
        font-size: var(--font-size-title-sm);
        font-weight: 800;
      }
      .blkEdito a:hover{
        color:#000;
        text-decoration: none;
      }
/*    
**********************************************************
=== RESPONSIVE behaviour =================================
**********************************************************
*/

  @media (max-width: 767px) {
    .sectionHeader {
      display: block;
    }
      .sectionHeader:before {
        width:100%;
        height:0;
        padding-top:71.875%;
        background-image: url(../images/deco/bg-header-mobile.jpg) ;
        margin-bottom:1em;
      }
      .sectionHeader-main{
        padding-left:0;
        text-align: center;
      }
    
    /**/
    .anchorListStyle[role='tablist'] > [role='tab'] .anchorListStyle-anchor:before,
    .anchorListStyle[role='tablist'] > [role='tab'] .anchorListStyle-anchor:after{
      display: none !important;
    }
    /**/
    .listeBlks{
      display: block;
    }
    /**/
    .blkWithDeco{
      display: block;
      text-align: center;
    }
      .blkWithDeco:not(.reverse) .blkWithDeco-main{
        padding-left:0;
      }
      .blkWithDeco.reverse .blkWithDeco-main{
        padding-right:0;
      }
      .blkWithDeco-deco{
        margin-bottom: 1em;
      }
        .blkWithDeco-deco img{
          position: static;
          max-width: 100%;
        }
    /**/
    .blkIntro{
      padding:0.8em;
      text-align: center;
    }  
      .blkIntro-header{
        display: block;
      }
        .blkIntro-header img{
          width:5.5em;
          height:auto;
          margin-right:0;
        }
    /**/
    .blkFonction{
      padding:1.6em 1.2em;
      display: block;
      text-align: center;
    }
      .blkFonction:not(.blkFonction--noVisuel) .blkFonction-main{
        width:unset;
        padding-left: 0 !important;
        padding-right: 0 !important;
      }
      .blkFonction-visuel{
        width:auto !important;
        padding-top:0 !important;
        margin-top:1.5em !important;
      }
        .blkFonction-visuel video{
          max-height: unset;
        }
    /**/
    .blkEdito .blkWithDeco-main{
      display: block;
      padding:0;
    }    
  }
  @media (max-width: 480px) {
    .sectionHeader-title-label {
      font-size: 1.5em;
    }
    .anchorListStyle[role='tablist'] > [role='tab'] .anchorListStyle-anchor{
      padding:0.5em;
    }
  }