@media screen and (max-width :960px) {
    .conteneur {
        flex-direction: column;
    }
    p{
        overflow:scroll;
    }
}
*{
    box-sizing: border-box;
}

body { 
    font-family: 'Segoe UI', Arial, sans-serif;, cursive;
    margin: 0;
    padding: 0; 
    background: #1e1e1e;
    color: white;
    height: 100vh;
    display: flex;
    align-items: flex-start;
    justify-content: flex-start;
    flex-direction: column;
    overflow: hidden; /* Empêche le scroll horizontal */
}

.container-new {
    display: flex;
    width: 1640px;
    min-height: 900px;
    flex-shrink: 0;
    margin-left: auto;
    margin-right: auto;
    background-color: #1e1e1e;
    flex-direction: row;
    border-radius: 10px;
    overflow: hidden;
}

/* Barre latérale */
.sidebar-container-new {
    z-index: 10;
    width: 240px;
    display: flex;
    flex-direction: column;
    background-color: #030C11;
    border: 2px solid #614F3A; 
    box-shadow: 2px 0 5px rgba(0, 0, 0, 0.2);
}

.profile-box {
    width: 100%;
    padding: 15px;
    background-color: #030C11;
    text-align: center;
    border: 2px solid #614F3A; 
}

.profile-box img {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    margin-bottom: 10px;
    object-fit: cover;
    border: 2px solid #614F3A; 
}

.profile-box button {
    background-color: #030C11; 
    padding: 8px 15px;
    margin: 5px;
    cursor: pointer;
    border-radius: 5px;
    border: 2px solid #614F3A; 
    color: white;
    font-size: 14px;
    transition: background 0.3s;
}

.profile-box button:hover {
    background: #ffaa33;
    box-shadow: 0 0 15px rgba(255, 223, 153, 0.7); /* Ombre au survol */
}

/* Barre de navigation */
.sidebar ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.sidebar ul li {
    margin: 0;
}

.sidebar ul li a {
    text-decoration: none;
    color: white;
    display: block;
    padding: 12px 20px;
    text-align: center;
    border-bottom: 2px solid #614F3A; 
    transition: all 0.3s ease;
}

.sidebar ul li a:hover {
    background: rgba(255,255,255,0.1);
    color: gold;
    border-left: 4px solid goldenrod;
    transform: scale(1.05);
    box-shadow: 0 0 10px goldenrod;
}

/* Barre de ressources */
.btn-reward {
    width: 100%;
    background-color: #030C11;
    padding: 12px 5px;
    text-align: center;
    position: sticky;
    top: 0;
    z-index: 10;
    border-top: 2px solid #614F3A; 
    border-right: 2px solid #614F3A;
    border-bottom: 2px solid #614F3A;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    color: white;
    margin: 5px;
}
.niveau-ligne {
  display: flex;
  align-items: center;
  gap: 6px; /* petit espace entre texte et bouton */
}

.plus-niveau {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width: 18px;
  height: 18px;
  border: 1px solid #fff;
  border-radius: 3px;
  background: #222;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-size: 12px;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
}

.plus-niveau:hover {
  background: #444;
  transform: scale(1.1);
}
.recompense {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  color: #fff;
  font-weight: bold;
  cursor: pointer;
  font-size: 28px;
  line-height: 1;
  transition: transform 0.2s ease, background 0.2s ease;
  filter: drop-shadow(0 0 6px rgba(255, 215, 0, 0.6));
}

.recompense:hover {
  transform: scale(1.1);
}
.condition {
    margin-bottom: 15px;
}

.progress-bar-condition {
    width: 100%;
    background-color: #555;
    border-radius: 10px;
    overflow: hidden;
    height: 20px;
}

.progress-fill-condition {
    height: 100%;
    background-color: #4caf50;
    width: 0%;
    transition: width 0.5s ease-in-out;
}

.resources {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 15px;
    font-size: 14px;
    color: white;
    width: 100%;
    background-color: #030C11;
    padding: 12px 5px;
    border-top: 2px solid #614F3A;
    border-right: 2px solid #614F3A;
    border-bottom: 2px solid #614F3A;
    box-shadow: 0 3px 8px rgba(0, 0, 0, 0.3);
    flex-shrink: 0;
}

.resource {
    display: flex;
    align-items: center;
    flex-shrink: 0;
    padding: 5px 10px;
    background-color: #030C11;
    border-radius: 10px;
    border: 2px solid #614F3A; 
}

.resource img {
    width: 18px;
    height: 18px;
    margin-right: 5px;
}
.reward-popup {
    position: absolute;
    background-color: #030C11;
    color: #fff;
    border: 2px solid #614F3A;
    border-radius: 10px;
    padding: 10px;
    margin-top: 100px;
    z-index: 1000;
    box-shadow: 0 0 15px rgba(0,0,0,0.5);
    width: max-content;
}

