@import url('https://fonts.googleapis.com/css2?family=Roboto+Condensed&display=swap');


:root {
    --mapBkg: #a6a6a6;
    --boardBkg: #f5f5f5;
    --z: 0.2; /* zoom */
    --l: 50%; /* transformX */
    --t: 50%; /* transformY */
    --s: 100%; /* scale */
    --lateralMargin:5vw;
    --logo_w:calc(12vw + 16vh);
}


body{margin:0; overflow:hidden; font-family: 'Roboto Condensed', Helvetica, Arial, sans-serif; background:var(--mapBkg);}
.unselectable {-moz-user-select:-moz-none; -khtml-user-select:none; -webkit-user-select:none; -o-user-select:none; user-select:none; pointer-events:none; pointer-events:all;}

    #logo{z-index:100; cursor:pointer; position:absolute; left:var(--lateralMargin); top:5vh; width:var(--logo_w); height:calc(var(--logo_w) * 0.5); background: url(img_ico/logo.svg) center center no-repeat; padding:0; margin:0; z-index:100;}

    #mapZone{position:absolute; width:100%; height:84vh; left:0; top:0; overflow:hidden;}
        #map{background:rgba(255,255,255,0); position:absolute; width:calc(4500px * var(--z)); height:calc(3165px * var(--z)); right:calc(var(--l) - 2vw); bottom:var(--t); transform:translateX(50%) translateY(50%) scale(var(--s)); transform-origin:var(--l) var(--t);}
            #map .room{position:absolute; background-size:contain; background-repeat:no-repeat; transition:transform 1.2s, filter .3s;}
            #map .room.color{filter: contrast(1) sepia(0.65) brightness(1.05) saturate(2.2) hue-rotate(-18deg);}
            #map .room.up{transform:translateY(-10px);}
            #map .room.init{transform:translateY(-50px); opacity:0}
                #map .room span {transform:translateX(-50%) translateY(-280%); display:block; white-space:nowrap; position:absolute; padding:.2em .5em; left:50%; top:50%; background:#fff; border-radius:2px; opacity:0; transition:opacity .3s, transform .3s;}
                #map .room.title span{transform:translateX(-50%) translateY(-320%); opacity:1;}
                #map .room.top  span{transform:translateX(60%) translateY(-300%);}
                #map .room.top.title span{transform:translateX(70%) translateY(-330%);}
                #map .room.right  span{transform:translateX(60%) translateY(100%);}
                #map .room.right.title span{transform:translateX(80%) translateY(120%);}
                #map .room.bottom span{transform:translateX(-170%) translateY(220%);}
                #map .room.bottom.title span{transform:translateX(-190%) translateY(220%);}
                #map .room.left span{transform:translateX(-170%) translateY(-220%);}
                #map .room.left.title span{transform:translateX(-190%) translateY(-220%);}
                #map .room.middle span{transform:translateX(-50%) translateY(-130%);}
                #map .room.middle.title span{transform:translateX(-50%) translateY(-150%);}

                #mapZone svg{position:absolute; width:calc(4500px * var(--z)); height:calc(3165px * var(--z));}
                #mapZone svg.detect path {fill:transparent; cursor:pointer; }
                #mapZone svg.arrows polyline {fill:none;}

                .animated_circle{ left:calc(var(--left) * var(--z)); top:calc(var(--top) * var(--z)); opacity:0;
                    position:absolute; border:1px solid #fff; width:50px; height:50px; border-radius:50%; transform:translateX(-50%) translateY(-50%);
                    animation: animated_circle 1.8s infinite;
                }
                @keyframes animated_circle {
                    0% {
                        opacity: .6;
                        width: 0px;
                        height: 0px;
                        border-width: 3px;
                    }
                    100% {
                        opacity: 0;
                        width: 50px;
                        height: 50px;
                        border-width: 1px;
                    }
                }
                .room_name{ left:calc(var(--left) * var(--z)); top:calc(var(--top) * var(--z)); white-space:nowrap; font-size:0.7em;
                    position:absolute; background:#fff; color:#555; padding: .2em .5em;  border-radius:2px; transform:translateX(-50%) translateY(-50%);
                }



                
    #roomsBoard{background:var(--boardBkg); position:absolute; height:16vh; width:100%; left:0; bottom:0; padding:3vh var(--lateralMargin); display:flex; box-sizing:border-box;}
        #titleFloor{position:absolute; top:-2vh; left:calc(var(--lateralMargin) - 5px); height:30px; width:30px; font-size:calc(50px + 5vh); font-weight:400; color:#fff; opacity:.5; transform-origin:left top; transform:rotate(-90deg);}
        #mainInput,
        #mainTitle {position:absolute; top:calc(-2vh - 28px - 0.4vw); left:50%; height:30px; font-size:calc(22px + 0.8vw); font-weight:400; color:#fff; transform:translateX(-50%);}
        #mainTitle {display:none; background:var(--mapBkg); border-radius:4px; padding:0.3em 0.5em 0.5em 0.6em; transform:translateX(-50%) translateY(-20%); cursor:pointer; }
        body.zoom #mainTitle {background:rgba(255,255,255,1);}
        #mainTitle span{position:relative; display:inline-block; color:rgba(0,0,0,.4)}
        #mainTitle div{position:absolute; background:#fff; width:50px; height:50px; border-radius:50%; margin-right:5px; left:-40px; top:50%; transform:translateX(-50%) translateY(-50%);}
        #mainTitle div::after{content:''; display:block; position:absolute; top:0; left:0; width:100%; height:100%; background:url(img_ico/back.svg) center center no-repeat; opacity:.4; transition:opacity .3s}
        #mainTitle div:hover::after{opacity:.6}

        body.zoom  #mainTitle.only_back {background:transparent;}
        #mainTitle.only_back div{left:0px;}


        #roomsBoard .container{position:relative; width:100%; margin-bottom:2vh; display:flex; align-items:center; justify-content:center;}
            #roomsBoard .container .center{height:100%; position:relative; display:flex; align-items:center; justify-content:start;}
                #roomsBoard .container .col.floor0{width:50px;}
                #roomsBoard .container .col.floor1{width:150px;}
                    #roomsBoard .container .col.title{color:rgba(0,0,0,.2); border-right:1px solid rgba(0,0,0,.3);}
                    #roomsBoard .container .col.title span{display:block; position:absolute; right:0; transform-origin:100% 0%; transform:translateX(-1.3em) rotate(-90deg); font-size:2em;}

                #roomsBoard .container .col{position:relative; height:100%;}
                #roomsBoard .container .col a{position:relative; display:block; white-space:nowrap; margin:0 0.4vw 0.25vh 0.2vw; padding:0 0.8em; text-decoration:none; font-size:.8em; color:#5e5a53;transition:all .3s; box-sizing:border-box; cursor:pointer;}
                #roomsBoard .container .col a span{display:inline-block; padding:.3em 0.7em; border-radius:2em; transition:all .3s;}
                #roomsBoard .container .col a:hover span{color:#fff; background:rgba(0,0,0,0.2);}
                #roomsBoard .container .col a.active span{color:#fff; background:rgba(0,0,0,0.4);}
                
                #roomsBoard .container .no_btn a span{text-decoration:line-through; color:#e0e0e0;}
                #roomsBoard .container .no_btn a:hover span{background:inherit; color:#e0e0e0; cursor:default}


            #hall{background-image:url(img-assets/M/hall_rez_2934x2241-825x528.png);
                width:calc(2934px * var(--z));
                height:calc(2241px * var(--z));
                left:calc(825px * var(--z));
                top:calc(528px * var(--z));}
            #corner1{background-image:url(img-assets/M/corner1_635x545-1474x0.png);
                width:calc(635px * var(--z));
                height:calc(545px * var(--z));
                left:calc(1474px * var(--z));
                top:calc(0px * var(--z));}
            #auditorium{background-image:url(img-assets/M/auditorium_1349x1185-483x71.png);
                width:calc(1349px * var(--z));
                height:calc(1185px * var(--z));
                left:calc(483px * var(--z));
                top:calc(71px * var(--z));}
            #corner2{background-image:url(img-assets/M/corner2_624x749-228x841.png);
                width:calc(624px * var(--z));
                height:calc(749px * var(--z));
                left:calc(228px * var(--z));
                top:calc(841px * var(--z));}
            #chambre5{background-image:url(img-assets/M/chambre5_931x815-1820x7.png);
                width:calc(931px * var(--z));
                height:calc(815px * var(--z));
                left:calc(1820px * var(--z));
                top:calc(7px * var(--z));}
            #chambre6{background-image:url(img-assets/M/chambre6_935x827-2195x274.png);
                width:calc(935px * var(--z));
                height:calc(827px * var(--z));
                left:calc(2195px * var(--z));
                top:calc(274px * var(--z));}
            #chambre7{background-image:url(img-assets/M/chambre7_946x842-2572x545.png);
                width:calc(946px * var(--z));
                height:calc(842px * var(--z));
                left:calc(2572px * var(--z));
                top:calc(545px * var(--z));}
            #bergieres14B{background-image:url(img-assets/M/bergieres14B_957x856-2957x823.png);
                width:calc(957px * var(--z));
                height:calc(856px * var(--z));
                left:calc(2957px * var(--z));
                top:calc(823px * var(--z));}
            #bergieres14A{background-image:url(img-assets/M/bergieres14A_972x875-3351x1108.png);
                width:calc(972px * var(--z));
                height:calc(875px * var(--z));
                left:calc(3351px * var(--z));
                top:calc(1108px * var(--z));} 
            #pharmacie{background-image:url(img-assets/M/pharmacie_751x552-1449x503.png);
                width:calc(751px * var(--z));
                height:calc(552px * var(--z));
                left:calc(1449px * var(--z));
                top:calc(503px * var(--z));}
            #materiel{background-image:url(img-assets/M/materiel_536x534-1232x679.png);
                width:calc(536px * var(--z));
                height:calc(534px * var(--z));
                left:calc(1232px * var(--z));
                top:calc(679px * var(--z));} 
            #bureau_infirmier{background-image:url(img-assets/M/bureau_infirmier_572x562-981x836.png);
                width:calc(572px * var(--z));
                height:calc(562px * var(--z));
                left:calc(981px * var(--z));
                top:calc(836px * var(--z));} 
            #chambre4{background-image:url(img-assets/M/chambre4_1021x894-203x1112.png);
                width:calc(1021px * var(--z));
                height:calc(894px * var(--z));
                left:calc(203px * var(--z));
                top:calc(1112px * var(--z));}
            #chambre3{background-image:url(img-assets/M/chambre3_1019x909-582x1404.png);
                width:calc(1019px * var(--z));
                height:calc(909px * var(--z));
                left:calc(582px * var(--z));
                top:calc(1404px * var(--z));}
            #chambre2{background-image:url(img-assets/M/chambre2_1025x925-961x1701.png);
                width:calc(1025px * var(--z));
                height:calc(925px * var(--z));
                left:calc(961px * var(--z));
                top:calc(1701px * var(--z));}
            #chambre1{background-image:url(img-assets/M/chambre1_1032x988-1349x2004.png);
                width:calc(1032px * var(--z));
                height:calc(988px * var(--z));
                left:calc(1349px * var(--z));
                top:calc(2004px * var(--z));}
            #corner3{background-image:url(img-assets/M/corner3-top_909x851-1881x2314.png);
                width:calc(909px * var(--z));
                height:calc(851px * var(--z));
                left:calc(1881px * var(--z));
                top:calc(2314px * var(--z));}
            #chambre1_coin{background-image:url(img-assets/M/chambre1_coin_67x235-1876x2701.png);
                width:calc(67px * var(--z));
                height:calc(235px * var(--z));
                left:calc(1876px * var(--z));
                top:calc(2701px * var(--z));}
            #escalier_ombre{background-image:url(img-assets/M/escalier_ombre_842x737-2444x1416.png);
                width:calc(842px * var(--z));
                height:calc(737px * var(--z));
                left:calc(2444px * var(--z));
                top:calc(1416px * var(--z));}
            #escalier{background-image:url(img-assets/M/escalier_905x2502-2611x1420.png);
                width:calc(905px * var(--z));
                height:calc(2502px * var(--z));
                left:calc(2611px * var(--z));
                top:calc(1420px * var(--z));}
            #debriefing3{background-image:url(img-assets/M/debriefing3_520x532-3118x1750.png);
                width:calc(520px * var(--z));
                height:calc(532px * var(--z));
                left:calc(3118px * var(--z));
                top:calc(1750px * var(--z));}
            #debriefing2{background-image:url(img-assets/M/debriefing2_509x512-2903x1944.png);
                width:calc(509px * var(--z));
                height:calc(512px * var(--z));
                left:calc(2903px * var(--z));
                top:calc(1944px * var(--z));}
            #debriefing1{background-image:url(img-assets/M/debriefing1_524x541-2653x2117.png);
                width:calc(524px * var(--z));
                height:calc(541px * var(--z));
                left:calc(2653px * var(--z));
                top:calc(2117px * var(--z));}
            #reception{background-image:url(img-assets/M/reception_804x695-2944x1968.png);
                width:calc(804px * var(--z));
                height:calc(695px * var(--z));
                left:calc(2944px * var(--z));
                top:calc(1968px * var(--z));}



