body {
    font-family: 'Poppins', sans-serif !important;
    padding-top: 70px;
    overflow-x: hidden;
    background-color: #1b1b1d !important;
    color: #ffffff !important;
}

a {
    text-decoration: none !important;
}


h1, h2, h3, h4, h5{
    color: #ffffff !important;
    font-family: 'Anton', sans-serif !important;
    text-transform: uppercase;
    letter-spacing: 1px;
}

p{
    color: #ffffff !important;
}

.card {
    position: relative; /* Position relative pour permettre le positionnement absolu des enfants */
    overflow: hidden; /* Assure que l'image ne dépasse pas */
    box-sizing: border-box; /* Inclut le padding dans la taille totale de la carte */
    background-color: #121212 !important; /* Couleur de fond par défaut */
}

.card.border {
    border-color: #3b3b46 !important; /* Couleur personnalisée */
    border-width: 0px !important; /* Largeur personnalisée */
}

.navbar-container {
    margin-right: 10px;
}

.container-1{
    padding-inline: 10%;
}

.btn-custom {
    background-color: #38C1E9 !important;
    color: #fff !important;
}

.btn-custom-pink {
    background-color: #e25dcc !important;
    color: #fff !important;
}

.btn-custom-purple {
    background-color: #6441a5 !important;
    color: #fff !important;
}

.navbar-nav .nav-link {
    font-size: 25px;
    margin-right: 40px;
    color: #fff;
}

/*.navbar .nav-link:hover, 
.navbar .btn:hover {
    color: #ddd !important;
}*/

.navbar-wrapper {
    position: relative;
    z-index: 9999;
}

.navbar {
    width: 100%;
    position: fixed;
    /* background-color: rgba(0, 0, 0, 0.7) !important; /* Noir avec une opacité de 70% */
}

.fond1 {
    background-image: url("../images/fond7.webp");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 250px;
    padding-bottom: 400px;
}

.fondvideo {
    position: relative;
    min-height: 100vh;
    padding-top: 110px;
    padding-bottom: 80px;
    margin-top: -70px !important;
    display: flex;
    align-items: center;
    overflow: hidden;
}
.fondvideo .custom-container {
    width: 100%;
    max-width: 1300px;
    margin: 0 auto;
    padding-left: 3rem;
    padding-right: 3rem;
}
.fondvideo .row {
    align-items: center !important;
}
@media (max-width: 992px) {
    .fondvideo {
        min-height: auto;
        padding-top: 130px;
        padding-bottom: 80px;
    }
    .fondvideo .custom-container {
        padding-left: 1.2rem;
        padding-right: 1.2rem;
    }
}

.fondvideo2 {
    position: relative;
    display: flex; /* Active Flexbox */
    justify-content: center; /* Centre horizontalement */
    align-items: center; /* Centre verticalement */
    height: 35vh; /* Assure que la div occupe toute la hauteur de la fenêtre */
    overflow: hidden; /* Gère tout débordement éventuel */
    margin-top: -70px !important;
}

.background-video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover; /* Assure que la vidéo couvre tout l'écran sans déformation */
    z-index: -1; /* Place la vidéo derrière le contenu */
}

@media (max-width: 768px), (prefers-reduced-motion: reduce) {
    .background-video {
        display: none;
    }
    .fondvideo {
        background-image: url('/videos/fond_merilac_poster.jpg');
        background-size: cover;
        background-position: center;
    }
}

.custom-container {
    position: relative; /* Le contenu reste au-dessus de la vidéo */
    z-index: 1;
}

.container-shop {
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;
    padding-left: 10%;
    padding-right: 10%;
}

.text-shadow-smooth {
    text-shadow: 2px 2px 4px rgba(0, 0, 0, 0.5);
}

.fond2 {
    background-color: #1b1b1d;
    padding-top: 100px;
    padding-bottom: 100px;

}

.fond-joueur {
    background-color: #010101 !important; /* Couleur de fond par défaut */
    padding-top: 100px;
    padding-bottom: 100px;

}

.fond4 {
    background-color: #1b1b1d;
}

.background-blur {
    background: rgba(0, 0, 0, 0.55);
    backdrop-filter: blur(8px);
    padding: 30px;
    border-radius: 1rem;
}

.fond4 .content {
    position: relative;
    z-index: 1; /* Assurez-vous que le contenu est au-dessus de l'image de fond */
}

.fond3 {
    background-color: rgb(27, 27, 29);
    padding-top: 100px;
    padding-bottom: 100px;
    color: rgb(255, 255, 255);

}

.fond5 {
    background-image: url("../images/fond5.png");
    background-repeat: no-repeat;
    background-size: cover;
    padding-top: 150px;
    padding-bottom: 250px;
}

.fond6 {
    position: relative;
    background-color :#000 !important;
    padding: 100px 0;
    width: 100%;
    overflow: hidden;
    color: white;
}

@keyframes gradient-move {
    0% {
        background-position: 0% 50%;
    }
    100% {
        background-position: 100% 50%;
    }
}

.fond6 iframe {
    max-width: 80%; /* Augmente la largeur maximale de la vidéo */
    width: 800px; /* Ajoute une largeur fixe en pixels pour s'assurer qu'elle est grande */
    height: 450px; /* Maintient le ratio 16:9 pour la vidéo */
    margin: 0 auto; /* Centre la vidéo horizontalement */
    display: block; /* Centre proprement */
}

.custom-h3 {
    color: #38C1E9;
}

.custom-h1 {
    color: rgb(255, 255, 255);
    font-weight: bold;
}

.custom-h1-2 {
    color: rgb(240, 240, 240);
    font-weight: bold;
    font-size: 64px;
}

.textblack {
    color: rgb(37, 37, 37);
    font-weight: bold;
    font-size: 24px;
}

.grade{
    font-family: 'Poppins', sans-serif !important;
    text-transform: none !important;
    margin-right: 1rem !important;
}

.subtext{
    font-family: 'Poppins', sans-serif !important;
    text-transform: none !important;
}

.zenacolorhighlight {
    /*color: rgb(255, 255, 255);*/
    background: linear-gradient(to right, #00F7CE, #00DDFF); /* Dégradé de couleur */
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
}

.zenacolorhighlightfondateur {
    color: rgb(255, 255, 255);
    background-color: #38C1E9;
    padding: 0 5px;
}

.zenacolorhighlightjoueur {
    color: rgb(255, 255, 255);
    background-color: #414141;
    padding: 0 5px;
}

.zenacolorhighlightdesigner {
    color: rgb(255, 255, 255);
    background-color: #4EA37D;
    padding: 0 5px;
}

.zenacolorhighlightstreamer {
    color: rgb(255, 255, 255);
    background-color: #A46DEC;
    padding: 0 5px;
}
.zenacolorhighlightadmin {
    color: rgb(255, 255, 255);
    background-color: #CB3C3C;
    padding: 0 5px;
}
.zenacolorhighlightmodo {
    color: rgb(255, 255, 255);
    background-color: #7674E0;
    padding: 0 5px;
}
.zenacolorhighlightbuild {
    color: rgb(255, 255, 255);
    background-color: #76CB53;
    padding: 0 5px;
}
.zenacolorhighlightguide {
    color: rgb(255, 255, 255);
    background-color: #63A2ED;
    padding: 0 5px;
}
.zenacolorhighlightvipplus {
    color: rgb(255, 255, 255);
    background-color: #ED7963;
    padding: 0 5px;
}
.zenacolorhighlightvip {
    color: rgb(255, 255, 255);
    background-color: #FCBA59;
    padding: 0 5px;
}
.zenacolorhighlightyoutuber {
    color: rgb(255, 255, 255);
    background-color: #DF3E23;
    padding: 0 5px;
}
.zenacolorhighlightdev {
    color: rgb(255, 255, 255);
    background-color: #7F4AAA;
    padding: 0 5px;
}
.wtext{
    color: rgb(255, 255, 255);
}

.text-giant {
    font-size: 4rem; /* Ajustez la taille selon vos besoins */
    font-weight: bold; /* Rend le texte plus gras */
    line-height: 1.2; /* Ajuste l'espacement vertical entre les lignes */
    text-transform: uppercase; /* Met le texte en majuscules (optionnel) */
    color: white; /* Conserve le texte blanc */
}

.space {
    display: inline-block;
    width: 20px;
}

.custom-button {
    display: inline-block;
    padding: 10px 20px;
    border: 1px solid #ccc;
    border-radius: 5px;
    background-color: transparent;
    color: #ffffff;
    cursor: text;
    transition: background-color 0.3s ease;
}

.custom-button:hover {
    background-color: #f5f5f5;
    color: #000;
}

.custom-button:active {
    background-color: #e9e9e9;
    color: #000;
}

.lienfooter{
    color: white;
}

.lienfooter:hover
{
    color: #6AB8C6;
    transition: color 0.3s;

}

.bg-footer{
    background-color: #0e0e0f;
}

.row-odd {
    background-color: #f5f5f5 !important;
}

.row-even {
    background-color: #ffffff !important;
}

.paratext {
    font-weight: normal !important;
    color: rgb(240, 240, 240) !important;
}

.classementtext {
    color: #6AB8C6;
    text-decoration: none;
}

.a_nothing
{
    text-decoration: none;
    color: inherit;
}
@-moz-keyframes spin {
    100% { -moz-transform: rotate(-360deg); }
}
@-webkit-keyframes spin {
    100% { -webkit-transform: rotate(-360deg); }
}
@keyframes spin {
    100% { -webkit-transform: rotate(-360deg); transform: rotate(-360deg); }
}

.tourne {
    -webkit-animation: spin 5s linear infinite;
    -moz-animation: spin 5s linear infinite;
    animation: spin 5s linear infinite;
}

.merilac {
    font-size: 72px !important;
    background: linear-gradient(to right, #07c7f7 0%, #7676ff 100%)!important;
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
    text-shadow: none !important;
    font-family: 'Bodoni Std', sans-serif !important;
}

.VIP {
    background-image: linear-gradient(to left, #06d6a0 0%, #ffd166 100%);
    -webkit-background-clip: text !important;
    background-clip: text !important;
    -webkit-text-fill-color: transparent !important;
}

/* CSS (style.css) */
/* Personnalisation de la barre de défilement */
::-webkit-scrollbar {
    width: 5px;
}

::-webkit-scrollbar-track {
    background-color: transparent;
}

::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 20px; /* Augmenté à 20px pour un effet plus arrondi */
    border-radius: 5px;
}

::-webkit-scrollbar-thumb:hover {
    background: #555;
}


.has-error input,
.is-invalid input {
    border: 1px solid #dc3545;
}

.has-error .form-check-input,
.is-invalid .form-check-input {
    border: 1px solid #dc3545;
}

.has-error .form-error-message,
.is-invalid .form-error-message {
    color: #dc3545;
}

#token {
    cursor: pointer;
    user-select: none;
    transition: filter 0.3s ease;
    filter: blur(5px);
}

.hr-divider {
    height: 10px;
    border: none;
    color: #38C1E9;
    background-color: #38C1E9;
    margin: 20px 0;
}

.hr-divider2 {
    height: 10px;
    border: none;
    color: #c66aaf;
    background-color: #c66aaf;
    margin: 20px 0;
}

.hr-divider3 {
    height: 10px;
    border: none;
    color: #b3c66a;
    background-color: #b3c66a;
    margin: 20px 0; /* Ajoutez une marge pour espacer le trait horizontal du contenu autour */
}

.boutiqueborder1
{
    border: 10px solid #38C1E9;
    border-radius: 15px;
    padding: 50px;
    margin-bottom: 10px;
}

.boutiqueborder2
{
    border: 10px solid #72c66a;
    border-radius: 15px;
    padding: 50px;
    margin-bottom: 10px;
}

.boutiqueborder1,
.boutiqueborder2 {
    position: relative;
    overflow: hidden;
}

.boutiqueborder1 img,
.boutiqueborder2 img {
    filter: grayscale(100%); /* Met l'image en noir et blanc */
    transition: filter 0.5s, transform 0.5s;
}

.boutiqueborder1:hover img,
.boutiqueborder2:hover img {
    filter: grayscale(0%); /* Retire le noir et blanc au survol */
    transform: scale(1.1); /* Zoom au survol */
}

.progress
{
    height: 40px !important;
    border-radius: 0px !important;
}

#colorPicker1, #colorPicker2 {
    border: none;
}