/* Contenu principal */
.main-content {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    background-color: transparent;
    padding: 0px;
    border-radius: 0 0 0px 0px;
    border-right: 2px solid #614F3A; 
    border-bottom: 2px solid #614F3A;
}
header, #game-content {
    max-width: 1400px;
    margin: 0 auto;
}
    #game-content {
        flex-grow: 1;
        padding: 20px;
        border-radius: 0px;
        box-shadow: 0 0 10px rgba(255, 215, 0, 0.5);
        width: 100%;
        text-align: center;
        color: #fcfcfc;
        border: 1px solid #666;
        background-position: center center;
        background-repeat: no-repeat;
        background-size: cover;
        transition: background-image 0.8s ease-in-out, background-color 0.8s ease-in-out;
        max-width: 1400px;
        margin: 0 auto;
    }
    
    /* Fonds pour chaque lieu */
    #game-content[data-lieu="grotte"] {
 /*   background-image: url('image_faite_par_ia/fond_grotte_principal2.png'); */
    }
    #game-content[data-lieu="grotte_inventaire"] {
        background-image: url('image_faite_par_ia/fond_grotte_inventaire.png');
    }
    #game-content[data-lieu="carte"] {
        background-image: url('image_faite_par_ia/carte_monde2.png');
    }
    
    #game-content[data-lieu="taverne"] {
        background-image: url('image_faite_par_ia/taverne_expe.png');
    }
        /* Si pénurie active *et* qu'on est à la taverne */
    #game-content[data-lieu="taverne"][data-evenement="penurie"] {
    background-image: url('image_faite_par_ia/taverne_penurie.png');
    }
    #game-content[data-lieu="ladder"] {
        background-image: url('image_faite_par_ia/fond_ladder.png');
    }
    #game-content[data-lieu="page_perso"] {
        background-image: url('image_faite_par_ia/page_perso.png');
    }
    #game-content[data-lieu="sanctuaire1"] {
        background-image: url('image_faite_par_ia/salle1_sanctuaire.png');
    }
    #game-content[data-lieu="sanctuaire2"] {
        background-image: url('image_faite_par_ia/salle2_sanctuaire.png');
    }   
    #game-content[data-lieu="patchnote"] {
        background-image: url('image_faite_par_ia/patchnote.png');
    }
    #game-content[data-lieu="mail"] {
        background-image: url('image_faite_par_ia/fond_mail.png');
    }
    #game-content[data-lieu="guilde"] {
        background-image: url('image_faite_par_ia/fond_guilde.png');
    }    
    #game-content[data-lieu="amis"] {
        background-image: url('image_faite_par_ia/fond_amis.png');
    }
    #game-content[data-lieu="metier"] {
        background-image: url('image_faite_par_ia/page_métier2.png');
    }
    #game-content[data-lieu="metier2"] {
        background-image: url('image_faite_par_ia/interieur_metier.png');
    }
    #game-content[data-lieu="marche_metier"] {
        background-image: url('image_faite_par_ia/marche_métier2.png');
    }
    #game-content[data-lieu="boutique_premium"] {
    background-image: url('image_faite_par_ia/fond_boutique_premium.png');
    }
    #game-content[data-lieu="boutique"] {
        background-image: url('image_faite_par_ia/boutique2.png');
    }
    #game-content[data-lieu="donjon"] {
        background-image: url('image_faite_par_ia/donjon2.png');
    }
    /* Si éboulement actif au donjon */
    #game-content[data-lieu="donjon"][data-evenement="eboulement"] {
    background-image: url('image_faite_par_ia/donjon_eboulement.png');
    }
    #game-content[data-lieu="profil"] {
        background-image: url('image_faite_par_ia/fond-pierre.png');
    }
    #game-content[data-lieu="voyante"] {
    background-image: url('image_faite_par_ia/salle_voyante1.png');
    }
    #game-content[data-lieu="artisans"] {
    background-image: url('image_faite_par_ia/quartier_artisans.png');
    }
    #game-content[data-lieu="alchimiste"] {
    background-image: url('image_faite_par_ia/salle_alchimiste.png');
    }
    #game-content[data-lieu="arene"] {
    background-image: url('image_faite_par_ia/fond-dragon.png');
    padding-top: 0;
    } 
    #game-content[data-lieu="page1"] {
    background-image: url('image_faite_par_ia/fond-dragon.png');
    padding-top: 0;
    } 
    #game-content[data-lieu="evenement"] {
        background-image: url('image_faite_par_ia/fond-dragon.png');
    }    
    /* Si jamais aucune correspondance */
    #game-content[data-lieu="default"] {
        background-image: url('image_faite_par_ia/fond-dragon.png');
    }
    #game-content.fond-boss {
    background-size: cover;
    background-position: center;
}
#game-content[data-lieu="arene"] {
    flex-grow: 0;  
    aspect-ratio: 3 / 2;
    position: relative;
    overflow: visible;
    align-self: stretch;
    padding: 0;
    width: 100%;
    max-width: 1400px;
    height: auto;
}
#game-content[data-lieu="grotte"],
#game-content[data-lieu="grotte_inventaire"],
#game-content[data-lieu="taverne"],
#game-content[data-lieu="carte"],
#game-content[data-lieu="donjon"],
#game-content[data-lieu="voyante"],
#game-content[data-lieu="metier"],
#game-content[data-lieu="metier2"],
#game-content[data-lieu="marche_metier"],
#game-content[data-lieu="artisans"],
#game-content[data-lieu="alchimiste"],
#game-content[data-lieu="sanctuaire1"],
#game-content[data-lieu="sanctuaire2"],
#game-content[data-lieu="page_perso"],
#game-content[data-lieu="page1"],
#game-content[data-lieu="ladder"],
#game-content[data-lieu="boutique"],
#game-content[data-lieu="boutique_premium"],
#game-content[data-lieu="mail"],
#game-content[data-lieu="guilde"],
#game-content[data-lieu="amis"],
#game-content[data-lieu="profil"],
#game-content[data-lieu="patchnote"],
#game-content[data-lieu="evenement"],
#game-content[data-lieu="default"] {
    flex-grow: 0;  
    aspect-ratio: 3 / 2; 
    position: relative;  
    overflow: hidden;    
    padding: 0;
    align-self: stretch; 
    width: 100%;          /* ← ajouté */
    max-width: 1400px;        
}
/* Responsivité */
/* Bouton hamburger — visible uniquement en mobile, fixe pour ne dépendre d'aucun layout */
.hamburger-btn {
    display: none;
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 2100;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: #030C11;
    border: 2px solid #614F3A;
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
.resources-toggle-btn {
    display: none;
    position: fixed;
    top: 10px;
    right: 10px;
    z-index: 2100;
    width: 38px;
    height: 38px;
    align-items: center;
    justify-content: center;
    background: #030C11;
    border: 2px solid #614F3A;
    border-radius: 6px;
    color: #fff;
    font-size: 20px;
    cursor: pointer;
}
@media (max-width: 1515px) {
    .resources-toggle-btn { display: flex; }
    .resources {
        visibility: hidden;
        height: 0;
        overflow: hidden;
        padding: 0;
        margin: 0;
        border: none;
        box-shadow: none;
    }
    .resources.mobile-open {
        visibility: visible;
        height: auto;
        overflow: visible;
        padding: 15px;
        position: fixed;
        top: 0;
        left: 0;
        width: 100%;
        z-index: 2050;
        background: #030C11;
        box-shadow: 0 4px 15px rgba(0, 0, 0, 0.5);
        flex-wrap: wrap;
        justify-content: center;
    }
}
/* TABLETTE 768px–1200px : on garde la sidebar visible mais plus étroite */
@media (max-width: 1200px) {
    .sidebar-container-new {
        width: 190px;
    }

    .sidebar ul li a {
        font-size: 14px;
        padding: 10px 12px;
    }

    .resources {
        left: 190px;
        width: calc(100% - 190px);
    }
    .profile-box {
        padding: 8px;
    }
    .profile-box img {
        width: 50px;
        height: 50px;
        margin-bottom: 4px;
    }
    .profile-box button {
        padding: 4px 8px;
        margin: 2px;
        font-size: 0.8em;
    }
}

/* MOBILE < 768px : sidebar en panneau caché (hamburger) */
@media (max-width: 1100px) {

    .profile-box {
        padding: 8px;
    }
    .profile-box img {
        width: 50px;
        height: 50px;
        margin-bottom: 4px;
    }
    .profile-box button {
        padding: 4px 8px;
        margin: 2px;
        font-size: 0.8em;
    }
    .resources {
        left: 0;
        width: 100%;
    }
}
@media (max-width: 600px) {
    .welcome-content {
        width: 90%; /* Utilise plus de largeur pour les petits écrans */
    }

    .overlay-content {
        width: 90%;
    }
}
/* Style de l'overlay */
#welcome-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: url('image_faite_par_ia/fond-dragon.jpg') no-repeat center center fixed;
    background-size: cover;
    display: flex; /* Ne s'affiche pas par défaut */
    justify-content: center;
    align-items: center;
    z-index: 1000;
    opacity: 0; /* Commence invisible */
    transition: opacity 0.5s ease; /* Animation fluide pour l'opacité */
}

/* Lorsque l'overlay est actif, il devient visible */
#welcome-overlay.active {
    opacity: 1;
    transition: opacity 0.5s ease, filter 0.5s ease; /* Animation fluide */
}

.welcome-content {
    background: rgba(0, 0, 0, 0.7) url('image_faite_par_ia/etoiles.png') repeat;
    padding: 20px;
    border-radius: 10px;
    text-align: center;
    width: 80%;
    max-width: 500px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    color: white;
}

.welcome-content h2 {
    font-family: 'Lobster', sans-serif;
    font-size: 2em;
    color: #333;
}

.welcome-content img {
    max-width: 100%;
    margin-top: 15px;
    border-radius: 8px;
}

.welcome-content button {
    background-color: #4CAF50;
    color: white;
    border: none;
    padding: 10px 20px;
    font-size: 1.2em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.3s;
}

.welcome-content button:hover {
    background-color: #45a049;
    box-shadow: 0 0 10px 2px #4CAF50;
}
.note-plateforme {
    font-size: 0.85em;
    color: #ccc;
    font-style: italic;
    margin-top: -5px;
}
/* Overlay général */
.overlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.7); /* Fond sombre transparent */
    display: none; /* Masqué par défaut */
    justify-content: center;
    align-items: center;
    z-index: 1000; /* S'assurer que l'overlay reste au-dessus des autres éléments */
    padding: 10px; /* Pour éviter que le contenu touche les bords */
    color: #000;
    overflow-y: auto; /* Permet de défiler si le contenu est trop long */
}
@keyframes slideIn {
    0% { transform: translateY(-30px); opacity: 0; }
    100% { transform: translateY(0); opacity: 1; }
}
.success-msg {
    color: green;
    font-weight: bold;
    margin-top: 10px;
}

.login-error {
    color: red;
    font-weight: bold;
    margin-top: 10px;
    animation: shake 0.5s ease-in-out;
}

@keyframes shake {
    0% { transform: translateX(-5px); }
    25% { transform: translateX(5px); }
    50% { transform: translateX(-5px); }
    75% { transform: translateX(5px); }
    100% { transform: translateX(0); }
}
/* Contenu de l'overlay */
.overlay-content {
    background: rgba(0, 0, 0, 0.7) url('image_faite_par_ia/etoiles.png') repeat;
    border-radius: 10px;
    padding: 20px;
    width: 80%; /* Réduit la largeur pour s'assurer que ça tient dans la fenêtre */
    max-width: 600px; /* Limite la largeur maximale pour les écrans plus grands */
    max-height: 80vh; /* 80% de la hauteur de la fenêtre */
    overflow-y: auto; /* Permet de défiler si le contenu est trop long */
    box-sizing: border-box; /* Prendre en compte le padding dans la largeur */
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-out;
    color: white;
    position: relative;
}

/* Style du formulaire dans l'overlay */
form {
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espacement entre les éléments du formulaire */
}

