@font-face {
    font-family: Helvetica;
    src: url(fonts/HelveticaNeueThin.otf);
}
 html{
 	width:100%;
 	height:auto;
 	min-height:100%;
 	font-family: Helvetica;
 	font-weight:bold;
 	letter-spacing: 0.5px;
 }
 body{
	width:100%;
 	height:auto;
 	margin-top:80px;
 	color:#0B3040;
 	/*background:url("../images/fond.jpg");*/
	/*
	background: #f1f1f1;
	background: -moz-linear-gradient(top,  #f1f1f1 0%, #d8d8d8 100%);
	background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#f1f1f1), color-stop(100%,#d8d8d8));
	background: -webkit-linear-gradient(top,  #f1f1f1 0%,#d8d8d8 100%);
	background: -o-linear-gradient(top,  #f1f1f1 0%,#d8d8d8 100%);
	background: -ms-linear-gradient(top,  #f1f1f1 0%,#d8d8d8 100%);
	background: linear-gradient(to bottom,  #f1f1f1 0%,#d8d8d8 100%);
	filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f1f1f1', endColorstr='#d8d8d8',GradientType=0 );
	*/
	background: #FFF;
 }
	
h1,h2{
	font-family: Helvetica;	
	font-weight: 300;
}
h1{	
	font-size:24px;
}
h2{	
	font-size:18px !important;
	font-weight: bold;
}
h3{
	font-size:16px !important;
	margin:0px;
}
h4{
	font-size:18px !important;
	
}
hr{
	border:1px solid #D9D9D8;
}
label{
	color:#0B3040;
}

input[type='checkbox']{
	height:14px;
}

fieldset legend{
text-align: center;
}


/*MENU*/
#logo{	
	height: 35px;
    margin-top: -8px;
}

.navbar .container{
	display:flex;
	justify-content: space-between;
}

.navbar .container:after,
.navbar .container:before{
	display: none;
}

.navbar-inverse{
	background-color:#F1F1F1 !important;
	height:45px;
	border:none;
	border-bottom:1px solid #fff !important;
	font-size: 14px !important;
}
.navbar-nav{
	top:0px;
}

.navbar-nav li{	
	height:30px;
	margin:10px 0px 0px 10px;
	webkit-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;	
}
.navbar-nav li:not(.mode-switch){	
	border-top:none;
	border-bottom: none;
	border:1px solid #D1D1D1;
	border-radius: 5px;	
}
.navbar-nav li:not(.mode-switch):hover{
	background-color:#0B3040;
}
.navbar-nav li.language-switch{
	width: 100px;
}

.navbar-nav li a{	
	color:#0B3040 !important;
	height: 100% !important;
	text-align: center;
	font-weight: bold;
	padding-top:4px !important;
	padding-bottom:4px !important;
	webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
}

.navbar-nav li a:hover{
	color:#fff !important;
}
.navbar-nav li select{
	letter-spacing: 0.5px;
	font-family: 'FontAwesome',Helvetica;	
	background:url('images/fr.png');	
	color:#0B3040 !important;
	background:#F1F1F1;
	width:100%;
	height: 100% !important;	
	border:none;		
	cursor:pointer;
	webkit-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
     -webkit-appearance: none;
    -moz-appearance: none;
    text-indent: 1px;
    text-overflow: '';
    padding:3px 10px 3px 10px;
}
.navbar-nav li select:hover{
	background-color:#0B3040;
	color:#fff !important;	
}
.navbar-nav li select option{
	background:#0B3040;
	color:#fff;			
}
.navbar-toggle{
	border:none;
	background:#0B3040;
}
.navbar-toggle:hover{
	background:#69D3BE !important;
}
.navbar-toggle:focus{
	background:#0B3040 !important;
}
.navbar .container ,.navbar-header{
	max-height: 100%;
}

/*FIN MENU*/

/*CONTENT*/
.formulaire{	
	margin-bottom:20px;
}

