/*@keyframes variant {
  0% { transform: translateX(0); }
  25% { transform: translateX(-10px); }
  50% { transform: translateX(0px); }
  75% { transform: translateX(-5px); }
  100% { transform: translateX(0); }
}*/

.stability-bar-container {
    position: relative;
    width: 100%;
    height: 10px;
    border-radius: 5px;
    overflow: hidden;
    
  }
  
  .stability-background {
    position: absolute;
    width: 100%;
    height: 100%;
    background: #e0e0e0;
    border-radius: 5px;
  }

  .stability-bar {
    position: absolute;
    height: 100%;
    width: 0%;
    margin-left: -5px;
    transition: width 1.5s ease-in-out, background 0.5s ease-in-out;
  }

.stability-bar.low { 
  background: #e63946; 
  animation: glitch-effect 0.2s infinite alternate ease-in-out;
}

.stability-bar.medium { 
  background: #f4a261;
}

.stability-bar.high { 
  background: #2a9d6f; 
}

/* Ajout d’un effet glitch pour les barres de stabilité basse */
@keyframes glitch-effect {
  0% { transform: translateX(0); filter: brightness(1); }
  50% { transform: translateX(2px); filter: brightness(1.2); }
  100% { transform: translateX(-2px); filter: brightness(0.8); }
}