.f1078404_fond {
    background: url("https://www.quartierlewa.com/wp-content/uploads/2025/01/Logo-LEWA-_page-0001-removebg-preview.png")
        no-repeat center;
    border-radius: 80px;
    width: 100px;
}

.f1078404 {
    border-top: 10px solid #9e6b15;
    border-right: 10px solid #9e6b15;
    border-bottom: 10px solid #9e6b15;
    border-left: 10px solid #9e6b15;
    -webkit-animation: anim_wifeo 1.4s infinite linear;
    -moz-animation: anim_wifeo 1.4s infinite linear;
    -ms-animation: anim_wifeo 1.4s infinite linear;
    -o-animation: anim_wifeo 1.4s infinite linear;
    animation: anim_wifeo 1.4s infinite linear;
}

.f1078404_sup {
    border-radius: 100px;
    width: 100px;
    height: 100px;
    border-top: 5px solid #9e6b15;
    border-right: 5px solid #9e6b15;
    border-bottom: 5px solid #9e6b15;
    border-left: 5px solid #000000;
    -webkit-animation: anim 1.4s infinite linear;
    -moz-animation: anim 1.4s infinite linear;
    -ms-animation: anim 1.4s infinite linear;
    -o-animation: anim 1.4s infinite linear;
    animation: anim 1.4s infinite linear;
}

.f1078404,
.f1078404:after {
    border-radius: 80px;
    width: 80px;
    height: 80px;
}

@-webkit-keyframes anim_wifeo {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(360deg) scale(1);
        -moz-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
        -ms-transform: rotate(720deg) scale(0.8);
        transform: rotate(720deg) scale(0.8);
    }
}

@-webkit-keyframes anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1);
        -moz-transform: rotate(180deg) scale(1);
        -ms-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(0.8);
        -moz-transform: rotate(360deg) scale(0.8);
        -ms-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

@-moz-keyframes anim_wifeo {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(360deg) scale(1);
        -moz-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
        -ms-transform: rotate(720deg) scale(0.8);
        transform: rotate(720deg) scale(0.8);
    }
}

@-moz-keyframes anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1);
        -moz-transform: rotate(180deg) scale(1);
        -ms-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(0.8);
        -moz-transform: rotate(360deg) scale(0.8);
        -ms-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

@-ms-keyframes anim_wifeo {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(360deg) scale(1);
        -moz-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
        -ms-transform: rotate(720deg) scale(0.8);
        transform: rotate(720deg) scale(0.8);
    }
}

@-ms-keyframes anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1);
        -moz-transform: rotate(180deg) scale(1);
        -ms-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(0.8);
        -moz-transform: rotate(360deg) scale(0.8);
        -ms-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

@keyframes anim_wifeo {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(360deg) scale(1);
        -moz-transform: rotate(360deg) scale(1);
        -ms-transform: rotate(360deg) scale(1);
        transform: rotate(360deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(720deg) scale(0.8);
        -moz-transform: rotate(720deg) scale(0.8);
        -ms-transform: rotate(720deg) scale(0.8);
        transform: rotate(720deg) scale(0.8);
    }
}

@keyframes anim {
    0% {
        -webkit-transform: rotate(0deg) scale(0.8);
        -moz-transform: rotate(0deg) scale(0.8);
        -ms-transform: rotate(0deg) scale(0.8);
        transform: rotate(0deg) scale(0.8);
    }

    50% {
        -webkit-transform: rotate(180deg) scale(1);
        -moz-transform: rotate(180deg) scale(1);
        -ms-transform: rotate(180deg) scale(1);
        transform: rotate(180deg) scale(1);
    }

    100% {
        -webkit-transform: rotate(360deg) scale(0.8);
        -moz-transform: rotate(360deg) scale(0.8);
        -ms-transform: rotate(360deg) scale(0.8);
        transform: rotate(360deg) scale(0.8);
    }
}

#legende {
    background-color: #fff;
    padding: 2%;
    border: 1px solid #ebe4db;
}

#legende a {
    font-family: "Poppins", sans-serif;
    font-size: 14px;
    color: #6b666c;
    display: block;
    padding-top: 5px;
    padding-bottom: 5px;
    border-bottom: 1px solid #e4d4ca;
    text-decoration: none;
    padding-left: 5px;
    padding-right: 5px;
}

#legende a:hover {
    background-color: #ede4de;
}

#svgContainer {
    /* height: 50vh; */
    position: relative;
    border: 1px solid #ddd;
    flex-grow: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Loader styling if needed */
/* .loader {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    border: 16px solid #f3f3f3;
    border-top: 16px solid #3498db;
    border-radius: 50%;
    width: 120px;
    height: 120px;
    animation: spin 2s linear infinite;
} */

@keyframes spin {
    0% {
        transform: rotate(0deg);
    }

    100% {
        transform: rotate(360deg);
    }
}

.marker {
    pointer-events: none;
    fill: red;
}

.green {
    fill: green !important;
}

.orange {
    fill: orange !important;
}

.red {
    fill: red !important;
}

.blue {
    fill: blue !important;
}

/* @media (min-width: 768px) {
    #legende {
        width: 25%;
    }

    #svgContainer {
        width: 75%;
        height: 100vh;
    }
} */

.highlight {
    stroke: red;
    stroke-width: 3px;
}

/* Website */
:root {
    --ql-gradient: linear-gradient(
        90deg,
        #c48a1d 0%,
        #9e6b15 30%,
        #805611 60%,
        #5a3b0d 100%
    );
}