@font-face {
font-family: NEUROPOL;
src: url('NEUROPOL.ttf');
}

body {
  background: #fF5F3F3 ; /*blanc cassé*/
  padding:0;
  font-family: calibri;
    }
 
#fullpage {
  width:80%;
  display:flex;
  flex-direction:column;/*definition axe principal*/
  justify-content:start; /*a partir du haut*/
  margin:0 auto;
  position:absolute;
  top:0;
  bottom:0;
  left:0;
  right:0;
}
#main {
  display:flex;
  flex: auto ;
  min-height: 450 px;
  max-width: 1000 px; 
  flex-direction:column;
  /*justify-content:space-between;*/
  justify-content:start; /*a partir du haut*/
  }
#footer {
  min-height:15px;
  flex: none ;
  justify-content:center;
  text-align: center;
  font-size: 10px;
  color: black;
 }		
	
#middle {
  display:flex;
  flex: 1 1 auto ; 
  flex-wrap: nowrap;
  min-width: 600 px;
 
 /* height:100%;*/
  justify-content:center;
  

  
}
	
#articledujour {
	width: 100%;
	/*z-index:1;
	back-ground: transparent;*/
}




#header {
  display:flex;
  flex-direction:column;/*definition axe principal*/
  justify-content:start; /*a partir du haut*/
  min-height:120px;
  margin-top: 5 px;
  margin-bottom: 0px;
  }


.bandeausup{
	display:flex;
	flex-direction: row-reverse;
	flex-wrap: nowrap;
	align-items: center;
	justify-content: space-between;
	min-height:80px;
	}


#titre{
	flex: 1 1 auto;
	color: black;
	font-size: 60px;
	text-align: center;
	font-family: NEUROPOL;
	text-shadow: 3px 3px 4px #444;
}
#droit{
 text-align: center;
 font-family: calibri;
 font-size: 0.9rem;
 color: black;	
 }
#gauche{
	 font-family: calibri;
color: black;	 
 text-align: center;
 font-size: 0.9rem;
 }

input[type=button] {
 background-color:transparent;
 color: black;
 border:none;
 min-width:100 px;
 font-family: calibri;

 font-size: 0.9rem;
 border:1px solid #F5C5C5;
 border-radius:5px;
 box-shadow:1px 1px 2px #C0C0C0;
 }
input[type=button]:hover {background-color: red;}


/*
#bouton{
 max-height: 15 px; 
 border: 0;
 line-height: 2.5;
 padding: 0 20px;
 font-size: 1rem;
 text-align: center;
 color: #fff;
 text-shadow: 1px 1px 1px #000;
    border-radius: 10px;
    background-color: rgba(220, 0, 0, 1);
    background-image: linear-gradient(to top left,
                                      rgba(0, 0, 0, .2),
                                      rgba(0, 0, 0, .2) 30%,
                                      rgba(0, 0, 0, 0));
    box-shadow: inset 2px 2px 3px rgba(255, 255, 255, .6),
                inset -2px -2px 3px rgba(0, 0, 0, .6);
}


#bouton:hover {
    background-color: rgba(255, 0, 0, 1);
}

#bouton:active {
    box-shadow: inset -2px -2px 3px rgba(255, 255, 255, .6),
                inset 2px 2px 3px rgba(0, 0, 0, .6);
}*/




#header nav{
min-height:30px;
}


#header nav ul{
	display: flex;
	flex-direction: row;
	flex : 1 1 auto;
    justify-content: space-evenly; /*center;*/
	/*text-align: center;*/
	list-style-type: none;
	background-color: red;
	margin-bottom: 12px; 
    padding-left: 0;
	
	/*bordure*/
	border:1px solid #F5C5C5;
    border-radius:5px;
    box-shadow:1px 1px 2px #C0C0C0;
}

#header nav ul li {
    flex: 1 1 auto;
    padding: 4px;
    position: relative; /*?*/ 
    transition-duration: 0.5s; /*En combien de temps elles apparaissent*/
    width: 100%;
    /*text-align: center;*/
	text-align: left;
	height:30 px;
	margin-left:4px; /*marge a gauche*/
	border:1 px solid #CCCCCC;
	line-height:30px;
}


#header nav ul li ul{
    background-color: red;
    list-style-type: none;
    margin: 0; 
    padding-left: 0;
	z-index:1;
}


#header nav ul li ul li{
    flex: 1 1 auto;
    padding:8px;/*à changer?*/
    position: relative; /*?*/ 
    transition-duration: 0.5s; /*En combien de temps elles apparaissent*/
    width: 100%;/*à changer?*/
    text-align: left;
	height:20px;
	flex-wrap: nowrap;
}


#header nav ul li a{
    color: white; /*Couleur des a en blanc*/
    text-decoration: none;
	font-family: calibri;
}
#header nav ul li a:hover {
    color: black; /*Couleur des a en black*/
    text-decoration: none;
}

