#bg{
    margin-bottom: 40px;
}#bg.bureau{
    background: #088d9a;
}#bg.fauteuil{
    background: #024c76;
}#bg.table_de_reunion{
    background: #8ec044;
}#bg.comptoire_d_accueil{
    background: #924248;
}#bg.rangement{
    background: #de761b;
}#bg img{
    width: 100%;
}
#bg .details{
    /*width: calc(var(--width) - 10%);*/
    margin: auto;
    width: var(--width);
}#bg h1{
    color: var(--white);
    font-family: "Trebuchet MS", Sans-serif;
    font-size: 29px;
    font-weight: 600;
    line-height: 29px;
    text-align: left;
    margin-bottom: 20px;
    margin-top: 10px;
}#bg.realisation h1{
    text-align: center;
    margin: 0;
    padding: 10px 0;
}#bg p{
    font-size: 14px;
    font-weight: 400;
    font-family: Helvetica, sans-serif;
    color: #fff;
    line-height: 25px;
}#bg{
    padding-bottom: 25px;
}#bg.realisation{
    padding-bottom: 1px;
    width: 100%;
}

.grid-article article .boxImage{
    width: 358px;
    height: 220px;
    position: relative;
    margin-bottom: 10px;
    border: 1px solid rgba(0, 0, 0, .3);
    border-radius: 5px;
}.grid-article.gamme-2 article .boxImage,
.grid-article.gamme-3 article .boxImage{
    width: 200px;
    height: 275px;
}.grid-article article img{
    position: absolute;
    width: 100%;
    height: 100%;
    object-fit: cover;
    border-radius: 5px;
}.grid-article article h4{
    font-size: 13.5px;
    font-family: var(--police-details);
    color: #262626;
    padding-bottom: 5px;
    padding-left: 5px;
}.grid-article article strong{
    font-weight: bold;
    font-size: 15px;
}.grid-article article .vote{
    display: flex;
    align-items: center;
    justify-content: flex-start;
    width: 100%;
    padding-left: 7px;
}.grid-article article{
    width: 360px;
    border-radius: 5px;
    transition: all .5s ease;
    padding-bottom: 7px;
}.grid-article.gamme-2 article,
.grid-article.gamme-3 article{
    width: 202px;
}.grid-article article:hover{
    box-shadow:  0 0 5px #26262662;
    transform: scale(.99);
    border-width: 2px;
    border-style: solid;
}.grid-article.gamme-2 article:hover,
.grid-article.gamme-3 article:hover{
    border-color: #024c76;
}.grid-article.table_de_reunion article:hover{
    border-color: #8ec044;
}.grid-article.comptoire_d_accueil article:hover{
    border-color: #924248;
}.grid-article.rangement article:hover{
    border-color: #de761b;
}.grid-article.bureau article:hover{
    border-color: #088d9a;
}.vote .fa{
    font-size: 20px;
}.fa-thumbs-up{
    color: #07bc4c;
}.fa-thumbs-down{
    color: #f44336;
}.is_like{
    margin-right: 10px;
}.is_like, .is_dislike{
    font-family: var(--police-details);
    color: #262626;
    font-size: 15px;
    cursor: pointer;
}.grid-article{
    width: var(--width);
    display: grid;
    grid-template-columns: repeat(auto-fill, 360px);
    grid-auto-flow: dense;
    grid-gap: 25px;
    justify-content: center;
    margin: auto;
}.grid-article.gamme-3{
    grid-template-columns: repeat(6, 200px);
}.grid-article.gamme-2{
    grid-template-columns: repeat(4, 200px);
    grid-gap: 50px;
    margin-bottom: 40px;
}
.nous-joindre{
    display: flex;
}
.contact{
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    width: var(--width);
    margin: auto;
}
.contact article{
    background: rgb(242, 242, 242);
    width: 567px;
    padding: 15px;
    border-radius: 20px;
}.contact h2{
    color: rgb(110, 193, 228);
    font-family: var(--police-details);
    font-weight: 600;
    font-size: 29px;
    line-height: 29px;
    text-align: center;
}.contact .map{
    height: 324px;
    padding: 5px;
    border: 1px solid rgb(216, 216, 216);
    border-radius: 10px;
    margin: 20px 0;
}.map iframe{
    width: 100%;
    height: 100%;
    border-radius: 0;
}.contact h3{
    color: rgb(35, 164, 85);
    font-family: var(--police-details);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    margin-bottom: 20px;
}.contact .tel-email-adresse{
    padding: 5px;
    background: rgb(219, 219, 219);
    border: 1px solid rgb(146, 146, 146);
    border-radius: 5px;
}.tel-email-adresse a{
    display: block;
    text-decoration: none;
    color: rgb(84, 89, 95);
    font-family: var(--police-details);
    font-size: 14px;
    font-weight: 400;
    line-height: 25.2px;
}.tel-email-adresse .fa{
    color: rgb(110, 193, 228);
    font-size: 18px;

}.contact form{
    margin-top: 20px;
}form .group{
    display: flex;
    flex-direction: column-reverse;
    margin-bottom: 20px;
}form .group.button{
    margin-bottom: 0;
}form label{
    color: rgb(146, 146, 146);
    font-family: var(--police-menu);
    font-size: 16px;
    font-weight: 700;
    line-height: 20.8px;
    margin-bottom: 4px;
}form input,
form textarea{
    height: 40px;
    border-radius: 2px;
    border: 1px solid rgb(204, 204, 204);
    font-family: var(--police-menu);
    font-size: 16px;
    font-weight: 400;
    resize: none;
}form textarea{
    height: 94px;
}form button{
    background: rgb(19, 175, 240);
    color: #fff;
    cursor: pointer;
    font-family: var(--police-menu);
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 1.2px;
    line-height: 12px;
    border: none;
    outline: none;
    padding: 10px 15px;
    width: fit-content;
}
@media all and (max-width: 1284px){
    .contact {
        justify-content: space-around;
    }.contact article{
        width: 40%;
    }
}
@media all and (max-width: 1280px){
    .grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 360px);
    }.grid-article.gamme-2 article,
    .grid-article.gamme-3 article {
        width: 169px;
    }.grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage {
        width: 169px;
    }.grid-article.gamme-3{
        grid-template-columns: repeat(6, 169px);
        grid-gap: 19px;
    }.grid-article.gamme-2{
        grid-gap: 19px;
    }.grid-article{
        width: max-content;
    }.contact article {
        width: 44%;
    }
}@media all and (max-width: 1142px){
    .grid-article article,
    .grid-article article .boxImage{
        width: 340px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 342px);
        grid-gap: 15px;
    }
}@media all and (max-width: 1127px){
    .grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage {
        width: 170px;
        height: 270px;
    }.grid-article.gamme-3{
        grid-template-columns: repeat(3, 170px);
        grid-gap: 50px;
    }.grid-article.gamme-2{
        grid-template-columns: repeat(4, 170px);
        grid-gap: 15px;
    }.grid-article.gamme-2 article, .grid-article.gamme-3 article {
        width: max-content;
    }
}@media all and (max-width: 1122px){
    .grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage {
        width: 150px;
        height: 250px;
    }.grid-article.gamme-3{
        grid-template-columns: repeat(3, 150px);
        grid-gap: 50px;
    }.grid-article.gamme-2{
        grid-template-columns: repeat(4, 150px);
        grid-gap: 15px;
    }.grid-article.gamme-2 article, .grid-article.gamme-3 article {
        width: max-content;
    }
}@media all and (max-width: 1110px){
    .grid-article article .boxImage{
        width: 350px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 350px);
        grid-gap: 13px;
    }
    .grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage {
        width: 200px;
        height: 300px;
    }.grid-article.gamme-3{
        grid-template-columns: repeat(3, 200px);
        grid-gap: 50px;
    }.grid-article.gamme-2{
        grid-template-columns: repeat(4, 200px);
        grid-gap: 15px;
    }.grid-article.gamme-2 article, .grid-article.gamme-3 article {
        width: max-content;
    }.nous-joindre h2{
        margin-bottom: 10px;
    }.nous-joindre .lien{
        margin-top: 0;
    }
}@media all and (max-width: 1080px){
    .grid-article article,
    .grid-article article .boxImage{
        width: 310px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 312px);
        grid-gap: 15px;
    }
}@media all and (max-width: 1072px){
    .grid-article article,
    .grid-article article .boxImage{
        width: 320px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 322px);
        grid-gap: 15px;
    }
}@media all and (max-width: 1027px){
    .grid-article article .boxImage{
        width: 322px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 322px);
        grid-gap: 13px;
    }.grid-article article{
        width: max-content;
    }
}@media all and (max-width: 1006px){
    .grid-article article .boxImage{
        width: 313px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 313px);
        grid-gap: 13px;
    }
}@media all and (max-width: 1001px){
    .grid-article article .boxImage{
        width: 313px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 313px);
        grid-gap: 13px;
    }
}@media all and (max-width: 991px){
    .grid-article article{
        width: 270px;
    }
    .grid-article article .boxImage{
        width: 270px;
        height: 170px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(3, 270px);
        grid-gap: 13px;
    }.nous-joindre h2{
        margin-bottom: 10px;
        font-size: 20px;
    }.nous-joindre p{
        font-size: 12.5px;
    }
}@media all and (max-width: 901px){
    .grid-article article{
        width: 360px;
    }
    .grid-article article .boxImage{
        width: 360px;
        height: 222px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(2, 360px);
    }
}@media all and (max-width: 862px){
    .grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage {
        width: 170px;
        height: 270px;
    }.grid-article.gamme-3{
        grid-template-columns: repeat(3, 170px);
        grid-gap: 50px;
    }.grid-article.gamme-2{
        grid-template-columns: repeat(4, 170px);
        grid-gap: 15px;
    }.grid-article.gamme-2 article, .grid-article.gamme-3 article {
        width: max-content;
    }
}@media all and (max-width: 835px){
    .grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage{
        width: 200px;
        height: 275px;
    }.grid-article.gamme-2 article,
    .grid-article.gamme-3 article{
        width: 202px;
    }.grid-article.gamme-2{
        grid-template-columns: repeat(2, 200px);
        grid-gap: 50px;
    }.nous-joindre p{
        line-height: 20px;
    }.nous-joindre .lien{
        font-size: 13px;
        padding: 6px 12px;
    }
}@media all and (max-width: 746px){
    .grid-article article{
        width: 330px;
    }
    .grid-article article .boxImage{
        width: 330px;
        height: 190px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(2, 330px);
    }
}@media all and (max-width: 735px){
    .grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(1, 360px);
    }.contact article:nth-child(1) {
        margin-right: 10px;
    }.nous-joindre .lien{
        margin-top: 10px;
    }
}@media all and (max-width: 701px){
    .grid-article.gamme-2,
    .grid-article.gamme-3{
        grid-gap: 20px;
    }.grid-article.gamme-2 article .boxImage,
    .grid-article.gamme-3 article .boxImage{
        width: 171px;
        height: 275px;
    }.grid-article.gamme-2 article,
    .grid-article.gamme-3 article{
        width: 171px;
    }.grid-article.gamme-2{
        grid-template-columns: repeat(2, 200px);
        grid-gap: 50px;
    }
}@media all and (max-width: 638px){
    .grid-article.gamme-2,
    .grid-article.gamme-3{
        grid-template-columns: repeat(1, 200px);
    }.contact article:nth-child(1){
        margin-right: 0;
    }.contact article{
        width: 100%;
    }.contact article:nth-child(1) {
        margin-bottom: 20px;
    }.contact{
        flex-direction: column;
        align-items: center;
    }.nous-joindre h2{
        font-size: 18px;
        line-height: 26px;
    }
}@media all and (max-width: 557px){
    .nous-joindre .conteneur{
        width: 90%;
    }
    .nous-joindre h2,.nous-joindre p{
        width: 100%;
    }
}@media all and (max-width: 432px){
    .contact article{
        width: 90%;
    }
}@media all and (max-width: 417px){
    .contact article{
        width: 100%;
    }
}@media all and (max-width: 602px){
    #bg h1{
        font-size: 20px;
        line-height: 20px;
        margin-bottom: 10px;
    }#bg p{
        font-size: 13.5px;
        line-height: 20px;
    }
}@media all and (max-width: 387px){
    .grid-article article{
        width: 320px;
    }
    .grid-article article .boxImage{
        width: 320px;
        height: 202px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(1, 320px);
    }.nous-joindre h2{
        margin-bottom: 5px;
        line-height: 20px;
    }.nous-joindre .lien {
        margin-top: 0px;
    }.nous-joindre p{
        line-height: 20px;
    }
}@media all and (max-width: 351px){
    .grid-article article .boxImage{
        width: 330px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(1, 330px);
    }
}@media all and (max-width: 333px){
    .contact article{
        width: 90%;
    }
}@media all and (max-width: 320px){
    .grid-article article .boxImage{
        width: 290px;
        height: 152px;
    }.grid-article.bureau,
    .grid-article.comptoire_d_accueil,
    .grid-article.table_de_reunion,
    .grid-article.rangement{
        grid-template-columns: repeat(1, 290px);
    }
}