:root{
    --primary: #71cc98;
    --secondary: #343285;
    --dark: #151515;
    --white: #ffffff;
    --font-family: "Source Sans Pro";
}

/* Container map Leaflet */
#interactive-map {
    min-height: 70vh;
    width: 100vw;
    left: 50%;
    margin-bottom: 6rem;
    transform: translateX(-50%);
}

/* Liens */
#interactive-map a {
    text-decoration: none;
    outline: none;
}

/* stars */
#interactive-map .c-icon {
    --star-active: var(--primary);
    --star-inactive: #b9b8b4!important;
    fill: var(--star-inactive);
}

#interactive-map .c-icon.active {
    fill: var(--star-active)!important;
}

use {
    &:nth-child(2) {
        transform: translate(20px);
    }

    &:nth-child(3) {
        transform: translate(40px);
    }

    &:nth-child(4) {
        transform: translate(60px);
    }

    &:nth-child(5) {
        transform: translate(80px);
    }
}

#interactive-map .rating {
    width: 100px;
    height: 20px;
}

/* Pop up interactive */
#interactive-map .leaflet-popup-pane{
    margin-left: 1.25rem;
}

#interactive-map .interactive-popup-content{
    font-family: var(--font-family);
}

#interactive-map .interactive-map-popup{
    display: block;
    min-width: 250px;
    border-radius: 20px;
    box-shadow: 0px 3px 9px 0px #afaeae3f;
}

#interactive-map .leaflet-popup-content-wrapper{
    padding: unset;
}

#interactive-map .interactive-map-popup .leaflet-popup-content{
    margin: unset;
}

#interactive-map .interactive-popup-content{
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    padding: 8px 15px;
    border-bottom-left-radius: 12px;
    border-bottom-right-radius: 12px;
    background: var(--white);
}

#interactive-map .leaflet-popup-content p{
    margin: unset;
}

#interactive-map .interactive-popup-content .interactive-map-popup-note{
    display: inline-flex;
    align-items: center;
}

#interactive-map .interactive-popup-content .interactive-map-popup-note p {
    margin-left: 0.25rem;
    font-size: 0.9375rem;
}

#interactive-map .interactive-map-popup .interactive-map-popup-image {
    border-top-left-radius: 12px;
    border-top-right-radius: 12px;
    overflow: hidden;
}

#interactive-map .interactive-map-popup .interactive-map-popup-image img{
    aspect-ratio: 16 / 9;
    width: 100%;
    height: auto;
    object-fit: cover;
}

#interactive-map .interactive-map-popup-title h3 a{
    margin-bottom: unset;
    color: var(--primary);
    font-size: 1.125rem;
    font-weight: 700;
    text-transform: uppercase;
}

#interactive-map .interactive-map-popup-title p{
    font-size: 1rem;
}

#interactive-map .interactive-map-popup-title p + h3{
    margin-top: 0.25rem;
}

/* Pop up Aire */
#interactive-map #interactive-map-popup-template_aire .interactive-map-popup-title h3 a{
    color: var(--secondary);
}

/* Image */
#interactive-map #interactive-map-popup-template_aire .interactive-map-popup-image{
    width: 100%;
    height: 110px;
    background-repeat: no-repeat;
    background-color: var(--secondary);
    background-image: url('data:image/svg+xml,<svg width="40" height="36" viewBox="0 0 66 60" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M33.8 30.9333C33.4 31.4667 32.6 31.4667 32.2 30.9333L10.2 1.6C9.70557 0.940764 10.176 0 11 0H55C55.824 0 56.2944 0.940764 55.8 1.6L33.8 30.9333Z" fill="white"/><path d="M3 35C9.66667 28.3333 16.3333 28.3333 23 35C29.6667 41.6667 36.3333 41.6667 43 35C49.6667 28.3333 56.3333 28.3333 63 35" stroke="white" stroke-width="8"/><path d="M3 51C9.66667 44.3333 16.3333 44.3333 23 51C29.6667 57.6667 36.3333 57.6667 43 51C49.6667 44.3333 56.3333 44.3333 63 51" stroke="white" stroke-width="8"/></svg>');
    background-position: center;
}

/* Fermer popup */
#interactive-map .leaflet-popup-close-button{
    top: 6px!important;
    right: 6px!important;
    border-radius: 100px;
    background: var(--white)!important;
    color: var(--primary)!important;
    font-size: 20px!important;
    font-weight: 600!important;
    transition: background 0.15s ease, color 0.15s ease;

    &:hover{
        background: var(--primary)!important;
        color: var(--white)!important;
    }
}

/* Marker cluster */
#interactive-map .marker-cluster > div{
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 5px 10px;
    font-size: 20px;
    font-weight: 700;
    color: var(--primary);
    border-radius: 100px;
    background: var(--white);
    box-shadow: 0px 0px 0px 8px rgba(255, 255, 255, 0.40);
}

#interactive-map .marker-cluster > div{
    transform: scale(1);
    will-change: transform;
    transition: transform 0.2s ease;
}

#interactive-map .marker-cluster:hover > div{
    transform: scale(1.2);
}