.progression-bar {
    width: 970px;
    height: 90px;
    display: flex;
    align-items: center;


    .pg-line {
        height: 3px;
        background-color: var(--color-lightgray);
        flex: 1;

        &.active {
            background-color: var(--color-rparts);
        }
    }

    .pg-container {
        position: relative;
        height: 30px;
        display: flex;
        flex-direction: column;
        justify-content: end;
        align-items: center;
    }

    .pg-text {
        position: absolute;
        bottom: -20px;
        text-wrap: nowrap;
        font-size: 10px;


        &.locked {
            color: var(--color-lightgray);

            &::before {
                width: 20px;
                height: 20px;
                position: absolute;
                content: '';
                left: -25px;
                top: -3px;
                background-image: url('../img/picto\ cadenas.svg');
            }
        }
        
        &.active {
            color: var(--color-rparts);
        }
    }

    .pg {
        margin: 0 -2px 5px -2px;
        height: 20px;
        width: 20px;
        background-repeat: no-repeat;

        &.active {
            margin: 0px -5px;
            height: 30px;
            width: 30px;
        }
    }

    .pg-1 {
        background-image: url('../img/numero\ progression\ gris-01.svg');

        &.active {
            background-image: url('../img/numero\ progression\ complet\ rparts-01.svg');
        }
    }

    .pg-2 {
        background-image: url('../img/numero\ progression\ gris-02.svg');

        &.active {
            background-image: url('../img/numero\ progression\ complet\ rparts-02.svg');
        }
    }

    .pg-3 {
        background-image: url('../img/numero\ progression\ gris-03.svg');

        &.active {
            background-image: url('../img/numero\ progression\ complet\ rparts-03.svg');
        }
    }

    .pg-4 {
        background-image: url('../img/numero\ progression\ gris-04.svg');

        &.active {
            background-image: url('../img/numero\ progression\ complet\ rparts-04.svg');
        }
    }

    .pg-5 {
        background-image: url('../img/numero\ progression\ gris-05.svg');

        &.active {
            background-image: url('../img/numero\ progression\ complet\ rparts-05.svg');
        }
    }

    .pg-6 {
        background-image: url('../img/numero\ progression\ gris-06.svg');

        &.active {
            background-image: url('../img/numero\ progression\ complet\ rparts-06.svg');
        }
    }

}