/* FW_TOC — style premium / moderne. Toutes les couleurs et dimensions sont surchargeables
   via les variables CSS ci-dessous, soit globalement (theme.json / customizer), soit via
   l'injection inline générée par FWTOC_Plugin::inline_colors(). */
.fwtoc {
	/* Couleurs thème (fallback étendu : WP core / Blocksy / GeneratePress / Kadence / Astra / OceanWP) */
	--fwtoc-theme-accent: var(--wp--preset--color--primary, var(--theme-palette-color-1, var(--ct-color-primary, var(--gp-color-primary, var(--global-palette1, var(--ast-global-color-0, var(--oceanwp-primary-color, var(--accent, #b45309))))))));
	--fwtoc-theme-text:   var(--wp--preset--color--contrast, var(--theme-palette-color-8, var(--ct-color-text, var(--gp-color-text, var(--global-palette4, var(--ast-global-color-3, var(--oceanwp-body-text-color, #111827)))))));

	/* Slots couleur granulaires (par défaut → thème) */
	--fwtoc-bg:               #ffffff;
	--fwtoc-title-color:      var(--fwtoc-theme-text);
	--fwtoc-link-color:       var(--fwtoc-theme-text);
	--fwtoc-link-color-hover: var(--fwtoc-theme-accent);
	--fwtoc-num-color:        var(--fwtoc-theme-accent);
	--fwtoc-arrow-color:      var(--fwtoc-theme-text);
	--fwtoc-arrow-color-hover:var(--fwtoc-theme-accent);

	/* Halo + accent visuel (calculés depuis hover link) */
	--fwtoc-accent-soft: color-mix(in srgb, var(--fwtoc-link-color-hover) 12%, transparent);

	/* Dimensions */
	--fwtoc-radius:         16px;
	--fwtoc-padding:        24px;
	--fwtoc-header-padding: 0;
	--fwtoc-link-spacing:   9px;

	/* Typo & easing */
	--fwtoc-border: rgba(17, 24, 39, .06);
	--fwtoc-shadow: 0 1px 2px rgba(17, 24, 39, .04), 0 12px 32px -12px rgba(17, 24, 39, .12);
	--fwtoc-serif: ui-serif, Georgia, "Iowan Old Style", Cambria, "Times New Roman", serif;
	--fwtoc-sans:  -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
	--fwtoc-ease:  cubic-bezier(.22, 1, .36, 1);

	position: relative;
	margin: 2.5em 0;
	padding: var(--fwtoc-padding);
	background: var(--fwtoc-bg);
	border: 1px solid var(--fwtoc-border);
	border-radius: var(--fwtoc-radius);
	box-shadow: var(--fwtoc-shadow);
	font-family: var(--fwtoc-sans);
	color: var(--fwtoc-link-color);
	overflow: hidden;
	isolation: isolate;
	/* Reset défensif : on est un <nav> dans .entry-content, certains thèmes stylent nav globalement */
	display: block;
	float: none;
	width: auto;
	max-width: 100%;
}
nav.fwtoc, nav.fwtoc ul, nav.fwtoc ol { background: var(--fwtoc-bg); }
nav.fwtoc a { box-shadow: none; }

/* Déploiement au survol (preview) — piloté en JS (classe .is-hover-preview).
   Le clic sur le header reprend la main : la classe est retirée et inhibée jusqu'au prochain mouseleave/mouseenter. */
.fwtoc.is-hover-expand.is-collapsed.is-hover-preview .fwtoc__list-wrap {
	grid-template-rows: 1fr;
	opacity: 1;
	margin-top: .25em;
}
.fwtoc.is-hover-expand.is-collapsed.is-hover-preview .fwtoc__chevron {
	transform: rotate(0deg);
}

.fwtoc::before {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: inherit;
	background: radial-gradient(120% 80% at 0% 0%, var(--fwtoc-accent-soft), transparent 55%);
	pointer-events: none;
	z-index: -1;
}

/* Resets propres contre le thème — surcharges ciblées sur nos sélecteurs uniquement */
.fwtoc .fwtoc__title,
.fwtoc .fwtoc__header,
.fwtoc .fwtoc__list,
.fwtoc .fwtoc__item,
.fwtoc .fwtoc__link {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
}

.fwtoc__header {
	display: flex;
	align-items: center;
	gap: .85em;
	padding: 0 0 var(--fwtoc-header-padding) 0 !important;
	user-select: none;
}
.fwtoc__header.is-clickable {
	cursor: pointer;
	-webkit-tap-highlight-color: transparent;
}
.fwtoc__header.is-clickable:focus-visible {
	outline: 2px solid var(--fwtoc-link-color-hover);
	outline-offset: 4px;
	border-radius: 6px;
}
.fwtoc__header.is-clickable:hover .fwtoc__toggle {
	background: var(--fwtoc-accent-soft);
	color: var(--fwtoc-arrow-color-hover);
}

.fwtoc__icon {
	color: var(--fwtoc-link-color-hover);
	display: inline-flex;
	width: 36px;
	height: 36px;
	align-items: center;
	justify-content: center;
	background: var(--fwtoc-accent-soft);
	border-radius: 10px;
	flex-shrink: 0;
}
.fwtoc__icon svg { width: 20px; height: 20px; }

.fwtoc__title {
	margin: 0 !important;
	padding: 0 !important;
	font-family: var(--fwtoc-serif);
	font-weight: 600;
	font-size: 1.25em;
	letter-spacing: -.005em;
	flex: 1;
	color: var(--fwtoc-title-color);
	line-height: 1.2;
	/* Élément <p> rendu visuellement comme un titre — pas de structure heading héritée du thème */
}

.fwtoc__toggle {
	background: transparent;
	border: 1px solid var(--fwtoc-border);
	border-radius: 999px;
	width: 34px;
	height: 34px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	color: var(--fwtoc-arrow-color);
	transition: background .25s var(--fwtoc-ease), border-color .25s var(--fwtoc-ease), color .25s var(--fwtoc-ease);
	flex-shrink: 0;
}
.fwtoc__chevron { transition: transform .4s var(--fwtoc-ease); }
.fwtoc.is-collapsed .fwtoc__chevron { transform: rotate(-90deg); }

/* Collapse smooth via grid-template-rows */
.fwtoc__list-wrap {
	display: grid;
	grid-template-rows: 1fr;
	transition: grid-template-rows .45s var(--fwtoc-ease), opacity .3s var(--fwtoc-ease), margin-top .45s var(--fwtoc-ease);
	opacity: 1;
	margin-top: .25em;
}
.fwtoc.is-collapsed .fwtoc__list-wrap {
	grid-template-rows: 0fr;
	opacity: 0;
	margin-top: 0;
}
.fwtoc__list-wrap > .fwtoc__list {
	overflow: hidden;
	min-height: 0;
}

.fwtoc__list { list-style: none; }
.fwtoc__item { padding-left: calc(var(--fwtoc-indent, 0) * 1.4em); }

.fwtoc__link {
	position: relative;
	display: flex;
	align-items: baseline;
	gap: .85em;
	padding: var(--fwtoc-link-spacing) 0 !important;
	text-decoration: none;
	color: var(--fwtoc-link-color);
	transition: color .2s var(--fwtoc-ease), padding-left .25s var(--fwtoc-ease);
	border-radius: 4px;
}

.fwtoc__link::before {
	content: "";
	position: absolute;
	left: -.4em;
	top: 50%;
	width: 0;
	height: 2px;
	background: var(--fwtoc-link-color-hover);
	border-radius: 2px;
	transform: translateY(-50%);
	transition: width .3s var(--fwtoc-ease);
}
.fwtoc__link:hover,
.fwtoc__link:focus-visible,
.fwtoc__link.is-current {
	color: var(--fwtoc-link-color-hover);
	padding-left: .5em;
}
.fwtoc__link:focus-visible {
	outline: 2px solid var(--fwtoc-link-color-hover);
	outline-offset: 2px;
}
.fwtoc__link:hover { outline: none; }
.fwtoc__link:hover::before,
.fwtoc__link:focus-visible::before,
.fwtoc__link.is-current::before { width: .25em; }
.fwtoc__link.is-current .fwtoc__num { opacity: 1; font-weight: 600; }

.fwtoc__num {
	font-family: var(--fwtoc-serif);
	font-variant-numeric: tabular-nums;
	color: var(--fwtoc-num-color);
	font-size: .92em;
	font-weight: 500;
	min-width: 2em;
	opacity: .9;
}

.fwtoc__text {
	font-size: 1em;
	line-height: 1.45;
	font-weight: 400;
}

/* Apparition initiale */
.fwtoc { animation: fwtoc-rise .5s var(--fwtoc-ease) both; }
@keyframes fwtoc-rise {
	from { opacity: 0; transform: translateY(6px); }
	to   { opacity: 1; transform: translateY(0); }
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
	.fwtoc, .fwtoc *, .fwtoc *::before { transition: none !important; animation: none !important; }
}

/* Print */
@media print {
	.fwtoc {
		box-shadow: none;
		border: 1px solid #ccc;
		background: #fff !important;
		page-break-inside: avoid;
		break-inside: avoid;
	}
	.fwtoc::before { display: none; }
	.fwtoc__toggle { display: none; }
	.fwtoc.is-collapsed .fwtoc__list-wrap { grid-template-rows: 1fr; opacity: 1; margin-top: .25em; }
	.fwtoc__link { color: #000 !important; }
	.fwtoc__link::after { content: " (§" attr(href) ")"; font-size: .85em; color: #666; }
	.fwtoc__num { color: #000 !important; }
}

/* Resets renforcés contre thèmes agressifs */
.fwtoc ol.fwtoc__list,
.fwtoc ul.fwtoc__list { list-style: none !important; padding-left: 0 !important; }
.fwtoc .fwtoc__item::marker { content: none; }