<!--                                                                                                             
               ████                                                                           ████               
             ███                                                                                 ███             
           ███                                        ██                                           ███           
        ████                                          ██                                             ████        
      ████                                                                                             ████      
    ████                                                                                                 ████    
  █████████████████████     ██               ████     ██    █████████████   █████████     █████████████████████  
                 ████     ████             ██████     ██              ███                   ████                 
               ███      ████             ███   ██     ██            ███                       ████               
             ███      ████             ███     ██     ██         ████       ███████████████      ███             
          ████      ███              ████████████     ██       ████                                ███           
        ████      ███              ███         ██     ██     ████                                    ████        
      ████      ██████████████  ████           ██     ██   ██████████████   ████████████████████       ████      
                                                                                                             
       ██ 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">
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>MSN Messenger - Slaizen.com</title>
<link rel="icon" type="image/x-icon" href="../../favicon.ico">
<meta name="description" content="Une simulation de MSN Messenger et Windows Live Messenger par Slaizen">
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ ACCESSING: CSS CORE ██                                       ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<link rel="stylesheet" href="../../coreSystem/interface.css">
<link rel="stylesheet" href="../../coreSystem/auth.css">
<link rel="stylesheet" href="../../coreSystem/modals.css">
<link rel="stylesheet" href="../../coreSystem/profiles.css">
<link rel="stylesheet" href="../../coreSystem/notifications.css">
<link rel="stylesheet" href="../../coreSystem/reactions.css">
<link rel="stylesheet" href="../../coreSystem/comments.css">
<link rel="stylesheet" href="windowslivemessenger/index.css">

