/* ============================================================
   eXtragone · Atlas — styles spécifiques
   ============================================================ */

/* Fond animé */
.gradient-bg {
  position: fixed;
  inset: 0;
  z-index: -1;
  background: linear-gradient(120deg, var(--g1), var(--g2), var(--g3), var(--g2));
  background-size: 300% 300%;
  animation: gradientFlow 18s ease-in-out infinite;
}

html:not(.dark) .gradient-bg {
  --g1: oklch(98.4% 0.003 247.858);
  --g2: oklch(92.9% 0.013 255.508);
  --g3: oklch(93.2% 0.032 255.585);
}

html.dark .gradient-bg {
  --g1: oklch(13% 0.028 261.692);
  --g2: oklch(21% 0.034 264.665);
  --g3: oklch(27.8% 0.033 256.848);
}

@keyframes gradientFlow {
  0%, 100% { background-position: 0% 50%; }
  50%       { background-position: 100% 50%; }
}

/* ---- Conteneur carte ---- */
#chartdiv {
  /* Le fond transparent laisse voir le gradient-bg */
  background: transparent !important;
}

/* Masquer le watermark amCharts (remplacé par svg dispose dans le JS) */
[class*="am5-layer-30"] { display: none !important; }

/* ---- Tooltip ---- */
#tooltip {
  position: fixed;
  pointer-events: none;
  opacity: 0;
  transform: translate(-50%, -130%);
  transition: opacity .12s ease;
  z-index: 60;
}

/* ---- Panel latéral (slide depuis la droite) ---- */
#panel {
  transform: translateX(100%);
  transition: transform .35s cubic-bezier(0.22, 1, 0.36, 1);
}

#panel.open { transform: translateX(0); }

/* ---- Scrollbar fine ---- */
.scroll-thin::-webkit-scrollbar { width: 6px; }
.scroll-thin::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.4);
  border-radius: 3px;
}
.dark .scroll-thin::-webkit-scrollbar-thumb { background: rgba(71, 85, 105, 0.6); }

/* ---- Légende gradient ---- */
.legend-gradient {
  background: linear-gradient(
    to right,
    rgba(147, 197, 253, 0.4),
    rgba(79, 124, 199, 0.7),
    rgba(51, 92, 163, 1)
  );
}

/* ---- Animation d'entrée des cartes outils ---- */
@keyframes slideUp {
  from { opacity: 0; transform: translateY(12px); }
  to   { opacity: 1; transform: translateY(0); }
}
.tool-card { animation: slideUp .3s ease-out both; }

/* ---- Boutons de vue ---- */
.view-btn { color: #475569; }
.dark .view-btn { color: #cbd5e1; }
.view-btn:hover { background: rgba(148, 163, 184, 0.15); }

.view-btn-active,
.view-btn-active:hover {
  background: #335ca3 !important;
  color: white !important;
  box-shadow: 0 4px 14px -4px rgba(51, 92, 163, 0.5);
}

/* ---- Emoji drapeaux ---- */
.flag {
  font-family: "Twemoji Mozilla", "Noto Color Emoji", "Segoe UI Emoji",
    "Apple Color Emoji", sans-serif;
}

/* ---- Hint ---- */
#hint { transition: opacity .4s ease; }

/* ---- Contrôles zoom amCharts : repositionnement ---- */
.am5-zoomcontrol {
  right: 16px !important;
  bottom: 80px !important;
}