.avatar-container {
    text-align: center;
}
.avatar-container img {
  background: none; /* Retire le fond */
  width: 25%; /* Réduit la taille de l'image de 25% */
  display: block;
  margin: 0 auto; /* Centre l'image */
  border: 0;
}
.card.card-common {
  background-color: #23a126 !important; /* Bleu */ 
}

.card.card-rare {
  background-color: #4944df !important; /* Jaune */
}

.card.card-epic {
  background-color: #9437db !important; /* Rouge */
}

.card.card-legendary {
  background-color: #dabe0e !important; /* Vert */
}

.card.card-mythic {
  background-color: #ca0d0d !important; /* Violet */
}

.game-logo {
    position: absolute;
    top: 0;
    right: 0;
    max-width: 30px;
    max-height: 30px;
    margin: 10px;
    box-shadow: 0 0 10px rgba(0, 0, 0, 0.5);
 }

.img-show-article{
    padding: 25px;
  }

.show-article{
    background-color: #292931;
}

.modal-content{
    background-color: #292931 !important;
}

.fadeIn {
    opacity: 0;
    transition: opacity 0.5s ease-in-out;
}

.fadeIn.visible {
    opacity: 1;
}

/* Modifie la couleur du texte des onglets */
.nav-tabs .nav-link {
    color: #0b9bc7; /* Remplacez #ff0000 par la couleur de votre choix */
}

/* Modifie la couleur du texte des onglets lorsqu'ils sont actifs */
.nav-tabs .nav-link.active {
    color: #00ff00; /* Remplacez #00ff00 par la couleur de votre choix */
}

.nav-tabs .nav-link:hover {
    color: #03b5eb; /* Remplacez #ff0000 par la couleur de votre choix */
}

.black-and-white {
    filter: grayscale(100%);
}

.spinner-border {
    width: 3rem;
    height: 3rem;
}

.blur-effect {
    filter: blur(15px);
    pointer-events: none;
    user-select: none;
}

.spinner-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
    background: rgba(255, 255, 255, 0.7);
    z-index: 10;
}

.btn.disabled {
    pointer-events: none;
    opacity: 0.6;
}

.navbar-nav .nav-item {
    position: relative;
}

.navbar-nav .nav-link {
    position: relative;
    display: inline-block;
    padding-bottom: 5px; /* Ajustez le padding pour créer de l'espace pour la ligne */
}

.navbar-nav .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 6px; /* Hauteur de la ligne, ajustez pour élargir */
    background: linear-gradient(to right, #00F7CE, #00DDFF); /* Dégradé de couleur */
    border-radius: 4px;
    transition: width 0.3s ease; /* Animation de transition */
}

.navbar-nav .nav-link:hover::after {
    width: 100%;
}

.rounded-custom {
    border-radius: 20px !important;
}

.card-with-padding
{
    padding: 25px !important;
}

.card-img-overlay {
    position: absolute; /* Position absolue pour overlay sur l'image */
    top: 0;
    left: 0;
    width: 100%; /* Laisse l'overlay remplir toute la carte */
    height: 100%; /* Laisse l'overlay remplir toute la carte */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    z-index: 2; /* Assure que le texte est toujours au-dessus de l'image */
}

.card-img {
    position: relative; /* Relative pour que le centrage fonctionne */
    width: calc(100% - 20px); /* Diminue la largeur pour créer un espace autour de l'image */
    height: calc(100% - 20px); /* Diminue la hauteur pour créer un espace autour de l'image */
    object-fit: cover;
    z-index: 1; /* Place l'image derrière le texte */
    transition: transform 0.3s ease;
    margin: auto; /* Centre l'image horizontalement et verticalement */
    display: block; /* Assure que l'image est un bloc pour que le margin auto fonctionne */
}

.card-fixed-size {
    width: 100%; /* S'adapte automatiquement en largeur */
    max-width: 400px; /* Largeur maximale */
    height: 400px; /* Hauteur fixe pour toutes les cartes */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    margin: 10px auto;
    background-color: #f8f9fa; /* Couleur de fond par défaut */
    border-radius: 10px; /* Coins arrondis */
}

.card:hover .card-img {
    transform: scale(1.1); /* Zoom sur l'image */
}

.player-card {
    background: linear-gradient(to bottom, #f5f5f5, #e6e6e6);
    border-radius: 15px;
    padding: 20px;
    text-align: center;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    font-family: 'Arial', sans-serif;
}

.player-card .card-header {
    background: #fff;
    border-bottom: 1px solid #ddd;
    padding: 10px;
    border-radius: 10px 10px 0 0;
}

.player-card .card-body {
    padding: 15px;
}

.player-card img {
    border-radius: 50%;
    width: 100px;
    height: 100px;
    margin-bottom: 10px;
}

.player-card p {
    font-size: 16px;
    margin: 5px 0;
}

.card-lootbox {
    background-image: url('../images/merilac_shop.webp'), linear-gradient(to bottom, #5b2c6f, #1f618d);
    background-size: cover; /* Ajustez "50px" à la taille souhaitée pour l'image */
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease; /* Transition pour l'effet de zoom */
    overflow: hidden; /* Empêche les éléments de sortir des limites de la carte */
  }

.card-vip {
    background-image: url('../images/merilac_port.webp'), linear-gradient(to bottom, #5b2c6f, #1f618d);
    background-size: cover; /* Ajustez "50px" à la taille souhaitée pour l'image */
    background-repeat: no-repeat;
    background-position: center;
    transition: transform 0.5s ease; /* Transition pour l'effet de zoom */
    overflow: hidden; /* Empêche les éléments de sortir des limites de la carte */
  }

.card-cosmectic-counter {
    background-image: url("../images/fond7.webp");
    background-size: cover; /* Ajustez "50px" à la taille souhaitée pour l'image */
    background-repeat: no-repeat;
    background-position: center;
    overflow: hidden; /* Empêche les éléments de sortir des limites de la carte */
}

.card-lootbox:hover, .card-vip:hover {
    transform: scale(1.05); /* Ajoute un zoom léger à l'ensemble de la carte */
}

.card-img-custom {
    width: 100%;
    height: 200px; /* Ajustez cette valeur selon la taille souhaitée */
    object-fit: cover; /* Pour que l'image s'ajuste bien à la taille du conteneur */
}
#classement-card {
    background-color: #f8f9fa;
    border-radius: 20px; /* Équivalent de rounded-5 */
    border: none;
    padding: 20px; /* Ajout de padding pour plus d'espace interne */
}

#classement-alert {
    border-radius: 10px;
    background-color: #1d1d24; /* Fond légèrement gris clair */
    color: #ffffff;
    padding: 15px; /* Espacement interne */
}

#classement-title {
    font-weight: bold;
    color: #333;
    text-align: center; /* Centrer le titre */
}

table tr td, table tr th{
    background: transparent !important;
    color: #ffffff !important;
  }


#classement-table-wrapper {
    margin-top: 20px;
    background-color: #1d1d24; /* Fond cohérent avec la carte */
    border-radius: 10px; /* Bords arrondis pour s'accorder avec la carte */
    padding: 10px; /* Espacement interne pour éviter un tableau collé aux bords */
    overflow-x: auto; /* Pour éviter les débordements horizontaux */
}

#classement-table {
    border-collapse: collapse; /* Fusionne les bordures */
    width: 100%; /* Occupe toute la largeur */
    margin: 0; /* Évite tout espace entre le tableau et son conteneur */
}

#classement-table thead th {
    font-weight: bold;
    color: #495057;
    border-bottom: 2px solid #dee2e6; /* Ligne séparatrice grise */
}

#classement-table th.asc:after {
    content: ' ▲';
}

#classement-table th.desc:after {
    content: ' ▼';
}

#classement-table tbody tr {
    border-bottom: 1px solid #dee2e6; /* Ligne séparatrice entre les rangées */
}

#classement-table tbody tr:nth-child(even) {
    background-color: #24242c; /* Alternance des lignes avec un gris clair */
}

#classement-table tbody tr:hover {
    background-color: #2b2b3a; /* Fond légèrement plus sombre au survol */
}

.classement-pseudo {
    text-decoration: none;
    color: #38C1E9;
}

.classement-pseudo:hover {
    text-decoration: underline;
}

#boutique-card1,
#boutique-card2 {
    background-color: #f8f9fa;
    border-radius: 20px; /* Bords arrondis */
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); /* Ombre légère */
    border: none;
    padding: 20px; /* Espacement interne */
    height: 100%; /* Remplit toute la hauteur de la colonne */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column; /* Centrer le contenu verticalement */
    transition: transform 0.3s ease, box-shadow 0.3s ease; /* Animation pour effet de survol */
}

#boutique-card1:hover,
#boutique-card2:hover {
    transform: scale(1.05); /* Zoom sur la carte au survol */
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15); /* Ombre renforcée au survol */
}

.boutique-title {
    font-weight: bold;
    color: #333;
    margin-bottom: 20px; /* Espacement sous le titre */
}

.boutique-image {
    max-width: 100%; /* S'assure que les images sont responsives */
    border-radius: 10px; /* Bords arrondis pour les images */
    filter: grayscale(100%); /* Noir et blanc par défaut */
    transition: filter 0.3s ease, transform 0.3s ease; /* Animation pour effet de survol */
}

.boutique-image:hover {
    filter: grayscale(0%); /* Retour en couleur au survol */
    transform: scale(1.1); /* Zoom léger sur l'image au survol */
}

.boutique-container {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 100vh; /* Assure que le contenu occupe toute la hauteur de la page */
}
/* Titres spécifiques */
.classement-title {
    font-weight: bold;
    color: #333;
}

.classement-subtitle {
    font-weight: bold;
    color: #555;
}

.classement-description {
    color: #555;
    margin-bottom: 0px;
}

