section{
    display: flex;
}

.mapSVG{
    width: 50%;
    height: auto;
    max-width: 950px;
    max-height: 900px;
}

svg{
    max-height: 900px;
}

.mapList{
    padding-left: 30px;
    width: 50%;
    height: auto;
    max-height: 900px;
    font-family: 'arial';
}

.image{
    max-height: 740px;
}

path {
    stroke: #ffffff;
    stroke-width: 0.5px;
}

 /* Auvergne-Rhone-Alpes */
.Auvergne-Rhone-Alpes {
    fill: #7ab6fa;
    transition: fill 0.2s;
}
.Auvergne-Rhone-Alpes:hover {
    fill: #a0cbfc;
}
.Auvergne-Rhone-Alpes.active {
    fill: #a0cbfc;
}

/* Bourgogne-Franche-Comte */
.Bourgogne-Franche-Comte {
    fill: #FFCCFF;
    transition: fill 0.2s;
}
.Bourgogne-Franche-Comte:hover {
    fill: #fde3fd;
}
.Bourgogne-Franche-Comte.active {
    fill: #fde3fd;
}

/* Centre-Val-de-Loire */
.Centre-Val-de-Loire {
    fill: #BDB76B;
    transition: fill 0.2s;
}
.Centre-Val-de-Loire:hover {
    fill: #e0db91;
}
.Centre-Val-de-Loire.active {
    fill: #e0db91;
}

/* Bretagne */
.Bretagne {
    fill: #FFA07A;
    transition: fill 0.2s;
}
.Bretagne:hover {
    fill: #fac3ad;
}
.Bretagne.active {
    fill: #fac3ad;
}

/* Grand-Est */
.Grand-Est {
    fill: #f7f778;
    transition: fill 0.2s;
}
.Grand-Est:hover {
    fill: #fafab8;
}
.Grand-Est.active {
    fill: #fafab8;
}

/* Hauts-de-France */
.Hauts-de-France {
    fill: #e0a50d;
    transition: fill 0.2s;
}
.Hauts-de-France:hover {
    fill: #ebc76b;
}
.Hauts-de-France.active {
    fill: #ebc76b;
}

/* Ile-de-France */
.Ile-de-France {
    fill: #3CB371;
    transition: fill 0.2s;
}
.Ile-de-France:hover {
    fill: #88daac;
}
.Ile-de-France.active {
    fill: #88daac;
}

/* Normandie */
.Normandie{
    fill: #BA55D3;
    transition: fill 0.2s;
}
.Normandie:hover{
    fill: #dfa6ee;
}
.Normandie.active{
    fill: #dfa6ee;
}

/* Nouvelle-Aquitaine */
.Nouvelle-Aquitaine{
    fill: #92D050;
    transition: fill 0.2s;
}
.Nouvelle-Aquitaine:hover{
    fill: #b9ee81;
}
.Nouvelle-Aquitaine.active{
    fill: #b9ee81;
}

/* Occitanie */
.Occitanie{
    fill: #FF1493;
    transition: fill 0.2s;
}
.Occitanie:hover{
    fill: #fa6cb8;
}
.Occitanie.active{
    fill: #fa6cb8;
}

/* Pays-de-la-Loire */
.Pays-de-la-Loire{
    fill: #365CFC;
    transition: fill 0.2s;
}
.Pays-de-la-Loire:hover{
    fill: #738efa;
}
.Pays-de-la-Loire.active{
    fill: #738efa;
}

/* Provence-Alpes-Cote */
.Provence-Alpes-Cote{
    fill: #f1525a;
    transition: fill 0.2s;
}
.Provence-Alpes-Cote:hover{
    fill: #f18e8e;
}
.Provence-Alpes-Cote.active{
    fill: #f18e8e;
}

/* Corse */
.Corse{
    fill: #a9fce0;
    transition: fill 0.2s;
}
.Corse:hover{
    fill: #d0faec;
}
.Corse.active{
    fill: #d0faec;
}

@media screen and (max-width: 1600px) {
    section {
        flex-wrap: wrap;
    }
    .mapSVG{
        width: 100%;
        height: auto;
    }
    .mapList{
        width: 100%;
        
    }
}