:root {
  --carte_bleu: #2399ef;
  --carte_vert: #75ad40;
}

#salles_map,
#salles_map > * {
    box-sizing: border-box;
}

#salles_map {
    position: relative;
    width: 100%;
    height: 732px;
    overflow: hidden;
    background-color: #fff;
    background-repeat: no-repeat;
    background-position: top 31% left;
    background-size: 120%;
    display: none;
    margin-bottom: 100px;
}

#salles_map.show {
    display: block !important;
}

#salles_map.sidebar_opened {
    background-size: 100%;
    background-position: top 31% left;
}

#salles_map.sidebar_transition {
    transition: all .3s ease;
}

#salles_map .carte_building {
    position: absolute;
    width: 543px;
    top: 137px;
    left: 554px;
    transition: all .3s ease;
}

#salles_map.sidebar_opened .carte_building {
    width: 451px;
    top: 152px;
    left: 462px;
}

#salles_map .carte_etages_selecteur {
    position: absolute;
    width: 394px;
    top: 28px;
    left: 22px;
}

#salles_map .carte_etages_selecteur select {
	-webkit-appearance: none;
	-moz-appearance: none;
	appearance: none;
	background-color: rgba(255,255,255,.85);
	background-repeat: no-repeat;
	background-size: 18px 9px;
	background-position: center right 9px;
	padding: 8px 36px 8px 12px;
    font-size: 21px;
    font-family: 'Lexend', sans-serif;
    line-height: 1.3;
    color: #000000;
    font-weight: 300;
    border: 0px solid #fff;
}

#salles_map .carte_etages_selecteur select::-ms-expand {
  display: none;
}

#salles_map .carte_building svg {
    width: 100%;
    height: auto;
}

#salles_map .carte_legende {
    background-color: rgba(255,255,255,.85);
    padding: 14px 9px;
    position: absolute;
    bottom: 22px;
    left: 22px;
    width: calc( 100% - 44px );
}

#salles_map .carte_legende_inner {
    width: 67%;
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(2, auto);
    grid-auto-columns: max-content;
    column-gap: 36px;
    row-gap: 12px;
}

#salles_map .carte_legende_item {
    text-align: left;
    display: flex;
    align-items: center;
    justify-content: flex-start;
    cursor: pointer;
    padding: 6px 9px;
    border-radius: 6px;
}

#salles_map .carte_legende_item_icon {
    width: 45px;
}

#salles_map .carte_legende_item_icon img {
    display: block;
    width: 36px;
    height: 36px;
}

#salles_map .carte_legende_item_titre {
    width: calc( 100% - 45px );
}

#salles_map .carte_legende_item_titre h4 {
    font-size: 19px;
    font-family: 'Lexend', sans-serif;
    line-height: 1;
    color: #000000;
    font-weight: 300;
    white-space: nowrap;
}

#salles_map .carte_sidebar {
    width: 450px;
    position: absolute;
    right: 0;
    top :0;
    height: 100%;
    background-color: #fff;
    box-shadow: -6px 0px 18px 0px rgba(0,0,0,.2);
    transform: translateX( calc( 100% + 18px ));
}

#salles_map.sidebar_transition .carte_sidebar {
    transition: all .3s ease;
}

#salles_map.sidebar_opened .carte_sidebar {
    transform: translateX( 0 );
}

#salles_map .carte_sidebar_item {
    padding: 99px 24px 24px 41px;
}

#salles_map .carte_sidebar_item {
    display: none;
}

#salles_map .carte_sidebar_item:first-child {
    display: block;
    padding: 0;
    height: 0;
}

#salles_map .carte_sidebar_close {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    opacity: .3;
    font-size: 36px;
    font-family: 'Lexend', sans-serif;
    line-height: 1;
    color: #000000;
    font-weight: 600;
}

#salles_map .carte_sidebar_close:hover {
    opacity: 1;
    cursor: pointer;
}

#salles_map .carte_sidebar_item_group {
    display: flex;
    flex-direction: column;
    row-gap: 17px;
    overflow: auto;
    height: 591px;
}

#salles_map .carte_sidebar_icon {
    width: 90px;
}

#salles_map .carte_sidebar_icon img {
    display: block;
    width: 100%;
    height: auto;
}

#salles_map .carte_sidebar_titre {
    font-size: 36px;
    font-family: 'Lexend', sans-serif;
    line-height: 1.1;
    color: #000000;
    font-weight: 600;
    /* margin: 17px 0; */
}

#salles_map .carte_sidebar_stats {
    row-gap: 4px;
    display: flex;
    flex-direction: column;
}

#salles_map .carte_sidebar_stats > div {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

#salles_map .carte_sidebar_capacite > img,
#salles_map .carte_sidebar_dimensions > img,
#salles_map .carte_sidebar_inclus > img,
#salles_map .carte_sidebar_ajout_payant > img {
    flex: 0 0 16px;
    width: 16px;
}

#salles_map .carte_sidebar_capacite > span,
#salles_map .carte_sidebar_dimensions > span,
#salles_map .carte_sidebar_inclus > span,
#salles_map .carte_sidebar_ajout_payant > span {
    flex: 0 0 calc(100% - 16px - 6px);
}

