/* 1. Déclare la police Regular */
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNovaRegular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

/* 2. Déclare la police Semibold */
@font-face {
  font-family: "Proxima Nova";
  src: url("fonts/ProximaNovaSemibold.otf") format("opentype");
  font-weight: 600;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: 'Noto Color Emoji';
  src: url('/static/fonts/NotoColorEmoji.ttf') format('truetype');
  font-weight: normal;
  font-style: normal;
}



body {
  font-family: 'Proxima Nova', sans-serif;
  background-color: #121212;
  color: #e0e0e0;
  margin: 0;
  padding: 20px;
}

h1, h2, h3, .semibold {
  font-weight: 600;
}

/* Texte normal */
p, span, .regular {
  font-weight: 400;
}

h1 {
  text-align: center;
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 20px 0;
  background-color: #1e1e1e;
}
th, td {
  padding: 10px;
  border: 1px solid #333;
  text-align: left;
}
th {
  background-color: #333;
}
tr:hover {
  background-color: #2c2c2c;
}
a {
  color: #4CAF50;
  text-decoration: none;
}
a:hover {
  text-decoration: underline;
}
.centered {
  text-align: center;
}
.price-container {
    position: relative;
    overflow: hidden;
    padding: 10px; /* Assurez-vous d'avoir un padding pour l'espace du panneau */
}

.price-container .price-value {
    display: block; /* Assure que le prix occupe toute la largeur initialement */
    text-align: center; /* Gardez le prix centré */
}

.price-container .growth-panel {
    position: absolute;
    top: -5px; /* Commence en haut pour recouvrir le prix */
    left: 0;
    right: 0;
    background-color: rgba(0, 0, 0, 0.8);
    color: white;
    text-align: center;
    padding: 5px;
    font-size: 0.9em;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease-in-out, visibility 0s 0.3s; /* Transition pour l'opacité et la visibilité */
    border-radius: 3px;
    display: flex; /* Utiliser flex pour centrer verticalement le texte */
    justify-content: center; /* Centrer horizontalement */
    align-items: center; /* Centrer verticalement */
    height: 100%; /* Prend toute la hauteur du conteneur */
}

.price-container:hover .growth-panel {
    opacity: 1;
    visibility: visible;
    transition: opacity 0.3s ease-in-out, visibility 0s 0s;
}

.price-container:hover .price-value {
    opacity: 0; /* Faire disparaître le prix au survol */
    transition: opacity 0.3s ease-in-out;
}

.site-logo img {
  max-width: 200px;     /* adapte la largeur max */
  height: auto;         /* garde le ratio */
  display: inline-block;
}

#stats-panel {
  background: #1e1e1e;
  padding: 10px;
  border-radius: 5px;
  margin-bottom: 20px;
  text-align: center;
}
#stats-panel p {
  margin: 5px 0;
  font-weight: bold;
}

.section-title {
  font-family: 'Noto Color Emoji', sans-serif;
  display: flex;
  align-items: center;
  gap: 0.5em;       /* Espace entre l’emoji et le texte */
  font-size: 1.2em; /* Ajuste selon tes besoins */
  margin: 1em 0 0.5em;
}

.section-title .emoji {
  font-size: 1.4em;    /* Taille de l’emoji */
  line-height: 1;      /* Pour qu’il soit centré */
}

/* Tableau Best Tokens à 50% */
.half-width-table {
  width: 50% !important;
  margin: 20px auto !important;
}

/* Cellule adresse avec copie */
.half-width-table .copy-cell {
  position: relative;
  min-width: 180px;
}

.half-width-table .copy-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  display: inline-block;
  width: 24px;
  height: 24px;
  background: url('/static/copy.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
  text-indent: -9999px;
}

.half-width-table .copied-tooltip {
  position: absolute;
  top: -1.5em;
  right: 0;
  background: #4CAF50;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8em;
  opacity: 0;
  transition: opacity 0.2s;
}

.half-width-table .copied-tooltip.visible {
  opacity: 1;
}

