/* Tepee for HelloAsso — frontend
   Toutes les couleurs « marque » dérivent des variables posées par PHP :
   --tfha-accent, --tfha-radius, --tfha-font-size,
   --tfha-title-color, --tfha-text-color
*/

/* Boutons : police du site (navigateurs et thèmes leur imposent souvent la leur). */
.tfha-app .tfha-toolbar button,
.tfha-app .tfha-view button {
	font-family: inherit;
	letter-spacing: inherit;
}

.tfha-app {
	--tfha-accent: #2563eb;
	--tfha-radius: 12px;
	--tfha-font-size: 16px;
	--tfha-title-color: #0f172a;
	--tfha-text-color: #475569;
	--tfha-border: #e5e7eb;
	--tfha-surface: #ffffff;
	--tfha-muted: #f8fafc;
	--tfha-card-bg: #ffffff;
	--tfha-card-border: #e5e7eb;
	--tfha-card-bw: 1px;
	--tfha-card-shadow: 0 1px 2px rgba(15, 23, 42, .05);
	--tfha-card-shadow-hover: 0 10px 24px rgba(15, 23, 42, .10);
	--tfha-card-hover-y: -3px;
	--tfha-btn-text: #ffffff;
	--tfha-btn-radius: 8px;
	font-size: var(--tfha-font-size);
	color: var(--tfha-text-color);
	line-height: 1.5;
	box-sizing: border-box;
}
.tfha-app *,
.tfha-app *::before,
.tfha-app *::after { box-sizing: border-box; }

.tfha-app img { max-width: 100%; height: auto; display: block; }

/* ---------- Toolbar ---------- */
.tfha-toolbar {
	display: flex;
	flex-wrap: wrap;
	gap: 12px;
	align-items: center;
	justify-content: space-between;
	margin-bottom: 20px;
}
.tfha-search { flex: 1 1 220px; min-width: 200px; }
.tfha-search__input {
	width: 100%;
	padding: 9px 14px;
	border: 1px solid var(--tfha-border);
	border-radius: var(--tfha-btn-radius);
	font-size: 0.95em;
	background: var(--tfha-surface);
}
.tfha-search__input:focus {
	outline: none;
	border-color: var(--tfha-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--tfha-accent) 20%, transparent);
}

.tfha-filters, .tfha-switch { display: flex; flex-wrap: wrap; gap: 8px; }

.tfha-filter {
	--tfha-tag-bg: #f1f5f9;
	--tfha-tag-text: #334155;
	border: 1px solid transparent;
	background: var(--tfha-tag-bg);
	color: var(--tfha-tag-text);
	padding: 6px 14px;
	border-radius: var(--tfha-btn-radius);
	font-size: 0.85em;
	cursor: pointer;
	transition: transform .12s ease, box-shadow .12s ease;
}
.tfha-filter:hover { transform: translateY(-1px); }
.tfha-filter.is-active {
	box-shadow: 0 0 0 2px var(--tfha-card-bg, #fff), 0 0 0 4px var(--tfha-accent);
	font-weight: 700;
	transform: translateY(-1px) scale(1.04);
}
.tfha-filter.is-active::before {
	content: "✓";
	font-weight: 700;
	margin-right: 5px;
}
/* Quand un tag est sélectionné, on estompe les autres pour faire ressortir l'actif. */
.tfha-filters--filtering .tfha-filter:not(.is-active) { opacity: .55; }
.tfha-filters--filtering .tfha-filter:not(.is-active):hover { opacity: .85; }

/* Menu déroulant de filtre par type. */
.tfha-filter-select {
	border: 1px solid var(--tfha-border);
	background: var(--tfha-surface);
	color: var(--tfha-text-color);
	padding: 7px 34px 7px 14px;
	border-radius: var(--tfha-btn-radius);
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	max-width: 100%;
	appearance: none;
	-webkit-appearance: none;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='%23667085' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
}
.tfha-filter-select:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: 1px; }

.tfha-switch__btn {
	border: 1px solid var(--tfha-border);
	background: var(--tfha-surface);
	color: var(--tfha-text-color);
	padding: 7px 14px;
	border-radius: var(--tfha-btn-radius);
	font-size: 0.85em;
	cursor: pointer;
}
.tfha-switch__btn.is-active {
	background: var(--tfha-accent);
	border-color: var(--tfha-accent);
	color: #fff;
}

