<!--                                                                                                             
               ████                                                                           ████               
             ███                                                                                 ███             
           ███                                        ██                                           ███           
        ████                                          ██                                             ████        
      ████                                                                                             ████      
    ████                                                                                                 ████    
  █████████████████████     ██               ████     ██    █████████████   █████████     █████████████████████  
                 ████     ████             ██████     ██              ███                   ████                 
               ███      ████             ███   ██     ██            ███                       ████               
             ███      ████             ███     ██     ██         ████       ███████████████      ███             
          ████      ███              ████████████     ██       ████                                ███           
        ████      ███              ███         ██     ██     ████                                    ████        
      ████      ██████████████  ████           ██     ██   ██████████████   ████████████████████       ████      
                                                                                                                 
       ██ INITIATING CONNECTION ██ TARGET: SLAIZEN.COM ██ ACCESSING CODEBASE ██ CONNECTION ESTABLISHED ██        
                                         ██ WELCOME TO THE UNDER-GRID ██                                         
      21  06    2007                                                                        08  10   1992        
         19 12 1 9 26 5 14                                                           10  9  13 13  25            
            14  5 26 9 1 12 19                                                 18 9 22  1 18 4  53853            
                  16   9 18  1  20 5                                       14 9 14 10  1                         
                      08       2724483                                   636679      76883647                    
              08 27328466  08       3335                              0 5683      08  08 3668466                 
          152883 65        85 38 7  77 34 3                           17     74   79      8    95697             
        96977   81         7817  53       1                          9     9   15          8    8 38895          
                8    4Ω4    8  2   3                                     8  17     3♎︎3    1    3                
           8    58          8    8   6                                 7   4   8           8    2                
            7    18       78     2 2                                  9  3 8    82       88    8                 
              2    7888883      8    1                                 287  2      88885    39                   
                08 1916918920                                                168251993112                        
-->
<!DOCTYPE html>
<html lang="fr">

