/***** top_page *****/
.top_page                               { position: relative; padding-top: 120px;}
.top_page .content                      { padding: 50px 40px 70px; background: #02c7ba; max-width: 1600px; width: 90vw; border-radius: 20px; position: relative; z-index: 1; margin: 0 auto;}
.top_page::before                       { content: ""; display: block; position: absolute; top: 0; left: 0; right: 0; bottom: 40%; background: #e5f9f8;}
.top_page .wrapper                      { width: 100%;}
.top_page .sous_titre                   { color: #fff; margin-bottom: 5px;}
.top_page .titre_main                   { color: #fff; text-transform: uppercase; padding-right: 300px;}
.top_page .chapo                        { font-size: 15px; color: #fff;}
.top_page .devis                        { background-image: linear-gradient(to top, #fff 0%, #fff 50%, #333 50%, #333 100%); color: #02c7ba; border-radius: 30px; position: absolute; right: 0; top: 0;}
.top_page .devis::after                 { content: url(../images/arrow_right_blue.svg);}

@media (min-width:1201px) {
.top_page .devis:hover                  { color: #fff;}
.top_page .devis:hover::after           { filter: brightness(0) invert(1);}
}
@media (max-width:1200px) { 
.top_page                               { padding-top: 100px;}
}
@media (max-width:1000px) { 
.top_page                               { padding-top: 90px;}
.top_page .titre_main                   { padding-right: 0;}
.top_page .content                      { padding: 40px 5vw; width: 100%; border-radius: 0;}
.top_page .devis                        { right: auto; top: auto; position: relative; margin-top: 30px;}
}
@media (max-width:700px) { 
.top_page .content                      { padding: 30px 7.5vw 40px;}
.top_page .devis                        { width: 100%;}
}

/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding:0 0 35px;}
.breadcrumb a                       { color: #fff;}
.breadcrumb a.active                { color: #fff;}
.breadcrumb li 						{ display: inline-block; font-size: 14px; line-height: 30px; letter-spacing: 0.2px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -16px; top: 11px; background: #fff; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:#333;}
}
@media (max-width:1200px) { 
.breadcrumb							{ display: none;}
}

/***** page content *****/
.page_content 								{ position: relative;}
.page_content p								{ margin-bottom: 15px;}
.page_content .ul_list a, 
.page_content p a							{ border-bottom: 1px solid transparent; padding-bottom: 2px;}
.page_content .ul_list						{ margin-bottom: 15px; padding: 5px 0 0 0;}
.page_content .ul_list li					{ padding: 5px 0 5px 35px; position: relative;}
@media (min-width:1201px) {
.page_content .ul_list a:hover,
.page_content p a:hover						{ border-color: #02c7ba;}
}
@media (max-width:1000px) {
.page_content 								{ padding-bottom: 0;}
}
@media (max-width:700px) {
.page_content p								{ margin-bottom: 10px;}
.page_content .ul_list						{ margin-bottom: 10px;}
.page_content .ul_list li					{ padding: 5px 0 5px 25px;}
}


/***** blockquote *****/
.blockquote                                 { text-align: center; font: italic 25px/35px "PT Serif"; letter-spacing: 0.5px; border-radius: 20px; background: #e5f9f8; padding: 45px 30px;}

@media (max-width:1200px) {
.blockquote                                 { padding: 30px; border-radius: 15px;}
}
@media (max-width:1000px) {
.blockquote                                 { padding: 5vw; border-radius: 10px;}
}
@media (max-width:700px) {
.blockquote                                 { font-size: 18px; line-height: 30px; padding: 7.5vw; border-radius: 8px;}
}


/***** bloc texte *****/    
.bloc_texte							        { margin: 80px auto; position: relative;}
.bloc_texte :last-child				        { margin-bottom: 0;}

@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: 40px auto;}
}




#services .bloc_grid                        { grid-template-columns: 400px 1fr;}
@media (max-width:1000px) { 
#services .bloc_grid                        { grid-template-columns: 1fr;}
}