/* Alignement des labels et champs de saisie */
form label {
    font-size: 16px; /* Taille de police pour les labels */
    margin-bottom: 5px; /* Espacement sous le label */
    font-weight: bold; /* Optionnel : met le label en gras pour une meilleure lisibilité */
}

/* Style des champs de saisie (input et select) */
form input, form select {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%; /* S'assure que les champs prennent toute la largeur disponible */
    box-sizing: border-box; /* Prendre en compte le padding dans la largeur */
}

/* Style des boutons du formulaire */
form input[type="submit"], form input[type="reset"] {
    background-color: #030C11;
    color: #fff;
    border: 2px solid #614F3A;
    cursor: pointer;
    padding: 12px;
    border-radius: 4px;
    font-size: 16px;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

form input[type="submit"]:hover, form input[type="reset"]:hover {
    background-color: #614F3A;
    transform: translateY(-2px);
    box-shadow: 0 0 8px gold;
}

/* Style du bouton de fermeture */
.close-overlay {
    position: absolute;
    top: 10px;
    right: 15px;
    font-size: 30px;
    color: #fff;
    cursor: pointer;
    transition: transform 0.2s ease;
}
.close-overlay:hover {
    color: #e74c3c; /* Couleur rouge dynamique */
    transform: rotate(90deg); /* Effet de rotation */
    transform: scale(1.1); /* Agrandit légèrement au survol */
    transition: color 0.3s, transform 0.3s;
}

.login-box {
    background: rgba(0, 0, 0, 0.7) url('image_faite_par_ia/etoiles.png') repeat;
    border-radius: 10px;
    padding: 35px 30px 30px 30px;
    width: 80%;
    max-width: 400px;
    box-shadow: 0 4px 10px rgba(0, 0, 0, 0.1);
    animation: slideIn 0.5s ease-out;
    color: white;
    position: relative;
}

.login-box input {
    padding: 10px;
    font-size: 16px;
    border: 1px solid #ccc;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
    margin-bottom: 12px;
}

.login-box button {
    background-color: #030C11;
    color: #fff;
    border: 2px solid #614F3A;
    cursor: pointer;
    padding: 12px;
    border-radius: 4px;
    font-size: 16px;
    width: 100%;
    transition: transform 0.2s ease, background-color 0.2s ease;
}

.login-box button:hover {
    background-color: #614F3A;
    transform: translateY(-2px);
    box-shadow: 0 0 8px gold;
}

.container-new.blurred {
    filter: blur(10px);
    pointer-events: none;
    user-select: none;
}
#containeur {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    overflow: hidden;
}
#containeur-page1 {
    position: relative;
    width: 100%;
    height: 100%;
    transform-origin: top left;
    overflow: hidden;
}
.bas-page {
    text-align: center;
}

/* Petit effet lumineux pulsé */
@keyframes pulse {
    0% { transform: scale(1); opacity: 0.7; }
    50% { transform: scale(1.2); opacity: 1; }
    100% { transform: scale(1); opacity: 0.7; }
}
/* Animation de scintillement doré */
@keyframes glowMagic {
    0% { transform: scale(1); box-shadow: 0 0 0px gold; }
    30% { transform: scale(1.2); box-shadow: 0 0 15px gold; }
    60% { transform: scale(1.1); box-shadow: 0 0 10px gold; }
    100% { transform: scale(1); box-shadow: 0 0 0px gold; }
}
.btn-desactive {
    position: relative;
    opacity: 0.5;
    cursor: not-allowed;
    filter: grayscale(40%);
}

.badge-soon {
    position: absolute;
    top: -6px;
    right: -6px;
    background: #d4af37;
    color: #1e1e1e;
    font-size: 10px;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 8px;
    box-shadow: 0 0 6px rgba(0,0,0,0.5);
    transform: rotate(8deg);
}
.lien-debloque-animation {
    animation: glowMagic 1.2s ease forwards;
}
 /* Style général pour les sections du contenu */
 .metier-selection, .tarifs, .specialisations, .commandes {
    margin-bottom: 20px;
}
.metier-selection, .tarifs, .specialisations {
    display: flex;
    flex-wrap: wrap;
    gap: 20px; /* Espacement entre les éléments */
}

.commandes table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.commandes table th, .commandes table td {
    padding: 8px;
    border: 1px solid #ddd;
}

.commandes table th {
    background-color: #f4f4f4;
}

.commandes a {
    color: rgb(32, 207, 32);
    text-decoration: none;
}

.commandes a:hover {
    text-decoration: underline;
}

/* Styliser les sections avec des titres */
.metier-selection h3, .specialisations h3, .tarifs h3, .commandes h3 {
    font-size: 1em;
    margin-bottom: 2px;
}
.commandes table {
    width: 100%;
    border-collapse: collapse;
    text-align: center;
}

.commandes table th, .commandes table td {
    padding: 8px;
    border: 2px solid #614F3A;;
}

.commandes table th {
    background-color: #f4f4f4;
    color: black;
}
.specialisations img {
    width: 50px;  /* Ajuste la taille de l'image */
    height: auto;
}

@media (max-width: 768px) {
    .commandes table {
        font-size: 12px;
    }
}

/* Responsivité */
@media (max-width: 768px) {
    .metier-selection, .specialisations, .tarifs, .commandes {
        padding: 10px;
    }

    .metier-selection img, .specialisations img {
        width: 80px;
    }
}
.btnAfficherGrotte {
    position: absolute;
    top: 9.5%;
    left: 50%;
    transform: translateX(-50%);
    background: #3a2b1f;
    color: #fff8dc;
    border: 2px solid #d4af37;
    border-radius: 12px;
    padding: 6px 10px;
    font-weight: bold;
    cursor: pointer;
}

#btnAmeliorerGrotte {
    display: block; /* Sera visible car dans #infoGrotte qui contrôle l'affichage */
    margin-top: 10px; /* Ajoute un petit espace avec le texte */
}


/* Ajout d'une animation d'apparition */
#infoGrotte.active {
    display: block;
    animation: fadeIn 0.5s ease-in-out;
}

@keyframes fadeIn {
    from {
        opacity: 0;
        transform: translate(-50%, -10px);
    }
    to {
        opacity: 1;
        transform: translate(-50%, 0);
    }
}
/* Zones interactives invisibles */
.zone-generateur {
    position: absolute;
    cursor: pointer;
    background: rgba(255, 0, 0, 0); /* transparent */
}

/* Positionnements */
#zoneOr {
    top: 50%;
    left: 35%;
    width: 8%; 
    height: 20%;
    transform: translate(-50%, -50%);
}

#zoneXp {
    top: 52%;
    left: 67%;
    width: 8%; 
    height: 23%;
    transform: translate(-50%, -50%);
}

#zoneDraconium {
    top: 53%;
    left: 48%;
    width: 7%; 
    height: 20%;
    transform: translate(-50%, -50%);
}

.progress-container-batiment {
    position: relative;
    width: 50%;
    height: 30px;
    background-color: rgba(0, 0, 0, 0.4);
}

.progress-text-batiment {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 14px;
    font-weight: bold;
    z-index: 2;
    white-space: nowrap;
}

.progress-bar-batiment {
    width: 0%;
    height: 100%;
    position: relative;
    z-index: 1;
}

.bar-container {
    position: absolute;
    left: 34.5%;
    top: 32%;
    transform: translate(-50%, -50%);
    width: 10%;
    height: 3.5%;
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    overflow: hidden; /* Empêche tout dépassement */
    border: 1px solid #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2; /* S'assure que la barre est au-dessus de l'image */
}

/* Barre de progression */
.progress-bar {
    position: relative;
    height: 100%;
    width: 0%; /* Exemple de progression */
    background-color: rgb(7, 145, 64);
    transition: width 0.5s ease-in-out;
    z-index: 1; /* Derrière le texte */
}

/* Texte centré */
#compteurOr {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    z-index: 2; /* Devant la barre */
    font-weight: bold;
    color: white;
    font-size: 12px; /* Ajuste selon besoin */
}


.bar-container-xp {
        position: absolute;
        left: 67%;
        top: 33%;
        transform: translate(-50%, -50%);
        width: 13%;
        height: 3.5%;
        background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
        overflow: hidden; /* Empêche tout dépassement */
        border: 1px solid #d4af37;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2; /* S'assure que la barre est au-dessus de l'image */
    }
    
    /* Barre de progression */
.progress-bar-xp {
        position: relative;
        height: 100%;
        width: 0%; /* Exemple de progression */
        background-color: rgb(7, 145, 64);
        transition: width 0.5s ease-in-out;
        z-index: 1; /* Derrière le texte */
    }
    
    /* Texte centré */
