/* ============================================================
   Lutinia — Pages légales · style partagé
   Direction "Dark Polie" (luxe / éditorial) — repris de la landing
   ============================================================ */
:root {
  --bg: #15110C;
  --bg-alt: #1F1A12;
  --panel: #251D14;
  --panel-alt: #2B2218;
  --ink: #F1E9D8;
  --ink-soft: #A89C87;
  --ink-mute: rgba(241,233,216,0.45);
  --gold: #D4B27A;
  --gold-deep: #E8C99A;
  --rule: rgba(241,233,216,0.12);
  --amber: #F59E0B;
  --green: #9CCB7F;
  --halo: rgba(212,178,122,0.4);
  --accent-glow: rgba(212,178,122,0.14);
  --max: 1180px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
html, body { background: var(--bg); }
body {
  font-family: "Hanken Grotesk", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Arial, sans-serif;
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  position: relative;
}
body::before {
  content: ''; position: fixed; top: -240px; left: 50%; transform: translateX(-50%);
  width: 1200px; height: 600px; pointer-events: none; z-index: 0;
  background: radial-gradient(ellipse, var(--accent-glow), transparent 65%);
}
a { color: var(--gold-deep); text-decoration: none; transition: color .2s; }
a:hover { color: var(--gold); }
.serif { font-family: "Cormorant Garamond", Georgia, serif; font-weight: 400; }

/* ---------------- Nav ---------------- */
.legal-nav {
  position: sticky; top: 0; z-index: 200;
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 56px;
  background: rgba(21,17,12,0.85);
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--rule);
}
.legal-nav .logo { display: flex; align-items: center; gap: 10px; color: var(--ink); }
.legal-nav .logo .bar { width: 1px; height: 26px; background: var(--gold); }
.legal-nav .logo .name {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px; letter-spacing: 4.5px; font-weight: 500;
}
.legal-nav .logo .name .dot { color: var(--gold); margin: 0 4px; }
.legal-nav .nav-right { display: flex; align-items: center; gap: 26px; }
.legal-nav .back {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 13.5px; color: var(--ink-soft);
}
.legal-nav .back:hover { color: var(--gold-deep); }
.legal-nav .contact-link {
  font-size: 13.5px; color: var(--ink); cursor: pointer;
  position: relative;
}
.legal-nav .contact-link::after {
  content: ''; position: absolute; left: 0; right: 0; bottom: -4px; height: 1px;
  background: var(--gold); transform: scaleX(0); transform-origin: left;
  transition: transform .25s cubic-bezier(.2,.7,.3,1);
}
.legal-nav .contact-link:hover { color: var(--ink); }
.legal-nav .contact-link:hover::after { transform: scaleX(1); }
.footer-contact-btn {
  background: none; border: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; color: rgba(241,233,216,0.72);
  text-align: left; transition: color .2s;
}
.footer-contact-btn:hover { color: var(--gold-deep); }

/* ---------------- Contact modal (shared) ---------------- */
.rh-overlay{position:fixed;inset:0;z-index:2000;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(14,11,7,0.74);-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);}
.rh-overlay[hidden]{display:none;}
.rh-dialog{position:relative;width:100%;max-width:440px;background:var(--panel);border:1px solid var(--rule);border-radius:18px;padding:34px 28px 28px;box-shadow:0 24px 64px rgba(0,0,0,0.5);max-height:90vh;overflow:auto;}
.rh-close{position:absolute;top:12px;right:16px;background:none;border:none;color:var(--ink-soft);font-size:26px;line-height:1;cursor:pointer;padding:4px;}
.rh-close:hover{color:var(--ink);}
.rh-dialog h3{font-family:'Cormorant Garamond',Georgia,serif;color:var(--ink);font-size:28px;margin:0 0 6px;font-weight:600;}
.rh-sub{color:var(--ink-soft);font-size:13.5px;line-height:1.5;margin:0 0 20px;}
.rh-form label{display:block;color:var(--ink-soft);font-size:12px;font-weight:500;margin-bottom:13px;}
.rh-form input,.rh-form textarea{display:block;width:100%;margin-top:6px;background:var(--bg-alt);border:1px solid var(--rule);border-radius:10px;color:var(--ink);font-family:inherit;font-size:14px;padding:11px 13px;box-sizing:border-box;}
.rh-form input:focus,.rh-form textarea:focus{outline:none;border-color:var(--gold);}
.rh-form textarea{resize:vertical;}
.rh-hp{position:absolute!important;left:-9999px!important;width:1px;height:1px;opacity:0;}
.rh-submit{width:100%;margin-top:6px;background:var(--gold);color:var(--bg);border:none;border-radius:999px;padding:14px 24px;font-family:inherit;font-size:15px;font-weight:600;cursor:pointer;transition:transform .18s,filter .18s;}
.rh-submit:hover{transform:translateY(-1.5px);filter:brightness(1.05);}
.rh-submit:disabled{opacity:.6;cursor:default;transform:none;}
.rh-status{font-size:13px;margin:14px 0 0;text-align:center;min-height:18px;line-height:1.4;}
.rh-status.ok{color:var(--green);}
.rh-status.err{color:#D98562;}

/* ---------------- Hero ---------------- */
.legal-hero {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: 72px 56px 40px;
}
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 14px; border: 1px solid var(--gold); border-radius: 999px;
  font-size: 12px; letter-spacing: 1.2px; text-transform: uppercase;
  color: var(--gold-deep); font-weight: 500;
}
.pill::before { content: ''; width: 6px; height: 6px; border-radius: 6px; background: var(--gold); }
.legal-hero h1 {
  font-family: "Cormorant Garamond", serif;
  font-size: 64px; line-height: 1.02; letter-spacing: -1.5px;
  margin: 24px 0 0; font-weight: 400; max-width: 16ch;
}
.legal-hero .meta {
  display: flex; flex-wrap: wrap; gap: 8px 20px;
  margin-top: 22px; font-size: 13px; color: var(--ink-soft);
}
.legal-hero .meta span { display: inline-flex; align-items: center; gap: 8px; }
.legal-hero .meta .k { color: var(--gold); letter-spacing: .6px; text-transform: uppercase; font-size: 11px; }

