<!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>Rejoindre le serveur - Arkanium</title>
  <meta name="theme-color" content="#2c2c2c">
  <!-- Favicon standard (bureaux et Android) -->
  <link rel="icon" type="image/png" sizes="32x32" href="/favicon/favicon.png">
  <link rel="icon" type="image/png" sizes="180x180" href="/favicon/favicon.png">
  <!-- Apple (iPhone/iPad) -->
  <link rel="apple-touch-icon" sizes="180x180" href="/favicon/favicon.png">
  <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet" />
  <style>
  .guide-popup-content {
  padding-right: 26px; /* Ajuste pour que la barre ne colle pas le bord */
}

/* Scrollbar */
.guide-popup-content::-webkit-scrollbar {
  width: 13px;
  background: transparent; /* Transparent pour ne pas ajouter de fond parasite */
}

/* Track (gouttière blanche bien visible) */
.guide-popup-content::-webkit-scrollbar-track {
  background: #fff;          /* Gouttière blanche */
  border-radius: 18px;       /* Arrondi comme l’exemple */
  margin: 8px 0;
}

/* Thumb (barre jaune ou autre couleur du site) */
.guide-popup-content::-webkit-scrollbar-thumb {
  background: #ffaa00;       /* Jaune Arkanium */
  border-radius: 18px;       /* Bien rond */
  box-shadow: none;
  border: 3px solid #fff;    /* Effet “gouttière”, épaisseur selon la largeur du track */
}

.guide-popup-content {
  scrollbar-width: thin;
  scrollbar-color: #ffaa00 #fff; /* thumb, track */
}

  .guide-popup-content {
  background: #111;
  color: #fff;
  margin: 5% auto;
  padding: 30px;
  width: 90%;
  max-width: 600px;
  border: 3px solid #ffaa00;
  border-radius: 15px;
  box-shadow: 0 0 20px #000;
  font-family: 'Press Start 2P', cursive;
  max-height: 70vh;         /* Limite la hauteur à 70% de la fenêtre */
  overflow-y: auto;         /* Affiche une barre de scroll verticale si besoin */
  overscroll-behavior: contain;
  padding-right: 24px; /* au lieu de 30px ou 20px */
}

    .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 */
}
  .button.new {
  position: relative;
}

.button.new::after {
  content: "NOUVEAU";
  position: absolute;
  top: -6px;
  left: 50%;
  transform: translateX(-50%);
  background: #ff4444;
  color: #fff;
  font-size: 0.70em;
  font-family: 'Press Start 2P', cursive;
  padding: 4px 12px;
  border-radius: 6px;
  box-shadow: 0 0 5px #000;
  white-space: nowrap;
}

.badge-optional {
  content: "OPTIONNEL";
  position: absolute;
  top: 5px;
  left: 50%;
  transform: translateX(-50%);
  background: #ffa500;
  color: #fff;
  font-size: 0.55em;
  font-family: 'Press Start 2P', cursive;
  padding: 4px 12px;
  border-radius: 6px;
  box-shadow: 0 0 5px #000;
  white-space: nowrap;
}
.button-wrapper {
  position: relative;
  display: inline-block;
  margin: 15px;
  
}
    body::after {
      content: '';
      display: block;
      height: 0px;
    }
    
    html, body {
      margin: 0;
      padding: 0;
      min-height: 100%;
      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;
      overflow-x: hidden;
      position: relative;
      user-select: text;
    }
    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;
    }
    .container p {
      color: #fff;
    }
    .main-title {
      font-size: 2em;
      color: #ffaa00;
      text-shadow: 2px 2px #000;
      margin-bottom: 10px;
    }

    .domain-title {
      font-size: 1.2em;
      color: #ffaa00;
      text-shadow: 1px 1px #000;
      margin-bottom: 30px;
    }
    h1 {
      color: #ff5555;
      font-size: 1.2em;
      margin-bottom: 20px;
    }
    h2 {
      color: #ffaa00;
      font-size: 1em;
      margin: 30px 0 15px;
    }
    a.button {
      display: inline-block;
      background: #4caf50;
      color: #fff;
      padding: 12px 20px;
      margin: 10px;
      border-radius: 8px;
      text-decoration: none;
      border: 2px solid #333;
      font-size: 0.75em;
    }
    a.button:hover {
      background: #45a049;
    }
    code {
      background: #333;
      color: #0f0;
      padding: 4px 8px;
      border-radius: 4px;
      font-size: 0.75em;
    }
    #guide-popup a.button {
      background: #d35400;
      border-color: #e67e22;
    }
    #guide-popup a.button:hover {
      background: #e67e22;
    }
    @keyframes bounce {
      0%, 100% {
        transform: translateY(0);
      }
      50% {
        transform: translateY(-5px);
      }
    }
    .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: 9999;
    }
    @keyframes floatUp {
      0% {
        transform: translateY(0) scale(1);
        opacity: 0.8;
      }
      100% {
        transform: translateY(-100vh) scale(0.5);
        opacity: 0;
      }
    }

  #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;
}
</style>
<!-- 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;
  ">