#compteurXp {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2; /* Devant la barre */
        font-weight: bold;
        color: white;
        font-size: 12px; /* Ajuste selon besoin */
    }


.bar-container-draconium {
        position: absolute;
        left: 48%;
        top: 40%;
        transform: translate(-50%, -50%);
        width: 13%;
        height: 3.5%;
        background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
        overflow: hidden; /* Empêche tout dépassement */
        border: 1px solid #d4af37;
        display: flex;
        align-items: center;
        justify-content: center;
        z-index: 2; /* S'assure que la barre est au-dessus de l'image */
    }
    
    /* Barre de progression */
.progress-bar-draconium {
        position: relative;
        height: 100%;
        width: 0%; /* Exemple de progression */
        background-color: rgb(7, 145, 64);
        transition: width 0.5s ease-in-out;
        z-index: 1; /* Derrière le texte */
    }
    
    /* Texte centré */
#compteurDraconium {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        z-index: 2; /* Devant la barre */
        font-weight: bold;
        color: white;
        font-size: 12px; /* Ajuste selon besoin */
    }




/* Conteneur de la barre de progression du dragon */
.progress-bar-xp-dragon {
    position: relative;
    width: 100%; /* prend toute la largeur de la box */
    height: auto;
    min-height: 20px;
    background-color: rgba(0, 0, 0, 0.34); /* Fond semi-transparent */
    border-radius: 10px;
    overflow: hidden; /* Empêche les dépassements */
    border: 2px solid #d4af37;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
    box-sizing: border-box; /* inclut la bordure dans la largeur */
}


/* Barre de progression remplie */
.progress-bar-xp-fill-dragon {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    background: #4caf50;
    transition: width 0.5s ease;
    z-index: 1;
    border-radius: 9px 0 0 9px;
}

/* Texte centré sur la barre */
.progress-bar-xp-text-dragon {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-weight: bold;
    color: white;
    z-index: 2;
    font-size: clamp(0.5em, 0.8vw, 0.8em);
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 95%;
}

/* les pnj */ 

.pnj-clickable {
    position: absolute;
    width: 8%;
    height: 15%;
    cursor: pointer;
}
.pnj-clickable.pnj-taverne {
    width: 12%;
    height: 20%;
    cursor: pointer;
}
.pnj-clickable.pnj-boite-metier {
    width: 12%;
    height: 20%;
}
.pnj-clickable.pnj-metier {
    position: absolute;
    width: 15%;  /* taille de la zone cliquable autour du PNJ */
    height: 40%;
    transform: translateX(-50%);
    cursor: pointer;
}
.pnj-clickable.pnj-clickable--large {
    z-index: 1;
    width: 35%;
    height: 35%;
}
button.pnj-clickable.btnAfficherGrotte {
    width: auto;
    height: auto;
    padding: 6px 10px; /* tu gardes ton style */
} 

/* Nom qui apparaît au survol */
.pnj-name {
    position: absolute;
    bottom: 110%; /* juste au-dessus du PNJ */
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0,0,0,0.7);
    color: #fff;
    padding: 2px 6px;
    border-radius: 8px;
    font-weight: bold;
    font-family: "Segoe UI", Arial, sans-serif;, cursive;
    font-size: 12px;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.2s;
}
.pnj-image {
    display: block;
    width: 300px;
    height: 200px;
    object-fit: cover;
    transition: box-shadow 0.2s, transform 0.2s;
}

/* Légère animation au hover */
.pnj-clickable:hover .pnj-name {
opacity: 1;
}


/* modal pnj */


.pnj-modal {
    position: fixed;
    z-index: 1000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: none;
}
.pnj-modal-content { 
    background: #f5f0d5 url('https://www.transparenttextures.com/patterns/paper-fibers.png'); 
    color: #3b2e1a; 
    margin: auto; /* évite que 5% top + bottom génèrent du débordement */ 
    padding: 30px; 
    border: 5px solid #b4975a; 
    border-radius: 12px; 
    width: 80%; 
    max-width: 700px; 
    max-height: calc(90vh - 60px); /* Garde 30px en haut et 30px en bas */ 
    box-shadow: 0 0 20px rgba(255, 230, 150, 0.5); 
    font-family: 'Georgia', serif; 
    position: relative; 
    text-shadow: 1px 1px #fffbe6; 
    overflow-y: auto; /* Active le scroll vertical si besoin */ 
    overflow-x: hidden; /* 🔑 évite le scroll horizontal parasite */ 
    position: fixed; 
    top: 100px; /* distance depuis le haut de la fenêtre */ 
    left: 50%; 
    transform: translateX(-50%); 
}
body.modal-open {
  overflow: hidden;
  height: 100vh; /* évite qu'il reprenne une hauteur auto */
}

.pnj-close {
    position: absolute;
    top: 10px;
    right: 20px;
    color: #5a4a28;
    font-size: 28px;
    font-weight: bold;
    cursor: pointer;
    transition: color 0.3s ease;
}
.pnj-close:hover {
    color: #b4975a;
}
.modal-expedition {
    display: none;
    position: absolute;          /* 🔑 devient relatif au parent */
    z-index: 2000;               /* au-dessus du contenu du parent */
    top: 0; left: 0;
    width: 100%; height: 100%;   /* prend toute la zone du parent */
    background: rgba(0, 0, 0, 0);
    justify-content: center;
    align-items: center;
    font-family: 'Segoe UI', Arial, sans-serif;;
}
.modal-content {
    background: black;
    border: 4px solid #a67c52;
    padding: 2em;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
    color: #fff;
    text-align: center;

    width: 100%;          /* prend toute la largeur dispo du parent */
    max-width: 500px;     /* sans dépasser */
    margin: 20px auto;    /* centre horizontalement */
    box-sizing: border-box;
    display: block;       /* assure un bon comportement */
}

.modal-close {
  position: absolute;
  top: 10px; right: 15px;
  color: #ccc;
  font-size: 28px;
  font-weight: bold;
  cursor: pointer;
  user-select: none;
  transition: color 0.3s ease;
}
.modal-close:hover {
  color: gold;
}

