/* ==========================================================================
   legal.css — legal pages (mentions légales, politique de confidentialité).
   Requires base.css.
   Markup: <article class="legal"> under the page title; parts are
   <h2 class="legal__heading">, sub-parts <h3 class="legal__subheading">,
   then plain <p> / <ul>. Optional <p class="legal__meta"> for dates.
   ========================================================================== */

/* Reading column: 45% of the page width on desktop (864px at 1920),
   centred under the title, the text left-aligned inside it. Never narrower
   than a comfortable measure (≈ 36rem), and never wider than the space
   between the page gutters, so tablets and phones get the full width.
   Body text follows the site's running text (.subtitle): light weight,
   muted colour, never under --text-min. */
.legal {
  width: min(100%, max(45 * var(--vw), 36rem));
  margin: calc(4 * var(--vw)) auto 0;
  font-size: max(var(--text-min), 1.05 * var(--vw));
  font-weight: 300;
  line-height: 1.7;
  color: var(--color-text-muted);
  text-wrap: pretty;
}

/* Part titles. The space above separates the parts; the first one sits
   right under the page title. */
.legal__heading {
  font-weight: 600;
  font-size: clamp(1.5rem, 2.5 * var(--vw), 48 * var(--u));
  line-height: 1.2;
  color: var(--color-text);
  margin: 2em 0 0.6em;
  text-wrap: balance;
}

.legal__heading:first-child {
  margin-top: 0;
}

/* Document dates (last update, effective date), above the text. */
.legal__meta {
  font-size: 0.85em;
  color: var(--color-text-subtle);
}

.legal .legal__meta + p:not(.legal__meta) {
  margin-top: 2em;
}

/* Sub-part titles (7.1, 9.1…). */
.legal__subheading {
  font-weight: 600;
  font-size: clamp(1.125rem, 1.45 * var(--vw), 28 * var(--u));
  line-height: 1.3;
  color: var(--color-text);
  margin: 1.8em 0 0.5em;
}

.legal p + p,
.legal p + ul,
.legal ul + p {
  margin-top: 1em;
}

/* Labels inside the text (Client :, Propriétaire…). */
.legal b,
.legal strong {
  font-weight: 500;
  color: var(--color-text);
}

/* Links: accent colour, as elsewhere on the site. The site URL is long and
   unbreakable: it may wrap anywhere so it never overflows the column. */
.legal a {
  color: var(--color-accent);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.15em;
  overflow-wrap: anywhere;
}

.legal a:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 2px;
  border-radius: 2px;
}

/* Lists: base.css removes bullets globally; they are restored here. */
.legal ul {
  list-style: disc;
  padding-left: 1.25em;
}

.legal li + li {
  margin-top: 0.4em;
}

.legal li::marker {
  color: var(--color-accent);
}

@media (max-width: 810px) {
  .legal {
    margin-top: clamp(2rem, 10vw, 3rem);
    font-size: clamp(var(--text-min), 3.8vw, 1.0625rem); /* same as .subtitle */
    line-height: 1.65;
  }

  .legal__heading {
    font-size: clamp(1.375rem, 6vw, 1.75rem);
  }

  .legal__subheading {
    font-size: clamp(1.0625rem, 4.6vw, 1.25rem);
  }
}