/* ========================= */
/* LAYOUT */
/* ========================= */

.expos-main {
	width: 100%;
	padding: 1rem;
}

/* container YAML */
.expos-gallery {
	display: flex;
	flex-direction: column;
	gap: 10vh;

	scroll-snap-type: y mandatory;
}

/* ========================= */
/* ITEMS (SCENES STYLE) */
/* ========================= */

.news-item {
	
	scroll-snap-align: center;
	scroll-snap-stop: always;

	max-width: 75ch;
	margin: 0 auto;

	padding: 2rem;

	border-radius: 14px;

	/* BACKDROP SUBTIL */
	background: rgba(255, 255, 255, 0.03);
	border: 1px solid rgba(255, 255, 255, 0.08);

	box-shadow: 0 10px 40px rgba(0, 0, 0, 0.35);


	/* état cinéma */
	opacity: 0.5;

	transition: all 0.7s cubic-bezier(0.2, 0.8, 0.2, 1);

	display: flex;
	flex-direction: column;
	gap: 1rem;
}

/* ACTIVE = focus scène */
.news-item.active {
	opacity: 1;
	transform: scale(1);

	background: rgba(255, 255, 255, 0.06);
	border: 1px solid rgba(198, 169, 114, 0.25);
	box-shadow: 0 20px 70px rgba(0, 0, 0, 0.55);
}

/* ========================= */
/* TEXTE */
/* ========================= */

.news-item .date {
	opacity: 0.6;
	font-family: monospace;
	letter-spacing: 0.08em;
}

.news-item a {
	color: #c6a972;
	text-decoration: none;
}

.news-item a:hover {
	text-decoration: underline;
}

/* ========================= */
/* IMAGES */
/* ========================= */

.news-item img {
	display: block;

	max-width: 100%;
	max-height: 60vh;

	width: auto;
	height: auto;

	border-radius: 10px;
	margin-top: 0.8rem;

	/* CRUCIAL */
	object-fit: contain;
}
.news-item .desc {
	line-height: 1.6;
	opacity: 0.85;
}
/* ========================= */
/* MOBILE */
/* ========================= */

@media (max-width: 800px) {
	.expos-main {
		padding: 1rem;
	}
}


html {
	scroll-behavior: smooth;
}