/* Navigation */
nav .menu-categorie {
    display: flex;
    height: 0;
    overflow: hidden;
    opacity: 0;
    transition: opacity 0.3s linear;
}
nav .menu-categorie:target {
    height: auto;
    flex-wrap: wrap;
    opacity: 1;
    transition: opacity 0.3s linear;
}
nav a {
    display: block;
}
nav #categorie-selection {
    background-color: rgb(238, 238, 238);
    display: flex;
    flex-wrap: wrap;
    width: fit-content;
    border-radius: 5px;
}
nav .categorie-choix {
    display: block;
    color: black;
    font-weight: bold;
    border-radius: 5px;
    padding: 1em 1em;
    margin: 3px;
}
nav .categorie-choix:hover, .categorie-active {
    background-color: white;
}
.nav-bloc {
    flex: 1 0 22%;
    min-width: 200px;
    max-width: 300px;
    margin: 0.5em;
    height: 100px;
    box-shadow: 0 0 5px grey;
    border-radius: 5px;
    position: relative;
    background-blend-mode: color-dodge;
    background-size: 80px;
    background-position: 20px center;
    background-repeat: no-repeat;
    background-clip: border-box;
}
.nav-bloc.purple { background-color: hsla(291, 43%, 55%, 0.5); }
.nav-bloc.purple:hover, .nav-bloc.purple:active { background-color: hsla(291, 43%, 55%, 0.75); }
.nav-bloc.red { background-color: hsla(0, 52%, 47%, 0.5); }
.nav-bloc.red:hover, .nav-bloc.red:active { background-color: hsla(0, 52%, 47%, 0.75); }
.nav-bloc.green { background-color: hsla(138, 56%, 43%, 0.5); }
.nav-bloc.green:hover, .nav-bloc.green:active { background-color: hsla(138, 56%, 43%, 0.75); }
.nav-bloc.orange { background-color: hsla(34, 83%, 44%, 0.5) }
.nav-bloc.orange:hover, .nav-bloc.orange:active { background-color: hsla(34, 83%, 44%, 0.75) }
.nav-bloc.blue { background-color: hsla(219, 52%, 47%, 0.5); }
.nav-bloc.blue:hover, .nav-bloc.blue:active { background-color: hsla(219, 52%, 47%, 0.75); }
.nav-bloc.grey { background-color: hsla(188, 50%, 61%, 0.5); }
.nav-bloc.grey:hover, .nav-bloc.grey:active { background-color: hsla(188, 50%, 61%, 0.75); }
.nav-bloc p {
    color: black;
    font-weight: bold;
    word-wrap: break-word;
    font-size: 105%;
    position: relative;
    left: 40%;
    width: 50%;
    top: 50%;
    transform: translateY(-50%);
    margin: 0;
}
.nav-bloc.payments { background-image: url(images/icons/payments.svg); }
.nav-bloc.restaurant { background-image: url(images/icons/restaurant.svg); }
.nav-bloc.savings { background-image: url(images/icons/savings.svg); }
.nav-bloc.work_history { background-image: url(images/icons/work_history.svg); }
.nav-bloc.more_time { background-image: url(images/icons/more_time.svg); }
.nav-bloc.alarm { background-image: url(images/icons/alarm.svg); }
.nav-bloc.video_chat { background-image: url(images/icons/video_chat.svg); }
.nav-bloc.save { background-image: url(images/icons/save.svg); }
.nav-bloc.how_to_vote { background-image: url(images/icons/how_to_vote.svg); }
.nav-bloc.diversity_3 { background-image: url(images/icons/diversity_3.svg); }
.nav-bloc.balance { background-image: url(images/icons/balance.svg); }
.nav-bloc.groups { background-image: url(images/icons/groups.svg); }
.nav-bloc.groups_2 { background-image: url(images/icons/groups_2.svg); }
.nav-bloc.groups_3 { background-image: url(images/icons/groups_3.svg); }
.nav-bloc.location_on { background-image: url(images/icons/location_on.svg); }
.nav-bloc.device_hub { background-image: url(images/icons/device_hub.svg); }
.nav-bloc.euro { background-image: url(images/icons/euro.svg); }
.nav-bloc.health_and_safety { background-image: url(images/icons/health_and_safety.svg); }
.nav-bloc.directions_bike { background-image: url(images/icons/directions_bike.svg); }
.nav-bloc.crib { background-image: url(images/icons/crib.svg); }
.nav-bloc.luggage { background-image: url(images/icons/luggage.svg); }
.nav-bloc.link_off { background-image: url(images/icons/link_off.svg); }
.nav-bloc.accessible { background-image: url(images/icons/accessible.svg); }
.nav-bloc.volunteer_activism { background-image: url(images/icons/volunteer_activism.svg); }
.nav-bloc.transfer_within_a_station { background-image: url(images/icons/transfer_within_a_station.svg); }
.nav-bloc.campaign { background-image: url(images/icons/campaign.svg); }
.nav-bloc.report { background-image: url(images/icons/report.svg); }
.nav-bloc.contract { background-image: url(images/icons/contract.svg); }
.nav-bloc.contract_edit { background-image: url(images/icons/contract_edit.svg); }
.nav-bloc.contract_delete { background-image: url(images/icons/contract_delete.svg); }
.nav-bloc.hourglass { background-image: url(images/icons/hourglass.svg); }
.nav-bloc.early_on { background-image: url(images/icons/early_on.svg); }
.nav-bloc.currency_exchange { background-image: url(images/icons/currency_exchange.svg); }
.nav-bloc.show_chart { background-image: url(images/icons/show_chart.svg); }
.nav-bloc.lightbulb { background-image: url(images/icons/lightbulb.svg); }
.nav-bloc.commute { background-image: url(images/icons/commute.svg); }
.nav-bloc.task { background-image: url(images/icons/task.svg); }
.nav-bloc.school { background-image: url(images/icons/school.svg); }
.nav-bloc.sync { background-image: url(images/icons/sync.svg); }