@charset "utf-8";

/* --- ROOT --- */

	:root {

		/* typography */
		--font-family-title:			'Barlow', sans-serif;
		--font-family-navigation:		'Barlow', sans-serif;
		--font-family-button:			'Barlow', sans-serif;
		--font-family-xtra:				'Barlow', sans-serif;
		--font-family-content:			'Barlow', sans-serif;

		--font-weight-light:			300; /* 300 --> 100 */
		--font-weight-regular:			300; /* 400 --> 300 */
		--font-weight-bold:				500; /* 700 --> 500 */
		--font-weight-xtra-bold:		700; /* 900 --> 700 */

		/* colors */
		--primary-color:				#F04E23;
		--secondary-color:				#F7A9B4;
		--third-color:					#B93219;
		--fourth-color:					#F7F4D5;
		--fifth-color:					#87962D;

		--paloma-color:					#ea503f;
		--nimes-metropole-color:		#27337b;

		--deezer-orange-color:			#a238ff;
		--facebook-blue-color:			#0766ff;
		--instagram-dark-grey-color:	#262626;
		--pinterest-red-color:			#e71c26;
		--soundcloud-orange-color:		#f50;
		--spotify-green-color:			#1ed760;
		--tiktok-blue-color:			#25f4ee;
		--tiktok-red-color:				#fe2c55;
		--youtube-dark-grey-color:		#212121;
		--youtube-red-color:			#f03;

		--black-color:		#000;
		--black-a5-color:	#0000000d;
		--black-a6-color:	#0000000f;
		--black-a7-color:	#00000012;
		--black-a8-color:	#00000014;
		--black-a9-color:	#00000017;
		--black-a10-color:	#0000001a;
		--black-a15-color:	#00000026;
		--black-a20-color:	#0003;
		--black-a30-color:	#0000004d;
		--black-a40-color:	#0006;
		--black-a50-color:	#0000007f;
		--black-a60-color:	#0009;
		--black-a70-color:	#000000b3;
		--black-a80-color:	#000c;
		--black-a85-color:	#000000da;
		--black-a90-color:	#000000e5;
		--black-a95-color:	#000000f3;

		--grey5-color:		#0d0d0d;
		--grey7-color:		#111;
		--grey10-color:		#1a1a1a;
		--grey13-color:		#222;
		--grey15-color:		#262626;
		--grey20-color:		#333;
		--grey27-color:		#444;
		--grey30-color:		#4d4d4d;
		--grey33-color:		#555;
		--grey35-color:		#5a5a5a;
		--grey40-color:		#666;
		--grey46-color:		#777;
		--grey50-color:		#7f7f7f;
		--grey53-color:		#888;
		--grey55-color:		#8d8d8d;
		--grey60-color:		#999;
		--grey65-color:		#aaa;
		--grey70-color:		#b3b3b3;
		--grey73-color:		#bbb;
		--grey80-color:		#ccc;
		--grey86-color:		#ddd;
		--grey90-color:		#e5e5e5;
		--grey93-color:		#eee;

		--grey5-a20-color:	#0d0d0d33;
		--grey20-a70-color:	#333333b3;
		--grey15-a70-color:	#26262666;
		--grey80-a50-color:	#cccccc7f;

		--white-color:		#fff;
		--white-a0-color:	#fff0;
		--white-a5-color:	#ffffff0d;
		--white-a10-color:	#ffffff1a;
		--white-a15-color:	#FFFFFF26;
		--white-a20-color:	#ffffff33;
		--white-a30-color:	#ffffff4d;
		--white-a40-color:	#ffffff66;
		--white-a50-color:	#ffffff7f;
		--white-a60-color:	#ffffff99;
		--white-a70-color:	#ffffffb3;
		--white-a80-color:	#ffffffcc;
		--white-a90-color:	#ffffffe5;


		/* content */
		--content-color:				var(--white-color);
		--content-fill:					var(--black-color);

		/* action bar */
		--action-bar-text:				var(--white-color);
		--action-bar-fill:				var(--primary-color);

		/* control bar */
		--control-bar-color:			var(--content-color);
		--control-bar-fill:				var(--grey5-a20-color);

		/* drawer */
		--drawer-text:					var(--black-color);
		--drawer-fill:					var(--white-color);

		/* favorite */
		--bar-filter-favorite-color:	var(--black-color);
		--bar-filter-favorite-fill:		var(--secondary-color);

		/* session */
		--pill-session-color:			var(--white-color);
		--pill-session-fill:			var(--white-a15-color);
		--bar-filter-session-color:		var(--white-color);
		--bar-filter-session-fill:		var(--grey20-color);

		/* mood */
		--pill-mood-color:				var(--white-color);
		--pill-mood-fill:				var(--white-a20-color);
		--bar-filter-mood-color:		var(--white-color);
		--bar-filter-mood-fill:			var(--third-color);

		/* genre */
		--pill-genre-color:				var(--white-color);
		--pill-genre-fill:				var(--white-a20-color);
		--bar-filter-genre-color:		var(--black-color);
		--bar-filter-genre-fill:		var(--fourth-color);

		/* place */
		--pill-place-color:				var(--white-color);
		--pill-place-fill:				var(--white-a20-color);
		--bar-filter-place-color:		var(--white-color);
		--bar-filter-place-fill:		var(--third-color);

		/* country */
		--pill-country-color:			var(--white-color);
		--pill-country-fill:			var(--white-a20-color);
		--bar-filter-country-color: 	var(--white-color);
		--bar-filter-country-fill:		var(--fifth-color);

		/* tag */
		--pill-tag-color:				var(--white-color);
		--pill-tag-fill:				var(--white-a20-color);
		--bar-filter-tag-color:			var(--black-color);
		--bar-filter-tag-fill:			var(--grey80-color);

		/* active */
		--pill-session-active-color:	var(--white-color);
		--pill-session-active-fill:		var(--primary-color);
		--pill-tag-active-color:		var(--bar-filter-tag-color);
		--pill-tag-active-fill:			var(--bar-filter-tag-fill);

		/* social */
		--pill-social-color:			var(--content-color);
		--pill-social-fill:				var(--primary-color);

		/* toast */
		--toast-color:					var(--content-color);
		--toast-fill:					var(--third-color);

		/* ticket */
		--full-pass-ticket-color:		var(--third-color);
		--day-pass-ticket-1-color:		var(--fifth-color);
		--day-pass-ticket-2-color:		var(--primary-color);

		/* event status */
		--status-canceled-color:		var(--white-color);
		--status-canceled-fill:			var(--primary-color);
		--status-moved-online-color:	var(--white-color);
		--status-moved-online-fill:		var(--primary-color);
		--status-postponed-color:		var(--white-color);
		--status-postponed-fill:		var(--primary-color);
		--status-rescheduled-color:		var(--white-color);
		--status-rescheduled-fill:		var(--primary-color);
		--status-scheduled-color:		var(--white-color);
		--status-scheduled-fill:		var(--primary-color);

		/* tooltips */
		--tooltips-color:				var(--black-color);
		--tooltips-fill:				var(--fourth-color);

		/* header */
		--header-height: 55px;
		--visible-header-height:		calc(var(--header-height) + var(--sat));

		/* safe-area */
		--sat: env(safe-area-inset-top);
		--sab: env(safe-area-inset-bottom);
		--sal: env(safe-area-inset-left);
		--sar: env(safe-area-inset-right);
	}

/* --- ALL --- */

	* {
		box-sizing: border-box;
		margin: 0;
		padding: 0;
	}

/* --- SELECTION --- */

	::-moz-selection {
		color: var(--white-color);
		background: var(--primary-color);
	}

	::selection {
		background-color: var(--primary-color);
		color: var(--white-color);
	}

	.no-select {
		-webkit-user-select: none;
		-ms-user-select: none;
		user-select: none;
	}

/* --- google material-symbols-outlined --- */


	.material-symbols-outlined {
		font-variation-settings:
		'FILL' 0,   /* 0 pour une icône vide (contours), 1 pour une icône pleine */
		'wght' 400, /* Épaisseur du trait (de 100 à 700) */
		'GRAD' 0,   /* Contraste ou "grade" (de -50 à 200) */
		'opsz' 24;  /* Taille optique, pour optimiser l'icône selon sa taille (de 20 à 48) */

		font-size: 24px;
		color: var(--white-color);
	}



/* --- HTML --- */

	html {
		-ms-text-size-adjust: 100%;
		-webkit-text-size-adjust: 100%;
	}

/* --- BODY --- */

	body.menu-hidden {
		--visible-header-height: 0px;
	}

	body {
		font-family: var(--font-family-content);
		background: var(--content-fill);
		color: var(--content-color);
		overflow: hidden;
		-webkit-font-smoothing: antialiased;
	}

/* --- BUTTONS & LINKS --- */

	a,
	button {
		font-family: var(--font-family-button);
	}

/* --- COLORS CLASSES --- */

	.primary-color		{ color: var(--primary-color)	!important; }
	.secondary-color 	{ color: var(--secondary-color)	!important; }
	.third-color		{ color: var(--third-color)		!important; }
	.fourth-color	 	{ color: var(--fourth-color)	!important; }
	.fifth-color		{ color: var(--fifth-color)		!important; }
	.black-color		{ color: var(--black-color)		!important; }
	.white-color		{ color: var(--white-color)		!important; }

	.primary-fill		{ background-color: var(--primary-color)	!important; }
	.secondary-fill		{ background-color: var(--secondary-color)	!important; }
	.third-fill			{ background-color: var(--third-color)		!important; }
	.fourth-fill		{ background-color: var(--fourth-color)		!important; }
	.fifth-fill			{ background-color: var(--fifth-color)		!important; }
	.black-fill			{ background-color: var(--black-color)		!important; }
	.white-fill			{ background-color: var(--white-color)		!important; }

/* --- TEXT UTILS --- */

	span.short { display: inline; }
	span.long  { display: none; }

	.visually-hidden {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		border: 0;
	}

/* --- SVG COLORS SPRITES--- */

	.svg-logo-tinals-2026,
	.svg-tag-tinals-2026,
	.svg-logo-tinals-2018,
	.svg-logo-tinals-2018-2-lines,
	.svg-logo-tinals-2018-4-lines,
	.svg-logo-tinals-2017,
	.svg-logo-tinals-2016,

	.svg-logo-paloma-2022,
	.svg-logo-paloma-2018,
	.svg-logo-paloma-2018-text,
	.svg-logo-paloma-2018-valparess,
	.svg-logo-paloma-2012,
	.svg-logo-paloma-2012-head,
	.svg-logo-nimes-metropole,
	.svg-logo-come-on-people,
	.svg-logo-come-on-people-baseline {
		fill: var(--black-color);
	}

	.svg-logo-tinals-2026.svg-dark-mode,
	.svg-tag-tinals-2026.svg-dark-mode,
	.svg-logo-tinals-2018.svg-dark-mode,
	.svg-logo-tinals-2018-2-lines.svg-dark-mode,
	.svg-logo-tinals-2018-4-lines.svg-dark-mode,
	.svg-logo-tinals-2017.svg-dark-mode,
	.svg-logo-tinals-2016.svg-dark-mode,

	.svg-logo-paloma-2022.svg-dark-mode,
	.svg-logo-paloma-2018.svg-dark-mode,
	.svg-logo-paloma-2018-text.svg-dark-mode,
	.svg-logo-paloma-2018-valparess.svg-dark-mode,
	.svg-logo-paloma-2012.svg-dark-mode,
	.svg-logo-paloma-2012-head.svg-dark-mode,
	.svg-logo-nimes-metropole.svg-dark-mode,
	.svg-logo-come-on-people.svg-dark-mode,
	.svg-logo-come-on-people-baseline.svg-dark-mode {
		fill: var(--white-color);
	}

	.svg-logo-tinals-2026.svg-primary,
	.svg-tag-tinals-2026.svg-primary,
	.svg-logo-tinals-2018.svg-primary,
	.svg-logo-tinals-2018-2-lines.svg-primary,
	.svg-logo-tinals-2018-4-lines.svg-primary,
	.svg-logo-tinals-2017.svg-primary,
	.svg-logo-tinals-2016.svg-primary,

	.svg-logo-paloma-2022.svg-primary,
	.svg-logo-paloma-2018.svg-primary,
	.svg-logo-paloma-2018-text.svg-primary,
	.svg-logo-paloma-2018-valparess.svg-primary,
	.svg-logo-paloma-2012.svg-primary,
	.svg-logo-paloma-2012-head.svg-primary,
	.svg-logo-nimes-metropole.svg-primary,
	.svg-logo-come-on-people.svg-primary,
	.svg-logo-come-on-people-baseline.svg-primary {
		fill: var(--primary-color);
	}

	.svg-deezer,
	.svg-deezer-icon {
		fill: var(--black-color);
	}
	.svg-deezer.svg-dark-mode,
	.svg-deezer-icon.svg-dark-mode {
		fill: var(--white-color);
	}

	.svg-facebook,
	.svg-facebook-icon,
	.svg-facebook.svg-dark-mode,
	.svg-facebook-icon.svg-dark-mode {
		fill: var(--facebook-blue-color);
	}

	.svg-instagram,
	.svg-instagram-icon {
		fill: var(--instagram-dark-grey-color);
	}

	.svg-instagram.svg-dark-mode,
	.svg-instagram-icon.svg-dark-mode {
		fill: var(--white-color);
	}

	.svg-pinterest-icon,
	.svg-pinterest-icon.svg-dark-mode {
		fill: var( --pinterest-red-color);
	}

	.svg-soundcloud-icon,
	.svg-soundcloud-icon.svg-dark-mode {
		fill: var(--soundcloud-orange-color);
	}

	.svg-spotify,
	.svg-spotify-icon,
	.svg-spotify.svg-dark-mode,
	.svg-spotify-icon.svg-dark-mode {
		fill: var(--spotify-green-color);
	}

	.svg-tiktok,
	.svg-tiktok-icon {
		fill: var(--black-color);
	}
	.svg-tiktok.svg-dark-mode,
	.svg-tiktok-icon.svg-dark-mode {
		fill: var(--white-color);
	}

	.svg-youtube,
	.svg-youtube-icon {
		fill: var(--youtube-dark-grey-color);
	}
	.svg-youtube.svg-dark-mode,
	.svg-youtube-icon.svg-dark-mode {
		fill: var(--white-color);
	}

/* --- LOADER --- */

	#loader {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		background-color: var(--content-fill);
		z-index: 9999;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		transition: opacity 0.6s ease-out, visibility 0.6s;
	}

	#loader.hidden {
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
	}

	#loader-progress-info-id {
		width: 75%;
		max-width: 800px;
		margin-top: 20px;
		text-align: center;
		color: var(--white-color);
		display: none;
		flex-direction: column;
		align-items: center;
		gap: 8px;
	}

	#loader-progress-info-id.visible {
		display: flex;
	}

	#loader-file-name-id {
		font-size: 0.8rem;
		font-family: monospace;
		white-space: nowrap;
		overflow: hidden;
		text-overflow: ellipsis;
		width: 100%;
		margin-bottom: 5px;
		opacity: 0.8;
	}

	#loader-progress-container {
		width: 100%;
		height: 6px;
		border: 1px solid var(--white-color);
		border-radius: 3px;
		overflow: hidden;
		background: transparent;
	}

	#loader-progress-bar-id {
		height: 100%;
		width: 0%;
		background-color: var(--primary-color);
		transition: width 0.1s linear;
	}

