/* =============================================================
   DOPAMI — Best ADHD chore apps
   Article long: la page est faite des blocs pg-* globaux. Ne restent ici
   que la colonne de sommaire, le verdict du hero et les quelques
   ajustements que .pg-prose ne couvre pas.
   ============================================================= */

/* ---------- Hero ---------- */

/* Les deux actions du hero tiennent sur une ligne: la marge haute passe
   au conteneur, sinon le bouton Discord descend seul dans le flex. */
.pg-hero .actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 14px;
  margin-top: 30px;
}

.pg-hero .actions .discord-cta { margin-top: 0; }

/* Le verdict remplace l'ancienne carte resume: un filet en tete suffit a
   le detacher du titre, sans fond ni bordure. */
.verdict { border-top: 1px solid var(--dop-rule); padding-top: 24px; }

.verdict-lead {
  margin: 0 0 6px;
  color: var(--dop-ink-2);
  font-size: var(--dop-fs-body-lg);
  line-height: var(--dop-lh-normal);
}

.verdict strong { color: var(--dop-ink-1); }

/* ---------- Article + sommaire ---------- */
.article-layout {
  display: grid;
  grid-template-columns: 190px minmax(0, 1fr);
  gap: clamp(32px, 4vw, 72px);
  align-items: start;
}

/* Le sommaire suit la lecture d'un article de 3000 mots; il reste une
   colonne de liens, jamais un encadre. */
.toc {
  position: sticky;
  top: calc(var(--nav-height) + 24px);
  display: grid;
  gap: 12px;
  padding-top: 20px;
  border-top: 1px solid var(--dop-rule);
}

.toc .eyebrow { margin-bottom: 2px; }

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

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

/* ---------- Corps ---------- */

/* Le premier titre du corps suit deja le filet de section. */
.pg-prose > h2:first-child { margin-top: 0; }

/* .pg-prose ne declare pas les h4: ce sont les sous-titres internes
   (Pros, Cons, "Why Dopami ranks #1"). */
.pg-prose h4 {
  margin-top: clamp(22px, 2.4vw, 30px);
  font-size: var(--dop-fs-h4);
  font-weight: 800;
  letter-spacing: var(--dop-tracking-tight);
}

/* Les fiches et les tableaux respirent comme les paragraphes. */
.pg-prose .pg-facts { margin: clamp(20px, 2.4vw, 28px) 0; }

/* Le tableau garde sa largeur utile et defile sur mobile. */
.pg-table { min-width: 660px; }

/* Pros / Cons: deux colonnes de texte, un filet chacune, pas de cadre. */
.pros-cons { row-gap: 26px; margin: clamp(24px, 3vw, 34px) 0; }
.pros-cons > div { border-top: 1px solid var(--dop-rule); padding-top: 4px; }
.pros-cons h4 { margin-top: 16px; }

@media (max-width: 920px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); }
  .toc {
    position: static;
    grid-auto-flow: column;
    grid-auto-columns: max-content;
    overflow-x: auto;
    gap: 22px;
    align-items: baseline;
  }
  .toc .eyebrow { display: none; }
}

@media (max-width: 560px) {
  .pg-hero .actions .btn { width: 100%; justify-content: center; }
}

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