.expedition-progress-container.fantasy {
    position: relative;
    background: linear-gradient(#3a2f1c, #231c13);
    border: 2px solid #8b5e3c;
    border-radius: 12px;
    height: 28px;
    margin: 10px 0;
    overflow: hidden;
    box-shadow: 0 0 8px #000 inset, 0 0 5px #d4af37;
}

.expedition-progress-bar.fantasy {
    background: linear-gradient(to right, #d4af37, #b8860b, #d4af37);
    height: 100%;
    width: 0%;
    transition: width 0.3s linear;
    box-shadow: inset 0 0 5px #000, 0 0 6px #ffd700;
}
.timer {
    position: absolute;
    width: 100%;
    text-align: center;
    top: 0;
    left: 0;
    font-weight: bold;
    color: #fff8dc;
    font-family: 'Segoe UI', Arial, sans-serif;; /* si dispo, style fantasy */
    font-size: 14px;
    text-shadow: 1px 1px 2px #000;
}

@keyframes magic-glow {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
.scene::before {
    content: "⚔️ Le combat fait rage... ⚔️";
    animation: pulseGlow 1.5s infinite;
    display: block;
    color: #fff3c4;
    font-size: 1.2em;
    margin-bottom: 1em;
}
@keyframes pulseGlow {
    0%, 100% { text-shadow: 0 0 5px #ff0, 0 0 15px #ff0; }
    50% { text-shadow: 0 0 10px #ff8000, 0 0 20px #ff8000; }
}
.badge-rouge {
    background: red;
    color: white;
    font-weight: bold;
    border-radius: 50%;
    padding: 2px 6px;
    font-size: 0.8em;
    margin-left: 5px;
    animation: clignote 1s infinite;
    min-width: 16px;
    text-align: center;
}

@keyframes clignote {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.4; }
}
.notification-expedition {
    position: fixed;
    bottom: 20px;
    right: 20px;
    background: rgba(30, 30, 30, 0.9);
    color: #ffd700;
    padding: 10px 15px;
    border: 2px solid #ffcc00;
    border-radius: 10px;
    box-shadow: 0 0 10px gold;
    font-family: 'Segoe UI', Arial, sans-serif;;
    z-index: 9999;
    animation: fadeIn 0.5s ease, fadeOut 0.5s ease 4.5s;
}

@keyframes fadeIn {
    from { transform: translateY(20px); opacity: 0; }
    to   { transform: translateY(0); opacity: 1; }
}

@keyframes fadeOut {
    to { opacity: 0; }
}
#modal-combat-expedition {
    display: none; /* JS mettra flex */
    position: fixed;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0,0,0,0.6);
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

#modal-combat-expedition .combat-container {
    background-color: #1c1c1c;
    padding: 20px;
    border-radius: 10px;
    color: #fff;
    max-width: 90%;
    max-height: 90%;
    overflow-y: auto;
}

/* --- Bouton de fermeture --- */
.combat-close {
    position: absolute;
    top: 10px;
    right: 15px;
    cursor: pointer;
    font-size: 26px;
    color: #ffd700;
}

.combat-close:hover {
    color: #ffcc66;
    transform: scale(1.2);
}
/* Animations d’ouverture */
@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}
@keyframes zoomIn {
    from { transform: scale(0.85); opacity: 0; }
    to { transform: scale(1); opacity: 1; }
}
.combat-wrapper {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    gap: 40px; /* 👈 maintenant bien appliqué ici */
    margin-top: 20px;
    margin-left: auto;
    margin-right: auto;
    width: 100%;
    max-width: 1300px;
    perspective: 1000px; /* 👈 Ajoute de la profondeur pour les animations */
}

.carte-monstre {
    background: linear-gradient(to bottom right, #d7f1d7, #b0d8b0);
    color: #2a2a2a;
    padding: 12px;
    position: relative;
    border-radius: 12px;
    border: 2px solid #4CAF50;
    max-width: 380px;
    min-width: 320px;
    font-family: 'Segoe UI', Arial, sans-serif;;
    box-shadow: 0 0 15px #356b35cc;
    animation: apparition-monstre 0.6s ease-out forwards;
    opacity: 1; /* 👈 Changé de 0 à 1 pour éviter le clignotement */
    flex: 1.2 1 350px;
    will-change: transform; /* 👈 Optimise les performances */
    backface-visibility: hidden; /* 👈 Empêche le clignotement pendant les animations */
}

.carte-monstre img {
    max-width: 100%;
    border-radius: 6px;
    margin-top: 8px;
    box-shadow: 0 0 8px #000;
    transition: transform 0.2s ease, filter 0.2s ease;
}

.carte-monstre:hover {
    box-shadow: 0 0 20px #c9a347, 0 0 40px #f3e1b3 inset;
    /* 👇 Désactive le hover pendant les animations */
}

.carte-monstre h3 {
    font-size: 1.1rem;
    margin-bottom: 8px;
    border-bottom: 1px solid #4caf50;
    padding-bottom: 4px;
    text-align: center;
}

.carte-monstre .niveau {
    font-weight: normal;
    font-size: 0.9rem;
    color: #444;
}

.carte-monstre ul {
    list-style-type: disc;
    padding-left: 20px;
    margin: 10px 0;
    color: #2a2a2a;
    font-weight: 600;
    background: rgba(255,255,255,0.2);
    padding: 8px;
    border-radius: 8px;
}

/* Apparition animée */
@keyframes apparition-monstre {
    0% { opacity: 0; transform: translateY(20px) scale(0.95); }
    100% { opacity: 1; transform: translateY(0) scale(1); }
}
.carte-monstre {
    animation: apparition-monstre 0.6s ease-out forwards;
    animation-fill-mode: forwards; /* 👈 Garde l'état final */
}

/* Empêche la réapplication de l'animation */
.carte-monstre.combat-ready {
    animation: none !important;
    opacity: 1 !important;
}
/* Variantes */
.carte-monstre.facile    { border-color: #4CAF50; background: #f0fff4; }
.carte-monstre.moyenne   { border-color: #FFA500; background: #fff8e1; }
.carte-monstre.difficile { border-color: #F44336; background: #fff0f0; }
.carte-monstre.joueur    { border-color: #2196F3; background: #e0f0ff; }
.carte-monstre.adversaire    { border-color: #2196F3; background: #e0f0ff; }

.carte-monstre.joueur:hover {
    box-shadow: 0 0 20px #2196F3, 0 0 40px #cde8ff inset;
}
.carte-monstre.adversaire:hover {
    box-shadow: 0 0 20px #2196F3, 0 0 40px #cde8ff inset;
}

/* Combat log */
.combat-log {
    flex: 1 1 350px;
    flex-grow: 1.2;
    max-width: 400px;
    min-width: 320px;
    background-color: #1f1f1f;
    padding: 12px;
    border-radius: 10px;
    color: #eee;
    font-family: 'Segoe UI', Arial, sans-serif;;
    box-shadow: 0 0 15px #000a;
    overflow-y: auto;
    height: 80%;
}

.combat-log p {
    margin-bottom: 10px;
}

.combat-log pre {
    background-color: #2a2a2a;
    padding: 8px;
    border-radius: 6px;
    overflow-x: auto;
    font-size: 0.9rem;
}

/* Résultat ambiance */
.resultats-expedition.victoire .combat-wrapper {
    box-shadow: 0 0 20px #4CAF50, 0 0 40px #4CAF50 inset;
    border: 2px solid #4CAF50;
    border-radius: 12px;
    animation: pulse-victoire 2s infinite;
}

.resultats-expedition.defaite .combat-wrapper {
    box-shadow: 0 0 20px #F44336, 0 0 40px #F44336 inset;
    border: 2px solid #F44336;
    border-radius: 12px;
    animation: pulse-defaite 2s infinite;
}
@keyframes pulse-victoire {
  0%, 100% { box-shadow: 0 0 20px #4CAF50, 0 0 40px #4CAF50 inset; }
  50% { box-shadow: 0 0 40px #4CAF50, 0 0 60px #4CAF50 inset; }
}

@keyframes pulse-defaite {
  0%, 100% { box-shadow: 0 0 20px #F44336, 0 0 40px #F44336 inset; }
  50% { box-shadow: 0 0 40px #F44336, 0 0 60px #F44336 inset; }
}
@media (max-width: 768px) {
  .combat-wrapper {
    flex-direction: column;
    align-items: center;
  }
}
.log-ligne-container div:not(.drops-container):not(.drop-item) {
  padding: 4px;
  margin-bottom: 2px;
  background: rgba(255,255,255,0.05);
  border-left: 3px solid #4CAF50;
  animation: fadeIn 0.5s ease;
}

.log-ligne-container div:not(.drops-container):not(.drop-item)::before {
  content: "⚔️ ";
  margin-right: 5px;
  animation: clignote 1s ease-in-out;
}
@keyframes clignote {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.3; }
}

@keyframes fadeIn {
  from { opacity: 0; transform: translateX(-10px); }
  to { opacity: 1; transform: translateX(0); }
}
.ligne-combat {
  animation: apparition 0.3s ease-in-out;
}
@keyframes apparition {
  from { opacity: 0; transform: translateY(5px); }
  to { opacity: 1; transform: translateY(0); }
}

.resoudre-expedition.desactive {
  opacity: 0.5;
  pointer-events: none;
  cursor: not-allowed;
}
.barre-vie {
  height: 12px;
  background: #333;
  border-radius: 6px;
  overflow: hidden;
  margin-top: 10px;
  box-shadow: inset 0 0 4px #000;
}

.vie-actuelle {
  height: 100%;
  background: linear-gradient(to right, #4caf50, #8bc34a); /* couleur par défaut = vert */
  width: 100%; /* sera mis à jour dynamiquement */
  transition: width 0.5s ease, background 0.5s ease;
}
.vie-verte {
  background: linear-gradient(to right, #4caf50, #8bc34a);
}
.vie-orange {
  background: linear-gradient(to right, #ff9800, #ffcc80);
}
.vie-rouge {
  background: linear-gradient(to right, #f44336, #ef9a9a);
}
.combat-colonne {
  flex: 1.2 1 350px;
  min-width: 330px;
  max-width: 400px;
}
@keyframes clignote-rouge {
  0% { box-shadow: 0 0 6px 2px red; }
  50% { box-shadow: 0 0 6px 4px #ff0000aa; }
  100% { box-shadow: none; }
}

.vie-actuelle.clignote-rouge {
  animation: clignote-rouge 0.4s ease;
}

/* Sélecteur de dragon en ligne (3 max) */
.dragon-selector {
    display: flex;
    justify-content: center;
    align-items: flex-end;
    gap: 2%;
}

.dragon-selector .dragon-thumb {
    cursor: pointer;
    text-align: center;
    transition: transform 0.2s, box-shadow 0.2s;
}

.dragon-selector .dragon-thumb img {
    width: 90px;   /* taille fixe pour cohérence */
    height: 90px;
    object-fit: cover;
    border: 2px solid #d4af37;
    border-radius: 10px;
}

.dragon-selector .dragon-thumb.selected {
    transform: scale(1.15); /* toujours un peu plus grand */
    box-shadow: 0 0 20px #ffd700, 0 0 40px #ffae00; /* halo doré */
    border: 2px solid #ffd700;
}

.dragon-selector .dragon-thumb:hover {
    transform: scale(1.1);
    box-shadow: 0 0 10px #ffd700;
}

.dragon-selector .dragon-thumb span {
    display: block;
    margin-top: 5px;
    font-family: 'Segoe UI', Arial, sans-serif;, cursive;
    font-size: 14px;
    color: #ffdd7f;
}
.dragon-thumb.disabled {
    opacity: 0.4;           /* légèrement transparent */
    cursor: not-allowed;    /* indique qu’on ne peut pas cliquer */
}
.dragon-selector .dragon-thumb:not(.locked):not(.empty) {
    margin-bottom: 15px;
}
.dragon-thumb.empty {
    opacity: 0.6;
    font-style: italic;
    margin-top: 5px;
    margin-bottom: 15px;
    font-size: 14px;
    border: 2px solid #ffd700;
    width: 80px;
    height: 80px;
}

.dragon-thumb.locked {
    background: rgba(80, 0, 0, 0.6);
    cursor: not-allowed;
    transform: scale(0.85);
    opacity: 0.7;
}
.dragon-thumb.locked:hover {
    transform: scale(0.8);
}
/* Animation d'apparition magique */
@keyframes unlock-glow {
    0% {
        transform: scale(0.8);
        opacity: 0;
        box-shadow: 0 0 10px 5px rgba(180, 0, 255, 0.5);
    }
    50% {
        transform: scale(1.1);
        opacity: 1;
        box-shadow: 0 0 20px 10px rgba(200, 0, 255, 0.7);
    }
    100% {
        transform: scale(1);
        opacity: 1;
        box-shadow: none;
    }
}

/* Appliqué quand le slot vient d’être débloqué */
.dragon-thumb.unlocked {
    animation: unlock-glow 0.8s ease-out;
    border: 2px solid #a855f7; /* Bordure violette magique */
    color: #d8b4fe;
}
.modal-donjon {
    display: none;
    position: fixed;
    z-index: 999;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0,0,0,0.6);
}
.modal-content-donjon {
    background-color: #1c1c1c;
    margin: 10% auto;
    padding: 20px;
    width: 90%;
    max-width: 400px;
    color: white;
    border-radius: 10px;
    box-shadow: 0 0 15px black;
    text-align: center;
}
.close-donjon {
    float: right;
    font-size: 24px;
    cursor: pointer;
}
.modal-content-combat-donjon {
    background: black;
    border: 4px solid #a67c52;
    padding: 5px;
    border-radius: 12px;
    box-shadow: 0 0 20px rgba(255,255,255,0.3);
    color: #fff;
    width: auto;
    max-width: 1300px;
    margin: auto;
    text-align: center;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: flex-start;
    flex-wrap: nowrap;
    position: relative;
}
.modal-content-combat-donjon .close-donjon {
    position: absolute;
    top: 10px;
    right: 10px;
    cursor: pointer;
    font-size: 24px;
}
/* --- Animation d'attaque --- */
.carte-monstre.attack {
    animation: attaque-mouvement 0.5s cubic-bezier(0.4, 0, 0.2, 1) forwards !important;
    z-index: 10; /* 👈 Passe au premier plan pendant l'attaque */
}

@keyframes attaque-mouvement {
    0% { 
        transform: translateX(0) scale(1);
    }
    40% { 
        transform: translateX(var(--dx, 40px)) scale(1.1) rotateZ(var(--angle, 5deg));
        filter: brightness(1.2);
    }
    100% { 
        transform: translateX(0) scale(1) rotateZ(0deg);
        filter: brightness(1);
    }
}
/* 👇 NOUVEAU : Transition douce après suppression de la classe */
.carte-monstre {
    transition: transform 0.15s ease-out, filter 0.15s ease-out;
}

/* 👇 Désactive la transition PENDANT l'animation pour éviter les conflits */
.carte-monstre.hit {
    transition: none !important;
}
/* --- Animation de hit (victime) --- */
.carte-monstre.hit {
    animation: hit-anim 0.4s ease-out forwards !important;
}

@keyframes hit-anim {
    0% { 
        filter: brightness(1); 
        transform: scale(1); 
    }
    20% { 
        filter: brightness(2) saturate(2) hue-rotate(10deg); 
        transform: scale(0.95) translateX(-5px);
    }
    40% { 
        filter: brightness(2.5) saturate(2); 
        transform: scale(0.98) translateX(5px);
    }
    60% { 
        filter: brightness(1.5); 
        transform: scale(1.02);
    }
    100% { 
        filter: brightness(1); 
        transform: scale(1); 
    }
}
.carte-monstre.hit {
    pointer-events: none;
}
/* --- Dégâts flottants (VERSION AMÉLIORÉE) --- */
.damage-text {
    position: absolute;
    top: 20%;
    left: 50%;
    transform: translateX(-50%);
    font-weight: 900;
    font-size: 2rem; /* 👈 Plus gros */
    color: #ff1744;
    text-shadow: 
        2px 2px 4px #000,
        0 0 10px #ff1744,
        0 0 20px #ff1744;
    pointer-events: none;
    animation: dmg-move 1.2s cubic-bezier(0.4, 0, 0.2, 1) forwards;
    z-index: 100;
    font-family: 'Impact', 'Arial Black', sans-serif;
}

.damage-text.crit {
    color: #ffd700;
    font-size: 2.5rem; /* 👈 Encore plus gros pour les critiques */
    text-shadow: 
        2px 2px 6px #000,
        0 0 15px #ffd700,
        0 0 30px #ffd700,
        0 0 45px #ff6b00;
    animation: dmg-move-crit 1.4s cubic-bezier(0.4, 0, 0.2, 1) forwards;
}

@keyframes dmg-move {
    0% { 
        transform: translate(-50%, 0) scale(0.5); 
        opacity: 0; 
    }
    10% { 
        transform: translate(-50%, 0) scale(1.2); 
        opacity: 1; 
    }
    100% { 
        transform: translate(-50%, -60px) scale(0.8); 
        opacity: 0; 
    }
}

@keyframes dmg-move-crit {
    0% { 
        transform: translate(-50%, 0) scale(0.3) rotate(-10deg); 
        opacity: 0; 
    }
    15% { 
        transform: translate(-50%, 0) scale(1.4) rotate(5deg); 
        opacity: 1; 
    }
    100% { 
        transform: translate(-50%, -80px) scale(0.9) rotate(0deg); 
        opacity: 0; 
    }
}
/* Animation clignotement rouge quand on prend des dégâts */
@keyframes clignote-rouge {
    0%, 100% { filter: brightness(1); }
    50% { filter: brightness(1.5) hue-rotate(-20deg); }
}

.vie-actuelle.clignote-rouge {
    animation: clignote-rouge 0.4s ease-out;
}

.ligne-stat {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-family: "Segoe UI", Arial, sans-serif;;
    font-size: 0.85rem;
    margin: 1px 0;                  /* réduit l’espacement vertical */
    color: #f8f8f8;
    padding: 1px 4px;              /* réduit la hauteur interne */
    border-radius: 5px;
    background: rgba(20, 20, 25, 0.486);
    box-shadow: inset 0 0 3px rgba(255,255,255,0.05);
    transition: background 0.2s ease, transform 0.15s ease;
}

.ligne-stat:hover {
    background: rgba(80, 70, 100, 0.4);
    transform: scale(1.02);
}

.icone-stat {
    width: 1.2em;                   /* plus petit */
    text-align: center;
    text-shadow: 0 0 3px #000;
    flex-shrink: 0;
}
.icone-force      { color: #795548; } 
.icone-intelligence { color: #f44336; } 
.icone-agilite    { color: #ff9800; } 
.icone-chance     { color: #4caf50; } 
.icone-ecailles   { color: #9e9e9e; } 
.icone-sante      { color: #e91e63; } 
.icone-armure     { color: #3f51b5; } 

.nom-stat {
    flex: 1;
    margin-left: 6px;
    font-weight: 600;
    color: #fdc542;
}

.valeur-stat {
    font-weight: bold;
    color: #fdc542;
    text-shadow: 0 0 3px #000;
}
#boite-messages {
  max-width: 800px;
  margin: auto;
  padding: 20px;
  background: #2b2b2b;
  color: #f0e6d2;
  border-radius: 10px;
  box-shadow: 0 0 10px #000;
  font-family: "Georgia", serif;
}

#liste-messages {
  border: 1px solid #444;
  border-radius: 8px;
  max-height: 300px;
  overflow-y: auto;
  margin-bottom: 20px;
  background-color: #1e1e1e;
}

.message-ligne {
  padding: 10px;
  border-bottom: 1px solid #444;
  cursor: pointer;
  transition: background-color 0.2s ease;
}

.message-ligne:hover {
  background-color: #333;
}

.message-ligne.non-lu {
  font-weight: bold;
  background-color: #2f2f2f;
  border-left: 4px solid gold;
}

#message-detail {
  background-color: #1e1e1e;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #555;
}

#message-detail h3 {
  margin-top: 0;
  color: gold;
}

#btn-supprimer,
#message-detail button {
  margin-top: 10px;
  background: #5c1e1e;
  border: none;
  color: white;
  padding: 8px 12px;
  border-radius: 5px;
  cursor: pointer;
}

#message-detail button:hover {
  background: #7c2f2f;
}
#btn-nouveau {
  margin-bottom: 10px;
  background-color: #1a3a1a;
  color: white;
  padding: 8px 12px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
}

#btn-nouveau:hover {
  background-color: #2b5a2b;
}

#formulaire-message {
  background-color: #1e1e1e;
  border: 1px solid #555;
  border-radius: 8px;
  padding: 15px;
  color: #f0e6d2;
}

#formulaire-message input,
#formulaire-message textarea {
  width: 100%;
  background: #2d2d2d;
  border: 1px solid #666;
  color: white;
  padding: 5px;
}
#confirmation-envoi {
  font-weight: bold;
  font-size: 1.1em;
}
.modal-crer-message {
  position: fixed;
  z-index: 1000;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(28, 11, 68, 0.6);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: auto;
}
.modal-content-message {
  background-color: #0e051d;
  padding: 20px;
  border-radius: 12px;
  border: 4px solid #a67c52;
  width: 90%;
  max-width: 500px;
  color: #f0e6d2;
  position: relative;
  font-family: "Georgia", serif;
  box-shadow: 0 0 20px rgba(255,255,255,0.3);
}
@keyframes clignoter {
  0% { opacity: 1; }
  50% { opacity: 0.3; }
  100% { opacity: 1; }
}
#notification-message {
  position: fixed;
  top: 15%;
  left: 20%;
}

#badge-non-lus {
  position: absolute;
  top: -5px;
  right: -5px;
  background-color: red;
  color: white;
  padding: 4px 6px;
  border-radius: 50%;
  font-size: 12px;
  font-weight: bold;
  display: none;
}
#entree_voyante {
    background: transparent;
    border: none;
    padding: 0;
    cursor: pointer;
    top: 7%;
    right: 18%;
    position: absolute;
    width: 12%;    /* ← ajouté */
}

#entree_voyante img {
    display: block;
    width: 100%;
    height: auto;
}
#voyante-cartes {
    text-align: center;
    margin: 20px auto;
    font-family: "Segoe UI", Arial, sans-serif;, cursive;
    color: #020100;
}

.cartes {
    display: flex;
    justify-content: center;
    gap: 20px;
    margin-top: 15px;
}

.carte {
    width: 120px;
    height: 180px;
    perspective: 1000px;
    cursor: pointer;
    position: relative;
}

.face {
    width: 100%;
    height: 100%;
    position: absolute;
    backface-visibility: hidden;
    border-radius: 10px;
    transition: transform 0.6s;
}

.face img {
    width: 100%;
    height: 100%;
    border-radius: 10px;
}

/* Face avant cachée par défaut */
.face-face {
    transform: rotateY(180deg);
}

/* Quand la carte est retournée */
.carte.flipped .face-dos {
    transform: rotateY(180deg);
}
.carte.flipped .face-face {
    transform: rotateY(0deg);
}
#resultat {
    margin-top: 20px;
    font-size: 18px;
    font-weight: bold;
}
#tirage-payant {
    background-color: #6b2dba;
    color: #fff;
    border: none;
    padding: 10px 20px;
    font-family: "Segoe UI", Arial, sans-serif;, cursive;
    font-size: 16px;
    border-radius: 8px;
    cursor: pointer;
    transition: transform 0.2s, box-shadow 0.2s;
    position: relative;
}

#tirage-payant:hover {
    transform: translateY(-2px) scale(1.05);
    box-shadow: 0 5px 15px rgba(0,0,0,0.3);
}
#tirage-payant:disabled {
    background-color: #555; /* gris foncé */
    color: #ccc; /* texte plus clair */
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
    opacity: 0.6; /* optionnel pour effet “grisé” */
}

#pnj-dialogue {
    display: none;
    opacity: 0;
    transition: opacity 0.3s ease;
}

