/* Eléments principaux de la page */
body
{
    
	font-family: 'Trebuchet MS', sans-serif, Arial;
	color: black;
	background-color: green; 
}

#bloc_page
{
    width: device-width; /* L'affichage s'adapte à l'écran */
    margin: auto; 
	background-color: lavender; 	
}

	
section h1, footer h1
{
    font-family: Dayrom, serif;
    font-weight: normal;
    
}


/* Header */
header
{

	color: darkslateblue;
	background-color: lavender;	
	background-image: url("images/baniere.jpg");		
	background-repeat: no-repeat;
	background-position: justify; /* Optionnel: centre l'image */
	background-size: contain;       /* Optionnel: contient l'image dans l'espace sans répéter */
}

#titre_principal
{
	text-align: center;
	padding-bottom: 5px;
	
}


#image_indexation
{
	width: 100%;
	display: block;
	margin-left: auto;
	margin-right: auto;
		
}


#titre_principal a
{

	opacity: 90%;
	color : red;
}

header h1
{
    font-family: 'BallparkWeiner', serif;
	font-size: 2.2em;
    font-weight: bold;	
	color:black;	
}


header h2
{
    font-family: Dayrom, serif;
    font-size: 1.7em;
    text-align: center;
    font-weight: normal;
	color:red;
}
	
header h3
{
    font-family: Dayrom, serif,  ;
    font-size: 1.4em;
    text-align: center;
    font-weight: normal;
	
	
}
	
header img
{
	
	 /*inutile pour le moment*/
}	
	#menu ul
		{
			
			background-color : darkslateblue;
			text-align: center;
			padding: 5px 10px 5px 10px;
			
		}
	#menu li
		{
			display: inline-block; /*affichache horozontale*/
			font-family:  arial,Times New Roman,verdana Arial Black, Times, serif;
			font-size: 1.0em;
			padding-right : 15px;
			padding-left: 15px;
			color: snow;
			background-color : #3572b8; 		
			
		}
		
		/*menu déroulant*/
	.sous{
    display: none;
    box-shadow: 0px 1px 2px #CCC;
    background-color: white;
    position: absolute;
    width: 100%;
    z-index: 1000;	
	font-size: 0.8em;
	}
	nav > ul li:hover .sous{
    display: block;
	}
	
	.sous li{
    float: none;
    width: 100%;
    text-align: left;
	
	}
	.sous a{
    padding: 2px;
    border-bottom: none;
	}
	
	.sous a:hover{
    border-bottom: none;
    background-color: RGBa(200,200,200,0.1);
	}
	
	.deroulant > a::after{
    content:" ▼";
    font-size: 1.0em;
	}
		
		
header a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: white;
}

header a:hover /* Apparence au survol des liens */
{
   text-decoration: blink;
   color: lightblue;
}

header a:focus /* Quand le visiteur sélectionne le lien */
{
    background-color: gray;
	
}		


/* Corps */
	
	
article
{
    
	display: inline-block;
	vertical-align: top;
    text-align: justify;
	width: 60%;	
	margin-left: 3%;
	margin-right: auto;
	color:  ;	
	background-color: ; 
}

article h2
{
    font-size: 1.5em;
	padding-bottom:5px;
	text-align: center;
	
}

article h3
{
    font-size: 1.03em;
	text-align: center;
	background-color: lightgray;
	padding-bottom: 2px;
	margin-right: 15px;
		
}
article p
{
    font-size: 0.9em;
	margin-left:25px;
	margin-right:25px;
	
	
}

/* CSS publications # */
  #numero 
{
	text-align: justify;
	margin-bottom: 30px;	
	display:flex;
    justify-content: center; /* ou flex-end, space-between */
    gap:25px; /* Espace entre les liens */
	text-align: center;
}

  #numero img
{
	width: 100%;
	margin: auto;
			
}

 #numero a:hover /* Apparence au survol des liens */
{
   color: darkslateblue;
   background-color: orange; 
}

 .telecharge 
{
	text-align: center;
	margin-left: 300px;
	background-color : lightyellow;
	border: 2px solid grey;
	padding: 5px;
			
}

 #telecharge a:hover /* Apparence au survol des liens */
{
   color: blue;
   background-color: orange; 
}

article li
{
	margin-right: 15px;
    margin-left:50px;
            	
}

		#sommaire 
		{
			width: 90%;
			margin-right:2px;
			margin-left:50px;
			text-align: justify;		
				
		}
		
		#sommaire td
		{
			
			text-align: justify;		
			padding-bottom: 7px;	
			
		}
		