/* Cartes */
.classement-card {
    background-color: #f8f9fa;
    border-radius: 20px;
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
    border: none;
    height: 100%; /* Assure que toutes les cartes ont la même hauteur */
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.classement-card:hover {
    transform: scale(1.05);
    box-shadow: 0 6px 10px rgba(0, 0, 0, 0.15);
}

/* Images */
.classement-card-img {
    border-radius: 20px 20px 0 0;
    filter: grayscale(100%);
    transition: filter 0.3s ease;
    object-fit: cover;
    height: 200px; /* Taille fixe pour uniformiser */
}

.classement-card:hover .classement-card-img {
    filter: grayscale(0%);
}

/* Boutons uniformisés */
.classement-btn {
    background-color: transparent !important; /* Fond transparent */
    color: #38C1E9 !important; /* Texte bleu */
    border: 2px solid #38C1E9 !important; /* Bordure bleue */
    border-radius: 10px !important; /* Coins arrondis */
    padding: 10px 20px !important;
    font-size: 16px !important;
    font-weight: bold !important;
    text-transform: uppercase !important;
    text-align: center !important;
    transition: background-color 0.3s ease, color 0.3s ease, transform 0.3s ease !important; /* Effet survol fluide */
    display: inline-block !important; /* Assure le comportement correct du bouton */
}

.classement-btn:hover {
    background-color: #38C1E9 !important; /* Fond bleu au survol */
    color: #ffffff !important; /* Texte blanc au survol */
    transform: scale(1.05) !important; /* Zoom léger au survol */
}

.classement-btn.disabled {
    background-color: transparent !important;
    color: #6c757d !important; /* Texte gris pour le bouton désactivé */
    border: 2px solid #6c757d !important; /* Bordure grise */
    cursor: not-allowed !important;
    pointer-events: none !important;
    transform: none !important; /* Pas d'animation */
}

.status-indicator {
    position: relative;
    width: 16px; /* Taille du rond central */
    height: 16px;
    background-color: #00ff00; /* Vert du rond central */
    border-radius: 50%; /* Rend le rond circulaire */
    overflow: visible;
}

.status-indicator .pulse {
    position: absolute;
    top: 50%;
    left: 50%;
    width: 16px; /* Taille initiale du rond extérieur */
    height: 16px;
    background-color: rgba(0, 255, 0, 0.5); /* Vert transparent pour l'effet de pulsation */
    border-radius: 50%;
    transform: translate(-50%, -50%) scale(1); /* Centre le rond et initialise l'échelle */
    animation: pulse-animation 1.5s infinite ease-out; /* Animation infinie */
}

@keyframes pulse-animation {
    0% {
        transform: translate(-50%, -50%) scale(1); /* Taille initiale */
        opacity: 1; /* Opacité maximale */
    }
    100% {
        transform: translate(-50%, -50%) scale(2); /* Taille finale */
        opacity: 0; /* Devient invisible */
    }
}

/* Changer la couleur de fond et la bordure */
.tooltip-inner {
    font-family: 'Minecraftia', 'Minecraft', sans-serif; /* Police Minecraft */
    background-color: #2E2B3B; /* Fond sombre */
    color: #ffffff; /* Texte blanc */
    font-size: 14px;
    font-weight: bold;
    border-radius: 4px; /* Coins légèrement arrondis */
    padding: 8px 12px;
    border: 2px solid #482d89; /* Bordure violette */
    box-shadow: 0 0 20px #482d89; /* Glow violet */
    max-width: 250px; /* Largeur max du tooltip */
}

/* Modifier la flèche du tooltip pour correspondre au thème */
.bs-tooltip-top .tooltip-arrow::before,
.bs-tooltip-bottom .tooltip-arrow::before,
.bs-tooltip-left .tooltip-arrow::before,
.bs-tooltip-right .tooltip-arrow::before {
    border-top-color: #482d89 !important;
    border-bottom-color: #482d89 !important;
    border-left-color: #482d89 !important;
    border-right-color: #482d89 !important;
}

/* Style du titre dans le tooltip */
.tooltip-inner h1 {
    font-size: 16px;
    color: #FFDD55; /* Doré */
    border-bottom: 2px solid #482d89;
    padding-bottom: 5px;
    margin-bottom: 10px;
}

/* Style du texte du tooltip */
.tooltip-inner p {
    font-size: 14px;
    margin: 5px 0;
    line-height: 1.4;
}

/* Texte en gras pour mettre en valeur certaines infos */
.tooltip-inner strong {
    font-weight: bold;
    color: #FFAA00; /* Orange Minecraft */
}

.staff-member a {
    display: inline-block; /* Permet au lien de s'adapter à l'image */
}

.staff-member a img {
    display: block; /* Supprime les espaces indésirables sous l'image */
    width: 100%; /* Assure que l'image prend bien la largeur du lien */
    height: auto; /* Garde les proportions correctes */
}

.discord-link-page .schema-container {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 30px;
    flex-wrap: wrap;
    margin-top: 30px;
}

.discord-link-page .schema-item {
    position: relative;
    text-align: center;
}

.discord-link-page .schema-item .icon {
    font-size: 3rem;
    color: #7289DA; /* Discord blue */
}

.discord-link-page .schema-item img {
    width: 80px;
    height: 80px;
    display: block;
    margin: 0 auto;
    transition: transform 0.3s ease, filter 0.3s ease;
}

.discord-link-page .schema-item img:hover {
    transform: scale(1.1);
    filter: drop-shadow(0px 0px 8px rgba(255, 255, 255, 0.6));
}

.discord-link-page .badge {
    border-radius: 5px;
}

/* Applique le noir et blanc uniquement au badge discord */
.discord-link-page .discord img {
    filter: grayscale(100%);
    transition: filter 0.3s ease, transform 0.3s ease;
}

/* Effet de glow rouge au survol */
.discord-link-page .discord img:hover {
    filter: grayscale(0%) drop-shadow(0px 0px 10px rgba(206, 6, 6, 0.8));
    transform: scale(1.1);
}

.discord-link-page .label {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #fff;
}

.discord-link-page .label-red {
    display: block;
    margin-top: 5px;
    font-size: 14px;
    color: #ce0606;
}

.discord-link-page .dotted-line {
    width: 50px;
    height: 2px;
    border-top: 2px dashed rgb(255, 255, 255);
}

@import url('https://fonts.googleapis.com/css2?family=Poppins:wght@900&display=swap');

.custom-grade-scroll-container {
    width: 100%;
}

.custom-grade-scroll-section {
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    opacity: 0;
    transform: scale(0.95) translateY(30px);
    transition: all 1s ease-out;
    text-align: center;
    font-family: 'Poppins', sans-serif;
    padding: 2rem;
    position: relative;
    overflow: hidden;
}

.custom-grade-scroll-section.active {
    opacity: 1;
    transform: scale(1) translateY(0);
}

.custom-grade-scroll-section h1,
.custom-grade-scroll-section h2 {
    font-size: 3rem;
    font-weight: 900;
    margin-bottom: 1rem;
}

.custom-grade-scroll-section p {
    font-size: 1.3rem;
    max-width: 700px;
}

.custom-grade-highlight-wrapper {
    position: relative;
    display: inline-block;
    padding-bottom: 4px; /* espace pour le surlignage */
}

.custom-grade-highlight-text {
    font-weight: 900;
    background: linear-gradient(to right, #00F7CE, #00DDFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
    position: relative;
    z-index: 2;
}

.custom-grade-highlight-bg {
    content: '';
    position: absolute;
    left: 0;
    bottom: 0;
    height: 8px;
    width: 100%;
    background: rgba(0, 215, 255, 0.25);
    border-radius: 2px;
    z-index: 1;
    animation: custom-grade-underline-in 1s ease forwards;
}

@keyframes custom-grade-underline-in {
    from { width: 0; }
    to { width: 100%; }
}

.custom-grade-pulse {
    animation: custom-grade-pulse 2s infinite;
}

@keyframes custom-grade-pulse {
    0%, 100% { transform: scale(1); }
    50% { transform: scale(1.1); }
}

.custom-grade-bounce {
    animation: custom-grade-bounce 1.5s ease infinite;
}

@keyframes custom-grade-bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.custom-grade-floating-image {
    width: 300px;
    animation: custom-grade-float 3s ease-in-out infinite;
    margin-bottom: 2rem;
}

@keyframes custom-grade-float {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-15px); }
}

.custom-grade-icons {
    display: flex;
    gap: 2rem;
    margin-top: 2rem;
}

.custom-grade-icon {
    font-size: 3rem;
    opacity: 0;
    transform: translateY(30px);
    animation: custom-grade-icon-in 0.6s forwards;
}

.custom-grade-scroll-section.active .custom-grade-icon:nth-child(1) { animation-delay: 0.2s; }
.custom-grade-scroll-section.active .custom-grade-icon:nth-child(2) { animation-delay: 0.4s; }
.custom-grade-scroll-section.active .custom-grade-icon:nth-child(3) { animation-delay: 0.6s; }
.custom-grade-scroll-section.active .custom-grade-icon:nth-child(4) { animation-delay: 0.8s; }

@keyframes custom-grade-icon-in {
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

@font-face {
    font-family: 'Minecraftia';
    src: url('/fonts/Minecraftia.woff2') format('woff2'); /* adapte le chemin à ton projet */
}

/* Style du formulaire de création */
.custom-grade-creator {
    display: flex;
    flex-direction: column;
    gap: 1rem;
    align-items: center;
    margin-bottom: 2rem;
}

.custom-grade-creator input[type="text"],
.custom-grade-creator select {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border: 2px solid #444;
    text-align: center;
    font-family: 'Minecraftia', monospace;
    width: 200px;
    background-color: #111;
    color: white;
}

.custom-grade-creator input[type="color"] {
    width: 60px;
    height: 40px;
    border: 2px solid #444;
    cursor: pointer;
}

.custom-grade-creator label {
    font-family: 'Poppins', sans-serif;
    color: white;
    font-size: 0.95rem;
}

/* Conteneur de preview (grade et pseudo côte à côte) */
.custom-grade-preview-container {
    display: flex;
    align-items: center;
    gap: 1rem;
}

/* Cadre du grade */
.custom-grade-preview {
    font-family: 'Minecraftia', monospace;
    font-size: 2rem;
    padding: 1rem 2rem;
    border: 4px solid #000;
    background-color: #ff0000;
    color: white;
    user-select: none;
    image-rendering: pixelated;
    /* Ombre pixel, ajustable via JS */
    text-shadow: 2px 2px 0 #000;
}

/* Cadre du pseudo (affiché à côté du grade) */
.custom-grade-pseudo-text {
    font-family: 'Minecraftia', monospace;
    font-size: 1.5rem;
    color: #ff0000; /* sera remplacé dynamiquement */
    text-shadow: 2px 2px 0 #000;
}
.custom-grade-pseudo-text.no-shadow {
    text-shadow: none;
}

/* Si l'ombre est désactivée */
.custom-grade-preview.no-shadow,
.custom-grade-pseudo.no-shadow {
    text-shadow: none;
}

.creeper-float {
    animation: float-creeper 3s ease-in-out infinite;
}

@keyframes float-creeper {
    0%   { transform: translateY(0px); }
    50%  { transform: translateY(-10px); }
    100% { transform: translateY(0px); }
}

#profil-image {
    mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
    -webkit-mask-image: linear-gradient(to bottom, black 50%, transparent 100%);
}

.swiper-pagination-bullet {
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.4) !important;
    background-color: rgba(255, 255, 255, 0.3) !important; /* Exemple : gris clair transparent */
    opacity: 1;
    margin: 0 6px;
    transition: all 0.3s ease;
    border-radius: 999px;
}

.swiper-pagination-bullet-active {
    background: #ffffff !important;
    background-color: #ffffff !important; /* Exemple : bleu Zenavia */
    width: 28px;
}

.custom-grade-generator {
    display: flex;
    gap: 10px;
    align-items: center;
    margin-bottom: 15px;
}

#grade-name {
    padding: 8px;
    font-size: 18px;
    width: 200px;
    border-radius: 8px;
    border: 1px solid #ccc;
}

#grade-preview {
    image-rendering: pixelated;
    image-rendering: crisp-edges;
}

/* Halo clignotant autour du champ */
.highlight-blink {
    animation: blinkHalo 1s infinite;
}
@keyframes blinkHalo {
    0%, 100% { 
        box-shadow: 0 0 12px 4px #00bfff; /* halo fort */
    }
    50% { 
        box-shadow: 0 0 0px 0px transparent; /* disparition */
    }
}

/* Conteneur 9:16 pour YouTube Shorts */
.zenavia-ratio-9x16 {
  position: relative;
  width: 100%;
}
.zenavia-ratio-9x16::before {
  content: "";
  display: block;
  /* 16/9 = 1.777... -> pour un conteneur vertical, la hauteur = 177.78% de la largeur */
  padding-top: 177.78%;
}
.zenavia-ratio-9x16 > iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
  border-radius: 0.75rem; /* cohérent avec rounded-custom si tu veux */
}

