@import url('https://fonts.googleapis.com/css2?family=Cinzel:wght@400;700&family=Lato:wght@400;700&display=swap');
* {
    -webkit-tap-highlight-color: transparent;
    box-sizing: border-box;
}

:root {
    --header-height: 68px;
    --bottom-nav-height: 65px; /* NOUVELLE VARIABLE */
    --sub-nav-height: 58px;    /* NOUVELLE VARIABLE */
    --footer-height: 120px;
    /* On garde les mêmes polices */
    --font-title: 'Cinzel', serif;
    --font-body: 'Lato', sans-serif;

    /* NOUVEAU : Base de gris anthracite */
    --color-bg: #1a1d21; /* Un gris très sombre, légèrement bleuté */
    --color-surface: #2c2f33; /* Le gris du container principal */
    --color-panel: #36393f; /* Un gris un peu plus clair pour les panneaux */
    --color-border: #4a4d52; /* Bordure plus douce */
    --color-border-hover: #72767d;

    /* On garde les couleurs de texte chaudes pour un joli contraste */
    --color-text-primary: #f0e6d2; /* Parchemin clair */
    --color-text-secondary: #b0a692; /* Parchemin sombre */
    --color-text-disabled: #72767d;

    /* Les accents restent les mêmes, ils ressortiront très bien sur le gris */
    --color-accent-highlight: #ffc107; 
    --color-accent-highlight-dark: #c89100;
    --color-accent-primary: #a88b5c; 
    --color-accent-secondary: #5a4a3a;
    --color-accent-success: #5a8a5a;
    --color-accent-danger: #a85c5c;
}

* {
    box-sizing: border-box;
}

html, body {
    height: 100%;
    overflow: hidden;
    margin: 0;
    padding: 0;
    font-family: var(--font-body);
    background-color: var(--color-bg);
    color: var(--color-text-primary);
}

body.in-combat #game-screen,
body.sub-nav-active.in-combat #game-screen {
    bottom: 0;
    padding-bottom: 0;
}

#main-container {
    padding-bottom: env(safe-area-inset-bottom);
    padding-left: env(safe-area-inset-left);
    padding-right: env(safe-area-inset-right);
}

.container {
    /* On supprime les styles qui centraient et limitaient la largeur */
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    background: transparent; /* Fond transparent pour se fondre avec le body */
    border: none;
    border-radius: 0;
    box-shadow: none;
}

/* Animation pour indiquer qu'un élément est verrouillé */
.shake {
    animation: shake 0.5s cubic-bezier(.36,.07,.19,.97) both;
    transform: translate3d(0, 0, 0);
}

@keyframes shake {
    10%, 90% {
        transform: translate3d(-1px, 0, 0);
    }
    20%, 80% {
        transform: translate3d(2px, 0, 0);
    }
    30%, 50%, 70% {
        transform: translate3d(-4px, 0, 0);
    }
    40%, 60% {
        transform: translate3d(4px, 0, 0);
    }
}

h1, h2, h3, h4, h5 {
    font-family: var(--font-title);
    color: var(--color-accent-gold);
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.2);
}

h1 { font-size: 2em; }
h2 { font-size: 1.6em; }
h3 { font-size: 1.3em; }

hr {
    border: none;
    height: 2px;
    /* Crée un effet de ligne gravée avec des reflets. */
    background: linear-gradient(to right, transparent, var(--color-border) 20%, var(--color-accent-highlight) 50%, var(--color-border) 80%, transparent);
    margin: 25px 0;
    box-shadow: 0 1px 0 rgba(0,0,0,0.3);
}

.action-button, .secondary-action-button, .danger-btn, .boss-btn {
    padding: 10px 20px;
    font-size: 1em;
    font-family: var(--font-body);
    font-weight: bold;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-transform: uppercase;
    letter-spacing: 1px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.3);
}

.action-button {
    /* On utilise nos nouvelles couleurs d'accentuation. */
    background: linear-gradient(145deg, #b89b6c, #8a6b3c);
    border-color: #5a4a3a;
    color: #f0e6d2;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5); /* Ajoute de la profondeur au texte. */
}
.action-button:hover:not(:disabled) {
    background: linear-gradient(145deg, #c8ab7c, #9a7b4c);
    border-color: var(--color-border-hover);
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
}

.secondary-action-button {
    background: linear-gradient(145deg, #5a6268, #343a40);
    border-color: #23272b;
    color: #f0f0f0;
}
.secondary-action-button:hover:not(:disabled) {
    background: linear-gradient(145deg, #6c757d, #495057);
}

.danger-btn {
    background: linear-gradient(145deg, #dc3545, #a71d1d);
    border-color: #7a0e0e;
    color: white;
}



button:disabled {
    background: #444;
    color: var(--color-text-disabled);
    border-color: #333;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

input[type="text"], input[type="number"], select, textarea {
    padding: 10px;
    margin: 5px 0;
    width: 100%;
    background-color: var(--color-bg);
    border: 1px solid var(--color-border);
    color: var(--color-text-primary);
    border-radius: 4px;
    font-family: var(--font-body);
    font-size: 1em;
    transition: border-color 0.2s, box-shadow 0.2s;
}

input:focus, select:focus, textarea:focus {
    outline: none;
    border-color: var(--color-accent-gold);
    box-shadow: 0 0 8px rgba(255, 193, 7, 0.3);
}

/* ... le reste de votre CSS est bon ... */

.xp-bar {
  background: #444;
  width: 100%;
  height: 17px;
  border-radius: 5px;
  overflow: hidden;
  margin-bottom: 20px;
}

.combat-bars p{
    margin: 5px;
}

.hp-bar .mana-bar{
    height: 12px;
}

#xp-fill {
  background: #00c853;
  width: 0%;
  height: 100%;
}

button#create-button { /* Cible plus spécifique pour le bouton principal */
  margin-top: 15px;
  padding: 10px 15px;
  width: 100%;
  font-size: 1.1rem;
}

input[type="text"] {
  padding: 8px;
  margin: 10px 0;
  width: 100%;
  box-sizing: border-box;
  font-size: 1rem;
  background-color: #333;
  border: 1px solid #555;
  color: #f0f0f0;
  border-radius: 4px;
}

small {
  color: #aaa;
  font-size: 0.85rem;
  margin-left: 10px;
}

.game-header {
    display: none;
}


#mana-p,
#xp-p {
    margin: 0.5em 0; /* Raccourci pour 0.5em en haut/bas et 0 sur les côtés */
}
#hp-p{
    margin-top: 1em;
    margin-bottom: 0.5em;
}
/* Le conteneur du nom/niveau prend l'espace restant */
#char-info {
    flex-grow: 1;
}
#char-info h1, #char-info p {
    margin: 0; /* On retire les marges pour un alignement parfait */
    max-width: 150px; /* On réduit la largeur maximale */
    font-size: 1.3em;
}
#char-info p {
    margin-top: 10px;
    font-size: 0.9em;
}

/* Le conteneur du portrait */
#char-portrait-container {
    width: 60px;
    height: 80px;
    border-radius: 6px;
    flex-shrink: 0;
    overflow: hidden;
}

/* L'image du portrait elle-même */
#char-portrait-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Cette ligne aligne l'image par le haut avant de la rogner */
    object-position: top center; 
}

.inventory-section {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    margin-top: 20px;
}
.inventory-section > div {
    flex: 1;
}

.actions {
  margin-bottom: 20px;
}

#expedition-board {
  display: flex;
  align-items: center; /* Centrera les cartes verticalement */
  gap: 15px;
}

/* Styles pour les cartes d'expédition */
.expedition-card, .craftable-item-card, .codex-entry, .fief-building-card, .bounty-card {
    background: var(--color-panel); /* Utilise la nouvelle couleur de panneau. */
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    /* On ajoute une ombre interne pour un effet de relief. */
    box-shadow: 0 2px 4px rgba(0,0,0,0.2), inset 0 0 10px rgba(0,0,0,0.4);
    transition: transform 0.2s ease-out, box-shadow 0.2s ease-out, border-color 0.2s ease-out;
    width: 100%;
}

.expedition-card:hover, .craftable-item-card:hover, .codex-entry:hover, .fief-building-card:hover, .bounty-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    border-color: var(--color-border-hover);
}

.expedition-card h4 {
    min-height: auto; /* On retire la hauteur min fixe */
}

.expedition-card h4 {
    min-height: 48px; /* Gardez cette hauteur minimale pour l'alignement du bouton */
    margin-bottom: 10px;
    width: 100%;
}

.expedition-card p {
    margin-bottom: 5px;
}

.expedition-card button {
    margin-top: auto;
    padding: 8px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s ease;
}

.expedition-card button:hover {
    background-color: #0056b3;
}

/* Couleurs de rareté */
.rarity-common { color: #ffffff; }
.rarity-uncommon { color: #80c080; }
.rarity-rare { color: #00aaff; }
.rarity-epic { color: #a335ee; }
.rarity-legendary { color: #ffb300; }
.rarity-mythic { color: #ff8000; }


#expedition-progress {
  text-align: center;
  padding: 20px;
  border: 1px solid #555;
  border-radius: 5px;
}

/* ... Tout le CSS précédent est conservé ... */

/* NOUVEAU : Style pour le bouton de réinitialisation */
.reset-btn {
  margin-top: 30px;
  background-color: #5a1d1d;
  border: 1px solid #8e3a3a;
  padding: 8px;
  width: auto;
  float: right;
  cursor: pointer;
  border-radius: 5px;
  color: #f0f0f0;
}

.reset-btn:hover {
  background-color: #7a2828;
}

/* Style pour le petit bouton de recyclage */
.recycle-btn-small {
    padding: 2px 6px;
    font-size: 0.8rem;
    background-color: #db3c39; /* Vert */
    color: white;
    border: none;
    border-radius: 3px;
    cursor: pointer;
    margin-left: 10px;
}
.recycle-btn-small:hover {
    background-color: #218838;
}


/* Ajustement pour les détails des expéditions */
.expedition-card p {
    margin: 5px 0; /* Moins d'espace vertical */
    font-size: 0.9rem;
}

/* Styles pour les barres de vie */
.combat-bars {
    margin-top: 15px;
    margin-bottom: 5px;
    background-color: #333;
    padding: 5px 5px 5px 5px;
    border-radius: 5px;
    box-shadow: 0 0 5px rgba(0,0,0,0.3);
}

.hp-bar div {
    height: 100%;
    background-color: #4CAF50; /* Vert pour la vie */
    width: 100%; /* Sera ajusté par JS */
    transition: width 0.4s ease-out;
    /* AJOUT : Assure que TOUTES les barres internes sont arrondies */
    border-radius: 7px;
}

/* Couleurs spécifiques pour les barres de vie */
.player-hp-bar div {
    background-color: #4CAF50; /* Vert */
}

.boss-hp-bar div {
    background-color: #F44336; /* Rouge */
}

/* Styles pour le journal de combat (chatbox) */
#combat-log {
    background-color: #222;
    border: 1px solid #444;
    padding: 10px;
    height: 150px; /* Hauteur fixe pour la chatbox */
    overflow-y: auto; /* Permet le défilement vertical */
    border-radius: 5px;
    margin-top: 15px;
    font-size: 0.9em;
    color: #eee;
}

/* Cible la barre de défilement pour les navigateurs basés sur WebKit */
::-webkit-scrollbar {
  width: 10px; /* On l'élargit un peu pour le style. */
  background-color: transparent;
}

::-webkit-scrollbar-track {
  background: #1a1d21; /* Fond très sombre, presque noir. */
  border-radius: 10px;
}

::-webkit-scrollbar-thumb {
  background: #a88b5c; /* Notre couleur bronze. */
  border-radius: 10px;
  border: 2px solid #1a1d21; /* Crée un effet de rainure. */
}

::-webkit-scrollbar-thumb:hover {
  background: #c8ab7c; /* Bronze plus clair au survol. */
}

/* Pour Firefox */
* {
  scrollbar-width: thin;
  scrollbar-color: #a88b5c #1a1d21; /* Couleur du pouce et de la piste. */
}

/* Cible le "chemin" de la barre */
#combat-log::-webkit-scrollbar-track,
#custom-alert-text::-webkit-scrollbar-track,
.collapsible-content::-webkit-scrollbar-track,
#succes-list::-webkit-scrollbar-track { /* LIGNE AJOUTÉE */
  background: #222;
  border-radius: 10px;
}

/* Cible la "poignée" de la barre */
#combat-log::-webkit-scrollbar-thumb,
#custom-alert-text::-webkit-scrollbar-thumb,
.collapsible-content::-webkit-scrollbar-thumb,
#succes-list::-webkit-scrollbar-thumb { /* LIGNE AJOUTÉE */
  background: #555;
  border-radius: 10px;
}

/* Change la couleur au survol */
#combat-log::-webkit-scrollbar-thumb:hover,
#custom-alert-text::-webkit-scrollbar-thumb:hover,
.collapsible-content::-webkit-scrollbar-thumb:hover,
#succes-list::-webkit-scrollbar-thumb:hover { /* LIGNE AJOUTÉE */
  background: #777;
}

/* Pour Firefox */
#combat-log,
#custom-alert-text,
.collapsible-content,
#succes-list { /* LIGNE AJOUTÉE */
  scrollbar-width: thin;
  scrollbar-color: #555 #222;
}

#combat-log p {
    margin: 2px 0;
    padding: 3px 5px;
    background-color: #333;
    border-radius: 3px;
    word-wrap: break-word; /* Casse les longs mots si nécessaire */
}

#combat-log p:nth-child(even) {
    background-color: #3a3a3a; /* Couleur alternée pour les messages */
}

/* Styles pour les boutons de combat */
#boss-combat-section button {
    padding: 10px 15px;
    margin: 10px 5px 0 0;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    background-color: #007bff; /* Bleu par défaut */
    color: white;
}

#boss-combat-section button:hover {
    opacity: 0.9;
}

#boss-combat-section button[onclick*="endBossFight(true)"] { /* Bouton fuite */
    background-color: #dc3545; /* Rouge pour la fuite */
}

/* ... votre CSS existant ... */

/* Styles pour la Forge */
#forge-section {
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #555;
    box-shadow: 0 0 8px rgba(0, 0, 0, 0.5);
}

#forge-unlock-info, #forge-content {
    margin-top: 10px;
    text-align: center;
}

#forge-unlock-info p, #forge-upgrade-cost-p {
    margin-bottom: 10px;
}

#craftable-items-list {
    display: grid;
    /* Affiche autant de colonnes de 250px que possible */
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 15px;
    margin-top: 15px;
}

.craftable-item-card {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 15px;
    text-align: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}
.craftable-item-card {
    cursor: pointer;
}

/* Style pour la carte sélectionnée */
.craftable-item-card.selected {
    border-color: var(--color-accent-highlight);
    box-shadow: 0 0 12px var(--color-accent-highlight);
    transform: translateY(-2px);
}

/* Conteneur pour le bouton "Fabriquer" qui reste en bas */
.forge-actions-footer {
    position: sticky;
    bottom: 0;
    background-color: var(--color-panel); /* Assorti au fond du panneau */
    padding: 15px;
    margin: 15px -20px -20px -20px; /* Marges négatives pour coller aux bords */
    border-top: 1px solid var(--color-border);
    border-radius: 0 0 8px 8px;
}

.forge-actions-footer button {
    width: 100%;
    padding: 12px;
    font-size: 1.1em;
}

.craftable-item-card h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.1em;
}

.craftable-item-card p {
    margin: 3px 0;
    font-size: 0.9em;
    color: #ccc;
}

.craftable-item-card p strong {
    font-weight: normal;
    color: #f0f0f0;
}

.craftable-item-card span {
    display: inline-block; /* Permet d'aligner les stats */
    margin-right: 12px;
    font-size: 0.85em;
    color: #ddd;
    background-color: #3a3a3a;
    padding: 2px 5px;
    border-radius: 3px;
}

.craftable-item-card button {
    background-color: #28a745; /* Vert pour crafter */
    color: white;
    padding: 8px 12px;
    border: none;
    border-radius: 4px;
    cursor: pointer;
    margin-top: 10px;
    font-size: 0.9em;
    width: 100%;
}

.craftable-item-card button:hover:not(:disabled) {
    background-color: #218838;
}

.craftable-item-card button:disabled {
    background-color: #555;
    cursor: not-allowed;
    color: #999;
}

/* Style de base pour la boîte de la modale */
#event-content {
    background-color: #333; /* Fond simple */
    border: 1px solid #555;
    box-shadow: 0 0 15px rgba(0,0,0,0.5); /* Ombre simple */
    padding: 20px;
    border-radius: 8px;
    width: 90%;
    max-width: 550px;
    text-align: center;
}

/* Style pour le texte de description */
#event-description {
    font-size: 1.1em; /* Taille de police standard */
    text-shadow: none; /* Pas d'ombre sur le texte */
    line-height: 1.6;
    margin-bottom: 20px;
}

/* Style simple pour les boutons de choix */
#event-choices button {
    display: block;
    width: 100%;
    padding: 12px;
    margin-bottom: 10px;
    font-size: 1em;
    cursor: pointer;
    background-color: #007bff; /* Bleu standard */
    color: white;
    border: none;
    border-radius: 5px;
    transition: background-color 0.2s; /* Transition simple */
}

#event-choices button:hover:not(:disabled) {
    background-color: #0056b3; /* Assombrissement au survol */
}

/* Styles pour la modale du Marchand */
#merchant-interface {
    display: flex;
    gap: 20px;
    margin-top: 15px;
    text-align: left;
}

#merchant-interface > div {
    flex: 1;
    background-color: #222;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #444;
}

#merchant-interface h4 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

.merchant-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    border-radius: 4px;
    margin-bottom: 5px;
}

.merchant-item:nth-child(even) {
    background-color: #2a2a2a;
}

.merchant-item button {
    padding: 4px 8px;
    font-size: 0.85em;
    width: auto;
    margin: 0;
}

#close-merchant-button {
    margin-top: 20px;
    background-color: #6c757d; /* Gris */
}
#close-merchant-button:hover {
    background-color: #5a6268;
}
/* NOUVEAU : Style pour l'écran de mort/repos */
#death-overlay {
    position: absolute; /* Positionné par rapport à .container si .container a position: relative */
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.85);
    z-index: 2000; /* Au-dessus de tout le reste */
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    border-radius: 10px; /* Pour correspondre au container */
}

#death-content {
    background-color: #1a1a1a;
    padding: 40px;
    border-radius: 8px;
    border: 1px solid #7a2828;
}

#death-content h2 {
    color: #F44336;
    margin-top: 0;
}

#death-timer {
    font-size: 1.5em;
    color: #ffc107;
}

/* NOUVEAU : Style pour les récompenses d'expédition */
.expedition-rewards {
    font-size: 0.85rem;
    color: #aaa;
    margin-top: 10px;
    border-top: 1px solid #444;
    padding-top: 8px;
    width: 100%;
	margin-bottom: 15px;
}

/* --- Style pour le bouton "Affronter le Boss !" --- */

#boss-button {
    /* Styles existants */
    padding: 12px 24px;
    font-size: 1.1em;
    font-weight: bold;
    border-radius: 8px;
    background: linear-gradient(145deg, #a71d1d, #d12a2a);
    color: white;
    border: 2px solid #7a0e0e;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3);
    cursor: pointer;
    transition: all 0.2s ease-in-out;

    /* NOUVEAUX AJOUTS */
    margin-top: 25px; /* Ajoute un grand espace au-dessus */
    width: 100%;      /* Prend toute la largeur disponible */
    box-sizing: border-box; /* S'assure que le padding ne le fait pas déborder */
}

/* Effet au survol de la souris */
#boss-button:hover {
    background: linear-gradient(145deg, #b82020, #e23030);
    box-shadow: 0 6px 8px rgba(0, 0, 0, 0.4);
    transform: translateY(-2px); /* Effet de soulèvement */
}

/* Effet au clic */
#boss-button:active {
    transform: translateY(1px); /* Effet d'enfoncement */
    box-shadow: 0 2px 3px rgba(0, 0, 0, 0.3);
}


/* --- Style pour le bouton "Actualiser" --- */

#refresh-expeditions-button {
    /* Forme et taille */
    padding: 8px 16px;
    font-size: 0.9em;
    font-weight: bold;
    border-radius: 6px;

    /* Couleurs et apparence */
    background: linear-gradient(145deg, #0056b3, #007bff); /* Dégradé bleu utilitaire */
    color: white;
    border: 1px solid #003d7a;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
    cursor: pointer;

    /* Animation douce */
    transition: all 0.2s ease-in-out;
}

/* Effet au survol */
#refresh-expeditions-button:hover:not(:disabled) {
    background: linear-gradient(145deg, #0062cc, #008cff);
    transform: translateY(-1px);
    box-shadow: 0 3px 5px rgba(0, 0, 0, 0.3);
}

/* Effet au clic */
#refresh-expeditions-button:active:not(:disabled) {
    transform: translateY(0px);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* État désactivé (pendant le cooldown) */
#refresh-expeditions-button:disabled {
    background: #444;
    color: #888;
    border-color: #333;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}
/* ================================================= */
/* FENÊTRE D'ALERTE PERSONNALISÉE (CORRIGÉE)       */
/* ================================================= */
#custom-alert-modal, #custom-confirm-modal, #options-modal, #stats-modal, #leaderboard-modal, #achievements-modal, #patch-notes-modal, #bug-report-modal, #class-choice-modal, #constellation-modal, #trait-selection-modal, #lore-modal, #guild-logs-modal {
    backdrop-filter: blur(4px);
    background-color: rgba(10, 10, 10, 0.7);
}

#custom-alert-content, #custom-confirm-content, #options-content, #stats-modal-content, #leaderboard-content, #achievements-content, #patch-notes-content, #bug-report-content, #class-choice-content, #constellation-content, #trait-selection-content, #lore-modal-content, #guild-logs-content {
    background: var(--color-surface);
    border: 2px solid var(--color-border);
    box-shadow: 
        inset 0 0 15px rgba(0, 0, 0, 0.5),
        0 8px 30px rgba(0, 0, 0, 0.6);
    animation: fadeIn 0.3s ease;
}
#custom-alert-modal {
    position: fixed;
    z-index: 4000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

#custom-alert-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #555;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    /* ▼▼▼ MODIFICATIONS CI-DESSOUS ▼▼▼ */
    display: flex; /* Devient un conteneur flexible */
    flex-direction: column; /* Organise le contenu verticalement */
    max-height: 80vh; /* Hauteur maximale pour ne pas déborder */
}

#custom-alert-text {
    font-size: 1.1em;
    line-height: 1.6;
    flex-grow: 1;
    overflow-y: auto;
    text-align: center; /* On centre le contenu par défaut */
    padding-right: 15px;
    margin: 0 -15px 0 0;
}

/* ▼▼▼ NOUVELLES RÈGLES POUR CORRIGER LES "TROUS" DANS LE RAPPORT ▼▼▼ */
#custom-alert-text h3 {
    margin: 0 0 15px 0; /* Un peu d'espace sous le titre, mais pas au-dessus */
    text-align: center;
}
#custom-alert-text ul {
    margin: 10px 0;
    padding-left: 25px; 
}
#custom-alert-text li {
    margin-bottom: 5px; /* Espace minimal entre les lignes de butin */
}
#custom-alert-text p {
    margin: 8px 0; /* Marge verticale réduite pour les paragraphes */
}

#custom-alert-close {
    padding: 10px 30px;
    background-color: #007bff;
    color: white;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    transition: background-color 0.2s;
    /* ▼▼▼ MODIFICATIONS CI-DESSOUS ▼▼▼ */
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
    margin-top: 20px; /* Ajoute un espace au-dessus du bouton */
}

#custom-alert-close:hover {
    background-color: #0056b3;
}

/* --- NOUVELLE STRUCTURE DE L'INTERFACE PERSONNAGE --- */

.hp-bar, .mana-bar, .xp-bar {
    height: 18px;
    border-radius: 9px;
    background-color: #111;
    border: 1px solid #000;
    box-shadow: inset 0 1px 3px rgba(0,0,0,0.5);
    padding: 2px;
}

#main-player-hp-fill, #player-hp-fill, #modal-player-hp-fill { /* <-- ID ajouté ici */
    background: linear-gradient(to right, #28a745, #80c080);
    border-radius: 7px;
    /* On ajoute la hauteur ici pour être sûr qu'elle s'applique */
    height: 100%; 
}
#mana-fill, #player-mana-fill-combat, #modal-player-mana-fill { /* <-- ID ajouté ici */
    background: linear-gradient(to right, #007bff, #3498db);
    border-radius: 7px;
    /* On ajoute la hauteur ici également */
    height: 100%;
}
#xp-fill {
    background: linear-gradient(to right, #c89100, #ffc107);
    border-radius: 7px;
    animation: pulse-xp 2s infinite;
}

@keyframes pulse-xp {
    0% { opacity: 0.8; }
    50% { opacity: 1; }
    100% { opacity: 0.8; }
}

.plus-button {
    width: 24px;
    height: 24px;
    background: linear-gradient(145deg, #5a6268, #343a40);
    border: 1px solid #23272b;
    color: #f0f0f0;
}

.plus-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #3a3a3a, #1f1f1f); /* Dégradé plus clair au survol */
  transform: translateY(-1px); /* Effet de soulèvement */
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4);
}

.plus-button:active:not(:disabled) {
  transform: translateY(0px); /* Effet d'enfoncement au clic */
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

.stat-bonus {
    color: #80c080; /* Vert pour les bonus */
    font-size: 0.85em;
    padding:7px;
}

/* --- SYSTÈME D'ONGLETS DU BAS --- */
#bottom-panels-container {
    margin-top: 25px;
}

.panel-tabs {
    display: flex;
    border-bottom: 2px solid #555;
}

.tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #333;
    color: #ccc;
    border-radius: 6px 6px 0 0;
    margin-right: 5px;
    font-size: 1em;
}

.tab-button.active {
    background-color: #444;
    color: #fff;
    border-color: #555;
    border-bottom-color: #444; /* Fait disparaître la bordure du bas */
    transform: translateY(2px); /* Crée un effet de "connexion" avec le panneau */
}

.tab-button:hover:not(.active) {
    background-color: #3a3a3a;
}

.panel-content {
    background-color: #444;
    padding: 20px;
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.panel.hidden {
    display: none;
}

.stat-line {
    display: flex;
    align-items: center;
    padding: 3px 0;
    border-bottom: 1px solid #3f3f3f;
}

.stat-line:last-child {
    border-bottom: none;
}

/* --- Section Création de Personnage --- */
#creation-stats-list {
    margin: 20px 0;
}
#creation-stats-list .stat-line label {
    font-weight: bold;
    font-size: 1.1em;
}
#creation-stats-list .stat-controls {
    display: flex;
    align-items: center;
    gap: 15px;
}
#creation-stats-list .stat-controls span {
    font-size: 1.2em;
    font-weight: bold;
    color: #ffc107;
    width: 25px;
    text-align: center;
}
#creation-stats-list .stat-controls button {
    padding: 2px 9px;
    font-size: 1.2em;
    border-radius: 50%;
    border: 1px solid #555;
    background-color: #444;
    color: #fff;
    cursor: pointer;
}
#creation-stats-list .stat-controls button:hover:not(:disabled) {
    background-color: #555;
}
#creation-stats-list .stat-controls button:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}


/* --- Section Stats en Jeu (dans le panneau) --- */

#game-stats-list, #inventory-section, #equipment-section, .stat-panel,
#special-resources-section, #consumables-section {
    background: var(--color-panel);
    padding: 15px;
    border-radius: 8px;
    border: 1px solid var(--color-border);
}
/* --- Amélioration de la Création de Personnage --- */

.creation-stat-block {
    padding: 10px 0;
    border-bottom: 1px solid #3f3f3f;
}

.creation-stat-block:last-child {
    border-bottom: none;
}

#creation-stats-list .stat-line {
    padding: 0; /* On retire le padding de la ligne elle-même */
    border: none;
}

.stat-description {
    display: block; /* La description prend toute la largeur */
    margin-top: 5px;
    margin-left: 0; /* On retire l'ancienne marge */
    padding-left: 5px;
    color: #aaa;
    font-size: 0.85em;
    line-height: 1.4;
}

/* --- STYLES POUR LE CODEX --- */

#codex-list {
    margin-top: 20px;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.codex-entry.locked {
    background-color: #2a2a2a;
    filter: grayscale(80%);
    opacity: 0.6;
}

.codex-entry h4 {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.2em;
}

.codex-entry .locked-name {
    font-style: italic;
    color: #999;
}

.codex-progress {
    margin-top: 10px;
}

.codex-progress-bar-bg {
    background-color: #222;
    border-radius: 5px;
    height: 12px;
    overflow: hidden;
    border: 1px solid #444;
}

.codex-progress-bar-fill {
    background-color: #ffc107; /* Doré */
    height: 100%;
    width: 0%; /* Sera ajusté par JS */
    border-radius: 4px;
    transition: width 0.3s ease;
}

.codex-progress-text {
    font-size: 0.8em;
    color: #ccc;
    text-align: right;
}

.codex-bonus-list {
    margin-top: 10px;
    padding-left: 0;
    list-style: none;
    font-size: 0.9em;
}

.codex-bonus-list li {
    color: #aaa;
    margin-bottom: 5px;
}

.codex-bonus-list li.unlocked {
    color: #80c080; /* Vert pour les bonus débloqués */
    font-weight: bold;
}

.codex-entry .codex-tier {
    font-size: 0.85em;
    color: #ccc;
    margin: 10px 0 5px 0; /* Un peu d'espace vertical */
    padding-bottom: 8px;
    border-bottom: 1px solid #444; /* Un séparateur subtil */
}

.codex-entry .codex-tier strong {
    font-weight: bold;
    /* La couleur sera héritée de la classe de rareté ajoutée dynamiquement */
}

/* style.css */

/* --- NOUVEAU : Style pour le filtre de la Forge --- */

