@charset "utf-8";

/*
Les tailles de texte pour écran :
Tout est en 0.90em
h1 en 1em du body => 0.90em
b pour la partie de texte sur la page d'accueil en gras
*/

html {
font-size:100%;
color:#000000;
}

#body_accueil {
background-color:white;
text-align:center;
}

body {
/*background-color:#92bd18;*/
margin-top:0px;
font-size:0.90em; /* Tout le texte (titre et paragraphes) est à 90%, on contrôle toutes les tailles de texte ici plus rapidement, même le h1 */
}

#conteneur_principal {
background-color:#FFFFFF;
/*width:1220px;*/
width:100%;
margin-left:auto;
margin-right:auto;
}

#logo {
margin-left:53px;
margin-top:20px;
border:none;
}

#contenu {
padding-left:53px;
padding-right:30px;
margin-top:33px;
margin-right:5%; /* Pour éviter que ça ne déborde trop à droite */
/*height:697px;*/
}

h1 {
font-family:Arial, Helvetica, sans-serif;
font-size:1em; /* 100% de la taille du body, sinon sans CSS écrit en très gros */
color:#642275;
}

p {
font-family:Arial, Helvetica, sans-serif;
}

b { /* Uniquement pour la page d'index sur la partie de texte plus importante en gras */
font-family:Arial, Helvetica, sans-serif;
}

/* la liste à puces de la page Métiers, pour différencier les valeurs du menu principal */
	ol {
	font-family:Arial, Helvetica, sans-serif;
	}
	
	ol li {
	list-style-type:disc;
	}
	
	.premier_niveau { /* Pour décaler cette liste à puce */
	padding-left:0px;
	color:#642275;
	font-weight:bold;
	list-style-type:none;
	}
	
	.deuxieme_niveau { /* Pour décaler cette liste à puce */
	padding-left:20px;
	}

	.troisieme_niveau { /* Pour décaler cette liste à puce */
	padding-left:40px;
	}

#footer {
text-align:center;
text-decoration:none;
margin-top:5%;/*Pour que le footer ne soit pas trop en bas de page, avant 120px mais trop loin sur la page Où nous trouver. Page Métier OK*/
/*background-color:#92bd18;*/
}

#footer_index {
text-align:center;
text-decoration:none;
margin-top:20%;/*Pour que le footer ne soit pas trop en bas de page. Pour les pages d'Index et Exemples de Mission le placer plus bas*/
}

#footer a, #footer_index a {
font-family:Arial, Helvetica, sans-serif;
color:#FFFFFF;
text-decoration:none;
}

#footer #accueil, #footer #contact, #footer #nous_trouver, #footer_index #accueil, #footer_index #contact, #footer_index #nous_trouver {
display:inline-block;
}

#footer #accueil, #footer_index #accueil {
vertical-align:5px;
}

#footer #contact, #footer_index #contact {
margin-left:15px;
vertical-align:5px;
}

#footer #nous_trouver, #footer_index #nous_trouver {
margin-top:10px;/*Il faut repositionner l'élément*/
margin-left:15px;/*Il faut repositionner l'élément*/
/*display:inline-block;Car on ne peut pas donner de taille à un élément inline, alors on le transforme en block*/
/*width:22px;
height:31px;*/
}

#contenu iframe { /* Page "Nous trouver" avec le plan Mappy */
width:800px;
height:600px;
border:0;
}


/*________________________________________________________________________________________________________________*/
/*pour smartphone jusqu'à 820*/
@media screen and (max-width: 820px) {

#logo {
margin-left:20px;
}

#phrase_accroche {
display:none;
}

#phrase_accroche_smartphone {
margin-left:17px;
margin-top:3px;
margin-bottom:15px;
display:block; /*pour faire passer l'image en dessous du logo*/
}

#contenu {
max-width:95%;
height:100%;
padding-left:20px;
padding-right:20px;
}

#conteneur_principal {
width:100%;
}

html {
font-size:100%;
}

body {
font-size:0.90em;
background-color:white;
}

h1 {
font-size:1em;
}

#footer #contact, #footer #nous_trouver, #footer #nous_trouver_on {
margin-left:25px;
}

#contenu iframe {
width:260px;
height:195px;
border:0;
}

#barre_menu_smartphone {
background:#92bd18;
/*border:3px solid white;*/
margin-top:5px;
margin-bottom:5px;
width:40px;
height:7px;
	position:relative;
	z-index:1; /*pour passer en dessous quand on clique ne marche pas*/
}

