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

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

body {
	margin: 0;
	padding: 0;
	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 */
	/* background-color: #93B874; */
	/* dégradé linéaire de bleu sur 10% puis vert-bleu sur 60% suivants, puis bleu.... */
	/* background-color: linear-gradient(#1818E0 10%, #3FBFBF 70%, #1818E0 90%); */
    /* transition-property: background-color;
    transition-duration: 1s; */
    /* transition-delay: 0.4s;  Démarre au bout de 0,4s */
}

head {
		width: 100%;	
	}

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


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

}



#menu_horizontal {		
		position: absolute; /* positionnement du menu, à modifier selon les besoins */
		top: 400px; /* placement du haut du menu, à modifier selon les besoins */
		left: 50px;		

		/* position: absolute; 
		width: 1500px;
		top: 410px; 
		left: 40px; */

		z-index:5;
		margin:0 auto;
}


#menu_horizontal ul{ 
	margin: 0;
	padding: 0;

	list-style-type: none;
	text-align: center;

}
	


#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:300px; /* largeur des cases du Menu */
	
	font-weight: bold;
	font-family: Arial,serif;
	font-variant: small-caps;
	font-size: 1.8em;
	
	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: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.1em; /* 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: 95%; 
	
	/* position:relative; 
	left:0px; 
	top:75px; */
	margin:0 auto;
	border: 3px inset blue;
	overflow: hidden;

}

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

}

.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: inline;
	height: 212px;
	width:350px; 
	position:relative;
	float:left; 
	left:20px; 
	top:7px;
	
	border-style:none;
} */

.plaque-centre-seule {
	/* plaque marbre centrale */
	height: 141px;
	width:233px; 
	position:relative;
	/* left:20px;  */
	top:7px;
	margin:0 auto;
	
	z-index:5;
	border-style:none;
	opacity: 0.9;
}

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

#plaque-centre img {
	/* plaque marbre centrale */
	display: inline;
	height: 141px;
	width:233px; 
	position:relative;
	float:left; 
	left:20px; 
	top:45px;
	opacity:0.9;
	
	/* background:url(../images/background_plaque_AMGmarbre-350x212.jpg) repeat-x; */
}

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

}



/*--------- Bandeau HAUT étroit -------------*/


#bandeau_haut {
	
	height: 155px;
	width: 95%;
	
	position:relative; 
	top:10px;
	
	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:absolute; 
	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:right;
	top:25px;
	right:50px;
	margin:0 auto;
	z-index:10;
	
}
.logo_NB{
	display:inline;
	height: 140px;
	width:140px;
	
	position:relative; 
	display: inline;
	float:right;
	top:-5px;

	right:50px;
	z-index:3;
}
	
#bandeau_titre_page{
	height: auto;
	width:500px;
	
	position:relative; 
	top:30px;
	/* left:300px; */
	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{
	/* height: 35px; */
	width:300px;
	/* display:table-cell; */
	margin: 0 auto;
	
	font-weight: bold;
	font-family: Arial,serif;
	font-variant: small-caps;
	font-size: 2.5em;
	
	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;
	/* background-color:#262626; */
	
/* 	text-shadow:3px 1px 10px 0 #fff; */
	
/* 	text-shadow:  white 0.006em 0.006em 0.007em,
    #9c9c9c 1px 1px 1px,
    #9c9c9c 1px 2px 1px,
    #9c9c9c 1px 3px 1px,
    #9c9c9c 1px 4px 1px,
    #9c9c9c 1px 5px 1px,
    #9c9c9c 1px 6px 1px,
    #9c9c9c 1px 7px 1px,
    #9c9c9c 1px 8px 1px,
    #9c9c9c 1px 9px 1px,
    #9c9c9c 1px 10px 1px,
    #9c9c9c 1px 11px 1px,
    #9c9c9c 1px 12px 1px,
    rgba(16, 16, 16, 0.4) 1px 18px 6px,
    rgba(16, 16, 16, 0.2) 1px 22px 10px,
    rgba(16, 16, 16, 0.2) 1px 26px 35px,
    rgba(16, 16, 16, 0.4) 1px 30px 65px,
    white -0.15em -0.1em 100px;
	color:#fff; */
	
	
	
	/* background-color:#9BD5D4; */

}
	

