/***** banner *****/
.banner                             { min-height: 610px; position: relative; margin-bottom: 170px;}
.banner .devis                      { bottom: -100px;}
.banner .wrapper                    { padding: 180px 0 200px;}
.banner .img                        { width: 100%; height: 100%; position: absolute; top: 0; right: 0; overflow: hidden; background: url(../images/banner_page.webp) center / cover no-repeat;}
.banner .img::before                { content: ""; display: block; position: absolute; bottom: 0; left: 0; width: 100%; height: 120vh; background: url(../images/masque.svg) center bottom / cover no-repeat;}
.banner .texte                      { text-align:center; max-width:870px; margin:auto;}
.banner .titre_main                 { text-align: center; z-index: 1;}
.banner .chapo                      { color: var(--white);}

@media (max-width:1200px) {
.banner                             { min-height: 0;}
}
@media (max-width:1000px) {
.banner                             { margin-bottom: 0;}
.banner .wrapper                    { padding-bottom: 100px;}
.banner .img                        { border-radius: 0;}
.banner .devis                      { position: static; display: block; width: max-content; margin: 30px auto 0; text-align: center; height: 50px; line-height: 50px; font-size: 15px; border-radius: 25px; padding: 0 30px; background: var(--second-color); border: none;}
.banner .devis svg                  { display: none;}
}
@media (max-width:700px) {
.banner                             { min-height: 0;}
.banner .wrapper                    { padding: 150px 0 70px;}
.banner .titre_main                 { width: 85vw; font-size: 25px; line-height: 35px;}
}



/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding: 0 0 45px;}
.breadcrumb a                       { color: var(--white);}
.breadcrumb a.active                { color: var(--second-color);}
.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: var(--white); content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

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

/***** page content *****/
.page_content 						{ position: relative;}
.page_content .ul_list a, 
.page_content p a					{ border-bottom: 1px solid transparent; color: var(--second-color); padding-bottom: 2px;}

@media (min-width:1201px) {
.page_content .ul_list a:hover, 
.page_content p a:hover				{ border-color: var(--second-color);}
}
@media (max-width:1000px) {
.page_content 						{ padding-bottom: 0;}
}


/***** bloc_texte *****/
.bloc_texte                         { margin: 80px 0;}
.bloc_texte p                       { margin-bottom: 15px;}
.bloc_texte :last-child             { margin-bottom: 0;}
.sep                                { height: 1px; margin: 0; display: block; width: 100%; background: var(--greylight);}

@media (max-width:700px) {
.bloc_texte                         { margin: 50px 0;}
}



/***** blocquote *****/
.blocquote                          { position: relative; background: var(--greylight); color: var(--main-color); text-align: center; padding:67px 40px; margin: 80px 0; border-radius: 20px;}

@media (max-width:1000px) {
.blocquote                          { margin: 70px 0 50px;}
}
@media (max-width:700px) {
.blocquote                          { border-radius: 10px; padding: 30px 20px; font-size: 16px; margin: 50px 0;}
}


/***** marque *****/
.marque                             { display: grid; grid-template-columns: 150px 1fr; gap: 60px; align-items: center;}
.marque .logo                       { width: 150px; height: 150px; border-radius: 10px; background-color: var(--main-color-light); display: grid; align-items: center; justify-content: center; padding: 20px;}
.marque .logo img                   { max-width: 100%;}

@media (max-width:1000px) {
.marque 						    { gap: 40px;}
}
@media (max-width:700px) {
.marque                             { grid-template-columns: 1fr; gap: 20px;}
.marque .logo                       { width: 100%;}
}