@media (min-width:1280px) {
.header .rs                         { transform: none;}
.sticky .header .rs                 { transform: translateY(-50%);}
}



/***** banner *****/
.banner                             { position: relative; padding-top: 190px; width: 100%; min-height: 350px;}
.banner::after                      { content: ""; display: block; position: absolute; top: 350px; bottom: 0; left: 0; right: 0; background: linear-gradient(-90deg, rgba(251,189,4,1) 0%, rgba(244,156,0,1) 100%); z-index: -1;}
.banner .slider                     { position: relative; display: block; width: 100%; height: 65vh; object-fit: cover; overflow: hidden; max-height: 850px; min-height: 450px; border-radius: 20px;}
.banner .slider .item               { object-fit: cover; }
.banner .slider .item img           { display: block; width: 100%; height: 100%; object-position: top; object-fit: cover; }

.banner .nav_slider                 { position: absolute; top: calc(50% - 25px); z-index: 1; width: 100%; height: auto;}
.banner .slick-arrow                { width: 50px; height: 50px; }
.banner .slick-prev                 { position: absolute; left: 0; background: url("../images/arrow_prev.svg") 42% 50% no-repeat #fff; border-radius: 0 15px 15px 0;}
.banner .slick-next                 { position: absolute; right: 0; background: url("../images/arrow_next.svg") 58% 50% no-repeat #fff;  border-radius: 15px 0 0 15px;}

.banner .content                    { position: absolute; left: 80px; top: 70px; z-index: 2;}
.banner .titre_main                 { margin-bottom: 0; color: #fff; text-shadow: 0 0 50px #000000cc;}
.banner .titre_main span            { font-size: 28px; line-height: 35px;}
.banner .label                      { background: #fff; border-radius: 25px; font: 700 20px/50px "Barlow"; color: #000; padding: 0 30px; display: inline-block; vertical-align: top; margin-bottom: 15px;}
.banner .label span                 { text-transform: uppercase; color: #068bc8;}

@media (max-width:1200px) {
.banner                             { padding-top: 180px;}
.banner .content                    { top: 40px; left: 40px;}
.banner .slider img                 { height: 500px;}
.banner .titre_main                 { z-index: 50;}
}
@media (max-width:1000px) {
.banner                             { padding: 180px 0 90px; background: #fff;}
.banner .wrapper                    { width: 100%; max-width: initial; position: static; padding: 0;}
.banner::after                      { display: none;}
.banner .content                    { position: static;}
.banner .label                      { display: block; text-align: center; color: #fff; border-radius: 0; margin: 0; font-weight: 500; background: #068bc8;}
.banner .label span                 { color: #fff; font-weight: 500;}
.banner .titre_main                 { text-align: center; font-size: 25px; position: absolute; bottom: -5px; width: 100%; height: auto; align-items: center; color: #fff; line-height: 32px; background: #068bc8; padding: 15px 40px; }
.banner .slider                     { height: 65vw; max-height: 750px; min-height: 350px; border-radius: 0;}
.banner .nav_slider                 { top: calc(57% - 25px);}
}
@media (max-width:700px) {
.banner .slider img                 { height: 300px;}
.banner .titre_main                 { line-height: 28px; font-size: 18px; margin: 0 auto; left: 0; right: 0; bottom: -20px;}
.banner .titre_main span            { line-height: 28px; font-size: 18px;}
.banner .titre_main br              { display: initial;}
}





/***** intro *****/
.intro                              { background: linear-gradient(-90deg, rgba(251,189,4,1) 0%, rgba(244,156,0,1) 100%); padding-bottom: 95px; padding-top: 70px;}
.intro .wrapper                     { display: grid; grid-template-columns: auto 360px; z-index: 3; gap: 80px;}
.intro .titre_main                  { color: #fff;}
.intro .chapo                       { color: #fff;}
.intro .cta .sous_titre             { color: #000; margin-bottom: 10px;}
.intro .cta                         { background: #fff; border-radius: 20px; padding:50px 30px; text-align: center; margin-top: -150px;}
.intro .cta img                     { display: block; margin: 0 auto 20px; width: 35px; height: auto;}
.intro .cta .link                   { min-width: 180px; text-align: center; margin-top: 10px;}
@media (max-width:1200px) {
.intro                              { padding: 40px 0;}
.intro .titre_main                  { font-size: 30px; line-height: 40px;}  
.intro .wrapper                     { margin-top: 0; align-items: center; gap: 40px; padding: 0 40px;}
.intro .cta                         { margin-top: -100px;}  
}
@media (max-width:1000px) {
.intro                              { gap: 40px; padding: 50px 0;}
.intro .wrapper                     { grid-template-columns: 1fr; padding: 0;}
.intro .cta                         { padding: 40px 0; margin: 0;}
}
@media (max-width:700px) {
.intro                              { background: none; padding: 0; margin: 20px 0 0;}
.intro .cta img,
.intro .texte                       { display: none;}
.intro .cta                         { padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 10px;}
.intro .cta .link                   { padding: 0 10px; min-width: initial;}
.intro .cta .sous_titre             { grid-column: 1 / -1; margin-bottom: 0; margin-top: 15px;}
}




/***** services *****/
.services                           { position: relative; text-align: center; margin: 120px 0;}
.services .titre_main               { margin-bottom: 40px;}
.services ul                        { display: grid; grid-template-columns: repeat(6, 160px); justify-content: space-between;}
.services a                         { position: relative; display: block;}
.services .icone                    { width: 120px; height: 120px; border-radius: 50%; border: 2px solid #f49c00; margin: 0 auto; display: grid; justify-content: center; align-items: center; margin-bottom: 25px; box-shadow: 0 0 0 10px #fef5e5; line-height: 0;}
.services li:nth-child(even) .icone { box-shadow: 0 0 0 10px #e6f3f9; border-color: #068bc8;}
.services .sous_titre               { font-size: 18px; line-height: 28px; color: #000; margin-bottom: 0;}

@media (min-width:1201px) {
/*.services li:hover .hide            { opacity: 1; visibility: visible; top: calc(-100% - 40px)}*/
.services .icone img                { transition: all ease-in-out 400ms; height: auto;}
  
.services li:nth-child(1) .icone img     { width: 60px;}
.services li:nth-child(2) .icone img     { width: 60px;}
.services li:nth-child(3) .icone img     { width: 200px;}
.services li:nth-child(4) .icone img     { width: 60px;}
.services li:nth-child(5) .icone img     { width: 40px;}
.services li:nth-child(6) .icone img     { width: 50px;}

.services .eau img                  { transition-timing-function: cubic-bezier(0, 1.24, 1,-0.39);}

.services .flamme                   { position: relative;}
.services .flamme em                { opacity: 0; transition: all ease-in-out 400ms;}
.services li .flamme .red           { animation: infinite 1s clignoter;}
.services li .flamme .red1          { animation: infinite 1s clignoter; animation-delay: 0.5s;}

.services .flamme img               { position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);}
.services li:hover .flamme em       { opacity: 1;}
.services li:hover .flamme .orange  { opacity: 0.2;}

.services li:hover .ventilation img { animation: rotating 1s linear infinite;}
.services li:hover .clim img        { animation: 2s ease-out flocon;}
.services li:hover .soleil img      { animation: 1s ease-out rotatesun;}
.services .soleil                   { overflow: hidden;}
.services .soleil img               { position: relative; top: 21px; width: 200px;}
.services li:hover .eclair img      { animation: infinite 0.6s ease-out thunder;}
.services li:hover .eau img         { animation: 0.8s ease-out waterdrop;}
}
@media (max-width:1200px) {
.services ul                        { grid-template-columns: 1fr 1fr 1fr; gap: 45px;}
.services .icone                    { margin-bottom: 15px;}
.services .flamme em                { display: none;}
.services .hide                     { display: none;}
}
@media (max-width:1000px) {
.services                           { margin: 80px 0;}
}
@media (max-width:700px) {
.services                           { margin: 50px 0 55px;}
.services .titre_main               { display: none;}
.services ul                        { grid-template-columns: 1fr 1fr;}
.services .icone                    { width: 100px; height: 100px;}
.services .icone img                { height: 50px; object-fit: contain; width: auto;}
.services .sous_titre               { font-size: 16px; line-height: 24px;}
}



/***** adresse *****/
.adresse                            { display: grid; grid-template-columns: auto 360px; gap: 80px; margin-bottom: 100px; align-items: start;}
.adresse .photo                     { position: relative;}
.adresse .photo::before             { content: ""; display: block; position: absolute; top: 0; height: 100%; width: 100vw; right: calc(100% + 30px); background: #068bc8; border-radius: 20px;}
.adresse .photo img                 { width: 100%; height: auto; object-fit: cover; display: block; border-radius: 20px;}
.adresse .texte                     { text-align: center; padding: 0 10px;}
.adresse .texte .titre_main         { margin-bottom: 30px;}
.adresse .texte .titre_main span    { color: #068bc8;}
.adresse .localisation              { position: relative; display: inline-block; vertical-align: top; margin-bottom: 25px;}
.adresse .localisation .hide        { top: -90%;}

@media (min-width:1201px) {
.adresse .localisation:hover .hide  { opacity: 1; visibility: visible; top: -100%}
}
@media (max-width:1200px) {
.adresse                            { gap: 20px;}
.adresse .texte                     { padding: 0;}
}
@media (max-width:1000px) {
.adresse                            { grid-template-columns: 1fr; margin-bottom: 80px;}
.adresse .photo::before             { display: none;}
}
@media (max-width:700px) {
.adresse                            { margin-bottom: 50px;}
.adresse .photo img                 { border-radius: 10px;}
.adresse .localisation              { display: none;}
.adresse .texte .titre_main         { font-size: 20px; line-height: 30px; margin-bottom: 20px;}
.adresse .texte .titre_main br      { display: none;}
.adresse .texte .link               { width: 100%;}
}



/***** etape *****/
.etape                              { text-align: center; background: #000; color: #fff; padding: 90px 0 100px;}
.etape .titre_main                  { color: #fff; margin-bottom: 75px;}
.etape li                           { position: relative;}
.etape li a                         { color: #fff;}
.etape ul                           { display: grid; grid-template-columns: auto auto auto; justify-content: space-between; max-width: 880px; margin: 0 auto; position: relative; margin-bottom: 75px;}
.etape ul::before                   { content: ""; display: block; position: absolute; top: 60px; left: 0; right: 0; height: 2px; background: #fff;}
.etape .icone                       { width: 120px; height: 120px; border-radius: 50%; display: grid; align-items: center; justify-content: center; background: #068bc8; border: 2px solid #fff; margin-bottom: 20px; position: relative; z-index: 1;}
.etape .hide                        { top: -110%; z-index: 2;}
.etape li span                      { display: block; font: 500 18px/24px "Barlow";}

@media (min-width:1201px) {
.etape li:hover .icone              { background-color: #f49c00;}
/*.etape li:hover .hide               { top: -120%; opacity: 1; visibility: visible;}*/
.etape .icone                       { transition: all ease-in-out 400ms;}
}
@media (max-width:1000px) {
.etape                              { padding: 80px 0;}
.etape ul,
.etape .titre_main                  { margin-bottom: 30px;}
}    
@media (max-width:700px) {
.etape                              { padding: 40px 0 50px;}
.etape .titre_main                  { font-size: 20px; line-height: 30px;}
.etape ul                           { grid-template-columns: 1fr; gap: 40px; width: 185px; margin: 0 auto;}
.etape ul::before                   { top: 0; bottom: 0; left: 40px; height: 100%; right: auto; width: 2px;}
.etape li                           { display: grid; grid-template-columns: 80px auto; align-items: center; text-align: left; gap: 20px;}
.etape li a                         { display: contents;}
.etape .icone                       { width: 80px; height: 80px; margin-bottom: 0;}
.etape .icone img                   { width: 40px;}
.etape .devis                       { padding: 0 10px; width: 100%; margin-top: 50px;}
}    




/***** avis *****/
.avis                               { margin: 90px 0 125px;}
.avis .shape                        { left: calc(50% + 570px); transform-origin: left; top: -40px;}
.avis .content                      { margin-bottom: 30px; position: relative; display: grid; grid-template-columns: auto auto; justify-content: space-between; align-items: center;}
.avis .arrownavwrap                 { margin-bottom: 0;}
.avis .swiper                       { width: 100vw;}
.avis .arrowavis                    { position: absolute; right: -12px;}
.avis .content strong               { color: #d10303;}
.avis .content img                  { margin: 0 20px 0 0;}
.avis .content span                 { font-size: 20px;}
.avis .note   						{ line-height: 0; letter-spacing: 0; font-size: 0; margin-bottom: 20px;}
.avis .note img 					{ display: inline-block; height: auto; margin-right: 10px;}
.avis .note img:last-child 			{ margin-right: 0;}
.avis .item                         { padding: 40px 40px 35px; border: 2px solid #f49c00; background: #fff; width: 380px; border-radius: 20px;}
.avis .author                       { margin-top: 10px;}
.avis .author span                  { display: block; font-size: 12px; line-height: 20px;}
.arrownavwrap                       { position: relative; z-index: 2; text-align: right; right: -15px; top: 20px; font-size: 0; letter-spacing: 0; margin-bottom: 20px;}
.arrownav                           { width: 45px; height: 45px; background-position: center; background-repeat: no-repeat; cursor: pointer; display: inline-block; vertical-align: top;}
.arrownav_prev                      { background-image: url(../images/arrow_prev.svg);}
.arrownav_next                      { background-image: url(../images/arrow_next.svg);}

@media (max-width:1000px) {
.avis                               { margin: 70px 0 80px;}
}
@media (max-width:700px) {
.avis                               { margin: 45px 0 50px;}
.avis .swiper                       { width: 92vw;}
.avis .arrownavwrap                 { display: none !important;}
.avis .content               		{ margin-bottom: 10px;}
.avis .content strong,
.avis .content span                 { font-size: 16px; color: #fff;}
.avis .content img                  { margin: 0 10px; width: 140px;}
.avis .item                         { padding: 30px; width: calc(85vw - 40px);}
.ctatexte                           { display: none;}
}




/***** showroom *****/
.showroom                           { position: relative;}
.showroom::before                   { content: ""; position: absolute; top: 0; height: 100%; width: 100vw; border-radius: 20px; right: calc(100% + 30px); background: #f49c00;}
.showroom::after                    { content: ""; position: absolute; top: 0; height: 100%; width: 50vw; border-radius: 20px; left: calc(100% + 30px); background: #068bc8;}
.showroom img                       { width: 100%; height: auto; display: block; border-radius: 20px;}
.showroom .infos                    { position: absolute; right: 40px; bottom: 40px; background: #fff; border-radius: 20px; padding: 40px 50px 35px; min-width: 380px;}
.showroom .infos .adress            { padding-left: 0; background: url(../images/marker.svg) left center no-repeat; display: block; margin-bottom: 10px;}
.showroom .infos a                  { color: #000; padding-left: 30px; background-position: left center; background-repeat: no-repeat; display: inline-block; vertical-align: top;}
.showroom .infos .tel               { background-image: url(../images/tel.svg); margin-bottom: 10px;}
.showroom .infos .mail              { background-image: url(../images/mail.svg);}

@media (min-width:1201px) {
.showroom .infos a:hover            { color: #f49c00;}
}
@media (max-width:1000px) {
.showroom::after                    { display: none;}
}
@media (max-width:700px) {
.showroom                           { margin: 0 -7.5vw;}
.showroom img                       { border-radius: 0; height: 300px; object-fit: cover;}
.showroom .infos                    { display: none;}
}