.logo {
    position: relative;
    display: inline-block;
  }
  
  .logo img {
    animation: logoEntrance 2s ease-in-out forwards;
    transform-origin: center;
  }
  
  /* Animation principale du logo 
  @keyframes logoEntrance {
    0% {
      transform: scale(1) rotateY(0deg);
    }
    30% {
      transform: scale(1.3) rotateY(180deg);
    }
    60% {
      transform: scale(1.3) rotateY(360deg);
    }
    100% {
      transform: scale(1) rotateY(360deg);
    }
  }



  .logo::after {
    content: '';
    position: absolute;
    top: 50%;
    left: -10px;
    width: 4px;
    height: 4px;
    background: linear-gradient(45deg, #fff, #ffd700, #fff);
    border-radius: 50%;
    box-shadow: 
      0 0 6px #ffd700,
      0 0 12px #ffd700,
      0 0 18px #ffd700;
    opacity: 0;
    animation: sparkle 2s ease-in-out forwards;
    animation-delay: 1.2s;
  }


  @keyframes sparkle {
    0% {
      opacity: 0;
      left: -10px;
      transform: translateY(-50%) scale(0);
    }
    20% {
      opacity: 1;
      transform: translateY(-50%) scale(1.9);
    }
    80% {
      opacity: 1;
      left: calc(100% + 10px);
      transform: translateY(-50%) scale(1.9);
    }
    100% {
      opacity: 0;
      left: calc(100% + 20px);
      transform: translateY(-50%) scale(0);
    }
  } 
  */