#forge-filters {
    flex-direction: column;
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    margin-bottom: 20px;
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 6px;
}

.forge-filter-group {
    display: flex;
    align-items: center;
    gap: 10px;
}

#forge-filters label {
    font-weight: bold;
    color: #ccc;
}

#forge-filters select {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
    padding: 8px 30px 8px 12px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: border-color 0.2s;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-13z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

#forge-filter-select:hover {
    border-color: #777;
}

/* Style pour les options dans la liste déroulante */
#forge-filter-select option {
    background-color: #333;
    color: #f0f0f0;
    padding: 10px; /* Note: le padding sur les options n'est pas supporté par tous les navigateurs */
}

/* --- NOUVEAU : Style pour le panneau de Maîtrise --- */

#codex-summary-bonuses {
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 6px;
    margin-bottom: 20px;
}

#codex-bonuses-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 10px;
    font-size: 0.95em;
}

#codex-bonuses-list p {
    margin: 0;
    padding: 5px;
    background-color: #333;
    border-radius: 4px;
}

#codex-bonuses-list strong {
    color: #80c080; /* Vert pour les bonus */
}

#codex-milestones-progress {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.milestone-tier {
    background-color: #3a3a3a;
    padding: 15px;
    border-radius: 8px;
}

.milestone-tier h4 {
    margin-top: 0;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

.milestone-entry {
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 5px;
    margin-bottom: 10px;
}

.milestone-entry p {
    margin: 0 0 8px 0;
}

.milestone-progress-bar-bg {
    background-color: #222;
    border-radius: 5px;
    height: 10px;
    border: 1px solid #444;
}

.milestone-progress-bar-fill {
    background-color: #007bff; /* Bleu */
    height: 100%;
    width: 0%;
    border-radius: 4px;
}

.milestone-reward {
    font-size: 0.9em;
    color: #aaa;
    margin-top: 8px !important;
}
.milestone-reward.unlocked {
    color: #ffc107; /* Doré pour les récompenses débloquées */
    font-weight: bold;
}

/* --- NOUVEAU : Style pour les accordéons de Maîtrise --- */

.milestone-accordion-header {
    width: 100%;
    background-color: #3a3a3a;
    border: 1px solid #555;
    padding: 10px 15px;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.milestone-accordion-header:hover {
    background-color: #454545;
}

.milestone-accordion-header .arrow {
    transition: transform 0.3s ease;
}

.milestone-accordion-header.active .arrow {
    transform: rotate(180deg);
}

.milestone-accordion-content {
    padding: 15px 5px 5px 5px;
    display: none; /* Caché par défaut */
}

.stat-panel-tabs {
    display: flex;
    margin-bottom: 10px;
    border-bottom: 1px solid #666;
}
.stat-tab-button {
    padding: 8px 12px;
    cursor: pointer;
    border: none;
    background-color: transparent;
    color: #ccc;
    font-size: 0.9em;
    border-radius: 4px 4px 0 0;
}
.stat-tab-button.active {
    background-color: #444;
    color: #fff;
    border: 1px solid #666;
    border-bottom: 1px solid #444;
}
.stat-tab-button:hover:not(.active) {
    background-color: #3a3a3a;
}

/* --- NOUVEAU : Style pour l'affichage des ressources en expédition --- */

#event-current-resources {
    /* On retire le fond et on met des bordures subtiles */
    background-color: transparent;
    border: none;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    border-radius: 0; /* Pas de coins arrondis pour un effet "bannière" */
    
    /* On réduit la taille et les espacements */
    padding: 6px 10px;
    margin-bottom: 20px;
    font-size: 0.8em; /* Texte plus petit */

    /* Le reste est inchangé */
    display: flex;
    justify-content: space-around;
    align-items: center;
    color: #ccc;
}

#event-current-resources strong {
    color: #f0f0f0;
    font-size: 1.1em;
}

.stats-inventory-container {
    flex-direction: column; /* Empile les .ui-row verticalement */
    gap: 15px; /* Espace entre chaque ligne (ex: entre stats et équipement) */
}

/* Chaque "ligne" qui contient deux panneaux */
.ui-row {
    display: flex; /* Met les panneaux côte à côte */
    gap: 20px; /* Espace entre les deux panneaux de la ligne */
    align-items: flex-start; /* Aligne les panneaux en haut */
}

/* Chaque panneau DANS une ligne prend 50% de la place */
.ui-row > div {
    flex: 1;
    min-width: 0; /* Correction nécessaire pour flexbox */
}

/* --- RESTAURATION DE L'ANCIENNE MISE EN PAGE --- */

#resources-display p {
    margin: 2px 0;
    display: flex;
    align-items: center;
}

#game-stats-list, #inventory-section, #equipment-section, .stat-panel {
    background: #333;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #555;
}

#game-stats-list h3, #inventory-section h3, #equipment-section h3, .stat-panel h3 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

/* On s'assure que les listes n'ont pas de style par défaut */
#inventory-list, #equipment-list {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

#inventory-list li.restricted-item > span {
    color: #888 !important; /* Texte grisé */
    text-decoration: line-through;
    text-decoration-color: #d9534f; /* Ligne rouge */
    cursor: not-allowed !important;
}

#inventory-list li.restricted-item > span:hover {
    text-decoration-thickness: 2px;
}

#expedition-event-modal {
    /* Reste en place même si on scroll */
    position: fixed; 
    /* Au-dessus de tout le reste */
    z-index: 2500;   
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    /* Fond noir semi-transparent */
    background-color: rgba(0, 0, 0, 0.75); 
    /* Centre son contenu */
    display: flex;
    align-items: center;
    justify-content: center;
}

/* --- NOUVEAU : Style pour le Menu Options --- */

/* Bouton Engrenage */
#options-button {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 7000;
    
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    font-size: 1.5em;
    cursor: pointer;
    
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

#options-button:hover {
    background-color: #444;
    transform: rotate(45deg);
}

/* Modale des Options */
#options-modal {
    position: fixed;
    z-index: 3000; /* Au-dessus de tout */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

#options-content {
    background-color: #2a2a2a;
    padding: 20px;
    border: 1px solid #666;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#options-content h2 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

#options-content h4 {
    margin-bottom: 5px;
}

#options-content p {
    font-size: 0.9em;
    color: #ccc;
    line-height: 1.6;
}

#save-export-textarea {
    width: 100%;
    height: 100px;
    background-color: #222;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 5px;
    margin-top: 10px;
    padding: 8px;
    box-sizing: border-box;
    resize: none;
    font-family: monospace;
    font-size: 0.8em;
}

.options-buttons {
    margin-top: 10px;
    display: flex;
    gap: 10px;
}

.options-buttons button, #options-close-button {
    flex: 1;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #007bff;
    color: white;
    transition: background-color 0.2s;
}

.options-buttons button:hover, #options-close-button:hover {
    background-color: #0056b3;
}

#options-close-button {
    margin-top: 20px;
    background-color: #6c757d;
}
#options-close-button:hover {
    background-color: #5a6268;
}

/* --- FOOTER --- */
footer {
    text-align: center;
    margin-top: 50px;
    padding-top: 20px;
    border-top: 1px solid #444;
    font-size: 0.85em;
    color: #888;
}

footer p {
    margin: 4px 0;
}

.footer-links {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px; /* Espace entre les éléments */
}

.discord-link {
    display: inline-flex; /* Permet d'aligner l'icône et le texte */
    align-items: center;
    gap: 6px; /* Espace entre l'icône et le texte */
}

.discord-link svg {
    width: 20px;
    height: auto;
}

.footer-separator {
    color: #555;
}

footer a {
    color: #aaa;
    text-decoration: none;
    transition: color 0.2s; /* Ajoute une transition douce */
}

footer a:hover {
    color: #7289DA; /* Couleur officielle de Discord au survol */
}

/* style.css */

/* --- NOUVEAU : FENÊTRE DE CONFIRMATION PERSONNALISÉE --- */

#custom-confirm-modal {
    position: fixed;
    z-index: 8000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    display: flex;
    align-items: center;
    justify-content: center;
}

#custom-confirm-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #555;
    border-radius: 10px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 15px rgba(0,0,0,0.5);
    /* ▼▼▼ CORRECTIONS ▼▼▼ */
    display: flex;
    flex-direction: column;
    max-height: 80vh; /* Empêche de déborder de l'écran */
}

#custom-confirm-text {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 25px;
    /* ▼▼▼ CORRECTIONS ▼▼▼ */
    flex-grow: 1; /* Permet au texte de prendre l'espace disponible */
    overflow-y: auto; /* Ajoute une barre de défilement si nécessaire */
    padding-right: 15px; /* Espace pour la barre de défilement */
    margin-right: -15px; /* Compense le padding pour l'alignement */
    text-align: center;
}

.custom-confirm-buttons {
    display: flex;
    gap: 15px;
    justify-content: center;
    /* ▼▼▼ CORRECTION ▼▼▼ */
    flex-shrink: 0; /* Empêche les boutons de rétrécir */
}

.custom-confirm-buttons button {
    padding: 10px 30px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
    transition: background-color 0.2s, transform 0.1s;
    flex-grow: 1; /* Pour que les boutons prennent la même taille */
}

#custom-confirm-yes {
    background-color: #c0392b; /* Rouge pour une action destructive */
    color: white;
}
#custom-confirm-yes:hover {
    background-color: #a93226;
}

#custom-confirm-no {
    background-color: #6c757d; /* Gris pour annuler */
    color: white;
}
#custom-confirm-no:hover {
    background-color: #5a6268;
}

/* style.css -> AJOUTEZ CE BLOC À LA FIN */

.recycle-all-btn {
    margin-left: auto; /* Pousse le bouton à droite */
    padding: 6px 0; /* On retire le padding horizontal pour un look plus "lien" */
    font-size: 0.85em; /* Texte un peu plus petit */
    font-weight: normal; /* Police moins grasse */
    
    /* On le transforme en lien discret */
    background-color: transparent;
    color: #aaa; /* Gris clair */
    border: none;
    text-decoration: none;
    
    cursor: pointer;
    transition: color 0.2s;
}

.recycle-all-btn:hover:not(:disabled) {
    color: #e65c5a; /* S'illumine en rouge au survol */
    text-decoration: underline;
}

.recycle-all-btn:disabled {
    color: #666;
    cursor: not-allowed;
    text-decoration: none;
}
/* --- NOUVEAU : Style pour les sous-onglets du Village --- */
.village-sub-tabs {
    display: flex;
    margin-bottom: -1px; /* Pour que les onglets se connectent bien au contenu */
}

.sub-tab-button {
    padding: 10px 15px;
    cursor: pointer;
    border: 1px solid #555;
    border-bottom: none;
    background-color: #333;
    color: #ccc;
    border-radius: 6px 6px 0 0;
    margin-right: 5px;
    font-size: 1em;
}

.sub-tab-button.active {
    background-color: #444;
    color: #fff;
    border-bottom: 1px solid #444;
}

.sub-tab-button:hover:not(.active) {
    background-color: #3a3a3a;
}

.sub-panel {
    background-color: #444;
    padding: 20px;
    border: 1px solid #555;
    border-radius: 0 8px 8px 8px;
}

/* On s'assure que le contenu de l'enchanteur a un layout correct */
#enchanter-possibilities {
    grid-column: 1 / -1; /* Prend toute la largeur */
}
#enchanter-possibilities li {
    cursor: pointer;
}
.hidden {
    display: none !important;
}

/* --- NOUVEAU : Amélioration de l'interface de l'Enchanteur --- */

/* On divise l'interface en deux colonnes principales */
#enchanter-interface {
    grid-template-columns: 1fr 1fr;
}

.current-affix-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 10px;
}
.current-affix-header h4 {
    margin: 0;
}

.lock-affix-container {
    display: flex;
    align-items: center;
    font-size: 0.9em;
}
.lock-affix-container input {
    margin-right: 5px;
}

#enchanter-possibilities-list li {
    padding: 5px;
    border-radius: 3px;
    cursor: pointer;
}
#enchanter-possibilities-list li:hover {
    background-color: #4f4f4f;
}

#affix-breakdown-modal {
    position: fixed;
    z-index: 7500; /* Au-dessus de la vue de l'enchanteur */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

#affix-breakdown-content {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 10px;
    padding: 25px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#affix-breakdown-content h3 {
    margin-top: 0;
    color: #ffc107;
    text-align: center;
}

#affix-breakdown-tiers {
    margin: 20px 0;
}

.affix-tier-details {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 6px 0;
    border-bottom: 1px solid #444;
}
.affix-tier-details:last-child {
    border-bottom: none;
}
.affix-tier-stats {
    font-size: 0.9em;
    text-align: right;
}

#enchanter-equipment-list {
    display: grid;
    /* Affiche autant de colonnes de 200px que possible */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 15px;
    margin-top: 15px;
}
.enchanter-selection-item {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px;
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-radius: 5px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.enchanter-selection-item:hover {
    background-color: #4f4f4f;
}
.enchanter-selection-item .item-name {
    font-weight: bold;
}
.enchanter-selection-item .affix-preview {
    font-size: 0.9em;
    font-style: italic;
}



/* style.css -> AJOUTER ce bloc de CSS */

/* --- Amélioration de l'affichage des stats --- */
.stat-values {
    /* Unifie la taille de la police pour toute la ligne de droite */
    font-size: 1em; 
}
#player-base-stats-container .plus-button {
    margin-left: auto;
}
.stat-total {
    font-weight: bold;
    color: #ffc107;
    min-width: 25px; /* Aligne les chiffres */
    display: inline-block;
    text-align: right;
}
.stat-bonus-equipment {
    color: #80c080; /* Vert (bonus équipement/codex) */
    font-weight: bold;
}
.stat-bonus-affix {
    color: #58a6ff; /* Bleu (bonus enchantement) */
    font-weight: bold;
}

.stat-bonus-codex {
    color: #a335ee; /* Violet pour le codex */
    font-weight: bold;
}

#equipment-list li {
    display: grid;
    grid-template-columns: auto 1fr; 
    align-items: baseline;
    gap: 15px;
    margin-bottom: 8px;
    line-height: 1.4;
}
#equipment-list li strong {
    /* Pas besoin de largeur fixe, 'auto' s'en charge pour s'adapter au texte le plus long */
    color: #ccc;
}

#equipment-list li > span {
    text-align: right; /* On garde l'alignement à droite */
    font-weight: bold;
}


.enchanter-item-card {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 5px;
    padding: 15px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
    display: flex;
    flex-direction: column;
}

.enchanter-item-card:hover {
    border-color: #777;
    transform: translateY(-2px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

.enchanter-item-card h4 {
    margin: 0 0 5px 0;
    font-size: 1.1em;
}

.enchanter-item-card .item-slot-label {
    font-size: 0.8em;
    color: #aaa;
    margin: 0 0 10px 0;
    font-style: italic;
}

.enchanter-item-card .item-affix-details {
    margin-top: auto; /* Pousse cette section vers le bas */
    padding-top: 10px;
    border-top: 1px solid #444;
}

.item-affix-details .no-affix {
    color: #888;
    font-size: 0.9em;
}

.item-affix-details .affix-title {
    font-weight: bold;
    margin-bottom: 5px;
}

.item-affix-details .affix-stats {
    font-size: 0.9em;
    color: #ddd;
    line-height: 1.5;
}


/* style.css -> AJOUTEZ CE BLOC À LA FIN */

/* --- NOUVELLE MISE EN PAGE DE LA MODALE OPTIONS --- */

#options-content {
    display: flex;
    gap: 20px;
    height: 450px; /* Hauteur fixe pour une meilleure apparence */
    position: relative; /* Pour positionner le bouton "Fermer" */
    padding-bottom: 60px; /* Espace pour le bouton "Fermer" */
}

.options-menu {
    flex: 0 0 180px; /* Ne grandit pas, ne rétrécit pas, base de 180px */
    background-color: #222;
    border-radius: 8px;
    padding: 10px;
    border-right: 1px solid #444;
}

.options-menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.options-menu li {
    padding: 12px 15px;
    margin-bottom: 5px;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
    font-weight: bold;
}

.options-menu li:hover {
    background-color: #3f3f3f;
}

.options-menu li.active {
    background-color: #007bff;
    color: white;
}

.options-panel-container {
    flex-grow: 1; /* Prend le reste de la place */
    overflow-y: auto; /* Permet de scroller si le contenu est trop grand */
}

.options-panel {
    animation: fadeIn 0.3s ease-in-out;
}

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

#save-import-textarea {
    width: 100%;
    height: 100px;
    background-color: #222;
    color: #ddd;
    border: 1px solid #444;
    border-radius: 5px;
    margin-top: 10px;
    padding: 8px;
    box-sizing: border-box;
    resize: vertical;
    font-family: monospace;
    font-size: 0.8em;
}

/* Style pour la zone de danger */
.danger-zone-action {
    margin-top: 20px;
    padding: 15px;
    border: 1px solid #8e3a3a;
    background-color: #3a2222; /* Un rouge un peu moins agressif */
    border-radius: 8px;
}
.danger-btn {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #c0392b; /* Rouge danger */
    color: white;
    font-weight: bold;
    transition: background-color 0.2s;
}
.danger-btn:hover {
    background-color: #a93226;
}

/* Positionnement du bouton fermer */
#options-close-button {
    position: absolute;
    bottom: 20px;
    right: 20px;
    width: calc(100% - 240px); /* Ajusté à la largeur du panneau de droite */
}

/* --- NOUVEAU MENU HAMBURGER --- */
#main-menu-container {
    position: static;
}

#hamburger-button {
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
    border-radius: 8px;
    width: 45px;
    height: 45px;
    font-size: 1.8em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s ease;
    position: static;
}

#hamburger-button:hover {
    background-color: #444;
}

#main-menu {
    position: absolute;
    top: calc(var(--header-height) + env(safe-area-inset-top)); 
    left: 10px; /* Positionné à gauche */
    background-color: rgba(30, 30, 30, 0.9);
    backdrop-filter: blur(5px);
    border: 1px solid #666;
    border-radius: 8px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
    width: 220px;
    overflow: hidden;
    animation: slideDown 0.2s ease-out;
}

#main-menu ul {
    list-style: none;
    padding: 5px;
    margin: 0;
}

#main-menu li {
    padding: 12px 15px;
    cursor: pointer;
    border-radius: 5px;
    transition: background-color 0.2s;
    font-weight: bold;
}

#main-menu li:hover {
    background-color: #3f3f3f;
}

#main-menu li.disabled {
    color: #777;
    cursor: not-allowed;
    background-color: transparent !important;
    pointer-events: none; /* <-- AJOUTEZ CETTE LIGNE */
}

#main-menu li.separator {
    height: 1px;
    padding: 0;
    margin: 5px 0;
    background-color: #444;
}

/* Animation pour l'apparition du menu */
@keyframes slideDown {
    from { opacity: 0; transform: translateY(-10px); }
    to { opacity: 1; transform: translateY(0); }
}

.hidden {
    display: none;
}

/* style.css -> AJOUTEZ CE BLOC À LA FIN */

/* --- FENÊTRE MODALE DES STATISTIQUES --- */
#stats-modal {
    position: fixed;
    z-index: 3000; /* Au-dessus du jeu */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    align-items: center;
    justify-content: center;
}

#stats-modal-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #666;
    border-radius: 10px;
    width: 90%;
    max-width: 700px; /* Un peu plus large pour la grille */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#stats-modal-content h2 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* On crée un style de bouton de fermeture réutilisable */
.modal-close-button {
    margin-top: 5px;
    padding: 12px;
    font-size: 1em;
    font-weight: bold;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    background-color: #6c757d; /* Gris */
    color: white;
    transition: background-color 0.2s;
}

#constellation-content > .modal-close-button {
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.modal-close-button:hover {
    background-color: #5a6268;
}

/* style.css -> AJOUTEZ CECI À LA FIN */

/* --- STYLE POUR LES CARTES DE DÉBLOCAGE (FORGE & ENCHANTEUR) --- */

.unlock-container {
    text-align: center;
    padding: 25px;
    background-color: #3a3a3a;
    border-radius: 8px;
    border: 1px solid #555;
}

.unlock-container h3 {
    margin-top: 0;
    font-size: 1.3em;
}

.unlock-container p {
    color: #ccc;
    margin-bottom: 15px;
}

.unlock-container .cost-text {
    font-size: 1.1em;
    font-weight: bold;
}

.unlock-container .cost-text strong {
    color: #ffc107; /* Couleur dorée pour le coût */
}

/* --- NOUVEAU : FENÊTRE MODALE DU LEADERBOARD --- */
#leaderboard-modal {
    position: fixed;
    z-index: 3500; /* Au-dessus du reste */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex; /* Utilise flex pour centrer */
    align-items: center;
    justify-content: center;
}

#leaderboard-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #ffb300; /* Bordure dorée */
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#leaderboard-content h2 {
    margin-top: 0;
    color: #ffb300; /* Titre doré */
    text-align: center;
}

#leaderboard-list {
    list-style: none;
    padding: 0;
    margin: 20px 0;
}

#leaderboard-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    padding: 12px 10px;
    background-color: #333;
    border-radius: 5px;
    margin-bottom: 8px;
    font-size: 0.95em;
}

#leaderboard-list li:nth-child(1) {
    background-color: #4a3c0b; /* Fond spécial pour le #1 */
    font-weight: bold;
}

#leaderboard-list li span {
    color: #aaa;
    margin-left: 15px;
}

/* --- NOUVEAU : Onglets du Leaderboard --- */
.leaderboard-tabs {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-bottom: 15px;
}

.leaderboard-tab-button {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid #555;
    background-color: #333;
    color: #ccc;
    border-radius: 20px; /* Forme de pilule */
    font-size: 0.9em;
    transition: all 0.2s;
}

.leaderboard-tab-button:hover {
    background-color: #444;
}

.leaderboard-tab-button.active {
    background-color: #ffb300;
    color: #1a1a1a;
    font-weight: bold;
    border-color: #ffb300;
}

/* style.css */
.link-button {
    background: none;
    border: none;
    color: #00aaff;
    text-decoration: underline;
    cursor: pointer;
    font-size: 1em;
    padding: 0;
}
.link-button:hover {
    color: #33bbff;
}

#loading-overlay {
    position: fixed;
    z-index: 9999;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background: radial-gradient(ellipse at bottom, #1b2735 0%, #090a0f 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 1;
    visibility: visible;
    transition: opacity 0.8s ease-in-out 0.5s, visibility 0.8s ease-in-out 0.5s;
}

#loading-overlay.hidden {
    opacity: 0;
    visibility: hidden;
}

/* --- Contenu Principal (Logo, Texte, Barre) --- */
.loading-content {
    text-align: center;
    z-index: 10;
    animation: fadeInContent 1.5s 0.5s ease-out forwards;
    opacity: 0;
    position: relative; /* Pour le positionnement du texte */
}

@keyframes fadeInContent {
    to { opacity: 1; }
}

.loading-logo {
    width: 200px;
    height: 200px;
    margin: 0 auto 20px auto;
    background: url('assets/sprites/icons/logo.png') no-repeat center center;
    background-size: contain;
    animation: pulseLogo 4s infinite ease-in-out;
}

@keyframes pulseLogo {
    0%, 100% { transform: scale(1); opacity: 0.8; }
    50% { transform: scale(1.05); opacity: 1; }
}

#loading-text {
    font-family: 'Cinzel', serif;
    color: #e0e0e0;
    font-size: 2em;
    letter-spacing: 4px;
    text-transform: uppercase;
    text-shadow: 0 0 10px rgba(255, 193, 7, 0.5), 0 0 20px rgba(255, 193, 7, 0.3);
}

.loading-subtext {
    font-family: 'Lato', sans-serif;
    color: #aaa;
    font-style: italic;
    margin-top: 10px;
    display: block;
    height: 1.2em; /* Hauteur fixe pour éviter les sauts de layout */
    transition: opacity 0.5s ease-in-out; /* Pour l'animation de fondu */
}

.loading-bar-container {
    width: 80%;
    max-width: 300px;
    height: 4px;
    background-color: rgba(255, 255, 255, 0.1);
    border-radius: 2px;
    margin: 30px auto 0 auto;
}

.loading-bar-fill {
  width: 0%; /* On initialise la largeur à 0 */
  height: 100%;
  background: linear-gradient(90deg, #6c5ce7, #a29bfe);
  border-radius: 5px;
  /* On a retiré la ligne "animation" */
}

@keyframes loading-animation {
    from { width: 0%; }
    to { width: 100%; }
}

/* --- Arrière-plan Animé : Ciel Étoilé --- */
.constellation-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

.star {
    position: absolute;
    background: #fff;
    border-radius: 50%;
    box-shadow: 0 0 6px 2px #fff;
    animation: twinkle 5s infinite ease-in-out;
}

@keyframes twinkle {
    0%, 100% { opacity: 0.5; transform: scale(0.8); }
    50% { opacity: 1; transform: scale(1.2); }
}

/* Positionnement et tailles des étoiles fixes */
.star.s1 { top: 20%; left: 30%; width: 3px; height: 3px; animation-delay: 0s; }
.star.s2 { top: 40%; left: 60%; width: 3px; height: 3px; animation-delay: 1s; }
.star.s3 { top: 70%; left: 40%; width: 3px; height: 3px; animation-delay: 2s; }
.star.s4 { top: 10%; left: 80%; width: 2px; height: 2px; animation-delay: 0.5s; }
.star.s5 { top: 85%; left: 15%; width: 2px; height: 2px; animation-delay: 1.5s; }
.star.s6 { top: 50%; left: 10%; width: 1px; height: 1px; animation-delay: 2.5s; }
.star.s7 { top: 60%; left: 90%; width: 1px; height: 1px; animation-delay: 3s; }

.constellation-line {
    position: absolute;
    height: 1px;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.6), transparent);
    transform-origin: left center;
}

.constellation-line::before {
    content: '';
    position: absolute;
    width: 0;
    height: 100%;
    background: #fff;
    box-shadow: 0 0 5px 1px #fff;
    animation: draw-line 1.5s ease-out forwards;
    /* On utilise la variable '--line-delay' définie en JS */
    animation-delay: var(--line-delay, 0s);
}

@keyframes draw-line {
    to { width: 100%; }
}

/* Positionnement et animation des lignes */
.constellation-line.l1 {
    top: 20%; left: 30%;
    width: 36%; /* Distance entre s1 et s2 */
    transform: rotate(33.7deg);
    animation-delay: 0.5s;
}
.constellation-line.l1::before { animation-delay: 0.5s; }

