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

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

body {

	font: 80% verdana, arial, sans-serif;
	
	background: -webkit-linear-gradient(#1818E0 5%, #18C9E0 20%, #18C9E0 80%, #1818E0 95%); /*Pour Chrome 25, Safari 6 */
	background: -o-linear-gradient(#1818E0, #3FBFBF); /*Pour Opera (11.1 à 12.0) */
	background: -moz-linear-gradient(#51B6F4 5%, #18C9E0 20%, #18C9E0 80%, #1818E0 95%); /*Pour Firefox (3.6 à 15) */
	background: linear-gradient(#1818E0 5%, #18C9E0 20%, #18C9E0 80%, #1818E0 95%); /*Autres navigateurs */
	
}

head {
		width: 100%;	
	}

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


#menu_horizontal {
	
	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;
	font-size: 1.3em; /* taille de la police des sous-menus */
	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 VIDEO -------------*/	
	


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

}

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

.slide-show-gauche {
	/* photos remplacement video sur pages parties du site */
	display:none;
/* 	height: 230px;
	width:350px; 
	position:relative;
	float:left; 
	left:10px; */ 

}

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

.plaque-centre-seule {
	/* plaque marbre centrale */
	display: none;
	
	height: 212px;
	width:350px; 
	position:relative;
	left:10px; 
	top:7px;
	margin:0 auto;
	
	z-index:10;
	border-style:none;
	opacity: 0.9;
}

.video-centre-seule {
	/* video marbre centrale */
	display: none;
	
	/* height: 230px;
	width:350px; 
	position:relative;
	left:20px; 
	top:7px;
	margin:0 auto;
	
	z-index:10;
	border-style:none;
	opacity: 0.9; */
}

#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 étroit -------------*/


#bandeau_haut {
	
	height: 155px;
	width: 100%;
	
	position:relative; 
	left:5px; 
	top:50px;
	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:10px;
	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; */

}

.logo_NB{
	display:none;
/* 	height: 140px;
	width:140px;
	
	position:relative; 
	display: inline;
	float:right;
	top:-5px;

	right:50px;
	z-index:3; */
}	

#bandeau_titre_page{
	height: auto;
	width:250px;
	
	position:relative; 
	/* float:left; */
	top:-50px;
	left:10px;
	margin:0 auto;
	z-index:12;
	
	/* background-color:white;
	border: 4px inset red; */
	
	background-color:#C0C0C0;

	box-shadow:2px 2px 2px gray,-2px -2px 2px #00FFFC;
	
}

.bandeau_titre_page_texte{
	/* min-height: 35px;
	width:300px; */
	/* display:table-cell;
	margin: 0 auto;
	padding-left: 10px; */
	left:10px;
	font-weight: bold;
	font-family: Arial,serif;
	font-variant: small-caps;
	font-size: 1.6em;
	
	vertical-align : middle;
	text-align: center;
	
	text-shadow:0 0 2px #00FFFC,0 0 30px #00FFFC,0px 0px 5px #00FFFC, 0 0 150px #00FFFC;
	color:#4CB2B2;
	
/* 	text-shadow:3px 1px 10px 0 #fff; */
	
}


/*---------PARTIES CENTRE HAUT du site -------------*/		
	
	
#bandeau_centre_haut {
	
	min-height: 505px;
/* 	max-height: 100%; */
	/* min-width:300px;  */
	/* max-width: 100%; */
	width: 95%;
	
	position:relative; 
	left:10px; 
	top:50px;
	
	margin:0 auto;
	
	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: 100%;
	
	display: block;
	position:relative;
	float: left;	
	left:-10px; 	
/* 	padding: 10px 20px; */

/* bordure de bloc pour matérialiser la DIV */
/* 	border-style:solid;
	border-color:#FFCC33;
	border-width:2px; */

}