#bouton_menu_smartphone {
float:right;
margin-top:-98px;
margin-right:17px;
}

#bouton_menu_smartphone p { /*texte MENU*/
color:#92bd18;
margin-top:0px;
margin-bottom:0px;
}

#bouton_menu_smartphone_croix {
float:right;
margin-top:-111px;
margin-right:19px;
display:none; /*pour que de base on ne voit pas le menu, il ne s'affichera que quand on cliquera dessus*/
}

#bouton_menu_smartphone_croix p { /*texte MENU*/
color:#92bd18;
margin-top:0px;
margin-bottom:0px;
}

#bouton_menu_smartphone_croix img {
margin-left:3px;
}

	#barre_menus {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
	padding-left:18px;
	/*height:27px; pour forcer le block à ne pas se décaler vers le bas quand le menu déroulant s'ouvre, taille fixe*/
	display:none; /*pour que de base on ne voit pas le menu, il ne s'affichera que quand on cliquera dessus*/
	}

	#barre_menus a, #bouton_menu a {
	text-decoration:none;
	}
	
	#bouton_menu1, #bouton_menu1_on, #bouton_menu2, #bouton_menu2_on, #bouton_menu3, #bouton_menu3_on, #bouton_menu4, #bouton_menu5, #bouton_menu6 {
	display:block;
	width:90%;
	height:30px;
	padding:1px 10px;
	background-color:#92bd18;
	border:1px solid #92bd18;
	border-radius:50px 50px;
	-moz-border-radius:6px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration:none;
	line-height:30px; /*même taille que height pour centrer le texte verticalement*/
	white-space:nowrap; /*interdiction de passer à la ligne*/
	}
	
	#bouton_menu7, #bouton_menu8, #bouton_menu9 {
	display:block;
	width:100%;
	height:30px;
	padding:1px 10px;
	background-color:#92bd18;
	border:1px solid #92bd18;
	border-radius:50px 50px;
	-moz-border-radius:6px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration:none;
	line-height:30px; /*même taille que height pour centrer le texte verticalement*/
	white-space:nowrap; /*interdiction de passer à la ligne*/
	}

	#bouton_menu1 {
	position:relative; /*avec z-index, si c'est en absolu les boîtes se décalent*/
	z-index:7; /*pour que le contenu des div ne se superpose pas, penser à ajouter la ligne du dessus : position. Le chiffre le plus haut est au dessus*/
	}

	#bouton_menu1_on, #bouton_menu1:hover, #bouton_menu1:active {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	position:relative;
	z-index:7;
	}

	#bouton_menu2 {
	margin-top:1px;
	position:relative;
	z-index:6;
	}

	#bouton_menu2_on, #bouton_menu2:hover, #bouton_menu2:active {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	position:relative;
	z-index:6;
	}
	
	#bouton_menu3 {
	margin-top:1px;
	position:relative;
	z-index:5;
	}

	#bouton_menu3_on, #bouton_menu3:hover, #bouton_menu3:active {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	position:relative;
	z-index:5;
	}

	#bouton_menu4 {
	margin-top:1px;
	position:relative;
	z-index:4;
	}

	#bouton_menu4:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	position:relative;
	z-index:4;
	}

	#bouton_menu5 {
	margin-top:1px;
	position:relative;
	z-index:3;
	}

	#bouton_menu5:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	position:relative;
	z-index:3;
	}

	#bouton_menu6 {
	margin-top:1px;
	position:relative;
	z-index:2;
	}

	#bouton_menu6:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	position:relative;
	z-index:2;
	}

	#bouton_menu7 {
	margin-top:1px;
	}

	#bouton_menu7:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	}

	#bouton_menu8 {
	margin-top:1px;
	}

	#bouton_menu8:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	}

	#bouton_menu9 {
	margin-top:1px;
	}

	#bouton_menu9:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	}

	#fond_blanc { /*Pour éviter l'événement onmouseover qui hide le sous-menu*/
	display:none;
	}
	
	#bouton_menu10 {
	position:relative; /*pour que le menu déroulant passe au-dessus du texte du conteneur*/
	display:none;
	margin-left:-50px;
	margin-right:10px;
	margin-top:3px;
	}

}


