@font-face {
 font-family: Bebas Neue;
 src: url("/fonts/BEBASNEUE.OTF") format("truetype");
}

@font-face {
 font-family: Raleway;
 src: url("/fonts/RALEWAY-REGULAR.TTF") format("truetype");
}

html {
    height: 100%;
}

body {
    display: flex;
    align-items: stretch;
    background-color: whitesmoke;
    min-height: 100%;
    margin: 0;
    padding: 0;
}

nav {
    background-color: white;
    width: 25%;
    height: 100%;
    box-shadow: 0px 0px 10px -5px black;
    min-width: 250px; /* Garder ça ? Voir pour fixer des largeurs fixes, variable selon les dimensions de l'écran */
}

nav ul {
    display: flex;
    flex-direction: column;
    height: 100%;
    margin: 0;
    padding: 0;
    list-style: none;
}

nav ul > * {
    display: flex;
    flex: 1;
    align-items: center;
    padding: 1em;
    
    transition: 0.3s background-color 0s;
}

nav ul .nav-icon {
    width: 3em;
    height: 3em;
    padding: 1em;
    border-radius: 50%;
    background-color: white;
    flex: 0 0 auto;
    margin-right: 1em;
}


.search-icon {
    width: 1em;
    height: 1em;
    margin: 0 1em;
}

.nav-recherche {
    background-color: whitesmoke;
}

.nav-maison:hover {
/*    background-color: #349ECF;*/
    background-color: #3894C6;
}

.nav-jardin:hover {
/*    background-color: #91DC5A;*/
    background-color: #6DC82A;
}

.nav-transport:hover {
    background-color: #F42737;
}

.nav-contact:hover {
/*    background-color: #FFEB3A;*/
    background-color: #FDD834;
}


.nav-maison .nav-icon .color,
.nav-jardin .nav-icon .color,
.nav-transport .nav-icon .color,
.nav-contact .nav-icon .color {
    opacity: 0;
}

.nav-maison:hover .nav-icon .color,
.nav-jardin:hover .nav-icon .color,
.nav-transport:hover .nav-icon .color,
.nav-contact:hover .nav-icon .color {
    opacity: 1;
}

.nav-label {
    font-size: 2em;
    font-family: Bebas Neue;
    margin-left: 1em;
}

nav ul > *:hover .nav-label {
    color: white;
}