/* Corps de page */
body {
    background-image: url('Ark-accueil-images/fondark.jpg');
    background-attachment: fixed;
    background-size: cover;
    background-position: center center;
    font-family: Arial, sans-serif;
    color: #FFF;
    text-align: center;
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

/* Conteneur principal */
.page-container {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    position: relative; /* Assurer une position relative pour tout le contenu */
}

/* Bannière */
.banner {
    position: fixed;
    top: 0;
    left: 50%;
    transform: translateX(-50%);
    width: 90%;
    height: 150px;
    background: rgba(27, 59, 112, 0.8);
    z-index: 100;
    border-radius: 15px;
    box-shadow: 0 0 30px 10px rgba(70, 177, 226, 0.8);
}

/* Logos fixes et cadre Ark */
.logo-container, .discord-logo-container, .ark-image-container {
    position: fixed;
    z-index: 101; /* Au-dessus de la bannière */
}

/* Conteneur du logo Gameocracy avec halo derrière */
.logo-container {
    top: 5px;
    left: 20px;
    position: fixed; /* Fixer le logo pour qu'il ne bouge pas avec le scroll */
    z-index: 101; /* Garder le logo au-dessus de tout */
    width: 245px;
    height: auto;
}

/* Halo lumineux doré autour du logo Gameocracy */
/* Halo "au repos" en rouge */
.logo-container::before {
    content: '';
    position: absolute;
    top: -35px; /* Ajustement manuel pour centrer le halo */
    left: -35px; /* Ajustement manuel pour centrer le halo */
    width: 320px;
    height: 320px;
    background: radial-gradient(circle, rgba(247, 105, 111, 0.9), rgba(247, 105, 111, 0.6), rgba(247, 105, 111, 0.4), transparent);
    border-radius: 50%;
    z-index: -1;
    filter: blur(30px);
    opacity: 1;
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Halo blanc aveuglant au survol */
.logo-container:hover::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5), transparent);
    transform: scale(1.3); /* Agrandit le halo tout en gardant son centrage */
    filter: blur(20px); /* Maintient l’effet lumineux */
}


/* Logo Gameocracy */
.banner-logo {
    width: 245px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    position: relative;
    z-index: 1; /* Le logo reste au-dessus du halo */
}

/* Effet de survol pour agrandir légèrement le logo */
.logo-container:hover .banner-logo {
    transform: scale(1.3); /* Agrandissement au survol */
}

/* Logo Discord */
.discord-logo-container {
    position: fixed;
    top: 35px; /* Ajuste la distance par rapport au haut de la page */
    right: 20px; /* Place le logo à droite de la page */
    z-index: 101; /* Assure que le logo est au-dessus de la bannière */
}

/* Halo vert "au repos" */
.discord-logo-container::before {
    content: '';
    position: absolute;
    top: -15px; /* Ajustement manuel pour centrer le halo */
    left: -15px; /* Ajustement manuel pour centrer le halo */
    width: 240px; /* Ajusté pour encadrer le logo Discord */
    height: 240px;
    background: rgba(115, 228, 107, 0.7); /* Couleur vert lumineux */
    border-radius: 15px; /* Coin arrondi */
    z-index: -1; /* Place le halo derrière le logo */
    filter: blur(25px); /* Effet lumineux */
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Halo blanc aveuglant au survol */
.discord-logo-container:hover::before {
    background: radial-gradient(circle, rgba(255, 255, 255, 1), rgba(255, 255, 255, 0.8), rgba(255, 255, 255, 0.5), transparent);
    transform: scale(1.3); /* Agrandit le halo tout en gardant son centrage */
    filter: blur(20px); /* Maintient l’effet lumineux */
}

/* Effet d'agrandissement pour le logo Discord au survol */
.discord-logo {
    width: 210px;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.discord-logo-container:hover .discord-logo {
    transform: scale(1.3); /* Agrandit le logo au survol */
}

/* Cadre central Ark accueil avec un halo noir opaque qui se dégrade */
.ark-image-container {
    top: 40px; /* Garder la distance actuelle par rapport au haut de la page */
    left: 50%;
    transform: translateX(-50%);
    width: 340px; /* Largeur fixée à 340px */
    height: 190px; /* Hauteur fixée à 190px */
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
    border-radius: 15px; /* Angles arrondis */
    padding: 20px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.8), /* Opaque au bord */
                0 0 40px 40px rgba(0, 0, 0, 0); /* Devenir invisible à 20px */
    transition: transform 0.3s ease, filter 0.3s ease;
}

.ark-image {
    width: 100%;
    height: 100%;
    border-radius: 15px;
    object-fit: contain; /* S'assurer que l'image reste bien dans le cadre sans déborder */
}

/* Appliquer la taille de 340x190px aux cadres de maps */
.map-frame {
    width: 340px;
    height: 190px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.8), /* Halo opaque au bord */
                0 0 40px 40px rgba(0, 0, 0, 0); /* Gradient vers transparent */
    transition: transform 0.3s ease, filter 0.3s ease;
}

