.shade{
    opacity: 0.5;
  }

  div.circle.medium.shade {
    display: flex;
    justify-content: center;
    width: fit-content;
    height: fit-content;
    padding: 1em;
    align-items: center;
    box-shadow: 0 0 50px var(--shadow-pictogramme);
    border: 3px solid #9ccc65;
    background-color:#6d973d;
    border-radius: 50%;
    animation: ripple 4s infinite;
  }

  /*-------------------------------------------------------VARIABLES POUR LE THEMING*/
  
 /* ------------------------ LOGO TOURNANT  ----------------------- */
  .animation-logo {
    padding: 2rem;
    animation: fullRotation 2s;
  }

  .rotate{
    animation: semiLeftRotation 3s infinite;
  }



  @keyframes spin { 
    100% { 
      transform: rotateZ(360deg);
    }
  }

  @keyframes fullRotation {
      0% {
        transform: rotate(0deg);
      }
      5% {
        transform: rotate(18deg);
      }
      10% {
          transform: rotate(36deg);
        }
      15% {
        transform: rotate(54deg);
      }
      20% {
        transform: rotate(72deg);
      }
      25% {
        transform: rotate(90deg);
      }
      30% {
        transform: rotate(108deg);
      }
      35% {
        transform: rotate(126deg);
      }
      40% {
        transform: rotate(144deg);
      }
      45% {
        transform: rotate(162deg);
      }
      50% {
        transform: rotate(180deg);
      }
      55% {
        transform: rotate(198deg);
      }
      60% {
        transform: rotate(216deg);
      }
      65% {
        transform: rotate(234deg);
      }
      70% {
        transform: rotate(252deg);
      }
      75% {
        transform: rotate(270deg);
      }
      80% {
        transform: rotate(288deg);
      }
      85% {
        transform: rotate(306deg);
      }
      90% {
        transform: rotate(324deg);
      }
      95% {
        transform: rotate(342deg);
      }
      100% {
        transform: rotate(360deg);
      }
  }

  @keyframes semiLeftRotation {
    0% {
      transform: rotate(0deg);
    }
    5% {
      transform: rotate(-9deg);
    }
    10% {
        transform: rotate(-18deg);
      }
    15% {
      transform: rotate(-27deg);
    }
    20% {
      transform: rotate(-36deg);
    }
    25% {
      transform: rotate(-45deg);
    }
    30% {
      transform: rotate(-54deg);
    }
    35% {
      transform: rotate(-63deg);
    }
    40% {
      transform: rotate(-72deg);
    }
    45% {
      transform: rotate(-81deg);
    }
    50% {
      transform: rotate(-90deg);
    }
    55% {
      transform: rotate(-81deg);
    }
    60% {
      transform: rotate(-72deg);
    }
    65% {
      transform: rotate(-63deg);
    }
    70% {
      transform: rotate(-54deg);
    }
    75% {
      transform: rotate(-45deg);
    }
    80% {
      transform: rotate(-36deg);
    }
    85% {
      transform: rotate(-27deg);
    }
    90% {
      transform: rotate(-18deg);
    }
    95% {
      transform: rotate(-9deg);
    }
    100% {
      transform: rotate(0deg);
    }
}

  @keyframes ripple{
      0%{
        transform: scale(0.5);
      }

      /* 25%{
        transform: scale(0.8);
      } */
      
      50%{
        transform: scale(1);
      }

      /* 75%{
        transform: scale(0.8);
      } */
      
      100%{
        transform: scale(0.5);
      }
  }