/* ==========================================================================
   Smart TOC — Styles
   Version: 1.0.0
   ========================================================================== */

/* --------------------------------------------------------------------------
   Tokens CSS personnalisables via le Customizer ou un fichier enfant
   -------------------------------------------------------------------------- */
:root {
	--stoc-font-family:        inherit;
	--stoc-border:             #e0e0e0;
	--stoc-border-left:        #2271b1;
	--stoc-radius:             6px;
	--stoc-padding:            1rem 1.25rem;
	--stoc-title-size:         0.9rem;
	--stoc-title-weight:       700;
	--stoc-title-color:        #1d2327;
	--stoc-link-color:         #2271b1;
	--stoc-link-hover-color:   #135e96;
	--stoc-number-color:       #787c82;
	--stoc-number-size:        0.8em;
	--stoc-line-height:        1.6;
	--stoc-sublist-indent:     1.25rem;
	--stoc-item-gap:           0.3rem;
}

/* --------------------------------------------------------------------------
   Conteneur principal
   -------------------------------------------------------------------------- */
.smart-toc {
	font-family: var(--stoc-font-family);
	padding:     var(--stoc-padding);
	margin:      1.5em 0;
	max-width:   100%;
	line-height: var(--stoc-line-height);
}

/* --------------------------------------------------------------------------
   Titre
   -------------------------------------------------------------------------- */
.smart-toc__title {
	display:     block;
	margin:      0 0 0.75rem;
	padding:     0;
	font-size:   var(--stoc-title-size);
	font-weight: var(--stoc-title-weight);
	color:       var(--stoc-title-color);
}

/* --------------------------------------------------------------------------
   Listes — on force tout pour écraser les styles du thème
   -------------------------------------------------------------------------- */
.smart-toc__list,
.smart-toc__list ul,
.smart-toc__list ol,
.smart-toc__sublist {
	margin:      0 !important;
	padding:     0 !important;
	list-style:  none !important;
}

.smart-toc__list li,
.smart-toc__list ul li,
.smart-toc__list ol li,
.smart-toc__sublist li {
	list-style:      none !important;
	list-style-type: none !important;
	padding:         0 !important;
	margin-bottom:   var(--stoc-item-gap) !important;
	background:      none !important;
}

.smart-toc ul,
.smart-toc ol,
.smart-toc li {
	list-style:      none !important;
	list-style-type: none !important;
}

.smart-toc__list li::before,
.smart-toc__list li::after,
.smart-toc__list ul li::before,
.smart-toc__list ul li::after,
.smart-toc__sublist li::before,
.smart-toc__sublist li::after {
	content:  none !important;
	display:  none !important;
}

.smart-toc__list li::marker,
.smart-toc__sublist li::marker {
	content: none !important;
}

.smart-toc li::marker {
	content: none !important;
}

.smart-toc__item {
	display:         block !important;
	list-style:      none !important;
	list-style-type: none !important;
}

.smart-toc__item::before,
.smart-toc__item::after,
.smart-toc__link::before,
.smart-toc__link::after {
	content: none !important;
}

.smart-toc__sublist {
	padding-left: 14px !important;
	margin-top:   var(--stoc-item-gap) !important;
}

/* --------------------------------------------------------------------------
   Liens
   -------------------------------------------------------------------------- */
.smart-toc__link {
	display:         inline-flex;
	align-items:     baseline;
	gap:             0.35em;
	color:           var(--stoc-link-color);
	text-decoration: none;
	font-size:       0.9rem;
	transition:      color 0.15s ease;
	word-break:      break-word;
}

.smart-toc__link:hover,
.smart-toc__link:focus-visible {
	color:           var(--stoc-link-hover-color);
	text-decoration: underline;
}

/* --------------------------------------------------------------------------
   Supprime l'outline natif sur les titres ciblés par ancre
   -------------------------------------------------------------------------- */
.smart-toc__link:focus-visible {
	outline:        2px solid var(--stoc-border-left);
	outline-offset: 2px;
	border-radius:  2px;
}

/* Titres cibles des ancres : pas d'encadrement au focus programmatique */
[id]:focus {
	outline: none;
}

/* --------------------------------------------------------------------------
   Numérotation
   -------------------------------------------------------------------------- */
.smart-toc__number {
	color:       var(--stoc-number-color);
	font-size:   var(--stoc-number-size);
	font-variant-numeric: tabular-nums;
	flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Lien actif (scroll spy — classe ajoutée via JS)
   -------------------------------------------------------------------------- */
.smart-toc__link--active {
	color:       var(--stoc-link-hover-color);
	font-weight: 600;
}

.smart-toc__link--active .smart-toc__number {
	color: var(--stoc-border-left);
}

/* --------------------------------------------------------------------------
   Responsive : réduit les paddings sur petits écrans
   -------------------------------------------------------------------------- */
@media (max-width: 480px) {
	.smart-toc {
		padding: 0.75rem 1rem;
	}
}

/* --------------------------------------------------------------------------
   Mode sombre (respect des préférences système)
   -------------------------------------------------------------------------- */
@media (prefers-color-scheme: dark) {
	:root {
		--stoc-border:           #3a3a3a;
		--stoc-border-left:      #4f9cf9;
		--stoc-title-color:      #e0e0e0;
		--stoc-link-color:       #4f9cf9;
		--stoc-link-hover-color: #7ab8fb;
		--stoc-number-color:     #888;
	}
}