/* ## TYPOGRAPHY ############################################################# */
  /* Manrope Variant */
  @import url('https://fonts.googleapis.com/css2?family=Manrope:wght@200..800&display=swap');

  /* Party  Bold (Regular not needed) */
  @font-face {
    font-family: Party;
    src: url('../fonts/Party-Bold.woff2') format('woff2');
    src: url('../fonts/Party-Bold.woff') format('woff');
    font-weight:700;
    font-display: swap;
  }

/* ## STRUCTURE ########################################################## */
.ftlHTML {
    font-family: 'Manrope', Arial, sans-serif;
    font-weight:500;
    font-size:20px;
    color:#161616;
    padding:0 0 20px 0;

}
/* ## HELPERS ########################################################## */
.rouge{
    color:#E21212 !important;
}
.bleu{
    color:#005EAD !important;
}
.block{
    display:block;
}
/* ## ELEMENTS RECURENTS & Styles communs ################################## */
.ftlHTML strong{
  font-weight: 800;
}
/* Liens */
.ftlHTML .btn {
	display: inline-block;
	background-color: #E21212;
	color: #FFF;
    font-family: 'Manrope', Arial, sans-serif;
	font-size: 0.8em;
	font-weight: 700;
	font-style: normal;
	line-height: 1;
	white-space: nowrap;
	
  border-radius:9999em;
	padding: 0.95em 2em 1em 2em;
	text-align: center;
	text-decoration: none;
  }
  .ftlHTML .btn:hover {
	background-color: #D01111;
  }
  .globalLink {
	text-align: center;
	margin: 1.5em auto 2em auto;
  }
  .globalLink:last-child{
	margin-bottom: 0;
  }
  .globalLink .btn{
    min-width: 20em;
  }
  .ftlHTML .btn--bleu{
	background-color: #005EAD;
  }
  .ftlHTML .btn--bleu:hover {
	background-color: #004d8b;
  }
  .ftlHTML .btn--conf{
	background-color: #747474;
  }
  .ftlHTML .btn--conf:hover{
	background-color: #353535;
  }
  a.simpleLk,
  a.simpleLk:active,
  a.simpleLk:focus,
  a.simpleLk:visited{
	color:inherit;
	text-decoration: underline;
  }
  a.simpleLk:hover{
	color:inherit;
	text-decoration: none;
  }
  .zoneLink:hover {
	opacity: 0.8;
  }
  .fakeLink {
	text-decoration: underline;
	cursor: pointer;
  }
  .fakeLink:hover,
  .zoneLink:hover .fakeLink {
	text-decoration: none;
  }
  .lkList{
	list-style-type: none;
	padding:0;
	overflow: hidden;
	margin-left:-0.4em;
	margin-right:-0.4em;
  }
	.lkList li{
	  display: inline-block;
	  margin:1em 0.4em 0 0.4em;
	}
  /* ombrés blocs */
  .wShadow,
  .blk,
  .blkAvtg,
  .blkSelection {
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
  }
/* ## HEADER ############################################################# */
.sectionHeader {
	background:url(../images/deco/bg-header-desktop.png) no-repeat top right;
	padding:1em 0 1.5em 0;
    margin-bottom:0;
}

	.sectionHeader-title{
		max-width:400px;
		font-family: Party, 'Arial Narrow', 'Trebuchet MS', sans-serif;
		font-size:1em;
		font-weight:700;
		line-height:1;
		margin: 0 0 0.5em 0;
	}
		.sectionHeader-title-logo{
			display:block;
			height:2.7em;
			line-height:1;
			margin-bottom:0.5em;
		}
		.sectionHeader-title-label{
			display:block;
			font-size:1.8em;
			line-height:1.2;
		}
	.sectionHeader-subtitle {
		max-width:22em;
		color:#005EAD;
		font-size:0.9em;
		font-weight:800;
		line-height:1.4em;
		margin:0 0 0.9em 0;
	}
	.sectionHeader .btn{
		padding:0.8em 4em 0.85em 4em;
	}

/* ## MAIN # Commons ##################################################### */
/* ## Titres ## */
.sectionTitle{
    font-family: Party, 'Arial Narrow', 'Trebuchet MS', sans-serif;
    font-weight:700;
    font-size:1.25em;
    text-transform: uppercase;
    line-height:1.2;
    padding:0;
    margin-top:calc( (48/25) * 1em);
    margin-bottom:calc( (24/25) * 1em);
}
.sectionTitle:first-child{
	margin-top:0;
}
.sectionHeader + .sectionTitle{
    margin-top:1em;
}
.sectionSubtitle{
    font-size:0.9em;
    line-height:1.4;
    padding:0;
    margin:-0.3em 0 0.8em 0;
}

