* {
	font-family: Calibri, sans-serif;
}

.table-container {
    display: flex;
    justify-content: center;   /* Centre les deux tableaux horizontalement */
    align-items: flex-start;
	gap: 10px;                 /* Espace entre les deux tableaux */
    margin: 20px auto;
}

.table-container table {
    border: 1px solid #ccc;
    border-collapse: collapse;
    width: auto ;              /* Taille naturelle */
    max-width: 100%;
}

.logout {
	right: 0;
	position: absolute;
	top: 0;
	background-color: grey;
	opacity: 0.5;
	cursor: pointer;
}

.pannel_left {
	
	width: 70%;
	float:left;
 /* border-width:3px; */
 /* border-style:solid; */
 /* border-color:red; */
}
.pannel_right {
	
	width: 30%;
	float:right;
 /* border-width:3px; */
 /* border-style:solid; */
 /* border-color:red; */
}

.fieldsetContainer {
    width : 850px;
	margin-left:auto;
	margin-right:auto;
	margin-top:0px;
	position:relative;
	
} 

.fieldsetContainer fieldset.center {
	width : 75%;
	float : center;
	
}
.fieldsetContainer fieldset.left {
	width : 47%;
	float : left;
}
.fieldsetContainer fieldset.right {
	width : 47%;
	float : right;
}
.fieldsetContainer legend {
    color: #eeab69;
    font-size: 12px;
    text-align: center;
    padding: 0;
}
.fieldsetContainer fieldset {
	
    background-color: #ffffff;
    margin: 0 auto 15px auto;
    padding: 10px;
    border: 2px solid #eeab69;
 
    -moz-border-radius: 10px;
    -webkit-border-radius: 10px;
    border-radius: 10px;
 
    background-image: -moz-linear-gradient(top, #ffffff, #f4f4f4);
    background-image: -webkit-gradient(linear, left top, left bottom, from(#ffffff), to(#f4f4f4));
    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#f4f4f4);
    -ms-filter: "progid:DXImageTransform.Microsoft.gradient(startColorstr=#ffffff,endColorstr=#f4f4f4)";
}
.fieldsetContainer .separ {
    clear : both;
    margin : 0;
    padding : 0;
  }

.box {
	display: inline-block;
	border: 1px solid #696;
	padding: 5px 5px;
	margin: 10px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
	background: #9EB6FF;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#9EB6FF), to(#FFFFFF));
	background: -webkit-linear-gradient(#9EB6FF, #FFFFFF);
	background: -moz-linear-gradient(#9EB6FF, #FFFFFF);
	background: -ms-linear-gradient(#9EB6FF, #FFFFFF);
	background: -o-linear-gradient(#9EB6FF, #FFFFFF);
	background: linear-gradient(#9EB6FF, #FFFFFF);
}
.box:hover  {
	cursor: pointer;
	background: #CC0066;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#CC0066), to(#FFFFFF));
	background: -webkit-linear-gradient(#CC0066, #FFFFFF);
	background: -moz-linear-gradient(#CC0066, #FFFFFF);
	background: -ms-linear-gradient(#CC0066, #FFFFFF);
	background: -o-linear-gradient(#CC0066, #FFFFFF);
	background: linear-gradient(#CC0066, #FFFFFF);
}

.doublon {
 border-width:3px;
 border-style:solid;
 border-color:yellow;
}
 
audio {
  margin: auto;
	height: 15px;
}

.checkbox_gestion {
  margin: auto;
	display: block;
}

select {
  font-size: 12px;
}

.inGame{
	background: #F5A1A1;
	/* color: rgb(255, 255, 255); */
}

.tr_lancement{
}

/* .tr_lancement:hover{ */
		/* background: rgb(0, 101, 255) !important; */
		/* text-decoration: inherit; */
		/* transition-duration: 0s, 0.15s; */
		/* color: rgb(255, 255, 255); */
/* } */

.tr_lancementhover{
		cursor: pointer;
		/* background: rgb(0, 101, 255); */
		background: rgb(0, 101, 255) !important;
		text-decoration: inherit;
		transition-duration: 0s, 0.15s;
		color: rgb(255, 255, 255);
}
.ligne {
  transition: all 0.3s ease; /* “all” = toutes les propriétés animables */
}
.ligne:hover{
		cursor: pointer;
		/* text-decoration: none; */
		/* background: rgb(0, 101, 255); */
		background: rgb(0, 101, 255) !important;
		text-decoration: inherit;
		/* transition-duration: 0s, 1s; */
		color: rgb(255, 255, 255) !important;
}

.class_button{
	display: block;
	margin: auto;
	/* display: inline-block; */
	outline: none;
	border-width: 0px;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: inherit;
	font-weight: 500;
	max-width: 100%;
	text-align: center;
	text-decoration: none;
	transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
	background: #1C6EA4;
	/* background: rgb(0, 82, 204); */
	cursor: pointer;
	height: 35px;
	line-height: 35px;
	padding: 0px 12px;
	vertical-align: middle;
	width: auto;
	font-size: 15px;
	color: rgb(255, 255, 255);
}
.class_button:hover {
		background: #0e3a58;
		text-decoration: inherit;
		transition-duration: 0s, 0.15s;
		color: rgb(255, 255, 255);
}

.class_button_poule{
	display: block;
	margin: auto;
	/* display: inline-block; */
	outline: none;
	border-width: 0px;
	border-radius: 3px;
	box-sizing: border-box;
	font-size: inherit;
	font-weight: 500;
	max-width: 100%;
	text-align: center;
	text-decoration: none;
	transition: background 0.1s ease-out 0s, box-shadow 0.15s cubic-bezier(0.47, 0.03, 0.49, 1.38) 0s;
	background: #006600;
	/* background: rgb(0, 82, 204); */
	cursor: pointer;
	height: 35px;
	line-height: 35px;
	padding: 0px 12px;
	vertical-align: middle;
	width: auto;
	font-size: 15px;
	color: rgb(255, 255, 255);
}
.class_button_poule:hover {
		background: #003300;
		text-decoration: inherit;
		transition-duration: 0s, 0.15s;
		color: rgb(255, 255, 255);
}
                

.wrapper {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(1, 1fr);
	grid-auto-rows: 35px;
	grid-gap: 10px;
	width: 10%;
}
.wrapper_pointage {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 10px;
	width: 80%;
}
.wrapper2 {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 20px;
	width: 70%;
}
.wrapper3 {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(8, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 20px;
	width: 70%;
}
.wrapper4 {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(7, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 20px;
	width: 70%;
}
.wrapper5 {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(8, 1fr);
	grid-gap: 10px;
	width: 70%;
	
}
.wrapper6 {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(6, 1fr);
	grid-gap: 10px;
	width: 70%;
}
.wrapperSystem {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 20px;
	width: 90%;
}
.wrapperSystem2 {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(5, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 20px;
	width: 90%;
}
.center {
	text-align: center;
}
.wrapper_samedi {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(8, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 5px;
	width: 45%;
}
.wrapper_global {
	display: grid;
	margin: 10px auto 10px;
	
	grid-auto-rows: 50px;
	grid-gap: 5px;
	width: 45%;
}
.wrapper_dimanche {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(6, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 5px;
	width: 35%;
}
.wrapper_mode {
	display: grid;
	margin: 10px auto 10px;
	grid-template-columns: repeat(2, 1fr);
	grid-auto-rows: 50px;
	grid-gap: 20px;
	width: 30%;
}
/* .wrapper_poule { */
	/* display: grid; */
	/* margin: 10px; */
	/* grid-template-columns: repeat(19, 1fr); */
	/* grid-auto-rows: 30px; */
	/* grid-gap: 5px; */
	/* width: 90%; */
/* } */
.wrapper_poule {
	display: grid;
	margin: 10px auto;
	grid-template-columns: repeat(auto-fill, minmax(70px, 1fr)); /* largeur minimale */
	grid-auto-rows: 30px;
	gap: 5px;
	width: 90%;
}
.right {
	text-align: right;
}
.img {
	height: 120px;
}
.titre_tableaux{
	border: 1px solid #696;
	padding: 5px 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
}
.titre_tableaux:hover{
	box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.5); /* Ombre légère */
	transform: scale(1.02);
}
.div_table{
	border: 1px solid #6699cc;
	padding: 5px 5px;
	border-radius: 5px;
	box-shadow: #666 0px 2px 3px;
	background: linear-gradient(#B3D4FF, #FFFFFF);
	background: -webkit-linear-gradient(#B3D4FF, #FFFFFF);
	background: -moz-linear-gradient(#B3D4FF, #FFFFFF);
	background: -ms-linear-gradient(#B3D4FF, #FFFFFF);
	background: -o-linear-gradient(#B3D4FF, #FFFFFF);
}
.div_table.disabled {
	pointer-events: none;
	opacity: 0.5;
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}
.div_table:hover  {
	cursor: pointer;
	background: linear-gradient(#7BAFE1, #FFFFFF);
	background: -webkit-linear-gradient(#7BAFE1, #FFFFFF);
	background: -moz-linear-gradient(#7BAFE1, #FFFFFF);
	background: -ms-linear-gradient(#7BAFE1, #FFFFFF);
	background: -o-linear-gradient(#7BAFE1, #FFFFFF);
}

.div_table.green {
	border: 1px solid #5A9;
	padding: 5px 5px;
	border-radius: 5px;
	box-shadow: #666 0px 2px 3px;
	background: linear-gradient(#B0EACD, #FFFFFF);
	background: -webkit-linear-gradient(#B0EACD, #FFFFFF);
	background: -moz-linear-gradient(#B0EACD, #FFFFFF);
	background: -ms-linear-gradient(#B0EACD, #FFFFFF);
	background: -o-linear-gradient(#B0EACD, #FFFFFF);
}

.div_table.green.disabled {
	pointer-events: none;
	opacity: 0.5;
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

.div_table.green:hover {
	cursor: pointer;
	background: linear-gradient(#66CC99, #FFFFFF);
	background: -webkit-linear-gradient(#66CC99, #FFFFFF);
	background: -moz-linear-gradient(#66CC99, #FFFFFF);
	background: -ms-linear-gradient(#66CC99, #FFFFFF);
	background: -o-linear-gradient(#66CC99, #FFFFFF);
}

.div_table.lavender {
	border: 1px solid #A9A;
	padding: 5px 5px;
	border-radius: 5px;
	box-shadow: #666 0px 2px 3px;
	background: linear-gradient(#E8D9F0, #FFFFFF);
	background: -webkit-linear-gradient(#E8D9F0, #FFFFFF);
	background: -moz-linear-gradient(#E8D9F0, #FFFFFF);
	background: -ms-linear-gradient(#E8D9F0, #FFFFFF);
	background: -o-linear-gradient(#E8D9F0, #FFFFFF);
}

.div_table.lavender.disabled {
	pointer-events: none;
	opacity: 0.5;
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

.div_table.lavender:hover {
	cursor: pointer;
	background: linear-gradient(#C8A2C8, #FFFFFF);
	background: -webkit-linear-gradient(#C8A2C8, #FFFFFF);
	background: -moz-linear-gradient(#C8A2C8, #FFFFFF);
	background: -ms-linear-gradient(#C8A2C8, #FFFFFF);
	background: -o-linear-gradient(#C8A2C8, #FFFFFF);
}

.div_table.apricot {
	border: 1px solid #C96;
	padding: 5px 5px;
	border-radius: 5px;
	box-shadow: #666 0px 2px 3px;
	background: linear-gradient(#FFE5B4, #FFFFFF);
	background: -webkit-linear-gradient(#FFE5B4, #FFFFFF);
	background: -moz-linear-gradient(#FFE5B4, #FFFFFF);
	background: -ms-linear-gradient(#FFE5B4, #FFFFFF);
	background: -o-linear-gradient(#FFE5B4, #FFFFFF);
}

.div_table.apricot.disabled {
	pointer-events: none;
	opacity: 0.5;
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

.div_table.apricot:hover {
	cursor: pointer;
	background: linear-gradient(#FFB266, #FFFFFF);
	background: -webkit-linear-gradient(#FFB266, #FFFFFF);
	background: -moz-linear-gradient(#FFB266, #FFFFFF);
	background: -ms-linear-gradient(#FFB266, #FFFFFF);
	background: -o-linear-gradient(#FFB266, #FFFFFF);
}

.div_table.rose {
	border: 1px solid #cc8899;
	padding: 5px 5px;
	border-radius: 5px;
	box-shadow: #666 0px 2px 3px;
	background: linear-gradient(#F8C8DC, #FFFFFF);
	background: -webkit-linear-gradient(#F8C8DC, #FFFFFF);
	background: -moz-linear-gradient(#F8C8DC, #FFFFFF);
	background: -ms-linear-gradient(#F8C8DC, #FFFFFF);
	background: -o-linear-gradient(#F8C8DC, #FFFFFF);
}

.div_table.rose.disabled {
	pointer-events: none;
	opacity: 0.5;
	background: #ccc;
	cursor: not-allowed;
	box-shadow: none;
}

.div_table.rose:hover {
	cursor: pointer;
	background: linear-gradient(#E89CB5, #FFFFFF);
	background: -webkit-linear-gradient(#E89CB5, #FFFFFF);
	background: -moz-linear-gradient(#E89CB5, #FFFFFF);
	background: -ms-linear-gradient(#E89CB5, #FFFFFF);
	background: -o-linear-gradient(#E89CB5, #FFFFFF);
}


.div_table_locked{
	border: 1px solid #696;
	padding: 5px 5px;
	-webkit-border-radius: 5px;
	-moz-border-radius: 5px;
	border-radius: 5px;
	-webkit-box-shadow: #666 0px 2px 3px;
	-moz-box-shadow: #666 0px 2px 3px;
	box-shadow: #666 0px 2px 3px;
	background: #696969;
	background: -webkit-gradient(linear, 0 0, 0 bottom, from(#696969), to(#FFFFFF));
	background: -webkit-linear-gradient(#696969, #FFFFFF);
	background: -moz-linear-gradient(#696969, #FFFFFF);
	background: -ms-linear-gradient(#696969, #FFFFFF);
	background: -o-linear-gradient(#696969, #FFFFFF);
	background: linear-gradient(#696969, #FFFFFF);
}

a {
	display:block;
	width:100%;
	height:100%;
}

/* unvisited link */
a:link {
	text-decoration: none; 
    decoration: none; 
}

/* visited link */
a:visited {
	text-decoration: none; 
    decoration: none; 
}

/* mouse over link */
a:hover {
	text-decoration: none; 
    decoration: none; 
}

/* selected link */
a:active {
	text-decoration: none; 
    decoration: none; 
}

table.table_joueur {
  margin: 15px auto 15px;
  border: 2px solid #1C6EA4;
  background-color: #EEEEEE;

  text-align: left;
  border-collapse: collapse;
}
table.width_full {
	
	  width: auto;
}
table.width_500px {
	  width: 500px;
}
table.table_joueur td, table.table_joueur th {
  border: 1px solid #AAAAAA;
  padding: 2px 3px;
}
table.table_joueur tbody td {
	font-size: 12px;
}
/* table.table_joueur tr:nth-child(odd) { */
  /* background: white; */
/* } */
table.table_joueur tr:nth-child(even) {
  background: #D0E4F5;
}
table.table_joueur thead {
  text-align : center;
  background: #1C6EA4;
  background: -moz-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: -webkit-linear-gradient(top, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  background: linear-gradient(to bottom, #5592bb 0%, #327cad 66%, #1C6EA4 100%);
  border-bottom: 2px solid #444444;
}
table.table_joueur thead th {
  
	font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.table_joueur thead th:first-child {
  border-left: none;
}

table.table_poule {
  margin: 15px auto 15px;
  border: 2px solid #006600;
  background-color: #EEEEEE;

  text-align: left;
  border-collapse: collapse;
}
table.table_poule td, table.table_poule th {
  border: 1px solid #AAAAAA;
  padding: 2px 3px;
}
table.table_poule tbody td {
	font-size: 12px;
}
table.table_poule tr:nth-child(even) {
  background: #D0E4F5;
}
table.table_poule thead {
  text-align : center;
  background: #006600;
  background: -moz-linear-gradient(top, #006600 0%, #006600 66%, #006600 100%);
  background: -webkit-linear-gradient(top, #006600 0%, #006600 66%, #006600 100%);
  background: linear-gradient(to bottom, #006600 0%, #006600 66%, #006600 100%);
  border-bottom: 2px solid #444444;
}
table.table_poule thead th {
  
	font-size: 12px;
  font-weight: bold;
  color: #FFFFFF;
  border-left: 2px solid #D0E4F5;
}
table.table_poule thead th:first-child {
  border-left: none;
}

table.customTable {
  /*width: 50%;*/
  margin:auto;
  background-color: #FFFFFF;
  border-collapse: collapse;
  border-width: 2px;
  border-color: #7ea8f8;
  border-style: solid;
  color: #000000;
}
table.customTable th{
  /*width: 50%;*/
  background-color: #fce5a4;
}
table.customTable td, table.customTable th {
  border-width: 2px;
  border-color: #7ea8f8;
  border-style: solid;
  padding: 5px;
}

table.customTable thead {
  background-color: #7ea8f8;
}
.submit{
	font-size: 12px;
	width:auto; 
	margin:0 auto;
	height: auto;
}

label:hover{
	background-color: #1FFFFF;
	cursor:pointer;
	
}
/* Tooltip container */
.tooltip {
  position: relative;
  display: inline-block;
  /* border-bottom: 1px dotted black; /* If you want dots under the hoverable text */ */
}

/* Tooltip text */
.tooltip .tooltiptext {
  visibility: hidden;
  width: 300px;
  background-color: #555;
  color: #fff;
  text-align: center;
  padding: 5px 0;
  border-radius: 6px;

  /* Position the tooltip text */
  position: absolute;
  z-index: 1;
  bottom: 125%;
  left: 50%;
  margin-left: -150px;

  /* Fade in tooltip */
  opacity: 0;
  transition: opacity 0.3s;
}

/* Tooltip arrow */
.tooltip .tooltiptext::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 50%;
  margin-left: -5px;
  border-width: 5px;
  border-style: solid;
  border-color: #555 transparent transparent transparent;
}

/* Show the tooltip text when you mouse over the tooltip container */
.tooltip:hover .tooltiptext {
  visibility: visible;
  opacity: 1;
}

.table_joueur td.ptg { text-align: center; width: 44px; }

/* le ✓ ne doit pas agrandir la ligne */
.table_joueur td.ptg .check {
  display: inline-block;
  font-size: 1em;     /* même taille que le texte de la cellule */
  line-height: 1;     /* ne “pousse” pas la hauteur */
  color: #2e7d32;
  font-weight: 700;
  vertical-align: middle;
}
.table_joueur td.ptg .deleted {
  display: inline-block;
  font-size: 1em;     /* même taille que le texte de la cellule */
  line-height: 1;     /* ne “pousse” pas la hauteur */
  color: #e57373;
  font-weight: 700;
  vertical-align: middle;
}

tr.cloture {
    position: relative;
}

tr.cloture::after {
    content: "";
    position: absolute;
    top: 0;
    left: -15px;
    right: -15px;
    border-bottom: 2px dashed #555;
    height: 0;
    pointer-events: none;
}