/**
 * Section anchor rail — neutral tokens (override in child with --sc-* or site tokens).
 *
 * @package StarterCreative
 */

/* Scroll offset for fixed headers (child: set --sc-anchor-scroll-margin) */
[data-sc-anchor-scope] h2[id],
[data-sc-anchor-scope] h3[id] {
	scroll-margin-top: var(--sc-anchor-scroll-margin, 5.5rem);
}

.sc-anchor-rail {
	box-sizing: border-box;
	position: fixed;
	right: var(--sc-anchor-rail-right, 0.75rem);
	top: 50%;
	transform: translateY(-50%);
	z-index: var(--sc-anchor-rail-z, 40);
	display: none;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.35rem;
	pointer-events: none;
}

.sc-anchor-rail * {
	pointer-events: auto;
}

.sc-anchor-rail__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
	gap: 0.5rem;
}

.sc-anchor-rail__item {
	position: relative;
	margin: 0;
	padding: 0;
}

.sc-anchor-rail__dot {
	appearance: none;
	display: block;
	width: var(--sc-anchor-dot-size, 10px);
	height: var(--sc-anchor-dot-size, 10px);
	padding: 0;
	border: 1px solid var(--sc-anchor-dot-border, rgba(255, 255, 255, 0.35));
	border-radius: 50%;
	background: var(--sc-anchor-dot-bg, rgba(255, 255, 255, 0.12));
	cursor: pointer;
	transition: transform var(--sc-transition-fast), background var(--sc-transition-fast), border-color var(--sc-transition-fast);
}

.sc-anchor-rail__dot:hover,
.sc-anchor-rail__dot:focus-visible {
	transform: scale(1.15);
	background: var(--sc-anchor-dot-bg-hover, rgba(255, 255, 255, 0.35));
	border-color: var(--sc-anchor-dot-border-hover, rgba(255, 255, 255, 0.65));
	outline: none;
}

