<!--                                                                                                             
               ████                                                                           ████               
             ███                                                                                 ███             
           ███                                        ██                                           ███           
        ████                                          ██                                             ████        
      ████                                                                                             ████      
    ████                                                                                                 ████    
  █████████████████████     ██               ████     ██    █████████████   █████████     █████████████████████  
                 ████     ████             ██████     ██              ███                   ████                 
               ███      ████             ███   ██     ██            ███                       ████               
             ███      ████             ███     ██     ██         ████       ███████████████      ███             
          ████      ███              ████████████     ██       ████                                ███           
        ████      ███              ███         ██     ██     ████                                    ████        
      ████      ██████████████  ████           ██     ██   ██████████████   ████████████████████       ████      
                                                                                                                 
       ██ 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>
    <meta charset="UTF-8">
    <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');
                setTimeout(function() {
                    document.documentElement.classList.remove('i18n-loading');
                }, 1000);
            }
        })();
    </script>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Favoris - Internet Explorer</title>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ ACCESSING: CSS CORE ██                                       ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <link rel="stylesheet" href="style.css">
    <style>
        .sidebar-toolbar {
            display: flex;
            gap: 5px;
            padding: 5px;
            background: #f1f1f1;
            border-bottom: 1px solid #ccc;
        }

        .toolbar-btn {
            flex: 1;
            padding: 4px 2px;
            font-size: 11px;
            white-space: nowrap;
        }

        .toolbar-btn.active {
            background: #e0e0e0;
            border-style: inset;
            font-weight: bold;
        }

        /* Navigation controls */
        .nav-controls {
            display: flex;
            gap: 4px;
            margin-right: 5px;
        }

        .nav-btn {
            background: transparent;
            border: 1px solid rgba(255, 255, 255, 0.3);
            color: white;
            padding: 1px 6px;
            font-size: 10px;
            cursor: pointer;
            border-radius: 2px;
            transition: all 0.1s;
            display: flex;
            align-items: center;
            justify-content: center;
            height: 18px;
            width: 18px;
        }

        .nav-btn:hover {
            background: rgba(255, 255, 255, 0.2);
            border-color: white;
        }

        .nav-btn:active {
            background: rgba(0, 0, 0, 0.1);
            transform: translateY(1px);
        }

        .nav-btn.btn-back {
            background: #c62828;
            border-color: #fff;
            font-weight: bold;
            box-shadow: 0 2px 5px rgba(198, 40, 40, 0.4);
        }

        .nav-btn.btn-back:hover {
            background: #d32f2f;
            box-shadow: 0 3px 8px rgba(198, 40, 40, 0.6);
        }

        .msn-window-container {
            position: fixed;
            top: 40%;
            left: 10%;
            width: 406px;
            height: 425px;
            z-index: 10000;
            overflow: visible;
            border: none;
            background: transparent;
            border-radius: 12px;
            box-shadow: 0 5px 25px rgba(0, 0, 0, 0.3);

            /* Animation properties */
            opacity: 0;
            visibility: hidden;
            transform: scale(0.8);
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
            pointer-events: none;
        }

        .msn-window-container.msn-visible {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
            pointer-events: auto;
        }

        .msn-iframe {
            width: 100%;
            height: 100%;
            border: none;
            display: block;
        }

        .msn-launcher-container {
            position: fixed;
            bottom: 5px;
            left: 20px;
            z-index: 9999;
            animation: msnFloat 4s ease-in-out infinite;
            animation-delay: -1.5s;
            pointer-events: none;
        }

        .msn-launcher {
            width: 120px;
            height: 120px;
            cursor: pointer;
            transition: all 0.2s ease-in-out;
            filter: drop-shadow(0 4px 10px rgba(0, 0, 0, 0.25));
            pointer-events: auto;
            display: block;
        }

        @keyframes msnFloat {

            0%,
            100% {
                transform: translateY(0);
            }

            50% {
                transform: translateY(-10px);
            }
        }

        .msn-launcher:hover {
            transform: scale(1.12);
            filter: drop-shadow(0 6px 15px rgba(0, 0, 0, 0.3));
        }

        .msn-launcher:active {
            transform: scale(0.92);
            filter: drop-shadow(0 2px 5px rgba(0, 0, 0, 0.2));
        }

        /* MSN Pseudo */
        .msn-pseudo-wrapper {
            display: flex;
            align-items: flex-end;
            gap: 5px;
            pointer-events: auto;
        }

        .msn-pseudo {
            font-family: 'Tahoma', sans-serif;
            font-size: 13px;
            color: #2b5797;
            background: rgba(255, 255, 255, 0.9);
            padding: 6px 15px;
            border-radius: 20px;
            border: 1px solid #a4b9e1;
            cursor: pointer;
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
            transition: all 0.2s;
            user-select: none;
            white-space: nowrap;
            position: relative;
            font-weight: bold;
            margin-bottom: 10px;
            margin-left: -40px;
        }

        .msn-pseudo:hover {
            background: white;
            transform: translateY(-2px);
            box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
            color: #1e3a8a;
        }

        .msn-status-dot {
            width: 10px;
            height: 10px;
            background: #22ff22;
            border-radius: 50%;
            position: absolute;
            right: -12px;
            top: 50%;
            transform: translateY(-50%);
            box-shadow: 0 0 5px #22ff22;
        }

        .pseudo-bubble {
            position: absolute;
            bottom: 140%;
            left: 50%;
            transform: translateX(-50%) translateY(10px);
            background: #fff;
            border: 1px solid #ccc;
            padding: 8px 12px;
            border-radius: 10px;
            font-size: 11px;
            color: #666;
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.1);
            opacity: 0;
            transition: all 0.3s cubic-bezier(0.18, 0.89, 0.32, 1.28);
            pointer-events: none;
            width: 180px;
            text-align: center;
            z-index: 10000;
        }

        .pseudo-bubble.show {
            opacity: 1;
            transform: translateX(-50%) translateY(0);
        }

        .pseudo-bubble::after {
            content: '';
            position: absolute;
            top: 100%;
            left: 50%;
            margin-left: -5px;
            border-width: 5px;
            border-style: solid;
            border-color: #fff transparent transparent transparent;
        }



        .msn-drag-handle {
            position: absolute;
            top: 0;
            left: 0;
            right: 100px;
            /* Leave space for buttons in the iframe */
            height: 35px;
            cursor: move;
            z-index: 10;
        }

        .zoom-btn {
            background: #2e7d32;
            color: white;
            border: 2px solid #fff;
            padding: 8px 15px;
            font-size: 13px;
            font-weight: bold;
            border-radius: 8px;
            cursor: pointer;
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5);
            box-shadow: 0 4px 10px rgba(0, 0, 0, 0.3);
            transition: all 0.2s;
            z-index: 999999;
            display: none;
            position: fixed;
            top: 20px;
            right: 20px;
        }

        .zoom-btn:hover {
            background: #388e3c;
            transform: scale(1.05);
        }

        .zoom-btn.active {
            background: #c62828;
            border-color: #fff;
            box-shadow: 0 0 15px rgba(198, 40, 40, 0.6);
        }


        .viewer-area iframe {
            width: 100%;
            height: 100%;
            border: none;
            transition: transform 0.3s ease-in-out;
            transform-origin: top center;
        }

        .viewer-area iframe.iframe-zoomed {
            transform: scale(1.5);
        }

        .site-years {
            font-size: 9px;
            color: #888;
            font-weight: bold;
            margin-left: 2px;
            font-family: 'Consolas', monospace;
        }
    </style>
