/* ==========================================================================
   A. STYLES GÉNÉRAUX 
   ========================================================================== */
body {
    background-color: #0a111a;
    color: #f0f0f0;
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 10px;
}
a {
    text-decoration: none;
    margin-bottom: 10px;
    color: #ffcc00;
    font-weight: bold; 
}

/* ==========================================================================
   B.HEADER STRUCTURE       
   ========================================================================== */

header {
    padding: 10px;
    background: rgba(0,0,0,0.5);
    border-bottom: 1px solid #332211;
}

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

.header-title {
    margin: 0;
    font-size: 24px;
}

/* ==========================================================================
   C. NAVIGATION                
   ========================================================================== */

.main-nav {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-top: 10px;
    margin-bottom: 5px;
}

.nav-link {
    text-decoration: none;
}

/* ==========================================================================
   D. AUTH STATUS              
   ========================================================================== */

/* Conteneur global de l'alignement à droite */
.auth-status-right {
    font-size: 14px;
    text-align: right;
}
/* Conteneur global de l'alignement centré */
.auth-status {
    font-size: 14px;
}

.auth-gm {
    color: #00ffcc;
}

.auth-user {
    color: #ffcc00;
}

.auth-guest {
    color: #ff4444;
}


/* Zone des boutons sous le nom d'utilisateur */
.auth-options-group {
    display: flex;
    gap: 5px;
    margin-top: 5px;
    justify-content: flex-end;
}

/* Style de base des boutons d'options */
.auth-opt-btn {
    text-decoration: none;
    font-size: 11px;
    padding: 2px 6px;
    border-radius: 3px;
    transition: all 0.2s ease;
}

/* Bouton spécifique pour le changement de mot de passe */
.auth-opt-btn.btn-password {
    color: #bca88f;
    background: rgba(90, 62, 43, 0.5);
    border: 1px solid #5a3e2b;
}

.auth-opt-btn.btn-password:hover {
    background: rgba(90, 62, 43, 0.8);
    color: #fff;
}

/* Boutons réservés pour les options futures (Dashed / Grisés) */
.auth-opt-btn.btn-future {
    color: rgba(255, 255, 255, 0.2);
    background: rgba(0, 0, 0, 0.3);
    border: 1px dashed rgba(255, 255, 255, 0.1);
    cursor: not-allowed;
}

/* Bouton de déconnexion */
.auth-opt-btn.btn-logout {
    color: #ff4444;
    background: rgba(255, 0, 0, 0.1);
    border: 1px solid rgba(255, 0, 0, 0.2);
    margin-left: 5px;
}

.auth-opt-btn.btn-logout:hover {
    background: rgba(255, 0, 0, 0.2);
    color: #ff6666;
}

/* Style spécial pour l'onglet Admin inséré dans la navigation principale */
.nav-btn.btn-admin-panel {
    border-color: #00ffcc;
    color: #00ffcc;
}

.nav-btn.btn-admin-panel:hover {
    background: rgba(0, 255, 204, 0.1);
}

/* ==========================================================================
 E.   ZONE ADMIN 
   ========================================================================== */
