/* ============================================================
   ADHD chore app — complements de la page.
   Le gros de la mise en forme vient des blocs .pg-* globaux :
   ici, uniquement ce qu'ils ne couvrent pas.
   ============================================================ */

/* Le sommaire n'est pas une carte : deux filets et des liens. */
.pg-toc {
  margin: 0 0 clamp(36px, 4vw, 60px);
  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 vit sous le CTA Discord, jamais a cote :
   le Discord reste l'action principale. */
.alt-action { margin-top: 18px; }
.alt-action--center { display: flex; justify-content: center; }

/* Les titres des listes filetees restent des h3 : la hierarchie des
   titres porte le SEO de la page. */
.pg-list h3,
.pg-steps h3 {
  margin: 0;
  font-family: var(--dop-font-display);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
}

.pg-list h3 { font-size: 19px; }
.pg-steps h3 { font-size: 18px; }

/* 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; }

/* Le visuel du hero garde la largeur de la capture source (256px) :
   au-dela, le webp serait etire. */
.pg-hero-shot { margin: 0; justify-self: end; }
.pg-hero-shot img { width: min(100%, 240px); }

/* Deux captures cote a cote, legendees. */
.shot-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(24px, 4vw, 48px);
  margin: clamp(36px, 4vw, 56px) 0 0;
  max-width: 760px;
}

.shot-pair figure { margin: 0; text-align: center; }
.shot-pair img { width: min(100%, 230px); }

.shot-pair figcaption {
  margin-top: 16px;
  color: var(--dop-ink-3);
  font-size: var(--dop-fs-sm);
  line-height: 1.6;
}

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

@media (max-width: 920px) {
  .pg-hero-shot { justify-self: start; }
}

@media (max-width: 640px) {
  .shot-pair { grid-template-columns: 1fr; }
}

/* 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; }
}

/* Titre de section et illustration cote a cote: le bloc garde la marge
   basse du pg-head, le pg-head lui-meme n'en a plus. */
.adhd-headsplit { margin-bottom: clamp(36px, 4vw, 60px); }
.adhd-headsplit .pg-head,
.adhd-headsplit .pg-illus { margin-bottom: 0; }