/* NAVIGATION */
/* Il s'agit de la page dédiée au menu */
ul #menu {
    list-style-type: none; /* Supprime l'effet de liste pour les UL se trouvant dans l'ID menu */
}
.menu {
    display: inline; /* Tous les éléments étant dans la CLASS menu seront sur la même ligne */
    border-left: 1px solid grey; /* Les bordures seront continue, d'une épaisseur d'1px et grises */
}
.select {
    color: salmon; /* La class select aura comme couleur "Salmon" */
}
.menu a{
    text-decoration: none; /* Aucune décoration de texte (soulignement, etc...) pour les lien dans la class a */
    transition: 0.5s; /* Pour tout changement une transition d'une demi seconde aura lieu */
    padding: 20px; /* marge intérieur de 20px */
}
.menu .nSelect{
    color: black; /* couleur du texte en noir */
}
ul #menu li a:hover{
    color: tomato; /* couleur du texte en "Tomato" */
    font-weight: bold; /* texte en gras */
}
nav {
    background-color: whitesmoke; /* Couleur d'arrière plan en "Whitesmoke" */
    padding: 13px; /* DÉJÀ EXPLIQUÉ */
    position: fixed; /* La position reste identique (suis la page, le menu restera visible en haut même lorsqu'on descent */
    z-index: 1; /* Affichage a l'avant plan */
    top: 0; /* Reste tout en haut (hauteur donnée a partir du haut enpx) */
    width: 100%; /* Largeur de 100% */
}
#check {
    display: none; /* Cache la case ayant pour identifiant "check" */
}
#menuToggle a:hover {
    color: tomato; /* Lorsqu'on passe sa souris, le texte change de couleur en "tomato" */
}
.menu + .right {
    float: right; /* Lorsqu'une class menu existe avec une class right, l'objet devient flotant sur la gauche */
    padding-right: 13px; /* DÉJÀ EXPLIQUÉ */
}

/* Menu déroulant */
.dropdown {
    position: relative; /* DÉJÀ EXPLIQUÉ */
    display: inline-block; /* DÉJÀ EXPLIQUÉ */
}
.dropdown-content {
    display: none; /* DÉJÀ EXPLIQUÉ */
    position: absolute; /* DÉJÀ EXPLIQUÉ */
    background-color: #f1f1f1; /* DÉJÀ EXPLIQUÉ */
    min-width: 160px; /* DÉJÀ EXPLIQUÉ */
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2); /* DÉJÀ EXPLIQUÉ */
    z-index: 1; /* DÉJÀ EXPLIQUÉ */
}
.dropdown-content a {
    color: black; /* DÉJÀ EXPLIQUÉ */
    padding: 12px 16px; /* DÉJÀ EXPLIQUÉ */
    display: block; /* DÉJÀ EXPLIQUÉ */
}
.dropdown-content a:hover {
    background-color: #ddd; /* DÉJÀ EXPLIQUÉ */
} 
.dropdown:hover .dropdown-content {
    display: block; /* DÉJÀ EXPLIQUÉ */
}

