#map{margin-top: 20px;}

.fond-world{background-color: rgb(64, 138, 187);}

.map
{
    display: grid;
    grid-template-columns: 1fr 1fr max-content;
    margin: 0px 3% 3% 3%;
    grid-template-areas: "map_image map_image map_list";

}

.map_image
{
    grid-area: map_image;
    width: 100%;
    justify-items: center;
}

.map_image path
{
    stroke: black;
    stroke-width: 1px;
    transition: fill 0.3s;
}

.map_image .is-active path
{
    fill: rgb(18, 92, 16);

}

.map_list
{
 
    grid-area: map_list;
    font-family: 'Birthstone', cursive;
    font-size: 150%;
    line-height: 93%;
    color: black;
    background-color: rgb(64, 138, 187);
    padding-right: 30px;

}
.map_list a
{
    color: inherit;
    text-decoration: none;
    transition: color 0.2s;
}

.map_list a.is-active
{
    color: black;
    line-height: 73%;
    text-shadow: #EEE 2px 2px 8px;

}

.done
{
    fill: #85641e;
}

.title-album
{
    font-family: 'Birthstone', cursive;
    font-size: 70px;
    color: rgb(216, 216, 216);
    margin-top: 0px;
    text-decoration:underline;
    grid-area: title-album;


}

/*-----------------------------------------------------------------------*/

#bloc-widget
{
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    justify-items: center;
    border: 2px solid black;
    background-color: rgba(4, 6, 22, 0.5);
    grid-template-areas: "back title-album ."
                         "map_flag map_info mymap";
}
.map_flag{grid-area: map_flag;}
.map_flag img {max-width: 100%; max-height: 100%;} 

.back{grid-area: back; margin-top: 80px;}

.back a
{
    color: #a3a3a3;
    font-size: 250%;
    font-family: 'Birthstone', cursive;
}

.map_info
{
    grid-area: map_info;
    color: #EEE;
    margin-bottom: 20px;
}

.mymap{grid-area: mymap; margin-bottom: 20px;}



/*-------------------------------------------------------------------*/

.bloc-photo
{
    display: grid;
    grid-template-columns: repeat(2, max-content);
    border: 2px solid black;
    border-top: none;
    padding-top: 40px;

 
    justify-content: space-evenly;
    align-items: center;
    
    background-color: rgba(6, 4, 22, 0.5);
    margin-bottom: 20px;

    

}

.photo-border{border:4px ridge black;}

 .sous-titre{font-style: italic; font-size: 10px; font-family:Verdana, Geneva, Tahoma, sans-serif;
    color: #EEE;
}

@media only screen and (max-width:768px) /*phone*/
{
    #bloc-widget {grid-template-columns :1fr;
                    grid-template-areas: "title-album"
                                         "mymap"
                                         "map_info"
                                         "map_flag"
                                         "back"; }
    .bloc-photo {grid-template-columns: 1fr;}
    .map{grid-template-columns: 2fr;
        grid-template-areas: "map_image"
                            "map_list";}
    .map_flag{width: 70%;}
    .back{grid-area: back; margin-top: 20px; margin-bottom: 20px;}
    .mymap{margin-bottom: 40px;}
    .map_list{column-count: 2;}
    .title-album{font-size: 140%;}

}