body { 
  /* background: url(images/fond_coming_soon.jpg) no-repeat center center fixed;  */
  background: url(images/fond_accueil.jpg) no-repeat center center fixed; 
  -webkit-background-size: cover;
  -moz-background-size: cover;
  -o-background-size: cover;
  background-size: cover;
  
	display: flex;
	justify-content: center;
	align-items: center;
	height: 100vh;
	margin: 0;
	font-family: Arial, sans-serif;
}
.player {
    text-align: center;
    margin: 10px;
}

.stats_joueur {
    font-size: 10px; /* Taille plus petite pour les stats */
    color: #fff; /* Couleur du texte */
    line-height: 1.4; /* Espacement entre les lignes */
}

.games-played, .win-rate {
    font-weight: normal; /* Style de texte normal */
}
.boutondemarrer {
	position: absolute;
    border: none;
    background: url('images/btn_demarrer.png') no-repeat top left;
    padding: 2px 8px;
	width: 320px;
	height: 84px;
	top: 580px;
	left: 800px;
}

.boutonjoueurs {
	position: absolute;
    border: none;
    background: url('images/btn_joueurs.png') no-repeat top left;
    padding: 2px 8px;
	width: 180px;
	height: 78px;
	top: 760px;
	left: 870px;
}

.boutonstatistiques {
	position: absolute;
    border: none;
    background: url('images/btn_statistiques.png') no-repeat top left;
    padding: 2px 8px;
	width: 180px;
	height: 78px;
	top: 680px;
	left: 870px;
}
.boutonannuler {
	position: absolute;
    border: none;
    background: url('images/btn_annuler.png') no-repeat top left;
    padding: 2px 8px;
	width: 180px;
	height: 78px;
	top: 680px;
	left: 870px;
}

.boutonaccueil {
	position: absolute;
    border: none;
    background: url('images/btn_accueil.png') no-repeat top left;
    padding: 2px 8px;
	width: 180px;
	height: 78px;
	top: 680px;
	left: 870px;
}

.container {
	display: flex;
	justify-content: center;
	align-items: center;
	width: auto;
}
.column {
	flex: 1;
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
}
.column img {
	border-radius: 15px;
	border: 3px solid gray;
	margin: 5px;
	width: 130px;
	height: 130px;
}
.column.middle {
	flex: 0 0 100px;
	justify-content: center;
	align-items: center;
	text-align: center;
	font-size: 2em;
	font-weight: bold;
	height: 100%;
	display: flex;
}
.image-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 10px;
    max-height: 614px; /* Fixez une hauteur spécifique */
    overflow-y: auto; /* Activez le défilement vertical */
    overflow-x: hidden; /* Empêchez le défilement horizontal */
    padding: 10px; /* Ajoutez un peu d'espace pour le contenu */
    box-sizing: border-box; /* Incluez les bordures dans la hauteur totale */
	scrollbar-color: red orange;
	scrollbar-width: 50px;
}
 
/* .image-container { */
	/* display: grid; */
	/* grid-template-columns: repeat(3, 1fr); */
	/* gap: 10px; */
/* } */
.image-container-xl img {
	width: 300px;
	height: 300px;
	border-radius: 20%;
	object-fit: cover;
}
.image-container img {
	width: 130px;
	height: 130px;
	border-radius: 20%;
	border: 3px solid grey;
	object-fit: cover;
}
.image-row {
	display: flex;
	justify-content: center;
			
}
.image-container img.disabled {
	cursor: not-allowed;
	opacity: 0.5;
}
.image-container img.selected {
	border: 5px solid red;
}
/* Largeur de la barre verticale */
.image-container::-webkit-scrollbar {
    width: 80px; /* Largeur pour la barre verticale */
}

/* Largeur de la barre horizontale */
.image-container::-webkit-scrollbar-horizontal {
    height: 80px; /* Hauteur pour la barre horizontale */
}

/* Style du "track" (la zone sous-jacente) */
.image-container::-webkit-scrollbar-track {
    background: #f0f0f0; /* Couleur de l'arrière-plan */
}

/* Style du "thumb" (la partie mobile) */
.image-container::-webkit-scrollbar-thumb {
    background: #888; /* Couleur du curseur */
    border-radius: 10px; /* Arrondi pour le curseur */
}

/* Style au survol */
.image-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}		
.vs-text {
	font-family: 'Press Start 2P', cursive;
	color: red;
}
.vs-text-xl {
	font-family: 'Press Start 2P', cursive;
	font-size: 80px;
	color: red;
}
.selected {
	border: 5px solid red;
}
.stats {
	text-align: center;
	color: white;
	font-size: 60px;
	font-weight: 900;
}
.stats-pct {
	text-align: center;
	color: white;
	font-size: 38px;
	font-weight: 300;
	padding-top: -40px;
}

.podium {
	display: flex;
	align-items: flex-end;
}
.podium-step {
	width: 150px;
	text-align: center;
	margin: 0 10px;
	position: relative;
}
.podium-step img {
	width: 100px;
	height: 100px;
	border-radius: 20%;
	border: 3px solid #000;
	margin-bottom: 10px;
	object-fit: cover;
}
.podium-step:nth-child(1) {
	height: 300px;
	background-color: gold;
}
.podium-step:nth-child(2) {
	height: 250px;
	background-color: silver;
}
.podium-step:nth-child(3) {
	height: 200px;
	background-color: #cd7f32; /* Bronze color */
}
.podium-step .wins {
	position: absolute;
	bottom: 10px;
	left: 0;
	right: 0;
	font-size: 18px;
	font-weight: bold;
}

.classement {
	position: absolute;
	top: 600px;
	left: 400px;
	color: white;
	font-size: 28px;
}

.photo-row {
	display: flex;
	justify-content: space-between;
}
.photo-item {
	text-align: center;
	margin: 0 10px;
}
.photo-item img {
	width: 80px;
	height: 80px;
	object-fit: cover;
	border-radius: 50%;
}
.photo-item p {
	margin: 5px 0 0 0;
	line-height: 1.2;
}

.victoire 
{
            color: green;
}
.defaite {
	color: red;
}
.partie {
	margin-bottom: 10px;
}
.containerstats 
{
	background-color: #f5f5f5; /* Blanc cassé */
	padding: 20px;
	font-size: 20px;
	border-radius: 10px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
	width: 100%;
	max-width: 600px;
	text-align: center;
}

.plus-victoires {
	background-color: #d4edda;
	border-left: 5px solid green;
}

.plus-defaites {
	background-color: #f8d7da;
	border-left: 5px solid red;
}