/****************
*   Variables
*/
    :root {
        --main-color: rgb(51, 98, 62);
    }

/*
*  Fin variables
*****************/ 

/****************
*   Reset CSS
*/
    /* Marges par défaut à 0 */
    *{
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }
    /* Ne pas autoriser le dépassement de taille des éléments média */
    img, picture, video, canvas, svg {
        display: block;
        max-width: 100%;
    }

    /*Marge minimale sur les bords d'écrans */
    section,nav {
        padding: 15px;
    }
/*
* fin reset
******************/

/*****************
* Header et Burger
*/
    header{
        position: sticky; /* coller le header en haut e l'écran */
        top: 0;
        background-color: var(--main-color);
        color: white;
    }


    header .container{
        display: flex;
        flex-direction: column;
    }

    header .heading{
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    #logo{
        border: 2px solid black;
        width: 80px;
        height: 50px;
        background-color: rgb(130, 85, 2);
        display: flex;
        justify-content: center;
        align-items: center;
    }

    nav{
        position: sticky;
        flex-grow: 1;
        display: flex;
        flex-direction: column  ;
        gap: 10px;
        justify-content: space-evenly;
        align-items: center;
        overflow: hidden; /* empeche les bouton d'apparaitre quand le nav est masqué */
        transition: 0.25s; 
        padding-top: 0;
        padding-bottom: 0;
        height: 40vw;
    }

    /* hide veut dire cachée, classe pour le menu burger */
    nav.hide{
        height: 0px;
    }

    nav a{
        color: white;
        text-decoration: none;
        padding: 10px 40px;
        border-radius: 10px;
        transition: 1s;
        background-color: rgba(255,255,255,0.1);
    }

    nav a:hover{
        background-color: rgba(255,255,255,0.25);
    }

    /*style pour responsivité en bas du fichier*/

/*
* Fin burger
*/



h1, h2, h3, p{
    margin: 12px 0;
}


main h2{
    color: var(--main-color);
}

main section:nth-child(odd){ /* pour le sections impaires du main */
    background-color: rgb(194, 215, 223);
}

footer{
    height: 100px;
    background-color: var(--main-color);
    color: white;
}

.container{
    max-width: 960px;
    margin: auto;
    padding: 10px 0;
}



@media screen and (min-width: 640px) {
    header .container{
        flex-direction: row;
        justify-content: space-between;
    }

    header img[alt="burger"]{
        display: none;
    }

    .heading{
        gap: 20px;
    }

    nav{
        flex-direction: row;
        justify-content: space-between;
        height: auto;
        flex-grow: unset;
    }

    /* en desktop,  le menu est tjs affiché, même si le burger n'est pas activé */
    nav.hide{
        height: auto;
    }
}