.na-scene { position: absolute; inset: 0; overflow: hidden; background: #fff; contain: strict; }
.na-orbite { position: absolute; left: 0; top: 0; z-index: 1; will-change: transform; pointer-events: none; }
.na-orbite svg { display: block; overflow: visible; }
.na-orbite ellipse { fill: none; stroke: #d3d4d8; stroke-width: 1; vector-effect: non-scaling-stroke; }
.na-noyau, .na-onde { position: absolute; left: 0; top: 0; border-radius: 50%; will-change: transform, opacity; pointer-events: none; }
.na-noyau { background: #f8ff07; box-shadow: 0 0 0 1px #18191b; z-index: 50; }
.na-onde { box-shadow: 0 0 0 1.5px #18191b; z-index: 49; opacity: 0; }
/* le liseré blanc : les orbites passent derrière les lettres, jamais devant (une ombre posée une fois, jamais animée) */
.na-nom { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--nu-sans, var(--ha-sans, sans-serif)); font-weight: 700;
  font-size: 16px; line-height: 1; letter-spacing: -.01em; color: #18191b; padding: 2px 4px; border-radius: 5px; background: #fff;
  text-shadow: 0 0 3px #fff, 0 0 3px #fff, 0 0 6px #fff; will-change: transform, opacity; opacity: 0; pointer-events: none; }
.na-nom.na-duo { z-index: 80; text-shadow: none; background: none; }
.na-nom.na-hybride::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: #18191b; box-shadow: inset 0 0 0 2px #f8ff07; vertical-align: .06em; }
.na-paire { position: absolute; left: 0; top: 0; height: 32px; border-radius: 6px; background: #f8ff07; transform-origin: 50% 50%;
  will-change: transform, opacity; opacity: 0; z-index: 70; pointer-events: none; }
.na-nom.na-op { padding: 2px 1px; }
.na-nom.na-egal { font-weight: 900; letter-spacing: -.02em; }
.na-vers { position: absolute; left: 0; top: 0; white-space: nowrap; font-family: var(--nu-mono, var(--ha-mono, monospace)); font-size: 12px; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase; color: #18191b; will-change: transform, opacity; opacity: 0; z-index: 81; pointer-events: none; }
.na-pied { position: absolute; left: 24px; right: 24px; bottom: 18px; z-index: 90; display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px;
  font-family: var(--nu-mono, var(--ha-mono, monospace)); font-size: 12px; letter-spacing: .05em; color: #18191b; will-change: opacity; opacity: 0; }
.na-pied p { margin: 0; }
.na-legende::before { content: ""; display: inline-block; width: 8px; height: 8px; margin-right: 7px; border-radius: 50%;
  background: #18191b; box-shadow: inset 0 0 0 2px #f8ff07; vertical-align: 0; }
@media (max-width: 720px) { .na-nom { font-size: 15px; } .na-pied { left: 16px; right: 16px; bottom: 14px; } }