table{ border: 2px solid black; width: 80%; margin: 10px; text-align: center; 
        border-radius: 3px; box-shadow: 5px 5px 5px grey; display: inline-block;
        margin: auto; color: rgb(112, 18, 206); font-weight: 500; background-color: silver;
}

table td:nth-child(1){width: 30%; }
table td:nth-child(2){width: 70%; position: relative;}
img{width: 100%;}

.carte_bord_noir{
        background-color: rgba(255, 255, 255, 1); 
        margin-top: 10px;
        margin-bottom: 10px;
        padding: 0px 10px 0px 10px; 
        box-shadow: 10px 5px 5px rgb(108,108,108) ;
        border: thick double black;
}

.legende{
        position: absolute;
        width: 0%;
        height: 100%;
        background-color: white;
        border: 2px solid black;
        top: 0;
        left: 100%;
        transition: all 0.5s;
        opacity: 0;
        overflow-y: scroll;
}

table td:nth-child(2):hover .legende{
        width: 100%;
        left: 0%;
        opacity: 1;
}

.fleche{
        position: absolute;
        right: 5%;
        font-weight: bold;
}