/* ═══════════════════════════════════════════════════════════════════════════
 *  personnage.css — les styles de la fiche personnage
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Ces 549 lignes vivaient en <style> DANS Personnage.php.
 *
 *  Les sortir sert a deux choses :
 *    - le navigateur MET CE FICHIER EN CACHE (le HTML, lui, est regenere a
 *      chaque visite : le CSS inline etait donc retelecharge a chaque page)
 *    - Personnage.php redevient lisible
 * ═══════════════════════════════════════════════════════════════════════════
 */

/* ══════════════════════════════════════════════════════════════════════════
 *  LAYOUT DES 2 COLONNES  (Identité #player_info + Henchs #player_hench)
 *  ──────────────────────────────────────────────────────────────────────────
 *  En box-sizing:border-box, les 2 colonnes font : 465 + marge 10 + 445 = 920px.
 *  BUG D'ORIGINE : leur conteneur .fullbox_yellow_bottom était plafonné à
 *  max-width:940px (≈ PILE la largeur des colonnes, zéro marge) ET #page_wrapper
 *  était tantôt "shrink-to-fit" (perso.css) tantôt forcé à 1200px (ici) selon la
 *  largeur -> au pixel près, le hench basculait SOUS l'identité à 1200px puis
 *  revenait à 1023px. On fige donc, en UN SEUL endroit, des largeurs cohérentes
 *  avec de la MARGE ; sous 1000px on empile (les colonnes 465px ne tiennent pas).
 *  Tout est scopé à body.personnage-page + vue profil (hors galerie).
 *  ══════════════════════════════════════════════════════════════════════════ */
.container,
.page-center-wrapper,
#page_wrapper {
    box-sizing: border-box !important;
}

/* Les 2 colonnes sont dans un wrapper .perso-cols en FLEXBOX (fini le float instable).
   PAS de breakpoint fixe : `flex-wrap: wrap` garde les colonnes CÔTE À CÔTE tant qu'elles
   TIENNENT, et ne les empile QUE quand la place manque réellement. */

/* Le conteneur perso : FLUIDE (remplit la fenêtre) mais plafonné -> un max de place. */
.personnage-page .container {
    width: 100% !important;
    max-width: 990px !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
    margin: 0 auto !important;
}
.personnage-page .page-center-wrapper:not(.gallery-page-layout) #page_wrapper {
    width: 100% !important;
    max-width: 980px !important;
    margin: 0 auto !important;
    padding: 0 !important;
}
.personnage-page .page-center-wrapper:not(.gallery-page-layout) .fullbox_yellow_bottom {
    width: auto !important;
    max-width: 960px !important;
    min-width: 0 !important;
    margin: 0 auto 25px !important;
}

/* Les 2 colonnes : côte à côte tant que ça rentre, empilées automatiquement sinon. */
.personnage-page .perso-cols {
    display: flex !important;
    flex-wrap: wrap !important;          /* passe dessous UNIQUEMENT si ça ne tient pas */
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
}
.personnage-page .perso-cols #player_info,
.personnage-page .perso-cols #player_hench {
    float: none !important;
    clear: none !important;
    margin: 0 0 15px 0 !important;
    flex: 0 0 auto !important;           /* gardent leur largeur (465 / 445) */
    /* CRUCIAL : un flex item a min-width:auto = taille min-content. Le carrousel de
       henchs (#henchWarp = 12000px) rendait donc le hench "énorme" -> il passait
       dessous alors qu'il y avait la place. min-width:0 le fige à sa vraie largeur. */
    min-width: 0 !important;
    max-width: 100% !important;          /* et ne déborde jamais la fenêtre */
}

/* ─── Ligne 2 de la "grille" : liens (sous l'identité) | mur mix/drop (sous le hench) ───
   #player_links devient lui aussi un flex-row (ul 465 | #WallSubStub 445), centré et de
   même gabarit que .perso-cols au-dessus -> les liens se calent sous #player_info et le
   mur sous #player_hench. Quand ça ne tient plus, ils s'empilent (l'un sous l'autre). */
.personnage-page #player_links {
    display: flex !important;
    flex-wrap: wrap !important;
    justify-content: center !important;
    align-items: flex-start !important;
    gap: 10px !important;
    width: auto !important;
    clear: both !important;
    overflow: visible !important;
}
.personnage-page #player_links > .clear {
    display: none !important;   /* le vieux div de clearing n'a plus lieu d'être en flex */
}
.personnage-page #player_links > ul {
    flex: 0 0 auto !important;
    width: 465px !important;    /* même largeur que #player_info -> aligné dessous */
    max-width: 100% !important;
    margin: 15px 0 0 !important;
    top: 0 !important;
}
.personnage-page #WallSubStub {
    flex: 0 0 auto !important;
    width: 445px !important;    /* même largeur que #player_hench -> aligné dessous */
    min-width: 0 !important;
    max-width: 100% !important;
    margin: 15px 0 0 !important;
    float: none !important;
    clear: none !important;
}

