/***************************************************************************************/
/* MODULE *

Modules are the reusable, modular parts of our design.
They are the callouts, the sidebar sections, the product lists and so on.

/***************************************************************************************/
/** DEBUG **/

/***************************************************************************************/
/* Variables css */

:root
{
	--border-size-splide: 2px;

	--color-splide-main-1: var(--color-3);		/* ~ white */		/* border */
	--color-splide-main-2: var(--color-n);		/* transparent */	/* background-color */
	--color-splide-main-3: var(--color-2);		/* ~ black */		/* color */

	--color-splide-active-1: var(--color-3);	/* ~ white */		/* border */
	--color-splide-active-2: var(--color-n);	/* transparent */	/* background-color */
	--color-splide-active-3: var(--color-0);	/* black */			/* color */

	--bg-color-fullscreen: rgba(127, 127, 127, 0.9);
}

/***************************************************************************************/
/* Container */

.splide-container
{
	margin: -1px;	/* UTILE ? */
	margin: 0;

	/* utile ? *
	background-color: var(--color-3);
	border: 1px solid var(--color-n);
	margin: -1px;
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
	/* utile */
}

/***************************************************************************************/
/* Slide */

.splide#main-slider
{

}

.splide#thumbnails-slider
{
	margin: 1em auto;
	max-width: calc(100% - 12em);
	height: 3em;
}

/* TEST (=> border-radius) *
.splide__slide,
.splide__slide img
{
	-moz-background-clip: padding; -webkit-background-clip: padding-box; background-clip: padding-box;
}
/* TEST (=> border-radius) */

.splide__slide
{
/*	background-color: var(--color-splide-main-2);*/
/*	border: var(--border-size-splide) solid var(--color-splide-main-1);*/
	border: 0;

	transition: background-color .1s ease,
				border .1s ease,
				color 0.1s ease,
				opacity 0.1s ease;

/* TEST (=> border-radius) *
	-webkit-border-radius: var(--border-radius-1);
	   -moz-border-radius: var(--border-radius-1);
	     -o-border-radius: var(--border-radius-1);
	        border-radius: var(--border-radius-1);
/* TEST (=> border-radius) */
}

.splide#thumbnails-slider .splide__slide
{
	height: 3em;
	opacity: 0.5;
}

.splide#thumbnails-slider .splide__slide.is-active
{
/*	background-color: var(--color-splide-active-2);*/
/*	border-color: var(--color-splide-active-1);*/

	opacity: 1;
}

.splide__slide img
{
	display: block;

	width: 100%;
	height: 100%;
	object-fit: contain;
	background-color: var(--color-1);

/* TEST (=> border-radius) *
	-webkit-border-radius: calc(var(--border-radius-1) - 0.1rem);
	   -moz-border-radius: calc(var(--border-radius-1) - 0.1rem);
	     -o-border-radius: calc(var(--border-radius-1) - 0.1rem);
	        border-radius: calc(var(--border-radius-1) - 0.1rem);
/* TEST (=> border-radius) */

	/* pointer-events: none; */
}

/***************************************************************************************/
/* Buttons */

.splide__arrow,
.splide__arrow:not([disabled]),
.splide__fullscreen
{
	transition:
		background-color .2s ease,
		border .2s ease,
		color .2s ease;
}

.splide__arrow,
.splide__fullscreen
{
	opacity: 1;

	border: 0;
	background-color: var(--color-splide-main-2);
	color: var(--color-splide-main-3);
}

.splide__arrow:not([disabled]):hover,
.splide__fullscreen:hover
{
/*	border: var(--border-size-splide) solid var(--color-splide-active-1);*/
	border: 0;
	background-color: var(--color-splide-active-2);
	color: var(--color-splide-active-3);
}

.splide__slide,
.splide__arrow:not([disabled]):hover,
.splide__fullscreen
{
	cursor: pointer;
}

