/* Pages légales MyÆDN — style aligné sur la charte Paced. (hub).
   Les pages chargent Geist + Instrument Serif via Google Fonts. */
:root {
  --bg: #07080f;
  --ink: #f3f5ff;
  --soft: #c3cbe6;
  --dim: #8a93b4;
  --line: rgba(255, 255, 255, 0.09);
  --panel: rgba(255, 255, 255, 0.035);
  --indigo: #7c7bff;
  --magenta: #ec4bf5;
  --cyan: #4ccdff;
  color-scheme: dark;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: "Geist", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: 16px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}
a { color: var(--cyan); text-decoration: none; }
a:hover { text-decoration: underline; }

/* fond ambiant */
.ambient { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; }
.blob { position: absolute; border-radius: 50%; filter: blur(90px); }
.b1 { width: 540px; height: 540px; top: -160px; right: -80px; background: radial-gradient(circle, rgba(236, 75, 245, 0.22), transparent 68%); }
.b2 { width: 500px; height: 500px; bottom: -180px; left: -140px; background: radial-gradient(circle, rgba(124, 123, 255, 0.24), transparent 68%); }
.b3 { width: 380px; height: 380px; top: 45%; left: 60%; background: radial-gradient(circle, rgba(76, 205, 255, 0.14), transparent 68%); }
.grain {
  position: fixed; inset: 0; z-index: 30; pointer-events: none; opacity: 0.028;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='3'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}

/* barre haute */
.topbar { position: sticky; top: 0; z-index: 40; backdrop-filter: blur(10px); background: linear-gradient(180deg, rgba(7, 8, 15, 0.75), transparent); }
.wrap { max-width: 880px; margin: 0 auto; padding: 14px 20px; }
.row { display: flex; align-items: center; }
.between { justify-content: space-between; }
.brand { font-weight: 700; letter-spacing: -0.03em; color: var(--ink); font-size: 17px; }
.brand small { color: var(--magenta); font-weight: 600; margin-left: 6px; font-size: 12px; }
.menu { display: flex; gap: 18px; font-size: 13.5px; }
.menu a { color: var(--soft); }
.menu a:hover { color: var(--ink); }

/* hero de page */
.page-hero { padding: 56px 0 8px; }
.wrap-narrow { max-width: 820px; margin: 0 auto; padding: 0 20px; }
.pill {
  display: inline-flex; align-items: center; gap: 8px;
  font-size: 11.5px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--soft); background: var(--panel); border: 1px solid var(--line);
  border-radius: 999px; padding: 6px 14px; margin-bottom: 20px;
}
.dot { width: 7px; height: 7px; border-radius: 50%; background: #c7f94b; box-shadow: 0 0 10px #c7f94b; }
.page-hero h1 {
  font-size: clamp(30px, 5vw, 48px);
  line-height: 1.05; letter-spacing: -0.04em; font-weight: 600; margin: 0 0 12px;
}
.page-hero h1 em {
  font-family: "Instrument Serif", Georgia, serif; font-style: italic; font-weight: 400;
  background: linear-gradient(100deg, var(--magenta), var(--indigo) 55%, var(--cyan));
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.lede { color: var(--soft); font-size: 16px; margin: 0; max-width: 620px; }

/* article */
.article { max-width: 820px; margin: 0 auto; padding: 28px 20px 90px; }
.meta-bar {
  display: flex; gap: 14px; flex-wrap: wrap;
  font-size: 12px; color: var(--dim);
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
  padding: 10px 0; margin-bottom: 28px;
}
.article h2 {
  font-size: 21px; letter-spacing: -0.02em; font-weight: 600;
  margin: 2em 0 0.6em; padding-top: 1em; border-top: 1px solid var(--line);
}
.article h3 { font-size: 16.5px; font-weight: 600; margin: 1.4em 0 0.4em; color: var(--soft); }
.article p, .article li { color: var(--soft); font-size: 15px; }
.article strong { color: var(--ink); }
.article blockquote {
  margin: 1.2em 0; padding: 0.8em 1.1em;
  border-left: 3px solid var(--indigo);
  background: var(--panel);
  border-radius: 0 12px 12px 0;
  color: var(--soft); font-size: 14.5px;
}
.article table { border-collapse: collapse; width: 100%; margin: 1.2em 0; font-size: 13.5px; display: block; overflow-x: auto; }
.article th, .article td { border: 1px solid var(--line); padding: 0.55em 0.75em; text-align: left; vertical-align: top; }
.article th { background: var(--panel); color: var(--ink); }
.article code { background: rgba(255, 255, 255, 0.07); padding: 0.1em 0.4em; border-radius: 6px; font-size: 0.9em; }
.article hr { border: none; border-top: 1px solid var(--line); margin: 2em 0; }