/* ============================================================
   Qadr — La Planète (Terre 3D) · overlay plein écran, mobile
   ============================================================ */

#globe-overlay {
  position: fixed; inset: 0; z-index: 5000;
  background: #000; opacity: 1; transition: opacity 1.1s ease;
}
#globe-overlay.fading { opacity: 0; pointer-events: none; }
#globe-overlay.hidden { display: none; }

#globe-canvas {
  position: absolute; inset: 0; width: 100%; height: 100%; display: block;
  cursor: grab; touch-action: none;
}
#globe-canvas.dragging { cursor: grabbing; }

.globe-ui {
  position: absolute; top: 7vh; left: 50%; transform: translateX(-50%);
  text-align: center; pointer-events: none; z-index: 2;
  transition: opacity 0.5s ease; width: 100%;
}
.globe-actions { transition: opacity 0.5s ease; }
.globe-logo { margin-bottom: 6px; filter: drop-shadow(0 0 24px rgba(24,224,138,0.6)); animation: globeFadeUp 1.2s ease both; }
.globe-logo img { display: inline-block; border-radius: 18px; }
.globe-title {
  font-size: clamp(34px, 8vw, 58px); font-weight: 900; letter-spacing: -0.03em;
  color: #fff; text-shadow: 0 0 40px rgba(24,224,138,0.5); animation: globeFadeUp 1.2s ease both;
}
.globe-title span {
  background: linear-gradient(135deg, #18e08a, #16c2d6, #34f5c5);
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.globe-sub {
  margin-top: 6px; font-size: clamp(13px, 3.4vw, 17px); color: rgba(255,255,255,0.65);
  font-weight: 500; letter-spacing: 0.03em; padding: 0 18px; animation: globeFadeUp 1.2s 0.25s ease both;
}

.globe-search { position: relative; margin: 22px auto 0; width: min(420px, 86vw); pointer-events: auto; animation: globeFadeUp 1.2s 0.4s ease both; }
.globe-search .gs-icon { position: absolute; left: 18px; top: 50%; transform: translateY(-50%); font-size: 15px; opacity: 0.75; pointer-events: none; }
#globe-search-input {
  width: 100%; padding: 14px 20px 14px 46px; border-radius: 999px;
  border: 1px solid rgba(255,255,255,0.22); background: rgba(12,16,30,0.62);
  backdrop-filter: blur(14px); color: #fff; font-family: inherit; font-size: 15px; font-weight: 500;
  outline: none; transition: all 0.25s ease; box-shadow: 0 8px 32px rgba(0,0,0,0.45);
}
#globe-search-input::placeholder { color: rgba(255,255,255,0.45); }
#globe-search-input:focus { border-color: rgba(24,224,138,0.8); box-shadow: 0 0 0 4px rgba(24,224,138,0.16), 0 8px 32px rgba(0,0,0,0.5); }
.globe-suggestions {
  position: absolute; top: calc(100% + 8px); left: 0; right: 0; border-radius: 18px;
  background: rgba(12,16,30,0.92); border: 1px solid rgba(255,255,255,0.14); backdrop-filter: blur(18px);
  overflow: hidden; box-shadow: 0 16px 48px rgba(0,0,0,0.6); display: none;
}
.globe-suggestions.open { display: block; animation: globeFadeUp 0.22s ease both; }
.gs-item { display: flex; align-items: center; gap: 12px; padding: 13px 18px; cursor: pointer; transition: background 0.15s ease; font-size: 14.5px; color: rgba(255,255,255,0.88); }
.gs-item:hover, .gs-item.sel { background: rgba(24,224,138,0.18); }
.gs-item .flag { font-size: 18px; }
.gs-item .country { margin-left: auto; font-size: 12px; color: rgba(255,255,255,0.45); }

.globe-actions { position: absolute; bottom: 8vh; left: 50%; transform: translateX(-50%); display: flex; flex-direction: column; align-items: center; gap: 14px; z-index: 2; }
.globe-scrollcue { display: flex; flex-direction: column; align-items: center; gap: 7px; pointer-events: none; animation: globeFadeUp 1.2s 0.5s ease both; }
.gsc-mouse { width: 26px; height: 42px; border: 2px solid rgba(255,255,255,0.55); border-radius: 14px; position: relative; }
.gsc-wheel { position: absolute; left: 50%; top: 7px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: #34f5c5; box-shadow: 0 0 8px rgba(52,245,197,0.9); animation: gscWheel 1.7s ease-in-out infinite; }
@keyframes gscWheel { 0%{opacity:1;transform:translateY(0)} 55%{opacity:0;transform:translateY(15px)} 56%{opacity:0;transform:translateY(0)} 100%{opacity:1;transform:translateY(0)} }
.gsc-text { font-size: 14px; font-weight: 600; color: rgba(255,255,255,0.85); letter-spacing: 0.02em; text-shadow: 0 2px 14px rgba(0,0,0,0.7); padding: 0 16px; text-align: center; }
@media (pointer: coarse) { .gsc-mouse { display: none; } }

.globe-skip { pointer-events: auto; background: none; border: none; color: rgba(255,255,255,0.45); font-family: inherit; font-size: 13px; cursor: pointer; transition: color 0.2s ease; animation: globeFadeUp 1.2s 0.65s ease both; }
.globe-skip:active { color: rgba(255,255,255,0.9); }

#globe-flash { position: absolute; inset: 0; background: #fff; opacity: 0; pointer-events: none; z-index: 4; transition: opacity 0.16s ease; }
#globe-flash.on { opacity: 0.85; }

.globe-altitude {
  position: absolute; top: calc(18px + env(safe-area-inset-top,0px)); right: 16px; z-index: 3; display: none;
  flex-direction: column; gap: 5px; padding: 10px 14px; border-radius: 12px;
  background: rgba(8,12,24,0.55); border: 1px solid rgba(24,224,138,0.35); backdrop-filter: blur(8px);
  font-family: 'SF Mono', 'Consolas', monospace; pointer-events: none;
}
.globe-altitude.on { display: flex; animation: globeFadeUp 0.3s ease both; }
.ga-row { display: flex; align-items: baseline; gap: 10px; }
.ga-label { font-size: 9.5px; letter-spacing: 0.18em; color: rgba(24,224,138,0.7); }
.ga-val { font-size: 14px; font-weight: 700; color: #18e08a; text-shadow: 0 0 12px rgba(24,224,138,0.6); min-width: 96px; text-align: right; }

@keyframes globeFadeUp { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: translateY(0); } }