/* ## HEADER ############################################################# */
  .sectionHeader {
    display: flex;
    justify-content: flex-start;
    padding: 0;
    margin: 1em auto 2em auto;
  }
    .sectionHeader-blkLogo {
      display: flex;
      align-items: center;
      justify-content: center;
      flex-basis:40%;
      border-radius: var(--radius);
      border: 4px solid var(--vert2024);
      padding:5px 0;
    }
      .sectionHeader-blkLogo-icon {
        width:80%;
        height: auto;
        transform: translateX(-4%);
      }
    .sectionHeader-main{
      flex-basis:60%;
      padding:0.5em 0 0.5em 3%;
    }
      .ftlHTML .sectionHeader-title {
        font-family: var(--font-title);
        font-size: 1em;
        font-weight: 700;
        text-transform: uppercase;
        line-height: var(--line-height-title);
        margin:0 auto;
      }
        .sectionHeader-title-label {
          display: block;
          color: var(--dark);
          font-size: 1.55em;
          line-height: 1.1;
        }
      .sectionHeader-subtitle {
        font-size:1em;
        margin:1em auto 0 auto;
      }
        .sectionHeader-subtitle p:nth-child(n), 
        .sectionHeader-subtitle h1{
          display: inline;
          font-size:1em;
          margin:0 ;
        }
        .sectionHeader-subtitle h1{
          font-weight: 800;
        }

/* ## MAIN ############################################################### */

  /* # Description # */            
    .blkWithDeco--description{
      align-items: center;
    }
      .blkWithDeco--description img{
        width: 100%;
        height: auto;
        object-fit: unset;
        border-radius: unset;
      }
  /* # Liste avec icones */ 
    .listWicon{
      list-style-type: none;
      padding:0;
      margin-left:auto;
      margin-right:auto;
    }
      .listWicon-item  {
        display: flex;
        align-items: center;
        line-height:var(--line-height-sm);
        font-size: var(--font-size-text);
        padding:0;
        margin:0;
      } 
      .listWicon-item + .listWicon-item {
        margin-top: 0.75em;
      }
        .listWicon-item img{
          flex-basis: 3em;
          width:3em ;
          height: auto;
          margin-right: 0.5em;
        }
        .listWicon-item span{
          flex-basis: 90%;
        }

  /* bloc durabilite */      
  .blkDurable{
    display: flex;
    align-items: flex-start;
    border-radius: var(--radius);
    border:2px solid var(--vert2024);
    padding:0.8em;
    margin-top:1.6em;
  }
    .blkDurable img{
      width:2.4em;
      height:2.4em;
      margin-right:0.8em;
    }
    .blkDurable p{
      flex-basis:calc(100% - 3.2em );
      margin:0;
    }



  /* # Definition des ETATS # */
    .etatsDefList{
      display: flex;
      margin:0 0 0 -1.2em;
    } 
      .blkEtat{
        flex-basis:calc( (100% - (4 * 1.2em)) / 4);
        text-align: center;
        margin:1.2em 0 0 1.2em;
      }
        .blkEtat dt{
          border: 2px solid var(--vert2024);
          border-radius: var(--radius);
          white-space: nowrap;
          font-family: var(--font-title);
          font-size:var(--font-size-title-sm );
          line-height: 1;
          padding:1em;
          margin:0 0 0.6em 0;
        }
        .blkEtat dd{
          padding:0 1em;
          font-size: var(--font-size-text);
        }

  /* # Blocks & Slider # */
    /* = fleches du slider */
    .slick-prev:before,
    .slick-next:before{
        border-color:#000;
    }
    /* = pager du slider */
    .slick-dots li button{
        background-color: #DDD;
    }
    .slick-dots li.slick-active button{
        background-color: var(--vert2024);
    }
    /* = Commons */
    .sliderBase{
      /*display:flex;
      justify-content: flex-start;
      align-items: stretch;*/
      /*margin:-1.2em -1.2em 0 0;*/
      margin:1em 0 0 0;
    }
      .sliderBase--noSlider .slick-track{
        margin-left:0;
      }
      .sliderBase--noSlider .slick-dots{
        display:none;
      }

  /* # Categories # */		
    .blkCategorie{
      /*flex-basis:calc( ( 100% - ( 4 * 1.2em ) ) / 4);*/
      text-align:center;		
      /*border:2px solid var(--vert2024) ;
      border-radius: var(--radius);
      padding:1em*/;
    }

      .blkCategorie-name{
        color:#353535;
        display: block;
        text-align:center;		
        font-size:var(--font-size-text-sm);
        line-height:1.3;
        font-weight:800;
        padding:1em 0;
        text-decoration:none !important;
      }                

  /* == Bloc Edito == */
  .blk--edito{
    padding-bottom:2.8em;
    position: relative;
  }
  .blk--edito.zoneLink:hover{
    color:#000;
    opacity: 1;
  }
    .blk--edito-visuel{
      display: block;
      max-width: 100%;
      border-radius: var(--radius) var(--radius) 0 0;
      margin:0 auto;
    }
    .blk--edito-main{
      padding: 0.8em 0.8em 0 0.8em;
    }
      .blk--edito-title{
        font-size: var(--font-size-title-sm);
        font-weight: 800;
        line-height:var(--line-height-title);
        margin:0;
      }
        .blk--edito-title a,
        .blk--edito-title a:hover,
        .blk--edito-title a:focus{
          color:inherit;
          text-decoration: none !important;
        }
      .blk--edito p{
        font-size: var(--font-size-text);
        margin:0.6em 0 0 0;
      }
      .blk--edito-readmore{
        font-size: var(--font-size-text-sm);
        text-decoration: underline;
        position: absolute;
        bottom:1.2em;
        left:1.1em;
        right:1.1em;
      }
      .blk--edito.zoneLink:hover .blk--edito-readmore{
        text-decoration: none;
      }


  /* bloc push reprise */      
    .pushReprise{
      display: flex;
      border-radius: var(--radius);
      border:2px solid var(--vert2024);
      padding:1.2em 1.6em;
      margin-top:2em;
    }
    .pushReprise.zoneLink:hover{
      opacity: 1;
    }
      .pushReprise img{
        width:7.9em;
        height:auto;
        margin-right:2em;
      }
      .pushReprise p{
        flex-basis:calc(100% - 8em );
        margin:0;
      }
        .pushReprise a,
        .pushReprise a:hover{
          text-decoration: none;
          color: inherit;
        }


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

