.result-circle{--size: 100px;--diametre: 80px;--stroke-width: 2px;--circumference: calc(pi * var(--diametre));display:-ms-flexbox;display:flex;position:relative;-ms-flex-align:center;align-items:center;-ms-flex-pack:center;justify-content:center;width:var(--size);height:var(--size);margin:auto;background:transparent;color:var(--text-color);font-size:1.5em}.result-circle svg{position:absolute;top:0;left:0;transform:rotate(-90deg)}.result-circle circle{stroke-width:var(--stroke-width);stroke:var(--circle-color);fill:none}.result-circle .progress{stroke-linecap:round;stroke-dasharray:var(--circumference);stroke-dashoffset:calc(var(--circumference) - (var(--circumference) * var(--percentage)) / 100);r:calc((var(--diametre) - var(--stroke-width)) / 2);cx:50%;cy:50%}.result-circle .dot{fill:var(--circle-color);r:4}.result-text{margin:0;font-size:var(--text-size);z-index:1}