#header nav ul li ul li a{
    color: white; /*Couleur des a en black*/
    text-decoration: none;
	font-family: calibri;
}
#header nav ul li ul li a:hover{
    color: black; /*Couleur des a en black*/
    text-decoration: none;
}

#header nav ul li:hover{
    background-color: red;
   
}
#header nav ul li ul li:hover{
    background-color: transparent;
 }



#header nav ul li ul{
    background-color: red;
    visibility: hidden; /*Caché les sous menus*/
    opacity: 0;
    position: absolute; /*Pour que les gds menus s'affichent normalement*/
    left: 0;
    display: none;
	border: 0px;
}

#header nav ul li:hover > ul, 
#header nav ul li:focus-within > ul,
#header nav ul li ul:hover{
    visibility: visible;
    opacity: 1;
    display: block;
}
#header nav ul li ul a:after{
    visibility: hidden;
    opacity: 0;
    display: none;
}

#header nav ul li ul li {
    clear: both; /*Comportement d'un élément qui se situe à coté d'élément flottant*/
    width: 100%;
	
}

/*rajouté vendredi soir le 10 avril mais ça marche pas
#header nav ul li ul:active{
    visibility: hidden;
    opacity:0;
   
} Applique une mise en forme à un élément sur lequel on vient de cliquer.*/




#bloc-gauche {
  display:flex;
  flex-direction:column;
  justify-content: flex-start; /*à voir?*/
  align-items: center;
  margin: 0px;
  /*padding:0px;*/
  width:300px;
  background-color: black;
  /*bordure*/
	border:1px solid #F5C5C5;
    border-radius:5px;
    box-shadow:1px 1px 2px #C0C0C0;
 color: white; /* pour mettre en blanc les textes*/
 padding-top:0.5rem; /*marge en haut à voir?*/
   
}

#bloc-gauche h1 {
 font-family: NEUROPOL;
 color: white;
 font-size: 1.4em;
 margin:0;
 padding:0.1rem;
 /*text-decoration: underline white;*/
 }

#bloc-gauche p {
 font-family: calibri;
 color: #918D92;
 font-size: 1em;
 margin:0;
 padding:0.1rem;
  }

#bloc-gauche ul {

text-align:center;
list-style:none;
margin-left:0;
padding-left:0;
color: white;

text-decoration: underline overline #FF3028;
}

#bloc-gauche li {
/*color: red;	*/
margin-bottom:5px;/* à adapter */

}





#bloc-gauche ul li a:link {color: #FFFFFF; text-decoration: none;border-radius:5px;outline : none}     /* lien non-visité */
#bloc-gauche ul li a:visited {color: white;text-decoration: none;border-radius:5px;outline : none}  /* lien visité */
#bloc-gauche ul li a:hover {color:red ;text-decoration: none;border-radius:5px;outline : none}   /* lien au survol */
#bloc-gauche ul li a:active {color: #FF00FF; border-radius:5px;outline : none}   /* lien sélectionné */


#boite {
margin-left: 30px;
}

img{
	max-width:100%;
}



.diaporama1 {
width: 100%;
/*box-shadow:0px 0px 5px #777;*/
overflow: hidden;
max-width:270px;
margin : 0 px ;
background-color:black;


}

.diaporama1 ul{
padding-top:70%;
margin: 0;
list-style-type: none;
position: relative;
text-align: center;
} 
   
 
.diaporama1 li{
top: 0px;
left: 0px;

animation: diaporama1 25s ease infinite;
position: absolute;
opacity: 0;
display: inline;

}

.diaporama1 li:nth-child(2){
animation-delay: 5s
}

.diaporama1 li:nth-child(3){
animation-delay: 10s
}

.diaporama1 li:nth-child(4){
animation-delay: 15s
}

.diaporama1 li:nth-child(5){
animation-delay: 20s
}


#texte1
{	width: 270 px;
	height: 30 px;
	color: white ;
	font-size: 20 px;
	font-family: century;
}

@keyframes diaporama1 {
0%{opacity: 0}
10%{opacity: 1}
20%{opacity: 1}
25%{opacity: 0}
100%{opacity: 0}
} 

 


.diaporama2 {
width: 100%;
/*box-shadow:0px 0px 5px #777;*/
overflow: hidden;
max-width:270px;
margin : 0px ;
background-color:black;

 
}

.diaporama2 ul{
padding-bottom:75%;
margin: 0;
list-style-type: none;
position: relative
} 
   
 
.diaporama2 li{
top: 0px;
left: 0px;
animation: diaporama2 100s ease infinite;
position: absolute;
opacity: 0;

}

