@charset "UTF-8";

/**
 * overlays.css 3.2.0
 *
 * Overlay and modal system. The semi-transparent background is rendered via
 * #overlays:after to decouple its animation from the container slide.
 * The transform is applied to .overlay (not .overlay-container) to
 * prevent layout shift caused by the scrollbar appearing on
 * .overlay.active at open time.
 *
 * STRUCTURE
 * .overlay > .overlay-container > .overlay-header + .overlay-content + .overlay-footer
 *
 * TYPES
 * .overlay              — fullscreen [default]
 * .overlay.short        — not fullscreen
 * .overlay.modal        — floating box — combine with .left/.right/.top/.bottom + .short
 *
 * POSITIONS
 * .overlay.top / .left / .right / .bottom — slide animation
 *
 * BEHAVIORS
 * .overlay.interactive  — keeps page interactive (no click-outside close)
 * .overlay.freeze       — click-outside disabled (eg. cookies)
 * .overlay.instant      — no transition animation (eg. cookies)
 *
 * ALIGNMENT
 * .overlay.vertical-centered — overlay-content vertically centered
 *
 * BODY STATES
 * body.overlayed             — default, no scrollbar
 * body.overlayed.interactive — has scrollbar
 * body.overlayed.freeze      — no interactions
 *
 * CONTROLS
 * .overlay-close / click-outside
 *
 * ACCESSIBILITY
 * visibility used for :focus-visible support
 */


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


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

#overlays {
	--overlay-container-bg-color: var(--bright-color);
	--overlay-border-radius: 0;

	--overlay-bg-opacity: .66;
	--overlay-bg-color: rgba(var(--dark-rgb), .66);

	--overlay-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), 0));
	--overlay-active-filter: drop-shadow(0 0 .25em rgba(var(--dark-rgb), .5));

	--overlay-min-height: 6em;
	--overlay-min-width: min(40rem, calc(100vw - var(--gutter-gap) * 4));
	--overlay-gap: var(--gutter-gap);
}


/* ============================ */
/* ========== @MEDIA ========== */
/* ============================ */

@media (min-width: 0px) {
	#overlays {
		--overlay-max-width: 95%;
		--overlay-close-font-size: var(--font-size);
	}
}
@media (min-width: 760px) {
	#overlays {
		--overlay-max-width: 66%;
		--overlay-close-font-size: calc(var(--font-size) * 1.75);
	}
}
@media (min-width: 1000px) {
	#overlays {
		--overlay-max-width: 50%;
		--overlay-close-font-size: calc(var(--font-size) * 2);
	}
}


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


/* ========================= */
/* ========== OUT ========== */
/* ========================= */

#overlays:after {
	transition: opacity var(--duration-fast) var(--easeInQuint);
}
.overlay {
	transition: opacity var(--duration-fast) var(--easeInQuint),
		backdrop-filter calc(var(--duration-fast) / 2) var(--easeInQuint),
		transform calc(var(--duration-fast) / 2) var(--easeInQuint),
		visibility .01s linear var(--duration-fast);
}
.overlay .overlay-container {
	transition: filter var(--duration-fast) var(--easeInQuint),
		transform var(--duration-fast) var(--easeInQuint);
}


/* ======================== */
/* ========== IN ========== */
/* ======================== */

body.overlayed #overlays:after {
	transition: opacity var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
.overlay.active {
	transition: visibility .01s linear,
		opacity var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
		transform var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
		backdrop-filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}
.overlay.active .overlay-container {
	transition: filter var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2),
		transform var(--duration-fast) var(--easeOutQuint) calc(var(--duration-fast) / 2);
}


/* ============================ */
/* ========== ONLOAD ========== */
/* ============================ */

body.onload .overlay {
	transition: none;
}


/* ================================================== */
/* ==================== OVERLAYS ==================== */
/* ================================================== */

#overlays {
	position: relative;
	z-index: 10000;
	transform: none !important;
	margin: 0 !important;
	pointer-events: none;
}