/* Sélecteur temporel (à venir / passés / tous) — contrôle segmenté. */
.tfha-timefilter {
	display: inline-flex;
	border: 1px solid var(--tfha-border);
	border-radius: var(--tfha-btn-radius);
	overflow: hidden;
	background: var(--tfha-surface);
}
.tfha-timefilter__btn {
	border: none;
	background: transparent;
	color: var(--tfha-text-color);
	padding: 7px 16px;
	font-size: 0.85em;
	font-weight: 600;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.tfha-timefilter__btn + .tfha-timefilter__btn { border-left: 1px solid var(--tfha-border); }
.tfha-timefilter__btn:hover { background: color-mix(in srgb, var(--tfha-accent) 10%, transparent); }
.tfha-timefilter__btn.is-active {
	background: var(--tfha-accent);
	color: #fff;
}

/* ---------- Boutons / CTA ---------- */
.tfha-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	line-height: 1;
	gap: 6px;
	background: var(--tfha-accent);
	color: var(--tfha-btn-text);
	text-decoration: none;
	padding: 9px 16px 8px;
	border-radius: var(--tfha-btn-radius);
	font-size: 0.9em;
	font-weight: 600;
	transition: filter .12s ease;
}
.tfha-btn:hover { filter: brightness(0.93); color: var(--tfha-btn-text); }
.tfha-btn[aria-disabled="true"] { opacity: .5; pointer-events: none; }

/* ---------- Tags ---------- */
.tfha-tags { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0; }
.tfha-tag-badge {
	display: inline-flex;
	align-items: center;
	line-height: 1;
	font-size: 0.66em;
	font-weight: normal;
	padding: 5px 9px 4px;
	border-radius: min(var(--tfha-radius, 12px), 12px);
	background: #eef2ff;
	color: #3730a3;
	letter-spacing: .02em;
}
.tfha-list__tags .tfha-tag-badge,
.tfha-card__tags--overlay .tfha-tag-badge {
	display: block; max-width: 100%; box-sizing: border-box;
	white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* Liste large : la colonne de droite ne s'étire pas pour un tag très long. */
.tfha-list__tags { max-width: 15em; min-width: 0; }
.tfha-tag-badge.is-clickable {
	border: none;
	cursor: pointer;
	transition: transform .12s ease, filter .12s ease;
}
.tfha-tag-badge.is-clickable:hover { filter: brightness(.95); transform: translateY(-1px); }

/* Image cliquable (liste/cartes). */
.tfha-media-link { display: block; width: 100%; height: 100%; }
.tfha-media-link img { display: block; }

/* ---------- État vide ---------- */
/* Une carte (fond, bordure, arrondi et ombre des cartes) avec une icône dans
   une pastille teintée de la couleur d'accent, un message et des actions. */
.tfha-empty {
	position: relative;
	overflow: hidden;
	display: flex; flex-direction: column; align-items: center; text-align: center;
	gap: 6px;
	padding: 36px 20px 32px;
	background: var(--tfha-card-bg);
	border: var(--tfha-card-bw) solid var(--tfha-card-border);
	border-radius: var(--tfha-radius);
	box-shadow: var(--tfha-card-shadow);
	color: var(--tfha-text-color);
}
/* Liseré d'accent en haut de la carte. */
.tfha-empty::before {
	content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px;
	background: var(--tfha-accent); /* navigateurs sans color-mix() */
	background: linear-gradient(90deg, var(--tfha-accent), color-mix(in srgb, var(--tfha-accent) 35%, transparent));
}
.tfha-empty__icon {
	display: inline-flex; align-items: center; justify-content: center;
	margin-bottom: 4px;
	color: var(--tfha-accent);
	line-height: 0;
}
.tfha-empty__icon svg { width: 60px; height: 60px; display: block; }
.tfha-empty__title {
	margin: 0; max-width: 34em;
	font-size: 1.1em; font-weight: 700; line-height: 1.35;
	color: var(--tfha-title-color);
}
.tfha-empty__hint { margin: 0; max-width: 34em; font-size: .92em; line-height: 1.5; }
.tfha-empty__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-top: 10px; }
.tfha-app .tfha-empty__btn {
	display: inline-flex; align-items: center;
	padding: 8px 16px; margin: 0;
	border: 1px solid var(--tfha-accent);
	border-radius: var(--tfha-btn-radius);
	background: transparent; color: var(--tfha-accent);
	font: inherit; font-size: .9em; font-weight: 600; line-height: 1.25;
	text-decoration: none; text-transform: none; letter-spacing: normal; box-shadow: none;
	cursor: pointer;
	transition: background .12s ease, color .12s ease;
}
.tfha-app .tfha-empty__btn { background: var(--tfha-accent); color: var(--tfha-btn-text); }
.tfha-app .tfha-empty__btn:hover { filter: brightness(.93); }
.tfha-app .tfha-empty__btn:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: 2px; }
/* Mini-agenda (barre latérale) : version resserrée. */
.tfha-view--compact .tfha-empty { padding: 22px 14px 18px; gap: 4px; }
.tfha-view--compact .tfha-empty__icon svg { width: 40px; height: 40px; }
.tfha-view--compact .tfha-empty__title { font-size: 1em; }
.tfha-view--compact .tfha-empty__hint { display: none; }