/* --- LOADER LOGO --- */

	.loader-logo {
		display: block;
		width: 42vh;
		height: auto;
		aspect-ratio: 512 / 578;
		position: relative;
		/* animation: pulse-loader-logo 1.5s infinite ease-in-out; */
		transform-origin: center center;
	}

	.loader-logo svg {
		/* fill: var(--black-color); */
		color: var(--grey50-color);
	}

	.loader-layer {
		position: absolute;
		top: 0;
		left: 0;
		width: 100%;
		height: 100%;
		display: block;
	}

	.loader-spin {
		animation: animation-spin 1.81s linear infinite;
		transform-origin: 50% 50%;
	}

	@keyframes pulse-loader-logo {
		0% {
			transform: scale(1);
			opacity: 1;
		}

		50% {
			transform: scale(1.05);
			opacity: 0.7;
		}

		100% {
			transform: scale(1);
			opacity: 1;
		}
	}

	@keyframes animation-spin {
		from { transform: rotate(0deg); }
		to	{ transform: rotate(360deg); }
	}

/* --- SVG ICONS --- */

	.svg-icon {
		display: inline-block;
		width: 100%;
		height: 100%;
		fill: currentColor;
	}

	.flag-icon {
		display: inline-block;
		width: 2.0em;
		height: auto;
		vertical-align: middle;
	}

/* --- HEADER H1 H2 H3 --- */

	h1, h2, h3, h4, h5, h6 {
		font-family: var(--font-family-title);
	}

	h1 {
		font-size: 1.5rem;
		font-weight: var(--font-weight-xtra-bold);
		text-transform: uppercase;
		color: var(--white-color);
	}

	h2 {
		font-size: 1.5rem;
		font-weight: var(--font-weight-xtra-bold);
		text-transform: uppercase;
		color: var(--white-color);
		text-shadow: 0 2px 10px var(--black-a80-color);
	}

	#program h2 {
		font-size: 1.25rem;
		margin-top: 15px;
		margin-bottom: 27px;
		text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
	}

	.artist-info h2 {
		font-size: 1.65rem;
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		color: var(--white-color);
	}

	.ticket-block h2 {
		font-size: 1.4rem;
		margin: 0;
		text-transform: uppercase;
		font-weight: var(--font-weight-xtra-bold);
		text-shadow: 0 2px 10px var(--black-a30-color);
	}

	h3 {
		font-size: 1.2rem;
		font-weight: var(--font-weight-regular);
	}

	.ticket-block h3 {
		font-size: 1.2rem;
		font-weight: var(--font-weight-regular);
	}

	.program-separator h3 {
		color: var(--primary-color);
		font-weight: var(--font-weight-xtra-bold);
		text-transform: uppercase;
		line-height: 1.2;
	}

	.program-separator h3 .session-date {
		color: var(--white-color);
		font-size: 1.1rem;
		line-height: 1.2;
	}

/*	=============================================================================
	TOOLTIPS
	========================================================================== */

	#tooltip-global-id {
		position: fixed;
		background-color: var(--tooltips-fill);
		color: var(--tooltips-color);
		padding: 5px 10px;
		border-radius: 4px;
		font-size: 0.85rem;
		font-weight: var(--font-weight-regular);
		text-transform: none;
		white-space: nowrap;
		pointer-events: none;
		z-index: 2147483647;
		opacity: 0;
		visibility: hidden;
		box-shadow: 0 2px 5px rgba(0,0,0,0.2);
		transition: opacity 0.2s ease, visibility 0.2s ease;
	}

	/* Arrow connector (rotated square) */

	#tooltip-global-id::before {
		content: '';
		position: absolute;
		width: 8px;
		height: 8px;
		background-color: var(--tooltips-fill);
		transform: rotate(45deg);
		left: var(--arrow-x, 50%);
		margin-left: -4px;
	}

	#tooltip-global-id:not([data-pos="above"])::before {
		top: -4px;
		box-shadow: -1px -1px 2px rgba(0,0,0,0.1);
	}

	#tooltip-global-id[data-pos="above"]::before {
		bottom: -4px;
		box-shadow: 1px 1px 2px rgba(0,0,0,0.1);
	}

	#tooltip-global-id.visible {
		opacity: 1;
		visibility: visible;
	}


/*	=============================================================================
	BARS
	========================================================================== */

	/* --- TOP MENU BAR : HEADER & NAVIGATION --- */

		.top-menu {
			position: fixed;
			top: 0;
			width: 100%;
			height: calc(var(--header-height) + var(--sat));
			background: var(--primary-color);
			z-index: 100;
			display: flex;
			justify-content: space-between;
			font-family: var(--font-family-navigation);
			align-items: center;
			padding: var(--sat) 10px 0 5px;
			transition: transform 0.4s ease, background-color 0.4s ease, width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
		}

		.top-menu.auto-hidden {
			transform: translateY(-100%);
		}

		body.is-video-playing .top-menu {
			background-color: var(--black-color);
		}

		body.is-video-playing .top-menu .top-menu-right .btn-ticket {
			color: var(--black-color);
		}

	/* --- TOP MENU LEFT : MENU ICON + LOGO --- */

		.top-menu .top-menu-left {
			display: flex;
			flex: 1;
			justify-content: flex-start;
			align-items: center;
		}

		.top-menu .top-menu-left .top-menu-logo {
			width: auto;
			height: 35px;
			display: flex;
			flex: 0 0 content;
			align-items: center;
			cursor: pointer;
			padding: 0;
			margin: 0;
			margin-right: 10px;
			transition: transform 0.2s;
		}

		@media (hover: hover) {
			.top-menu .top-menu-left .top-menu-logo:hover {
				transform: scale(1.1);
			}
		}

		.top-menu .top-menu-left .top-menu-logo svg {
			width: 75px;
			height: auto;
			aspect-ratio: 40 / 17;
		}

	/* --- TOP MENU CENTER : empty --- */

		.top-menu .top-menu-center {
			display: none; /* flex */
			flex: 1;
			justify-content: center;
			align-items: center;
		}

	/* --- TOP MENU RIGHT : ACTIONS --- */

		.top-menu .top-menu-right {
			display: flex;
			flex: 1;
			justify-content: flex-end;
			align-items: center;
			gap: 4px;
		}

		/* buttons 'all' */

		.top-menu .top-menu-right .btn-top-menu {
			background: transparent;
			color: var(--white-color);
			display: flex;
			padding: 4px 8px;
			cursor: pointer;
			text-decoration: none;
			transition: transform 0.2s;
			font-size: 0.8em;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		/* button home */

		.top-menu .top-menu-right .btn-home {
			background: transparent;
			border: 0;
		}


		/* button program */

		.top-menu .top-menu-right .btn-program {
			border: 1px solid var(--white-color);
			border-radius: 25px;
		}

		.top-menu .top-menu-right .btn-ticket {
			border-radius: 25px;
			border: none;
		}

		/* button ticket */

		.top-menu .top-menu-right .btn-ticket {
			background: var(--white-color);
			color: var(--primary-color);
		}

		/* button lang */

		.top-menu .top-menu-right .btn-lang {
			margin-left: 0;
			min-width: 24px;
			border: none;
			background: none;
			cursor: pointer;
			align-items: center;
			justify-content: center;
			font-size: 1.0em;
			position: relative;
			overflow: visible;
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-btn {
			border: none;
			background: none;
			cursor: pointer;
			padding: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-flag {
			font-size: 1.0rem;
			line-height: 1;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-flag .flag-icon {
			width: 1.5em;
			height: auto;
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown .flag-icon {
			width: 1.3em;
			height: auto;
			flex-shrink: 0;
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown {
			position: absolute;
			top: calc(100% + 4px);
			right: 0;
			z-index: 9400;
			list-style: none;
			margin: 0;
			padding: 4px 0;
			background: var(--black-a80-color);
			border: 1px solid var(--grey55-color);
			border-radius: 6px;
			min-width: 130px;
			box-shadow: 0 4px 12px rgba(0,0,0,0.3);
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown li {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 6px 12px;
			cursor: pointer;
			font-size: 0.85rem;
			white-space: nowrap;
			color: var(--text-color);
		}

		@media (hover: hover) {
			.top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown li:hover {
				background: var(--grey55-color);
			}
		}

		.top-menu .top-menu-right .btn-lang .top-menu-lang-dropdown li.active {
			color: var(--fourth-color);
			font-weight: var(--font-weight-bold);
		}

		/* buttons home + lang  */

		.top-menu .top-menu-right .btn-home,
		.top-menu .top-menu-right .btn-lang {
			padding-left: 0;
			padding-right: 0;
		}

		/* hide theses buttons on small screen */

		.top-menu .top-menu-right .btn-home,
		.top-menu .top-menu-right .btn-program-all {
			display: none;
		}

		/* button current */

		.top-menu .top-menu-right .btn-top-menu.current {
			color: var(--fourth-color);
		}

		.top-menu .top-menu-right .btn-top-menu.current .material-symbols-outlined {
			color: var(--fourth-color);
		}

		.top-menu .top-menu-right .btn-program.current {
			color: var(--fourth-color);
			border: 1px solid var(--fourth-color);
		}

		/* buttons hover */

		@media (hover: hover) {
			.top-menu .top-menu-right .btn-top-menu:hover {
				transform: scale(1.1);
			}

			.top-menu .top-menu-right .btn-home:hover,
			.top-menu .top-menu-right .btn-top-menu .btn-lang:hover {
				transform: scale(1.4);
			}
		}


	/* --- FILTER BAR  --- */

		.filter-bar {
			position: fixed;
			top: var(--visible-header-height);
			left: 0;
			width: 100%;
			height: auto;
			min-height: 40px;
			z-index: 90;
			display: flex;
			align-items: center;
			gap: 8px;
			font-weight: var(--font-weight-regular);
			text-transform: uppercase;
			font-size: 0.85rem;
			transform: translateY(-100%);
			transition: transform 0.3s ease-in-out, top 0.4s ease, padding-top 0.4s ease, width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
			box-shadow: 0 4px 15px var(--black-a30-color);
			cursor: pointer;
			padding-left: 10px;
			padding-right: 10px;
			/* border-radius: 0 0 15px 15px; */
			color: var(--white-color);
			background-color: var(--black-a30-color);
		}

		.filter-bar .btn-filter {
			background: none;
			border: none;
			color: inherit;
			display: flex;
			align-items: center;
			cursor: pointer;
			padding: 0 2px;
			text-transform: uppercase;
			border-radius: 25px;
		}

		.filter-bar .btn-filter .material-symbols-outlined {
			font-size: 18px;
		}

		#filter-bar-id .btn-filter .btn-label {
			margin-left: 5px;
			display: none;
			font-weight: var(--font-weight-bold);
			font-size: 0.75rem;
			text-transform: uppercase;
		}

		.filter-bar .btn-filter {
			position: relative;
			z-index: 2;
			flex-shrink: 0;
		}

		.filter-bar.active {
			transform: translateY(0);
		}

		.filter-bar-content-wrapper {
			flex: 1;
			display: flex;
			justify-content: center;
			align-items: center;
			cursor: pointer;
			min-width: 0;
		}

		.filter-bar-text {
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding: 0 5px;
			pointer-events: auto; /* Restore interactivity if text is clicked */
		}


		body.menu-hidden .filter-bar {
			padding-top: 0;
			padding-top: env(safe-area-inset-top);
		}

		body.is-video-playing .filter-bar.active {
			color: var( --white-color );
			background-color: var( --black-color );
			border-top: 1px solid var( --grey15-color );
			border-bottom: 1px solid var( --grey15-color );
		}

		body:has(#program.active) .filter-bar.active {
			background-color: var(--black-color);
		}


		body.filter-mode-favorite #main-id > :not(.is-favorite):not(#program) {
			display: none !important;
		}

		body.tag-filtering #main-id > :not(.has-matching-tag):not(#program) {
			display: none !important;
		}


	/* --- ACTION BAR --- */

		.action-bar {
			position: fixed;
			right: 5px;
			bottom: 120px;
			top: auto;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15px;
			z-index: 9000;
			transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
			padding-bottom: var(--sab);
		}

		.action-bar .btn-action-bar {
			position: relative;
			width: 44px;
			height: 44px;
			background: none;
			color: var(--white-color);
			border-radius: 50%;
			opacity: 1 !important;
			display: flex;
			align-items: center;
			justify-content: center;
			border: none;
			cursor: pointer;
			text-shadow: 0 2px 10px var(--black-a80-color);
			transition: transform 0.2s;
			-webkit-tap-highlight-color: transparent;
			overflow: hidden;
		}

		.action-bar .btn-action-bar .btn-bg {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--grey35-color);
			opacity: 0.3;
			z-index: 0;
			border-radius: 50%;
			transition: opacity 0.2s, background-color 0.2s;
		}

		.action-bar .btn-action-bar .btn-bg.bright {
			background-color: var(--grey25-color) !important;
			opacity: 0.4 !important;
		}

		.action-bar .btn-action-bar.active {
			background-color: var(--primary-color);
			opacity: 1 !important;
		}

		.action-bar .btn-action-bar.active .btn-bg {
			background-color: var(--primary-color) !important;
			opacity: 1 !important;
		}

		.action-bar #btn-action-bar-sidebar-toggle-id {
			display: flex;
		}

		.action-bar #btn-action-bar-sidebar-toggle-id.btn-action-bar.active .btn-bg {
			background-color: var(--third-color) !important;
		}

		.action-bar .btn-my-favorites-sidebar-toggle {
			overflow: visible;
		}

		.action-bar.btn-my-favorites-sidebar-toggle .material-symbols-outlined {
			font-size: 34px;
		}

		.action-bar .btn-action-bar.disabled {
			pointer-events: none;
			box-shadow: none;
			opacity: 0.01 !important;
		}

		.action-bar .favorites-count-badge {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: transparent;
			color: var(--white-color);
			display: flex;
			align-items: center;
			justify-content: center;
			font-size: 1.3em;
			font-weight: var(--font-weight-bold);
			font-family: var(--font-family-content);
			z-index: 10;
			pointer-events: none;
			line-height: 1;
		}

		.action-bar .btn-action-bar .material-symbols-outlined {
			font-size: 28px;
			position: relative;
			z-index: 1;
		}

		.action-bar .visual-haptic {
			color: var(--primary-color) !important;
			transform: scale(1.1);
			box-shadow: 0 0 15px var(--white-a60-color) !important;
			transition: none !important;
		}

		.action-bar .visual-haptic .btn-bg {
			background-color: var(--white-color) !important;
			opacity: 1 !important;
		}

		body.video-desc-open #btn-action-bar-more-id .btn-bg {
			background-color: var(--primary-color) !important;
			opacity: 1 !important;
		}


	/* --- CONTROL BAR --- */

		#control-bar-id {
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
			height: auto;
			min-height: 40px; /* Mobile First */
			padding-top: 5px;
			padding-bottom: var(--sab);
			padding-left: 0;
			padding-right: 0;
			background-color: var(--control-bar-fill);
			color: var(--control-bar-color);
			z-index: 350;
			display: flex;
			align-items: center;
			transform: translateY(100%);
			transition: transform 0.3s ease-in-out, width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
			border-top: 1px solid var(--white-a10-color);
		}

		#control-bar-id.visible {
			transform: translateY(0);
		}

		#cb-slider-id {
			flex: 1;
			cursor: pointer;
			accent-color: var(--primary-color);
			height: 4px;
		}

		.cb-time-container {
			flex: 1;
			display: flex;
			align-items: center;
			gap: 10px;
			margin: 0 10px;
			font-size: 0.75rem;
			font-family: monospace;
			color: var( --grey80-color );
		}

		#cb-play-pause-id {
			background: none;
			border: none;
			color: var(--white-color);
			cursor: pointer;
			padding: 0 10px;
			display: flex;
			align-items: center;
		}


