/**
 * Sync Trad — affichage public (socle neutre).
 *
 * Toutes les valeurs passent par des variables --st-*, qui lisent d'abord
 * celles du thème (--wp--custom--*, --wp--preset--*) : un thème bloc
 * habille l'agenda sans une ligne de CSS de plus. Aucune couleur, police ou
 * arrondi codé en dur.
 */

.st-agenda,
.sync-trad-event-details {
	--st-fond: var(--wp--custom--fond, transparent);
	--st-encre: var(--wp--custom--encre, currentColor);
	--st-discret: var(--wp--custom--discret, color-mix(in srgb, currentColor 65%, transparent));
	--st-accent: var(--wp--custom--accent, currentColor);
	--st-filet: var(--wp--custom--filet, color-mix(in srgb, currentColor 22%, transparent));
	--st-f-titre: var(--wp--preset--font-family--titre, inherit);
	--st-f-texte: var(--wp--preset--font-family--texte, inherit);
	--st-f-mono: var(--wp--preset--font-family--mono, ui-monospace, monospace);
	--st-gouttiere: var(--wp--custom--gouttiere, clamp(12px, 2vw, 28px));
	--st-duree: 240ms;
	--st-courbe: cubic-bezier(.3, .7, .2, 1);
}

.st-sr {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
}

/* ---------- filtres ---------- */
.st-filtres {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	justify-content: space-between;
	gap: .75rem var(--st-gouttiere);
	margin-bottom: 1.5rem;
}

.st-filtres__groupe {
	display: flex;
	flex-wrap: wrap;
	gap: .25rem 1.25rem;
}

.st-filtre {
	appearance: none;
	background: none;
	border: 0;
	padding: .35rem 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
	text-decoration: none;
}

.st-filtre[aria-pressed="true"],
.st-deroulant.est-actif > .st-deroulant__bouton {
	text-decoration: underline;
	text-decoration-thickness: 2px;
	text-underline-offset: .3em;
	text-decoration-color: var(--st-accent);
}

.st-deroulant { position: relative; }

.st-deroulant__signe::after {
	content: "↓";
	display: inline-block;
	margin-left: .35em;
	transition: transform var(--st-duree) var(--st-courbe);
}

.st-deroulant.est-ouvert .st-deroulant__signe::after { transform: rotate(180deg); }

.st-deroulant__menu {
	position: absolute;
	z-index: 20;
	top: 100%;
	left: 0;
	translate: var(--st-decalage, 0) 0;
	min-width: 14rem;
	max-height: min(60vh, 26rem);
	overflow: auto;
	margin: .25rem 0 0;
	padding: .5rem 0;
	list-style: none;
	background: var(--wp--preset--color--base, var(--st-fond, Canvas));
	color: var(--st-encre);
	border-top: 2px solid currentColor;
}

.st-deroulant__menu[hidden] { display: none; }

.st-deroulant__option {
	display: block;
	width: 100%;
	padding: .4rem 1rem;
	text-align: left;
	background: none;
	border: 0;
	color: inherit;
	font: inherit;
	cursor: pointer;
}

.st-deroulant__option:hover,
.st-deroulant__option[aria-pressed="true"] { color: var(--st-accent); }

.st-proposer { font-size: .9em; }

.st-compte {
	margin: 0 0 .75rem;
	font-family: var(--st-f-mono);
	font-size: .8em;
	color: var(--st-discret);
}

.st-lien {
	background: none;
	border: 0;
	padding: 0;
	font: inherit;
	color: inherit;
	text-decoration: underline;
	cursor: pointer;
}

/* ---------- liste ---------- */
/* .st-agenda en préfixe : le thème stylise souvent ol/li dans le contenu. */
.st-agenda .st-liste {
	list-style: none;
	margin: 0;
	padding: 0;
	border-top: 1px solid var(--st-filet);
}

.st-agenda .st-evt {
	position: relative;
	display: grid;
	grid-template-columns: clamp(4.5rem, 9vw, 8rem) minmax(7rem, 2fr) 6fr minmax(0, 3fr);
	gap: .5rem var(--st-gouttiere);
	align-items: baseline;
	margin: 0;
	padding: 1.1rem 0;
	border-bottom: 1px solid var(--st-filet);
}

.st-agenda .st-evt[hidden] { display: none; }

.st-agenda .st-evt::marker { content: none; }

.st-agenda,
.sync-trad-event-details { max-width: none; }

.st-evt > * { margin: 0; }

.st-evt__date { display: grid; }

.st-evt__jour {
	font-family: var(--st-f-mono);
	font-size: 1.5em;
	line-height: 1;
}

.st-evt__detail,
.st-evt__dept {
	font-family: var(--st-f-mono);
	font-size: .75em;
	color: var(--st-discret);
}

.st-evt__titre {
	margin: 0;
	font-size: 1.25em;
	line-height: 1.15;
}

.st-evt__titre a { text-decoration: none; color: inherit; }

/* toute la ligne est cliquable, le lien reste unique */
.st-evt__titre a::after {
	content: "";
	position: absolute;
	inset: 0;
}

.st-evt:hover .st-evt__titre a,
.st-evt:focus-within .st-evt__titre a { color: var(--st-accent); }

.st-evt__genres {
	margin: .3rem 0 0;
	font-size: .85em;
	color: var(--st-discret);
}

.st-evt__lieu { font-size: .9em; }

.st-evt__visuel {
	display: block;
	width: 100%;
	aspect-ratio: 4 / 3;
	object-fit: cover;
	align-self: center;
}

.st-evt__visuel--vide { background: var(--st-filet); }

.st-vide { color: var(--st-discret); }

@media (max-width: 760px) {
	.st-agenda .st-evt { grid-template-columns: 5rem 1fr; }
	.st-evt__visuel { grid-row: span 3; align-self: start; }
}

/* ---------- style « affiches » ---------- */
.st-agenda.is-style-affiches .st-liste {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(100%, 15rem), 1fr));
	gap: 2.5rem var(--st-gouttiere);
	border: 0;
}

.st-agenda.is-style-affiches .st-evt {
	grid-template-columns: 1fr;
	align-content: start;
	padding: 0;
	border: 0;
}

.is-style-affiches .st-evt__visuel {
	display: block;
	order: -1;
	width: 100%;
	aspect-ratio: 3 / 4;
	object-fit: cover;
}

/* ---------- fiche d'un évènement ---------- */
.sync-trad-event-details__list { margin: 0; padding: 0; }

.sync-trad-event-details__item {
	display: grid;
	grid-template-columns: minmax(5rem, 1fr) 3fr;
	gap: .75rem;
	padding: .7rem 0;
	border-bottom: 1px solid var(--st-filet);
}

.sync-trad-event-details__label {
	display: flex;
	gap: .4rem;
	align-items: baseline;
	font-family: var(--st-f-mono);
	font-size: .8em;
	color: var(--st-discret);
}

.sync-trad-event-details__value { margin: 0; }

.event-icon {
	display: inline-flex;
	width: 1em;
	height: 1em;
	flex: none;
}

.event-icon svg {
	width: 100%;
	height: 100%;
	fill: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.st-deroulant__signe::after { transition: none; }
}