/* legal.css — Rodéo Ste-Perpétue legal pages (privacy, terms of sale, refunds).
   Palette "La nuit de l'arène". Every value goes through a --legal-* variable:
   site tokens (tokens.css) win when they exist, the fallbacks below are the
   approved mockup values. No external font: the page must load and print anywhere. */
:root {
  --legal-bg: var(--nuit, #0d0908);
  --legal-surface: var(--carte, #1d1615);
  --legal-surface-2: var(--carte-2, #271e1c);
  --legal-line: var(--trait, #3a2e2b);
  --legal-text: var(--creme, #f6eee6);
  --legal-muted: var(--sable, #cdb9a6);
  --legal-accent: var(--rouge, #e3120b);
  --legal-accent-dark: var(--bordeaux, #3d0503);
  --legal-todo-bg: var(--b-vip, #d8b04a);
  --legal-todo-text: var(--nuit, #0d0908);
  --legal-font: var(--f-texte, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif);
  --legal-font-display: var(--f-display, "Arial Narrow", "Helvetica Neue", Impact, sans-serif);
  --legal-radius: var(--rayon, 4px);
  --legal-max: 52rem;
  --legal-gutter: max(16px, env(safe-area-inset-left, 0px));
  --legal-step--1: var(--step--1, clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem));
  --legal-step-0: var(--step-0, clamp(1rem, 0.913rem + 0.4348vw, 1.25rem));
  --legal-step-1: var(--step-1, clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem));
  --legal-step-3: var(--step-3, clamp(1.728rem, 1.4799rem + 1.2406vw, 2.4414rem));
  --legal-step-5: var(--step-5, clamp(2.4883rem, 2.027rem + 2.3067vw, 3.8147rem));
  --legal-space-2xs: var(--space-2xs, clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem));
  --legal-space-xs: var(--space-xs, clamp(0.75rem, 0.6848rem + 0.3261vw, 0.9375rem));
  --legal-space-s: var(--space-s, clamp(1rem, 0.913rem + 0.4348vw, 1.25rem));
  --legal-space-m: var(--space-m, clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem));
  --legal-space-l: var(--space-l, clamp(2rem, 1.8261rem + 0.8696vw, 2.5rem));
  --legal-space-xl: var(--space-xl, clamp(3rem, 2.7391rem + 1.3043vw, 3.75rem));
  --legal-border: 1px solid var(--legal-line);
  --legal-rule: 3px solid var(--legal-accent);
  --legal-line-height: 1.65;
  --legal-print-bg: #ffffff;
  --legal-print-text: #000000;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--legal-bg);
  color: var(--legal-text);
  font-family: var(--legal-font);
  font-size: var(--legal-step-0);
  line-height: var(--legal-line-height);
}

a {
  color: var(--legal-text);
  text-decoration-color: var(--legal-accent);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}
a:hover, a:focus-visible { color: var(--legal-muted); }
a:focus-visible, button:focus-visible { outline: 2px solid var(--legal-accent); outline-offset: 3px; }

.legal-shell {
  width: min(var(--legal-max), calc(100% - 2 * var(--legal-gutter)));
  margin: 0 auto;
  padding: var(--legal-space-m) 0 var(--legal-space-xl);
}

.legal-nav {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--legal-space-s);
  padding-bottom: var(--legal-space-m);
}

.legal-brand {
  color: var(--legal-text);
  font-family: var(--legal-font-display);
  font-size: var(--legal-step-1);
  font-weight: 800;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  text-decoration: none;
}

.legal-back { font-size: var(--legal-step--1); color: var(--legal-muted); }

.legal-hero {
  padding: var(--legal-space-m) 0;
  border-bottom: var(--legal-rule);
}

.legal-kicker {
  margin: 0;
  color: var(--legal-muted);
  font-size: var(--legal-step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}

h1, h2, h3 { line-height: 1.15; }

h1 {
  margin: var(--legal-space-2xs) 0 var(--legal-space-s);
  font-family: var(--legal-font-display);
  font-size: var(--legal-step-5);
  text-transform: uppercase;
}

h2 {
  margin: var(--legal-space-xl) 0 var(--legal-space-xs);
  padding-top: var(--legal-space-2xs);
  border-top: var(--legal-border);
  font-family: var(--legal-font-display);
  font-size: var(--legal-step-3);
  text-transform: uppercase;
}

h3 { margin: var(--legal-space-m) 0 var(--legal-space-2xs); font-size: var(--legal-step-1); }

p { margin: 0 0 var(--legal-space-xs); }
ul, ol { margin: 0 0 var(--legal-space-s); padding-left: var(--legal-space-m); }
li { margin-bottom: var(--legal-space-2xs); }

.legal-intro { margin: 0; color: var(--legal-muted); max-width: 44rem; }

.legal-meta {
  margin: var(--legal-space-xs) 0 0;
  color: var(--legal-muted);
  font-size: var(--legal-step--1);
}

.legal-card {
  margin: var(--legal-space-m) 0;
  padding: var(--legal-space-s);
  background: var(--legal-surface);
  border: var(--legal-border);
  border-radius: var(--legal-radius);
}
.legal-card p:last-child, .legal-card ul:last-child { margin-bottom: 0; }

.legal-card--notice {
  background: var(--legal-accent-dark);
  border-color: var(--legal-accent);
}

.legal-contact { display: grid; gap: var(--legal-space-2xs); margin: 0; }
.legal-contact div { display: grid; gap: 0; }
.legal-contact dt { color: var(--legal-muted); font-size: var(--legal-step--1); }
.legal-contact dd { margin: 0; overflow-wrap: anywhere; }

.legal-toc ol { margin: 0; columns: 2 16rem; }
.legal-toc li { break-inside: avoid; }

.legal-table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; margin: var(--legal-space-s) 0; }
table { width: 100%; border-collapse: collapse; font-size: var(--legal-step--1); }
th, td { text-align: left; vertical-align: top; padding: var(--legal-space-2xs) var(--legal-space-xs); border-bottom: var(--legal-border); }
th { background: var(--legal-surface-2); font-weight: 700; }

/* Unknown seller data: visible until the Rodéo provides it (filled by production-legal.js). */
mark.legal-todo {
  background: var(--legal-todo-bg);
  color: var(--legal-todo-text);
  padding: 0 0.25em;
  border-radius: var(--legal-radius);
  font-weight: 700;
}

/* A duration or rule NEXORYA proposes; the Rodéo must validate it before launch. */
.legal-proposal {
  display: inline-block;
  margin-left: 0.25em;
  padding: 0 0.4em;
  border: 1px dashed var(--legal-todo-bg);
  border-radius: var(--legal-radius);
  color: var(--legal-todo-bg);
  font-size: var(--legal-step--1);
  font-weight: 700;
  white-space: nowrap;
}

.legal-foot {
  margin-top: var(--legal-space-xl);
  padding-top: var(--legal-space-s);
  border-top: var(--legal-border);
  color: var(--legal-muted);
  font-size: var(--legal-step--1);
}

@media print {
  body { background: var(--legal-print-bg); color: var(--legal-print-text); }
  a { color: var(--legal-print-text); }
  .legal-nav, .legal-back { display: none; }
  .legal-card, .legal-card--notice, th { background: var(--legal-print-bg); }
  h2 { break-after: avoid; }
  table, .legal-card { break-inside: avoid; }
}