/* ---------- Vue CARTES ---------- */
.tfha-cards {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(260px, 1fr));
	gap: 22px;
}
/* Nombre de colonnes imposé via l'attribut columns (vues cartes et liste). */
.tfha-app[data-cols="1"] .tfha-cards,
.tfha-app[data-cols="1"] .tfha-list { grid-template-columns: 1fr; }
.tfha-app[data-cols="2"] .tfha-cards,
.tfha-app[data-cols="2"] .tfha-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tfha-app[data-cols="3"] .tfha-cards,
.tfha-app[data-cols="3"] .tfha-list { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tfha-app[data-cols="4"] .tfha-cards,
.tfha-app[data-cols="4"] .tfha-list { grid-template-columns: repeat(4, minmax(0, 1fr)); }
/* La liste devient une grille seulement si un nombre de colonnes est imposé. */
.tfha-app[data-cols] .tfha-list { display: grid; }
.tfha-card {
	display: flex;
	flex-direction: column;
	background: var(--tfha-card-bg);
	border: var(--tfha-card-bw) solid var(--tfha-card-border);
	border-radius: var(--tfha-radius);
	box-shadow: var(--tfha-card-shadow);
	overflow: hidden;
	transition: transform .15s ease, box-shadow .15s ease;
	/* Calque préparé dès le repos : le survol ne redessine pas le texte et
	   l'image (sinon décalage d'un pixel). « auto » quand la carte ne bouge pas. */
	will-change: var(--tfha-card-will, transform);
}
.tfha-card.is-clickable { cursor: pointer; }
/* Menu « Ajouter à / Partager » ouvert : la carte ne bouge plus (un
   agrandissement en cours ferait trembler le menu et ses icônes). */
.tfha-card.tfha-has-menu, .tfha-card.tfha-has-menu:hover { transform: none; will-change: auto; }
.tfha-card:hover {
	/* « none » (et non un déplacement nul) quand aucun mouvement n'est choisi. */
	transform: var(--tfha-card-hover-transform, translateY(var(--tfha-card-hover-y)));
	box-shadow: var(--tfha-card-shadow-hover);
}
.tfha-card__media { aspect-ratio: 16 / 9; background: var(--tfha-muted); position: relative; }
.tfha-card__media img { width: 100%; height: 100%; object-fit: cover; }
/* Affiche d'un évènement sans image : couleur de l'étiquette (sinon d'accent),
   date en grand à gauche, icône de l'activité en filigrane à droite. */
.tfha-card__media--poster,
.tfha-list__media--poster { container-type: inline-size; overflow: hidden; }
.tfha-poster {
	--tfha-poster-bg: var(--tfha-accent); --tfha-poster-fg: #fff;
	position: absolute; inset: 0; display: flex; align-items: center; padding: 0 9%;
	background: var(--tfha-poster-bg); /* Navigateurs sans color-mix(). */
	background:
		radial-gradient(120% 90% at 100% 100%, color-mix(in srgb, var(--tfha-poster-fg) 14%, transparent), transparent 60%),
		linear-gradient(135deg, var(--tfha-poster-bg), color-mix(in srgb, var(--tfha-poster-bg) 78%, var(--tfha-poster-fg)));
	color: var(--tfha-poster-fg);
}
.tfha-poster__date { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: flex-start; line-height: .9; }
.tfha-poster__day { font-size: clamp(28px, 24cqw, 96px); font-weight: 800; letter-spacing: -.03em; }
.tfha-poster__month { margin-top: .15em; font-size: clamp(10px, 7.5cqw, 30px); font-weight: 700; letter-spacing: .12em; text-transform: uppercase; opacity: .85; }
.tfha-poster__icon { position: absolute; right: -4%; bottom: -10%; width: 58cqw; height: 58cqw; max-width: 75%; opacity: .2; transform: rotate(-12deg); }
.tfha-poster__icon svg { width: 100%; height: 100%; display: block; }
.tfha-card__body { padding: 16px; display: flex; flex-direction: column; gap: 3px; flex: 1; }
.tfha-card__title { margin: 0; font-size: 1.05em; color: var(--tfha-title-color); line-height: 1.3; font-weight: 600; font-family: inherit; }
.tfha-card__meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; }
.tfha-card__meta .tfha-card__date + .tfha-card__loc::before { content: "·"; margin-right: 10px; opacity: .5; }
.tfha-card__date { margin: 0; font-size: 0.85em; font-weight: 600; color: var(--tfha-accent); line-height: 1.3; }
.tfha-card__loc, .tfha-card__desc { margin: 0; font-size: 0.85em; }
.tfha-card__loc { line-height: 1.3; }
.tfha-card__desc { color: var(--tfha-text-color); line-height: 1.4; margin-top: 9px; white-space: pre-line; }

