/*======================================*/
/*		pour navigateur web, style :
		CHROME, Mozilla, Edge...		*/
/*======================================*/
	@media (min-width: 900px) {	/*a partir de 900 px et au delà*/
		body{	
			height: auto;
		    text-align: justify;
		    font-family: 'dinregular';
		    background: #e6e6e6;/*couleur fond gris*/
		    display: block;
		    margin: 0px;
		}
		/*bloc _ centre*/
			section.centre{
				width: 900px;/**/
				margin: auto;
				/*padding: 1px;/**/
				background: white;/*couleur blo centre :  blanc*/
			}

		/*police*/
			@font-face {
			    font-family: 'dinregular';
			    src: url('../police/din_bold-webfont.woff2') format('woff2'),
			         url('../police/din_bold-webfont.woff') format('woff');
			    font-weight: normal;
			    font-style: normal;

			}
		
		/* Navigation */
			.nav-toggle { display: none; }

			.centre nav #logo {
			  float: left;
			  padding: 15px;/**/
			  font-size: 1.25rem;/**/
			  color: #f2f2f2;
			}


			.navbar {
				border-bottom: solid white;
			  	overflow: hidden;
			  	background-color: #cd9438;
			  	position: fixed; /*menu reste en haut de la page qd scroll*/
			  	top: 0;
			  	width: 900px; /*largueur menu sur la page*/
			  	height: 50px;
			}
			/*.navbar li#logo {
				float: left;
			}*/
			.navbar li {
			  float: right;
			  display: block;

			  color: #f2f2f2;
			  text-align: center;
			  font-size: 0.8em;

			  text-decoration: none;
			  list-style-type: none;

			  padding: 10px 12px;
			  /*margin-right: 5px;*/
			}

			.menu-left a:hover {
			  color: #c1c1a4;
			  border-bottom: 3px solid #c1c1a4;
			}

			nav a
			{
				text-align: center:;
			    font-size: 1.1em; /*taille police du menu*/
			    color: #f6f5ef;
			    padding-bottom: 3px;
			    text-decoration: none;
			}

		/* header */
			header{ 
				margin: 5px; /*decale autour du bloc de 5px*/
				background-color: #cd9438;	/*couleur fond ou il y a le logo*/
				padding: 40px; /*au dessus, a gauche, a droite et en dessous*/
				padding-top: 75px; /*au dessus, a gauche, a droite et en dessous*/
			}

			#logo img /*Logo  BL COUTURE + Titre*/
			{
				display: flex;
			    width: 270px; /*redimension du logo*/
			    height: 90px; /*redimension du logo*/
			}

			img.displayed { /*logo affiché */
			    display: block;
			    margin-left: auto;
			    margin-right: auto; 
			}

		/*section intro : image couloir + texte presentation*/
			.sec_intro{
				margin-top: 40px; 
				margin-left: 30px; 
				margin-right: 30px; 
			}
				img.couloir{
				display: inline-block;
				padding: 2px;
				vertical-align:top;
				width: 50%;
				height: 50%;
			}
			.description { 
				display: inline-block;
				vertical-align:top;
				width: 40%;
				color: #a79470;/**/
				padding-left: 35px; /*decalage vers la gauche du bloc */
				padding-right: 20px; /*decalage vers la droite du bloc */
				text-align: justify;
			}
			h4#name, p#address{
				text-align: center;/*centre le titre et l'addresse*/
			}

		/*section services : d_produits + d_retouches + d_confections */
			h2#serv{
				padding-top: 0px;
				text-align: center;
				font-size: 1.8em;
				margin-bottom: 0;
				margin-left: 0;
			}
			.sec_services{
				display: flex;
				margin: 30px; 
				padding-left: 22px;
				background-color: #78c8cf; 
				color: #f2f2f2; /**/
				font-size: 14px;
			}
			.sec_services ul li{
				text-decoration: none;
				list-style-type: none;
			}
			strong{
				text-transform: uppercase;
			}

			#d_produits{
				display: inline-block;
				width: 47%;			
				/*border: 1px dashed red;/**/
				margin-top: 0;
				float: left;
				margin-right: 20px;
				text-align: left;
			}
			#ret_et_conf{
				display: inline-block;
				width: 37%;			
				/*border: 1px dashed green;/**/
				margin-left: 100px; 
				margin-top: 0;
			}
			.space_between{
				font-size: 1.1em;
				line-height:18px;
			}

		/*section informations*/
			section.informations{
				padding-top: 0px;
				padding-left: 15px;
				padding-bottom: 10px;
				background-color: #B2D5B5;/*couleur de fond A1CCA5 */
			}
			h2#info{

				padding-top: 15px;
				margin-bottom: 0;		
		    	text-align: center;
		    	color: #f2f2f2; /*couleur police*/
			}

		/*section outro : horaire + contact + maps*/
			.sec_outro{
				margin: 30px;
			}

			#hor_et_cont{
				min-width: 35%;
				//border: dashed blue;/**/
				display: inline-block;
				padding-left: 10px;
				padding-bottom: 10px;
			}
			#maps{
				display: inline-block;
				width: 50%;
				height: 100%;
				padding-left: 30px;
			}
			#id_horaires{
				border: solid white;
				text-align: center;
				background-color: #cd9438;
				color: #f2f2f2;
				margin-bottom: 15px;
				padding: 5px;
			}
				h2{margin-bottom: 0;}
				h4#rdv{
				margin-top: 0;
				text-align: center;}

			#contact{
				
				border: solid white;
				text-align: center;
				margin-top: 15px;
				color: #f2f2f2;
				background-color: #5ab99b;
				padding: 5px;
			}
			a#ad_mail{
				text-decoration: none;
				color: #f2f2f2;
			}
			img.contact{
				size: 50px 50px;
			}
			div#url_fb_blcouture{
				text-align: center;/*centre horizontalement*/
				vertical-align: middle; /*centre verticalement*/
			}

				iframe /* centrage plan google*/
				{
				 	width:99.9%; /*rempli le cadre avec tout le "plan" */
				 	height:335px;
					margin: 0 auto;
				}

		/*footer */
			footer{ 
				background-color: #cd9438; /*fond : marron*/
				color: #f2f2f2;	/*police : blanche*/
			}

			#credits{
				padding: 15px;
				text-align: center;/*centre horizontalement*/
				vertical-align: middle; /*centre verticalement*/
			}
	}

