/* Legal pages — terms, privacy, refunds.
   These are read by someone who is worried, not by someone browsing. So: one
   narrow column, generous line height, no decoration competing with the text,
   and every heading anchorable so a support reply can link to the exact clause.
   Built on the same tokens as the rest of the site — a legal page that looks
   like it came from another website is the first thing that reads as a scam. */

.legal { max-width: 74ch; padding: 34px 0 90px; }
.legal .lede { color: var(--fg-dim); font-size: 15.5px; line-height: 1.65; }
.legal .stamp {
  font-family: var(--mono); font-size: 12px; color: var(--fg-faint);
  border-top: 1px solid var(--line-soft); padding-top: 10px; margin-top: 6px;
}
.legal h2 {
  margin-top: 44px; font-size: 18px; scroll-margin-top: 84px;
  padding-bottom: 8px; border-bottom: 1px solid var(--line-soft);
}
.legal h2 .n { font-family: var(--mono); font-size: 13px; color: var(--accent); margin-right: 10px; }
.legal h3 { margin-top: 24px; font-size: 15px; }
.legal p, .legal li { line-height: 1.68; color: var(--fg-dim); }
.legal strong { color: var(--fg); font-weight: 600; }
.legal ul { padding-left: 20px; }
.legal li { margin: 5px 0; }
.legal a { color: var(--accent); }

/* A clause that costs money if it is skimmed. Used sparingly — three per page
   and it stops meaning anything. */
.legal .key {
  border: 1px solid var(--line-soft); border-left: 2px solid var(--accent);
  background: var(--bg-1); padding: 13px 16px; border-radius: var(--radius); margin: 18px 0;
}
.legal .key p:last-child { margin-bottom: 0; }

.legal table { width: 100%; border-collapse: collapse; margin: 16px 0; font-size: 14px; }
.legal th, .legal td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.legal th { color: var(--fg); font-weight: 600; font-size: 13px; }
.legal td { color: var(--fg-dim); }
.legal td:first-child { color: var(--fg); }
/* The verdict column carries the answer people came for ("Yes, in full"), so it
   must not wrap mid-answer while the description column has room to spare. */
.legal td:nth-child(2) { white-space: nowrap; }
@media (max-width: 640px) {
  .legal table, .legal td:nth-child(2) { white-space: normal; }
  .legal th, .legal td { padding: 7px 6px; font-size: 13px; }
}

/* Cross-links between the three documents, so nobody has to hunt in the footer. */
.legal-nav { display: flex; flex-wrap: wrap; gap: 8px; margin: 22px 0 4px; }
.legal-nav a {
  font-size: 13px; padding: 5px 12px; border: 1px solid var(--line-soft);
  border-radius: 999px; color: var(--fg-dim); transition: color 180ms, border-color 180ms;
}
.legal-nav a:hover { color: var(--accent); border-color: var(--accent); }
.legal-nav a.on { color: var(--accent); border-color: var(--accent); }

/* ── Dense mode — /legal.html only ───────────────────────────────────────────
   This page used to serve the publisher's identity as a <dl class="kv">: a
   labelled key/value grid, which is the single most machine-readable shape a
   home address can take. A scraper does not need to understand the page, only
   to read the <dt> next to the <dd>. So the grid is gone from /legal.html and
   the statutory facts are one continuous justified block instead.
   What this buys, honestly: it stops label-anchored harvesting and it stops the
   annoyed customer who clicks "Legal" from finding a street in two seconds. It
   does NOT stop a headless browser, and the same address is public on
   annuaire-entreprises.data.gouv.fr regardless. A speed bump, not a wall — the
   fix is a domiciliation address, and when that exists this whole block can go
   back to a plain readable table.
   Still legible on purpose: 12.6px on a 96ch measure is small, not hidden.
   LCEN requires the notice to be "facile d'accès"; unreadable type is how that
   requirement is actually breached, and it would be breached for nothing. */
.legal.dense { max-width: 96ch; }
.legal.dense .contact { font-size: 14.5px; line-height: 1.62; color: var(--fg-dim); margin-bottom: 26px; }
.legal.dense .statutory { border-top: 1px solid var(--line-soft); padding-top: 18px; }
.legal.dense .statutory p {
  font-size: 12.6px; line-height: 1.52; color: var(--fg-faint);
  text-align: justify; hyphens: auto; margin: 0 0 8px;
}
.legal.dense .statutory b, .legal.dense .statutory strong { color: var(--fg-dim); font-weight: 600; }
.legal.dense .statutory a { color: var(--fg-dim); text-decoration: underline; text-underline-offset: 2px; }
/* Justified 12.6px on a phone gives rivers and unreadable hyphen soup — the
   narrow column already does the compressing there, so drop the justification. */
@media (max-width: 640px) {
  .legal.dense .statutory p { text-align: left; hyphens: manual; font-size: 13px; line-height: 1.55; }
}

/* ── The identity table ──────────────────────────────────────────────────────
   No longer used by /legal.html (see above). Kept because it is the shape to
   come back to the day a commercial domiciliation address replaces the home
   one: a SIRET buried in prose is uncopyable, and hiding numbers that are not
   sensitive is pure cost. */
