﻿
/*---------CSS pour MOBILE -------------*/
/*MEDIA QUERY*/    /*valeur de travail écran à 1600px */
@media only screen and (min-width : 1500px) {

html, body {
height:100%;
width:100%;
margin: 0; 
padding: 0;
}

body {
	margin: 0;
	padding: 0;
	background: white;
	font: 80% verdana, arial, sans-serif;
}

header {
		position: absolute;
	}

	
/*---------MENU MOBILE -------------*/
	
dl, dt, dd, ul, li {
	margin: 0;
	padding: 0;
	list-style-type: none;
}	


nav {
	float: left;
	position: absolute; /* positionnement du menu, à modifier selon les besoins */
	/*top: 350px;   avec bandeau en construction  */
    top: 10px;
	left: 40px;
	z-index:5;
}
	
#menu-icon {
		display:hidden;
		width: 40px;
		height: 40px;
		z-index:10;
		background: #4C8FEC url(../images/menu-icon-blanc-transp-40x40.png) center;
}
	
a:hover#menu-icon {

	background-color: #444;
	border-radius: 4px 4px 0 0;

}

nav ul{ 
	margin: 0;
	padding: 0;
	list-style-type: none;
	text-align: center;

}
	

	
	
/*  ancienne annotation en "ul li" remplacée par "ul.menu" (ci-dessous)
	#menu_horizontal ul li {
	float:left;	
	cursor: pointer;
	margin: auto;
	height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	border: 1px solid gray;
	} */

#menu_horizontal ul .menu {
	float:left;	
	cursor: pointer;
	/* margin: 2px 0; */
	margin: auto;
	height: 25px;
	line-height: 25px;
	text-align: center;
	font-weight: bold;
	border: 1px solid gray;
	cursor: pointer;
	background: #ccc; /* gris clair */
	color:#0B1616; /* texte menus noir fumée bleutée */
	
	/* effet de transition sur case menu , pour preparation du ul .menu:hover  */
	transition-property: background-color, display ;
	transition-duration: 1s ;
	}	

#menu_horizontal ul .menu:hover {
	background: #606060; /* gris foncé */
	color:#FFFFFF; /* texte menus blanc */
	}
	
#menu_horizontal ul .menu span{
	display:block;
	width:350px; /* largeur des cases du Menu */
	
	font-weight: bold;
	font-family: Arial,serif;
	font-variant: small-caps;
	font-size: 2.0em;
	
	border-bottom: 1px solid blue;
		
}



#menu_horizontal ul .menu .bloc_sousmenu{
	display:none;
	/* effet de transition sur bloc sous-menu , pour preparation du display ul .menu:hover .bloc_sousmenu - NE fonctionne PAS */
	transition-property: display ;
	transition-duration: 1s ;
}

#menu_horizontal ul .menu .bloc_sousmenu {   /* pour éviter que le sous menu décale les parties inférieures  - ancienne formuke pour ul li*/
	position: absolute;
}	
	
#menu_horizontal ul .menu:hover .bloc_sousmenu{	/* pour ouvrir le sous menu au survol de la souris */
	display:block;
}
	

	
#menu_horizontal ul .menu .bloc_sousmenu .sousmenu{
	/* float:right; */	
	width:350px; /* largeur des cases du SousMenu */
	left: 160px; 
	margin: 1px auto;
	/* margin-left:-40px;  décalage à droite du sous-menus */
	min-height: 20px;
	line-height: 20px;
	text-align: center;
	font-weight: bold;
	font-size: 1.2em;
	border: 1px inset #170797; /* textes sous-menus bleu foncé */
	background: #E5F8FA; /* fond sous-menus bleu clair */
	z-index:10;
	
	/* effet de transition sur case sous-menu , pour preparation du ul .menu .bloc_sousmenu .sousmenu:hover  */
	transition-property: background-color, ;
	transition-duration: 500ms ;
	
	}

#menu_horizontal ul .menu .bloc_sousmenu .sousmenu:hover{
	background: #ccc; /* gris clair */
	
	}

#menu_horizontal ul .menu .bloc_sousmenu .sousmenu a{
	text-decoration: none;
	color:#170797; /* textes sous-menus bleu foncé */
}	


/*---------PARTIES HAUTES du site -------------*/	
	

#bandeau_travaux {
	
	height: 315px;
