#package {
    height: 100%;
    display: grid;
    grid-template-columns: 2% 55% 3% 29% 11%;
    grid-template-rows : 5% 90% 5%;
}

/* _________________________________________________________ */
/* _________________________________________________________ */

#map {
    display: grid;
    max-height: 100%;    
    max-width : 100%;             
    /* margin: 2%; */
    grid-column : 2;
    grid-row : 2;
}

/* _________________________________________________________ */
/* _________________________________________________________ */

#titre{
    grid-column : 3 / span 3;
    grid-row : 1;
    font-size: 1.8em;
    text-align: center;
    margin-top: 3%;
}

/* _________________________________________________________ */
/* _________________________________________________________ */

#legende {    
    grid-column : 4;
    grid-row : 2;

    display: grid;
    grid-template-rows : 3% 38% 3% 14% 3% 25% 5% 6% 3%;
}

#annee {
    grid-row : 2;
    grid-column : 1;

    margin: 5%;

    display: grid;
    grid-template-columns: repeat(3, 35%);
    grid-template-rows :repeat(5, 15%);
}

#theme{
    grid-row : 4;
    grid-column : 1;
}

#localisation{
    grid-row : 6;
    grid-column : 1;


    display: grid;
    grid-template-columns : 2% 47% 2% 47% 2%;
    grid-template-rows : 5% 20% 5% 20% 5% 20% 5% 15% 5%;
}

#inCom{
    grid-row : 2;
    grid-column : 2;
}

#inIle{
    grid-row : 4;
    grid-column : 2;
}

#inArchi{
    grid-row : 6;
    grid-column : 2;
}

#inToute{
    grid-row : 8;
    grid-column : 2;
}

#menuDeroulantLoca{
    grid-row : 4;
    grid-column : 4;
}

#boutonValidation{
    grid-row : 8;

    display: grid;
    grid-template-columns : 50% 50%;
}

/* _________________________________________________________ */
/* _________________________________________________________ */