#pnj-dialogue.show {
    opacity: 1;
}

#pnj-content {
    max-height: 800px; /* à ajuster selon besoin */
}
.pnj-modal-content:has(#modal_coffre_guilde) #pnj-content {
    overflow-y: auto;
}
/* Carte */

/* Zone cliquable */
.lieu-clickable {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 15%;   /* largeur relative à la carte */
    height: 20%; /* hauteur relative */
    cursor: pointer;
}

/* Zone qui réagit au survol */
.lieu-zone {
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0); /* invisible par défaut */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: box-shadow 0.3s ease, transform 0.3s ease;
    border-radius: 10%;
    position: relative;
}

/* Nom au centre (invisible au repos, plus petit) */
.lieu-name {
    color: #fff;
    font-weight: bold;
    font-family: "Segoe UI", Arial, sans-serif;, cursive;
    font-size: 16px;
    opacity: 0;
    transform: scale(0.8);  /* plus petit avant hover */
    transition: opacity 0.3s ease, transform 0.3s ease;
    pointer-events: none;
    text-align: center;
    text-shadow: 0 0 6px black, 0 0 12px #ffd700; /* petit glow fantasy */
}

/* Apparition fluide + zoom au hover */
.lieu-clickable:hover .lieu-name {
    opacity: 1;
    transform: scale(1); /* revient à sa taille normale */
}

