/***** top_page *****/
.top_page                           { position: relative; margin-bottom: 120px;}
.top_page .content                  { background: var(--second-color); position: relative; padding: 200px 0 60px;}
.top_page .titre_main               { color: #fff; margin-bottom: 15px;}
.top_page .chapo                    { font-size: 16px; color: #fff; font-weight: 400;}
.top_grid                           { display: grid; grid-template-columns: 1fr 1fr;}
.top_grid .photo                    { position: absolute; right: 0; top: 0; width: calc(50% - 80px); height: calc(100% + 125px);} 
.link_devis                         { position: relative; padding: 20px 42px 20px 104px; display: inline-block; background-image: linear-gradient(to top, #fff 0% 50%, var(--main-color) 50% 100%); height: auto; font-size: 20px; line-height: 36px; color: #000; font-weight: 700; margin-top: 40px; text-transform: none;} 
.link_devis::before                 { content: ""; position: absolute; width:80px; height: 100%; left: 0; top: 0; background: url(../images/link_blue.svg) no-repeat center / 26px var(--main-color);}
.link_devis span                    { display: inline-block; padding-right: 30px; background: url(../images/link_arrow_blue.svg) no-repeat center right / 13px; color: var(--second-color); transition: all ease-in-out 400ms; text-transform: uppercase;}
.top_grid .photo img                { display: block; max-width: 100%; object-fit: cover; height: auto;}

.top_page.no_image .top_grid        { grid-template-columns: 1fr; }

@media (max-width:1200px) {
.top_grid .photo                    { width: calc(50% - 50px);}
.top_page .content                  { padding-bottom: 50px;}
}
@media (max-width:1000px) { 
.top_page                           { padding-top: 100px; margin-bottom: 60px;}
.top_grid                           { grid-template-columns: 1fr;}
.top_grid .photo                    { display: none;}
.top_page .content                  { padding: 110px 0 50px;}
}
@media (max-width:700px) { 
.top_page                           { padding-top: 60px; margin-bottom: 40px; }
.top_page .content                  { padding: 80px 0 50px;}

}
@media (max-width:500px) {
.top_page .link_devis { width: 100%;}
.link_devis span { background: none; padding-right: 0;}
/* .top_page .link_devis               { line-height: 50px; height: 50px; font-size: 0; display: block; margin-top: 20px; background: var(--main-color); line-height: 0; padding: 0 30px;}
.top_page .link_devis span          { background: none; font: 500 14px/50px var(--font-family); color: #fff; display: block; padding: 0; text-transform: uppercase;}
.top_page .link_devis::before       { display: none;} */
}

@media (min-width: 1001px) {
.top_page:not(.no_image) .texte                    { max-width: 600px; margin-left: auto;}
}


/***** breadcrumb *****/
.breadcrumb							            { line-height: 0; position: relative; padding:0 0 40px;}
.breadcrumb a                       { color: #fff;}
.breadcrumb a.active                { color: #f7f2ec;}
.breadcrumb li 						{ display: inline-block; font-size: 13px; line-height: 20px; letter-spacing: 0.4px; margin-right: 40px; position: relative;}
.breadcrumb li:after				{ width: 1px; height: 10px; position: absolute; right: -20px; top: 5px; background: #fff; content: "";}
.breadcrumb li:last-child:after 	{ display: none;}

@media (min-width:1201px) {
.breadcrumb li a:hover				{ color:#f7f2ec;}

}
@media (max-width:1200px) {
.breadcrumb                         { padding-bottom: 30px;}
.breadcrumb li                      { margin-right: 30px;}
.breadcrumb li::after               { right: -15px;}
}
@media (max-width:1000px) { 
.breadcrumb							{ display: none;}
}

.types                                      { position: relative; display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 30px; margin: 80px 0;}
.types .item                                {  padding: 40px 40px; background-color: #ffffff;}

@media (max-width:1400px) {
.types .item                                { padding: 40px 40px 50px;}
}
@media (max-width:1200px) {
.types                                      { gap: 15px; margin: 70px 0;}
.types .item                                { padding: 30px;}
}
@media (max-width:1000px) {
.types                                      { grid-template-columns: 1fr 1fr; margin: 50px 0;}
.types .item:last-of-type                   { grid-column: 1 / -1;}
}
@media (max-width:700px) {
.types                                      { grid-template-columns: 1fr;}
}

/***** page content *****/
.page_content 								{ position: relative; margin-bottom: 100px;}
.page_content p:not(:last-of-type)          {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: 20px; padding: 5px 0 0 0;}

.link-moins,.link-plus                      { cursor:pointer; border-bottom: 1px solid transparent;}
.textMore                                   { display: none; margin-top: 40px;}
.textMore p:not(:first-of-type)             { margin-top: 15px;}

@media (min-width:1201px) {
.page_content .ul_list a:hover,
.page_content p a:hover						{ border-color: var(--main-color); color: var(--main-color);}
}
@media (max-width:1000px) {
.page_content 								{ margin-bottom: 50px;}
}
@media (max-width:700px) {
.page_content p								{ margin-bottom: 10px;}
.page_content .ul_list						{ margin-bottom: 10px;}
}



/***** bloc texte *****/
.bloc_texte							{ margin: 90px auto; position: relative;}
.bloc_texte.intro                   { margin: 80px auto;}
.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.intro,
.bloc_texte							{ margin: 60px auto;}
}
@media (max-width:1000px) { 
.bloc_texte.intro,
.bloc_texte							{ margin: 50px auto;}
}
@media (max-width:700px) { 
.bloc_texte.intro,
.bloc_texte							{ margin: 40px 0;}
}

.table_plus                         { margin: 100px 0;}

@media (max-width:1000px) {
.table_plus                         { margin: 50px 0;}
}