.overlay {
	position: fixed;
	z-index: 1000;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	display: flex;
	max-height: 100%;
	width: 100%;
	overflow: hidden;
	-webkit-overflow-scrolling: touch;
	opacity: 0;
	pointer-events: none;
	visibility: hidden;
	-webkit-tap-highlight-color: transparent;
	        tap-highlight-color: transparent;
}
.overlay.active {
	overflow-x: hidden;
	overflow-y: auto;
	scroll-behavior: smooth;
	opacity: 1;
	cursor: pointer;
	pointer-events: all;
	visibility: visible;
}

.overlay .overlay-container {
	position: relative;
	z-index: 100;
	display: flex;
	flex-direction: column;
	min-height: 100%;
	min-width: var(--overlay-min-width);
	height: fit-content;
	width: 100%;
	margin: 0 auto;
	cursor: auto;
	pointer-events: none;
	background: var(--overlay-container-bg-color);
	overflow-x: clip; /* for autoheight swipers */
	overflow-y: visible;
	filter: var(--overlay-filter);
}
.overlay .overlay-container.has-auto-height {
	overflow: clip;
}
.overlay.active .overlay-container {
	filter: var(--overlay-active-filter);
}

body.overlayed {
	overflow: hidden !important;
}
body.overlayed:not(.interactive) #wrapper {
	pointer-events: none;
}


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

/**
 * Semi-transparent background rendered via #overlays:after.
 * Decoupled from the .overlay transform — animates independently.
 */

#overlays:after {
	content: "";
	position: fixed;
	z-index: 10;
	inset: 0;
	pointer-events: none;
	background: var(--overlay-bg-color);
	opacity: 0;
}
body.overlayed #overlays:after {
	opacity: 1;
}


/* =================================================== */
/* ==================== POSITIONS ==================== */
/* =================================================== */

/**
 * No position class = fade animation only.
 * With class = slide from the corresponding edge.
 * short = auto-sized container, aligned to the edge.
 */


/* =========================== */
/* ========== SLIDE ========== */
/* =========================== */

.overlay.top {
	transform: translate3d(0, -100%, 0);
}
.overlay.bottom {
	transform: translate3d(0, 100%, 0);
}
.overlay.left {
	transform: translate3d(-100%, 0, 0);
}
.overlay.right {
	transform: translate3d(100%, 0, 0);
}
.overlay.top.active,
.overlay.bottom.active,
.overlay.left.active,
.overlay.right.active {
	transform: translate3d(0, 0, 0);
}


/* =========================== */
/* ========== SHORT ========== */
/* =========================== */

.overlay.short.top .overlay-container,
.overlay.short.bottom .overlay-container {
	min-height: auto;
}
.overlay.short.top .overlay-container {
	margin-top: 0;
	margin-bottom: auto;
}
.overlay.short.bottom .overlay-container {
	margin-top: auto;
	margin-bottom: 0;
}
.overlay.short.left .overlay-container {
	margin-left: 0;
	margin-right: auto;
}
.overlay.short.right .overlay-container {
	margin-left: auto;
	margin-right: 0;
}
.overlay.short.left .overlay-container,
.overlay.short.right .overlay-container {
	max-width: var(--overlay-max-width);
}


/* ========================= */
/* ========== MIN ========== */
/* ========================= */

.overlay.min .overlay-container {
	width: auto;
}


/* =============================================== */
/* ==================== MODAL ==================== */
/* =============================================== */

/**
 * Centered floating box.
 * Combine with .left / .right / .top / .bottom + .short for positioned modals.
 */


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

.overlay.modal {
	display: flex;
	align-items: center;
	padding: var(--gutter-gap);
}
.overlay.modal .overlay-container {
	margin: auto;
	min-height: auto;
	border-radius: var(--overlay-border-radius);
}


/* =============================== */
/* ========== POSITIONS ========== */
/* =============================== */

