/* Corps de page */
body {
    background-image: url('Contributions-accueil-images/fondcontributions.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 noir autour du logo Gameocracy */
.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(0, 0, 0, 0.9), rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 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: 50px auto 0; /* Décale le contenu de 20px vers le bas tout en le centrant horizontalement */
}

.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);
}
/* Conteneur de l'image Contributions avec cadre transparent et halo noir */
.contributions-image-container {
    position: fixed; /* Fixe l'image en haut de la page */
    top: 40px;
    left: 50%;
    transform: translateX(-50%);
    background-color: transparent; /* Cadre transparent */
    border-radius: 15px; /* Bords arrondis pour le cadre */
    padding: 10px;
    box-shadow: 0 0 20px 15px rgba(0, 0, 0, 0.8); /* Halo noir autour du cadre */
    z-index: 102; /* Au-dessus du contenu défilant */
    display: inline-block; /* Ajuste la taille au contenu */
}

/* Style de l'image Contributions */
.contributions-image {
    display: block; /* Supprime les marges indésirables */
    border-radius: 15px; /* Bords arrondis pour l'image */
    object-fit: cover; /* Ajuste l'image à son conteneur */
}
/* Conteneur du QR code avec les mêmes styles que le logo Discord */
.qrcode-contributions-container {
    position: fixed;
    top: 35px; /* Ajuste la distance par rapport au haut de la page */
    right: 20px; /* Place le QR code à droite de la page */
    z-index: 101; /* Assure que le QR code est au-dessus de la bannière */
}

/* Halo vert "au repos" autour du QR code */
.qrcode-contributions-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 QR code */
    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 QR code */
    filter: blur(25px); /* Effet lumineux */
    transition: transform 0.3s ease, background 0.3s ease;
}

/* Halo blanc aveuglant au survol */
.qrcode-contributions-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 */
}

/* Style du QR code avec les mêmes propriétés que le logo Discord */
.qrcode-contributions-container img {
    width: 210px; /* Dimensions du QR code */
    transition: transform 0.3s ease, filter 0.3s ease;
    border-radius: 15px;
}

/* Effet d'agrandissement pour le QR code au survol */
.qrcode-contributions-container:hover img {
    transform: scale(1.3); /* Agrandit le QR code au survol */
}
/* Halo bleu très clair "au repos" autour du QR code */
.qrcode-contributions-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 QR code */
    height: 240px;
    background: rgba(90, 170, 255, 0.85); /* Bleu clair lumineux */
    border-radius: 15px; /* Coin arrondi */
    z-index: -1; /* Place le halo derrière le QR code */
    filter: blur(25px); /* Effet lumineux */
    transition: transform 0.3s ease, background 0.3s ease;
}
/* Halo bleu clair clignotant autour du QR code */
.qrcode-contributions-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 QR code */
    height: 240px;
    background: rgba(90, 170, 255, 0.85); /* Couleur initiale du halo */
    border-radius: 15px;
    z-index: -1;
    filter: blur(25px); /* Effet lumineux */
    animation: pulsate 3s ease-in-out infinite; /* Animation de pulsation */
}

/* Animation pour créer l’effet de pulsation */
@keyframes pulsate {
    0% {
        background: rgba(90, 170, 255, 0.3); /* Halo presque éteint */
        transform: scale(1);
    }
    50% {
        background: rgba(90, 170, 255, 0.85); /* Halo lumineux */
        transform: scale(1.1); /* Léger agrandissement pour un effet de respiration */
    }
    100% {
        background: rgba(90, 170, 255, 0.3); /* Retour à l'état initial */
        transform: scale(1);
    }
}
/* Rendre les cadres Genesis, Genesis II, et Fjordur invisibles */
.map-frame-container:nth-child(4),
.map-frame-container:nth-child(5),
.map-frame-container:nth-child(6),
 .map-frame-container:nth-child(3) {
    visibility: hidden;
}
/* Nouvelle colonne couvrant les deux colonnes fantômes */
.combined-column {
    position: absolute;
    left: 100px; /* Alignement symétrique avec le bord droit de la colonne de droite */
    width: calc(60% - 200px); /* Largeur couvrant les deux colonnes fantômes avec une marge symétrique */
    display: flex;
    justify-content: center;
    z-index: 101;
}

