/* Zone d'activités — fin de contenu, full-bleed, plein écran, sidebar sticky desktop. */

:root {
	--tdm-activities-margin-block: 20px;
	--tdm-activities-bg: white;
	--tdm-activities-fullscreen-z-index: 1001;
	--tdm-activities-close-size: 32px;
	--tdm-activities-close-offset: 8px;
	--tdm-activities-sidebar-fade-distance: 320px;
	--tdm-activities-sidebar-gap: 20px;
	--tdm-activities-sidebar-top: calc(var(--nav-h, 0px) + var(--wp-admin--admin-bar--height, 0px) + var(--tdm-activities-sidebar-gap));
}


/* Titre de la zone — style cohérent avec le reste du contenu. */
.tdm-activities__title {
	margin-block-start: var(--tdm-activities-margin-block);
}


/* Conteneur full-bleed — largeur viewport, centré via margin négatif. */
.tdm-activities {
	position: relative;
	width: 100vw;
	margin-inline: calc(-50vw + 50%);
	margin-block: var(--tdm-activities-margin-block);
}


/* Bouton fermer — caché hors plein écran, visible en plein écran. */
.tdm-activities__close {
	display: none;
	position: absolute;
	top: var(--tdm-activities-close-offset);
	right: var(--tdm-activities-close-offset);
	width: var(--tdm-activities-close-size);
	height: var(--tdm-activities-close-size);
	padding: 0;
	border: 0;
	border-radius: 50%;
	background: var(--tdm-activities-bg);
	color: inherit;
	cursor: pointer;
	z-index: 1;
}

.tdm-activities__close svg {
	width: 100%;
	height: 100%;
}

@media (hover: hover) {
	.tdm-activities__close:hover {
		opacity: 0.7;
	}
}


/* Plein écran — positionné fixed, remplit le viewport, scrollable. */
.tdm-activities.is-fullscreen {
	position: fixed;
	inset: var(--wp-admin--admin-bar--height, 0px) 0 0;
	width: 100%;
	height: auto;
	margin: 0;
	padding: calc(var(--tdm-activities-close-size) + 2 * var(--tdm-activities-close-offset)) var(--tdm-activities-close-offset) var(--tdm-activities-close-offset);
	overflow-y: auto;
	z-index: var(--tdm-activities-fullscreen-z-index);
	background: var(--tdm-activities-bg);
	overscroll-behavior: contain;
}

.tdm-activities.is-fullscreen .tdm-activities__close {
	display: flex;
	align-items: center;
	justify-content: center;
	position: fixed;
	top: calc(var(--wp-admin--admin-bar--height, 0px) + var(--tdm-activities-close-offset));
	right: var(--tdm-activities-close-offset);
}


/* Empêcher le scroll du body quand plein écran. */
body:has(.tdm-activities.is-fullscreen) {
	overflow: hidden;
}


/* Sidebar sticky « intelligente » desktop — seconde instance du widget, plus haute que le viewport : elle défile
   1:1 avec la page et se cale en bas en descendant, en haut en remontant. Le JS pose la classe is-scrolling-up,
   la hauteur de boîte (--tdm-activities-sidebar-box-height), la marge de compensation au changement de sens
   (--tdm-activities-sidebar-offset) et le fondu (--tdm-activities-sidebar-opacity) à l'approche de la zone. */
.sidebar .tdm-activities-sidebar {
	position: sticky;
	/* Descente : le bas de la boîte ne remonte pas au-dessus du bas du viewport */
	top: calc(100vh - var(--tdm-activities-margin-block) - var(--tdm-activities-sidebar-box-height, 0px));
	margin-top: var(--tdm-activities-sidebar-offset, 0px);
	opacity: var(--tdm-activities-sidebar-opacity, 1);
}

.sidebar .tdm-activities-sidebar.is-scrolling-up {
	/* Remontée : le haut de la boîte ne descend pas sous l'offset sticky */
	top: auto;
	bottom: calc(100vh - var(--tdm-activities-sidebar-top) - var(--tdm-activities-sidebar-box-height, 0px));
}

.sidebar .tdm-activities-sidebar.is-fitting {
	/* Boîte plus basse que le viewport : sticky classique en haut */
	top: var(--tdm-activities-sidebar-top);
	bottom: auto;
}

.tdm-activities-sidebar__sentinel {
	height: 0;
}

.tdm-activities-sidebar.is-faded {
	pointer-events: none;
}