@charset "UTF-8";

/**
 * medias.css 1.0.0
 *
 * Base styles for media: images, figures, SVG, thumbnails,
 * blur placeholders, duotone, backgrounds and ratios.
 *
 * THUMBNAIL
 * .thumbnail        — image wrapper with object-fit cover
 * .img-placeholder  — permanent blur layer beneath the main image
 *
 * DUOTONE
 * figure.duotone    — duotone effect via mix-blend-mode on ::before/::after
 * --duotone-background-color and --duotone-filter defined in VARS > CUSTOM
 *
 * BACKGROUND
 * .background-container / .background  — absolutely positioned background image
 * .bg-*                                — positioning utility classes
 */


/* ============================================== */
/* ==================== VARS ==================== */
/* ============================================== */


/* ========== DEFAULT ========== */

:root {
	--thumbnail-border-radius: 0;
	--thumbnail-background-color: var(--light-color);

	--img-placeholder-blur: 2rem;

	--poster-ratio: 3/4;
}


/* ========== CUSTOM ========== */

:root {
	--duotone-background-color: var(--yellow-color);
	--duotone-filter: grayscale(1) contrast(2) brightness(1) saturate(10);
}

body.is-festival,
.item.is-festival {
	--duotone-background-color: var(--edition-secondary-color);
}


/* ==================================================== */
/* ==================== ANIMATIONS ==================== */
/* ==================================================== */


/* ========== DEFAULT ========== */

img {
	transition:
		transform var(--duration-normal) var(--ease),
		opacity var(--duration-fast) var(--ease);
}
.scrolltime-parallax img {
	transition:
		opacity var(--duration-fast) var(--ease);
}


/* ========== CUSTOM ========== */

/* here for custom animation overrides */


/* =============================================== */
/* ==================== COVER ==================== */
/* =============================================== */

.cover {
	max-width: none;
	width: 100%;
}
.cover img {
	aspect-ratio: none;
}


/* ================================================ */
/* ==================== FIGURE ==================== */
/* ================================================ */

figure {
	position: relative;
	display: block;
	height: auto;
	max-width: 100%;
	margin: 0;
	border: 0;
	overflow: hidden;
}
figure > svg {
	display: block;
	width: 100%;
	margin: 0 auto;
}


/* ============================================= */
/* ==================== SVG ==================== */
/* ============================================= */

svg {
	display: block;
	transform: translate3d(0, 0, 0);
	backface-visibility: hidden;
}


/* ============================================= */
/* ==================== IMG ==================== */
/* ============================================= */

img {
	position: relative;
	display: block;
	height: auto;
	width: 100%;
	margin: 0 auto;
	border: 0;
}
figure img {
	z-index: 10;
}

img.full {
	display: block;
	height: auto;
	width: 100%;
	margin: 0 auto;
}


/* ========== IMG WITHIN TEXT ========== */

.alignleft {
	float: left;
	margin: 0 1rem 0 0;
}
.alignright {
	float: right;
	margin: 0 0 0 1rem;
}
.aligncenter {
	display: block;
}
.alignleft:after,
.alignright:after,
.aligncenter:after {
	content: "";
	display: block;
	clear: both;
}


/* ================================================== */
/* ==================== IMG LAZY ==================== */
/* ================================================== */

img[loading='lazy'] {
	opacity: 0;
}


/* ================================================ */
/* ==================== RATIOS ==================== */
/* ================================================ */

.aspect-ratio-1-1 {
	aspect-ratio: 1/1;
}
.aspect-ratio-2-3 {
	aspect-ratio: 2/3;
}
.aspect-ratio-16-9 {
	aspect-ratio: 16/9;
}

/*
[class*="aspect-ratio-"] > *,
[class*="aspect-ratio-"] img {
	display: block;
	height: 100%;
	width: 100%;
	object-fit: cover;
	aspect-ratio: inherit;
}
*/


/* ==================================================== */
/* ==================== BACKGROUND ==================== */
/* ==================================================== */

.background-container {
	position: absolute;
	z-index: -1;
	top: 0;
	left: -100%;
	right: -100%;
	height: 100%;
	width: auto;
	overflow: hidden;
	padding: 0 !important;
	margin: 0 !important;
}
.background {
	position: absolute;
	z-index: -1;
	top: 0;
	left: 0;
	height: 100%;
	width: 100%;
	margin: 0 !important;
	padding: 0 !important;
	max-width: none;
	background-size: cover !important;
	background-repeat: no-repeat !important;
	background-position: center center !important;
	pointer-events: none;
}
.background.contain {
	background-size: contain !important;
	background-position: left !important;
}

.background img {
	height: 100%;
	width: 100%;
	object-fit: cover;
}

.bg-top-left      { background-position: top left !important; }
.bg-top-center    { background-position: top center !important; }
.bg-top-right     { background-position: top right !important; }
.bg-center-left   { background-position: center left !important; }
.bg-center-right  { background-position: center right !important; }
.bg-bottom-left   { background-position: bottom left !important; }
.bg-bottom-center { background-position: bottom center !important; }
.bg-bottom-right  { background-position: bottom right !important; }


/* =================================================== */
/* ==================== THUMBNAIL ==================== */
/* =================================================== */

/**
 * Event ratio: 640×320px — 2:1
 */

.thumbnail {
	position: relative;
	display: block;
	width: 100%;
	border-radius: var(--thumbnail-border-radius);
}
.thumbnail > * {
	max-height: inherit;
}
.thumbnail img {
	position: relative;
	z-index: 10;
	display: block;
	height: 100% !important;
	width: 100% !important;
	margin: 0;
	object-fit: cover;
	background: var(--thumbnail-background-color);
}
.thumbnail img:before {
	font-size: 0;
}

