/***** banner *****/
.banner 								{ position: relative; background: #1b233c; padding-top: 150px; min-height: 100vh;}
.banner .photo							{ width: 55%; height: 100%; position: absolute; right: 5%; top: 0; background: url("../images/banner.webp") 50% 20% / contain no-repeat;}
.banner .texte 							{ padding: 8vw 0 6vw 0; color: #fff; position: relative; z-index: 5; max-width: 680px;}
.banner .texte .titre_main 				{ color: #fff; margin-bottom: 30px; letter-spacing: 0.6px;}
.banner .texte .chapo,
.banner .texte p 						{ margin: 15px 0 0 0; letter-spacing: 0.8px;}
.banner .texte .link 					{ margin: 35px 0 0 0;}
.banner .devise							{ max-width: 674px; margin: 0 auto; text-align: center; padding-bottom: 6vw;}
.banner .devise .titre_serif 			{ color: #fff; line-height: 40px; letter-spacing: 0.6px; padding-top: 60px; background: url("../images/quote.svg") 50% 0 no-repeat;}

@media (max-width:2000px) {
.banner 								{ min-height: inherit;}
}
@media (max-width:1600px) {
.banner .photo							{ width: 65%; right: 0;}
.banner .texte 							{ padding: 7vw 0 5vw 0;}
.banner .devise							{ padding-bottom: 5vw;}
}
@media (max-width:1400px) {
.banner .texte 							{ padding: 6vw 0 4vw 0;}
.banner .devise							{ padding-bottom: 4vw;}
}
@media (max-width:1000px) {
.banner 								{ padding-top: 0;}
.banner .photo							{ width: 100%; height: 100vw; right: 0; top: -5vw; background-position: 50%;}
.banner .texte 							{ padding: 70vw 0 4vw 0;}
.banner .texte .titre_main 				{ margin-bottom: 25px;}
.banner .devise							{ max-width: none;}
.banner .devise .titre_serif 			{ font-size: 18px; line-height: 32px; padding-top: 45px; background-size: 44px auto;}
}
@media (max-width:700px) {
.banner .photo							{ top: 0; background-size: 110% auto; background-image: url("../images/banner_mobile.webp");}
.banner .texte 							{ padding: 90vw 0 7vw 0; text-align: center;}
.banner .texte .titre_main 				{ max-width: 320px; margin: 0 auto;}
.banner .texte .titre_main br, 
.banner .texte .chapo,
.banner .texte p						{ display: none;}
.banner .texte .link					{ margin-top: 20px;}
.banner .devise							{ padding-bottom: 7vw;}
.banner .devise .titre_serif 			{ font-size: 14px; line-height: 26px; padding-top: 35px; background-size: 36px auto; max-width: 320px; margin: 0 auto;}
}



/***** hide about *****/
.hide_about 							{ padding: 100px 0 20px 0; max-width: 1000px; margin: 0 auto; position: relative;}
.hide_about .anchor						{ top: -50px;}
.hide_about .titre_main 				{ color: #ec6608; margin-top: 0;}
.hide_about p 							{ margin-top: 15px;}

@media (max-width:1200px) {

}
@media (max-width:1000px) {

}
@media (max-width:700px) {

}




/***** competences *****/
.competences                           	{ position: relative; margin: 100px auto;}
.competences>.titre_main				{ margin-bottom: 10px;}
.competences>.sous_titre				{ font-size: 21px;}
.competences .grid 						{ position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 20px; margin-top: 35px;}
.competences .item                     	{ position: relative;}
.competences .row 						{ position: relative; padding: 22px 40px 24px 40px; background: #f2f2f2; min-height: 100%; display: grid; align-items: center; transition: all 400ms ease-in-out;}
.competences .row img 					{ margin: -5px 0 10px 0;}
.competences .row .sous_titre			{ margin: 0; font-size: 15px; line-height: 22px; padding-right: 45px;}
.competences .row p              		{ margin: 10px 0 0 0;}
.competences .row .link_arrow          	{ position: absolute; left: 0; top: 0; background: url("../images/arrow_orange.svg") right+40px center no-repeat; width: 100%; height: 100%; font-size: 0;}

@media (min-width:1201px) {
.competences .item .row:hover 			{ background: #fff;}
}
@media (max-width:1400px) {
.competences .row 						{ padding: 22px 30px 24px 30px;}
.competences .row .link_arrow          	{ background-position: right+30px center;}
}
@media (max-width:1200px) {
.competences                           	{ margin: 80px auto;}
.competences .grid 						{ margin-top: 25px; grid-gap: 15px;}
}
@media (max-width:1000px) {
.competences                           	{ margin: 60px auto;}
.competences .grid 						{ grid-template-columns: 1fr 1fr;}
}
@media (max-width:700px) {
.competences                           	{ margin: 40px auto;}
.competences>.titre_main				{ margin-bottom: 5px;}
.competences>.sous_titre				{ font-size: 14px;}

.competences .grid 						{ grid-template-columns: 1fr; grid-gap: 10px; margin-top: 15px;}
.competences .row 						{ padding: 14px 20px 14px 20px; border-radius: 5px;}
.competences .row .sous_titre			{ font-size: 14px; line-height: 20px; padding-right: 25px;}
.competences .row .link_arrow          	{ background-position: right+20px center; background: url("../images/list.svg") right+20px center no-repeat;}

}


/***** ordering *****/
.competences .grid .item:nth-of-type(1) { order: 1; } 
.competences .grid .item:nth-of-type(2) { order: 4; } 
.competences .grid .item:nth-of-type(3) { order: 7; } 
.competences .grid .item:nth-of-type(4) { order: 10; } 
.competences .grid .item:nth-of-type(5) { order: 13; } 
.competences .grid .item:nth-of-type(6) { order: 2; } 
.competences .grid .item:nth-of-type(7) { order: 5; } 
.competences .grid .item:nth-of-type(8) { order: 8; } 
.competences .grid .item:nth-of-type(9) { order: 11; } 
.competences .grid .item:nth-of-type(10) { order: 14; } 
.competences .grid .item:nth-of-type(11) { order: 3; } 
.competences .grid .item:nth-of-type(12) { order: 6; } 
.competences .grid .item:nth-of-type(13) { order: 9; } 
.competences .grid .item:nth-of-type(14) { order: 11; }



/***** atouts *****/
.atouts 								{ grid-template-columns: 420px 1fr; align-items: stretch; margin: 0; padding-top: 20px;}
.atouts .titre_main						{ font-size: 30px; line-height: 40px; margin-bottom: 30px;}

@media (max-width:1200px) {
.atouts .titre_main						{ font-size: 28px; line-height: 38px; margin-bottom: 20px;}
}
@media (max-width:1000px) {
.atouts 								{ grid-template-columns: 1fr;}
.atouts .photo							{ max-width: 680px; margin: 0 auto;}
.atouts .titre_main						{ font-size: 25px; line-height: 35px; margin-bottom: 15px;}
.atouts .titre_main	br					{ display: none;}
}
@media (max-width:600px) {
.atouts .titre_main						{ font-size: 22px; line-height: 32px; margin-bottom: 10px;}
}






/***** about *****/
.about 									{ position: relative; background: #1b233c; color: #fff; padding-bottom: 120px;} 
.about .photo							{ width: 75%; height: 100%; position: absolute; left: -12.5%; top: 0; background: url("../images/home_loup.webp") 50% / contain no-repeat;}
.about .texte							{ padding: 8vw 0 8vw 50%;} 
.about .texte .row 						{ max-width: 500px; margin: 0 auto -20px auto;} 
.about .texte .titre_main 				{ color: #fff; margin-bottom: 40px;} 
.about .texte .item 					{ padding-bottom: 40px; margin-bottom: 40px; border-bottom: 1px solid #494f63;} 
.about .texte .item:last-child 			{ padding-bottom: 0; margin-bottom: 0; border-bottom: 0;} 
.about .texte .sous_titre 				{ color: #fff; display: grid; grid-template-columns: 40px 1fr; align-items: center; grid-gap: 20px;} 
.about .texte .sous_titre span			{ padding-top: 2px;} 
.about .texte p a						{ color: #ec6608;} 

.wolfpacks.wrapper.reverse                 { background: #151b2c; color: #ffffff; position: relative;}
.wolfpacks.wrapper.reverse:before          { background: #151b2c; content: ''; position: absolute; width: 200vw; height: 100%; top: 0; left: -50vw; z-index: -1;}
.wolfpacks.reverse .texte .titre_main      { color: #ffffff;}
.wolfpacks.reverse .texte .item            { margin-bottom: 0; padding-bottom: 0; border-bottom: none;}
.wolfpacks.reverse .texte .item .sous_titre { display: flex; align-items: center; grid-gap: 0 10px;}
.wolfpacks.reverse .texte .item p          { margin-bottom: 30px;}
.wolfpacks.reverse .texte                  { padding: 8vw 50% 8vw 0;}
.wolfpacks.reverse .photo		           { position: absolute; right: -30%; left: inherit; background: url("../images/wolf-pack-3-tetes.svg") 50% / contain no-repeat; width: 75%; height: 100%; top: 0;}
.wolfpacks.reverse a.link.wolfpack         { padding: 20px 80px 20px 20px; height: inherit; line-height: 20px; margin-top: 20px;}
.wolfpacks.reverse a.link.wolfpack:before  { width: 100%; height: 100%; background: url(../images/wolf-pack-3-tetes.svg) right no-repeat; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background-size: 18%; content: "";}


@media (max-width:1000px) {
.about .photo							{ display: none;}
.about .texte							{ padding: 60px 0;} 
.about .texte .row 						{ max-width: none;} 
}


/***** CTA *****/
.cta_wrap 							{ position: relative; padding: 0;}
.cta_wrap:before					{ display: none;}


/***** blog *****/
.blog 									{ display: grid; grid-template-columns: 1fr 1fr; grid-gap: 80px; margin: 120px 0 140px 0;} 
.blog .item								{ position: relative;} 
.blog .sous_titre						{ font-size: 24px; margin-bottom: 40px;} 
.blog .all_link							{ position: absolute; right: 0; top: 8px; border-bottom: 1px solid #ccc; line-height: 22px;} 
.blog .article							{ position: relative;} 
.blog .article a						{ display: grid; grid-template-columns: 90px 1fr; align-items: center; margin-top: 20px;} 
.blog .article a img					{ width: 100%; height: auto; display: block; transition: filter 400ms ease-in-out;} 
.blog .article a span					{ color: #1b233c; font-size: 16px; line-height: 24px; font-weight: 500; padding: 0 40px;} 
.blog .article a span i					{ color: #ec6608; font-size: 14px; font-weight: 400; font-style: normal; display: block; padding-top: 4px;} 
.blog .article a span .date             { font-size: 14px; font-weight: 400; font-style: normal; color: #ec6608;}

@media (min-width:1201px) {
.blog .all_link:hover					{ color: #ec6608; border-color: #ec6608;} 
.blog .article a:hover img 				{ filter: brightness(0.65);}
.blog .article a:hover span 			{ color: #ec6608;} 
}

@media (max-width:1200px) {
.blog 									{ grid-gap: 60px; margin: 90px 0 ;} 
.blog .sous_titre						{ font-size: 20px; margin-bottom: 30px;} 

}

@media (max-width:1000px) {
.blog 									{ grid-gap: 50px; margin: 70px 0 ;} 
.blog 									{ grid-template-columns: 1fr; grid-gap: 60px; margin: 60px 0 80px 0;} 
.blog .article a span					{ font-size: 15px; padding: 0 0 0 5vw;} 
.blog .sous_titre						{ font-size: 18px; } 
}

@media (max-width:700px) {
.blog 									{ grid-gap: 40px; margin: 50px 0 ;} 
.blog .sous_titre						{ font-size: 16px; margin-bottom: 20px; } 

.blog .article a span					{ font-size: 14px; line-height: 24px; padding: 0 0 0 7.5vw;} 
.blog .all_link							{ top: 0;} 

}



.bloc .video 							{ margin: 60px auto; max-width: 600px;}
.bloc .video a 							{ background: #1b233c; color: #fff; display: block; border-radius: 12px; overflow: hidden; padding: 50px;}
.bloc .video a:before					{ width: 100%; height: 100%; background: url("../images/bg_video.webp") 100% 50% / contain no-repeat #1b233c; position: absolute; right: 0; bottom: 0; content: "";}
.bloc .video a:after					{ width: 35px; height: 40px; background: url("../images/play.svg") 50% no-repeat; position: absolute; right: 40px; bottom: 40px; content: "";}
.bloc .video a *						{ position: relative;}
.bloc .video a .sous_titre				{ margin: -8px 0 8px 0;}
.bloc .video a .link					{ margin: 17px 0 0 0; background-image: linear-gradient(to top, #fff 0% 50%, #ec6608 50% 100%);}

@media (min-width:1201px) {
.bloc .video a:hover:before				{ filter: brightness(0.75);}
.bloc .video a:hover .link 				{ color: #fff; background-position: 0 0;}
}

@media (max-width:700px) {
.bloc .video 							{ margin-top: 30px;}
.bloc .video a 							{ padding: 30px 5vw;}
}

@media (max-width: 550px) {
.bloc .video a:before					{ display: none;}
.bloc .video a:after					{ display: none;}
}


.cta-wolfpack                               { display: block; text-align: center; margin: 80px auto 0 auto; width: 90vw;}
.cta-wolfpack p                             { margin-bottom: 20px;}
.cta-wolfpack p b                           { font: 700 40px / 50px "Playfair Display"; font-size: 25px; line-height: 34px; font-weight: normal; display: block;}
.cta-wolfpack .link.wolfpack                { padding: 20px 80px 20px 20px; height: inherit; line-height: 20px;}
.cta-wolfpack .link.wolfpack:before         { width: 100%; height: 100%; background: url(../images/wolf-pack-3-tetes.svg) right no-repeat; position: absolute; right: 15px; top: 50%; transform: translateY(-50%); background-size: 18%; content: "";}