.compteur {
    --compteur-color: #ff3217;
    --compteur-segment-off: #220805;
    --compteur-frame: #252525;
    display: inline-block;
    position: relative;
    box-sizing: border-box;
    width: min(100%, 36rem);
    padding: clamp(1rem, 3vw, 1.65rem);
    border: clamp(0.35rem, 1vw, 0.7rem) solid var(--compteur-frame);
    border-radius: 0.35rem;
    background: linear-gradient(180deg, #5b5b5b 0, #171717 12%, #050505 88%, #333 100%);
    box-shadow: 0 0.5rem 1rem rgb(0 0 0 / 40%), inset 0 0 0 0.15rem #050505;
}

.compteur__display {
    display: flex;
    position: relative;
    top: 50%;
    transform: translateY(-55%);
    gap: clamp(0.2rem, 1vw, 0.65rem);
    padding: clamp(0.4rem, 1vw, 0.75rem);
    background: #050606;
    box-shadow: inset 0 0.25rem 0.8rem #000;
}

.compteur__digit {
    position: relative;
    display: block;
    flex: 1 1 0;
    min-width: 0;
    aspect-ratio: 0.58;
    background: #070b08;
    box-shadow: inset 0 0 0 1px #111d13;
}

.compteur__segment {
    position: absolute;
    display: block;
    background: var(--compteur-segment-off);
    opacity: 0.55;
}

.compteur__segment--active {
    background: var(--compteur-color);
    opacity: 1;
    box-shadow: 0 0 0.3rem var(--compteur-color), 0 0 0.7rem var(--compteur-color);
}

.compteur__segment--a,
.compteur__segment--d,
.compteur__segment--g {
    left: 17%;
    width: 66%;
    height: 10%;
    clip-path: polygon(8% 0, 92% 0, 100% 50%, 92% 100%, 8% 100%, 0 50%);
}

.compteur__segment--a {
    top: 5%;
}

.compteur__segment--g {
    top: 45%;
}

.compteur__segment--d {
    bottom: 5%;
}

.compteur__segment--b,
.compteur__segment--c,
.compteur__segment--e,
.compteur__segment--f {
    width: 12%;
    height: 36%;
    clip-path: polygon(50% 0, 100% 9%, 100% 91%, 50% 100%, 0 91%, 0 9%);
}

.compteur__segment--b,
.compteur__segment--c {
    right: 7%;
}

.compteur__segment--e,
.compteur__segment--f {
    left: 7%;
}

.compteur__segment--b,
.compteur__segment--f {
    top: 9%;
}

.compteur__segment--c,
.compteur__segment--e {
    bottom: 9%;
}

.compteur__bolt {
    position: absolute;
    z-index: 1;
    width: clamp(0.45rem, 1.5vw, 0.8rem);
    aspect-ratio: 1;
    border-radius: 50%;
    background: radial-gradient(circle at 35% 35%, #fff, #929292 35%, #2d2d2d 68%, #d8d8d8 72%);
    box-shadow: 0 0 0 1px #0c0c0c;
}

.compteur__bolt--top-left,
.compteur__bolt--top-right {
    top: 0.2rem;
}

.compteur__bolt--bottom-left,
.compteur__bolt--bottom-right {
    bottom: 0.2rem;
}

.compteur__bolt--top-left,
.compteur__bolt--bottom-left {
    left: 0.2rem;
}

.compteur__bolt--top-right,
.compteur__bolt--bottom-right {
    right: 0.2rem;
}