#sous-bloc_G1_centre_haut {
	
	/* height: 200px; */
	min-height: 200px;
	max-height: 100%;
	/* min-width:300px;  */
	max-width: 95%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;	
	/* left:10px;  */
	top:20px;
	
	margin: 0px auto ;
	padding-left : 10px;
	padding-top : 20px;
	/* padding: 10px 20px; */
	
/* bordure de bloc pour matérialiser la DIV */
/* 	border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

	overflow: hidden;
}

#sous-bloc_G1_centre_haut p{
	max-width:100%;
}

#sous-bloc_G1_centre_haut img{
	max-width: 100%;
	overflow:auto;
}

#tabs4, #tabs-1, #tabs-2, #tabs-3, {
	overflow: hidden;
}

.sous-bloc_G1_centre_haut_fondTrans {
	
	/* pour un fond blanc transparent à 40% ( en 4eme chiffre) */
	background-color: rgba(255, 255, 255, 0.4);

}

#sous-bloc_G2_centre_haut {
	
	/* height: 200px; */
	min-height: 200px;
	max-height: 100%;
	/* min-width:300px;  */
	max-width: 95%;
	
	display: block;
	position:relative;
	/* clear: right; */
	float: left;	
	/* left:10px;  */
	top:20px;
	
	margin: 25px 0;
	/* padding-top : 20px; */
	padding: 10px 20px;
	
	/* bordure de bloc pour matérialiser la DIV */
	/* border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

}

#sous-bloc_G2_centre_haut p{
	max-width:100%;
}

#sous-bloc_G2_centre_haut img{
	max-width: 100%;
	overflow:auto;
}

#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 h2, #bloc_droit_centre_haut h2 {
	/* text-align: center; */
	font-family: Tahoma;
	font-size: 1.5em;
	font-weight: bold;
	text-decoration: none;
	color: #353635; /* gris plus foncé */
}

#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 ul, #bloc_droit_centre_haut ul  {
	padding-left : 20px;
}

#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;
}



/* .image_vertical-AMG-confort-plus-Haut{
	display:none;
} */

.bandeau_vertical_text{
	display:none;
}


.image_vertical_AMG_confort_plus_Haut{
	display:none;
}

.rose_rose{
	display:none;
}



#bloc_droit_centre_haut {
	
	min-height: 200px;
	min-width:300px; 
	max-width: 50%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;
	left: -10px;
	
	margin-top: -20px ;
	padding: 10px 20px;

/* bordure de bloc pour matérialiser la DIV */	
	/* border-style:solid;
	border-color:#FFCC33;
	border-width:2px; */

}


#sous-bloc_D1_centre_haut {
	
	min-height: 200px;
	max-height: 100%;
	/* min-width:300px;  */
	max-width: 95%;
	
	display: block;
	position:relative;
	float: left;
	left:-10px;	
/* 	float: right;	
	right:10px;  */
	top:20px;
	
	margin: 25px 0;
	/* padding-left : 10px; */
	/* padding-top : 20px; */
	padding: 10px 20px;
	
/* bordure de bloc pour matérialiser la DIV */
	/* border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

}

.sous-bloc_G1_centre_haut_fondTrans {
	
	/* pour un fond blanc transparent à 40% ( en 4eme chiffre) */
	background-color: rgba(255, 255, 255, 0.4);

}

.box2_caracteres_machinetapper {
	/* photos remplacement video sur pages chapitres du site */
	
	height: 130px;
	width:270px; 
	padding:5px ;
	background-color: rgba(255, 255, 255, 0.8); /* pour la transparence */
	color:#000000;
	font-family:Verdana;
	font-size:1.1em;
	border-style:solid;
	border:1px solid #888;
	border-radius:5px;	

}



.boite_loi{
	min-height: 150px;
	/* width:100%; */
	position:relative;
	/* float:right; */
	/* top:-60px; */
	/* right:-10px; */
	margin:5px -20px;
	padding-left:10px;
	
	background-color:#FFF;

}

.texte_loi p{

	font-family: 'Roboto',arial,sans-serif;
	font-size: 1.0em;
	font-weight: bold;
}

