.toc {
  display: block;
  margin: var(--spacing) 0;
  background-color: var(--lightest);
  border-radius: var(--border-radius);
  border: 1px solid var(--light);
  contain: content;
}

.toc:not([open]) {
  width: fit-content;
}

.toc:not([open]):hover {
  border-color: var(--primary);
}

.toc:not([open]):hover summary {
  color: var(--primary);
}

.toc summary {
  padding: .75em;
  color: var(--dark);
}

.toc summary:hover {
  cursor: pointer;
}

.toc[open] summary .hide,
.toc summary .show {
  display: inline;
}

.toc summary .hide,
.toc[open] summary .show {
  display: none;
}

.intoc {
  padding: 0 1em 1em;
  margin: 0;
  list-style-type: none;
}

.intoc ul {
  margin-left: 1em;
}

.intoc > li {
  margin-bottom: .75em;
}

.intoc ul > li {
  margin-left: 1em;
  padding-left: .5em;
}

.intoc > li > a {
  font-weight: 600;
  margin-bottom: .75em;
}

.intoc a {
  text-wrap: balance;
}

.intoc ul > li::marker {
  content: "\22A2";
  color: var(--medium);
}

.intoc ul > li:has(ul) > a {
  font-weight: 500;
}

@keyframes downarrow {
  0% {
    transform: translateY(0);
    opacity: 0.3;
  }

  100% {
    transform: translateY(0.2em);
    opacity: 1;
  }
}

@media (pointer: fine) {
  .toc a::after {
    content: "\2193";
    display: inline-block;
    margin-left: 0.66em;
    transform-origin: 50% 50%;
    animation: downarrow 0.6s infinite alternate ease-in-out;
    visibility: hidden;
    color: var(--primary);
  }

  .toc a:hover::after {
    visibility: visible;
  }
}

/* ==================================================================
   Personnalisation VideoDL — sommaire
   ================================================================== */
.toc {
	background-color: var(--base);
	border: 2px solid var(--contrast);
	border-radius: 0;
	clip-path: polygon(var(--cut, 10px) 0, 100% 0, 100% 100%, 0 100%, 0 var(--cut, 10px));
	padding: 12px 16px;
}

/* Replié, le sommaire n'est qu'un bouton : il ne doit pas peser comme un bloc. */
.toc > summary {
	padding: 0;
}

.toc .intoc {
	padding: 0 0 0 2px;
	margin-top: 12px;
}

.toc summary {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-weight: 700;
	font-size: 14px;
	letter-spacing: 0.07em;
	color: var(--contrast);
	display: flex;
	align-items: center;
	gap: 8px;
}

.toc summary::before {
	content: '';
	width: 16px;
	height: 3px;
	background-color: var(--vert);
	flex: none;
}

.toc summary .show {
	font-family: 'Roboto Condensed', 'Roboto Condensed-fallback', sans-serif;
	text-transform: uppercase;
	font-size: 12px;
	letter-spacing: 0.06em;
	color: var(--accent);
}

.intoc > li > a,
.intoc ul > li > a {
	color: var(--contrast);
	text-decoration: none;
	border-bottom: 2px solid transparent;
	transition: border-color 0.18s ease, color 0.18s ease;
}

.intoc > li > a:is(:hover, :focus),
.intoc ul > li > a:is(:hover, :focus) {
	color: var(--accent);
	border-bottom-color: var(--vert);
}

.intoc > li > a[aria-current] {
	color: var(--accent);
	border-bottom-color: var(--accent);
}