</head>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                      ██ ACCESSING: LOCAL PAGE ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<body>
    <div class="main-container">
        <!-- Sidebar -->
        <div class="sidebar">
            <div class="sidebar-header">
                <div style="display:flex; align-items:center; gap:8px; flex:1;">
                    <span class="header-icon">
                        <svg width="14" height="14" viewBox="0 0 16 16" fill="gold"
                            style="filter: drop-shadow(0 0 1.5px rgba(0, 0, 0, 0.8))">
                            <path
                                d="M8 .25a.75.75 0 0 1 .673.418l1.882 3.815 4.21.612a.75.75 0 0 1 .416 1.279l-3.046 2.97.719 4.192a.75.75 0 0 1-1.088.791L8 12.347l-3.766 1.98a.75.75 0 0 1-1.088-.79l.72-4.194L.818 6.374a.75.75 0 0 1 .416-1.28l4.21-.611L7.327.668A.75.75 0 0 1 8 .25Z">
                            </path>
                        </svg>
                    </span>
                    <span class="header-title"><a href="archive.html" target="viewer"
                            style="color:white; text-decoration:none;" data-fr="Mes Favoris" data-en="My Favorites">Mes
                            Favoris</a></span>
                </div>
                <div class="nav-controls">
                    <a href="../theHideout/index.html" class="nav-btn btn-back"
                        style="width: auto; padding: 1px 6px; text-decoration: none; font-size: 11px; white-space: nowrap;"
                        data-fr="↩ Retour" data-en="↩ Back">↩
                        Retour</a>
                </div>
            </div>



            <div class="sidebar-toolbar">
                <button id="btn-sites" class="toolbar-btn active" onclick="switchNav('sites')" data-fr="Site Web"
                    data-en="Websites">Site Web</button>
                <button id="btn-videos" class="toolbar-btn" onclick="switchNav('videos')" data-fr="Vidéos"
                    data-en="Videos">Vidéos</button>
            </div>

            <!-- Sites Navigation -->
            <div id="sites-nav" class="favorites-list">
                <a href="archive.html" target="viewer" class="nav-shortcut" onclick="setZoom(false);"
                    style="margin-bottom: 10px; border-bottom: 1px solid #ddd; padding-bottom: 8px;">
                    <div class="nav-icon-box">
                        <img src="Internet-Explorer-Logo-2005.png" class="nav-favicon">
                        <div class="nav-arrow"></div>
                    </div>
                    <span class="nav-label">The Old Web Archive <span class="site-years">[2026]</span></span>
                </a>

                <!-- Classique -->
                <details open>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Classique</summary>
                    <div class="shortcut-grid">
                        <a href="lapatate.com/index.html" target="viewer"
                            onclick="window.postMessage('zoom:on:center', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="lapatate.com/favicon.ico" class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">LaPatate.com</span>
                        </a>
                        <a href="perdu.com/index.html" target="viewer" onclick="window.postMessage('zoom:off', '*');"
                            class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="perdu.com/favicon.ico" class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Perdu.com <span class="site-years">[1998-2026]</span></span>
                        </a>
                    </div>
                </details>

                <!-- Humour Québécois -->
                <details open>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Humour Québécois</summary>
                    <div class="shortcut-grid">
                        <a href="https://tomchums.blogspot.com/" target="_blank" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=tomchums.blogspot.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Tom et ses Chums <span class="site-years">[2004-2011]</span></span>
                        </a>
                        <a href="lestupidshow.com/index.html" target="viewer"
                            onclick="window.postMessage('zoom:on:top center', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="lestupidshow.com/stupid.jpg" class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">LeStupidShow.com <span class="site-years">[2006-2008]</span></span>
                        </a>
                        <a href="follerie.com/index.html" target="viewer"
                            onclick="window.postMessage('zoom:on:top center', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="follerie.com/favicon.ico" class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Follerie.com <span class="site-years">[2003-2009]</span></span>
                        </a>
                    </div>
                </details>

                <!-- Humour Français -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Humour Français</summary>
                    <div class="shortcut-grid">
                        <a href="ledemondurire/index.html" target="viewer"
                            onclick="window.postMessage('zoom:off', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=ledemondurire.free.fr&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">LeDemonDuRire.org <span class="site-years">[2002-2007]</span></span>
                        </a>
                    </div>
                </details>

                <!-- Saga MP3 -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Saga MP3</summary>
                    <div class="shortcut-grid">
                        <a href="http://www.penofchaos.com/" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=penofchaos.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">PenOfChaos (Naheulbeuk) <span
                                    class="site-years">[2000-2026]</span></span>
                        </a>
                        <a href="https://www.knarfworld.net" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=knarfworld.net&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Survivaure</span>
                        </a>
                    </div>
                </details>

                <!-- Jeux Flash -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Jeux Flash</summary>
                    <div class="shortcut-grid">
                        <a href="https://www.newgrounds.com/" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=newgrounds.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Newgrounds <span class="site-years">[1998-2026]</span></span>
                        </a>
                        <a href="https://ici.radio-canada.ca/jeunesse" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=radio-canada.ca&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Radio Canada</span>
                        </a>
                        <a href="https://www.battleon.com/" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=battleon.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Battleon (AQ)</span>
                        </a>
                    </div>
                </details>

                <!-- Naruto -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Naruto</summary>
                    <div class="shortcut-grid">
                        <a href="http://www.captainaruto.com/" target="viewer"
                            onclick="window.postMessage('zoom:on:top center', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=captainaruto.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Captain Naruto <span class="site-years">[2005-2026]</span></span>
                        </a>
                        <a href="http://naruto.mx.free.fr/" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=free.fr&sz=32" class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Naruto-MX</span>
                        </a>
                        <a href="https://web.archive.org/web/20080305093156/http://www.japflap.com/" target="viewer"
                            onclick="window.postMessage('zoom:off', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=japflap.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">JapFlap</span>
                        </a>
                        <a href="http://www.wonaruto.com/" target="viewer"
                            onclick="window.postMessage('zoom:on:top center', '*');" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=wonaruto.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">WoNaruto</span>
                        </a>
                    </div>
                </details>

                <!-- Rpg Maker -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Rpg Maker</summary>
                    <div class="shortcut-grid">
                        <a href="http://www.rpg-creative.net/" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=rpg-creative.net&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Rpg Créative</span>
                        </a>
                        <a href="http://rpgstory.free.fr/" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=free.fr&sz=32" class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Rpg Story</span>
                        </a>
                    </div>
                </details>
            </div>

            <!-- Vidéos Navigation -->
            <div id="videos-nav" class="favorites-list" style="display: none;">
                <!-- Tom et ses chums -->
                <details open>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Tom et ses chums</summary>
                    <div class="shortcut-grid">
                        <a href="https://www.youtube.com/embed/omG1JVac10A" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">TOM ET SES CHUMS EPISODE 01</span>
                        </a>
                        <a href="https://www.youtube.com/embed/bvI1yLWvJig" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Episode 08 - La bataille de Farador 1/2</span>
                        </a>
                        <a href="https://www.youtube.com/embed/ReTPMme1nS4" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Episode 08 - La bataille de Farador 2/2</span>
                        </a>
                    </div>
                </details>

                <!-- EMC Monkey -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>EMC Monkey</summary>
                    <div class="shortcut-grid">
                        <a href="https://www.youtube.com/embed/D2kJZOfq7zk" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Urban Ninja</span>
                        </a>
                        <a href="https://www.youtube.com/embed/l0fgsp89LCA" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Ultimate Showdown: Ninja Vs Pirate</span>
                        </a>
                        <a href="https://www.youtube.com/embed/c36RUFP0KoE" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">King of Fighters - EMC Edition</span>
                        </a>
                    </div>
                </details>

                <!-- Classiques -->
                <details>
                    <summary><svg class="icon">
                            <use href="#folder-icon" />
                        </svg>Classiques du Web</summary>
                    <div class="shortcut-grid">
                        <a href="https://www.youtube.com/embed/CMNry4PE93Y" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">I Like Turtles</span>
                        </a>
                        <a href="https://www.youtube.com/embed/3gg5LOd_Zus" target="viewer" class="nav-shortcut">
                            <div class="nav-icon-box">
                                <img src="https://www.google.com/s2/favicons?domain=youtube.com&sz=32"
                                    class="nav-favicon">
                                <div class="nav-arrow"></div>
                            </div>
                            <span class="nav-label">Numa Numa 2: New Numa</span>
                        </a>
                    </div>
                </details>
            </div>
        </div>

        <!-- Viewer Iframe -->
        <div class="viewer-area">
            <iframe id="viewer" name="viewer" src="archive.html" frameborder="0"
                onload="checkZoomVisibility()"></iframe>
        </div>
    </div>

    <!-- Icon Templates -->
    <svg style="display:none">
        <symbol id="folder-icon" viewBox="0 0 16 16">
            <path d="M1 3H6L7.5 4.5H15V14H1V3Z" fill="#FFE082" stroke="#B8860B" stroke-width="1" />
            <rect x="1" y="3" width="5" height="2" fill="#B8860B" />
        </symbol>
    </svg>

    <div class="msn-launcher-container">
        <div class="msn-pseudo-wrapper">
            <img id="msnLauncher" src="logo_msn-messenger.png" class="msn-launcher" onclick="toggleMsn()"
                title="Masquer/Afficher MSN Messenger">
            <div id="msnPseudoTrigger" class="msn-pseudo" onclick="cycleOldSchoolPseudo()">
                <div class="msn-status-dot"></div>
                <span id="pseudoText">Slaizen</span>
                <div id="pseudoBubble" class="pseudo-bubble">Fait glisser pour générer ! 🎲</div>
            </div>
        </div>
    </div>



    <!-- MSN Messenger Container -->
    <div id="msnWindow" class="msn-window-container">
        <div class="msn-drag-handle" id="msnTitle"></div>
        <iframe src="msn.html" class="msn-iframe" id="msnIframe" scrolling="no"></iframe>
    </div>



    <!-- Global Zoom Button (Fixed) -->
    <button id="main-zoom-btn" onclick="toggleZoom()" class="zoom-btn" title="Zoom avant/arrière pour vieux sites">🔍
        Zoom</button>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ AI JAVASCRIPT OUTPUT ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <script>
        // MSN Messenger Helpers
        function toggleMsn() {
            const win = document.getElementById('msnWindow');
            if (win.classList.contains('msn-visible')) {
                closeMsn();
            } else {
                win.classList.add('msn-visible');
            }
        }

        function closeMsn() {
            document.getElementById('msnWindow').classList.remove('msn-visible');
        }

        let canZoom = false;
        let isCurrentlyHome = true;
        let pendingZoom = null; // Store zoom settings until the page loads
        function showZoomButton(state) {
            canZoom = state;
            updateZoomButtonVisibility();
        }

        function updateZoomButtonVisibility() {
            const btn = document.getElementById('main-zoom-btn');
            const retBtn = document.getElementById('main-return-btn');
            if (btn) btn.style.display = canZoom ? 'block' : 'none';
            if (retBtn) retBtn.style.display = 'block';
        }

        function goHome() {
            if (isCurrentlyHome) {
                window.location.href = '../theHideout/index.html';
            } else {
                setZoom(false); // Reset zoom instantly via refactored setZoom
                const iframe = document.getElementById('viewer');
                iframe.src = 'archive.html';
            }
        }

        function setZoom(state, origin = 'top center', instant = false) {
            const iframe = document.getElementById('viewer');
            const btn = document.getElementById('main-zoom-btn');
            if (!iframe || !btn) return;

            // Disable transition for instantaneous changes (loading or returning)
            if (instant || !state) iframe.style.transition = 'none';

            if (state) {
                iframe.style.transformOrigin = origin;
                iframe.classList.add('iframe-zoomed');
                btn.classList.add('active');
                btn.textContent = "🔍 Dézoomer";
            } else {
                iframe.classList.remove('iframe-zoomed');
                btn.classList.remove('active');
                btn.textContent = "🔍 Zoom";
            }

            // Restore transition for future manual zoom button clicks
            iframe.offsetHeight; // Force reflow
            setTimeout(() => { if (iframe) iframe.style.transition = ''; }, 100);
        }

        function toggleZoom() {
            const iframe = document.getElementById('viewer');
            const isZoomed = iframe.classList.contains('iframe-zoomed');
            const currentOrigin = iframe.style.transformOrigin || 'top center';
            // Manual toggle stays smooth (false for instant)
            setZoom(!isZoomed, currentOrigin, false);
        }

        function checkZoomVisibility() {
            const iframe = document.getElementById('viewer');
            const btn = document.getElementById('main-zoom-btn');
            const zoomAllowed = localStorage.getItem('zoom-allowed') === 'true';
            canZoom = zoomAllowed;

            try {
                const path = iframe.contentWindow.location.pathname;
                if (path.includes('archive.html')) {
                    isCurrentlyHome = true;
                    canZoom = false;
                    localStorage.setItem('zoom-allowed', 'false');
                    setZoom(false, null, true); // Instant de-zoom
                    pendingZoom = null;
                } else {
                    isCurrentlyHome = false;
                    if (pendingZoom) {
                        setZoom(pendingZoom.state, pendingZoom.origin, true); // Instant zoom on load
                        pendingZoom = null;
                    }
                }
            } catch (e) {
                isCurrentlyHome = false;
                if (pendingZoom) {
                    setZoom(pendingZoom.state, pendingZoom.origin, true); // Instant zoom on load
                    pendingZoom = null;
                }
            }
            updateZoomButtonVisibility();
        }

        window.addEventListener('message', function (event) {
            if (event.data === 'close-msn') {
                closeMsn();
            }
            if (event.data.startsWith('zoom:on')) {
                isCurrentlyHome = false;
                const parts = event.data.split(':');
                const origin = parts[2] || 'top center';
                localStorage.setItem('zoom-allowed', 'true');
                localStorage.setItem('zoom-origin', origin);
                showZoomButton(true);
                pendingZoom = { state: true, origin: origin };
            }
            if (event.data === 'zoom:off') {
                localStorage.setItem('zoom-allowed', 'false');
                showZoomButton(false);
                setZoom(false, null, true); // Instant de-zoom
            }
        });

        // Main Navigation Script
        function goBack() {
            try {
                const viewer = document.getElementById('viewer');
                if (viewer && viewer.contentWindow) {
                    viewer.contentWindow.history.back();
                }
            } catch (e) { }
        }
        function goForward() {
            try {
                const viewer = document.getElementById('viewer');
                if (viewer && viewer.contentWindow) {
                    viewer.contentWindow.history.forward();
                }
            } catch (e) { }
        }

        function switchNav(type) {
            document.getElementById('btn-sites').classList.toggle('active', type === 'sites');
            document.getElementById('btn-videos').classList.toggle('active', type === 'videos');
            document.getElementById('sites-nav').style.display = (type === 'sites') ? 'block' : 'none';
            document.getElementById('videos-nav').style.display = (type === 'videos') ? 'block' : 'none';
        }

        // Heartbeat check
        setInterval(checkZoomVisibility, 250);

        // Pseudo Generator Logic
        let currentPseudoIndex = 0;
        const baseName = "Slaizen";
        const patterns = [
            (n) => `xX_${n}_Xx`,
            (n) => `[ ${n} ]`,
            (n) => `-= ${n} =-`,
            (n) => `*~ ${n} ~*`,
            (n) => `(${n}) - (L)`,
            (n) => `[${n}] - (H)`,
            (n) => `... ${n} ...`,
            (n) => `${n}_99`,
            (n) => `o_O ${n} O_o`,
            (n) => `[ ${n.toUpperCase()} ]`,
            (n) => n.split('').map((c, i) => i % 2 === 0 ? c.toUpperCase() : c.toLowerCase()).join(''),
            (n) => `~*¤ ${n} ¤*~`
        ];

        function cycleOldSchoolPseudo() {
            const textElement = document.getElementById('pseudoText');
            const bubble = document.getElementById('pseudoBubble');

            // Generate next pseudo
            currentPseudoIndex = (currentPseudoIndex + 1) % patterns.length;
            const newPseudo = patterns[currentPseudoIndex](baseName);

            // Animation flash
            textElement.style.opacity = '0';
            setTimeout(() => {
                textElement.textContent = newPseudo;
                textElement.style.opacity = '1';
            }, 50)

            // Show bubble feedback
            bubble.textContent = "Nouveau Pseudo généré ! 🎲";
            bubble.classList.add('show');
            setTimeout(() => bubble.classList.remove('show'), 2000);
        }

        // Auto-show hint once
        setTimeout(() => {
            const bubble = document.getElementById('pseudoBubble');
            if (bubble) {
                bubble.classList.add('show');
                setTimeout(() => bubble.classList.remove('show'), 4000);
            }
        }, 5000);

        // MSN Draggable Logic
        dragElement(document.getElementById("msnWindow"));
        function dragElement(elmnt) {
            var pos1 = 0, pos2 = 0, pos3 = 0, pos4 = 0;
            const header = document.getElementById("msnTitle");
            if (header) {
                header.onmousedown = (e) => {
                    if (e.target.closest('.msn-btn-img')) return;
                    e.preventDefault();
                    pos3 = e.clientX;
                    pos4 = e.clientY;
                    document.onmouseup = () => { document.onmouseup = null; document.onmousemove = null; };
                    document.onmousemove = (e) => {
                        e.preventDefault();
                        pos1 = pos3 - e.clientX; pos2 = pos4 - e.clientY; pos3 = e.clientX; pos4 = e.clientY;
                        elmnt.style.top = (elmnt.offsetTop - pos2) + "px";
                        elmnt.style.left = (elmnt.offsetLeft - pos1) + "px";
                    };
                };
            }
        }

        /**
         * PROTECTION & SÉCURITÉ
         */
        document.addEventListener('contextmenu', e => e.preventDefault());
        document.addEventListener('dragstart', e => {
            if (['IMG', 'VIDEO'].includes(e.target.tagName)) e.preventDefault();
        });
        document.addEventListener('keydown', e => {
            if (
                e.keyCode === 123 || // F12
                (e.ctrlKey && e.shiftKey && (e.keyCode === 73 || e.keyCode === 74)) || // Ctrl+Shift+I/J
                (e.ctrlKey && e.keyCode === 85) // Ctrl+U
            ) {
                e.preventDefault();
                return false;
            }
        });
    </script>
    <script src="../coreSystem/i18n.js"></script>

    <!-- Synchronisation avec l'iframe -->
    <script>
        window.addEventListener('message', (event) => {
            if (event.data && event.data.type === 'languageChanged') {
                if (window.i18n && window.i18n.getLang() !== event.data.lang) {
                    window.i18n.toggle();
                }
            }
        });
    </script>
