#super_global_darty_container,
.ftlHTML{
  background-color: #F2F2F2;
}
/* ## HEADER ############################################################# */
  .sectionHeader {
      display: flex;
      justify-content: flex-start;
      background-color: #FFF;
      padding: 1em 0 1em 1em;
      margin: 0 auto 1.5em auto;
    }
      .sectionHeader:before {
        display: block;
        content:"";
        flex-basis:47.75%;
        border-radius: var(--radius);
        align-items: stretch;
        background-image: url(../images/deco/bg-header.png) ;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center;
      }
      .sectionHeader-main{
        flex-basis:52%;
        padding-left:2.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.95em;/* 39px */
            line-height: 1.1;
          }
        .sectionHeader-subtitle {
          margin:1em auto 0 auto;
        }
          .sectionHeader-subtitle p {
            max-width: 480px;
            font-size:1em;
          }
/* ## MAIN ############################################################### */
  /* ## Overview */   
    .ald-overview{
      list-style-type: none;
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      overflow: hidden;
      padding:0;
      margin:-1.2em 0 0 -1.2em;
    }
      .blkOverview{
        flex-basis: calc( (100% - ( 3 * 1.2em)) / 3 );
        display: flex;
        align-items: center;
        justify-content: flex-start;
        background-color: #FFF;
        border-radius: var(--radius);
        padding:1.2em 0.8em;
        margin:1.2em 0 0 1.2em;
      }      
        .blkOverview-picto{
          display: block;
          margin-right:1em;
        }
        .blkOverview-picto.vertic{
          height:3em;
          width:auto;
        }
        .blkOverview-picto.horiz{
          width:2.5em;
          height:auto;
        }
        .blkOverview-label{
          display: block;
          flex-basis: 90%;
          color:var(--dark);
          font-size: 0.85em;
          line-height: 1.2;
        }
  /* ## Sondage */      
    .blkSondage {
      display: flex;
      justify-content: flex-start;
      background-color: #FFF;
      padding: 1em;
      margin: 1.5em auto;
    }
      .blkSondage:before {
        display: block;
        content:"";
        flex-basis:47.75%;
        border-radius: var(--radius);
        align-items: stretch;
        background-image: url(../images/deco/deco-sondage.jpg) ;
        background-size:cover;
        background-repeat:no-repeat;
        background-position: center;
      }
      .blkSondage-main{
        flex-basis:52%;
        padding:0.5em 0 0.5em 2.5%;
        line-height:1.3;
      }  
        .blkSondage-main p.mainTxt{
          color:var(--dark);
          font-size: 0.85em;
          margin:0 0 1.2em 0 !important;
        }
  /* ## Chiffres */      
    .ald-chiffres{
      list-style-type: none;
      display: flex;
      align-items: stretch;
      justify-content: flex-start;
      overflow: hidden;
      padding:0;
      margin:-1.2em 0 0 -1.2em;
    }
      .blkChiffres{
        flex-basis: calc( (100% - ( 3 * 1.2em)) / 3 );
        display: flex;
        align-items: center;
        justify-content: flex-start;
        text-align:center ;
        background-color: #FFF;
        border-radius: var(--radius);
        padding:1.2em 0.8em;
        margin:1.2em 0 0 1.2em;
      }     
        .blkChiffres dl{
          max-width: 240px;
          color:var(--dark);
          line-height: 1.3;
          padding:0;
          margin:0 auto;
        }
          .blkChiffres dt{
            font-size: 0.85em;
            font-weight: 800;
            margin:0;
          }
            .blkChiffres dt span{
              display: block;
              color:var(--rouge);
              font-family: var(--font-title);
              font-weight: 700;
              text-transform: uppercase;
            }
            .blkChiffres dt strong{
              font-size:1.4em;
              font-weight: 700;
            }
          .blkChiffres dd{
            font-size: 0.85em;
            margin:0.235em 0 0 0;
          }
      .ald-chiffres + p{
        text-align: right;
      }          

  /* ## Avantages */
    .avtgList{
      list-style-type: none;
      padding: 0;
      margin:0;
    }
      .blkAvtg{
        display: flex;
        flex-direction: row-reverse;
        align-items: stretch;
        justify-content: flex-start;
        background-color: #FFF;
        padding:1em;
        margin:1.2em 0 0 0;
      }           
        .blkAvtg:before {
          display: block;
          content:"";
          flex-basis:47.75%;
          border-radius: var(--radius);
          align-items: stretch;
          background-size:cover;
          background-repeat:no-repeat;
          background-position: center;
        }
        .blkAvtg.avtg-1:before {
          background-image: url(../images/deco/deco-avtg-1.jpg) ;
        }        
        .blkAvtg.avtg-2:before {
          background-image: url(../images/deco/deco-avtg-2.jpg) ;
        }        
        .blkAvtg.avtg-3:before {
          background-image: url(../images/deco/deco-avtg-3.jpg) ;
        }
        .blkAvtg-main{
          flex-basis:52%;
          display: flex;
          align-items: center;
          justify-content: flex-start;
          padding:0.5em 1em 0.5em 0.5em;
          line-height:1.3;
        } 
          .blkAvtg-main:before{
            display: block;
            width:0.6em;
            font-size:1.75em;
            font-weight:700;
            font-family: var(--font-title);
          }
          .avtg-1 .blkAvtg-main:before{
            content:"1";
            color:var(--rouge);
          }
          .avtg-2 .blkAvtg-main:before{
            content:"2";
            color:var(--jaune);
          }
          .avtg-3 .blkAvtg-main:before{
            content:"3";
            color:var(--bleu2024);
          }
          .blkAvtg-main p{
            max-width: 400px;
            color: var(--dark);
            font-size: 1em;
            font-weight: 800;
            margin:0 0 0 1.4em !important;
          }
  /* ## Interet */      
    .ald-interet {
      display: flex;
      justify-content: flex-start;
      background-color: #FFF;
      padding: 1em;
      margin: 1.5em auto;
    }
      .ald-interet:before {
        display: block;
        content:"";
        flex-basis:63.125%;
        border-radius: var(--radius);
        align-items: stretch;
        background-image: url(../images/deco/deco-interet-desktop.png) ;
        background-size:auto 100%;
        background-repeat:no-repeat;
        background-position: right center;
      }
      .ald-interet-main{
        flex-basis:36.8%;
        padding:0.5em 1em 0.5em 2.5%;
        line-height:1.3;
      }  
        .ald-interet-main .sectionTitle{
          margin-top:0 !important;
          margin-bottom:0.8em;
        }
        .ald-interet-main p{
          color:var(--dark);
          font-size: 0.85em;
          margin:0 !important;
        }

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

  @media (max-width: 767px) {
    .sectionHeader {
      display: block;
      padding:1em;
    }
      .sectionHeader:before {
        width:100%;
        height:0;
        padding-top:58%;
        margin-bottom:1em;
      }
      .sectionHeader-main{
        padding-left:0;
        text-align: center;
      }
    /**/
    .ald-overview,
    .blkSondage,
    .ald-chiffres,
    .blkAvtg,
    .ald-interet {
      display: block;
    }
      .blkSondage:before {
        padding-top:40%;
      }
      .blkAvtg:before {
        padding-top:28.5%;
      }      
      .ald-interet:before {
        background-image: url(../images/deco/deco-interet-mobile.png) ;
        padding-top:117%;
      }    
      .blkSondage-main,
      .blkAvtg-main,
      .ald-interet-main{
        padding:1em 0 0 0;
      } 
      .ald-chiffres + p{
        text-align: left;
      }
  }
  @media (max-width: 480px) {
    .sectionHeader-title-label{
      font-size:1.4em;
    }
    .blkChiffres dl{
      max-width: unset;
    }
    .blkAvtg-main p {
      font-size: 0.9em;
    }
  }