/* ====== DPE 2021 — version unique et clean ====== */

.dpe21x {
    /* ÉNERGIE A→G */
    /* A: vert soutenu (teinte officielle) */
    --E1: #00A651;
    /* B: vert moyen */
    --E2: #6CC04A;
    /* C: vert clair tirant léger jaune (pas jaune franc) */
    --E3: #B0D380;
    /* D: jaune vif */
    --E4: #FFD744;
    /* E: orange soutenu */
    --E5: #F7A21A;
    /* F: orange foncé */
    --E6: #F07C2A;
    /* G: rouge */
    --E7: #E53935;
    /* GES A→G (bleus) */
    --G1: #DDECF8;
    --G2: #C1DAF3;
    --G3: #9FC1E6;
    --G4: #7FA6D9;
    --G5: #638CCB;
    --G6: #466CB5;
    --G7: #2E3B7D;
}

/* Conteneur */
.dpe21x {
    --ring: #e5e7eb;
    --tip: 22px;
    font-family: inherit
}

.dpe21x-title {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 800
}

.dpe21x-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 16px
}

@media (max-width:900px) {
    .dpe21x-grid {
        grid-template-columns: 1fr
    }
}

/* Cartes */
.dpe21x .card {
    background: #fff;
    border: 1px solid var(--ring);
    border-radius: 12px;
    padding: 12px;
    overflow: hidden
}

    .dpe21x .card header {
        display: flex;
        justify-content: space-between;
        align-items: flex-end;
        margin-bottom: 8px
    }

    .dpe21x .card h4 {
        margin: 0;
        font-weight: 700
    }

    .dpe21x .card small {
        color: #64748b
    }

/* Layout interne (2 colonnes) */
.dpe21x .card-body {
    display: grid;
    gap: 0;
    align-items: center;
    position: relative
}

.dpe21x #card-energy .card-body {
    grid-template-columns: 160px 1fr
}

.dpe21x #card-ges .card-body {
    grid-template-columns: 1fr 160px
}

@media (max-width:640px) {
    .dpe21x #card-energy .card-body {
        grid-template-columns: 60px 1fr
    }

    .dpe21x #card-ges .card-body {
        grid-template-columns: 1fr 40px
    }
}

.dpe21x .side {
    position: relative;
    height: 100%
}

/* ====== Échelles A..G (communs) ====== */
.dpe21x .scale {
    --row: 34px;
    --gap: 8px;
    --active: 2;
    list-style: none;
    margin: 0;
    padding: 6px 4px;
    display: flex;
    flex-direction: column;
    gap: var(--gap)
}

    .dpe21x .scale li {
        position: relative;
        display: flex;
        align-items: center;
        height: var(--row);
        padding-left: 40px;
        color: #0f172a;
        font-weight: 800
    }

        .dpe21x .scale li.is-active {
            height: calc(var(--row)*var(--active))
        }

    .dpe21x .scale .lbl {
        position: absolute;
        left: 5px;
        width: 20px;
        text-align: center;
        z-index: 2
    }

    .dpe21x .scale .txt {
        position: relative;
        z-index: 2;
        font-weight: 700;
        left:-12px;

    }

/* ====== ÉNERGIE : chevrons ====== */
.energy .energy-bars li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--bar);
    border-radius: 8px 0 0 8px
}

.energy .energy-bars li::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 0;
    border-top: calc(var(--row)/2) solid transparent;
    border-bottom: calc(var(--row)/2) solid transparent;
    border-left: var(--tip) solid var(--bar)
}
/* couleurs */
.energy .energy-bars li:nth-child(1) {
    --bar: var(--E1);
}

.energy .energy-bars li:nth-child(2) {
    --bar: var(--E2);
}

.energy .energy-bars li:nth-child(3) {
    --bar: var(--E3);
}

.energy .energy-bars li:nth-child(4) {
    --bar: var(--E4);
}

.energy .energy-bars li:nth-child(5) {
    --bar: var(--E5);
}

.energy .energy-bars li:nth-child(6) {
    --bar: var(--E6);
}

.energy .energy-bars li:nth-child(7) {
    --bar: var(--E7);
}
/* longueurs visuelles */
.energy .energy-bars li:nth-child(1)::before {
    right: 70%
}

.energy .energy-bars li:nth-child(1)::after {
    right: calc(70.5% - var(--tip))
}

.energy .energy-bars li:nth-child(2)::before {
    right: 60%
}

.energy .energy-bars li:nth-child(2)::after {
    right: calc(60.5% - var(--tip))
}

.energy .energy-bars li:nth-child(3)::before {
    right: 50%
}

