/* ==========================================================================
   Académie TOC — Front-end Styles
   TOC positionnée dans la marge gauche, collée au bord du container-xxl.
   ========================================================================== */

/* --- Layout : transparent, n'affecte pas le contenu --- */
.actoc-layout {
  display: contents;
}
.actoc-layout__content {
  /* contenu inchangé */
}

/* --- Sidebar : fixed, pleine hauteur --- */
.actoc-layout__sidebar {
  position: fixed;
  z-index: 100;
  top: 0;
  left: 0;
  height: 100vh;
  pointer-events: none;
  padding-top: var(--actoc-offset, 100px);
}

.actoc {
  font-family: "Google Sans", system-ui, -apple-system, sans-serif;
  font-size: .85rem;
  line-height: 1.5;
  width: 220px;
  pointer-events: auto;

  /* Le positionnement horizontal (left) est calculé par le JS
     pour coller au bord gauche du container-xxl.
     Le CSS ici n'est qu'un fallback. */
  position: relative;
}

/* Sticky */
.actoc--sticky {
  max-height: calc(100vh - var(--actoc-offset, 100px) - 2rem);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(0,0,0,.12) transparent;
}
.actoc--sticky::-webkit-scrollbar { width: 4px; }
.actoc--sticky::-webkit-scrollbar-track { background: transparent; }
.actoc--sticky::-webkit-scrollbar-thumb { background: rgba(0,0,0,.12); border-radius: 2px; }


/* --- Header --- */
.actoc__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: .75rem;
}

.actoc__title {
  font-family: "Poppins", sans-serif;
  font-weight: 700;
  font-size: .75rem;
  text-transform: uppercase;
  letter-spacing: 1.5px;
  color: var(--cc-green, #1f6f5b);
}

.actoc__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: 4px;
  color: var(--cc-muted, #6c757d);
  border-radius: 4px;
  transition: background .15s ease;
}
.actoc__toggle:hover { background: rgba(0,0,0,.05); }
.actoc__toggle svg {
  display: block;
  transition: transform .25s ease;
}
.actoc[data-collapsed="true"] .actoc__toggle svg {
  transform: rotate(-90deg);
}


/* --- List --- */
.actoc__list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.actoc__item { margin: 0; }

.actoc__link {
  display: block;
  padding: 5px 0 5px 14px;
  color: var(--cc-muted, #6c757d);
  text-decoration: none;
  border-left: 2px solid rgba(0,0,0,.08);
  transition: all .2s ease;
  font-size: .82rem;
  line-height: 1.45;
}
.actoc__link:hover {
  color: var(--cc-ink, #121212);
  text-decoration: none;
}

/* Indentation */
.actoc__item--l0 .actoc__link { padding-left: 14px; font-weight: 500; }
.actoc__item--l1 .actoc__link { padding-left: 26px; font-size: .8rem; }
.actoc__item--l2 .actoc__link { padding-left: 38px; font-size: .76rem; }
.actoc__item--l3 .actoc__link { padding-left: 48px; font-size: .76rem; }

/* Highlight actif */
.actoc--highlight .actoc__link--active {
  color: var(--cc-ink, #121212);
  border-left-color: var(--cc-accent, #f08b2d);
  font-weight: 600;
}

/* Numérotation */
.actoc--numbered .actoc__list { counter-reset: toc-num; }
.actoc--numbered .actoc__item--l0 { counter-increment: toc-num; }
.actoc--numbered .actoc__item--l0 .actoc__link::before {
  content: counter(toc-num) ". ";
  color: var(--cc-accent, #f08b2d);
  font-weight: 600;
}


/* =========================================================================
   VARIANTES DE STYLE
   ========================================================================= */

.actoc--default { /* style de base */ }

.actoc--minimal .actoc__link { border-left: none; padding-left: 0; }
.actoc--minimal .actoc__item--l1 .actoc__link { padding-left: 12px; }
.actoc--minimal .actoc__item--l2 .actoc__link { padding-left: 24px; }
.actoc--minimal .actoc__link--active { color: var(--cc-accent, #f08b2d); border-left: none; }

.actoc--bordered {
  background: var(--cc-bg, #fbf7ef);
  border: 1px solid rgba(0,0,0,.08);
  border-radius: .75rem;
  padding: 1rem;
}
.actoc--bordered .actoc__header {
  padding-bottom: .5rem;
  border-bottom: 2px solid var(--cc-accent, #f08b2d);
  margin-bottom: .75rem;
}


/* =========================================================================
   RESPONSIVE
   ========================================================================= */

/*
   Breakpoint : on masque la TOC latérale quand la marge gauche
   ne peut plus contenir 220px + 1.5rem de gap.
   container-xxl = 1320px → il faut 1320 + (220+24)*2 = ~1808px pour les 2 marges,
   mais on n'a besoin que de la marge gauche → ~1320 + 220 + 24 = 1564px.
   On arrondit à 1500px.
*/
@media (max-width: 1499.98px) {
  .actoc-layout__sidebar {
    position: static;
    height: auto;
    width: 100%;
    padding: 0;
    pointer-events: auto;
    display: block;
  }

  .actoc-layout {
    display: block;
  }

  .actoc-layout__sidebar {
    margin-bottom: 1.5rem;
  }

  .actoc {
    position: static !important;
    max-height: none !important;
    width: 100%;
    left: auto;
    margin-right: 0;
  }

  /* Style encadré en mode inline */
  .actoc {
    background: var(--cc-bg, #fbf7ef);
    border: 1px solid rgba(0,0,0,.08);
    border-radius: .75rem;
    padding: 1rem 1.25rem;
  }

  .actoc__header {
    margin-bottom: .5rem;
    padding-bottom: .5rem;
    border-bottom: 2px solid var(--cc-accent, #f08b2d);
  }

  .actoc__toggle { display: flex; }

  .actoc--collapsible .actoc__list {
    overflow: hidden;
    transition: max-height .3s ease, opacity .25s ease;
  }
  .actoc--collapsible[data-collapsed="true"] .actoc__list {
    max-height: 0 !important;
    opacity: 0;
  }
  .actoc--collapsible[data-collapsed="false"] .actoc__list {
    opacity: 1;
  }
}


/* =========================================================================
   PRINT
   ========================================================================= */
@media print {
  .actoc-layout__sidebar { display: none; }
}