/* =========================================================================
   XNOVA SYSTEMS — Globe 3D du bandeau de contact (.cta-band)
   Le canvas et l'étiquette sont injectés par src/assets/js/globe.js, qui ajoute
   .has-globe au bandeau. Sans JS (ou animations réduites), rien ne change.
   ========================================================================= */

.cta-band.has-globe {
  --globe-size: clamp(560px, 48vw, 680px);
}

/* Empilement (le bandeau isole son contexte) : fond → halo ::after (z -1, styles.css)
   → globe et étiquette (z 0) → texte et boutons (z 1). Aucun pseudo-élément utilisé ici. */
.cta-band.has-globe > :not(.cta-band__globe):not(.cta-band__place) {
  position: relative;
  z-index: 1;
}

.cta-band__globe {
  position: absolute;
  z-index: 0;
  right: calc(var(--globe-size) * -0.2);
  top: calc(50% - var(--globe-size) * 0.4);
  width: var(--globe-size);
  height: var(--globe-size);
  pointer-events: none;
  opacity: 0;
  transition: opacity 1.2s var(--ease-out);
}

.cta-band__globe.is-ready {
  opacity: 1;
}

/* Le texte garde sa colonne : le globe occupe la moitié droite */
@media (min-width: 1024px) {
  .cta-band.has-globe .lead {
    max-width: 34rem;
  }
}

/* Étiquette de Niamey, collée au point projeté (position mise à jour en JS) */
.cta-band__place {
  position: absolute;
  z-index: 0;
  top: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: calc(var(--text-xs) * -0.65); /* 1re ligne centrée sur le point */
  padding-left: var(--space-4);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  line-height: 1.3;
  letter-spacing: var(--tracking-wide);
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--duration-reveal) var(--ease-out);
  will-change: transform;
}

.cta-band__place-city {
  color: var(--color-text);
  text-transform: uppercase;
}

.cta-band__place-coords {
  color: var(--color-text-subtle);
}

.cta-band__place.is-visible {
  opacity: 1;
}

/* Tablette : globe plus petit, plus discret, en bas à droite */
@media (max-width: 1023px) {
  .cta-band.has-globe {
    --globe-size: clamp(380px, 56vw, 520px);
  }

  .cta-band__globe {
    right: calc(var(--globe-size) * -0.3);
    top: auto;
    bottom: calc(var(--globe-size) * -0.42);
  }

  .cta-band__globe.is-ready {
    opacity: 0.55;
  }

  .cta-band__place {
    display: none;
  }
}

/* Mobile : un arc de planète discret derrière le bas du bandeau */
@media (max-width: 639px) {
  .cta-band.has-globe {
    --globe-size: 400px;
  }

  .cta-band__globe {
    right: calc(var(--globe-size) * -0.36);
    bottom: calc(var(--globe-size) * -0.5);
  }

  .cta-band__globe.is-ready {
    opacity: 0.4;
  }
}

/* Ceinture et bretelles : globe.js ne démarre pas dans ce cas */
@media (prefers-reduced-motion: reduce) {
  .cta-band__globe,
  .cta-band__place {
    display: none;
  }
}