/* Optionnel : style carte vidéo */
.zenavia-video-card {
  overflow: hidden;
}

.playersearch-title {
  font-family: 'Anton', sans-serif !important;
  font-size: 2.5rem;   /* un peu plus gros pour l’impact */
  letter-spacing: 1px; /* espace entre lettres */
  text-transform: uppercase; /* style impactant */
}

/* état normal */
.btn.btn-zenasearch{
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: relative;
  z-index: 1;                  /* au-dessus des couches du group */
  background-color: #00DDFF !important;
  background-image: none !important;   /* pas de dégradé au repos */
  color: #fff !important;
  border: 0 !important;
  font-weight: 600;
  height: 52px;
  line-height: 1;
  transition: color .2s ease;
}

/* hover = dégradé animé */
.btn.btn-zenasearch:hover,
.btn.btn-zenasearch:focus{
  color: #fff !important;
  background-color: transparent !important;     /* laisse la place au gradient */
  background-image: linear-gradient(270deg,#00ddff,#02fad1,#00c3ff) !important;
  background-size: 800% 800% !important;
  animation: meshGradient 15s ease infinite !important;
  box-shadow: none !important;
}

@keyframes meshGradient{
  0%{background-position:0% 50%}
  50%{background-position:100% 50%}
  100%{background-position:0% 50%}
}

.navbar-toggler {
    border-color: rgba(255, 255, 255, 0.6); /* Bordure blanche */
}

.navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 30 30' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba(255,255,255,1)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
}

.navbar-nav {
    padding-left: 20px !important; /* espace côté gauche */
    padding-right: 20px !important; /* si tu veux aussi à droite */
}

