:root { color-scheme: dark; --accent: #0d9488; }
* { box-sizing: border-box; margin: 0; }
body {
  font-family: "Space Grotesk", system-ui, -apple-system, "Segoe UI", sans-serif;
  background: #101619; color: #eef4f3;
  min-height: 100svh; display: flex; align-items: center; justify-content: center;
  padding: 2rem 1.25rem; line-height: 1.5;
}
main { text-align: center; max-width: 40rem; }
.tiles {
  display: flex; gap: clamp(.35rem, 2vw, .7rem); justify-content: center;
  margin-bottom: 1.8rem; flex-wrap: wrap;
}
.tile {
  width: clamp(2.6rem, 12vw, 4rem); height: clamp(2.6rem, 12vw, 4rem);
  display: flex; align-items: center; justify-content: center;
  border: 1px solid #3a3a3a;
  border-radius: .55rem;
  font-size: clamp(1.3rem, 6vw, 1.9rem); font-weight: 700;
  text-transform: uppercase;
}
.acronym {
  font-size: clamp(1.1rem, 4.6vw, 1.5rem); max-width: 34rem; margin: 0 auto;
  text-transform: uppercase;
}
.acronym .hl { color: var(--accent); font-weight: 700; }
.lang {
  margin: 0 auto; max-width: 34rem; padding-left: 1.4rem;
  text-align: left; font-size: .78rem; letter-spacing: .16em;
  text-transform: uppercase; color: #8a8a8a;
}
.meta {
  margin-top: 1.8rem; padding-top: .45rem;
  border-top: 1px solid #3a3a3a;
  text-align: right; font-style: italic;
  font-size: .8rem; letter-spacing: .18em;
  color: #8a8a8a;
}
nav { margin-top: 1.4rem; display: flex; gap: 1.6rem; justify-content: center; flex-wrap: wrap; }
nav a {
  color: var(--accent); text-decoration: none; font-weight: 500;
  letter-spacing: .06em; text-transform: uppercase; font-size: .95rem;
}
nav a:hover { text-decoration: underline; text-underline-offset: 3px; }
.moon { font-style: normal; }

/* Lune geante en fond : 8 phases, sens horaire ; horizontal decale du double (Brave) */
.bg-moon {
  position: fixed; z-index: 0; pointer-events: none; user-select: none;
  font-size: 44vmin; line-height: 1; opacity: .14;
}
.bg-moon.p0 { top: -7vmin; left: -14vmin; }
.bg-moon.p1 { top: -7vmin; left: 50%; transform: translateX(-50%); }
.bg-moon.p2 { top: -7vmin; right: -14vmin; }
.bg-moon.p3 { top: 50%; right: -14vmin; transform: translateY(-50%); }
.bg-moon.p4 { bottom: -7vmin; right: -14vmin; }
.bg-moon.p5 { bottom: -7vmin; left: 50%; transform: translateX(-50%); }
.bg-moon.p6 { bottom: -7vmin; left: -14vmin; }
.bg-moon.p7 { top: 50%; left: -14vmin; transform: translateY(-50%); }
main { position: relative; z-index: 1; }