/*
  NJ — Article Table of Contents
  Design auto-contenu (même raisonnement que nj-articles-filter et
  nj-related-articles : le HTML rendu par ce shortcode est invisible au
  compilateur de CSS des Global Classes Elementor, donc ce plugin porte
  son propre CSS complet plutôt que de dépendre des classes globales
  "post-toc-label"/"post-toc-link" déjà utilisées ailleurs sur le
  template — reproduit néanmoins leurs valeurs à l'identique).

  Le conteneur (.post-toc, l'aside Elementor sticky qui accueille ce
  shortcode) gère le POSITIONNEMENT du bloc dans la page (sticky, marges) ;
  mais le widget Elementor "Code court" enveloppe toujours le HTML d'un
  shortcode dans son propre conteneur (.elementor-widget-container), donc
  le <span>/<a> de ce shortcode ne sont PLUS des enfants directs de
  .post-toc — le flex-column/gap:14px de sa Global Class ne s'applique
  donc plus à eux. .nj-toc reproduit ce même flex-column/gap ici, pour que
  la mise en page reste correcte quel que soit ce qui englobe le shortcode.
*/

.nj-toc {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.nj-toc-label {
  font-size: 11px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--fg-dim-40);
}

.nj-toc-link {
  font-size: 13.5px;
  color: var(--fg-dim-55);
  line-height: 1.4;
  border-left: 1px solid var(--line-14);
  padding-left: 14px;
  text-decoration: none;
  transition: color 0.18s ease;
}
.nj-toc-link:hover,
.nj-toc-link:focus-visible {
  color: #fff;
}

/* Sous-niveau (h3, si un article personnalise `levels="h2,h3"`) : même
   traitement mais légèrement plus petit et plus en retrait, pour
   distinguer visuellement la hiérarchie sans introduire de nouvelle
   couleur ou bordure. */
.nj-toc-link--h3 {
  font-size: 12.5px;
  padding-left: 26px;
}