/* =============================================================================
   Pages légales — The Circle Samui
   Réutilise styles.css (header, footer, variables, polices). Ce fichier ne
   contient QUE la mise en page éditoriale des documents légaux.
   ============================================================================= */

.legal-hero {
  padding: calc(var(--header-h) + clamp(40px, 7vw, 92px)) 0 clamp(26px, 4vw, 46px);
  border-bottom: 1px solid var(--line);
  background: var(--paper-2);
}
.legal-hero .eyebrow { color: var(--lagon); }
.legal-hero h1 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h2);
  letter-spacing: -0.005em;
  margin-top: 10px;
}
.legal-hero .legal-updated { margin-top: 14px; color: var(--ink-mute); font-size: var(--fs-small); }

.legal-doc {
  max-width: 840px;
  padding-top: clamp(34px, 5vw, 60px);
  padding-bottom: clamp(60px, 8vw, 116px);
}
.legal-doc > .lead { margin-bottom: 1.8em; max-width: 64ch; }

.legal-doc h2 {
  font-family: var(--font-display);
  font-weight: 500;
  font-size: var(--fs-h3);
  letter-spacing: -0.005em;
  margin: 2.3em 0 0.55em;
}
.legal-doc h2:first-of-type { margin-top: 0; }
.legal-doc h3 { font-size: 1.04rem; font-weight: 600; color: var(--ink); margin: 1.7em 0 0.4em; }

.legal-doc p,
.legal-doc li { font-size: var(--fs-body); line-height: 1.72; color: var(--ink-soft); }
.legal-doc p { margin: 0 0 1em; }
.legal-doc ul { margin: 0 0 1.1em; padding-left: 1.25em; }
.legal-doc li { margin: 0.4em 0; }
.legal-doc strong { color: var(--ink); font-weight: 600; }
.legal-doc a { color: var(--lagon); text-decoration: underline; text-underline-offset: 2px; }
.legal-doc a:hover { color: var(--lagon-deep); }

.legal-card {
  background: var(--paper-2);
  border: 1px solid var(--line);
  border-radius: 14px;
  padding: clamp(18px, 3vw, 28px);
  margin: 0 0 1.6em;
}
.legal-card p:last-child { margin-bottom: 0; }
.legal-card .legal-id { display: grid; gap: 4px; }
.legal-card .legal-id span { display: block; }

.legal-table { width: 100%; border-collapse: collapse; margin: 0 0 1.5em; font-size: var(--fs-small); }
.legal-table th,
.legal-table td { text-align: left; padding: 11px 13px; border-bottom: 1px solid var(--line); vertical-align: top; color: var(--ink-soft); }
.legal-table th { color: var(--ink); font-weight: 600; background: var(--paper-2); }

.legal-toc { display: flex; flex-wrap: wrap; gap: 8px 20px; margin-top: 20px; }
.legal-toc a { font-size: var(--fs-small); color: var(--ink-mute); text-decoration: none; }
.legal-toc a:hover { color: var(--lagon); }

/* Bouton « Modifier mon consentement » (rouvre le bandeau cookies via app.js) */
.legal-btn {
  font-family: var(--font-body);
  font-size: var(--fs-small);
  font-weight: 500;
  color: #fff;
  background: var(--lagon);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 11px 22px;
  cursor: pointer;
  transition: background 0.3s var(--ease);
}
.legal-btn:hover { background: var(--lagon-deep); }