.constellation-line.l2 {
    top: 40%; left: 60%;
    width: 36%; /* Distance entre s2 et s3 */
    transform: rotate(123.7deg);
    animation-delay: 1.5s;
}
.constellation-line.l2::before { animation-delay: 1.5s; }
.shooting-star {
    position: absolute;
    height: 2px;
    background: linear-gradient(-135deg, #fff, rgba(255,255,255,0));
    border-radius: 999px;
    filter: drop-shadow(0 0 6px #fff);
    
    /* On applique notre nouvelle animation. La durée et le délai seront définis en JS. */
    animation-name: shoot-across;
    animation-timing-function: ease-in-out;
    animation-iteration-count: infinite;
}
@keyframes shoot-across {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 1;
        width: 0;
    }
    30% {
        opacity: 1;
        /* On utilise la variable JS pour la longueur, avec 200px comme valeur par défaut */
        width: var(--star-length, 200px);
    }
    100% {
        transform: translateX(100vw) translateY(100vh) rotate(45deg);
        opacity: 0;
        width: var(--star-length, 200px);
    }
}

.shooting-star.on-fire {
    /* On lui assigne sa propre animation */
    animation-name: shoot-and-burn;
    /* On peut lui donner une lueur de base plus intense et jaunâtre */
    filter: drop-shadow(0 0 8px #ffd000);
}

@keyframes shoot-and-burn {
    /* De 0% à 40%, l'étoile est normale et blanche */
    0% {
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 1;
        width: 0;
        background: linear-gradient(-135deg, #fff, rgba(255, 255, 255, 0));
        filter: drop-shadow(0 0 6px #fff);
    }
    40% {
        opacity: 1;
        width: var(--star-length, 200px);
        background: linear-gradient(-135deg, #fff, rgba(255, 255, 255, 0));
        filter: drop-shadow(0 0 6px #fff);
    }
    /* À 100%, l'étoile a traversé l'écran et s'est transformée en boule de feu */
    100% {
        transform: translateX(100vw) translateY(100vh) rotate(45deg);
        opacity: 0;
        width: var(--star-length, 200px);
        /* Dégradé de feu et lueur intense orange/rouge */
        background: linear-gradient(-135deg, #ffcc00, #ff6600, rgba(255, 0, 0, 0));
        filter: drop-shadow(0 0 15px #ff8800) drop-shadow(0 0 5px #ff0000);
    }
}
/* On définit des points de départ et des délais différents pour chaque étoile */
.shooting-star.ss1 { top: 0; right: 0; animation-delay: 0s; }
.shooting-star.ss2 { top: 0; right: 200px; animation-delay: 1s; animation-duration: 4s; }
.shooting-star.ss3 { top: 100px; right: 0; animation-delay: 2s; animation-duration: 2.5s; }
.shooting-star.ss4 { top: 0; right: 800px; animation-delay: 3.5s; }

@keyframes shoot {
    0% {
        transform: translateX(0) translateY(0) rotate(45deg);
        opacity: 1;
        width: 0;
    }
    70% {
        opacity: 1;
        width: 200px;
    }
    100% {
        /* CORRECTION : On les fait traverser tout l'écran */
        transform: translateX(100vw) translateY(100vw) rotate(45deg);
        opacity: 0;
        width: 200px;
    }
}

.secondary-action-button {
    display: block;
    margin: 5px auto 15px auto; /* Marge négative en haut pour le rapprocher, marge en bas pour espacer */
    background: #444;
    border: 1px solid #666;
    color: #ccc;
    padding: 6px 12px;
    font-size: 0.85em;
    border-radius: 5px;
    cursor: pointer;
    transition: background-color 0.2s;
}

.secondary-action-button:hover {
    background-color: #555;
}

/* style.css */

/* --- Marchand du Village (Amélioré V2) --- */
.merchant-panel {
    background: linear-gradient(145deg, #3a3a3a, #2e2e2e);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px 20px;
    margin-top: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}
.merchant-panel h4 {
    margin-top: 0;
    margin-bottom: 5px;
    font-size: 1.2em;
    color: #ffc107;
}
p.merchant-description {
    font-size: 0.9em;
    color: #aaa;
    margin-top: 0;
    margin-bottom: 20px;
    border-bottom: 1px solid #444;
    padding-bottom: 10px;
}

/* Style pour l'échange de ressources */
.merchant-exchange-interface {
    display: grid;
    grid-template-columns: auto 1fr; /* 2 colonnes : Label | Input/Select */
    gap: 12px 10px;
    align-items: center;
}
.merchant-exchange-interface label {
    font-weight: bold;
    text-align: right;
}
.merchant-exchange-interface input, 
.merchant-exchange-interface select, 
#fragment-quantity,
.merchant-item-name input[type="number"] { /* <-- Ligne ajoutée pour cibler notre nouvel input */
    padding: 8px;
    font-size: 1em;
    background-color: #222;
    border: 1px solid #555;
    color: #f0f0f0;
    border-radius: 4px;
    width: 100%;
    box-sizing: border-box;
}
#exchange-button {
    grid-column: 1 / -1; /* Le bouton prend toute la largeur */
    padding: 10px;
    font-size: 1.05em;
}

/* Style pour l'achat de fragments */
.fragments-purchase-interface {
    display: grid;
    grid-template-columns: 1fr auto 1fr auto; /* 4 colonnes flexibles */
    gap: 10px;
    align-items: center;
    background-color: #2a2a2a;
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #444;
}
.fragments-purchase-interface span {
    text-align: center;
}
.fragments-purchase-interface select {
    padding: 8px;
    font-size: 1em;
    background-color: #222;
    border: 1px solid #555;
    color: #f0f0f0;
    border-radius: 4px;
}
.fragments-purchase-interface button {
    padding: 8px 15px;
}

#village-hub-view {
    display: flex;
    flex-direction: column;
    gap: 25px; /* Espace entre les quartiers */
}
#alchemist-section, #oracle-section {
    background-color: #333;
    padding: 15px;
    border-radius: 8px;
    margin-top: 20px;
    border: 1px solid #555;
}

#alchemist-items-list,
#cook-items-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); 
    gap: 5px;
    margin-top: 15px;
}

.oracle-panel {
    margin-top: 20px;
}

#oracle-card-collection {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(120px, 1fr));
    gap: 15px;
}

.oracle-card {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
}

.oracle-card img {
    display: block;       /* MODIFICATION : Force l'image à se comporter comme un bloc. */
    margin-left: auto;    /* MODIFICATION : Centre horizontalement le bloc. */
    margin-right: auto;   /* MODIFICATION : Centre horizontalement le bloc. */
    width: 80px;          /* On définit une largeur fixe. */
    height: 80px;         /* On force la MÊME hauteur pour créer un carré. */
    object-fit: cover;    /* Recadre l'image pour remplir le carré sans la déformer. */
    border-radius: 50%;   /* Applique la bordure circulaire. */
    margin-bottom: 5px;   /* Garde l'espace en dessous. */
    border: 3px solid #444;
    aspect-ratio: 1 / 1;  /* Sécurité pour forcer un ratio carré. */
}

.trait-card-image {
    width: 120px;         /* On définit une largeur fixe. */
    height: 120px;        /* On force la MÊME hauteur. */
    object-fit: cover;    /* Recadre l'image pour remplir le carré. */
    border-radius: 50%;   /* Applique la bordure circulaire. */
    border: 3px solid #444;
    margin-bottom: 15px;
    aspect-ratio: 1 / 1;  /* Sécurité supplémentaire. */
}

.oracle-card h4 {
    margin: 5px 0;
    font-size: 0.9em;
}

.oracle-card p {
    margin: 0;
    font-size: 0.8em;
    color: #aaa;
}

#completed-families-list {
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.village-district {
    background-color: #2a2a2a;
    border: 1px solid #444;
    border-radius: 8px;
    padding: 15px;
}

.village-district h3 {
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 1px solid #555;
    color: #ffc107;
}

.district-buildings {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 15px;
}
.completed-family {
    background-color: #2e4034;
    border: 1px solid #28a745;
    border-radius: 5px;
    padding: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.completed-family strong {
    color: #f0f0f0;
}

.completed-family span {
    font-size: 0.9em;
    color: #80c080; /* Vert pour le bonus */
}
.building-status-card {
    background: linear-gradient(145deg, #3a3a3a, #2e2e2e);
    border: 1px solid #555;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    text-align: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
    display: flex; /* Permet un meilleur contrôle du contenu */
    flex-direction: column;
    justify-content: space-between;
}

.building-status-card:hover {
    border-color: #888;
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.4);
}

.building-status-card h3 {
    font-size: 1.1em;
}
.building-status-card p {
    font-size: 0.95em;
    margin: 4px 0;
}
.building-status-card small {
    font-size: 0.8em;
}

/* Style pour les bâtiments bloqués */
.building-status-card.locked {
    filter: saturate(0.5) brightness(0.8);
    background: #333;
}

.building-status-card.locked:hover {
    border-color: #555;
    transform: none;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

/* --- NOUVEAU : Notifications "Toast" --- */
#toast-container {
    position: fixed;
    /* MODIFIÉ : On se base sur la hauteur du header + 15px d'espace */
    top: calc(var(--header-height) + env(safe-area-inset-top)); 
    right: 10px;
    z-index: 9999;
    display: flex;
    flex-direction: column;
    align-items: center; /* MODIFIÉ : On centre les toasts dans le conteneur */
    gap: 10px;
    /* SUPPRIMÉ : right: 20px; */
}

.toast {
    background-color: #2a2a2a;
    color: #f0f0f0;
    padding: 12px 18px;
    border-radius: 6px;
    border: 1px solid #555;
    box-shadow: 0 4px 10px rgba(0,0,0,0.5);
    opacity: 0;
    /* MODIFIÉ : Le toast commence au-dessus de sa position finale */
    transform: translateX(100%); 
    transition: all 0.4s ease-in-out;
    font-size: 0.95em;
}

.toast.show {
    opacity: 1;
    /* MODIFIÉ : Le toast glisse vers sa position finale (0) */
    transform: translateX(0); 
}

.toast.success {
    border-left: 4px solid #28a745; /* Vert */
}

.toast.error {
    border-left: 4px solid #dc3545; /* Rouge */
}

#fragment-cost-display {
    grid-column: 1 / -1; /* Prend toute la largeur de la grille */
    text-align: center;
    font-size: 0.9em;
    color: #ccc;
    background-color: #222;
    padding: 8px;
    border-radius: 4px;
    margin-top: 5px;
}

.chance-breakdown {
    margin-left:0px;
    color: #aaa;
    font-style: italic;
}

/* --- NOUVEAU : Modale Patch Notes & Menu Options --- */

.options-menu li.separator {
    height: 1px;
    padding: 0;
    margin: 5px 10px;
    background-color: #444;
    cursor: default;
}

.options-menu li.separator:hover {
    background-color: #444;
}

#patch-notes-modal {
    position: fixed;
    z-index: 3600; /* Au-dessus des autres modales */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

#patch-notes-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #666;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh; /* Empêche de dépasser de l'écran */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column; /* Permet au contenu de scroller */
}

#patch-notes-content h2 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
    margin-bottom: 10px;
    color: #ffc107;
}

#patch-notes-list {
    overflow-y: auto; /* Active le scroll si le contenu est trop long */
    padding-right: 15px; /* Espace pour la barre de scroll */
}

#patch-notes-list h4 {
    color: #00aaff;
    margin-top: 20px;
    margin-bottom: 10px;
}
#patch-notes-list ul {
    list-style-type: '» '; /* Joli style de puce */
    padding-left: 20px;
}
#patch-notes-list li {
    margin-bottom: 8px;
    line-height: 1.5;
}

#patch-notes-content .modal-close-button {
    flex-shrink: 0;        /* Empêche le bouton de rétrécir */
    margin-top: 20px;      /* Ajoute l'espace vital entre la liste et le bouton */
}

/* --- NOUVEAU : Modale Bug Report --- */

#bug-report-modal {
    position: fixed;
    z-index: 5700;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
}

#bug-report-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #666;
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#bug-report-content h2 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
}

#bug-report-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#bug-report-form label {
    font-weight: bold;
    font-size: 0.9em;
    color: #ccc;
}

#bug-report-form select,
#bug-report-form textarea {
    width: 100%;
    padding: 10px;
    font-size: 1em;
    background-color: #222;
    border: 1px solid #555;
    color: #f0f0f0;
    border-radius: 4px;
    box-sizing: border-box;
    resize: vertical;
}

.form-buttons {
    display: flex;
    gap: 10px;
    margin-top: 10px;
}

.form-buttons button {
    flex: 1;
    padding: 10px;
    border: none;
    border-radius: 5px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.2s;
}

.form-buttons .close-btn {
    background-color: #6c757d;
    color: white;
}
.form-buttons .close-btn:hover {
    background-color: #5a6268;
}

.form-buttons .submit-btn {
    background-color: #007bff;
    color: white;
}
.form-buttons .submit-btn:hover {
    background-color: #0056b3;
}
.form-buttons .submit-btn:disabled {
    background-color: #555;
    cursor: not-allowed;
}

#bug-report-status {
    text-align: center;
    min-height: 1.2em;
    font-size: 0.9em;
    font-weight: bold;
}

/* --- NOUVEAU : Panneaux Rétractables --- */
.collapsible-header {
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    user-select: none; /* Empêche la sélection du texte du titre */
    margin: -15px -15px 0 -15px !important; /* Ajuste le positionnement */
    padding: 15px;
    border-bottom: 1px solid #555;
}

.collapsible-header .collapse-arrow {
    transition: transform 0.3s ease;
    font-size: 0.8em;
}

.collapsible-header.active .collapse-arrow {
    transform: rotate(180deg);
}

.collapsible-content {
  max-height: 0;
  overflow: hidden; /* Cache le contenu ET la scrollbar */
  padding-top: 0;
  padding-bottom: 0;
  transition: max-height 0.3s ease-out, padding-top 0.3s ease-out, padding-bottom 0.3s ease-out;
}
.collapsible-header.active + .collapsible-content {
  max-height: 500px; /* Hauteur suffisante pour le contenu, permet l'animation */
  overflow-y: auto;  /* Affiche la scrollbar SEULEMENT si nécessaire */
  padding-top: 10px;
  padding-bottom: 1px; /* Empêche l'effondrement des marges internes */
}

/* --- NOUVEAU : En-tête de la modale d'expédition --- */
#event-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: transparent;
    border-top: 1px solid #444;
    border-bottom: 1px solid #444;
    padding: 8px 10px;
    margin-bottom: 20px;
    font-size: 0.9em;
}

#event-player-hp {
    font-weight: bold;
}

#event-current-resources {
    display: flex;
    gap: 15px;
    color: #ccc;
    border: none;
    padding: 0;
    margin: 0;
}

/* Couleurs des PV */
.hp-low {
    color: #ffae42; /* Orange */
    font-weight: bold;
}
.hp-critical {
    color: #ff6b6b; /* Rouge */
    font-weight: bold;
}   

 .right-panel {
    margin-top: 20px;
}

#enemy-group-container {
    display: flex;
    justify-content: center;
    align-items: flex-start; /* Aligne les cartes en haut */
    gap: 15px;
    margin: 20px 0;
    flex-wrap: wrap; /* Permet le retour à la ligne sur mobile */
}

.enemy-card {
    background-color: #2a2a2a;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 8px; /* Moins de padding */
    width: 130px; /* Largeur réduite */
    text-align: center;
    cursor: pointer;
    transition: all 0.2s ease;
}


.enemy-card p {
    margin: 3px 0; /* Espacement réduit */
    font-size: 0.8em; /* Texte plus petit */
}

.enemy-card.targeted {
    border-color: #ffc107; /* Bordure dorée pour la cible */
    box-shadow: 0 0 10px #ffc107;
    transform: scale(1.05);
}

.enemy-card.summon-card {
    width: 110px; /* Largeur réduite par rapport aux 130px de base */
    padding: 6px; /* Padding légèrement réduit */
    border-color: #5a4a69; /* Bordure violette pour identifier l'invocation */
}

/* On réduit la taille du titre pour les invocations */
.enemy-card.summon-card h4 {
    font-size: 0.9em;
    margin-bottom: 4px;
}

/* On réduit aussi la taille des textes (PV, etc.) */
.enemy-card.summon-card p {
    font-size: 0.75em;
    margin: 2px 0;
}

/* On rend la barre de vie un peu plus fine */
.enemy-card.summon-card .hp-bar {
    height: 6px;
}

/* Style pour une invocation ciblée */
.enemy-card.summon-card.targeted {
    border-color: #c599ff; /* Une bordure violette plus vive pour la cible */
    box-shadow: 0 0 10px #c599ff;
    /* L'effet de scale(1.05) de base s'appliquera toujours, ce qui est parfait */
}

#player-skills-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 20px 0;
}

#player-skills-container button {
    padding: 12px 20px;
    font-size: 1em;
    font-weight: bold;
}

.skill-button {
    padding: 12px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #f0f0f0;
    background: linear-gradient(145deg, #4f5d75, #3b4a61);
    border: 1px solid #2d3a4e;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    min-width: 120px; /* Assure une taille minimale constante */
}

.skill-button:hover:not(:disabled) {
    background: linear-gradient(145deg, #5a6a82, #46566e);
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.4);
}

.skill-button:disabled {
    background: #333;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

/* --- Style pour les boutons de consommables en combat --- */
.consumable-button {
    padding: 12px 20px;
    font-size: 1em;
    font-weight: bold;
    color: #f0f0f0;
    background: linear-gradient(145deg, #2a9d8f, #264653);
    border: 1px solid #1e3540;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
    min-width: 120px;
    position: relative; 
}

.consumable-button:not(.on-cooldown):hover:not(:disabled) {
    background: linear-gradient(145deg, #3ab0a2, #2c5261);
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.4);
}

.consumable-button:disabled {
    background: #333;
    color: #777;
    cursor: not-allowed;
    box-shadow: none;
    transform: none;
}

.consumable-button.on-cooldown {
    filter: grayscale(80%) brightness(0.6);
    cursor: not-allowed;
}

.consumable-button.on-cooldown::after {
    content: attr(data-cooldown);
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.7);
    color: #ffc107;
    font-size: 1.8em;
    font-weight: bold;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 5px;
}
/* --- AMÉLIORATION DU JOURNAL DE COMBAT --- */

#combat-log p {
    padding: 6px 8px;
    border-left: 3px solid #555; /* Bordure par défaut */
    transition: background-color 0.3s;
}

/* Action du joueur */
.player-action {
    background-color: rgba(0, 123, 255, 0.1);
    border-left-color: #007bff;
    color: #cdd9e5;
}

/* Action de l'ennemi */
.enemy-action {
    background-color: rgba(220, 53, 69, 0.1);
    border-left-color: #dc3545;
    color: #e5cdd1;
}

/* Miss (pour les deux) */
.miss {
    color: #aaa;
    font-style: italic;
}

.damage-number {
    font-weight: bold;
    color: #ffc107; /* Doré, pour bien ressortir */
    font-size: 1.1em;
}

/* Message système (crit, saignement, etc.) */
.system-message {
    background-color: rgba(255, 193, 7, 0.1);
    border-left-color: #ffc107;
    color: #e5e2cd;
    font-style: italic;
    font-size: 0.85em;
}

/* Affichage des chances de toucher */
.chance-display {
    color: #777;
    font-size: 0.9em;
    margin-left: 5px;
}

#special-resources-section {
    background: #333;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #555;
}

#special-resources-section-content {
    padding-top: 10px;
    font-size: 0.8em
}

.special-resource-line {
    display: flex;
    justify-content: space-between;
    font-size: 0.9em;
    padding: 4px 0;
    margin: 0;
    border-bottom: 1px solid #3f3f3f;
}

.special-resource-line:last-child {
    border-bottom: none;
}

.special-resource-line strong {
    color: #ffc107; /* Doré */
}

.no-special-resources {
    text-align: center;
    color: #888;
    font-style: italic;
    font-size: 0.9em;
}

#patrol-section {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
    /* ▼▼▼ MODIFICATIONS CI-DESSOUS ▼▼▼ */
    display: flex;
    flex-direction: column;
    align-items: center; /* Centre tout le contenu horizontalement */
}

#patrol-section h4 {
    margin-top: 0;
    color: #ffc107;
}

#patrol-section p {
    font-size: 0.9em;
    color: #ccc;
    max-width: 400px;
    margin: 10px auto;
}

#patrol-choices {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

#patrol-timer p {
    margin: 5px 0;
    font-size: 1.1em;
}

#patrol-timer { 
    text-align: center; 
    margin-bottom: 15px;
    display: block;
}

#patrol-timer strong {
    font-size: 1.3em;
    color: #80c080; /* Vert */
}

#expedition-tabs {
    border-bottom: 2px solid #555;
}

#expedition-panel-content {
    background-color: transparent; /* Pas de fond pour ne pas doubler les couleurs */
    border: none;
    padding: 0;
}

/* On s'assure que seul le contenu de l'onglet actif est visible */
.expedition-tab-content.hidden {
    display: none;
}

.report-section-title {
    font-weight: bold;
    color: #ffc107; /* Doré */
    margin: 15px 0 10px 0;
    text-align: center;
    letter-spacing: 1px;
}

.report-log {
    text-align: left;
    font-size: 0.9em;
    color: #ccc;
    background-color: #222;
    border-radius: 5px;
    padding: 10px;
    margin-bottom: 15px;
    max-height: 200px; /* Limite la hauteur du log */
    overflow-y: auto;  /* Le log devient scrollable si trop long */
}

.report-reward-line {
    margin: 6px 0;
    font-size: 1.05em;
}

/* Couleurs et icônes pour les récompenses */
.reward-xp { color: #f0f0f0; }
.reward-xp::before { content: '⭐ '; }



/* Couleurs pour les gains/pertes de vie dans le log */
.damage-text {
    color: #ff6b6b; /* Rouge */
    font-weight: bold;
}
.healing-text {
    color: #80c080; /* Vert */
    font-weight: bold;
}

.log-highlight {
    font-weight: bold;
    color: #e6cc81; /* Doré */
}

.enemy-card.dead {
    filter: grayscale(100%) brightness(0.5); /* Grise et assombrit la carte */
    border-color: #333; /* Bordure moins visible */
    box-shadow: none; /* Retire l'ombre du ciblage */
    transform: none; /* Annule l'effet de zoom du ciblage */
    cursor: default; /* Le curseur n'indique plus que c'est cliquable */
}

.log-item-drop {
    background-color: rgba(0, 170, 255, 0.1); /* Un fond bleu très léger */
    border: 1px solid #00aaff; /* Une bordure bleue pour le faire ressortir */
    border-left: 3px solid #00aaff;
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
    text-align: center; /* On centre le contenu de ce bloc */
}

.log-item-drop span {
    display: block; /* Chaque partie est sur sa propre ligne */
    font-size: 0.9em;
    color: #ccc;
}

.log-item-drop strong {
    display: block;
    font-size: 1.1em;
    margin-top: 4px;
}

.report-special-loot {
    font-weight: bold;
    font-size: 1.1em;
}

.report-special-loot::before {
    content: '🎁 ';
}

.report-components {
    font-size: 0.95em;
    color: #c0a0e0; /* Violet clair pour les composants */
}
.report-components::before {
    content: '✨ ';
}

#components-inventory-wrapper {
    display: flex; /* Aligne les enfants horizontalement */
    gap: 20px; /* Espace entre les deux panneaux */
    align-items: flex-start; /* Aligne les panneaux en haut s'ils n'ont pas la même hauteur */
}

/* On s'assure que chaque panneau prend une largeur égale */
#components-inventory-wrapper > div {
    flex: 1;
}

/* style.css */

/* --- NOUVEAU : Style pour le Tableau des Primes --- */
#bounty-board-section {
    text-align: center;
}

#bounty-board-section h3 {
    margin-top: 0;
}

#bounty-board-section .bounty-timer {
    font-size: 0.9em;
    color: #aaa;
    margin-bottom: 20px;
}

#bounty-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.bounty-card {
    background-color: #3a3a3a;
    border: 1px solid #555;
    border-left: 5px solid #ffc107; /* Bordure dorée distinctive */
    border-radius: 8px;
    padding: 15px;
    text-align: left;
    display: grid;
    grid-template-columns: 1fr auto; /* Nom | Bouton */
    grid-template-rows: auto auto; /* Nom | Récompenses */
    gap: 5px 15px;
}

.bounty-card.completed {
    border-left-color: #28a745; /* Vert pour les primes terminées */
    filter: brightness(0.7);
}

.bounty-card h4 {
    grid-column: 1 / 2;
    margin: 0;
    font-size: 1.2em;
}

.bounty-card .bounty-rewards {
    grid-column: 1 / 2;
    font-size: 0.9em;
    color: #ccc;
}

.bounty-card .action-button {
    grid-column: 2 / 3;
    grid-row: 1 / 3; /* Le bouton prend toute la hauteur */
    align-self: center; /* Se centre verticalement */
}

.bounty-difficulty {
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 6px;
    border-radius: 10px;
    color: #fff;
    margin-left: 10px;
}
.difficulty-Facile { background-color: #28a745; }
.difficulty-Moyen { background-color: #007bff; }
.difficulty-Difficile { background-color: #a335ee; }
.difficulty-Élite { background-color: #ff8000; }

/* On s'assure que la nouvelle monnaie s'affiche bien dans le panneau des composants */
.special-resource-line.marques_chasseur strong::before {
    content: '🎯 ';
}

.all-bounties-completed {
    text-align: center;
    padding: 20px;
    background-color: rgba(40, 167, 69, 0.1); /* Fond vert très léger */
    border: 1px solid #28a745; /* Bordure verte */
    border-radius: 8px;
    margin-top: 15px;
    color: #f0f0f0;
}

.all-bounties-completed h4 {
    margin: 0 0 5px 0;
    color: #28a745; /* Titre en vert */
}

#equipment-list span, 
#inventory-list span, 
#game-stats-list .stat-line strong, 
.enchanter-item-card,
button {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ et Edge */
    user-select: none;         /* Standard */
}

.custom-confirm-buttons button:disabled {
    background-color: #555 !important;
    color: #999 !important;
    cursor: not-allowed;
    transform: none;
}

.online-warning {
    margin-top: 15px;
    padding: 10px;
    background-color: #4d1c1c; /* Fond rouge très sombre */
    border: 1px solid #c0392b; /* Bordure rouge vif */
    border-radius: 5px;
    color: #f0f0f0; /* Texte clair */
    font-weight: bold;
    font-size: 0.9em;
}

.bounty-master-set-container {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    margin-bottom: 20px;
}

.set-bonus-display {
    background-color: #222;
    border-radius: 5px;
    padding: 10px;
    margin: 10px 0;
    font-size: 0.9em;
}

.set-bonus-display p {
    margin: 5px 0;
    color: #ccc;
}

.set-bonus-display strong {
    color: #ffc107; /* Doré */
}

.set-accordion {
    margin-bottom: 10px;
}

.set-accordion-header {
    width: 100%;
    background-color: #3a3a3a;
    border: 1px solid #555;
    padding: 10px 15px;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1.1em;
    font-weight: bold;
    text-align: left;
    cursor: pointer;
    transition: background-color 0.2s;
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.set-accordion-header:hover {
    background-color: #454545;
}

.set-accordion-header .arrow {
    transition: transform 0.3s ease;
}

.set-accordion-header.active .arrow {
    transform: rotate(180deg);
}

.set-accordion-content {
    padding: 15px;
    border: 1px solid #444;
    border-top: none;
    border-radius: 0 0 6px 6px;
    background-color: #2e2e2e;
}

.online-warning {
    margin-top: 15px;
    padding: 10px;
    background-color: #4d1c1c; /* Fond rouge très sombre */
    border: 1px solid #c0392b; /* Bordure rouge vif */
    border-radius: 5px;
    color: #f0f0f0; /* Texte clair */
    font-weight: bold;
    font-size: 0.9em;
}

/* --- Style pour le bouton de verrouillage --- */
.lock-btn {
    background: none;
    border: none;
    color: #ccc;
    cursor: pointer;
    font-size: 1.2em; /* Rend l'icône plus grande et facile à cliquer */
    padding: 0 10px 0 0; /* Un peu d'espace à droite */
    transition: color 0.2s;
}

.lock-btn:hover {
    color: #ffc107; /* S'illumine en doré au survol */
}

/* --- Ajustement de la liste d'inventaire --- */
#inventory-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 5px;
}

#inventory-list li > span {
    flex-grow: 1; /* Le nom de l'objet prend tout l'espace restant */
    text-align: left;
}

.set-bonus-inactive {
    color: #ffc107; /* Doré/Jaune pour un bonus inactif */
    font-weight: bold;
}

.set-bonus-active {
    color: #28a745; /* Vert pour un bonus actif */
    font-weight: bold;
}

.set-bonus-stats-text {
    color: #f0f0f0; /* Force la couleur blanche pour les stats */
}

/* Assure que les "strong" à l'intérieur des stats héritent de la couleur blanche */
.set-bonus-stats-text strong {
    color: inherit;
}

.bounty-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 10px;
    border-bottom: 1px solid #444;
}

.bounty-header h3 {
    margin: 0;
}

.bounty-header .bounty-timer {
    margin: 0; /* Retire les marges par défaut du paragraphe */
}

.bounty-timer-controls {
    text-align: right;
    font-size: 0.9em;
    color: #aaa;
}

#bounty-refresh-button {
    display: block;
    width: 100%;
    margin: 15px 0;
    background-color: #007bff;
}

/* --- NOUVEAU : Style pour les Sprites en Combat --- */

.enemy-sprite-container {
    width: 100%;
    height: 80px; /* Hauteur fixe pour que toutes les cartes aient la même taille */
    margin-bottom: 8px; /* Espace entre le sprite et le nom */
    display: flex;
    align-items: center;
    justify-content: center;
}

.enemy-sprite-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Assure que le sprite n'est pas déformé */
    will-change: transform;
}

/* On réduit la taille du nom de l'ennemi comme demandé */
.enemy-card h4 {
    font-size: 0.9em; /* Légèrement plus petit */
    margin-bottom: 8px; /* Espace ajusté */
}

/* --- NOUVEAU : Animation de prise de dégâts --- */
@keyframes damage-shake {
  0% {
    transform: translateX(0);
    filter: brightness(2.5); /* Flash blanc intense */
  }
  25% {
    transform: translateX(-4px);
  }
  50% {
    transform: translateX(4px);
    filter: brightness(1); /* Retour à la luminosité normale */
  }
  75% {
    transform: translateX(-2px);
  }
  100% {
    transform: translateX(0);
  }
}

/* Classe qu'on ajoutera temporairement en JS pour déclencher l'animation */
.is-taking-damage {
  animation: damage-shake 0.3s ease-in-out;
}

/* --- MODIFICATION : Effet grisé sur la mort --- */
/* On cible l'image à l'intérieur d'une carte marquée comme "morte" */
.enemy-card.dead .enemy-sprite-container img {
  filter: grayscale(100%) brightness(0.6);
  transition: filter 0.5s ease; /* Transition douce vers le gris */
}

#class-selection-container {
    display: flex;
    gap: 15px;
    margin-top: 10px;
}

.class-choice {
    flex: 1;
    padding: 15px;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    text-align: left;
    color: #f0f0f0;
}

.class-choice h4 {
    margin: 0 0 5px 0;
    color: #ffc107;
}

.class-choice p {
    margin: 0;
    font-size: 0.85em;
    color: #ccc;
}

.class-choice:hover {
    border-color: #888;
}

.class-choice.selected {
    border-color: #00aaff;
    background-color: #444;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}

#class-choice-modal {
    position: fixed;
    z-index: 5000;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

#class-choice-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #ffc107;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    text-align: center;
}

#modal-class-selection-container {
    display: flex;
    gap: 15px;
    margin: 20px 0;
}

.stat-reset-option {
    margin: 20px 0;
    font-size: 0.9em;
}

#finalize-class-choice-button {
    width: 100%;
    padding: 12px;
}

#mana-fill, #player-mana-fill-combat {
  background: #3498db; /* Bleu pour le mana */
  height: 100%;
  /* On ajoute une transition douce, comme pour la barre de PV */
  transition: width 0.4s ease-out; 
}

/* style.0.5.0.css -> AJOUTER CE BLOC */

/* --- NOUVEAU : Style pour la case à cocher personnalisée --- */

/* On cache la case à cocher par défaut */
.stat-reset-option input[type="checkbox"] {
    display: none;
}

/* On stylise notre fausse case à cocher (le label) */
.stat-reset-option label {
    position: relative; /* Nécessaire pour positionner le "V" */
    cursor: pointer;
    padding-left: 30px; /* Espace pour la fausse case */
    user-select: none; /* Empêche la sélection du texte */
    display: inline-flex; /* Pour bien aligner le texte et la case */
    align-items: center;
}

/* On dessine le carré de notre case à cocher */
.stat-reset-option label::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 4px;
    transition: all 0.2s ease;
}

/* On dessine le "V" de validation (caché par défaut) */
.stat-reset-option label::after {
    content: '✔';
    position: absolute;
    left: 5px;
    top: 50%;
    transform: translateY(-50%) scale(0); /* Caché et prêt à grandir */
    font-size: 16px;
    color: #ffc107; /* Doré */
    transition: transform 0.2s ease;
}