/* Tag : superposition en bas à droite de l'image (cartes). */
.tfha-card__tags { margin: 0; }
.tfha-card__tags--overlay {
	position: absolute;
	right: 8px;
	bottom: 8px;
	justify-content: flex-end;
	max-width: calc(100% - 16px);
}
.tfha-card__tags--overlay .tfha-tag-badge { box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
.tfha-card__tags--inline { justify-content: flex-end; }

.tfha-card__footer {
	margin-top: auto;
	padding-top: 6px;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 10px;
}
.tfha-card__price { font-weight: 700; color: var(--tfha-title-color); font-size: 1.1em; }
/* Prix : mots plus petits que les montants ; passe sur deux lignes courtes
   plutôt que de repousser les boutons à la ligne.
   Le montant reste sur la ligne de « S'inscrire » (dernière ligne de base) ;
   un « Jusqu'à » replié s'ajoute au-dessus. Le texte intérieur est à la
   taille des petits mots (ligne repliée basse), les montants reprennent la
   taille du prix. */
/* Le prix « mord » sur la marge au-dessus du pied (--tfha-price-pull) : la
   ligne repliée n'agrandit l'événement que si elle dépasse cette marge. */
.tfha-price { display: block; line-height: 1.1; margin-top: calc(-1 * var(--tfha-price-pull, 0px)); }
.tfha-card__footer { --tfha-price-pull: 3px; }
.tfha-price__in { display: block; font-size: 0.72em; line-height: 1.1; }
.tfha-price__amt { font-size: calc(1em / 0.72); }
.tfha-price__word { font-weight: 500; opacity: .85; }
.tfha-price__amt, .tfha-price__unit { white-space: nowrap; }
.tfha-card__footer > .tfha-card__price { flex: 1 1 0; min-width: min-content; }
/* Le montant reste sur la ligne de « S'inscrire » (alignement sur la dernière
   ligne de base) : un « Jusqu'à » replié ne fait que s'ajouter au-dessus. */
.tfha-card__footer, .tfha-list__footer { align-items: last baseline; }

/* ---------- Vue LISTE ----------
   Grille nommée dans .tfha-list__row (le corps est « transparent ») :
   - large : image collée à gauche sur toute la hauteur | titre, date · lieu,
     description | tags en haut à droite, puis prix et boutons en colonne ;
   - étroit (requête sur la largeur de l'élément, donc aussi en colonnes) :
     voir plus bas. */
.tfha-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.tfha-list__item {
	container: tfha-item / inline-size;
	background: var(--tfha-card-bg);
	border: var(--tfha-card-bw) solid var(--tfha-card-border);
	border-radius: var(--tfha-radius);
	overflow: hidden;
	box-shadow: var(--tfha-card-shadow);
	transition: box-shadow .15s ease;
}
.tfha-list__item.is-clickable { cursor: pointer; }
.tfha-list__item:hover { box-shadow: var(--tfha-card-shadow-hover); }
.tfha-list__row {
	display: grid;
	grid-template-columns: minmax(0, 1fr) auto;
	grid-template-rows: auto auto 1fr;
	grid-template-areas: "title tags" "meta foot" "desc foot";
	column-gap: 16px;
	padding: 12px 16px;
}
.tfha-list__row.has-media {
	grid-template-columns: clamp(120px, 22%, 190px) minmax(0, 1fr) auto;
	grid-template-areas: "media title tags" "media meta foot" "media desc foot";
	padding-left: 0;
}
.tfha-list__body { display: contents; }
/* Image : toute la hauteur, sans marge (les marges négatives annulent le padding). */
.tfha-list__media { grid-area: media; margin: -12px 0; min-height: 84px; overflow: hidden; background: var(--tfha-muted); position: relative; }
.tfha-list__media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
.tfha-list__tags { grid-area: tags; justify-content: flex-end; justify-self: end; align-self: start; margin: 0 0 4px; }
.tfha-list__title { grid-area: title; margin: 0; font-size: 1.1em; line-height: 1.25; color: var(--tfha-title-color); font-weight: 600; font-family: inherit; }
/* Séparateur « · » devant chaque élément ; le conteneur, décalé de sa largeur
   et rogné, masque celui qui tombe en début de ligne (aussi après un retour). */
.tfha-list__meta { grid-area: meta; display: flex; flex-wrap: wrap; align-items: baseline; margin: 3px 0 0 -18px; clip-path: inset(0 0 0 18px); line-height: 1.3; }
.tfha-list__meta > *::before { content: "·"; display: inline-block; width: 18px; text-align: center; opacity: .5; font-weight: normal; }
/* Un élément qui passe sur plusieurs lignes (dates d'un évènement à plusieurs
   dates) : seul son séparateur déborde à gauche, ses lignes suivantes restent
   visibles au lieu d'être rognées. */
.tfha-list__meta > * { padding-left: 18px; text-indent: -18px; }
.tfha-list__meta > *::before { text-indent: 0; }
.tfha-list__date { margin: 0; font-size: 0.9em; font-weight: 600; color: var(--tfha-accent); }
.tfha-list__loc { margin: 0; font-size: 0.85em; opacity: .85; }
.tfha-list__desc { grid-area: desc; margin: 6px 0 0; font-size: 0.88em; line-height: 1.4; white-space: pre-line; }
.tfha-list__footer {
	grid-area: foot; align-self: end;
	/* Prix aligné à gauche des boutons ; un badge éventuel (places) au-dessus,
	   sur toute la largeur. Grille : la colonne ne s'élargit pas pour le badge. */
	display: grid; grid-template-columns: auto auto; justify-content: end; align-items: center; gap: 6px 12px;
	margin: 0; padding: 0;
}
/* Menu agenda / partage : ancré aux boutons (le pied peut être étroit ou dissous). */
.tfha-list__item .tfha-actions { position: relative; }
.tfha-list__item .tfha-addcal__menu { max-width: none; }
.tfha-list__footer > :not(.tfha-list__price):not(.tfha-actions) { grid-column: 1 / -1; justify-self: end; }
.tfha-list__footer > .tfha-list__price { grid-column: 1; }
.tfha-list__footer > .tfha-actions { grid-column: 2; }
.tfha-list__price { font-weight: 700; color: var(--tfha-title-color); font-size: 1.05em; line-height: 1.2; text-align: right; }

/* Largeur moyenne avec image (contenu de thème étroit, ~600 à 820 px) : le
   prix et les boutons passent sous le texte, pour laisser toute la largeur
   aux dates, au lieu d'occuper une colonne à droite qui comprimerait le texte. */
@container tfha-item (min-width: 601px) and (max-width: 820px) {
	.tfha-list__row.has-media {
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas: "media title tags" "media meta meta" "media desc desc" "media foot foot";
	}
	.has-media .tfha-list__footer { margin-top: 10px; }
}

/* Étroit (téléphone, liste en colonnes, barre latérale) : vignette à gauche
   sur toute la hauteur, avec tags (haut) et prix (bas) en surimpression ;
   date et lieu sur deux lignes ; boutons en bas à droite. */
@container tfha-item (max-width: 600px) {
	.tfha-list__row { grid-template-areas: "title tags" "meta meta" "desc desc" "foot foot"; grid-template-rows: auto; padding: 10px 12px; }
	.tfha-list__row.has-media {
		grid-template-columns: 96px minmax(0, 1fr);
		grid-template-rows: auto auto auto 1fr;
		grid-template-areas: "media title" "media meta" "media desc" "media foot";
		column-gap: 12px; padding: 10px 12px 10px 0;
	}
	.tfha-list__media { margin: -10px 0; min-height: 96px; }
	/* Affiche étroite : date en haut, l'étiquette superposée reste en bas. */
	.tfha-list__media--poster .tfha-poster { align-items: flex-start; padding-top: 14px; }
	.tfha-list__title { font-size: 1em; line-height: 1.25; }
	.tfha-list__meta { margin-top: 2px; line-height: 1.25; }
	/* À côté d'une vignette : date et lieu sur deux lignes, sans séparateur. */
	.has-media .tfha-list__meta { flex-direction: column; align-items: flex-start; margin-left: 0; clip-path: none; }
	.has-media .tfha-list__meta > *::before { content: none; }
	.has-media .tfha-list__meta > * { padding-left: 0; text-indent: 0; }
	.tfha-list__desc {
		margin-top: 4px; font-size: 0.85em; line-height: 1.35; white-space: normal;
		display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
	}
	/* Pied : badge de places à droite sur sa ligne, puis prix à gauche des
	   boutons (le prix passe au-dessus s'il manque de place). */
	.tfha-list__footer {
		display: flex; flex-direction: row; flex-wrap: wrap; align-items: last baseline; justify-content: flex-end;
		gap: 6px 10px; margin-top: 8px; align-self: end; --tfha-price-pull: 4px;
	}
	.tfha-list__footer > :not(.tfha-list__price):not(.tfha-actions) { flex: 0 0 100%; text-align: right; }
	.tfha-list__footer .tfha-list__price { flex: 1 1 0; min-width: min-content; text-align: left; }
	.tfha-list__footer .tfha-actions { margin-left: 0; }
	/* Tags sur la vignette, en bas, alignés sur le bas des boutons (comme sur
	   les cartes) ; une ligne chacun, coupés par « … ». */
	.has-media .tfha-list__tags {
		grid-area: media; align-self: end; justify-self: stretch; max-width: none; flex-direction: column; align-items: flex-start; flex-wrap: nowrap;
		gap: 4px; margin: 0 6px; min-width: 0; z-index: 1; position: relative;
	}
	.has-media .tfha-list__tags .tfha-tag-badge { box-shadow: 0 1px 4px rgba(0, 0, 0, .35); }
}

/* Titres cliquables (cartes, liste) : apparence du titre, soulignés au survol. */
.tfha-app .tfha-titlelink { color: inherit; text-decoration: none; font: inherit; }
.tfha-app .tfha-titlelink:hover { text-decoration: underline; }
.tfha-titlelink:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: 2px; }

