.dpe-container{
display:flex;
gap:30px;
margin:20px 0;
font-family:Arial, Helvetica, sans-serif;
flex-direction: row; justify-content: space-around
}

.dpe-energy,
.dpe-co2{
display:flex;
flex-direction:column;
gap:6px;
	width: 40%
}

.bar{
display:flex;
align-items:center;
gap:10px;
}

/* barre */

.bar-color{
position:relative;
height:32px;
border-radius:4px 0 0 4px;
}

/* triangle */

.bar-color::after{
content:"";
position:absolute;
right:-18px;
top:0;
width:0;
height:0;
border-top:16px solid transparent;
border-bottom:16px solid transparent;
border-left:18px solid currentColor;
}

/* lettre dans la barre */

.bar-color .label{
position:absolute;
left:8px;
top:50%;
transform:translateY(-50%);
color:#fff;
font-weight:bold;
font-size:16px;
}

/* valeur */

.value{ font-weight:bold; font-size:12px; z-index: 1; background: white; padding: 3px; border-radius: 4px; position: absolute; right: 0}

/* barre active */

.bar.active {position: relative}