@import "asset.css";







/*
mobile first
mettre le burger jusqu'à 580px
changer la taille du logo aussi
a mettre en :hover ::after content: 'f520';
*/

/*****************************/
ul {
    list-style:none;
}

/* Basic style */

/* Navbar */
.header {
    display:flex;
    align-items:center;
    justify-content:space-between;
    padding:10px 120px 10px 80px;
    padding-right: 120px;
    font-size:1.1rem;
    background:whitesmoke;
    color:var(--main-blue);
}
.header-nav {
    display:flex;
}
.header-nav__item {
    padding: 0 20px;
}


.header-nav__item > a {
    color:var(--main-blue);
    text-decoration:none;
}
.burger {
    display:none;
}

/*  Small device */
@media screen and (max-width:15cm) {
    .header-nav {
        overflow:hidden;
        display:flex;
        align-items: center;
        flex-direction:column;
        width:0;
        height:calc(100vh - (100px/1.76666));
        position:absolute;
        top:97px;
        right:0;
        background-color: rgba(255, 255, 255, 0.87);
        transform: translateX(110%);
        transition: all .5s ease-in-out;
    }
    .show-nav .header-nav{
        width:100vw;
        transform: translateX(0);
    }
    .header-nav__item {
        transform: translateX(101%);
        transition: all .5s ease-in-out;
        font-size: 1.8rem;
        padding-top: 80px;
        border-bottom: #1E5062 solid 1px;
    }

    .show-nav .header-nav__item  {
        transform: translateX(0);
    }

    header-nav__item > a {
        display:block;
        padding:1rem;
        font-size:1.8rem;
        color:var(--main-green);
        /*transition: all .4s ease-in-out;*/
    }
/*    .header-nav__item > a:hover {
        padding-left:2rem;
        letter-spacing:5px;
    }*/

    /* Toggle menu */
    .burger {
        display:block;
        position:relative;
        padding:0;
        width:45px;
        height:45px;
        border:none;
        background:transparent;
        cursor:pointer;
    }
    .bar {
        display:block;
        width:45px;
        height:4px;
        border-radius:3px;
        background:var(--main-blue);
        transition: all .5s ease-in-out;
    }
    .bar::before, .bar::after {
        content:"";
        width:45px;
        height:4px;
        position:absolute;
        left:0;
        background:var(--main-blue);
        border-radius:3px;
        transition: all .5s ease-in-out;
    }
    .bar::before {
        transform:translateY(-12px)
    }
    .bar::after {
        transform:translateY(12px)
    }
    .show-nav .bar {
        width:0;
        background:transparent;
    }
    .show-nav .bar::before {
        transform:rotate(45deg);
    }
    .show-nav .bar::after {
        transform:rotate(-45deg);
    }

/*
    .show-nav .nav-first {
        transition: all 1s ease-out;
    }
    .show-nav .second {
        transition: all 1.1s ease-out;
    }
    .show-nav .third {
        transition: all 1.2s ease-out;
    }
    .show-nav .four {
        transition: all 1.3s ease-out;
    }
    .show-nav .fifth {
        transition: all 1.4s ease-out;
    }
}*/

/*  Medium device - Bonus */
@media screen and (min-width:15cm) {
    .header-nav__item > a::after {
        display:block;
        content:"";
        width:0;
        height:1px;
        background:var(--main-blue);
        transition:width .4s;
    }
    .header-nav__item:hover > a::after {
        width:100%;
    }
}
}
/******************************/
/*gestion header logo*/
        #header-logo {
            width: 180px;
            /*121*/
            height: calc(180px / 1.76666);
            margin: 10px 0 10px 10px;
        }
    /*logo pour mobile*/
        @media screen and (max-width: 14cm) {
            #header-logo{
                width: 100px;
                height: calc(100px/1.766666);

            }

        }
/*fin gestion logo */



    .hero {
        height: 80%;
        width: 100%;
        background-color: #587444;
    }

        .article {
            background: linear-gradient(red, darkred);
            height: 20vh ;
        }