/* Activités – rangée de cartes verticales. Les variables --actst-* sont générées depuis les réglages. */
.actst {
	position: relative;
	box-sizing: border-box;
	width: 100%;
	max-width: var(--actst-max, none);
	margin: 0 auto;
	padding: var(--actst-pad, 12px) 0;
	background: var(--actst-bg, #fff);
	font-family: var(--actst-font, system-ui, sans-serif);
	line-height: 1.2;
	clear: both;
	text-align: left;
}
.actst *,
.actst *::before,
.actst *::after { box-sizing: border-box; }

.actst .actst__heading {
	margin: 0 0 10px;
	padding: 0 var(--actst-pad, 12px);
	font: 700 1.125rem/1.2 var(--actst-font, system-ui, sans-serif);
	color: #1c1e21;
	letter-spacing: 0;
	text-transform: none;
}

.actst__viewport { position: relative; }

.actst .actst__track {
	display: flex;
	gap: var(--actst-gap, 6px);
	margin: 0;
	padding: 2px var(--actst-pad, 12px) 6px;
	list-style: none;
	overflow-x: auto;
	overflow-y: hidden;
	scroll-snap-type: var(--actst-snap, x proximity);
	scroll-padding-inline: var(--actst-pad, 12px);
	scroll-behavior: smooth;
	scrollbar-width: none;
	-webkit-overflow-scrolling: touch;
	transition: opacity .2s ease;
}
.actst .actst__track::-webkit-scrollbar { display: none; }
.actst.is-loading .actst__track { opacity: .55; }

.actst .actst__item {
	position: relative;
	flex: 0 0 var(--actst-w, 150px);
	width: var(--actst-w, 150px);
	aspect-ratio: var(--actst-ratio, 9 / 16);
	margin: 0;
	padding: 0;
	list-style: none;
	border-radius: var(--actst-radius, 18px);
	box-shadow: var(--actst-elev, none);
	scroll-snap-align: start;
	transition: flex-basis .25s ease, width .25s ease, margin .25s ease, opacity .2s ease;
}
.actst .actst__item::before,
.actst .actst__item::marker { content: none; }

.actst .actst__card {
	position: absolute;
	inset: 0;
	display: block;
	overflow: hidden;
	border-radius: inherit;
	background: #8e9bb0 center top / cover no-repeat;
	color: var(--actst-color, #fff);
	text-decoration: none;
	isolation: isolate;
	transition: opacity .2s ease, transform .2s ease;
	-webkit-tap-highlight-color: transparent;
}
.actst .actst__card:focus-visible { outline: 3px solid var(--actst-ring, #1877f2); outline-offset: 2px; }

/* Image mise en avant : couvre toujours 100 % de la carte, même si le thème impose img{height:auto}. */
.actst .actst__item .actst__card img.actst__img {
	position: absolute !important;
	top: 0 !important;
	left: 0 !important;
	right: auto !important;
	bottom: auto !important;
	display: block !important;
	width: 100% !important;
	height: 100% !important;
	min-width: 100% !important;
	min-height: 100% !important;
	max-width: none !important;
	max-height: none !important;
	margin: 0 !important;
	padding: 0 !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	aspect-ratio: auto !important;
	object-fit: cover !important;
	object-position: center top;
	transition: transform .4s ease;
}
.actst .actst__item:hover .actst__img { transform: scale(var(--actst-zoom, 1.05)); }

.actst__shade {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(to bottom, rgba(0, 0, 0, calc(var(--actst-overlay, .55) * .45)) 0, rgba(0, 0, 0, 0) 28%),
		linear-gradient(to top, rgba(0, 0, 0, var(--actst-overlay, .55)) 0, rgba(0, 0, 0, 0) 55%);
	pointer-events: none;
}

/* Cercle « profil » : anneau bleu épais, liseré blanc, logo au centre. */
.actst__logo {
	position: absolute;
	top: 10px;
	left: 10px;
	width: var(--actst-logo, 38px);
	height: var(--actst-logo, 38px);
	padding: 2px;
	border: var(--actst-ring-w, 3px) solid var(--actst-ring, #1877f2);
	border-radius: 50%;
	background: #fff;
	overflow: hidden;
	box-shadow: 0 1px 3px rgba(0, 0, 0, .25);
}
.actst .actst__logo img {
	display: block;
	width: 100%;
	height: 100%;
	max-width: none;
	margin: 0;
	border: 0;
	border-radius: 50%;
	object-fit: cover;
	background: #fff;
}
.actst--logo-right .actst__logo { left: auto; right: 10px; }

.actst__title {
	position: absolute;
	left: 10px;
	right: 10px;
	bottom: 10px;
	display: -webkit-box;
	-webkit-box-orient: vertical;
	-webkit-line-clamp: var(--actst-lines, 3);
	line-clamp: var(--actst-lines, 3);
	overflow: hidden;
	font-size: var(--actst-title, 15px);
	font-weight: var(--actst-weight, 700);
	line-height: 1.2;
	color: var(--actst-color, #fff);
	text-shadow: var(--actst-shadow, 0 1px 3px rgba(0, 0, 0, .65));
	overflow-wrap: anywhere;
	text-align: left;
	text-transform: none;
	letter-spacing: 0;
}

.actst__score {
	position: absolute;
	left: 10px;
	top: calc(var(--actst-logo, 38px) + 16px);
	padding: 2px 6px;
	border-radius: 6px;
	background: rgba(0, 0, 0, .6);
	font: 600 11px/1.3 ui-monospace, monospace;
	color: #fff;
}

/* Icône « masquer » : apparaît au survol de la carte. */
.actst .actst__close {
	position: absolute;
	top: 8px;
	right: 8px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 28px;
	height: 28px;
	min-width: 0;
	min-height: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(20, 22, 26, .62);
	color: #fff;
	cursor: pointer;
	opacity: 0;
	transform: scale(.85);
	transition: opacity .15s ease, transform .15s ease, background-color .15s ease;
	-webkit-backdrop-filter: blur(6px);
	backdrop-filter: blur(6px);
	box-shadow: none;
}
.actst--logo-right .actst__close { right: auto; left: 8px; }
.actst .actst__item:hover .actst__close,
.actst .actst__close:focus-visible,
.actst--close-always .actst__close { opacity: 1; transform: none; }
.actst .actst__close:hover { background: rgba(20, 22, 26, .9); }
.actst .actst__close:focus-visible { outline: 2px solid #fff; outline-offset: 1px; }
.actst .actst__close svg { display: block; }
@media (hover: none) {
	.actst .actst__close { opacity: .92; transform: none; }
}

/* Bouton circulaire blanc semi-opaque, chevron gris. */
.actst .actst__nav {
	position: absolute;
	top: 50%;
	z-index: 3;
	display: flex;
	align-items: center;
	justify-content: center;
	width: var(--actst-arrow, 40px);
	height: var(--actst-arrow, 40px);
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: rgba(255, 255, 255, .86);
	color: #65676b;
	cursor: pointer;
	transform: translateY(-50%);
	box-shadow: 0 2px 8px rgba(0, 0, 0, .22);
	-webkit-backdrop-filter: blur(4px);
	backdrop-filter: blur(4px);
	transition: background-color .15s ease, opacity .15s ease;
}
.actst .actst__nav:hover { background: #fff; color: #3a3b3c; }
.actst .actst__nav:focus-visible { outline: 3px solid var(--actst-ring, #1877f2); outline-offset: 2px; }
.actst .actst__nav[hidden] { display: none; }
.actst .actst__nav svg { display: block; width: 55%; height: 55%; }
.actst .actst__nav--next { right: 8px; }
.actst .actst__nav--prev { left: 8px; }
.actst .actst__nav--prev svg { transform: scaleX(-1); }

/* Masquage / remplacement */
.actst .actst__item.is-leaving .actst__card { opacity: 0; transform: scale(.9); }
.actst .actst__item.is-leaving .actst__close { opacity: 0; }
.actst .actst__item.is-collapsed {
	flex-basis: 0;
	width: 0;
	margin-right: calc(var(--actst-gap, 6px) * -1);
	opacity: 0;
}
.actst .actst__item.is-entering .actst__card { animation: actst-in .3s ease both; }
@keyframes actst-in {
	from { opacity: 0; transform: scale(.9); }
	to { opacity: 1; transform: none; }
}

@media (max-width: 600px) {
	.actst .actst__item { flex-basis: var(--actst-w-m, 112px); width: var(--actst-w-m, 112px); }
	.actst__title { font-size: calc(var(--actst-title, 15px) * .88); left: 8px; right: 8px; bottom: 8px; }
	.actst__logo { top: 8px; left: 8px; width: calc(var(--actst-logo, 38px) * .86); height: calc(var(--actst-logo, 38px) * .86); }
	.actst .actst__close { width: 24px; height: 24px; top: 6px; right: 6px; }
}

@media (prefers-reduced-motion: reduce) {
	.actst .actst__track { scroll-behavior: auto; }
	.actst *,
	.actst *::before { transition: none !important; animation: none !important; }
}