/*________________________________________________________________________________________________________________*/
/*pour phrase d'accroche smartphone entre 500 et 820*/
@media screen and (min-width: 500px) and (max-width: 820px) {
	
#phrase_accroche {
display:block;
margin-left:17px;
margin-top:3px;
}

#phrase_accroche_smartphone {
display:none;
}

#bouton_menu_smartphone {
margin-top:-83px;
}

#bouton_menu_smartphone_croix {
float:right;
margin-top:-79px;
margin-right:19px;
display:none; /*pour que de base on ne voit pas le menu, il ne s'affichera que quand on cliquera dessus*/
}

#contenu iframe {
width:520px;
height:390px;
border:0;
}

}


/*________________________________________________________________________________________________________________*/
/*Pour les écrans plus grands que les smartphones
On change aussi la largeur du #contenu sinon c'est difficile à lire */
@media screen and (min-width: 821px) {

	#contenu {
	width:1000px; /* Pour les largeurs importantes au-dessus de 821 px, pour les trois tailles de tablette jusqu'à 1170 px, la largeur du #contenu est en %, quand c'est plus grand c'est une taille fixe en px */
	}

	#phrase_accroche {
	margin-left:53px;
	}

	#phrase_accroche_smartphone {
	display:none;
	}

	#barre_menus {
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-align:center;
	text-decoration:none;
	height:27px; /*pour forcer le block à ne pas se décaler vers le bas quand le menu déroulant s'ouvre, taille fixe*/
	font-weight:bold;
	/*font-variant-caps:small-caps;*/
	}

	#barre_menus a {
	text-decoration:none;
	}
		
	#barre_menus ul { /*J'ai changé pour ne pas confondre avec le menu de la page Métiers, remonter un peu le menu ?*/
	padding:0;
	margin:0;
	list-style-type:none;
	}

	#barre_menus li { /*J'ai changé pour ne pas confondre avec le menu de la page Métiers, remonter un peu le menu ?*/
	margin-left:1px;
	float:left; /*pour IE*/
	}	
		
	#bouton_menu1, #bouton_menu1_on, #bouton_menu2, #bouton_menu2_on, #bouton_menu3, #bouton_menu3_on, #bouton_menu4, #bouton_menu5, #bouton_menu6, #bouton_menu7, #bouton_menu8, #bouton_menu9 {
	display:block;
	width:13.9%;
	height:21px;
	padding:1px 10px;
	background-color:#92bd18;
	border:1px solid #92bd18;
	border-radius:50px 50px;
	-moz-border-radius:6px;
	font-family:Arial, Helvetica, sans-serif;
	color:#FFFFFF;
	text-decoration:none;
	line-height:21px; /*même taille que height pour centrer le texte verticalement*/
	white-space:nowrap; /*interdiction de passer à la ligne*/
	margin-right:3px;	
	}
		
	#bouton_menu1_on, #bouton_menu1:hover {
	border:1px solid #92bd18;
	margin-right:3px;	
	background-color:white;
	color:#92bd18;
	}

	#bouton_menu1, #bouton_menu1_on {
	margin-left:34px;
	margin-right:3px;	
	}

	#bouton_menu2_on, #bouton_menu2:hover {
	border:1px solid #92bd18;
	margin-right:3px;	
	background-color:white;
	color:#92bd18;
	}

	#bouton_menu3_on, #bouton_menu3:hover {
	border:1px solid #92bd18;
	margin-right:3px;	
	background-color:white;
	color:#92bd18;
	}

	#bouton_menu4:hover {
	border:1px solid #92bd18;
	margin-right:3px;	
	background-color:white;
	color:#92bd18;
	}

	#bouton_menu5:hover {
	border:1px solid #92bd18;
	margin-right:3px;	
	background-color:white;
	color:#92bd18;
	}

	#bouton_menu6:hover {
	border:1px solid #92bd18;
	margin-right:3px;	
	background-color:white;
	color:#92bd18;
	}

	#bouton_menu7 {
	margin-top:3px;
	}

	#bouton_menu7:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:3px;
	position:relative; /*utile ? avec z-index, si c'est en absolu les boîtes se décalent*/
	z-index:3; /*utile ? pour que le contenu des div ne se superpose pas, penser à ajouter la ligne du dessus : position. Le chiffre le plus haut est au dessus*/
	}

	#bouton_menu8 {
	margin-top:1px;
	}

	#bouton_menu8:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	margin-top:1px;
	position:relative;/*utile ?*/
	z-index:2;/*utile ?*/
	}

	#bouton_menu9 {
	/*margin-top:1px;*/
	}

	#bouton_menu9:hover {
	border:1px solid #92bd18;
	background-color:white;
	color:#92bd18;
	/*margin-top:1px;*/
	position:relative;/*utile ?*/
	z-index:1;/*utile ?*/
	}
	
	#fond_blanc { /*Pour éviter l'événement onmouseover qui hide le sous-menu*/
	background-color:#FFFFFF;
	height:1px;
	width:113%;
	}

	#bouton_menu10 {
	position:relative; /*pour que le menu déroulant passe au-dessus du texte du conteneur*/
	display:none;
	}

	#bouton_menu10 a {
	display:contents;
	}

	#bouton_menu10 li {
	width:100%;
	margin-left:-10px;
	}

	#bouton_menu a {
	text-decoration:none;
	}

	#bouton_menu_smartphone p { /*pour retirer le texte MENU sous le menu*/
	display:none;
	}

	#bouton_menu_smartphone_croix p { /*pour retirer le texte MENU sous le menu*/
	display:none;
	}

	#bouton_menu_smartphone_croix img { /*pour retirer la croix du menu*/
	display:none;
	}
}


