/* ## HEADER ############################################################# */
	.sectionHeader {
		display: flex;
		justify-content: flex-start;
		padding: 0;
		margin: 1em auto 2em auto;
	}
		.sectionHeader:before {
			display: block;
			content:"";
			flex-basis:54.2%;
			border-radius: var(--radius);
			align-items: stretch;
			background-image: url(../images/deco/bg-header.jpg) ;
			background-size:100%;
			background-repeat:no-repeat;
			background-position: center;
		}
		.sectionHeader-main{
			flex-basis:45.8%;
			padding-left:4%;
		}
			.sectionHeader-title {
				font-family: var(--font-title);
				font-size: 1em;
				font-weight: 700;
				text-transform: uppercase;
				line-height: 1;
				margin:0 auto;
			}
				.sectionHeader-title-logo {
					display: block;
					height: 3.7em;
					width: calc( (41/12) * 3.7em );
					overflow: hidden;
					padding: 0;
					margin: 0 0 1em 0 ;
			  }
					.sectionHeader-title-logo:before {
						display: inline-block;
						content:"";
						width:100%;
						height:100%;
						background-image: url(../../../ASSETS/images/logos/logo_deezer_color_black_crop.svg);
						background-repeat: no-repeat;
						background-position: center;
						background-size: 100%;
						font-size: 0;
						line-height: 0;
					}
				.sectionHeader-title-label {
					display: block;
					color: var(--dark);
					font-size: 1.55em;
					line-height: 1.2;
				}
			.sectionHeader-subtitle {
        font-size:1.1em;
				margin:0.75em auto;
			}

      .sectionHeader-offer p {
        font-size:0.9em;
      }        
        .sectionHeader-offer .price{
          color: var(--bleu2024);
          font-size: 1.1em;
        }
        .sectionHeader-offer strong{
          color:var(--rouge);
        }
        .sectionHeader-offer .pillBtn{
          margin-top: 0.5em;
        }

/* ## MAIN ############################################################### */
  /* ## Selection ## */	
    .selectionList {
      display:flex;
      flex-wrap: wrap;
      justify-content:flex-start;
      align-items: stretch;
      list-style-type: none;
      padding: 0;
      margin:-1.2em 0 0 -1.2em;
    }
      .blkSelection {
        flex-basis: calc( ( 100% - ( 4 * 1.2em ) ) / 4 );
        text-align: center;
        border-radius:var(--radius);
        border:2px solid #28E4AB;
        padding:1em;
        margin-top:1.2em;
        margin-left:1.2em;
      }	
      .blkSelection.zoneLink:hover{
        border-color:black;
      }
        .blkSelection img{
          display: block;
          max-width: 100%;
          margin:0;
        }
        .blkSelection a{
          display: block;
          font-size: var(--base-font-size);
          font-weight: 800;
          text-decoration: none;
        }
        .blkSelection a:hover{
          text-decoration: none;
        }
  /* ## dotted list steps ## */
    .dottedList--deezer .dottedList-item:not(:last-child):before{
      border-top-color:#28E4AB;
    }
    .dottedList--deezer .dottedList-item-nbrBox{
      background-color:#28E4AB;
    }
    .dottedList-item-desc div{
      max-width:11.5em;word-wrap: break-word;margin:0 auto;
    }

  /* ## liste simple ## */
    .inlineList-item-iconBox{
      height:5.3em;
    }
      .inlineList-item-icon{
        max-width: unset;
      }


/*     
**********************************************************
=== 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;
		}
			.sectionHeader-title-logo{
				margin:0 auto 1em auto;
			}
      .sectionHeader-offer{
        margin-left:auto;
        margin-right:auto;
      }
		/**/
    .sectionTitle,
    .sectionSubtitle{
      text-align: center;
    }
    /**/
    .blkSelection {
      flex-basis: calc( ( 100% - ( 2 * 1.2em ) ) / 2 );
    }
    /**/
    .dottedList--deezer .dottedList-item:not(:last-child):before{
      border-left-color:#28E4AB;
    }
    .dottedList-item-desc div{
      max-width:unset;
    }

}

@media (max-width: 480px){  
	.sectionHeader-title-label{
		font-size:1.5em;
	}
	/**/
		.hideonmobile{
			display:none;
		}
	/* ## */



}