.overlay.modal.top .overlay-container {
	margin-top: 0;
}
.overlay.modal.bottom .overlay-container {
	margin-bottom: 0;
}
.overlay.modal.left .overlay-container {
	margin-left: 0;
}
.overlay.modal.right .overlay-container {
	margin-right: 0;
}


/* =========================== */
/* ========== SHORT ========== */
/* =========================== */

.overlay.modal.short .overlay-container {
	max-width: var(--overlay-max-width);
}


/* =================================================================== */
/* ==================== HEADER / CONTENT / FOOTER ==================== */
/* =================================================================== */

/**
 * .overlay-container > .overlay-header + .overlay-content + .overlay-footer
 */


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

.overlay .overlay-container .overlay-header,
.overlay .overlay-container .overlay-content,
.overlay .overlay-container .overlay-footer {
	position: relative;
	width: 100%;
	margin-left: auto;
	margin-right: auto;
	background: var(--overlay-container-bg-color);
}
.overlay.active .overlay-container .overlay-header,
.overlay.active .overlay-container .overlay-content,
.overlay.active .overlay-container .overlay-footer {
	pointer-events: all;
}


/* ============================ */
/* ========== STICKY ========== */
/* ============================ */

.overlay .overlay-container .overlay-header.sticky,
.overlay .overlay-container .overlay-footer.sticky {
	position: sticky;
	z-index: 30;
}
.overlay .overlay-container .overlay-header.sticky {
	top: 0;
}
.overlay .overlay-container .overlay-footer.sticky {
	bottom: 0;
}


/* ========================= */
/* ========== MIN ========== */
/* ========================= */

.overlay-header.min,
.overlay-content.min,
.overlay-footer.min {
	padding: 0 !important;
}


/* ============================= */
/* ========== CONTENT ========== */
/* ============================= */

.overlay .overlay-content {
	flex-grow: 1;
	display: inline-flex;
	flex-direction: column;
	align-items: flex-start;
	overflow: unset;
	min-height: var(--overlay-min-height);
	margin-left: auto;
	margin-right: auto;
}
.overlay-content.vertical-centered {
	justify-content: center;
}
.overlay-content.centered {
	align-items: center;
}


/* =========================== */
/* ========== MODAL ========== */
/* =========================== */

.overlay.modal .overlay-container .overlay-header {
	border-radius: var(--overlay-border-radius) var(--overlay-border-radius) 0 0;
}
.overlay.modal .overlay-container .overlay-footer {
	border-radius: 0 0 var(--overlay-border-radius) var(--overlay-border-radius);
}
.overlay.modal .overlay-container .overlay-header.sticky {
	top: calc(var(--overlay-gap) * -1);
}
.overlay.modal .overlay-container .overlay-footer.sticky {
	bottom: calc(var(--overlay-gap) * -1);
}


/* ============================ */
/* ========== @MEDIA ========== */
/* ============================ */

@media (max-width: 760px) {
	.overlay .overlay-container .overlay-header,
	.overlay .overlay-container .overlay-content,
	.overlay .overlay-container .overlay-footer {
		padding: calc(var(--overlay-gap) * 1.75);
	}
}
@media (min-width: 760px) {
	.overlay .overlay-container .overlay-header,
	.overlay .overlay-container .overlay-content,
	.overlay .overlay-container .overlay-footer {
		padding: var(--overlay-gap);
	}
}


/* ================================================= */
/* ==================== LOADING ==================== */
/* ================================================= */

.overlay.is-loading:before {
	display: none;
}
.overlay.is-loading .overlay-container:before {
	content: "";
	display: inline-block;
	vertical-align: middle;
	height: calc(var(--stroke-width) * 10);
	width: calc(var(--stroke-width) * 10);
	border-radius: 50%;
	box-shadow: inset 0 0 0 calc(var(--stroke-width) * 10);
	color: var(--yellow-color);
	animation: pulse .5s infinite linear;
	position: absolute;
	z-index: 110;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	pointer-events: none;
}
.overlay.is-loading .overlay-content {
	opacity: 0;
}