/*---------PARTIES CENTRE HAUT du site -------------*/		
	
	
#bandeau_centre_haut {
	
	min-height: 500px;
	/* max-height: 1000px; */
/* 	max-height: 100%; */
	/* min-width:800px;  */
	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;
	
	/* border :solid #EE2222 4px; */

}


#bloc_gauche_centre_haut {
	
	min-height: 200px;
	/* min-width:500px;  */
	width: 40%;
	
	display: block;
	position:relative;
	float: left;	
	left:0px; 
	
	padding: 10px 20px;
	
	/* bordure pour matérialiser la DIV */
	/* border-style:solid;
	border-color:#FFCC33;
	border-width:2px; */


}

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

}

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

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


.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 {
	
	min-height: 200px;
	max-height: 100%;
	min-width:300px; 
	max-width: 90%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;	
	/* left:10px;  */
	top:20px;
	margin: 25px auto;
	padding: 10px 20px;
	
	/* bordure 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: #555654; /* gris très foncé - pour les span */
}


#bloc_gauche_centre_haut ul, #bloc_droit_centre_haut ul  {
	padding-left : 25px;
}


#bloc_gauche_centre_haut li {
	list-style-type: square;
	font-family: Tahoma;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #848583;  /* gris foncé */
}

#bloc_droit_centre_haut li  {
	list-style-type: square;
	font-family: 'Roboto',arial,sans-serif;
	font-size: 1.2em;
	font-weight: bold;
	text-decoration: none;
	color: #848583;  /* gris foncé */
}

.rose_rose{
	
	height: 197px;
	width:205px; 
	
	position:relative; 
	display: inline;
	float:left;
	left:400px;
	bottom:200px;
	z-index:3;
	opacity: 0.2;
}




#bloc_droit_centre_haut {
	
	min-height: 200px;
	/* min-width:400px;  */
	width: 40%;
	
	display: block;
	position:relative;
	/* clear: left; */
	float: left;	
	left:20px; 
	top: -10px;
	
	/* margin-top: -40px ; */
	padding: 10px 20px;
	
	
	/* bordure pour matérialiser la DIV */
	/* border-style:solid;
	border-color:#FFCC33;
	border-width:2px; */

}


#sous-bloc_D1_centre_haut {
	
	min-height: 150px;
	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;
	
	/* bordure pour matérialiser la DIV */
	/* border-style:solid;
	border-color:#FF0000;
	border-width:2px; */
}

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

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

.box2_caracteres_machinetapper {
	/* photos remplacement video sur pages chapitres du site */
	
	height: 130px;
	width:300px; 
	padding:5px ;
	background:#FFFFFF;
	color:#000000;
	font-family:Verdana;
	font-size:1.1em;
	border-style:solid;
	border:1px solid #888;
	border-radius:5px;	

}

.boite_loi{
	min-height: 150px;
	/* min-width:425px; */
	float:right;
	/* top:-60px;
	right:50px; */
	margin:5px;
	padding:10px;
	
	background-color:#FFF;

}