.col-centered{
	margin:0px auto;
	float:none;
}
.fourchetteValeur{
	color:#6C6C6C;
	font-size: 11px;
	font-style: italic;
}
.redStar{
	color:#ee3624;
}
.div_multi_compresseur label{
	padding-left:40px;
}
.div_commentaire{
	margin-top: 25px;
}
.bold{
	font-weight: 900;
}
.form-error{
	color:#ee3624;
	font-size:18px;
}
.canvas_chart_ecs{
	height:300px;
}
.canvas_chart_ecs::after{
	content: "";
	background:url(../images/chart.svg) no-repeat center;
	background-size: 40%;
	opacity: 0.3;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	position: absolute;
}
/*FIN CONTENT*/
/*BUTTON*/
/*.genGraphButton{
	background-color:#69D3BE;
	color:#fff;
	border:1px solid #69D3BE;
	width:100%;
	font-size: 18px;
	margin:10px 0px;
	webkit-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
   }

 .genGraphButton:hover{
	background-color:#fff;
	color:#69D3BE;
 }
 */
.animated { 
    -webkit-animation-duration: 1s; 
    animation-duration: 1s; 
    -webkit-animation-fill-mode: both; 
    animation-fill-mode: both; 
    -webkit-animation-timing-function: ease-in; 
    animation-timing-function: ease-in; 
    animation-iteration-count:infinite; 
    -webkit-animation-iteration-count:infinite; 
} 

@-webkit-keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {-webkit-transform: translateY(0);} 
    40% {-webkit-transform: translateY(-10px);} 
    60% {-webkit-transform: translateY(-5px);} 
} 

@keyframes bounce { 
    0%, 20%, 50%, 80%, 100% {transform: translateY(0);} 
    40% {transform: translateY(-10px);} 
    60% {transform: translateY(-5px);} 
} 

.bounce { 
    -webkit-animation-name: bounce; 
    animation-name: bounce; 
}
.genGraphButtonActualise{
	background-color:#F7464A;
	color:#fff;
	border:1px solid #F7464A;
	width:100%;
	font-size: 18px;
	margin:10px 0px;
	webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
}
.genGraphButtonActualise:hover{
	background-color:#fff;
	color:#F7464A;	
}
/*
 .actionButton{
 	background-color:#69D3BE;
	color:#fff;
	border:none;
	width:49.6%;
	font-size: 14px;
	margin:10px 0px;
	webkit-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
 }
 .actionButtonFullWidth{
	background-color:#69D3BE;
	color:#fff;
	border:none;
	width:100%;
	font-size: 14px;
	margin:5px 0px;
	webkit-transition: all 0.5s;
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
 }
.actionButtonFullWidth:hover{
	background-color:#0B3040;
	color:#fff;
 }
 .actionButton:hover{
	background-color:#0B3040;
	color:#fff;
 }
*/
 .suivantButton ,.retourButton{
	width:10%;
	background:#0B3040;
	border:none;
	font-size: 16px;
	color:#fff;
    font-weight: 900;
    margin:15px auto;
    padding :5px 0px;
    border-radius: 5px;
    webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
 }

 .suivantButton:hover,.retourButton:hover{	
	background: #69D3BE;
 }

 .radioInput{
 	margin-right: 20px !important;
 }

 /*FIN BUTTON*/

 /*SELECT*/
	.selectButton{
		color:#0B3040 !important;
		width:32.5%;	
		float:right;
		height:24px;		
	}
	.selectButtonMin{
		color:#0B3040 !important;
		width:15%;	
		float:right;
		height:24px;		
	}
	.selectButtonMin option, .selectButton option{
		background:#0B3040;
		color:#fff;			
	}
 /*FIN SELECT*/

 /*CHAMPS*/
.textField{
	width:32.5%;
	color:#0B3040;
	text-align: center;
	float:right;
	height:24px;	
}
.textFieldMin{
	width:15%;
	color:#0B3040;
	text-align: center;
	float:right;
	height:24px;
}
.textareaField{
	float:right;
	width:50%;
	height:60px;
	margin-bottom: 20px;
}
.textFieldError{
	border:1px solid #ee3624;
}
.checkboxError,
.checkboxError a{
	color:#ee3624;
}

