/*
id		(unique)	<=> #
class				<=> .
Modif: 25.02.2019
*/

body {
	font-family: Open Sans,Calibri;		/*Century Gothic,Open Sans,Lucida Sans unicode,Arial /*13.5px*/
	color: rgb(68,68,68);				/* Anciennement : rgb(80,80,80); */
	font-size: 13px;
    background-color: lemonchiffon; 
    background-repeat: repeat-x;
}

header {
    background-color: tan;
	margin-bottom: 10px;
}

footer {
	border-top : 1px solid #000;
	font-style: italic;
	font-size: 10px;
}

a {
	/*color: blue;*/
	color: rgb(30,78,240);
	text-decoration:none;
}

h1 {
	font-size:50px;
	text-align: center;           
    color: white;
}

h2 {
	font-size:30px;
	color: tomato; /*corail*/
	font-weight: bold;
}

h3 {
	font-style:italic;
	text-decoration:underline;
	margin-left:20px;
	color:limegreen;
}

section {      
    /*border: 1px dashed black; */
    border-radius: 10px; 
    text-align: justify; 
	/*
    width: 64%; 
    float: left;
	*/
    padding: 10px; 
    vertical-align: top;
    margin-bottom: 2%; 
    overflow: auto; 
}

article {
	/*border-left: 1px dotted #000;*/
	box-shadow: 2px 2px 3px black; /*decalage horizontal	decalage vertical	adoussissement degrade	couleur ombre*/
	text-align: justify;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom:5px;
	overflow: auto;
}


.TexteSouligne {
    text-decoration: underline; 
}

.TexteGras {
    font-weight: bold;
}

.TexteItalique {
    font-style: italic;
}

.BlocGauche {
	width: 15%;
	margin-right:1%;
	border: 1px solid black; 
    border-radius: 10px; 
    text-align: left; 
	float: left;
    padding: 10px; 
    vertical-align: top;
    margin-bottom: 2%; 
    overflow: auto;
}

.BlocDroite {
	width: 15%;
	margin-right:1%;
	border: 1px solid black; 
    border-radius: 10px; 
    text-align: left; 
	float: right;
    padding: 10px; 
    vertical-align: top;
    margin-bottom: 2%; 
    overflow: auto;
}
.FloatDroite {float:right;}
.FloatGauche {float:left;}
.TexteGauche {text-align:left;}
.TexteDroite {text-align:right;}

 /*Volet à gauche présentant le sommaire de la page*/
.NavInterne {
	width: 16%;
	margin-right:1%;
	border: 1px solid black; 
    border-radius: 10px; 
    text-align: left; 
	float: left;
    padding: 10px; 
    vertical-align: top;
    margin-bottom: 2%; 
    overflow: auto;
}

.TexteAnnonce {
	font-weight: bold;
	color: red;
	font-size:25px;
	background-color: yellow;
}

.TexteEncadreVertInfo {
	border: 3px yellowgreen solid;
	border-radius:7px;
	padding: 10px;
	margin-bottom: 2%;
	background-color:rgb(163,255,136);
}










/* = = = = = = = = = = BANDEAU DE NAVIGATION = = = = = = = = = = */
/*TUTO: https://www.youtube.com/watch?time_continue=4&v=cWrmoGwQ1iE  */
nav {
	width: 100%;
	background-color: #424558;
	margin: 0px;						/* Marge externe autour du bandeau */
}


nav > ul::after{
	content: "";
	display: block;
	clear: both;
}


nav > ul {
	padding: 0px;						/* Marge interne autour des éléments dans le bandeau */
	text-align: center;
	vertical-align: middle;
}

nav > ul > div.NavGauche > li {
	float: left;
	position: relative;
}
nav > ul > div.NavDroite > li {
	float: right;
	position: relative;
}

nav li {
	list-style-type: none;
}