/* Quand la VRAIE case est cochée, on change le style de notre FAUSSE case */
.stat-reset-option input[type="checkbox"]:checked + label::before {
    background-color: #444;
    border-color: #ffc107; /* Bordure dorée */
}

/* Quand la VRAIE case est cochée, on fait apparaître le "V" */
.stat-reset-option input[type="checkbox"]:checked + label::after {
    transform: translateY(-50%) scale(1); /* Apparaît */
}

/* --- NOUVEAU : Style pour les sprites de classe --- */
.class-sprite-container {
    width: 100%;
    height: 60px; /* Hauteur fixe pour l'icône */
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.class-sprite-container img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 4px rgba(0,0,0,0.5)); /* Ajoute une ombre portée */
}

/* On change un peu le bouton pour que le contenu soit centré */
.class-choice {
    text-align: center;
}

.enchanter-item-card.disabled {
    cursor: not-allowed;
    filter: grayscale(80%) brightness(0.7);
}

.enchanter-item-card.disabled:hover {
    transform: none; /* Annule l'effet de survol */
    box-shadow: none;
    border-color: #555;
}

.set-class-restriction {
    text-align: center;
    font-size: 0.9em;
    font-style: italic;
    color: #ccc;
    background-color: #222;
    padding: 5px;
    margin: 0 0 10px 0;
    border-radius: 4px;
}

.set-class-restriction strong {
    color: #ffc107; /* Doré */
}

/* --- NOUVEAU : Style pour les sprites du Codex (Mise en page V2) --- */

.codex-entry {
    cursor: pointer;
    background-color: #333;
    border: 1px solid #555;
    border-radius: 8px;
    padding: 15px;
    display: flex;
    flex-direction: column; /* Empile l'en-tête et la barre de progression */
    gap: 12px; /* Espace entre l'en-tête et la barre de progression */
}
#codex-detail-modal {
    position: fixed;
    z-index: 5000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#codex-detail-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 600px;
    max-height: 90vh;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}

#codex-detail-content h2 {
    margin-top: 0;
    text-align: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

#codex-detail-body {
    display: flex;
    gap: 20px;
    overflow-y: auto;
    flex-grow: 1;
    padding-right: 10px;
}

#codex-detail-sprite-container {
    flex: 0 0 150px; /* Taille fixe pour le sprite */
    background-color: #1a1a1a;
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #111;
    height: 150px; /* Assure une forme carrée */
}

#codex-detail-sprite-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

#codex-detail-info-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.codex-detail-section h4 {
    margin: 0 0 8px 0;
    color: var(--color-accent-highlight);
    font-size: 1.1em;
}

.codex-detail-section .locked-info {
    font-style: italic;
    color: #777;
}

#codex-detail-locations ul {
    list-style: '» ';
    padding-left: 20px;
    margin: 0;
    font-size: 0.9em;
}

#codex-detail-stats table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9em;
}

#codex-detail-stats td {
    padding: 4px 8px;
    border-bottom: 1px solid #3a3a3a;
}

#codex-detail-stats td:last-child {
    text-align: right;
    font-weight: bold;
    color: #eee;
}

#codex-detail-content .modal-close-button {
    margin-top: 20px;
    flex-shrink: 0;
}
.codex-header {
    display: flex; /* Aligne le sprite et les infos côte à côte */
    align-items: center;
    gap: 15px;
}

.codex-sprite-container {
    flex-shrink: 0;
    width: 60px;
    height: 60px;
    background-color: #222;
    border-radius: 5px;
    border: 1px solid #444;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2em;
    color: #555;
}

.codex-sprite-container img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
    will-change: transform;
}

.codex-info {
    flex-grow: 1;
}

.codex-info h4, .codex-info p {
    margin: 0; /* On retire les marges pour un alignement propre */
}

.codex-info h4 {
    margin-bottom: 5px; /* Petit espace sous le nom */
    font-size: 1.2em;
}

.codex-tier {
    font-size: 0.9em;
}

/* La barre de progression prend maintenant toute la largeur */
.codex-progress {
    width: 100%;
}

/* --- NOUVEAU : Style pour l'infobulle des statistiques --- */

.stat-line {
    cursor: help;
}

#stat-tooltip {
    position: fixed;
    /* On utilise une couleur parchemin et une ombre plus douce. */
    background-color: #2a241e; /* Fond parchemin sombre. */
    border: 2px solid #5a4a3a; /* Bordure type cadre en bois. */
    border-radius: 6px;
    padding: 12px;
    z-index: 10000;
    width: 240px;
    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.5);
    pointer-events: none;
    font-size: 0.9em;
    line-height: 1.6;
    /* Une petite ombre sur le texte pour le rendre plus lisible. */
    text-shadow: 1px 1px 2px #111;
}

#stat-tooltip.hidden {
    display: none;
}

#stat-tooltip strong {
    color: #ffc107; /* Doré */
}

.tooltip-stat-line {
    display: flex;
    padding: 2px 0;
    border-bottom: 1px solid #333;
}

.tooltip-stat-line:last-child {
    border-bottom: none;
}

.stat-info {
    /* Ce conteneur pour le nom et la valeur prend toute la place à gauche */
    flex-grow: 1;
    display: flex;
    align-items: center;
    cursor: help; /* On remet le curseur d'aide ici */
}
.stat-info strong{
    padding: 7px;
}
.stat-values {
    /* On ajoute une marge à gauche pour espacer le nom de la valeur */
    margin-left: 10px;
    cursor: help; /* Ajout du curseur pour indiquer l'interactivité */
}

.stat-values strong{
    
    text-align: right;
    color: #ffc107;
    padding: 7px;
}

#stat-breakdown-modal {
    position: fixed;
    z-index: 5000; /* Au-dessus de tout, même des autres modales */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

#stat-breakdown-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 350px; /* Une modale assez compacte */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#stat-breakdown-content h3 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#stat-breakdown-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-bottom: 20px;
}

.stat-breakdown-line {
    display: flex;
    justify-content: space-between;
    font-size: 1em;
    padding: 4px 0;
}
.stat-breakdown-line span:first-child {
    color: var(--color-text-secondary);
}
.stat-breakdown-line span:last-child {
    font-weight: bold;
    color: #f0f0f0;
}
.stat-breakdown-line.total {
    border-top: 1px solid var(--color-border);
    padding-top: 10px;
    font-size: 1.1em;
}
.stat-breakdown-line.total span {
    color: var(--color-accent-highlight);
}

#stat-breakdown-content .modal-close-button {
    width: 100%;
}
.stat-info-name {
    cursor: help;
}

#stat-tooltip {
    /* ... (le style existant est bon) ... */
    /* On change juste le top pour qu'il s'affiche en dessous par défaut */
    top: auto; 
    bottom: auto;
}

.icon-sprite {
    width: 1.1em; /* Un peu plus grand que la ligne de texte */
    height: 1.1em;
    vertical-align: text-bottom; /* S'aligne joliment avec le bas du texte */
    margin-right: 4px; /* Petit espace à droite */
}
.icon-sprite, .icon-sprite-small, .season-icon {
    filter: drop-shadow(0 1px 1px rgba(0,0,0,0.5));
    backface-visibility: hidden;
    will-change: transform;
}
.icon-sprite-small {
    width: 24px;   /* Définit une largeur fixe pour toutes les icônes */
    height: 24px;  /* Définit une hauteur fixe pour toutes les icônes */
    object-fit: contain; /* S'assure que l'image est contenue dans son cadre sans être coupée ni déformée */
    vertical-align: middle; /* Aligne l'icône au centre du texte adjacent */
    display: inline-block; /* Permet d'appliquer largeur/hauteur et de l'aligner avec le texte */
}
.icon-sprite-small img{
    width:20px;
    height: auto;
}

.cost-item {
  display: inline-block; /* Traite le bloc comme un seul élément qui ne peut pas être coupé */
  white-space: nowrap;  /* Sécurité supplémentaire pour empêcher le retour à la ligne interne */
  margin-right: 5px;    /* Ajoute un petit espace entre les coûts */
}

/* --- Panneau des Consommables --- */
#consumables-section {
    background: #333;
    padding: 15px;
    border-radius: 8px;
    border: 1px solid #555;
}

#consumables-section h3 {
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
    margin-bottom: 10px;
}

#consumables-list {
    padding-left: 0;
    list-style: none;
    margin: 0;
}

#consumables-list li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 5px;
    border-radius: 4px;
    margin-bottom: 5px;
}

#consumables-list li:nth-child(even) {
    background-color: #2a2a2a;
}

/* --- Minuteur de Tour de Combat --- */
.timer-bar-bg {
    width: 100%;
    height: 6px;
    background-color: #444;
    border-radius: 3px;
    margin: 10px 0;
}

.timer-bar-fill {
    height: 100%;
    width: 100%;
    background-color: #ffc107;
    border-radius: 3px;
    transition: width 0.2s linear; /* Transition douce pour la barre */
}

.combat-tabs {
    display: flex;
    border-bottom: 2px solid #555;
}

.combat-tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: 1px solid transparent;
    border-bottom: none;
    background-color: #333;
    color: #ccc;
    border-radius: 6px 6px 0 0;
    margin-right: 5px;
    font-size: 1em;
}

.combat-tab-button.active {
    background-color: #444;
    color: #fff;
    border-color: #555;
}

.combat-tab-content {
    background-color: #444;
    padding: 10px;
    border: 1px solid #555;
    border-top: none;
    border-radius: 0 0 8px 8px;
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap; /* Permet aux boutons de passer à la ligne */
}

/* --- NOUVEAU : Style pour le Donjon Infini --- */
#dungeon-main-view {
    text-align: center;
}
#enter-dungeon-button {
    padding: 12px 24px;
    font-size: 1.2em;
}

#dungeon-encounter-map {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
}

.dungeon-encounter-node {
    width: 50px;
    height: 50px;
    border: 2px solid #555;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5em;
    background-color: #333;
    color: #888;
}

.dungeon-encounter-node.active {
    border-color: #ffc107;
    background-color: #444;
    color: #ffc107;
    box-shadow: 0 0 10px #ffc107;
}

.dungeon-encounter-node.completed {
    border-color: #28a745;
    background-color: #2a2a2a;
    color: #28a745;
}

#dungeon-modifiers-display {
    text-align: center;
    font-style: italic;
    color: #a335ee; /* Violet pour les modificateurs */
    margin-bottom: 15px;
}

/* Fond spécial pour les combats de donjon */
body.dungeon-active #combat-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/background/dungeon_bg.png');
    background-size: cover;
    border: 1px solid #a335ee;
}

#dungeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}

#dungeon-header h3 {
    margin: 0;
}

#dungeon-key-display {
    background-color: #2a2a2a;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #444;
    font-weight: bold;
}

/* DANS style.0.6.0.css, à la fin */
/* REMPLACE le bloc "Style pour le Donjon Infini" et "Style pour la CARTE du Donjon" par ceci */

/* --- NOUVEAU : Style pour le Donjon Infini (Carte explorable) --- */
#dungeon-main-view { text-align: center; }
#enter-dungeon-button { padding: 12px 24px; font-size: 1.2em; }

#dungeon-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 15px;
    border-bottom: 1px solid #555;
    padding-bottom: 10px;
}
#dungeon-header h3 { margin: 0; }
#dungeon-key-display { background-color: #2a2a2a; padding: 5px 10px; border-radius: 5px; border: 1px solid #444; font-weight: bold; }

/* La "fenêtre" à travers laquelle on regarde la carte */
#dungeon-map-viewport {
    width: 100%;
    max-width: 450px;
    height: 450px;
    margin: 20px auto;
    border: 2px solid #444;
    border-radius: 8px;
    background-color: #222;
    overflow: hidden; /* C'est la magie : tout ce qui dépasse est caché ! */
    position: relative;
    cursor: grab;
    -webkit-user-select: none; /* Safari */
    -ms-user-select: none;     /* IE 10+ et Edge */
    user-select: none;         /* Standard */
    touch-action: none;
}
#dungeon-map-viewport:active {
    cursor: grabbing;
}

/* La carte elle-même, qui sera plus grande et déplacée par JS */
#dungeon-map-grid {
    display: grid;
    position: relative;
    transition: transform 0.3s ease-out; 
}

/* Le style des cases */
.grid-cell {
    /* On le rend transparent pour qu'il prenne la couleur de fond du viewport */
    background-color: transparent; 
    border: none; /* On retire aussi la bordure des cases vides */
    position: relative;
    transition: all 0.3s ease;

}

.grid-cell.room {
    background-color: #383838;
    border: 1px solid #2a2a2a;
}
.grid-cell.visible {
    background-color: #4f4f4f;
    cursor: pointer;
    border: 1px solid #888;
}
.grid-cell.visible:hover {
    background-color: #616161;
    transform: scale(1.05);
    z-index: 10;
}
.grid-cell.cleared {
    background-color: #444;
    filter: brightness(0.7);
}
.grid-cell.current {
    background-color: #555;
    border: 2px solid #ffc107;
    box-shadow: 0 0 10px #ffc107;
}
.grid-cell img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    padding: 10%;
    pointer-events: none;
}
.player-token {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    padding: 5% !important;
    object-fit: contain;
    animation: bounce 1.5s infinite ease-in-out;
    filter: drop-shadow(0 3px 3px rgba(0,0,0,0.7));
    pointer-events: none;
}
@keyframes bounce {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-5px); }
}

/* Fond spécial pour les combats (inchangé) */
body.dungeon-active #combat-section {
    background: linear-gradient(rgba(0, 0, 0, 0.6), rgba(0, 0, 0, 0.6)), url('assets/sprites/dungeon_bg.png');
    background-size: cover;
    border: 1px solid #a335ee;
}

.dungeon-progress-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

#dungeon-loot-display {
    background-color: #2a2a2a;
    padding: 5px 10px;
    border-radius: 5px;
    border: 1px solid #444;
    font-weight: bold;
}

#flee-dungeon-button {
    width: 100%;
    margin-top: 15px;
    background-color: #5a1d1d; /* Rouge sombre */
    border: 1px solid #8e3a3a;
}
#flee-dungeon-button:hover {
    background-color: #7a2828;
}

#leaderboard-list li.current-player-rank {
    background-color: #3a4a61; /* Un bleu distinctif */
    border: 2px solid #00aaff;  /* Une bordure bleue lumineuse */
    box-shadow: 0 0 8px rgba(0, 170, 255, 0.7);
}

.stat-tab-content p{
    margin:5px;
}

#dungeon-buffs-display {
    text-align: center;
    font-style: italic;
    color: #80c080; /* Vert pour les buffs */
    margin-bottom: 15px;
}

/* Cache le détail des stats par défaut */
.stat-breakdown {
    display: none;
    position: absolute;
    left: 100%;
    top: 0;
    margin-left: 10px;
    padding: 10px;
    background-color: #1a1a1a;
    border: 1px solid #444;
    border-radius: 5px;
    width: 200px;
    z-index: 100;
    font-size: 0.8em;
}

/* Affiche le détail quand le conteneur est survolé ou actif (mobile) */
.stat-container:hover .stat-breakdown,
.stat-container.active .stat-breakdown {
    display: block;
}

/* --- Style pour le contenu du rapport de Donjon DANS la modale d'alerte --- */
#custom-alert-text .reward-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    font-size: 1.1em;
    border-bottom: 1px solid rgba(180, 180, 180, 0.2);
}

#custom-alert-text .reward-line span {
    display: flex;
    align-items: center;
    gap: 10px;
}

#custom-alert-text .reward-category {
    margin-top: 25px;
    margin-bottom: 10px;
    font-size: 1.2em;
    font-weight: bold;
    color: #ffc107;
    text-align: center;
    border-bottom: 1px solid #555;
    padding-bottom: 5px;
}

#custom-alert-text .reward-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(80px, 1fr));
    gap: 15px;
    justify-items: center;
    margin-top: 15px;
}

#custom-alert-text .reward-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
    font-size: 1em;
}

#custom-alert-text .reward-item img {
    width: 48px;
    height: 48px;
}

#combat-section h2{
    margin:5px
}

/* ... Tout votre CSS jusqu'à la section des Succès ... */

/* ============================================================================
// ==   NOUVEAU : Interface des Succès
// ============================================================================ */

#achievements-modal {
    position: fixed; /* Reste en place même si on scroll */
    z-index: 3500;   /* Au-dessus du reste */
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond noir semi-transparent */
    display: flex; /* Utilise flex pour centrer son contenu */
    align-items: center;
    justify-content: center;
}

/* Contenu de la modale, inspiré du leaderboard */
#achievements-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #ffb300; /* Bordure dorée comme le leaderboard */
    border-radius: 10px;
    width: 90%;
    max-width: 700px; /* Un peu plus large pour les cartes */
    max-height: 80vh; /* Empêche de déborder de l'écran */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column; /* Permet au contenu de scroller */
}

#achievements-content h2 {
    margin-top: 0;
    color: #ffb300; /* Titre doré */
    text-align: center;
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
}

/* Filtres de catégories, inspirés des onglets du leaderboard */
#succes-categories {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin: 15px 0;
    flex-wrap: wrap; /* Pour les petits écrans */
}

.succes-category-button {
    padding: 8px 15px;
    cursor: pointer;
    border: 1px solid #555;
    background-color: #333;
    color: #ccc;
    border-radius: 20px; /* Forme de pilule */
    font-size: 0.9em;
    transition: all 0.2s;
}

.succes-category-button:hover {
    background-color: #444;
}

.succes-category-button.active {
    background-color: #ffb300;
    color: #1a1a1a;
    font-weight: bold;
    border-color: #ffb300;
}

/* Liste des cartes de succès */
#succes-list {
    overflow-y: auto; /* Active le scroll si le contenu est trop long */
    padding-right: 15px; /* Espace pour la barre de scroll */
    margin: 0 -15px 0 0;
    display: flex;
    flex-direction: column;
    gap: 15px; /* Espace entre chaque carte */
    padding-bottom: 15px;
}

/* Carte individuelle de succès */
.succes-card {
    background-color: #333;
    border-radius: 8px;
    border: 1px solid #555;
    padding: 15px;
    display: grid;
    grid-template-columns: 50px 1fr; /* Colonne pour l'icône, puis le reste */
    grid-template-rows: auto 1fr; /* Ligne pour l'en-tête, puis le reste */
    gap: 0 15px; /* Pas d'espace vertical, 15px horizontal */
    align-items: center;
}

.succes-card.completed {
    border-left: 4px solid #28a745; /* Bordure verte pour les succès terminés */
    background-color: #2e4034; /* Fond légèrement verdâtre */
}

.succes-icon {
    grid-row: 1 / 3; /* L'icône prend toute la hauteur */
    font-size: 2.5em;
    text-align: center;
}

.succes-title {
    grid-column: 2 / 3;
    margin: 0;
    font-size: 1.2em;
    font-weight: bold;
}

.succes-description {
    grid-column: 2 / 3;
    margin: 5px 0 10px 0;
    font-size: 0.9em;
    color: #ccc;
}

/* Barre de progression (style repris du Codex) */
.succes-progress {
    grid-column: 2 / 3;
}

.succes-progress-bar-bg {
    background-color: #222;
    border-radius: 5px;
    height: 12px;
    overflow: hidden;
    border: 1px solid #444;
}

.succes-progress-bar-fill {
    background-color: #ffc107; /* Doré */
    height: 100%;
    width: 0%;
    border-radius: 4px;
    transition: width 0.3s ease;
}

.succes-progress-text {
    font-size: 0.8em;
    color: #ccc;
    text-align: right;
    margin-top: 3px;
}

.succes-progress-container {
    grid-column: 2 / 3;
}

.succes-reward {
    font-size: 0.9em;
    font-weight: bold;
    color: #ffc107; /* Doré pour la récompense à venir */
    margin-bottom: 8px;
}

.succes-reward.completed {
    color: #28a745; /* Vert pour "Terminé !" */
}

.succes-unlocked-rewards {
    font-size: 0.8em;
    color: #aaa;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid #444;
}

.succes-unlocked-rewards span {
    font-style: italic;
}

.succes-unlocked-rewards strong {
    color: #f0f0f0;
}

body.modal-open {
    overflow: hidden;
}

/* Style spécifique pour l'élément de menu */
#main-menu-list li.has-claimable-reward {
    background-color: #4a3c0b;
    border-radius: 5px;
}

/* DANS style.0.7.0.css, à la fin de la section des succès */

.succes-card.unlocked {
    border-color: #ffc107; /* Bordure dorée pour les succès à récupérer */
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
}

.succes-action-container {
    grid-column: 2 / 3;
    margin-top: 10px;
}

.claim-button {
    width: 100%;
    padding: 10px;
    font-size: 1.1em;
    font-weight: bold;
    color: #1a1a1a;
    background: linear-gradient(145deg, #ffd54f, #ffb300);
    border: 1px solid #c89100;
    border-radius: 6px;
    cursor: pointer;
    box-shadow: 0 3px 5px rgba(0,0,0,0.3);
    transition: all 0.2s ease;
}

.claim-button:hover {
    background: linear-gradient(145deg, #ffe082, #ffc107);
    transform: translateY(-2px);
    box-shadow: 0 5px 8px rgba(0,0,0,0.4);
}

.claimed-reward {
    text-align: center;
    font-weight: bold;
    color: #28a745; /* Vert */
    padding: 10px;
    background-color: #2e4034;
    border-radius: 6px;
}

/* NOUVEAU : Affichage des récompenses passées */
.unlocked-rewards-summary {
    grid-column: 1 / -1; /* Prend toute la largeur de la carte */
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid #444;
    font-size: 0.85em;
    color: #aaa;
}
.unlocked-rewards-summary strong {
    color: #f0f0f0;
}

.succes-category-button.has-claimable-reward {
    animation: pulse-animation 1.5s infinite;
    border-radius: 20px; /* Assure une animation propre sur les boutons */
}

/* --- NOUVEAU : Style pour le filtre du Maître Chasseur --- */
#set-filter-container {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 10px;
    background-color: #2a2a2a;
    padding: 10px;
    border-radius: 6px;
    margin-bottom: 20px;
}

#set-class-filter {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
    padding: 8px 30px 8px 12px;
    border-radius: 5px;
    font-size: 0.9em;
    cursor: pointer;
    transition: border-color 0.2s;
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23FFFFFF%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-13z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 10px center;
    background-size: 12px;
}

#set-class-filter:hover {
    border-color: #777;
}

/* --- SYSTÈME DE CONSTELLATION (Version 2.0) --- */
#constellation-modal {
    position: fixed; z-index: 6000; left: 0; top: 0;
    width: 100vw; height: 100vh; background-color: #000;
    display: flex; align-items: center; justify-content: center;
}
#constellation-content {
    background-color: #1a1a1a; border: 1px solid #666; border-radius: 10px;
    width: 95vw; max-width: 1400px; height: 85vh;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex; flex-direction: column;
}
.constellation-header {
    display: flex; justify-content: space-between; align-items: center;
    padding: 10px 25px; border-bottom: 1px solid #444; background-color: #222;
    border-radius: 10px 10px 0 0;
}
#constellation-switcher { display: flex; gap: 10px; }
.constellation-switch-btn {
    padding: 8px 15px; cursor: pointer; border: 1px solid #555;
    background-color: #333; color: #ccc; border-radius: 5px;
    font-size: 0.9em; font-weight: bold; transition: all 0.2s;
}
.constellation-switch-btn:hover:not(:disabled) { background-color: #444; }
.constellation-switch-btn.active { background-color: #ffc107; color: #1a1a1a; border-color: #c89100; }
.constellation-switch-btn:disabled { opacity: 0.5; cursor: not-allowed; }

#constellation-pc-display {
    font-size: 1.2em; font-weight: bold; background-color: #2a2a2a;
    padding: 5px 10px; border-radius: 5px; border: 1px solid #444;
}
.constellation-body {
    display: flex; flex-grow: 1; min-height: 0; /* Important pour le flexbox */
}
#constellation-viewport {
    flex-grow: 1; overflow: hidden; position: relative; cursor: grab;
    background: #000 url('assets/background/skill_bg.png') center/cover;
    touch-action: none;
}
#constellation-grid { position: relative; width: 1500px; height: 1500px; transform-origin: 0 0; }

/* Panneau d'information */
#constellation-infobox {
    flex-basis: 300px; flex-shrink: 0; background-color: #222;
    border-left: 1px solid #444; padding: 20px; overflow-y: auto;
}
#infobox-content h3 { margin-top: 0; color: #ffc107; }
#infobox-content p { color: #ccc; font-size: 0.9em; line-height: 1.6; }
#infobox-content .infobox-cost { font-size: 1.1em; font-weight: bold; margin: 15px 0; }
#infobox-content .infobox-separator { border: 0; height: 1px; background: #444; margin: 15px 0; }
#unlock-talent-button { width: 100%; padding: 12px; font-size: 1.1em; margin-top: 15px; }

/* Style des "étoiles" */
.constellation-node {
    position: absolute; display: flex; align-items: center; justify-content: center;
    cursor: pointer; transition: all 0.3s ease; border-radius: 50%;
    border: 2px solid #555; background-color: #333; color: #888;
}
.constellation-node.minor, .constellation-node.start { width: 50px; height: 50px; font-size: 1.8em; }
.constellation-node.intermediate { width: 65px; height: 65px; font-size: 2.2em; }
.constellation-node.major { width: 80px; height: 80px; font-size: 2.5em; }

