@layer base {
	html,
	body {
		margin: 0;
		padding: 0;
	}

	body {
		overscroll-behavior: none;
	}

	main > :first-child {
		margin-top: 0 !important;
	}

	main > :last-child {
		margin-bottom: 0 !important;
	}
}

::-webkit-scrollbar {
	display: none;
}

html {
	scroll-behavior: smooth;
}

.material-symbols-outlined {
	font-variation-settings: "FILL" 0, "wght" 300, "GRAD" 0, "opsz" 24;
}

.pb-safe {
	padding-bottom: env(safe-area-inset-bottom, 0px);
}

.pt-safe {
	padding-top: env(safe-area-inset-top, 0px);
}

.no-scrollbar {
	-ms-overflow-style: none;
	scrollbar-width: none;
}

.no-scrollbar::-webkit-scrollbar {
	display: none;
}

@media (max-width: 767px) {
	.font-headline-hero,
	.text-headline-hero {
		font-size: 36px !important;
		line-height: 44px !important;
		letter-spacing: 0.14em !important;
	}

	.font-headline-lg,
	.text-headline-lg {
		font-size: 28px !important;
		line-height: 36px !important;
	}

	/* Compact calendar status labels on very small screens */
	#calendrier .font-label-sm.shrink-0 {
		font-size: 8px !important;
		padding-left: 0.5rem;
		padding-right: 0.5rem;
	}
}

.tagat-notice {
	position: fixed;
	top: 4.5rem;
	left: 50%;
	transform: translateX(-50%);
	z-index: 70;
	max-width: calc(100vw - 2rem);
	padding: 0.75rem 1.25rem;
	border-radius: 0.25rem;
	background: #0f1d25;
	border: 1px solid rgba(0, 180, 167, 0.5);
	color: #4fdbcd;
	font-family: Montserrat, sans-serif;
	font-size: 11px;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	text-align: center;
}

@media (min-width: 1280px) {
	.tagat-notice {
		top: 5.5rem;
	}
}

/* Ritual drawer open state */
#ritual-drawer.is-open {
	opacity: 1 !important;
	pointer-events: auto !important;
}

body.tagat-drawer-open {
	overflow: hidden;
}

/* Back to top */
.tagat-to-top {
	position: fixed;
	right: 1.25rem;
	bottom: 6.5rem;
	z-index: 55;
	width: 2.75rem;
	height: 2.75rem;
	display: flex;
	align-items: center;
	justify-content: center;
	border-radius: 9999px;
	border: 1px solid rgba(197, 168, 128, 0.35);
	background: rgba(15, 29, 37, 0.9);
	color: #e2c399;
	backdrop-filter: blur(16px);
	box-shadow: 0 0 24px -4px rgba(0, 180, 167, 0.2);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity 0.25s ease, visibility 0.25s ease, transform 0.25s ease, background 0.2s ease, color 0.2s ease;
	cursor: pointer;
}

.tagat-to-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.tagat-to-top:hover {
	background: #e2c399;
	color: #402d0f;
}

@media (min-width: 1280px) {
	.tagat-to-top {
		bottom: 2rem;
		right: 2rem;
	}
}