/*---------------------------- EN TÊTE ----------------------------*/
#bandeau-projets{
    position: relative;
    width: 100%;
    height: 40vh;
    background-image: url(../img/fond-gauche-accueil.png);
    background-position: center;
    background-size: cover;
    background-attachment: fixed;
    display: flex;
    align-items: center;
}

.texte-bandeau{
    width: 80%;
    color: white;
    text-align: center;
    margin: 0 auto;
    padding-top: 60px;
}

p{
    font-size: 1.2em;
    margin: 0;
    padding: 0;
}

.presentation-projet p{
    font-size: 1em;
}

.texte-bandeau h1{
    font-family: dreamOrphans;
    font-size: 2em;
}



/*---------------------------- MENU SECONDAIRE ----------------------------*/
.nav-categories{
    width: 100%;
    z-index: 98;
    margin-top: 50px;
    margin-bottom: 10px;
    display: flex;
    justify-content: center;
}

.menu-categories{
    padding: 20px;
    margin: 0;
    display: flex;
    list-style: none;
    justify-content: space-around;
    width: 55%;
    height: 45px;
    z-index: 99;
}

.menu-categories li{
    display: block;
    flex-basis: 17%;
    text-align: center;
    height: inherit;
}

.button-categories{
    display: flex;
    justify-content: center;
    align-items: center;
    text-decoration: none;
    padding: 5px 10px;
    color: #001A24;
    /* font-family: aileron; */
    font-family: ceraProLight;
    height: inherit;
    transition: color 250ms ease-in-out;
}

.button-categories:hover,
.selected {
    border: 2px solid #001A24;
    color: #CCB194;
    cursor: pointer;
}



/*---------------------------- GALLERIE DES PROJETS ----------------------------*/
.gallerie{
    display: flex;
    flex-wrap: wrap;
    color: black;
    width: 90%;
    margin: 0 auto;
    justify-content: center;
}

.gallerie h2, .gallerie p{
    font-weight: normal;
    font-size: 0.9em;
    margin: 0;
    padding: 0;
}

.box-gallerie{
    flex-basis: 350px;
    height: 400px;
    margin-top: 50px;
    /* margin-left: 50px; */
    /* background-color: brown; */

    margin-left: 20px;
    margin-right: 20px;

    color: #001A24;

    transition: color ease 500ms;
}

.box-gallerie h2{
    font-family: ceraProMedium;
}

.box-gallerie p{
    font-family: ceraProLight;
}

.box-gallerie:hover{
    color: #CCB194;
}



/*---------------------------- PROJETS ----------------------------*/
.en-tete-projet{
    position: relative;
}

.contexte{
    background-color: #001A24;
    padding: 20px;
    display: flex;
    position: absolute;
    top: 33vh;
    left: 30%;
    color: white;
    width: 40%;
    justify-content: space-around;
} 

.bloc-contexte{
    flex-basis: 12%;
}

.contexte h3, p{
    margin: 0;
    padding: 0;
    font-family: ceraProLight;
}

.contexte h3{
    font-family: ceraProMedium;
}



/*PRÉSENTATION DU PROJET*/
.presentation-projet{
    min-height: 60vh;
    overflow: hidden;
}

.presentation-projet div{
    display: flex;
    width: 100%;
    justify-content: space-between;
}

.img-projet{
    flex-basis: 55%;
    /* height: 60vh; */
}

.texte-projet{
    flex-basis: 45%;
    font-family: ceraProLight;
    padding: 20px;
    padding-left: 3%;
    margin-top: 50px;
}

.texte-projet h2{
    font-family: ceraProMedium;
    margin: 0;
    margin-bottom: 20px;
}

.texte-projet .btn{
    margin-top: 50px;
    border: 2px solid #001A24;
    color: #CCB194;
}

.texte-projet .btn:hover{
    border: none;
    background-color: #001A24;
    color: #CCB194;
    cursor: pointer;
}

