@charset "utf-8";
/* CSS Document */
BODY {
	background-image: url("../img/planisphere1b2.jpg");
	background-repeat: no-repeat;
	background-position: top;
	background-attachment: fixed;
	background-size: cover; /* pour étire/rogner l'iamge pour couvrir tout l'écran*/
	background-color:rgba(244,243,243,0.80)/*#061018*/;
	/*background-color:#fab900;*/
	
	font-family:Verdana, Arial, Helvetica, sans-serif;
	color:#00004d;
	/*width:75%;
	margin:auto*/
}

/* hyperliens par défaut */
a {color:#006aff;text-decoration:none}
a:hover {color:#006aff;background:transparent; text-decoration:underline}

/*image de fond*/
#couchedefond {
	position: relative; /*l'élément est positionné mais il se place tout seul*/
}
#couchedefond img {
	position: absolute;
    top: 0;
    left: 0;
	z-index: 0;
}

#conteneur {
	margin:0 auto;
	width:65%;
	/*margin:1% auto;*/
	/*ajout pour centrer le conteneur avec l'image en fond*/
	display:block;
	position: relative;
	/*background-color:rgba(255,255,255,1);*/
	background-color:rgba(232,232,232,0.60);
	border: .5em solid #fab900/*#00004D*/;
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	-khtml-border-radius:.5em;
}

h1, h2, h3, h4, h5 {
	margin:0
}

h2 {
	margin-top:10px;
	text-align:center;
	/*margin-left: 2%;*/
	font-size:110%;
}
h3{
	font-size:110%;
	text-align:center;
	color:#ff5757;/*#006aff*/
}
h4 {
	font-size:90%;
	text-align: center;
}
h5 {
	font-style:normal;
	text-align: left;
	margin-left:1%;
	padding:4px 0;
	font-size:90%;
}
h5 a:hover {text-decoration:underline;}
h5 a {}

h6 {
	font-style:normal;
	text-align: left;
	margin-left:2%;
	padding:0;
	font-size:85%;
}
h6 a:hover {text-decoration:underline;}
h6 a {}

#header {
	display: flex;
	flex-direction:column;
	margin-left: auto;
   	margin-right: auto;
	/*ajout pour avoir le fond du header blanc*/
	/*background-color:rgba(255,255,255,1.00);*/
}

#multicouche {
	position: relative; /*l'élément est positionné mais il se place tout seul*/
}

#multicouche img {
	position: absolute;
    top: 0;
    left: 0;
}
     
#bandeau {
	z-index: 1;
}
     
/*#logo {
	z-index: 2;
}*/

#header2 {
	display: flex;
	flex-direction:column;
	background:url("../img/logo-eps.png") no-repeat left;
	margin-top:0.5em/*10%*/;
}

#header2 h1{
    margin: 0.3em auto;
    /*padding-bottom: 0.3em;*/
	text-align: center;
	color:#00004d;
	font-size:150%;
}
#header2 h2{
    margin: 1em auto;
    /*padding-bottom: 1em;*/
	text-align: center;
	color:#00004d;
	font-style:italic;
	font-size:90%;
}

/*Toutes les boites*/
nav, #gauche, section ,#droite, footer, footer2, connexion {
	padding:5px;
}

affichage_connexion {
	display:block;
}
.container1000 {
  	width:auto;
  	display: flex;
  	margin:0.5em auto;
}
.row1000 {
	flex-direction: row;
	justify-content: center;
}
.item1000 {
 	width:75%;
	font-size:110%;
	margin:0.3em;
	padding:0.3em;
  	background-color:#FFF;
  	border: 0.08em solid #00004d;
	-moz-border-radius:.5em;
	-webkit-border-radius:.5em;
	-khtml-border-radius:.5em;
	text-align: center;
}

/*Compteur simple*/
compteur{
	/*display: flex;
	flex-direction: column;*/
	margin-top:3%;
	margin-bottom:2%;
}

compteur h1{
	/*align-content: center;*/
	text-align: center;
	font-size:500%;
}

#comptearebours, #datedujour {
	margin: 6px auto;
	text-align: center;
	color:#00004d;
	font-style:normal;
	font-size:110%;
}

/*Pied de page*/
footer {
	background-color:#00004d;
}
article{
	/*align-content: flex-start*/
}

/* Style du formulaire*/
form {
  	/* Uniquement centrer le formulaire sur la page */
  	margin: 1% auto;
	margin-bottom:2%;
  	width: 70%;
  	/* Encadré pour voir les limites du formulaire */
  	padding: 0.5em;
  	/*border: 1px solid #00004d;*/
  	/*border-radius: 1em;*/
	/*-moz-border-radius:1em;
	-webkit-border-radius:1em;
	-khtml-border-radius:1em;
	background-color:#fff;*/
}

/* style des boutons */
input[type=submit] {
	display:block;
    background-color:#006aff;
    color:#fff;
	font-style:oblique;
	font-size:140%;
	margin:1% auto;
	padding: 6px 20px;
    border: 2px solid #006aff;
	-moz-border-radius:0.5em;
	-webkit-border-radius:0.5em;
	-khtml-border-radius:0.5em;
    cursor: pointer;
}
input[type=submit]:hover {
    background-color:#fff;
    color: #006aff;
    border: 2px solid #006aff;
}

nav, main {
	display:flex
}
/* Barre de navigation */
nav {
	background-color:#00004d;
	/*justify-content:space-around;*/
	justify-content:left;
	flex-direction:row;
}
nav a {
	color:#FFFFFF;
}
nav a:hover {
	color:#FFFFFF;
	text-decoration:underline
}

#gauche, #droite {
	/*flex:0 0 20%;*/
	/*background-color:#eee;*/
}

main {
	flex-direction:column
}

footer{
	display:flex;
	display-direction:row;
	justify-content:center;
}
footer h2{
    margin: 0 auto;
	text-align: center;
	color:#ffffff;
	font-size:90%;
}
footer2 {
	display:flex;
	display-direction:row;
	font-size:70%;
	font-style:italic;
	color:#00004d;
}
footer2 a {	color:#006aff}
footer2 a:hover {color:#006aff;	text-decoration:underline}

#BteArticle {
	padding-left:4%;
	font-size:90%;
	background-color:rgba(255,255,255,0.50)
}

@media screen and (min-width: 1025px) and (max-width: 1280px){
	/*body{width:75%;}*/
	#conteneur {}
}

@media screen and (min-width: 600px) and (max-width: 1024px){
	/*body{width:85%}*/
	h2 {font-size:100%;}
	#conteneur {}
	#header2 {
		/*background:url();*/
	}
	#header2 h1{
		font-size:110%;
	}
	section#contenu {
		/*float:none;
		width:auto;*/
	}
	aside#sidebar{
		/*float:none;
		width:auto;
		margin: 0 0 10px 0;*/
	}
	article h1{
		font-size:1.5em;
	}
	h4 {
	text-align: left;
	}
}

@media screen and (max-width: 599px){
	/*body{width:98%}*/
	h2 {font-size:90%;}
	#conteneur {
		width:95%;
		margin:0 auto;
	}
	#header2 {
		/*background:url();*/
	}
	#header2 h1{
		font-size:85%;
	}
	section#contenu {
		float:none;
		width:auto;
	}
	aside#sidebar{
		float:none;
		width:auto;
		margin: 0 0 10px 0;
	}
	article h1{
		font-size:1.5em;
	}
	h4 {
	text-align: left;
	}
}