<!DOCTYPE html><!--
Bravo, tu as débloqué le niveau secret : "Inspecteur d’éléments".
Rien à gagner, mais tu peux te la péter.
-->
<html lang="fr">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="user-scalable=no">
  <title>Accueil - Arkanium</title>
  <link rel="icon" type="image/x-icon" href="/favicon.ico">

  <!-- Open Graph : aperçu Discord, Google, réseaux sociaux -->
  <meta property="og:title" content="Arkanium - Serveur Minecraft 1.12.2" />
  <meta property="og:site_name" content="Arkanium" />
  <meta property="og:url" content="http://arkanium.serveminecraft.net/" />
  <meta property="og:description" content="Bienvenue sur le serveur Arkanium ! Version 1.12.2. Adresse : arkanium.serveminecraft.net:25566" />
  <meta property="og:image" content="http://arkanium.serveminecraft.net/favicon/favicon.png" />
  <meta name="theme-color" content="#2c2c2c">

  <!-- Favicon -->
  <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon.png">
  <link rel="icon" type="image/png" sizes="180x180" href="favicon/favicon.png">
  <link rel="apple-touch-icon" sizes="180x180" href="favicon/favicon.png">

  <!-- Police -->
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
  <style>
  .ip-text {
  display: inline-block;
  max-width: 100%;
  word-wrap: break-word;
  overflow-wrap: break-word;
  word-break: break-word;
}

  .footer-mc {
  text-align: center;
  font-size: 0.55em;
  color: #bbb;
  background: none;
  padding: 30px 10px 10px 10px;
  margin-top: 40px;
  letter-spacing: 0.5px;
  font-family: inherit;
  /* adapte la couleur si besoin */
}

a.vote-button {
  display: inline-block;
  background: #ffaa00;         /* jaune clair */
  color: #fff;
  padding: 12px 20px;
  margin: 20px auto;
  border-radius: 8px;
  text-decoration: none;
  border: 2px solid #333;      /* comme le bouton vert */
  font-size: 0.75em;
  font-family: 'Press Start 2P', cursive;
  transition: background 0.3s ease;
}

a.vote-button:hover {
  background: #e69a00;         /* légèrement plus foncé que #ffaa00 */
  }

.vote-entry {
  display: none;
  margin: 0px auto;
  margin-bottom: 80px; /* espace en bas */
  width: 580px;
  flex-direction: column;
  align-items: center;
  background: #222;
  border: 2px solid #ffaa00;
  border-radius: 10px;
  padding: 15px;
}

.vote-entry img {
  display: none;
  width: 64px;
  height: 64px;
  margin-bottom: 10px;
}

.vote-entry span {
  display: none;
  font-size: 10px;
  text-align: center;
}

.speech-bubble-invite {
  position: absolute;
  bottom: 100%;
  right: 0;
  min-width: unset;
  max-width: unset;
  background: #fff;
  color: #000;
  padding: 6px 12px;
  border-radius: 12px;
  border: 2px solid #000;
  font-size: 0.70em;
  font-family: 'Press Start 2P', cursive;
  white-space: nowrap;
  transform: translateY(-8px); 
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  box-shadow: 2px 2px 0 #000;
  z-index: 100;
  text-align: left;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 6px; /* espace entre emoji, texte et lien */
}
#villager.show-invite .speech-bubble-invite,
#villager.show-bubble .speech-bubble {
  opacity: 1;
  pointer-events: auto;
}

.chat-message {
  position: absolute;
  opacity: 0;
  transform: translateY(8px);
  transition: opacity 0.8s ease, transform 0.8s ease;
  width: 100%;
  text-align: center;
  margin-top: -15px;
  pointer-events: none;
}

.chat-message.active {
  opacity: 1;
  transform: translateY(0);
}

