/*bandeau*/
header {
    position: sticky;
    top: 0;
    z-index: 100;
}


/*3 menus*/
.navigation {
    margin: 0vw 8vw 0vw 8vw;
    font-size: 1.5vw;
}

/*liste des 3 menus*/
ul {
    list-style: none;
}

/*un menu*/
a {
    text-decoration: none;
    color: inherit;
}

.icons {
    width: 2vw;
    margin-left: 1.5vw;
    margin-top: 1vw;
    display: block;
    transition: all 0.4s ease;
}

nav ul li:hover .icons {
    transform: rotateZ(-180deg);
}


/*la liste juste apr�s le nav*/
.navigation > ul {
    display: flex;
    width: max-content;
    margin: 0 auto;
}



/*chaque menu*/
nav ul li a {
    padding-top: 1vw;
    padding-bottom: 1vw;
    text-align: center;
    display: block;
}

/*chaque item de la premi�re liste*/
nav ul li {
    position: relative;
}

    /*chaque dropdown*/
    nav ul li ul {
        position: absolute;
        /*top: calc(100% + var(--list-padding));*/
        left: 0;
        background-color: white;
        /*border-radius: 12px;*/
        visibility: hidden;
        opacity: 0;
        transition: all 0.2s ease;
        font-size: 1.2vw;
    }

        /*chaque lien dans les dropdown*/
        nav ul li ul li a:hover {
            background-color: lightgray;
            transition: all 0.2s ease;
        }

    /*affiche le dropdown quand hover sur une menu*/
    nav ul li:hover ul {
        visibility: visible;
        opacity: 1;
        box-shadow: rgba(100,100,111, 0.2)0px 0.2vw 0.5vw 0px;
    }

@media only screen and (min-device-width:481px){
    nav ul li a{
        width:30vw;
    }
    .header{
        display:none;
    }
}

@media only screen and (max-device-width: 480px){
    body{
        overflow-x: hidden;
    }

    .val{
        color:white;
        text-align:center;
        padding-top:1.5rem;
        font-size:7vw;
    }
    
    .bureau{
        display:none;
    }

    .nav__toggle {
        display: inline-block;
        position: absolute;
        z-index: 10;
        padding: 0;
        border: 0;
        background: transparent;
        outline: 0;
        right: 15px;
        top: 15px;
        cursor: pointer;
        border-radius: 50%;
        transition: background-color 0.15s linear;
    }

        .nav__toggle:hover, .nav__toggle:focus {
            background-color: rgba(0, 0, 0, .5);
        }

    .nav__menu {
        display: flex;
        flex-wrap:wrap;
        flex-direction: column;
        justify-content: center;
        align-content:center;
        height: var(--screen-height);
        position: relative;
        z-index: 5;
        visibility: hidden;
    }

    .nav__item {
        opacity: 0;
        transition: all 0.3s cubic-bezier(0, 0.995, 0.99, 1) 0.3s;
    }

        .nav__item:nth-child(1) {
            transform: translateY(-40px);
        }

        .nav__item:nth-child(2) {
            transform: translateY(-80px);
        }

        .nav__item:nth-child(3) {
            transform: translateY(-120px);
        }

        .nav__item:nth-child(4) {
            transform: translateY(-160px);
        }

        .nav__item:nth-child(5) {
            transform: translateY(-200px);
        }

    .nav__link {
        color: white;
        display: block;
        text-align: center;
        text-transform: uppercase;
        letter-spacing: 5px;
        font-size: 2rem;
        text-decoration: none;
        padding: 1rem;
    }

        .nav__link:hover, .nav__link:focus {
            outline: 0;
            background-color: rgba(0, 0, 0, 0.2);
        }

    .menuicon {
        display: block;
        cursor: pointer;
        color: white;
        transform: rotate(0deg);
        transition: 0.3s cubic-bezier(0.165, 0.84, 0.44, 1);
        width:10vw;
        height:10vw;
    }

    .menuicon__bar, .menuicon__circle {
        fill: none;
        stroke: currentColor;
        stroke-width: 3;
        stroke-linecap: round;
    }

    .menuicon__bar {
        transform: rotate(0deg);
        transform-origin: 50% 50%;
        transition: transform 0.25s ease-in-out;
    }

    .menuicon__circle {
        transition: stroke-dashoffset 0.3s linear 0.1s;
        stroke-dashoffset: 144.513262038;
        stroke-dasharray: 144.513262038;
    }

    .splash {
        position: absolute;
        top: 40px;
        right: 40px;
        width: 1px;
        height: 1px;
    }

        .splash::after {
            content: "";
            display: block;
            position: absolute;
            border-radius: 50%;
            background-color: var(--splash-bg-color);
            width: 284vmax;
            height: 284vmax;
            top: -142vmax;
            left: -142vmax;
            transform: scale(0);
            transform-origin: 50% 50%;
            transition: transform 0.5s cubic-bezier(0.755, 0.05, 0.855, 0.06);
            will-change: transform;
        }

    .nav:target > .splash::after, .nav--open > .splash::after {
        transform: scale(1);
    }

    .nav:target .menuicon, .nav--open .menuicon {
        color: white;
        transform: rotate(180deg);
    }

    .nav:target .menuicon__circle, .nav--open .menuicon__circle {
        stroke-dashoffset: 0;
    }

    .nav:target .menuicon__bar:nth-child(1), .nav--open .menuicon__bar:nth-child(1), .nav:target .menuicon__bar:nth-child(4), .nav--open .menuicon__bar:nth-child(4) {
        opacity: 0;
    }

    .nav:target .menuicon__bar:nth-child(2), .nav--open .menuicon__bar:nth-child(2) {
        transform: rotate(45deg);
    }

    .nav:target .menuicon__bar:nth-child(3), .nav--open .menuicon__bar:nth-child(3) {
        transform: rotate(-45deg);
    }

    .nav:target .nav__menu, .nav--open .nav__menu {
        visibility: visible;
    }

    .nav:target .nav__item, .nav--open .nav__item {
        opacity: 1;
        transform: translateY(0);
    }

    body {
/*        min-height: 100vh;*/
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .viewport {
        width: var(--screen-width);
        height: var(--screen-height);
        margin: 0 auto;
        position: relative;
        overflow: hidden;
        background-color: white;
    }

    .header {
        height: 15vw;
    }


}