/*	=============================================================================
	MAIN-FEED-id
	========================================================================== */

	#main-id {
		width: 100%;
		height: 100vh;
		height: 100dvh;
		overflow-y: scroll;
		scroll-snap-type: y mandatory;
		scroll-behavior: smooth;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior-y: contain;
		touch-action: pan-y;
		transition: width 0.5s cubic-bezier(0.16, 1, 0.3, 1);
	}

	#main-id::-webkit-scrollbar {
		display: none;
	}


/*	=============================================================================
	CARDS
	========================================================================== */

	/* --- HOME CARD --- */

		@keyframes slideInUp {
			0% {
				opacity: 0;
				transform: translateY(50px);
			}

			100% {
				opacity: 1;
				transform: translateY(0);
			}
		}

		.home-card {
			height: 100vh;
			height: 100dvh;
			width: 100%;
			scroll-snap-align: center;
			position: relative;
			background-color: var(--secondary-color);
			background-position: center;
			background-size: cover;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			align-items: center;
			padding: 7vh 20px 2vh 20px;
			text-align: center;
			gap: 8px;
		}

		.home-card .home-card-top {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 15px;
			width: 100%;
			opacity: 0;
			animation: slideInUp 0.8s ease-out forwards;
			animation-delay: 0.3s;
			margin-top: 28px;
		}

		.home-card .home-card-middle {
			display: flex;
			flex-direction: column;
			align-items: center;
			width: 100%;
			opacity: 0;
		}

		.home-card .home-card-bottom {
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 20px;
			width: 100%;
			max-width: 600px;
		}

		.home-card .home-subtitle {
			font-size: 1.4rem;
			text-transform: uppercase;
			font-weight: var(--font-weight-bold);
			text-shadow: 0 2px 10px var(--black-a70-color);
			margin: 0;
			max-width: 75%;
		}

		.home-card .home-date {
			display: flex;
			flex-direction: column;
			font-size: 2.2rem;
			font-weight: var(--font-weight-xtra-bold);
			line-height: 1;
			text-transform: uppercase;
			text-shadow: 0 4px 15px var(--black-a80-color);
			margin: 0;
			color: var(--white-color);
			opacity: 0;
			animation: slideInUp 0.8s ease-out forwards;
			animation-delay: 0.6s;
		}

		.home-card .home-buttons-container {
			display: flex;
			gap: 15px;
			width: 100%;
			justify-content: center;
			flex-direction: column;
			align-items: center;
			opacity: 0;
			animation: slideInUp 0.8s ease-out forwards;
			animation-delay: 1.5s;
		}

		.home-card .btn-home {
			background-color: var(--fifth-color);
			color: var(--black-color);
			padding: 10px 25px;
			border-radius: 50px;
			text-decoration: none;
			font-weight: var(--font-weight-bold);
			font-size: 0.8rem;
			text-transform: uppercase;
			border: none;
			cursor: pointer;
			transition: transform 0.2s;
			flex: unset;
			width: auto;
			min-width: 200px;
			white-space: nowrap;
		}

		.home-card .btn-home-ticket {
			background-color: var(--fourth-color);
			color: var(--black-color);
		}

		.home-card .home-buttons-container .btn-home,
		.home-card .home-buttons-container .btn-home-ticket {
			border: 2px solid var(--black-color);
		}

		@media (hover: hover) {
			.home-card .btn-home:hover {
				transform: scale(1.1);
			}
		}

		.home-card .organizers {
			background-color: var(--primary-color);
			color: var(--white-color);
			padding: 10px 7px;
			border: 2px solid var(--black-color);
			border-radius: 50px;
			text-decoration: none;
			font-weight: var(--font-weight-regular);
			font-size: 0.8rem;
			text-transform: none;
			cursor: pointer;
			transition: transform 0.2s;
			flex: unset;
			width: auto;
			width: 100%;
			height: 70px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			opacity: 0;
			animation: slideInUp 0.8s ease-out forwards;
			animation-delay: 0.8s;

			/* text-shadow: 1px 1px 8px var(--black-a90-color); */
		}

		.home-card .organizers .organizer-col-fixed {
			width: 35px;
			flex-shrink: 0;
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.home-card .organizers .organizer-col-fixed.paloma {
			width: 40px;
		}

		.home-card .organizers .organizer-col-fixed.come-on-people {
			width: 35px;
		}

		.home-card .organizers .organizer-col-fluid {
			flex-grow: 1;
			padding: 0 10px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			font-weight: var(--font-weight-bold);
		}

		.home-card .organizers svg {
			width: 100%;
			height: auto;
			fill: var(--white-color);
			display: block;
			transition: transform 0.2s;
		}

		.home-card .organizers-logo-link {
			display: flex;
			width: 100%;
			height: 100%;
			align-items: center;
			justify-content: center;
			color: inherit;
			text-decoration: none;
			transition: color 0.4s;
		}

		@media (hover: hover) {
			.home-card .organizers-logo-link:hover svg {
				fill: var(--white-color);
				transform: scale(1.25);
			}
		}


	/* --- PROGRAM CARD --- */

		#program {
			height: 100vh;
			height: 100dvh;
			width: 100%;
			scroll-snap-align: start;
			position: relative;
			background-color: var(--content-fill);
			overflow-y: auto;
			overscroll-behavior-y: contain;
			padding-top: calc(var(--visible-header-height) + 10px);
			padding-bottom: 20px;
			padding-left: 10px;
			padding-right: 10px;
		}

		#program h2 {
		}

		#program .program-grid {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 15px;
			width: 100%;
			margin: 0 auto;
		}

		/* Media Queries for Grid */

		@media (min-width: 320px) {
			#program .program-grid { grid-template-columns: repeat(2, 1fr); }
		}

		@media (min-width: 480px) {
			#program .program-grid { grid-template-columns: repeat(2, 1fr); }
		}

		@media (min-width: 640px) {
			#program .program-grid { grid-template-columns: repeat(3, 1fr); }
		}

		@media (min-width: 768px) {
			#program .program-grid { grid-template-columns: repeat(3, 1fr); }
		}

		@media (min-width: 1024px) {
			#program .program-grid { grid-template-columns: repeat(4, 1fr); }
		}

		@media (min-width: 1280px) {
			#program .program-grid { grid-template-columns: repeat(5, 1fr); }
		}

		@media (min-width: 1536px) {
			#program .program-grid { grid-template-columns: repeat(6, 1fr); }
		}

		@media (min-width: 1920px) {
			#program .program-grid { grid-template-columns: repeat(7, 1fr); }
		}

		.program-item {
			display: flex;
			flex-direction: column;
			background: linear-gradient( var(--black-color), var(--grey30-color));
			border-radius: 8px;
			overflow: hidden;
			cursor: pointer;
			transition: transform 0.2s, box-shadow 0.2s;
			box-shadow: 0 4px 10px var(--black-a30-color);
			position: relative;
		}

		.program-item.is-current {
			border: 5px solid var(--primary-color);
		}

		.program-item.is-favorite .btn-program-like {
			background: var(--primary-color);
			color: var(--white-color);
			transform: scale(1.1);
		}

		.program-item.is-playing.is-current {
			border: 5px solid var(--primary-color);
		}

		.btn-program-like {
			position: absolute;
			top: 10px;
			left: 10px;
			z-index: 10;
			background: linear-gradient(var(--black-a10-color), var(--black-a70-color));
			border: none;
			padding: 0;
			cursor: pointer;
			width: 44px;
			height: 44px;
			border-radius: 50%;
			display: flex;
			justify-content: center;
			align-items: center;
			backdrop-filter: blur(2px);
			transition: transform 0.2s;
		}

		.program-image-container {
			width: 100%;
			aspect-ratio: 16 / 9;
			overflow: hidden;
			position: relative;
		}

		.program-image {
			width: 100%;
			height: 100%;
			object-fit: cover;
			transition: transform 0.5s;
		}

		@media (hover: hover) {
			#program .program-item:hover {
				transform: translateY(-5px);
				box-shadow: 0 8px 20px var(--black-a40-color);
			}

			#program .program-item:hover .program-image {
				transform: scale(1.05);
			}
		}

		#program .program-item.is-favorite .btn-program-like {
			background-color: var(--primary-color);
			color: var(--white-color);
		}

		.program-content {
			padding: 10px;
			display: flex;
			flex-direction: column;
			gap: 5px;
			background: none;
		}

		.program-title {
			font-size: 0.9rem;
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			color: var(--white-color);
			margin-top: 0px;
			margin-bottom: 0px;
			line-height: 1.2;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		#tab-program-content-id .program-title {
			/* color: var(--black-color); */
		}

		.program-date-place,
		.program-date,
		.program-time,
		.program-place  {
			color: var(--grey86-color);
			font-size: 0.75rem;
			display: flex;
			flex-wrap: wrap;
			gap: 0;
			line-height: 1.2;
			text-transform: uppercase;
		}

		.program-date, .program-time, .program-place {
			display: inline-block;
		}

		.program-time .time-at {
			font-size: 0.75em;
			display: none;
		}

		.program-time {
			color: var(--primary-color);
		}

		.program-time::before {
			content: "•";
			margin-left: 5px;
			color: var(--primary-color);
		}

		.program-date:last-child::after,
		.program-time:last-child::after,
		.program-place:last-child::after {
			content: "";
			margin: 0;
		}

		/* Internal Filtering Logic for Program Items */
		body.filter-mode-favorite .program-item:not(.is-favorite) {
			display: none !important;
		}

		body.tag-filtering .program-item:not(.has-matching-tag) {
			display: none !important;
		}

		/* Favorite Marker on Program Item */
		.program-item.is-favorite .program-title {
			color: var(--primary-color);
		}

		/* --- PROGRAM PLAYING INDICATOR --- */

		.program-title-row {
			display: flex;
			justify-content: space-between;
			align-items: center;
			/* gap: 10px; */
		}

		.program-title-row .program-title {
			flex: 1;
		}

		.playing-indicator {
			display: none;
			align-items: flex-end;
			height: 16px;
			gap: 2px;
			margin-top: 2px;
			cursor: pointer;
		}

		.btn-program-play {
			background: none;
			border: none;
			padding: 0;
			color: var(--white-color);
			cursor: pointer;
			display: flex;
			margin-top: 0;
		}


		body.is-video-playing .program-item.is-playing:not(.is-paused) .playing-indicator {
			display: flex;
		}

		.program-item.is-playing:not(.is-paused) .btn-program-play {
			display: none;
		}

		.playing-bar {
			width: 4px;
			background-color: var(--primary-color);
			animation: bounce-bars 1s infinite ease-in-out;
			border-radius: 1px;
			transform-origin: bottom;
		}

		.playing-bar:nth-child(1) { height: 10px; animation-delay: 0.0s; }
		.playing-bar:nth-child(2) { height: 16px; animation-delay: 0.2s; }
		.playing-bar:nth-child(3) { height: 12px; animation-delay: 0.4s; }

		@keyframes bounce-bars {
			0%, 100% { transform: scaleY(1); }
			50% { transform: scaleY(0.4); }
		}

		/*
		.program-item.is-playing.is-paused .playing-bar {
			animation-play-state: paused;
			opacity: 0.5;
		}

		.program-grid.is-playing .program-item,
		.program-grid.is-playing .program-item.is-playing.is-paused {
			opacity: 0.6;
		}

		.program-grid.is-playing .program-item.is-playing:not(.is-paused) {
			opacity: 1.0;
		}
		*/

	/* --- PROGRAM CARD : SEPARATOR --- */

		.program-separator {
			grid-column: 1 / -1;
			background-color: var(--black-color);
			padding: 0;
			display: flex;
			flex-direction: row;
			justify-content: center;
			align-items: center;
			text-align: center;
			gap: 8px;
			/* margin-top: 10px; */
			/* margin-bottom: 10px; */
			margin-bottom: 0;
			cursor: pointer;
			transition: transform 0.2s;
		}

		.program-separator h3 {
			margin: 0;
			line-height: 1.2;
		}

		.btn-separator-play {
			background: none;
			border: none;
			cursor: pointer;
			color: var(--primary-color);
			font-size: 2.0rem;
			line-height: 1;
			padding: 0;
			flex-shrink: 0;
			display: flex;
			align-items: center;
		}

		@media (hover: hover) {
			.program-separator:hover {
				transform: scale(1.05);
			}
		}


		body.tag-filtering .program-separator:not(.has-matching-tag) {
			display: none !important;
		}

		.program-separator h3 .session-date {
			color: var(--white-color);
		}

		.program-separator h3 span {
			display: block;
		}


	/* --- MOOD CARD --- */

		.mood-card {
			height: 100vh;
			height: 100dvh;
			width: 100%;
			scroll-snap-align: center;
			position: relative;
			background-color: var(--black-color);
			background-size: cover;
			background-position: center;
			background-repeat: no-repeat;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: calc(var(--visible-header-height) + 20px) 20px 40px 20px;
			text-align: center;
			gap: 8px;
		}

		.mood-card h2 {
			margin-bottom: 20px;
		}

		.mood-description {
			font-size: 1rem;
			margin-bottom: 40px;
			max-width: 600px;
			line-height: 1.5;
			color: var(--white-color);
			opacity: 0.9;
			text-shadow: 0 2px 10px var(--black-a80-color);
		}

		.mood-bottom {
			margin-top: auto;
		}

		.mood-buttons-grid {
			display: grid;
			grid-template-columns: 1fr;
			gap: 15px;
			width: 100%;
			max-width: 600px;
		}

		.btn-mood {
			padding: 15px 20px;
			font-size: 1rem;
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			cursor: pointer;
			transition: transform 0.2s, background-color 0.2s;
			display: flex;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 8px;
			width: 100%;
			min-width: 0;
			white-space: normal;
			border: 2px solid var(--black-color);
		}

		.btn-mood.ascenseur-to-heaven {
			background-color: color-mix(in srgb, var(--fourth-color), transparent 5%);
		}

		.btn-mood.avant-la-manif {
			background-color: color-mix(in srgb, var(--secondary-color), transparent 5%);
		}

		.btn-mood.make-trauma-great-again {
			background-color: color-mix(in srgb, var(--primary-color), transparent 5%);
		}

		.btn-mood.printemps-post-burn-out {
			background-color: color-mix(in srgb, var(--fifth-color), transparent 5%);
		}

		.btn-mood.sur-la-platine-de-tes-darons {
			background-color: color-mix(in srgb, var(--third-color), transparent 5%);
		}

		.btn-mood.tete-dans-le-caisson {
			background-color: color-mix(in srgb, var(--primary-color), transparent 5%);
		}


		@media (hover: hover) {
			.btn-mood:hover {
				transform: scale(1.05);
				filter: brightness(1.1);
			}
		}


	/* --- PROGRAM CARD : EMPTY STATE --- */

		.program-empty-placeholder {
			grid-column: 1 / -1;
			padding: 40px;
			text-align: center;
			color: var(--grey60-color);
			display: none;
			font-size: 1.1rem;
			text-transform: uppercase;
		}

		.program-empty-placeholder.visible {
			display: block;
		}


	/* --- EVENT CARD --- */

		.video-card {
			height: 100vh;
			height: 100dvh;
			width: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			scroll-snap-align: center;
			position: relative;
			overflow: hidden;
			user-select: none;
			-webkit-tap-highlight-color: transparent;
		}

		.video-container {
			width: 100%;
			height: 100vh;
			height: 100dvh;
			background: var( --black-color);
			position: relative;
			overflow: hidden;
			cursor: pointer;
		}

		.video-container::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background-color: var(--black-a60-color);
			z-index: 4;
			opacity: 0;
			transition: opacity 0.3s ease;
			pointer-events: none;
		}

		.video-card.desc-open .video-container::after {
			opacity: 1;
		}

		.video-background {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			object-fit: cover;
			z-index: 2;
			transition: opacity 0.5s ease-out;
			opacity: 1;
			pointer-events: none;
		}

		.yt-placeholder,
		iframe {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 1;
		}

		.video-card.playing .video-background {
			opacity: 0;
			pointer-events: none;
		}

	/* --- VIDEO CARD : TITLE --- */

		.video-card-title {
			position: absolute;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);
			width: 90%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			z-index: 6;
			color: var(--white-color);
			pointer-events: none;
			transition: opacity 0.4s ease, transform 0.4s ease;
		}

		.video-card-title h2 {
			display: inline;
			margin: 0;
			padding: 5px 10px;
			/* background-color: var(--grey80-a50-color); */
			text-shadow: 0 0 20px var(--black-a80-color);

		}

		.video-card-title h3 {
			margin: 10px 0 0 0;
			text-shadow: 0 0 20px var(--black-a80-color);
		}

		.video-card-meta {
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			margin-top: 15px;
			color: var(--primary-color);
			text-shadow: 0 2px 10px var(--black-a80-color);
			display: flex;
			flex-direction: column;
			gap: 6px;
			line-height: 1.2;
		}

		.video-card-meta-place {
			font-size: 1.0rem;
			margin-bottom: 0px;
		}

		.video-card-meta-date {
			font-size: 1.0rem;
			opacity: 0.9;
		}

	/* --- EVENT CARD : STATE ICON --- */

		.video-state-icon,
		.video-play-icon {
			position: absolute;
			top: 50%;
			left: 50%;
			/* transform: translate(-50%, -50%); */
			font-size: 60px;
			color: var(--primary-color);
			opacity: 1;
			z-index: 5;
			transition: opacity 0.5s, transform 0.5s;
			pointer-events: none;
			text-shadow: 0 0 15px var(--black-a60-color);
		}

		.video-play-icon {
			display: flex;
			align-items: center;
			justify-content: center;
		}

		.video-card.playing .video-state-icon,
		.video-card.playing .video-play-icon {
			opacity: 0;
			transform: translate(-50%, -50%) scale(1.1);
		}

		.video-card.playing .video-card-title {
			opacity: 0;
			transform: translate(-50%, -50%) scale(1.1);
			transition: opacity 0.8s ease 4s, transform 0.8s ease 4s;
		}

		.video-card.paused-manual .video-state-icon,
		.video-card.paused-manual .video-play-icon {
			opacity: 1;
		}

		.video-card.paused-manual .video-card-title {
			opacity: 1;
		}

		.video-card.active .yt-placeholder {
			transform: scale(1.1);
		}

	/* --- EVENT CARD : ARTIST OVERLAY --- */

		.artist-overlay {
			position: absolute;
			bottom: 0dvh;
			left: 0;
			right: 0;
			padding: 5px;
			background: linear-gradient(var(--black-a10-color), var(--black-a90-color));
			display: flex;
			justify-content: space-between;
			align-items: flex-end;
			z-index: 10;
			opacity: 0;
			transform: translateY(20px);
			transition: opacity 0.8s ease, transform 0.8s ease;
			pointer-events: none;
			padding-bottom: 35px;
			padding-bottom: calc(35px + env(safe-area-inset-bottom));
		}

		@media (hover: hover) {
			.artist-overlay {
				pointer-events: auto;
			}
		}

		.video-card.active .artist-overlay {
			opacity: 1;
			transform: translateY(0);
		}

	/* --- EVENT CARD : ARTIST OVERLAY INFO --- */

		.artist-info {
			pointer-events: auto;
			flex: 1;
			display: flex;
			flex-direction: column;
		}

		.artist-info .artist-wrapper {
			display: flex;
			flex-direction: row;
			align-items: center;
			gap: 8px;
			margin-bottom: 8px;
		}

		.artist-info .artist-meta {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			gap: 10px;
		}

		.artist-info .artist-avatar-container {
			display: block;
			width: 80px;
			height: auto;
			position: relative;
			cursor: pointer;
			z-index: 25;
			-webkit-tap-highlight-color: transparent;
			transition: transform 0.2s ease;
		}

		@media (hover: hover) {
			.artist-info .artist-avatar-container:hover {
				transform: scale(1.10);
			}
		}

		.artist-info .artist-avatar-container:active {
			transform: scale(0.95);
		}

		.artist-info .artist-avatar {
			width: 100%;
			height: 100%;
			border-radius: 50%;
			border: 2px solid var(--white-color);
			object-fit: cover;
			pointer-events: none;
			display: block;
		}

		.artist-info h2 {
			margin: 0;
			transition: opacity 0.2s;
		}

		@media (hover: hover) {
			.artist-info h2:hover {
				cursor: pointer;
				opacity: 0.8;
			}
		}

		.artist-info .artist-song-title {
			display: block;
			font-weight: var(--font-weight-regular);
			font-style: normal;
			font-size: 1rem;
			color: var(--white-color);
			margin: 0 0 8px 0;
		}






	/* --- EVENT CARD : ARTIST OVERLAY MORE --- */

		.artist-info .artist-more {
			display: flex;
			flex-direction: column;
			opacity: 0.85;
			font-size: 1.0rem;
			margin: 8px 40px 4px 0;
			max-height: 4.0rem;
			max-width: 999px;
			overflow: hidden;
			position: relative;
			transition: max-height 1s ease;
			cursor: pointer;
		}

		.artist-info .artist-more.expanded {
			opacity: 1;
			max-height: 70vh;
			padding: 15px;
			padding-left: 0;
			overflow-y: auto;
			transition: max-height 1s ease;
		}

		.artist-info .artist-more-more {
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: flex-start;
			width: 100%;
			flex-shrink: 0;
		}

		.artist-info .artist-more .artist-more-content {
			flex: 1;
			margin: 0;
			display: -webkit-box;
			-webkit-line-clamp: 2;
			-webkit-box-orient: vertical;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.artist-info .artist-more.expanded .artist-more-content {
			-webkit-line-clamp: unset;
			display: block;
			overflow: visible;
		}

		.artist-info .artist-more .artist-more-state-icon {
			color: var(--primary-color);
			font-weight: var(--font-weight-regular);
			font-size: 2.4rem;
			line-height: 2.4rem;
			flex-shrink: 0;
		}

	/* --- EVENT CARD : ARTIST OVERLAY TAG PILL --- */

		.artist-info .tags-container {
			display: flex;
			gap: 8px;
			flex-wrap: wrap;
			margin-bottom: 4px;
			transition: opacity 0.3s ease, max-height 0.3s ease, margin 0.3s ease, visibility 0.3s;
			max-height: 300px;
			overflow: hidden;
		}

	/* --- EVENT CARD : ARTIST-INFO : TAG-PILL --- */

		.artist-info .tag-pill {
			font-size: 0.80rem;
			padding: 1px 2px;
			color: var(--pill-tag-color);
			background: var(--pill-tag-fill);
			/* border-radius: 12px; */
			font-weight: var(--font-weight-bold);
			backdrop-filter: blur(4px);
			text-transform: uppercase;
			cursor: pointer;
			transition: background 0.2s;
		}


		.artist-info .tag-pill .artist-date,
		.artist-info .tag-pill .artist-place {
			font-size: 0.9rem;
			font-weight: var(--font-weight-bold);
			color: var(--grey80-color);
			text-transform: uppercase;
			overflow: hidden;
		}

		.artist-info .tag-pill .artist-start-time,
		.artist-info .tag-pill .artist-end-time {
			color:  var(--primary-color);
		}

		.artist-info .tag-pill .time-at {
			font-size: 0.75em;
			display: none;
		}

		.artist-info .tag-pill .artist-start-time::before,
		.artist-info .tag-pill .artist-end-time::before {
			/* margin-left: 5px; */
			color: var(--primary-color);
		}


		.artist-info .tag-pill .artist-start-time::before {
			content: "•";
		}

		.artist-info .tag-pill .artist-end-time::before {
			content: "—";
		}


		.artist-info .tag-pill.session-tag,
		.artist-info .tag-pill.place-tag {
			font-size: 1.0rem;
			/* color:  var(--primary-color); */
			/* background: var(--grey20-a70-color) */
		}

		.artist-info .tag-pill.mood-tag,
		.artist-info .tag-pill.genre-tag,
		.artist-info .tag-pill.country-tag {
			color: var(--pill-tag-color);
			background: var(--pill-tag-fill);
		}


	/* --- EVENT CARD : ARTIST-INFO : TAG-PILL ACTIVE --- */

		.artist-info .tag-pill.tag-active {
			color: var(--pill-tag-active-color);
			background-color: var(--pill-tag-active-fill);
		}

		.artist-info .tag-pill.session-tag.tag-active,
		.artist-info .tag-pill.place-tag.tag-active {
			color: var(--white-color); /* --session-pill-active-color */
			background-color: var(--third-color); /* --session-pill-active-fill */
		}

		.artist-info .tag-pill.session-tag.tag-active .artist-start-time,
		.artist-info .tag-pill.session-tag.tag-active .artist-start-time::before,
		.artist-info .tag-pill.session-tag.tag-active .artist-end-time,
		.artist-info .tag-pill.session-tag.tag-active .artist-end-time::before {
			color: var(--fourth-color);
		}



		.artist-info .tag-pill.mood-tag.tag-active {
			color: var(--white-color);
			background-color: var(--third-color);
		}

		.artist-info .tag-pill.genre-tag.tag-active {
			color: var(--black-color);
			background-color: var(--fourth-color);
		}

		.artist-info .tag-pill.country-tag.tag-active {
			color: var(--black-color);
			background-color: var(--fifth-color);
		}

	/* --- EVENT CARD : ARTIST-INFO : TAG-PILL HOVER --- */


		@media (hover: hover) {
			.artist-info .tag-pill:hover {
				color: var(--black-color);
				background: var(--white-a70-color);
			}
		}

	/* --- EVENT CARD : ARTIST SOCIAL PILL --- */

		.artist-info .social-pill {
			display: inline-flex;
			align-items: center;
			justify-content: center;
			background: var(--pill-social-fill);
			border-radius: 12px;
			font-size: 0.8rem;
			padding: 4px 10px;
			font-weight: var(--font-weight-bold);
			backdrop-filter: blur(4px);
			text-transform: uppercase;
			cursor: pointer;
			transition: background 0.2s;
			color: var(--pill-social-color);
			text-decoration: none;
		}

		@media (hover: hover) {
			.artist-info .social-pill:hover {
				transform: scale(1.1);
				filter: brightness(1.2);
			}
		}

	/* --- EVENT CARD : ARTIST SOCIAL ICONS --- */

		.artist-info .social-icon-link {
			display: inline-block;
			height: 30px;
			width: auto;
			transition: transform 0.2s;
			text-decoration: none;
			background-color: var(--black);
			border-radius: 12px;
			border: 1px solid var(--grey30-color);
			padding: 3px 6px;
		}

		@media (hover: hover) {
			.artist-info .social-icon-link:hover {
				transform: scale(1.1);
				filter: brightness(1.2);
			}
		}

		.artist-info .social-icon-svg {
			height: 100%;
			width: auto;
			display: block;
		}

	/* --- EVENT CARD : ARTIST TICKET BUTTON --- */

		.btn-artist-ticket {
			display: inline-flex;
			align-items: center;
			color: var(--white-color);
			padding: 2px 6px;
			border-radius: 12px;
			text-decoration: none;
			margin-top: 10px;
			margin-right: 10px;
			box-shadow: 0 4px 15px var(--black-a20-color);
			transition: transform 0.2s, box-shadow 0.2s;
			max-width: 100%;
			align-self: flex-start;
		}

		@media (hover: hover) {
			.btn-artist-ticket:hover {
				transform: scale(1.05);
				box-shadow: 0 6px 20px var(--black-a30-color);
			}
		}

		.artist-ticket-icon {
			font-size: 24px;
			margin-right: 10px;
		}

		.artist-ticket-info {
			display: flex;
			flex-direction: column;
		}

		.btn-artist-ticket .ticket-title {
			font-weight: var(--font-weight-bold);
			font-size: 0.7rem;
			text-transform: uppercase;
			line-height: 1.1;
			width: auto;
			text-align: left;
			padding: 0;
			color: inherit;
			margin: 0;
		}

		.btn-artist-ticket .ticket-subtitle {
			font-size: 0.75rem;
			font-weight: var(--font-weight-regular);
			opacity: 0.8;
			color: inherit;
		}

		.btn-artist-ticket.full-pass-ticket {
			background-color: var(--full-pass-ticket-color);
		}

		.btn-artist-ticket.day-pass-ticket-1 {
			background-color: var(--day-pass-ticket-1-color);
		}

		.btn-artist-ticket.day-pass-ticket-2 {
			background-color: var(--day-pass-ticket-2-color);
		}


	/* --- EVENT CARD : ARTIST HIDING ELEMENTS ON PLAY --- */

		/* body.hide-desc-mobile .video-card.playing:not(.desc-open) .artist-date-place, */
		body.hide-desc-mobile:not(.show-tags-permanently) .video-card.playing:not(.desc-open) .tags-container,
		body.hide-desc-mobile .video-card.playing:not(.desc-open) .artist-more:not(.expanded) {
			opacity: 0;
			max-height: 0;
			margin: 8px 0;
			padding: 0;
			visibility: hidden;
			transition: all 0.5s ease 5s;
		}


	/* --- EVENT CARD : ARTISTS SOCIAL-LINKS --- */


		.social-links-container {
			display: none;
			flex-wrap: wrap;
			justify-content: left;
			margin-top: 10px;
			gap: 10px;
		}

		.artist-more.expanded .social-links-container {
			display: flex;
		}


	/* --- EVENT CARD : ARTIST TICKETS CONTAINER --- */


		.tickets-links-container {
			display: none;
			flex-wrap: wrap;
			justify-content: left;
			width: 100%;
			margin-top: 10px;
			gap: 10px;
		}

		.tickets-links-container .btn-artist-ticket {
			margin: 0;
			align-self: center;
		}

		.artist-more.expanded .tickets-links-container {
			display: flex;
		}



	/* --- EVENT CARD : FULLSCREEN --- */

		.video-card:fullscreen {
			background: var(--black-color);
			display: flex;
			justify-content: center;
			align-items: center;
		}

		.video-card:fullscreen .video-container {
			height: 100svh;
			width: 100svw;
		}

		.video-card:fullscreen .artist-overlay {
			bottom: 0;
			z-index: 2147483647;
			padding-bottom: 40px;
		}

	/* --- EVENT CARD : AUDIO MODE OVERRIDES --- */

		.video-card.playing.audio-mode .video-background {
			opacity: 1 !important;
			pointer-events: none; /* Keep background non-interactive so clicks go through if needed, though overlay handles it */
		}

		.video-card.playing.audio-mode .video-state-icon,
		.video-card.playing.audio-mode .video-play-icon {
			opacity: 1;
			transform: translate(-50%, -50%) scale(1.1);
		}

	/* --- EVENT CARD : ANIMATION AUDIO PULSE-AUDIO --- */

		@keyframes pulse-audio {
			0% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
			50% {
				opacity: 0.6;
				transform: translate(-50%, -50%) scale(2.0);
			}
			100% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
		}

		.video-card.playing.audio-mode.audio-playing .video-state-icon,
		.video-card.playing.audio-mode.audio-playing .video-play-icon {
			animation: pulse-audio 2s ease-in-out infinite;
			transition: none;
		}

	/* --- EVENT CARD : ANIMATION VIDEO LOADING STATE --- */

		@keyframes rotate-icon {
			0% { transform: translate(-50%, -50%) rotate(0deg); }
			100% { transform: translate(-50%, -50%) rotate(360deg); }
		}

		.video-card.loading .video-state-icon {
			opacity: 1 !important;
			animation: rotate-icon 2s linear infinite;
			transition: none;
		}

	/* --- EVENT CARD : ANIMATION PLAY BUTTON : PULSE-PAUSED  --- */

		@keyframes pulse-paused {
			0% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
			50% {
				opacity: 0.8;
				transform: translate(-50%, -50%) scale(1.5);
			}
			100% {
				opacity: 1;
				transform: translate(-50%, -50%) scale(1);
			}
		}

		.video-card:not(.playing):not(.loading) .video-state-icon,
		.video-card:not(.playing):not(.loading) .video-play-icon {
			/* REMOVE BY OLIVIER : animation: pulse-paused 1.5s ease-in-out infinite; */
			transition: none;
		}

	/* --- EVENT CARD : VIDEO CLICK LAYER --- */

		.video-click-layer {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 3;
			cursor: pointer;
			background: transparent;
		}

	/* --- EVENT CARD : VIDEO ERROR OVERLAY - ERROR 150 --- */

		.video-error-overlay {
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a85-color);
			z-index: 20;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			text-align: center;
			gap: 8px;
			color: var(--white-color);
			padding: 20px;
			backdrop-filter: blur(5px);
		}

		.video-error-logo {
			width: 120px;
			height: auto;
			margin-bottom: 10px;
		}

		.video-error-icon {
			font-size: 4rem !important;
			color: var(--secondary-color);
			margin-bottom: 20px;
		}

		.video-error-message {
			font-size: 1.2rem;
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			margin-bottom: 10px;
			max-width: 80%;
		}

		.video-error-subtext {
			font-size: 0.9rem;
			opacity: 0.8;
			max-width: 80%;
		}

	/* --- EVENT CARD : YOUTUBE ICON SVG CONFIG --- */

		.video-state-icon,
		.video-play-icon {
			display: flex;
			align-items: center;
			justify-content: center;
			--yt-container-fill: var(--primary-color);
			--yt-play-fill: var(--white-color);
		}

	/* --- EVENT CARD : YOUTUBE PLAY ANIMATION --- */

		.video-card:not(.playing):not(.loading) .youtube-play {
			animation: pulse-paused 1.5s ease-in-out infinite;
			transform-origin: center;
		}


	/* --- TICKETING CARD --- */

		.ticketing-card {
			height: 100vh;
			height: 100dvh;
			width: 100%;
			scroll-snap-align: center;
			position: relative;
			background: var(--black-color);
			overflow: hidden;
			display: flex;
			flex-direction: column;
			padding-top: 70px;
			min-height: auto;
		}

		.ticket-title {
			width: 100%;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding-top: 10px;
			padding-bottom: 10px;
		}

		.ticket-container {
			display: flex;
			flex-direction: column;
			height: auto;
			flex: 1;
			width: 100%;
			gap: 10px;
			padding: 0 10px 10px 10px;
		}

		.ticket-block {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			padding: 15px;
			gap: 10px;
			margin: 5px;
			text-align: center;
			color: var(--white-color);
			transition: flex 0.3s ease;
			border-radius: 8px;
			/*
			background-image: url('../images/background/tinals-2018-trame-342x342-noir.svg');
			background-repeat: repeat;
			background-position: center;
			background-size:100%;
			background-blend-mode: hue;
			*/
		}

		.ticket-block h2 {
			margin: 0;
			text-shadow: 0 2px 10px var(--black-a30-color);
		}

		.ticket-block h3 {
			margin: 0;
			opacity: 0.9;
		}

		.btn-ticket {
			background-color: var(--white-color);
			padding: 8px 15px;
			border-radius: 50px;
			text-decoration: none;
			font-weight: var(--font-weight-bold);
			font-size: 0.8rem;
			text-transform: uppercase;
			box-shadow: 0 4px 15px var(--black-a20-color);
			transition: transform 0.2s, box-shadow 0.2s;
		}

		@media (hover: hover) {
			.btn-ticket:hover {
				transform: scale(1.2);
				box-shadow: 0 6px 20px var(--black-a30-color);
			}
		}

		.btn-ticket.disabled {
			opacity: 0.5;
			pointer-events: none;
			filter: grayscale(100%);
			cursor: not-allowed;
			background-color: #555 !important;
			color: #ccc !important;
			box-shadow: none;
		}

	/* --- TICKETING CARD : BLOCK --- */

		.ticket-block.full-pass-ticket {
			background-color: var(--full-pass-ticket-color);
		}

		.btn-ticket.full-pass-ticket {
			color: var(--full-pass-ticket-color);
		}

		.ticket-block.day-pass-ticket-1 {
			background-color: var(--day-pass-ticket-1-color);
		}

		.btn-ticket.day-pass-ticket-1 {
			color: var(--day-pass-ticket-1-color);
		}

		.ticket-block.day-pass-ticket-2 {
			background-color: var(--day-pass-ticket-2-color);
		}

		.btn-ticket.day-pass-ticket-2 {
			color: var(--day-pass-ticket-2-color);
		}

	/* --- TICKETING CARD : STATS --- */

		.ticket-stats {
			margin-top: 15px;
			display: flex;
			flex-direction: column;
			align-items: center;
			gap: 8px;
			width: 100%;
		}

		.ticket-likes-row {
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 6px;
			font-size: 0.95rem;
			font-weight: var(--font-weight-bold);
			background: var(--black-a20-color);
			padding: 6px 14px;
			border-radius: 20px;
			backdrop-filter: blur(2px);
		}

		.ticket-likes-row .material-symbols-outlined {
			font-size: 1.2rem;
			color: var(--white-color);
		}

		.ticket-artists-count {
			font-size: 1.1rem;
			font-weight: var(--font-weight-bold);
			opacity: 0.9;
			text-transform: uppercase;
			margin-top: 10px;
		}

		.ticket-artists-list {
			display: none; /* Hidden on mobile */
			font-size: 0.9rem;
			line-height: 1.4;
			text-align: center;
			opacity: 0.95;
			margin-top: 5px;
			max-width: 90%;
			font-weight: var(--font-weight-regular);
		}