.energy .energy-bars li:nth-child(3)::after {
    right: calc(50.5% - var(--tip))
}

.energy .energy-bars li:nth-child(4)::before {
    right: 40%
}

.energy .energy-bars li:nth-child(4)::after {
    right: calc(40.5% - var(--tip))
}

.energy .energy-bars li:nth-child(5)::before {
    right: 30%
}

.energy .energy-bars li:nth-child(5)::after {
    right: calc(30.5% - var(--tip))
}

.energy .energy-bars li:nth-child(6)::before {
    right: 20%
}

.energy .energy-bars li:nth-child(6)::after {
    right: calc(20.5% - var(--tip))
}

.energy .energy-bars li:nth-child(7)::before {
    right: 10%
}

.energy .energy-bars li:nth-child(7)::after {
    right: calc(10.5% - var(--tip))
}

/* Cartouche valeurs à GAUCHE (toujours dans la colonne) */
.ep-stats {
    position: absolute;
    left: 0px;
    top: 50%;
    transform: translateY(-50%);
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    padding: 8px 12px;
    display: flex;
    gap: 2px;
    align-items: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.08);
    z-index: 2
}

.ep-stats .col:first-child
{
    border-right:solid 2px;
}

    .ep-stats .col {
        min-width: 68px;
        text-align: center
    }

    .ep-stats .n {
        font-weight: 800;
        font-size: 22px;
        line-height: 1
    }

    .ep-stats .u {
        font-size: 11px;
        color: #64748b;
        line-height: 1.05;
        margin-top: 4px
    }

/* ====== GES : pilules ====== */
.ges .ges-bars li::before {
    content: "";
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    background: var(--bar);
    border-radius: 0px 40px 40px 0px;
    width: 72%
}

.ges .ges-bars li:nth-child(1) {
    --bar: var(--G1);
}

    .ges .ges-bars li:nth-child(1)::before {
        width: 22%
    }

.ges .ges-bars li:nth-child(2) {
    --bar: var(--G2);
}

    .ges .ges-bars li:nth-child(2)::before {
        width: 32%
    }

.ges .ges-bars li:nth-child(3) {
    --bar: var(--G3);
}

    .ges .ges-bars li:nth-child(3)::before {
        width: 48%
    }

.ges .ges-bars li:nth-child(4) {
    --bar: var(--G4);
}

    .ges .ges-bars li:nth-child(4)::before {
        width: 60%
    }

.ges .ges-bars li:nth-child(5) {
    --bar: var(--G5);
}

    .ges .ges-bars li:nth-child(5)::before {
        width: 72%
    }

.ges .ges-bars li:nth-child(6) {
    --bar: var(--G6);
}

    .ges .ges-bars li:nth-child(6)::before {
        width: 86%
    }

.ges .ges-bars li:nth-child(7) {
    --bar: var(--G7);
}

    .ges .ges-bars li:nth-child(7)::before {
        width: 92%
    }

/* Bulle à DROITE (colonne droite) */
.ges-bubble {
    position: absolute;
    top: 50%;
    right: 12px;
    transform: translateY(-50%);
    background: #0b0b0b;
    color: #fff;
    border-radius: 12px;
    padding: 8px 12px;
    min-width: 120px;
    text-align: center;
    box-shadow: 0 8px 22px rgba(0,0,0,.28);
    z-index: 2
}

    .ges-bubble .big {
        font-weight: 800;
        font-size: 20px;
        line-height: 1;
        display: block
    }

    .ges-bubble .unit {
        font-size: 11px;
        opacity: .85;
        display: block
    }

    .ges-bubble .line {
        position: absolute;
        right: 100%;
        top: 50%;
        width: 100px;
        height: 2px;
        background: #0b0b0b;
        transform: translateY(-50%)
    }

@media (max-width:640px) {
    .ges-bubble .line {
        display: none
    }
}

/* Auto-fit des lignes (si débordement) */
.card .scale {
    --row: 34px;
    --gap: 8px;
    --active: 2
}

.card.compact .scale {
    --row: 28px;
    --gap: 6px;
    --active: 1.25
}

/* Tip height must follow the active row height */
.energy .energy-bars li.is-active::after {
    border-top: calc(var(--row) * var(--active) / 2) solid transparent;
    border-bottom: calc(var(--row) * var(--active) / 2) solid transparent;
}

/* Make the active band render above its neighbors */
.energy .energy-bars li {
    z-index: 0;
}

    .energy .energy-bars li.is-active {
        z-index: 1;
    }


.is-active .lbl
{
    font-size:28px;
}

@media (max-width:640px)
{
    .ep-stats
    {        
        display:block;
        left:-30px;
    }
}