/***** Class *****/ 
.titre             { text-transform: uppercase;}

.bloc_texte .titre, 
.bloc-appel .titre,
.gallery .titre            { font: 600 clamp(1.5rem, 1.2rem + 1vw, 3rem)/1.8 var(--fontTitre); margin-bottom: 40px; color: #575757;}
.bloc_texte h2.chapo       { font: 400 1.5rem/2 var(--fontBody);}

@media (max-width:500px) {
    .bloc-slogan               { display: none;}
    .bloc_texte .titre, 
    .bloc-appel .titre,
    .gallery .titre            { margin-bottom: 20px;}
}

/***** Banner *****/ 

.banner 							{ width: 100vw; position: relative; z-index: 10; margin-bottom: 90px; margin-top: 180px;}

.banner .wrapper                    { margin-top: 180px;}

.banner .texte 						{ position: absolute; top: 50%; transform: translateY(-50%); z-index: 10; background: #2e2e2e; padding: 60px; color: #ffffff; left: calc(50% + 80px); width: 670px;}
.banner .texte .banner-titre                  { font: 600 clamp(2rem, 2.5rem + 1vw, 3.5rem)/1.4 var(--fontTitre); text-transform: uppercase;}
.banner .texte .banner-devis                  { text-transform: uppercase; background: #ea560d; padding: 25px 30px; color: #ffffff; font-weight: 600; display: inline-block; margin: 40px 0; line-height: 1;}
.banner .texte .banner-slogan                 { position: relative; text-transform: uppercase; font-weight: 600; padding-left: 60px;}
.banner .texte .banner-slogan:before          { content: ''; position: absolute; left: 0;  top: 50%;  transform: translate(0, -50%); width: 50px; height: 40px; background: url("../images/picto-urgence.svg") left center no-repeat;}
.banner .texte .banner-slogan strong          { font-size: 2.5rem; line-height: 1.2; display: block;}
.banner .texte .banner-slogan .banner-tel     { color: #ea560d;}

.banner .nav_slider                 { position: absolute; left: calc(50% - 615px);}
.banner .slider                     { position: relative; z-index: 1; margin-right: calc(50vw - 180px); margin-left: -100vw;}
.banner .img                        { margin: 0 15px;}
.banner .slider img                 { width: 100%; height: 580px; object-fit: cover; display: block;}

.banner .slick-arrow                { position: absolute; z-index: 1; bottom: 25px;}
.banner .slick-prev                 { left: 15px; }
.banner .slick-next                 { left: 85px; }
.banner_slick .nav_slider           { position: absolute;left: 3px;bottom: 13px;z-index: 2;}
.banner_slick            			{ width: calc(50% + 190px); height: auto; position: absolute;left:0;top: 100px; z-index: 10;}
.banner_slick .slide                { width:1200px}
.banner_slick .slide img            { min-height: 580px}
.banner_slick .slide .item img      { width:100%;position:relative; height: 100%;object-fit: cover;}
.slide                              { margin: 0 -15px}
.banner_slick .slide .item div      { margin: 0 15px}

@media (max-width:1366px) {
    .banner .texte                      { left: inherit; right:0;}
    .banner .nav_slider                 { left: inherit;}
}

@media (max-width:1200px) {
    .banner 							{ margin-bottom: 90px; margin-top: 130px;}
    .banner .texte                      { max-width: 600px;}
}

@media (max-width:800px) {
    .banner 				{ margin-bottom: 70px;}
    .banner .slider         { margin: 0 auto; padding: 0 5vw; overflow: hidden;}
    .banner .slider:before  { content: ''; position: absolute; left: 0;  top: 225px;  width: 100vw; height: 225px; background: #2e2e2e;}
    .banner .slider img     { height: 450px;}
    
    .banner .nav_slider      { left: 5vw; width: 100%;}
    .banner .slick-arrow     { bottom: 200px;}
    .banner .slick-prev      { background: url("../images/arrow_prev_white.svg") 48% 50% no-repeat #ffffff00;}
    .banner .slick-next      { background: url("../images/arrow_next_white.svg") 52% 50% no-repeat #ffffff00;}
    .banner .slick-next      { right: calc(5vw + 60px); left: initial;}
    .banner .texte           { position: relative; top: inherit; transform: none; max-width: inherit; width: 100vw;}
    .banner .texte .banner-titre     { text-align: center;}
    
    .banner .texte .banner-devis      { text-transform: uppercase; color: #ffffff; background: #ea560d; display: block; padding: 20px 0; margin: 15px auto 5px auto; text-align: center; max-width: 420px;}
    .banner .texte .banner-devis span { display: none;}
    
    .banner .texte .banner-slogan             { font-size: 0; line-height: 0; padding-left: 0;}
    .banner .texte .banner-slogan strong      { display: none;} 
    .banner .texte .banner-slogan:before      { content: none;}
    .banner .texte .banner-slogan .banner-tel { font-size: 13px; line-height: 13px; font-weight: 600; color: #ffffff; background: #ea560d; display: block; padding: 20px 0; margin: 5px auto; text-align: center; max-width: 420px;}         
}

@media (max-width:600px) {
        .banner                     { margin-top: 180px; margin-bottom: 50px;}
}

@media (max-width:500px) {
    .banner .slider img     { height: 300px;}
}

/***** Bloc Services  *****/
.bloc-services                        { width: 100vw; background: #eeeeee; padding: 90px 0;}
.bloc-services .grid-services         { width: 100%; max-width: 1500px; display: grid; grid-template-columns: repeat(3,1fr); grid-gap: 20px 20px; margin: 0 auto;}


.bloc-services a            { position: relative; background: #ffffff; height: 100px;  color: #575757; font-size: 1.5rem; text-transform: uppercase; font-weight: 600; display: flex; align-items: center; top: 0;}
.bloc-services a img        { margin-left: 25px; margin-right: 25px;}
.bloc-services a::after     { content: ''; position: absolute; right: 25px;  top: 50%;  transform: translate(0, -50%); width: 40px; height: 15px; background-repeat: no-repeat; background-image: url("data:image/svg+xml;utf8,<svg  xmlns='http://www.w3.org/2000/svg' xmlns:xlink='http://www.w3.org/1999/xlink' width='40px' height='15px'><path fill-rule='evenodd'  fill='rgb(236, 102, 8)' d='M39.1000,7.012 C39.1000,7.432 39.749,7.792 39.391,7.947 L33.706,13.721 C33.316,14.117 32.683,14.117 32.292,13.721 C31.902,13.324 31.902,12.681 32.292,12.284 L36.483,8.027 L0.1000,8.027 C0.448,8.027 -0.000,7.573 -0.000,7.012 C-0.000,6.451 0.448,5.996 0.1000,5.996 L36.487,5.996 L32.292,1.736 C31.902,1.340 31.902,0.696 32.292,0.300 C32.683,-0.097 33.316,-0.097 33.706,0.300 L39.401,6.084 C39.753,6.241 39.1000,6.596 39.1000,7.012 Z'/></svg>");}

@media (min-width:1201px) {
    .bloc-services a:hover          { top: -5px; color: #ea560d;}
    .bloc-services a:hover:after    { right: 10px;}
}

@media (max-width:1200px) {
    .bloc-services a::after { content: none;}
}

@media (max-width:1000px) {
    .bloc-services         { padding: 70px 20px;}
    .bloc-services a       { justify-content: center; flex-direction: column; min-height: 150px; text-align: center; padding: 10px;}
    .bloc-services a img   { margin-bottom: 10px;}
}
@media (max-width:600px) {
.bloc-services 						{ padding: 45px 5vw;}
.bloc-services .grid-services 		{ font-size: 13px; line-height: 20px; grid-gap: 10px;}
}
@media (max-width:500px) {
    .bloc-services .grid-services         { grid-template-columns: repeat(2,1fr);}
}

/***** Bloc contact *****/
.bloc-contact         { text-align: center; padding: 50px 20px; text-transform: uppercase; color: #ffffff; font: 600 1.8rem/1.5 var(--fontBody); background: #ea560d;}
.bloc-contact a       { color: #ffffff; border-bottom: 1px solid #ffffff00;}

@media (min-width:1201px) {
    .bloc-contact a:hover { color: #ffffff; border-bottom: 1px solid #ffffff; }
}

@media (max-width:500px) {
    .bloc-contact          { font-size: 0; line-height: 0; padding: 30px 40px;}
    .bloc-contact a        { font-size: 13px; line-height: 13px; font-weight: 600; color: #ea560d; background: #ffffff; display: block; padding: 20px 0; margin: 5px 0;}
}


/***** Bloc appel *****/
.bloc-appel            { position: relative; display: grid; grid-template-columns:420px 1fr; grid-gap: 0 80px; margin-top: 140px;}
.bloc-appel:before     { content: ""; position: absolute; top: -140px; right: 80%; width: 500%; height: 530px; background: #2e2e2e; z-index: -1;}
.bloc-appel .photo img { max-width: 100%; height: auto;}
.bloc-appel .texte     { }
.bloc-appel .texte .show_hide .titre { font: 600 1.5rem/1.4 var(--fontBody);color: #ec6608; margin-bottom: 0;}

@media (max-width:1200px) {
    .bloc-appel            { grid-gap: 0 60px; margin-top: 100px;}
}

@media (max-width:1000px) {
    .bloc-appel            { grid-template-columns:350px 1fr; grid-gap: 0 30px; margin-top: 80px;}
}

@media (max-width:800px) {
    .bloc-appel            { grid-template-columns:1fr; grid-gap: 0; margin-top: 40px;}
    .bloc-appel:before     { content: none;}
    .bloc-appel .photo     { display: none;}
}

/***** Bloc avis *****/
.bloc-avis                { width: 100%; max-width: 1500px; margin:80px auto; padding: 0 5vw;}
.bloc-avis .titre         { font-size: 1.5rem; text-transform: uppercase; display: flex; align-items: center;}
.bloc-avis .titre .note   { font-size: 3rem; font-weight: 500}
.bloc-avis .grid          { display: grid; grid-template-columns:repeat(4,1fr); grid-gap: 0 20px;}
.bloc-avis .grid .item    { position: relative; background: #eeeeee; padding: 50px 40px 80px 40px;}
.bloc-avis .grid .item p                     { font-size: 1.5rem; line-height: 2;}
.bloc-avis .grid .item p.author              { position: absolute; right: 40px; bottom: 30px; color: #ea560d;}
.bloc-avis .grid .item .note                 { line-height: 0; letter-spacing: 0; font-size: 0; margin-bottom: 15px;}
.bloc-avis .grid .item .note img             { display: inline-block; width: 16px; height: auto; margin-right: 10px;}
.bloc-avis .grid .item .note img:last-child  { margin-right: 0;}

@media (max-width:1366px) {
    .bloc-avis .grid           { width: 100vw; overflow-x: auto; padding-bottom: 30px;}
    .bloc-avis .grid .item     { width: 360px;}
}

@media (max-width:800px) {
    .bloc-avis                { margin:40px auto;}
}