/* 	min-width:400px; */ 
	max-width: 100%;
	
	position:relative;  
	top:0px;
	
	margin: 0 auto;
	
	border-style:none;
	background:yellow;
}	

.societes {
	max-width: 500px;
	display: block;
	position:relative;
	float: left;
	left: 20px;
	/* top:-10px; */
}


#bandeau_travaux .societes p{
    max-width: 500px;
	
	display: block;
	position:relative;
	/* float: left; */
	left: 25px;
	margin: 0 5px;
    line-height: 2.8em;
	font-size: 2.8em;
    font-weight: bold;
}


.en_construction {
	display: inline;
	position:relative;
	float: right;
	right: 20px;
	top:-10px;
}

.en_construction p{
    display: block;
    
	font-size: 1.8em;
    font-style: italic;
    font-weight: bold;
	color: #E53F41;
	/* background: #CCC; */

}



.ouvrier_construction {
	display: inline;
	position:relative;
	float: right;
	height: 250px;
	width:250px;
	vertical-align: middle;
	right: 5px;
	top:50px;
}


#bandeau-video {
	/* container bandeau 2 videos + plaque marbre centrale */
	height: 230px;
	width:1150px; 
	
	position:relative; 
	left:0px; 
	/* top:75px;  avec bandeau en construction */
    top:50px;
	margin:0 auto;

}

#video-gauche {
	/* video-gauche */
	height: 230px;
	width:350px; 
	position:relative;
	float:left; 
	left:10px; 

}



#plaque-centre {
	/* plaque marbre centrale */
	display: inline;
	height: 212px;
	width:350px; 
	position:relative;
	float:left; 
	left:20px; 
	top:7px;
	
	border-style:none;
}

#video-droite {
	/* video-droite */
	display: inline;
	height: 230px;
	width:350px; 
	position:relative;
	float:left; 
	left:40px; 
	/* top:-110px;  pour ratrapper le décalage vertical - origine ? */

}






#bandeau_haut {
	
	height: 600px;
	width: 100%;
	
	position:absolute; 
	left:10px; 
	/* top:650px;   avec bandeau en construction  */
    top:300px;
	margin:0 auto;
	padding: 0 10px;

	background:url(../images/background/background_haut_10x155_374.jpg) repeat-x;
}	

.image_text-honnetete{
	
	height: 121px;
	width:111px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:15px;
	left:50px;
	margin:0 auto;
	z-index:5;
}

.image_text-qualite{
	display:inline;
	height: 76px;
	width:849px;
	
	position:relative; 
	display: inline;
	float:left;
	top:25px;
	left:300px;
	margin:0 auto;
	z-index:10;

}
	

/*---------PARTIES CENTRE HAUT du site -------------*/		
	
	
#bandeau_centre_haut {
	
	min-height: 505px;
/* 	max-height: 100%; */
/* min-width:600px;  */
	width: 100%;
	
	position:absolute; 
	left:10px; 
	/* top:810px; avec bandeau en construction  */
    top:450px;     
	
	border-width:1px;
	border-style:none;

	background:url(../images/background/background_centre_10x505_374.jpg) repeat-x;
}


#bloc_gauche_centre_haut {
	
	min-height: 200px;
	min-width:600px; 
	max-width: 40%;
	
	display: block;
	position:relative;
	float: left;	
	left:0px; 
	
	padding: 10px 20px;
	
/* 	border-style:solid;
	border-color:#FFCC33;
	border-width:2px; */


}

#sous-bloc_G1_centre_haut {
	
	height: 200px;
	min-width:300px; 
	max-width: 90%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;	
	left:10px; 
	top:20px;
	
	margin-top: -20px ;
	padding: 10px 20px;
	