.bubble-text {
  display: inline-block;
  background: #2c2c2c;
  color: #ffaa00;
  padding: 6px 12px;
  border-radius: 10px;
  font-family: 'Press Start 2P', cursive;
  font-size: 0.75em;
  white-space: nowrap;
  box-shadow: 2px 2px 5px rgba(0, 0, 0, 0.5);
  transform: translateY(-10px);
  min-width: unset;
  max-width: unset;
}

.chat-message.active {
  opacity: 1;
  transform: translateY(0);
}

#chat-label {
  font-size: 1.2em;
  font-family: 'Press Start 2P', cursive;
  color: #ffaa00;
  text-shadow: 2px 2px #000;
  text-align: center;
  padding: 8px 12px;
  border-radius: 8px;
  margin-bottom: 1px;
}

#chat-container {
  display: none; <!-- Bloc des actus masqué temporairement car le rendu ne me satisfait pas.-->
  width: 580px;
  margin: 0px auto;
  position: relative;
  background: #2c2c2c;
  border-radius: 14px; /* coins arrondis seulement en haut */
  box-shadow: 0 4px 15px #000;
  padding-top: 8px; /* espace pour le label */
  border: 0px solid #ffaa00; /* contour */
  margin-bottom: 80px; /* espace en bas */
}

#chat-scroll {
  height: 3em;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  font-size: 0.75em;
  color: #ffaa00;
  position: relative;
  overflow: hidden;
  padding-top: 6px; 
}

    html, body {
      margin: 0;
      padding: 0;
      height: 100%;
      overflow-x: hidden;
      font-family: 'Press Start 2P', cursive;
      background-color: #fff;
      color: #000;
      text-align: center;
      cursor: url('assets/img/diamond_pickaxe_cursor.png') 8 8, auto;
      user-select: text;
}

      body > *:not(#back-to-top):not(#copy-popup):not(script) {
      flex: 1;

    }
    body.day {
      background: url('background_day.png') no-repeat center center fixed;
      background-size: cover;
    }
    body.night {
      background: url('background_night.png') no-repeat center center fixed;
      background-size: cover;
    }
    .container {
      background: #2c2c2c;
      padding: 40px 30px;
      max-width: 800px;
      margin: 50px auto;
      border-radius: 12px;
      box-shadow: 0 0 25px #000;
      position: relative;
      z-index: 10;
      color: #f7d07a;
    }
    h1 {
      color: #ff5555;
      font-size: 1.3em;
      margin-bottom: 20px;
    }
    #mc-status {
      color: white !important;
      font-size: 1.1em;
      margin: 15px 0;
    }
    .version {
      color: white !important;
      font-weight: bold;
      margin: 15px 0;
      font-size: 1em;
    }
    .ip-label {
      font-size: 1.4em;
      color: #f7d07a;
      margin-bottom: 10px;
      text-shadow: 1px 1px 2px #1a1a1a;
    }
    p {
      margin: 15px 0;
      color: inherit;
    }
    a {
      color: #50fa7b;
      text-decoration: none;
    }
    a.button {
      display: inline-block;
      background: #4caf50;
      color: #fff;
      padding: 12px 20px;
      margin: 20px auto;
      border-radius: 8px;
      text-decoration: none;
      border: 2px solid #333;
      font-size: 0.75em;
    }
    a.button:hover {
      background: #45a049;
    }
    .ip-container {
      display: inline-flex;
      align-items: center;
      gap: 8px;
      font-family: 'Press Start 2P', cursive;
      font-size: 1.8em;
      font-weight: bold;
      color: #f7d07a;
      text-shadow: 1px 1px 2px #1a1a1a;
      cursor: default;
      user-select: text;
    }
    .ip-container .icon {
      font-size: 1.3em;
      color: #f7d07a;
      text-shadow: 1px 1px 2px #1a1a1a;
      pointer-events: none;
      user-select: text;
    }
    .ip-text {
      cursor: pointer;
      transition: color 0.3s ease;
      color: #f7d07a;
      text-shadow: 1px 1px 2px #1a1a1a;
      user-select: text;
    }
    .ip-text:hover {
      color: #ffbb33;
      text-shadow: 1px 1px 5px #ffbb33;
    }
    .ip-text.copied {
      color: ##f7d07a !important;
      text-shadow: 1px 1px 4px #f7d07a !important;
    }
    .particle {
      position: absolute;
      width: 12px;
      height: 12px;
      border-radius: 3px;
      pointer-events: none;
      animation: firework 700ms forwards ease-out;
      background: #ffaa00;
      z-index: 9999; /* valeur très haute pour forcer le rendu au-dessus de tout */
    }
    
    @keyframes firework {
      0% {
        transform: translate(0,0) scale(1);
        opacity: 0.9;
      }
      100% {
        transform: translate(var(--x), var(--y)) scale(0);
        opacity: 0;
      }
    }
    #copy-popup {
      position: fixed;
      bottom: 30px;
      left: 50%;
      transform: translateX(-50%);
      border: 2px solid #2c2c2c; /* même couleur que le container */
      background: #2c2c2c;
      border-radius: 12px;
      padding: 14px 28px;
      color: #f7d07a;
      font-family: 'Press Start 2P', cursive;
      font-size: 1em;
      text-shadow: 1px 1px 0 #000;
      box-shadow: 0 0 12px #000;
      display: none;
      z-index: 9999;
      user-select: none;
      pointer-events: auto;
      white-space: nowrap;
      border: 2px solid #ffaa00; /* contour */
    }
    .idle-particle {
      position: fixed;
      width: 10px;
      height: 10px;
      background: #ffaa00;
      border-radius: 2px;
      pointer-events: none;
      animation: floatUp 8s linear forwards;
      filter: drop-shadow(0 0 3px #ffaa00);
      opacity: 0.8;
      will-change: transform, opacity;
      z-index: 20;
    }
    @keyframes floatUp {
      0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
      }
      100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
      }
    }

    #villager {
      position: absolute;
      bottom: 0px;
      right: 8px;
      width: 180px;
      cursor: pointer;
      z-index: 50;
      user-select: none;
      -webkit-user-drag: none;
    }
    #villager img {
  width: 100%;
  height: auto;
  cursor: pointer;
  user-select: none;
  -webkit-user-drag: none;
  /* Ne surtout pas mettre pointer-events: none */
  
    }
    .speech-bubble {
      position: absolute;
      bottom: 100%;
      right: 0;
      background: #fff;
      color: #000;
      padding: 6px 10px;
      border-radius: 10px;
      border: 2px solid #000;
      font-size: 0.7em;
      font-family: 'Press Start 2P', cursive;
      white-space: nowrap;
      transform: translateY(-10px);
      opacity: 0;
      pointer-events: none;
      transition: opacity 0.3s ease;
      box-shadow: 2px 2px 0 #000;
    }
    #villager.show-bubble .speech-bubble {
      opacity: 1;
    }