/***************************************************************************************/
/* Arrow buttons */
.splide__arrow,
.splide__arrow:not([disabled])
{
	transition:
		background-color .2s ease,
		border .2s ease,
		color .2s ease,
		opacity .2s ease;
}

.splide__arrow
{
	width: 3em;			/* 4rem */
	height: 3em;		/* 4rem */

	/* TEST *
	background-color: var(--color-n);
	color: var(--color-1);
	/* TEST */
}
.splide__arrow[disabled]
{
	cursor: initial;
	opacity: 0.3;
}

.splide__arrow--prev	{ left: -6em; }		/* -4rem */
.splide__arrow--next	{ right: -6em; }	/* -4rem */

.splide__arrow svg
{
	position: absolute;
	width: 2em;			/* 3rem */
	height: 2em;		/* 3rem */
	fill: currentColor;
}

/***************************************************************************************/
/* Fullscreen button */

.splide__fullscreen
{
	position: absolute;
	display: block;
	width: 2em;			/* 2rem */
	height: 2em;		/* 2rem */

	-webkit-border-radius: var(--border-radius-1);
	   -moz-border-radius: var(--border-radius-1);
	     -o-border-radius: var(--border-radius-1);
	        border-radius: var(--border-radius-1);

	/* TEST *
	border: none;
	background-color: var(--color-n);
	color: var(--color-1);
	/* TEST */
}

.splide__fullscreen svg
{
	position: absolute;
	width: 1.5em;		/* 1.5rem */
	height: 1.5em;		/* 1.5rem */
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	fill: currentColor;
}

/***************************************************************************************/
/* Fullscreen overlay */

.fullscreen-overlay
{
	display: none;

	position: fixed;
	z-index: 1;
	top: 0; bottom: 0; left: 0; right: 0;
	width: 100%;
	height: 100%;

	/* TEST */
	border: 0;
	background-color: var(--color-1);
	/* TEST */
}

.fullscreen-overlay.is-active
{
	display: block;
}

.fullscreen-view,
.fullscreen-exit
{
	top: 0.5em;
	right: 0.5em;
}

.fullscreen-exit
{
	position: absolute;
	z-index: 3;
}

.splide__slide,
.fullscreen-view
{
	cursor: zoom-in;
}

.fullscreen-exit
{
	cursor: zoom-out;
}

/***************************************************************************************/
/* The slide in the fullscreen overlay */

.fullscreen-overlay
{
	background-color: var(--bg-color-fullscreen);
	z-index: 999;
}

.fullscreen-overlay .splide-container
{
	margin: 0;
	padding: 0.5em;

	height: 100%;
	width: 100%;
}

.splide#main-slider__fullscreen
{
	height: 100%;
	max-width: calc(100% - 12em);
	margin: 0 auto;
}

.splide#main-slider__fullscreen .splide__track
{
	height: 100%;
}

.splide#main-slider__fullscreen .splide__list
{

}

.splide#main-slider__fullscreen .splide__slide
{
	cursor: zoom-out;
}

.splide#main-slider__fullscreen img
{
	background-color: transparent;
}

.splide#main-slider__fullscreen .splide__arrow--prev	{ left: -4em; }
.splide#main-slider__fullscreen .splide__arrow--next	{ right: -4em; }

/* On narrow screens, use the full viewport width and keep navigation on the photo. */
@media screen and (max-width: 1024px)
{
	.fullscreen-overlay .splide-container
	{
		box-sizing: border-box;
	}

	.splide#main-slider__fullscreen
	{
		max-width: 100%;
	}

	.splide#main-slider__fullscreen .splide__arrow
	{
		width: 2.75em;
		height: 2.75em;
		background-color: rgba(0, 0, 0, 0.6);
		color: #fff;
	}

	.splide#main-slider__fullscreen .splide__arrow--prev { left: 0.5em; }
	.splide#main-slider__fullscreen .splide__arrow--next { right: 0.5em; }
}