/** SLIDER OUI/NON **************/
/*
#sliderLabel {
 border: 1px solid #a2a2a2;
 cursor: pointer;
 float:right;
 height: 24px;
 overflow: hidden;
 position: relative;
 width: 100px;
 margin-bottom:0px;	
}
#sliderLabel input {
 display: none;
}
#sliderLabel input:checked + #slider {
 left: 0px;
}
#slider {
 left: -50px;
 position: absolute;
 top: 0px;
 -webkit-transition: left .25s ease-out;
 -moz-transition: left .25s ease-out;
 -o-transition: left .25s ease-out;
 -ms-transition: left .25s ease-out;
 transition: left .25s ease-out;
}
#sliderOn,#sliderBlock,#sliderOff {
 height: 24px;
 line-height: 24px;
 position: absolute;
 text-align: center;
}
#sliderOn {
 background: #69D3BE;
 color: white;
 left: 0px;
 width: 54px;
}
#sliderBlock {
 background: #d9d9d8; 
 height: 24px;
 left: 50px;
 width: 50px;
}
#sliderOff {
 background: #f2f3f2; 
 color: #8b8b8b;
 left: 96px;
 width: 54px;
}
*/

.choixVisiblePdf{
	width:30px;
	float:right;
}
.popupDiv.expert{
	width:300px;
	margin:0px auto;
}
.popupDiv.simple{
	width:500px;
	margin:0px auto;
}
.popupDlLabel{
	margin:20px 80px;
	text-align: justify;
}
.popupDlTxt{
	text-align: justify;
}
 /*FIN CHAMPS*/
	
	/*TABS*/
#tab{
	margin:10px;	
}

.tab_display_none{
	display: none;	
}
.tab_onglet{
	display: inline-block;
	width:19.4%;
	background:#fff;
	border:1px solid #69D3BE;
	color:#69D3BE;	
	text-align: center;
	line-height: 30px;
	cursor:pointer;
	margin-top: 4px;	
	webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
	border-radius: 50px;
}

.tab_onglet:hover,
.tab_onglet_select{
	background:#69D3BE;
	color:#fff;
}
.tab_onglet_disabled{	
	background:#BFBFBF;	
	color:#fff;
	border:1px solid #E9E9E9;
	webkit-transition: all 0.5s; /* Safari */
    transition: all 0.5s;
    -moz-transition: all 0.5s;
    -o-transition: all 0.5s;
    -ms-transition: all 0.5s;
}
.tab_onglet_disabled:hover{
	background:#BFBFBF;	
	color:#fff;
}

    /*FIN TABS*/

   	/*INFO BULLE*/
 .lien_info_bulle i{
 	cursor:pointer; 	
 	float:right;
 	font-size: 24px;
 	margin-right: 10px; 	
 }
 .lien_info_bulle:hover{
 	color:#69D3BE;
 }
.lien_info_bulle .info_bulle
{
    visibility: hidden;
    opacity: 0;
    position: absolute; /* important */    
    left: 0;
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
}

.lien_info_bulle:hover .info_bulle
{
    visibility: visible;
    opacity: 1;    
    transition: 0.5s ease-out;
    -webkit-transition: 0.5s ease-out;
}

.info_bulle
{
	z-index:5;
    width: 100%;
    padding: 0px;
    margin: 0 auto;
    background: #E9E9E9;    
    box-shadow: 3px 5px 10px rgba(0,0,0,0.3);
}

.info_bulle p
{
    color: #0B3040;
    padding: 10px 5px;
    margin: 0;
    text-align: center;    
}

   	/*FIN INFO BULLE*/
   	/*CHARTS*/

#legend_ecs{
	width:100%;
	margin-bottom:50px;
	margin-top:20px;
}