/*	=============================================================================
	DRAWERS
	========================================================================== */

	/* --- DRAWERS ALL  --- */

		.drawer-title {
			font-size: 1.2rem;
			font-weight: var(--font-weight-xtra-bold);
			text-transform: uppercase;
			cursor: pointer;
			margin: auto;
		}

		.drawer-title .top-menu-logo {
			width: auto;
			height: 35px;
			display: flex;
			flex: 0 0 content;
			align-items: center;
			cursor: pointer;
			padding: 0;
			margin: 0;
			margin-right: 10px;
			transition: transform 0.2s;
		}

		@media (hover: hover) {
			.drawer-title .top-menu-logo:hover {
				transform: scale(1.1);
			}
		}

		.drawer-title .top-menu-logo svg {
			width: 75px;
			height: auto;
			aspect-ratio: 40 / 17;
		}

		.drawer-header {
			padding: 10px;
			display: flex;
			justify-content: space-between;
			align-items: center;
			border-bottom: 1px solid var(--black-a10-color);
			background: var(--drawer-fill);
		}

		.drawer-header .material-symbols-outlined {
			color: var(--grey55-color);
		}

		.btn-home,
		.btn-close-drawer {
			background: none;
			border: none;
			cursor: pointer;
			font-size: 28px;
		}


	/* --- SIDEBAR DRAWER --- */

		.sidebar-tabs {
			display: flex;
			gap: 15px;
			align-items: center;
		}

		.sidebar-tab {
			background: none;
			border: none;
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			font-size: 1rem;
			color: var(--grey55-color);
			cursor: pointer;
			padding-bottom: 5px;
			position: relative;
			transition: color 0.3s;
		}

		.sidebar-tab.active {
			color: var(--primary-color);
		}

		.sidebar-tab.active::after {
			content: '';
			position: absolute;
			bottom: -2px;
			left: 0;
			width: 100%;
			height: 2px;
			background-color: var(--primary-color);
		}

		#tab-program-title-id,
		#tab-timeline-title-id,
		#tab-favorites-title-id {
			text-transform: uppercase;
		}

		.tab-content {
			display: none;
			flex-direction: column;
			height: 100%;
			overflow: hidden;
		}

		.tab-content.active {
			display: flex;
		}

		.scrollable-list {
			overflow-y: auto;
			flex: 1;
		}

		.scrollable-list ul {
			list-style: none;
			padding: 0;
			margin: 0;
		}


	/* --- TOP BAR DRAWER --- */

		.top-menu .icon-left {
			display: flex;
			flex: 0 0 content;
			align-items: center;
			justify-content: center;
			cursor: pointer;
			padding: 0;
			margin: 0;
			margin-right: 10px;
			color: var(--white-color);
			transition: transform 0.2s;
		}

		@media (hover: hover) {
			.top-menu .icon-left:hover {
				transform: scale(1.1);
			}
		}


	/* ---  MAIN MENU DRAWER --- */

		.main-menu {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			max-width: none;
			height: 100%;
			background: var(--drawer-fill);
			color: var(--drawer-text);
			z-index: 9500; /* Higher than action-bar (9000) */
			transform: translateX(-100%);
			transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
			display: flex;
			flex-direction: column;
			box-shadow: 10px 0 30px var(--black-a15-color);
			font-family: var(--font-family-navigation);
			padding-top: var(--sat);
			padding-bottom: var(--sab);
		}

		.main-menu.active {
			transform: translateX(0);
		}

		.main-menu .icon-left:active {
			transform: scale(0.9);
		}

		.main-menu .icon-left .material-symbols-outlined {
			font-size: 24px;
		}

		.main-menu .icon-left {
			margin-right: 15px;
			font-size: 24px;
			color: var(--primary-color);
			opacity: 0.6;
		}

		.main-menu.no-icons .icon-left {
			display: none;
		}

		.main-menu .main-menu.no-icons .icon-left.force-visible {
			display: block;
		}

		.main-menu .main-menu-content {
			flex: 1;
			overflow-y: auto;
		}

		.main-menu .main-menu-list {
			list-style: none;
			padding: 0;
			margin: 0;
		}

		.main-menu .main-menu-list li {
			padding: 12px 20px;
			border-bottom: 1px solid var(--black-a5-color);
			cursor: pointer;
			display: flex;
			align-items: center;
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			font-size: 0.95rem;
			color: var(--grey20-color);
			transition: background 0.2s;
		}



		@media (hover: hover) {
			.main-menu .main-menu-list li:hover {
				background: var(--black-a5-color);
			}
		}

		.main-menu .main-menu-list li.main-menu-separator {
			height: 10px;
			background: var(--black-a5-color);
			/* background-color: linen; */
			/* border-top: 1px solid var(--fourth-color); */
			border-bottom: 1px solid var(--grey80-a50-color);
			padding: 0;
			cursor: default;
		}

		.main-menu .main-menu-text {
			flex: 1;
		}

		.main-menu .icon-right {
			font-size: 24px;
			color: var(--grey60-color);
		}

		.main-menu .menu-search-li {
			cursor: pointer;
		}

		.main-menu .menu-search-li .main-menu-search-wrap {
			flex: 1;
			position: relative;
			display: flex;
			align-items: center;
			min-width: 0;
		}

		.main-menu .menu-search-li .main-menu-search-icon {
			position: absolute;
			left: 10px;
			font-size: 18px;
			color: var(--grey60-color);
			pointer-events: none;
		}

		.main-menu .menu-search-li .main-menu-search-input {
			width: 100%;
			background: var(--black-a10-color);
			border: 1px solid var(--grey60-color);
			border-radius: 20px;
			padding: 6px 12px 6px 34px;
			font-size: 0.85rem;
			color: var(--grey20-color);
			font-weight: var(--font-weight-regular);
			text-transform: none;
			cursor: pointer;
			pointer-events: none;
			min-width: 0;
		}

		.main-menu .menu-search-li .main-menu-search-input::placeholder {
			color: var(--grey60-color);
			font-style: italic;
		}

		.main-menu .main-menu-svg-flag-id {
			font-size: 1.0rem;
			line-height: 1;
			margin-left: 10px;
			display: flex;
			align-items: center;
		}

		.main-menu .main-menu-svg-flag-id .flag-icon {
			width: 1.6em;
			height: auto;
		}

		/* ACCORDION */

		.main-menu .main-menu-accordion-item {
			display: block !important; /* Override flex */
			padding: 0 !important;
		}

		.main-menu .main-menu-accordion-header {
			display: flex;
			align-items: center;
			cursor: pointer;
		}

		.main-menu .main-menu-list li,
		.main-menu .main-menu-accordion-header {
			padding: 10px 20px;
		}


		.main-menu .main-menu-accordion-icon {
			transition: transform 0.3s;
		}

		.main-menu .main-menu-accordion-item.expanded .main-menu-accordion-icon {
			transform: rotate(180deg);
		}

		.main-menu .main-menu-accordion-content {
			max-height: 0;
			overflow-y: auto;
			transition: max-height 0.3s ease-in-out;
			background: var(--black-a5-color);
			list-style: none;
		}

		.main-menu .main-menu-accordion-item.expanded .main-menu-accordion-content {
			max-height: 314px;
		}

		.main-menu .main-menu-accordion-content li {
			padding-left: 40px;
			border-bottom: 1px solid var(--white-a50-color);
			font-size: 0.95rem;
		}

		#menu-language-list-id li {
			display: flex;
			align-items: center;
			gap: 10px;
			cursor: pointer;
		}

		#menu-language-list-id li.active {
			font-weight: var(--font-weight-bold);
			color: var(--primary-color);
		}

		#menu-language-list-id .flag-icon {
			width: 1.6em;
			height: auto;
			flex-shrink: 0;
		}

		.main-menu .menu-qrcode {
			padding: 16px;
			display: flex;
			justify-content: center;
			border-top: 1px solid var(--black-a10-color);
		}

		.main-menu .menu-qrcode svg {
			width: 160px;
			height: 160px;
			display: block;
		}

		.main-menu .main-menu-footer {
			padding: 20px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			background: var(--drawer-fill);
			border-top: 1px solid var(--black-a10-color);
		}

		#txt-main-menu-version-id {
			font-size: 0.8rem;
			color: var(--grey60-color);
			font-weight: var(--font-weight-bold);
		}


	/* --- DRAWER : LIVE --- */

		.sidebar {
			position: fixed;
			top: 0;
			right: 0;
			width: 100%;
			max-width: 320px;
			height: 100%;
			background: var(--drawer-fill);
			color: var(--drawer-text);
			z-index: 400;
			transform: translateX(100%);
			transition: transform 0.5s cubic-bezier(0.16, 1, 0.3, 1);
			display: flex;
			flex-direction: column;
			box-shadow: -10px 0 30px var(--black-a15-color);
			padding-top: var(--sat);
			padding-bottom: var(--sab);
		}

		.sidebar.active {
			transform: translateX(0);
		}

		.list-empty-msg {
			padding: 20px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			opacity: 0.6;
		}

		.fav-empty-msg {
			padding: 40px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			opacity: 0.5;
		}

		.warning-area {
			padding: 4px 8px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			font-weight: var(--font-weight-regular);
			font-size: 0.8rem;
			border-top: 1px solid var(--black-a10-color);
			z-index: 10;
			text-transform: uppercase;
			border: 1px solid;
			margin: 10px auto;
			border-radius: 20px;
		}

		.warning-area button {
			background: none;
			border: none;
			cursor: pointer;
			padding: 0px;
			display: flex;
			align-items: center;
			padding-left: 2px;
		}

		.warning-area.filter-favorites,
		.warning-area.filter-favorites button {
			color: var(--bar-filter-favorite-color);
			background-color: var(--bar-filter-favorite-fill);
		}
		.warning-area.filter-session,
		.warning-area.filter-session button  {
			color: var(--bar-filter-session-color);
			background-color: var(--bar-filter-session-fill);
		}
		.warning-area.filter-place,
		.warning-area.filter-place button  {
			color: var(--bar-filter-place-color);
			background-color: var(--bar-filter-place-fill);
		}
		.warning-area.filter-mood,
		.warning-area.filter-mood button  {
			color: var(--bar-filter-mood-color);
			background-color: var(--bar-filter-mood-fill);
		}
		.warning-area.filter-genre,
		.warning-area.filter-genre button  {
			color: var(--bar-filter-genre-color);
			background-color: var(--bar-filter-genre-fill);
		}
		.warning-area.filter-country,
		.warning-area.filter-country button  {
			color: var(--bar-filter-country-color);
			background-color: var(--bar-filter-country-fill);
		}
		.warning-area.filter-tag,
		.warning-area.filter-tag button  {
			color: var(--bar-filter-tag-color);
			background-color: var(--bar-filter-tag-fill);
		}

		.warning-area.hidden {
			display: none !important;
		}

	/* --- DRAWER : LIVE - TAB FAVORITES --- */


		.favorite-title {
			flex: 1;
			font-size: 0.95rem;
			font-weight: var(--font-weight-bold);
		}

		.drawer-footer {
			padding: 20px;
			border-top: 1px solid var(--black-a10-color);
			background: var(--drawer-fill);
			margin-top: auto;
			display: none;
		}

		.drawer-footer.visible {
			display: block;
		}

		.btn-drawer-action {
			display: flex;
			align-items: center;
			justify-content: center;
			width: 100%;
			padding: 12px;
			margin-bottom: 10px;
			border-radius: 8px;
			border: none;
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			text-transform: uppercase;
			font-size: 0.85rem;
			transition: transform 0.2s;
			text-decoration: none;
		}

		@media (hover: hover) {
			.btn-drawer-action:hover {
				transform: scale(1.02);
			}
		}

		.btn-drawer-play {
			background-color: var(--primary-color);
			color: var(--white-color);
		}

		.btn-drawer-share {
			background-color: var(--grey20-color);
			color: var(--white-color);
		}

		.btn-drawer-action .material-symbols-outlined {
			margin-right: 8px;
			font-size: 20px;
		}

		.favorite-item {
			display: flex;
			align-items: center;
			gap: 15px;
			padding: 10px;
			border-bottom: 1px solid var(--black-a5-color);
			cursor: pointer;
		}

		.favorite-item img {
			width:  55px;
			height: 55px;
			border-radius: 6px;
			object-fit: cover;
			cursor: pointer;
		}

		.favorite-item .btn-fav {
			background: none;
			border: none;
			cursor: pointer;
			opacity: 0.3;
			color: var( --color-black );
		}

		.favorite-item .btn-fav-share {
			margin-right: 5px;
			opacity: 0.7;
		}

		@media (hover: hover) {
			.favorite-item .img:hover {
				border: 1px solid var(--primary-color);
			}

			.favorite-item .favorite-title:hover,
			.favorite-item .btn-fav:hover {
				color: var(--primary-color);
				opacity: 1.0;
			}
		}

	/* --- DRAWER : LIVE - TAB TIMELINE  --- */

		.timeline-item {
			display: flex;
			padding: 12px;
			border-bottom: 1px solid var(--black-a5-color);
			transition: background 0.2s;
			cursor: pointer;
		}

		.timeline-item:last-child {
			border-bottom: none;
		}

		.time-thumb {
			width: 64px;
			height: 64px;
			object-fit: cover;
			border-radius: 6px;
			margin-right: 10px;
			flex-shrink: 0;
			cursor: pointer;
		}

		.time-info {
			flex: 1;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			gap: 4px;
		}

		.timeline-title {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-top: -10px;
			margin-bottom: -4px;
		}

		.timeline-title h3 {
			font-size: 1rem;
			margin: 0;
			font-weight: var(--font-weight-bold);
			text-transform: uppercase;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			max-width: 180px;
			cursor: pointer;
		}

		.btn-fav-time {
			background: none;
			border: none;
			cursor: pointer;
			color: #ccc;
			padding: 5px;
			margin-right: -5px;
			transition: transform 0.1s;
		}

		.btn-fav-time.active {
			color: var(--primary-color);
		}

		.btn-fav-time:active {
			transform: scale(1.2);
		}

		.timeline-date-place {
			font-size: 0.8rem;
			font-weight: var(--font-weight-bold);
			color: var(--grey35-color);
			text-transform: uppercase;
		}

		.timeline-tag {
			display: flex;
			flex-wrap: wrap;
			gap: 5px;
			margin-top: 3px;
		}

		.time-tag {
			background: var(--grey90-color);
			color: var(--grey20-color);
			padding: 2px 6px;
			border-radius: 4px;
			font-size: 0.65rem;
			text-transform: uppercase;
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			transition: background 0.2s;
		}

		@media (hover: hover) {
			.time-tag:hover {
				background: var(--grey80-color);
			}
		}

		.time-tag.tag-active {
			background-color: var(--primary-color);
			color: var(--white-color);
		}

	/* --- DRAWER : LIVE - TAB PROGRAM --- */

		#tab-program-content-id .program-empty-placeholder {
			color: var(--grey40-color);
			background-color: var(--white-color);
		}

		#tab-program-content-id .drawer-atglance-list {
			display: grid;
			gap: 5px;
		}

		#tab-program-content-id .btn-program-play {
			/* color: var(--black-color); */
		}

		#tab-program-list-id {
			padding: 0 15px;
		}

		#tab-program-content-id .program-grid {
			display: grid;
			grid-template-columns: repeat(1, 1fr);
			gap: 15px;
			width: 100%;
			margin: 0 auto;
		}

		/* Media Queries for Grid */

		@media (min-width: 320px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 480px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 640px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 768px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 1024px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 1280px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 1536px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}

		@media (min-width: 1920px) {
			#tab-program-content-id .program-grid { grid-template-columns: repeat(1, 1fr); }
		}


		#tab-program-content-id .program-item {
			/* background-color: var(--white-color); */
			background: linear-gradient( var(--black-color), var(--grey30-color));
			box-shadow: 0 4px 10px var(--black-a10-color);
		}

		@media (hover: hover) {
			#tab-program-content-id .program-item:hover {
				box-shadow: 0 8px 20px var(--black-a40-color);
			}
		}


		#tab-program-content-id .program-separator {
			background-color: var(--white-color);
			padding: 20px 0;
		}

		#tab-program-content-id .program-separator h3 .session-date {
			color: var(--black-color);
		}


