/* legal-cgv.css -- excerpt from views/legal/cgv.ejs */
  .legal-wrap { max-width: 820px; margin: 0 auto; padding: 2.2rem 1.25rem 4rem }
  .legal-wrap h1 { font-size: 1.8rem; color: var(--navy); margin: 0 0 0.3rem }
  .legal-maj { color: var(--slate); font-size: 0.85rem; margin: 0 0 1.4rem }
  .legal-wrap h2 { font-size: 1.1rem; color: var(--navy); margin: 1.9rem 0 0.5rem; border-top: 1px solid var(--border); padding-top: 1.2rem }
  .legal-wrap h3 { font-size: 0.96rem; color: var(--navy); margin: 1rem 0 0.3rem }
  .legal-wrap p, .legal-wrap li { font-size: 0.92rem; line-height: 1.65 }
  .legal-wrap ul { padding-left: 1.25rem }
  .legal-note { background: var(--off, #f4f6f9); border-left: 3px solid var(--accent); padding: 0.7rem 0.9rem; border-radius: 6px; font-size: 0.88rem; margin: 0.8rem 0 }
  .legal-nav { display: flex; gap: 1.2rem; flex-wrap: wrap; margin-top: 2.6rem; padding-top: 1.2rem; border-top: 1px solid var(--border); font-size: 0.86rem }

/* ─── Roddier Signature (additive): premium finish for legal pages ─────────
 * Soft brand halo behind the title + gradient rule under the H1 + glass-style
 * note panel. Uses the tokens (--brand-sig-halo, --brand-grad,
 * accent, --paper, --border, --lg-shadow). Dark mode handled by token switching.
 * ────────────────────────────────────────────────────────────────────────── */
.legal-wrap { position: relative; isolation: isolate }
.legal-wrap::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  left: 50%; top: -36px; transform: translateX(-50%);
  width: min(680px, 92%); height: 240px;
  background: radial-gradient(60% 80% at 50% 0%, var(--brand-sig-halo, rgba(94,127,168,0.22)) 0%, transparent 70%);
}
.legal-wrap h1 { letter-spacing: -0.02em; font-weight: 800 }
.legal-wrap h1::after {
  content: ""; display: block; width: 56px; height: 4px; margin-top: 0.6rem; border-radius: 4px;
  background: var(--brand-grad, linear-gradient(120deg, #0f2544, #3f7cae));
}
.legal-note {
  background: color-mix(in srgb, var(--accent) 6%, var(--paper));
  border: 1px solid var(--border); border-left: 3px solid var(--accent);
  box-shadow: var(--lg-shadow, 0 8px 30px rgba(15,37,68,0.10));
}
/* The scope box contains several paragraphs: they keep the font size of
   the box, not the document body, and the last one leaves no empty space. */
.legal-wrap .legal-note p { font-size: 0.88rem; margin: 0 0 0.55rem }
.legal-wrap .legal-note p:last-child { margin-bottom: 0 }
/* Cross-references between documents are the contract's hinge: they are how
   readers find the terms that actually apply to them. A cross-reference
   that does not look like a link is useless. */
.legal-wrap p a, .legal-wrap li a { color: var(--accent); text-decoration: underline; text-underline-offset: 2px }
.legal-nav a { color: var(--accent); text-decoration: none; font-weight: 600 }
.legal-nav a:hover { text-decoration: underline }

/* Contract pricing table (article 4). The table must remain readable on
   a phone: it scrolls on its own, and the page never shifts sideways. */
.legal-grille { width: 100%; border-collapse: collapse; margin: 0.9rem 0 1.1rem; font-size: 0.92rem }
.legal-grille th, .legal-grille td { padding: 0.5rem 0.7rem; border-bottom: 1px solid var(--border); text-align: left }
.legal-grille thead th { color: var(--slate); font-weight: 600; font-size: 0.82rem; text-transform: uppercase; letter-spacing: 0.04em; border-bottom: 2px solid var(--border) }
.legal-grille tbody th { font-weight: 600; color: var(--navy) }
.legal-grille td { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; font-weight: 600 }