/* Glow de la zone */
.lieu-clickable:hover .lieu-zone {
    transform: scale(1.1);
    background: rgba(0,0,0,0.35);
}
#entree_stockage {
    background: transparent;   /* pas de fond */
    border: none;              /* pas de bordure */
    padding: 0;                /* pas d'espace autour de l'image */
    cursor: pointer;           /* curseur "main" */
    top: 50%;
    right: -8%;
    position: absolute;        /* pour pouvoir le placer où tu veux */
    width: 25%;                
}

/* Pour que l'image s’adapte bien */
#entree_stockage img {
    display: block;
    max-width: 50%;
    height: auto;
}
#sortie_stockage {
    background: transparent;   /* pas de fond */
    border: none;              /* pas de bordure */
    padding: 0;                /* pas d'espace autour de l'image */
    cursor: pointer;           /* curseur "main" */
    top: 62%;
    right: 60%;
    position: absolute;        /* pour pouvoir le placer où tu veux */                
}

/* Pour que l'image s’adapte bien */
#sortie_stockage img {
    display: block;
    max-width: 50%;
    height: auto;
}
.drops-container {
    border-left: 3px solid #3aa935;
    padding-left: 8px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}


.drop-item {
    display: flex;
    align-items: center;
    gap: 6px;
}

.drop-icon {
    font-size: 1.2rem;
}

.drop-name {
    font-weight: bold;
}

.drop-qty {
    color: #ffd700;
}
.lien-desactive {
    opacity: 0.5;
    pointer-events: none;
    cursor: not-allowed;
}

/* TUTORIEL */ 

/* ═══════════════════════════════════════════════
   TUTORIEL — Design peaufiné
   ═══════════════════════════════════════════════ */

/* Overlay assombri */
#tutorial-overlay {
    position: fixed;
    inset: 0;
    z-index: 9000;
    background: rgba(0, 0, 0, 0.62);
    pointer-events: all;
    transition: background 0.3s ease;
}

