/*************************************************************************
 _____   _____   _   __   _   _____        _          __  _____   _____  
|  _  \ /  _  \ | | |  \ | | |_   _|      | |        / / | ____| |  _  \ 
| |_| | | | | | | | |   \| |   | |        | |  __   / /  | |__   | |_| | 
|  ___/ | | | | | | | |\   |   | |        | | /  | / /   |  __|  |  _  { 
| |     | |_| | | | | | \  |   | |        | |/   |/ /    | |___  | |_| | 
|_|     \_____/ |_| |_|  \_|   |_|        |___/|___/     |_____| |_____/ 

**************************************************************************

    @ Copyright © 2019 POINT WEB
    @ Catégorie : Structure site
    @ Site : VIRICEL
    @ Auteur : SERCO POINT WEB / www.point-web.fr

**************************************************************************/

/************* GENERAL **************/

    #explicitsubmit, #explicitsubmit:focus{border:none;background:transparent;color:#FFF;margin-left:0.5em;outline:none;}
    input#impliedsubmit{background-color:#FFF;color:#3e4035;border:none;border-radius:100px;margin:0 0 0 1em;padding:0 0.5em;font-size:10px;}
    *, *:after, *:before{-webkit-tap-highlight-color:transparent;list-style-position:inside;list-style-type:none;color:inherit;box-sizing:border-box;margin:0;padding:0;outline:none;position:relative;-ms-text-size-adjust:100%;-webkit-text-size-adjust:100%;}
    *:after,*:before{display:inline-block;z-index:1;}
    html,body,div,dl,dt,dd,ul,ol,li,h1,h2,h3,h4,h5,h6,pre,
    form,fieldset,input,textarea,p,blockquote,th,td,p,figure,figcaption,button,var,abbr{font-style:normal;font-family: sofia-pro, sans-serif; border:0;font-size:inherit;color:inherit;background:transparent;text-decoration:none;}
    section,article,header,footer,nav,aside{display:block;}
    table,td,blockquote,code,pre,textarea,input,video{max-width:100%;}
    p,dd,ul{word-wrap:break-word;-webkit-hyphens:none;-ms-hyphens:none;-o-hyphens:none;hyphens:none; margin-bottom: 0;}
    input,textarea,button{resize:none;-webkit-appearance:none;font-family:inherit;}
    img{border:none;max-width:100%;height:auto;}
    a,button{border:0;cursor:pointer;color:inherit;text-decoration:none;transition:.25s;}
    a,a:hover,a:active,a:focus,button,button:hover,button:focus,button:active{text-decoration:none;outline:none;}
    .clear{clear:both;background:none;outline:none;border:none;height:1px;margin:0;}
    .swiper-slide{display:flex;align-items:center;overflow:hidden;flex:1 0 auto;height:100%; justify-content: center;}
    .swiper-wrapper{display:flex;flex-wrap:nowrap;height:100%;}
    [data-link]{cursor:pointer;}
    [data-bg]{background-size:cover;}
    [data-mail]{cursor:pointer;display:inline!important;}
    [data-zoom]{cursor:zoom-in!important;}
    [data-grid] > *{position:absolute;transition:transform .5s;transform:scale(0);}
    [data-grid] > *.show{position:absolute;transform:scale(1);}
    [data-grid-cache]{display:none;}
    strong{font-weight:bold;}
    i.fa-at{font-size:90%!important;top:1px!important;margin:0!important;}
    hr{outline:none;border:none;}
    .separator{display:block;width:100%;height:1px;background:#d0d0d0;margin:10px auto;}
    .important{font-weight:bold;color:#3dccb1;font-size:1em; margin-bottom: 0;}

    /* autocomplete styles in Chrome */
        input:-webkit-autofill,
        input:-webkit-autofill:hover,
        input:-webkit-autofill:focus
        textarea:-webkit-autofill,
        textarea:-webkit-autofill:hover
        textarea:-webkit-autofill:focus,
        select:-webkit-autofill,
        select:-webkit-autofill:hover,
        select:-webkit-autofill:focus{-webkit-box-shadow:0 0 0 0 #000 inset;transition:background-color 5000s ease-in-out 0s;background-color:inherit!important;}
            
    /* selection styling */
        *::-moz-selection{background:rgba(0,0,0,.5);color:#fff;}
        *::selection{background:rgba(0,0,0,.5);color:#fff;}

    /* selection placeholder */
        ::-webkit-input-placeholder{color:inherit;opacity:.5;}
        ::-moz-placeholder{color:inherit;opacity:.5;}
        ::-ms-input-placeholder{color:inherit;opacity:.5;}

    /* scroll fix */
        [data-scrollfix]{cursor:pointer;transition:.25s;background:rgba(255,255,255,.2);color: #373535; width:40px;height:40px;display:flex;align-items:center;justify-content:center;text-align:center;position:fixed;bottom:0;right:0;opacity:0;visibility:hidden;}
        .fix [data-scrollfix]{opacity:1;visibility:visible;}
        [data-scrollfix].down{transform:rotate(180deg);}


    /* reset bootstrap */
        .btn-link{color:#58c5c2;}
        .btn-link:hover{color:#e36d3d;}

    /* button */

    a[class^="button"] {line-height: 0; }
    a[class^="button"]:hover {color: #fff; }

    .button {cursor: pointer; font-size: calc(10px + 2 * (100vw - 320px) / 1080);; text-transform: uppercase;  font-weight: 500;  letter-spacing: 1px; padding: 15px 20px; display: inline-block;transition: .3s ease-in-out; border-radius: 0;width: max-content;}
    .button i {margin-left: .8em;}

    .button-classic {color: white; background-color: #3dccb1; z-index: 2; }
    .button-classic:before {content:''; width: 100%; background: #2eaa93; height: 100%; position: absolute; top:0; left:0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: .5s ease-in-out;}
    .button-classic:hover:before {transform: scaleX(1);}

    .button-outline {border: #3dccb1 3px solid; color: #373535; z-index: 2}
    .button-outline:before {content:''; width: 101%; background: #3dccb1; height: 101%; position: absolute; top:0; left:0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: .5s ease-in-out;}
    .button-outline:hover:before {transform: scaleX(1);}

    .pink {border: #e6244b 2px solid;}
    .pink:before {background: #e6244b;}

    .yellow {border: #fcca2a 2px solid;}
    .yellow:before {background: #fcca2a;}

    .button-filled.yellow1:before, .button-filled.yellow1:after {background: #fcca2a;}

    .button-filled {color: #373535; z-index: 2}
    .button-filled:after {content:''; width: 38px; background: #3dccb1; height: 100%; position: absolute; top:0; left:0; z-index: -1;}
    .button-filled:before {content:''; width: 101%; background: #3dccb1; height: 101%; position: absolute; top:0; left:0; z-index: -1; transform: scaleX(0); transform-origin: left; transition: .5s cubic-bezier(.91,.85,.71,1.22);}
    .button-filled:hover:before {transform: scaleX(1); max-width: none;}

    .button-square {border: 3px solid #373535; height: 40px; width: 40px; color: #373535; background: transparent; display: flex; align-items: center; justify-content: center;}
    .button-square:hover {color: #fff; background: #373535;}
    .button-square i {margin-left: 0; font-weight: bold;}
    .button-square:hover i {color: #fff;}

    /* error */
        .error-page{text-align:center;padding:calc(10px + 3%) calc(20px + 5%) calc(30px + 5%); color: #41444b;}
        .error-page .bloc-img{width:calc(130px + 30%);; height:100%; margin: calc(5px + 2%) auto 0;}
        .bloc-error h4 {font-size:calc(14px + 5 * (100vw - 320px) / 1080); color: #3dccb1;}
        .error-page .button {margin-top: calc(5px + 2%); }
    
    /* html body */
        html{width:100%;overflow-x:hidden;line-height:1;}
        body{width:100%;overflow:hidden;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale; }

        *::-webkit-scrollbar{width:4px;background-color:#e3e9f0;}
        *::-webkit-scrollbar-thumb{background:#3dccb1;}
        *{scrollbar-color:#3dccb1 #e3e9f0;scrollbar-width:thin;scroll-behavior:smooth;}

    /* text */
        h2 {text-transform: uppercase; letter-spacing: 2px; font-size:calc(10px + 4 * (100vw - 320px) / 1080); font-weight: 600; color: #373535;}
        h3 {font-size:calc(20px + 20 * (100vw - 320px) / 1080);font-weight:bold; line-height: 1; margin: 10px 0 25px; color: #373535;}
        h4 {font-size:calc(15px + 10 * (100vw - 320px) / 1080);font-weight:bold; margin: 10px 0 25px; color: #373535; line-height: 1.3;}
        .title {font-size:calc(13px + 7 * (100vw - 320px) / 1080); font-weight: 700; color: #373535;}
        .subtitle {font-size:calc(11px + 7 * (100vw - 320px) / 1080); font-weight: 700; color: #e6244b;}
        .paragraphe {margin: calc(15px + 1%) 0; font-size:calc(12px + 5 * (100vw - 320px) / 1080);color: #555; line-height: 1.3;}
        .paragraphe * + *:not(li){margin-top:calc(10px + 1%);}
       /* .paragraphe p {text-indent: 3%;}*/
        .jaune {color: #fcca2a;}
        .vert {color: #3dccb1;}
        .vertf {color: #03898b;}
        .rose {color: #e6244b;}
        .date {display: block;font-weight: 600; color: #3dccb1;}
        br {margin-top: 0!important;}



/*----------------------------------------------------< APP >---------------------------------------------------*/
    .conteneur {padding: 0 calc(20px + 7%);}
    .bloc-text {padding: calc(20px + 5%) calc(20px + 5%); display: flex; flex-direction: column; justify-content: center; hyphens: auto; text-align: left;}
    .conteneur-flex {display: flex; }
    .conteneur-flex .bloc-text {flex: 1 1 50%;}
    .conteneur-flex .bloc-img {flex: 1 1 50%;}
    .ie .conteneur-flex .bloc-img {overflow: hidden;}
    .page {padding: 60px calc(20px + 7%);}
    .bloc-img img {height: 100%; width: 100%; object-fit: cover;}
    .ie .bloc-img img {width: auto; max-width: none;}
    .gris {width: 250px; height: 250px; background: #f2f2f2; box-shadow: 0 2px 9px 0 rgba(0,0,0,0.10); position: absolute; z-index: -1; top: -15%; right: 15%;}
    .bloc-titre { width: 55%;text-align: center;margin: auto;}
    .bloc-titre > div{background: white; box-shadow: 0 2px 9px 0 rgba(0,0,0,0.10); padding: 70px 0; width: 100%;}
    .swiper-pagination-bullets {cursor: pointer; text-align: center; display: flex; align-items: center; margin: 0 30px;}
    .swiper-pagination-bullet {height: 10px; width: 10px; background: #373535; opacity: .6; display: inline-block; margin: 3px}
    .swiper-pagination-bullet-active {opacity: 1;}
    .bread-crumb {display: inline-flex; font-size: 13px; font-weight: 700; color: #373535; padding: 20px; opacity: .7; transition: .3s ease-in-out; margin-bottom: 0; width: 100%;flex-wrap: wrap;}
    .bread-crumb li:not(:last-child):after {content:'|'; margin: 0 10px;}
    .bread-crumb li:before {display: none;}
    .bread-crumb li a {opacity: .8; color: #373535;}
    .bread-crumb li a:hover {opacity: 1; color: #373535;}
    .bread-crumb i {margin-right: 10px;}


/************* header **************/
    
    #header{transition:transform .6s;width:100%; padding: 0; position: absolute; z-index: 10;}
    .fix #header{position:fixed;}
    .down #header{transform:translateY(-100%);}
    #header .bottom {background: #fff; color: #111; padding: 0 0 0 50px; font-weight: 500; height: 170px; display: flex; width: 100%; justify-content: center; align-items: center;;box-shadow: 0 2px 9px 0 rgba(0,0,0,0.10);}
    #header .top{background:#e6244b; color: #fff; padding:10px 50px; display: flex; justify-content: space-between;
        font-size: calc(10px + 4 * (100vw - 320px) / 1080)}
    #header .top ul {display: inline-flex; align-self: flex-end;}
    #header .top i {/*color: #3dccb1; */margin-right: 5px;}
    #header .top i:first-child {margin-left: 30px;}
    .logo {min-width: 250px; height:100%;}
    h1 {margin-bottom: 0;}
    .red {position: absolute; bottom: -40px;right: 0; display: flex;}
    .red a {font-size: 17px; background: #3b5998;height: 40px;width: 40px;color: white;display: flex;align-items: center;justify-content: center;border-radius: 4px; transition: transform .3s ease-in-out;}
    .red a:hover {transform: rotate(180deg);}
    .red a:first-child {background: #dd2a7b; margin-right: 1px;}
    .red a:nth-child(2) {background: #2867b2; margin-right: 1px;}
    .red a:last-child {background: #fff; color: #444; margin-left: 1px;}

    
/************* data-nav **************/

    .hamburger {display: none; align-items: center;justify-content: space-between; margin-right: 75px; font-size: 18px; color: #373535; cursor: pointer; right:calc(7px + 2%);}
    [data-nav]{display: flex; transition:.3s;justify-content:center;width:60px;height:60px;align-items:center;cursor:pointer; margin-left: 20px;}
    [data-nav] > div{background:#373535;transition:.3s;margin:auto;align-self:center;width:20px;height:2px;}
    [data-nav] > div:before,
    [data-nav] > div:after{left:0;transition:.3s;content:'';width:20px;height:2px;background:#373535;position:absolute;}
    [data-nav] > div:before{top:-7px;}
    [data-nav] > div:after{bottom:-7px;}
    [data-nav]:hover {transform: rotate(180deg);}

    
/************* slider **************/
    
    #slider{width:100%;height:75vh;min-height:400px;background:#eee; color: #373535;}
    #slider > div{width:100%;height:100%;}
    #slider .container-slider {
        z-index:1; height: 100%; width: 100%; background: linear-gradient(to right, rgba(255,255,255,.85), transparent); padding: 0 calc(20px + 7%);
        display: flex; flex-direction: column; justify-content: center;}
    #slider .container-slider .content{width: 40%;}
    #slider .legend {transition:opacity 1s, top 1s;opacity:0;top:-50px; text-transform: uppercase; letter-spacing: 2px; font-size:calc(12px + 4 * (100vw - 320px) / 1080); font-weight: 600; color: #373535;}
    #slider .end .legend { opacity:1;top:0;}
    #slider .title{transition:opacity 1s, top 1s;opacity:0;top:-50px;font-size:calc(30px + 20 * (100vw - 320px) / 1080);font-weight:bold; line-height: 1; margin: 10px 0 25px;}
    #slider .end .title{opacity:1;top:0;}
    #slider p{margin:calc(10px + 1%) 0 calc(15px + 1.5%);transition:opacity 1s, left 1s;opacity:0;left:-80px;font-size:calc(14px + 3 * (100vw - 320px) / 1080);}
    #slider .end p{left:0;opacity:1;}
    #slider .button {transition:all .25s, opacity 1s, bottom 1s;bottom:-40px;opacity:0;}
    #slider .end .button {bottom:0;opacity:1;}
    #slider [data-bg]{transition:transform 1s;z-index:0;position:absolute;width:100%;height:100%;top:0;left:0;}
    #slider .end [data-bg]{transform:scale(1.05);}
    #slider .nav{position:absolute;right:0;top: 50%; transform: translateY(-50%); z-index:5;padding:2px;}
    #slider .swiper-pagination-bullets {cursor: pointer; text-align: center; display: flex; align-items: center; margin: 0 150px 0 0; flex-direction: column;}
    #slider .swiper-pagination-bullet {height: 10px; width: 10px; background: #fff; opacity: .6; display: inline-block; margin: 6px; transition: height .3s ease-in-out;}
    #slider .swiper-pagination-bullet-active {opacity: 1; height: 30px;}


/************* contact **************/
    .contactPage {background: #f9f9f9;}
    .contactPage .button input {margin-top: 0; text-transform: uppercase; font-weight: 500; cursor: pointer; letter-spacing: 1px;}
    .contactPage p.paragraphe {margin-bottom: 50px;}
    .contact-title {font-size: calc(15px + 10 * (100vw - 320px) / 1080);}
    .contact-bloc .button {margin-top: 25px;}
    .contact-bloc, .address-bloc {flex: 1 1 50%; padding:calc(10px + 5%) calc(2px + 5%) ;}
    .address-bloc a {display: block;}
    .address-bloc a:hover {color: inherit;}
    .address-bloc > .top {display: flex; align-items: flex-end;}
    .address-bloc > .top > div {width: 50%;}
    .address-bloc > .bottom {margin-top: 50px;
        width: 100%;}
    .address-bloc > .bottom iframe {height: 400px;
        width: 100%;}
    .address-bloc a.paragraphe, .address-bloc address.paragraphe {margin-bottom: 0;}
    .address-bloc .button {padding: 8px 20px;}
    .contact-form .form-flex:first-child {display: flex;flex-wrap: wrap;justify-content: space-between;margin-right: 0;}
    .contact-form .form-flex:first-child .form-group {flex-direction: column;flex: 1 1 40%;}
    .contact-form .form-flex:first-child .form-group:nth-child(2n+1) {margin-right: 10px;}
    .contact-form .form-flex:first-child .form-group:last-child {margin-right: 0;}
    .form-group {line-height: 60px;font-size: 14px;background: #fff;width: 100%;}
    .contactPage .form-in {margin-bottom: 28px; display: block; width: 100%;padding: 1rem .75rem;font-size: 1rem;line-height: 1.5;color: #495057;background: transparent;border-bottom: 2px solid #3dccb1;border-left: 1px #ccc solid;border-top: 1px solid #ccc;border-right: 1px solid #ccc;transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;}
    .contact-form .form-flex label {top: 0;opacity: .7;transition: .15s;position: absolute;left: 0;width: 100%;padding-left: 16px;height: 100%; font-size: 13px;}
    select{border-top: none; border-left: none; height: 60px; font-size: 90%!important;}
    .ie select {font-size: 0!important;}
    option { color: #666!important; font-size: 14px!important;}
    .form-group.active label{opacity: .7; font-size: 12px;top: -50%; padding-left: 0; font-weight: bold; color: #3dccb1;}
    .contact-form .msg.active label {top: -26%;}
    .form-group.known label {color: transparent;}


/************* Devis **************/
    .devis{
        width: 100%;
        justify-content: center;
    }
    .devis a {
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        padding: 1em;
        background-color: #e6244b;
        color: white;
        font-size: 20px;
        text-transform: uppercase;
    }
    .devis i {
        margin-right: 10px;
    }

/************* Index **************/

    .bloc-titre h3 {margin-bottom: 0;}

    .icon-group {display: flex; justify-content: space-around; padding: 0 50px; align-items: center;}
    .icon-group li {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 50px; }
    .icon-group li:hover img {transform: translateY(10%);}
    .icon-group img {width: 85px; min-width: 85px; height: 100%; transition: transform .3s cubic-bezier(.91,.85,.91,1.28);}
    .icon-group span {text-transform: uppercase; text-align: center; color: #373535; font-size: 14px; font-weight: 600; height: 100%; display: flex;align-items: center;margin-top: 20px;}

    .bloc-presentation {display: flex;}
    .bloc-presentation .content {padding:calc(20px + 7%); width: 80%; background: #fefefe;}
    .bloc-presentation .button-filled:before, .bloc-presentation .button-filled:after {background: #fcca2a;}
    .bloc-presentation a[class^="button"]:hover {color: #373535; }
    .indexPage .bloc-presentation:not(:nth-child(2)) {margin-bottom: 300px;}
    .indexPage .bloc-presentation:not(:nth-child(2)) .content {padding:calc(17px + 7%); margin-right: calc(20px + 7%); background: transparent;}
    .bloc-presentation li:before {content:'\f0da'; font-family: "Font Awesome 5 Pro"; margin-right: 7px; font-weight: 900; color:#fcca2a;}
    .bloc-presentation a:hover {color: #3dccb1;}

    /*
    .bloc-realisations {margin-bottom: 100px;}
    */
    .titre-vert:before {content:''; background-image: url("../../img/trame.png"); background-color: #3dccb1; position: absolute; z-index: -1;
        height: 520px;width: 80%;left: -50%;top: -88%;}
    .titre-vert:after{content: '';background-color: #3dccb1;position: absolute;z-index: -1;height: 150px;width: 35%;right: -50%;bottom: -50%;}
    .gris-right {top: -12%; right: 15%; background: rgba(61,204,177,.5);}

    .container-rea {margin: 100px 0 0; padding: 10px;}
    [data-swiper="swiper-rea"] {overflow: hidden;}

    .bloc-realisations .button-group {display: flex; justify-content: space-between; margin-top: 40px;}
    .bloc-realisations .nav button{width:38px;height:38px; background: #3dccb1; color: #373535;}
    .bloc-realisations .nav button:first-child {margin-right: 5px;}
    .bloc-realisations .nav button:hover{background: #fff; color: #3dccb1;}

    .container-rea .bloc-img {width: 100%;}
    .container-rea .bloc-img .paragraphe {position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); z-index: 2; opacity: 0; color: white; transition: opacity .5s ease-in; margin: 0;}
    .container-rea .bloc-img:hover .paragraphe {opacity: 1;}
    .container-rea .bloc-img:before {content:''; background-image: url("../../img/shadow-img.png"); background-size: cover; position: absolute; z-index: 1; opacity: 0;transition: opacity .5s ease-in; width: 100%;}
    .container-rea .bloc-img:hover:before{opacity: 1;}

    .bloc-clients {margin-top: 270px; margin-bottom: 300px;}
    .ie .bloc-clients img {max-width: 100%;}
    .titre-rose:before {content:''; background-image: url("../../img/trame.png"); background-color: #e6244b; position: absolute; z-index: -1;
        height: 520px;width: 80%;right: -50%;top: -100%;}
    .titre-rose:after{content: '';background-color: #e6244b;position: absolute;z-index: -1;height: 50%;width: 150px;left: -50%;bottom: -50%;}
    .gris-left {top: -10%;left: 16%; background: rgba(230,36,75,.5);}

    .slider-contenu {margin-top: 115px;}
    .slider-contenu .swiper-slide {background: white;}
    .slider-contenu .bloc-img {flex: 1 1 50%; height: 700px;}
    .slider-contenu .bloc-text {flex: 1 1 50%; padding: calc(20px + 7%);}
    .slider-contenu .paragraphe {margin: calc(30px + 1%) 0 calc(35px + 1.5%);}
    .bloc-clients .slider-contenu .paragraphe { padding: 0 50px; }
    .bloc-clients .slider-contenu .paragraphe:before {content: '\f10d'; color: #e6244b; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin-right: 10px; position: absolute; left: 0;}
    .bloc-clients .slider-contenu .paragraphe:after {content: '\f10e'; color: #e6244b; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin-left: 10px; position: absolute; right: 0;}
    .button-filled.pink1:before, .button-filled.pink1:after {background: #e6244b;}

    .slider-contenu + .nav {margin-top: 100px; width: 100%; display: flex; justify-content: flex-start;position: absolute;bottom: 5%;left: 2%;}
    .bloc-clients .nav button{width:38px;height:38px; background: #e6244b; color: #fff;}
    .bloc-clients .nav button:first-child {margin-right: 5px;}
    .bloc-clients .nav button:hover{background: #fff; color: #e6244b;}

    .logo-clients {text-align: center; padding-top: calc(20px + 7%); padding-bottom: calc(20px + 7%);}
    .logo-item {width: 250px;}
    [data-swiper="clients"] {overflow: hidden; margin-top: calc(20px + 5%); }


    /************************** Map *****************************/

    #map {height: 600px;width: 100%;top: 100px;}
    #map .marker:before {transition: .5s;content: '\f3c5';color: #3dccb1;position: absolute;top: 0;left: 0;font-family: "Font Awesome 5 Pro";font-weight: 700;font-size: 25px;}
    .mapboxgl-ctrl-group:not(:empty){box-shadow: none!important;}
    .mapboxgl-ctrl-group {border-radius: 0!important;}
    .mapboxgl-ctrl-group > button:focus {box-shadow: 0 0 2px 2px #3dccb1!important;}
    .mapboxgl-popup-anchor-bottom .mapboxgl-popup-tip {border-top-color: #373535!important;}
    .mapboxgl-popup-content { background: #373535!important; border-radius: 0; height: 200px; width: 250px; display: flex; flex-direction: column; text-align: center; padding: 20px!important;}
    .mapboxgl-popup-content .title {color: #fff; font-size: calc(14px + 3 * (100vw - 320px) / 1080); }
    .mapboxgl-popup-content .link {text-transform: uppercase; color: #3dccb1; font-weight: 600;}
    .mapboxgl-popup-content .bg {flex: 1; background-size: cover;background-repeat: no-repeat; margin: 10px 0;}
    .mapboxgl-popup-close-button {color:#fff; margin: 5px 10px;}



/************* bottom **************/

    .bloc-bottom {background-position: left;}
    .bloc-bottom .button-filled:before, .bloc-bottom .button-filled:after {background: #e6244b;}
    .bloc-bottom .content {padding:100px 0 100px 150px; width: 50%; background-position: left;}



/************* footer**************/

    #footer{background:#373535; color:#ddd; clear:both;}
    #footer a:hover {color: #fff;}
    #footer ul {display: flex; width: 100%; justify-content: center; padding: 60px 0; border-bottom: #555 solid 1px; flex-wrap: wrap;}
    #footer ul li:nth-child(2) a, #footer strong {color: #3dccb1;}
    #footer ul li:nth-child(2) a:hover {color: #00ffcf;}
    #footer ul li:not(:last-child):after {content: '|'; margin: 0 10px; color: #ddd;}
    #copyright {font-size: 13px; text-align: center; padding: 25px;}


/************* pages legal**************/

    .page-legal .paragraphe {margin: calc(1px + 1%) 0 calc(15px + 1.5%)}
    .page-legal .button {margin-top: calc(1px + 1%);}
    .sitemap-list a:hover {color: #e6244b;}
    .sitemap-list li:before {content:'\f015'; color: #e6244b; font-family: "Font Awesome 5 Pro"; font-weight: bold; margin-right: 10px; font-size: .8em; }
    .link-cookies {margin: 15px 0;display: block; color: #3dccb1; opacity: .9; transition: opacity .3s ease-in-out;}
    .link-cookies:hover {color: #3dccb1; opacity: 1;}


/*----------------------------------------------------< Pages internes >---------------------------------------------------*/

/************* page maison VIRICEL**************/

    .list li:before {content:'\f015'; font-family: "Font Awesome 5 Pro"; font-weight: 700; margin-right: 10px; font-size: .8em;}
    .page-intro > .conteneur-flex .conteneur-flex {justify-content: space-between; margin-bottom: 15px; }
    .page-intro .button {margin-top: calc(20px + 5%);}
    .page-intro .contain img {object-fit: contain;}
    .page-intro .cover img {object-fit: cover;}
    .page-intro .paragraphe {margin: 0;}
    .page-intro .paragraphe > * + * {margin-top: calc(10px + 2%);}
    .qualibat-flex {display: flex; align-items: center;}
    .qualibat-flex > div {width: 70%;}
    .qualibat {width: 12%; float:left; margin-right: calc(15px + 3%);}
    #certif ul {margin-top: 0!important;}
    .list-flex {display: flex; justify-content: space-between}
    .list-flex > li {width: 50%;}
    .list-flex > li:first-child {margin-right: calc(15px + 5%);}
    .text-equipe {text-align: left; padding-top: 0;}
    .text-equipe h4, .certif-pad h4 {margin-top: 0;}
    .img-equipe {display: flex; justify-content: center;}
    .img-equipe img {width: 50%; object-position: top;}



/************* pages Métiers**************/

    .page-metiers {text-align: center;}
    .page-metiers .conteneur-flex > div {display:flex;}
    .page-metiers .paragraphe {margin: 0;}
    .page-metiers .button {margin-top: calc(15px + 1%);}
    .page-metiers .bloc-link {margin: 10px;}
    .page-metiers .bloc-link img {filter: grayscale(.9); transition: .3s ease-in-out; height: 100%; width: 100%; object-fit: cover;}
    .page-metiers .bloc-link:hover img {filter: grayscale(0);}
    .page-metiers .conteneur-flex:not(:nth-child(2)) .bloc-img { /*padding: calc(10px + 5%) 0;*/ flex: 1 1 30%;}
    .page-metiers a:not(.button):hover {color: inherit;}
    .bloc-link:before {content:''; height: 100%; width: 100%; background: linear-gradient(to top, rgba(255,255,255,.7) 15%, transparent); position: absolute; top: 0; left: 0; opacity: 1; transition: opacity .5s cubic-bezier(.91,.85,.71,1.22);}
    .page-metiers .bloc-link:hover .content, .bloc-link:hover:before {opacity: 0;}
    .bloc-link .content {width: 100%; position: absolute; left: 0; bottom: 0; padding: calc(25px + 2%); z-index: 2; display: inline-flex; justify-content: space-between; align-items: flex-end; opacity: 1; transition: opacity .5s cubic-bezier(.91,.85,.71,1.22); text-align: left;}
    .title-metiers {font-size:calc(15px + 5 * (100vw - 320px) / 1080);font-weight:bold; color: #373535;}
    .legend-metiers {text-transform: uppercase; letter-spacing: 2px; font-size:calc(12px + 2 * (100vw - 320px) / 1080); font-weight: 600;}
    .legend-metiers {text-transform: uppercase; letter-spacing: 2px; font-size:calc(12px + 2 * (100vw - 320px) / 1080); font-weight: 600;}
    .p-toiture {column-count: 3;column-gap: 50px;text-align: justify;}
    .conteneur-toiture .bloc-img {flex: 1 1 25%;}
    .conteneur-toiture h4 {margin-top: 0;}
    .list-metiers li:not(:first-child):before {content:'\f015'; font-family: "Font Awesome 5 Pro"; font-weight: 700; margin-right: 10px;font-size: .8em;}
    .page-metiers li:before {content:'\f0da'; font-family: "Font Awesome 5 Pro"; margin-right: 7px; font-weight: 900;}
    [data-swiper="clients"] .swiper-wrapper {transition-duration: 2s!important; transition-timing-function:linear!important;}
    [data-swiper="clients"] .swiper-slide {height: auto; padding: 0 20px;}




/************* pages Réa**************/

    .page-rea {text-align: center;}
    .grid-rea {margin-top: 4em;}
    .grid-rea .bloc-link {height: 350px; width: 350px;}
    .grid-rea .bloc-link img {height: 100%; width: 100%; object-fit: cover;}
    .grid-rea .bloc-link:before {content:''; height: 100%; width: 100%; background: rgba(230,32,68,.7); position: absolute; top: 0; left: 0; opacity: 0; transition: opacity .3s ease-in-out;}
    .grid-rea .bloc-vert:before { background: rgba(61,204,177,.85); }
    .grid-rea .bloc-link:hover:before, .grid-rea .bloc-link:hover .description {opacity: 1;}
    .grid-rea .bloc-link:hover img {filter: grayscale(.9); transition: .3s ease-in-out;}
    .description {text-align: center;font-size: calc(12px + 2 * (100vw - 320px) / 1080); padding: calc(25px + 2%);  position: absolute; top: 50%;left: 50%;z-index: 3;transform: translate(-50%, -50%);width: 100%; opacity: 0; transition: opacity .3s ease-in-out;}
    .description .paragraphe, .description .title, .description .button {color: #f2f2f2; border-color: #f2f2f2;}
    .grid-rea .button-outline::before {background: rgba(255,255,255,.2); height: 101%;}
    .button-link:after {content:'\f178'; margin-left: 10px; left: 0; font-family: "Font Awesome 5 Pro"; font-weight: 500; transition: transform .3s ease-in-out; transform-origin: bottom;}
    .button-link:hover:after {transform: translateX(50%) rotate(90deg);}
    .bloc-rea {display: flex; justify-content: center; align-items: center;}
    .bloc-rea .bloc-link {flex: 1 1 25%; height: 250px;}
    .button-filters {display: flex; justify-content: space-around; padding: calc(15px + 1.5%) 0; flex-wrap: wrap;}

    .button-filters .button-outline {border-width: 3px; border-color: #373535; margin-top: 15px;}
    .button-filters .button-outline:before {display: none;}
    .button-filters .button-outline:hover, .button-filters .button-outline.is-checked {border-color: #3dccb1; background-color: #3dccb1; color: #fff;}
    .filters-pro .button-outline.is-checked, .filters-pro .button-outline:hover {border-color: #e6244b; background-color: #e6244b; }

    /* détail réa */

    .bloc-galerie {max-width: 50%; height: calc(200px + 300 * (100vw - 320px) / 1080);}
    [data-swiper="galerie"]{overflow:hidden;padding:0;height:100%;}
    [data-swiper="galerie"] .swiper-slide{height:100%;width:100%;}
    [data-swiper="galerie"] .nav{transition:.2s;z-index:1;position:absolute;top:50%;transform:translateY(-50%);width:100%;}
    [data-swiper="galerie"] .nav button{color:#fff;position:absolute;background:#373535;width:40px;height:40px;}
    [data-swiper="galerie"] .nav button:hover{background:#fcca2a;color:#373535;}
    [data-swiper="galerie"] .nav button.next{right:0;}
    .detail-rea-page [data-swiper="galerie"] img {height: 100%; width: 100%; object-fit: contain;}
    .bloc-galerie img {height: 100%; width: 100%; object-fit: contain;}


/************* Actus **************/

    .page-articles {text-align: center;}
    .liste-articles {display: flex; flex-wrap: wrap; margin-top: calc(20px + .5%);}
    .liste-articles article {flex: 1 1 33.33%; max-width: 33.33%; padding: calc(20px + .5%); text-align: left;}
    .liste-articles h4 {font-size: calc(15px + 5 * (100vw - 320px) / 1080); margin: 25px 0 10px;}
    .liste-articles .paragraphe {font-size: calc(10px + 2 * (100vw - 320px) / 1080);line-height: normal; margin: calc(15px + 1%) 0;}
    .article-show .conteneur-flex .bloc-text {flex: 1 1 70%;}
    .article-show .conteneur-flex .bloc-img {display: flex; justify-content: center;}
    .article-show .bloc-img img {object-fit: contain; height: auto; width: auto;}




/*----------------------------------------------------< ANIMATIONS >---------------------------------------------------*/

/************* Scroll Magic **************/

    .digit {opacity: 0;transform: translateX(-40px);transition: all 0.6s ease-out;}

    .icon-group .digit:nth-child(2) {transition-delay: .1s;}
    .icon-group .digit:nth-child(3) {transition-delay: .2s;}
    .icon-group .digit:nth-child(4) {transition-delay: .5s;}
    .icon-group .digit:nth-child(5) {transition-delay: .7s;}

    .bloc-presentation > .digit:first-child { transform: translateX(-200px);}
    .bloc-presentation > .digit:last-child { transform: translateX(200px);}
    .indexPage .bloc-presentation:not(:nth-child(2)) .content:after {opacity: 0; transition: opacity .5s .5s ease-in;}
    .indexPage .bloc-presentation:not(:nth-child(2)) .content.visible:after {opacity: 1;}
    .bloc-realisations > .digit:first-child { transform: translateX(-200px);}
    .bloc-realisations > .digit:last-child { transform: translateX(200px);}
    .bloc-realisations > .gris ~ div {opacity: 0!important; transition: opacity 1s .4s ease-in;}
    .bloc-realisations > .gris.visible ~ div {opacity: 1!important;}
    .bloc-realisations .titre-vert:before, .bloc-realisations .titre-vert:after {opacity: 0; transition: opacity .7s .4s ease-in;}
    .bloc-realisations .titre-vert.visible:before, .bloc-realisations .titre-vert.visible:after {opacity: 1;}
    .bloc-clients > .digit:first-child { transform: translateX(-200px)}
    .bloc-clients > .digit:last-child { transform: translateX(200px)}
    .bloc-clients .titre-rose:before, .bloc-clients .titre-rose:after {opacity: 0; transition: opacity .8s .4s ease-in;}
    .bloc-clients .titre-rose.visible:before, .bloc-clients .titre-rose.visible:after {opacity: 1;}
    .bloc-clients .gris ~ div {opacity: 0!important; transition: opacity 1s .4s ease-in;}
    .bloc-clients .gris.visible ~ div {opacity: 1!important;}
    .bloc-bottom .digit {transform: translateY(100px);}
    .page-intro .conteneur-flex > .digit:first-child {transform: translateX(-200px);}
    .page-intro .conteneur-flex > .digit:nth-child(2) {transform: translateX(200px);}
    .page-metiers .conteneur-flex > .digit:first-child {transform: translateX(-200px);}
    .page-metiers .conteneur-flex > .digit:nth-child(2) {transform: translateX(200px);}
    .digit.visible {opacity: 1;transform: none!important;}

/*----------------------------------------------------< MEDIA QUERIES >---------------------------------------------------*/


/************* min 1250 **************/ @media screen and (min-width:1250px){

    .nav-bar nav > ul > li a {font-size: 19px;}
}


/************* min 992 **************/ @media screen and (min-width:992px){

    .nav-bloc {display: none;}
    .nav-bar {width: 100%; height: 100%; display: flex;}
    .nav-bar nav {width: 100%; z-index: 2; display: flex; justify-content: space-between;}
    .nav-bar nav > .nav-ul {display:flex; width: 100%; align-items: center; justify-content: center;}
    .nav-bar nav > .nav-ul > li:not(:last-child):after {content: '|'; font-weight: bolder; color: #e6244b; margin-left: 15px; margin-right: 15px;}
    .nav-bar nav > .nav-ul > li a {text-transform: uppercase;}
    .nav-bar nav > .nav-ul > li a:hover{color: inherit; cursor: pointer;}
    .nav-bar nav > .nav-ul > li > a:before{transition:.3s;content:'';position:absolute;width:0;height:2px;bottom:-10px;background:#fcca2a;left:50%;transform:translateX(-50%);}
    .nav-bar nav > .nav-ul > li > a:hover:before{width:100%;}
    .nav-bar nav > .nav-ul > li[data-sub] > a:after{transition:.2s;margin-left:8px;font-size:10px;top:-1px;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:700;}
    .nav-bar nav > .nav-ul > li[data-sub] > a.open:after{transform:rotate(180deg);top:0;}
    .nav-bar nav > .nav-ul > li ul{display:flex!important;transition:.4s;opacity:0;visibility:hidden;text-align:center;padding:10px;font-size:14px;background:#fff;position:absolute;min-width:160px;left:25%;transform:translateX(-50%);top:50px;}
    .nav-bar nav > .nav-ul > li > a.open + ul{opacity:1;visibility:visible;top:30px; z-index: 99;}
    .nav-bar nav > .nav-ul > li ul li{padding:5px;display:flex; align-items: flex-end; height: 250px;width: 250px;margin: 10px; text-align: left; transition: .3s ease-in-out;}
    .nav-bar nav > .nav-ul > li ul li:hover {box-shadow: 0 0 15px 0 rgba(0,0,0,.2); }
    .nav-bar nav > .nav-ul > li ul li > *:not(ul){text-transform:none;letter-spacing:0;padding:15px 10px;font-weight:400;display:block;}
    .nav-bar nav > .nav-ul > li ul li ul{position:absolute;left:100%;top:0;}
    .nav-bar nav > .nav-ul > li ul li ul.left{left:auto;right:100%;}
    .nav-bar nav > .nav-ul > li ul li ul:hover,
    .nav-bar nav > .nav-ul > li ul li *:hover + ul{opacity:1;visibility:visible;display:block;transform:none;}
    .legend-sub {text-transform: uppercase; letter-spacing: 2px; font-size:13px; font-weight: 700;}
    .title-sub {font-size:20px; font-weight: 900; color: #373535;}
    .ie .nav-bar nav > ul > li ul{min-width:1000px!important;}
    .menu-contact {display: flex;}
    .menu-contact li {width: 165px; display: flex; align-items: center; justify-content: center; text-align: center; transition: .3s;}
    .menu-contact li:first-child {background: #3dccb1; color: white; }
    .menu-contact li:first-child:hover {background: #39bba2;}
    .menu-contact li:first-child a {text-transform: uppercase ;}
    .menu-contact li:first-child a:hover {color: white;}
    .menu-contact li:last-child i {color: #3dccb1;}
    .menu-contact i {font-size: 200%; margin-bottom: 10px;}
}


/************* max 1700 **************/ @media screen and (max-width:1700px){

    #header .bottom {height: 150px;}
    .menu-contact li {width: 150px;}
    .nav-bar nav > ul > li a {font-size: 18px;}

}

/************* max 1500 **************/ @media screen and (max-width:1500px){
    .page-intro > .conteneur-flex .conteneur-flex {flex-direction: column; }
    .nav-bar nav > ul > li ul {left: 35%;transform: translateX(-35%);}
    .menu-contact li:last-child {display: none;}
    .logo {min-width: 200px;}
}

/************* max 1350 **************/ @media screen and (max-width:1350px){

    #header .bottom {height: 130px; padding-right: 50px;}
    .icon-group img {width: 65px; min-width: 55px;}
    .page-metiers .conteneur-flex > div {flex-direction: column;}
    .menu-contact li:first-child {background: transparent; color: #3dccb1; width: auto; }
    .menu-contact li:first-child:hover {background: transparent;}
    .menu-contact li:first-child a {transition: .3s;}
    .menu-contact li:first-child a:hover {color: #39bba2;}
    .menu-contact i, .menu-contact br {display: none;}
    .logo {min-width: 170px;}
    .nav-bar nav > ul > li a {font-size: 15px;}
    .nav-bar nav > .nav-ul > li:not(:last-child):after {content: '|'; font-weight: bolder; color: #e6244b; margin-left: 10px; margin-right: 10px;}
}


/************* max 1099 **************/ @media screen and (max-width:1099px){

    #header .top{ display: none;}
    #header .bottom {justify-content: space-between;}
    .nav-bar {display: none;}
    .hamburger {display:flex;}
    [data-close] {position: absolute; top: 0; right: 0; margin: 30px; cursor: pointer;}
    .nav-bloc:before {content: ''; background-image: url("../../img/bg-menu.jpg"); background-repeat: no-repeat; filter: blur(5px); background-size: cover; width: 100%; height: 100%; position: absolute; top: 0; left: 0; z-index: -1;}
    .nav-bloc {display:block; z-index:10;transform:translateX(-100%);transition:box-shadow .6s, transform .6s;overflow:hidden;font-size:calc(15px + 10 * (100vw - 320px) / 1080);color:#fff;position:fixed;top:0;left:0;height:100vh; background: #373535; font-weight: 300;}
    .openNav .nav-bloc{transform:translateX(0);}
    .nav-bloc  nav{overflow-y:scroll;height:100vh;width:100vw;}
    .nav-bloc  nav > ul{max-width:100vw;text-align: left; display: flex;flex-direction: column;justify-content: center; align-items: center; height: 100%;}
    .nav-bloc  nav > ul > li{transition:.6s;padding:0; width: 50%;}
    .nav-bloc  nav > ul > li:not(.show){opacity:0;top:-50px;}
    .nav-bloc  nav > ul > li.show{top:0;opacity:1;}
    .nav-bloc  nav > ul li a{padding:calc(22px + .6%) calc(20px + .6%) calc(20px + .6%);display:block;}
    .nav-bloc  nav > ul li a:hover{color: #00ffcf;}
    .nav-bloc  nav > ul li[data-sub] > a:after{display:flex;align-items:center;justify-content:center;text-align:center;width:calc(50px + 1.2%);position:absolute;height:100%;right:0;transition:.2s;font-size:16px;top:0;content:'\f078';font-family:'Font Awesome 5 Pro';font-weight:300;}
    .nav-bloc  nav > ul li[data-sub] > a.open:after{content:'\f077';}
    .nav-bloc  nav > ul li ul{padding-left: 55px; display:none;}
    .nav-bloc  nav > ul li ul li:last-child{border-bottom:0;}
    .nav-bloc  nav > ul li ul li a{font-size:calc(12px + 7 * (100vw - 320px) / 1080);padding:calc(12px + .6%) calc(20px + .6%) calc(16px + .6%);}

    /* icone li menu */

    .nav-bloc  nav > ul > li:first-child > a:before{content: '\f015'; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 30px;}
    .nav-bloc  nav > ul > li:nth-child(2) > a:before{content: '\f552'; font-family: "Font Awesome 5 Pro"; font-weight: 200; margin-right: 30px;}
    .nav-bloc  nav > ul > li:nth-child(3) > a:before{content: '\f6e3'; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 30px;}
    .nav-bloc  nav > ul > li:nth-child(4) > a:before{content: '\f54a'; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 30px;}
    .nav-bloc  nav > ul > li:nth-child(5) > a:before{content: '\f4b0'; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 30px;}
    .nav-bloc  nav > ul > li:nth-child(6) > a:before{content: '\f1ea'; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 30px;}
    .nav-bloc  nav > ul > li:last-child > a:before{content: '\f573'; font-family: "Font Awesome 5 Pro"; font-weight: lighter; margin-right: 30px;}

    #slider .content {width: 60%;}
    .icon-group {justify-content: center; flex-wrap: wrap;}
    .icon-group li {display: flex; flex-direction: column; justify-content: center; align-items: center; padding: 30px 50px; }
    #slider .container-slider .content {width: 60%;}
    .container-rea {margin: 100px 0 0;}
    .bloc-realisations .button-group {margin-top: 50px;}
    .bloc-titre {width: 80%;}
    .titre-vert:before, .titre-rose:before { height: 350px; top: -45%;}
    .gris-right {right: 0; }
    .gris-left {left: 0; }
    .indexPage .bloc-presentation:not(:nth-child(2)) {margin-bottom: 200px;}
    .bloc-clients {margin-top: 150px; margin-bottom: 200px;}
    .titre-vert:after, .titre-rose:after {display: none;}
    .logo {width: 130px;}
    .red {bottom: auto; top: 50%; transform: translateY(-50%); right: calc(10px + 5%);}
    .red a {background: transparent!important; color: #373735;}
    .contactPage.conteneur-flex {flex-direction: column;}
    .address-bloc {order: 2;}
}


/************* max 992 **************/ @media screen and (max-width:992px){

    .bloc-bottom .content {padding:100px 0 100px 100px; width: 60%;}
    .contact-form {flex-direction: column;}
    .contact-form .form-flex:first-child {display: flex;flex-wrap: wrap;justify-content: space-between; margin-right: 0;}
    .contact-form .form-flex:first-child .form-group {flex-direction: column; flex: 1 1 40%;}
    .contact-form .form-flex:first-child .form-group:nth-child(odd) {margin-right: 10px;}
    #slider .nav {top: 80%;left: 0;margin-left: 90px;}
    #slider .swiper-pagination-bullets {flex-direction: row;}
    #slider .swiper-pagination-bullet {background: #373535;}
    .icon-group li {padding: 30px; }
    .conteneur-flex {flex-direction: column;}
    .conteneur-flex .bloc-img {flex: none;}
    /*.page-metiers .conteneur-flex > div {flex-direction: row;}*/
    .page-metiers .conteneur-flex:not(:nth-child(2)) .bloc-img {padding: 0;}
    .page-intro > .conteneur-flex  {flex-direction: column;}
    .change-order .bloc-img {order:1;}
    .change-order .bloc-text {order:2;}
    .p-toiture {column-count: 2;}
    .liste-articles article {flex: 1 1 50%; max-width: 50%;}
    .img-equipe img {width: 75%;}
    .certif-pad {padding-top: 0;}
    .text-equipe {padding-top: calc(20px + 5%);}
}

/************* max 900 **************/ @media screen and (max-width:992px){

    .bloc-presentation {flex-direction: column;}
    .bloc-presentation .content {width: 100%; text-align: center;}
    .bloc-presentation .bloc-img {height: 200px;}
    .bloc-presentation > .bloc-img {order:1;}
    .indexPage .bloc-presentation:not(:nth-child(2)) .content::after {display: none;}
    .indexPage .bloc-presentation:not(:nth-child(2)) {margin-bottom: 85px;}
    .slider-contenu .swiper-slide {flex-direction: column; padding: 0 50px}
    .slider-contenu .bloc-img {flex: none; height: 50%; width: 100%;}
    .slider-contenu .bloc-text {padding: calc(20px + 7%) 0;}
    .slider-contenu + .nav {justify-content: flex-end; bottom: 5%; right: 5%; left: auto;}
}


/************* max 800 **************/ @media screen and (max-width:800px){

    .page-intro > .conteneur-flex .conteneur-flex  {width: 100%;}
    .bloc-rea {flex-wrap: wrap;}
    .bloc-rea .bloc-link {flex: 1 0 100%;}
    .icon-group {padding: 0;}
    .icon-group span {font-size: 14px;}
}

/************* max 700 **************/ @media screen and (max-width:700px){


    #slider .container-slider {background: rgba(255,255,255,.6)}
    #slider .container-slider .content {width: 100%; text-align: center;}
    #slider .nav {text-align: center;justify-content: center;margin-left: 0;width: 100%;}
    #slider .swiper-pagination-bullets {margin-right: 0;}
    .logo {width: 100px;}
    .page-metiers .conteneur-flex > div {flex-direction: column;}
    .page-metiers .bloc-link {height: 250px;}
    .icon-group img {width: 30px; min-width: 30px;}
    .icon-group span {font-size: 12px; margin-top: 10px;}
}

/************* max 676 **************/ @media screen and (max-width:676px){

    .bloc-bottom .content {padding:100px; width: 100%;}
    .bloc-realisations .button-group {flex-direction: column;align-items: center; margin-top: 50px;}
    .bloc-realisations .button-group .nav {margin-bottom: 40px; order: 1;}
    .bloc-realisations .button-group a { order: 2;}
    .page-intro > .conteneur-flex .conteneur-flex  {flex-direction: column;}
    .address-bloc {flex-direction: column; align-items: flex-start;}
}

/************* max 600 **************/ @media screen and (max-width:600px){

    .liste-articles article {flex: 1 1 100%; max-width: none;}
    .bloc-galerie {max-width: 100%;}
    .contact-form .form-flex:first-child .form-group:nth-child(2n+1) {margin-right: 0;}
    .contact-form .form-flex:first-child .form-group {flex: 1 1 auto;}
}

/************* max 500 **************/ @media screen and (max-width:500px){

    .bloc-bottom .content {padding:50px 100px; width: 100%;}
    .slider-contenu .bloc-text {text-align: center;}
    .titre-vert:before, .titre-rose:before {height: 250px;width: 100%;top: 50%;transform: translateY(-50%);}
    .gris {display: none;}
    .bloc-clients {margin-top: 80px;}
    .slider-contenu + .nav {display: none;}
    .p-toiture {column-count: 1;}
    .bloc-rea .bloc-link {height: 350px; width: 350px;}
    .slider-contenu .button {margin: auto;}
    .address-bloc > .top {flex-direction: column; align-items: flex-start;}
    .icon-group img {width: 30px; min-width: 30px;}
    .icon-group span {font-size: 10px;}
    .icon-group li { padding: 40px 15px;}
    .contactPage {padding: 30px 0;}
    .list-flex {flex-direction: column;}
    .list-flex > li {width: 100%;}
    .list-flex > li:first-child {margin-right: 0;}

}

/************* max 450 **************/ @media screen and (max-width:450px){

    .bloc-bottom .content {padding:50px 50px; text-align: center;}
    .bloc-titre {width: 100%;}
    .swiper-pagination-bullets {margin: 0 15px;}
    .bloc-rea .bloc-link {height: 270px; width: 270px;}
    .nav-bloc nav > ul li {width: 90%;}
    .red {display: none;}
    .hamburger {margin-right: 0; right:0; width: 100%; }
    .button-square {border: none;}
    option { font-size: 12px!important;}
}

/************* max 340 **************/ @media screen and (max-width:340px) {
    .icon-group li {
        padding: 30px 10px;
    }
}

/************* max height 700 **************/ @media screen and (max-height:700px){

        #slider .nav {top: 90%;}

}