/*	=============================================================================
	MODALS BOXES
	========================================================================== */

	/* --- ABOUT MODAL --- */

		#about-modal-id {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a80-color);
			z-index: 7000;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s;
		}

		#about-modal-id.active {
			opacity: 1;
			visibility: visible;
		}

		.about-box {
			background: var(--white-color);
			padding: 30px;
			border-radius: 15px;
			width: 90%;
			max-width: 500px;
			max-height: 80%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 8px;
			color: var(--grey20-color);
			box-shadow: 0 10px 30px var(--black-a50-color);
		}

		.about-header {
			display: flex;
			justify-content: space-between;
			align-items: center;
			margin-bottom: 20px;
			flex-shrink: 0;
			width: 100%;
		}

		.about-box h3 {
			margin: 0;
			font-size: 1.2rem;
			text-transform: uppercase;
		}

		.about-content {
			flex: 1;
			overflow-y: auto;
			text-align: left;
			margin-bottom: 0;
			padding-right: 10px;
		}

		.about-press-list,
		.about-local-press-list,
		.about-programming-list {
			display: grid;
			grid-template-columns: repeat(2, 1fr);
			gap: 5px;
		}

		.about-press-list li:last-child:nth-child(odd),
		.about-local-press-list li:last-child:nth-child(odd),
		.about-programming-list li:last-child:nth-child(odd) {
			grid-column: 1 / span 2;
		}


		.about-section-title {
			color: var(--primary-color);
			margin-top: 15px;
			margin-bottom: 10px;
			text-transform: uppercase;
			font-size: 1rem;
			border-bottom: 1px solid var(--black-a10-color);
			padding-bottom: 5px;
		}

		.about-section-title:first-child {
			margin-top: 0;
		}

		.about-list {
			list-style: none;
			padding: 0;
			margin: 0;
			font-size: 0.95rem;
		}

		.about-list li {
			margin-bottom: 8px;
			line-height: 1.4;
		}

		.about-list a {
			color: var(--grey20-color);
			text-decoration: none;
			transition: color 0.2s;
			overflow-wrap: anywhere;
		}

		@media (hover: hover) {
			.about-list a:hover {
				color: var(--primary-color);
				text-decoration: underline;
			}
		}

		.about-sublist {
			list-style: none;
			margin-top: 5px;
			/*
			padding-left: 20px;
			border-left: 2px solid var(--black-a10-color);
			*/
		}

		.about-sublist li {
			margin-bottom: 5px;
			font-size: 0.9rem;
		}

		/* --- ABOUT MODAL : DEVELOPER --- */

		.developer-item {
			display: flex;
			align-items: center;
			text-align: left;
			gap: 15px;
		}

		.about-avatar {
			width: 90px;
			height: auto;
			object-fit: cover;
			/* square as requested, no border radius */
			flex-shrink: 0;
		}

		.developer-info {
			display: flex;
			flex-direction: column;
		}

		.about-social {
			margin-top: 20px;
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			padding-top: 10px;
			border-top: 1px solid var(--black-a10-color);
		}

		.about-social a {
			color: var(--facebook-blue-color);
			font-weight: var(--font-weight-bold);
			text-decoration: none;
			display: inline-flex;
			align-items: center;
			gap: 10px;
			padding: 10px 20px;
			background: transparent;
			font-size: 0.9rem;
			transition: transform 0.2s;
		}

		@media (hover: hover) {
			.about-social a:hover {
				transform: scale(1.05);
			}
		}

		.facebook-icon-about {
			width: 32px;
			height: 32px;
		}


		.about-sublist.about-organizer-list {
			display: flex;
			flex-direction: row;
			justify-content: space-around;
			align-items: flex-start;
			border-left: none;
			padding-left: 0;
			margin-top: 15px;
			gap: 15px;
		}

		.about-sublist.about-organizer-list li {
			margin-bottom: 0;
			flex: 1;
			display: flex;
			justify-content: center;
		}

		.about-organizer-link {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 8px;
			text-decoration: none;
			color: inherit;
		}

		.about-organizer-link .organizer-logo {
			width: 100%;
			max-width: 80px;
			height: auto;
			max-height: 50px;
			fill: currentColor;
			color: var(--grey20-color);
			transition: color 0.2s, transform 0.2s;
		}

		@media (hover: hover) {
			.about-organizer-link:hover .organizer-logo {
				transform: scale(1.1);
				color: var(--primary-color);
			}
		}

		.about-organizer-link span {
			font-size: 0.9rem;
			line-height: 1.2;
		}


	/* --- FEATURES MODAL --- */

		#features-modal {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a80-color);
			z-index: 7000;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s;
		}

		#features-modal.active {
			opacity: 1;
			visibility: visible;
		}

		.features-box {
			background: var(--drawer-fill);
			padding: 30px;
			border-radius: 15px;
			width: 90%;
			max-width: 600px;
			height: 80%;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			text-align: center;
			gap: 8px;
			color: var(--drawer-text);
			box-shadow: 0 10px 30px var(--black-a50-color);
		}

		.features-box h3 {
			margin-top: 0;
			margin-bottom: 20px;
			font-size: 1.2rem;
			text-transform: uppercase;
			flex-shrink: 0;
		}

		#features-list {
			flex: 1;
			overflow-y: auto;
			margin-bottom: 20px;
			text-align: left;
			padding-right: 10px;
		}

		.feature-item {
			display: flex;
			justify-content: space-between;
			align-items: center;
			padding: 10px 0;
			border-bottom: 1px solid var(--black-a10-color);
			font-size: 0.9rem;
		}

		.feature-item:last-child {
			border-bottom: none;
		}

		.feature-key {
			font-weight: var(--font-weight-bold);
			color: #555;
			flex: 1;
			word-break: break-all;
			margin-right: 15px;
		}

		.feature-value {
			color: var(--primary-color);
			font-family: monospace;
			text-align: right;
			max-width: 50%;
		}

		.feature-value .material-symbols-outlined {
			font-size: 1.2rem;
			vertical-align: middle;
		}

		.close-features {
			padding: 10px 25px;
			border: none;
			border-radius: 8px;
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			font-size: 1rem;
			color: var(--white-color);
			background: var(--primary-color);
			transition: transform 0.2s;
			text-transform: uppercase;
			align-self: center;
		}

		@media (hover: hover) {
			.close-features:hover {
				transform: scale(1.05);
			}
		}


		.tag-name-label {
			margin-left: 5px;
			color: var(--white-color);
		}


	/* --- INSTALL MODAL --- */

		#install-modal-id {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a80-color);
			z-index: 7000;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s;
		}

		#install-modal-id.active {
			opacity: 1;
			visibility: visible;
		}

		.install-box-modal {
			background: var(--white-color);
			color: var(--grey20-color);
			padding: 25px;
			border-radius: 12px;
			width: 85%;
			max-width: 350px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8px;
			box-shadow: 0 10px 40px var(--black-a50-color);
		}

		.install-box-modal h3 {
			margin-top: 0;
			margin-bottom: 20px;
			font-size: 1.2rem;
			text-transform: uppercase;
		}

		#install-text,
		.install-box-modal p {
			font-size: 1rem;
			margin-bottom: 25px;
			line-height: 1.4;
			color: #555;
		}

		.install-buttons {
			display: flex;
			gap: 15px;
			justify-content: center;
		}

		.btn-install {
			padding: 12px 25px;
			border: none;
			border-radius: 8px;
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			font-size: 1rem;
			color: var(--white-color);
			transition: transform 0.2s;
			text-transform: uppercase;
		}

		@media (hover: hover) {
			.btn-install:hover {
				transform: scale(1.05);
			}
		}

		.btn-install.yes {
			background: var(--primary-color);
		}

		.btn-install.disabled {
			opacity: 0.5;
			pointer-events: none;
			filter: grayscale(100%);
			cursor: not-allowed;
			background-color: #555 !important;
			color: #ccc !important;
			box-shadow: none;
		}

		.btn-install.no {
			background: #ddd;
			color: var(--grey20-color);
		}

		/* Uninstall mode: hide install button, show instructions */

		.pwa-uninstall-info {
			display: none;
			font-size: 0.9rem;
			color: var(--grey55-color);
			line-height: 1.5;
			margin-top: 12px;
			margin-bottom: 0;
			text-align: left;
		}

		#install-modal-id.uninstall-mode #btn-pwa-install-id {
			display: none;
		}

		#install-modal-id.uninstall-mode .pwa-uninstall-info {
			display: block;
		}


	/* --- RELOAD BUTTON --- */

		.btn-reload {
			background-color: var(--primary-color);
			color: var(--white-color);
			padding: 10px 25px;
			border-radius: 50px;
			text-decoration: none;
			font-weight: var(--font-weight-bold);
			font-size: 0.8rem;
			text-transform: uppercase;
			border: none;
			cursor: pointer;
			box-shadow: 0 4px 15px var(--black-a30-color);
			transition: transform 0.2s;
			flex: unset;
			width: auto;
			min-width: 200px;
			white-space: nowrap;
		}


	/* --- SHARE MODAL --- */

		#share-modal-id {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a80-color);
			z-index: 6000;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s;
		}

		#share-modal-id.active {
			opacity: 1;
			visibility: visible;
		}

		.share-box {
			background: var(--white-color);
			padding: 30px;
			border-radius: 15px;
			width: 90%;
			max-width: 400px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8px;
			color: var(--grey20-color);
			box-shadow: 0 10px 30px var(--black-a50-color);
			border: 1px solid var(--black-a10-color);
		}

		.share-box h3 {
			margin-top: 0;
			margin-bottom: 20px;
			font-size: 1.2rem;
			text-transform: uppercase;
		}

		#txt-share-title-id {
			display: block;
			min-height: 1.2rem;
		}

		.share-options {
			display: flex;
			flex-direction: column;
			gap: 10px;
			margin-bottom: 20px;
		}

		.btn-modal-share {
			padding: 12px;
			border: none;
			border-radius: 8px;
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 10px;
			font-size: 1rem;
			color: var(--white-color);
			transition: transform 0.2s;
		}

		.btn-modal-share svg {
			max-width: 30px;
			width: 30px;
			height: auto;
			flex-shrink: 0;
		}

		@media (hover: hover) {
			.btn-modal-share:hover {
				transform: scale(1.02);
			}
		}

		.btn-modal-share.facebook {
			background: var(--facebook-blue-color);
		}

		.btn-modal-share.email {
			background: var(--grey30-color);
		}

		.btn-modal-share.tiktok {
			background: var(--black-color);
			border: 1px solid var(--grey20-color);
		}

		.btn-modal-share.copy {
			background: var(--primary-color);
		}

		.btn-modal-share.qr {
			background: var(--primary-color);
		}

		.close-share {
			background: var(--primary-color);
			border: none;
			color: var(--white-color);
			padding: 8px 20px;
			border-radius: 20px;
			cursor: pointer;
			display: inline-flex;
			align-items: center;
			gap: 6px;
		}

		#btn-close-share-id .material-symbols-outlined {
			color: var(--white-color);
			font-size: 18px;
		}

		#qr-result-id {
			margin-top: 15px;
			margin-bottom: 15px;
			display: none;
		}

		#qr-result-id svg {
			border-radius: 8px;
			border: 4px solid var(--white-color);
			width: 200px;
			height: 200px;
			display: block;
			margin: 0 auto;
		}

		#share-link-display-id {
			color: var(--primary-color);
			text-decoration: underline;
			cursor: pointer;
			word-break: break-all;
			margin-bottom: 5px;
			font-weight: var(--font-weight-regular);
			font-size: 0.9rem;
			line-height: 1.4;
			padding: 0 10px;
		}

		#share-link-label-id {
			color: var(--grey20-color);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			font-size: 0.8rem;
			margin-bottom: 20px;
			opacity: 0.8;
		}


	/* --- SEARCH MODAL --- */

		#search-modal-id {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a80-color);
			z-index: 8500;
			display: flex;
			justify-content: center;
			align-items: flex-start;
			padding-top: 60px;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s;
		}

		#search-modal-id.active {
			opacity: 1;
			visibility: visible;
		}

		.search-box {
			background: var(--white-color);
			border-radius: 15px;
			width: 90%;
			max-width: 540px;
			max-height: 80vh;
			display: flex;
			flex-direction: column;
			color: var(--grey20-color);
			box-shadow: 0 10px 30px var(--black-a50-color);
			overflow: hidden;
		}

		.search-header {
			display: flex;
			align-items: center;
			gap: 10px;
			padding: 16px 20px;
			border-bottom: 1px solid var(--grey85-color);
			flex-shrink: 0;
		}

		.search-header h3 {
			flex: 1;
			margin: 0;
			font-size: 1.1rem;
			text-transform: uppercase;
		}

		.search-input-wrap {
			display: flex;
			align-items: center;
			gap: 8px;
			padding: 12px 20px;
			border-bottom: 1px solid var(--grey85-color);
			flex-shrink: 0;
		}

		.search-input-icon {
			color: var(--grey55-color);
			font-size: 18px;
		}

		.search-input {
			flex: 1;
			border: none;
			outline: none;
			font-size: 1rem;
			background: transparent;
			color: var(--grey20-color);
		}

		.search-input::placeholder {
			color: var(--grey55-color);
		}

		.search-results {
			list-style: none;
			margin: 0;
			padding: 0;
			overflow-y: auto;
			flex: 1;
		}

		.search-item {
			display: flex;
			align-items: center;
			gap: 12px;
			padding: 10px 20px;
			border-bottom: 1px solid var(--grey90-color);
			cursor: pointer;
		}

		.search-item:last-child {
			border-bottom: none;
		}

		.search-item-img {
			width: 50px;
			height: 50px;
			border-radius: 6px;
			object-fit: cover;
			flex-shrink: 0;
			cursor: pointer;
		}

		.search-item-body {
			flex: 1;
			min-width: 0;
			display: flex;
			flex-direction: column;
			gap: 2px;
			cursor: pointer;
		}

		@media (hover: hover) {
			.search-item-body:hover .search-item-title,
			.search-item-img:hover {
				color: var(--primary-color);
			}
		}

		.search-item-title {
			font-weight: var(--font-weight-bold);
			font-size: 0.9rem;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.search-item-meta {
			font-size: 0.75rem;
			color: var(--grey55-color);
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
		}

		.btn-search {
			background: none;
			border: none;
			cursor: pointer;
			color: var(--grey20-color);
			font-size: 22px;
			padding: 4px;
			flex-shrink: 0;
		}

		@media (hover: hover) {
			.btn-search:hover {
				color: var(--primary-color);
			}
		}

		.btn-search-fav.active {
			color: var(--primary-color);
		}

		.search-empty {
			padding: 20px;
			text-align: center;
			color: var(--grey55-color);
			font-size: 0.9rem;
		}


	/* --- CONFIRM MODAL --- */

		#confirm-modal-id {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: var(--black-a80-color);
			z-index: 8000;
			display: flex;
			justify-content: center;
			align-items: center;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s;
		}

		#confirm-modal-id.active {
			opacity: 1;
			visibility: visible;
		}

		.confirm-box {
			background: var(--white-color);
			color: var(--grey20-color);
			padding: 25px;
			border-radius: 12px;
			width: 85%;
			max-width: 350px;
			text-align: center;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			gap: 8px;
			box-shadow: 0 10px 40px var(--black-a50-color);
		}

		.confirm-box h3 {
			margin: 0 0 15px 0;
			font-size: 1.2rem;
			text-transform: uppercase;
		}

		.confirm-box p {
			font-size: 1rem;
			margin-bottom: 25px;
			color: #555;
			line-height: 1.4;
		}

		.confirm-buttons {
			display: flex;
			justify-content: center;
			gap: 15px;
		}

		.btn-confirm {
			padding: 10px 20px;
			border-radius: 4px;
			border: none;
			font-weight: var(--font-weight-bold);
			cursor: pointer;
			text-transform: uppercase;
			font-size: 0.9rem;
			transition: background 0.2s;
		}

		.btn-confirm.yes {
			background: var(--primary-color);
			color: var(--white-color);
		}

		.btn-confirm.no {
			background: var(--grey80-color);
			color: var(--grey20-color);
		}


