body{
	font-family: Calibri, serif;
	font-size: 18px;
	margin: 0px;
	padding: 0px;
}



h2 {
	margin-top: 20px;
 	font-weight: normal;
 	text-align: center;
	color : blue;
}
header{
	height: 80px;
	display:flex; /*pour centrer le titre*/
	flex-direction: column; /* pour mettre les élèments les uns sous les autres*/
	}
header h1{
	margin:auto; /* pour centrer le titre */
	font-size: 40px;
 	font-weight: normal;
 	text-align: center;
	color:blue;
	
}
footer{
	height: 50px;
	padding-top: 1px;
	padding-bottom: 20px;
	text-align: center;
	background-color: #C5C5C5;
	border-top: 2px solid #AAA;
}
nav{
	width: 100%;
	background-color: #424558;
}	
nav ul{
	margin: 0px;
	padding: 0px;
}
nav li{
	list-style-type: none;
	float: left;
	
}
nav a{
	display: inline-block;
	text-decoration: none;
	padding: 20px 30px;
	color: #fff;
	text-transform: uppercase;
	font-size: 15px;
}

.acc:hover, .acc{
	border-top: 5px solid #4C8;
	background-color: rgba(64, 200, 130, 0.15);
}
.tour:hover, .tour{
	border-top: 5px solid #f1dc4f;
	background-color: rgba(241, 211, 79, 0.15);
}
.com:hover, .com{
	border-top: 5px solid #0070BB;
	background-color: rgba(000, 112, 192, 0.15);	
}
.conx:hover, .conx{
	border-top: 5px solid #e44d26;
	background-color: rgba(228, 77, 38 ,0.15);
}
nav li:hover a{
	padding: 15px 30px 20px 30px;
}
section{
	width: 100%;
	padding-bottom: 10px;	
	display: flex ; 
	flex-direction: column; 
}
.accueil {
}
.accueil h1 {
	padding: 10px;
	margin:auto; /* pour centrer le titre */
	letter-spacing: 1px;
}
.centre {
	
}
.table{
	display:table;
	margin: 0 auto;
}
.sec{
	margin: 0px 10%;
}
p{
  padding: 5px 20px;
}

table {
	margin:auto;
	border-collapse: collapse;
	border: 2px solid rgb(200,200,200);
	letter-spacing: 1px;
}

td, th {
  border: 1px solid rgb(190,190,190);
  padding: 10px 20px;
}

th {
  background-color: rgb(235,235,235);
}

td {
  text-align: center;
}

tr:nth-child(even) td {
  background-color: rgb(250,250,250);
}

tr:nth-child(odd) td {
  background-color: rgb(245,245,245);
}

.sec::after, .exp::after, .reco::after{
	content: "";
	display: table;
	clear: both;
}

.ment-leg{
	border-top: 5px solid #5f6;
}

.comm{
	border-top: 5px solid #29c;
}

.tour-oper{
	border-top: 5px solid #f3e241;
}

.connexion{
	border-top: 5px solid #744d26;
}

/* début de la partie CSS pour les formulaires */
/* --------------------------------------------*/
/* div qui contient un formulaire */
#container {
  width: 80%;
  margin: 0 auto;
  margin-bottom: 5%;
}

/* formulaire*/
form {
  /*width:100%;*/
  padding: 30px;
  border: 1px solid #f1f1f1;
  background: #fff;
  box-shadow: 0 0 20px 0 rgba(0, 0, 0, 0.2), 0 5px 5px 0 rgba(0, 0, 0, 0.24);
}

/* titre h1 dans un container */
#container h1 {
  width: 38%;
  margin: 0 auto;
  padding-bottom: 10px;
}

/* composant input text ou input mail ou input text ou input password */
input[type='text'],
input[type='mail'],
input[type='tel'],
input[type='password'],
textarea {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* composant input date ou select */
input[type='date'],
select {
  padding: 12px 2px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}

/* composant input checkbox */
input[type='checkbox'] {
  padding: 12px 15px;
  margin: 8px 0;
  border: 1px solid #ccc;
  box-sizing: border-box;
}
/* label */
label {
  color: blue;
}
.radio-group {
  width: 100%;
  padding: 10px 0px;
  margin: 8px 0;
  box-sizing: border-box;
}
/* pour avoir un label et un champ sur la même ligne */
.form-group {
  width: 100%;
  box-sizing: border-box;
}

/* bouton de type submit */
input[type='submit'] {
  background-color: #53af57;
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 100%;
}

/* changement d'aspect si la souris passe sur un bouton de type submit */
input[type='submit']:hover {
  background-color: white;
  color: #53af57;
  border: 1px solid #53af57;
}
/* fin de la partie CSS pour les formulaires */
/* --------------------------------------------*/

@media screen and (max-width:780px){
	header{
		height: 50px;	
	}
	h1{
		font-size: 28px;
		margin: 0px 0px 0px 0px;
	}
	nav li{
		list-style-type: none;
		float: left;
		width:120px;
}
	nav li a{
		font-size: 12px;
		padding:10px;
	}
	nav li:hover a{
		padding: 5px 10px 10px 10px;
	}
}