.draft-banner {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: 0 56px;
}
.draft-banner .inner {
  display: flex; gap: 14px; align-items: flex-start;
  border: 1px solid rgba(245,158,11,0.32);
  background: rgba(245,158,11,0.07);
  border-radius: 14px; padding: 16px 20px;
  font-size: 13.5px; color: var(--ink-soft); line-height: 1.55;
}
.draft-banner .inner::before {
  content: '✺'; color: var(--amber); font-size: 16px; line-height: 1.5; flex: none;
}
.draft-banner .inner strong { color: var(--ink); }

/* ---------------- Layout ---------------- */
.doc-layout {
  position: relative; z-index: 1;
  max-width: var(--max); margin: 0 auto;
  padding: 40px 56px 96px;
  display: grid; grid-template-columns: 232px 1fr; gap: 56px;
  align-items: start;
}
.doc-toc { position: sticky; top: 96px; align-self: start; }
.doc-toc .toc-label {
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 16px;
}
.doc-toc ol { list-style: none; display: flex; flex-direction: column; gap: 2px; counter-reset: toc; }
.doc-toc a {
  display: block; padding: 7px 0 7px 16px;
  border-left: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-soft); line-height: 1.4;
  transition: color .2s, border-color .2s;
}
.doc-toc a:hover { color: var(--gold-deep); border-left-color: var(--gold); }
.doc-toc a.active { color: var(--ink); border-left-color: var(--gold); }

/* ---------------- Content ---------------- */
.doc-content { max-width: 760px; }
.doc-content > .lead {
  font-size: 17px; color: var(--ink-soft); line-height: 1.65;
  padding-bottom: 28px; margin-bottom: 8px;
  border-bottom: 1px solid var(--rule);
}
.doc-content h2 {
  font-family: "Cormorant Garamond", serif;
  font-size: 32px; line-height: 1.15; letter-spacing: -0.5px;
  font-weight: 500; color: var(--ink);
  margin: 52px 0 18px; padding-top: 8px;
  scroll-margin-top: 90px;
}
.doc-content h2:first-of-type { margin-top: 16px; }
.doc-content h2 .num {
  font-style: italic; color: var(--gold); margin-right: 4px;
}
.doc-content h3 {
  font-family: "Hanken Grotesk", sans-serif;
  font-size: 13px; letter-spacing: 1.4px; text-transform: uppercase;
  font-weight: 600; color: var(--gold-deep);
  margin: 32px 0 12px;
}
.doc-content p { font-size: 15.5px; color: var(--ink-soft); margin: 14px 0; line-height: 1.7; }
.doc-content p strong, .doc-content li strong { color: var(--ink); font-weight: 600; }
.doc-content em { color: var(--ink); font-style: italic; }
.doc-content a { text-decoration: underline; text-underline-offset: 2px; text-decoration-color: rgba(212,178,122,0.4); }
.doc-content code {
  font-family: "Hanken Grotesk", monospace; font-size: 0.92em;
  color: var(--gold-deep); background: rgba(212,178,122,0.08);
  padding: 1px 6px; border-radius: 5px;
}
.doc-content ul, .doc-content ol { margin: 16px 0; padding-left: 0; list-style: none; }
.doc-content li {
  font-size: 15.5px; color: var(--ink-soft); line-height: 1.65;
  padding-left: 28px; position: relative; margin: 9px 0;
}
.doc-content ul > li::before {
  content: ''; position: absolute; left: 6px; top: 11px;
  width: 6px; height: 6px; border-radius: 50%; background: var(--gold);
}
.doc-content ol { counter-reset: item; }
.doc-content ol > li { counter-increment: item; }
.doc-content ol > li::before {
  content: counter(item); position: absolute; left: 0; top: 1px;
  font-family: "Cormorant Garamond", serif; font-style: italic;
  font-size: 16px; color: var(--gold); line-height: 1.4;
}

