.menu-lieux-desservis {
    color: var(--color2);
    text-decoration: underline;
    text-underline-offset: 30px;
}

.zone-title {
    width: 100%;
    text-align: center;
    color: white;
    display: flex;
    justify-content: center;
    vertical-align: middle;
}

.zone-title img {
    margin: 0 1%;
    width: 40px;
}

.zone-title img:first-child {
    transform: rotate(-10deg);
}

.zone-title img:last-child {
    transform: rotate(10deg);
}

.zone {
    display: flex;
    margin: 60px auto;
    background-image: url(../images/zone.jpg);
    background-size: 100%;
    background-repeat: no-repeat;
    background-position: 50% 50%;
    height: 693px;
    width: 1347px;
    transform: scale(100%);
    z-index: 1;
    cursor: pointer;
    user-select: none;
    animation: spawnZone 2s ease;
}

@keyframes spawnZone {
    from {
      transform: scale(0);
    }
    to {
      transform: scale(1);
    }
}

.zone::before {
    content: "";
    width: 100px;
    height: 100px;
    transform: translate(-10px, -10px);
    z-index: -1;
    border: 10px white solid;
    border-right: none;
    border-bottom: none;  
    border-radius: 5px;
}

.zone::after {
    content: "";
    width: 100px;
    height: 100px;
    transform: translate(calc(1347px - 2*100px + 10px), -10px);
    z-index: -1;
    border: 10px white solid;
    border-left: none;
    border-bottom: none;  
    border-radius: 5px;
}

.zone-bis {
    position: absolute;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.zone-bis::before {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    transform: translate(-10px, calc(693px - 100px + 10px));
    z-index: -1;
    border: 10px white solid;
    border-right: none;
    border-top: none;  
    border-radius: 5px;
}

.zone-bis::after {
    position: absolute;
    content: "";
    width: 100px;
    height: 100px;
    transform: translate(calc(1347px - 100px + 10px), calc(693px - 100px + 10px));
    z-index: -1;
    border: 10px white solid;
    border-left: none;
    border-top: none; 
    border-radius: 5px;
} 

.zone button {
    all: unset;
    background-color: white;
    position: absolute;
    display: flex;
    width: 50px;
    height: 50px;
    font-size: 60px;
    justify-content: center;
    align-items: center;
    top: 40px;
    right: 40px;
    color: rgb(61, 61, 61);
    border-radius: 5px;
    border: solid 1px rgb(230, 230, 230);
}

button:hover {
    background-color: rgb(252, 252, 252);
    transform: scale(1.03);
}

button:active {
    background-color: rgb(245, 245, 245);
    transform: scale(0.97);
}

.zone button.zoom {
    font-size: 48px;
}

.zone button.dezoom {
    top: 100px;
    height: 40px;
    padding-bottom: 10px;
}

@media screen and (max-width:1000px) {
    .menu-lieux-desservis {
        color: red;
        text-decoration: unset;
    }

    .zone-title {
        font-size: 20px;
        margin-top: 5%;
    }

    .zone-title img {
        margin: 0 2%;
        transform: translateY(10px);
        width: 28px;
    }

    .zone {
        margin: 5% auto;
        width: 100%;
        height: 525px;
    }

    
    .zone::before {
        all: unset;
    }
    
    .zone::after {
        all: unset;
    }
    
    .zone-bis {
        all: unset;
    }
    
    .zone-bis::before {
        all: unset;
    }
    
    .zone-bis::after {
        all: unset;
    } 
    
    .zone button {
        all: unset;
        display: none;
    }
}

@media screen and (max-width: 500px) {
    .zone {
        margin: 0px auto;
        width: 100%;
        height: 300px;
    }

}