/**
 * Fresque : swipe + volet saison sur les fiches événement.
 * (chargé uniquement si FRESQUE_EVENTS est à true dans functions.php)
 * S'appuie sur les variables du thème : --bgcolor, --color, --active-main-color-uni,
 * --transition-duration (style.css / assets/css/themes/*.css).
 */

/* ------------------------------------------------ Swipe (drag du contenu) */
.main-event{
	/* Le scroll vertical reste au navigateur, l'horizontal nous appartient */
	touch-action:pan-y;
	transform:translateX(calc(var(--swipe-x,0px)*0.35));
}
.main-event.swiping{
	user-select:none;
	-webkit-user-select:none;
	-webkit-touch-callout:none;
}
.main-event.swipe-release{
	transition:transform .3s ease-out;
}
.main-event.loading{
	opacity:.4;
	pointer-events:none;
	transition:opacity .2s;
}
/* Flèches de direction pendant le drag (bords du viewport) */
.main-event.swipe-prev::before,
.main-event.swipe-next::after{
	content:"";
	position:fixed;
	top:50%;
	margin-top:-28px;
	width:30px;
	height:56px;
	z-index:899;
	background:var(--active-main-color-uni,var(--main-color3));
}
.main-event.swipe-prev::before{
	left:12px;
	clip-path:polygon(100% 0,100% 100%,0 50%);
}
.main-event.swipe-next::after{
	right:12px;
	clip-path:polygon(0 0,0 100%,100% 50%);
}

/* ------------------------------------------------ Volet sticky bas */
:root{
	--fresque-handle-h:var(--footer-height,38px);
}
body.single-tribe_events{
	padding-bottom:calc(var(--fresque-handle-h) + env(safe-area-inset-bottom,0px));
}

.fresque-volet{
	position:fixed;
	left:0;
	right:0;
	bottom:0;
	z-index:900;
	/* background:var(--bgcolor); */
	box-shadow:0 -6px 24px rgba(0,0,0,.14);
	/* Fermé : seule la bande du bouton (premier enfant, en flux) reste visible */
	transform:translateY(calc(100% - var(--fresque-handle-h)));
	transition:transform var(--transition-duration,.3s) ease,bottom var(--transition-duration,.3s) ease;
	padding-bottom:env(safe-area-inset-bottom,0px);
	backdrop-filter: blur(8px);
}
.fresque-volet:before {
    content: "";
    position: absolute;
    inset: 0;
    background: var(--bgcolor);
    z-index: -1;
    opacity: .8;
}
/* La barre de footer du site (fixed bottom, z-index supérieur) n'est visible
   que quand #header-block a la classe "min" : on se cale alors au-dessus d'elle
   (classe posée en JS par Fresque.watchFooterBar) */
.fresque-volet.above-footer{
	bottom:var(--footer-height,38px);
}
.fresque-volet.open{
	transform:translateY(0);
}
/* Feedback de butée de saison : rebond du panneau (pas du volet, dont le
   transform porte l'état ouvert/fermé) */
.fresque-volet.no-more-before .fresque-panel,
.fresque-volet.no-more-after .fresque-panel{
	animation:fresque-nudge .4s ease;
}

/* Bouton central d'ouverture/fermeture : bande pleine largeur cliquable,
   pilule centrée */
.fresque-toggle{
	display:flex;
	align-items:center;
	justify-content:center;
	gap:10px;
	width:100%;
	height:var(--fresque-handle-h);
	border:none;
	background:transparent;
	color:var(--color);
	font-family:inherit;
	font-size:12px;
	letter-spacing:.08em;
	text-transform:uppercase;
	cursor:pointer;
	white-space:nowrap;
}
.fresque-toggle::before,
.fresque-toggle::after{
	content:"";
	order:0;
	flex:1;
	height:1px;
	background:currentColor;
	opacity:.25;
}
.fresque-toggle-picto{
	order:1;
}
.fresque-toggle-label{
	order:2;
	background: var(--active-main-color);
    box-shadow: 0 0 0 7px var(--active-main-color);
}
.fresque-toggle::after{
	order:3;
}
.fresque-toggle:focus-visible{
	outline:2px solid var(--active-main-color-uni,var(--main-color3));
	outline-offset:2px;
}
.fresque-toggle-picto{
	width:10px;
	height:8px;
	background:currentColor;
	clip-path:polygon(0 0,100% 0,50% 100%);
	transition:transform var(--transition-duration,.3s);
}
.fresque-volet.open .fresque-toggle-picto{
	transform:rotate(180deg);
}

/* Panneau : la fresque horizontale */
.fresque-panel{
	padding:12px 0 14px;
}
.fresque-track{
	display:flex;
	gap:12px;
	overflow-x:auto;
	overflow-y:hidden;
	padding:6px 20px 10px;
	scroll-snap-type:x proximity;
	scrollbar-width:none;
	-ms-overflow-style:none;
	outline:none;
}
.fresque-track::-webkit-scrollbar{
	display:none;
}
.fresque-track:focus-visible{
	outline:2px solid var(--active-main-color-uni,var(--main-color3));
	outline-offset:-2px;
}
.fresque-track.loading{
	opacity:.6;
}
.fresque-empty{
	padding:20px;
	text-align:center;
	opacity:.6;
}

/* ------------------------------------------------ Cartes */
.fresque-card{
	position:relative;
	flex:0 0 clamp(150px,24vw,277px);
	aspect-ratio:277/185;
	scroll-snap-align:center;
	text-decoration:none;
	color:inherit;
	background:#eee;
}
/* Conteneur de l'image : c'est lui qui clippe (le hover scale de .img), pas la
   carte, pour que l'étiquette du haut puisse déborder au-dessus sans être rogner. */