@keyframes popupBounceIn {
  0% {
    transform: translate(-50%, 100%);
    opacity: 0;
  }
  60% {
    transform: translate(-50%, -20px);
    opacity: 1;
  }
  80% {
    transform: translate(-50%, 10px);
  }
  100% {
    transform: translate(-50%, 0);
  }
}

@keyframes popupSuckOut {
  0% {
    transform: translate(-50%, 0) scale(1);
    opacity: 1;
  }
  100% {
    transform: translate(-50%, 100%) scale(0.2);
    opacity: 0;
  }
}

#copy-popup.show {
  display: block;
}

#copy-popup.just-shown {
  popupBounceIn 0.6s ease-out forwards;
}

#copy-popup.hide {
  animation: popupSuckOut 0.6s ease-in forwards;
}

#copy-popup:hover {
  animation: popupPulse 1.2s infinite alternate;
}
#copy-popup.just-shown {
  popupBounceIn 0.6s ease-out forwards;
}

#copy-popup.hide {
  animation: popupSuckOut 0.6s ease-in forwards;
}

#copy-popup:hover {
  animation: popupPulse 1.2s infinite alternate;
}

@keyframes popupPulse {
  0% {
    transform: translateX(-50%) scale(1);
    box-shadow: 0 0 15px #ffaa00;
  }
  100% {
    transform: translateX(-50%) scale(1.05);
    box-shadow: 0 0 25px #ffaa00;
}
    }

  #back-to-top {
    position: fixed;
    bottom: 25px;
    right: 30px;
    background: #ffaa00;
    color: #000;
    padding: 5px;
    border-radius: 8px;
    font-family: 'Press Start 2P', cursive;
    font-size: 1.2em;
    text-decoration: none;
    align-items: center;
    justify-content: center;
    border: 2px solid #333;
    z-index: 999;
    display: none;
    box-shadow: 0 0 0px #000;
    overflow: hidden;
    white-space: nowrap;
    transition: width 0.3s ease, padding-right 0.1s ease, background-color 0.1s ease;
    cursor: pointer;
    animation: fadeIn 0.2s ease;
    transition: background-color 0.1s forwards;

  }

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

  #back-to-top .icon {
    font-size: 1.8em; /* taille plus grande par défaut */
    line-height: 1;
}

  #back-to-top:hover .icon {
    transform: none; /* NE CHANGE PAS de taille */
}

  #back-to-top:hover {
    padding-right: 18px; /* élargi sur hover uniquement au survol pour laisser place au texte */
    background: #ffcc33;
}

  #back-to-top .tooltip-text {
    display: none;
    margin-left: 10px;
    font-size: 0.7em;
    color: #000;
}

  #back-to-top:hover .tooltip-text {
    display: inline;
}