/* ## Bandeaux promo ## */
.sectionBanner{
	display:block;
    margin:2em auto;
}
.sectionBanner--withShadow{
	border: 1px solid rgba(0, 0, 0, 0.1);
	box-shadow: 0 2px 5px 0 rgba(0, 0, 0, 0.1);
}
.sectionTitle + .sectionBanner{
    margin-top:0;
}
.sectionBanner a:hover,
a.sectionBanner:hover{
    opacity:0.8;
}
	.sectionBanner img{
		display:block;
		margin:0 auto;
		max-width:100%;
	}

/* ###  Blocks  ### */
/* = Avantages  */
.sectionAvtg{
	display: flex;
	margin: -1.2em 0 0 -1.2em;
}
	.blkAvtg{
		flex-basis:calc( ( 100% - ( 4 * 1.2em ) ) / 4);
		text-align:center;	
    border-radius: 20px;
		padding:0.75em 1em 1.5em 1em;
		margin:1.2em 0 0 1.2em;
	}
		.blkAvtg-visuel{
			margin-bottom:0.75em;
		}
			.blkAvtg-visuel img{
				display:block;
				height: 1.8em;
				margin:0 auto;
			}
		.blkAvtg-label{
			text-align:center;
			margin:0;
		}
				.blkAvtg-label-title{
					font-size:0.9em;
					font-weight: 800;
					line-height:1;
					margin:0 0 0.9em 0;
				}
				.blkAvtg-label-desc{
					font-size:0.8em;
					font-weight: 400;
					line-height:1.6;
					margin:0;
				}

/* ## */
.blkFlex{
  display: flex;
  align-items: center;
  margin:2.4em 0 2em 0;
}
  .blkFlex > img{
    display: block;
    width:49% ;
    height: auto;
    border-radius: 20px;
  }
  .blkFlex-main{
    flex-basis:49% ;
    padding: 1% 0 1% 4%;
  }
  .blkFlex-main .sectionSubtitle{
    font-size:1em ;
    font-weight: 800;
  }
  .blkFlex-main p:not(.sectionSubtitle){
    font-size: 0.9em;
    line-height: 1.4;
    margin-bottom: 0;
  }

/* ## Section "How To" Comment Beneficier de HP ## */

.sectionHowTo{
	margin-bottom:2em;
}	
.steps{
	display:flex;
	justify-content: space-between;
	align-content: flex-start;
	list-style-type: none;
	padding:0;
	margin:0 auto;
    position:relative;
}
.steps:before{
    display:block;
    content: "";
    position:absolute;
    left:0;
    right:0;
    top:1.5em;    
    height:0px;
    border-top:2px solid #005EAD;
    margin:0 auto;
}
.steps--3steps:before{
    width:67%;
} 
	.steps-item{
		flex-basis:33.33%;
		text-align:center;
		padding:0 2.5%;
	}
		.steps-item-rank{
			display:block;
			margin:0 auto 1.5em auto;    
			position:relative;
		}
			.steps-item-rank-number{
				display:block;
				width:2.3em;
				height:2.3em;
				line-height:2.3em;
				text-align:center;
				border-radius: 50%;
				background-color: #005EAD;
				font-weight:800;
				font-size:1.3em;/*26px*/    
				font-style: normal;            
				color: #FFF;
				margin:0 auto;    
			}
		.steps-item-picto{
			display:block;
			height:2.8em;
			margin:0 auto 0.75em auto;
		}
		.steps-item-label{
			display:block;
			max-width:260px;
			font-size: 0.8em;
			line-height: 1.5;
			padding:0;
			margin:0 auto;
		}

