body, html {
            margin: 0;
            padding: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            background-color: #000;
            display: block;
            justify-content: center;
            align-items: center;

        }

  #bandeau {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 50px;
    background: black;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-bottom: 3px solid #00FF00;
  }

  #bandeau_bottom {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    height: 50px;
    color: #FFF;
    background: black;
    z-index: 1000;
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0 10px;
    border-top: 3px solid #00FF00;
  }

#bandeau_bottom .centered-text {
    flex-grow: 1; /* Permet au texte de prendre l'espace restant */
    text-align: center; /* Centre le texte horizontalement dans cet espace */
}

  /* Icônes des liens */
 .logo_lien {
            width: 40px;
            height: 60px;
 }

.discord_lien{
           object-fit: cover;
           overflow: hidden;
           border-radius: 50%;
           border: 3px solid #8e44ad;
           padding: 0;
           margin: 0;
           width: 30px;
}

#bandeau a:last-child {
    margin-right: 20px; /* Ajoute une marge à droite */
  }
        /* Image de fond pleine page */
        #background-image {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            object-fit: cover;
            z-index: 0;
            opacity: 1;
        }

        /* Iframe pour charger accueil.html */
        #background-iframe {
            position: fixed;
            top: 0;
            left: 0;
            bottom: 0;
            width: 100%;
            height: 100%;
            border: none;
            z-index: 0;
            opacity: 1;
        }

        .half {
            position: fixed;
            top: 0;
            width: 50%;
            height: 100%;
            transition: transform 2s ease;
            z-index: 1;
            background-color: black;
            display: flex;
            justify-content: center; /* For horizontal centering */
            align-items: flex-start; /* Aligns to the top */
        }

        /* For the script containers */
        .terminal-blue {
            font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
            font-size: 1.2rem;
            color: #00BFFF;
            background-color: #000;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); /* Lumière douce */
            padding: 20px;
            line-height: 1.6;
            overflow: auto;
            white-space: pre-wrap;
            text-align: left;
            max-width: 40%; /* Adjust as needed */
            margin-top: 70px; /* This ensures a 30px margin from the top */
            margin-right: auto; /* Center horizontally */
            margin-left: auto;
        }

        /* For the script containers */
        .terminal-pink {
            font-family: 'Fira Code', 'Consolas', 'Courier New', monospace;
            font-size: 1.2rem;
            color: #FF1493;
            background-color: #000;
            border-radius: 8px;
            box-shadow: 0 0 30px rgba(255, 255, 255, 0.8); /* Lumière douce */
            padding: 20px;
            line-height: 1.6;
            overflow: auto;
            white-space: pre-wrap;
            /* Center text within these elements */
            text-align: left;
            /* Optional: max-width */
            max-width: 70%; /* Adjust as needed */
            margin-top: 60px; /* Center the element itself within its container */
            margin-right: auto;
            margin-left: auto;
             position: relative;
    top: 40px;
        }

        #left-half.hidden, #right-half.hidden {
            display: none; /* Cache les panneaux lorsqu'ils sont "hidden" */
        }

        #left-half {
            left: 0;
            transform: translateX(0);
            border-right: 4px solid #FFF; /* Trait vert fluo */
            max-width: calc(70% - 20px);
            background-size: cover;
            background-image: url('image/part1.jpg');
            background-position: right center; /* Centre l'image */
            background-repeat: no-repeat;
        }

        #right-half {
            right: 0;
            transform: translateX(0);
            border-left: 4px solid #FFF; /* Trait vert fluo */
            max-width: calc(70% - 20px);
            background-size: cover;
            background-image: url('image/part2.jpg');
            background-position: left center; /* Centre l'image */
            background-repeat: no-repeat;
        }

        /* Animation pour ouvrir les panneaux */
        body.open #left-half {
            transform: translateX(-100%);
            display: block;
        }

        body.open #right-half {
            transform: translateX(100%);
            display: block;
        }

        /* Carré central (logo déclencheur) */
        #trigger {
            background-image: url('image.png');
            background-size: cover;
            background-position: center;
            cursor: pointer;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 2;
            border: 4px solid #FFF; /* Contour vert fluo */
            border-radius: 10%;
            box-sizing: border-box;
            animation: pulse 2s infinite, glow 2s infinite;

            /* Taille par défaut (pour PC) */
            width: 200px;
            height: 200px;
        }

        @keyframes pulse {
            0%, 100% {
                opacity: 1;
            }
            50% {
                opacity: 1;
            }
        }

        @keyframes glow {
            0%, 100% {
                box-shadow: 0 0 10px #00FF00, 0 0 20px #00FF00, 0 0 40px #00FF00;
            }
            50% {
                box-shadow: 0 0 20px #00FF00, 0 0 30px #00FF00, 0 0 40px #00FF00;
            }
        }

        /* Champ mot de passe */
        #password-container {
            display: none;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            z-index: 3;
            background-color: black;
            padding: 20px;
            border: 2px solid #FFF;
            box-sizing: border-box;
            width: 200px;
            text-align: center;
        }

        #password {
            width: 100%;
            background-color: black;
            color: #FFF;
            border: 1px solid #fff;
            padding: 10px;
            font-family: monospace;
            font-size: 16px;
            outline: none;
            box-sizing: border-box;
        }

        .panel-image {
            position: absolute;
            bottom: 100px; /* Ajustez cette valeur pour positionner les images */
            left: 0;
            right: 0;
            margin: auto;
            max-width: 90%; /* Pour les grands écrans */
            max-height: 30%;
            width: auto;
            height: auto;
            border: 2px solid #FFF;
            border-radius: 10%;
        }

        #left-half .panel-image {
            #display: none;
            border-color: #FFF;
            box-shadow: 0 0 10px #00BFFF, 0 0 20px #00BFFF, 0 0 30px #00BFFF;
        }

        #right-half .panel-image {
            display: none;
            border-color: #FFF;
            box-shadow: 0 0 10px #FF1493, 0 0 20px #FF1493, 0 0 30px #FF1493;
        }

        /* Pour les écrans de taille moyenne (entre 767px et 1280px) */
        @media (min-width: 768px) and (max-width: 1950px) {
            /* Ajustement de la taille du logo */
            #trigger {
                width: 150px; /* Logo un peu plus grand */
                height: 150px; /* Garder la proportion du logo */
            }

            /* Ajustement des images */
            .panel-image {
                max-width: 60%; /* Un peu plus large que sur les smartphones */
                max-height: 30%; /* Pour ne pas trop perdre en hauteur */
            }

            /* Taille du texte pour les terminaux */
            .terminal-blue, .terminal-pink {
                font-size: 1rem; /* Augmenter la taille du texte pour une meilleure lisibilité */
                line-height: 1.2; /* Un peu plus d'espace entre les lignes pour la lisibilité */
                max-width: 40%;
            }

            /* Espacement autour du contenu des terminales pour plus de confort */
            .terminal-blue, .terminal-pink {
                padding: 15px; /* Un peu plus d'espace autour du texte */
            }
        }

        /* Pour les écrans de smartphones */
        @media (max-width: 767px) {
            /* Taille réduite pour le logo central */
            #trigger {
                width: 100px;
                height: 100px;
            }

            /* Taille réduite des images */
            .panel-image {
                max-width: 70%; /* Réduction significative de la largeur */
                max-height: 30%; /* Réduction significative de la hauteur */
            }

            /* Taille du texte dans les terminales */
            .terminal-blue, .terminal-pink {
                font-size: 0.4rem; /* Réduction de la taille de la police */
                line-height: 1; /* Ajustement de l'espacement des lignes */
                max-width: 70%
            }

            /* Espacement autour du contenu des terminales pour plus de lisibilité */
            .terminal-blue, .terminal-pink {
                padding: 10px;
            }
        }

        #script-content-right {
            visibility: hidden; /* Masque uniquement le texte à l'intérieur */
             margin-top: 30px;
        }

        #script-content-left {
        }