/*	=============================================================================
	MISC
	========================================================================== */

	/* --- VERSION INDICATOR --- */

		#app-version-indicator-id {
			position: fixed;
			top: 70px;
			left: 5px;
			z-index: 800;
			font-size: 0.75rem;
			font-weight: var(--font-weight-bold);
			color: var(--white-color);
			background: var(--primary-color);
			padding: 4px 8px;
			border-radius: 4px;
			pointer-events: auto;
			cursor: pointer;
			display: none; /* Caché par défaut */
			text-transform: uppercase;
			backdrop-filter: blur(2px);
		}

		#app-version-indicator-id.visible {
			display: block;
		}


	/* --- LOADER-ERROR --- */

		.loader-error-msg {
			color: var(--white-color);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
		}


	/* --- STATUS-BADGE --- */

		.status-badge {
			padding: 5px 10px;
			border-radius: 4px;
			font-weight: var(--font-weight-bold);
			display: inline-block;
			text-transform: uppercase;
			font-size: 0.8rem;
		}

		.status-badge.status-canceled {
			background-color: var(--status-canceled-fill);
			color: var(--status-canceled-color);
		}

		.status-badge.status-moved-online {
			background-color: var(--status-moved-online-fill);
			color: var(--status-moved-online-color);
		}

		.status-badge.status-postponed {
			background-color: var(--status-postponed-fill);
			color: var(--status-postponed-color);
		}

		.status-badge.status-rescheduled {
			background-color: var(--status-rescheduled-fill);
			color: var(--status-rescheduled-color);
		}

		.status-badge.status-scheduled {
			background-color: var(--status-scheduled-fill);
			color: var(--status-scheduled-color);
		}

		/* Position in video card */

		.video-container .status-badge {
			margin-top: 15px;
			font-size: 1.5rem;
			box-shadow: 0 2px 8px var(--black-a30-color);
			z-index: 8;
		}

		/* Position in timeline */

		.timeline-item .status-badge {
			font-size: 0.65rem;
			padding: 2px 6px;
			margin-right: 5px;
		}


	/* --- TOAST MESSAGE --- */

		#toast-id {
			position: fixed;
			top: 30%;
			left: 50%;
			transform: translate(-50%, -50%);
			background-color: var(--toast-fill);
			color: var(--toast-color);
			padding: 8px 24px;
			border-radius: 20px;
			font-weight: var(--font-weight-regular);
			font-size: 1rem;
			z-index: 5000;
			opacity: 0;
			visibility: hidden;
			transition: opacity 0.3s ease, visibility 0.3s;
			pointer-events: none;
			box-shadow: 0 4px 15px var(--black-a50-color);
			text-align: center;
			display: flex;
			align-items: center;
			justify-content: center;
			gap: 8px;
			text-transform: uppercase;
			white-space: nowrap;
		}

		#toast-id span {
			font-weight: var(--font-weight-regular);
		}

		#toast-id.visible {
			opacity: 1;
			visibility: visible;
		}