#salles_map .carte_sidebar_stats_info {
    font-size: 14px;
    font-family: 'Lexend', sans-serif;
    line-height: 1.3;
    color: #000000;
    font-weight: 300;
}

#salles_map .carte_sidebar_capacite .carte_sidebar_stats_info_type,
#salles_map .carte_sidebar_dimensions .carte_sidebar_stats_info_type {
    color: var(--carte_bleu);
    font-weight: 700;
}

#salles_map .carte_sidebar_inclus .carte_sidebar_stats_info_type,
#salles_map .carte_sidebar_ajout_payant .carte_sidebar_stats_info_type {
    color: var(--carte_vert);
    font-weight: 700;
}

#salles_map .carte_sidebar_texte {
    font-size: 14px;
    font-family: 'Lexend', sans-serif;
    line-height: 1.3;
    color: #000000;
    font-weight: 300;
}

#salles_map .carte_sidebar_btn_shadow {
    display: inline-block;
    border-radius: 100vw;
    border: 1px solid #000;
    background-color: #729754;
    margin: 4px 0 0 4px;
    transition: all .3s ease;
}

#salles_map .carte_sidebar_btn_shadow a {
    display: inline-block;
    padding: 18px 43px;
    border-radius: 100vw;
    border: 1px solid #000;
    background-color: #ace67c;
    color: #000;
    font-size: 16px;
    font-family: 'Lexend', sans-serif;
    line-height: 1.1;
    font-weight: 400;
    transform: translate(-4px, -4px);
    transition: all .3s ease;
}

#salles_map .carte_sidebar_btn_shadow:hover {
    background-color: #666666;
}

#salles_map .carte_sidebar_btn_shadow:hover a {
    background-color: #729754;
    color: #fff;
}

@media only screen and (max-width : 1699px) { /* container = 1400 */

    #salles_map {
        height: 582px;
        background-position: top 48% left;
        background-size: 110%;
    }

    #salles_map.sidebar_opened {
        background-size: 100%;
        background-position: top 48% left;
    }

    #salles_map .carte_building {
        width: 435px;
        top: 70px;
        left: 444px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 396px;
    top: 89px;
    left: 404px;
    }

    #salles_map .carte_legende {
        padding: 9px 6px;
    }

    #salles_map .carte_legende_inner {
        column-gap: 24px;
        row-gap: 9px;
    }

    #salles_map .carte_legende_item_titre h4 {
        font-size: 18px;
    }

    #salles_map .carte_sidebar_item {
        padding: 59px 24px 24px 41px;
    }

    #salles_map .carte_sidebar_icon {
        width: 70px;
    }

    #salles_map .carte_sidebar_item_group {
        height: 453px;
    }

    #salles_map .carte_sidebar_titre {
        font-size: 30px;
    }

}

@media only screen and (max-width : 1499px) { /* container = 1200 */

    #salles_map {
        height: 532px;
        background-position: top 48% left;
        background-size: 110%;
    }

    #salles_map.sidebar_opened {
        background-size: 100%;
        background-position: top 48% left;
    }

    #salles_map .carte_building {
        width: 373px;
        top: 76px;
        left: 381px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 340px;
        top: 91px;
        left: 346px;
    }

    #salles_map .carte_legende {
        padding: 9px 6px;
    }

    #salles_map .carte_legende_inner {
        column-gap: 12px;
        row-gap: 9px;
    }

    #salles_map .carte_legende_item_titre h4 {
        font-size: 16px;
    }

    #salles_map .carte_legende_item_icon {
        width: 40px;
    }

    #salles_map .carte_legende_item_icon img {
        width: 30px;
        height: 30px;
    }

    #salles_map .carte_etages_selecteur select {
        font-size: 18px;
    }

    #salles_map .carte_sidebar {
        width: 400px;
    }

    #salles_map .carte_sidebar_item {
        padding: 55px 20px 20px 30px;
    }

    #salles_map .carte_sidebar_icon {
        width: 70px;
    }

    #salles_map .carte_sidebar_item_group {
        height: 453px;
    }

    #salles_map .carte_sidebar_titre {
        font-size: 30px;
    }
}

@media only screen and (max-width : 1299px) { /* container = 1100 */

    #salles_map {
        height: 510px;
        background-position: top 57% left;
        background-size: 110%;
    }

    #salles_map.sidebar_opened {
        background-size: 100%;
        background-position: top 57% left;
    }

    #salles_map .carte_building {
        width: 342px;
        top: 69px;
        left: 349px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 311px;
        top: 89px;
        left: 317px;
    }

    #salles_map .carte_legende_item {
        padding: 3px 6px;
    }

    #salles_map .carte_legende_item_titre h4 {
        font-size: 14px;
    }

    #salles_map .carte_etages_selecteur {
        top: 15px;
        left: 15px;
    }

    #salles_map .carte_etages_selecteur select {
        background-size: 12px 6px;
        background-position: center right 6px;
        padding: 8px 24px 8px 12px;
        font-size: 16px;
    }

    #salles_map .carte_sidebar {
        width: 370px;
    }

    #salles_map .carte_sidebar_icon {
        width: 50px;
    }

    #salles_map .carte_sidebar_item_group {
        height: 433px;
    }

    #salles_map .carte_sidebar_titre {
        font-size: 24px;
    }
}

