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


* {
	margin:0;
	padding:0;
}

/*POUR LES BALISES HTML 5*/
header, footer, nav, article, section, aside, figure, figcaption, details, summary {
	display:block;
}

html, body, .vue {
	width:100%;
	height:100%;
}
#accueil {
	
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	background: url(../images/fond-bodyB.jpg);
	background-repeat:no-repeat;		
}
#pages {
	font-family: "Trebuchet MS", Arial, Helvetica, sans-serif;
	font-size:14px;
	background: url(../images/fond-body2.jpg);
	background-repeat:no-repeat;	
}


/*HEADER*/
#header {
	width:100%;
	margin:45px auto;
	min-height:300px;
	overflow:hidden;
}
#logo {
	width:60%;
}

/*MENU*/
nav {
	margin-top:64px;
	width:960px;
	
}

#menu {
	width:100%;

	background:url(../images/menu-gris.jpg);
	overflow:hidden;
	
	
}
#menu ul {
	list-style-type:none;
	overflow:hidden;
}
#menu ul li {
	width:16%;
	float:left;
}
#last {
	text-align:right;
	
}
#menu ul li a {
	display:block;
	text-align:center;
	text-decoration:none;
	color:#000;
	padding:10px 0 3px;
	height:72px;
	font-weight:bold;
	font-size:20px;
}
#menu ul li a:hover {
	background-color:#32ccfe;
	color:#FFF;
}

/*CONTENEURS PRINCIPAL*/
.conteneur {
	width:960px;
	min-height:72px;
	margin:0 auto;
	overflow:hidden;
}
#accueiltxt {
	margin-top:260px !important;
	}
#equipe {
	padding-top:40px;
}
#redac {
	padding-top:40px;
}
#cours {
	padding-top:40px;
}
#tarifs {
	padding-top:40px;
}

/*PAGE ACCUEIL*/
#fleches{
	text-align:center;
	width:100%;
	min-height:120px;
	margin-top:50px;
}
#fleche {
	padding-right:50px;
	padding-left:50px;
}
h1 {
	width:100%;
	color: #ff6600;
	font-family:'circoregular';
	font-size:30px;
	margin-top:100px;
	
}
/*CLASSES SPAN*/
.decal {
	padding-left:238px;
}
.bleu {
	font-size:20px;
	color:#0099cc;
}
.orange {
	color:#ff6633;
}
.gras {
	font-weight:bold !important;
}

/*PAGE EQUIPE*/

#portraits {
	width:960px;
	min-height:100px;
	margin:0 auto;
	overflow:hidden;
}
.photos{
	display:block;
	float:left;	
}
#globe {
	padding-right:0;
}
strong {
	font-weight:normal;
	
}

}
/*PAGE CONTACT*/

#conteneurContact {
	width:955px;
	margin:0 auto;
	overflow:hidden;
	border-radius:5px;
	border:solid 2px #FF6666;
}
h4 {
	margin:20px auto;
	font-size:18px;
	color:#ff6600;
}
form {
	padding:20px;
}
form p {
	margin-bottom:20px;
}

.alerte {
	color:#F00;
	font-weight:bold;
}

.label {
	width:200px;
	float:left;
}

.champ {
	width:300px;
}


/*FOOTER*/

footer {
	background:url(../images/footer.png);
	background-repeat:repeat-x;
	width:100%;
	min-height:136px;
	margin-top:40px;
	
}
h2 {
	width:960px;
	color: #FFF;
	margin:0 auto;
	padding-top:25px;
	font-size:16px;
	
}


/*-------------------------------------------------------------
Responsive Design
TABLETTE
IPAD	paysage / portrait		: 1024 / 768
SMARTPHONE
IPHONE 4	paysage / portrait	: 960 / 640
IPHONE 3 portrait / paysage	: 320 par 480
DONC :
- Lorsque je couvre les écrans d'ordi jusqu'à 1024, je couvre aussi les tablettes en paysage
- Lorsque je couvre les tablettes en portrait, je couvre aussi les smartphones qui vont de 768px jusqu'à 320px
- Il me reste à couvrir les smartphones qui montent au delà de 768px et en dessous de 1024px
-------------------------------------------------------------*/
@media screen and (max-width:1024px){
	body {
		padding:0;
	}
	#header {
		width:100%;
	}
	.conteneur {
		min-width:700px;
	}
	#menu {
		width:100%;
	}
	#menu ul li a {
		font-size:18px;
	}
	h2 {
		float:none;
		width:100%;
		text-align:left;
		padding-left:0;
	}
	
	#conteneurContact {
	width:600px;
}

}

@media screen and (max-width:768px){
	#logo {
	min-width:320px;
	
	}
	#menu {
		padding:80px 0 0;
		background:#999999 url(../images/menuResponsive.png) no-repeat left top;
	}
	#menu ul{	
		list-style-type:none;
		display:none;	
	}
	#menu ul li {
		float:none;
		clear:both;
		width:100%;
		margin-bottom:3px;
		
		}
	#menu ul li a {
		background:#999;
		color:#333;
		text-align:left;
		padding-left:50px;
		
		}
	.conteneur {
		min-height:100px;
		min-width:320px;
		width:100%;
		overflow:hidden;
	}
	.block{
		display:block!important;
	}
	.accueil {
		background:#fff;
	}

	h1 {
		
		width:100%;
		text-align:center;
		margin-top:20px;
		margin-bottom:20px;
		padding:0;
		
	}
	h2 {
		padding-top:10px;
		font-size:14px;
	
	}
	.decal{
		padding-left:0px;
	}
	#fleches {
		float:none;
		width:100%;
	}
	#fleche {
		padding-right:0px;
		padding-left:0px;
	}
	

/*PAGE EQUIPE*/
	
	#portraits {
		width:100%;
	}
	#portraits img{
		margin:0 auto;
		padding-right:0;
	}
	#noelle {
		float:none;
	}
	#col2 {
		padding-top:20px;
		float:none;
		width:100%;
	}
	#col3 {
		padding:0;
		clear:both;
		width:100%;
		margin-bottom:20px;
		}
	#col4 {
		padding:0;
		}
		
	/*PAGE TRADUCTION*/
	#trad {
		float:none;
	}	
		#col1 {
		text-align:justify;
		padding-top:20px;
		float:none;
		width:100%;
	}
	#page2 {
		display: inherit;
	}
	
	/*PAGE SERVICES LINGUISTIQUES*/
	#globe {
		float:none;
	}
	#page3 {
		display: inherit;
	}
	/*PAGE TARIFS*/
	#money{
		float:none;
	}
	#page4 {
		display: inherit;
	}
	/*PAGE CONTACT*/
	.champ {
		width:200px;
	}
	#enveloppe {
		float:none;
	}
	#conteneurContact {
	width:250px;
	}

	}