/* ============================================================
   Impact Web — Cocon pédagogique /blog
   Complément à main.css. N'introduit que les composants absents
   de main.css : sommaire (.toc) et carte d'article d'index.
   Réutilise les tokens et les composants existants (.page-head,
   .breadcrumb, .prose, .grid-3, .cmp, .faq…).
   ============================================================ */

/* --- Sommaire cliquable d'article ----------------------------- */
.toc {
  max-width: 780px;
  margin: 0 auto 40px;
  background: var(--iw-gray-100);
  border: 1.5px solid var(--border-subtle);
  border-left: 4px solid var(--iw-red);
  border-radius: var(--radius-md);
  padding: 22px 26px;
}
.toc .toc-title {
  font-size: 0.78rem;
  text-transform: uppercase;
  letter-spacing: var(--ls-eyebrow);
  color: var(--iw-red-deep);
  font-weight: var(--fw-extrabold);
  margin: 0 0 12px;
}
.toc ol { margin: 0; padding-left: 20px; display: grid; gap: 8px; }
.toc ol ol { margin-top: 8px; padding-left: 18px; }
.toc li { font-weight: var(--fw-semibold); color: var(--iw-gray-700); }
.toc a { color: var(--iw-ink); }
.toc a:hover { color: var(--iw-red-deep); }
.toc ol ol li { font-weight: var(--fw-medium); font-size: 0.95rem; }

/* --- Ajustements de lecture ----------------------------------- */
/* Décalage d'ancre sous la nav collante */
.prose h2, .prose h3 { scroll-margin-top: 88px; }
/* Chapô d'introduction */
.prose .article-lead {
  font-size: var(--fs-lead);
  font-weight: var(--fw-semibold);
  color: var(--iw-ink);
  margin-bottom: 28px;
}
/* Encadré « preuve par l'exemple » */
.prose .proof-note {
  margin: 1.6em 0;
  padding: 20px 24px;
  background: var(--iw-cream);
  border-left: 4px solid var(--iw-red);
  border-radius: var(--radius-md);
  font-weight: var(--fw-semibold);
  color: var(--iw-ink);
}
.prose .proof-note p:last-child { margin-bottom: 0; }

/* --- Carte d'article sur l'index /blog (dans .grid-3) --------- */
.card-article {
  display: flex; flex-direction: column;
  background: var(--iw-white);
  border: 1.5px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 28px 26px;
  transition: transform var(--dur-base) var(--ease-out), border-color var(--dur-base) var(--ease-out);
}
.card-article:hover { transform: translateY(-4px); border-color: var(--iw-red); }
.card-article .card-kicker {
  font-size: 0.72rem; font-weight: var(--fw-extrabold);
  text-transform: uppercase; letter-spacing: 0.08em;
  color: var(--iw-red-deep); margin-bottom: 12px;
}
.card-article h3 { font-size: 1.24rem; color: var(--iw-ink); margin: 0 0 12px; }
.card-article h3 a { color: var(--iw-ink); }
.card-article h3 a:hover { color: var(--iw-red-deep); text-decoration: none; }
.card-article p { color: var(--iw-gray-700); font-weight: var(--fw-medium); font-size: 0.96rem; margin: 0 0 20px; }
.card-article .card-read {
  margin-top: auto; font-weight: var(--fw-extrabold);
  text-transform: uppercase; font-size: 0.8rem; letter-spacing: var(--ls-button);
}

@media (max-width: 560px) {
  .toc { padding: 18px 20px; }
}