.bloc-projet img{
    width: auto;
    height: 60vh;
}

.bloc-projet iframe{
    width: 100%;
    height: 60vh;
}



/*DETAIL POUCE VERT*/
.bandeau-esquisse-poucevert{
    /* background-image: url(../img/fond_plantes.jpg);
    background-size: contain;
    background-position: center; */
    /* display: flex; */
    padding: 20px;
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 50px;
    justify-content: space-around;
    background-color: #003950;
    display: flex;
    align-items: center;
    color: white;
}

.box-1-bandeau-esquisse-poucevert{
    flex-basis: 40%;
    margin: 0 auto;
}

.box-2-bandeau-esquisse-poucevert{
    flex-basis: 40%;
    margin: 0 auto;
    margin-bottom: 30px;
}
.box-2-bandeau-esquisse-poucevert img{
    width: 100%;
    height: auto;
}

.planche_couleur{
    width: 70%;
    margin: 0 auto;
}

.planche_couleur img{
    width: 100%;
    height: auto;
}

.mise_en_avant{
    background-color: #003950;
    padding: 100px;
    margin-top: 50px;
    text-align: center;
}

.mise_en_avant img{
    width: 70%;
    height: auto;
}

/*DÉTAIL FOURAIDE*/
.presentation_fouraide{
    width: 100%;
    min-height: 100vh;
    margin-bottom: 50px;
}

.presentation_fouraide img{
    width: 100%;
    height: auto;
}


/*DETAIL KLEINO*/
.etkleino{
    background-color: white;
    color: black;
}


/*DETAIL RIVIEREABIERE*/
.pres_projet{
    background-color: #003950;
    width: 100%;
    /* padding: 20px; */
    padding-top: 50px;
    padding-bottom: 50px;
    margin-top: 50px;
    text-align: center;
}

.pres_projet img{
    width: 100%;
    height: auto;
}

.fd_blanc{
    background-color: white;
}


/*DETAIL BARBATRUCK*/
.pres_barba img{
    width: 50vw;
    
}


/*GALERIE DU PROJET*/
.gallerie-projet{
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-around;
    padding: 0 10% 0 10%;
    /* background-color: yellowgreen; */
    padding-top: 50px;
}

.imge-gallerie-prj{
    flex-basis: 30%;
    margin-bottom: 50px;
}

.imge-gallerie-prj img{
    width: 100%;
    height: auto;
}


.contexte{
    font-size: 0.8em;
}


h2{
    font-family: ceraProMedium;
}



/*---------------------------- ADAPTATIF TABLETTE ----------------------------*/
@media (max-width: 768px) 
{
    #bandeau-projets{
        width: 100%;
        height: 50vh;
    }

    .texte-bandeau{
        padding-top: 30px;
    }
    
    .contexte{
        top: 40vh;
        left: 15%;
        color: white;
        width: 70%;
        justify-content: space-around;
    } 
    
    .bloc-contexte{
        flex-basis: 12%;
    }
    
    
    .presentation-projet div{
        flex-direction: column;
    }

    .presentation-projet{
        height: auto;
        min-height: 100vh;
    }

    .bloc-projet img{
        width: 100%;
        height: auto;
    }

    .texte-projet{
        width: 90%;
        padding-left: 3%;
        margin: 0 auto;
        margin-top: 30px;
        /* text-align: center; */
    }

    .btn{
        display: block;
        /* margin: 0 auto; */
        margin-top: 30px;
        margin-bottom: 50px;
        text-align: center;
    }

    .imge-gallerie-prj{
        flex-basis: 40%;
        margin-bottom: 40px;
    }

    .bandeau-esquisse-poucevert{
        flex-direction: column;
    }

    .box-1-bandeau-esquisse-poucevert{
        margin-bottom: 50px;
    }
}



/*---------------------------- ADAPTATIF MOBILE ----------------------------*/
@media (max-width: 576px) 
{
    .imge-gallerie-prj{
        flex-basis: 90%;
    }
}