<!--                                                                                                             
               ████                                                                           ████               
             ███                                                                                 ███             
           ███                                        ██                                           ███           
        ████                                          ██                                             ████        
      ████                                                                                             ████      
    ████                                                                                                 ████    
  █████████████████████     ██               ████     ██    █████████████   █████████     █████████████████████  
                 ████     ████             ██████     ██              ███                   ████                 
               ███      ████             ███   ██     ██            ███                       ████               
             ███      ████             ███     ██     ██         ████       ███████████████      ███             
          ████      ███              ████████████     ██       ████                                ███           
        ████      ███              ███         ██     ██     ████                                    ████        
      ████      ██████████████  ████           ██     ██   ██████████████   ████████████████████       ████      
                                                                                                                 
       ██ INITIATING CONNECTION ██ TARGET: SLAIZEN.COM ██ ACCESSING CODEBASE ██ CONNECTION ESTABLISHED ██        
                                         ██ WELCOME TO THE UNDER-GRID ██                                         
      21  06    2007                                                                        08  10   1992        
         19 12 1 9 26 5 14                                                           10  9  13 13  25            
            14  5 26 9 1 12 19                                                 18 9 22  1 18 4  53853            
                  16   9 18  1  20 5                                       14 9 14 10  1                         
                      08       2724483                                   636679      76883647                    
              08 27328466  08       3335                              0 5683      08  08 3668466                 
          152883 65        85 38 7  77 34 3                           17     74   79      8    95697             
        96977   81         7817  53       1                          9     9   15          8    8 38895          
                8    4Ω4    8  2   3                                     8  17     3♎︎3    1    3                
           8    58          8    8   6                                 7   4   8           8    2                
            7    18       78     2 2                                  9  3 8    82       88    8                 
              2    7888883      8    1                                 287  2      88885    39                   
                08 1916918920                                                168251993112                        
-->
<!DOCTYPE html>
<html lang="fr">

<head>
    <script>
        /* Immediate Language Detection to prevent FOUT */
        (function () {
            const savedLang = localStorage.getItem('selectedLanguage') || 'fr';
            document.documentElement.lang = savedLang;
            if (savedLang === 'en') {
                document.documentElement.classList.add('i18n-loading');
            }
        })();
    </script>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1">
  <title>Minecraft: Slaizen Edition</title>
  <link rel="icon" type="image/x-icon" href="../favicon.ico">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap" rel="stylesheet">
    <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap"
        rel="stylesheet">