/* Cracteristiques */	
.blkCaracteristiques{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	margin-top:1.5em;
}
	.blkCaracteristiques--flex img{
		width:31%;
	}
	.blkCaracteristiques--flex .blkList{
		width:68%;
	}
	.blkCaracteristiques--ecotank img{
		width:41%;
	}
	.blkCaracteristiques--ecotank .blkList{
		width:58%;
	}
	.blkList{
    border-radius: 20px;
		list-style-type: none;
		padding:1.2em 1.6em;
	}
		.blkList-item{
			font-size: 0.8em;
			line-height: 1.3em;
			padding-left:0.8em;
			margin-top:0.5em;
			position: relative;
		}
		.blkList-item:first-child{
			margin-top:0;
		}
		.blkList-item:before{
			display: inline-block;
			content:"-";
			position: absolute;
			left: 0;
		}


    /* ## Formules (tarifs) ## */ 
    .formulesList{
      display: flex;
      align-items: flex-end;
      justify-content: center;
      flex-wrap: wrap;
      list-style-type: none;
      padding:0;
      margin:-0.8em auto 0 auto;
      transform: translateX(-0.8em);
    }
    .formulesList--flex{
      max-width:calc( (4*175px) + (4*0.8em) );
    }
    .formulesList--ecotank{
      max-width:calc( (5*175px) + (5*0.8em) );
    }
      .formulesList-item{
        text-align: center;
        margin:0.8em 0 0 0.8em;
      }
      .formulesList--flex .formulesList-item{
        flex-basis:calc( (100% - (4 * 0.8em)) / 4) ;
        min-width: 120px;
        max-width: 175px;
      }
      .formulesList--ecotank .formulesList-item{
        flex-basis:calc( (100% - (5 * 0.8em)) / 5) ;
        min-width: 120px;
        max-width: 175px;
      }
    .blkFormule{
      border-radius: 20px;
      box-shadow: 1px 1px 5px rgba(0,0,0,0.2);
      text-align: center;
    }
      .blkFormule-nbrPages,
      .blkFormule-name{
        display: block;        
        border-radius: 20px 20px 0 0;
      }
      .blkFormule-nbrPages{
        background-color: #f2f2f2;
        font-size: 0.8em;
        font-weight: 600;
        line-height: 1;
        text-transform: uppercase;
        padding:1.25em 1em 0.8125em 1em;
      }
      .blkFormule-name{
        color: #FFF;
        font-size: 1.25em;
        font-weight: 800;
        line-height: 1.2;
        padding:1.1em 10% ;
      }
      .budgetCompare-item--classique .blkFormule-name{
        background-color: #747474;
      }
      .budgetCompare-item--readyprint .blkFormule-name{
        background-color: #005EAD;
      }
      .blkFormule-pricer{
        display: block;
        border-radius: 0 0 20px 20px;
        background-color: #005EAD;
        color:#FFF;
        font-size: 1.5em;
        font-weight: 800;
        line-height: 1;
        padding:0.4em 0.5em ;
      }
      .popu .blkFormule-pricer{
        background-color: #ff5a20;
      }
      
      .budgetCompare-item .blkFormule-pricer{
        background-color: #FFF;          
        font-size: 2em;
      }
      .budgetCompare-item--classique .blkFormule-pricer{
        color: #747474;
      }      
      .budgetCompare-item--readyprint .blkFormule-pricer{
        color: #005EAD;
      }
        .blkFormule-pricer em{
          display: block;
          font-style: normal;
          font-size:0.6em ;
        }
        .budgetCompare-item .blkFormule-pricer em{
          font-size: 0.5em;
          margin-top: 0.5em;
        }

    .formulesList-item > strong{
      font-size: 0.8em;
    }        
  /* ## Comparaison ## */ 
    .budgetCompare{
      max-width:900px;
      display: flex;
      flex-wrap: wrap;
      align-items: flex-start;
      justify-content: center;
      list-style-type: none;
      padding: 0;
      margin:1.4em auto 1.2em auto;
    }
      .budgetCompare-item{
        flex-basis:calc( (100% - 2.4em) / 2);
        min-width: 260px;
        max-width:420px ;
        text-align: center;
        margin:0.6em ;
      } 
        .budgetCompare-item > img{
          display: block;
          max-width: 100%;
          margin:0 auto;
        }
        .budgetCompare-item .blkFormule{
          margin-bottom:0.6em;
        }
        .budgetCompare-item-mention{
          color:#757575;
          font-size:0.65em;
          padding:0 2em;
          margin:0;
        }
        .budgetCompare-item-eco{
          color: #ff5a20;
          font-size:1em;
          font-weight: 800;
          padding:0 1em;
          margin:0;
        }
          .budgetCompare-item-eco strong{
            font-size:1.6em;
          }
    /* ## Vidéos */
    .videoList{
      display: flex;
      list-style-type: none;
      padding:0;
    }
      .videoList-item{
        flex-basis: 48%;
        margin:0.6em;
      }  
        .blkVideo{
          width:100%;
          height:0;
          padding-bottom:56.25%;
          position: relative;
        }
          .blkVideo iframe{
            width:100%;
            height:100%;
            position: absolute;
            top:0;
            right:0;
            bottom:0;
            left:0;
          }
    /* ## Liste imprimantes  ## */
      .printerList{
        display: flex;
        align-items: flex-start;
        justify-content: center;
        list-style-type: none;
        padding: 0;
        margin:0 auto 0 auto;
      }
        .blkPrinter{
          width:50%;
          max-width:15em;
          padding:0 1.5em;
          text-align: center;
          line-height: 1.4;
          margin:0 ;
        }
        
          .blkPrinter h3{
            font-size:1em;
            font-weight:800;
            text-transform: uppercase;
          }
          .blkPrinter p{
            font-size:0.8em;
          }