@media screen and (max-width: 1100px) { /* Parie responsive -> Ecran plus petits de 1100px */
    /* NAVIGATION */
    .hidden {
        display: none;  /* On cache les class hidden */
    }
    .menu {
        display: block; /* L'élement sera affiché comme un bloc, il occupera toute la largeur disponible et aura un saut a la ligne après */
    }
    nav {
        padding: 0; /* DÉJÀ EXPLIQUÉ */
        background-color: #232323; /* DÉJÀ EXPLIQUÉ */
    }
    #menuToggle {
        display: block; /* DÉJÀ EXPLIQUÉ */
        position: relative; /* L'élément sera positionné de manière relative à sa position initiale */
        top: 50px; /* DÉJÀ EXPLIQUÉ */
        left: 50px; /* DÉJÀ EXPLIQUÉ - idem que top (pour le haut) mais a droite */
        z-index: 1; /* DÉJÀ EXPLIQUÉ */
    }
    
    #menuToggle a {
        text-decoration: none; /* DÉJÀ EXPLIQUÉ */
        color: #232323; /* DÉJÀ EXPLIQUÉ */
        transition: 0.3s; /* DÉJÀ EXPLIQUÉ */
    }
    
    #menuToggle a:hover {
        color: tomato; /* DÉJÀ EXPLIQUÉ */
    }
    #menuToggle input {
        display: block; /* DÉJÀ EXPLIQUÉ */
        width: 40px; /* DÉJÀ EXPLIQUÉ - Largeur de 40px */
        height: 32px; /* L'élément aura une hauteur de 32px */
        position: absolute; /* L'élément sera positionné de manière absolue sur la page */
        top: -7px; /* DÉJÀ EXPLIQUÉ */
        left: -5px; /* DÉJÀ EXPLIQUÉ */
        cursor: pointer; /* Au survol, la souris deviendra un pointeur */
        opacity: 0; /* Sera transparent */
        z-index: 2; /* DÉJÀ EXPLIQUÉ */
    }
    #menuToggle span {
        display: block; /* DÉJÀ EXPLIQUÉ */
        width: 33px; /* DÉJÀ EXPLIQUÉ */
        height: 4px; /* DÉJÀ EXPLIQUÉ */
        margin-bottom: 5px; /* Marge extérieur de 5pixels */
        position: relative; /* DÉJÀ EXPLIQUÉ */
        background: #cdcdcd; /* DÉJÀ EXPLIQUÉ */
        border-radius: 3px; /* Coins arrondis dans un rayon de 3px */
        z-index: 1; /* DÉJÀ EXPLIQUÉ */
        transform-origin: 4px 0px; /* Origine de transformation de l'élément (4px à droite et 0 pixel en haut) */
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    background 0.5s cubic-bezier(0.77,0.2,0.05,1.0),
                    opacity 0.55s ease;
                    /*lorsque l'élément auquel elle s'applique subit une transformation, un changement de couleur de fond ou une modification de son opacité, il y aura une transition de 0.5 seconde */
    }
    #menuToggle span:first-child {
        transform-origin: 0% 0%; /* DÉJÀ EXPLIQUÉ */
    }
    #menuToggle span:nth-last-child(2) {
        transform-origin: 0% 100%; /* DÉJÀ EXPLIQUÉ */
    }
    #menuToggle input:checked ~ span {
        opacity: 1; /* DÉJÀ EXPLIQUÉ */
        transform: rotate(45deg) translate(-2px, -1px); /* DÉJÀ EXPLIQUÉ */
        background-color: #232323; /* DÉJÀ EXPLIQUÉ */
    }
    #menuToggle input:checked ~ span:nth-last-child(3) {
        opacity: 0; /* DÉJÀ EXPLIQUÉ */
        transform: rotate(0deg) scale(0.2, 0.2);
    }
    #menuToggle input:checked ~ span:nth-last-child(2) {
        transform: rotate(-45deg) translate(0, -1px);
    }
    #menu {
        position: absolute; /* DÉJÀ EXPLIQUÉ */
        width: 300px; /* DÉJÀ EXPLIQUÉ */
        margin: -100px 0 0 -50px; /* DÉJÀ EXPLIQUÉ */
        padding: 50px; /* DÉJÀ EXPLIQUÉ */
        padding-top: 125px; /* DÉJÀ EXPLIQUÉ */
        height: 100vh; /* DÉJÀ EXPLIQUÉ - Dans une autre unité de mesure */
        
        background-color: #ededed; /* DÉJÀ EXPLIQUÉ */
        list-style-type: none; /* DÉJÀ EXPLIQUÉ */
        -webkit-font-smoothing: antialiased; /* DÉJÀ EXPLIQUÉ */
        
        transform-origin: 0% 0%; /* DÉJÀ EXPLIQUÉ */
        transform: translate(-100%, 0); /* DÉJÀ EXPLIQUÉ */
        
        transition: transform 0.5s cubic-bezier(0.77,0.2,0.05,1.0); /* DÉJÀ EXPLIQUÉ */
    }
    #menu li {
        padding: 10px 0; /* DÉJÀ EXPLIQUÉ */
        font-size: 22px; /* Police d'écriture de 22px */
    }
    #menuToggle input:checked ~ ul {
        transform: none; /* DÉJÀ EXPLIQUÉ */
    }
    .menu + .right {
        float: left; /* DÉJÀ EXPLIQUÉ */
    }
}