/* css/reseau.css
   Styles propres à reseau.html (Vie du réseau).
   Chargée APRÈS styles.css. Réutiliser d'abord les composants partagés de styles.css
   (section « Composants partagés ») et les tokens de :root. Aucune nouvelle couleur.
*/

/* Sommaire de la page (sous l'intro) */
.page-toc { margin-top: 32px; }
.page-toc ul { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 10px 24px; }
.page-toc a { font-weight: 700; }

/* Phrase d'amorce avant un composant */
.reseau-lede { margin: 56px 0 20px; font-size: 1.15rem; color: var(--ink-soft); max-width: 38em; }

/* Note sous les pastilles de territoire */
.reseau-note { margin: 12px 0 0; }

/* Espacements entre composants empilés */
.reseau-gap { margin-top: 56px; }
.reseau-resources { margin-top: 56px; }
.reseau-quote { margin-top: 56px; }
.reseau-callout { margin-top: 56px; }
.reseau-help { margin: 48px 0 0; color: var(--ink-soft); max-width: 46em; }
.reseau-help a { color: var(--ink); font-weight: 700; white-space: nowrap; }

/* Liens vers les réseaux sociaux dans les cartes */
.social-links { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.social-links a {
  display: inline-block; padding: 6px 12px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--birch); color: var(--ink); font-weight: 700; font-size: .95rem; text-decoration: none;
}
.social-links a:hover { border-color: var(--ink); text-decoration: underline; }

/* Petite galerie d'œuvres dans une carte (Timbre AO) */
.artwork-strip { list-style: none; margin: 4px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.artwork-strip img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: 2px; }

/* Listes d'avantages dans les cartes */
.card .plain-list { margin: 0; }

/* Les blocs balados : le split s'aligne en bas */
#balados .split { align-items: start; }
#balados .split .section-intro { margin-bottom: 0; }
#balados .callout.balado-ao { margin-top: 16px; }

@media (max-width: 760px) {
  .reseau-lede, .reseau-gap, .reseau-resources, .reseau-quote, .reseau-callout { margin-top: 40px; }
}