/* ============================================================
   PAGE TOC DROPDOWN — styles
   Fichier autonome, à charger APRÈS style-lcu.css dans le <head>.
   Réutilise les variables déjà définies dans style-lcu.css (:root).

   ------------------------------------------------------------
   VISIBILITÉ — c'est la règle la plus importante de ce fichier :
   Ce dropdown ne doit apparaître QUE là où aucune autre navigation
   locale n'est disponible, pour ne jamais faire doublon avec :
     - le menu burger mobile (≤ 820px) : sur mobile, on considère
       qu'un sommaire cliquable est un besoin marginal (l'usage
       naturel est de faire défiler) ;
     - la sidebar sticky ".toc-aside" (≥ 1600px, voir style-lcu.css).
   Il ne reste donc visible qu'entre 821px et 1599px inclus.

   → Pour changer cette plage (ex. réactiver sur mobile un jour),
     ne modifiez QUE les deux valeurs ci-dessous.
   ============================================================ */

.page-toc-dropdown-item {
  display: none; /* masqué par défaut : mobile ET ≥1600px */
}

@media (min-width: 821px) and (max-width: 1599px) {
  .page-toc-dropdown-item {
    display: flex;
    position: relative;
    align-items: center;
  }
}

/* ============================
   DÉCLENCHEUR
============================ */
.page-toc-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: inherit;
  background: none;
  border: none;
  cursor: pointer;
  /* reprend l'apparence générique des liens du header (style-lcu.css) */
  font-size: 0.82rem;
  font-weight: 500;
  color: rgba(13, 13, 20, 0.6);
  padding: 0.45rem 0.75rem;
  border-radius: 100px;
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
}

.page-toc-trigger:hover {
  color: var(--ink);
  background: var(--mist);
}

.page-toc-trigger::after {
  content: '';
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--transition);
  opacity: 0.6;
  margin-top: -3px;
}

.page-toc-trigger[aria-expanded="true"]::after {
  transform: rotate(-135deg);
  margin-top: 3px;
}

/* ============================
   PANNEAU
============================ */
.page-toc-panel {
  display: none;
  position: absolute;
  top: calc(100% + 14px);
  left: 50%;
  transform: translateX(-50%) translateY(-8px);
  width: 220px;
  background: var(--paper);
  border: 1px solid var(--mist-dark);
  border-radius: var(--r-md);
  box-shadow: 0 20px 50px var(--shadow);
  padding: 0.75rem;
  z-index: 150;
  opacity: 0;
}

.page-toc-dropdown-item.page-toc-open .page-toc-panel {
  display: block;
  animation: pageTocFadeIn 0.25s ease forwards;
}

@keyframes pageTocFadeIn {
  from { opacity: 0; transform: translateX(-50%) translateY(-8px); }
  to   { opacity: 1; transform: translateX(-50%) translateY(0); }
}

.page-toc-panel::before {
  content: '';
  position: absolute;
  top: -7px;
  left: 50%;
  transform: translateX(-50%) rotate(45deg);
  width: 14px;
  height: 14px;
  background: var(--paper);
  border-left: 1px solid var(--mist-dark);
  border-top: 1px solid var(--mist-dark);
}

/* Liste clonée de #tocList : mêmes classes CSS que la sidebar
   (.toc-list, .toc-list li a...) déjà stylées dans style-lcu.css,
   on ne redéfinit ici que ce qui doit différer dans ce contexte. */
.page-toc-dropdown-list {
  gap: 0.05rem;
}

.page-toc-dropdown-list li a {
  font-size: 0.8rem;
  padding: 0.55rem 0.6rem;
}

/* La barre de progression n'a pas de sens dupliquée dans un dropdown
   ponctuel : si jamais #tocList venait à inclure .toc-progress dans
   son propre conteneur (ce n'est pas le cas dans la structure actuelle,
   la progression est en dehors de #tocList), cette règle la masquerait
   par sécurité dans le clone. */
.page-toc-dropdown-list .toc-progress {
  display: none;
}