@charset "utf-8";
/***********************************/
/**** Graphiques DPE / GES 2022 ****/
/********* par Roques Yoann ********/
/***********************************/

/***********************************/
/****** FEUILLE DE STYLE CSS *******/
/***********************************/

body {
    font-family: sans-serif;
}
/* DPE */
.dpe_container {
	width: 100%;
	max-width: 25rem;
    font-family: sans-serif;
    line-height: initial;
}
.dpe_container .toptext,
.dpe_container .bottomtext {
    font-size: 70%;
    font-weight: 600;
}
.dpe_container .toptext {
	color: #54c989;
}
.dpe_container .bottomtext {
	color: #ff0f0f;
}
.dpe_container > div {
    display: flex;
    margin-bottom: 1%;
    margin-top: 1%;
}
.dpe_container .infos_conso_dpe {
	width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.dpe_container .infos_conso_dpeges {
	width: 20%;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
}
.dpe_container .letter_conso {
	width: 64%;
    color: white;
    font-weight: bold;
    font-size: 180%;
    padding: 1% 3% 0.5% 3%;
	position: relative;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
    text-transform: uppercase;
}
.dpe_container .letter_a {
	background: #00a06c;
	width: 14%;
}
.dpe_container .letter_b {
	background: #4fb154;
	width: 20.66%;
}
.dpe_container .letter_c {
	background: #a4cc74;
	width: 27.32%;
}
.dpe_container .letter_d {
	background: #f2e71b;
	width: 33.98%;
}
.dpe_container .letter_e {
	background: #f0b418;
	width: 40.64%;
}
.dpe_container .letter_f {
	background: #eb8335;
	width: 47.30%;
}
.dpe_container .letter_g {
	background: #d71d20;
	width: 54%;
}
	
/* DPE selectionné */
.dpe_container .this_next_DPE {
	
}
.dpe_container .this_next_DPE .text_conso,
.dpe_container .this_next_DPE .text_energie,
.dpe_container .this_next_DPE .text_emiss {
    font-size: 55%;
    text-align: center;
    display: block;
    font-weight: 600;
}
.dpe_container .this_next_DPE .text_energie {
    color: grey;
}
	
.dpe_container .this_next_DPE + div{
	position: relative;
}
	
.dpe_container .this_next_DPE + div .infos_conso_dpe,
.dpe_container .this_next_DPE + div .infos_conso_dpeges,
.dpe_container .this_next_DPE + div .letter_conso {
    border: solid 2px black;
	border-right: none;
    box-sizing: content-box;
	position: relative;
}
.dpe_container .this_next_DPE + div .infos_conso_dpeges,
.dpe_container .this_next_DPE + div .letter_conso {
	border-left: none;
}
.dpe_container .this_next_DPE + div .infos_conso_dpeges::before {
    content: '';
    background: black;
    position: absolute;
    left: 0;
    top: 10%;
    border-radius: 50%;
    height: 80%;
    width: 2px;
}
.dpe_container .this_next_DPE + div .letter_conso {
    font-size: 300%;
	text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
}
.dpe_container .this_next_DPE + div .number_kwh,
.dpe_container .this_next_DPE + div .number_kgco2 {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}
.dpe_container .this_next_DPE + div .text_kwh,
.dpe_container .this_next_DPE + div .text_kgco2 {
    font-size: 70%;
    text-align: center;
}
.dpe_container .this_next_DPE + div .infos_conso_dpe,
.dpe_container .this_next_DPE + div .infos_conso_dpeges {
    justify-content: center;
}
.dpe_container .this_next_DPE + div .infos_conso_dpe {
    border-radius: 7px 0 0 7px;
}
.dpe_container .this_next_DPE + div::before {
    content: '';
    top: 0;
    left: 40%;
    background: black;
    width: 90%;
    height: 100%;
	position: absolute;
    clip-path: polygon(0% 0%, 90% 0%, 100% 50%, 90% 100%, 0% 100%);
}
.dpe_container .this_next_DPE + div.dpe_a::before {
    width: 21%;
}
.dpe_container .this_next_DPE + div.dpe_b::before {
    width: 27.75%;
}
.dpe_container .this_next_DPE + div.dpe_c::before {
    width: 34.5%;
}
.dpe_container .this_next_DPE + div.dpe_d::before {
    width: 41%;
}
.dpe_container .this_next_DPE + div.dpe_e::before {
    width: 47.75%;
}
.dpe_container .this_next_DPE + div.dpe_f::before {
    width: 54.5%;
}
.dpe_container .this_next_DPE + div.dpe_g::before {
    width: 60.75%;
}
	
/* GES */
.ges_section {
    border: solid 2px #a6dcf7;
    padding: 2% 4%;
    border-radius: 4%;
    width: max-content;
    line-height: initial;
}
.ges_section > h3 {
	margin: 0;
}
.ges_container {
	width: 100%;
	max-width: 25rem;
    font-family: sans-serif;
}
.ges_container .toptext,
.ges_container .bottomtext {
    font-size: 70%;
    font-weight: 600;
}
.ges_container .toptext {
	color: #a0c4e6;
}
.ges_container .bottomtext {
	color: #1a1a1a;
}
.ges_container > div {
    display: flex;
    margin-bottom: 1%;
    margin-top: 1%;
}
.ges_container .ges_line {
    background: black;
    height: 3px;
    width: 65%;
    display: block;
    margin-left: 15%;
}
.ges_container .infos_conso_dpe {
    width: 7%;
    display: flex;
    align-items: center;
    align-content: space-between;
    flex-wrap: nowrap;
}
.ges_container .infos_conso_dpeges {
    width: 31%;
    text-align: right;
    display: flex;
    align-items: center;
}
.ges_container .letter_conso {
	width: 64%;
    color: white;
    font-weight: bold;
    font-size: 143%;
    padding: 1% 3% 0.5% 2%;
	position: relative;
    border-radius: 0 2rem 2rem 0;
    text-transform: uppercase;
}
.ges_container .letter_a {
	background: #a4dbf8;
	width: 14%;
}
.ges_container .letter_b {
	background: #8cb4d3;
	width: 20.66%;
}
.ges_container .letter_c {
	background: #7692b2;
	width: 27.32%;
}
.ges_container .letter_d {
	background: #5f6e8e;
	width: 33.98%;
}
.ges_container .letter_e {
	background: #4d5170;
	width: 40.64%;
}
.ges_container .letter_f {
	background: #393652;
	width: 47.30%;
}
.ges_container .letter_g {
	background: #271a35;
	width: 54%;
}
	
/* GES selectionné */
.ges_container .this_next_GES {
	position: relative;
}
	
.ges_container .this_next_GES .letter_conso {
    border: solid 2px black;
    box-sizing: content-box;
	position: relative;
}
.ges_container .this_next_GES .letter_conso {
    font-size: 270%;
	text-shadow: rgb(0, 0, 0) 2px 0px 0px, rgb(0, 0, 0) 1.75517px 0.958851px 0px, rgb(0, 0, 0) 1.0806px 1.68294px 0px, rgb(0, 0, 0) 0.141474px 1.99499px 0px, rgb(0, 0, 0) -0.832294px 1.81859px 0px, rgb(0, 0, 0) -1.60229px 1.19694px 0px, rgb(0, 0, 0) -1.97998px 0.28224px 0px, rgb(0, 0, 0) -1.87291px -0.701566px 0px, rgb(0, 0, 0) -1.30729px -1.5136px 0px, rgb(0, 0, 0) -0.421592px -1.95506px 0px, rgb(0, 0, 0) 0.567324px -1.91785px 0px, rgb(0, 0, 0) 1.41734px -1.41108px 0px, rgb(0, 0, 0) 1.92034px -0.558831px 0px;
}
.ges_container .this_next_GES .number_kwh,
.ges_container .this_next_GES .number_kgco2 {
    font-size: 200%;
    font-weight: bold;
    text-align: center;
}
.ges_container .this_next_GES .text_kwh,
.ges_container .this_next_GES .text_kgco2 {
    font-size: 70%;
    text-align: center;
}
.ges_container .this_next_GES .infos_conso_dpe,
.ges_container .this_next_GES .infos_conso_dpeges {
    justify-content: center;
}

.desktop {
		display: inherit;
}
.mobile {
		display: none !important;
}
/****  CSS pour les smartphones ****/ 
@media (max-width: 915px) {

	.desktop {
		display: none !important;
	}
	.mobile {
		display: inherit;
	}
	
	.ges_section {
		width: 100%;
	}
	
}
/****  CSS pour l'impression ****/ 
@media print {
	body {
		background: transparent !important;
	}
	form {
		display: none !important;
	}
}