/* Globe CDN · Lanceur. Calque posé par globe.js dans le conteneur (qui porte la taille).
   Couleurs : variables de la palette Pastel nuit, avec repli si elles manquent. */
.gc {
  --gc-k: .84;
  position: absolute; inset: 0; container-type: size; pointer-events: none;
  contain: layout paint;
}
.gc-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  opacity: 0; transition: opacity .9s cubic-bezier(.2, .7, .2, 1);
}
.gc.is-webgl .gc-canvas { opacity: 1; }

/* Image de repli : rendu carré du globe (globe = 84 % du côté), centré, même échelle que le WebGL */
.gc-repli {
  position: absolute; left: 50%; top: 50%; display: block; max-width: none;
  width: 88%; width: calc(var(--gc-k) / .84 * min(100cqw, 100cqh)); height: auto; aspect-ratio: 1;
  transform: translate(-50%, -50%);
  transition: opacity .9s cubic-bezier(.2, .7, .2, 1);
}
.gc.is-webgl .gc-repli { opacity: 0; }

/* Libellés de latence « Paris · 12 ms » */
.gc-libs { position: absolute; inset: 0; }
.gc-lib {
  position: absolute; left: 0; top: 0;
  display: inline-flex; align-items: baseline; gap: .38em;
  padding: .3em .62em .32em;
  font: 500 10.5px/1.2 var(--f-mono, 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, monospace);
  color: var(--text, #F7F5FF); white-space: nowrap;
  background: color-mix(in srgb, var(--nuit, #15142A) 76%, transparent);
  border: 1px solid color-mix(in srgb, var(--tint, #E6E2FF) 16%, transparent);
  border-radius: 999px;
  box-shadow: 0 6px 18px -8px rgba(0, 0, 0, .7);
  -webkit-backdrop-filter: blur(4px); backdrop-filter: blur(4px);
  opacity: 0; transition: opacity .35s ease;
  will-change: transform, opacity;
}
.gc-lib b { font-weight: 500; }
.gc-lib i { font-style: normal; color: var(--subtle, #9894B3); }
.gc-lib em { font-style: normal; color: var(--a4, #FFE8DA); }
.gc-lib.is-on { opacity: 1; }

@media (prefers-reduced-motion: reduce) {
  .gc-canvas, .gc-repli, .gc-lib { transition: none; }
}