@charset "UTF-8";

/**************************/
/**************************/
/********** VARS **********/
/**************************/
/**************************/

/*****************************/
/********** DEFAULT **********/
/*****************************/

:root {
	--thumbnail-border-radius: 0;

	--img-placeholder-blur: 2rem; /* 10em */
}
/*
.grid {
	--img-placeholder-blur: 10em;
}
*/
.thumbnail.action {
	--thumbnail-border-radius: .5em;
}

:root {
	--poster-ratio: 3/4;
}
.focus,
.grid.events,
.poster.event {
	--poster-ratio: 2/1;
}

/*****************************/
/********** DUOTONE **********/
/*****************************/

:root {
	--duotone-background-color: var(--yellow-color);
	/*--duotone-background-color: rgb(102, 87, 0);*/
	--duotone-filter: grayscale(1) contrast(2) brightness(1) saturate(10);
}
body.is-festival,
.item.is-festival {
	--duotone-background-color: var(--edition-secondary-color);
}

/********************************/
/********************************/
/********** ANIMATIONS **********/
/********************************/
/********************************/

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

/*****************************/
/*****************************/
/********** 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;
	/*mix-blend-mode:  screen;*/
	background: var(--duotone-background-color);
}
figure.duotone:after {
	mix-blend-mode:  multiply;
	/*mix-blend-mode:  soft-light;*/
	background: var(--duotone-background-color);
}
figure.duotone img {
	filter: grayscale(1) contrast(2) brightness(1) saturate(10);
}

/***************************/
/********** GRIDS **********/
/***************************/

.grid.events figure.duotone:before,
.grid.events figure.duotone:after {
	/*opacity: 0;*/
	opacity: 1;
}
/*
.grid.events figure.duotone img {
	filter: var(--duotone-filter);
}
*/
.grid.events a.item-content:hover figure.duotone img {
	/*filter: var(--duotone-filter);*/
	filter: none;
	/*transform: scale(1.1);*/
}
.grid.events a.item-content:hover figure.duotone:before,
.grid.events a.item-content:hover figure.duotone:after {
	/*opacity: 1;*/
	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;
}

/****************************/
/****************************/
/********** MEDIAS **********/
/****************************/
/****************************/

/****************************/
/********** FIGURE **********/
/****************************/

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

/*************************/
/********** 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 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;
}

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




/*******************************/
/*******************************/
/********** THUMBNAIL **********/
/*******************************/
/*******************************/

/**
event ratio = 640 x 320 px / 2:1
**/

/*****************************/
/********** DEFAULT **********/
/*****************************/

.thumbnail {
	position: relative;
	display: block;
	width: 100%;
	background: var(--bright-color);
	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;
}
.thumbnail img:before {
	font-size: 0;
}

.focus .thumbnail,
.thumbnail.focus {
	max-height: 60svh;
	max-height: calc(100svh - var(--header-height) * 3.5)
}

/********************************/
/********************************/
/********** 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; }
}

/*******************************/
/*******************************/
/********** IMG / SVG **********/
/*******************************/
/*******************************/

/********** IMG **********/

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;
}

/********** SVG **********/

figure > svg {
	display:block;
	width:100%;
	margin:0 auto;
}

/********** 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;
	-webkit-background-size:cover !important;
	   -moz-background-size:cover !important;
	     -o-background-size:cover !important;
	        background-size:cover !important;
	background-repeat:no-repeat !important;
	background-position:center center !important;
	pointer-events: none;
}
.background.contain {
	-webkit-background-size:contain !important;
	   -moz-background-size:contain !important;
	     -o-background-size:contain !important;
	        background-size:contain !important;
	background-position:left !important;
}
.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;
}

/*********************************/
/*********************************/
/********** PLACEHOLDER **********/
/*********************************/
/*********************************/


/* Tiny placeholder - permanent blur layer */
.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);
}

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



/********************************/
/********************************/
/********** GRID FLUID **********/
/********************************/
/********************************/

/**
google images style / JS

figure : aspect-ratio is inline: style="aspect-ratio: 22/13;"
aspect-ratio on item also for less flickering
.grid-initialized : after JS
**/

.grid.fluid .items {
	display: flex;
	flex-wrap: wrap;
	gap: var(--grid-gap);
}
.grid.fluid .item {
	flex: 1 0 auto;
	width: auto;
	height: var(--grid-fluid-height);
}
.grid.fluid figure {
	width: 100%;
	height: 100%;
	position: relative;
	max-width: none;
}
.grid.fluid figure img:not(.img-placeholder) {
	height: 100%;
	object-fit: cover;
}
.grid.fluid.grid-initialized .item {
    height: auto;
    flex-grow: 0;
	aspect-ratio: auto !important;
}
.grid.fluid.grid-initialized .item-content,
.grid.fluid.grid-initialized figure {
    height: auto;
}



/** WP **/

.blocks-gallery-grid:not(.is-cropped) {
	display: flex;
	flex-wrap: wrap;
	gap: var(--grid-gap);
}
.blocks-gallery-grid:not(.is-cropped) figure {
	flex: 1 0 auto;
	width: auto !important;
	height: var(--grid-fluid-height);
}
.blocks-gallery-grid:not(.is-cropped) img {
	width: 100% !important;
}