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

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: 250px; /* placement du haut du menu, à modifier selon les besoins */
	left: 30px;
	z-index:5;
}
	
	#menu-icon {
		display:inline-block;
		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/* , nav:active ul */ { 

		display: none;
		/* display: block; */
		position: absolute;
		float: left;
		left: -25px;
		top: 40px;
		margin: 0;
		padding: 0;
		background: #fff;  /* blanc */
		border: 5px solid #444;
		/* right: -20px;
		
		width: 100%; */
		border-radius: 4px 0 4px 4px;
		z-index:10;

	}
	
	nav:hover ul { 

		/* display: none; */
		display: block;
	}

	nav .menu {

		text-align: center;
		width: 100%;
		padding: 10px 0;
		margin: 0;

	}





#menu_horizontal ul .menu {
	display:block;
	float:left;	
	
	margin: auto;
	/* height: 20px; */
	line-height: 20px;

	background: #ccc; /* gris clair */
	border: 1px solid gray;
	cursor: pointer;
	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 ;
	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:325px; /* largeur des cases du Menu */
	
	font-weight: bold;
	font-family: Arial,serif;
	font-variant: small-caps;
	font-size: 1.5em;
		
}

#menu_horizontal ul .menu .bloc_sousmenu{
	display:none;
	
}
	
#menu_horizontal ul .menu .bloc_sousmenu .sousmenu{
	/* float:right; */	
	width:300px; /* 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;
	
	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: 300px;
	display: block;
	position:relative;
	float: left;
	left: 20px;
	/* top:-10px; */
}


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

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

}


#bandeau_travaux .en_construction p{
    
/*  
    left: 1px;
    top: 1px; 
	text-align: center;
    line-height: 23px;*/
    
	font-size: 1.2em;
    font-style: italic;
    font-weight: bold;
	color: #E53F41;
	/* background: #CCC; */

}

.ouvrier_construction {
	display: inline;
	position:relative;
	float: right;
	height: 125px;
	width:125px;
	vertical-align: middle;
	right: 25px;
	/* top:-20px; */
}


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

}

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

}

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

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






#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:none;
/* 	height: 25px;
	width:283px; 
	
	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:300px; 
	max-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;
}


#bloc_gauche_centre_haut {
	
	min-height: 200px;
	min-width:300px; 
	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: 50%;
	
	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: 50%;
	
	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:300px; 
	max-width: 40%;
	
	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;
	min-width:300px; 
	max-width: 50%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;	
/* 	float: right;	
	right:10px;  */
	top:20px;
	
/* 	padding: 10px 20px; */
	
/* 	border-style:solid;
	border-color:#FF0000;
	border-width:2px;
 */
}

#sous-bloc_D2_centre_haut {
	
	height: 200px;
	min-width:300px; 
	max-width: 50%;
	
	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: 1135px;;
	
	border-width:1px;
	border-style:none;

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

.image_vertical-AMG-confort-plus{
	display:none;
/* 	height: 450px;
	width:75px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:20px;
	left:10px;

	z-index:1;

	
	border-width:0px;
	border-style:none; */

}

.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: 222px;
	width:300px; 
	
	position:relative; 
	display: inline;
	float:left;
	left:50px;
	bottom: 0px;
	z-index:3;
}	

.plaque_metal{
	
	height: 200px;
	width:300px; 
	
	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:-150px;
	left:40px;
	bottom: 0px;
	z-index:6;
}

.porte-ouverte{
	
	display: none;
	
/* 	height: 387px;
	width:256px; 	
	position:relative; 	
	float:left;
	top:-150px;
	left:50px;
	bottom: 0px;
	z-index:4; */
}


#video-bas {
	/* video-droite */
	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; */ 
	height: 91px;
	width:50px;
	position:relative; 
	display: inline;
	float:left;
	top:-250px;
	left:20px;
	bottom: 0px;
	z-index:5;
}
.Cone_orange2{
	
	/* height: 182px;
	width:100px; */ 
	height: 91px;
	width:50px;
	position:relative; 
	display: inline;
	float:right;
	top:-250px;
	right:30px;
	bottom: 0px;
	z-index:5;
}


	
}


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






























