/***** top page *****/
.top_page 							{ position: relative; padding-top: 145px;}
.top_page .texte 					{ padding: 60px 0 0 0;}
.top_page .titre_main				{ margin-bottom: 10px; font-size: 35px; line-height: 45px;}
.top_page .sous_titre 				{ color: #222;}
.top_page .chapo 					{ margin: 20px 0 0 0;}
.top_page p 						{ margin: 15px 0 0 0;}

@media (max-width:1200px) {
.top_page 							{ padding-top: 100px;}
.top_page .texte 					{ padding: 50px 0 0 0;}
.top_page .titre_main				{ font-size: 30px; line-height: 35px;}
}
@media (max-width:1000px) {
.top_page .texte 					{ padding: 40px 0 0 0;}
}
@media (max-width:700px) { 
.top_page 							{ padding-top: 80px;}
.top_page .texte 					{ padding: 15px 0 0 0;}
.top_page .titre_main				{ font-size: 20px; line-height: 28px; margin-bottom: 8px;}
.top_page .chapo 					{ margin: 15px 0 0 0;}
.top_page p 						{ margin: 10px 0 0 0;}
}


/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; padding: 20px 0; position: relative;}
.breadcrumb:before 					{ width: 200vw; position: absolute; left: -50vw; top: 0; bottom: 0; background: #e8f7ff; content: "";}
.breadcrumb li 						{ display: inline-block; font-size: 12px; line-height: 20px; margin-right: 30px; letter-spacing: 0.8px; position: relative;}
.breadcrumb li:after				{ width: 5px; height: 5px; position: absolute; right: -20px; top: 7px; background: #0084d7; border-radius: 50%; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li a.active 			{ color: #0084d7;}
.breadcrumb li a.back 				{ background: url("../images/back.svg") 0 50% no-repeat; padding-left: 18px;}

@media (min-width:1201px) {
.breadcrumb a:hover                 { color: #0084d7;}
}
@media (max-width:700px) { 
.breadcrumb							{ display: none;}
}


/***** page content *****/
.page 								{ position: relative; padding-bottom: 20px;}
.page p								{ margin-bottom: 15px;}
.page .ul_list a, 
.page p a							{ border-bottom: 1px solid #ccc; padding-bottom: 2px;}
.page .ul_list						{ margin-bottom: 15px;}
.page .ul_list li					{ padding: 0 0 0 22px; position: relative; margin-top: 10px;}
.page .ul_list li:before			{ width: 6px; height: 6px; position: absolute; left: 0; top: 11px; background: #0084d7; border-radius: 50%; content: "";}

@media (min-width:1201px) {
.page .ul_list a:hover,
.page p a:hover						{ color: #0084d7; border-color: #0084d7;}
}
@media (max-width:1200px) {
.page 								{ padding-bottom: 10px;}
}
@media (max-width:700px) {
.page 								{ padding-bottom: 5px;}
.page p								{ margin-bottom: 10px;}
.page .ul_list						{ margin-bottom: 10px;}
.page .ul_list li					{ margin-top: 5px;}
.page .ul_list li:before			{ top: 10px;}
}



/***** bloc texte *****/
.bloc_texte							{ margin: 80px auto; position: relative;}
.bloc_texte :last-child				{ margin-bottom: 0;}
.bloc_texte img,
.bloc_texte video					{ width: 100%; height: auto; display: block; border-radius: 10px;}

@media (max-width:1200px) { 
.bloc_texte							{ margin: 70px auto;}
}
@media (max-width:1000px) { 
.bloc_texte							{ margin: 50px auto;}
}
@media (max-width:700px) { 
.bloc_texte							{ margin: 30px 0;}
.bloc_texte img,
.bloc_texte video					{ border-radius: 5px;}
}


/***** bloc first *****/
@media (max-width:700px) { 
.bloc_first							{ margin-top: 10px;}
}



/***** bloc blue *****/
.bloc_blue   						{ padding: 40px; border-radius: 10px; position: relative; background: #e8f7ff; margin: 100px auto;}
.bloc_blue p.titre					{ display: block; text-align: center; margin: 0; font-size: 18px;}

@media (max-width:1200px) {
.bloc_blue   						{ padding: 30px 40px; margin: 80px auto;}
}
@media (max-width:1000px) {
.bloc_blue   						{ margin: 60px auto;}
.bloc_blue p.titre					{ font-size: 18px;}
}
@media (max-width:700px) {
.bloc_blue   						{ margin: 40px auto; padding: 20px 25px; border-radius: 5px;}
.bloc_blue p.titre					{ font-size: 14px; line-height: 22px;}
}


/***** bloc back *****/
.bloc_back 							{ text-align: right; padding-top: 60px; border-top: 1px solid #b7e3f7;}
.bloc_back .link 					{ margin: 0;}

@media (max-width:1200px) {
.bloc_back 							{ padding-top: 50px;}
}
@media (max-width:1000px) {
.bloc_back 							{ padding-top: 50px; margin-top: 20px;}
}
@media (max-width:700px) {
.bloc_back 							{ padding: 30px 0 5px 0; margin-top: 0; border: none; text-align: left;}
.bloc_back .link 					{ width: auto; background: #e8f7ff;}
}




/***** societe *****/
#societe .nav_onglets 								{ display: grid; grid-template-columns: auto auto auto auto 1fr; grid-gap: 10px; position: relative; z-index: 50; margin: 50px 0 -10px 0;}
#societe .nav_onglets .link							{ background-image: linear-gradient(to top, #e8f7ff 0% 50%, #0084d7 50% 100%); color: #222;}
#societe .nav_onglets .link.active					{ background-position: 0 0; color: #fff;}
#societe .onglets .onglet:not(.first) 				{ display: none;}

@media (min-width:1201px) {
#societe .nav_onglets .link:not(.active):hover 		{ color: #fff;}
}
@media (max-width:1200px) {
#societe .nav_onglets 								{ margin: 40px 0 -10px 0;}
}
@media (max-width:700px) {
#societe .nav_onglets 								{ margin: 30px -10vw 0 -10vw; padding: 0 10vw; grid-template-columns: auto auto auto auto; grid-gap: 0; justify-content: start; overflow-x: auto; background: #e8f7ff;}
#societe .nav_onglets::-webkit-scrollbar 			{ display: none;}
#societe .nav_onglets .link							{ box-shadow: none; background: none; padding: 0; margin-right: 7vw; white-space: nowrap;}
#societe .nav_onglets .link.active					{ color: #0084d7;}
}


/* timeline */
#societe .timeline 									{ position: relative; display: grid; grid-gap: 40px; margin-top: 35px;}
#societe .timeline:after 							{ width: 1px; position: absolute; left: 47px; top: 0; bottom: 0; background: #b7e3f7; z-index: -1; content: "";}
#societe .timeline .item							{ position: relative; display: grid; grid-template-columns: 95px 1fr; align-items: center; grid-gap: 80px;}
#societe .timeline .texte							{ padding-bottom: 40px; border-bottom: 1px solid #b7e3f7;}
#societe .timeline .date							{ position: relative; width: 100%; height: 40px; line-height: 40px; background: #e8f7ff; text-align: center; border-radius: 5px; margin-bottom: 40px;}

@media (max-width:1200px) {
#societe .timeline 									{ margin-top: 30px;}
#societe .timeline .item							{ grid-gap: 60px;}
}
@media (max-width:1000px) {
#societe .timeline:after 							{ left: 37px;}
#societe .timeline .item							{ grid-template-columns: 75px 1fr; grid-gap: 40px;}
}
@media (max-width:700px) {
#societe .timeline 									{ margin-top: 20px; grid-gap: 30px; padding-bottom: 30px; border-bottom: 1px solid #b7e3f7;}
#societe .timeline:after 							{ display: none;}
#societe .timeline .item							{ display: block;}
#societe .timeline .texte							{ padding-bottom: 0; border: 0;}
#societe .timeline .date							{ margin-bottom: 15px; width: 75px;}
}


/* fournisseurs */
#societe .fournisseurs								{ display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; grid-gap: 30px; margin-top: 35px;}
#societe .fournisseurs .item						{ background: #fff; border-radius: 8px; overflow: hidden; border: 1px solid #b7e3f7; padding: 10px 20px;}
#societe .fournisseurs .item img					{ display: block; margin: 0 auto; max-width: 160px;}

@media (max-width:1200px) {
#societe .fournisseurs								{ margin-top: 30px; grid-gap: 20px;}
}
@media (max-width:700px) {
#societe .fournisseurs								{ grid-template-columns: 1fr 1fr 1fr; grid-gap: 10px;}
}
@media (max-width:400px) {
#societe .fournisseurs								{ grid-template-columns: 1fr 1fr;}
}


/***** services *****/
#services .bloc_intro 								{ margin-bottom: -40px;}

@media (max-width:1200px) {
#services .bloc_intro 								{ margin-bottom: -30px;}
}

@media (max-width:700px) {
#services .bloc_intro 								{ margin-bottom: -20px;}
}






#produits .listing 									{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px;}
#produits .listing .item  							{ position: relative;}
#produits .listing .item img						{ border-radius: 10px 10px 0 0;}
#produits .listing .item .texte						{ padding: 40px; background: #fff; box-shadow: 0 0 30px 0 #00bcde30; border-radius: 0 0 10px 10px; /*border-top: 2px solid #b7e3f7;*/}
#produits .listing .item .sous_titre				{ margin-bottom: 10px;}
#produits .listing .item .link						{ width: 100%; margin-top: 10px; text-align: center;}


/*
@media (max-width:700px) {
#produits .chapo 									{ display: none;}
}
*/




/***** page luminaire *****/
#produits .list_products 							{ position: relative;}
#produits .list_products .item 						{ grid-template-columns: 400px 1fr; border-bottom: 1px solid #b7e3f7; padding-bottom: 80px; align-items: start;}
#produits .list_products .item:last-child 			{ border: none; padding: 0;}
#produits .list_products .show_hide 	 			{ background: #e8f7ff; border-radius: 8px;}
#produits .list_products .show_hide .titre 			{ background: none; font-size: 14px; font-weight: 500; color: #222; padding: 0 30px; height: 54px; line-height: 54px;}
#produits .list_products .show_hide .titre:after 	{ right: 25px;}
#produits .list_products .show_hide .hide 			{ background: none; padding: 10px 30px 30px 30px;}
#produits .list_products .show_hide .grid 			{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 15px;}
#produits .list_products .show_hide .link 			{ margin: 0; padding: 15px 25px; line-height: 20px; height: auto;}

@media (max-width:1200px) {
#produits .list_products .item 						{ grid-template-columns: 380px 1fr; padding-bottom: 70px;}
#produits .list_products .show_hide .grid 			{ grid-template-columns: 1fr;}
}
@media (max-width:1000px) {
#produits .list_products .item 						{ grid-template-columns: 1fr; padding-bottom: 60px;}
#produits .list_products .show_hide .grid 			{ grid-template-columns: 1fr 1fr;}
}
@media (max-width:700px) {
#produits .list_products .item 						{ padding-bottom: 40px;}
#produits .list_products .item .link 				{ background: #0084d7; text-align: center; margin: 0;}
#produits .list_products .show_hide .titre 			{ font-size: 13px; padding: 0 25px; height: 50px; line-height: 50px;}
#produits .list_products .show_hide .hide 			{ padding: 5px 25px 25px 25px;}
#produits .list_products .show_hide .grid 			{ grid-template-columns: 1fr; grid-gap: 10px;}
#produits .list_products .show_hide .link 			{ padding: 12px 22px; line-height: 20px; background: #fff; text-align: left;}
}


/***** page tous les luminaires *****/
#produits .search  									{ margin: 60px 0 -20px 0;}
#produits .search form								{ display: grid; grid-template-columns: 200px 1fr 1fr 240px; grid-gap: 15px; align-items: center;}
#produits .search form .titre						{ height: 53px; line-height: 53px; border-radius: 8px; text-align: center; background: #e8f7ff;}
#produits .search form select						{ width: 100%; height: 53px; font: 400 13px/23px "Poppins"; letter-spacing: 0.4px; padding: 0 25px; background: url("../images/arrow_select.svg") right+20px center no-repeat #fff; color: #222; border-radius: 8px; border: 1px solid #b7e3f7; -webkit-appearance: none; appearance: none;}
#produits .search form .link						{ border: none; cursor: pointer; padding: 0; text-align: center;}

#produits .direct_search  							{ margin: 60px 0 -40px 0;}
#produits .direct_search form .item					{ grid-column: span 2;}

@media (max-width:1200px) {
#produits .search  									{ margin: 30px 0 -10px 0;}
#produits .search form								{ grid-template-columns: 1fr 1fr 220px;}
#produits .search form .titre						{ grid-column: span 3; background: none; text-align: left; height: auto; line-height: 30px; font-weight: 500;}
#produits .direct_search  							{ margin: 40px 0 0 0;}
}
@media (max-width:1000px) {
#produits .search form								{ grid-template-columns: 1fr 1fr 180px;}
}
@media (max-width:700px) {
#produits .search  									{ margin: 20px 0 0 0;}
#produits .search form								{ grid-template-columns: 1fr; grid-gap: 10px;}
#produits .search form .titre						{ grid-column: auto; background: none; text-align: left; height: auto; line-height: 24px; font-weight: 500; font-size: 14px;}
#produits .search form select						{ height: 48px; padding: 0 20px; background-position: right+20px center; border-radius: 5px;}
#produits .search form .link						{ background: #0084d7;}
#produits .direct_search  							{ margin: 10px 0 0 0;}
}


/* custom select */
.select2-container--default .select2-selection--single 								{ border: 1px solid #b7e3f7; border-radius: 8px; height: 53px; background: url("../images/arrow_select.svg") right+20px center no-repeat #fff;}
.select2-container .select2-selection--single .select2-selection__rendered 			{ line-height: 25px; padding: 14px 25px;}
.select2-container--default .select2-selection--single .select2-selection__arrow 	{ display: none;}
.select2-dropdown 																	{ border-color: #b7e3f7; border-radius: 8px; overflow: hidden;}
.select2-dropdown b, .select2-dropdown strong 										{ font-size: 14px;}
.select2-container--default .select2-results__option--selected    					{ background: #b7e3f7;}
.select2-container--default .select2-search--dropdown .select2-search__field 		{ border-color: #b7e3f7;}

@media (max-width:700px) {
.select2-container--default .select2-selection--single 								{ border-radius: 5px; height: 48px;}
.select2-container .select2-selection--single .select2-selection__rendered 			{ line-height: 20px; padding: 14px 20px;}
.select2-dropdown 																	{ border-radius: 5px;}
}



/***** listing produits *****/
#produits .grid_products 							{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; margin-top: 30px; padding-bottom: 80px;}
#produits .grid_products .item  					{ position: relative;}
#produits .grid_products .item * 					{ transition: all 400ms ease-in-out;}
#produits .grid_products .item img					{ border-radius: 10px 10px 0 0; position: relative; z-index: 10;}
#produits .grid_products .item .sous_titre			{ margin: 0; background: url("../images/list.svg") right+30px center no-repeat #fff; border-radius: 0 0 10px 10px; box-shadow: 0 0 30px 0 #00bcde30; padding: 25px 50px 25px 30px; font-size: 16px; line-height: 20px;}
#produits .grid_products .item a					{ width: 100%; height: 100%; position: absolute; left: 0; top: 0; font-size: 0; z-index: 10;}

@media (min-width:1201px) {
#produits .grid_products .item:hover img 			{ opacity: 0.65;}
#produits .grid_products .item:hover .sous_titre 	{ color: #222;}
}
@media (max-width:1200px) {
#produits .grid_products 							{ grid-gap: 30px; padding-bottom: 60px;}
}
@media (max-width:1000px) {
#produits .grid_products 							{ grid-template-columns: 1fr 1fr; grid-gap: 30px; padding-bottom: 30px;}
}
@media (max-width:700px) {
#produits .grid_products 							{ grid-template-columns: 1fr; grid-gap: 20px; padding-bottom: 10px; margin-top: 20px;}
#produits .grid_products .item img					{ border-radius: 8px 8px 0 0;}
#produits .grid_products .item .sous_titre			{ background-position: right+20px center; border-radius: 0 0 8px 8px; box-shadow: none; padding: 18px 40px 17px 20px; font-size: 14px; border: 1px solid #b7e3f7; border-top: 0;}
}


/***** fiche produit *****/
#fiche .bloc_grid .texte .grid 						{ display: grid; grid-template-columns: repeat(7, 1fr); grid-gap: 5px 10px; margin: 30px 0;}
#fiche .bloc_grid .texte .grid img					{ width: 100%; height: auto; display: block;}
#fiche .bloc_grid .texte .link 						{ width: 100%;}
#fiche .bloc_grid .texte .link:after				{ width: 20px; height: 100%; background: url("../images/dwld.svg") 50% no-repeat; position: absolute; right: 25px; top: 0; content: "";}

@media (max-width:700px) {
#fiche .bloc_grid 									{ margin-bottom: 20px;}
#fiche .bloc_grid .texte .grid 						{ grid-template-columns: repeat(5, 1fr); grid-gap: 8px; margin: 25px 0;}
#fiche .bloc_grid .texte .link 						{ background: #0084d7;}
}


/***** references *****/
#references .listing 								{ display: grid; grid-template-columns: repeat(4, 1fr); grid-gap: 30px;}
#references .listing .item							{ padding: 30px; text-align: center; border: 1px solid #b7e3f7; border-radius: 8px; line-height: 24px; font-weight: 600;}
#references .listing .item span						{ display: block; color: #0084d7; font-weight: 400; line-height: 22px; padding-top: 4px;}

@media (max-width:1000px) {
#references .listing 								{ grid-template-columns: repeat(3, 1fr); grid-gap: 20px;}
}
@media (max-width:700px) {
#references .listing 								{ grid-template-columns: repeat(2, 1fr); grid-gap: 10px;}
#references .listing .item							{ padding: 20px; border-radius: 5px;}
}
@media (max-width:370px) {
#references .listing 								{ grid-template-columns: 1fr;}
}