/* NOUVEAUX EFFETS VISUELS */
.constellation-node.locked {
    background: #111; border-color: #333; color: #444;
    filter: brightness(0.5) blur(1px); /* Effet sombre et flou */
}
.constellation-node.start, .constellation-node.unlocked {
    border-color: #ffc107; background-color: #4a3c0b; color: #fff;
    box-shadow: 0 0 10px #ffc107, inset 0 0 5px #ffc107;
    animation: pulse-star 3s infinite ease-in-out; /* Effet d'étoile qui brille */
}
.constellation-node.unlockable {
    border-color: #00aaff; color: #fff; background-color: #2a2a2a;
}
.constellation-node.unlockable:hover, .constellation-node.selected {
    transform: scale(1.1); box-shadow: 0 0 15px #00aaff;
}
.constellation-node.locked {
    background: #111; border-color: #333; color: #444;
    filter: brightness(0.5) blur(1px);
    font-size: 1.5em; /* <-- AJOUTE CETTE LIGNE pour la taille du '?' */
}
@keyframes pulse-star {
    0%, 100% { box-shadow: 0 0 10px #ffc107, inset 0 0 5px #ffc107; }
    50% { box-shadow: 0 0 20px #ffeea8, inset 0 0 10px #ffeea8; }
}

.connection-line { position: absolute; height: 2px; background-color: #555; transform-origin: 0 50%; z-index: -1; }
.connection-line.unlocked { background: linear-gradient(90deg, #ffc107, #28a745); }

/* --- NOUVEAU : Amélioration de la modale de confirmation d'Ascension --- */

/* On ajoute la scrollbar personnalisée à la modale de confirmation */
#custom-confirm-text::-webkit-scrollbar { width: 5px; }
#custom-confirm-text::-webkit-scrollbar-track { background: #222; border-radius: 10px; }
#custom-confirm-text::-webkit-scrollbar-thumb { background: #555; border-radius: 10px; }
#custom-confirm-text::-webkit-scrollbar-thumb:hover { background: #777; }
#custom-confirm-text { scrollbar-width: thin; scrollbar-color: #555 #222; }

/* Style du contenu du message */
#custom-confirm-text h3 {
    color: #ffc107; /* Doré */
    margin-top: 0;
    font-size: 1.4em;
}

#custom-confirm-text p {
    font-size: 0.9em;
    color: #ccc;
}

.ascension-separator {
    border: none;
    height: 1px;
    background-color: #444;
    margin: 20px 0;
}

.ascension-confirm-section {
    text-align: left;
    padding: 10px 15px;
    border-radius: 6px;
    margin-bottom: 15px;
    border-left: 4px solid;
}

.ascension-section-title {
    margin-top: 0;
    margin-bottom: 10px;
    font-size: 1.1em;
}

.ascension-confirm-section ul {
    margin: 0;
    padding-left: 20px;
}

.ascension-confirm-section li {
    margin-bottom: 5px;
}

.ascension-confirm-section small {
    color: #aaa;
    font-style: italic;
}

/* Couleurs par section */
.ascension-confirm-section.gain {
    background-color: rgba(40, 167, 69, 0.1);
    border-left-color: #28a745;
}
.ascension-confirm-section.gain .ascension-section-title { color: #28a745; }

.ascension-confirm-section.lose {
    background-color: rgba(220, 53, 69, 0.1);
    border-left-color: #dc3545;
}
.ascension-confirm-section.lose .ascension-section-title { color: #dc3545; }

.ascension-confirm-section.keep {
    background-color: rgba(0, 170, 255, 0.1);
    border-left-color: #00aaff;
}
.ascension-confirm-section.keep .ascension-section-title { color: #00aaff; }

.ascension-tag {
    font-weight: bold;
    font-size: 0.85em;
    padding: 2px 6px;
    border-radius: 4px;
    text-shadow: 1px 1px 2px rgba(0, 0, 0, 0.5);
    margin-left: 5px;
    display: inline-block; /* Nécessaire pour que le padding s'applique bien */
}

/* --- Dégradé de couleurs pour chaque niveau d'Ascension --- */

/* A1-A2 : Vert (Début prometteur) */
.ascension-level-1, .ascension-level-2 {
    color: #c8e6c9;
    background-color: rgba(40, 167, 69, 0.4);
}

/* A3-A4 : Jaune (Accompli) */
.ascension-level-3, .ascension-level-4 {
    color: #fff9c4;
    background-color: rgba(255, 193, 7, 0.4);
}

/* A5-A6 : Orange (Vétéran) */
.ascension-level-5, .ascension-level-6 {
    color: #ffecb3;
    background-color: rgba(255, 136, 0, 0.5);
}

/* A7-A8 : Rouge (Élite) */
.ascension-level-7, .ascension-level-8 {
    color: #ffcdd2;
    background-color: rgba(220, 53, 69, 0.5);
}

/* A9-A10+ : Rouge Vénère (Légende) */
.ascension-level-9, .ascension-level-10 {
    color: #ffcdd2;
    background-color: rgba(192, 57, 43, 0.7);
    border: 1px solid #c0392b;
}

/* On ajoute une règle pour que les niveaux au-delà de 10 gardent le style Légende */
.ascension-tag[class*="ascension-level-"]:not(.ascension-level-1):not(.ascension-level-2):not(.ascension-level-3):not(.ascension-level-4):not(.ascension-level-5):not(.ascension-level-6):not(.ascension-level-7):not(.ascension-level-8):not(.ascension-level-9) {
    color: #ffcdd2;
    background-color: rgba(192, 57, 43, 0.7);
    border: 1px solid #c0392b;
}

#infobox-content p {
    overflow-wrap: break-word;
    word-wrap: break-word;
}

/* 2. Empêche la sélection du texte/icônes dans le viewport */
#constellation-viewport {
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ et Edge */
    user-select: none;         /* Standard */
}

.level-indicator {
    position: absolute;
    top: -4px;
    right: -4px;
    background-color: rgba(0, 0, 0, 0.9);
    color: #fff;
    width: 18px; /* Plus petit */
    height: 18px; /* Plus petit */
    border-radius: 50%;
    font-size: 0.7em; /* Police réduite mais lisible */
    font-weight: bold;
    border: 1px solid #555;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    box-shadow: 0 1px 2px rgba(0,0,0,0.4);
}

/* On retire l'ancienne animation brillante pour un style plus sobre */
@keyframes pulse-star { 0%, 100% { box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px var(--glow-color); } 50% { box-shadow: 0 0 20px var(--glow-color-pulse), inset 0 0 10px var(--glow-color-pulse); } }

/* Talent Débloqué (mais pas max) - Style Bleu */
.constellation-node.unlocked {
    --glow-color: #00aaff;
    --glow-color-pulse: #58D6F5;
    border-color: var(--glow-color);
    background-color: #2a4a6a;
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px var(--glow-color);
    animation: pulse-star 4s infinite ease-in-out;
}

/* Talent Maximisé - Style Doré */
.constellation-node.maxed {
    --glow-color: #ffc107;
    --glow-color-pulse: #ffeea8;
    border-color: var(--glow-color);
    background-color: #4a3c0b;
    color: #fff;
    box-shadow: 0 0 10px var(--glow-color), inset 0 0 5px var(--glow-color);
    animation: pulse-star 3s infinite ease-in-out;
}

.bonus-progression-list {
    margin-top: 10px;
    padding: 8px;
    background-color: #1a1a1a;
    border-radius: 4px;
    font-size: 0.9em;
    text-align: center;
}

.bonus-progression-list strong {
    color: #ccc;
}

.unlocked-bonus {
    color: #28a745; /* Vert pour les bonus débloqués */
    font-weight: bold;
}

.locked-bonus {
    color: #777; /* Gris pour les bonus non atteints */
}


/* --- NOUVEAU : Style des Passifs Activables en Combat --- */
#player-passives-container {
    display: flex;
    justify-content: center;
    gap: 10px;
    margin-top: 15px;
}

.passive-skill-button {
    width: 50px;
    height: 50px;
    background-color: #333;
    border: 2px solid #555;
    border-radius: 50%;
    cursor: pointer;
    font-size: 2em;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
}

/* État inactif */
.passive-skill-button.inactive {
    filter: grayscale(1) brightness(0.7);
}
.passive-skill-button.inactive:hover {
    filter: grayscale(0) brightness(1);
    border-color: #888;
}

/* État actif (avec animation) */
.passive-skill-button.active {
    border-color: #ffc107;
    box-shadow: 0 0 10px #ffc107;
    animation: blinking-glow 1.5s infinite;
}

@keyframes blinking-glow {
    0% { box-shadow: 0 0 5px #ffc107; }
    50% { box-shadow: 0 0 15px #ffeea8; }
    100% { box-shadow: 0 0 5px #ffc107; }
}

/* --- NOUVEAU : Modale de Sélection de Trait --- */
/* --- NOUVEAU : Modale de Sélection de Trait (Corrigé) --- */
#trait-selection-modal {
    position: fixed;
    z-index: 6000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.9);
    display: flex;
    align-items: center;
    justify-content: center;
    backdrop-filter: blur(5px);
}

#trait-selection-content {
    text-align: center;
    color: #f0f0f0;
}

#trait-selection-content h2 {
    color: #ffc107;
    text-shadow: 0 0 10px #ffc107;
}

#trait-cards-container {
    display: flex;
    gap: 30px;
    margin-top: 30px;
    perspective: 1000px; /* Pour l'effet 3D de retournement */
    margin-bottom: 20px; /* MODIFICATION : Ajout d'une marge en bas pour éviter le chevauchement avec le bouton Confirmer */
}

.trait-card {
    width: 220px;
    height: auto;
    display: flex;
    flex-direction: column;
    /* ▼▼▼ MODIFICATION CI-DESSOUS ▼▼▼ */
    gap: 15px; /* Augmenté de 10px à 15px pour plus d'espace */
    /* ▲▲▲ FIN DE LA MODIFICATION ▲▲▲ */
    border: 2px solid transparent;
    padding: 2px;
    border-radius: 17px;
    transition: transform 0.3s ease;
}

/* MODIFICATION : Le style de sélection s'applique maintenant à .trait-card-inner */
.trait-card.selected .trait-card-inner {
    border-color: #ffc107;
    box-shadow: 0 0 15px #ffc107;
    transform: scale(1.05) rotateY(var(--flip-angle, 0deg)); /* On s'assure que le scale est maintenu après le flip */
}

.trait-card-inner {
    position: relative;
    width: 100%;
    height: 350px; /* Hauteur fixe pour la carte visuelle */
    transition: transform 0.6s;
    transform-style: preserve-3d;
    cursor: pointer;
    border: 2px solid #555; /* On déplace la bordure ici */
    border-radius: 15px; /* Et le radius ici */
}

.trait-card-inner.is-flipped {
    --flip-angle: 180deg; /* Variable CSS pour mémoriser l'état du flip */
    transform: rotateY(180deg);
}

/* CORRECTION : On s'assure que la bordure de base est transparente pour ne pas interférer avec la sélection */
.trait-card {
    border: 2px solid transparent;
    padding: 2px; /* Un petit padding pour compenser la bordure transparente et éviter les sauts de layout */
    border-radius: 17px; /* Un peu plus grand que le radius de la carte pour bien l'englober */
    transition: transform 0.3s ease;
}

.trait-card-front, .trait-card-back {
    position: absolute;
    width: 100%;
    height: 100%;
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    background-color: #2a2a2a;
    border-radius: 13px; /* Un peu plus petit pour voir la bordure de .trait-card-inner */
    padding: 20px;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
}

.trait-card-back {
    transform: rotateY(180deg);
    justify-content: center;
}

.trait-icon {
    font-size: 4em;
    margin: 15px 0;
}

.trait-rarity {
    font-size: 0.8em;
    font-weight: bold;
    padding: 3px 8px;
    border-radius: 10px;
}

.trait-card-actions {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.trait-reroll-btn, .trait-flip-btn {
    background: none;
    border: 1px solid #777;
    color: #ccc;
    padding: 5px 10px;
    border-radius: 5px;
    cursor: pointer;
    flex-grow: 1; /* Pour qu'ils prennent la même largeur */
    margin: 0 5px;
}

#confirm-trait-choice {
    margin-top: 25px;
    padding: 12px 25px;
    font-size: 1.2em;
}

@keyframes vibrate-glow {
  0%, 100% {
    box-shadow: 0 0 10px 0px var(--glow-color-start), 0 0 5px 0px var(--glow-color-end) inset;
  }
  50% {
    box-shadow: 0 0 20px 5px var(--glow-color-start), 0 0 12px 2px var(--glow-color-end) inset;
  }
}

/* 2. Classes pour chaque rareté qui utilisent l'animation */
.rarity-glow-rare {
  --glow-color-start: rgba(0, 170, 255, 0.7);
  --glow-color-end: rgba(0, 170, 255, 0.5);
  animation: vibrate-glow 2.2s infinite ease-in-out;
}
.rarity-glow-epic {
  --glow-color-start: rgba(163, 53, 238, 0.7);
  --glow-color-end: rgba(163, 53, 238, 0.5);
  animation: vibrate-glow 2.0s infinite ease-in-out;
}
.rarity-glow-legendary {
  --glow-color-start: rgba(255, 179, 0, 0.8);
  --glow-color-end: rgba(255, 179, 0, 0.6);
  animation: vibrate-glow 1.8s infinite ease-in-out;
}
.rarity-glow-mythic {
  --glow-color-start: rgba(255, 128, 0, 0.9);
  --glow-color-end: rgba(255, 128, 0, 0.7);
  animation: vibrate-glow 1.6s infinite ease-in-out;
}

.trait-effects-list {
    margin: 10px 0;
    font-size: 0.9em;
    font-weight: bold;
    width: 100%;
    text-align: left;
    padding: 0 10px;
}

.trait-effect {
    margin-bottom: 4px;
}

.positive-effect {
    color: #80c080; /* Vert */
}

.negative-effect {
    color: #ff6b6b; /* Rouge */
}

.trait-description-small {
    font-size: 0.75em; /* Police beaucoup plus petite */
    font-style: italic;
    color: #aaa;
    line-height: 1.3;
    margin: 0;
}


#oracle-families-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
    gap: 15px;
}

.oracle-family-card {
    background-color: #2a2a2a;
    border: 1px solid #555;
    border-left: 4px solid #888; /* Bordure grise par défaut */
    border-radius: 6px;
    padding: 15px;
    cursor: pointer;
    transition: all 0.2s ease;
}

.oracle-family-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
    border-color: #aaa;
}

.oracle-family-card.completed {
    border-left-color: #28a745; /* Vert pour les familles complétées */
}

.oracle-family-card h4 {
    margin: 0 0 5px 0;
}

.oracle-family-card p {
    margin: 0 0 10px 0;
    font-size: 0.9em;
    color: #ccc;
}

.family-bonus-preview {
    font-size: 0.85em;
    color: #999;
    font-style: italic;
}

.family-bonus-preview.active {
    color: #80c080; /* Vert pour le bonus actif */
    font-style: normal;
    font-weight: bold;
}

/* Modale pour les détails de la famille */
#oracle-family-modal {
    position: fixed;
    z-index: 7000;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    display: flex;
    align-items: center;
    justify-content: center;
}

#oracle-family-modal-content {
    background-color: #333;
    border: 1px solid #ffc107;
    border-radius: 10px;
    padding: 25px;
    width: 90%;
    max-width: 600px;
    text-align: center;
}

#oracle-family-modal-cards {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(110px, 1fr));
    gap: 15px;
    margin: 20px 0;
}

.oracle-card.missing img {
    filter: grayscale(100%) brightness(0.5);
}

.oracle-card .missing-text {
    color: #ff6b6b; /* Rouge */
    font-weight: bold;
}

.trait-reroll-btn:disabled {
    opacity: 0.5;
    cursor: not-allowed;
    color: #777;
}

/* ============================================================================
// ==   NOUVEAU : Interface de l'écran du Fief
// ============================================================================ */

/* On s'assure que l'écran du fief est bien caché par défaut */
#fief-screen.hidden {
  display: none;
}

.fief-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.fief-header h1 {
  margin: 0;
  color: #ffc107;
}

.expedition-header h3 {
  margin: 0;
  color: #ffc107;
}

#maitrise-panel h2{
  margin: 0;
  color: #ffc107;
}

#return-to-game-button {
  background-color: #6c757d; /* Gris */
}

#return-to-game-button:hover {
  background-color: #5a6268;
}

#fief-screen {
  display: flex;
  flex-direction: column;
  gap: 12px; /* Espace entre chaque section (ressources, bâtiments, jardin) */
}

#fief-special-resources-display{
    margin-bottom: 15px;
}

.fief-section {
  background-color: #2a2a2a;
  border: 1px solid #444;
  border-radius: 8px;
  padding: 10px;
}

.fief-section h4 {
  margin-top: 0;
  margin-bottom: 15px;
  padding-bottom: 10px;
  border-bottom: 1px solid #555;
  color: #ffc107;
}

/* Style pour l'affichage des ressources */
#fief-resources-list {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  justify-content: center;
}

.fief-resource-item {
  display: flex;
  align-items: center;
  gap: 5px;
  background-color: #333;
  padding: 3px 7px;
  border-radius: 2px;
  font-weight: bold;
  font-size: 0.9em;
}

/* Grille pour les bâtiments */
#fief-buildings-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 20px;
}
/* Carte individuelle pour un bâtiment */
.fief-building-card {
  background: linear-gradient(145deg, #3a3a3a, #2e2e2e);
  border: 1px solid #555;
  border-radius: 8px;
  padding: 15px;
  display: flex;
  flex-direction: column;
  text-align: center;
  box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.fief-building-card h5 {
  margin: 0 0 10px 0;
  font-size: 1.2em;
  cursor: help; /* Indique que l'élément est interactif */
  display: flex;
  align-items: baseline; /* Aligne joliment le nom et le niveau */
  gap: 8px;
}

.building-level-inline {
  font-size: 0.8em;
  font-weight: normal;
  color: #aaa;
}

.fief-building-card.max-level .building-level-inline {
  color: #ffc107; /* Doré pour le niveau max */
  font-weight: bold;
}

/* On retire la description de la carte */
.fief-building-card > p {
    display: none;
}

.fief-building-card .action-button {
  width: 100%;
}

/* Style pour les bâtiments non débloqués */
.fief-building-card.locked {
  filter: grayscale(1) brightness(0.7);
  cursor: not-allowed;
}

.fief-building-card.locked .action-button {
  background-color: #555;
  cursor: not-allowed;
}

/* Style pour les bâtiments au niveau maximum */
.fief-building-card.max-level {
  border-color: #ffc107;
}

.fief-building-card.max-level .building-level {
  color: #ffc107; /* Doré */
}

/* Placeholder pour le jardin */
#fief-garden-content p {
  text-align: center;
  color: #aaa;
  font-style: italic;
  padding: 20px 0;
}

.building-actions-container {
    display: flex; /* La magie du flexbox ! */
    gap: 10px;     /* Un petit espace entre les boutons */
    margin-top: 10px;
}

/* On ajuste les boutons pour qu'ils partagent l'espace */
.building-actions-container .action-button {
    flex-grow: 1; /* Permet aux boutons de grandir pour remplir l'espace */
    width: auto;  /* On annule la largeur de 100% précédente */
    padding: 8px 5px; /* On réduit un peu le padding pour que le texte ne soit pas à l'étroit */
    font-size: 0.85em; /* On réduit légèrement la police */
}

/* ============================================================================
// ==   MISE À JOUR : Style du Fief v2 (Collecte Active)
// ============================================================================ */

/* Style pour la liste des ressources rares */
#fief-rare-resources-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 10px;
  padding-top: 15px; /* Espace après le header déroulant */
}

/* On réutilise le style des ressources principales mais en plus petit */
.fief-rare-resource-item {
  display: flex;
  align-items: center;
  gap: 6px;
  background-color: #222;
  padding: 4px 8px;
  border-radius: 4px;
  font-size: 0.9em;
}

/* Nouveaux styles pour les cartes de bâtiments */
.building-production-info {
  margin: 5px 0;
  padding: 10px;
  background-color: #222;
  border: 1px solid #444;
  border-radius: 6px;
}

.building-production-info p {
  margin: 5px 0 !important; /* Force la marge pour l'uniformité */
  color: #f0f0f0 !important;
  font-size: 0.95em !important;
}

.collect-button {
  background: linear-gradient(145deg, #28a745, #218838) !important;
  border: 1px solid #1e7e34 !important;
}

.collect-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #2dbf4e, #24993e) !important;
}

.warehouse-stock-list{
    font-size: 0.75em;
}

.production-bar-bg {
  width: 100%;
  height: 8px;
  background-color: #1a1a1a;
  border-radius: 4px;
  overflow: hidden;
  margin-top: 8px;
}

.production-bar-fill {
  height: 100%;
  background-color: #ffc107;
  border-radius: 4px;
}

.stock-display {
    display: flex;
    justify-content: space-between; /* Met "Stock" à gauche et "X/Y" à droite */
    font-size: 0.8em; /* Police plus petite comme demandé */
    color: #ccc;
    margin-bottom: 4px; /* Petit espace au-dessus de la barre */
}

/* On s'assure que le texte du timer n'a pas de marges inutiles */
.building-production-info .timer-display {
    margin: 8px 0 0 0 !important; /* Marge en haut, mais pas en bas */
    font-size: 0.8em !important;
    text-align: center;
}
.upgrade-button {
  flex-direction: column; /* Place les éléments l'un au-dessus de l'autre */
  line-height: 1.2;       /* Améliore l'espacement vertical */
  padding-top: 4px;       /* Ajuste le padding pour un meilleur look */
  padding-bottom: 4px;
}

.upgrade-cost {
  font-size: 0.85em;      /* Police plus petite pour le coût */
  font-weight: normal;    /* Police non-grasse pour la lisibilité */
  color: #ddd;
  display: flex;          /* Aligne les icônes et le texte du coût */
  align-items: center;
  gap: 6px;               /* Espace entre chaque coût (ex: bois et métal) */
  flex-wrap: wrap;        /* Permet aux coûts de passer à la ligne PROPREMENT si nécessaire */
  justify-content: center;/* Centre les coûts s'ils passent à la ligne */
}

/* ============================================================================
// ==   NOUVEAU : Boutons d'action principaux (Fief & Ascension) v2
// ============================================================================ */

.main-action-buttons-container {
  display: flex;
  gap: 15px;
  margin: 20px 0;
}

.main-action-button {
  flex: 1;
  padding: 15px;
  font-size: 1.2em;
  font-weight: bold;
  border-radius: 8px;
  color: white;
  border: 2px solid; /* Bordure solide de 2px */
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.6);
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
  cursor: pointer;
  transition: all 0.2s ease-in-out;
}

.main-action-button:hover:not(:disabled) {
  transform: translateY(-2px);
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.4);
}

/* ▼▼▼ NOUVEAU : Style pour l'état désactivé ▼▼▼ */
.main-action-button:disabled {
  filter: grayscale(80%) brightness(0.7); /* Effet grisé et assombri */
  cursor: not-allowed;
  box-shadow: none; /* On retire l'ombre */
  transform: none;  /* On retire l'effet de survol */
}
/* ▲▲▲ FIN DE L'AJOUT ▲▲▲ */


/* Style spécifique pour le bouton du Fief */
#fief-main-button {
  background: linear-gradient(145deg, #6d4c41, #4e342e); /* Dégradé marron/terre */
  border-color: #3e2723;
}
#fief-main-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #795548, #5d4037);
}


/* Style spécifique pour le bouton d'Ascension */
#ascension-main-button {
  background: linear-gradient(145deg, #b8860b, #daa520);
  border-color: #8b6508;
}
#ascension-main-button:hover:not(:disabled) {
  background: linear-gradient(145deg, #c59b0c, #e7b522);
}

.main-action-button.hidden {
  display: none;
}

/* ============================================================================
// ==   NOUVEAU : Style du Jardin Évolutif
// ============================================================================ */

#garden-season-info {
    text-align: center;
    margin-bottom: 20px;
    font-size: 1.1em;
    padding: 10px;
    background-color: #222;
    border-radius: 6px;
}

#garden-plots-container {
    display: grid;
    /* ▼▼▼ MODIFIEZ CETTE LIGNE ▼▼▼ */
    grid-template-columns: repeat(var(--grid-size, 2), 1fr); /* S'adapte à une variable, 2 par défaut */
    /* ▲▲▲ FIN DE LA MODIFICATION ▲▲▲ */
    gap: 15px;
    margin-bottom: 20px;
}

.garden-plot {
    background-color: #2a2a2a;
    padding: 5px;
    border-radius: 8px;
    display: flex;
    flex-direction: column; /* Organise les éléments en colonne */
    align-items: center; /* Centre les éléments horizontalement */
    justify-content: space-between; /* Écarte les éléments verticalement (pour pousser le bouton en bas) */
    min-height: 180px; /* Ajoute une hauteur minimale pour un aspect uniforme */
    text-align: center;
    position: relative; /* Nécessaire pour positionner le bouton arracher */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.3);
    border: 1px solid #444;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.garden-plot.empty {
    cursor: pointer;
    color: #666;
}

.garden-plot.empty:hover {
    background-color: #3a3a3a;
    border-color: #777;
    color: #999;
}

.empty-plot-text {
    font-size: 3em;
    line-height: 1;
}

.garden-plot.growing, .garden-plot.ready {
    border-style: solid;
    background-color: #3a3a3a;
}

.plant-icon {
    font-size: 2.5em;
    margin-bottom: 5px;
}

.plant-name {
    font-weight: bold;
    font-size: 0.9em;
}

.growth-bar-bg {
    width: 90%;
    height: 8px;
    background-color: #444;
    border-radius: 4px;
    overflow: hidden;
    margin-top: 10px; /* Ajoute un peu d'espace au-dessus de la barre */
    margin-bottom: 5px; /* Réduit l'espace en dessous pour rapprocher les éléments */
}

.growth-bar-fill {
    height: 100%;
    background-color: #28a745; /* Vert */
    border-radius: 5px;
}

.plant-timer {
    font-size: 0.8em;
    color: #ccc;
    padding: 5px;
}

.garden-plot.ready {
    border-color: #ffc107;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.4);
}

.seed-list {
    display: flex;
    gap: 10px;
    justify-content: center;
    flex-wrap: wrap;
    background-color: #222;
    padding: 10px;
    border-radius: 6px;
}

.seed-item {
    font-size: 1.5em;
    width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: #333;
    border-radius: 5px;
}

/* Style pour la modale de sélection de graine */
.seed-selection-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(100px, 1fr));
    gap: 15px;
    margin-top: 20px;
}

.seed-choice-card {
    background-color: #333;
    border: 2px solid #555;
    border-radius: 8px;
    padding: 10px;
    cursor: pointer;
    transition: all 0.2s ease;
}
.seed-choice-card:hover {
    background-color: #444;
}
.seed-choice-card.selected {
    border-color: #00aaff;
    box-shadow: 0 0 10px rgba(0, 170, 255, 0.5);
}
.seed-choice-card .seed-icon {
    font-size: 2em;
    display: block;
    text-align: center;
}
.seed-choice-card small {
    display: block;
    text-align: center;
    font-size: 0.8em;
    color: #aaa;
}

.plant-sprite-container {
    width: 80px;
    height: 80px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: 5px;
}

.plant-sprite-container img {
    width: 70%; /* Réduit l'image à 70% de la taille de son conteneur */
    height: auto; /* Maintient le ratio */
    display: block; /* Supprime l'espace vide sous l'image */
    margin: 0 auto; /* Centre l'image horizontalement */
}

.garden-plot .plant-name {
    margin-bottom: 5px;
}

.seed-item {
    position: relative; /* Nécessaire pour positionner le compteur */
}

.seed-count {
    position: absolute;
    bottom: -2px;
    right: -2px;
    background-color: rgba(0, 0, 0, 0.8);
    color: #fff;
    font-size: 0.6em; /* Très petite police */
    font-weight: bold;
    padding: 1px 4px;
    border-radius: 5px;
    border: 1px solid #555;
}

#garden-season-info {
    display: flex;
    align-items: center;
    gap: 15px; /* Espace entre l'icône et le texte */
}

.season-icon {
    width: 50px;
    height: 50px;
    object-fit: contain; /* Assure que l'image ne soit pas déformée */
    border-radius: 5px;
    will-change: transform;
}

.season-text-container {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne le texte à gauche */
    text-align: left;
    flex-grow: 1;
}

.season-text-container small {
    color: #bbb;
    font-size: 0.8em;
}

.uproot-button {
    background: none;
    border: 1px solid #888;
    color: #aaa;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.75em;
    cursor: pointer;
    margin-top: 5px;
    transition: all 0.2s;
}

.uproot-button:hover {
    background-color: #5a1d1d;
    color: #fff;
    border-color: #8e3a3a;
}

.garden-button-group {
    display: flex;
    gap: 8px;
    width: 100%;
}
.garden-button-group > * {
    flex-grow: 1;
}

/* Style de l'info-bulle des graines */
.recipe-line {
    display: flex;
    align-items: center; /* Centre tout verticalement */
    gap: 8px; /* Espace entre les éléments */
    padding: 8px;
    background-color: #222;
    border-radius: 6px;
    margin-top: 10px;
    border: 1px solid #444;
}

.recipe-part {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.2em;
    font-weight: bold;
    border-radius: 5px;
    background-color: #333;
    border: 1px solid #555;
}
.recipe-part img {
    max-width: 100%; /* S'assure que l'image ne déborde pas de la boîte */
    max-height: 100%; /* S'assure que l'image ne déborde pas de la boîte */
    object-fit: contain; /* Redimensionne l'image pour qu'elle tienne dans la boîte sans être coupée */
}

.recipe-part.discovered {
    color: #f0f0f0;
}

/* Style pour les types de plantes (ex: 'Feu') */
.recipe-part.type {
    font-size: 0.8em;
    padding: 0 5px;
    width: auto; /* La largeur s'adapte au texte */
}

.recipe-part.undiscovered {
    color: #444;
    background-color: #1a1a1a;
    border-color: #333;
    user-select: none;
}

.recipe-plus {
    font-size: 1.2em;
    font-weight: bold;
    color: #888;
}

.recipe-season {
    margin-left: auto; /* Pousse l'icône de saison tout à droite */
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 4px;
    background-color: #333;
    border-radius: 5px;
}

.recipe-season img {
    width: 24px;
    height: 24px;
}

.garden-plot .uproot-button {
    position: absolute; /* Positionne le bouton par rapport au plot */
    bottom: 5px; /* 5px du bas */
    right: 5px; /* 5px de la droite */
    padding: 2px 5px; /* Réduit un peu le padding */
    font-size: 0.65em; /* Réduit la taille de la police */
    border: none; /* Supprime la bordure par défaut */
    background-color: rgba(0, 0, 0, 0.5); /* Fond semi-transparent */
    color: rgba(255, 255, 255, 0.7); /* Texte semi-transparent */
}

.garden-plot .uproot-button:hover {
    background-color: #dc3545; /* Couleur rouge à l'hover */
    color: #fff;
}

/* Ajustement pour le groupe de boutons quand la plante est prête */
.garden-button-group {
    display: flex;
    flex-direction: column; /* Aligne les boutons en colonne */
    gap: 5px;
    width: 90%; /* Pour qu'ils ne soient pas trop larges */
    margin-top: auto; /* Pousse le groupe vers le bas */
}

.garden-button-group .action-button {
    width: 100%; /* Le bouton Récolter prend toute la largeur */
}

/* Le bouton arracher dans le groupe aura son style de groupe, pas le style absolu */
.garden-button-group .uproot-button {
    position: static; /* Annule le positionnement absolu */
    width: 100%;
    margin-top: 0;
    background-color: #6c757d; /* Couleur différente pour le bouton arracher dans le groupe */
    color: #fff;
}

.garden-button-group .uproot-button:hover {
    background-color: #dc3545;
}

.tooltip-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 10px;
}

.plant-type {
    font-size: 0.8em;
    font-weight: bold;
    padding: 2px 8px;
    border-radius: 10px;
    color: #fff;
    background-color: #6c757d; /* Gris par défaut */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
    flex-shrink: 0; /* Empêche l'étiquette de rétrécir */
}

/* Couleurs par type de plante */
.plant-type.type-feu { background-color: #e65c5a; }
.plant-type.type-givre { background-color: #58a6ff; }
.plant-type.type-solaire { background-color: #ffc107; color: #1a1a1a; }
.plant-type.type-herbe { background-color: #28a745; }
.plant-type.type-fleur { background-color: #d65eae; }
.plant-type.type-champignon { background-color: #8c53a6; }
.plant-type.type-racine { background-color: #b07050; }
.plant-type.type-ombre { background-color: #555; }

#garden-tier-indicator {
    text-align: center;
    font-size: 0.9em;
    padding: 8px;
    background-color: #222;
    border-radius: 6px;
    margin-bottom: 20px;
    color: #ccc;
    border-top: 1px solid #444;
}

#garden-season-info {
    position: relative; /* Nécessaire pour positionner le bouton à l'intérieur */
}

.season-info-button {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 1px solid #888;
    background-color: #444;
    color: #fff;
    font-weight: bold;
    font-family: serif; /* Pour un joli 'i' */
    font-size: 1em;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: background-color 0.2s;
}

.season-info-button:hover {
    background-color: #555;
}

/* Style pour les listes dans la modale d'information */
#custom-alert-text .season-bonus-list,
#custom-alert-text .season-malus-list {
    text-align: left;
    padding-left: 25px;
    margin-top: 10px;
}

#custom-alert-text .season-bonus-list li {
    color: #28a745; /* Vert pour les bonus */
    font-weight: bold;
}

#custom-alert-text .season-malus-list li {
    color: #dc3545; /* Rouge pour les malus */
    font-weight: bold;
}

/* ============================================================================
// ==   SECTION AVENTURE (Refonte Premium)
// ============================================================================ */

#main-content, #main-content, #aventure-screen, #expedition-wrapper, #expedition-panel-content, #aventure-content  > .main-screen {
    height: 100%;
}

#aventure-content {
    height: 100%;
    padding: 0;
    display: flex;
    flex-direction: column;
}
#aventure-viewport {
    width: 100%;
    min-height: 300px;
    height: 80%; /* MON COMMENTAIRE : Maintenant que le parent a une hauteur définie, ce 80% va fonctionner comme prévu. */
    border: 2px solid #5a4a3a;
    overflow: hidden;
    position: relative;
    cursor: grab;
    border-radius: 8px;
    background-color: #1a1a1a;
    box-shadow: inset 0 0 15px rgba(0,0,0,0.7);
    touch-action: none;
    /* MON COMMENTAIRE : On retire flex-grow qui n'est plus utile ici. */
}

