/* Style général du tableau */
.gains-table {
	width: 95%;
	max-width: 800px;
	margin: 20px auto;
	border-collapse: collapse;
	font-family: Arial, sans-serif;
	box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
	border-radius: 8px;
	overflow: hidden;
}

/* En-tête du tableau */
.gains-table thead {
	background-color: #2c3e50;
	color: white;
}

.gains-table th {
	padding: 12px;
	text-align: center;
	font-weight: bold;
}

/* Corps du tableau */
.gains-table tbody tr {
	border-bottom: 1px solid #ddd;
}

.gains-table tbody tr:nth-child(even) {
	background-color: #f8f9fa;
}

.gains-table tbody tr:hover {
	background-color: #e9f7fe;
}

.gains-table td {
	padding: 5px 5px;
	text-align: right;
}

/* Style pour la dernière ligne (codes gagnants) */
.gains-table tbody tr:last-child {
	font-weight: bold;
	font-style: italic;
	
	background-color: #e3f2fd !important;
}

/* Style pour les nombres */
.nombre,
.euros {
	font-family: 'Courier New', monospace;
	    font-size: 12px;

}

.petit-rond-loto-bleu {
	width: 1rem;
	height: 1rem;
	background-color: #aed0ea;
	border-radius: 50%; /* Cela transforme le carré en rond */
	display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}
.petit-rond-loto-rouge {
	width: 1rem;
	height: 1rem;
	background-color: #ffbdbd;
	border-radius: 50%; /* Cela transforme le carré en rond */
	display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}



 /* Conteneur des boutons */
  .codesgagnants-group {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;       /* passe à la ligne si la largeur est limitée */
    align-items: center;
  }

  /* Apparence de chaque "bouton" */
  .codesgagnants {
    display: inline-block;
    background: #ffffff;          /* fond blanc */
    border: 2px solid #aed0ea;    /* contour bleu (tu peux changer la couleur) */
    /* color: #007bff; */
    padding: 6px 12px;
    border-radius: 9999px;          /* bords arrondis gauche & droite */
    font-family: "Courier New", monospace;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: default;
  }

  .jokerplus {
    display: inline-block;
    background: #ffffff;          /* fond blanc */
    border: 2px solid #59BA55;    /* contour bleu (tu peux changer la couleur) */
    /* color: #007bff; */
    padding: 6px 12px;
    border-radius: 9999px;          /* bords arrondis gauche & droite */
    font-family: "ARIAL", monospace;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: default;
  }


  .mymillion {
    display: inline-block;
    background: #ffffff;          /* fond blanc */
    border: 2px solid #000000;    /* contour bleu (tu peux changer la couleur) */
    /* color: #007bff; */
    padding: 6px 12px;
    border-radius: 9999px;          /* bords arrondis gauche & droite */
    font-family: "ARIAL", monospace;
    font-size: 12px;
    text-decoration: none;
    white-space: nowrap;
    box-sizing: border-box;
    cursor: default;
  }



.petit-etoile-eurom {
	background-image: url(../images/etoileeurom2.png); 
	background-size: cover; 
	width: 1.5rem;
	height: 1.5rem;
	border-radius: 50%; /* Cela transforme le carré en rond */
	display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}

.petit-rond-eurom-bleu {
	width: 1rem;
	height: 1rem;
	background-color: #021383;
	border-radius: 50%; /* Cela transforme le carré en rond */
	display: inline-block;
    vertical-align: middle;
    margin: 0 2px;
}





/* Responsive */
@media (max-width: 600px) {
	.gains-table th, .gains-table td {
		padding: 8px;
		font-size: 14px;
	}
}