#bloc_page{border: none;/*1px solid white,à remettre en cas de travail*/
           width:80%;                     	
           margin:auto;}

#banniere {     height: 200px;
		width:100%;
		position: relative;
		margin-top: 15px;		
		margin-bottom: 25px;		
		background:none;
		border-radius: 5px;				
		
		box-shadow: 0px 4px 4px #1c1a19;
		
		}

#titre1{	color:white;
       		font-size:4.0em;
       		font-style:arial,verdana,sans-serif;
		position:absolute;
      		margin:100px 40px;
		text-shadow:2px 2px 2px white;
		font-style: italic;
		}

#titre2{	color:white;
       		font-size:2.0em;
       		font-style:arial,verdana,sans-serif;
		position:absolute;
      		margin:auto;}

 body{		background:url("photos/fondx.jpg") ;/*image de fond dans le meme dossier*/
     		background-repeat:no-repeat;/*image unique*/ }  		
		

nav {		/* tous les items de la navigation, des liens*/
		display:inline-block;/*--pour aligner les menus et non les entasser*/
		font-style:arial,verdana,sans-serif;
     		width:100%;		
     		margin:auto;		
      		border:none; /* a remetre pr travailler */   
		font-style:arial,verdana,sans-serif;}

nav ul{		list-style-type: none;}/*retire le point noir devant ch item*/

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

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

 	      		

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

#section {	width:80%;
		margin:auto;
		border:none;/*1px solid white cadre qui entoure les sections*/}	

section1,section2/*colonnes correspondantes aux miniatures*/
	 {	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid white*/
		width:150px;
		height:600px;		
		margin-top:15px;		
		position:relative;
		margin-left:40px;}

section3{	display:inline-block;/* colonne alignée, correspondant aux infos*/
		border:none;/*1px solid white ;*/
		width:300px;
		height:600px;				
		margin-top:15px;		
		position:relative;
		margin-left:60px;}

article1  {	position: absolute;
		width:200px;
		height:190px;
		margin-top: 62px;
		margin-left:0px;		
		box-shadow:none;/* 0px 4px 4px #1c1a19*/}

article2{	position:absolute;/*2ème image*/
		width:130px;
		height:190px;
		margin-top:400px;
		margin-left:0px;
		box-shadow:none;/* 0px 4px 4px #1c1a19*/}

article3{	position: absolute;/*3ème image*/
		width:190px;
		height:200px;
		margin-top:250px;
		margin-left:0px;		
		}

article4{	position: absolute/*text*/;
		width:300px;
		height:500px;
		margin-top: 60px;
		margin-left:60px;
		text-align:center;				
		border:none /*1px solid white*/;
		border-radius:10px;
		background-color:none/*rgb(170,210,255)*/;}


		
h1 {		color:white;
		margin-left:3px;
		font-size:medium;}


p1	{font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:medium;
	color:white;
	text-align:justify;}

p2{	font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:medium;
	color:white;
	text-align:justify;}



p3{	font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:medium;
	color:black;
	text-align:justify;}

p4{	position:relative;
	font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:small;
	color:black;
	text-align:justify;	
	margin-top:300px;}

#pensee{width:80%;	
  	margin-left:15px;
	border:none;/*1px solid white*/
	padding:10px;/*marge intérieure*/
	margin-bottom:25px;}
	
	


/* 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:none;
		border-radius: 5px;		
		box-shadow: 0px 4px 4px #1c1a19;}		
	
		
#titre2{	color:white;
       		font-size:1.5em;
       		font-style:arial,verdana,sans-serif;		
      		margin:auto;
      		}	
      				 
#titre1 {	color:maroon;
       		font-size:1.5em;
       		font-style:arial,verdana,sans-serif;		
		margin-top:30px;
		margin-left:30px;		
		font-style: italic;} 
		
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:maroon;
       		padding-bottom:0px;
		text-decoration:none;
		font-style: italic;}	
         
         
    #section {	width:100%;
		margin:auto;
		border:none;/*1px solid white cadre qui entoure les sections*/}	     
     
section1
	 {	display:inline-block;/*les colonnes sont alignées*/
		border:none;/*1px solid white*/
		width:150px;
		height:190px;
		position:relative;		
		margin-top:50px;			
		margin-left:0px;}
		
	article1 {display:none;}
    	article2{position:absolute;/*image pinceau*/
		width:130px;
		height:190px;
		margin-top:20px;
		margin-right: 10px;		
		box-shadow:none;/* 0px 4px 4px #1c1a19*/}
		
section2 {display:none;}
	
section3{	display:inline-block;/* colonne alignée, correspondant au mot de bienvenue*/
		
		border:none;/*1px solid white*/
		width:50%;
		height:350px;		
		margin-top:5px;
		margin-left:20px;		
		position:absolute;
		}
		
	article4{position: absolute/*text*/;
		width:100%;
		height:300px;
		margin-top:5px;
		background-color:none;
		text-align:center;						
		border:none /*1px solid white*/;
		border-radius:10px;
		}
			
	
   
 
p1	{font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:0.7em;
	color:maroon;		
	text-align:justify;}	
	

		       
 #pensee{width:80%;
	position: absolute;
	margin-top:100px;
	margin-left:25px;
	border:non;/*1px solid white*/
	padding:0px;/*marge intérieure*/
	       
  p3{	font-family: papyrus,arial,verdana,sans-serif/*interruption*/;
	font-size:0.8em;
	color:black;
	text-align:center;}
    }