/* =========================================================
   SABRINA GALAXY — le globe de la trajectoire
   À charger APRÈS style.css (il en réutilise les variables).
   ========================================================= */

/* width:100% + max-width : la largeur se calcule DANS le .wrap, sans jamais
   déborder de ses 32px de marge intérieure. */
.globe-wrap{
  position:relative;
  width:100%;
  max-width:560px;
  margin:0 auto 72px;
}

/* le canvas est carré : la sphère occupe le centre, les étiquettes la marge */
#globe{
  display:block;
  width:100%;
  aspect-ratio:1/1;
}

/* légende sous le globe (à placer DANS .globe-wrap pour qu'elle le suive) */
.globe-caption{
  text-align:center;
  font-family:var(--font-mono);
  font-size:11px;
  letter-spacing:0.06em;
  color:var(--text-muted);
  margin-top:-18px;
}

/* Une étape s'allume quand on survole son point sur le globe.
   Même vocabulaire visuel que .step.current, en plus discret. */
.step.lit .marker{
  border-color:var(--amber);
  box-shadow:0 0 20px rgba(255,179,92,0.35);
}
.step.lit .marker-num{ color:var(--amber); }
.step.lit .step-city{ color:#fff; }
.step .marker,
.step .marker-num,
.step .step-city{ transition:border-color .25s, box-shadow .25s, color .25s; }

@media (max-width:720px){
  .globe-wrap{ max-width:420px; margin-bottom:48px; }
}