* {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        body {
            font-family: 'Arial', sans-serif;
            background: linear-gradient(135deg, #0a0a0a 0%, #1a1a1a 100%);
            color: #ffffff;
            overflow-x: hidden;
            position: relative; 
        }

        .video-background {
            position: fixed; 
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            overflow: hidden;
            z-index: -2; 
            pointer-events: none; 
        }

        .video-background video {
            min-width: 100%;
            min-height: 100%;
            width: auto;
            height: auto;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            object-fit: cover; 
        }

        .container {
            min-height: 100vh;
            position: relative;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            background: rgba(0, 0, 0, 0.4); 
            z-index: 1; 
        }

        .background-pattern {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            background: 
                repeating-linear-gradient(
                    45deg,
                    transparent,
                    transparent 2px,
                    rgba(255, 255, 255, 0.02) 2px,
                    rgba(255, 255, 255, 0.02) 4px
                );
            pointer-events: none;
            z-index: -1; 
        }

        .header {
            text-align: center;
            z-index: 10;
            margin-bottom: 40px;
        }

        .logo {
            font-size: 4rem;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 
                0 0 20px rgba(255, 87, 34, 0.5),
                0 0 40px rgba(255, 87, 34, 0.3);
            margin-bottom: 10px;
            letter-spacing: 2px;
        }

        .tagline {
            font-size: 1.2rem;
            color: #ff5722;
            text-transform: uppercase;
            letter-spacing: 3px;
            margin-bottom: 20px;
        }

        .subtitle {
            font-size: 3rem;
            font-weight: bold;
            color: #ffffff;
            text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.8);
            margin-bottom: 20px;
        }

        .description {
            font-size: 1rem;
            color: #cccccc;
            text-transform: uppercase;
            letter-spacing: 2px;
            margin-bottom: 10px;
        }

        .navigation {
            display: flex;
            gap: 20px;
            flex-wrap: wrap;
            justify-content: center;
            z-index: 10;
        }

        .nav-button {
            background: linear-gradient(45deg, #2c2c2c30, #3c3c3c);
            border: 2px solid #555;
            color: #ffffff;
            padding: 15px 25px;
            font-size: 0.9rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .nav-button::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(225, 46, 109, 0.3), transparent);
            transition: left 0.5s;
        }

        .nav-button:hover::before {
            left: 100%;
        }

        .nav-button:hover {
            border-color: #e12e6d;
            box-shadow: 
                0 0 20px rgba(225, 46, 109, 0.5),
                inset 0 0 20px rgba(225, 46, 109, 0.1);
            transform: translateY(-2px);
        }

        .character-silhouette {
            width: 300px;
            height: 500px;
            background: 
                radial-gradient(circle at 30% 20%, rgba(225, 46, 109, 0.8) 0%, transparent 50%),
                radial-gradient(circle at 70% 40%, rgba(255, 193, 7, 0.6) 0%, transparent 50%),
                linear-gradient(45deg, #333, #555);
            clip-path: polygon(
                40% 0%, 60% 0%, 65% 15%, 70% 30%, 75% 45%, 
                80% 60%, 75% 75%, 70% 85%, 60% 95%, 40% 95%, 
                30% 85%, 25% 75%, 20% 60%, 25% 45%, 30% 30%, 
                35% 15%
            );
            position: relative;
        }

        .weapon-accent {
            position: absolute;
            top: 20%;
            right: -20px;
            width: 60px;
            height: 200px;
            background: linear-gradient(45deg, #ff5722, #ff9800);
            clip-path: polygon(20% 0%, 80% 0%, 100% 100%, 0% 100%);
            box-shadow: 0 0 20px rgba(225, 46, 109, 0.7);
        }

        .floating-particles {
            position: absolute;
            top: 0;
            left: 0;
            width: 100%;
            height: 100%;
            pointer-events: none;
            overflow: hidden;
            z-index: 0; 
        }

        .particle {
            position: absolute;
            width: 2px;
            height: 2px;
            background: #00a5ab;
            animation: float 6s linear infinite;
        }

        @keyframes float {
            0% {
                transform: translateY(100vh) rotate(0deg);
                opacity: 0;
            }
            10% {
                opacity: 1;
            }
            90% {
                opacity: 1;
            }
            100% {
                transform: translateY(-100px) rotate(360deg);
                opacity: 0;
            }
        }

        .separator {
            width: 80%;
            height: 2px; 
            background: linear-gradient(to right, transparent, #ffffff, transparent); 
            border: none;
            margin: 35px auto;
            opacity: 0.5;
            box-shadow: 0 0 15px rgba(255, 87, 34, 0.5); 
            z-index: 10; 
        }

        @media (max-width: 768px) {
            .logo {
                font-size: 2.5rem;
            }
            
            .subtitle {
                font-size: 2rem;
            }
            
            .navigation {
                flex-direction: column;
                align-items: center;
            }
            
            .nav-button {
                width: 250px;
            }

            .separator {
                margin: 40px auto;
            }
        }

        .nav-buttontos {
            background: linear-gradient(45deg, #2c2c2c30, #3c3c3c);
            border: 2px solid #555;
            color: #ffffff;
            padding: 5px 15px;
            font-size: 0.9rem;
            font-weight: bold;
            text-transform: uppercase;
            letter-spacing: 1px;
            cursor: pointer;
            transition: all 0.3s ease;
            position: relative;
            overflow: hidden;
        }

        .nav-buttontos::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(45deg, transparent, rgba(225, 46, 109, 0.3), transparent);
            transition: left 0.5s;
        }

        .nav-buttontos:hover::before {
            left: 100%;
        }

        .nav-buttontos:hover {
            border-color: #e12e6d;
            box-shadow: 
                0 0 20px rgba(225, 46, 109, 0.5),
                inset 0 0 20px rgba(225, 46, 109, 0.1);
            transform: translateY(-2px);
        }

        .calendar-modal {
            display: none; /* Caché par défaut */
            position: fixed; /* Reste en place même au défilement */
            z-index: 100; /* Plus élevé que tout le reste pour être au premier plan */
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            overflow: auto; /* Permet le défilement si le contenu est trop grand */
            background-color: rgba(0, 0, 0, 0.8); /* Fond semi-transparent sombre */
            justify-content: center; /* Centre le contenu horizontalement */
            align-items: center; /* Centre le contenu verticalement */
            /* Ajout pour l'animation */
            opacity: 0;
            transform: scale(0.9);
            transition: opacity 0.2s ease-out, transform 0.2s ease-out;
        }

        .calendar-modal.is-visible {
            opacity: 1;
            transform: scale(1);
        }

        .calendar-content {
            background-color: #222; /* Fond sombre du cadre du calendrier */
            margin: auto; /* Centre la boîte modale */
            padding: 20px;
            border: 1px solid #444;
            width: 80%; /* Largeur de la boîte du calendrier, ajustez au besoin */
            max-width: 800px; /* Largeur maximale */
            box-shadow: 0 5px 15px rgba(0, 0, 0, 0.6);
            position: relative; /* Pour positionner le bouton de fermeture */
            border-radius: 8px; /* Bords légèrement arrondis */
            overflow: hidden; /* Pour gérer le contenu interne */
            /* L'animation de la modale est appliquée au parent, mais on peut ajouter une légère transition si besoin */
            transition: transform 0.3s ease-out;
        }

        .calendar-header {
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-bottom: 1px solid #444; /* Ligne de séparation sous le titre */
            padding-bottom: 10px;
            margin-bottom: 20px;
        }

        .calendar-title {
            color: #fefefe; /* Couleur du titre */
            font-size: 1.8rem;
            font-weight: bold;
            letter-spacing: 2px;
            margin: 0; /* Supprime les marges par défaut */
        }

        .close-button {
            color: #aaa;
            font-size: 2.5rem;
            font-weight: bold;
            cursor: pointer;
            transition: color 0.3s ease;
        }

        .close-button:hover,
        .close-button:focus {
            color: #fff;
            text-decoration: none;
        }

        /* Styles pour l'iframe Google Calendar */
        .google-calendar-iframe {
            width: 100%; /* L'iframe prend toute la largeur disponible dans son conteneur */
            height: 600px; /* Ajustez la hauteur selon l'espace désiré */
            border: none; /* Pas de bordure par défaut de l'iframe */
            background-color: #1a1a1a; /* Couleur de fond de l'iframe si le calendrier ne couvre pas tout */
        }

        /* Responsive adjustments */
        @media (max-width: 800px) {
            .calendar-content {
                width: 95%; /* Plus large sur les petits écrans */
                padding: 15px;
            }

            .calendar-title {
                font-size: 1.5rem;
            }

            .close-button {
                font-size: 2rem;
            }
        }

        @media (max-width: 600px) {
            .google-calendar-iframe {
                height: 450px; /* Réduire la hauteur sur les très petits écrans */
            }
        }

/* Styles spécifiques pour le contenu de la liste des serveurs */
        .server-list-content {
            color: #ccc;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .server-list-content ul {
            list-style: none;
            padding: 0;
            margin-top: 20px;
        }

        .server-list-content li {
            display: flex; /* Utiliser flexbox pour aligner les éléments */
            align-items: center; /* Centrer verticalement */
            flex-wrap: wrap; /* Permet aux éléments de passer à la ligne sur petits écrans */
            background-color: #333;
            padding: 10px 15px;
            margin-bottom: 10px;
            border-radius: 5px;
            border-left: 3px solid #e12e6d;
            box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
            justify-content: space-between; /* Distribue l'espace entre le texte/IP et les icônes */
        }

        /* Groupement du texte et de l'IP pour le pousser à gauche si nécessaire */
        .server-info-left {
            display: flex;
            align-items: center;
            flex-wrap: wrap;
        }

        /* Conteneur des icônes - le rendre flex pour aligner les icônes entre elles */
        .server-list-content li > div:last-child { /* Cible le div qui contient les icônes */
            display: flex;
            align-items: center;
            /* Aucun espace ici car justify-content: space-between gère déjà la séparation */
        }

        .server-list-content .ip-address {
            margin-left: 5px; /* Espace entre le texte et l'IP */
            white-space: nowrap; /* Empêche l'IP de se couper */
            margin-right: 15px; /* Ajoutez un peu plus d'espace entre l'IP et le groupe d'icônes */
        }

        .copy-icon {
            color: #ffffff; /* Couleur des icônes */
            cursor: pointer;
            /* Pas de marge à gauche pour la première icône du groupe */
            transition: color 0.2s ease, transform 0.2s ease;
            font-size: 0.9em; /* Légèrement plus petit que le texte environnant */
        }

        .external-link-icon {
            color: #ffffff; /* Couleur des icônes */
            cursor: pointer;
            margin-left: 8px; /* Petite marge entre l'icône de copie et l'icône de lien externe */
            transition: color 0.2s ease, transform 0.2s ease;
            font-size: 0.9em; /* Légèrement plus petit que le texte environnant */
        }

        .copy-icon:hover,
        .external-link-icon:hover {
            color: #e12e6d; /* Changement de couleur au survol */
            transform: scale(1.1); /* Léger agrandissement au survol */
        }

        .server-list-content a {
            text-decoration: none; /* Supprime le soulignement du lien */
            color: inherit; /* Hérite de la couleur du parent */
            display: flex; /* S'assure que le lien lui-même est un flex item si besoin */
            align-items: center;
        }

        .server-list-content li strong {
            color: #fff;
            font-size: 1.2rem;
            display: block;
            margin-bottom: 5px;
        }

        .server-list-content p {
            margin-bottom: 15px;
        }

        /* Styles pour le texte "Copied!" flottant */
        .copied-feedback {
            position: absolute;
            background-color: #00a5ab; /* Couleur de fond */
            color: white;
            padding: 5px 10px;
            border-radius: 5px;
            font-size: 0.8em;
            opacity: 0; /* Caché par défaut */
            transform: translateY(0); /* Position initiale pour l'animation */
            transition: opacity 0.5s ease-out, transform 0.5s ease-out; /* Animation */
            pointer-events: none; /* Permet de cliquer à travers */
            white-space: nowrap; /* Empêche le texte de se couper */
            z-index: 10; /* S'assure qu'il est au-dessus d'autres éléments */
        }

        .copied-feedback.show {
            opacity: 1; /* Apparaît */
            transform: translateY(-20px); /* Monte de 20px */
        }

        /* Specific styles for the launch confirmation modal content */
        .launch-confirm-content {
            padding: 20px 0;
            text-align: center;
            color: #ccc;
            font-size: 1.1rem;
        }

        .launch-confirm-content p {
            margin-bottom: 15px;
        }

        #confirmIpAddress {
            font-weight: bold;
            color: #ff5722; /* Couleur orange Rust */
        }

        .launch-confirm-content .button-group {
            margin-top: 25px;
        }

        .launch-confirm-content .main-button {
            background-color: #ff5722; /* Rust-like orange */
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.3s ease;
        }

        .launch-confirm-content .main-button:hover {
            background-color: #e04e1f; /* Darker orange on hover */
        }

        /* Ensure launch confirm modal is above other modals if multiple are open */
        #launchConfirmModal {
            z-index: 101; /* Plus élevé que les autres modales (qui sont à z-index: 100) */
        }

        /* Optionnel: Styles pour le nom du serveur dans la modale de confirmation */
        .ip-address-display,
        .server-name-display {
            font-weight: bold;
            color: #ff5722; /* Même couleur que l'IP ou une autre si vous préférez */
        }

        /* Specific styles for the rules modal content */
        .rules-content {
            padding: 20px 0;
            color: #ccc;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .rules-content ul {
            list-style: disc; /* Utilise des puces rondes pour la liste */
            padding-left: 25px; /* Indente la liste */
            margin-top: 15px;
            margin-bottom: 15px;
        }

        .rules-content li {
            margin-bottom: 10px;
        }

        /* Specific styles for the shop modal content */
        .shop-content {
            padding: 20px 0;
            color: #ccc;
            font-size: 1.1rem;
            line-height: 1.6;
        }

        .shop-content h3 {
            color: #ff5722; /* Orange Rust pour les titres de section */
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.4em;
        }

        .shop-content p {
            margin-bottom: 10px;
        }

        .shop-content ul {
            list-style: none; /* Pas de puces par défaut */
            padding-left: 0;
            margin-top: 10px;
            margin-bottom: 20px;
        }

        .shop-content li {
            background-color: #444;
            padding: 8px 15px;
            margin-bottom: 8px;
            border-left: 3px solid #00a5ab; /* Bordure cyan pour les éléments de liste */
            border-radius: 3px;
        }

        .shop-content li strong {
            color: #00a5ab; /* Cyan pour les noms de rangs VIP */
        }

        .shop-button-group {
            display: flex;
            flex-wrap: wrap; /* Permet aux boutons de passer à la ligne sur petits écrans */
            justify-content: center; /* Centre les boutons horizontalement */
            gap: 15px; /* Espacement entre les boutons */
            margin-top: 30px;
            margin-bottom: 20px;
        }

        .shop-button-group .main-button {
            background-color: #ff5722; /* Couleur principale du bouton (orange Rust) */
            color: white;
            border: none;
            padding: 12px 25px;
            border-radius: 5px;
            text-decoration: none; /* Supprime le soulignement pour les liens */
            cursor: pointer;
            font-size: 1.1em;
            transition: background-color 0.3s ease;
            display: inline-block; /* Pour que padding/margin fonctionnent correctement sur un <a> */
        }

        .shop-button-group .main-button:hover {
            background-color: #e04e1f; /* Orange plus foncé au survol */
        }

        .shop-button-group .donation-button {
            background-color: #00a5ab; /* Couleur différente pour le bouton de donation (cyan) */
        }

        .shop-button-group .donation-button:hover {
            background-color: #00878c; /* Cyan plus foncé au survol */
        }

        .shop-note {
            font-size: 0.9em;
            color: #888;
            text-align: center;
            margin-top: 20px;
        }

        /* Specific styles for the legal mentions modal content */
        .legal-mentions-content {
            padding: 20px 0;
            color: #ccc;
            font-size: 1rem;
            line-height: 1.8; /* Plus d'espace pour une meilleure lisibilité */
            text-align: justify; /* Justifie le texte pour un aspect plus formel */
        }

        .legal-mentions-content h3 {
            color: #ff5722; /* Orange Rust pour les titres de section */
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.3em;
            text-align: left; /* Les titres restent alignés à gauche */
        }

        .legal-mentions-content p {
            margin-bottom: 15px;
        }

        .legal-mentions-content strong {
            color: #00a5ab; /* Cyan pour les éléments importants */
        }

        .legal-mentions-content .legal-mentions-note {
            font-size: 0.85em;
            color: #888;
            text-align: right; /* Date de mise à jour alignée à droite */
            margin-top: 30px;
        }

        /* Specific styles for the privacy policy modal content */
        .privacy-policy-content {
            padding: 20px 0;
            color: #ccc;
            font-size: 1rem;
            line-height: 1.8; /* Plus d'espace pour une meilleure lisibilité */
            text-align: justify; /* Justifie le texte */
        }

        .privacy-policy-content h3 {
            color: #ff5722; /* Orange Rust pour les titres */
            margin-top: 25px;
            margin-bottom: 15px;
            font-size: 1.3em;
            text-align: left;
        }

        .privacy-policy-content p {
            margin-bottom: 15px;
        }

        .privacy-policy-content ul {
            list-style: disc; /* Puces rondes */
            padding-left: 25px;
            margin-bottom: 15px;
        }

        .privacy-policy-content li {
            margin-bottom: 8px;
        }

        .privacy-policy-content strong {
            color: #00a5ab; /* Cyan pour l'emphase */
        }

        .privacy-policy-content .privacy-policy-note {
            font-size: 0.85em;
            color: #888;
            text-align: right; /* Date de mise à jour alignée à droite */
            margin-top: 30px;
        }