.carte_interactive {
    display: flex;
    position: relative;
    margin-top: 100px;
}

.carte_interactive img {
    display: flex;
    width: 1024px;
}

.bulle{
    display: block;
}

.bulle p, .bulle a{
    font-family: 'Gill Sans', 'Gill Sans MT', Calibri, 'Trebuchet MS', sans-serif;
    font-weight: bold;
    color: #7f2538;
    font-size: 14px;
    text-align: center;
    padding: 0% 8%;
}

.bulle a {
    color: green;
}

#selecteur_1 {
    width: 16%;
    height: 13%;
    position: absolute;
    top: 14%;
    left: 21%;
    border-radius: 0% 0% 50% 50%;
}

#bulle_1 {
    width: 90%;
    height: 215%;
    background: url(./photos/tooltip.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -174%;
    left: 3%;
    transform: scale(0);
    transform-origin: 50% 100%;
    transition: transform 550ms ease-in-out;
}

#bulle_1 p{
    margin: 8% 0% 0% 0%;
}

#selecteur_1:hover #bulle_1{
    transform: scale(1);
    transform-origin: 50% 100%;
}

#selecteur_2 {
    width: 18%;
    height: 19%;
    position: absolute;
    top: 2%;
    right: 8%;
    border-top-left-radius: 0%;
    border-top-right-radius: 0%;
    border-bottom-right-radius: 0%;
    border-bottom-left-radius: 100% 30%;
}

#bulle_2 {
    width: 125%;
    height: 155%;
    background: url(./photos/tooltip_long.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -105%;
    right: -15%;
    transform: scale(0);
    transform-origin: 50% 100%;
    transition: transform 550ms ease-in-out;
}

#bulle_2 p{
    margin: 6% 0% 0% 0%;
}

#selecteur_2:hover #bulle_2{
    transform: scale(1);
    transform-origin: 50% 100%;
}

#selecteur_3 {
    width: 21%;
    height: 42%;
    position: absolute;
    top: 19%;
    right: 13%;
    border-radius: 20% 35% 20% 20% / 20% 30% 10% 2%;
}

#bulle_3 {
    width: 82%;
    height: 80%;
    background: url(./photos/tooltip.svg);
    background-size: contain;
    background-repeat: no-repeat;
    position: absolute;
    top: -32%;
    right: -2%;
    transform: scale(0);
    transform-origin: 50% 100%;
    transition: transform 550ms ease-in-out;
}

#bulle_3 p{
    margin: 8% 0% 0% 0%;
}

#selecteur_3:hover #bulle_3{
    transform: scale(1);
    transform-origin: 50% 100%;
}

#selecteur_4 {
    width: 22%;
    height: 22%;
    position: absolute;
    bottom: 11%;
    right: 15%;
    border-radius: 0%;
}

#bulle_4 {
    width: 91%;
    height: 118%;
    background: url(./photos/tooltip_long.svg);
    background-size: cover;
    background-repeat: no-repeat;
    position: absolute;
    top: -73%;
    right: 3%;
    transform: scale(0);
    transform-origin: 50% 100%;
    transition: transform 550ms ease-in-out;
}

#bulle_4 p{
    margin: 8% 0% 0% 0%;
}

#selecteur_4:hover #bulle_4{
    transform: scale(1);
    transform-origin: 50% 100%;
}