.admin-box { max-width: 1600px; margin: 30px auto; color: #dfd5c6; font-family: sans-serif; }
.admin-box h2, .admin-box h3 { color: #fff; border-bottom: 2px solid #5a3e2b; padding-bottom: 5px; }

/* Tableau */
.admin-table { max-width: 100%; border-collapse: collapse; margin-bottom: 5px; margin-right: 40px; }
.admin-table th, .admin-table td { padding: 2px; text-wrap: nowrap; border: 1px solid #5a3e2b; }
.admin-table th { background: rgba(0,0,0,0.4); color: #00ffcc; }

/* Badges */
.badge { padding: 2px 6px; border-radius: 3px; font-size: 11px; font-weight: bold; }
.badge.admin { background: #c0392b; }
.badge.moderator { background: #d35400; }
.badge.user { background: #27ae60; }

/* Formulaires */
.forms-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 20px; 
}

.form-block { 
    flex: 1; 
    min-width: 280px; 
    background: rgba(0,0,0,0.2); 
    padding: 15px; 
    border: 1px solid #332211;
}

.form-block input, .form-block select { 
    display: block; 
    width: 100%; 
    max-width: 340px;            /* 📐 Évite que le champ ne s'étire à l'infini */
    padding: 8px 12px; 
    margin: 5px 0 12px 0; 
    box-sizing: border-box; 
    font-size: 14px;
    font-weight: 500;
    border-radius: 3px;
    background-color: #dfd5c6; 
    color: #0b2f3d; 
    border: 1px solid #5a3e2b; 
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3);
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.form-block input:focus, .form-block select:focus {
    outline: none;
    border-color: #00ffcc;
    box-shadow: inset 0 2px 4px rgba(0, 0, 0, 0.3), 0 0 5px rgba(0, 255, 204, 0.5);
}

.form-block input::placeholder {
    color: rgba(11, 47, 61, 0.6);
    font-style: italic;
}

/* BOUTONS : Alignement en ligne plutôt que sur toute la largeur */
.form-block .nav-btn {
    display: inline-flex;       /* 🛠️ Aligne les boutons côte à côte au lieu de les empiler */
    margin-right: 8px;          /* Espace entre les deux boutons d'action */
    margin-bottom: 5px;
    box-sizing: border-box;
}

/* Variantes de couleurs pour les actions */
.form-block .nav-btn.btn-update {
    border-color: #3498db;
    color: #3498db;
}

.form-block .nav-btn.btn-delete {
    border-color: #ff4444;
    color: #ff4444;
}

/* Messages */
.admin-message { padding: 10px; background: rgba(39, 174, 96, 0.2); border-left: 4px solid #2ecc71; margin-bottom: 15px; }





/* ==========================================================================
   F. LOGIN OVERLAY              
   ========================================================================== */

.login-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0,0,0,0.8);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
}

.login-box {
    background: #1a110a;
    padding: 20px;
    border: 2px solid #5a3e2b;
    border-radius: 8px;
    text-align: center;
    position: relative;
}

.login-close {
    position: absolute;
    top: 5px;
    right: 10px;
    color: #aaa;
    text-decoration: none;
    font-weight: bold;
}

.login-input {
    margin-bottom: 10px;
    padding: 5px;
}

.login-submit {
    cursor: pointer;
    padding: 5px 15px;
}







/* ==========================================================================
   G. STYLES TEXTES  ???? PRECISER
   ========================================================================== */

.main-title {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    font-weight: 700; /* Style très gras / Bold */
    font-size: 1.6em;
    color: #ffcf84;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8), 
                 0px 4px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 2px 2px 2px #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}


/* ==========================================================================
   H. COMMONS STYLES - STYLES DANS TOUTES LES PAGES  ( A FILTRER ET TRIER)
   ========================================================================== */

/* Style général des boutons de navigation */
.nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;         /* Indispensable pour l'alignement des hauteurs */
    font-family: inherit;           /* Force la même police */
    
    /* 🛠️ AJUSTEMENTS D'ALIGNEMENT ET DE SIZING STRICT */
    line-height: normal;            /* Repasse en normal pour stabiliser la boîte de texte */
    height: 34px;                   /* 🛠️ Fixe une hauteur identique absolue basée sur ton <a> actuel */
    margin: 0;                      /* 🛠️ Supprime les marges invisibles natives des boutons */
    
    background-color: #0b2f3d;      /* Fond bleu-vert caractéristique du jeu */
    color: #dfd5c6;                 /* Couleur de texte cuivrée/claire */
    border: 1px solid #14495e;      /* Bordure fine un peu plus claire */
    padding: 0 14px;                /* 🛠️ On retire le padding vertical (géré par height) et on garde l'horizontal */
    font-size: 14px;
    font-weight: bold;
    text-decoration: none;          /* Retire le soulignement des liens */
    border-radius: 1px;
    cursor: pointer;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Effet au survol de la souris */
.nav-btn:hover {
    background-color: #14495e;     /* Éclaircissement du fond au survol */
    color: #fff;                   /* Texte qui passe au blanc lumineux */
    border-color: #00ffcc;         /* Bordure turquoise flashy */
}

/* Style pour l'onglet actuellement actif/sélectionné */
.nav-btn.active {
    background-color: #124c63;     /* Teinte active distincte */
    color: #ffffff;
    border-color: #00ffcc;         /* Bordure active assortie */
    box-shadow: inset 0 0 5px rgba(0, 255, 204, 0.3); /* Léger halo interne */
}


.tip-comment {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    /*background: #0b2f3d;   /* Fond bleu de base */
    color: #ffcf84;        /* Couleur de texte dorée/crème proche du jeu */
    padding: 6px 14px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    /*transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;*/
}

.tip-info {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    color: #b4e9f6;        /* Couleur de texte jaune/crème proche du jeu */
    padding: 6px 14px;
    font-weight: bold;
    font-size: 13px;
}

.text-area-linear-gradient-bg {
    background: linear-gradient(135deg, #0b2f3d 0%, #0a111a 100%);
    border: 1px solid #2b3e5a;
    border-radius: 8px;
    padding: 30px;
    /*text-align: center;*/
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
   
}

.text-area-border-radius-solid-bg {
    background: #0a0d0f;
    border: 1px solid #3b4e5c;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.grid-auto-layout {
    display: grid;
    /* Adapte le nombre de colonnes automatiquement */
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: 20px;
    width: 100%;
    /* Empêche le débordement horizontal */
    box-sizing: border-box; 
}



/* ==========================================================================
   I. LOGIN - STYLE DE LA ZONE DE CONNEXION
   ========================================================================== */
.login-overlay {
    height: 100vh;
    display: flex;
    justify-content: center;
    align-items: center;
    background: #1a110a;
}

.login-form-compact {
    background: #2a1a12;
    padding: 30px;
    border: 2px solid #5a3e2b;
    border-radius: 12px;
    text-align: center;
    box-shadow: 0 0 20px rgba(0,0,0,0.5);
}

.login-form-compact input {
    display: block;
    width: 200px;
    margin: 10px auto;
    padding: 8px;
    background: #1a110a;
    border: 1px solid #5a3e2b;
    color: white;
    border-radius: 4px;
}

.login-form-compact button {
    background: #ffcc00;
    color: #2a1a12;
    border: none;
    padding: 10px 20px;
    font-weight: bold;
    border-radius: 4px;
    cursor: pointer;
}


/* ==========================================================================
   J. FORUM - STYLE DE LA ZONE 
   ========================================================================== */


/* Force les images postées à ne jamais dépasser la largeur du message */
.forum-message img {
    max-width: 100%;
    height: auto;
    border-radius: 4px; /* Optionnel, juste pour le style propre */
}


/* Style pour le badge de nouveauté */
.badge-new {
    display: inline-block;
    width: 10px;
    height: 10px;
    background-color: #2ecc71;
    border-radius: 50%;
    box-shadow: 0 0 8px #2ecc71;
    flex-shrink: 0;
    margin-left: 8px; /* Un petit espace pour ne pas coller au texte */
    vertical-align: middle;
}

.badge-new-menu {
            position: absolute;
            top: 2px;
            right: 5px;
            width: 8px;
            height: 8px;
            background-color: #2ecc71;
            border-radius: 50%;
            box-shadow: 0 0 6px #2ecc71;
            pointer-events: none; /* Évite de bloquer le clic sur le lien en dessous */
        }


.post-content {
    white-space: pre-wrap;      /* Gère les retours à la ligne \n */
    word-wrap: break-word;      /* Coupe les mots longs */
    word-break: break-word;     /* Alternative pour les navigateurs récents */
    overflow-wrap: break-word;  /* Standard moderne */
}

/* ==========================================================================
   ANNONCES - 
   ========================================================================== */

.announce-card {
    background: linear-gradient(135deg, #0b2f3d 0%, #0a111a 100%);/* dégradé bleu alpha 0-100 */
    color: #e2e8f0;
    padding: 20px;
    border-radius: 8px;
    border-left: 5px solid #00ccff; /* Ligne jaune d'alerte sur le côté */
    margin-bottom: 20px;
}

.announce-title {
  color: #fff;
  font-size: 28px;
  margin-top: 0;
  text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.announce-steps li {
    margin-bottom: 10px;
    line-height: 1.5;
}

.highlight-alert {
    color: #ff4a4a;
    font-weight: bold;
}

.guild-name {
    color: #00adb5;
    font-size: 1.1em;
}

.announce-warning {
    background-color: rgba(74, 255, 255, 0.1);
    border: 1px solid #ff4a4a;
    padding: 15px;
    border-radius: 6px;
    margin-top: 20px;
}


/* ==========================================================================
   INTERFACES SOMBRES POUR LE SYSTÈME QUILL (GLOBAL)
   ========================================================================== */

/* 1. La barre d'outils (Toolbar) */
.ql-toolbar.ql-snow {
    background: #111a22 !important;
    border: 1px solid #1a2936 !important;
    border-top-left-radius: 6px;
    border-top-right-radius: 6px;
}

/* Couleur de base des icônes (traits et remplissages) */
.ql-snow .ql-stroke {
    stroke: #dfd5c6 !important;
}
.ql-snow .ql-fill {
    fill: #dfd5c6 !important;
}
.ql-snow .ql-picker {
    color: #dfd5c6 !important;
}

/* Effet Hover et boutons Actifs (Utilisation de ton Cyan #00ffcc) */
.ql-snow button:hover .ql-stroke,
.ql-snow button.ql-active .ql-stroke,
.ql-snow .ql-picker-label:hover,
.ql-snow .ql-picker.ql-expanded .ql-picker-label {
    stroke: #00ffcc !important;
    color: #00ffcc !important;
}
.ql-snow button:hover .ql-fill,
.ql-snow button.ql-active .ql-fill {
    fill: #00ffcc !important;
}

/* Ajustement des listes déroulantes (Headers, polices...) */
.ql-snow .ql-picker-options {
    background-color: #111a22 !important;
    border: 1px solid #1a2936 !important;
    box-shadow: 0 4px 12px rgba(0,0,0,0.5);
}

/* 2. La zone d'écriture (Editor Container) */
.ql-container.ql-snow {
    background: linear-gradient(135deg, #0b2f3d 0%, #0a111a 100%); !important;
    color: #dfd5c6 !important; /* Couleur de texte claire lisible */
    border: 1px solid #1a2936 !important;
    border-bottom-left-radius: 6px;
    border-bottom-right-radius: 6px;
    font-size: 15px;
}

/* Ajustement du focus sur l'éditeur */
.ql-container.ql-snow.ql-focus, 
.ql-toolbar.ql-snow + .ql-container.ql-snow {
    border-top: none !important; /* Évite la double bordure au milieu */
}

/* Liens hypertexte saisis dans l'éditeur */
.ql-editor a {
    color: #00ffcc !important;
    text-decoration: underline;
}




/* ==========================================================================
   CLEANUP HOME - EXTRACTION DES STYLES EN DUR
   ========================================================================== */

.home-container {
    max-width: 1000px;
    margin: 0 auto;
    color: #dfd5c6;
    font-family: sans-serif;
    line-height: 1.6;
}

.welcome-hero {
    background: linear-gradient(135deg, #0b2f3d 0%, #1a110a 100%);
    border: 1px solid #5a3e2b;
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    margin-bottom: 30px;
    box-shadow: 0 4px 15px rgba(0,0,0,0.6);
}

.welcome-hero h2 {
    color: #fff;
    font-size: 28px;
    margin-top: 0;
    text-shadow: 0 2px 4px rgba(0,0,0,0.8);
}

.welcome-hero p {
    font-size: 16px;
    color: #bca88f;
    max-width: 700px;
    margin: 0 auto 20px auto;
}

.welcome-hero .guest-box {
    background: rgba(0, 0, 0, 0.4);
    border: 1px dashed #14495e;
    padding: 15px;
    border-radius: 6px;
    display: inline-block;
    margin-top: 10px;
}

.welcome-hero .guest-box span {
    color: #ffcc00;
    font-weight: bold;
}

.welcome-hero .guest-box a {
    color: #00ffcc;
    font-weight: bold;
    text-decoration: none;
}

.welcome-hero .user-welcome {
    color: #00ffcc;
    font-weight: bold;
    font-size: 15px;
}

.home-title-separator {
    border-bottom: 2px solid #5a3e2b;
    padding-bottom: 8px;
    color: #fff;
    text-transform: uppercase;
    font-size: 18px;
    letter-spacing: 1px;
}

.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 20px;
    margin-top: 20px;
    margin-bottom: 30px;
}

.feature-card {
    background: #1a110a;
    border: 1px solid #5a3e2b;
    border-radius: 6px;
    padding: 20px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.4);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.feature-card.is-locked {
    opacity: 0.6;
    position: relative;
}

.feature-card h4 {
    color: #fff;
    font-size: 18px;
    margin-top: 0;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    gap: 10px;
}

.feature-card h4 span {
    color: #ffcc00;
}

.feature-card p {
    color: #bca88f;
    font-size: 14px;
    margin-bottom: 15px;
}

.feature-card .home-btn-alignment {
    display: inline-block;
    text-align: center;
    justify-content: center;
}

.feature-card .lock-badge {
    background: rgba(0,0,0,0.5);
    border: 1px solid #443224;
    color: #888;
    padding: 6px 14px;
    border-radius: 4px;
    font-size: 14px;
    text-align: center;
    font-weight: bold;
}




/* ==========================================================================
   1. STYLES CATALOGUE (view_catalog.php)
   ========================================================================== */
.grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, 80px);
    gap: 20px;
    max-width: 90%;
    margin: 40;
}

.item { width: 96px; text-align: center; }

.item-icon { 
    position: relative; 
    width: 96px; 
    height: 96px; 
    margin-bottom: 5px; 
}

.item-image { 
    position: absolute; 
    top: 4px; 
    left: 4px; 
    width: 84px; 
    height: 84px; 
    z-index: 1; 
}

.item-frame { 
    position: absolute; 
    top: 0; 
    left: 0; 
    width: 96px; 
    height: 96px; 
    z-index: 2; 
    pointer-events: none; 
}

.item-name { 
    font-size: 10px; 
    line-height: 1.1; 
    color: #aaa; 
    white-space: normal; 
    word-wrap: break-word; 
}

.pagination { 
    margin-top: 20px; 
    text-align: center; 
}

.pagination a { 
    margin: 4 4px; 
    text-decoration: none; 
    color: #ffcc00;
    font-weight: bold; 
}
/*===========================================
 1.1 INTEGRATION DU TOOLTIP DANS LE CATALOGUE
 ============================================*/
 
.catalog-tooltip-container {
    display: none; /* Masqué par défaut */
    position: absolute;
    z-index: 999;
    width: 320px !important;
    min-width: 320px !important;
    background: #121212;
    box-shadow: 0 10px 25px rgba(0,0,0,0.8);
    border-radius: 6px;
    pointer-events: none;
}

/* C'est cette classe qui donne le feu vert au script */
.catalog-tooltip-container.is-active {
    display: block !important;
}

/*/* Affiche le tooltip uniquement au survol de la boîte de l'item 
.item:hover .catalog-tooltip-container {
    display: block;*/
/*}*/

/* Optionnel : Si tes items sont tout en bas de la page ou sur les bords, 
   tu peux aussi forcer l'affichage sur le côté ou au-dessus pour éviter qu'il sorte de l'écran. */



/* ==========================================================================
   SET HEROES RANK 2. - STRUCTURE DES TUILES (index.php)
   ========================================================================== */
.heroes-container {
    display: grid !important;
    /* Crée autant de colonnes de 340px que l'écran peut en contenir en ligne */
    grid-template-columns: repeat(auto-fill, 340px) !important;
    gap: 20px !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    padding: 15px 0;
}

.hero-tile-ingame {
    width: 340px;
    box-sizing: border-box; /* Bloque la tuile à 340px max, padding inclus ! */
    background: #121a2a;
    border: 2px solid #203f5b;
    border-radius: 12px;
    padding: 5px;
    margin: 2px;
    display: flex;
    flex-direction: column; /* Force le titre en haut, le contenu en bas */
    gap: 5px;
    box-shadow: 0 5px 10px rgba(0,0,0,0.2);
}

/* Zone du haut : Nom et Grade */
.hero-title-area {
    width: 100%;
    text-align: center;
     padding-top: 15px;
    padding-bottom: 8px;
    border-bottom: 1px solid rgba(255,255,255,0.1);
    z-index: 10;
}

.hero-name-big {
    font-family: "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, sans-serif;
    font-weight: 700; /* Style très gras / Bold */
    font-size: 1.6em;
    color: #ffcf84;
    text-shadow: 0px 2px 3px rgba(0, 0, 0, 0.8), 
                 0px 4px 6px rgba(0, 0, 0, 0.4);
    text-shadow: 2px 2px 2px #000;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    display: block;
    margin-top: 15px;
    margin-bottom: 15px;
}

.rank-select-compact {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #0a111a;
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%235a3e2b' d='M0 0l5 5 5-5z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 10px center;
    color: #fff;
    border: 1px solid #2b3e5a;
    border-radius: 4px;
    padding: 4px 28px 4px 10px; /* Plus grand padding à droite pour ne pas chevaucher la flèche */
    font-size: 13px;
    font-weight: 600;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0,0,0,0.5);
    transition: all 0.2s ease;
}

/* Effet de survol discret */
.rank-select-compact:hover {
    border-color: #45628b;
    background-color: #0e1824;
}
/* ==========================================================================
   SET HEROES RANK 3. Zone principale : Colonne gauche | Avatar | Colonne droite 
   ========================================================================== */
.hero-main-content {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    justify-content: space-between !important;
    align-items: center !important;
}

.side-slots {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.center-hero {
    /*flex: 1;*/
    width: 160px;
    display: flex;
    flex-direction: column; /* Changement nécessaire pour empiler le menu déroulant */
    justify-content: center;
    align-items: center;
    gap: 2px;               /* Espace discret entre le select et l'avatar */
    min-width: 150px;
    text-align: center;     /* Assure le centrage horizontal des éléments blocs internes */
}

/* Nouveau conteneur d'isolation pour verrouiller la superposition absolue */
.avatar-wrapper {
    position: relative;     /* INDISPENSABLE pour servir de repère au cadre */
    width: 150px;           /* Force la largeur fixe du bloc avatar */
    height: 150px;          /* Force la hauteur fixe du bloc avatar */
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 auto;         /* Force le bloc à se centrer parfaitement dans .center-hero */
    margin-top: auto;       /* Repousse l'avatar tout au bas de la zone disponible, aligné sur les slots inférieurs */
}

.hero-avatar-large {
    width: 132px;       /* Réduit de 18px (150 - 18) */
    height: 132px;      /* Réduit de 18px (150 - 18) */
    object-fit: cover;  /* Permet de bien remplir le carré sans déformer */
    border-radius: 8px; /* Optionnel : arrondit légèrement les coins de l'avatar pour être sûr qu'ils ne bavent pas */
    z-index: 1;         /* En dessous du cadre */
}

/* Règle pour centrer automatiquement le cadre par-dessus l'image */
.hero-avatar-frame {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%); /* Centrage automatique parfait et absolu */
    width: 150px;       /* Garde sa taille d'origine */
    height: 150px;      /* Garde sa taille d'origine */
    pointer-events: none;
    z-index: 2;         /* Au-dessus de l'avatar */
}

/* ==========================================================================
   SET HEROES RANK 4. BARRE DE FILTRES MULTI-CATÉGORIES
   ========================================================================== */
.dashboard-filter-bar {
/*RENOMMER*/
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;       /* Permet de passer à la ligne proprement sur petit écran */
    gap: 12px;
    padding: 12px;
    background: rgba(0, 0.1, 0.2, 0.4);
    margin-bottom: 20px;
    /*border-radius: 8px;*/
}

.filter-btn {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    background: #0b2f3d;   /* Fond bleu de base */
    color: #dfd5c6;        /* Couleur de texte dorée/crème proche du jeu */
    border: 1px solid #14495e;
    /*border-radius: 4px;*/
    padding: 6px 14px;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.1s ease;
}

.filter-btn img {
    width: 24px;           /* Taille adaptée pour les icônes du jeu */
    height: 24px;
    object-fit: contain;
}

/* Au survol : la zone s'éclaire un peu */
.filter-btn:hover {
    background: #124357;
    border-color: #1a5b75;
    color: #fff;
}

/* À la sélection : le bleu s'éclaircit encore un peu */
.filter-btn.active {
    background: #185670;
    border-color: #237699;
    color: #fff;
    box-shadow: inset 0 0 6px rgba(255, 255, 255, 0.2);
}

/* Effet d'enfoncement discret au clic physique */
.filter-btn:active {
    transform: scale(0.97);
}


/* ==========================================================================
   SET HEROES RANK 5. DASHBOARD - STYLE DES SLOTS D'ITEMS
   ========================================================================== */
.dash-slot {
    position: relative;
    width: 80px;   
    height: 80px;
    background: rgba(0, 0, 0, 0.2); /* Fond sombre pour creuser le slot */
    border-radius: 8px;
    box-shadow: inset 0 0 5px #000;
    cursor: pointer;                /* Le slot entier devient cliquable */
}

.dash-item-image {
    position: absolute;
    top: 5px; 
    left: 5px;
    width: 70px; 
    height: 70px;
    z-index: 1;
    transition: all 0.3s ease;
}

.dash-item-frame {
    position: absolute;
    top: 0; 
    left: 0; 
    width: 80px; 
    height: 80px;
    z-index: 2;
    pointer-events: none;
    transition: all 0.3s ease;
}

/* Cache complètement la case à cocher visuellement sans casser le DOM */
.dash-check {
    display: none;
}

/* --- ÉTAT NON-ÉQUIPÉ (CORRIGÉ) --- */

/* Au repos : on augmente l'opacité pour que l'item soit bien lisible */
.dash-slot:not(.equipped) .dash-item-image,
.dash-slot:not(.equipped) .dash-item-frame {
    opacity: 0.75; /* Réduit pour marquer plus fortement le besoin de l'équiper */
    filter: grayscale(30%) brightness(80%); /* Totalement grisé et assombri au repos */
    transition: all 0.2s ease-in-out;
}

/* Au survol : l'item devient parfaitement visible (comme s'il était équipé) */
.dash-slot:not(.equipped):hover .dash-item-image,
.dash-slot:not(.equipped):hover .dash-item-frame {
    opacity: 1.0;
    filter: grayscale(20%) brightness(90%);
}

/* État Équipé : Éclatant, en couleur */
.dash-slot.equipped .dash-item-image,
.dash-slot.equipped .dash-item-frame {
    opacity: 1;
    filter: grayscale(0%) brightness(100%);
}

/* Petit effet de zoom léger au survol pour le côté interactif */
.dash-slot:hover .dash-item-image {
    transform: scale(1.05);
}




/* ==========================================================================
   FARM AN OBJECT 1.
   ========================================================================== */

/* Conteneur principal de la page de farm */
.farm-container {
    padding: 5px;
    color: #ffd5c6;
}

/* Zone supérieure de sélection */
.selector-zone {
    background: rgba(0, 0, 0, 0.3);
    padding: 5px;
    border-radius: 8px;
    margin-bottom: 25px;
}

.selector-zone label {
    font-weight: bold;
    margin-right: 10px;
}

.selector-zone select {
    background: #1a110a;
    color: white;
    border: 1px solid #5a3e2b;
    padding: 6px;
    border-radius: 4px;
    cursor: pointer;
}

/* Encadré de résumé de l'item sélectionné */
.item-summary-container {
    display: flex;
    align-items: center;
    gap: 30px;
    background: rgba(0, 0, 0, 0.4);
    border: 1px solid #5a3e2b;
    padding: 20px;
    border-radius: 8px;
    margin-bottom: 25px;
}

/* Emplacement de l'image de l'objet et son cadre */
.item-preview-slot {
    position: relative;
    width: 80px;
    height: 80px;
    flex-shrink: 0;
}

.item-preview-slot .item-img {
    top: 7px; 
    left: 7px;
    width: 82%;
    height: 82%;
    object-fit: contain;
    position: absolute;
    z-index: 1;
}

.item-preview-slot .item-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    z-index: 2;
}

/* Colonne de la recette de fabrication */
.item-recipe-column {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.item-recipe-column h3 {
    margin: 0 0 5px 0;
    color: #fff;
    font-size: 18px;
}

.item-recipe-title {
    font-size: 13px;
    color: #bca88f;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.item-recipe-list {
    margin: 0;
    padding-left: 20px;
    color: #dfd5c6;
    font-size: 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.item-recipe-list li span {
    color: #ffcc00;
    font-weight: bold;
}

.item-recipe-list .base-item-text {
    list-style: none;
    padding-left: 0;
    font-style: italic;
    color: #888;
}

/* ==========================================================================
  FARM AN OBJECT 2. GRILLE ET CARTES DES HÉROS 
  ========================================================================== */

/* Conteneur de la grille des héros demandeurs */
.needy-grid { 
    display: flex; 
    flex-wrap: wrap; 
    gap: 15px; 
    margin-top: 15px; 
}

/* Carte individuelle d'un héros */
.needy-card { 
    background: #0a111a; 
    border: 1px solid #2b3e5a; 
    border-radius: 6px; 
    padding: 10px; 
    width: 120px; 
    text-align: center; 
    box-shadow: 0 2px 5px rgba(0,0,0,0.5);
    position: relative; /* Crucial pour caler le badge rouge par-dessus */
}

/* Avatar du héros */
.needy-avatar { 
    width: 70px; 
    height: 70px; 
    border-radius: 4px; 
    margin-bottom: 5px; 
    border: 1px solid #3a261a; 
}

/* Nom du héros */
.needy-name { 
    font-weight: bold; 
    font-size: 13px; 
    color: white; 
    margin-bottom: 2px; 
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* Rang actuel affiché sous le nom */
.needy-rank { 
    font-size: 11px; 
    color: #bca88f; 
}

/* Le petit badge rouge multiplicateur (ex: x3) */
.quantity-badge {
    position: absolute; 
    top: -5px; 
    right: -5px;
    background: #cc0000; 
    color: white; 
    border-radius: 50%;
    width: 22px; 
    height: 22px; 
    font-size: 11px; 
    font-weight: bold;
    display: flex; 
    align-items: center; 
    justify-content: center;
    box-shadow: 0 2px 4px rgba(0,0,0,0.5);
    z-index: 10;
}

/* ==========================================================================
  FARM AN OBJECT 3. ARBRE DE CRAFT GRAPHIQUE AVEC MINI-ICÔNES (VERSION MAX DECALAGE & ROUGE)
   ========================================================================== */

.recipe-visual-tree-container {
    margin-top: 5px;
    width: 100%;
}

.recipe-visual-level {
    list-style: none;
    padding-left: 0;
    margin: 0;
}

.recipe-visual-node {
    margin-bottom: 5px;
}

.node-content {
    display: flex;
    align-items: center;
    gap: 16px;
}

.mini-item-slot {
    position: relative;
    flex-shrink: 0;
}

.mini-item-slot .mini-item-img {
    width: 80%;
    height: 80%;
    top: 4px; 
    left: 4px; 
    /*object-fit: contain;*/
    position: absolute;
    z-index: 1;
}

.mini-item-slot .mini-item-frame {
    width: 100%;
    height: 100%;
    object-fit: contain;
    position: absolute;
    z-index: 2;
}

.node-text {
    font-size: 14px;
    display: flex;
    align-items: center;
}

/* --- LOGIQUE DES BADGES DE QUANTITÉ (EN GRAS ET ROUGE) --- */
.qty-badge-tree {
    color: #ff3b30; /* Un beau rouge vif type "alerte/besoin" très lisible sur fond sombre */
    font-weight: 600; /* Super Gras */
}

.item-name-tree {
    color: #ffffff;
}

/* ==========================================================================
  FARM AN OBJECT 4. STRUCTURE DE L'ARBRE EN CASCADE (CORRECTION DES ALIGNEMENTS ET DES COUPES)
   ========================================================================== */

/* Nettoyage global de toutes les sous-listes */
.recipe-visual-level {
    list-style: none;
    padding: 0;
    margin: 0;
    position: relative;
}

/* Marges de décalage vers la droite pour les sous-composants */
.recipe-visual-level.depth-2 { margin-left: 0px; margin-top: 10px; }
.recipe-visual-level.depth-3 { margin-left: 0px; margin-top: 10px; }
.recipe-visual-level.depth-4 { margin-left: 0px; margin-top: 10px; }

/* Conteneur de ligne d'un objet */
.recipe-visual-node {
    position: relative;
    padding-left: 45px;       /* Espace requis pour tracer la ligne horizontale avant l'icône */
    margin-bottom: 12px;      /* Espace vertical entre deux composants */
}

/* Annule la marge sur le tout dernier élément d'un sous-groupe */
.recipe-visual-node:last-child {
    margin-bottom: 0;
}

/* --------------------------------------------------------------------------
  FARM AN OBJECT 5.  LES TRACÉS UNIQUES (::before pour le vertical, ::after pour l'horizontal)
   -------------------------------------------------------------------------- */

/* 1. LA LIGNE VERTICALE (Descendante)
   Elle part du haut et s'arrête net à 20px (qui correspond à la moitié de la hauteur de l'icône) */
.recipe-visual-node::before {
    content: "";
    position: absolute;
    left: 15px;               /* Alignement parfait avec le coin du branchement */
    top: -10px;               /* Remonte pour attraper la fin du nœud précédent */
    height: 30px;             /* Hauteur fixe pour éviter qu'elle ne coule sous l'icône */
    width: 1;
    border-left: 3px dotted #669dff;
}

/* Cas particulier : Si un nœud a des enfants (une sous-liste), la ligne verticale doit descendre plus bas 
   pour connecter les sous-éléments */
.recipe-visual-node:has(ul)::before {
    height: calc(100% + 10px); 
}

/* Si c'est le dernier élément d'une liste ET qu'il n'a pas d'enfants, sa ligne s'arrête pile au milieu de lui-même */
.recipe-visual-level > .recipe-visual-node:last-child::before {
    height: 30px; 
}

/* Le tout premier élément racine de l'arbre complet n'a pas besoin de ligne verticale qui remonte dans le vide */
.recipe-visual-level.depth-1 > .recipe-visual-node:first-child::before {
    top: 20px;
    height: 0;
    border-left: none;
}


/* 2. LA LIGNE HORIZONTALE (Vers l'icône) */
.recipe-visual-node::after {
    content: "";
    position: absolute;
    left: 15px;               /* Part du point de la ligne verticale */
    top: 20px;                /* Se positionne pile à la moitié de la hauteur de la boîte d'icône (40px / 2) */
    width: 25px;              /* Rejoint le bord gauche du slot de l'icône */
    height: 0;
    border-top: 3px dotted #669dff;
}


/* --------------------------------------------------------------------------
   TAILLES DES POLICES ET ICÔNES SELON LA PROFONDEUR
   -------------------------------------------------------------------------- */
.recipe-visual-level.depth-1 .mini-item-slot { width: 40px; height: 40px; }
.recipe-visual-level.depth-2 .mini-item-slot { width: 32px; height: 32px; }
.recipe-visual-level.depth-3 .mini-item-slot { width: 26px; height: 26px; }

.recipe-visual-level.depth-2 .node-text { font-size: 13px; }
.recipe-visual-level.depth-3 .node-text { font-size: 12px; color: #bca88f; }

/* Alignement flexbox interne pour garder l'icône et le texte bien centrés horizontalement */
.node-content {
    display: flex;
    align-items: center;
    gap: 10px;
    height: 40px;             /* Hauteur fixe de référence pour calibrer le point milieu (20px) */
}
.recipe-visual-level.depth-2 .node-content { height: 32px; }
.recipe-visual-level.depth-3 .node-content { height: 26px; }

/* ==========================================================================
   12. STRUCTURE COMPACTE DE LA FICHE DE DÉTAILS (VERTICALE)
   ========================================================================== */

.hw-tooltip-box {
    background-color: #121212;
    border: 2px solid #b30000;
    width: 100%;
    box-sizing: border-box;
    padding-bottom: 15px;
}

.hw-tooltip-header {
    display: flex;
    justify-content: space-between;
    background-color: #1a1a1a;
    padding: 10px 14px;
    border-bottom: 1px solid #2a2a2a;
}

.hw-tooltip-body {
    display: flex;
    flex-direction: column;
    padding: 15px 14px 0 14px;
}

/* Haut de la fiche : Image centrée et niveau requis */
.hw-tooltip-top-row {
    display: flex;
    flex-direction: column;
    align-items: center;
    margin-bottom: 15px;
    gap: 10px;
}

.hw-level-requirement {
    font-size: 14px;
    color: #00a2ff;
    font-weight: bold;
}

/* Structure des blocs et listes de composants */
.hw-section-wrapper {
    margin-bottom: 15px;
}

.hw-tree-header {
    display: flex;
    justify-content: space-between;
    font-size: 15px;
    border-bottom: 1px solid #333;
    padding-bottom: 4px;
    margin-bottom: 6px;
}

.hw-tree-header-labels {
    display: flex;
    gap: 30px;
}

.hw-tree-line {
    display: flex;
    justify-content: space-between;
    font-size: 14px;
    margin-bottom: 5px;
}

.hw-tree-line-values {
    display: flex;
    gap: 60px; /* Alignement régulier sous Nb et x Fragments */
}

.hw-tree-line-values span:first-child {
    width: 20px;
    text-align: right;
    color: #ffffff;
}

.hw-tree-line-values span:last-child {
    width: 50px;
    text-align: right;
    color: #d6a1ff;
}

/* Bloc Économique */
.hw-economics {
    font-size: 14px;
    color: #dfd5c6;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Lignes séparatrices fines */
.hw-divider {
    text-align: center;
    border-bottom: 1px solid #2a2a2a;
    margin: 12px 0 8px 0;
    padding-bottom: 2px;
    font-size: 13px;
}

/* Ligne de valeur d'échange journalière */
.hw-exchange-row {
    font-size: 14px;
    color: #4cd964;
    font-weight: bold;
    display: flex;
    align-items: center;
    gap: 6px;
}

/* Bloc des caractéristiques */
.hw-stats-block {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: 14px;
}

/* Gestion  des petites images en ligne */
.hw-inline-icon {
    height: 16px !important;
    width: auto !important;
    vertical-align: middle;
    margin-left: 2px;
    display: inline-block;
}