/* ---------- Repli (no-JS / SEO) ---------- */
.tfha-app .tfha-fallback { list-style: none; margin: 0; padding: 0; }
.tfha-fallback__item { padding: 6px 0; border-bottom: 1px solid var(--tfha-border); }
.tfha-noscript-note { font-style: italic; }

/* ---------- Focus accessibilité ---------- */
.tfha-app a:focus-visible,
.tfha-app button:focus-visible,
.tfha-app [tabindex]:focus-visible {
	outline: 2px solid var(--tfha-accent);
	outline-offset: 2px;
}

/* ---------- Responsive ---------- */
@media (max-width: 980px) {
	/* Sur tablette, 3 ou 4 colonnes retombent à 2 pour rester lisibles. */
	.tfha-app[data-cols="3"] .tfha-cards,
	.tfha-app[data-cols="4"] .tfha-cards,
	.tfha-app[data-cols="3"] .tfha-list,
	.tfha-app[data-cols="4"] .tfha-list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
@media (max-width: 640px) {
	.tfha-toolbar { flex-direction: column; align-items: stretch; }
	/* En colonne, flex-basis deviendrait une hauteur : on neutralise. */
	.tfha-search { flex: 0 0 auto; min-width: 0; width: 100%; }
	.tfha-timefilter, .tfha-switch, .tfha-filters { flex: 0 0 auto; }
	/* Téléphone : toujours une seule colonne, quel que soit columns. */
	.tfha-app[data-cols] .tfha-cards,
	.tfha-app[data-cols] .tfha-list { grid-template-columns: 1fr; }
}

/* ---------- Mouvement réduit ---------- */
@media (prefers-reduced-motion: reduce) {
	.tfha-app * { transition: none !important; animation: none !important; }
}

/* ---------- Ajouter à mon agenda ---------- */
.tfha-actions { display: flex; align-items: stretch; gap: 6px; margin-left: auto; }
/* Le bouton agenda prend la hauteur du bouton « S'inscrire » (quelle que soit
   la police du site) et reste carré. */
.tfha-actions .tfha-addcal { display: flex; }
/* Le menu se positionne par rapport au pied (carte ou liste), pas au bouton :
   il reste ainsi toujours à l'intérieur de la carte, même sur mobile. */
.tfha-card__footer, .tfha-list__footer { position: relative; }
.tfha-addcal { position: static; }
.tfha-addcal__btn {
	display: inline-flex; align-items: center; justify-content: center;
	box-sizing: border-box;
	width: 34px; height: 34px; padding: 0; margin: 0;
	border: 1px solid var(--tfha-accent);
	background: transparent;
	color: var(--tfha-accent);
	border-radius: var(--tfha-btn-radius);
	cursor: pointer;
}
/* Hauteur : celle de « S'inscrire » (étirement). Largeur : même formule que
   cette hauteur (texte 0.9em sur une ligne + 17 px de marges), donc carré. */
.tfha-actions .tfha-addcal__btn {
	font-size: 0.9em;
	height: auto; align-self: stretch;
	width: calc(1em + 17px); min-width: calc(1em + 17px);
}
/* Survol / menu ouvert : teinte légère de la couleur d'accent (comme le sélecteur temporel). */
.tfha-addcal__btn:hover,
.tfha-addcal__btn[aria-expanded="true"] { background: color-mix(in srgb, var(--tfha-accent) 12%, transparent); }
.tfha-addcal__btn:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: 2px; }
.tfha-addcal__item:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: -2px; }
.tfha-addcal__menu {
	position: absolute; right: 0; left: auto; bottom: calc(100% + 6px); z-index: 20;
	display: flex; flex-direction: column;
	width: max-content; min-width: min(230px, 100%); max-width: 100%;
	box-sizing: border-box; padding: 4px;
	background: var(--tfha-card-bg);
	border: var(--tfha-card-bw) solid var(--tfha-card-border);
	border-radius: min(var(--tfha-radius, 8px), 8px);
	box-shadow: 0 10px 28px rgba(15, 23, 42, .16);
}
.tfha-addcal__menu[hidden] { display: none; }
/* Menu ouvert : son élément passe au-dessus de ses voisins (le menu peut déborder). */
.tfha-has-menu { position: relative; z-index: 30; }
/* Le menu peut être plus haut que l'élément : on lève le rognage de l'élément
   et l'image garde ses coins arrondis d'elle-même. */