/*	=============================================================================
	MEDIA QUERIES - MOBILE FIRST STRATEGY
	============================================================================= */

	/* --- MOBILE "xxs" (min-width: 320px) --- */

		@media (min-width: 320px) {

			/* --- HOME CARD : ORGANIZER --- */

				.home-card .organizers .organizer-col-fixed.paloma {
					width: 60px;
				}

				.home-card .organizers .text {
					font-size: smaller;
				}

				.home-card .organizers .organizer-col-fixed.come-on-people {
					width: 50px;
				}

			/* --- TOP MENU  --- */

				.top-menu .top-menu-right .btn-home,
				.top-menu .top-menu-right .btn-program-all,
				.top-menu .top-menu-right .btn-ticket  {
					display: none;
				}

			/* --- FILTER MODE BAR --- */

				.filter-bar .btn-filter .btn-label {
					display: inline-block;
				}
		}


		@media (min-width: 360px) {

			/* --- SIDEBAR --- */

			body.sidebar-open .action-bar {
				transform: translateX(-320px);
			}

			/* --- MAIN MENU --- */

			body.main-menu-open .action-bar {
				transform: translateX(320px);
			}

		}


	/* --- MOBILE "xs" (min-width: 480px) --- */

		@media (min-width: 480px) {

			span.short { display: none; }
			span.long  { display: inline; }

			/* --- LOGO --- */

			.logo,
			.menu-logo {
				width: 100px;
			}

			/* --- TOP MENU BAR --- */

			.icon-left .material-symbols-outlined {
				font-size: 32px;
			}

			.top-menu .top-menu-right .btn-ticket  {
				display: flex;
			}

			.top-menu .top-menu-right .top-menu-lang-flag {
				font-size: 1.0rem;
			}

			/* --- FILTER MODE BAR --- */

			#filter-bar-id .btn-filter {
				padding: 5px 8px;
				border-radius: 25px;
			}

			#filter-bar-id .btn-filter .material-symbols-outlined {
				font-size: 24px;
			}

			#filter-bar-id .btn-filter .btn-label {
				font-size: 0.8rem;
				display: block;
			}

		}


	/* --- LARGE MOBILE "sm" (min-width: 640px) --- */

		@media (min-width: 640px) {

			:root {
				--header-height: 65px;
			}

			/* --- MAIN MENU --- */

			.main-menu {
				width: 85%;
				max-width: 320px;
			}

			/* --- PROGRAM SEPARATOR --- */

			.program-separator {
				flex-direction: row;
				gap: 20px;
				padding: 0 0 5px 0;
			}

			.program-separator h3 .session-date {
				margin-left: 20px;
				margin-top: 0;
			}

			.program-separator span::after {
				content: "—";
				margin-left: 20px;
				color: var(--grey60-color);
			}

			.program-separator h3 span {
				display: inline-block;
			}

			/* --- TOP MENU --- */

			.logo,
			.menu-logo {
				width: 125px;
				max-width: 100%;
			}

			.top-menu {
				padding: 0 20px;
			}


			.top-menu .icon-left {
			}


			.top-menu .top-menu-right {
				gap: 10px;
			}

			.top-menu .top-menu-right .btn-top-menu {
				padding: 10px 15px;
				font-size: 0.7em;
				font-weight: var(--font-weight-xtra-bold);
				text-transform: uppercase;
			}

			.top-menu .top-menu-right .btn-program-all {
				display: flex;
			}

			.top-menu .top-menu-right .btn-home,
			.top-menu .top-menu-right .btn-lang {
				padding-left: 0;
				padding-right: 0;
			}

			.top-menu .top-menu-right .btn-lang {
				font-size: 1.1em;
			}

			.top-menu .top-menu-right .top-menu-lang-flag {
				font-size: 1.3rem;
			}

			/* --- ACTION BAR --- */

			.action-bar {
				right: 20px;
				gap: 20px;
				padding-bottom: 0;
			}

			.action-bar .btn-action-bar {
				width: 50px;
				height: 50px;
			}

			/* --- FILTER-BAR   --- */

			.filter-bar {
				top: var(--visible-header-height);
				min-height: 65px;
				font-size: 1.20rem;
			}

			/* --- SIDEBAR --- */

			.drawer-header {
				padding: 15px 20px;
			}

			.drawer-header .material-symbols-outlined {
				color: var(--grey55-color);
			}

			.btn-cancel-filter,
			.btn-cancel-filter .material-symbols-outlined {
				color: var(--grey55-color);
			}

			/* --- SIDEBAR : MY FAVORITES --- */

			.favorite-item {
				padding: 15px 25px;
			}

			.favorite-item img {
				width: 55px;
				height: 55px;
			}

			/* --- SIDEBAR : TIMELINE --- */

			.timeline-item {
				padding: 15px;
			}

			.time-thumb {
				width: 80px;
				height: 80px;
				margin-right: 15px;
			}

			/* --- HOME CARD --- */

			.home-card {
				padding: 12vh 20px 5vh 20px;
			}

			.home-card .home-card-top {
				margin-top: 0;
			}

			.home-card .home-subtitle {
				font-size: 1.5rem;
			}

			.home-card .home-date {
				font-size: 3.5rem;
			}

			.home-card .home-buttons-container {
				gap: 20px;
				flex-direction: row;
				align-items: stretch;
			}

			.home-card .btn-home {
				padding: 15px 20px;
				font-size: 0.95rem;
				flex: 1;
				width: auto;
				min-width: auto;
			}

			.home-card .organizers{
				font-size: 1.0rem;
				height: 80px;
				padding: 10px 10px;
			}

			.home-card .organizers .organizer-col-fixed {
			}

			.home-card .organizers .organizer-col-fixed.paloma {
				width: 80px;
			}

			.home-card .organizers .organizer-col-fixed.come-on-people {
				width: 64px;
			}

			/* --- MOOD CARD --- */

			.mood-card .mood-description {
				font-size: 1.2rem;
			}

			.mood-card .mood-buttons-grid {
				grid-template-columns: 1fr 1fr;
				gap: 25px;
			}

			.mood-card .btn-mood {
				padding: 20px;
				font-size: 1.1rem;
			}

			/* --- TICKETING CARD --- */

			.ticketing-card {
				/* min-height was auto in mobile, keep it? or restore 100vh behavior if lost */
			}

			.ticketing-card .ticket-container {
				flex-direction: row;
				gap: 20px;
				padding: 20px;
			}

			.ticketing-card .ticket-block {
				padding: 20px;
				margin: 10px;
			}

			@media (hover: hover) {
				.ticketing-card .ticket-block:hover {
					flex: 1.6;
				}
			}

			.ticketing-card .ticket-block h2 {
				font-size: 2rem;
				transition: transform 0.3s ease;
			}

			.ticketing-card .ticket-block h3 {
				font-size: 1.5rem;
				transition: transform 0.3s ease;
			}

			.ticketing-card .btn-ticket {
				padding: 15px 30px;
				font-size: 1rem;
				transition: transform 0.2s, box-shadow 0.2s, transform 0.3s ease;
			}

			@media (hover: hover) {
				.ticketing-card .ticket-block:hover h2,
				.ticketing-card .ticket-block:hover h3,
				.ticketing-card .ticket-block:hover .btn-ticket {
					transform: scale(1.2);
					margin-bottom: 15px;
				}
			}

			.ticketing-card .ticket-artists-list {
				display: block;
			}

			.ticketing-card .ticket-stats {
				margin-top: 20px;
			}
		}


	/* --- TABLET "md" (min-width: 768px) --- */

		@media (min-width: 768px) {

			.ticket-title {
				padding-top: 30px;
			}
		}


	/* --- LAPTOP "lg" (min-width: 1024px) --- */

		@media (min-width: 1024px) {

			:root {
				--header-height: 75px;
			}

			/* --- SIDEBAR : SPLIT SCREEN --- */

			body.sidebar-open #main-id,
			body.sidebar-open .top-menu,
			body.sidebar-open .filter-bar,
			body.sidebar-open #control-bar-id {
				width: calc(100% - 320px);
			}

			/* --- MAIN MENU : SPLIT SCREEN --- */

			body.main-menu-open #main-id,
			body.main-menu-open .top-menu,
			body.main-menu-open .filter-bar,
			body.main-menu-open #control-bar-id {
				width: calc(100% - 320px);
				margin-left: 320px;
			}

			/* --- HOME CARD : ORGANIZER --- */

			.home-card .organizers {
				font-size: 1.15rem;
				height: 100px;
				padding: 10px 13px;
			}

			.home-card .organizers .organizer-col-fixed.paloma {
				width: 120px;
				padding-left: 15px;
			}

			.home-card .organizers .organizer-col-fixed.come-on-people {
				width: 80px;
			}

			/* --- TOP MENU BAR --- */

			.top-menu {
				padding: 0 30px;
			}

			.top-menu .top-menu-right .btn-home,
			.top-menu .top-menu-right .btn-program-all {
				display: flex;
			}

			.top-menu .top-menu-right .top-menu-lang-flag {
				font-size: 1.4rem;
			}


		}


	/* --- TABLET "xl" (min-width: 1280px) --- */

		@media (min-width: 1280px) {
			:root {
				--header-height: 80px;
			}
		}


	/* --- TABLET "2xl" (min-width: 1536px) --- */

		@media (min-width: 1536px) {
		}







	/* Active state for top menu actions when home card is focused */



	/* On small screens, constrain active top-menu-right spacing */

	.top-menu-right.active {
		padding: 2px;
	}

	@media (min-width: 640px) {
		.top-menu-right.active {
			padding: revert;
		}
	}