.legal .kv {
  display: grid; grid-template-columns: minmax(140px, auto) 1fr;
  gap: 1px; margin: 18px 0 26px; background: var(--line-soft);
  border: 1px solid var(--line-soft);
}
.legal .kv dt, .legal .kv dd { margin: 0; padding: 9px 13px; background: var(--bg-1); }
.legal .kv dt {
  font: 500 10.5px/1.5 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint);
}
.legal .kv dd { font-size: 14px; color: var(--fg); }
@media (max-width: 560px) {
  .legal .kv { grid-template-columns: 1fr; }
  .legal .kv dt { padding-bottom: 0; background: var(--bg-1); }
}

/* ── The identity fold — /legal.html only ────────────────────────────────────
   The publisher paragraph sits last in the statutory block and stays rolled up
   until the reader points at it (mouse), tabs to it (keyboard) or taps it
   (touch — the cue is focusable, so a tap opens it). Everything else on the
   page is legible at a glance; this one thing costs a gesture.
   What it does NOT do is hide anything from a machine: the sentence is in the
   HTML byte for byte, and `max-height`/`opacity` are pixels, not bytes. It is
   also deliberately NOT display:none — a screen reader, a printout and a
   text-only client all still get the statutory identity with no pointing device
   at all, which is what "facile d'accès" under LCEN actually means. */
.legal.dense .ident {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px solid var(--line-soft);
}
.legal.dense .ident-cue {
  display: inline-flex; align-items: center; gap: 9px;
  font: 500 10.5px/1.5 var(--display); letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--fg-faint); cursor: help; user-select: none;
  transition: color 220ms ease, letter-spacing 420ms cubic-bezier(.22,.61,.36,1);
}
.legal.dense .ident-cue:focus-visible { outline: 1px solid var(--accent); outline-offset: 4px; }
/* The caret is the only moving part of the closed state: it points down while
   there is something to open, and lies flat once the block is out. */
.legal.dense .ident-mark {
  width: 7px; height: 7px; border-right: 1px solid currentColor; border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform 420ms cubic-bezier(.22,.61,.36,1), opacity 220ms ease;
}
.legal.dense .ident:hover .ident-cue,
.legal.dense .ident:focus-within .ident-cue { color: var(--fg-dim); letter-spacing: 0.14em; }
.legal.dense .ident:hover .ident-mark,
.legal.dense .ident:focus-within .ident-mark { transform: translateY(1px) rotate(225deg); opacity: 0.5; }

/* The roll itself is a grid row going 0fr → 1fr, not a max-height guess: the
   paragraph is 8 lines on a desktop column and 25 on a phone, and any fixed
   max-height either clips the phone or makes the desktop close half a second
   late. 0fr → 1fr animates the element's own height, exactly, on both. */
.legal.dense .ident-fold {
  display: grid; grid-template-rows: 0fr;
  transition: grid-template-rows 560ms cubic-bezier(.22,.61,.36,1);
}
/* Treatment 5 (19/08/2026): .ident-body is a <canvas>, not a <p>. These are
   the properties /js/ident.js READS back with getComputedStyle to paint with —
   family, size, leading and the faint ink — so the drawing stays governed by
   this stylesheet and by the theme, exactly like the prose above it. Changing a
   value here changes the picture; there is no font hard-coded in the JS.
   The height is set by the script once the text is wrapped: a canvas has no
   intrinsic height, and guessing one would clip the phone or pad the desktop. */
.legal.dense .statutory canvas.ident-body {
  display: block; width: 100%; height: 0;
  font-size: 12.6px; line-height: 1.52; color: var(--fg-faint);
}
@media (max-width: 640px) {
  .legal.dense .statutory canvas.ident-body { font-size: 13px; line-height: 1.55; }
}

/* Collapsed: no height, no ink, and blurred — so the moment where the row is
   still opening never shows a readable street. */
.legal.dense .ident-body {
  min-height: 0; overflow: hidden;
  opacity: 0; filter: blur(4px); transform: translateY(-5px);
  margin: 0; padding: 0;
  transition: opacity 260ms ease, filter 300ms ease,
              transform 460ms cubic-bezier(.22,.61,.36,1),
              padding-top 560ms cubic-bezier(.22,.61,.36,1);
}
.legal.dense .ident:hover .ident-fold,
.legal.dense .ident:focus-within .ident-fold { grid-template-rows: 1fr; }
.legal.dense .ident:hover .ident-body,
.legal.dense .ident:focus-within .ident-body {
  opacity: 1; filter: blur(0); transform: none; padding-top: 10px;
  transition-delay: 110ms, 110ms, 110ms, 0ms;
}
/* Paper and screen readers get it unconditionally — see the note above. */
@media print {
  .legal.dense .ident-fold { grid-template-rows: 1fr; }
  .legal.dense .ident-body { opacity: 1; filter: none; transform: none; padding-top: 10px; }
  .legal.dense .ident-cue { display: none; }
}
@media (prefers-reduced-motion: reduce) {
  .legal.dense .ident-cue, .legal.dense .ident-mark,
  .legal.dense .ident-fold, .legal.dense .ident-body { transition-duration: 1ms; }
  .legal.dense .ident-body { filter: none; transform: none; }
}