<!--                                                                                                             
               ████                                                                           ████               
             ███                                                                                 ███             
           ███                                        ██                                           ███           
        ████                                          ██                                             ████        
      ████                                                                                             ████      
    ████                                                                                                 ████    
  █████████████████████     ██               ████     ██    █████████████   █████████     █████████████████████  
                 ████     ████             ██████     ██              ███                   ████                 
               ███      ████             ███   ██     ██            ███                       ████               
             ███      ████             ███     ██     ██         ████       ███████████████      ███             
          ████      ███              ████████████     ██       ████                                ███           
        ████      ███              ███         ██     ██     ████                                    ████        
      ████      ██████████████  ████           ██     ██   ██████████████   ████████████████████       ████      
                                                                                                                 
       ██ 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">
    <link rel="stylesheet" href="../coreSystem/auth.css">
    <link rel="stylesheet" href="../coreSystem/modals.css">
    <link rel="stylesheet" href="../coreSystem/comments.css">
    <link rel="stylesheet" href="../coreSystem/notifications.css">
    <link rel="stylesheet" href="../coreSystem/reactions.css">
    <link rel="stylesheet" href="../coreSystem/profiles.css">
    <link rel="stylesheet" href="../coreSystem/interface.css">
    <!--╔══════════════════════════════════════════════════════════════════════════════════════════════════════╗   
    ║                                       ██ ACCESSING: CSS CORE ██                                      ║   
    ╚══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <style>
        * {
            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;
        }

        /* Langue Visibility Rules */
        [lang="fr"] .lang-en {
            display: none !important;
        }

        [lang="en"] .lang-fr {
            display: none !important;
        }

        body {
            font-family: '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;
        }

        /* S'assurer que le bouton œil est visible */
        #toggle-password {
            display: flex !important;
            visibility: visible !important;
            opacity: 0.7 !important;
        }

        #password-toggle-icon {
            display: inline-block !important;
            visibility: visible !important;
        }

        /* Forcer la police pour le bouton modifier et le niveau */
        #profile-edit-btn,
        #profile-edit-btn *,
        #profile-modal-title .level-box,
        #profile-modal-title .level-box *,
        .level-box,
        .level-box * {
            font-family: 'Source Code Pro', monospace !important;
        }


        /* Police pour les notifications - sans affecter les autres styles (taille et couleur) */
        /* Les styles inline (font-size, color, etc.) sont préservés automatiquement */
        #message {
            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;
        }

        /* Espacement forcé entre chaque bloc du menu */
        /* Marges supprimées : le gap est maintenant géré par interface.css */

        .auth-nav .btn-lang {
            min-width: 60px !important;
        }

        .auth-nav .btn::before {
            display: none !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-primary:hover {
            filter: brightness(1.08) !important;
            border-color: #fff !important;
        }

        /* Style carré pour le bouton de notification */
        .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;
        }


        /* Main UI Panel */
        .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 */
        .title {
            text-align: center;
            font-size: clamp(12px, 2.5vw, 18px);
            color: #fff;
            margin-bottom: 20px;
            text-shadow: 2px 2px 0 #000;
        }


        /* Main Container */
        .skin-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;
            box-sizing: border-box;
            padding: 0;
            min-width: 100%;
        }

        /* Skin Preview Section (Left) */
        .skin-preview {
            flex: 0 0 35%;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 20px;
            border-right: 2px solid rgba(255, 255, 255, 0.3);
            background: rgba(0, 0, 0, 0.3);
            height: 100%;
            box-sizing: border-box;
            overflow-y: auto;
            overflow-x: visible;
        }

        .skin-preview-image {
            width: 100%;
            height: auto;
            max-width: 100%;
            image-rendering: pixelated;
            margin-bottom: 20px;
            transform-origin: bottom center;
            animation: skinBreathe 3.2s ease-in-out infinite;
        }

        @keyframes skinBreathe {

            0%,
            100% {
                transform: scale(1);
            }

            50% {
                /* slight chest expansion, feet stay planted */
                transform: scaleX(0.992) scaleY(1.018);
            }
        }

        .skin-preview-name {
            font-size: 18px;
            color: #fff;
            text-align: center;
            text-shadow: 2px 2px 0 #000;
            margin-bottom: 15px;
        }

        .skin-preview-creation-date {
            font-size: 14px;
            color: #aaa;
            text-align: left;
            text-shadow: 1px 1px 0 #000;
            margin-bottom: 15px;
        }

        .skin-preview-description {
            font-size: 14px;
            color: #ccc;
            text-align: left;
            text-shadow: 1px 1px 0 #000;
            line-height: 1.4;
            width: 100%;
            padding: 15px 0;
            box-sizing: border-box;
            margin-top: 15px;
        }

        .skin-preview-comments {
            width: 100%;
            margin-top: 20px;
            padding-top: 15px;
            border-top: 2px solid rgba(255, 255, 255, 0.2);
        }

        /* Styles pour les commentaires du coreSystem */
        .skin-preview-comments .image-comments-container {
            overflow-y: visible;
            overflow-x: visible;
            padding: 10px 0;
        }

        .skin-preview-comments .image-comment-form-container,
        .skin-preview-comments .image-guest-comment-form-container {
            margin-top: 15px;
            padding-top: 15px;
            border-top: 2px solid rgba(255, 255, 255, 0.2);
        }

        .skin-preview-comments .image-comment-form-container textarea,
        .skin-preview-comments .image-guest-comment-form-container textarea {
            width: 100%;
            padding: 8px;
            background: rgba(0, 0, 0, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            color: #fff;
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            resize: vertical;
            min-height: 60px;
            box-sizing: border-box;
        }

        .skin-preview-comments .image-comment-form-container textarea:focus,
        .skin-preview-comments .image-guest-comment-form-container textarea:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
        }

        .skin-preview-comments .image-guest-comment-form-container input[type="text"] {
            width: 100%;
            padding: 8px;
            background: rgba(0, 0, 0, 0.4);
            border: 2px solid rgba(255, 255, 255, 0.3);
            border-radius: 4px;
            color: #fff;
            font-family: 'Press Start 2P', monospace;
            font-size: 10px;
            margin-bottom: 8px;
            box-sizing: border-box;
        }

        .skin-preview-comments .image-guest-comment-form-container input[type="text"]:focus {
            outline: none;
            border-color: rgba(255, 255, 255, 0.6);
        }

        .skin-preview-miniature {
            width: 100%;
            max-width: 100%;
            height: auto;
            image-rendering: pixelated;
            image-rendering: -moz-crisp-edges;
            image-rendering: crisp-edges;
            margin-top: 15px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            background: rgba(0, 0, 0, 0.2);
        }

        /* Diamond overlay for Daisuke skin */
        .skin-preview-image-container {
            position: relative;
            display: inline-block;
            width: 100%;
            overflow: visible;
        }

        .diamond-overlay {
            position: absolute;
            top: 20px;
            right: 20px;
            width: 24px;
            height: 24px;
            background-image: url('diamond.webp');
            background-size: contain;
            background-repeat: no-repeat;
            background-position: center;
            image-rendering: pixelated;
            z-index: 10;
            cursor: pointer;
            transition: transform 0.2s ease;
        }

        .diamond-overlay:hover {
            transform: scale(1.2);
        }

        .diamond-overlay.hidden {
            display: none;
        }

        .diamond-overlay.collecting {
            position: fixed !important;
            animation: diamondCollect 1.5s ease-in-out forwards;
            pointer-events: none;
            z-index: 9999;
        }

        @keyframes diamondCollect {
            0% {
                transform: scale(1);
                opacity: 1;
            }

            30% {
                transform: scale(1.5);
                opacity: 1;
            }

            70% {
                transform: scale(1.2);
                opacity: 0.9;
            }

            100% {
                transform: scale(0.4);
                opacity: 0;
            }
        }

        /* Skin Selection Section (Right) */
        .skin-selection {
            flex: 1;
            display: flex;
            flex-direction: column;
            padding: 20px;
            overflow-y: auto;
        }

        .skin-selection-title {
            font-size: 14px;
            color: #fff;
            margin-bottom: 15px;
            text-align: center;
            text-shadow: 2px 2px 0 #000;
        }

        /* Skin Sections (Right) */
        .skin-section {
            margin-bottom: 20px;
        }

        .skin-section-title {
            font-size: 14px;
            color: #fff;
            margin-bottom: 12px;
            text-align: left;
            text-shadow: 2px 2px 0 #000;
        }

        .skin-grid {
            display: grid;
            grid-template-columns: repeat(auto-fill, 140px);
            gap: 12px;
            width: 100%;
            justify-content: center;
        }

        .skin-item {
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: flex-start;
            padding: 10px;
            border: 2px solid rgba(255, 255, 255, 0.3);
            cursor: pointer;
            transition: all 0.2s;
            background: rgba(0, 0, 0, 0.2);
            width: 140px;
            height: 195px;
            overflow: hidden;
            position: relative;
        }

        .skin-item:hover {
            background: rgba(255, 255, 255, 0.1);
            border-color: rgba(255, 255, 255, 0.6);
        }

        .skin-item.selected {
            background: rgba(255, 255, 255, 0.2);
            border-color: #fff;
        }

        /* Conteneur pour vues et téléchargements sur la même ligne */
        .skin-stats {
            display: flex;
            justify-content: center;
            align-items: center;
            gap: 6px;
            margin-top: 4px;
        }

        .skin-views {
            position: absolute;
            bottom: 2px;
            left: 2px;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 3px 6px;
            background: rgba(0, 0, 0, 0.75);
            border-radius: 4px;
            font-size: 10px;
            color: #bdbdbd;
            z-index: 5;
            pointer-events: none;
        }

        .skin-downloads,
        .skin-comments {
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 3px;
            padding: 3px 6px;
            background: rgba(0, 0, 0, 0.6);
            border-radius: 4px;
            font-size: 10px;
            color: #bdbdbd;
        }

        .skin-views .views-num,
        .skin-downloads .downloads-num,
        .skin-comments .comments-num {
            font-size: 8px;
        }

        .skin-downloads .downloads-num {
            color: #4dd4a8;
        }

        .skin-comments .comments-num {
            color: #4dd4a8;
        }

        /* 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;
        }

        .skin-thumbnail {
            width: 96px;
            height: 96px;
            background: transparent;
            border: none;
            margin-bottom: 8px;
            image-rendering: pixelated;
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 8px;
            color: #fff;
            position: relative;
            overflow: hidden;
            pointer-events: auto;
        }

        .skin-thumbnail img {
            width: 100%;
            height: 100%;
            object-fit: cover;
            pointer-events: auto;
        }

        .skin-name {
            font-size: 12px;
            color: #fff;
            text-align: center;
            text-shadow: 1px 1px 0 #000;
            word-break: break-word;
            margin-bottom: 4px;
            height: 32px;
            /* 2 lines max */
            pointer-events: auto;
            line-height: 1.2;
            overflow: hidden;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            line-clamp: 2;
            -webkit-box-orient: vertical;
        }

        .skin-date {
            font-size: 10px;
            color: #aaa;
            text-align: center;
            text-shadow: 1px 1px 0 #000;
            height: 14px;
            line-height: 14px;
            overflow: hidden;
            pointer-events: auto;
        }

        /* Responsive Design */
        @media (max-width: 768px) {
            .skin-container {
                flex-direction: column;
            }

            .skin-preview {
                flex: none;
                border-right: none;
                border-bottom: 2px solid rgba(255, 255, 255, 0.3);
                min-height: 250px;
            }


            .skin-preview-name {
                font-size: 16px;
            }

            .skin-preview-creation-date {
                font-size: 12px;
            }

            .skin-preview-description {
                width: 100%;
                font-size: 13px;
            }

            .skin-name {
                font-size: 10px;
            }

            .skin-date {
                font-size: 8px;
            }

            .skin-grid {
                grid-template-columns: repeat(auto-fill, 110px);
                gap: 10px;
                justify-content: center;
            }

            .skin-item {
                width: 110px;
                height: 175px;
            }

            .skin-thumbnail {
                width: 80px;
                height: 80px;
            }
        }


        /* Action Buttons */
        .action-buttons {
            position: fixed;
            bottom: 20px;
            left: 50%;
            transform: translateX(-50%);
            display: flex;
            justify-content: center;
            width: min(100%, 800px);
            z-index: 20;
        }

        .btn {
            appearance: none;
            border: 3.5px solid #000000;
            color: #fff;
            font-weight: 700;
            font-family: 'Press Start 2P', monospace;
            letter-spacing: 1px;
            text-transform: none;
            font-size: 12px;
            height: 50px;
            padding: 0 20px;
            white-space: nowrap;
            min-width: 320px;
            text-align: center;
            background: linear-gradient(#7a7a7a, #6a6a6a);
            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;
            border-radius: 0;
            cursor: pointer;
            text-shadow: 2px 2px 0 #000;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            margin-right: 20px;
        }

        .btn:last-child {
            margin-right: 0;
        }

        .btn:hover {
            filter: brightness(1.08);
            border-color: #fff;
        }

        .btn:active {
            transform: translateY(2px);
            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;
            transition: none;
        }

        .btn.primary {
            background: linear-gradient(#888888, #777777);
            font-weight: bold;
        }

        .btn.primary:hover {
            filter: brightness(1.08);
            border-color: #fff;
        }

        .btn.disabled {
            background: linear-gradient(#4a4a4a, #3a3a3a);
            color: #666;
            cursor: not-allowed;
            opacity: 0.7;
        }

        .btn.disabled:hover {
            filter: none;
            border-color: #000000;
        }

        /* Scrollbar styling - Noir discret */
        .skin-selection::-webkit-scrollbar,
        .skin-preview::-webkit-scrollbar {
            width: 8px;
        }

        .skin-selection::-webkit-scrollbar-track,
        .skin-preview::-webkit-scrollbar-track {
            background: transparent !important;
        }

        .skin-selection::-webkit-scrollbar-thumb,
        .skin-preview::-webkit-scrollbar-thumb {
            background: rgba(128, 128, 128, 0.5) !important;
            border-radius: 4px;
            border: none;
        }

        .skin-selection::-webkit-scrollbar-thumb:hover,
        .skin-preview::-webkit-scrollbar-thumb:hover {
            background: rgba(128, 128, 128, 0.7) !important;
        }

        .skin-selection::-webkit-scrollbar-thumb:active,
        .skin-preview::-webkit-scrollbar-thumb:active {
            background: rgba(128, 128, 128, 0.9) !important;
        }

        .skin-selection::-webkit-scrollbar-corner,
        .skin-preview::-webkit-scrollbar-corner {
            background: transparent !important;
        }

        /* Forcer le style sur tous les navigateurs */
        .skin-selection,
        .skin-preview {
            scrollbar-width: thin;
            scrollbar-color: rgba(128, 128, 128, 0.3) transparent;
        }

        /* Additional Responsive */
        @media (max-width: 480px) {
            .ui-panel {
                width: 95vw;
                height: 90vh;
                padding: 15px;
            }


            .skin-preview-name {
                font-size: 12px;
            }

            .skin-name {
                font-size: 8px;
            }

            .btn {
                font-size: 8px;
                height: 35px;
            }
        }
    </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>

    <!-- 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">
            <span class="lang-fr">vues</span>
            <span class="lang-en">views</span>
        </span>
    </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>

    <!-- Main UI -->
    <div class="ui-panel">
        <h1 class="title">
            <span class="lang-fr">Sélectionner un Skin / Pack de Texture</span>
            <span class="lang-en">Select Skins / Texture Pack</span>
        </h1>

        <div class="skin-container">
            <!-- Section d'aperçu du skin (gauche) -->
            <div class="skin-preview">
                <div class="skin-preview-image-container">
                    <img class="skin-preview-image" id="skinPreview" data-src="" alt="Skin preview" />
                    <div class="diamond-overlay hidden" id="diamondOverlay" onmousedown="collectDiamond()"></div>
                </div>
                <div class="skin-preview-name" id="skinName"></div>
                <div class="skin-preview-creation-date" id="skinCreationDate"></div>
                <div class="skin-preview-description" id="skinDescription"></div>
                <div class="skin-preview-comments">
                    <h3
                        style="color: #C5D4E0; margin-bottom: 0; margin-top: 0; padding-bottom: 0; line-height: 1.2; font-family: 'Source Code Pro', monospace;">
                        <span class="lang-fr">Commentaires</span>
                        <span class="lang-en">Comments</span>
                    </h3>
                    <div id="image-comments-container" class="image-comments-container">
                        <!-- Les commentaires seront chargés ici -->
                    </div>
                    <!-- Formulaire de commentaire pour utilisateurs connectés -->
                    <div id="image-comment-form-container" class="image-comment-form-container hidden">
                        <form id="image-comment-form">
                            <textarea id="image-comment-text" placeholder="Ajouter un commentaire..."
                                data-en="Add a comment..." rows="3" required></textarea>
                            <button type="submit" class="btn btn-primary">
                                <span class="lang-fr">Publier</span>
                                <span class="lang-en">Post</span>
                            </button>
                        </form>
                    </div>
                    <!-- Formulaire de commentaire pour invités -->
                    <div id="image-guest-comment-form-container" class="image-guest-comment-form-container hidden">
                        <form id="image-guest-comment-form">
                            <input type="text" id="image-guest-name" placeholder="Votre nom (optionnel)"
                                data-en="Your name (optional)" maxlength="50">
                            <textarea id="image-guest-comment-text" placeholder="Ajouter un commentaire..."
                                data-en="Add a comment..." rows="3" required></textarea>
                            <button type="submit" class="btn btn-primary">
                                <span class="lang-fr">Publier</span>
                                <span class="lang-en">Post</span>
                            </button>
                        </form>
                    </div>
                </div>
                <img class="skin-preview-miniature" id="skinMiniature" src="" alt="Skin miniature" />
            </div>

            <!-- Section de sélection des skins (droite) -->
            <div class="skin-selection">
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Évolution des skins personnels de 'Slaizen'</span>
                        <span class="lang-en">'Slaizen' Personal Skins Evolution</span>
                    </div>
                    <div class="skin-grid" id="skinGridPersonal"></div>
                </div>
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Skins 'Naruto' et 'Hayate Gaiden'</span>
                        <span class="lang-en">'Naruto' and 'Hayate Gaiden' Skins</span>
                    </div>
                    <div class="skin-grid" id="skinGridNaruto"></div>
                </div>
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Skins Power Rangers</span>
                        <span class="lang-en">Power Rangers Skins</span>
                    </div>
                    <div class="skin-grid" id="skinGridPowerRangers"></div>
                </div>
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Autres</span>
                        <span class="lang-en">Others</span>
                    </div>
                    <div class="skin-grid" id="skinGridOthers"></div>
                </div>
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Créatures (Mobs)</span>
                        <span class="lang-en">Mobs</span>
                    </div>
                    <div class="skin-grid" id="skinGridMobs"></div>
                </div>
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Pack de Texture</span>
                        <span class="lang-en">Texture Pack</span>
                    </div>
                    <div class="skin-grid" id="skinGridTexturePack"></div>
                </div>
                <div class="skin-section">
                    <div class="skin-section-title">
                        <span class="lang-fr">Commissions</span>
                        <span class="lang-en">Commissions</span>
                    </div>
                    <div class="skin-grid" id="skinGridCommissions"></div>
                </div>
            </div>
        </div>


        <div class="action-buttons">
            <button class="btn disabled" id="downloadBtn" onmousedown="downloadSkin()">💾
                <span class="lang-fr">Télécharger le skin</span>
                <span class="lang-en">Download Skin</span>
                (<span id="selectedSkinDownloads">0</span>)
            </button>
            <button class="btn primary" onmousedown="window.location.href='minecraft.html'">
                <span class="lang-fr">Retour</span>
                <span class="lang-en">Back</span>
            </button>
        </div>
    </div>

    <!-- MODAL 1: Image Modal - Affiche les images en gros plan avec commentaires -->
    <div id="image-modal" class="modal image-modal">
        <div class="modal-content">
            <span class="modal-close" id="image-modal-close">&times;</span>
            <div class="image-modal-image-container">
                <button id="image-modal-prev" class="image-modal-nav-btn image-modal-nav-prev"
                    style="display: none;">◀</button>
                <img id="image-modal-content" class="image-modal-content" src="" alt="Image en gros plan">
                <button id="image-modal-next" class="image-modal-nav-btn image-modal-nav-next"
                    style="display: none;">▶</button>
                <div id="image-modal-counter" class="image-modal-counter" style="display: none;"></div>
                <div id="image-modal-info" class="image-modal-info" style="display: none;">
                    <div id="image-modal-date" class="image-modal-date"></div>
                    <div id="image-modal-description" class="image-modal-description"></div>
                </div>
            </div>
            <div class="image-modal-comments-container" id="image-modal-comments-container">
                <h3
                    style="color: #C5D4E0; margin-bottom: 0; margin-top: 0; padding-bottom: 0; line-height: 1.2; font-family: 'Source Code Pro', monospace;">
                    Commentaires</h3>
                <div id="image-comments-container" class="image-comments-container">
                    <!-- Les commentaires seront chargés ici -->
                </div>
                <!-- Formulaire de commentaire pour utilisateurs connectés -->
                <div id="image-comment-form-container" class="image-comment-form-container hidden">
                    <form id="image-comment-form">
                        <textarea id="image-comment-text" placeholder="Ajouter un commentaire..." rows="3"
                            required></textarea>
                        <button type="submit" class="btn btn-primary">Publier</button>
                    </form>
                </div>
                <!-- Formulaire de commentaire pour invités -->
                <div id="image-guest-comment-form-container" class="image-guest-comment-form-container">
                    <form id="image-guest-comment-form">
                        <input type="text" id="image-guest-name" placeholder="Votre nom (optionnel)" maxlength="50">
                        <textarea id="image-guest-comment-text" placeholder="Ajouter un commentaire..." rows="3"
                            required></textarea>
                        <button type="submit" class="btn btn-primary">Publier</button>
                    </form>
                </div>
            </div>
        </div>
    </div>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ AI JAVASCRIPT OUTPUT ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <script>
        // Données des skins disponibles
        const skins = [
            {
                section: "slaizen",
                name_fr: "Le Retour",
                name_en: "The Comeback",
                date: "2025-09-12",
                description_fr: "Après avoir perdu mon compte...",
                description_en: "After losing my account...",
                image: "img/skins/2025-09-12-Slaizen_Skin.webp",
                miniature: "img/skins/2025-09-12-Slaizen_Skin.png"
            },
            {
                section: "slaizen",
                name_fr: "theSHINOBIway",
                name_en: "theSHINOBIway",
                date: "2015-08-14",
                description_fr: "Skin que j'ai créé pour mon compte secondaire 'theSHINOBIway' basé sur un mélange de mon skin de Daisuke en 2016 et mon skin personnel. J'ai énormément utilisé ce compte en AFK sur 'Manacube' en 2019. Ce compte est aujourd'hui mon compte principal suite à la perte de mon compte original lors de la migration Microsoft.",
                description_en: "Skin I created for my secondary account 'theSHINOBIway' based on a mix of my 2016 Daisuke skin and my personal skin. I used this account extensively AFK on 'Manacube' in 2019. This is now my main account following the loss of my original account during the Microsoft migration.",
                image: "img/skins/2015-08-14-Slaizen_Skin.webp",
                miniature: "img/skins/theSHINOBIway_Skin.png"
            },
            {
                section: "slaizen",
                name_fr: "Slaizen Armuré",
                name_en: "Armored Slaizen",
                date: "2015-08-14",
                description_fr: "Une version de Slaizen équipée d'une armure sombre pour le combat.",
                description_en: "A version of Slaizen equipped with dark armor for combat.",
                image: "img/skins/2015-08-14-Slaizen_Skin.webp",
                miniature: "img/skins/2015-08-14-Slaizen_Skin.png"
            },
            {
                section: "slaizen",
                name_fr: "Slaizen Féminin",
                name_en: "Girly Slaizen",
                date: "2015-08-21",
                description_fr: "Une variante féminine de mon skin, créée pour l'expérimentation visuelle.",
                description_en: "A feminine variant of my skin, created for visual experimentation.",
                image: "img/skins/2015-08-21-Slaizen_Skin.webp",
                miniature: "img/skins/2015-08-21-Slaizen_Skin.png"
            },
            {
                section: "slaizen",
                name_fr: "Slaizen Basique",
                name_en: "Basic Slaizen",
                date: "2013-08-21",
                description_fr: "J'ai peut-être emprunté le pantalon d'un autre skin.",
                description_en: "I might have borrowed the pants from another skin.",
                image: "img/skins/2013-08-21-Slaizen_Skin.webp",
                miniature: "img/skins/2013-08-21-Slaizen_Skin.png"
            },
            {
                section: "slaizen",
                name_fr: "Premier Essai",
                name_en: "First Try",
                date: "2013-08-02",
                description_fr: "Ma toute première tentative de création de skin personnalisé.",
                description_en: "My very first attempt at creating a custom skin.",
                image: "img/skins/2013-08-02-Slaizen_Skin.webp",
                miniature: "img/skins/2013-08-02-Slaizen_Skin.png"
            },
            {
                section: "naruto",
                name_fr: "Hayate Denkou",
                name_en: "Hayate Denkou",
                date: "2016-01-22",
                description_fr: "Un personnage mystérieux de l'univers Naruto. Un ninja aux pouvoirs électriques redoutables.",
                description_en: "A mysterious character from the Naruto universe. A ninja with fearsome electrical powers.",
                image: "img/skins/2016-01-22-Hayate_Gaiden-Hayate_Denko-by_Slaizen.webp",
                miniature: "img/skins/2016-01-22-Hayate_Gaiden-Hayate_Denko-by_Slaizen.png"
            },
            {
                section: "naruto",
                name_fr: "Tenjin Shikoyaku",
                name_en: "Tenjin Shikoyaku",
                date: "2016-01-29",
                description_fr: "Un ninja légendaire aux techniques de téléportation. Une créature mystérieuse de l'univers Naruto.",
                description_en: "A legendary ninja with teleportation techniques. A mysterious creature from the Naruto universe.",
                image: "img/skins/2016-01-29-Hayate_Gaiden-Tenjin_Shikoyaku-by_Slaizen.webp",
                miniature: "img/skins/2016-01-29-Hayate_Gaiden-Tenjin_Shikoyaku-by_Slaizen.png"
            },
            {
                section: "naruto",
                name_fr: "Daisuke",
                name_en: "Daisuke",
                date: "2016-01-22",
                description_fr: "Un habitant paisible du village caché. Ce commerçant propose des échanges et des quêtes aux ninjas de passage.",
                description_en: "A peaceful inhabitant of the hidden village. This merchant offers trades and quests to passing ninjas.",
                image: "img/skins/2016-01-22-Hayate_Gaiden-Daisuke-by_Slaizen.webp",
                miniature: "img/skins/2016-01-22-Hayate_Gaiden-Daisuke-by_Slaizen.png"
            },
            {
                section: "naruto",
                name_fr: "Teuchi",
                name_en: "Teuchi",
                date: "2016-01-23",
                description_fr: "Le propriétaire du stand de ramen d'Ichiraku. Un cuisinier passionné qui nourrit les ninjas du village.",
                description_en: "The owner of the Ichiraku ramen stand. A passionate cook who feeds the village's ninjas.",
                image: "img/skins/2016-01-23-Naruto-Teuchi-by_Slaizen.webp",
                miniature: "img/skins/2016-01-23-Naruto-Teuchi-by_Slaizen.png"
            },
            {
                section: "naruto",
                name_fr: "Anko",
                name_en: "Anko",
                date: "2016-02-23",
                description_fr: "Une ninja experte en techniques interdites. Une instructrice redoutable aux méthodes peu conventionnelles.",
                description_en: "An expert ninja in forbidden techniques. A fearsome instructor with unconventional methods.",
                image: "img/skins/2016-02-23-Naruto-Anko-by_Slaizen.webp",
                miniature: "img/skins/2016-02-23-Naruto-Anko-by_Slaizen.png"
            },
            {
                section: "powerrangers",
                name_fr: "Alpha",
                name_en: "Alpha",
                date: "2016-02-29",
                description_fr: "Alpha 5, le fidèle assistant robotique des Power Rangers au Centre de Commande.",
                description_en: "Alpha 5, the faithful robotic assistant to the Power Rangers at the Command Center.",
                image: "img/skins/2016-02-29-Power_Rangers-Alpha-by_Slaizen.webp",
                miniature: "img/skins/2016-02-29-Power_Rangers-Alpha-by_Slaizen.png"
            },
            {
                section: "powerrangers",
                name_fr: "Ranger Blanc",
                name_en: "White Ranger",
                date: "2016-02-29",
                description_fr: "Le Power Ranger blanc, symbole de pureté et leader de l'équipe.",
                description_en: "The White Power Ranger, symbol of purity and team leader.",
                image: "img/skins/2016-02-29-Power_Rangers-White-by_Slaizen.webp",
                miniature: "img/skins/2016-02-29-Power_Rangers-White-by_Slaizen.png"
            },
            {
                section: "powerrangers",
                name_fr: "Ranger Vert",
                name_en: "Green Ranger",
                date: "2016-02-29",
                description_fr: "Le Power Ranger vert, le mystérieux combattant aux pouvoirs uniques.",
                description_en: "The Green Power Ranger, the mysterious fighter with unique powers.",
                image: "img/skins/2016-02-29-Power_Rangers-Green-by_Slaizen.webp",
                miniature: "img/skins/2016-02-29-Power_Rangers-Green-by_Slaizen.png"
            },
            {
                section: "powerrangers",
                name_fr: "Ranger Rouge",
                name_en: "Red Ranger",
                date: "2016-02-29",
                description_fr: "Le Power Ranger rouge, le leader intrépide sur le champ de bataille.",
                description_en: "The Red Power Ranger, the undaunted leader on the battlefield.",
                image: "img/skins/2016-02-29-Power_Rangers-Red-by_Slaizen.webp",
                miniature: "img/skins/2016-02-29-Power_Rangers-Red-by_Slaizen.png"
            },
            {
                section: "powerrangers",
                name_fr: "Ranger Bleu",
                name_en: "Blue Ranger",
                date: "2016-02-29",
                description_fr: "Le Power Ranger bleu, spécialisé dans la technologie et l'intelligence tactique.",
                description_en: "The Blue Power Ranger, specialized in technology and tactical intelligence.",
                image: "img/skins/2016-02-29-Power_Rangers-Blue-by_Slaizen.webp",
                miniature: "img/skins/2016-02-29-Power_Rangers-Blue-by_Slaizen.png"
            },
            {
                section: "powerrangers",
                name_fr: "Ranger Noir",
                name_en: "Black Ranger",
                date: "2016-02-29",
                description_fr: "Le Power Ranger noir, le guerrier agile et puissant du groupe.",
                description_en: "The Black Power Ranger, the agile and powerful warrior of the group.",
                image: "img/skins/2016-02-29-Power_Rangers-Black-by_Slaizen.webp",
                miniature: "img/skins/2016-02-29-Power_Rangers-Black-by_Slaizen.png"
            },
            {
                section: "others",
                name_fr: "RMXP Arshe",
                name_en: "RMXP Arshe",
                date: "2014-03-15",
                description_fr: "Un personnage personnalisé créé pour des projets spéciaux et des collaborations.",
                description_en: "A custom character created for special projects and collaborations.",
                image: "img/skins/2014-03-15-RpgMaker_Arshe-by_Slaizen.webp",
                miniature: "img/skins/2014-03-15-RpgMaker_Arshe-by_Slaizen.png"
            },
            {
                section: "others",
                name_fr: "Jack Rackham",
                name_en: "Jack Rackham",
                date: "2014-03-15",
                description_fr: "Mon personnage favori Jack Rackham de la série Black Sails.",
                description_en: "My favorite character Jack Rackham from the Black Sails series.",
                image: "img/skins/2016-02-27-Black Sails-Jack_Rackham-by_Slaizen.webp",
                miniature: "img/skins/2016-02-27-Black Sails-Jack_Rackham-by_Slaizen.png"
            },
            {
                section: "mobs",
                name_fr: "Creeper Personnalisé",
                name_en: "Creeper Custom",
                date: "2024-03-20",
                description_fr: "Un Creeper personnalisé avec des textures améliorées et des effets visuels uniques.",
                description_en: "A custom Creeper with improved textures and unique visual effects.",
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjMDBGRjAwIi8+CjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjMDBGRjAwIi8+CjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMDAwMDAwIi8+CjxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K",
                miniature: "img/skins/2024-03-20-Creeper_Custom.png"
            },
            {
                section: "mobs",
                name_fr: "Guerrier Squelette",
                name_en: "Skeleton Warrior",
                date: "2024-01-10",
                description_fr: "Un squelette guerrier avec une armure personnalisée et des textures détaillées.",
                description_en: "A skeleton warrior with custom armor and detailed textures.",
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRkZGRkZGIi8+CjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjRkZGRkZGIi8+CjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjODg4ODg4Ii8+CjxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K",
                miniature: "img/skins/2024-01-10-Skeleton_Warrior.png"
            },
            {
                section: "texturepack",
                name_fr: "Pack de Texture Zombie",
                name_en: "Zombie Texture Pack",
                date: "2024-02-15",
                description_fr: "Pack de textures pour les zombies avec des variations de couleurs et de détails.",
                description_en: "Texture pack for zombies with color variations and details.",
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjMDA4MDAwIi8+CjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjMDA4MDAwIi8+CjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjMDAwMDAwIi8+CjxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K",
                miniature: "img/skins/2024-02-15-Zombie_Texture_Pack.png"
            },
            {
                section: "texturepack",
                name_fr: "Pack de Texture Slaizen",
                name_en: "Slaizen Texture Pack",
                date: "2024-04-01",
                description_fr: "Pack de textures personnalisé avec le thème Slaizen, incluant des blocs et items uniques.",
                description_en: "Custom texture pack with the Slaizen theme, including unique blocks and items.",
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRkZEMDg0Ii8+CjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjRkZEMDg0Ii8+CjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjRkZEMDg0Ii8+CjxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K",
                miniature: "img/skins/2024-04-01-Slaizen_Texture_Pack.png"
            },
            {
                section: "commissions",
                name_fr: "Commission n°001",
                name_en: "Commission #001",
                date: "2024-06-15",
                description_fr: "Première commission réalisée pour un client. Un skin personnalisé selon ses spécifications.",
                description_en: "First commission completed for a client. A custom skin according to their specifications.",
                image: "data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iNjQiIGhlaWdodD0iNjQiIHZpZXdCb3g9IjAgMCA2NCA2NCIgZmlsbD0ibm9uZSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIj4KPHJlY3Qgd2lkdGg9IjY0IiBoZWlnaHQ9IjY0IiBmaWxsPSIjRkZEMDg0Ii8+CjxyZWN0IHg9IjE2IiB5PSIxNiIgd2lkdGg9IjMyIiBoZWlnaHQ9IjMyIiBmaWxsPSIjRkZEMDg0Ii8+CjxyZWN0IHg9IjI0IiB5PSIyNCIgd2lkdGg9IjE2IiBoZWlnaHQ9IjE2IiBmaWxsPSIjRkZEMDg0Ii8+CjxyZWN0IHg9IjI4IiB5PSIyOCIgd2lkdGg9IjgiIGhlaWdodD0iOCIgZmlsbD0iI0ZGRkZGRiIvPgo8L3N2Zz4K"
            }
        ];

        let selectedSkin = null;

        // Fonction pour créer un élément de skin
        function createSkinElement(skin, index) {
            const skinElement = document.createElement('div');
            skinElement.className = 'skin-item';
            skinElement.onmousedown = () => selectSkin(index, true);

            // Générer le nom de fichier attendu pour le tracking (basé sur le nom EN pour la consistance)
            const filename = `${skin.name_en}_skin.png`.replace(/[\\\/:*?"<>|]+/g, '_');
            skinElement.dataset.filename = filename;

            const views = getSkinViews(filename);
            const comments = getSkinComments(filename);
            skinElement.innerHTML = `
                <div class="skin-thumbnail">
                    <img data-src="${skin.image}" alt="${skin.name_en}" loading="lazy" />
                    <span class="skin-views">👁️ <span class="views-num">${views}</span></span>
                </div>
                <div class="skin-name">
                    <span class="lang-fr">${skin.name_fr}</span>
                    <span class="lang-en">${skin.name_en}</span>
                </div>
                <div class="skin-date">${skin.date || ''}</div>
                <div class="skin-stats">
                    <span class="skin-downloads" data-download-count="0">💾 <span class="downloads-num">0</span></span>
                    <span class="skin-comments">💬 <span class="comments-num">${comments}</span></span>
                </div>
            `;

            return skinElement;
        }

        // Fonction pour vérifier si un diamant a été collecté
        function isDiamondCollected(skinName) {
            const collectedDiamonds = JSON.parse(localStorage.getItem('collectedDiamonds') || '[]');
            return collectedDiamonds.includes(skinName);
        }

        // Fonction pour marquer un diamant comme collecté
        function markDiamondAsCollected(skinName) {
            const collectedDiamonds = JSON.parse(localStorage.getItem('collectedDiamonds') || '[]');
            if (!collectedDiamonds.includes(skinName)) {
                collectedDiamonds.push(skinName);
                localStorage.setItem('collectedDiamonds', JSON.stringify(collectedDiamonds));
            }
        }

        // Fonction pour sélectionner un skin
        function selectSkin(index, isUserClick = false) {
            // Retirer la sélection précédente
            document.querySelectorAll('.skin-item').forEach(item => {
                item.classList.remove('selected');
            });

            // Ajouter la sélection à l'élément cliqué
            const skinElement = document.querySelectorAll('.skin-item')[index];
            skinElement.classList.add('selected');

            // Tracker la vue du skin seulement si c'est un clic utilisateur
            const filename = skinElement.dataset.filename;
            if (filename && isUserClick) {
                // Obtenir le chemin de l'image du skin pour l'aperçu dans l'Overseer
                const skinImagePath = skins[index]?.miniature || skins[index]?.image || null;
                trackSkinView(filename, skinImagePath);
                
                // Mettre à jour le compteur de téléchargements dans le bouton
                const downloadCount = skinElement.querySelector('.skin-downloads')?.dataset.downloadCount || 0;
                const btnDownloadCount = document.getElementById('selectedSkinDownloads');
                if (btnDownloadCount) btnDownloadCount.textContent = downloadCount;
            }

            // Mettre à jour l'aperçu
            selectedSkin = skins[index];
            const preview = document.getElementById('skinPreview');
            const miniature = document.getElementById('skinMiniature');
            const name = document.getElementById('skinName');
            const creationDate = document.getElementById('skinCreationDate');
            const description = document.getElementById('skinDescription');
            const diamondOverlay = document.getElementById('diamondOverlay');

            // Charger l'image de prévisualisation avec lazy loading
            if (preview.dataset.src !== selectedSkin.image) {
                preview.dataset.src = selectedSkin.image;
                loadImage(preview);
            }
            preview.alt = selectedSkin.name_en;

            if (selectedSkin.miniature) {
                miniature.src = selectedSkin.miniature;
                miniature.alt = `${selectedSkin.name_en} miniature`;
                miniature.style.display = 'block';
            } else {
                miniature.removeAttribute('src');
            }

            name.innerHTML = `
                <span class="lang-fr">${selectedSkin.name_fr}</span>
                <span class="lang-en">${selectedSkin.name_en}</span>
            `;
            creationDate.innerHTML = `
                <span class="lang-fr">Date de création : ${selectedSkin.date || ''}</span>
                <span class="lang-en">Creation date : ${selectedSkin.date || ''}</span>
            `;
            description.innerHTML = `
                <span class="lang-fr">${selectedSkin.description_fr}</span>
                <span class="lang-en">${selectedSkin.description_en}</span>
            `;

            // Afficher le diamant seulement pour le skin Daisuke et s'il n'a pas été collecté
            if (selectedSkin.name_en === "Daisuke" && !isDiamondCollected("Daisuke")) {
                diamondOverlay.classList.remove('hidden');
            } else {
                diamondOverlay.classList.add('hidden');
            }

            // Activer le bouton de téléchargement
            updateDownloadButton();

            // Charger les commentaires pour ce skin en utilisant loadImageComments du coreSystem
            if (selectedSkin) {
                const imageUrl = selectedSkin.miniature || selectedSkin.image;

                // Attendre un peu pour s'assurer que les scripts sont chargés
                setTimeout(() => {
                    if (typeof loadImageComments === 'function') {
                        console.log('📝 [SKINS] Chargement des commentaires pour:', imageUrl);
                        loadImageComments(imageUrl);
                    } else {
                        console.warn('⚠️ [SKINS] loadImageComments n\'est pas disponible, réessai dans 500ms...');
                        // Réessayer après un délai
                        setTimeout(() => {
                            if (typeof loadImageComments === 'function') {
                                console.log('📝 [SKINS] Chargement des commentaires (retry) pour:', imageUrl);
                                loadImageComments(imageUrl);
                            } else {
                                console.error('❌ [SKINS] loadImageComments n\'est toujours pas disponible');
                            }
                        }, 500);
                    }

                    // Mettre à jour les formulaires de commentaires
                    if (typeof updateCommentFormsInIframe === 'function') {
                        updateCommentFormsInIframe();
                    } else {
                        // Fallback si la fonction n'est pas encore disponible
                        const userForm = document.getElementById('image-comment-form-container');
                        const guestForm = document.getElementById('image-guest-comment-form-container');
                        if (userForm && guestForm) {
                            const isLoggedIn = (typeof currentUser !== 'undefined' && currentUser !== null) ||
                                (typeof window.currentUser !== 'undefined' && window.currentUser !== null);
                            if (isLoggedIn) {
                                userForm.classList.remove('hidden');
                                userForm.style.display = 'block';
                                guestForm.classList.add('hidden');
                                guestForm.style.display = 'none';
                            } else {
                                userForm.classList.add('hidden');
                                userForm.style.display = 'none';
                                guestForm.classList.remove('hidden');
                                guestForm.style.display = 'block';
                            }
                        }
                    }

                    // Appeler aussi la fonction globale si elle existe
                    if (typeof updateImageCommentForms === 'function') {
                        updateImageCommentForms();
                    }
                }, 100);
            }
        }

        // Fonction pour mettre à jour l'état du bouton de téléchargement
        function updateDownloadButton() {
            const downloadBtn = document.getElementById('downloadBtn');
            if (!downloadBtn) return;
            
            if (selectedSkin) {
                downloadBtn.classList.remove('disabled');
                downloadBtn.classList.add('primary');
                downloadBtn.removeAttribute('disabled'); // Sécurité supplémentaire
                console.log('🔓 [SKINS] Bouton téléchargement activé');
            } else {
                downloadBtn.classList.remove('primary');
                downloadBtn.classList.add('disabled');
                downloadBtn.setAttribute('disabled', 'true');
            }
        }

        // Fonction pour télécharger le skin sélectionné
        async function downloadSkin() {
            if (!selectedSkin) {
                console.warn('⚠️ [SKINS] Aucun skin sélectionné');
                return;
            }

            console.log('📥 [SKINS] Début du téléchargement:', selectedSkin.name_en);

            const imageToDownload = selectedSkin.miniature || selectedSkin.image;
            const filename = `${selectedSkin.name_en}_skin.png`.replace(/[\\\/:*?"<>|]+/g, '_');
            console.log(`📝 [SKINS] Filename pour tracking: "${filename}"`);

            let downloadSuccess = false;

            // Double méthode : Téléchargement direct + Signal au parent (pour compatibilité totale)
            try {
                // 1. Signal au parent (Root ou Minecraft-Root)
                window.parent.postMessage({
                    type: 'download-skin',
                    originalUrl: imageToDownload,
                    filename: filename
                }, '*');

                // 2. Tentative de téléchargement direct local
                const link = document.createElement('a');
                link.href = imageToDownload;
                link.download = filename;
                link.style.display = 'none';
                document.body.appendChild(link);
                link.click();
                
                setTimeout(() => {
                    if (link.parentNode) document.body.removeChild(link);
                }, 200);
                
                downloadSuccess = true;
                console.log('✅ [SKINS] Tentatives de téléchargement initiées (Direct + Parent)');
            } catch (err) {
                console.error('❌ [SKINS] Erreur lors des tentatives:', err);
                window.open(imageToDownload, '_blank');
                downloadSuccess = true;
            }

            // Enregistrer le téléchargement
            if (downloadSuccess) {
                const isFileProtocol = window.location.protocol === 'file:';

                // Vérifier si l'utilisateur est le fondateur AVANT la mise à jour optimiste
                // Vérifier si l'utilisateur est le fondateur (utilisation de la variable globale centralisée)
                const isFounder = window.isSlaizenFounder;

                // Mettre à jour le compteur immédiatement (sauf pour le fondateur)
                if (!isFounder) {
                    updateDownloadCountOptimistic(filename);
                } else {
                    console.log('👑 [SKINS] Mise à jour optimiste ignorée pour le fondateur');
                }

                // Enregistrer dans Supabase si disponible (mode HTTP/HTTPS)
                if (!isFileProtocol && (typeof trackDownload === 'function' || typeof window.trackDownload === 'function')) {
                    const trackFunc = typeof trackDownload === 'function' ? trackDownload : window.trackDownload;
                    trackFunc(filename, imageToDownload, fileSize, false).then(result => {
                        if (result && result.length > 0) {
                            console.log(`✅ [SKINS] Téléchargement enregistré dans Supabase: ${filename}`);

                            // Vérifier si l'utilisateur est connecté pour recharger les stats du profil
                            let isUserConnected = false;
                            if (typeof currentUser !== 'undefined' && currentUser !== null) {
                                isUserConnected = true;
                            } else if (typeof supabase !== 'undefined' && supabase) {
                                // Vérifier la session Supabase pour recharger les stats
                                supabase.auth.getSession().then(({ data: { session } }) => {
                                    if (session && session.user) {
                                        if (typeof window.reloadStatsAfterDownload === 'function') {
                                            setTimeout(() => window.reloadStatsAfterDownload(), 1500);
                                        }
                                        if (typeof window.loadProfileDownloads === 'function') {
                                            setTimeout(() => window.loadProfileDownloads(), 2000);
                                        }
                                    }
                                }).catch(() => {});
                            }


                            // Écouter l'événement downloadTracked pour recharger la liste quand la modale s'ouvre
                            if (typeof window.addEventListener !== 'undefined') {
                                const handleDownloadTracked = (event) => {
                                    if (event.detail && event.detail.userId) {
                                        // Attendre un peu puis recharger si la modale est ouverte
                                        setTimeout(() => {
                                            const profileModal = document.getElementById('profile-modal');
                                            const isProfileModalOpen = profileModal &&
                                                !profileModal.classList.contains('hidden') &&
                                                (profileModal.classList.contains('show') || profileModal.classList.contains('active'));

                                            if (isProfileModalOpen && typeof window.loadProfileDownloads === 'function') {
                                                window.loadProfileDownloads();
                                                console.log('🔄 [SKINS] Liste des téléchargements rechargée (via événement)');
                                            }
                                        }, 500);
                                    }
                                };

                                // Ajouter l'écouteur une seule fois
                                if (!window._skinsDownloadTrackedListener) {
                                    window.addEventListener('downloadTracked', handleDownloadTracked);
                                    window._skinsDownloadTrackedListener = true;
                                }
                            }

                            // Recharger les stats de la page après un délai
                            setTimeout(() => {
                                if (typeof loadDownloadStats === 'function') {
                                    loadDownloadStats();
                                }
                            }, 2500);
                        }
                    }).catch(err => {
                        console.warn('⚠️ [SKINS] Erreur Supabase (non bloquant):', err);
                        // En cas d'erreur, utiliser localStorage comme fallback
                        try {
                            const downloads = JSON.parse(localStorage.getItem('skin-downloads') || '{}');
                            downloads[filename] = (downloads[filename] || 0) + 1;
                            localStorage.setItem('skin-downloads', JSON.stringify(downloads));
                            console.log(`✅ [SKINS] Téléchargement enregistré localement (fallback): ${filename}`);
                        } catch (e) {
                            console.warn('⚠️ [SKINS] Erreur localStorage:', e);
                        }
                    });
                } else {
                    // Mode file:// : utiliser localStorage uniquement
                    try {
                        const downloads = JSON.parse(localStorage.getItem('skin-downloads') || '{}');
                        downloads[filename] = (downloads[filename] || 0) + 1;
                        localStorage.setItem('skin-downloads', JSON.stringify(downloads));
                        console.log(`✅ [SKINS] Téléchargement enregistré localement: ${filename}`);
                    } catch (e) {
                        console.warn('⚠️ [SKINS] Erreur localStorage:', e);
                    }
                }
            }
        }

        // Écouter les messages de la fenêtre parente pour mettre à jour le compteur après l'enregistrement
        window.addEventListener('message', function (event) {
            if (event.data && event.data.type === 'download-tracked') {
                const { filename, success } = event.data;

                if (success) {
                    console.log(`✅ [SKINS] Téléchargement enregistré, mise à jour du compteur pour: ${filename}`);
                    // Mettre à jour le compteur avec les vraies données depuis Supabase
                    setTimeout(() => {
                        if (typeof updateDownloadCount === 'function') {
                            updateDownloadCount(filename);
                        } else {
                            // Recharger toutes les stats si updateDownloadCount n'est pas disponible
                            if (typeof loadDownloadStats === 'function') {
                                loadDownloadStats();
                            }
                        }
                    }, 500);
                } else {
                    console.warn(`⚠️ [SKINS] Échec de l'enregistrement du téléchargement pour: ${filename}`);
                }
            }
        });

        // ============================================
        // COMPTEUR DE VUES PAR SKIN
        // ============================================

        // Cache des vues par skin
        let skinViewsCache = {};

        // Tracker une vue de skin (appelé quand on clique sur un skin)
        async function trackSkinView(filename, skinImagePath = null) {
            if (!filename) return;

            const isFileProtocol = window.location.protocol === 'file:';
            if (isFileProtocol) return; // Pas de tracking en mode local

            // Debounce: ne pas tracker si déjà fait récemment
            const viewKey = 'skinView_' + filename;
            const now = Date.now();
            const lastViewTime = sessionStorage.getItem(viewKey);

            if (lastViewTime && (now - parseInt(lastViewTime, 10)) < 20000) {
                return; // Vue récente ignorée
            }

            // Vérifier si c'est le fondateur (utilisation de la variable globale centralisée)
            if (window.isSlaizenFounder) {
                console.log('👑 [SKINS] Vue skin du fondateur ignorée');
                return;
            }

            // Mise à jour optimiste immédiate SEULEMENT si on passe les tests ci-dessus
            skinViewsCache[filename] = (skinViewsCache[filename] || 0) + 1;
            updateSkinViewBadge(filename, skinViewsCache[filename]);
            console.log('👁️ Vue skin (optimiste):', filename, skinViewsCache[filename]);

            sessionStorage.setItem(viewKey, now.toString());

            if (typeof supabase === 'undefined' || !supabase) return;

            // Récupérer l'utilisateur connecté (si disponible)
            let userId = null;
            try {
                if (typeof supabase !== 'undefined' && supabase) {
                    const { data: { session } } = await supabase.auth.getSession();
                    userId = session?.user?.id || null;
                }
            } catch (e) {
                // Ignorer les erreurs
            }

            // Le tracking est déjà vérifié plus haut avec window.isSlaizenFounder

            // Obtenir les identifiants
            let visitorId = typeof getOrCreateVisitorId === 'function' ? getOrCreateVisitorId() : null;
            let sessionId = typeof getOrCreateSessionId === 'function' ? getOrCreateSessionId() : null;

            const timestamp = new Date().toISOString();

            try {
                // 1. Overseer (Détails complets en arrière-plan)
                supabase.from('events_overseer').insert([{
                    event_name: 'skin_view',
                    event_data: JSON.stringify({
                        skin_name: filename,
                        skin_media_url: skinImagePath,
                        page_url: window.location.pathname
                    }),
                    session_id: sessionId,
                    visitor_id: visitorId,
                    user_id: userId,
                    created_at: timestamp
                }]).then(({ error }) => {
                    if (error) console.warn('⚠️ Erreur Overseer (skin_view):', error);
                });

                // 2. Compteur statistique (Strict minimum)
                const { error } = await supabase.from('events_counter').insert([{
                    event_type: 'skin-view',
                    event_target: filename,
                    page_url: window.location.pathname,
                    page_title: 'Skin: ' + filename,
                    referrer: window.location.href,
                    user_agent: navigator.userAgent,
                    visited_at: timestamp,
                    user_id: userId,
                    session_id: sessionId,
                    visitor_id: visitorId
                }]);

                if (error) {
                    console.warn('⚠️ Erreur insertion compteur skin-view:', error);
                }
            } catch (err) {
                console.error('❌ Exception tracking skin view:', err);
            }
        }

        // Charger le nombre de vues pour tous les skins
        async function loadAllSkinViews() {
            const isFileProtocol = window.location.protocol === 'file:';
            if (isFileProtocol || typeof supabase === 'undefined' || !supabase) {
                console.log('📊 [SKINS] Mode local ou Supabase non dispo, vues non chargées');
                return;
            }

            try {
                // Récupérer toutes les vues de skins depuis page_events
                const { data, error } = await supabase
                    .from('events_counter')
                    .select('event_target')
                    .eq('event_type', 'skin-view');

                if (error) {
                    console.error('Erreur chargement vues skins:', error);
                    return;
                }

                // Compter les vues par skin
                skinViewsCache = {};
                data.forEach(row => {
                    const filename = row.event_target;
                    skinViewsCache[filename] = (skinViewsCache[filename] || 0) + 1;
                });

                console.log('📊 [SKINS] Vues chargées:', Object.keys(skinViewsCache).length, 'skins avec vues');

                // Mettre à jour tous les badges
                Object.keys(skinViewsCache).forEach(filename => {
                    updateSkinViewBadge(filename, skinViewsCache[filename]);
                });
            } catch (error) {
                console.error('Erreur chargement vues skins:', error);
            }
        }

        // Mettre à jour le badge de vues d'un skin
        function updateSkinViewBadge(filename, count) {
            const skinElement = document.querySelector(`[data-filename="${CSS.escape(filename)}"]`);
            if (skinElement) {
                const viewsElement = skinElement.querySelector('.skin-views .views-num');
                if (viewsElement) {
                    viewsElement.textContent = count;
                }
            }
        }

        // Obtenir le nombre de vues d'un skin (depuis le cache)
        function getSkinViews(filename) {
            return skinViewsCache[filename] || 0;
        }

        // ============================================
        // COMPTEUR DE COMMENTAIRES PAR SKIN
        // ============================================

        // Cache des commentaires par skin
        let skinCommentsCache = {};

        // Obtenir le nombre de commentaires d'un skin (depuis le cache)
        function getSkinComments(filename) {
            return skinCommentsCache[filename] || 0;
        }

        // Charger le nombre de commentaires pour tous les skins
        async function loadAllSkinComments() {
            const isFileProtocol = window.location.protocol === 'file:';
            if (isFileProtocol || typeof supabase === 'undefined' || !supabase) {
                console.log('💬 [SKINS] Mode local ou Supabase non dispo, commentaires non chargés');
                return;
            }

            try {
                // Récupérer tous les commentaires qui contiennent "skin" dans l'image_url
                const { data, error } = await supabase
                    .from('comments')
                    .select('image_url')
                    .like('image_url', '%_skin.png%');

                if (error) {
                    console.warn('⚠️ Erreur chargement commentaires skins:', error);
                    return;
                }

                // Compter les commentaires par skin
                skinCommentsCache = {};
                data.forEach(row => {
                    // Extraire le nom du fichier depuis l'URL
                    const urlParts = row.image_url.split('/');
                    const filename = urlParts[urlParts.length - 1];
                    skinCommentsCache[filename] = (skinCommentsCache[filename] || 0) + 1;
                });

                console.log('💬 [SKINS] Commentaires chargés:', Object.keys(skinCommentsCache).length, 'skins avec commentaires');

                // Mettre à jour tous les badges
                Object.keys(skinCommentsCache).forEach(filename => {
                    updateSkinCommentBadge(filename, skinCommentsCache[filename]);
                });
            } catch (error) {
                console.error('Erreur chargement commentaires skins:', error);
            }
        }

        // Mettre à jour le badge de commentaires d'un skin
        function updateSkinCommentBadge(filename, count) {
            const skinElement = document.querySelector(`[data-filename="${CSS.escape(filename)}"]`);
            if (skinElement) {
                const commentsNum = skinElement.querySelector('.skin-comments .comments-num');
                if (commentsNum) {
                    commentsNum.textContent = count;
                }
            }
        }

        // ============================================
        // COMPTEUR DE VUES DE LA PAGE
        // ============================================


        // Note: Le tracking de la page utilise maintenant la fonction centralisée trackPageVisit() de tracking.js

        // Charger le nombre de vues de la page
        async function loadPageViewsCount() {
            const viewsCountElement = document.getElementById('page-views-count');
            if (!viewsCountElement) return;

            const isFileProtocol = window.location.protocol === 'file:';
            if (isFileProtocol || typeof supabase === 'undefined' || !supabase) {
                viewsCountElement.textContent = '0';
                return;
            }

            try {
                const { count, error } = await supabase
                    .from('page_visits')
                    .select('*', { count: 'exact', head: true })
                    .eq('page_url', window.location.pathname);

                viewsCountElement.textContent = error ? '0' : (count || 0);
            } catch (error) {
                viewsCountElement.textContent = '0';
            }
        }

        // Fonction pour charger les statistiques de téléchargement
        async function loadDownloadStats() {
            const downloadCounts = {};
            const isFileProtocol = window.location.protocol === 'file:';

            // Si Supabase est disponible, utiliser UNIQUEMENT Supabase (source de vérité)
            if (!isFileProtocol && typeof supabase !== 'undefined' && supabase) {
                try {
                    const { data, error } = await supabase
                        .from('downloads')
                        .select('file_name');

                    if (!error && data && data.length > 0) {
                        // Compter les téléchargements depuis Supabase uniquement
                        data.forEach(download => {
                            const fileName = download.file_name;
                            downloadCounts[fileName] = (downloadCounts[fileName] || 0) + 1;
                        });
                        console.log('📊 [SKINS] Téléchargements Supabase chargés');
                    } else if (error) {
                        console.warn('⚠️ [SKINS] Erreur Supabase:', error);
                    }
                } catch (e) {
                    console.warn('⚠️ [SKINS] Erreur Supabase:', e);
                }
            } else {
                // Mode file:// - utiliser localStorage uniquement
                try {
                    const localDownloads = JSON.parse(localStorage.getItem('skin-downloads') || '{}');
                    Object.assign(downloadCounts, localDownloads);
                    if (Object.keys(localDownloads).length > 0) {
                        console.log('📊 [SKINS] Téléchargements locaux chargés:', localDownloads);
                    }
                } catch (e) {
                    console.warn('⚠️ [SKINS] Erreur lecture localStorage:', e);
                }
            }

            // 3. Mettre à jour les compteurs
            document.querySelectorAll('.skin-item').forEach(skinElement => {
                const filename = skinElement.dataset.filename;
                if (filename) {
                    const count = downloadCounts[filename] || 0;
                    const downloadElement = skinElement.querySelector('.skin-downloads');
                    if (downloadElement) {
                        const numSpan = downloadElement.querySelector('.downloads-num');
                        if (numSpan) numSpan.textContent = count;
                        downloadElement.dataset.downloadCount = count;
                    }
                }
            });

            console.log('✅ [SKINS] Statistiques finales:', downloadCounts);

            // Mettre à jour le compteur du bouton pour le skin sélectionné
            updateSelectedSkinDownloadButton();
        }

        // Fonction pour mettre à jour le compteur du bouton pour le skin sélectionné
        function updateSelectedSkinDownloadButton() {
            const selectedElement = document.querySelector('.skin-item.selected');
            if (selectedElement) {
                const downloadCount = selectedElement.querySelector('.skin-downloads')?.dataset.downloadCount || 0;
                const btnDownloadCount = document.getElementById('selectedSkinDownloads');
                if (btnDownloadCount) btnDownloadCount.textContent = downloadCount;
            }
        }

        // Fonction pour mettre à jour le compteur de manière optimiste (immédiatement)
        function updateDownloadCountOptimistic(filename) {
            const skinElement = document.querySelector(`[data-filename="${CSS.escape(filename)}"]`);
            if (!skinElement) {
                // Essayer de trouver par le nom du fichier
                const allSkinElements = document.querySelectorAll('.skin-item');
                for (let element of allSkinElements) {
                    if (element.dataset.filename === filename) {
                        const downloadElement = element.querySelector('.skin-downloads');
                        if (downloadElement) {
                            const currentCount = parseInt(downloadElement.dataset.downloadCount || '0', 10);
                            const newCount = currentCount + 1;
                            const numSpan = downloadElement.querySelector('.downloads-num');
                            if (numSpan) numSpan.textContent = newCount;
                            downloadElement.dataset.downloadCount = newCount;
                            console.log(`✅ Compteur mis à jour (optimiste) pour ${filename}: ${newCount}`);
                        }
                        return;
                    }
                }
                return;
            }

            const downloadElement = skinElement.querySelector('.skin-downloads');
            if (downloadElement) {
                const currentCount = parseInt(downloadElement.dataset.downloadCount || '0', 10);
                const newCount = currentCount + 1;
                const numSpan = downloadElement.querySelector('.downloads-num');
                if (numSpan) numSpan.textContent = newCount;
                downloadElement.dataset.downloadCount = newCount;
                console.log(`✅ Compteur mis à jour (optimiste) pour ${filename}: ${newCount}`);
            }
        }

        // Fonction pour mettre à jour le compteur d'un skin spécifique depuis Supabase
        async function updateDownloadCount(filename) {
            if (!supabase) {
                console.warn('⚠️ [SKINS] Supabase non initialisé pour updateDownloadCount');
                return;
            }

            console.log(`🔄 [SKINS] Mise à jour du compteur pour: "${filename}"`);

            try {
                // Récupérer tous les téléchargements pour ce fichier (pas juste le count)
                const { data, error, count } = await supabase
                    .from('downloads')
                    .select('file_name', { count: 'exact' })
                    .eq('file_name', filename);

                if (error) {
                    console.warn('⚠️ [SKINS] Erreur lors de la mise à jour du compteur:', error);
                    return;
                }

                const countValue = count !== null ? count : (data ? data.length : 0);
                console.log(`📊 [SKINS] Nombre de téléchargements trouvés pour "${filename}": ${countValue}`);

                // Mettre à jour l'affichage - chercher tous les éléments et comparer
                const allSkinElements = document.querySelectorAll('.skin-item');
                let skinElement = null;
                for (let element of allSkinElements) {
                    if (element.dataset.filename === filename) {
                        skinElement = element;
                        break;
                    }
                }

                if (skinElement) {
                    const downloadElement = skinElement.querySelector('.skin-downloads');
                    if (downloadElement) {
                        const numSpan = downloadElement.querySelector('.downloads-num');
                        if (numSpan) numSpan.textContent = countValue;
                        downloadElement.dataset.downloadCount = countValue;
                        console.log(`✅ [SKINS] Compteur mis à jour pour "${filename}": ${countValue}`);
                    } else {
                        console.warn(`⚠️ [SKINS] Élément .skin-downloads non trouvé pour ${filename}`);
                    }
                } else {
                    console.warn(`⚠️ [SKINS] Skin element non trouvé pour filename: "${filename}"`);
                    // Afficher tous les filenames disponibles pour débogage
                    const allFilenames = Array.from(allSkinElements).map(el => el.dataset.filename);
                    console.log('📋 [SKINS] Filenames disponibles:', allFilenames);
                }
            } catch (error) {
                console.warn('⚠️ [SKINS] Erreur lors de la mise à jour du compteur:', error);
            }
        }

        // Initialiser la grille de skins
        function initializeSkins() {
            const gridPersonal = document.getElementById('skinGridPersonal');
            const gridNaruto = document.getElementById('skinGridNaruto');
            const gridPowerRangers = document.getElementById('skinGridPowerRangers');
            const gridOthers = document.getElementById('skinGridOthers');
            const gridMobs = document.getElementById('skinGridMobs');
            const gridTexturePack = document.getElementById('skinGridTexturePack');
            const gridCommissions = document.getElementById('skinGridCommissions');

            // Parcourir tous les skins et les placer dans la bonne section
            skins.forEach((skin, index) => {
                const skinElement = createSkinElement(skin, index);

                if (skin.section === "slaizen") {
                    gridPersonal.appendChild(skinElement);
                } else if (skin.section === "naruto") {
                    gridNaruto.appendChild(skinElement);
                } else if (skin.section === "powerrangers") {
                    gridPowerRangers.appendChild(skinElement);
                } else if (skin.section === "others") {
                    gridOthers.appendChild(skinElement);
                } else if (skin.section === "mobs") {
                    gridMobs.appendChild(skinElement);
                } else if (skin.section === "texturepack") {
                    gridTexturePack.appendChild(skinElement);
                } else if (skin.section === "commissions") {
                    gridCommissions.appendChild(skinElement);
                }
            });

            // Vérifier s'il y a un paramètre URL pour sélectionner un skin spécifique
            const urlParams = new URLSearchParams(window.location.search);
            const skinParam = urlParams.get('skin');
            let skinSelected = false;

            if (skinParam) {
                // Chercher le skin correspondant à l'URL de l'image
                const skinIndex = skins.findIndex(s =>
                    s.miniature === skinParam ||
                    s.image === skinParam ||
                    s.miniature === decodeURIComponent(skinParam) ||
                    s.image === decodeURIComponent(skinParam)
                );

                if (skinIndex !== -1) {
                    selectSkin(skinIndex);
                    skinSelected = true;
                    console.log('📝 [SKINS] Skin sélectionné depuis URL:', skins[skinIndex].name);

                    // Faire défiler jusqu'au skin sélectionné
                    setTimeout(() => {
                        const skinElements = document.querySelectorAll('.skin-item');
                        if (skinElements[skinIndex]) {
                            skinElements[skinIndex].scrollIntoView({ behavior: 'smooth', block: 'center' });
                        }
                    }, 100);
                }
            }

            // Sélectionner le premier skin par défaut s'il existe et qu'aucun n'a été sélectionné via URL
            if (!skinSelected && skins.length > 0) {
                selectSkin(0);
            }
            // Initialiser l'état du bouton de téléchargement
            updateDownloadButton();

            // Charger les statistiques de téléchargement dès que possible
            // Essayer plusieurs fois si Supabase n'est pas encore prêt
            function tryLoadStats(attempts = 0) {
                if (typeof supabase !== 'undefined' && supabase) {
                    loadDownloadStats();
                    loadAllSkinViews();
                    loadAllSkinComments();

                    // Tracker la visite de la page d'abord, puis charger le compteur après l'enregistrement
                    if (typeof trackPageVisit === 'function') {
                        // Utiliser la fonction centralisée de tracking.js
                        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/skins%');
                                } else {
                                    loadPageViewsCount();
                                }
                            }, 300);
                        }).catch(() => {
                            // En cas d'erreur, charger quand même le compteur
                            if (typeof loadAndDisplayPageViews === 'function') {
                                loadAndDisplayPageViews('page-views-count', '%/minecraft/skins%');
                            } else {
                                loadPageViewsCount();
                            }
                        });
                    } else {
                        // Si trackPageVisit n'est pas disponible, charger directement
                        if (typeof loadAndDisplayPageViews === 'function') {
                            loadAndDisplayPageViews('page-views-count', '%/minecraft/skins%');
                        } else {
                            loadPageViewsCount();
                        }
                    }

                    // 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/skins%');
                        } else if (typeof loadPageViewsCount === 'function') {
                            loadPageViewsCount();
                        }
                    }, 2000);
                } else if (attempts < 10) {
                    // Réessayer toutes les 200ms jusqu'à 2 secondes
                    setTimeout(() => tryLoadStats(attempts + 1), 200);
                } else {
                    console.warn('⚠️ Supabase non disponible après plusieurs tentatives');
                }
            }

            // Essayer immédiatement
            tryLoadStats();

        }

        // 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;
        }

        // Observer pour le lazy loading
        function setupLazyLoading() {
            const imageObserver = new IntersectionObserver((entries, observer) => {
                entries.forEach(entry => {
                    if (entry.isIntersecting) {
                        const img = entry.target;
                        loadImage(img);
                        observer.unobserve(img);
                    }
                });
            });

            // Observer toutes les images avec data-src
            document.querySelectorAll('img[data-src]').forEach(img => {
                imageObserver.observe(img);
            });
        }

        // Fonction pour collecter un diamant
        function collectDiamond() {
            const diamondOverlay = document.getElementById('diamondOverlay');

            // Empêcher les clics multiples
            if (diamondOverlay.classList.contains('collecting')) {
                return;
            }

            // Marquer le diamant comme collecté immédiatement
            markDiamondAsCollected("Daisuke");

            // Calculer la position actuelle du diamant
            const rect = diamondOverlay.getBoundingClientRect();
            const startX = rect.left + rect.width / 2;
            const startY = rect.top + rect.height / 2;

            // Position du compteur de diamants (coin supérieur droit)
            const targetX = window.innerWidth - 100; // Position approximative du compteur
            const targetY = 50; // Position approximative du compteur

            // Calculer le déplacement nécessaire
            const deltaX = targetX - startX;
            const deltaY = targetY - startY;

            // Appliquer la position de départ
            diamondOverlay.style.left = startX + 'px';
            diamondOverlay.style.top = startY + 'px';
            diamondOverlay.style.transform = 'translate(-50%, -50%)';

            // Démarrer l'animation de collecte
            diamondOverlay.classList.add('collecting');

            // Animer le déplacement
            diamondOverlay.animate([
                {
                    transform: 'translate(-50%, -50%) scale(1)',
                    opacity: 1
                },
                {
                    transform: 'translate(-50%, -50%) scale(1.5)',
                    opacity: 1,
                    offset: 0.3
                },
                {
                    transform: 'translate(-50%, -50%) scale(1.2)',
                    opacity: 0.9,
                    offset: 0.7
                },
                {
                    transform: `translate(calc(-50% + ${deltaX}px), calc(-50% + ${deltaY}px)) scale(0.4)`,
                    opacity: 0
                }
            ], {
                duration: 1500,
                easing: 'ease-in-out',
                fill: 'forwards'
            });

            // Envoyer un message à la page parent pour ajouter un diamant (avec un délai pour l'animation)
            setTimeout(() => {
                if (window.parent && window.parent !== window) {
                    window.parent.postMessage({
                        type: 'DIAMOND_ACTION',
                        action: 'add'
                    }, '*');
                }
            }, 750); // Délai de 750ms (milieu de l'animation)

            // Cacher le diamant après l'animation
            setTimeout(() => {
                diamondOverlay.classList.add('hidden');
                diamondOverlay.classList.remove('collecting');
                diamondOverlay.style.left = '';
                diamondOverlay.style.top = '';
                diamondOverlay.style.transform = '';
            }, 1500); // Délai de 1.5s (fin de l'animation)

            console.log('Diamond collected!');
        }


        // Initialiser quand la page est chargée
        document.addEventListener('DOMContentLoaded', function () {
            // Réinitialiser les diamants collectés pour les tests
            localStorage.removeItem('collectedDiamonds');

            initializeSkins();
            setupLazyLoading();

            // Charger les statistiques de téléchargement et vues après initialisation
            setTimeout(() => {
                if (typeof loadDownloadStats === 'function') {
                    loadDownloadStats();
                }
                if (typeof loadAllSkinViews === 'function') {
                    loadAllSkinViews();
                }
                if (typeof loadAllSkinComments === 'function') {
                    loadAllSkinComments();
                }
            }, 1000);

            // Initialiser les commentaires après le chargement des scripts
            setTimeout(async () => {
                // Mettre à jour les formulaires de commentaires
                if (typeof updateCommentFormsInIframe === 'function') {
                    await updateCommentFormsInIframe();
                } else if (typeof updateImageCommentForms === 'function') {
                    updateImageCommentForms();
                }

                // Si un skin est déjà sélectionné, charger ses commentaires
                if (selectedSkin) {
                    const imageUrl = selectedSkin.miniature || selectedSkin.image;
                    if (typeof loadImageComments === 'function') {
                        loadImageComments(imageUrl);
                    } else {
                        console.warn('⚠️ [SKINS] loadImageComments n\'est pas disponible');
                    }
                }
            }, 1000); // Attendre 1 seconde pour que tous les scripts soient chargés
        });
    </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>
    <script src="../coreSystem/reactions.js"></script>

    <!-- Chargeurs dynamiques (doivent être chargés avant les modules qui les utilisent) -->
    <script src="../coreSystem/auth-nav-loader.js"></script>
    <script src="../coreSystem/modals-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/comments.js"></script>
    <script src="../coreSystem/downloads.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>



    <script>
        /**
         * Synchroniser le changement de langue
         */
        document.addEventListener('languageChanged', (event) => {
            const lang = event.detail.lang || event.detail.language;
            console.log('🌍 [SKINS] Changement de langue détecté:', lang);
            if (typeof loadSkins === 'function') {
                loadSkins('all', lang);
            }
        });
    </script>

