/*RESET*/
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {margin:0; padding:0; border:0; outline:0; font-size:100%; vertical-align:baseline; background:transparent;} body {line-height: 1;}ol, ul{list-style:none;} blockquote, q{quotes:none;} blockquote:before, blockquote:after, q:before, q:after{content:'';content:none;} :focus{outline:0;} ins{text-decoration:none;} del{text-decoration:line-through;} table{border-collapse:collapse; border-spacing:0;}

/*MAIN*/
body {
	font-size: 1.05em;
	line-height: 1.25em;
	font-family: Helvetica Neue, Helvetica, Arial;
	color: #000000;
	background-image:url(../Web_img/FondEcran.jpg);
	margin-top:90px;
	margin-left:10px;
	margin-right:10px;
	

}

/*liens*/
a {
	color: #FFFFFF;
	text-decoration: underline;
	font-weight: bold; /* bold = texte en gras */

}

/*liens survol*/
a:hover {

	color: #444;

}

/*image*/
img {

	width: 100%;

}

/* En tête */
header {

	background-image:url(../Web_img/BanniereBleu.jpg);
	width: 960px; /*largeur 100 %*/
	height: 76px;  /*hauteur en tête*/
	position: fixed; /*position fixée*/
	top: 0;
	/*left: 0;*/
	border-bottom: 6px solid #4C8FEC;  /*ligne inférieur*/
	z-index: 100; /*toujours au premier plan*/
	color:#FFFFFF; /*couleur écriture*/
  margin-bottom: 100px;
	margin: auto;
}


/* id logo */
#logo{
	/*marges intérieurs*/
        padding-left: 20px;
        padding-bottom: 20px;
        padding-top: 20px;
        padding-right: 0px;
	
	float: left; /*position à gauche dans la balise head*/
	width: 140px; /*Largeur du logo*/
	height: 40px; /*hauteur du logo*/
	background: url(../img/logo.png) no-repeat center; /*emplacement du logo, non répété, et centrer*/
	display: block;
	background-image: url(../Web_img/logo1.png);
	text-align:center;
}

/*la navigation*/
nav {

	float: right;
		padding-left: auto;
        padding-bottom: 20px;
        padding-top: 15px;
        padding-right: 20px;
	
	
}

/*id menu-icon*/
#menu-icon {

	display: hidden;  /*caché sauf pour écran portable*/
	width: 40px;
	height: 40px;
	background: #4C8FEC url(../Web_img/menu-icon.png) center; /*emplacement logo menu, avec couleur du fond*/
	background-image:url(../Web_img/menu-icon.png) center;

}


/*a continuer.....*/
a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

.ul_menu {

	list-style: none;

}

.li_menu {

	display: inline-block;
	float: left;
	padding: 10px

}

<!-- pour les listes avec puces-->
.ul_AvecPuces{
     list-style: outside;
     padding-left: 40px;
}

/*balise div class: Travail,  pour le travail à faire en fond blanc*/
div.Travail{
    color:black;
    background-color: white;
    border-radius: 10px;
    padding: 20px;
}

div.Travail a{
    color:gray;
    font-weight: bold;
}

div.Travail a:hover,a:focus,a:active{
    color:blue;
}

div.Travail h1{
    text-align: center;
    color: black;
    font-size: 140%;
    font-weight: bold;
}

  
     
.page{	color:white;	font-size:75%;	font-style:italic;	margin-left:30px;	margin-bottom:20px;}

section {

	margin: 40px 0px;
	max-width: 980px;
	position: relative;
	padding: 0px

}

h1 {

	font-size: 2em;
	color: #FFFFFF;
	line-height: 1.15em;
	margin: 20px 0 ;
	text-align:center;

}


h2 {
	font-size :1.5em;
	color:#FFFF00;
	margin:20px 0;
	text-align:left;
}

p {

	line-height: 1.45em;
	margin-bottom: 20px;

}

#conteneur{
	display:flex;
	/*margin-bottom:500px; /*pour la pub de 000webhostapp*/
}
#contenu{
	margin:auto;
	width:960px;
	
}



table{
	border-collapase: collapse; /*bordure collée*/
	border:white;
	width: 90%;
  margin: auto;
}

td, th
{
	border: 1px solid white;
	text-align: center;	
}

/*pour bouton retour en arrière*/
.cRetour {
  border-radius:3px;
  padding:10px;
  font-size:15px;
  text-align:center;
  color:#fff;
  background:rgba(0, 0, 0, 0.25);
  z-index:99999;
  transition:all ease-in 0.2s;
  position: fixed;
  cursor: pointer;
  bottom: 200px;/*Position du bouton*/
  right: 20px;
  display: none;
}
.cRetour:before{ content: "\25b2"; }
.cRetour:hover{
  background:rgba(0, 0, 0, 1);
  transition:all ease-in 0.2s;
}

.video{
width:100%;
text-align:center;
margin:auto;
}


.cercle /*pour liste à puces*/
		{
		list-style : circle;
		}
		
section{
	display:flex;
	margin-bottom:20px;
}




#boite_info{
	flex:3;
	margin-right:20px;
	position:relative;
	background-color:#4C8FEC;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size:0.9em;
}

.titreBoite{
	color:white;
	font-size:1.2em;
	text-align:center;
}

/*pour formulaires*/
	.form_label{
	position:absolute;
	margin-left:5px;

	
}

	.form_boite{
	position:relative;
	margin-left:5px;
	margin-top: 30px;
	margin-bottom: 0px;
	
}

.text{
	color:white;
}


/*************************Pour écran téléphone portable********************/
/*MEDIA QUERY*/
@media only screen and (max-width : 960px) {

	header {
    width:100%;
		position: absolute;

	}

	#menu-icon {

		display:inline-block;

	}

	nav ul, nav:active ul { 

		display: none;
		position: absolute;
		padding: 20px;
		background-image:url(../Web_img/FondEcran.jpg);
		border: 5px solid #444;
		right: 20px;
		top: 60px;
		width: 50%;
		border-radius: 4px 0 4px 4px;

	}

	nav li {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}

	nav:hover ul {

		display: block;

	}
	
	h1{
	font-size: 1.5em;
	
	}
	
	section{
	display:flex;
	flex-direction: column;
	margin:auto;
	text-align:center;
	}


	#boite_pp{
	flex:1;
	position:relative;
	background-color:#4C8FEC;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size:0.9em;
	margin-bottom:20px;
	}

	#boite_info{
	flex:1;
	margin-right:0px;
	position:relative;
	background-color:#4C8FEC;
	box-shadow: 0px 2px 5px #1c1a19;
	border-radius: 5px;
	padding: 10px;
	color: white;
	font-size:0.9em;
	margin-bottom:20px;
	}
	

}

li{
	Line-Height: 2; /*ligne double*/
}