body::after {
  content: "";
  display: block;
  height: 0;
  margin: 0;
  padding: 0;
  background: transparent;
}

  </style>
</head>
<!-- Overlay + Popup Cookies centrée -->
<div id="cookie-overlay" style="
  display: none;
  position: fixed;
  top: 0; left: 0;
  width: 100%; height: 100%;
  background: rgba(0, 0, 0, 0.85);
  z-index: 10000;
  font-family: 'Press Start 2P', cursive;
  overflow: hidden;
">

  <div id="cookie-banner" style="
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translate(-50%, -50%);
    opacity: 0;
    background: #111;
    color: #ffaa00;
    text-align: center;
    font-size: 0.9em;
    border: 3px solid #ffaa00;
    border-radius: 15px;
    box-shadow: 0 0 20px #000;
    padding: 30px 25px;
    width: 90%;
    max-width: 600px;
    display: none;
    animation: none;
  ">
<div style="font-size: 2em; font-family: 'Press Start 2P', cursive; color: #ffaa00; text-shadow: 2px 2px #000; margin-bottom: 5px;">
  ARKANIUM
</div>
<div style="font-size: 1.1em; font-family: 'Press Start 2P', cursive; color: #ffaa00; text-shadow: 1px 1px #000; margin-bottom: 25px;">
  arkanium.serveminecraft.net
</div>
    <div style="font-size: 1.1em; margin-bottom: 10px;">
      🍪 <strong>Ce site utilise des cookies</strong>
    </div>
    <div style="font-size: 0.9em;">
      Nous utilisons les cookies pour t'offrir la meilleure expérience possible.<br><br>
      <strong>Merci de faire un choix :</strong>
    </div>
    <div style="margin-top: 25px;">
      <button onclick="acceptCookies()" style="
        background: #ffaa00;
        color: #000;
        font-weight: bold;
        border: none;
        padding: 12px 24px;
        border-radius: 10px;
        font-size: 0.9em;
        margin: 0 15px;
        cursor: pointer;
      ">✅ J'accepte</button>

      <button onclick="refuseCookies()" style="
        background: #444;
        color: #fff;
        font-weight: bold;
        border: none;
        padding: 12px 24px;
        border-radius: 10px;
        font-size: 0.9em;
        margin: 0 15px;
        cursor: pointer;
      ">❌ Je refuse</button>
    </div>
  </div>