article a /* Liens par défaut (non survolés) */
{
   text-decoration: none;
   color: black;
}

article a:hover /* Apparence au survol des liens */
{
   text-decoration: blink;
   color: grey;
   background-color: ; 
}

article a:focus /* Quand le visiteur sélectionne le lien */
{
    background-color: lightblue;
	
}	


	
	
aside /* Numero de la revue, à droite  */
{
    display: inline-block;
	text-align: center;
	position: relative;
	float: right;
    width: 15%;   	
	font-family: tahoma,Comic sans ms,Book antiqua, verdana, cambria, Times, serif;
	margin-left: 10px;
	margin-right : 10px;	
	background-color:;
	padding-left: 10px;
	padding-right: 10px;
	padding-bottom: 10px;
}


aside img
{
	
	width: 80%; 
	position: justify;
	margin: auto;
	padding-left: 20px;
}


aside h4
{
	
	text-align: center;
	color:red;
	background-color:white;
	font-size: 0.8em;
	padding-bottom: 2px;
	border: 2px solid;
	
}


aside p
{
	margin : 5px;
	padding: 10px;
	font-size: 0.90em; 
	text-align: justify;
	color:darkslateblue;
	background-color: ; 
	border: 1px solid red;
				
}		


aside a
{
	margin : 5px;
	font-size: 0.9em;	
	text-align: justify;		
}

	aside a /* Liens par défaut (non survolés) */
	{
		text-decoration: none;
		color: green;
	
	}

	aside a:hover /* Apparence au survol des liens */
	{
		text-decoration: blink;
		color: lightblue;
		
	}

	aside a:focus /* Quand le visiteur sélectionne le lien */
	{
		background-color: grey;
	
	}	

  #publiés a /* Pour les article dans l'aside droit */
{
	text-align: center;
}

#indexation /* Aside indexation  */
{
    
	text-align: justify;
	font-family:verdana, Book antiqua,tahoma,Comic sans ms,  cambria, Times, serif;
	margin: 10px;
	padding: 10px;
	background-color:;
	
	
}


#gauche /* Aside organigramme à gauche  */
{
    display: inline-block;
	text-align: justify;
	position: relative; 
	float: left;
	width:15%;
	border: ;	
	font-family: tahoma,Comic sans ms,Book antiqua, verdana, cambria, Times, serif;
	margin-left: 10px;
	background-color: lightblue;

}

#gauche img
{	
	width: 100%; 
	position: center;
}


#gauche h3
{	
	text-align: justify;
	font-size: 0.9em;
	margin-bottom: 2px;
	text-align: center;

}



#gauche h4
{
	font-size: 0.8em; 
	text-align: center;
	color: ; 
	
}		

#gauche p
{
	font-size: 0.7em; 
	text-align: center;
	color: ; 
	border: none;
}

#gauche a
{
	margin : 5px;
	font-size: 0.7em;
	color: white;
	text-align: justify;			
}




/* Footer */
footer
{
	width: device-width;
	height: auto;
	background-color: whitesmoke;
	padding-top: 10px;		
}
footer li
{
   	font-size: 1.0em;
	text-align: center;
	margin: 10px;
	display: inline-block;
}

footer ul
{
   	font-size: 0.9em;
	margin-left:150px;
	text-align: center;
	display: inline-block;
}

#contact
{
	display: inline;
	margin: 5px;
	text-align: center;
}

#contact img
{
	width: 110%;
}

footer p
{
   	font-size: 0.8em;
	
}

/* Sur tous types d'écran, quand la largeur de la fenêtre est comprise entre 120px et 767px */
@media all and (min-width: 120px) and (max-width: 767px)
{
#bloc_page
	{
		
		width: 100%;
		margin: 2px;
			
	}
	
	article
	{
			
			width: 100%;
			margin-left: 0px;							
	}

	footer 
	{
			width: 100%;
	}
	
	#gauche /* Aside organigramme à gauche  */
	{

    	width:100%;	
		margin-left: 0px;	

	}
	
	aside
	{

		width: 100%; 

	}

	aside img
	{

		width: 100%; 
		height: 30%;
		

	}
}
	



@media all(min-width:768px)and (max-width: 1366px)
{
#bloc_page
	{
		
		width: 100%;
		margin: 2px;
	}


}


@media all(min-width: 1367) 
{
#bloc_page
	{
		width: 100%;
		margin: 2px;
	}
	
		
}