/* ─── Repli : plus de place -> tout en 1 colonne, et #page_wrapper se réduit à la
   dimension d'UNE colonne (465 + les 20px de padding du fullbox = 485). ───
   Réduire #page_wrapper à 485 force mécaniquement .perso-cols ET #player_links à passer
   en une seule colonne (flex-wrap), donc : identité, hench, liens, mur — l'un sous l'autre. */
@media (max-width: 959.98px) {
    .personnage-page .page-center-wrapper:not(.gallery-page-layout) #page_wrapper {
        max-width: 485px !important;
    }
}

.guildMembers.guildTable {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 auto !important;
    overflow-x: auto !important;
    box-sizing: border-box !important;
}

/* iPhone SE - forcer à ne jamais dépasser */
@media (max-width: 400px) {
    * {
        max-width: 100vw !important;
        box-sizing: border-box !important;
    }
    
    .guildMembers.guildTable table {
        min-width: 280px !important;
        width: 100% !important;
    }
    
    .guildMembers.guildTable td,
    .guildMembers.guildTable th {
        padding: 1px !important;
        word-break: break-all !important;
    }
}

    /* ── Hench sélectionné dans la liste de navigation ──────────────────── */
    #henchList a {
        display: block;
        border-radius: 4px;
        transition: box-shadow 0.2s ease, filter 0.15s ease;
        text-decoration: none;
    }

    #henchList a.current > div {
        box-shadow:
            0 0 0 2px #f5c518,
            0 0 8px 3px rgba(245, 197, 24, 0.75);
        border-radius: 3px;
        /* filter retire : l'etat "selectionne" est desormais porte par le
           sprite du cadre (itemImgContainer0 -> itemImgContainer1), plus par
           un effet lumineux. */
    }

    /* filter retire ici aussi (voir ci-dessus) : le cadre "1" suffit a
       distinguer un hench deploye. */

    #henchList a:not(.current):hover > div {
        box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.6);
        filter: brightness(1.05);
        cursor: pointer;
    }
    /* ───────────────────────────────────────────────────────────────────── */

/* ═══════════════════════════════════════════════════════════════ */

/* Styles pour l'accordéon moderne */
.modern-accordion-container {
    margin: 40px 0;
    max-width: 100%;
}

.accordion-section {
    margin-bottom: 20px;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 4px 12px rgba(0,0,0,0.1);
    background: white;
    border: 2px solid #f7d045;
    transition: all 0.3s ease;
}

.accordion-section:hover {
    box-shadow: 0 6px 20px rgba(0,0,0,0.15);
    transform: translateY(-2px);
}