#aventure-viewport:active {
    cursor: grabbing;
}

#expedition-wrapper,
#expedition-panel-content,
.expedition-tab-content {
    min-height: 100%; /* MODIFICATION : Permet au conteneur de s'agrandir */
    display: flex;
    flex-direction: column;
}

/* On s'assure que le contenu de l'onglet actif s'étire */
.expedition-tab-content:not(.hidden) {
    flex-grow: 1;
}

#aventure-map {
    width: 100%; 
    height: auto; 
    aspect-ratio: 549 / 1536; /* Ratio de votre image de fond 707 / 1536 */
    position: absolute; 
    background-size: 100% auto;
    background-repeat: no-repeat;
    background-position: center top;
}

#aventure-paths {
  /* Positionne le SVG par-dessus la carte */
  position: absolute;
  top: 0;
  left: 0;
  
  /* Lui donne la même taille que la carte */
  width: 100%;
  height: 100%;
  
  /* Très important : rend le SVG "transparent" aux clics, 
     pour que vous puissiez toujours cliquer sur les nœuds en dessous ! */
  pointer-events: none; 
}

#aventure-paths path.aventure-path {
  fill: none;
  /* NOUVELLE COULEUR : Un gris-brun plus visible pour les chemins bloqués */
  stroke: #8c7e6c; 
  stroke-width: 3; /* Un peu plus fin pour un look plus élégant */
  stroke-linecap: round;
  stroke-dasharray: 8, 8; /* Pointillés un peu plus espacés */
  transition: all 0.5s ease-in-out; /* Transition plus douce */
}

#aventure-paths path.aventure-path.unlocked {
  /* NOUVELLE COULEUR : Un doré plus riche pour les chemins débloqués */
  stroke: #f5be25; 
  stroke-dasharray: none;
  stroke-width: 4; /* Un peu plus épais une fois débloqué */
  /* NOUVEAU : Ajout d'une ombre pour un effet de "lueur" */
  filter: drop-shadow(0 0 3px rgba(230, 195, 130, 0.7));
}

.aventure-node {
    position: absolute;
    transform: translate(-50%, -50%);
    width: 110px; /* Réduit de 130px */
    min-height: 55px; /* Réduit de 60px */
    padding: 6px; /* Un peu moins de padding */
    border-radius: 8px;
    border: 2px solid rgba(0,0,0,0.5);
    background-color: rgba(26, 26, 26, 0.7);
    backdrop-filter: blur(4px);
    color: #999;
    font-weight: bold;
    text-align: center;
    transition: all 0.3s ease;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    -webkit-user-select: none; /* Safari */
    -moz-user-select: none;    /* Firefox */
    -ms-user-select: none;     /* IE 10+ et Edge */
    user-select: none;         /* Standard */
}

.aventure-node:hover {
    transform: translate(-50%, -50%) scale(1.05);
}

.node-icon {
    font-size: 1.5em;
    margin-bottom: 5px;
}

.node-name {
    font-size: 0.85em;
    line-height: 1.2;
}

.aventure-node[data-status="locked"] {
    filter: grayscale(1) brightness(0.6);
}

.aventure-node[data-status="available"] {
    border-color: #ffd700;
    color: #fff;
    text-shadow: 0 0 5px #000;
    animation: pulse-gold 2s infinite;
}

@keyframes pulse-gold {
    0% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0.7); }
    70% { box-shadow: 0 0 10px 10px rgba(255, 215, 0, 0); }
    100% { box-shadow: 0 0 0 0 rgba(255, 215, 0, 0); }
}

.aventure-node[data-status="completed"] {
    border-color: #28a745;
    color: #ccc;
    background-color: rgba(20, 40, 20, 0.7);
}

.aventure-node .completed-check {
    position: absolute;
    top: -8px;
    right: -8px;
    background-color: #28a745;
    color: white;
    width: 22px;
    height: 22px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    border: 2px solid #1a1a1a;
}

#aventure-step-modal {
    position: absolute;
    bottom: 0;
    /* On retire left: 0 et right: 0 pour que la modale ne prenne plus toute la largeur de la page */
    width: 100%; /* La modale prend 100% de la largeur de son parent (#aventure-content) */
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    border-top: 2px solid #6a5a4a;
    padding: 20px;
    z-index: 1001;
    animation: slideUp 0.3s ease-out;
}


@keyframes slideUp {
    from { transform: translateY(100%); opacity: 0; }
    to { transform: translateY(0); opacity: 1; }
}

#aventure-step-content {
    max-width: 800px;
    width: 100%;
    margin: 0 auto;
}

#aventure-dialogue-area {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;
}

#aventure-character-portrait {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    border: 3px solid #6a5a4a;
    object-fit: cover;
    flex-shrink: 0;
}

#aventure-dialogue-box {
    flex-grow: 1;
    background-color: rgba(45, 55, 72, 0.7);
    padding: 15px;
    border-radius: 8px;
}

#aventure-dialogue-box h4 {
    margin: 0 0 10px 0;
    color: #ffd700;
}

#aventure-dialogue-box p {
    margin: 0;
    color: #eee;
    line-height: 1.5;
}

#aventure-controls {
    text-align: right;
}

#aventure-continue-button {
    background-color: #007bff;
    color: white;
    padding: 10px 20px;
    border: none;
    border-radius: 5px;
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
}

#custom-alert-content .modal-tabs {
    display: flex;
    border-bottom: 2px solid #555;
    margin-bottom: 15px;
}

#custom-alert-content .modal-tab-button {
    padding: 10px 20px;
    cursor: pointer;
    background-color: transparent;
    border: none;
    color: #aaa;
    font-size: 1em;
    border-bottom: 3px solid transparent;
    transition: all 0.2s ease-in-out;
}

#custom-alert-content .modal-tab-button:hover {
    background-color: #3a3a3a;
    color: #fff;
}

#custom-alert-content .modal-tab-button.active {
    color: #00bcd4;
    border-bottom-color: #00bcd4;
    font-weight: bold;
}

.dialogue-history-log {
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

.dialogue-history-entry {
    margin-bottom: 15px;
    padding: 10px;
    border-radius: 8px;
}

.dialogue-history-entry.npc {
    background-color: #2c2c2c;
    text-align: left;
}

.dialogue-history-entry.player {
    background-color: #354647;
    text-align: right;
}

.dialogue-history-entry strong {
    color: #00bcd4;
}

.dialogue-history-entry p {
    margin: 5px 0 0 0;
    font-size: 0.95em;
    color: #ddd;
}

.adventure-lore-text {
    text-align: left;
    font-size: 0.95em;
    color: #ccc;
    line-height: 1.6;
    max-height: 300px;
    overflow-y: auto;
    padding-right: 10px;
}

/* ============================================================================
// ==   MODALE D'AVENTURE (Style Événement)
// ============================================================================ */

/* L'overlay plein écran qui contient la modale */
#adventure-event-modal {
    position: fixed; /* Reste en place même si la carte défile derrière */
    z-index: 2500;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.75);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.3s ease; /* Animation d'apparition douce */
}

/* La boîte de contenu principale, centrée */
#adventure-event-content {
    background-color: #2a2a2a;
    border: 1px solid #6a5a4a;
    border-radius: 10px;
    padding: 25px;
    width: 90%;
    max-width: 550px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 20px; /* Espace entre les différentes sections */
}

/* Conteneur pour le dialogue (portrait + texte) */
.adventure-dialogue-display {
    display: flex;
    align-items: center;
    gap: 20px;
}

.adventure-dialogue-display img {
    width: 90px;
    height: 90px;
    border-radius: 50%;
    border: 3px solid #6a5a4a;
    object-fit: cover;
    flex-shrink: 0;
    /* AJOUTEZ CETTE LIGNE : Aligne l'image par le haut avant de la rogner */
    object-position: top center; 
}

.adventure-dialogue-box {
    flex-grow: 1;
}

.adventure-dialogue-box h4 {
    margin: 0 0 10px 0;
    color: #ffd700;
    font-size: 1.2em;
}
.adventure-dialogue-box .puzzle-hint {
    color: #aaa; /* Un gris clair qui reste lisible sur fond sombre */
    font-size: 0.9em; /* Légèrement plus petit que le texte normal de l'énigme */
    font-style: italic; /* Met le texte en italique pour un effet "astuce" */
    margin-top: 15px; /* Ajoute un peu d'espace au-dessus pour le séparer */
    border-top: 1px solid #444; /* Ajoute une fine ligne de séparation */
    padding-top: 10px; /* Espace entre la ligne et le texte de l'indice */
    /* Ces deux lignes sont importantes pour s'assurer qu'elles ne soient pas héritées */
    line-height: 1.4; 
    margin-bottom: 0;
}

.adventure-dialogue-box p {
    margin: 0;
    color: #eee;
    line-height: 1.6;
    font-size: 1.05em;
    font-style: italic;
}

/* Conteneur pour les puzzles et prérequis */
.adventure-interaction-display {
    text-align: center;
}

.adventure-interaction-display p {
    font-size: 1.1em;
    line-height: 1.6;
    margin-bottom: 15px;
}

.adventure-interaction-display input {
    width: 100%;
    padding: 12px;
    margin-bottom: 15px;
    font-size: 1.1em;
}

/* Style des boutons dans la modale */
.adventure-controls {
    display: flex;
    justify-content: flex-end; /* Aligne le bouton "Continuer" à droite */
    gap: 10px;
}

.adventure-controls button {
    padding: 10px 25px;
    font-size: 1em;
    font-weight: bold;
}

.player-dialogue {
    flex-direction: row-reverse;
}
.player-dialogue .adventure-dialogue-box {
    align-items: flex-end; /* Aligne le nom et le texte à droite */
}

.adventure-dialogue-display.player-dialogue {
    flex-direction: row-reverse;
}

.adventure-dialogue-display.player-dialogue .adventure-dialogue-box {
    align-items: flex-end; /* Aligne le nom et le texte à droite */
}

/* --- Style pour les pensées du personnage --- */
.adventure-dialogue-box.thinking p {
    font-style: italic;
    color: #bbb;
}

#aventure-tabs {
    display: flex;
    justify-content: center;
    padding: 5px 0;
    border-top: 1px solid #444;
    gap: 10px;
}

.act-tab {
    padding: 8px 16px;
    cursor: pointer;
    background-color: #333;
    color: #ccc;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 0.9em;
    transition: background-color 0.2s, color 0.2s;
}

.act-tab:hover {
    background-color: #444;
}

.act-tab.active {
    background-color: #a88b5c; /* Couleur dorée pour l'onglet actif */
    color: #111;
    font-weight: bold;
    border-color: #c8a66a;
}

/* DANS style.0.9.0.css */

/* --- Bouton Lore dans le Viewport --- */
#adventure-lore-button-container {
    position: absolute;
    top: 15px;
    right: 15px;
    z-index: 10;
}

.adventure-lore-btn {
    padding: 8px 12px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #f0e6d2;
    border: 1px solid #c89b3c;
    border-radius: 5px;
    cursor: pointer;
    font-family: 'MedievalSharp', cursive; /* Assurez-vous d'avoir une police appropriée */
    font-size: 0.9em;
    box-shadow: 0 0 10px rgba(200, 155, 60, 0.3);
    transition: all 0.2s ease-in-out;
}

.adventure-lore-btn:hover {
    background-color: #c89b3c;
    color: #030a13;
    box-shadow: 0 0 15px rgba(200, 155, 60, 0.7);
}

/* --- Fenêtre Modale du Lore --- */
#lore-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 1001;
}

#lore-modal-content {
    background: #111;
    border: 2px solid #c89b3c;
    padding: 25px;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    box-shadow: 0 0 20px rgba(200, 155, 60, 0.5);
}

#lore-modal-content h2 {
    margin-top: 0;
    text-align: center;
    color: #f0e6d2;
}

.lore-text-panel {
    flex-grow: 1;
    overflow-y: auto;
    background: rgba(0, 0, 0, 0.3);
    padding: 15px;
    border-radius: 5px;
    border: 1px solid #333;
    color: #ccc;
    line-height: 1.6;
    font-size: 0.95em;
}

.lore-text-panel p {
    margin-bottom: 1em;
    text-indent: 2em; /* Pour un style "livre" */
}

/* Scrollbar pour le panel de lore */
.lore-text-panel::-webkit-scrollbar {
    width: 8px;
}
.lore-text-panel::-webkit-scrollbar-track {
    background: #222;
}
.lore-text-panel::-webkit-scrollbar-thumb {
    background: #c89b3c;
    border-radius: 4px;
}

/* ============================================================================
// ==   STYLE POUR LE SÉLECTEUR DE LANGUE
// ============================================================================ */

/* Conteneur pour aligner le label et le sélecteur */
.option-group {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 15px;
}

/* On cible spécifiquement le sélecteur par son ID */
#language-selector {
    /* On supprime l'apparence par défaut du navigateur. C'est la clé ! */
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;

    /* Style de base pour correspondre à vos autres inputs */
    background-color: #333;
    color: #f0f0f0;
    border: 1px solid #555;
    border-radius: 5px;
    font-size: 1em;
    cursor: pointer;
    
    /* Le padding à droite (35px) laisse de la place pour notre flèche personnalisée */
    padding: 10px 35px 10px 15px;
    
    /* On utilise une flèche personnalisée (SVG encodé) qui s'adapte bien au thème */
    background-image: url('data:image/svg+xml;charset=US-ASCII,%3Csvg%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20width%3D%22292.4%22%20height%3D%22292.4%22%3E%3Cpath%20fill%3D%22%23CCCCCC%22%20d%3D%22M287%2069.4a17.6%2017.6%200%200%200-13-5.4H18.4c-5%200-9.3%201.8-12.9%205.4A17.6%2017.6%200%200%200%200%2082.2c0%205%201.8%209.3%205.4%2012.9l128%20127.9c3.6%203.6%207.8%205.4%2012.8%205.4s9.2-1.8%2012.8-5.4L287%2095c3.5-3.5%205.4-7.8%205.4-12.8%200-5-1.9-9.2-5.4-13z%22%2F%3E%3C%2Fsvg%3E');
    background-repeat: no-repeat;
    background-position: right 12px center;
    background-size: 10px;

    /* Transition douce pour les effets */
    transition: border-color 0.2s ease-in-out;
    width:80%
}

/* Effet au survol de la souris */
#language-selector:hover {
    border-color: #777;
}

/* Effet lorsque le sélecteur est sélectionné (focus) */
#language-selector:focus {
    outline: none; /* On retire l'outline moche du navigateur */
    border-color: #007bff; /* On met une bordure bleue pour indiquer la sélection */
    box-shadow: 0 0 5px rgba(0, 123, 255, 0.5);
}

@keyframes pulse-fief-glow {
  0% {
    box-shadow: 0 0 8px rgba(109, 76, 65, 0.4), inset 0 0 5px rgba(109, 76, 65, 0.2);
  }
  50% {
    box-shadow: 0 0 20px rgba(189, 149, 129, 0.8), inset 0 0 10px rgba(189, 149, 129, 0.4);
  }
  100% {
    box-shadow: 0 0 8px rgba(109, 76, 65, 0.4), inset 0 0 5px rgba(109, 76, 65, 0.2);
  }
}

/* La classe qu'on ajoutera/retirera avec JavaScript */
.fief-notification {
  animation: pulse-fief-glow 1.5s infinite ease-in-out;
  border-color: #a1887f !important; /* On force une bordure un peu plus visible */
}

/* ============================================================================
// ==   NOUVEAU : Style pour la confirmation de transmutation
// ============================================================================ */

/* Overlay qui s'affichera par-dessus la plante prête */
.transmutation-overlay {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.8); /* Fond sombre semi-transparent */
    border-radius: 8px; /* Doit correspondre au radius de .garden-plot */
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 10px;
    z-index: 5; /* Pour s'afficher au-dessus de l'image de la plante */
    animation: fadeIn 0.3s ease; /* Animation d'apparition */
}

.transmutation-overlay p {
    margin: 0 0 10px 0;
    font-size: 0.9em;
    font-weight: bold;
    color: #ffc107; /* Doré pour attirer l'attention */
}

.transmutation-buttons {
    display: flex;
    gap: 10px;
}

.transmutation-buttons button {
    padding: 6px 12px;
    font-size: 0.85em;
    font-weight: bold;
    border-radius: 5px;
    cursor: pointer;
    border: none;
}

/* Style spécifique pour le bouton "Oui" */
.transmutation-buttons .confirm-btn {
    background-color: #28a745; /* Vert */
    color: white;
}

/* Style spécifique pour le bouton "Non" */
.transmutation-buttons .cancel-btn {
    background-color: #dc3545; /* Rouge */
    color: white;
}

/* Option A : Le "Minimaliste Compact" */
.aventure-node.tutorial-node {
  /* On réduit la taille globale du conteneur du nœud */
  width: 68px;
  height: 58px;
  transition: all 0.2s ease-in-out;
}

.aventure-node.tutorial-node .node-icon {
  /* On réduit la taille de l'icône pour qu'elle rentre dans le nouveau conteneur */
  width: 32px;
  height: 32px;
  font-size: 16px; /* On réduit aussi la taille de l'icône "chapeau" */
  
  /* On garde le style minimaliste */
  background-color: transparent;
  color: #8fb6d5;
  transition: all 0.2s ease-in-out;
}

.aventure-node.tutorial-node .node-name {
  /* On réduit la police et on ajuste la position pour le nouveau format */
  font-size: 0.6em;
  color: #aaa;
  bottom: -18px; /* On remonte un peu le texte pour qu'il soit plus proche */
}

/* Au survol, le nœud devient plein et un peu plus grand pour le feedback */
.aventure-node.tutorial-node:hover {
  opacity: 1;
}
.resources-container {
    display: flex;
    /* MODIFICATION CLÉ : On empile verticalement ET on inverse l'ordre ! */
    flex-direction: column-reverse; 
    align-items: flex-end; 
    gap: 8px;
}
.standard-resources { display: flex; align-items: center; gap: 12px; background-color: rgba(0, 0, 0, 0.2); border: 1px solid var(--color-border); border-radius: 6px; padding: 3px 10px; }
.main-resources-group { display: flex; gap: 12px; border-right: 1px solid var(--color-accent-secondary); padding-right: 12px; }
.fragments-group { display: flex; flex-direction: column; }
.standard-resources p { margin: 1px 0; display: flex; align-items: center; gap: 5px; }
.standard-resources .resource-icon { width: 18px; height: 18px; will-change: transform;}
.standard-resources .resource-value { font-weight: bold; color: var(--color-text-primary); font-size: 0.9em; }
.premium-resource { background: linear-gradient(145deg, #4a3c0b, #3c2f0a); border: 1px solid #ffc107; border-radius: 6px; padding: 5px 12px; box-shadow: 0 0 10px rgba(255, 193, 7, 0.5); animation: pulse-premium 2.5s infinite ease-in-out; }
.premium-resource p { margin: 2px 0; display: flex; align-items: center; gap: 5px; }
.premium-resource .resource-value { color: #fff; text-shadow: 0 0 5px #000; font-weight: bold; font-size: 1em; }
.premium-resource .premium-icon { width: auto; height: 25px; filter: drop-shadow(0 0 2px #fff); margin-right: 4px; will-change: transform;}
@keyframes pulse-premium {
    0% { box-shadow: 0 0 2px rgba(255, 193, 7, 0.5); }
    50% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.8); }
    100% { box-shadow: 0 0 2px rgba(255, 193, 7, 0.5); }
}
.char-and-resources-wrapper { display: flex; flex-direction: row; justify-content: space-between; align-items: flex-start; gap: 10px; }

.char-and-resources-wrapper {
    width: 100%;
}
.contextual-resource-display {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: rgba(0, 0, 0, 0.3);
    border: 1px solid var(--color-border);
    border-radius: 5px;
    padding: 5px 10px;
    font-size: 0.9em;
    font-weight: bold;
    float: right; /* Permet de le positionner à droite des titres */
    margin-left: 15px; /* Espace à gauche pour ne pas coller au titre */
}

.contextual-resource-display span {
    color: var(--color-text-primary);
}

#character-creation {
  position: relative; /* Nécessaire pour positionner un élément enfant en absolu */
}

.options-btn-corner {
  position: absolute;
  top: 15px;
  right: 15px;
  background: #333;
  color: #eee;
  border: 1px solid #555;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  font-size: 1.5em;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.2s;
}

.options-btn-corner:hover {
  background-color: #444;
}

#boutique-modal {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 1001; /* Doit être au-dessus de tout le reste */
  padding: 15px;
}

/* Le conteneur blanc/gris de la boutique */
#boutique-content {
  background-color: #1e1e24;
  padding: 25px;
  border-radius: 12px;
  border: 1px solid #444;
  width: 100%;
  max-width: 900px;
  max-height: 90vh;
  overflow-y: auto;
  position: relative;
  box-shadow: 0 5px 25px rgba(0, 0, 0, 0.5);
  animation: modal-fade-in 0.3s ease-out;
}

#boutique-content h2 {
  margin-top: 0;
  text-align: center;
  color: #c9b88b;
  border-bottom: 1px solid #444;
  padding-bottom: 15px;
  margin-bottom: 20px;
}

/* Grille pour organiser les sections de la boutique */
.boutique-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 25px;
}

/* Style pour chaque catégorie (Monnaie, Améliorations, etc.) */
.boutique-category {
  background-color: #16161a;
  padding: 15px;
  border-radius: 8px;
  border: 1px solid #333;
}

.boutique-category h3 {
  margin-top: 0;
  color: #b3a473;
  font-size: 1.1em;
  border-bottom: 1px solid #3c3c3c;
  padding-bottom: 10px;
  margin-bottom: 15px;
}

/* Style pour chaque article individuel dans la boutique */
.boutique-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 15px;
  padding: 10px;
  background-color: #2a2a32;
  border-radius: 5px;
}

.boutique-item img {
    width: 24px;   /* Définit une largeur fixe pour toutes les icônes */
    height: 24px;  /* Définit une hauteur fixe pour toutes les icônes */
    object-fit: contain; /* S'assure que l'image est contenue dans son cadre sans être coupée ni déformée */
    vertical-align: middle; /* Aligne l'icône au centre du texte adjacent */
    display: inline-block; /* Permet d'appliquer largeur/hauteur et de l'aligner avec le texte */

}

.boutique-item span {
  font-size: 0.95em;
  flex-grow: 1; /* Permet au texte de prendre l'espace disponible */
}

/* Style pour les boutons d'achat */
.buy-button, .buy-button-premium, .ad-button {
  padding: 4px 8px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-weight: bold;
  font-size: 0.9em;
  transition: background-color 0.2s, transform 0.2s;
}

.buy-button {
  background-color: #28a745;
  color: white;
}

.buy-button:hover {
  background-color: #218838;
  transform: translateY(-2px);
}

.buy-button-premium {
  background-color: #8a2be2;
  color: white;
}

.buy-button-premium:hover {
  background-color: #7b24cb;
  transform: translateY(-2px);
}

.ad-button {
  background-color: #ffc107;
  color: #212529;
}

.ad-button:hover {
  background-color: #e0a800;
  transform: translateY(-2px);
}
.ad-button:disabled {
  background-color: #555;
  cursor: not-allowed;
  transform: none;
}

.ad-item small {
  margin: 0 10px;
  color: #aaa;
}

.boutique-item-image-container {
  /* Le conteneur avec une taille fixe */
  width: 64px;
  height: 64px;
  margin-right: 15px;
  
  /* Centre l'image verticalement et horizontalement */
  display: flex;
  justify-content: center;
  align-items: center;
  
  /* Style visuel */
  background-color: #1e1e24;
  border-radius: 5px;
  flex-shrink: 0; /* Empêche le conteneur de rétrécir */
}

.boutique-item-image-container img {
    max-width: 100%;
    max-height: 100%;
    /* Les 2 lignes ci-dessous forcent l'image à occuper 80% du cadre */
    width: 80%;
    height: 80%;
    object-fit: contain;
}

.pack-details-buttons {
    display: flex;
    justify-content: flex-end; /* Aligne les boutons à droite */
    align-items: center;      /* Centre verticalement les boutons */
    gap: 15px;                /* Espace entre les boutons */
    margin-top: 25px;         /* Espace au-dessus des boutons */
    width: 100%;
}

.buy-button-premium {
  display: inline-flex; /* Permet d'aligner le contenu interne (texte et image) */
  align-items: center;  /* Aligne verticalement le texte et l'icône au centre */
  justify-content: center; /* Centre le contenu horizontalement */
}

/* Style spécifique pour l'icône DANS le bouton premium */
.buy-button-premium .icon-sprite-small {
  /* La hauteur s'adapte à la taille du texte du bouton (1.1em = 110%) */
  height: 1.4em; 
  
  /* Le navigateur calcule la largeur automatiquement pour ne pas déformer l'image */
  width: auto; 
  
  /* Assure un bon alignement vertical si jamais il y a un souci de ligne de base */
  vertical-align: middle; 
  margin-left:10px
}

#pack-details-modal {
    position: fixed;
    z-index: 1001;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    overflow: auto;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
    backdrop-filter: blur(5px);
}

#pack-details-modal.hidden {
    display: none;
}

#pack-details-content {
    background: #2c2c3e;
    padding: 25px;
    border: 1px solid #4f4f7a;
    border-radius: 12px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 25px rgba(0, 0, 0, 0.4);
    text-align: center;
    animation: fadeInModal 0.3s ease-out;
}

#pack-details-title {
    margin-top: 0;
    color: #ffd700; /* Or */
    font-size: 1.8em;
}

#pack-details-content-display {
    text-align: left;
    margin: 20px 0;
    padding: 15px;
    background-color: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    line-height: 1.6;
    color: #ddd;
}

.pack-details-buttons {
    display: flex;
    justify-content: space-between;
    gap: 15px;
    margin-top: 20px;
}

.pack-details-buttons .buy-button {
    flex-grow: 1;
    background-color: #28a745; /* Vert */
    border-color: #1c7430;
}

.pack-details-buttons .modal-close-button {
    flex-grow: 1;
    background-color: #6c757d; /* Gris */
    border-color: #5a6268;
    width: 75%;
}
#boutique-content .modal-close-button{
    margin:5px
}

.boutique-item.free-reward {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px;
    gap: 15px; /* Espace entre les éléments */
}

/* Conteneur pour le texte et le compteur */
.free-reward-info {
    display: flex;
    flex-direction: column; /* Place le compteur sous le texte */
    align-items: flex-start; /* Aligne le texte à gauche */
    gap: 4px; /* Petit espace entre le titre et le compteur */
}

/* Style du compteur (ex: 1/3) */
.free-reward-info small {
    font-size: 0.8em;
    color: #a0a0a0;
    font-style: italic;
}

/* Style du bouton "Regarder" */
.free-reward .action-button {
    padding: 8px 12px;
    font-size: 0.9em;
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

/* Pour les images des packs de gemmes et autres */
.boutique-item-image-container {
    width: 64px;
    height: 64px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boutique-item-image-container img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain; /* Assure que l'image ne soit pas déformée */
}

.stats-grid {
    display: grid;
    /* Crée une grille responsive qui s'adapte à la taille de l'écran */
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 15px;
    margin-top: 20px;
    margin-bottom: 25px;
}

.stat-item {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 15px;
    transition: all 0.2s ease-in-out;
    box-shadow: inset 0 0 10px rgba(0,0,0,0.4);
}

.stat-item:hover {
    transform: translateY(-5px);
    border-color: var(--color-border-hover);
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
}

.stat-icon {
    font-size: 2.5em;
    flex-shrink: 0;
    color: rgba(255, 193, 7, 0.5); /* Icône dorée semi-transparente */
    text-shadow: 0 2px 4px rgba(0,0,0,0.5);
}

.stat-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start; /* Aligne le texte à gauche */
}

.stat-text span {
    font-size: 0.85em;
    color: var(--color-text-secondary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.stat-text strong {
    font-size: 1.6em;
    font-family: var(--font-title);
    color: var(--color-accent-highlight);
    text-shadow: 0 0 5px rgba(255, 193, 7, 0.3);
}

#profile-modal {
  position: fixed;
  z-index: 3800;
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

#report-player-modal {
  position: fixed;
  z-index: 4100; /* <-- Z-index augmenté, il s'affichera maintenant par-dessus */
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  align-items: center;
  justify-content: center;
}

#profile-content, #report-player-content {
  background-color: #2a2a2a;
  padding: 25px;
  border: 1px solid #666;
  border-radius: 10px;
  width: 90%;
  max-width: 500px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#profile-content h2, #report-player-content h2 {
    margin-top: 0;
    text-align: center;
    color: #ffc107;
}

#profile-main-section {
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 25px;
    padding-bottom: 20px;
    border-bottom: 1px solid #444;
    /* On ajoute de la marge en haut pour laisser le cadre déborder sans être coupé */
    margin-top: 30px; 
}

#profile-avatar-container {
    position: relative; 
    /* C'est la taille de base de ton conteneur d'avatar sur la page */
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    
    /* TRÈS IMPORTANT : On permet au cadre de déborder visuellement */
    overflow: visible; 
    
    /* On utilise une marge négative pour "tirer" le conteneur vers le haut
       et compenser l'espace ajouté pour le débordement. */
    margin-top: -30px;
}

#profile-picture-wrapper {
    position: absolute;
    /* Puisque le "trou" fait 50% de l'image totale (512 sur 1024),
       la marge intérieure est de 25% de chaque côté pour créer un carré de 50% de côté. */
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #111;
}

#profile-picture-img {
    width: 100%;
    height: 100%;
    /* MON COMMENTAIRE : C'est la propriété clé pour que ton image remplisse 
       l'espace de 512x512 sans être déformée. Elle sera zoomée et coupée si besoin. */
    object-fit: cover; 
}

