/* ============================================================
   PLAYMOWEB - Sommaire sticky latéral (complément du JS lecture-toc.js)
   Actif uniquement sur grand écran (>= 1440px). En dessous,
   le sommaire reste dans le flux de l'article (déjà stylé
   par le CSS "Confort de lecture" du Customizer).
   ============================================================ */

.pm-toc-side { display: none; }

@media (min-width: 1440px) {

  /* Masquer le sommaire du flux quand la carte latérale est active.
     Note : :has() ne peut pas etre imbrique dans :has() (sélecteur invalide
     rejete par les navigateurs, ce qui annulait toute la regle) — d'ou
     p:has(+ ol > li > a[...]) au lieu de p:has(+ ol:has(a[...])). */
  body.pm-toc-active .blog-post p:has(+ ol > li > a[href^="#"]),
  body.pm-toc-active .blog-post ol:has(> li > a[href^="#"]) {
    display: none;
  }

  .pm-toc-side {
    display: block;
    position: fixed;
    /* 210px : sous le fil d'ariane (il descend jusqu'a ~185px au chargement) */
    top: 210px;
    /* Colonne de lecture de 760px centrée : la carte se place dans la marge gauche */
    left: calc(50% - 380px - 320px);
    width: 280px;
    background: #FFFFFF;
    border-radius: 24px;
    padding: 22px 18px;
    box-shadow: 0 2px 12px rgba(22, 23, 55, 0.06);
    /* Sous le header du site (.main-header est en z-index: 3) */
    z-index: 2;
    max-height: calc(100vh - 250px);
    overflow-y: auto;
    transition: opacity 0.2s ease;
  }
  .pm-toc-side.pm-hidden {
    opacity: 0;
    pointer-events: none;
  }

  .pm-toc-side__head {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-weight: 700;
    font-size: 15px;
    color: #161737;
  }

  .pm-toc-side__ring {
    width: 40px;
    height: 40px;
    flex: none;
  }
  .pm-toc-side__ring circle {
    fill: none;
    stroke-width: 4;
  }
  .pm-toc-side__ring .pm-ring-bg { stroke: #F6F6F3; }
  .pm-toc-side__ring .pm-ring-fg {
    stroke: #7BD4B0;
    stroke-linecap: round;
    transform: rotate(-90deg);
    transform-origin: center;
    transition: stroke-dashoffset 0.15s linear;
  }
  .pm-toc-side__ring .pm-ring-txt {
    font-size: 11px;
    font-weight: 700;
    fill: #161737;
  }

  .pm-toc-side__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .pm-toc-side__list li { margin: 0; padding: 0; }
  .pm-toc-side__list a {
    display: block;
    padding: 8px 14px;
    border-radius: 999px;
    color: rgba(22, 23, 55, 0.72);
    text-decoration: none;
    font-size: 14px;
    line-height: 1.4;
    transition: background 0.15s ease, color 0.15s ease;
  }
  .pm-toc-side__list a:hover {
    background: #F6F6F3;
    color: #161737;
  }
  .pm-toc-side__list a.is-active {
    background: #E7DEF8;
    color: #161737;
    font-weight: 700;
  }
  .pm-toc-side__list a:focus-visible {
    outline: 2px solid #161737;
    outline-offset: 2px;
  }
}