/***** top page *****/
.top_page 							{ position: relative; padding: 150px 0 0 0; margin-bottom: 120px;}
.top_page .chapo					{ margin-bottom: 0;}
.top_page .chapo span				{ margin-top: 10px;}
.top_page .wrapper					{ padding: 80px 50px; background: #000; color: #fff;}
.top_page .wrapper .content 		{ max-width: 1200px; margin: 0 auto;}

.top_page .titre_main				{ margin-bottom: 15px;}

@media (max-width:1200px) {
.top_page 							{ padding: 100px 0 0 0; margin-bottom: 80px;}
}
@media (max-width:1000px) {
.top_page 							{ padding: 80px 0 0; margin-bottom: 60px;}
.top_page .wrapper					{ padding: 60px 5vw;}
}
@media (max-width:700px) {
.top_page 							{ padding: 140px 0 0 0; margin-bottom: 50px;}
.top_page .wrapper					{ padding: 35px 7.5vw; width: 100vw;}
}



/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding-bottom: 40px;}
.breadcrumb li 						{ display: inline-block; font-size: 13px; line-height: 20px; margin-right: 30px; letter-spacing: 0.8px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -15px; top: 6px; background: #fff; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li a 					{ color: #fff;}
.breadcrumb li a.active 			{ color: #f8ba13;}

@media (min-width:1201px) {
.breadcrumb a:hover                 { color: #f8ba13;}
}
@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: 3px;}
.page .ul_list						{ margin-bottom: 15px;}
.page .ul_list li					{ padding: 5px 0 5px 20px; position: relative;}
.page .ul_list li:before			{ position: absolute; left: 0; top: 17px; width: 6px; height: 6px; background: #f8ba13; content: "";}


@media (min-width:1201px) {
.page .ul_list a:hover,
.page p a:hover						{ color: #f8ba13; border-color: #f8ba13;}
}
@media (max-width:1200px) {
    
}
@media (max-width:1000px) {

}
@media (max-width:700px) {
.page 								{ padding-bottom: 10px;}
.page p								{ margin-bottom: 10px;}
.page .ul_list						{ margin-bottom: 10px;}
.page .ul_list li					{ padding-left: 18px;}
.page .ul_list li:before			{ top: 15px; width: 5px; height: 5px;}
}


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

@media (max-width:1200px) { 
.bloc_texte							{ margin: 70px auto;}
}
@media (max-width:1000px) { 
.bloc_texte							{ margin: 60px auto;}
}
@media (max-width:700px) { 
.bloc_texte							{ margin: 35px 0;}
}





/***** atouts *****/
.atouts                           	{ position: relative; display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px;}
.atouts:before                     	{ width: 100vw; position: absolute; top: calc(25% - 20px); bottom: calc(25% - 20px); left: 50%; margin-left: -50vw; background: url("../images/banner_atouts.webp") 50% / cover no-repeat; background-attachment: fixed; content: "";}
.atouts .item                     	{ position: relative; text-align: center;}
.atouts .row 						{ position: relative; padding: 50px; background: #000; color: #fff; border-radius: 15px; height: 100%; transition: all 400ms ease-in-out;}
.atouts .row .sous_titre 			{ color: #fff; margin-top: 20px;}
.atouts .row img              		{ object-fit: none; height: 100px; object-position: center bottom;}
.atouts .row p              		{ margin: 10px auto; max-width: 500px;}
.atouts .row p a 					{ color: #fff; border-color: #fff;}

@media (min-width:1201px) {
.atouts .row p a:hover 				{ border-color: #f8ba13; color: #f8ba13;}
}
@media (max-width:1400px) {
.atouts .row 						{ padding: 40px 50px;}
}
@media (max-width:1200px) {
.atouts                           	{ grid-gap: 20px;}
.atouts:before                     	{ display: none;}
.atouts .row 						{ padding: 30px 40px; border-radius: 10px;}
.atouts .row img              		{ transform: scale(0.85); transform-origin: center bottom;}
.atouts .row .sous_titre 			{ margin-top: 15px;}
}
@media (max-width:1000px) {
.atouts                           	{ grid-template-columns: 1fr;}
.atouts .row img              		{ height: auto; object-fit: fill;}
}
@media (max-width:700px) {
.atouts                           	{ grid-gap: 10px;}
.atouts .row 						{ padding: 10px 25px 20px 25px; border-radius: 5px;}
.atouts .row img              		{ transform: scale(0.75);}
.atouts .row .sous_titre 			{ margin-top: 10px; font-size: 16px; line-height: 22px;}
}


/***** actualites *****/
#blog .blog 							{ display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 60px 40px; margin: -20px auto;}
#blog .blog .item 						{ position: relative;}
#blog .blog .item a 					{ display: block; text-align: center;}
#blog .blog .item .photo 				{ position: relative; overflow: hidden; border-top-left-radius: 12px; border-top-right-radius: 12px;}
#blog .blog .item .photo img 			{ display: block; width: 100%; height: auto; transition: filter 400ms ease-in-out;}
#blog .blog .item .photo .date 			{ width: 105px; height: 35px; text-align: center; font-size: 13px; line-height: 35px; font-weight: 700; border-radius: 25em; background: #fff; position: absolute; right: 20px; top: 20px; text-transform: uppercase; letter-spacing: 0.8px; z-index: 10;}
#blog .blog .item .photo .promo 		{ width: 120px; height: 120px; background: url("../images/splash_yellow.svg") 50% / cover no-repeat; text-align: center; position: absolute; left: 20px; top: 20px; display: grid; align-items: center; padding: 0 5px 0 0; font-size: 15px; line-height: 30px; font-weight: 700; letter-spacing: 0.8px;}
#blog .blog .item .titre 				{ padding: 15px 30px 20px 30px; font-weight: 500; border-bottom-left-radius: 12px; border-bottom-right-radius: 12px; background: #000; color: #fff; display: grid; align-items: center; min-height: 90px; line-height: 24px; transition: color 400ms ease-in-out;}

@media (min-width:1201px) {
#blog .blog .item a:hover .photo img	{ filter: brightness(0.65);}
#blog .blog .item a:hover .titre 		{ color: #f8ba13;}
}
@media (max-width:1200px) {
#blog .blog 							{ grid-template-columns: 1fr 1fr; grid-gap: 20px;}
#blog .blog .item .photo 				{ border-top-left-radius: 10px; border-top-right-radius: 10px;}
#blog .blog .item .photo .date 			{ right: 15px; top: 15px;}
#blog .blog .item .titre 				{ border-bottom-left-radius: 10px; border-bottom-right-radius: 10px;}
}
@media (max-width:1000px) {
#blog .blog 							{ margin: 0 auto;}
#blog .blog .item .photo .promo 		{ transform: scale(0.85); transform-origin: left top; left: 15px; top: 15px;}
}
@media (max-width:700px) {
#blog .top_page .chapo 					{ display: none;}
#blog .blog 							{ grid-template-columns: 1fr;}
#blog .blog .item .photo 				{ border-top-left-radius: 5px; border-top-right-radius: 5px;}
#blog .blog .item .photo .promo 		{ transform: scale(0.70);}
#blog .blog .item .photo .date 			{ width: 90px; height: 29px; font-size: 11px; line-height: 29px;}
#blog .blog .item .titre 				{ padding: 15px 25px; min-height: inherit; font-size: 14px; line-height: 20px; border-bottom-left-radius: 5px; border-bottom-right-radius: 5px;}
}


#blog .article .top_page 				{ padding-bottom: 0;}
#blog .article .top_page:after 			{ display: none;}
#blog .article .titre_main				{ margin-bottom: 30px; font-size: 30px; line-height: 40px;}
#blog .article .photo     				{ margin: 40px auto 50px auto; max-width: 700px;}
#blog .article .photo img				{ border-radius: 15px;}
#blog .article .contenu_blog  			{ margin: 50px 0;}
#blog .article .contenu_blog h1,
#blog .article .contenu_blog h2,
#blog .article .contenu_blog h3,
#blog .article .contenu_blog h4,
#blog .article .contenu_blog h5,
#blog .article .contenu_blog h6 		{ font: 500 20px/30px "Barlow"; position: relative; color: #f8ba13; margin: 40px 0 15px 0;}
#blog .article .contenu_blog ul			{ margin-bottom: 15px;}
#blog .article .contenu_blog ul li		{ padding: 5px 0 5px 20px; position: relative;}
#blog .article .contenu_blog ul li:before{ position: absolute; left: 0; top: 17px; width: 6px; height: 6px; border-radius: 50%; background: #f8ba13; content: "";}
#blog .article .contenu_blog :last-child { margin-bottom: 0;}

@media (max-width:1200px) {
#blog .article .bloc_short				{ max-width: 800px;}
#blog .article .titre_main				{ font-size: 20px; line-height: 28px; margin-bottom: 25px;}
#blog .article .photo img				{ margin: 40px 0; border-radius: 10px;}
#blog .article .contenu_blog  			{ margin: 40px 0;}
}
@media (max-width:1000px) {
#blog .article .photo img				{ margin: 30px 0;}
#blog .article .contenu_blog  			{ margin: 30px 0;}
}
@media (max-width:700px) {
#blog .article .top_page .chapo 		{ display: block;}
#blog .article .bloc_texte				{ margin-top: 35px;}
#blog .article .titre_main				{ font-size: 16px; line-height: 22px; margin-bottom: 20px;}
#blog .article .photo img				{ margin: 25px 0; border-radius: 5px;}
#blog .article .contenu_blog  			{ margin: 25px 0;}
#blog .article .contenu_blog h1,
#blog .article .contenu_blog h2,
#blog .article .contenu_blog h3,
#blog .article .contenu_blog h4,
#blog .article .contenu_blog h5,
#blog .article .contenu_blog h6 		{ font-size: 18px; line-height: 26px; margin: 20px 0 10px 0;}
#blog .article .contenu_blog ul			{ margin-bottom: 10px;}
#blog .article .contenu_blog ul li		{ padding-left: 18px;}
#blog .article .contenu_blog ul li:before { top: 15px; width: 5px; height: 5px;}
}





.faq                                    { margin: 30px auto 100px; }