</div>

<!-- Animation fondue légère -->
<style>
@keyframes fadePopup {
  0% {
    opacity: 0;
    transform: translate(-50%, -50%) scale(0.95);
  }
  100% {
    opacity: 1;
    transform: translate(-50%, -50%) scale(1);
  }
}

html.noscroll, body.noscroll {
  overflow: hidden !important;
  height: 100%;
}
</style>

<!-- Script logique -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const consent = localStorage.getItem('cookiesAccepted');
    const overlay = document.getElementById('cookie-overlay');
    const banner = document.getElementById('cookie-banner');

   if (!consent || consent !== 'yes') {
     // Empêche de scroller tant que la bannière est là
     document.body.style.overflow = 'hidden'; // protection directe
     document.body.classList.add('noscroll'); // pour le CSS
     overlay.style.display = 'block';
     banner.style.display = 'block';
     banner.style.opacity = 1; // Ajouté pour Brave
     banner.style.animation = 'fadePopup 0.5s ease-out forwards';
}
  });

  function acceptCookies() {
    localStorage.setItem('cookiesAccepted', 'yes');
    document.getElementById('cookie-overlay').style.display = 'none';
    // Rétablit le scroll
    document.body.style.overflow = '';
    document.body.classList.remove('noscroll');
  }

  function refuseCookies() {
    history.back(); // ou window.location = '/';
  }
</script>

  <div class="container">
    <div style="font-size: 2em; text-shadow: 2px 2px #000; margin-bottom: 30px;">
  <a href="/" style="color: #ffaa00; text-decoration: none;">ARKANIUM</a>
  </div>
    <h1>🎮 Bienvenue sur le serveur Arkanium !</h1>
    <p id="mc-status">Chargement du statut du serveur...</p>
    <p class="version">Version supportée : <strong>1.12.2</strong></p>
    <p class="ip-label">Adresse IP du serveur :</p>
    <p>
      <span class="ip-container">
        <span class="icon">📋</span>
        <span class="ip-text" title="Clique pour copier">
        arkanium.serveminecraft.net:25566
        </span>
    </p>
    <p><a href="https://www.minecraft.net" target="_blank" rel="noreferrer noopener">🌐 Site officiel Minecraft</a></p>
    <p><a class="button" href="/help">📘 Instructions pour rejoindre le serveur</a></p>
    <p>
    <a class="vote-button" href="/vote">🗳️ Voter pour le serveur</a>
</p>


    <!-- PNJ -->
    <div id="villager">
  <img src="assets/img/villager.png" alt="Villageois" id="villager-img">
  <div class="speech-bubble">Hrmmmmm !</div>
  <div class="speech-bubble-invite">
    👋 Hey ! Découvre <a href="http://bananacraft.serveminecraft.net" target="_blank" style="color:#2b7a2b;text-decoration:underline;"> BananaCraft</a> !
  </div>
</div>
  </div>
<div id="chat-container">
  <div id="chat-label">📰 Actus d'Arkanium</div>
  <div id="chat-scroll">
    <div class="chat-message">🔊 VoiceChat activé sur le serveur !</div>
    <div class="chat-message">👥 Rejoins-nous sur Discord !</div>
    <div class="chat-message">🧱 Découvre les villages du mod Millénaire !</div>
    <div class="chat-message">🎮 Forge requis en version 1.12.2 !</div>
  </div>
</div>
<div style="height: 50px;"></div>
<a id="back-to-top" onclick="scrollToTop()">
  🔼
  <span class="tooltip-text">Retour en haut de la page</span>
  </a>

  <!-- Son du villageois -->
  <audio id="villager-sound" src="assets/sounds/villager.mp3" preload="auto"></audio>

  <div id="copy-popup">Adresse copiée dans le presse-papiers !</div>

  <script>

  const messages = document.querySelectorAll('.chat-message');
  let previousIndex = -1;

  function getRandomIndex() {
    let index;
    do {
      index = Math.floor(Math.random() * messages.length);
    } while (index === previousIndex);
    previousIndex = index;
    return index;
  }

  function showRandomMessage() {
    const index = getRandomIndex();
    messages.forEach((msg, i) => {
      msg.classList.toggle('active', i === index);
    });
  }

  showRandomMessage(); // Premier
  setInterval(showRandomMessage, 5000); // Changement toutes les 5s


    document.querySelector('.ip-text').addEventListener('click', function(event) {
      copyIP(event.target, event);
    });

    const villager = document.getElementById("villager");