/* dans style.css */
.copy-cell {
  position: relative;
}
.copy-btn {
  position: absolute;
  right: 5px;
  top: 50%;
  transform: translateY(-50%);
  width: 24px;
  height: 24px;
  background: url('/static/copy.png') no-repeat center center;
  background-size: contain;
  cursor: pointer;
}
.copied-tooltip {
  position: absolute;
  top: -1.5em;
  right: 0;
  background: #4CAF50;
  color: white;
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 0.8em;
  opacity: 0;
  transition: opacity 0.2s;
  pointer-events: none;
}
.copied-tooltip.visible {
  opacity: 1;
}
#wallet-action {
  background-color: #4CAF50; /* Couleur d'arrière-plan du bouton, vous pouvez personnaliser */
  color: white;              /* Couleur du texte */
  border: none;              /* Enlever la bordure */
  padding: 10px 20px;        /* Espace intérieur du bouton */
  font-size: 12px;           /* Taille du texte */
  font-weight: bold;         /* Gras pour le texte */
  border-radius: 5px;        /* Coins arrondis */
  cursor: pointer;          /* Curseur en forme de main */
  transition: background-color 0.3s ease; /* Effet de transition pour l'arrière-plan */
  position: absolute;           /* Positionner le bouton en haut à droite */
  top: 20px;                 /* À 20px du haut */
  right: 20px;               /* À 20px de la droite */
  z-index: 1000;             /* S'assurer qu'il reste au-dessus d'autres éléments */
}

#wallet-actiont:hover {
  background-color: #45a049; /* Couleur d'arrière-plan au survol */
}

/* Ajoutez ce sélecteur */
#connectButton, #payButton {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#connectButton:hover, #payButton:hover {
  background-color: #45a049;
}
.section-header {
  display: inline-flex;
  align-items: center;
  background-color: #333333;
  color: white;
  padding: 10px 18px;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 0;
  border-bottom-left-radius: 0;
  border-top-left-radius: 0;
  font-size: 1.3em;
  font-weight: bold;
  margin-top: 20px;
  margin-bottom: 0px;
}

.solana-logo {
  height: 44px;
  width: 44px;
  margin-right: 10px;
  object-fit: contain;
  display: inline-block;
}

.no-margin-top {
  margin-top: 0 !important;
}

.button-standard {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#top-gems-button {
  position: absolute;
  top: 110px; /* ajusté pour être sous le bouton connect wallet */
  right: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: 'Proxima Nova', 'Noto Color Emoji', sans-serif;
}

#top-gems-button:hover {
  background-color: #45a049;
}
.section-header.centered {
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: #333;
  color: white;
  padding: 10px 0;
  border-top-left-radius: 12px !important;
  border-top-right-radius: 12px !important;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  font-size: 1.3em;
  font-weight: bold;
  width: 50% !important;
  margin: 20px auto 0 auto !important;
  box-sizing: border-box;
}

#token-analytics-button {
  position: absolute;
  top: 65px; /* ajusté pour être sous Top Gems */
  right: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: 'Proxima Nova', 'Noto Color Emoji', sans-serif;
}

#token-analytics-button:hover {
  background-color: #45a049;
}

.toast {
  position: fixed;
  top: 20px;
  right: 20px;
  padding: 15px;
  border-radius: 5px;
  color: white;
  z-index: 1000;
  opacity: 0;
  transition: opacity 0.3s;
}
.toast.error { background: #ff4444; }
.toast.success { background: #00C851; }
.toast.visible { opacity: 1; }

#alert-toggle-btn {
  background-color: #4CAF50;
  color: white;
  border: none;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

#alert-toggle-btn:hover {
  background-color: #45a049;
}
.glow {
  animation: glow-animation 1s ease-in-out infinite alternate;
  box-shadow: 0 0 10px 3px #4caf50;
  background-color: #223322 !important;
}

@keyframes glow-animation {
  from {
    box-shadow: 0 0 10px 3px #4caf50;
    background-color: #223322;
  }
  to {
    box-shadow: 0 0 20px 6px #76ff03;
    background-color: #2d4d2d;
  }
}

.analytics-button {
  display: inline-block;
  background-color: #333;
  color: #fff;
  padding: 10px 20px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: bold;
  transition: background-color 0.2s;
}

.analytics-button:hover {
  background-color: #555;
}

.address-cell {
  width: 160px;
  min-width: 160px;
  max-width: 160px;
}

.faq-container {
  max-width: 900px;
  margin: 40px auto;
  padding: 0 20px;
}

.faq-item {
  background-color: #1e1e1e;
  border: 1px solid #333;
  border-radius: 8px;
  margin-bottom: 20px;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.3);
}

.faq-question {
  font-size: 1.2em;
  font-weight: 600;
  margin-bottom: 10px;
  color: #4CAF50;
}

.faq-answer {
  margin: 0.5em 0;
  line-height: 1.6em;
  font-weight: 400;
}

.faq-answer ul {
  padding-left: 1.2em;
}

.faq-answer li {
  margin-bottom: 5px;
}

#faq-button {
  position: absolute;
  top: 155px;
  right: 20px;
  background-color: #4CAF50;
  color: white;
  padding: 10px 20px;
  font-size: 12px;
  font-weight: bold;
  border-radius: 5px;
  text-decoration: none;
  display: inline-block;
  transition: background-color 0.3s ease;
  font-family: 'Proxima Nova', 'Noto Color Emoji', sans-serif;
  z-index: 1000; /* optionnel, mais utile pour s'assurer qu'il passe au-dessus */
}

