/* Boostili content & legal pages — additive layer.
   Loaded only by /a-propos/, /faq/, /conditions-utilisation/ and
   /politique-de-confidentialite/. Uses the tokens already published in
   tokens.css so it inherits the live palette, spacing and motion.
   Nothing here overrides an existing rule. */

.page-hero {
  padding: calc(var(--space-3xl) + 2rem) var(--space-md) var(--space-2xl);
  background: var(--color-paper-2);
  border-bottom: var(--rule-thin) solid var(--color-rule);
}

.page-hero > div {
  width: min(72rem, 100%);
  margin-inline: auto;
}

.page-hero p.kicker {
  margin: 0 0 var(--space-xs);
  color: var(--color-accent-2);
  font-weight: 900;
  font-size: var(--text-sm);
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.page-hero h1 {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 950;
  font-size: var(--text-2xl);
  line-height: 0.98;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.page-hero .lede {
  margin: var(--space-sm) 0 0;
  max-width: 60ch;
  color: var(--color-ink-2);
  font-size: var(--text-lg);
  line-height: 1.55;
}

/* Long-form prose: legal clauses and article text. */
.prose {
  width: min(72rem, 100%);
  margin-inline: auto;
  padding-inline: var(--space-md);
}

.prose-narrow {
  max-width: 68ch;
}

.prose h2 {
  margin: var(--space-xl) 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: 950;
  font-size: var(--text-xl);
  line-height: 1.05;
  letter-spacing: -0.01em;
}

.prose h3 {
  margin: var(--space-lg) 0 var(--space-2xs);
  font-size: var(--text-lg);
  font-weight: 800;
}

.prose p,
.prose li {
  color: var(--color-ink-2);
  font-size: var(--text-md);
  line-height: 1.7;
}

.prose p { margin: 0 0 var(--space-sm); }
.prose ul, .prose ol { margin: 0 0 var(--space-sm); padding-inline-start: 1.25rem; }
.prose li { margin-bottom: var(--space-2xs); }
.prose strong { color: var(--color-ink); font-weight: 800; }

.prose a {
  color: var(--color-cobalt);
  text-underline-offset: 0.2em;
}

/* Figures that carry a real number and its own caveat. */
.figure-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
  gap: var(--space-sm);
  margin: var(--space-lg) 0;
  padding: 0;
  list-style: none;
}

.figure-row li {
  padding: var(--space-sm);
  background: var(--color-white);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
}

.figure-row b {
  display: block;
  font-family: var(--font-display);
  font-size: var(--text-xl);
  font-weight: 950;
  line-height: 1;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}

.figure-row span {
  display: block;
  margin-top: var(--space-3xs);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.45;
}

/* Coverage table — every volume claim next to its own limit. */
.coverage-table-wrap {
  overflow-x: auto;
  margin: var(--space-lg) 0;
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
}

.coverage-table {
  width: 100%;
  border-collapse: collapse;
  background: var(--color-white);
  font-size: var(--text-sm);
}

.coverage-table caption {
  padding: var(--space-sm);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  text-align: start;
}

.coverage-table th,
.coverage-table td {
  padding: var(--space-xs) var(--space-sm);
  border-bottom: var(--rule-thin) solid var(--color-rule);
  text-align: start;
}

.coverage-table thead th {
  background: var(--color-paper-2);
  font-size: var(--text-xs);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.coverage-table td.num {
  text-align: end;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.coverage-table tbody tr:last-child th,
.coverage-table tbody tr:last-child td {
  border-bottom: 0;
}

.coverage-table tfoot th,
.coverage-table tfoot td {
  background: var(--color-paper-2);
  font-weight: 900;
  border-bottom: 0;
}

/* A stated limit, never styled as a warning. */
.caveat {
  margin: var(--space-lg) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-inline-start: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-card);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
  line-height: 1.6;
}

.caveat strong { color: var(--color-ink); }

.updated-note {
  margin: 0 0 var(--space-lg);
  color: var(--color-ink-2);
  font-size: var(--text-sm);
}

.toc {
  margin: var(--space-lg) 0;
  padding: var(--space-sm) var(--space-md);
  background: var(--color-paper-2);
  border-radius: var(--radius-card);
}

.toc ol { margin: 0; padding-inline-start: 1.2rem; }
.toc li { margin-bottom: var(--space-3xs); font-size: var(--text-sm); }

@media (max-width: 640px) {
  .page-hero { padding-top: calc(var(--space-2xl) + 2rem); }
  .prose { padding-inline: var(--space-sm); }
}