.loading--box {
  margin: 0 auto;
  width:300px;
  height:400px;
  display:flex;
  justify-content:center;
  align-items:center;
  position:relative;
  flex-direction:column;
  transition: transform .2s;
}

/* Pour changer la taille au passage de la souris */
.loading--box:hover
{
 transform:scale(1.2);
}

.loading--box .percent
{
  width:200px;
  height:200px;
  position:relative;
}
.loading--box .percent svg
{
  width:200px;
  height:200px;
  position:relative;
}
.loading--box .percent svg circle
{
/*   width:200px;
  height:200px; */
  fill:none;
  /* stroke-width:8; */
  stroke:#050703;
  /* transform:translate(5px,5px); */
  stroke-dasharray:565;
  stroke-dashoffset:565;
  stroke-linecap:round;
}
.loading--box .percent svg circle:nth-child(1)
{
  stroke-dashoffset:0;
  stroke:#e94e54;
  stroke-width:7;
}
.loading--box .percent svg circle:nth-child(2)
{
  stroke-dashoffset:565;
  stroke:#ffdf43;
  stroke-width:8;
}
.loading--box .percent .num
{
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;
  color:#050703;
}
.loading--box .percent .num h2
{
  font-size:48px;
}
.loading--box .percent .num h2 span
{
  font-size:24px;
}
.loading--box .text
{
  padding: 10px;
  color:#999;
  font-weight:700;
  letter-spacing:1px;
}