.map {
    overflow: hidden;
}

.map__image {
    margin-right: auto;
    margin-left: auto;
    display: block;
    float:left;
    width: 50%;
}


.map__image path {
    fill: #103D82;
    stroke: #fff;
    stroke-width: 2px;
    transition: fill 0.3s;
}

.map__image.tourisme path {
    fill: #d5872e;
    stroke: #fff;
    stroke-width: 2px;
    transition: fill 0.3s;
}

.map__image.eau path {
    fill: #2596aa;
    stroke: #fff;
    stroke-width: 2px;
    transition: fill 0.3s;
}

.map__image.eau path.grise {
    fill: #d6d6d6;
}

.map__image.eau path.commune {
    stroke-dasharray: 5;
}

.map__image .is-active path {
    fill: #efefef;
}

.map__image a:hover {
    cursor: pointer;
}

.map__list {
    column-count: 2;
    float:right;
    width: 50%;
}

.map__list ul  {
    list-style-type:circle;
}


.map__list  a{
    text-decoration: none;
    color: inherit;
    transition: color 0.3s;
    
}


.map__list a.is-active {
    color: #103D82;
    font-weight: bold;
}


.map__list.tourisme a.is-active {
    color: #d5872e;
    font-weight: bold;
}

.map__list.eau a.is-active {
    color: #2596aa;
    font-weight: bold;
}



@media screen and (max-width: 768px) {
  .map {
    overflow: hidden;
    display:flex;
    flex-direction: column;
    align-items: center;
      }

   .map__image {
    width: 80%;
   }


   .map__list {
    width: 100%;
    }
}

@media screen and (max-width: 420px) {
 
   .map__list {
     display: none;
    }

    .liste_deroulante {display:block; margin-right:auto; margin-left:auto;}
}