const villagerImg = document.getElementById("villager-img");
const villagerSound = document.getElementById("villager-sound");
villagerSound.volume = 0.5;

let inviteTimeout = null;
let hasClickedVillager = false;
let inviteAutoHideTimeout = null;

function showInviteBubble() {
  if (!hasClickedVillager) {
    villager.classList.add("show-invite");

    // Démarre le timer pour masquer la bulle au bout de 30s
    clearTimeout(inviteAutoHideTimeout); // On évite les doublons
    inviteAutoHideTimeout = setTimeout(() => {
      villager.classList.remove("show-invite");
    }, 30000);
  }
}

inviteTimeout = setTimeout(showInviteBubble, 5000);

// Clic sur l’image du PNJ
villagerImg.addEventListener("click", () => {
  hasClickedVillager = true;
  villager.classList.remove("show-invite"); // masque la pub
  villager.classList.add("show-bubble");    // bulle "Hm"
  villagerSound.currentTime = 0;
  villagerSound.play();
  // Masquer la bulle pub si on clique ailleurs que sur le villageois
document.addEventListener("click", function(event) {
  // Si le clic n'est PAS sur le villageois ni à l'intérieur de son bloc
  if (!villager.contains(event.target)) {
    villager.classList.remove("show-invite");
    clearTimeout(inviteTimeout); // Facultatif : coupe le timer
    hasClickedVillager = false; // Pour autoriser le retour de la pub plus tard
  }
});

  setTimeout(() => {
    villager.classList.remove("show-bubble");
    // Relance le timer pub APRÈS 5 secondes
    inviteTimeout = setTimeout(showInviteBubble, 5000);
    hasClickedVillager = false; // Permet d'afficher la pub de nouveau
  }, 1500);

  clearTimeout(inviteTimeout); // coupe le timer s'il était en cours
});

    function setDayNightBackground() {
      const hour = new Date().getHours();
      const isNight = hour < 7 || hour >= 20;
      document.body.classList.add(isNight ? 'night' : 'day');
    }
    function updateStatus() {
      fetch('/status.php?status=1')
        .then(res => res.json())
        .then(data => {
          const el = document.getElementById('mc-status');
          if (data.online && data.maintenance) {
  el.innerHTML = `🟠 Serveur en maintenance...`;
}
 else if (data.online && data.players && data.players.max > 0) {
  const percent = (data.players.online / data.players.max) * 100;
  let colorClass = '';
  let colorSpan = '#1ff042';
  if (percent >= 80) {
    colorClass = 'pulsing-red';
    colorSpan = '#ff4444';
  } else if (percent >= 50) {
    colorSpan = '#ffaa00';
  }
  const label = data.players.online <= 1 ? 'joueur connecté' : 'joueurs connectés';
  el.innerHTML = `🟢 Serveur en ligne — <span class="${colorClass}" style="color:${colorSpan}">${data.players.online}</span> / ${data.players.max} ${label}`;
} else if (data.online) {
  el.innerHTML = `🟡 Serveur en cours de démarrage...`;
} else {
  el.innerHTML = `🔴 Serveur hors ligne`;
}
        })
        .catch(err => {
          console.error("Erreur : ", err);
          document.getElementById('mc-status').textContent = "❌ Erreur de connexion";
        });
    }

    function launchFireworks(el, clickX, clickY) {
      const count = 12;
      for (let i = 0; i < count; i++) {
        const particle = document.createElement('span');
        particle.classList.add('particle');
        particle.style.left = clickX + 'px';
        particle.style.top = clickY + 'px';
        const angle = (360 / count) * i;
        const distance = 70 + Math.random() * 20;
        const rad = angle * (Math.PI / 180);
        const x = Math.cos(rad) * distance + (Math.random() * 10 - 5);
        const y = Math.sin(rad) * distance + (Math.random() * 10 - 5);
        particle.style.setProperty('--x', x + 'px');
        particle.style.setProperty('--y', y + 'px');
        document.body.appendChild(particle);
        setTimeout(() => {
          particle.remove();
        }, 700);
      }
    }

    function copyIP(el, event) {
      const ipText = el;
      const ip = ipText.textContent.trim();
      const clickX = event.clientX;
      const clickY = event.clientY;
      if (navigator.clipboard && window.isSecureContext) {
        navigator.clipboard.writeText(ip)
          .then(() => {
            showCopyPopup();
            launchFireworks(el, clickX, clickY);
            ipText.classList.add('copied');
            setTimeout(() => ipText.classList.remove('copied'), 1800);
          })
          .catch(() => {
            fallbackCopy(ip, el);
            showCopyPopup();
            launchFireworks(el, clickX, clickY);
            ipText.classList.add('copied');
            setTimeout(() => ipText.classList.remove('copied'), 1800);
          });
      } else {
        fallbackCopy(ip, el);
        showCopyPopup();
        launchFireworks(el, clickX, clickY);
        ipText.classList.add('copied');
        setTimeout(() => ipText.classList.remove('copied'), 1800);
      }
    }

    function fallbackCopy(text, el) {
      const textarea = document.createElement('textarea');
      textarea.value = text;
      textarea.style.position = 'fixed';
      textarea.style.opacity = '0';
      document.body.appendChild(textarea);
      textarea.focus();
      textarea.select();
      try {
        document.execCommand('copy');
      } catch (err) {
        console.error('Fallback : impossible de copier', err);
      }
      document.body.removeChild(textarea);
    }

    let hideTimeout;
    let popupAlreadyVisible = false;

    function showCopyPopup() {
      const popup = document.getElementById('copy-popup');
  
    // Empêche de relancer l'animation d'entrée si déjà visible
  if (!popupAlreadyVisible) {
    popup.classList.remove('hide');
    popup.classList.add('show', 'just-shown');
    popupAlreadyVisible = true;

    // Supprime la classe d'animation d'entrée après qu'elle ait fini
    setTimeout(() => {
    popup.classList.remove('just-shown');
    }, 600); // durée exacte de l’animation .just-shown
  }

     const startHideTimer = () => {
       hideTimeout = setTimeout(() => {
         popup.classList.remove('show');
         popup.classList.add('hide');
         popupAlreadyVisible = false;
    }, 1600);
  };

     const stopHideTimer = () => {
       clearTimeout(hideTimeout);
  };

     popup.removeEventListener('mouseenter', stopHideTimer);
     popup.removeEventListener('mouseleave', startHideTimer);
     popup.addEventListener('mouseenter', stopHideTimer);
     popup.addEventListener('mouseleave', startHideTimer);

     startHideTimer();
}

    let idleTimeout;
    let particlesInterval;
    const idleDelay = 10000;
    function createIdleParticle() {
      const particle = document.createElement('div');
      particle.classList.add('idle-particle');
      particle.style.left = Math.random() * window.innerWidth + 'px';
      particle.style.bottom = '0px';
      document.body.appendChild(particle);
      setTimeout(() => {
        particle.remove();
      }, 8000);
    }

    function startIdleParticles() {
      if (particlesInterval) return;
      particlesInterval = setInterval(createIdleParticle, 300);
    }

    function stopIdleParticles() {
      clearInterval(particlesInterval);
      particlesInterval = null;
      document.querySelectorAll('.idle-particle').forEach(p => p.remove());
    }

    function resetIdleTimer() {
      stopIdleParticles();
      clearTimeout(idleTimeout);
      idleTimeout = setTimeout(startIdleParticles, idleDelay);
    }

    ['mousemove', 'keydown', 'scroll', 'click', 'touchstart'].forEach(evt => {
      window.addEventListener(evt, resetIdleTimer, { passive: true });
    });

    resetIdleTimer();
    setDayNightBackground();
    updateStatus();
    setInterval(updateStatus, 5000);
    
    const backToTop = document.getElementById('back-to-top');
    let lastScrollY = 0;
    let lastInnerHeight = window.innerHeight;
    let scrollTimeout;

    window.addEventListener('scroll', () => {
      clearTimeout(scrollTimeout);

      scrollTimeout = setTimeout(() => {
        const heightDiff = Math.abs(window.innerHeight - lastInnerHeight);
        const scrollDiff = Math.abs(window.scrollY - lastScrollY);

        if (scrollDiff > 10 && window.scrollY > 150 && heightDiff < 30) {
          backToTop.style.display = 'flex';
        } else {
          backToTop.style.display = 'none';
        }

        lastScrollY = window.scrollY;
        lastInnerHeight = window.innerHeight;
      }, 150);
    });

