/* ======================================================================================================= Menu de navigation latéral */
@media screen and (max-width: 800px) {
#sideNavigation {display: none;}
	/*{ position: absolute;
    width: auto;
	max-width: 30%;
	top: 5px;
	left:0px;
    height:auto;    
	padding-top: 106px; 
	padding-botttom: 1px;
	box-sizing:border-box;
	border-left: 3px solid #FFA551;
	font-size: 13pt;
	background-color: #EFF7FF;
	color: #0074C6;
	resize: both;
    overflow-x: hidden;  
    transition: 0s;
	z-index:  
	}*/
}

@media screen and (max-width: 800px) {
	.itemsFL {
		z-index: 2; : /* */
		-webkit-animation-name: fadeout; /* Chrome, Safari, Opera */
		-webkit-animation-delay: 2s; /* Chrome, Safari, Opera */
		-webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
		-webkit-animation-fill-mode:forwards;
		animation-name: fadeout;
		animation-delay: 2s;
		animation-duration: 4s;
		animation-fill-mode:forwards;
		opacity:0;
	}	
	/* Chrome, Safari, Opera */
	@-webkit-keyframes fadeout {
		0% {opacity: 0;}
		100% {opacity: 1;}
	}
	/* Standard syntax */
	@keyframes fadeout {
		0% {opacity: 0;}
		100% {opacity: 1;}
	}	
}

@media screen and (max-width: 800px) {
	#imgbandeau {
    -webkit-animation-name: fadeIn; /* Chrome, Safari, Opera */
    -webkit-animation-delay: 1s; /* Chrome, Safari, Opera */
    -webkit-animation-duration: 3s; /* Chrome, Safari, Opera */
    -webkit-animation-fill-mode:forwards;
    animation-name: fadeIn;
    animation-delay: 1s;
    animation-duration: 2s;
    animation-fill-mode:forwards;
    /*opacity:0;*/
	}
		/* Chrome, Safari, Opera */
	@-webkit-keyframes fadeIn {
		0% {opacity: 1;}
		/*50% {opacity: 0.85;}*/
		100% {opacity: 0;}
	}
	/* Standard syntax */
	@keyframes fadeIn {
		0% {opacity: 1;}
		/*50% {opacity: 0.85;}*/
		100% {opacity: 0;}
	}	
}
	


@media screen and (min-width: 801px) {
#sideNavigation {
    position: fixed;
    width: auto;	
	max-width: 30%;
	top: 11px; 
	left:18%;
    height:auto;    
	padding-top: 26px; 
	padding-bottom: 2px;
	box-sizing:border-box;
	border-top: 1px solid #67B3EA;
	font-size: 13pt;
	background-color: #EFF7FF;  /* bleu très clair */
	color: #0074C6;
	resize: both;
    overflow-x: hidden;  
    transition: 0s;
	z-index: 2; 
	}
}

.ouvrirFL {
	top:25px;
	/*bottom:30px;*/
	margin-left: 0%;
	margin-right: 2%;
	max-width:99%;
	height:50px;
	opacity:75%;
	position: fixed;
	bottom: 2%;
	left: 2%;
	text-align:center;
	box-sizing: border-box;
	display:block;
	z-index:2 ; /* */
	/*background-color: #ddd;*/
}

.ouvrirDRAP {
	top:0;
	/*bottom:30px;*/
	margin-left: auto;
	margin-right: auto;
	max-width:99%;
	height:50px;
	opacity:100%;
	position: fixed;
	bottom: 2%;
	/*left: 2%;*/
	text-align:center;
	box-sizing: border-box;
	display:block;
	z-index:4;
	/*background-color: #ddd;*/
}

