/* ===========================
   REALISATIONS PAGE
   =========================== */
main.container {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.realisation-table {
    display: table;
    margin: 0 auto;
    border-collapse: collapse;
    width: 90%;
}

.nav-cell {
    width: 50px;
    text-align: center;
    vertical-align: middle;
}

.img-cell {
    max-width: 200px;
    text-align: center;
    vertical-align: middle;
}

.img-avant,
.img-apres {
    max-width: 100%;
    height: auto;
    border-radius: 10px;
    border: 2px solid #d2a374;
}

.desc-cell {
    padding: 10px;
    vertical-align: top;
    background: white;
    border: 1px solid #ccc;
}

.text-center {
    text-align: center;
    font-weight: normal;
    color: #333;
}

/* Boutons navigation */
.nav-btn {
    font-size: 2rem;
    background-color: #007BFF;
    border-radius: 50%;
    color: white;
    width: 50px;
    height: 50px;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.3s ease;
}

.nav-btn:hover:not(:disabled) {
    background-color: #0056b3;
}

.nav-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}

/* ===========================
   MOBILE
   =========================== */
.realisation-mobile {
    display: none;
}

@media (max-width: 768px) {
	
	/* Empêche le header de bouger au scroll sur mobile */
	html, body {
		overflow-x: hidden;
	}

	header {
		position: sticky;
		top: 0;
		z-index: 1000;
		background: inherit; /* garde la couleur/fond actuel */
	}
	
    .realisation-table {
        display: none;
    }

    .realisation-mobile {
        display: flex;
        flex-direction: column;
        gap: 15px;
        width: 100%;
        padding: 0 10px;
    }

    /* Ligne 1 : Photos */
    .mobile-photos {
        display: flex;
        justify-content: center;
        gap: 10px;
    }

    .mobile-photos img {
        width: 48%;
        border-radius: 10px;
        border: 2px solid #d2a374;
    }

    /* Ligne 2 : Nav + infos */
    .mobile-nav-infos {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .mobile-infos-text {
        flex: 1;
        text-align: center;
        font-size: 0.9rem;
    }

    /* Ligne 3 : Descriptif */
    .mobile-desc {
        background: white;
        border: 1px solid #ccc;
        padding: 10px;
    }
}