</body>

</html>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                      ██ FIRST CREATED: 2025-04-24 ██ LAST UPDATED: 2026-04-24 ██                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ INTRUSION DETECTED ██                                                                              ║    
    ║ ██ UNAUTHORIZED ACCESS ATTEMPT LOGGED ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ TERMINATING CONNECTION ██                                                                          ║    
    ║ ██ DISCONNECTING FROM SLAIZEN.COM ██                                                                  ║    
    ║ ██ CONNECTION CLOSED ██                                                                               ║    
    ║                                                                                                       ║    
    ║ ██ YOU ARE NOW LEAVING THE UNDER-GRID ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝    
  ███████ ██       █████  ██ ███████ ███████ ███    ██     ██    ███ ███████ ███████ ██  █████       ██ ███████  
  ██      ██      ██   ██ ██    ███  ██      ████   ██     ██   ████      ██  ███    ██ ██   ██      ██      ██  
  ███████ ██      ███████ ██   ███   █████   ██ ██  ██     ██  ██ ██   █████   ███   ██ ███████      ██ ███████  
       ██ ██      ██   ██ ██  ███    ██      ██  ██ ██     ██ ██  ██      ██    ███  ██ ██   ██      ██ ██       
  ███████ ███████ ██   ██ ██ ███████ ███████ ██   ████     ████   ██ ███████ ███████ ██ ██   ██ ███████ ███████  
-->