/***** top page *****/
.top_page 							            { position: relative;}
.top_page .wrapper                  { z-index: 1; width: 100%;}
.top_page .content                  { width: 90vw; max-width: 1800px; margin: 0 auto; background-color: #068bc8;  padding: 20px 40px 40px; border-radius: 20px;}
.top_page .chapo                    {  margin: 0; color: #fff;}
.top_page .titre_main               { color: #fff; margin-bottom: 0;}
.top_page .sous_titre               { color: #fff;}
.top_page .texte                    { text-align: center;}

.top_page .icone                    { width: 90px; height: 90px; margin: -40px auto 20px; border-radius: 50%; display: grid; justify-content: center; align-items: center; box-shadow: 0 0 0 10px rgba(255, 255, 255, 0.2); background: #fff;}

.top_page .icone.chauffage img      { width: 50px; height: auto;} 
.top_page .icone.ventilation img    { width: 50px; height: auto;} 
.top_page .icone.climatisation img  { width: 60px; height: auto;} 
.top_page .icone.bornes img         { width: 40px; height: auto;} 
.top_page .icone.sanitaire img      { width: 40px; height: auto;} 

@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 .content                  { padding-bottom: 50px;}
.top_page .icone                    { margin-top: 0;}
}
@media (max-width:1000px) {
.top_page                           { margin:0; padding: 0;}
}
@media (max-width:700px) { 
.top_page							              { background: #068bc8;}
.top_page .content                  { padding: 40px 0; border-radius: 10px;}
}


/***** breadcrumb *****/
.breadcrumb							{ line-height: 0; position: relative; padding:0 0 40px;}
.breadcrumb a                       { color: #fff;}
.breadcrumb a.active                { color: #fff;}
.breadcrumb li 						{ display: inline-block; font-size: 13px; line-height: 30px; letter-spacing: 0.4px; 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:#f49c00;}
}
@media (max-width:1200px) { 
.breadcrumb							{ display: none;}
}

/***** page content *****/
.page_content 								{ position: relative; padding-top: 190px;}
.page_content p								{ margin-bottom: 15px;}
.page_content .ul_list a, 
.page_content p a							{ border-bottom: 1px solid transparent; padding-bottom: 2px; color: #f49c00;}

.list_tarif li                              { display: grid; grid-template-columns: 1fr auto; padding: 10px 0; gap: 30px;}
.list_tarif li:not(:last-child)             { border-bottom: 1px solid #d9c9bf;}
@media (min-width:1201px) {
.page_content .ul_list a:hover,
.page_content p a:hover						{ border-color: #f49c00;}
}
@media (max-width:1200px) {
.page_content 								    { padding-top: 120px;}
}
@media (max-width:1000px) {
.page_content 								    { padding-bottom: 0; padding-top: 170px;}
}
@media (max-width:700px) {
.page_content p							    	{ margin-bottom: 10px;}
.page_content .ul_list						{ margin-bottom: 10px;}
.page_content 					    			{ padding-top: 160px;}
}



/***** bandeau *****/
.bandeau                            { text-align: center; color: #fff; background: #068bc8; font: 500 20px/26px "Barlow"; border-radius: 10px; padding: 20px 30px;}


/***** histoire *****/
.histoire                           { margin: 75px auto; width: 100%; max-width: 800px;}
.histoire .item                     { display: grid; grid-template-columns: 100px auto; gap: 80px; position: relative;}
.histoire .item:not(:last-of-type)::before { content: ""; display: block; position: absolute; top: 10px; left: 50px; width: 1px; background: #c7d3cd; height: 100%;}
.histoire .texte                    { padding-bottom: 15px; margin-bottom: 30px; border-bottom: 1px solid #c7d3cd; position: relative; top: 10px;}
.histoire .date                     { font-size: 14px; line-height: 40px; font-weight: 400; height: 40px; text-align: center; background: #eee; position: relative; top: 10px; border-radius: 5px;}
.histoire .item:last-of-type .texte { margin-bottom: 0;}
@media (max-width:1000px) { 
.histoire .item                     { gap: 40px;}
}
@media (max-width:700px) { 
.histoire                           { margin-top: 40px;}
.histoire .item                     { gap: 30px;}
}


/***** equipe *****/
.equipe                             { margin: 90px 0;}
.equipe .grid                       { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 75px 30px; text-align: center;}
.equipe .item img                   { width: 100%; height: auto; display: block; border-radius: 20px; margin-bottom: 15px;}
.equipe .item .sous_titre           { margin-bottom: 0;}
.equipe .item p                     { margin-bottom: 0;}

@media (max-width:1200px) { 
.equipe .grid				        { gap: 40px 20px;}
}
@media (max-width:1000px) { 
.equipe                             { margin: 70px 0;}
.equipe .grid				        { gap: 40px 20px; grid-template-columns: 1fr 1fr;}
}
@media (max-width:700px) { 
.equipe				                { margin: 40px 0;}
}
@media (max-width:500px) { 
.equipe .grid                       { grid-template-columns: 1fr;}
.equipe .item img                   { margin-bottom: 10px;}
}



/***** 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: 30px 0;}
}



/***** galerie *****/
.galerie                            { display: grid; grid-template-columns: 1fr 1fr 1fr; gap: 20px; margin: 0 20px;}
.galerie img                        { width: 100%; height: auto; display: block; border-radius: 20px;}
@media (max-width:1000px) { 
.galerie                            { gap: 10px; grid-template-columns: 1fr 1fr;}
.galerie img:last-of-type           { grid-column: 1 / -1;}
}
@media (max-width:700px) { 
.galerie                            { grid-template-columns: 1fr;}
.galerie img                        { border-radius: 10px;}
}



/***** fournisseur *****/
.fournisseur                        { margin-bottom: 100px;}
.fournisseur .sous_titre            { margin-bottom: 30px;}
.fournisseur img                    { display: inline-block; vertical-align: middle; margin-right: 40px; margin: 5px 40px 5px 0;}
.fournisseur img:last-of-type       { margin-right: 0;}

@media (max-width:1000px) { 
.fournisseur                        { margin-bottom: 70px;}
}

@media (max-width:700px) { 
.fournisseur                        { margin-bottom: 40px;}
.fournisseur img                    { margin-right: 20px;}
}


/***** tab *****/
.tabcontent                         { position: relative; z-index: 100; width: 100%;}
.tabcontent .bloc_grid              { margin-top: 50px;}
.gridbtn                            { text-align: center; width: 100%; max-width: 1200px; margin: 60px auto 0; display: flex;}
.gridbtn .link                      { height: 60px; width: 100%; border: 2px solid #f49c00; text-align: center; line-height: 20px; background: #f49c00; cursor: pointer; display: inline-grid; align-items: center; justify-content: center;}
.gridbtn .link.active               { background-color: #fff; color: #f49c00;}
.griditem.show                      { display: block;}
.griditem                           { display: none;}

@media (min-width:1201px) { 
.gridbtn .link:hover                { background: #fff; color: #f49c00;}
.gridbtn .link                      { margin: 0 3px;}
}

@media (max-width:1000px) { 
.tabcontent                         { width: 90vw; left: 50%; transform: translateX(-50%);}
.gridbtn                            { display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
}
@media (max-width:600px) { 
.gridbtn                            { grid-template-columns: 1fr;}
}


.bloc-first     { padding-top: 50px;}

@media (max-width:1000px) {
.bloc-first     { padding-top: 120px;}
}







.mep_speciale .top_page                { text-align: center; max-width: 1800px; width: 90vw; margin: 0 auto; display: grid; grid-template-columns: 280px 1fr; gap: 30px; }
.mep_speciale .top_page .icone         { margin-top: -10px;}
.mep_speciale .top_page .content       { width: 100%; margin: 0; height: calc(100% - 40px); margin-top: 20px;}
.mep_speciale .top_page .onglets       { display: grid; grid-template-columns: 1fr 1fr 1fr 1fr; gap: 40px; padding: 20px 0; }
.mep_speciale .top_page .onglets img   { display: block; width: 100%; height: auto; border-radius: 10px; }
.mep_speciale .top_page .onglets .item  { padding: 20px; border: 2px solid #068bc8; box-shadow: 0 0 0 10px #e6f3f9; border-radius: 15px; display: flex; flex-direction: column; justify-content: space-between; }
.mep_speciale .top_page .onglets .item .sous_titre { color: #000; font-size: 18px; line-height: 28px; margin-top: 15px; transition: all 300ms ease-in-out;}
.mep_speciale .top_page .onglets .item .photo  { transform: scale(1); transition: all 300ms ease-in-out;}
.mep_speciale .top_page .onglets .item p  { color: #000; }
.mep_speciale .top_page .onglets .item .ul_list  { text-align: left; border-top: 1px solid #eee; padding-top: 15px; margin-top: 25px;  color: #000; }


#ventilation.mep_speciale .top_page .onglets { grid-template-columns: 1fr 1fr; }
#ventilation.mep_speciale .top_page .onglets img { max-width: 400px; margin: 0 auto;}

#sanitaire.mep_speciale .top_page .onglets { grid-template-columns: 1fr 1fr 1fr; }


@media (min-width:1201px) {
.mep_speciale .top_page .onglets .item:hover  { box-shadow: 0 0 0 2px #e6f3f9; }
.mep_speciale .top_page .onglets .item:hover .sous_titre  { color: #f49c00;}
.mep_speciale .top_page .onglets .item:hover .photo  { transform: scale(1.05);}
}

@media (max-width: 1200px) {
.mep_speciale .top_page .icone         { margin-top: 20px;}
.mep_speciale .top_page                { grid-template-columns: 1fr; gap: 20px; }
    
}


@media (max-width: 1000px) {
.mep_speciale .top_page                { grid-template-columns: 1fr; gap: 50px; }
.mep_speciale .top_page .onglets       { grid-template-columns: 1fr 1fr; padding: 0; }
#ventilation.mep_speciale .top_page .onglets { grid-template-columns: 1fr; }

#sanitaire.mep_speciale .top_page .onglets { grid-template-columns: 1fr 1fr; }
}

@media (max-width: 700px) {
.mep_speciale .top_page                { gap: 40px; background-color: transparent;}
.mep_speciale .top_page .onglets       { grid-template-columns: 1fr; gap: 25px; padding: 0; }
.mep_speciale .top_page .onglets .item  { border: 1px solid #068bc8; box-shadow: 0 0 0 5px #e6f3f9; border-radius: 10px; }
#sanitaire.mep_speciale .top_page .onglets { grid-template-columns: 1fr; }
}


.mep_speciale .breadcrumb              { text-align: center; }
.mep_speciale .breadcrumb li:last-of-type  { margin: 0; }







.mep_speciale .contenu                     { display: grid; grid-template-columns: 1fr 1fr; grid-gap: 40px; margin-top: 60px;}
.mep_speciale .contenu .onglet_content     { border: 2px solid #068bc8; box-shadow: 0 0 0 10px #e6f3f9; padding: 40px; border-radius: 20px; }
.mep_speciale .contenu .onglet_content .photo img { display: block; width: 100%; height: auto; margin-bottom: 40px;}
@media (max-width:1000px) {
.mep_speciale .contenu                     { grid-template-columns: 1fr; grid-gap: 30px;}
}
@media (max-width:700px) {
.mep_speciale .contenu                     { grid-gap: 20px;}
.mep_speciale .contenu .onglet_content     { border-top: none; border-right: none; border-left: none; box-shadow: none; padding: 20px 0; border-radius: 0; }
.mep_speciale .contenu                     { margin-top: 20px;}
}