<!--╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗   
    ║                                       ██ ACCESSING: CSS CORE ██                                      ║   
    ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <link rel="stylesheet" href="../coreSystem/auth.css">
    <link rel="stylesheet" href="../coreSystem/modals.css">
    <link rel="stylesheet" href="../coreSystem/profiles.css">
    <link rel="stylesheet" href="../coreSystem/notifications.css">
    <link rel="stylesheet" href="../coreSystem/comments.css">
    <link rel="stylesheet" href="../coreSystem/interface.css">
    <style>
        /* Règles de visibilité bilingue */
        html[lang="fr"] .lang-en {
            display: none !important;
        }

        html[lang="en"] .lang-fr {
            display: none !important;
        }

        /* Empêcher les spans de bloquer les clics dans les boutons */
        .btn span,
        .views-label span {
            pointer-events: none;
        }

        * {
            box-sizing: border-box;
            margin: 0;
            padding: 0;
        }

        /* Prevent Flash of Untranslated Content (FOUT) */
        html.i18n-loading [data-en],
        html.i18n-loading [data-en-title],
        html.i18n-loading [data-en-alt],
        html.i18n-loading .lang-en {
            visibility: hidden !important;
        }

        html,
        body {
            height: 100%;
            overflow: hidden;
        }

        @font-face {
            font-family: 'Minecraft';
            src: url('Minecraft.otf') format('opentype');
            font-display: swap;
        }

        body {
            font-family: 'Minecraft', 'Press Start 2P', monospace;
            background: transparent;
            user-select: none;
            -webkit-user-select: none;
            -webkit-touch-callout: none;
        }


        /* Forcer la police de l'interface d'authentification */
        .auth-nav,
        .auth-nav *,
        .modal,
        .modal *,
        #profile-modal,
        #profile-modal *,
        #auth-modal,
        #auth-modal *,
        #profile-comments-modal,
        #profile-comments-modal *,
        #profile-downloads-modal,
        #profile-downloads-modal * {
            font-family: 'Source Code Pro', monospace !important;
        }

        /* Auth Navigation - Styles centralisés dans interface.css */

        /* Auth Navigation - Minecraft Exception (Closer to top) */
        :root {
            --auth-nav-top: 10px;
        }

        .auth-nav .btn {
            pointer-events: auto;
            /* Style Minecraft pour les boutons d'authentification */
            appearance: none !important;
            border: 3.5px solid #000000 !important;
            color: #fff !important;
            font-weight: 700 !important;
            font-family: 'Press Start 2P', monospace !important;
            letter-spacing: 1px !important;
            text-transform: none !important;
            font-size: 10px !important;
            height: 45px !important;
            padding: 0 15px !important;
            min-width: 150px !important;
            text-align: center !important;
            background: linear-gradient(#7a7a7a, #6a6a6a) !important;
            box-shadow: inset 0 3.5px 0 #9e9e9e, inset 0 -6.5px 0 #545454, inset 3.5px 0 0 #9e9e9e, inset -3.5px 0 0 #545454 !important;
            border-radius: 0 !important;
            cursor: pointer !important;
            text-shadow: 2px 2px 0 #000 !important;
            display: inline-flex !important;
            align-items: center !important;
            justify-content: center !important;
            transition: all 0.1s ease !important;
            user-select: none !important;
            text-decoration: none !important;
            white-space: nowrap !important;
            position: relative !important;
            overflow: visible !important;
            margin: 0 !important;
        }

        /* Marges supprimées : le gap est maintenant géré par interface.css */

        .auth-nav .btn-lang {
            min-width: 60px !important;
        }

        .auth-nav .btn:hover {
            filter: brightness(1.08) !important;
            border-color: #fff !important;
            transform: none !important;
            box-shadow: inset 0 3.5px 0 #9e9e9e, inset 0 -6.5px 0 #545454, inset 3.5px 0 0 #9e9e9e, inset -3.5px 0 0 #545454 !important;
        }

        .auth-nav .btn:active {
            transform: translateY(2px) !important;
            box-shadow: inset 0 2.5px 0 #9e9e9e, inset 0 -5.5px 0 #545454, inset 2.5px 0 0 #9e9e9e, inset -5.5px 0 0 #545454 !important;
        }

        .auth-nav .btn-primary {
            background: linear-gradient(#888888, #777777) !important;
            font-weight: bold !important;
        }

        .auth-nav .btn-notifications {
            width: 45px !important;
            height: 45px !important;
            padding: 0 !important;
            min-width: 45px !important;
            display: flex !important;
            align-items: center !important;
            justify-content: center !important;
        }

        /* Forcer le style correct du bouton de fermeture de la modal d'authentification */
        .modal-close,
        #close-profile-modal,
        #close-modal,
        #close-profile-comments-modal,
        #close-profile-downloads-modal {
            background: rgba(0, 0, 0, 0.4) !important;
            border: 1px solid #31b086 !important;
            color: rgba(49, 176, 134, 0.9) !important;
        }

        .modal-close:hover,
        #close-profile-modal:hover,
        #close-modal:hover,
        #close-profile-comments-modal:hover,
        #close-profile-downloads-modal:hover {
            background: rgba(49, 176, 134, 0.2) !important;
            border-color: rgba(49, 176, 134, 0.9) !important;
            color: #31b086 !important;
        }

        /* S'assurer que le bouton œil est visible dans la modal d'auth */
        #toggle-password {
            display: flex !important;
            visibility: visible !important;
            opacity: 0.7 !important;
        }

        #password-toggle-icon {
            display: inline-block !important;
            visibility: visible !important;
        }


        .ui-panel {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: transparent;
            z-index: 10;
            display: flex;
            flex-direction: column;
            padding: 20px 0 0 0;
            box-sizing: border-box;
        }

        .title {
            text-align: center;
            font-size: clamp(12px, 2.5vw, 18px);
            color: #fff;
            margin-bottom: 20px;
            text-shadow: 2px 2px 0 #000;
        }


        .screenshots-container {
            height: calc(100vh - 160px);
            border-top: 3px solid rgba(255, 255, 255, 0.4);
            border-bottom: 3px solid rgba(255, 255, 255, 0.4);
            background: rgba(0, 0, 0, 0.6);
            margin: 0;
            width: 100%;
            position: relative;
            display: flex;
            flex-direction: column;
            box-sizing: border-box;
            padding: 20px;
            min-width: 100%;
            overflow-y: auto;
            overflow-x: visible;
        }

        .description-section {
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.3);
            padding: 20px;
            margin-bottom: 20px;
            border-radius: 0;
        }

        .description-title {
            font-size: 20px;
            color: #fff;
            text-align: center;
            text-shadow: 2px 2px 0 #000;
            margin-bottom: 15px;
        }

        .description-text {
            font-size: 16px;
            color: #ccc;
            text-align: center;
            text-shadow: 1px 1px 0 #000;
            line-height: 1.6;
            width: 100%;
        }

        .screenshots-section-title {
            margin-bottom: 15px;
            margin-top: 25px;
            text-align: left;
        }

        .screenshots-section-title:first-child {
            margin-top: 0;
        }

        .filter-menu {
            display: flex;
            flex-wrap: wrap;
            gap: 10px;
            margin-top: 25px;
            margin-bottom: 0;
            padding: 15px;
            background: rgba(0, 0, 0, 0.3);
            border: 2px solid rgba(255, 255, 255, 0.2);
            border-radius: 5px;
            justify-content: center;
        }

        .filter-btn {
            padding: 12px 20px;
            background: rgba(255, 255, 255, 0.1);
            border: 2px solid rgba(255, 255, 255, 0.3);
            color: #fff;
            cursor: pointer;
            border-radius: 3px;
            font-size: 14px;
            font-weight: bold;
            text-shadow: 1px 1px 0 #000;
            transition: all 0.2s;
            min-width: 60px;
        }

        .filter-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: rgba(255, 255, 255, 0.5);
        }

        .filter-btn.active {
            background: rgba(255, 255, 255, 0.3);
            border-color: rgba(255, 255, 255, 0.7);
            box-shadow: 0 0 10px rgba(255, 255, 255, 0.3);
        }

        .screenshots-section-title h2 {
            font-size: 18px;
            color: #fff;
            text-shadow: 2px 2px 0 #000;
            margin-bottom: 8px;
        }

        .screenshots-section-title p {
            font-size: 16px;
            color: #aaa;
            text-shadow: 1px 1px 0 #000;
            line-height: 1.4;
        }

        .screenshots-section-title p a {
            color: #4a9eff;
            text-decoration: underline;
            transition: color 0.2s;
        }

        .screenshots-section-title p a:hover {
            color: #6bb6ff;
            text-shadow: 0 0 5px rgba(74, 158, 255, 0.5);
        }

        .screenshots-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
            width: 100%;
            justify-content: center;
            margin-bottom: 20px;
            align-items: start;
        }

        .screenshot-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 8px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.2s;
            background: rgba(0, 0, 0, 0.2);
            overflow: hidden;
            height: fit-content;
        }

        .screenshot-item:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.6);
        }

        .screenshot-image {
            width: 100%;
            height: auto;
            max-width: 100%;
            image-rendering: pixelated;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.1);
            object-fit: cover;
            aspect-ratio: 4/3;
        }

        .screenshot-video {
            width: 100%;
            height: auto;
            max-width: 100%;
            border: 2px solid rgba(255, 255, 255, 0.2);
            background: rgba(0, 0, 0, 0.1);
            object-fit: cover;
            aspect-ratio: 4/3;
        }

        .screenshot-caption {
            font-size: 14px;
            color: #fff;
            text-align: center;
            text-shadow: 1px 1px 0 #000;
            word-break: break-word;
            line-height: 1.3;
        }

        .screenshot-date {
            font-size: 12px;
            color: #aaa;
            text-align: center;
            text-shadow: 1px 1px 0 #000;
            margin-top: 5px;
        }

        .screenshot-modal {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: rgba(0, 0, 0, 0.9);
            z-index: 1000;
            display: none;
            align-items: center;
            justify-content: center;
            padding: 20px;
            box-sizing: border-box;
        }

        .screenshot-modal.active {
            display: flex;
        }

        .screenshot-modal-content {
            position: relative;
            max-width: 90vw;
            max-height: 90vh;
            background: rgba(0, 0, 0, 0.8);
            border: 3px solid rgba(255, 255, 255, 0.4);
            padding: 20px;
            box-sizing: border-box;
        }

        .screenshot-modal-image {
            max-width: 100%;
            max-height: 70vh;
            width: auto;
            height: auto;
            image-rendering: pixelated;
            display: block;
            margin: 0 auto;
        }

        .screenshot-modal-video {
            max-width: 100%;
            max-height: 70vh;
            width: auto;
            height: auto;
            display: block;
            margin: 0 auto;
        }

        .screenshot-modal-filename {
            text-align: center;
            margin-top: 15px;
            font-size: 14px;
            color: #fff;
            text-shadow: 2px 2px 0 #000;
            font-family: 'Courier New', monospace;
            background: rgba(0, 0, 0, 0.5);
            padding: 8px 12px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, 0.3);
        }

        .screenshot-modal-description {
            text-align: center;
            margin-top: 10px;
            font-size: 12px;
            color: #ccc;
            text-shadow: 1px 1px 0 #000;
            font-family: 'Press Start 2P', monospace;
            background: rgba(0, 0, 0, 0.3);
            padding: 10px 15px;
            border-radius: 3px;
            border: 1px solid rgba(255, 255, 255, 0.2);
            line-height: 1.4;
            max-width: 80%;
            margin-left: auto;
            margin-right: auto;
        }

        .screenshot-modal-close {
            position: absolute;
            top: 10px;
            right: 10px;
            width: 40px;
            height: 40px;
            background: rgba(255, 0, 0, 0.8);
            border: 2px solid #fff;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 1001;
        }

        .screenshot-modal-close:hover {
            background: rgba(255, 0, 0, 1);
            transform: scale(1.1);
        }

        .screenshot-modal-nav {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            width: 50px;
            height: 50px;
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid #fff;
            color: #fff;
            font-size: 20px;
            font-weight: bold;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.2s;
            z-index: 1001;
        }

        .screenshot-modal-nav:hover {
            background: rgba(0, 0, 0, 1);
            transform: translateY(-50%) scale(1.1);
        }

        .screenshot-modal-prev {
            left: 10px;
        }

        .screenshot-modal-next {
            right: 10px;
        }


        /* Action Buttons */
        .action-buttons {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            width: min(100%, 600px);
            z-index: 100;
        }

        .btn {
            appearance: none;
            border: 4px solid #000000;
            color: #fff;
            font-weight: 700;
            font-family: 'Minecraft', 'Press Start 2P', monospace;
            letter-spacing: 1px;
            text-transform: none;
            font-size: 12px;
            height: 50px;
            padding: 0 20px;
            min-width: 200px;
            text-align: center;
            background: linear-gradient(#7a7a7a, #6a6a6a);
            box-shadow: inset 0 4px 0 #9e9e9e, inset 0 -7px 0 #545454;
            border-radius: 0;
            cursor: pointer;
            text-shadow: 2px 2px 0 #000;
            display: inline-flex;
            align-items: center;
            justify-content: center;
        }

        .btn:hover {
            filter: brightness(1.08);
            border-color: #fff;
        }

        .btn:active {
            transform: translateY(2px);
            box-shadow: inset 0 3px 0 #9e9e9e, inset 0 -6px 0 #545454;
        }

        .btn.primary {
            background: linear-gradient(#888888, #777777);
            font-weight: bold;
        }

        .btn.primary:hover {
            filter: brightness(1.08);
            border-color: #fff;
        }

        /* Scrollbar styling - Gris discret */
        .screenshots-container::-webkit-scrollbar {
            width: 8px;
        }

        .screenshots-container::-webkit-scrollbar-track {
            background: transparent !important;
        }

        .screenshots-container::-webkit-scrollbar-thumb {
            background: rgba(128, 128, 128, 0.5) !important;
            border-radius: 4px;
            border: none;
        }

        .screenshots-container::-webkit-scrollbar-thumb:hover {
            background: rgba(128, 128, 128, 0.7) !important;
        }

        .screenshots-container::-webkit-scrollbar-thumb:active {
            background: rgba(128, 128, 128, 0.9) !important;
        }

        .screenshots-container::-webkit-scrollbar-corner {
            background: transparent !important;
        }

        /* Forcer le style sur tous les navigateurs */
        .screenshots-container {
            scrollbar-width: thin;
            scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
        }

        /* Scroll Navigation Button */
        .scroll-nav-button {
            position: fixed;
            bottom: 20px;
            right: 20px;
            width: 60px;
            height: 60px;
            background: transparent;
            border: none;
            cursor: pointer;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            z-index: 100;
            transition: all 0.3s ease;
        }

        .scroll-arrow {
            appearance: none;
            border: 4px solid #000000;
            color: #fff;
            font-weight: 700;
            font-family: 'Minecraft', 'Press Start 2P', monospace;
            letter-spacing: 1px;
            text-transform: none;
            font-size: 12px;
            height: 25px;
            padding: 0 10px;
            min-width: 50px;
            text-align: center;
            background: linear-gradient(#7a7a7a, #6a6a6a);
            box-shadow: inset 0 4px 0 #9e9e9e, inset 0 -7px 0 #545454;
            border-radius: 0;
            cursor: pointer;
            text-shadow: 2px 2px 0 #000;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin: 2px 0;
        }

        .scroll-arrow:hover {
            filter: brightness(1.08);
            border-color: #fff;
        }

        .scroll-arrow:active {
            transform: translateY(2px);
            box-shadow: inset 0 3px 0 #9e9e9e, inset 0 -6px 0 #545454;
        }

        /* Character System */
        .character-container {
            position: fixed;
            bottom: -200px;
            right: 50px;
            width: 500px;
            height: 500px;
            z-index: 50;
            pointer-events: none;
            transition: all 0.5s ease;
        }

        .character-container-left {
            position: fixed;
            bottom: -80px;
            left: 20px;
            width: 240px;
            height: 240px;
            z-index: 50;
            pointer-events: none;
            transition: all 0.5s ease;
        }

        .character-image {
            width: 170%;
            height: auto;
            max-height: 100%;
            object-fit: contain;
            object-position: bottom left;
            animation: breatheWide 3s ease-in-out infinite;
            filter: drop-shadow(0 0 15px rgba(0, 0, 0, 0.8));
            transform-origin: bottom center;
        }

        .character-image-left {
            width: 100%;
            height: auto;
            max-height: 100%;
            object-fit: contain;
            object-position: bottom center;
            filter: drop-shadow(0 0 10px rgba(0, 0, 0, 0.6));
            transform-origin: bottom center;
        }

        /* Toutes les images de personnages sont maintenant à 150% */

        @keyframes breathe {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                /* slight chest expansion, feet stay planted */
                transform: scaleX(0.992) scaleY(1.018);
            }
        }

        @keyframes breatheWide {

            0%,
            100% {
                transform: translateX(-18%) scale(1);
            }

            50% {
                /* slight chest expansion, feet stay planted */
                transform: translateX(-18%) scaleX(0.992) scaleY(1.018);
            }
        }

        .character-container.hidden {
            opacity: 0;
            transform: translateY(20px);
        }

        .character-container-left.hidden {
            opacity: 0;
            transform: translateY(20px);
        }

        /* Character Responsive Design */
        @media (max-width: 1200px) {
            .character-container {
                width: 400px;
                height: 400px;
                bottom: -150px;
                right: 40px;
            }

            .character-container-left {
                width: 200px;
                height: 200px;
                bottom: -60px;
                left: 15px;
            }
        }

        @media (max-width: 768px) {
            .character-container {
                width: 300px;
                height: 300px;
                bottom: -100px;
                right: 30px;
            }

            .character-container-left {
                width: 170px;
                height: 170px;
                bottom: -40px;
                left: 10px;
            }
        }

        @media (max-width: 480px) {
            .character-container {
                width: 200px;
                height: 200px;
                bottom: -50px;
                right: 20px;
            }

            .character-container-left {
                width: 140px;
                height: 140px;
                bottom: -20px;
                left: 5px;
            }
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .ui-panel {
                width: 95vw;
                height: 90vh;
                padding: 15px;
            }

            .screenshots-container {
                padding: 15px;
            }

            .description-title {
                font-size: 16px;
            }

            .description-text {
                font-size: 13px;
            }

            .screenshots-section-title h2 {
                font-size: 14px;
            }

            .screenshots-section-title p {
                font-size: 10px;
            }

            .filter-menu {
                padding: 10px;
                gap: 8px;
            }

            .filter-btn {
                padding: 10px 16px;
                font-size: 10px;
                min-width: 50px;
            }

            .screenshots-grid {
                grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
                gap: 10px;
            }


            .btn {
                font-size: 8px;
                height: 35px;
            }
        }

        @media (max-width: 480px) {
            .screenshots-grid {
                grid-template-columns: 1fr;
                gap: 10px;
            }

            .description-title {
                font-size: 14px;
            }

            .description-text {
                font-size: 11px;
            }

            .filter-btn {
                font-size: 9px;
            }

            .screenshots-section-title h2 {
                font-size: 12px;
            }

            .screenshots-section-title p {
                font-size: 8px;
            }

            .screenshot-modal-content {
                padding: 15px;
            }

            .screenshot-modal-image {
                max-height: 60vh;
            }

            .screenshot-modal-close {
                width: 35px;
                height: 35px;
                font-size: 18px;
            }

        }

        /* Compteur de vues de la page */
        .page-views-counter {
            position: fixed;
            bottom: 20px;
            left: 20px;
            z-index: 1000;
            display: inline-flex;
            align-items: center;
            gap: 8px;
            padding: 8px 14px;
            background: rgba(0, 0, 0, 0.8);
            border: 2px solid rgba(255, 255, 255, 0.3);
            font-family: 'Press Start 2P', monospace;
            font-size: 8px;
            color: #bdbdbd;
        }

        .page-views-counter .views-icon {
            font-size: 12px;
        }

        .page-views-counter .views-count {
            color: #4dd4a8;
            font-weight: bold;
        }

        .page-views-counter .views-label {
            color: #888;
            text-transform: uppercase;
        }
    </style>
</head>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                      ██ ACCESSING: LOCAL PAGE ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<body>
    <!-- Conteneur pour le menu d'authentification (sera injecté par auth-nav-loader.js) -->
    <div id="auth-nav-container"></div>

    <!-- Message container pour les notifications -->
    <div id="message" class="message hidden"
        style="position: fixed; top: 20px; left: 50%; transform: translateX(-50%); z-index: 10000; padding: 15px 20px; background: rgba(0, 0, 0, 0.9); border: 2px solid #749d91; border-radius: 4px; color: #C5D4E0; font-family: 'Source Code Pro', monospace; font-size: 14px; max-width: 90%; text-align: center; box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);">
    </div>
    <!-- Compteur de vues de la page -->
    <div class="page-views-counter">
        <span class="views-icon">👁️</span>
        <span class="views-count" id="page-views-count">...</span>
        <span class="views-label lang-fr">vues</span>
        <span class="views-label lang-en">views</span>
    </div>

    <!-- Main UI -->
    <div class="ui-panel">
        <h1 class="title lang-fr">Captures d'écran</h1>
        <h1 class="title lang-en">Screenshots</h1>

        <div class="screenshots-container">
            <!-- Description Section -->
            <div class="description-section">
                <div class="description-title lang-fr">Mon aventure Minecraft</div>
                <div class="description-title lang-en">My Minecraft Adventure</div>
                <div class="description-text lang-fr">
                    Bienvenue dans ma galerie d'aventures Minecraft ! Ici vous trouverez une collection de captures
                    d'écran authentiques extraites directement de mes dossiers AppData, précieusement conservées
                    depuis 2014. Elles ne sont donc pas forcément les plus esthétiques puisqu'elles ont été prises sur
                    le vif. Vous y
                    trouverez aussi quelques photos IRL témoignant de ma relation avec la marque et son univers au fil
                    des années — un mélange de nostalgie, de passion et de pixels.
                </div>
                <div class="description-text lang-en">
                    Welcome to my Minecraft adventure gallery! Here you will find a collection of authentic
                    screenshots extracted directly from my AppData folders, carefully preserved since 2014.
                    They are not necessarily the most aesthetic since they were taken on the spot. You will also
                    find some IRL photos witnessing my relationship with the brand and its universe over the years —
                    a mix of nostalgia, passion, and pixels.
                </div>

                <!-- Menu de filtrage par année -->
                <div class="filter-menu" id="filterMenu">
                    <!-- Les boutons de filtre seront générés dynamiquement -->
                </div>

                <!-- Les sections seront générées dynamiquement par JavaScript -->
            </div>

            <div class="action-buttons">
                <button class="btn primary" onclick="window.location.href='minecraft.html'">
                    <span class="lang-fr">Retour</span>
                    <span class="lang-en">Back</span>
                </button>
            </div>

            <!-- Scroll Navigation Button -->
            <div class="scroll-nav-button" id="scrollNavButton">
                <div class="scroll-arrow up">↑</div>
                <div class="scroll-arrow down">↓</div>
            </div>

            <!-- Character System -->
            <div class="character-container" id="characterContainer">
                <img class="character-image" id="characterImage" src="" alt="Character" style="display: none;">
            </div>

            <!-- Character System Left -->
            <div class="character-container-left" id="characterContainerLeft">
                <img class="character-image-left" id="characterImageLeft" src="" alt="Character Left"
                    style="display: none;">
            </div>
        </div>

        <!-- Screenshot Modal -->
        <div class="screenshot-modal" id="screenshotModal">
            <div class="screenshot-modal-content">
                <button class="screenshot-modal-close" onmousedown="closeScreenshotModal()">&times;</button>
                <button class="screenshot-modal-nav screenshot-modal-prev"
                    onmousedown="previousScreenshot()">&larr;</button>
                <button class="screenshot-modal-nav screenshot-modal-next"
                    onmousedown="nextScreenshot()">&rarr;</button>
                <img class="screenshot-modal-image" id="modalImage" src="" alt="" style="display: none;" />
                <video class="screenshot-modal-video" id="modalVideo" controls autoplay style="display: none;">
                    <source src="" type="video/mp4">
                    <source src="" type="video/avi">
                    Votre navigateur ne supporte pas la lecture de vidéos.
                </video>
                <div class="screenshot-modal-filename" id="modalFilename"></div>
                <div class="screenshot-modal-description" id="modalDescription" style="display: none;"></div>
            </div>
        </div>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ AI JAVASCRIPT OUTPUT ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
        <script>
            // ========================================
            // TEMPLATE POUR AJOUTER UNE NOUVELLE SECTION
            // ========================================
            // Copiez ce template et ajoutez-le dans le tableau sectionsConfig :
            /*
            {
                id: "screenshotsGrid5", // Changez le numéro
                title: "YYYY.MM.DD - Nom de votre section",
                description: "Description de votre section",
                screenshots: [
                    {image: "img/screenshots/fichier1.webp"},
                    {image: "img/screenshots/fichier2.webp", description: "Description optionnelle du screenshot"},
                    {image: "img/screenshots/fichier3.webp"}
                ]
            }
            */
            // ========================================

            // Configuration des sections - Facile à modifier et étendre
            const sectionsConfig = [

                {
                    id: "screenshotsGrid0",
                    title_fr: "2012.06 : Ma toute première fois",
                    title_en: "2012.06 : My very first time",
                    description_fr: "La toute première fois que j'ai essayé Minecraft, c'était sur une version crackée, sur le serveur des membres du Palais du Making. C'est aussi la première fois que j'ai utilisé le pseudonyme Nezials publiquement. Je ne suis pas resté connecté très longtemps : je ne comprenais encore rien au jeu, et ne trouvant aucun de mes camarades dans le chat, j'ai vite quitté la partie. Un début modeste, mais symbolique — le premier bloc posé d'une longue aventure.",
                    description_en: "The very first time I tried Minecraft was on a cracked version, on the 'Palais du Making' members' server. It was also the first time I used the pseudonym Nezials publicly. I didn't stay connected for very long: I didn't understand anything about the game yet, and finding none of my comrades in the chat, I quickly left. A modest but symbolic start — the first block placed of a long adventure.",
                    screenshots: []
                },

                {
                    id: "screenshotsGrid1",
                    title_fr: "2013.10 : Ma première grande maison",
                    title_en: "2013.10 : My first big house",
                    description_fr: "Probablement ma première grande maison principale. L'architecture s'inspirait fortement de la saison 4 de 'D&CUBE', la série culte de Fanta & Bob, pionniers du Minecraft français. Construite sur une version de test (early snapshot), ce qui m'empêcha de récupérer la sauvegarde à l'époque. Cette maison a d'ailleurs pris feu deux fois, de façon incontrôlable, à cause d'un foyer mal placé. J'en garde encore un petit souvenir vidéo… et un grand sourire.",
                    description_en: "Probably my first major main house. The architecture was heavily inspired by Season 4 of 'D&CUBE', the cult series by Fanta & Bob, pioneers of French Minecraft. Built on an early snapshot, which prevented me from retrieving the save at the time. This house actually caught fire twice, uncontrollably, due to a misplaced fireplace. I still have a small video memory of it... and a big smile.",
                    screenshots: [
                        { image: "img/screenshots/2013-10 (1).webp" },
                        { image: "img/screenshots/2013-10 (2).webp" },
                        { image: "img/screenshots/2013-10 (3).webp" },
                        { image: "img/screenshots/2013-10 (4).webp" },
                        { image: "img/screenshots/2013-10 (5).webp" },
                        { image: "img/screenshots/2013-10 (6).webp" },
                        { image: "img/screenshots/2013-10 (7).webp" },
                        { image: "img/screenshots/2013-10-26 15-43-22-33.avi" },
                        {
                            image: "img/screenshots/2013-10-26_01.15.59.mp4",
                            description_fr: "Petit souvenir vidéo de l'incendie haha",
                            description_en: "Small video memory of the fire haha"
                        },
                        {
                            image: "img/screenshots/2013-10-26_01.20.04.mp4",
                            description_fr: "La reconstruction suite à l'incendie",
                            description_en: "Reconstruction after the fire"
                        }
                    ]
                },

                {
                    id: "screenshotsGrid2",
                    title_fr: "2013.12 : Peluche Creeper pour Noël",
                    title_en: "2013.12 : Creeper Plush for Christmas",
                    description_fr: "Ma maman m'a offert ma peluche Creeper pour Noël. Le prix était démesuré pour une si petite peluche, mais à l'époque, presque aucune marchandise Minecraft n'existait encore, et je la désirais tellement. Elle avait bien sûr été commandée en ligne sur AliExpress. De nombreuses années plus tard, la même peluche pouvait être retrouvée chez Walmart, pour beaucoup moins cher. C'est aussi l'année où j'ai reçu ma boule disco rétro pour Noël — celle que je rêvais enfant. J'ai reçu la peluche Enderman un peu plus tard, le colis n'était pas encore livré.",
                    description_en: "My mom gave me my Creeper plush for Christmas. The price was excessive for such a small plush, but at the time, almost no Minecraft merchandise existed yet, and I wanted it so much. It was, of course, ordered online from AliExpress. Many years later, the same plush could be found at Walmart for much less. It's also the year I received my retro disco ball for Christmas — the one I dreamed of as a child. I received the Enderman plush a little later, as the package hadn't been delivered yet.",
                    screenshots: [
                        {
                            image: "img/screenshots/IMG_0946.webp",
                            description_fr: "Notre arbre de Noël en 2013",
                            description_en: "Our Christmas tree in 2013"
                        },
                        {
                            image: "img/screenshots/IMG_1051.webp",
                            description_fr: "Le Mario et le Naruto ont été achetés bien avant",
                            description_en: "The Mario and Naruto were bought much earlier"
                        },
                        {
                            image: "img/screenshots/IMG_1055.webp",
                            description_fr: "Ma chambre le soir de Noël 2013",
                            description_en: "My room on Christmas Eve 2013"
                        }
                    ]
                },

                {
                    id: "screenshotsGrid3",
                    title_fr: "2014.01.21 : Tests de 'Mods' Ninja",
                    title_en: "2014.01.21 : Ninja 'Mods' Tests",
                    description_fr: "Les plus vieux screenshots que j'ai conservés.",
                    description_en: "The oldest screenshots I've kept.",
                    screenshots: [
                        { image: "img/screenshots/2014-01-21_00.23.20.webp" },
                        { image: "img/screenshots/2014-01-21_00.23.21.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid4",
                    title_fr: "2014.02.15 : Live d'Aurélien-Sama",
                    title_en: "2014.02.15 : Aurélien-Sama's Live Stream",
                    description_fr: "Petit lot de screenshots en mode fanboy lors d'un live du youtubeur belge Aurélien-Sama.",
                    description_en: "Small set of screenshots in fanboy mode during a live stream by Belgian YouTuber Aurélien-Sama.",
                    screenshots: [
                        { image: "img/screenshots/2014-02-15_17.31.41.webp" },
                        { image: "img/screenshots/2014-02-15_17.43.53.webp" },
                        { image: "img/screenshots/2014-02-15_17.49.27.webp" },
                        { image: "img/screenshots/2014-02-15_17.51.40.webp" },
                        { image: "img/screenshots/2014-02-15_17.51.48.webp" },
                        { image: "img/screenshots/2014-02-15_17.51.49.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid5",
                    title_fr: "2014.03 - 2015.04 : Débuts du 'Slaizy Weedy World'",
                    title_en: "2014.03 - 2015.04 : Early 'Slaizy Weedy World'",
                    description_fr: "Les tout débuts de la création de mon grand monde personnel. On peut constater les mods qui s'ajoutent au fil du temps.",
                    description_en: "The very beginnings of the creation of my large personal world. You can see the mods being added over time.",
                    screenshots: [
                        { image: "img/screenshots/2014-03-15_01.54.31.webp" },
                        { image: "img/screenshots/2014-03-20_20.33.49.webp" },
                        { image: "img/screenshots/2014-03-20_23.38.26.webp" },
                        { image: "img/screenshots/2014-04-01_21.17.32.webp" },
                        { image: "img/screenshots/2014-05-02_21.51.23.webp" },
                        { image: "img/screenshots/2014-05-06_03.15.24.webp" },
                        { image: "img/screenshots/2014-06-23_21.46.59.webp" },
                        { image: "img/screenshots/2014-07-01_02.50.59.webp" },
                        { image: "img/screenshots/2014-07-17_21.28.08.webp" },
                        { image: "img/screenshots/2014-07-17_21.44.11.webp" },
                        { image: "img/screenshots/2014-09-19_17.44.13.webp" },
                        { image: "img/screenshots/2014-11-01_21.07.02.webp" },
                        { image: "img/screenshots/2014-11-05_23.55.27.webp" },
                        {
                            image: "img/screenshots/2015-04-04_12.59.26.webp",
                            description_fr: "Le phare de mon jeu favori 'Bioshock'",
                            description_en: "The lighthouse from my favorite game 'Bioshock'"
                        }
                    ]
                },

                {
                    id: "screenshotsGrid6",
                    title_fr: "2013.12 : Ma première Convention (Otakuthon)",
                    title_en: "2013.12 : My first Convention (Otakuthon)",
                    description_fr: "Ma toute première convention ! J'y ai rencontré plusieurs youtubeurs québécois : Testeurs Alpha et Beta, Guiz de Pessemier, Luduc ou encore l'humoriste Mathieu Cyr. C'est là que j'ai acheté ma vieille épée de mousse Minecraft ! À l'époque, j'aurais préféré une pioche en diamant, mais il n'y avait que l'épée. Inoubliable : je me suis ouvert le doigt avec un couteau en déballant mon épée, assez ironique.",
                    description_en: "My very first convention! I met several Quebec YouTubers there: Alpha and Beta Testers, Guiz de Pessemier, Luduc, and Mathieu Cyr. That's where I bought my old Minecraft foam sword! At the time, I would have preferred a diamond pickaxe, but only the sword was in stock. Unforgettable: I cut my finger with a knife while unpacking my sword, quite ironic.",
                    screenshots: [
                        {
                            image: "img/screenshots/26 octobre (4).webp",
                            description_fr: "Souvenir de la convention",
                            description_en: "Memory from the convention"
                        },
                        {
                            image: "img/screenshots/26 octobre (57).webp",
                            description_fr: "Rencontres mémorables",
                            description_en: "Memorable encounters"
                        },
                        {
                            image: "img/screenshots/30 octobre (30).webp",
                            description_fr: "Ma chambre après la convention",
                            description_en: "My room after the convention"
                        }
                    ]
                },

                {
                    id: "screenshotsGrid7",
                    title_fr: "2015.07 : Se faire des amis sur 'Epicube'",
                    title_en: "2015.07 : Making friends on 'Epicube Server'",
                    description_fr: "Epicube était probablement le plus gros serveur Minecraft de France. C'est là que j'ai rencontré mes amis de l'époque : Heruga, Nano_X, LoulouCastios, LicorneSacrée et Alexandre_Poncin. J'étais 'le petit québécois du groupe'. De super souvenirs sur le Sheepwars et le Pitchout. Le serveur a fermé le 31 octobre 2018.",
                    description_en: "Epicube was probably the largest Microsoft server in France. This is where I met my Minecraft friends at the time: Heruga, Nano_X, LoulouCastios, LicorneSacrée, and Alexandre_Poncin. I was 'the little Quebecer of the group'. Great memories playing Sheepwars and Pitchout. The server closed on October 31, 2018.",
                    screenshots: [
                        { image: "img/screenshots/2015-07-06_19.57.24.webp" },
                        { image: "img/screenshots/2015-07-06_20.02.46.webp" },
                        {
                            image: "img/screenshots/2015-07-06_21.50.59.webp",
                            description_fr: "Mini-jeu Fallen Kingdom",
                            description_en: "Fallen Kingdom mini-game"
                        },
                        {
                            image: "img/screenshots/2015-07-06_21.51.17.webp",
                            description_fr: "Mini-jeu Fallen Kingdom",
                            description_en: "Fallen Kingdom mini-game"
                        },
                        {
                            image: "img/screenshots/2015-07-07_19.01.53.webp",
                            description_fr: "Petite photo de groupe !",
                            description_en: "Quick group photo!"
                        },
                        { image: "img/screenshots/2015-07-07_19.01.57.webp" },
                        { image: "img/screenshots/2015-07-07_19.04.50.webp" },
                        {
                            image: "img/screenshots/2015-07-07_19.10.09.webp",
                            description_fr: "Mini-jeu UHC",
                            description_en: "UHC mini-game"
                        },
                        {
                            image: "img/screenshots/2015-07-07_20.35.43.webp",
                            description_fr: "Mini-jeu UHC",
                            description_en: "UHC mini-game"
                        },
                        {
                            image: "img/screenshots/2015-07-07_20.36.03.webp",
                            description_fr: "Mini-jeu UHC",
                            description_en: "UHC mini-game"
                        },
                        {
                            image: "img/screenshots/2015-07-07_20.40.01.webp",
                            description_fr: "Mini-jeu UHC",
                            description_en: "UHC mini-game"
                        },
                        {
                            image: "img/screenshots/2015-07-07_20.42.44.webp",
                            description_fr: "Mini-jeu UHC",
                            description_en: "UHC mini-game"
                        },
                        { image: "img/screenshots/2015-07-07_20.47.46.webp" },
                        { image: "img/screenshots/2015-07-10_18.08.34.webp" },
                        { image: "img/screenshots/2015-07-10_19.56.12.webp" },
                        { image: "img/screenshots/2015-07-11_16.29.27.webp", description: "A la queue leu leu" },
                    ]
                },

                {
                    id: "screenshotsGrid8",
                    title_fr: "2015.07 : Build Battle avec des amis sur Hypixel",
                    title_en: "2015.07 : Build Battle with friends on 'Hypixel Server'",
                    description_fr: "Quelques petits concours de construction (Build Battle) avec Nano_X et Alexandre_Poncin.",
                    description_en: "A few small construction contests (Build Battle) with Nano_X and Alexandre_Poncin.",
                    screenshots: [
                        { image: "img/screenshots/2015-07-12_10.58.11.webp" },
                        { image: "img/screenshots/2015-07-12_11.15.17.webp" },
                        { image: "img/screenshots/2015-07-12_11.23.01.webp" },
                        { image: "img/screenshots/2015-07-12_11.31.20.webp" },
                        { image: "img/screenshots/2015-07-13_17.12.52.webp" },
                        { image: "img/screenshots/2015-07-13_17.14.00.webp" },
                        { image: "img/screenshots/2015-07-15_15.03.24.webp" },
                        { image: "img/screenshots/2015-07-15_15.13.26.webp" },
                        { image: "img/screenshots/2015-07-18_14.22.43.webp" },
                        { image: "img/screenshots/2015-07-18_14.31.12.webp" },
                        { image: "img/screenshots/2015-07-18_14.42.19.webp" },
                        { image: "img/screenshots/2015-07-18_16.18.36.webp" },
                        { image: "img/screenshots/2015-07-18_17.18.22.webp" },
                    ]
                },

                {
                    id: "screenshotsGrid9",
                    title_fr: "2015.07-09 : Jouer sur des serveurs privés",
                    title_en: "2015.07-09 : Playing on 'Private Servers' with friends",
                    description_fr: "Sur divers serveurs privés avec les copains de l'époque. Je me souviens avoir entièrement construit cette grande maison rouge pour qu'elle nous serve de hub, mais j'ai été le seul à l'utiliser. J'ai pu la réutiliser plus tard pour mon monde 'Slaizy Weedy World'. Dommage que nous ayons arrêté de jouer ensemble peu après.",
                    description_en: "On various private servers with friends at the time. I remember building this entire large red house to serve as our hub, but in the end, I was the only one who used it. I was later able to reuse this house for my 'Slaizy Weedy World'. It's a shame we stopped playing together shortly after.",
                    screenshots: [
                        { image: "img/screenshots/2015-07-11_14.18.35.webp" },
                        { image: "img/screenshots/2015-07-13_23.17.25.webp" },
                        {
                            image: "img/screenshots/2015-07-14_00.37.56.webp",
                            description_fr: "Le feu et moi...",
                            description_en: "Fire and me..."
                        },
                        { image: "img/screenshots/2015-07-14_00.47.00.webp" },
                        { image: "img/screenshots/2015-07-14_00.47.03.webp" },
                        {
                            image: "img/screenshots/2015-07-21_20.14.07.webp",
                            description_fr: "Serveur privé d'Alexandre_Poncin",
                            description_en: "Alexandre_Poncin's private server"
                        },
                        { image: "img/screenshots/2015-07-21_20.14.19.webp" },
                        { image: "img/screenshots/2015-07-21_20.14.25.webp" },
                        { image: "img/screenshots/2015-07-21_20.15.01.webp" },
                        { image: "img/screenshots/2015-07-23_12.16.08.webp" },
                        {
                            image: "img/screenshots/2015-08-10_03.07.18.webp",
                            description_fr: "Serveur privé d'Heruga",
                            description_en: "Heruga's private server"
                        },
                        { image: "img/screenshots/2015-08-10_03.07.29.webp" },
                        { image: "img/screenshots/2015-08-10_03.07.36.webp" },
                        { image: "img/screenshots/2015-08-10_03.07.46.webp" },
                        { image: "img/screenshots/2015-08-10_03.07.54.webp" },
                        { image: "img/screenshots/2015-08-10_03.08.01.webp" },
                        { image: "img/screenshots/2015-08-10_03.08.11.webp" },
                        { image: "img/screenshots/2015-08-10_03.08.17.webp" },
                        { image: "img/screenshots/2015-08-10_03.08.37.webp" },
                        { image: "img/screenshots/2015-08-10_03.08.57.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.07.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.14.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.18.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.24.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.30.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.34.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.37.webp" },
                        { image: "img/screenshots/2015-08-10_03.09.46.webp" },
                        { image: "img/screenshots/2015-08-10_18.41.10.webp" },
                        { image: "img/screenshots/2015-08-10_19.19.28.webp" },
                        { image: "img/screenshots/2015-08-10_19.19.42.webp" },
                        { image: "img/screenshots/2015-08-10_19.43.06.webp" },
                        { image: "img/screenshots/2015-08-14_13.15.12.webp" },
                        {
                            image: "img/screenshots/2015-09-02_21.41.24.webp",
                            description_fr: "Mes bannières sur le serveur privé de Nano_x",
                            description_en: "My banners on Nano_x's private server"
                        },
                        {
                            image: "img/screenshots/2015-09-02_21.42.49.webp",
                            description_fr: "L'entrée de ma base secrète sur le serveur privé de Nano_x",
                            description_en: "The entrance to my secret base on Nano_x's private server"
                        },
                        {
                            image: "img/screenshots/2015-09-02_21.43.06.webp",
                            description_fr: "Mais cette base n'est qu'un leurre, la véritable entrée est cachée",
                            description_en: "But this base is just a decoy, the real entrance is hidden"
                        },
                        { image: "img/screenshots/2015-09-02_21.43.15.webp" },
                        {
                            image: "img/screenshots/2015-08-31_00.48.41.webp",
                            description_fr: "Petit prank sur la statue d'Alexandre_Poncin sur une copie de la carte",
                            description_en: "Small prank on Alexandre_Poncin's statue on a copy of the map"
                        },
                        {
                            image: "img/screenshots/2015-08-31_00.58.03.webp",
                            description_fr: "Petit prank sur la maison d'Heruga sur une copie de la carte",
                            description_en: "Small prank on Heruga's house on a copy of the map"
                        }
                    ]
                },

                {
                    id: "screenshotsGrid10",
                    title_fr: "2015.08 : Live de 'TheFantasio974' sur 'FantaBobWorld'",
                    title_en: "2015.08 : 'TheFantasio974' Live on 'FantaBobWorld Server'",
                    description_fr: "Petit live de TheFantasio974 auquel j'ai assisté. On peut voir ma tête et mon pseudo SlaizenNezials flotter autour de Fanta vers la fin de la vidéo. Le live est toujours disponible <a href='https://www.youtube.com/watch?v=QebDZipbnRU' target='_blank'>ICI</a>. J'adorais regarder ce duo et j'ai suivi chaque semaine la sortie des saisons de Crusoe, Waka et The Dream. J'ai même assisté en direct au mythique '<a href='https://www.youtube.com/watch?v=Qu_3sPmmSP8' target='_blank'>Ta gueule c'est pas toi qui décides !</a>'",
                    description_en: "A small live stream by TheFantasio974 that I attended. You can see my head and my nickname SlaizenNezials floating around Fanta towards the end of the video. The live is still available <a href='https://www.youtube.com/watch?v=QebDZipbnRU' target='_blank'>HERE</a>. I loved watching this duo and followed the release of Crusoe, Waka, and The Dream seasons every week. I even witnessed the legendary '<a href='https://www.youtube.com/watch?v=Qu_3sPmmSP8' target='_blank'>Shut up, it's not you who decides!</a>' live.",
                    screenshots: [
                        { image: "img/screenshots/2015-07-19_19.29.58.webp" },
                        { image: "img/screenshots/2015-08-10_14.41.07.webp" },
                        { image: "img/screenshots/2015-08-10_14.42.12.webp" },
                        { image: "img/screenshots/2015-08-10_14.44.33.webp" },
                        { image: "img/screenshots/2015-08-10_15.01.51.webp" },
                        { image: "img/screenshots/2015-08-10_15.09.34.webp" },
                        { image: "img/screenshots/2015-08-10_15.15.55.webp" },
                        { image: "img/screenshots/2015-08-10_16.08.49.webp" },
                        { image: "img/screenshots/2015-08-10_16.08.55.webp" },
                        { image: "img/screenshots/2015-08-10_16.09.50.webp" },
                        { image: "img/screenshots/2015-08-10_16.13.33.webp" },
                        { image: "img/screenshots/2015-08-11_14.18.41.webp" },
                        { image: "img/screenshots/2015-08-11_14.53.42.webp" },
                        { image: "img/screenshots/2015-08-11_15.06.12.webp" },
                    ]
                },

                {
                    id: "screenshotsGrid11",
                    title_fr: "2015.08 : Pixel Painters et Build Battle",
                    title_en: "2015.08 : Pixel Painters and Build Battle",
                    description_fr: "Série de 'Pixel Painters' et de 'Build Battle' avec mon partenaire de longue date Nathzarel. Nos talents combinés nous assuraient la victoire presque à tous les coups.",
                    description_en: "Series of 'Pixel Painters' and 'Build Battles' with long-time teammate Nathzarel. Our combined talents ensured victory almost every time.",
                    screenshots: [
                        { image: "img/screenshots/2015-08-14_19.10.52.webp" },
                        { image: "img/screenshots/2015-08-14_21.05.38.webp" },
                        { image: "img/screenshots/2015-08-14_21.07.22.webp" },
                        { image: "img/screenshots/2015-08-14_21.07.35.webp" },
                        { image: "img/screenshots/2015-08-14_21.26.21.webp" },
                        { image: "img/screenshots/2015-08-14_21.53.28.webp" },
                        { image: "img/screenshots/2015-08-14_22.36.58.webp" },
                        { image: "img/screenshots/2015-08-14_22.46.39.webp" },
                        {
                            image: "img/screenshots/2015-08-14_23.09.59.webp",
                            description_fr: "Encore ce thème ?",
                            description_en: "Again this theme?"
                        },
                        {
                            image: "img/screenshots/2015-08-14_23.38.41.webp",
                            description_fr: "Oui, la vie est une PATATE !",
                            description_en: "Yess, life is POTATO!"
                        },
                        { image: "img/screenshots/2015-08-15_00.01.06.webp" },
                        {
                            image: "img/screenshots/2015-08-15_00.10.40.webp",
                            description_fr: "On est GROS ! Enfin... On a ÉCHOUÉ !",
                            description_en: "We FAT! Hum... I mean we FAIL!"
                        },
                        { image: "img/screenshots/2015-08-15_00.20.03.webp" },
                        { image: "img/screenshots/2015-08-15_00.59.14.webp" },
                        { image: "img/screenshots/2015-08-15_01.07.45.webp" },
                        { image: "img/screenshots/2015-08-15_01.19.40.webp" },
                        { image: "img/screenshots/2015-08-15_01.30.06.webp" },
                        { image: "img/screenshots/2015-08-15_01.40.23.webp" },
                        { image: "img/screenshots/2015-08-15_01.49.12.webp" },
                        { image: "img/screenshots/2015-08-15_01.59.23.webp" },
                        { image: "img/screenshots/2015-08-15_16.27.52.webp" },
                        { image: "img/screenshots/2015-08-15_16.43.06.webp" },
                        { image: "img/screenshots/2015-08-15_17.01.57.webp" },
                        { image: "img/screenshots/2015-08-15_17.08.39.webp" },
                        { image: "img/screenshots/2015-08-15_17.16.37.webp" },
                        { image: "img/screenshots/2015-08-15_17.37.06.webp" },
                        { image: "img/screenshots/2015-08-15_17.43.07.webp" },
                        { image: "img/screenshots/2015-08-15_22.31.04.webp" },
                        { image: "img/screenshots/2015-08-15_22.46.24.webp" },
                        { image: "img/screenshots/2015-08-15_23.11.29.webp" },
                        { image: "img/screenshots/2015-08-15_23.24.38.webp" },
                        { image: "img/screenshots/2015-08-16_00.04.18.webp" },
                        { image: "img/screenshots/2015-08-16_00.18.35.webp" },
                        { image: "img/screenshots/2015-08-16_00.25.48.webp" },
                        { image: "img/screenshots/2015-08-16_00.45.37.webp" },
                        { image: "img/screenshots/2015-08-16_00.53.07.webp" },
                        {
                            image: "img/screenshots/2015-08-16_00.59.24.webp",
                            description_fr: "Rick et Morty !",
                            description_en: "Rick and Morty!"
                        },
                        { image: "img/screenshots/2015-08-16_01.06.30.webp" },
                        { image: "img/screenshots/2015-08-16_21.24.06.webp" },
                        { image: "img/screenshots/2015-08-16_21.31.25.webp" },
                        { image: "img/screenshots/2015-08-16_21.38.05.webp" },
                        {
                            image: "img/screenshots/2015-08-16_21.53.30.webp",
                            description_fr: "Camel Toe... Je me trouvais bien drôle à l'époque",
                            description_en: "Camel Toe... I thought I was so funny back then"
                        },
                        { image: "img/screenshots/2015-08-16_22.01.14.webp" },
                        { image: "img/screenshots/2015-08-16_22.28.18.webp" },
                        { image: "img/screenshots/2015-08-16_22.34.55.webp" },
                        { image: "img/screenshots/2015-08-16_22.41.59.webp" },
                        { image: "img/screenshots/2015-08-16_22.48.42.webp" },
                        { image: "img/screenshots/2015-08-16_22.56.03.webp" },
                        { image: "img/screenshots/2015-08-16_23.04.14.webp" },
                        { image: "img/screenshots/2015-08-16_23.15.17.webp" },
                        { image: "img/screenshots/2015-08-16_23.24.07.webp", description: "Encore ce theme ? Passons du pixel au 3D!" },
                        { image: "img/screenshots/2015-08-21_00.41.00.webp" },
                        { image: "img/screenshots/2015-08-21_00.58.44.webp" },
                        { image: "img/screenshots/2015-08-21_01.09.16.webp" },
                        { image: "img/screenshots/2015-08-21_01.16.03.webp" },
                        { image: "img/screenshots/2015-08-25_22.11.53.webp" },
                        { image: "img/screenshots/2015-08-25_22.19.26.webp" },
                        { image: "img/screenshots/2015-08-25_22.25.58.webp" },
                        { image: "img/screenshots/2015-08-25_22.47.33.webp" },
                        { image: "img/screenshots/2015-08-25_22.55.59.webp" },
                        { image: "img/screenshots/2015-08-25_23.09.26.webp" },
                        { image: "img/screenshots/2015-08-25_23.16.40.webp" },
                        { image: "img/screenshots/2015-08-25_23.24.04.webp", description: "hEY! C'étais mon idée!" },
                        { image: "img/screenshots/2015-08-25_23.34.46.webp" },
                        { image: "img/screenshots/2015-08-25_23.41.06.webp" },
                        { image: "img/screenshots/2015-08-30_00.04.45.webp" },
                        { image: "img/screenshots/2015-08-30_00.12.43.webp" },
                    ]
                },

                {
                    id: "screenshotsGrid12",
                    title_fr: "2015.09.03-08 : Tests de pack de textures",
                    title_en: "2015.09.03-08 : Texture Pack Tests",
                    description_fr: "Mon pack de textures personnel.",
                    description_en: "My personal texture pack.",
                    screenshots: [
                        { image: "img/screenshots/2015-09-03_03.45.00.webp" },
                        { image: "img/screenshots/2015-09-03_03.45.17.webp" },
                        { image: "img/screenshots/2015-09-03_03.45.24.webp" },
                        { image: "img/screenshots/2015-09-03_04.08.03.webp" },
                        { image: "img/screenshots/2015-09-08_00.39.45.webp" },
                        { image: "img/screenshots/2015-09-08_00.40.35.webp" },
                        { image: "img/screenshots/2015-09-08_01.25.39.webp" },
                        { image: "img/screenshots/2015-09-08_01.25.48.webp" },
                        {
                            image: "img/screenshots/2015-10-02_16.54.08.webp",
                            description_fr: "Moi complètement confus devant un skin de zombie géant que j'ai moi-même conçu...",
                            description_en: "Me completely confused in front of a giant zombie skin I designed myself..."
                        }
                    ]
                },

                {
                    id: "screenshotsGrid13",
                    title_fr: "2015.09 - 2016.02 : Avancement du 'Slaizy Weedy World'",
                    title_en: "2015.09 - 2016.02 : Progress of the 'Slaizy Weedy World'",
                    description_fr: "Les étapes de construction de mon monde personnel. Le live était toujours disponible.",
                    description_en: "Construction stages of my personal world. The live stream was still available.",
                    screenshots: [
                        { image: "img/screenshots/2015-09-11_03.19.59.webp" },
                        { image: "img/screenshots/2015-09-11_03.20.12.webp" },
                        { image: "img/screenshots/2015-11-03_06.17.42.webp" },
                        { image: "img/screenshots/2015-11-03_06.17.57.webp" },
                        { image: "img/screenshots/2015-11-03_06.25.31.webp" },
                        { image: "img/screenshots/2015-11-04_21.44.11.webp" },
                        { image: "img/screenshots/2015-11-04_21.44.50.webp" },
                        { image: "img/screenshots/2015-11-05_00.33.26.webp" },
                        {
                            image: "img/screenshots/2015-11-10_02.46.39.webp",
                            description_fr: "Moi complètement confus devant un skin de zombie géant que j'ai moi-même conçu...",
                            description_en: "Me completely confused in front of a giant zombie skin I designed myself..."
                        },
                        { image: "img/screenshots/2015-11-23_00.58.30.webp" },
                        { image: "img/screenshots/2015-11-24_05.37.17.webp" },
                        { image: "img/screenshots/2015-11-24_05.38.23.webp" },
                        { image: "img/screenshots/2015-11-26_22.55.36.webp" },
                        { image: "img/screenshots/2015-11-29_05.29.30.webp" },

                        { image: "img/screenshots/2016-02-15_23.53.10.webp" },
                        { image: "img/screenshots/2016-02-15_23.53.54.webp" },
                        { image: "img/screenshots/2016-02-15_23.54.50.webp" },
                        { image: "img/screenshots/2016-02-16_18.11.21.webp" },
                        { image: "img/screenshots/2016-02-16_18.11.26.webp" },
                        { image: "img/screenshots/2016-02-16_19.31.41.webp" },
                        { image: "img/screenshots/2016-02-17_07.03.13.webp" },
                        { image: "img/screenshots/2016-02-18_00.35.53.webp" },
                        { image: "img/screenshots/2016-02-18_01.25.09.webp" },
                        { image: "img/screenshots/2016-02-18_02.26.40.webp" },
                        { image: "img/screenshots/2016-02-18_19.12.49.webp" },
                        { image: "img/screenshots/2016-02-18_21.45.50.webp" },
                        { image: "img/screenshots/2016-02-18_21.48.23.webp" },
                        { image: "img/screenshots/2016-02-20_14.21.55.webp" },
                        { image: "img/screenshots/2016-02-21_05.28.42.webp" },
                        { image: "img/screenshots/2016-02-22_18.57.29.webp" },
                        { image: "img/screenshots/2016-02-22_23.12.29.webp" },
                        { image: "img/screenshots/2016-02-22_23.47.05.webp" },
                        { image: "img/screenshots/2016-02-26_18.12.42.webp" },
                    ]
                },

                {
                    id: "screenshotsGrid14",
                    title_fr: "2015.12 - 2016.01 : Construction du 'Château de Poudlard'",
                    title_en: "2015.12 - 2016.01 : Building the 'Hogwarts Castle'",
                    description_fr: "Construction de l'arcade Flynn dans le style du film Tron Legacy.",
                    description_en: "Building Flynn's arcade in the style of the movie Tron Legacy.",
                    screenshots: [
                        { image: "img/screenshots/2015-12-06_23.52.39.webp" },
                        { image: "img/screenshots/2015-12-06_23.53.04.webp" },
                        { image: "img/screenshots/2015-12-08_02.29.32.webp" },
                        { image: "img/screenshots/2015-12-11_01.22.57.webp" },
                        { image: "img/screenshots/2015-12-11_01.26.09.webp" },
                        { image: "img/screenshots/2015-12-15_22.39.35.webp" },
                        { image: "img/screenshots/2015-12-15_22.42.21.webp" },
                        { image: "img/screenshots/2015-12-15_22.42.56.webp" },
                        { image: "img/screenshots/2015-12-15_22.45.12.webp" },
                        { image: "img/screenshots/2015-12-16_02.56.22.webp" },
                        { image: "img/screenshots/2015-12-16_03.53.20.webp" },
                        { image: "img/screenshots/2015-12-17_08.08.25.webp" },
                        { image: "img/screenshots/2015-12-19_04.29.52.webp" },
                        { image: "img/screenshots/2015-12-19_04.53.57.webp" },
                        { image: "img/screenshots/2015-12-20_12.06.15.webp" },
                        { image: "img/screenshots/2015-12-21_00.17.07.webp" },
                        { image: "img/screenshots/2016-01-02_08.06.44.webp" },
                        { image: "img/screenshots/2016-01-04_05.20.49.webp" },
                        { image: "img/screenshots/2016-01-04_05.37.58.webp" },
                        { image: "img/screenshots/2016-01-04_05.38.49.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid15",
                    title_fr: "2016.02.27-28 : Construction du 'Centre de Commande' des Power Rangers",
                    title_en: "2016.02.27-28 : Building the 'Command Center' from Power Rangers",
                    description_fr: "Le Centre de Commande inspiré de la série Power Rangers.",
                    description_en: "The Command Center inspired by the Power Rangers series.",
                    screenshots: [
                        { image: "img/screenshots/2016-02-27_02.37.06.webp" },
                        { image: "img/screenshots/2016-02-27_02.52.15.webp" },
                        { image: "img/screenshots/2016-02-27_04.50.15.webp" },
                        { image: "img/screenshots/2016-02-27_04.50.22.webp" },
                        { image: "img/screenshots/2016-02-27_06.09.58.webp" },
                        { image: "img/screenshots/2016-02-28_01.48.40.webp" },
                        { image: "img/screenshots/2016-02-28_03.13.21.webp" },
                        { image: "img/screenshots/2016-02-28_19.01.55.webp" },
                        { image: "img/screenshots/2016-03-03_04.56.29.webp" },
                        { image: "img/screenshots/2017-04-11_03.41.28.webp" },
                        { image: "img/screenshots/2017-04-11_07.57.40.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid16",
                    title_fr: "2016.04.07-09 : Construction du 'Hollandais Volant' de Pirates des Caraïbes",
                    title_en: "2016.04.07-09 : Building the 'Flying Dutchmen' from 'Pirates of the Caribbean'",
                    description_fr: "Le légendaire navire du capitaine Davy Jones.",
                    description_en: "The legendary ship of Captain Davy Jones.",
                    screenshots: [
                        { image: "img/screenshots/2016-04-07_23.46.07.webp" },
                        { image: "img/screenshots/2016-04-08_00.01.45.webp" },
                        { image: "img/screenshots/2016-04-08_00.15.35.webp" },
                        { image: "img/screenshots/2016-04-08_02.07.55.webp" },
                        { image: "img/screenshots/2016-04-08_02.33.17.webp" },
                        { image: "img/screenshots/2016-04-08_06.26.20.webp" },
                        { image: "img/screenshots/2016-04-09_08.59.28.webp" },
                        { image: "img/screenshots/2016-04-09_09.03.04.webp" },
                        { image: "img/screenshots/2016-04-09_09.03.16.webp" },
                        { image: "img/screenshots/2016-04-09_19.47.06.webp" },
                        { image: "img/screenshots/2016-04-09_19.47.24.webp" },
                        { image: "img/screenshots/2016-04-10_03.00.35.webp" },
                        { image: "img/screenshots/2016-04-10_03.17.30.webp" },
                        { image: "img/screenshots/2016-04-10_03.17.48.webp" },
                        { image: "img/screenshots/2016-04-10_03.22.20.webp" },
                        { image: "img/screenshots/2016-04-10_17.14.20.webp" },
                        { image: "img/screenshots/2016-04-10_17.14.30.webp" },
                        { image: "img/screenshots/2016-04-10_17.14.50.webp" },
                        { image: "img/screenshots/2016-04-10_17.15.11.webp" },
                        { image: "img/screenshots/2016-04-11_01.46.35.webp" },
                        { image: "img/screenshots/2016-04-11_02.34.05.webp" },
                        { image: "img/screenshots/2016-04-11_15.08.28.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid17",
                    title_fr: "2016.04.07-09 : Construction du 'Château Noir' de Game of Thrones",
                    title_en: "2016.04.07-09 : Building 'Castle Black' from Game of Thrones",
                    description_fr: "Le Mur et la base de la Garde de Nuit dans Minecraft.",
                    description_en: "The Wall and the Night's Watch base in Minecraft.",
                    screenshots: [
                        { image: "img/screenshots/2016-05-05_21.46.39.webp" },
                        { image: "img/screenshots/2016-05-05_23.47.10.webp" },
                        { image: "img/screenshots/2016-05-06_01.58.03.webp" },
                        { image: "img/screenshots/2016-05-07_22.09.57.webp" },
                        { image: "img/screenshots/2016-05-07_22.23.50.webp" },
                        { image: "img/screenshots/2016-05-07_22.23.57.webp" },
                        { image: "img/screenshots/2016-05-07_22.24.08.webp" },
                        { image: "img/screenshots/2016-05-08_05.22.19.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid18",
                    title_fr: "2016.07.09 : Une journée d'aventure sur un serveur privé avec Nathzarel",
                    title_en: "2016.07.09 : One day adventure on a private server with Nathzarel",
                    description_fr: "Une session d'exploration et de survie entre amis.",
                    description_en: "A session of exploration and survival between friends.",
                    screenshots: [
                        { image: "img/screenshots/2016-07-09_00.46.45.webp" },
                        { image: "img/screenshots/2016-07-09_04.04.41.webp" },
                        {
                            image: "img/screenshots/2016-07-09_19.27.42.webp",
                            description_fr: "Hummm... C'est mon bateau !",
                            description_en: "Hummm... That's my boat!"
                        },
                        { image: "img/screenshots/2016-07-10_01.40.57.webp" },
                        { image: "img/screenshots/2016-07-10_01.44.18.webp" },
                        { image: "img/screenshots/2016-07-10_03.31.17.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid19",
                    title_fr: "2016.07.26 : Construction de l'Arcade de Flynn (Tron)",
                    title_en: "2016.07.26 : Building Flynn's Arcade (Tron)",
                    description_fr: "Construction de l'arcade Flynn dans le style du film Tron Legacy.",
                    description_en: "Building Flynn's arcade in the style of the movie Tron Legacy.",
                    screenshots: [
                        { image: "img/screenshots/2016-07-22_19.57.16.webp" },
                        { image: "img/screenshots/2016-07-22_19.57.21.webp" },
                        { image: "img/screenshots/2016-07-22_21.06.26.webp" },
                        { image: "img/screenshots/2016-07-22_21.43.21.webp" },
                        { image: "img/screenshots/2016-07-23_00.35.44.webp" },
                        { image: "img/screenshots/2016-07-23_01.12.47.webp" },
                        { image: "img/screenshots/2016-07-24_01.49.06.webp" },
                        { image: "img/screenshots/2016-07-24_02.51.05.webp" },
                        { image: "img/screenshots/2016-07-26_14.54.27.webp" },
                        { image: "img/screenshots/2016-07-26_15.25.58.webp" },
                        { image: "img/screenshots/2016-07-26_15.50.07.webp" },
                        { image: "img/screenshots/2016-07-26_15.50.27.webp" },
                        { image: "img/screenshots/2016-07-26_16.11.17.webp" },
                        { image: "img/screenshots/2016-07-27_16.44.30.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid20",
                    title_fr: "2017.06-07 : Construction du 'Château de Peach' (Super Mario 64)",
                    title_en: "2017.06-07 : Building 'Peach Castle' from Super Mario 64",
                    description_fr: "Il est très amusant de constater que la forme de l'intérieur ressemble presque à un clown. J'ai remplacé les vitres de la fenêtre par des tableaux utilisant exactement la même texture que les vraies fenêtres de Mario 64.",
                    description_en: "It's very funny to notice that the interior shape almost looks like a clown. I replaced the window glass with paintings using exactly the same texture as the real Mario 64 windows.",
                    screenshots: [
                        { image: "img/screenshots/2017-06-26_15.41.23.webp" },
                        { image: "img/screenshots/2017-06-26_16.14.08.webp" },
                        { image: "img/screenshots/2017-06-26_17.13.20.webp" },
                        { image: "img/screenshots/2017-06-26_17.49.48.webp" },
                        { image: "img/screenshots/2017-06-26_18.48.08.webp" },
                        { image: "img/screenshots/2017-07-12_18.17.05.webp" },
                        { image: "img/screenshots/2017-07-12_18.34.23.webp" },
                        { image: "img/screenshots/2017-07-12_18.40.12.webp" },
                        { image: "img/screenshots/2017-07-12_19.13.44.webp" },
                        { image: "img/screenshots/2017-07-12_19.14.43.webp" },
                        { image: "img/screenshots/2017-07-12_19.15.09.webp" },
                        {
                            image: "img/screenshots/2017-07-16_01.53.13.webp",
                            description_fr: "DUUUuuuuuuu",
                            description_en: "DUUUuuuuuuu"
                        },
                        { image: "img/screenshots/2017-07-20_02.11.31.webp" },
                        { image: "img/screenshots/2018-08-25_00.42.58.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid21",
                    title_fr: "2017.06-07 : Construction de 'Rapture' de Bioshock",
                    title_en: "2017.06-07 : Building 'Rapture' from Bioshock",
                    description_fr: "Le mod 'Microblock' a été utilisé pour recréer cette immense cité sous-marine.",
                    description_en: "The 'Microblock' mod was used to recreate this massive underwater city.",
                    screenshots: [
                        { image: "img/screenshots/2017-07-28_14.36.54.webp" },
                        { image: "img/screenshots/2017-07-28_16.57.50.webp" },
                        { image: "img/screenshots/2017-07-28_22.31.40.webp" },
                        { image: "img/screenshots/2017-07-28_23.49.42.webp" },
                        { image: "img/screenshots/2017-07-29_01.00.21.webp" },
                        { image: "img/screenshots/2017-07-29_02.23.14.webp" },
                        { image: "img/screenshots/2017-07-30_03.29.48.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid22",
                    title_fr: "2018.09.11-15 : Ma première aventure survie sur un serveur public",
                    title_en: "2018.09.11-15 : My first survival adventure on a public server",
                    description_fr: "Ma toute première aventure de survie sur un serveur public disposant d'une économie où il était possible de vendre ce qu'on récoltait pour se faire un peu d'argent. Je me suis amusé une petite semaine jusqu'à ce que je tombe sur un autre serveur bien spécial... Manacube !",
                    description_en: "My very first survival adventure on a public server with an economy where it was possible to sell what you harvested to make some money. I had fun for a little week until I came across another very special server... Manacube!",
                    screenshots: [
                        { image: "img/screenshots/2018-09-11_01.06.21.webp" },
                        { image: "img/screenshots/2018-09-11_01.07.48.webp" },
                        { image: "img/screenshots/2018-09-11_04.05.08.webp" },
                        { image: "img/screenshots/2018-09-11_04.05.12.webp" },
                        { image: "img/screenshots/2018-09-11_04.12.24.webp" },
                        { image: "img/screenshots/2018-09-11_04.12.44.webp" },
                        { image: "img/screenshots/2018-09-11_04.16.02.webp" },
                        { image: "img/screenshots/2018-09-11_05.17.07.webp" },
                        { image: "img/screenshots/2018-09-12_21.27.43.webp" },
                        { image: "img/screenshots/2018-09-12_22.03.58.webp" },
                        { image: "img/screenshots/2018-09-13_23.32.11.webp" },
                        { image: "img/screenshots/2018-09-15_06.54.58.webp" },
                        { image: "img/screenshots/2018-09-15_06.55.10.webp" },
                        { image: "img/screenshots/2018-09-15_06.55.21.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid23",
                    title_fr: "2018.09 - 2019.04 : Manacube 2018",
                    title_en: "2018.09 - 2019.04 : Manacube 2018",
                    description_fr: "Le début d'une très longue aventure sur le serveur Survival (Monde Olympus). C'est là que j'ai commencé à bâtir mon héritage.",
                    description_en: "The start of a very long adventure on the Survival server (Olympus World). This is where I started building my legacy.",
                    screenshots: [
                        { image: "img/screenshots/2018-09-23_02.56.52.webp" },
                        { image: "img/screenshots/2018-09-23_06.09.53.webp" },
                        { image: "img/screenshots/2018-09-23_06.09.59.webp" },
                        { image: "img/screenshots/2018-09-23_06.10.12.webp" },
                        { image: "img/screenshots/2018-09-23_22.22.04.webp" },
                        { image: "img/screenshots/2018-09-24_19.59.23.webp" },
                        { image: "img/screenshots/2018-09-24_20.32.56.webp" },
                        { image: "img/screenshots/2018-09-24_20.46.54.webp" },
                        { image: "img/screenshots/2018-09-24_23.57.58.webp" },
                        { image: "img/screenshots/2018-09-25_00.00.14.webp" },
                        { image: "img/screenshots/2018-09-26_20.48.24.webp" },
                        { image: "img/screenshots/2018-09-28_08.45.40.webp" },
                        { image: "img/screenshots/2018-09-28_08.45.47.webp" },
                        { image: "img/screenshots/2018-09-28_08.46.16.webp" },
                        { image: "img/screenshots/2018-09-29_04.54.43.webp" },
                        { image: "img/screenshots/2018-10-01_05.23.51.webp" },
                        { image: "img/screenshots/2018-10-01_05.25.39.webp" },
                        { image: "img/screenshots/2018-10-01_05.29.48.webp" },
                        { image: "img/screenshots/2018-10-01_05.51.01.webp" },
                        { image: "img/screenshots/2018-10-01_06.51.46.webp" },
                        { image: "img/screenshots/2018-10-01_06.59.11.webp" },
                        { image: "img/screenshots/2018-10-01_17.25.17.webp" },
                        { image: "img/screenshots/2018-10-02_19.47.30.webp" },
                        { image: "img/screenshots/2018-10-03_06.15.13.webp" },
                        { image: "img/screenshots/2018-10-06_04.32.03_2.webp" },
                        { image: "img/screenshots/2018-10-14_22.26.02.webp" },
                        { image: "img/screenshots/2018-11-09_20.29.14.webp" },
                        { image: "img/screenshots/2018-11-11_18.49.25.webp" },
                        { image: "img/screenshots/2018-12-14_16.58.35.webp" },
                        { image: "img/screenshots/2018-12-22_22.15.04.webp" },
                        { image: "img/screenshots/2019-01-04_19.07.38.webp" },
                        { image: "img/screenshots/2019-01-04_19.08.21.webp" },
                        { image: "img/screenshots/2019-04-11_20.28.15.webp", description: "Ma défence contre toute intrusions, mes spawners a araigner venimeuse." },
                        { image: "img/screenshots/2019-04-13_04.54.05.webp" },
                        { image: "img/screenshots/2019-04-13_20.02.38.webp" },
                        { image: "img/screenshots/2019-04-13_20.16.12.webp" },

                        { image: "img/screenshots/2019-04-20_03.31.17.webp", description: "Ma propre armée qui tente de m'éléminer" },
                        { image: "img/screenshots/2019-04-20_03.31.23.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid24",
                    title_fr: "2019.04-06 : Manacube 2019",
                    title_en: "2019.04-06 : Manacube 2019",
                    description_fr: "Je suis encore en colère d'avoir égaré les captures d'écran de cette saison... J'ai absolument dominé la saison 2019 de Manacube. Mon nom était sur tous les classements et je protégeais férocement ma place numéro un de temps de jeu, pour laquelle j'ai dû laisser mon ordinateur allumé 24/24 et utiliser quelques astuces pour ne pas être déconnecté. Je me réveillais même plusieurs fois par nuit juste pour vérifier que j'étais bien connecté. C'était de la dévotion… ou de la folie. Peut-être un peu des deux. Je n'aurais jamais cru dépenser de l'argent dans un serveur, et pourtant... Je l'avoue avec un peu de honte : j'y ai englouti des sommes que je n'avais pas vraiment les moyens de me permettre. Les lootboxes, mais également plusieurs comptes secondaires qui me permettaient de charger certains morceaux de terrain (chunks) pour mes fermes à argent en jeu.",
                    description_en: "I'm still angry that I lost the screenshots from this season... I absolutely dominated the 2019 season of Manacube. My name was on all the leaderboards and I fiercely protected my number one spot for playtime, for which I had to leave my computer on 24/7 and use a few tricks to not get disconnected. I even woke up several times a night just to check that I was well connected. It was devotion... or madness. Maybe a bit of both. I never thought I'd spend money on a server, and yet... I admit it with a bit of shame: I poured sums into it that I didn't really have the means to afford. Lootboxes, but also several secondary accounts that allowed me to load certain chunks for money farms in-game.",
                    screenshots: [
                        { image: "img/screenshots/2019-04-14_21.47.07.webp" },
                        { image: "img/screenshots/2019-04-17_20.19.20.webp" },
                        { image: "img/screenshots/2019-04-17_22.39.45.webp" },
                        { image: "img/screenshots/2019-04-21_03.10.31.webp" },
                        { image: "img/screenshots/2019-04-21_08.05.11.webp" },
                        { image: "img/screenshots/2019-04-21_16.51.56.webp" },
                        { image: "img/screenshots/2019-04-25_06.41.02.webp" },
                        { image: "img/screenshots/2019-05-11_23.25.15.webp" },
                        { image: "img/screenshots/2019-05-14_18.50.17.webp" },
                        { image: "img/screenshots/2019-05-15_12.26.16.webp" },
                        { image: "img/screenshots/2019-05-15_13.28.51.webp" },
                        { image: "img/screenshots/2019-05-17_15.25.45.webp" },
                        { image: "img/screenshots/2019-05-17_20.08.30.webp" },
                        { image: "img/screenshots/2019-05-17_21.32.15.webp" },
                        { image: "img/screenshots/2019-05-23_15.49.33.webp" },
                        { image: "img/screenshots/2019-06-02_18.47.59.webp" },
                        { image: "img/screenshots/2019-06-03_01.42.26.webp" },
                        { image: "img/screenshots/2019-06-03_23.04.18.webp" },
                        { image: "img/screenshots/2019-06-07_14.52.19.webp" },
                        { image: "img/screenshots/2019-06-07_15.54.00.webp" },
                        { image: "img/screenshots/2019-06-17_14.49.03.webp" }
                    ]
                },

                {
                    id: "screenshotsGrid25",
                    title_fr: "2025.04-22 : Le Film Minecraft",
                    title_en: "2025.04-22 : The Minecraft Movie",
                    description_fr: "J'avais l'intention de regarder le film accompagné de ma figurine de Steve, mais je me suis rendu compte que je l'avais oubliée une fois arrivé devant le cinéma. Probablement l'une de mes plus mauvaises expériences au cinéma, je n'ai jamais été capable d'entrer dans ce que le film proposait. Ce film est tellement de potentiel gâché. Au lieu de créer une véritable aventure en tant que joueur. J'ai tout de même par la suite acheté un Steve géant pour le mème.",
                    description_en: "I intended to watch the movie with my Steve figure, but I realized I had forgotten it once I arrived at the cinema. Possibly one of my worst cinema experiences, I was never able to get into what the movie was offering. This movie is such wasted potential. Instead of creating a real adventure as a player. I still bought a giant Steve later for the meme.",
                    screenshots: [
                        { image: "img/screenshots/2018-09-11_01.06.21.webp" },
                        { image: "img/screenshots/2018-09-11_01.07.48.webp" },
                        { image: "img/screenshots/2018-09-11_04.05.08.webp" },
                        { image: "img/screenshots/2018-09-11_04.05.12.webp" },
                        { image: "img/screenshots/2018-09-11_04.12.24.webp" },
                        { image: "img/screenshots/2018-09-11_04.12.44.webp" },
                        { image: "img/screenshots/2018-09-11_04.16.02.webp" },
                        { image: "img/screenshots/2018-09-11_05.17.07.webp" },
                        { image: "img/screenshots/2018-09-12_21.27.43.webp" },
                        { image: "img/screenshots/2018-09-12_22.03.58.webp" },
                        { image: "img/screenshots/2018-09-13_23.32.11.webp" },
                        { image: "img/screenshots/2018-09-15_06.54.58.webp" },
                        { image: "img/screenshots/2018-09-15_06.55.10.webp" },
                        { image: "img/screenshots/2018-09-15_06.55.21.webp" }
                    ]
                },
            ];

            // Variables globales pour la navigation
            let allScreenshots = [];
            let currentScreenshotIndex = 0;
            let currentFilter = 'Tous'; // Filtre actuel

            // Character System - Mapping des sections vers les personnages (basé sur les IDs)
            const characterMapping = {
                "screenshotsGrid0": "img/adventure/Nezials.webp",          // 2012.06 - Ma touter premiere fois
                "screenshotsGrid1": "img/adventure/FirstHouse.webp",     // 2013.10 - My first big House
                "screenshotsGrid2": "img/adventure/Plush.webp",           // 2013.12 - Creeper Plush for Chritmas
                "screenshotsGrid3": "img/adventure/steve_ninja.png",       // 2014.01 - Tests de 'Mods' Ninja
                "screenshotsGrid4": "img/adventure/Aurelien_Sama.webp",    // 2014.02 - Live de Aurelien-Sama
                "screenshotsGrid5": "img/adventure/steve_explorer.png",    // 2014.03 - Early Slaizy Weedy World
                "screenshotsGrid6": "img/adventure/SlaizenConvention.webp",// 2013.12 - My first Convention
                "screenshotsGrid7": "img/adventure/Friends.webp",          // 2015.07 - Epicube Server
                "screenshotsGrid8": "img/adventure/FriendsHypixel.webp", // 2015.07 - Build battle
                "screenshotsGrid9": "img/adventure/Friends.webp",          // 2015.07 - Private Servers with friends
                "screenshotsGrid10": "img/adventure/FantaBob.webp",        // 2015.08 - FantaBobWorld Server
                "screenshotsGrid11": "img/adventure/SlaizenNathzarel.webp",// 2015.08 : Pixel Painters / Build battle
                "screenshotsGrid12": "img/adventure/steve_modder.png",     // 2015.09 : Texture Pack Tests
                "screenshotsGrid13": "img/adventure/steve_builder.png",    // 2015.09 : Avancement du 'Slaizy Weedy World'
                "screenshotsGrid14": "img/adventure/Hogwarts.webp",        // 2015.12 : Building the 'Hogwarts Castle'
                "screenshotsGrid15": "img/adventure/steve_powerranger.png",// 2016.02 : Command Center
                "screenshotsGrid16": "img/adventure/steve_pirate.png",     // 2016.04 : Building the Flying Dutchmen
                "screenshotsGrid17": "img/adventure/Nightswatch.webp",     // 2016.04 : Building Castle Black
                "screenshotsGrid18": "img/adventure/steve_adventurer.png", // 2016.07 : private server with Nathzarel
                "screenshotsGrid19": "img/adventure/Tron.webp",            // 2016.07 : Building Flynn Arcade from Tron
                "screenshotsGrid20": "img/adventure/Mario.webp",           // 2017.06 : Building Peach Castl
                "screenshotsGrid21": "img/adventure/Rapture.webp",         // 2017.06 : Building 'Rapture' from 'Bioshock'
                "screenshotsGrid22": "img/adventure/SurvivalServer.webp",   // 2018.09 : My first survival adventure 
                "screenshotsGrid23": "img/adventure/Manacube2018.webp",    // 2018.09 : Manacube 2018
                "screenshotsGrid24": "img/adventure/Manacube2019.webp",    // 2019.04 : Manacube 2019
                "screenshotsGrid25": "img/adventure/MinecraftMovie.webp"   // 2018.09 : The Minecraft Movie
            };

            // Character System Left - Mapping pour les images statiques à gauche
            const characterMappingLeft = {

                "screenshotsGrid6": "img/logos/LogoOtakuthon.webp",     // 2013.12 - My first Convention
                "screenshotsGrid7": "img/logos/LogoEpicube.webp", // 2015.07 - Epicube Server
                "screenshotsGrid8": "img/logos/LogoHypixel.webp",     // 2015.07 - Build battle
                "screenshotsGrid10": "img/logos/LogoFantaBobWorld.webp",    // 2015.08 - FantaBobWorld Server
                "screenshotsGrid11": "img/logos/LogoHypixel.webp",    // 2015.08 : Pixel Painters / Build battle
                "screenshotsGrid23": "img/logos/LogoManacube.webp",   // 2018.09 : Manacube 2018
                "screenshotsGrid24": "img/logos/LogoManacube.webp",   // 2019.04 : Manacube 2019
                "screenshotsGrid25": "img/logos/LogoMovie.webp"       // 2018.09 : The Minecraft Movie
            };

            // Toutes les images de personnages sont maintenant à 150%
            const wideImages = [];

            // Fonction pour détecter si un fichier est une vidéo
            function isVideoFile(filename) {
                const videoExtensions = ['.mp4', '.avi', '.mov', '.webm', '.mkv'];
                return videoExtensions.some(ext => filename.toLowerCase().endsWith(ext));
            }

            // Fonction pour créer un élément de screenshot
            function createScreenshotElement(screenshot, index) {
                const screenshotElement = document.createElement('div');
                screenshotElement.className = 'screenshot-item';
                screenshotElement.onclick = () => openScreenshotModal(screenshot, index);

                const imageClass = 'screenshot-image';
                const isVideo = isVideoFile(screenshot.image);

                if (isVideo) {
                    // Pour les vidéos, on affiche une vidéo avec une icône de lecture par-dessus
                    screenshotElement.innerHTML = `
                     <div class="${imageClass}" style="position: relative; display: flex; align-items: center; justify-content: center;">
                         <video class="screenshot-video" 
                                data-src="${screenshot.image}" 
                                muted 
                                preload="metadata"
                                style="width: 100%; height: 100%; object-fit: cover; aspect-ratio: 4/3;">
                         </video>
                         <div class="video-play-overlay" style="position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); background: rgba(0, 0, 0, 0.7); border-radius: 50%; width: 50px; height: 50px; display: flex; align-items: center; justify-content: center; font-size: 20px; color: white; pointer-events: none;">
                             ▶️
                         </div>
                     </div>
                     <div class="screenshot-caption">Vidéo</div>
                 `;
                } else {
                    screenshotElement.innerHTML = `
                     <img class="${imageClass}" 
                          data-src="${screenshot.image}" 
                          alt="Screenshot" 
                          loading="lazy" />
                 `;
                }

                return screenshotElement;
            }

            // Fonction utilitaire pour mettre à jour l'affichage de la modal
            function updateModalDisplay(screenshot) {
                const modalImage = document.getElementById('modalImage');
                const modalVideo = document.getElementById('modalVideo');
                const modalFilename = document.getElementById('modalFilename');
                const modalDescription = document.getElementById('modalDescription');

                const isVideo = isVideoFile(screenshot.image);

                if (isVideo) {
                    // Afficher la vidéo et masquer l'image
                    modalImage.style.display = 'none';
                    modalVideo.style.display = 'block';

                    // Mettre à jour les sources de la vidéo
                    const sources = modalVideo.querySelectorAll('source');
                    sources[0].src = screenshot.image; // MP4
                    sources[1].src = screenshot.image; // AVI
                    modalVideo.load(); // Recharger la vidéo

                    const filename = screenshot.image.split('/').pop();
                    modalFilename.textContent = filename;
                } else {
                    // Afficher l'image et masquer la vidéo
                    modalVideo.style.display = 'none';
                    modalImage.style.display = 'block';

                    modalImage.src = screenshot.image;
                    const filename = screenshot.image.split('/').pop().replace('.webp', '') + '.png';
                    modalFilename.textContent = filename;
                }

                // Afficher ou masquer la description
                const desc_fr = screenshot.description_fr || screenshot.description || '';
                const desc_en = screenshot.description_en || screenshot.description || '';

                if (desc_fr || desc_en) {
                    modalDescription.innerHTML = `
                        <span class="lang-fr">${desc_fr}</span>
                        <span class="lang-en">${desc_en}</span>
                    `;
                    modalDescription.style.display = 'block';
                } else {
                    modalDescription.style.display = 'none';
                }
            }

            // Fonction pour ouvrir la modal
            function openScreenshotModal(screenshot, index) {
                const modal = document.getElementById('screenshotModal');
                currentScreenshotIndex = index;

                // Filtrer les sections selon le filtre actuel pour avoir les bons indices lors de la navigation
                const filteredSections = sectionsConfig.filter(section => {
                    if (currentFilter === 'Tous') return true;
                    const titleToUse = section.title_en || section.title || "";
                    const yearsInTitle = extractYearsFromTitle(titleToUse);
                    return yearsInTitle.includes(currentFilter);
                });
                allScreenshots = filteredSections.flatMap(section => section.screenshots);

                // Mettre à jour l'affichage
                updateModalDisplay(screenshot);

                modal.classList.add('active');
            }

            // Fonction pour naviguer vers le screenshot précédent
            function previousScreenshot() {
                if (currentScreenshotIndex > 0) {
                    currentScreenshotIndex--;
                    updateModalDisplay(allScreenshots[currentScreenshotIndex]);
                }
            }

            // Fonction pour naviguer vers le screenshot suivant
            function nextScreenshot() {
                if (currentScreenshotIndex < allScreenshots.length - 1) {
                    currentScreenshotIndex++;
                    updateModalDisplay(allScreenshots[currentScreenshotIndex]);
                }
            }

            // Fonction pour fermer la modal
            function closeScreenshotModal() {
                const modal = document.getElementById('screenshotModal');
                const modalVideo = document.getElementById('modalVideo');

                // Arrêter la vidéo si elle est en cours de lecture
                if (modalVideo) {
                    modalVideo.pause();
                    modalVideo.currentTime = 0;
                }

                modal.classList.remove('active');
            }

            // Fermer la modal en cliquant sur le fond
            document.getElementById('screenshotModal').addEventListener('click', function (e) {
                if (e.target === this) {
                    closeScreenshotModal();
                }
            });

            // Fermer la modal avec la touche Escape
            document.addEventListener('keydown', function (e) {
                if (e.key === 'Escape') {
                    closeScreenshotModal();
                }
            });

            // Fonction pour extraire toutes les années d'un titre de section
            function extractYearsFromTitle(title) {
                const matches = title.match(/\d{4}/g);
                return matches ? matches : [];
            }

            // Fonction pour obtenir toutes les années disponibles
            function getAvailableYears() {
                const years = new Set();
                sectionsConfig.forEach(section => {
                    const titleToUse = section.title_en || section.title || "";
                    const yearsInTitle = extractYearsFromTitle(titleToUse);
                    yearsInTitle.forEach(year => years.add(year));
                });
                return Array.from(years).sort();
            }

            // Fonction pour générer le menu de filtrage
            function generateFilterMenu() {
                const filterMenu = document.getElementById('filterMenu');
                if (!filterMenu) return;

                const years = getAvailableYears();

                // Créer le bouton "Tous"
                const allBtn = document.createElement('button');
                allBtn.className = 'filter-btn active';
                allBtn.innerHTML = '<span class="lang-fr">Tous</span><span class="lang-en">All</span>';
                allBtn.onclick = () => filterByYear('Tous');
                filterMenu.appendChild(allBtn);

                // Créer les boutons pour chaque année
                years.forEach(year => {
                    const yearBtn = document.createElement('button');
                    yearBtn.className = 'filter-btn';
                    yearBtn.textContent = year;
                    yearBtn.onclick = () => filterByYear(year);
                    filterMenu.appendChild(yearBtn);
                });
            }

            // Fonction pour filtrer par année
            function filterByYear(year) {
                currentFilter = year;

                // Mettre à jour l'état actif des boutons
                document.querySelectorAll('.filter-btn').forEach(btn => {
                    btn.classList.remove('active');
                    if (year === 'Tous' && (btn.textContent === 'Tous' || btn.innerText.includes('Tous'))) {
                        btn.classList.add('active');
                    } else if (btn.textContent === year) {
                        btn.classList.add('active');
                    }
                });

                // Filtrer et réafficher les sections
                filterAndDisplaySections();

                // Mettre à jour le personnage après filtrage
                setTimeout(checkVisibleSection, 100);
            }

            // Fonction pour filtrer et afficher les sections
            function filterAndDisplaySections() {
                const container = document.querySelector('.screenshots-container');
                if (!container) return;

                // Supprimer les sections existantes (garder description et menu)
                const existingSections = container.querySelectorAll('.screenshots-section-title, .screenshots-grid');
                existingSections.forEach(section => section.remove());

                // Filtrer les sections selon le filtre actuel
                const filteredSections = sectionsConfig.filter(section => {
                    if (currentFilter === 'Tous') return true;
                    const titleToUse = section.title_en || section.title || "";
                    const yearsInTitle = extractYearsFromTitle(titleToUse);
                    return yearsInTitle.includes(currentFilter);
                });

                // Générer le HTML pour les sections filtrées
                filteredSections.forEach((sectionConfig, index) => {
                    // Créer le titre de section
                    const titleDiv = document.createElement('div');
                    titleDiv.className = 'screenshots-section-title';


                    titleDiv.innerHTML = `
                        <h2 class="lang-fr">${sectionConfig.title_fr || sectionConfig.title || ''}</h2>
                        <h2 class="lang-en">${sectionConfig.title_en || sectionConfig.title || ''}</h2>
                        <p class="lang-fr">${sectionConfig.description_fr || sectionConfig.description || ''}</p>
                        <p class="lang-en">${sectionConfig.description_en || sectionConfig.description || ''}</p>
                    `;

                    // Créer la grille
                    const gridDiv = document.createElement('div');
                    gridDiv.className = 'screenshots-grid';
                    gridDiv.id = sectionConfig.id;


                    // Ajouter au container
                    container.appendChild(titleDiv);
                    container.appendChild(gridDiv);
                });

                // Réinitialiser les screenshots
                initializeScreenshots();

                // Reconfigurer le lazy loading pour les nouvelles images
                setTimeout(() => {
                    setupLazyLoading();
                }, 100);
            }

            // Fonction pour initialiser les screenshots des sections visibles
            function initializeScreenshots() {
                let globalIndex = 0;

                // Obtenir les sections filtrées
                const filteredSections = sectionsConfig.filter(section => {
                    if (currentFilter === 'Tous') return true;
                    const titleToUse = section.title_en || section.title || "";
                    const yearsInTitle = extractYearsFromTitle(titleToUse);
                    return yearsInTitle.includes(currentFilter);
                });

                filteredSections.forEach(sectionConfig => {
                    const grid = document.getElementById(sectionConfig.id);
                    if (!grid) return;

                    sectionConfig.screenshots.forEach((screenshot, localIndex) => {
                        const screenshotElement = createScreenshotElement(screenshot, globalIndex);
                        grid.appendChild(screenshotElement);
                        globalIndex++;
                    });
                });
            }

            // Fonction pour initialiser toutes les sections
            function initializeAllSections() {
                // Générer le menu de filtrage
                generateFilterMenu();

                // Afficher toutes les sections par défaut
                filterAndDisplaySections();
            }

            // Fonction pour charger une image avec lazy loading
            function loadImage(img) {
                img.onload = function () {
                    // Image chargée avec succès
                };

                img.onerror = function () {
                    // Gestion d'erreur silencieuse
                };

                // Charger l'image
                img.src = img.dataset.src;
            }

            // Fonction pour charger une vidéo avec lazy loading
            function loadVideo(video) {
                video.onloadedmetadata = function () {
                    // Vidéo chargée avec succès
                };

                video.onerror = function () {
                    // Gestion d'erreur silencieuse
                };

                // Charger la vidéo
                video.src = video.dataset.src;
            }

            // Observer pour le lazy loading
            function setupLazyLoading() {
                const mediaObserver = new IntersectionObserver((entries, observer) => {
                    entries.forEach(entry => {
                        if (entry.isIntersecting) {
                            const element = entry.target;
                            if (element.tagName === 'IMG') {
                                loadImage(element);
                            } else if (element.tagName === 'VIDEO') {
                                loadVideo(element);
                            }
                            observer.unobserve(element);
                        }
                    });
                });

                // Observer toutes les images et vidéos avec data-src
                document.querySelectorAll('img[data-src], video[data-src]').forEach(element => {
                    mediaObserver.observe(element);
                });
            }

            // Fonctions de navigation par scroll
            function scrollToTop() {
                const container = document.querySelector('.screenshots-container');
                if (container) {
                    // Activer le flag pour empêcher les images de se réafficher
                    isScrollingToTop = true;

                    container.scrollTo({
                        top: 0,
                        behavior: 'smooth'
                    });
                    // Cacher les images adventure et logo quand on va en haut
                    const characterContainer = document.getElementById('characterContainer');
                    const characterContainerLeft = document.getElementById('characterContainerLeft');
                    if (characterContainer) {
                        characterContainer.classList.add('hidden');
                    }
                    if (characterContainerLeft) {
                        characterContainerLeft.classList.add('hidden');
                    }
                    currentCharacterSection = null;

                    // Désactiver le flag après le scroll smooth (800ms + un peu de marge)
                    setTimeout(() => {
                        isScrollingToTop = false;
                    }, 900);
                }
            }

            function scrollToBottom() {
                const container = document.querySelector('.screenshots-container');
                if (container) {
                    container.scrollTo({
                        top: container.scrollHeight,
                        behavior: 'smooth'
                    });
                }
            }

            // Fonction pour gérer le clic sur le bouton de navigation
            function handleScrollNavClick(event) {
                const rect = event.currentTarget.getBoundingClientRect();
                const clickY = event.clientY - rect.top;
                const buttonHeight = rect.height;

                // Si le clic est dans la moitié supérieure, scroll vers le haut
                if (clickY < buttonHeight / 2) {
                    scrollToTop();
                } else {
                    // Sinon, scroll vers le bas
                    scrollToBottom();
                }
            }

            // Character System Functions
            let currentCharacterSection = null;
            let scrollTimeout = null;
            let isScrollingToTop = false;

            function updateCharacter(sectionTitle) {
                // Ne pas afficher les images si on est en train de scroller vers le haut
                if (isScrollingToTop) return;

                const characterContainer = document.getElementById('characterContainer');
                const characterImage = document.getElementById('characterImage');
                const characterContainerLeft = document.getElementById('characterContainerLeft');
                const characterImageLeft = document.getElementById('characterImageLeft');

                if (!characterContainer || !characterImage || !characterContainerLeft || !characterImageLeft) return;

                // Ne pas changer si c'est déjà le même personnage
                if (currentCharacterSection === sectionTitle) return;

                const characterPath = characterMapping[sectionTitle];
                const characterPathLeft = characterMappingLeft[sectionTitle];

                // Fade out current characters seulement si on change vraiment
                if (currentCharacterSection !== null) {
                    characterContainer.classList.add('hidden');
                    characterContainerLeft.classList.add('hidden');

                    setTimeout(() => {
                        // Mettre à jour l'image de droite (animée)
                        if (characterPath) {
                            characterImage.src = characterPath;
                            characterImage.style.display = 'block';
                            characterContainer.classList.remove('hidden');

                            // Ajouter l'effet de feu pour FirstHouse.webp
                            if (characterPath.includes('FirstHouse.webp')) {
                                // Vérifier si l'effet de feu n'est pas déjà présent
                                if (!characterContainer.querySelector('.fire-effect')) {
                                    const fireImg = document.createElement('img');
                                    fireImg.src = 'img/adventure/Fire.gif';
                                    fireImg.alt = 'Fire';
                                    fireImg.className = 'fire-effect';
                                    fireImg.style.cssText = 'position: absolute; top: 50px; left: 20px; width: calc(100% - 200px); height: calc(100% - 200px); object-fit: cover; z-index: 1; opacity: 1; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;';
                                    characterContainer.appendChild(fireImg);
                                    // S'assurer que l'image du personnage est au-dessus
                                    characterImage.style.position = 'relative';
                                    characterImage.style.zIndex = '2';
                                }
                            } else {
                                // Retirer l'effet de feu s'il existe
                                const fireEffect = characterContainer.querySelector('.fire-effect');
                                if (fireEffect) {
                                    fireEffect.remove();
                                }
                                // Remettre l'image du personnage en position normale
                                characterImage.style.position = '';
                                characterImage.style.zIndex = '';
                            }
                        } else {
                            characterContainer.classList.add('hidden');
                        }

                        // Mettre à jour l'image de gauche (logo) - synchronisé avec la droite
                        if (characterPathLeft) {
                            characterImageLeft.src = characterPathLeft;
                            characterImageLeft.style.display = 'block';
                            characterContainerLeft.classList.remove('hidden');
                        } else {
                            characterImageLeft.style.display = 'none';
                            characterContainerLeft.classList.add('hidden');
                        }

                        currentCharacterSection = sectionTitle;
                    }, 250);
                } else {
                    // Première fois, pas de fade
                    if (characterPath) {
                        characterImage.src = characterPath;
                        characterImage.style.display = 'block';
                        characterContainer.classList.remove('hidden');

                        // Ajouter l'effet de feu pour FirstHouse.webp
                        if (characterPath.includes('FirstHouse.webp')) {
                            // Vérifier si l'effet de feu n'est pas déjà présent
                            if (!characterContainer.querySelector('.fire-effect')) {
                                const fireImg = document.createElement('img');
                                fireImg.src = 'img/adventure/Fire.gif';
                                fireImg.alt = 'Fire';
                                fireImg.className = 'fire-effect';
                                fireImg.style.cssText = 'position: absolute; top: 50px; left: 20px; width: calc(100% - 200px); height: calc(100% - 200px); object-fit: cover; z-index: 1; opacity: 1; image-rendering: pixelated; image-rendering: -moz-crisp-edges; image-rendering: crisp-edges;';
                                characterContainer.appendChild(fireImg);
                                // S'assurer que l'image du personnage est au-dessus
                                characterImage.style.position = 'relative';
                                characterImage.style.zIndex = '2';
                            }
                        } else {
                            // Retirer l'effet de feu s'il existe
                            const fireEffect = characterContainer.querySelector('.fire-effect');
                            if (fireEffect) {
                                fireEffect.remove();
                            }
                            // Remettre l'image du personnage en position normale
                            characterImage.style.position = '';
                            characterImage.style.zIndex = '';
                        }
                    } else {
                        characterContainer.classList.add('hidden');
                    }

                    if (characterPathLeft) {
                        characterImageLeft.src = characterPathLeft;
                        characterImageLeft.style.display = 'block';
                        characterContainerLeft.classList.remove('hidden');
                    } else {
                        characterImageLeft.style.display = 'none';
                        characterContainerLeft.classList.add('hidden');
                    }

                    currentCharacterSection = sectionTitle;
                }
            }

            function getVisibleSection() {
                const grids = document.querySelectorAll('.screenshots-grid[id]');
                const container = document.querySelector('.screenshots-container');

                if (!container || grids.length === 0) return null;

                const containerRect = container.getBoundingClientRect();
                const containerTop = containerRect.top;
                const containerBottom = containerRect.bottom;
                const containerCenter = (containerTop + containerBottom) / 2;
                const containerHeight = containerBottom - containerTop;

                let bestGrid = null;
                let bestScore = -Infinity;

                // Trouver la section actuellement visible
                const currentVisibleGrids = [];

                grids.forEach(grid => {
                    const gridRect = grid.getBoundingClientRect();
                    const gridTop = gridRect.top;
                    const gridBottom = gridRect.bottom;
                    const gridHeight = gridBottom - gridTop;

                    // Vérifier si la grille est au moins partiellement visible
                    const isPartiallyVisible = gridBottom > containerTop && gridTop < containerBottom;

                    if (isPartiallyVisible) {
                        currentVisibleGrids.push({
                            grid: grid,
                            gridTop: gridTop,
                            gridBottom: gridBottom,
                            gridHeight: gridHeight,
                            gridCenter: (gridTop + gridBottom) / 2
                        });
                    }
                });

                // Si aucune grille n'est visible, retourner null
                if (currentVisibleGrids.length === 0) return null;

                // Si une seule grille est visible, la retourner
                if (currentVisibleGrids.length === 1) {
                    return currentVisibleGrids[0].grid.id;
                }

                // Pour plusieurs grilles visibles, choisir la meilleure
                currentVisibleGrids.forEach(gridData => {
                    const { grid, gridTop, gridBottom, gridHeight, gridCenter } = gridData;

                    // Calculer le pourcentage de visibilité
                    const visibleTop = Math.max(gridTop, containerTop);
                    const visibleBottom = Math.min(gridBottom, containerBottom);
                    const visibleHeight = Math.max(0, visibleBottom - visibleTop);
                    const visibilityPercentage = gridHeight > 0 ? visibleHeight / gridHeight : 0;

                    // Distance du centre du conteneur
                    const centerDistance = Math.abs(gridCenter - containerCenter);

                    // Détection spéciale pour les sections très hautes
                    const isVeryTallSection = gridHeight > containerHeight * 1.2;
                    const isMobile = window.innerWidth <= 768;

                    let score;

                    if (isVeryTallSection) {
                        // Pour les sections très hautes, on privilégie la position du haut
                        // et on pénalise si on est trop bas dans la section
                        const topDistance = Math.abs(gridTop - containerTop);
                        const topVisibility = Math.max(0, (containerBottom - gridTop) / containerHeight);

                        // Bonus si le haut de la grille est proche du haut du conteneur
                        const topBonus = topDistance < containerHeight * 0.3 ? 0.5 : 0;

                        // Pénalité si on est trop bas dans une section très haute
                        const bottomPenalty = gridTop < containerTop - containerHeight * 0.5 ? -0.3 : 0;

                        score = topVisibility + topBonus + bottomPenalty - (topDistance / (isMobile ? 50 : 200));
                    } else {
                        // Logique normale pour les sections de taille normale
                        const distanceWeight = isMobile ? 0.7 : 0.3;
                        const visibilityWeight = isMobile ? 0.3 : 0.7;

                        score = (visibilityPercentage * visibilityWeight) - (centerDistance / (isMobile ? 200 : 1000)) * distanceWeight;
                    }

                    // Seuil minimum de visibilité
                    const minVisibility = isMobile ? 0.05 : 0.1;

                    if (visibilityPercentage >= minVisibility && score > bestScore) {
                        bestScore = score;
                        bestGrid = grid;
                    }
                });

                return bestGrid ? bestGrid.id : null;
            }

            function checkVisibleSection() {
                // Délai pour éviter les appels trop fréquents
                if (scrollTimeout) {
                    clearTimeout(scrollTimeout);
                }

                // Délai plus court sur mobile pour une meilleure réactivité
                const isMobile = window.innerWidth <= 768;
                const delay = isMobile ? 25 : 50;

                scrollTimeout = setTimeout(() => {
                    const visibleSectionTitle = getVisibleSection();
                    if (visibleSectionTitle && visibleSectionTitle !== currentCharacterSection) {
                        updateCharacter(visibleSectionTitle);
                    }
                }, delay);
            }

            // Initialiser quand la page est chargée
            document.addEventListener('DOMContentLoaded', function () {
                initializeAllSections();
                setupLazyLoading();

                // Ajouter l'événement de clic au bouton de navigation
                const scrollNavButton = document.getElementById('scrollNavButton');
                if (scrollNavButton) {
                    scrollNavButton.addEventListener('mousedown', handleScrollNavClick);
                }

                // Character System - Initialiser et surveiller le scroll
                checkVisibleSection();

                // Surveiller le scroll pour changer le personnage
                const container = document.querySelector('.screenshots-container');
                if (container) {
                    container.addEventListener('scroll', checkVisibleSection);
                }

                // Recalculer lors du redimensionnement de la fenêtre
                window.addEventListener('resize', () => {
                    setTimeout(checkVisibleSection, 100);
                });

                // Charger les statistiques de la page
                // Utilise le module tracking.js centralisé du coreSystem
                setTimeout(() => {
                    if (typeof supabase !== 'undefined' && supabase) {
                        // Tracker la visite de la page d'abord, puis charger le compteur après l'enregistrement
                        if (typeof trackPageVisit === 'function') {
                            // Attendre que la visite soit enregistrée avant de charger le compteur
                            trackPageVisit().then(() => {
                                // Une fois la visite enregistrée, charger le compteur avec un petit délai
                                // pour laisser la base de données se synchroniser
                                setTimeout(() => {
                                    if (typeof loadAndDisplayPageViews === 'function') {
                                        loadAndDisplayPageViews('page-views-count', '%/minecraft/screenshots%');
                                    }
                                }, 300);
                            }).catch(() => {
                                // En cas d'erreur, charger quand même le compteur
                                if (typeof loadAndDisplayPageViews === 'function') {
                                    loadAndDisplayPageViews('page-views-count', '%/minecraft/screenshots%');
                                }
                            });
                        } else {
                            // Si trackPageVisit n'est pas disponible, charger directement
                            if (typeof loadAndDisplayPageViews === 'function') {
                                loadAndDisplayPageViews('page-views-count', '%/minecraft/screenshots%');
                            }
                        }

                        // Mettre à jour le compteur toutes les 2 secondes pour un affichage en temps réel plus réactif
                        setInterval(() => {
                            if (typeof loadAndDisplayPageViews === 'function') {
                                loadAndDisplayPageViews('page-views-count', '%/minecraft/screenshots%');
                            }
                        }, 2000);
                    }
                }, 500);
            });

            /**
             * PROTECTION & SÉCURITÉ
             */
            document.addEventListener('contextmenu', e => e.preventDefault());
            document.addEventListener('dragstart', e => {
                if (['IMG', 'VIDEO'].includes(e.target.tagName)) e.preventDefault();
            });
            document.addEventListener('keydown', e => {
                if (
                    e.keyCode === 123 || // F12
                    (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) || // Ctrl+Shift+I/J
                    (e.ctrlKey && e.keyCode === 85) // Ctrl+U
                ) {
                    e.preventDefault();
                    return false;
                }
            });
        </script>

    <!-- Scripts Supabase et CoreSystem -->
    <script src="https://cdn.jsdelivr.net/npm/@supabase/supabase-js@2"></script>
    <script src="../coreSystem/supabase.js"></script>
    <script src="../coreSystem/founder.js"></script>

    <!-- Chargeurs dynamiques -->
    <script src="../coreSystem/modals-loader.js"></script>
    <script src="../coreSystem/auth-nav-loader.js"></script>

    <!-- Scripts modulaires core -->
    <script src="../coreSystem/profiles-config.js"></script>
    <script src="../coreSystem/profiles.js"></script>
    <script src="../coreSystem/auth.js"></script>
    <script src="../coreSystem/avatars.js"></script>
    <script src="../coreSystem/reactions.js"></script>
    <script src="../coreSystem/comments.js"></script>
    <script src="../coreSystem/notifications.js"></script>
    <script src="../coreSystem/app.js"></script>
    <script src="../coreSystem/tracking.js"></script>
    <script src="../coreSystem/i18n.js"></script>

</body>

</html>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                      ██ FIRST CREATED: 2025-10-23 ██ LAST UPDATED: 2026-03-12 ██                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ INTRUSION DETECTED ██                                                                              ║    
    ║ ██ UNAUTHORIZED ACCESS ATTEMPT LOGGED ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ TERMINATING CONNECTION ██                                                                          ║    
    ║ ██ DISCONNECTING FROM SLAIZEN.COM ██                                                                  ║    
    ║ ██ CONNECTION CLOSED ██                                                                               ║    
    ║                                                                                                       ║    
    ║ ██ YOU ARE NOW LEAVING THE UNDER-GRID ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝    
  ███████ ██       █████  ██ ███████ ███████ ███    ██     ██    ███ ███████ ███████ ██  █████       ██ ███████  
  ██      ██      ██   ██ ██    ███  ██      ████   ██     ██   ████      ██  ███    ██ ██   ██      ██      ██  
  ███████ ██      ███████ ██   ███   █████   ██ ██  ██     ██  ██ ██   █████   ███   ██ ███████      ██ ███████  
       ██ ██      ██   ██ ██  ███    ██      ██  ██ ██     ██ ██  ██      ██    ███  ██ ██   ██      ██ ██       
  ███████ ███████ ██   ██ ██ ███████ ███████ ██   ████     ████   ██ ███████ ███████ ██ ██   ██ ███████ ███████  
-->