body {
    overflow-x: hidden;
}

/* ZONE D'ARRIVE SUR LA PAGE */
.page-title-zone {
    display: flex;
    flex-direction: column;
    gap: 32px;
    align-items: center;
    padding-top: 128px;
}

.page-title {
    font-family: Rajdhani;
    font-size: 48px;
    color: #A2BF95;
    font-weight: 300;
}

.page-title-description {
    font-size: 18px;
    font-family: Supreme;
    font-weight: 500;
    width: 50%;
}

.left-shape {
    position: absolute;
    width: 500px;
    bottom: -20px;
    z-index: -1;
}

.right-shape {
    position: absolute;
    width: 600px;
    top: 20%;
    left: 100%;
    z-index: -1;
}

/* STYLE DES IMAGES ET DES TEXTES DES PROJETS */
.project-img {
    width: 500px;
    filter: drop-shadow(#2B2B2B 0px 0px 10px);
    flex: none;
}

.project-description {
    display: flex;
    flex-direction: column;
    gap: 32px;
}

.discover-button {
    border: none;
    background: #A2BF95;
    padding: 8px 16px;
    border-radius: 8px;
    overflow: hidden;
    position: relative;
    transition: 0.3s ease-in-out;
    z-index: 0;
    cursor: pointer;
    font-size: 18px;
    font-family: rajdhani;
    font-weight: 500;
}

.discover-button::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    background: #b9cfb0;
    width: 0%;
    height: 100%;
    transition: 0.5s ease-in-out;
    z-index: -1;
}

.discover-button:hover::after {
    width: 100%;
}

/* STYLE DES PROJETS AVEC L'IMAGE A GAUCHE */
.project-left {
    display: flex;
    align-items: center;
    background: #0F0F0F;
    padding: 64px;
    gap: 128px;
    position: relative;
}

/* STYLE DES PROJETS AVEC L'IMAGE A DROITE */
.project-right {
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    padding: 64px;
    gap: 128px;
    position: relative;
}

@media (width < 555px) {
    footer {
        grid-template-columns: 1fr;
    }
    .legal-mention {
        text-align: right;
    }
}