/* Ajustement des images pour qu'elles restent proportionnelles à l'intérieur du cadre */
.map-image {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* S'assurer que l'image ne dépasse pas le cadre et garde ses proportions */
    border-radius: 15px;
}

/* Cadres de texte placés sous les maps */
.map-text {
    width: 340px; /* Même largeur que le cadre de map */
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    text-align: center;
    padding: 10px; /* Assurer une hauteur fixe pour 2 lignes de texte */
    margin-top: 20px; /* 20px sous le cadre de map */
    margin-bottom: 60px; /* 60px entre les ensembles map+texte */
    border-radius: 15px;
    box-shadow: 0 0 30px 10px rgba(70, 177, 226, 0.8);
    position: relative; /* Fixer chaque cadre de texte indépendamment */
}

/* Chaque cadre est positionné individuellement sur la page, sans affecter les autres */
#map-theisland { top: 200px; left: 100px; }
#map-thecenter { top: 200px; right: 100px; }
#map-scorchedearth { top: 500px; left: 100px; }
#map-ragnarok { top: 500px; right: 100px; }
/* Ajout des autres maps ici */

/* Texte de chaque map - deux lignes pour le nom et l'IP */
.map-text p {
    margin: 0;
    padding: 0;
}

.map-text p:first-child {
    font-weight: bold;
    font-size: 1.1em;
}

.map-text p:last-child {
    font-size: 0.9em;
}

/* Texte "Gameocracy Cluster Ark Vanilla" */
.banner-text {
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    text-align: center;
    padding: 0.5em 1em;
    margin: 300px auto 20px auto; /* Restaurer à 300px de la bannière */
    width: 90%;
    border-radius: 15px;
    box-shadow: 0 0 30px 10px rgba(70, 177, 226, 0.8);
}

/* Cadres de maps et colonnes - Disposition en deux colonnes */
.map-columns {
    display: flex;
    justify-content: space-between;
    width: 90%;
    margin: 0 auto;
}

.map-column {
    display: flex;
    flex-direction: column;
    width: 30%;
}

.phantom-column {
    width: 30%;
}

.map-frame-container {
    display: flex;
    flex-direction: column; /* Aligne les cadres de map et de texte verticalement */
    align-items: center;
    margin-bottom: 60px; /* Espace entre chaque ensemble map+texte */
}

.map-frame {
    width: 340px;
    height: 190px;
    background-color: rgba(0, 0, 0, 0.8);
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.8);
}

.map-text {
    width: 340px;
    background: rgba(0, 0, 0, 0.8);
    color: #FFF;
    text-align: center;
    padding: 10px;
    margin-top: 20px; /* Assure que le texte soit juste en dessous de l'image */
    border-radius: 15px;
    box-shadow: 0 0 30px 10px rgba(70, 177, 226, 0.8);
}

/* Cadres de maps de la colonne de gauche avec halo noir au repos */
.left-column .map-frame {
    width: 340px;
    height: 190px;
    background-color: transparent; /* Fond transparent */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 1), /* Halo noir vif */
                0 0 40px 40px rgba(0, 0, 0, 0); /* Gradient vers transparent */
    transition: box-shadow 0.3s ease;
}

/* Cadres de maps de la colonne de droite avec halo noir au repos */
.right-column .map-frame {
    width: 340px;
    height: 190px;
    background-color: transparent; /* Fond transparent */
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 1), /* Halo noir vif */
                0 0 40px 40px rgba(0, 0, 0, 0); /* Gradient vers transparent */
    transition: box-shadow 0.3s ease;
}

/* Au survol : halo rouge pour les maps de la colonne de gauche */
.left-column .map-frame:hover {
    box-shadow: 0 0 20px 20px rgba(247, 105, 111, 0.8), /* Halo rouge */
                0 0 40px 40px rgba(247, 105, 111, 0); /* Gradient vers transparent */
}