/* 	border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

}

#sous-bloc_G2_centre_haut {
	
	height: 200px;
	min-width:300px; 
	max-width: 90%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;	
	left:10px; 
	top:20px;
	
	padding: 10px 20px;
	
/* 	border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

}


#bloc_gauche_centre_haut h1, #bloc_droit_centre_haut h1 {
	text-align: center;
	font-family: arial;
	font-size: 1.8em;
	font-weight: bold;
	text-decoration: underline;
	color: #E53F41;
}


#bloc_gauche_centre_haut span, #bloc_droit_centre_haut span {
	font-family: Tahoma;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #848583;
}

#bloc_gauche_centre_haut li, #bloc_droit_centre_haut li  {
	list-style-type: square;
	font-family: Tahoma;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #848583;
}


.barre_clear_complete {
	height: 5px;
	width:500px;
	
	clear: both;
	position: relative; 
	overflow: hidden;
	margin: 0 auto;
	z-index:5;
	background-color:black;
	}

#bloc_droit_centre_haut {
	
	min-height: 200px;
	min-width:40%; 
	width: 600px;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: right;	
	right:10px; 
	
	margin-top: -20px ;
	padding: 10px 20px;
	
/* 	border-style:solid;
	border-color:#FFCC33;
	border-width:2px; */

}


#sous-bloc_D1_centre_haut {
	
	height: 200px;
	max-height: 100%;
	min-width:300px; 
	max-width: 90%;
	
	display: block;
	position:relative;
	/* float: left; */	
	float: right;	
	right:10px; 
	top:20px;
	
	margin: 0px auto ;
	padding: 10px 20px;
	
	/* border-style:solid;
	border-color:#FF0000;
	border-width:2px;
 */
}

#sous-bloc_D2_centre_haut {
	
	height: 200px;
	max-height: 100%;
	min-width:300px; 
	max-width: 90%;
	
	display: block;
	position:relative;
	clear: right;
	/* float: left;	 */
	float: right;	
	right:10px; 
	top:20px;
	
	padding: 10px 20px;
	
	/* border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

}





.kisspng-table-furniture-office{
	/* height: 258px;
	width:258px; */

	height: 75%;
	width:75%;	
	
/* 	position:relative; 
	display: inline;
	float:left;
	top:20px;
	left:10px; */

	z-index:2;

	
	border-width:0px;
	border-style:none;
}

	
/*---------PARTIES CENTRE BAS du site -------------*/		
	
	
#bandeau_centre_bas {
	
	min-height: 315px;
	width: 100%;
	
	position:relative; 
	left:10px; 
	top: 720px;;
	
	border-width:1px;
	border-style:none;

	background:url(../images/background/background_bas_10x440_374.jpg) repeat ;
}

.image_vertical-AMG-confort-plus-Haut{
	height: 450px;
	width:75px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:20px;
	left:10px;
	clear: left;
	z-index:2;

}

.image_vertical-AMG-confort-plus-Bas{
	height: 450px;
	width:75px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:-90px;
	left:10px;
	clear: left;
	z-index:2;

}

.Leaflet{
	
	height: 1000px;
	width:341px; 
	
	position:relative;
	float:left;
	top:10px;
	left:50px; 

	
	border-width:0px;
	border-style:none;
	margin:100px;
	
	background-color: #ff9999;

}	
	
	
/*---------PARTIES BASSES du site -------------*/
	
	
	


	
.maison3d_graphics{
	
	height: 300px;
	width:400px; 
	
	position:relative; 
	display: inline;
	float:left;
	left:50px;
	bottom: 0px;
	z-index:3;
}	

.plaque_metal{
	
	height: 288px;
	width:500px; 
	
	position:relative; 
	display: inline;
	float:left;
	left:50px;
	top: 30px;
	z-index:4;
}	
	
.paroi_verre{
	
	height: 325px;
	width:325px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:10px;
	left:-100px;
	bottom: 0px;
	z-index:6;
}

.porte-ouverte{
	
	height: 387px;
	width:256px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:0px;
	left:-30px;
	bottom: 0px;
	z-index:4;
}


#video-bas {
	/* video-droite */
	display:none;
	height: 230px;
	width:350px; 
	position:relative;
	float:left; 
	left:10px; 
	top:-130px; /* pour ratrapper le décalage vertical - origine ? */
	
	border-style:none;
}

.Cone_orange1{
	 
	height: 182px;
	width:100px;
	position:relative; 
	display: inline;
	float:left;
	top:-200px;
	left:100px;
	bottom: 0px;
	z-index:5;
}
.Cone_orange2{
	
	height: 182px;
	width:100px; 
	/* height: 91px;
	width:50px; */
	position:relative; 
	display: inline;
	float:right;
	top:-200px;
	right:30px;
	bottom: 0px;
	z-index:5;
}


	
}


/* ----------- MENU HORIZONTAL normal ------------ */
/* SUITE de la partie antérieure du MENU */






























