@import url(https://fonts.googleapis.com/css?family=Cuprum:400,700);
/* ------------------
fond de la page : silver
texte : cuprum
------------------------------*/

/* ----------------------------------------------------------------------------------------- 1 Typographie -------------------------------------------------------------------------------------------------------------------------*/
	body{
		font-family: 'Cuprum', sans-serif;
		font-size:1rem;
	}
	h1{
		color:#ED9A32;
		font-size:1.8rem;
		text-align:right;
		padding-right:1rem;
	}
	h2 {
		color:#999999;
		font-size:1.5rem;
		margin:.7rem 0;
	}
	p{ margin:.5rem 0;}
	a{
		color:white;
		font-size:1.6rem;
		font-weight:700;
		text-decoration:none;		
	}
		a[href="#"]{ color:#ED9A32; }
		
/* ----------------------------------------------------------------------------------------- 2 Positionnement -------------------------------------------------------------------------------------------------------------------------*/	
	html, body{ height:100%; } /*Pour pouvoir donner une hauteur à l'élément conteneur */
	.conteneur{
		width:80%;
		min-width:480px;
		height:90%;
		min-height:600px;
		margin:2em auto;
		position:relative; /*Pour pouvoir positionner des enfants en absolu*/
	}	
	/*Positionnement des navigations*/
	nav#principale,
	nav#social{ position:absolute; top:0;}
		nav#principale{ right:0; width:33%; }
		nav#social{ left:0; width:16%;}
	/*Positionnement de l'article*/
	article{ margin:0 34% 0 17%;}
/* ----------------------------------------------------------------------------------------- 3 Mises en forme -------------------------------------------------------------------------------------------------------------------------*/		
	body{
		background-color:silver;
	}
/* conteneur*/	
	.conteneur{
		border:3px solid white;
		background-repeat: no-repeat;
		background-position: center center;
		background-attachment: fixed;
		background-size:cover;
		overflow:auto;
	}
		#portrait{ background-image:url(../images/01.jpg); }
		#ebusiness{ background-image:url(../images/03.jpg); }
		#services{ background-image:url(../images/04.jpg); }
		#coordonnees{ background-image:url(../images/02.jpg); }
/* article */			
	article{
		background-color:rgba(255,255,255,.95);
		padding:1.5rem;
		border:3px solid #ED9A32;
		border-top:0;
		border-radius:0 0 30px 30px;
	}	
/* navigations */	
	ul{
		list-style:none;
		margin-top:.5em;
		padding:0;
	}
	nav#social ul{ text-align:center;	}
		nav#social ul li{ display:inline;}