.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:#000;
    /* 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:var(--clr2);
    stroke-width:7;
  }
  .loading--box .percent svg circle:nth-child(2)
  {
    stroke-dashoffset:565;
    stroke:var(--clr0);
    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:#111;
  }
  .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;
  }