#legend_potentiel{
	margin-top: 20px;
}

.carreLegendRed{
	border-radius:6px;
	width:12px;
	height:12px;
	background:#F7464A;
	display:inline-block;
	margin-right:10px;
}

.carreLegendYellow{
	border-radius:6px;
	width:12px;
	height:12px;
	background: #F8F65F;
	display:inline-block;
	margin-right:10px;
}
.carreLegendGreen{
	border-radius:6px;
	width:12px;
	height:12px;
	background: #27AA38;
	display:inline-block;
	margin-right:10px;
}
#label_sans_boostherm{
	text-align: center;
	margin-bottom: 20px;
}
#label_avec_boostherm{
	text-align: center;
	margin:20px 0px;
}

#grapiqueSection div div h2{
	margin:0px !important;
}
   	/*FIN CHARTS*/


/** MODE EXPERT / SIMPLIFIÉ **/

/*switch styles*/

.yn-switch{
	width: 100%;
    display: table;
}
.yn-switch div.btn-container{
	display: table-cell;
	vertical-align: middle;
    text-align: right;
}
.yn-switch > label{
	display: table-cell;
	vertical-align: middle;
    text-align: left;
}
.mode-switch div.btn-container{
    display: table-cell;
    vertical-align: middle;
    text-align: center;
}

.yn-switch div.btn-container i,
.mode-switch div.btn-container i{
    display: inline-block;
    position: relative;
    top: -9px;
}

.yn-switch .btn-container label,
.mode-switch .btn-container label {
    font-size: 13px;
    color: #FFF;
    font-weight: 500;
}

.yn-switch .btn-color-yn-switch,
.mode-switch .btn-color-mode-switch{
    display: inline-block;
    margin: 0px;
    position: relative;
}


.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner,
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner{
    margin: 0px;
    width: 160px;
    height: 30px;
    border-radius: 26px;
    overflow: hidden;
    position: relative;
    transition: all 0.3s ease;
    display: block;
}

.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner:before,
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner:before{
    position: absolute;
    font-size: 12px;
    font-weight: 500;
    top: 7px;
    right: 20px;
}

.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner:after,
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner:after{
    width: 80px;
    height: 26px;
    border-radius: 26px;
    position: absolute;
    left: 2px;
    top: 2px;
    text-align: center;
    transition: all 0.3s ease;
    padding: 5px 0px;
}

.yn-switch .btn-color-yn-switch > .alert,
.mode-switch .btn-color-mode-switch > .alert{
    display: none;
    background: #FF9800;
    border: none;
    color: #fff;
}

.yn-switch .btn-color-yn-switch input[type="checkbox"],
.mode-switch .btn-color-mode-switch input[type="checkbox"]{
    cursor: pointer;
    width: 50px;
    height: 25px;
    opacity: 0;
    position: absolute;
    top: 0;
    z-index: 1;
    margin: 0px;
}

.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner:after,
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
    left: 78px;
}

.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner:before,
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{
    right: auto;
    left: 20px;
}

.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner:after,
.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner:before,
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner:after,
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:before{
	content: attr(data-off);
}
.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner:before,
.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner:after,
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner:before,
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
	content: attr(data-on);
}

.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner,
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{

}

.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked ~ .alert,
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked ~ .alert{
    display: block;
}

.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner{
	background: #FF8B66;
}
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner{
	background: #B8EAE0;
}

.yn-switch .btn-color-yn-switch > label.btn-color-yn-switch-inner:after{
	background: #FF3E00;
	box-shadow: 0px 0px 6px -2px #FF3E00;
}
.mode-switch .btn-color-mode-switch > label.btn-color-mode-switch-inner:after{
	background: #69D3BE;
    box-shadow: 0px 0px 6px -2px #69D3BE;
}
.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner{
	background: #B8EAE0;
    color: #fff;
}
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner{
    background: #FF8B66;
    color: #fff;
}
.yn-switch .btn-color-yn-switch input[type="checkbox"]:checked + label.btn-color-yn-switch-inner:after{
	background: #69D3BE;
    box-shadow: 0px 0px 6px -2px #69D3BE;
}
.mode-switch .btn-color-mode-switch input[type="checkbox"]:checked + label.btn-color-mode-switch-inner:after{
	background: #FF3E00;
	box-shadow: 0px 0px 6px -2px #FF3E00;
}

