:root{
            --max-width : 1400px;
        }
        * {
            box-sizing: border-box;
            padding: 0;
            margin: 0;
            font-family: 'kumbh Sans', sans-serif ;
        }
        html, body {
            margin: 0;
            height: 100%;
            background-color: black;

        }


/* Navbar section */

.navbar {
    background: #000;
    height: 80px;
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 1.2rem;
    position: sticky;
    top : 0;
    z-index: 999;

}

/* navbar -> navbar__container*/
.navbar__container {
    /* background-color: blanchedalmond; */
    display: flex;
    justify-content: left;
    /* justify-content: left; */

    height: 80px;
    z-index: 1;
    width: 100%; 
    max-width: var(--max-width);
    /* width spécifie la largeur qu'occupera le navbar container
    dans le truc qui le contient, ici la classe navbar*/ 
    margin: 0 auto;
    padding: 0px 50px;
}

/*navbar logo*/

/* .fa-gem {
    margin-right: 0.5rem;
} */

/* navber -> navbar__container -> navbar__menu*/
.navbar__menu {
    /* background-color: blue; */
    display: flex;
    align-items: center;
    list-style: none;
    text-align: center;

    /* justify-content: center; */
}

/* navbar -> navbar__container -> navbar__menu - > navbar__item*/
.navbar__item {
    /* background-color: blueviolet; */
    height: 80px;
    /* padding : 0 1rem; */
}

/* navbar -> navbar__container -> navbar__menu - > navbar__item -> navbar__links
le texte dans les items quoi*/

.navbar__links {
    color: #fff;
    font-weight: bold;
    font-size: 1.5vw;
    display: flex;
    align-items: center;
    justify-content: center;
    text-decoration: none;
    padding: 0 1rem;
    height: 100%;
}

.navbar__links:hover {
    background-image: linear-gradient(rgb(255, 255, 255), rgb(9, 255, 0));
    color: transparent;
    background-clip: text;
    transition : all 0.3s ease;

}


/* band */
.band {
    width: 100%;
    height: 60vh; /* hauteur de la banderole */
    position: relative;
    /* overflow: hidden; */
    /* overflow: visible; */

}
.band__container {
    width: 100%;
    height: 100%;
    /* background: 
        linear-gradient(to top, rgba(0,0,0,1.3), rgba(0,0,0,0)),
        url("images/escouade.png") no-repeat center center;  */
    
    background: 
        linear-gradient(to top, rgba(0,0,0,1.3), rgba(0,0,0,0)), /* gradient par-dessus */
        url("/raconte_le_site/images/escouade.webp"); /* image */
    background-position: top 30% right 25%;

    background-size: cover;
    display: flex;
    align-items: flex-end; /* le texte en bas de la banderole */
    justify-content: center;
    color: white;
}
.band__overlay {
    margin-top: 15%;
    align-self: center;
    font-size: 3vh;
    /* align-self: top 60% left 50%; */

}
.band__overlay h1 {
    color: #fff;   
}


@media screen and (max-width:960px) {
    /* html, body {
    margin: 0;
    height: 100%;
    } */

    .navbar__container{
        display: flex;
        justify-content: space-between;
        height : 80px;
        /* height: auto; */
        z-index: 1;
        width : 100% ;
        max-width : 1300px ;
        padding : 0

    }

    .navbar__menu {
        /* background-color: blue; */
        /* display: flex; */
        display: grid;
        grid-template-columns: auto;
        margin : 0;
        width : 100%;
        position: absolute;

        height: 30vh;
        /* height: auto; */



        /*ces petits trucs sont là pour s'assurer qu'on ne voit pas le conteneur du menu
        il reste caché et apparaitra quand on appuiera sur un bouton*/
        top : -1000px;
        opacity: 0;
    
        transition: all 0.5s ease;
        z-index: -1;
        background: black;
    }

    /*Classe navbar__menu pour quand elle est donc ACTIVE, une fois qu'on a appuyé
    sur le bouton, on la voit etc...*/

    .navbar__menu.active {
        /* background-color: blue; */
        background: #131313;
        top : 90%;
        opacity: 1;
        z-index: 99;
        /* height: 30vh; */
        height: 15vh;
        /* height: auto; */


        transition: all 0.5s ease;
        font-size: 1.6rem;
    }

    /* NAVBAR TOGGLE */
    .navbar__toggle {
        display: flex;
        align-items: center;
        gap: 10px;
        cursor: pointer;
    }

    .menu-text {
        color: white;
        font-size: 14px;
        font-weight: bold;
        text-transform: uppercase;
    }

    .burger {
        display: flex;
        flex-direction: column;
        justify-content: center;
    }

    .burger .bar {
        width: 25px;
        height: 3px;
        margin: 4px 0;
        background: #fff;
        transition: all 0.5s ease-in-out;
    }

    /* navbar -> navbar__container -> navbar__menu - > navbar__item*/
    .navbar__item {
        display: flex;
        justify-content: center;
        align-items: center;
        padding : 0 0;
        height: 100%;
        /* overflow: auto; */
    }

    /* navbar -> navbar__container -> navbar__menu - > navbar__item -> navbar__links
    le texte dans les items quoi*/

    .navbar__links {
        padding: 0 0;
        width: 80%;

        font-size: 3vw;
    }

    #mobile-menu {
        position : absolute;
        padding: 10px;
        top : 20%;
        right : 5%;
        transform: translate(5%,20%);
    }

    #mobile-menu.is-active .bar:nth-child(2){
        opacity: 0;
    }
    #mobile-menu.is-active .bar:nth-child(1) {
        transform : translateY(11px) rotate(45deg);
    }
    #mobile-menu.is-active .bar:nth-child(3) {
        transform : translateY(-11px) rotate(-45deg);
    }

    /* band */
    .band {
        width: 100%;
        height: 25vh; /* hauteur de la banderole */
        position: relative;
        overflow: hidden;
    }

    .band__container {
        width: 100%;
        height: 100%;
        background: 
            linear-gradient(to top, rgba(0,0,0,1), rgba(0,0,0,0)), /* gradient par-dessus */
            url("/raconte_le_site/images/escouade.webp"); /* image */
        background-position: top 30% right 25%;

        background-size: cover;
        display: flex;
        align-items: flex-end; /* le texte en bas de la banderole */
        justify-content: center;
    }

    .band__overlay{
        align-self: center;
        font-size: 1.2vh ;
        /* margin-top: 50%; */
    }
}