/* =============================================== */
/* ==================== CLOSE ==================== */
/* =============================================== */

.overlay-close {
	display: inline-flex;
	border: 0;
	margin: 0;
	opacity: 0;
	font-size: var(--overlay-close-font-size);
	line-height: 1;
	padding: 1em;
}
.overlay-close::after {
	display: none;
}
.overlay-close:hover > span {
	transform: scale(.8);
}
.overlay.active .overlay-close {
	opacity: 1;
	pointer-events: all;
}
.overlay .overlay-container > .overlay-close:first-child,
.overlay .overlay-header > .overlay-close:first-child {
	position: absolute;
	z-index: 40;
	top: 0;
	right: 0;
}


/* ===================================================== */
/* ==================== INTERACTIVE ==================== */
/* ===================================================== */

/**
 * Keeps page interactive — no click-outside close.
 */

body.overlayed.interactive {
	overflow: auto !important;
}
body.overlayed.interactive main {
	pointer-events: all;
}


/* ========================================================== */
/* ==================== FREEZE / INSTANT ==================== */
/* ========================================================== */

/**
 * No interaction until overlay is closed — eg. cookies banner.
 */

.overlay.freeze:after,
.overlay.instant:after {
	content: "";
	position: fixed;
	z-index: 1;
	top: 0;
	left: 0;
	bottom: 0;
	right: 0;
	opacity: var(--overlay-bg-opacity);
}
.overlay.freeze,
body.overlayed.freeze,
body.freeze.overlayed main {
	user-select: none;
	pointer-events: none;
}


/* ================================================ */
/* ==================== VIEWER ==================== */
/* ================================================ */

.overlay.viewer .thumbnail {
	justify-content: center;
	align-items: center;
	aspect-ratio: auto !important;
	height: calc(100svh - var(--overlay-gap) * 2);
	width: calc(100svw - var(--overlay-gap) * 2);
}
.overlay.viewer img {
	height: 100% !important;
	width: 100% !important;
	padding: calc(var(--overlay-close-font-size) * 2);
	object-fit: contain;
	background: none;
}


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

.overlay.location .overlay-header {
	color: var(--bright-color);
	background: var(--dark-color);
}


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

/* ============================ */
/* ========== HEADER ========== */
/* ============================ */

.overlay.event .overlay-header {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.overlay.event .overlay-header > * {
	margin: 0;
}

/* ========== INFOS ========== */

.overlay.event .overlay-header .infos {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 0;
	font-size: .75em;
	padding: var(--overlay-gap) 0 var(--overlay-gap) var(--overlay-gap);
	margin-right: calc(var(--overlay-close-font-size) * 3);
}
.overlay.event .overlay-header .infos > * {
	margin: 0;
}

/* ============================= */
/* ========== CONTENT ========== */
/* ============================= */

.overlay.event .overlay-content.min > .images,
.overlay.event .overlay-content.min > .content {
	width: 100%;
	padding: var(--overlay-gap);
}

.overlay.event .overlay-content.min .images + .content {
	margin-top: 0;
	padding-top: 0;
}
.overlay.event .overlay-content.min .images + .content .swiper-slide {
	margin-top: 0;
	padding-top: 0;
}
.overlay.event .infos .post-tag {
	order: -1;
}
.overlay.event .infos .inline {
	gap: 1em;
}
.overlay.event .infos .inline > * {
	margin: 0;
}
.overlay.event .post-price {
	font-size: .75em;
}
.overlay.event .overlay-footer {
	display: flex;
	align-items: center;
	justify-content: space-between;
	font-size: .75em;
	padding: calc(var(--overlay-gap) / 2) !important;
}
.overlay.event .overlay-footer > * {
	margin: 0;
}
.overlay.event .overlay-footer .swiper-controls {
	width: auto;
}