.loading--box--ctn {
  height: 100%;
  text-align: center;
  margin: 0 auto;
  text-align: center;
  display: flex;
  align-content: center;
  justify-content: center;
  align-items: center;
  flex-direction: column; 
}

.loading--box {
  margin: 0 auto;
  width:300px;
  height:300px;
  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:#000;
  /* transform:translate(5px,5px); */
  stroke-dasharray:565;
  stroke-dashoffset:565;
  stroke-linecap:round;   /* Rondeur du trait */

  
}
.loading--box .percent svg circle:nth-child(1)
{
  stroke-dashoffset:0;
  stroke:var(--clr--0); /* Couleur de fond */
  stroke-width:12;
}
.loading--box .percent svg circle:nth-child(2)
{
  stroke-dashoffset:565;
  stroke:var(--clr--F); /* Couleur en mouvement */
  stroke-width:6;
}
.loading--box .percent .num
{
  top:0;
  left:0;
  width:100%;
  height:100%;
  display:flex;
  justify-content:center;
  align-items:center;
  position:absolute;

}
/* .loading--box .percent .num h2
{
  font-size:48px;
}
.loading--box .percent .num h2 span
{
} */
.loading--box .text
{
  font-size:14px;
  padding: 10px;
  font-weight:600;
  letter-spacing:2px;
  color:var(--clr--F);    /* Couleur du texte */
}