/* ##################################################################################################### */
/* ########################################  D P E  #################################################### */
/* ##################################################################################################### */

/* DPE 2021 */
.dpe-container {width: 100%;float: left;padding: 15px 0 40px 0;position: relative;}
.dpe-container .dpe {width: 400px;float: left;margin-top: 20px;position: relative;transform: scale(0.7);}
.dpe-container .dpe .mentionHaut { position: absolute;top: -25px;font-weight: 600;font-size: 12px;line-height: 15px;left: 150px;color: #58a84d; }
.dpe-container .dpe .mentionBas { position: absolute;bottom: -30px;font-weight: 600;font-size: 12px;line-height: 15px;left: 150px;color: #db213b; }
.dpe-container .dpe .zone { height: 40px;margin: 0 0 7px 0;float: left; }
.dpe-container .dpe .zone .etiquette { width: 150px;height: 100%;float: left; }
.dpe-container .dpe .zone .etiquette .conso { width: 55%;float: left;height: 100%;text-align: center;color: #000;display: flex;justify-content: center;flex-wrap: wrap;align-items: center;align-content: center;padding: 5px; }
.dpe-container .dpe .zone .etiquette .conso .value { display: block;font-size: 32px;line-height: 30px;font-weight: 700; }
.dpe-container .dpe .zone .etiquette .conso .unit { display: block;font-size: 8px; }
.dpe-container .dpe .zone .etiquette .emissions { width: 45%;float: left;height: 100%;text-align: center;display: flex;justify-content: center;flex-wrap: wrap;align-items: center;align-content: center;padding: 5px;border-left: 1px solid #000; }
.dpe-container .dpe .zone .etiquette .emissions .value { display: block;font-size: 32px;line-height: 30px;font-weight: 700; }
.dpe-container .dpe .zone .etiquette .emissions .unit { display: block;font-size: 8px; }
.dpe-container .dpe .zone .fleche { width: 250px;height: 100%;float: left; }
.dpe-container .dpe .zone .fleche .base { height: 100%;background: #eee;float: left;position: relative; padding: 0px; display: block!important;}
.dpe-container .dpe .zone .fleche .base .letter { display: inline-block;color: #fff;font-weight: 700;font-size: 29px;padding: 0 8px; }
.dpe-container .dpe .zone .fleche .arrow { display: block !important;visibility: visible !important;float: left;width: 0;height: 0;border-top: 20px solid transparent;border-bottom: 20px solid transparent;border-left: 25px solid; }
#dpe_A .base { width: calc(40% - 40px);background: #58a84d; }
#dpe_A .arrow { border-left-color: #58a84d; }
#dpe_B .base { width: calc(50% - 40px);background: #58af4e; }
#dpe_B .arrow { border-left-color: #58af4e; }
#dpe_C .base { width: calc(60% - 40px);background: #c8dc44; }
#dpe_C .arrow { border-left-color: #c8dc44; }
#dpe_D .base { width: calc(70% - 40px);background: #eceb3c; }
#dpe_D .arrow { border-left-color: #eceb3c; }
#dpe_E .base { width: calc(80% - 40px);background: #f2cc3a; }
#dpe_E .arrow { border-left-color: #f2cc3a; }
#dpe_F .base { width: calc(90% - 40px);background: #ed9942; }
#dpe_F .arrow { border-left-color: #ed9942; }
#dpe_G .base { width: calc(100% - 40px);background: #db213b; }
#dpe_G .arrow { border-left-color: #db213b; }
/* DPE selected */
.dpe-container .dpe .zone.selected { height: 65px; }
.dpe-container .dpe .zone.selected .etiquette { border: 2px solid #000;border-radius: 5px 0 0 5px; }
.dpe-container .dpe .zone.selected .fleche .base { border-top: 2px solid #000;border-bottom: 2px solid #000; }
.dpe-container .dpe .zone.selected .fleche .arrow { border-top: 33px solid transparent;border-bottom: 32px solid transparent;border-left: 36px solid; }
.dpe-container .dpe .zone.selected .fleche .base .letter { font-size: 55px;line-height: 61px; }

/* GES */
.dpe-container .ges {width: 350px;float: left;padding: 16px 20px 40px 20px;border-radius: 20px;/* margin: 20px 0 0 20px; */border: 3px solid #a8d9f4;transform: scale(0.7);}
.dpe-container .ges .cadre { position: relative;float: left;width: 100%; }
.dpe-container .ges .zone { height: 25px;margin: 0 0 3px 0;float: left; }
.dpe-container .ges .zone .fleche { width: 180px;height: 100%;float: left;position: relative; }
.dpe-container .ges .zone .fleche .base { height: 100%;background: #eee;float: left;position: relative;border-radius: 0 20px 20px 0; padding: 0px; display: block!important;}
.dpe-container .ges .zone .fleche .base .letter { display: inline-block;color: #fff;font-weight: 700;font-size: 17px;padding: 0 8px; }
#ges_A .base { width: calc(40% - 20px);background: #a8d9f4; }
#ges_B .base { width: calc(50% - 20px);background: #8db3d1; }
#ges_C .base { width: calc(60% - 20px);background: #7891b0; }
#ges_D .base { width: calc(70% - 20px);background: #606d8d; }
#ges_E .base { width: calc(80% - 20px);background: #4e5170; }
#ges_F .base { width: calc(90% - 20px);background: #3a344f; }
#ges_G .base { width: calc(100% - 20px);background: #251834; }
.dpe-container .ges .zone .etiquette { width: 110px;height: 100%;float: left;display: flex;flex-wrap: nowrap;align-content: center;align-items: center;background: #fff;margin-left: 10px; }
.dpe-container .ges .zone .etiquette .value { display: inline-block;font-size: 32px;float: left;line-height: 30px;font-weight: 700;margin: 0 5px 0 0; }
.dpe-container .ges .zone .etiquette .unit { display: inline-block;float: left;line-height: 46px;font-size: 8px; }
.dpe-container .ges .bigMention { display: block;color: #000;float: left;margin: 0 0 40px 0;font-weight: 600;font-size: 18px;line-height: 20px; }
.dpe-container .ges .mentionHaut { position: absolute;top: -25px;font-weight: 600;font-size: 12px;line-height: 15px;left: 0px;color: #a8d9f4; }
.dpe-container .ges .mentionBas { position: absolute;bottom: -20px;font-weight: 600;font-size: 12px;line-height: 15px;left: 0px;color: #251834; }
/* GES selected */
.dpe-container .ges .zone.selected { height: 45px; }
.dpe-container .ges .zone.selected .fleche:before { content: "";width: 100%;height: 1px;position: absolute;top: 50%;left: 0;background: #000; }
.dpe-container .ges .zone.selected .fleche .base { border: 3px solid #000; }
.dpe-container .ges .zone.selected .fleche .base .letter { font-size: 38px;line-height: 40px; }



/* DPE old */
.dpe-container-old { width: 100%;float: left;padding: 15px 0 40px 0;display: flex;justify-content: center; }
.dpe-container-old .dpe, .dpe-container-old .ges { width: 250px;margin: 20px 40px; }
.dpe-container-old .dpe img, .dpe-container-old .ges img { width: 100%; }
.dpe-container-old .valeur-perf { float: left;width: 100%;text-align: left;margin: 15px 0 0 0; }
.dpe-container-old .valeur-perf span { font-weight: 600;color: #000; }



/* ##################################################################################################### */
/* ##################################  R E S P O N S I V E  ############################################ */
/* ##################################################################################################### */
@media (max-width: 1199px) {
	.dpe-container .dpe {/* width: 100%; */}
	.dpe-container .ges {position: absolute;right: -80px;/* top: -80px; *//* transform: scale(0.5); */}
}
@media (max-width: 991px) {
	.dpe-container { width: 100%; }
	.dpe-container .dpe { width: 400px;height: 365px; }
	.dpe-container .ges {transform: scale(0.7);right: -50px;/* top: -50px; */}
}
@media (max-width: 767px) {
	.dpe-container .ges {transform: scale(0.5);right: -80px;/* top: -80px; */}
}
@media (max-width: 680px) {

}
@media (max-width: 640px) {

}
@media (max-width: 600px) {
	.dpe-container .dpe { transform: scale(0.7);left: calc(50% - 200px);top: -30px; }
	.dpe-container .ges { position: relative;margin: 0;transform: scale(0.7);right: inherit;top: -50px;left: calc(50% - 175px); }
	.dpe-container-old { display: block; }
	.dpe-container-old .dpe, .dpe-container-old .ges { margin: 0 auto 40px auto; }
	.dpe-container-old .valeur-perf { float: none; }
}
@media (max-width: 480px) {

}