/* Text pages (views/partials/article.phtml): header, sticky table of contents on the left, text column */

.article { display: grid; grid-template-columns: minmax(0, 1fr); gap: 0 4.8rem; padding: 3.2rem 0 1.6rem; }
.article.has-toc { grid-template-columns: 25.6rem minmax(0, 72rem); justify-content: center; }
.article-head { grid-column: 1 / -1; max-width: 72rem; }
.article.has-toc .article-head { grid-column: 2; }
.article:not(.has-toc) .article-head, .article:not(.has-toc) .article-body { width: 100%; max-width: 72rem; margin-inline: auto; }
.article-head h1 { margin: 0; font-size: clamp(2.56rem, 4.5vw, 3.84rem); font-weight: 800; line-height: 1.15; letter-spacing: -.025em; }
.article-head .updated { margin: .8rem 0 0; color: var(--muted); font-size: 1.36rem; }
.legal-tabs { display: flex; flex-wrap: wrap; gap: .64rem; margin: 2.4rem 0 0; }
.legal-tabs a, .legal-tabs a:visited { padding: .64rem 1.36rem; border: 1px solid var(--line); border-radius: 99px; background: var(--surface); color: var(--muted); font-size: 1.4rem; text-decoration: none; transition: border-color .2s, color .2s; }
.legal-tabs a:hover { border-color: var(--accent); color: var(--ink); text-decoration: none; }
.legal-tabs a[aria-current="page"] { border-color: var(--accent); background: var(--accent); color: var(--on-accent); font-weight: 600; }
/* Translated legal page: the French version prevails */
.translation-notice { margin: 2.4rem 0 0; padding: 1.12rem 1.6rem; font-size: 1.44rem; line-height: 1.5; }
.article-toc { grid-column: 1; grid-row: 1 / span 2; align-self: start; position: sticky; top: 8rem; margin-top: 3.2rem; padding: 1.6rem 0; max-height: calc(100vh - 9.6rem); overflow-y: auto; }
.article-toc p { margin: 0 0 .8rem; color: var(--muted); font-size: 1.12rem; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; }
.article-toc ol { margin: 0; padding: 0; list-style: none; border-left: 2px solid var(--line); }
.article-toc li { margin: 0; }
.article-toc a, .article-toc a:visited { display: block; margin-left: -2px; padding: .48rem 0 .48rem 1.28rem; border-left: 2px solid transparent; color: var(--muted); font-size: 1.36rem; line-height: 1.35; text-decoration: none; }
.article-toc a:hover { border-left-color: var(--accent); color: var(--ink); text-decoration: none; }
.article-body { grid-column: 1 / -1; margin-top: 3.2rem; color: color-mix(in srgb, var(--ink) 88%, var(--muted)); font-size: 1.6rem; line-height: 1.7; }
.article.has-toc .article-body { grid-column: 2; }
.article-body h2 { display: flex; align-items: center; gap: 1.12rem; margin: 4rem 0 1.28rem; padding-top: .8rem; color: var(--ink); font-size: 2.08rem; font-weight: 700; line-height: 1.3; letter-spacing: -.01em; scroll-margin-top: 8rem; }
.article-body h2::before { content: ""; flex: none; width: .48rem; height: 2.24rem; border-radius: 99px; background: var(--accent); }
.article-body > h2:first-child { margin-top: 0; }
.article-body h3 { margin: 2.4rem 0 .8rem; color: var(--ink); font-size: 1.68rem; font-weight: 700; }
.article-body p { margin: 0 0 1.28rem; }
.article-body strong { color: var(--ink); }
.article-body ul, .article-body ol { margin: 0 0 1.6rem; padding-left: 2.4rem; }
.article-body li { margin: 0 0 .64rem; }
.article-body ul > li::marker { color: var(--accent-ink); }
.article-body a, .article-body a:visited { color: var(--accent-ink); text-decoration: underline; text-underline-offset: .24rem; }
.article-body table { width: 100%; margin: 0 0 1.6rem; border-collapse: collapse; font-size: 1.44rem; }
.article-body th, .article-body td { padding: .8rem 1.12rem; border: 1px solid var(--line); text-align: left; vertical-align: top; }
.article-body th { background: var(--surface2); color: var(--ink); }
@media (max-width: 63.99rem) {
  .article.has-toc { grid-template-columns: minmax(0, 1fr); }
  .article.has-toc .article-head, .article.has-toc .article-body { grid-column: 1; }
  .article-toc { display: none; }
}

/* Print: without table of contents or tabs, text tightened and justified */
@media print {
  .article-toc, .legal-tabs { display: none; }
  .article { padding-top: 1.6rem; }
  .article.has-toc { grid-template-columns: 1fr; }
  .article.has-toc .article-body, .article.has-toc .article-head { grid-column: 1; }
  .article-head h1 { font-size: 2.8rem; }
  .article-body { margin-top: 1.6rem; font-size: 1.32rem; line-height: 1.5; }
  .article-body h2 { margin: 2.4rem 0 .8rem; padding-top: 0; font-size: 1.68rem; break-after: avoid; }
  .article-body h2::before { height: 1.84rem; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  .article-body h3 { margin: 1.6rem 0 .48rem; font-size: 1.44rem; break-after: avoid; }
  .article-body p { margin-bottom: .8rem; }
  /* Justified, with hyphenation (page language) to avoid large gaps between words */
  .article-body p, .article-body li { text-align: justify; hyphens: auto; }
}