.tfha-card.tfha-has-menu, .tfha-list__item.tfha-has-menu { overflow: visible; }
.tfha-card.tfha-has-menu .tfha-card__media {
	overflow: hidden;
	border-radius: max(0px, calc(var(--tfha-radius) - var(--tfha-card-bw))) max(0px, calc(var(--tfha-radius) - var(--tfha-card-bw))) 0 0;
}
.tfha-list__item.tfha-has-menu .tfha-list__media {
	border-radius: max(0px, calc(var(--tfha-radius) - var(--tfha-card-bw))) 0 0 max(0px, calc(var(--tfha-radius) - var(--tfha-card-bw)));
}
.tfha-addcal__title {
	padding: 5px 12px 1px;
	font-size: 0.75em; font-weight: 600; text-transform: uppercase; letter-spacing: .04em;
	color: var(--tfha-text-color); opacity: .8;
}
.tfha-addcal__item {
	padding: 6px 12px; white-space: normal; overflow-wrap: anywhere; font-size: 0.85em; line-height: 1.3;
	color: var(--tfha-title-color); text-decoration: none;
	border-radius: min(var(--tfha-radius, 6px), 6px);
}
/* Survol : couleur d'accent, comme les boutons actifs du sélecteur de vue. */
.tfha-addcal__item { transition: background .12s ease, color .12s ease; }
.tfha-addcal__item:hover { background: var(--tfha-accent); color: #fff; }
/* Éléments boutons du menu (partage du téléphone, copier le lien) : même aspect que les liens. */
.tfha-app button.tfha-addcal__item,
button.tfha-addcal__item {
	display: block; width: 100%; margin: 0; border: 0; background: none; text-align: left;
	font: inherit; font-size: 0.85em; line-height: 1.3; padding: 6px 12px; cursor: pointer;
	color: var(--tfha-title-color); text-transform: none; letter-spacing: normal; box-shadow: none;
	border-radius: min(var(--tfha-radius, 6px), 6px);
}
.tfha-app button.tfha-addcal__item:hover,
button.tfha-addcal__item:hover { background: var(--tfha-accent); color: #fff; }
.tfha-addcal__sep { display: block; height: 1px; margin: 3px 8px; background: var(--tfha-border); }

/* ---------- Vue compacte (« Prochains événements ») ---------- */
.tfha-compact { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.tfha-compact__item { display: flex; align-items: flex-start; gap: 12px; }
.tfha-compact__date {
	flex: 0 0 48px;
	display: flex; flex-direction: column; align-items: center; justify-content: center;
	padding: 6px 0 5px;
	background: var(--tfha-accent);
	color: var(--tfha-btn-text);
	border-radius: min(var(--tfha-radius, 8px), 8px);
	line-height: 1;
}
.tfha-compact__day { font-size: 1.25em; font-weight: 700; }
.tfha-compact__month { margin-top: 3px; font-size: 0.7em; text-transform: uppercase; letter-spacing: .03em; }
.tfha-compact__body { min-width: 0; }
.tfha-compact__title { margin: 0; font-size: 0.95em; font-weight: 600; line-height: 1.3; font-family: inherit; }
.tfha-compact__link { color: var(--tfha-title-color); text-decoration: none; }
.tfha-compact__link:hover { text-decoration: underline; }
.tfha-compact__link:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: 2px; }
.tfha-compact__meta { margin: 3px 0 0; font-size: 0.8em; color: var(--tfha-text-color); line-height: 1.35; }

/* ---------- Bouton « Voir plus » ----------
   Bouton contour centré (texte couleur d'accent, arrondi des boutons), avec le
   nombre d'événements ajoutés, entre deux chevrons. Il sert de
   jauge : son fond se remplit selon la part des événements déjà affichés ; au
   survol il se remplit entièrement comme « S'inscrire ». Contour : couleur de bordure des blocs
   (action secondaire, discrète). */
.tfha-more { display: flex; justify-content: center; margin-top: 20px; }
/* « Voir les N événements suivants » : bouton principal de l'agenda (couleur
   d'accent), avec une fine jauge sur son bord inférieur, de toute sa largeur,
   qui montre la part des événements déjà affichés. Le thème stylise souvent
   les <button> : on remet tout à plat. */
.tfha-app .tfha-more .tfha-more__btn {
	gap: 8px; margin: 0; padding: 10px 16px 11px;
	font-family: inherit; line-height: 1.2;
	text-transform: none; letter-spacing: normal;
	border: none; box-shadow: none; cursor: pointer;
	position: relative; overflow: hidden;
}
.tfha-more__btn::before,
.tfha-more__btn::after {
	content: ""; position: absolute; left: 0; bottom: 0; height: 4px; pointer-events: none;
}
/* Rail clair (reste à afficher) et remplissage foncé (déjà affiché), tirés de
   la couleur d'accent : la jauge reste nette quel que soit le fond de page. */
.tfha-more__btn::before { right: 0; background: color-mix(in srgb, var(--tfha-btn-text, #fff) 45%, var(--tfha-accent)); }
.tfha-more__btn::after { width: var(--tfha-more-progress, 0%); background: color-mix(in srgb, var(--tfha-accent) 50%, #000); transition: width .5s ease; }
.tfha-more__icon { width: 18px; height: 18px; flex: none; }
.tfha-app .tfha-more .tfha-more__btn:focus-visible { outline: 2px solid var(--tfha-accent); outline-offset: 3px; }

/* Pied des cartes et de la liste : retour à la ligne (prix ou bouton longs, badge éventuel). */
.tfha-card__footer { flex-wrap: wrap; row-gap: 6px; }

/* Textes de boutons longs : retour à la ligne centré et aéré, sans jamais
   déborder du bloc (textes limités à 30 caractères dans les réglages). */
.tfha-app .tfha-btn {
	text-align: center; line-height: 1.25; overflow-wrap: anywhere; min-width: 0;
	/* Interligne 1.25 compensé : un bouton d'une ligne garde sa hauteur. */
	padding-top: calc(9px - 0.125em); padding-bottom: calc(8px - 0.125em);
}
.tfha-actions { min-width: 0; max-width: 100%; }

/* Événement terminé : « S'inscrire » devient « Terminé » (reste un lien). */
.tfha-btn.tfha-btn--ended,
.tfha-btn.tfha-btn--ended:hover {
	background: var(--tfha-ended-bg, #6b7280);
	color: var(--tfha-ended-text, #fff);
}

/* Visiteurs ayant demandé moins d'animations : la carte ne bouge pas au survol. */
@media (prefers-reduced-motion: reduce) {
	.tfha-card { transition: none; }
	.tfha-card:hover { transform: none; }
}
.tfha-view--compact .tfha-empty__actions { margin-top: 4px; }