#projets {
    position: relative;
    height: max-content;
    display: flex;
    flex-direction: column;
    min-height: calc(100vh - 69px);
    height: auto;
    width: 95%;
    margin: 0 auto;
    padding-bottom: 35px;
}

#projets h2 {
    display: block;
    width: max-content;
    margin: 22px 0;
    font-size: 3em;
}

.bloc-projet {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    flex-wrap: wrap;
    width: 100%;
    margin-bottom: 20px;
    gap: 60px;
}

.projet {
    cursor: pointer;
    position: relative;
    overflow: hidden;
    height: 300px;
    width: 100%;
    max-width: 30%;
    min-width: 28%;

    a {
        height: 100%;
        width: 100%;
        display: flex;
        flex-direction: column;

        img {
            height: 250px;
            border-radius: 5px;
            margin-bottom: 6px;
            filter: grayscale(1);
            transition: all 250ms ease-in-out;
            object-fit: cover;
        }

        h3 {
            display: inline-block;
            height: 22px;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }

        p {
            height: 22px;
        }

        &:hover img {
            filter: grayscale(0);
        }
    }
}


#tri {
    height: max-content;
    width: 100%;
    margin-bottom: 20px;
    display: none;
    flex-wrap: wrap;
}

#tri button {
    cursor: pointer;
    font-size: 1em;
    font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;
    border: 1px solid #140B6E;
    font-weight: 500;
    background-color: #FFFFFF;
    height: max-content;
    width: max-content;
    min-width: max-content;
    padding: 8px 12px;
    border-radius: 2px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-right: 8px;
    margin-bottom: 8px;
}

#tri button:hover, #tri button.active {
    background-color: #140B6E;
    color: white;
}

#projects {
    height: max-content;
    display: flex;
    flex-direction: column;
}

#projects a {
    margin-bottom: 10px;
}

#projects button {
    cursor: pointer;
    background-color: transparent;
    font-family: 'PT Sans Narrow', Arial, Helvetica, sans-serif;
    text-align: left;
    color: #333333;
    font-size: 1em;
    margin-left: 15px;
    padding: 2px 7px;
    border: none;
}

#projects button:hover, #projects button.active {
    background-color: #140B6E;
    color: white;
}

li:nth-child(3):hover {
    font-size: 1.2em;
}

li:nth-child(3) a:hover {
    font-size: 1.1em;
}

.none {
    display: none;
    visibility: hidden;
}

.active {
    display: flex;
    visibility: visible;
}