/* ============================================================
   Legal / Privacy page
   Relies on the home.css design tokens (--bg/--surface/--text/
   --muted/--stroke) and the cyan accent (#3FAEDC / #8AD0E8).
   All spacing/type below 800px scales continuously via clamp()
   (anchored 320px -> 800px) instead of jumping at a single
   Tailwind `md:` breakpoint, so the page stays balanced at every
   width in between. Beyond 800px the existing `lg:` utilities
   in legal.html take over.
   ============================================================ */

/* ---- Hard floor: below 320px wide or 450px tall, the layout
   stops shrinking and the browser shows scrollbars instead.
   Width floor is already global (home.css body{min-width:320px});
   the height floor is page-scoped here. ---- */
body { min-height: 450px; }

/* ---- Nav: fluid gutters, scales continuously 320px -> 800px  */
.legal-nav {
  padding-top: clamp(1rem, 0.667rem + 1.667vw, 1.5rem);
  padding-left: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
  padding-right: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
}

/* ---- Shared fluid horizontal gutter (header / content / footer) */
.legal-gutter {
  padding-left: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
  padding-right: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
}

/* ---- Header ------------------------------------------------- */
.legal-header {
  padding-top: clamp(9rem, 7.667rem + 6.667vw, 11rem);
  padding-bottom: clamp(2rem, 1.667rem + 1.667vw, 2.5rem);
}
.legal-h1 {
  font-size: clamp(2.25rem, 1.75rem + 2.5vw, 3rem);
}
.legal-subtitle {
  font-size: clamp(0.875rem, 0.792rem + 0.417vw, 1rem);
}

/* ---- Content wrapper ----------------------------------------- */
.legal-content {
  padding-bottom: clamp(5rem, 3.667rem + 6.667vw, 7rem);
}

/* ---- Cards (legal notice / privacy policy panels) ------------ */
.legal-card-pad {
  padding: clamp(1.5rem, 0.833rem + 3.333vw, 2.5rem);
}
.legal-card-gap {
  gap: clamp(1.5rem, 1.167rem + 1.667vw, 2rem);
}

/* ---- Privacy section heading ---------------------------------- */
.legal-section-gap {
  margin-top: clamp(4rem, 3.333rem + 3.333vw, 5rem);
}
.legal-h2-title {
  font-size: clamp(1.875rem, 1.625rem + 1.25vw, 2.25rem);
}

/* ---- Footer ---------------------------------------------------- */
.legal-footer-pad {
  padding-top: clamp(2.5rem, 2.167rem + 1.667vw, 3rem);
  padding-bottom: clamp(2rem, 1.333rem + 3.333vw, 3rem);
}

/* ---- Legal/Privacy long-form copy — scoped prose styling so the
   legal text inherits the home design tokens without per-element
   Tailwind classes. Sizes are fluid so dense clauses stay readable
   at 320px without feeling oversized at 800px+. ---- */
.legal-prose h2 {
  color: hsl(var(--text));
  font-size: clamp(1.05rem, 0.95rem + 0.5vw, 1.2rem);
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 0.85rem;
}
.legal-prose h2.topt {
  font-size: clamp(0.95rem, 0.883rem + 0.333vw, 1.05rem);
  color: hsl(var(--text) / 0.85);
  text-transform: uppercase;
  letter-spacing: 0.12em;
}
.legal-prose h3 {
  color: hsl(var(--text) / 0.9);
  font-size: clamp(0.85rem, 0.783rem + 0.333vw, 0.95rem);
  font-weight: 500;
  margin: 1.4rem 0 0.5rem;
}
.legal-prose p {
  color: hsl(var(--muted));
  font-size: clamp(0.85rem, 0.817rem + 0.167vw, 0.9rem);
  line-height: clamp(1.7, 1.633 + 0.333vw, 1.8);
  /* long bare URLs / emails (cdn.pierrelebret.com, mailto links) can break to
     avoid horizontal overflow on the narrowest screens. */
  overflow-wrap: break-word;
}
.legal-prose strong { color: hsl(var(--text) / 0.92); font-weight: 600; }
.legal-prose a { color: #3FAEDC; transition: color 0.2s ease; }
.legal-prose a:hover { color: #8AD0E8; }

/* FR/EN switcher visual state, driven by #changeLanguage[aria-checked]
   (head.html sets aria-checked from default_language; main.js submits the form). */
#changeLanguage [data-lang-label] { color: hsl(var(--muted)); }
#changeLanguage[aria-checked="false"] [data-lang-label="fr"] { color: hsl(var(--text)); }
#changeLanguage[aria-checked="true"]  [data-lang-label="en"] { color: hsl(var(--text)); }
#changeLanguage[aria-checked="false"] #lang-knob { transform: translate(0, -50%); }
#changeLanguage[aria-checked="true"]  #lang-knob { transform: translate(18px, -50%); }