</body>

</html>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                      ██ FIRST CREATED: 2025-10-14 ██ LAST UPDATED: 2025-10-15 ██                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ INTRUSION DETECTED ██                                                                              ║    
    ║ ██ UNAUTHORIZED ACCESS ATTEMPT LOGGED ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ TERMINATING CONNECTION ██                                                                          ║    
    ║ ██ DISCONNECTING FROM SLAIZEN.COM ██                                                                  ║    
    ║ ██ CONNECTION CLOSED ██                                                                               ║    
    ║                                                                                                       ║    
    ║ ██ YOU ARE NOW LEAVING THE UNDER-GRID ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝    
  ███████ ██       █████  ██ ███████ ███████ ███    ██     ██    ███ ███████ ███████ ██  █████       ██ ███████  
  ██      ██      ██   ██ ██    ███  ██      ████   ██     ██   ████      ██  ███    ██ ██   ██      ██      ██  
  ███████ ██      ███████ ██   ███   █████   ██ ██  ██     ██  ██ ██   █████   ███   ██ ███████      ██ ███████  
       ██ ██      ██   ██ ██  ███    ██      ██  ██ ██     ██ ██  ██      ██    ███  ██ ██   ██      ██ ██       
  ███████ ███████ ██   ██ ██ ███████ ███████ ██   ████     ████   ██ ███████ ███████ ██ ██   ██ ███████ ███████  
-->