<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 -->
<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 -->
<script>
  document.addEventListener('DOMContentLoaded', () => {
    const consent = localStorage.getItem('cookiesAccepted');
    const overlay = document.getElementById('cookie-overlay');
    const banner = document.getElementById('cookie-banner');

    const referrer = document.referrer;
    const origin = window.location.origin;
    const comesFromHome =
      referrer === origin + '/' ||
      referrer === origin + '/index.html' ||
      referrer === origin + '/accueil' ||
      referrer === origin + '/accueil.html';

   if (consent !== 'yes' && !comesFromHome) {
     // 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();
  }
</script>
</head>
<body>
  <div class="container">
    <div class="main-title">
    <a href="/" style="color: inherit; text-decoration: none;">ARKANIUM</a>
    </div>
    <div class="domain-title">
    <a href="http://arkanium.serveminecraft.net" style="color: inherit; text-decoration: none;">
    arkanium.serveminecraft.net
    </a>
    </div>
    <h1>Mod requis pour rejoindre le serveur Arkanium !</h1>
    <p>Ce serveur utilise <strong>Forge</strong> et le mod <strong>Millénaire</strong>.<br>Merci de les installer pour pouvoir jouer.</p>
    <h2>📅 Téléchargements :</h2>
    <p><a class="button" href="/files/MinecraftInstaller.msi" target="_blank">💻 Télécharger le Launcher Minecraft</a></p>
    <p><a class="button" href="/files/forge-1.12.2-14.23.5.2860-installer.jar" target="_blank">🛠️ Télécharger Forge</a></p>
    <p><a class="button" href="/files/millenaire-8.1.2.jar" target="_blank">📦 Télécharger Millénaire</a></p>
    <p><a class="button" href="/files/voicechat-forge-1.12.2-2.4.13.jar" target="_blank">🎤 Télécharger VoiceChat</a></p>
    <!-- Ajouts des nouveaux mods -->
    <p><a class="button" href="/files/TravelersBackpack-1.12.2-1.0.35.jar" target="_blank">🎒 Télécharger Traveler's Backpack</a></p>
    <p><a class="button" href="/files/emoticons-1.1.2-1.12.2.jar" target="_blank">😄 Télécharger Emoticons</a></p>
    <p><a class="button" href="/files/corpse-1.12.2-1.0.8.jar" target="_blank">🪦 Télécharger Corpse</a></p>
    <p><a class="button new" href="/files/CreativeCore_v1.10.71_mc1.12.2.jar" target="_blank">📚 Télécharger CreativeCore</a></p>
    <p><a class="button new" href="/files/camera-1.0.11.jar" target="_blank">📷 Télécharger Camera Mod</a></p>
    <p><a class="button new" href="/files/Online-Picture-Frame-Mod-Forge-1.12.2.jar" target="_blank">📷 Télécharger Online Picture Frame</a></p>
    <p><a class="button new" href="/files/[1.12.2] SecurityCraft v1.9.1 (No Mixin).jar" target="_blank">🔒 Télécharger SecurityCraft</a></p>
    <p><a class="button new" href="/files/resizingpotion-2.2.jar" target="_blank">🧪 Télécharger Resizing Potion</a></p>
    <p><a class="button new" href="/files/r2s-Radio-1.12.2-1.4.2.RELEASE.jar" target="_blank">🎵 Télécharger Radio R2S</a></p>
    <p><a class="button new" href="/files/Baubles-1.12-1.5.2.jar" target="_blank">👑 Télécharger Baubles</a></p>
    <p><a class="button new" href="/files/chunkloaders-1.2.8-forge-mc1.12.jar" target="_blank">🧩 Télécharger Chunk Loaders</a></p>
    <p><a class="button new" href="/files/_supermartijn642corelib-1.1.18-forge-mc1.12.jar" target="_blank">🧩 Télécharger Core Lib</a></p>
    <p><a class="button new" href="/files/supermartijn642configlib-1.1.6-forge-mc1.12.jar" target="_blank">🧩 Télécharger   Config Lib</a></p>
    <p><a class="button new" href="/files/ItemBlacklist-1.4.3.jar" target="_blank">🧩 Télécharger Item Blacklist</a></p>
    <p><a class="button new" href="/files/regionbgm-1.12.2-1.0.0.jar" target="_blank">🧩 Télécharger Region BGM</a></p>
    <p><a class="button new" href="/files/zonebgm-1.12.2-1.0.0.jar" target="_blank">🧩 Télécharger Zone BGM</a></p>
    <p><a class="button" href="/files/r2s-Core-1.12.2-1.7.0.RELEASE.jar" target="_blank">🧩 Télécharger R2S Core</a></p>
    <p><a class="button" href="/files/ArtemisLib-1.12.2-v1.0.6.jar" target="_blank">🧩 Télécharger ArtemisLib</a></p>
    <p><a class="button" href="/files/mclib-2.4.3-1.12.2.jar" target="_blank">🧩 Télécharger McLib</a></p>
    <p><a class="button" href="/files/ACsGuis-1.2.11-all.jar" target="_blank">🧩 Télécharger ACsGuis</a></p>
    
    <div style="display: inline-flex; gap: 10px; align-items: center;">
    <p style="position: relative; display: inline-block;">
    <div class="button-wrapper">
  <a class="button" href="/files/OptiFine_1.12.2_HD_U_G5.jar" target="_blank">🔎 Télécharger OptiFine</a>
  <span class="badge-optional">OPTIONNEL</span>
</div>
    </p>
    </div>
    <h2></h2>
    <p><a class="button" href="https://discord.gg/85Hk8j9" target="_blank">💬 Rejoindre le Discord</a></p>
    <p style="margin-top: 30px;">Placez le mod dans le dossier <span style="color: #007bff;"><strong>.minecraft/mods</strong></span> après avoir installé Forge.</p>
    <p>
      <a class="button" href="#" onclick="document.getElementById('guide-popup').style.display = 'block'; return false;">📖 Voir le guide d'installation</a>
    </p>
  </div>
  <p style="margin-top: 30px;">
    <a class="button" href="/" style="animation: bounce 1.5s infinite;">⬅️ Retour à l'accueil</a>
  </p>
  <div style="height: 50px;"></div>
  <a id="back-to-top" onclick="scrollToTop()">
  🔼
  <span class="tooltip-text">Retour en haut de la page</span>
  </a>
  <div id="guide-popup" style="display:none; position:fixed; top:0; left:0; width:100%; height:100%; background:rgba(0,0,0,0.85); z-index:1000; text-align:center;">
    <div class="guide-popup-content">
      <h2 style="color:#ffaa00; font-size:0.9em;">📚 Guide d'installation Forge + Millénaire (Windows)</h2>
      <ul style="text-align:left; font-size:0.6em; padding-left: 20px; line-height:2em;">
        <li>🧱 Télécharge <strong>Forge</strong> avec le bouton <strong>Télécharger Forge</strong> ci-dessus</li>
        <li>📂 Double-clique sur le fichier <span style="background:#555; color:#fff; padding:2px 6px; border-radius:4px;">.jar</span> et clique sur <span style="background:#2ecc71; color:#000; padding:2px 6px; border-radius:4px;">Install client</span></li>
        <li>💻 Appuie sur <span style="background:#16a085; padding:2px 6px; border-radius:4px; color:#fff;">Win</span> + <span style="background:#16a085; padding:2px 6px; border-radius:4px; color:#fff;">R</span>, tape <span style="background:#27ae60; color:#000; padding:2px 6px; border-radius:4px;">%appdata%</span> puis ouvre le dossier <span style="background:#34495e; color:#fff; padding:2px 6px; border-radius:4px;">.minecraft/mods</span></li>
        <li>📦 Télécharge <strong>Millénaire</strong> avec le bouton <strong>Télécharger Millénaire</strong></li>
        <li>🎤 Télécharge <strong>VoiceChat</strong> avec le bouton <strong>Télécharger VoiceChat</strong></li>
        <li>🎒 Télécharge <strong>Traveler’s Backpack</strong> avec le bouton <strong>Télécharger Traveler’s Backpack</strong></li>
        <li>😄 Télécharge <strong>Emoticons</strong> avec le bouton <strong>Télécharger Emoticons</strong></li>
        <li>🪦 Télécharge <strong>Corpse</strong> avec le bouton <strong>Télécharger Corpse</strong></li>
        <li>📚 Télécharge <strong>CreativeCore</strong> avec le bouton <strong>Télécharger CreativeCore</strong></li>
        <li>📷 Télécharge <strong>Camera Mod</strong> avec le bouton <strong>Télécharger Camera Mod</strong></li>
        <li>📷 Télécharge <strong>Online Picture Frame</strong> avec le bouton <strong>Télécharger Online Picture Frame</strong></li>
        <li>🔒 Télécharge <strong>SecurityCraft</strong> avec le bouton <strong>Télécharger SecurityCraft</strong></li>
        <li>🧪 Télécharge <strong>Resizing Potion</strong> avec le bouton <strong>Télécharger Resizing Potion</strong></li>
        <li>🎵 Télécharge <strong>Radio R2S</strong> avec le bouton <strong>Télécharger Radio R2S</strong></li>
        <li>👑 Télécharge <strong>Baubles</strong> avec le bouton <strong>Télécharger Baubles</strong></li>
        <li>🧩 Télécharge <strong>Chunk Loaders</strong> avec le bouton <strong>Télécharger Chunk Loaders</strong></li>
        <li>🧩 Télécharge <strong>Core Lib</strong> avec le bouton <strong>Télécharger Core Lib</strong></li>
        <li>🧩 Télécharge <strong>Config Lib</strong> avec le bouton <strong>Télécharger Config Lib</strong></li>
        <li>🧩 Télécharge <strong>Item Blacklist</strong> avec le bouton <strong>Télécharger Item Blacklist</strong></li>
        <li>🧩 Télécharge <strong>Region BGM</strong> avec le bouton <strong>Télécharger Region BGM</strong></li>
        <li>🧩 Télécharge <strong>Zone BGM</strong> avec le bouton <strong>Télécharger Zone BGM</strong></li>
        <li>🧩 Télécharge <strong>R2S Core</strong> avec le bouton <strong>Télécharger R2S Core</strong></li>
        <li>🧩 Télécharge <strong>ArtemisLib</strong> avec le bouton <strong>Télécharger ArtemisLib</strong></li>
        <li>🧩 Télécharge <strong>McLib</strong> avec le bouton <strong>Télécharger McLib</strong> (nécessaire pour Emoticons)</li>
        <li>🧩 Télécharge <strong>ACsGuis</strong> avec le bouton <strong>Télécharger ACsGuis</strong>.
        <li>🔎 <strong>OptiFine</strong> est <span style="color:#ffa500;"><strong>optionnel</strong></span>, mais recommandé pour profiter de magnifiques graphismes avec des shaders. Nous te conseillons le shader <strong>SEUS Renewed</strong> pour Minecraft 1.12.2&nbsp;: <a href="https://sonicether.com/shaders/download/renewed-v1-0-1/" target="_blank"><strong>Télécharger SEUS Renewed</strong></a></li>
        <li>🗂️ Déplace ces fichiers <span style="background:#555; color:#fff; padding:2px 6px; border-radius:4px;">.jar</span> dans le dossier <span style="background:#8e44ad; padding:2px 6px; border-radius:4px; color:#fff;">mods</span></li>
        <li>🚀 Lance Minecraft avec le profil <strong>Forge</strong> sélectionné dans le launcher</li>
      </ul>
      <p><a class="button" href="#" onclick="document.getElementById('guide-popup').style.display = 'none'; return false;">❌ Fermer</a></p>
    </div>
  </div>
  <script>
    function setDayNightBackground() {
      const hour = new Date().getHours();
      const isNight = hour < 7 || hour >= 20;
      document.body.classList.add(isNight ? 'night' : 'day');
    }

    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();

    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 = 'block';
        } 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>
  <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>
<script>
  // Ferme la popup si clic à l'extérieur
  document.addEventListener('DOMContentLoaded', function () {
    var guidePopup = document.getElementById('guide-popup');
    var popupContent = document.getElementById('guide-popup-content');
    if (!guidePopup) return;
    guidePopup.addEventListener('click', function (e) {
      if (e.target === guidePopup) {
        guidePopup.style.display = 'none';
      }
    });
    // Ferme avec ECHAP aussi
    document.addEventListener('keydown', function(e) {
      if (e.key === 'Escape') {
        guidePopup.style.display = 'none';
      }
    });
  });
</script>
</body>
</html>