#faq-button:hover {
  background-color: #45a049;
}

.ath-badge {
  font-size: 1.2em;
  font-family: 'Noto Color Emoji', sans-serif;
}
}/* Bleus (niveaux bas) */
.ath-badge-blue1 { color: #D6EFFF !important; }    /* 100-199 - Bleu glacier */
.ath-badge-blue2 { color: #87CEEB !important; }    /* 200-299 - Bleu ciel */
.ath-badge-blue3 { color: #1E90FF !important; }    /* 300-399 - Bleu profond */

/* Verts/Turquoise (niveaux moyens) */
.ath-badge-green1 { color: #40E0D0 !important; }   /* 400-499 - Turquoise */
.ath-badge-green2 { color: #7CFC00 !important; }   /* 500-599 - Vert chartreuse */
.ath-badge-green3 { color: #32CD32 !important; }   /* 600-699 - Vert forêt */

/* Jaunes/Oranges (niveaux intermédiaires) */
.ath-badge-yellow1 { color: #FFDAB9 !important; }  /* 700-799 - Pêche clair */
.ath-badge-yellow2 { color: #FFD700 !important; }  /* 800-899 - Jaune doré */
.ath-badge-yellow3 { color: #FFA500 !important; }  /* 900-999 - Orange vif */

/* Rouges (niveaux élevés) */
.ath-badge-orange1 { color: #FF6347 !important; }  /* 1000-1999 - Corail */
.ath-badge-orange2 { color: #FF0000 !important; }  /* 2000-2999 - Rouge vif */
.ath-badge-orange3 { color: #FF69B4 !important; }  /* 3000-3999 - Rose chaud */

/* Violets (niveaux très élevés) */
.ath-badge-red1 { color: #DA70D6 !important; }     /* 4000-4999 - Orchidée */
.ath-badge-red2 { color: #9370DB !important; }     /* 5000-5999 - Violet lavande */
.ath-badge-pink { color: #8A2BE2 !important; }     /* 6000-6999 - Violet bleuté */
.ath-badge-purple { color: #4B0082 !important; }   /* 7000-9999 - Indigo profond */

/* Blanc (niveau maximum) */
.ath-badge-white { color: #FFFFFF !important; }    /* 10000+ */
}
/* Bleus (niveaux bas) */
.ath-badge-blue1 { color: #D6EFFF !important; }    /* 100-199 - Bleu glacier */
.ath-badge-blue2 { color: #87CEEB !important; }    /* 200-299 - Bleu ciel */
.ath-badge-blue3 { color: #1E90FF !important; }    /* 300-399 - Bleu profond */

/* Verts/Turquoise (niveaux moyens) */
.ath-badge-green1 { color: #40E0D0 !important; }   /* 400-499 - Turquoise */
.ath-badge-green2 { color: #7CFC00 !important; }   /* 500-599 - Vert chartreuse */
.ath-badge-green3 { color: #32CD32 !important; }   /* 600-699 - Vert forêt */

/* Jaunes/Oranges (niveaux intermédiaires) */
.ath-badge-yellow1 { color: #FFDAB9 !important; }  /* 700-799 - Pêche clair */
.ath-badge-yellow2 { color: #FFD700 !important; }  /* 800-899 - Jaune doré */
.ath-badge-yellow3 { color: #FFA500 !important; }  /* 900-999 - Orange vif */

/* Jaune citron (nouvelle couleur pour 1000–1999) */
.ath-badge-orange1 { color: #FFF700 !important; }  /* 1000-1999 - Jaune citron */

/* Décalage vers l’avant */
.ath-badge-orange2 { color: #FF6347 !important; }  /* 2000-2999 - Corail (ex-orange1) */
.ath-badge-orange3 { color: #FF0000 !important; }  /* 3000-3999 - Rouge vif (ex-orange2) */
.ath-badge-red1    { color: #FF69B4 !important; }  /* 4000-4999 - Rose chaud (ex-orange3) */
/* .ath-badge-red2 supprimé */
.ath-badge-pink    { color: #DA70D6 !important; }  /* 5000-5999 - Orchidée (ex-red1) */
.ath-badge-purple  { color: #8A2BE2 !important; }  /* 6000-6999 - Violet bleuté (ex-pink) */
.ath-badge-purple2 { color: #B266FF !important; }  /* 7000-9999 - Indigo profond (ex-purple renommé ici pour clarté, mais à mapper sur .ath-badge-purple en HTML) */

/* Blanc (inchangé) */
.ath-badge-white   { color: #FFFFFF !important; }  /* 10000+ */