.texte_loi p{

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

.texte_loi li{

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


#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 {
	
	min-height: 150px;
	max-height: 100%;
	min-width:300px; 
	max-width: 90%;
	
	display: block;
	position:relative;
	clear: left;
	float: left;	
	/* float: right; */	
	right:10px; 
	top:20px;
	
	margin: 0px auto ;
	padding: 10px 20px;
	
	/* pour un fond blanc transparent à 40% ( en 4eme chiffre) */
	background-color: rgba(255, 255, 255, 0.4);
	
	/* bordure pour matérialiser la DIV */
	/* 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: 450px;
	width: 100%;
	
	position:relative; 
	left:10px; 
	top: 50px;
	
	margin:0 auto;


	
	background:url(../images/background/background_bas_10x440_374.jpg) repeat ;
	/* bordure pour matérialiser la DIV
	border: 8px inset blue; */
	
}


#bande_haute_Centre_Bas {
	
	display: flex;
    /* flex-direction: column; */
	flex-wrap: wrap;
		
	min-height: 450px;
	width: 100%;
	
	margin: 0px auto ;
	padding: 10px 20px;
	
	overflow-x: auto;
	overflow-y: visible;
	scrollbar-color: blue grey ;
	
	/* background:url(../images/background/background_bas_10x440_374.jpg) repeat ; */

}


#bande_haute_Centre_Bas-block{

    position: relative;
	min-height: 450px;
    width: 90%;
    /* float: left; */
    left: 10px;
    /* top: 20px; */
    margin: 0px auto;
    padding: 10px 20px;
	
	overflow: auto;
    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_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_Haut_gauche{
	height: 460px;
	width:65px; 
	
	position:relative; 
	display: inline;
	float:left;
	top:20px;
	left:10px;
	clear: left;
	z-index:2;

}

.image_vertical_AMG_confort_plus_Haut_droite{
	display:none;
}

.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;

}


	
	
/*---------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: none;
	/* display: inline; */
	float:left;
	top:0px;
	left:-30px;
	bottom: 0px;
	z-index:4;
}

.miroir_SdB{
	
	height: 300px;
	width:300px; 
	
	position:absolute; 
	display: inline;
	float:left;
	left:75px;
	top: -10px;
	z-index:3;
}	

.plaque_metal_douche{
	
	height: 284px;
	width:423px; 
	
	position:absolute; 
	display: inline;
	left:450px;
	top: 80px;
	z-index:2;
}

.plaque_metal_douche2{
	
	height: 284px;
	width:423px; 
	
	position:absolute; 
	display: inline;
	left:873px;
	top: 80px;
	z-index:2;
}

.douche_vintage{
	
	height: 618px;
	width:238px; 
	
	position:absolute; 
	display: inline;
	float:left;
	top: -40px;
	left: 625px;
	z-index:6;
}

.baignoire_vintage{
	
	height: 310px;
	width:472px; 
	
	position:absolute; 
	display: inline;
	float:left;
	top: 180px;
	left: 650px;
	z-index:5;
}

.douche_moderne{
	
	height: 380px;
	width:207px; 
	
	position:absolute; 
	display: inline;
	float:left;
	top: -10px;
	left: 1225px;
	z-index:7;
}


.cabine_douche{
	
	height: 533px;
	width:355px; 	
	position:absolute; 
	float:left;
	top: -10px;
	left: 1200px;
	z-index:6;
}

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

.feu-bougie-candle1{
	 

	position:relative; 
	display: inline;
	float:left;
	/* top:-200px; */
	left:100px;
	z-index:9;
}

.feu-bougie-candle2{
	 

	position:relative; 
	display: inline;
	float: right;
	/* top:-150px; */
	right:50px;
	z-index:10;
}

.feu-bougie-candle3{
	

	position:relative; 
	display: inline;
	float:right;
	top:-200px;
	right:30px;
	z-index:9;
}



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

.clearfix {
  overflow: auto;
}

.barre_clear_complete {
	height: 5px;
	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:min-content;
	width:min-content; 
	
	position:relative; 
	display: inline;
	float:right;
	top:15px;
	right:10px;
	
	margin: 5px 10px;
	padding: 10px;
}

.image_Droite_SANS_texte{
	
	height:min-content;
	width:min-content; 
	
	position:relative; 
	display: inline;
	float:right;
	top:15px;
	right:10px;
	
	margin: 5px 10px;
	
	clear: both;
}

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

.image_Centre_texteHautBas{
	
	height: min-content;
	width: min-content;
	
	margin: 0px auto;
	clear: both;	
}


	
}






