/* Hover/focus or alors que l’item est déjà actif (évite repli semi-transparent générique) */
.sc-anchor-rail__dot.is-active:hover,
.sc-anchor-rail__dot.is-active:focus-visible {
	background: var(--sc-anchor-dot-active-hover-bg, var(--sc-anchor-dot-active, #c9a24d));
	border-color: var(--sc-anchor-dot-active-hover-border, var(--sc-anchor-dot-active-border, #c9a24d));
}

.sc-anchor-rail__dot.is-active {
	background: var(--sc-anchor-dot-active, #c9a24d);
	border-color: var(--sc-anchor-dot-active-border, #c9a24d);
}

.sc-anchor-rail__tip {
	position: absolute;
	right: calc(100% + 0.6rem);
	top: 50%;
	transform: translateY(-50%) translateX(4px);
	padding: var(--sc-anchor-tip-padding, 0.35rem 0.65rem);
	max-width: min(25rem, 48vw);
	font-size: var(--sc-anchor-tip-font-size, 0.75rem);
	line-height: 1.25;
	font-weight: 500;
	letter-spacing: 0.02em;
	white-space: normal;
	text-align: right;
	color: var(--sc-anchor-tip-color, #f4f6fb);
	background: var(--sc-anchor-tip-bg, rgba(15, 26, 44, 0.94));
	border-radius: 4px;
	box-shadow: var(--sc-shadow-sm);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--sc-transition-fast), transform var(--sc-transition-fast), visibility var(--sc-transition-fast);
	pointer-events: none;
	width: max-content;
}

.sc-anchor-rail__dot:hover + .sc-anchor-rail__tip,
.sc-anchor-rail__dot:focus-visible + .sc-anchor-rail__tip,
.sc-anchor-rail__item:hover .sc-anchor-rail__tip {
	opacity: 1;
	visibility: visible;
	transform: translateY(-50%) translateX(0);
}

@media (prefers-reduced-motion: reduce) {
	.sc-anchor-rail__dot,
	.sc-anchor-rail__tip {
		transition: none;
	}
}

/* Desktop: vertical rail */
@media (min-width: 900px) {
	.sc-anchor-rail {
		display: flex;
	}
}

/* Mobile FAB + dialog */
.sc-anchor-rail__fab {
	box-sizing: border-box;
	position: fixed;
	right: var(--sc-anchor-fab-right, 1rem);
	bottom: var(--sc-anchor-fab-bottom, calc(1rem + env(safe-area-inset-bottom, 0px)));
	z-index: var(--sc-anchor-fab-z, 45);
	display: flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	min-width: 48px;
	padding: 0 1rem;
	border: none;
	border-radius: 999px;
	font-size: var(--sc-anchor-fab-font-size, 0.8125rem);
	font-weight: 600;
	letter-spacing: 0.03em;
	cursor: pointer;
	background: var(--sc-anchor-fab-bg, #162741);
	color: var(--sc-anchor-fab-color, #f4f6fb);
	box-shadow: var(--sc-shadow-md);
}

.sc-anchor-rail__fab:hover,
.sc-anchor-rail__fab:focus-visible {
	background: var(--sc-anchor-fab-bg-hover, #1e2f4c);
	outline: 2px solid var(--sc-anchor-fab-outline, #bf8d38);
	outline-offset: 2px;
}

.sc-anchor-rail__fab[hidden] {
	display: none !important;
}

@media (min-width: 900px) {
	.sc-anchor-rail__fab {
		display: none !important;
	}
}

.sc-anchor-rail__dialog {
	box-sizing: border-box;
	width: min(100vw - 2rem, 22rem);
	max-height: min(70vh, 28rem);
	margin: auto auto 1rem;
	padding: 0;
	border: none;
	border-radius: 12px;
	background: var(--sc-anchor-dialog-bg, #162741);
	color: var(--sc-anchor-dialog-color, #f4f6fb);
	box-shadow: var(--sc-shadow-dialog, 0 -8px 40px rgba(0, 0, 0, 0.35));
}

.sc-anchor-rail__dialog::backdrop {
	background: var(--sc-backdrop, rgba(10, 16, 28, 0.55));
}

.sc-anchor-rail__dialog-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	padding: 1rem 1rem 0.5rem;
	border-bottom: 1px solid var(--sc-anchor-dialog-border, rgba(255, 255, 255, 0.12));
}

.sc-anchor-rail__dialog-title {
	margin: 0;
	font-size: 0.9375rem;
	font-weight: 700;
}

.sc-anchor-rail__dialog-close {
	flex-shrink: 0;
	min-width: 44px;
	min-height: 44px;
	padding: 0;
	border: none;
	border-radius: 8px;
	font: inherit;
	font-size: 1.25rem;
	line-height: 1;
	cursor: pointer;
	color: inherit;
	background: transparent;
}

.sc-anchor-rail__dialog-close:hover,
.sc-anchor-rail__dialog-close:focus-visible {
	background: var(--sc-white-08, rgba(255, 255, 255, 0.08));
	outline: none;
}

.sc-anchor-rail__dialog-list {
	list-style: none;
	margin: 0;
	padding: 0.5rem 0 1rem;
	max-height: 50vh;
	overflow-y: auto;
	-webkit-overflow-scrolling: touch;
}

.sc-anchor-rail__dialog-link {
	display: block;
	width: 100%;
	padding: 0.75rem 1.25rem;
	border: none;
	background: none;
	font: inherit;
	font-size: 0.875rem;
	line-height: 1.35;
	text-align: left;
	color: inherit;
	cursor: pointer;
	text-decoration: none;
}

.sc-anchor-rail__dialog-link:hover,
.sc-anchor-rail__dialog-link:focus-visible {
	background: var(--sc-white-08, rgba(255, 255, 255, 0.08));
	outline: none;
}

.sc-anchor-rail__dialog-link.is-active {
	border-left: 3px solid var(--sc-anchor-dialog-active, #bf8d38);
	padding-left: calc(1.25rem - 3px);
}