/* =========================================================================
   LargeGamer — Table of Contents
   Aucune image, aucune police, aucun JavaScript. Le bloc occupe sa place
   définitive dès le premier rendu : CLS strictement nul.
   ========================================================================= */

.lg-toc {
	--lgt-bg: #0e0b16;
	--lgt-surface: #130f1f;
	--lgt-violet: #2e1f49;
	--lgt-cyan: #6fc3f7;
	--lgt-cyan-bright: #6fd6ff;
	--lgt-gold: #e8b338;
	--lgt-text: #f2f4f3;
	--lgt-dim: #a9a6b8;

	display: block;
	margin: 0 0 26px;
	box-sizing: border-box;

	/* Le sommaire est inséré ENTRE deux Rows Divi. Sur les gabarits en
	   `et_flex_row`, le conteneur parent est un flex : un enfant en display
	   block s'y réduit à la largeur de son contenu et se retrouve centré,
	   tout étriqué. Ces trois lignes lui rendent la pleine largeur, sans
	   effet dans un parent normal. */
	width: 100%;
	max-width: 100%;
	align-self: stretch;
	flex: 1 1 100%;
}

.lg-toc * {
	box-sizing: border-box;
}

.lg-toc__box {
	background: linear-gradient(160deg, var(--lgt-violet) 0%, var(--lgt-surface) 60%, var(--lgt-bg) 100%);
	border: 1px solid rgba(111, 195, 247, 0.28);
	border-radius: 10px;
	padding: 4px 18px 14px;
	color: var(--lgt-text);
}

/* -------------------------------------------------------------------------
   L'en-tête, qui sert aussi de bouton de repli
   ------------------------------------------------------------------------- */
.lg-toc__summary {
	display: flex;
	align-items: baseline;
	gap: 12px;
	padding: 12px 0;
	cursor: pointer;
	list-style: none;
	user-select: none;
}

.lg-toc__summary::-webkit-details-marker {
	display: none;
}

.lg-toc__summary::before {
	content: "▸";
	color: var(--lgt-cyan);
	font-size: 14px;
	line-height: 1;
	transition: transform 0.18s ease;
}

.lg-toc__box[open] .lg-toc__summary::before {
	transform: rotate(90deg);
}

.lg-toc__summary:focus-visible {
	outline: 3px solid var(--lgt-cyan-bright);
	outline-offset: 3px;
	border-radius: 6px;
}

.lg-toc__title {
	font-size: 14px;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--lgt-cyan);
}

.lg-toc__count {
	margin-left: auto;
	padding: 2px 10px;
	border: 1px solid rgba(232, 179, 56, 0.35);
	border-radius: 999px;
	font-size: 12px;
	font-weight: 600;
	color: var(--lgt-gold);
	white-space: nowrap;
}

/* -------------------------------------------------------------------------
   La liste

   Sélecteurs doublés (.lg-toc .lg-toc__list) et !important sur les puces :
   Divi applique `.entry-content ol` et `.entry-content li`, plus spécifiques
   qu'une classe seule. Sans ça, la puce native de la liste ordonnée se
   superpose à notre compteur et on lit « 1. 1. Titre ».
   ------------------------------------------------------------------------- */
.lg-toc .lg-toc__list {
	margin: 4px 0 0;
	padding: 12px 0 0 0;
	border-top: 1px solid rgba(111, 195, 247, 0.16);
	list-style: none !important;
	list-style-type: none !important;
	counter-reset: lgtoc;
	columns: 2;
	column-gap: 30px;
}

.lg-toc .lg-toc__item {
	margin: 0 0 2px;
	padding: 0;
	break-inside: avoid;
	line-height: 1.4;
	list-style: none !important;
	list-style-type: none !important;
}

.lg-toc .lg-toc__item::marker,
.lg-toc .lg-toc__list::marker {
	content: none;
}

.lg-toc .lg-toc__item a {
	display: block;
	padding: 5px 8px 5px 0;
	font-size: 14.5px;
	color: var(--lgt-cyan);
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.15s ease, background 0.15s ease;
}

.lg-toc .lg-toc__item a::before {
	counter-increment: lgtoc;
	content: counter(lgtoc) ".";
	display: inline-block;
	min-width: 26px;
	color: var(--lgt-dim);
	font-variant-numeric: tabular-nums;
}

.lg-toc .lg-toc__item a:hover,
.lg-toc .lg-toc__item a:focus-visible {
	color: var(--lgt-cyan-bright);
	background: rgba(46, 31, 73, 0.6);
	text-decoration: none;
}

.lg-toc__item a:focus-visible {
	outline: 2px solid var(--lgt-cyan-bright);
	outline-offset: 1px;
}

/* Les sous-sections, si tu actives le niveau h3. */
.lg-toc__level-3 a {
	padding-left: 26px;
	font-size: 13.5px;
	color: var(--lgt-dim);
}

.lg-toc .lg-toc__level-3 a::before {
	content: "–";
	min-width: 18px;
}

.lg-toc__level-3 a:hover {
	color: var(--lgt-cyan);
}

/* -------------------------------------------------------------------------
   Le saut vers une section ne doit pas coller le titre au bord haut,
   ni le glisser sous un en-tête collant.
   ------------------------------------------------------------------------- */
:where(h2, h3, h4)[id^="lg-"] {
	scroll-margin-top: 90px;
}

/*
 * PAS de `html { scroll-behavior: smooth; }` ici.
 *
 * Divi propose son propre défilement fluide dans Theme Options, et il est
 * écrit en JavaScript : il déplace la page image par image. Ajouter le
 * défilement fluide du navigateur par-dessus fait que chaque micro-
 * déplacement déclenche une animation aussitôt remplacée par la suivante.
 * Les deux se neutralisent et la molette ne répond plus — constaté sur
 * Chrome et Edge en 1.0.3.
 *
 * Le saut vers une ancre reste net et instantané, ce qui est de toute façon
 * le comportement le plus lisible. Si tu désactives un jour le défilement
 * fluide de Divi et que tu veux celui du navigateur, ajoute la règle dans le
 * CSS personnalisé de Divi, pas ici.
 */

@media (prefers-reduced-motion: reduce) {
	.lg-toc__summary::before,
	.lg-toc .lg-toc__item a {
		transition: none;
	}
}

/* -------------------------------------------------------------------------
   Mobile
   ------------------------------------------------------------------------- */
@media (max-width: 700px) {
	.lg-toc__list {
		columns: 1;
	}

	.lg-toc__box {
		padding: 2px 14px 12px;
	}

	.lg-toc__item a {
		padding: 8px 6px 8px 0; /* cibles tactiles plus confortables */
		font-size: 15px;
	}
}

/* -------------------------------------------------------------------------
   Titres déjà numérotés par l'auteur (« 01 — The product ») : on supprime
   le compteur CSS, sinon on lirait « 1. 01 — The product ».
   ------------------------------------------------------------------------- */
.lg-toc.lg-toc--self-numbered .lg-toc__item a::before {
	content: none;
}

.lg-toc.lg-toc--self-numbered .lg-toc__level-3 a::before {
	content: "–";
	display: inline-block;
	min-width: 18px;
	color: var(--lgt-dim);
}