@media (max-width: 767px){
  /* ## HEADER */
    .sectionHeader{
      display: block;
      text-align: center;
    }
      .sectionHeader-blkLogo{
        padding-top:6%;
        padding-bottom:6%;
        margin-bottom: 1em;
      }    
        .sectionHeader-blkLogo-icon{
          max-width: 50% !important;
        }      
      .sectionHeader-main{
        padding:0;
      }

  /* ## MAIN */
    .sectionTitle,
    .sectionSubtitle{
      text-align: center;
    }
    .blkWithDeco--description{
      display: block;
    }
    .etatsDefList{
      flex-wrap: wrap;
      justify-content: center;
    } 
      .blkEtat{
        flex-basis:calc( (100% - (2 * 1.2em)) / 2);
      }    
    .pushReprise{
      display: block;
    }      
      .pushReprise img{
        display: block;
        margin:0 auto 1em auto;
      }



}



@media (max-width: 480px){
  .sectionHeader-title-label{
    font-size: 1.3em;
  }
  /**/
	.sliderBase{
		flex-wrap:nowrap;
		width:100vw;
	}
		.sliderBase .slick-list{
			width:100vw;		
			padding-top:2px !important;
			padding-bottom:6px !important;
			margin-right:0;
			margin-left:0;
		}
			.sliderBase .slick-track{ /* si slidesToShow: x.4 => position de depart decalee */
				left:1em;
			}
				.sliderBase .slick-track > div:last-child,
				.sliderBase .slick-track > li:last-child{
					margin-right:2em ; /* permet de laisser un espace à droite apres la derniere slide */
				}
    /* # */

}