function scrollToTop() {
  const btn = document.getElementById('back-to-top');
  btn.style.display = 'none'; // cache le bouton dès le clic
  window.scrollTo({ top: 0, behavior: 'smooth' });
}
  </script>
<section id="vote-top" style="display: none;"
  margin: 0px auto;
  margin-bottom: 80px; /* espace en bas */
  width: 580px;
  background-color: #2c2c2c;
  color: white;
  border-radius: 10px;
  border-top: 3px solid #ffaa00;
  font-family: 'Press Start 2P', cursive;
  border-bottom: none;
">
  <h2 style="text-align:center;">📅 Top Votants du Mois</h2>
  <div id="vote-list" style="display: flex; justify-content: center; flex-wrap: wrap; gap: 30px; margin-top: 20px;"></div>
  <div style="text-align: center; margin-top: 40px;">
    <a href="https://serveur-prive.net/minecraft/arkanium/vote" target="_blank" style="
      background: #ffaa00;
      color: #ffffff;
      font-weight: bold;
      border: none;
      padding: 12px 24px;
      border-radius: 10px !important;
      font-size: 0.9em;
      cursor: pointer;
      font-family: 'Press Start 2P', cursive;
      border: 2px solid #ffaa00;
      text-decoration: none;
      box-shadow: 0 0 12px #000;
    ">🗳️ Voter maintenant</a>
  </div>