.diaporama2 li:nth-child(1){
animation-delay: 1s
}
.diaporama2 li:nth-child(2){
animation-delay: 15s
}
.diaporama2 li:nth-child(3){
animation-delay: 25s
}
.diaporama2 li:nth-child(4){
animation-delay: 35s
}
.diaporama2 li:nth-child(5){
animation-delay: 45s
}
.diaporama2 li:nth-child(6){
animation-delay: 55s
}
.diaporama2 li:nth-child(7){
animation-delay: 65s
}

.diaporama2 li:nth-child(8){
animation-delay: 40s
}
.diaporama2 li:nth-child(9){
animation-delay: 45s
}
.diaporama2 li:nth-child(10){
animation-delay: 50s
}
.diaporama2 li:nth-child(11){
animation-delay: 55s
}
.diaporama2 li:nth-child(12){
animation-delay: 60s
}
.diaporama2 li:nth-child(13){
animation-delay: 65s
}
.diaporama2 li:nth-child(14){
animation-delay: 70s
}
.diaporama2 li:nth-child(15){
animation-delay: 75s
}
.diaporama2 li:nth-child(16){
animation-delay: 80s
}
.diaporama2 li:nth-child(17){
animation-delay: 85s
}
.diaporama2 li:nth-child(18){
animation-delay: 90s
}


@keyframes diaporama2 {
0%{opacity: 0}
10%{opacity: 1}
20%{opacity: 1}
25%{opacity: 0}
100%{opacity: 0}
} 

 

#calendrier {
	text-align: center;
}

/* flex-basis:280,4 px; min-width:300px;changement ici
  height:100%;
  background:white;
  padding:0 0 64px 0;
  text-align:center;*/

#bloc-centre {
	
	display:flex;
	flex: 1 1 auto;
	background: white;
	text-align: center;
	margin-left: 15px;
	margin-right: 15px;
	overflow: auto;
	
/*  flex:1 1 auto;
  width:70%;
  height:100%;
  margin:0px;*/
  
  bordure
	border:1px solid #F5C5C5;
    border-radius:5px;
    box-shadow:1px 1px 2px #C0C0C0;
	

}


#bloc-droit {
	/*color: black;*/
	
	display:flex;
	flex-direction:column;
	justify-content: flex-start;
	align-items: center;
	margin: 0px;/*changement le 11 avril, avant c'était margin-right*/
	width:300px;
	background-color: black;
	/*background-color: #170101 ;*/
	/*margin-left: 0px;*/
	color: white;
	
	
	/*bordure*/
	border:1px solid #F5C5C5;
    border-radius:5px;
    box-shadow:1px 1px 2px #C0C0C0;
	}
#bloc-droit h1 {
 font-family: NEUROPOL;
 color: white;
 font-size: 1.4em;
 margin:0;
 padding:0.2rem;
 /*text-decoration: underline white;*/
 }

#bloc-droit p {
 font-family: calibri;
 color: #918D92;
 font-size: 1em;
 margin:0;
 padding:0.1rem;

  }

#bloc-droit ul {
/*color: red;*/
text-align:center;
list-style:none;
margin-left:0;
padding-left:0;
 text-decoration: underline overline #FF3028;
}

#bloc-droit ul li {
/*color: red;	*/
margin-bottom:2px;/* à adapter */

}



#bloc-droit ul li a:link {color: #FFFFFF; text-decoration: none;border-radius:0px;outline : none}     /* lien non-visité */
#bloc-droit ul li a:visited {color: white;text-decoration: none;border-radius:0px;outline : none}  /* lien visité */
#bloc-droit ul li a:hover {color:red ;text-decoration: none;border-radius:0px;outline : none}   /* lien au survol */
#bloc-droit ul li a:active {color: #FF00FF; border-radius:0px;outline : none}   /* lien sélectionné */




.menu, .sousmenu{
	text-align:center;
	color: white;
}
.menu{
	height:18px;
/*	width:150px;*/
	padding:5px 0;
/*	background:#404040;
	color:#fff;*/
}
.sousmenu{
	height:18px;
	width:150px;
	padding:1px 0;
	background:transparent;
	margin: auto;/*changé le 11 avril*/
	
	
}
.menu a{
	text-align:center;
	display:block;
	width:100%;
	height:100%;
	/*color:#fff;*/
	font-family:calibri;
	font-size:1rem;
	/*font-weight:bold;*/
	text-decoration:none;
	background:transparent;
}
.sousmenu a{
	display:block;
	width:100%;
	height:100%;
	color:white;
	font-family:calibri;
	font-size:1rem;
	/*font-weight:bold;*/
	text-decoration:none;
	background:transparent;
	text-align:center;
}


#selection_date{
	display:inline-block;
	width : 50%;
	text-align: center;
}

.ui-datepicker-today a.ui-state-highlight {
    border-color: #d3d3d3;
    background: #05f70f ; /*couleur du jour */
    color: #555555;    
}