.fresque-card .media{
	position:absolute;
	inset:0;
	overflow:hidden;
}
.fresque-card .img{
	position:absolute;
	inset:0;
	background-image:var(--img);
	background-size:cover;
	background-position:center;
	transition:transform .3s;
}
.fresque-card:hover .img{
	transform:scale(1.04);
}
.fresque-card .overlay{
	position:absolute;
	inset:0;
	background:linear-gradient(to bottom,rgba(0,0,0,0) 45%,rgba(0,0,0,.78) 100%);
}
.fresque-card .metas{
	position:absolute;
	left:0;
	right:0;
	bottom:0;
	display:flex;
	flex-direction:column;
	gap:5px;
	padding:10px 12px;
	color:#fff;
}
.fresque-card .date{
	font-size:11px;
	text-transform:uppercase;
	letter-spacing:.05em;
	white-space:pre-line;
}
/* Jour de la semaine + horaire : extraits du bloc date et affichés en étiquette
   « à cheval » sur le haut de la vignette — sur mobile seulement (cf @media
   max-width:760px). Sur PC rien n'est extrait : le .date garde tout le datetime
   comme à l'origine, et l'étiquette reste masquée. */
.fresque-card .date-top{
	display:none;
}
.fresque-card .titre{
	display:block;
	font-size:14px;
	font-weight:700;
	line-height:1.15;
}
.fresque-card .soustitre{
	display:block;
	font-size:11px;
	opacity:.85;
	line-height:1.2;
}
.fresque-card.past{
	opacity:.45;
}
.fresque-card.current{
	box-shadow:0 0 0 3px var(--active-main-color-uni,var(--main-color3));
}
.fresque-card.current::after{
	content:"";
	position:absolute;
	top:0;
	left:50%;
	transform:translateX(-50%);
	width:34px;
	height:4px;
	background:var(--active-main-color-uni,var(--main-color3));
}

/* Flèches magnétiques latérales (survol souris, cf Fresque.bindArrows) :
   opacité/échelle pilotées par --p (0..1) selon la proximité du bord du
   conteneur ; quand le curseur sort du conteneur la flèche suit son abscisse
   (left posé en JS) et la courbe "ressort" ci-dessous produit le rebond au
   détachement du bord */
.fresque-arrow{
	position:fixed;
	z-index:899;
	width:40px;
	height:64px;
	padding:0;
	border:none;
	background:transparent;
	cursor:pointer;
	opacity:calc(var(--p,0)*.95);
	transform:translateY(-50%) scale(calc(.72 + var(--p,0)*.28));
	transition:opacity .12s linear,transform .12s linear,
		left .32s cubic-bezier(.25,1.55,.4,1),
		top .32s cubic-bezier(.25,1.55,.4,1);
	pointer-events:none;
}
.fresque-arrow[hidden]{
	display:none;
}
.fresque-arrow.live{
	pointer-events:auto;
}
.fresque-arrow:focus-visible{
	outline:2px solid var(--active-main-color-uni,var(--main-color3));
	outline-offset:2px;
}
.fresque-arrow .picto{
	display:block;
	width:100%;
	height:100%;
	background:var(--active-main-color-uni,var(--main-color3));
	transition:transform .15s ease-out;
}
.fresque-arrow.live:hover .picto{
	transform:scale(1.18);
}
.fresque-arrow.right .picto{
	clip-path:polygon(0 0,45% 0,100% 50%,45% 100%,0 100%,55% 50%);
}
.fresque-arrow.left .picto{
	clip-path:polygon(100% 0,55% 0,0 50%,55% 100%,100% 100%,45% 50%);
}

/* ------------------------------------------------ Animations */
@keyframes fresque-nudge{
	0%,100%{ transform:translateY(0); }
	50%{ transform:translateY(6px); }
}

/* ------------------------------------------------ Responsive */
/* Pas de flèches magnétiques au tactile (double garde avec le test JS) */
@media (hover:none), (pointer:coarse){
	.fresque-arrow{
		display:none;
	}
}
/* Sous 1200px la barre de footer du site passe en `position:relative` (cf
   responsive.css) : elle n'est plus sticky en bas, donc jamais visible par-dessus
   le volet. On annule alors le relèvement `.above-footer` (posée en JS d'après la
   classe `min` du header) qui laissait un espace vide de --footer-height en bas. */
@media (max-width:1200px){
	.fresque-volet.above-footer{
		bottom:0;
	}
}
@media (max-width:760px){
	/* .fresque-toggle-label{
		display:none;
	} */
	.fresque-toggle{
		padding:0 16px;
	}
	.fresque-panel{
		padding:8px 0 10px;
	}
	.fresque-track{
		padding:18px 12px 8px;
		gap:10px;
	}
	/* Sur mobile : la vignette (metas) ne garde que titre/soustitre — le bloc
	   date est masqué et jour+date+horaire sont repris en étiquette au-dessus de
	   la vignette, en simple fondu (opacity) selon la proximité du centre.
	   Les voisins immédiat restent à moitié visibles (--near ~0.33). */
	.fresque-card .date{
		display:none;
	}
	.fresque-card .date-top{
		display:block;
		position:absolute;
		left:0;
		right:0;
		bottom:calc(100% + 2px);
		text-align:center;
		padding:0 10px;
		color:var(--color);
		font-size:10px;
		line-height:1.2;
		font-weight:700;
		letter-spacing:.05em;
		text-transform:uppercase;
		white-space:nowrap;
		pointer-events:none;
		z-index:3;
		opacity:var(--near,0);
		transition:opacity .18s linear;
		will-change:opacity;
	}
	.main-event.swipe-prev::before,
	.main-event.swipe-next::after{
		width:22px;
		height:44px;
		margin-top:-22px;
	}
}