/*
.thumbnail img:not(.img-placeholder),
figure img:not(.img-placeholder) {
	position: relative;
	z-index: 10;
}
*/


/* ===================================================== */
/* ==================== PLACEHOLDER ==================== */
/* ===================================================== */

/**
 * Permanent blur layer beneath the main image.
 * Visible during load, stays visible if image fails.
 */

.img-placeholder,
.thumbnail .img-placeholder,
figure .img-placeholder {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
	filter: blur(var(--img-placeholder-blur));
	/*transform: scale(1.1);*/
	opacity: 1;
	z-index: 1;
}
figure.duotone .img-placeholder {
	filter: blur(var(--img-placeholder-blur)) var(--duotone-filter);
}


/* ================================================= */
/* ==================== DUOTONE ==================== */
/* ================================================= */
/*
figure.duotone:before,
figure.duotone:after {
	content: '';
	position: absolute;
	z-index: 20;
	inset: 0;
	pointer-events: none;
}
figure.duotone:before {
	mix-blend-mode: soft-light;
	background: var(--duotone-background-color);
}
figure.duotone:after {
	mix-blend-mode: multiply;
	background: var(--duotone-background-color);
}
figure.duotone img {
	filter: grayscale(1) contrast(2) brightness(1) saturate(10);
}
*/
figure.duotone img {
	filter: grayscale(1);
}

/* ========== GRIDS ========== */

.grid.events figure.duotone:before,
.grid.events figure.duotone:after {
	opacity: 1;
}
.grid.events a.item-content:hover figure.duotone img {
	filter: none;
}
.grid.events a.item-content:hover figure.duotone:before,
.grid.events a.item-content:hover figure.duotone:after {
	opacity: 0;
}

body.is-festival .overlay-header figure.duotone:before,
.grid.events.is-festival figure.duotone:before,
.grid.events .item.is-festival figure.duotone:before {
	mix-blend-mode: screen;
}
body.is-festival .overlay-header figure.duotone:after,
.grid.events.is-festival figure.duotone:after,
.grid.events .item.is-festival figure.duotone:after {
	mix-blend-mode: soft-light;
}




/* ==================================================== */
/* ==================== THUMBNAILS ==================== */
/* ==================================================== */


/* ========== DEFAULT ========== */

.thumbnails > * {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	aspect-ratio: inherit;
	pointer-events: none;
}


/* ========== ANIMATED ========== */

/*
--thumbnail-count: 2 == default / overridden by style
--display-duration: calc(var(--duration-normal) * (6 / var(--thumbnail-count))); / 5 = normal speed

*/

.thumbnails.animated {
	--thumbnail-count: 2;
	--display-duration: calc(var(--duration-normal) * (5 / var(--thumbnail-count)));
	transition: opacity var(--duration-fast) var(--ease);
}

.thumbnails.animated > * {
	opacity: 0;
}
.thumbnails.animated .thumbnail:first-child {
	opacity: 1;
}

/********** ANIMATION PAR NOMBRE D'IMAGES **********/

*:hover > .thumbnails.animated[style*="--thumbnail-count: 2"] .thumbnail {
	animation: thumbnailsCycle2 calc(2 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 3"] .thumbnail {
	animation: thumbnailsCycle3 calc(3 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 4"] .thumbnail {
	animation: thumbnailsCycle4 calc(4 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 5"] .thumbnail {
	animation: thumbnailsCycle5 calc(5 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 6"] .thumbnail {
	animation: thumbnailsCycle6 calc(6 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 7"] .thumbnail {
	animation: thumbnailsCycle7 calc(7 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 8"] .thumbnail {
	animation: thumbnailsCycle8 calc(8 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 9"] .thumbnail {
	animation: thumbnailsCycle9 calc(9 * var(--display-duration)) step-end infinite;
}
*:hover > .thumbnails.animated[style*="--thumbnail-count: 10"] .thumbnail {
	animation: thumbnailsCycle10 calc(10 * var(--display-duration)) step-end infinite;
}

/********** DELAYS **********/

.thumbnails.animated .thumbnail:nth-child(1) { animation-delay: calc(0 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(2) { animation-delay: calc(1 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(3) { animation-delay: calc(2 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(4) { animation-delay: calc(3 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(5) { animation-delay: calc(4 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(6) { animation-delay: calc(5 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(7) { animation-delay: calc(6 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(8) { animation-delay: calc(7 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(9) { animation-delay: calc(8 * var(--display-duration)) !important; }
.thumbnails.animated .thumbnail:nth-child(10) { animation-delay: calc(9 * var(--display-duration)) !important; }

/********** KEYFRAMES **********/

@keyframes thumbnailsCycle2 {
	0% { opacity: 1; }
	50% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle3 {
	0% { opacity: 1; }
	33.33% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle4 {
	0% { opacity: 1; }
	25% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle5 {
	0% { opacity: 1; }
	20% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle6 {
	0% { opacity: 1; }
	16.66% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle7 {
	0% { opacity: 1; }
	14.28% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle8 {
	0% { opacity: 1; }
	12.5% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle9 {
	0% { opacity: 1; }
	11.11% { opacity: 0; }
	100% { opacity: 0; }
}
@keyframes thumbnailsCycle10 {
	0% { opacity: 1; }
	10% { opacity: 0; }
	100% { opacity: 0; }
}

/* ================================================ */
/* ==================== CUSTOM ==================== */
/* ================================================ */

/* here for custom media overrides */