/* ═══════════════════════════════════════════════════════════════════════════
   GeoNatSat — Globe « hero » : feuille de style
   Tout est préfixé .gns- et confiné au conteneur : rien ne fuit sur le reste
   de la page.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Le conteneur que TU fournis. Donne-lui une hauteur (exemples ci-dessous). */
.gns-hero {
  position: relative;
  width: 100%;
  min-height: 560px;
  height: 100vh;          /* plein écran ; remplace par 640px, 80vh, etc. */
  max-height: 900px;
}
@media (max-width: 700px) {
  .gns-hero { height: 88vh; min-height: 480px; }
}

/* État injecté par le script sur le conteneur. */
.gns-globe {
  position: relative;
  overflow: hidden;
  background: #05070c;     /* fond visible pendant le très court écran noir */
  isolation: isolate;
}

.gns-globe__canvas { position: absolute; inset: 0; z-index: 0; }
.gns-globe__canvas canvas { display: block; width: 100% !important; height: 100% !important; }

/* Couche de contenu (ton titre / accroche / bouton), au-dessus du globe.
   Elle laisse passer les clics SAUF sur ses éléments interactifs. */
.gns-globe__overlay {
  position: absolute; inset: 0; z-index: 5;
  display: flex; flex-direction: column; justify-content: center;
  padding: clamp(1.5rem, 6vw, 6rem);
  pointer-events: none;
  color: #eef5f1;
  text-shadow: 0 2px 18px rgba(0, 0, 0, .55);
}
.gns-globe__overlay a,
.gns-globe__overlay button,
.gns-globe__overlay input,
.gns-globe__overlay .gns-hero__cta { pointer-events: auto; }