#profile-frame-img {
    position: absolute;
    /* On le centre parfaitement par rapport au conteneur de 128x128px */
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    
    /* MON COMMENTAIRE : Ici, tu peux ajuster la taille du cadre.
       150% signifie qu'il fera 1.5x la taille du conteneur (128px * 1.5 = 192px),
       le faisant ainsi "déborder" comme tu le souhaites. */
    width: 150%;
    height: 150%;
    
    /* Empêche le cadre de capturer les clics de la souris */
    pointer-events: none;
}

#profile-info-and-actions {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

#profile-info-and-actions h3 {
    margin: 0;
}

#profile-info-and-actions small {
    color: #888;
    font-size: 0.8em;
}

.cooldown-text {
    font-size: 0.9em;
    color: #aaa;
}
.cooldown-text .bypass-cost {
    color: #ffae42;
    cursor: pointer;
    text-decoration: underline;
}

#profile-frames-section h4 {
    margin-bottom: 10px;
}

#profile-frames-list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(80px, 1fr));
    gap: 15px;
}

.frame-choice {
    aspect-ratio: 1 / 1;
    background-color: #222;
    border: 2px solid #555;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 5px;
}

.frame-choice:hover {
    border-color: #888;
}

.frame-choice.selected {
    border-color: #ffc107;
    box-shadow: 0 0 10px #ffc107;
}

.frame-choice img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* Modification pour le leaderboard */
#leaderboard-list li .player-avatar-leaderboard {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 10px;
}
#leaderboard-list li .player-avatar-leaderboard .pfp {
    width: 100%;
    height: 100%;
    border-radius: 6px;
    object-fit: cover;
    object-position: top center;
}
#leaderboard-list li .player-avatar-leaderboard .frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 130%;
    height: 130%;
}
#leaderboard-list li > div:first-child {
    display: flex;
    align-items: center;
}
#leaderboard-list li.clickable-rank {
    cursor: pointer;
    transition: background-color 0.2s;
}
#leaderboard-list li.clickable-rank:hover {
    background-color: #444;
}


#player-profile-modal {
    position: fixed;
    z-index: 4000; /* Au-dessus de la modale du leaderboard */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#player-profile-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.7);
    text-align: center;
}

#player-profile-content h2 {
    margin-top: 0;
}

#player-profile-main {
    margin-bottom: 20px;
}

#player-profile-avatar-container {
    position: relative;
    width: 128px;
    height: 128px;
    margin: 0 auto 15px auto;
}

#player-profile-picture-wrapper {
    width: 100%;
    height: 100%;
    border-radius: 12px;
    overflow: hidden;
    background-color: #111;
}

#player-profile-picture-img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
}

#player-profile-frame-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 120%;
    height: 120%;
    pointer-events: none;
}

#player-profile-name {
    margin: 0;
    font-size: 1.5em;
}

#player-profile-level {
    font-size: 1em;
    color: #ccc;
    font-weight: bold;
}

#player-profile-stats {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
    margin-top: 0;
    margin-bottom: 25px;
}

.profile-modal-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 15px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #444;
}

/* On ajuste le bouton de signalement pour qu'il ne prenne pas trop de place */
.report-button {
    background: none;
    border: 1px solid #777;
    color: #aaa;
    padding: 8px 15px;
    border-radius: 5px;
    cursor: pointer;
    font-size: 0.8em;
    transition: all 0.2s;
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

.report-button:hover {
    background-color: #5a1d1d;
    color: #fff;
    border-color: #c0392b;
}

.profile-modal-footer .modal-close-button {
    flex-grow: 1; /* Le bouton fermer prend plus de place */
}

#frames-modal {
    position: fixed;
    z-index: 3900; /* Juste au-dessus de la modale de profil */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#frames-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #888;
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 25px rgba(0,0,0,0.7);
}

#frames-content h2 {
    margin-top: 0;
    text-align: center;
}

#frames-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(100px, 1fr));
    gap: 15px;
    max-height: 300px;
    overflow-y: auto;
    padding: 15px;
    background-color: #1e1e1e;
    border-radius: 8px;
    border: 1px solid #444;
}

.frame-preview {
    aspect-ratio: 1 / 1;
    background-color: #222;
    border: 2px solid #555;
    border-radius: 8px;
    cursor: pointer;
    transition: all 0.2s ease;
    padding: 5px;
}

.frame-preview:hover {
    border-color: #888;
}

.frame-preview.selected {
    border-color: #00aaff;
    box-shadow: 0 0 10px #00aaff;
}

.frame-preview.locked img {
    filter: grayscale(100%) brightness(0.6);
}

.frame-preview img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

#frame-details-panel {
    margin-top: 20px;
    padding: 15px;
    background-color: #1e1e1e;
    border-radius: 8px;
    text-align: center;
    border: 1px solid #444;
}

#frame-details-panel h3 {
    margin: 0 0 5px 0;
    color: #ffc107;
}

#frame-details-panel p {
    margin: 0;
    font-size: 0.9em;
}

#frame-details-description {
    color: #ccc;
    font-style: italic;
    margin-bottom: 10px !important;
}

#frame-details-status .status-owned {
    color: #28a745;
    font-weight: bold;
}

#frame-details-status .status-locked {
    color: #ff6b6b;
    font-weight: bold;
}

.frames-modal-footer {
    display: flex;
    gap: 15px;
    margin-top: 20px;
}

/* --- NOUVEAU : Logique d'affichage des avatars et cadres (Corrigé v2) --- */

/* Conteneur principal de l'avatar (pour le profil et la modale publique) */
#profile-avatar-container, #player-profile-avatar-container {
    position: relative; 
    width: 128px;
    height: 128px;
    flex-shrink: 0;
    overflow: visible; 
    margin-top: 30px; 
    margin-bottom: 15px;
    margin-left: auto;
    margin-right: auto;
}

/* Le "trou" carré où sera placée l'image du joueur */
#profile-picture-wrapper, #player-profile-picture-wrapper {
    position: absolute;
    /* MON COMMENTAIRE : CORRECTION ICI.
       Le cadre fait 150% (192px), son trou fait 50% de sa taille (96px).
       96px représente 75% de la taille du conteneur de base (128px).
       On centre ce carré de 75% en le décalant de (100-75)/2 = 12.5%. */
    top: 12.5%;
    left: 12.5%;
    width: 75%;
    height: 75%;
    border-radius: 8px;
    overflow: hidden;
    background-color: #111;
}

/* L'image du joueur elle-même */
#profile-picture-img, #player-profile-picture-img {
    width: 100%;
    height: 100%;
    object-position: top center;
    object-fit: cover; 
}

/* L'image du cadre qui se superpose */
#profile-frame-img, #player-profile-frame-img {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 150%;
    height: 150%;
    pointer-events: none;
}


/* --- Modification pour le leaderboard (plus petit) --- */
#leaderboard-list li .player-avatar-leaderboard {
    position: relative;
    width: 40px;
    height: 40px;
    margin-right: 15px;
    overflow: visible;
}

#leaderboard-list li .player-avatar-leaderboard .pfp {
    position: absolute;
    /* MON COMMENTAIRE : CORRECTION.
       Le conteneur fait 40px, le cadre 160% (64px), le trou 50% (32px).
       L'avatar doit donc faire 80% de 40px pour faire 32px.
       On le centre avec un décalage de (100-80)/2 = 10%. */
    top: 10%;
    left: 10%;
    width: 80%;
    height: 80%;
    border-radius: 4px;
    object-fit: cover;
    object-position: top center;
    overflow: hidden;
    background-color: #111;
}

#leaderboard-list li .player-avatar-leaderboard .frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 160%;
    height: 160%;
    pointer-events: none;
}

#cropper-modal {
  position: fixed;
  z-index: 4000; /* Au-dessus de la modale de profil */
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#cropper-content {
  background-color: #2a2a2a;
  padding: 25px;
  border: 1px solid #666;
  border-radius: 10px;
  width: 90%;
  max-width: 600px;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#cropper-content h2 {
  margin-top: 0;
  text-align: center;
}

.cropper-image-container {
  width: 100%;
  height: 400px; /* Hauteur fixe pour la zone de travail */
  margin: 20px 0;
  background-color: #111;
}

/* On s'assure que l'image ne dépasse pas de son conteneur */
#cropper-image {
  display: block;
  max-width: 100%;
}

.cropper-actions {
  display: flex;
  justify-content: flex-end;
  align-items: center;
  gap: 10px;
  margin-top: 20px;
}
.cropper-actions .secondary-action-button {
    width: 45px;
    height: 45px;
    font-size: 1.5em;
    padding: 0;
    margin: 0;
}
/* Le bouton annuler est poussé à gauche */
#cropper-cancel {
    margin-right: auto;
}

label[for="profile-picture-upload"].action-button {
    padding: 8px 12px;
    font-size: 0.9em;
    margin-top: 10px;
}

/* Style pour le bouton désactivé visuellement */
label[for="profile-picture-upload"].action-button.disabled {
    background-color: #555;
    color: #999;
    cursor: not-allowed;
    border-color: #444;
}

/* Style pour le bouton "Passer" pour qu'il ressemble à un lien */
.bypass-cost {
    margin-left: 10px;
}

#inventory-modal {
    position: fixed;
    z-index: 3700;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#inventory-modal-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #666;
    border-radius: 10px;
    width: 90%;
    max-width: 800px;
    max-height: 90vh;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}

#inventory-modal-content h2 {
    margin-top: 0;
    text-align: center;
    color: #ffc107;
    border-bottom: 1px solid #444;
    padding-bottom: 15px;
}

.inventory-tabs {
    display: flex;
    border-bottom: 2px solid #555;
    margin-bottom: 20px;
}

.inventory-tab-button {
    padding: 10px 20px;
    cursor: pointer;
    border: none;
    border-bottom: 3px solid transparent;
    background-color: transparent;
    color: #ccc;
    font-size: 1.1em;
    font-weight: bold;
    transition: all 0.2s ease;
}

.inventory-tab-button:hover {
    background-color: #3a3a3a;
}

.inventory-tab-button.active {
    color: #ffc107;
    border-bottom-color: #ffc107;
}

#inventory-tab-content-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px; /* Espace pour la scrollbar */
}

.inventory-tab-pane {
    display: none;
}

.inventory-tab-pane.active {
    display: block;
}

.inventory-sort-controls {
    margin-bottom: 15px;
    background-color: #222;
    padding: 10px;
    border-radius: 6px;
}

.inventory-sort-controls label {
    margin-right: 10px;
    font-weight: bold;
}

.inventory-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
    gap: 15px;
}

.inventory-grid-item {
    background-color: #333;
    border-radius: 8px;
    padding: 10px;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    border: 1px solid #444;
}

.inventory-grid-item img {
    width: 48px;
    height: 48px;
    object-fit: contain;
}

.inventory-item-name {
    font-size: 0.9em;
    font-weight: bold;
    color: #f0f0f0;
}

.inventory-item-quantity {
    font-size: 1.1em;
    color: #ffc107;
}

.inventory-list-style {
    list-style: none;
    padding: 0;
    margin: 0;
}

.inventory-list-style li {
    background-color: #333;
    padding: 12px 15px;
    border-radius: 5px;
    margin-bottom: 10px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-left: 3px solid #555;
}

.inventory-list-style .item-info {
    display: flex;
    flex-direction: column;
}

.inventory-list-style .item-info strong {
    font-size: 1.05em;
}
.inventory-list-style .item-info small {
    font-size: 0.85em;
    color: #aaa;
    font-style: italic;
    margin-left: 0;
}
.inventory-list-style .item-stats {
    font-size: 0.9em;
    color: #ddd;
    text-align: right;
}

#inventory-modal-content .modal-close-button {
    margin-top: 20px;
}

#bottom-nav {
    height: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom)); /* On l'agrandit pour combler la zone sûre */
    padding-bottom: env(safe-area-inset-bottom); /* On pousse son contenu vers le haut */
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: var(--color-bg);
    border-top: 2px solid var(--color-border);
    box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    justify-content: space-around;
    align-items: center;
    z-index: 1000; 
}

.nav-button {
    background: transparent;
    border: none;
    color: var(--color-text-secondary);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    flex-grow: 1; /* Chaque bouton prend une part égale de l'espace */
    padding: 5px 0;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
    height: 100%;
}

.nav-button:hover {
    color: var(--color-text-primary);
}

.nav-button.active {
    color: var(--color-accent-highlight);
    border-bottom: 3px solid var(--color-accent-highlight);
}

.nav-icon {
    font-size: 1.8em;
}

.nav-text {
    font-size: 0.9em; /* Police légèrement plus grande */
    font-family: var(--font-title);
    margin-top: 0; /* On retire la marge car il n'y a plus d'icône */
}

/* Style pour le bouton central "Aventure" */
.nav-button-center {
    height: 120%; /* Le fait déborder vers le haut */
    background-color: var(--color-surface);
    border: 2px solid var(--color-border);
    border-radius: 12px 12px 0 0;
    margin-bottom: 10px; /* Le remonte encore un peu */
}

.nav-button-center.active {
    color: var(--color-accent-highlight);
    border-color: var(--color-accent-highlight);
    border-bottom: none; /* La bordure active est sur le conteneur */
}

/* --- Écrans Principaux --- */
.main-screen.hidden {
    display: none;
}

/* Chaque écran prend toute la hauteur disponible entre le header et le footer */
.main-screen {
    box-sizing: border-box; 
    padding-left: 10px;
    padding-right: 10px;
}

body.sub-nav-active #game-screen {
    bottom: calc(var(--bottom-nav-height) + var(--sub-nav-height) + env(safe-area-inset-bottom));
}

#game-screen {
    position: absolute;
    top: calc(var(--header-height) + env(safe-area-inset-top)); 
    bottom: var(--bottom-nav-height); /* S'arrête juste au-dessus du footer principal */
    left: 0;
    right: 0;
    width: 100%;
    overflow-y: auto; /* C'est lui qui gère le scroll */
    
    /* On n'a plus besoin des padding-top/bottom ici, la position s'en charge */
}
#personnage-screen.needs-scroll-padding {
    padding-bottom: 50px;
}
#personnage-screen {
    padding-bottom: 10px;
}
/* --- Header Principal --- */
#main-header {
    height: calc(60px + env(safe-area-inset-top)); /* MODIFICATION ICI */
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    /* L'ancienne hauteur est remplacée par le calcul ci-dessus */
    background-color: var(--color-bg);
    border-bottom: 2px solid var(--color-border);
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
    display: flex;
    align-items: center;
    padding: env(safe-area-inset-top) 15px 0 15px;
    gap: 8px;
    z-index: 1000;
    box-sizing: border-box;
}

.header-profile {
    position: relative;
    width: 48px;
    height: 48px;
    flex-shrink: 0;
}

.header-resource-premium {
    /* On place la ressource premium tout à droite */
    order: 1;
    margin-left: auto;
    padding: 4px 8px;
}

.header-resource-premium .resource-icon {
    height: 25px;
}
.header-resource-premium .resource-value {
    font-size: 0.9em;
}

#header-avatar-container {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: visible;
}

#header-picture-wrapper {
    position: absolute;
    top: 12.5%; left: 12.5%;
    width: 75%; height: 75%;
    border-radius: 6px;
    overflow: hidden;
    background-color: #111;
}

#header-picture-img {
    width: 100%; height: 100%;
    object-position: top center;
    object-fit: cover;
    backface-visibility: hidden;
    will-change: transform;
}

#header-frame-img {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 150%; height: 150%;
    pointer-events: none;
}

.header-resources-standard {
    display: grid; /* On passe en mode Grille */
    grid-template-columns: repeat(2, 1fr); /* 2 colonnes de taille égale */
    gap: 2px 15px; /* 2px d'espace vertical, 15px horizontal */
    align-items: center; /* Centre les items verticalement dans leurs cellules */
}

.header-resources-standard p, .header-resource-premium p {
    margin: 0;
    display: flex;
    align-items: center;
    gap: 6px;
}

.header-resources-standard .resource-icon {
    width: 20px; height: 20px;
    will-change: transform;
}

.header-resources-standard .resource-value {
    font-weight: bold;
    font-size: 1em;
}

.header-resource-premium {
    background: linear-gradient(145deg, #4a3c0b, #3c2f0a);
    border: 1px solid #ffc107;
    border-radius: 6px;
    padding: 6px 12px;
    box-shadow: 0 0 10px rgba(255, 193, 7, 0.5);
    animation: pulse-premium 2.5s infinite ease-in-out;
    cursor: pointer;
}

#sub-navigation-wrapper {
    position: fixed;
    /* On la positionne par rapport au bas de l'écran, en tenant compte de la zone sûre et du footer principal */
    bottom: calc(var(--bottom-nav-height) + env(safe-area-inset-bottom));
    left: 0;
    width: 100%;
    background-color: var(--color-surface); 
    border-top: 1px solid var(--color-border);
    z-index: 999;
}

.sub-nav {
    display: flex;
    justify-content: space-around;
    align-items: stretch; /* Pour que les boutons prennent toute la hauteur */
    height: 50px; /* Hauteur de notre sur-footer */
}

.sub-nav-button {
    flex: 1; /* Chaque bouton prend une part égale de l'espace */
    background: transparent;
    border: none;
    border-top: 3px solid transparent; /* Ligne pour l'état actif */
    color: var(--color-text-secondary);
    font-family: var(--font-title);
    font-size: 0.75em;
    cursor: pointer;
    transition: all 0.2s ease-in-out;
}

.sub-nav-button:hover {
    background-color: var(--color-surface);
}

.sub-nav-button.active {
    color: var(--color-accent-highlight);
    /* L'indicateur est maintenant une ligne en haut, ce qui est plus logique */
    border-top: 3px solid var(--color-accent-highlight);
    /* On s'assure qu'il n'y a pas d'autre bordure qui traîne */
    border-bottom: none;
}

.sub-nav-button.disabled {
    color: var(--color-text-disabled);
    cursor: not-allowed;
    background-color: transparent;
    opacity: 0.6;
}
.sub-nav-button.disabled:hover {
    cursor: help;
}

.nav-button.disabled {
    color: var(--color-text-disabled);
    opacity: 0.5;
    pointer-events: none; /* Empêche tout clic */
    cursor: not-allowed;
}

.nav-button.disabled:hover {
    cursor: help; /* Affiche une icône d'aide au survol */
}

body.creation-mode #main-header,
body.creation-mode #bottom-nav,
body.creation-mode #sub-nav-container {
    /* Cache le header et les deux footers quand le body a la classe .creation-mode */
    display: none;
}

body.creation-mode #character-creation {
    /* Prend toute la hauteur de l'écran */
    height: 100vh;
    /* Active le défilement vertical si le contenu dépasse */
    overflow-y: auto;
    /* Ajoute un peu de padding pour que le contenu ne colle pas aux bords */
    padding: 20px;
}

#spend-points-fab {
  position: fixed;
  /* MON COMMENTAIRE : On le positionne au-dessus des barres de navigation */
  bottom: 130px; 
  right: 20px;
  width: 40px;
  height: 40px;
  background: linear-gradient(145deg, #ffd54f, #ffb300);
  color: #1a1a1a;
  border: 2px solid #c89100;
  border-radius: 20%;
  font-size: 2em;
  font-weight: bold;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 4px 4px rgba(0,0,0,0.5);
  z-index: 998; /* Juste en dessous des barres de navigation principales */
  cursor: pointer;
  transition: transform 0.2s ease-out;
  /* MON COMMENTAIRE : Animation de "notification" */
  animation: pulse-glow 2s infinite;
}

#spend-points-fab:hover {
  transform: scale(1.1);
}

@keyframes pulse-glow {
    0% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.4); }
    /* J'ai réduit 20px à 12px pour un effet plus subtil */
    50% { box-shadow: 0 0 12px rgba(255, 193, 7, 0.7); } 
    100% { box-shadow: 0 0 5px rgba(255, 193, 7, 0.4); }
}

/* La modale d'attribution des points */
#spend-points-modal {
  position: fixed;
  z-index: 3600; /* Au-dessus de tout le reste */
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#spend-points-modal-content {
  background-color: var(--color-surface);
  padding: 25px;
  border: 1px solid #666;
  border-radius: 10px;
  width: 90%;
  max-width: 450px;
  max-height: 90vh; /* Hauteur maximale pour éviter de déborder */
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column; /* Organise le contenu verticalement */
}

#spend-points-modal-content h2 {
  margin-top: 0;
  text-align: center;
  color: #ffc107;
}

/* Conteneur pour la liste des attributs, qui sera scrollable si besoin */
#modal-attributes-section {
  flex-shrink: 1; /* Permet à cette section de rétrécir si l'espace manque */
  overflow-y: auto; /* Active le défilement si le contenu dépasse */
  padding-right: 10px; /* Espace pour la barre de scroll */
  margin-right: -10px; /* Compense le padding */
}

#modal-attributes-list .stat-line {
  padding: 8px 0;
}

#spend-points-modal-content .modal-close-button {
  margin-top: 20px; /* Espace au-dessus du bouton fermer */
  flex-shrink: 0; /* Empêche le bouton de rétrécir */
}

#detailed-stats-modal {
  position: fixed;
  /* MON COMMENTAIRE : Un z-index plus élevé pour s'afficher PAR-DESSUS l'autre modale */
  z-index: 3700; 
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.5); /* Moins sombre pour voir la modale derrière */
  backdrop-filter: blur(2px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#detailed-stats-modal-content {
  background-color: var(--color-surface);
  padding: 25px;
  border: 1px solid #888;
  border-radius: 10px;
  width: 90%;
  max-width: 450px;
  max-height: 90vh;
  box-shadow: 0 5px 20px rgba(0,0,0,0.6);
  display: flex;
  flex-direction: column;
}

#detailed-stats-modal-content h2 {
  margin-top: 0;
  text-align: center;
  color: var(--color-accent-highlight);
}

/* On s'assure que le contenu des onglets est bien scrollable */
#detailed-stats-modal-content .stat-tab-content p:last-child {
    margin-bottom: 10px;
}

#open-detailed-stats-modal-btn {
    width: 100%;
    margin-top: 15px;
}

.level-badge {
    position: absolute;
    bottom: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-radius: 6px;
    padding: 2px 8px;
    font-size: 0.8em;
    font-weight: bold;
    color: var(--color-accent-highlight);
    z-index: 1;
    white-space: nowrap; /* <-- AJOUT : Empêche le texte de passer à la ligne */

    text-shadow: 
        /* Contour noir */
        -1px -1px 0 var(--color-bg),  
         1px -1px 0 var(--color-bg),
        -1px  1px 0 var(--color-bg),
         1px  1px 0 var(--color-bg),
        /* Lueur dorée */
         0 0 8px var(--color-accent-highlight-dark);
}

/* On s'assure que le conteneur parent peut positionner le badge */
.header-profile {
    position: relative;
}

.profile-header {
    display: flex;
    align-items: center;
    justify-content: center; /* MODIFIÉ : Centre le contenu horizontalement */
    gap: 15px;
    margin-bottom: 20px;
}

.class-icon {
    width: 50px;
    height: 50px;
    flex-shrink: 0; /* Empêche l'icône de rétrécir */
}

.profile-name-level {
    display: flex;
    flex-direction: column;
}

.profile-name-level h1 {
    margin: 0;
    font-size: 1.5em;
    color: var(--color-text-primary);
    text-shadow: none; /* On retire l'ombre par défaut des h1 pour plus de lisibilité */
}

.profile-name-level p {
    margin: 0;
    font-size: 1em;
    color: var(--color-accent-highlight);
    font-weight: bold;
}

#fief-building-details-modal {
    position: fixed;
    z-index: 5100; /* Au-dessus de la modale du fief si elle existe */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
    animation: fadeIn 0.2s ease;
}

#fief-building-details-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    width: 90%;
    max-width: 400px; /* Taille compacte */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#fief-building-details-content h3 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
    margin-bottom: 15px;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
}

#fief-building-details-body .building-details-description {
    font-size: 0.9em;
    font-style: italic;
    color: #ccc;
    text-align: center;
    margin-bottom: 15px;
}

#fief-building-details-body .building-details-stats {
    text-align: left;
    font-size: 0.9em;
}

#fief-building-details-body p {
    margin: 5px 0;
}

#fief-building-details-body hr {
    margin: 15px 0;
}

#fief-building-details-content .modal-close-button {
    width: 100%;
    margin-top: 20px;
}

body.no-scroll #game-screen {
    overflow-y: hidden;
}

/* ==========================================================================
   MODALE D'OFFRE CONTEXTUELLE
   ========================================================================== */

#contextual-offer-modal {
    position: fixed;
    z-index: 1002;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0.7);
    display: flex;
    justify-content: center;
    align-items: center;
}

#contextual-offer-content {
    background: #2c2c2c;
    border: 1px solid #555;
    border-radius: 12px;
    padding: 25px;
    width: 90%;
    max-width: 400px;
    text-align: center;
    box-shadow: 0 5px 20px rgba(0,0,0,0.5);
    animation: fadeIn 0.3s ease-out;
}

#contextual-offer-title {
    color: #ffc107; /* Doré */
    margin-top: 0;
    border-bottom: 1px solid #555;
    padding-bottom: 15px;
    margin-bottom: 20px;
}

#contextual-offer-pack-details {
    display: flex;
    align-items: center;
    gap: 20px;
    text-align: left;
    margin-bottom: 25px;
}

#contextual-offer-pack-details .pack-icon-container {
    background: rgba(0,0,0,0.3);
    border-radius: 8px;
    padding: 10px;
    flex-shrink: 0;
}

#contextual-offer-pack-details .pack-icon-container img {
    width: 80px;
    height: 80px;
}

#contextual-offer-pack-details .pack-info h3 {
    margin: 0 0 10px 0;
}

#contextual-offer-pack-details .pack-info p {
    margin: 0 0 15px 0;
    font-size: 0.9em;
    color: #ccc;
}

#contextual-offer-pack-contents {
    font-weight: bold;
    font-size: 1.1em;
}

.contextual-offer-buttons {
    display: flex;
    justify-content: space-around;
    gap: 15px;
}

.contextual-offer-buttons .buy-button {
    flex-grow: 1;
}

.contextual-offer-buttons .modal-close-button {
    flex-grow: 1;
    background-color: #555;
}
.header-lives-container {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 8px;
    background-color: rgba(0, 0, 0, 0.2);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    /* MON COMMENTAIRE : J'ai retiré les lignes que j'avais ajoutées précédemment */
    cursor: pointer;
}

.lives-icon {
    font-size: 1.5em;
    text-shadow: 0 0 5px #ff6b6b;
    animation: pulse-heart 3s infinite ease-in-out;
}

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

.lives-text {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    line-height: 1.2;
}

#header-lives-count {
    font-weight: bold;
    font-size: 0.9em;
    color: var(--color-text-primary);
}

#header-lives-timer {
    font-size: 0.7em;
    color: var(--color-text-secondary);
    margin:0;
}

#lives-modal {
  position: fixed;
  z-index: 3800; /* Assure qu'il est au-dessus du jeu mais sous d'autres modales potentiellement plus importantes */
  left: 0; top: 0;
  width: 100%; height: 100%;
  background-color: rgba(0, 0, 0, 0.8);
  backdrop-filter: blur(5px);
  display: flex;
  align-items: center;
  justify-content: center;
}

#lives-modal-content {
    background-color: #2a2a2a;
    padding: 25px;
    border: 1px solid #c0392b; /* Bordure rouge pour rappeler la vie */
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    text-align: center;
}

#lives-modal-info {
    margin: 15px 0;
}

#lives-modal-count {
    font-size: 1.5em;
    font-weight: bold;
}

#lives-modal-timer {
    font-size: 1.1em;
    color: #ccc;
}

#lives-modal-actions {
    display: flex;
    flex-direction: column;
    gap: 20px;
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid #444;
}

.shop-action {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.shop-action span {
    font-size: 0.9em;
    color: #ddd;
}

#lives-modal-actions .shop-action .action-button {
    /* Empêche le texte et l'icône de passer à la ligne */
    white-space: nowrap;
    display: inline-flex; /* Assure un bon alignement vertical */
    align-items: center;
    justify-content: center; /* Centre le contenu */
}

/* On cible spécifiquement le bouton d'augmentation des vies max */
#lives-modal-actions .action-button[onclick="buyMaxLivesPack()"] {
    font-size: 0.9em; /* Police légèrement plus petite */
    padding: 8px 12px; /* Bouton un peu moins haut et large */
}

/* ============================================================================
// ==   NOUVEAU : Modale des Missions Quotidiennes
// ============================================================================ */

#daily-missions-modal {
    position: fixed;
    z-index: 3700;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#daily-missions-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 500px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
    gap: 15px;
}

#daily-missions-content h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
}

#daily-missions-content p {
    text-align: center;
    font-size: 0.9em;
    color: var(--color-text-secondary);
    margin-top: 0;
}

#daily-missions-list {
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.mission-item {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 6px;
    padding: 12px;
    display: flex;
    align-items: center;
    gap: 15px;
}

.mission-item.completed {
    border-left: 4px solid #28a745;
}

.mission-icon {
    font-size: 1.8em;
}

.mission-details {
    flex-grow: 1;
}

.mission-details .mission-name {
    font-weight: bold;
    margin: 0;
}

.mission-progress-bar-bg {
    height: 8px;
    background-color: #222;
    border-radius: 4px;
    margin-top: 5px;
}

.mission-progress-bar-fill {
    height: 100%;
    background-color: var(--color-accent-highlight);
    border-radius: 4px;
    transition: width 0.3s ease;
}

.mission-progress-text {
    font-size: 0.8em;
    font-weight: bold;
    color: var(--color-text-primary);
}

#daily-missions-reward-section {
    margin-top: 10px;
    padding-top: 15px;
    border-top: 1px solid var(--color-border);
    text-align: center;
}

