/* ============================================================
   Cleaning with executive dysfunction — complements de la page.
   Tout le reste vient des blocs .pg-* globaux.
   ============================================================ */

/* Le sommaire n'est pas une carte : deux filets et des liens. */
.pg-toc {
  margin: clamp(36px, 4vw, 60px) 0;
  padding: 20px 0;
  border-top: 1px solid var(--dop-rule);
  border-bottom: 1px solid var(--dop-rule);
}

.pg-toc .eyebrow { margin-bottom: 12px; }

.pg-toc ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 10px clamp(18px, 3vw, 34px);
}

.pg-toc a {
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-sm);
  font-weight: 700;
  transition: color var(--dop-dur);
}

.pg-toc a:hover { color: var(--dop-primary); }

/* Le bouton secondaire passe sous le CTA Discord : le Discord reste
   l'action principale. */
.alt-action { margin-top: 18px; }
.alt-action--center { display: flex; justify-content: center; }

/* Le protocole tient en cinq etapes longues : une colonne se lit mieux
   qu'une grille, et le numero rose reste l'ancre visuelle. */
.pg-steps--stack {
  grid-template-columns: 1fr;
  max-width: 760px;
  gap: 0;
}

.pg-steps--stack li { padding: 24px 0; }
.pg-steps--stack li:last-child { border-bottom: 1px solid var(--dop-rule); }

/* Les titres d'etape restent des h3 : la hierarchie porte le SEO. */
.pg-steps h3 {
  margin: 0;
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 18px;
  letter-spacing: var(--dop-tracking-tight);
}

/* Titre au-dessus d'une colonne de liste filetee. */
.pg-cols-title {
  margin: 0 0 4px;
  font-family: var(--dop-font-display);
  font-weight: 800;
  font-size: 19px;
  letter-spacing: var(--dop-tracking-tight);
}

/* Une puce sans titre : pas de retrait haut a compenser. */
.pg-list li > span:only-child { margin-top: 0; }

/* Les liens des listes filetees prennent l'accent rose, comme dans
   le corps d'article. */
.pg-list a {
  color: var(--dop-primary);
  font-weight: 700;
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* La signature d'auteur ouvre le hero, au-dessus du CTA. */
.pg-hero .author-byline { margin-top: 26px; }

/* La bio d'auteur est encore une carte dans components.css : on la
   ramene au seul registre du site, un bloc de texte sous un filet. */
.author-bio {
  margin-top: clamp(40px, 5vw, 64px);
  padding: clamp(28px, 3vw, 40px) 0 0;
  background: transparent;
  border: 0;
  border-top: 1px solid var(--dop-rule);
  border-radius: 0;
}

/* L'annotation manuscrite ferme la section du protocole. */
.pad .hand { margin-top: 28px; }

/* Sommaire tactile: 44px de cible par lien. */
@media (max-width: 920px) {
  .pg-toc ul { gap: 0 24px; }
  .pg-toc a { display: inline-block; padding: 12px 0; }
}

/* Les liens seuls sur leur ligne (outils a essayer) prennent toute la
   rangee: une cible tactile de 44px au lieu de la hauteur du texte. */
.pg-list li > span > a:only-child { display: block; padding: 10px 0; }

/* Le protocole et la scene resolue: la meme personne que dans le hero,
   qui ramasse une seule tasse. L'image suit la lecture des etapes. */
.hc-protocol-split { align-items: start; grid-template-columns: minmax(0, 760px) minmax(0, 360px); justify-content: space-between; }
.hc-protocol-illus { position: sticky; top: 110px; }
.hc-protocol-illus img { margin-inline: auto; }
@media (max-width: 920px) {
  .hc-protocol-split { grid-template-columns: 1fr; }
  .hc-protocol-illus { position: static; }
}