.texte_loi li{

	font-family: 'Roboto',arial,sans-serif;
	font-size: 1.1em;
}

#sous-bloc_D1_centre_haut p{
	color: #aa2520;
}

#sous-bloc_D1_centre_haut p.ref-textes{
	font-weight: normal;
	color: #000;
}



#sous-bloc_D2_centre_haut {
	
	/* height: 200px; */
	min-height: 200px;
	max-height: 100%;
	/* min-width:300px;  */
	max-width: 95%;
	
	display: block;
	position:relative;
	clear: right;
	float: left;		
	left:-10px; 
	top:20px;
	
	margin: 25px 0;
	/* padding-top : 20px; */
	padding: 10px 20px;
	
/* bordure de bloc pour matérialiser la DIV */
	/* border-style:solid;
	border-color:#FF0000;
	border-width:2px; */

}






	
/*---------PARTIES CENTRE BAS du site -------------*/		
	
	
#bandeau_centre_bas {
	
	min-height: 450px;
	width: 100%;
	
	overflow: auto;
	
	position:relative; 
/* 	left:10px;  */
	/* top: 1135px; */
	

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

#bande_haute_Centre_Bas {
	
	display: flex;
    /* flex-direction: column; */
	flex-wrap: wrap;
		
	width: 100%;
	
	
	margin: 0px auto ;
	padding: 10px 20px;
	

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

}

#bande_haute_Centre_Bas-block{

    position: relative;
	min-height: 400px;
	max-height: 100%;
    width: 100%;
    /* float: left; */
    left: -50px;
    /* top: 20px; */
    margin: 0px auto;
    padding: 5px 5px;
    background: url(../images/background/background_bas_10x440_374.jpg) repeat;
    ;

}


#bande_cones_fine{
	 
	height: 250px;
	/* height: auto; */
	width: 100%;
	
	position:relative; 
	/* left:10px;  */
	top: 50px;
	
	margin:0 auto;
	background:url(../images/background/background_bas_10x250_374.jpg) repeat ;
}

#bande_cones{
	 
	/* height: 250px; */
	/* height: auto; */
	width: 100%;
	position:relative; 

	margin:0 auto;
}

.image_vertical_AMG_confort_plus_Bas{
	display:none;
}

.image_vertical_AMG_confort_plus_Haut_gauche{
	display:none;

}

.image_vertical_AMG_confort_plus_Haut_droite{
	display:none;
}

.Leaflet{
	display:none;
}	
	
	
/*---------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{
	
	height: 387px;
	width:256px; 
	
	position:relative; 
	display: inline;
	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:0px; /* pour ratrapper le décalage vertical - origine ? */
	
	border-style:none;
}



.feu-bougie-candle1{
	display:none;
	
	/* position:relative; 
	display: inline;
	float:left;
	top:25px;
	left:50px;
	z-index:10; */
}

.feu-bougie-candle2{
	 
	position:relative; 
	display: inline;
	float:left;
	top:25px;
	left:50px;
	z-index:10;
}

.feu-bougie-candle3{
	display:none;
}

/* ----------- FOOTER - copyright ------------ */



#footer {
	
	display:none;
}



/* ----------- DIVERS ------------ */

.clearfix {
  overflow: auto;
}

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

.barre_clear_simple_trans {
	height: 5px;
	width:500px;
	
	clear: both;
	position: relative; 
	overflow: hidden;
	
	}


.image_Droite_texteAgauche{
	
	height:75%;
	width:75%;
	
	position:relative; 
	display: inline;
	float:right;
	top:15px;
	right:10px;
	
	margin: 5px 10px;
	padding: 10px;
}

.image_Gauche_texteAdroite{
	
	height:75%;
	width:75%;
	
	position:relative; 
	display: inline;
	float:left;
	top:15px;
	left:10px;
	
	margin: 5px 10px;
	
}

.image_Centre_texteHautBas{
	
	height: 75%;
	width: 75%;
	
	margin: 0px auto;
	clear: both;	
}


	
}


/* ----------- FIN ------------ */