#daily-missions-reward-section h4 {
    margin: 0 0 5px 0;
}

#daily-missions-reward-value {
    font-size: 1.2em;
    font-weight: bold;
    color: var(--color-accent-highlight);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
}

.daily-missions-footer {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-top: 10px;
}

/* ============================================================================
// ==   NOUVEAU : Style pour la Modale de Guilde
// ============================================================================ */

#social-screen {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 15px;
    overflow-y: auto;
}

#guild-content {
    /* Le contenu prendra la largeur disponible, comme sur les autres écrans */
    max-width: 800px;
    margin: 0;
    background-color: transparent;
    padding: 0;
    border: none;
    box-shadow: none;
    min-height: 0;
    display: block; /* On repasse en affichage bloc standard */
}

#guild-content h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 20px;
}

/* Style pour la vue "Pas de guilde" */
#no-guild-view {
    text-align: center;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    flex-grow: 1; /* Prend tout l'espace disponible */
}

#no-guild-view p {
    margin-bottom: 25px;
    font-size: 1.1em;
    color: var(--color-text-secondary);
}

.guild-actions {
    display: flex;
    gap: 20px;
}

/* Style pour le formulaire de création */
#create-guild-form {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.form-group {
    display: flex;
    flex-direction: column;
}
.form-group label {
    margin-bottom: 5px;
    font-weight: bold;
    color: var(--color-text-secondary);
}
#guild-create-cost {
    text-align: center;
    font-weight: bold;
    color: var(--color-accent-highlight);
}

/* Style pour la vue "Ma Guilde" */
#my-guild-view {
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Prend tout l'espace */
}

.guild-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}
.guild-header h3 {
    margin: 0;
    font-size: 1.8em;
}
#guild-level-display {
    font-weight: bold;
    color: var(--color-accent-highlight);
}

.guild-stats p {
    margin: 5px 0;
}

.progress-bar-container {
    width: 100%;
    height: 12px;
    background-color: var(--color-bg);
    border-radius: 6px;
    border: 1px solid var(--color-border);
    overflow: hidden;
    margin-top: 8px;
}
.progress-bar-fill {
    height: 100%;
    background: linear-gradient(90deg, #c89100, #ffc107);
    border-radius: 5px;
    width: 0%; /* Sera mis à jour par JS */
}

.guild-main-actions {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
    gap: 15px;
    margin: 25px 0;
}

#guild-content .modal-close-button {
    margin-top: 20px; /* Assure que le bouton "Fermer" est bien en bas */
}

#my-guild-view .danger-btn {
    margin-top: auto; /* Pousse le bouton "Quitter" tout en bas */
}
/* ============================================================================
// ==   STYLE POUR LES NOUVEAUX ÉLÉMENTS DE GUILDE
// ============================================================================ */
.xp-details {
    text-align: right;
    font-size: 0.8em;
    color: #ccc;
    margin-top: 4px;
}

/* --- Modale de Contribution --- */
#guild-contribution-modal {
    position: fixed;
    z-index: 3800;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#guild-contribution-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 450px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    text-align: center;
}
#guild-contribution-content h2 {
    margin-top: 0;
    color: var(--color-accent-highlight);
}
#guild-contribution-charges {
    margin: 15px 0;
    padding: 10px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 6px;
}
#guild-contribution-charges-label {
    font-weight: bold;
    font-size: 1.1em;
}
#guild-contribution-charges small {
    display: block;
    color: var(--color-text-secondary);
    font-size: 0.8em;
}
#guild-contribution-buttons {
    display: flex;
    justify-content: center;
    gap: 15px;
    margin: 20px 0;
}
#guild-contribution-buttons .action-button {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 1.2em;
}
#guild-contribution-content .modal-close-button {
    margin-top: 15px;
}

/* --- Modale de la Liste des Membres --- */
#guild-members-modal {
    position: fixed;
    z-index: 3800;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}
#guild-members-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    padding: 20px;
    width: 95%;
    max-width: 600px;
    height: 90vh; /* Prend 90% de la hauteur de l'écran */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}
.guild-members-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}
.guild-members-header h2 {
    margin: 0;
    font-size: 1.5em;
    color: var(--color-accent-highlight);
}
#guild-members-list {
    flex-grow: 1; /* Prend tout l'espace vertical restant */
    overflow-y: auto; /* Active le scroll si nécessaire */
    padding-right: 10px;
}
.guild-rank-section h3 {
    margin-top: 0;
}
.guild-member-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 15px;
}
.guild-member-card {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 10px;
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    cursor: pointer;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.guild-member-card:hover {
    transform: translateY(-3px);
    box-shadow: 0 5px 10px rgba(0,0,0,0.3);
}

/* --- Modales d'actions sur les membres --- */
#member-action-modal, #rank-management-modal {
    position: fixed;
    z-index: 3900; /* Au-dessus de la modale des membres */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.85);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#member-action-modal-content, #rank-management-modal-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 400px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    text-align: center;
}

#member-action-modal-content h2, #rank-management-modal-content h2 {
    margin-top: 0;
    font-size: 1.3em;
}

.modal-actions-list {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin: 25px 0;
}

.modal-actions-list button {
    width: 100%;
}

#rank-options-container {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px;
}

#rank-options-container .rank-option-btn.selected {
    border: 2px solid var(--color-accent-highlight);
    box-shadow: 0 0 8px var(--color-accent-highlight);
}

.guild-member-card.leader-card {
    grid-column: 1 / -1; /* Prend toute la largeur */
    flex-direction: row;
    gap: 20px;
}
.guild-member-avatar {
    position: relative;
    width: 72px;
    height: 72px;
    flex-shrink: 0;
}
.leader-card .guild-member-avatar {
    width: 80px;
    height: 80px;
}
.guild-member-avatar .pfp {
    position: absolute;
    top: 10%; left: 10%;
    width: 80%; height: 80%;
    border-radius: 6px;
    object-fit: cover;
    object-position: top center;
    background-color: #111;
}
.guild-member-avatar .frame {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 160%; height: 160%;
    pointer-events: none;
}
.guild-member-info {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}
.leader-card .guild-member-info {
    align-items: flex-start;
}
.guild-member-info .name {
    font-weight: bold;
    font-size: 1.1em;
    padding-top: 10px;
}
.guild-member-info .stats {
    font-size: 0.85em;
    color: var(--color-text-secondary);
}
.guild-member-info .stats strong {
    color: var(--color-accent-highlight);
}
/* Accordéon pour les rangs */
.rank-accordion-header {
    background-color: #3a3a3a;
    border: 1px solid #555;
    padding: 10px 15px;
    border-radius: 6px;
    color: #f0f0f0;
    font-size: 1.1em;
    text-align: left;
    cursor: pointer;
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-top: 15px;
    width: 100%;
}
.rank-accordion-header .arrow {
    transition: transform 0.3s ease;
}
.rank-accordion-header.active .arrow {
    transform: rotate(180deg);
}
.rank-accordion-content {
    padding: 15px 5px 5px 5px;
    display: none;
}

/* ============================================================================
// ==   STYLE POUR LA RECHERCHE DE GUILDE
// ============================================================================ */

#find-guild-view .modal-close-button {
    margin-top: 20px;
    width: 100%;
}

.guild-search-bar {
    display: flex;
    gap: 10px;
    margin-bottom: 20px;
}

.guild-search-bar input {
    flex-grow: 1;
}

#guild-list-results {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-height: 400px;
    overflow-y: auto;
    padding-right: 10px;
}

.guild-list-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background-color: var(--color-panel);
    padding: 12px 15px;
    border-radius: 6px;
    border: 1px solid var(--color-border);
}

.guild-list-info {
    display: flex;
    flex-direction: column;
}

.guild-list-info strong {
    font-size: 1.1em;
}

.guild-list-info span {
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.guild-list-item .action-button {
    padding: 8px 15px;
    font-size: 0.9em;
    flex-shrink: 0;
}
#guild-management-modal {
    position: fixed;
    z-index: 3800;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#guild-management-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
}

#guild-management-content h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
}

#guild-permissions-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: 10px;
    background-color: var(--color-panel);
    padding: 15px;
    border-radius: 8px;
}

.permission-header {
    font-weight: bold;
    text-align: center;
    padding-bottom: 10px;
    border-bottom: 2px solid var(--color-border);
}

.permission-label {
    font-size: 0.8em;
    font-weight: bold;
    text-align: left;
    display: flex;
    align-items: center;
}

.permission-cell {
    display: flex;
    justify-content: center;
    align-items: center;
}

/* Style pour les cases à cocher personnalisées */
.permission-cell input[type="checkbox"] {
    display: none;
}
.permission-cell label {
    cursor: pointer;
    width: 22px;
    height: 22px;
    background-color: var(--color-bg);
    border: 2px solid var(--color-border);
    border-radius: 4px;
    position: relative;
    transition: all 0.2s ease;
}
.permission-cell label:hover {
    border-color: var(--color-border-hover);
}
.permission-cell input[type="checkbox"]:checked + label {
    background-color: #28a745;
    border-color: #1e7e34;
}
.permission-cell input[type="checkbox"]:checked + label::after {
    content: '✔';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-size: 16px;
    font-weight: bold;
}

#guild-logs-modal {
    position: fixed;
    z-index: 3800;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#guild-logs-modal-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    /* MON COMMENTAIRE : On limite la hauteur de la modale */
    max-height: 80vh;
    box-shadow: 0 5px 20px rgba(0, 0, 0, 0.6);
    /* MON COMMENTAIRE : On transforme le contenu en conteneur flexible vertical */
    display: flex;
    flex-direction: column;
}

#guild-logs-modal-content h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
    margin-bottom: 15px;
}

#guild-logs-list {
    /* MON COMMENTAIRE : La liste prend maintenant tout l'espace vertical disponible */
    flex-grow: 1; 
    /* MON COMMENTAIRE : On active le défilement vertical si le contenu dépasse */
    overflow-y: auto; 
    padding-right: 10px; /* Espace pour la barre de défilement */
    margin-right: -10px; /* Compense le padding pour l'alignement */
}
.guild-log-item p {
    margin: 0;
}

/* Style pour chaque entrée du journal */
.guild-log-item {
    background-color: var(--color-panel);
    padding: 10px;
    border-radius: 4px;
    margin-bottom: 8px;
    border-left: 3px solid var(--color-border-hover);
}

.log-timestamp {
    display: block;
    font-size: 0.8em;
    color: var(--color-text-secondary);
    margin-bottom: 4px;
}

#guild-logs-content .modal-close-button {
    margin-top: 20px;
    flex-shrink: 0; /* Empêche le bouton de rétrécir */
}
#guild-logs-modal {
    z-index: 3900;
}

/* ============================================================================
// ==   REFONTE DE L'INTERFACE SOCIAL & CHAT (Mise à jour)
// ============================================================================ */

/* Conteneur principal du chat (inchangé) */
#chat-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

#chat-content-panes {
    flex-grow: 1;
    position: relative;
    min-height: 0;
}

.chat-header h2 {
    margin: 0 0 15px 0;
    text-align: center;
}

.chat-tabs {
    display: flex;
    gap: 5px;
    border-bottom: 2px solid var(--color-border);
}

.chat-tab-button {
    flex: 1;
    padding: 10px 15px;
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1em;
    font-weight: bold;
}

.chat-tab-button.active {
    background-color: var(--color-surface);
    color: var(--color-accent-highlight);
    border-bottom-color: var(--color-surface);
    transform: translateY(2px);
}

.chat-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: none;
    flex-direction: column;
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-top: none;
    border-radius: 0 0 8px 8px;
}

.chat-pane.active {
    display: flex;
}

.chat-messages {
    flex-grow: 1;
    overflow-y: auto;
    padding: 15px;
    display: flex;
    flex-direction: column;
    gap: 5px; /* Espace réduit pour un flux plus naturel */
}

/* NOUVEAU : Style pour les messages système (timestamps, logs) */
.chat-system-message {
    text-align: center;
    color: var(--color-text-secondary);
    font-size: 0.8em;
    font-style: italic;
    margin: 12px 0;
    width: 100%;
}

/* NOUVEAU : Couleurs spécifiques pour les logs de guilde */
.log-join { color: #28a745 !important; font-weight: bold; }
.log-leave { color: #dc3545 !important; font-weight: bold; }
.log-promote { color: #ffc107 !important; font-weight: bold; }
.log-demote { color: #888 !important; }

/* Structure d'un message de joueur */
.chat-message {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    max-width: 85%;
    margin-top: 10px; /* Espace entre les messages de joueurs */
}

/* Conteneur pour l'avatar et le cadre */
.message-avatar-container {
    position: relative;
    width: 40px; /* Taille réduite comme demandé */
    height: 40px;
    flex-shrink: 0;
    cursor: pointer;
}
.message-avatar-container .pfp {
    position: absolute;
    top: 12.5%; left: 12.5%;
    width: 75%; height: 75%;
    border-radius: 4px;
    object-fit: cover;
    background-color: #111;
}
.message-avatar-container .frame {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    width: 150%; height: 150%;
    pointer-events: none;
}

/* NOUVEAU : Conteneur pour le nom + la bulle de message */
.message-details {
    display: flex;
    flex-direction: column;
}

/* Nom du joueur, maintenant à l'extérieur de la bulle */
.sender-info {
    font-size: 0.9em;
    font-weight: bold;
    margin-bottom: 4px;
    padding: 0 5px;
}
.sender-info strong {
    font-weight: bold;
}

/* Bulle de message, ne contient que le texte du message */
.message-content {
    padding: 8px 12px;
    border-radius: 12px;
    word-break: break-word;
}
.message-content p {
    margin: 0;
    font-size: 1em;
    line-height: 1.5;
}

/* Style pour les messages des AUTRES (gauche) */
.chat-message.other {
    align-self: flex-start;
}
.chat-message.other .sender-info {
    color: #00aaff;
}
.chat-message.other .message-content {
    background-color: var(--color-panel);
    border-top-left-radius: 4px; /* Coin pointu vers l'avatar */
}

/* Style pour VOS messages (droite) */
.chat-message.mine {
    align-self: flex-end;
    flex-direction: row-reverse; /* Avatar à droite */
}
.chat-message.mine .message-details {
    align-items: flex-end; /* Aligne le nom et la bulle à droite */
}
.chat-message.mine .sender-info {
    color: #f0f0f0;
}
.chat-message.mine .message-content {
    background-color: #28a745;
    border-top-right-radius: 4px; /* Coin pointu vers l'avatar */
}
.chat-message.mine .message-content p {
    color: #fff;
}

/* Zone de saisie (inchangée) */
.chat-input-area {
    display: flex;
    padding: 10px;
    border-top: 1px solid var(--color-border);
    gap: 10px;
}
.chat-input-area input {
    flex-grow: 1;
    margin: 0;
}
.chat-input-area button {
    padding: 0 20px;
    flex-shrink: 0;
}

/* ============================================================================
// ==   STYLE POUR LA BOUTIQUE DE GUILDE
// ============================================================================ */

#guild-shop-modal {
    position: fixed;
    z-index: 3800;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#guild-shop-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 95%;
    max-width: 700px;
    height: 90vh; /* MON COMMENTAIRE : Je change max-height en height pour forcer la hauteur */
    max-height: 700px; /* MON COMMENTAIRE : J'ajoute une hauteur maximale pour les très grands écrans */
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}

#guild-shop-currency-display {
    text-align: right;
    font-weight: bold;
    color: var(--color-text-primary);
    margin-bottom: 10px;
    padding: 8px;
    background-color: rgba(0,0,0,0.2);
    border-radius: 6px;
}

.guild-shop-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 20px;
}

.guild-shop-tab-button {
    flex: 1;
    padding: 10px 15px;
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-bottom: none;
    border-radius: 6px 6px 0 0;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
}

.guild-shop-tab-button.active {
    background-color: var(--color-surface);
    color: var(--color-accent-highlight);
    border-bottom-color: var(--color-surface);
    transform: translateY(2px);
}

#guild-shop-panes {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 15px;
}

.guild-shop-pane {
    display: none;
}

.guild-shop-pane.active {
    display: block;
}

.shop-item-grid {
    display: grid;
    grid-template-columns: 1fr; /* Une seule colonne par défaut */
    gap: 15px;
}

.shop-item-card {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.shop-item-card.locked {
    opacity: 0.5;
    filter: grayscale(1);
}

.shop-item-icon {
    font-size: 2em;
    width: 40px;
    height: 40px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: rgba(0,0,0,0.3);
    border-radius: 5px;
}
.shop-item-icon.shop-item-frame {
    width: 64px;
    height: 64px;
    padding: 2px;
}

.shop-item-icon.shop-item-frame img {
    width: 64px;
    height: 64px;
    padding: 2px;
}

.shop-item-details {
    flex-grow: 1;
    min-width: 0; /* MON COMMENTAIRE : C'est la correction magique qui force le texte à aller à la ligne dans un conteneur flex */
}

.shop-item-details h4 {
    margin: 0 0 5px 0;
    color: var(--color-text-primary);
}
.shop-item-details p {
    margin: 0;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}
.shop-item-details .item-duration {
    font-style: italic;
    font-size: 0.85em;
}

.shop-item-action {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 5px;
}

.shop-item-action .action-button {
    padding: 8px 16px;
}

.shop-item-cost {
    font-weight: bold;
    color: var(--color-accent-highlight);
    display: flex;
    align-items: center;
    gap: 5px;
}

#guild-shop-content .modal-close-button {
    margin-top: 20px;
}

#guild-boss-inactive-view, #guild-boss-active-view {
    text-align: center;
}

#guild-boss-inactive-view p {
    color: var(--color-text-secondary);
    font-style: italic;
    margin: 30px 0;
}

.boss-header {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    margin-bottom: 15px;
}

.boss-header h2 {
    margin: 0;
    color: #dc3545; /* Rouge pour le nom du boss */
}

#guild-boss-timer {
    font-weight: bold;
    color: var(--color-accent-highlight);
}

.boss-hp-bar {
    width: 100%;
    height: 25px;
    background-color: #222;
    border: 1px solid #000;
    border-radius: 12px;
    position: relative;
    box-shadow: inset 0 2px 4px rgba(0,0,0,0.5);
}

#guild-boss-hp-fill {
    height: 100%;
    background: linear-gradient(90deg, #a71d1d, #f85032);
    border-radius: 10px;
    transition: width 0.5s ease-in-out;
}

#guild-boss-hp-text {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: white;
    font-weight: bold;
    text-shadow: 1px 1px 2px #000;
}

#guild-boss-total-damage {
    margin-top: 5px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

.player-boss-status {
    background-color: rgba(0,0,0,0.2);
    border-radius: 6px;
    padding: 10px;
    margin: 20px 0;
    display: flex;
    justify-content: space-around;
}

.player-boss-status p {
    margin: 0;
    font-size: 1em;
}

#attack-guild-boss-btn {
    width: 100%;
    padding: 12px;
    font-size: 1.2em;
}

.boss-leaderboard {
    margin-top: 25px;
}

.boss-leaderboard h3 {
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 10px;
}

#boss-leaderboard-list {
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 200px;
    overflow-y: auto;
}

.leaderboard-entry {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background-color: var(--color-panel);
    padding: 8px 12px;
    border-radius: 4px;
}

.leaderboard-entry .rank {
    font-weight: bold;
    min-width: 30px;
}

.leaderboard-entry .name {
    flex-grow: 1;
}

.leaderboard-entry .damage {
    font-weight: bold;
    color: #ffc107;
}

#guild-permissions-wrapper {
    overflow-x: auto; /* Active le scroll horizontal si nécessaire */
    padding-bottom: 10px; /* Laisse un peu d'espace pour la barre de scroll */
}

#guild-permissions-grid {
    display: grid;
    /* MON COMMENTAIRE : J'ai ajusté les colonnes pour qu'elles soient un peu plus flexibles.
       La première colonne (labels) est un peu moins large et les autres prennent le reste.
       J'ai surtout retiré le "min-width: 500px;" qui forçait le débordement. */
    grid-template-columns: 1.5fr repeat(3, 1fr);
    gap: 10px;
    background-color: var(--color-panel);
    padding: 15px;
    border-radius: 8px;
}

.permission-header.rank-R0,
.permission-cell.rank-R0 {
    display: none;
}

/* ============================================================================
// ==   NOUVEAU : Style pour la Modale de Sélection du Boss de Guilde (Mobile-Friendly)
// ============================================================================ */

#guild-boss-selection-modal {
    position: fixed;
    z-index: 3850; /* Légèrement au-dessus des autres modales de guilde */
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#guild-boss-selection-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 500px; /* Un peu moins large pour un meilleur affichage mobile */
    max-height: 80vh;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}

#guild-boss-selection-content h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
}

#guild-boss-list-container {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    margin: 15px 0;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

/* On transforme la carte en grille pour un contrôle total de la mise en page */
.guild-boss-card {
    background-color: var(--color-panel);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 15px;
    display: grid; /* On utilise Grid Layout */
    grid-template-columns: 1fr; /* Une seule colonne */
    grid-template-areas:  /* On nomme nos zones pour plus de clarté */
        "sprite"
        "header"
        "stats"
        "description"
        "action";
    gap: 12px; /* Espace entre chaque zone */
    text-align: center;
}

.guild-boss-card.locked {
    opacity: 0.6;
    filter: grayscale(1);
}

/* Zone pour le sprite du boss */
.boss-card-sprite {
    grid-area: sprite; /* On assigne cette div à la zone "sprite" */
    width: 100px;
    height: 100px;
    margin: 0 auto; /* On centre l'image horizontalement */
    background-color: #1a1a1a;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.boss-card-sprite img {
    max-width: 90%;
    max-height: 90%;
    object-fit: contain;
}

/* Zone pour le nom du boss */
.boss-card-header {
    grid-area: header;
}

.boss-card-header h4 {
    margin: 0;
    font-size: 1.3em;
}

/* NOUVEAU : Conteneur pour les statistiques (PV, Force, etc.) */
.boss-card-stats {
    grid-area: stats;
    display: flex;
    justify-content: center;
    gap: 20px;
    font-size: 0.9em;
    color: var(--color-text-secondary);
}

/* Zone pour la description */
.boss-card-description {
    grid-area: description;
    font-size: 0.9em;
    font-style: italic;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Zone pour le bouton */
.boss-card-action {
    grid-area: action;
}

.boss-card-action .action-button {
    width: 100%; /* Le bouton prend toute la largeur pour être facile à presser */
    padding: 10px 16px;
}

/* ============================================================================
// ==   NOUVEAU : Style pour la Modale des Récompenses de Boss
// ============================================================================ */

#guild-boss-rewards-modal {
    position: fixed;
    z-index: 3850;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#guild-boss-rewards-content {
    background-color: var(--color-surface);
    padding: 25px;
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 90%;
    max-width: 600px;
    max-height: 80vh;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    flex-direction: column;
}

#guild-boss-rewards-content h2 {
    margin-top: 0;
    text-align: center;
    color: var(--color-accent-highlight);
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 15px;
}

.rewards-tabs {
    display: flex;
    border-bottom: 2px solid var(--color-border);
    margin-bottom: 15px;
}

.rewards-tab-button {
    flex: 1;
    padding: 10px 15px;
    background-color: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    color: var(--color-text-secondary);
    cursor: pointer;
    font-size: 1.1em;
    font-weight: bold;
    transition: all 0.2s;
}

.rewards-tab-button.active {
    color: var(--color-accent-highlight);
    border-bottom-color: var(--color-accent-highlight);
}

#guild-boss-rewards-list {
    flex-grow: 1;
    overflow-y: auto;
    padding-right: 10px;
    display: flex;
    flex-direction: column;
    gap: 15px;
}

.boss-reward-card {
    background-color: var(--color-panel);
    border-radius: 8px;
    padding: 15px;
    border-left: 4px solid var(--color-accent-secondary);
}

.boss-reward-card h4 {
    margin: 0 0 10px 0;
    border-bottom: 1px solid var(--color-border);
    padding-bottom: 8px;
}

.reward-description {
    font-size: 0.9em;
    color: #ccc;
    margin-bottom: 10px;
    font-style: italic;
}

.reward-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-weight: bold;
    font-size: 1.05em;
    margin-bottom: 5px;
}

.ranking-reward-tier {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 8px 0;
    border-bottom: 1px dashed var(--color-border);
}
.ranking-reward-tier:last-child {
    border-bottom: none;
}
.ranking-reward-tier .rank-label {
    font-weight: bold;
    font-size: 1.1em;
}

/* ============================================================================
// ==   NOUVEAU : Système de Messagerie (Mail)
// ============================================================================ */

/* Badge de notification pour le menu */
#mail-menu-item .notification-badge {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #ffc107;
    border-radius: 50%;
    margin-left: 8px;
    box-shadow: 0 0 8px #ffc107;
}
#mail-menu-item .notification-badge.hidden {
    display: none;
}

/* Modale principale de la messagerie */
#mail-modal {
    position: fixed;
    z-index: 3750;
    left: 0; top: 0;
    width: 100%; height: 100%;
    background-color: rgba(0, 0, 0, 0.8);
    backdrop-filter: blur(5px);
    display: flex;
    align-items: center;
    justify-content: center;
}

#mail-content {
    background-color: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 10px;
    width: 95%;
    max-width: 800px;
    height: 80vh;
    box-shadow: 0 5px 20px rgba(0,0,0,0.6);
    display: flex;
    overflow: hidden; /* Important pour le switch entre les panneaux */
    position: relative; /* Ajouté pour positionner le bouton */
    padding: 0; /* On retire l'ancien padding */
}

#mail-content .modal-close-button {
    position: absolute; /* On le sort du flux */
    bottom: 15px;       /* On le place en bas */
    left: 20px;         /* Avec une marge à gauche */
    right: 20px;        /* Et à droite */
    width: auto;        /* La largeur s'ajuste automatiquement */
    margin-top: 0;      /* On retire l'ancienne marge */
}

/* On ajoute un padding en bas des panneaux pour que le bouton ne les recouvre pas */
#mail-list-pane, #mail-detail-pane {
    padding-bottom: 70px; /* Espace pour le bouton "Fermer" */
}

/* Panneau de la liste des messages */
#mail-list-pane {
    width: 100%;
    display: flex;
    flex-direction: column;
    transition: transform 0.3s ease-in-out;
}
#mail-list-pane.hidden {
    transform: translateX(-100%);
}

.mail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 15px 20px;
    border-bottom: 1px solid var(--color-border);
    flex-shrink: 0;
}
.mail-header h2, .mail-header h3 {
    margin: 0;
    color: var(--color-accent-highlight);
}
#mail-delete-read-btn, #mail-back-btn {
    margin: 0;
    padding: 6px 12px;
}

#mail-list {
    flex-grow: 1;
    overflow-y: auto;
    padding: 10px;
}
.mail-item {
    display: flex;
    align-items: center;
    gap: 15px;
    padding: 12px;
    background-color: var(--color-panel);
    border-left: 4px solid transparent;
    border-radius: 4px;
    margin-bottom: 8px;
    cursor: pointer;
    transition: background-color 0.2s;
}
.mail-item:hover {
    background-color: #4a4a4a;
}
.mail-item.unread {
    border-left-color: var(--color-accent-highlight);
    font-weight: bold;
}
.mail-icon {
    font-size: 1.5em;
    color: var(--color-text-secondary);
}
.mail-summary {
    flex-grow: 1;
}
.mail-summary .sender {
    font-size: 1.1em;
}
.mail-summary .title {
    font-size: 0.9em;
    color: var(--color-text-secondary);
    font-weight: normal;
}
.mail-timestamp {
    font-size: 0.8em;
    color: var(--color-text-secondary);
    font-weight: normal;
    flex-shrink: 0;
}

/* Panneau de détail d'un message */
#mail-detail-pane {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: var(--color-surface);
    display: flex;
    flex-direction: column;
    transform: translateX(100%);
    transition: transform 0.3s ease-in-out;
}
#mail-detail-pane:not(.hidden) {
    transform: translateX(0);
}

#mail-detail-body {
    flex-grow: 1;
    overflow-y: auto;
    padding: 20px;
    line-height: 1.6;
}
#mail-detail-text {
    white-space: pre-wrap; /* Respecte les sauts de ligne du message */
    margin-bottom: 25px;
}

#mail-attachments-section {
    margin-top: 20px;
    padding-top: 20px;
    border-top: 1px solid var(--color-border);
}
#mail-attachments-list {
    display: flex;
    flex-wrap: wrap;
    gap: 15px;
    margin-bottom: 20px;
}
.attachment-item {
    display: flex;
    align-items: center;
    gap: 8px;
    background-color: var(--color-panel);
    padding: 5px 10px;
    border-radius: 5px;
    font-weight: bold;
}
#mail-claim-btn {
    width: 100%;
}
#mail-claim-btn:disabled {
    background: var(--color-accent-success);
}

/* ============================================================================
// ==   SYSTÈME DE BADGE DE NOTIFICATION (avec <span>)
// ============================================================================ */

/* On rend les éléments parents capables de positionner un badge */
#hamburger-button,
#main-menu-list li,
.succes-category-button {
    position: relative;
}

/* Style de base du badge de notification */
.notification-badge {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffc107;
    border-radius: 50%;
    box-shadow: 0 0 8px #ffc107;
}

/* Masque le badge quand il a la classe 'hidden' */
.notification-badge.hidden {
    display: none;
}

/* Positionnement spécifique pour le bouton hamburger */
#hamburger-button .notification-badge {
    top: 5px;
    right: 5px;
    border: 2px solid var(--color-bg);
}

/* Positionnement pour les items dans le menu déroulant */
#main-menu-list li .notification-badge {
    top: 50%;
    transform: translateY(-50%);
    right: 15px;
    border: 2px solid #1e1e1e; /* Couleur de fond du menu */
}

/* Positionnement pour les boutons de catégorie de succès */
.succes-category-button .notification-badge {
    top: 6px;
    right: 8px;
    border: 2px solid #333; /* Couleur de fond des boutons */
}