@charset "UTF-8";
/* CSS Document */

html, body {
	height:100%;
	min-height:100%;
}


body{
	font-family: "calluna",Georgia, "Times New Roman", Times, serif;
	font-weight:900;
	color:#000b52;
	position:relative;

}

	body.accueil{
		background-image:url(../images/autoportrait.jpg);
		background-attachment:fixed;
		background-repeat:no-repeat;
		background-position:center;
	}






/****************************************************/
/**********************NAV****************************/
/****************************************************/




nav{
	margin:25px 0 0 25px;
	position:fixed;
	width:100%;
	
	
}

	nav ul span li a:hover{
		font-family:"calluna",Georgia, "Times New Roman", Times, serif;
		font-weight:700;
		font-style:italic;
	}

	nav ul span li{
		font-size:80%;
		margin-top:20px;
	}

	nav ul li{
		letter-spacing:3px;
		line-height:140%;
	}

		nav ul li a{
			text-decoration:none;
			color:#000b52;
	
		}






/*************************************************************/
/**************************SECTION****************************/
/*************************************************************/


section.projets{
	margin:0 0 0 300px;
	padding:0 0 0 0;
}




	section.projets article{
		padding:25px 0 0 0;
		margin:0 0 0 530px;
		width:300px;
		position:fixed;
		letter-spacing:2px;
	}


		section.projets article h1{
			font-size:200%;
			line-height:90%;
		}
		
			section.projets article h2{
				font-size:100%;
				margin:0 0 20px 0;
				line-height:100%;
			}
			
			section.projets article p{
				line-height:150%;
			}
			
			
			
				section.projets article p.projet{
					margin:10px 0 0 0;
					font-size:90%;
					font-weight:600;
				}
				
				
				
				section.projets article p.année{
					font-size:80%;
					font-weight:600;
					margin:0 0 0 0;
				}
			
			
			
			
				section.projets article p span{
					font-weight:bold;
					font-style:italic;
				}




section.photographie{
	margin:0 0 0 400px;
	padding:25px 0 0 0;
}


	section.photographie img{
		max-height:100%;
		max-width:50%;
		margin:0 0 160px 0;
	}


		section.photographie img.horizontale{
			max-width:90%;
		}





section.photographie p{
		font-size:80%;
		color:#000b52;
		letter-spacing:2px;
		margin:0 0 50px 0;
		text-align:right;
	}



/*************************************************************/
/**************************FIGURE*****************************/
/*************************************************************/



section.projets figure{
	padding:300px 0 0 0;
	width:600px;

}


	section.projets figure img{
		margin:0 0 90px 0;
	}








/**********************************************************/
/************************FOOTER****************************/
/**********************************************************/





footer{
	background-color:#8BA1AD;
	position:absolute;

	
}

	footer aside.social i{
		display:inline-block;
	}
	
	footer aside.social{
		width:200px;
		text-align:right;
		display:block;
		position:fixed;
		right:25px;
		bottom:25px;

		
	}

	footer aside.social a{
		text-decoration:none;
		color:#000b52;
	}
	
	
	
	
	
/********************************************************/
/*******************bÉATRICEdUBREUIL*********************/
/********************************************************/
	
	
	
	
div.mon-nom img{
	width:100%;
}

div.mon-nom a{
	text-decoration:none;
	color:#000b52;
	position:fixed;
	left:25px;
	bottom:25px;
	
	
}






/****************************************************************/
/************************FORMULAIRE *****************************/
/****************************************************************/


form{
	margin:0 0 0 40%;
	padding:20% 0 0 0;
}


form label, form textarea, form input{
	display:block;
	width:300px;
	font-family:"calluna",Georgia, "Times New Roman", Times, serif;
}


form textarea{
		 height:150px;
		 padding:5px;
		 width:290px;
	}
	
	
	
form label{
	margin:0 0 -8px 0;
	font-size:80%;

}


form input, form textarea{
	background-color:#F5DBCF;
	margin:0 0 10px 0;
	border:none;
	color:#000b52;
	
}















