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



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



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



#titre{		color:blue;
       		font-size:3.0em;
       		font-style:Arial,"Trebuchet SM",sans-serif;
		position:absolute;
      		margin:100px 40px;}

/* 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;}    
nav ul{		list-style-type: none;}/*retire le point noir devant ch item*/
nav li {	display:inline-block;
        	margin-right: 50px;
       		margin-left:50px;
		margin-bottom:10px;} /*positionne les liens les uns à coté des autres*/

nav a {		font-size: 1.3em;/*liens par defaut*/
       		color:black;
       		padding-bottom:3px;
       		text-decoration:none;
		}
	
nav a:hover{	color:yellow;} /*apparence au survol des liens...*/

 #section {	width:100%;
		margin:auto;}	

section1,section2,section3  {	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid black*/
		width:250px;
		height:600px;		
		margin-top:15px;		
		position:relative;
		margin-left:60px;}
		
article1  {	position: absolute;/*Tortues*/
		width:190px;
		height:130px;
		margin-top: 62px;
		margin-left:25px;		
		box-shadow: 0px 4px 4px #1c1a19;}
		
article2{	position:absolute;/*Méduse*/
		width:150px;
		height:200px;
		margin-top:310px;
		margin-left:45px;
		box-shadow: 0px 4px 4px #1c1a19;}



article3{	position: absolute;/*Mirroir*/
		width:190px;
		height:150px;
		margin-top:62px;
		margin-left:30px;		
		box-shadow: 0px 4px 4px #1c1a19;}
		
article4{	position:absolute;/*Baleine*/
		width:150px;
		height:190px;
		margin-top:320px;
		margin-left:50px;
		box-shadow: 0px 4px 4px #1c1a19;}


article5{	position: absolute;/*7ème image*/
		width:150px;
		height:190px;
		margin-top: 40px;
		margin-left:80px;		
		box-shadow: 0px 4px 4px #1c1a19;}
		
article6{	position:absolute;/*8ème image*/
		width:190px;
		height:130px;
		margin-top:380px;
		margin-left:70px;
		box-shadow: 0px 4px 4px #1c1a19;}




p1	{font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:medium;
	color:black;
	text-align:justify;}
p2	{font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:small;
	color:black;
	text-align:justify;}
	
.intitule{	color:black;
		font-style:arial,verdana,sans-serif;}
	

/* 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: relative;		
		margin-top:5px;						
		background: url("photos/muret.jpg")no-repeat ;
		border-radius: 5px;		
		box-shadow: 0px 4px 4px #1c1a19;}		
	
		
#titre{		
		color:white;
       		font-size:1.5em;
       		font-style:arial,verdana,sans-serif;		
      		margin-top:30px;
		margin-left:30px;
		}
nav li {	display:inline-block; /*positionne les liens les uns à coté des autres*/
		margin-bottom:25px;
        	margin-left:0px;
        	margin-right:10px;       				
		position:relative;}

nav a {		font-size: 0.8em;/*liens par defaut*/
       		color:white;
       		padding-bottom:0px;
		text-decoration:none;
		font-style: italic;}
		
#section {	width:100%;
		margin:auto;}	

section1 {	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid black*/
		width:250px;
		height:450px;		
		margin-top:0px;
		margin-left:0px;		
		position:relative;
		}

section2{	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid black*/
		width:250px;
		height:200px;		
		margin-left:200px;		
		position:relative;
		}		
					
section3{	display:none;}

article1  {	position: absolute;/*Tortues*/
		width:190px;
		height:150px;
		margin-top: 0px;
		margin-left:25px;		
		box-shadow: 0px 4px 4px #1c1a19;}
		
article2{	position:absolute;/*Méduse*/
		width:150px;
		height:200px;
		margin-top:200px;
		margin-left:45px;
		box-shadow: 0px 4px 4px #1c1a19;}
		
article3{	position: absolute;/*Mirroir*/
		width:190px;
		height:150px;
		margin-top:0px;
		margin-left:30px;		
		box-shadow: 0px 4px 4px #1c1a19;}		
		
article4{	display:none;}				

p1{		font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
		font-size:0.8em;
		color:black;		
		text-align:justify;
		}	
	
.intitule {	color:white;
		font-style:arial,verdana,sans-serif;
		font-size:0.8em;}