/* CSS */
:root {
	--muted: #8a8f98;
	--bg: #0f1115;
	--ink: #e9ecf1;
	--accent: #4da3ff;
	--radius: 14px;
	--ratio: 16/9;
	--pad: 10px;
}

.slideshow {
	position: relative;
	max-width: min(1100px, 95vw);
	margin: 24px auto;
	color: var(--ink);
	user-select: none;
}

.slideshow-hint {
	position: relative;
	max-width: min(1100px, 95vw);
	margin: 24px auto;
	color: #585858;
	user-select: none;
}

.viewport {
	position: relative;
	background: var(--bg);
	border-radius: var(--radius);
	overflow: hidden;
	aspect-ratio: var(--ratio); /* aide à la mise en page, sans l'imposer */
	display: grid;
	place-items: center;
}

.slide {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: contain; /* clé : adapte toutes tailles sans recadrer */
	background: #000; /* letterboxing élégant derrière l’image */
	opacity: 0;
	transition: opacity .45s ease;
}

	.slide.active {
		opacity: 1;
	}

/* Contrôles */
.ctrl {
	position: absolute;
	top: 50%;
	transform: translateY(-50%);
	width: 42px;
	height: 42px;
	border-radius: 999px;
	display: grid;
	place-items: center;
	line-height: 1;
	cursor: pointer;
	justify-content: center;
	padding: 0 1.5em 0 1.5em;
	box-shadow: inset 0 0 0 2px #a8a8a8;
	color: #a8a8a8 !important;
}

.prev {
	left: 10px;
}

.next {
	right: 10px;
}

.chev {
	width: 22px;
	height: 22px;
	display: block;
}

.flip-x {
	transform: scaleX(-1);
}



@media (max-width: 640px) {
	:root {
		--height: 48vh;
	}
}