.simple.presentation{
	border: 1px dotted #69D3BE;
	background: rgb(105, 211, 190);
	padding: 2rem;
	margin: 2rem 0;
	color: #FFF;
	font-size: 16px;
	text-align: center;
	border-radius: 8px;
}

.simple.besoins-ecs{
	background: #F7F7F7;
	padding: 2rem 0;
	margin: 2rem 0;
	clear: both;
}

.simple.bilan,
.simple.potentiel{
	background: #F7F7F7;
	padding: 2rem;
	margin: 2rem 15px;
	clear: both;
	width: calc(100% - 30px);
}

.simple.bilan img,
.simple.potentiel img,
.simple.besoins-ecs img{
	display: block;
	/*width: 30%;*/
	height: 250px;
	margin: 0 auto;
}

.cee{
	width: calc(100% - 30px);
}

.mode-simple .cee{
	display: inline-grid;
	grid-template-areas:
        "illustration presentation"
        "illustration calcul";
	column-gap: 3rem;
	background: #FFF;
	justify-content: center;
	align-items: center;
	border: 1px dotted #69D3BE;
	padding: 2rem;
	margin: 2rem 15px;

	transition: all 0.5s linear;
}

.mode-expert .cee{
	display: inline-block;
	margin: 0 15px;
}

.cee .img{
	grid-area: illustration;
	width: 120px;
}
.cee .img img{
	width: 100%;
}
.cee p{
	grid-area: presentation;
	font-weight: bold;
	font-size: 20px;
	color: #69D3BE;
}
.cee .calcul{
	grid-area: presentation;
	font-weight: bold;
	font-size: 20px;
	color: #69D3BE;
}

/** BOUTONS **/

.actionButton{
	display: flex;
	font-size: 14px !important;
	padding: 0.3rem 2rem !important;
	align-items: center;
}
.suivantButton::before,
.actionButton::before{
	font-family: 'FontAwesome',Helvetica;
    content: "\f061";
    margin-right: 10px;
}
.retourButton::before{
	font-family: 'FontAwesome',Helvetica;
    content: "\f060";
    margin-right: 10px;
}

.retourButton i,
.suivantButton i{
	display:none;
}

.genGraphButton{
	width: 100%;
	display: inline-flex;
	font-size: 18px !important;
	padding: 0.75rem 1rem !important;
}

.retourButton,
.suivantButton,
.actionButton,
.genGraphButton{
	border-style: solid;
    text-decoration: none;
    -webkit-font-smoothing: antialiased;
    font-family: "Roboto", "Open Sans", Helvetica, sans-serif;
    text-transform: uppercase;
    
    line-height: 28px;
    white-space: normal;
    letter-spacing: 0.1rem;
    transition: all 0.3s ease-in-out;
    color: #FFF !important;
    border-radius: 50px !important;
    border-width: 1px !important;
    
	font-weight: 300;
    justify-content: center;
	margin-top: 10px;
	margin-bottom: 10px;
}

.genGraphButton{
	background: #FF3E00;
    border-color: #992500;
}
.genGraphButton:hover{
	border-color: #992500;
    background: #992500;
}

.actionButton,
.retourButton,
.suivantButton{
	background: #69D3BE;
	border-color: #31A58E;
}
.actionButton:hover,
.retourButton:hover,
.suivantButton:hover{
	background: #31A58E;
	border-color: #31A58E;
}


#emailForm fieldset > div{
	display: flex;
	justify-content: space-between;
	column-gap: 1rem;
}
#emailForm fieldset > div.optin{
	justify-content: flex-start;
}