/* === Podium Zenavia === */
.podium {
  display: grid;
  place-items: center;
}
.podium-grid {
  width: 100%;
  max-width: 720px;
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 18px;
  align-items: end;
}
.podium-spot {
  position: relative;
  text-align: center;
  padding: 16px 12px;
  background: #121212; /* fond carte cohérent avec ton thème */
  box-shadow: 0 8px 24px rgba(0,0,0,0.3);
}
.podium-spot .avatar-wrap {
  position: relative;
  display: inline-block;
  margin-bottom: 8px;
}
.podium-spot img {
  width: 84px;
  height: 84px;
  border-radius: 12px;
  image-rendering: pixelated; /* look Minecraft */
  border: 2px solid rgba(255,255,255,0.12);
}
.podium-spot .medal {
  position: absolute;
  bottom: -8px;
  right: -8px;
  width: 28px; height: 28px;
  border-radius: 50%;
  font-weight: 700;
  display: grid; place-items: center;
  font-size: 14px;
  color: #0d0d0f;
  border: 2px solid rgba(0,0,0,0.25);
}
.medal-gold   { background: linear-gradient(135deg, #f6d365, #fda085); }
.medal-silver { background: linear-gradient(135deg, #bdc3c7, #ececec); }
.medal-bronze { background: linear-gradient(135deg, #d0a07b, #b37346); }

.podium-spot .player-name {
  font-weight: 700;
  font-size: 18px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.podium-spot .player-points {
  opacity: 0.85;
  font-size: 14px;
}

/* hauteurs façon podium */
.spot-1 { transform: translateY(-10px); }
.spot-2 { transform: translateY(10px);  }
.spot-3 { transform: translateY(20px);  }

/* Responsive */
@media (max-width: 576px) {
  .podium-grid {
    grid-template-columns: 1fr;
  }
  .spot-1, .spot-2, .spot-3 { transform:none; }
}
/* === Fin Podium Zenavia === */

.text-shadow {
    text-shadow: 0 2px 10px rgba(0, 0, 0, 0.6);
}

.zenamod-badge {
    font-size: 0.7rem !important;        /* plus petit */
    vertical-align: super !important;    /* le remonte au-dessus du texte */
    margin-left: 8px !important;         /* petit espace entre le texte et le badge */
    padding: 4px 6px !important;         /* réduit un peu la taille intérieure */
    border-radius: 6px !important;  
    font-family: Roboto !important;     /* coins un peu plus arrondis */
    background-color: transparent !important; /* fond transparent */
    background-image: linear-gradient(135deg, #00bfff, #fe6767) !important; /* bleu zenavia */
}

/* Empêche le scroll quand le menu est ouvert */
body.znv-no-scroll {
    overflow: hidden;
}

/* Overlay plein écran */
.znv-fullscreen-menu {
    position: fixed;
    inset: 0;
    z-index: 1050; /* au-dessus de la navbar Bootstrap */
    background-color: #050806;
    color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.35s ease, visibility 0.35s ease;
}

.znv-fullscreen-menu.znv-is-open {
    opacity: 1;
    visibility: visible;
}

/* Contenu interne */
.znv-fullscreen-inner {
    width: 100%;
    max-width: 1200px;
    padding: 80px 20px 40px;
    display: flex;
    gap: 3rem;
}

.znv-menu-visual {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
}

.znv-menu-preview {
    width: 100%;
    aspect-ratio: 16 / 9;      /* ou 4/3 ou 1/1 → A TOI DE CHOISIR */
    object-fit: contain;       /* crop intelligent */
    border-radius: 24px;
}

/* animation "venir d'en haut + fade" */
.znv-menu-preview.znv-from-top {
    animation: znvImageFromTop 0.45s ease both;
}

@keyframes znvImageFromTop {
    0% {
        opacity: 0;
        transform: translateY(-25px) scale(1.02);
    }
    100% {
        opacity: 1;
        transform: translateY(0) scale(1);
    }
}

.znv-menu-nav {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: flex-end;
}


/* Bouton fermer */
.znv-menu-close {
    margin-bottom: 3rem;
}

/* Responsive : en mobile l’image passe au-dessus ou disparaît */
@media (max-width: 992px) {
    .znv-fullscreen-inner {
        flex-direction: column;
        align-items: center;
        text-align: center;
    }

    .znv-menu-nav {
        align-items: center;
    }

    .znv-fullscreen-nav {
        text-align: center;
    }

    .znv-menu-visual {
        display: none;
    }
}

/* Liste des liens */
.znv-fullscreen-nav {
    text-align: right;
    font-size: clamp(2.4rem, 4vw, 3.5rem);
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    line-height: 1.1;
}

.znv-fullscreen-nav li + li {
    margin-top: 0.4em;
}

.znv-fullscreen-nav a {
    text-decoration: none;
    color: #f5f5f5;
    transition: color 0.2s ease, opacity 0.2s ease;
}

.znv-fullscreen-nav a:hover {
    color: var(--zenavia-highlight, #00DDFF);
    opacity: 0.9;
}

/* Bouton MENU dans la navbar */
.znv-menu-toggle {
    background-color: #00DDFF;
    border: none;
    padding: 0.35rem 0.9rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* NAVBAR général */
.znv-navbar {
    padding-left: 2rem !important;
    padding-right: 2rem !important;
    position: relative;
    display: flex;
    align-items: center;
}

/* Zone droite */
.znv-navbar-right {
    margin-left: auto;       /* pousse à droite */
    display: flex;
    align-items: center;
}

/* Espacements cohérents */
.znv-navbar-right .btn,
.znv-menu-toggle {
    margin-left: 8px; /* petit gap propre */
}

/* Bouton menu style Lando */
.znv-menu-toggle {
    background-color: var(--zenavia-blue, #0db8ff);
    border: none;
    padding: 0.35rem 0.8rem;
    font-weight: 600;
    text-transform: uppercase;
}

/* Logo central : VRAI centre de l'écran */
.znv-center {
    position: absolute;
    left: 50%;
    transform: translateX(-50%);     /* centre par rapport au viewport */
    top: 50%;
    transform: translate(-50%, -50%); /* option : centre aussi verticalement dans la navbar */
    /* si tu veux juste centrer horizontalement :
       top: 0;
       bottom: 0;
       margin: auto 0; 
    */
}

/* Taille contrôlée du logo central */
.znv-center-logo {
    height: 30px;
    opacity: 0.8;
    transition: opacity 0.3s ease;
}

.znv-center-logo:hover {
    opacity: 1;
}

/* Responsive: cacher le logo central sur mobile */
@media (max-width: 992px) {
    .znv-center {
        display: none;
    }
}

/* Cache les boutons shop / connexion en mobile */
@media (max-width: 992px) {
    .znv-navbar-right a.btn-lg {
        display: none;
    }

    /* éventuellement réduire taille du burger */
    .znv-menu-toggle {
        padding: 0.3rem 0.7rem;
        font-size: 1rem;
    }
}
/* ========= MERILAC SCROLL HERO ========= */

#merilac-section {
    position: relative;
    background-color: #1b1b1d;
    padding: 0;
}

/* Zone de scroll : plus c'est haut, plus l'effet est long */
.merilac-scroll-area {
    height: 260vh; /* durée de la "story" */
}

/* La scène reste collée pendant toute la zone ci-dessus */
.merilac-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;
}

/* Container interne pour positionner image + textes */
.merilac-layer {
    position: relative;
    width: 100%;
    height: 100%;
}

/* IMAGE – toujours centrée, scale + blur animés */
.merilac-image-wrap {
    position: absolute;
    inset: 0;
    transform-origin: center center;
    will-change: transform, filter;
    z-index: 1;
}

.merilac-image-wrap .swiper-container,
.merilac-image-wrap .swiper-wrapper,
.merilac-image-wrap .swiper-slide {
    width: 100%;
    height: 100%;
}

.merilac-image-wrap img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
}

/* TITRE – centré, au-dessus de l'image */
.merilac-heading {
    position: absolute;
    inset: 0;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
    text-align: center;
    opacity: 0;
    transform: translateY(40px);
    will-change: transform, opacity;
    pointer-events: none;
    z-index: 2;
}

.merilac-heading .container {
    max-width: 900px;
}

.merilac-heading .custom-h1-2 {
    font-size: clamp(2.4rem, 4vw, 3.4rem);
}

/* CARTES – posées en bas, au-dessus de l'image */
.merilac-info {
    position: absolute;
    left: 50%;
    transform: translate(-50%, 40px); /* +40px au départ, remonte vers 0 */
    bottom: 7vh;
    width: min(1100px, 100% - 3rem);
    opacity: 0;
    pointer-events: none;
    will-change: transform, opacity;
    z-index: 3;
}

.merilac-info .card {
    background-color: rgba(0, 0, 0, 0.85);
    opacity: 0;
    transform: translateY(30px);
    will-change: transform, opacity;
}

/* Accessibilité */
@media (prefers-reduced-motion: reduce) {
    .merilac-image-wrap {
        transition: none;
    }
}

/* Variante pour cette section : pas de gros padding qui casse le sticky */
.fond6-horizontal {
    padding: 0 !important;
    overflow: visible !important;
}

/* ========= SCROLL HORIZONTAL HIGHLIGHTS ========= */

.zenahscroll-wrapper {
    position: relative;
    height: 320vh;              /* durée totale du scroll vertical pour cette section */
}

.zenahscroll-sticky {
    position: sticky;
    top: 0;
    height: 100vh;
    overflow: hidden;           /* on affiche uniquement le panneau courant */
}

.zenahscroll-track {
    display: flex;
    height: 100%;
    will-change: transform;
}

/* 1 panneau = 1 écran */
.zenahpanel {
    flex: 0 0 100vw;            /* pas de shrink, largeur fixe = viewport */
    height: 100vh;
    padding: 3rem 0;
    display: flex;
    align-items: center;
}

.zenahpanel > .container {
    height: 100%;
    display: flex;
    align-items: center;
}

/* ====== Page récompenses médias ====== */

.media-reward-page {
    min-height: 100vh;
}

.media-reward-row {
    align-items: flex-start;
}

/* ==== Barre verticale ==== */

.media-reward-track-wrapper {
    height: 4400px;               /* augmente pour espacer davantage les niveaux */
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

.media-reward-track {
    position: relative;
    width: 10px;
    height: 100%;                 /* suit la hauteur du wrapper */
    background: #222;
    border-radius: 999px;
    overflow: visible;
}

/* remplissage du haut vers le bas */
.media-reward-track-fill {
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 0;                    /* sera écrasé par style="height: {{ progressPercent }}%" */
    border-radius: inherit;
    background: linear-gradient(to bottom, #22c1c3, #fdbb2d);
}

/* chaque checkpoint est positionné en absolu avec top: % */
.media-reward-checkpoint {
    position: absolute;
    left: 50%;
    transform: translate(-50%, -50%);
}

.media-reward-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid #555;
    background: #111;
}

.media-reward-checkpoint-reached .media-reward-dot {
    background: #00d4ff;
    border-color: #fce38a;
    box-shadow: 0 0 10px rgba(0, 212, 255, 0.8);
}

/* labels des niveaux */
.media-reward-label {
    position: absolute;
    left: 26px;
    top: 50%;
    transform: translateY(-50%);
    padding: 4px 12px;
    border-radius: 999px;
    background: rgba(0, 0, 0, 0.85);
    color: #fff;
    font-size: 0.8rem;
    white-space: nowrap;
}

.media-reward-level {
    font-weight: 700;
}

.media-reward-xp {
    font-size: 0.7rem;
    opacity: 0.7;
}

/* ====== Liste des futures récompenses ====== */

.media-reward-placeholder-list {
    border-radius: 12px;
    background: rgba(0, 0, 0, 0.4);
    padding: 16px 20px;
}

.media-reward-placeholder-item + .media-reward-placeholder-item {
    margin-top: 10px;
}

.media-reward-placeholder-level {
    font-weight: 700;
    color: #fce38a;
}

.media-reward-placeholder-desc {
    font-size: 0.9rem;
    color: #ccc;
}

/* ====== Sidebar sticky / fixed ====== */

/* Conteneur global de la sidebar (hauteur = même section que la barre) */
.media-reward-sidebar-container {
    position: relative;
    /* tu peux ajuster, mais 100vh + un peu de marge ça marche bien */
    min-height: 100vh;
}

/* Bloc qui devient sticky */
.media-reward-sidebar {
    position: relative;
}

/* État fixed (centre la carte pendant le scroll) */
.media-reward-sidebar.is-fixed {
    position: fixed;
    top: 100px;          /* garde-le comme tu aimes */
    z-index: 30;
}

/* État collé en bas de la zone */
.media-reward-sidebar.is-bottom {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}

/* Un peu de responsive */

@media (max-width: 991.98px) {
    .media-reward-track-wrapper {
        height: 1400px;
    }

}

/* ===== Tooltip souris sur la barre XP ===== */

.media-reward-mouse-tooltip {
    position: fixed;
    z-index: 9999;
    background: rgba(0, 0, 0, 0.9);
    color: #fff;
    padding: 6px 10px;
    border-radius: 8px;
    font-size: 0.8rem;
    pointer-events: none;
    transform: translate(-50%, -130%); /* centré au-dessus de la souris */
    opacity: 0;
    transition: opacity 0.12s ease-out;
    white-space: nowrap;
}



/* ============================
   FAQ Zenavia
   ============================ */
.faq-zenavia {
    --faq-accent-1: #00F7CE;
    --faq-accent-2: #00DDFF;
    --faq-bg: rgba(255, 255, 255, 0.04);
    --faq-bg-hover: rgba(255, 255, 255, 0.07);
    --faq-border: rgba(255, 255, 255, 0.08);
}

.faq-zenavia .accordion-item {
    background: var(--faq-bg) !important;
    border: 1px solid var(--faq-border) !important;
    border-radius: 14px !important;
    margin-bottom: 14px;
    overflow: hidden;
    transition: border-color .3s ease, transform .3s ease, box-shadow .3s ease;
}

.faq-zenavia .accordion-item:hover {
    border-color: rgba(0, 221, 255, 0.35) !important;
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 221, 255, 0.08);
}

.faq-zenavia .accordion-item:has(.accordion-button:not(.collapsed)) {
    border-color: rgba(0, 247, 206, 0.5) !important;
    box-shadow: 0 8px 28px rgba(0, 247, 206, 0.12);
}

.faq-zenavia .accordion-header {
    margin: 0;
}

.faq-zenavia .accordion-button {
    background: transparent !important;
    color: #fff !important;
    font-weight: 500;
    font-size: 1.05rem;
    padding: 1.15rem 1.4rem;
    box-shadow: none !important;
    border: none !important;
    border-radius: 14px !important;
    transition: background .25s ease, color .25s ease;
}

.faq-zenavia .accordion-button:hover {
    background: var(--faq-bg-hover) !important;
}

.faq-zenavia .accordion-button:focus {
    outline: none;
    box-shadow: none !important;
}

/* On masque le chevron Bootstrap par défaut */
.faq-zenavia .accordion-button::after {
    display: none !important;
}

/* Icône +/- custom à droite */
.faq-zenavia .faq-icon {
    margin-left: auto;
    width: 32px;
    height: 32px;
    flex: 0 0 32px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--faq-accent-1), var(--faq-accent-2));
    color: #0b0f14;
    font-weight: 700;
    font-size: 1.1rem;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), filter .25s ease;
    position: relative;
}

.faq-zenavia .faq-icon::before,
.faq-zenavia .faq-icon::after {
    content: "";
    position: absolute;
    background: #0b0f14;
    border-radius: 2px;
}

.faq-zenavia .faq-icon::before {
    width: 14px;
    height: 2px;
}

.faq-zenavia .faq-icon::after {
    width: 2px;
    height: 14px;
    transition: transform .35s cubic-bezier(.34,1.56,.64,1), opacity .25s ease;
}

/* État ouvert : on transforme + en - en cachant la barre verticale */
.faq-zenavia .accordion-button:not(.collapsed) .faq-icon {
    transform: rotate(180deg);
    filter: brightness(1.1);
}

.faq-zenavia .accordion-button:not(.collapsed) .faq-icon::after {
    transform: scaleY(0);
    opacity: 0;
}

.faq-zenavia .accordion-body {
    color: rgba(255, 255, 255, 0.82);
    padding: 0.25rem 1.4rem 1.4rem 1.4rem;
    font-size: 0.98rem;
    line-height: 1.65;
}

.faq-zenavia .accordion-body a {
    color: var(--faq-accent-2);
    text-decoration: none;
    border-bottom: 1px solid rgba(0, 221, 255, 0.4);
    transition: color .2s ease, border-color .2s ease;
}

.faq-zenavia .accordion-body a:hover {
    color: var(--faq-accent-1);
    border-color: var(--faq-accent-1);
}

@media (max-width: 575px) {
    .faq-zenavia .accordion-button {
        font-size: 0.98rem;
        padding: 1rem 1.1rem;
    }
    .faq-zenavia .faq-icon {
        width: 28px;
        height: 28px;
        flex-basis: 28px;
    }
}



/* ============================
   Pages Mini-jeux (Infected, Parkour, Freebuild)
   ============================ */

/* ---- Hero immersif avec image de fond ---- */
.minijeu-hero {
    position: relative;
    min-height: 70vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    overflow: hidden;
    padding: 6rem 1rem;
    margin-top: -1px; /* colle au-dessus de la navbar */
}
.minijeu-hero::before {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg,
        rgba(11,15,20,0.55) 0%,
        rgba(11,15,20,0.75) 60%,
        rgba(11,15,20,0.95) 100%);
    z-index: 1;
}
.minijeu-hero > .container {
    position: relative;
    z-index: 2;
    max-width: 900px;
}
.minijeu-hero .badge-mode {
    display: inline-block;
    padding: 0.4rem 1rem;
    background: rgba(0, 221, 255, 0.15);
    color: #00DDFF;
    border: 1px solid rgba(0, 221, 255, 0.4);
    border-radius: 999px;
    font-size: 0.85rem;
    font-weight: 600;
    letter-spacing: 0.15em;
    margin-bottom: 1.5rem;
    text-transform: uppercase;
}
.minijeu-hero h1 {
    font-size: clamp(2.5rem, 6vw, 4.5rem);
    font-weight: 800;
    color: #fff;
    margin-bottom: 1.5rem;
    line-height: 1.1;
    text-shadow: 0 4px 24px rgba(0,0,0,0.6);
}
.minijeu-hero .lead-text {
    font-size: 1.2rem;
    color: rgba(255,255,255,0.85);
    max-width: 700px;
    margin: 0 auto 2rem;
    text-shadow: 0 2px 12px rgba(0,0,0,0.6);
}

/* ---- Encart IP serveur ---- */
.minijeu-ip-card {
    background: linear-gradient(135deg, rgba(0,247,206,0.08), rgba(0,221,255,0.08));
    border: 1px solid rgba(0,221,255,0.25);
    border-radius: 18px;
    padding: 2rem;
    text-align: center;
    color: #fff;
}
.minijeu-ip-card .ip-label {
    font-size: 0.85rem;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    color: rgba(255,255,255,0.6);
    margin-bottom: 0.5rem;
}
.minijeu-ip-card .ip-value {
    font-family: 'Roboto Condensed', monospace;
    font-size: 1.75rem;
    font-weight: 700;
    background: linear-gradient(90deg, #00F7CE, #00DDFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    margin-bottom: 1rem;
}

/* ---- Grille de features avec icône ---- */
.minijeu-feature {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 18px;
    padding: 2rem;
    height: 100%;
    transition: transform .3s ease, border-color .3s ease, box-shadow .3s ease;
}
.minijeu-feature:hover {
    transform: translateY(-4px);
    border-color: rgba(0,221,255,0.4);
    box-shadow: 0 12px 32px rgba(0,221,255,0.1);
}
.minijeu-feature .feature-icon {
    width: 60px;
    height: 60px;
    border-radius: 16px;
    background: linear-gradient(135deg, #00F7CE, #00DDFF);
    color: #0b0f14;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 1.7rem;
    margin-bottom: 1.25rem;
}
.minijeu-feature h3 {
    color: #fff;
    font-size: 1.25rem;
    font-weight: 700;
    margin-bottom: 0.75rem;
}
.minijeu-feature p {
    color: rgba(255,255,255,0.75);
    margin-bottom: 0;
    line-height: 1.6;
}

/* ---- Liste d'arguments "Pourquoi" ---- */
.minijeu-why-list {
    list-style: none;
    padding: 0;
    margin: 0;
}
.minijeu-why-list li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    padding: 1rem 0;
    border-bottom: 1px solid rgba(255,255,255,0.06);
    color: rgba(255,255,255,0.85);
}
.minijeu-why-list li:last-child {
    border-bottom: none;
}
.minijeu-why-list li i {
    color: #00F7CE;
    font-size: 1.4rem;
    flex-shrink: 0;
    margin-top: 2px;
}
.minijeu-why-list li strong {
    color: #fff;
    display: block;
    margin-bottom: 0.25rem;
}

/* ---- CTA final ---- */
.minijeu-cta-final {
    background: linear-gradient(135deg, rgba(0,247,206,0.12), rgba(0,221,255,0.12));
    border-top: 1px solid rgba(0,221,255,0.2);
    border-bottom: 1px solid rgba(0,221,255,0.2);
    padding: 4rem 1rem;
    text-align: center;
}
.minijeu-cta-final h2 {
    color: #fff;
    font-weight: 800;
    font-size: clamp(1.75rem, 4vw, 2.5rem);
    margin-bottom: 1rem;
}
.minijeu-cta-final p {
    color: rgba(255,255,255,0.8);
    margin-bottom: 2rem;
    font-size: 1.1rem;
}

/* ---- Maillage croisé entre modes ---- */
.minijeu-cross-link {
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.08);
    border-radius: 14px;
    padding: 1.25rem 1.5rem;
    color: #fff;
    text-decoration: none;
    display: flex;
    align-items: center;
    gap: 1rem;
    transition: border-color .25s ease, transform .25s ease;
}
.minijeu-cross-link:hover {
    border-color: rgba(0,221,255,0.4);
    transform: translateX(4px);
    color: #fff;
}
.minijeu-cross-link .arrow {
    margin-left: auto;
    color: #00DDFF;
    font-size: 1.3rem;
}


/* ============================
   Duel split (Humains vs Zombies)
   ============================ */
.duel-split-section {
    overflow: hidden;
    background: #0b0f14;
}
.duel-split {
    display: flex;
    width: 100%;
    min-height: 560px;
    position: relative;
}
.duel-split-side {
    flex: 1;
    position: relative;
    padding: 4rem 3rem;
    color: #fff;
    overflow: hidden;
    transition: flex .55s cubic-bezier(.65,.05,.36,1), filter .55s ease;
    display: flex;
    align-items: center;
}
.duel-split-side::before {
    content: "";
    position: absolute;
    inset: 0;
    background-size: cover;
    background-position: center;
    opacity: .25;
    z-index: 0;
    mix-blend-mode: overlay;
    transition: opacity .55s ease, transform .55s ease;
}
.duel-split-side.humans {
    background: radial-gradient(circle at 30% 50%, #1d3b6b 0%, #0a1929 100%);
    clip-path: polygon(0 0, 100% 0, calc(100% - 90px) 100%, 0 100%);
    z-index: 2;
}
.duel-split-side.zombies {
    background: radial-gradient(circle at 70% 50%, #4a1212 0%, #1a0606 100%);
    margin-left: -90px;
    clip-path: polygon(90px 0, 100% 0, 100% 100%, 0 100%);
    z-index: 1;
}
.duel-split-side.humans::before {
    background-image: linear-gradient(135deg, rgba(0,221,255,.12), transparent 60%);
}
.duel-split-side.zombies::before {
    background-image: linear-gradient(225deg, rgba(255,94,94,.18), transparent 60%);
}
/* Hover : agrandissement de la moitié visée */
.duel-split:hover .duel-split-side:not(:hover) {
    flex: 0.7;
    filter: brightness(.55) saturate(.6);
}
.duel-split:hover .duel-split-side:hover {
    flex: 1.35;
}
.duel-split:hover .duel-split-side:hover::before {
    opacity: .55;
    transform: scale(1.05);
}

/* Contenu */
.duel-split-content {
    position: relative;
    z-index: 1;
    max-width: 480px;
    width: 100%;
}
.duel-split-side.humans .duel-split-content {
    margin-left: auto;
    padding-right: 80px;
    text-align: right;
}
.duel-split-side.zombies .duel-split-content {
    margin-right: auto;
    padding-left: 80px;
}
.duel-tag {
    display: inline-block;
    font-size: .8rem;
    letter-spacing: .25em;
    text-transform: uppercase;
    padding: .4rem 1.1rem;
    border-radius: 999px;
    margin-bottom: 1.25rem;
    font-weight: 600;
}
.duel-split-side.humans .duel-tag {
    background: rgba(0,221,255,.12);
    color: #00DDFF;
    border: 1px solid rgba(0,221,255,.45);
}
.duel-split-side.zombies .duel-tag {
    background: rgba(255,80,80,.12);
    color: #ff5e5e;
    border: 1px solid rgba(255,80,80,.45);
}
.duel-title {
    font-size: clamp(2.8rem, 6vw, 5rem);
    font-weight: 900;
    margin: 0 0 1rem;
    line-height: .95;
    text-transform: uppercase;
    letter-spacing: -.02em;
}
.duel-split-side.humans .duel-title {
    background: linear-gradient(135deg, #00F7CE, #00DDFF);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.duel-split-side.zombies .duel-title {
    background: linear-gradient(135deg, #ff7a7a, #b91d72);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    text-shadow: none;
}
.duel-slogan {
    font-style: italic;
    font-size: 1.15rem;
    color: rgba(255,255,255,.85);
    margin-bottom: 2rem;
    line-height: 1.5;
}
.duel-stats {
    list-style: none;
    padding: 0;
    margin: 0;
}
.duel-stats li {
    display: flex;
    gap: .9rem;
    align-items: flex-start;
    padding: .55rem 0;
    color: rgba(255,255,255,.88);
    font-size: .98rem;
}
.duel-split-side.humans .duel-stats li {
    flex-direction: row-reverse;
}
.duel-stats li i {
    flex-shrink: 0;
    margin-top: 3px;
    font-size: 1.15rem;
}
.duel-split-side.humans .duel-stats li i { color: #00DDFF; }
.duel-split-side.zombies .duel-stats li i { color: #ff5e5e; }

/* "VS" central */
.duel-vs {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 5;
    font-size: 2.2rem;
    font-weight: 900;
    color: #fff;
    background: #0b0f14;
    width: 70px;
    height: 70px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    border: 2px solid rgba(255,255,255,.15);
    box-shadow: 0 0 30px rgba(0,0,0,.5);
    pointer-events: none;
    letter-spacing: -.05em;
}

/* Mobile : empilement vertical, sans diagonale */
@media (max-width: 768px) {
    .duel-split { flex-direction: column; }
    .duel-split-side {
        clip-path: none !important;
        margin-left: 0 !important;
        padding: 2.5rem 1.5rem;
        min-height: 0;
    }
    .duel-split-side .duel-split-content {
        padding: 0 !important;
        margin: 0 auto !important;
        text-align: center !important;
        max-width: 100%;
    }
    .duel-split-side .duel-stats li,
    .duel-split-side.humans .duel-stats li {
        flex-direction: row !important;
        justify-content: center;
        text-align: left;
    }
    .duel-split:hover .duel-split-side:not(:hover) {
        flex: 1;
        filter: none;
    }
    .duel-split:hover .duel-split-side:hover {
        flex: 1;
    }
    .duel-vs {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
        margin: -35px auto;
    }
}


/* ============================
   Duel split - améliorations
   ============================ */

/* Transition plus longue et plus douce sur le switch */
.duel-split-side {
    transition: flex .8s cubic-bezier(.4, 0, .2, 1),
                filter .6s ease;
}

/* Personnages en background semi-transparent */
.duel-split-side::after {
    content: "";
    position: absolute;
    top: 0;
    bottom: 0;
    width: 55%;
    background-size: contain;
    background-repeat: no-repeat;
    opacity: .18;
    z-index: 0;
    pointer-events: none;
    transition: opacity .8s cubic-bezier(.4,0,.2,1),
                transform .8s cubic-bezier(.4,0,.2,1);
    filter: drop-shadow(0 10px 30px rgba(0,0,0,.6));
}
.duel-split-side.humans::after {
    right: 60px;
    background-image: url('../images/Steve.png');
    background-position: right center;
    transform: translateX(20px);
}
.duel-split-side.zombies::after {
    left: 60px;
    background-image: url('../images/Render_Infecte-0.png');
    background-position: left center;
    transform: translateX(-20px) scaleX(-1); /* miroir pour qu'il "regarde" l'humain */
}
.duel-split:hover .duel-split-side:hover::after {
    opacity: .42;
    transform: translateX(0) scale(1.05);
}
.duel-split-side.zombies:hover::after {
    transform: translateX(0) scale(1.05) scaleX(-1);
}

/* VS animé qui pulse au repos */
@keyframes duelVsPulse {
    0%, 100% {
        transform: translate(-50%, -50%) scale(1);
        box-shadow: 0 0 30px rgba(0,0,0,.5),
                    0 0 0 0 rgba(255,255,255,.25);
    }
    50% {
        transform: translate(-50%, -50%) scale(1.08);
        box-shadow: 0 0 40px rgba(0,0,0,.6),
                    0 0 0 14px rgba(255,255,255,0);
    }
}
.duel-vs {
    animation: duelVsPulse 2.6s ease-in-out infinite;
    transition: opacity .5s ease, transform .5s cubic-bezier(.4,0,.2,1);
}
.duel-split:hover .duel-vs {
    opacity: 0;
    animation: none;
    transform: translate(-50%, -50%) scale(.6);
}

/* CTA boutons par camp */
.duel-cta {
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    margin-top: 1.75rem;
    padding: .9rem 1.9rem;
    border-radius: 999px;
    font-weight: 700;
    font-size: 1rem;
    text-decoration: none;
    border: none;
    cursor: pointer;
    transition: transform .25s ease, box-shadow .3s ease, filter .3s ease;
}
.duel-split-side.humans .duel-cta {
    background: linear-gradient(135deg, #00F7CE, #00DDFF);
    color: #0b0f14;
    box-shadow: 0 8px 20px rgba(0, 221, 255, .25);
}
.duel-split-side.zombies .duel-cta {
    background: linear-gradient(135deg, #ff7a7a, #b91d72);
    color: #fff;
    box-shadow: 0 8px 20px rgba(185, 29, 114, .3);
}
.duel-cta:hover {
    transform: translateY(-3px);
    filter: brightness(1.08);
    color: inherit;
}
.duel-split-side.humans .duel-cta:hover {
    box-shadow: 0 14px 32px rgba(0, 221, 255, .45);
}
.duel-split-side.zombies .duel-cta:hover {
    box-shadow: 0 14px 32px rgba(185, 29, 114, .5);
}

/* Mobile : on cache les personnages background */
@media (max-width: 768px) {
    .duel-split-side::after { display: none; }
    .duel-vs { animation: none; }
}


/* ============================
   Duel split - micro-animations de transition
   ============================ */

/* Le contenu réagit aussi : zoom subtil + déplacement léger */
.duel-split-content {
    transition: transform .8s cubic-bezier(.4, 0, .2, 1),
                opacity .6s ease;
    transform-origin: center center;
}
.duel-split-side.humans .duel-split-content { transform-origin: right center; }
.duel-split-side.zombies .duel-split-content { transform-origin: left center; }

.duel-split:hover .duel-split-side:hover .duel-split-content {
    transform: scale(1.04);
}
.duel-split:hover .duel-split-side:not(:hover) .duel-split-content {
    transform: scale(.96);
    opacity: .75;
}

/* Glow autour du titre du camp actif */
.duel-title {
    transition: filter .6s ease;
    filter: drop-shadow(0 0 0 transparent);
}
.duel-split:hover .duel-split-side.humans:hover .duel-title {
    filter: drop-shadow(0 0 24px rgba(0, 221, 255, .55));
}
.duel-split:hover .duel-split-side.zombies:hover .duel-title {
    filter: drop-shadow(0 0 24px rgba(255, 94, 94, .55));
}

/* Le tag "SURVIVANTS / INFECTÉS" s'illumine aussi */
.duel-tag {
    transition: box-shadow .5s ease, transform .5s ease;
}
.duel-split:hover .duel-split-side.humans:hover .duel-tag {
    box-shadow: 0 0 18px rgba(0, 221, 255, .35);
    transform: translateY(-1px);
}
.duel-split:hover .duel-split-side.zombies:hover .duel-tag {
    box-shadow: 0 0 18px rgba(255, 94, 94, .35);
    transform: translateY(-1px);
}

/* Liseré lumineux sur le bord diagonal du camp actif */
.duel-split-side.humans,
.duel-split-side.zombies {
    transition: flex .8s cubic-bezier(.4, 0, .2, 1),
                filter .6s ease,
                box-shadow .6s ease;
}
.duel-split:hover .duel-split-side.humans:hover {
    box-shadow: inset -4px 0 60px -10px rgba(0, 221, 255, .35);
}
.duel-split:hover .duel-split-side.zombies:hover {
    box-shadow: inset 4px 0 60px -10px rgba(255, 94, 94, .35);
}

/* Mobile : on désactive ces effets (pas de survol) */
@media (max-width: 768px) {
    .duel-split-content,
    .duel-title,
    .duel-tag {
        transform: none !important;
        filter: none !important;
        opacity: 1 !important;
    }
}


/* ============================
   Duel split - slide diagonal plus marqué et plus fluide
   ============================ */

/* Transition plus longue, easing "out-expo" pour un vrai sentiment de glissement */
.duel-split-side {
    transition: flex 1.4s cubic-bezier(0.16, 1, 0.3, 1),
                filter .9s cubic-bezier(0.16, 1, 0.3, 1),
                box-shadow .9s ease !important;
}

/* On accentue le contraste : plus de mouvement visible */
.duel-split:hover .duel-split-side:not(:hover) {
    flex: 0.55;
    filter: brightness(.5) saturate(.55);
}
.duel-split:hover .duel-split-side:hover {
    flex: 1.55;
}

/* On synchronise la transition des autres éléments avec la durée du slide */
.duel-split-content,
.duel-title,
.duel-tag {
    transition-duration: 1.2s !important;
    transition-timing-function: cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* Le personnage en background suit aussi la même cadence */
.duel-split-side::after {
    transition: opacity 1.2s cubic-bezier(0.16, 1, 0.3, 1),
                transform 1.4s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

/* ============================================================
   Refonte navbar — catégories, sous-catégories, CTA Rejoindre
   ============================================================ */

/* Catégorie principale (JOUER, VOTER, INFOS, MON COMPTE) */
.znv-fullscreen-nav .znv-menu-category {
    margin-top: 1.2em;
    margin-bottom: 0.3em;
    pointer-events: none;
}
.znv-fullscreen-nav .znv-menu-category:first-child {
    margin-top: 0.5em;
}
.znv-menu-cat-label {
    display: inline-block;
    font-size: 0.65em;
    color: #00DDFF;
    text-transform: uppercase;
    letter-spacing: 0.18em;
    font-weight: 700;
    opacity: 0.85;
    border-bottom: 1px solid rgba(0, 221, 255, 0.3);
    padding-bottom: 0.25em;
    padding-right: 1.5em;
}

/* Sous-catégorie (Contenu / Communauté dans INFOS) */
.znv-fullscreen-nav .znv-menu-subcategory {
    margin-top: 0.7em;
    margin-bottom: 0.1em;
    pointer-events: none;
}
.znv-fullscreen-nav .znv-menu-subcategory span {
    display: inline-block;
    font-size: 0.45em;
    color: #888;
    text-transform: uppercase;
    letter-spacing: 0.15em;
    font-weight: 500;
}

/* Items du menu - taille un peu plus contenue dans les listes longues */
.znv-fullscreen-nav .znv-menu-item + .znv-menu-item {
    margin-top: 0.2em;
}
.znv-fullscreen-nav .znv-menu-item a {
    display: inline-block;
    font-size: 0.85em;
}

/* Item "Voter" mis en avant */
.znv-fullscreen-nav .znv-menu-item-highlight a {
    color: #FFD93D !important;
    font-weight: 700;
}
.znv-fullscreen-nav .znv-menu-item-highlight a:hover {
    color: #FFFFFF !important;
}

/* CTA Rejoindre dans la barre fixe — animation pulse subtile */
.znv-cta-rejoindre {
    background-color: #28a745 !important;
    border: none !important;
    color: #ffffff !important;
    font-weight: 600;
    box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.7);
    animation: znv-pulse-rejoindre 2.4s infinite;
}
.znv-cta-rejoindre:hover {
    background-color: #218838 !important;
    transform: translateY(-1px);
    transition: all 0.2s;
}
@keyframes znv-pulse-rejoindre {
    0%   { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0.55); }
    70%  { box-shadow: 0 0 0 10px rgba(40, 167, 69, 0); }
    100% { box-shadow: 0 0 0 0 rgba(40, 167, 69, 0); }
}

/* Petit indicateur "(bientôt)" sur Blog/Patchnotes */
.znv-fullscreen-nav .znv-menu-item a small.text-warning {
    font-size: 0.6em;
    margin-left: 0.4em;
    color: #FFD93D !important;
    opacity: 0.8;
    letter-spacing: 0.05em;
}

/* ============================================================
   NAVBAR GLASS PILL — refonte v2
   ============================================================ */

.znv-navbar {
    background: transparent !important;
    border: none !important;
    padding: 1rem 1.5rem !important;
    display: block !important;
}

/* Le pill principal qui contient tout */
.znv-glass-pill {
    display: flex;
    align-items: center;
    gap: 1.2rem;
    width: 100%;
    max-width: 1400px;
    margin: 0 auto;
    padding: 0.55rem 0.7rem 0.55rem 1.1rem;
    background: rgba(20, 22, 35, 0.55);
    backdrop-filter: blur(18px) saturate(160%);
    -webkit-backdrop-filter: blur(18px) saturate(160%);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 999px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.25), inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

/* Logo brand */
.znv-glass-brand {
    flex-shrink: 0;
    line-height: 0;
}
.znv-glass-brand img {
    height: 28px;
    width: auto;
    transition: transform 0.2s;
}
.znv-glass-brand:hover img {
    transform: scale(1.05);
}

/* Liens inline (Voter, Boutique, Modes de jeu) */
.znv-glass-nav {
    display: flex;
    align-items: center;
    gap: 0.3rem;
    margin: 0;
    padding: 0;
    flex: 1;
}
.znv-glass-link {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.45rem 0.95rem;
    font-size: 0.92rem;
    font-weight: 500;
    color: #e8e9f0;
    text-decoration: none;
    border-radius: 999px;
    transition: background 0.2s, color 0.2s;
    white-space: nowrap;
}
.znv-glass-link i {
    font-size: 0.95em;
    opacity: 0.8;
}
.znv-glass-link:hover {
    background: rgba(255, 255, 255, 0.08);
    color: #ffffff;
}
.znv-glass-link-vote {
    color: #FFD93D;
}
.znv-glass-link-vote:hover {
    background: rgba(255, 217, 61, 0.12);
    color: #FFD93D;
}

/* Zone actions à droite */
.znv-glass-actions {
    display: flex;
    align-items: center;
    gap: 0.4rem;
    flex-shrink: 0;
}

/* Icône simple (Admin, Connexion sans pseudo) */
.znv-glass-icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 38px;
    height: 38px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.06);
    color: #e8e9f0;
    text-decoration: none;
    transition: background 0.2s, transform 0.2s;
    font-size: 1rem;
}
.znv-glass-icon:hover {
    background: rgba(255, 255, 255, 0.14);
    color: #ffffff;
    transform: translateY(-1px);
}

/* Bloc Profil avec pseudo */
.znv-glass-profile {
    display: inline-flex;
    align-items: center;
    gap: 0.45rem;
    padding: 0.4rem 0.85rem;
    background: rgba(255, 255, 255, 0.06);
    color: #e8e9f0;
    text-decoration: none;
    border-radius: 999px;
    font-size: 0.88rem;
    font-weight: 500;
    transition: background 0.2s;
    position: relative;
}
.znv-glass-profile:hover {
    background: rgba(255, 255, 255, 0.12);
    color: #ffffff;
}
.znv-glass-profile i {
    font-size: 1.1em;
}
.znv-glass-profile .badge {
    position: absolute;
    top: -2px;
    right: -2px;
    font-size: 0.6rem;
    padding: 0.2rem 0.4rem;
}

/* CTA Jouer — bouton vert lumineux */
.znv-glass-cta {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
    padding: 0.5rem 1.2rem;
    background: linear-gradient(135deg, #2ecc71, #27ae60);
    color: #ffffff !important;
    text-decoration: none;
    font-weight: 700;
    font-size: 0.92rem;
    border-radius: 999px;
    box-shadow: 0 4px 14px rgba(46, 204, 113, 0.4);
    transition: transform 0.2s, box-shadow 0.2s;
    text-transform: uppercase;
    letter-spacing: 0.03em;
}
.znv-glass-cta:hover {
    transform: translateY(-2px);
    box-shadow: 0 6px 20px rgba(46, 204, 113, 0.55);
    color: #ffffff !important;
}
.znv-glass-cta i {
    font-size: 1.05em;
}

/* Bouton burger */
.znv-glass-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.08);
    border: none;
    color: #ffffff;
    font-size: 1.3rem;
    cursor: pointer;
    transition: background 0.2s;
}
.znv-glass-burger:hover {
    background: rgba(255, 255, 255, 0.18);
}

/* Responsive */
@media (max-width: 992px) {
    .znv-navbar {
        padding: 0.6rem 0.8rem !important;
    }
    .znv-glass-pill {
        gap: 0.6rem;
        padding: 0.45rem 0.5rem 0.45rem 0.9rem;
    }
    .znv-glass-nav {
        display: none;
    }
    .znv-glass-profile-name {
        display: none;
    }
    .znv-glass-cta {
        padding: 0.45rem 0.9rem;
        font-size: 0.85rem;
    }
}
@media (max-width: 540px) {
    .znv-glass-brand img {
        height: 28px;
    }
    .znv-glass-cta span,
    .znv-glass-cta {
        font-size: 0.8rem;
        padding: 0.4rem 0.7rem;
    }
}

/* ============================================================
   MENU FULLSCREEN — nettoyage / espacement / tailles
   ============================================================ */

.znv-fullscreen-nav {
    font-size: 0.85em !important;
    line-height: 1.2;
}
.znv-fullscreen-nav .znv-menu-item a {
    font-size: 1.1rem;
    font-weight: 500;
    text-transform: none;
    letter-spacing: 0.01em;
}
.znv-fullscreen-nav .znv-menu-item + .znv-menu-item {
    margin-top: 0.15em;
}
.znv-fullscreen-nav .znv-menu-category {
    margin-top: 1.4em;
    margin-bottom: 0.5em;
}
.znv-fullscreen-nav .znv-menu-category:first-child {
    margin-top: 0.3em;
}
.znv-menu-cat-label {
    font-size: 0.7rem;
    letter-spacing: 0.22em;
    border-bottom-width: 1px;
    padding-bottom: 0.4em;
    padding-right: 2em;
}
.znv-fullscreen-nav .znv-menu-subcategory {
    margin-top: 0.6em;
    margin-bottom: 0.05em;
}
.znv-fullscreen-nav .znv-menu-subcategory span {
    font-size: 0.6rem;
    color: #6f7280;
}
.znv-fullscreen-nav .znv-menu-item-highlight a {
    font-size: 1.2rem !important;
}
.znv-fullscreen-nav .znv-menu-item a small.text-warning {
    font-size: 0.55em;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    font-weight: 600;
    margin-left: 0.5em;
    vertical-align: middle;
}

/* ============================================================
   HERO HOME — render Infecté à la place du logo Z
   ============================================================ */
.znv-hero-render {
    max-width: 120%;
    width: 120%;
    height: auto;
    margin-left: -15%;
    filter:
        drop-shadow(0 4px 8px rgba(0, 0, 0, 0.45))
        drop-shadow(0 22px 50px rgba(0, 0, 0, 0.6))
        drop-shadow(0 0 35px rgba(0, 221, 255, 0.22));
    animation: znv-hero-float 5s ease-in-out infinite;
    transform-origin: center;
}

@keyframes znv-hero-float {
    0%, 100% { transform: translateY(0); }
    50%      { transform: translateY(-12px); }
}

@media (max-width: 768px) {
    .znv-hero-render {
        max-width: 90%;
        width: 90%;
        margin: 0 auto;
        display: block;
    }
}

/* ============================================================
   MENU FULLSCREEN — refonte v3 (clean & joli)
   ============================================================ */

/* Désactive les anciens styles */
.znv-fullscreen-nav { display: none !important; }

/* Container principal du menu, aligné à droite */
.znv-menu-clean {
    text-align: right;
    max-width: 560px;
    margin-left: auto;
    padding-right: 1rem;
    color: #ffffff;
}

/* Bouton close - position fixe en haut à droite, hors flux du menu */
.znv-menu-close {
    position: fixed !important;
    top: 1.5rem !important;
    right: 1.5rem !important;
    left: auto !important;
    margin: 0 !important;
    width: 48px !important;
    height: 48px !important;
    padding: 0 !important;
    background: rgba(255, 255, 255, 0.08) !important;
    border: 1px solid rgba(255, 255, 255, 0.12) !important;
    color: #ffffff !important;
    border-radius: 50% !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    z-index: 10000;
    transition: background 0.2s, transform 0.2s;
    cursor: pointer;
}
.znv-menu-close:hover {
    background: rgba(255, 255, 255, 0.18) !important;
    transform: rotate(90deg);
    color: #ffffff !important;
}

/* Lien Accueil — entête #1 */
.znv-menu-home {
    display: inline-block;
    font-size: 1.6rem;
    font-weight: 700;
    color: #ffffff;
    text-decoration: none;
    letter-spacing: 0.02em;
    padding: 0.6em 0;
    margin-bottom: 1.5rem;
    border-bottom: 2px solid transparent;
    transition: color 0.2s, border-color 0.2s;
}
.znv-menu-home i {
    color: #00DDFF;
    margin-right: 0.4em;
}
.znv-menu-home:hover {
    color: #00DDFF;
    border-bottom-color: #00DDFF;
}

/* Section (JOUER, INFOS, MON COMPTE) */
.znv-menu-section {
    margin-bottom: 2rem;
    padding-bottom: 1.5rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.znv-menu-section:last-of-type { border-bottom: none; }

/* Titre de section — petit, cyan, uppercase */
.znv-menu-sectitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.75rem;
    font-weight: 600 !important;
    color: #00DDFF !important;
    text-transform: uppercase;
    letter-spacing: 0.22em !important;
    margin: 0 0 1rem 0;
    text-align: right;
}
.znv-menu-sectitle i {
    margin-right: 0.4em;
    font-size: 1em;
    opacity: 0.85;
}

/* Liste d'items dans une section */
.znv-menu-list {
    margin: 0;
    padding: 0;
}
.znv-menu-list li {
    margin: 0.15rem 0;
}
.znv-menu-list a {
    display: inline-block;
    font-size: 1.15rem;
    font-weight: 500;
    color: #e6e7ee;
    text-decoration: none;
    padding: 0.35rem 0;
    transition: color 0.2s, transform 0.2s;
    position: relative;
}
.znv-menu-list a:hover {
    color: #00DDFF;
    transform: translateX(-6px);
}
.znv-menu-list a i {
    font-size: 0.85em;
    opacity: 0.75;
    margin-right: 0.3em;
}

/* Grille 2 colonnes pour INFOS */
.znv-menu-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0.5rem 2.5rem;
}
.znv-menu-subcol {
    text-align: right;
}
.znv-menu-subtitle {
    font-family: 'Poppins', sans-serif !important;
    font-size: 0.7rem;
    font-weight: 500 !important;
    color: #8a8c98 !important;
    text-transform: uppercase;
    letter-spacing: 0.16em !important;
    margin: 0 0 0.5rem 0;
    padding-bottom: 0.3rem;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}
.znv-menu-subcol .znv-menu-list a {
    font-size: 1rem;
}

/* Badge "bientôt" plus discret */
.znv-menu-soon {
    display: inline-block;
    font-size: 0.6rem;
    font-weight: 700;
    color: #1d1d24;
    background: #FFD93D;
    padding: 0.1em 0.5em;
    border-radius: 3px;
    margin-left: 0.4em;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    vertical-align: middle;
}

/* Icône lien externe */
.znv-menu-ext {
    font-size: 0.7em;
    opacity: 0.5;
    margin-left: 0.3em;
}

/* CTA Voter - bloc spécial avec fond doré subtil */
.znv-menu-vote-cta {
    display: flex;
    align-items: center;
    gap: 1rem;
    padding: 1rem 1.3rem;
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.12), rgba(255, 217, 61, 0.04));
    border: 1px solid rgba(255, 217, 61, 0.25);
    border-radius: 12px;
    text-decoration: none;
    margin-bottom: 2rem;
    transition: background 0.25s, border-color 0.25s, transform 0.2s;
    text-align: left;
}
.znv-menu-vote-cta:hover {
    background: linear-gradient(135deg, rgba(255, 217, 61, 0.2), rgba(255, 217, 61, 0.08));
    border-color: rgba(255, 217, 61, 0.5);
    transform: translateY(-2px);
}
.znv-menu-vote-icon {
    width: 44px;
    height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(255, 217, 61, 0.18);
    color: #FFD93D;
    border-radius: 50%;
    font-size: 1.3rem;
}
.znv-menu-vote-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.1rem;
}
.znv-menu-vote-text strong {
    color: #FFD93D;
    font-size: 1.05rem;
    font-weight: 700;
}
.znv-menu-vote-text small {
    color: #b8b9c4;
    font-size: 0.78rem;
    font-weight: 400;
}
.znv-menu-vote-arrow {
    color: #FFD93D;
    font-size: 1.2rem;
    transition: transform 0.25s;
}
.znv-menu-vote-cta:hover .znv-menu-vote-arrow {
    transform: translateX(4px);
}

/* Responsive */
@media (max-width: 768px) {
    .znv-menu-clean {
        max-width: 100%;
        padding-right: 0.5rem;
    }
    .znv-menu-grid {
        grid-template-columns: 1fr;
        gap: 1rem;
    }
    .znv-menu-home { font-size: 1.3rem; }
    .znv-menu-list a { font-size: 1rem; }
    .znv-menu-subcol .znv-menu-list a { font-size: 0.95rem; }
}

/* ============================================================
   MENU FULLSCREEN — pied de menu (Profil / Déconnexion)
   ============================================================ */
.znv-menu-footer {
    margin-top: 1.5rem;
    padding-top: 1.2rem;
    border-top: 1px solid rgba(255, 255, 255, 0.08);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 0.7rem;
    text-align: right;
}
.znv-menu-foot-link {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: 0.82rem;
    color: #b8b9c4;
    text-decoration: none;
    transition: color 0.2s;
    letter-spacing: 0.01em;
}
.znv-menu-foot-link i {
    font-size: 0.95em;
    opacity: 0.8;
}
.znv-menu-foot-link:hover {
    color: #ffffff;
}
.znv-menu-foot-link.znv-menu-foot-logout:hover {
    color: #ff6b6b;
}
.znv-menu-foot-sep {
    color: #4a4b58;
    font-size: 0.7rem;
}

/* =================== SHOP — refresh =================== */
.shop-hero {
    height: 30vh;
    min-height: 220px;
}
.shop-hero .container {
    z-index: 2;
}
.shop-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,.15) 0%, rgba(0,0,0,.55) 100%);
    z-index: 1;
}

.shop-credits-sticky {
    position: sticky;
    top: 70px;
    z-index: 50;
}
.shop-credits-sticky .card {
    backdrop-filter: blur(6px);
    background-color: rgba(28, 28, 32, 0.85);
}
@media (max-width: 768px) {
    .shop-credits-sticky { position: static; }
}

.shop-timer {
    background: rgba(255,255,255,0.06);
    border: 1px solid rgba(255,255,255,0.12);
    padding: 0.4rem 0.9rem;
    border-radius: 999px;
    font-variant-numeric: tabular-nums;
    font-size: 0.95rem;
}
.shop-timer .shop-timer-value {
    font-weight: 700;
    color: #00DDFF;
    margin-left: 0.25rem;
}

/* Cartes cosmétiques — badges */
.shop-card { position: relative; overflow: hidden; }
.shop-card-badges {
    position: absolute;
    top: 10px;
    left: 10px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    z-index: 3;
    pointer-events: none;
}
.shop-badge {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    font-size: 0.72rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 3px 8px;
    border-radius: 999px;
    background: rgba(0,0,0,0.55);
    color: #fff;
    backdrop-filter: blur(4px);
    border: 1px solid rgba(255,255,255,0.15);
}
.shop-badge-new {
    background: linear-gradient(90deg, #00F7CE, #00DDFF);
    color: #052b3a;
    border-color: transparent;
}
.shop-badge-owned {
    background: rgba(35, 161, 38, 0.85);
    border-color: rgba(255,255,255,0.25);
}
.shop-badge-rarity { background: rgba(0,0,0,0.65); }

/* État "déjà possédé" */
.shop-card-owned .card-img { filter: grayscale(60%) brightness(0.85); }
.shop-card-owned::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.18);
    pointer-events: none;
    z-index: 1;
}

/* Glow par rareté (subtil sur Légendaire, plus marqué sur Mythique) */
.card.card-legendary {
    box-shadow: 0 0 18px rgba(218, 190, 14, 0.45), inset 0 0 0 1px rgba(255, 230, 100, 0.4);
}
.card.card-mythic {
    box-shadow: 0 0 22px rgba(255, 60, 60, 0.55), inset 0 0 0 1px rgba(255, 120, 120, 0.5);
    animation: shop-mythic-pulse 2.4s ease-in-out infinite;
}
@keyframes shop-mythic-pulse {
    0%, 100% { box-shadow: 0 0 18px rgba(255, 60, 60, 0.45), inset 0 0 0 1px rgba(255, 120, 120, 0.5); }
    50%      { box-shadow: 0 0 32px rgba(255, 60, 60, 0.75), inset 0 0 0 1px rgba(255, 160, 160, 0.7); }
}
@media (prefers-reduced-motion: reduce) {
    .card.card-mythic { animation: none; }
}

/* =================== SHOP — fiche cosmétique =================== */
.shop-show-preview {
    overflow: hidden;
    background-color: #292931;
}
.shop-show-info .shop-price {
    font-size: 1.1rem;
    font-weight: 700;
    color: #00DDFF;
}
.shop-tabs {
    border-bottom: 1px solid rgba(255,255,255,0.12);
}
.shop-tabs .nav-link {
    color: rgba(255,255,255,0.7);
    border: 0;
    border-bottom: 2px solid transparent;
    background: transparent;
    padding: 0.5rem 1rem;
}
.shop-tabs .nav-link:hover {
    color: #fff;
}
.shop-tabs .nav-link.active {
    color: #00DDFF;
    border-bottom-color: #00DDFF;
    background: transparent;
}

/* Auto-complete pseudo */
.shop-gift-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 16px;
    height: 16px;
    pointer-events: none;
}
.shop-gift-icon.is-loading {
    border: 2px solid rgba(255,255,255,0.25);
    border-top-color: #00DDFF;
    border-radius: 50%;
    animation: shop-spin 0.8s linear infinite;
}
.shop-gift-icon.is-ok::before {
    content: "✓";
    color: #23a126;
    font-weight: 700;
    line-height: 16px;
}
.shop-gift-icon.is-err::before {
    content: "✕";
    color: #ff6b6b;
    font-weight: 700;
    line-height: 16px;
}
@keyframes shop-spin { to { transform: translateY(-50%) rotate(360deg); } }

/* =================== SHOP — crédits insuffisants =================== */
.shop-insufficient-icon {
    font-size: 3rem;
    color: #ff9b3d;
}
.shop-insufficient .shop-missing {
    color: #ff6b6b;
    font-size: 1.25rem;
}