/* ## Mentions légales ## */
.mentions-legales {
    padding:1.8em 1.8em;
    font-size: 0.6em;
    color: #989898;
    background-color: #F2F2F2;
    margin:2.5em 0;
}
    .mentions-legales dl,
	.mentions-legales dt,
	.mentions-legales dd{
		padding:0;
        margin:0;
    }
	.mentions-legales dt{
		font-weight:500;
	}
    .mentions-legales p{
        margin:1em 0 0 0;
    }

/* ## fonctionnement plié-deplié ## */
.js-publiAccordionLight-toggle{
    cursor: pointer;
}
.js-publiAccordionLight-content{
    display: none;
}
.js-publiAccordionLight-content.js-publiAccordionLight-content--default {
    display: block;
}

/* ############################################################################################ */
/* ==== RESPONSIVE behaviour ================================================================== */
/* ############################################################################################ */
@media (max-width: 767px) {
	/* ================================================================ */
	/* ## STRUCTURE ##################################### */
	.ftlHTML {
	  font-size: 18px;
	  max-width: 640px;
	  margin: 0 auto
	}
	#dcom_main_container .site .ftlHTML {
	  /* template Darty menu Mobile */
	  width: 100vw;
	}
	#dcom_main_container > table .ftlHTML {
	  /* template Darty header XXL */
	  width: calc(100vw - 17px);
	}
	#dcom_main_container > table {
	  background-color: #FFF !important;
	}
	.mobGutter {
	  width: calc(100% - 2.4em);
	  max-width: 580px;
	  margin-left: auto;
	  margin-right: auto;
	}
	.ftlHTML img {
	  max-width: 100%;
	}

 /* ## HEADER ########################################### */
	.sectionHeader {
		background:url(../images/deco/bg-header-mobile.png) no-repeat top center;
		background-size:100%;
		padding-top:68%;
		padding-bottom:0;
		margin-bottom:1.5em;
	}
		.sectionHeader-title{
			max-width:unset;
			margin:0.5em auto 1em auto;
		}	
			.sectionHeader-title-logo{
				margin:0 0.5em 0 0;
			}
			.sectionHeader-title-label{
				font-size:1.8em;
			}
		.sectionHeader-subtitle{
			max-width:unset;
		}
 /* ## MAIN ############################################# */ 
	/* ## */
	.sectionTitle {
		font-size: 1.15em;
		margin-bottom:0.6em;
	}
	.sectionSubtitle {
		font-size: 0.8em;
	}
	/* ## */
	.blkCaracteristiques{
		display: block;
	}
		.blkCaracteristiques--flex img,
		.blkCaracteristiques--ecotank img{
			width:66%;
			margin:0 auto;
		}
		.blkCaracteristiques--flex .blkList,
		.blkCaracteristiques--ecotank .blkList{
			width:100%;
		}

	/* ## */
	.sectionAvtg,
	.formulesPrices{
		flex-wrap: wrap;
	}
	.blkAvtg{
		flex-basis:calc( ( 100% - ( 2 * 1.2em ) ) / 2);
	}
	.flex .formulesPrices-item{
		flex-basis: calc( (100% - (3 * 1.2em )) / 3 );
	}
	.ecotank .formulesPrices-item{
		flex-basis: calc( (100% - (3 * 1.2em )) / 3 );
	}
	.compare .formulesPrices-item{
		flex-basis: calc( (100% - (1 * 1.2em )) / 1 );
	}
	.compare .formulesPrices-item-imgTitle{
		width:unset;
		max-width:70%;
	}
  /* ## */
  .blkFlex{
    flex-direction: column-reverse;
  }
    .blkFlex > img{
      flex-basis: 100%;
      display: block;
      width:auto ;
      height: auto;
      border-radius: 20px;
    }
    .blkFlex-main{
      flex-basis: 100%;
      padding: 0;
      margin-bottom:1em;
    }
  /* ## */
  .videoList{
    display: block;
  } 
	/* ## */
	.mentions-legales {
		padding: 1em 2em;
		font-size: 0.8em;
	}
}

@media (max-width: 480px){  /* ================================================================ */
	/* ## */
    .ftlHTML{
        padding:0 0 1.5em 0;
        font-size:15px;
    }

	/* ## */
	.sectionHeader-title-label{
		font-size:1.5em;
		line-height: 1.2;
	}
	/* ## */

	/* ## */
	.sectionHowTo{
		width:100vw;
		overflow: scroll;
		margin-bottom:2em;
	}	
		.steps{
			display:inline-flex;
			width:150vw;
			margin: 0 25vw;
		}	
		.steps:after{
			display:inline-flex;
			content:"";
			width:1px;
		}
}

@media (max-width: 390px){  /* ================================================================ */
	/* ## */
    .ftlHTML{
        font-size:14px;
    }
}
@media (max-width: 320px){  /* ================================================================ */
	/* ## */
    .ftlHTML{
		font-size:13px;
	}
}