/* main Menu */
#mainMenu{position:absolute;width:50px; height:50px; top:50px; right:50px; display:flex; flex-direction:column; justify-content:start; align-items:end;}
    #mainMenu #ico {transition:all .4s; position:absolute; top:0; right:0; height:30px; width:35px; cursor:pointer; display:flex; flex-direction:column; justify-content:space-between; align-items:center;}
    #mainMenu #ico span {display:block; height:3px; width:90%; background:rgba(255,255,255,1);}
    #mainMenu:hover #ico {opacity:0; height:90px; visibility:hidden;}

    #mainMenu > div.p{position:relative; transition:all .3s; opacity:0; width:150px; cursor:pointer;}
    #mainMenu:hover > div.p{opacity:1;}

    #mainMenu > .p div.btn-flip{width:100%; line-height:40px; letter-spacing:0.1em; font-size:calc(0.7em + 0.1vw); margin-bottom:10px;}
    #mainMenu > .p div.btn-flip:before{line-height:20px;}
    #mainMenu:hover > .p div.btn-flip:before{line-height:40px;}


    .p .btn-flip {opacity:1;outline:0;color:#fff;position:relative;text-align:center;display:inline-block;text-transform:uppercase; cursor:pointer; transition:0.3s;}
    .p .btn-flip::before{background:rgba(250,250,250,0.25); top:0;left:0;opacity:1;color:#333;display:block;padding:0 calc(0.4em + 0.8vw);transition:.3s;position:relative;content:attr(data-front);transform:translateY(0) rotateX(0)}

    .imap:hover::before{background:#e3be92;}
    .ilab:hover::before{background:#72a789;}
    .ispace:hover::before{background:#4b96b5;}
    .btn-flip:hover::before{color:#fff; font-weight:bold;}

    #mainMenu .p.active:before {background:#fff; width:2px; position:absolute; top:0; height:calc(100% - 10px); left:-8px; content:''; display:block;}