/* =============================================================================
   REDIRECT OVERLAY (migration thisisnotalovesong.fr → www.tinals.fr)
   ========================================================================== */

	#redirect-overlay-id {
		position: fixed;
		inset: 0;
		z-index: 2147483646;
		background: #111;
		color: #f0f0f0;
		font-family: var(--font-family-content);
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		padding: 24px;
		text-align: center;
	}

	.redirect-card {
		background: #1e1e1e;
		border: 1px solid rgba(255,255,255,0.08);
		border-radius: 16px;
		padding: 40px 32px;
		max-width: 520px;
		width: 100%;
		box-shadow: 0 8px 40px rgba(0,0,0,0.5);
	}

	.redirect-logo {
		font-size: 1.1rem;
		font-weight: var(--font-weight-regular);
		letter-spacing: 0.15em;
		text-transform: uppercase;
		color: #999;
		margin-bottom: 6px;
	}

	.redirect-title {
		font-size: 2rem;
		font-weight: var(--font-weight-xtra-bold);
		text-transform: uppercase;
		color: var(--primary-color);
		letter-spacing: 0.05em;
		margin-bottom: 20px;
	}

	.redirect-img {
		width: 80px;
		height: 80px;
		border-radius: 12px;
		margin-bottom: 4px;
	}

	.redirect-headline {
		font-size: 1.6rem;
		font-weight: var(--font-weight-bold);
		margin-top: 20px;
		margin-bottom: 12px;
	}

	.redirect-description {
		font-size: 0.95rem;
		color: #999;
		line-height: 1.6;
		margin-bottom: 24px;
	}

	.redirect-new-url {
		font-size: 1.6rem;
		font-weight: var(--font-weight-bold);
		color: #fff;
		background: rgba(240, 78, 35, 0.1);
		border: 1px solid rgba(240, 78, 35, 0.3);
		border-radius: 8px;
		padding: 10px 20px;
		display: inline-block;
		margin-bottom: 24px;
		word-break: break-all;
	}

	.redirect-btn {
		display: inline-block;
		background: var(--primary-color);
		color: #fff;
		font-size: 1rem;
		font-weight: var(--font-weight-bold);
		text-transform: uppercase;
		letter-spacing: 0.08em;
		padding: 14px 36px;
		border-radius: 40px;
		border: none;
		cursor: pointer;
		text-decoration: none;
		transition: opacity 0.2s, transform 0.2s;
		margin-bottom: 24px;
	}

	@media (hover: hover) {
		.redirect-btn:hover {
			opacity: 0.85;
			transform: scale(1.03);
		}
	}

	.redirect-countdown-wrap {
		font-size: 0.85rem;
		color: #999;
	}

	#redirect-countdown-id {
		font-weight: var(--font-weight-bold);
		color: #f0f0f0;
	}

	.redirect-progress-wrap {
		height: 3px;
		background: rgba(255,255,255,0.08);
		border-radius: 2px;
		margin-top: 12px;
		overflow: hidden;
	}

	.redirect-progress-bar {
		height: 100%;
		background: var(--primary-color);
		border-radius: 2px;
		width: 100%;
		transform-origin: left;
		animation: redirect-shrink 10s linear forwards;
	}

	@keyframes redirect-shrink {
		from { transform: scaleX(1); }
		to   { transform: scaleX(0); }
	}

	.redirect-footer {
		margin-top: 24px;
		font-size: 0.75rem;
		color: #666;
	}


/* =============================================================================
   SPLASH MODAL (pre-launch teaser)
   ========================================================================== */

/* --- Overlay --- */

	#splash-modal-id {
		position: fixed;
		inset: 0;
		background: var(--content-fill);
		z-index: 9800;
		display: flex;
		opacity: 0;
		visibility: hidden;
		transition: opacity 0.4s;
	}

	#splash-modal-id.active {
		opacity: 1;
		visibility: visible;
	}

/* --- Box : colonne pleine hauteur sur mobile --- */

	.splash-box {
		display: flex;
		flex-direction: column;
		width: 100%;
		overflow: hidden;
		padding-top: env(safe-area-inset-top, 0px);
		padding-bottom: env(safe-area-inset-bottom, 0px);
	}

/* --- Header : logo + titre + sous-titre --- */

	.splash-header {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 10px;
		padding: 32px 24px 18px;
		text-align: center;
	}

	.splash-logo {
		width: 120px;
		height: auto;
	}

	.splash-title {
		margin: 0;
		font-size: 1.1rem;
		font-weight: 700;
		text-transform: uppercase;
		letter-spacing: 0.08em;
		color: var(--primary-color);
	}

	.splash-subtitle {
		margin: 0;
		font-size: 0.95rem;
		font-weight: 500;
		color: var(--white-color);
		opacity: 0.85;
	}

/* --- Body : message scrollable --- */

	.splash-body {
		flex: 1;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		padding: 0 24px;
	}

	.splash-message {
		display: flex;
		flex-direction: column;
		gap: 10px;
		padding: 4px 0 18px;
	}

	.splash-message p {
		margin: 0;
		font-size: 0.875rem;
		line-height: 1.65;
		color: var(--white-color);
		opacity: 0.7;
		text-align: left;
	}

/* --- Footer : compte à rebours + checkbox + bouton --- */

	.splash-footer {
		flex-shrink: 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		gap: 14px;
		padding: 16px 24px 24px;
		border-top: 1px solid var(--white-a10-color);
	}

	.splash-countdown {
		width: 100%;
		box-sizing: border-box;
		margin: 0;
		padding: 10px 14px;
		font-size: 0.9rem;
		font-weight: 500;
		line-height: 1.5;
		color: var(--white-color);
		text-align: center;
		border: 1px solid var(--primary-color);
		border-radius: 6px;
	}

	.splash-no-show-wrap {
		display: flex;
		align-items: center;
		gap: 10px;
		width: 100%;
		box-sizing: border-box;
		min-height: 44px;
		cursor: pointer;
		color: var(--white-color);
		opacity: 0.6;
		font-size: 0.85rem;
	}

	.splash-no-show-cb {
		width: 18px;
		height: 18px;
		flex-shrink: 0;
		cursor: pointer;
		accent-color: var(--primary-color);
	}

	.btn-splash-go {
		width: 100%;
		min-height: 50px;
		padding: 14px 24px;
		background: var(--primary-color);
		color: var(--white-color);
		border: none;
		border-radius: 8px;
		font-size: 1rem;
		font-weight: 700;
		font-family: inherit;
		text-transform: uppercase;
		letter-spacing: 0.05em;
		cursor: pointer;
		touch-action: manipulation;
		transition: opacity 0.2s;
	}

	.btn-splash-go:active { opacity: 0.7; }

	@media (hover: hover) {
		.btn-splash-go:hover { opacity: 0.85; }
	}

/* --- Tablette+ : carte centrée flottante --- */

	@media (min-width: 640px) {

		#splash-modal-id {
			background: var(--black-a90-color);
			justify-content: center;
			align-items: center;
		}

		.splash-box {
			width: 90%;
			max-width: 520px;
			max-height: 82vh;
			border-radius: 16px;
			overflow: hidden;
			background: var(--content-fill);
			box-shadow: 0 24px 64px var(--black-a50-color);
			border: 1px solid var(--white-a10-color);
			padding: 0;
		}

		.splash-header {
			gap: 12px;
			padding: 36px 36px 20px;
		}

		.splash-logo {
			width: 180px;
		}

		.splash-title {
			font-size: 1.2rem;
		}

		.splash-body {
			padding: 0 36px;
		}

		.splash-message p {
			font-size: 0.925rem;
		}

		.splash-footer {
			gap: 16px;
			padding: 18px 36px 32px;
		}

		.btn-splash-go {
			width: auto;
			padding: 14px 44px;
		}
	}