@media only screen and (max-width : 1199px) { /* container = 950 */

    #salles_map {
        height: 510px;
        background-position: top -82px left -50px;
        background-size: 130%;
    }

    #salles_map.sidebar_opened {
        background-size: 130%;
        background-position: top -82px left -200px;
    }

    #salles_map .carte_building {
        width: 349px;
        top: 60px;
        left: 306px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 348px;
        top: 60px;
        left: 157px;
    }

    #salles_map .carte_legende_inner {
        grid-template-rows: repeat(3, auto);
    }
}

@media only screen and (max-width : 991px) { /* container = 768 */

    #salles_map {
        height: 500px;
        background-position: top -89px left -100px;
        background-size: 150%;
        margin-bottom: 50px;
    }

    #salles_map.sidebar_opened {
        background-position: top -72px left -262px;
        background-size: 140%;
    }

    #salles_map .carte_building {
        width: 325px;
        top: 44px;
        left: 233px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 305px;
        top: 51px;
        left: 47px;
    }

    #salles_map .carte_legende {
        background-color: rgba(255, 255, 255, 1);
        padding: 14px 9px;
        position: absolute;
        bottom: 0;
        left: 0;
        width: 100%;
    }

    #salles_map .carte_legende_inner {
        grid-template-rows: repeat(4, auto);
    }

    #salles_map .carte_sidebar {
        width: 370px;
    }

}

@media only screen and (max-width : 799px) { /* container = 600 */


    #salles_map {
        height: 500px;
        background-position: top -67px left -151px;
        background-size: 172%;
    }

    #salles_map.sidebar_opened {
        background-position: top -67px left -151px;
        background-size: 172%;
    }

    #salles_map .carte_building {
        width: 292px;
        top: 51px;
        left: 146px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 292px;
        top: 51px;
        left: 146px;
    }


    #salles_map {
        height: 510px;
        background-position: top -96px left -190px;
        background-size: 190%;
    }

    #salles_map.sidebar_opened {
        background-position: top -96px left -190px;
        background-size: 190%;
    }

    #salles_map .carte_building {
        width: 322px;
        top: 35px;
        left: 139px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 322px;
        top: 35px;
        left: 139px;
    }

}

@media only screen and (max-width : 619px) { /* container = 480 */

    #salles_map {
        height: 580px;
        background-position: top -57px left -276px;
        background-size: 254%;
    }

    #salles_map.sidebar_opened {
        background-position: top -57px left -276px;
        background-size: 254%;
    }

    #salles_map .carte_building {
        width: 344px;
        top: 83px;
        left: 76px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 344px;
        top: 83px;
        left: 76px;
    }

    #salles_map .carte_sidebar {
        width: 100%;
    }

    #salles_map .carte_sidebar_item_group {
        height: 504px;
    }
}

@media only screen and (max-width : 519px) { /* container = 420 */

    #salles_map {
        height: 580px;
        background-position: top -51px left -298px;
        background-size: 284%;
        margin-bottom: 25px;
    }

    #salles_map.sidebar_opened {
        background-position: top -51px left -298px;
        background-size: 284%;
    }

    #salles_map .carte_building {
        width: 337px;
        top: 86px;
        left: 46px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 337px;
        top: 86px;
        left: 46px;
    }

}

@media only screen and (max-width : 479px) { /* container = 360 */

    #salles_map {
        height: 580px;
        background-position: top -14px left -255px;
        background-size: 284%
    }

    #salles_map.sidebar_opened {
        background-position: top -14px left -255px;
        background-size: 284%
    }

    #salles_map .carte_building {
        width: 289px;
        top: 103px;
        left: 40px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 289px;
        top: 103px;
        left: 40px;
    }

    #salles_map .carte_sidebar_item {
        padding: 55px 10px 10px 20px;
    }

    #salles_map .carte_sidebar_titre {
        font-size: 20px;
    }

    #salles_map .carte_sidebar_item_group {
        height: 515px;
    }

}

@media only screen and (max-width : 399px) { /* container = 300 */

    #salles_map {
        height: 576px;
        background-position: top -40px left -240px;
        background-size: 306%;
    }

    #salles_map.sidebar_opened {
        background-position: top -40px left -240px;
        background-size: 306%;
    }

    #salles_map .carte_building {
        width: 259px;
        top: 66px;
        left: 25px;
    }

    #salles_map.sidebar_opened .carte_building {
        width: 259px;
        top: 66px;
        left: 25px;
    }

    #salles_map .carte_sidebar_item_group {
        height: 475px;
    }

    #salles_map .carte_legende {
        padding: 9px;
    }

    #salles_map .carte_legende_inner {
        display: block;
    }

}