html, body
{
 	margin:0;
 	padding:0;
 }

footer
{
	margin-top: 0px;
	border-top: none;
	padding-top: 0;
	height: 60px;
	width: 100%;
	background-color: rgba(15, 23, 66, 0.6);
	padding: 10px;
	margin: 0px;
	color:white;
	bottom: 0px;

}

.logo:nth-child(1) /* On prend le deuxième bloc élément */
{
    align-self: flex-start; /* Seul ce bloc sera aligné à la fin */
}

body
{
	background-color: #444444;
}

header a
{
	padding: 10px 10px 10px 10px;
	color: white;
	text-decoration: none;
}

.planning_rencontre, header a:hover
{
	background-color: rgba(15, 23, 66, 0.9);
}




section
{
	font-family: "Trebuchet MS";
	width:90%;
	margin:auto;
	padding: 10px 0px 40px 0px;
	background-color:  white;
	text-align: center;
	margin-top: 30px;
	margin-bottom: 30px;
	min-height: 100vh;
}

@media
	only screen 
    and (min-width: 1200px)
    and (min-device-width: 1024px)  {

	table
	{
		width: 95%;
		margin: auto;
		text-align: left;
		border-collapse: collapse;
		border:0.5px solid #666666;
	}

	th
	{
		padding: 0px 10px 0px 10px;
		border-left: 0.5px solid #666666;
		border-right: 0.5px solid #666666;
		font-size: 12px;

	}
	table select {
		font-size: 10px;
	}

	td
	{
		font-size: 11px;
		padding: 2px 10px 2px 10px;
		border-left: 0.5px solid #666666;
		border-right: 0.5px solid #666666;
	}

	tr:nth-child(even) 
	{
		background-color: #cccccc;
	}
}

tbody tr:hover
{
	background-color: #aaaaaa;
}

thead
{
	background-color: rgb(15, 23, 66);
	color: white;
}

table img
{
	width: 12px;
}

.image {
	text-align: center;
}

input[type=submit] {
	background-color: rgb(15, 23, 66);
  	border: 1px solid rgb(15,23, 66);
  	color: white;
  	padding: 16px 32px;
  	text-decoration: none;
  	margin: 4px 2px;
  	cursor: pointer;

  	font-family: "Trebuchet MS";
  	font-size: 12px;
}
.bouton {
	font-size: 12px;
	background-color: rgb(15, 23, 66);
  	border: 1px solid rgb(15,23, 66);
  	color: white;
  	padding: 16px 32px;
  	text-decoration: none;
  	margin: 4px 2px;
  	cursor: pointer;
}

input[type=submit]:hover, .bouton:hover {
	border: 1px solid white;
}

input[type=submit]:active, .bouton:active {
	box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24), 0 17px 50px 0 rgba(0,0,0,0.19);
}

@media
	only screen 
    and (max-width: 1199px), (min-device-height: 100px)
    and (max-device-width: 1023px)  {

	/* Force table to not be like tables anymore */
	table, thead, tbody, th, td, tr {
		display: block;
	}

	/* Hide table headers (but not display: none;, for accessibility) */
	thead tr {
		position: absolute;
		top: -9999px;
		left: -9999px;
	}

    tr {
      margin: 0 0 1rem 0;
    }
      
    tr:nth-child(odd) {
      background: #cccccc;
    }
    
		td {
			/* Behave  like a "row" */
			border: none;
			border-bottom: 1px solid #eee;
			position: relative;
			padding-left: 50%;
			min-height: 20px;
		}

		td:before {
			/* Now like a table header */
			position: absolute;
			/* Top/left values mimic padding */
			top: 0;
			left: 6px;
			width: 45%;
			padding-right: 10px;
			white-space: nowrap;
		}

		td[id="date"]:before { content: "Date"; }
		td[id="jour"]:before { content: "Jour"; }
		td[id="heure"]:before { content: "Heure"; }
		td[id="type"]:before { content: "Type"; }
		td[id="equipe"]:before { content: "Equipe"; }
		td[id="adversaire"]:before { content: "Adversaire"; }
		td[id="chrono"]:before { content: "Chrono"; }
		td[id="marqueur"]:before { content: "Marqueur"; }
		td[id="suppl"]:before { content: "Suppl."; }
		td[id="inscription"]:before { content: "Inscription"; }
		td[id="details"]:before { content: "Détails"; }
		td[id="ligue"]:before { content: "Ligue"; }
		td[id="lieu"]:before { content: "Lieu"; }
		td[id="supp"]:before { content: "Supp."; }
}