</section>
<script>
fetch('https://serveur-prive.net/api/v1/servers/OTUPFJJD/statistics')
  .then(response => response.json())
  .then(data => {
    const topVotants = data?.top_voters?.monthly?.slice(0, 10) || [];
    const container = document.getElementById("vote-list");

    if (topVotants.length === 0) {
      container.innerHTML = "<p style='color:#aaa; font-size: 0.8em;'>Aucun vote ce mois-ci pour le moment.</p>";
      return;
    }

    topVotants.forEach(entry => {
      const pseudo = entry.nickname;

      const div = document.createElement("div");
      div.className = "vote-entry";

      const img = document.createElement("img");
      img.src = `https://minotar.net/avatar/${pseudo}/64`;

      const name = document.createElement("span");
      name.textContent = pseudo;

      div.appendChild(img);
      div.appendChild(name);
      container.appendChild(div);
    });
  })
  .catch(err => {
    console.error("Erreur API Serveur-Prive.net :", err);
    document.getElementById("vote-list").innerHTML = "<p style='color:#aaa; font-size: 0.8em;'>Erreur lors du chargement des votes.</p>";
  });
</script>
<footer class="footer-mc">
  Copyright © 2025 Arkanium - Tous droits réservés.<br>
  Ce serveur n’est ni affilié, ni soutenu par Mojang ou Microsoft.
</footer>
</body>
</html>