:root{
  --couleurFond : #345682;
  --couleurTexte : #f0b442;

}

body{
  background-color:var(--couleurFond );
}

.carousel {
    margin: 0 auto;
    padding: 20px 0;
    max-width: 100%;
    overflow: hidden;
    display: flex;
  }

  .card {
    width: 100%;
    background-color: var(--couleurTexte);
    color: white;
    padding: 20px;
    justify-content: center;
    align-items: center;
    height:320px;
  }



  .img_jeu {
    background-size: cover;
    width: 100%;
    height: 200px;
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    -khtml-border-radius: 10px;
    border-radius: 10px;
  }

  .img_jeu img{
    max-height: 200px;;
  }

.go-container p{
  width: fit-content; /* Le paragraphe prend la largeur de son contenu */
  margin-left: auto;
  margin-right: auto;


}
  .Liste_Nom {
    color : var(--couleurFond);
    font-size: 18px;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    margin-top: 10px;
  }



.go-button  {
  background-color: var(--couleurFond ); /* Couleur de fond bleue */
  color: white; /* Texte blanc */
  padding: 12px 24px; /* Espacement intérieur */
  border: none; /* Supprimer la bordure par défaut */
  border-radius: 5px; /* Bords arrondis */
  cursor: pointer; /* Curseur de la souris au survol */
  font-size: 14px; /* Taille de la police */
  transition: background-color 0.3s ease; /* Animation de la couleur de fond */
}

.go-button :hover {
  background-color: #0056b3; /* Couleur de fond plus foncée au survol */
}

#Fiche_Numero{
  display: block;
  background-color:rgb(106, 179, 240);
  padding:10px; 
  font-weight: bold;
  font-size: large;
  color:white; 
  margin-bottom: 10px;
}

.Fiche_Titre{
  font-weight: bold;
}

.Fiche_Texte{
  display: block;
  max-width:50%; 
  text-align:justify;
}

.Fiche_Image{
  position:absolute;
  top:70px;
  right:20px;
  max-width:40%;
  max-height: 250px;
  margin:5px;
  -moz-border-radius: 10px;
  -webkit-border-radius: 10px;
  -khtml-border-radius: 10px;
  border-radius: 10px; 
}

.form-control-inline { 
  min-width: 0; 
  width: auto; 
  display: inline; 
} 





  .carousel {
    /* ... */
    > * {
      flex: 0 0 100%;
    }
  }

  /* Groupez les cartes pour une meilleure structure. */
  .group {
    display: flex;
    gap: 20px;
    /* Ajoutez un padding à droite pour créer un espace entre la dernière et la première carte. */
    padding-right: 20px;
  }

  .group {
    /* ... */
    will-change: transform; /* Nous devons être sympas avec le navigateur - lui indiquer ce que nous allons animer. */
    animation: scrolling 60s linear infinite;
  }

  @keyframes scrolling {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(-100%);
    }
  }

  .carousel {
    /* ... */
    &:hover .group {
      animation-play-state: paused;
    }

    &:focus .group {
        animation-play-state: paused;
      }
 
  }