<style>
    @font-face {
        font-family: 'SlaizenRazer';
        src: url('../../fonts/Slaizen-x-Razer-Collab.ttf') format('truetype');
        font-weight: normal;
        font-style: normal;
    }

    body {
        margin: 0;
        padding: 0;
        height: 100vh;
        display: flex;
        justify-content: center;
        align-items: center;
        font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
        background: #0080ff;
        overflow: hidden;
        position: relative;
        user-select: none;
        -webkit-user-select: none;
        -webkit-touch-callout: none;
    }

    .bg-pane {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        background-size: cover;
        background-position: center;
        pointer-events: none;
    }

    .bg-pane.xp {
        z-index: 0;
        background-image: url('bg-winxp.webp');
    }

    .bg-pane.win7 {
        z-index: 1;
        background-image: url('bg-win7.webp');
        -webkit-mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 60%, black 100%);
        mask-image: linear-gradient(to right, transparent 0%, transparent 40%, black 60%, black 100%);
        -webkit-mask-size: 200% 100%;
        mask-size: 200% 100%;
        -webkit-mask-position: 50% 0;
        mask-position: 50% 0;
        transition: -webkit-mask-position 1.5s cubic-bezier(0.19, 1, 0.22, 1),
            mask-position 1.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    /* Hover logic using :has() - Restricted to icon-box */
    body:has(.icon-msn .icon-box:hover) .bg-pane.win7 {
        -webkit-mask-position: 0% 0;
        mask-position: 0% 0;
    }

    body:has(.icon-wlm .icon-box:hover) .bg-pane.win7 {
        -webkit-mask-position: 100% 0;
        mask-position: 100% 0;
    }

    .desktop-selector {
        display: flex;
        gap: 40px;
        padding: 20px;
        z-index: 100;
    }

    .icon-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-decoration: none;
        color: white;
        padding: 20px;
        border-radius: 10px;
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        width: 150px;
        text-align: center;
        position: relative;
    }

    .icon-item:has(.icon-box:hover) {
        background: rgba(255, 255, 255, 0.2);
        transform: translateY(-10px) scale(1.05);
        box-shadow: 0 10px 20px rgba(0, 0, 0, 0.2);
    }

    .icon-box {
        width: 80px;
        height: 80px;
        background: rgba(255, 255, 255, 0.1);
        border: 2px solid rgba(255, 255, 255, 0.5);
        border-radius: 15px;
        display: flex;
        justify-content: center;
        align-items: center;
        margin-bottom: 15px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
        position: relative;
        overflow: hidden;
        cursor: pointer;
    }

    .icon-box img {
        width: 60px;
        height: 60px;
        object-fit: contain;
    }

    .label {
        font-size: 14px;
        font-weight: 700;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        margin-top: 5px;
    }

    .version {
        font-size: 11px;
        font-weight: 400;
        opacity: 0.9;
        margin-top: 3px;
        text-shadow: 0 1px 2px rgba(0, 0, 0, 0.8);
    }

    .date-label {
        font-size: 12px;
        font-weight: 800;
        margin-bottom: 10px;
        color: #fff;
        text-shadow: 0 1px 3px rgba(0, 0, 0, 0.8);
        letter-spacing: 0.5px;
    }

    .title {
        position: absolute;
        bottom: 30px;
        color: white;
        font-size: 52px;
        font-weight: 700;
        text-shadow: 0 2px 15px rgba(0, 0, 0, 0.7);
        letter-spacing: 1px;
        z-index: 200;
        pointer-events: none;
    }

    .side-title {
        position: absolute;
        bottom: 20px;
        font-size: 4.5vh;
        font-weight: 950;
        color: white;
        opacity: 0;
        /* Masqué par défaut */
        text-transform: uppercase;
        letter-spacing: 1vh;
        white-space: nowrap;
        pointer-events: none;
        user-select: none;
        z-index: 5;
        text-shadow: 0 0 12px rgba(0, 0, 0, 0.8);
        transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        /* Transition fluide */
    }

    /* Apparition au survol des icônes (box uniquement) */
    body:has(.icon-msn .icon-box:hover) .side-title.left {
        opacity: 0.8;
    }

    body:has(.icon-msn .icon-box:hover) .side-title.right {
        opacity: 0;
    }

    body:has(.icon-wlm .icon-box:hover) .side-title.right {
        opacity: 0.8;
    }

    body:has(.icon-wlm .icon-box:hover) .side-title.left {
        opacity: 0;
    }

    .side-title.left {
        left: 0px;
        writing-mode: vertical-rl;
        transform: rotate(180deg);
    }

    .side-title.right {
        right: 0px;
        writing-mode: vertical-rl;
    }

    .footer {
        position: absolute;
        bottom: 20px;
        left: 50%;
        transform: translateX(-50%);
        color: white;
        font-size: 11px;
        opacity: 0.9;
        z-index: 200;
        pointer-events: none;
        text-shadow: 0 1px 10px rgba(0, 0, 0, 0.8);
    }

    .back-button,
    .back-button:link,
    .back-button:visited {
        position: absolute;
        top: 20px;
        left: 20px;
        color: white !important;
        text-decoration: none;
        font-size: 18px;
        font-weight: 600;

        letter-spacing: 2px;
        z-index: 1000;
        transition: all 0.4s ease;
        text-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
        display: flex;
        align-items: center;
        gap: 5px;
    }

    .back-button:hover {
        color: white;
        transform: translateX(-5px);
        opacity: 1;
    }

    .corner-counter {
        position: absolute;
        bottom: -20px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        font-weight: 600;
        color: white;
        opacity: 0;
        letter-spacing: 0.5px;
        z-index: 20;
        transition: all 0.5s cubic-bezier(0.19, 1, 0.22, 1);
        text-shadow: 0 1px 5px rgba(0, 0, 0, 0.8);
        pointer-events: none;
        white-space: nowrap;
    }

    .icon-item:has(.icon-box:hover) .corner-counter {
        opacity: 0.85;
        transform: translateX(-50%) translateY(8px);
    }

    .footer a {
        color: #fff;
        text-decoration: underline;
        pointer-events: auto;
        transition: all 0.2s;
    }

    .footer a:hover {
        color: #ccc;
    }

    /* Modal specific adjustments */
    #wlm-modal {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        justify-content: center;
        align-items: center;
        z-index: 1000;
        background: transparent;
        pointer-events: none;
    }

    #wlm-modal.active {
        display: flex;
    }

    #wlm-modal .window {
        width: 420px;
        height: 600px;
        display: flex;
        flex-direction: column;
        pointer-events: auto;
        position: absolute;
    }

    #wlm-modal .window-body {
        flex: 1;
        padding: 0 !important;
        overflow: hidden;
    }

    iframe {
        width: 100%;
        height: 100%;
        border: none;
        background: transparent;
    }

    #unable-to-connect-modal button {
        min-width: 80px;
        padding: 4px 15px;
    }

    /* --- Slaizen Auth Nav Overrides for MSN Selector --- */
    :root {
        --auth-nav-top: 20px;
    }

    #auth-nav-container .auth-nav {
        background: rgba(255, 255, 255, 0.15);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.3);
        border-radius: 8px;
        padding: 5px 15px 5px 5px; /* 15px à droite (distance bord), 5px à gauche (pas de vide) */
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.1);
    }

    #auth-nav .btn {
        text-transform: uppercase;
        font-size: 11px;
        letter-spacing: 1px;
        border-radius: 4px;
        /* Global reset for Win7 theme overrides */
        min-height: auto !important;
        min-width: auto !important;
        font-family: var(--interface-font-main), sans-serif !important;
        padding: 0 15px !important;
        height: 32px !important;
    }

    /* Specifically restore transparency for the language button */
    #auth-nav .btn-lang {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        text-transform: none !important;
        font-size: 14px !important;
        width: auto !important;
        min-width: 0 !important;
    }

    /* Kill the Win7 hover/active pseudo-elements for all auth buttons */
    #auth-nav .btn::before,
    #auth-nav .btn::after {
        display: none !important;
        content: none !important;
    }

    #auth-nav .btn:hover {
        background: rgba(var(--interface-accent-rgb), 0.15) !important;
        border-color: var(--interface-accent) !important;
        box-shadow: var(--interface-hover-shadow) !important;
        transform: translateY(-1px) !important;
    }

    #auth-nav .btn-lang:hover {
        background: none !important;
        border: none !important;
        box-shadow: none !important;
        transform: scale(1.1) !important;
        color: var(--interface-text) !important;
    }

    /* --- Animation: MSN Particles (Emojis & Bubbles) --- */
    .msn-hill-container {
        position: fixed;
        top: 0;
        left: 0;
        width: 100vw;
        height: 100vh;
        pointer-events: none;
        z-index: 150 !important;
        /* Force visibility above everything */
        overflow: hidden;
    }

    .msn-element {
        position: absolute;
        top: 0;
        left: 0;
        user-select: none;
        pointer-events: none;
        display: block;
        transition: opacity 0.5s cubic-bezier(0.19, 1, 0.22, 1);
    }

    .msn-element[data-type="emoji"] {
        object-fit: contain;
    }

    .msn-element[data-type="bubble"] {
        border-radius: 50%;
        background-color: rgba(255, 255, 255, 0.4);
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.6), rgba(255, 255, 255, 0.1) 40%, rgba(100, 200, 255, 0.2) 60%, transparent 80%);
        box-shadow: inset -2px -2px 8px rgba(255, 255, 255, 0.3), inset 2px 2px 8px rgba(0, 0, 0, 0.1);
        border: 1px solid rgba(255, 255, 255, 0.3);
        backdrop-filter: blur(1px);
    }

    /* MSN Buddy Styles */
    /* Focus effect: mask life but KEEP bubbles when hovering icon boxes */
    body:has(.icon-box:hover) .msn-element[data-type="buddy"],
    body:has(.icon-box:hover) .msn-element[data-type="butterfly"],
    body:has(.icon-box:hover) .msn-element[data-type="emoji"] {
        opacity: 0 !important;
    }

    .buddy-chat {
        position: absolute;
        top: -30px;
        left: 50%;
        transform: translateX(-50%) scale(0);
        background: white;
        border: 1px solid #ccc;
        border-radius: 10px;
        padding: 4px;
        box-shadow: 0 3px 6px rgba(0, 0, 0, 0.2);
        transition: transform 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        z-index: 1000;
        display: flex;
        justify-content: center;
        align-items: center;
        min-width: 30px;
        min-height: 30px;
    }

    .buddy-chat.active {
        transform: translateX(-50%) scale(1);
    }

    @keyframes logoGhostFade {
        0% { opacity: 1; transform: translate3d(0,0,0) scale(1); }
        100% { opacity: 0; transform: translate3d(0,-50px,0) scale(1.4); }
    }
    .logo-ghost {
        position: fixed;
        pointer-events: none;
        z-index: 1000000;
        color: white;
        font-family: 'SlaizenRazer', sans-serif;
        font-size: 48px;
        text-shadow: 0 0 15px rgba(255,255,255,0.8), 0 0 30px rgba(0,100,255,0.4);
        display: flex;
        align-items: center;
        justify-content: center;
        animation: logoGhostFade 2.5s ease-out forwards;
    }

    .buddy-chat::after {
        content: '';
        position: absolute;
        bottom: -6px;
        left: 50%;
        transform: translateX(-50%);
        border-width: 6px 6px 0 6px;
        border-style: solid;
        border-color: white transparent transparent transparent;
    }

    .buddy-chat img {
        width: 24px;
        height: 24px;
        object-fit: contain;
        filter: drop-shadow(0 1px 1px rgba(0, 0, 0, 0.1));
    }

    /* Logo Bubble Content */
    .logo-content {
        font-family: 'SlaizenRazer', sans-serif;
        color: #fff;
        font-size: 48px;
        opacity: 0.6;
        text-shadow: 0 0 10px rgba(0, 255, 150, 0.8), 0 0 15px rgba(255, 255, 255, 0.4);
        display: flex;
        justify-content: center;
        align-items: center;
        width: 100%;
        height: 100%;
        padding-top: 5px;
        /* Décalage pour centrage visuel parfait */
        user-select: none;
        letter-spacing: 1px;
    }
    /* Score Counter HUD */
    #bubble-counter {
        position: fixed;
        bottom: 35px;
        right: 30px;
        padding: 5px 15px;
        background: rgba(255, 255, 255, 0.1);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        border: 1px solid rgba(255, 255, 255, 0.2);
        border-radius: 20px;
        color: white;
        font-family: 'Segoe UI', sans-serif;
        font-size: 13px;
        font-weight: 600;
        z-index: 10000;
        text-shadow: 0 1px 3px rgba(0,0,0,0.5);
        display: flex;
        align-items: center;
        gap: 8px;
        box-shadow: 0 4px 15px rgba(0,0,0,0.1);
        transition: transform 0.2s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        pointer-events: none;
    }
    #bubble-counter.pulse {
        transform: scale(1.1);
        border-color: rgba(255, 255, 255, 0.5);
        background: rgba(255, 255, 255, 0.2);
    }
    .counter-icon {
        width: 16px;
        height: 16px;
        border: 1.5px solid rgba(255, 255, 255, 0.9);
        border-radius: 50%;
        display: inline-block;
        background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0) 70%);
        box-shadow: inset -2px -2px 4px rgba(0, 0, 0, 0.1), 0 0 5px rgba(255, 255, 255, 0.2);
        position: relative;
    }
    .counter-icon::after {
        content: '';
        position: absolute;
        top: 3px;
        left: 3px;
        width: 3px;
        height: 3px;
        background: white;
        border-radius: 50%;
        opacity: 0.8;
    }

    /* Aero Music Control */
    #msn-music-control {
        position: fixed;
        bottom: 30px;
        left: 30px;
        width: 44px;
        height: 44px;
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.4) 0%, rgba(255, 255, 255, 0.15) 50%, rgba(255, 255, 255, 0.05) 100%);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        border: 1px solid rgba(255, 255, 255, 0.4);
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;
        z-index: 10001;
        box-shadow: 0 8px 25px rgba(0, 0, 0, 0.15), inset 0 2px 2px rgba(255, 255, 255, 0.5);
        transition: all 0.3s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        user-select: none;
    }
    #msn-music-control:hover {
        transform: scale(1.1);
        background: linear-gradient(135deg, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.25) 100%);
        box-shadow: 0 10px 30px rgba(0, 200, 255, 0.3);
    }
    #msn-music-control:active {
        transform: scale(0.95);
    }
    #msn-music-control .music-icon {
        width: 24px;
        height: 24px;
        object-fit: contain;
        filter: drop-shadow(0 0 3px rgba(255,255,255,0.8));
        transition: transform 0.5s ease;
    }
    #msn-music-control.playing .music-icon {
        animation: musicPulse 2s infinite ease-in-out;
        color: #00f2ff;
    }
    @keyframes musicPulse {
        0%, 100% { transform: scale(1); opacity: 0.8; }
        50% { transform: scale(1.2); opacity: 1; }
    }
