/* =========================================================
   legal.css — Shared styling for /confidentialite and /cgv
   Token-based (no hardcoded color), uses theme.css v2 tokens.
   ========================================================= */
body {
  background: var(--bg);
  color: var(--fg-body);
  font-family: var(--font-body);
  margin: 0;
  padding: var(--s-9) var(--gutter) var(--s-12);
  line-height: var(--lh-relax);
}

.legal {
  max-width: var(--content-narrow);
  margin: 0 auto;
}

.legal__kicker {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--scarlet-500);
  margin-bottom: var(--s-3);
}

.legal__title {
  font-family: var(--font-display);
  font-style: italic; font-weight: var(--fw-black);
  font-size: var(--t-2xl);
  color: var(--fg);
  letter-spacing: var(--tracking-display);
  line-height: var(--lh-snug);
  margin: 0 0 var(--s-3);
}

.legal__meta {
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-loose);
  color: var(--fg-dim);
  text-transform: uppercase;
  margin: 0 0 var(--s-9);
  padding-bottom: var(--s-5);
  border-bottom: 1px solid var(--border);
}

.legal h2 {
  font-family: var(--font-display);
  font-style: italic; font-weight: var(--fw-black);
  font-size: var(--t-lg);
  color: var(--fg);
  margin: var(--s-9) 0 var(--s-4);
  letter-spacing: var(--tracking-tight);
  scroll-margin-top: var(--s-7);
}
.legal h2::before {
  content: attr(data-num);
  display: inline-block;
  font-family: var(--font-mono);
  font-style: normal; font-weight: var(--fw-bold);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-kicker);
  color: var(--scarlet-500);
  margin-right: var(--s-3);
  vertical-align: middle;
}

.legal h3 {
  font-family: var(--font-mono);
  font-size: var(--t-sm);
  font-weight: var(--fw-bold);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--fg);
  margin: var(--s-6) 0 var(--s-3);
}

.legal p, .legal li {
  font-size: var(--t-base);
  color: var(--fg-body);
  margin: 0 0 var(--s-4);
}

.legal ul {
  margin: 0 0 var(--s-5);
  padding-left: var(--s-5);
  list-style: square;
}

.legal li { margin-bottom: var(--s-2); }

.legal a {
  color: var(--scarlet-500);
  text-decoration: underline;
  text-underline-offset: 2px;
  transition: color var(--d-fast) var(--ease-out-quart);
}
.legal a:hover { color: var(--scarlet-400); }
.legal a:focus-visible { outline: 2px solid var(--scarlet-500); outline-offset: 2px; }

.legal code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--bg-card);
  padding: 1px 5px;
  border: 1px solid var(--border);
  color: var(--fg);
}

.legal__nav {
  display: flex;
  gap: var(--s-5);
  flex-wrap: wrap;
  margin: var(--s-7) 0 var(--s-9);
  padding: var(--s-4);
  background: var(--bg-card);
  border: 1px solid var(--border);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
}
.legal__nav a { color: var(--fg-muted); text-decoration: none; }
.legal__nav a:hover { color: var(--scarlet-500); }
.legal__nav .sep { color: var(--scarlet-700); opacity: 0.5; }

.legal__back {
  display: inline-block;
  margin-top: var(--s-11);
  padding: var(--s-3) var(--s-5);
  border: 1px solid var(--border-strong);
  color: var(--fg);
  font-family: var(--font-mono);
  font-size: var(--t-xs);
  letter-spacing: var(--tracking-mono);
  text-transform: uppercase;
  text-decoration: none;
  transition: border-color var(--d-fast) var(--ease-out-quart);
}
.legal__back:hover { border-color: var(--scarlet-500); }

.legal__notice {
  padding: var(--s-4) var(--s-5);
  background: rgba(155, 28, 32, 0.06);
  border-left: 3px solid var(--scarlet-700);
  margin: var(--s-5) 0;
  font-size: var(--t-sm);
}