
:root {
  --toc-indent: var(--space-s);
  --region-padding-block-end:var(--space-xl)
}

/* ── Article wrapper (sidebar layout) ────────────────────────
   :has(> .sidebar) → display:flex depuis style.css
   On ajoute ici uniquement ce qui est propre à l'article.
   ──────────────────────────────────────────────────────────── */

.article-wrapper > .sidebar--left {
  order: -1;
}

.article-wrapper > .sidebar--right {
  order: 1;
}

/* Sidebar sticky au scroll */
.article-wrapper > .sidebar {
  align-self: start;
  position: sticky;
  top: var(--space-m);
  max-height: calc(100dvh - var(--space-m) * 2);
  overflow-y: auto;
}

/* ── Hero — première colonne de la master-grid ────────────── */




.hero__meta {
  font-size: var(--text-sm);
}

.hero__meta .meta-label {
  font-style: italic;
}

.hero__meta.cluster { --cluster-column-gap: 15px; }

.hero__meta ul {
  display: inline;
  list-style: none;
  padding: 0;
  margin: 0;
}

.hero__meta ul li { display: inline; }

.hero__meta ul li:not(:last-child)::after {
  content: ", ";
}

.article-badges {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2xs);
}

/* text-decoration gérée dans badge.css via a.badge */

/* ── Contexte sidebar : réduire les débordements popout ──────
   En mode sidebar, le contenu est déjà contraint. Les valeurs
   vw du master-grid sont calibrées pour la pleine largeur ;
   on les réduit ici pour que la colonne right ne soit plus
   collée au bord droit.
   ──────────────────────────────────────────────────────────── */

.article-wrapper > .article {
  --popout-extra-distance: clamp(10px, 2vw, 50px);
  --gap: clamp(16px, 3vw, 60px);
  --one-col-max-width: clamp(600px, 80vw, 950px);
}

/* ── Alignement vertical des colonnes ────────────────────── */

.article .column[data-valign="start"]  { align-self: start; }
.article .column[data-valign="center"] { align-self: center; }
.article .column[data-valign="end"]    { align-self: end; }

/* ── Article (corps) ──────────────────────────────────────── */

.article .column img {
  border-radius: var(--radius-l);
}

.article .prose a {
  color: inherit;
  text-decoration-color: var(--article-text-decoration-color, var(--color-secondary));
}

/* ── Block quote ──────────────────────────────────────────── */

blockquote, .block-quote {
  margin-inline: 0;
  padding-inline-start: var(--space-m);
  border-inline-start: 3px solid currentColor;
  font-style: italic;
  opacity: 0.9;
}

blockquote,  .block-quote__text {
  margin-block: 0;
  line-height: var(--leading-standard, 1.5);
}

.block-quote__citation {
  display: block;
  margin-block-start: var(--space-xs);
  font-size: var(--text-sm);
  font-style: normal;
  opacity: 0.65;
}

.block-quote__citation::before {
  content: "— ";
}

/* ── TOC (sommaire) ───────────────────────────────────────── */

/* Indentation par niveau */
.toc ul li[data-level="1"] { padding-left: 0; }
.toc ul li[data-level="2"] { padding-left: calc(var(--toc-indent) * 1); }
.toc ul li[data-level="3"] { padding-left: calc(var(--toc-indent) * 2); }
.toc ul li[data-level="4"] { padding-left: calc(var(--toc-indent) * 3); }
.toc ul li[data-level="5"] { padding-left: calc(var(--toc-indent) * 4); }
.toc ul li[data-level="6"] { padding-left: calc(var(--toc-indent) * 5); }
