.project-header img,
.project-images img {
    border-radius: 0;
}


.project-header {
    height: 80vh;
}

.project-header img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.project-images {
    display: flex;
    gap: 5px; /* espace entre images */
    padding: 5px; /* espace global autour */
    box-sizing: border-box;
}


.project-images img {
    width: 33.333%;
    height: 60vh;
    object-fit: cover;
    cursor: zoom-in;
}

/* TEXTE */
.project-text {
    padding: 30px;
    max-width: 900px;
}

.project-text h1 {
    font-size: 28px;
    margin-bottom: 20px;
}

.project-text p {
    font-size: 18px;
    line-height: 1.4;
}

.description {
    font-size: 20px;
    padding: 30px;
    line-height: 1.5;
}


.navigation-button {
    position: fixed;
	color: white;
    bottom: 20px;
    padding: 0 15px;
    font-size: 32px;
    color: blueviolet;
    text-decoration: none;
    z-index: 10000;       /* au-dessus du reste */
    cursor: pointer;
}

.navigation-button.prev-page {
    left: 20px;
		color: white;
}

.navigation-button.next-page {
    right: 20px;
		color: white;
}

.navigation-button:hover {
    text-decoration: underline;
}

.row.project-images {
    display: flex;
    gap: 5px;          /* espace de 5px entre les images */
    height: auto;      /* laisse les images déterminer la hauteur */
}

.half-screen-block {
    flex: 1;            /* chaque image prend une part égale */
    overflow: hidden;
}

.half-screen-block img {
    width: 100%;
    height: auto;       /* hauteur automatique pour garder les proportions */
    object-fit: cover;  /* remplissage sans déformation */
    border-radius: 0;   /* pas de bord arrondi */
    cursor: zoom-in;
}



/* MOBILE */
@media (max-width: 768px) {
    .project-images {
        flex-direction: column;
    }

    .project-images img {
        width: 100%;
        height: auto;
    }

    .project-header {
        height: auto;
    }
}