/* Au survol : halo vert pour les maps de la colonne de droite */
.right-column .map-frame:hover {
    box-shadow: 0 0 20px 20px rgba(115, 228, 107, 0.8), /* Halo vert */
                0 0 40px 40px rgba(115, 228, 107, 0); /* Gradient vers transparent */
}

/* Style général des boutons de texte de map avec halo */
.map-text-button {
    display: block;
    text-decoration: none; /* Retire le soulignement */
}

.map-text-button .map-text {
    width: 340px;
    background: rgba(0, 0, 0, 0.8); /* Fond noir transparent */
    color: #FFF;
    text-align: center;
    padding: 10px;
    margin-top: 20px;
    border-radius: 15px;
    box-shadow: 0 0 20px 10px rgba(70, 177, 226, 0.8), /* Halo bleu */
                0 0 40px 40px rgba(70, 177, 226, 0); /* Gradient vers transparent */
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    cursor: pointer;
}

/* Effet de survol pour les halos avec agrandissement et halo éblouissant */
.map-text-button:hover .map-text {
    transform: scale(1.1); /* Agrandissement */
    box-shadow: 0 0 30px 15px rgba(255, 255, 255, 1), /* Halo blanc éblouissant */
                0 0 60px 30px rgba(255, 255, 255, 0.5),
                0 0 80px 50px rgba(255, 255, 255, 0);
}

/* cadres de la colonne centrale */
.map-column.phantom-column .map-frame-container {
    margin: 20px auto; /* Centrage du cadre */
    text-align: center;
}

.map-column.phantom-column .map-frame img {
    max-width: 100%;
    border-radius: 15px; /* Ajuste selon le style des autres cadres */
}

.map-column.phantom-column .map-text-button {
    display: block;
    text-decoration: none;
    color: inherit;
}

.map-column.phantom-column .map-text p {
    margin: 5px 0;
    font-size: 1rem;
}
/* Forcer la disposition en colonne pour la colonne centrale */
.map-column.phantom-column {
    display: flex;
    flex-direction: column; /* Disposition verticale */
    align-items: center; /* Centrer horizontalement */
    gap: 30px; /* Espacement entre les cadres */
}

/* Corriger l'apparence des cadres */
.map-frame-container {
    width: 100%; /* Ajuster la largeur pour éviter les débordements */
    margin: 0 auto; /* Centrer le cadre */
    text-align: center;
}

/* Boutons de téléchargement */
.download-buttons {
    display: flex;
    justify-content: center;
    gap: 10px; /* Espacement entre les boutons */
    margin-top: 10px;
}

.download-button {
    max-width: 150px;
    height: auto;
    transition: transform 0.3s ease;
}

.download-button:hover {
    transform: scale(1.1);
}
/* Boutons de téléchargement */
/* Conteneur des boutons */
.download-buttons {
    display: flex;
    justify-content: center; /* Centre les boutons horizontalement */
    gap: 15px; /* Uniformise l'espacement entre les boutons */
    margin-top: 15px; /* Ajoute un espace au-dessus */
}

/* Styles des images des boutons */
.download-button {
    width: 150px; /* Largeur fixe */
    height: auto; /* Hauteur proportionnelle */
    object-fit: contain; /* Conserve les proportions originales */
    display: block; /* Évite tout chevauchement ou comportement inattendu */
    transition: transform 0.3s ease; /* Effet de survol */
}

.download-button:hover {
    transform: scale(1.1); /* Légère augmentation au survol */
}
/* Isolation des styles des boutons de téléchargement */
/* Forcer la taille des boutons */
.download-buttons img {
    width: 150px !important; /* Fixe une largeur maximale */
    max-width: 150px !important; /* Évite tout dépassement */
    height: auto !important; /* Conserve le ratio */
    display: inline-block !important; /* S'assure que les boutons ne chevauchent pas */
    margin: 5px auto !important; /* Centrage et espacement uniforme */
}

/* Réinitialisation des styles globaux sur les images */
img {
    max-width: 100%; /* Évite tout effet de débordement */
    height: auto; /* Préserve les proportions */
}

/* Réduire toute influence potentielle sur les boutons */
img.download-button {
    width: 150px !important; /* Taille fixe du bouton */
    max-width: 150px !important;
}