/***** top page *****/
.top_page 							{ position: relative; padding-top: 68px; margin-bottom: 80px;}
.top_page .content:before 			{ width: 200vw; height: 100%; position: absolute; left: -50vw; top: 0; background: #f2f8f9; z-index: -1; content: "";}
.top_page__logo                     { position: absolute; top: calc(var(--header-height) * -1); right: 5vw; transform: rotate(3deg) translateX(50%);}

@media (min-width:1340px) {
.top_page__logo                     { right: calc((100vw - 1200px) / 2);}
}

@media (max-width:1200px) {
.top_page                           { padding-top: 40px;}
}
@media (max-width:1000px) { 
.top_page                           { margin-bottom: 40px; padding-top: 0px; }
}
@media (max-width:700px) { 

}




/***** breadcrumb *****/
.breadcrumb							          { line-height: 0; position: relative; padding-bottom: 20px;}
.breadcrumb li 						        {  display: inline-block; font-size: 13px; line-height: 20px; margin-right: 30px; letter-spacing: 0.8px; position: relative;}
.breadcrumb a 						        {  font-family: var(--title-font-family); }
.breadcrumb li:after				      { width: 1px; height: 8px; position: absolute; right: -16px; top: 6px; background: var(--main-color); content: "";}
.breadcrumb li:last-child:after 	{ display: none;}
.breadcrumb li a.active 			    { color: var(--main-color);}

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



/***** page content *****/
.page 								              { position: relative; padding-bottom: 95px;}
.page .titre_main                   { font-size: 25px; line-height: 1.4;}
.page .sous_titre                   { font-size: 25px; line-height: 1.16; color: var(--main-color); margin-bottom: 20px;}
.page .sous_titre:where(:not(:first-child))  { margin-top: 50px;}
.page .mini_titre                   { font-size: 18px; line-height: 25px; margin-bottom: 20px;}
.page .chapo                        { font-size: 16px; line-height: 26px;}
.page .chapo:last-child             { margin-bottom: 0;}
.page p:where(:not(:last-child))	  { margin-bottom: 25px;}


.page ~ .footer                     { margin-top: 0;}

@media (min-width: 1201px) {
  .page p a:hover                   { border-bottom: 1px solid var(--main-color); }
}
@media (max-width:1200px) {
.page 								              { padding-bottom: 80px;}
.page .titre_main                   { font-size: 20px;}
.page .sous_titre                   { font-size: 20px; margin-bottom: 10px;}
.page .sous_titre:where(:not(:first-child))  { margin-top: 30px;}
}
@media (max-width:700px) {
.page p:where(:not(:last-child))	  { margin-bottom: 10px;}
.page 								              { padding-bottom: 60px;}
}


/***** 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;}

@media (max-width:1200px) { 
.bloc_texte						      	{ margin: 60px auto;}
}
@media (max-width:1000px) { 
.bloc_texte							      { margin: 50px auto;}
}
/* @media (max-width:700px) { 
.bloc_texte							{ margin: 30px 0;}
} */





.page .quote 						{ margin: 100px 0 60px 0; max-width: 600px; padding: 0 0 0 60px; background-position: 0 0;}

.page .cta 							{ margin-block: 64px 80px;}

@media (max-width:1200px) { 
.page .cta							{ margin-block: 60px;}
}
@media (max-width:1000px) { 
.page .cta							{ margin-block: 50px;}
}
/* @media (max-width:700px) { 
.page .cta							{ margin-block: 30px;}
} */




/***** atouts *****/
.atouts                           	{ position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; grid-gap: 40px; padding-bottom: 20px;}
.atouts .item                     	{ position: relative;}
.atouts .row 						            { position: relative; padding: 45px; border-radius: 15px; background: #fff; border: 3px solid var(--main-color); transition: all 400ms ease-in-out;}
.atouts .row .sous_titre 			      { font-size: 20px; line-height: 30px;}
.atouts .row .sous_titre span		    { font-size: 30px; line-height: 30px; font-weight: 300; display: block; margin-bottom: 5px; color: var(--main-color);}
.atouts .row p              		    { margin: 10px 0 0 0;}


@media (min-width:1201px) {
.services .item .row:hover 				{ border-color: var(--main-color); background: #fff;}
}
@media (max-width:1600px) {

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

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

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

}


/* page services */

#services .list_services 								        { position: relative; display: grid; padding-right: 60%;}
#services .list_services .item 							    { border-bottom: 1px solid var(--second-color);}
#services .list_services .item .icon  					{ margin-bottom: 25px; max-width: 120px;}
#services .list_services .item .icon img  			{ width: auto; height: 80px; object-fit: cover; display: block;}
#services .list_services .sous_titre 					  { display: grid; align-items: center; margin: 0; background: url("../images/arrow_red.svg") right center no-repeat; font-size: 16px; line-height: 25px; padding-right: 40px; min-height: 80px; color: var(--third-color);}
#services .list_services .sous_titre .icon  	  { display: none;}
#services .list_services .texte 						    { position: absolute; right: 0; top: 0; max-width: 700px; width: 60%; padding-left: 80px; opacity: 0; visibility: hidden;}
#services .list_services .link 							    { float: right; width: 100%; height: 90px; margin-top: -90px; opacity: 0;}

@media (min-width:1201px) {
#services .list_services .item:last-child 				{ border-bottom: none;}
#services .list_services .sous_titre 					    { transition: color 300ms ease-in-out;}
#services .list_services .item.active .texte			{ opacity: 1; visibility: visible;}
}
@media (max-width:1200px) {
#services .list_services 								    { padding-right: 0; grid-gap: 20px;}
#services .list_services .item 							{ padding: 40px; border: 1px solid #ddd; border-radius: 10px; position: relative;}
#services .list_services .sous_titre 				{ margin: 0 0 20px 0; grid-template-columns: auto 1fr; grid-gap: 20px; font-size: 18px;}
#services .list_services .sous_titre .icon  { display: block; width: 120px; padding: 22px; border-radius: 50%; margin: 0;}
#services .list_services .texte 						{ position: relative; right: auto; top: auto; max-width: none; width: 100%; padding-left: 0; opacity: 1; visibility: visible;}
#services .list_services .texte .icon				{ display: none; }
#services .list_services .link 							{ float: none; margin: 0; position: absolute; left: 0; top: 40px;}
}
@media (max-width:1000px) {
#services .top_page .bloc_grid .photo img 	{ object-position: center bottom;}
}
@media (max-width:700px) {
#services .list_services 								    { grid-gap: 30px;}
#services .list_services .item 							{ padding: 0 0 30px 0; border: none; border-bottom: 1px solid #ddd; border-radius: 0px;}
#services .list_services .item:last-of-type	{ padding: 0; border-bottom: 0;}
#services .list_services .sous_titre 				{ margin: 0 0 15px 0; grid-template-columns: auto 1fr; grid-gap: 15px; font-size: 16px; line-height: 24px; min-height: 60px;}
#services .list_services .sous_titre .icon  { width: 90px; padding: 15px;}
#services .list_services .link 							{ height: 60px; top: 0;}
#services .moving_img									      { padding-bottom: 50px;}
}