/* ------------------------------------------------------------------------------- */
/* X.RESPONSIVE DESIGN
/* ------------------------------------------------------------------------------- */ 
@media only screen and (max-width : 480px) { /* pour les écrans sous 480px */

/* --------------------------------------------- */

/* l'idée ici est de modifier les paramètres des éléments
/* en fonction de la largeur d'un téléphone mobile
/* souvent les css doivent être annulées ou modifiées */

/* --------------------------------------------- */

/* MOBILE RESET */
body, section, aside, article, div, nav, footer, ul, li, p { margin:0; padding:0; }
img { max-width:100%; /* au maximum 100% de la largeur de l'élément qui la contient */ height:auto; /* hauteur automatique */ }
h1 { font-size:42px; }
h2 { font-size:30px; }
h3 { font-size:24px; }
h4 { font-size:18px; }
h5 { font-size:14px; }
h6 { font-size:12px; }
p { font-size:small; }
/* MOBILE RESET */

/* PLACER VOS CSS MOBILES SOUS LA LIGNE SUIVANTE*/ 

wrapper.contact nav{
	display:none;
	
}

body{
	width:100%;
}



body.accueil{
		background-image:none;
		background-color:white;
	}
	
	

/*** mon nom (logo) ****/

div.mon-nom img{
	width:80%;
}

div.mon-nom a{
	position:fixed;
	top:25px;
	left:25px;
	height:30px;
	z-index:10000;
		
}





/****************************************************/
/**********************NAV****************************/
/****************************************************/


nav{
	position:fixed;
	font-size:80%;
	padding:100px 0 30px 25px;	
	background-color:white;
}

	
	nav ul span li{
		font-size:70%;
		margin-top:20px;
	}

	

		nav ul li a{
			text-decoration:none;
			color:#000b52;
		}
		
	
	

/***********************************************************/
/******************* PAGE GRAPHISME ************************/
/***********************************************************/


section.projets{
	width:100%;
	margin:0 0 0 0;
	padding:20px 0 30px 0;
	background-color:white;

	
}


	section.projets figure{
		width:100%;
		padding:170px 0 0 0;
	}

	section.projets article{
		display:none;
	}





/***********************************************************/
/******************* PAGE PHOTOGRAP ************************/
/***********************************************************/



section.photographie{
	margin:0 0 0 0;
	padding:250px 0 0 0;
	background-color:white;


	
}

	section.photographie figure{
		margin:0 auto 0 auto;
	}



	section.photographie img{
		min-width:80%;
		margin:0 0 130px 25px;
	}


		section.photographie img.horizontale{
			max-width:90%;
		}




/**********************************************************/
/************************FOOTER****************************/
/**********************************************************/




footer{
	background-color:#8BA1AD;

}

	footer aside.social i{
		display:inline-block;
	}
	
	footer aside.social{
		width:200px;
		text-align:right;
		display:block;
		position:fixed;
		right:25px;
		bottom:15px;

	}
	



/*** FORMLUAIRE ***/


form{
	margin:0 25px 0 25px;
	padding:200px 0 0 0;
}


form label, form textarea, form input{
	width:100%;
}


form textarea{
	width:100%;
	}
	
	
	
form label{
	margin:0 0 -8px 0;
	font-size:80%;

}


form input, form textarea{
	background-color:#F5DBCF;
	margin:0 0 10px 0;
	border:none;
	color:#000b52;
	
}




}





/** ENTRE 481PX ET 720PX **/

@media screen and (min-width:481px) and (max-width:720px){
	
	body.accueil{
		background-image:url(../images/autoportrait.jpg);
		background-attachment:fixed;
		background-repeat:no-repeat;
		background-position:center;
		background-size:50%;
	}
	
	
	
	section.photographie{
		margin:0 0 0 160px;
	}
	
		section.photographie img{
			max-width:80%;
			margin:0 0 20% 0;
			
		}
		
	section.projets{
		margin:0 0 0 30%;

	}
	
	
		section.projets figure{
			max-width:80%;
		}
		
			section.projets article{
				width:30%;
				padding:25px 15px 15px 15px;
				background-color:white;
				margin:0 0 0 10%;
				font-size:70%;
			}
}




/*   ENTRE 721PX ET 1024PX   */



@media screen and (min-width:721px) and (max-width:1024px){
	
		
section.projets figure{

	width:60%;
	
}
	
	
	section.projets article{
		margin:0 0 0 360px;
		font-size:90%;
		width:190px;
	}
	
	
	
}