.d1-3 {width:100%;margin:0px;}
.m1-2 {width:calc(50% - 10px);}
.m1-3 {width:calc(33.3% - 10px);}
.m1-4 {width:calc(25% - 10px);}
.m2-3 {width:calc(66.6% - 10px);}
.m3-4 {width:calc(75% - 10px);}
.m1-5 {width:calc(20% - 10px);}
.m2-5 {width:calc(40% - 10px);}
.m3-5 {width:calc(60% - 10px);}
.m4-5 {width:calc(80% - 10px);}
.m1-6 {width:calc(100%  / 6 - 10px);}
.m5-6 {width:calc(100%  / 6 * 5 - 10px);}
.dia .mosaique.split_1-2 .mosaique-groupe:first-child,
.dia .mosaique .mosaique-groupe .mosaique-images,
.dia .mosaique.split_1-2 .mosaique-groupe:last-child .mosaique-images,
.dia .mosaique.split_3-4 .mosaique-groupe:first-child,
.dia .mosaique.split_3-4 .mosaique-groupe:last-child, .dia .mosaique.split_2-3 .mosaique-groupe:last-child,
.dia .mosaique.split_2-3 .mosaique-groupe:first-child,
.dia .mosaique.split_1-1 .mosaique-groupe,
.dia .mosaique.auto_split .mosaique-groupe,
.dia .mosaique.auto_split .mosaique-groupe .mosaique-images, 
.dia .mosaique .mosaique-groupe:last-child {
    width:100%;
    display:flex;
    flex-wrap:wrap;
    flex-direction:column;
    margin: 0px;
    margin-bottom: 10px;
}
.std .btn-call-conteneur {text-align:center;margin-bottom:20px;}
.dia .mosaique {
    flex-direction:column;
}
.liste-employes {flex-direction:column;}
.membre-equipe:not(:last-child) {
    margin-bottom: 40px;
}

.cta-accueil {margin-top: calc(-50vh + 60px);min-height:calc(50vh - 60px);}

.titre-conteneur span {
    font-weight: 300;
    font-size: 19px;
    line-height: 1em;
}
.titre-conteneur h1 {
    font-weight: 900;
    margin: 0px;
    font-size: 22px;
    line-height: 1em;
}

.titre-non-accueil {
    width:100%;    
    height: auto;
    width: calc(100% - 40px);
    margin-left: 20px;
}