/* Tables */
.doc-content .table-wrap { margin: 24px 0; overflow-x: auto; border: 1px solid var(--rule); border-radius: 12px; }
.doc-content table { width: 100%; border-collapse: collapse; font-size: 14px; min-width: 460px; }
.doc-content thead th {
  text-align: left; font-weight: 600; color: var(--gold);
  font-size: 11px; letter-spacing: 1px; text-transform: uppercase;
  padding: 14px 18px; background: rgba(212,178,122,0.06);
  border-bottom: 1px solid var(--rule);
}
.doc-content tbody td {
  padding: 14px 18px; color: var(--ink-soft); line-height: 1.5;
  border-bottom: 1px solid var(--rule); vertical-align: top;
}
.doc-content tbody tr:last-child td { border-bottom: none; }
.doc-content tbody td:first-child { color: var(--ink); }
.doc-content tbody td strong { color: var(--ink); }

/* Callouts (blockquotes) */
.doc-content .callout {
  margin: 24px 0; padding: 16px 20px; border-radius: 14px;
  border: 1px solid var(--rule); background: var(--panel);
  font-size: 14.5px; color: var(--ink-soft); line-height: 1.6;
  display: flex; gap: 14px; align-items: flex-start;
}
.doc-content .callout p { margin: 0; font-size: 14.5px; }
.doc-content .callout p + p { margin-top: 8px; }
.doc-content .callout::before { flex: none; font-size: 16px; line-height: 1.5; }
.doc-content .callout.info { border-color: rgba(212,178,122,0.3); background: rgba(212,178,122,0.06); }
.doc-content .callout.info::before { content: 'ℹ'; color: var(--gold-deep); }
.doc-content .callout.warn { border-color: rgba(245,158,11,0.34); background: rgba(245,158,11,0.07); }
.doc-content .callout.warn::before { content: '⚠'; color: var(--amber); }
.doc-content .callout.note::before { content: '§'; color: var(--ink-soft); }

.doc-content hr { border: none; border-top: 1px solid var(--rule); margin: 40px 0; }

.doc-content .doc-end {
  margin-top: 48px; padding-top: 20px; border-top: 1px solid var(--rule);
  font-size: 13px; color: var(--ink-mute); font-style: italic; line-height: 1.6;
}

/* ---------------- Footer ---------------- */
.legal-footer {
  position: relative; z-index: 1;
  border-top: 1px solid var(--rule);
  background: #0E0B07;
}
.legal-footer .inner {
  max-width: var(--max); margin: 0 auto;
  padding: 48px 56px 28px;
  display: grid; grid-template-columns: 1.6fr 1fr 1fr; gap: 40px;
}
.legal-footer .brand .logo { display: flex; align-items: center; gap: 10px; }
.legal-footer .brand .bar { width: 1px; height: 24px; background: var(--gold); }
.legal-footer .brand .name { font-size: 12px; letter-spacing: 4px; color: #F5F0E8; }
.legal-footer .brand .name .dot { color: var(--gold); margin: 0 4px; }
.legal-footer .brand p { font-size: 12.5px; color: rgba(241,233,216,0.5); line-height: 1.6; margin-top: 14px; max-width: 320px; }
.legal-footer h4 {
  font-size: 11px; letter-spacing: 1.8px; text-transform: uppercase;
  color: var(--gold); font-weight: 500; margin-bottom: 16px;
}
.legal-footer ul { list-style: none; display: flex; flex-direction: column; gap: 10px; }
.legal-footer li, .legal-footer .col a { font-size: 13px; color: rgba(241,233,216,0.72); line-height: 1.5; }
.legal-footer .col a:hover { color: var(--gold-deep); }
.legal-footer .col a[aria-current="page"] { color: var(--gold-deep); }
.legal-footer .bottom {
  max-width: var(--max); margin: 0 auto;
  padding: 18px 56px 32px; margin-top: 8px;
  border-top: 1px solid rgba(245,240,232,0.08);
  display: flex; justify-content: space-between; flex-wrap: wrap; gap: 10px;
  font-size: 12px; color: rgba(241,233,216,0.4);
}

/* ---------------- Responsive ---------------- */
@media (max-width: 900px) {
  .doc-layout { grid-template-columns: 1fr; gap: 0; padding: 28px 32px 72px; }
  .doc-toc { display: none; }
  .legal-hero { padding: 48px 32px 32px; }
  .legal-hero h1 { font-size: 44px; }
  .draft-banner { padding: 0 32px; }
  .legal-nav { padding: 14px 24px; }
  .legal-footer .inner { grid-template-columns: 1fr; gap: 28px; padding: 40px 32px 24px; }
  .legal-footer .bottom { padding: 18px 32px 28px; }
}
@media (max-width: 560px) {
  .legal-hero h1 { font-size: 36px; }
  .legal-nav .logo .name { letter-spacing: 3px; }
}