/* =====================================================
   APELL ELEC - CARTE INTERACTIVE ALSACE
=====================================================*/

.apell-map{

    position:relative;
    width:100%;
    max-width:1000px;
    margin:auto;

}

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

.apell-map-image{

    width:100%;
    display:block;
    height:auto;
    user-select:none;

}

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

.apell-overlay{

    position:absolute;

    top:0;
    left:0;

    width:100%;
    height:100%;

}

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

/* POINTS VERTS */

.apell-point{

    position:absolute;

    width:18px;
    height:18px;

    border-radius:50%;

    background:#4c8f2b;

    border:3px solid #ffffff;

    cursor:pointer;

    transform:translate(-50%,-50%);

    box-shadow:
        0 3px 8px rgba(0,0,0,.25);

    transition:
        transform .18s ease,
        background .18s ease,
        box-shadow .18s ease;

    z-index:20;

}

.apell-point:hover{

    transform:translate(-50%,-50%) scale(1.35);

    background:#2d6d14;

    box-shadow:
        0 8px 18px rgba(0,0,0,.30);

}

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

/* POINT HILSENHEIM */

.apell-here{

    background:#ff1e1e;

    animation:
        apellPulse 1.6s infinite;

}

@keyframes apellPulse{

    0%{

        transform:translate(-50%,-50%) scale(1);

        box-shadow:
        0 0 0 0 rgba(255,0,0,.45);

    }

    70%{

        transform:translate(-50%,-50%) scale(1.15);

        box-shadow:
        0 0 0 18px rgba(255,0,0,0);

    }

    100%{

        transform:translate(-50%,-50%) scale(1);

        box-shadow:
        0 0 0 0 rgba(255,0,0,0);

    }

}

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

/* POPUP */

#apell-popup{

    position:absolute;

    display:none;

    width:230px;

    background:white;

    border-radius:14px;

    padding:18px;

    box-shadow:

    0 20px 40px rgba(0,0,0,.18);

    border:1px solid #e6e6e6;

    z-index:999;

    pointer-events:none;

}

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

#apell-ville{

    display:block;

    font-size:24px;

    color:#3f8a29;

    font-weight:700;

    margin-bottom:10px;

}

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

#apell-popup span{

    display:block;

    font-size:15px;

    color:#444;

    line-height:24px;

}

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

/* petite flèche */

#apell-popup:after{

    content:"";

    position:absolute;

    bottom:-12px;

    left:35px;

    width:22px;

    height:22px;

    background:white;

    transform:rotate(45deg);

    border-right:1px solid #e6e6e6;

    border-bottom:1px solid #e6e6e6;

}

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

/* effet apparition */

.apell-popup-visible{

    display:block !important;

    animation:popupAppear .18s ease;

}

@keyframes popupAppear{

    from{

        opacity:0;

        transform:translateY(12px);

    }

    to{

        opacity:1;

        transform:translateY(0px);

    }

}

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

/* Responsive */

@media(max-width:900px){

#apell-popup{

    width:180px;

    padding:14px;

}

#apell-ville{

    font-size:18px;

}

#apell-popup span{

    font-size:13px;

}

.apell-point{

    width:15px;
    height:15px;

}

}

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

/* cache le popup sur téléphone */

@media(max-width:768px){

#apell-popup{

    display:none !important;

}

}