/* BANDEAU */
#bandeau {position: relative; height: 350px; width:100%; background-size: cover!important; background: url("../images/bandeau_produit.jpg") center center;}
.titre_page {font-family: 'DINPro-Regular', Sans-Serif; position: relative;  padding-top: 92px; padding-left: 129px;}
.titre_page .bloc_right {width: 400px; height: 165px; padding-left: 20px; padding-top: 50px; background-color: #ffffff; float: left;  font-family: 'DINPro-Light', Sans-Serif; text-transform: uppercase;}
.titre_page h1 {font-size: 35px; font-size: 3.5rem; color: #808285; margin-bottom: 0; font-weight: lighter;}
.titre_page .categorie {font-size: 20px; font-size: 2.0rem; color: #53eac4; font-weight: bold;}
#bandeau .icones {width: 50px; position: absolute; z-index: 10; right: 30px; top: 24%;}
#bandeau .icones a {margin-top: 12px; opacity: 0.7;}
#bandeau .icones a:first-child{margin-top: 0px;}
#bandeau .icones a:hover {opacity:1;}

/* PRODUITS */
#produit {width: 1170px; margin: 0 auto;}
#produit .bloc_top {border-bottom: 1px solid #c0c1c6;}
#produit .bloc_top .photo {display: table-cell; width: 40%; padding-top: 50px; text-align: center; vertical-align: top;}
#produit .bloc_top .bloc_right {display: table-cell; width: 60%; padding-top: 30px; padding-left: 90px; font-family: 'DINPro-Regular', Sans-Serif; vertical-align: middle;}
#produit .bloc_top .bloc_right h1 {font-size: 30px; font-size: 3.0rem; font-weight: lighter; color : #53eac4; padding-bottom: 15px; background: url("../images/trait_produit.png") no-repeat left 100%;}
#produit .bloc_top .bloc_right .resume { color: #6d6e71; font-size: 15px; font-size: 1.5rem; padding-bottom: 15px;}
#produit .bloc_top .bloc_right .description { color: #6d6e71; font-size: 15px; font-size: 1.5rem; margin-bottom: 20px;}
#produit .bloc_top .bloc_right .description .conteneur_iframe { padding: 56.25% 0 0 0; width: 99.9%;}

#produit .bloc_bottom .bloc_left {float: left; width: 45%; padding: 40px 0px; font-family: 'DINPro-Regular', Sans-Serif;}
#produit .bloc_bottom .bloc_left .conditionnement, #produit .bloc_bottom .bloc_left .composition { float: left; width: 50%; text-align: center; padding-bottom: 40px;}
#produit .bloc_bottom .bloc_left .conditionnement .titre, #produit .bloc_bottom .bloc_left .composition .titre {font-size: 16px; font-size: 1.6rem; color: #b9b1a2;}
#produit .bloc_bottom .bloc_left .conditionnement .text, #produit .bloc_bottom .bloc_left .composition .text{padding: 5px 20px 0 20px; font-size: 14px; font-size: 1.4rem; color: #808285;}
#produit .bloc_bottom .bloc_left .composition .text{text-align: left;}
#produit .bloc_bottom .bloc_left .composition .text li {list-style: none;}
#produit .bloc_bottom .bloc_left .composition .text li:before {content: ' '; display: inline-block; width: 5px; height: 5px; margin-right: 4px; vertical-align: middle; background: #808285; border-radius: 50%;}
#produit .bloc_bottom .bloc_left .procurer {padding: 20px 25px; clear: both; background-color: #ededee; width: 530px;}
#produit .bloc_bottom .bloc_left .procurer .titre { font-size: 15px; font-size: 1.5rem; text-transform: uppercase; color: #53eac4;}
#produit .bloc_bottom .bloc_left .procurer .text {padding-top: 10px; font-size: 14px; font-size: 1.4rem; color: #6d6e71;}

#produit .bloc_bottom .bloc_right {position: relative; float: right;  width:42%; height: auto !important; padding: 40px 0px; font-family: 'DINPro-Regular', Sans-Serif;}
#produit .bloc_bottom .bloc_right .emploi .titre {padding-bottom: 15px; font-size: 16px; font-size: 1.6rem; color: #b9b1a2;}
#produit .bloc_bottom .bloc_right .emploi .text {font-size: 15px; font-size: 1.5rem; color : #6d6e71;}
#produit .bloc_bottom .bloc_right .emploi .text p {padding-bottom: 15px;}
.bloc_bouton {background-color: #53eac4; font-size: 18px; font-size: 1.8rem; font-family: 'DINPro-Light', Sans-Serif;}
.bloc_bouton .bouton {float: left; margin-left: 20px; padding: 30px 0; width: 376px; text-transform: uppercase; color: #ffffff; text-align: center;}
.bloc_bouton .bouton:first-child {margin-left: 0;}
.bloc_bouton .bouton p {background-color: #47c8a7; padding: 20px 0; width: 376px;}
.bloc_bouton .bouton a {text-decoration: none;}
.bloc_bouton .bouton a:hover p {background: #d5ccbf; opacity: 0.9;}

.dark_souls3{/*position: absolute; bottom: 0; left: 5px;*/ font-size: 1.5rem; color: #6d6e71;}
.dark_souls3_mob{display: none; font-size: 1.5rem; color: #6d6e71; text-align: center;}

.title_nos_produits {
	font-size: 35px;
	font-size: 3.5rem;
	color: #808285;
	margin-bottom: 0;
	font-weight: lighter;
	margin: 0 0 2px 0;
}

.categorie {
	font-size: 20px;
	font-size: 2.0rem;
	color: #53eac4;
	font-weight: bold;
	margin: 0;
	padding: 0;
}

.title_produit {
	font-size: 30px;
	font-size: 3.0rem;
	font-weight: lighter;
	color: #53eac4;
	padding-bottom: 15px;
	background: url(../images/trait_produit.png) no-repeat left 100%;
}

/**
 * Responsive Design
 */

 /* Grand écran */
 @media screen and (min-width: 1430px) {

 	#produits .produit:nth-child(3n+1){clear: both;}
 }

 /* Ecran classique / Tablette paysage */
 @media screen and (min-width: 980px) and (max-width: 1429px) {
 	#produits {width: 790px;}
 	.titre_page .bloc_right {height: 130px; padding-top: 33px;}
 	#produits .produit:nth-child(3n+1){clear: both;}

 	#produit {width: 940px;}
 	#produit .bloc_top .bloc_right {padding-left: 50px;}
 	#produit .bloc_bottom .bloc_right {width: 44%;}
 	#produit .bloc_bottom .bloc_left {width: 52%;}
 	#produit .bloc_bottom .bloc_left .conditionnement .text, #produit .bloc_bottom .bloc_left .composition .text {padding: 5px 10px 0 10px;}
 	#produit .bloc_bottom .bloc_left .procurer {width: 489px;}
 	.bloc_bouton .bouton {width: 300px;}
 	.bloc_bouton .bouton p {width: 300px;}

 }

 /* Tablette portrait */
 @media screen and (min-width: 764px) and (max-width: 979px) {
 	#bandeau {height: 218px;}
 	#bandeau .icones {top: 10%;}
 	#produits {width: 700px;}
 	.titre_page {padding-left: 50px; padding-top: 55px;}
 	.titre_page .bloc_right {height: 106px; padding-top: 22px;}
 	.titre_page h1 {font-size: 30px; font-size: 3.0rem;}
 	#produits .produit {width: 345px; margin-left: 10px;}
 	#produits .produit:nth-child(2n+1){clear: both; margin-left: 0px;}

 	#produit {width: 724px;}
 	#produit .bloc_top .bloc_right {padding-left: 30px; padding-right: 15px;}
 	#produit .bloc_top .photo img{ width: 100%;}
 	#produit .bloc_bottom .bloc_left {width: 50%; padding: 40px 0px;}
 	#produit .bloc_bottom .bloc_left .conditionnement .text, #produit .bloc_bottom .bloc_left .composition .text {padding: 5px 10px 0 10px;}
 	#produit .bloc_bottom .bloc_right {width: 46%;padding-right: 15px; text-align: justify;}
 	#produit .bloc_bottom .bloc_left .procurer {margin: 0px 88px;}
 	.bloc_bouton {font-size: 16px; font-size: 1.6rem;}
 	.bloc_bouton .bouton {width: 214px;}
 	.bloc_bouton .bouton p {width: 214px;padding: 13px 0;}
 	.bloc_bouton {padding: 0 21px;}

 	#produit .bloc_bottom .bloc_left .procurer {width: 100%; margin: 0 0 0 10px;}
 	.bloc_bottom .bloc_right{height: auto !important;}
 	.dark_souls3{position: relative; left: 0;}
 }

 /* Mobile */
 @media screen and (max-width: 763px) {
 	#bandeau {height: 218px;}
 	#bandeau .icones {display: none;}
 	#produits {width: 300px;}
 	.titre_page {padding-left: 18px; padding-top: 55px;}
 	.titre_page .bloc_right {height: 106px; padding-top: 22px; width: 250px;}
 	.titre_page h1 {font-size: 25px; font-size: 2.5rem;}
 	.titre_page .categorie {font-size: 18px; font-size: 1.8rem;}
 	#produits .produit {width: 300px; margin-left: 0px;}
 	#produits .produit:nth-child(2n+1){clear: both; margin-left: 0px;}
 	#produits .produit .produit_designation {padding-top: 25px; padding-bottom: 15px; font-size: 20px; font-size: 2.0rem;}
 	#produits .produit .resume {height: 78px;}

 	#produit {width: 100%; padding: 0 10px;}
 	#produit .bloc_top .photo { display: block; width: 100%;}
 	#produit .bloc_top .photo img{ width: 100%;}
 	#produit .bloc_top .bloc_right {display: block; width: 100%; padding: 10px 10px;text-align: justify;}
 	#produit .bloc_bottom  .bloc_left {width: 100%;}
 	#produit .bloc_bottom .bloc_left .conditionnement, #produit .bloc_bottom .bloc_left .composition {width: 100%;}
 	#produit .bloc_bottom .bloc_right {width: 100%; padding: 40px 10px 0 10px; text-align: justify;}
 	#produit .bloc_bottom .bloc_left .procurer {width: 90%; margin: 0 auto;}

 	.bloc_bouton {font-size: 16px; font-size: 1.6rem; padding: 15px 0;}
 	.bloc_bouton .bouton {width: 214px; padding: 10px 0;}
 	.bloc_bouton .bouton p {width: 214px;padding: 13px 0;}
 	.bloc_bouton {padding: 0 21px;}
 	.bloc_bouton .bouton:first-child {margin-left: 20px;}
 	.dark_souls3{display: none;}
 	.dark_souls3_mob{display: inherit; padding-top: 15px;}

 }