/***** top page *****/
.top_page 							{ position: relative; background-color: #1985a1;  padding: 55px 0 90px; }
.top_page .wrapper                 { z-index: 1;}
.top_page .chapo                    {  margin: 0; color: #fff;}
.top_page .sous_titre               { color: #fff;}
@media (min-width:1201px) { 
.top_page .devis:hover              { color: #fff;}
.top_page .devis:hover::after       { filter: brightness(0) invert(1);}
}
@media (max-width:1500px) {
.top_page                           { margin: 0 -5vw; padding: 45px 5vw 90px;} 
}
@media (max-width:1200px) { 
.top_page 							{ padding-bottom: 60px;}
}
@media (max-width:1000px) {
.top_page                           { margin: 0 -10vw; padding: 45px 10vw;}
}
@media (max-width:600px) { 
.top_page							{ margin-bottom: 50px; padding: 40px 10vw;}
}

/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; margin-bottom: 35px; text-align: left;}
.breadcrumb a                       { color: #fff;}
.breadcrumb a.active                { color: #232323;}
.breadcrumb li 						{ display: inline-block; font-size: 14px; line-height: 20px; margin-right: 30px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 9px; position: absolute; right: -16px; top: 6px; background: #fff; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

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


/***** page content *****/
.page 								{ position: relative; padding-top: 140px;}
.page p								{ margin-bottom: 15px;}
.page p:last-of-type    			{ margin-bottom: 0;}
.page .ul_list li                   { color: #231f20;}
.page .ul_list a					{ border-bottom: 1px solid #1985a1; padding-bottom: 2px;}

@media (min-width:1201px) {
.page .ul_list a:hover,
.page p a:hover						{ border-color: #1985a1;}
}
@media (max-width:1200px) {
.page 								{ padding: 100px 0 0;}
}
@media (max-width:700px) {
.page 								{ padding-top: 100px;}
}
@media (max-width:600px) {
.page p								{ margin-bottom: 10px;}
.page .ul_list						{ margin-bottom: 10px;}
}



/***** 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:600px) { 
.bloc_texte							{ margin: 30px 0;}
}


.bandeau                            { display: grid; margin: 100px 0 110px; grid-template-columns: 285px auto; gap: 0 120px; padding: 50px 60px; background: #1985a1; color: #fff; align-items: center;}
.bandeau .sous_titre                { color: #fff;}
.bandeau .propos .titre             { font: 400 30px/45px "Cormorant garamant"; letter-spacing: 0.2px;}
.bandeau .certification             { margin-top: 10px;}
.bandeau .certification img         { display: block; max-width: 100%; margin: 0 auto;}
.bandeau .propos                    { position: relative; text-align: center;}
.bandeau .propos::after             { position: absolute; content: ""; background: #fff; width: 1px; height: 150px; right: -60px; top: 50%; transform: translateY(-50%);}

@media (max-width:1200px) {
.bandeau                            { gap: 80px; padding: 40px 50px;} 
.bandeau .propos:after              { right: -40px;}
}
@media (max-width:1000px) {
.bandeau                            { margin: 50px 0; grid-template-columns: 1fr; gap: 60px;}
.bandeau .propos::after             { width: 150px; height: 1px; bottom: -30px; right: auto; left: 50%; transform: translateX(-50%); top: auto;}
}
@media (max-width:600px) {
.bandeau                            { padding: 30px;}
.bandeau .propos .titre             { font-size: 20px; line-height: 30px;}
}