/* ── Bulle principale ─────────────────────────── */
#tutorial-bubble {
    position: fixed;
    z-index: 9100;
    width: 380px;
    max-width: calc(100vw - 40px);
    background: linear-gradient(160deg, #fffdf7 0%, #fff8ec 100%);
    border: 2px solid #FAC775;
    border-radius: 16px;
    padding: 0;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.35),
        0 0 0 4px rgba(250, 199, 117, 0.18),
        inset 0 1px 0 rgba(255,255,255,0.8);
    font-family: 'Segoe UI', Arial, sans-serif;;
    animation: tuto-pop-in 0.28s cubic-bezier(0.34, 1.56, 0.64, 1) both;
    overflow: visible; /* pour la flèche */
}

@keyframes tuto-pop-in {
    from { opacity: 0; transform: scale(0.88) translateY(8px); }
    to   { opacity: 1; transform: scale(1)    translateY(0);   }
}

/* ── Header ───────────────────────────────────── */
.tuto-header {
    background: linear-gradient(90deg, #854F0B, #b8720f);
    border-radius: 14px 14px 0 0;
    padding: 12px 18px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.tuto-header strong {
    font-size: 15px;
    color: #FAC775;
    letter-spacing: 0.04em;
    text-shadow: 0 1px 2px rgba(0,0,0,0.3);
}

.tuto-icon {
    font-size: 18px;
    line-height: 1;
    flex-shrink: 0;
}

/* ── Corps ────────────────────────────────────── */
.tuto-body {
    font-size: 14px;
    color: #3a2600;
    line-height: 1.7;
    padding: 16px 18px 6px;
}

/* ── Formulaire pseudo (étape 1) ──────────────── */
.tuto-pseudo-form {
    padding: 8px 16px 4px;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.tuto-pseudo-input {
    width: 100%;
    padding: 10px 12px;
    border: 1.5px solid #e8c98a;
    border-radius: 8px;
    font-family: 'Segoe UI', Arial, sans-serif;;
    font-size: 14px;
    background: #fffdf5;
    color: #3a2600;
    outline: none;
    transition: border-color 0.2s, box-shadow 0.2s;
    box-sizing: border-box;
}

.tuto-pseudo-input:focus {
    border-color: #854F0B;
    box-shadow: 0 0 0 3px rgba(133, 79, 11, 0.15);
}

.tuto-pseudo-error {
    font-size: 11px;
    color: #c0392b;
    font-style: italic;
    min-height: 14px;
    font-family: sans-serif;
}

/* ── Footer ───────────────────────────────────── */
.tuto-footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 18px 16px;
    margin-top: 4px;
}

.tuto-steps {
    font-size: 11px;
    color: #b8892a;
    letter-spacing: 0.03em;
}

.tuto-btn-next {
    background: linear-gradient(135deg, #854F0B, #c47a1a);
    color: #FAC775;
    border: none;
    border-radius: 8px;
    padding: 7px 16px;
    font-size: 12px;
    cursor: pointer;
    font-family: 'Segoe UI', Arial, sans-serif;;
    letter-spacing: 0.03em;
    box-shadow: 0 2px 8px rgba(133, 79, 11, 0.35);
    transition: background 0.18s, transform 0.12s, box-shadow 0.18s;
}

.tuto-btn-next:hover {
    background: linear-gradient(135deg, #633806, #9e6010);
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(133, 79, 11, 0.45);
}

.tuto-btn-next:active {
    transform: translateY(0);
}

.tuto-hint {
    font-size: 12px;
    color: #854F0B;
    font-style: italic;
}

/* ── Flèche directionnelle ────────────────────── */
#tutorial-bubble::before {
    content: '';
    position: absolute;
    width: 14px;
    height: 14px;
    background: #854F0B; /* couleur du header */
    transform: rotate(45deg);
    z-index: -1;
    display: none; /* activée dynamiquement via classe */
}

#tutorial-bubble.arrow-right::before {
    display: block;
    left: -7px;
    top: 20px;
    background: #854F0B;
    box-shadow: -2px 2px 4px rgba(0,0,0,0.15);
}

#tutorial-bubble.arrow-left::before {
    display: block;
    right: -7px;
    top: 20px;
    background: #FAC775;
    box-shadow: 2px -2px 4px rgba(0,0,0,0.1);
}

#tutorial-bubble.arrow-bottom::before {
    display: block;
    top: -7px;
    left: 50%;
    margin-left: -7px;
    background: #854F0B;
    box-shadow: -2px -2px 4px rgba(0,0,0,0.1);
}

#tutorial-bubble.arrow-top::before {
    display: block;
    bottom: -7px;
    left: 50%;
    margin-left: -7px;
    background: #fffdf7;
    border-right: 2px solid #FAC775;
    border-bottom: 2px solid #FAC775;
}

/* ── Pulsation sur la cible mise en avant ─────── */
@keyframes tuto-pulse {
    0%   { box-shadow: 0 0 0 0   rgba(250, 199, 117, 0.7), 0 0 0 0 rgba(133,79,11,0.4); }
    70%  { box-shadow: 0 0 0 10px rgba(250, 199, 117, 0),  0 0 0 6px rgba(133,79,11,0); }
    100% { box-shadow: 0 0 0 0   rgba(250, 199, 117, 0),   0 0 0 0 rgba(133,79,11,0); }
}

[data-tutorial-highlighted] {
    animation: tuto-pulse 1.6s ease-out infinite !important;
}
.notif-icon {
    width: 120px;
    animation: clignoter 1s infinite;
}

@media (max-width: 768px) {
    .notif-icon {
        width: 28px;
    }
}
/* Rend le modal générique invisible quand il contient le coffre du sanctuaire */
.pnj-modal-content:has(#modal_coffre_guilde, .info-porte) {
    background: transparent;
    border: none;
    padding: 0;
    box-shadow: none;
    width: auto;
    max-width: none;
    overflow: visible;
    top: 50%;
    transform: translate(-50%, -50%);
}

/* Le coffre gère désormais son propre scroll, dans ses coins arrondis */
.pnj-modal-content:has(#modal_coffre_guilde) .coffre-ressources {
    max-height: 85vh;
    overflow-y: auto;
}

/* Scrollbar thémée (Chrome/Edge/Safari) */
.pnj-modal-content:has(#modal_coffre_guilde) .coffre-ressources::-webkit-scrollbar {
    width: 10px;
}
.pnj-modal-content:has(#modal_coffre_guilde) .coffre-ressources::-webkit-scrollbar-track {
    background: rgba(0,0,0,0.4);
    border-radius: 0 24px 24px 0;
}
.pnj-modal-content:has(#modal_coffre_guilde) .coffre-ressources::-webkit-scrollbar-thumb {
    background: linear-gradient(180deg, #8b6914, #d4af37);
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,0.3);
}
.pnj-modal-content:has(#modal_coffre_guilde) .coffre-ressources::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(180deg, #d4af37, #ffd700);
}

/* Scrollbar thémée (Firefox) */
.pnj-modal-content:has(#modal_coffre_guilde) .coffre-ressources {
    scrollbar-width: thin;
    scrollbar-color: #d4af37 rgba(0,0,0,0.4);
}

/* Le bouton de fermeture colle maintenant au coin réel du coffre */
.pnj-modal-content:has(#modal_coffre_guilde, .info-porte) .pnj-close {
    top: 26px;
    right: 34px;
    color: #ffd700;
    text-shadow: 0 0 8px rgba(0,0,0,0.8);
    z-index: 10;
    font-size: 24px;
    line-height: 1;
}

.pnj-modal-content:has(#modal_coffre_guilde, .info-porte) .pnj-close:hover {
    color: #fff5cc;
}
.popup-succes {
    position: fixed;
    top: 20px;
    right: -400px;
    width: 320px;
    background: linear-gradient(135deg, #2c1810, #4a2c1a);
    border: 2px solid #d4af37;
    border-radius: 10px;
    padding: 15px;
    display: flex;
    gap: 12px;
    align-items: center;
    color: white;
    box-shadow: 0 4px 20px rgba(0,0,0,0.5);
    z-index: 10000;
    transition: right 0.4s ease-out;
}

.popup-succes.show {
    right: 20px;
}

.popup-succes-icone {
    font-size: 2em;
}

.popup-succes-titre {
    font-size: 0.8em;
    color: #d4af37;
    text-transform: uppercase;
    font-weight: bold;
}

.popup-succes-nom {
    font-size: 1.1em;
    font-weight: bold;
}

.popup-succes-desc {
    font-size: 0.85em;
    color: #ccc;
}

.popup-succes-points {
    font-size: 0.85em;
    color: #a78bfa;
    font-weight: bold;
    margin-top: 4px;
}

.popup-succes.palier-epique {
    border-color: #a78bfa;
    box-shadow: 0 4px 25px rgba(167, 139, 250, 0.6);
}