@media screen and (max-width: 560px) {
.itemsFL {
	box-shadow:3px 3px 5px #555;	
	background-color: #E2F1FF; /* bleu ciel */
	width:95%;
	margin-left:0%;
	margin-right:1%;
	margin-top:25px;
	box-sizing: border-box;
	display:flex;
	}
.large {display:none;}	
}
@media screen and (min-width: 561px) and (max-width: 800px) {
.itemsFL {
	box-shadow:3px 3px 5px #555;	
	background-color: #E2F1FF; /* bleu ciel */
	width:75%;
	margin-left:15%;
	margin-right:15%;
	margin-top:0px;
	box-sizing: border-box;
	display:flex;
	}
.large {display:none;}	
}
@media screen and (min-width:801px){
.itemsFL {display:none;}
.large {color:#FFF9EF}  /* crème très clair */
}

.sidenav a {
    padding: 6px 14px 6px 12px;
    text-decoration: none;
	text-align: left;
	font-stretch: condensed;
	font-family: "Arial Narrow", "Liberation Sans Narrow", "Helvetica Narrow"; "sans-serif Condensed";
    color: #006DC6;
    display: block;
	overflow-x: hidden;
    transition: 0s;
}

.sousmenu {
	padding: 6px 14px 6px 12px;
	margin-left: 14px;
    text-decoration: none;
	text-align: left;
	font-stretch: condensed;
	font-family: "Arial Narrow", "Liberation Sans Narrow", "Helvetica Narrow"; "sans-serif Condensed";
    font-size: 11pt;
	background-color:#F9FCFF;  /* presque blanc */  
    display: block;
	overflow-x: hidden;
    transition: 0s;	
}

.sidenav a:hover {color: #EA7500;}

#choix {list-style-type: none; margin: 0; padding: 0;}
.choix2 {list-style-type: none; margin: 0; padding: 0;}

li {background: #EFF7FF ; border-bottom: 1px solid #67B3EA; margin-bottom: 0px;}

#ici {	font-style: normal; color: #EA7500;	background-color:#FFF;}
#ici2 {	margin-left: 14px; font-size: 11pt; font-style: normal; color: #EA7500; background-color:#FFF;}

#redimMenu {position: relative;	height: 5%;	bottom: 0px;}

.coindroit {
	text-align: right;
	font-style: normal;
	font-family: "Liberation Sans", "Arial", "Helvetica"; "sans-serif";
	font-size: 9pt;    /*8.7pt;*/
	color: grey;     /*#A2A2A2;*/
	margin-left: 5px;
	margin-right: 15px;
	margin-bottom: 0px;
	/*margin-top: 8px;*/
}

/* ========================================================================================================= Zone d’en-tête */
#haut {
	display:flex;
	align-items:center;
	position: relative;
	top: 0px;
	left:0px;	
	margin: 0px;
	width: auto;
	height: 120px;
	/*background-color: #E2F1FF;*/
	border: 3px solid #FFA551;
	border-bottom: none; /*1px solid #67B3EA;*/
}

/*#imgbandeau {box-sizing:border-box; min-height:55%; max-height:99%; width:99% }*/
/*#imgbandeau {box-sizing:border-box; position:relative; float:right; height: 90%; margin-right:10%}*/

@media screen and (max-width: 800px) {
    #ouvrir-haut {position: absolute; left: 5px; height: 45%; display:none;}	/*visibility: visible;}*/
	#fermer-haut {position: absolute; left: 5px; height: 45%; display:none;}	/*visibility: visible;}*/
	#fermer-haut0 {position: relative; margin-bottom:20px; top:0px; left: 4px; width: 80%; height: 55px; display:none;}
    /*#imgbandeau {box-sizing:border-box; min-height:68%; max-height:80%; min-width:45%; max-width:70%; margin-left:30%; margin-right:0.5%; }*/
    #imgbandeau {box-sizing:border-box; min-height:68%; max-height:80%; /*min-width:45%;*/ max-width:98%; margin-left:auto; margin-right:auto; top: 0; align-items: start;}
	/*#haut {opacity: 20%; visibility: hidden;*/
	#haut {z-index: 1; background-color: transparent;}
}
@media screen and (min-width: 801px) {
	#ouvrir-haut {position: absolute; left: 10px; height: 56%; visibility: visible;}
	#fermer-haut {position: absolute; left: 10px; height: 56%; visibility: visible;}
	#fermer-haut0 {position: relative; margin-bottom:7px; top: 0px; left: 7px; width: 47%; height: 69px; visibility: visible;}
	#imgbandeau {box-sizing:border-box; min-height:70%; max-height:95%; min-width:35%; max-width:55.5%; margin-left:36%; margin-right:2.5%; }
	/*#haut {opacity: 100%}*/
	#haut {z-index: 3; background-color: #E2F1FF;}
}

#ouvrir-haut:hover {background-color: #F7FBFF;}  /* gris-bleu très clair */
#fermer-haut:hover {background-color: #F7FBFF;}
#fermer-haut0:hover {background-color: #FFF;}

/* ========================================================================================================= Style du contenu des pages */
body {background-color:#999; width:auto; overflow-x: auto;}   /* gris assez clair */

#tout {
	position: absolute;
	height: auto;
	padding: 0 0 0 0;
	background-color: #FFF9EF;	/* crème très clair */
	border-bottom: 0;
	z-index: 1;
}
@media screen and (min-width:801px){#tout {width: 66%; margin-left: 17%;}}  /* (100-largeur)/2  */
@media screen and (max-width:800px){#tout {width: auto; margin-left: 0%; right: 0%;}}


#main {
	position: relative;
	top: 0;
	left:0px;
	float: left;
	box-sizing:border-box;
    margin: 0 ; 
    padding: 5px 0 40px auto;  /*272px;*/
    overflow:auto;
	width: 100%;
	height: 100%;
	background-color: #FFF9EF;  /* crème très clair */
	border: 3px solid #FFA551;  /* orange */
	border-top: 0;	
	z-index: 1;
}

#main ul {margin-right: 4%; margin-left: 3.2%;  padding-left:1.2em; line-height: 1.3em; margin-top:0;}
#main li {background-color: #FFF5E8; border:0; margin: 6px; }  /* crème clair */

.fond {
	height:30px;
	background-color:#DDD;  /* gris clair */
	z-index: 1;
	position: absolute;
	left:0px;
	right:0px;
	bottom: 3px;
	border-left: 3px solid #FFA551;
	border-right: 3px solid #FFA551;
}

.fond p {
	font-family: "Liberation Sans", "Arial", "Arial rounded MT", "serif";	
	text-align:right;
	font-size:10.5pt;margin: 8px 3% auto 0;
}

.contenu {font-family: "Liberation Sans", "Arial", "Helvetica"; "sans-serif";}

h1 {
	font-family:  "Liberation Sans", "Arial", "Arial rounded MT", "sans-serif";
	text-align: center;
	text-shadow: 2px 2px 2px #aaa;
	margin-bottom: 9pt;
}
	@media screen and (min-width:801px) {h1 {margin-top: 23pt; font-size: 18pt;}}
	@media screen and (max-width:800px) {h1 {margin-top: -3pt; font-size: 15pt;}}

h3 {
	font-family: "Liberation Sans", "Arial", "Arial rounded MT", "sans-serif";
	text-align: left;
	font-size: 13.5pt;
	margin : 18pt 4% 0.3em 2.5%;
	padding: 0 14px 0 14px;
	background-color: #E8E8E8;  /* gris clair */
}

.annonce {
	font-family:  "Liberation Sans", "Arial", "Arial rounded MT", "sans-serif";
	text-align: center;
	font-size: 14pt;
	font-weight:bold;
	color:red;
	text-shadow: 1px 1px 3px #000;
	margin-top: 12pt;
	margin-bottom: 9pt;
}

.contenu a {
	text-align: left;
	text-decoration: none;
	font-weight: bold;
	font-size: 1em;
	margin-top: 0pt;
}

.contenu a:hover {color: red;}
.contenu a:hover:visited {color: red;}
.contenu a:hover pre {display:block; z-index:6; position:fixed; left: 30%; top; 0px;}
.contenu a pre {display:none;}
.contenu a:visited {color:#8D008D}

.contenu .largBand img:hover {box-shadow:0px 5px 0px #FF6500;} 
.contenu .bandENG {width:22.7%; margin-left:2%; margin-right:2%}
.contenu .bandPAP {width:16%; margin-left:0.5%; margin-right:0.5%}
.contenu .ouvrirFL img:hover {background-color:#FFD2AD;}  /* crème preque orange */

.contenu p {
	text-align: justify;
	text-indent: 1.2em;
	font-size: 1em;
	line-height: 1.33em;
	margin : 0.25em 4% 0 4%;
	/*-webkit-hyphens: auto;
	-ms-hyphens: auto;
	hyphens: auto;*/
}

.contenu p.refext {
	margin-top:6px;
	margin-left:6%;
	font-size:12pt; 
	text-align:left;
}

.contenu p.refext1 {
	margin-bottom: 0;
	margin-top:0;
	padding : 0 0 0 5%;
	font-size:12pt; 
	text-align:left;
}

.contenu p.refext2 {
	margin-top:6px;
	margin-left:4%;
	clear:left; 
	text-indent:0;
	font-size:12pt; 
	text-align:justify;
}

.contenu p.refext3 {
	margin-bottom: 0;
	margin-top:0;
	padding : 0 0 0 5%;
	font-size:11pt; 
	text-align:left;
}

.contenu p.sousimg {text-indent:0; padding-top:0; font-size: 0.8em; text-align: center;}
.contenu p.ouinon {text-indent:1.8em; padding:0 0 50px 0; font-size: 11pt; font-style:italic; text-align: left;}

.contenu span {font-size:10pt; font-style:normal}

#liste {margin-left: 4.6em;	text-indent: -1em;}

#agrandir {
	text-align: left;
	font-size: 9.5pt;
	line-height: 1;
	margin : 0 4% 3pt 4%;
	color: red;
}

#direct {
	text-align: center;
	font-size: 9.5pt;
	line-height: 1;
	margin : 6pt 4% 3pt 4%;
	color: red;
}

u {text-decoration: underline;}

.centrer {text-align:center; margin:6pt;}
@media screen and (min-width:801px) {.centrer0 {text-align:center; margin:12pt;}}
@media screen and (max-width:800px) {.centrer0 {display: none;}}

@media screen and (max-width: 800px) {
    .Image400 {position:fixed; bottom: 10%;  right: 7%; width:300px; z-index:6; box-shadow:7px 6px 10px #999;}
	.Image200 {float:left; padding: 0 2% 0.2% 4%; width:170px}
	.Image200a {float:left; padding: 0 2% 0.2% 4%; width:168px}
	.contenu p.avecimg {text-indent:0; padding:0;}
	.contenu p.avecimg0 {text-indent:0; padding:0;}
	.contenu p.agrandir {text-indent: 0;}
	.largeur {width:23%; margin:5px auto;}
	.largeur2 {width:30%; margin:5px auto;}
}
@media screen and (min-width: 801px) {
    .Image400 {position:fixed; bottom: 10%; right: 23%; z-index:6; box-shadow:7px 6px 10px #999;}
	.Image200 {float:left; padding: 0 2% 0.5% 8%}
	.Image200a {float:left; padding: 0 2% 0.5% 8%; width:196px}
	.contenu p.avecimg {text-indent:0; padding:0 4% 0 4%;}
	.contenu p.avecimg0 {text-indent:0; padding:0 4% 0 4%;}
	.contenu p.agrandir {text-indent: 4.5%;}
	.largeur {width:13.66%;}
	.largeur2 {width:17.8%}
}

.a_gauche {	float:left;	max-width:160px; min-width:100px; margin:0 2% 1px 4%;}

.a_droite1 {float:right; max-width:180px; min-width:80px; margin:0 4% 1px 2%;}		/*max-width:160px; min-width:100px;*/
@media screen and (max-width: 800px){.a_droite1 {width:40%;}}

.a_droite2 {float:right; width:45%;  font-size:0; margin:6px 4% 0px 2%; box-sizing:border-box;}
@media screen and (max-width: 800px){.a_droite2 { min-width:90px;}}
@media screen and (min-width: 801px) {.a_droite2 { max-width:250px; min-width:150px;}}	

.a_droite3 {float:right; width:35%; margin:6px 4% -2px 2%;}		/*max-width:192px;*/
@media screen and (max-width: 800px){.a_droite3 {min-width:170px;}}
@media screen and (min-width: 801px) {.a_droite3 {max-width:200px; min-width:180px;}}	

.a_drImg {margin:0; width:99%;}
.a_drImg1 {margin:0; max-width:99%;}

#honneur {display:block; margin: 15px 4% 10px 2.5%; background-color:white; padding:6px 10px 0px 15px; border: 2px solid #FFA551}  /* orange */
#declaH {text-indent:0; text-align:justify}
#verifWK {margin:5px 0 0px 0px; font-size: 10.5pt; text-align:justify}
#repOui {padding:5px 0 5px 20px; color:limegreen; font-weight:bold}
#commenteOui {display:inline-block; padding: 0 10px 0 5px}
#repNon {padding:0 0 6px 20px; color:red; font-weight:bold}
a {color:#0050FF; text-decoration:none}
a.ng {font-weight:normal; color:#0050FF; text-decoration:none}