@import url(http://fonts.googleapis.com/css?family=Ubuntu|Pacifico);

* { 

    box-sizing: border-box;

	}

body
{
	margin: 1.5em 0;
	padding: 0 ;
	font-family: 'Ubuntu', sans-serif;
	font-size:0.8em;
	background: #dea ;
	background-image:url(../images/nature-background.jpg); 
	background-repeat:no-repeat; 
	background-position:center fixed; 
	background-size:cover; 
}

/* Mise en page   */

div#wrapper
{
	width: 96%;
	margin: auto;
	max-width:1200px;
	min-width:880px;
	border: 8px solid #ab4 ;
	background-color: rgba(255, 255, 255, 0.8);
	text-align:left;
	font-size:0;
	}

header
{
    width:100%;
	height:258px;
	background: url(../images/apple.jpg) no-repeat left top;
	background-color:white;

	position:relative;
	}

header h1, header h2 {
	font-family: 'Pacifico', cursive;
	font-weight:100;
	color:#ab4;
	position:absolute;
}

header h1 { 
	left:320px;
	top:5rem; 
	font-size:2rem;
	}
header h2 {
	 left:320px;
	top:9.5rem; 

	font-size:1rem;	
}
	
.logo {
 position:absolute;
 left:310px;
top:2rem; 

}

nav {
	font-family: 'Pacifico', cursive;
	font-weight:100;
	border-top: 1px solid #ab4;
	border-bottom: 1px solid #ab4;
	

}
nav ul {
	display: grid;
    grid-auto-flow: column;
    justify-content: start;
}

nav li {
	padding:1rem 2rem;
	border-right: 1px solid #ab4;
	list-style:none;

}

nav ul li a {
text-decoration:none !important;
/* La règle CSS !important permet de spécifier que la propriété est la plus importante dans votre feuille CSS en lui donnant un poids plus important. */
font-size:2rem;
color:#ab4;

}

/* Zone principale en Grid */
section {
	
display: grid;
    grid-template-columns: 3fr 1fr;		
}

main, aside {
	
		font-size:1rem;	
	
}


/* Formatages */


main
{
	padding: 2em 2em 5em 100px ;
	background: url(../images/bg_page.gif) no-repeat left 2em top 2.5em ;
    background-color:white;
	}

aside
{
	padding: 1em;
    background-color:white;
	}	

main h2
{
	padding-left: 35px ;
	line-height: 30px ;
/* 	Placement par rapport à l'image, d'où les pixels */
	font-size: 1.8em ;
	background: url(../images/little_apple.gif) no-repeat left bottom ;
/* 	Mise en background car uniquement décorative - de plus, plus facilement modifiable si nécessaire */
	color: #9b2 ;

	}

aside h3
{
	margin-left:1.7em;
	padding-left: 5px ;
	border-bottom: 1px solid #9b2 ;
	font-size: 1.2em ;
	color: #9b2 ;
}

main p, aside p
{
	text-align: justify ;
	line-height: 1.7em ;
}


footer
{
	height:150px;
	line-height:150px;
	text-align: center ;
	color:#8a0;
	
	font-size:1rem;	
}