nav > ul > div.NavGauche > li.menu-accueil > a {
	/* Bandeau */
	width: 70px;						/* Taille de la zone colorée (largeur) 70 */
	height: 27px;						/* Taille de la zone colorée (hauteur) 27 */
	/* Texte */
	padding: 20px 30px;					/* Marge autour du texte = Taille de la zone de TEXTE colorée */
	color: #FFF;						/* Couleur du texte = BLANC */
}
nav > ul > div.NavGauche > li.menu-billard > a {
	width: 110px;
	height: 27px;
	padding: 20px 30px;
	color: #FFF;
}
nav > ul > div.NavGauche > li.menu-notion > a {
	width: 135px;
	height: 27px;
	padding: 20px 30px;
	color: #FFF;
}
nav > ul > div.NavGauche > li.menu-projet > a {
	width: 150px;
	height: 27px;
	padding: 20px 30px;
	color: #FFF;
}
nav > ul > div.NavDroite > li.menu-plansite > a {
	width: 90px;
	height: 27px;
	padding: 20px 30px;
	color: #FFF;
}

.sousmenu {display: none;}				/* Pas d'affichage des sous menus lorsque la souris n'est pas dessus */

nav a {
	display: inline-block;
	text-decoration: none;
}

nav li:hover .sousmenu{
	display: inline-block;
	position: absolute;
	top: 100%;
	left: 0px;
	padding: 0px;
	z-index: 1000;
}

.sousmenu li{
	border-bottom: 1px solid #CCC;
}

.sousmenu li a{
	padding: 15px 30px;
	font-size: 13px;
	color: #222538;
	width: 270px;
}

.menu-accueil:hover{
	/*border-top: 5px solid rgb(220, 20, 60);*/
	background-color: rgb(220,20,60);
}

.menu-billard:hover{
	background-color: rgb(0,128,0);
}

.menu-notion:hover{
	background-color: rgb(255,143,0);
}
.menu-notion .sousmenu{
	background-color: rgb(255,193,7);
}

.menu-projet:hover{
	background-color: rgb(2,119,189);
}
.menu-projet .sousmenu{
	background-color: rgb(3,169,244);
}

.menu-plansite:hover{
	background-color: rgb(123,125,125);
}

.menu-contact:hover{
	background-color: rgb(165,105,189);
}

.sousmenu li:hover a{
	color: black;
	font-weight: bold;
}










/* = = = = = = = = = = DIAPORAMA ACCUEIL = = = = = = = = = = */
/* https://la-cascade.io/un-carrousel-responsif-en-pur-css/ */

div#slider {
	width: 80%;
	max-width: 420px;				/* Taille de la fenêtre (1000) (500) */
	overflow: hidden;				/* on masque ce qui déborde, pour n'afficher qu'une seule image */
}


div#slider figure {
	position: relative;
	width: 500%;					/* Banque de 5 images, on en montre qu'une => la figure est 5x plus large que le div (500%) */
	margin: 0;
	padding: 0;
	font-size: 0;
	left: 0;
	text-align: left;
	animation: 20s slidy infinite;	/* Temps de diaporama, passage automatique */
}

div#slider figure img {
	width: 20%;						/*    (100% / nb-images) = 20% */
	height: auto;
	float: left;
}


@keyframes slidy {
	/* Chaque image est affichée durant 20% du temps total, la transition dure 5% du temps total */
   0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
  /*
   0% { left: 0%; }
  20% { left: 0%; }
  25% { left: -100%; }
  45% { left: -100%; }
  50% { left: -200%; }
  70% { left: -200%; }
  75% { left: -300%; }
  95% { left: -300%; }
  100% { left: -400%; }
  */
}



	

	
	


/* = = = = = IMAGES / LEGENDES = = = = = */
figure{
	/*
	border: 1px rgb(80,80,80) dotted;
	border-radius:7px;
	*/
	margin: 40px;		/*Pour les autres éléments*/
	padding: 0px;
}
img{
	margin:0px;
	padding:0px;
}

figcaption{ 			/*legende*/
	font-style:italic;
}

.ImgFlotDroite {
	float:right;
	size:auto;
}
 
.ImgFlotCentre {
	float:center;
	size:auto;
}