#bloc_page	{width:80%; 
		margin:auto;           	
		border:none;}/* a remettre si besoin :1px solid black*/



body		{background-image:url("photos/ginko.jpg") ;/*image de fond dans le meme dossier*/
     		no-repeat/*image unique*/
     		fixed; }/* l'image de fond ne bouge pas*/	

#banniere {   	width:100%;
		height: 200px;
		
		position: relative;		
		margin-top: 15px;
		margin-bottom: 25px;
		background-image:url("photos/muret.jpg")/*none*/;
		border-radius: 5px;		
		box-shadow: 0px 4px 4px #1c1a19;		
		}

	
#titre{		position:absolute;
		margin:100px 40px;
		color:maroon;
       		font-size:3.0em;
       		font-style:arial,verdana,sans-serif;
		font-style:italic;
		}

/* tous les items de la navigation, des liens*/
nav {		display:inline-block;/*--pour aligner les menus et non les entasser*/
		font-style:Arial,Verdana,sans-serif;	
     		width:100%;
     		margin:auto;

      		border:none;} /*a remettre pr travailler(1px solid black)*/   
nav ul{		list-style-type: none;}/*retire le point noir devant ch item*/

nav li{		display:inline-block;/*positionne les liens les uns à coté des autres*/
        	margin-left:60px;
		margin-right:40px;
		}

nav a {		font-size: 1.3em;/*liens par defaut*/
       		color:white;
       		padding-bottom:0px;
		text-decoration:none;}

nav a:hover{	color:yellow;} /*apparence au survol des liens...*/ }


#section {	width:100%;
		margin:auto;
		border:none;/*cadre qui entoure les sections*/}	


section4 {	display:inline-block;/*les colonnes alignées*/
		border:none;/*1px solid black*/
		width:300px;
		height:600px;		
		margin-top:15px;		
		position:relative;
		margin-left:10px;}

section5
	  {	display:inline-block;/*les colonnes alignées*/
		border:none;/*1px solid black*/
		width:300px;
		height:600px;		
		margin-top:15px;		
		position:relative;
		margin-left:10px;}
section6
	 {	display:inline-block;/*les colonnes alignées*/
		border:none;/*1px solid black*/
		width:300px;
		height:600px;		
		margin-top:15px;		
		position:relative;
		margin-left:60px;}

article7  {	position: absolute;
		width:200px;
		height:150px;
		margin-top:50px;
		margin-left:30px;		
		box-shadow: 0px 4px 4px #1c1a19;}

article8{	position:absolute;
		width:230px;
		height:165px;
		margin-top:380px;
		margin-left:20px;
		box-shadow: 0px 4px 4px #1c1a19;}



article9{	position:absolute;
		width:230px;
		height:165px;
		margin-top:200px;
		margin-left:50px;
		box-shadow: 0px 4px 4px #1c1a19;}

article10{	position: absolute;
		width:200px;
		height:308px;
		margin-top: 260px;
		margin-left:50px;		
		box-shadow: 0px 4px 4px #1c1a19;}

article11{	position: absolute/*text*/;
		width:250px;
		height:200px;
		margin-top: 10px;
		margin-left:5px;				
		border:none /*1px solid white*/;}




.intitule {color:maroon;
		font-style:Arial,"Trebuchet SM",sans-serif;}



p	{font-family: papyrus,arial,verdana,sans-serif/*blabla*/;
	font-size:large;
	color:white;
	text-align:center;}



/* Nouvelles règles si la fenêtre fait au plus 1024px de large */
@media screen and (max-width: 1024px){
	#bloc_page{border: none;/*1px solid white,à remettre en cas de travail*/
           width:auto; } 
           
  #banniere {	height:80px;
		width:100%;
		position: absolute;		
		margin-top:5px;						
		background:none;
		border-radius: 5px;		
		box-shadow: 0px 4px 4px #1c1a19;}
		
#titre{		position:relative;
		margin-top:20px;
		margin-left:150px;
		color:white;
       		font-size:1.5em;
       		font-style:arial,verdana,sans-serif;
		font-style:italic;
		}
nav li {	display:inline-block;
		margin-top:100px;
        	margin-left:0px;
        	margin-right:10px;		
		position:relative;} /*positionne les liens les uns à coté des autres*/

nav a {		font-size: 0.8em;/*liens par defaut*/
       		color:white;
       		padding-bottom:0px;
		text-decoration:none;}
		
	  
section4 {	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid black*/
		width:220px;
		height:450px;		
		margin-top:5px;
		margin-left:0px;		
		position:relative;}

section5
	  {	display:none/*les colonnes alignées*/;}
		
section6
	 {	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid black*/
		width:220px;
		height:450px;		
		margin-top:5px;
		margin-left:10px;		
		position:absolute;}	  
	  
article7  {	position: absolute;
		width:250px;
		height:132px;
		margin-top:10px;
		margin-left:0px;		
		box-shadow: 0px 4px 4px #1c1a19;}	  
	  
article8{	position:absolute;
		width:230px;
		height:165px;
		margin-top:200px;
		margin-left:0px;
		box-shadow: 0px 4px 4px #1c1a19;}
.intitule {color:maroon;		
		font-size:0.8em;}
			
article10{	position: absolute;
		width:200px;
		height:308px;
		margin-top: 260px;
		margin-left:10px;		
		box-shadow: 0px 4px 4px #1c1a19;}
		
article11{	position: absolute/*text*/;
		width:220px;
		height:200px;
		margin-top: 20px;
		margin-left:5px;				
		border:none /*1px solid white*/;
		}
		
p	{font-family: papyrus,arial,verdana,sans-serif/*blabla*/;
	font-size:0.9em;
	color:white;
	text-align:center;}