/* Cadre combiné avec ajustement précis de la hauteur */
.combined-frame {
    width: 100%; /* Prend toute la largeur de la colonne combinée */
    height: 615px; /* Hauteur ajustée pour atteindre le bas du cadre de texte Extinction */
    background-color: transparent; /* Transparence totale */
    border-radius: 15px; /* Angles arrondis */
    padding: 20px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.8), /* Halo noir autour du cadre */
                0 0 40px 40px rgba(0, 0, 0, 0); /* Gradient pour atténuation */
    z-index: 102; /* Assure la visibilité du cadre par-dessus */
}
/* Style du texte à l'intérieur du cadre combiné */
.combined-frame-text {
    color: #FFF;
    text-align: center;
    font-size: 1.1em;
    margin: 0;
}
/* Colonne combinée ajustée */
.combined-column {
    position: absolute;
    left: 5%; /* Distance du bord gauche égale à la distance entre The Center et le bord droit */
    width: calc(60% - 10%); /* Largeur ajustée pour laisser des marges égales de chaque côté */
    display: flex;
    justify-content: center;
    z-index: 101;
}
/* Cacher uniquement le texte de Ragnarok */
.map-frame-container:nth-child(2) .map-text {
    display: none; /* Cache le cadre de texte sans affecter le cadre de Ragnarok */
}
/* Ajuster la hauteur de Visuel Jauge */
.map-frame-container.visuel-jauge .map-frame {
    height: 410px; /* La moitié de la hauteur du cadre combiné */
}
/* Forcer le cadre Ragnarok à se rapprocher du texte de The Center */
.map-frame-container:nth-child(2) {
    position: relative;
    top: -95px; /* Ajustez cette valeur pour réduire l'espacement jusqu'à obtenir la distance souhaitée */
}
<style>
  /* Stylisation du tube en verre */
  .tube-verre {
    border-radius: 50% 50% 0 0; /* Arrondi pour le haut du tube */
    box-shadow: inset 0 0 20px rgba(255, 255, 255, 0.5), 0 6px 15px rgba(0, 0, 0, 0.4); /* Reflets internes et ombres */
    overflow: hidden;
    position: relative;
  }

  /* Stylisation du liquide à l'intérieur du tube */
  .liquide {
    width: 100%;
    position: absolute;
    bottom: 0;
    background: linear-gradient(to top, #ff0000, #00ff00); /* Dégradé du rouge sang au vert fluo */
    border-radius: 0 0 25px 25px; /* Arrondi pour le bas du liquide */
    box-shadow: 0 0 15px rgba(0, 255, 0, 0.7); /* Halo fluorescent */
  }

  /* Ajout de graduations le long du tube - supprimé pour simplifier */
</style>

/* Appliquer un flou transparent pour le cadre Donateurs */
.map-frame-container.donateurs .map-frame {
    background-color: rgba(255, 255, 255, 0.1);
    backdrop-filter: blur(10px);
    border-radius: 15px;
    padding: 20px;
}
@keyframes pulse-rose-red {
    0% {
        box-shadow: 0 0 20px 10px #E8B0F8; /* Rose initial, épaisseur de halo de 20px */
    }
    50% {
        box-shadow: 0 0 40px 20px #FF0000; /* Rouge avec épaisseur de halo de 40px */
    }
    100% {
        box-shadow: 0 0 20px 10px #E8B0F8; /* Retour au rose avec épaisseur de halo de 20px */
    }
}

/* Appliquer l'effet de survol pour le cadre Donateurs */
.map-frame-container.donateurs .map-frame:hover {
    animation: pulse-rose-red 3s infinite; /* Animation plus lente pour une pulsation fluide */
}
/* Cadre Donateurs avec effet de flou transparent pour lisibilité */
.map-frame-container.donateurs .map-frame {
    position: relative;
    backdrop-filter: blur(6px); /* Effet de flou transparent */
    border-radius: 15px;
    padding: 20px;
}

/* Style pour le titre */
.map-frame-container.donateurs .map-frame p:first-of-type {
    font-size: 1.2em; /* Augmente la taille du titre */
    font-weight: bold; /* Met le titre en gras */
    margin-bottom: 10px; /* Espace entre le titre et le texte suivant */
}

/* Style pour le texte des donateurs */
.map-frame-container.donateurs .map-frame p:nth-of-type(2) {
    font-size: 1em; /* Taille standard pour le texte */
}
/* Cadre combiné avec ajustement précis de la hauteur */
.combined-frame {
    width: 100%;
    height: 615px;
    background-color: transparent;
    border-radius: 15px;
    padding: 20px;
    box-shadow: 0 0 20px 20px rgba(0, 0, 0, 0.8);
    z-index: 100; /* Réduit sous le logo Gameocracy */
}

/* Nouvelle colonne combinée couvrant les deux colonnes fantômes */
.combined-column {
    position: absolute;
    left: 100px;
    width: calc(60% - 200px);
    display: flex;
    justify-content: center;
    z-index: 99; /* Ajuste pour rester sous le logo */
}

/* Colonne gauche et colonne fantôme */
.left-column, .phantom-column {
    width: 30%;
    z-index: 98; /* Garder ces éléments en dessous de la combined-frame */
}

/* Logo Gameocracy et son conteneur */
.logo-container {
    position: fixed;
    top: 5px;
    left: 20px;
    z-index: 101; /* Logo Gameocracy au-dessus de tous les autres éléments */
}

.banner-logo {
    z-index: 102; /* Priorité au logo au-dessus du halo */
}
body {
    background-image: url('../Contributions/contributions-accueil-images/fondcontributions.jpg');
}