/*________________________________________________________________________________________________________________*/
/*pour tablettes 821 à 917 problème taille des cellules du menu dont la typo dépasse, trouver menu cohérent
On a aussi la largeur du texte #contenu qui doit s'adapter à la largeur de l'écran */
@media screen and (min-width: 821px) and (max-width: 917px) {

html {
font-size:100%;
}

body {
background-color:white;
}

#barre_menus { /* Pour que le texte rentre dans les boîtes vertes du menu */
font-size:0.80em;
}

#contenu { /* Adpater la taille du paragraphe pour qu'il suive la taille de l'écran et ne soit pas bloqué à une valeur fixe en px */
width:90%;
}

#bouton_menu1, #bouton_menu1_on, #bouton_menu2, #bouton_menu2_on, #bouton_menu3, #bouton_menu3_on, #bouton_menu4, #bouton_menu5, #bouton_menu6, #bouton_menu7, #bouton_menu8, #bouton_menu9 {
width:15%;
padding:1px 3px;
}

#bouton_menu1, #bouton_menu1_on {
margin-left:0;/*pour ne plus avoir cette marge à gauche*/
}

#bouton_menu10 li { /*on a un décalage du sous-menu sur la droite*/
width:100%;
margin-left:-5px;
}

}


/*________________________________________________________________________________________________________________*/
/*pour tablettes 918 à 1062 problème taille des cellules du menu dont la typo dépasse, nouvelle largeur cellules*/
@media screen and (min-width: 918px) and (max-width: 1062px) {

html {
font-size:100%;
}

body {
background-color:white;
}

#barre_menus { /* Pour que le texte rentre dans les boîtes vertes du menu */
font-size:0.80em;
}

#contenu { /* Adpater la taille du paragraphe pour qu'il suive la taille de l'écran et ne soit pas bloqué à une valeur fixe en px */
width:90%;
}

#bouton_menu1, #bouton_menu1_on, #bouton_menu2, #bouton_menu2_on, #bouton_menu3, #bouton_menu3_on, #bouton_menu4, #bouton_menu5, #bouton_menu6, #bouton_menu7, #bouton_menu8, #bouton_menu9 {
width:13%;
}

}


/*________________________________________________________________________________________________________________*/
/*pour tablettes 1063 à 1170 problème taille des cellules du menu dont la typo dépasse, nouvelle largeur cellules, car espacement cellules + large*/
@media screen and (min-width: 1063px) and (max-width: 1170px) {

#barre_menus { /* Pour que le texte rentre dans les boîtes vertes du menu */
font-size:0.80em;
}
	
#bouton_menu1, #bouton_menu1_on, #bouton_menu2, #bouton_menu2_on, #bouton_menu3, #bouton_menu3_on, #bouton_menu4, #bouton_menu5, #bouton_menu6, #bouton_menu7, #bouton_menu8, #bouton_menu9 {
width:13.5%;
}

#contenu { /* Adpater la taille du paragraphe pour qu'il suive la taille de l'écran et ne soit pas bloqué à une valeur fixe en px */
width:90%;
}

}