.infos-bureaux .bureau {padding:30px;}
@media (max-width: 1024px) {
    /*.wrap{padding-left: 32px;padding-right: 32px;}*/
    .cta-accueil .cta {
        padding: 40px 20px;
    }
}
@media (max-width: 760px) {
    
    .std .gauche.grand, .std .droite.grand {
        width: 100%;
    }

    .std .gauche.moyen, .std .droite.moyen {
        width: 100%;
    }

    .std .gauche.petit, .std .droite.petit {
        width: 100%;
    }
    
    .std  .droite, .std  .gauche {margin-left:0px;margin-right:0px;}
    
    .opacity1,
    .opacity2 {
        width:50px;
    }
    
    .opacity1{
        background: linear-gradient(to left, #ffffff64 0%, transparent 90%, transparent 100%);
    }

    .opacity2{
        background: linear-gradient(to right, #ffffff64 0%, transparent 90%, transparent 100%);
    }
    /*.wrap{padding-left: 20px;padding-right: 20px;}*/

    .cta-accueil .wrap{
        display:block;
        padding:0;
        
    }

    .autreRealisation{
        font-size: 20px !important;
        text-align: center;
    }

    .sliderRealisationsMobile{
        display: flex !important;
        justify-content: center;
    }

    .sliderRealisations{
        display:none !important;
    }

    .retourListe{
        display:block;
        background-color: black;
    }

    .cta-accueil .paragraphe2{
        width:100% !important;
        margin-left:0 !important;
    }
    .cta-accueil .paragraphe2:first-of-type{
        margin-bottom:30px;
    }

    header .logo-entete{
        display:none;
    }
    header .titre-conteneur{
        height:100px;
        width: calc(100% - 40px);
        margin-left: 20px;
    }
    header .titre-conteneur.titre-non-accueil {
        height:auto;
    }
    .accueil header .titre-conteneur{
        width:calc(100% - 40px);
        margin-bottom:200px;
    }

    .choix-bureau{
        margin-bottom:10px;
    }

    .entete-infos .wrap{
        display:block;
    }
    .titre-conteneur span {
        font-weight: 300;
        font-size: 19px;
        line-height: 1em;
    }
    .titre-conteneur h1 {
        font-weight: 900;
        margin: 0px;
        font-size: 22px;
        line-height: 1em;
    }
    
    .navigation .menu-lg{
        margin-left:13px;
        margin-right:13px;
    }

    .bouton {
        width: calc(75% - 10px);
        margin: auto;
        text-align: center;
    }

    .cta .contenu-texte .titre{
        font-size: 25px;
    }

    .cta .contenu-texte .texte{
        font-size:18px;
    }



    .pleine_hauteur .wrap{
        width: calc(100% - 20px);
    }

    .paragraphe1.cta {
        display:block;
        margin-left:0 !important;
        margin-right:0 !important;
    }
    .paragraphe1.cta .bouton {
        margin-top:30px;
    }
    .accueil .sect_1 .cta .contenu-texte {
        padding-right: 0px;
    }
    .std .contenu-texte {
        
        margin-right: 0px!important;
        margin-left: 0px!important;
        width:100%;
    }
    .std {
        display: flex;
        align-items: center;
        justify-content: center;
        flex-direction: column;
    }

    .std .contenu-texte + .gauche {
        flex-shrink: 0;
        order: 2;
    }

    .paragraphe1.paragraphe.std .moyen{
        width:100%;
        margin-top:20px;
    }

    .paragraphe1.paragraphe.std .droite{
        margin-bottom:100px;
    }

    .section .wrap .paragraphe2 {
        /* width: calc(50% - 20px); */
        width: 100%;
        margin-left: 0px !important;
        margin-right: 0px !important;
    }
    .cta_theme, .cta_noir {
        padding: 40px 60px 40px 60px;
    }

    .cta .contenu-texte .titre {
        font-size: 30px;
    }

    .cta .bouton {
        width: 100%;
        padding: 0;
        padding-top: 10px;
        padding-bottom: 10px;
        font-size:16px;
    }

    .paragraphe2.paragraphe.cta.cta_noir .titre{
        font-size:22px;
    }

    .paragrapheBas .contenu-texte {
        margin: 0;
        display: flex;
        flex-direction:column;
        margin-top: 80px;
        margin-bottom: 80px;
    }
    .paragrapheBas .contenu-texte .titre {
        width: 100%;
        font-size: 35px;
        text-align: right;
        margin-right: 0px;
    }

    .paragrapheBas .contenu-texte .texte {
        width: 100%;
        margin-left: 0px;
    }
    .grossePhoto {
        margin-bottom: 50px;
    }
    .footerHaut {
        flex-direction: column;
    }
    .footerBas {
        flex-direction: column;
    }
    .footerHautGauche {
        width: 90%;
    }

    .footerHautDroit{
        width: 100%;
        max-width: 500px;
        margin: auto;
        display: flex;
        flex-wrap: wrap;
        grid-gap:0px;
    }
    
    .footerHautDroit a {
        display: flex;
        width: 50%;
        margin: auto;
        align-items: center;
        justify-content: center;
        padding: 10px;
        box-sizing: border-box;
    }
    
    .footerHautDroit img {object-fit:contain;margin-left:0px;}

    footer u{
        display: block;
        margin-bottom: 20px;
        width:100%;
        text-decoration:none;
    }

    footer .droit {
        margin-bottom:20px;
        flex-wrap:wrap;
        align-items:center;
    }
    
    footer .svgTchin {margin-left:30px;}
    
    .tiretFooter{
        display:none;
    }

    .footerBas{
        padding-bottom: 100px;
        margin-bottom: 0px;
        align-items: flex-start;
    }

    .btnCategorie:hover{
        background-color: white;
        color: black;
    }
    #realisations .d1-4:hover .txtRealisation {
        display:flex;
    }

    .btnCategorie.catActif:hover {
        background-color: #b7182b;
        color: #FFF;
    }
    .catActif {
        background-color: #b7182b;
        color: #FFF!important;
    }
    .zoneCategorie{
        background-color:#b7182b;
        color: white;
        width: 100%;
        margin-bottom: 50px;
    }
    .zoneCategorie .liste-categories{
        display:none;
        width: 100%;
        flex-direction: column;
    }

    .zoneCategorie h3{
        display:block;
    }

    .btnCategorie:first-of-type{
        margin-top:10px;
    }

    .arrow {
        border: solid white;
        width: 0px;
        height: 0px;
        display: block;
        border-width: 6px;
        border-color: transparent white white transparent;
        padding: 0px;
        transform: rotate(45deg);
        -webkit-transform: rotate(45deg);
    }

    .arrowUp{
        transform: rotate(-135deg) !important;
        -webkit-transform: rotate(-135deg) !important;
        margin-top:0 !important;
    }

    .zoneBureau{
        width: 100%;
        margin-top: -45px;
    }

    .btnZoneCategorie{
        display:flex;
        justify-content: space-between;
        padding: 20px;
    }

    .liste-bureaux{
        display:none;
        flex-direction: column;
        width:100%;
    }
    .btnZoneBureau {
        display:flex;
        justify-content: space-between;
        padding: 20px;
    }
    .btnCategorie{
        width: 96%;
        color:black;
        margin:auto;
        /*border: none;
        background: unset;*/
        padding: 10px 0px;
        justify-content: center;
        margin-bottom: 10px;
    }
    
    .btnCategorie input{
        
    }

    .menu_map{
        display:inline-block;
    }

    .infos-bureaux{
        max-width: unset;
    }

    .liste-bureaux .choix-bureau:not(:last-child) {
        margin-right: 0px;
    }

    .diapoMobile{
        /*max-height: 300px;*/
    }

    .afficher-plus:hover {
        background-color: black;
        color: white;
    }

    .bureaux.wrap {
        position: relative;
        pointer-events: unset;
    }

    .imgHolder:hover img {
        top: 0px;
        left: 0px;
        width: 100%;
        height: 100%;
    }

    .map-container #map {
        height: 50vh;
        position: initial;
        order: 2;
        top:0px;
    }
    
    .infos .titre-site a {
        height: 60px;
        padding:5px 0px;
    }

    nav ul.pages a {
        white-space: unset;
    }

    header .entete-infos {width:100%;position: absolute;
        bottom: 30%!important;}

    .map-container{
        display: flex;
        flex-direction: column;
    }

    #realisations{
        display:block !important;
        width: calc(100% - 20px);
    }

    #realisations .d1-4 {
        margin-bottom: 10px !important;
    }

    #realisations > div.vedette {
        height: unset;
    }

    #realisations .d1-4 .txtRealisation{
        visibility: visible !important;
        opacity: 1;
        max-width: 85%;
    }

    .fiche{
        max-width: calc(100% - 20px);
        margin-left: 10px;
        margin-right: 10px;
    }

    .diapoGros, .diapoPetit{
        display:none !important;
    }

    .diapoMobile{
        display:block !important;
        width:calc(100% + 20px);
    }

    .section .titre-page{
        display:none;
    }

    .sliderArrow{
        display:none;
    }

    .fiche .diaporama-slider, .fiche .sliderRealisationsMobile{
        float: unset !important;
        width:100% !important;
        height: auto !important;
        margin-left: 0 !important;
        display: flex !important;
        justify-content: center;
    }

    .slick-list.draggable {
        width:100%;
        box-sizing:border-box;
    }

    .slick-slide{
        margin:5px;
    }
    
    .infos-bureaux .bureau {box-sizing:border-box;width:100%;padding:80px;}
    .bouton-nav {
        width: 60px;
        height: 60px;
        padding: 14px;
    }
    .infos-bureaux {width:100%;padding-bottom:0px;}
    
    .navigation .quick-access {
        width: 60px;
        padding: 0px 12px;
        padding-top: 10px;
    }
    
    nav:before {left:60px;}
    .navigation nav {height:calc(100vh - 60px)}
}
@media screen and (max-width:600px) {
    #nous-joindre-formulaire form .champs > div {width:100%;}
    
    .bouton-nav:before, .bouton-nav:after, .bouton-nav span {
        height: 6px;
        width: 100%;
    }

    .navigation .menu-lg {
        font-size: 16px;
        width: 25px;
        height: 25px;
    }
    
    .navigation .titre-site img {height:100%;width:auto;}
    
    .navigation .menu-lg {margin-top:10px;}
    
    .navigation nav {
        display: flex;
        box-sizing: border-box;
        min-width: 100%;
        position: fixed;
        top: 60px;
        bottom: 0px;
        transform: translateY(calc(-100% - 60px));
        height:auto;
    }
    
    .navigation.opened nav {
        transform: translateY(0%);
    }
    
    nav ul.pages, .navigation .quick-access {
        overflow-y:auto;
    }
    
    nav:before {
        content: "";
        position: absolute;
        left: 60px;
        right: 0px;
        top: -60px;
        bottom: 100%;
        background: black;
    }
    .header-spacer {height:60px;}
}
@media (max-width: 480px) {
    .accueil .sect_3{
        padding-left:0%;
    }
}