/*nav*/
	@media (min-width: 576px) {

		header nav ul li a { 
			display: block;  
			padding: .425rem 0rem;
		}
	}
	nav ul li a { display: block; }

	.hide-nav {
	 transform: translateY(-120% !important); 
	 -webkit-transform: translateY(-120%) !important; 
	}

/*======================================*/
/*		pour mobile & talette ! 		*/
/*======================================*/

	@media (max-width: 899px) {	/* de 0 jusqu'a < 900 */
		body{	
			height: auto;
		    text-align: justify;
		    font-family: 'dinregular';
		    background: #e6e6e6;/*couleur fond gris*/
		    display: block;
		    margin: 0px;
		}

		/*navigation*/
			.centre nav #logo {
			  float: left;
			  padding: 2px 2px;/**/
			  font-size: 1.25rem;/**/
			  color: #f2f2f2;
			}

			ul.menu-left {
			  display: block;
			  max-height: 0; /*cache le menu*/
			  overflow: hidden;
			}

			.centre nav {
			  padding: 8px;/**/
			  color: #f2f2f2;
			}
			.nav-toggle {
			  display: block;
			  background-color: #cd9438; /*couleur fond menu & logo*/
			  float: right;
			  height: 8px;
			  cursor: pointer;
			  color: #f2f2f2;/*couleur police blanc-gris*/
			}

			ul.menu-left.collapse { max-height: 12em !important; }/**/


			nav a
			{
				/*text-align: center/**/
			    font-size: 1.1em; /*taille police du menu*/
			    color: #f2f2f2;
			    margin: 5px;/**/
			    padding: 5px;
			    text-decoration: none;
			}

			.navbar{
				border-bottom: white solid;
	  			min-height: 24px;
				position: fixed;
				top: 0;
				width: 99%;
				height: auto;
				background-color: #cd9438;	/*couleur fond ou il y a le logo*/
			}
			.navbar li {
			  /*float: right;/**/
			  display: block;

			  color: #f2f2f2;
			  text-align: center;
			  font-size: 0.8em;

			  text-decoration: none;
			  list-style-type: none;

			  /*padding: 10px 12px;/**/
			  /*margin-right: 5px;*/
			}
		
		/*bloc _ centre*/
			section.centre{
				width: auto;/**/
				margin: auto;
				/*padding: 1px;/**/
				background: white;/*couleur blo centre :  blanc*/
			}

		/*police*/
			@font-face {
			    font-family: 'dinregular';
			    src: url('../police/din_bold-webfont.woff2') format('woff2'),
			         url('../police/din_bold-webfont.woff') format('woff');
			    font-weight: normal;
			    font-style: normal;

			}

		/* header */
		/*la ou il y a la bio et la présentation de BL Couture*/
			header{ 
				margin: 5px; /*decale autour du bloc de 5px*/
				background-color: #cd9438;	/*couleur fond ou il y a le logo*/
				padding: 40px; /*au dessus, a gauche, a droite et en dessous*/
				padding-top: 100px; /*au dessus, a gauche, a droite et en dessous*/
			}

			#logo img /*Logo  BL COUTURE + Titre*/
			{
				display: flex;
			    min-width: 240px; /*redimension du logo*/
			    height: 90px; /*redimension du logo*/
			}

			img.displayed { /*logo affiché */
			    display: block;
			    margin-left: auto;
			    margin-right: auto; 
			}

		/*section intro : image couloir + texte presentation*/
			.sec_intro{
				/*border: blue dashed;/*bordure debbug*/
				text-align: justify;	/*texte occupe la max de place de gauche a droite*/
				margin:0;
			}
				img.couloir{
				display: none; /*n'affiche pas l'image du couloir*/
			}
			.description { 
				/*border: red dashed;/*bordure debbug*/
				display: block;
				vertical-align:top;
				width: 300px;
				color: #a79470;/**/
				margin: auto;	/*centre le block*/
			}
			h4#name, p#address{
				text-align: center;/*centre le titre et l'addresse*/
			}

		/*section services : d_produits + d_retouches + d_confections */	
			section#services{
				/*border: green dashed;/*bordure debbug*/

			}
			#bloc_serv{
				margin: 0 auto;	/*centre les bloks*/
				padding-top: 5px;/*decale dans bloc au dessus de 5px*/

				/*border: blue dashed;/*bordure debbug*/
			}

			#prod, #ret, #conf{
				text-transform: uppercase; /*ecrit en majuscule les titres*/
			}
			#d_produits, #d_retouches, #d_confections{
				background-color: #F1A07C;/*saumon*/
				border: solid;
				display: block;
				width: 280px;
				padding: 5px;/*decale dans block 5px*/
				margin-top: 10px;
			}

			h2#serv{/*centre titre SERVICE*/
				margin: 0;
				text-align: center;
				font-size: 1.8em;
				padding:5px;
				padding-bottom: 10px;
			}
			.sec_services{
				display: flex;
				margin: 5px; /*decale autour du bloc de 5px*/
				padding-top: 15px;/*decale dans bloc au dessus de 15px*/
				padding-bottom: 15px;/*decale dans bloc au dessus de 15px*/
				padding-left: 5px;/*decale dans bloc a gauche de 5px*/
				padding-right: 5px;/*decale dans bloc a gauche de 5px*/
				background-color: #78c8cf; /*couleur de fond : bleu*/
				color: #f2f2f2; /*couleur texte : gris-blanc*/
				font-size: 14px; /*taille police*/
			}
			.sec_services ul{
				/*text-decoration: none;/**/
				list-style: none; /*retire les puces*/
				margin-left:0;	/*retire les marges*/
				padding-left:0; /*retire les espaces*/
			}
			.sec_services li{
				margin-left:20px;/* decale texte de gauche vers la droite*/
				margin-right:10px;/* decale texte */
			}
			strong{
				text-transform: uppercase;
			}

		/*section informations : horaires + contact + maps*/
			section.informations{
				margin: 5px; /*decale autour du bloc de 5px*/
				padding-top: 0px;
				/*padding-left: 15px;/**/
				padding-bottom: 10px;
				background-color: #B2D5B5;/*couleur de fond A1CCA5 */
			}
			h2#info{

				padding-top: 15px; /*decale dans bloc au dessus de 15px*/
				margin-bottom: 2px;		
		    	text-align: center;/*aligne le titre INFORMATIONS*/
		    	color: #f2f2f2; /*couleur police : blanc gris*/
			}

			#hor_et_cont{
				/*border: green dashed;/*debbug*/
				display: block;
				margin: auto;	/*centre le block*/
				width: 300px;
				/*padding-left: 10px;/**/
				/*padding-bottom: 10px;/**/
			}
			#maps{

				display: block;
				margin: auto;	/*centre le block*/
				padding: 10px;
				width: 290px;
			}
			iframe /* centrage plan google*/
			{
			 	width:99.9%; /*rempli le cadre avec tout le "plan" */
			 	height:300px;
				/*margin: 0 auto;/**/
			}

			#id_horaires{			
				/*border: red dashed;/*debbug*/
				border:solid 3px white;
				text-align: center;	/*centre texte*/
				background-color: #cd9438;	/*couleur fond : maron claire*/
				color: #f2f2f2;	/*couleur texteblanc-gris*/
				margin-bottom: 15px;/**/
				padding: 5px;/*dans block contour horaires*/
			}
			h2#truc{
				margin-bottom: 0;
			}
			h4#rdv{
				margin-top: 0;
				text-align: center;
			}

			#contact{			
				/*border: blue dashed;/*debbug*/
				border:solid 3px white;
				text-align: center;
				margin-top: 15px;
				color: #f2f2f2;
				background-color: #5ab99b;
				padding: 5px;
			}

			a#ad_mail{
				text-decoration: none; /*cache la deco des liens*/
				color: #f2f2f2;	/*mets la meme couleur police que partout*/
			}
			img.contact{
				size: 50px 50px; /*image du logo facebook*/
			}
			div#url_fb_blcouture{ /*lien ad mail blcouture*/
				text-align: center;/*centre horizontalement*/
				vertical-align: middle; /*centre verticalement*/
			}

		/*footer */
			footer{ 
				background-color: #cd9438; /*fond : marron*/
				color: #f2f2f2;	/*police : blanche*/
			}

			#credits{
				padding: 15px;
				text-align: center;/*centre horizontalement*/
				vertical-align: middle; /*centre verticalement*/
			}
	}