.accordion-header {
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    padding: 20px 25px;
    cursor: pointer;
    position: relative;
    transition: all 0.3s ease;
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

.accordion-header:hover {
    background: linear-gradient(135deg, #ffed4e 0%, #ffd700 100%);
}

.accordion-header.active {
    background: linear-gradient(135deg, #28a745 0%, #34ce57 100%);
}

.accordion-header.active:hover {
    background: linear-gradient(135deg, #34ce57 0%, #28a745 100%);
}

.accordion-title {
    display: flex;
    align-items: center;
    margin: 0;
    font-size: 22px;
    font-weight: bold;
    color: #2c3e50;
    gap: 15px;
}

.accordion-header.active .accordion-title {
    color: white;
}

.accordion-icon {
    font-size: 24px;
    min-width: 30px;
    text-align: center;
}

.accordion-text {
    flex: 1;
}

.accordion-arrow {
    font-size: 18px;
    font-weight: bold;
    transition: transform 0.3s ease;
    color: #2c3e50;
}

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

.accordion-subtitle {
    margin-top: 8px;
    font-size: 14px;
    color: #666;
    font-style: italic;
}

.accordion-header.active .accordion-subtitle {
    color: rgba(255,255,255,0.9);
}

.accordion-content {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease-out, padding 0.3s ease;
    padding: 0 25px;
    background: white;
}

.accordion-content.active {
    max-height: 50000px;
    padding: 30px 25px;
}

.accordion-inner {
    padding: 0;
}

/* Notice pour les sections en développement */
.coming-soon-notice {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    padding: 30px;
    background: linear-gradient(135deg, #e3f2fd 0%, #bbdefb 100%);
    border-radius: 12px;
    border: 2px solid #2196f3;
    box-shadow: 0 4px 8px rgba(33,150,243,0.2);
}

.notice-icon {
    font-size: 48px;
    min-width: 60px;
    text-align: center;
}

.notice-content h3 {
    margin: 0 0 15px 0;
    color: #1976d2;
    font-size: 20px;
}

.notice-content p {
    margin: 0 0 15px 0;
    color: #333;
    line-height: 1.6;
}

.notice-content ul {
    margin: 0;
    padding-left: 20px;
    color: #555;
}

.notice-content li {
    margin: 8px 0;
    line-height: 1.4;
}

/* Responsive pour l'accordéon */
@media (max-width: 768px) {
    .accordion-header {
        padding: 15px 20px;
    }
    
    .accordion-title {
        font-size: 18px;
        gap: 10px;
    }
    
    .accordion-icon {
        font-size: 20px;
        min-width: 25px;
    }
    
    .accordion-content.active {
        padding: 20px;
    }
    
    .coming-soon-notice {
        flex-direction: column;
        gap: 15px;
        padding: 20px;
        text-align: center;
    }
    
    .notice-icon {
        font-size: 40px;
    }
}

/* Styles pour le système de cards de mix */
.mix-cards-container {
    width: 100%;
    padding: 20px 0;
}

.mix-filters {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 30px;
    padding: 20px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 10px;
    border: 2px solid #f7d045;
}

.filter-group {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.filter-group label {
    font-weight: bold;
    color: #8b5a00;
    font-size: 14px;
}

.filter-group select,
.filter-group input {
    padding: 8px 12px;
    border: 2px solid #f7d045;
    border-radius: 5px;
    background: white;
    font-size: 14px;
}

.mix-stats {
    display: flex;
    justify-content: space-between;
    margin-bottom: 20px;
    padding: 15px;
    background: linear-gradient(135deg, #ffd700 0%, #ffed4e 100%);
    border-radius: 8px;
    border: 2px solid #e6c200;
}

.stat-item {
    text-align: center;
    color: #5d4e00;
    font-weight: bold;
}

.stat-number {
    font-size: 24px;
    color: #3d3300;
}

.mix-cards-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 20px;
    padding: 10px 0;
}

.mix-card {
    position: relative;
    border-radius: 12px;
    padding: 15px;
    background: linear-gradient(135deg, #fff 0%, #f8f8f8 100%);
    border: 3px solid;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    transition: all 0.3s ease;
    overflow: hidden;
}

.mix-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 8px 16px rgba(0,0,0,0.3);
}

/* Statut réussi */
.mix-card.completed {
    border-color: #28a745;
    background: linear-gradient(135deg, #d4edda 0%, #c3e6cb 100%);
    filter: none;
}

.mix-card.completed::before {
    content: '✓';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #28a745;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
}

/* Statut non réussi */
.mix-card.not-completed {
    border-color: #dc3545;
    background: linear-gradient(135deg, #f8d7da 0%, #f1b0b7 100%);
    filter: grayscale(70%);
    opacity: 0.8;
}

.mix-card.not-completed::before {
    content: '✗';
    position: absolute;
    top: 10px;
    right: 10px;
    background: #dc3545;
    color: white;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: bold;
    font-size: 16px;
    z-index: 2;
}

.mix-card-image {
    text-align: center;
    margin-bottom: 15px;
    position: relative;
}

.mix-card-image img {
    width: 80px;
    height: 80px;
    object-fit: contain;
    border-radius: 8px;
    background: rgba(255,255,255,0.9);
    padding: 5px;
    border: 2px solid #ddd;
}

.mix-card-name {
    font-size: 16px;
    font-weight: bold;
    color: #2c3e50;
    text-align: center;
    margin-bottom: 10px;
    min-height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.mix-card-info {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}

.difficulty-stars {
    display: flex;
    gap: 2px;
}

.star {
    color: #ffd700;
    font-size: 16px;
}

.star.empty {
    color: #ddd;
}

.race-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: white;
}

.race-0 { background: #ff6b6b; }
.race-1 { background: #4ecdc4; }
.race-2 { background: #45b7d1; }
.race-3 { background: #96ceb4; }
.race-4 { background: #feca57; }
.race-5 { background: #ff9ff3; }
.race-6 { background: #54a0ff; }
.race-7 { background: #5f27cd; }

.success-count-badge {
    padding: 4px 8px;
    border-radius: 12px;
    font-size: 12px;
    font-weight: bold;
    color: white;
    background: linear-gradient(135deg, #ffd700, #ffed4e);
    color: #333;
    border: 1px solid #f1c40f;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    margin-top: 4px;
}

.completion-date {
    font-size: 12px;
    color: #666;
    text-align: center;
    font-style: italic;
    margin-top: 5px;
}

.level-indicator {
    position: absolute;
    top: 5px;
    left: 5px;
    background: rgba(0,0,0,0.7);
    color: white;
    padding: 2px 6px;
    border-radius: 10px;
    font-size: 11px;
    font-weight: bold;
}

/* Responsive */
@media (max-width: 768px) {
    .mix-cards-grid {
        grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
        gap: 15px;
    }
    
    .mix-filters {
        flex-direction: column;
        gap: 15px;
    }
    
    .mix-stats {
        flex-direction: column;
        gap: 10px;
    }
}

@media (max-width: 480px) {
    .mix-cards-grid {
        grid-template-columns: 1fr;
        gap: 10px;
    }
    
    .mix-card {
        padding: 12px;
    }
    
    .mix-card-image img {
        width: 60px;
        height: 60px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  LE BOUTON "i" DE LA FICHE HENCH
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Il n'avait AUCUN style : un simple "i" pose sur le decor du hench, donc
 *  illisible des que le fond etait clair ou charge.
 *
 *  On lui donne une pastille sombre, translucide, qui le detache de n'importe
 *  quel fond sans masquer le hench.
 */
.henchInfoBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;

    width: 18px;
    height: 18px;
    padding: 0;

    /* La pastille : sombre et translucide, lisible sur tous les mapbg. */
    background: rgba(0, 0, 0, 0.55);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    color: #fff;
    font-family: Georgia, 'Times New Roman', serif;   /* un "i" bien dessine */
    font-size: 12px;
    font-weight: bold;
    font-style: italic;
    line-height: 1;

    cursor: pointer;
    /* Le contour porte la lisibilite meme si la pastille passe sur du clair. */
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.9);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.5);

    transition: background 0.15s ease, transform 0.15s ease;
}

.henchInfoBtn:hover,
.henchInfoBtn:focus {
    background: rgba(255, 162, 0, 0.9);   /* l'orange du site */
    border-color: #fff;
    transform: scale(1.12);
    outline: none;
}


/* ═══════════════════════════════════════════════════════════════════════════
 *  LE CADRE DES HENCHS
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  Meme aspect que le cadre des equipements (item_border.png), mais en CSS :
 *  l'image fait 44x44 et ne peut pas s'etirer sur les 228x167 d'un hench sans
 *  se deformer. On en reprend donc le DESSIN -- un contour sombre, discret --
 *  plutot que le fichier.
 *
 *  Au survol : le contour FONCE. Rien d'autre ne bouge.
 */
.henchImage {
    border: 2px solid #5a5a5a;
    box-sizing: border-box;          /* le cadre garde ses 228x167 exacts */
    transition: border-color 0.15s ease;
}

.henchImage:hover {
    border-color: #1a1a1a;           /* plus fonce, comme demande */
}


/* ═══════════════════════════════════════════════════════════════════════════
 *  LA FICHE D'UN HENCH (la modale du bouton "i")
 * ═══════════════════════════════════════════════════════════════════════════
 *
 *  ⚠️ CE CSS N'EXISTAIT PAS. Le HTML de la modale etait en place, le JS aussi
 *  (il pose la classe .henchFiche--ouvert), mais RIEN ne la rendait visible :
 *  elle s'ouvrait sans qu'on la voie.
 *
 *  Le JS attend exactement ces deux etats :
 *      .henchFiche                  ferme  (invisible)
 *      .henchFiche--ouvert          ouvert (visible)
 */

/* Ferme : invisible, et surtout SANS capter les clics. */
.henchFiche {
    position: fixed;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 10000;

    opacity: 0;
    visibility: hidden;
    pointer-events: none;            /* laisse passer les clics quand c'est ferme */
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.henchFiche--ouvert {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
}

/* Le voile sombre derriere la boite. */
.henchFiche__fond {
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.65);
}

/* La boite elle-meme. */
.henchFiche__boite {
    position: relative;              /* au-dessus du voile */
    z-index: 1;

    width: 340px;
    max-width: calc(100vw - 32px);
    /* Plus de scroll vertical dans la fiche : la boite s'adapte a son contenu.
       (overflow visible pour que rien ne soit coupe ni ne cree de scrollbar.) */
    overflow: visible;

    background: linear-gradient(135deg, #FFA200 0%, #FFB81F 20%, #FFDE00 100%);
    border: 2px solid #F8B801;
    border-radius: 8px;
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.45);

    transform: scale(0.95);
    transition: transform 0.2s ease;
}

.henchFiche--ouvert .henchFiche__boite {
    transform: scale(1);
}

/* ── L'entete ─────────────────────────────────────────────────────────────── */
.henchFiche__tete {
    position: relative;
    padding: 10px 38px 8px 14px;     /* de la place a droite pour la croix */
    border-bottom: 1px solid rgba(0, 0, 0, 0.18);
}

/* Le NOM du hench : MEME police que le titre d'un equipement dans la tooltip
   (Lobster1.4Regular), pour la coherence visuelle. */
#henchFicheNom {
    margin: 0;
    font: 1.4em/1.2em 'Lobster1.4Regular', Arial, sans-serif;
    color: #2d1a00;
    text-shadow: 0 1px 0 rgba(255, 255, 255, 0.3);
    word-break: break-word;
    background: none;
}

.henchFiche__surnom {
    margin: 0;
    font: 0.95em/1.2em 'Lobster1.4Regular', Arial, sans-serif;  /* meme police que le nom, plus petit */
    font-weight: normal;   /* pas en gras */
    color: #6b4a00;
    word-break: break-word;
}

.henchFiche__sousTitre {
    margin: 2px 0 0;
    font-size: 12px;
    color: #6b4a00;
}

/* La croix de fermeture. */
.henchFiche__x {
    position: absolute;
    top: 8px;
    right: 10px;

    width: 24px;
    height: 24px;
    padding: 0;

    background: rgba(0, 0, 0, 0.35);
    border: 1px solid rgba(255, 255, 255, 0.45);
    border-radius: 50%;

    color: #fff;
    font-size: 15px;
    line-height: 1;

    cursor: pointer;
    transition: background 0.15s ease;
}

.henchFiche__x:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* ── Le corps ─────────────────────────────────────────────────────────────── */
.henchFiche__corps {
    padding: 12px 14px;
}

/* Une ligne = un libelle a gauche, une valeur a droite. */
.henchFiche__ligne {
    display: flex;
    justify-content: space-between;
    gap: 12px;
    padding: 5px 0;
    border-bottom: 1px dashed rgba(0, 0, 0, 0.12);
}

.henchFiche__ligne:last-child {
    border-bottom: none;
}

.henchFiche__label {
    flex: 0 0 auto;
    font-size: 12px;
    font-weight: bold;
    color: #6b4a00;
}

.henchFiche__valeur {
    flex: 1 1 auto;
    text-align: right;
    font-size: 12px;
    color: #3a2600;
    word-break: break-word;
}

.henchFiche__desc {
    margin-top: 8px;
    padding-top: 8px;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
    font-size: 12px;
    line-height: 1.45;
    color: #3a2600;
}

/* Les trois equipements du hench. */
.henchFiche__items {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    justify-content: flex-end;
}

/* Chaque case doit etre le repere du badge numerote. */
.henchFiche__items .itemImgContainer,
.henchFiche__items .itemImgContainer0,
.henchFiche__items .itemImgContainer1,
.henchFiche__items .itemImgContainer2 {
    position: relative;
}

/* Le badge numerote (1, 2, 3) en bas a droite de chaque case. */
.itemImgBadge {
    position: absolute;
    right: 1px;
    bottom: 1px;
    z-index: 5;

    min-width: 15px;
    height: 15px;
    padding: 0 3px;

    background: rgba(0, 0, 0, 0.75);
    border: 1px solid rgba(255, 255, 255, 0.6);
    border-radius: 8px;

    color: #fff;
    font: bold 10px/15px Arial, sans-serif;
    text-align: center;
    pointer-events: none;
}

/* ── Le pied ──────────────────────────────────────────────────────────────── */
.henchFiche__pied {
    padding: 10px 14px 12px;
    text-align: right;
    border-top: 1px solid rgba(0, 0, 0, 0.18);
}

.henchFiche__btn {
    padding: 6px 16px;

    background: rgba(0, 0, 0, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.35);
    border-radius: 4px;

    color: #fff;
    font-size: 12px;
    font-weight: bold;

    cursor: pointer;
    transition: background 0.15s ease;
}

.henchFiche__btn:hover {
    background: rgba(0, 0, 0, 0.65);
}

/* ═══════════════════════════════════════════════════════════════════════════
   CLASSES QUI AVAIENT PERDU LEUR STYLE (modale hench)
   Utilisees par personnage.js mais absentes du CSS -> images a taille native
   (icones enormes), etoile sans apparence, slots vides invisibles.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Petites icones inline (sexe, enchant, origine, droits). Natif = 30px : on les
   cale a 16px, alignees au texte de 12px. SANS CA, elles s'affichaient en 30px
   brut = les "dimensions illogiques". */
.henchFiche__icone {
    width: 30px;
    height: 30px;
    object-fit: contain;
    vertical-align: -6px;
    margin-right: 3px;
}

/* L'etoile ★ du droit exceptionnel : survolable (infobulle geree en JS). */
.henchFiche__exception {
    display: inline-block;
    margin-left: 4px;
    color: #f5c000;
    cursor: help;
    font-size: 13px;
    line-height: 1;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.4);
}

/* Slot d'equipement VIDE dans la modale (itemImgContainer sans image). */
.henchFiche__vide {
    opacity: 0.35;
    filter: grayscale(1);
}

/* ═══════════════════════════════════════════════════════════════════════════
 *  FENÊTRES "COMPTE" : Inventaire · Entrepôt · Marché (modales)
 *  Habillage jaune du site (cadre or + intérieur crème), slots réutilisant
 *  .itemImgContainer (mêmes icônes/tooltip que l'équipement).
 * ═══════════════════════════════════════════════════════════════════════════ */
/* ── Menu bouton de #player_hench : choisit ce qu'affiche la colonne ── */
.hench-menu{ position:relative; margin:0 0 10px; text-align:center; }
/* Fond BRUN FONCÉ (et plus orange) : le bouton était quasi invisible sur le cadre
   jaune/orange de la page. Contraste fort + liseré doré = bien détaché. */
.hench-menu-btn{
    font:400 18px/1 'Lobster1.4Regular','Segoe Script',cursive; color:#ffe9b0; cursor:pointer;
    background:linear-gradient(180deg,#5a3d0c,#a6642e);
    border:1px solid #f7d045; border-radius:10px; padding:8px 16px; text-shadow:0 1px 2px rgba(0,0,0,.6);
    display:inline-flex; align-items:center; gap:10px;
    box-shadow:0 2px 6px rgba(0,0,0,.35), inset 0 1px 0 rgba(255,222,120,.25);
}
.hench-menu-btn:hover{ background:linear-gradient(180deg,#6d4a10,#4a3108); color:#fff6dd; }
.hench-menu-caret{ font-size:12px; }
.hench-menu-list{
    position:absolute; z-index:50; left:50%; transform:translateX(-50%); top:calc(100% + 4px);
    min-width:200px; background:#fff7e2; border:1px solid #c98a12; border-radius:10px;
    box-shadow:0 8px 20px rgba(0,0,0,.3); padding:6px; text-align:left;
}
.hench-menu-list .hm-group{
    font:400 13px/1 'Lobster1.4Regular','Segoe Script',cursive; color:#a5720a; padding:7px 8px 3px;
}
.hench-menu-list .hm-group:not(:first-child){ border-top:1px solid #edd9a4; margin-top:4px; }
.hench-menu-list button{
    display:block; width:100%; text-align:left; font:600 13px/1 'Cabin',Helvetica,Arial,sans-serif;
    color:#5a3d0c; background:transparent; border:0; border-radius:6px; padding:7px 10px 7px 22px; cursor:pointer;
}
.hench-menu-list button:hover{ background:#ffe9b8; }

/* Prix (hench en vente) dans la modale fiche : teinte or, PAS de gras. */
.henchFiche__prixLigne .henchFiche__valeur{ color:#c98a12; font-weight:normal; }

/* ── Panneaux de vue (hors carrousel #HenchSubStub) : intérieur crème lisible ── */
.hench-view:not(#HenchSubStub){
    background:#fff7e2; border:1px solid #e6c877; border-radius:12px; padding:12px;
}
/* …SAUF les vues Henchs (Entrepôt/Marché) : PAS de contour, comme Inventaire › Henchs
   (les cartes ont déjà leur propre fond). */
.hench-view[data-view="store-hench"],
.hench-view[data-view="market-hench"]{
    background:none !important; border:0 !important; border-radius:0 !important; padding:0 !important;
}

/* entêtes / notes / états */
.mm-block-title{
    display:flex; align-items:center; gap:10px; margin:0 0 10px;
    font:400 22px/1 'Lobster1.4Regular','Segoe Script',cursive; color:#7a4d06;
}
.mm-block-count{ margin-left:auto; font:700 12px/1 'Consolas',monospace; color:#a98f52; }
.mm-block{ margin-top:20px; padding-top:16px; border-top:1px dashed #e6c877; }
.mm-note{ font-size:12.5px; color:#7a5c26; margin:0 0 12px; background:#fff3d0; border:1px solid #e6c877; border-radius:9px; padding:8px 12px; }
.mm-empty{ font-size:13px; color:#9a8248; font-style:italic; text-align:center; padding:18px; margin:0; }

/* grille de slots : cases 44×44 IDENTIQUES à l'équipement (cadre sprite de rareté
   item_border.png + icône 32px centrée). On ne touche NI à la taille NI au sprite :
   on retire juste le float/margin (l'équipement empile en float, ici on est en grid). */
.mm-grid{ display:flex; flex-wrap:wrap; gap:5px; justify-content:flex-start; }
.mm-slot{ position:relative; width:44px; height:44px; flex:none; }
.mm-slot > [class^="itemImgContainer"], .mm-slot > [class*=" itemImgContainer"]{
    float:none !important; margin:0 !important;
}
.mm-slot-empty{ opacity:.5; }                 /* cadre rareté 0, grisé */
.mm-slot-unknown{ opacity:.7; }
/* Badge de quantité : pastille sombre -> lisible quelle que soit l'icône dessous. */
.mm-slot-count{
    position:absolute; right:1px; bottom:1px; z-index:3; pointer-events:none;
    font:700 10px/1 'Consolas',monospace; color:#ffe9b0; letter-spacing:-.2px;
    background:rgba(30,18,4,.82); border:1px solid rgba(255,214,120,.55); border-radius:7px;
    padding:2px 4px; min-width:16px; text-align:center;
}
.mm-slot-plus{
    position:absolute; left:2px; top:1px; z-index:3; pointer-events:none;
    font:700 10px/1 'Consolas',monospace; color:#a5520a; text-shadow:0 1px 0 #fff;
}

/* Prix / expiration (objet en vente) dans l'infobulle : teinte or, PAS de gras. */
.item-info-prix .item-value,
.item-info-expiration .item-value{ color:#c98a12; font-weight:normal; }

/* Pagination des vues Objets (< X / Y >) — pour ne pas dépasser #player_info. */
.mm-pager{ display:flex; align-items:center; justify-content:center; gap:14px; margin-top:10px; }
.mm-pager-btn{
    width:30px; height:30px; border-radius:50%; cursor:pointer; line-height:1;
    border:1px solid #c98a12; background:linear-gradient(180deg, rgba(255,174,0,1), rgba(255,140,0,1));
    color:#fff; font:400 18px/1 'Lobster1.4Regular','Segoe Script',cursive; text-shadow:0 1px 2px #7a4d06;
}
.mm-pager-btn:hover{ filter:brightness(1.08); }
.mm-pager-lbl{ font:700 13px/1 'Consolas',monospace; color:#7a4d06; min-width:52px; text-align:center; }

/* pied or : juste « X GP », centré */
.mm-gold-foot{
    display:flex; align-items:center; justify-content:center; margin-top:14px; padding:11px 14px; border-radius:11px;
    background:linear-gradient(90deg,#ffe9b0,#fff6dd); border:1px solid #e6c877;
}
.mm-gold-ic{ width:30px; height:30px; border-radius:8px; display:grid; place-items:center; color:#3a2606;
    background:radial-gradient(circle at 35% 30%,#ffe08f,#c98a12); }
.mm-gold-v{ font:700 17px/1 'Consolas',monospace; color:#7a4d06; font-variant-numeric:tabular-nums; }
.mm-gold-t{ font-size:11px; color:#a98f52; text-transform:uppercase; letter-spacing:.06em; }

/* Carrousel Henchs (Entrepôt/Marché) = IDENTIQUE au roster : viewport (une carte
   à la fois) + henchList de mini-icônes à DROITE. Le CSS de base .henchCard est
   scopé à #characterHench dans perso.css ; on le RE-SCOPE ici à .mm-hench-carousel
   (les sous-éléments henchStats/points/… sont globaux). */
.mm-hench-carousel{ display:flex; align-items:flex-start; gap:10px; justify-content:flex-start; }
.mm-hench-panes{ position:relative; width:290px; overflow:hidden; flex:none; }
.mm-hench-cell{ display:flex; flex-direction:column; align-items:center; }
.mm-hench-cell .mm-hench-foot{ margin-top:6px; display:flex; gap:8px; justify-content:center; align-items:center; flex-wrap:wrap; }
/* henchList (mini-icônes de navigation) = IDENTIQUE au roster : 109px, fond
   translucide, icônes 44px enroulées sur 2 COLONNES. */
.mm-hench-list{
    flex:none; width:109px; padding:7px; box-sizing:border-box;
    background:rgba(255,255,255,.4); border-radius:6px;
    display:flex; flex-wrap:wrap; gap:3px; align-content:flex-start; justify-content:flex-start;
    max-height:384px; overflow-y:auto;
}
.mm-hench-list a{ display:block; line-height:0; }
.mm-hench-list .itemImgContainer0, .mm-hench-list .itemImgContainer1{ float:none !important; margin:0 !important; cursor:pointer; }
.mm-hench-carousel .henchCard{
    width:290px; height:384px; float:none; position:relative; margin:0; color:#653C04;
    font:16px/1em 'Lobster1.4Regular',Arial,sans-serif; padding:16px 16px 0 16px;
    background:url('../images/player/hench/card/mCardBG-Beast.png') no-repeat 0 0;
}
.mm-hench-carousel .henchCard.Beast  { background:url('../images/player/hench/card/mCardBG-Beast.png')  no-repeat 0 0; }
.mm-hench-carousel .henchCard.Bird   { background:url('../images/player/hench/card/mCardBG-Bird.png')   no-repeat 0 0; }
.mm-hench-carousel .henchCard.Insect { background:url('../images/player/hench/card/mCardBG-Bug.png')    no-repeat 0 0; }
.mm-hench-carousel .henchCard.Devil  { background:url('../images/player/hench/card/mCardBG-Devil.png')  no-repeat 0 0; }
.mm-hench-carousel .henchCard.Dragon { background:url('../images/player/hench/card/mCardBG-Dragon.png') no-repeat 0 0; }
.mm-hench-carousel .henchCard.Metal  { background:url('../images/player/hench/card/mCardBG-Metal.png')  no-repeat 0 0; }
.mm-hench-carousel .henchCard.Mystery{ background:url('../images/player/hench/card/mCardBG-Myst.png')   no-repeat 0 0; }
.mm-hench-carousel .henchCard.Plant  { background:url('../images/player/hench/card/mCardBG-Plant.png')  no-repeat 0 0; }

/* ancien mini-format (désormais inutilisé, gardé sans risque) */
.mm-hench-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(150px,1fr)); gap:10px; }
.mm-hench{ background:linear-gradient(165deg,#fffdf6,#ffeec2); border:1px solid #e6c877; border-radius:12px; padding:11px; }
.mm-hench-top{ display:flex; gap:9px; align-items:center; }
.mm-hench-av{ width:40px; height:40px; border-radius:10px; border:1px solid rgba(0,0,0,.12); object-fit:cover; background:#fff7df; }
.mm-hench-nm{ font-weight:700; font-size:14px; color:#5a3d0c; }
.mm-hench-sp{ font-weight:400; font-size:11px; color:#a98f52; }
.mm-hench-el{ font-size:11px; color:#a98f52; }
.mm-hench-dur{ margin-top:9px; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.mm-dur{ display:inline-flex; align-items:center; gap:5px; padding:3px 9px; border-radius:20px; font-size:11px; font-weight:700; }
.mm-dur.perm{ color:#3f9d4a; background:#e2f5e4; border:1px solid #bde3c1; }
.mm-dur.on{ color:#a5520a; background:#ffeec2; border:1px solid #e6c877; }
.mm-dur.off{ color:#8a3fc0; background:#f3e6fb; border:1px solid #e0c4f2; }
.mm-dur-note{ font-size:10.5px; color:#a98f52; }

/* marché */
.mm-legend{ display:flex; gap:14px; font-size:11.5px; color:#a98f52; margin-bottom:12px; flex-wrap:wrap; }
.mm-legend span{ display:inline-flex; gap:6px; align-items:center; }
.mm-lg-gp, .mm-lg-cash{ width:11px; height:11px; border-radius:3px; display:inline-block; }
.mm-lg-gp{ background:#c98a12; } .mm-lg-cash{ background:#8a3fc0; }
.mm-market-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(260px,1fr)); gap:10px; }
.mm-listing{
    display:grid; grid-template-columns:auto 1fr auto; gap:11px; align-items:center;
    background:linear-gradient(160deg,#fffdf6,#ffeec2); border:1px solid #e6c877; border-radius:11px; padding:11px 13px;
}
.mm-listing-th{ width:44px; height:44px; flex:none; display:grid; place-items:center; }
.mm-listing-thumb{ width:46px; height:46px; border-radius:10px; border:1px solid #e6c877; background:#fff7df; object-fit:cover; }
.mm-listing-nm{ font-weight:700; font-size:13.5px; color:#5a3d0c; }
.mm-listing-tag{ font-size:10px; color:#a98f52; border:1px solid #e6c877; border-radius:5px; padding:1px 6px; }
.mm-listing-exp{ font-size:11.5px; color:#7a5c26; margin-top:4px; display:flex; align-items:center; gap:5px; }
.mm-listing-exp.soon{ color:#d67b16; font-weight:600; }
.mm-listing-exp.expired{ color:#c0392b; font-weight:600; }
.mm-price{ text-align:right; white-space:nowrap; }
.mm-price-amt{ font:700 15px/1 'Consolas',monospace; font-variant-numeric:tabular-nums; display:flex; gap:5px; justify-content:flex-end; align-items:center; }
.mm-price.gp .mm-price-amt{ color:#a5720a; } .mm-price.cash .mm-price-amt{ color:#8a3fc0; }
.mm-price-kind{ font-size:10px; text-transform:uppercase; letter-spacing:.08em; margin-top:2px; }
.mm-price.gp .mm-price-kind{ color:#c98a12; } .mm-price.cash .mm-price-kind{ color:#8a3fc0; }

@media (max-width:560px){
    .mm-window-body{ padding:12px; }
    .mm-grid{ grid-template-columns:repeat(auto-fill, minmax(48px,1fr)); }
    .mm-market-grid{ grid-template-columns:1fr; }
}


/* ══════════════════════════════════════════════════════════════════
   Vue COMPÉTENCES (menu de #player_hench, data-view="skills")
   Icônes : Wiki/Templates/data/skills/icons (30×30, fichier = n°-1).
   ══════════════════════════════════════════════════════════════════ */
.mm-skill-liste{ display:flex; flex-direction:column; gap:8px; padding:4px 2px;
    overflow-y:auto; overscroll-behavior:contain; }
/* Carte CLAIRE (parchemin, comme .mm-gold-foot) : textes brun foncé lisibles
   sur le fond beige de la page — l'ancienne carte semi-transparente laissait
   du doré pâle / orange sur beige, illisible. */
.mm-skill{ display:flex; gap:10px; align-items:flex-start;
    background:linear-gradient(90deg,#fff3d3,#fff9e8); border:1px solid #e6c877;
    border-radius:8px; padding:8px 10px; }
.mm-skill-ico{ width:30px; height:30px; image-rendering:pixelated; flex:0 0 auto;
    border:1px solid #d9b96a; border-radius:5px; background:rgba(58,38,6,.85); }
.mm-skill-corps{ flex:1 1 auto; min-width:0; }
.mm-skill-entete{ display:flex; align-items:center; justify-content:space-between; gap:8px; }
.mm-skill-nom{ font-weight:bold; color:#5a3c08; }
.mm-skill-niv{ font-size:11px; color:#7a4d06; background:#fdeec3;
    border:1px solid #d9b96a; border-radius:9px; padding:1px 8px; white-space:nowrap; }
.mm-skill-max{ color:#9c6a00; border-color:#c98a12; font-weight:bold; }
.mm-skill-desc{ font-size:11px; color:#6b5527; margin-top:2px; line-height:1.45; }
.mm-skill-stats{ font-size:11px; color:#8a5c04; margin-top:3px; font-weight:bold; }
.mm-skill-sp{ position:relative; height:14px; margin-top:6px;
    background:#f3e3b6; border:1px solid #d9b96a;
    border-radius:7px; overflow:hidden; }
.mm-skill-sp-bar{ position:absolute; top:0; left:0; bottom:0;
    background:linear-gradient(180deg,#f7d045,#c98a12); }
.mm-skill-sp-txt{ position:relative; display:block; text-align:center;
    font-size:10px; line-height:14px; color:#4a3106; }


/* ── Vue STATISTIQUES (data-view="stats") ── */
.mm-stat-sec{ margin:10px 2px 4px; font-weight:bold; color:#ffd657;
    text-shadow:0 1px 2px rgba(0,0,0,.55); border-bottom:1px solid rgba(247,208,69,.35);
    padding-bottom:3px; font-size:12px; text-transform:uppercase; letter-spacing:.4px; }
.mm-stat{ display:flex; justify-content:space-between; align-items:center; gap:10px;
    padding:4px 8px; border-radius:6px; }
.mm-stat:nth-child(even){ background:rgba(30,18,4,.22); }
.mm-stat-l{ color:#e8d3a0; font-size:12px; }
.mm-stat-v{ color:#ffe9b0; font-weight:bold; font-size:12px; }
.mm-stat-res{ display:flex; flex-wrap:wrap; gap:6px 14px; padding:4px 8px; }
.mm-stat-res-i{ white-space:nowrap; font-size:12px; }