.map {
    display: flex;
    justify-content: center;
    max-height: 100%;
}

.map__image {
    width: 65%;
    float: left;
    float: right;
    height: 100%;
}

.departement {
    fill: #a4ced2;
    transition: 0,3s;
}

.departement:hover path {
    fill: #0076c0; /* Changer la couleur de <path> en noir au survol de <a> */
}

.departement:hover text {
    fill: white; /* Changer la couleur de <text> en blanc au survol de <a> */
}

.map__image text{
    fill: black;
    transition: 0,3s;
    font-size: 12px;
}

.map__image a{
    color: inherit;
    text-decoration: none;
    transition: 0,3s;
}


/* REGIONS COLORS */

.auvergne-rhone-alpes {
    fill: #C8A2C8;
    transition: 0,3s;
}

.auvergne-rhone-alpes:hover path {
    fill: #E6E6FA; /* Changer la couleur de <path> en noir au survol de <a> */
}

.auvergne-rhone-alpes:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* BOURGOGNE FRANCHE COMTÉ */
.bourgogne-franche-comté {
    fill: #00CED1;
    transition: 0,3s;
}

.bourgogne-franche-comté:hover path {
    fill: #AFEEEE; /* Changer la couleur de <path> en noir au survol de <a> */
}

.bourgogne-franche-comté:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* BRETAGNE */
.bretagne {
    fill: #8AE38A;
    transition: 0,3s;
}

.bretagne:hover path {
    fill: #B4F25A; /* Changer la couleur de <path> en noir au survol de <a> */
}

.bretagne:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* CENTRE VAL DE LOIRE */
.centre-val-de-loire {
    fill: #E76F51;
    transition: 0,3s;
}

.centre-val-de-loire:hover path {
    fill: #F4A261; /* Changer la couleur de <path> en noir au survol de <a> */
}

.centre-val-de-loire:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* CORSE */
.corse {
    fill: #FFBF00;
    transition: 0,3s;
}

.corse:hover path {
    fill: #FFDAB9; /* Changer la couleur de <path> en noir au survol de <a> */
}

.corse:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* GRAND EST */
.grand-est {
    fill: #2A9D8F;
    transition: 0,3s;
}

.grand-est:hover path {
    fill: #79E1BC; /* Changer la couleur de <path> en noir au survol de <a> */
}

.grand-est:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* HAUTS DE FRANCE */
.hauts-de-france {
    fill: #CF9B93;
    transition: 0,3s;
}

.hauts-de-france:hover path {
    fill: #FFC0CB; /* Changer la couleur de <path> en noir au survol de <a> */
}

.hauts-de-france:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* ILE DE FRANCE */
.ile-de-france {
    fill: #A6B357;
    transition: 0,3s;
}

.ile-de-france:hover path {
    fill: #DBC244; /* Changer la couleur de <path> en noir au survol de <a> */
}

.ile-de-france:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* NORMANDIE */
.normandie {
    fill: #B27125;
    transition: 0,3s;
}

.normandie:hover path {
    fill: #E09731; /* Changer la couleur de <path> en noir au survol de <a> */
}

.normandie:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* NOUVELLE AQUITAINE */
.nouvelle-aquitaine {
    fill: #1FA6C0;
    transition: 0,3s;
}

.nouvelle-aquitaine:hover path {
    fill: #18CAC0; /* Changer la couleur de <path> en noir au survol de <a> */
}

.nouvelle-aquitaine:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* OCCITANIE */
.occitanie {
    fill: #657ED0;
    transition: 0,3s;
}

.occitanie:hover path {
    fill: #9793D0; /* Changer la couleur de <path> en noir au survol de <a> */
}

.occitanie:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* PAYS DE LA LOIRE */
.pays-de-la-loire {
    fill: #C54F58;
    transition: 0,3s;
}

.pays-de-la-loire:hover path {
    fill: #D27879; /* Changer la couleur de <path> en noir au survol de <a> */
}

.pays-de-la-loire:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}

/* PROVENCE ALPES COTE D'AZUR */
.provence-alpes-cote-d-azur {
    fill: #FFDE0D;
    transition: 0,3s;
}

.provence-alpes-cote-d-azur:hover path {
    fill: #FFC10D; /* Changer la couleur de <path> en noir au survol de <a> */
}

.provence-alpes-cote-d-azur:hover text {
    fill: rgb(0, 0, 0); /* Changer la couleur de <text> en blanc au survol de <a> */
}