</style>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                      ██ ACCESSING: LOCAL PAGE ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->

<body class="win7">
    <div id="auth-nav-container"></div>

    <a href="../../theHideout/index.html" class="back-button" data-fr="← Retour au Repère"
        data-en="← Back to the Hideout">← Retour au Repère</a>
    <div class="bg-pane xp"></div>
    <div class="bg-pane win7"></div>

    <div class="side-title left">Windows XP</div>
    <div class="side-title right">Windows 7</div>

    <!-- Compteurs de simulation (visuels uniquement pour l'instant) -->


    <div class="title" data-fr="Simulation : MSN Messenger" data-en="Simulation : MSN Messenger">Simulation : MSN Messenger</div>

    <div id="bubble-counter">
        <span class="counter-icon"></span>
        <span id="pop-val">0</span>
    </div>

    <!-- Music Control -->
    <div id="msn-music-control" onclick="toggleAmbientMusic()" title="Ambience : Windows XP Welcome">
        <img src="windowslivemessenger/smilies/note.png" class="music-icon" alt="Music">
    </div>

    <audio id="ambient-music" loop autoplay>
        <source src="song_windowsxp-welcome-music.mp3" type="audio/mpeg">
    </audio>

    <div class="desktop-selector">
        <div class="icon-item icon-msn">
            <div class="corner-counter" data-fr="Simulation lancée : 2" data-en="Simulation launched: 2">Simulation
                lancée : 2</div>
            <div class="date-label">2002-2005</div>
            <div class="icon-box" onclick="alert('Bientôt disponible !')" onmouseenter="playHover('sfx_xbox-swipe1.mp3')">
                <img src="msnmessenger/favicon.ico" alt="MSN Icon">
            </div>
            <div class="label" data-fr="MSN Messenger" data-en="MSN Messenger">MSN Messenger</div>
            <div class="version" data-fr="Version Classique" data-en="Classic Version">Classic Version</div>
        </div>

        <div class="icon-item icon-wlm">
            <div class="corner-counter" data-fr="Simulation lancée : 1" data-en="Simulation launched: 1">Simulation
                lancée : 1</div>
            <div class="date-label">2007-2013</div>
            <div class="icon-box" onclick="window.openWLM()" onmouseenter="playHover('sfx_xbox-swipe2.mp3')">
                <img src="windowslivemessenger/favicon.ico" alt="Windows Live Messenger Icon">
            </div>
            <div class="label" data-fr="Windows Live Messenger" data-en="Windows Live Messenger">Windows Live Messenger
            </div>
            <div class="version" data-fr="Version Aero" data-en="Aero Version">Aero Version</div>
        </div>
    </div>

    <!-- MODAL WLM -->
    <div id="wlm-modal">
        <div class="window glass active">
            <div class="title-bar">
                <div class="title-bar-text flex items-center">
                    <img src="windowslivemessenger/favicon.ico" width="16" height="16" class="pb-0.5 mr-1">
                    Windows Live Messenger
                </div>
                <div class="title-bar-controls">
                    <button aria-label="Minimize" onclick="closeWLM()"></button>
                    <button aria-label="Maximize"></button>
                    <button aria-label="Close" onclick="closeWLM()"></button>
                </div>
            </div>
            <div class="window-body">
                <iframe id="wlm-iframe" src="about:blank"></iframe>
            </div>
        </div>
    </div>
    <div id="unable-to-connect-modal" class="win7"
        style="display: none; position: fixed; inset: 0; z-index: 9999; background: rgba(0, 0, 0, 0.2); justify-content: center; align-items: center; pointer-events: none;">
        <div class="window glass active" style="width: 540px; pointer-events: auto; position: absolute;">
            <div class="title-bar">
                <div class="title-bar-text flex items-center">
                    <img src="windowslivemessenger/favicon.ico" width="16" height="16" class="pb-0.5 mr-1">
                    Windows Live Messenger
                </div>
                <div class="title-bar-controls">
                    <button aria-label="Close" onclick="closeErrorModal()"></button>
                </div>
            </div>
            <div class="window-body">
                <div class="flex p-4 items-start">
                    <img src="windowslivemessenger/info.png" class="flex-shrink-0" style="margin-right: 15px;">
                    <div>
                        <p class="msn-title" style="margin-top: 0;"
                            data-fr="Nous ne pouvons pas vous connecter à Windows Live Messenger"
                            data-en="We can't sign you in to Windows Live Messenger">We can't sign you in to Windows
                            Live Messenger</p>
                        <p id="modal-error-msg" style="color: black; font-size: 12.5px; margin-bottom: 20px;"
                            data-fr="Veuillez entrer une adresse e-mail valide."
                            data-en="Please enter a valid email address.">Please
                            enter a valid email address.</p>
                    </div>
                </div>
                <div class="flex justify-end mt-4 gap-2">
                    <button class="px-8 py-0.5" onclick="closeErrorModal()" data-fr="Réessayer"
                        data-en="Retry">Retry</button>
                    <button class="px-8 py-0.5" onclick="closeErrorModal()" data-fr="Annuler"
                        data-en="Cancel">Cancel</button>
                </div>
            </div>
        </div>
    </div>
    <div class="footer"
        data-fr="Basé sur un projet de <a href='https://github.com/clrgia/windows-live-messenger' target='_blank' rel='noopener noreferrer'>clrgia (GitHub)</a>, entièrement reconstruit et adapté par Slaizen.com © 2026. Tous droits réservés."
        data-en="Based on a project by <a href='https://github.com/clrgia/windows-live-messenger' target='_blank' rel='noopener noreferrer'>clrgia (GitHub)</a>, entirely rebuilt and adapted by Slaizen.com © 2026. All rights reserved.">
        Basé sur un projet de <a href="https://github.com/clrgia/windows-live-messenger" target="_blank"
            rel="noopener noreferrer">clrgia (GitHub)</a>, entièrement reconstruit et adapté par Slaizen.com © 2026.
        Tous droits réservés.
    </div>
    <!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ AI JAVASCRIPT OUTPUT ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
    <!-- Scripts Supabase et CoreSystem -->
    <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 #30b085; border-radius: 4px; color: #ffffff; font-family: 'Source Code Pro', monospace; font-size: 14px; max-width: 90%; text-align: center; box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);">
    </div>

    <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/modals-loader.js"></script>
    <script src="../../coreSystem/auth-nav-loader.js"></script>
    <script src="../../coreSystem/profiles-config.js"></script>
    <script src="../../coreSystem/profiles.js"></script>
    <script src="../../coreSystem/auth.js"></script>
    <script src="../../coreSystem/avatars.js"></script>
    <script src="../../coreSystem/reactions.js"></script>
    <script src="../../coreSystem/comments.js"></script>
    <script src="../../coreSystem/notifications.js"></script>
    <script src="../../coreSystem/app.js"></script>
    <script src="../../coreSystem/tracking.js"></script>
    <script src="../../coreSystem/i18n.js"></script>

    <script>
        window.openWLM = function() {
            var s = new Audio('sfx_startup-win7.mp3');
            s.volume = 1.0;
            s.play().catch(e => console.log("Audio Win7 blocked"));

            const modal = document.getElementById('wlm-modal');
            const iframe = document.getElementById('wlm-iframe');
            iframe.src = 'windowslivemessenger/signup.html';
            modal.classList.add('active');
        }

        window.closeWLM = function() {
            const modal = document.getElementById('wlm-modal');
            const iframe = document.getElementById('wlm-iframe');
            modal.classList.remove('active');
            iframe.src = 'about:blank';
        }

        window.showErrorModal = function (msg) {
            document.getElementById('modal-error-msg').innerText = msg;
            document.getElementById('unable-to-connect-modal').style.display = 'flex';
        }

        function closeErrorModal() {
            document.getElementById('unable-to-connect-modal').style.display = 'none';
        }

        // Draggable initialization
        document.querySelectorAll('.win7').forEach(modal => {
            const win = modal.querySelector('.window');
            const handle = modal.querySelector('.title-bar');
            if (win && handle) {
                handle.addEventListener('mousedown', (e) => {
                    if (e.target.closest('button')) return;
                    e.preventDefault();

                    const rect = win.getBoundingClientRect();
                    const offsetX = e.clientX - rect.left;
                    const offsetY = e.clientY - rect.top;

                    function onMouseMove(e) {
                        win.style.position = 'absolute';
                        win.style.left = (e.clientX - offsetX) + 'px';
                        win.style.top = (e.clientY - offsetY) + 'px';
                        win.style.margin = '0';
                    }

                    function onMouseUp() {
                        document.removeEventListener('mousemove', onMouseMove);
                        document.removeEventListener('mouseup', onMouseUp);
                    }

                    document.addEventListener('mousemove', onMouseMove);
                    document.addEventListener('mouseup', onMouseUp);
                });
            }
        });

        /**
         * 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;
            }
        });
        // --- MSN PARTICLE ENGINE (INLINE STYLE FORCED) ---
        var container = document.createElement('div');
        container.className = 'msn-hill-container';
        container.style.position = 'fixed';
        container.style.top = '0';
        container.style.left = '0';
        container.style.width = '100vw';
        container.style.height = '100vh';
        container.style.zIndex = '5'; // Au-dessus du fond (z=1) mais sous l'UI (z=10+)
        container.style.pointerEvents = 'none';
        container.style.overflow = 'hidden';
        document.body.insertBefore(container, document.body.firstChild);

        var particles = [];
        var mouse = { x: -2000, y: -2000, active: false };
        var draggedObject = null;
        var simulationStartTime = Date.now();
        var emojisList = [
            'smile.png', 'wink.gif', 'heart.png', 'star.png',
            'cool.png', 'devil.png', 'laugh.png', 'tongue.png',
            'msn.png', 'cake.gif', 'party.gif', 'coffee.png'
        ];
        // ============================================
        // MSN BUBBLE POPPING SYSTEM - CLEAN START V3
        // ============================================
        
        // 1. Double état indépendant (Étanchéité totale entre Invité et Compte)
        var msnScores = {
            guest: parseInt(localStorage.getItem('msn_record_guest_v3') || '0', 10),
            account: 0,
            active: 'guest' // 'guest' ou 'account'
        };
        
        var msnSyncTimeout = null;

        // 2. Mise à jour de l'UI (Affiche la source active uniquement)
        function updatePopCounter() {
            var valEl = document.getElementById('pop-val');
            var counterEl = document.getElementById('bubble-counter');
            var currentTotal = (msnScores.active === 'account') ? msnScores.account : msnScores.guest;
            
            if (valEl) valEl.innerText = currentTotal;
            if (counterEl) {
                counterEl.classList.add('pulse');
                setTimeout(() => counterEl.classList.remove('pulse'), 200);
            }
        }

        // 3. Synchronisation Cloud (Uniquement si mode account actif)
        function syncMsnAccountScore(total) {
            if (msnScores.active !== 'account' || !window.supabase || !window.currentUser) return;

            if (msnSyncTimeout) clearTimeout(msnSyncTimeout);
            msnSyncTimeout = setTimeout(async () => {
                try {
                    const { error } = await window.supabase
                        .from('user_game_records')
                        .upsert({ 
                            user_id: window.currentUser.id, 
                            msn_bubbles_popped: total 
                        }, { onConflict: 'user_id' });
                    if (!error) console.log('☁️ MSN Cloud Sync:', total);
                } catch (err) { console.error('❌ Sync Error:', err); }
            }, 2000);
        }

        // 4. Chargement du score de compte
        async function fetchMsnAccountScore(user) {
            if (!window.supabase || !user) return;
            try {
                const { data, error } = await window.supabase
                    .from('user_game_records')
                    .select('msn_bubbles_popped')
                    .eq('user_id', user.id)
                    .maybeSingle();
                
                if (!error && data && data.msn_bubbles_popped !== undefined) {
                    msnScores.account = data.msn_bubbles_popped;
                    if (msnScores.active === 'account') updatePopCounter();
                    console.log('✅ MSN Account Record Loaded:', msnScores.account);
                }
            } catch (err) { console.warn('⚠️ Account fetch failed'); }
        }

        // 5. Fonction Globale d'enregistrement (Appelée par les clics)
        window.registerPop = function(amount = 1) {
            if (msnScores.active === 'account') {
                msnScores.account += amount;
                syncMsnAccountScore(msnScores.account);
            } else {
                msnScores.guest += amount;
                localStorage.setItem('msn_record_guest_v3', msnScores.guest);
            }
            updatePopCounter();
            playPopSound();

            if (typeof window.trackEvent === 'function') {
                window.trackEvent('msn_bubble_pop', { amount, mode: msnScores.active });
            }
        };

        // 6. Commutateur de Session (Partitionnement strict)
        function switchMsnSession(user) {
            if (user) {
                msnScores.active = 'account';
                console.log('🔄 MSN: Mode COMPTE activé');
                fetchMsnAccountScore(user);
            } else {
                msnScores.active = 'guest';
                msnScores.account = 0; // Reset cache compte par sécurité
                msnScores.guest = parseInt(localStorage.getItem('msn_record_guest_v3') || '0', 10);
                console.log('🔄 MSN: Mode INVITÉ activé');
            }
            updatePopCounter();
        }

        // 7. Initialisation Sécurisée
        document.addEventListener('DOMContentLoaded', () => {
            updatePopCounter();
            
            const checkAuth = setInterval(() => {
                if (window.supabase) {
                    clearInterval(checkAuth);
                    
                    window.supabase.auth.onAuthStateChange((event, session) => {
                        console.log('📡 MSN Security Bridge:', event);
                        switchMsnSession(session?.user || null);
                    });

                    // Vérification initiale
                    window.supabase.auth.getSession().then(({data}) => {
                        if (data.session) switchMsnSession(data.session.user);
                    });
                }
            }, 100);
            setTimeout(() => clearInterval(checkAuth), 5000);
        });
        
        // SFX Initialisation
        var popSound = new Audio('sfx_bubble-pop.mp3');
        var isMusicPlaying = false;

        window.toggleAmbientMusic = function() {
            var ambientAudio = document.getElementById('ambient-music');
            var btn = document.getElementById('msn-music-control');
            if (!ambientAudio) return console.error("Audio element not found");

            if (isMusicPlaying) {
                ambientAudio.pause();
                btn.classList.remove('playing');
                isMusicPlaying = false;
                console.log("Ambience Paused");
            } else {
                ambientAudio.volume = 0.9;
                ambientAudio.play()
                    .then(() => {
                        btn.classList.add('playing');
                        isMusicPlaying = true;
                        console.log("Ambience Playing");
                    })
                    .catch(e => {
                        console.error("Music blocked or failed:", e);
                        alert("Veuillez interagir avec la page avant de lancer la musique (protection navigateur).");
                    });
            }
        };

        // Déverrouillage automatique au premier clic n'importe où
        window.addEventListener('mousedown', function() {
            if (!isMusicPlaying) {
                window.toggleAmbientMusic();
            }
        }, { once: true });

        function playPopSound() {
            var s = popSound.cloneNode();
            s.volume = 0.65;
            s.play().catch(e => console.log("Audio play blocked: interaction required"));
        }

        window.openMSN = function() {
            var s = new Audio('sfx_startup-winxp.mp3');
            s.volume = 0.9;
            s.play().catch(e => console.log("Audio XP blocked"));
            
            // On peut ajouter ici d'autres actions spécifiques à MSN si besoin
            console.log("MSN Universe Activated");
        };

        window.playHover = function(file) {
            var s = new Audio(file);
            s.volume = 0.9;
            s.play().catch(e => {});
        };


        window.addEventListener('mousemove', function (e) {
            mouse.x = e.clientX;
            mouse.y = e.clientY;
            mouse.active = true;
        });

        function createLogoGhost(x, y, size) {
            var ghost = document.createElement('div');
            ghost.className = 'logo-ghost';
            ghost.innerText = '♎';
            ghost.style.left = x + 'px';
            ghost.style.top = y + 'px';
            ghost.style.width = size + 'px';
            ghost.style.height = size + 'px';
            container.appendChild(ghost);
            setTimeout(function() { ghost.remove(); }, 2500);
        }

        window.addEventListener('mouseup', function (e) {
            if (draggedObject) {
                draggedObject.state = 'falling';
                draggedObject.el.style.cursor = 'grab';
                if (draggedObject.el._chat && draggedObject.el._chat.classList.contains('active')) {
                    draggedObject.el._chat.classList.remove('active');
                }
                draggedObject = null;
            }
        });

        function createParticle(type, isInitial, forceForeground, forceGiant) {
            var el = document.createElement((type === 'emoji' || type === 'butterfly') ? 'img' : 'div');
            el.className = 'msn-element';
            el.dataset.type = type;
            el.style.position = 'absolute';
            el.style.top = '0';
            el.style.left = '0';
            el.style.pointerEvents = 'none';
            el.style.userSelect = 'none';
            el.style.display = 'block';
            el.style.zIndex = (type === 'giant') ? '999998' : (type === 'buddy' ? '6' : '999999');

            if (type === 'emoji') {
                var src = emojisList[Math.floor(Math.random() * emojisList.length)];
                el.src = 'windowslivemessenger/smilies/' + src;
            } else if (type === 'butterfly') {
                el.src = 'logo_msn-butterfly.webp';
                el.style.filter = 'drop-shadow(0 2px 3px rgba(0,0,0,0.15))';
            } else if (type === 'buddy') {
                // Character choice
                var buddyNum = Math.floor(Math.random() * 4) + 1;
                var buddyImg = document.createElement('img');
                buddyImg.src = 'msn_buddy' + buddyNum + '.webp';
                buddyImg.style.width = '100%';
                buddyImg.style.height = '100%';
                buddyImg.style.filter = 'drop-shadow(0 5px 5px rgba(0,0,0,0.2))';
                el.appendChild(buddyImg);

                // Chat Bubble
                var chat = document.createElement('div');
                chat.className = 'buddy-chat';
                var chatImg = document.createElement('img');
                chat.appendChild(chatImg);
                el.appendChild(chat);
                el._chat = chat;
                el._chatImg = chatImg;

                // Drag & Drop Setup
                el.style.pointerEvents = 'auto';
                el.style.cursor = 'grab';
                el.addEventListener('mousedown', function(e) {
                    var p = particles.find(pt => pt.el === el);
                    if (p && p.type === 'buddy') {
                        draggedObject = p;
                        p.state = 'dragged';
                        p.velocityV = 0;
                        p.hasLandedSoundPlayed = false; // Reset pour le prochain atterrissage
                        el.style.cursor = 'grabbing';

                        var panicEmojis = ['angry.png', 'huh.gif', 'ooh.png', 'what.png', 'mad.gif', 'cry.gif', 'thdown.png'];
                        var emoji = panicEmojis[Math.floor(Math.random() * panicEmojis.length)];
                        p.el._chatImg.src = 'windowslivemessenger/smilies/' + emoji;
                        p.el._chat.classList.add('active');
                        
                        // Son de saisie (inversé : restore.mp3)
                        var s = new Audio('sfx_restore.mp3');
                        s.volume = 0.5;
                        s.play().catch(e => console.log("Audio restore blocked"));
                    }
                });
            } else if (type === 'giant') {
                el.style.borderRadius = '50%';
                el.style.background = 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(135, 206, 250, 0.2) 50%, rgba(0, 0, 0, 0.05) 100%)';
                el.style.border = '1px solid rgba(255, 255, 255, 0.45)';
                el.style.boxShadow = 'inset -5px -5px 15px rgba(255, 255, 255, 0.2), inset 5px 5px 20px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.3)';
                el.style.backdropFilter = 'blur(6px)';
                el.style.webkitBackdropFilter = 'blur(6px)';
                el.style.zIndex = '999998';
                
                el.style.pointerEvents = 'auto';
                el.style.cursor = 'grab';
                el.addEventListener('mousedown', function(e) {
                    var p = particles.find(pt => pt.el === el);
                    if (p) {
                        draggedObject = p;
                        p.state = 'dragged';
                        p.velocityV = 0;
                        el.style.cursor = 'grabbing';
                    }
                });
            } else if (type === 'logo') {
                el.style.borderRadius = '50%';
                // STYLE IDENTIQUE AUX AUTRES BULLES
                el.style.background = 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(135, 206, 250, 0.2) 50%, rgba(0, 0, 0, 0.05) 100%)';
                el.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
                el.style.border = '1px solid rgba(255, 255, 255, 0.45)';
                el.style.boxShadow = 'inset -5px -5px 15px rgba(255, 255, 255, 0.2), inset 5px 5px 20px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.3)';
                el.style.backdropFilter = 'blur(6px)';
                el.style.webkitBackdropFilter = 'blur(6px)';

                var shadowNode = document.createElement('div');
                shadowNode.style.position = 'absolute';
                shadowNode.style.top = '15%'; shadowNode.style.left = '12%';
                shadowNode.style.width = '100%'; shadowNode.style.height = '100%';
                shadowNode.style.borderRadius = '50%';
                shadowNode.style.backgroundColor = 'rgba(0, 0, 0, 0.08)'; 
                shadowNode.style.filter = 'blur(6px)';
                shadowNode.style.zIndex = '-1';
                el.appendChild(shadowNode);

                var highlight = document.createElement('div');
                highlight.style.position = 'absolute';
                highlight.style.top = '12%'; highlight.style.left = '18%';
                highlight.style.width = '20%'; highlight.style.height = '8%';
                highlight.style.background = 'rgba(255, 255, 255, 0.7)';
                highlight.style.borderRadius = '50%';
                highlight.style.transform = 'rotate(-25deg)';
                highlight.style.filter = 'blur(1px)';
                el.appendChild(highlight);

                // CONTENU AJOUTÉ EN DERNIER POUR ÊTRE AU-DESSUS DU REFLET
                var content = document.createElement('div');
                content.className = 'logo-content';
                content.innerText = '♎'; 
                el.appendChild(content);

                el.style.pointerEvents = 'auto';
                el.style.cursor = 'pointer';
                el.addEventListener('mousedown', function(e) {
                    var p = particles.find(pt => pt.el === el);
                    if (p && p.state !== 'popping') {
                        p.state = 'popping';
                        p.popLevel = 0;
                        if (window.registerPop) window.registerPop(2);
                    }
                });
            } else {
                el.style.borderRadius = '50%';
                // VOLUME RÉALISTE
                el.style.background = 'radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.5) 0%, rgba(255, 255, 255, 0.1) 30%, rgba(135, 206, 250, 0.2) 50%, rgba(0, 0, 0, 0.05) 100%)';
                el.style.backgroundColor = 'rgba(255, 255, 255, 0.05)';
                el.style.border = '1px solid rgba(255, 255, 255, 0.45)';
                el.style.boxShadow = 'inset -5px -5px 15px rgba(255, 255, 255, 0.2), inset 5px 5px 20px rgba(0, 0, 0, 0.1), inset 0 0 10px rgba(255, 255, 255, 0.3)';
                el.style.backdropFilter = 'blur(6px)';
                el.style.webkitBackdropFilter = 'blur(6px)';
                el.style.pointerEvents = 'auto';
                el.style.cursor = 'pointer';
                
                el.addEventListener('mousedown', function(e) {
                    var p = particles.find(pt => pt.el === el);
                    if (p && p.state !== 'popping') {
                        p.state = 'popping';
                        p.popLevel = 0;
                        if (window.registerPop) window.registerPop(1);
                    }
                });


                var shadowNode = document.createElement('div');
                shadowNode.style.position = 'absolute';
                shadowNode.style.top = '15%'; shadowNode.style.left = '12%';
                shadowNode.style.width = '100%'; shadowNode.style.height = '100%';
                shadowNode.style.borderRadius = '50%';
                shadowNode.style.backgroundColor = 'rgba(0, 0, 0, 0.08)';
                shadowNode.style.filter = 'blur(6px)';
                shadowNode.style.zIndex = '-1';
                el.appendChild(shadowNode);

                if (type !== 'giant') {
                    var highlight = document.createElement('div');
                    highlight.style.position = 'absolute';
                    highlight.style.top = '12%'; highlight.style.left = '18%';
                    highlight.style.width = '20%'; highlight.style.height = '8%';
                    highlight.style.background = 'rgba(255, 255, 255, 0.7)';
                    highlight.style.borderRadius = '50%';
                    highlight.style.transform = 'rotate(-25deg)';
                    highlight.style.filter = 'blur(1px)';
                    el.appendChild(highlight);
                }
            }
            container.appendChild(el);

            var winW = Math.max(window.innerWidth, document.documentElement.clientWidth) || 1024;
            var winH = Math.max(window.innerHeight, document.documentElement.clientHeight) || 768;

            var size = 40;
            if (type === 'emoji') size = 20 + Math.random() * 20;
            else if (type === 'bubble') size = 30 + Math.random() * 150;
            else if (type === 'giant') size = 300 + Math.random() * 400;
            else if (type === 'butterfly') size = 15 + Math.random() * 10;
            else if (type === 'buddy') size = 45;
            else if (type === 'logo') size = 70; // Taille spécifique logo

            var p = {
                el: el, type: type, size: size,
                x: Math.random() * winW, y: 0,
                sx: 0, sy: 0, vx: 0, vy: 0,
                rot: Math.random() * 360, rs: (Math.random() - 0.5) * 1.5,
                chatTimer: 100 + Math.random() * 200,
                animOffset: Math.random() * 1000, // For smooth wobble
                offsetY: 0,
                velocityV: 0,
                flyAwayY: 0 // Offset vertical pour la fuite souris
            };

            if (type === 'giant') {
                p.y = winH - (size * 0.25) - (Math.random() * 50);
                p.anchorY = p.y; // Sauvegarde de l'altitude d'origine
                p.sx = (Math.random() > 0.5 ? 1 : -1) * (0.05 + Math.random() * 0.12);
            } else if (type === 'logo') {
                p.y = isInitial ? Math.random() * winH : -size - 20;
                p.sy = 0.25 + Math.random() * 0.2; // Chute lente et régulière
                p.sx = (Math.random() - 0.5) * 0.4;
            } else if (type === 'butterfly') {
                // Forçage déterministe si demandé, sinon hasard
                var isForeground = (forceForeground !== undefined) ? forceForeground : (Math.random() > 0.6);
                
                if (forceGiant) {
                    p.isGiant = true;
                    p.state = 'patrolling';
                    p.z = 1.2 + Math.random() * 0.2;
                    p.size = 130 + Math.random() * 40;
                    p.x = winW * (0.75 + Math.random() * 0.2); // Commence à droite
                    p.targetX = winW * (0.40 + Math.random() * 0.70); // Touche le rebord droit + débordement
                    p.targetZ = 0.7 + Math.random() * 0.4;
                    p.flyAmp = 50 + Math.random() * 30; // Plus d'amplitude verticale
                    p.flySpeed = 0.006 + Math.random() * 0.006; // Plus rapide
                    p.currentYOffset = 200;

                    // Interaction au clic
                    el.style.pointerEvents = 'auto';
                    el.style.cursor = 'pointer';
                    el.addEventListener('mousedown', function(e) {
                        e.stopPropagation();
                        p.state = 'exiting';
                        p.flySpeed = 0.012;
                    });
                } else if (isForeground) {
                    p.isMedium = true;
                    p.z = 0.3 + Math.random() * 0.9; // Même profondeur que les buddies
                    p.size = 35 + Math.random() * 40; // Taille plus variée (un petit, un grand possible)
                    p.x = winW * (0.05 + Math.random() * 0.40); 
                    p.targetX = p.x;
                    p.targetZ = 0.3 + Math.random() * 0.9; // Cible de profondeur aléatoire
                    p.flyAmp = 25 + Math.random() * 15;
                    p.flySpeed = 0.001 + Math.random() * 0.002;
                    p.currentYOffset = 50 + Math.random() * 30;
                } else {
                    p.z = 0.1 + Math.random() * 0.3;
                    p.size = 15 + Math.random() * 10;
                    p.x = winW * (0.05 + Math.random() * 0.35); // Commence à gauche
                    p.targetX = winW * (0.05 + Math.random() * 0.40);
                    p.targetZ = 0.25 + Math.random() * 0.10;
                    p.flyAmp = 10 + Math.random() * 10;
                    p.flySpeed = 0.001 + Math.random() * 0.002;
                    p.currentYOffset = 70;
                }

                p.phase = Math.random() * Math.PI * 2;
                p.freq = 0.0004 + Math.random() * 0.0004;
            } else if (type === 'buddy') {
                p.z = 1.3;
                p.targetZ = 0.25 + Math.random() * 0.10; // "Un chouïa" de moins encore
                p.x = Math.random() * winW;
                p.targetX = winW * (0.05 + Math.random() * 0.40); // Toujours à gauche
                p.state = isInitial ? 'waiting_to_spawn' : 'walking';
                p.waitTimer = isInitial ? Math.random() * 1500 : 0;
                p.walkSpeed = 0.0008 + Math.random() * 0.0012; // Ultra slow
                p.opacity = 0;
                p.hasLandedSoundPlayed = false;
            } else {
                p.y = isInitial ? Math.random() * winH : -size - 20;
                p.sy = type === 'emoji' ? 0.4 + Math.random() * 0.6 : 0.2 + Math.random() * 0.4;
                p.sx = (Math.random() - 0.5) * 0.6;
            }

            el.style.width = p.size + 'px';
            el.style.height = p.size + 'px';
            return p;
        }

        // Initialize particles
        for (var i = 0; i < 5; i++) particles.push(createParticle('bubble', true));
        for (var i = 0; i < 2; i++) particles.push(createParticle('giant', true));
        for (var i = 0; i < 8; i++) particles.push(createParticle('buddy', true));
        // Exactement 2 gros plans à gauche et 4 au loin
        for (var i = 0; i < 2; i++) particles.push(createParticle('butterfly', true, true));
        for (var i = 0; i < 4; i++) particles.push(createParticle('butterfly', true, false));
        // Et le papillon géant à droite
        particles.push(createParticle('butterfly', true, false, true));
        
        // Add the Unique Logo Bubble
        particles.push(createParticle('logo', true));

        function frame() {
            var w = Math.max(window.innerWidth, document.documentElement.clientWidth) || 1024;
            var h = Math.max(window.innerHeight, document.documentElement.clientHeight) || 768;

            // OPTIMISATION : Cache des particules sociales pour réduire la complexité O(N^2)
            var socialParticles = [];
            for (var m = 0; m < particles.length; m++) {
                var pt = particles[m];
                if ((pt.type === 'buddy' || pt.type === 'logo') && pt.state !== 'dragged' && pt.state !== 'falling' && pt.opacity > 0.5) {
                    socialParticles.push(pt);
                }
            }

            // Progressive Target Population Logic
            var elapsed = (Date.now() - simulationStartTime) / 1000;
            var targetPop = 1;
            if (elapsed > 10) targetPop = 2;
            if (elapsed > 30) targetPop = 5;
            if (elapsed > 60) targetPop = 8;

            var activeBuddies = 0;
            for (var k = 0; k < particles.length; k++) {
                if (particles[k].type === 'buddy' && particles[k].state !== 'waiting_to_spawn') activeBuddies++;
            }

            var spawnForced = false;

            for (var j = 0; j < particles.length; j++) {
                var p = particles[j];

                // Population Control: Use the dynamic targetPop
                if (!spawnForced && activeBuddies < targetPop && p.type === 'buddy' && p.state === 'waiting_to_spawn') {
                    p.waitTimer = 0;
                    activeBuddies++;
                    spawnForced = true;
                }

                // Global physics for simple particles (emojis, etc.)
                if (mouse.active && p.type !== 'buddy' && p.type !== 'butterfly' && p.type !== 'bubble' && p.type !== 'giant' && p.type !== 'logo') {
                    var dxMouse = (p.x + p.size / 2) - mouse.x;
                    var dyMouse = (p.y + p.size / 2) - mouse.y;
                    var dist = Math.sqrt(dxMouse * dxMouse + dyMouse * dyMouse);
                    var limit = 100;
                    if (dist < limit && dist > 0) {
                        var force = (limit - dist) / limit;
                        p.vx += (dxMouse / dist) * force * 4;
                        p.vy += (dyMouse / dist) * force * 4;
                    }
                }

                if (p.type !== 'buddy' && p.type !== 'butterfly') {
                    p.vx *= 0.93;
                    p.vy *= 0.93;
                    if (p.state !== 'falling') {
                        p.x += p.vx + p.sx;
                    }
                    p.y += (p.type === 'giant' ? 0 : p.vy + p.sy);
                    if (p.type === 'emoji') p.rot += p.rs;
                }

                // Loop logic
                if (p.type === 'giant') {
                    if (p.x > w + 50) p.x = -p.size - 40;
                    if (p.x < -p.size - 50) p.x = w + 40;
                } else if (p.type !== 'buddy') {
                    if (p.y > h + 50) {
                        p.y = -p.size - 20;
                        p.x = Math.random() * w;
                        p.vx = 0; p.vy = 0;
                    }
                }


                if (p.state === 'dragged' && (p.type === 'giant' || p.type === 'logo')) {
                    p.x = mouse.x - p.size / 2;
                    p.y = mouse.y - p.size / 2;
                } else if (p.state === 'falling' && (p.type === 'giant' || p.type === 'logo')) {
                    // Gravité ultra-douce pour l'effet de flottaison extrême
                    p.velocityV += 0.03; 
                    p.y += p.velocityV;
                    
                    // Collision sur la ligne d'origine (anchorY)
                    if (p.y >= p.anchorY) {
                        p.y = p.anchorY;
                        p.velocityV *= -0.3; // Rebond plus mou/aérien
                        if (Math.abs(p.velocityV) < 0.5) {
                            p.state = null;
                            p.velocityV = 0;
                        }
                    }
                }

                var transform = 'translate3d(' + p.x + 'px,' + p.y + 'px,0)';
                if (p.type === 'emoji') transform += ' rotate(' + p.rot + 'deg)';
                
                // --- Système de Couches Linéaire Simple ---
                var layer = 0;
                if (p.type === 'butterfly') {
                    if (p.isGiant || p.isMedium) layer = 500;
                    else layer = 100;
                } else if (p.type === 'buddy') {
                    layer = 200;
                } else if (p.type === 'giant') {
                    layer = 300;
                } else if (p.type === 'logo') {
                    layer = 450;
                } else { // bulles normales, emojis
                    layer = 400;
                }
                
                // On ajoute un chouïa de p.z pour garder la profondeur relative interne
                p.el.style.zIndex = Math.floor(layer + (p.z || 0) * 10);

                // Bubble Popping Animation
                if (p.state === 'popping') {
                    p.popLevel += 0.12; 
                    var popScale = 1 + (p.popLevel * 1.5);
                    p.opacity = 1 - p.popLevel;
                    transform += ' scale(' + popScale + ')';
                    if (p.popLevel >= 1) {
                        if (p.type === 'logo') {
                            // Création du Ghost Logo
                            var ghost = document.createElement('div');
                            ghost.className = 'logo-ghost';
                            ghost.innerText = '♎';
                            ghost.style.left = p.x + 'px';
                            ghost.style.top = p.y + 'px';
                            ghost.style.width = p.size + 'px';
                            ghost.style.height = p.size + 'px';
                            container.appendChild(ghost);
                            setTimeout(function() { ghost.remove(); }, 2500);
                        }
                        p.y = h + 100; // Téléportation pour recyclage
                        p.state = null;
                        p.opacity = 1;
                    }
                }
                
                // On applique l'opacité (dynamique pour le pop ou fixe)
                p.el.style.opacity = (p.opacity !== undefined) ? p.opacity : 1;

                // Away Perspective Social Logic for Buddies
                if (p.type === 'buddy') {
                    var horizonY = h * 0.45;
                    var viewHeight = h * 0.45; // Only use the hill part

                    var scale = 0.01 + (p.z * 1.2); // Perspective plus agressive
                    var curY = horizonY + (p.z * viewHeight);

                    // Smooth Wobble Logic (Constant phase, variable amplitude)
                    var isMoving = (p.state === 'walking');
                    var wobbleAmp = isMoving ? 3 : 0; 
                    var tiltAmp = isMoving ? 4 : 0;
                    
                    if (p.state === 'dragged') {
                        // Follow mouse, ignoring perspective for Y but keeping it for X reference
                        p.x = mouse.x - (p.size * scale / 2);
                        p.offsetY = mouse.y - curY;
                        wobbleAmp = 5; tiltAmp = 15; // Extra wiggly when held
                    } else if (p.state === 'falling') {
                        p.velocityV += 0.8; // Gravity
                        p.offsetY += p.velocityV;
                        if (p.offsetY >= 0) {
                            p.offsetY = 0;
                            
                            // Son d'atterrissage (inversé : recycle.mp3) - Uniquement au premier impact
                            if (p.velocityV > 2 && !p.hasLandedSoundPlayed) {
                                var s = new Audio('sfx_recycle.mp3');
                                s.volume = 0.4;
                                s.play().catch(e => {});
                                p.hasLandedSoundPlayed = true; // Verrouille le son jusqu'au prochain drag
                            }
                            
                            p.velocityV *= -0.4; // Bounce
                            if (Math.abs(p.velocityV) < 1) {
                                p.state = 'walking';
                                p.velocityV = 0;
                                if (p.el._chat.classList.contains('active')) p.el._chat.classList.remove('active');
                            }
                        }
                        wobbleAmp = 0; tiltAmp = 10;
                    }

                    var wobbleFreq = (p.state === 'dragged') ? 0.025 : 0.01;
                    var tiltFreq = (p.state === 'dragged') ? 0.015 : 0.005;

                    var wobble = Math.sin(Date.now() * wobbleFreq + p.animOffset) * wobbleAmp;
                    var tilt = Math.sin(Date.now() * tiltFreq + p.animOffset) * tiltAmp;

                    var finalScale = (p.state === 'dragged') ? scale * 1.2 : scale; 
                    transform = 'translate3d(' + p.x + 'px,' + (curY - p.size + wobble + p.offsetY) + 'px,0) scale(' + finalScale + ') rotate(' + tilt + 'deg)';

                    // Effet de profondeur (Blur DOF)
                    var blurAmt = Math.max(0, (0.8 - p.z) * 2.5);
                    p.el.style.filter = blurAmt > 0.1 ? 'blur(' + blurAmt + 'px)' : 'none';

                    // Social Detection (Can talk to walking or already waiting/chatting buddies)
                    if (p.state === 'walking' && p.z < 0.4) {
                        // OPTIMISATION : Utilisation du cache socialParticles
                        for (var sk = 0; sk < socialParticles.length; sk++) {
                            var other = socialParticles[sk];
                            if (other !== p && (other.state === 'walking' || other.state === 'chatting')) {
                                var distX = Math.abs(p.x - other.x);
                                var distZ = Math.abs(p.z - other.z);
                                var detectionRange = 250 * scale; 
                                if (distX < detectionRange && distZ < 0.3) {
                                    p.state = 'chatting';
                                    other.state = 'chatting';
                                    p.waitTimer = 1500 + Math.random() * 1500; 
                                    other.waitTimer = p.waitTimer + (Math.random() * 400 - 200);
                                    p.chatTimer = 0;
                                    other.chatTimer = 30 + Math.random() * 40;
                                }
                            }
                        }
                    }

                    // State Machine
                    if (p.state === 'walking') {
                        // Simpler movement logic
                        var dx = p.targetX - p.x;
                        var dz = p.targetZ - p.z;

                        if (Math.abs(dx) < 5 && Math.abs(dz) < 0.01) {
                            // Perfect landing
                            p.state = 'chatting';
                            p.waitTimer = 800 + Math.random() * 1000;
                            p.chatTimer = 9999;
                        } else {
                            // Keep walking
                            p.x += dx * 0.003; 
                            p.z += dz * p.walkSpeed;
                        }
                        p.opacity = Math.min(1, p.opacity + 0.1); // Fast pop in
                    } else if (p.state === 'chatting') {
                        p.waitTimer--;
                        p.chatTimer--;
                        if (p.chatTimer <= 0) {
                            if (p.el._chat.classList.contains('active')) {
                                p.el._chat.classList.remove('active');
                                p.chatTimer = 20 + Math.random() * 40; // Faster replies
                            } else {
                                var emoji = emojisList[Math.floor(Math.random() * emojisList.length)];
                                p.el._chatImg.src = 'windowslivemessenger/smilies/' + emoji;
                                p.el._chat.classList.add('active');
                                p.chatTimer = 120;
                            }
                        }
                        if (p.waitTimer <= 0) {
                            p.state = 'leaving';
                            if (p.el._chat.classList.contains('active')) p.el._chat.classList.remove('active');
                        }
                    } else if (p.state === 'leaving') {
                        p.opacity -= 0.01;
                        if (p.opacity <= 0) {
                            p.state = 'waiting_to_spawn';
                            p.waitTimer = Math.random() * 1200; // Very varied respawn delays
                        }
                    } else if (p.state === 'waiting_to_spawn') {
                        p.waitTimer--;
                        if (p.waitTimer <= 0) {
                            p.z = 1.3;
                            p.targetZ = 0.25 + Math.random() * 0.10;
                            p.x = Math.random() * w;
                            p.targetX = w * (0.05 + Math.random() * 0.40);
                            p.state = 'walking';
                            p.isSocial = Math.random() > 0.4; // Re-roll personality on respawn
                            p.walkSpeed = 0.0008 + Math.random() * 0.0012;
                            p.animOffset = Math.random() * 1000; // Reset phase for new run
                            p.opacity = 0;
                            p.hasLandedSoundPlayed = false;
                        }
                    }
                    p.el.style.opacity = p.opacity;
                }

                if (p.type === 'butterfly') {
                    var horizonY = h * 0.45;
                    var viewHeight = h * 0.45;
                    
                    // Comportement spécifique pour le Géant (Off-screen cycle)
                    if (p.isGiant) {
                        if (p.state === 'patrolling') {
                            // Plus de détection proximity ici, géré par mousedown
                        } else if (p.state === 'exiting') {
                            p.targetX = w + 600;
                            p.currentYOffset += 5; // Montée progressive vers le ciel
                            if (p.x > w + 500 || p.currentYOffset > h) {
                                p.state = 'waiting';
                                p.waitTimer = 400 + Math.random() * 800;
                            }
                        } else if (p.state === 'waiting') {
                            p.waitTimer--;
                            if (p.waitTimer <= 0) {
                                p.x = w + 450; // Prêt à re-entrer
                                p.currentYOffset = 200; // Reset altitude pour le retour
                                p.state = 'reentering';
                            }
                            // Empêcher l'affichage pendant l'attente
                            p.el.style.display = 'none';
                        } else if (p.state === 'reentering') {
                            p.el.style.display = 'block';
                            p.flySpeed = 0.002; // Retour calme
                            p.targetX = w * (0.7 + Math.random() * 0.2);
                            if (p.x < w) p.state = 'patrolling';
                        }
                    }

                    // Convergence vers la zone sociale
                    var dx = p.targetX - p.x;
                    var dz = p.targetZ - p.z;
                    
                    p.x += dx * p.flySpeed;
                    if (p.isGiant) p.x += (Math.random() - 0.5) * 1.5; // Drift organique pour le géant
                    p.z += dz * (p.flySpeed * 2.0); // Depth movement accéléré pour visibilité scale
                    

                    // Si proche de sa cible, il papillonne autour en changeant de micro-cible
                    var thresholdX = p.isGiant ? 100 : 20;
                    if (Math.abs(dx) < thresholdX && Math.abs(dz) < 0.1) {
                        if (p.isGiant) {
                            p.targetX = w * (0.40 + Math.random() * 0.70);
                            p.targetZ = 0.7 + Math.random() * 0.4;
                        } else if (p.isMedium) {
                            p.targetX = w * (0.05 + Math.random() * 0.40); // Même zone "sociale" que les buddies
                            p.targetZ = 0.35 + Math.random() * 0.85; 
                        } else {
                            p.targetX = w * (0.05 + Math.random() * 0.40);
                            p.targetZ = 0.25 + Math.random() * 0.10;
                        }
                    }

                    // Shared Perspective Logic for Buddies and Medium Butterflies
                    var scale = 0.1 + (p.z * 1.1); // Échelle linéaire pour éviter la disparition au loin
                    var curY = horizonY + (p.z * viewHeight);
                    
                    var wave = Math.sin(Date.now() * p.freq + p.phase) * p.flyAmp;
                    var flapAngle = Math.sin(Date.now() * 0.008 + p.phase) * 60; // Battement 3D
                    var dirTilt = (dx > 0 ? 10 : -10); // Inclinaison aérodynamique fixe
                    var yOffset = p.currentYOffset || 70;

                    if (p.isMedium) {
                        // Esquive nerveuse héritée
                        if (mouse.active) {
                            var dxM = p.x - mouse.x;
                            var dyM = (curY - yOffset + wave + p.flyAwayY) - mouse.y;
                            var distM = Math.sqrt(dxM * dxM + dyM * dyM);
                            var reactionRadius = 250;
                            if (distM < reactionRadius && distM > 0) {
                                 var force = (reactionRadius - distM) / reactionRadius;
                                 p.x += (dxM / distM) * force * 6;
                                 p.flyAwayY += (dyM / distM) * force * 8; // Poussée verticale plus douce
                            }
                        }
                        // Retour progressif à l'altitude de croisière
                        p.flyAwayY *= 0.97;
                    }

                    transform = 'translate3d(' + p.x + 'px,' + (curY - yOffset + wave + p.flyAwayY) + 'px,0) scale(' + scale + ') rotate(' + dirTilt + 'deg) rotateY(' + flapAngle + 'deg)';
                }

                p.el.style.transform = transform;
            }

            requestAnimationFrame(frame);
        }
        frame();
    </script>

</body>

</html>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                      ██ FIRST CREATED: 2026-03-31 ██ LAST UPDATED: 2025-03-31 ██                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ INTRUSION DETECTED ██                                                                              ║    
    ║ ██ UNAUTHORIZED ACCESS ATTEMPT LOGGED ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ TERMINATING CONNECTION ██                                                                          ║    
    ║ ██ DISCONNECTING FROM SLAIZEN.COM ██                                                                  ║    
    ║ ██ CONNECTION CLOSED ██                                                                               ║    
    ║                                                                                                       ║    
    ║ ██ YOU ARE NOW LEAVING THE UNDER-GRID ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝    
  ███████ ██       █████  ██ ███████ ███████ ███    ██     ██    ███ ███████ ███████ ██  █████       ██ ███████  
  ██      ██      ██   ██ ██    ███  ██      ████   ██     ██   ████      ██  ███    ██ ██   ██      ██      ██  
  ███████ ██      ███████ ██   ███   █████   ██ ██  ██     ██  ██ ██   █████   ███   ██ ███████      ██ ███████  
       ██ ██      ██   ██ ██  ███    ██      ██  ██ ██     ██ ██  ██      ██    ███  ██ ██   ██      ██ ██       
  ███████ ███████ ██   ██ ██ ███████ ███████ ██   ████     ████   ██ ███████ ███████ ██ ██   ██ ███████ ███████  
-->