<head>
  <script>
    /* Immediate Language Detection to prevent FOUT */
    (function () {
      const savedLang = localStorage.getItem('selectedLanguage') || 'fr';
      document.documentElement.lang = savedLang;
      if (savedLang === 'en') {
        document.documentElement.classList.add('i18n-loading');
        // Safety timeout: remove loading class after 1s if i18n.js fails
        setTimeout(function () {
          document.documentElement.classList.remove('i18n-loading');
        }, 1000);
      }
    })();
  </script>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Monster Garage - Slaizen Garage</title>
  <link rel="icon" type="image/x-icon" href="../favicon.ico">
  <link href="https://fonts.googleapis.com/css2?family=Source+Code+Pro:wght@400;600;700&display=swap" rel="stylesheet">
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ ACCESSING: CSS CORE ██                                       ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
  <link rel="stylesheet" href="../coreSystem/auth.css">
  <link rel="stylesheet" href="../coreSystem/modals.css">
  <link rel="stylesheet" href="../coreSystem/profiles.css">
  <link rel="stylesheet" href="../coreSystem/comments.css">
  <link rel="stylesheet" href="../coreSystem/notifications.css">
  <link rel="stylesheet" href="../coreSystem/reactions.css">
  <link rel="stylesheet" href="garage-common.css">
  <style>
    @import url('https://fonts.googleapis.com/css2?family=Orbitron:wght@400;700;900&family=Press+Start+2P&family=Russo+One&display=swap');

    * {
      margin: 0;
      padding: 0;
      box-sizing: border-box;
    }

    /* Prevent Flash of Untranslated Content (FOUT) */
    html.i18n-loading [data-en],
    html.i18n-loading [data-en-title],
    html.i18n-loading [data-en-alt],
    html.i18n-loading .lang-en {
      visibility: hidden !important;
    }

    /* S'assurer que le bouton œil est visible */
    #toggle-password {
      display: flex !important;
      visibility: visible !important;
      opacity: 0.7 !important;
    }

    body {
      font-family: 'Press Start 2P', monospace;
      background:
        linear-gradient(180deg,
          rgba(0, 0, 0, 0.6) 0%,
          rgba(0, 0, 0, 0.4) 50%,
          rgba(0, 0, 0, 0.7) 100%),
        url('https://cdna.artstation.com/p/assets/images/images/020/197/414/large/john-st-4.jpg?1566812626');
      background-size: cover;
      background-position: center center;
      background-attachment: fixed;
      background-color: #1a1a2e;
      color: #fff;
      overflow-x: hidden;
      min-height: 100vh;
      position: relative;
    }

    /* Éclairage dynamique du garage */
    body::before {
      content: '';
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background:
        radial-gradient(circle at 20% 30%, rgba(var(--theme-color-rgb), 0.06) 0%, transparent 30%),
        radial-gradient(circle at 80% 70%, rgba(var(--theme-color-rgb), 0.05) 0%, transparent 35%),
        radial-gradient(circle at 50% 50%, rgba(var(--theme-color-rgb), 0.04) 0%, transparent 40%);
      pointer-events: none;
      z-index: 9998;
      animation: neonPulse 4s ease-in-out infinite;
      filter: brightness(1.2) contrast(1.1);
      transition: background 1.5s ease-in-out;
    }

    @keyframes neonPulse {

      0%,
      100% {
        opacity: 0.6;
        filter: blur(0px) brightness(1);
      }

      50% {
        opacity: 1;
        filter: blur(2px) brightness(1.2);
      }
    }

    @keyframes sparkle {

      0%,
      100% {
        transform: scale(1) rotate(0deg);
        opacity: 0.7;
      }

      50% {
        transform: scale(1.1) rotate(180deg);
        opacity: 1;
      }
    }

    /* Particules de poussière */
    .dust-particles {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      pointer-events: none;
      z-index: 100;
      overflow: hidden;
    }

    .dust-particle {
      position: absolute;
      background: radial-gradient(circle, rgba(255, 255, 255, 0.6) 0%, rgba(255, 255, 255, 0.3) 40%, rgba(var(--theme-color-rgb), 0.15) 80%, transparent 100%);
      border-radius: 50%;
      box-shadow: 0 0 4px rgba(var(--theme-color-rgb), 0.3), 0 0 8px rgba(255, 255, 255, 0.15);
      animation: floatDust linear infinite;
      filter: blur(0.4px);
    }

    .dust-particle:nth-child(1) {
      width: 3px;
      height: 3px;
      left: 12%;
      top: 15%;
      animation-duration: 22s;
      animation-delay: 0s;
    }

    .dust-particle:nth-child(2) {
      width: 1.5px;
      height: 1.5px;
      left: 28%;
      top: 55%;
      animation-duration: 31s;
      animation-delay: -3s;
    }

    .dust-particle:nth-child(3) {
      width: 4px;
      height: 4px;
      left: 42%;
      top: 35%;
      animation-duration: 27s;
      animation-delay: -7s;
    }

    .dust-particle:nth-child(4) {
      width: 2px;
      height: 2px;
      left: 68%;
      top: 72%;
      animation-duration: 29s;
      animation-delay: -11s;
    }

    .dust-particle:nth-child(5) {
      width: 3.5px;
      height: 3.5px;
      left: 85%;
      top: 28%;
      animation-duration: 33s;
      animation-delay: -5s;
    }

    .dust-particle:nth-child(6) {
      width: 2.2px;
      height: 2.2px;
      left: 18%;
      top: 78%;
      animation-duration: 26s;
      animation-delay: -9s;
    }

    .dust-particle:nth-child(7) {
      width: 4.5px;
      height: 4.5px;
      left: 52%;
      top: 12%;
      animation-duration: 35s;
      animation-delay: -14s;
    }

    .dust-particle:nth-child(8) {
      width: 1.8px;
      height: 1.8px;
      left: 38%;
      top: 48%;
      animation-duration: 28s;
      animation-delay: -6s;
    }

    .dust-particle:nth-child(9) {
      width: 2.5px;
      height: 2.5px;
      left: 72%;
      top: 22%;
      animation-duration: 30s;
      animation-delay: -12s;
    }

    .dust-particle:nth-child(10) {
      width: 3.2px;
      height: 3.2px;
      left: 8%;
      top: 42%;
      animation-duration: 25s;
      animation-delay: -8s;
    }

    .dust-particle:nth-child(11) {
      width: 2.8px;
      height: 2.8px;
      left: 48%;
      top: 88%;
      animation-duration: 32s;
      animation-delay: -4s;
    }

    .dust-particle:nth-child(12) {
      width: 1.2px;
      height: 1.2px;
      left: 88%;
      top: 8%;
      animation-duration: 27s;
      animation-delay: -10s;
    }

    .dust-particle:nth-child(13) {
      width: 3.8px;
      height: 3.8px;
      left: 35%;
      top: 25%;
      animation-duration: 32s;
      animation-delay: -12s;
    }

    .dust-particle:nth-child(14) {
      width: 2.1px;
      height: 2.1px;
      left: 72%;
      top: 58%;
      animation-duration: 28s;
      animation-delay: -8s;
    }

    .dust-particle:nth-child(15) {
      width: 4.2px;
      height: 4.2px;
      left: 18%;
      top: 75%;
      animation-duration: 35s;
      animation-delay: -15s;
    }

    .dust-particle:nth-child(16) {
      width: 1.6px;
      height: 1.6px;
      left: 85%;
      top: 82%;
      animation-duration: 30s;
      animation-delay: -5s;
    }

    @keyframes floatDust {
      0% {
        transform: translateY(100vh) translateX(0px) rotate(0deg) scale(0.8);
        opacity: 0;
      }

      5% {
        opacity: 0.3;
        transform: translateY(95vh) translateX(2px) rotate(15deg) scale(0.9);
      }

      15% {
        opacity: 0.5;
        transform: translateY(75vh) translateX(-4px) rotate(60deg) scale(1);
      }

      25% {
        opacity: 0.6;
        transform: translateY(60vh) translateX(6px) rotate(120deg) scale(1.05);
      }

      40% {
        opacity: 0.55;
        transform: translateY(40vh) translateX(-8px) rotate(180deg) scale(0.95);
      }

      55% {
        opacity: 0.6;
        transform: translateY(25vh) translateX(10px) rotate(240deg) scale(1);
      }

      70% {
        opacity: 0.5;
        transform: translateY(12vh) translateX(-6px) rotate(300deg) scale(0.9);
      }

      85% {
        opacity: 0.35;
        transform: translateY(3vh) translateX(4px) rotate(345deg) scale(0.95);
      }

      100% {
        transform: translateY(-15vh) translateX(-2px) rotate(380deg) scale(0.8);
        opacity: 0;
      }
    }

    /* Éclairage de garage dramatique */
    body::after {
      content: '';
      position: fixed;
      top: -50%;
      left: 50%;
      transform: translateX(-50%);
      width: 150%;
      height: 200%;
      background:
        radial-gradient(ellipse at center top,
          rgba(var(--theme-color-rgb), 0.08) 0%,
          rgba(var(--theme-color-rgb), 0.04) 20%,
          transparent 40%),
        radial-gradient(circle at 80% 20%,
          rgba(var(--theme-color-rgb), 0.05) 0%,
          transparent 30%),
        radial-gradient(circle at 20% 30%,
          rgba(var(--theme-color-rgb), 0.04) 0%,
          transparent 25%);
      pointer-events: none;
      z-index: 0;
      animation: lightFlicker 4s ease-in-out infinite;
      transition: background 1.5s ease-in-out;
    }

    @keyframes lightFlicker {

      0%,
      100% {
        opacity: 1;
      }

      50% {
        opacity: 0.85;
      }
    }

    .container {
      position: relative;
      width: 100%;
      height: 100vh;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: flex-start;
      padding: 20px 20px 40px 20px;
      z-index: 1;
      overflow: hidden;
    }

    .title-box {
      border: 3px solid var(--theme-color);
      padding: 10px 35px;
      border-radius: 12px;
      background: rgba(0, 0, 0, 0.4);
      box-shadow:
        0 0 15px rgba(var(--theme-color-rgb), 0.4),
        0 0 25px rgba(var(--theme-color-rgb), 0.2),
        inset 0 0 20px rgba(var(--theme-color-rgb), 0.1);
      display: inline-flex;
      flex-direction: column;
      align-items: center;
      gap: 0px;
      animation: neonFlicker 3s infinite alternate;
      margin-bottom: 20px;
    }

    .title {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(1.8rem, 5vw, 3rem);
      font-weight: 900;
      text-align: center;
      color: var(--theme-color);
      text-transform: none;
      letter-spacing: clamp(4px, 1.5vw, 10px);
      text-shadow:
        0 0 10px rgba(var(--theme-color-rgb), 0.8),
        0 0 20px rgba(var(--theme-color-rgb), 0.6);
      margin: 0;
      line-height: 1.1;
    }

    .tagline {
      font-family: 'Press Start 2P', cursive;
      font-size: clamp(0.5rem, 1.2vw, 0.75rem);
      color: #ffffff;
      text-transform: none;
      letter-spacing: 2px;
      opacity: 0.9;
      text-shadow: 0 0 5px rgba(255, 255, 255, 0.3);
    }

    .copyright-footer {
      position: fixed;
      bottom: 10px;
      right: 15px;
      font-family: 'Source Code Pro', monospace;
      font-size: 10px;
      color: rgba(255, 255, 255, 0.4);
      pointer-events: none;
      z-index: 1000;
      letter-spacing: 1px;
      text-transform: none;
    }

    @keyframes neonFlicker {

      0%,
      100% {
        text-shadow:
          0 0 10px rgba(var(--theme-color-rgb), 0.8),
          0 0 20px rgba(var(--theme-color-rgb), 0.6),
          0 0 30px rgba(var(--theme-color-rgb), 0.4),
          0 0 40px rgba(var(--theme-color-rgb), 0.3);
        box-shadow:
          0 0 15px rgba(var(--theme-color-rgb), 0.4),
          0 0 25px rgba(var(--theme-color-rgb), 0.2),
          inset 0 0 20px rgba(var(--theme-color-rgb), 0.1);
      }

      50% {
        text-shadow:
          0 0 15px rgba(var(--theme-color-rgb), 1),
          0 0 25px rgba(var(--theme-color-rgb), 0.8),
          0 0 35px rgba(var(--theme-color-rgb), 0.6),
          0 0 50px rgba(var(--theme-color-rgb), 0.4);
        box-shadow:
          0 0 20px rgba(var(--theme-color-rgb), 0.6),
          0 0 35px rgba(var(--theme-color-rgb), 0.3),
          inset 0 0 25px rgba(var(--theme-color-rgb), 0.2);
      }
    }

    .back-to-garage {
      position: fixed;
      top: 15px;
      left: 15px;
      z-index: 100000;
    }

    .back-to-garage a {
      font-family: 'Russo One', sans-serif;
      color: #b7ccd9;
      font-size: 23px;
      font-weight: bold;
      text-decoration: none;
      transition: all 0.2s ease;
      text-shadow: 0 2px 4px rgba(0, 0, 0, 0.5);
    }

    .back-to-garage a:hover {
      color: #ddf2ff;
      text-shadow: 0 0 10px rgba(221, 242, 255, 0.4);
    }


    .subtitle {
      font-size: clamp(0.5rem, 1vw, 0.65rem);
      text-align: center;
      margin-bottom: 20px;
      color: #ffffff;
      letter-spacing: clamp(2px, 0.5vw, 4px);
      text-transform: none;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
      animation: subtitlePulse 1s ease-in-out infinite;
      position: relative;
      top: 30px;
      /* Déplacement ajusté à 30px */
    }

    @keyframes subtitlePulse {

      0%,
      100% {
        transform: scale(1);
      }

      50% {
        transform: scale(1.08);
      }
    }

    .main-layout {
      display: grid;
      grid-template-columns: minmax(250px, 1fr) minmax(400px, 2fr) minmax(250px, 1fr);
      gap: clamp(20px, 3vw, 40px);
      width: 100%;
      max-width: 95%;
      align-items: center;
      flex: 1;
    }

    .info-column {
      display: flex;
      flex-direction: column;
      align-items: flex-start;
      justify-content: center;
      padding: 30px;
      background: transparent;
    }

    .stats-column {
      display: flex;
      flex-direction: column;
      align-items: stretch;
      justify-content: center;
      padding: 30px;
      background: transparent;
    }

    .car-viewer {
      position: relative;
      width: 100%;
      height: clamp(400px, 50vh, 500px);
      overflow: visible;
      display: flex;
      align-items: center;
      justify-content: center;
    }

    .car-grid {
      display: grid;
      grid-template-columns: 1fr 1fr 1fr;
      align-items: center;
      height: 100%;
      width: 100%;
    }

    .car-slot {
      display: none;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      cursor: pointer;
      transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      grid-row: 1;
      text-align: center;
    }

    .car-slot.position-center {
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      grid-column: 2;
      justify-self: center;
      align-self: center;
      opacity: 1;
      pointer-events: auto;
      transform: translateY(0);
      width: 100%;
      max-width: 100%;
      margin: 0 auto;
      text-align: center;
      animation: carAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes carAppear {
      0% {
        opacity: 0;
        transform: translateY(30px) scale(0.9);
      }

      100% {
        opacity: 1;
        transform: translateY(0) scale(1);
      }
    }

    .car-selector {
      display: flex;
      justify-content: center;
      align-items: center;
      gap: clamp(15px, 3vw, 30px);
      flex-wrap: wrap;
      position: fixed;
      bottom: clamp(20px, 5vh, 40px);
      left: 50%;
      transform: translateX(-50%);
      z-index: 100;
    }

    .car-selector-item {
      cursor: pointer;
      transition: all 0.3s ease;
      opacity: 0.5;
      filter: grayscale(100%);
    }

    .car-selector-item:hover {
      opacity: 0.8;
      filter: grayscale(50%);
      transform: scale(1.05);
    }

    .car-selector-item.active {
      opacity: 1;
      filter: grayscale(0%);
      transform: scale(1.15);
      animation: subtitlePulse 1s ease-in-out infinite;
    }

    .car-selector-item img {
      width: clamp(80px, 12vw, 120px);
      height: auto;
      display: block;
    }

    .car-selector-arrow {
      position: absolute;
      font-size: clamp(1.5rem, 3vw, 2.5rem);
      color: var(--theme-color);
      cursor: pointer;
      user-select: none;
      transition: all 0.3s;
      text-shadow: 2px 2px 0 rgba(var(--theme-color-rgb), 0.5);
      background: rgba(var(--theme-color-rgb), 0.1);
      border: 2px solid var(--theme-color);
      width: clamp(40px, 6vw, 50px);
      height: clamp(40px, 6vw, 50px);
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 8px;
      backdrop-filter: blur(5px);
      z-index: 10;
    }

    .car-selector-arrow:hover {
      background: rgba(var(--theme-color-rgb), 0.3);
      transform: scale(1.1);
      box-shadow: 0 0 20px rgba(var(--theme-color-rgb), 0.6);
    }

    .car-selector-arrow:active {
      transform: scale(0.95);
    }

    .car-selector-arrow.disabled {
      opacity: 0.5;
      cursor: not-allowed;
      border-color: rgba(var(--theme-color-rgb), 0.4);
      color: rgba(var(--theme-color-rgb), 0.4);
      background: rgba(var(--theme-color-rgb), 0.05);
    }

    .car-selector-arrow.disabled:hover {
      transform: scale(1);
      box-shadow: none;
      background: rgba(var(--theme-color-rgb), 0.05);
    }

    .car-selector-arrow-left {
      left: clamp(-60px, -8vw, -50px);
    }

    .car-selector-arrow-right {
      right: clamp(-60px, -8vw, -50px);
    }

    .car-picture {
      width: clamp(8rem, 15vw, 12rem);
      height: auto;
      display: flex;
      align-items: center;
      justify-content: center;
      transition: all 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
      filter: grayscale(70%);
      opacity: 0.6;
      margin: 0 auto;
    }

    .car-picture img {
      width: 100%;
      height: auto;
      display: block;
      transition: inherit;
      margin: 0 auto;
    }

    .car-slot.position-center .car-picture,
    .car-slot.active .car-picture {
      width: clamp(20rem, 35vw, 28rem);
      height: auto;
      filter: grayscale(0%);
      opacity: 1;
      margin-left: auto;
      margin-right: auto;
      animation: imageAppear 0.8s cubic-bezier(0.34, 1.56, 0.64, 1);
    }

    @keyframes imageAppear {
      0% {
        opacity: 0;
        transform: scale(0.8) translateY(20px);
      }

      100% {
        opacity: 1;
        transform: scale(1) translateY(0);
      }
    }

    .car-slot:hover:not(.position-center) .car-picture {
      filter:
        grayscale(50%) drop-shadow(0 0 20px rgba(0, 255, 255, 0.5));
    }

    .car-details {
      display: none;
      text-align: center;
      font-size: clamp(0.6rem, 1.2vw, 0.8rem);
      color: #ffffff;
      line-height: 1.8;
      white-space: nowrap;
      width: 100%;
      margin: 10px auto 0;
      max-width: 100%;
      background: rgba(0, 0, 0, 0.25);
      padding: 8px 12px;
      border-radius: 6px;
      backdrop-filter: blur(3px);
      box-shadow: 0 2px 8px rgba(0, 0, 0, 0.3);
      text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.8);
    }

    .car-slot.position-center .car-details {
      display: block;
      text-align: center;
      margin-left: auto;
      margin-right: auto;
      animation: detailsAppear 0.6s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    }

    @keyframes detailsAppear {
      0% {
        opacity: 0;
        transform: translateY(20px);
      }

      100% {
        opacity: 1;
        transform: translateY(0);
      }
    }

    .car-detail-line {
      margin: 3px 0;
      letter-spacing: 1px;
      text-shadow: 1px 1px 0 rgba(0, 0, 0, 0.5);
      /* Shadow adjusted for better readability */
      white-space: nowrap;
      text-align: center;
      color: #ffffff;
    }

    .car-detail-line span:first-child {
      color: var(--theme-color);
      font-weight: bold;
      transition: color 0.8s ease;
    }

    .car-detail-line span:last-child {
      color: #ffffff;
      font-weight: bold;
    }


    .car-label {
      font-size: clamp(0.75rem, 1.5vw, 1rem);
      color: #999999;
      letter-spacing: 2px;
      text-shadow: 1px 1px 0 rgba(150, 150, 150, 0.3);
      margin-bottom: 5px;
      white-space: nowrap;
    }

    .car-name {
      font-family: 'Orbitron', sans-serif;
      font-size: clamp(1.6rem, 3.2vw, 2.5rem);
      font-weight: 700;
      margin-bottom: 5px;
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 4px;
      text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
    }

    .car-name-container {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 8px;
    }

    .car-logo {
      width: clamp(60px, 10vw, 80px);
      height: auto;
      opacity: 1;
      margin-right: 15px;
      display: inline-block;
      vertical-align: middle;
      filter: none;
      transition: all 0.5s ease;
    }

    .car-logo.show {
      opacity: 1;
      filter: none;
    }

    .car-year {
      font-size: clamp(1.2rem, 2.5vw, 1.8rem);
      color: #999999;
      letter-spacing: 2px;
      text-shadow: 1px 1px 0 rgba(150, 150, 150, 0.3);
    }

    .stats-grid {
      display: flex;
      flex-direction: column;
      gap: 12px;
      width: 100%;
    }

    .stat {
      display: flex;
      flex-direction: column;
      gap: 6px;
    }

    .stat-label {
      font-size: clamp(0.65rem, 1.2vw, 0.75rem);
      color: #ffffff;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    .stat-bars {
      display: flex;
      gap: 8px;
      width: 100%;
      height: 24px;
      align-items: center;
    }

    .stat-bar-segment {
      flex: 1;
      height: 100%;
      background: rgba(0, 0, 0, 0.5);
      border: 2px solid rgba(var(--theme-color-rgb), 0.3);
      transition: all 0.3s ease;
      position: relative;
      overflow: hidden;
    }

    .stat-bar-segment.active {
      background: var(--theme-color);
      border-color: var(--theme-color);
      box-shadow:
        0 0 10px rgba(var(--theme-color-rgb), 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
    }

    .stat-bar-segment.half {
      background: linear-gradient(to right, var(--theme-color) 0%, var(--theme-color) 50%, rgba(0, 0, 0, 0.5) 50%, rgba(0, 0, 0, 0.5) 100%);
      border-color: var(--theme-color);
      box-shadow:
        0 0 10px rgba(var(--theme-color-rgb), 0.8),
        inset 0 0 10px rgba(255, 255, 255, 0.3);
    }




    /* Responsive */
    @media (max-width: 768px) {
      .container {
        padding: 10px;
        height: 100vh;
        overflow-y: auto;
        overflow-x: hidden;
      }

      .title {
        font-size: clamp(1rem, 5vw, 1.5rem);
        padding: 8px 15px;
        margin-bottom: 5px;
      }

      .subtitle {
        font-size: clamp(0.4rem, 2vw, 0.5rem);
        margin-bottom: 10px;
        position: relative;
        top: 15px;
        /* Déplacement ajusté à 15px */
      }

      .main-layout {
        grid-template-columns: 1fr;
        gap: 10px;
        max-width: 100%;
      }

      .info-column,
      .stats-column {
        align-items: center;
        text-align: center;
        padding: 10px;
      }

      .car-viewer {
        height: auto;
        min-height: 300px;
        margin: 10px 0;
      }

      .car-slot.position-center {
        transform: translateY(0);
        position: relative;
        grid-column: 1;
        justify-self: center;
        align-items: center;
        width: 100%;
      }


      .car-picture {
        width: clamp(12rem, 50vw, 16rem);
      }

      .car-slot.position-center .car-picture,
      .car-slot.active .car-picture {
        width: clamp(16rem, 70vw, 22rem);
      }

      .car-label {
        font-size: clamp(0.6rem, 3vw, 0.75rem);
      }

      .car-name {
        font-size: clamp(1.1rem, 5.5vw, 1.6rem);
      }

      .car-logo {
        width: clamp(40px, 15vw, 60px);
        margin-right: 10px;
      }

      .car-year {
        font-size: clamp(0.9rem, 4vw, 1.2rem);
      }

      .car-details {
        font-size: clamp(0.5rem, 2.5vw, 0.6rem);
        white-space: normal;
      }

      .car-detail-line {
        white-space: normal;
        font-size: clamp(0.5rem, 2.5vw, 0.6rem);
      }

      .arrow {
        width: 45px;
        height: 45px;
        font-size: 2rem;
        bottom: 15px;
      }

      .arrow-left {
        left: 10px;
      }

      .arrow-right {
        right: 10px;
      }

      .stat-bars {
        height: 16px;
        gap: 4px;
      }

      .stat-bar-segment {
        border-width: 1px;
      }

      .stat-label {
        font-size: clamp(0.55rem, 2.5vw, 0.65rem);
      }
    }


    @media (min-width: 1921px) {
      .container {
        max-width: 1920px;
        margin: 0 auto;
      }
    }
  </style>
</head>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                      ██ ACCESSING: LOCAL PAGE ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<body>

  <div class="back-to-garage" style="display: flex; flex-direction: column; gap: 5px;">
    <a href="door.html" class="back-button" data-fr="◀ Retour" data-en="◀ Back">◀ Retour</a>
    <a href="../theHideout/index.html" class="back-button" target="_top" data-fr="◀ Retour au Repaire"
      data-en="◀ Back to the Hideout">◀ Retour au Repaire</a>
  </div>

  <!-- Les composants (Auth, Message, Compteur, Radio) sont maintenant injectés dynamiquement par garage-common.js -->


  <div class="container">
    <div class="title-box">
      <h1 class="title" data-fr="Monster Garage" data-en="Monster Garage">Monster Garage</h1>
      <p class="tagline" data-fr="Slaizen sauve sa rouille !" data-en="Slaizen saves his rust !">Slaizen sauve sa
        rouille !</p>
    </div>
    <p class="subtitle" id="vehicle-subtitle" data-fr="◆ SÉLECTIONNEZ VOTRE VÉHICULE ◆"
      data-en="◆ SELECT YOUR VEHICLE ◆">◆ SÉLECTIONNEZ VOTRE VÉHICULE ◆</p>

    <div class="car-selector">
      <div class="car-selector-arrow car-selector-arrow-left disabled" id="prevBtnSelector">◀</div>
      <div class="car-selector-item active" data-index="0">
        <img src="Mazda_mx3-small.webp" alt="Mazda MX-3">
      </div>
      <div class="car-selector-item" data-index="1">
        <img src="mazda_6-small.webp" alt="Mazda 6">
      </div>
      <div class="car-selector-item" data-index="2">
        <img src="Mitsubishi_Lancer-small.webp" alt="Mitsubishi Lancer">
      </div>
      <div class="car-selector-arrow car-selector-arrow-right" id="nextBtnSelector">▶</div>
    </div>

    <div class="main-layout">
      <!-- Colonne gauche: Nom + Année -->
      <div class="info-column">
        <div class="car-label" id="carLabel">[Premier véhicule]</div>
        <div class="car-name-container">
          <img id="carLogo" class="car-logo" src="logo_mazda.webp" alt="Logo Mazda" style="display: none;">
          <div class="car-name" id="carName">MAZDA MX-3</div>
        </div>
        <div class="car-year" id="carYear">1995</div>
      </div>

      <!-- Colonne centre: Sélecteur de voitures -->
      <div class="car-viewer">
        <div class="car-grid">
          <div class="car-slot active" data-index="0">
            <div class="car-picture">
              <img src="Mazda_mx3.png" alt="Mazda MX-3">
            </div>
            <div class="car-details">
              <div class="car-detail-line"><span data-fr="Valeur initiale: " data-en="Initial Value: ">Valeur initiale:
                </span><span id="value0">0$</span></div>
              <div class="car-detail-line"><span data-fr="Transmission: " data-en="Transmission: ">Transmission:
                </span><span id="transmission0">-</span></div>
              <div class="car-detail-line"><span data-fr="Puissance: " data-en="HP: ">Puissance: </span><span id="hp0">0
                  HP</span></div>
              <div class="car-detail-line"><span data-fr="Poids: " data-en="Weight: ">Poids: </span><span
                  id="weight0">0kg</span></div>
            </div>
          </div>
          <div class="car-slot" data-index="1">
            <div class="car-picture">
              <img src="mazda_6.png" alt="Mazda 6">
            </div>
            <div class="car-details">
              <div class="car-detail-line"><span data-fr="Valeur initiale: " data-en="Initial Value: ">Valeur initiale:
                </span><span id="value1">0$</span></div>
              <div class="car-detail-line"><span data-fr="Transmission: " data-en="Transmission: ">Transmission:
                </span><span id="transmission1">-</span></div>
              <div class="car-detail-line"><span data-fr="Puissance: " data-en="HP: ">Puissance: </span><span id="hp1">0
                  HP</span></div>
              <div class="car-detail-line"><span data-fr="Poids: " data-en="Weight: ">Poids: </span><span
                  id="weight1">0kg</span></div>
            </div>
          </div>
          <div class="car-slot" data-index="2">
            <div class="car-picture">
              <img src="Mitsubishi_Lancer.png" alt="Mitsubishi Lancer">
            </div>
            <div class="car-details">
              <div class="car-detail-line"><span data-fr="Valeur initiale: " data-en="Initial Value: ">Valeur initiale:
                </span><span id="value2">0$</span></div>
              <div class="car-detail-line"><span data-fr="Transmission: " data-en="Transmission: ">Transmission:
                </span><span id="transmission2">-</span></div>
              <div class="car-detail-line"><span data-fr="Puissance: " data-en="HP: ">Puissance: </span><span id="hp2">0
                  HP</span></div>
              <div class="car-detail-line"><span data-fr="Poids: " data-en="Weight: ">Poids: </span><span
                  id="weight2">0kg</span></div>
            </div>
          </div>
        </div>
      </div>

      <!-- Colonne droite: Statistiques -->
      <div class="stats-column">
        <div class="stats-grid">
          <div class="stat">
            <div class="stat-label" data-fr="VITESSE" data-en="SPEED">VITESSE</div>
            <div class="stat-bars" id="speedBars">
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
            </div>
          </div>

          <div class="stat">
            <div class="stat-label" data-fr="MANIABILITÉ" data-en="HANDLING">MANIABILITÉ</div>
            <div class="stat-bars" id="handlingBars">
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
            </div>
          </div>

          <div class="stat">
            <div class="stat-label" data-fr="FREINAGE" data-en="BRAKING">FREINAGE</div>
            <div class="stat-bars" id="brakeBars">
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
            </div>
          </div>

          <div class="stat">
            <div class="stat-label" data-fr="STYLE" data-en="STYLE">STYLE</div>
            <div class="stat-bars" id="styleBars">
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
              <div class="stat-bar-segment"></div>
            </div>
          </div>
        </div>

        <!-- Particules de poussière réalistes -->
        <div class="dust-particles">
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
          <div class="dust-particle"></div>
        </div>
      </div>
      <div class="copyright-footer" data-fr="Slaizen Archive © 2025-2026. Tout droit réservé."
        data-en="Slaizen Archive © 2025-2026. All rights reserved.">
        Slaizen Archive © 2025-2026. Tout droit réservé.
      </div>
    </div>
  </div>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                                       ██ AI JAVASCRIPT OUTPUT ██                                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
  <script>
    // Données des véhicules de Slaizen
    const cars = [
      {
        name: 'MAZDA MX-3',
        year: 1995,
        labelFr: '[Premier véhicule]',
        labelEn: '[First Vehicle]',
        value: '600$ CAD',
        transmissionFr: 'Manuelle',
        transmissionEn: 'Manual',
        hp: 136,
        weight: '1115kg',
        colorFr: '<span style="text-decoration: line-through;">Noir</span> Bleu',
        colorEn: '<span style="text-decoration: line-through;">Black</span> Blue',
        themeColor: '#00ffff',
        themeColorRgb: '0, 255, 255',
        stats: {
          speed: 4,
          handling: 3.5,
          brake: 3,
          style: 4
        }
      },
      {
        name: 'MAZDA 6',
        year: 2005,
        labelFr: '[Second véhicule]',
        labelEn: '[Second Vehicle]',
        value: '1000$ CAD',
        transmissionFr: 'Automatique',
        transmissionEn: 'Automatic',
        hp: 170,
        weight: '1450kg',
        colorFr: 'Noir',
        colorEn: 'Black',
        themeColor: '#ff6600',
        themeColorRgb: '255, 102, 0',
        stats: {
          speed: 3,
          handling: 4,
          brake: 4,
          style: 3
        }
      },
      {
        name: 'MITSUBISHI LANCER',
        year: 2009,
        labelFr: '[Véhicule actuel]',
        labelEn: '[Current Vehicle]',
        value: '3000$ CAD',
        transmissionFr: 'Manuelle',
        transmissionEn: 'Manual',
        hp: 152,
        weight: '1325kg',
        colorFr: 'Gris',
        colorEn: 'Grey',
        themeColor: '#9900ff',
        themeColorRgb: '153, 0, 255',
        stats: {
          speed: 4,
          handling: 4,
          brake: 2.5,
          style: 4
        }
      }
    ];

    let currentCarIndex = 0;

    // Éléments DOM
    const carSlots = document.querySelectorAll('.car-slot');
    const carLabel = document.getElementById('carLabel');
    const carName = document.getElementById('carName');
    const carYear = document.getElementById('carYear');
    const prevBtn = document.getElementById('prevBtnSelector');
    const nextBtn = document.getElementById('nextBtnSelector');

    // Barres de stats (nouvelle version avec segments)
    const speedBars = document.getElementById('speedBars');
    const handlingBars = document.getElementById('handlingBars');
    const brakeBars = document.getElementById('brakeBars');
    const styleBars = document.getElementById('styleBars');

    // Mettre à jour les détails des voitures
    function updateCarDetails() {
      const isEn = window.i18n && window.i18n.getLang() === 'en';
      cars.forEach((car, index) => {
        document.getElementById(`value${index}`).textContent = car.value;
        document.getElementById(`transmission${index}`).textContent = isEn ? car.transmissionEn : car.transmissionFr;
        document.getElementById(`hp${index}`).textContent = car.hp + ' HP';
        document.getElementById(`weight${index}`).textContent = car.weight;
      });
    }

    // Son
    function playBeep() {
      const audioContext = new (window.AudioContext || window.webkitAudioContext)();
      const oscillator = audioContext.createOscillator();
      const gainNode = audioContext.createGain();

      oscillator.connect(gainNode);
      gainNode.connect(audioContext.destination);

      oscillator.frequency.value = 600;
      oscillator.type = 'square';

      gainNode.gain.setValueAtTime(0.2, audioContext.currentTime);
      gainNode.gain.exponentialRampToValueAtTime(0.01, audioContext.currentTime + 0.1);

      oscillator.start(audioContext.currentTime);
      oscillator.stop(audioContext.currentTime + 0.1);
    }

    // SYSTÈME SIMPLE : positionner les voitures dans la grille
    function updateDisplay() {
      // Retirer toutes les classes de position
      carSlots.forEach(slot => {
        slot.classList.remove('active', 'position-center');
      });

      // Afficher uniquement la voiture sélectionnée au centre
      carSlots.forEach((slot, index) => {
        if (index === currentCarIndex) {
          slot.classList.add('active', 'position-center');
        } else {
          slot.classList.remove('active', 'position-center');
        }
      });

      // Mettre à jour le sélecteur d'images
      const selectorItems = document.querySelectorAll('.car-selector-item');
      selectorItems.forEach((item, index) => {
        if (index === currentCarIndex) {
          item.classList.add('active');
        } else {
          item.classList.remove('active');
        }
      });

      // Mettre à jour les infos
      const car = cars[currentCarIndex];
      const isEn = window.i18n && window.i18n.getLang() === 'en';

      carLabel.textContent = isEn ? car.labelEn : car.labelFr;
      carName.textContent = car.name;
      carYear.textContent = car.year;

      // Gérer l'affichage du logo
      const carLogo = document.getElementById('carLogo');
      if (car.name.includes('MX-3')) {
        carLogo.src = 'logo_mazda-old.webp';
        carLogo.style.display = 'block';
        carLogo.classList.add('show');
      } else if (car.name.includes('MAZDA')) {
        carLogo.src = 'logo_mazda.webp';
        carLogo.style.display = 'block';
        carLogo.classList.add('show');
      } else if (car.name.includes('MITSUBISHI')) {
        carLogo.src = 'logo_mitsubishi.webp';
        carLogo.style.display = 'block';
        carLogo.classList.add('show');
      } else {
        carLogo.style.display = 'none';
        carLogo.classList.remove('show');
      }

      // Changer la couleur du thème
      document.documentElement.style.setProperty('--theme-color', car.themeColor);
      document.documentElement.style.setProperty('--theme-color-rgb', car.themeColorRgb);

      updateStats(car.stats);

      // Mettre à jour les flèches
      if (currentCarIndex === 0) {
        prevBtn.classList.add('disabled');
      } else {
        prevBtn.classList.remove('disabled');
      }

      if (currentCarIndex === cars.length - 1) {
        nextBtn.classList.add('disabled');
      } else {
        nextBtn.classList.remove('disabled');
      }
    }

    // Mettre à jour les stats avec le système de petites barres (valeurs de 1 à 5)
    function updateStats(stats) {
      // Fonction pour activer les barres instantanément
      function activateBars(container, count) {
        const segments = container.querySelectorAll('.stat-bar-segment');
        segments.forEach((segment, index) => {
          if (index < count) {
            segment.classList.add('active');
          } else {
            segment.classList.remove('active');
          }
        });
      }

      // Activer les barres pour chaque stat instantanément
      activateBars(speedBars, stats.speed);
      activateBars(handlingBars, stats.handling);
      activateBars(brakeBars, stats.brake);
      activateBars(styleBars, stats.style);
    }

    // Changer de voiture
    function changeCar(direction) {
      if (direction === 'next' && currentCarIndex < cars.length - 1) {
        if (window.triggerSfx) window.triggerSfx('navigation');
        currentCarIndex++;
        updateDisplay();
      } else if (direction === 'prev' && currentCarIndex > 0) {
        if (window.triggerSfx) window.triggerSfx('navigation');
        currentCarIndex--;
        updateDisplay();
      }
    }

    // Navigation
    prevBtn.addEventListener('click', () => changeCar('prev'));
    nextBtn.addEventListener('click', () => changeCar('next'));

    // Cliquer sur une voiture (dans le viewer)
    carSlots.forEach((slot, index) => {
      slot.addEventListener('click', () => {
        if (!cars[index]) return;

        // Redirection vers la page dédiée du Mitsubishi Lancer
        if (cars[index].name === 'MITSUBISHI LANCER') {
          if (window.triggerSfx) window.triggerSfx('select');
          window.location.href = 'mitsubishilancer.html';
        } else if (index !== currentCarIndex) {
          if (window.triggerSfx) window.triggerSfx('navigation');
          currentCarIndex = index;
          updateDisplay();
        }
      });
    });

    // Cliquer sur les images du sélecteur
    const selectorItems = document.querySelectorAll('.car-selector-item');
    selectorItems.forEach((item, index) => {
      item.addEventListener('click', () => {
        if (!cars[index]) return;

        // Redirection vers la page dédiée du Mitsubishi Lancer
        if (cars[index].name === 'MITSUBISHI LANCER') {
          if (window.triggerSfx) window.triggerSfx('select');
          window.location.href = 'mitsubishilancer.html';
        } else if (index !== currentCarIndex) {
          if (window.triggerSfx) window.triggerSfx('navigation');
          currentCarIndex = index;
          updateDisplay();
        }
      });
    });

    // Clavier
    document.addEventListener('keydown', (e) => {
      if (e.key === 'ArrowLeft') {
        changeCar('prev');
      } else if (e.key === 'ArrowRight') {
        changeCar('next');
      } else if (e.key === 'Enter' || e.key === ' ') {
        // Redirection vers la page dédiée du Mitsubishi Lancer
        if (cars[currentCarIndex].name === 'MITSUBISHI LANCER') {
          window.location.href = 'mitsubishilancer.html';
        } else {
          alert('Voiture sélectionnée : ' + cars[currentCarIndex].name);
        }
      }
    });

    // Initialiser immédiatement
    updateDisplay();
    updateCarDetails();
    updateStats(cars[0].stats);

    // Écouter les changements de langue pour re-méditer les éléments JS
    document.addEventListener('languageChanged', () => {
      updateDisplay();
      updateCarDetails();
    });
  </script>

  <!-- Scripts de tracking des vues de page -->
  <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/tracking.js"></script>

  <!-- Chargeurs (centralisés sur index.html) -->

  <!-- Scripts d'authentification et notifications -->
  <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/profiles.js"></script>
  <script src="../coreSystem/profiles-config.js"></script>
  <script src="../coreSystem/i18n.js"></script>
  <script src="../coreSystem/app.js"></script>
  <script src="garage-common.js"></script>

</body>

</html>
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║                      ██ FIRST CREATED: 2025-01-11 ██ LAST UPDATED: 2026-??-?? ██                      ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ INTRUSION DETECTED ██                                                                              ║    
    ║ ██ UNAUTHORIZED ACCESS ATTEMPT LOGGED ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝-->
<!--╔═══════════════════════════════════════════════════════════════════════════════════════════════════════╗    
    ║ ██ TERMINATING CONNECTION ██                                                                          ║    
    ║ ██ DISCONNECTING FROM SLAIZEN.COM ██                                                                  ║    
    ║ ██ CONNECTION CLOSED ██                                                                               ║    
    ║                                                                                                       ║    
    ║ ██ YOU ARE NOW LEAVING THE UNDER-GRID ██                                                              ║    
    ╚═══════════════════════════════════════════════════════════════════════════════════════════════════════╝    
  ███████ ██       █████  ██ ███████ ███████ ███    ██     ██    ███ ███████ ███████ ██  █████       ██ ███████  
  ██      ██      ██   ██ ██    ███  ██      ████   ██     ██   ████      ██  ███    ██ ██   ██      ██      ██  
  ███████ ██      ███████ ██   ███   █████   ██ ██  ██     ██  ██ ██   █████   ███   ██ ███████      ██ ███████  
       ██ ██      ██   ██ ██  ███    ██      ██  ██ ██     ██ ██  ██      ██    ███  ██ ██   ██      ██ ██       
  ███████ ███████ ██   ██ ██ ███████ ███████ ██   ████     ████   ██ ███████ ███████ ██ ██   ██ ███████ ███████  
-->