/* MOZOTI — jetons de design V2, extraits fidèlement de
   apps/admin-web/src/app/public-v2/v2.css (couleurs, typographies, nav, boutons).
   Site statique isolé : aucune dépendance externe, aucune police distante. */

:root {
  --pearl: #edeae1; --pearl-2: #f5f2ea;
  --ink-txt: #101a16; --dim-txt: #55635e; --line: rgba(20, 34, 28, 0.13);
  --signal: #2fa78d; --found: #c19334;
  --iri-1: #f1ece1; --iri-2: #e7f0ea; --iri-3: #efe9e2; --iri-4: #e5eef1; --iri-5: #eee8f1;
  --bg: var(--pearl); --surface: var(--pearl-2); --text: var(--ink-txt); --dim: var(--dim-txt);
  --mono: ui-monospace, "SF Mono", "JetBrains Mono", "Menlo", "Consolas", monospace;
  --sans: "Helvetica Neue", "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
  --maxw: 1200px; --gutter: clamp(20px, 5vw, 80px);
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #0a1512; --surface: #0f211c; --text: #f1ede2; --dim: rgba(241, 237, 226, 0.6);
    --line: rgba(233, 228, 214, 0.11);
    --iri-1: #0e1a16; --iri-2: #0c1b18; --iri-3: #111815; --iri-4: #0b1a1c; --iri-5: #12161b;
    --found: #c89b45; --signal: #37b79a;
  }
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--sans);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
:focus-visible { outline: 2px solid var(--signal); outline-offset: 3px; border-radius: 3px; }
.mono { font-family: var(--mono); font-variant-numeric: tabular-nums; }

h1, h2, h3 { margin: 0; font-weight: 600; letter-spacing: -0.02em; text-wrap: balance; }

.wrap { margin: 0 auto; max-width: var(--maxw); padding-inline: var(--gutter); }

.nav {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 74%, transparent);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--line);
}
.nav .wrap { display: flex; align-items: center; gap: 18px; height: 60px; }
.logo { display: flex; align-items: baseline; gap: 9px; margin-right: auto; }
.logo b { font-size: 17px; letter-spacing: 0.05em; font-weight: 650; }
.logo .c { color: var(--dim); font-family: var(--mono); font-size: 10.5px; }

.btn {
  border-radius: 999px; cursor: pointer; font: 550 13px var(--sans); padding: 9px 17px;
  transition: transform .12s, background .15s, border-color .15s;
  display: inline-flex; align-items: center; gap: 7px;
  background: transparent; border: 1px solid var(--line); color: var(--text);
}
.btn:hover { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); }

.eb {
  color: var(--signal); font-family: var(--mono); font-size: 10.5px;
  letter-spacing: 0.18em; text-transform: uppercase; margin: 0;
}

main {
  max-width: 760px; margin: 0 auto; padding: 48px 20px 80px;
  display: grid; gap: 40px;
}

.lead { color: var(--dim); margin-top: 8px; }

.points { margin-top: 14px; display: grid; gap: 10px; color: var(--dim); line-height: 1.5; padding-left: 20px; }
.points b { color: var(--text); }

.note { color: var(--dim); margin-top: 18px; font-size: 13px; }
.note a { color: var(--signal); }

.index { list-style: none; padding: 0; margin: 14px 0 0; display: grid; gap: 10px; }
.index a {
  display: block; padding: 14px 16px; border: 1px solid var(--line);
  border-radius: 12px; background: var(--surface);
  transition: border-color .15s, transform .12s;
}
.index a:hover { border-color: color-mix(in srgb, var(--signal) 55%, var(--line)); transform: translateY(-1px); }
.index b { display: block; font-size: 14.5px; }
.index span { color: var(--dim); font-size: 13px; }

.foot {
  border-top: 1px solid var(--line); margin-top: 8px; padding-top: 22px;
  color: var(--dim); font-size: 12.5px; display: grid; gap: 6px;
}
.foot a { color: var(--signal); }