/* Petit kit d'habillage optionnel — utilise-le ou remplace-le par le tien. */
.gns-hero__content { max-width: 34rem; }
.gns-hero__content h1 {
  margin: 0 0 .6rem;
  font: 800 clamp(2rem, 5vw, 3.6rem)/1.05 system-ui, sans-serif;
  letter-spacing: -.01em;
}
.gns-hero__content h1 span { color: #52b788; }
.gns-hero__content p {
  margin: 0 0 1.6rem;
  font: 500 clamp(1rem, 1.6vw, 1.3rem)/1.5 system-ui, sans-serif;
  color: #d3e4dc;
}
.gns-hero__cta {
  display: inline-block;
  padding: .85rem 1.6rem;
  border-radius: 999px;
  background: #52b788;
  color: #06210f;
  font: 700 1rem system-ui, sans-serif;
  text-decoration: none;
  box-shadow: 0 10px 30px rgba(82, 183, 136, .35);
  transition: transform .15s ease, box-shadow .15s ease;
}
.gns-hero__cta:hover { transform: translateY(-2px); box-shadow: 0 14px 38px rgba(82, 183, 136, .45); }

/* ── Intro hublot ── */
.gns-hublot { position: absolute; inset: 0; z-index: 40; pointer-events: none; }
.gns-hublot__hole {
  position: absolute; border-radius: 50%;
  background: transparent;
  box-shadow: 0 0 0 9999px #05070c;   /* le « noir » plein cadre vient d'ici */
}
.gns-hublot__img { position: absolute; top: 0; left: 0; pointer-events: none; user-select: none; }

/* ── Carte d'option ── */
.gns-globe__optionlayer {
  position: absolute; top: 30%; right: 5%;
  width: min(520px, 44%); min-width: 300px; height: 150px;
  z-index: 6; pointer-events: none;
  opacity: 0; transition: opacity 4s ease;
}
.gns-globe__optionlayer.is-revealed { opacity: 1; }
.gns-card {
  position: absolute; inset: 0;
  background: rgba(28, 30, 34, .92);
  border: 1px solid rgba(255, 255, 255, .09);
  border-radius: 12px;
  display: flex; overflow: hidden;
  box-shadow: 0 14px 44px rgba(0, 0, 0, .5);
  opacity: 0; transition: opacity 1.1s ease;
}
.gns-card.is-in { opacity: 1; }
.gns-card__thumb { width: 42%; min-width: 120px; flex-shrink: 0; background-size: cover; background-position: center; }
.gns-card__txt { padding: .9rem 1.2rem; display: flex; flex-direction: column; justify-content: center; }
.gns-card__txt h3 { margin: 0 0 .35rem; font: 700 clamp(1rem, 1.6vw, 1.35rem)/1.2 system-ui, sans-serif; color: #6fe3c0; }
.gns-card__txt p { margin: 0; font: 600 clamp(.8rem, 1.1vw, .95rem)/1.4 system-ui, sans-serif; color: #cfe8de; }

@media (max-width: 780px) {
  .gns-globe__optionlayer {
    top: auto; bottom: 150px; right: 0; left: 0; margin: 0 auto;
    width: min(440px, 92%); height: 120px;
  }
}

/* ── Frise du bas ── */
.gns-globe__timeline {
  position: absolute; left: 0; right: 0; bottom: 26px; height: 96px;
  z-index: 6; pointer-events: none; cursor: grab;
  opacity: 0; transition: opacity 4s ease;
}
.gns-globe__timeline.is-revealed { opacity: 1; pointer-events: auto; }
.gns-globe__timeline.is-dragging { cursor: grabbing; }

.gns-tl__viewport {
  position: absolute; left: 50%; bottom: 46px; transform: translateX(-50%);
  width: min(760px, 90%); overflow: hidden;
  -webkit-mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
          mask-image: linear-gradient(90deg, transparent 0, #000 70px, #000 calc(100% - 70px), transparent 100%);
}
.gns-tl__row { position: relative; display: flex; gap: .5rem; width: max-content; }
.gns-pill {
  font: 700 .72rem system-ui, sans-serif; letter-spacing: .03em;
  color: #e9d9a8; border: 1px solid rgba(233, 217, 168, .5);
  border-radius: 999px; padding: .5rem 1rem;
  background: rgba(0, 0, 0, .38); white-space: nowrap;
  transition: background .3s, border-color .3s, color .3s;
}
.gns-pill.is-active { background: rgba(233, 217, 168, .16); border-color: #e9d9a8; color: #fff; }

.gns-tl__line { position: absolute; left: 8%; right: 8%; bottom: 20px; height: 1px; background: rgba(255, 255, 255, .25); }
.gns-tl__fill { position: absolute; left: 8%; bottom: 20px; height: 1px; background: #e9d9a8; width: 0; }
.gns-tl__year {
  position: absolute; left: 50%; bottom: -6px; transform: translateX(-50%);
  font: 800 1.5rem system-ui, sans-serif; color: #d4af37; text-shadow: 0 0 18px rgba(212, 175, 55, .6);
}
.gns-tl__needle {
  position: absolute; left: 50%; top: -16px; bottom: 12px; width: 3px; transform: translateX(-50%);
  background: linear-gradient(180deg, rgba(212,175,55,0) 0%, #d4af37 14%, #d4af37 86%, rgba(212,175,55,0) 100%);
  box-shadow: 0 0 14px rgba(212, 175, 55, .85);
}
.gns-tl__diamond {
  position: absolute; left: 50%; top: -24px; width: 12px; height: 12px;
  transform: translateX(-50%) rotate(45deg);
  background: radial-gradient(circle at 35% 30%, #fff6d8 0%, #ffe697 22%, #f5d148 48%, #d4af37 75%, #a9822a 100%);
  box-shadow: 0 0 8px rgba(255,240,190,1), 0 0 18px rgba(245,209,72,.95), 0 0 34px rgba(212,175,55,.7);
}
.gns-tl__tri {
  position: absolute; left: 50%; bottom: 10px; width: 0; height: 0; transform: translateX(-50%);
  border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 10px solid #d4af37;
  filter: drop-shadow(0 0 6px rgba(212, 175, 55, .8));
}
.gns-tl__years { position: absolute; inset: 0; }
.gns-tl__y { position: absolute; bottom: 0; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 6px; }
.gns-tl__tick { width: 1px; height: 15px; background: #d4af37; }
.gns-tl__lbl { font: 700 .95rem system-ui, sans-serif; color: #d4af37; white-space: nowrap; }

@media (max-width: 780px) {
  .gns-tl__years { display: none; }
  .gns-globe__timeline { bottom: 14px; }
}