html,
body {
	font-family: Arial, sans-serif;
	height: 100%;
	margin: 0;
}
.carou-xial {
	/* This will hide or show the scrollbar. Use hidden or auto */
	/* Les variables ci-dessous peuvent être set en PHP/Liquid pour avoir quelque chose de plus dynamique */
	--show-scrollbar: auto;
	--show-arrow: 'none';
	--image-by-default: 6; /* Utiliser un .5 quand on depasse le nombre d'image par défaut. Ça montre au user qu'il en a d'autres. */
	--nav-width: 100%; /* Utiliser calc(100% - 64px) quand on active les arrows. */
	width: 100%;
	overflow: hidden;
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 12px;
}
.carou-xial video {
	max-height: 100%;
}
.carou-xial.fullscreen {
	position: fixed;
	inset: 0;
	background: white;
	z-index: 999999999;
}
.carou-xial.fullscreen .slides {
	flex: 1;
}
.carou-xial.fullscreen .carou-xial-nav-container {
	margin-bottom: 24px;
}
.carou-xial.fullscreen .carou-xial-nav {
	justify-content: center;
}
.carou-xial.fullscreen .carou-xial-nav-item {
	flex: 0 0 110px;
}
@media (max-width: 768px) {
	.carou-xial.fullscreen .carou-xial-nav-item {
		flex: 0 0 64px;
	}
}
.carou-xial.fullscreen .carou-xial-zoom-button {
	display: none;
}
.carou-xial.fullscreen .carou-xial-smallscreen-button {
	display: flex;
}
@media (max-width: 768px) {
	.carou-xial {
		--image-by-default: 4.5;
		--show-arrow: flex;
		--nav-width: 100%;
	}
}
.carou-xial .carou-xial-zoom-button, .carou-xial .carou-xial-smallscreen-button {
	position: absolute;
	top: 0;
	right: 0;
	cursor: pointer;
	width: 64px;
	height: 64px;
	display: flex;
	align-items: center;
	justify-content: center;
	background: #ffffff69;
}
.carou-xial .carou-xial-smallscreen-button {
	display: none;
}
.carou-xial .carou-xial-zoom-overlay {
	position: fixed;
	inset: 0;
	background: white;
	z-index: 99;
}
.carou-xial .slide img {
	object-fit: contain;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
}
.carou-xial .slides {
	display: flex;
	overflow-x: var(--show-scrollbar, auto);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	aspect-ratio: 1.3333333333;
}
.carou-xial .slides::-webkit-scrollbar {
	width: 10px;
	height: 0;
	background: transparent;
}
.carou-xial .slides::-webkit-scrollbar-thumb {
	background: transparent;
}
.carou-xial .slides::-webkit-scrollbar-track {
	background: transparent;
}
.carou-xial .slides .slide {
	scroll-snap-align: start;
	flex-shrink: 0;
	width: 100%;
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	overflow: hidden;
}
.carou-xial .slides .slide video {
	width: 100%;
}
.carou-xial-nav-container {
	display: flex;
	align-items: center;
	container-name: summary;
}
.carou-xial-nav-container .carou-xial-nav-action {
	width: 32px;
	height: 32px;
	display: var(--show-arrow);
	align-items: center;
	justify-content: center;
	cursor: pointer;
}
.carou-xial-nav-container .carou-xial-nav-action:hover {
	background: #ededed;
}
.carou-xial-nav {
	--gap: 12px;
	display: flex;
	overflow: hidden;
	gap: var(--gap);
	overflow-x: var(--show-scrollbar, auto);
	scroll-snap-type: x mandatory;
	scroll-behavior: smooth;
	-webkit-overflow-scrolling: touch;
	scrollbar-width: none;
	width: var(--nav-width);
	margin: auto;
	-webkit-user-select: none;
	/* Safari */
	-ms-user-select: none;
	/* IE 10 and IE 11 */
	user-select: none;
	/* Standard syntax */
}
.carou-xial-nav::-webkit-scrollbar {
	width: 10px;
	height: 0;
	background: transparent;
}
.carou-xial-nav::-webkit-scrollbar-thumb {
	background: transparent;
}
.carou-xial-nav::-webkit-scrollbar-track {
	background: transparent;
}
.carou-xial-nav .carou-xial-nav-item {
	width: calc(100%/var(--image-by-default) - var(--gap) + var(--gap)/(var(--image-by-default) - 1) - 0.5px);
	flex: 0 0 calc(100%/var(--image-by-default) - var(--gap) + var(--gap)/(var(--image-by-default) - 1) - 0.5px);
	aspect-ratio: 1;
	position: relative;
}
.carou-xial-nav .carou-xial-nav-item img {
	cursor: pointer;
	object-fit: cover;
	object-position: center;
	height: 100%;
	width: 100%;
	display: block;
}
.carou-xial-nav .carou-xial-nav-item.selected:after {
	content: "";
	display: block;
	position: absolute;
	inset: 0;
	border: 3px solid blue;
}