@import url('https://fonts.googleapis.com/css2?family=Albert%20Sans:wght@400;700&display=swap');

body {
  background-image: url('../img/imageback.png');
  background-size: 100%; /* Ajustement pour éviter la déformation */
  font-family: 'Albert Sans', sans-serif;
}

/* Texte de progression */
.progress-text {
  font-size: 18px;
  position: absolute;
  color: white;
  text-align: left;
  margin-left: 4.3%;
  margin-top : 49%;
}

/* Conteneur des barres de chargement */
.progress-container {
  width: 91%;
  height: 2.8rem;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: 5%; /* Ajuste selon besoin */
  background-color: rgba(33, 33, 40, 1); /* Léger fond pour bien voir la barre */
}

/* Barre de progression */
.progress-bar {
  height: 100%;
  border-radius: 16px;
  background: linear-gradient(to right, rgb(205, 155, 82), rgb(164, 105, 39));
  transition: width 0.4s ease;
}

/* Conteneur Steam avec l’avatar */
.steam {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 10px;
  width: 370px;
  height: 50px;
  border-radius: 20px;
  padding: 5px;
  background-color: rgba(0, 0, 0, 0); /* Ajout d’un fond pour visibilité */

  /* Centre parfaitement au milieu de l'écran */
  position: absolute;
  left: 49.8%;
  top: 62.4%;
  transform: translate(-50%, -50%);
}

.username-text {
  flex: 0.85;
  font-family: 'Albert Sans', sans-serif;
  font-weight: 500;
  font-size: large;
  align-items: center;
  text-align: center;
  justify-content: center;
} 

/* Image de l’avatar */
.avatar-image {
  width: 40px; /* Taille agrandie */
  height: 40px;
  border-radius: 50%; /* Cercle parfait */
  object-fit: cover; /* Empêche la déformation */
}