.progression-widget {
    position: absolute;
    bottom: 0.5rem;
    left: var(--padding-layout);
    border-radius: min(1rem, 0.7vw);
    border: 1px solid #585858;
    background: #414141;
    min-width: 25vw;
    display: grid;
    grid-template-columns: 3fr 2fr;

    &__steps {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        padding: var(--space-s-y) var(--space-sm-x) var(--space-s-y);
        border-right: 1px solid #585858;
        row-gap: var(--space-s-y);
    }

    &__list {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        column-gap: clamp(1rem, 2vw, 2rem);
        row-gap: clamp(0.5rem, 1vw, 1rem);
        margin-bottom: 0.5rem;
    }

    &__tool {
        font-size: var(--font-size-m);
        border-radius: 100%;
        border: 1px solid #f3f3f3;
        opacity: 0.3;
        aspect-ratio: 1 / 1;
        display: flex;
        align-items: center;
        justify-content: center;
        &--validated {
            opacity: 1;
            background-color: var(--color-brand);
            border: 0px;
        }
    }

    &__confidence {
        padding: var(--space-s-y) var(--space-s-x) var(--space-s-y)
            var(--space-s-x);
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        row-gap: 0.6rem;
        align-items: center;
    }

    &__jauge {
        max-width: 8vw;
        @media (max-width: 1024px) {
            max_width: 6vw;
        }
    }

    &__details {
        text-transform: uppercase;
        color: var(--color-text);
        border-radius: min(0.4375rem, 0.28vw);
        border: 1px solid #a6a6a6;
        padding: var(--space-xxs-y) var(--space-s-x);
        font-size: var(--font-size-s);
        transition: border-color 0.3s ease, letter-spacing 0.3s ease;
        &:hover {
            border: 1px solid white;
            letter-spacing: 0.02em;
        }
    }
}